/* ══════════════════════════════════════════════════════════════════
   Hub SNE-CGC CERA — hub.css v20260706e
   Fidèle à l'implémentation de référence Mes Frais (charte 2026) :
   tokens, scène atmosphérique (aurora/halos/grain), matériau liquid
   glass .lg, reflet pointeur .lg-track, pilules, thème sombre,
   bloc VERRE 2026 MAX en fin de fichier.
   20260706e : Verre 2026 MAX étendu à TOUS les boutons (suppression du
   flat forcé sur .btn-sm) et à toutes les listes déroulantes (.select-wrap/
   .select-wrap-sm) — bord conic, reflet balayant, fond glass, densité
   compacte conservée. Cf. admin/users.php.
   Discipline cache : incrémenter HUB_CSS_V (includes/layout.php).
   ══════════════════════════════════════════════════════════════════ */

/* ─── Design tokens — thème clair (charte 2026) ─────────────────── */
:root{
  --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;
  --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);
  --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;
  --hover-wash:rgba(18,60,124,.06);
  --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);
  --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;
  --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;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; min-height:100dvh;
  font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--ink); background:var(--scene-b);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; -webkit-text-size-adjust:100%;
  transition:background .3s, color .3s; }
body{ display:flex; flex-direction:column; }
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%); }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .lg{ background:var(--field-focus); }
}

/* ─── Coquille de page ──────────────────────────────────────────── */
.wrap{ position:relative; z-index:1; flex:1; width:100%; max-width:1060px; margin:0 auto;
  padding:14px 20px calc(14px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:12px; animation:rise .55s var(--ease) both; }
.pagetitle{ font-size:1.35rem; font-weight:900; letter-spacing:-.02em; color:var(--blue-dk); margin:.6rem 0 0; }
.pagesub{ margin:0 0 .6rem; color:var(--muted); font-size:var(--fs-base); }
@keyframes rise{ from{opacity:0;transform:translateY(24px);} to{opacity:1;transform:translateY(0);} }

/* ─── Header glass (pilule) ─────────────────────────────────────── */
.topbar-zone{ position:relative; z-index:2; width:100%; max-width:1060px; margin:0 auto;
  padding:calc(14px + env(safe-area-inset-top)) 20px 0; }
.topbar{ 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:40px; height:40px; object-fit:contain;
  filter:drop-shadow(0 2px 6px rgba(var(--shadow-ink),.25));
  transition:filter .3s var(--ease); }
/* Mode sombre : emblème monochrome en silhouette blanche, fond transparent
   (comme Mes Frais — l'emblème s'inverse proprement, le logo complet non). */
[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: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; }
/* Boutons icône + libellé : libellé visible en desktop, icône seule en mobile */
.tb-btn.ico .lbl{ display:inline; }

/* ─── Cartes / panneaux ─────────────────────────────────────────── */
.card{ position:relative; isolation:isolate; border-radius:var(--r-md); padding:1.25rem;
  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);
  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); }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .card{ background:var(--field-focus); }
}
.card h1{ font-size:1.35rem; font-weight:900; letter-spacing:-.02em; color:var(--blue-dk); margin:.2rem 0 .6rem; }
.panel h2, .card h2{ font-size:1.1rem; font-weight:800; color:var(--blue-dk); margin:.2rem 0 .6rem; }
.panel{ padding:1.25rem; }

/* ─── Tuiles applicatives ───────────────────────────────────────── */
.tiles{ display:grid; gap:14px; grid-template-columns:repeat(auto-fill, minmax(min(300px,100%), 1fr)); }
.tile{ display:flex; flex-direction:column; gap:6px; padding:20px 20px 16px; border-radius:var(--r-md);
  text-decoration:none; color:var(--ink); min-height:150px;
  transition:transform .25s var(--spring), box-shadow .25s var(--ease); }
a.tile:hover{ transform:translateY(-3px);
  box-shadow:0 4px 10px rgba(var(--shadow-ink),.08),0 30px 56px -16px rgba(var(--shadow-ink),.30),
    inset 0 1px 1px var(--glass-inner); }
