:root{
  --bg0:#07040e;
  --bg1:#0b0614;
  --bg2:#140a2a;
  --card: rgba(255,255,255,.06);
  --card2: rgba(255,255,255,.04);
  --stroke: rgba(255,255,255,.10);
  --txt: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.62);
  --accent:#a855f7;
  --accent2:#7c3aed;
  --shadow: 0 18px 50px rgba(0,0,0,.55);
}

html,body{
  height:100%;
  min-height:100%;
  background: radial-gradient(1200px 600px at 20% 0%, rgba(168,85,247,.20), transparent 55%),
              radial-gradient(1000px 520px at 80% 10%, rgba(124,58,237,.20), transparent 60%),
              linear-gradient(180deg, var(--bg2) 0%, var(--bg1) 35%, var(--bg0) 100%);
  background-attachment: fixed; /* évite l’effet “coupure” */
  color: var(--txt);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

/* évite qu’un wrapper remette un fond opaque */
main, .page, .container{
  background: transparent !important;
}

a{ color: rgba(216,180,254,.95); text-decoration:none; }
a:hover{ color: #fff; }

.container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.page{
  padding: 28px 0 40px;
}

.mt-16{ margin-top: 16px; }

.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--stroke);
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
}
.topbar__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
}
.topbar__left{ display:flex; align-items:center; gap:14px; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; }
.topbar__link{ color: var(--muted); font-size: 14px; }
.topbar__link:hover{ color:#fff; }
.topbar__right{ display:flex; align-items:center; gap:14px; }
.topbar__user{ color: var(--muted); font-size: 14px; }

.linklike{
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  font-size: 14px;
}
.linklike:hover{ color:#fff; }

.footer{
  border-top: 1px solid var(--stroke);
  margin-top: 24px;
}
.footer__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 24px;
  color: rgba(255,255,255,.45);
  font-size: 12px;
}

.alert{
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.05);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: var(--shadow);
}
.alert--ok{ border-color: rgba(16,185,129,.35); background: rgba(16,185,129,.08); }
.alert--err{ border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.08); }
.alert__title{ font-weight:700; margin-bottom: 6px; }
.alert__list{ margin:0; padding-left: 18px; }

/* =========================================================
   FORME / INPUTS : force un rendu “glass” (anti fond blanc)
   ========================================================= */
input, textarea, select{
  -webkit-appearance: none;
  appearance: none;
  background: rgba(0,0,0,.28) !important;
  color: var(--txt) !important;
  border: 1px solid var(--stroke) !important;
  border-radius: 14px;
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}

input::placeholder, textarea::placeholder{
  color: rgba(255,255,255,.45);
}

input:focus, textarea:focus, select:focus{
  border-color: rgba(168,85,247,.55) !important;
  box-shadow: 0 0 0 3px rgba(168,85,247,.18);
}

/* icônes date/time en clair (Chrome/Safari) */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator{
  filter: invert(1);
  opacity: .75;
}

/* autofill Chrome (évite le jaune/blanc) */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color: var(--txt) !important;
  box-shadow: 0 0 0px 1000px rgba(0,0,0,.35) inset !important;
  transition: background-color 9999s ease-in-out 0s;
}