body {
  margin: 0;
  font-family: "Segoe UI", Arial, sans-serif;
  background-color: #FFFBF4;
  color: #1a3d7c;
}

/* MENU */
.menu {
  background: #FFFBF4;
  padding: 20px 0;
}

/* Titre aligné avec la colonne gauche */
.menu-title {
  padding-left: 80px;
  /* s’applique uniquement au titre */
}

/* Menu centré */
.menu-links {
  width: fit-content;
  margin: 10px auto 0;
  text-align: center;
  transform: translateX(47px);
}

.menu-links a {
  margin: 0 23px;
  text-decoration: none;
  color: #1a3d7c;
  font-weight: 500;
  font-size: 1.15rem;
}


.site-title {
  font-weight: 600;
  font-size: 0.9rem;
  /* un peu plus petit */
  position: relative;
  top: -7px;
  /* remonte légèrement le titre */
}


/* CONTENU */

/* STRUCTURE PRINCIPALE */
main {
  margin-top: 6.25rem;
  display: flex;
  /* <-- AJOUT IMPORTANT */
}

/* COLONNE TITRE (alignée avec le menu) */
.title-column {
  padding-left: 80px;
  width: 28%;
}

.main-title {
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.5;
  color: #2f4f85;
  max-width: 700px;
  margin-bottom: 3rem;
}

/* COLONNE CONTENU (plus à droite) */
.content-column {
  margin-top: 20px;
  max-width: 700px;
  width: 72%;
}


.separator {
  text-align: center;
  margin-bottom: 1.5rem;
  letter-spacing: 4px;
  color: #2f4f85;
}

.intro {
  font-size: 1.05rem;
  line-height: 1.6;
  text-align: justify;
}


.photo-wrapper {
  max-width: 750px;
  /* largeur contrôlée */
  margin: 40px auto;
  /* centré dans la page */
  transform: translateX(100px);
}


.hero-image {
  width: 100%;
  height: auto;
  /* garantit les proportions */
  border-radius: 10px;
}


/* FOOTER */
footer {
  margin-top: 80px;
  padding: 20px 80px;
  color: ##2f4f85;
}

/* --- MENU MOBILE --- */

/* Icône hamburger */
.hamburger {
  display: none;
  /* caché sur ordinateur */
  font-size: 2rem;
  color: #1a3d7c;
  padding: 20px;
  cursor: pointer;
}

/* Panneau qui glisse */
.mobile-menu {
  position: fixed;
  top: 0;
  left: -250px;
  /* caché à gauche */
  width: 250px;
  height: 100%;
  background: #FFFBF4;
  padding-top: 80px;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
  transition: left 0.3s ease;
  display: flex;
  flex-direction: column;
}

.mobile-menu a {
  padding: 15px 25px;
  text-decoration: none;
  color: #1a3d7c;
  font-size: 1.1rem;
}

/* Quand le menu est ouvert */
.mobile-menu.open {
  left: 0;
}

