/* Design system « Clair ardoise », version fenêtre d'application (inspiration raycast.com) :
   tokens (contrat), puis coque de l'application, puis composants, puis exceptions de page.
   Écart assumé avec le design system : le texte secondaire reste à 16 px (exigence du PRD) ;
   seuls les intitulés de groupe, étiquettes de statut et compteurs descendent à 14–15 px. */
:root {
  color-scheme: light;
  --color-bg: #F7F9FB;
  --color-surface: #FFFFFF;
  --color-surface-subtle: #EDF2F7;
  --color-text: #27313B;
  --color-text-secondary: #526170;
  --color-text-placeholder: #596675;
  --color-text-inverse: #FFFFFF;
  --color-border-subtle: #D5DDE5;
  --color-border-control: #7C8997;
  --color-accent: #526A85;
  --color-accent-hover: #435A73;
  --color-accent-pressed: #354A61;
  --color-accent-soft: #E8EEF5;
  --color-accent-soft-hover: #E2EAF3;
  --color-focus: #435A73;
  --color-warm: #D97732;
  --color-warm-soft: #FFF1E6;
  --color-warm-text: #934713;
  --color-success: #246344;
  --color-success-soft: #EAF5EE;
  --color-warning: #805408;
  --color-warning-soft: #FFF5DF;
  --color-danger: #A4313A;
  --color-danger-hover: #892630;
  --color-danger-pressed: #702029;
  --color-danger-soft: #FCEDEF;
  --color-info: #435A73;
  --color-info-soft: #E8EEF5;
  --color-disabled-bg: #E5EAF0;
  --color-disabled-text: #596675;
  --color-overlay: rgb(39 49 59 / 42%);

  /* Nuances dérivées de la fenêtre d'application */
  --color-hairline: #E3E8EE;      /* séparations décoratives dans les panneaux */
  --color-sidebar-hover: #E8EDF3;
  --color-row-hover: #F5F7FA;
  --color-chev: #8794A1;
  --grad-accent: linear-gradient(180deg, #5D7692 0%, #4D647E 100%);
  --grad-accent-hover: linear-gradient(180deg, #526A85 0%, #435A73 100%);
  --grad-tile: linear-gradient(180deg, #F2F5F9 0%, #E5ECF3 100%);
  --grad-tile-warm: linear-gradient(180deg, #FFF5EC 0%, #FFE8D6 100%);

  /* Géométrie */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem;
  --radius-small: 6px;
  --radius-control: 10px;
  --radius-card: 14px;
  --radius-dialog: 18px;
  --shadow-hair: 0 1px 2px rgb(39 49 59 / 6%);
  --shadow-card: 0 1px 2px rgb(39 49 59 / 4%), 0 4px 16px rgb(39 49 59 / 5%);
  --shadow-float: 0 12px 32px rgb(39 49 59 / 16%), 0 0 0 1px rgb(39 49 59 / 6%);
  --shadow-btn: inset 0 1px 0 rgb(255 255 255 / 18%), 0 1px 2px rgb(39 49 59 / 22%);
  --transition: 150ms ease;
  --topbar-h: 60px;
  --bottomnav-h: 72px;
  --sidebar-w: 264px;
  --page-x: var(--space-4);

  /* Icônes d'état (masques, couleur = currentColor) */
  --i-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
  --i-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
  --i-warn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
  --i-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E");
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --i-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
}
@media (min-width: 48rem) { :root { --page-x: var(--space-6); } }

/* ---------- Base ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem; line-height: 1.5; color: var(--color-text); background: var(--color-bg);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
a { color: var(--color-accent); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--transition); }
a:hover { color: var(--color-accent-hover); }
a:active { color: var(--color-accent-pressed); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
h1 { font-size: 1.75rem; line-height: 2.25rem; font-weight: 700; margin: var(--space-1) 0 var(--space-4); letter-spacing: -.022em; }
@media (max-width: 47.99rem) { h1 { font-size: 1.5rem; line-height: 2rem; } }
h2 { font-size: 1.1875rem; line-height: 1.75rem; font-weight: 650; margin: var(--space-6) 0 var(--space-3); letter-spacing: -.012em; }
h3 { font-size: 1.0625rem; line-height: 1.5rem; font-weight: 600; margin: var(--space-5) 0 var(--space-2); letter-spacing: -.005em; }
.card > h2:first-child, .card > h3:first-child, .card > .row:first-child h2 { margin-top: 0; }
p { margin: var(--space-2) 0 var(--space-3); max-width: 75ch; }
small, .small { font-size: 1rem; color: var(--color-text-secondary); }
strong, b { font-weight: 650; }
code { font-size: .9375rem; background: var(--color-surface-subtle); padding: 1px 6px; border-radius: var(--radius-small); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 8px; top: 8px; z-index: 99; background: var(--color-surface); padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); }
.icon { width: 20px; height: 20px; flex-shrink: 0; vertical-align: -4px; }
.icon.lg { width: 22px; height: 22px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
::selection { background: #D3DEEA; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------- Coque : barre latérale + panneau de contenu ---------- */
#shell { min-height: 100vh; }
#panel { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
#sidenav { display: none; }
.logo { width: 30px; height: 30px; border-radius: 8px; background: var(--grad-accent); color: var(--color-text-inverse); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-btn); flex-shrink: 0; }
.logo .icon { width: 17px; height: 17px; vertical-align: 0; }

/* Barre du haut : téléphone et pages hors PPE ; fil d'Ariane dans le panneau sur ordinateur */
#topbar { position: sticky; top: 0; z-index: 20; background: rgb(247 249 251 / 88%); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--color-hairline); }
#topbar .bar { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--page-x); min-height: var(--topbar-h); max-width: 1200px; margin: 0 auto; }
#topbar .brand { color: var(--color-text); text-decoration: none; font-weight: 700; font-size: 1.0625rem; letter-spacing: -.01em; display: flex; align-items: center; gap: var(--space-2); min-height: 44px; }
#topbar .ppe-name { font-weight: 600; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
#topbar .brand + .ppe-name { color: var(--color-text-secondary); font-weight: 500; }
#topbar .crumbs { display: none; }
#topbar .who { display: flex; align-items: center; gap: var(--space-1); }
.role-chip { background: var(--color-warm-soft); color: var(--color-warm-text); border-radius: var(--radius-small); padding: 0 8px; line-height: 26px; white-space: nowrap; font-weight: 600; font-size: .9375rem; }
.iconbtn { background: transparent; color: var(--color-text-secondary); border: 0; border-radius: var(--radius-control); min-height: 44px; min-width: 44px; padding: 0 var(--space-2); font: inherit; font-weight: 500; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); transition: background var(--transition), color var(--transition); }
.iconbtn:hover { background: var(--color-sidebar-hover); color: var(--color-text); }
.iconbtn:active { background: var(--color-accent-soft-hover); color: var(--color-accent-pressed); }
@media (max-width: 32.5rem) {
  #topbar .brand .name, #topbar .iconbtn .label { display: none; }
  #topbar .role-chip { display: none; }
  #topbar .bar { gap: var(--space-2); }
}

main { flex: 1; min-width: 0; width: 100%; max-width: 1200px; margin: 0 auto; padding: var(--space-5) var(--page-x) calc(var(--bottomnav-h) + 104px); outline: none; }
main.narrow, .narrow { max-width: 720px; }
.loading { color: var(--color-text-secondary); }

/* Barre d'onglets mobile : 4 onglets maximum */
#bottomnav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; background: rgb(255 255 255 / 92%); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-top: 1px solid var(--color-hairline); display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); }
#bottomnav:empty { display: none; }
#bottomnav a { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 58px; font-size: .9375rem; line-height: 1.25rem; font-weight: 500; color: var(--color-text-secondary); text-decoration: none; border-radius: var(--radius-control); gap: 3px; transition: color var(--transition); }
#bottomnav a:hover { color: var(--color-text); }
#bottomnav .icon { width: 22px; height: 22px; box-sizing: content-box; padding: 3px 16px; border-radius: 99px; transition: background var(--transition); }
#bottomnav a:hover .icon { background: var(--color-surface-subtle); }
#bottomnav a[aria-current="page"] { color: var(--color-accent-hover); font-weight: 650; }
#bottomnav a[aria-current="page"] .icon { background: var(--color-accent-soft); }

/* Action flottante : nouvelle facture */
.fab { position: fixed; right: var(--space-4); bottom: calc(var(--bottomnav-h) + 16px + env(safe-area-inset-bottom)); z-index: 21; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 54px; padding: 0 var(--space-5) 0 var(--space-4); border-radius: 99px; background: var(--grad-accent); color: var(--color-text-inverse); font-weight: 650; text-decoration: none; box-shadow: inset 0 1px 0 rgb(255 255 255 / 18%), 0 10px 28px rgb(39 49 59 / 28%); transition: filter var(--transition); }
.fab:hover { background: var(--grad-accent-hover); color: var(--color-text-inverse); }
.fab:active { background: var(--color-accent-pressed); color: var(--color-text-inverse); }
.fab:focus-visible { outline-offset: 3px; }
.fab .icon { width: 22px; height: 22px; }

/* Barre latérale (ordinateur) */
#sidenav .side-brand { display: flex; align-items: center; gap: var(--space-2); padding: 6px var(--space-2) var(--space-3); font-weight: 700; font-size: 1.0625rem; letter-spacing: -.01em; color: var(--color-text); text-decoration: none; min-height: 44px; }
#sidenav .switcher { display: flex; align-items: center; gap: var(--space-3); padding: 10px 12px; background: var(--color-surface); border: 1px solid var(--color-hairline); border-radius: var(--radius-control); box-shadow: var(--shadow-hair); margin-bottom: var(--space-3); }
#sidenav .switcher .av { width: 34px; height: 34px; border-radius: 9px; background: var(--grad-tile-warm); color: var(--color-warm-text); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgb(217 119 50 / 18%); }
#sidenav .switcher .t { display: block; font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
#sidenav .switcher .s { display: block; color: var(--color-text-secondary); font-size: .9375rem; line-height: 1.3; }
#sidenav .btn.primary { width: 100%; margin-bottom: var(--space-2); }
#sidenav .group { font-size: .875rem; font-weight: 650; color: var(--color-text-secondary); padding: var(--space-4) var(--space-3) var(--space-1); letter-spacing: .01em; }
#sidenav a.nav { display: flex; align-items: center; gap: var(--space-3); min-height: 42px; padding: 0 var(--space-3); margin: 1px 0; border-radius: 8px; text-decoration: none; color: var(--color-text-secondary); font-weight: 500; transition: background var(--transition), color var(--transition); }
#sidenav a.nav:hover { background: var(--color-sidebar-hover); color: var(--color-text); }
#sidenav a.nav[aria-current="page"] { background: var(--color-surface); color: var(--color-text); font-weight: 650; box-shadow: var(--shadow-hair), 0 0 0 1px var(--color-hairline); }
#sidenav a.nav[aria-current="page"] .icon { color: var(--color-accent); }
#sidenav .side-foot { margin-top: auto; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-1) 0; border-top: 1px solid var(--color-hairline); }
#sidenav .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--color-accent-soft); color: var(--color-accent-hover); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
#sidenav .me { flex: 1; min-width: 0; line-height: 1.3; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sidenav .me small { display: block; font-size: .9375rem; font-weight: 400; overflow: hidden; text-overflow: ellipsis; }

@media (min-width: 56.25rem) {
  body:not(.no-tabs) #shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  body:not(.no-tabs) #sidenav { display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: var(--space-3) var(--space-3) var(--space-3); }
  body:not(.no-tabs) #panel { margin: 8px 8px 8px 0; min-height: calc(100vh - 16px); background: var(--color-surface); border: 1px solid var(--color-hairline); border-radius: 12px; box-shadow: var(--shadow-hair); }
  body:not(.no-tabs) #topbar { top: 0; border-radius: 12px 12px 0 0; background: rgb(255 255 255 / 88%); }
  body:not(.no-tabs) #topbar .bar { max-width: none; margin: 0; }
  body:not(.no-tabs) #topbar .brand, body:not(.no-tabs) #topbar .ppe-name, body:not(.no-tabs) #topbar .who { display: none; }
  body:not(.no-tabs) #topbar .crumbs { display: flex; align-items: center; gap: var(--space-2); min-width: 0; color: var(--color-text-secondary); }
  #topbar .crumbs .icon { width: 16px; height: 16px; color: var(--color-chev); }
  #topbar .crumbs .here { color: var(--color-text); font-weight: 600; }
  body:not(.no-tabs) main { max-width: 1000px; margin: 0; padding: var(--space-6) var(--page-x) var(--space-7); }
  #bottomnav, .fab { display: none; }
}

/* ---------- Cartes et grilles ---------- */
.card { background: var(--color-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-hair); padding: var(--space-4); margin: 0 0 var(--space-4); border: 1px solid var(--color-hairline); }
@media (min-width: 48rem) { .card { padding: var(--space-5); } }
.card.subtle { background: var(--color-bg); box-shadow: none; }
.card.highlight { border-color: var(--color-hairline); box-shadow: var(--shadow-card); position: relative; overflow: hidden; }
.card.highlight::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--grad-accent); }
.grid { display: grid; gap: var(--space-4); }
@media (min-width: 43.75rem) { .grid.two { grid-template-columns: 1fr 1fr; } .grid.three { grid-template-columns: 1fr 1fr 1fr; } }
.stat .label { color: var(--color-text-secondary); }
.stat .value { font-size: 1.5rem; line-height: 2rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: var(--space-1); }

