/* ========================================================
   THEME COSMOS — Portfolio Massyl Yanis HAMDI
   Surcharge complete du theme par defaut
   ======================================================== */

/* ===== PALETTE COSMIQUE ===== */
:root {
  --bg:        #030014;
  --panel:     #0a0825;
  --panel-2:   #050212;
  --border:    #1e1b4b;
  --text:      #ccd6f6;
  --muted:     #8892b0;
  --cyan:      #64ffda;
  --violet:    #c084fc;
  --yellow:    #fbbf24;
  --green:     #4ade80;
  --red:       #f87171;
  --magenta:   #e879f9;
}

/* ===== CORPS DE PAGE ===== */
body {
  background: #030014;
  font-family: 'Inter', 'Rajdhani', Arial, sans-serif;
}

/* ===== FOND COSMOS (position fixe, z-index 0) ===== */
.cosmos-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(ellipse 120% 60% at 50% -10%, #0d0b2a 0%, #030014 70%);
}

/* Conteneur des etoiles JS */
.cosmos-stars {
  position: absolute;
  inset: 0;
}

/* Etoile individuelle (generee par JS) */
.cosmos-star {
  position: absolute;
  border-radius: 50%;
  background: #ffffff;
  animation: cosmosTwinkle var(--sdur, 3s) ease-in-out var(--sdel, 0s) infinite;
}

@keyframes cosmosTwinkle {
  0%,  100% { opacity: var(--s-lo, 0.15); transform: scale(1); }
  50%       { opacity: var(--s-hi, 0.9);  transform: scale(1.5); }
}

/* Nebuleuses */
.cosmos-nebula {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
}

.cosmos-nebula-1 {
  width: 960px;
  height: 960px;
  background: radial-gradient(circle at center,
    rgba(100, 255, 218, 0.26) 0%,
    rgba(100, 255, 218, 0.10) 35%,
    transparent 65%);
  filter: blur(80px);
  top: -320px;
  right: -240px;
  animation: nebulaFloat 22s ease-in-out infinite;
}

.cosmos-nebula-2 {
  width: 860px;
  height: 860px;
  background: radial-gradient(circle at center,
    rgba(192, 132, 252, 0.34) 0%,
    rgba(192, 132, 252, 0.12) 35%,
    transparent 65%);
  filter: blur(90px);
  bottom: -280px;
  left: -220px;
  animation: nebulaFloat 26s ease-in-out infinite reverse;
}

.cosmos-nebula-3 {
  width: 640px;
  height: 640px;
  background: radial-gradient(circle at center,
    rgba(232, 121, 249, 0.20) 0%,
    rgba(232, 121, 249, 0.07) 35%,
    transparent 65%);
  filter: blur(70px);
  top: 32%;
  right: 22%;
  animation: nebulaFloat 18s ease-in-out 5s infinite;
}

.cosmos-nebula-4 {
  width: 480px;
  height: 480px;
  background: radial-gradient(circle at center,
    rgba(100, 255, 218, 0.18) 0%,
    transparent 60%);
  filter: blur(60px);
  bottom: 18%;
  right: 5%;
  animation: nebulaFloat 14s ease-in-out 2s infinite reverse;
}

@keyframes nebulaFloat {
  0%,  100% { transform: translate(0,   0)   scale(1);    }
  33%       { transform: translate(-38px, 22px) scale(1.06); }
  66%       { transform: translate(24px, -32px) scale(0.95); }
}

/* Etoiles filantes */
.cosmos-shooting-star {
  position: absolute;
  top: 10%;
  left: 108%;
  width: 240px;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(100, 255, 218, 0.9) 40%,
    rgba(255, 255, 255, 0.95) 60%,
    transparent 100%);
  box-shadow: 0 0 10px rgba(100, 255, 218, 0.7), 0 0 20px rgba(100, 255, 218, 0.3);
  transform: rotate(-22deg);
  opacity: 0;
  animation: shootStar 10s ease-in-out infinite;
}

