.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(231, 231, 231);
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.grid-page {
  display: grid;
  grid-template-rows:
  [rowdate] 30px
  [rownaturemorte] 60px
  [rowportraitcouleur] 60px
  [rowportraitnb] 300px
  [rowespace] 175px
  [rowobjet] 175px
  [rowpaysages] 100px
  [rowpeintureplastique] 250px
  [rowvectorieltabgraph] 100px
  [rowsketch] 100px
  [rowabstrait] 250px
  [rowbd] 100px
  [rowplanches] 175px
  [rowplan] 50px
  [rowscene] 175px;
  grid-template-columns:
  [atitre] 80px
  [a2016] 50px
  [a2017] 175px
  [a2018] 220px
  [a2019] 220px
  [a2020] 220px
  [a2021] 220px
  [a2022] 220px
  [a2023] 220px
  [a2024] 220px
  [a2025] 125px;
  gap: 3;
  overflow-x: visible;
  align-items: center;
}

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

.case {
  display: flex;
  flex-wrap: wrap;
  /* retour à la ligne automatique */
  gap: 1px;
  /* espace entre miniatures */
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  border-radius: 15%;
  z-index: 1;
}

.miniature {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: visible;
  /* IMPORTANT */
}

.miniature img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.2s ease;
  border-radius: 15%;
}

.miniature:hover img {
  position: relative;
  transform: scale(4);
  z-index: 10;
}

.miniature iframe {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.2s ease;
  border-radius: 15%;
}

.miniature:hover iframe {
  position: relative;
  transform: scale(4);
  z-index: 10;
}

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.lightbox.hidden {
  display: none;
}

.lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  cursor: grab;
  transition: transform 0.15s ease;
  user-select: none;
}

.lightbox img.dragging {
  cursor: grabbing;
}

/* boutons */
.lightbox button {
  position: absolute;
  background: none;
  border: none;
  color: white;
  font-size: 3rem;
  cursor: pointer;
  padding: 1rem;
  opacity: 0.7;
}

.lightbox button:hover {
  opacity: 1;
}

.lightbox .close {
  top: 10px;
  right: 20px;
  font-size: 3rem;
}

