html{
	font-size: 1.5rem;
}

header{
	padding: 50px;
	display: grid;
	grid-template-columns: minmax(250px, 300px) 1fr 1fr;
	align-items: center;
  gap: 2rem;
	margin-top : 2%;
	margin-bottom: 1%;
	background-image: url("../images/imgStQtin.jpeg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

a{
	color: inherit;
}

#logoContainer{
	display: flex;           /* active Flexbox */
  justify-content: center; /* centre horizontalement */
}

#logo {
	/*margin: 3em;*/
	/*clamp(250px, 15vw, 500px)*/
	width: 100%;
	height: auto;
}

#mainTitle{
	font-size: 1.4rem;
	color: white;
	text-align: center;
	display: flex;           /* active Flexbox */
  justify-content: center; /* centre horizontalement */
  align-items: center; 
	backdrop-filter: blur(3px);
	border-radius: 10px;
	padding: 2%;
}
.menu{
	padding-left:0%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	text-align: center;
	color: white;
	gap: 1em;

}


.menu_item a{
	display: flex;
  align-items: center;     /* Centre verticalement le texte */
  justify-content: center;
	text-decoration: none;
	border: 2px solid white;
	border-radius: 10px;
	backdrop-filter: blur(10px);
	/*width: 200px;
	height: 40px;*/
	padding: 5%;
	color: white;
	vertical-align: middle;
}


@media (max-width: 1500px) and (min-width: 1000px){
	header {
    grid-template-columns: minmax(200px, 250px) 1fr 1fr;
  }
	#mainTitle{
		font-size: 1.3rem;
	}
}

@media (max-width: 1000px) and (min-width: 700px){
	#mainTitle{
		font-size: 1.2rem;
	}

  header {
    grid-template-columns: minmax(200px, 250px) 1fr 1fr;
  }

	.menu{
		grid-template-columns: 1fr;
	}
}

@media (max-width: 700px) and (min-width: 500px){

	#mainTitle{
		font-size: 1.1rem;
	}

  header {
    grid-template-columns: 200px 1fr;
  }
	
	.menu{
		grid-template-columns: 1fr 1fr 1fr;
	}


	.menu_item a{
		padding: 6px;
	}
}

@media (max-width: 500px) {
	#mainTitle{
		font-size: 1.05rem;
	}

  header {
    grid-template-columns: 1fr; 
  }

	#logoContainer, #mainTitle, .menu{
		max-width: 80%;
		margin: 0 auto; /* CENTRAGE horizontal */
	}

	.menu{
		grid-template-columns: 1fr;
	}
}

ul{
	list-style: none;
}

/*article{
	display: flex; 
  align-items: center;  
  justify-content: center; 
}*/

.illustration{
	border-radius: 10px; /* bords arrondis */
	display: block;
	width: 100%;         /* ou une largeur fixe : 300px */
  height: 250px;    /* hauteur uniforme */
  object-fit: cover;   /* remplit sans déformer */
	justify-self: right;
}

hr{
	margin-left: 30px;
	margin-right: 30px;
	height: 5px;
	background-color: grey;
	border-radius: 5px;
}

article a{
	text-decoration: none;
}

#imgDeFond{
	padding: 3em;
	background-image:  linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/background.jpg");
  background-size: cover;    /* adapte l'image à la taille du div */
  background-position: center; /* centre l'image */
  background-repeat: no-repeat; /* évite que l'image se répète */
	color: white;
}

#titre{
	text-align: center;
}

#contenu{
	width: 100%;
	margin: auto;
	text-align: center;
}

footer ul{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	text-align : center;
	border: 1px solid black;
	padding: 3px;
	border-radius: 5px;
	background-color: ligthgrey;
	font-size: 1.3rem;
}

iframe {
	border-radius: 10px;
	background-color: #FFC0CB;
}