.cosmos-shooting-star-2 {
  top: 38%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(192, 132, 252, 0.9) 40%,
    rgba(255, 255, 255, 0.95) 60%,
    transparent 100%);
  box-shadow: 0 0 10px rgba(192, 132, 252, 0.7), 0 0 20px rgba(192, 132, 252, 0.3);
  animation-delay: 5s;
  animation-duration: 12s;
}

.cosmos-shooting-star-3 {
  top: 65%;
  width: 180px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(232, 121, 249, 0.85) 40%,
    rgba(255, 255, 255, 0.9) 60%,
    transparent 100%);
  box-shadow: 0 0 10px rgba(232, 121, 249, 0.6);
  animation-delay: 8s;
  animation-duration: 9s;
}

@keyframes shootStar {
  0%,  55% { left: 110%;  opacity: 0; }
  58%      { opacity: 1;              }
  100%     { left: -30%;  opacity: 0; }
}

/* Grille cosmique subtile */
.cosmos-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(100, 255, 218, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100, 255, 218, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.6;
}

/* Z-index : contenu au dessus du fond */
#classicScreen,
#desktopScreen {
  position: relative;
  z-index: 2;
}

/* La navbar reste fixed — juste z-index eleve */
.top-nav {
  z-index: 100;
}

/* ===== NAVBAR COSMIQUE ===== */
.top-nav {
  background: rgba(3, 0, 20, 0.55) !important;
  border-bottom: 1px solid transparent !important;
  backdrop-filter: blur(36px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(36px) saturate(180%) !important;
  transition: background 0.4s ease, transform 0.38s cubic-bezier(0.4,0,0.2,1), opacity 0.38s ease !important;
}

/* Filet dégradé en bas */
.top-nav::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(100,255,218,0.20) 25%,
    rgba(192,132,252,0.20) 75%,
    transparent 100%);
  pointer-events: none;
}

/* Brand */
.brand-logo {
  border-radius: 12px !important;
  background: linear-gradient(135deg, var(--cyan), var(--violet)) !important;
  box-shadow: 0 0 16px rgba(100,255,218,0.40), 0 0 32px rgba(192,132,252,0.18) !important;
  transition: box-shadow 0.3s, transform 0.2s !important;
}

.brand-logo:hover {
  box-shadow: 0 0 26px rgba(100,255,218,0.65), 0 0 50px rgba(192,132,252,0.32) !important;
  transform: scale(1.06) !important;
}

.brand-name {
  background: linear-gradient(90deg, #e2e8f0 30%, var(--cyan) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  font-weight: 800 !important;
}

.brand-badge {
  color: var(--green) !important;
  font-size: 9px !important;
  opacity: 0.85;
}

.brand-badge-dot {
  background: var(--green) !important;
  box-shadow: 0 0 6px var(--green) !important;
  animation: statusPulse 2s ease-in-out infinite !important;
}

/* Nav links */
.nav-link {
  color: rgba(204,214,246,0.55) !important;
  border-radius: 8px !important;
  transition: color 0.2s, background 0.2s !important;
}

.nav-link:hover {
  color: var(--text) !important;
  background: rgba(100,255,218,0.06) !important;
}

.nav-link.active {
  color: var(--cyan) !important;
  background: rgba(100,255,218,0.08) !important;
}

/* Point indicateur sous le lien actif */
.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
}

/* Separateur */
.nav-sep {
  background: rgba(100,255,218,0.14) !important;
}

/* Bouton mode */
.mode-btn {
  background: linear-gradient(135deg, var(--cyan), var(--violet)) !important;
  color: #030014 !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 0 16px rgba(100,255,218,0.35), 0 0 32px rgba(192,132,252,0.15) !important;
  transition: box-shadow 0.28s ease, transform 0.18s ease !important;
}

.mode-btn:hover {
  box-shadow: 0 0 26px rgba(100,255,218,0.58), 0 0 52px rgba(192,132,252,0.28) !important;
  transform: translateY(-1px) scale(1.03) !important;
}

.mode-btn:active {
  transform: translateY(0) scale(0.98) !important;
}

/* ===== HERO COSMIQUE ===== */
.classic-hero {
  background: transparent;
}

