/* GENERAL */
html { font-size: 62.5%; }

@font-face {
  font-family:'Mono';
  src:url('font/AbysMono-Book.woff2') format('woff2');
  font-stretch: normal;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  font-feature-settings: normal;
  font-variation-settings: normal;
  font-display: block;
}	

body {
  background-color: rgb(255, 255, 255);
  font-family: 'Mono', 'Courier New', Courier, monospace;
  font-feature-settings: "ss03";
  text-rendering: optimizeLegibility;
  font-variant-ligatures: none;
  font-weight: auto;
  font-weight: auto;
  font-size: 10px;
  line-height: 12px;
  text-align: left;
  color: #CCCCCC;
  height: calc(100vh - 80px);
  /* overflow: hidden; */
  text-transform: uppercase;
  margin: 40px 0px 40px 0px;
}

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

/* LOADER */

.loader-already-seen #site-loader {display: none !important;}

#site-loader {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100vh;
  pointer-events:none;
  background-color: #ffffff;
  /* backdrop-filter: blur(40px); */
  opacity: 100%;
}

#site-loader .loader-title {
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  color: #000000;
  text-align: center;
}

#site-loader .intro-txt {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% - 40px);
  margin: 0;
  color: #000000;
  text-align: center;
  transform: translate(-50%, -50%);
}

#site-loader .loader-menu {
  position: absolute;
  bottom: 40px;
  left: 0;
  display: flex;
  justify-content: center;
  gap: 40px;
  width: 100%;
  color: #000000;
}

@media (max-width: 690px), (hover: none) {
  #site-loader .loader-title { top: 20px; }
  #site-loader .loader-menu { bottom: 20px; }
  #site-loader .count { top: 20px; right: 20px; }
}

.count {
  z-index: 10000;
  position: absolute;
  top: 40px;
  color: #000000;
  right: 40px;
}

/* TYPO ET TEXTES */

.u-text-left {
  text-align: left;
  hyphens: none;
}

.u-text-center {
  text-align: center;
  hyphens: none;
}

.u-text-justify {
  text-align: justify;
  hyphens: auto;
  overflow-wrap: normal;
  word-break: normal;
  text-align-last: left;
  hyphenate-character: "-";
  hyphenate-limit-chars: 6 3 3;
}

/* STUDIO TITLE */


#subtitle > span,
.overlay-subtitle button {
  display: inline-block;
  padding: 0;
  border: 0;
  background-color: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-transform: uppercase;
  text-align: center;
}

.overlay-subtitle button {
  cursor: pointer;
}

#bloc-légendes{
  width: 100vw;
  text-align: center;
}

.slide-meta{
  display: block;
  position: absolute;
  top: 55px;
  text-transform: none;
}

