/* Good Sessions 2027 : d'après la maquette Figma « GOOD SESSIONS 2027 » (26/10).
   Unité --u = 1 px de la maquette (cadre de 684 px) : tout suit la largeur de l'écran. */
@font-face { font-family: "Haas"; src: url(fonts/NHaasGroteskDSPro-65Md.otf); font-weight: 500; font-display: block; }
/* FH Total : fichiers « Test » (démo seulement, licence à acheter avant la mise en ligne) */
@font-face { font-family: "Total"; src: url(fonts/FHTotalDisplay-Test-Thin.otf); font-weight: 100; font-display: block; }
@font-face { font-family: "Total"; src: url(fonts/FHTotalDisplay-Test-Light.otf); font-weight: 300; font-display: block; }

:root {
  --u: calc(100vw / 684);
  --fond: #f6f6f6; --pied: #d7d7d7; --encre: #000; --gris: #a9a9a9;
  /* deux tailles de typo (trois au plus), sur tous les écrans */
  --titre: max(16px, calc(13.5 * var(--u)));   /* titres de projet, CURATED, menu en haut de page */
  --texte: var(--petit);                       /* textes à lire : page projet, About (27/10 : ramenés à la taille petit) */
  --petit: max(11px, calc(6 * var(--u)));      /* sous-titres, légendes, pied de page, menu réduit */
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { background: var(--fond); }
body { background: var(--fond); color: var(--encre); font: 500 var(--petit)/1.15 "Haas", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; display: block; width: 100%; height: 100%; object-fit: cover; }
.serif { font-family: "Total", serif; font-weight: 300; }
.fin { font-family: "Total", serif; font-weight: 100; }

/* ---------- en-tête : fixe, grand en haut, se réduit doucement au scroll (--p de 0 à 1, piloté par gs27.js) ---------- */
.tete { position: fixed; z-index: 20; top: 0; left: 0; right: 0; background: var(--fond); --p: 0; }
.tete .ligne { display: flex; justify-content: space-between; align-items: flex-start;
  padding: calc((2.5 - 1.5 * var(--p)) * var(--u)) calc(8 * var(--u)) calc((11 - 8.5 * var(--p)) * var(--u)); }
.tete .marque { font-size: calc(var(--titre) + (var(--petit) - var(--titre)) * var(--p)); line-height: 1.15; letter-spacing: -.019em; white-space: nowrap; }
.tete nav { font-family: "Total", serif; font-weight: 100; font-size: calc(var(--titre) + (var(--petit) - var(--titre)) * var(--p)); line-height: 1.15; letter-spacing: .011em; white-space: nowrap; }
.tete nav a + a { margin-left: .8em; }
.tete nav a.ici { color: var(--gris); }
.tete nav a:hover { color: var(--gris); }

/* ---------- blocs d'images ---------- */
.plein { position: relative; display: block; aspect-ratio: 684 / 433; overflow: hidden; }
/* accueil : le premier bloc remplit l'écran sous l'en-tête, titre et sous-titre toujours visibles en bas */
.plein.ecran { aspect-ratio: auto; height: calc(100vh - var(--tete, 0px)); height: calc(100svh - var(--tete, 0px)); min-height: calc(260 * var(--u)); }
/* diaporama d'un projet : vues superposées, une seule visible, fondu comme le diaporama CURATED */
.defile .vue { position: absolute; inset: 0; display: grid; opacity: 0; transition: opacity 1.6s ease; }
.defile .vue.on { opacity: 1; }
.defile .vue.n2 { grid-template-columns: 1fr 1fr; }
.defile .vue.n3 { grid-template-columns: 1fr 1fr 1fr; }
.defile .vue > div { overflow: hidden; }
.defile .vue img { transform: scale(1.04); transition: transform 7s cubic-bezier(.2,.6,.2,1); }
.defile .vue.on img { transform: scale(1); }
.defile .titre { z-index: 2; }
.duo, .trio { display: grid; }
.duo { grid-template-columns: 1fr 1fr; }
.trio { grid-template-columns: 1fr 1fr 1fr; }
.duo > *, .trio > * { position: relative; aspect-ratio: 342 / 433; overflow: hidden; }
.trio > * { aspect-ratio: 2 / 3; }   /* format natif des photos verticales (maquette : 228 / 433, trop étroit) */
/* page projet : légende sous chaque image (artiste, objet, crédit) ; le cadre garde le ratio, la légende passe dessous */
.avec-leg { margin: 0; }
.duo.avec-leg > figure, .trio.avec-leg > figure { aspect-ratio: auto; overflow: visible; margin: 0; }
.duo.avec-leg .cadre { position: relative; aspect-ratio: 342 / 433; overflow: hidden; }
.trio.avec-leg .cadre { position: relative; aspect-ratio: 2 / 3; overflow: hidden; }
.avec-leg figcaption { padding: calc(4 * var(--u)) calc(8 * var(--u)) calc(14 * var(--u)); font-size: var(--petit); line-height: 1.05; }
.avec-leg figcaption span { display: block; }
.avec-leg figcaption .credit { color: #8a8a8a; margin-top: .2em; }
a.plein img, a.duo img, a.trio img, .serie a img { transition: transform 1.6s cubic-bezier(.2,.7,.2,1); }
a.plein.vu:hover img, a.plein.vu:hover div img, .serie .vu a:hover img, .liste-a .vu a:hover img { transform: scale(1.025); }
.vide { background: #e3e3e3; }
/* image de fond en 2 ou 3 panneaux côte à côte (champ fond dans data.js) */
.fond-2, .fond-3 { display: grid; }
.fond-2 { grid-template-columns: 1fr 1fr; }
.fond-3 { grid-template-columns: 1fr 1fr 1fr; }
.fond-2 > div, .fond-3 > div { overflow: hidden; }

/* titre posé sur l'image : une typo par ligne, centré */
.titre { position: absolute; left: 0; right: 0; bottom: 11%; text-align: center; color: #fff; pointer-events: none; }
.titre .t { display: block; font-family: "Total", serif; font-weight: 100; font-size: var(--titre); line-height: 1.15; letter-spacing: -.019em; text-transform: uppercase; }
.titre .s { display: block; font-size: var(--petit); line-height: .9; margin: .35em auto 0; }
/* blocs plein écran : placé comme sur Purs Objets de Style (11 %), un peu plus bas */
.ecran .titre { bottom: 8%; }
.vide + .titre, .titre.noir { color: #000; }

/* ---------- diaporama de l'accueil : deux images, défilement désynchronisé ---------- */
.diapo { position: relative; display: grid; grid-template-columns: 1fr 1fr; }
.diapo .col { position: relative; aspect-ratio: 342 / 433; overflow: hidden; background: var(--fond); }
.diapo figure { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; }
.diapo figure img { transform: scale(1.04); transition: transform 7s cubic-bezier(.2,.6,.2,1); }
.diapo figure.on { opacity: 1; }
.diapo figure.on img { transform: scale(1); }
.diapo figcaption { position: absolute; left: calc(10 * var(--u)); bottom: calc(8 * var(--u)); font-size: var(--petit); line-height: .95; color: #000; }
.diapo figcaption span { display: block; }
.diapo figcaption .serif { font-family: "Total", serif; font-weight: 300; }
.diapo figure.clair figcaption { color: #fff; }
.diapo .curated { position: absolute; z-index: 2; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; pointer-events: none;
  font-size: var(--titre); line-height: .85; letter-spacing: -.019em; text-align: center; }
.diapo .curated .fin { letter-spacing: -.019em; }

/* ---------- Projects, version A : une image par projet, centrée, légende dessous ---------- */
.liste-a { padding: calc(40 * var(--u)) 0 calc(60 * var(--u)); }
.liste-a article { width: calc(512 * var(--u)); margin: 0 auto calc(64 * var(--u)); }
.liste-a .image { display: block; aspect-ratio: 512 / 325; overflow: hidden; }
.liste-a .leg { margin-top: calc(6 * var(--u)); font-size: var(--petit); line-height: 1.05; }
.liste-a .leg .serif:first-child { text-transform: uppercase; }
@media (max-width: 640px) { .liste-a article { width: calc(100% - 32px); } }

/* ---------- Projects, version B : une série par projet ---------- */
.serie { scroll-margin-top: 0; }

/* ---------- page projet ---------- */
.entete-projet { text-align: center; padding: calc(30 * var(--u)) 0 calc(36 * var(--u)); }
.entete-projet h1 { font-family: "Total", serif; font-weight: 100; font-size: var(--titre); line-height: 1.15; letter-spacing: -.019em; text-transform: uppercase; }
.entete-projet p { font-size: var(--petit); line-height: .9; margin: .35em auto 0; }
.texte { padding: calc(12 * var(--u)) calc(17 * var(--u)) calc(50 * var(--u)); max-width: calc(342 * var(--u)); font-size: var(--texte); line-height: 1.05; }
/* la colonne de texte ne dépasse pas la première colonne d'images (342 px de maquette), sauf sur téléphone */
@media (max-width: 640px) { .texte, .apropos { max-width: none; } }
.texte p + p { margin-top: .9em; }
.infos { padding: 0 calc(17 * var(--u)) calc(16 * var(--u)); font-size: var(--petit); line-height: 1.1; }

/* ---------- About ---------- */
.portraits { display: grid; grid-template-columns: 1fr 1fr; }
.portraits > * { aspect-ratio: 342 / 517; overflow: hidden; }
.portraits img { filter: grayscale(1) brightness(.75) contrast(1.08); }
.apropos { padding: calc(8 * var(--u)) calc(8 * var(--u)) calc(60 * var(--u)); max-width: calc(342 * var(--u)); font-size: var(--texte); line-height: 1.05; }
.apropos .serif { display: block; }
.apropos p + p { margin-top: .9em; }
.apropos a { text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1px; }

/* ---------- pied de page ---------- */
.pied { background: var(--pied); padding: calc(78 * var(--u)) calc(8 * var(--u)) calc(6 * var(--u)); font-size: var(--petit); line-height: 1.05; }
.pied p + p { margin-top: 1em; }
.pied .licence { margin-top: calc(14 * var(--u)); max-width: 62em; }
.pied a:hover { color: #666; }

/* ---------- apparitions au scroll ---------- */
/* les blocs restent bord à bord : on ne déplace pas le bloc, seule l'image se pose (fondu + léger recul) */
.apparait { opacity: 0; transition: opacity 1.2s ease; }
.apparait.vu { opacity: 1; }
.apparait:not(.diapo) img { transform: scale(1.06); transition: transform 2.2s cubic-bezier(.2,.7,.2,1); }
.apparait.vu:not(.diapo) img { transform: scale(1); }
.liste-a .apparait, .texte.apparait, .apropos.apparait { transform: translateY(18px); transition: opacity 1.2s ease, transform 1.4s cubic-bezier(.2,.7,.2,1); }
.liste-a .apparait.vu, .texte.apparait.vu, .apropos.apparait.vu { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .apparait, .apparait img { opacity: 1 !important; transform: none !important; transition: none !important; }
  .diapo figure, .diapo figure img { transition: none; transform: none; }
}


/* ---------- page Artists : index typographique, aperçu au survol, pièces au clic ---------- */
.artistes { padding: 0 calc(8 * var(--u)) calc(40 * var(--u)); }
.artistes h2 { font-family: "Total", serif; font-weight: 100; font-size: var(--petit); text-transform: uppercase; letter-spacing: .02em; margin: 0 0 calc(8 * var(--u)); color: var(--gris); }
.artistes ul { list-style: none; margin: 0; padding: 0; }
.artiste { border-top: 1px solid #ddd; padding: calc(3 * var(--u)) 0; }
.artiste .nom { font: 500 var(--titre)/1.05 "Haas", sans-serif; letter-spacing: -.019em; background: none; border: 0; padding: 0; color: var(--encre); cursor: pointer; text-align: left; }
.artiste .nom:hover { color: var(--gris); }
.artiste .proj { display: inline-block; vertical-align: top; font-size: var(--petit); line-height: 1; color: var(--gris); margin: .25em 0 0 .5em; }   /* en exposant, à droite du nom : toutes les lignes ont la même hauteur */
.artiste .oeuvres { display: none; grid-template-columns: repeat(4, 1fr); gap: calc(6 * var(--u)); padding: calc(8 * var(--u)) 0 calc(6 * var(--u)); }
.artiste.ouvert .oeuvres { display: grid; }
.artiste .oeuvres a { color: inherit; text-decoration: none; font-size: var(--petit); }
.artiste .oeuvres .cadre { position: relative; aspect-ratio: 4 / 5; overflow: hidden; margin-bottom: .3em; }
.apercu { position: fixed; z-index: 30; width: 22vw; height: auto; pointer-events: none; opacity: 0; transition: opacity .25s; }
.apercu.on { opacity: 1; }
@media (max-width: 640px) { .artiste .oeuvres { grid-template-columns: 1fr 1fr; } .apercu { display: none; } }

/* ---------- page About : presse, liste typographique (média en Haas, article en Total) ---------- */
.presse { padding: 0 calc(8 * var(--u)) calc(60 * var(--u)); max-width: calc(342 * var(--u)); margin-top: calc(-36 * var(--u)); }   /* même colonne que le texte About, collée dessous */
.presse h2 { font-family: "Total", serif; font-weight: 100; font-size: var(--petit); text-transform: uppercase; letter-spacing: .02em; color: var(--gris); margin: 0 0 calc(6 * var(--u)); }
.presse ul { list-style: none; margin: 0; padding: 0; }
.presse li { border-top: 1px solid #ddd; }
.presse li > * { display: block; padding: calc(3 * var(--u)) 0; color: inherit; text-decoration: none; font-size: var(--texte); line-height: 1.1; }
.presse .titre-presse { margin-right: .35em; }   /* titre de l'article juste après le nom du journal */
.presse a:hover { color: var(--gris); }