a.tile:active{ transform:scale(.985); }
.tile h2{ margin:0; font-size:1.12rem; font-weight:800; color:var(--blue-dk); }
.tile p{ margin:0; font-size:var(--fs-sm); color:var(--muted); flex:1; }
.tile-go{ font-size:var(--fs-sm); font-weight:800; letter-spacing:.02em; color:var(--rose-dk); }
[data-theme="dark"] .tile-go{ color:var(--rose); }
.tile-ico{ display:block; margin-bottom:4px; }
.tile-ico img{ width:56px; height:56px; object-fit:contain; display:block;
  filter:drop-shadow(0 4px 10px rgba(var(--shadow-ink),.22));
  transition:transform .25s var(--spring); }
a.tile:hover .tile-ico img{ transform:scale(1.06) rotate(-1.5deg); }
.tile-off{ opacity:.62; filter:saturate(.6); }
.tile-off h2{ color:var(--muted); }

/* ─── Carte de connexion ────────────────────────────────────────── */
.login-card{ max-width:420px; width:100%; margin:clamp(18px,7vh,70px) auto 0;
  padding:32px 30px 26px; text-align:center; border-radius:var(--r-lg); }
.login-logo img{ max-width:180px; height:auto; margin-bottom:6px;
  filter:drop-shadow(0 4px 10px rgba(var(--shadow-ink),.2)); }
.login-card h1{ margin:4px 0 2px; }
/* Titre premium (rendu bancaire) : Inter 900 serré, dégradé charte bleu → magenta */
.hub-title{ margin:12px 0 18px; font-size:clamp(2rem, 7vw, 2.5rem); font-weight:900;
  letter-spacing:-.035em; line-height:1.05; padding-bottom:.08em;
  background:linear-gradient(95deg, var(--blue-dk) 5%, var(--blue) 35%, var(--blue-lt) 60%, var(--rose) 92%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 8px rgba(var(--shadow-ink),.16)); }
[data-theme="dark"] .hub-title{
  background:linear-gradient(95deg, #eef4fd 5%, var(--blue-lt) 45%, var(--rose) 92%);
  -webkit-background-clip:text; background-clip:text;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.5)); }
/* Logos selon thème : logo complet en clair ; en sombre, emblème monochrome
   inversé en blanc (transparent, sans fond — le logo complet ne s'inverse pas proprement). */
.logo-dark{ display:none; }
[data-theme="dark"] .logo-light{ display:none; }
[data-theme="dark"] .logo-dark{ display:inline-block;
  filter:brightness(0) invert(1) drop-shadow(0 4px 10px rgba(0,0,0,.45)); }
.login-card .sub{ margin:0 0 18px; color:var(--muted); font-size:var(--fs-base); }
.login-card form{ text-align:left; }
.hint{ margin:16px 0 0; font-size:var(--fs-xs); color:var(--muted2); }

/* ─── Formulaires ───────────────────────────────────────────────── */
label{ display:block; font-size:.9rem; font-weight:600; margin:.9rem 0 .3rem; color:var(--ink); }
input[type=email],input[type=password],input[type=text],select{
  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); }
input:focus,select:focus{ outline:2px solid var(--blue); outline-offset:1px;
  border-color:var(--blue); background:var(--field-focus); }

/* ─── Boutons ───────────────────────────────────────────────────── */
.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:inherit; font-weight:700; cursor:pointer;
  margin:.3rem .3rem .3rem 0; text-decoration:none;
  transition:transform .2s var(--spring), background .2s; }
