@charset "UTF-8";
/* ==========================================================================
   expo.css — fiches d'exposition, survols et animations au défilement.

   Trois choses :
     1. la grille des 4 expositions (la grille d'origine est en 3 colonnes) ;
     2. la modale qui s'ouvre au clic sur une exposition ;
     3. le raffinement des survols et des apparitions/disparitions au scroll.
   ========================================================================== */

/* --- 1. Grille des expositions : les 4 sur une ligne ----------------------
   La grille d'origine (.c-index__entry) est calée sur 3 colonnes, et elle le
   dit de trois façons : largeur 26 % + gouttière 11 %, marge droite sautée
   « tous les 3 » (:nth-child(3n)), et décrochage de 88 px à partir du 4e
   (:nth-child(n+4)). Avec 4 expositions sur une seule rangée, ces trois règles
   se retournent contre nous — la troisième ferait tomber la 4e vignette plus
   bas que les autres. Il faut donc neutraliser les trois, pas seulement la
   largeur. Nos sélecteurs portent 3 classes, la base 1 classe + 1 pseudo : on
   passe devant sans !important.

   ≥ 1024 px : une ligne — 4 × 22 % + 3 × 4 % de gouttière = 100 %.
   768–1023 px : 2 × 2 — à cette largeur, 4 colonnes donneraient des vignettes
   d'environ 150 px, où l'on ne distingue plus rien.
   < 768 px : empilées, c'est déjà le comportement de la base. */

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .c-index__entries.is-expo .c-index__entry {
    width: 44%;
    margin-right: 12%;
    margin-top: 56px;
  }

  .c-index__entries.is-expo .c-index__entry:nth-child(2n) {
    margin-right: 0;
  }

  /* En 2 × 2, c'est la 3e qui ouvre la seconde rangée, pas la 4e. */
  .c-index__entries.is-expo .c-index__entry:nth-child(n + 3) {
    margin-top: 88px;
  }
}

@media screen and (min-width: 1024px) {
  .c-index__entries.is-expo .c-index__entry {
    width: 22%;
    margin-right: 4%;
    margin-top: 56px;
  }

  .c-index__entries.is-expo .c-index__entry:last-child {
    margin-right: 0;
  }
}

/* Les vignettes qui ouvrent une modale (expositions ET œuvres) sont des
   <button>, pas des liens : elles ne mènent pas à une page. Il faut effacer
   l'apparence native du bouton — sinon le navigateur dessine un cadre gris
   autour de chaque carte. Le sélecteur porte sur l'élément (`button.…`) et non
   sur la grille, pour couvrir les deux pages. */
