h1, h2, h3, h4, h5, p {
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5,
em, strong {
  font-size: inherit;
  font-style: normal;
  font-weight: 400;
}

a {
  color: inherit;
}

ul {
  margin: 0;
  padding: 0;
}

.no-select {
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  -khtml-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.clear {
  display: block;
  float: none;
  clear: both;
}

html {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  width: 100%;
  min-height: 100%;
  padding: 0;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

html, body {
  overflow-x: hidden;
}

figure {
  margin: 0;
}

::-webkit-scrollbar {
  display: none;
}

* {
  scrollbar-width: none;
}

:root {
  --FS12: calc(12 * 0.0833333333rem);
  --LH12: calc(15/12);
  --FS16: calc(16 * 0.0833333333rem);
  --LH16: calc(30/22);
  --FS22: calc(22 * 0.0833333333rem);
  --LH22: calc(30/22);
  --FS30: calc(30 * 0.0833333333rem);
  --LH30: calc(38/30);
  --FS60: calc(60 * 0.0833333333rem);
  --LH60: calc(68/60);
}

:root {
  --FRONT_COLOR: black;
  --BACK_COLOR: white;
  --RED: #e04117;
  --GREEN: #027939;
  --BLUE: #034198;
  --HIGHLIGHT: var(--RED);
  --BORDER_COLOR: rgba(0,0,0,0.2);
  --GRID_MARGIN: calc(20 * 0.0833333333rem);
  --GRID_GUTTER: calc(20 * 0.0833333333rem);
  --HEADER_WIDTH: calc(60 * 0.0833333333rem);
  --12: calc(12 * 0.0833333333rem);
  --15: calc(15 * 0.0833333333rem);
  --20: calc(20 * 0.0833333333rem);
  --30: calc(30 * 0.0833333333rem);
  --60: calc(60 * 0.0833333333rem);
}

#main-grid {
  display: grid;
  position: fixed;
  width: calc(100% - var(--HEADER_WIDTH));
  height: 100%;
  top: 0;
  right: 0;
  padding: 0 var(--GRID_MARGIN);
  box-sizing: border-box;
  grid-template-columns: repeat(8, 1fr);
  column-gap: var(--GRID_GUTTER);
  z-index: 10000;
  pointer-events: none;
}
#main-grid .col {
  height: 100%;
  grid-column-end: span 1;
  background-color: rgba(0, 255, 255, 0.1);
}

html {
  font-family: "VanillaSerif Light";
  font-size: 12px;
  line-height: normal;
  visibility: hidden;
}

body {
  line-height: 1;
  color: var(--FRONT_COLOR);
  background-color: var(--BACK_COLOR);
}

#main {
  width: 100%;
  min-height: 100%;
}

#main-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
  padding: var(--GRID_MARGIN);
  padding-left: calc(var(--GRID_MARGIN) + var(--HEADER_WIDTH));
  box-sizing: border-box;
}

picture,
.video-container {
  display: block;
  width: 100%;
}
picture img,
picture video,
.video-container img,
.video-container video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

a {
  text-decoration: none;
  color: var(--HIGHLIGHT);
}
a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.textarea h1:not(:last-child), .textarea h2:not(:last-child), .textarea h3:not(:last-child),
.textarea p:not(:last-child),
.textarea ul:not(:last-child),
.textarea figure:not(:last-child) {
  margin-bottom: 1.25em;
}
.textarea figure img {
  max-width: 100%;
  height: auto;
}
.textarea h3 {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}
.textarea em {
  color: var(--HIGHLIGHT);
}
.textarea ul {
  list-style: none;
}

*.mobile {
  display: none;
}

