:root {
  --esp-1: 1%;
  --gt-1: 0, 5%;
  --gt-2: 1%;
  --gt-3: 1.5%;
  --gt-4: 2%;
  --gt-5: 2.5%;
  --gt-6: 3%;
  --gt-7: 3.5%;
  --gt-8: 4%;
  --gt-9: 4.5%;
  --gt-10: 5%;
  --mprojet: 8%;
  --p2photos: 12%;
  --p3photos: 12%;
}

body {
  background-color: var(--bs-body-bg);
}

/* padding horizontaux en pourcentages */

.pad-1 {
  padding-left: var(--esp-1);
  padding-right: var(--esp-1);
}
.pad-2 {
  padding-left: calc(2 * var(--esp-1));
  padding-right: calc(2 * var(--esp-1));
}
.pad-8 {
  padding-left: calc(8 * var(--esp-1));
  padding-right: calc(8 * var(--esp-1));
}
.pad-10 {
  padding-right: calc(10 * var(--esp-1));
  padding-left: calc(10 * var(--esp-1));
}
.pad-12 {
  padding-right: calc(12 * var(--esp-1));
  padding-left: calc(12 * var(--esp-1));
}

/* taille figures en pourcentages */

.gimh-1 figure,
.gimh-1 > div,
.gim-1 figure,
.gim-1 > div {
  margin-right: calc(var(--gt-1) / 2);
  margin-left: calc(var(--gt-1) / 2);
}

.gimv-1 figure,
.gimv-1 > div,
.gim-1 figure,
.gim-1 > div {
  margin-bottom: var(--gt-1);
}

.gimh-2 figure,
.gimh-2 > div,
.gim-2 figure,
.gim-2 > div {
  margin-right: calc(var(--gt-2) / 2);
  margin-left: calc(var(--gt-2) / 2);
}

.gimv-2 figure,
.gimv-2 > div,
.gim-2 figure,
.gim-2 > div {
  margin-bottom: var(--gt-2);
}

.gimh-3 figure,
.gimh-3 > div,
.gim-3 figure,
.gim-3 > div {
  margin-right: calc(var(--gt-3) / 2);
  margin-left: calc(var(--gt-3) / 2);
}

.gimv-3 figure,
.gimv-3 > div,
.gim-3 figure,
.gim-3 > div {
  margin-bottom: var(--gt-3);
}

.gimh-4 figure,
.gimh-4 > div,
.gim-4 figure,
.gim-4 > div {
  margin-right: calc(var(--gt-4) / 2);
  margin-left: calc(var(--gt-4) / 2);
}

/* 
.gimv-4 figure,
.gimv-4 > div,
.gim-4 figure,
.gim-4 > div {
  margin-bottom: var(--gt-4);
} */

.gmv-4 > * {
  margin-bottom: var(--gt-4);
}
/* 
.gimh-5 figure,
.gimh-5 > div,
.gim-5 figure,
.gim-5 > div {
  margin-right: calc(var(--gt-5) / 2);
  margin-left: calc(var(--gt-5) / 2);
} */

.gim-5 :first-child {
  margin-right: calc(var(--gt-5) / 2);
  margin-left: calc(var(--gt-5) / 2);
}

.gimv-5 figure,
.gimv-5 > div,
.gim-5 figure,
.gim-5 > div {
  margin-bottom: var(--gt-5);
}

.gimh-6 figure,
.gimh-6 > div,
.gim-6 figure,
.gim-6 > div {
  margin-right: calc(var(--gt-6) / 2);
  margin-left: calc(var(--gt-6) / 2);
}

.gimv-6 figure,
.gimv-6 > div,
.gim-6 figure,
.gim-6 > div {
  margin-bottom: var(--gt-6);
}

.gimh-7 figure,
.gimh-7 > div,
.gim-7 figure,
.gim-7 > div {
  margin-right: calc(var(--gt-7) / 2);
  margin-left: calc(var(--gt-7) / 2);
}

.gimv-7 figure,
.gimv-7 > div,
.gim-7 figure,
.gim-7 > div {
  margin-bottom: var(--gt-7);
}

.gimh-8 figure,
.gimh-8 > div,
.gim-8 figure,
.gim-8 > div {
  margin-right: calc(var(--gt-8) / 2);
  margin-left: calc(var(--gt-8) / 2);
}

.gimv-8 figure,
.gimv-8 > div,
.gim-8 figure,
.gim-8 > div {
  margin-bottom: var(--gt-8);
}

.gimh-9 figure,
.gimh-9 > div,
.gim-9 figure,
.gim-9 > div {
  margin-right: calc(var(--gt-9) / 2);
  margin-left: calc(var(--gt-9) / 2);
}

.gimv-9 figure,
.gimv-9 > div,
.gim-9 figure,
.gim-9 > div {
  margin-bottom: var(--gt-9);
}

.gimh-10 figure,
.gimh-10 > div,
.gim-10 figure,
.gim-10 > div {
  margin-right: calc(var(--gt-10) / 2);
  margin-left: calc(var(--gt-10) / 2);
}

.gimv-10 figure,
.gimv-10 > div,
.gim-10 figure,
.gim-10 > div {
  margin-bottom: var(--gt-10);
}

/*  tailles des images pour faire du 2, 3 ou 4 colonnes */

/* IMAGES PAR 4 */


.im23 > figure {
  width: 23%;
  /* max-width: 300px; */
  min-width: 150px;
}



/* IMAGES PAR 3 */

.im30 > figure,
.im30 > div {
  width: 30%;
  max-width: 450px;
  min-width: 170px;
}

.im32 > figure,
.im32 > div {
  width: 32%;
    max-width: 450px;
  min-width: 170px;
}

/* IMAGES PAR 2 */

.im48 > figure {
  width: 48%;
}

.im47 > figure {
  width: 47%;
}

.im46 > figure {
  width: 46%;
}

/* IMAGE PAR 1 */

.im90 > figure {
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
}


@media (max-width: 768px) {
.im48 > figure, .im47 > figure, .im46 > figure {
  width: 100%;
}
}

/* FIN IMAGES */



/* spécifique des vidéos dans la page carnets */
#video div {
  width: 48%;
}
/* obsolète ?
.par2 video {
  width: 100%;
} */


.margeprojet img {
  width: 100%;
}





@media (max-width: 768px) {

  .im30 > figure, .im32 > figure {
    width: 48%;
  }
  .im23 > figure {
    width: 48%;
  }
}


@media (max-width: 576px) {

  .im30 > figure, .im32 > figure {
    width: 100%;
  }

}

.im40 > figure {
  width: 40%;
  max-width: 420px;
  min-width: 180px;
}



.margeprojet {
  margin-left: var(--mprojet);
  margin-right: var(--mprojet);
}

.marge20 {
  margin-left: 20%;
  margin-right: 20%;
}

.marge15 {
  margin-left: 15%;
  margin-right: 15%;
}

.marge14 {
  margin-left: 14%;
  margin-right: 14%;
}




/*   image index   */
.imax {
  width: 100%;
  max-width: 1400px;
}



/* AFFICHAGE POPUP  */

/* images popup A4 */
.wh-62 {
  width: 62vh;
  max-width: 90vw;
}

@media (max-width: 576px) {
  .wh-62 {
    width: 100%;
  }
}