/* Hospit — charte de tuto.neuroveto.fr (Manrope, encre, accent bleu) */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(polices/manrope-latin-wght-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(polices/manrope-latin-ext-wght-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
  --paper: #ffffff; --surface: #f6f7f8; --ink: #1a1d23; --muted-ink: #6b7280; --line: #e8eaed; --champ: #c9cdd3; --survol: #d4d7dc;
  --accent: #1d4ed8; --accent-fort: #1e40af; --accent-soft: #eaf0fd; --accent-ink: #1e3a8a; --primaire-survol: #2a2e36;
  --danger: #b42318; --danger-soft: #fbe9e8; --danger-ligne: #f3d4d1; --success: #166534; --success-soft: #e7f3ea;
  --alerte: #8a5a1f; --alerte-soft: #fdf3ea; --maintenant: #fff8d6; --maintenant-fort: #fbe9a6;
  --neutre: #e5e7eb; --neutre-ink: #374151; --categorie: #eef1f3; --fait: #1d4ed8; --courant: #fde68a; --sur-plein: #ffffff;
  --orange-fond: #fff1e0; --orange-ligne: #f0a14a; --orange-ink: #8a4b0c; --violet-fond: #f3effd; --violet-ink: #5b21b6; --violet-ligne: #ddd0fa;
  --cote: #1a1d23; --ombre: rgba(26, 29, 35, .45);
}
/* thème sombre (gardes de nuit) : mêmes rôles, valeurs propres ; l'impression reste claire */
@media screen and (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --paper: #15171c; --surface: #1e2128; --ink: #e7e9ee; --muted-ink: #9ca3af; --line: #2c3039; --champ: #4b5160; --survol: #3a3f4a;
    --accent: #8db0ff; --accent-fort: #b3caff; --accent-soft: #1c2742; --accent-ink: #c7d7ff; --primaire-survol: #c9ccd3;
    --danger: #f28b82; --danger-soft: #3a1d1c; --danger-ligne: #6b2b27; --success: #6fd394; --success-soft: #16301f;
    --alerte: #f2c48a; --alerte-soft: #33271a; --maintenant: #2b2716; --maintenant-fort: #4a4120;
    --neutre: #343944; --neutre-ink: #d1d5db; --categorie: #23262e; --fait: #8db0ff; --courant: #fbbf24; --sur-plein: #15171c;
    --orange-fond: #33241a; --orange-ligne: #b8732a; --orange-ink: #f5c08a; --violet-fond: #261f3d; --violet-ink: #c9b6ff; --violet-ligne: #45386e;
    --cote: #0d0e11; --ombre: rgba(0, 0, 0, .6);
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: 'Manrope', system-ui, sans-serif; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; font-size: 15px; line-height: 1.6; overflow-x: clip; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: not-allowed; opacity: .5; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 24px; font-weight: 700; letter-spacing: -.5px; }
h2 { font-size: 17px; font-weight: 700; letter-spacing: -.3px; }
h3 { font-size: 15px; font-weight: 700; }
.petit { font-size: 12.5px; }
.discret { color: var(--muted-ink); }
.alerte-texte { color: var(--danger); }
code { font-size: 12px; background: var(--surface); padding: 2px 5px; border-radius: 4px; word-break: break-all; }

/* en-tête */
.site-header { background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.header-inner { max-width: 1400px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 20px; }
.brand { display: flex; align-items: center; gap: 11px; font-size: 15px; font-weight: 700; letter-spacing: -.3px; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--ink); color: var(--paper); flex-shrink: 0; }
.brand small { display: block; font-size: 10px; font-weight: 500; letter-spacing: .3px; color: var(--muted-ink); }
.main-nav { display: flex; gap: 4px; font-size: 14px; font-weight: 500; margin-right: auto; }
.main-nav a { padding: 8px 12px; border-radius: 8px; color: var(--muted-ink); }
.main-nav a:hover { background: var(--surface); color: var(--ink); }
.main-nav a.active { color: var(--ink); background: var(--surface); }
.sortir { display: flex; align-items: center; gap: 10px; }
.moi { font-size: 13px; font-weight: 600; }
.contenu { max-width: 1400px; margin: 0 auto; padding: 28px 24px 80px; }

/* boutons */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 9px 17px; border-radius: 8px; font-size: 14px; font-weight: 600; border: 1px solid transparent; transition: background .15s, border-color .15s; white-space: nowrap; }
.button:active { transform: scale(.98); }
.button-primary { background: var(--ink); color: var(--paper); }
.button-primary:hover { background: var(--primaire-survol); }
.button-accent { background: var(--accent); color: var(--sur-plein); }
.button-accent:hover { background: var(--accent-fort); }
.button-outline { border-color: var(--line); background: var(--paper); }
.button-outline:hover { background: var(--surface); border-color: var(--survol); }
.button-ghost { color: var(--muted-ink); }
.button-ghost:hover { background: var(--surface); color: var(--ink); }
.button-sm { min-height: 36px; padding: 6px 12px; font-size: 13px; }
.button.danger, .icon-button.danger { color: var(--danger); }
.button.danger:hover, .icon-button.danger:hover { background: var(--danger-soft); }
.icon-button { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; min-height: 38px; border-radius: 8px; color: var(--muted-ink); font-size: 16px; }
.icon-button:hover { background: var(--surface); color: var(--ink); }
.text-link { color: var(--accent); font-weight: 600; font-size: 14px; }
.text-link:hover { color: var(--accent-fort); }
.boutons { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.boutons-ligne { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }

/* étiquettes */
.etiquettes { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-flex; align-items: center; gap: 5px; background: var(--surface); color: var(--muted-ink); font-size: 12px; padding: 3px 9px; border-radius: 6px; font-weight: 500; }
.tag-accent { background: var(--accent-soft); color: var(--accent); }
.tag-success { background: var(--success-soft); color: var(--success); }
.tag-danger { background: var(--danger-soft); color: var(--danger); font-weight: 600; }
.tag-alerte { background: var(--alerte-soft); color: var(--alerte); }
.tag-muted { background: transparent; border: 1px solid var(--line); }

/* connexion (comme tuto) */
.auth-page { max-width: 1040px; padding: 56px 32px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; min-height: 80vh; }
.auth-aside { background: var(--cote); color: #e2e5ea; border-radius: 14px 0 0 14px; padding: 48px 44px; display: flex; flex-direction: column; justify-content: space-between; }
.auth-aside .brand { color: var(--sur-plein); margin-bottom: 36px; }
.auth-aside .brand-mark { background: #fff; color: #1a1d23; }
.auth-aside h1 { font-size: 30px; line-height: 1.25; margin-bottom: 16px; color: var(--sur-plein); }
.auth-aside > div > p { font-size: 14px; line-height: 1.7; color: #a8adb8; max-width: 340px; }
.auth-foot { font-size: 12px; color: #9aa0ab; line-height: 1.7; }
.auth-panel { border: 1px solid var(--line); border-left: 0; border-radius: 0 14px 14px 0; padding: 48px 44px; display: flex; flex-direction: column; justify-content: center; }
.auth-lock { display: grid; place-items: center; width: 44px; height: 44px; background: var(--accent-soft); color: var(--accent); border-radius: 10px; margin-bottom: 22px; }
.auth-panel h2 { font-size: 22px; margin-bottom: 8px; }
.auth-panel > p { font-size: 14px; color: var(--muted-ink); margin-bottom: 28px; }
.access-note { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 13px; }
.access-note p { color: var(--muted-ink); margin-top: 4px; }
.access-note .text-link { display: inline-block; margin-top: 8px; font-size: 13px; }

/* formulaires */
.form-stack { display: flex; flex-direction: column; gap: 16px; }
.form-stack label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
.form-stack input:not([type=checkbox]):not([type=radio]):not([type=file]), .form-stack select, .form-stack textarea, .table-simple select, .form-ligne input, .form-ligne select { width: 100%; background: var(--paper); border: 1px solid var(--champ); padding: 9px 12px; min-height: 42px; border-radius: 8px; font-size: 15px; font-weight: 500; }
.form-stack input:focus, .form-stack select:focus, .form-stack textarea:focus { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; }
.form-stack textarea { resize: vertical; }
.form-stack small { color: var(--muted-ink); font-size: 12px; font-weight: 400; }
.form-error { color: var(--danger); background: var(--danger-soft); border: 1px solid var(--danger-ligne); padding: 10px 13px; border-radius: 8px; font-size: 13px; }
.form-error[hidden] { display: none; }
.deux-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.trois-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.form-ligne { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.form-ligne input { flex: 1 1 160px; width: auto; }
.form-ligne select { flex: 0 1 240px; width: auto; }

/* accueil */
.panel-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.panel-heading p { color: var(--muted-ink); font-size: 13px; margin-top: 3px; }
.grille-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.carte-animal { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; transition: border-color .15s, box-shadow .15s; }
.carte-animal:hover { border-color: var(--survol); box-shadow: 0 2px 10px rgba(26, 29, 35, .06); }
.carte-animal.a-retard { border-color: var(--danger-ligne); }
.carte-animal-tete { display: flex; gap: 12px; align-items: center; }
.avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-weight: 700; flex-shrink: 0; }
.bloc { border: 1px solid var(--line); border-radius: 12px; padding: 18px; margin-bottom: 18px; }
.bloc h2 { margin-bottom: 10px; }
.espace-haut { margin-top: 18px; }
.liste-sorties { list-style: none; margin: 0; padding: 0; }
.liste-sorties li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.liste-sorties li:last-child { border-bottom: 0; }
.vide { color: var(--muted-ink); padding: 30px 0; }
.loading-state { color: var(--muted-ink); }
.note-essai { margin-top: 24px; font-size: 12.5px; color: var(--alerte); background: var(--alerte-soft); padding: 9px 13px; border-radius: 8px; }

/* fiche animal */
.retour { display: inline-block; margin-bottom: 14px; }
.fiche-tete { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; }
.fiche-tete h1 .discret { font-size: 15px; font-weight: 500; }
.fiche-tete .etiquettes { margin-top: 8px; }
.motif { margin-top: 8px; font-size: 14px; color: var(--muted-ink); }
.actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-start; }
.bandeau { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 16px; border-radius: 10px; margin-bottom: 12px; font-size: 14px; }
.bandeau p { font-size: 13px; margin-top: 2px; }
.bandeau-sortie { background: var(--accent-soft); color: var(--accent-ink); }
.bandeau-retard { background: var(--danger-soft); color: var(--danger); display: block; }
.jour-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 20px 0 10px; }
.jour-nav h2::first-letter { text-transform: uppercase; }

/* grille de 24 h */
.grille-defile { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; -webkit-overflow-scrolling: touch; }
.grille { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: 12px; }
.grille th, .grille td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: 0; text-align: center; }
.grille thead th { background: var(--surface); font-weight: 600; color: var(--muted-ink); padding: 6px 0; width: 46px; min-width: 46px; position: sticky; top: 0; }
.grille .libelle { position: sticky; left: 0; z-index: 2; background: var(--paper); text-align: left; width: 230px; min-width: 230px; max-width: 230px; }
.grille thead th.libelle { background: var(--surface); padding-left: 12px; z-index: 3; }
.ligne-cat th { background: var(--categorie); text-align: left; padding: 5px 12px; font-size: 12px; font-weight: 700; position: sticky; left: 0; }
.ligne-cat td { background: var(--categorie); }
.libelle-bouton { display: block; width: 100%; text-align: left; padding: 6px 12px; }
.libelle-bouton strong { color: var(--accent); font-size: 12.5px; }
.libelle-bouton span { display: block; color: var(--muted-ink); font-size: 11px; line-height: 1.35; }
.libelle-bouton:hover { background: var(--surface); }
tr.arretee .libelle-bouton strong { color: var(--muted-ink); text-decoration: line-through; }
.pastille-alerte { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--danger); color: var(--sur-plein); font-size: 10px; font-weight: 800; }
.case { height: 40px; }
.case button { display: block; width: 100%; height: 40px; font-size: 11px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
.case button:hover { background: var(--accent-soft); }
.case.prevue button, .case.prevue { color: var(--neutre-ink); }
.case .puce { display: block; margin: 6px 3px; height: 28px; line-height: 28px; border-radius: 5px; font-size: 11px; font-weight: 600; overflow: hidden; white-space: nowrap; }
.case.prevue .puce { background: var(--neutre); color: var(--neutre-ink); }
.case.retard .puce { background: var(--danger); color: var(--sur-plein); }
.case.prevue button { background: var(--neutre); margin: 6px 3px; width: calc(100% - 6px); height: 28px; border-radius: 5px; }
.case.retard button { background: var(--danger); color: var(--sur-plein); margin: 6px 3px; width: calc(100% - 6px); height: 28px; border-radius: 5px; }
.case.fait button { background: var(--fait); color: var(--sur-plein); margin: 6px 3px; width: calc(100% - 6px); height: 28px; border-radius: 5px; }
.case.non-fait button { background: var(--paper); color: var(--danger); border: 1.5px solid var(--danger); margin: 6px 3px; width: calc(100% - 6px); height: 28px; border-radius: 5px; }
.grille .maintenant { background: var(--maintenant); }
.grille thead th.maintenant { background: var(--maintenant-fort); color: var(--ink); }
.legende { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--muted-ink); margin: 8px 0 18px; }
.case-ex { display: inline-block; width: 16px; height: 11px; border-radius: 3px; margin-left: 8px; }
.case-ex.prevue { background: var(--neutre); }
.case-ex.retard { background: var(--danger); }
.case-ex.fait { background: var(--fait); }
.case-ex.non-fait { border: 1.5px solid var(--danger); }
.deux-blocs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 24px; }
.note { padding: 8px 0; border-bottom: 1px solid var(--line); }
.note:last-child { border-bottom: 0; }
.note p { white-space: pre-line; font-size: 14px; }
.table-simple { width: 100%; border-collapse: collapse; font-size: 14px; }
.table-simple th { text-align: left; font-size: 12px; color: var(--muted-ink); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.table-simple td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table-simple tr.arretee td { opacity: .5; }
.table-simple select { min-height: 36px; padding: 5px 9px; font-size: 13px; }
.num { text-align: right; white-space: nowrap; }
.table-defile { overflow-x: auto; }
.table-meds td { font-size: 13px; }
.journal td:first-child { white-space: nowrap; }
.code-provisoire { background: var(--accent-soft); border-radius: 10px; padding: 12px 16px; margin: 12px 0; font-size: 14px; }
.code-provisoire .code { font-size: 22px; font-weight: 800; letter-spacing: 4px; margin-left: 6px; }

/* dialogues */
.dialogue { background: var(--paper); border: 0; border-radius: 14px; padding: 0; width: min(520px, calc(100vw - 24px)); max-height: calc(100vh - 32px); box-shadow: 0 20px 60px rgba(26, 29, 35, .25); color: var(--ink); }
.dialogue-large { width: min(820px, calc(100vw - 24px)); }
.dialogue::backdrop { background: var(--ombre); }
.dialogue-tete { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 16px 18px 10px 22px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--paper); z-index: 1; }
.dialogue-corps { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 12px; }
.posologie { font-size: 15px; background: var(--accent-soft); color: var(--accent-ink); padding: 10px 13px; border-radius: 8px; }
.consigne { background: var(--surface); padding: 9px 12px; border-radius: 8px; font-size: 14px; white-space: pre-line; }
.calcul { background: var(--accent-soft); color: var(--accent-ink); padding: 9px 12px; border-radius: 8px; font-size: 14px; margin-top: 10px; }
.calcul[hidden], .ref[hidden], [data-med][hidden], [data-autre][hidden], .alertes[hidden] { display: none; }
.ref { margin: 6px 0 10px; color: var(--muted-ink); }
.alertes { background: var(--danger-soft); color: var(--danger); padding: 10px 13px; border-radius: 8px; }
.alertes ul { margin: 0 0 10px; padding-left: 18px; font-size: 13px; }
.alertes label { color: var(--ink); }
.details { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; font-size: 14px; }
.details dt { color: var(--muted-ink); font-size: 13px; }
.details dd { margin: 0; }
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: 10px 18px; border-radius: 10px; font-size: 14px; font-weight: 600; z-index: 50; max-width: calc(100vw - 32px); }
.toast-erreur { background: var(--danger); }
.toast[hidden] { display: none; }

