/* ==========================================================================
   Vimo — Films immobiliers
   Système : achromatique, une seule famille typographique, plans plein cadre.
   ========================================================================== */

/* Police : Hanken Grotesk, hébergée sur le site (licence libre OFL, voir
   assets/fonts/OFL-HankenGrotesk.txt). Ses proportions sont à 1 % près celles
   d'ABC Favorit, la police de Freytag Anderson. Un seul fichier « variable »
   couvre les deux graisses utilisées (300 et 400) et tous les accents français. */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/HankenGrotesk-latin.woff2") format("woff2");
  font-weight: 300 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Couleurs : relevées sur freytaganderson.com */
  --white: #ffffff;      /* sections claires */
  --paper: #fafafa;      /* texte sur l'image, fond de base */
  --ink: #000000;        /* texte sur fond clair */
  --ash: #dcdcdc;        /* texte sur fond sombre et sur le film */
  --charcoal: #1c1c1c;   /* section sombre */
  --soil: #141109;       /* fond derrière les films */
  --driftwood: #c2b5ae;  /* taupe chaud */
  --slate: #5a7574;      /* gris-vert de la dernière section */

  /* Typographie : une seule voix, deux graisses (300 et 400). */
  --font: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --text-body: 15.3px;
  --text-caption: 15.3px;
  --text-display: clamp(27px, 1.68vw + 17px, 48px);

  /* Rythme */
  --gutter: clamp(16px, 2.2vw, 32px);
  --header-space: clamp(88px, 9vw, 120px);
  --intermission: clamp(120px, 20vw, 288px);

  /* Mouvement */
  --ease: cubic-bezier(0.2, 0.6, 0.3, 1);
  --ease-film: cubic-bezier(0.7, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--text-body);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.34px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
h1, h2, h3, p, ul, figure { margin: 0; padding: 0; font-weight: inherit; }
ul { list-style: none; }
button { font: inherit; color: inherit; }

::selection { background: var(--ink); color: var(--paper); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

/* --------------------------------------------------------------------------
   Typographie
   -------------------------------------------------------------------------- */

.display {
  font-size: var(--text-display);
  line-height: 1.18;
  letter-spacing: 0;
  font-weight: 400;
  max-width: 21em;
}

.caption {
  font-size: var(--text-caption);
  line-height: 1.4;
  font-weight: 300;
}

.light { font-weight: 300; }
.nowrap { white-space: nowrap; }

/* --------------------------------------------------------------------------
   En-tête : monogramme à gauche, deux traits à droite
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--gutter);
  color: var(--paper);
  pointer-events: none;
  transition: color 0.45s var(--ease);
}

.site-header > * { pointer-events: auto; }
.site-header.is-ink { color: var(--ink); }
.menu-open .site-header,
.menu-open .site-header.is-ink { color: var(--paper); }

/* Monogramme V I / M O */
.monogram {
  display: grid;
  grid-template-columns: repeat(2, 1em);
  grid-template-rows: repeat(2, 1em);
  gap: 0.4em;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0;
  font-weight: 400;
  padding: 2px;
}

.monogram span {
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: 50% 50%;
  transition-property: transform, opacity;
  transition-duration: 0.7s, 0.6s;
  transition-timing-function: var(--ease-film), var(--ease);
  will-change: transform;
}

.monogram.is-entering span { opacity: 0; transition: none; }

/* Deux traits */
.burger {
  position: relative;
  width: 44px;
  height: 44px;
  margin: -12px -8px 0 0;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.burger span {
  position: absolute;
  left: 8px;
  right: 8px;
  height: 1px;
  background: currentColor;
  transition: transform 0.4s var(--ease);
}

.burger span:first-of-type { top: 18px; }
.burger span:last-of-type { top: 25px; }
.menu-open .burger span:first-of-type { transform: translateY(3.5px) rotate(45deg); }
.menu-open .burger span:last-of-type { transform: translateY(-3.5px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   Menu plein écran
   -------------------------------------------------------------------------- */

.menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  padding: var(--header-space) var(--gutter) var(--gutter);
  background: var(--soil);
  color: var(--paper);
  opacity: 0;
  visibility: hidden;
  overflow-y: auto;
  transition: opacity 0.6s var(--ease), visibility 0s linear 0.6s;
}

.menu-open .menu {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s var(--ease);
}

.menu-open body { overflow: hidden; }

.menu__nav a {
  display: inline-flex;
  gap: 0.35em;
  font-size: var(--text-display);
  line-height: 1.3;
  letter-spacing: 0;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.menu__nav li:nth-child(2) a { transition-delay: 0.05s; }
.menu__nav li:nth-child(3) a { transition-delay: 0.1s; }
.menu__nav li:nth-child(4) a { transition-delay: 0.15s; }
.menu__nav li:nth-child(5) a { transition-delay: 0.2s; }

.menu-open .menu__nav a { opacity: 1; transform: none; }

.menu__nav a .arrow { opacity: 0; transform: translateX(-8px); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); }
.menu__nav a:hover .arrow { opacity: 1; transform: none; }

.menu__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 32px;
}

.menu__foot a:hover,
.link:hover { opacity: 0.6; }

/* --------------------------------------------------------------------------
   Plans
   -------------------------------------------------------------------------- */

.plane {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--header-space) var(--gutter) var(--gutter);
  overflow: hidden;
}

/* Les plans « collent » en haut : le suivant glisse par-dessus, comme un fondu enchaîné. */
.plane--sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
}

