/* ============================================================================
   officine.app — feuille de style unique.
   Ancienne direction « double rail » retirée ; la refonte est fusionnée ici
   (refonte.css n'est plus chargée). Ses règles gardent leur poids d'origine
   grâce au préfixe « :root body » (l'ancien « body.refonte »). Jetons dans :root, composants nommés
   (.btn, .card, .tbl, .field…). Revue d'accessibilité appliquée le 2026-10-14.
   ============================================================================ */

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url('/assets/fonts/manrope.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+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: 300 800;
    font-display: swap;
    src: url('/assets/fonts/manrope-ext.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 {
    --ground: #f1f1f1;
    --ground-2: #e9eae9;
    --surface: #ffffff;
    --ink: #14201a;
    --muted: #58645d;
    --faint: #737e77;
    --line: #e6eae7;
    --line-2: #d6dcd8;
    --accent: #1d5a40;
    --accent-ink: #154733;
    --accent-soft: #dcefe3;
    --ok: #1d5a40;
    --ok-bg: #dcefe3;
    --warn: #8f5d12;
    --warn-bg: #fbefd6;
    --danger: #a8402f;
    --danger-bg: #fbe4e0;
    --r: 12px;
    --r-card: 28px;
    --shadow: 0 1px 2px rgba(16, 40, 28, .04), 0 0px 24px -18px rgba(16, 40, 28, .60);
    --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono: ui-monospace, Menlo, Consolas, monospace;
    --rail-w: 76px;
    --rail-a: #0f3526;
    --rail-b: #1d4b38;
    --btn: #154733;
    --soft: #f4f7f4;
    --rail-open: 248px;
    --c-achat: #9bcfb0;
    --c-vente: #e6c58a;
    --c-ajustement: #a9bde3;
    --c-destruction: #e49a8a;
    --c-retour: #c3aee3;
    --control-border: #8c968f;
    --r-tile: 18px;
    --r-pill: 999px;
    --focus: var(--accent);
}

/* ============================================================================
   officine.app — feuille de style
   Direction « C — Double rail » : rail d'icônes + panneau de section + contenu.
   Jetons en variables CSS, composants nommés (.btn, .card, .tbl, .field…).
   ============================================================================ */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url('/assets/fonts/manrope.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+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: 300 800;
    font-display: swap;
    src: url('/assets/fonts/manrope-ext.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;
}
/* ---------------------------------------------------------------- jetons */
/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body {
    margin: 0; min-height: 100%;
    font-family: var(--font); font-weight: 400; font-size: 14px; line-height: 1.5;
    color: var(--ink); background: var(--ground);
    -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--ink); }
h1, h2, h3 { margin: 0; font-weight: 300; letter-spacing: -.01em; line-height: 1.15; }
p { margin: 0; }
code, .mono { font-family: var(--mono); font-size: .86em; }
strong, b { font-weight: 600; }
input, select, textarea, button { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { flex-shrink: 0; }
[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 { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--ink); color: #fff; padding: 8px 12px; border-radius: var(--r); }
.skip:focus { left: 8px; }
.num, .tnum { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: 13px; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.hidden { display: none !important; }
/* ---------------------------------------------------------------- coquille */
.shell { display: flex; min-height: 100vh; }
.avatar {
    width: 30px; height: 30px; border-radius: 999px; background: var(--accent-soft); color: var(--accent);
    display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; letter-spacing: .02em; flex-shrink: 0;
}
.avatar.is-lg { width: 40px; height: 40px; font-size: 14px; }
/* auteur d'une ligne de tableau : rond gris, c'est une information, pas une action */
.avatar.is-xs { width: 24px; height: 24px; font-size: 10px; letter-spacing: .01em; cursor: default;
    background: var(--ground-2); color: var(--muted); }
/* journal : « champ valeur → valeur » */
.jrn-diff { font-size: 13px; line-height: 1.7; }
.jrn-k { color: var(--faint); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; margin-right: 2px; }
/* encadré repliable : la liste ne s'ouvre que si on la demande */
.alert.as-details { display: block; }
.alert.as-details > summary { cursor: pointer; list-style: none; }
.alert.as-details > summary::-webkit-details-marker { display: none; }
.alert.as-details > summary::before { content: '▸ '; color: var(--faint); }
.alert.as-details[open] > summary::before { content: '▾ '; }
.alert.as-details > .body { margin-top: 8px; font-size: 13px; line-height: 1.7; }
/* contexte pharmacie (dans le panneau) */
.content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.main { flex: 1; padding: 32px 40px 48px; min-width: 0; }
.main > .inner { max-width: 1320px; }
/* ---------------------------------------------------------------- en-tête de page */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 26px; flex-wrap: wrap; }
.page-head .titles { display: flex; flex-direction: column; gap: 6px; }
.page-head h1 { font-size: 28px; }
.page-head .sub { font-size: 14px; color: var(--muted); }
.page-head .actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.eyebrow { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
.eyebrow.is-faint { color: var(--faint); }
h2.section { font-size: 20px; margin: 0 0 14px; }
/* ---------------------------------------------------------------- boutons */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px;
    border-radius: var(--r); font-size: 14px; font-weight: 600; white-space: nowrap; border: 1px solid transparent;
    background: transparent; color: var(--ink); text-decoration: none; transition: background .12s, border-color .12s, color .12s;
}
.btn svg { width: 16px; height: 16px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--accent-ink); color: #fff; }
.btn-secondary { background: var(--surface); border-color: var(--line-2); }
.btn-secondary:hover:not(:disabled) { background: #fff; border-color: var(--muted); color: var(--ink); }
.btn-ghost { color: var(--muted); padding: 0 10px; }
.btn-ghost:hover:not(:disabled) { color: var(--ink); background: rgba(28, 27, 24, .05); }
.btn-danger { color: var(--danger); }
.btn-danger:hover:not(:disabled) { background: var(--danger-bg); color: var(--danger); }
.btn-danger.is-solid { background: var(--danger); color: #fff; }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn-lg { height: 46px; padding: 0 22px; font-size: 15px; }
.btn-icon { width: 32px; height: 32px; padding: 0; border-radius: 6px; color: var(--muted); }
.btn-icon:hover:not(:disabled) { background: rgba(28, 27, 24, .06); color: var(--ink); }
.btn-icon svg { width: 15px; height: 15px; }
.btn-icon.is-danger:hover:not(:disabled) { color: var(--danger); background: var(--danger-bg); }
.btn-block { width: 100%; }
/* ---------------------------------------------------------------- cartes */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow), 0 1px 3px rgba(28, 27, 24, .05); min-width: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.card-head .title { font-size: 15px; font-weight: 500; display: flex; align-items: baseline; gap: 10px; }
.card-head .meta { font-size: 13px; color: var(--muted); }
.card-body { padding: 18px 20px; }
.card-body.is-tight { padding: 12px 14px; }
.card-foot { padding: 12px 18px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--muted); }
/* pied de carte en liste de renvois : tout collé à gauche, sur plusieurs lignes au besoin */
.card-foot.is-start { justify-content: flex-start; flex-wrap: wrap; gap: 6px; }
.card-foot.is-start .small { margin-right: 4px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack-sm { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.row.is-between { justify-content: space-between; }
.row.is-end { align-items: flex-end; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.grid-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.grid-main { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 22px; }
.mt { margin-top: 22px; }
.mt-lg { margin-top: 30px; }
.mb { margin-bottom: 16px; }
/* chiffres */
.kpi { display: flex; flex-direction: column; }
.kpi .value { font-size: 30px; font-weight: 300; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi .label { font-size: 13px; color: var(--muted); margin-top: 8px; }
.kpi .sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
/* tuiles de lien */
.tile { display: flex; align-items: center; gap: 14px; padding: 14px 16px; color: var(--ink); }
.tile:hover { color: var(--ink); }
.tile > span.ico { width: 38px; height: 38px; border-radius: var(--r); background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tile > span.ico svg { width: 18px; height: 18px; }
.tile .txt { display: flex; flex-direction: column; line-height: 1.3; flex: 1; min-width: 0; }
.tile .txt .name { font-size: 14px; }
.tile .txt .code { font-size: 12px; color: var(--muted); }
.tile .count { font-size: 22px; font-weight: 300; font-variant-numeric: tabular-nums; }
/* Chevron de fin de tuile : sans taille, un SVG sans width/height s'étire. */
.tile > svg { width: 16px; height: 16px; color: var(--faint); }
.tile .txt { min-width: 0; }
/* badges */
.badge { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .02em; background: var(--ground-2); color: var(--muted); white-space: nowrap; }
.badge-ok { background: var(--ok-bg); color: var(--ok); }
.badge-warn { background: var(--warn-bg); color: var(--warn); }
.badge-danger { background: var(--danger-bg); color: var(--danger); }
.badge-accent { background: var(--accent); color: #fff; }
/* décompte : ni achat (vert) ni vente (rouge) — un repère neutre */
.badge-count { background: #fff; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-2); }
/* alertes */
.alert { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--surface); font-size: 14px; }
.alert svg { width: 18px; height: 18px; margin-top: 1px; }
.alert-warn { background: var(--warn-bg); border-color: #ecd9b3; color: var(--warn); }
.alert-danger { background: var(--danger-bg); border-color: #efc9c2; color: var(--danger); }
.alert-ok { background: var(--ok-bg); border-color: #c9e0d0; color: var(--ok); }
.alert .body { flex: 1; }
.alert .body a { font-weight: 600; text-decoration: underline; color: inherit; }
/* ---------------------------------------------------------------- champs */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .field > .label { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .03em; }
.field .req { color: var(--danger); }
.field .wrap { position: relative; display: flex; }
.field .wrap > svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--muted); pointer-events: none; }
.field .wrap > svg + input:not([type=checkbox]):not([type=radio]) { padding-left: 40px; }
.field .wrap .caret { position: absolute; left: auto; right: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--muted); pointer-events: none; }
.input, .field input:not([type=checkbox]):not([type=radio]), .field select, .field textarea {
    height: 38px; width: 100%; border: 1px solid var(--control-border); border-radius: var(--r); padding: 0 12px;
    font-size: 14px; font-weight: 500; color: var(--ink); background: #fff; outline: none; letter-spacing: .01em;
    transition: border-color .12s, box-shadow .12s;
}
.field textarea { height: auto; padding: 8px 12px; line-height: 1.45; resize: vertical; }
.field select { appearance: none; -webkit-appearance: none; padding: 0 34px 0 12px; line-height: normal; text-indent: 0; background-image: none; cursor: pointer; }
.field select:has(option[value=""]:checked) { color: var(--faint); font-weight: 400; }
.field select option { color: var(--ink); font-weight: 500; }
/* date sans valeur : le gabarit « aaaa-mm-jj » est masqué et la date du jour
   s'affiche en gris à sa place (.date-hint, posé par officine.js). Au focus,
   le gabarit du navigateur revient pour la saisie. */
.field input[type=date].is-empty:not(:focus) { color: transparent; }
.field input[type=date].is-empty:not(:focus)::-webkit-datetime-edit { color: transparent; }
.field input[type=date] { cursor: pointer; caret-color: transparent; }
.field .wrap .date-hint {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%); pointer-events: none;
    color: var(--faint); font-weight: 400; font-size: inherit; display: none; letter-spacing: .01em;
}
.field .wrap:has(input[type=date].is-empty:not(:focus)) .date-hint { display: block; }
.field.is-sm .wrap .date-hint { font-size: 14px; }
.field.is-lg .wrap .date-hint { font-size: 16px; }
.field input[type=datetime-local].is-empty { color: var(--faint); font-weight: 400; }
.field input[type=date]:focus, .field input[type=datetime-local]:focus { color: var(--ink); font-weight: 500; }
.field input[type=date]:focus::-webkit-datetime-edit { color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field input::placeholder, .input::placeholder { color: var(--faint); font-weight: 400; }
.field.is-lg input:not([type=checkbox]):not([type=radio]), .field.is-lg select { height: 46px; min-height: 46px; font-size: 16px; }
.field.is-sm input:not([type=checkbox]):not([type=radio]), .field.is-sm select { height: 36px; min-height: 36px; font-size: 14px; }
.field input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--accent); }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); padding: 6px 0; }
.check input { width: 15px; height: 15px; accent-color: var(--accent); }
.field .help { font-size: 12px; color: var(--faint); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-grid .is-full { grid-column: 1 / -1; }
.form-error { display: none; border-radius: var(--r); background: var(--danger-bg); color: var(--danger); padding: 8px 12px; font-size: 13px; }
.form-error.is-visible { display: block; }
/* combobox (relation « search ») */
.combo { position: relative; }
.combo-list {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40; max-height: 320px; overflow-y: auto;
    background: #fff; border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: 0 8px 24px rgba(28, 27, 24, .12); padding: 4px; margin: 0; list-style: none;
}
.combo-list[hidden] { display: none; }
.combo-list .group { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); font-weight: 600; padding: 8px 10px 4px; }
.combo-list li[role=option] { padding: 8px 12px; border-radius: 5px; font-size: 14px; line-height: 1.4; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 2px; }
.combo-list li[role=option].is-active, .combo-list li[role=option]:hover { background: var(--accent-soft); }
.combo-list li .extra { color: var(--muted); font-size: 13px; white-space: normal; }
.combo-list .empty { padding: 10px; font-size: 13px; color: var(--muted); }
/* filtres */
.filters { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }
.filters .field { width: 200px; }
.filters .field.is-wide { width: 300px; }
.filters .spacer { margin-left: auto; font-size: 13px; color: var(--muted); align-self: center; }
/* ---------------------------------------------------------------- tableaux */
/* Le tableau défile dans sa carte, jamais la page : sans "contain", un geste
   tactile poursuivi au-delà du bord entraîne toute la page avec lui. */
.mb { margin-bottom: 22px; }
/* Le cadre défilant du tableau épouse les coins de sa carte — sans quoi le
   tableau dépasse aux angles. Poser overflow sur la carte les couperait aussi
   les listes d'autocomplétion, qui doivent sortir de leur carte. */
.card > .tbl-wrap:first-child { border-top-left-radius: var(--r-card); border-top-right-radius: var(--r-card); }
.card > .tbl-wrap:last-child { border-bottom-left-radius: var(--r-card); border-bottom-right-radius: var(--r-card); }
.tbl-wrap { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; max-width: 100%; }
table.tbl { width: 100%; border-collapse: collapse; text-align: left; }
table.tbl th {
    padding: 10px 14px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
    border-bottom: 1px solid var(--line-2); white-space: nowrap; text-align: left;
}
table.tbl th.right, table.tbl td.right { text-align: right; }
table.tbl th button { background: none; border: 0; padding: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
table.tbl th button:hover { color: var(--ink); }
table.tbl th button.is-sorted { color: var(--ink); }
table.tbl td { padding: 11px 14px; font-size: 14px; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: middle; }
table.tbl tr:last-child td { border-bottom: 0; }
table.tbl tbody tr:hover td { background: rgba(255, 255, 255, .7); }
table.tbl td.right { font-variant-numeric: tabular-nums; font-weight: 500; }
table.tbl td.dim { color: var(--muted); }
table.tbl td.idx { color: var(--faint); font-size: 12px; font-variant-numeric: tabular-nums; }
/* colonne des numéros : même largeur d'une page à l'autre */
table.tbl thead th.right:first-child, table.tbl td.idx { width: 44px; }
table.tbl td.acts, table.tbl th.acts { text-align: right; width: 1px; position: sticky; right: 0; background: var(--surface); box-shadow: -1px 0 0 var(--line); }
table.tbl tbody tr:hover td.acts { background: #fdfdfb; }
table.tbl td.wrap { white-space: normal; min-width: 220px; }
table.tbl td.wrap-sm { white-space: normal; }
/* boutons texte dans la colonne d'actions : au plus juste */
/* Une colonne à largeur imposée : son en-tête se replie plutôt que de l'élargir. */
table.tbl thead th[style*="width"] { white-space: normal; }
/* boutons d'action d'un tableau : fond vert pâle, icône verte ; plus soutenus
   au survol. La suppression garde son rouge. */
table.tbl td.acts .btn-icon { background: var(--accent-soft); color: var(--accent); }
table.tbl td.acts .btn-icon:hover:not(:disabled) { background: var(--accent); color: #fff; }
table.tbl td.acts .btn-icon.is-danger { background: var(--ground-2); color: var(--muted); }
table.tbl td.acts .btn-icon.is-danger:hover:not(:disabled) { background: var(--danger-bg); color: var(--danger); }
/* les boutons respirent : ils se visent un par un */
table.tbl td.acts .btn-icon + .btn-icon, table.tbl td.acts .btn-icon + .btn-sm, table.tbl td.acts .btn-sm + .btn-icon { margin-left: 6px; }
table.tbl td.acts .btn-sm { padding: 0 10px; }
table.tbl td.acts .btn-sm + .btn-sm { margin-left: 6px; }
/* cellule qui ouvre la modification de sa ligne (option "edit_on") */
.cell-btn { background: none; border: 0; padding: 2px; margin: -2px; border-radius: 999px; cursor: pointer; font: inherit; color: inherit; line-height: 0; }
.cell-btn:hover, .cell-btn:focus-visible { box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
table.tbl td .null { color: var(--faint); font-style: italic; }
table.tbl td .empty { color: var(--faint); }
table.tbl td .yes { display: inline-flex; width: 20px; height: 20px; border-radius: 999px; background: var(--ok-bg); color: var(--ok); align-items: center; justify-content: center; }
table.tbl td .yes svg { width: 12px; height: 12px; }
table.tbl td .no { color: var(--faint); }
table.tbl td .warn { color: var(--warn); }
table.tbl td.neg { color: var(--danger); }
table.tbl td.pos { color: var(--ok); }
table.tbl .msg { padding: 32px; text-align: center; color: var(--muted); font-size: 14px; white-space: normal; }
table.tbl.is-dense td { padding: 8px 12px; }
.pager { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); gap: 12px; }
.pager .pages { display: flex; gap: 4px; align-items: center; }
.pager button { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px; border-radius: var(--r); font-size: 13px; border: 1px solid transparent; background: transparent; color: var(--muted); }
.pager button svg { width: 16px; height: 16px; }
.pager button:hover:not(:disabled) { color: var(--ink); background: rgba(28, 27, 24, .05); }
.pager button:disabled { opacity: .4; cursor: default; }
.pager .cur { font-weight: 600; color: var(--ink); background: #fff; border-color: var(--control-border); }
/* ---------------------------------------------------------------- dialogues */
dialog.dlg { width: min(560px, calc(100vw - 32px)); border: 1px solid var(--line); border-radius: var(--r-card); padding: 0; background: var(--surface); color: var(--ink); box-shadow: 0 24px 60px rgba(28, 27, 24, .25); }
dialog.dlg.is-sm { width: min(420px, calc(100vw - 32px)); }
dialog.dlg.is-wide { width: min(760px, calc(100vw - 32px)); }
.choices { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.choice { border: 1px solid var(--line-2); border-radius: var(--r-card); padding: 18px 20px; background: #fff; display: flex; flex-direction: column; gap: 12px; }
.choice header { display: flex; align-items: center; gap: 12px; }
.choice-num { width: 28px; height: 28px; border-radius: 999px; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex-shrink: 0; }
.choice-title { font-size: 16px; font-weight: 500; }
dialog.dlg::backdrop { background: rgba(28, 27, 24, .45); }
dialog.dlg form, dialog.dlg .dlg-inner { display: flex; flex-direction: column; max-height: 85vh; }
.dlg-head { padding: 16px 22px; border-bottom: 1px solid var(--line); }
.dlg-head h2 { font-size: 20px; }
.dlg-head .sub { font-size: 13px; color: var(--muted); margin-top: 4px; }
.dlg-body { padding: 18px 22px; overflow-y: auto; display: grid; gap: 14px; }
.dlg-foot { padding: 14px 22px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 10px; }
.dlg-foot .left { margin-right: auto; }
/* ---------------------------------------------------------------- listes */
.list { display: flex; flex-direction: column; }
.list-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; }
.list-row:first-child { border-top: 0; }
.list-row .v { font-variant-numeric: tabular-nums; font-weight: 500; }
/* zone de dépôt (import) */
.drop { border: 1px dashed var(--line-2); border-radius: var(--r); padding: 18px 20px; display: flex; align-items: center; gap: 16px; background: var(--ground); cursor: pointer; transition: border-color .12s, background .12s; }
.drop:hover, .drop.is-over { border-color: var(--accent); background: var(--accent-soft); }
.drop .ico { width: 44px; height: 44px; border-radius: var(--r); background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.drop .ico svg { width: 20px; height: 20px; }
.drop .txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.drop .txt .name { font-size: 14px; font-weight: 500; }
.drop .txt .hint { font-size: 13px; color: var(--muted); }
.drop input[type=file] { display: none; }
/* ---------------------------------------------------------------- connexion */
.login { min-height: 100vh; display: flex; }
.login-side { width: 520px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 48px 56px; border-right: 1px solid var(--line); background: var(--surface); }
.login-side .pitch { display: flex; flex-direction: column; gap: 14px; }
.login-side .pitch .big { font-size: 36px; font-weight: 300; line-height: 1.15; letter-spacing: -.01em; }
.login-side .pitch .txt { font-size: 14.5px; color: var(--muted); max-width: 360px; }
.login-side .pitch ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.login-side .pitch li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.login-side .pitch li svg { width: 16px; height: 16px; color: var(--accent); }
.login-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.login-form { display: flex; flex-direction: column; gap: 28px; width: 380px; max-width: 100%; }
.login-form h1 { font-size: 30px; }
.login-form form { display: flex; flex-direction: column; gap: 18px; }
.login-form .foot { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--faint); }
.login-form .foot svg { width: 13px; height: 13px; }
.wordmark { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); }
.wordmark .mark { width: 30px; height: 30px; border-radius: 12px; background: var(--accent); display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.wordmark .mark svg { width: 17px; height: 17px; stroke-width: 1.8; }
.wordmark .name { font-size: 24px; font-weight: 300; letter-spacing: .06em; line-height: 1; }
/* ---------------------------------------------------------------- pages spéciales */
.blank { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.blank .box { width: 520px; max-width: 100%; display: flex; flex-direction: column; gap: 18px; }
.blank h1 { font-size: 30px; }
/* réception : zone de scan — tous les contrôles font 46 px, bouton compris */
.scan-bar { display: flex; gap: 14px; align-items: flex-end; padding: 20px 22px 16px; flex-wrap: wrap; }
.scan-bar .field.is-din { flex: 1 1 420px; min-width: 360px; }
.scan-bar .field.is-boxes { width: 96px; flex-shrink: 0; }
.scan-bar .field.is-qty { width: 100px; flex-shrink: 0; }
.scan-bar .field.is-src { width: 180px; flex-shrink: 0; }
.scan-bar .field.is-bill { width: 140px; flex-shrink: 0; }
.scan-bar .field label .muted { font-weight: 400; text-transform: none; letter-spacing: 0; }
.scan-bar .field.is-lg input:not([type=checkbox]), .scan-bar .field.is-lg select {
    height: 46px; min-height: 46px; max-height: 46px; padding-top: 0; padding-bottom: 0; line-height: 44px; font-size: 16px; font-weight: 500;
}
.scan-bar .field.is-lg select { padding-right: 34px; }
.scan-bar .btn-lg { height: 46px; min-height: 46px; align-self: flex-end; flex-shrink: 0; }
.scan-bar input:disabled { background: var(--ground); color: var(--faint); }
.scan-hint { display: flex; align-items: center; gap: 8px; padding: 0 22px 16px; font-size: 13px; color: var(--muted); }
.scan-hint svg { width: 14px; height: 14px; color: var(--faint); }
.scan-result { margin: 0 22px 16px; padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--line); background: #fff; display: flex; align-items: center; gap: 12px; font-size: 14px; }
.scan-result.is-ok { border-color: #c9e0d0; background: var(--ok-bg); }
.scan-result.is-unknown { border-color: #ecd9b3; background: var(--warn-bg); }
.scan-result svg { width: 18px; height: 18px; }
/* balancement : les trois nombres du panneau se lisent d'un coup d'œil */
.bal-panel .kpi .value { font-size: 40px; letter-spacing: -.03em; }
.bal-panel .kpi .label { font-size: 13px; margin-top: 10px; }
.bal-panel .kpi.is-gap .value { color: var(--warn); }
.bal-panel .kpi.is-ok .value { color: var(--ok); }
/* mouvements : la ligne d'un décompte tranche sur les mouvements */
table.tbl tr.is-count td { background: var(--ground); border-top: 2px solid var(--line-2); }
table.tbl tr.is-count td.note { font-size: 13px; overflow: hidden; text-overflow: ellipsis; max-width: 0; }
table.tbl tr.is-count:hover td { background: var(--ground-2); }
table.tbl th.center, table.tbl td.center { text-align: center; }
table.tbl a.prod { color: var(--ink); }
table.tbl a.prod:hover { color: var(--accent); }
[data-coreui-table="INV_INVENTAIRE"] table.tbl td:not(.acts) a { color: var(--ink); }
table.tbl td > span.mono.muted { font-size: inherit; }
[data-coreui-table="INV_INVENTAIRE"] table.tbl td.acts, [data-coreui-table="INV_INVENTAIRE"] table.tbl th.acts, [data-role="list-results"] table.tbl td.acts, [data-role="list-results"] table.tbl th.acts { box-shadow: -1px 0 0 var(--line-2); }
[data-coreui-table="INV_INVENTAIRE"] table.tbl td:not(.acts) a:hover { color: var(--accent); }
table.tbl tbody tr.new-day td { border-top: 3px double var(--line-2); }
/* la colonne d'actions est collante et opaque : elle suit la couleur de la ligne */
table.tbl tbody tr.is-count td.acts { background: var(--ground); }
table.tbl tbody tr.is-count:hover td.acts { background: var(--ground-2); }
/* écart non nul : c'est le seul signal, il n'y a plus de bannière au-dessus */
table.tbl tr.is-current td { background: var(--accent-soft); }
/* ligne de total : même poids que l'en-tête, séparée du corps du tableau */
table.tbl tfoot tr.is-total td { background: var(--surface); border-top: 1px solid var(--line-2); font-weight: 600; }
table.tbl tfoot tr.is-total td.dim { font-weight: 400; }
table.tbl td.warn { color: var(--warn); }
table.tbl tbody tr:hover td.warn { background: #f6e6c8; }
table.tbl tr.is-count td.warn { background: var(--warn-bg); }
table.tbl tr.is-count:hover td.warn { background: #f6e6c8; }
/* balancement : lignes dépliables */
.bal-row { cursor: pointer; }
.bal-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.bal-chev { width: 14px; height: 14px; color: var(--faint); transition: transform .12s; }
.bal-row.is-open .bal-chev { transform: rotate(90deg); color: var(--accent); }
.bal-row.is-open td { background: #fff; border-bottom-color: transparent; }
table.tbl tr.bal-detail > td { padding: 0 0 4px; background: #fff; white-space: normal; }
.bal-panel { margin: 0 14px 12px 40px; padding: 14px 18px 16px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--ground); }
.bal-panel table.tbl { background: var(--surface); }
.pager a.btn.is-disabled { opacity: .4; pointer-events: none; }
/* aide en infobulle, dans le coin supérieur droit d'une carte */
.card.has-tip { position: relative; }
.card-tip { position: absolute; top: 8px; right: 8px; z-index: 20; }
.card-tip-btn {
    width: 32px; height: 32px; border-radius: 999px; border: 0; background: transparent; color: var(--faint);
    display: inline-flex; align-items: center; justify-content: center; cursor: help;
}
.card-tip-btn svg { width: 17px; height: 17px; }
.card-tip-btn:hover, .card-tip-btn:focus-visible { color: var(--accent); background: var(--accent-soft); outline: none; }
.card-tip-text {
    position: absolute; top: calc(100% + 6px); right: 0; width: 340px; max-width: calc(100vw - 48px);
    background: var(--ink); color: #fff; font-size: 13px; line-height: 1.5; font-weight: 400;
    padding: 10px 12px; border-radius: var(--r); box-shadow: 0 8px 24px rgba(28, 27, 24, .2);
    opacity: 0; visibility: hidden; transform: translateY(-2px); transition: opacity .12s, transform .12s, visibility .12s;
}
.card-tip:hover .card-tip-text, .card-tip:focus-within .card-tip-text { opacity: 1; visibility: visible; transform: none; }
/* note de bas de tableau (pas un mouvement : une explication) */
table.tbl tr.is-note td {
    background: var(--warn-bg); color: var(--warn); font-size: 13px;
    text-align: center; white-space: normal; padding: 12px 16px;
}
table.tbl tr.is-note svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 6px; color: var(--warn); }
/* courbe du stock théorique (SVG écrit par la page, sans bibliothèque) */
.chart { width: 100%; height: auto; display: block; margin: 4px 0 6px; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .lbl { fill: var(--faint); font-size: 11px; }
.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; opacity: .75; }
.chart .line.is-current { stroke-width: 2.75; opacity: 1; }
/* théorique : le même trait, en pointillé et en retrait */
.chart .line.is-theo { stroke-width: 1.5; opacity: .45; stroke-dasharray: 5 4; }
.chart .dot { stroke: #fff; stroke-width: 1.5; }
.chart .dot.is-gap { fill: var(--warn) !important; }
.chart .c0, .chart .key.c0 i { stroke: var(--accent); }
.chart .c1, .chart .key.c1 i { stroke: #2f6b9b; }
.chart .c2, .chart .key.c2 i { stroke: #8a5a12; }
.chart .c3, .chart .key.c3 i { stroke: #7a3e6b; }
.chart circle.c0 { fill: var(--accent); }
.chart circle.c1 { fill: #2f6b9b; }
.chart circle.c2 { fill: #8a5a12; }
.chart circle.c3 { fill: #7a3e6b; }
.chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }
.chart-head .title { font-size: 14px; font-weight: 600; }
.chart-head .legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--muted); }
.chart-head .key { display: inline-flex; align-items: center; gap: 6px; }
.chart-head .key.is-current { color: var(--ink); font-weight: 600; }
.chart-head .key i { width: 14px; height: 3px; border-radius: 2px; background: currentColor; }
.chart-head .key.c0 i { background: var(--accent); }
.chart-head .key.c1 i { background: #2f6b9b; }
.chart-head .key.c2 i { background: #8a5a12; }
.chart-head .key.c3 i { background: #7a3e6b; }
/* Réception : choix du format quand le produit en a plusieurs */
.fmt-picks { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: middle; }
.fmt-pick {
    height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--control-border); background: #fff;
    font: inherit; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer;
}
.fmt-pick:hover { color: var(--ink); }
.fmt-pick.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
/* onglets : ligne de fond fine, l'onglet actif en vert souligné d'un trait plus épais */
.tabs {
    display: flex; max-width: 100%; gap: 34px; margin: 0 0 22px;
    border-bottom: 1px solid var(--line); vertical-align: middle;
}
.tab {
    padding: 0 0 11px; font-size: 13px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .06em;
    border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
    border-radius: 0; background: transparent; white-space: nowrap;
}
.tab:hover { color: var(--ink); }
.tab.is-active {
    color: var(--accent); font-weight: 800;
    border-bottom-color: var(--accent);
}
/* calendrier de l'année : un carré par jour, légende cliquable pour isoler une catégorie */
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 12px 6px 6px; }
.cal-toggle { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 0; background: transparent; color: var(--ink); border-radius: var(--r); text-align: left; }
.cal-toggle:hover { background: rgba(28, 27, 24, .04); }
.cal-toggle .title { font-size: 15px; font-weight: 600; }
.cal-toggle .meta { font-size: 13px; color: var(--muted); }
.cal-toggle .chev { width: 17px; height: 17px; color: var(--muted); transition: transform .15s ease; }
.cal-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.cal-nav { display: flex; gap: 4px; }
.cal-body { display: flex; align-items: flex-start; gap: 24px; padding: 14px 18px 18px; border-top: 1px solid var(--line); overflow-x: auto; }
.cal-grid { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.cal-row { display: flex; gap: 2px; align-items: center; height: 14px; }
.cal-grid .d-head { width: 22px; flex-shrink: 0; font-size: 10px; color: var(--faint); display: flex; align-items: center; justify-content: center; }
.cal-grid .m-head { width: 78px; flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; padding-right: 8px; font-size: 12px; color: var(--muted); text-transform: capitalize; }
.cal-grid .cell { width: 22px; height: 14px; flex-shrink: 0; border-radius: 3px; transition: opacity .12s; }
.cal-grid .cell.void { background: var(--ground-2); opacity: .5; }
.cal-legend { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; padding-top: 14px; }
.cal-legend .item { display: flex; align-items: center; gap: 8px; padding: 4px 8px; margin: 0 -8px; border: 0; border-radius: var(--r); background: transparent; font-size: 13px; color: var(--muted); white-space: nowrap; }
.cal-legend .item:hover, .cal-legend .item.is-on { background: var(--ground-2); color: var(--ink); }
.cal-legend .sw { width: 22px; height: 14px; border-radius: 3px; flex-shrink: 0; }
.cal-legend .note { margin: 8px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); white-space: nowrap; }
/* aperçu du médicament en tuiles : grande tuile (2/3) et petites tuiles à droite puis dessous */
.ap-info { display: flex; flex-direction: column; gap: 18px; margin: 4px 0 22px; }
.ap-info h2 { font-size: 26px; }
.ap-info .ap-title { display: flex; flex-direction: column; gap: 4px; }
.ap-kpis { display: flex; flex-wrap: wrap; gap: 20px 64px; }
.ap-kpis .kpi .value { font-size: 34px; }
.ap-kpis .kpi.is-gap .value { color: var(--warn); }
.ap-foot { margin: 0; font-size: 13px; }
.ap-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-bottom: 22px; }
.ap-tile { position: relative; background: var(--accent-soft); border: 1px solid #d3e2d8; border-radius: var(--r-card); padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ap-sm { gap: 6px; }
.ap-sm.is-current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: #f3f8f4; }
.ap-sm .ap-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-sm .ap-name a { color: var(--ink); }
.ap-sm .ap-name a:hover { color: var(--accent); }
.ap-sm .ap-meta { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-sm .ap-name { padding-right: 44px; }
.ap-count { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 12px; background: var(--accent-ink); color: #fff; cursor: pointer; transition: background .12s; }
.ap-count:hover { background: var(--ink); }
.ap-count svg { width: 17px; height: 17px; }
.ap-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.ap-nums .v { display: block; font-size: 22px; font-weight: 300; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ap-nums .k { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }
.ap-nums .is-gap .v { color: var(--warn); }
.ap-date { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-top: 2px; }
/* titre de la liste, recherche à droite */
.list-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 26px 0 14px; }
.list-head h2 { font-size: 20px; font-weight: 400; }
.list-search { flex: 0 1 360px; min-width: 220px; }
.list-search .field { width: 100%; }
.list-search input[type=search]::-webkit-search-cancel-button { cursor: pointer; }
/* écart signalé dans l'aperçu du médicament, comme sur les lignes de décompte */
table.tbl.fam-table td.acts, table.tbl.fam-table th.acts, table.tbl.no-vlines td.acts, table.tbl.no-vlines th.acts { box-shadow: none; }
table.tbl.fam-table tbody td.warn, table.tbl.fam-table tfoot td.warn { background: var(--warn-bg); }
table.tbl.fam-table tbody tr:hover td.warn { background: #f6e6c8; }
/* infobulle d'une ligne de tableau : le panneau est posé sur <body> (fixed),
   sans quoi le cadre défilant du tableau le couperait. */
.tip-btn {
    width: 32px; height: 32px; border-radius: 999px; border: 0; background: transparent; color: var(--faint);
    display: inline-flex; align-items: center; justify-content: center; cursor: help; vertical-align: middle;
}
.tip-btn svg { width: 14px; height: 14px; }
.tip-btn:hover, .tip-btn:focus-visible { color: var(--accent); background: var(--accent-soft); outline: none; }
.tip-pop {
    position: fixed; z-index: 200; width: max-content; max-width: 320px; white-space: pre-line;
    background: var(--ink); color: #fff; font-size: 13px; line-height: 1.5; font-weight: 400;
    padding: 9px 12px; border-radius: var(--r); box-shadow: 0 8px 24px rgba(28, 27, 24, .2);
    opacity: 0; visibility: hidden; transition: opacity .12s, visibility .12s;
}
.tip-pop.is-open { opacity: 1; visibility: visible; }
/* séparateur vertical entre deux groupes de colonnes */
table.tbl th.sep, table.tbl td.sep { border-left: 1px solid var(--line-2); }
/* la barre de scan laisse la place au bouton d'aide */
.card.has-tip .scan-bar { padding-right: 44px; }
/* migrations */
.mig { display: flex; flex-direction: column; }
.mig-row { display: flex; align-items: flex-start; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.mig-row:first-child { border-top: 0; }
.mig-row .txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.mig-row .id { font-family: var(--mono); font-size: 12px; color: var(--faint); }
.mig-row .when { font-size: 12px; color: var(--faint); white-space: nowrap; }
.mig-log { font-family: var(--mono); font-size: 12px; white-space: pre-wrap; background: var(--ink); color: #e6e3da; padding: 14px 16px; border-radius: var(--r); max-height: 320px; overflow: auto; }
/* ---------------------------------------------------------------- réactif */
@media (max-width: 1100px) {
    .grid-main { grid-template-columns: minmax(0, 1fr); }
    .grid-4, .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .login-side { display: none; }
}
/* tablette : les largeurs de confort du bureau deviennent des obstacles */
@media (max-width: 1024px) {
    .content, .main, .main > * { max-width: 100%; }
    /* Les largeurs fixes des colonnes sont posées pour l'écran large : ici on
       laisse le contenu décider, sinon les tableaux débordent pour rien. */
    table.tbl thead th[style*="width"] { width: auto !important; }
    table.tbl th, table.tbl td { padding-left: 8px; padding-right: 8px; }
    /* Un en-tête sur deux lignes coûte moins cher qu'une colonne trop large. */
    table.tbl th { white-space: normal; }
    table.tbl td.wrap { min-width: 120px; }
    /* Dans la colonne d'actions, l'icône suffit : le libellé doublait sa largeur. */
    table.tbl td.acts .btn span { display: none; }
    table.tbl td.acts .btn { width: 40px; padding: 0; justify-content: center; }
    /* cibles tactiles */
    table.tbl td { padding-top: 13px; padding-bottom: 13px; }
    .btn-icon { width: 40px; height: 40px; }
    .tip-btn { width: 32px; height: 32px; }
    .page-head { flex-wrap: wrap; row-gap: 12px; }
    .page-head .titles { min-width: 0; }
    .page-head h1 { overflow-wrap: anywhere; }
    .page-head .actions { flex-wrap: wrap; }
    /* les onglets défilent plutôt que de s'empiler */
    .tabs { display: flex; overflow-x: auto; overscroll-behavior-x: contain; }
    .tab { flex-shrink: 0; }
}
@media (max-width: 900px) {
    /* Fermés, ils sortent de l'écran par leur propre largeur — et le panneau
       par celle du rail en plus, puisqu'il est décalé d'autant. */
    .main { padding: 20px 16px 40px; }
    .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: minmax(0, 1fr); }
    .form-grid { grid-template-columns: minmax(0, 1fr); }
    .filters .field, .filters .field.is-wide { width: 100%; }
    .page-head h1 { font-size: 24px; }
}

/* ============================================================== refonte (fusionnée) */

/* ============================================================================
   officine.app — refonte visuelle (cadre).
   Chargée après officine.css, seulement quand :root body est posé
   (config "refonte" => true, ou ?refonte=1 pour ce navigateur, ?refonte=0 pour l'enlever).
   Principe : redéfinir les jetons, puis ne surcharger que la coquille et les composants.
   ============================================================================ */
/* ---------------------------------------------------------------- coquille : barre verticale, onglets collants en haut */
:root body .shell { max-width: 1856px; margin: 0; padding: 0 28px; min-height: 100vh; }
:root body.app { padding-left: var(--rail-w); }
:root body .content > .main:first-child { padding-top: 24px; }
/* 1800 px de contenu + les marges */
:root body .content { min-width: 0; }
:root body .main { padding: 0 0 48px; }
:root body .main > .inner { max-width: none; }
.rf-grow { flex: 1; }
.rf-dd { position: relative; }
/* barre verticale pleine, fixe : mince, elle s'élargit au survol (ou au focus) et recouvre le contenu */
.rf-rail { position: fixed; z-index: 90; top: 0; left: 0; bottom: 0; width: var(--rail-w); display: flex; flex-direction: column; padding: 14px 10px; background: linear-gradient(180deg, #0b3a2a 0%, #1a5a43 100%); color: #fff; transition: width .2s ease, box-shadow .2s ease; }
.rf-rail:hover, .rf-rail:focus-within, .rf-rail:has(.rf-acct[aria-expanded="true"], .rf-search input[aria-expanded="true"]) { width: var(--rail-open); box-shadow: 14px 0 40px -14px rgba(8, 36, 26, .55); }
/* les libellés n'apparaissent qu'une fois la barre dépliée */
.rf-lbl { opacity: 0; transition: opacity .15s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rf-rail:hover .rf-lbl, .rf-rail:focus-within .rf-lbl, .rf-rail:has(.rf-acct[aria-expanded="true"], .rf-search input[aria-expanded="true"]) .rf-lbl { opacity: 1; transition-delay: .06s; }
.rf-dd { position: relative; }
.rf-logo { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 10px; margin-bottom: 18px; overflow: hidden; color: #fff; text-decoration: none; font-weight: 700; font-size: 23px; letter-spacing: -.02em; text-transform: lowercase; }
.rf-logo:hover { color: #fff; }
.rf-logo .logo { width: 36px; height: 36px; flex-shrink: 0; color: #fff; }
.rf-mods { display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; }
.rf-mods::-webkit-scrollbar { display: none; }
.rf-mod { display: flex; align-items: center; gap: 14px; height: 48px; padding: 0 17px; border-radius: 12px; color: rgba(255, 255, 255, .72); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; overflow: hidden; transition: color .15s, background .15s; }
.rf-mod svg { width: 22px; height: 22px; flex-shrink: 0; }
.rf-mod:hover { color: #fff; background: rgba(255, 255, 255, .09); }
.rf-mod.is-active { color: #fff; font-weight: 600; background: rgba(255, 255, 255, .2); }
/* pages du module courant, sous son entrée : icône centrée sous celle du module, libellé aligné sur le sien */
.rf-subs { display: flex; flex-direction: column; gap: 2px; margin: 0 0 14px; }   /* de l'air sous la dernière page d'un module déplié */
.rf-sub { display: flex; align-items: center; gap: 17px; height: 38px; padding: 0 0 0 20px; border-radius: 12px; color: rgba(255, 255, 255, .66); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; overflow: hidden; transition: color .15s, background .15s; }
.rf-sub svg { width: 16px; height: 16px; flex-shrink: 0; }
.rf-sub:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.rf-sub.is-active { color: #fff; font-weight: 700; background: rgba(255, 255, 255, .2); }
/* titre d'un module à plusieurs pages : un texte, ni lien ni icône, qui plie ou déplie ses pages
   (chevron vers la droite : pages masquées ; vers le bas : pages affichées). Réduite, la barre n'en garde que l'espace. */
.rf-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 34px; padding: 0 14px 0 20px; margin-top: 0; border: 0; border-radius: 10px; background: none; color: rgba(255, 255, 255, .72); font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-align: left; white-space: nowrap; overflow: hidden; cursor: pointer; transition: color .15s, background .15s; }
.rf-head:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.rf-head .rf-chev { width: 14px; height: 14px; flex-shrink: 0; opacity: 0; transition: transform .15s, opacity .15s; }
.rf-head[aria-expanded="true"] .rf-chev { transform: rotate(90deg); }
.rf-subs[hidden] { display: none; }
.rf-mods > .rf-head:first-child { margin-top: 0; }
/* réduire / déplier la barre */
.rf-fold { display: flex; align-items: center; gap: 17px; width: 100%; height: 38px; padding: 0 0 0 20px; margin: 8px 0 4px; border: 0; border-radius: 12px; background: none; color: rgba(255, 255, 255, .55); font: inherit; font-size: 13px; text-align: left; cursor: pointer; overflow: hidden; white-space: nowrap; }
.rf-fold svg { width: 16px; height: 16px; flex-shrink: 0; }
.rf-fold:hover { color: #fff; background: rgba(255, 255, 255, .08); }
body.rail-compact .rf-fold svg { transform: rotate(180deg); }
/* barre dépliée (par défaut sur grand écran) : toujours pleine largeur, le contenu se pousse à sa droite */
@media (min-width: 901px) {
    :root body.app:not(.rail-compact) { padding-left: var(--rail-open); }
    :root body:not(.rail-compact) .rf-rail { width: var(--rail-open); box-shadow: none; }
    :root body:not(.rail-compact) .rf-lbl { opacity: 1; }
}
.rf-acct { display: flex; align-items: center; gap: 12px; width: 100%; height: 56px; padding: 0 8px; border: 0; border-radius: 12px; background: none; color: #fff; font: inherit; font-size: 13px; font-weight: 500; text-align: left; cursor: pointer; overflow: hidden; transition: background .15s; }
.rf-acct:hover, .rf-acct[aria-expanded="true"] { background: rgba(255, 255, 255, .12); }
.rf-avatar { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: rgba(255, 255, 255, .2); color: #fff; font-weight: 700; font-size: 12px; letter-spacing: .02em; }
/* menu déroulant du compte */
.rf-menu { position: absolute; z-index: 70; top: calc(100% + 12px); left: 0; background: #fff; color: var(--ink); border-radius: 28px; box-shadow: 0 24px 60px -18px rgba(15, 53, 38, .4); padding: 8px; }
.rf-menu[hidden] { display: none; }
.rf-rail .rf-menu { top: auto; bottom: 0; left: calc(var(--rail-open) - 10px + 12px); }
/* à droite de la barre dépliée */
.rf-user { width: 290px; padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.rf-user form { margin: 0; }
.um-head { display: flex; align-items: center; gap: 12px; padding: 10px 12px 14px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.um-head .avatar { width: 40px; height: 40px; background: var(--btn); color: #fff; font-size: 13px; }
.um-head b { display: block; font-size: 14px; font-weight: 600; line-height: 1.2; }
.um-head small { color: var(--muted); font-size: 12px; }
.um-block { padding: 8px 12px 12px; display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.um-label { font-size: 12px; font-weight: 600; color: var(--muted); }
.um-name { font-size: 14px; font-weight: 600; }
.um-block select { appearance: none; -webkit-appearance: none; width: 100%; height: 40px; border: 1px solid var(--control-border); border-radius: 999px; padding: 0 36px 0 16px; background-color: var(--soft); font: inherit; font-weight: 600; color: var(--ink); cursor: pointer; outline: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2358645d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; background-size: 14px; }
.um-item { display: flex; align-items: center; gap: 12px; width: 100%; height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--ink); font: inherit; font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; text-align: left; }
.um-item:hover { background: var(--soft); color: var(--ink); }
.um-item svg { width: 18px; height: 18px; color: var(--muted); }
.um-item.is-danger { color: var(--danger); }
.um-item.is-danger svg { color: var(--danger); }
.um-item.is-danger:hover { background: var(--danger-bg); }
/* pages du module : onglets collants en haut de la page ; recherche globale à leur droite */
/* recherche globale (narcotiques), à droite des onglets : même gabarit que leur piste */
.rf-search { position: relative; display: flex; align-items: center; gap: 8px; height: 46px; width: 420px; flex: 0 1 420px; min-width: 0; padding: 0 18px; background: var(--ground-2); border-radius: 999px; color: var(--muted); transition: background .15s, box-shadow .15s; }
.rf-search:hover { background: #e2e4e2; }
.rf-search:focus-within { background: #fff; box-shadow: 0 0 0 2px var(--accent); color: var(--faint); }
.rf-search svg { width: 16px; height: 16px; flex-shrink: 0; }
.rf-search input { border: 0; outline: 0; background: transparent; font: inherit; font-size: 13px; width: 100%; min-width: 0; color: var(--ink); }
.rf-search input::placeholder { color: var(--muted); }
.rf-search input::-webkit-search-cancel-button { cursor: pointer; }
.gs-list { position: absolute; top: calc(100% + 10px); right: 0; width: min(480px, 92vw); max-height: 62vh; overflow-y: auto; background: #fff; border-radius: 18px; box-shadow: 0 24px 60px -18px rgba(15, 53, 38, .4); padding: 8px; z-index: 80; }
.gs-list[hidden] { display: none; }
/* recherche globale dans la barre verticale, sous le logo : réduite, il ne reste que la loupe */
.rf-rail .rf-search { flex: none; width: 100%; height: 38px; margin: -4px 0 14px; padding: 0 12px 0 20px; gap: 17px; background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .7); cursor: text; }
.rf-rail .rf-search:hover { background: rgba(255, 255, 255, .16); }
.rf-rail .rf-search:focus-within { background: #fff; color: var(--muted); box-shadow: none; }
.rf-rail .rf-search input { color: #fff; }
.rf-rail .rf-search input::placeholder { color: rgba(255, 255, 255, .6); }
.rf-rail .rf-search:focus-within input { color: var(--ink); }
.rf-rail .rf-search:focus-within input::placeholder { color: var(--muted); }
.rf-rail .gs-list { left: 0; right: auto; top: calc(100% + 8px); }
.gs-item { display: flex; flex-direction: column; gap: 1px; padding: 10px 14px; border-radius: 12px; color: var(--ink); text-decoration: none; }
.gs-item:hover, .gs-item.is-active { background: var(--accent-soft); color: var(--ink); }
.gs-title { font-weight: 600; font-size: 14px; }
.gs-title em { font-style: normal; font-weight: 500; font-size: 12px; color: var(--muted); background: var(--soft); border-radius: 999px; padding: 1px 8px; margin-left: 6px; }
.gs-meta { font-size: 13px; color: var(--muted); }
.gs-more { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 14px 14px; padding-top: 12px; }
.gs-more .gs-title { color: var(--accent); }
.gs-empty { padding: 14px; font-size: 13px; color: var(--muted); }
/* ---------------------------------------------------------------- en-tête de page */
:root body .page-head { margin-bottom: 22px; align-items: flex-start; }
:root body .page-head .actions { min-height: 46px; }
/* le sous-titre s'aligne sur le texte du titre, après l'icône (46 px + 14 px d'écart) */
:root body .page-head h1:has(.ti) ~ .sub { padding-left: 60px; }
:root body .page-head h1 { font-size: 33px; font-weight: 400; letter-spacing: -.025em; line-height: 1.1; }
:root body h2.section { font-weight: 600; }
/* icône devant le titre de la page */
:root body .page-head h1, :root body .ap-info h2 { display: flex; align-items: center; gap: 14px; }
.ti { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--ground-2);  flex-shrink: 0; }
.ti svg { width: 23px; height: 23px; }
/* le nom de la section est déjà en haut de la page */
:root body .page-head .eyebrow { display: none; }
/* ---------------------------------------------------------------- boutons */
:root body .btn { height: 44px; padding: 0 22px; border-radius: 999px; font-size: 14px; border-width: 1.5px; }
:root body .btn-primary { background: var(--btn); }
:root body .btn-primary:hover:not(:disabled) { background: #0f3526; }
:root body .btn-secondary { background: transparent; border-color: var(--accent-ink); color: var(--accent-ink); }
:root body .btn-secondary:hover:not(:disabled) { background: var(--btn); border-color: var(--btn); color: #fff; }
:root body .btn-ghost { padding: 0 14px; }
:root body .btn-sm { height: 36px; padding: 0 14px; font-size: 13px; }
:root body .btn-lg { height: 52px; }
:root body .btn-icon { width: 40px; height: 40px; border-radius: 50%; padding: 0; }
:root body .btn-danger.is-solid { background: var(--danger); }
/* ---------------------------------------------------------------- réception : zone de scan */
:root body .scan-bar .field.is-din { flex: 0 1 640px; min-width: 300px; }
:root body .scan-bar .btn-lg { height: 46px; min-height: 46px; padding: 0 26px; border-radius: var(--r); font-size: 16px; font-weight: 500; }
/* test : la tuile de réception en vert foncé */
:root body #reception { background: linear-gradient(180deg, #17503a 0%, #1a5a43 100%); color: #fff; }
:root body #reception .field > label, :root body #reception .field > .label { color: rgba(255, 255, 255, .78); }
:root body #reception .field .req { color: #f3b6a9; }
:root body #reception .scan-bar .btn-primary { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--btn); font-weight: 700; }
:root body #reception .scan-bar .btn-primary:hover:not(:disabled) { background: #c8e6d3; border-color: #c8e6d3; color: var(--btn); }
:root body #reception .scan-bar { padding: 16px 22px 22px; }
:root body #reception .scan-bar:has(+ .scan-result:not(.hidden)) { padding-bottom: 12px; }
:root body #reception .scan-result { margin-bottom: 22px; }
:root body #reception .combo-list, :root body #reception .scan-result { color: var(--ink); }
:root body #reception .card-tip-btn { color: rgba(255, 255, 255, .7); }
:root body #reception .card-tip-btn:hover, :root body #reception .card-tip-btn:focus-visible { color: #fff; background: rgba(255, 255, 255, .16); }
:root body #reception .scan-result { color: var(--ink); }
/* tuile dont le tableau va d'un bord à l'autre */
:root body .card-flush .tbl-wrap { margin: 0 -26px; max-width: none; width: calc(100% + 52px); }
:root body .card-flush table.tbl th:first-child, :root body .card-flush table.tbl td:first-child { padding-left: 26px; }
:root body .card-flush table.tbl th:last-child, :root body .card-flush table.tbl td:last-child { padding-right: 26px; }
/* ---------------------------------------------------------------- décomptes : feuilles à imprimer et à saisir */
.fd-home { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 20px; align-items: start; }
.fd-new { display: flex; flex-direction: column; gap: 12px; }
.fd-h { margin: 0; font-size: 18px; font-weight: 600; }
.fd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fd-chk { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); }
.fd-chk input { accent-color: var(--accent); }
.fd-meta { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; margin-bottom: 16px; }
.fd-meta .seg { width: 240px; }
.fd-meta .field { width: auto; min-width: 200px; }
.fd-when { margin: 0; font-size: 12.5px; color: var(--muted); flex: 1; min-width: 240px; }
.fd-saved { font-size: 12px; color: var(--accent); }
.fd-paper { max-width: 900px; background: #fff; color: #111; border-radius: 6px; box-shadow: 0 10px 40px -18px rgba(0, 0, 0, .35); padding: 40px 44px 36px; font-size: 12px; display: flex; flex-direction: column; gap: 12px; }
.fd-ph { display: flex; justify-content: space-between; gap: 20px; border-bottom: 2px solid #111; padding-bottom: 10px; }
.fd-ph h2 { margin: 0; font-size: 20px; font-weight: 800; }
.fd-meta-p { font-size: 11px; color: #444; margin-top: 2px; }
.fd-right { text-align: right; font-size: 11px; color: #444; }
.fd-right b { display: block; font-size: 15px; color: #111; }
.fd-of { display: block; margin-top: 6px; color: #111; }
.fd-of i { display: inline-block; width: 11px; height: 11px; border: 1px solid #111; vertical-align: -1px; margin: 0 4px 0 10px; }
.fd-of i.on { background: #111; }
.fd-instr { margin: 0; font-size: 10.5px; color: #444; }
table.fd-sheet { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.fd-sheet th { font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em; text-align: left; font-weight: 700; padding: 6px; border-bottom: 1.5px solid #111; }
.fd-sheet td { padding: 0 6px; height: 30px; border-bottom: 1px solid #bbb; vertical-align: middle; }
.fd-sheet .fd-no { width: 30px; text-align: right; color: #555; padding-right: 8px; }
.fd-sheet .fd-box { width: 74px; text-align: center; border-left: 1px solid #bbb; }
.fd-sheet th.fd-box { border-left: 0; }
.fd-sheet .fd-tot { border-left: 1.5px solid #111; background: #f4f4f4; font-weight: 700; }
.fd-sheet .fd-theo { width: 54px; text-align: right; color: #555; }
.fd-sheet .fd-box input { width: 100%; height: 26px; border: 1px solid var(--control-border); border-radius: 6px; text-align: center; font: inherit; font-size: 13px; background: #fff; }
.fd-sheet .fd-box input:focus { outline: 2px solid var(--accent); border-color: transparent; }
.fd-sheet tr.fd-voie td { height: auto; padding: 12px 6px 4px; border-bottom: 0; font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #333; }
.fd-sheet tr.fd-med td { height: auto; padding: 9px 6px 4px; border-bottom: 1px solid #111; font-size: 11px; }
.fd-sheet tr.fd-med b { font-size: 12px; }
.fd-orig { color: #555; margin-left: 6px; }
.fd-din { font-family: var(--mono, monospace); font-size: 9.5px; color: #555; margin-left: 6px; }
.fd-blank { color: #c8c8c8; font-size: 10.5px; }
.fd-printonly { display: none; }
.fd-sheet tr.fd-free select { height: 26px; border: 1px solid var(--control-border); border-radius: 6px; font: inherit; font-size: 11.5px; max-width: 360px; }
.fd-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 18px; font-size: 11px; }
.fd-sign > div { border-top: 1px solid #111; padding-top: 4px; color: #444; }
@media (max-width: 1000px) {
    .fd-home { grid-template-columns: 1fr; }
    .fd-paper { padding: 24px 18px; }
}
@media print {
    @page { size: A4; margin: 12mm; }
    :root body, :root body .main { background: #fff !important; }
    :root body.app { padding-left: 0 !important; }
    :root body .rf-rail, :root body .skip, :root body .alert, .fd-noprint, .fd-noprint-ctl, dialog { display: none !important; }
    :root body .shell { padding: 0 !important; max-width: none !important; }
    .fd-paper { box-shadow: none; max-width: none; padding: 0; border-radius: 0; }
    .fd-sheet .fd-box input { border: 0; height: auto; padding: 0; }
    .fd-printonly { display: inline; }
    .fd-sheet tr { break-inside: avoid; }
}
/* ---------------------------------------------------------------- mouvements : importation d'un rapport d'achats */
.ach-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.ach-kpis .kpi { background: var(--soft); border-radius: 18px; padding: 12px 16px; }
.ach-kpis .kpi .value { font-size: 24px; }
.ach-kpis .kpi.is-warn .value { color: var(--warn); }
.ach-settings { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 18px; padding: 14px 0 4px; }
.ach-settings .field { width: 240px; }
.ach-checks { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); flex: 1; min-width: 260px; }
.ach-checks label { display: flex; gap: 8px; align-items: center; }
.ach-settings .btn { margin-left: auto; }
.ach-filters { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px 0 10px; }
.ach-filters .chip { border: 0; border-radius: 999px; padding: 6px 14px; background: var(--soft); color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.ach-filters .chip span { opacity: .7; margin-left: 2px; }
.ach-filters .chip.is-on { background: var(--btn); color: #fff; }
/* le tableau tient dans la carte : colonnes à largeur fixe sauf le produit, qui passe à la ligne */
.ach-table { table-layout: fixed; width: 100%; }
.ach-table th:nth-child(1) { width: 84px; }
.ach-table th:nth-child(3) { width: 112px; }
.ach-table th:nth-child(4) { width: 120px; }
.ach-table th:nth-child(5) { width: 250px; }
.ach-table th:nth-child(6) { width: 140px; }
.ach-table td { vertical-align: top; min-width: 0; overflow-wrap: anywhere; }
.ach-table .ach-dec > * { min-width: 0; max-width: 100%; }
.ach-table select, .ach-table input { min-width: 0; max-width: 100%; }
/* écran étroit : chaque ligne devient une fiche */
@media (max-width: 1100px) {
    .ach-table, .ach-table tbody { display: block; }
    .ach-table thead { display: none; }
    .ach-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
    .ach-table tr.day-sep { display: block; padding: 5px 16px; }
    .ach-table td { display: block; padding: 0; border: 0; }
    .ach-table td:nth-child(1) { grid-column: 1; order: 1; }
    .ach-table td:nth-child(2) { grid-column: 1; order: 2; }
    .ach-table td:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; text-align: right; order: 3; }
    .ach-table td:nth-child(4) { grid-column: 1 / -1; order: 4; }
    .ach-table td:nth-child(5) { grid-column: 1 / -1; order: 5; }
    .ach-table td:nth-child(6) { grid-column: 1 / -1; order: 6; }
    .ach-table td:nth-child(6)::before { content: 'Reçu le'; display: block; font-size: 12px; color: var(--muted); margin-bottom: 3px; }
    .ach-table td:nth-child(6) .empty { display: none; }
}
.ach-table td { vertical-align: top; }
.ach-table .ach-dec { display: flex; flex-direction: column; gap: 6px; }
.ach-table .wrap { position: relative; }
.ach-table select, .ach-table input[type=date], .ach-table input[type=number] { height: 34px; border: 1px solid var(--control-border); border-radius: 12px; padding: 0 10px; background: #fff; font: inherit; font-size: 13px; width: 100%; }
.ach-table tr.ach-doubt td, .ach-table tr.ach-credit td { background: #fffaf0; }
.ach-table tr.ach-imported td, .ach-table tr.ach-matched td { color: var(--muted); }
.ach-reason { font-size: 12px; color: var(--warn); line-height: 1.35; }
@media (max-width: 900px) {
    .ach-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* ---------------------------------------------------------------- administration : catalogue des produits */
.cat-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.cat-kpis .kpi { border-radius: 18px; padding: 14px 20px; }
.cat-kpis .kpi .value { font-size: 26px; }
.cat-kpis .kpi.is-warn .value { color: var(--warn); }
.cat-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: -8px 0 16px; }
.cat-chips .chip { border: 0; border-radius: 999px; padding: 6px 14px; background: #fff; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; box-shadow: var(--shadow); }
.cat-chips .chip:hover { color: var(--ink); }
.cat-chips .chip.is-on { background: var(--btn); color: #fff; }
:root body .tabs-row .tabs button.tab { cursor: pointer; font: inherit; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; }
.cat-table tr.cat-row { cursor: pointer; }
.cat-pick { width: 15px; height: 15px; margin: 0 6px 0 0; vertical-align: -2px; accent-color: var(--accent); cursor: pointer; }
.cat-bulk { position: sticky; top: 90px; z-index: 40; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 10px 16px; margin-bottom: 12px; border-radius: 18px; background: var(--btn); color: #fff; box-shadow: var(--shadow); }
.cat-bulk .field { width: 200px; }
:root body .cat-bulk .btn-primary { background: var(--accent-soft); color: var(--btn); border-color: var(--accent-soft); font-weight: 700; }
:root body .cat-bulk .btn-ghost { color: #fff; }
:root body .cat-bulk .btn-ghost:hover { background: rgba(255, 255, 255, .14); }
.cat-bulk .form-error { color: #ffd2c8; }
.cat-table .cat-chev { width: 16px; height: 16px; transition: transform .15s; }
.cat-table tr.cat-row.is-open .cat-chev { transform: rotate(90deg); color: var(--ink); }
/* chaque médicament (molécule + force) a son sous-titre ; trait plus marqué entre deux médicaments */
:root body table.tbl tr.cat-force td, :root body table.tbl tbody tr.cat-force:hover td { padding: 10px 14px 3px; background: none; border-bottom: 0; border-top: 2px solid var(--line-2); font-size: 12px; color: var(--muted); }
:root body table.tbl tbody tr.cat-force.is-first:first-child td { border-top: 0; }   /* plus de bande de lettre : seul le tout premier groupe n'a pas de filet */
:root body table.tbl tr.cat-force b { color: var(--accent); font-weight: 700; margin-left: 3px; }
.cat-fmt { display: inline-flex; gap: 6px; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--ground-2); font-size: 12px; font-variant-numeric: tabular-nums; margin: 2px 4px 2px 0; white-space: nowrap; }
.cat-miss { color: var(--warn); font-size: 12px; white-space: nowrap; }
:root body table.tbl tr.cat-detail td, :root body table.tbl tbody tr.cat-detail:hover td { background: var(--soft); padding: 0; }
.cat-det { padding: 14px 20px 18px 48px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 24px; }
.cat-det h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.cat-kv { display: grid; grid-template-columns: 130px 1fr; gap: 4px 12px; margin: 0; font-size: 13px; }
.cat-kv dt { color: var(--muted); }
.cat-kv dd { margin: 0; }
:root body table.tbl.cat-mini { background: #fff; border-radius: 12px; overflow: hidden; }
/* fiche : dialogue en panneau latéral */
:root body dialog.dlg.cat-panel { width: min(600px, 100vw); max-width: 100vw; height: 100vh; max-height: 100vh; margin: 0 0 0 auto; border-radius: 28px 0 0 28px; }
:root body dialog.dlg.cat-panel .dlg-inner { display: flex; flex-direction: column; height: 100%; max-height: 100vh; }
dialog.cat-panel .cat-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.cat-blk { border-radius: 20px; background: var(--soft); padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.cat-blk h3 { margin: 0; font-size: 14px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cat-blk h3 small { font-weight: 400; color: var(--muted); font-size: 12px; margin-right: auto; }
.cat-note { margin: 0; font-size: 13px; color: var(--warn); background: var(--warn-bg); border-radius: 12px; padding: 8px 12px; }
.seg { display: flex; gap: 2px; padding: 3px; background: var(--ground-2); border-radius: 999px; }
.seg button { flex: 1; border: 0; background: none; border-radius: 999px; height: 36px; font: inherit; font-size: 13px; color: var(--muted); cursor: pointer; }
.seg button.is-on { background: #fff; color: var(--ink); font-weight: 700; box-shadow: inset 0 0 0 1px var(--control-border); }
.cat-fmts { display: flex; flex-direction: column; gap: 8px; }
.cat-fmt-row { display: grid; grid-template-columns: 90px minmax(0, 1fr) 120px 36px; gap: 8px; align-items: end; }
@media (max-width: 760px) {
    .cat-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cat-det { grid-template-columns: 1fr; padding-left: 18px; }
    .cat-fmt-row { grid-template-columns: 80px minmax(0, 1fr) 36px; }
    :root body dialog.dlg.cat-panel { border-radius: 0; }
}
/* ---------------------------------------------------------------- cartes, badges, alertes */
:root body .card { background: #fff; border: 0; border-radius: var(--r-card); box-shadow: var(--shadow); }
:root body .card-head { padding: 20px 24px; border-bottom: 0; }
:root body .card-head .title { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
:root body .card-body { padding: 22px 26px; }
:root body .card-foot { padding: 14px 24px; }
:root body .badge { height: 26px; padding: 0 12px; font-size: 12px; }
:root body .alert { border-radius: 18px; border: 0; padding: 14px 20px; background: #fff; box-shadow: var(--shadow); }
:root body .alert-warn { background: var(--warn-bg); box-shadow: none; }
:root body .alert-danger { background: var(--danger-bg); box-shadow: none; }
:root body .alert-ok { background: var(--ok-bg); box-shadow: none; }
:root body .kpi .value { font-weight: 400; }
/* ---------------------------------------------------------------- champs */
:root body .input, :root body .field input:not([type=checkbox]):not([type=radio]), :root body .field select, :root body .field textarea { height: 44px; }
:root body .field.is-sm input:not([type=checkbox]):not([type=radio]), :root body .field.is-sm select { height: 40px; }
:root body .field textarea { height: auto; }
:root body .field > label, :root body .field > .label { font-size: 12px; font-weight: 600; letter-spacing: 0; }
:root body .list-head .list-search { margin-left: auto; }
/* onglets et recherche sur une même rangée, la recherche à droite */
:root body .tabs-row { display: flex; align-items: center; gap: 16px; margin: 0 0 22px; border-bottom: 1px solid var(--line-2); }
:root body .tabs-row .tabs { flex: 1; min-width: 0; margin: 0; border: 0; }
:root body .tabs-row .list-search { flex-shrink: 0; margin: 0 0 4px; }
@media (max-width: 700px) {
    :root body .tabs-row { flex-wrap: wrap; }
    :root body .tabs-row .list-search { width: 100%; margin-bottom: 10px; }
}
:root body .list-search .field input[type=search] { border-radius: 999px; border-color: var(--control-border); background: #fff; box-shadow: var(--shadow); height: 44px; }
:root body .combo-list { border-radius: 18px; padding: 6px; box-shadow: 0 16px 36px -12px rgba(16, 40, 28, .25); border-color: var(--line); }
:root body .combo-list li[role=option] { border-radius: 12px; }
/* ---------------------------------------------------------------- tableaux */
:root body table.tbl th { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); border-bottom: 1px solid var(--line); padding: 8px 6px 6px; }
:root body table.tbl td { border-bottom: 1px solid var(--line); padding: 6px 6px; }
:root body table.tbl tr:last-child td { border-bottom: 0; }
:root body table.tbl tbody tr:hover td { background: var(--soft); }
:root body table.tbl td.acts, :root body table.tbl th.acts { background: #fff; box-shadow: -1px 0 0 var(--line-2); }
:root body table.tbl tbody tr:hover td.acts { background: var(--soft); }
:root body table.tbl.fam-table td.acts, :root body table.tbl.fam-table th.acts, :root body table.tbl.no-vlines td.acts, :root body table.tbl.no-vlines th.acts { box-shadow: none; }
:root body table.tbl td.acts .btn-icon { width: 30px; height: 30px; border-radius: 50%; }   /* petits : les lignes restent serrées */
/* bandeau de date quand le jour change (fond des onglets, petit caractère) */
:root body table.tbl tbody tr.day-sep td, :root body table.tbl tbody tr.day-sep:hover td { background: var(--ground-2); border: 0; padding: 5px 14px; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--muted); }
:root body table.tbl tr.is-count td { background: #eef7f1; border-top: 2px solid #dcefe3; }
:root body table.tbl tr.is-count:hover td { background: #e4f1e9; }
:root body table.tbl tbody tr.is-count td.acts { background: #eef7f1; }
:root body table.tbl tbody tr.is-count:hover td.acts { background: #e4f1e9; }
:root body table.tbl a.prod, :root body [data-coreui-table="INV_INVENTAIRE"] table.tbl td:not(.acts) a { color: var(--ink); }
:root body .pager { padding: 14px 24px; }
:root body .pager .cur { border-radius: 12px; }
/* ---------------------------------------------------------------- onglets : sélecteur segmenté */
:root body .tabs { display: flex; gap: 6px; padding: 0; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; background: none; margin: 0 0 22px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
:root body .tabs::-webkit-scrollbar { display: none; }
:root body .tab { height: 44px; padding: 0 16px; display: inline-flex; align-items: center; gap: 6px; border: 0; border-bottom: 3px solid transparent; margin: 0 0 -1px; border-radius: 0; background: none; text-transform: uppercase; letter-spacing: .03em; font-size: 13px; font-weight: 500; color: var(--muted); white-space: nowrap; }
:root body .tab:hover { color: var(--ink); }
:root body .tab.is-active { background: none; color: var(--ink); font-weight: 800; border-bottom-color: var(--accent); box-shadow: none; }
/* ---------------------------------------------------------------- dialogues */
:root body dialog.dlg { border: 0; border-radius: 28px; box-shadow: 0 30px 70px -20px rgba(16, 40, 28, .4); }
:root body .dlg-head { padding: 22px 26px 10px; border-bottom: 0; }
:root body .dlg-head h2 { font-weight: 600; letter-spacing: -.01em; }
:root body .dlg-body { padding: 12px 26px 18px; }
:root body .dlg-foot { padding: 14px 26px 22px; border-top: 0; }
:root body .choice { border-radius: 18px; }
/* ---------------------------------------------------------------- calendrier et tuiles de Mouvements */
/* une couleur par type de mouvement : pastilles du tableau, cases du calendrier, légende */
:root body .badge-both { background: linear-gradient(90deg, var(--ok-bg) 50%, var(--warn-bg) 50%); color: var(--ink); }
:root body .badge-adjust { background: #e1e8f6; color: #3b5a99; }
:root body .badge-return { background: #ece4f6; color: #6a47a0; }
/* calendrier : sur le fond des onglets, l'année et ses flèches, les jours sur toute la largeur, la légende en bas */
:root body .cal { background: var(--ground-2); border-radius: var(--r-card); padding: 18px 24px 20px; }
:root body .cal-head { justify-content: flex-start; align-items: center; gap: 6px; padding: 0 0 12px; }
:root body .cal-year { font-size: 17px; font-weight: 600; letter-spacing: -.02em; line-height: 1; margin: 0 4px; }
:root body .cal-head .btn-icon.is-disabled { opacity: .3; pointer-events: none; }
:root body .cal-nav .btn-icon { background: transparent; }
:root body .cal-nav .btn-icon:hover { background: #fff; }
:root body .cal-body { display: block; padding: 0; border: 0; overflow: visible; }
:root body .cal-grid { display: flex; flex-direction: column; gap: 3px; flex-shrink: 1; width: 100%; }
:root body .cal-row { display: grid; grid-template-columns: 84px repeat(31, minmax(0, 1fr)); gap: 3px; height: 20px; align-items: center; }
:root body .cal-grid .m-head { width: auto; }
:root body .cal-grid .d-head { width: auto; }
:root body .cal-grid .cell { width: auto; height: 20px; border-radius: 5px; box-shadow: none; }
:root body .cal-grid .cell.void { background: rgba(20, 32, 26, .05); opacity: 1; }
:root body .cal-grid .cell.none { background: #fff; }
:root body .cal-grid .cell.t-achat { background: var(--c-achat); }
:root body .cal-grid .cell.t-vente { background: var(--c-vente); }
:root body .cal-grid .cell.t-ajustement { background: var(--c-ajustement); }
:root body .cal-grid .cell.t-destruction { background: var(--c-destruction); }
:root body .cal-grid .cell.t-retour { background: var(--c-retour); }
:root body .cal-grid .cell[style] { background-color: transparent; }
:root body .cal-empty { margin: 4px 0 8px; }
:root body .cal-legend { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px 16px; padding: 0; margin-left: auto; }
:root body .cal-legend .item { display: inline-flex; align-items: center; gap: 7px; padding: 0; margin: 0; background: none; font-size: 13px; color: var(--muted); }
:root body .cal-legend .sw { height: 14px; border-radius: 4px; }
:root body .cal-legend .sw.t-achat { background: var(--c-achat); }
:root body .cal-legend .sw.t-vente { background: var(--c-vente); }
:root body .cal-legend .sw.t-ajustement { background: var(--c-ajustement); }
:root body .cal-legend .sw.t-destruction { background: var(--c-destruction); }
:root body .cal-legend .sw.t-retour { background: var(--c-retour); }
:root body .cal-legend .sw.none { background: #fff; box-shadow: none; }
:root body .list-head h2 { font-size: 20px; font-weight: 600; }
:root body .ap-info h2 { font-size: 38px; font-weight: 500; letter-spacing: -.025em; }
:root body .ap-tile { background: #fff; border: 0; border-radius: 28px; box-shadow: var(--shadow); padding: 20px 22px; }
:root body .ap-sm.is-current { background: #fff; box-shadow: 0 0 0 2px var(--accent), var(--shadow); }
:root body .ap-count { width: 40px; height: 40px; border-radius: 50%; background: var(--btn); }
:root body .ap-nums .v { font-size: 28px; font-weight: 400; letter-spacing: -.02em; }
:root body .ap-sm .ap-name { padding-right: 52px; }
/* ---------------------------------------------------------------- connexion et pages d'erreur */
:root body .login-side { background: linear-gradient(165deg, var(--rail-a), var(--rail-b)); color: #fff; border-right: 0; }
:root body .login-side .wordmark { color: #fff; }
:root body .login-side .wordmark .mark { background: none; color: #fff; }
:root body .login-side .pitch .big { font-weight: 500; letter-spacing: -.02em; }
:root body .login-side .pitch .txt { color: #b8d2c3; }
:root body .login-side .faint { color: #8fb09f; }
:root body .login-main { background: var(--ground); }
:root body .login-form { background: #fff; border-radius: 28px; padding: 36px; box-shadow: var(--shadow); }
:root body .login-form h1 { font-weight: 500; letter-spacing: -.02em; }
:root body .blank { background: var(--ground); }
:root body .blank .box { background: #fff; border-radius: 28px; padding: 36px; box-shadow: var(--shadow); }
:root body .wordmark .mark { width: 40px; height: 40px; border-radius: 0; background: none; color: var(--btn); }
:root body .wordmark .mark svg { width: 100%; height: 100%; }
:root body .wordmark .name { font-size: 28px; font-weight: 600; letter-spacing: -.02em; }
:root body .blank h1 { font-weight: 500; letter-spacing: -.02em; }
/* ---------------------------------------------------------------- mobile : barre plus mince, onglets puis recherche pleine largeur */
@media (max-width: 900px) {
    :root body { --rail-w: 56px; --rail-open: 230px; }
    :root body .shell { padding: 0 16px; }
    .rf-rail { padding: 10px 6px; }
    .rf-logo { padding: 0 6px; margin-bottom: 10px; }
    .rf-logo .logo { width: 32px; height: 32px; }
    .rf-mod { padding: 0 12px; }
    .rf-acct { padding: 0 3px; }
    .rf-sub, .rf-fold { padding-left: 15px; }
    .rf-fold { display: none; }
    /* sur mobile, la barre reste réduite */
    .rf-rail .rf-search { padding-left: 15px; }
    :root body .page-head h1:has(.ti) ~ .sub { padding-left: 0; }
    .rf-rail .rf-menu { left: calc(var(--rail-open) - 6px + 12px); }
    :root body .page-head h1 { font-size: 30px; }
}
@media (max-width: 520px) {
    :root body .card-body { padding: 18px; }
    :root body .btn { height: 42px; padding: 0 18px; }
}

/* ============================================================== accessibilité (revue du 14 octobre 2026) */
/* focus clavier visible sur tout ce qui se clique */
:where(.btn, .tab, .chip, .seg button, .pager button, .fmt-pick, .um-item, .cal-legend .item, a.card.tile, .gs-item, .cal-toggle, .cell-btn):focus-visible {
    outline: 2px solid var(--focus); outline-offset: 2px;
}
:where(.rf-mod, .rf-sub, .rf-head, .rf-fold, .rf-acct, .rf-logo):focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
/* recherche de la barre : son contour se voit sur le fond */
.rf-search { box-shadow: inset 0 0 0 1px var(--control-border); }
.rf-rail .rf-search { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
/* puces : cible de 36 px */
.chip { min-height: 36px; display: inline-flex; align-items: center; }
/* barre réduite : elle ne s'ouvre qu'après un court arrêt du pointeur (pas en la frôlant) */
body.rail-compact .rf-rail:hover { transition-delay: .15s, .15s; }
body.rail-compact .rf-rail:hover .rf-lbl { transition-delay: .21s; }
@media (max-width: 900px) {
    .rf-rail:hover { transition-delay: .15s, .15s; }
    .rf-rail:hover .rf-lbl { transition-delay: .21s; }
}

/* chevron des titres de modules : visible quand les libellés le sont */
@media (min-width: 901px) { :root body:not(.rail-compact) .rf-head .rf-chev { opacity: 1; } }
.rf-rail:hover .rf-head .rf-chev, .rf-rail:focus-within .rf-head .rf-chev { opacity: 1; }

/* recherche dans le module narcotiques : l'allure d'un lien de page tant qu'on n'y tape pas,
   puis un champ blanc. La liste des résultats est posée en position fixe (sous le champ, par
   recherche.js) : dans la liste défilante des modules, elle serait coupée. */
.rf-rail .rf-subs .rf-search { height: 38px; margin: 0; padding: 0 12px 0 20px; gap: 17px; border-radius: 12px; background: none; box-shadow: none; color: rgba(255, 255, 255, .66); cursor: pointer; }
.rf-rail .rf-subs .rf-search:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.rf-rail .rf-subs .rf-search input { font-size: 14px; font-weight: 500; color: #fff; cursor: pointer; }
.rf-rail .rf-subs .rf-search input::placeholder { color: rgba(255, 255, 255, .66); }
.rf-rail .rf-subs .rf-search:hover input::placeholder { color: #fff; }
.rf-rail .rf-subs .rf-search:focus-within { background: #fff; color: var(--muted); cursor: text; }
.rf-rail .rf-subs .rf-search:focus-within input { color: var(--ink); cursor: text; }
.rf-rail .rf-subs .rf-search:focus-within input::placeholder { color: var(--muted); }
.rf-rail .rf-subs .gs-list { position: fixed; right: auto; z-index: 120; }
.rf-rail .rf-subs .rf-search input:placeholder-shown::-webkit-search-cancel-button { display: none; }   /* sans quoi le texte « Rechercher un produit » est coupé */

/* tableaux groupés par lettre (option group_by) : la lettre dans la marge de la colonne #,
   un filet plus marqué au début de chaque groupe — pas de ligne en plus. */
table.tbl.is-grouped thead th:first-child, table.tbl.is-grouped td.idx { padding-left: 34px; }
/* la lettre loge dans la marge gauche (20 px) et s'aligne sur la ligne de base du texte, abaissée d'1 px
   pour que le centre de la capitale (15 px) tombe sur celui des chiffres (12 px) */
table.tbl .grp-l { display: inline-block; width: 20px; margin-left: -20px; font-size: 15px; font-weight: 700; line-height: 1; vertical-align: -1px; color: var(--accent); }
/* catalogue : la lettre dans la marge de la première ligne molécule de chaque lettre */
:root body table.tbl.cat-table tr.cat-force td, :root body table.tbl.cat-table tbody tr.cat-force:hover td { padding-left: 34px; }
table.tbl tbody tr.grp-start td { border-top: 2px solid var(--line-2); }
table.tbl tbody tr.grp-start:first-child td { border-top: 0; }

/* catalogue : le chevron d'un produit sous la case à cocher de sa molécule */
:root body table.tbl.cat-table thead th:first-child, :root body table.tbl.cat-table tr.cat-row td:first-child { padding-left: 34px; }

/* mouvements : la date en tête de son jour (colonne Date), un filet ouvre chaque jour — pas de bandeau,
   comme les lettres des tableaux groupés */
table.tbl .day-l { font-weight: 700; color: var(--accent); }
:root body table.tbl tbody tr.day-start td { border-top: 2px solid var(--line-2); }
:root body table.tbl tbody tr.day-start:first-child td { border-top: 0; }

/* tableaux serrés : 12 px entre deux colonnes, 14 px gardés sur les bords de la carte
   (la marge des lettres des tableaux groupés reste prioritaire) */
:root body table.tbl tr > :first-child { padding-left: 14px; }
:root body table.tbl tr > :last-child { padding-right: 14px; }
:root body table.tbl.is-grouped thead th:first-child, :root body table.tbl.is-grouped td.idx { padding-left: 34px; }

/* écran tactile ou étroit (tablette au comptoir) : les boutons des lignes reprennent 40 px, une cible pour le doigt */
@media (max-width: 1024px), (pointer: coarse) {
    :root body table.tbl td.acts .btn-icon { width: 40px; height: 40px; }
}

/* recherche de la barre : le texte part exactement où partent les libellés des pages
   (pas de marge ni de décor natifs — Safari iPad en ajoute aux champs de recherche) */
.rf-rail .rf-subs .rf-search input { padding: 0; margin: 0; border-radius: 0; -webkit-appearance: none; appearance: none; }
.rf-rail .rf-subs .rf-search input::-webkit-search-decoration { -webkit-appearance: none; }
/* écran étroit (iPad en portrait) : la recherche et les titres suivent la marge des liens de page (15 px) */
@media (max-width: 900px) {
    .rf-rail .rf-subs .rf-search, .rf-rail .rf-head { padding-left: 15px; }
}

/* en-tête de carte : onglets et recherche dans la carte du tableau, au-dessus des colonnes.
   Ligne forte sous les onglets, onglet actif souligné de 4 px ; la recherche (36 px) est centrée
   dans les 56 px de l'en-tête et son texte s'aligne sur celui des onglets. */
:root body .tabs-row.in-card { margin: 0; padding: 0 14px; height: 58px; border-bottom: 0px solid var(--line-strong); gap: 16px; align-items: stretch; flex-wrap: nowrap; }
:root body .tabs-row.in-card .tabs { margin: 0; border: 0; align-items: stretch; }
:root body .tabs-row.in-card .tab { height: auto; display: inline-flex; align-items: center; margin: 0 0 -2px; border-top: 3px solid transparent; border-bottom-width: 3px; }
:root body .tabs-row.in-card .tab.is-active { border-top-width: 4px; border-bottom-width: 4px; border-bottom-color: var(--btn); }
:root body .tabs-row.in-card .list-search { margin: 0 0 0 auto; flex: 0 1 300px; align-self: center; }
:root body .tabs-row.in-card .list-search input[type=search] { height: 36px; box-shadow: none; border-color: transparent; background: var(--ground-2); }
:root body .tabs-row.in-card .list-search input[type=search]:focus { background: #fff; border-color: var(--accent); }
@media (max-width: 700px) { :root body .tabs-row.in-card { height: auto; flex-wrap: wrap; padding-bottom: 10px; } }

/* lignes des tableaux : en-tête des colonnes marqué (2 px), entrées séparées par des tirets */
:root { --line-strong: #b7c0ba; --row-rule: #c3cbc5; }
:root body table.tbl th { border-bottom: 0px solid var(--line-2); }
:root body table.tbl td { border-bottom: 0px dashed var(--row-rule); }

/* tirets plus pâles ; les débuts de groupe (lettre, jour, molécule) passent d'un filet de 2 px à une ligne simple */
:root { --row-rule: #dde2de; }
:root body table.tbl tbody tr.grp-start td, :root body table.tbl tbody tr.day-start td { border-top: 1px solid var(--line-strong); }
:root body table.tbl tr.cat-force td, :root body table.tbl tbody tr.cat-force:hover td { border-top: 1px solid var(--line-strong); }
:root body table.tbl tbody tr.grp-start:first-child td, :root body table.tbl tbody tr.day-start:first-child td { border-top: 0; }

/* titre de page : 26 px, sa ligne de base alignée sur celle du nom « officine » dans la barre */
:root body .page-head h1 { font-size: 26px; }
:root body .content > .main:first-child { padding-top: 18px; }

/* barre réduite (ou écran étroit) : elle ne montre que des icônes, donc toutes les pages restent affichées ;
   le pliage des modules ne sert que barre dépliée (sinon, deux modules repliés ne laisseraient rien) */
body.rail-compact .rf-rail .rf-subs[hidden] { display: flex !important; }
body.rail-compact .rf-rail .rf-head { pointer-events: none; }
body.rail-compact .rf-rail .rf-head .rf-chev { display: none; }
@media (max-width: 900px) {
    .rf-rail .rf-subs[hidden] { display: flex !important; }
    .rf-rail .rf-head { pointer-events: none; }
    .rf-rail .rf-head .rf-chev { display: none; }
}