header {
  position: fixed;
  font-family: "EuroNext Mono";
  font-size: var(--FS16);
  line-height: var(--LH16);
  letter-spacing: 0em;
  letter-spacing: 0.125em;
  text-transform: uppercase;
  width: var(--HEADER_WIDTH);
  height: 100svh;
  padding: calc(var(--GRID_MARGIN) + 6 * 0.0833333333rem) var(--GRID_MARGIN);
  border-right: 1px solid var(--BORDER_COLOR);
  box-sizing: border-box;
  background-color: var(--BACK_COLOR);
  z-index: 1;
  transition: width ease-in-out 300ms;
}
header nav {
  pointer-events: none;
  opacity: 0;
  transition: opacity ease-in-out 300ms;
}
header a {
  display: block;
  white-space: nowrap;
}
header a.red {
  color: var(--RED);
}
header a.green {
  color: var(--GREEN);
}
header a.blue {
  color: var(--BLUE);
}
header a.sep {
  margin-bottom: var(--GRID_MARGIN);
}
header a:hover {
  text-decoration: none;
}
header #jeanlambert {
  transform: rotate(90deg);
  transform-origin: calc(8 * 0.0833333333rem) center;
  transition: transform ease-in-out 300ms;
}
header #switch-view {
  position: fixed;
  bottom: var(--GRID_MARGIN);
}
header #switch-view a {
  display: flex;
  align-items: center;
  column-gap: var(--20);
  line-height: 1;
  color: var(--HIGHLIGHT);
  cursor: pointer;
  pointer-events: none;
}
header #switch-view a:not(.sel) {
  opacity: 0.3;
}
header #switch-view a:hover {
  opacity: 1;
}
header #switch-view a > div {
  margin-top: 0.25em;
  opacity: 0;
  transition: opacity ease-in-out 300ms;
}
header #switch-view #switch-view-grid {
  margin-bottom: var(--GRID_MARGIN);
}
header #switch-view #switch-view-grid::before {
  display: block;
  content: "";
  width: var(--20);
  height: var(--20);
  background: linear-gradient(var(--HIGHLIGHT), var(--HIGHLIGHT)) 0 0/calc(9 * 0.0833333333rem) calc(9 * 0.0833333333rem), linear-gradient(var(--HIGHLIGHT), var(--HIGHLIGHT)) 100% 0/calc(9 * 0.0833333333rem) calc(9 * 0.0833333333rem), linear-gradient(var(--HIGHLIGHT), var(--HIGHLIGHT)) 0 100%/calc(9 * 0.0833333333rem) calc(9 * 0.0833333333rem), linear-gradient(var(--HIGHLIGHT), var(--HIGHLIGHT)) 100% 100%/calc(9 * 0.0833333333rem) calc(9 * 0.0833333333rem);
  background-repeat: no-repeat;
}
header #switch-view #switch-view-list::before {
  display: block;
  content: "";
  width: var(--20);
  height: calc(16 * 0.0833333333rem);
  background: linear-gradient(var(--HIGHLIGHT), var(--HIGHLIGHT)) 0 0/100% calc(2 * 0.0833333333rem), linear-gradient(var(--HIGHLIGHT), var(--HIGHLIGHT)) 0 50%/100% calc(2 * 0.0833333333rem), linear-gradient(var(--HIGHLIGHT), var(--HIGHLIGHT)) 0 100%/100% calc(2 * 0.0833333333rem);
  background-repeat: no-repeat;
}
header:hover {
  width: calc(var(--COLUMN_WIDTH) * 2 + var(--GRID_GUTTER) * 1 + var(--GRID_MARGIN) * 1 + var(--HEADER_WIDTH));
}
header:hover #jeanlambert {
  transform: rotate(0);
  color: var(--RED);
}
header:hover nav {
  pointer-events: initial;
  opacity: 1;
}
header:hover #switch-view a {
  pointer-events: initial;
}
header:hover #switch-view a > div {
  opacity: 1;
}

.template-page-home #main-container {
  height: 100svh;
}
.template-page-home #section-head {
  padding-bottom: var(--GRID_MARGIN);
  font-family: "VanillaSerif Light";
  font-size: var(--FS30);
  line-height: var(--LH30);
  letter-spacing: 0em;
}
.template-page-home #section-head .textarea em {
  color: var(--HIGHLIGHT);
}
.template-page-home #section-slideshow {
  position: relative;
  display: flex;
  column-gap: var(--GRID_GUTTER);
  width: calc(var(--COLUMN_WIDTH) * 5 + var(--GRID_GUTTER) * 4 + var(--GRID_MARGIN) * 0);
  flex-grow: 1;
}
.template-page-home #section-slideshow .carrousel {
  position: relative;
  overflow: hidden;
  width: 50%;
}
.template-page-home #section-slideshow .carrousel:nth-child(1) {
  cursor: w-resize;
}
.template-page-home #section-slideshow .carrousel .carrousel-inner {
  position: relative;
  width: 100%;
  height: 100%;
}
.template-page-home #section-slideshow .carrousel .carrousel-inner .carrousel-container {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
}
.template-page-home #section-slideshow .carrousel .carrousel-inner .carrousel-container > * {
  position: relative;
  display: block;
  height: fit-content;
  width: 100%;
  height: 100%;
  flex-shrink: 0;
}
.template-page-home #section-slideshow .carrousel .carrousel-inner .carrousel-container > * img {
  position: absolute;
}
.template-page-home #section-slideshow .carrousel .carrousel-inner .carrousel-container > * .infos {
  position: absolute;
  inset: 0;
  padding: var(--12);
  box-sizing: border-box;
  color: var(--BACK_COLOR);
  background-color: var(--HIGHLIGHT);
  opacity: 0;
}
.template-page-home #section-slideshow .carrousel .carrousel-inner .carrousel-container > * .infos h3 {
  font-family: "VanillaSerif Light";
  font-size: var(--FS30);
  line-height: var(--LH30);
  letter-spacing: 0em;
}
.template-page-home #section-slideshow .carrousel .carrousel-inner .carrousel-container > * .infos div {
  font-family: "VanillaSerif Light";
  font-size: var(--FS22);
  line-height: var(--LH22);
  letter-spacing: 0em;
  margin-top: var(--30);
}
.template-page-home #section-slideshow .carrousel .carrousel-inner .carrousel-container > *:hover .infos {
  opacity: 1;
}
.template-page-home #section-slideshow .carrousel .carrousel-inner .carrousel-container > *.single-graphic .infos {
  background-color: var(--BLUE);
}
.template-page-home #section-slideshow .cursor {
  position: absolute;
  left: 0;
  width: calc(var(--COLUMN_WIDTH) * 0.5 + var(--GRID_GUTTER) * 0 + var(--GRID_MARGIN) * 0);
  height: 100%;
  z-index: 1;
  cursor: w-resize;
}
.template-page-home #section-slideshow .cursor#cursor-right {
  left: unset;
  right: 0;
  cursor: e-resize;
}
.template-page-home #section-slideshow .count {
  font-family: "VanillaSerif Light";
  font-size: var(--FS60);
  line-height: var(--LH60);
  letter-spacing: 0em;
  line-height: 1;
  position: fixed;
  right: var(--GRID_MARGIN);
  bottom: calc(var(--GRID_MARGIN) - 0.2em);
}
.template-page-home #section-slideshow .count#count-current {
  right: calc(var(--COLUMN_WIDTH) * 1 + var(--GRID_GUTTER) * 1 + var(--GRID_MARGIN) * 0 + var(--GRID_MARGIN));
}

