/* Réinitialisation de quelques styles de base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: rgb(220, 220, 220); /* <-- ajout du fond gris */
}

/* En-tête, navigation et section hero */
header {
  background: url('images/hero.jpg') no-repeat center center/cover;
  color: #fff;
  position: relative;
  height: auto;   /* prend la hauteur du contenu */
  min-height: 60vh; /* garde une hauteur mini agréable */
}

/* Tous les paragraphes en police Raleway */
p {
  font-family: 'Raleway', sans-serif;
  font-size: 1.2rem;   /* taille harmonieuse */
  line-height: 1.8;   /* bon confort de lecture */
  color: #333;
}

/* Barre de navigation */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 90px;
  z-index: 1000;
  display: flex;
  justify-content: center;   /* centre logo + liens */
  align-items: center;       /* centre verticalement */
  background: #fff;          /* blanc opaque */
  gap: 2rem;                 /* espace entre logo et liens */
}

.container {
  max-width: 1200px;  /* largeur identique à la nav */
  margin: 0 auto;     /* centre le contenu */
  padding: 0 1rem;    /* espace intérieur pour respirer */
}

.logo {
  position: relative;
}

.logo img {
  position: relative; 
  top: 0;             
  height: 80px;       
  width: auto;
}

/* Navigation principale */
.nav-links {
  list-style: none;
  display: flex;
}

.nav-links li {
  margin-left: 1.5rem;
}

.nav-links a {
  color: #000;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
  font-family: 'Nunito Sans', sans-serif; /* police proche d’Avenir */
}

.nav-links a:hover {
  color: #f4b41a;  /* couleur dorée au survol (garde ton effet actuel) */
}

/* ===== HERO ===== */
.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;          /* occupe toute la hauteur */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.hero img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;     
  align-items: center;
  gap: 1.5rem;
  max-width: 1000px;
  width: 90%;
  padding-top: 90px;   /* tient compte de la hauteur du menu */
  text-align: center;
  flex: 1;
}

/* Texte hero */
.hero-text {
  text-align: center;
  color: #000;
  width: 100%;
}

.hero-text h2:first-child {
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
  font-size: 2.2rem;
}

.hero-text h2:nth-child(2) {
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
  font-size: 3rem;
}

.hero-text h2:nth-child(3) {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: 2.2rem;
  margin-top: 2.5rem;
}

.hero-text h2:nth-child(4) {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: 2.2rem;
}

/* Contact info en bas à gauche */
.contact-info {
  position: absolute;
  bottom: 1rem; 
  left: 1rem;
  background: rgba(255,255,255,0.8);
  padding: 0.8rem 1.2rem;
  border-radius: 6px;
  font-size: 1.3rem;   /* un peu plus grand */
  text-align: left;
}

.contact-info p {
  margin: 0.4rem 0;
  display: flex;
  align-items: center;
  font-family: 'Arial', sans-serif;
}

.contact-info i {
  margin-right: 0.6rem;
  font-size: 1.2rem;
}


#Kyokute {
  padding: 4rem 2rem;
  background-color: rgb(220, 220, 220); /* fond gris clair */
  color: #333;
  font-family: 'Raleway', sans-serif;  /* applique Raleway */
    }
    
    .Le-Kyokute {
      display: flex;
      justify-content: space-between; /* espace équilibré texte/image */
      align-items: center;
      gap: 8rem;           /* espace conséquent entre image et texte */
      margin-top: 1rem;
    }

    /* Style pour le bloc de texte */
    .Ktext {
      margin-left: 0;        
      width: 65%;            /* occupe plus de largeur (au lieu de 55%) */
      text-align: left;
      padding: 20px;         /* réduit le padding pour libérer de la place */
      line-height: 1.8;
      max-width: 900px;      /* largeur plus réaliste et lisible */
    }

    .Ktext h2:first-child {
    font-family: 'Raleway', sans-serif;
    font-weight: 400;   /* non gras (Regular) */
    font-size: 2.8rem;  /* taille plus grande (ajuste si besoin) */
    }

    .Ktext h2:nth-child(2) {
    font-family: 'Raleway', sans-serif;
    font-weight: 400;   /* non gras (Regular) */
    font-size: 1.8rem;  /* taille plus grande (ajuste si besoin) */
    margin-bottom: 1rem; /* espace sous le titre */
    }

    /* Style pour le bloc image */
    .Kimage img {
      width: 80%;
      max-width: 350px;
      height: auto;
      border-radius: 15px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); /* ombre plus forte */
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .Kimage img:hover {
      transform: scale(1.03);
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.45); /* ombre plus profonde au survol */
    }

    .Le-Inverse {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 8rem;           /* espace conséquent entre image et texte */
      margin-top: 2rem;
      }

    /* Style pour le bloc image */
    .Invimage img {
      width: 100%;
      max-width: 350px;
      height: auto;
      border-radius: 15px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); /* ombre plus forte */
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .Invimage img:hover {
      transform: scale(1.03);
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.45); /* ombre plus profonde au survol */
    }