/* Chiffres clés groupés dans un seul bloc */
.kpis { display: grid; background: var(--color-surface); border: 1px solid var(--color-hairline); border-radius: var(--radius-card); box-shadow: var(--shadow-hair); overflow: hidden; margin: 0 0 var(--space-4); }
.kpis > .stat { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-hairline); }
.kpis > .stat:first-child { border-top: 0; }
.kpis .label { display: flex; align-items: center; gap: var(--space-2); }
.kpis .label .icon { color: var(--color-text-secondary); width: 18px; height: 18px; }
.kpis .value { font-size: 1.625rem; line-height: 2.125rem; }
.cur { font-size: 1rem; font-weight: 600; color: var(--color-text-secondary); margin-right: 6px; letter-spacing: 0; }
@media (min-width: 43.75rem) {
  .kpis { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; }
  .kpis > .stat { border-top: 0; border-left: 1px solid var(--color-hairline); }
  .kpis > .stat:first-child { border-left: 0; }
}
.card .kpis { box-shadow: none; margin: var(--space-3) 0; }

.row { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.row.between > h1 { margin-bottom: var(--space-2); }
.stack > * + * { margin-top: var(--space-3); }
.muted { color: var(--color-text-secondary); }
.right { text-align: right; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.back { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 40px; text-decoration: none; font-weight: 500; color: var(--color-text-secondary); border-radius: var(--radius-control); padding: 0 var(--space-2) 0 var(--space-1); margin-left: calc(-1 * var(--space-1)); transition: background var(--transition), color var(--transition); }
.back:hover { background: var(--color-surface-subtle); color: var(--color-text); }

/* Titre de section façon Raycast */
.section-title { display: flex; align-items: center; gap: var(--space-2); font-size: .9375rem; font-weight: 650; color: var(--color-text-secondary); margin: var(--space-6) 0 var(--space-2); letter-spacing: .005em; }
.section-title .count { background: var(--color-surface-subtle); color: var(--color-text); border-radius: var(--radius-small); padding: 0 7px; line-height: 22px; font-size: .875rem; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; padding: 9px 18px;
  border-radius: var(--radius-control); border: 1px solid var(--color-border-subtle); background: var(--color-surface); color: var(--color-text);
  font: inherit; font-size: 1rem; font-weight: 600; line-height: 1.5rem; cursor: pointer; text-decoration: none; text-align: center;
  box-shadow: var(--shadow-hair);
  transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.btn .icon { color: var(--color-accent); }
.btn:hover { background: var(--color-row-hover); border-color: var(--color-border-control); color: var(--color-text); }
.btn:active { background: var(--color-accent-soft); color: var(--color-accent-pressed); }
.btn.primary { background: var(--grad-accent); border-color: var(--color-accent-hover); color: var(--color-text-inverse); box-shadow: var(--shadow-btn); }
.btn.primary .icon { color: currentColor; }
.btn.primary:hover { background: var(--grad-accent-hover); border-color: var(--color-accent-pressed); color: var(--color-text-inverse); }
.btn.primary:active { background: var(--color-accent-pressed); border-color: var(--color-accent-pressed); }
.btn.ghost { border-color: transparent; background: transparent; box-shadow: none; color: var(--color-accent); }
.btn.ghost:hover { background: var(--color-accent-soft); }
.btn.danger { color: var(--color-danger); }
.btn.danger .icon { color: currentColor; }
.btn.danger:hover { background: var(--color-danger-soft); border-color: var(--color-danger); color: var(--color-danger-hover); }
.btn.danger.primary { background: var(--color-danger); border-color: var(--color-danger-hover); color: var(--color-text-inverse); box-shadow: var(--shadow-btn); }
.btn.danger.primary:hover { background: var(--color-danger-hover); border-color: var(--color-danger-pressed); }
.btn.danger.primary:active { background: var(--color-danger-pressed); border-color: var(--color-danger-pressed); }
.btn.big { min-height: 52px; font-size: 1.0625rem; width: 100%; }
.btn.small { min-height: 44px; padding: 8px 14px; }
.btn[disabled], .btn[aria-disabled="true"], .btn[disabled]:hover {
  background: var(--color-disabled-bg); border-color: var(--color-disabled-bg); color: var(--color-disabled-text); cursor: not-allowed; box-shadow: none;
}
.btn[aria-busy="true"] { cursor: progress; }
.actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); }
/* Barre d'action fixe (validation) */
.actions.sticky {
  position: sticky; bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom)); z-index: 5; flex-wrap: nowrap; gap: var(--space-2); align-items: center;
  background: rgb(255 255 255 / 90%); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-top: 1px solid var(--color-hairline); box-shadow: 0 -6px 20px rgb(39 49 59 / 6%);
  margin: var(--space-5) calc(-1 * var(--page-x)) 0; padding: var(--space-3) var(--page-x);
}
.actions.sticky .btn { padding: 10px 14px; }
.actions.sticky .btn.big { flex: 1; width: auto; }
body.no-tabs .actions.sticky { bottom: 0; padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom)); }
body.no-tabs main { padding-bottom: var(--space-7); }
body.no-tabs #toast { bottom: 96px; }
@media (min-width: 56.25rem) {
  .actions.sticky { bottom: 0; justify-content: flex-end; background: rgb(247 249 251 / 90%); box-shadow: none; }
  .actions.sticky .btn.big { flex: 0 1 auto; min-width: 16rem; order: 2; }
  body:not(.no-tabs) main:has(.actions.sticky) { padding-bottom: 0; }
}

