/* ==========================================================================
   Rebbati Studio — feuille de styles principale
   Les couleurs, polices et courbes d'animation sont centralisées ci-dessous.
   ========================================================================== */

/* ---------- Polices (hébergées sur le site, dossier assets/fonts) ----------
   EB Garamond et DM Mono, licence SIL Open Font License. Fichiers « latin » (français)
   et « latin-ext » (caractères accentués plus rares) : le navigateur ne télécharge que
   ceux dont la page a besoin. */

@font-face {
  font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/dm-mono-normal-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/dm-mono-normal-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/dm-mono-normal-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/dm-mono-normal-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'EB Garamond'; font-style: italic; font-weight: 400 600; font-display: swap;
  src: url("../fonts/eb-garamond-italic-400-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'EB Garamond'; font-style: italic; font-weight: 400 600; font-display: swap;
  src: url("../fonts/eb-garamond-italic-400-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'EB Garamond'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../fonts/eb-garamond-normal-400-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'EB Garamond'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../fonts/eb-garamond-normal-400-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #f2efe9;          /* papier */
  --ink: #141210;         /* texte */
  --dark: #16130f;        /* fonds sombres */
  --muted: #5d5750;       /* libellés sur fond clair */
  --muted-dark: #a9a196;  /* libellés sur fond sombre */
  --soft: #d9d2c6;        /* texte secondaire sur fond sombre */
  --text-2: #3d3832;      /* texte secondaire sur fond clair */
  --placeholder: #e4dfd6; /* fond des images en chargement */
  --accent: oklch(0.6 0.2 28);
  --line: rgba(20, 18, 16, .15);
  --line-dark: rgba(242, 239, 233, .16);

  --serif: 'EB Garamond', Garamond, 'Times New Roman', serif;
  --mono: 'DM Mono', ui-monospace, Menlo, monospace;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-io: cubic-bezier(.77, 0, .18, 1);
  --gutter: 28px;
}

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

html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; transition: opacity .3s ease; }
a:hover { opacity: .7; }
::selection { background: var(--ink); color: var(--bg); }
input, textarea, select, button { font: inherit; }
picture { display: contents; }
em { font-style: italic; }
h1, h2, h3 { font-weight: 400; }

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

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 14px; background: var(--ink); color: var(--bg);
  font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
}
.skip-link:focus { top: 12px; }

.label {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}
.on-dark .label, .label--dark { color: var(--muted-dark); }

.link-line {
  justify-self: start;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding-bottom: 6px;
  border-bottom: 1px solid currentColor;
}

.dot {
  display: inline-block;
  width: .15em; height: .15em;
  border-radius: 50%;
  background: var(--accent);
  align-self: center;
  flex: none;
}

/* ---------- Animations d'entrée ----------
   Les éléments sont masqués seulement si le JavaScript est actif (classe .js),
   puis révélés au chargement (.is-loaded) ou au défilement (.is-in).
   Réglages par élément : --d (délai) et --t (durée).

   Vitesse générale de l'arrivée de la page : les délais sont multipliés par
   --fx-delai et la durée des apparitions de texte par --fx-duree (1 = rythme de la
   maquette d'origine). Le texte arrive ainsi plus vite, ce qui compte aussi pour
   Google (le plus grand texte du premier écran doit s'afficher rapidement). */
:root { --fx-delai: .5; --fx-duree: .7; }

.js .fx-fade { opacity: 0; }
.fx-fade { transition: opacity calc(var(--t, 1.2s) * var(--fx-duree)) ease calc(var(--d, 0s) * var(--fx-delai)); }

.js .fx-rise { opacity: 0; transform: translateY(32px); }
.fx-rise {
  transition:
    opacity calc(var(--t, 1.4s) * var(--fx-duree)) ease calc(var(--d, 0s) * var(--fx-delai)),
    transform calc(var(--t, 1.4s) * var(--fx-duree)) var(--ease) calc(var(--d, 0s) * var(--fx-delai));
}

.js .fx-line { transform: translateY(110%); }
.fx-line { display: block; transition: transform calc(1.5s * var(--fx-duree)) var(--ease) calc(var(--d, .5s) * var(--fx-delai)); }

/* Photos : même avance, mais leur dévoilement garde sa lenteur */
.js .fx-print { clip-path: inset(100% 0 0 0); }
.js .fx-print--side { clip-path: inset(0 0 0 100%); }
.fx-print { transition: clip-path 1.6s var(--ease-io) calc(var(--d, .1s) * var(--fx-delai)); }
.js .fx-print img { transform: scale(1.15); }
.fx-print img { transition: transform 3s var(--ease) calc(var(--d, .1s) * var(--fx-delai)); }

.is-loaded .fx-fade { opacity: 1; }
.is-loaded .fx-rise { opacity: 1; transform: none; }
.is-loaded .fx-line { transform: none; }
.is-loaded .fx-print { clip-path: inset(0 0 0 0); }
.is-loaded .fx-print img { transform: none; }

/* Arrivée par le bas */
.js .fx-up { opacity: 0; transform: translateY(22vh); }
.fx-up { transition: transform 1.8s var(--ease) calc(var(--d, .1s) * var(--fx-delai)), opacity 1.2s ease calc(var(--d, .1s) * var(--fx-delai)); }
.is-loaded .fx-up { opacity: 1; transform: none; }

.js .rv { opacity: 0; transform: translateY(48px); }
.rv { transition: opacity var(--t, 1.3s) ease var(--d, 0s), transform var(--t, 1.3s) var(--ease) var(--d, 0s); }
.rv.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01s !important; transition-delay: 0s !important; animation: none !important; }
}

/* ---------- Grain argentique ---------- */