/* Style pour le bloc de texte */
    .Invtext {
      margin-left: 0;        /* supprime le décalage excessif */
      width: 55%;            /* un peu plus compact */
      text-align: left;
      padding: 10px;
      line-height: 1.8;
      max-width: 600px;      /* réduit la largeur max */    
    }

    .Invtext h2:first-child {
      font-family: 'Raleway', sans-serif;
      font-weight: 400;   /* non gras (Regular) */
      font-size: 2.8rem;  /* taille plus grande (ajuste si besoin) */
      margin-bottom: 1rem; /* espace sous le titre */
    }


/* Style général de la section Bienfait */
#Bienfait {
  padding: 4rem 2rem;
  background-color: #b8cec9;
  color: #333;
}

/* Conteneur principal : on empile les blocs (1er texte puis ligne image+texte) */
.Les-Bienfait {
  display: block;            /* au lieu de flex */
  margin-top: 1rem;
}

/* ===== 1) Premier texte = pleine largeur ===== */
.Bcontent {
  display: block;            /* pas de mise en ligne */
  margin-bottom: 2rem;       /* espace avant la ligne suivante */
}

.Btext {
  margin-left: 0;
  width: 100%;               /* pleine largeur */
  max-width: 1000px;         /* limite lisible */
  margin: 0 auto;            /* centre le bloc dans la section */
  text-align: left;
  padding: 10px 0;           /* padding léger */
  line-height: 1.8;
}

.Btext h2:first-child {
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  font-size: 2.8rem;
}

/* Si tu gardes le bloc image du 1er étage dans le HTML, on le cache */
.Bimage { display: none; }

/* ===== 2) Ligne suivante : image à gauche, texte à droite ===== */
.Bcontent-inverse {
  display: flex;
  align-items: flex-start;
  gap: 3rem;                 /* espace conséquent entre image et texte */
  margin-top: 1rem;
}

/* Image à gauche */
.Bimage-inverse {
  flex: 0 0 auto;            /* garde sa largeur naturelle */
  padding: 0;                /* pas de padding parasite */
}

.Bimage-inverse img {
  width: 100%;
  max-width: 380px;          /* taille max souhaitée */
  height: auto;
  border-radius: 15px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.30);
}

.Bimage-inverse img[src*="bienfaits.png"] {
  opacity: 0.8;
}

/* Texte à droite */
.Btext-inverse {
  flex: 1;                   /* prend le reste de l’espace */
  max-width: 600px;
  text-align: left;
  line-height: 1.8;
  padding: 0;
}

.Btext-inverse p {
  font-family: 'Raleway', sans-serif;
  font-size: 1rem !important;   /* force une taille plus petite */
  line-height: 1.8;             /* un peu plus serré que 1.8 */
  color: #333;
}

/* Localisation : reprend la même logique visuelle que la section Kyokutē */
#Localisation {
  padding: 4rem 2rem;
  background-color: rgb(220, 220, 220);
  color: #333;
  font-family: 'Raleway', sans-serif;
}

#Localisation .Ktext h2 {
  font-size: 2.5rem;              /* même taille que Kyokutē */
  font-family: 'Raleway', sans-serif; /* ou la police exacte utilisée */
  font-weight: 400;
  margin-bottom: 1rem;
}

