* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  height: 100%;
}

body {
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
  background-color: #ffffff;
  color: #368bd2;
  display: flex;
  flex-direction: column;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: auto;
  color: #003776; /* couleur du texte principal */
}

.container p {
  font-size: 1.08em;
}

.color-text-bandeau {
  color: #df1187; /* couleur du texte dans la bande du haut */
}

.header-container {
  display: flex;
  flex-direction: column; /* empile les enfants verticalement */
  align-items: center;    /* centre horizontalement */
  gap: 20px;              /* espace entre logo/titre et menu */
}

.header-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo-title {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Pour centrer logo + titre horizontalement dans la moitié gauche */
  flex: 1;
  justify-content: center; /* centrage horizontal */
}

.logo {
  height: 100px; /* ajuster selon besoin */
}

header {
  background-color: #25cfff; /* couleur de fond de la bande du haut */
  color: #28afca;
  padding: 20px 0;
}

header h1 {
  margin: 0;
  font-size: 2em;
  text-align: center; /* centrer le texte */
}

main {
  flex: 1;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 80px; /* espace entre les éléments accueil services ...*/
  justify-content: center; /* centrer horizontalement */
  padding: 0; /* enlever padding par défaut */
  margin: 0; /* enlever marge par défaut */
}

nav a {
  color: #df1187; /* couleur du texte des onglets */
  text-decoration: none;
  font-weight: bold;
}

.hero {
  background-image: url('https://source.unsplash.com/1600x500/?swimming,pool');
  background-size: cover;
  background-position: center;
  padding: 80px 0;
  color: #25cfff;
  text-align: center;
}

.hero h2 {
  font-size: 2em;
}

#services {
  padding: 60px 0;
  background-color: #25cfff; /* couleur de fond pour la section services */
}

#services h2 {
  text-align: center;
  margin-bottom: 30px; /* espace sous le titre */
  color: #ffffff; /* couleur du titre */
}

.cards {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: space-around;
}

.card {
  background: white; /* couleur de fond blanche pour les cartes */
  padding: 20px;
  border-radius: 10px;
  flex: 1 1 250px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.card-link {
  display: block;
  text-decoration: none; /* enlève le souligné */
  color: inherit;        /* conserve la couleur normale */
  cursor: pointer;       /* change le curseur pour indiquer que c’est cliquable */
}

.card-link:hover .card {
  box-shadow: 0 4px 12px rgba(0, 119, 182, 0.4);
  transform: translateY(-5px);
  transition: all 0.3s ease;
}

a.card {
  text-decoration: none !important;
  color: inherit !important;
  display: block;
  cursor: pointer;
}

a.card:hover {
  text-decoration: none !important;
  color: inherit !important;
}

a.card h3 {
  text-align: center;
}

a.card p {
  text-align: center;
}

#contact {
  padding: 60px 0;
}

textarea {
  height: 200px; /* augmenter la taille de la rubrique message */
}

form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 500px;
  margin: auto;
}

input, textarea {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

button {
  background-color: #0077b6;
  color: white;
  border: none;
  padding: 12px;
  cursor: pointer;
  border-radius: 5px;
  font-size: 1em;
}

button:hover {
  background-color: #005f8e;
}

footer {
  background-color: #25cfff;
  color: white;
  text-align: center;
  padding: 20px 0;
}

.qui-suis-je {
  background-color: #25cfff;
  color: #ffffff;
  margin-top: 30px;
  padding: 20px;
  border-radius: 10px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.qui-suis-je-content {
  display: flex;
  gap: 30px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.qui-suis-je .texte {
  flex: 2 1 500px; /* prend plus de place */
}

.qui-suis-je .photo {
  flex: 1 1 250px; /* plus petite largeur */
  text-align: center;
  margin-top: 25px; /* espace au-dessus de la photo */
}

.qui-suis-je .photo img {
  max-width: 100%;
  border-radius: 15px;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  height: auto;
}

.tarif-box {
  background-color: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(255, 255, 255, 0.1);
  max-width: 800px;
  margin: 40px auto 0 auto; /* centrer horizontalement */
  text-align: center;
}

.tarif-box h2 {
  margin-bottom: 20px;
  font-size: 2em;
  color: #0077b6;
}

/* Style tableau */
.tarif-table {
  width: 100%;           /* occupe toute la largeur du conteneur */
  max-width: 600px;      /* limite la largeur */
  margin: 0 auto;        /* centre la table dans le bloc */
  border-collapse: collapse;
}

.tarif-table th,
.tarif-table td {
  border: 1px solid #ccc;
  padding: 12px;
  text-align: center;
}

.tarif-table th {
  background-color: #003776;
  color: white;
}

.tarif-table tr:nth-child(even) {
  background-color: #f1f9ff;
}

#tarifs {
  padding: 20px 0 60px 0; /* plus d’espace en haut */
}

#paiement .container {
  text-align: center;
}

#paiement ul {
  list-style: none;
  padding: 0;
}

.large-col {
  width: 180px;
}

/* Centrer le titre et le formulaire de la section contact */
#contact .container {
  text-align: center; /* centre le titre */
}

#contact form {
  margin: 0 auto;         /* centre le formulaire */
  max-width: 500px;       /* limite largeur */
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;    /* centre les éléments du formulaire */
}

#contact input,
#contact textarea {
  width: 100%;            /* champs prennent toute la largeur */
  max-width: 500px;
  box-sizing: border-box;
}

#enfants,
#adultes,
#aquaforme {
  text-align: center;
}

.titre-blanc {
  background-color: #003776; /* couleur de fond pour le titre */
  padding: 20px;
  border-radius: 10px;
  max-width: 300px;
  margin: auto;
  margin-bottom: 40px;
  margin-top: -10px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); 
  color: #ffffff; /* couleur du texte du titre */
}

/* Section avantages avec images de chaque côté */
.avantages-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 40px auto;
  padding: 20px;
  flex-wrap: wrap;
}

.side-image {
  width: 200px;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.avantages-texte {
  max-width: 600px;
  text-align: center;
}

.avantages-texte h3 {
  margin-bottom: 15px;
  text-align: center;
}

.avantages-texte ul {
  list-style: none;
  padding: 0;
}

.avantages-texte li {
  margin-bottom: 10px;
}

.card-enfants {
  background-image: url('enfants.jpg');
  background-size: cover;
  background-position: center;
  color: white; /* Pour que le texte ressorte */
  position: relative;
  overflow: hidden;
}

.card-enfants::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.4); /* filtre sombre pour lisibilité */
  z-index: 0;
}

.card-enfants * {
  position: relative;
  z-index: 1;
}

.card-enfants p {
  color: #ffffff;
}

.card-enfants h3 {
  color: #ffffff;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
}

.card-adultes {
  background-image: url('adultes.jpg');
  background-size: cover;
  background-position: center;
  color: white; /* Pour que le texte ressorte */
  position: relative;
  overflow: hidden;
}

.card-adultes::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.4); /* filtre sombre pour lisibilité */
  z-index: 0;
}

.card-adultes * {
  position: relative;
  z-index: 1;
}

.card-adultes p {
  color: #ffffff;
}

.card-adultes h3 {
  color: #ffffff;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
}

.card-aquaforme {
  background-image: url('aquaforme.jpg');
  background-size: cover;
  background-position: center;
  color: white; /* Pour que le texte ressorte */
  position: relative;
  overflow: hidden;
}

.card-aquaforme::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.4); /* filtre sombre pour lisibilité */
  z-index: 0;
}

.card-aquaforme * {
  position: relative;
  z-index: 1;
}

.card-aquaforme p {
  color: #ffffff;
}

.card-aquaforme h3 {
  color: #ffffff;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
}

/* -----------------------------------
  RÈGLES RESPONSIVES AJOUTÉES
----------------------------------- */

/* Responsive global : base pour tous les petits écrans */
@media (max-width: 1024px) {
  .container {
    width: 95%;
  }

  nav ul {
    gap: 40px;
  }
}

/* Pour les tablettes et petits écrans (entre 700px et 1024px) */
@media (max-width: 700px) {
  /* Navigation : menu vertical */
  nav ul {
    /* flex-direction: column; */    
    gap: 15px;
    align-items: center;
  }
  nav a {
    font-size: 0.85em;
    padding: 5px;
  }
  
  #enfants .section-content,
  #adultes .section-content,
  #aquaforme .section-content {
    display: flex;
    flex-direction: column-reverse;
    gap: 20px;
    align-items: center;
    text-align: center;
  }


  /* Header : logo + titre en colonne */
  .header-flex {
    flex-direction: column;
    gap: 15px;
  }

  /* Section qui-suis-je : empilement vertical */
  .qui-suis-je-content {
    flex-direction: column;
    gap: 15px;
  }

  .qui-suis-je .photo,
  .qui-suis-je .texte {
    flex: 1 1 100%;
  }

  .qui-suis-je .photo {
    margin-top: 20px;
  }

  /* Cartes dans services empilées */
  .cards {
    flex-direction: column;
    gap: 15px;
  }
  .cards .card {
    display: flex;
    flex-direction: column;
    justify-content: center; /* centrer verticalement */
    align-items: center;
    text-align: center;
    min-height: 150px; /* ou une hauteur adaptée */
    padding: 20px;
  }

  /* Formulaire contact : champs plus larges */
  #contact input,
  #contact textarea {
    max-width: 100%;
  }

  #contact form {
    max-width: 100%;
    padding: 0 10px;
  }

  /* Tableaux avec scroll horizontal */
  @media (max-width: 700px) {
    .tarif-table {
      font-size: 0.85em;
    }
  
    .tarif-table th,
    .tarif-table td {
      padding: 8px 5px;
      font-size: 0.85em;
    }
  
    .tarif-box {
      padding: 20px;
    }
  
    .large-col {
      width: auto; /* Ne force pas une largeur trop grande */
    }
  
    /* Titres un peu plus petits */
    header h1,
    .hero h2,
    #services h2,
    .tarif-box h2 {
      font-size: 1.5em;
    }

    /* Ajout de marge dans la section contact sur mobile */
    #contact .container,
    #paiement .container {
    padding: 0 20px;
  }
  }
  
}

/* Pour mobiles très petits (moins de 480px) */
@media (max-width: 480px) {
  nav ul {
    gap: 10px;
  }

  .header-container {
    padding: 0 10px;
  }

  header h1 {
    font-size: 1.3em;
  }

  .hero h2 {
    font-size: 1.3em;
  }

  .cards {
    gap: 10px;
  }

  .tarif-box {
    padding: 15px;
    margin: 20px auto 0 auto;
  }
}