/* Halo ambiant derriere le texte hero */
.classic-hero > div {
  position: relative;
}

.classic-hero > div::before {
  content: '';
  position: absolute;
  top: -60px; left: -80px;
  width: 500px; height: 400px;
  background: radial-gradient(ellipse,
    rgba(100, 255, 218, 0.06) 0%,
    transparent 65%);
  pointer-events: none;
  filter: blur(30px);
}

.eyebrow {
  color: var(--cyan) !important;
  background: rgba(100, 255, 218, 0.06) !important;
  border-color: rgba(100, 255, 218, 0.20) !important;
  box-shadow:
    0 0 20px rgba(100, 255, 218, 0.08),
    inset 0 1px 0 rgba(100, 255, 218, 0.10) !important;
  backdrop-filter: blur(8px) !important;
  font-size: 13px !important;
  letter-spacing: 0.03em !important;
  transition: border-color 0.3s, box-shadow 0.3s !important;
}

.eyebrow:hover {
  border-color: rgba(100, 255, 218, 0.40) !important;
  box-shadow: 0 0 30px rgba(100, 255, 218, 0.15) !important;
}

.classic-hero h1 {
  letter-spacing: -0.02em !important;
  text-shadow: 0 0 60px rgba(100, 255, 218, 0.08) !important;
}

.accent {
  color: var(--cyan) !important;
  text-shadow:
    0 0 24px rgba(100, 255, 218, 0.50),
    0 0 60px rgba(100, 255, 218, 0.18) !important;
}

.classic-hero p,
.classic-hero > div > p {
  color: var(--muted) !important;
}

/* Boutons hero */
.primary {
  background: linear-gradient(135deg, var(--cyan), #00b4d8) !important;
  color: #030014 !important;
  border: none !important;
  box-shadow: 0 0 22px rgba(100, 255, 218, 0.42) !important;
}

.primary:hover {
  box-shadow: 0 0 38px rgba(100, 255, 218, 0.7) !important;
  transform: translateY(-2px);
}

.secondary {
  background: rgba(10, 8, 37, 0.82) !important;
  border-color: rgba(100, 255, 218, 0.28) !important;
  color: var(--text) !important;
}

.secondary:hover {
  border-color: var(--cyan) !important;
  box-shadow: 0 0 18px rgba(100, 255, 218, 0.22) !important;
  transform: translateY(-2px);
}

/* Hero tags */
.hero-tags .tag {
  background: rgba(100, 255, 218, 0.06) !important;
  border-color: rgba(100, 255, 218, 0.25) !important;
  color: var(--cyan) !important;
}

/* ===== CARTE DE PROFIL COSMOS ===== */
.profile-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 36px 28px 28px !important;
  border-radius: 28px !important;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(100, 255, 218, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 110%, rgba(192, 132, 252, 0.10) 0%, transparent 60%),
    rgba(8, 6, 30, 0.90) !important;
  border: 1px solid rgba(100, 255, 218, 0.20) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow:
    0 0 0 1px rgba(100, 255, 218, 0.06),
    0 30px 80px rgba(0, 0, 0, 0.60),
    inset 0 1px 0 rgba(100, 255, 218, 0.08) !important;
}

/* Reflet lumineux en haut de la carte */
.profile-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(100, 255, 218, 0.55) 30%,
    rgba(192, 132, 252, 0.55) 70%,
    transparent 100%);
}

/* Halo flou derriere l'avatar */
.profile-glow {
  position: absolute;
  top: 10px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(100, 255, 218, 0.18) 0%,
    rgba(192, 132, 252, 0.14) 45%,
    transparent 70%);
  filter: blur(22px);
  pointer-events: none;
  animation: avatarPulse 4s ease-in-out infinite;
}

/* Avatar : contenant circulaire avec bordure tournante */
.avatar {
  position: relative !important;
  width: 150px !important;
  height: 150px !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  margin-bottom: 16px !important;
  flex-shrink: 0;
  z-index: 1;
}

