/* ——— Reset ——— */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

@font-face { font-family: 'Syne'; src: url('fonts/syne-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Syne'; src: url('fonts/syne-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('fonts/outfit-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('fonts/outfit-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }

html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  font-family: var(--police-corps);
  font-weight: 400;
  font-size: var(--texte);
  line-height: 1.6;
  color: var(--blanc);
  background: var(--noir);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; text-align: inherit; }
:focus-visible { outline: 2px solid var(--rouge); outline-offset: 3px; }
::selection { background: var(--rouge); color: var(--blanc); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip {
  position: fixed; top: -100%; left: var(--marge); z-index: 999;
  padding: var(--s-2) var(--s-4);
  background: var(--rouge); color: var(--blanc); border-radius: var(--rayon);
  font-weight: 500;
}
.skip:focus { top: var(--s-2); }

/* ——— Bandeau ——— */
.bandeau {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-bandeau);
  padding: var(--s-1) var(--s-4);
  background: var(--rouge); color: var(--blanc);
  font-size: var(--texte-xs); font-weight: 500;
  text-align: center; letter-spacing: 0.04em; text-transform: uppercase;
}

/* ——— Curseur ——— */
.curseur {
  display: none; position: fixed; top: 0; left: 0; z-index: var(--z-curseur);
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--blanc); pointer-events: none;
  mix-blend-mode: difference;
  display: none; align-items: center; justify-content: center;
  transition: width 0.35s var(--ease-out), height 0.35s var(--ease-out), background 0.2s;
  will-change: transform;
}
.curseur__txt {
  font-family: var(--police-titre); font-weight: 700;
  font-size: var(--texte-xs); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--noir); opacity: 0; transition: opacity 0.2s;
}
.curseur.actif { width: 40px; height: 40px; }
.curseur.etiquette {
  width: 88px; height: 88px; mix-blend-mode: normal;
  background: var(--blanc);
}
.curseur.etiquette .curseur__txt { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .curseur { display: flex; }
  .js body, .js a, .js button, .js [data-curseur] { cursor: none; }
}

/* ——— Layout ——— */
.large {
  width: 100%;
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding-left: var(--marge);
  padding-right: var(--marge);
}
.section { padding: var(--section) 0; position: relative; }
.section--noir { background: var(--noir); color: var(--blanc); }
.section--blanc { background: var(--blanc); color: var(--noir); }
.section--rouge { background: var(--rouge); color: var(--blanc); }

.titre-geant {
  font-family: var(--police-titre); font-weight: 800;
  font-size: var(--titre-geant);
  text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.92;
  text-wrap: balance;
}
.titre-lg {
  font-family: var(--police-titre); font-weight: 800;
  font-size: var(--titre-lg);
  text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.95;
}
.etiquette {
  font-family: var(--police-titre); font-weight: 700;
  font-size: var(--texte-xs); letter-spacing: 0.16em; text-transform: uppercase;
  margin-bottom: var(--s-4);
}
.etiquette--grande { font-size: var(--texte-sm); margin-bottom: var(--s-8); }

/* ——— Reveal ——— */
[data-reveal] { opacity: 1; }
.js [data-reveal] {
  opacity: 0; transform: translateY(24px);
  transition: opacity var(--duree) var(--ease-out), transform var(--duree) var(--ease-out);
}
.js [data-reveal].vu { opacity: 1; transform: translateY(0); }

/* ——— Split mots ——— */
.mot { display: inline-block; overflow: hidden; vertical-align: top; padding-block: 0.08em; margin-block: -0.08em; }
.mot-inner { display: inline-block; will-change: transform; }
.animer .mot-inner { transform: translateY(110%); }

/* ——— En-tête ——— */
.entete {
  position: fixed; top: 28px; left: 0; right: 0; z-index: var(--z-entete);
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-4) var(--marge);
  color: var(--blanc);
  mix-blend-mode: difference;
  transition: padding 0.4s var(--ease-out);
}
.entete.compact { padding-block: var(--s-2); }
.entete.sur-rouge { mix-blend-mode: normal; }
.entete__logo {
  font-family: var(--police-titre); font-weight: 800;
  font-size: var(--texte-lg); text-transform: uppercase; letter-spacing: -0.02em;
}
.entete__nav { display: none; }
.entete__nav ul { display: flex; gap: var(--s-8); }
.entete__nav a, .menu__insta {
  font-family: var(--police-titre); font-weight: 700;
  font-size: var(--texte-xs); text-transform: uppercase; letter-spacing: 0.14em;
  position: relative; padding-block: var(--s-1);
}
.entete__nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform 0.4s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .entete__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
}
.burger { display: flex; flex-direction: column; gap: 6px; width: 32px; padding: var(--s-2) 0; }
.burger__trait { display: block; height: 2px; background: var(--blanc); transition: transform 0.5s var(--ease-out); }
.burger[aria-expanded="true"] .burger__trait:first-child { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__trait:last-child { transform: translateY(-4px) rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: var(--z-menu);
  display: flex; flex-direction: column; justify-content: center; gap: var(--s-12);
  padding: var(--s-24) var(--marge) var(--s-12);
  background: var(--noir); color: var(--blanc);
}
.menu[hidden] { display: none; }
.menu__liste { display: flex; flex-direction: column; gap: var(--s-4); }
.menu__liste a {
  font-family: var(--police-titre); font-weight: 800;
  font-size: var(--titre-lg); text-transform: uppercase; letter-spacing: -0.03em; line-height: 1;
}

/* ========================
   HERO
   ======================== */
.hero {
  position: relative;
  height: 100vh; height: 100svh; min-height: 560px;
  background: var(--noir); color: var(--blanc);
  overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-8);
  padding-top: 56px;
}
.hero__titre {
  position: relative; z-index: 2;
  display: flex; flex-direction: row; align-items: center; justify-content: center;
  font-family: var(--police-titre); font-weight: 800;
  font-size: var(--titre-bagarre);
  line-height: 1; letter-spacing: -0.03em; text-transform: uppercase;
  white-space: nowrap;
}
.moitie { display: flex; will-change: transform; }
.lettre { display: inline-block; will-change: transform; }
.moitie--b { margin-left: 0.06em; }
.moitie--b .lettre { color: var(--noir); -webkit-text-stroke: 3px var(--blanc); paint-order: stroke fill; }
.js .moitie { animation: arrivee-a 1.5s var(--ease-expo) both; }
.js .moitie--b { animation-name: arrivee-b; }
.js .hero__titre { animation: choc 0.9s linear 0.95s both; }
.js [data-hero-texte] { animation: apparait 0.9s var(--ease-out) 1.2s both; }
@keyframes arrivee-a { from { transform: translateX(-130%) skewX(-8deg); } to { transform: none; } }
@keyframes arrivee-b { from { transform: translateX(130%) skewX(8deg); } to { transform: none; } }
@keyframes choc { 0% { transform: scale(1); } 13% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes apparait { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.hero__texte { position: relative; z-index: 2; text-align: center; display: grid; gap: var(--s-3); padding-inline: var(--marge); }
.hero__disciplines {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-1) var(--s-4);
  font-family: var(--police-titre); font-weight: 700;
  font-size: var(--texte-xs); letter-spacing: 0.16em; text-transform: uppercase;
}
.hero__disciplines span + span::before { content: '·'; margin-right: var(--s-4); color: var(--rouge); }
.hero__lieu { font-size: var(--texte-sm); color: var(--blanc-72); }
.hero__indice {
  position: absolute; z-index: 2; bottom: var(--s-6); left: 0; right: 0;
  text-align: center;
  font-family: var(--police-titre); font-weight: 700;
  font-size: var(--texte-xs); letter-spacing: 0.2em; text-transform: uppercase;
}
.hero__indice span { display: inline-block; margin-left: var(--s-2); animation: indice 2s var(--ease-out) infinite; }
@keyframes indice { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

.hero__fenetres { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.fenetre {
  position: absolute; left: var(--x); top: var(--y);
  width: clamp(110px, 28vw, 320px); aspect-ratio: 4 / 5;
  overflow: hidden; will-change: transform, clip-path;
  clip-path: inset(50%);
}
.fenetre img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); }
.sans-gsap .fenetre { display: none; }
.hero__voile { position: absolute; inset: 0; z-index: 4; background: var(--blanc); opacity: 0; pointer-events: none; }

@media (min-width: 900px) {
  .hero__titre { flex-direction: row; line-height: 1; }
  .moitie--b .lettre { -webkit-text-stroke-width: 4px; }
  .fenetre { width: clamp(160px, 17vw, 300px); }
  .hero__disciplines { font-size: var(--texte-sm); }
}

/* ========================
   WORK
   ======================== */
.work__tete {
  position: relative;
  display: grid; gap: var(--s-4);
  margin-bottom: var(--s-12);
}
.work__vertical { display: none; }
.work__note { max-width: 44ch; font-size: var(--texte-sm); color: var(--noir-72); }

.work__grille { position: relative; display: grid; grid-template-columns: 1fr; row-gap: var(--s-12); }

.oeuvre { position: relative; display: block; width: 100%; }
.oeuvre__cadre { display: block; overflow: hidden; background: var(--gris); aspect-ratio: 4 / 5; }
.oeuvre--6 .oeuvre__cadre { aspect-ratio: 16 / 10; }
.oeuvre__zoom { display: block; width: 100%; height: 100%; transition: transform 0.9s var(--ease-out); }
.oeuvre__zoom img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transition: filter 0.6s var(--ease-out);
}
.oeuvre__legende {
  display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap;
  margin-top: var(--s-3);
  transition: transform 0.5s var(--ease-out);
}
.oeuvre__num { font-family: var(--police-titre); font-weight: 800; font-size: var(--texte-sm); }
.oeuvre__nom { font-family: var(--police-titre); font-weight: 700; font-size: var(--texte-lg); text-transform: uppercase; letter-spacing: -0.01em; }
.oeuvre__meta { font-size: var(--texte-xs); color: var(--noir-72); letter-spacing: 0.04em; }
.oeuvre__geant {
  position: absolute; right: var(--s-3); top: 0; z-index: 3;
  font-family: var(--police-titre); font-weight: 800;
  font-size: var(--titre-geant); line-height: 0.8;
  color: transparent; -webkit-text-stroke: 1.5px var(--blanc);
  opacity: 0; transform: translateY(-30%);
  transition: opacity 0.4s var(--ease-out), transform 0.6s var(--ease-out);
  pointer-events: none; mix-blend-mode: difference;
}
.oeuvre__choc {
  position: absolute; z-index: 4; left: 0; top: 42%;
  transform: translate(-50%, -50%);
  font-family: var(--police-titre); font-weight: 800;
  font-size: var(--titre-sm); text-transform: uppercase; letter-spacing: -0.02em; white-space: nowrap;
  color: var(--blanc); mix-blend-mode: difference; pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .oeuvre:hover .oeuvre__zoom { transform: scale(1.05); }
  .oeuvre:hover .oeuvre__zoom img { filter: grayscale(0) contrast(1); }
  .oeuvre:hover .oeuvre__legende { transform: translateX(var(--s-3)); }
  .oeuvre:hover .oeuvre__geant { opacity: 1; transform: translateY(0); }
}