.grain {
  position: fixed; inset: 0; z-index: 45;
  pointer-events: none;
  opacity: .11;
  /* Grain noir : un mélange « multiply » donnerait exactement le même rendu, mais
     obligerait le navigateur à recalculer le mélange à chaque défilement. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}

/* ---------- En-tête ---------- */

.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  padding: 22px var(--gutter);
  color: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
}
.site-header--logo-left { grid-template-columns: auto 1fr; }
.site-header--logo-left .logo { justify-self: start; }

.site-header__contact,
.menu-toggle {
  padding: 6px 0 0;
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  pointer-events: auto;
}
.site-header__contact { justify-self: start; transition: opacity .4s ease; }
.menu-open .site-header__contact { opacity: 0; pointer-events: none; }
.back-link { display: inline-flex; align-items: baseline; }
.back-link:hover { opacity: 1; }
.back-link__arrow {
  display: inline-block; overflow: hidden; white-space: nowrap;
  max-width: 1.6em; padding-right: .5em;
  transition: max-width .5s var(--ease), padding .5s var(--ease), opacity .4s ease, transform .5s var(--ease);
}
@media (hover: hover) {
  .back-link__arrow { max-width: 0; padding-right: 0; opacity: 0; transform: translateX(.6em); }
  .back-link:hover .back-link__arrow, .back-link:focus-visible .back-link__arrow { max-width: 1.6em; padding-right: .5em; opacity: 1; transform: none; }
}
.menu-toggle { justify-self: end; background: none; border: 0; color: inherit; cursor: pointer; }
.menu-toggle__close { display: none; }
.menu-open .menu-toggle__open { display: none; }
.menu-open .menu-toggle__close { display: inline; }

.logo {
  pointer-events: auto;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.logo__name {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(30px, 3vw, 42px); line-height: 1;
  letter-spacing: .12em; padding-left: .12em;
}
.logo__sub {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .62em; padding-left: .62em;
}

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

.menu {
  position: fixed; inset: 0; z-index: 40;
  background: var(--dark); color: var(--bg);
  display: grid; grid-template-rows: 1fr auto; gap: 40px;
  padding: 120px var(--gutter) 26px;
  overflow: auto;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  pointer-events: none;
  transition: clip-path .85s var(--ease-io), visibility 0s .85s;
}
.menu-open .menu {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  pointer-events: auto;
  transition: clip-path .85s var(--ease-io), visibility 0s;
}
.menu__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 48px; }
.menu__nav { display: flex; flex-direction: column; }
.menu__link {
  display: flex; align-items: baseline; gap: 20px;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(50px, min(8.4vw, 15vh), 136px);
  line-height: 1.02; letter-spacing: -.01em;
  opacity: 0; transform: translateY(48px);
  transition: transform .9s var(--ease) var(--d, .25s), opacity .9s ease var(--d, .25s);
}
.menu-open .menu__link { opacity: 1; transform: none; }
.menu-open .menu__link:hover { opacity: .7; }
/* Focus au clavier seulement : un trait discret au lieu du cadre bleu du navigateur */
.menu a:focus { outline: none; }
.menu a:focus-visible { outline: 1px solid currentColor; outline-offset: 6px; }
.menu__num { font-family: var(--mono); font-size: 12px; letter-spacing: .15em; font-style: normal; }
.menu__side {
  display: grid; gap: 26px; justify-items: end; text-align: right;
  font-family: var(--mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  opacity: 0; transition: opacity .9s ease .6s;
}
.menu-open .menu__side { opacity: 1; }
.menu__photo {
  position: relative;
  width: clamp(160px, min(20vw, 32vh), 320px); aspect-ratio: 3/4;
  overflow: hidden; background: #2a2520;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.1s var(--ease-io) .35s;
}
.menu-open .menu__photo { clip-path: inset(0 0 0 0); }
.menu__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.menu__socials { display: flex; gap: 22px; }
.menu__faq { color: var(--muted-dark); }
.menu__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px;
  padding-top: 18px; border-top: 1px solid rgba(242, 239, 233, .18);
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted-dark);
}

/* Menu sur mobile : liens plus grands, photo et coordonnées alignées à gauche */
@media (max-width: 760px) {
  .menu__link { font-size: clamp(58px, 17vw, 84px); gap: 16px; }
  .menu__side { justify-items: start; text-align: left; }
  .menu__bottom > span:first-child { display: none; }
}

/* ---------- Accueil : hero ---------- */

