/* ════════════════════════════════════════════════════════════════
   MES FRAIS — Charte « Mes Droits V2 » (Liquid Glass · dark mode)
   ÉTAPE 1/7 : tokens + fond + matériau glass + app-shell + topbar + dark.
   Les composants d'écran (cartes, tableaux, KPI, filtres…) sont conservés
   en l'état via le BRIDGE LEGACY plus bas ; ils seront migrés écran par
   écran aux étapes suivantes.
   ════════════════════════════════════════════════════════════════ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

/* ─── Design tokens — thème clair ───────────────────────────────── */
:root{
  /* Palette Charte graphique 2026 (bleu profond + magenta SNE-CGC) */
  --blue:#123C7C; --blue-lt:#2F6BFF; --blue-dk:#0B2A5B;
  --rose:#EB668B; --rose-lt:#F194AE; --rose-dk:#C95777;
  --ink:#0e1c33; --muted:#4d6076; --muted2:#6d8098;
  --line:rgba(18,60,124,.12);
  --r-lg:28px; --r-md:22px; --r-sm:16px;
  --fs-xs:.72rem; --fs-sm:.82rem; --fs-base:.9rem; --fs-md:1rem; --fs-lg:1.4rem; --fs-xl:2.4rem;
  --ease:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --glass-hi:rgba(255,255,255,.44);
  --glass-lo:rgba(214,228,244,.22);
  --glass-edge:rgba(255,255,255,.95);
  --glass-inner:rgba(255,255,255,1);
  --bub-bot-hi:rgba(255,255,255,.78);
  --bub-bot-lo:rgba(246,249,252,.52);
  --chip-bg:rgba(255,255,255,.55);
  --field-bg:rgba(255,255,255,.38);
  --field-focus:rgba(255,255,255,.9);
  --scene-a:#f2f6fc; --scene-b:#e8eef7; --scene-c:#dce6f2;
  --shadow-ink:7,26,58;
  --code-bg:rgba(18,60,124,.08);
  --hover-wash:rgba(18,60,124,.06);

  /* ── BRIDGE LEGACY : anciens tokens Mes Frais mappés sur la charte ── */
  --bg:var(--scene-b); --card:var(--glass-hi);
  --brand:var(--blue); --brand-d:var(--blue-dk);
  --radius:var(--r-md);
  --shadow:0 2px 6px rgba(var(--shadow-ink),.05),0 18px 40px -12px rgba(var(--shadow-ink),.18);
  --ok-bg:rgba(28,107,55,.12); --ok-ink:#1c6b37;
  --err-bg:rgba(201,87,119,.12); --err-ink:var(--rose-dk);
}
/* ─── Design tokens — thème sombre ──────────────────────────────── */
[data-theme="dark"]{
  --blue:#7fa3e6; --blue-lt:#9db9f0; --blue-dk:#d6e2f8;
  --rose:#f194ae; --rose-lt:#f5b0c3; --rose-dk:#c6798f;
  --ink:#e6edf6; --muted:#9fb2c7; --muted2:#74879d;
  --line:rgba(157,184,218,.20);
  --glass-hi:rgba(46,64,90,.55);
  --glass-lo:rgba(24,36,54,.45);
  --glass-edge:rgba(157,184,218,.35);
  --glass-inner:rgba(190,212,238,.25);
  --bub-bot-hi:rgba(46,64,90,.6);
  --bub-bot-lo:rgba(30,44,64,.45);
  --chip-bg:rgba(56,78,110,.62);
  --field-bg:rgba(28,42,62,.6);
  --field-focus:rgba(34,50,72,.92);
  --scene-a:#101b2c; --scene-b:#0d1626; --scene-c:#0a111e;
  --shadow-ink:0,0,0;
  --code-bg:rgba(157,184,218,.14);
  --hover-wash:rgba(157,184,218,.08);
  --ok-bg:rgba(125,196,150,.16); --ok-ink:#9fe0b4;
  --err-bg:rgba(240,109,133,.18); --err-ink:#f5a0af;
}

html,body{ height:100dvh; font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--ink); background:var(--scene-b); overflow:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; -webkit-text-size-adjust:100%;
  transition:background .3s, color .3s; }
a{ color:var(--blue); }

/* ─── Scène atmosphérique (couches fixes z0) ────────────────────── */
.bg-base{ position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1300px 760px at 14% -10%, rgba(18,60,124,.16), transparent 58%),
    radial-gradient(1200px 720px at 88% -8%, rgba(235,102,139,.10), transparent 58%),
    radial-gradient(900px 700px at 50% 120%, rgba(47,107,255,.12), transparent 60%),
    linear-gradient(180deg,var(--scene-a) 0%, var(--scene-b) 48%, var(--scene-c) 100%);
  transition:background .6s; }
[data-theme="dark"] .bg-base{ background:
    radial-gradient(1300px 760px at 14% -10%, rgba(96,134,182,.20), transparent 58%),
    radial-gradient(1200px 720px at 88% -8%, rgba(235,102,139,.09), transparent 58%),
    radial-gradient(900px 700px at 50% 120%, rgba(47,107,255,.16), transparent 60%),
    linear-gradient(180deg,var(--scene-a) 0%, var(--scene-b) 48%, var(--scene-c) 100%); }
.aurora{ position:fixed; inset:-15%; z-index:0; pointer-events:none; filter:blur(80px); opacity:.7;
  background:conic-gradient(from 200deg at 32% 22%, rgba(18,60,124,.22), transparent 26%,
    rgba(235,102,139,.11) 52%, transparent 76%, rgba(47,107,255,.18));
  animation:drift 32s ease-in-out infinite alternate; }
[data-theme="dark"] .aurora{ opacity:.5; }
@keyframes drift{ 0%{transform:translate3d(-2%,-1%,0) rotate(0) scale(1.06);}
  100%{transform:translate3d(2%,1%,0) rotate(7deg) scale(1.16);} }
.halo{ position:fixed; border-radius:50%; filter:blur(110px) saturate(1.25); z-index:0; pointer-events:none; }
.halo.b{ width:820px; height:820px; left:-4%; top:-26%;
  background:radial-gradient(circle, rgba(18,60,124,.46), rgba(18,60,124,.13) 46%, transparent 66%);
  animation:breathe 12s ease-in-out infinite; }
.halo.r{ width:760px; height:760px; right:-3%; top:-18%;
  background:radial-gradient(circle, rgba(235,102,139,.26), rgba(235,102,139,.07) 46%, transparent 66%);
  animation:breathe 14s ease-in-out infinite reverse; }
[data-theme="dark"] .halo.b{ background:radial-gradient(circle, rgba(96,134,182,.30), rgba(96,134,182,.08) 46%, transparent 66%); }
[data-theme="dark"] .halo.r{ background:radial-gradient(circle, rgba(235,102,139,.15), rgba(235,102,139,.04) 46%, transparent 66%); }
@keyframes breathe{ 0%,100%{opacity:.5; transform:scale(1);} 50%{opacity:.92; transform:translateY(-16px) scale(1.12);} }
.grain{ position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.28; mix-blend-mode:overlay;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/></svg>");
  background-size:160px; }

/* ─── Matériau LIQUID GLASS ─────────────────────────────────────── */
.lg{ position:relative; isolation:isolate;
  background:linear-gradient(135deg, var(--glass-hi), var(--glass-lo) 58%);
  backdrop-filter:blur(34px) saturate(2.2) brightness(1.08);
  -webkit-backdrop-filter:blur(34px) saturate(2.2) brightness(1.08);
  box-shadow:
    0 2px 6px rgba(var(--shadow-ink),.05),
    0 18px 40px -12px rgba(var(--shadow-ink),.20),
    0 48px 90px -28px rgba(var(--shadow-ink),.32),
    inset 0 1.5px 1px var(--glass-inner),
    inset 0 0 0 1px var(--glass-edge),
    inset 0 -30px 56px rgba(18,60,124,.07); }
.lg::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
  background:linear-gradient(125deg, var(--glass-edge), transparent 18%, transparent 82%, var(--glass-edge));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; padding:1.5px; opacity:.9; }
.lg-track::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
  opacity:var(--lg-on,0); transition:opacity .4s;
  background:radial-gradient(380px 260px at var(--mx,50%) var(--my,0%), rgba(255,255,255,.28), transparent 65%); }
[data-theme="dark"] .lg-track::before{
  background:radial-gradient(380px 260px at var(--mx,50%) var(--my,0%), rgba(157,184,218,.16), transparent 65%); }