/* Mobile : composition décalée */
.oeuvre--2 { width: 70%; margin-left: auto; }
.oeuvre--3 { width: 62%; }
.oeuvre--4 { width: 100%; }
.oeuvre--5 { width: 72%; margin-left: auto; }
.oeuvre--6 { width: 100%; }
.oeuvre--2 .oeuvre__choc { left: 0; top: 30%; font-size: var(--texte-lg); }

.marqueur {
  margin-top: var(--s-16);
  font-family: var(--police-titre); font-weight: 800;
  font-size: clamp(2rem, min(5.2vw, 11vh), 5rem); text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.95;
  display: block;
}
.marqueur span { display: inline-block; }
.marqueur__contour { color: var(--blanc); -webkit-text-stroke: 3px var(--noir); paint-order: stroke fill; }
.marqueur--droite { text-align: right; }
.marqueur--centre { text-align: center; margin: 0 0 var(--s-12); font-size: var(--titre); }
.section--rouge .marqueur--centre span:nth-child(2) { color: var(--rouge); -webkit-text-stroke: 3px var(--blanc); paint-order: stroke fill; }

@media (min-width: 900px) {
  .work__vertical {
    display: block; position: absolute; right: calc(var(--marge) * -1 + 8px); top: 0;
    writing-mode: vertical-rl; transform: rotate(180deg);
    font-family: var(--police-titre); font-weight: 700;
    font-size: var(--texte-xs); letter-spacing: 0.2em; text-transform: uppercase;
  }
  .work__grille { grid-template-columns: repeat(12, 1fr); column-gap: var(--s-6); row-gap: var(--s-8); align-items: start; }
  .oeuvre { width: auto; margin: 0; }
  .oeuvre--1 { grid-column: 1 / 8; grid-row: 1; }
  .oeuvre--2 { grid-column: 7 / 12; grid-row: 1; align-self: end; margin-top: 0; margin-bottom: calc(var(--s-32) * -0.6); }
  .oeuvre--3 { grid-column: 2 / 6; grid-row: 2; margin-top: var(--s-32); }
  .oeuvre--4 { grid-column: 7 / 13; grid-row: 2; margin-top: var(--s-24); }
  .oeuvre--5 { grid-column: 2 / 6; grid-row: 3; margin-top: var(--s-24); }
  .oeuvre--6 { grid-column: 6 / 13; grid-row: 3; align-self: end; margin-top: var(--s-32); }
  .oeuvre--2 .oeuvre__choc { left: 0; top: 36%; font-size: var(--titre-sm); }
  .marqueur--droite { margin-top: var(--s-16); }
}

