body{
    text-align: center;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    background: #020024;
   background: linear-gradient(325deg, rgb(30, 30, 30) 18%, rgb(30, 30, 30) 55%, rgb(30, 30, 30) 99%);
    margin: 0;
    height: 100vh;
    padding: 0;
    font-size: x-small;
}
/* ===== SIDEBAR BASE ===== */
.sidebar {
  width: 270px;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;

  background: linear-gradient(180deg, #0f172a 0%, #020617 100%);
  color: #fff;

  padding: 20px;
  border-radius: 0 20px 20px 0;

  transform: translateX(-110%);
  transition: transform 0.5s cubic-bezier(0.77, 0, 0.18, 1),
              box-shadow 0.5s;

  z-index: 999;
  overflow-y: auto;

  box-shadow: 0 0 0 rgba(0,0,0,0);
  
}

/* ===== ACTIVE ===== */
.sidebar.active {
  transform: translateX(0);
  box-shadow: 15px 0 60px rgba(0,0,0,0.7);
  animation: sidebarReveal 0.6s ease;
}

/* ===== OVERLAY (OPTIONNEL MAIS PRO) ===== */
.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: 0.4s;
}

.sidebar-overlay.active {
  opacity: 1;
  pointer-events: all;
}

/* ===== LIST ===== */
.sidebar ul {
  list-style: none;
  padding: 0;
}

/* ===== ITEMS ===== */
.sidebar ul li {
  margin: 12px 0;
  opacity: 0;
  transform: translateX(-20px);
  animation: itemSlide 0.5s forwards;
}

/* delay animation (effet cascade 🔥) */
.sidebar.active ul li:nth-child(1) { animation-delay: 0.1s; }
.sidebar.active ul li:nth-child(2) { animation-delay: 0.2s; }
.sidebar.active ul li:nth-child(3) { animation-delay: 0.3s; }
.sidebar.active ul li:nth-child(4) { animation-delay: 0.4s; }
.sidebar.active ul li:nth-child(5) { animation-delay: 0.5s; }

/* ===== LINKS ===== */
.sidebar ul li a {
  color: #cbd5f5;
  text-decoration: none;
  font-size: 15px;
  display: block;
  padding: 10px;
  border-radius: 10px;
  transition: 0.3s;
}

/* HOVER LIEN */
.sidebar ul li a:hover {
  background: rgba(0,195,255,0.1);
  color: #00c3ff;
  transform: translateX(8px);
}

/* ===== BOUTONS ===== */
.sidebar button {
  display: flex;
  align-items: center;
  gap: 10px;

  width: 100%;
  max-width: 180px;
  padding: 15px;
  margin: 10px;

  border-radius: 12px;
  border: none;

  background: rgba(255,255,255,0.05);
  color: #fff;

  cursor: pointer;
  transition: 0.3s;

  position: relative;
  overflow: hidden;
}

/* EFFET LUMIÈRE (hover 🔥) */
.sidebar button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.4), transparent);
  transition: 0.5s;
}

.sidebar button:hover::before {
  left: 100%;
}

.sidebar button:hover {
  transform: scale(1.05);
  background: rgba(0,195,255,0.2);
  box-shadow: 0 10px 25px rgba(0,195,255,0.3);
}

/* ===== USER CARD ===== */
.sidebar-user {
  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 15px;
  border-radius: 15px;

  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(10px);

  box-shadow: 0 10px 25px rgba(0,0,0,0.4);
  margin-bottom: 20px;

  animation: fadeUp 0.8s ease;
}

