:root {
  --header-font: 'Arial', sans-serif;
  --h1-color: #ffffff;
  --h2-color: #1f3c88;
  --menu-color: #ffffff;
  --h1-size: 3rem;
  --h2-size: 2.4rem;
  --menu-size: 1.5rem;
  --h1-size-mobile: 1.8rem;
  --h2-size-mobile: 1.2rem;
  --menu-size-mobile: 0.7rem;
}

body {

  font-family: Arial, sans-serif;

  margin: 0;

  color: #2c2c2c;

  line-height: 1.6;

}



header {

  background: url("../images/village-header.jpg") center/cover no-repeat;

  color: #fff;

  padding: 80px 20px;

  text-align: center;

}



header h1 {

  margin-bottom: 10px;

}



nav a {

  color: #fff;

  margin: 0 15px;

  text-decoration: none;

  font-weight: bold;

}



header h2 {

  margin-bottom: 10px;

}



nav a {

  color: #fff;

  margin: 0 15px;

  text-decoration: none;

  font-weight: bold;

}



section {

  max-width: 1100px;

  margin: auto;

  padding: 40px 20px;

}



h2 {

  color: #1f6f78;

}



.grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

  gap: 20px;

}



.grid.team {

  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

}



.team .card h4 {

  margin-bottom: 0;
  
  color: #1f3c88;

}



.card {

  background: #f9f9f9;

  padding: 20px;

  border-radius: 8px;

  text-align: center;

}



.card img {

  width: 150px;

  height: 150px;

  border-radius: 50%;

  object-fit: cover;

  margin-bottom: 10px;

}



.card h3{

  font-size: 1em;

  min-height: 48px;

}

.card h5{

  font-size: 2.4em;

  min-height: 48px;

}

.card .age {

  margin-top: 0;

}



.fonction {

  margin-bottom: 0;

}



.work {

  margin-top: 0;

}



footer {

  background: #1f6f78;

  color: #fff;

  text-align: center;

  padding: 20px;

}



footer h1 {

  margin-bottom: 10px;

}



nav a {

  color: #fff;

  margin: 0 15px;

  text-decoration: none;

  font-weight: bold;

  text-align: center;

  padding: 20px;

}
/* === HEADER GLOBAL OVERRIDES === */
header { font-family: var(--header-font); }
header h1 { color: var(--h1-color); font-size: var(--h1-size); }
header h2 { color: var(--h2-color); font-size: var(--h2-size); }
nav a { color: var(--menu-color); font-size: var(--menu-size); }

@media (max-width: 768px) {
  header h1 { font-size: var(--h1-size-mobile); }
  header h2 { font-size: var(--h2-size-mobile); }
  nav a { font-size: var(--menu-size-mobile); }
}