/* ========================
   SERVICES
   ======================== */
.services { padding-bottom: calc(var(--section) + var(--s-6)); }
.services__liste { margin-top: var(--s-8); border-top: 1px solid var(--noir-15); }
.service {
  display: flex; flex-direction: column; gap: var(--s-1);
  padding: var(--s-3) 0; border-bottom: 1px solid var(--noir-15);
}
@media (min-width: 700px) { .service { flex-direction: row; align-items: baseline; gap: var(--s-4); } }
.service__num {
  font-family: var(--police-titre); font-weight: 800; font-size: var(--texte-sm);
  min-width: 2.5ch;
  transition: transform 0.6s var(--ease-out);
}
.service__nom {
  display: block;
  font-family: var(--police-titre); font-weight: 800;
  font-size: clamp(1.4rem, 6.2vw, 2.4rem);
  text-transform: uppercase; letter-spacing: -0.035em; line-height: 1;
  transform-origin: left center;
  transition: transform 0.6s var(--ease-out), color 0.4s;
}
.services__phrase { display: inline-block; margin-top: var(--s-6); font-size: var(--texte-lg); }
.services__touche {
  display: inline-block; margin-left: var(--s-3); margin-top: var(--s-2); line-height: 1.4; padding-bottom: 0.2em;
  font-family: var(--police-corps); font-weight: 500; font-size: var(--titre-sm);
  color: var(--rouge);
}
.apercu {
  display: none; position: fixed; top: 0; left: 0; z-index: 50;
  width: clamp(200px, 22vw, 340px); aspect-ratio: 4 / 5;
  pointer-events: none; opacity: 0;
  background-size: cover; background-position: center;
  transition: opacity 0.3s var(--ease-out);
  will-change: transform;
}
@media (min-width: 700px) { .service__nom { font-size: clamp(1.8rem, min(4.4vw, 9vh), 5.5rem); } }
@media (hover: hover) and (pointer: fine) {
  .apercu { display: block; }
  .apercu.actif { opacity: 1; }
  .service:hover .service__nom { transform: translateX(var(--s-6)) scale(1.02); }
  .service:hover .service__num { transform: translateX(calc(var(--s-3) * -1)); color: var(--rouge); }
}

