/* ---------- Exoquiz CSS commun ---------- */

/* Conteneur max + marges latérales */
.wrap{max-width:1100px;margin:0 auto;padding:0 12px}
@media(min-width:1200px){.wrap{max-width:1200px}}

/* Marque dans la topbar */
.brand{font-weight:800;letter-spacing:-.01em}
.brand-lg{font-size:1.5rem}@media(min-width:768px){.brand-lg{font-size:1.875rem}}

/* Cartes unifiées */
.card{
  background:var(--card-bg,#fff);border:1px solid var(--border,rgba(0,0,0,.12));
  border-radius:16px;padding:16px;
  box-shadow:0 4px 16px var(--shadow-sm,rgba(0,0,0,.08));
  transition:box-shadow .2s, transform .05s;
}
.card:hover{box-shadow:0 10px 24px var(--shadow-md,rgba(0,0,0,.12))}

/* Variantes badges (aperçu options) */
.badge{display:inline-block;padding:.2rem .5rem;border-radius:999px;
  font-size:.75rem;margin:.15rem .25rem .15rem 0;border:1px solid var(--border,rgba(0,0,0,.12));background:var(--badge-bg,#fff9ef)}
.badge.ok{background:var(--badge-ok-bg,#eaf2ff);color:var(--badge-ok-txt,#175cd3);border-color:var(--badge-ok-bdr,#cfe0ff)}

/* Overlay modale (éditeur) */
.overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:var(--overlay-bg,rgba(0,0,0,.6));z-index:10000}
.modal-card{width:min(800px,92vw);background:var(--card-bg,#fff);border:1px solid var(--border2,rgba(0,0,0,.08));border-radius:18px;padding:24px;box-shadow:0 12px 40px var(--shadow-lg,rgba(0,0,0,.25))}

/* Navbar aérée + séparation (sticky-friendly) */
header.navbar{
  background: var(--navbar-bg, rgba(255,255,255,.85));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border2, rgba(0,0,0,.08));
  padding-top: .6rem;
  padding-bottom: .8rem;
}

/* (Optionnel) Espace supplémentaire sous la navbar */
.nav-gap{ height: 10px; }
@media (min-width: 900px){ .nav-gap{ height: 14px; } }

/* Boutons de la navbar */
header.navbar nav a {
  font-size: 1rem;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  font-weight: 600;
  transition: all .2s ease-in-out;
}

/* État normal : doré avec texte noir */
header.navbar nav a {
  background-color: var(--exoGold, #d4af37);
  color: #111;
  border: 1px solid #b8962e;
}

/* Hover */
header.navbar nav a:hover {
  background-color: #e5c158;
  color: #000;
}

/* Actif (page courante) */
header.navbar nav a.active {
  background-color: #111;
  color: #fff;
  border-color: #111;
}

/* ==== LAYOUT LATÉRAL ==== */
.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}
.sidebar {
  position: sticky; top: 0;
  height: 100vh;
  padding: 16px 14px;
  border-right: 1px solid var(--border2, rgba(0,0,0,.05));
  background: var(--sidebar-bg, #fff);
}
.sidebar .brand {
  display:flex; align-items:center; gap:.5rem;
  font-weight: 800; letter-spacing:.5px; font-size: 20px;
}
.sidebar nav a {
  display:block; margin-top:.5rem;
  padding:.6rem .8rem; border-radius: .75rem;
  border:1px solid rgba(0,0,0,.14);
  background: rgba(0,0,0,.03);
  color: var(--text, #0a1428);
  font-weight: 500;
  transition: filter .15s, background .15s;
}
.sidebar nav a:hover { background: rgba(0,0,0,.06); }
.sidebar nav a.active {
  position: relative;
  overflow: hidden;
  background: linear-gradient(110deg, #3d2800 0%, #2a1c00 30%, #1a1200 55%, #0f172a 100%);
  border-color: rgba(212,175,55,.55);
  color: #ffd43b;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(212,175,55,.2), inset 0 1px 0 rgba(245,196,40,.15);
}
.sidebar nav a.active::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='54'%3E%3Cpath d='M0 0L16 9M32 0L16 9L16 27L0 36L0 54M16 27L32 36L32 54' fill='none' stroke='rgba(212,175,55,.18)' stroke-width='1'/%3E%3C/svg%3E");
  pointer-events: none;
}
@media (max-width: 1199px){
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: relative; height:auto; display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; border-right:none; border-bottom:1px solid var(--border2, rgba(0,0,0,.08)); }
  .sidebar nav { display:flex; flex-wrap: wrap; gap:.5rem; }
  .sidebar .user-card { display:none; }
}

/* ==== BANDEAU SUPÉRIEUR FUN ==== */
.top-banner {
  margin: 12px 0 20px;
  border-radius: 18px;
  border: 1px solid var(--border2, rgba(0,0,0,.06));
  background: linear-gradient(99deg, var(--exoGold, #E0B100) 0%, var(--exoBlue, #2453FF) 100%);
  color: #111;
  padding: 18px;
  display:flex; align-items:center; gap:14px;
}
.top-banner .emoji {
  width:48px; height:48px; border-radius: 12px; background:#fff;
  display:grid; place-items:center; font-weight:900;
  box-shadow: 0 4px 16px var(--shadow-sm, rgba(0,0,0,.08));
}
.top-banner .title {
  font-weight: 800; font-size: 20px; line-height: 1.2;
}
.top-banner .sub { font-size: 13px; opacity:.85; }

/* ==== BOUTON DORÉ (style sombre + nid d'abeille) ==== */
.btn-gold {
  position: relative;
  overflow: hidden;
  background: linear-gradient(110deg, #3d2800 0%, #2a1c00 30%, #1a1200 55%, #0f172a 100%);
  border: 1px solid rgba(212,175,55,.55);
  color: #ffd43b !important;
  font-weight: 700;
  box-shadow: 0 4px 20px rgba(212,175,55,.22), inset 0 1px 0 rgba(245,196,40,.2);
  transition: filter .15s ease, transform .02s ease;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-gold::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='54'%3E%3Cpath d='M0 0L16 9M32 0L16 9L16 27L0 36L0 54M16 27L32 36L32 54' fill='none' stroke='rgba(212,175,55,.18)' stroke-width='1'/%3E%3C/svg%3E");
  pointer-events: none;
}
.btn-gold:hover { filter: brightness(1.1); box-shadow: 0 6px 28px rgba(212,175,55,.35), inset 0 1px 0 rgba(245,196,40,.2); }
.btn-gold:active { transform: translateY(1px); }

/* ==== BOUTON BLEU (variante nid d'abeille) ==== */
.btn-blue {
  position: relative;
  overflow: hidden;
  background: linear-gradient(110deg, #001a4d 0%, #001033 30%, #000d26 55%, #000819 100%);
  border: 1px solid rgba(36,83,255,.6);
  color: #93b4ff !important;
  font-weight: 700;
  box-shadow: 0 4px 20px rgba(36,83,255,.22), inset 0 1px 0 rgba(100,140,255,.2);
  transition: filter .15s ease, transform .02s ease;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-blue::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='54'%3E%3Cpath d='M0 0L16 9M32 0L16 9L16 27L0 36L0 54M16 27L32 36L32 54' fill='none' stroke='rgba(36,83,255,.18)' stroke-width='1'/%3E%3C/svg%3E");
  pointer-events: none;
}
.btn-blue:hover { filter: brightness(1.1); box-shadow: 0 6px 28px rgba(36,83,255,.35), inset 0 1px 0 rgba(100,140,255,.2); }
.btn-blue:active { transform: translateY(1px); }

/* ==== UTILITAIRES ==== */
.full-wrap { padding: 0 16px 24px; }
@media (min-width: 900px){ .full-wrap{ padding: 0 28px 28px; } }