::selection {background: #f0f0f0;}

.grigio{ color: grey; }

ul {
  list-style: none;
  text-decoration: none;
  padding-left: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}
p{
  margin-bottom: 0;
}

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

a:link {
  text-decoration: none;
  color: inherit;
}

/* a:visited {
  text-decoration: none;
  color: #800080;
} */

a:hover {
  text-decoration: none;
  /* text-indent: -3em; */
  color: #000000;
}

a:active{
  text-decoration: none;
  /* text-indent: -3em; */
  color: #ffffff;
}

.js-slide-description,
.js-slide-credits,
.mobile-project-caption,
.profile-item {
  white-space: normal;
}

.js-slide-description p,
.js-slide-credits p,
.mobile-project-caption p,
.profile-item p {
  margin: 0;
}

.js-slide-description p + p,
.js-slide-credits p + p,
.mobile-project-caption p + p,
.profile-item p + p {
  margin-top: 2.5em;
}

/* FLICKITY */

.carousel { background: none; }

/* Show slides once Flickity has arranged them. */
.carousel:not(.flickity-enabled) { visibility: hidden; }

.carousel {
  transition: opacity 0.12s linear;
}

.is-resizing .carousel {
  opacity: 0;
}

.carousel-cell {
  width: auto; 
  height: 60vh;
  aspect-ratio: 3 / 4;
  margin-left: 0px;
  margin-right: -2px;
  counter-increment: carousel-cell;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;

}
/* cell number */
.carousel-cell:before {
  display: none;
  text-align: center;
  content: counter(carousel-cell);
}
.carousel-cell img{
  padding-bottom: 0px;
  background-color: transparent;
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
  background-color: transparent;
}
.carousel-cell video{
  padding-bottom: 0px;
  background-color: transparent;
    width: 100%;
  height: 100%;
  object-fit: fill;
}
.carousel-status{
  font-variant-numeric: tabular-nums;
  float: right;
  display: inline;
  margin-right: 30px;
}
.carousel-cell .CaptionHighlight{
  display: none;
}
.carousel-cell.is-selected .CaptionHighlight{
  display: block;
}

/* FLEXBOX */

.container {
  display: grid;
  /* background-color: rgba(222, 184, 135, 0.512); */
  height: calc(100vh - 80px);
  column-gap: 10px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: min-content auto min-content;
  grid-template-areas: "a b b d""e e e e""f f f f";
  -webkit-animation: fadein 6s;
  -moz-animation: fadein 6s;
  -ms-animation: fadein 6s;
  -o-animation: fadein 6s;
  animation: fadein 6s;
}

div[id="subtitle"] {
  grid-column: 2;
  grid-row: 1;
  grid-area: b;
  text-align: center;
  color: #000000;
  height: auto;
  /* background-color: #c1a1e6; */
}

div[id="submenu"] {
  grid-column: 2;
  grid-row: 3;
  grid-area: f;
  text-align: center;
  color: #000000;
  /* background-color: aquamarine; */
  display: flex;
  justify-content: center;
  gap: 40px;
}

div[id="about"] {
  grid-column: 4;
  grid-row: 1;
  grid-area: d;
}

div[id="imagesliderdesktop"] {
  grid-column: 1 / span 4;
  grid-row: 2;
  grid-area: e;
}

#imageslidermobile {
  display: none;
}

.justify {
  text-align: justify;
}


/* PROFILE */

.js-profile-text {
  min-height: 100px;
}

.profile-text {
  width: 40vw;
  position: relative;
}

