/* ==========================================================================
   Page galerie
   Les vingt-huit photos du client sont des panoramiques 4000 x 1848, un format
   2,16:1. Une mosaïque à vignettes carrées et portraits, comme la version
   précédente, en aurait jeté les deux tiers au recadrage. Le parti pris suit
   donc la matière : des plaques pleine largeur, montrées entières, sans une
   seule coupe.

   La signature de la page est l'ouverture de chaque plaque : un clip-path qui
   s'écarte depuis le centre, comme un obturateur, pendant que l'image se
   détend d'un douzième. Tout le reste est tenu au calme pour que ce geste-là
   soit le seul qu'on remarque.
   ========================================================================== */

.gal {
  --noir: #0e0e0e;
  --noir-creuse: #141414;
  --noir-profond: #0a0908;
  --blanc: #fafafa;
  --blanc-mut: rgba(250, 250, 250, 0.72);
  --blanc-fnt: rgba(250, 250, 250, 0.44);
  --or: #c9a34a;
  --filet: rgba(250, 250, 250, 0.12);
  --filet-fort: rgba(250, 250, 250, 0.26);
  --gut: clamp(22px, 5vw, 76px);
  --ez: cubic-bezier(.22, .61, .36, 1);
  --ez-net: cubic-bezier(.4, 0, .2, 1);

  background: var(--noir);
  color: var(--blanc);
}

.gal-inner {
  width: min(1280px, 100%);
  margin-inline: auto;
  padding-inline: var(--gut);
}

/* ==========================================================================
   Ouverture
   ========================================================================== */

.gal-hero {
  padding-block: clamp(112px, 17vh, 200px) clamp(56px, 9vh, 110px);
}

.gal-fil {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-b);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blanc-fnt);
}

.gal-fil a { color: var(--blanc-mut); }
.gal-fil a:hover { color: var(--or); }

.gal-eyebrow,
.chap-eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-b);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--or);
}

.gal-eyebrow::before,
.chap-eyebrow::before {
  content: '';
  width: 40px;
  height: 1px;
  flex-shrink: 0;
  background: var(--or);
}

.gal-eyebrow { margin-top: 28px; }

.gal-h1 {
  max-width: 15ch;
  margin-top: 26px;
  font-family: var(--font-h);
  font-size: clamp(2.1rem, 5.4vw, 4.2rem);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.015em;
  text-transform: none;
  color: var(--blanc);
}

.gal-h1 em { font-style: italic; color: var(--or); }

.gal-lead {
  max-width: 52ch;
  margin-top: 26px;
  font-family: var(--font-b);
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  font-weight: 300;
  line-height: 1.8;
  color: var(--blanc-mut);
}

/* Trois repères vers les chapitres. Les nombres sont un décompte réel,
   pas une numérotation décorative : c'est le seul endroit de la page où
   la charte les autorise. */
.gal-chiffres {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: clamp(40px, 6vh, 68px);
  border-top: 1px solid var(--filet);
}

.gc {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 22px 34px 22px 0;
  color: inherit;
}

.gc + .gc { padding-left: 34px; border-left: 1px solid var(--filet); }

.gc::after {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  right: 34px;
  height: 1px;
  background: var(--or);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .5s var(--ez);
}

.gc + .gc::after { left: 34px; }
.gc:hover::after, .gc:focus-visible::after { transform: scaleX(1); }

.gc-n {
  font-family: var(--font-h);
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  font-weight: 400;
  line-height: 1;
  color: var(--or);
}

.gc-l {
  font-family: var(--font-b);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blanc-fnt);
  transition: color .4s var(--ez);
}

.gc:hover .gc-l { color: var(--blanc); }

/* ========================================================================== 
   Films
   ========================================================================== */

.gal-films { padding-block: 0 clamp(46px, 8vh, 96px); }
.gal-films-tete { padding-bottom: clamp(26px, 4vh, 42px); }
.gal-films-grid { display: grid; gap: clamp(18px, 2.4vw, 34px); }
.gal-film { margin: 0; }
.gal-film video {
  display: block;
  width: 100%;
  aspect-ratio: 2.16 / 1;
  object-fit: cover;
  background: var(--noir-creuse);
  border: 1px solid var(--filet);
  pointer-events: none;
}
.gal-film figcaption {
  margin-top: 14px;
  font-family: var(--font-b);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--blanc-fnt);
}

/* ==========================================================================
   Chapitres
   ========================================================================== */

.gal-chap { padding-block: clamp(46px, 8vh, 96px) 0; scroll-margin-top: 80px; }

.chap-tete {
  max-width: 46ch;
  padding-bottom: clamp(34px, 5vh, 60px);
}

.chap-h2 {
  margin-top: 22px;
  font-family: var(--font-h);
  font-size: clamp(1.7rem, 3.4vw, 2.7rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--blanc);
}

.chap-h2 em { font-style: italic; color: var(--or); }

.chap-chapo {
  margin-top: 18px;
  font-family: var(--font-b);
  font-size: 0.96rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--blanc-mut);
}

/* ==========================================================================
   Les plaques
   ========================================================================== */

.gal-plaques {
  display: grid;
  gap: clamp(46px, 7vh, 92px);
}

.plaque { margin: 0; }

/* L'obturateur. Il part presque fermé et s'ouvre depuis le centre.
   clip-path est l'une des quatre propriétés que la maison s'autorise à
   animer : elle ne provoque ni recalcul de mise en page ni repeinture. */
.plaque-cadre {
  position: relative;
  overflow: hidden;
  background: var(--noir-creuse);
  clip-path: inset(0 47% 0 47%);
  transition: clip-path 1.15s var(--ez);
}

.plaque.vu .plaque-cadre { clip-path: inset(0 0 0 0); }

.plaque-zoom {
  transform: scale(1.12);
  transition: transform 1.5s var(--ez);
}

.plaque.vu .plaque-zoom { transform: scale(1); }

.plaque-cadre img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1600 / 739;
  object-fit: cover;
  /* Dérive verticale pendant la traversée de l'écran. --p vient de
     galerie.js, une seule écoute de scroll pour toute la page. */
  transform: translate3d(0, calc((var(--p, .5) - .5) * -3.2%), 0);
  will-change: transform;
}

/* Un voile très léger, qui se lève quand on regarde la plaque. Il sert à
   unifier des clichés pris dans des lumières très différentes. */
.plaque-cadre::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(14, 14, 14, 0.22);
  transition: opacity .7s var(--ez);
}

.plaque:hover .plaque-cadre::after { opacity: 0; }
.plaque:hover .plaque-zoom { transform: scale(1.035); }

/* ---- La légende, sous l'image et non dessus ------------------------------ */

/* Posée dans l'image, elle aurait exigé un dégradé noir sur toute la largeur
   d'un panoramique : c'est précisément la lumière de la photo qu'on serait
   venu abîmer. Elle se pose donc dans le noir de la page. */
.plaque-cap {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  margin-top: 18px;
  padding-top: 15px;
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity .8s var(--ez) .35s, transform .8s var(--ez) .35s;
}

.plaque-cap::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--filet);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1s var(--ez) .5s;
}

.plaque.vu .plaque-cap { opacity: 1; transform: none; }
.plaque.vu .plaque-cap::before { transform: scaleX(1); }

.pc-titre {
  font-family: var(--font-h);
  font-size: clamp(1.05rem, 1.5vw, 1.32rem);
  font-weight: 400;
  line-height: 1.25;
  color: var(--blanc);
}

.pc-meta {
  font-family: var(--font-b);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blanc-fnt);
  transition: color .45s var(--ez);
}

.plaque:hover .pc-meta { color: var(--or); }

/* ---- Les duos ------------------------------------------------------------ */

.plaque-duo {
  display: grid;
  gap: clamp(20px, 2.4vw, 34px);
}

/* Le second panneau d'un duo s'ouvre juste après le premier : l'obturateur
   se lit alors comme un mouvement, pas comme deux évènements simultanés. */
