/* ===== Variables & base ===== */
:root{
  --bg:#0b1322; --ink:#eaf4ff; --muted:#b8c7dc;
  --card:#0f1a2b; --line:#203149;
  --emerald:#2ce0b9; --rust:#ff7a2e; --accent:#5db8ff;
  --shadow:0 20px 60px rgba(0,0,0,.45);
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}

/* ===== Nav ===== */
.head{position:sticky;top:0;z-index:40;background:rgba(10,15,25,.7);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav{display:flex;align-items:center;gap:20px;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.logo{height:38px;width:auto}  /* logo réduit */
.brand-name{font-weight:800;letter-spacing:.08em;opacity:.9}
.links{flex:1;display:flex;justify-content:center;gap:26px}
.links a{color:var(--ink);opacity:.9;text-decoration:none;font-weight:600}
.links a.active,.links a:hover{opacity:1;text-decoration:underline}
.actions{display:flex;gap:10px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:12px;font-weight:700;text-decoration:none}
.btn.primary{background:linear-gradient(180deg,#39f0c9,#1b9d82); color:#001}
.btn.rust{background:linear-gradient(180deg,#ff8a3b,#e25516); color:#1a0f0c}
.btn.ghost{color:#fff;background:transparent;border:1px solid rgba(255,255,255,.15)}

/* ===== Hero ===== */
.hero{
  position:relative; overflow:hidden; margin:18px 0 26px;
  background:
    radial-gradient(1100px 650px at 12% 30%, rgba(20,154,255,.22), transparent 60%),
    radial-gradient(900px 520px at 70% 85%, rgba(44,224,185,.15), transparent 60%),
    url('../images/bg-home.jpg') right center/cover no-repeat;
  border-radius:24px; box-shadow:var(--shadow);
}
.hero-inner{padding:70px 24px;text-align:center}
.hero h1{font-size:clamp(38px,6vw,72px);line-height:1.04;margin:0;text-shadow:0 10px 40px rgba(0,0,0,.5)}
.hero p{margin:10px 0 22px;opacity:.95}
.hero-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ===== Grid 2 cartes ===== */
.univers{display:grid;grid-template-columns:repeat(2,minmax(280px,1fr));gap:24px;margin:10px auto 40px}
@media (max-width:980px){.univers{grid-template-columns:1fr}}

.card{
  display:grid; grid-template-rows:auto 1fr;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
  border-radius:20px; overflow:hidden; text-decoration:none; color:var(--ink);
  box-shadow:var(--shadow); transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.card:hover{transform:translateY(-6px); box-shadow:0 26px 70px rgba(0,0,0,.55)}
.card-media{display:flex; align-items:center; justify-content:center; height:220px; border-bottom:1px solid rgba(255,255,255,.08)}
.card-media img{width:120px;height:auto;filter:drop-shadow(0 12px 30px rgba(0,0,0,.55))}
.card.mc .card-media{background: radial-gradient(900px 380px at 50% -20%, rgba(44,224,185,.25), transparent 60%), var(--card); border-color: rgba(44,224,185,.35)}
.card.rust .card-media{background: radial-gradient(900px 380px at 50% -20%, rgba(255,122,46,.30), transparent 60%), var(--card); border-color: rgba(255,122,46,.35)}
.card-body{padding:20px 22px}
.pill{display:inline-block; font-size:12px; text-transform:uppercase; letter-spacing:.16em; padding:6px 10px; border-radius:999px; background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.16)}
.pill.mc{border-color:rgba(44,224,185,.5)} .pill.rust{border-color:rgba(255,122,46,.5)}
.card h3{margin:10px 0 6px; font-size:clamp(22px,2.2vw,26px)}
.card p{margin:0 0 14px; color:var(--muted)}
.card-actions{display:flex; align-items:center; justify-content:space-between; gap:16px}
.card-actions .ip{opacity:.9}
.card-actions .cta{padding:8px 12px; border-radius:10px; font-weight:800; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14)}
.card-univers:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.6);
  transition: all 0.3s ease;
}
.btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(0,255,180,0.6);
}


/* ===== Footer ===== */
.site-footer {
  text-align: center;
  padding: 20px;
  background: #0b0e14;
  color: #999;
}
.site-footer a {
  color: #0ff;
  text-decoration: none;
}
.site-footer a:hover {
  color: #fff;
}
/* Logos dans les cartes Univers */
.univers-cards {             /* même grille que .univers si tu utilises ce nom */
  display:grid;
  grid-template-columns:repeat(2, minmax(280px,1fr));
  gap:24px;
  max-width:1200px;
  margin:10px auto 40px;
  padding:0 24px;
}
@media (max-width:980px){ .univers-cards{ grid-template-columns:1fr } }

.univers-cards .card {       /* harmonise avec tes styles .card existants */
  display:grid;
  grid-template-rows:auto 1fr;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
  border-radius:20px;
  overflow:hidden;
  text-decoration:none;
  color:var(--ink);
  box-shadow:var(--shadow);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.univers-cards .card:hover{ transform:translateY(-6px); box-shadow:0 26px 70px rgba(0,0,0,.55) }

.univers-cards .card-media{
  display:flex; align-items:center; justify-content:center;
  height:220px; border-bottom:1px solid rgba(255,255,255,.08)
}
.univers-cards .card-media img{
  width:120px; height:auto;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.55));
}

/* Teinte d’ambiance différente par univers */
.univers-cards .card.mc .card-media{
  background: radial-gradient(900px 380px at 50% -20%, rgba(44,224,185,.25), transparent 60%), var(--card);
  border-color: rgba(44,224,185,.35);
}
.univers-cards .card.rust .card-media{
  background: radial-gradient(900px 380px at 50% -20%, rgba(255,122,46,.30), transparent 60%), var(--card);
  border-color: rgba(255,122,46,.35);
}

/* Corps de carte (si pas déjà présent) */
.univers-cards .card-body{ padding:20px 22px }
.univers-cards .pill{ display:inline-block; font-size:12px; text-transform:uppercase; letter-spacing:.16em;
  padding:6px 10px; border-radius:999px; background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.16) }
.univers-cards .pill.mc{ border-color:rgba(44,224,185,.5) }
.univers-cards .pill.rust{ border-color:rgba(255,122,46,.5) }
.univers-cards h3{ margin:10px 0 6px; font-size:clamp(22px,2.2vw,26px) }
.univers-cards p{ margin:0 0 14px; color:var(--muted) }
.univers-cards .card-actions{ display:flex; align-items:center; justify-content:space-between; gap:16px }
.univers-cards .card-actions .cta{ padding:8px 12px; border-radius:10px; font-weight:800; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14) }

