/* ============================================================
   M&K — Images, galerie, visionneuse, lookbook

   Traitement commun à toutes les images du site :
     · angles droits (--rayon vaut 0 dans le système) ;
     · aucune bordure, aucun cadre, aucune ombre portée ;
     · fond #FAFAFA sous l'image, accordé aux packshots, pour que le
       raccord avec la page ne se voie pas ;
     · aucun filtre coloré : le noir des vêtements sort tel qu'il a
       été photographié.
   ============================================================ */

/* =============== Cadre : la primitive ======================== */

.cadre {
  position: relative;
  overflow: hidden;                      /* le zoom reste dans le cadre */
  aspect-ratio: var(--ratio, 4 / 5);     /* place réservée : aucun saut */
  background-color: var(--fond-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.cadre__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--d-long) var(--doux), transform 900ms var(--sortie);
}

/* Pendant le chargement, seule la miniature floue du fond est
   visible. Trois chemins retirent cette classe (charge, erreur,
   délai de garde) : une image ne peut pas rester invisible. */
.cadre__img--attente { opacity: 0; }

.cadre--zoom { cursor: zoom-in; }

@media (hover: hover) {
  .cadre--zoom:hover .cadre__img,
  .cadre--zoom:focus-within .cadre__img { transform: scale(1.045); }
}

/* =============== Galerie de fiche produit ==================== */

.galerie { display: grid; gap: var(--e-3); }

@media (min-width: 620px) {
  /* Rail à gauche, scène à droite. 72 px de miniature + la gouttière. */
  .galerie { grid-template-columns: 72px minmax(0, 1fr); align-items: start; }

  /* Une seule vue : il n'y a pas de rail à loger. Sans cette règle, la
     scène se range dans la première colonne et l'image s'affiche en
     72 px de large au milieu d'un écran vide. */
  .galerie--seule { grid-template-columns: minmax(0, 1fr); }
}

.galerie__rail {
  display: flex;
  gap: var(--e-2);
  /* Sous 620 px le rail passe sous la scène, en ligne : une colonne
     de miniatures à gauche d'un téléphone ne laisse rien à l'image. */
  order: 2;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: var(--e-1);
}

@media (min-width: 620px) {
  .galerie__rail { order: 0; flex-direction: column; overflow: visible; }
}

.galerie__vignette {
  position: relative;
  flex: 0 0 auto;
  width: 60px;
  padding: 0;
  border: 0;
  background: var(--fond-image);
  cursor: pointer;
  /* Cible tactile : 60 px de visuel, 44 px minimum garantis par la
     hauteur de la zone cliquable sur mobile. */
  min-height: 44px;
  transition: opacity var(--d-court) var(--doux);
  opacity: 0.55;
}

@media (min-width: 620px) { .galerie__vignette { width: 72px; } }

.galerie__vignette img { display: block; width: 100%; height: auto; }
.galerie__vignette:hover { opacity: 0.85; }
.galerie__vignette[aria-selected='true'] { opacity: 1; }

/* Le repère de la vue active est un filet posé sous la miniature,
   pas une bordure autour : le cadre de l'image reste net. */
.galerie__vignette::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--noir);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-moyen) var(--sortie);
}
.galerie__vignette[aria-selected='true']::after { transform: scaleX(1); }

.galerie__scene {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--fond-image);
}

/* Fondu croisé : les vues sont empilées, une seule est opaque.
   La scène ne change jamais de taille, donc rien ne bouge autour. */
.galerie__vue {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  opacity: 0;
  transition: opacity var(--d-moyen) var(--doux);
  pointer-events: none;
}
.galerie__vue--active { opacity: 1; pointer-events: auto; }

.galerie__loupe {
  position: absolute;
  right: var(--e-3);
  bottom: var(--e-3);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 44px;
  padding: var(--e-2) var(--e-4);
  border: 0;
  background: rgba(244, 243, 240, 0.92);
  color: var(--graphite);
  font-family: var(--sans);
  font-size: var(--t-mini);
  letter-spacing: var(--chasse-nav);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--d-court) var(--doux);
}
.galerie__scene:hover .galerie__loupe,
.galerie__loupe:focus-visible { opacity: 1; }
/* Sans survol possible, le bouton reste visible en permanence. */
@media (hover: none) { .galerie__loupe { opacity: 1; } }

.galerie__compteur {
  position: absolute;
  left: var(--e-3);
  bottom: var(--e-3);
  z-index: 2;
  margin: 0;
  font-size: var(--t-mini);
  color: var(--gris);
  font-variant-numeric: tabular-nums;
}

/* =============== Visionneuse plein écran ===================== */