.plane--media { background: var(--soil); color: var(--paper); }
.plane--paper { background: var(--white); color: var(--ink); }
.plane--charcoal { background: var(--charcoal); color: var(--ash); }
.plane--soil { background: var(--soil); color: var(--paper); }
.plane--driftwood { background: var(--driftwood); color: var(--ink); }

.plane--slate { background: var(--slate); color: var(--white); }

/* Plan transparent : sa phrase glisse sur le film du plan précédent. */
.plane--clear { background: transparent; color: var(--ash); }

/* Texte qui s'efface en fondu quand la phrase suivante arrive (voir main.js). */
[data-fade-out] { transition: opacity 0.6s var(--ease); }
[data-fade-out].is-out { opacity: 0; }

.plane--text { padding-bottom: var(--intermission); }

.plane__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.plane__media video,
.plane__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --focus : point de l'image à garder quand l'écran la recadre (téléphone). */
.plane__media video { opacity: 0; transition: opacity 1.4s var(--ease); object-position: var(--focus, 50% 50%); }
.plane__media video.is-ready { opacity: 1; }

/* Voile, comme sur Freytag Anderson : le film à 90 % sur le fond brun-noir,
   plus une ombre très douce en haut pour que le texte reste lisible. */
.plane__media--veil video.is-ready { opacity: 0.9; }

.plane__media--veil::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 17, 9, 0.5) 0%, rgba(20, 17, 9, 0.18) 38%, rgba(20, 17, 9, 0) 62%);
  pointer-events: none;
}

/* Fondu au noir à chaque fin de boucle, pour que le raccord ne se voie pas. */
.plane__media video.is-ready.is-dipping { opacity: 0; transition-duration: 0.7s; }

.plane__content { position: relative; z-index: 1; }

/* Plan projet : tout le plan est un lien */
.project { display: block; color: var(--paper); }
.project .plane__content { display: flex; flex-direction: column; gap: 4px; }
.project .arrow { display: inline-block; transition: transform 0.5s var(--ease); }
.project:hover .arrow { transform: translateX(8px); }
.project .plane__media { transition: transform 1.6s var(--ease); }
.project:hover .plane__media { transform: scale(1.015); }

/* --------------------------------------------------------------------------
   Blocs de texte
   -------------------------------------------------------------------------- */

.columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 17px var(--gutter);
  margin-top: clamp(72px, 10vw, 140px);
  max-width: 1440px;
}

.columns > * { max-width: 30em; }

.columns h3 {
  font-size: var(--text-body);
  margin-bottom: 1.4em;
}

.columns p { font-weight: 300; }

.list li { font-weight: 300; }

.note {
  margin-top: clamp(56px, 8vw, 96px);
  max-width: 25em;
}

.note h3 { font-size: var(--text-caption); margin-bottom: 17px; }

/* Section « phrase en haut, petit bloc en bas à gauche », comme l'introduction
   de Freytag Anderson : le bloc se pose vers les deux tiers de l'écran. */
.plane--split { display: flex; flex-direction: column; padding-bottom: clamp(80px, 13vh, 140px); }
.plane--split .plane__content { flex: 1; display: flex; flex-direction: column; }
.plane--split .note { margin-top: auto; padding-top: clamp(56px, 8vw, 96px); }

/* Sections « phrase en haut, trois colonnes en bas à gauche » (Le regard,
   Prestations), comme sur Freytag Anderson : colonnes étroites (≈ 280 px, et 220 px
   pour les listes, sur un écran de 1440 px), posées dans la moitié basse de l'écran. */
.plane--cols { display: flex; flex-direction: column; padding-bottom: clamp(80px, 22vh, 220px); }
.plane--cols .plane__content { flex: 1; display: flex; flex-direction: column; }
.plane--cols .display { max-width: 19em; }
.plane--cols .columns { margin-top: auto; padding-top: clamp(56px, 8vw, 96px); }
.plane--cols .columns > * { max-width: none; }
.plane--cols .columns h3 { margin-bottom: 17px; }
.plane--cols .actions { margin-top: 40px; }

/* Paragraphe sous les listes de Prestations : largeur d'une colonne, 60 px d'air
   au-dessus et en dessous (le bouton qui suit ne rajoute pas d'espace). */
.cols-note { margin: 60px 0; max-width: 300px; font-size: 14px; line-height: 1.5; font-weight: 300; }
.plane--cols .cols-note + .actions { margin-top: 0; }
.plane--cols .cols-note:last-child { margin-bottom: 0; }

/* Le paragraphe s'étend sur toute la largeur des trois listes ; sur téléphone,
   où les listes sont empilées, il prend toute la largeur de l'écran. */
@media (min-width: 861px) {
  .plane--cols .columns--lists + .cols-note { max-width: calc(3 * 15.5vw + 2 * 3.9vw); }
}

@media (max-width: 860px) {
  .cols-note { max-width: none; }
}

/* Prestations a plus de contenu que Le regard (listes + paragraphe) : un peu moins
   d'air autour, pour que tout tienne sur un écran sans grand blanc en bas. */
.plane--cols-compact { padding-bottom: clamp(72px, 17vh, 160px); }
.plane--cols-compact .columns { padding-top: 72px; }

@media (min-width: 861px) {
  .plane--cols .columns { grid-template-columns: repeat(3, 19.4vw); column-gap: 3.85vw; }
  .plane--cols .columns--lists { grid-template-columns: repeat(3, 15.5vw); column-gap: 3.9vw; }
}

.actions { margin-top: clamp(56px, 8vw, 96px); display: flex; flex-wrap: wrap; gap: 12px; }

/* Bouton pilule fantôme */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 12px 20px;
  border: 1px solid currentColor;
  border-radius: 300px;
  background: transparent;
  font-size: var(--text-caption);
  line-height: 1.2;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}

.pill:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.pill--light:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }

/* Contact, comme « Let’s begin » sur Freytag Anderson : la phrase en haut, de petites
   colonnes de texte posées vers les deux tiers de l’écran, aux mêmes largeurs que
   Le regard. Le pied de page se pose en dessous, sur l’image. */