/* ========================
   STUDIO
   ======================== */
.studio__titre {
  font-family: var(--police-titre); font-weight: 800;
  font-size: var(--titre-geant);
  text-transform: uppercase; letter-spacing: -0.035em; line-height: 0.9;
  text-wrap: balance;
}
.studio__colonnes { display: grid; gap: var(--s-3); margin: var(--s-6) 0; }
.studio__texte { font-size: var(--texte); max-width: 40ch; }
.studio__fondees {
  font-family: var(--police-titre); font-weight: 700;
  font-size: var(--texte-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--blanc-72);
}
@media (min-width: 900px) {
  .studio__colonnes { grid-template-columns: 1fr 1fr; align-items: end; margin-left: 40%; margin-right: 0; }
  .studio__texte { grid-column: 1 / 3; }
  .studio__colonnes { grid-template-columns: 1fr; }
}

.visions {
  --p: 50;
  position: relative;
  display: grid; grid-template-rows: calc(var(--p) * 1%) 1fr;
  height: min(60svh, 420px); min-height: 260px;
  border: 1px solid var(--gris);
  overflow: hidden;
}
.vision { display: grid; place-items: center; overflow: hidden; }
.vision--lea { background: var(--blanc); color: var(--noir); }
.vision--maxine { background: var(--noir); color: var(--blanc); }
.vision__nom {
  font-family: var(--police-titre); font-weight: 800;
  font-size: 12vw; text-transform: uppercase; letter-spacing: -0.04em; line-height: 1;
  will-change: transform;
}
.vision--lea .vision__nom { transform: scale(calc(0.78 + var(--p) * 0.0044)); }
.vision--maxine .vision__nom {
  color: var(--noir); -webkit-text-stroke: 3px var(--blanc); paint-order: stroke fill;
  transform: scale(calc(0.78 + (100 - var(--p)) * 0.0044));
}
.visions__centre {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  transform: translate(-50%, -50%) scale(0.9);
  font-family: var(--police-titre); font-weight: 800;
  font-size: var(--titre); text-transform: uppercase; letter-spacing: -0.04em; line-height: 1;
  color: var(--blanc); mix-blend-mode: difference;
  opacity: 0; pointer-events: none;
  transition: opacity 0.5s var(--ease-out), transform 0.7s var(--ease-out);
}
.visions.centre .visions__centre { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.vision__nom { transition: opacity 0.5s var(--ease-out); }
.visions.centre .vision__nom { opacity: 0.1; }
@media (min-width: 900px) {
  .visions { grid-template-rows: none; grid-template-columns: calc(var(--p) * 1%) 1fr; height: min(38vh, 380px); min-height: 220px; }
  .vision__nom { font-size: 6vw; }
}

/* ========================
   COLLABORATIONS
   ======================== */
.collab { overflow: hidden; }
.defilant { overflow: hidden; padding: var(--s-3) 0; }
.defilant__piste {
  display: flex; align-items: center; gap: var(--s-8); width: max-content;
  will-change: transform;
}
.defilant--a .defilant__piste { animation: defiler-a 55s linear infinite; }
.defilant--b .defilant__piste { animation: defiler-b 65s linear infinite; }
.defilant span {
  font-family: var(--police-titre); font-weight: 800;
  font-size: var(--titre); text-transform: uppercase; letter-spacing: -0.03em; line-height: 1;
  white-space: nowrap;
}
.defilant--b span { color: var(--blanc); -webkit-text-stroke: 3px var(--noir); paint-order: stroke fill; }
.defilant i { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--rouge); }
@keyframes defiler-a { to { transform: translateX(-50%); } }
.confiance { margin-top: var(--s-12); }
.confiance__grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6) var(--s-4); }
.confiance__grille li { display: flex; align-items: center; justify-content: center; min-height: 48px; }
.confiance__grille img { max-width: 78%; max-height: 40px; width: auto; height: auto; transition: transform 0.5s var(--ease-out), opacity 0.4s; will-change: transform; }
@media (hover: hover) and (pointer: fine) { .confiance__grille li:hover img { transform: translateY(-4px) scale(1.12); } }
@media (min-width: 900px) {
  .confiance { margin-top: var(--s-8); }
  .confiance__grille { grid-template-columns: repeat(5, 1fr); gap: var(--s-4) var(--s-6); }
  .confiance__grille li { min-height: min(60px, 8vh); }
  .confiance__grille img { max-height: min(50px, 6.5vh); }
}
@keyframes defiler-b { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* ========================
   CONTACT
   ======================== */
.contact { text-align: center; }
.contact__contenu { display: flex; flex-direction: column; align-items: center; }
@media (max-width: 899px) { .contact .titre-geant { font-size: min(var(--titre-geant), 6.4vw); } }
.contact__touche { margin-top: var(--s-6); font-size: var(--texte-lg); max-width: 40ch; }
.contact .btn { margin-top: var(--s-12); }
.contact__liens { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-12); }
.contact__liens a { opacity: 0.85; transition: opacity 0.3s; }
.contact__liens a:hover { opacity: 1; }

