.karla-normal {
  font-family: "Karla", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.karla-extra-light {
  font-family: "Karla", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
}

.karla-bold {
  font-family: "Karla", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

body {
  font-family: karla;
  background-color: rgb(196, 196, 196);
  padding-left: 10rem;
  padding-right: 10rem;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.grid-page {
    display: grid;
    grid-template-rows:
    [rowtitre] 50px
    [rowsoustitre] 50px
    [rowpbellephoto] 1000px
    [rowpbrest] 500px
    [rowpcontexte] 500px
    [rowpexpl0] 300px
    [rowplit1] 520px
    [rowplit2] 520px
    [rowpsuricate1] 520px
    [rowpsuricate2] 520px
    [rowpexpl5] 700px
    [rowpmob] 100px
    [rowpdalles1] 400px
    [rowpdalles2] 400px
    [rowpdalles3] 400px
    [rowpbanc] 850px
    [rowplampphotomont] 600px
    [rowpcaptionlamp] 100px
    [rowpvide] 200px
    [rowpcalculs] 600px
    [rowpcaptioncalculs] 100px
    [rowpvide] 200px
    [rowpplans] 600px
    [rowpcaptionplans] 100px
    [rowpvideo] 830px
    [rowpcaptionvideo] 200px
    [rowpvide] 200px
    [rowpmanifeste1] 350px
    [rowpvide] 200px
    [rowpmanifeste2] 350px
    [rowpvide] 100px
    [rowpposter] 800px
    [rowpfin] 60px;
    grid-template-columns:
    [colp1] 20rem
    [colp2] 20rem
    [colp3] 20rem;
    gap: 0;
    overflow-x: auto;
    align-items: center;
}

.grid-lit1 {
    display: grid;
    grid-template-rows:
    [rowl1] 500px;
    grid-template-columns:
    [coll11] 20rem
    [coll12] 30rem
    [coll13] 30rem
    [coll14] 16rem
    [coll15] 26rem
    [coll16] 40rem
    [coll17] 16rem
    [coll18] 26rem
    [coll19] 40rem;
    gap: 0;
    overflow-x: auto;
    align-items: center;
}

.grid-lit2 {
    display: grid;
    grid-template-rows:
    [rowl2] 500px;
    grid-template-columns:
    [coll21] 20rem
    [coll22] 20rem
    [coll23] 40rem
    [coll24] 20rem
    [coll25] 40rem
    [coll26] 20rem
    [coll27] 40rem;
    gap: 0;
    overflow-x: auto;
    align-items: center;
}

.grid-suricate1 {
    display: grid;
    grid-template-rows:
    [rows1] 500px;
    grid-template-columns:
    [cols11] 20rem
    [cols12] 30rem
    [cols13] 5rem
    [cols14] 35rem
    [cols15] 20rem
    [cols16] 10rem
    [cols17] 35rem;
    gap: 0;
    overflow-x: auto;
    align-items: center;
}

.grid-suricate2 {
    display: grid;
    grid-template-rows:
    [rows2] 500px;
    grid-template-columns:
    [cols21] 20rem
    [cols22] 30rem
    [cols23] 5rem
    [cols24] 35rem
    [cols25] 15rem
    [cols26] 35rem;
    gap: 0;
    overflow-x: auto;
    align-items: center;
}

.case {
  display: flex;
  text-align: center; /* centre horizontalement */
  justify-content: center;
  align-items: center; /* centre verticalement */
}

.vignette {
  border-radius: 3%;
  max-width: 500px;
  max-height: 500px;
}

a {
  color: black;
  text-decoration: none;
}

.sousdiv:hover {
  cursor: pointer;
  border: 2px solid white;
}

.sousdiv:hover a {
  font-weight: 700;
  color: white;
}

.accueil:hover {
  transform: scale(150%);
}