/* ══════════════════════════════════════════════════════════════════════════
   vista.css — habillage « LifeOS Vesta »
   ──────────────────────────────────────────────────────────────────────────
   Récompense du grand chelem : quand TOUS les succès sont débloqués, le
   joueur peut troquer le châssis LifeOS 95 contre du verre translucide.

   RÈGLE ABSOLUE DE CE FICHIER : chaque sélecteur commence par
   `:root[data-skin="vista"]`. Sans cet attribut — c'est-à-dire par défaut,
   pour tout le monde — pas une seule règle ne s'applique et l'aspect
   LifeOS 95 reste rigoureusement intact.

   Ce qui change : les biseaux durs deviennent des bords arrondis et du verre
   translucide, les barres de titre vertes deviennent du verre bleu, la barre
   des tâches devient une réglette sombre, et le bouton Démarrer devient la
   perle ronde. Ce qui ne change PAS : la mise en page, les tailles, les
   polices du RÉCIT (le jeu reste lisible à l'identique) et l'adaptation
   mobile — vista.css ne touche à aucune géométrie.
   ══════════════════════════════════════════════════════════════════════════ */

:root[data-skin="vista"] {
  --v-glass:        rgba(238, 246, 255, 0.82);
  --v-glass-deep:   rgba(206, 228, 248, 0.72);
  --v-edge:         rgba(255, 255, 255, 0.85);
  --v-border:       rgba(120, 160, 200, 0.75);
  --v-ink:          #14324f;
  --v-accent:       #2f8fd8;
  --v-accent-deep:  #10527f;
  --v-panel:        #f2f6fa;
  --v-panel-2:      #e4ecf5;
  --v-shadow:       0 10px 30px rgba(0, 20, 45, 0.45);
  --v-chrome-font:  'Segoe UI', 'Frutiger', 'Trebuchet MS', system-ui, sans-serif;
}

/* Le grain CRT est un artefact de LifeOS 95 : le verre s'en passe. */
:root[data-skin="vista"] body::after { display: none !important; }

/* ── Fenêtres ───────────────────────────────────────────────────────────── */
:root[data-skin="vista"] .os-window,
:root[data-skin="vista"] .osw,
:root[data-skin="vista"] .decw,
:root[data-skin="vista"] .login-box {
  background: var(--v-panel);
  border: 1px solid var(--v-border);
  border-radius: 8px;
  box-shadow: var(--v-shadow), inset 0 0 0 1px var(--v-edge);
  overflow: hidden;
}

