/* ==========================================================================
   sarah danelli · photography portfolio
   main.css
   1. Polices et variables
   2. Base
   3. Navigation
   4. Accueil (photo plein écran)
   5. About her (two truths and a lie)
   6. Chapitres (sites, sounds, snacks)
   7. Galerie horizontale
   8. Planches photo
   9. Setlist, clients, contact, pied de page
   10. Visionneuse et aperçu
   11. Responsive
   12. Animations pilotées par le scroll
   13. Repli sans scroll-timeline et mouvement réduit
   ========================================================================== */

/* 1. Polices et variables ------------------------------------------------------ */

@font-face {
  font-family: "Archivo";
  src: url("polices/archivo.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

@font-face {
  font-family: "Archivo";
  src: url("polices/archivo-italique.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

@font-face {
  font-family: "DM Mono";
  src: url("polices/dm-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@property --numero-photo {
  syntax: "<integer>";
  initial-value: 1;
  inherits: false;
}

:root {
  --blanc: #f3f2ee;
  --noir: #0e0e0d;
  --gris: #6e6d68;
  --orange: #c2490b;
  --orange-clair: #e2621f;
  --filet: currentColor;

  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --courbe: cubic-bezier(0.22, 1, 0.36, 1);
  --marge: clamp(1.25rem, 3.5vw, 3.5rem);
  --gouttiere: clamp(1rem, 2vw, 2rem);
  --h-diapo: min(62vh, 660px);
}

/* 2. Base ---------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

html.lenis,
html.lenis body {
  height: auto;
}

html.lenis {
  scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
  overflow: clip;
}

body {
  margin: 0;
  background-color: var(--blanc);
  color: var(--noir);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  font-stretch: 100%;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

main {
  overflow-x: clip;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

::selection {
  background: var(--orange);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

.symboles {
  position: absolute;
  overflow: hidden;
}

.accent {
  color: var(--orange);
}

.zone-sombre .accent,
.contact .accent {
  color: var(--orange-clair);
}

.lien-evitement {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 200;
  padding: 0.6rem 1rem;
  background: var(--orange);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.8rem;
  translate: 0 -200%;
  transition: translate 0.3s var(--courbe);
}

.lien-evitement:focus {
  translate: 0 0;
}

.fleche {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

.fleche-gauche { rotate: 180deg; }
.fleche-bas { rotate: 90deg; }

/* typo de titre : grotesque condensée, grasse, en capitales */
.nom-accueil,
.titre-moyen,
.titre-chapitre,
.titre-contact,
.morceau-nom,
.liste-clients,
.logo {
  font-family: var(--sans);
  font-weight: 850;
  font-stretch: 62%;
  text-transform: uppercase;
  letter-spacing: -0.005em;
}

.etiquette {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}

.entete-section {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--filet);
}

.texte-discret {
  margin: 0;
  color: var(--gris);
  max-width: 34ch;
}

/* 3. Navigation ------------------------------------------------------------------ */

.navigation {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem var(--marge);
  color: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
  transition: translate 0.7s var(--courbe);
}

.navigation.est-cachee {
  translate: 0 -110%;
}

.logo,
.lien-menu {
  pointer-events: auto;
  text-decoration: none;
}

.logo {
  font-size: 1.25rem;
  line-height: 1;
  white-space: nowrap;
}

.menu {
  display: flex;
  gap: clamp(1rem, 2.4vw, 2.5rem);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lien-menu {
  position: relative;
  display: inline-flex;
  gap: 0.45rem;
  padding: 0.25rem 0;
}

.lien-numero {
  opacity: 0.55;
}

.lien-menu::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--courbe);
}

.lien-menu:hover::after,
.lien-menu[aria-current="true"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* 4. Accueil ----------------------------------------------------------------------- */

.accueil {
  position: relative;
  height: 100svh;
  min-height: 560px;
  overflow: clip;
  background: #1c1d1a;
  color: #fff;
}

.accueil-photo {
  position: absolute;
  inset: 0;
}

.accueil-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 66%;
  animation: approcher-photo 2.6s var(--courbe) both;
}

@keyframes approcher-photo {
  from { scale: 1.12; }
  to { scale: 1; }
}

.accueil::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to top, rgb(0 0 0 / 0.6), rgb(0 0 0 / 0) 48%),
    linear-gradient(to bottom, rgb(0 0 0 / 0.28), rgb(0 0 0 / 0) 22%);
}

/* brouillard : textures PNG raccordables qui dérivent en boucle.
   Une tuile fait deux fois la hauteur de sa couche : la couche glisse
   d'exactement une tuile, la boucle est donc invisible. */
.brouillard {
  position: absolute;
  inset: 0;
  overflow: clip;
  pointer-events: none;
}

.couche-brouillard {
  --h-couche: 100svh;
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(100vw + 2 * var(--h-couche));
  height: var(--h-couche);
  background: url("images/brouillard-bas.png") repeat-x 0 100% / auto 100%;
  pointer-events: none;
  will-change: translate;
  animation:
    deriver-brouillard 95s linear infinite,
    lever-brouillard 3.5s var(--courbe) 0.3s both;
}

.couche-loin {
  --h-couche: 88svh;
  top: 0;
  bottom: auto;
  background-image: url("images/brouillard-volutes.png");
  opacity: 0.9;
  animation-duration: 150s, 3.5s;
  animation-direction: reverse, normal;
}

/* brouillard du bas tassé sous la caméra de Sarah (environ 65 % de la hauteur de la photo) */
.couche-milieu {
  --h-couche: 48svh;
  opacity: 0.95;
}

.couche-devant {
  --h-couche: 32svh;
  z-index: 3;
  opacity: 0.4;
  background-position: 0 100%;
  animation-duration: 70s, 3.5s;
  animation-delay: 0s, 0.8s;
}

@keyframes deriver-brouillard {
  from { translate: 0 0; }
  to { translate: calc(-2 * var(--h-couche)) 0; }
}

@keyframes lever-brouillard {
  from { opacity: 0; transform: translateY(6%); }
}

.accroche {
  position: absolute;
  top: 5.25rem;
  right: var(--marge);
  z-index: 2;
  margin: 0;
  padding: 0.5rem 0.8rem;
  background: var(--orange);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.accueil-bas {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 0 var(--marge) 1.25rem;
}

.nom-accueil {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: 0.25em;
  margin: 0 -0.02em;
  font-size: clamp(3.5rem, 15.2vw, 22rem);
  line-height: 0.8;
}

.nom-ligne {
  display: block;
  overflow: clip;
  padding-top: 0.06em;
}

.nom-mot {
  display: inline-block;
  animation: monter-nom 1.4s var(--courbe) both;
  animation-delay: calc(var(--i) * 120ms + 250ms);
}

@keyframes monter-nom {
  from { transform: translateY(105%); }
}

.accueil-infos {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  margin-top: 1.1rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgb(255 255 255 / 0.55);
}

.sommaire {
  display: flex;
  gap: clamp(1rem, 3vw, 3rem);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lien-sommaire {
  display: inline-flex;
  gap: 0.45rem;
  text-decoration: none;
  transition: color 0.3s;
}

.lien-sommaire:hover {
  color: var(--orange-clair);
}

.lien-defiler {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
}

.lien-defiler .fleche {
  animation: flotter 2s ease-in-out infinite;
}

@keyframes flotter {
  50% { translate: 0 4px; }
}

.apparition-chargement {
  animation: fondu-chargement 1.2s var(--courbe) 0.8s both;
}

@keyframes fondu-chargement {
  from { opacity: 0; transform: translateY(0.75rem); }
}

/* 5. About her ---------------------------------------------------------------- */

.verites {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gouttiere);
  row-gap: clamp(2rem, 4vw, 3.5rem);
  padding: clamp(5rem, 10vw, 9rem) var(--marge);
}

.verites > .entete-section {
  grid-column: 1 / -1;
}

.verites-photo {
  grid-column: 1 / span 4;
  margin: 0;
}

.verites-texte {
  grid-column: 7 / -1;
  align-self: end;
}

.titre-moyen {
  margin: 0 0 1.25rem;
  font-size: clamp(3rem, 7.4vw, 9rem);
  line-height: 0.84;
}

.esperluette {
  color: var(--orange);
}

.liste-affirmations {
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--filet);
}

.affirmation {
  display: grid;
  grid-template-columns: 3rem 1fr;
  align-items: baseline;
  width: 100%;
  margin: 0;
  padding: 1.25rem 0;
  border: 0;
  border-top: 1px solid var(--filet);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.affirmation-numero {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--orange);
}

.affirmation-texte {
  font-size: clamp(1.25rem, 1.85vw, 2rem);
  font-weight: 650;
  line-height: 1.18;
  letter-spacing: -0.015em;
  transition: color 0.4s;
}

.affirmation-barre {
  background: linear-gradient(var(--orange), var(--orange)) no-repeat 0 56% / 0% 0.14em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 0.7s var(--courbe);
}

.affirmation:hover .affirmation-texte {
  color: var(--orange);
}

.affirmation[aria-pressed="true"] .affirmation-texte {
  color: var(--gris);
}

.affirmation[aria-pressed="true"] .affirmation-barre {
  background-size: 100% 0.14em;
}

.verdict {
  min-height: 1.6em;
  margin: 1.25rem 0 0;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.verdict a {
  color: var(--orange);
  text-underline-offset: 0.25em;
}

/* 6. Chapitres ----------------------------------------------------------------- */

.chapitre {
  padding-top: clamp(4rem, 9vw, 8rem);
}

.chapitre-entete {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gouttiere);
  align-items: end;
  padding: 0 var(--marge) clamp(1.5rem, 3vw, 2.5rem);
}

.chapitre-entete > .entete-section {
  grid-column: 1 / -1;
}

.titre-chapitre {
  grid-column: 1 / span 9;
  margin: 0.12em 0 -0.07em -0.02em;
  font-size: clamp(5.5rem, 21vw, 27rem);
  line-height: 0.8;
}

/* titre de 11 lettres (archaeology) : plus petit pour tenir sur une ligne */
.titre-long {
  grid-column: 1 / -1;
  font-size: clamp(3.5rem, 15vw, 19rem);
}

.citation,
.chapitre-texte {
  grid-column: 10 / -1;
  margin: 0;
  padding-bottom: 0.4rem;
}

.citation p,
.chapitre-texte {
  margin: 0 0 0.8rem;
  font-size: clamp(1.05rem, 1.25vw, 1.3rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.3;
}

.citation footer {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris);
}

.image-pleine {
  margin: 0;
}

/* cadre photo commun */
.photo-cliquable {
  display: block;
  position: relative;
  cursor: zoom-in;
}

.cadre {
  overflow: clip;
  background: color-mix(in srgb, currentColor 8%, transparent);
}

.cadre img {
  width: 100%;
}

/* emplacement vide : cadre au format de la future photo, remplacé depuis /admin */
.cadre-vide {
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent);
  color: var(--gris);
}