.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)); }
[data-theme="dark"] .btn-primary{ color:#0d1626; }
.btn-wide{ display:block; width:100%; margin:18px 0 0; padding:.75rem; text-align:center; }
.btn-sm{ height:34px; padding:0 .8rem; font-size:.8rem; line-height:34px; margin:0 3px 3px 0; }

/* ─── Alertes, badges ───────────────────────────────────────────── */
.alert{ padding:.7rem .95rem; border-radius:var(--r-sm); font-size:var(--fs-sm); font-weight:600;
  margin:0 0 14px; border:1px solid var(--line);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.alert.err{ 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.temp{ background:rgba(47,107,255,.10); color:var(--blue); border-color:rgba(47,107,255,.25); }
[data-theme="dark"] .alert.temp{ background:rgba(127,163,230,.14); color:var(--blue-lt); border-color:rgba(127,163,230,.3); }
.alert code{ font-size:1rem; font-weight:800; letter-spacing:.06em; }
.badge{ display:inline-block; padding:4px 12px; border-radius:999px; font-size:var(--fs-xs); font-weight:700;
  align-self:flex-start; color:var(--blue-dk); background:var(--chip-bg); border:1px solid var(--line); }
.badge.on{ color:var(--ok-ink); } .badge.off{ color:var(--muted2); } .badge.warn{ color:var(--err-ink); }

/* ─── Table admin ───────────────────────────────────────────────── */
.grid-form{ display:grid; gap:0 16px; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); }
.grid-form .field{ display:flex; flex-direction:column; }
.grid-submit{ display:flex; align-items:flex-end; padding-top:12px; }
.tablewrap{ overflow-x:auto; }
.utable{ width:100%; border-collapse:collapse; font-size:.82rem; table-layout:fixed; }
.utable th{ text-align:left; padding:6px 8px; color:var(--blue-dk); font-size:.68rem;
  font-weight:800; text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid var(--line); }
.utable td{ padding:6px 8px; border-bottom:1px solid var(--line); vertical-align:middle; }
form.inline{ display:inline-block; margin:0 3px 3px 0; }

/* ── Admin Utilisateurs (H3b) : formulaire + tableau habillés verre ── */

/* Selects personnalisés : flèche custom, apparence native supprimée,
   accessibilité clavier conservée (focus visible, élément <select> réel). */
.select-wrap{ position:relative; display:block; width:100%; border-radius:var(--r-sm); }
.select-wrap select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  width:100%; padding-right:2.4rem; cursor:pointer;
  position:relative; z-index:1; background:transparent; border-color:transparent; }
.select-wrap::after{
  content:""; position:absolute; right:.85rem; top:50%; width:9px; height:9px;
  pointer-events:none; transform:translateY(-65%) rotate(45deg); z-index:4;
  border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transition:border-color .2s; }
.select-wrap:focus-within::after{ border-color:var(--blue); }
[data-theme="dark"] .select-wrap::after{ border-color:var(--muted2); }

/* Formulaire de création : grille responsive mobile-first, champs verre */
.grid-form{ display:grid; gap:4px 16px; grid-template-columns:1fr; }
@media(min-width:560px){ .grid-form{ grid-template-columns:repeat(2, 1fr); } }
@media(min-width:900px){ .grid-form{ grid-template-columns:repeat(3, 1fr); } }
.grid-form .field label{ margin:.6rem 0 .3rem; }
.grid-form input[type=email],.grid-form input[type=text]{ background:var(--field-bg); }
.grid-form .select-wrap select{ margin:0; }
.grid-submit{ grid-column:1/-1; padding-top:6px; }

/* Tableau -> cartes verre en mobile (pattern data-label repris de Mes Frais) */
.rtable{ border-collapse:separate; border-spacing:0 4px; }
.rtable thead{ display:table-header-group; }
.rtable tbody tr{ background:var(--field-bg); border-radius:var(--r-sm); }
.rtable td{ border-bottom:none; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.rtable tbody tr td:first-child{ border-left:1px solid var(--line); border-top-left-radius:var(--r-sm); border-bottom-left-radius:var(--r-sm); }
.rtable tbody tr td:last-child{ border-right:1px solid var(--line); border-top-right-radius:var(--r-sm); border-bottom-right-radius:var(--r-sm); }
/* Colonnes : largeurs pensées pour que l'e-mail ne se coupe pas en plein mot */
.utable col.c-name{ width:12%; }
.utable col.c-email{ width:20%; }
.utable col.c-role{ width:8%; }
.utable col.c-status{ width:8%; }
.utable col.c-apps{ width:24%; }
.utable col.c-login{ width:10%; }
.utable col.c-actions{ width:18%; }
.utable .td-actions{ white-space:normal; }
.utable .td-actions .inline{ display:inline-block; margin:0 4px 0 0; }
.rtable .td-email{ font-size:.8rem; word-break:normal; overflow-wrap:anywhere; line-height:1.25;
  font-variant-numeric:tabular-nums; letter-spacing:-.005em; }

/* Cellule Applications : selects par app + bouton Enregistrer, alignés */
.app-roles-form{ display:flex; flex-wrap:wrap; align-items:end; gap:6px 8px; }
.app-role-field{ display:flex; flex-direction:column; gap:1px; min-width:118px; }
.app-role-label{ font-size:.68rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; }
.select-wrap-sm{ border-radius:10px; }
.select-wrap-sm select{ height:34px; padding:0 1.75rem 0 .55rem; font-size:.82rem; border-radius:10px; }
.select-wrap-sm::after{ right:.6rem; width:6px; height:6px; }
.app-roles-save{ margin:0; align-self:flex-end; }

.td-actions{ white-space:nowrap; }
.td-actions form.inline{ margin:0 4px 4px 0; }

/* Bouton secondaire "verre" pour actions destructives/sensibles douces
   (Désactiver / Réinitialiser MDP) : même matériau verre que .btn, teinte neutre */
.btn-ghost{ background:linear-gradient(-75deg, rgba(255,255,255,.05), rgba(255,255,255,.18), rgba(255,255,255,.05)),
  linear-gradient(135deg, transparent, transparent); color:var(--blue-dk); border-color:var(--line); }
.btn-ghost:hover{ color:var(--rose-dk); }
[data-theme="dark"] .btn-ghost{ color:var(--blue-lt); }
[data-theme="dark"] .btn-ghost:hover{ color:var(--rose); }

/* Boutons compacts (.btn-sm) : même matériau Verre 2026 MAX que les boutons
   pleine taille (bord conic taillé, reflet balayant, press 3D hérités de
   .btn::before/::after plus haut), mais à échelle compacte — rayon plus
   serré, sans jamais neutraliser l'effet. */
.btn-sm{
  border-radius:10px; font-weight:700; letter-spacing:.01em; }
.app-roles-save.btn-primary{
  background:linear-gradient(135deg, rgba(18,60,124,.92), rgba(47,107,255,.8));
  text-shadow:0 1px 1px rgba(0,0,0,.2); }
.app-roles-save.btn-primary:hover{
  background:linear-gradient(135deg, rgba(18,60,124,.98), rgba(47,107,255,.88)); }

/* Responsive : cartes empilées lisibles sous 720px */
@media(max-width:720px){
  .rtable thead{ display:none; }
  .rtable, .rtable tbody, .rtable tr, .rtable td{ display:block; width:100%; }
  .rtable tbody tr{ padding:10px 12px; margin-bottom:10px; }
  .rtable tbody tr td:first-child,.rtable tbody tr td:last-child{ border-radius:0; }
  .rtable tbody tr{ border-radius:var(--r-sm); overflow:hidden; }
  .rtable td{ border:none !important; padding:6px 2px; display:flex; justify-content:space-between;
    align-items:center; gap:10px; text-align:right; }
  .rtable td[data-label]::before{
    content:attr(data-label); font-size:var(--fs-xs); font-weight:800; color:var(--blue-dk);
    text-transform:uppercase; letter-spacing:.04em; text-align:left; flex-shrink:0; }
  .rtable td.td-actions,.rtable td[data-label="Applications"]{ flex-direction:column; align-items:stretch; text-align:left; }
  .rtable td.td-actions::before,.rtable td[data-label="Applications"]::before{ margin-bottom:4px; }
  .app-roles-form{ flex-direction:column; align-items:stretch; }
  .app-role-field{ min-width:0; }
  .app-roles-save{ align-self:stretch; }
  /* E-mail en vue carte : ligne dédiée pleine largeur, lisible sans césure sauvage */
  .rtable td[data-label="E-mail"]{ flex-direction:column; align-items:flex-start; text-align:left; }
  .rtable td[data-label="E-mail"]::before{ margin-bottom:2px; }
  .rtable .td-email{ font-size:.84rem; word-break:break-word; overflow-wrap:anywhere; }
}

/* ─── Pied ──────────────────────────────────────────────────────── */
.foot{ position:relative; z-index:1; text-align:center; color:var(--muted2); font-size:var(--fs-xs);
  padding:10px 0 14px; margin-top:auto; }
.foot a{ color:var(--muted2); }

/* ─── Optimisation mobile (v20260706f) ──────────────────────────────
   Densité tactile, encoches (safe-area) et confort de lecture < 640px.
   Complète le bloc garde-fous VERRE (animations coupées) plus bas. */
@media(max-width:640px){
  /* Encoches : haut (Dynamic Island/notch) + côtés. NE PAS retirer l'inset top. */
  .topbar-zone{ padding:calc(10px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 0 calc(12px + env(safe-area-inset-left)); }
  .wrap{ padding:12px calc(16px + env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left)); }
  /* Barre du haut : UNE seule ligne propre — marque à gauche, actions en
     icônes seules à droite (plus de repli sur 2 lignes = fini le "grossier"). */
  .topbar{ gap:6px; padding:7px 8px; }
  .tb-btn{ height:38px; padding:0 12px; }
  .tb-btn.ico{ width:38px; min-width:38px; padding:0; }
  .tb-btn.ico .lbl{ display:none; }
  .tb-btn.ico svg{ width:19px; height:19px; }
  /* La marque doit se compresser (sinon elle éjecte les icônes du champ) */
  .topbar .brand{ flex-shrink:1; min-width:0; gap:8px; }
  .topbar .brand img{ width:32px; height:32px; }
  .topbar .brand .tt{ min-width:0; overflow:hidden; }
  .topbar .brand .tt b{ font-size:.9rem; overflow:hidden; text-overflow:ellipsis; }
  .topbar .spacer{ flex:1 1 0; min-width:6px; }
  /* Titres compacts : on récupère de la hauteur au-dessus des tuiles */
  .pagetitle{ font-size:1.15rem; margin:.2rem 0 0; }
  .pagesub{ margin:.1rem 0 .4rem; font-size:var(--fs-sm); }
  .wrap{ gap:8px; }
  /* Menu en grille 2 colonnes (anti-scroll) : tuiles carrées centrées,
     icône + libellé, description masquée pour tenir sans défilement. */
  .tiles{ grid-template-columns:repeat(2, 1fr); gap:10px; }
  .tile{ min-height:0; padding:14px 10px; align-items:center; text-align:center; gap:4px; }
  .tile-ico{ margin-bottom:0; }
  .tile-ico img{ width:44px; height:44px; }
  .tile h2{ font-size:.98rem; line-height:1.15; }
  .tile p{ display:none; }
  .tile-go{ font-size:var(--fs-xs); }
  .tile .badge{ align-self:center; }
  .login-card{ padding:24px 18px 20px; margin-top:clamp(8px,3vh,32px); }
}
/* Écran étroit : libellés tuiles encore un cran plus serrés */
@media(max-width:380px){
  .tile{ padding:12px 8px; }
  .tile-ico img{ width:40px; height:40px; }
  .tile h2{ font-size:.92rem; }
}
/* Très petits écrans : on masque le sous-titre de marque pour gagner de la place */
@media(max-width:380px){
  .topbar .brand .tt > span{ display:none; }
  .tb-btn{ padding:0 11px; font-size:.7rem; }
}

/* ════════════════════════════════════════════════════════════════
   VERRE 2026 MAX — repris de l'implémentation de référence Mes Frais
   (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, listes déroulantes ────────── */
.tb-btn, .btn, .select-wrap{
  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"] .select-wrap{
  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); }
/* Reflet balayant du select : porté par l'élément .select-wrap lui-même
   (superposé au fond glass via background-image en 2e couche), car son
   ::after est déjà occupé par le chevron custom — évite tout conflit de
   pseudo-élément tout en gardant le même rendu "screen" que .btn/.tb-btn. */
.select-wrap{
  background-image:
    linear-gradient(var(--angle-2), rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 40% 50%, rgba(255,255,255,0) 55%),
    linear-gradient(-75deg, rgba(255,255,255,.05), rgba(255,255,255,.20), rgba(255,255,255,.05));
  background-size:200% 200%, 100% 100%; background-position:0% 50%, 0 0; background-repeat:no-repeat;
  background-blend-mode:screen, normal;
  transition:background-position .5s var(--v-ease), --angle-2 .5s var(--v-ease),
    box-shadow var(--v-time) var(--v-ease), backdrop-filter var(--v-time) var(--v-ease); }
[data-theme="dark"] .select-wrap{
  background-image:
    linear-gradient(var(--angle-2), rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 40% 50%, rgba(255,255,255,0) 55%),
    linear-gradient(-75deg, rgba(157,184,218,.05), rgba(157,184,218,.16), rgba(157,184,218,.05)); }
/* Survol : le verre « se rapproche » (scale down + net) */
.tb-btn:hover, .btn: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); }
/* Select : pas d'affordance de "presse" (ce n'est pas un bouton) mais le
   focus clavier/souris révèle le même verre net, sans bascule 3D, et fait
   glisser le reflet balayant (cf. bloc 1, background-position 2e couche). */
