/* ========== ZeSandbox base.css ========== */

/* Structure de base */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

/* Style générique des photos de profil */
.profile-photo {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 50%;
  cursor: pointer;
}

/* include_page*/

main {
  padding-top: 4.5rem;
  width: 100%;
  flex: 1;
}

.footer {
  position: relative;
  width: 100%;
  bottom: 0;
}




/* NAVBAR*/


/* --- Navbar look shared everywhere --- */
.site-navbar {
  position: sticky;       /* reste en haut sans overlay absolu */
  top: 0;
  z-index: 50;
  background: rgba(13,17,23,0.95); /* #0d1117 /95 */
  backdrop-filter: saturate(150%) blur(6px);
  color: #c9d1d9;
  border-bottom: 1px solid rgba(48,54,61,0.6);
}

.site-navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem 1rem;   /* px-6 py-4 approx */
}

/* brand */
.site-brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  font-size: 1.125rem; /* text-xl */
  color: #c9d1d9;
  text-decoration: none;
}

/* right zone: your existing buttons will sit here */
.site-actions {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

/* buttons look (applies to <a> or <button> you already have) */
.nav-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .9rem;
  border-radius: .55rem;
  background: #21262d;
  color: #c9d1d9;
  border: 1px solid rgba(99,110,123,0.4);
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease;
}
.nav-btn:hover { background:#30363d; border-color: rgba(99,110,123,0.8); }

/* special brand pill (ex: avatar) */
.nav-pill {
  background: #f0b90b;   /* jaune pill */
  color: #111;
  border: none;
}