.plaque--demi[style*="--r:1"] .plaque-cadre { transition-delay: .16s; }
.plaque--demi[style*="--r:1"] .plaque-zoom { transition-delay: .16s; }
.plaque--photo-client .plaque-cadre img { aspect-ratio: 3 / 2; }

/* ==========================================================================
   Note et dernier appel
   ========================================================================== */

.gal-note-sec { padding-block: clamp(64px, 10vh, 130px) clamp(20px, 3vh, 40px); }

.gal-note {
  max-width: 56ch;
  font-family: var(--font-b);
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 1.8;
  color: var(--blanc-mut);
}

.gal-note a {
  color: var(--or);
  padding-bottom: 1px;
  border-bottom: 1px solid currentColor;
}

.gal-cta {
  background: var(--noir-profond);
  padding-block: clamp(84px, 13vh, 160px);
}

.gal-cta-lbl {
  font-family: var(--font-b);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--blanc-fnt);
}

.gal-cta h2 {
  max-width: 16ch;
  margin-top: 22px;
  font-family: var(--font-h);
  font-size: clamp(2rem, 4.8vw, 3.6rem) !important;
  font-weight: 400 !important;
  line-height: 1.06;
  letter-spacing: -0.015em;
  text-transform: none !important;
  color: var(--blanc);
}

.gal-cta h2 em { font-style: italic; color: var(--or); }

.gal-cta-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: clamp(32px, 5vh, 52px);
}

.gal-cta .btn--gold {
  background: var(--or);
  border-color: var(--or);
  color: #0a0908;
}

.gal-cta .btn--ol {
  background: transparent;
  border-color: var(--filet-fort);
  color: var(--blanc);
}

.gal-cta .btn--ol:hover { border-color: var(--or); color: var(--or); }

/* ==========================================================================
   900 px : les duos passent à deux colonnes
   ========================================================================== */

@media (min-width: 900px) {
  .plaque-duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .gal-films-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Sur téléphone, un panoramique 2,16:1 sur 340 px de large ne fait plus que
   157 px de haut : il devient une frise illisible. On le recadre alors, et
   c'est le seul endroit où on se le permet. 16:10 plutôt que 4:3 : on garde
   les trois quarts de la largeur d'origine au lieu de six dixièmes, et la
   plaque fait quand même 245 px de haut. */
@media (max-width: 719px) {
  .plaque-cadre img { aspect-ratio: 16 / 10; }
  .plaque-cadre { clip-path: inset(0 34% 0 34%); }
  .gal-chiffres { flex-direction: column; }
  .gc { padding: 16px 0; }
  .gc + .gc { padding-left: 0; border-left: 0; border-top: 1px solid var(--filet); }
  .gc::after, .gc + .gc::after { display: none; }
}

/* ==========================================================================
   Réduction des animations
   Tout ce qui part d'un état fermé ou invisible doit être rouvert ici, sinon
   la page s'affiche vide : dix-huit obturateurs restés clos.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .plaque-cadre { clip-path: inset(0 0 0 0); transition: none; }
  .plaque-zoom { transform: none; transition: none; }
  .plaque-cadre img { transform: none; }
  .plaque-cap { opacity: 1; transform: none; transition: none; }
  .plaque-cap::before { transform: scaleX(1); transition: none; }
  .plaque:hover .plaque-zoom { transform: none; }
  .gc::after { transition: none; }
}

/* ==========================================================================
   Barre de navigation sur une page sombre
   Au repos le header est transparent et son texte est sombre : sur cette page
   il disparaissait. Même traitement que pendant la traversée du hero.
   ========================================================================== */

body.page-noire { background: #0e0e0e; }

body.page-noire .hdr,
body.page-noire .hdr a,
body.page-noire .hdr button {
  color: #fafafa;
}

body.page-noire .hdr .nav-logo img,
body.page-noire .hdr .burger-lines span {
  filter: invert(1) brightness(2);
}

body.page-noire .hdr.on {
  background: rgba(14, 14, 14, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: rgba(250, 250, 250, 0.1);
}

body.page-noire .hdr .btn--gold {
  background: #c9a34a;
  border-color: #c9a34a;
  color: #0a0908;
}