:root{
  --fuchsia:#D81B60; --green:#8DC63F;
  --bg:#0b0b12; --card:#101018; --text:#ffffff; --muted:#f1f5f9cc; --line:#2a2a3a;
}
*{box-sizing:border-box}
body {
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1600px 800px at 10% 0%, var(--fuchsia) 0%, transparent 55%),
              linear-gradient(180deg, #1A1A24, #242433);
  color: var(--text);
}
.container{max-width:1000px;margin:0 auto;padding:24px}
.hero{display:grid;place-items:center;min-height:70vh}

.card {
  background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  backdrop-filter: blur(10px);
  border:1px solid var(--line);
  border-radius:28px;
  padding:40px;
  text-align:center;
  box-shadow: 0 15px 40px rgba(0,0,0,0.4);
}
.logo{width:120px;height:auto; margin:0 auto 12px; display:block}
h1{font-size: clamp(28px, 4vw, 40px); margin: 6px 0 8px}
.tagline{font-size: clamp(16px,2.4vw,22px); color:#fff; margin: 0 0 18px}
.lead{color:var(--muted); margin:0 0 20px}
.actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.btn{ display:inline-block; padding:12px 18px; border-radius:12px; text-decoration:none; background: var(--green); color:#0f172a; font-weight:800; border:0; transition: transform .08s ease, box-shadow .2s; box-shadow: 0 10px 30px rgba(0,0,0,0.35); }
.btn:hover{transform: translateY(-1px)}
.btn.outline{ background: transparent; color: #fff; border:2px solid var(--green); }
.footer{opacity:.9;text-align:center;margin-top:40px}
.footer a{color:#fff}
form{max-width:820px; margin: 24px auto; background:#0f1120; border:1px solid var(--line); padding:24px; border-radius:16px}
fieldset{border:1px solid var(--line); padding:16px; margin-bottom:16px; border-radius:12px}
legend{padding:0 8px; color:#fce7f3}
label{display:block; margin:10px 0 6px}
input, select, textarea{ width:100%; padding:12px; border-radius:10px; border:1px solid #303040; background:#0a0d18; color:#fff; }
.row{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.row-3{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.hint{color:#e2e8f0a6; font-size:14px}
.slots{display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px}
.slot{
  padding:10px; text-align:center; cursor:pointer;
  background:#0f1422;                 /* un poil plus clair que le fond */
  border:1px solid #334155;            /* bord plus lisible */
  border-radius:10px;
  color:#ffffff;                       /* <-- rend l'heure visible */
  line-height:1.2;
}
.slot:hover{filter:brightness(1.1)}
.slot.selected{
  outline:2px solid var(--green);
  outline-offset:2px;
  background:#111827;
  color:#ffffff;
}
.slot:focus-visible{
  outline:2px solid var(--green);
  outline-offset:2px;
}.badge{display:inline-block; border:1px solid var(--line); padding:4px 8px; border-radius:999px; font-size:12px; color:#cbd5e1}
.topbar{display:flex; justify-content:space-between; align-items:center; margin:20px 0}
a.link{color:#fce7f3}
.table{width:100%; border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--line); padding:8px 6px; text-align:left}
.small{font-size:12px;color:#e2e8f0cc}