.hero { position: relative; height: 100svh; min-height: 480px; overflow: hidden; background: var(--bg); }
.hero__layer {
  position: absolute; inset: 0; box-sizing: border-box;
  padding: 110px var(--gutter) clamp(28px, 6vh, 64px);
  display: grid; grid-template-rows: 1fr auto; grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  color: var(--ink);
  pointer-events: none;
}
.hero__layer--light { color: #fff; }
.hero__center {
  align-self: center; width: 100%;
  display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center;
  gap: clamp(14px, 2.4vh, 24px); text-align: center;
}
.hero__kicker { font-family: var(--mono); font-size: 12px; letter-spacing: .24em; text-transform: uppercase; }
.hero__title {
  margin: 0; width: 100%; min-width: 0;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(34px, 7vw, 170px); line-height: 1; letter-spacing: -.015em;
  text-align: center;
}
.hero__mask { display: block; overflow: hidden; padding-bottom: .26em; margin-bottom: -.14em; }
.hero__mask .fx-line { display: inline-block; white-space: nowrap; }
.hero__bottom {
  justify-self: stretch;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end; gap: 24px;
}
.hero__intro { margin: 0; max-width: 500px; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.45; text-wrap: pretty; }
.hero__scroll {
  pointer-events: auto;
  display: grid; justify-items: center; gap: 12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
}
.hero__cta {
  pointer-events: auto; justify-self: end; padding-bottom: 2px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap;
}
.hero__layer--light a { pointer-events: none; }

.scroll-line { position: relative; display: block; width: 1px; height: 56px; overflow: hidden; background: rgba(20, 18, 16, .2); }
.scroll-line::after {
  content: ""; position: absolute; inset: 0; background: var(--ink);
  animation: rbScroll 2.2s cubic-bezier(.65, 0, .35, 1) infinite;
}
.hero__layer--light .scroll-line { background: rgba(255, 255, 255, .35); }
.hero__layer--light .scroll-line::after { background: #fff; }
@keyframes rbScroll { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

.hero__stage { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; pointer-events: none; }
.hero__photo { position: relative; width: min(56vw, 108vh, 1080px); min-width: 280px; aspect-ratio: 3/2; will-change: transform; }
.hero__print { position: absolute; inset: 0; overflow: hidden; background: var(--dark); }
.hero__print img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 45%; display: block;
}
.hero__veil { position: absolute; inset: 0; background: rgba(12, 10, 8, .3); }
.hero__mirror-anchor { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.hero__mirror { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); }

/* Hero sur mobile : la photo passe en plein écran derrière le texte,
   titre en blanc sur plusieurs lignes, texte et lien centrés dessous. */
@media (max-width: 760px) {
  .hero__photo { width: 100%; height: 100%; min-width: 0; aspect-ratio: auto; }
  .hero__veil { background: linear-gradient(to bottom, rgba(12, 10, 8, .35), rgba(12, 10, 8, .5)); }
  .hero__layer {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    gap: clamp(28px, 5vh, 44px);
    padding: 110px 24px 9vh;
  }
  .hero__center { align-self: stretch; gap: 18px; }
  .hero__kicker { font-size: 10.5px; letter-spacing: .18em; }
  .hero__title { font-size: clamp(44px, 13.5vw, 84px); line-height: 1.02; }
  .hero__mask .fx-line { display: block; white-space: normal; text-wrap: balance; }
  .hero__bottom { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
  .hero__intro { max-width: 30ch; font-size: 19px; }
  /* Surtitre et texte d'accueil affichés d'emblée, sans fondu : c'est le plus grand
     texte du premier écran sur téléphone, celui que Google chronomètre (« Largest
     Contentful Paint »), et il n'est compté qu'à la fin d'un fondu. Le titre et la
     photo gardent leur animation. */
  .js .hero .fx-fade { opacity: 1; transition: none; }
  .hero__scroll { display: none; }
  .hero__cta { justify-self: auto; padding-bottom: 6px; border-bottom: 1px solid currentColor; }
}

/* ---------- Vignettes de reportage ---------- */

.tile { position: relative; display: block; overflow: hidden; background: var(--dark); }
a.tile { cursor: pointer; }
a.tile:hover { opacity: 1; }
.tile__media { position: absolute; top: -7%; bottom: -7%; left: 0; right: 0; }
.tile--grid .tile__media { top: -6%; bottom: -6%; }
.tile__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.8s var(--ease);
}
.tile:hover img { transform: scale(1.06); }
.tile__shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(14, 12, 10, .62), rgba(14, 12, 10, 0) 55%);
  transition: opacity .6s ease;
}
.tile__cap {
  position: absolute; left: 28px; right: 28px; bottom: 28px;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
  color: #f4f1ea; pointer-events: none;
}
.tile--sm .tile__cap { left: 24px; right: 24px; bottom: 24px; }
.tile__meta { display: grid; gap: 8px; min-width: 0; }
.tile__mask { overflow: hidden; }
/* Le cadre du titre descend sous la ligne pour ne pas couper les jambes (g, p, y),
   sans déplacer le texte (marge négative équivalente). */
.tile__mask--title { padding-bottom: calc(.08em + 9px); margin-bottom: -9px; }
.tile__kicker, .tile__more {
  display: block;
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  transition: transform .7s var(--ease);
}
.tile__more { white-space: nowrap; transition: transform .8s var(--ease) .12s; }
.tile__title {
  margin: 0;
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(32px, 3vw, 48px); line-height: 1;
  transition: transform .8s var(--ease) .06s;
}
.tile--sm .tile__title { font-size: clamp(28px, 2.4vw, 40px); }
.tile--xl .tile__title { font-size: clamp(36px, 4.2vw, 66px); }

/* Sur ordinateur, les légendes apparaissent au survol ; sur mobile, elles sont toujours visibles. */
@media (hover: hover) {
  .tile__shade { opacity: 0; }
  .tile__kicker, .tile__title, .tile__more { transform: translateY(115%); }
  .tile__title { transform: translateY(calc(115% + 9px)); }
  .tile:hover .tile__shade, .tile:focus-visible .tile__shade { opacity: 1; }
  .tile:hover :is(.tile__kicker, .tile__title, .tile__more),
  .tile:focus-visible :is(.tile__kicker, .tile__title, .tile__more) { transform: none; }
}

/* Portfolio : 3 vignettes par ligne, 2 sur tablette, 1 sur mobile */
.portfolio-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .portfolio-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Sections éditoriales ---------- */

.section-pad { padding: clamp(96px, 16vh, 180px) var(--gutter) clamp(96px, 14vh, 160px); }
.border-top { border-top: 1px solid var(--line); }

.statement {
  margin: 0 auto; max-width: 1300px;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(42px, 6.4vw, 108px); line-height: 1.06; letter-spacing: -.015em;
  text-align: center; text-wrap: balance;
}
/* Grande phrase plus large (moins de lignes), taille légèrement réduite */
.statement--wide { max-width: 1640px; font-size: clamp(38px, 5.8vw, 100px); }
.statement--lg { font-size: clamp(42px, 6.5vw, 116px); }
.prose--center { max-width: 760px; margin: 0 auto; text-align: center; justify-items: center; }
.prose--center .link-line { justify-self: center; }

