:root {
  --bg-login: #1a1f2e;
  --accent: #5c9eff;
  --accent2: #a78bfa;
  --accent3: #34d399;
  --desk-bg1: #1e2235;
  --desk-bg2: #151929;
  --panel-bg: rgba(15,18,30,0.88);
  --panel-border: rgba(255,255,255,0.08);
  --glass: rgba(255,255,255,0.06);
  --glass-border: rgba(255,255,255,0.12);
  --text: #e2e8f0;
  --text-muted: #64748b;
  --shadow: 0 8px 32px rgba(0,0,0,0.5);
  --radius: 12px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html,body{width:100%;height:100%;overflow:hidden;font-family:'Nunito',sans-serif;}
body{background:var(--bg-login);color:var(--text);user-select:none;}

/* ══════════════════════════════════════════
   LOGIN SCREEN
══════════════════════════════════════════ */
#login-screen {
  position:fixed;inset:0;z-index:200;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background: linear-gradient(135deg, #0f1624 0%, #1a2340 40%, #0d1b35 100%);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
#login-screen.fade-out { opacity:0; transform:scale(1.04); pointer-events:none; }

/* Animated background blobs */
.login-blob {
  position:absolute; border-radius:50%;
  filter:blur(80px); pointer-events:none; animation:blob-drift 12s ease-in-out infinite;
}
.blob1{width:500px;height:500px;background:rgba(92,158,255,0.08);top:-100px;left:-100px;animation-delay:0s;}
.blob2{width:400px;height:400px;background:rgba(167,139,250,0.07);bottom:-80px;right:-60px;animation-delay:-4s;}
.blob3{width:300px;height:300px;background:rgba(52,211,153,0.06);top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:-8s;}
@keyframes blob-drift{0%,100%{transform:scale(1) translateY(0);}50%{transform:scale(1.08) translateY(-20px);}}
.blob3{animation-name:blob-drift3;}
@keyframes blob-drift3{0%,100%{transform:translate(-50%,-50%) scale(1);}50%{transform:translate(-50%,-55%) scale(1.1);}}

.login-card {
  width:380px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:20px;
  padding:2.5rem 2.5rem 2rem;
  backdrop-filter:blur(20px);
  box-shadow:0 25px 60px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.1);
  position:relative;z-index:2;
  animation:card-in 0.7s cubic-bezier(.16,1,.3,1) both;
}
@keyframes card-in{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}}

.login-avatar {
  width:80px;height:80px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  margin:0 auto 1.2rem;
  display:flex;align-items:center;justify-content:center;
  font-size:2rem;
  box-shadow:0 0 0 4px rgba(92,158,255,0.2), 0 8px 20px rgba(92,158,255,0.3);
}
.login-username {
  text-align:center;
  font-size:1.2rem;font-weight:600;
  margin-bottom:0.3rem;
}
.login-hostname {
  text-align:center;
  font-size:0.75rem;color:var(--text-muted);
  font-family:'Fira Code',monospace;
  margin-bottom:1.8rem;
}

.user-switcher {
  display:flex;gap:0.6rem;justify-content:center;margin-bottom:1.5rem;
}
.user-chip {
  display:flex;align-items:center;gap:0.4rem;
  padding:0.3rem 0.8rem;border-radius:20px;
  font-size:0.72rem;cursor:pointer;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  transition:all 0.2s;
}
.user-chip.active { background:rgba(92,158,255,0.15); border-color:rgba(92,158,255,0.4); color:var(--accent); }
.user-chip:hover { background:rgba(255,255,255,0.09); }
.user-chip-dot{width:6px;height:6px;border-radius:50%;background:currentColor;}

.pwd-wrap {
  position:relative;margin-bottom:1rem;
}
.pwd-input {
  width:100%;
  background:rgba(0,0,0,0.3);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:10px;
  color:var(--text);
  font-family:'Nunito',sans-serif;
  font-size:0.95rem;
  padding:0.75rem 2.8rem 0.75rem 1rem;
  outline:none;
  transition:border-color 0.2s, box-shadow 0.2s;
}
.pwd-input:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(92,158,255,0.15);
}
.pwd-input::placeholder{color:var(--text-muted);}
.pwd-toggle {
  position:absolute;right:0.8rem;top:50%;transform:translateY(-50%);
  background:none;border:none;color:var(--text-muted);cursor:pointer;
  font-size:1rem;transition:color 0.2s;
}
.pwd-toggle:hover{color:var(--text);}