.template-page-about article .top {
  --BG_CUT: calc(40 * 0.0833333333rem) !important;
}
.template-page-about #section-previoussite a {
  text-decoration: none;
  color: var(--FRONT_COLOR);
}
.template-page-about #section-previoussite a:hover {
  color: var(--HIGHLIGHT);
}

.template-page-contact {
  --HIGHLIGHT: var(--GREEN);
}
.template-page-contact #section-contact {
  font-family: "VanillaSerif Light";
  font-size: var(--FS22);
  line-height: var(--LH22);
  letter-spacing: 0em;
  display: flex;
  column-gap: var(--GRID_GUTTER);
}
.template-page-contact #section-contact .left {
  width: calc(var(--COLUMN_WIDTH) * 5 + var(--GRID_GUTTER) * 4 + var(--GRID_MARGIN) * 0);
  padding-right: calc(var(--COLUMN_WIDTH) * 0.5 + var(--GRID_GUTTER) * 0 + var(--GRID_MARGIN) * 0);
  box-sizing: border-box;
}
.template-page-contact #section-contact .left h1,
.template-page-contact #section-contact .left .email,
.template-page-contact #section-contact .left .phone,
.template-page-contact #section-contact .left .address {
  font-family: "VanillaSerif Light";
  font-size: var(--FS60);
  line-height: var(--LH60);
  letter-spacing: 0em;
}
.template-page-contact #section-contact .left .links {
  margin-top: var(--60);
}
.template-page-contact #section-contact .left .credits {
  margin-top: var(--30);
}
.template-page-contact #section-contact .left:not(:has(.credits)) .copyright {
  margin-top: var(--30);
}
.template-page-contact #section-contact .left a {
  text-decoration: none;
  color: var(--FRONT_COLOR);
}
.template-page-contact #section-contact .left a:hover {
  color: var(--HIGHLIGHT);
}
.template-page-contact #section-contact .right {
  width: calc(var(--COLUMN_WIDTH) * 3 + var(--GRID_GUTTER) * 2 + var(--GRID_MARGIN) * 0);
}
.template-page-contact #section-contact .right img {
  height: auto;
}