button.c-index__entry-link {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: center;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

button.c-index__entry-link:focus-visible {
  outline: 2px solid var(--w-copper, #8a5a2b);
  outline-offset: 6px;
}

/* --- 2. Survols ------------------------------------------------------------
   La base gère déjà le survol des boutons (.c-button__target:hover) et l'écart
   des deux vues d'une œuvre (.is-hover, posé par main.js). On ajoute ici les
   micro-réactions qui manquaient, toutes sur la même courbe que le reste du
   site pour que l'ensemble ait un seul « geste ». */

.c-index__entry-h {
  transition: color .4s cubic-bezier(.5, .06, .11, .99);
}

.c-index__entry-link:hover .c-index__entry-h,
.c-index__entry-link:focus-visible .c-index__entry-h {
  color: var(--w-copper, #8a5a2b);
}

/* Les liens du menu plein écran glissent légèrement vers la droite. */
.c-global-nav__target {
  transition: transform .4s cubic-bezier(.5, .06, .11, .99), opacity .4s ease;
}

.c-global-nav__target:hover {
  transform: translateX(8px);
}

/* Le trait sous les titres respire au survol de la section. */
.c-heading-with-icon::after {
  transition: transform .6s cubic-bezier(.5, .06, .11, .99);
}

.c-section:hover .c-heading-with-icon::after {
  transform: scaleX(1.15);
}

/* --- 3. Apparition ET disparition au défilement ---------------------------
   main.js retire désormais `.is-active` quand l'élément quitte l'écran : les
   blocs repartent donc en fondu vers le bas quand on remonte. On adoucit la
   courbe (celle de la base était linéaire) et on désolidarise les durées :
   l'entrée est franche, la sortie plus courte pour ne pas traîner. */

.js-anime-translate-y,
.js-anime-fade,
.js-anime-pic-translate img {
  transition-timing-function: cubic-bezier(.22, .61, .36, 1);
  transition-duration: .55s;      /* sortie : rapide */
}

.js-anime-translate-y.is-active,
.js-anime-fade.is-active,
.js-anime-pic-translate.is-active img {
  transition-duration: 1.1s;      /* entrée : ample */
}

/* --- 3bis. En-tête des pages intérieures ----------------------------------
   Le hero de l'accueil fait 100vh : beaucoup trop pour une page de catalogue.
   On garde le même registre (photo sombre, titre en serif, voile radial) mais
   sur une bande courte, pour que le contenu commence tout de suite. Le bandeau
   sombre sert aussi le bouton MENU, qui est en `mix-blend-mode: difference` et
   demande un fond foncé pour rester lisible. */

.m-page-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 340px;
  height: 46vh;
  padding: 24px;
  overflow: hidden;
  text-align: center;
  background: #1a120c center / cover no-repeat;
}

.m-page-head::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 65% 55% at center,
    rgba(20, 14, 9, .62) 0%,
    rgba(20, 14, 9, .40) 55%,
    rgba(20, 14, 9, .18) 100%
  );
}

.m-page-head__inner {
  position: relative;
  z-index: 1;
}

.m-page-head__title {
  font-family: "Noto Serif JP", serif;
  font-size: 2rem;
  letter-spacing: 4px;
  color: #f5f1ea;
}

@media screen and (min-width: 768px) {
  .m-page-head__title {
    font-size: 3rem;
  }
}

.m-page-head__sub {
  margin-top: 16px;
  font-size: .93rem;
  line-height: 1.8;
  color: rgba(245, 241, 234, .8);
}

/* --- 4. Modale (expositions et œuvres) ------------------------------------- */

.m-modal {
  position: fixed;
  inset: 0;
  z-index: 500;                   /* au-dessus du menu (350) et du loader (400) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.m-modal[hidden] {
  display: none;
}

/* Noir franc et non le brun d'avant : à l'ouverture d'une œuvre, la page
   s'éteint pour ne plus laisser que la pièce. L'opacité reste partielle — on
   doit sentir que la galerie est toujours là, derrière.

   Le flou n'est pas décoratif. À 82 % de noir seul, les titres des vignettes
   restaient lisibles à travers le voile et venaient se poser DERRIÈRE le texte
   de la fiche : deux textes superposés, aucun des deux lisible. Le flou réduit
   ce qui est dessous à une texture. On voit toujours qu'il y a une galerie,
   on n'y lit plus rien — c'est exactement ce qu'on veut.

   `backdrop-filter` n'est pas indispensable : là où il manque, il reste le
   noir, un peu plus présent. C'est une dégradation acceptable. */
.m-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity .45s ease;
}

/* Le panneau n'a plus de fond à lui : il se pose à même le noir du voile.
   Un dégradé brun ici referait une « boîte » au milieu de l'écran, ce qui
   annulerait l'effet d'extinction. */
.m-modal__panel {
  position: relative;
  width: 100%;
  max-width: 900px;
  max-height: 92vh;
  overflow-y: auto;
  padding: 32px 20px 40px;
  background: transparent;
  color: #f5f1ea;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.22, .61, .36, 1);
}

@media screen and (min-width: 768px) {
  .m-modal__panel {
    padding: 56px 56px 64px;
  }
}

/* Les fiches à deux colonnes ont plus à loger : elles seules s'élargissent.
   C'est le cas des œuvres et, depuis, des expositions — toutes portent
   `.m-modal__layout`. Là où `:has()` manque, elles gardent les 900px — plus
   serré, jamais cassé. */
.m-modal__panel:has(.m-modal__layout) {
  max-width: 1240px;
}