.visionneuse {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  padding: 0;
  border: 0;
  background: var(--papier);
  color: var(--graphite);
  opacity: 0;
  transition: opacity var(--d-moyen) var(--doux);
}
.visionneuse--ouverte { opacity: 1; }
.visionneuse::backdrop { background: rgba(0, 0, 0, 0.72); }

.visionneuse__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-4) var(--gouttiere);
  border-bottom: 1px solid var(--trait);
}
.visionneuse__compteur {
  margin: 0;
  font-size: var(--t-petit);
  color: var(--gris);
  font-variant-numeric: tabular-nums;
}
.visionneuse__fermer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: var(--graphite);
  cursor: pointer;
}

.visionneuse__scene {
  display: grid;
  place-items: center;
  height: calc(100vh - 148px);
  padding: var(--e-4) var(--gouttiere);
}
.visionneuse__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  background: var(--fond-image);
}

.visionneuse__legende {
  margin: 0;
  padding: var(--e-4) var(--gouttiere) var(--e-5);
  max-width: 62ch;
  margin-inline: auto;
  text-align: center;
  font-size: var(--t-petit);
  color: var(--gris);
}

.visionneuse__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 0;
  background: rgba(244, 243, 240, 0.86);
  color: var(--graphite);
  cursor: pointer;
  transition: background var(--d-court) var(--doux);
}
.visionneuse__nav:hover { background: var(--papier-2); }
.visionneuse__nav--prec { left: var(--e-3); }
.visionneuse__nav--suiv { right: var(--e-3); }

/* =============== Lookbook ==================================== */

.lookbook { padding-bottom: var(--section); }

/* Chapô : très peu d'encre, beaucoup de papier. */
.lookbook__tete {
  padding-block: clamp(3rem, 8vw, 7rem) clamp(3rem, 7vw, 6rem);
  max-width: 34ch;
}
.lookbook__tete p { margin-top: var(--e-5); color: var(--gris); }

/* Une planche = un passage. Grille de 12 colonnes, les images y sont
   posées comme des pièces sur un plan de coupe : certaines se
   touchent, d'autres flottent dans la marge. */
.planche {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--e-5);
  align-items: start;
  margin-top: clamp(4rem, 11vw, 10rem);
}

.planche__media { position: relative; overflow: hidden; aspect-ratio: var(--ratio, 4 / 5); }

/* La parallaxe déplace le cadre à l'intérieur de sa fenêtre. Le cadre
   déborde de 8 % en haut et en bas pour que le déplacement ne laisse
   jamais voir le fond — l'amplitude est bornée à la même valeur en JS. */
.planche__media .cadre {
  position: absolute;
  inset: -8% 0;
  height: 116%;
  aspect-ratio: auto;
  will-change: transform;
}

/* Le numéro de passage : seul endroit où la typographie prend la
   parole. Italique du serif, posé dans la marge, aligné sur le haut
   de l'image. Rien d'autre sur la page ne crie. */
.planche__numero {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(2.6rem, 7vw, 5.2rem);
  line-height: 0.86;
  letter-spacing: var(--chasse-display);
  color: var(--noir);
}

.planche__note { margin-top: var(--e-4); max-width: 26ch; }
.planche__piece { font-size: var(--t-petit); color: var(--graphite); }
.planche__mesure { margin-top: var(--e-2); font-size: var(--t-mini); color: var(--gris); }
.planche__liens { margin-top: var(--e-4); display: grid; gap: var(--e-2); justify-items: start; }

/* --- Quatre dispositions, pour que la page ne se répète pas --- */

.planche__legende { grid-column: 1 / -1; }
.planche__media    { grid-column: 1 / -1; }

@media (min-width: 760px) {
  /* 1 — décalée : grande image à gauche, petite plus bas à droite */
  .planche--decalee .planche__legende { grid-column: 1 / 4; grid-row: 1; padding-top: var(--e-3); }
  .planche--decalee .planche__media--a { grid-column: 4 / 10; grid-row: 1; }
  .planche--decalee .planche__media--b { grid-column: 10 / 13; grid-row: 1; align-self: end; margin-bottom: clamp(-7rem, -6vw, -2.5rem); }

  /* 2 — au bord : l'image sort de la grille à droite */
  .planche--bord { gap: var(--e-6); }
  .planche--bord .planche__media--a {
    grid-column: 4 / 13;
    grid-row: 1;
    margin-right: calc(var(--gouttiere) * -1);
  }
  .planche--bord .planche__legende { grid-column: 1 / 4; grid-row: 1; padding-top: var(--e-3); }
  .planche--bord .planche__media--b { grid-column: 2 / 6; grid-row: 2; margin-top: var(--e-6); }

  /* 3 — duo : deux images bord à bord, sans gouttière entre elles */
  .planche--duo { column-gap: 0; }
  .planche--duo .planche__legende {
    grid-column: 1 / 4;
    grid-row: 1;
    padding-top: var(--e-3);
    padding-right: var(--e-5);
  }
  .planche--duo .planche__media--a { grid-column: 4 / 9; grid-row: 1; }
  .planche--duo .planche__media--b { grid-column: 9 / 13; grid-row: 1; }

  /* 4 — plein : bande pleine largeur, puis une vue qui chevauche */
  .planche--plein .planche__media--a {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-inline: calc(var(--gouttiere) * -1);
  }
  .planche--plein .planche__legende { grid-column: 1 / 5; grid-row: 2; margin-top: var(--e-6); }
  /* La marge négative est calculée en `vw`, pas en pourcentage : un
     pourcentage de marge se résout sur la LARGEUR du conteneur, ce qui
     rendait le chevauchement imprévisible d'une fenêtre à l'autre. */
  .planche--plein .planche__media--b {
    grid-column: 8 / 12;
    grid-row: 2;
    margin-top: clamp(-8rem, -7vw, -3rem);
    z-index: 1;
  }
}

