:root{
  --bg-grad-1:#2c3e50; --bg-grad-2:#4ca1af;
  --surface:#0b0f1a; --card-bg: rgba(0,0,0,0.65);
  --text:#fff; --muted:#e5e7eb; --border: rgba(255,255,255,0.2);
  --accent:#e74c3c; --accent-hover:#c0392b;
  --radius-sm:6px; --radius-md:10px; --radius-lg:14px;
  --shadow-sm:0 4px 10px rgba(0,0,0,0.3);
  --shadow-md:0 10px 20px rgba(0,0,0,.25);
  --shadow-lg:0 16px 26px rgba(0,0,0,.3);
  --font-sans: system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --step--1: clamp(.8rem, .7rem + .3vw, .95rem);
  --step-0:  clamp(1rem, .95rem + .4vw, 1.125rem);
  --step-1:  clamp(1.25rem, 1.1rem + .8vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem);
  --step-3:  clamp(2.0rem, 1.6rem + 1.8vw, 2.8rem);
  --space-1: clamp(6px, 0.6vw, 10px);
  --space-2: clamp(10px, 1vw, 16px);
  --space-3: clamp(16px, 1.6vw, 24px);
  --space-4: clamp(24px, 2.2vw, 36px);
  --space-5: clamp(36px, 3vw, 56px);
}

*{ box-sizing:border-box }
html{ background: linear-gradient(135deg, var(--bg-grad-1), var(--bg-grad-2)); min-height:100% }
body{ margin:0; font-family:var(--font-sans); color:var(--text); background:transparent; min-height:100% }

h1{ font-size:var(--step-3); margin:0 0 var(--space-3) }
h2{ font-size:var(--step-2); margin:0 0 var(--space-2) }
p,.btn,.input,.select,.tag,.date{ font-size:var(--step-0) }

.container{ max-width:1200px; margin:0 auto; padding:0 var(--space-2) }
.center-screen{ min-height:100vh; display:flex; align-items:center; justify-content:center }

.card{
  position:relative; background:var(--card-bg); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-md); overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-lg) }
.card-pad{ padding:var(--space-4) }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--accent); color:#fff; border:none; border-radius:var(--radius-sm);
  padding:12px 18px; cursor:pointer; transition:background .2s ease;
}
.btn:hover{ background:var(--accent-hover) }
.btn:disabled{ opacity:.6; cursor:not-allowed }

.input,.select{
  width:100%; padding:10px 12px; border-radius:8px; border:1px solid var(--border);
  background:var(--card-bg); color:var(--text); outline:none;
}
.select{ color-scheme:dark }
.select option{ background:#0f172a; color:#e5e7eb }
.select option:checked,.select option:hover{ background:#1f2937; color:#fff }

.backButton{
  position:fixed; top:13px; left:13px; background:#333; color:#fff; padding:8px 12px;
  border:1px solid var(--border); border-radius:5px; text-decoration:none; font-size:1em; z-index:10000;
  transition: background .2s;
}
.backButton:hover{ background:#555 }

/* En-têtes & hero (utilisés sur l’accueil) */
.page-header{ display:flex; align-items:center; justify-content:center; padding:var(--space-5) var(--space-3) var(--space-2); text-align:center }
.hero{ padding:var(--space-5) var(--space-3); text-align:center }
.hero .title{ font-size:var(--step-3); margin-bottom:var(--space-2) }
.hero .subtitle{ font-size:var(--step-1); opacity:.95; margin-bottom:var(--space-3) }
.hero-actions{ display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center; justify-content:center }

/* Modal: base générique (utilisée aussi par l’astuce de la home) */
.modal{
  display:none; position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.9);
  align-items:center; justify-content:center;
}
.modal.open{ display:flex }
body.no-scroll{ overflow:hidden }
.modal-content{
  position:relative; background:#2c3e50; color:#fff; border-radius:var(--radius-md);
  max-width:600px; max-height:90vh; padding:var(--space-4); text-align:center;
}

@media (max-width:480px){
  .btn{ width:100% }
  .backButton{ top:8px; left:8px; padding:6px 10px }
}

a {
  text-decoration: none;
}