/* Onyx · Verre blanc et violet
   Activé par la classe « verre » sur <html> (index.html et login.html), chargé après style.css.
   Retirer cette classe rétablit l'ancien design. Jour : data-theme="light". Nuit : data-theme="dark". */

html.verre { --ease: cubic-bezier(.2, .9, .2, 1); --r-card: 24px; --r-ctl: 14px; }
html.verre[data-theme="light"] {
  --bg: #F4F1FF; --surface: #FBFAFF; --sunk: #EEE9FC;
  --line: rgba(80, 50, 200, .14); --line-soft: rgba(80, 50, 200, .08); --line-strong: rgba(80, 50, 200, .26);
  --ink: #1B1433; --ink-2: #2E2550; --muted: #5A5278;
  --accent: #6D4AFF; --accent-hover: #5B38F0; --on-accent: #FFFFFF;
  --accent-soft: #E9E2FF; --accent-text: #4A2FC4; --accent-link: #5B38F0;
  --nav: rgba(255, 255, 255, .55); --nav-on: rgba(109, 74, 255, .10); --nav-line: rgba(80, 50, 200, .14); --nav-ink: #1B1433; --nav-mu: #5A5278;
  --glass: rgba(255, 255, 255, .55); --glass-hi: rgba(255, 255, 255, .8); --edge: rgba(255, 255, 255, .9);
  --orb1: #B9A4FF; --orb2: #E3D9FF; --orb3: #D2B8FF;
  --sh: 0 10px 40px -12px rgba(80, 50, 200, .25); --shadow: var(--sh); --scrim: rgba(27, 20, 51, .45);
}
html.verre[data-theme="dark"] {
  --bg: #0B0814; --surface: #15112A; --sunk: #100C20;
  --line: rgba(255, 255, 255, .12); --line-soft: rgba(255, 255, 255, .07); --line-strong: rgba(255, 255, 255, .22);
  --ink: #F1EDFF; --ink-2: #D6CFF5; --muted: #ABA3CC;
  --accent: #A58BFF; --accent-hover: #B9A5FF; --on-accent: #140C2E;
  --accent-soft: rgba(165, 139, 255, .16); --accent-text: #D9CEFF; --accent-link: #BBA8FF;
  --nav: rgba(255, 255, 255, .06); --nav-on: rgba(165, 139, 255, .14); --nav-line: rgba(255, 255, 255, .12); --nav-ink: #F1EDFF; --nav-mu: #ABA3CC;
  --glass: rgba(255, 255, 255, .06); --glass-hi: rgba(255, 255, 255, .11); --edge: rgba(255, 255, 255, .16);
  --orb1: #4A2FB5; --orb2: #2A1A6B; --orb3: #5F3AC4; --orb-op: .5;
  --sh: 0 14px 50px -14px rgba(0, 0, 0, .7); --shadow: var(--sh); --scrim: rgba(4, 3, 10, .7);
}

/* Fond : uni teinté et trois halos flous qui dérivent */
html.verre body { background: var(--bg); color: var(--ink); transition: background .5s, color .5s; }
html.verre .orbs { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
html.verre .orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: var(--orb-op, .85); animation: drift 18s ease-in-out infinite alternate; transition: background 1s; translate: calc(var(--px, 0) * 28px) calc(var(--py, 0) * 28px); }
html.verre .o1 { width: 460px; height: 460px; left: -80px; top: -100px; background: var(--orb1); }
html.verre .o2 { width: 520px; height: 520px; right: -120px; bottom: -160px; background: var(--orb3); animation-duration: 23s; animation-delay: -6s; translate: calc(var(--px, 0) * -40px) calc(var(--py, 0) * -40px); }
html.verre .o3 { width: 300px; height: 300px; left: 42%; top: 30%; background: var(--orb2); animation-duration: 15s; animation-delay: -3s; }
@keyframes drift { to { transform: translate(70px, 50px) scale(1.15); } }