/* Fallback si backdrop-filter non supporté : panneau opaque lisible */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .lg{ background:var(--field-focus); }
}

/* ─── App shell (sans scroll de page) ───────────────────────────── */
.app{ position:relative; z-index:1; height:100dvh; display:flex; flex-direction:column;
  max-width:1060px; margin:0 auto; gap:12px;
  padding:16px 20px calc(10px + env(safe-area-inset-bottom)); }

/* ─── Header glass (pilule) ─────────────────────────────────────── */
.topbar{ flex:0 0 auto; display:flex; align-items:center; gap:12px;
  padding:10px 14px; border-radius:60px; animation:rise .8s var(--ease) both; }
.topbar .brand{ display:flex; align-items:center; gap:11px; text-decoration:none; flex-shrink:0; }
.topbar .brand img{ width:44px; height:40px; object-fit:contain;
  filter:drop-shadow(0 2px 6px rgba(var(--shadow-ink),.25));
  transition:filter .3s var(--ease); }
[data-theme="dark"] .topbar .brand img{
  filter:brightness(0) invert(1) drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.topbar .brand .tt{ display:flex; flex-direction:column; line-height:1.05; min-width:0; }
.topbar .brand .tt b{ font-size:1.02rem; font-weight:900; letter-spacing:-.02em; color:var(--blue-dk); white-space:nowrap; }
.topbar .brand .tt b .accent{ color:var(--rose-dk); }
.topbar .brand .tt > span{ font-size:.62rem; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:var(--muted2); }
.topbar .spacer{ flex:1; }
.topbar .who{ font-size:var(--fs-xs); font-weight:600; color:var(--muted); white-space:nowrap;
  max-width:150px; overflow:hidden; text-overflow:ellipsis; }

/* ─── Boutons pilule glass ──────────────────────────────────────── */
.tb-btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:40px; min-width:40px; padding:0 14px; border-radius:40px; cursor:pointer;
  font-family:inherit; font-size:var(--fs-xs); font-weight:800; letter-spacing:.04em;
  color:var(--blue-dk); text-decoration:none; border:1px solid var(--glass-edge);
  background:linear-gradient(135deg, var(--chip-bg), transparent);
  backdrop-filter:blur(18px) saturate(1.6); -webkit-backdrop-filter:blur(18px) saturate(1.6);
  box-shadow:inset 0 1px 1px var(--glass-inner), 0 4px 12px -6px rgba(var(--shadow-ink),.3);
  transition:transform .25s var(--spring), box-shadow .25s, background .25s; }
.tb-btn:hover{ transform:translateY(-2px);
  box-shadow:inset 0 1px 1px var(--glass-inner), 0 10px 22px -8px rgba(var(--shadow-ink),.4); }
.tb-btn:active{ transform:translateY(0) scale(.97); }
.tb-btn:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
.tb-btn svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.tb-btn.primary{ color:#fff; border-color:rgba(255,255,255,.45); position:relative; overflow:hidden;
  background:linear-gradient(-75deg, rgba(255,255,255,.06), rgba(255,255,255,.18), rgba(255,255,255,.06)),
    linear-gradient(135deg, var(--rose) 0%, var(--rose-dk) 100%);
  box-shadow:0 6px 18px -6px rgba(201,87,119,.5), inset 0 1px 1px rgba(255,255,255,.6),
    inset 0 -8px 18px rgba(120,0,66,.28); }
/* (Reflet du bouton principal : géré par le bloc VERRE 2026 MAX en fin de fichier) */
.tb-btn.primary:hover{ box-shadow:0 12px 26px -6px rgba(201,87,119,.6), inset 0 1px 1px rgba(255,255,255,.7); }
.tb-btn[hidden]{ display:none; }
/* le bouton de déconnexion est un <button> dans un <form> : neutraliser le form */
.topbar .logout{ margin:0; display:inline-flex; }

/* ─── Barre de navigation (pilules glass) ───────────────────────── */
.mainnav{ flex:0 0 auto; display:flex; gap:8px; flex-wrap:wrap; padding:0; }
/* Sous 900px : une seule rangée, défilement horizontal discret */
@media(max-width:899px){
  .mainnav{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; padding-bottom:2px; }
  .mainnav::-webkit-scrollbar{ display:none; }
  .mainnav a{ flex:0 0 auto; white-space:nowrap; }
}
.mainnav a{ display:inline-flex; align-items:center; height:38px; padding:0 16px; border-radius:30px;
  text-decoration:none; font-size:var(--fs-xs); font-weight:700; letter-spacing:.03em;
  color:var(--blue); background:var(--chip-bg); border:1px solid var(--line);
  box-shadow:inset 0 1px 1px var(--glass-inner);
  backdrop-filter:blur(14px) saturate(1.5); -webkit-backdrop-filter:blur(14px) saturate(1.5);
  transition:transform .25s var(--spring), color .2s, background .2s, box-shadow .25s; }
.mainnav a:hover{ transform:translateY(-2px); color:var(--blue-dk);
  box-shadow:0 8px 18px -8px rgba(var(--shadow-ink),.35), inset 0 1px 1px var(--glass-inner); }
.mainnav a.active{ color:#fff; border-color:transparent;
  background:linear-gradient(135deg,var(--blue),var(--blue-lt)); }
.mainnav a:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }

/* ─── Zone centrale (seul élément qui défile en interne) ────────── */
.container{ flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden;
  display:flex; flex-direction:column; gap:12px;
  padding:2px; max-width:none; margin:0; animation:rise .55s var(--ease) both; }
.container::-webkit-scrollbar{ width:6px; }
.container::-webkit-scrollbar-track{ background:transparent; }
.container::-webkit-scrollbar-thumb{ background:rgba(128,148,168,.3); border-radius:10px; }