/* ---------- Champs ---------- */
label { display: block; font-weight: 600; margin: var(--space-4) 0 6px; }
.field-hint { font-weight: 400; color: var(--color-text-secondary); }
input[type=text], input[type=email], input[type=tel], input[type=number], input[type=date], input[type=search], select, textarea {
  width: 100%; font: inherit; font-size: 1rem; min-height: 46px; padding: 10px 14px; border: 1px solid var(--color-border-control);
  border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-text); box-shadow: inset 0 1px 2px rgb(39 49 59 / 4%);
  transition: border-color var(--transition), box-shadow var(--transition);
}
select { appearance: none; -webkit-appearance: none; padding-right: 40px; background: var(--color-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23526170' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E") right 12px center / 16px no-repeat; }
input:hover, select:hover, textarea:hover { border-color: var(--color-accent); }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--color-accent); outline-offset: 2px; box-shadow: 0 0 0 4px var(--color-accent-soft); }
input::placeholder, textarea::placeholder { color: var(--color-text-placeholder); }
input[readonly], textarea[readonly] { background: var(--color-bg); border-color: var(--color-border-subtle); box-shadow: none; }
select[disabled], input[disabled] { background-color: var(--color-bg); color: var(--color-text); border-color: var(--color-border-subtle); opacity: 1; box-shadow: none; }
textarea { min-height: 96px; resize: vertical; }
input[type=checkbox], input[type=radio] { accent-color: var(--color-accent); }
input[aria-invalid="true"] { border-color: var(--color-danger); }
input.uncertain, select.uncertain { background-color: var(--color-warning-soft); border-color: var(--color-warning); border-width: 2px; }
.conf { font-weight: 500; margin-left: var(--space-2); }
.conf.low { color: var(--color-warning); }
.conf.high { color: var(--color-success); }
.checkbox { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; font-weight: 400; margin: var(--space-1) 0; }
.checkbox input { width: 20px; height: 20px; flex-shrink: 0; margin: 0; }
fieldset { border: 1px solid var(--color-hairline); border-radius: var(--radius-control); padding: var(--space-2) var(--space-4) var(--space-4); margin: var(--space-4) 0; }
legend { font-weight: 650; padding: 0 var(--space-2); }