/* ── Barres de titre : verre bleu, texte sombre, reflet supérieur ──────── */
:root[data-skin="vista"] .os-titlebar,
:root[data-skin="vista"] .tb,
:root[data-skin="vista"] .dectb,
:root[data-skin="vista"] .login-titlebar,
:root[data-skin="vista"] .ftb {
  background:
    linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.55) 48%,
                            rgba(198,224,247,.55) 52%, rgba(168,205,238,.72) 100%);
  color: var(--v-ink);
  text-shadow: 0 1px 0 rgba(255,255,255,.9);
  border-bottom: 1px solid rgba(120,160,200,.55);
  font-family: var(--v-chrome-font);
  letter-spacing: 0;
}
:root[data-skin="vista"] .tb-title,
:root[data-skin="vista"] .os-titlebar-title,
:root[data-skin="vista"] .login-titlebar-text {
  font-family: var(--v-chrome-font);
  font-size: 12px; font-weight: 600; letter-spacing: 0;
}
:root[data-skin="vista"] .login-titlebar-dot {
  background: radial-gradient(circle at 35% 30%, #b8e6ff, #2f8fd8 60%, #10527f);
  box-shadow: 0 0 8px rgba(47,143,216,.8);
}

/* ── Boutons système : pastilles vitrées ───────────────────────────────── */
:root[data-skin="vista"] .os-btn,
:root[data-skin="vista"] .osbtn,
:root[data-skin="vista"] .zoom-btn,
:root[data-skin="vista"] .fin-close {
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(214,232,248,.9));
  color: var(--v-accent-deep);
  border: 1px solid rgba(120,160,200,.8);
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95);
  font-family: var(--v-chrome-font);
}
:root[data-skin="vista"] .os-btn:hover,
:root[data-skin="vista"] .osbtn:hover,
:root[data-skin="vista"] .zoom-btn:hover {
  background: linear-gradient(180deg, #fff, #d8ecff);
  box-shadow: inset 0 1px 0 #fff, 0 0 8px rgba(47,143,216,.55);
}
/* Le bouton de fermeture reste rouge, seul accent vif de la vitre. */
:root[data-skin="vista"] .os-titlebar-btns .os-btn:last-child,
:root[data-skin="vista"] .tb-btns .osbtn:last-child {
  background: linear-gradient(180deg, #ff9a8f, #d63b25);
  color: #fff; border-color: #a52a17;
  text-shadow: 0 1px 1px rgba(0,0,0,.35);
}
:root[data-skin="vista"] .os-titlebar-btns .os-btn:last-child:hover,
:root[data-skin="vista"] .tb-btns .osbtn:last-child:hover {
  background: linear-gradient(180deg, #ffb3a8, #e8452c);
  box-shadow: 0 0 10px rgba(214,59,37,.65);
}

/* ── Menus, corps, barres d'état ───────────────────────────────────────── */
:root[data-skin="vista"] .os-menubar,
:root[data-skin="vista"] .mb {
  background: linear-gradient(180deg, #fbfdff, #e8f0f8);
  border-bottom: 1px solid rgba(120,160,200,.5);
}
:root[data-skin="vista"] .mi,
:root[data-skin="vista"] .os-menubar > * {
  font-family: var(--v-chrome-font); color: var(--v-ink); border-radius: 4px;
}
:root[data-skin="vista"] .mi:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(190,222,250,.95));
  color: var(--v-accent-deep);
}
:root[data-skin="vista"] .os-body,
:root[data-skin="vista"] .ob { background: var(--v-panel); }
:root[data-skin="vista"] .sb,
:root[data-skin="vista"] .os-statusbar {
  background: linear-gradient(180deg, #f4f8fc, #e2ebf4);
  border-top: 1px solid rgba(120,160,200,.5);
  font-family: var(--v-chrome-font);
}
:root[data-skin="vista"] .sc,
:root[data-skin="vista"] .tierbtn,
:root[data-skin="vista"] .chev,
:root[data-skin="vista"] .rmwarn,
:root[data-skin="vista"] .freelife,
:root[data-skin="vista"] .gb,
:root[data-skin="vista"] .fp,
:root[data-skin="vista"] .idbox,
:root[data-skin="vista"] .files-area,
:root[data-skin="vista"] .logs-content,
:root[data-skin="vista"] .lb-content,
:root[data-skin="vista"] .ach-card {
  border: 1px solid rgba(120,160,200,.55);
  border-radius: 6px;
  background: #fff;
}
/* Les cartes de succès gardent leur bord d'accent de catégorie EN HAUT — le
   verre l'habille sans l'effacer, c'est la seule couleur qui doit survivre. */
:root[data-skin="vista"] .ach-card {
  border-top: 3px solid var(--ach-accent, var(--v-accent));
  background: linear-gradient(180deg, #fdfefe, #eef4fa);
}
:root[data-skin="vista"] .gb { background: linear-gradient(180deg, #fbfdff, #eef4fa); }
:root[data-skin="vista"] .tierbtn { background: linear-gradient(180deg, #fdfefe, #e9f1f9); }
:root[data-skin="vista"] .tierbtn.sel { outline: 2px solid var(--v-accent); background: linear-gradient(180deg, #fff, #dcecfb); }
:root[data-skin="vista"] .gbl { background: transparent; color: var(--v-accent-deep); font-weight: 600; }

/* Ascenseurs fins */
:root[data-skin="vista"] .os-body::-webkit-scrollbar,
:root[data-skin="vista"] .ob::-webkit-scrollbar { width: 12px; }
:root[data-skin="vista"] .os-body::-webkit-scrollbar-track,
:root[data-skin="vista"] .ob::-webkit-scrollbar-track { background: #eaf1f8; }
:root[data-skin="vista"] .os-body::-webkit-scrollbar-thumb,
:root[data-skin="vista"] .ob::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #cfe2f4, #9fc3e4);
  border: 1px solid rgba(120,160,200,.7); border-radius: 6px;
}

/* ── Boutons et champs ─────────────────────────────────────────────────── */
:root[data-skin="vista"] .btn95,
:root[data-skin="vista"] .login-btn,
:root[data-skin="vista"] .chbtn,
:root[data-skin="vista"] .vc-buy-btn {
  background: linear-gradient(180deg, #fdfefe 0%, #f0f5fa 48%, #dfeaf5 52%, #ecf4fb 100%);
  color: var(--v-ink);
  border: 1px solid rgba(120,160,200,.85);
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 1px 2px rgba(0,30,60,.12);
  font-family: var(--v-chrome-font);
  text-shadow: none;
}
:root[data-skin="vista"] .btn95:hover,
:root[data-skin="vista"] .login-btn:hover,
:root[data-skin="vista"] .chbtn:hover {
  background: linear-gradient(180deg, #fff 0%, #eaf5ff 48%, #cfe6fb 52%, #e4f2ff 100%);
  border-color: var(--v-accent);
  box-shadow: inset 0 1px 0 #fff, 0 0 9px rgba(47,143,216,.5);
}
:root[data-skin="vista"] .btn95:active,
:root[data-skin="vista"] .login-btn:active {
  background: linear-gradient(180deg, #d4e6f7, #eaf4fd);
  box-shadow: inset 0 2px 4px rgba(0,40,80,.2);
}
:root[data-skin="vista"] .btn95.primary,
:root[data-skin="vista"] .login-btn.primary {
  outline: none;
  border-color: var(--v-accent);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(47,143,216,.35), 0 0 10px rgba(47,143,216,.35);
}
:root[data-skin="vista"] .csel,
:root[data-skin="vista"] .cinput,
:root[data-skin="vista"] .stt-input,
:root[data-skin="vista"] .login-input {
  background: #fff;
  border: 1px solid rgba(120,160,200,.85);
  border-radius: 4px;
  box-shadow: inset 0 1px 2px rgba(0,30,60,.1);
  font-family: var(--v-chrome-font);
}
:root[data-skin="vista"] .csel:focus,
:root[data-skin="vista"] .cinput:focus,
:root[data-skin="vista"] .stt-input:focus,
:root[data-skin="vista"] .login-input:focus {
  border-color: var(--v-accent);
  box-shadow: 0 0 7px rgba(47,143,216,.6);
}

/* ── Barre des tâches : réglette de verre sombre ───────────────────────── */
:root[data-skin="vista"] #taskbar {
  background: linear-gradient(180deg, rgba(38,64,92,.96), rgba(12,26,44,.98));
  border-top: 1px solid rgba(140,200,255,.55);
  box-shadow: 0 -1px 0 rgba(255,255,255,.18) inset, 0 -8px 18px rgba(0,20,45,.35);
}
:root[data-skin="vista"] .taskbar-sep,
:root[data-skin="vista"] .tsep { border: none; background: rgba(255,255,255,.18); }

/* Bouton Démarrer → la perle */
:root[data-skin="vista"] .start-btn,
:root[data-skin="vista"] .ts {
  background: radial-gradient(circle at 38% 30%, #eaf7ff 0%, #7cc3f0 28%, #1f7fc4 62%, #0b3f68 100%);
  border: 1px solid rgba(180,225,255,.75);
  border-radius: 999px;
  color: #eaf7ff;
  text-shadow: 0 1px 2px rgba(0,20,40,.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 0 14px rgba(60,160,230,.65);
  font-family: var(--v-chrome-font);
}
:root[data-skin="vista"] .start-btn:hover,
:root[data-skin="vista"] .ts:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 0 20px rgba(90,190,255,.9); }
:root[data-skin="vista"] .start-logo,
:root[data-skin="vista"] .tslogo { color: #dff2ff; text-shadow: 0 0 8px rgba(160,220,255,.9); }
:root[data-skin="vista"] .start-logo em,
:root[data-skin="vista"] .tslogo em { color: #9fe3ff; }

/* Boutons de fenêtres, crédits et horloge : vitrés sur fond sombre */
:root[data-skin="vista"] .taskbar-win-btn,
:root[data-skin="vista"] .twb,
:root[data-skin="vista"] .taskbar-credits,
:root[data-skin="vista"] .taskbar-datetime,
:root[data-skin="vista"] .tdt {
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.07));
  border: 1px solid rgba(160,205,240,.35);
  border-radius: 5px;
  color: #eaf4ff;
  font-family: var(--v-chrome-font);
}
:root[data-skin="vista"] .taskbar-credits { color: #b6f0c4; }
:root[data-skin="vista"] .taskbar-credits.low { color: #ffb0a6; }
:root[data-skin="vista"] .taskbar-credits .tc-plus { color: #9fe3ff; }
:root[data-skin="vista"] .taskbar-time,
:root[data-skin="vista"] .ttime { color: #f2f9ff; }
:root[data-skin="vista"] .taskbar-date,
:root[data-skin="vista"] .tdate { color: #a9c8e4; }
:root[data-skin="vista"] .taskbar-win-btn:hover,
:root[data-skin="vista"] .twb:hover,
:root[data-skin="vista"] .taskbar-credits:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.14));
  box-shadow: 0 0 10px rgba(120,200,255,.45);
}

/* ── Menu Démarrer : panneau de verre sombre ───────────────────────────── */
:root[data-skin="vista"] .start-menu {
  background: linear-gradient(180deg, rgba(32,56,84,.97), rgba(14,28,46,.99));
  border: 1px solid rgba(150,205,245,.45);
  border-radius: 8px;
  box-shadow: var(--v-shadow);
  color: #eaf4ff;
}
:root[data-skin="vista"] .start-menu-banner {
  background: linear-gradient(180deg, rgba(70,140,200,.55), rgba(20,60,100,.35));
  border-bottom: 1px solid rgba(150,205,245,.35);
}
:root[data-skin="vista"] .start-menu-banner-logo,
:root[data-skin="vista"] .start-menu-banner-user { color: #eaf4ff; text-shadow: 0 1px 3px rgba(0,20,40,.7); }
:root[data-skin="vista"] .start-menu-item,
:root[data-skin="vista"] .start-menu-credits {
  color: #eaf4ff; border-radius: 5px; font-family: var(--v-chrome-font);
}
:root[data-skin="vista"] .start-menu-item:hover,
:root[data-skin="vista"] .start-menu-credits:hover {
  background: linear-gradient(180deg, rgba(120,190,245,.45), rgba(50,120,190,.45));
  color: #fff;
}
:root[data-skin="vista"] .start-menu-credits strong { color: #b6f0c4; }
:root[data-skin="vista"] .start-menu-sep { border: none; border-top: 1px solid rgba(150,205,245,.28); }
:root[data-skin="vista"] .start-menu-danger { color: #ffb0a6 !important; }
:root[data-skin="vista"] .start-menu-danger:hover { background: rgba(200,60,40,.55) !important; }

/* ── Icônes du bureau : sélection en surbrillance vitrée ───────────────── */
:root[data-skin="vista"] .desk-icon:hover,
:root[data-skin="vista"] .desk-icon.selected {
  background: linear-gradient(180deg, rgba(150,205,245,.32), rgba(60,130,200,.32));
  border: 1px solid rgba(190,225,255,.55);
  border-radius: 6px;
}
:root[data-skin="vista"] .desk-icon-label { text-shadow: 0 1px 3px rgba(0,10,25,.95); }

/* ── Notifications : bulles de verre au lieu du terminal vert ──────────── */
:root[data-skin="vista"] .toast {
  background: linear-gradient(180deg, rgba(44,72,104,.96), rgba(16,32,52,.97));
  border: 1px solid rgba(150,205,245,.5);
  border-radius: 8px;
  outline: none;
  box-shadow: var(--v-shadow);
}
:root[data-skin="vista"] .toast-titlebar {
  background: linear-gradient(180deg, rgba(120,190,245,.35), rgba(40,90,150,.25));
  border-bottom: 1px solid rgba(150,205,245,.3);
}
:root[data-skin="vista"] .toast-channel { color: #cfe9ff; font-family: var(--v-chrome-font); letter-spacing: 0; }
:root[data-skin="vista"] .toast-title { color: #ffd79a; }
:root[data-skin="vista"] .toast-msg { color: #dcecfb; }
:root[data-skin="vista"] .toast-timestamp { color: #7fa6c8; }
:root[data-skin="vista"] .toast-progress { background: rgba(255,255,255,.12); border-radius: 2px; }
:root[data-skin="vista"] .toast-progress-fill { background: linear-gradient(90deg, #2f8fd8, #9fe3ff); }

/* ── Écran de connexion ────────────────────────────────────────────────── */
:root[data-skin="vista"] .w-out,
:root[data-skin="vista"] .w-in { border: 1px solid rgba(120,160,200,.7); border-radius: 6px; }
:root[data-skin="vista"] .login-tab { color: #35618c; font-family: var(--v-chrome-font); border-radius: 5px 5px 0 0; }
:root[data-skin="vista"] .login-tab.active {
  background: linear-gradient(180deg, #fff, #e6f0fa);
  border: 1px solid rgba(120,160,200,.7); border-bottom: none; color: var(--v-accent-deep);
}
:root[data-skin="vista"] .login-tabs { border-bottom: 1px solid rgba(120,160,200,.6); }
:root[data-skin="vista"] .login-field-label { font-family: var(--v-chrome-font); color: #35618c; letter-spacing: 0; }

/* ── Personnalisation : la vignette du thème actif ─────────────────────── */
:root[data-skin="vista"] .wp-swatch,
:root[data-skin="vista"] .skin-swatch { border: 1px solid rgba(120,160,200,.7); border-radius: 6px; }

/* ── Mode sombre + Vesta : on assombrit le verre plutôt que de le nier ── */
:root[data-skin="vista"][data-theme="dark"] {
  --v-panel:   #1e2a36;
  --v-panel-2: #17212c;
  --v-ink:     #dbe9f7;
  --v-border:  rgba(90,130,170,.7);
}
:root[data-skin="vista"][data-theme="dark"] .os-titlebar,
:root[data-skin="vista"][data-theme="dark"] .tb,
:root[data-skin="vista"][data-theme="dark"] .login-titlebar {
  background: linear-gradient(180deg, rgba(70,105,145,.9) 0%, rgba(40,66,96,.85) 50%, rgba(26,46,70,.9) 100%);
  color: #e8f3ff; text-shadow: 0 1px 2px rgba(0,15,30,.8);
}
:root[data-skin="vista"][data-theme="dark"] .os-body,
:root[data-skin="vista"][data-theme="dark"] .ob,
:root[data-skin="vista"][data-theme="dark"] .os-menubar,
:root[data-skin="vista"][data-theme="dark"] .mb { background: var(--v-panel); color: var(--v-ink); }
:root[data-skin="vista"][data-theme="dark"] .btn95,
:root[data-skin="vista"][data-theme="dark"] .login-btn {
  background: linear-gradient(180deg, #33465a, #24333f); color: #e2eef9;
  border-color: rgba(90,130,170,.8); box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

/* Le lien vers la démo est la porte gratuite : il gardait un vert franc sous
   LifeOS 95 et doit rester distinct du bouton de connexion sous Vesta. */
:root[data-skin="vista"] .demo-hook .login-btn {
  background: linear-gradient(180deg, #f0fff7 0%, #d3f0e0 48%, #aadcc2 52%, #dcf5e8 100%);
  color: #0d4023;
  border-color: #6fb992;
  text-shadow: 0 1px 0 rgba(255,255,255,.85);
}
:root[data-skin="vista"] .demo-hook .login-btn:hover {
  background: linear-gradient(180deg, #fff 0%, #dff8ec 48%, #b6e8cd 52%, #e8fbf1 100%);
  box-shadow: inset 0 1px 0 #fff, 0 0 9px rgba(60,170,110,.5);
}

/* Sélecteur de langue de la page de connexion : même verre que le reste. */
:root[data-skin="vista"] #lang-btn {
  background: linear-gradient(180deg, #fdfefe 0%, #f0f5fa 48%, #dfeaf5 52%, #ecf4fb 100%);
  color: var(--v-ink);
  border: 1px solid rgba(120,160,200,.85);
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 1px 2px rgba(0,30,60,.12);
  font-family: var(--v-chrome-font);
}
:root[data-skin="vista"] #lang-btn:hover {
  background: linear-gradient(180deg, #fff 0%, #eaf5ff 48%, #cfe6fb 52%, #e4f2ff 100%);
  border-color: var(--v-accent);
}
:root[data-skin="vista"] #lang-menu {
  background: var(--v-panel);
  border: 1px solid var(--v-border);
  border-radius: 8px;
  box-shadow: var(--v-shadow);
}
:root[data-skin="vista"] .lang-item { border-radius: 5px; font-family: var(--v-chrome-font); }
:root[data-skin="vista"] .lang-item:hover,
:root[data-skin="vista"] .lang-item:focus {
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(190,222,250,.95));
  color: var(--v-accent-deep);
}