.plane--end { display: flex; flex-direction: column; padding-bottom: clamp(140px, 26vh, 260px); }
.plane--end .plane__content { flex: 1; display: flex; flex-direction: column; }

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px var(--gutter);
  margin-top: auto;
  padding-top: clamp(56px, 8vw, 96px);
}

@media (min-width: 861px) {
  .contact-grid { grid-template-columns: repeat(3, 19.4vw); column-gap: 3.85vw; }
}

.contact-grid p { line-height: 1.4; }

/* « Prendre rendez-vous » : au clic, l’adresse e-mail prend la place du bouton. */
.pill.is-revealed { animation: fade-in 0.6s var(--ease); }
.mail-note { margin-top: 12px; min-height: 1.4em; opacity: 0; transition: opacity 0.6s var(--ease); }
.mail-note.is-visible { opacity: 0.75; }

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Pied de page */
.site-footer {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 24px var(--gutter);
  background: var(--white);
  color: var(--ink);
}

/* Sur l'accueil, le pied de page se pose sur le dernier plan, comme un générique. */
.site-footer--over {
  position: absolute;
  inset: auto 0 0 0;
  background: transparent;
  color: var(--paper);
}

/* --------------------------------------------------------------------------
   Page réalisation
   -------------------------------------------------------------------------- */

.project-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 48px var(--gutter);
  align-items: start;
}

.project-intro__meta { display: grid; gap: 24px; margin-top: 32px; }
.project-intro__meta h3 { font-size: var(--text-caption); }
.project-intro__text { display: grid; gap: 17px; max-width: 40em; }
.project-intro__text p { font-weight: 300; }
.project-intro__text .lead { font-weight: 400; }

/* Film complet (Vimeo) : une image et un bouton, le lecteur ne se charge qu'au clic.
   En ouverture d'une page réalisation, il occupe tout l'écran (.plane--film). */
.film__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; cursor: pointer; background: var(--soil); }
/* Au repos l'image occupe tout l'écran ; pendant la lecture, le film laisse une
   bande en bas pour « En savoir plus ↓ » (sur téléphone, on peut y faire défiler la page). */
.plane--film { --band: calc(var(--gutter) * 2 + 46px); }
.plane--film .film__frame { position: absolute; inset: 0; aspect-ratio: auto; transition: bottom 0.6s var(--ease); }
.plane--film .film__frame.is-playing { bottom: var(--band); }

/* « En savoir plus ↓ » : texte blanc très discret, à droite, sur la même ligne que le bouton. */
.film__more {
  position: absolute;
  right: var(--gutter);
  bottom: var(--gutter);
  z-index: 3;
  padding: 12px 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--paper);
  opacity: 0.7;
  transition: opacity 0.3s var(--ease);
}

.film__more:hover { opacity: 1; }
.film__arrow { display: inline-block; margin-left: 0.15em; animation: nudge 2.6s var(--ease) infinite; }

@keyframes nudge {
  0%, 55%, 100% { transform: translateY(0); }
  25% { transform: translateY(2px); }
}

@media (prefers-reduced-motion: reduce) {
  .film__arrow { animation: none; }
}

.film__frame img,
.film__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }

.film__frame img { transition: transform 1.6s var(--ease), opacity 0.6s var(--ease); }
.film__frame:hover img { transform: scale(1.015); }

.film__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(20, 17, 9, 0.5) 0%, rgba(20, 17, 9, 0) 45%);
  pointer-events: none;
  transition: opacity 0.6s var(--ease);
}

/* En plein écran, une ombre douce en haut garde le monogramme lisible sur le ciel. */
.plane--film .film__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(20, 17, 9, 0.6) 0%, rgba(20, 17, 9, 0.2) 14%, rgba(20, 17, 9, 0) 30%);
  pointer-events: none;
  transition: opacity 0.6s var(--ease);
}