.select-wrap:focus-within{
  backdrop-filter:blur(.5px) saturate(1.4); -webkit-backdrop-filter:blur(.5px) saturate(1.4);
  background-position:25% 50%, 0 0;
  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); }

/* ── 2) BORD TAILLÉ : conic sombre + ligne blanche ──────────────── */
.tb-btn::before, .btn::before, .select-wrap::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"] .select-wrap::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{ --angle-1:-125deg; }
.tb-btn:active::before, .btn:active::before{ --angle-1:-75deg; }
.select-wrap:focus-within::before{ --angle-1:-125deg; }

/* ── 3) REFLET BALAYANT (mix-blend screen) ──────────────────────── */
.tb-btn::after, .btn::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{ background-position:25% 50%; }
.tb-btn:active::after, .btn:active::after{ background-position:50% 15%; --angle-2:-15deg; }
/* .select-wrap::after est réservé au chevron custom (cf. bloc "Selects
   personnalisés" plus haut) : le reflet balayant du select est porté par
   .select-wrap::before en complément du bord conic (background multiple),
   pour ne pas entrer en conflit avec le pseudo-élément du chevron. */

/* ── 4) VARIANTES TEINTÉES (hiérarchie conservée, verre coloré) ─── */
.tb-btn.primary{
  color:#fff; border-color:rgba(255,255,255,.45);
  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{
  color:#fff;
  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-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)); }