/* ---------- Tableaux ---------- */
table { width: 100%; border-collapse: collapse; }
th, td { padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--color-hairline); text-align: left; vertical-align: top; }
th { font-weight: 600; color: var(--color-text-secondary); font-size: .9375rem; border-bottom-color: var(--color-border-subtle); }
tbody tr { transition: background var(--transition); }
tfoot td { font-weight: 700; border-top: 1px solid var(--color-text); border-bottom: 0; }
tr.mine td { background: var(--color-accent-soft); }
tr.mine td:first-child { box-shadow: inset 3px 0 0 var(--color-accent); }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
td input { min-height: 44px; }
/* Tableaux en cartes sur téléphone : chaque cellule garde son intitulé visible (data-label) */
@media (max-width: 40rem) {
  table.cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.cards, table.cards tbody, table.cards tfoot { display: block; }
  table.cards tr { display: block; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-hairline); }
  table.cards tr.mine { background: var(--color-accent-soft); border-radius: var(--radius-control); padding: var(--space-3); box-shadow: inset 3px 0 0 var(--color-accent); }
  table.cards tr.mine td { background: transparent; box-shadow: none; }
  table.cards td { display: flex; justify-content: space-between; gap: var(--space-4); border: 0; padding: 2px 0; text-align: right; }
  table.cards td.num { white-space: normal; }
  table.cards td[data-label]::before { content: attr(data-label); color: var(--color-text-secondary); text-align: left; font-weight: 400; }
  table.cards td.head { display: block; text-align: left; font-size: 1.0625rem; }
  table.cards td:empty { display: none; }
  table.cards tfoot tr { border-top: 1px solid var(--color-text); border-bottom: 0; }
  table.cards tfoot td { border: 0; }
}

