@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --black:#000000;
  --near-black:#0A0A0A;
  --red:#E20A0A;
  --red-dark:#a30400;
  --red-soft:#3A0505;
  --white:#FFFFFF;
  --line:#2A2A2A;
}

*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--black);
  color:var(--white);
  font-family:'Inter',sans-serif;
  min-height:100vh;
}
h1,h2,h3{font-family:'Manrope',sans-serif;}
a{color:var(--white);}
a.link-white{color:var(--white); text-decoration:underline;}

/* ---------- VITRINE ---------- */
.vitrine{
  min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:40px 24px; text-align:center;
}
.logo-wrap{
  width:260px; height:260px; border-radius:50%;
  border:5px solid var(--red);
  box-shadow:0 0 30px rgba(226,10,10,.55), 0 0 60px rgba(226,10,10,.25);
  overflow:hidden; margin-bottom:48px; background:#000;
}
.logo-wrap img{ width:100%; height:100%; object-fit:cover; display:block; }
.btn-row{ display:flex; gap:22px; flex-wrap:wrap; justify-content:center; align-items:center; }
.vitrine-btn{
  font-family:'Manrope',sans-serif; font-weight:800; font-size:15px;
  letter-spacing:.03em; text-transform:uppercase; color:var(--white);
  background:var(--red); border-radius:999px; padding:16px 34px; cursor:pointer;
  border:3px solid var(--white); position:relative; text-decoration:none; display:inline-block;
}
.vitrine-btn.red-border{ border-color:var(--red); }
.vitrine-btn:hover{ transform:translateY(-2px); transition:transform .15s ease; }
.admin-link{
  margin-top:56px; color:var(--white); text-decoration:underline; font-size:13px;
  letter-spacing:.05em; background:none; border:none; cursor:pointer; font-family:'Inter',sans-serif;
}

/* ---------- FORM PAGES (Inscription / Connexion) ---------- */
.form-page{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:40px 20px; }
.form-card{
  width:100%; max-width:420px; background:var(--red); border-radius:18px;
  padding:36px 32px 32px; box-shadow:0 0 50px rgba(226,10,10,.35); text-align:center;
}
.form-logo{ width:84px; height:84px; border-radius:50%; border:3px solid var(--white); overflow:hidden; margin:0 auto 18px; }
.form-logo img{ width:100%; height:100%; object-fit:cover; display:block; }
.form-card h2{ color:var(--white); font-size:19px; font-weight:800; margin:0 0 26px; letter-spacing:.02em; }
.form-field{ text-align:left; margin-bottom:14px; }
.form-field label{ display:block; color:var(--white); font-size:12px; font-weight:700; margin-bottom:5px; letter-spacing:.03em; text-transform:uppercase; }
.form-field input, .form-field select{
  width:100%; padding:11px 13px; border-radius:8px; border:2px solid var(--black);
  background:var(--white); color:var(--black); font-family:'Inter',sans-serif; font-size:14px;
}
.form-field input:focus, .form-field select:focus{ outline:2px solid var(--black); }
.form-submit{
  width:100%; margin-top:14px; padding:13px; border-radius:9px; border:none;
  background:var(--black); color:var(--white); font-family:'Manrope',sans-serif;
  font-weight:800; font-size:14px; letter-spacing:.03em; text-transform:uppercase; cursor:pointer;
}
.form-submit:hover{ background:#1a1a1a; }
.form-back{ display:block; margin:18px auto 0; color:var(--white); text-decoration:underline; background:none; border:none; font-size:12.5px; cursor:pointer; font-family:'Inter',sans-serif; }
.form-note{ color:rgba(255,255,255,.9); font-size:12px; margin-top:16px; line-height:1.5; }
.form-error{ color:#fff59d; font-weight:700; }

/* ---------- DASHBOARD (commun à tous les rôles) ---------- */
.dash-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 24px; background:var(--near-black); border-bottom:1px solid var(--line);
}
.dash-topbar .brand{ display:flex; align-items:center; gap:12px; }
.dash-topbar .brand img{ width:44px; height:44px; border-radius:50%; border:2px solid var(--red); }
.dash-topbar .brand span{ font-family:'Manrope',sans-serif; font-weight:800; letter-spacing:.5px; }
.dash-topbar .role-badge{
  background:var(--red); color:var(--white); font-size:11px; font-weight:800;
  text-transform:uppercase; padding:5px 12px; border-radius:999px; letter-spacing:.05em;
}
.dash-topbar .logout-btn{
  background:transparent; color:var(--white); border:2px solid var(--red); border-radius:8px;
  padding:8px 16px; cursor:pointer; font-family:'Manrope',sans-serif; font-weight:700; text-decoration:none; font-size:13px;
}
.dash-topbar .logout-btn:hover{ background:var(--red); }
.dash-wrap{ max-width:1100px; margin:0 auto; padding:32px 24px; }
.dash-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:20px; margin-top:24px; }
.dash-card{ background:var(--near-black); border:1px solid var(--line); border-radius:12px; padding:20px; }
.dash-card h3{ margin:0 0 8px; color:var(--red); font-size:15px; text-transform:uppercase; letter-spacing:.04em; }
.dash-card .big-number{ font-size:32px; font-weight:900; font-family:'Manrope',sans-serif; }
table.dash-table{ width:100%; border-collapse:collapse; margin-top:16px; }
table.dash-table th, table.dash-table td{ padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; font-size:14px; }
table.dash-table th{ color:var(--red); text-transform:uppercase; font-size:12px; letter-spacing:.04em; }

/* ---------- Placeholder pages ---------- */
.placeholder-page{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:40px; }
.placeholder-page h2{ color:var(--red); font-size:22px; margin-bottom:10px; }
.placeholder-page p{ color:#bbb; font-size:14px; margin-bottom:26px; }
.hidden{ display:none !important; }