/* AVATAR */
.sidebar-avatar img {
  width: 70px;
  height: 70px;
  border-radius: 50%;

  border: 3px solid transparent;
  background: linear-gradient(#0f172a, #0f172a) padding-box,
              linear-gradient(45deg, #00c3ff, #7c3aed) border-box;

  transition: 0.4s;
}

.sidebar-avatar img:hover {
  transform: scale(1.15) rotate(5deg);
}

/* USERNAME */
.sidebar-username {
  margin-top: 8px;
  font-size: 14px;
  color: #e2e8f0;
}

/* ===== ACTION BUTTON ===== */
.sidebar-btn {
  padding: 10px;
  border-radius: 8px;
  background: linear-gradient(135deg, #00c3ff, #7c3aed);
  color: white;
  border: none;
  cursor: pointer;
  transition: 0.3s;
}

.sidebar-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 10px 30px rgba(124,58,237,0.5);
}

/* ===== SCROLLBAR ===== */
.sidebar::-webkit-scrollbar {
  width: 5px;
}
.sidebar::-webkit-scrollbar-thumb {
  background: linear-gradient(#00c3ff, #7c3aed);
  border-radius: 10px;
}

/* ===== ANIMATIONS ===== */

/* apparition sidebar */
@keyframes sidebarReveal {
  from {
    transform: translateX(-110%) scale(0.95);
  }
  to {
    transform: translateX(0) scale(1);
  }
}

/* items cascade */
@keyframes itemSlide {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* fade up */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


 .overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.4);
      display: none;
      z-index: 888;
      pointer-events: none;
    }
.overlay.active {
    display: block;
    pointer-events: auto;
}

.icon {
    margin-right: 10px;
}

.scrollable-button::-webkit-scrollbar{
    width: 6px;
}
.scrollable-button::-webkit-scrollbar-thumb{
    background-color: #ccc;
    border-radius: 4px;
}
.scrollable-button :hover {
background-color: white;
border-radius: 25px;
transition:0.6s;
}
.scrollable-button::-webkit-scrollbar{
    width: 6px;
    }
.scrollable-button::-webkit-scrollbar-thumb{
    background-color: #ccc;
    border-radius: 4px;
    }
.scrollable-button {
   flex: 1;
   flex-direction: column;
   margin: 10px 0;
   max-height: 20.5vh ;
   text-align: left;
   overflow-x: hidden;
   overflow-y: auto;
   scrollbar-width: thin;
   scrollbar-color: transparent;
   box-sizing: border-box;
   padding: 25px 35px 15px 20px;
   background-color: transparent;
   font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    }
.scrollable-button :hover {
background-color: white;
border-radius: 25px;
transition:0.6s;
    }

.scrollable-button.locked{
    opacity: 0.5;
    cursor: not-allowed;
    position: relative;
}
.scrollable-button.locked::after{
    content: "🔒";
    font-size: 0.9em;
}

.scrollable-button.locked:hover{
    background: #2a2a2a;
    color: #888;
}




/* Dashboard */
.dashboard-btn{
    background:#fcfdff;
    color:rgb(0, 0, 0);
}

.dashboard-btn:hover{
    background:#1d4ed8;
}

/* Déconnexion */
.logout-btn{
    background:white;
    border:1px solid #ef4444;
    color:#ef4444;
}

.logout-btn:hover{
    background:#ef4444;
    color:white;
}


.toggle-btn {
    position: fixed;
    top: 259px;
    left: 0px;
    font-size: 24px;
    background: #030000;
    background: linear-gradient(166deg, rgba(3, 0, 0, 0) 0%, rgba(60, 94, 243, 1) 0%, rgba(56, 94, 214, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(13, 0, 0, 1) 100%);
    color: rgb(16, 1, 1);
    padding: 02px 05px;
    cursor: pointer;
    z-index: 1000;
    border-radius: 8px;
}
@keyframes floatEffect {
    0%{ 
        transform: translateY(0);
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }
    50%{
        transform: translateY(-8px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);

    }
    100%{
        transform: translateY(0);
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }
}
.float-on-click { 
    animation: floatEffect 0.5s ease;
}
.content{ 
    margin-left: 200px;
    padding: 20px;
    transition: margin-left 0.3s ease;
    flex: 1;
}


.button ::content {
    display: flex;
    align-items: center;
    gap: 10px;
    }


.button.actif {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgb(0, 0, 0.3);
    background-color: #e0e0e0;
    border: 2px solid black;
    }
.toggle-btn {
    position: fixed;
    top: 20px;
    left: 4px;
    font-size: 16px;
    background: #030000;
    background: linear-gradient(166deg, rgba(3, 0, 0, 0) 0%, rgba(60, 94, 243, 1) 0%, rgba(56, 94, 214, 1) 0%, rgb(0, 0, 0) 0%, rgba(13, 0, 0, 1) 100%);
    color: rgb(255, 255, 255);
    padding: 06px 09px;
    cursor: pointer;
    z-index: 1000;
    border-radius: 8px;
    animation: slideIn 1.5s ease-in-out;
    transition: margin-left 0.9s ease;
    }
    .toggle-btn.shifted {
        margin-left: 253px;
    }


    #main-wrapper {
        margin-left: 0;
        transition: margin-left 0.9s ease;
        padding: 0px;
    }
     #main-wrapper.shifted {
        margin-left: 253px;
     }
.content{ 
    margin-left: 200px;
    padding: 20px;
    transition: margin-left 0.3s ease;
    flex: 1;
    }


@keyframes floatEffect {
    0%{ 
        transform: translateY(0);
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }
    50%{
        transform: translateY(-8px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);

    }
    100%{
        transform: translateY(0);
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }
}


.icon, .text {
     user-select: none;
     pointer-events: none;
    }
@keyframes slideIn {
    0% { 
        opacity: 0;
        transform: translateX(-30px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

html{
    scroll-behavior: smooth;
}

#cookie-banner {
    display: none;
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: #1a1a1a;
    color: white;
    padding: 25px;
    border-radius: 8px;
    border-top: 4px solid #0066cc;
    z-index: 10000;
    font-family: 'Segoe UI', sans-serif;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    transition: transform 0.4s ease, opacity 0.4s ease;
    transform: translateY(20px);
    opacity: 0;
}
#cookie-banner.show {
    transform: translateY(0);
    opacity: 1;
}
#cookie-banner h4 { margin: 0 0 10px 0; color:#0066cc; }
#cookie-banner p { font-size: 13px; line-height: 1.5; margin-bottom: 15px; }
.cookie-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.cookie-actions button {
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    border: none;
}
.cookie-actions button[data-cookie="accept-all"] { background: #0066cc; color: #fff; }
.cookie-actions button[data-cookie="essential-only"] { background: transparent; color: #bbb; border:1px solid #444; }
.cookie-actions a { color: #0066cc; font-size: 13px; align-self: center; text-decoration: none; }
@media(max-width: 600px){
    #cookie-banner { left:10px; right:10px; padding:15px; }
}


/* =========================
   TABLETTE (≤ 1024px)
========================= */
@media (max-width: 1024px) {

  body {
    font-size: 15px;
  }

  /* SIDEBAR */
  .sidebar {
    width: 240px;
  }

  /* CONTENU */
  #main-wrapper.shifted {
    margin-left: 240px;
  }

  .content {
    padding: 15px;
  }

  /* TOGGLE */
  .toggle-btn {
    top: 15px;
    left: 10px;
    font-size: 16px;
  }

  /* USER */
  .sidebar-avatar img {
    width: 60px;
    height: 60px;
  }

}


/* =========================
   MOBILE (≤ 768px)
========================= */
@media (max-width: 768px) {

  body {
    font-size: 14px;
  }

  /* SIDEBAR MOBILE */
  .sidebar {
    width: 50%;
    max-width: 280px;
    border-radius: 0 15px 15px 0;
  }

  /* IMPORTANT: PAS DE DÉCALAGE */
  #main-wrapper.shifted {
    margin-left: 0;
  }

  .content {
    margin-left: 0;
    padding: 12px;
  }

  /* TOGGLE FIX */
  

  /* USER */
  .sidebar-user {
    padding: 12px;
  }

  .sidebar-avatar img {
    width: 55px;
    height: 55px;
  }

  .sidebar-username {
    font-size: 12px;
  }

  /* BOUTONS */
  .sidebar button {
    font-size: 13px;
    padding: 15px;

  }

  .sidebar-btn {
    font-size: 13px;
  }

  /* SCROLL */
  .scrollable-button {
    max-height: 30vh;
    padding: 12px;
  }

}


/* =========================
   PETITS MOBILES (≤ 480px)
========================= */
@media (max-width: 480px) {

  body {
    font-size: 13px;
  }

  /* SIDEBAR FULLSCREEN */
  .sidebar {
    width: 100%;
    border-radius: 0;
  }

  /* TOGGLE */
  .toggle-btn {
    top: 12px;
    left: 8px;
    font-size: 14px;
  }

  /* USER */
  .sidebar-avatar img {
    width: 50px;
    height: 50px;
  }

  .sidebar-username {
    font-size: 11px;
  }

  /* BOUTONS */
  .sidebar button {
    font-size: 12px;
    padding: 14px;
  }

  .sidebar-btn {
    font-size: 12px;
  }

}


/* =========================
   TRÈS PETITS ÉCRANS (≤ 360px)
========================= */
@media (max-width: 360px) {

  body {
    font-size: 12px;
  }

  .sidebar-avatar img {
    width: 45px;
    height: 45px;
  }

  .sidebar-username {
    font-size: 10px;
  }

  .sidebar button {
    font-size: 11px;
    padding: 14px;
    margin: 10px;
  }

}


/* =========================
   GRAND ÉCRAN (≥ 1440px)
========================= */
@media (min-width: 1440px) {

  .sidebar {
    width: 280px;
  }

  #main-wrapper.shifted {
    margin-left: 280px;
  }

  .content {
    max-width: 1200px;
    margin: auto;
  }
}

#aether-widget-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#aether-trigger {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #39b7c7, #2c5364);
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    transition: transform 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

#aether-trigger:hover {
    transform: scale(1.1) rotate(10deg);
}

#aether-chat-window {
    position: absolute;
    bottom: 80px;
    right: 0;
    width: 350px;
    height: 500px;
    background: white;
    border-radius: 15px;
    display: none; /* Masqué par défaut */
    flex-direction: column;
    overflow: hidden;
    animation: slideIn 0.3s ease-out;
}

.aether-header {
    background: #203a43;
    color: white;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    font-size: 0.9rem;
}

.hidden { display: none; }
.flex { display: flex; }

@keyframes slideIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}