/* ---------- Statuts : étiquettes à pastille ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 0 8px; border-radius: var(--radius-small); font-size: .9375rem; line-height: 1.625rem; font-weight: 600; white-space: nowrap; vertical-align: middle; }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.badge.todo { background: var(--color-warning-soft); color: var(--color-warning); box-shadow: inset 0 0 0 1px rgb(128 84 8 / 22%); }
.badge.ok { background: var(--color-success-soft); color: var(--color-success); }
.badge.bad { background: var(--color-danger-soft); color: var(--color-danger); box-shadow: inset 0 0 0 1px rgb(164 49 58 / 22%); }
.badge.info { background: var(--color-accent-soft); color: var(--color-accent-hover); }
.badge.grey { background: var(--color-surface-subtle); color: var(--color-text-secondary); }

.alert { position: relative; border-radius: var(--radius-control); padding: var(--space-3) var(--space-4) var(--space-3) 46px; margin: var(--space-3) 0; border: 1px solid; color: var(--color-text); }
.alert::before { content: ""; position: absolute; left: 15px; top: 15px; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--i-info) center / contain no-repeat; mask: var(--i-info) center / contain no-repeat; }
.alert.warn { background: var(--color-warning-soft); border-color: rgb(128 84 8 / 35%); }
.alert.warn::before { background: var(--color-warning); -webkit-mask-image: var(--i-warn); mask-image: var(--i-warn); }
.alert.error { background: var(--color-danger-soft); border-color: rgb(164 49 58 / 35%); }
.alert.error::before { background: var(--color-danger); -webkit-mask-image: var(--i-error); mask-image: var(--i-error); }
.alert.ok { background: var(--color-success-soft); border-color: rgb(36 99 68 / 30%); }
.alert.ok::before { background: var(--color-success); -webkit-mask-image: var(--i-ok); mask-image: var(--i-ok); }
.alert.info { background: var(--color-info-soft); border-color: rgb(67 90 115 / 30%); }
.alert.info::before { background: var(--color-info); }
.alert ul { margin: var(--space-2) 0 0; padding-left: 1.2em; }
.alert .actions { margin-top: var(--space-3); }

/* ---------- Listes façon Raycast : icône, titre, sous-titre, accessoires à droite ---------- */
.list { list-style: none; padding: 0; margin: 0 0 var(--space-4); }
.list.card { padding: 0; overflow: hidden; }
.list > li { border-bottom: 1px solid var(--color-hairline); }
.list > li:last-child { border-bottom: 0; }
.list a.item, .list .item { display: flex; gap: var(--space-3); align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); min-height: 60px; color: var(--color-text); text-decoration: none; }
@media (min-width: 48rem) { .list a.item, .list .item { padding-left: var(--space-5); padding-right: var(--space-4); } }
.list a.item { transition: background var(--transition); }
.list a.item:hover { background: var(--color-row-hover); color: var(--color-text); }
.list a.item:active { background: var(--color-accent-soft); }
.list a.item:focus-visible { outline-offset: -2px; border-radius: var(--radius-card); }
.list a.item .chev { width: 18px; height: 18px; color: var(--color-chev); }
.item .title { font-weight: 600; }
.item .sub { color: var(--color-text-secondary); }
.item .lead { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: var(--grad-tile); color: var(--color-accent-hover); flex-shrink: 0; box-shadow: inset 0 0 0 1px rgb(82 106 133 / 14%); }
.item .lead .icon { width: 19px; height: 19px; }
.item .lead.warm { background: var(--grad-tile-warm); color: var(--color-warm-text); box-shadow: inset 0 0 0 1px rgb(217 119 50 / 20%); }
.item .grow { flex: 1; min-width: 0; }
.item .grow > .title, .item .grow > .sub { display: block; }
.item .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.item .tags:empty { display: none; }
.item .accessory { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
.item .amount { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }

/* À faire (accueil) */
.todo-list .item .title { display: block; }
.todo-empty { display: flex; gap: var(--space-3); align-items: center; }

/* ---------- Progression ---------- */
.progress { height: 6px; background: var(--color-surface-subtle); border-radius: 99px; overflow: hidden; margin: var(--space-2) 0 var(--space-1); }
.progress > div { height: 100%; background: var(--grad-accent); border-radius: 99px; transition: width var(--transition); }
.steps-label { color: var(--color-text-secondary); margin: 0; }

/* ---------- Dépôt de fichiers ---------- */
.dropzone { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-1); border: 1.5px dashed var(--color-border-control); border-radius: var(--radius-card); padding: var(--space-5) var(--space-4); text-align: center; background: var(--color-surface); color: var(--color-text); cursor: pointer; font-weight: 600; margin: 0; transition: background var(--transition), border-color var(--transition); }
.dropzone .icon { width: 26px; height: 26px; color: var(--color-accent); box-sizing: content-box; padding: 10px; border-radius: 12px; background: var(--grad-tile); box-shadow: inset 0 0 0 1px rgb(82 106 133 / 14%); margin-bottom: var(--space-2); }
.dropzone .small { font-weight: 400; }
.dropzone:hover, .dropzone.drag { border-color: var(--color-accent); background: var(--color-row-hover); }
.dropzone:focus-within { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dropzone.main { padding: var(--space-6) var(--space-4); border-color: var(--color-accent); background: linear-gradient(180deg, #FFFFFF 0%, #F3F6FA 100%); }
.preview { max-width: 100%; border-radius: var(--radius-small); border: 1px solid var(--color-hairline); background: var(--color-surface); box-shadow: var(--shadow-card); }
.preview-frame { width: 100%; height: 520px; border: 1px solid var(--color-hairline); border-radius: var(--radius-small); background: var(--color-surface); }

/* ---------- Filtres : contrôle segmenté ---------- */
.tabs { display: flex; gap: 2px; overflow-x: auto; margin-bottom: var(--space-4); padding: 3px; background: var(--color-surface-subtle); border-radius: 12px; width: fit-content; max-width: 100%; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { padding: 0 14px; min-height: 40px; display: inline-flex; align-items: center; border-radius: 9px; color: var(--color-text-secondary); font-weight: 500; text-decoration: none; white-space: nowrap; transition: background var(--transition), color var(--transition); }
.tabs a:hover { color: var(--color-text); background: rgb(255 255 255 / 55%); }
.tabs a:focus-visible { outline-offset: -2px; }
.tabs a.active, .tabs a[aria-current] { background: var(--color-surface); color: var(--color-text); font-weight: 650; box-shadow: var(--shadow-hair), 0 0 0 1px var(--color-hairline); }

/* ---------- Commentaires ---------- */
.comment { border: 1px solid var(--color-hairline); background: var(--color-surface); padding: var(--space-3) var(--space-4); margin: var(--space-3) 0; border-radius: var(--radius-control); }
.comment.correction { border-color: rgb(128 84 8 / 35%); background: var(--color-warning-soft); box-shadow: inset 3px 0 0 var(--color-warning); }
.comment.correction.done { border-color: rgb(36 99 68 / 30%); background: var(--color-success-soft); box-shadow: inset 3px 0 0 var(--color-success); }
.comment .meta { color: var(--color-text-secondary); }
.comment p { margin: var(--space-1) 0; }

/* ---------- Notification ---------- */
#toast { position: fixed; left: 50%; transform: translate(-50%, 8px); bottom: calc(var(--bottomnav-h) + 88px); background: var(--color-text); color: var(--color-text-inverse); padding: var(--space-3) var(--space-4); border-radius: 12px; z-index: 50; opacity: 0; pointer-events: none; transition: opacity var(--transition), transform var(--transition); max-width: calc(100% - 32px); box-shadow: 0 12px 32px rgb(39 49 59 / 28%); font-weight: 500; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.error { background: var(--color-danger); }
@media (min-width: 56.25rem) { #toast { bottom: var(--space-6); } }

/* ---------- Détails repliables ---------- */
details.more { margin: var(--space-3) 0; }
details.more > summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; gap: var(--space-2); color: var(--color-accent); list-style: none; border-radius: var(--radius-control); }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before { content: ""; width: 18px; height: 18px; flex-shrink: 0; background: currentColor; -webkit-mask: var(--i-chevron) center / contain no-repeat; mask: var(--i-chevron) center / contain no-repeat; transition: transform var(--transition); }
details.more[open] > summary::before { transform: rotate(90deg); }
details.more > summary:hover { color: var(--color-accent-hover); }
details.panel { background: var(--color-surface); border: 1px solid var(--color-hairline); border-radius: var(--radius-card); margin: 0 0 var(--space-4); box-shadow: var(--shadow-hair); }
details.panel > summary { padding: var(--space-2) var(--space-4); color: var(--color-text); min-height: 56px; transition: background var(--transition); }
details.panel > summary::before { color: var(--color-chev); background: var(--color-chev); }
details.panel > summary:hover { background: var(--color-row-hover); color: var(--color-text); }
details.panel[open] > summary { border-bottom: 1px solid var(--color-hairline); border-radius: var(--radius-card) var(--radius-card) 0 0; margin-bottom: var(--space-3); }
details.panel > .panel-body { padding: 0 var(--space-4) var(--space-4); }
@media (min-width: 48rem) { details.panel > summary { padding: var(--space-2) var(--space-5); } details.panel > .panel-body { padding: 0 var(--space-5) var(--space-5); } }

.mail { border: 1px solid var(--color-hairline); border-radius: var(--radius-card); padding: var(--space-4); margin: var(--space-3) 0; background: var(--color-surface); box-shadow: var(--shadow-hair); }
.mail .subject { font-weight: 650; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-5); margin: 0; }
.kv dt { color: var(--color-text-secondary); }
.kv dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 32.5rem) { .kv { grid-template-columns: 1fr; gap: 0; } .kv dt { margin-top: var(--space-3); } }

/* ---------- Étapes (clôture) ---------- */
.timeline { list-style: none; padding: 0; margin: 0; counter-reset: s; }
.timeline > li { position: relative; padding: 0 0 var(--space-5) 50px; }
.timeline > li::after { content: ""; position: absolute; left: 16px; top: 38px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--color-hairline); }
.timeline > li:last-child::after { display: none; }
.timeline > li::before { counter-increment: s; content: counter(s); position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--color-surface); border: 1.5px solid var(--color-border-control); color: var(--color-text); display: flex; align-items: center; justify-content: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.timeline > li.done::before { content: ""; background: var(--color-success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 18px no-repeat; border-color: var(--color-success); }
.timeline > li.done::after { background: var(--color-success); opacity: .35; }
.timeline > li.current::before { background: var(--grad-accent); border-color: var(--color-accent-hover); color: var(--color-text-inverse); box-shadow: 0 0 0 4px var(--color-accent-soft); }

/* ---------- Saisie des lots (paramétrage) ---------- */
.lots-edit .c-num input { width: 72px; }
.lots-edit .c-floor input { width: 120px; }
.lots-edit .c-quota input { width: 120px; }
@media (max-width: 40rem) {
  .lots-edit thead { display: none; }
  .lots-edit tbody tr { display: grid; grid-template-columns: 72px 1fr 1fr 44px; grid-template-areas: "num desc desc del" "num floor quota del"; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--color-hairline); }
  .lots-edit tbody td { padding: 0; border: 0; }
  .lots-edit .c-num { grid-area: num; } .lots-edit .c-desc { grid-area: desc; } .lots-edit .c-floor { grid-area: floor; } .lots-edit .c-quota { grid-area: quota; } .lots-edit .c-del { grid-area: del; }
  .lots-edit .c-floor input, .lots-edit .c-quota input { width: 100%; }
  .lots-edit tfoot tr { display: flex; justify-content: space-between; }
  .lots-edit tfoot td:empty { display: none; }
}

/* ---------- Dialogue ---------- */
dialog.ask { border: 1px solid var(--color-hairline); border-radius: var(--radius-dialog); padding: var(--space-5); max-width: min(480px, calc(100% - 32px)); box-shadow: var(--shadow-float); color: var(--color-text); }
dialog.ask::backdrop { background: var(--color-overlay); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
dialog.ask p { margin-top: 0; font-weight: 500; }
dialog.ask .actions { flex-direction: row-reverse; justify-content: flex-start; }

.locked-banner { display: flex; gap: var(--space-3); align-items: center; background: var(--color-bg); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-control); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); font-weight: 500; }
.locked-banner .icon { color: var(--color-text-secondary); }