/* ─── Messages flash (succès / erreur) ──────────────────────────── */
.alert{ flex:0 0 auto; padding:.7rem .95rem; border-radius:var(--r-sm); font-size:var(--fs-sm); font-weight:600;
  border:1px solid var(--line); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.alert-error{ background:var(--err-bg); color:var(--err-ink); border-color:rgba(201,87,119,.3); }
.alert-ok{ background:var(--ok-bg); color:var(--ok-ink); border-color:rgba(28,107,55,.3); }
.alert-info{ background:rgba(47,107,255,.10); color:var(--blue); border-color:rgba(47,107,255,.25); }
[data-theme="dark"] .alert-info{ background:rgba(127,163,230,.14); color:var(--blue-lt); border-color:rgba(127,163,230,.3); }

/* ─── Pied ──────────────────────────────────────────────────────── */
.foot{ flex:0 0 auto; text-align:center; color:var(--muted2); font-size:var(--fs-xs);
  padding:10px 0 4px; margin-top:auto; }

@keyframes rise{ from{opacity:0;transform:translateY(24px);} to{opacity:1;transform:translateY(0);} }

/* ════════════════════════════════════════════════════════════════
   COMPOSANTS D'ÉCRAN (hérités — migration progressive étapes 2→6)
   Reposent sur le bridge legacy ci-dessus pour rester lisibles en
   clair ET sombre. Le détail visuel sera repris écran par écran.
   ════════════════════════════════════════════════════════════════ */
.card{ background:linear-gradient(135deg,var(--glass-hi),var(--glass-lo) 58%);
  backdrop-filter:blur(30px) saturate(1.7); -webkit-backdrop-filter:blur(30px) saturate(1.7);
  border:1px solid var(--glass-edge); border-radius:var(--r-md);
  box-shadow:0 2px 6px rgba(var(--shadow-ink),.05),0 18px 40px -14px rgba(var(--shadow-ink),.18),inset 0 1px 1px var(--glass-inner);
  padding:1.25rem; margin-bottom:0; }
.auth-card{ max-width:420px; margin:0 auto; width:100%; }
h1{ font-size:1.35rem; font-weight:900; letter-spacing:-.02em; color:var(--blue-dk); margin:.2rem 0 .6rem; }
h2{ font-size:1.1rem; font-weight:800; color:var(--blue-dk); margin:.2rem 0 .6rem; }
.muted{ color:var(--muted); }
small.muted,.muted{ font-weight:400; }

label{ display:block; font-size:.9rem; font-weight:600; margin:.9rem 0 .3rem; }
input[type=email],input[type=password],input[type=text],
input[type=date],input[type=number],select,textarea{
  width:100%; padding:.7rem .8rem; border:1px solid var(--line); border-radius:var(--r-sm);
  font:inherit; font-size:1rem; color:var(--ink); background:var(--field-bg); }
textarea{ resize:vertical; }
input:focus,select:focus,textarea:focus{ outline:2px solid var(--blue); outline-offset:1px;
  border-color:var(--blue); background:var(--field-focus); }
input[type=file]{ width:100%; font-size:.9rem; margin-top:.2rem; background:transparent; border:0; padding:.2rem 0; }

.btn{ display:inline-block; width:auto; background:var(--chip-bg); color:var(--ink); border:1px solid var(--line);
  padding:.6rem 1.15rem; border-radius:999px; font-weight:700; cursor:pointer; margin:.3rem .3rem .3rem 0;
  transition:transform .2s var(--spring), background .2s; }
/* (hover .btn : géré par le bloc VERRE 2026 MAX) */
.btn-primary{ background:linear-gradient(135deg,var(--blue),var(--blue-lt)); color:#fff; border-color:transparent; }
.btn-primary:hover{ background:linear-gradient(135deg,var(--blue-lt),var(--blue)); }
.btn-danger{ background:var(--err-bg); color:var(--err-ink); border-color:rgba(201,87,119,.35); }
.btn-danger:hover{ background:rgba(201,87,119,.2); }
.btn-link{ background:none; border:1px solid var(--line); color:var(--blue-dk); border-radius:30px;
  padding:.45rem .9rem; font-size:.82rem; font-weight:700; cursor:pointer; }
.btn-link:hover{ background:var(--hover-wash); }
.btn-inline{ width:auto; margin-top:0; padding:.55rem .9rem; text-decoration:none; display:inline-block; }
.links{ margin-top:1rem; font-size:.9rem; }
.row-between{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }

.check{ display:flex; align-items:flex-start; gap:.55rem; font-weight:400; font-size:.92rem; margin-top:1rem; }
.check input{ margin-top:.2rem; width:auto; }
.rgpd-box{ border:1px solid var(--line); border-radius:var(--r-sm); padding:.6rem .8rem; margin-top:1rem; background:var(--hover-wash); }
.rgpd-box summary{ cursor:pointer; font-weight:600; }
.rgpd-text{ font-size:.82rem; color:var(--muted); margin:.6rem 0 0; max-height:9rem; overflow:auto; }

.tiles{ display:grid; grid-template-columns:1fr; gap:.7rem; margin-top:1rem; }
@media(min-width:520px){ .tiles{ grid-template-columns:1fr 1fr; } }
.tile{ display:block; padding:1rem; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--chip-bg); font-weight:700; text-decoration:none; color:var(--ink); }
a.tile:hover{ background:var(--field-focus); }
.tile.disabled{ opacity:.55; }
.tile small{ display:block; font-weight:400; color:var(--muted); }
.tile-form{ margin:0; padding:0; }
.tile-btn{ width:100%; text-align:left; cursor:pointer; font:inherit; font-weight:700; border:1px solid var(--line); background:var(--chip-bg); }

.table-wrap{ overflow-x:auto; }
table{ width:100%; border-collapse:collapse; font-size:.88rem; }
th,td{ padding:.5rem .55rem; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; }
th{ color:var(--muted); font-weight:700; }
td.num,th.num{ text-align:right; }
.actions{ display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.actions form{ margin:0; }
.btn-link-inline{ background:none; border:none; color:var(--blue); cursor:pointer; padding:0; font-size:.88rem; }
.btn-link-inline:hover{ text-decoration:underline; }

.badge{ display:inline-flex; align-items:center; gap:6px; padding:.15rem .55rem; border-radius:999px;
  font-size:.78rem; font-weight:700;
  background:var(--chip-bg); color:var(--ink); border:1px solid var(--line); }
/* Point coloré : état lisible d'un coup d'œil (charte §15) */
.badge::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor;
  flex:0 0 auto; opacity:.85; }
.st-brouillon{ background:rgba(94,114,134,.16); color:var(--muted); border-color:transparent; }
.st-soumise{ background:rgba(18,60,124,.15); color:var(--blue); border-color:transparent; }
.st-a_corriger{ background:rgba(235,102,139,.12); color:var(--rose-dk); border-color:transparent; }
.st-validee{ background:rgba(28,107,55,.16); color:#1c6b37; border-color:transparent; }
.st-refusee{ background:rgba(201,87,119,.18); color:var(--rose-dk); border-color:transparent; }
.st-mise_en_paiement{ background:rgba(47,107,255,.18); color:var(--blue-lt); border-color:transparent; }
.st-payee{ background:rgba(18,90,44,.18); color:#125a2c; border-color:transparent; }
[data-theme="dark"] .st-validee{ color:#9fe0b4; }
[data-theme="dark"] .st-payee{ color:#9fe0b4; }

.line-grid{ display:grid; grid-template-columns:1fr; gap:.6rem; margin:.4rem 0; }
@media(min-width:560px){ .line-grid{ grid-template-columns:repeat(4,1fr); } .line-grid .f-wide{ grid-column:span 3; } }
.cat-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; margin:.4rem 0; }
@media(min-width:560px){ .cat-grid{ grid-template-columns:repeat(4,1fr); } }
.f{ display:flex; flex-direction:column; font-size:.82rem; font-weight:600; gap:.25rem; margin:0; }
.f input,.f select{ font-weight:400; }
/* ===== Bloc Kilométrage — liquid glass premium ===== */
fieldset.km{
  position:relative; isolation:isolate; overflow:hidden;
  border:1px solid var(--glass-edge); border-radius:var(--r-md);
  padding:1.05rem 1rem .95rem; margin:.9rem 0;
  background:linear-gradient(135deg,var(--glass-hi),var(--glass-lo) 60%);
  backdrop-filter:blur(30px) saturate(1.7); -webkit-backdrop-filter:blur(30px) saturate(1.7);
  box-shadow:0 2px 6px rgba(var(--shadow-ink),.05),0 18px 44px -16px rgba(var(--shadow-ink),.22),inset 0 1px 1px var(--glass-inner);
}
fieldset.km::before{ content:""; position:absolute; inset:0 0 auto 0; height:44%; z-index:-1;
  background:linear-gradient(180deg,rgba(255,255,255,.5),transparent); opacity:.6; pointer-events:none; }
fieldset.km::after{ content:""; position:absolute; right:-44px; top:-54px; width:170px; height:170px; z-index:-1;
  background:radial-gradient(circle,rgba(47,107,255,.32),transparent 70%); filter:blur(22px); pointer-events:none; }
fieldset.km legend{
  font-size:.76rem; font-weight:700; letter-spacing:.02em; color:var(--brand); padding:.28rem .75rem;
  background:var(--chip-bg); border:1px solid var(--glass-edge); border-radius:999px;
  box-shadow:inset 0 1px 1px var(--glass-inner),0 6px 14px -8px rgba(var(--shadow-ink),.4);
  backdrop-filter:blur(14px) saturate(1.5); -webkit-backdrop-filter:blur(14px) saturate(1.5); }
/* Icônes SVG inline (remplacent les emojis) */
.ic{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; vertical-align:-2px; margin-right:5px; flex-shrink:0; }
fieldset.km legend .ic{ margin-right:4px; }
/* Champs verre */
fieldset.km input[type=text],fieldset.km input[type=number],fieldset.km select{
  background:var(--field-bg); border:1px solid var(--glass-edge); border-radius:14px;
  box-shadow:inset 0 1px 1px var(--glass-inner);
  backdrop-filter:blur(10px) saturate(1.4); -webkit-backdrop-filter:blur(10px) saturate(1.4);
  transition:background .25s,border-color .25s,box-shadow .25s var(--ease),transform .25s var(--spring); }
fieldset.km input:focus,fieldset.km select:focus{
  outline:none; background:var(--field-focus); border-color:var(--blue); transform:translateY(-1px);
  box-shadow:inset 0 1px 1px var(--glass-inner),0 0 0 4px rgba(18,60,124,.18),0 10px 22px -10px rgba(var(--shadow-ink),.35); }
/* Itinéraire : départ bleu, arrivée rose */
fieldset.km input[name="mil_dep"]{ border-left:3px solid var(--blue); }
fieldset.km input[name="mil_arr"]{ border-left:3px solid var(--rose); }
.small{ font-size:.8rem; }
details.line-edit{ border:1px solid var(--line); border-radius:var(--r-sm); padding:.5rem .8rem; margin:.5rem 0; background:var(--hover-wash); }
details.line-edit summary{ cursor:pointer; font-weight:600; }
details.line-edit form{ margin:.5rem 0; }

.timeline{ list-style:none; padding:0; margin:0; }
.timeline li{ padding:.5rem 0; border-bottom:1px dashed var(--line); }
.timeline .ts{ color:var(--muted); font-size:.78rem; margin-right:.5rem; }

.notif-list{ list-style:none; padding:0; margin:0; }
.notif-list li{ display:flex; justify-content:space-between; gap:1rem; align-items:center; padding:.6rem 0; border-bottom:1px solid var(--line); }
.notif-list li.unread{ font-weight:600; }
.notif-list .ts{ color:var(--muted); font-size:.78rem; margin-right:.4rem; font-weight:400; }

.attach-list{ list-style:none; padding:0; margin:0; }
.attach-list li{ display:flex; align-items:center; gap:.6rem; padding:.4rem 0; border-bottom:1px solid var(--line); }
.attach-list form{ margin:0; }

/* ===== Boîte calcul Maps — verre premium + bouton à balayage de lumière ===== */
.maps-box{ position:relative; overflow:hidden; border:1px solid var(--glass-edge); border-radius:var(--r-sm);
  padding:.8rem .9rem; margin:.6rem 0;
  background:linear-gradient(135deg,var(--glass-hi),var(--glass-lo));
  backdrop-filter:blur(20px) saturate(1.6); -webkit-backdrop-filter:blur(20px) saturate(1.6);
  box-shadow:inset 0 1px 1px var(--glass-inner),0 10px 24px -16px rgba(var(--shadow-ink),.3); }
.maps-box .js-calc-distance{ position:relative; overflow:hidden; margin-top:.1rem;
  background:linear-gradient(135deg,var(--blue),var(--blue-lt)); color:#fff; border:1px solid transparent;
  border-radius:999px; padding:.62rem 1.15rem; font-weight:600;
  box-shadow:0 8px 20px -8px rgba(18,60,124,.55),inset 0 1px 1px rgba(255,255,255,.5);
  transition:transform .25s var(--spring),box-shadow .25s; }
.maps-box .js-calc-distance::after{ content:""; position:absolute; top:0; left:-60%; width:45%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-18deg); }
.maps-box .js-calc-distance:hover{ transform:translateY(-2px);
  box-shadow:0 14px 30px -8px rgba(18,60,124,.6),inset 0 1px 1px rgba(255,255,255,.6); }
.maps-box .js-calc-distance:hover::after{ animation:km-sheen 1.1s var(--ease); }
@keyframes km-sheen{ from{left:-60%} to{left:130%} }
.js-distance-hint{ display:inline-block; margin-left:.55rem; vertical-align:middle; }

/* ===== Rail d'itinéraire (étapes intermédiaires) ===== */
.mil-steps{ position:relative; display:flex; flex-direction:column; gap:.5rem; padding-left:1.05rem; }
.mil-steps > .muted{ padding-left:.05rem; }
.mil-steps::before{ content:""; position:absolute; left:.34rem; top:1.5rem; bottom:.5rem; width:2px; border-radius:2px;
  background:repeating-linear-gradient(var(--blue-lt),var(--blue-lt) 4px,transparent 4px,transparent 9px); opacity:.55; }
.mil-step{ position:relative; display:flex; gap:.5rem; align-items:center; }
.mil-step::before{ content:""; position:absolute; left:-.74rem; top:50%; transform:translateY(-50%);
  width:9px; height:9px; border-radius:50%; background:var(--field-focus); border:2px solid var(--blue-lt);
  box-shadow:0 0 8px rgba(47,107,255,.55); }
.mil-step input{ flex:1 1 auto; }
.mil-step .js-step-del{ flex:0 0 auto; padding:.38rem .6rem; line-height:1; border-radius:10px; }

@media (prefers-reduced-motion:reduce){
  .maps-box .js-calc-distance:hover::after{ animation:none; }
  fieldset.km input:focus,fieldset.km select:focus{ transform:none; }
}

.kpi-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; margin-top:.6rem; }
@media(min-width:520px){ .kpi-grid{ grid-template-columns:repeat(3,1fr); } }
.kpi{ display:flex; flex-direction:column; gap:.2rem; padding:.7rem .8rem; border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--chip-bg); text-decoration:none; color:var(--ink); }
a.kpi:hover{ background:var(--field-focus); }
.kpi-num{ font-size:1.35rem; font-weight:800; line-height:1.1; color:var(--blue-dk); }
.kpi-lbl{ font-size:.78rem; color:var(--muted); }
.kpi-amount{ background:rgba(18,60,124,.08); }

.barchart{ display:flex; align-items:flex-end; gap:.3rem; height:160px; margin-top:.8rem; padding-top:.4rem; }
.bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:.3rem; height:100%;
  position:relative; }