/* Verre */
html.verre .card, html.verre .kpi, html.verre .ticket, html.verre .menu-list, html.verre .login-form,
html.verre .side, html.verre .mobile-top, html.verre .tabbar, html.verre .toast:not(.err) {
  background: var(--glass); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid var(--line); box-shadow: var(--sh), inset 0 1px 0 var(--edge); color: var(--ink);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.verre .card, html.verre .kpi, html.verre .ticket, html.verre .menu-list, html.verre .login-form,
  html.verre .side, html.verre .mobile-top, html.verre .tabbar, html.verre .toast:not(.err) { background: var(--surface); }
}
html.verre .card, html.verre .kpi, html.verre .ticket, html.verre .login-form { position: relative; }
html.verre .card::before, html.verre .kpi::before, html.verre .ticket::before, html.verre .login-form::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, -20%), color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
}
html.verre .card:hover::before, html.verre .kpi:hover::before, html.verre .ticket:hover::before, html.verre .login-form:hover::before { opacity: 1; }
html.verre .card.dark { background: var(--glass); color: var(--ink); }
html.verre .card.dark .btn { background: var(--accent); border-color: transparent; color: var(--on-accent); }
html.verre .card.dark p, html.verre .card.dark .muted, html.verre .card.dark .mono { color: var(--muted); }
html.verre .report-list li { border-bottom-color: var(--line); }
html.verre .side, html.verre .mobile-top, html.verre .tabbar { border-radius: 0; box-shadow: none; border-width: 0; }
html.verre .side { border-right-width: 1px; }
html.verre .mobile-top { border-bottom-width: 1px; }
html.verre .tabbar { border-top-width: 1px; }
html.verre .card, html.verre .kpi { transition: opacity .4s, filter .4s, background-color .3s, border-color .3s; }

/* Typographie : légère, beaucoup de vide */
html.verre h1, html.verre .page-title { font-weight: 300; letter-spacing: -.03em; }
html.verre .hello h1 { font-size: 34px; }
html.verre .hello .date, html.verre .hello p { color: var(--muted); }
html.verre .card-head h2, html.verre .rail-head h2 { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
html.verre .main { gap: 28px; }
html.verre .cols { gap: 24px; }
html.verre .card { padding: 24px; gap: 18px; }

/* Navigation */
html.verre .nav a { border-radius: var(--r-ctl); }
html.verre .nav a:hover { background: var(--nav-on); }
html.verre .nav a[aria-current="page"] { background: var(--nav-on); box-shadow: none; color: var(--ink); }
html.verre .nav a[aria-current="page"] svg { color: var(--accent); }
html.verre .brand-mark .p-x1, html.verre .brand-mark .p-x2 { stroke: var(--accent); }


html.verre .side .dot { background: var(--ok); } html.verre .side .dot.warn { background: var(--warn); } html.verre .side .dot.bad { background: var(--bad); }
html.verre .tabbar a[aria-current="page"] { color: var(--accent-link); }

/* Bouton de thème : rond, fondu et rotation soleil / lune */
html.verre .theme-btn { position: relative; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--glass); color: var(--ink); transition: transform .4s var(--ease), background .25s; }
html.verre .theme-btn:hover { transform: rotate(25deg) scale(1.08); background: var(--glass-hi); color: var(--ink); }
html.verre .theme-btn svg { position: absolute; left: 50%; top: 50%; margin: -10px 0 0 -10px; transition: opacity .35s, transform .5s var(--ease); }
html.verre[data-theme="light"] .theme-btn .th-moon { opacity: 0; transform: rotate(-90deg) scale(.4); }
html.verre[data-theme="dark"] .theme-btn .th-sun { opacity: 0; transform: rotate(90deg) scale(.4); }
html.verre .theme-btn[data-pref="auto"]::after { content: ""; position: absolute; right: 7px; bottom: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* Boutons et champs */
html.verre .btn { position: relative; overflow: hidden; border-radius: 999px; border: 1px solid var(--line); background: var(--glass); color: var(--ink); box-shadow: none; transition: transform .25s var(--ease), box-shadow .25s, background .25s, color .25s; }
html.verre .btn:hover { background: var(--glass-hi); color: var(--ink); transform: translateY(-2px); box-shadow: 0 12px 28px -16px var(--accent); }
html.verre .btn:active { transform: scale(.97); box-shadow: none; }
html.verre .btn-primary, html.verre .btn-dark { background: var(--accent); border-color: transparent; color: var(--on-accent); font-weight: 500; box-shadow: none; }
html.verre .btn-primary:hover, html.verre .btn-dark:hover { background: var(--accent); color: var(--on-accent); box-shadow: 0 12px 28px -10px var(--accent); }
html.verre .btn-primary::after, html.verre .btn-dark::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-20deg); transition: left .7s var(--ease); pointer-events: none; }
html.verre .btn-primary:hover::after, html.verre .btn-dark:hover::after { left: 130%; }
html.verre .btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
html.verre .btn-ghost:hover { background: var(--glass-hi); color: var(--ink); box-shadow: none; }
html.verre .input { border-radius: var(--r-ctl); background: var(--glass); border: 1px solid var(--line); box-shadow: none; }
html.verre .input:hover { border-color: var(--line-strong); }
html.verre .input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
html.verre .chip, html.verre .rep-item, html.verre .planbar { background: var(--glass); box-shadow: none; border-color: var(--line); }
html.verre .rep-item[aria-current="true"] { background: var(--accent-soft); border-color: var(--accent); }
html.verre .tabs { background: var(--glass); }
html.verre .tab[aria-current="page"] { background: var(--glass-hi); box-shadow: none; }