.template-page-blog,
.template-page-about,
.template-page-news {
  --HIGHLIGHT: var(--GREEN);
  overflow-x: unset;
}
.template-page-blog #main-container,
.template-page-about #main-container,
.template-page-news #main-container {
  padding-top: 0;
}
.template-page-blog article,
.template-page-about article,
.template-page-news article {
  font-family: "VanillaSerif Light";
  font-size: var(--FS30);
  line-height: var(--LH30);
  letter-spacing: 0em;
  width: 100%;
  padding-bottom: var(--GRID_MARGIN);
  box-sizing: border-box;
}
.template-page-blog article .top,
.template-page-about article .top,
.template-page-news article .top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  width: 100%;
  height: var(--top-h, auto);
  padding-top: var(--GRID_MARGIN);
  --BG_CUT: calc(108 * 0.0833333333rem);
  background: linear-gradient(var(--BACK_COLOR), var(--BACK_COLOR)) top left/100% calc(100% - var(--BG_CUT)) no-repeat;
}
.template-page-blog article .top::before,
.template-page-about article .top::before,
.template-page-news article .top::before {
  display: block;
  content: "";
  position: absolute;
  width: calc(100vw - var(--HEADER_WIDTH));
  height: 1px;
  left: calc(-1 * var(--GRID_MARGIN));
  top: 0;
  background-color: var(--BORDER_COLOR);
}
.template-page-blog article .top h2,
.template-page-blog article .top .date,
.template-page-about article .top h2,
.template-page-about article .top .date,
.template-page-news article .top h2,
.template-page-news article .top .date {
  font-family: "VanillaSerif Light";
  font-size: var(--FS60);
  line-height: var(--LH60);
  letter-spacing: 0em;
  width: 100%;
  box-sizing: border-box;
}
.template-page-blog article .top,
.template-page-about article .top,
.template-page-news article .top {
  container-type: scroll-state;
}
@container scroll-state(stuck: top) {
  .template-page-blog article .top h2,
  .template-page-blog article .top .date,
  .template-page-about article .top h2,
  .template-page-about article .top .date,
  .template-page-news article .top h2,
  .template-page-news article .top .date {
    width: auto;
    transform: scale(0.5);
    transition: transform ease-in-out 150ms;
  }
  .template-page-blog article .top h2,
  .template-page-about article .top h2,
  .template-page-news article .top h2 {
    transform-origin: top left;
  }
  .template-page-blog article .top .date,
  .template-page-about article .top .date,
  .template-page-news article .top .date {
    transform-origin: top right;
    transition: none;
  }
  .template-page-blog article .top::before,
  .template-page-about article .top::before,
  .template-page-news article .top::before {
    top: calc(100% - var(--BG_CUT)) !important;
  }
}
.template-page-blog article .top.stuck h2,
.template-page-blog article .top.stuck .date,
.template-page-about article .top.stuck h2,
.template-page-about article .top.stuck .date,
.template-page-news article .top.stuck h2,
.template-page-news article .top.stuck .date {
  width: auto;
  transform: scale(0.5);
  transition: transform ease-in-out 150ms;
}
.template-page-blog article .top.stuck h2,
.template-page-about article .top.stuck h2,
.template-page-news article .top.stuck h2 {
  transform-origin: top left;
}
.template-page-blog article .top.stuck .date,
.template-page-about article .top.stuck .date,
.template-page-news article .top.stuck .date {
  transform-origin: top right;
  transition: none;
}
.template-page-blog article .top.stuck::before,
.template-page-about article .top.stuck::before,
.template-page-news article .top.stuck::before {
  top: calc(100% - var(--BG_CUT)) !important;
}
.template-page-blog article .top.measuring,
.template-page-about article .top.measuring,
.template-page-news article .top.measuring {
  container-type: normal;
  height: auto;
  transition: none;
}
.template-page-blog article .top.measuring h2, .template-page-blog article .top.measuring .date,
.template-page-about article .top.measuring h2,
.template-page-about article .top.measuring .date,
.template-page-news article .top.measuring h2,
.template-page-news article .top.measuring .date {
  transition: none;
}
.template-page-blog article .top .stuck-sentinel,
.template-page-about article .top .stuck-sentinel,
.template-page-news article .top .stuck-sentinel {
  height: 0;
}
.template-page-blog article .textarea,
.template-page-about article .textarea,
.template-page-news article .textarea {
  padding-top: var(--30);
  padding-right: calc(var(--COLUMN_WIDTH) * 2 + var(--GRID_GUTTER) * 1 + var(--GRID_MARGIN) * 0);
  box-sizing: border-box;
}
.template-page-blog article .textarea figure,
.template-page-about article .textarea figure,
.template-page-news article .textarea figure {
  margin-bottom: 1.25em;
}
.template-page-blog article .textarea figure img,
.template-page-about article .textarea figure img,
.template-page-news article .textarea figure img {
  max-width: calc(var(--COLUMN_WIDTH) * 3 + var(--GRID_GUTTER) * 3 + var(--GRID_MARGIN) * 0);
}

.template-single-graphic {
  --HIGHLIGHT: var(--BLUE);
}