.inline-photo {
  display: inline-block; position: relative;
  overflow: hidden; border-radius: .06em; vertical-align: -.05em;
  background: #d6d0c6;
}
.inline-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 2s var(--ease) var(--d, .3s);
}
.js .rv .inline-photo img { transform: scale(1.22); }
.rv.is-in .inline-photo img { transform: none; }

.prose { display: grid; gap: 22px; font-size: 21px; line-height: 1.55; text-wrap: pretty; }
.prose p { margin: 0; }
.prose .link-line { margin-top: 6px; }

/* L'expérience (album) */
.exp { padding: clamp(100px, 16vh, 190px) var(--gutter); border-top: 1px solid var(--line); }
.exp__inner { max-width: 1360px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 56px clamp(48px, 7vw, 130px); }
.exp__photo { flex: 1 1 340px; max-width: 560px; position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--placeholder); }
.exp__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.exp__text { flex: 1.3 1 420px; display: grid; gap: clamp(28px, 4vh, 40px); }
.exp__title {
  margin: 0; max-width: 12em;
  font-size: clamp(40px, 4.6vw, 80px); line-height: 1.04; letter-spacing: -.02em; text-wrap: balance;
}
.exp__lead { margin: 0; max-width: 560px; font-size: 21px; line-height: 1.55; text-wrap: pretty; }
.exp__list { display: grid; border-bottom: 1px solid var(--line); margin: 0; }
.exp__item {
  display: grid; grid-template-columns: minmax(150px, .8fr) minmax(0, 1.4fr);
  gap: 8px 28px; align-items: baseline;
  padding: 22px 0; border-top: 1px solid var(--line);
}
.exp__item-titre { margin: 0; font-style: italic; font-size: clamp(28px, 2.6vw, 40px); line-height: 1; }
.exp__item-texte { margin: 0; font-size: 19px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
/* Liste dans une demi-colonne (page Second shooter) : titre au-dessus du texte */
.exp__list--seul .exp__item { grid-template-columns: minmax(0, 1fr); gap: 12px; }

/* Points forts (page Second shooter) : une photo d'exemple par point, toutes au
   format 4:5. Sur ordinateur, la photo du paragraphe survolé apparaît à droite ;
   sur mobile, chaque photo est au-dessus de son paragraphe. */
.intro__photo.points__visuel { height: auto; min-height: 0; aspect-ratio: 4/5; width: min(100% - clamp(0px, calc(14vw - 80px), 170px), 64svh); justify-self: end; }
.intro__photo-inner.points__photos { background: var(--placeholder); }
.intro__photo img.points__photo { opacity: 0; transition: opacity .7s var(--ease); }
.intro__photo img.points__photo.is-active { opacity: 1; }
.points__item { transition: opacity .5s var(--ease); }
.points__vignette { display: none; position: relative; aspect-ratio: 4/5; margin-bottom: 10px; overflow: hidden; background: var(--placeholder); }
.points__vignette img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 861px) {
  .points__item:not(.is-active) { opacity: .45; }
  /* La photo part à hauteur du titre puis reste centrée dans l'écran pendant qu'on lit
     les paragraphes, jusqu'au bas de la section */
  .intro__photo.points__visuel { position: sticky; top: max(88px, 10svh); align-self: start; margin-top: clamp(40px, 9vh, 110px); }
  /* Espace sous le dernier paragraphe : la photo reste à côté de lui le temps de le lire */
  .points .intro__col { padding-bottom: max(140px, 40svh); }
}
@media (max-width: 860px) {
  .points .points__visuel { display: none; }
  .points__vignette { display: block; }
  .points .exp__item-titre { font-size: 36px; }
}

/* Matériel (page Second shooter) : un bloc par boîtier */
/* Colonne unique à la largeur disponible : sinon la grille des colonnes de listes
   peut élargir la section sur mobile et faire déborder la page */
.materiel-section { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(56px, 9vh, 110px); }
.galerie-titre { padding-bottom: clamp(56px, 9vh, 110px); }
/* Mobile : sections de la page Second shooter plus resserrées */
@media (max-width: 860px) {
  .materiel-section { padding-top: 72px; padding-bottom: 72px; gap: 48px; }
  .galerie-titre { padding-top: 72px; padding-bottom: 40px; }
}
.materiel {
  width: 100%; max-width: 1360px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 48px clamp(28px, 4vw, 64px);
}
.materiel__bloc { display: grid; gap: 22px; align-content: start; padding-top: 22px; border-top: 1px solid var(--line); }
.materiel__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: clamp(26px, 2.4vw, 38px); line-height: 1.1; }
.materiel__liste li:first-child { font-style: italic; }

/* ---------- Formulaire de contact ---------- */

.on-dark { background: var(--dark); color: var(--bg); }
.contact-grid {
  max-width: 1360px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: 72px 96px; align-items: start;
}
.contact-title {
  margin: 0; font-size: clamp(48px, 6.2vw, 104px); line-height: 1; letter-spacing: -.015em; text-wrap: balance;
}
.contact-intro, .contact-head, .contact-infos { display: grid; gap: 32px; align-content: start; }
/* Une seule colonne (mobile, tablette) : les coordonnées passent sous le formulaire */
@media (max-width: 1031px) {
  .contact-intro { display: contents; }
  .contact-infos { order: 2; }
}
/* Coordonnées (page Contact) sur petit écran : libellés plus étroits, et l'email peut
   passer à la ligne plutôt que de faire déborder la page */
.contact-infos dd { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 420px) {
  .contact-infos dl > div { grid-template-columns: 84px minmax(0, 1fr) !important; }
}
.contact-plein { min-height: 100svh; box-sizing: border-box; }
.contact-lead { margin: 0; max-width: 440px; font-size: 21px; line-height: 1.55; color: var(--soft); text-wrap: pretty; }