.lightbox .prev {
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox .next {
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

/*

.titre {
  justify-content: center;
}

.naturemorte {
  background: radial-gradient(
    ellipse,
    rgba(157, 196, 227, 1) 50%,
    rgba(187, 240, 164, 0) 80%
  );
}

.portraitcouleur {
  background: radial-gradient(
    ellipse,
    rgba(147, 109, 93, 1) 50%,
    rgba(187, 240, 164, 0) 80%
  );
}

.portraitnb {
  background: radial-gradient(
    ellipse,
    rgba(114, 174, 137, 1) 50%,
    rgba(187, 240, 164, 0) 80%
  );
}

.espace {
  background: radial-gradient(
    ellipse,
    rgba(75, 106, 154, 1) 50%,
    rgba(187, 240, 164, 0) 80%
  );
}

.objet {
  background: radial-gradient(
    ellipse,
    rgba(236, 197, 239, 1) 50%,
    rgba(187, 240, 164, 0) 80%
  );
}

.paysage {
  background: radial-gradient(
    ellipse,
    rgba(255, 246, 164, 1) 50%,
    rgba(187, 240, 164, 0) 80%
  );
}

.peinture {
  background: radial-gradient(
    ellipse,
    rgba(92, 111, 86, 1) 50%,
    rgba(187, 240, 164, 0) 80%
  );
}

.vectoriel {
  background: radial-gradient(
    ellipse,
    rgba(184, 123, 123, 1) 50%,
    rgba(187, 240, 164, 0) 80%
  );
}

.sketch {
  background: radial-gradient(
    ellipse,
    rgba(127, 85, 104, 1) 50%,
    rgba(187, 240, 164, 0) 80%
  );
}

.abstrait {
  background: radial-gradient(
    ellipse,
    rgba(132, 117, 148, 1) 50%,
    rgba(187, 240, 164, 0) 80%
  );
}

.bd {
  background: radial-gradient(
    ellipse,
    #bbf0a4 50%,
    rgba(187, 240, 164, 0) 80%
  );
}

.plan {
  background: radial-gradient(
    ellipse,
    rgba(255, 159, 99, 1) 50%,
    rgba(187, 240, 164, 0) 80%
  );
}

.planches {
  background: radial-gradient(
    ellipse,
    rgba(159, 255, 245, 1) 50%,
    rgba(187, 240, 164, 0) 80%
  );
}

.scene {
  background: radial-gradient(
    ellipse,
    rgba(104, 96, 130, 1) 50%,
    rgba(187, 240, 164, 0) 80%
  );
}

.ligne-fond {
  min-height: 120px;
  grid-column: 1 / -1;
  z-index: 0;
  pointer-events: none;
}

.naturemorte-bg {
  background: linear-gradient(
    180deg,
    rgba(157, 196, 227, 0) 40%,
    rgba(157, 196, 227, 0.6) 50%,
    rgba(157, 196, 227, 0) 60%
  );
}

.rowportraitcouleur-bg {
  background: linear-gradient(
    180deg,
    rgba(147, 109, 93, 0) 40%,
    rgba(147, 109, 93, 0.6) 50%,
    rgba(147, 109, 93, 0) 60%
  );
}

.rowportraitnb-bg {
  background: linear-gradient(
    180deg,
    rgba(114, 174, 137, 0) 40%,
    rgba(114, 174, 137, 0.6) 50%,
    rgba(114, 174, 137, 0) 60%
  );
}

.rowespace-bg {
  background: linear-gradient(
    180deg,
    rgba(75, 106, 154, 0) 40%,
    rgba(75, 106, 154, 0.6) 50%,
    rgba(75, 106, 154, 0) 60%
  );
}

.rowobjet-bg {
  background: linear-gradient(
    180deg,
    rgba(236, 197, 239, 0) 40%,
    rgba(236, 197, 239, 0.6) 50%,
    rgba(236, 197, 239, 0) 60%
  );
}

.rowpaysages-bg {
  background: linear-gradient(
    180deg,
    rgba(255, 246, 164, 0) 40%,
    rgba(255, 246, 164, 0.6) 50%,
    rgba(255, 246, 164, 0) 60%
  );
}

.rowpeintureplastique-bg {
  background: linear-gradient(
    180deg,
    rgba(92, 111, 86, 0) 40%,
    rgba(92, 111, 86, 0.6) 50%,
    rgba(92, 111, 86, 0) 60%
  );
}

.rowvectorieltabgraph-bg {
  background: linear-gradient(
    180deg,
    rgba(184, 123, 123, 0) 40%,
    rgba(184, 123, 123, 0.6) 50%,
    rgba(184, 123, 123, 0) 60%
  );
}

.rowsketch-bg {
  background: linear-gradient(
    180deg,
    rgba(127, 85, 104, 0) 40%,
    rgba(127, 85, 104, 0.6) 50%,
    rgba(127, 85, 104, 0) 60%
  );
}

.rowabstrait-bg {
  background: linear-gradient(
    180deg,
    rgba(132, 117, 148, 0) 40%,
    rgba(132, 117, 148, 0.6) 50%,
    rgba(132, 117, 148, 0) 60%
  );
}

.rowbd-bg {
  background: linear-gradient(
    180deg,
    rgba(187, 240, 164, 0) 40%,
    rgba(187, 240, 164, 0.6) 50%,
    rgba(187, 240, 164, 0) 60%
  );
}

.rowplanches-bg {
  background: linear-gradient(
    180deg,
    rgba(159, 255, 245, 0) 40%,
    rgba(159, 255, 245, 0.6) 50%,
    rgba(159, 255, 245, 0) 60%
  );
}

.rowplan-bg {
  background: linear-gradient(
    180deg,
    rgba(255, 159, 99, 0) 40%,
    rgba(255, 159, 99, 0.6) 50%,
    rgba(255, 159, 99, 0) 60%
  );
}

.rowscene-bg {
  background: linear-gradient(
    180deg,
    rgba(104, 96, 130, 0) 40%,
    rgba(104, 96, 130, 0.6) 50%,
    rgba(104, 96, 130, 0) 60%
  );
}