.template-single-art #main-container,
.template-single-graphic #main-container {
  flex-direction: row;
  column-gap: 0;
}
.template-single-art #main-container #section-images,
.template-single-graphic #main-container #section-images {
  display: flex;
  flex-direction: column;
  row-gap: var(--GRID_GUTTER);
  width: calc(var(--COLUMN_WIDTH) * 5 + var(--GRID_GUTTER) * 4 + var(--GRID_MARGIN) * 0);
  height: calc(100svh - var(--GRID_GUTTER) * 2);
  padding-right: var(--GRID_GUTTER);
  box-sizing: border-box;
  overflow: scroll;
}
.template-single-art #main-container #section-images picture,
.template-single-graphic #main-container #section-images picture {
  max-width: 100%;
  max-height: calc(100% - var(--60) * 2);
}
.template-single-art #main-container #section-images picture img,
.template-single-graphic #main-container #section-images picture img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
.template-single-art #main-container #section-infos,
.template-single-graphic #main-container #section-infos {
  position: relative;
  font-family: "VanillaSerif Light";
  font-size: var(--FS30);
  line-height: var(--LH30);
  letter-spacing: 0em;
  width: calc(var(--COLUMN_WIDTH) * 3 + var(--GRID_GUTTER) * 3 + var(--GRID_MARGIN) * 0);
  height: calc(100svh - var(--GRID_GUTTER) * 2);
  padding-left: var(--GRID_GUTTER);
  padding-bottom: var(--60);
  box-sizing: border-box;
  overflow: scroll;
}
.template-single-art #main-container #section-infos:before,
.template-single-graphic #main-container #section-infos:before {
  position: fixed;
  content: "";
  right: calc(var(--COLUMN_WIDTH) * 3 + var(--GRID_GUTTER) * 3 + var(--GRID_MARGIN) * 1);
  top: 0;
  width: 1px;
  height: 100svh;
  background-color: rgba(0, 0, 0, 0.2);
}
.template-single-art #main-container #section-infos h1,
.template-single-graphic #main-container #section-infos h1 {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}
.template-single-art #main-container #section-infos .credits,
.template-single-graphic #main-container #section-infos .credits {
  font-family: "VanillaSerif Light";
  font-size: var(--FS22);
  line-height: var(--LH22);
  letter-spacing: 0em;
}
.template-single-art #main-container #section-infos .sold,
.template-single-graphic #main-container #section-infos .sold {
  color: var(--HIGHLIGHT);
}
.template-single-art #main-container #section-infos *,
.template-single-graphic #main-container #section-infos * {
  margin-bottom: var(--30);
}
.template-single-art #main-container #section-infos:has(.medium):has(.size) .medium,
.template-single-graphic #main-container #section-infos:has(.medium):has(.size) .medium {
  margin-bottom: 0;
}
.template-single-art #main-container #projects-nav,
.template-single-graphic #main-container #projects-nav {
  display: flex;
  justify-content: space-between;
  position: fixed;
  right: 0;
  bottom: 0;
  width: calc(var(--COLUMN_WIDTH) * 3 + var(--GRID_GUTTER) * 3 + var(--GRID_MARGIN) * 1);
  padding: var(--GRID_MARGIN);
  box-sizing: border-box;
  font-family: "VanillaSerif Light";
  font-size: var(--FS30);
  line-height: var(--LH30);
  letter-spacing: 0em;
  line-height: 1;
  background-color: var(--BACK_COLOR);
  border-top: 1px solid rgba(0, 0, 0, 0.2);
}
.template-single-art #main-container #projects-nav a,
.template-single-graphic #main-container #projects-nav a {
  text-decoration: none;
  color: var(--FRONT_COLOR);
}
.template-single-art #main-container #projects-nav a:hover,
.template-single-graphic #main-container #projects-nav a:hover {
  color: var(--HIGHLIGHT);
}

.template-page-graphics {
  --HIGHLIGHT: var(--BLUE);
}