.profile-text:has(.profile-item.active .profile-vertical-center) {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.profile-item {
  display: none;
}

.profile-item.active {
  display: block;
}

.profile-content {
width: 40vw !important;
grid-column: 1 / span 4;
grid-row: 2;
grid-area: e;
align-self: center;
justify-self: center;
color: black;
line-height: 250%;
}

button.profile-menu-item{
  padding: 0;
  background-color: transparent;
  text-transform: uppercase;
}

.profile-menu-item.is-active {
  text-decoration: underline;
  text-underline-offset: 3px;
}

button.profile-menu-item:disabled {
  color: inherit;
  opacity: 1;
  cursor: default !important;
}

.profile-menu{
  padding-top: 40px;
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-direction: row;
}

/* Mots gris dans les textes Profile et Contact : (gray: texte) */
.profile-content .text-gray,
.contact-content .text-gray,
.profile-content mark,
.contact-content mark {
  color: #CCCCCC;
  background: transparent;
}

/* CONTACT */

.contact-page{
  grid-column: 1 / span 4;
  grid-row: 2;
  grid-area: e;
  display: grid;
  align-items: center;
  justify-items: center;
}

.contact-content{
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-direction: column;
  color: black;
}

/* The Team list uses the same line spacing as Contact. */
.profile-team-text {
  line-height: 12px;
}

.contact-link {display: block;}


/* VERSION DESKTOP UNIQUEMENT */
@media (min-width: 690px) {

div[id="about"] { margin-right: 10px; }
.mobile{display: none;}
.container { height: calc(100vh - 80px); }

div[id="imagesliderdesktop"]{
  align-self: center;
}

button{
    text-transform: uppercase;
}

.intro-txt{
  position: absolute;
  color: black;
  margin-top: 50vh;;
  margin-left: 50vw;
  transform: translate(-50% , -50%);
}

}

/* flickity-fade */

.flickity-enabled.is-fade .flickity-slider > * {
  pointer-events: none;
  z-index: 0;
}

.flickity-enabled.is-fade .flickity-slider > .is-selected {
  pointer-events: auto;
  z-index: 1;
}

/* OVERLAYS */

.site-overlay {
  position: fixed;
  top: 40px;
  right: 0;
  bottom: 40px;
  left: 0;
  z-index: 999;
  background-color: #ffffff;
}

.site-overlay[hidden],
.site-overlay-panel[hidden] {
  display: none !important;
}

.site-overlay .overlay-container {
  height: 100%;
}

.site-overlay-panel {
  display: contents;
}

.overlay-subtitle {
  grid-column: 2;
  grid-row: 1;
  grid-area: b;
  text-align: center;
  color: #000000;
  height: auto;
}

.overlay-subtitle button {
  padding: 0;
  background-color: transparent;
}

.site-overlay .profile-content {
  grid-area: e;
  align-self: center;
  justify-self: center;
  width: 40vw !important;
}

.site-overlay .contact-page {
  grid-area: e;
  align-self: center;
  justify-self: center;
  width: 100%;
}

.overlay-submenu {
  grid-column: 2;
  grid-row: 3;
  grid-area: f;
  align-self: end;
  justify-self: stretch;

  min-height: 14px;
  margin: 0;
  padding: 0;

  color: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  text-align: center;
}

.overlay-submenu button {
  padding: 0;
  background-color: transparent;
  color: inherit;
}



/* GLOBAL BOTTOM NAVIGATION ALIGNMENT */
div#submenu,
.overlay-submenu {
  grid-column: 2;
  grid-row: 3;
  grid-area: f;

  align-self: end;
  justify-self: stretch;

  height: 12px;
  min-height: 12px;
  margin: 0;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;

  color: #000000;
  line-height: 12px;
  text-align: center;
}

div#submenu a,
.overlay-submenu button {
  display: block;
  min-height: 12px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;

  color: inherit;
  font: inherit;
  line-height: 12px;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 690px), (hover: none) {
  div#submenu,
  .overlay-submenu {
    grid-area: f;

    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 20px;

    align-self: end;
    justify-self: stretch;
  }
}

/* PIXEL REVEAL: HOME ONLY */

#imagesliderdesktop .carousel-cell,
#imageslidermobile .mobile-slide-media {
  position: relative;
}

.pixel-reveal-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 1;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  transition: opacity 0.18s linear;
}

.pixel-reveal-target {
  opacity: 1;
}

.pixel-reveal-active .pixel-reveal-target,
.pixel-reveal-pending .pixel-reveal-target {
  opacity: 0;
}

/* The real media becomes opaque before the canvas is allowed to fade. */
.pixel-reveal-image-ready .pixel-reveal-target {
  opacity: 1;
}

.pixel-reveal-complete .pixel-reveal-canvas {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .pixel-reveal-canvas {
    display: none !important;
  }

  .pixel-reveal-target {
    opacity: 1 !important;
  }
}

/* PATCH MOBILE PIXEL REVEAL */
/* À coller tout en bas de /assets/css/styles.css seulement si l'iPhone a "Réduire les animations" activé. */

@media (prefers-reduced-motion: reduce) {
  #imageslidermobile .pixel-reveal-canvas {
    display: block !important;
  }

  #imageslidermobile .pixel-reveal-active .pixel-reveal-target {
    opacity: 0 !important;
  }

  #imageslidermobile .pixel-reveal-image-ready .pixel-reveal-target {
    opacity: 1 !important;
  }
}

/* VERSION MOBILE UNIQUEMENT */

@media (max-width: 690px), (hover: none) {

  html,
  body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
    max-width: 100vw;
  }

  html.overlay-is-open #subtitle {
    visibility: hidden;
  }

  .desktop {
    display: none;
  }

  #site-loader {
    height: 100vh;
  }

