body, html {
    margin: 0;
    padding: 0;
    background-color: #0f0f12;
    overflow-y: auto;
    font-family: Inter, sans-serif;
}
  :root { --slider-w: 1080px; --slider-h: 250px; }
    /* Surcharges légères pour cette page (garder particles en fond) */
    .app { position: relative; z-index: 1; display: flex; min-height: 100%; background: #0f0f12; color: #e7e7e7; font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
	a{text-decoration:none;}
    /* Sidebar */
	.sidebar{width:72px;background:#15161b;border-right:1px solid #23242b;display:flex;flex-direction:column;padding:14px 10px;transition:width .25s ease}
	.sidebar.expanded{width:240px}
	.sidebar .collapse-btn{display:flex;align-items:center;justify-content:center;height:36px;margin-bottom:8px;border-radius:8px;background:#1c1d24;color:#bbb;cursor:pointer}
	.sidebar .collapse-btn:hover{color:#fff}
	.nav{display:flex;flex-direction:column;gap:6px;margin-top:6px}
	.nav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:#c9c9cf;cursor:pointer;user-select:none}
	.nav-item:hover{background:#1e2027;color:#fff}
	.nav-item i{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff;border-radius:10px;background:linear-gradient(135deg,#ffb703,#ff7b00);flex-shrink:0}
	.nav-item .label{transition:opacity .2s ease,transform .2s ease;white-space:nowrap}
	.sidebar:not(.expanded) .nav-item .label{opacity:0;transform:translateX(-8px);pointer-events:none}
	.sidebar .section-title{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#7b7d86;padding:14px 12px 6px}

    /* Main */
    .main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }

    /* Header */
    .header { display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center; gap: 16px; padding: 12px 16px; border-bottom: 1px solid #23242b; background: #15161b; position: sticky; top: 0; z-index: 2; }
    .brand { display: flex; align-items: center; gap: 12px; }
    .brand img { height: 34px; }
    .search { display: flex; align-items: center; gap: 8px; background: #1b1d24; border: 1px solid #242631; border-radius: 12px; padding: 10px 12px; }
    .search i { color: #8e90a0; }
    .search input { flex: 1; background: transparent; border: 0; outline: 0; color: #e7e7e7; font-size: 14px; }

    .userbox { display: flex; justify-content: flex-end; align-items: center; gap: 14px; }
    .points { background: linear-gradient(90deg,rgba(19, 19, 20, 1) 0%, rgba(34, 35, 38, 1) 50%, rgba(39, 42, 43, 1) 100%); border: solid 1px #ffb703; width: 100%; max-width : 120px; color: #f5f5f5; font-weight: 700; padding: 6px 10px; border-radius: 10px; display: inline-flex; align-items: center; gap: 6px; }
    .user { display: flex; align-items: center; gap: 10px; cursor: pointer; position: relative; }
    .user .avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid #2a2c37; }
    .user .name { font-weight: 600; }
    .user .caret { color: #9c9fb1; }
    .notif { color: #ff5a5f; display: inline-flex; }
    .notif.hidden { display: none; }

    .menu { position: absolute; right: 0; top: 48px; background: #1b1d24; border: 1px solid #2a2c37; border-radius: 12px; min-width: 210px; padding: 8px; display: none; z-index:100; }
    .menu.open { display: block; }
    .menu a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; color: #d8d9df; text-decoration: none; border-radius: 8px; }
    .menu a:hover { background: #232633; color: #fff; }

    /* Content area */
    .content { display: flex; gap: 16px; align-items: stretch; justify-content: center; padding: 18px 18px 32px; }
    .content-inner { width: 1080px; }
    .chat { width: 320px; background: #15161b; border: 1px solid #23242b; border-radius: 14px; display: flex; flex-direction: column;}
    .chat-header { padding: 10px 12px; border-bottom: 1px solid #23242b; font-weight: 600; display:flex; align-items:center; gap:8px; }
    .chat-avatars { display:flex; align-items:center; }
    .chat-avatars img { width:22px; height:22px; border-radius:50%; object-fit:cover; border:1px solid #2a2c37; margin-left:-6px; background:#1b1d24; }
    .chat-messages { padding: 10px 12px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 8px; }
    .msg { display: flex; gap: 8px; }
    .msg img.avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid #2a2c37; }
    .msg .bubble { background: #1b1d24; border: 1px solid #242631; border-radius: 10px; padding: 6px 10px; max-width: 100%; }
    .msg .meta { color: #a7a9b6; font-size: 12px; margin-bottom: 2px; }
    .chat-input { border-top: 1px solid #23242b; padding: 8px; display: flex; gap: 8px; }

    /* Slider */
    .slider { width: var(--slider-w); height: var(--slider-h); border-radius: 14px; border: 1px solid #23242b; background: #11131a; overflow: hidden; position: relative; margin: 6px 0 16px 0; }
    .slides { display: flex; width: 100%; height: 100%; transition: transform .5s ease; }
          .slide { position: relative; min-width: var(--slider-w); height: var(--slider-h); }
          .slide img { width: var(--slider-w); height: var(--slider-h); object-fit: cover; display: block; }
    .slide .overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; text-shadow: 0 2px 6px rgba(0,0,0,.6); font-size: 18px; padding: 0 12px; text-align: center; }

    .hero { background: radial-gradient(1100px 220px at 40% -30%, rgba(255,187,0,.24), transparent), linear-gradient(180deg, #171821 0%, #12131a 100%); border: 1px solid #23242b; border-radius: 18px; padding: 20px; min-height: 170px; display: flex; align-items: center; justify-content: space-between; }
    .hero .cta { display: flex; align-items: center; gap: 14px; }
    .btn { background: linear-gradient(135deg, #ffb703, #ff7b00); border: none; color: #16171d; font-weight: 800; padding: 10px 14px; border-radius: 12px; cursor: pointer; }

    /* Utilitaires */
    .muted { color: #a7a9b6; font-size: 13px; }


    /* BD Carousel */
    .bd-carousel { position: relative; overflow: hidden; }
    .bd-track { display: flex; gap: 10px; overflow: hidden; scroll-behavior: smooth; }
    .bd-item { width: calc((1080px - 5*10px) / 6); flex: 0 0 auto; }
    .bd-thumb { width: 100%; height: 150px; object-fit: cover; border-radius: 8px; border: 1px solid #23242b; display:block; }
    .bd-title { margin-top: 6px; font-size: 13px; color: #d8d9df; text-align: center; }
    .bd-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 999px; background: #1b1d24; border: 1px solid #242631; color:#e7e7e7; display:flex; align-items:center; justify-content:center; z-index: 2; cursor: pointer; }
    .bd-arrow.left { left: 6px; }
    .bd-arrow.right { right: 6px; }
    .bd-grad { position: absolute; top:0; bottom:0; width: 90px; pointer-events: none; z-index: 1; }
    .bd-grad.left { left: 0; background: linear-gradient(90deg, #15161b, rgba(21,22,27,0)); }
    .bd-grad.right { right: 0; background: linear-gradient(270deg, #15161b, rgba(21,22,27,0)); }

    /* Responsive corrections */
@media (max-width: 900px) {
  /* Masquer sidebar et search */
  .sidebar { display: none; }
  .search { display: none; }

  /* Hamburger menu */
  .hamburger.mobile-only { 
    display: inline-flex; 
    background: #1b1d24; 
    border: 1px solid #242631; 
    color: #e7e7e7; 
    border-radius: 8px; 
    width: 36px; 
    height: 36px; 
    align-items: center; 
    justify-content: center; 
  }

/* Mobile menu */
.mobile-menu { 
  display: none; /* caché par défaut */
  flex-direction: column;
  border-bottom: 1px solid #23242b; 
  background: #15161b; 
}

.mobile-menu.open {
  display: flex; /* visible quand la classe "open" est ajoutée */
}

.mobile-menu .nav { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 6px; 
  padding: 8px; 
}


  /* Content layout */
  .content { 
    display: flex; 
    flex-direction: column; 
    align-items: stretch; 
    justify-content: flex-start; /* éviter centering qui bloque le scroll */
	 height: 100%;
  }
  .content-inner { 
    width: 100%; 

    overflow-y: auto; /* permet le scroll */
  }

  /* Slider full width */
  .slide { min-width: 100%; }
  .slider, .slide, .slide img { 
    width: 100%; 
    height: var(--slider-h); 

  }

  /* Fenêtre chat fermée par défaut */
  .chat { 
    display: none; 
    position: absolute; 
    right: 12px; 
    bottom: 64px; 
    width: min(420px, 92vw); 
    height: calc(100% - 120px);  
    max-height: 600px; 
    background: #15161b; 
    border: 1px solid #23242b; 
    border-radius: 14px; 
    flex-direction: column; 
    z-index: 60; 
  }
  .chat.open { display: flex; } /* affichage seulement si "open" */

  /* Bouton flottant toujours présent */
  .chat-fab { 
    display: inline-flex; 
    position: fixed; 
    right: 12px; 
    bottom: 12px; 
    width: 48px; 
    height: 48px; 
    border-radius: 999px; 
    background: linear-gradient(135deg, #ffb703, #ff7b00); 
    color: #16171d; 
    align-items: center; 
    justify-content: center; 
    border: none; 
    box-shadow: 0 8px 24px rgba(0,0,0,.35); 
    z-index: 10000; 
    cursor: pointer;
  }
}


/* Desktop reset */
@media (min-width: 901px) {
  .mobile-menu { display: none !important; }
  .hamburger.mobile-only, .chat-fab { display: none !important; }
}

/* Body & html scroll fixes */

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 6px;        /* largeur de la scrollbar */
}

::-webkit-scrollbar-track {
  background: #15161b; /* couleur du fond du scroll */
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: #444;    /* couleur de la "barre" */
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #666;    /* couleur au survol */
}

/* Firefox */
* {
  scrollbar-width: thin;        /* "thin" pour fin */
  scrollbar-color: #444 #15161b; /* thumb / track */
}