/* ===== NAVBAR (home) ===== */
.site-nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(8px);
  background: rgba(11,16,22,0.65);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.site-nav .nav-wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 20px;

  /* Grid pour centrer la zone liens */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "brand center actions";
  align-items: center;
  column-gap: 16px;
}

/* Gauche */
.site-nav .brand{ grid-area: brand; display:flex; align-items:center; gap:10px; }
.site-nav .brand .logo{ width:28px; height:28px; }
.site-nav .brand span{ font-weight:700; font-size:18px; color:#dff6ef; letter-spacing:.2px; }

/* Centre (vraiment centré) */
.site-nav .nav-center{
  grid-area: center;
  display:flex; justify-content:center; align-items:center;
  gap:12px; list-style:none; margin:0; padding:0;
}
.site-nav .nav-center a{
  display:inline-flex; align-items:center;
  padding:8px 14px; border-radius:999px;
  font-weight:600; color:#c9d6df; opacity:.9; text-decoration:none;
  transition: background .2s, color .2s, opacity .2s, box-shadow .2s;
}
.site-nav .nav-center a:hover{ opacity:1; background:rgba(255,255,255,.06); }
.site-nav .nav-center a.is-active{
  color:#0ee0b7;
  background:rgba(14,224,183,.12);
  box-shadow:0 0 0 1px rgba(14,224,183,.25) inset;
}

/* Droite */
.site-nav .nav-right{ grid-area: actions; display:flex; justify-content:flex-end; gap:10px; }
.site-nav .nav-right .btn{ padding:8px 14px; border-radius:999px; font-weight:700; }

/* Responsive */
@media (max-width: 860px){
  .site-nav .nav-wrap{
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand actions"
      "center center";
    row-gap: 8px;
  }
  .site-nav .nav-center{ order: 3; }
}