.contact-form {
  --f-fg: var(--bg); --f-line: rgba(242, 239, 233, .3); --f-muted: var(--muted-dark);
  --f-ph: rgba(242, 239, 233, .38); --f-scheme: dark; --f-core: #e8e3da; --f-opt-bg: var(--dark);
}
.contact-form--light {
  --f-fg: var(--ink); --f-line: rgba(20, 18, 16, .25); --f-muted: var(--muted);
  --f-ph: rgba(20, 18, 16, .35); --f-scheme: light; --f-core: var(--ink); --f-opt-bg: var(--bg);
}
.form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 34px 32px; }
.field { display: grid; gap: 10px; }
.field--full { grid-column: 1 / -1; }
.field__label { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--f-muted); }
.field__input {
  background: transparent; border: 0; border-radius: 0;
  border-bottom: 1px solid var(--f-line);
  padding: 8px 0 12px;
  color: var(--f-fg);
  font-family: var(--serif); font-size: 23px;
  outline: none; color-scheme: var(--f-scheme);
  transition: border-color .3s;
}
.field__input:focus { border-bottom-color: var(--f-fg); }
.field__input::placeholder { color: var(--f-ph); }
textarea.field__input { line-height: 1.45; resize: vertical; }
.form__foot {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 24px; padding-top: 10px;
}
.form__note { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--f-muted); }
.form__error { grid-column: 1 / -1; margin: 0; font-size: 19px; line-height: 1.5; color: var(--f-fg); }
.form__error a { text-decoration: underline; }
.form [hidden] { display: none; }

.send-btn { display: flex; align-items: center; gap: 20px; background: none; border: 0; padding: 0; color: var(--f-fg); cursor: pointer; }
.send-btn:disabled { opacity: .5; cursor: progress; }
.send-btn__label { font-family: var(--serif); font-style: italic; font-size: 32px; line-height: 1; }
.send-btn__ring {
  width: 58px; height: 58px; border-radius: 50%;
  border: 1px solid var(--f-line);
  display: grid; place-items: center; flex: none;
  transition: transform .9s var(--ease);
}
.send-btn__core {
  width: 38px; height: 38px; border-radius: 50%; background: var(--f-core);
  display: grid; place-items: center;
  transition: transform .25s ease;
}
.send-btn__core::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.send-btn:hover .send-btn__ring, .send-btn:focus-visible .send-btn__ring { transform: rotate(180deg); }
.send-btn:hover .send-btn__core, .send-btn:focus-visible .send-btn__core { transform: scale(.86); }

.form-thanks {
  display: grid; gap: 22px; align-content: center;
  min-height: 420px; border-top: 1px solid var(--f-line); padding-top: 40px;
}
.form-thanks[hidden] { display: none; }
.form-thanks:focus { outline: none; }
.form-thanks__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }
.form-thanks__title { margin: 0; font-size: clamp(36px, 3.8vw, 58px); line-height: 1.08; letter-spacing: -.01em; }

/* ---------- FAQ ---------- */

.faq__list { border-bottom: 1px solid rgba(20, 18, 16, .18); }
.faq__item { border-top: 1px solid rgba(20, 18, 16, .18); }
.faq__item h2 { margin: 0; font-size: 1.17em; }
.faq__q {
  width: 100%;
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 20px; align-items: baseline; gap: 16px;
  padding: 26px 0; background: none; border: 0; text-align: left; cursor: pointer; color: inherit;
}
.faq__n { font-family: var(--mono); font-size: 12px; letter-spacing: .15em; color: var(--muted); }
/* Le numéro est affiché par CSS : il ne fait pas partie du texte de la question */
.faq__n::before { content: attr(data-n); }
.faq__text { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.4vw, 36px); line-height: 1.15; letter-spacing: -.005em; text-wrap: pretty; }
.faq__icon { position: relative; width: 16px; height: 16px; align-self: center; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; background: var(--ink); }
.faq__icon::before { left: 0; right: 0; top: 50%; height: 1px; }
.faq__icon::after { top: 0; bottom: 0; left: 50%; width: 1px; transition: transform .5s var(--ease); }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: rotate(90deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a-inner { overflow: hidden; display: grid; grid-template-columns: 44px minmax(0, 1fr) 20px; gap: 16px; }
.faq__a p {
  grid-column: 2; margin: 0 0 30px; max-width: 640px;
  font-size: 20px; line-height: 1.55; color: var(--text-2); text-wrap: pretty;
  opacity: 0; transition: opacity .5s ease;
}
.faq__item.is-open .faq__a p { opacity: 1; }

/* ---------- Pied de page ---------- */

.site-footer { padding: 64px var(--gutter) 28px; display: grid; gap: 56px; overflow: hidden; }
.site-footer__cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 32px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; line-height: 1.9;
}
.site-footer__col { display: grid; align-content: start; justify-items: start; }
.site-footer__head { color: var(--muted); }
.site-footer__big {
  font-family: var(--serif); font-weight: 400;
  font-size: 19vw; line-height: .82; letter-spacing: -.01em;
  text-align: center; white-space: nowrap;
}
.site-footer__mask { overflow: hidden; }
.site-footer__bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 32px;
  padding-top: 16px; border-top: 1px solid rgba(20, 18, 16, .18);
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted);
}
.site-footer__studio { display: flex; align-items: center; gap: 12px; }
.site-footer__studio::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.site-footer__legal { display: flex; gap: 24px; }

/* ---------- Pages simples (mentions légales, 404…) ---------- */

