/* Style général */
body {
  margin: 0;
  font-family: 'Oswald', Impact, sans-serif;
  background: 
    url("https://www.transparenttextures.com/patterns/concrete-wall.png"), /* texture béton */
    url("https://www.transparenttextures.com/patterns/vine.png"); /* texture lierre */
  background-color: #2b2b2b;
  color: #e0e0e0;
}

/* Header */
header {
  background: #111;
  color: #e0e0e0;
  padding: 15px;
  text-align: center;
  border-bottom: 4px solid #3a3a3a;
}
header h1 {
  margin: 0;
  font-size: 2rem;
  letter-spacing: 2px;
}
header nav a {
  margin: 0 10px;
  text-decoration: none;
  color: #b5ffb5; /* accent vert mousse */
}
header nav a:hover {
  text-decoration: underline;
}

/* Conteneur principal */
.container {
  display: flex;
  max-width: 1200px;
  margin: 20px auto;
  gap: 20px;
  padding: 0 10px;
}

/* Colonne gauche */
.profile {
  flex: 1;
  background: rgba(20, 20, 20, 0.9);
  padding: 20px;
  border: 2px solid #444;
}
.profile .avatar {
  max-width: 100%;
  border: 3px solid #b5ffb5;
  margin-bottom: 15px;
}

/* Colonne droite */
.content {
  flex: 3;
  background: rgba(30, 30, 30, 0.95);
  padding: 20px;
  border: 2px solid #555;
}
.content h2, .content h3 {
  color: #b5ffb5;
}
.content ul {
  list-style: none;
  padding: 0;
}
.content ul li {
  margin: 8px 0;
}
.content ul li a {
  color: #e0e0e0;
  text-decoration: none;
  font-weight: bold;
  border-bottom: 2px solid #b5ffb5;
}
.content ul li a:hover {
  color: #b5ffb5;
}

/* Footer */
footer {
  text-align: center;
  padding: 15px;
  background: #111;
  border-top: 4px solid #3a3a3a;
  font-size: 0.9rem;
}