/* Mini-bulle au survol (remplace le title natif) */
.bar-col:hover::after{ content:attr(data-tip); position:absolute; bottom:calc(100% - 4px); left:50%;
  transform:translateX(-50%); white-space:nowrap; z-index:5; pointer-events:none;
  background:rgba(11,42,91,.94); color:#fff; font-size:.72rem; font-weight:600;
  padding:.28rem .55rem; border-radius:8px; box-shadow:0 8px 18px -8px rgba(7,26,58,.5); }
.bar-track{ flex:1; width:100%; display:flex; align-items:flex-end; background:var(--hover-wash); border-radius:6px 6px 0 0; overflow:hidden; }
.bar-fill{ width:100%; background:linear-gradient(180deg,var(--blue-lt),var(--blue)); border-radius:6px 6px 0 0; min-height:2px; transition:height .2s; }
.bar-lbl{ font-size:.72rem; color:var(--muted); }

.filters{ margin-top:.9rem; border-top:1px solid var(--line); padding-top:.8rem; }
.filter-statuses{ border:1px solid var(--line); border-radius:var(--r-sm); padding:.5rem .7rem; margin:0 0 .7rem; display:flex; flex-wrap:wrap; gap:.4rem .9rem; }
.filter-statuses legend{ padding:0 .3rem; }
.chk{ display:inline-flex; align-items:center; gap:.35rem; font-weight:400; font-size:.85rem; margin:0; }
.chk input{ width:auto; margin:0; }
.filter-row{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
@media(min-width:560px){ .filter-row{ grid-template-columns:repeat(3,1fr); } }
.filter-row label{ margin:0; font-weight:600; }
.filter-actions{ margin-top:.7rem; display:flex; gap:.5rem; flex-wrap:wrap; }
.inline-form{ display:flex; align-items:flex-end; gap:.5rem; margin:0; }
.inline-form label{ margin:0; }
.inline-form select{ width:auto; }

.activity{ list-style:none; padding:0; margin:.4rem 0 0; }
.activity li{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; padding:.5rem 0; border-bottom:1px solid var(--line); }

/* ─── Kilométrage : autocomplétion Google + carte ───────────────── */
gmp-place-autocomplete{ display:block; width:100%; min-width:0; max-width:100%; box-sizing:border-box; }
@media(min-width:560px){
  fieldset.km .line-grid > label.f:nth-child(1),
  fieldset.km .line-grid > label.f:nth-child(2),
  fieldset.km .line-grid > label.f:nth-child(3),
  fieldset.km .line-grid > label.f:nth-child(4){ grid-column:span 2; }
}
fieldset.km .line-grid{ min-width:0; }
fieldset.km .line-grid > label.f{ min-width:0; }
.map-preview{ margin:.4rem 0; }
.map-preview img{ max-width:100%; height:auto; border:1px solid var(--line); border-radius:8px; }

/* ════════════════════════════════════════════════════════════════
   ÉTAPE 2/7 — TABLEAU DE BORD EN TUILES (bento glass, sans scroll)
   ════════════════════════════════════════════════════════════════ */
.dash{ flex:1 1 auto; min-height:540px; display:grid; gap:12px;
  grid-template-columns:repeat(3,1fr); grid-template-rows:auto auto 1fr;
  grid-template-areas:
    "head head head"
    "kpis kpis amts"
    "chart chart side"; }
.dash .d-head{ grid-area:head; } .dash .d-kpis{ grid-area:kpis; }
.dash .d-amts{ grid-area:amts; } .dash .d-chart{ grid-area:chart; }
.dash .d-side{ grid-area:side; }

/* Tuile glass générique (s'utilise avec class="gtile lg") */
.gtile{ border-radius:var(--r-md); padding:14px 16px; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.gtile > h2{ font-size:.9rem; font-weight:800; color:var(--blue-dk); margin:0 0 9px;
  letter-spacing:-.01em; flex:0 0 auto; }
.gtile .scrolly{ flex:1 1 auto; min-height:0; overflow-y:auto; margin:0 -4px; padding:0 4px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10px,#000 calc(100% - 12px),transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 10px,#000 calc(100% - 12px),transparent 100%); }
.gtile .scrolly::-webkit-scrollbar{ width:5px; }
.gtile .scrolly::-webkit-scrollbar-thumb{ background:rgba(128,148,168,.3); border-radius:10px; }

/* Entête : salutation + accès rapides */
.d-head{ flex-direction:row; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 16px; }
.d-head .hi{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1 1 auto; }
.d-head .hi b{ font-size:1.1rem; font-weight:900; letter-spacing:-.02em; color:var(--blue-dk); }
.d-head .hi span{ font-size:var(--fs-xs); color:var(--muted); }
.d-head .quick{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.d-head .quick form{ margin:0; }

/* KPI compteurs cliquables */
.dash .kpi-grid{ display:grid; gap:8px; margin:0;
  grid-template-columns:repeat(auto-fit,minmax(84px,1fr)); }
.dash .kpi{ gap:.1rem; padding:.55rem .65rem; border-radius:var(--r-sm);
  background:linear-gradient(135deg,var(--chip-bg),transparent); border:1px solid var(--glass-edge);
  box-shadow:inset 0 1px 1px var(--glass-inner); transition:transform .2s var(--spring), box-shadow .2s; }
.dash a.kpi:hover{ transform:translateY(-2px);
  box-shadow:0 8px 18px -8px rgba(var(--shadow-ink),.35), inset 0 1px 1px var(--glass-inner); }
.dash .kpi-num{ font-size:1.5rem; font-weight:900; color:var(--blue-dk); }
.dash .kpi-lbl{ font-size:.72rem; line-height:1.15; }
/* Compteurs à zéro : présents mais discrets */
.dash .kpi.kpi-zero{ opacity:.55; }
.dash .kpi.kpi-zero:hover{ opacity:1; }
/* Tuile KPI : contenu centré verticalement (fin du vide sous les compteurs) */
.d-kpis .scrolly{ display:flex; flex-direction:column; justify-content:center; }

/* Montants empilés */
.d-amts .amt{ display:flex; flex-direction:column; gap:1px; padding:.5rem .2rem; }
.d-amts .amt + .amt{ border-top:1px solid var(--line); }
.d-amts .amt b{ font-size:1.15rem; font-weight:900; color:var(--blue-dk); }
.d-amts .amt span{ font-size:var(--fs-xs); color:var(--muted); }

/* Graphe mensuel : barres pures, occupe la hauteur restante */
.d-chart .chart-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex:0 0 auto; }
.d-chart .chart-head h2{ margin:0; }
.d-chart .chart-head form{ margin:0; display:flex; align-items:center; gap:6px; }
.d-chart .chart-head select{ width:auto; padding:.3rem .5rem; font-size:.78rem; border-radius:10px; }
.d-chart .yr-total{ font-size:var(--fs-xs); color:var(--muted); margin:4px 0 2px; flex:0 0 auto; }
.d-chart .barchart{ flex:1 1 auto; height:auto; min-height:80px; margin-top:6px; padding-top:2px; }

/* Listes latérales (à traiter + activité), scroll interne */
.d-side{ display:flex; flex-direction:column; gap:12px; min-height:0; }
.d-side .gtile{ flex:1 1 0; }
.dash .mini-list{ list-style:none; margin:0; padding:0; }
.dash .mini-list li{ display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .5rem;
  padding:.45rem 0; border-bottom:1px solid var(--line); font-size:var(--fs-xs); }
.dash .mini-list li:last-child{ border-bottom:0; }
.dash .mini-list .grow{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dash .mini-list a{ font-weight:700; }
.dash .empty{ color:var(--muted); font-size:var(--fs-sm); margin:auto 0;
  display:flex; align-items:center; gap:9px; }
.dash .empty::before{ content:"✓"; flex:0 0 auto; width:26px; height:26px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.8rem; font-weight:800; color:var(--blue);
  background:var(--chip-bg); border:1px solid var(--glass-edge);
  box-shadow:inset 0 1px 1px var(--glass-inner); }

/* Responsive : sous 900px, le shell « sans scroll » est abandonné :
   hauteur naturelle + scroll de page (fin des chevauchements mobiles). */
@media(max-width:899px){
  html,body{ height:auto; min-height:100dvh; overflow:auto; }
  .app{ height:auto; min-height:100dvh; }
  .container{ overflow:visible; min-height:auto; }
  .dash{ display:flex; flex-direction:column; min-height:0; }
  .gtile{ flex:0 0 auto; min-height:auto; }
  .gtile .scrolly{ overflow:visible; max-height:none; }
  .d-chart .barchart{ min-height:120px; height:150px; flex:0 0 auto; }
  .d-side{ min-height:auto; }
  .d-side .gtile{ flex:0 0 auto; }
  .d-side .scrolly{ max-height:none; }
}

/* ════════════════════════════════════════════════════════════════
   ÉTAPE 3/7 — AUTHENTIFICATION (connexion centrée, sans scroll)
   ════════════════════════════════════════════════════════════════ */
.auth-stage{ flex:1 1 auto; min-height:0; display:flex; align-items:center; justify-content:center;
  padding:8px 4px; overflow-y:auto; }
.auth-card{ width:100%; max-width:420px; margin:0; padding:26px 26px 22px;
  border-radius:var(--r-lg); animation:rise .6s var(--ease) both; }
.auth-card .auth-logo{ display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:6px; }
.auth-card .auth-logo img{ width:70px; height:auto; object-fit:contain;
  filter:drop-shadow(0 6px 16px rgba(var(--shadow-ink),.25)); }
[data-theme="dark"] .auth-card .auth-logo img{
  filter:brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0,0,0,.5)); }
.auth-card .auth-logo .lockup{ text-align:center; line-height:1.05; }
.auth-card .auth-logo .lockup b{ font-size:1.15rem; font-weight:900; letter-spacing:-.02em; color:var(--blue-dk); }
.auth-card .auth-logo .lockup b .accent{ color:var(--rose-dk); }
.auth-card .auth-logo .lockup > span{ display:block; font-size:.6rem; font-weight:700; letter-spacing:1.6px;
  text-transform:uppercase; color:var(--muted2); margin-top:2px; }
.auth-card h1{ text-align:center; font-size:1.2rem; margin:.4rem 0 .2rem; }
.auth-card > .muted{ text-align:center; display:block; font-size:var(--fs-sm); margin-bottom:.4rem; }
.auth-card .btn{ width:100%; margin-top:1.1rem; padding:.8rem 1rem; }
.auth-card .links{ text-align:center; margin-top:1rem; }
/* Topbar sur pages auth (non connecté) : pilule compacte centrée, alignée sur la carte */
.topbar-auth{ max-width:420px; width:100%; margin:0 auto; }

/* ════════════════════════════════════════════════════════════════
   ÉTAPE 4/7 — LISTE DES NOTES + FILTRES
   ════════════════════════════════════════════════════════════════ */
/* En-tête de page (titre + action) commun aux écrans liste/détail */
.page-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.page-head h1{ margin:0; }

/* Bloc filtres repliable */
.filters-box{ border:1px solid var(--line); border-radius:var(--r-sm); padding:0; margin-top:.9rem;
  background:var(--hover-wash); overflow:hidden; }
.filters-box > summary{ cursor:pointer; padding:.65rem .9rem; font-weight:800; font-size:var(--fs-sm);
  color:var(--blue-dk); list-style:none; display:flex; align-items:center; gap:8px; }
.filters-box > summary::-webkit-details-marker{ display:none; }
.filters-box > summary::before{ content:"▸"; color:var(--rose); transition:transform .2s; }
.filters-box[open] > summary::before{ transform:rotate(90deg); }
.filters-box .filters-body{ padding:0 .9rem .9rem; }

/* Statuts en chips toggle (checkbox stylée pilule) */
.filter-statuses{ border:0; padding:0; margin:0 0 .7rem; display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.filter-statuses legend{ width:100%; padding:0 0 .35rem; }
.filter-statuses .chk{ position:relative; display:inline-flex; align-items:center; gap:0; margin:0;
  padding:.4rem .8rem; border-radius:30px; border:1px solid var(--line); background:var(--chip-bg);
  font-size:var(--fs-xs); font-weight:700; color:var(--blue); cursor:pointer; min-height:36px;
  transition:background .2s, color .2s, border-color .2s; }
.filter-statuses .chk input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; }
.filter-statuses .chk:has(input:checked){ background:linear-gradient(135deg,var(--blue),var(--blue-lt));
  color:#fff; border-color:transparent; box-shadow:0 4px 12px -6px rgba(var(--shadow-ink),.4); }
.filter-statuses .chk:focus-within{ outline:2px solid var(--blue); outline-offset:2px; }

.filter-row{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
@media(min-width:560px){ .filter-row{ grid-template-columns:repeat(3,1fr); } }
.filter-row label{ margin:0; font-weight:600; font-size:var(--fs-xs); color:var(--muted); }
.filter-actions{ margin-top:.7rem; display:flex; gap:.5rem; flex-wrap:wrap; }

/* Compteur de résultats */
.result-count{ display:flex; align-items:center; gap:8px; margin:0 0 .5rem; font-size:var(--fs-sm); color:var(--muted); }
.result-count b{ color:var(--blue-dk); }

/* Tableau responsive : cartes empilées sous 560px (classe .rtable) */
.rtable{ width:100%; border-collapse:separate; border-spacing:0; font-size:var(--fs-sm); }
.rtable thead th{ position:sticky; top:0; z-index:1; background:rgba(18,60,124,.09);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  color:var(--blue-dk); font-weight:700; text-align:left; padding:.55rem .7rem; white-space:nowrap;
  border-bottom:1.5px solid rgba(18,60,124,.18); }
[data-theme="dark"] .rtable thead th{ background:rgba(157,184,218,.12); border-bottom-color:rgba(157,184,218,.25); }
.rtable tbody tr:nth-child(even){ background:rgba(18,60,124,.03); }
[data-theme="dark"] .rtable tbody tr:nth-child(even){ background:rgba(157,184,218,.05); }
.rtable thead th:first-child{ border-top-left-radius:12px; }
.rtable thead th:last-child{ border-top-right-radius:12px; }
.rtable tbody td{ padding:.55rem .7rem; border-bottom:1px solid var(--line); vertical-align:middle; }
.rtable tbody tr{ transition:background .15s; }
.rtable tbody tr:hover{ background:var(--hover-wash); }
.rtable tbody td:first-child a{ font-weight:800; }
.rtable td.num{ text-align:right; white-space:nowrap; }
@media(max-width:559px){
  .rtable thead{ display:none; }
  .rtable, .rtable tbody, .rtable tr, .rtable td{ display:block; width:100%; }
  .rtable tbody tr{ margin:0 0 .6rem; border:1px solid var(--line); border-radius:var(--r-sm);
    background:var(--chip-bg); padding:.3rem .2rem; box-shadow:inset 0 1px 1px var(--glass-inner); }
  .rtable tbody td{ display:flex; justify-content:space-between; align-items:center; gap:1rem;
    border-bottom:1px solid var(--line); padding:.5rem .8rem; white-space:normal; }
  .rtable tbody tr td:last-child{ border-bottom:0; }
  .rtable tbody td::before{ content:attr(data-label); font-weight:700; color:var(--muted);
    font-size:var(--fs-xs); flex:0 0 auto; }
  .rtable td.num{ text-align:right; }
}

/* ════════════════════════════════════════════════════════════════
   ÉTAPE 5/7 — DÉTAIL NOTE
   ════════════════════════════════════════════════════════════════ */
/* En-tête de note : numéro + gros statut */
.detail-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.detail-head h1{ margin:0; font-size:1.3rem; }
.detail-head .badge{ font-size:.8rem; padding:.3rem .8rem; }
.detail-meta{ margin:.5rem 0 0; font-size:var(--fs-sm); color:var(--muted); }
.detail-meta strong{ color:var(--blue-dk); }

/* Tableau des lignes : dense → défilement horizontal contrôlé (mobile) */
.linetable{ width:100%; border-collapse:separate; border-spacing:0; font-size:var(--fs-xs); min-width:560px; }
.linetable thead th{ position:sticky; top:0; z-index:1;
  background:rgba(18,60,124,.09); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  color:var(--blue-dk); font-weight:700;
  text-align:left; padding:.5rem .55rem; white-space:nowrap;
  border-bottom:1.5px solid rgba(18,60,124,.18); }
[data-theme="dark"] .linetable thead th{ background:rgba(157,184,218,.12); border-bottom-color:rgba(157,184,218,.25); }
.linetable tbody tr:nth-child(even){ background:rgba(18,60,124,.03); }
[data-theme="dark"] .linetable tbody tr:nth-child(even){ background:rgba(157,184,218,.05); }
.linetable thead th:first-child{ border-top-left-radius:10px; }
.linetable thead th:last-child{ border-top-right-radius:10px; }
.linetable tbody td{ padding:.45rem .55rem; border-bottom:1px solid var(--line); white-space:nowrap; }
.linetable tbody tr:hover{ background:var(--hover-wash); }
.linetable td.num{ text-align:right; }
.linetable tbody td:last-child{ color:var(--blue-dk); }
.table-wrap{ overflow-x:auto; border-radius:10px; }
.table-wrap::-webkit-scrollbar{ height:7px; }
.table-wrap::-webkit-scrollbar-thumb{ background:rgba(128,148,168,.35); border-radius:10px; }

/* Groupes d'actions workflow trésorier */
.workflow-grid{ display:flex; flex-direction:column; gap:.7rem; }
.workflow-quick{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.workflow-quick form{ margin:0; }
.wf-block{ border:1px solid var(--line); border-radius:var(--r-sm); padding:.6rem .8rem; background:var(--hover-wash); margin:0; }
.wf-block label{ margin:.2rem 0 .4rem; }
.wf-block .btn{ margin:0; }

/* Zone administrateur (suppression définitive) — repliée par défaut */
.danger-zone{ border-color:rgba(201,87,119,.4); }
.danger-zone h2{ color:var(--rose-dk); }
.danger-zone summary{ cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px; }
.danger-zone summary::-webkit-details-marker{ display:none; }
.danger-zone summary::before{ content:"▸"; color:var(--rose); transition:transform .2s; }
.danger-zone details[open] summary::before{ transform:rotate(90deg); }
.danger-zone summary h2{ margin:0; }
.danger-zone::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  border-radius:var(--r-md) 0 0 var(--r-md); background:linear-gradient(180deg,var(--rose),var(--rose-dk)); }
.danger-zone{ position:relative; }

/* Formulaire PIN archivage */
.pin-form{ margin-top:.6rem; }
hr{ border:0; height:1px; margin:.9rem 0;
  background:linear-gradient(90deg,transparent,var(--line),transparent); }

/* Historique (timeline) */
.timeline .ts{ color:var(--muted2); font-size:var(--fs-xs); margin-right:.5rem; font-weight:600; }

/* ════════════════════════════════════════════════════════════════
   ÉTAPE 6/7 — ADMIN (users, settings) + NOTIFICATIONS
   ════════════════════════════════════════════════════════════════ */
/* Carte formulaire (admin) : largeur lisible, non centrée façon auth */
.form-card{ max-width:560px; }
.form-card h1{ text-align:left; }

/* Actions inline dans les tableaux (liens + petits formulaires).
   IMPORTANT : .actions ne doit JAMAIS être posé sur un <td> (display:flex
   casse le rendu table-cell → décalage vertical). Toujours sur un div interne. */
.actions{ display:flex; gap:.7rem; align-items:center; flex-wrap:wrap; }
td.actions{ display:table-cell; } /* garde-fou si l'erreur revient */
.actions form{ margin:0; }
.actions a, .btn-link-inline{ font-weight:700; font-size:var(--fs-xs); }

/* Notifications : pastille « non lu » */
.notif-list li{ position:relative; }
.notif-list li.unread{ font-weight:600; }
.notif-list li.unread .ts::after{ content:""; }
.notif-list li.unread > div::before{ content:""; display:inline-block; width:8px; height:8px;
  border-radius:50%; margin-right:8px; vertical-align:middle;
  background:linear-gradient(135deg,var(--rose),var(--rose-dk));
  box-shadow:0 0 0 3px rgba(235,102,139,.14); }
.notif-list li.read{ opacity:.72; }

/* Paramètres : tables compactes deviennent cartes sous 560px */
.settings-table td input[type=number]{ max-width:9rem; }

/* ════════════════════════════════════════════════════════════════
   PERF MOBILE + ACCESSIBILITÉ
   ════════════════════════════════════════════════════════════════ */
@media(max-width:640px){
  .app{ padding:12px 14px calc(8px + env(safe-area-inset-bottom)); gap:10px; }
  .lg{ backdrop-filter:blur(18px) saturate(1.5); -webkit-backdrop-filter:blur(18px) saturate(1.5); }
  .aurora,.halo{ animation:none !important; }
  .aurora{ filter:blur(48px); opacity:.45; }
  .halo{ filter:blur(70px); }
  .grain{ display:none; }
  .lg-track::before{ display:none; }
  .topbar .brand .tt > span{ display:none; }
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.15s !important; }
  .aurora,.halo{ animation:none !important; }
}

/* ─── Accessibilité : focus clavier visible partout ─────────────── */
a:focus-visible, button:focus-visible, summary:focus-visible,
[type=checkbox]:focus-visible, .tb-btn:focus-visible, .mainnav a:focus-visible{
  outline:2px solid var(--blue); outline-offset:2px; border-radius:8px; }
.btn-link-inline:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }

/* ─── Cibles tactiles ≥ 44px sur mobile ─────────────────────────── */
@media(max-width:640px){
  .tb-btn{ height:44px; min-width:44px; }
  .mainnav a{ height:44px; }
  .filter-statuses .chk{ min-height:44px; }
  .btn{ min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
  .auth-card .btn{ display:flex; }
}

/* ─── Pages d'erreur autonomes (hors layout) : shell minimal ────── */
.err-page{ display:flex; align-items:center; justify-content:center; height:100dvh; padding:20px; }
.err-page .card{ max-width:460px; width:100%; text-align:center; }
.err-page .card .btn{ margin-top:1rem; }

/* ════════════════════════════════════════════════════════════════
   VERRE 2026 MAX — application stricte du composant « Glass effect 2026 »
   à tout le site : verre transparent, bord taillé (conic sombre+lumière),
   reflet balayant (screen), appui 3D. CSS pur, aucun wrapper.
   ════════════════════════════════════════════════════════════════ */
@property --angle-1{ syntax:"<angle>"; inherits:false; initial-value:-75deg; }
@property --angle-2{ syntax:"<angle>"; inherits:false; initial-value:-45deg; }
:root{ --v-ease:cubic-bezier(.25,1,.5,1); --v-time:.4s; }

/* ── 1) BASE VERRE : boutons, pilules nav, chips ────────────────── */
.tb-btn, .btn, .mainnav a, .filter-statuses .chk{
  position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(-75deg, rgba(255,255,255,.05), rgba(255,255,255,.20), rgba(255,255,255,.05));
  backdrop-filter:blur(6px) saturate(1.8); -webkit-backdrop-filter:blur(6px) saturate(1.8);
  box-shadow:
    inset 0 2px 2px rgba(0,0,0,.05),
    inset 0 -2px 2px rgba(255,255,255,.55),
    0 4px 2px -2px rgba(0,0,0,.2),
    inset 0 0 2px 4px rgba(255,255,255,.22),
    0 12px 22px -10px rgba(var(--shadow-ink),.38);
  transition:transform var(--v-time) var(--v-ease), box-shadow var(--v-time) var(--v-ease),
    backdrop-filter var(--v-time) var(--v-ease), background var(--v-time); }
[data-theme="dark"] .tb-btn, [data-theme="dark"] .btn,
[data-theme="dark"] .mainnav a, [data-theme="dark"] .filter-statuses .chk{
  background:linear-gradient(-75deg, rgba(157,184,218,.05), rgba(157,184,218,.16), rgba(157,184,218,.05));
  box-shadow:
    inset 0 2px 2px rgba(0,0,0,.25),
    inset 0 -2px 2px rgba(157,184,218,.3),
    0 4px 2px -2px rgba(0,0,0,.45),
    inset 0 0 2px 4px rgba(157,184,218,.12),
    0 12px 22px -10px rgba(0,0,0,.55); }
/* Survol : le verre « se rapproche » (scale down + net) — fidèle au composant */
.tb-btn:hover, .btn:hover, .mainnav a:hover, .filter-statuses .chk:hover{
  transform:scale(.975);
  backdrop-filter:blur(.5px) saturate(1.4); -webkit-backdrop-filter:blur(.5px) saturate(1.4);
  box-shadow:
    inset 0 2px 2px rgba(0,0,0,.05),
    inset 0 -2px 2px rgba(255,255,255,.5),
    0 3px 1px -2px rgba(0,0,0,.25),
    inset 0 0 1px 2px rgba(255,255,255,.5),
    0 14px 24px -10px rgba(var(--shadow-ink),.42); }
/* Appui : verre pressé + bascule 3D */
.tb-btn:active, .btn:active{
  transform:rotate3d(1,0,0,18deg) scale(.96); transform-origin:50% 100%;
  box-shadow:
    inset 0 2px 2px rgba(0,0,0,.06),
    inset 0 -2px 2px rgba(255,255,255,.35),
    0 2px 2px -2px rgba(0,0,0,.2),
    inset 0 4px 5px rgba(0,0,0,.12); }

/* ── 2) BORD TAILLÉ : conic sombre + ligne blanche (exact composant) ── */
.tb-btn::before, .btn::before, .mainnav a::before, .filter-statuses .chk::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  pointer-events:none; z-index:2;
  background:
    conic-gradient(from var(--angle-1) at 50% 50%,
      rgba(0,0,0,.45), transparent 5% 40%, rgba(0,0,0,.45) 50%, transparent 60% 95%, rgba(0,0,0,.45)),
    linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.6));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.5);
  transition:--angle-1 .5s ease; }