.page-simple { padding: clamp(150px, 22vh, 220px) var(--gutter) clamp(90px, 12vh, 140px); }
.page-simple__inner { max-width: 760px; margin: 0 auto; display: grid; gap: 28px; }
.page-simple h1 { margin: 0; font-size: clamp(48px, 6vw, 96px); line-height: 1; letter-spacing: -.02em; }
.page-simple h2 { margin: 24px 0 0; font-size: 30px; line-height: 1.15; }
.page-simple p, .page-simple li { margin: 0; font-size: 20px; line-height: 1.55; color: var(--text-2); }
.page-simple ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.page-simple a:not(.link-line) { text-decoration: underline; text-underline-offset: 3px; }
.todo { background: #f6e3a8; color: var(--ink); padding: 0 .2em; }

/* ---------- Page reportage ----------
   Sur grand écran : galerie horizontale (.rail) pilotée par la molette.
   Sur mobile ou petite hauteur : galerie verticale (.stack). */

.rail, .rail-ui, .rail-follow, .credits, .credits-backdrop { display: none; }

@media (min-width: 820px) and (min-height: 520px) {
  .page-reportage { overflow: hidden; }
  .page-reportage .stack,
  .page-reportage .site-footer { display: none; }
  .rail, .rail-ui { display: flex; }
  .rail-follow, .credits, .credits-backdrop { display: block; }
}

.rail {
  position: fixed; inset: 0;
  align-items: stretch; gap: clamp(56px, 7vw, 120px);
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; overscroll-behavior: contain;
  background: var(--bg);
}
.rail::-webkit-scrollbar { display: none; }
.rail__intro {
  flex: 0 0 calc(50vw - clamp(56px, 7vw, 120px)); box-sizing: border-box;
  padding: clamp(84px, 14vh, 110px) var(--gutter) clamp(64px, 10vh, 90px);
  display: flex; flex-direction: column; justify-content: safe center; align-items: center; text-align: center;
  gap: clamp(14px, 2.6vh, 30px);
  overflow-y: auto; scrollbar-width: none;
}
.rail__title {
  flex: none; margin: 0 0 -.16em; overflow: hidden; padding-bottom: .24em;
  font-weight: 400; font-size: clamp(40px, min(4.4vw, 8vh), 80px); line-height: .95; letter-spacing: -.02em;
}
/* Le cadre est plus haut (jambes des lettres) : le titre part de plus bas avant d'apparaître */
.js .rail__title .fx-line { transform: translateY(130%); }
.is-loaded .rail__title .fx-line { transform: none; }
/* Texte du reportage (facultatif), sous le titre et le lieu */
.rail__texte { flex: none; display: grid; gap: 14px; max-width: 30em; font-size: 17px; line-height: 1.6; color: var(--text-2); text-wrap: pretty; }
.rail__texte p { margin: 0; }
.rail__cover { flex: 0 0 50vw; height: 100%; margin: 0; position: relative; overflow: hidden; background: var(--dark); }
.rail__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.rail__shot { flex: none; height: calc(100% - 260px); margin: 140px 0 120px; background: var(--placeholder); overflow: hidden; }
.rail__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rail__end {
  flex: 0 0 auto; box-sizing: border-box;
  padding: 0 clamp(100px, 12vw, 200px) 0 clamp(40px, 6vw, 120px);
  display: flex; align-items: center;
}
.rail__next {
  display: block; padding: 40px 0;
  font-weight: 400; line-height: .95; letter-spacing: -.02em;
  font-size: clamp(56px, min(6.5vw, 12vh), 120px); white-space: nowrap;
}

.rail-follow {
  position: fixed; left: 0; top: 0; z-index: 35;
  width: clamp(160px, 14vw, 240px); aspect-ratio: 3/4;
  pointer-events: none; will-change: transform;
}
.rail-follow__inner {
  position: absolute; inset: 0; overflow: hidden; background: var(--dark);
  opacity: 0; transform: scale(.7);
  transition: opacity .45s ease, transform .6s var(--ease);
}
.rail-follow.is-on .rail-follow__inner { opacity: 1; transform: none; }
.rail-follow img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.rail-ui {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; box-sizing: border-box;
  justify-content: space-between; align-items: flex-end; gap: 24px;
  padding: 14px var(--gutter) 18px;
  color: #fff; mix-blend-mode: difference;
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
}
.rail-ui__credits {
  background: none; border: 0; padding: 6px 0 0; color: inherit; cursor: pointer;
  font-family: var(--mono); font-size: 15px; letter-spacing: .18em; text-transform: uppercase;
}

.dial {
  position: relative; width: 170px; height: 46px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 28%, #000 72%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 28%, #000 72%, transparent);
}
.dial__mark { position: absolute; left: 50%; top: 1px; transform: translateX(-50%); overflow: visible; }
.dial__wheel { position: absolute; left: 50%; top: 72px; width: 0; height: 0; will-change: transform; }
.dial__tick { position: absolute; left: 0; top: 0; width: 1px; height: 4px; background: #fff; transform-origin: 0 0; }
.dial__tick--major { height: 8px; }
.dial__num {
  position: absolute; left: 0; top: 0; width: 22px; text-align: center;
  font-size: 11px; line-height: 11px; letter-spacing: 0; transform-origin: 0 0;
}

.credits-backdrop {
  position: fixed; inset: 0; z-index: 44; background: rgba(14, 12, 10, .4);
  opacity: 0; pointer-events: none; transition: opacity .5s ease;
}
.credits {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 46; box-sizing: border-box;
  background: var(--dark); color: var(--bg);
  padding: 26px var(--gutter) 34px;
  transform: translateY(101%); visibility: hidden;
  transition: transform .7s var(--ease-io), visibility 0s .7s;
}
.credits-open .credits { transform: none; visibility: visible; transition: transform .7s var(--ease-io), visibility 0s; }
.credits-open .credits-backdrop { opacity: 1; pointer-events: auto; }
.credits__head {
  display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
}
.credits__head button {
  background: none; border: 0; padding: 0; color: inherit; cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
}
.credits__list { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 32px; }
.credits__list > div { display: grid; gap: 6px; padding: 14px 0; border-top: 1px solid var(--line-dark); }
.credits__list dt { font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted-dark); }
.credits__list dd { margin: 0; font-size: 20px; }
.credits__list--light { grid-template-columns: 1fr; color: var(--ink); }
.credits__list--light > div { border-top-color: var(--line); }
.credits__list--light dt { color: var(--muted); }

/* ---------- Page À propos ---------- */

/* Intro : photo haute qui s'arrête au milieu de l'écran, nom et texte à droite.
   La photo arrive du bas puis défile moins vite que la page (initDrift, main.js). */
.intro { position: relative; display: grid; grid-template-columns: 50% 50%; }
.intro__photo { position: relative; margin-left: clamp(0px, calc(14vw - 80px), 170px); height: 80svh; min-height: 440px; will-change: transform; }
/* Au chargement, le portrait démarre sous le logo ; il remonte ensuite avec le défilement */
.intro:first-of-type .intro__photo { margin-top: clamp(100px, 13vh, 150px); }
.intro__photo-inner { position: absolute; inset: 0; overflow: hidden; background: var(--dark); }
.intro__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.intro__col {
  box-sizing: border-box;
  padding: 0 clamp(28px, 5vw, 96px) clamp(80px, 12vh, 140px) clamp(28px, 3.5vw, 64px);
  display: grid; align-content: start;
}
.intro__head {
  padding-top: clamp(110px, 15vh, 170px);
  display: grid; gap: 18px; justify-items: start;
}
/* Titre + sous-titre dans la même balise de titre, disposés comme deux lignes séparées */
.intro__heading { margin: 0; display: grid; gap: 18px; justify-items: start; }
.intro__title { margin: 0; font-size: clamp(40px, 5.2vw, 112px); line-height: 1; letter-spacing: .02em; white-space: nowrap; }
/* Titre plus long (page Second shooter) : passe sur deux lignes plutôt que de déborder */
.intro__title--long { white-space: normal; text-wrap: balance; }
.intro__text {
  margin-top: clamp(48px, 9vh, 110px);
  padding-left: clamp(0px, 4vw, 80px);
  display: grid; gap: 22px; max-width: 36em;
}
.intro__text p { margin: 0; font-size: clamp(19px, 1.45vw, 23px); line-height: 1.55; text-wrap: pretty; }
.intro__text .link-line { margin-top: 6px; }
.intro__text .intro__quote { font-size: clamp(28px, 2.4vw, 42px); line-height: 1.1; letter-spacing: -.01em; text-wrap: balance; }

/* Variante miroir (section L'approche) : photo à droite, texte à gauche */
.intro + .intro { margin-top: clamp(40px, 8vh, 100px); }
.intro--inverse { min-height: 115svh; }
.intro--inverse .intro__photo { grid-column: 2; grid-row: 1; margin-left: 0; margin-right: clamp(0px, calc(14vw - 80px), 170px); }
.intro--inverse .intro__col {
  grid-column: 1; grid-row: 1;
  /* le titre s'aligne sur le bord du portrait de la section du dessus */
  padding-left: clamp(28px, calc(14vw - 80px), 170px); padding-right: clamp(28px, 3.5vw, 64px);
}
.intro--inverse .intro__head { padding-top: clamp(40px, 9vh, 110px); }

/* Photo qui arrive du bas quand on l'atteint en défilant */
.js .rv.rv--up { transform: translateY(22vh); }
.js .rv.rv--up.is-in { transform: none; }
.rv--up { --t: 1.8s; }

@media (max-width: 860px) {
  .intro { grid-template-columns: minmax(0, 1fr); }
  .intro--inverse { min-height: 0; }
  .intro--inverse .intro__photo { grid-column: 1; grid-row: 1; margin: 0; }
  .intro--inverse .intro__col { grid-column: 1; grid-row: 2; padding: 40px var(--gutter) 64px; }
  .intro--inverse .intro__head { padding-top: 0; }
  .intro__photo { margin: 0; height: auto; min-height: 0; aspect-ratio: 4/5; }
  .intro:first-of-type .intro__photo { margin-top: 96px; }
  .intro__col { padding: 40px var(--gutter) 64px; }
  .intro__head { position: static; padding: 0; }
  .intro__text { margin-top: 40px; padding: 0; }
}

/* Reportage sur mobile : couverture plein écran, assombrie, titre blanc centré */
.stack__hero { position: relative; height: 100svh; min-height: 480px; overflow: hidden; background: var(--dark); color: #fff; }
.stack__hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.stack__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(12, 10, 8, .72), rgba(12, 10, 8, .42) 28%, rgba(12, 10, 8, .45)); }
.stack__hero-text {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-content: center; justify-items: center; gap: 18px;
  padding: 0 24px; text-align: center;
}
/* Texte du reportage sur mobile : sous le titre et le lieu, sur la photo d'ouverture.
   Si le texte est long, l'écran d'ouverture s'allonge au lieu de couper le texte. */