.btn {
  display: inline-block;
  font-family: var(--police-titre); font-weight: 700;
  font-size: var(--texte-lg); text-transform: uppercase; letter-spacing: 0.04em;
  padding: var(--s-4) var(--s-8);
  background: var(--noir); color: var(--blanc);
  border: 2px solid var(--noir); border-radius: var(--rayon-xl);
  transition: transform 160ms var(--ease-out), background 0.3s var(--ease-out), color 0.3s var(--ease-out);
  will-change: transform;
}
.btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--blanc); color: var(--noir); } }

/* ========================
   FOOTER
   ======================== */
.pied {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-8) var(--marge);
  background: var(--noir); color: var(--blanc-72);
  font-size: var(--texte-sm);
}
.pied__logo { width: 36px; height: 36px; border-radius: 50%; }

/* ========================
   FICHE PROJET (diaporama)
   ======================== */
.fiche {
  position: fixed; inset: 0; z-index: var(--z-fiche);
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--noir); color: var(--blanc);
  padding: 84px var(--marge) var(--s-12);
}
.fiche[hidden] { display: none; }
.fiche__haut {
  position: fixed; top: 28px; left: 0; right: 0; z-index: 2;
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--s-4) var(--marge);
  font-family: var(--police-titre); font-weight: 700;
  font-size: var(--texte-xs); letter-spacing: 0.16em; text-transform: uppercase;
  mix-blend-mode: difference; color: var(--blanc);
}
.fiche__fermer { font: inherit; letter-spacing: inherit; text-transform: inherit; padding: var(--s-2) 0; }
.fiche__corps {
  max-width: var(--largeur-max); margin: 0 auto;
  display: grid; gap: var(--s-6);
  grid-template-areas: "tete" "visuel" "suite";
}
.fiche__tete { grid-area: tete; }
.fiche__visuel { grid-area: visuel; min-width: 0; }
.fiche__suite { grid-area: suite; }
.fiche__meta {
  font-family: var(--police-titre); font-weight: 700;
  font-size: var(--texte-xs); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--blanc-72); margin-bottom: var(--s-3);
}
.fiche__titre {
  font-family: var(--police-titre); font-weight: 800;
  font-size: clamp(1.5rem, 0.4rem + 5.6vw, 3rem); text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.98;
  text-wrap: balance;
}
.fiche__texte { display: grid; gap: var(--s-3); max-width: 44ch; color: var(--blanc-72); font-size: var(--texte-sm); }
.fiche__nav { display: flex; flex-wrap: wrap; gap: var(--s-6); margin-top: var(--s-8); }
.fiche__nav button {
  font-family: var(--police-titre); font-weight: 800;
  font-size: var(--texte-sm); text-transform: uppercase; letter-spacing: -0.01em;
  padding: var(--s-2) 0; border-bottom: 2px solid var(--blanc);
  transition: color 0.3s, border-color 0.3s;
}
.fiche__nav button:hover { color: var(--rouge); border-color: var(--rouge); }