/* `.is-open` est posé une frame après l'affichage, pour que la transition parte. */
.m-modal.is-open .m-modal__backdrop {
  opacity: 1;
}

.m-modal.is-open .m-modal__panel {
  opacity: 1;
  transform: translateY(0);
}

.m-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 44px;                    /* cible tactile de 44 px minimum */
  height: 44px;
  padding: 0;
  border: 1px solid rgba(245, 241, 234, .35);
  border-radius: 50%;
  background: rgba(20, 14, 9, .5);
  cursor: pointer;
  transition: all .4s cubic-bezier(.5, .06, .11, .99);
}

@media screen and (min-width: 768px) {
  .m-modal__close {
    top: 20px;
    right: 20px;
  }
}

.m-modal__close::before,
.m-modal__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 1px;
  background: #f5f1ea;
}

.m-modal__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.m-modal__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

.m-modal__close:hover {
  background: #f5f1ea;
  transform: rotate(90deg);
}

.m-modal__close:hover::before,
.m-modal__close:hover::after {
  background: #241c16;
}

/* --- 4bis. Fiche à deux colonnes : texte à gauche, image à droite -----------
   Pour toute fiche portant `.m-modal__layout` : les œuvres, et les expositions
   depuis qu'elles ont adopté la même mise en page. Les expositions inversent
   le sens des colonnes — image à gauche — via `.is-expo` dans charte.css.

   En dessous de 900px il n'y a pas la place pour deux colonnes : tout
   s'empile, et la photo passe EN PREMIER. Sur un téléphone, on ouvre une
   œuvre pour la voir, pas pour lire son cartel. */

.m-modal__layout {
  display: flex;
  flex-direction: column;
}

.m-modal__col-media { order: -1; }

@media screen and (min-width: 900px) {
  .m-modal__layout {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 56px;
    align-items: start;
  }

  /* Le conteneur qui défile est le panneau : `sticky` s'y accroche. La photo
     reste donc en vue pendant qu'on lit le texte à côté. */
  .m-modal__col-media {
    order: 0;
    position: sticky;
    top: 0;
  }

  .m-modal__col-text > :first-child {
    margin-top: 0;
  }
}

/* --- 5. Contenu d'une fiche ------------------------------------------------ */

.m-modal__meta {
  font-size: .857rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #c8a268;                 /* laiton : le même accent que le curseur */
}

.m-modal__title {
  margin-top: 8px;
  font-family: "Noto Serif JP", serif;
  font-size: 1.7rem;
  color: #f5f1ea;
}

@media screen and (min-width: 768px) {
  .m-modal__title {
    font-size: 2.4rem;
  }
}

.m-modal__text {
  margin-top: 20px;
  max-width: 60ch;                /* longueur de ligne lisible */
  line-height: 1.9;
  color: rgba(245, 241, 234, .82);
}

/* --- 5bis. Récit de la fiche ----------------------------------------------
   Une fiche d'œuvre n'est pas une fiche produit. Pas de tableau de
   caractéristiques, pas de prix : on raconte le bout de bois. La hiérarchie
   descend donc du plus incarné au plus factuel — série, titre, citation de
   Florence, photos, récit, et seulement tout en bas, discrètement, les
   quelques données matérielles. */

.m-modal__series {
  font-size: .78rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #c8a268;
}

/* La citation : la voix de Florence, en serif, détachée du reste. */
.m-modal__quote {
  margin-top: 24px;
  padding-left: 20px;
  border-left: 1px solid rgba(200, 162, 104, .55);
  font-family: "Noto Serif JP", serif;
  font-size: 1.15rem;
  line-height: 1.8;
  font-style: italic;
  color: #f5f1ea;
}

@media screen and (min-width: 768px) {
  .m-modal__quote {
    max-width: 46ch;
    font-size: 1.35rem;
  }
}

.m-modal__story {
  margin-top: 36px;
  max-width: 62ch;
}

.m-modal__story h3 {
  margin-top: 28px;
  font-family: "Noto Serif JP", serif;
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #c8a268;
}