/* Le rail du jour : cartes de verre, point violet tant que la nouveauté n'est pas lue */
html.verre .rail::before { height: 1px; background: var(--line-strong); }
html.verre .ticket { border-top: 1px solid var(--line); border-radius: var(--r-card); animation-fill-mode: backwards; transition: transform .5s var(--ease), opacity .4s, border-color .2s, box-shadow .3s; }
html.verre .ticket:hover { transform: translateY(-3px); border-color: var(--accent); }
html.verre .ticket.calm { border-style: dashed; }
html.verre .rail-head .btn { margin-left: auto; }
html.verre .ticket.unread .ticket-title::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--accent); vertical-align: 1px; transition: transform .3s, opacity .3s; }
html.verre .ticket.read .ticket-title { color: var(--muted); font-weight: 500; }
html.verre .ticket.read .ticket-title::before { content: ""; display: inline-block; width: 0; height: 8px; margin-right: 0; }

/* Tâches : colonnes en creux, tâches de verre, coche qui se dessine */
html.verre .col { background: color-mix(in srgb, var(--accent) 5%, transparent); border: 1px solid var(--line-soft); box-shadow: none; border-radius: 18px; }
html.verre .col.over { transform: scale(1.01); }
html.verre .task { background: var(--glass-hi); border: 1px solid var(--line); border-radius: var(--r-ctl); box-shadow: none; }
html.verre .task:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--sh); }
html.verre .task.blocked { border-color: var(--warn-line); }
html.verre .task.dragging { transform: rotate(-1.5deg) scale(1.02); box-shadow: var(--sh); }
html.verre .task-btns button { border-radius: 50%; background: var(--glass); border-color: var(--line); }
html.verre .task-btns button.txt { border-radius: 999px; }
html.verre .tick { position: relative; display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; margin-right: 8px; vertical-align: -6px; border-radius: 50%; border: 1.5px solid var(--muted); background: transparent; cursor: pointer; transition: background .3s var(--ease), border-color .3s var(--ease); }
html.verre .tick::before { content: ""; position: absolute; inset: -11px; }
html.verre .tick svg { width: 12px; height: 12px; stroke: var(--on-accent); stroke-width: 2.4; fill: none; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .35s .1s var(--ease); }
html.verre .tick.on, html.verre .task.ticked .tick { background: var(--accent); border-color: var(--accent); }
html.verre .tick.on svg, html.verre .task.ticked .tick svg { stroke-dashoffset: 0; }
html.verre .tick::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; }
html.verre .task.ticked .tick::after { animation: ring .6s var(--ease); }
@keyframes ring { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(2.4); } }