.Kimage img[src*="Maison_Thalie_1.png"] {
  width: 100%;
  max-width: 900px; /* taille plus grande spécifique à cette image */
}

.Invimage img[src*="MTmidlle.png"] {
  width: 100%;
  max-width: 600px; /* spécifique à cette image */
}

#CarteSoins {
  padding: 4rem 2rem;
  background-color: #b8cec9;
  color: #333;
}
.CarteSoins .contenu h1 {
  text-align: center;
  margin-bottom: 1rem;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;   /* non gras (Regular) */
  font-size: 2.8rem;  /* taille plus grande (ajuste si besoin) */
}

.CarteSoins .contenu .intro {
  font-size: 1.2rem;
  margin: 0 0 2rem 0; /* plus de centrage automatique */
  text-align: left;
}

.texte-centre {
  background-color: rgb(220, 220, 220); /* vert foncé élégant, tu peux changer la teinte */
  color: white;              /* pour garder le texte lisible */
  padding: 20px;             /* espace intérieur */
  border-radius: 10px;       /* coins arrondis */
  max-width: 600px;          /* limite la largeur pour rester lisible */
  margin: 0 auto;            /* centre le bloc */
  line-height: 1.8;
}

.ligne-centree {
  display: flex;
  justify-content: center;
  align-items: center; /* aligne verticalement le texte entre les images */
  gap: 8rem;
  flex-wrap: wrap; /* permet de s'adapter sur petit écran */
}

.image-gauche img,
.image-droite img {
  width: 200px;
  height: auto;
  border-radius: 10px;
}

.texte-centre {
  font-size: 1.1rem;
  line-height: 1.5;
  text-align: center;
}

/* Section Mon parcours (harmonisée) */
#QuiSuisJe {
  padding: 4rem 2rem;
  background: rgb(220,220,220);;
  color: #333;
  font-family: 'Raleway', sans-serif;
}

/* Titres dans la section, même look que Le Kyokuté */
    .Ktext {
          margin-left: 0;        
          width: 65%;            /* occupe plus de largeur (au lieu de 55%) */
          text-align: left;
          padding: 20px;         /* réduit le padding pour libérer de la place */
          line-height: 1.8;
          max-width: 900px;      /* largeur plus réaliste et lisible */
        }

    .Ktext h2:first-child {
      text-align: left;  
      font-family: 'Raleway', sans-serif;
      font-weight: 400;   /* non gras (Regular) */
      font-size: 2.8rem;  /* taille plus grande (ajuste si besoin) */
      }

   /* Style pour le bloc image */
    .Kimage img {
      width: 100%;
      max-width: 350px;
      height: auto;
      border-radius: 15px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); /* ombre plus forte */
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .Kimage img:hover {
      transform: scale(1.03);
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.45); /* ombre plus profonde au survol */
    }

    .Le-Inverse {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 8rem;           /* espace conséquent entre image et texte */
      margin-top: 2rem;
      }

    /* Style pour le bloc image */
    .Invimage img {
      width: 100%;
      max-width: 350px;
      height: auto;
      border-radius: 15px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); /* ombre plus forte */
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .Invimage img:hover {
      transform: scale(1.03);
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.45); /* ombre plus profonde au survol */
    }


/* Conteneur 3 colonnes */
.contact-cards {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin: 60px auto;
  max-width: 1100px;
  padding: 0 20px;
  padding: 4rem 2rem;
  background-color: #b8cec9;
  color: #333;

}

/* Style des encarts */
.contact-card {
  flex: 1;
  background: rgb(220,220,220);
  border: 1px solid #e5e5e5;
  border-radius: 16px;
  padding: 30px 20px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
  transition: transform 0.2s ease;
}

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

.contact-card h2 {
  margin-top: 0;
  font-size: 1.3rem;
  font-weight: 500;
}

.contact-card p {
  margin: 12px 0 20px;
  line-height: 1.5;
  color: #444;
}

.btn-map {
  display: inline-block;
  padding: 10px 16px;
  background: #111;
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.95rem;
  transition: background 0.2s ease, transform 0.2s ease;
}

.btn-map:hover {
  background: #333;
  transform: translateY(-2px);
}