.login-btn {
  width:100%;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  border:none;border-radius:10px;
  color:#fff;font-family:'Nunito',sans-serif;
  font-size:0.95rem;font-weight:600;
  padding:0.8rem;cursor:pointer;
  transition:all 0.2s;
  box-shadow:0 4px 15px rgba(92,158,255,0.3);
}
.login-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(92,158,255,0.45);}
.login-btn:active{transform:translateY(0);}

.login-error{
  color:#f87171;font-size:0.75rem;text-align:center;
  min-height:1.2em;margin-top:0.5rem;
  transition:opacity 0.2s;
}

.login-footer {
  position:absolute;bottom:1.5rem;
  display:flex;gap:1.5rem;
  font-size:0.72rem;color:var(--text-muted);
}
.login-footer span{cursor:pointer;transition:color 0.2s;}
.login-footer span:hover{color:var(--text);}

.login-clock {
  position:absolute;top:2rem;
  text-align:center;z-index:2;
}
.login-time{font-size:3.5rem;font-weight:300;letter-spacing:-2px;line-height:1;}
.login-date{font-size:0.85rem;color:var(--text-muted);margin-top:0.3rem;}

/* ══════════════════════════════════════════
   DESKTOP
══════════════════════════════════════════ */
#desktop {
  position:fixed;inset:0;z-index:100;
  display:none;flex-direction:column;
  background: url('wallpaper.jpg') center/cover no-repeat;

/* DEFAULT ACKGROUND
radial-gradient(ellipse at 20% 50%, rgba(92,158,255,0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(167,139,250,0.07) 0%, transparent 50%),
    radial-gradient(ellipse at 60% 80%, rgba(52,211,153,0.05) 0%, transparent 50%),
    linear-gradient(160deg, #1e2640 0%, #141828 50%, #0f1520 100%);*/
}
#desktop.visible{display:flex;}

/* Subtle grid overlay */
#desktop::before{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size:40px 40px;
  pointer-events:none;
}

/* TOPBAR */
#topbar {
  height:32px;
  background:var(--panel-bg);
  border-bottom:1px solid var(--panel-border);
  backdrop-filter:blur(20px);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 1rem;
  flex-shrink:0;z-index:50;position:relative;
}
.topbar-left{display:flex;align-items:center;gap:0.5rem;}
.tb-menu-btn{
  background:none;border:none;color:var(--text);
  font-size:0.75rem;font-family:'Nunito',sans-serif;
  padding:0.2rem 0.6rem;border-radius:6px;cursor:pointer;
  transition:background 0.15s;display:flex;align-items:center;gap:0.3rem;
}
.tb-menu-btn:hover{background:rgba(255,255,255,0.08);}
.tb-logo{font-weight:700;color:var(--accent);font-size:0.8rem;}
.topbar-center{font-size:0.75rem;color:var(--text-muted);font-family:'Fira Code',monospace;}
.topbar-right{display:flex;align-items:center;gap:0.8rem;font-size:0.72rem;color:var(--text-muted);}
.tb-icon{cursor:pointer;transition:color 0.15s;font-size:0.85rem;}
.tb-icon:hover{color:var(--text);}
#tb-clock{color:var(--text);font-weight:500;}

/* DESKTOP ICONS AREA */
#desk-icons {
  flex:1;
  padding:1.2rem;
/*  display:grid;*/
/*  grid-template-columns:repeat(auto-fill,80px);*/
/*  grid-auto-rows:90px;*/
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  align-content:start;
  gap:0.5rem;
  position:relative;overflow:hidden;
}

.desk-icon {
  display:flex;flex-direction:column;align-items:center;
  justify-content:flex-start;padding:0.6rem 0.3rem 0.4rem;
  border-radius:10px;cursor:pointer;
  transition:background 0.15s;
  position:relative;
  border:1px solid transparent;
}
.desk-icon:hover{
  background:rgba(255,255,255,0.07);
  border-color:rgba(255,255,255,0.1);
}
.desk-icon.selected{
  background:rgba(92,158,255,0.15);
  border-color:rgba(92,158,255,0.35);
}
.desk-icon-img{
  width:48px;height:48px;
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:26px;margin-bottom:0.4rem;
  flex-shrink:0;
  box-shadow:0 4px 10px rgba(0,0,0,0.3);
  transition:transform 0.15s;
}
.desk-icon:hover .desk-icon-img{transform:scale(1.08);}
.desk-icon:active .desk-icon-img{transform:scale(0.95);}
.desk-icon-label{
  font-size:0.65rem;font-weight:500;
  text-align:center;line-height:1.3;
  text-shadow:0 1px 4px rgba(0,0,0,0.8);
  word-break:break-word;
  max-width:74px;
}

