/* ════════════════════════════════════════════════════════════════
SNE-CGC STUDIO — Charte graphique 2026 (bleu profond + magenta)
Reprise stricte des tokens §22, du bloc « VERRE 2026 MAX » §23 et
des règles composants §24 depuis l'implémentation de référence
Mes Frais (frais.inlasco.fr). Ne pas réinventer.
════════════════════════════════════════════════════════════════ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
/* ─── Design tokens — thème clair (charte §22.1) ────────────────── */
:root{
--blue:#123C7C; --blue-lt:#2F6BFF; --blue-dk:#0B2A5B; --blue-night:#071A3A;
--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);
--warn-bg:rgba(18,60,124,.10); --warn-ink:var(--blue);
}
/* ─── Design tokens — thème sombre (charte §22.2) ───────────────── */
[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;
--warn-bg:rgba(127,163,230,.14); --warn-ink:var(--blue-lt);
}
html{ -webkit-text-size-adjust:100%; }
body{ min-height:100dvh; font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
color:var(--ink); background:var(--scene-b); font-size:15px; line-height:1.5;
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
transition:background .3s, color .3s; }
a{ color:var(--blue); text-decoration:none; }
a:hover{ text-decoration:underline; }
/* ─── Scène atmosphérique (charte §22.3 — le verre n'existe que
contre la lumière). 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%); }
.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,");
background-size:160px; }
/* Tout le contenu au-dessus de la scène */
.topbar, .wrap, .login-bg{ position:relative; z-index:1; }
/* ─── Topbar : pilule verre compacte (pattern Mes Frais) ────────── */
.topbar{ display:flex; align-items:center; gap:12px;
max-width:1080px; margin:16px auto 0; padding:10px 14px; border-radius:60px;
background:linear-gradient(135deg, var(--glass-hi), var(--glass-lo) 58%);
backdrop-filter:blur(24px) saturate(1.8); -webkit-backdrop-filter:blur(24px) saturate(1.8);
border:1px solid var(--glass-edge);
box-shadow:0 2px 6px rgba(var(--shadow-ink),.05), 0 18px 40px -14px rgba(var(--shadow-ink),.22),
inset 0 1px 1px var(--glass-inner);
animation:rise .8s var(--ease) both; }
@media(max-width:1120px){ .topbar{ margin-left:16px; margin-right:16px; } }
.topbar .brand{ display:flex; align-items:center; gap:11px; text-decoration:none; flex-shrink:0; }
.topbar .brand:hover{ text-decoration:none; }
.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); }
[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 .user{ display:flex; align-items:center; gap:6px; min-width:0; max-width:230px;
font-size:var(--fs-xs); font-weight:600; color:var(--muted); }
.topbar .user b{ color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.topbar .role{ display:inline-block; background:var(--chip-bg); border:1px solid var(--line);
padding:2px 9px; border-radius:999px; font-size:.62rem; font-weight:700;
letter-spacing:.06em; text-transform:uppercase; color:var(--blue); flex-shrink:0; }
/* Boutons pilule topbar (thème, déconnexion) */
.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; flex-shrink:0;
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);
transition:transform .25s var(--spring), box-shadow .25s, background .25s; }
.tb-btn:hover{ text-decoration:none; }
.tb-btn svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2.2;
stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
/* Navigation : rangée de pilules verre SÉPARÉE sous la topbar
(pattern Mes Frais). <900px : défilement horizontal discret. */
.mainnav{ position:relative; z-index:1; display:flex; gap:8px; align-items:center; flex-wrap:wrap;
max-width:1080px; margin:10px auto 0; padding:2px; }
@media(max-width:1120px){ .mainnav{ margin-left:16px; margin-right:16px; } }
.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); border:1px solid var(--line);
transition:transform .25s var(--spring), color .2s, background .2s, box-shadow .25s; }
.mainnav a:hover{ color:var(--blue-dk); text-decoration:none; }
/* Tablette : header allégé (nom conservé, chip rôle masquée) */
@media(max-width:1024px){
.topbar .user{ max-width:150px; }
.topbar .role{ display:none; }
}
@media(max-width:899px){
.mainnav{ flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x proximity;
padding:2px 2px 6px; scroll-padding-inline:16px;
-webkit-overflow-scrolling:touch; scrollbar-width:none; }
.mainnav::after{ content:""; flex:0 0 12px; } /* respiration fin de piste */
.mainnav::-webkit-scrollbar{ display:none; }
.mainnav a{ flex:0 0 auto; white-space:nowrap; scroll-snap-align:start; }
}
/* ─── Layout ────────────────────────────────────────────────────── */
.wrap{ max-width:1080px; margin:22px auto 28px; padding:0 18px; }
.wrap.narrow{ max-width:720px; }
h1{ font-size:1.75rem; font-weight:900; letter-spacing:-.02em; color:var(--blue-dk); margin:0 0 4px; }
h2{ font-size:1.15rem; font-weight:800; letter-spacing:-.01em; color:var(--blue-dk); margin:30px 0 12px; }
.sub{ color:var(--muted); margin:0 0 24px; }
/* Héros de page : panneau verre (titre + sous-titre) */
.hero{ position:relative; isolation:isolate;
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-lg);
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:20px 24px; margin:0 0 20px; }
.hero h1{ margin:0; }
.hero .sub{ margin:4px 0 0; }
/* ─── Cartes verre (charte §23.4) ───────────────────────────────── */
.card{ position:relative; isolation:isolate;
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:24px; margin-bottom:18px; }
.card h3{ margin:0 0 12px; font-size:1rem; font-weight:800; letter-spacing:-.01em; color:var(--blue-dk); }
.grid{ display:grid; gap:18px; }
.grid.cols-2{ grid-template-columns:repeat(2,1fr); }
.grid.cols-3{ grid-template-columns:repeat(3,1fr); }
@media(max-width:760px){ .grid.cols-2,.grid.cols-3{ grid-template-columns:1fr; } }
/* Tuiles statistiques (tableau de bord) */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:0 0 20px; }
@media(max-width:600px){ .stats{ grid-template-columns:1fr; } }
.stat{ display:flex; flex-direction:column; gap:2px; padding:14px 18px;
border-radius:var(--r-sm); border:1px solid var(--glass-edge); text-decoration:none;
background:linear-gradient(135deg, var(--chip-bg), transparent);
backdrop-filter:blur(18px) saturate(1.5); -webkit-backdrop-filter:blur(18px) saturate(1.5);
box-shadow:inset 0 1px 1px var(--glass-inner);
transition:transform .2s var(--spring), box-shadow .2s; }
a.stat:hover{ transform:translateY(-2px); text-decoration:none;
box-shadow:0 8px 18px -8px rgba(var(--shadow-ink),.35), inset 0 1px 1px var(--glass-inner); }
.stat b{ font-size:1.5rem; font-weight:900; color:var(--blue-dk); line-height:1.1; }
.stat span{ font-size:var(--fs-xs); color:var(--muted); }
/* ─── Formulaires (charte §24.1 — champs verre) ─────────────────── */
label{ display:block; font-weight:600; font-size:.86rem; margin:14px 0 5px; color:var(--blue-dk); }
label .opt{ font-weight:400; color:var(--muted); }
input[type=text],input[type=email],input[type=password],input[type=file],
input[type=number],input[type=date],select,textarea{
width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:14px;
font:inherit; background:var(--field-bg); color:var(--ink);
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);
transition:background .25s, border-color .25s, box-shadow .25s var(--ease); }
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{
box-shadow:inset 0 1px 1px rgba(190,212,238,.15); }
textarea{ resize:vertical; min-height:90px; }
input:focus,select:focus,textarea:focus{ outline:2px solid var(--blue); outline-offset:1px;
border-color:var(--blue); background:var(--field-focus); }
select option{ color:var(--ink); background:var(--field-focus); }
.hint{ font-size:var(--fs-sm); color:var(--muted); margin-top:4px; }
/* ─── Boutons : pilule 999px, 2 niveaux (charte §24.1) ──────────── */
.btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px;
border:1px solid var(--glass-edge); border-radius:999px; padding:10px 20px; font:inherit;
font-weight:700; cursor:pointer; color:var(--blue-dk); text-decoration:none;
transition:transform .25s var(--spring), box-shadow .25s, background .25s; }
.btn:hover{ text-decoration:none; }
/* Principal : verre teinté rose (charte §23.5) */
.btn.accent{ color:#fff; border-color:rgba(255,255,255,.45);
text-shadow:0 1px 2px rgba(0,0,0,.25); }
/* Secondaire : verre clair — .ghost conservé comme alias */
.btn.sm{ padding:6px 14px; font-size:var(--fs-sm); }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }
.btn-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
/* ─── Notices / alertes ─────────────────────────────────────────── */
/* Notice = rappel permanent : discret, filet rose, pas d'aplat criard */
.notice{ position:relative; border:1px solid var(--line); border-left:3px solid var(--rose);
background:var(--chip-bg); color:var(--muted);
backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
padding:10px 14px; border-radius:var(--r-sm); font-size:var(--fs-sm); font-weight:500; margin:14px 0; }
.alert{ padding:11px 14px; border-radius:var(--r-sm); font-size:var(--fs-sm); font-weight:600; margin:12px 0;
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.warn{ background:var(--warn-bg); color:var(--warn-ink); border-color:rgba(47,107,255,.25); }
/* ─── Badges : pilule + point couleur (charte §24.1) ────────────── */
.badge{ display:inline-flex; align-items:center; gap:6px; padding:2px 10px; border-radius:999px;
font-size:var(--fs-xs); font-weight:700; background:var(--chip-bg); color:var(--ink);
border:1px solid var(--line);
backdrop-filter:blur(8px) saturate(1.5); -webkit-backdrop-filter:blur(8px) saturate(1.5);
box-shadow:inset 0 1px 1px var(--glass-inner), 0 2px 6px -2px rgba(var(--shadow-ink),.25); }
.badge::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor;
flex:0 0 auto; opacity:.85; }
.badge.brouillon{ background:rgba(94,114,134,.16); color:var(--muted); border-color:transparent; }
.badge.finalise{ background:var(--ok-bg); color:var(--ok-ink); border-color:transparent; }
.badge.archive{ background:rgba(94,114,134,.12); color:var(--muted2); border-color:transparent; }
/* ─── Tableaux (charte §24.1) ───────────────────────────────────── */
.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; }
table{ width:100%; border-collapse:separate; border-spacing:0; font-size:var(--fs-sm); }
th,td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
thead th{ background:rgba(18,60,124,.09); color:var(--blue-dk); font-weight:700;
font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.4px; white-space:nowrap;
border-bottom:1.5px solid rgba(18,60,124,.18);
box-shadow:inset 0 1px 0 rgba(255,255,255,.4); }
[data-theme="dark"] thead th{ background:rgba(157,184,218,.12);
border-bottom-color:rgba(157,184,218,.25); box-shadow:inset 0 1px 0 rgba(157,184,218,.22); }
thead th:first-child{ border-top-left-radius:12px; }
thead th:last-child{ border-top-right-radius:12px; }
tbody tr:nth-child(even) td{ background:rgba(18,60,124,.03); }
[data-theme="dark"] tbody tr:nth-child(even) td{ background:rgba(157,184,218,.05); }
tbody tr{ transition:background .15s; }
tbody tr:hover td{ background:var(--hover-wash); }
/* Empilement cartes sous 560px : tables .rtable avec data-label */
@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;
background:transparent !important; }
.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 tbody td:empty{ display:none; }
}
/* ─── Tuiles de choix (création) ────────────────────────────────── */
.tiles{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media(max-width:600px){ .tiles{ grid-template-columns:1fr; } }
.tile{ border:1.5px solid var(--line); border-radius:var(--r-sm); padding:14px 16px; cursor:pointer;
background:var(--chip-bg);
backdrop-filter:blur(14px) saturate(1.5); -webkit-backdrop-filter:blur(14px) saturate(1.5);
box-shadow:inset 0 1px 1px var(--glass-inner);
transition:transform .2s var(--spring), border-color .2s, background .2s, box-shadow .2s; }
.tile:hover{ border-color:var(--blue); transform:translateY(-2px);
box-shadow:0 8px 18px -8px rgba(var(--shadow-ink),.3), inset 0 1px 1px var(--glass-inner); }
.tile input{ display:none; }
.tile.checked{ border-color:var(--rose); background:rgba(235,102,139,.07);
box-shadow:0 0 0 1px rgba(235,102,139,.25), inset 0 1px 1px var(--glass-inner); }
[data-theme="dark"] .tile.checked{ background:rgba(241,148,174,.12); }
.tile b{ display:block; color:var(--blue-dk); }
.tile span{ font-size:var(--fs-sm); color:var(--muted); }
/* ─── Compteur de caractères ────────────────────────────────────── */
.counter{ font-size:var(--fs-xs); color:var(--muted); text-align:right; margin-top:3px; }
.counter.over{ color:var(--err-ink); font-weight:700; }
textarea.over,input.over{ border-color:var(--rose-dk); }
/* ─── Connexion : scène + carte verre ───────────────────────────── */
.login-bg{ min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:20px; }
.login-card{ position:relative; isolation:isolate; width:100%; max-width:420px;
padding:30px 28px 24px; border-radius:var(--r-lg);
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 24px 60px -18px rgba(var(--shadow-ink),.32),
inset 0 1px 1px var(--glass-inner);
animation:rise .6s var(--ease) both; }
.login-card .logo{ display:flex; flex-direction:column; align-items:center; gap:10px;
text-align:center; margin-bottom:4px; font-size:1.15rem; font-weight:900;
letter-spacing:-.02em; color:var(--blue-dk); line-height:1.05; }
.login-card .logo img{ width:64px; height:64px; object-fit:contain;
filter:drop-shadow(0 6px 16px rgba(var(--shadow-ink),.25)); }
[data-theme="dark"] .login-card .logo img{ filter:brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0,0,0,.5)); }
.login-card .logo span{ color:var(--rose-dk); }
.login-card .tag{ text-align:center; color:var(--muted2); font-size:.62rem; font-weight:700;
letter-spacing:1.6px; text-transform:uppercase; margin-bottom:20px; }
/* ─── Étapes / onglets (chips verre) ────────────────────────────── */
.steps{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; font-size:var(--fs-xs); }
.steps .s{ display:inline-flex; align-items:center; padding:7px 14px; border-radius:999px;
font-weight:700; color:var(--blue); background:var(--chip-bg); border:1px solid var(--line);
text-decoration:none;
backdrop-filter:blur(14px) saturate(1.5); -webkit-backdrop-filter:blur(14px) saturate(1.5);
box-shadow:inset 0 1px 1px var(--glass-inner);
transition:transform .2s var(--spring), background .2s, color .2s; }
.steps a.s{ text-decoration:none; }
.steps a.s:hover{ text-decoration:none; transform:translateY(-1px); }
.steps .s.active{ color:#fff; border-color:transparent; text-shadow:0 1px 2px rgba(0,0,0,.25);
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)); }
.steps .s.done{ background:var(--ok-bg); color:var(--ok-ink); border-color:transparent; }
/* ─── Checklist ─────────────────────────────────────────────────── */
.checklist .grp{ margin-bottom:18px; }
.checklist label.chk{ display:flex; gap:10px; align-items:flex-start; font-weight:400;
color:var(--ink); padding:8px 0; border-bottom:1px solid var(--line); cursor:pointer; }
.checklist input[type=checkbox]{ width:auto; margin-top:3px; accent-color:var(--rose); }
.checklist .grp h4{ color:var(--blue-dk); font-size:.9rem; font-weight:800; margin:0 0 6px; }
/* ─── Bloc prompt ───────────────────────────────────────────────── */
pre.prompt{ background:var(--blue-night); color:#dce6f2; padding:18px; border-radius:var(--r-sm);
border:1px solid rgba(157,184,218,.2);
white-space:pre-wrap; word-break:break-word; font-size:13px; line-height:1.55;
max-height:480px; overflow:auto; }
[data-theme="dark"] pre.prompt{ background:#050e1e; }
.summary{ display:flex; gap:18px; flex-wrap:wrap; font-size:var(--fs-sm); margin-bottom:14px; }
.summary div b{ color:var(--blue-dk); }
/* ─── Gestion des comptes (admin) ───────────────────────────────── */
.user-card{ padding:18px 20px; }
.user-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.u-id{ display:flex; flex-direction:column; min-width:0; }
.u-id b{ color:var(--blue-dk); font-size:.98rem; }
.u-id .u-me{ color:var(--rose-dk); font-weight:700; font-size:var(--fs-xs); }
.u-mail{ color:var(--muted); font-size:var(--fs-sm); overflow:hidden; text-overflow:ellipsis; }
.u-badges{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.u-meta{ color:var(--muted2); font-size:var(--fs-xs); }
.u-edit{ margin-top:10px; border-top:1px solid var(--line); padding-top:4px; }
.u-edit > summary{ cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:7px;
padding:8px 2px; font-size:var(--fs-sm); font-weight:700; color:var(--blue); }
.u-edit > summary::-webkit-details-marker{ display:none; }
.u-edit > summary::before{ content:"▸"; color:var(--rose); transition:transform .2s; }
.u-edit[open] > summary::before{ transform:rotate(90deg); }
.u-inline{ margin-top:14px; border-top:1px dashed var(--line); padding-top:4px; }
.u-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:4px; }
.u-row input, .u-row select{ flex:1 1 220px; width:auto; }
.u-row .btn{ flex:0 0 auto; }
.u-danger{ margin-top:14px; border-top:1px dashed rgba(201,87,119,.35); padding-top:4px; }
.u-danger label{ color:var(--rose-dk); }
.btn.danger{ color:var(--err-ink); border-color:rgba(201,87,119,.35);
background:linear-gradient(-75deg, rgba(255,255,255,.08), rgba(255,255,255,.2), rgba(255,255,255,.08)),
rgba(201,87,119,.14); }
/* ─── Pied de page ──────────────────────────────────────────────── */
footer.wrap{ color:var(--muted2); font-size:var(--fs-xs); text-align:center; padding:18px 0 40px; }
@keyframes rise{ from{opacity:0;transform:translateY(24px);} to{opacity:1;transform:translateY(0);} }
/* ════════════════════════════════════════════════════════════════
VERRE 2026 MAX (charte §23) — bord taillé conic + reflet balayant
+ appui 3D sur les éléments interactifs. Repris de Mes Frais.
════════════════════════════════════════════════════════════════ */
@property --angle-1{ syntax:""; inherits:false; initial-value:-75deg; }
@property --angle-2{ syntax:""; inherits:false; initial-value:-45deg; }
:root{ --v-ease:cubic-bezier(.25,1,.5,1); --v-time:.4s; }
/* ── 1) BASE VERRE : boutons, pilules nav, chips, tuiles, stats ── */
.btn, .tb-btn, .mainnav a, .steps .s, .tile, .stat{
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"] .btn, [data-theme="dark"] .tb-btn,
[data-theme="dark"] .mainnav a, [data-theme="dark"] .steps .s,
[data-theme="dark"] .tile, [data-theme="dark"] .stat{
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 » (mise au point) */
.btn:hover, .tb-btn:hover, .mainnav a:hover, .steps a.s: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 */
.btn:active, .tb-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 ──────────────── */
.btn::before, .tb-btn::before, .mainnav a::before, .steps .s::before,
.tile::before, .stat::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"] .btn::before, [data-theme="dark"] .tb-btn::before,
[data-theme="dark"] .mainnav a::before, [data-theme="dark"] .steps .s::before,
[data-theme="dark"] .tile::before, [data-theme="dark"] .stat::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); }
.btn:hover::before, .tb-btn:hover::before, .mainnav a:hover::before{ --angle-1:-125deg; }
.btn:active::before, .tb-btn:active::before{ --angle-1:-75deg; }
/* ── 3) REFLET BALAYANT (mix-blend screen) ──────────────────────── */
.btn::after, .tb-btn::after, .mainnav a::after, .steps .s::after,
.tile::after, .stat::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;
transition:background-position .5s var(--v-ease), --angle-2 .5s var(--v-ease); }
.btn:hover::after, .tb-btn:hover::after, .mainnav a:hover::after{ background-position:25% 50%; }
.btn:active::after, .tb-btn:active::after{ background-position:50% 15%; --angle-2:-15deg; }
/* ── 4) VARIANTES TEINTÉES (hiérarchie conservée) ───────────────── */
/* Action principale : rose (charte §23.5) */
.btn.accent{
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)); }
[data-theme="dark"] .btn.accent{
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)); }
/* Nav active : bleu */
.mainnav a.active{ color:#fff; border-color:transparent; text-shadow:0 1px 2px rgba(0,0,0,.25);
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)); }
/* ── 5) CARTES, HÉROS, TOPBAR : bord taillé rotatif au survol ───── */
.card::before, .login-card::before, .hero::before, .topbar::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, .hero:hover::before{ --angle-1:-125deg; }
/* Tuile cochée : verre teinté rose léger (texte encre conservé) */
.tile.checked{ border-color:var(--rose);
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,.14), rgba(201,87,119,.10)); }
[data-theme="dark"] .tile.checked{
background:linear-gradient(-75deg, rgba(157,184,218,.06), rgba(157,184,218,.16), rgba(157,184,218,.06)),
linear-gradient(135deg, rgba(241,148,174,.18), rgba(235,102,139,.12)); }
/* ── 6) GARDE-FOUS (charte §23.6) ───────────────────────────────── */
.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); }
/* Mobile : perf + angles statiques + press simple */
@media(max-width:640px){
.card, .login-card, .hero{ backdrop-filter:blur(18px) saturate(1.5);
-webkit-backdrop-filter:blur(18px) saturate(1.5); }
.halo{ animation:none !important; filter:blur(70px); }
.grain{ display:none; }
.btn::before,.tb-btn::before,.mainnav a::before,.steps .s::before,
.tile::before,.stat::before,.btn::after,.tb-btn::after,.mainnav a::after,
.steps .s::after,.tile::after,.stat::after,
.card::before,.login-card::before,.hero::before,.topbar::before{ transition:none; }
.btn:active,.tb-btn:active{ transform:scale(.96); }
/* Cibles tactiles ≥ 44px (charte §24.4) */
.btn{ min-height:44px; }
.btn.sm{ min-height:44px; }
.tb-btn{ height:44px; min-width:44px; width:44px; padding:0; }
.tb-btn:not(.hub-return) span{ display:none; } /* « Quitter » → icône seule (title conservé) */
.tb-btn.hub-return{ width:auto; padding:0 12px; }
.mainnav a{ height:44px; padding:0 14px; }
.topbar{ margin:10px 10px 0; padding:6px 10px; gap:8px; }
.mainnav{ margin:8px 10px 0; }
.topbar .brand{ gap:9px; }
.topbar .brand img{ width:34px; height:34px; }
.topbar .brand .tt b{ font-size:.95rem; }
.topbar .brand .tt > span{ display:none; }
.topbar .user{ display:none; } /* nom masqué : jamais tronqué */
.wrap{ margin:18px auto; padding:0 14px; }
.card{ padding:18px 16px; }
}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
transition-duration:.15s !important; }
.halo{ animation:none !important; }
.btn::before,.tb-btn::before,.mainnav a::before,.steps .s::before,
.tile::before,.stat::before,.btn::after,.tb-btn::after,.mainnav a::after,
.steps .s::after,.tile::after,.stat::after,
.card::before,.login-card::before,.hero::before,.topbar::before{ transition:none; }
.btn:active,.tb-btn:active{ transform:none; }
}
/* Fallback sans backdrop-filter : surfaces opaques lisibles */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.card, .login-card, .topbar, .hero, .tile, .stat{ background:var(--field-focus); }
input,select,textarea{ background:var(--field-focus); }
}
/* ─── Accessibilité : focus clavier visible partout (§24.4) ─────── */
a:focus-visible, button:focus-visible, summary:focus-visible,
[type=checkbox]:focus-visible, .btn:focus-visible, .tb-btn:focus-visible,
.mainnav a:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
/* ─── Sélecteurs : VERRE 2026 MAX (recette des boutons §23) ───────
Pilule verre : dégradé -75°, blur+saturation, double rehaut interne,
ombre portée, « mise au point » au survol. Un