/* 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) */
}

/* Section hero */
.hero {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center; /* centre verticalement */
  align-items: center;     /* centre horizontalement */
  text-align: center;
  min-height: 60vh;        /* cohérent avec le header */
}

.hero img {
  width: 100%;
  height: auto;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 50%, rgba(0,0,0,0)) 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
  mask-repeat: no-repeat;
  mask-size: cover;
}

.hero-text {
  position: absolute;
  top: calc(120px + 1rem);
  left: 0;
  padding: 1rem 2rem;
  text-align: left;
  color: #000;
}

.hero-text {
  position: absolute;
  top: 120px;                   /* hauteur à ajuster */
  left: 50%;                    /* centre le bloc horizontalement */
  transform: translateX(-50%);  /* recentre par rapport à sa largeur */
  text-align: center;           /* centre le texte à l’intérieur */
  color: #000;
  width: 90%;                   /* limite la largeur max */
  max-width: 1000px;            /* largeur maximale lisible */
}

.hero-text h2:first-child {
  font-family: 'Raleway', sans-serif;
  font-weight: 500;  /* optionnel : met en gras */
  font-size: 2rem;
}

.hero-text h2:nth-child(2) {
  font-family: 'Raleway', sans-serif;
  font-weight: 500;   /* Regular (un peu plus marqué que le premier titre) */
  font-size: 2.8rem;  /* un peu plus grand que les phrases normales */
}

.hero-text h2:nth-child(3) {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 300;   /* Regular (un peu plus marqué que le premier titre) */
  font-style: italic;                   /* italique */
  font-size: 2rem;    /* responsive */
  margin-top: 2.5rem;                   /* espace au-dessus → plus bas */
}

.hero-text h2:nth-child(4) {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 300;   /* Regular (un peu plus marqué que le premier titre) */
  font-style: italic;                   /* italique */
  font-size: 2rem;
}

/* Bloc de coordonnées */
.contact-info {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.6);
  padding: 0.5rem 1rem;
  border-radius: 5px;
}

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

.contact-info i {
  margin-right: 0.5rem;
}


#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;
}