.intro-txt {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100vw - 40px);
  max-width: calc(100vw - 40px);
  margin: 0;
  color: black;
  text-align: center;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
}

  .container {
    display: grid;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    margin: 0;
    row-gap: 0;
    column-gap: 0;
    grid-template-columns: 1fr;
    grid-template-rows: min-content minmax(0, 1fr) min-content;
    grid-template-areas:
      "b"
      "e"
      "f";
  }

  div[id="subtitle"] {
    grid-area: b;
    width: 100%;
    height: auto;
    padding: 20px;
    margin: 0;
    text-align: center;
  }

  div[id="submenu"] {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1002;
    grid-area: f;
    width: 100vw;
    height: auto;
    min-height: 0;
    padding: 20px;
    margin: 0;
    align-self: end;
    justify-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    background-color: #ffffff;
    color: #000000;
    text-align: center;
  }

  div[id="about"],
  div[id="bloc-légendes"],
  div[id="imagesliderdesktop"] {
    display: none;
  }

  #imageslidermobile {
    display: block;
    grid-area: e;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overflow-anchor: none;
    scroll-behavior: auto;
  }

  .mobile-slide {width: 100%;}

  .mobile-slide-media img,
  .mobile-slide-media video {
    display: block;
    width: 100%;
    height: auto;
  }

  .mobile-slide-media video:not([height]) {
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  .mobile-project-caption {
    display: none;
    text-align: center;
    padding: 10px;
    color: #CCCCCC;
      text-transform: none;
  }

  .mobile-slide.is-caption-open .mobile-project-caption {
    display: block;
  }

  .mobile-slide-media {
    cursor: pointer;
  }

  .contact-page {
    grid-area: e;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: grid;
    align-items: center;
    justify-items: center;
  }

  .contact-content {
    width: calc(100vw - 40px) !important;
    max-width: 560px;
    margin-right: auto;
    margin-left: auto;
  }

  .profile-content {
    grid-area: e;
    width: calc(100vw - 40px) !important;
    max-width: 560px;
    margin-right: auto;
    margin-left: auto;
    align-self: center;
    justify-self: center;
  }

  .profile-text {
    width: 100% !important;
  }

  .site-overlay {
    position: fixed;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100dvh;
  }

  .site-overlay .overlay-container {
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  .overlay-subtitle {
    grid-area: b;
    width: 100%;
    padding: 20px;
    margin: 0;
    text-align: center;
  }

  .site-overlay .profile-content {
    grid-area: e;
    width: calc(100vw - 40px) !important;
    max-width: 560px;
    margin-right: auto;
    margin-left: auto;
    align-self: center;
    justify-self: center;
  }

  .site-overlay .contact-page {
    grid-area: e;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: grid;
    align-items: center;
    justify-items: center;
  }

  html.overlay-is-open div#submenu {
    visibility: hidden;
    pointer-events: none;
  }

  .overlay-submenu {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 100vw;
    height: auto;
    min-height: 0;
    padding: 20px;
    margin: 0;
    align-self: end;
    justify-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    background-color: #ffffff;
    color: #000000;
    text-align: center;
  }
}

/* INFO TEXT WRITE ANIMATION */

.text-write-target {
  width: 100%;
}

.profile-content .js-profile-text,
.profile-content .profile-item,
.site-overlay .profile-content .js-profile-text,
.site-overlay .profile-content .profile-item {
  width: 100%;
}

.text-write-char {
  display: inline;
  white-space: pre-wrap;
}

/* Contact is centered line by line. Collapse indentation in the source HTML
   so character spans cannot shift lines with invisible leading spaces. */
.contact-content .text-write-char {
  white-space: normal;
}

.text-write-target.text-write-ready .text-write-char {
  opacity: 0;
}

.text-write-target.text-write-ready.is-writing-started .text-write-char {
  opacity: 1;
  transition: opacity 0s linear var(--text-write-delay, 0ms);
}

.text-write-target.text-write-ready.is-writing-complete .text-write-char {
  opacity: 1;
  transition: none;
}

.profile-item p + p,
.text-write-target p + p {
  margin-top: 2.5em;
}

@media (prefers-reduced-motion: reduce) {
  .text-write-target.text-write-ready .text-write-char {
    opacity: 1 !important;
    transition: none !important;
  }
}