/* Responsive : passer en colonne sur petits écrans */
@media (max-width: 800px) {
  .contact-cards {
    flex-direction: column;
    gap: 30px;
  }
}


/* Pied de page */
footer {
  background: #ffffff;
  color: #fff;
  text-align: center;
  padding: 1rem 2rem;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

/* Formulaire de contact popup */
#contactFormPopup {
  display: none;                /* caché par défaut */
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  padding: 30px 20px;
  border-radius: 15px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  z-index: 10000;
  max-width: 400px;
  width: 90%;
}

#contactFormPopup input,
#contactFormPopup textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-family: 'Raleway', sans-serif;
  font-size: 1rem;
}

#contactFormPopup textarea {
  resize: vertical;
  min-height: 100px;
}

#contactFormPopup button {
  background: #111;
  color: #fff;
  border: none;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  margin-right: 10px;
}

#contactFormPopup button:hover {
  background: #333;
  transform: translateY(-2px);
}

/* Fond sombre derrière le popup si nécessaire */
#popupOverlay {
  display: none;
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
}

/* ===== Media Queries pour tablettes ===== */
@media screen and (max-width: 1024px) {
  .Le-Kyokute, .Le-Inverse, .Bcontent-inverse {
    flex-direction: column;   /* passe les blocs texte/image en colonne */
    gap: 2rem;                /* réduit l’espace entre blocs */
    text-align: center;       /* centre le texte */
  }

  .Ktext, .Invtext, .Btext-inverse {
    width: 100%;
    max-width: 90%;
    margin: 0 auto;
  }

  .Kimage img, .Invimage img, .Bimage-inverse img {
    width: 80%;
    max-width: 350px;
    margin: 0 auto;
  }

  .hero-text h2 {
    font-size: 1.8rem;
  }

  .contact-info {
    font-size: 14px;
    padding: 0.5rem;
  }
}

/* ===== Media Queries pour mobiles ===== */
@media screen and (max-width: 768px) {
  nav {
    flex-direction: column;  /* nav en colonne */
    gap: 10px;
  }

  .nav-links {
    flex-direction: column;
    gap: 10px;
  }

  .hero-text h2 {
    font-size: 1.4rem;
  }

  .Le-Kyokute, .Le-Inverse, .Bcontent-inverse {
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
  }

  .Ktext, .Invtext, .Btext-inverse {
    width: 100%;
    max-width: 100%;
    padding: 0 10px;
  }

  .Kimage img, .Invimage img, .Bimage-inverse img {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
  }

  .contact-cards {
    flex-direction: column;
    gap: 20px;
    padding: 2rem 1rem;
  }

  .contact-card {
    width: 100%;
  }

  .hero-text {
    width: 90%;
    top: 100px;
  }
}
/* Hamburger menu - caché par défaut */
.hamburger {
  display: none;
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  color: #000;
}

/* Menu responsive */
@media (max-width: 800px) {
  .nav-links {
    display: none;          /* cache les liens par défaut */
    flex-direction: column;
    background: #fff;
    position: absolute;
    top: 90px;
    right: 0;
    width: 200px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    border-radius: 8px;
    padding: 1rem;
  }

  .nav-links li {
    margin: 1rem 0;
  }

  .hamburger {
    display: block;         /* affiche le bouton hamburger */
    position: absolute;
    top: 25px;
    right: 20px;
  }

  .nav-links.active {
    display: flex;
  }
}


/* Responsive mobile */
@media (max-width: 768px) {
  .hero-text h2 {
    font-size: 1.3rem;
  }

  .contact-info {
    position: static;   /* redevient dans le flux */
    margin-top: 1rem;
    font-size: 1rem;
    text-align: center;
  }
}

.social-logo {
  width: 100px;            /* Ajuster la largeur de l'icône */
  height: auto;            /* Laisser la hauteur se redimensionner proportionnellement */
  margin-right: 20px;      /* Ajouter un écart à droite entre les logos */
}

.social-icon {
  display: inline-block;   /* S'assurer que les logos sont alignés en ligne */
}

.social-icon i {
  color: black;            /* Appliquer la couleur noire aux icônes */
}

.social-icon:hover i {
  transform: scale(1.1);    /* Agrandir légèrement l'icône au survol */
}