@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&family=Pacifico&display=swap');

:root {
  --font-base: 'Nunito', sans-serif;
  --font-script: 'Shadows Into Light', cursive;

  --color-bg: #f7f8fa;
  --color-bg-alt: #e9eff3;
  --color-text: #2c2c2c;
  --color-accent: #6c63ff;
  --color-accent-light: #ece9ff;
  --color-muted: #8a8a8a;
  --color-border: #d8dee9;

  --radius: 1.2rem;
  --shadow: 0 4px 14px rgba(0, 0, 0, 0.1);

  --transition: all 0.3s ease;
  --color-success: #22c55e; /* vert */
  --color-warning: #eab308; /* jaune */
  --color-error: #ef4444;   /* rouge */

}

body {
  margin: 0;
  font-family: var(--font-base);
  background: var(--color-bg);
  color: var(--color-text);
  transition: var(--transition);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: var(--transition);
}
a:hover {
  text-decoration: underline;
  color: #4e47d0;
}

h1, h2, h3, h4 {
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 1rem;
  line-height: 1.3;
}

h1 {
  font-size: 2.8rem;
  font-family: var(--font-script: 'Pacifico', cursive;);
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.4rem;
}

section {
  margin: 3rem auto;
  max-width: 400px;
  align: center;
  padding: 2rem;
  background: var(--color-bg-alt);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: var(--transition);
}

img {
  max-width: 100%;
  display: block;
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease;
}
img:hover {
  transform: scale(1.03);
}

.card {
  padding: 1.5rem;
  border-radius: var(--radius);
  background: white;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.card:hover {
  transform: translateY(-5px);
}

.avatar {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 1rem;
  border: 4px solid var(--color-accent-light);
}

button,
input[type="submit"] {
  font-family: var(--font-base);
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius);
  border: none;
  background: var(--color-accent);
  color: white;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}

button:hover {
  background: #544fff;
}

input[type="text"] {
  padding: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font-base);
  transition: var(--transition);
}

input[type="text"]:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-light);
}

footer {
  margin-top: 4rem;
  font-size: 0.9rem;
  color: var(--color-muted);
  text-align: center;
}
.container-centre {
  max-width: 400px;
  margin: 0 auto;
}
.members-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}
/* Badges génériques */
.badge{
  display:inline-block;
  align-items:center;
  gap:.25rem;
  padding:.25rem .5rem;
  border-radius:.5rem;
  font-size:.75rem;
  font-weight:500;
  line-height:1;
  color: white;
}
.badge--public{
  background:var(--success-bg);
  color:var(--success-fg);
}
.badge--private{
  background:var(--warning-bg);
  color:var(--warning-fg);
}
.status{
  margin-left:.5rem;
  padding:.25rem .5rem;
  border-radius:.5rem;
  font-size:.8rem;
  font-weight:600;
}
.status--online{
  background:var(--success-bg);
  color:var(--success-fg);
}
.status--offline{
  background:var(--danger-bg);
  color:var(--danger-fg);
}
.member__avatar-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 0.5rem;
}

.member__avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 3px solid var(--accent-ring, currentColor);
  box-shadow: 0 0 0 4px var(--accent-ring, transparent);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.member-card {
  border-radius: 1rem;
  padding: 1rem;
  background: var(--bg);
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}

.member-card:hover {
  box-shadow: 0 0 0 3px var(--accent-ring, transparent);
  transform: scale(1.01);
}
/* === MODE SOMBRE === */
html.dark {
  --color-bg: #2e2e33;
  --color-bg-alt: #3c3c41;
  --color-text: #f0f0f0;
  --color-accent: #9c88ff;
  --color-accent-light: #bcaeff;
  --color-muted: #bbbbbb;
  --color-border: #555;

  --color-success: #22c55e;
  --color-warning: #eab308;
  --color-error: #ef4444;
}

/* Appliquer le fond et le texte globalement */
html.dark body {
  background: var(--color-bg);
  color: var(--color-text);
}

/* Adapter les liens */
html.dark a {
  color: var(--color-accent);
}
html.dark a:hover {
  color: var(--color-accent-light);
}

/* Titres */
html.dark h1, html.dark h2, html.dark h3, html.dark h4 {
  color: var(--color-text);
}

/* Sections, cartes, et autres blocs */
html.dark section,
html.dark .card,
html.dark .member-card {
  background: var(--color-bg-alt);
  color: var(--color-text);
}

/* Champs de texte */
html.dark input[type="text"] {
  background: var(--color-bg);
  color: var(--color-text);
  border-color: var(--color-border);
}
html.dark input[type="text"]:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-light);
}

/* Boutons */
html.dark button,
html.dark input[type="submit"] {
  background: var(--color-accent);
  color: white;
}
html.dark button:hover {
  background: #bcaeff;
}

/* Footer */
html.dark footer {
  color: var(--color-muted);
}

/* Images */
html.dark img {
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.05);
}