[data-theme="dark"] .tb-btn::before, [data-theme="dark"] .btn::before,
[data-theme="dark"] .mainnav a::before, [data-theme="dark"] .filter-statuses .chk::before{
  background:
    conic-gradient(from var(--angle-1) at 50% 50%,
      rgba(157,184,218,.85), transparent 5% 40%, rgba(157,184,218,.85) 50%, transparent 60% 95%, rgba(157,184,218,.85)),
    linear-gradient(180deg, rgba(157,184,218,.35), rgba(157,184,218,.35));
  box-shadow:inset 0 0 0 .5px rgba(157,184,218,.4); }
.tb-btn:hover::before, .btn:hover::before, .mainnav a:hover::before,
.filter-statuses .chk:hover::before{ --angle-1:-125deg; }
.tb-btn:active::before, .btn:active::before{ --angle-1:-75deg; }

/* ── 3) REFLET BALAYANT (mix-blend screen — exact composant) ────── */
.tb-btn::after, .btn::after, .mainnav a::after, .filter-statuses .chk::after,
.tb-btn.primary::after{
  content:""; position:absolute; z-index:3; pointer-events:none;
  width:calc(100% - 1px); height:calc(100% - 1px); top:.5px; left:.5px;
  border-radius:inherit; overflow:clip;
  background:linear-gradient(var(--angle-2),
    rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 40% 50%, rgba(255,255,255,0) 55%);
  background-size:200% 200%; background-position:0% 50%; background-repeat:no-repeat;
  mix-blend-mode:screen; transform:none; animation:none;
  transition:background-position .5s var(--v-ease), --angle-2 .5s var(--v-ease); }