/* Anneau tournant cyan/violet */
.avatar::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(
    var(--cyan)    0deg,
    var(--violet)  130deg,
    var(--magenta) 220deg,
    var(--cyan)    360deg
  );
  animation: avatarSpin 5s linear infinite;
  z-index: 0;
}

/* Fond sombre sous le ring pour isoler la photo */
.avatar::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: #08061e;
  z-index: 1;
}

@keyframes avatarSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes avatarPulse {
  0%,  100% { opacity: 0.7; transform: scale(1); }
  50%        { opacity: 1;   transform: scale(1.08); }
}

/* Photo ronde par dessus le fond */
.avatar-photo {
  position: absolute !important;
  inset: 5px !important;
  width: calc(100% - 10px) !important;
  height: calc(100% - 10px) !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center 15% !important;
  z-index: 2;
  background: linear-gradient(135deg, var(--cyan), var(--violet));
}

/* Badge "Disponible" */
.profile-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(74, 222, 128, 0.08);
  border: 1px solid rgba(74, 222, 128, 0.28);
  color: #4ade80;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 8px #4ade80;
  animation: statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {
  0%,  100% { box-shadow: 0 0 6px #4ade80; }
  50%        { box-shadow: 0 0 14px #4ade80, 0 0 28px rgba(74,222,128,0.4); }
}

/* Nom avec gradient */
.profile-name {
  font-size: 17px !important;
  font-weight: 800 !important;
  text-align: center !important;
  margin-bottom: 6px !important;
  background: linear-gradient(90deg, #e2e8f0 20%, var(--cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  letter-spacing: 0.01em;
}

/* Titre / poste */
.profile-title {
  font-size: 13px !important;
  color: var(--muted) !important;
  text-align: center !important;
  margin-bottom: 6px !important;
  line-height: 1.5 !important;
}

/* Localisation */
.profile-location {
  font-size: 12px !important;
  color: rgba(136, 146, 176, 0.65) !important;
  text-align: center !important;
  margin-bottom: 0 !important;
  letter-spacing: 0.03em;
}

/* Separateur lumineux */
.profile-divider {
  width: 100%;
  height: 1px;
  margin: 20px 0 16px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(100, 255, 218, 0.22) 30%,
    rgba(192, 132, 252, 0.22) 70%,
    transparent 100%);
}

/* Stats */
.mini-stats {
  width: 100%;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  margin-top: 0 !important;
}

.mini-stat {
  padding: 12px 8px !important;
  text-align: center !important;
  border-radius: 14px !important;
  background: rgba(3, 0, 20, 0.70) !important;
  border: 1px solid rgba(100, 255, 218, 0.10) !important;
  transition: border-color 0.25s, box-shadow 0.25s;
}

.mini-stat:hover {
  border-color: rgba(100, 255, 218, 0.35) !important;
  box-shadow: 0 0 18px rgba(100, 255, 218, 0.10) !important;
}

.mini-stat strong {
  display: block !important;
  color: var(--cyan) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  text-shadow: 0 0 14px rgba(100, 255, 218, 0.55) !important;
  margin-bottom: 2px;
}

.mini-stat span {
  color: var(--muted) !important;
  font-size: 11px !important;
  letter-spacing: 0.04em;
}

/* ===== SECTIONS ===== */
.section {
  background: transparent !important;
}

/* Separateur lumineux entre sections */
.section + .section {
  border-top: 1px solid rgba(100, 255, 218, 0.06);
}

.section h2 {
  font-size: 2.4rem !important;
  background: linear-gradient(90deg, #ccd6f6 20%, var(--cyan) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  display: inline-block;
  margin-bottom: 8px;
}

/* Trait lumineux sous les titres */
.section h2 + p,
.section h2 ~ .section-desc {
  color: var(--muted);
}

.section-desc {
  color: var(--muted) !important;
}

/* Barre lumineuse sous h2 */
.section h2::after {
  content: '';
  display: block;
  width: 54px;
  height: 3px;
  margin-top: 10px;
  background: linear-gradient(90deg, var(--cyan), var(--violet), var(--magenta));
  border-radius: 2px;
  box-shadow:
    0 0 12px rgba(100, 255, 218, 0.7),
    0 0 28px rgba(192, 132, 252, 0.4);
}

/* ===== CARTES COSMIQUES ===== */
.card {
  background: rgba(10, 8, 37, 0.72) !important;
  border: 1px solid rgba(100, 255, 218, 0.13) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow:
    0 4px 28px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(100, 255, 218, 0.05) !important;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.card:hover {
  transform: translateY(-8px) scale(1.015) !important;
  border-color: rgba(100, 255, 218, 0.48) !important;
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.55),
    0 0 28px rgba(100, 255, 218, 0.18),
    0 0 60px rgba(192, 132, 252, 0.1),
    inset 0 1px 0 rgba(100, 255, 218, 0.1) !important;
}

.card-icon {
  font-size: 28px !important;
  color: var(--cyan) !important;
  text-shadow: 0 0 18px rgba(100, 255, 218, 0.75);
  letter-spacing: 0.04em;
  margin-bottom: 14px !important;
}

.card h3 {
  color: var(--text) !important;
}

.card p {
  color: var(--muted) !important;
}

/* Tags */
.tag {
  background: rgba(100, 255, 218, 0.06) !important;
  border: 1px solid rgba(100, 255, 218, 0.22) !important;
  color: var(--cyan) !important;
  box-shadow: 0 0 8px rgba(100, 255, 218, 0.07);
  transition: background 0.22s, box-shadow 0.22s !important;
}

.tag:hover {
  background: rgba(100, 255, 218, 0.12) !important;
  box-shadow: 0 0 14px rgba(100, 255, 218, 0.22) !important;
}

/* Lien GitHub sur les cartes */
.card-ext-link {
  color: var(--cyan) !important;
  text-shadow: 0 0 10px rgba(100, 255, 218, 0.4);
}

/* ===== SLIDER 3D COSMIQUE ===== */
.card-slide.active-slide {
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(100, 255, 218, 0.38),
    0 0 45px rgba(100, 255, 218, 0.16),
    inset 0 1px 0 rgba(100, 255, 218, 0.08) !important;
}

.slider-btn {
  background: rgba(10, 8, 37, 0.88) !important;
  border-color: rgba(100, 255, 218, 0.2) !important;
  color: var(--muted) !important;
}

.slider-btn:hover {
  border-color: var(--cyan) !important;
  color: var(--cyan) !important;
  box-shadow:
    0 0 22px rgba(100, 255, 218, 0.32),
    0 0 44px rgba(100, 255, 218, 0.12) !important;
}

.slider-dot {
  background: rgba(100, 255, 218, 0.2) !important;
}

.slider-dot.active {
  background: var(--cyan) !important;
  box-shadow:
    0 0 12px rgba(100, 255, 218, 0.75),
    0 0 26px rgba(100, 255, 218, 0.35) !important;
}

/* ===== CONTACT COSMIQUE ===== */
.contact-box {
  background:
    linear-gradient(135deg,
      rgba(100, 255, 218, 0.07),
      rgba(192, 132, 252, 0.09)
    ) !important;
  border: 1px solid rgba(100, 255, 218, 0.18) !important;
  box-shadow:
    0 0 50px rgba(100, 255, 218, 0.06),
    inset 0 1px 0 rgba(100, 255, 218, 0.07) !important;
}

.contact-box h3 {
  color: var(--text);
  background: linear-gradient(90deg, var(--text), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.contact-list {
  background: rgba(3, 0, 20, 0.72) !important;
  border: 1px solid rgba(100, 255, 218, 0.13) !important;
}

/* ===== ANIMATIONS ENTREE 3D ===== */
.reveal-card {
  opacity: 0;
  transform: perspective(900px) translateZ(-70px) translateY(36px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.reveal-card.is-visible {
  opacity: 1 !important;
  transform: perspective(900px) translateZ(0) translateY(0) !important;
}

.reveal-section {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease !important;
}

.reveal-section.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ===== LUEUR GLOBALE DES TITRES H2 ===== */
.section h2.is-visible {
  animation: cosmosTextGlow 3s ease-in-out infinite alternate;
}

@keyframes cosmosTextGlow {
  from { filter: drop-shadow(0 0 6px rgba(100, 255, 218, 0.2)); }
  to   { filter: drop-shadow(0 0 18px rgba(100, 255, 218, 0.45)) drop-shadow(0 0 35px rgba(192, 132, 252, 0.2)); }
}

/* ===== SCROLL INDICATOR ===== */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #030014;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--cyan), var(--violet));
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(100, 255, 218, 0.6);
}

/* ===== SELECTION TEXTE ===== */
::selection {
  background: rgba(100, 255, 218, 0.22);
  color: var(--text);
}

/* ===== MODE BUREAU INTERACTIF — COSMOS ===== */

/* Fond transparent pour laisser le cosmos-bg passer */
.desktop-screen {
  background: transparent !important;
}

/* Barre superieure OS */
.os-topbar {
  background: rgba(3, 0, 20, 0.85) !important;
  border-bottom: 1px solid rgba(100, 255, 218, 0.14) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}

.activities-btn {
  background: rgba(100, 255, 218, 0.10) !important;
  border-color: rgba(100, 255, 218, 0.30) !important;
  color: var(--cyan) !important;
}

.os-menu-item:hover,
.system-pill:hover,
.activities-btn:hover {
  background: rgba(100, 255, 218, 0.14) !important;
  color: var(--cyan) !important;
}

/* Dock */
.taskbar {
  background: rgba(3, 0, 20, 0.82) !important;
  border: 1px solid rgba(100, 255, 218, 0.16) !important;
  box-shadow:
    0 0 40px rgba(100, 255, 218, 0.08),
    0 20px 60px rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
}

.start-btn,
.task-app {
  background: rgba(10, 8, 37, 0.80) !important;
  border-color: rgba(100, 255, 218, 0.16) !important;
  color: var(--muted) !important;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s !important;
}

.task-app:hover {
  background: rgba(100, 255, 218, 0.10) !important;
  border-color: rgba(100, 255, 218, 0.35) !important;
  color: var(--cyan) !important;
}

.task-app.active {
  background: rgba(100, 255, 218, 0.14) !important;
  border-color: rgba(100, 255, 218, 0.50) !important;
  box-shadow: inset 0 -2px 0 var(--cyan) !important;
  color: var(--cyan) !important;
}

/* Icones du bureau */
.desktop-icon .emoji {
  background: rgba(8, 6, 30, 0.85) !important;
  border-color: rgba(100, 255, 218, 0.16) !important;
  color: var(--cyan) !important;
}

.desktop-icon:hover {
  background: rgba(100, 255, 218, 0.07) !important;
  border-color: rgba(100, 255, 218, 0.28) !important;
}

/* Widget systeme */
.desktop-widget {
  background: rgba(8, 6, 30, 0.82) !important;
  border-color: rgba(100, 255, 218, 0.14) !important;
  backdrop-filter: blur(16px) !important;
}

.desktop-widget h3 {
  background: linear-gradient(90deg, #ccd6f6, var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

.widget-meter span {
  background: linear-gradient(90deg, var(--cyan), var(--violet)) !important;
}

/* Fenetres cosmos */
.window {
  background: rgba(8, 6, 30, 0.92) !important;
  border-color: rgba(100, 255, 218, 0.15) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.60),
    inset 0 1px 0 rgba(100, 255, 218, 0.06) !important;
}

.window.focused {
  border-color: rgba(100, 255, 218, 0.45) !important;
  box-shadow:
    0 32px 95px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(100, 255, 218, 0.25),
    0 0 40px rgba(100, 255, 218, 0.08) !important;
}

.window-bar {
  background: linear-gradient(#080620, #050212) !important;
  border-bottom-color: rgba(100, 255, 218, 0.12) !important;
}

.window-title {
  color: var(--text) !important;
}

/* Lanceur d'apps */
.start-menu {
  background: rgba(5, 2, 18, 0.96) !important;
  border-color: rgba(100, 255, 218, 0.18) !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65), 0 0 60px rgba(100, 255, 218, 0.06) !important;
}

.start-search {
  background: rgba(3, 0, 20, 0.80) !important;
  border-color: rgba(100, 255, 218, 0.18) !important;
  color: var(--text) !important;
}

.start-grid .linux-icon {
  color: var(--cyan) !important;
}

.start-grid button:hover {
  background: rgba(100, 255, 218, 0.08) !important;
  border-color: rgba(100, 255, 218, 0.22) !important;
}

.start-footer {
  border-top-color: rgba(100, 255, 218, 0.10) !important;
}

/* Centre de controle */
.control-center,
.notification-center {
  background: rgba(5, 2, 18, 0.96) !important;
  border-color: rgba(100, 255, 218, 0.16) !important;
}

.quick-toggle {
  background: rgba(10, 8, 37, 0.80) !important;
  border-color: rgba(100, 255, 218, 0.14) !important;
  color: var(--muted) !important;
}

.quick-toggle.active {
  background: rgba(100, 255, 218, 0.14) !important;
  border-color: rgba(100, 255, 218, 0.45) !important;
  color: var(--cyan) !important;
  font-weight: 800 !important;
}

/* Notification */
.notification {
  background: rgba(10, 8, 37, 0.80) !important;
  border-color: rgba(100, 255, 218, 0.10) !important;
}

/* Menu contextuel */
.context-menu {
  background: rgba(5, 2, 18, 0.97) !important;
  border-color: rgba(100, 255, 218, 0.18) !important;
}

.context-item:hover {
  background: rgba(100, 255, 218, 0.08) !important;
  color: var(--cyan) !important;
}

/* Terminal cosmos */
.terminal-body {
  background: #020010 !important;
  border-color: rgba(100, 255, 218, 0.20) !important;
  color: #a7f3d0 !important;
}

.terminal-body .cmd {
  color: var(--cyan) !important;
}

.terminal-input {
  color: var(--cyan) !important;
}

.neofetch-art {
  color: var(--cyan) !important;
}

.nf-key {
  color: var(--cyan) !important;
}

/* Cartes dans les fenetres */
.folder-card {
  background: rgba(10, 8, 37, 0.75) !important;
  border-color: rgba(100, 255, 218, 0.12) !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.folder-card:hover {
  border-color: rgba(100, 255, 218, 0.32) !important;
  box-shadow: 0 0 18px rgba(100, 255, 218, 0.08) !important;
}

.github-project {
  border-color: rgba(100, 255, 218, 0.25) !important;
  background:
    linear-gradient(rgba(100, 255, 218, 0.05), rgba(100, 255, 218, 0.02)),
    rgba(10, 8, 37, 0.75) !important;
}

.project-link {
  background: linear-gradient(135deg, var(--cyan), #00b4d8) !important;
  color: #030014 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 14px !important;
  padding: 9px 14px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  box-shadow: 0 0 16px rgba(100, 255, 218, 0.28) !important;
}

.project-link:hover {
  box-shadow: 0 0 28px rgba(100, 255, 218, 0.50) !important;
}

/* Mail rows */
.mail-row {
  background: rgba(10, 8, 37, 0.75) !important;
  border-color: rgba(100, 255, 218, 0.10) !important;
}

/* Viewer PDF */
.pdf-viewer {
  border-color: rgba(100, 255, 218, 0.16) !important;
  background: #020010 !important;
}

/* Wallpaper options en cosmos */
.wallpaper-option-1 { background: linear-gradient(135deg, #030014, #64ffda) !important; }
.wallpaper-option-2 { background: linear-gradient(135deg, #030014, #c084fc) !important; }
.wallpaper-option-3 { background: linear-gradient(135deg, #030014, #e879f9) !important; }
.wallpaper-option-4 { background: linear-gradient(135deg, #030014, #4ade80) !important; }
.wallpaper-option-5 { background: linear-gradient(135deg, #030014, #fbbf24) !important; }

.wallpaper-option.active {
  border-color: var(--cyan) !important;
  box-shadow: 0 0 0 2px rgba(100, 255, 218, 0.28) !important;
}