.template-page-arts #main-container,
.template-page-graphics #main-container {
  flex-direction: row;
  justify-content: space-between;
  column-gap: 0;
}
.template-page-arts #main-container #section-arts,
.template-page-arts #main-container #section-graphics,
.template-page-graphics #main-container #section-arts,
.template-page-graphics #main-container #section-graphics {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--GRID_GUTTER);
  width: calc(var(--COLUMN_WIDTH) * 6 + var(--GRID_GUTTER) * 5 + var(--GRID_MARGIN) * 0);
  height: calc(100svh - var(--GRID_GUTTER) * 2);
  overflow: scroll;
}
.template-page-arts #main-container #section-arts .art,
.template-page-arts #main-container #section-arts .graphic,
.template-page-arts #main-container #section-graphics .art,
.template-page-arts #main-container #section-graphics .graphic,
.template-page-graphics #main-container #section-arts .art,
.template-page-graphics #main-container #section-arts .graphic,
.template-page-graphics #main-container #section-graphics .art,
.template-page-graphics #main-container #section-graphics .graphic {
  position: relative;
  height: 40svh;
  width: auto;
}
.template-page-arts #main-container #section-arts .art.hide,
.template-page-arts #main-container #section-arts .graphic.hide,
.template-page-arts #main-container #section-graphics .art.hide,
.template-page-arts #main-container #section-graphics .graphic.hide,
.template-page-graphics #main-container #section-arts .art.hide,
.template-page-graphics #main-container #section-arts .graphic.hide,
.template-page-graphics #main-container #section-graphics .art.hide,
.template-page-graphics #main-container #section-graphics .graphic.hide {
  display: none;
}
.template-page-arts #main-container #section-arts .art picture img,
.template-page-arts #main-container #section-arts .graphic picture img,
.template-page-arts #main-container #section-graphics .art picture img,
.template-page-arts #main-container #section-graphics .graphic picture img,
.template-page-graphics #main-container #section-arts .art picture img,
.template-page-graphics #main-container #section-arts .graphic picture img,
.template-page-graphics #main-container #section-graphics .art picture img,
.template-page-graphics #main-container #section-graphics .graphic picture img {
  width: auto;
  height: 100%;
}
.template-page-arts #main-container #section-arts .art .infos,
.template-page-arts #main-container #section-arts .graphic .infos,
.template-page-arts #main-container #section-graphics .art .infos,
.template-page-arts #main-container #section-graphics .graphic .infos,
.template-page-graphics #main-container #section-arts .art .infos,
.template-page-graphics #main-container #section-arts .graphic .infos,
.template-page-graphics #main-container #section-graphics .art .infos,
.template-page-graphics #main-container #section-graphics .graphic .infos {
  position: absolute;
  inset: 0;
  padding: var(--12);
  box-sizing: border-box;
  color: var(--BACK_COLOR);
  background-color: var(--HIGHLIGHT);
  opacity: 0;
}
.template-page-arts #main-container #section-arts .art .infos h3,
.template-page-arts #main-container #section-arts .graphic .infos h3,
.template-page-arts #main-container #section-graphics .art .infos h3,
.template-page-arts #main-container #section-graphics .graphic .infos h3,
.template-page-graphics #main-container #section-arts .art .infos h3,
.template-page-graphics #main-container #section-arts .graphic .infos h3,
.template-page-graphics #main-container #section-graphics .art .infos h3,
.template-page-graphics #main-container #section-graphics .graphic .infos h3 {
  font-family: "VanillaSerif Light";
  font-size: var(--FS30);
  line-height: var(--LH30);
  letter-spacing: 0em;
}
.template-page-arts #main-container #section-arts .art .infos div,
.template-page-arts #main-container #section-arts .graphic .infos div,
.template-page-arts #main-container #section-graphics .art .infos div,
.template-page-arts #main-container #section-graphics .graphic .infos div,
.template-page-graphics #main-container #section-arts .art .infos div,
.template-page-graphics #main-container #section-arts .graphic .infos div,
.template-page-graphics #main-container #section-graphics .art .infos div,
.template-page-graphics #main-container #section-graphics .graphic .infos div {
  font-family: "VanillaSerif Light";
  font-size: var(--FS22);
  line-height: var(--LH22);
  letter-spacing: 0em;
  margin-top: var(--30);
}
.template-page-arts #main-container #section-arts .art:hover .infos,
.template-page-arts #main-container #section-arts .graphic:hover .infos,
.template-page-arts #main-container #section-graphics .art:hover .infos,
.template-page-arts #main-container #section-graphics .graphic:hover .infos,
.template-page-graphics #main-container #section-arts .art:hover .infos,
.template-page-graphics #main-container #section-arts .graphic:hover .infos,
.template-page-graphics #main-container #section-graphics .art:hover .infos,
.template-page-graphics #main-container #section-graphics .graphic:hover .infos {
  opacity: 1;
}
.template-page-arts #main-container #section-filters,
.template-page-graphics #main-container #section-filters {
  position: relative;
  font-family: "EuroNext Mono";
  font-size: var(--FS16);
  line-height: var(--LH16);
  letter-spacing: 0em;
  line-height: 1;
  letter-spacing: 0.125em;
  text-transform: uppercase;
  width: calc(var(--COLUMN_WIDTH) * 1.5 + var(--GRID_GUTTER) * 1 + var(--GRID_MARGIN) * 1);
  height: calc(100svh - var(--GRID_GUTTER) * 2);
  overflow: scroll;
  color: var(--HIGHLIGHT);
}
.template-page-arts #main-container #section-filters:before,
.template-page-graphics #main-container #section-filters:before {
  position: fixed;
  content: "";
  right: calc(var(--COLUMN_WIDTH) * 1.5 + var(--GRID_GUTTER) * 1 + var(--GRID_MARGIN) * 1);
  top: 0;
  width: 1px;
  height: 100svh;
  background-color: rgba(0, 0, 0, 0.2);
}
.template-page-arts #main-container #section-filters a,
.template-page-graphics #main-container #section-filters a {
  display: flex;
  align-items: center;
  margin-bottom: 0.5em;
  cursor: pointer;
}
.template-page-arts #main-container #section-filters a::before,
.template-page-graphics #main-container #section-filters a::before {
  content: "";
  display: block;
  width: 0.75em;
  height: 0.75em;
  border-radius: 100%;
  border: 1px solid var(--HIGHLIGHT);
  margin-right: 0.5em;
  margin-top: -0.2em;
}
.template-page-arts #main-container #section-filters a:hover,
.template-page-graphics #main-container #section-filters a:hover {
  text-decoration: none;
}
.template-page-arts #main-container #section-filters a.sel::before,
.template-page-graphics #main-container #section-filters a.sel::before {
  background-color: var(--HIGHLIGHT);
}
.template-page-arts #main-container #section-filters .br,
.template-page-graphics #main-container #section-filters .br {
  flex-basis: 100%;
  height: 0;
}
.template-page-arts #main-container #section-filters h4,
.template-page-graphics #main-container #section-filters h4 {
  line-height: 1;
  margin-top: 0.25em;
}
.template-page-arts #main-container #section-filters h4.show-all,
.template-page-graphics #main-container #section-filters h4.show-all {
  cursor: pointer;
}
.template-page-arts #main-container #section-filters .row,
.template-page-graphics #main-container #section-filters .row {
  padding: var(--GRID_MARGIN);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.template-page-arts #main-container #section-filters .row:first-child,