.vide-paysage {
  aspect-ratio: 3 / 2;
}

.vide-portrait {
  aspect-ratio: 2 / 3;
}

.photo-cliquable::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--orange);
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
}

.photo-cliquable:hover::after {
  opacity: 0.2;
}

/* 7. Galerie horizontale -------------------------------------------------------- */

.defilement-horizontal {
  position: relative;
  margin-top: clamp(4rem, 8vw, 7rem);
}

.fenetre-collante {
  position: relative;
  padding: 1rem 0 2rem;
}

.horizontal-entete {
  display: flex;
  justify-content: space-between;
  margin: 0 var(--marge);
  padding: 0.8rem 0 1.5rem;
  border-top: 1px solid var(--filet);
}

.compteur {
  display: none;
}

.piste {
  display: flex;
  align-items: flex-start;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  padding: 0 var(--marge) 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--marge);
  scrollbar-width: thin;
}

.diapo {
  flex: none;
  margin: 0;
  scroll-snap-align: start;
}

.diapo .photo-cliquable {
  overflow: clip;
}

.diapo img {
  width: auto;
  height: var(--h-diapo);
}

.horizontal-pied {
  display: none;
}

/* 8. Planches photo ------------------------------------------------------------ */

.planche {
  padding: clamp(3rem, 7vw, 6rem) var(--marge) clamp(2rem, 4vw, 3rem);
}