[data-theme="dark"] .btn-primary{ color:#fff; }

/* ── 5) CARTES & TUILES : bord taillé rotatif ───────────────────── */
.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; }
.topbar.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); }
.topbar.lg:hover::after{ --angle-1:-125deg; }

/* ── 6) CHAMPS, TABLEAUX, BADGES ────────────────────────────────── */
input[type=email],input[type=password],input[type=text],select{
  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); }
[data-theme="dark"] input[type=email],[data-theme="dark"] input[type=password],
[data-theme="dark"] input[type=text],[data-theme="dark"] select{
  box-shadow:inset 0 1px 1px var(--glass-inner), inset 0 -1px 1px rgba(157,184,218,.15); }
/* Le <select> logé dans .select-wrap porte déjà le verre max sur le wrapper
   (fond glass + blur + bord conic + reflet) : neutraliser le blur/l'ombre en
   double posés par la règle générique ci-dessus pour ne pas empiler deux
   backdrop-filter (perf + lisibilité), le select natif reste transparent. */
.select-wrap select{ backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none; }
.utable thead th{ box-shadow:inset 0 1px 0 rgba(255,255,255,.4); }
[data-theme="dark"] .utable 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{ text-shadow:0 1px 1px rgba(255,255,255,.3); }
[data-theme="dark"] .tb-btn{ text-shadow:0 1px 2px rgba(0,0,0,.4); }
.tb-btn.primary, .btn-primary{ 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,.tb-btn::after,.btn::after,
  .select-wrap::before,.select-wrap,
  .card::before,.topbar.lg::after{ transition:none; }
  .tb-btn:active,.btn:active{ transform:scale(.96); }
  .aurora,.halo{ animation:none; }
  .topbar{ flex-wrap:nowrap; }
  .topbar .who{ display:none; }
}
@media(prefers-reduced-motion:reduce){
  .tb-btn::before,.btn::before,.tb-btn::after,.btn::after,
  .select-wrap::before,.select-wrap,
  .card::before,.topbar.lg::after{ transition:none; }
  .tb-btn:active,.btn:active,a.tile:hover,a.tile:active{ transform:none; }
  .aurora,.halo{ animation:none; }
  .wrap,.topbar{ animation:none; }
}