.stack__hero--texte { height: auto; min-height: 100svh; }
.stack__hero--texte .stack__hero-text { position: relative; min-height: 100svh; box-sizing: border-box; padding: 110px 24px 96px; }
.stack__texte {
  display: grid; gap: 14px; max-width: 34em; margin-top: 6px;
  font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .9); text-wrap: pretty;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .35); /* lisible même sur une partie claire de la photo */
}
.stack__texte p { margin: 0; }
/* Pied de page des reportages : seulement le grand logo et la barre du bas */
.page-reportage .site-footer__cols { display: none; }
/* Reportages sur mobile : le retour au portfolio passe en bas à droite, fixe */
.back-mobile { display: none; }
@media (max-width: 819px), (max-height: 519px) {
  .site-header .back-link { display: none; }
  /* Logo en haut à gauche, comme sur les autres pages */
  .site-header:not(.site-header--logo-left) { grid-template-columns: auto 1fr; }
  .site-header:not(.site-header--logo-left) .logo { justify-self: start; }
  .back-mobile {
    display: block; position: fixed; right: var(--gutter); bottom: 22px; z-index: 50;
    color: #fff; mix-blend-mode: difference;
    font-family: var(--mono); font-size: 18px; letter-spacing: .18em; text-transform: uppercase;
  }
}