.colonnes-photos {
  columns: 3 16rem;
  column-gap: clamp(1rem, 2vw, 2rem);
}

.tirage {
  margin: 0 0 clamp(1.75rem, 3.5vw, 3rem);
  break-inside: avoid;
}

.tirage:nth-child(6n + 2) {
  padding-left: 18%;
}

.tirage:nth-child(6n + 5) {
  padding-right: 14%;
}

/* planche en rangées (archaeology) : une série par ligne, toutes les photos à la même hauteur ;
   --ratio (largeur / hauteur de la photo) vient du gabarit */
.rangees {
  display: grid;
  row-gap: clamp(1.75rem, 3.5vw, 3rem);
}

/* une rangée qui ne remplit pas la largeur (2 photos plafonnées en hauteur) reste centrée */
.rangee {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(1rem, 2vw, 2rem);
}

.rangee > .tirage {
  flex: var(--ratio) var(--ratio) 0;
  max-width: calc(var(--ratio) * 26rem);
  margin: 0;
  padding: 0;
}

@media (max-width: 760px) {
  .rangee {
    flex-wrap: wrap;
    justify-content: flex-start;
    row-gap: 1.25rem;
  }

  .rangee > .tirage {
    flex: 0 1 calc(50% - 0.5rem);
    max-width: none;
  }
}