/* Icon colors */
.ico-pdf{background-image: linear-gradient(to right, #43e97b 0%, #38f9d7 100%);}
.ico-web{background-image: linear-gradient(to right, #43e97b 0%, #38f9d7 100%);}
.ico-github img {
  width: 100%;       /* Prend la largeur du conteneur parent */
  height: 100%;      /* Prend la hauteur du conteneur parent */
  object-fit: contain; /* Conserve les proportions de l'image */
  display: block;    /* Évite les espaces blancs sous l'image */
  background-image: linear-gradient(to right, #43e97b 0%, #38f9d7 100%);
  border-radius: 20%;
}
.ico-wiki img {
  width: 100%;      
  height: 100%;      
  object-fit: contain;
  display: block; 
  background-image: linear-gradient(to right, #43e97b 0%, #38f9d7 100%);
  border-radius: 20%;}
.ico-mail{background-image: linear-gradient(to right, #43e97b 0%, #38f9d7 100%);}
.ico-music{background-image: linear-gradient(to right, #43e97b 0%, #38f9d7 100%);}

/*à supprimer probablement*/
/*.ico-term{background:linear-gradient(135deg,#111,#000);font-family:'Fira Code',monospace;font-size:0.85rem;font-weight:700;color:#39ff14;letter-spacing:-1px;}*/
/*.ico-folder{background:linear-gradient(135deg,#f59e0b,#d97706);}*/
/*.ico-settings{background:linear-gradient(135deg,#475569,#334155);}*/
/*.ico-trash{background:linear-gradient(135deg,#6b7280,#4b5563);}*/


/* TASKBAR */
#taskbar {
  height:52px;
  background:var(--panel-bg);
  border-top:1px solid var(--panel-border);
  backdrop-filter:blur(20px);
  display:flex;align-items:center;justify-content:center;
  gap:0.4rem;padding:0 1rem;
  flex-shrink:0;z-index:50;position:relative;
}

.task-btn {
  width:42px;height:42px;border-radius:10px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;cursor:pointer;
  transition:all 0.15s;position:relative;
}
.task-btn:hover{background:rgba(255,255,255,0.12);transform:translateY(-3px);}
.task-btn.active{background:rgba(92,158,255,0.2);border-color:rgba(92,158,255,0.4);}
.task-btn .task-dot{
  position:absolute;bottom:3px;
  width:4px;height:4px;border-radius:50%;background:var(--accent);
}
.task-sep{width:1px;height:28px;background:rgba(255,255,255,0.08);margin:0 0.2rem;}

/* WINDOW */
.win {
  position:absolute;
  background:rgba(20,24,40,0.95);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04) inset;
  overflow:hidden;
  min-width:320px;min-height:200px;
  display:flex;flex-direction:column;
  backdrop-filter:blur(20px);
  animation:win-open 0.2s cubic-bezier(.16,1,.3,1) both;
  z-index:10;
}
@keyframes win-open{from{opacity:0;transform:scale(0.92);}to{opacity:1;transform:scale(1);}}
.win.closing{animation:win-close 0.15s ease forwards;}
@keyframes win-close{to{opacity:0;transform:scale(0.9);}}

.win-titlebar {
  height:36px;
  background:rgba(255,255,255,0.04);
  border-bottom:1px solid rgba(255,255,255,0.07);
  display:flex;align-items:center;
  padding:0 0.8rem;gap:0.5rem;
  cursor:move;flex-shrink:0;
}
.win-btn{width:12px;height:12px;border-radius:50%;border:none;cursor:pointer;transition:filter 0.15s;}
.win-btn:hover{filter:brightness(1.3);}
.win-btn.close{background:#ff5f57;}
.win-btn.min{background:#febc2e;}
.win-btn.max{background:#28c840;}
.win-title{flex:1;text-align:center;font-size:0.75rem;color:var(--text-muted);font-weight:500;}
.win-content{flex:1;overflow:auto;padding:1rem;}
.win-content::-webkit-scrollbar{width:4px;}
.win-content::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:2px;}

/* PDF VIEWER */
.pdf-viewer{display:flex;flex-direction:column;height:100%;}
.pdf-toolbar{
  display:flex;align-items:center;gap:0.5rem;
  padding:0.5rem 0;margin-bottom:0.75rem;
  border-bottom:1px solid rgba(255,255,255,0.07);
  flex-shrink:0;
}
.pdf-toolbar-btn{
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);
  border-radius:6px;color:var(--text);padding:0.25rem 0.6rem;
  font-size:0.72rem;cursor:pointer;transition:background 0.15s;
}
.pdf-toolbar-btn:hover{background:rgba(255,255,255,0.12);}
.pdf-page{
  background:#fff;color:#111;
  border-radius:6px;padding:2rem 2.5rem;
  flex:1;overflow-y:auto;font-size:0.82rem;line-height:1.7;
  box-shadow:0 4px 20px rgba(0,0,0,0.4);
}
.pdf-page h1{font-size:1.3rem;margin-bottom:0.5rem;color:#1a1a2e;}
.pdf-page h2{font-size:1rem;margin:1rem 0 0.4rem;color:#2d2d4e;}
.pdf-page p{margin-bottom:0.6rem;color:#333;}
.pdf-page hr{border:none;border-top:1px solid #ddd;margin:1rem 0;}
.pdf-page .pdf-meta{color:#888;font-size:0.72rem;margin-bottom:1rem;}

/* FILE MANAGER */
.fm-sidebar{
  width:140px;float:left;height:100%;
  border-right:1px solid rgba(255,255,255,0.07);
  padding:0 0.5rem 0 0;
  font-size:0.75rem;
}
.fm-main{flex:1;overflow-y:auto;padding-left:1rem;min-width:0;}
.fm-section{font-size:0.65rem;color:var(--text-muted);letter-spacing:0.08em;text-transform:uppercase;margin:0.8rem 0 0.3rem 0.3rem;}
.fm-item{
  display:flex;align-items:center;gap:0.4rem;
  padding:0.3rem 0.5rem;border-radius:6px;cursor:pointer;
  transition:background 0.15s;font-size:0.75rem;
}
.fm-item:hover{background:rgba(255,255,255,0.07);}
.fm-item.active{background:rgba(92,158,255,0.15);color:var(--accent);}
.fm-files{display:grid;grid-template-columns:repeat(auto-fill,80px);gap:0.8rem;align-content:start;}
.fm-file{
  display:flex;flex-direction:column;align-items:center;gap:0.3rem;
  padding:0.4rem;border-radius:8px;cursor:pointer;
  transition:background 0.15s;text-align:center;
}
.fm-file:hover{background:rgba(255,255,255,0.07);}
.fm-file span:first-child{font-size:1.8rem;}
.fm-file span:last-child{font-size:0.62rem;word-break:break-all;}

/* TERMINAL WIN */
.term-win{
  background:#0a0d0a;padding:0.75rem;
  font-family:'Fira Code',monospace;font-size:0.78rem;
  color:#39ff14;line-height:1.7;height:100%;overflow-y:auto;
}
.term-win::-webkit-scrollbar{width:3px;}
.term-win::-webkit-scrollbar-thumb{background:#1a4a1a;}
.term-input-wrap{display:flex;align-items:center;gap:0.2rem;margin-top:0.2rem;}
.term-prompt{color:#39ff14;white-space:nowrap;font-size:0.78rem;}
#term-input{
  background:none;border:none;outline:none;
  color:#d4e8d4;font-family:'Fira Code',monospace;font-size:0.78rem;
  flex:1;caret-color:#39ff14;
}

/* SETTINGS WIN */
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.setting-card{
  background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07);
  border-radius:10px;padding:0.9rem;
}
.setting-card h4{font-size:0.78rem;margin-bottom:0.6rem;color:var(--accent);}
.setting-row{display:flex;align-items:center;justify-content:space-between;font-size:0.72rem;margin-bottom:0.4rem;}
.toggle{width:32px;height:18px;background:#374151;border-radius:9px;cursor:pointer;position:relative;transition:background 0.2s;}
.toggle.on{background:var(--accent);}
.toggle::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;background:#fff;border-radius:50%;transition:transform 0.2s;}
.toggle.on::after{transform:translateX(14px);}
.theme-dots{display:flex;gap:0.4rem;margin-top:0.4rem;}
.theme-dot{width:20px;height:20px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:border-color 0.15s;}
.theme-dot.sel{border-color:#fff;}

/* CONTEXT MENU */
#ctx-menu {
  position:fixed;z-index:1000;
  background:rgba(20,24,40,0.97);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:10px;padding:0.4rem;
  box-shadow:0 10px 30px rgba(0,0,0,0.6);
  backdrop-filter:blur(20px);
  min-width:170px;display:none;
  animation:ctx-in 0.12s ease;
}
@keyframes ctx-in{from{opacity:0;transform:scale(0.95);}to{opacity:1;transform:scale(1);}}
.ctx-item{
  display:flex;align-items:center;gap:0.6rem;
  padding:0.45rem 0.8rem;border-radius:7px;
  font-size:0.78rem;cursor:pointer;transition:background 0.12s;
}
.ctx-item:hover{background:rgba(255,255,255,0.08);}
.ctx-item.danger{color:#f87171;}
.ctx-sep{height:1px;background:rgba(255,255,255,0.07);margin:0.3rem 0;}

/* NOTIFICATION */
.notif {
  position:fixed;top:48px;right:1rem;z-index:500;
  background:rgba(20,24,40,0.95);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:12px;padding:0.75rem 1rem;
  box-shadow:var(--shadow);backdrop-filter:blur(20px);
  display:flex;align-items:center;gap:0.7rem;
  font-size:0.78rem;min-width:240px;
  animation:notif-in 0.3s cubic-bezier(.16,1,.3,1);
  transition:opacity 0.3s, transform 0.3s;
}
.notif.out{opacity:0;transform:translateX(20px);}
@keyframes notif-in{from{opacity:0;transform:translateX(20px);}to{opacity:1;transform:translateX(0);}}
.notif-icon{font-size:1.4rem;}
.notif-body p:first-child{font-weight:600;margin-bottom:0.1rem;}
.notif-body p:last-child{color:var(--text-muted);font-size:0.7rem;}

/* START BUTTON */
#start-btn {
  width:42px;height:42px;border-radius:10px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  border:none;display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;cursor:pointer;
  box-shadow:0 2px 10px rgba(92,158,255,0.4);
  transition:all 0.15s;flex-shrink:0;
}
#start-btn:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(92,158,255,0.6);}
#start-btn.open{background:linear-gradient(135deg,var(--accent2),var(--accent));}

/* START MENU */
#start-menu {
  position:fixed;bottom:60px;left:8px;
  width:580px;height:480px;z-index:200;
  background:rgba(13,16,30,0.97);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:16px;
  box-shadow:0 -8px 40px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04) inset;
  backdrop-filter:blur(30px);
  display:none;flex-direction:column;
  overflow:hidden;
  transition:opacity 0.18s, transform 0.18s;
  opacity:0;transform:translateY(10px) scale(0.98);
}
#start-menu.visible{display:flex;opacity:1;transform:translateY(0) scale(1);}

.sm-top {
  display:flex;align-items:center;gap:0.8rem;
  padding:1rem 1.2rem 0.8rem;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.sm-user-av {
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;
  box-shadow:0 0 0 2px rgba(92,158,255,0.3);
}
.sm-user-info {font-size:0.85rem;font-weight:600;}
.sm-user-sub {font-size:0.68rem;color:var(--text-muted);}
.sm-search {
  flex:1;background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.1);border-radius:8px;
  color:var(--text);font-family:'Nunito',sans-serif;font-size:0.82rem;
  padding:0.45rem 0.8rem;outline:none;
  transition:border-color 0.2s;
}
.sm-search:focus{border-color:var(--accent);}
.sm-search::placeholder{color:var(--text-muted);}

.sm-body {display:flex;flex:1;min-height:0;}

.sm-sidebar {
  width:150px;flex-shrink:0;
  border-right:1px solid rgba(255,255,255,0.06);
  padding:0.6rem 0.4rem;
  display:flex;flex-direction:column;gap:0.1rem;
}
.sm-cat {
  display:flex;align-items:center;gap:0.5rem;
  padding:0.45rem 0.7rem;border-radius:8px;
  font-size:0.75rem;cursor:pointer;
  transition:background 0.12s;color:var(--text-muted);
}
.sm-cat:hover{background:rgba(255,255,255,0.07);color:var(--text);}
.sm-cat.active{background:rgba(92,158,255,0.15);color:var(--accent);}
.sm-cat-icon{font-size:1rem;width:20px;text-align:center;}

.sm-apps {
  flex:1;padding:0.6rem 0.5rem;
  overflow-y:auto;display:flex;flex-direction:column;gap:0.15rem;
}
.sm-apps::-webkit-scrollbar{width:3px;}
.sm-apps::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:2px;}

.sm-app {
  display:flex;align-items:center;gap:0.7rem;
  padding:0.5rem 0.7rem;border-radius:8px;
  cursor:pointer;transition:background 0.12s;
}
.sm-app:hover{background:rgba(255,255,255,0.07);}
.sm-app-icon {
  width:34px;height:34px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;
  box-shadow:0 2px 6px rgba(0,0,0,0.3);
  
}

.sm-app-icon img {
  width: 60%;       /* L'image prend 60% de la largeur du carré (ajustez si trop petit/grand) */
  height: 60%;      /* Idem pour la hauteur */
  object-fit: contain; /* Conserve les proportions de l'image sans la déformer */
  display: block;   /* Évite les espaces blancs fantômes sous l'image */
  margin: auto;     /* Centre l'image horizontalement */
}

.sm-app-info {flex:1;min-width:0;}
.sm-app-name{font-size:0.8rem;font-weight:500;}
.sm-app-desc{font-size:0.65rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.sm-bottom {
  display:flex;align-items:center;justify-content:space-between;
  padding:0.7rem 1rem;
  border-top:1px solid rgba(255,255,255,0.06);
}
.sm-power-btns{display:flex;gap:0.5rem;}
.sm-power-btn {
  display:flex;align-items:center;gap:0.4rem;
  background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);
  border-radius:8px;color:var(--text);padding:0.4rem 0.8rem;
  font-size:0.72rem;cursor:pointer;font-family:'Nunito',sans-serif;
  transition:all 0.15s;
}
.sm-power-btn:hover{background:rgba(255,255,255,0.1);}
.sm-power-btn.danger:hover{background:rgba(248,113,113,0.15);border-color:rgba(248,113,113,0.3);color:#f87171;}

/* ══════════════════════════════════════
   MOBILE VIEW
══════════════════════════════════════ */

#mobile-view { display:none; }

@media (max-width: 768px) {
  #mobile-view {
    font-family:'Nunito',sans-serif;
    display:flex; flex-direction:column;
    align-items:center; justify-content:flex-start;
    min-height:100vh; padding:3rem 1.5rem 2rem;
    background:linear-gradient(160deg,#0f1624 0%,#1a2340 50%,#0d1b35 100%);
  }
  #login-screen, #desktop { display:none !important; }

  .mob-avatar {
    width:110px; height:110px; border-radius:50%;
    background:linear-gradient(135deg,#5c9eff,#a78bfa);
    display:flex; align-items:center; justify-content:center;
    font-size:3.2rem;
    box-shadow:0 0 0 4px rgba(92,158,255,0.2), 0 8px 32px rgba(0,0,0,0.4);
    margin-bottom:1.2rem; overflow:hidden;
  }
  .mob-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
  .mob-name { font-size:1.6rem; font-weight:700; color:#e2e8f0; margin-bottom:0.3rem; }
  .mob-sub { font-size:0.85rem; color:#64748b; margin-bottom:2.2rem; text-align:center; }
  .mob-links { display:flex; flex-direction:column; gap:0.85rem; width:100%; max-width:320px; margin-bottom:1.2rem; }
  .mob-link {
    display:flex; align-items:center; gap:0.9rem;
    padding:0 1.2rem; height:56px;
    background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.09);
    border-radius:14px; color:#e2e8f0; text-decoration:none;
    font-size:1rem; font-weight:500; transition:background 0.15s,transform 0.15s;
    -webkit-tap-highlight-color:transparent;
  }
  .mob-link:active { background:rgba(255,255,255,0.1); transform:scale(0.97); }
  .mob-link-icon {
    width:36px; height:36px; border-radius:9px;
    display:flex; align-items:center; justify-content:center;
    font-size:1rem; flex-shrink:0;
  }
  .mob-cv {
    width:100%; max-width:320px; height:56px;
    background:linear-gradient(135deg,rgba(92,158,255,0.15),rgba(167,139,250,0.15));
    border:1px solid rgba(92,158,255,0.3); border-radius:14px;
    color:#e2e8f0; text-decoration:none; font-size:1rem; font-weight:600;
    display:flex; align-items:center; justify-content:center; gap:0.6rem;
    transition:background 0.15s,transform 0.15s;
    -webkit-tap-highlight-color:transparent;
  }
  .mob-cv:active { transform:scale(0.97); }
  .mob-footer { margin-top:2.5rem; font-size:0.65rem; color:#334155; text-align:center; }
}