/* Scène : cadre portrait 4:5, les photos défilent à la verticale */
.fiche__visuel {
  --sw: min(100%, calc(70svh * 0.8));
  display: grid; grid-template-columns: minmax(0, var(--sw)); row-gap: var(--s-2);
  grid-template-areas: "scene" "leg" "ctrl" "vign";
  justify-content: start;
}
.scene {
  grid-area: scene; position: relative; overflow: hidden;
  width: 100%; aspect-ratio: 4 / 5;
  background: var(--noir); border: 1px solid var(--gris);
}
.scene__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain;
  clip-path: inset(100% 0 0 0); transform: scale(1.1);
}
.scene__img.remplit { object-fit: cover; }
.scene__img.depuis-haut { clip-path: inset(0 0 100% 0); }
.scene__img.actif {
  clip-path: inset(0 0 0 0); transform: scale(1); z-index: 2;
  transition: clip-path 1.1s var(--ease-expo), transform 1.5s var(--ease-expo);
}
.scene__img.sort {
  clip-path: inset(0 0 0 0); opacity: 0; transform: translateY(-6%) scale(0.97);
  transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out);
}
.scene__legende { grid-area: leg; min-height: 1.6em; font-size: var(--texte-xs); color: var(--blanc-72); }
.scene__controles { grid-area: ctrl; display: flex; align-items: center; gap: var(--s-3); }
.scene__controles button {
  font-family: var(--police-titre); font-weight: 700; font-size: var(--texte-sm);
  min-width: 40px; min-height: 40px; padding: 0 var(--s-2);
  border: 1px solid var(--blanc-15); transition: background 0.3s, color 0.3s;
}
.scene__controles button:hover { background: var(--blanc); color: var(--noir); }
.scene__controles button[hidden] { display: none; }
.scene__compteur { font-family: var(--police-titre); font-weight: 700; font-size: var(--texte-xs); letter-spacing: 0.1em; min-width: 6ch; text-align: center; }
.scene__barre { flex: 1; height: 2px; background: var(--blanc-15); overflow: hidden; }
.scene__barre i { display: block; height: 100%; background: var(--rouge); transform-origin: left; transform: scaleX(0); }
.scene__pause { font-size: var(--texte-xs) !important; letter-spacing: 0.1em; text-transform: uppercase; }
@keyframes barre { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.scene__vignettes { grid-area: vign; position: relative; display: flex; gap: var(--s-2); overflow-x: auto; padding-bottom: var(--s-1); scrollbar-width: thin; }
.scene__vignettes[hidden] { display: none; }
.scene__vignettes button { display: block; width: 44px; height: 55px; opacity: 0.5; outline-offset: 2px; transition: opacity 0.3s; }
.scene__vignettes button[aria-current="true"] { opacity: 1; outline: 2px solid var(--rouge); }
.scene__vignettes button:hover { opacity: 1; }
.scene__vignettes img { width: 100%; height: 100%; object-fit: cover; }

.fiche.anim .fiche__titre { animation: fiche-titre 0.9s var(--ease-expo) both; }
@keyframes fiche-titre { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

@media (min-width: 900px) {
  .entete { padding-inline: var(--marge); }
  .entete__nav { display: block; }
  .burger { display: none; }
  .menu { display: none !important; }
  .fiche__titre { font-size: clamp(1.6rem, 0.6rem + 2.2vw, 3rem); }
  .fiche__corps {
    grid-template-columns: minmax(300px, 4fr) 8fr; column-gap: var(--s-12);
    grid-template-areas: "tete visuel" "suite visuel"; grid-template-rows: auto 1fr; align-items: start;
  }
  .fiche__suite { align-self: start; }
  .fiche__visuel {
    --sh: min(64vh, 700px);
    --sw: calc(var(--sh) * 0.8);
    grid-template-columns: var(--sw) auto;
    grid-template-areas: "scene vign" "leg ." "ctrl .";
    column-gap: var(--s-4); justify-self: center;
  }
  .scene { height: var(--sh); width: var(--sw); aspect-ratio: auto; }
  .scene__vignettes { flex-direction: column; overflow-x: hidden; overflow-y: auto; max-height: var(--sh); padding: 0 var(--s-1) 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .scene__img, .scene__img.actif, .scene__img.sort { transition: none; clip-path: none; transform: none; }
  .scene__img.sort { opacity: 0; }
}

/* ========================
   Mouvement réduit
   ======================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .mot-inner { transform: none !important; }
  .js .moitie, .js .hero__titre, .js [data-hero-texte] { animation: none !important; }
  .fenetre { display: none; }
  .defilant__piste { animation: none !important; }
  .hero__indice span { animation: none; }
}