/* Asceli · socle Material 3 commun aux trois espaces du POC (technicien, bureau, client).
   Couleurs de la marque en schéma Material : primaire bleu électrique, tertiaire jaune signal, mode sombre bleu nuit. */
:root{
  --primary:#1B4DDB; --on-primary:#FFFFFF; --primary-container:#DCE1FF; --on-primary-container:#00174B;
  --secondary-container:#DEE1F7; --on-secondary-container:#171B2C;
  --tertiary-container:#FFE16D; --on-tertiary-container:#221B00;
  --error:#BA1A1A; --error-container:#FFDAD6; --on-error-container:#410002;
  --success:#1B6C4F; --success-container:#A6F2CB; --on-success-container:#002114;
  --warn-container:#FFE16D; --on-warn-container:#221B00;
  --surface:#FAF8FF; --surface-low:#F4F2FA; --surface-c:#EEEDF5; --surface-high:#E8E7EF; --surface-highest:#E2E1E9;
  --on-surface:#1A1B21; --on-surface-variant:#45464F; --outline:#767680; --outline-variant:#C6C5D0;
  --inverse-surface:#2F3036; --inverse-on-surface:#F1F0F7; --inverse-primary:#B5C4FF;
  --page:#E9ECF5; --scrim:rgba(0,0,0,.32);
  --f:"Roboto Flex",Roboto,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-brand:"Archivo","Arial Black",system-ui,sans-serif;
  --nuit:#0B1530; --nuit-deep:#050B1C; --signal:#FFD23F; --on-signal:#0B1530; --givre:#F3F6FC; --brume:#9FB0D0;
  --scale:1;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --primary:#B5C4FF; --on-primary:#002A78; --primary-container:#1B4DDB; --on-primary-container:#E6EAFF;
  --secondary-container:#262E4A; --on-secondary-container:#DEE1F7;
  --tertiary-container:#4F4400; --on-tertiary-container:#FFE16D;
  --error:#FFB4AB; --error-container:#93000A; --on-error-container:#FFDAD6;
  --success:#8BD6B0; --success-container:#005139; --on-success-container:#A6F2CB;
  --warn-container:#4F4400; --on-warn-container:#FFE16D;
  --surface:#0E1426; --surface-low:#131A2E; --surface-c:#182036; --surface-high:#1F2841; --surface-highest:#28314C;
  --on-surface:#E3E5F3; --on-surface-variant:#B9BED4; --outline:#8A90A8; --outline-variant:#3A4362;
  --inverse-surface:#E3E5F3; --inverse-on-surface:#1A1B21; --inverse-primary:#1B4DDB;
  --page:#070C1A; --scrim:rgba(0,0,0,.55); color-scheme:dark}}
:root[data-theme="dark"]{
  --primary:#B5C4FF; --on-primary:#002A78; --primary-container:#1B4DDB; --on-primary-container:#E6EAFF;
  --secondary-container:#262E4A; --on-secondary-container:#DEE1F7;
  --tertiary-container:#4F4400; --on-tertiary-container:#FFE16D;
  --error:#FFB4AB; --error-container:#93000A; --on-error-container:#FFDAD6;
  --success:#8BD6B0; --success-container:#005139; --on-success-container:#A6F2CB;
  --warn-container:#4F4400; --on-warn-container:#FFE16D;
  --surface:#0E1426; --surface-low:#131A2E; --surface-c:#182036; --surface-high:#1F2841; --surface-highest:#28314C;
  --on-surface:#E3E5F3; --on-surface-variant:#B9BED4; --outline:#8A90A8; --outline-variant:#3A4362;
  --inverse-surface:#E3E5F3; --inverse-on-surface:#1A1B21; --inverse-primary:#1B4DDB;
  --page:#070C1A; --scrim:rgba(0,0,0,.55); color-scheme:dark}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--page);color:var(--on-surface);font-family:var(--f);-webkit-font-smoothing:antialiased}
.ms{font-family:"Material Symbols Rounded";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;direction:ltr;-webkit-font-feature-settings:"liga";font-feature-settings:"liga";font-variation-settings:"FILL" 0,"wght" 500,"opsz" 24;flex:none}
.ms.fill{font-variation-settings:"FILL" 1,"wght" 500,"opsz" 24}

/* ---------- Appli ---------- */
.app{position:absolute;inset:0;background:var(--surface);display:flex;flex-direction:column;font-size:calc(16px * var(--scale));overflow:hidden}
.appbar{display:flex;align-items:center;gap:4px;min-height:64px;padding:8px 4px 8px 16px;padding-top:max(8px,env(safe-area-inset-top,0px));background:var(--surface);position:relative;z-index:2;transition:background .2s}
.appbar.scrolled{background:var(--surface-c)}
.appbar h1{flex:1;margin:0;font-size:1.375em;font-weight:500;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appbar .lead{margin-left:-8px}
.iconbtn{width:48px;height:48px;border-radius:50%;border:0;background:none;color:var(--on-surface-variant);display:grid;place-items:center;cursor:pointer;position:relative}
.iconbtn:hover{background:color-mix(in srgb,var(--on-surface) 8%,transparent)}
.brandmark{width:28px;height:28px;border-radius:8px;background:#1B4DDB;display:grid;place-items:center;margin-right:8px;flex:none}
.brandmark svg{width:18px;height:18px}
.scroll{flex:1;overflow-y:auto;overscroll-behavior:contain;padding-bottom:96px}
.banner{display:flex;gap:12px;align-items:center;padding:12px 16px;background:var(--warn-container);color:var(--on-warn-container);font-size:.875em;font-weight:500}

/* Sous-titre de journée */
.dayhead{padding:4px 16px 12px;display:grid;gap:12px}
.dayhead p{margin:0;color:var(--on-surface-variant);font-size:.875em}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.chip{height:32px;border-radius:8px;border:1px solid var(--outline-variant);background:transparent;color:var(--on-surface-variant);font:inherit;font-size:.875em;font-weight:500;padding:0 12px;display:inline-flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap}
.chip[aria-pressed="true"]{background:var(--secondary-container);color:var(--on-secondary-container);border-color:transparent}
.chip .ms{font-size:18px}
.chip .count{font-variant-numeric:tabular-nums;opacity:.8}

/* Listes Material */
.subhead{padding:16px 16px 8px;font-size:.875em;font-weight:600;color:var(--primary)}
.list{list-style:none;margin:0;padding:0}
.item{display:flex;gap:16px;align-items:flex-start;padding:12px 16px;min-height:72px;cursor:pointer;width:100%;border:0;background:none;color:inherit;font:inherit;text-align:left}
.item:hover{background:color-mix(in srgb,var(--on-surface) 6%,transparent)}
.item.fresh{animation:fresh 1.6s ease-out}
@keyframes fresh{from{background:var(--tertiary-container)}to{background:transparent}}
.avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none}
.avatar .ms{font-size:22px}
.a-err{background:var(--error-container);color:var(--on-error-container)}
.a-warn{background:var(--warn-container);color:var(--on-warn-container)}
.a-info{background:var(--primary-container);color:var(--on-primary-container)}
.a-ok{background:var(--success-container);color:var(--on-success-container)}
.item .txt{flex:1;min-width:0;display:grid;gap:2px}
.item .over{font-size:.75em;font-weight:600;letter-spacing:.02em;color:var(--on-surface-variant);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item .head{font-size:1em;font-weight:500;line-height:1.35}
.item .sup{font-size:.875em;color:var(--on-surface-variant);line-height:1.4}
.item .trail{font-size:.75em;color:var(--on-surface-variant);font-variant-numeric:tabular-nums;white-space:nowrap;padding-top:2px;text-align:right;display:grid;gap:4px;justify-items:end}
.item.is-done .head{color:var(--on-surface-variant)}
.urgent{color:var(--error);font-weight:600}
.divider{height:1px;background:var(--outline-variant);margin:0 16px}

/* Barre d'action fixe, FAB, navigation */
.bottomaction{position:absolute;left:0;right:0;bottom:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:var(--surface-c);display:grid;gap:6px;z-index:3}
.filled{height:56px;border-radius:28px;border:0;background:var(--primary);color:var(--on-primary);font:inherit;font-size:1em;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;width:100%}
.filled:disabled{background:color-mix(in srgb,var(--on-surface) 12%,transparent);color:color-mix(in srgb,var(--on-surface) 38%,transparent);cursor:not-allowed}
.hint{text-align:center;font-size:.8125em;color:var(--on-surface-variant)}
.fab{position:absolute;right:16px;bottom:96px;height:56px;border-radius:16px;border:0;padding:0 20px 0 16px;background:var(--primary-container);color:var(--on-primary-container);font:inherit;font-weight:600;font-size:.9375em;display:flex;align-items:center;gap:12px;box-shadow:0 4px 10px rgba(0,0,0,.18);cursor:pointer;z-index:3}
.navbar{position:absolute;left:0;right:0;bottom:0;height:calc(80px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:var(--surface-c);display:flex;z-index:3}
.navbar button{flex:1;border:0;background:none;color:var(--on-surface-variant);font:inherit;font-size:.75em;font-weight:600;display:grid;justify-items:center;align-content:center;gap:4px;cursor:pointer;position:relative}
.navbar .pillbg{width:64px;height:32px;border-radius:16px;display:grid;place-items:center}
.navbar button[aria-current="page"]{color:var(--on-surface)}
.navbar button[aria-current="page"] .pillbg{background:var(--secondary-container);color:var(--on-secondary-container)}
.navbar .dotbadge{position:absolute;top:10px;left:calc(50% + 8px);min-width:16px;height:16px;border-radius:8px;background:var(--error);color:var(--on-primary);font-size:10px;display:grid;place-items:center;padding:0 4px}
:root:not([data-theme="light"]) .navbar .dotbadge{color:#410002}

/* Snackbar, feuille du bas */
.snack{position:absolute;left:16px;right:16px;bottom:104px;z-index:6;background:var(--inverse-surface);color:var(--inverse-on-surface);border-radius:8px;min-height:48px;padding:6px 8px 6px 16px;display:flex;align-items:center;gap:8px;font-size:.875em;box-shadow:0 6px 16px rgba(0,0,0,.25);animation:up .25s ease-out}
.snack span{flex:1;line-height:1.35;padding:6px 0}
.snack button{border:0;background:none;color:var(--inverse-primary);font:inherit;font-weight:600;height:36px;padding:0 10px;border-radius:18px;cursor:pointer}
.snack.withbar{bottom:96px}
.snack.withfab{bottom:164px}
@keyframes up{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
.scrim{position:absolute;inset:0;background:var(--scrim);z-index:8;animation:fade .2s}
@keyframes fade{from{opacity:0}}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:9;background:var(--surface-low);border-radius:28px 28px 0 0;padding:8px 24px calc(24px + env(safe-area-inset-bottom,0px));display:grid;gap:16px;animation:up .25s ease-out}
.sheet .grab{width:32px;height:4px;border-radius:2px;background:var(--outline);justify-self:center;margin:8px 0}
.sheet h3{margin:0;font-size:1.375em;font-weight:500}
.sheet p{margin:0;color:var(--on-surface-variant);font-size:.9375em;line-height:1.5}
.bigcode{font-size:2.5em;font-weight:600;letter-spacing:.3em;text-align:center;padding:12px;border-radius:16px;background:var(--surface-high);font-variant-numeric:tabular-nums}
.sig{width:100%;height:160px;border-radius:12px;background:var(--surface-c);border:1px solid var(--outline-variant);touch-action:none;display:block}
.done{display:grid;justify-items:center;text-align:center;gap:16px;padding:48px 24px}
.done .big{width:96px;height:96px;border-radius:50%;background:var(--success-container);color:var(--on-success-container);display:grid;place-items:center}
.done .big .ms{font-size:56px}
.done h2{margin:0;font-size:1.5em;font-weight:500}
.done p{margin:0;color:var(--on-surface-variant);line-height:1.5}
.empty{padding:48px 24px;text-align:center;color:var(--on-surface-variant);display:grid;gap:8px;justify-items:center}
.radio{display:flex;gap:8px;flex-wrap:wrap;padding:4px 16px 8px}


/* Marque : en-tête nuit, mot-symbole, bandeau d'accueil */
.appbar.brand{background:var(--nuit);color:var(--givre)}
.appbar.brand .iconbtn{color:var(--brume)}
.wordmark{flex:1;font-family:var(--f-brand);font-weight:900;font-stretch:125%;font-size:1.5em;letter-spacing:-.02em;color:var(--givre)}
.band{background:var(--nuit);color:var(--givre);padding:4px 16px 20px;display:grid;gap:14px;border-radius:0 0 28px 28px}
.band .hi{font-family:var(--f-brand);font-weight:800;font-stretch:125%;font-size:1.75em;line-height:1.05;margin:0}
.band .sub{margin:0;color:var(--brume);font-size:.9375em}
.synced{display:inline-flex;align-items:center;gap:6px;font-size:.8125em;color:var(--brume)}
.synced .ms{font-size:18px;color:#3EE0C8}

:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