.tb-btn:hover::after, .btn:hover::after, .mainnav a:hover::after,
.filter-statuses .chk:hover::after{ background-position:25% 50%; }
.tb-btn:active::after, .btn:active::after{ background-position:50% 15%; --angle-2:-15deg; }

/* ── 4) VARIANTES TEINTÉES (hiérarchie conservée, verre coloré) ─── */
.tb-btn.primary{
  background:linear-gradient(-75deg, rgba(255,255,255,.10), rgba(255,255,255,.28), rgba(255,255,255,.10)),
    linear-gradient(135deg, rgba(235,102,139,.85), rgba(201,87,119,.88));
  backdrop-filter:blur(6px) saturate(1.8); -webkit-backdrop-filter:blur(6px) saturate(1.8); }
[data-theme="dark"] .tb-btn.primary{
  background:linear-gradient(-75deg, rgba(255,255,255,.08), rgba(255,255,255,.2), rgba(255,255,255,.08)),
    linear-gradient(135deg, rgba(241,148,174,.8), rgba(235,102,139,.85)); }
.btn-primary{
  background:linear-gradient(-75deg, rgba(255,255,255,.10), rgba(255,255,255,.25), rgba(255,255,255,.10)),
    linear-gradient(135deg, rgba(18,60,124,.88), rgba(47,107,255,.78)); color:#fff; }
.btn-primary:hover{
  background:linear-gradient(-75deg, rgba(255,255,255,.14), rgba(255,255,255,.3), rgba(255,255,255,.14)),
    linear-gradient(135deg, rgba(18,60,124,.92), rgba(47,107,255,.85)); }
.mainnav a.active{
  background:linear-gradient(-75deg, rgba(255,255,255,.10), rgba(255,255,255,.25), rgba(255,255,255,.10)),
    linear-gradient(135deg, rgba(18,60,124,.88), rgba(47,107,255,.78)); }
.filter-statuses .chk:has(input:checked){
  background:linear-gradient(-75deg, rgba(255,255,255,.10), rgba(255,255,255,.25), rgba(255,255,255,.10)),
    linear-gradient(135deg, rgba(18,60,124,.88), rgba(47,107,255,.78)); }
.btn-danger{
  background:linear-gradient(-75deg, rgba(255,255,255,.08), rgba(255,255,255,.2), rgba(255,255,255,.08)),
    rgba(201,87,119,.14); }

/* ── 5) CARTES & TUILES : bord taillé rotatif ───────────────────── */
.lg::after{
  background:
    conic-gradient(from var(--angle-1) at 50% 50%,
      rgba(var(--shadow-ink),.32), transparent 8% 42%, rgba(var(--shadow-ink),.32) 50%,
      transparent 58% 92%, rgba(var(--shadow-ink),.32)),
    linear-gradient(125deg, var(--glass-edge), transparent 22%, transparent 78%, var(--glass-edge));
  transition:--angle-1 .8s var(--ease); }
.lg:hover::after{ --angle-1:-125deg; }
.card{ position:relative; }
.card::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px;
  pointer-events:none; z-index:0; opacity:.9;
  background:
    conic-gradient(from var(--angle-1) at 50% 50%,
      rgba(var(--shadow-ink),.3), transparent 8% 42%, rgba(var(--shadow-ink),.3) 50%,
      transparent 58% 92%, rgba(var(--shadow-ink),.3)),
    linear-gradient(180deg, var(--glass-edge), var(--glass-edge));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  transition:--angle-1 .8s var(--ease); }
