:root{
  --accent:#3b82f6;
  --yellow:#facc15;
  --bg:#f8fafc;
  --card:#fff;
  --radius:16px;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Poppins',sans-serif;
}

body{
  background:var(--bg);
  color:#111;
}

/* MENU */
.menu-toggle{
  position:fixed;
  top:12px;
  left:12px;
  font-size:24px;
  z-index:2001;
  cursor:pointer;
}

.side-menu{
  position:fixed;
  top:0;
  left:-260px;
  width:260px;
  height:100%;
  background:#fff;
  padding:20px;
  transition:.3s;
  z-index:2000;
  box-shadow:2px 0 10px rgba(0,0,0,.1);
}

.side-menu.active{
  left:0;
}

.side-menu a{
  display:block;
  margin:12px 0;
  text-decoration:none;
  color:#333;
  font-weight:500;
}

/* HEADER */
header{
  position:sticky;
  top:0;
  background: linear-gradient(135deg,var(--accent),#60a5fa);
  z-index:1000;
  padding:16px 0;
  text-align:center;
  color:white;
  box-shadow:0 4px 14px rgba(0,0,0,.15);
}

.header-center{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.logo-center img{
  height:55px;
  margin:0 auto;
  transition: transform 0.3s;
}

.logo-center img:hover{
  transform:scale(1.05);
}

.header-text h1{
  margin:6px 0 2px 0;
  font-size:20px;
  font-weight:600;
  color:white;
}

.retour-accueil{
  display:inline-block;
  margin-top:6px;
  background:var(--yellow);
  color:#111;
  padding:6px 12px;
  border-radius:10px;
  text-decoration:none;
  font-weight:600;
  font-size:14px;
}

/* MAIN */
main{
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:16px;
}

main .contenu{
  background:var(--card);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
}

main .contenu h2{
  margin-bottom:8px;
}

main .contenu ul{
  margin-bottom:12px;
  padding-left:20px;
}

main .image img{
  width:100%;
  border-radius:var(--radius);
  box-shadow:0 4px 12px rgba(0,0,0,.06);
}

/* RESPONSIVE */
@media(min-width:768px){
  main{
    flex-direction:row;
    gap:20px;
  }
  main .contenu,
  main .image{
    flex:1;
  }
}