/* NXGS Hub — thème « Verre », la mise en page du dashboard running :
   une fenêtre de verre (menu en colonne, en-tête, contenu en cartes blanches) et la colonne « Ma journée » en verre à droite.
   Dans le navigateur : un fond d'écran derrière. Dans l'application NXGS : aucun fond, le bureau se voit autour des bulles. */

[data-theme="vitre"] {
  --ink: #121110;
  --deep: rgba(0, 0, 0, .28);
  --raise: rgba(255, 255, 255, .07);
  --raise-2: rgba(255, 255, 255, .1);
  --raise-3: rgba(255, 255, 255, .16);
  --line: rgba(255, 255, 255, .1);
  --line-2: rgba(255, 255, 255, .17);
  --text: #f6f7f6;
  --muted: rgba(246, 247, 246, .72);
  --dim: rgba(246, 247, 246, .5);
  --green: #3ddc84; --green-deep: #1e9e5a; --green-ink: #04170b; --green-soft: rgba(61, 220, 132, .16);
  --red: #ff8a7e; --red-soft: rgba(255, 122, 110, .16);
  --amber: #f5c04a; --amber-soft: rgba(245, 192, 74, .16);
  --blue: #8cbcff; --blue-soft: rgba(124, 178, 255, .16);
  --violet: #c2adff; --violet-soft: rgba(180, 156, 255, .17);
  --rail: transparent; --shadow: rgba(0, 0, 0, .55);
  --mark-a: #ffffff; --mark-b: #3ddc84;
  --cut: 0px; --cut-s: 0px;
  --bevel: inset(0 round 14px);
  --bevel-s: inset(0 round 10px);
  --slant: inset(0 round 999px);
  --glass: rgba(34, 33, 32, .58);
  --glass-in: rgba(0, 0, 0, .26);
  --glass-edge: rgba(255, 255, 255, .14);
  --blur: blur(30px) saturate(140%);
  --wall-img: url("/static/img/fonds/salon.jpg");
  color-scheme: dark;
}
/* Dans l'application, fenêtre transparente : pas de fond, des bulles un peu plus opaques pour rester lisibles */
[data-theme="vitre"].fond-bureau { --glass: rgba(26, 26, 25, .78); --glass-in: rgba(0, 0, 0, .3); }
[data-theme="vitre"].fond-bureau, [data-theme="vitre"].fond-bureau body { background: transparent; }
[data-theme="vitre"].fond-bureau body::before { display: none; }

[data-theme="vitre"] body { background: #121110; font-size: 14px; padding-bottom: 0; }
[data-theme="vitre"] body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: #121110 var(--wall-img) center / cover no-repeat; }
[data-theme="vitre"] ::selection { background: rgba(61, 220, 132, .35); }

/* ---------- La scène : fenêtre + colonne de droite ---------- */
.vt .scene { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 14px; align-items: start; max-width: 1640px; margin: 0 auto; padding: 28px 28px 32px; }
.vt .win, .vt .dayrail, [data-theme="vitre"] .auth {
  background: var(--glass); border: 1px solid var(--glass-edge);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 40px 80px -30px rgba(0, 0, 0, .7);
}
.vt .win { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 16px; padding: 14px 20px 22px 14px; border-radius: 26px; min-width: 0; min-height: calc(100vh - 60px); }

/* Menu en colonne, à l'intérieur de la fenêtre */
.vt .rail { position: sticky; top: 14px; align-self: start; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 0 12px; min-height: calc(100vh - 92px); border-radius: 18px; background: var(--glass-in); border: 1px solid rgba(255, 255, 255, .07); }
.vt .rail-logo { display: grid; place-items: center; margin-bottom: 22px; }
.vt .rail-logo .mark { width: 22px; height: 22px; }
.vt .rb { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: var(--muted); transition: background .15s, color .15s; }
.vt .rb .i { width: 17px; height: 17px; }
.vt .rb:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.vt .rb.on { background: var(--green-deep); color: #fff; box-shadow: 0 8px 18px -8px var(--green-deep); }
.vt .rb .tip { position: absolute; left: calc(100% + 12px); top: 50%; transform: translate(-4px, -50%); padding: 5px 10px; border-radius: 8px; background: rgba(10, 12, 11, .95); color: #fff; font-size: 12px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 30; }
.vt .rb:hover .tip, .vt .rb:focus-visible .tip { opacity: 1; transform: translate(0, -50%); }
.vt .rail-gap { flex: 1; }

/* En-tête dans la fenêtre : titre à gauche, recherche et boutons à droite */
.vt .win-body { min-width: 0; display: flex; flex-direction: column; gap: 18px; padding-top: 4px; }
.vt .win-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vt .win-title { margin-right: auto; min-width: 0; }
.vt .win-title h1 { font: 700 20px/1.25 var(--sans); letter-spacing: -.01em; color: #fff; }
.vt .win-title p { margin-top: 2px; font-size: 12.5px; color: var(--dim); }
.vt .page-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.vt .search-trigger { flex: 0 1 260px; margin: 0; height: 36px; padding: 0 14px; gap: 8px; border-radius: 18px; clip-path: none; border: 1px solid rgba(255, 255, 255, .08); background: rgba(0, 0, 0, .32); color: var(--dim); font-size: 12.5px; }
.vt .search-trigger:hover { color: #fff; }
.vt .search-trigger .i { width: 14px; height: 14px; }
.vt kbd { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); color: var(--dim); }
.vt .round-btn { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--green); color: var(--green-ink); cursor: pointer; }
.vt .round-btn .i { width: 16px; height: 16px; stroke-width: 2.2; }
.vt .me summary.avatar { width: 36px; height: 36px; border-radius: 50%; clip-path: none; background: linear-gradient(135deg, #3ddc84, #1e9e5a); color: #04170b; font-weight: 700; }
.vt .main { width: auto; max-width: none; margin: 0; padding: 0; gap: 16px; }
.vt .main > .hello { display: none; }

/* ---------- Cartes blanches ---------- */
[data-theme="vitre"] :is(.card, .slab, .tile, .note, .doc, .kcard, .pcard, .profile, .guide, .empty, .day, .kpis > div, .auth-card, .palette-box, .quick-menu) {
  --deep: #f5f6f5; --raise: #ffffff; --raise-2: #f3f5f4; --raise-3: #e8ebe9;
  --line: #eceeed; --line-2: #dde1df;
  --text: #121513; --muted: #5d6661; --dim: #7c847f;
  --green: #1e9e5a; --green-ink: #ffffff; --green-soft: rgba(30, 158, 90, .1);
  --red: #c0392b; --red-soft: rgba(192, 57, 43, .08);
  --amber: #a56a00; --amber-soft: rgba(224, 138, 18, .12);
  --blue: #2f63cc; --blue-soft: rgba(47, 99, 204, .09);
  --violet: #6a46d0; --violet-soft: rgba(106, 70, 208, .09);
  --mark-a: #0d0d0d; --mark-b: #1e9e5a;
  color: var(--text); color-scheme: light;
}
[data-theme="vitre"] :is(.card, .slab, .tile, .note, .doc, .kcard, .pcard, .profile, .guide, .empty, .day, .kpis > div) {
  background: #ffffff; clip-path: none; border-radius: 14px; box-shadow: 0 12px 30px -20px rgba(0, 0, 0, .7);
}
[data-theme="vitre"] .card { padding: 18px 20px; }
[data-theme="vitre"] .card-head h3, [data-theme="vitre"] .card-title { font-size: 14px; font-weight: 700; }
[data-theme="vitre"] :is(.tile, .kcard, .pcard, .kpis > div) { transition: transform .35s cubic-bezier(.2, .9, .25, 1.25), box-shadow .3s; }
[data-theme="vitre"] :is(.tile, .pcard, .kpis > div):hover { transform: translateY(-5px); box-shadow: 0 22px 32px -18px rgba(0, 0, 0, .75); }
[data-theme="vitre"] .pcard { box-shadow: inset 0 3px 0 var(--pc, transparent), 0 12px 30px -20px rgba(0, 0, 0, .7); }

/* Chiffres : cartes séparées, comme Calories / Heart Rate / Steps / Sleep */
[data-theme="vitre"] .kpis { background: none; border: 0; gap: 12px; }
[data-theme="vitre"] .kpis > div { border-left: 0; padding: 13px 15px; gap: 6px; }
[data-theme="vitre"] .kpis dt { font-weight: 700; color: var(--text); font-size: 12px; }
[data-theme="vitre"] .kpis dd { color: var(--green); font-weight: 800; font-size: 22px; }
[data-theme="vitre"] .kpis > .fig-red dd { color: var(--red); }
[data-theme="vitre"] .kpis > .fig-amber dd { color: var(--amber); }
[data-theme="vitre"] .kpis small { font-size: 11px; }

/* Titres de blocs : petit trait vert, comme « Diet Plan » */
[data-theme="vitre"] .block-head h2, [data-theme="vitre"] .slab-row > h2 { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: #fff; }
[data-theme="vitre"] .block-head h2::before, [data-theme="vitre"] .slab-row > h2::before { content: ""; width: 3px; height: 13px; border-radius: 2px; background: var(--green); }
[data-theme="vitre"] .card .block-head h2, [data-theme="vitre"] .card .slab-row > h2 { color: var(--text); }

/* ---------- Colonne « Ma journée » ---------- */
.vt .dayrail { position: sticky; top: 28px; flex: none; height: auto; max-height: calc(100vh - 56px); overflow-y: auto; padding: 18px 16px 20px; border-radius: 26px; border-left: 1px solid var(--glass-edge); gap: 16px; scrollbar-width: none; }
.vt .dayrail::-webkit-scrollbar { display: none; }
.vt .dr-date { font-size: 16px; }
.vt .dr-clock { font-size: 16px; margin-top: 14px; }
.vt .dr-card, .vt .dr-alert { border-radius: 14px; clip-path: none; }
.vt .dr-card { background: var(--glass-in); padding: 12px; }
.vt .dr-card-main strong { font-size: 13px; }
.vt .dr-btn { font-size: 11.5px; }
.vt .dr-cap-line { border-radius: 12px; overflow: hidden; background: var(--glass-in); border-color: rgba(255, 255, 255, .1); }
.vt .dr-sec h2 { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.vt .dr-sec h2::before { content: ""; width: 3px; height: 13px; border-radius: 2px; background: var(--green); }

/* ---------- Boutons, menus, messages ---------- */
[data-theme="vitre"] .btn { border-radius: 999px; min-height: 36px; padding: 0 16px; font-size: 13px; }
[data-theme="vitre"] .btn-ghost { background: rgba(255, 255, 255, .1); }
[data-theme="vitre"] .card .btn-ghost { background: var(--raise-2); }
[data-theme="vitre"] :is(.quick-menu, .palette-box) { clip-path: none; border-radius: 16px; background: #ffffff; box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .6); }
[data-theme="vitre"] .quick-menu a:hover, [data-theme="vitre"] .quick-menu button:hover { background: var(--raise-2); border-radius: 10px; }
[data-theme="vitre"] .toast { border-radius: 14px; clip-path: none; }
[data-theme="vitre"] :where(input, select, textarea) { border-radius: 10px; }
[data-theme="vitre"] .avatar { clip-path: none; border-radius: 50%; }

/* ---------- Connexion : une bulle de verre, la carte blanche à droite ---------- */
[data-theme="vitre"] .bare-main { padding: 32px 20px; }
[data-theme="vitre"] .auth { max-width: 980px; min-height: 560px; clip-path: none; border-radius: 28px; padding: 14px; gap: 14px; grid-template-columns: minmax(0, 1fr) minmax(340px, 430px); }
[data-theme="vitre"] .auth-art { background: var(--glass-in); padding: 32px; border-radius: 18px; }
[data-theme="vitre"] .art-grid { display: none; }
[data-theme="vitre"] .art-x { width: 44%; top: 16%; right: 14%; }
[data-theme="vitre"] .art-txt strong { color: #fff; font-size: 52px; letter-spacing: .12em; }
[data-theme="vitre"] .art-txt span { color: var(--muted); }
[data-theme="vitre"] .auth-card { background: #ffffff; border-radius: 18px; padding: 40px 36px; }
[data-theme="vitre"] .bare-main > .auth-card { clip-path: none; }
[data-theme="vitre"] .auth-card h1 { font-size: 26px; }

/* ---------- Choix du fond (Réglages > Apparence, dans le navigateur) ---------- */
.fonds { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.fonds button, .fond-upload { position: relative; width: 84px; height: 54px; border-radius: 12px; border: 0; padding: 0; cursor: pointer; background: #222 center / cover; }
.fonds button[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1e9e5a; }
.fonds button span { position: absolute; left: 6px; bottom: 5px; font-size: 11px; font-weight: 600; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.fonds [data-fond="bureau"] { background: linear-gradient(135deg, rgba(0, 0, 0, .06), rgba(0, 0, 0, .14)); border: 1.5px solid var(--line-2); }
.fonds [data-fond="bureau"] span { color: var(--text); text-shadow: none; }
.fond-upload { display: grid; place-items: center; border: 1.5px dashed var(--line-2); background: var(--raise-2); color: var(--text); font-size: 11.5px; font-weight: 600; }
.fond-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.fond-upload:focus-within { outline: 2px solid var(--green); outline-offset: 2px; }
.tp-vitre { background: #3a2f27 url("/static/img/fonds/salon-mini.jpg") center / cover; --p: rgba(255, 255, 255, .92); --a: #3ddc84; --d: #1e9e5a; }
.tp-vitre i, .tp-vitre b, .tp-vitre u { border-radius: 4px; }

/* ---------- Application NXGS : zone pour déplacer la fenêtre, boutons Windows ---------- */
.app-drag { display: none; }
.in-app .app-drag { display: block; position: fixed; top: 0; left: 0; right: 0; height: 26px; z-index: 200; -webkit-app-region: drag; }
.in-app .vt .scene { padding-top: 34px; }
.in-app.app-darwin .app-drag { left: 80px; }
.in-app .win-top { -webkit-app-region: drag; }
.in-app .win-top :is(a, button, summary, details, input, form, .page-actions) { -webkit-app-region: no-drag; }
.win-ctrl { position: fixed; top: 6px; right: 10px; z-index: 210; display: flex; gap: 4px; -webkit-app-region: no-drag; }
.win-ctrl button { width: 30px; height: 24px; border: 0; border-radius: 7px; background: rgba(20, 20, 20, .55); color: #fff; font: 600 13px/1 system-ui, sans-serif; cursor: pointer; }
.win-ctrl button:hover { background: rgba(255, 255, 255, .22); }
.win-ctrl button[data-w="close"]:hover { background: #e5484d; }

/* ---------- Écrans plus petits ---------- */
@media (max-width: 1180px) {
  .vt .scene { grid-template-columns: minmax(0, 1fr); }
  .vt .dayrail { position: static; max-height: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  [data-theme="vitre"] .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .vt .scene { padding: 10px 10px 24px; gap: 10px; }
  .vt .win { grid-template-columns: minmax(0, 1fr); padding: 10px; border-radius: 22px; min-height: 0; }
  .vt .rail { position: static; flex-direction: row; min-height: 0; padding: 6px 8px; overflow-x: auto; }
  .vt .rail-logo { margin: 0 8px 0 4px; }
  .vt .rail-gap { display: none; }
  .vt .rb .tip { display: none; }
  .vt .search-trigger { flex: 1 1 100%; order: 5; }
  .vt .dayrail { border-radius: 22px; }
  [data-theme="vitre"] .auth { grid-template-columns: minmax(0, 1fr); padding: 10px; }
}
@media (max-width: 420px) { [data-theme="vitre"] .kpis { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { [data-theme="vitre"] :is(.tile, .pcard, .kpis > div):hover { transform: none; } }