body {
  margin: 0px; /* 10 */
  padding: 0px; /* 10 */
  box-sizing: border-box;
  color: rgb(100, 100, 100); 
  background-color: rgb(30, 0, 2);
  font-family: Arial, Helvetica, sans-serif;
}

a:link {
color: cyan;
text-decoration: none;
}
a:hover {
color: #0000ff;
text-decoration: none;
}
a:visited {
color: #9000ff;
text-decoration: none;
}
*{
  font-family: Avenir, sans-serif;
  font-size: 1em;
  text-align: center;
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

.galerie {
  display: flex;
  flex-wrap: wrap;
  padding: 10px; /* 10 */
}

.galerie img {
  flex-basis: calc(33.333% - 20px); /* Ajuste la base, mais respecte max-width */
  flex-grow: 1;
  flex-shrink: 0;
  margin: 10px; /* 10 */
  width: auto; /* Ajuste la largeur automatiquement, respecte max-width */
  height: auto; /* Maintient les proportions en ajustant la hauteur en fonction de la largeur */
  max-width: 250px; /* Limite la largeur maximale à 200px */
  max-height: 250px; /*essai*/
  object-fit: contain; /* Assure que l'image est redimensionnée pour être contenue dans son cadre, sans perdre ses proportions */
}

@media (max-width: 300px) {
  .galerie img {
    flex-basis: 100%; /* Permet à chaque image de prendre toute la largeur sur les petits écrans */
    margin: 5px 0; /* Ajuste les marges pour les petits écrans */
  }
}
.base{
  font-size: 2em;
  text-align: center;
  margin: 10px;
  padding: 10px;
}

.conteneurphoto{
  display: grid;
  grid-template-columns: repeat(12,1fr);
  grid-template-rows: repeat(1,minmax(70px,1fr));
  margin: 10px;
}

.conteneurphotoV{
  display: grid;
  grid-template-columns: repeat(11,1fr);
  grid-template-rows: repeat(1,minmax(70px,1fr)); /*repeat(2*/
  margin: 10px;
}

.conteneurphoto > div{
  padding: 1px 0px; /* 15 0 */
}

.conteneurphotoV > div{
  padding: 1px 0px; /* 15 0 */
}

.lignedubas{
  display: grid;
  grid-template-columns: repeat(11,1fr);
  grid-template-rows: repeat(1,minmax(70px,1fr));
  margin: 10px;
}

.lignedubasV{
  display: grid;
  grid-template-columns: repeat(11,1fr);
  grid-template-rows: repeat(1,minmax(70px,1fr));
  margin: 10px;
}

.lignedubas > div{
  padding: 1px 0px; /* 15 0 */
}


.lignedubasV > div{
  padding: 1px 0px; /* 15 0 */
}


.textebase{
font-size: 1em;
text-align: left;
}

.gauchephoto{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 2em;
}

.gauchephotoV{
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 2em;
}


.droitephoto{
    grid-column-start: 12;
    grid-column-end: 13;
    grid-row-start: 1;
    grid-row-end: 1; /* 7 , 6 n'est pas mal */
    display: flex;
    flex-direction: column;
    justify-content: center;
	font-size: 2em;
    }
.droitephotoV{
    grid-column-start: 10;
    grid-column-end: 12;
    grid-row-start: 1;
    grid-row-end: 1; /* 7 , 6 n'est pas mal */
    display: flex;
    flex-direction: column;
    justify-content: center;
	font-size: 2em;
    }
    
.boitephoto{
    grid-column-start: 2;
    grid-column-end: 12;
    grid-row-start: 1;
    grid-row-end: 1; /* 7 */
}
.boitephotoV{
    grid-column-start: 3;
    grid-column-end: 10;
    grid-row-start: 1;
    grid-row-end: 1; /* 7 */
}


.grilleleg{
    grid-column-start: 2;
    grid-column-end: 12;
    grid-row-start: 1; /* 7 */
    grid-row-end: 1; /* 8 */
    font-size: 1.5em;
}

.grillelegV{
    grid-column-start: 3;
    grid-column-end: 10;
    grid-row-start: 1; /* 7 */
    grid-row-end: 1; /* 8 */
    font-size: 1.5em;
}
.grilleretourgalerie{
	padding: 0px 0px 0px 0px;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;  /* 7 */
    grid-row-end: 1;  /* 8 */
    font-size: 1em;
    color:red;
}

.grilleretourgalerieV{
	padding: 0px 0px 0px 0px;
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;  /* 7 */
    grid-row-end: 1;  /* 8 */
    font-size: 1em;
    color:red;
}

.grilleretour{
    grid-column-start: 12;/* 10*/
    grid-column-end: 13; /* 12 */
    grid-row-start: 1;  /* 7 */
    grid-row-end: 1;
	color:cyan;
    padding: 50px 0px 0px 20px;
	text-align: right;
    font-size: 1em;
}

.grillealea{
    grid-column-start: 11;/* 10*/
    grid-column-end: 11; /* 12 */
    grid-row-start: 1;  /* 7 */
    grid-row-end: 2;
	color:cyan;
/*    padding: 100px 0px 0px 1000px; */
	text-align: center;
    font-size: 1em;
}

.grilleretourV{
    grid-column-start: 10;
    grid-column-end: 12;
    grid-row-start: 1;  /* 7 */
    grid-row-end: 1;
	color:cyan;
    padding: 50px 0px 0px 20px;
	text-align: right;
    font-size: 1em;
}