:root{
  --bg:#f3f6fb;
  --surface:#ffffff;
  --surface-soft:#f8fafc;
  --text:#172033;
  --muted:#64748b;
  --line:#dbe3ef;
  --primary:#0f62fe;
  --primary-dark:#0848bf;
  --secondary:#334155;
  --danger:#b42318;
  --success:#0f7a3b;
  --warning:#b7791f;
  --shadow:0 16px 40px rgba(15,23,42,.08);
  --radius:8px;
}
*{box-sizing:border-box}
body{
  margin:0;
  min-height:100vh;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  background:
    linear-gradient(180deg,#eaf1fb 0,#f3f6fb 280px),
    var(--bg);
  color:var(--text);
  line-height:1.5;
}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{
  width:min(1180px,100%);
  margin:0 auto;
  padding:28px;
}
.top{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  margin-bottom:22px;
}
h1,h2,h3,p{margin-top:0}
h1{
  margin-bottom:0;
  font-size:clamp(28px,4vw,42px);
  line-height:1.05;
  letter-spacing:0;
}
h2{
  margin-bottom:14px;
  font-size:20px;
  line-height:1.2;
}
p{margin-bottom:12px}
.panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px;
  margin-bottom:18px;
  box-shadow:var(--shadow);
}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:16px;
}
label{
  display:block;
  font-weight:700;
  margin:14px 0 7px;
  color:#263244;
}
input,button,select{font:inherit}
input,select{
  width:100%;
  border:1px solid #cbd5e1;
  border-radius:7px;
  padding:11px 12px;
  background:#fff;
  color:var(--text);
  outline:none;
  transition:border-color .16s ease,box-shadow .16s ease;
}
input:focus,select:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(15,98,254,.14);
}
button,.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  border:0;
  border-radius:7px;
  background:var(--primary);
  color:#fff;
  padding:10px 15px;
  text-decoration:none;
  cursor:pointer;
  font-weight:800;
  box-shadow:0 8px 18px rgba(15,98,254,.18);
  transition:background .16s ease,transform .16s ease,box-shadow .16s ease;
}
button:hover,.btn:hover{
  background:var(--primary-dark);
  text-decoration:none;
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(15,98,254,.22);
}
.btn.secondary,button.secondary{
  background:var(--secondary);
  box-shadow:0 8px 18px rgba(51,65,85,.16);
}
.btn.danger,button.danger{background:var(--danger)}
.btn[aria-disabled=true]{
  background:#94a3b8;
  pointer-events:none;
  box-shadow:none;
}
table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
th,td{
  padding:12px;
  border-bottom:1px solid #e6edf5;
  text-align:left;
  vertical-align:top;
}
tr:last-child td{border-bottom:0}
th{
  background:#eef3f9;
  color:#334155;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.02em;
}
tbody tr:nth-child(even){background:#fbfdff}
.ok,.bad{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  border-radius:999px;
  padding:2px 9px;
  font-weight:800;
  font-size:13px;
}
.ok{color:var(--success);background:#e9f8ef}
.bad{color:var(--danger);background:#fff0ee}
.muted{color:var(--muted)}
.notice,.error{
  padding:13px 14px;
  border-radius:7px;
  margin-bottom:16px;
  font-weight:700;
}
.notice{
  background:#e8f1ff;
  border:1px solid #bfd7ff;
  color:#164996;
}
.error{
  background:#fff0ee;
  border:1px solid #ffc9c1;
  color:var(--danger);
}
form .grid{align-items:end}
section.panel > form:last-child{margin-bottom:0}
@media(max-width:780px){
  .wrap{padding:16px}
  .top{align-items:flex-start;flex-direction:column}
  .panel{padding:16px}
  table{display:block;overflow-x:auto;white-space:nowrap}
  button,.btn{width:100%}
}

/* ══════════ Bandeau de marque commun (pages internes) ══════════ */
.site-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px min(28px,5vw);
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:30;
}
.topbar-brand{
  display:inline-flex;
  align-items:center;
  gap:9px;
  text-decoration:none;
  color:var(--text);
  font-weight:800;
  font-size:15px;
  white-space:nowrap;
  min-width:0;
}
.topbar-brand:hover{text-decoration:none}
.topbar-tag{
  font-size:12px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--muted);
  border:1px solid var(--line);
  border-radius:999px;
  padding:6px 13px;
  background:var(--surface-soft);
  white-space:nowrap;
  flex:0 0 auto;
}
@media(max-width:480px){
  .site-topbar{padding:12px 14px;gap:8px}
  .topbar-brand{font-size:13px;gap:7px}
  .topbar-brand .brand-mark{width:24px;height:24px;font-size:11px;border-radius:7px}
  .topbar-tag{font-size:10px;padding:5px 9px;letter-spacing:.03em}
}

/* ══════════ Page d'accès (landing) ══════════ */
body.landing{
  min-height:100vh;
  background:
    radial-gradient(920px 540px at 8% -8%, rgba(15,98,254,.12), transparent 60%),
    radial-gradient(780px 480px at 96% 2%, rgba(139,107,255,.12), transparent 55%),
    radial-gradient(820px 640px at 50% 112%, rgba(15,184,174,.12), transparent 60%),
    linear-gradient(180deg,#eef3fb 0,#f3f6fb 320px),
    var(--bg);
}
.access-wrap{
  min-height:100vh;
  padding:64px 24px 56px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.access-header{max-width:700px;margin:0 auto}
.brand-line{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 18px 8px 9px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  box-shadow:0 8px 20px rgba(15,23,42,.07);
  font-weight:800;
  font-size:12.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:28px;
}
.brand-mark{
  display:inline-grid;
  place-items:center;
  width:26px;
  height:26px;
  flex:0 0 auto;
  border-radius:8px;
  background:linear-gradient(135deg,var(--primary),#8b6bff);
  color:#fff;
  font-weight:900;
  font-size:13px;
  font-family:Georgia,serif;
  box-shadow:0 8px 18px rgba(15,98,254,.28);
}
.access-header h1{
  margin:0 0 14px;
  font-size:clamp(30px,4.8vw,48px);
  letter-spacing:-.02em;
  line-height:1.08;
}
.access-header h1 .accent{
  background:linear-gradient(100deg,var(--primary),#8b6bff 55%,#0fb8ae);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.access-header p{
  color:var(--muted);
  font-size:clamp(15px,1.7vw,17px);
  max-width:540px;
  margin:0 auto;
}
.access-grid{
  margin-top:48px;
  width:min(1080px,100%);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}
.access-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:12px;
  padding:34px 24px 28px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:0 18px 44px rgba(15,23,42,.07);
  text-decoration:none;
  color:var(--text);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease,border-color .25s ease;
}
.access-card:hover{
  transform:translateY(-7px);
  box-shadow:0 26px 58px rgba(15,23,42,.13);
  border-color:transparent;
  text-decoration:none;
}
.access-card:focus-within{outline:2px solid var(--primary);outline-offset:3px}
.stretched-link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.access-icon{
  width:58px;
  height:58px;
  border-radius:16px;
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:900;
  font-size:14px;
  letter-spacing:.02em;
  box-shadow:0 12px 24px -8px rgba(15,23,42,.35);
}
.access-grid .access-card:nth-child(1) .access-icon{background:linear-gradient(135deg,#f6c667,#dd9c2c)}
.access-grid .access-card:nth-child(2) .access-icon{background:linear-gradient(135deg,#6d9bff,#0f62fe)}
.access-grid .access-card:nth-child(3) .access-icon{background:linear-gradient(135deg,#3fe4d8,#0fb8ae)}
.access-card h2{margin:2px 0 0;font-size:19px;font-weight:800}
.access-card p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.55}
.access-card .btn{
  margin-top:12px;
  border-radius:999px;
  padding:10px 24px;
}
.access-link{
  position:relative;
  z-index:2;
  margin-top:2px;
  font-size:12.5px;
  color:var(--primary);
  font-weight:700;
  text-decoration:none;
}
.access-link:hover{text-decoration:underline}
.access-badge{
  position:absolute;
  top:14px;right:14px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--muted);
  border:1px solid var(--line);
  border-radius:999px;
  padding:4px 9px;
  background:var(--surface-soft);
}
.access-footer{
  margin-top:auto;
  padding-top:46px;
  color:var(--muted);
  font-size:12.5px;
}
.access-footer strong{color:var(--text)}
@media(max-width:860px){
  .access-grid{grid-template-columns:1fr}
}

/* ══════════ Pages d'authentification (connexion / inscription) ══════════ */
body.auth-page{display:flex;flex-direction:column;min-height:100vh}
.auth-shell{
  flex:1;
  width:min(440px,100%);
  margin:0 auto;
  padding:48px 20px 40px;
  display:flex;
  flex-direction:column;
}
.auth-shell.wide{width:min(560px,100%)}
.auth-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  padding:32px 28px;
  box-shadow:0 20px 50px rgba(15,23,42,.08);
}
.auth-head{text-align:center;margin-bottom:22px}
.auth-head .brand-mark{
  width:46px;
  height:46px;
  border-radius:13px;
  font-size:19px;
  margin:0 auto 16px;
}
.auth-head h1{font-size:24px;margin-bottom:6px}
.auth-head p{margin-bottom:0;color:var(--muted);font-size:14px}
.auth-foot{
  text-align:center;
  margin:16px 0 0;
  font-size:13.5px;
  color:var(--muted);
}
.auth-foot a{font-weight:700}
.auth-links{display:flex;flex-direction:column;gap:8px}
@media(max-width:480px){
  .auth-shell{padding:32px 16px 32px}
  .auth-card{padding:24px 20px}
}