/* ========================================================================== 
   CASE STUDIES
   Les dimensions et la navigation héritent du site principal.
   ========================================================================== */

/* 01. Home : navigation partagée et accès aux projets
   -------------------------------------------------------------------------- */

[data-case-url] {
  cursor: pointer;
}

html.case-is-open #imagesliderdesktop,
html.case-is-open #imageslidermobile {
  pointer-events: none;
}

/* Le menu, les légendes et le compteur restent dans la grille de la home. */
html.case-is-open #subtitle,
html.case-is-open #submenu,
html.case-is-open #about {
  position: relative;
  z-index: 30;
}

html.case-is-open #subtitle {
  cursor: pointer;
}

/* Le bloc des légendes est déjà positionné en absolute dans styles.css. */
html.case-is-open #bloc-légendes {
  position: absolute;
  z-index: 30;
}

html.case-is-open #about .carousel-status:not(.case-progress-inline) {
  display: none;
}

html.case-is-open #bloc-légendes .js-slide-description,
html.case-is-open #bloc-légendes .js-slide-credits {
  display: none;
}

/* Le compteur ajouté reprend exactement la classe du compteur Flickity. */
.case-progress-inline {
  color: inherit;
}

/* Même typographie et même emplacement que les légendes du slideshow. */
.case-caption-lines {
  text-align: center;
  text-transform: none;
}

.case-caption-line {
  color: #000;
}

.case-caption-line.grigio {
  color: inherit; /* Gris hérité du body de styles.css (#CCCCCC). */
}

.case-caption-line p {
  margin: 0;
}

.case-caption-line + .case-caption-line {
  margin-top: 2.5em;
}


/* 02. Images : proportions et dimensions du slideshow
   -------------------------------------------------------------------------- */

/* Le slider utilise une hauteur de 60vh et un ratio vertical de 3:4.
   L'orientation horizontale échange simplement les deux dimensions. */
:root {
  --case-frame-long: 60vh;
  --case-frame-short: 45vh;
}

.case-main {
  font-size: 0;
  line-height: 0;
}

/* L'image d'ouverture n'utilise pas les nouveaux cadres des blocs. */
.case-hero picture,
.case-hero img,
.case-hero video {
  display: block;
  width: 100%;
  height: 100%;
}

.case-block {
  margin: 0 auto;
  padding: 0;
}

.case-single,
.case-text {
  width: min(var(--case-frame-long), 100vw);
}

.case-single.case-format-vertical {
  width: min(var(--case-frame-short), 100vw);
}

.case-frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
}

.case-format-vertical .case-frame {
  aspect-ratio: 3 / 4;
}

/* Images et vidéos cadrées de la même manière, sans modifier la source. */
.case-frame img,
.case-frame video {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
}

.case-frame[data-rotation="right"] img,
.case-frame[data-rotation="right"] video,
.case-frame[data-rotation="left"] img,
.case-frame[data-rotation="left"] video {
  /* Après rotation, largeur et hauteur échangent leurs valeurs. */
  width: 75%;
  height: 133.333333%;
}

.case-format-vertical .case-frame[data-rotation="right"] img,
.case-format-vertical .case-frame[data-rotation="right"] video,
.case-format-vertical .case-frame[data-rotation="left"] img,
.case-format-vertical .case-frame[data-rotation="left"] video {
  width: 133.333333%;
  height: 75%;
}

.case-frame[data-rotation="right"] img,
.case-frame[data-rotation="right"] video {
  transform: translate(-50%, -50%) rotate(90deg);
}

.case-frame[data-rotation="left"] img,
.case-frame[data-rotation="left"] video {
  transform: translate(-50%, -50%) rotate(-90deg);
}

.case-frame[data-rotation="half"] img,
.case-frame[data-rotation="half"] video {
  transform: translate(-50%, -50%) rotate(180deg);
}

/* 03. Duos et textes
   -------------------------------------------------------------------------- */

.case-duo {
  display: flex;
  justify-content: center;
  width: 100vw;
  gap: 0;
}

.case-duo .case-frame {
  flex: 0 0 min(var(--case-frame-long), 50vw);
  width: min(var(--case-frame-long), 50vw);
}

.case-duo.case-format-vertical .case-frame {
  flex-basis: min(var(--case-frame-short), 50vw);
  width: min(var(--case-frame-short), 50vw);
}

/* Les textes gardent le format horizontal d'une image simple. */
.case-text {
  aspect-ratio: 4 / 3;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 10px;
  line-height: 12px;
  text-transform: none;
}

.case-text-center {
  text-align: center;
  color: #000;
}

.case-text-left {
  text-align: left;
  color: #000;
}

.case-text p {
  margin: 0;
}

.case-text p + p {
  margin-top: 1em;
}


/* 04. Transition de la home au projet
   -------------------------------------------------------------------------- */