.card:hover::before{ --angle-1:-125deg; }

/* ── 6) CHAMPS, TABLEAUX, BADGES ────────────────────────────────── */
input[type=email],input[type=password],input[type=text],
input[type=date],input[type=number],select,textarea{
  backdrop-filter:blur(10px) saturate(1.5); -webkit-backdrop-filter:blur(10px) saturate(1.5);
  box-shadow:inset 0 1px 1px var(--glass-inner), inset 0 -1px 1px rgba(255,255,255,.3); }
.rtable thead th, .linetable thead th{ box-shadow:inset 0 1px 0 rgba(255,255,255,.4); }
[data-theme="dark"] .rtable thead th, [data-theme="dark"] .linetable thead th{
  box-shadow:inset 0 1px 0 rgba(157,184,218,.22); }
.badge{ backdrop-filter:blur(8px) saturate(1.5); -webkit-backdrop-filter:blur(8px) saturate(1.5);
  box-shadow:inset 0 1px 1px var(--glass-inner), inset 0 -1px 1px rgba(255,255,255,.25),
    0 2px 6px -2px rgba(var(--shadow-ink),.25); }

/* ── 7) GARDE-FOUS ──────────────────────────────────────────────── */
/* Texte : le verre ne doit jamais affaiblir la lecture (charte §06) */
.tb-btn, .mainnav a{ text-shadow:0 1px 1px rgba(255,255,255,.3); }
[data-theme="dark"] .tb-btn, [data-theme="dark"] .mainnav a{ text-shadow:0 1px 2px rgba(0,0,0,.4); }
.tb-btn.primary, .btn-primary, .mainnav a.active{ text-shadow:0 1px 2px rgba(0,0,0,.25); }
/* Mobile : angles statiques, reflets sans animation */
@media(max-width:640px){
  .tb-btn::before,.btn::before,.mainnav a::before,.filter-statuses .chk::before,
  .tb-btn::after,.btn::after,.mainnav a::after,.filter-statuses .chk::after,
  .lg::after,.card::before{ transition:none; }
  .tb-btn:active,.btn:active{ transform:scale(.96); }
}
@media(prefers-reduced-motion:reduce){
  .tb-btn::before,.btn::before,.mainnav a::before,.filter-statuses .chk::before,
  .tb-btn::after,.btn::after,.mainnav a::after,.filter-statuses .chk::after,
  .lg::after,.card::before{ transition:none; }
  .tb-btn:active,.btn:active{ transform:none; }
}