/* =============== Mouvements =================================== */

/* Apparition : fondu et léger relèvement, en cascade dans un groupe.
   L'état masqué n'est posé que si le JS a confirmé qu'il pourra
   révéler — sinon la page reste simplement visible. */
.apparitions-pretes [data-apparait] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity var(--d-long) var(--doux) var(--retard, 0ms),
    transform var(--d-long) var(--sortie) var(--retard, 0ms);
}
.apparitions-pretes [data-apparait].en-vue {
  opacity: 1;
  transform: none;
}

/* Révélation par masque : le cadre s'ouvre du bas vers le haut. */
[data-masque] {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1100ms var(--sortie);
}
[data-masque].masque--ouvert { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  .cadre__img { transition: none; }
  .cadre--zoom:hover .cadre__img,
  .cadre--zoom:focus-within .cadre__img { transform: none; }
  .galerie__vue { transition: none; }
  .galerie__vignette::after { transition: none; }
  .visionneuse { transition: none; opacity: 1; }
  .apparitions-pretes [data-apparait] { opacity: 1; transform: none; transition: none; }
  [data-masque] { clip-path: none; transition: none; }
  /* La parallaxe n'est jamais installée dans ce mode (voir visuels.js),
     mais on neutralise aussi tout transform déjà posé. */
  .planche__media .cadre { transform: none !important; }
}

/* =============== Bandeau campagne (accueil) ================== */

.campagne {
  margin-block: clamp(2.5rem, 6vw, 5rem);
}

/* La fenêtre porte le masque et le rapport ; le cadre vit dedans.
   Hauteur bornée : un 16:9 plein écran sur un portable ferait
   descendre tout le reste de la page sous la ligne de flottaison. */
.campagne__fenetre {
  position: relative;
  aspect-ratio: 16 / 9;
  max-height: 78vh;
  overflow: hidden;
  background: var(--fond-image);
}
.campagne__fenetre .cadre {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
}

/* Voile clair sous le texte. Sans lui, le nom serait illisible dès
   que la photo est claire à cet endroit — et on ne choisit pas
   encore la photo qui viendra. */
.campagne__voile {
  position: absolute;
  inset: auto 0 0 0;
  display: grid;
  justify-items: start;
  gap: var(--e-3);
  padding: clamp(2rem, 6vw, 4rem) var(--gouttiere) clamp(1.75rem, 4vw, 3rem);
  background: linear-gradient(to top, rgba(244, 243, 240, 0.94) 0%, rgba(244, 243, 240, 0.82) 55%, rgba(244, 243, 240, 0) 100%);
}

.campagne__logo {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.6rem, 9vw, 6rem);
  line-height: var(--interligne-serre);
  letter-spacing: var(--chasse-display);
  color: var(--noir);
}
.campagne__logo .logo__amp { font-style: italic; }

.campagne__legende {
  margin: 0;
  font-size: var(--t-petit);
  color: var(--graphite);
}

.campagne__lien { margin-top: var(--e-2); }

@media (min-width: 900px) {
  .campagne__voile {
    max-width: 46rem;
    background: linear-gradient(to top, rgba(244, 243, 240, 0.94) 0%, rgba(244, 243, 240, 0.78) 60%, rgba(244, 243, 240, 0) 100%);
  }
}

/* Sur téléphone, un 16:9 ne fait plus que 220 px de haut et le voile
   recouvre presque toute l'image. On redresse le cadre en portrait :
   l'image est recadrée sur les côtés, mais elle existe enfin. */
@media (max-width: 619px) {
  .campagne__fenetre { aspect-ratio: 4 / 5; }
}