/* ---------- Validation d'une facture : résumé et pièce côte à côte ---------- */
.invoice { display: grid; gap: var(--space-4); align-items: start; }
@media (min-width: 68rem) {
  .invoice.has-piece { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); }
  .invoice .piece-col { position: sticky; top: calc(var(--topbar-h) + var(--space-4)); }
}
.invoice-main > * { margin-top: 0; margin-bottom: var(--space-4); }
.invoice-main > :last-child { margin-bottom: 0; }
/* Petit écran : la pièce suit directement le résumé */
@media (max-width: 67.99rem) {
  .invoice-main { display: contents; }
  .invoice-main > * { margin: 0; order: 2; }
  .invoice-main > .summary { order: 0; }
  .invoice .piece-col { order: 1; }
}
.summary { padding: 0; overflow: hidden; }
.summary .sum-head { display: flex; gap: var(--space-3); align-items: flex-start; justify-content: space-between; padding: var(--space-4) var(--space-4) 0; }
.summary .supplier { font-size: 1.1875rem; line-height: 1.75rem; font-weight: 650; margin: 0; }
.summary .amount { font-size: 2.25rem; line-height: 2.75rem; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; padding: var(--space-1) var(--space-4) var(--space-4); }
.summary .amount .cur { font-size: 1rem; letter-spacing: 0; margin-right: 8px; }
.summary .facts { list-style: none; margin: 0; padding: 0; }
.summary .facts li { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-hairline); }
.summary .facts .icon { color: var(--color-text-secondary); }
.summary .facts .k { color: var(--color-text-secondary); min-width: 7em; }
.summary .facts .v { font-weight: 600; flex: 1; min-width: 0; }
@media (min-width: 48rem) { .summary .sum-head, .summary .amount, .summary .facts li { padding-left: var(--space-5); padding-right: var(--space-5); } }
.piece-col { background: var(--color-bg); border: 1px solid var(--color-hairline); border-radius: var(--radius-card); padding: var(--space-4); text-align: center; }
.piece-col img { display: block; max-height: 280px; width: auto; margin: 0 auto var(--space-3); }
@media (min-width: 68rem) { .piece-col img { max-height: 460px; } }
.piece-col p { margin: var(--space-2) auto 0; }
.question { border: 1px solid rgb(128 84 8 / 40%); background: var(--color-warning-soft); border-radius: var(--radius-card); padding: var(--space-4) var(--space-4) var(--space-5); box-shadow: inset 3px 0 0 var(--color-warning); }
.question h2 { margin: 0 0 var(--space-1); font-size: 1.125rem; display: flex; gap: var(--space-2); align-items: center; }
.question h2 .icon { color: var(--color-warning); }
.question label { margin-top: var(--space-3); }
.question input, .question select { border-color: var(--color-warning); }
.my-share { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--color-accent-soft); border-top: 1px solid var(--color-hairline); font-weight: 650; }
@media (min-width: 48rem) { .my-share { padding-left: var(--space-5); padding-right: var(--space-5); } }