/* Retour au Hub : modèle visuel du Trombinoscope. */
@keyframes hub-return-edge{ from{--angle-1:-75deg} to{--angle-1:-215deg} }
@keyframes hub-return-sheen{ from{background-position:0% 50%} to{background-position:100% 50%} }
.hub-return{
  --hub-return-ease:cubic-bezier(.25,1,.5,1);
  position:relative; z-index:0; isolation:isolate; overflow:hidden;
  height:42px; min-width:0; padding:0 20px; border:0; border-radius:999vw;
  color:var(--ink); font:inherit; font-size:var(--fs-xs); font-weight:900; letter-spacing:.04em;
  text-transform:uppercase; text-shadow:0 1px 1px rgba(0,0,0,.08); -webkit-tap-highlight-color:transparent;
  background:linear-gradient(-75deg,rgba(255,255,255,.04),rgba(255,255,255,.16),rgba(255,255,255,.04));
  box-shadow:inset 0 1px 1px rgba(0,0,0,.06),inset 0 -1.5px 1px rgba(255,255,255,.55),inset 0 0 0 1px rgba(255,255,255,.14),0 1px 0 rgba(255,255,255,.5),0 8px 16px -6px rgba(var(--shadow-ink),.4);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  transition:transform .4s var(--hub-return-ease),box-shadow .4s var(--hub-return-ease),background .4s var(--ease),--angle-1 .5s ease;
}
.hub-return > *{ position:relative; z-index:4; }
.hub-return::before{ content:""; position:absolute; z-index:3; inset:1px; border-radius:inherit; pointer-events:none;
  background:linear-gradient(var(--angle-2),rgba(255,255,255,0) 0%,rgba(255,255,255,.5) 40% 50%,rgba(255,255,255,0) 55%);
  background-size:200% 200%; background-position:0% 50%; background-repeat:no-repeat; mix-blend-mode:screen;
  animation:hub-return-sheen 4.5s var(--hub-return-ease) infinite alternate; transition:background-position .5s var(--hub-return-ease),--angle-2 .5s var(--hub-return-ease);
}
.hub-return::after{ content:""; position:absolute; z-index:1; inset:0; border-radius:inherit; padding:1.3px; box-sizing:border-box; pointer-events:none;
  background:conic-gradient(from var(--angle-1) at 50% 50%,rgba(0,0,0,.62),rgba(0,0,0,0) 6% 40%,rgba(0,0,0,.62) 50%,rgba(0,0,0,0) 60% 94%,rgba(0,0,0,.62)),linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,.45));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude;
  box-shadow:inset 0 0 0 .6px rgba(255,255,255,.55); animation:hub-return-edge 6s var(--hub-return-ease) infinite alternate; transition:--angle-1 .5s ease;
}
.hub-return:hover{ transform:scale(.975); box-shadow:inset 0 2px 2px rgba(0,0,0,.05),inset 0 -2px 2px rgba(255,255,255,.5),0 2px 1px -1px rgba(0,0,0,.25),inset 0 0 1px 2px rgba(255,255,255,.5),0 14px 26px -8px rgba(var(--shadow-ink),.34); }
.hub-return:hover::before{ background-position:25% 50%; }
.hub-return:hover::after{ --angle-1:-125deg; }
.hub-return:active{ transform:scale(.95) rotate3d(1,0,0,20deg); }
.hub-return:active::before{ background-position:50% 15%; --angle-2:-15deg; }
.hub-return:active::after{ --angle-1:-75deg; }
[data-theme="dark"] .hub-return{ box-shadow:inset 0 2px 2px rgba(0,0,0,.2),inset 0 -2px 2px rgba(255,255,255,.12),0 6px 3px -3px rgba(0,0,0,.4),inset 0 0 2px 4px rgba(255,255,255,.06),0 22px 45px -22px rgba(0,0,0,.55); }
[data-theme="dark"] .hub-return::after{ background:conic-gradient(from var(--angle-1) at 50% 50%,rgba(255,255,255,.55),rgba(255,255,255,0) 5% 40%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 60% 95%,rgba(255,255,255,.55)),linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.1)); }
@media(max-width:640px){ .hub-return{ height:44px; padding:0 14px; } }
@media(prefers-reduced-motion:reduce){ .hub-return::before,.hub-return::after{ animation:none!important; transition:none!important; } }
/* Fallback : pas de backdrop-filter → surfaces opaques lisibles (déjà géré par .lg) */