/* =============================================================================
   MAIN STYLESHEET — Théophile Lamarche Photography
   Structure :
     1.  Fonts
     2.  Variables CSS
     3.  Reset & base
     4.  Typographie
     5.  Navigation
     6.  Hero
     7.  Hero — Vidéo expansible
     8.  Hero — Titre animé
     9.  Hero — Mise en page contenu
    10.  Section Label
    11.  Bouton CTA
    12.  Section Mariages (Featured Projects)
    13.  Section Approche (Showreel)
    14.  Section Films
    15.  Modal Lecteur Vidéo
    16.  Section Galerie
    17.  Footer
    18.  Responsive (≤ 768 px)
============================================================================= */


/* ─────────────────────────────────────────────────────────────────────────────
   1. FONTS
───────────────────────────────────────────────────────────────────────────── */
@font-face {
  font-display: swap;
  font-family: 'Lausanne-300';
  font-style: normal;
  font-weight: 400;
  src: url('https://www.exoape.com/_nuxt/fonts/TWKLausanne-300.b6399e7.woff2') format('woff2'),
       url('https://www.exoape.com/_nuxt/fonts/TWKLausanne-300.ed873ea.woff') format('woff');
}
@font-face {
  font-display: swap;
  font-family: 'Lausanne-400';
  font-style: normal;
  font-weight: 400;
  src: url('https://www.exoape.com/_nuxt/fonts/TWKLausanne-400.c74d82a.woff2') format('woff2'),
       url('https://www.exoape.com/_nuxt/fonts/TWKLausanne-400.514e643.woff') format('woff');
}
@font-face {
  font-display: swap;
  font-family: 'Lausanne-500';
  font-style: normal;
  font-weight: 400;
  src: url('https://www.exoape.com/_nuxt/fonts/TWKLausanne-500.eb0ea77.woff2') format('woff2'),
       url('https://www.exoape.com/_nuxt/fonts/TWKLausanne-500.83cac15.woff') format('woff');
}


/* ─────────────────────────────────────────────────────────────────────────────
   2. VARIABLES CSS
───────────────────────────────────────────────────────────────────────────── */
:root {
  --color-white:      #fff;
  --color-off-white:  #f8f8f8;
  --color-dark-grey:  #0d0e13;
  --color-light-grey: #e4e0db;
  --color-sand:       #e0ccbb;
  --pad-x: 4.167vw;
  --pad-y: 10.417vw;
}


/* ─────────────────────────────────────────────────────────────────────────────
   3. RESET & BASE
───────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: 'Lausanne-300', 'Inter', ui-sans-serif, sans-serif;
  background: var(--color-white);
  color: var(--color-dark-grey);
  overflow-x: hidden;
}

img, video { display: block; width: 100%; height: 100%; object-fit: cover; }
h1, h2, h3, h4, h5, h6 { font-weight: 400; }
a  { text-decoration: none; color: inherit; }
ul { list-style: none; }


/* ─────────────────────────────────────────────────────────────────────────────
   4. TYPOGRAPHIE
───────────────────────────────────────────────────────────────────────────── */
.t-h0  { font-family: 'Lausanne-300', sans-serif; font-size: 17.361vw;  line-height: 15.694vw; letter-spacing: -0.799vw; }
.t-h1  { font-family: 'Lausanne-300', sans-serif; font-size: 10vw;      line-height: 10vw;     letter-spacing: -0.347vw; }
.t-h2  { font-family: 'Lausanne-300', sans-serif; font-size: 3.611vw;   line-height: 4.444vw;  letter-spacing: -0.104vw; }
.t-p   { font-family: 'Lausanne-300', sans-serif; font-size: 1.111vw;   line-height: 1.667vw;  letter-spacing: 0.007vw; }
.t-ps  { font-family: 'Lausanne-300', sans-serif; font-size: 0.972vw;   line-height: 1.458vw;  letter-spacing: 0.007vw; }
.t-sub { font-family: 'Lausanne-300', sans-serif; font-size: 0.833vw;   line-height: 1.111vw;  letter-spacing: 0.007vw; }
.t-lbl { font-family: 'Lausanne-400', sans-serif; font-size: 0.972vw;   line-height: 0.972vw; }
.t-cta { font-family: 'Lausanne-400', sans-serif; font-size: 1.111vw;   line-height: 1.111vw; }


/* ─────────────────────────────────────────────────────────────────────────────
   5. NAVIGATION
───────────────────────────────────────────────────────────────────────────── */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 2.083vw var(--pad-x);
  display: flex; justify-content: space-between; align-items: center;
  mix-blend-mode: difference;
  color: white;
}