/* Rapports : pas de grand bloc blanc tant qu'aucun rapport n'est ouvert, puis une « feuille » posée sur le verre */
html.verre .rep-frame:not([src]) { display: none; }
html.verre .rep-frame { border: 1px solid var(--line); box-shadow: var(--sh); border-radius: var(--r-card); }

/* Quand on survole un grand module, les autres s'estompent */
html.verre .main:has(> .cols > .card:hover) > .cols > .card:not(:hover) { opacity: .55; filter: saturate(.7); }

/* Serveur : anneaux qui se remplissent */
html.verre .kpi { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; }
html.verre .kpi > .kpi-top, html.verre .kpi > .kpi-val { grid-column: 1; }
html.verre .kpi > .ring { grid-column: 2; grid-row: 1 / span 2; }
html.verre .kpi-val { font-weight: 300; }
html.verre .ring { position: relative; width: 72px; height: 72px; }
html.verre .ring svg { width: 72px; height: 72px; transform: rotate(-90deg); }
html.verre .ring circle { fill: none; stroke-width: 6; stroke-linecap: round; }
html.verre .ring .bg { stroke: var(--line); }
html.verre .ring .fg { stroke: var(--accent); stroke-dasharray: 100; transition: stroke-dashoffset 1.1s var(--ease); }
html.verre .ring .fg.ok { stroke: var(--ok); } html.verre .ring .fg.warn { stroke: var(--warn); }
html.verre .ring-num { position: absolute; inset: 0; display: grid; place-items: center; font: 300 15px var(--mono); letter-spacing: -.03em; }

/* Notification en pilule de verre */
html.verre .toast { border-radius: 999px; padding: 12px 22px; animation: toast-in .5s var(--ease) both; }
html.verre .toast.err { background: var(--bad); color: #fff; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 30px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* Connexion : une seule carte de verre */
html.verre .login { grid-template-columns: minmax(0, 1fr); place-items: center; }
html.verre .login-side { display: none; }
html.verre .login-main { padding: 24px 16px; }
html.verre .login-form { max-width: 380px; padding: 36px 32px 30px; gap: 20px; border-radius: 24px; animation: rise .9s var(--ease) both; }
html.verre .login-form h1 { font-size: 34px; line-height: 1.1; }
html.verre .login-mobile-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font-weight: 600; letter-spacing: .01em; font-size: 17px; }
html.verre .login-mobile-brand svg { width: 150px; height: auto; }
html.verre .login-form .field { position: relative; }
html.verre .login-form .field .input { height: 52px; padding: 20px 16px 0; }
html.verre .login-form .field label { position: absolute; left: 16px; top: 16px; z-index: 1; font-size: 15px; font-weight: 400; color: var(--muted); pointer-events: none; transition: top .25s var(--ease), font-size .25s var(--ease), color .25s; }
html.verre .login-form .field:has(.input:focus) label, html.verre .login-form .field:has(.input:not(:placeholder-shown)) label, html.verre .login-form .field:has(.input:-webkit-autofill) label { top: 7px; font-size: 11px; letter-spacing: .06em; color: var(--accent-text); }
html.verre .login-form .btn-primary { height: 48px; }
html.verre .login-theme { position: fixed; top: 20px; right: 24px; z-index: 20; }
html.verre .login-form.shake { animation: shake .45s; }
html.verre .login.leaving .login-form { animation: leave .6s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(24px) scale(.97); } }
@keyframes shake { 20% { transform: translateX(-10px); } 40% { transform: translateX(9px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(4px); } }
@keyframes leave { to { opacity: 0; transform: translateY(-30px) scale(1.04); filter: blur(8px); } }

@media (max-width: 860px) {
  html.verre .orb { filter: blur(50px); }
  html.verre .o1 { width: 300px; height: 300px; } html.verre .o2 { width: 340px; height: 340px; } html.verre .o3 { display: none; }
  html.verre .card { padding: 18px; }
  html.verre .hello h1 { font-size: 28px; }
  html.verre .main:has(> .cols > .card:hover) > .cols > .card:not(:hover) { opacity: 1; filter: none; }
  html.verre .login-theme { top: 14px; right: 16px; }
}