.m-modal__story h3:first-child {
  margin-top: 0;
}

.m-modal__story p {
  margin-top: 10px;
  line-height: 1.95;
  color: rgba(245, 241, 234, .82);
}

/* Les données matérielles : présentes, mais subordonnées. Une ligne, pas un
   tableau — c'est ce qui sépare une notice d'œuvre d'une fiche article. */
.m-modal__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 40px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(245, 241, 234, .15);
}

.m-modal__facts > div {
  min-width: 90px;
}

.m-modal__facts dt {
  font-size: .72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(245, 241, 234, .45);
}

.m-modal__facts dd {
  margin-top: 4px;
  font-size: .95rem;
  color: rgba(245, 241, 234, .85);
}

/* --- 6. Vue unique de la fiche --------------------------------------------
   Sept pièces sur huit n'ont qu'une seule photo : leur ouvrir un carrousel
   d'un seul élément serait mentir sur ce qui existe. Elles reçoivent une image
   simple.

   `contain` et non `cover` : ces pièces sont très verticales, un recadrage en
   14/9 leur couperait la tête. Le fond sombre tient le cadre pendant que
   l'image s'y inscrit. */

.m-modal__pic {
  margin-top: 32px;
}

.m-modal__pic img {
  display: block;
  width: 100%;
  max-height: 56vh;
  object-fit: contain;
  /* Sans fond, les bandes laissées par `contain` prendraient le blanc du cadre
     et la photo semblerait flotter avec des marges inégales. La zone d'image
     doit rester un rectangle franc. */
  background: #17140f;
}

/* En deux colonnes, la photo a une colonne pour elle : on lui rend de la
   hauteur. Le plafond reste sous 100vh pour qu'elle tienne d'un coup d'œil,
   sans qu'on ait à défiler pour voir le bas de la pièce. */
@media screen and (min-width: 900px) {
  .m-modal__col-media .m-modal__pic {
    margin-top: 0;
  }

  .m-modal__col-media .m-modal__pic img {
    max-height: 82vh;
  }
}

/* --- 6bis. Le cadre Polaroïd -----------------------------------------------
   Les photos sont montées comme des tirages instantanés : cadre blanc cassé,
   filet fin sur trois côtés et large marge en bas — c'est cette marge
   asymétrique qui fait reconnaître un Polaroïd, bien plus que la couleur.

   La photo elle-même n'est PAS touchée : ni recadrée, ni virée, ni vieillie.
   Tout est dans le support autour. Les sculptures sont le sujet, le cadre n'est
   qu'un support.

   Appliqué aux deux formes de média des fiches — la vue unique (sept pièces sur
   neuf) et la galerie. Sur la seule galerie, deux fiches auraient eu un cadre et
   les sept autres rien. */

.m-modal__pic,
.m-modal-gallery .swiper-slide {
  position: relative;             /* repère de la légende manuscrite */
  box-sizing: border-box;
  padding: 12px 12px 52px;
  background-color: #f4f1e8;      /* blanc chaud, pas un blanc d'écran */
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
}

/* La légende, écrite à la main dans la marge basse — comme on annote un tirage
   au sortir de l'appareil. Elle est posée par main.js à l'ouverture de la
   fiche, à partir du titre déjà traduit : écrite en dur dans le HTML, elle
   serait restée en français en version anglaise.

   L'encre est un brun délavé et non du noir : un stylo sur papier ne fait
   jamais un noir d'écran. Le poids reste léger, la légende ne doit pas
   concurrencer le titre qui est juste à côté. */
.m-modal__legende {
  position: absolute;
  right: 18px;
  bottom: 10px;
  max-width: 72%;
  font-family: var(--main);
  font-style: italic;
  font-size: 1.6rem;
  line-height: 1.1;
  text-align: right;
  color: #4a3b2c;
  pointer-events: none;           /* elle ne doit pas gêner la prise de la carte */
}

@media screen and (min-width: 768px) {
  .m-modal__legende {
    right: 24px;
    bottom: 14px;
    font-size: 1.9rem;
  }
}