.template-page-graphics #main-container #section-filters .row:first-child {
  padding-top: 0;
}
.template-page-arts #main-container #section-filters .filters,
.template-page-graphics #main-container #section-filters .filters {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--GRID_GUTTER);
  margin-top: 0.5em;
}

.template-page-arts #main-container #section-arts.list,
.template-page-arts #main-container #section-graphics.list,
.template-page-graphics #main-container #section-arts.list,
.template-page-graphics #main-container #section-graphics.list {
  gap: 0;
  width: calc(var(--COLUMN_WIDTH) * 6.5 + var(--GRID_GUTTER) * 5 + var(--GRID_MARGIN) * 0);
  overflow: unset;
}
.template-page-arts #main-container #section-arts.list .art,
.template-page-arts #main-container #section-arts.list .graphic,
.template-page-arts #main-container #section-graphics.list .art,
.template-page-arts #main-container #section-graphics.list .graphic,
.template-page-graphics #main-container #section-arts.list .art,
.template-page-graphics #main-container #section-arts.list .graphic,
.template-page-graphics #main-container #section-graphics.list .art,
.template-page-graphics #main-container #section-graphics.list .graphic {
  display: flex;
  align-items: center;
  width: 100%;
  height: fit-content;
  flex-shrink: 0;
}
.template-page-arts #main-container #section-arts.list .art picture,
.template-page-arts #main-container #section-arts.list .graphic picture,
.template-page-arts #main-container #section-graphics.list .art picture,
.template-page-arts #main-container #section-graphics.list .graphic picture,
.template-page-graphics #main-container #section-arts.list .art picture,
.template-page-graphics #main-container #section-arts.list .graphic picture,
.template-page-graphics #main-container #section-graphics.list .art picture,
.template-page-graphics #main-container #section-graphics.list .graphic picture {
  width: calc(var(--COLUMN_WIDTH) * 0.5 + var(--GRID_GUTTER) * 1 + var(--GRID_MARGIN) * 0);
  overflow: visible;
}
.template-page-arts #main-container #section-arts.list .art picture img,
.template-page-arts #main-container #section-arts.list .graphic picture img,
.template-page-arts #main-container #section-graphics.list .art picture img,
.template-page-arts #main-container #section-graphics.list .graphic picture img,
.template-page-graphics #main-container #section-arts.list .art picture img,
.template-page-graphics #main-container #section-arts.list .graphic picture img,
.template-page-graphics #main-container #section-graphics.list .art picture img,
.template-page-graphics #main-container #section-graphics.list .graphic picture img {
  width: auto;
  height: var(--60);
}
.template-page-arts #main-container #section-arts.list .art .infos,
.template-page-arts #main-container #section-arts.list .graphic .infos,
.template-page-arts #main-container #section-graphics.list .art .infos,
.template-page-arts #main-container #section-graphics.list .graphic .infos,
.template-page-graphics #main-container #section-arts.list .art .infos,
.template-page-graphics #main-container #section-arts.list .graphic .infos,
.template-page-graphics #main-container #section-graphics.list .art .infos,
.template-page-graphics #main-container #section-graphics.list .graphic .infos {
  position: relative;
  color: var(--FRONT_COLOR);
  background-color: transparent;
  opacity: 1;
  inset: unset;
  padding: 0;
}
.template-page-arts #main-container #section-arts.list .art .infos h3,
.template-page-arts #main-container #section-arts.list .graphic .infos h3,
.template-page-arts #main-container #section-graphics.list .art .infos h3,
.template-page-arts #main-container #section-graphics.list .graphic .infos h3,
.template-page-graphics #main-container #section-arts.list .art .infos h3,
.template-page-graphics #main-container #section-arts.list .graphic .infos h3,
.template-page-graphics #main-container #section-graphics.list .art .infos h3,
.template-page-graphics #main-container #section-graphics.list .graphic .infos h3 {
  font-family: "VanillaSerif Light";
  font-size: var(--FS60);
  line-height: var(--LH60);
  letter-spacing: 0em;
  line-height: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: fit-content;
  max-width: calc(var(--COLUMN_WIDTH) * 6 + var(--GRID_GUTTER) * 4 + var(--GRID_MARGIN) * 0);
  margin-top: 0.2em;
}
.template-page-arts #main-container #section-arts.list .art .infos div,
.template-page-arts #main-container #section-arts.list .graphic .infos div,
.template-page-arts #main-container #section-graphics.list .art .infos div,
.template-page-arts #main-container #section-graphics.list .graphic .infos div,
.template-page-graphics #main-container #section-arts.list .art .infos div,
.template-page-graphics #main-container #section-arts.list .graphic .infos div,
.template-page-graphics #main-container #section-graphics.list .art .infos div,
.template-page-graphics #main-container #section-graphics.list .graphic .infos div {
  display: none !important;
}
.template-page-arts #main-container #section-arts.list .art .infos::after,
.template-page-arts #main-container #section-arts.list .graphic .infos::after,
.template-page-arts #main-container #section-graphics.list .art .infos::after,
.template-page-arts #main-container #section-graphics.list .graphic .infos::after,
.template-page-graphics #main-container #section-arts.list .art .infos::after,
.template-page-graphics #main-container #section-arts.list .graphic .infos::after,
.template-page-graphics #main-container #section-graphics.list .art .infos::after,
.template-page-graphics #main-container #section-graphics.list .graphic .infos::after {
  content: "";
  position: absolute;
  top: 0;
  right: calc(var(--60) * -1);
  transform: translateX(100%);
  background: var(--img) center/contain no-repeat;
  height: 33svh;
  aspect-ratio: var(--ratio);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transform: none;
  top: calc(72 * 0.0833333333rem);
  right: 0;
}
.template-page-arts #main-container #section-arts.list .art:nth-last-child(-n+5) .infos::after,
.template-page-arts #main-container #section-arts.list .graphic:nth-last-child(-n+5) .infos::after,
.template-page-arts #main-container #section-graphics.list .art:nth-last-child(-n+5) .infos::after,
.template-page-arts #main-container #section-graphics.list .graphic:nth-last-child(-n+5) .infos::after,
.template-page-graphics #main-container #section-arts.list .art:nth-last-child(-n+5) .infos::after,
.template-page-graphics #main-container #section-arts.list .graphic:nth-last-child(-n+5) .infos::after,
.template-page-graphics #main-container #section-graphics.list .art:nth-last-child(-n+5) .infos::after,
.template-page-graphics #main-container #section-graphics.list .graphic:nth-last-child(-n+5) .infos::after {
  top: unset;
  bottom: calc(72 * 0.0833333333rem);
}
.template-page-arts #main-container #section-arts.list .art:hover,
.template-page-arts #main-container #section-arts.list .graphic:hover,
.template-page-arts #main-container #section-graphics.list .art:hover,
.template-page-arts #main-container #section-graphics.list .graphic:hover,
.template-page-graphics #main-container #section-arts.list .art:hover,
.template-page-graphics #main-container #section-arts.list .graphic:hover,
.template-page-graphics #main-container #section-graphics.list .art:hover,
.template-page-graphics #main-container #section-graphics.list .graphic:hover {
  text-decoration: none;
}
.template-page-arts #main-container #section-arts.list .art:hover .infos h3,
.template-page-arts #main-container #section-arts.list .graphic:hover .infos h3,
.template-page-arts #main-container #section-graphics.list .art:hover .infos h3,
.template-page-arts #main-container #section-graphics.list .graphic:hover .infos h3,
.template-page-graphics #main-container #section-arts.list .art:hover .infos h3,
.template-page-graphics #main-container #section-arts.list .graphic:hover .infos h3,
.template-page-graphics #main-container #section-graphics.list .art:hover .infos h3,
.template-page-graphics #main-container #section-graphics.list .graphic:hover .infos h3 {
  color: var(--HIGHLIGHT);
  min-width: calc(33svh * var(--ratio));
}
.template-page-arts #main-container #section-arts.list .art:hover .infos::after,
.template-page-arts #main-container #section-arts.list .graphic:hover .infos::after,
.template-page-arts #main-container #section-graphics.list .art:hover .infos::after,
.template-page-arts #main-container #section-graphics.list .graphic:hover .infos::after,
.template-page-graphics #main-container #section-arts.list .art:hover .infos::after,
.template-page-graphics #main-container #section-arts.list .graphic:hover .infos::after,
.template-page-graphics #main-container #section-graphics.list .art:hover .infos::after,
.template-page-graphics #main-container #section-graphics.list .graphic:hover .infos::after {
  opacity: 1;
}
.template-page-arts #main-container #section-filters,
.template-page-graphics #main-container #section-filters {
  position: fixed;
  right: 0;
}

.template-page-news article .images {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--GRID_GUTTER);
  width: 100%;
  margin-top: var(--20);
}
.template-page-news article .images picture {
  height: 33svh;
  width: fit-content;
}
.template-page-news article .images picture img {
  width: auto;
  height: 100%;
}