/* ===== Base thème noir ===== */
:root{
  --bg:#000;
  --text:#e0d2d2;
  --muted:#9a9a9a;
  --surface:#0d0d0d;
  --border:#1a1a1a;
  --radius:14px;
}

*,
*::before,
*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{ margin:0; font-family:Exo2;
      background:var(--bg); color:var(--text); line-height:1.6; }


/* Header avec logo centré en haut */
.site-header{
  color: white;
  font-size: 1.5rem ;
  display:grid; place-items:center;
  padding:72px 16px 24px;
}
.logo-center{ height:4rem; width:auto; display:block; }

/* Mise en page : contenu au milieu, footer en bas */
.site-main{
  min-height:calc(80vh - 72px - 120px); /* header approx + footer */
  display:grid; place-items:center;
  padding:16px;
  text-align: center;
}

/* Carte de la liste */
.card{
  width:min(720px, 100%);
  padding:24px;
  place-items: center;
  --text: white;
}
/* hover de l'élement */
.card-a:hover {
  background-color: white;
  color: rgb(0, 0, 0);  
  background: white;
}


.title{ margin:0 0 12px; font-size:clamp(20px, 3vw, 28px); }

/* Liste centrale */
.mid-list{ margin:0; padding:0; list-style:none; display:grid; gap:10px; }
.mid-list li a{
  display:block; padding:12px 14px;
  border-radius:12px; text-decoration:none; color:var(--text);
}


/* Footer fixé visuellement en bas, contenu centré */
.site-footer{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:20px 16px 28px;
}
.socials{ display:flex; gap:16px; }
.socials a{
  color:var(--muted); text-decoration:none; font-weight:600; letter-spacing:.2px;
  padding:6px 10px; border-radius:10px; border:1px solid transparent;
}
.socials a:hover{ color:var(--text); border-color:#222; background:#121212; }
.credits{ color:var(--muted); }

/* Petites améliorations responsives */
@media (max-width:480px){
  .logo-center{ height:72px; }
}

img{ max-width:100%; height:auto; }


@media (max-width: 940) {
  /* règles pour tablettes et mobiles */
.logo-center{ width: auto; height:72px; }
.site-header{width: auto; height:auto; }
.img {width: auto;}

}

@media (max-width: 480px) {
  /* règles spécifiques petits smartphones */
.logo-center{ width: auto; height:72px; }
.site-header{width: auto; height:auto; }
.img {width: auto;}
}