*{
	margin:0;
	padding:0;
}

body {
    
    max-width: 100%;
    margin: 0 auto;
    padding: 0; /* Supprime tout remplissage par défaut */
    font-family: 'Montserrat', sans-serif;
    text-align: center;
}

header { padding-top: 15%; }

/* --------- NAVIGATION ------------------------------------------------------------------------------------------- */

nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center; /* Centre les éléments horizontalement */
    flex-wrap: wrap;
}

nav li {
    flex: 0; /* Ne pas permettre aux éléments de s'étendre */
    margin: 0 12px; /* Ajustez la marge pour contrôler l'espace entre les éléments */
}

nav a {
    color: black;
    letter-spacing: 1.5px;
    font-size: 1.2em;
    text-decoration: none;
    padding: 20px 5px;
    display: inline-block;
    border-bottom: 2px solid transparent; /* Ligne invisible par défaut */
    transition: border-bottom 0.3s ease; /* Animation de transition */
}

nav a:hover {
    border-bottom: 2px solid blue; /* Ligne bleue visible au survol */
}

@media all and (min-width: 500px) {
    nav li {
        flex-basis: auto;
    }
}

@media all and (min-width: 1000px) {
    nav li {
        flex-basis: auto;
    }
}



/* ------------------------------------------------ MAIN -------------------- */


main { margin-top: 8%; font-size: 1.2em; }

h1 {
	font-family: 'Bodoni Moda', serif;
	font-size: 3em;
	font-weight: 500;

}

h2 {
    
    font-size: 1.5em;
    font-weight: 500;
    margin-bottom: 1%;
}

p {
    
    line-height: 1.5;
    font-size: 1.1em;
    color: black;
    text-align: justify;
}

.para { padding-bottom: 0.6em; }

.main { padding-top: 2%; height: auto; }

img {
    padding-top: 2%;
    height: auto;
    width: 60%;
    max-width: 100%; /* Assure que l'image ne dépasse pas la largeur de son conteneur */
    border: 1px solid gray; /* Bordure grise fine */
}

@media (min-width: 1200px) {
    img {
        width: 40%; /* Réduit la taille de l'image sur les grands écrans */
    }
}

@media (max-width: 600px) {
    img {
        width: 90%; /* Augmente la taille de l'image sur les petits écrans */
        margin: 0 auto; /* Centre l'image */
    }
}


/* Paragraphes HORS des colonnes seulement */
  main > p,
  .retour p {
      margin: 0 20%;
      line-height: 1.6;
  }

  p {
      line-height: 1.5;
      font-size: 1.1em;
      color: black;
      text-align: justify;
  }

  p a {
      text-decoration: none;
      color: black;
      border-bottom: 2px solid transparent;
  }

  p a:hover {
      border-bottom: 2px solid blue;
      padding-bottom: 15px;
  }

/* -------------- 2 COLONNES (GRID) -------------------- */

  .two-columns {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
      max-width: 1200px;
      margin: 2rem auto;
      padding: 0 1rem;
  }

  .two-columns .column {
      text-align: left;
  }

  .two-columns .column p {
      margin: 0 0 1rem 0;
      line-height: 1.6;
      text-align: justify;
  }

  .two-columns .column h2 {
      margin-bottom: 1rem;
      text-align: left;
  }

  .two-columns .column strong {
      display: block;
      margin: 1rem 0 0.5rem 0;
  }

  /* Colonnes empilées sur écrans étroits */
  @media (max-width: 1100px) {
      .two-columns {
          grid-template-columns: 1fr;
          gap: 2rem;
      }
  }

/* -------------- retour --------------------- */

.retour {
    font-size: 1.4em;
    padding-top: 5%;
    text-align: center;
}

.retour a {
    text-decoration: none;
    color: inherit; /* Utilise la couleur du conteneur parent */
    transition: color 0.4s ease; /* Ajoute une transition pour un effet plus fluide */
}

.retour a:hover { color: blue; /* Change la couleur du lien en rouge au survol */ }



/* -------------- BOUTON ---------------------------- */

.mon-bouton {
  color: #fff;                         /* Texte blanc */
  padding: 10px 20px;                  /* Espacement interne */
  border-radius: 6px;                  /* Coins arrondis */
  text-decoration: none;               /* Pas de souligné */
  display: inline-block;
  border: none;                        /* Pas de bordure */
  font-size: 18px;                     /* Taille du texte */
  cursor: pointer;                     /* Curseur main au survol */
  font-weight: bold;
  margin-bottom: 12px;                 /* espace sous les boutons pour cellulaire */
}

.bouton-bleu {
  background-color: darkblue;            /* Bleu */
}

.bouton-rouge {
  background-color: darkslategray;      
}

/* -------------- PIED DE PAGE --------------------- */

footer {

	font-size: 0.9em;
	text-align: center;
	margin-top: 20%;
	margin-bottom: 5%;
}