body {
    font-size: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
/*    height: 100vh; /* Hauteur totale de la vue */
/*   overflow: auto; /* Permet le défilement si nécessaire */
}

article {
    width: 69vmin; 
     margin-top: 2vmin; /* Ajustement de l'espacement */
     transform: translateY(0%); /* Supprimer la translation */
}
 
 h1, h2, a, p {
	font-family: Verdana, "Trebuchet MS", Arial, "Arial black";
	color: #666666;
}

h1 {
    font-size: 3em;
}
h2 {
    font-size: 1.3em;
}
a, p {
	font-size: 1.0em;
}
.pluspetit {
	font-size: 0.7em;
}
.plusgrand {
	font-size: 1.1em;
}

@media screen and (max-width: 64em){
    h1{font-size: 2.5em;
    }   
    h2{font-size: 1.2em;
    }
    a, p {
        font-size: 1.0em;
    }
    .pluspetit {
        font-size: 0.7em;
    }
    .plusgrand {
        font-size: 1.1em;
    }
}
@media screen and (max-width: 50em){
    h1{font-size: 2.1em;
    }
    h2{font-size: 1.1em;
    }
    a, p {
        font-size: 0.9em;
    }
    .pluspetit {
        font-size: 0.7em;
    }
    .plusgrand {
        font-size: 1em;
    }
}
@media screen and (max-width: 30em){
    h1{font-size: 1.8em;
    }
    h2{font-size: 1em;
    }
    a, p {
        font-size: 0.8em;
    }
    .pluspetit {
        font-size: 0.6em;
    }
    .plusgrand {
        font-size: 0.9em;
    }
}

h1 {
	font-weight: normal;
}
h2 {
	font-weight: normal;
}
a, p {
    line-height: 1.3;
}

p {
	margin-bottom: 12px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 12px;
	text-align: justify;
}

.plusclair {
	color: #999999
}
a:hover {
    opacity: 0.6;
}

/* Ajustements pour les conteneurs et les éléments */
.conteneur {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
    align-items: center;
	height: 10vh;
    width: 69vmin; /* Réduire la largeur pour s'adapter à la vue */
    margin-top: 0vmin; /* Ajustement de l'espacement */
    transform: translateY(0%); /* Supprimer la translation */
}
.conteneurfooter {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
    align-items: center;
	height: 2vh;
    width: 69vmin; /* Réduire la largeur pour s'adapter à la vue */
    margin-top: 1vmin; /* Ajustement de l'espacement */
    transform: translateY(0%); /* Supprimer la translation */
}

#conteneurmatrice {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: space-around;
    height: auto;
    width: 75vmin;
    margin-top: 0vmin;
}
.elementmatrice {
    width: 19vmin; /* Réduire la largeur des images */
    height: 19vmin; /* Assurer que les images sont carrées */
    margin: 3vmin; /* Ajuster l'espacement */
}
.image_index {
    width: 69vmin;
    height: 69vmin; 
    margin-top: 3vmin; 
}

#conteneuractualite {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: space-around;
    height: auto;
    width: 69vmin;
    margin-top: 0vmin;
}
.elementtriptyque {
    width: 21vmin; /* Réduire la largeur des images */
    height: auto; 
    margin: 1vmin; /* Ajuster l'espacement */
}
.elementdiptyque {
    width: 32vmin; /* Réduire la largeur des images */
    height: auto; 
    margin: 1vmin; /* Ajuster l'espacement */
}
.elementunique {
    width: 45vmin; /* Réduire la largeur des images */
    height: auto; 
    margin: 1vmin; /* Ajuster l'espacement */
}

/* Ajuster la taille des images */
.elementmatrice img {
    width: 100%; /* Remplir le conteneur */
    height: 100%; /* Garder l'aspect carré */
    object-fit: cover; /* Couvrir l'espace sans perdre les proportions */
}
.image_index img {
    width: 100%; /* Remplir le conteneur */
    height: 100%; /* Garder l'aspect carré */
    object-fit: cover; /* Couvrir l'espace sans perdre les proportions */
}

.elementtriptyque img {
    width: 100%; /* Remplir le conteneur */
    object-fit: cover; /* Couvrir l'espace sans perdre les proportions */
}
.elementdiptyque img {
    width: 100%; /* Remplir le conteneur */
    object-fit: cover; /* Couvrir l'espace sans perdre les proportions */
}
.elementunique img {
    width: 100%; /* Remplir le conteneur */
    object-fit: cover; /* Couvrir l'espace sans perdre les proportions */
}

	
.element {
	margin-top: 20vmin;
	transform: translateY(-20%);
}

.conteneurtitre{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items:flex-start;
    width: auto; /* Ajuster la largeur */
    height: auto; /* Ajuster la hauteur */
}
.conteneurnav{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items:flex-end;
    width: auto; /* Ajuster la largeur */
    height: auto; /* Ajuster la hauteur */
	}

.elementtitre {
    text-align: justify;
}
.elementnav {
    text-align: justify;
}