.film__play { position: absolute; left: var(--gutter); bottom: var(--gutter); z-index: 1; color: var(--paper); }
.film__frame:hover .film__play { background: var(--paper); border-color: var(--paper); color: var(--ink); }

.film__frame iframe { z-index: 2; }

/* Tant que le numéro Vimeo n'est pas renseigné, pas de bouton. */
.film__frame[data-vimeo=""] { cursor: auto; }
.film__frame[data-vimeo=""] .film__play { display: none; }
.film__frame.is-playing { cursor: auto; }
.film__frame.is-playing img,
.film__frame.is-playing::before,
.film__frame.is-playing::after,
.film__frame.is-playing .film__play { opacity: 0; pointer-events: none; }

.gallery { display: grid; gap: 6px; background: var(--white); padding-bottom: 6px; position: relative; z-index: 1; }
.gallery__row { display: grid; gap: 6px; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); }
.frame { position: relative; overflow: hidden; background: var(--soil); aspect-ratio: var(--ratio, 16 / 9); }
.frame video, .frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.next {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: clamp(48px, 8vw, 96px) var(--gutter);
  background: var(--white);
}

.next .arrow { display: inline-block; transition: transform 0.5s var(--ease); }
.next a:hover .arrow { transform: translateX(8px); }

/* Mentions légales */
.legal { max-width: 46em; display: grid; gap: 40px; margin-top: clamp(56px, 8vw, 96px); }
.legal h2 { font-size: var(--text-body); font-weight: 400; margin-bottom: 6px; }
.legal p { font-weight: 300; }

/* --------------------------------------------------------------------------
   Ambiances provisoires
   En attendant les films : lumière lente et grain de pellicule.
   Elles restent visibles derrière la vidéo tant que celle-ci n'a pas chargé.
   -------------------------------------------------------------------------- */

.ph {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #110f0c;
}

.ph::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: var(--ph);
  filter: blur(42px);
  animation: drift 28s ease-in-out infinite alternate;
}

.ph::after {
  content: "";
  position: absolute;
  inset: -50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.16;
  mix-blend-mode: overlay;
  animation: grain 0.9s steps(5) infinite;
  pointer-events: none;
}

@keyframes drift {
  0% { transform: translate3d(-3%, -2%, 0) scale(1); }
  100% { transform: translate3d(3%, 2%, 0) scale(1.1); }
}

@keyframes grain {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); }
  80% { transform: translate(3%, 3%); }
  100% { transform: translate(0, 0); }
}