.legende {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.6rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}

.legende-numero {
  color: var(--orange);
}

/* fumée de scène (sounds) : même principe que le brouillard de l'accueil,
   texture teintée d'orange, fondue en mode "screen" sur le noir */
.chapitre-scene .chapitre-entete,
.chapitre-scene .image-pleine {
  position: relative;
}

.chapitre-scene .image-pleine {
  overflow: clip;
}

.scene-brume {
  position: absolute;
  inset: 0;
  overflow: clip;
  pointer-events: none;
  mix-blend-mode: screen;
}

.scene-brume-titre {
  inset: -15% 0 -6% 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 62%, transparent 96%);
  mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 62%, transparent 96%);
}

.fumee {
  --h-couche: 42vw;
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(100vw + 2 * var(--h-couche));
  height: var(--h-couche);
  background: url("images/brouillard-scene.png") repeat-x 0 100% / auto 100%;
  transform-origin: 50% 100%;
  will-change: translate;
  animation: deriver-brouillard 85s linear infinite;
}

.scene-brume-titre .fumee {
  --h-couche: clamp(12rem, 24vw, 30rem);
  opacity: 0.85;
  animation-duration: 110s;
  animation-direction: reverse;
}

.fumee-volutes {
  --h-couche: 34vw;
  bottom: 18%;
  background-image: url("images/brouillard-volutes.png");
  opacity: 0.45;
  animation-duration: 140s;
  animation-direction: reverse;
}

/* zone sombre (sounds) */
.zone-sombre {
  --gris: #9a9a95;
  background: var(--noir);
  color: var(--blanc);
}

.zone-sombre .legende-numero,
.zone-sombre .morceau-compte {
  color: var(--orange-clair);
}

/* 9. Setlist, clients, contact, pied ---------------------------------------- */

.liste-concerts {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gouttiere);
  row-gap: 2rem;
  padding: clamp(4rem, 9vw, 8rem) var(--marge) 0;
}

/* la dernière galerie ferme la zone sombre : on garde de l'air pour le retour au blanc */
.zone-sombre > .planche:last-child {
  padding-bottom: clamp(6rem, 12vw, 11rem);
}

.liste-concerts-entete {
  grid-column: 1 / span 3;
}

.liste-concerts-entete .etiquette {
  padding-top: 0.8rem;
  margin-bottom: 0.9rem;
  border-top: 1px solid var(--filet);
}

.liste-groupes {
  grid-column: 4 / -1;
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: var(--gouttiere);
}

.morceau {
  break-inside: avoid;
  border-top: 1px solid var(--filet);
}

.groupe {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 0.55rem 0 0.45rem;
  text-decoration: none;
}

.morceau-numero,
.morceau-compte {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
}

.morceau-numero {
  color: var(--gris);
}

.morceau-compte {
  margin-left: auto;
  color: var(--orange);
}

.morceau-nom {
  font-size: clamp(1.5rem, 2.7vw, 3rem);
  line-height: 0.95;
  transition: color 0.25s;
}

.groupe:hover .morceau-nom,
.groupe:focus-visible .morceau-nom {
  color: var(--orange-clair);
}

.clients {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gouttiere);
  row-gap: 1.25rem;
  padding: clamp(3rem, 6vw, 5rem) var(--marge) clamp(6rem, 11vw, 10rem);
}

.clients .etiquette {
  grid-column: 1 / span 3;
  padding-top: 0.8rem;
  border-top: 1px solid var(--filet);
}

.liste-clients {
  grid-column: 4 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.3em;
  margin: 0;
  padding: 0.6rem 0 0;
  list-style: none;
  border-top: 1px solid var(--filet);
  font-size: clamp(2.2rem, 5.6vw, 6.5rem);
  line-height: 0.92;
}

.liste-clients li:not(:last-child)::after {
  content: " /";
  color: var(--orange);
}

.contact {
  position: relative;
  display: grid;
  align-items: end;
  min-height: 100svh;
  color: #fff;
  isolation: isolate;
}

.contact-fond {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--noir);
}

.contact-fond img {
  height: 100%;
  object-fit: cover;
  filter: brightness(0.55) grayscale(0.2);
}

.contact-contenu {
  padding: 7rem var(--marge) clamp(2rem, 4vw, 3.5rem);
}

.contact-contenu .entete-section {
  border-color: rgb(255 255 255 / 0.55);
}

.titre-contact {
  margin: 1.5rem 0 1.75rem -0.02em;
  font-size: clamp(4rem, 15vw, 20rem);
  line-height: 0.82;
}

.contact-texte {
  margin: 0 0 1.75rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.contact-liens {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.lien-instagram,
.lien-mail {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  max-width: 100%;
  padding: 1rem 1.4rem;
  background: var(--orange);
  color: #fff;
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  font-weight: 750;
  font-stretch: 85%;
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 0.3s, color 0.3s;
}

.lien-mail {
  background: transparent;
  box-shadow: inset 0 0 0 1px #fff;
}

.lien-instagram .fleche,
.lien-mail .fleche {
  flex: none;
  transition: translate 0.5s var(--courbe);
}

.lien-instagram:hover,
.lien-mail:hover {
  background: #fff;
  color: var(--noir);
}

.lien-instagram:hover .fleche,
.lien-mail:hover .fleche {
  translate: 0.35rem 0;
}

.pied {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem var(--marge);
  background: var(--noir);
  color: var(--blanc);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pied p {
  margin: 0;
}

.lien-pied {
  text-decoration: none;
}

.lien-pied:hover {
  color: var(--orange-clair);
}

/* 10. Visionneuse et aperçu ------------------------------------------------------- */

.apercu-flottant {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40;
  width: min(17rem, 30vw);
  pointer-events: none;
  opacity: 0;
  scale: 0.9;
  transition: opacity 0.3s, scale 0.5s var(--courbe);
}

.apercu-flottant.est-visible {
  opacity: 1;
  scale: 1;
}

.visionneuse {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgb(14 14 13 / 0.97);
  color: var(--blanc);
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  overscroll-behavior: contain;
}

.visionneuse[open] {
  display: grid;
  animation: ouvrir-visionneuse 0.4s var(--courbe);
}

.visionneuse::backdrop {
  background: transparent;
}

@keyframes ouvrir-visionneuse {
  from { opacity: 0; }
}

.visionneuse-figure {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.9rem;
  height: 100%;
  margin: 0;
  padding: 4.5rem 0 1.5rem;
}

.visionneuse-image {
  width: auto;
  max-width: 100%;
  max-height: calc(100dvh - 9rem);
  object-fit: contain;
}

.visionneuse-image.vient-de-changer {
  animation: changer-photo 0.5s var(--courbe);
}

@keyframes changer-photo {
  from { opacity: 0; }
}

.visionneuse-legende {
  display: flex;
  gap: 1.25rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.visionneuse-compteur {
  color: var(--orange-clair);
}

.bouton-visionneuse {
  display: grid;
  place-items: center;
  margin: 0 clamp(0.5rem, 2vw, 1.75rem);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.visionneuse-precedent,
.visionneuse-suivant {
  width: 3.25rem;
  height: 3.25rem;
  border: 1px solid rgb(243 242 238 / 0.4);
  font-size: 1.1rem;
  transition: background-color 0.25s, border-color 0.25s;
}

.visionneuse-precedent:hover,
.visionneuse-suivant:hover {
  background: var(--orange);
  border-color: var(--orange);
}

.visionneuse-fermer {
  position: absolute;
  top: 1.5rem;
  right: var(--marge);
  z-index: 1;
  margin: 0;
}

.visionneuse-fermer:hover {
  color: var(--orange-clair);
}

/* 11. Responsive ------------------------------------------------------------------ */

@media (max-width: 900px) {
  .verites-photo {
    grid-column: 1 / -1;
    width: min(80%, 22rem);
  }

  .verites-texte,
  .liste-concerts-entete,
  .liste-groupes,
  .clients .etiquette,
  .liste-clients {
    grid-column: 1 / -1;
  }

  .titre-chapitre {
    grid-column: 1 / -1;
  }

  .citation,
  .chapitre-texte {
    grid-column: 1 / span 8;
    margin-top: 1.5rem;
  }
}

@media (max-width: 760px) {
  :root {
    --h-diapo: 50svh;
  }

  .lien-numero {
    display: none;
  }

  .menu {
    gap: 0.85rem;
    font-size: 0.64rem;
  }

  .logo {
    font-size: 1.05rem;
  }

  .accroche {
    top: 4.5rem;
    font-size: 0.64rem;
  }

  .nom-accueil {
    flex-direction: column;
    font-size: 27vw;
  }

  .accueil-infos {
    grid-template-columns: 1fr auto;
  }

  .accueil-infos .etiquette:first-child {
    display: none;
  }

  .titre-chapitre {
    font-size: 27vw;
  }

  .titre-long {
    font-size: 16vw;
  }

  .citation,
  .chapitre-texte {
    grid-column: 1 / -1;
  }

  .fumee {
    --h-couche: 95vw;
  }

  .scene-brume-titre .fumee {
    --h-couche: 60vw;
  }

  .fumee-volutes {
    --h-couche: 70vw;
  }

  .colonnes-photos {
    columns: 2;
    column-gap: 0.75rem;
  }

  .tirage {
    margin-bottom: 1.5rem;
  }

  .tirage:nth-child(6n + 2),
  .tirage:nth-child(6n + 5) {
    padding: 0;
  }

  .legende {
    gap: 0.45rem;
    font-size: 0.6rem;
  }

  .liste-groupes {
    columns: 1;
  }

  .visionneuse {
    grid-template-columns: minmax(0, 1fr);
  }

  .visionneuse-precedent,
  .visionneuse-suivant {
    position: absolute;
    bottom: 1.25rem;
    z-index: 1;
  }

  .visionneuse-precedent { left: 0; }
  .visionneuse-suivant { right: 0; }

  .visionneuse-figure { padding-bottom: 6rem; }
  .visionneuse-image { max-height: calc(100dvh - 12rem); }
}

@media (pointer: coarse) {
  .apercu-flottant,
  .indice-survol {
    display: none;
  }
}

/* téléphone : les 5 rubriques ne tiennent plus à côté du logo, le menu passe dessous */
@media (max-width: 30rem) {
  .navigation {
    flex-wrap: wrap;
    row-gap: 0.55rem;
    padding-top: 1rem;
  }

  .menu {
    width: 100%;
    justify-content: space-between;
  }

  .accroche {
    top: 5.75rem;
  }

  .sommaire {
    gap: 0.7rem;
    font-size: 0.62rem;
  }
}

/* 12. Animations pilotées par le scroll -------------------------------------------- */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    html {
      timeline-scope: --sombre;
    }

    /* la page passe au noir pendant "sounds" puis revient au blanc */
    .zone-sombre {
      background: transparent;
      color: inherit;
      view-timeline: --sombre block;
    }

    body {
      animation: eteindre-page linear both, rallumer-page linear forwards;
      animation-timeline: --sombre, --sombre;
      animation-range: entry 15% entry 70%, exit 0% exit 35%;
    }

    @keyframes eteindre-page {
      from { background-color: var(--blanc); color: var(--noir); }
      to { background-color: var(--noir); color: var(--blanc); }
    }

    @keyframes rallumer-page {
      from { background-color: var(--noir); color: var(--blanc); }
      to { background-color: var(--blanc); color: var(--noir); }
    }

    /* accueil : la photo descend lentement, le nom remonte en s'effaçant */
    .accueil {
      view-timeline: --accueil block;
    }

    .accueil-photo {
      animation: descendre-photo linear both;
      animation-timeline: --accueil;
      animation-range: exit 0% exit 100%;
    }

    @keyframes descendre-photo {
      to { translate: 0 30%; }
    }

    .brouillard {
      animation: epaissir-brouillard linear both;
      animation-timeline: --accueil;
      animation-range: exit 0% exit 80%;
    }

    .brouillard {
      transform-origin: 50% 100%;
    }

    @keyframes epaissir-brouillard {
      to { scale: 1.1 1.6; }
    }

    .accueil-bas {
      animation: monter-nom-sortie linear both;
      animation-timeline: --accueil;
      animation-range: exit 0% exit 70%;
    }

    @keyframes monter-nom-sortie {
      to { translate: 0 -18vh; opacity: 0; }
    }

    .scene-brume-photo .fumee {
      animation: deriver-brouillard 85s linear infinite, gonfler-fumee linear both;
      animation-timeline: auto, view();
      animation-range: normal, cover 0% cover 100%;
    }

    .scene-brume-photo .fumee-volutes {
      animation-duration: 140s, auto;
      animation-direction: reverse, normal;
    }

    @keyframes gonfler-fumee {
      from { scale: 1 0.6; }
      to { scale: 1.05 1.35; }
    }

    /* textes : montée discrète */
    .apparition {
      animation: monter-texte linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 85%;
    }

    @keyframes monter-texte {
      from { opacity: 0; transform: translateY(2.5rem); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* images : le cadre se déplie, la photo se pose */
    .cadre {
      animation: deplier-cadre linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 35%;
    }

    .cadre img {
      animation: poser-photo linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 50%;
    }

    @keyframes deplier-cadre {
      from { clip-path: inset(10% 8% 10% 8%); }
      to { clip-path: inset(0 0 0 0); }
    }

    @keyframes poser-photo {
      from { scale: 1.22; }
      to { scale: 1; }
    }

    /* fond du contact : léger mouvement de profondeur */
    .contact-fond img {
      animation: profondeur linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }

    @keyframes profondeur {
      from { scale: 1.2; translate: 0 -5%; }
      to { scale: 1.06; translate: 0 5%; }
    }

    /* galerie horizontale épinglée */
    .defilement-horizontal {
      height: var(--hauteur-horizontal, 420vh);
      view-timeline: --horizontal block;
    }

    .fenetre-collante {
      position: sticky;
      top: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100svh;
      padding: 0;
      overflow: clip;
    }

    .piste {
      flex: none;
      width: max-content;
      padding-bottom: 0;
      overflow: visible;
      scroll-snap-type: none;
      animation: glisser-piste linear both;
      animation-timeline: --horizontal;
      animation-range: contain 0% contain 100%;
    }

    @keyframes glisser-piste {
      from { translate: 0 0; }
      to { translate: calc(-100% + 100vw) 0; }
    }

    .compteur {
      display: block;
    }

    .compteur-nombre {
      counter-reset: photo var(--numero-photo);
      animation: compter-photos linear both;
      animation-timeline: --horizontal;
      animation-range: contain 0% contain 100%;
    }

    .compteur-nombre::after {
      content: counter(photo, decimal-leading-zero);
    }

    @keyframes compter-photos {
      from { --numero-photo: 1; }
      to { --numero-photo: 10; }
    }

    .horizontal-pied {
      display: block;
      padding: 1.5rem var(--marge) 0;
    }

    .progression {
      display: block;
      height: 2px;
      background: color-mix(in srgb, currentColor 15%, transparent);
    }

    .progression span {
      display: block;
      height: 100%;
      background: var(--orange);
      transform-origin: 0 50%;
      animation: remplir linear both;
      animation-timeline: --horizontal;
      animation-range: contain 0% contain 100%;
    }

    @keyframes remplir {
      from { transform: scaleX(0); }
      to { transform: scaleX(1); }
    }
  }
}

/* 13. Repli sans scroll-timeline (Firefox) et mouvement réduit ---------------------- */

@supports not (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .avec-js .apparition {
      opacity: 0;
      transform: translateY(2rem);
      transition: opacity 1s var(--courbe), transform 1.1s var(--courbe);
    }

    .avec-js .cadre {
      clip-path: inset(10% 8% 10% 8%);
      transition: clip-path 1.3s var(--courbe);
    }

    .avec-js .cadre img {
      scale: 1.15;
      transition: scale 1.6s var(--courbe);
    }

    .avec-js .apparition.est-visible {
      opacity: 1;
      transform: none;
    }

    .avec-js .cadre.est-visible {
      clip-path: inset(0 0 0 0);
    }

    .avec-js .cadre.est-visible img {
      scale: 1;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}