/* Superposition au sein de .container, sous la navigation d'origine. */
.case-spa {
  position: fixed;
  inset: 0;
  z-index: 20;
  overflow: hidden;
  background: transparent;
}

.case-spa-scroll {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.case-spa-scroll::-webkit-scrollbar {
  display: none;
}

.case-spa-content {
  min-height: 100vh;
  background: #fff;
}

/* L'image vient du slider, sans changement de taille ni espace sous elle. */
.case-spa-hero {
  position: relative;
  display: block;
  overflow: hidden;
  cursor: pointer;
  will-change: transform;
}

.case-spa-hero.case-hero-animating {
  transition: transform 850ms cubic-bezier(.22, 1, .36, 1);
}

.case-spa-hero.case-hero-centered {
  transform: translateX(calc(50vw - 50% - var(--case-origin-x)));
}

.case-spa-hero img,
.case-spa-hero video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

/* Retour au clic : la vraie home réapparaît autour du visuel,
   pendant que celui-ci reprend sa position initiale dans le slider. */
.case-spa.is-returning-to-slider .case-spa-content {
  background: transparent;
}

.case-spa.is-returning-to-slider .case-spa-main {
  visibility: hidden;
}

/* Le contenu blanc se termine ici. Le vrai slider remonte sous
   cette zone transparente jusqu'à sa position dans la home. */
.case-spa-home-reveal {
  height: 100dvh;
  pointer-events: none;
}

/* Le retour via le titre conserve son fondu, sans dévoiler
   un slider qui pourrait encore être en cours de translation. */
.case-spa.is-exiting .case-spa-home-reveal {
  background: #fff;
}

.case-spa.is-exiting {
  opacity: 0;
  transition: opacity 450ms ease;
}


/* 05. Révélation pixelisée
   -------------------------------------------------------------------------- */

.case-pixel-canvas {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
  image-rendering: pixelated;
}


/* 06. Accès direct au projet
   -------------------------------------------------------------------------- */

html:has(body.case-page),
body.case-page {
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

body.case-page {
  margin: 0;
  background: #fff;
  text-transform: none;
}

.case-direct-navigation {
  position: fixed;
  inset: 40px 0;
  z-index: 30;
  width: 100%;
  pointer-events: none;
}

.case-direct-navigation #subtitle,
.case-direct-navigation #submenu {
  pointer-events: auto;
}

/* Le lien partage le traitement typographique du span de la home. */
.case-direct-navigation #subtitle > a {
  display: inline-block;
  font: inherit;
  line-height: inherit;
  text-transform: uppercase;
}

.case-direct-navigation #bloc-légendes {
  top: 15px; /* 40px de marge du conteneur + 15px = 55px. */
}

body.case-page .case-main {
  padding-top: 22vh;
}

/* Accès direct : les proportions de l'ouverture suivent le slideshow desktop. */
.case-hero {
  width: 45vh;
  height: 60vh;
  margin: 0 auto;
  cursor: pointer;
}

.case-hero picture {
  height: 100%;
}

.case-hero img,
.case-hero video {
  object-fit: fill;
}

.case-return-zone {
  height: 12vh;
}


/* 07. Mobile et préférences d'animation
   -------------------------------------------------------------------------- */

@media (max-width: 690px), (hover: none) {
  /* Sur mobile, le sous-menu reste fixé par styles.css. */
  html.case-is-open #subtitle,
  html.case-is-open #submenu {
    box-sizing: border-box;
    width: 100vw;
  }

  html.case-is-open #submenu {
    position: fixed;
    z-index: 30;
  }

  html.case-is-open #about {
    position: fixed;
    top: 20px;
    right: 20px;
    display: block;
    z-index: 30;
  }

  html.case-is-open #about .carousel-status {
    float: none;
    margin: 0;
  }

  html.case-is-open #bloc-légendes {
    position: fixed;
    top: 55px;
    left: 0;
    display: block;
    width: 100vw;
    z-index: 30;
  }

  .case-direct-navigation {
    inset: 0;
    height: 100dvh;
  }

  .case-direct-navigation #subtitle,
  .case-direct-navigation #submenu {
    box-sizing: border-box;
    width: 100vw;
  }

  .case-direct-navigation #about {
    position: absolute;
    top: 20px;
    right: 20px;
    display: block;
  }

  .case-direct-navigation #about .carousel-status {
    margin: 0;
  }

  .case-direct-navigation #bloc-légendes {
    position: absolute;
    top: 55px;
    left: 0;
    display: block;
  }

  .case-hero {
    width: 100vw;
    height: auto;
  }

  .case-hero picture {
    height: auto;
  }

  .case-hero img,
  .case-hero video {
    height: auto;
  }

  /* La taille des visuels suit toujours celle du slideshow ;
     seuls les cadres trop larges sont réduits à 100vw. */
  .case-text {
    padding: 0 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .case-spa-hero,
  .case-spa.is-exiting {
    transition: none;
  }
}