/* Pas de pied de page sur mobile */
@media (max-width: 760px) {
  .site-footer { display: none; }
}

/* Grandes phrases sur mobile : titre plus présent, paragraphe un peu plus discret */
@media (max-width: 760px) {
  .statement--wide { font-size: clamp(46px, 13.5vw, 64px); line-height: 1.04; }
  .prose--center { font-size: 18px; }
}

/* ---------- WordPress ----------
   Réponses de la FAQ saisies dans l'éditeur : tout le contenu reste dans la colonne du texte. */
.faq__a-inner > * { grid-column: 2; }
.faq__a-inner > :not(p) { margin: 0 0 30px; max-width: 640px; font-size: 20px; line-height: 1.55; color: var(--text-2); }

/* ---------- WPForms ----------
   Quand un formulaire WPForms remplace celui du thème (inc/wpforms.php), il reprend
   exactement le même design. Réglage WPForms requis : « Aucun style ». */
.contact-form--wpforms .wpforms-container, .contact-form--wpforms .wpforms-form { margin: 0; padding: 0; }
.contact-form--wpforms .wpforms-form { display: grid; gap: 34px; }
.contact-form--wpforms .wpforms-field-container {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 34px 32px;
}
.contact-form--wpforms .wpforms-field { display: grid; gap: 10px; margin: 0; padding: 0; }
.contact-form--wpforms .wpforms-field.field--full { grid-column: 1 / -1; }
.contact-form--wpforms .wpforms-field-label {
  margin: 0; font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--f-muted);
}
.contact-form--wpforms .wpforms-required-label { display: none; }
.contact-form--wpforms .wpforms-field input, .contact-form--wpforms .wpforms-field textarea {
  margin: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none;
  border-bottom: 1px solid var(--f-line);
  padding: 8px 0 12px;
  color: var(--f-fg);
  font-family: var(--serif); font-size: 23px;
  outline: none; color-scheme: var(--f-scheme);
  transition: border-color .3s;
}
.contact-form--wpforms .wpforms-field input:focus, .contact-form--wpforms .wpforms-field textarea:focus { border-bottom-color: var(--f-fg); }
.contact-form--wpforms .wpforms-field input::placeholder, .contact-form--wpforms .wpforms-field textarea::placeholder { color: var(--f-ph); }
.contact-form--wpforms .wpforms-field textarea { height: 5.8em; line-height: 1.45; resize: vertical; }

/* Erreurs */
.contact-form--wpforms .wpforms-field .wpforms-error:is(input, textarea) { border-bottom-color: var(--accent); }
.contact-form--wpforms :is(em, label).wpforms-error {
  font-family: var(--mono); font-size: 11px; font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
}
.contact-form--wpforms .wpforms-error-container, .contact-form--wpforms .wpforms-error-noscript { margin: 0; font-size: 19px; line-height: 1.5; color: var(--f-fg); }

/* Bas du formulaire : note à gauche, bouton avec son cercle à droite */
.contact-form--wpforms .wpforms-submit-container {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 24px; margin: 0; padding: 10px 0 0;
}
.contact-form--wpforms .wpforms-submit-spinner { display: none !important; }
.contact-form--wpforms .wpforms-submit {
  position: relative; display: flex; align-items: center; min-height: 60px;
  margin: 0; padding: 0 80px 0 0; background: none; border: 0; border-radius: 0; box-shadow: none;
  color: var(--f-fg); cursor: pointer;
  font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 32px; line-height: 1;
}
.contact-form--wpforms .wpforms-submit:disabled { opacity: .5; cursor: progress; }
.contact-form--wpforms .wpforms-submit::after {
  content: ""; position: absolute; right: 0; top: 50%; width: 58px; height: 58px; margin-top: -30px;
  border: 1px solid var(--f-line); border-radius: 50%;
  transition: transform .9s var(--ease);
}
.contact-form--wpforms .wpforms-submit::before {
  content: ""; position: absolute; right: 11px; top: 50%; z-index: 1; width: 38px; height: 38px; margin-top: -19px;
  border-radius: 50%; background: radial-gradient(circle, var(--accent) 0 5px, var(--f-core) 5.5px);
  transition: transform .25s ease;
}
.contact-form--wpforms .wpforms-submit:is(:hover, :focus-visible)::after { transform: rotate(180deg); }
.contact-form--wpforms .wpforms-submit:is(:hover, :focus-visible)::before { transform: scale(.86); }

/* Message de remerciement */
.contact-form--wpforms :is(.wpforms-confirmation-container, .wpforms-confirmation-container-full) {
  display: grid; gap: 22px; align-content: center;
  min-height: 420px; margin: 0; padding: 40px 0 0;
  background: none; border: 0; border-top: 1px solid var(--f-line); color: inherit;
}
.contact-form--wpforms :is(.wpforms-confirmation-container, .wpforms-confirmation-container-full) p { margin: 0; }
.contact-form--wpforms .form-thanks__text { font-size: 12px; letter-spacing: .16em; color: var(--f-muted); }