@media screen and (min-width: 768px) {
  .m-modal__pic,
  .m-modal-gallery .swiper-slide {
    padding: 16px 16px 68px;
  }
}

/* --- 7. Galerie de la fiche (portée par SwiperLite) ----------------------- */

.m-modal-gallery {
  margin-top: 32px;
}

/* Réglage d'origine, conservé pour les fiches d'EXPOSITION : leurs photos sont
   toutes en paysage et le 14/9 leur va. */
.m-modal-gallery .swiper-slide img {
  display: block;
  width: 100%;
  aspect-ratio: 14 / 9;
  object-fit: cover;
}

/* Fiches d'ŒUVRE seulement. `contain` et non `cover`, comme pour la vue unique :
   un cadre 14/9 en `cover` décapitait l'oiseau.

   Le format du cadre suit celui de la pièce, au lieu d'un compromis unique. Un
   seul ratio pour les deux — 4/5 — obligeait « Comète », qui est en paysage, à
   flotter entre deux bandes noires hautes de 200px. Le portrait est la règle
   (l'essentiel des pièces est vertical), `is-landscape` l'exception.

   La règle est bien portée par `.m-modal__col-media` : appliquée à toutes les
   galeries, elle letterboxait aussi les photos d'exposition. */
.m-modal__col-media .m-modal-gallery .swiper-slide img {
  aspect-ratio: 3 / 4;
  object-fit: contain;
  background: var(--braise);
}

.m-modal__col-media .m-modal-gallery.is-landscape .swiper-slide img {
  aspect-ratio: 4 / 3;
}

@media screen and (min-width: 900px) {
  .m-modal__col-media .m-modal-gallery {
    margin-top: 0;
  }
}

.m-modal-gallery .swiper-button-prev,
.m-modal-gallery .swiper-button-next {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(245, 241, 234, .7);
  border-radius: 50%;
  font-size: 9px;
  color: #f5f1ea;
  background: rgba(20, 14, 9, .35);
  transition: background .4s ease, transform .4s ease;
}

.m-modal-gallery .swiper-button-prev { left: 12px; }
.m-modal-gallery .swiper-button-next { right: 12px; }

.m-modal-gallery .swiper-button-prev:hover,
.m-modal-gallery .swiper-button-next:hover {
  background: rgba(20, 14, 9, .8);
}

/* Les puces sortent SOUS le tirage au lieu d'être posées dessus : à 12px du
   bas, elles tombaient dans la marge blanche du Polaroïd, où des points clairs
   sur fond clair ne se voient plus. Le carrousel garde donc une marge basse
   pour les recevoir, sur le noir de la modale. */
.m-modal-gallery {
  padding-bottom: 26px;
}

.m-modal-gallery .swiper-pagination {
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
}

.m-modal-gallery .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  margin: 0 5px;
  border-radius: 50%;
  background: #f5f1ea;
  opacity: .45;
  transition: opacity .3s ease;
}

.m-modal-gallery .swiper-pagination-bullet-active {
  opacity: 1;
}

/* La puce active de la base porte un halo ::after ; inutile ici. */
.m-modal-gallery .swiper-pagination-bullet-active::after {
  display: none;
}

/* --- 8. Mouvement réduit --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .m-modal__backdrop,
  .m-modal__panel {
    transition: none;
  }

  .m-modal__panel {
    opacity: 1;
    transform: none;
  }

  .c-global-nav__target:hover,
  .c-section:hover .c-heading-with-icon::after,
  .m-modal__close:hover {
    transform: none;
  }
}

/* --- 9. Commandes de la galerie sur petit écran ----------------------------
   Sur mobile, la carte se prend au doigt : les flèches deviennent un doublon,
   et elles mangent les bords de la photo sur une largeur où chaque pixel
   compte. Les puces restent — elles ne servent pas à naviguer mais à dire
   combien de vues il y a et où l'on en est. Sans elles, rien n'indiquerait
   qu'il y a autre chose à voir. */

@media screen and (max-width: 767px) {
  .m-modal-gallery .swiper-button-prev,
  .m-modal-gallery .swiper-button-next {
    display: none;
  }
}