.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:
    [rowp0] 60px /* Marie Boishus */
    [rowtitreoutils] 20px
    [rowoutils] 230px /* outils */
    [rowtitremanifeste] 20px
    [rowmanifeste] 230px /* projet manifeste */
    [rowtitreprojet] 20px
    [rowprojet] 230px /* projets */
    [rowtitreenquete] 20px
    [rowenquete] 400px /* enquêtes de terrain / mémoires */
    [rowenquete2] 400px /* suite des mémoires */
    [rowtitredessins] 20px
    [rowpdessins] 230px
    [rowtitrecv] 20px
    [rowcv] 230px /* CV */
    [rowcredit] 60px; /* crédits */
    grid-template-columns:
    [colp1] 350px
    [colp2] 350px
    [colp3] 350px;
    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: 300px;
  max-height: 300px;
}

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

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

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

.outils {
  grid-row: rowoutils;
}

.projets {
  grid-row: rowprojet;
}

.memoires {
  grid-row: rowenquete;
}

.memoires2 {
  grid-row: rowenquete2;
}

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

.titre {
  border-top: 1px solid white;
}