/* ---------- En-tête de page ---------- */
.hello { margin-bottom: var(--space-1); }
.hello + .muted { margin-top: 0; }
.page-sub { color: var(--color-text-secondary); margin: calc(-1 * var(--space-3)) 0 var(--space-5); }
.mylot .value { color: var(--color-text); }
.warm-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--color-warm); margin-right: var(--space-2); vertical-align: middle; }

/* ---------- Connexion ---------- */
body.auth-page { background: radial-gradient(110% 55% at 50% 0%, #D9E3EE 0%, rgb(247 249 251 / 0%) 70%), var(--color-bg); background-attachment: fixed; }
body.auth-page #topbar { background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.auth { max-width: 440px; margin: var(--space-6) auto; }
.auth > .card { padding: var(--space-5); border-radius: var(--radius-dialog); box-shadow: var(--shadow-card); }
.auth .logo-lg { width: 52px; height: 52px; border-radius: 14px; background: var(--grad-accent); color: var(--color-text-inverse); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-4); box-shadow: inset 0 1px 0 rgb(255 255 255 / 22%), 0 8px 20px rgb(67 90 115 / 30%); }
.auth .logo-lg .icon { width: 26px; height: 26px; }
.auth h1 { margin-bottom: var(--space-2); }
.auth > p:first-of-type { color: var(--color-text-secondary); }
.paste { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }