/* ═══════════════════════════════════════════════════════════════
   DEV B — SHELL · Design System "Fluent" (variables, effets, chrome)
   ═══════════════════════════════════════════════════════════════ */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{
  font-family:"Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;
  font-size:calc(13px * var(--text-scale));color:var(--text);background:#000;
  user-select:none;-webkit-user-select:none;
}
input,textarea,[contenteditable]{user-select:text;-webkit-user-select:text;font-family:inherit}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}
.hidden{display:none!important}
/* Filet de sécurité : une icône SVG sans règle de taille dédiée prend par défaut
   la taille intrinsèque du navigateur (~300px) au lieu de rester une icône. */
svg{width:16px;height:16px;flex-shrink:0}

:root{--accent:#0078d4;--tbh:48px;--blur-scale:1;--glass-op:1;
  /* Taille de texte système (Paramètres > Personnalisation), 15px par défaut.
     --text-scale (ratio sans unité, dérivé) multiplie TOUTE déclaration
     font-size de l'OS via calc(valeur * var(--text-scale)) — cf. script de
     génération, textes normaux comme textes réduits pour un effet graphique
     restent ainsi proportionnels entre eux quelle que soit la taille choisie. */
  --text-size:15px;--text-scale:1.1538;
}
[data-theme=dark]{
  color-scheme:dark;
  --text:#ffffff;--text2:rgba(255,255,255,.62);
  --mica:color-mix(in srgb,var(--accent) 16%,rgb(36 36 36 / calc(.68 * var(--glass-op))));
  --solid:color-mix(in srgb,var(--accent) 13%,#202020);--solid2:color-mix(in srgb,var(--accent) 13%,#2b2b2b);
  --acrylic:color-mix(in srgb,var(--accent) 16%,rgb(43 43 43 / calc(.52 * var(--glass-op))));--acrylic2:color-mix(in srgb,var(--accent) 16%,rgb(58 58 58 / calc(.46 * var(--glass-op))));
  --stroke:color-mix(in srgb,var(--accent) 18%,rgba(255,255,255,.12));--stroke2:color-mix(in srgb,var(--accent) 22%,rgba(255,255,255,.20));
  --hover:color-mix(in srgb,var(--accent) 20%,rgba(255,255,255,.055));--press:color-mix(in srgb,var(--accent) 20%,rgba(255,255,255,.03));
  --card:color-mix(in srgb,var(--accent) 14%,rgb(255 255 255 / calc(.045 * var(--glass-op))));--shadow:rgba(0,0,0,.5);
  --field:color-mix(in srgb,var(--accent) 14%,rgba(255,255,255,.06));--track:rgba(255,255,255,.28);
  --glass-hi:rgba(255,255,255,.55);--glass-lo:rgba(0,0,0,.45);--glass-sheen:rgba(255,255,255,.24);
}
[data-theme=light]{
  color-scheme:light;
  --text:#1b1b1b;--text2:rgba(0,0,0,.55);
  --mica:color-mix(in srgb,var(--accent) 12%,rgb(249 249 249 / calc(.72 * var(--glass-op))));
  --solid:color-mix(in srgb,var(--accent) 10%,#f3f3f3);--solid2:color-mix(in srgb,var(--accent) 10%,#fbfbfb);
  --acrylic:color-mix(in srgb,var(--accent) 12%,rgb(248 248 248 / calc(.58 * var(--glass-op))));--acrylic2:color-mix(in srgb,var(--accent) 12%,rgb(255 255 255 / calc(.48 * var(--glass-op))));
  --stroke:color-mix(in srgb,var(--accent) 16%,rgba(0,0,0,.10));--stroke2:color-mix(in srgb,var(--accent) 20%,rgba(0,0,0,.18));
  --hover:color-mix(in srgb,var(--accent) 16%,rgba(0,0,0,.045));--press:color-mix(in srgb,var(--accent) 16%,rgba(0,0,0,.02));
  --card:color-mix(in srgb,var(--accent) 10%,rgb(255 255 255 / calc(.55 * var(--glass-op))));--shadow:rgba(0,0,0,.28);
  --field:color-mix(in srgb,var(--accent) 10%,rgba(255,255,255,.7));--track:rgba(0,0,0,.25);
  --glass-hi:rgba(255,255,255,.95);--glass-lo:rgba(0,0,0,.14);--glass-sheen:rgba(255,255,255,.68);
}

/* ---- Acrylique : flou + saturation + grain typique de Win11 ---- */
.acrylic{
  position:relative;
  background:var(--acrylic);
  -webkit-backdrop-filter:blur(calc(34px * var(--blur-scale))) saturate(2.1) contrast(1.08);
  backdrop-filter:blur(calc(34px * var(--blur-scale))) saturate(2.1) contrast(1.08);
}
.acrylic::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.panel{position:fixed;border-radius:8px;border:1px solid var(--stroke2);
  box-shadow:0 18px 46px var(--shadow),0 2px 8px rgba(0,0,0,.25);
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .18s ease,transform .22s cubic-bezier(.2,.8,.2,1)}
.panel.show{opacity:1;transform:none;pointer-events:auto}

/* ---- Effet "aqua glass" : reflet vitré sur les boutons de l'interface ---- */
.cap,.toolbar-btn,.btn,.qs-t,#l-go,#st-power{
  background-image:linear-gradient(180deg,var(--glass-sheen),rgba(255,255,255,0) 60%);
  box-shadow:inset 0 1px 0 var(--glass-hi),inset 0 -1px 1px var(--glass-lo);
  transition:background-color .12s,box-shadow .12s,transform .08s;
}
.tb-btn,#bell,.tray-g,#clock{transition:background-color .12s,transform .08s}
.cap:active,.toolbar-btn:active,.btn:active,.qs-t:active,#l-go:active,#st-power:active{
  transform:translateY(1px);
  box-shadow:inset 0 1px 3px var(--glass-lo);
}
.tb-btn:active,#bell:active,.tray-g:active,#clock:active{transform:translateY(1px)}
[data-glass="off"] .cap,[data-glass="off"] .toolbar-btn,[data-glass="off"] .btn,[data-glass="off"] .qs-t,[data-glass="off"] #l-go,[data-glass="off"] #st-power{
  background-image:none;box-shadow:none;
}
[data-glass="off"] .cap:active,[data-glass="off"] .toolbar-btn:active,[data-glass="off"] .btn:active,[data-glass="off"] .qs-t:active,[data-glass="off"] #l-go:active,[data-glass="off"] #st-power:active{
  transform:none;box-shadow:none;
}
[data-glass="off"] .window::before{display:none}

/* ---- Scrollbars façon Win11 ---- */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-thumb{background:var(--track);border-radius:6px;border:4px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{border-width:3px;background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}