/* --- Activation sur mobile --- */
@media (max-width: 700px) {

  /* On montre l’icône hamburger */
  .hamburger {
    display: block;
    font-size: 2.6rem;
  }

  /* On cache le menu desktop */
  .menu-links {
    display: none;
  }

  /* On ajuste les colonnes */
  main {
    flex-direction: column;
    margin-top: 2.5rem;
    /* au lieu de 6.25rem */
  }

  .title-column,
  .content-column {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .photo-wrapper {
    transform: none;
    max-width: 100%;
    margin: 20px auto;
    padding: 0 20px;
    /* <-- ajoute de l’espace à gauche et à droite */
    box-sizing: border-box;
  }
}

/* --- Responsive tablette --- */
@media (min-width: 700px) and (max-width: 1100px) {

  .site-title {
    margin-bottom: 30px;
    /* espace supplémentaire */
  }


  /* Colonnes plus souples */
  main {
    flex-direction: column;
    margin-top: 3rem;
    max-width: 800px;
    margin: 3rem auto;
    /* centre le contenu */


  }

  .title-column,
  .content-column {
    width: 100%;
    padding-left: 30px;
    padding-right: 30px;
  }

  /* Photo centrée et plus raisonnable */
  .photo-wrapper {
    transform: none;
    max-width: 75%;
    margin: 30px auto;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .hero-image {
    width: 100%;
    height: auto;
  }

  /* Menu desktop un peu recentré */
  .menu-links {
    transform: none;
  }
}

/* --- PAGE HISTOIRE : mise en page propre et claire --- */

body.histoire-page main {
  display: block;
  margin-top: 4rem;
}

/* Titre centré */
body.histoire-page .title-column {
  padding-left: 0;
  width: 100%;
  text-align: center;
}

body.histoire-page .main-title {
  margin: 0 auto 5rem auto;
  max-width: 900px;
}

/* Bloc photo + texte */
.story-layout {
  display: flex;
  align-items: flex-start;
  /* bords supérieurs alignés */
  gap: 50px;

  max-width: 1005px;
  /* largeur totale du bloc */
  margin: 3rem auto 5rem auto;

  transform: translateX(-162px);
  /* décalage vers la gauche */
  padding-right: 20px;
}

/* Photo */
.story-photo img {
  width: 480px;
  /* taille confortable */
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15);
  display: block;
}

/* Texte */
.story-text {
  flex: 1;
  line-height: 1.75;
  font-size: 1.05rem;
  /* max-width: 900px;          <-- texte plus large */
  transform: translateY(-9px);
}

.story-text p {
  margin-top: 0;
  margin-bottom: 1.2rem;
}


/* Mobile */
@media (max-width: 700px) {
  .story-layout {
    flex-direction: column;
    align-items: center;
    transform: none;
    /* <-- annule le décalage desktop */
    max-width: 100%;
    margin: 2rem auto;
    padding: 0 20px;
    /* espace à gauche/droite */
    box-sizing: border-box;
  }

  .story-photo img {
    width: 100%;
    max-width: 450px;
    height: auto;
  }

  .story-text {
    width: 100%;
    transform: none;
    /* <-- annule le translateY */
    font-size: 1.05rem;
    /* lisible mais pas énorme */
    line-height: 1.6;
  }
}

/* TABLETTE */
@media (min-width: 700px) and (max-width: 1100px) {

  .story-layout {
    flex-direction: column;
    /* photo au-dessus du texte */
    align-items: center;
    transform: none;
    /* <-- annule le décalage desktop */
    max-width: 90%;
    margin: 3rem auto;
    padding: 0 30px;
    box-sizing: border-box;
  }

  .story-photo img {
    width: 100%;
    max-width: 500px;
    /* belle taille tablette */
    height: auto;
  }

  .story-text {
    width: 100%;
    max-width: 700px;
    /* largeur idéale tablette */
    transform: none;
    font-size: 1.15rem;
    line-height: 1.7;
  }
}


/* Désactive les limites de largeur pour la page histoire */
body.histoire-page .title-column,
body.histoire-page .content-column {
  max-width: none;
  width: auto;
  padding: 0;
}




/* --- PAGE CONTACT : version centrée et douce --- */

body.contact-page main {
  display: block;
}

.contact-container {
  max-width: 1000px;
  margin: 4rem auto;
  padding: 0 20px;
}

/* Photo + texte côte à côte */
.contact-row {
    display: flex;
    align-items: center;
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto 3rem auto;
    padding: 0 20px;
}

/* Photo */
.contact-photo img {
    width: 390px; /* taille confortable */
    border-radius: 12px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.15);
}

/* Texte */
.contact-text {
    flex: 1;
    font-size: 1.05rem;
    line-height: 1.7;
}

/* Formulaire centré */
.contact-form {
  max-width: 700px;
  margin: 0 auto 4rem auto;
  background: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.contact-form label {
  font-weight: bold;
}

.contact-form input,
.contact-form textarea {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
}

.contact-form button {
  background-color: #1a3d7c;
  color: white;
  padding: 12px;
  border: none;
  border-radius: 6px;
  font-size: 1.1rem;
  cursor: pointer;
}

.contact-form button:hover {
  background-color: #153264;
}

@media (max-width: 700px) {
    .contact-row {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .contact-photo img {
        width: 100%;
        max-width: 450px;
    }

    .contact-text {
        font-size: 1.15rem;
    }
}