/* Style global */
body {
  font-family: Tahoma;
  margin: 0;
  /* background-image: url('fond_ecran.jpg');  /* chemin vers ta photo */ */
  background-size: cover;                   /* ajuste pour couvrir toute la page */
  background-color: black;
  background-position: center;              /* centre l’image */
  background-attachment: fixed;             /* effet "filigrane" fixe */
  background-repeat: no-repeat;             /* évite la répétition */
  color: #f0f0f0;
  font-size: 18px;                          /* texte plus grand et lisible */
  line-height: 1.3;
}

/* Navigation */
nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 5em;
  margin: 0;
}

nav a {
  color: white;
  text-decoration: none;
  font-weight: normal;
  font-size: 0.9em;
}

nav a:hover {
  text-decoration: underline;
}

/* Hero section */
.hero {
  background: center/cover no-repeat;
  color: white;
  text-align: center;
  padding: 1em 1em;
  position: relative;
  color: yellow;
}

.hero-content {
  background: cadetblue;
  display: inline-block;
  padding: 0em;
  border-radius: 0px;
}

.btn {
  display: inline-block;
  margin-top: 1em;
  padding: 0.8em 1.5em;
  background: green;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  transition: background 0.3s;
  font-size: 1.2em;
}

.btn:hover {
  background: gray;
}

/* Titres */
h1 {
  font-size: 2.4em;
  margin-bottom: 0.5em;
}

h2 {
  font-size: 1.8em;
  margin-top: 0;
}

h3 {
  font-size: 1.4em;
}

h4 {
  font-size: 1.0em;
}

.card {
  background: steelblue;
  color: white;
  display: flex;              /* Active flexbox */
  align-items: center;        /* Aligne verticalement image et texte */
  border: 1px solid #ccc;
  margin: 2em auto;
  padding: 2em;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  max-width: 1000px;
}

.card-img {
  width: 170px;               /* Taille fixe ou responsive */
  height: auto;
  margin-right: 20px;         /* Espacement entre image et texte */
  margin-left: 20px;         /* Espacement entre image et texte */
} 

.card-text {
  flex: 1;                    /* Le texte prend l’espace restant */
}

.card:first-of-type {
  margin-top: 0em; /* réduit l’espace au-dessus du premier card */
}

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

/* Membres */
.members-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 1.5em;
  margin-top: 1em;
}

.member-card {
  display: block;
  background: oldlace;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  padding: 1em;
  text-align: center;
  transition: transform 0.3s;
  color: black; 
  max-width: 100%;
  }

.member-card:hover {
  transform: scale(1.05);
}

.members-container {
  display: grid;
  grid-template-columns: repeat(auto-fit,200px); /* 5 colonnes max */
  gap: 15px; /* espace entre les cartes */
  margin-top: 1em;
  box-sizing: border-box;
  justify-content: center;
}

.member-card h3,
.member-card p,
.member-card a {
  margin: 0.5em 0;
}

.members-container .member-card img {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 0.5em;
}

.gallery-link {
  display: inline-block;
  margin-top: 10px;
  text-decoration: none;
  color: #0066cc;
  font-weight: bold;
}

.gallery-link:hover {
  text-decoration: underline;
}

/* Expositions */
.expo-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  text-align: center;
  transition: transform 0.3s
  
  /* Ajout pour le défilement horizontal */
  overflow-x: auto;     /* barre horizontale si nécessaire */
  overflow-y: hidden;   /* optionnel : pas de barre verticale */
  white-space: nowrap;  /* empêche les éléments inline de passer à la ligne */
 
}

.expo-card:hover {
  transform: scale(1.05);
}

.expo-card img {
  width: 100%;
  height: auto;
  border-radius: 50%;
  margin-bottom: 0.5em;
}

.gallery {
  display: flex;
  flex-wrap: nowrap;     /* empêche le retour à la ligne */
  gap: 10px;             /* espace entre les images */
  justify-content: flex-start; /* aligne les éléments au début */
  overflow-x: auto;      /* ajoute une barre horizontale si nécessaire */
  overflow-y: hidden;    /* optionnel : pas de barre verticale */
}

.gallery figure {
  display: inline-block;   /* le figure s’adapte à son contenu */
  margin: 0;
  padding: 0;              /* supprime tout padding interne */
  text-align: center;
}

.gallery img {
  display: block;
  width: 300px;   /* taille fixe des miniatures */
  height: auto;
  margin: 0;
  border-radius: 8px;
}

.gallery figcaption {
  margin-top: 5px;
  font-size: 0.8em;
  color: black;
  font-style: italic;
}

/* Footer */
footer {
  background: #222;
  color: white;
  text-align: center;
  padding: 1em;
  margin-top: 2em;
}