.nav-logo {
  font-family: 'Lausanne-400', sans-serif;
  font-size: 1.042vw;
  line-height: 1;
  letter-spacing: 0.05em;
}

.nav-links          { display: flex; gap: 2.778vw; }
.nav-links a        { font-family: 'Lausanne-400', sans-serif; font-size: 0.972vw; line-height: 0.972vw; }


/* ─────────────────────────────────────────────────────────────────────────────
   6. HERO — Conteneur & fond
───────────────────────────────────────────────────────────────────────────── */
.hero {
  position: relative; height: 100dvh; overflow: hidden;
  background: var(--color-dark-grey); color: white;
}

.hero-bg { position: absolute; inset: 0; z-index: 0; will-change: opacity; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }

.hero-overlay {
  position: absolute; inset: 0; z-index: 1; will-change: opacity;
  background: linear-gradient(to bottom, rgba(13,14,19,0.25) 0%, rgba(13,14,19,0.5) 100%);
}


/* ─────────────────────────────────────────────────────────────────────────────
   7. HERO — Vidéo expansible (croît depuis le centre au scroll)
───────────────────────────────────────────────────────────────────────────── */
.expand-media {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2; overflow: hidden;
  will-change: width, height, border-radius;
  box-shadow: 0 0 80px rgba(0,0,0,0.5);
}
.expand-media video { width: 100%; height: 100%; object-fit: cover; display: block; }

.expand-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: rgba(0,0,0,0.28);
  will-change: opacity;
}


/* ─────────────────────────────────────────────────────────────────────────────
   8. HERO — Titre animé (s'écarte au scroll, mixblend: difference)
───────────────────────────────────────────────────────────────────────────── */
.expand-titles {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3; width: 100%;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  mix-blend-mode: difference; pointer-events: none;
}

.expand-word {
  font-family: 'Lausanne-300', sans-serif;
  font-size: 10vw; line-height: 10vw; letter-spacing: -0.347vw;
  color: white; display: block;
  will-change: transform, opacity;
}


/* ─────────────────────────────────────────────────────────────────────────────
   9. HERO — Mise en page du contenu (intro + CTA — disparaît au scroll)
───────────────────────────────────────────────────────────────────────────── */
.hero-content {
  position: relative; z-index: 4; height: 100%;
  display: grid; grid-template-rows: 1fr auto;
  padding: 0 var(--pad-x);
  will-change: opacity;
}

.hero-top    { padding-top: 9vw; display: grid; grid-template-columns: 1fr 1fr; align-items: flex-start; }
.hero-intro  { opacity: 0.8; max-width: 20vw; line-height: 1.6; }

.hero-bottom {
  padding-bottom: 3.472vw;
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: flex-end; gap: 2.083vw;
}

/* Spacer invisible — maintient la grille (le vrai titre est .expand-titles) */
.hero-title       { color: white; visibility: hidden; }
.hero-title > div { display: block; }

.hero-right                { display: flex; flex-direction: column; gap: 1.736vw; padding-left: 12vw; padding-bottom: 0.694vw; }
.hero-right .body-text     { max-width: 24vw; opacity: 0.75; line-height: 1.65; }
.hero-nav-links            { display: flex; gap: 1.736vw; opacity: 0.55; margin-top: 0.4vw; }
.hero-contact              { display: flex; gap: 1.736vw; opacity: 0.55; }

.scroll-to-label {
  position: absolute; bottom: 3.472vw; left: var(--pad-x); z-index: 5;
  font-family: 'Lausanne-400', sans-serif; font-size: 0.694vw;
  letter-spacing: 0.15em; text-transform: uppercase;
  opacity: 0.5; color: white;
  writing-mode: vertical-rl; transform: rotate(180deg);
  will-change: opacity;
}


/* ─────────────────────────────────────────────────────────────────────────────
   10. SECTION LABEL (icône étoile + texte)
───────────────────────────────────────────────────────────────────────────── */
.section-label         { display: flex; align-items: center; gap: 0.556vw; margin-bottom: 2.083vw; }
.section-label svg     { width: 0.694vw; flex-shrink: 0; }


/* ─────────────────────────────────────────────────────────────────────────────
   11. BOUTON CTA (cercle + flèche + label)
───────────────────────────────────────────────────────────────────────────── */
.cta-btn        { display: inline-flex; align-items: center; gap: 0.694vw; cursor: pointer; }