/* relevé imprimable */
.barre-impression { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 24px; border-bottom: 1px solid var(--line); background: var(--surface); }
.releve { max-width: 960px; margin: 0 auto; padding: 28px 24px 60px; }
.releve-tete { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; border-bottom: 2px solid var(--ink); padding-bottom: 14px; margin-bottom: 8px; }
.releve-tete dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); overflow-wrap: anywhere; gap: 2px 14px; margin: 0; font-size: 13px; }
.releve-tete dt { color: var(--muted-ink); }
.releve-tete dd { margin: 0; font-weight: 600; }
.releve h2 { margin: 20px 0 6px; font-size: 15px; }
.releve p { font-size: 13px; margin-bottom: 4px; }
.table-releve { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.table-releve th { text-align: left; border-bottom: 1px solid var(--ink); padding: 4px 6px; font-size: 11.5px; }
.table-releve td { border-bottom: 1px solid var(--line); padding: 6px; vertical-align: top; }
.table-releve { table-layout: fixed; }
.table-releve th:first-child { width: 38%; }
.table-releve th.num { width: 14%; text-align: right; }
.releve-pied { margin-top: 30px; font-size: 11px; color: var(--muted-ink); border-top: 1px solid var(--line); padding-top: 8px; }
@media print {
  .barre-impression { display: none; }
  .releve { padding: 0; max-width: none; }
  body { font-size: 12px; }
  .table-releve tr { break-inside: avoid; }
  @page { margin: 14mm; @bottom-right { content: counter(page) " / " counter(pages); font-size: 9pt; } }
}

/* téléphone */
@media (max-width: 760px) {
  .header-inner { padding: 10px 16px; flex-wrap: wrap; gap: 8px; }
  .brand small { display: none; }
  .main-nav { order: 3; width: 100%; overflow-x: auto; }
  .sortir { margin-left: auto; }
  .moi { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .contenu { padding: 18px 16px 70px; }
  .auth-page { grid-template-columns: 1fr; padding: 16px; }
  .auth-aside { border-radius: 14px 14px 0 0; padding: 28px 24px; }
  .auth-aside h1 { font-size: 24px; }
  .auth-panel { border-left: 1px solid var(--line); border-top: 0; border-radius: 0 0 14px 14px; padding: 28px 24px; }
  .deux-col, .trois-col, .deux-blocs { grid-template-columns: 1fr; }
  .grille .libelle { width: 150px; min-width: 150px; max-width: 150px; }
  .libelle-bouton span { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .main-nav { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .releve { padding: 18px 16px 40px; }
}
.resultats { list-style: none; margin: -8px 0 0; padding: 4px; border: 1px solid var(--line); border-radius: 8px; max-height: 260px; overflow-y: auto; }
.resultats[hidden] { display: none; }
.resultats button { display: block; width: 100%; text-align: left; padding: 7px 9px; border-radius: 6px; font-size: 13px; }
.resultats button:hover { background: var(--accent-soft); }
.resultats button span { display: block; color: var(--muted-ink); font-size: 12px; }
.case-a-cocher { flex-direction: row !important; align-items: flex-start; gap: 10px !important; font-weight: 500 !important; }
.case-a-cocher input { accent-color: var(--accent); width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; }
.table-simple td.boutons-ligne { display: table-cell; white-space: nowrap; text-align: right; }
.table-simple td.boutons-ligne > * { margin-left: 4px; }
.tag { white-space: nowrap; }
.bandeau-sans-ref { background: var(--orange-fond); border: 1.5px solid var(--orange-ligne); color: var(--orange-ink); border-radius: 8px; padding: 10px 13px; margin-top: 10px; font-size: 14px; }
.bandeau-sans-ref[hidden] { display: none; }
.bandeau-sans-ref p { font-size: 13px; margin: 3px 0 8px; }
.bandeau-sans-ref .case-a-cocher { color: var(--ink); font-size: 14px; }
.badge-sans-ref { display: inline-block; background: var(--orange-fond); color: var(--orange-ink); border: 1px solid var(--orange-ligne); border-radius: 5px; padding: 0 5px; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.button-alerte { background: var(--orange-fond); border-color: var(--orange-ligne); color: var(--orange-ink); }
@media print { .badge-sans-ref { border: 1px solid #000; color: #000; background: none; } }
.libelle-bouton .badge-sans-ref { display: inline-block; color: var(--orange-ink); font-size: 10px; margin-left: 4px; vertical-align: 1px; }
.bandeau-recalcul { background: var(--violet-fond); color: var(--violet-ink); border: 1px solid var(--violet-ligne); }
/* état clinique (cœurs, comme Pet Universal) */
.coeur { font-size: 15px; line-height: 1; color: var(--muted-ink); }
.coeur-critique { color: #dc2626; } .coeur-surveiller { color: #f59e0b; } .coeur-stable { color: #10b981; }
.etats { display: inline-flex; gap: 10px; margin-left: 12px; vertical-align: 3px; }
.etats .coeur { width: 40px; height: 40px; border-radius: 8px; font-size: 19px; opacity: .55; filter: grayscale(.6); }
.etats .coeur:hover { background: var(--surface); opacity: .7; }
.etats .coeur.actif { opacity: 1; filter: none; background: var(--surface); box-shadow: inset 0 0 0 1.5px currentColor; }
/* tableau de service */
.tableau td { vertical-align: top; padding: 4px 3px; min-width: 150px; }
.tableau thead th { width: auto; min-width: 150px; }
.tableau .libelle { width: 210px; min-width: 210px; }
.grille .tab-animal { padding: 8px 12px; vertical-align: top; text-align: left; }
.tab-animal a { display: block; color: var(--accent); }
.tab-animal .petit { display: block; margin-bottom: 4px; }
.tab-animal .tag { margin: 2px 2px 0 0; }
.puce-t { display: block; width: 100%; margin: 0 0 3px; padding: 3px 6px; border-radius: 5px; font-size: 11.5px; font-weight: 600; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.puce-t.prevue { background: var(--neutre); color: var(--neutre-ink); }
.puce-t.courant { background: var(--courant); color: #1a1d23; }
.puce-t.retard { background: var(--danger); color: var(--sur-plein); }
.puce-t.fait { background: var(--fait); color: var(--sur-plein); }
.puce-t.non-fait { background: var(--paper); color: var(--danger); border: 1.5px solid var(--danger); }
.case-ex.courant { background: var(--courant); }
details.modele { border-top: 1px solid var(--line); padding: 10px 0; }
details.modele summary { cursor: pointer; }
details.modele ul { margin: 8px 0; padding-left: 18px; font-size: 13.5px; }
[data-debit][hidden] { display: none; }
.lien-oubli { margin-top: 14px; font-size: 13px; } .succes { background: var(--success-soft); color: var(--success); padding: 11px 14px; border-radius: 8px; font-size: 14px; margin-bottom: 14px; }
.lien-email { font-size: 13px; color: var(--ink); text-align: left; }
.lien-email:hover { color: var(--accent); text-decoration: underline; }
details.masse { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
details.masse summary { cursor: pointer; font-weight: 600; color: var(--accent); font-size: 14px; margin-bottom: 10px; }
.suggestions-admin { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.suggestions-admin ul { list-style: none; padding: 0; margin: 6px 0; font-size: 13.5px; }
.suggestions-admin li { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.suggestions-admin .icon-button { min-width: 28px; min-height: 28px; font-size: 12px; }
.suggestions-admin .form-ligne { margin-top: 6px; }
label.cree { opacity: .55; text-decoration: line-through; }
.coeur { position: relative; }
.coeur-lettre { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); font-size: .45em; font-weight: 800; color: var(--paper); }
.etat-texte { font-size: 13px; font-weight: 600; margin-left: 6px; vertical-align: 6px; }
.coeur-critique.etat-texte { color: var(--danger); } .coeur-surveiller.etat-texte { color: var(--alerte); } .coeur-stable.etat-texte { color: var(--success); }
.grille .tab-animal { position: sticky; left: 0; z-index: 2; background: var(--paper); }
.legende .leg { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.table-simple select { min-width: 140px; }
.espace-gauche { margin-left: 10px !important; }
[data-med], [data-autre] { display: flex; flex-direction: column; gap: 16px; }
.hors-ligne { position: relative; z-index: 40; background: var(--alerte-soft); color: var(--alerte); border-bottom: 1px solid var(--alerte); padding: 8px 16px; font-size: 13px; font-weight: 600; text-align: center; }
.retour, .jour-nav .text-link, .lien-oubli a, details.modele .text-link { display: inline-block; padding-block: 8px; }
.visa { display: flex; gap: 40px; margin-top: 28px; font-size: 12.5px; }
.visa span { flex: 1; border-bottom: 1px solid var(--ink); padding-bottom: 34px; }
/* écrans tactiles : cibles d'au moins 40 px */
@media (pointer: coarse) {
  .case button, .case.prevue button, .case.retard button, .case.fait button, .case.non-fait button { margin: 2px; width: calc(100% - 4px); height: 36px; }
  .case .puce { margin: 2px; height: 36px; line-height: 36px; }
  .puce-t { padding: 9px 6px; }
  .suggestions-admin .icon-button { min-width: 40px; min-height: 40px; }
}
.tableau .tab-animal { width: 210px; min-width: 210px; max-width: 210px; }
.case-ex.prevue { box-shadow: inset 0 0 0 1px var(--champ); }
@media (max-width: 760px) {
  .tableau .libelle, .tableau .tab-animal { width: 120px; min-width: 120px; max-width: 120px; }
  .grille .tab-animal { padding: 8px; }
  .tableau td, .tableau thead th { min-width: 110px; }
  .table-releve th.num { width: 18%; }
}
.table-releve th.num { white-space: normal; }
.tab-animal .tag { white-space: normal; }
.libelle-bouton .pastille-alerte { display: inline-grid; color: var(--sur-plein); font-size: 10px; margin-left: 4px; vertical-align: 1px; }

/* alerte de sécurité de l'animal (chimio, morsure…) : bandeau orange plein, comme Pet Universal */
.alerte-animal { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--orange-fond); border: 2px solid var(--orange-ligne); color: var(--orange-ink); border-radius: 10px; padding: 12px 16px; margin-bottom: 14px; font-size: 17px; }
.alerte-animal > span { font-size: 22px; line-height: 1; }
.alerte-animal strong { flex: 1; min-width: 12ch; }
.alerte-animal .button { color: var(--orange-ink); }
.alerte-animal-mini { display: block; background: var(--orange-fond); border: 1px solid var(--orange-ligne); color: var(--orange-ink); border-radius: 6px; padding: 3px 8px; margin: 6px 0; font-size: 12.5px; font-weight: 700; }
.remarques { white-space: pre-line; font-size: 14px; }
@media print { .alerte-animal { border-width: 3px; } }
[data-remarques] .button { align-self: flex-start; }
[data-remarques] .button[hidden] { display: none; }

/* prescription par molécule : recherche, calculateur des présentations, médicament hors référentiel */
.resultats { display: grid; gap: 6px; margin-top: 6px; }
.resultat { display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); }
.resultat:hover, .resultat:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.molecule-choisie { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-ink); }
.molecule-choisie strong { font-size: 16px; }
.encadre, .calculateur { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 0; display: grid; gap: 10px; min-width: 0; }
.encadre legend, .calculateur legend { padding: 0 6px; font-size: 13px; font-weight: 700; }
.option-presentation { display: flex; flex-direction: row !important; gap: 10px !important; align-items: flex-start; padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; font-weight: 400 !important; font-size: 14px !important; }
.option-presentation.choisie { border-color: var(--accent); background: var(--accent-soft); }
.option-presentation input { margin-top: 4px; accent-color: var(--accent); width: 18px; height: 18px; flex-shrink: 0; }
.option-presentation > span { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
.option-presentation .petit { flex-basis: 100%; }
.badge-conseil, .badge-alerte { display: inline-block; border-radius: 5px; padding: 0 6px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.badge-conseil { background: var(--success-soft); color: var(--success); }
.badge-alerte { background: var(--alerte-soft); color: var(--alerte); }
.recalc { color: var(--violet-ink); font-weight: 600; }
.historique-doses { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.recalcul-item { display: grid; gap: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.recalcul-item select { max-width: 100%; }
/* un élément marqué hidden reste caché, quel que soit son display */
.molecule-choisie[hidden], .encadre[hidden], .calculateur[hidden], [data-dose][hidden], [data-recherche][hidden] { display: none; }
.resultats:empty { display: none; }
.groupe-voie { margin: 4px 0 -2px; font-size: 12px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--muted-ink); }

/* courbes : une petite courbe par constante (une seule série, donc pas de légende : le titre la nomme) */
.grille-courbes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.courbe { margin: 0; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px 6px; min-width: 0; }
.courbe figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13px; font-weight: 600; }
.courbe figcaption strong { font-size: 17px; }
.trace { position: relative; touch-action: pan-y; }
.trace svg { display: block; overflow: visible; }
.c-ligne { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.c-point { fill: var(--accent); stroke: var(--paper); stroke-width: 2; }
.c-grille { stroke: var(--line); stroke-width: 1; }
.c-jour { stroke: var(--line); stroke-width: 1; }
.c-usuel { fill: var(--neutre); opacity: .45; }
.c-axe { fill: var(--muted-ink); font-size: 11px; font-family: inherit; }
.c-curseur { stroke: var(--muted-ink); stroke-width: 1; }
.c-bulle { position: absolute; top: 0; left: var(--x); transform: translateX(8px); background: var(--paper); border: 1px solid var(--line); box-shadow: 0 4px 14px var(--ombre); border-radius: 8px; padding: 5px 9px; font-size: 12px; white-space: nowrap; pointer-events: none; color: var(--ink); }
.c-bulle[data-cote="gauche"] { transform: translateX(calc(-100% - 8px)); }
.c-bulle[hidden] { display: none; }
.valeurs { margin-top: 12px; }
.valeurs summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.valeurs h3 { font-size: 14px; margin: 12px 0 4px; }

/* saisies faites sans réseau */
.file-attente { position: sticky; top: 0; z-index: 30; background: var(--orange-fond); color: var(--orange-ink); border-bottom: 1px solid var(--orange-ligne); padding: 8px 16px; font-size: 13px; display: grid; gap: 6px; }
.file-attente p { margin: 0; }
.file-attente .rejet { border-top: 1px solid var(--orange-ligne); padding-top: 6px; }
.case.attente { background: var(--orange-fond); text-align: center; }
/* case à venir : le vétérinaire y décale les prises */
.case.planifiable button:hover, .case.planifiable button:focus-visible { outline: 1px dashed var(--accent); outline-offset: -2px; }

/* heures choisies */
.heures-choisies { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 0; }
.heures-choisies[hidden] { display: none; }
.heures-choisies legend { font-size: 13px; font-weight: 700; padding: 0 6px; }
.puces-heures { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 6px; }
.puce-heure { flex-direction: row !important; gap: 0 !important; }
.puce-heure input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.puce-heure span { display: block; width: 100%; text-align: center; padding: 6px 0; border: 1px solid var(--champ); border-radius: 7px; font-weight: 600; cursor: pointer; }
.puce-heure input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--sur-plein); }
.puce-heure input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }

/* audit du 03/11 (nuit) */
.tag-violet { background: var(--violet-fond); color: var(--violet-ink); }
.bandeau-non-fait { background: var(--alerte-soft); color: var(--alerte); display: block; border: 1px solid var(--alerte); }
/* case prévue : bordure comme dans la légende, pour la distinguer d'une case vide */
.case.prevue button, .case.prevue .puce { box-shadow: inset 0 0 0 1px var(--champ); }
.puce-t.attente { background: var(--orange-fond); color: var(--orange-ink); }
/* actions secondaires de la fiche repliées */
.plus { position: relative; display: inline-block; }
.plus > summary { list-style: none; cursor: pointer; }
.plus > summary::-webkit-details-marker { display: none; }
.plus-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; display: grid; gap: 6px; min-width: 190px; padding: 8px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px var(--ombre); }
.plus-menu .button { justify-content: flex-start; width: 100%; }
.resultat-interdit { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }