/* ---------- Variables & thèmes ---------- */
:root{
  --bg: #0b0e14;
  --text: #e7eaf0;
  --muted: #9aa4b2;
  --card: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.12);
  --primary: #7c6cff;          /* violet doux */
  --primary-2: #00d1ff;        /* cyan */
  --radius: 18px;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
}
:root[data-theme="light"]{
  --bg: #f7f8fc;
  --text: #111827;
  --muted: #4b5563;
  --card: rgba(255,255,255,0.8);
  --border: rgba(17,24,39,0.12);
  --shadow: 0 10px 25px rgba(17,24,39,.10);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
}

/* ---------- Fond animé ---------- */
.bg-gradient{
  position:fixed; inset:-30vmax;
  background: radial-gradient(60vmax 60vmax at 20% 10%, rgba(124,108,255,.20), transparent 60%),
              radial-gradient(50vmax 50vmax at 80% 20%, rgba(0,209,255,.18), transparent 60%),
              radial-gradient(40vmax 40vmax at 50% 90%, rgba(255,125,212,.18), transparent 60%),
              linear-gradient(180deg, rgba(255,255,255,.06), transparent);
  filter:saturate(120%) blur(4px);
  animation: gradientShift 25s linear infinite;
  z-index:-3;
}
@keyframes gradientShift{
  0%{ transform: translate3d(0,0,0) scale(1) }
  50%{ transform: translate3d(2%, -1%, 0) scale(1.02) }
  100%{ transform: translate3d(0,0,0) scale(1) }
}
.blob{
  position:fixed; width:40vmax; height:40vmax; border-radius:50%;
  filter: blur(60px) saturate(120%); opacity:.25; z-index:-2;
}
.blob-a{ background: conic-gradient(from 90deg, var(--primary), transparent 65%);
  top:-10vmax; left:-10vmax; animation: float 18s ease-in-out infinite;
}
.blob-b{ background: conic-gradient(from -90deg, var(--primary-2), transparent 65%);
  bottom:-12vmax; right:-12vmax; animation: float 22s ease-in-out infinite reverse;
}
@keyframes float{
  0%,100%{ transform: translateY(0) rotate(0deg) }
  50%{ transform: translateY(-20px) rotate(10deg) }
}

/* ---------- Layout ---------- */
.site-header{
  position:sticky; top:0; display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px; backdrop-filter: blur(8px);
  background: rgba(0,0,0,.25);
  border-bottom:1px solid var(--border); z-index:10;
}
:root[data-theme="light"] .site-header{ background: rgba(255,255,255,.6) }

.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text) }
.brand-logo{ display:grid; place-items:center; width:32px; height:32px; border-radius:50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow: var(--shadow);
}
.brand-text{ font-weight:700; letter-spacing:.2px }

.site-nav{ display:flex; align-items:center; gap:10px }
.nav-link{
  color:var(--text); text-decoration:none; padding:10px 12px; border-radius:10px;
  border:1px solid transparent; transition: all .2s ease;
}
.nav-link:hover{ border-color:var(--border); background:rgba(255,255,255,.06) }

.btn{
  padding:10px 14px; border-radius:12px; border:1px solid var(--border);
  background:var(--card); color:var(--text); text-decoration:none; cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow) }
.btn.primary{
  border:0; background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color:white; font-weight:600;
}
.btn.ghost{ background:transparent }

/* Sections */
main{ width:min(1100px, 92vw); margin:48px auto 80px; }
.hero{ text-align:center; padding:60px 0 30px }
.title{ font-size: clamp(28px, 5vw, 48px); margin:0 0 12px }
.subtitle{ color:var(--muted); margin:0 auto; max-width:60ch }
.cta{ margin-top:22px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap }

.tps h2, .apropos h2{ font-size: clamp(22px, 3.4vw, 32px); margin:18px 0 14px }
.grid{
  display:grid; gap:18px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.card{
  background: var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:18px;
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{ transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.25) }
.card.disabled{ opacity:.6; filter: grayscale(.2) }
.card-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px }
.badge{
  font-size:12px; font-weight:700; letter-spacing:.4px; padding:6px 8px; border-radius:999px; color:white;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
}
.card-text{ color:var(--muted); margin:6px 0 14px }

.apropos{ margin-top:36px }
.site-footer{ text-align:center; padding:28px 16px; color:var(--muted) }
.site-footer a{ color:inherit }

/* ---------- Effets "reveal" au scroll ---------- */
.reveal{ opacity:0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease }
.reveal.in{ opacity:1; transform: translateY(0) }

/* ---------- Accessibilité ---------- */
:focus-visible{ outline: 3px solid var(--primary-2); outline-offset: 2px }

/* ---------- Petits raffinements ---------- */
.hover-raise{ will-change: transform }
.btn.link{ background:transparent; border-color:var(--border) }
.btn.link:hover{ background: rgba(255,255,255,.06) }
code{ background: rgba(0,0,0,.25); padding:2px 6px; border-radius:6px }
:root[data-theme="light"] code{ background: rgba(17,24,39,.08) }