.cta-btn .circle {
  width: 2.083vw; height: 2.083vw; border-radius: 50%;
  border: 0.069vw solid currentColor;
  opacity: 0.6;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cta-btn .circle svg { width: 0.556vw; }

.cta-label-wrap       { display: flex; flex-direction: column; }
.cta-label-wrap span  { border-bottom: 0.069vw solid currentColor; padding-bottom: 0.069vw; }

.arrow-icon { width: 0.764vw; }


/* ─────────────────────────────────────────────────────────────────────────────
   12. SECTION MARIAGES — Featured Projects
───────────────────────────────────────────────────────────────────────────── */
.featured-projects {
  background: var(--color-dark-grey);
  color: white;
  padding: var(--pad-y) var(--pad-x);
}

.fp-header {
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: flex-end; gap: 2.083vw;
  margin-bottom: 4.167vw;
}

.fp-header-desc { max-width: 24vw; opacity: 0.6; align-self: flex-end; }

.fp-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.389vw; margin-bottom: 4.167vw;
}

.fp-item            { display: block; }
.fp-item-offset     { margin-top: 4.167vw; }

.fp-img-wrap        { overflow: hidden; aspect-ratio: 4/5; position: relative; background: #1a1b1f; }
.fp-img-wrap img    { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.fp-item:hover .fp-img-wrap img { transform: scale(1.03); }

.fp-caption         { margin-top: 1.042vw; opacity: 0.8; }
.fp-caption strong  { font-family: 'Lausanne-500', sans-serif; }


/* ─────────────────────────────────────────────────────────────────────────────
   13. SECTION APPROCHE — Showreel
───────────────────────────────────────────────────────────────────────────── */
.showreel {
  background: var(--color-light-grey);
  color: var(--color-dark-grey);
  padding: var(--pad-y) var(--pad-x);
}

.showreel-inner { display: grid; grid-template-columns: 5fr 7fr; gap: 5.556vw; align-items: start; }

.showreel-title { margin-bottom: 2.778vw; }

/* Piliers texte */
.showreel-pillars       { display: flex; flex-direction: column; gap: 2.083vw; margin-bottom: 3.472vw; }
.showreel-pillar-label  { font-family: 'Lausanne-400', sans-serif; font-size: 0.694vw; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.45; margin-bottom: 0.556vw; }
.showreel-pillar-text   { opacity: 0.75; line-height: 1.7; }

/* Grille médias droite */
.showreel-media { display: grid; grid-template-columns: 1fr 1fr; gap: 1.389vw; align-items: start; }

.showreel-photo              { overflow: hidden; aspect-ratio: 4/5; background: var(--color-dark-grey); }
.showreel-photo img          { width: 100%; height: 100%; object-fit: cover; display: block; }

.showreel-video              { overflow: hidden; aspect-ratio: 9/16; background: var(--color-dark-grey); margin-top: 4.167vw; }
.showreel-video video        { width: 100%; height: 100%; object-fit: cover; display: block; }


/* ─────────────────────────────────────────────────────────────────────────────
   14. SECTION FILMS
───────────────────────────────────────────────────────────────────────────── */
.films-section {
  background: var(--color-off-white);
  color: var(--color-dark-grey);
  padding: var(--pad-y) var(--pad-x);
}

.films-header {
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: flex-end; gap: 2.083vw;
  margin-bottom: 4.167vw;
}

.films-grid { display: grid; grid-template-columns: 1fr; gap: 1.389vw; margin-bottom: 4.167vw; }

/* Carte film */
.film-card          { position: relative; overflow: hidden; background: var(--color-dark-grey); cursor: pointer; }
.film-card-main     { aspect-ratio: 16/9; }
.film-card-side     { aspect-ratio: 9/13; }

.film-card video    { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.8s ease; }
.film-card:hover video { transform: scale(1.03); }

.film-card-overlay  { position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,14,19,0.75) 0%, transparent 50%); pointer-events: none; }

.film-card-info     { position: absolute; bottom: 0; left: 0; right: 0; padding: 2.083vw; color: white; display: flex; justify-content: space-between; align-items: flex-end; }
.film-card-title    { font-family: 'Lausanne-300', sans-serif; font-size: 1.667vw; line-height: 2.083vw; letter-spacing: -0.04vw; }
.film-card-meta     { font-family: 'Lausanne-400', sans-serif; font-size: 0.694vw; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.6; }