/* Nuit filée — lumières qui défilent, comme depuis une voiture */
.ph--hero { background: #0b0a08; }
.ph--hero::before {
  inset: -10% 0;
  background:
    radial-gradient(20% 3.5% at 12% 34%, rgba(236, 228, 214, 0.7), transparent 70%),
    radial-gradient(14% 2.5% at 30% 58%, rgba(214, 206, 192, 0.5), transparent 70%),
    radial-gradient(26% 4% at 54% 26%, rgba(240, 232, 220, 0.65), transparent 70%),
    radial-gradient(12% 2% at 66% 68%, rgba(200, 190, 172, 0.45), transparent 70%),
    radial-gradient(18% 3% at 85% 44%, rgba(236, 226, 210, 0.6), transparent 70%),
    radial-gradient(16% 2.5% at 40% 80%, rgba(180, 170, 152, 0.35), transparent 70%),
    radial-gradient(1.6% 1.4% at 44% 52%, rgba(255, 214, 160, 0.95), transparent 70%),
    linear-gradient(180deg, #16140f 0%, #0b0a08 60%, #12100c 100%);
  background-size: 1400px 100%;
  background-repeat: repeat-x;
  filter: blur(9px);
  animation: streak 6s linear infinite;
}

@keyframes streak {
  from { background-position: 0 0; }
  to { background-position: -1400px 0; }
}

.ph--dusk {
  --ph:
    radial-gradient(55% 45% at 72% 32%, rgba(222, 170, 116, 0.8), transparent 70%),
    radial-gradient(40% 35% at 30% 22%, rgba(250, 214, 168, 0.35), transparent 70%),
    radial-gradient(60% 55% at 18% 82%, rgba(54, 40, 30, 0.95), transparent 70%),
    linear-gradient(180deg, #3a2a1d, #120d09);
}

.ph--stone {
  --ph:
    radial-gradient(55% 50% at 62% 38%, rgba(226, 218, 210, 0.95), transparent 70%),
    radial-gradient(40% 45% at 18% 80%, rgba(110, 98, 90, 0.9), transparent 70%),
    radial-gradient(30% 30% at 88% 84%, rgba(160, 146, 136, 0.8), transparent 70%),
    linear-gradient(180deg, #a59990, #4a423c);
}

.ph--blue {
  --ph:
    radial-gradient(55% 40% at 28% 28%, rgba(132, 150, 172, 0.6), transparent 70%),
    radial-gradient(4% 3% at 64% 58%, rgba(255, 220, 170, 0.9), transparent 70%),
    radial-gradient(3% 2.5% at 71% 61%, rgba(255, 214, 160, 0.8), transparent 70%),
    radial-gradient(60% 50% at 80% 80%, rgba(24, 30, 42, 0.95), transparent 70%),
    linear-gradient(180deg, #27303c, #0b0d12);
}

.ph--city {
  --ph:
    radial-gradient(3% 2% at 22% 62%, rgba(255, 222, 176, 0.9), transparent 70%),
    radial-gradient(2.5% 2% at 38% 55%, rgba(255, 230, 196, 0.85), transparent 70%),
    radial-gradient(3% 2.5% at 57% 66%, rgba(255, 210, 150, 0.85), transparent 70%),
    radial-gradient(2% 1.5% at 74% 58%, rgba(255, 236, 206, 0.8), transparent 70%),
    radial-gradient(70% 35% at 50% 20%, rgba(70, 66, 60, 0.6), transparent 70%),
    linear-gradient(180deg, #1a1916, #070706);
}

.ph--sand {
  --ph:
    radial-gradient(60% 50% at 40% 30%, rgba(236, 222, 200, 0.95), transparent 70%),
    radial-gradient(50% 40% at 82% 70%, rgba(178, 150, 120, 0.85), transparent 70%),
    radial-gradient(40% 40% at 12% 88%, rgba(120, 98, 76, 0.85), transparent 70%),
    linear-gradient(180deg, #c8b49a, #6e5a46);
}

.ph--slate {
  --ph:
    radial-gradient(55% 45% at 68% 34%, rgba(160, 182, 180, 0.6), transparent 70%),
    radial-gradient(50% 50% at 18% 80%, rgba(46, 62, 62, 0.9), transparent 70%),
    linear-gradient(180deg, #5a7574, #2f403f);
}

.ph--soil {
  --ph:
    radial-gradient(45% 40% at 70% 40%, rgba(150, 122, 92, 0.55), transparent 70%),
    radial-gradient(50% 50% at 20% 70%, rgba(40, 32, 22, 0.95), transparent 70%),
    linear-gradient(180deg, #241d14, #0c0a06);
}

/* --------------------------------------------------------------------------
   Apparitions
   -------------------------------------------------------------------------- */

.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}

.js .reveal.is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Petits écrans
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .columns,
  .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .project-intro { grid-template-columns: minmax(0, 1fr); }
  .gallery__row { grid-template-columns: minmax(0, 1fr); }
  .gallery__row--reels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contact-grid p { line-height: 2; } /* liens de contact plus faciles à toucher */
}

@media (max-width: 520px) {
  .display br { display: none; }
  .display br.keep { display: inline; }
}

/* --------------------------------------------------------------------------
   Mouvement réduit
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ph::before,
  .ph::after { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .monogram span { transition: none; }
}