/* Bouton lecture (apparaît au survol) */
.film-play-btn      { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 4vw; height: 4vw; border-radius: 50%; border: 0.069vw solid rgba(255,255,255,0.5); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.film-play-btn svg  { width: 1vw; margin-left: 0.15vw; fill: white; }
.film-card:hover .film-play-btn { opacity: 1; }

.film-card-meta.clickable { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }


/* ─────────────────────────────────────────────────────────────────────────────
   15. MODAL LECTEUR VIDÉO
───────────────────────────────────────────────────────────────────────────── */
.vp-modal {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s ease;
}
.vp-modal.open { opacity: 1; pointer-events: all; }

.vp-backdrop {
  position: absolute; inset: 0;
  background: rgba(5,5,8,0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.vp-close-btn {
  position: absolute; top: 2vw; right: 2.5vw; z-index: 10;
  background: none; border: none; cursor: pointer;
  color: white; opacity: 0.55; padding: 0.5rem;
  transition: opacity 0.2s;
}
.vp-close-btn:hover { opacity: 1; }
.vp-close-btn svg   { width: 1.4vw; height: 1.4vw; display: block; }

.vp-wrapper {
  position: relative; z-index: 5;
  max-width: 90vw;
  border-radius: 0.75vw; overflow: hidden;
  background: rgba(17,17,17,0.55);
  transform: translateY(28px);
  transition: transform 0.55s cubic-bezier(0.22,1,0.36,1);
}
.vp-modal.open .vp-wrapper { transform: translateY(0); }

#vpVideo { display: block; max-width: 90vw; max-height: 85vh; width: auto; height: auto; }

/* Couche des contrôles */
.vp-controls-layer { position: absolute; bottom: 0; left: 0; right: 0; padding: 0 1.5rem 1.5rem; display: flex; justify-content: center; pointer-events: none; }

.vp-controls {
  background: rgba(17,17,17,0.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 1rem;
  padding: 0.65rem 1rem 0.7rem;
  width: 100%; max-width: 600px;
  transform: translateY(18px);
  opacity: 0; filter: blur(8px);
  transition: transform 0.45s cubic-bezier(0.22,1,0.36,1),
              opacity 0.45s ease, filter 0.45s ease;
  pointer-events: all;
}
.vp-wrapper:hover .vp-controls { transform: translateY(0); opacity: 1; filter: blur(0); }

/* Barre de progression */
.vp-progress-row    { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.45rem; }
.vp-time            { color: rgba(255,255,255,0.85); font-size: 0.78rem; white-space: nowrap; font-family: 'Lausanne-300', sans-serif; min-width: 2.2rem; text-align: center; }
.vp-track           { flex: 1; position: relative; height: 4px; background: rgba(255,255,255,0.2); border-radius: 2px; cursor: pointer; transition: height 0.15s; }
.vp-track:hover     { height: 6px; }
.vp-track-fill      { position: absolute; top: 0; left: 0; height: 100%; background: white; border-radius: 2px; pointer-events: none; }

/* Rangée inférieure */
.vp-bottom-row  { display: flex; align-items: center; justify-content: space-between; }
.vp-left        { display: flex; align-items: center; gap: 0.1rem; }

.vp-icon-btn    { width: 2.2rem; height: 2.2rem; border-radius: 0.5rem; background: none; border: none; color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; flex-shrink: 0; }
.vp-icon-btn:hover { background: rgba(17,17,17,0.8); }
.vp-icon-btn svg   { width: 1.1rem; height: 1.1rem; display: block; }

.vp-vol-track   { width: 5.5rem; flex: none; margin-left: 0.2rem; }

/* Boutons de vitesse */
.vp-speeds      { display: flex; gap: 0.1rem; }
.vp-speed-btn   { width: 2.5rem; height: 2.2rem; border-radius: 0.5rem; background: none; border: none; color: white; cursor: pointer; font-size: 0.72rem; font-family: 'Lausanne-400', sans-serif; transition: background 0.2s; }
.vp-speed-btn:hover   { background: rgba(17,17,17,0.8); }
.vp-speed-btn.vp-active { background: rgba(17,17,17,0.82); }


/* ─────────────────────────────────────────────────────────────────────────────
   16. SECTION GALERIE (aperçu)
───────────────────────────────────────────────────────────────────────────── */
.in-media {
  background: var(--color-dark-grey);
  color: white;
  padding: var(--pad-y) var(--pad-x);
}

.media-header {
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: flex-end; gap: 2.083vw;
  margin-bottom: 4.167vw;
}

.media-title { margin-bottom: 0; }
.media-body  { max-width: 28vw; opacity: 0.6; }

.preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.389vw; margin-bottom: 4.167vw; }

.preview-item                    { overflow: hidden; }
.preview-item:nth-child(2)       { margin-top: 4.167vw; }
.preview-img-wrap                { overflow: hidden; aspect-ratio: 4/5; }
.preview-img-wrap img            { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.preview-item:hover .preview-img-wrap img { transform: scale(1.03); }


/* ─────────────────────────────────────────────────────────────────────────────
   17. FOOTER
───────────────────────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--color-sand);
  color: var(--color-dark-grey);
  padding: var(--pad-y) var(--pad-x);
  position: relative; overflow: hidden;
}

.footer-content          { position: relative; z-index: 1; }
.footer-story-title      { margin-bottom: 2.083vw; }
.footer-story-body       { max-width: 28vw; opacity: 0.7; margin-bottom: 4.167vw; }
.footer-divider          { height: 0.069vw; background: rgba(13,14,19,0.2); margin-bottom: 3.472vw; }

.footer-bottom {
  display: grid; grid-template-columns: 2.5fr 1fr 1fr 0.8fr;
  gap: 2.083vw; align-items: start;
}

.footer-address           { opacity: 0.7; }
.footer-address a         { display: block; margin-top: 1.042vw; }

.footer-col               { display: flex; flex-direction: column; gap: 0.833vw; }
.footer-col a             { opacity: 0.7; }
.footer-col a:hover       { opacity: 1; }

.footer-story-cta         { justify-self: end; }


/* ─────────────────────────────────────────────────────────────────────────────
   18. HAMBURGER + MENU MOBILE OVERLAY
───────────────────────────────────────────────────────────────────────────── */
.nav-burger {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  background: none; border: none; cursor: pointer;
  padding: 6px; color: inherit; flex-shrink: 0;
}
.nav-burger span {
  display: block; width: 22px; height: 1.5px;
  background: currentColor; border-radius: 1px;
  transition: transform 0.25s, opacity 0.25s;
}

.mobile-nav-backdrop {
  position: fixed; inset: 0; z-index: 499;
  background: rgba(0,0,0,0.45);
  opacity: 0; pointer-events: none;
  transition: opacity 0.38s ease;
}
.mobile-nav-backdrop.open { opacity: 1; pointer-events: all; }

.mobile-nav-overlay {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 500;
  width: 68vw; max-width: 280px;
  background: var(--color-dark-grey); color: white;
  display: flex; flex-direction: column;
  padding: 14vw 7vw 10vw;
  transform: translateX(100%);
  transition: transform 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
}
.mobile-nav-overlay.open {
  transform: translateX(0);
  pointer-events: all;
}

.mobile-nav-close {
  align-self: flex-end; margin-bottom: 8vw;
  background: none; border: none; color: white;
  opacity: 0.5; font-size: 5.5vw; cursor: pointer; line-height: 1; padding: 4px;
}
.mobile-nav-close:hover { opacity: 1; }

.mobile-nav-links {
  list-style: none; text-align: left;
  display: flex; flex-direction: column; gap: 5vw;
}
.mobile-nav-links li a {
  font-family: 'Lausanne-300', sans-serif;
  font-size: 5.5vw; line-height: 1.2; letter-spacing: -0.1vw;
  color: white; text-decoration: none; display: block;
}
.mobile-nav-links li a:hover { opacity: 0.65; }


/* ─────────────────────────────────────────────────────────────────────────────
   19. RESPONSIVE — iPhone / mobile (≤ 768 px)
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  :root {
    --pad-x: 5vw;
    --pad-y: 18vw;
  }

  /* Typographie */
  .t-h0  { font-size: 18vw;  line-height: 16vw;  letter-spacing: -0.8vw; }
  .t-h1  { font-size: 13vw;  line-height: 13vw;  letter-spacing: -0.5vw; }
  .t-h2  { font-size: 7.5vw; line-height: 9vw;   letter-spacing: -0.2vw; }
  .t-p   { font-size: 3.8vw; line-height: 5.8vw; letter-spacing: 0; }
  .t-ps  { font-size: 3.5vw; line-height: 5.2vw; letter-spacing: 0; }
  .t-sub { font-size: 3.2vw; line-height: 4.8vw; letter-spacing: 0; }
  .t-lbl { font-size: 3vw;   line-height: 4.5vw; }
  .t-cta { font-size: 3.8vw; line-height: 3.8vw; }

  /* Navigation */
  .nav-logo   { font-size: 3.8vw; }
  .nav-links  { display: none; }
  .nav-burger { display: flex; }

  /* Hero — supprimer chevauchements */
  .expand-word { font-size: 16vw; line-height: 16vw; letter-spacing: -0.6vw; }

  /* Cacher le hint "Défiler pour découvrir" sur mobile */
  .scroll-to-label { display: none; }

  /* Texte d'intro (haut) → repositionné en bas avec le reste */
  .hero-top   { grid-template-columns: 1fr; padding-top: 0; flex: none; }
  .hero-intro { display: none; }

  /* Tout le contenu poussé en bas de l'écran, sans chevauchement */
  .hero-content {
    grid-template-rows: 1fr auto;
  }
  .hero-bottom {
    grid-template-columns: 1fr; padding-bottom: 10vw; gap: 4vw;
  }
  .hero-title  { display: none; }
  .hero-right  { padding-left: 0; gap: 4vw; }
  .hero-right .body-text {
    max-width: 90%; font-size: 3.5vw; line-height: 5.8vw;
    opacity: 0.85;
  }
  /* Cacher les liens de nav et contacts dans le hero (déjà dans le menu burger) */
  .hero-nav-links { display: none; }
  .hero-contact   { display: none; }

  /* Bouton CTA */
  .cta-btn .circle    { width: 8vw; height: 8vw; border-width: 0.2vw; }
  .cta-btn .circle svg { width: 2.2vw; }
  .cta-btn            { gap: 2.5vw; }
  .arrow-icon         { width: 2.5vw; }

  /* Section label */
  .section-label     { gap: 2vw; margin-bottom: 4vw; }
  .section-label svg { width: 2.5vw; }

  /* Mariages / Featured projects */
  .fp-header      { grid-template-columns: 1fr; gap: 3vw; margin-bottom: 7vw; }
  .fp-header-desc { max-width: 100%; }
  .fp-grid        { grid-template-columns: 1fr; gap: 6vw; margin-bottom: 8vw; }
  .fp-item-offset { margin-top: 0; }
  .fp-caption     { margin-top: 2.5vw; }

  /* Films */
  .films-header   { grid-template-columns: 1fr; gap: 3vw; margin-bottom: 7vw; }
  .films-grid     { grid-template-columns: 1fr; gap: 5vw; margin-bottom: 8vw; }
  .film-card-main { aspect-ratio: 16/9; }
  .film-card-side { aspect-ratio: 16/9; }
  .film-card-title { font-size: 5vw; line-height: 6.5vw; letter-spacing: -0.1vw; }
  .film-card-meta  { font-size: 2.5vw; }
  .film-card-info  { padding: 4vw; }
  .film-play-btn   { width: 12vw; height: 12vw; }
  .film-play-btn svg { width: 3.5vw; margin-left: 0.5vw; }

  /* Approche */
  .showreel-inner        { grid-template-columns: 1fr; gap: 10vw; }
  .showreel-pillar-label { font-size: 2.5vw; }
  .showreel-pillar-text  { font-size: 3.5vw; line-height: 5.5vw; }
  .showreel-media        { grid-template-columns: 1fr 1fr; gap: 3vw; }
  .showreel-photo        { aspect-ratio: 3/4; }
  .showreel-video        { aspect-ratio: 3/4; margin-top: 8vw; }

  /* Galerie */
  .media-header   { grid-template-columns: 1fr; gap: 3vw; margin-bottom: 7vw; }
  .media-body     { max-width: 100%; }
  .preview-grid   { grid-template-columns: 1fr; gap: 6vw; margin-bottom: 8vw; }
  .preview-item:nth-child(2) { margin-top: 0; }

  /* Footer */
  .footer-story-body { max-width: 100%; }
  .footer-bottom     { grid-template-columns: 1fr 1fr; gap: 6vw; }
  .footer-address    { font-size: 3.5vw; grid-column: 1 / -1; }
  .footer-col        { font-size: 3.5vw; }
  .footer-story-cta  { grid-column: 1 / -1; justify-self: start; }
  .footer-address a  { margin-top: 2.5vw; }

  /* Modal vidéo */
  .vp-wrapper   { border-radius: 2vw; }
  #vpVideo      { max-width: 95vw; max-height: 80vh; }
  .vp-close-btn { top: 4vw; right: 4vw; }
  .vp-close-btn svg { width: 5vw; height: 5vw; }
  .vp-controls  { max-width: 100%; }
  .vp-vol-track { width: 3.5rem; }
  .vp-speeds    { display: none; }
}