/* ============================================
   Template "Vidéaste" — reproduction d'entraînement
   Inspiré du style d'un template Wix (noir/blanc/or,
   Playfair Display en remplacement de Didot,
   Poppins en remplacement d'Avenir).
   ============================================ */

:root{
  --black: #0a0a0a;
  --near-black: #111111;
  --white: #ffffff;
  --gold: #b39f79;
  --gray: #9a9a9a;
  --serif: 'Playfair Display', serif;
  --sans: 'Poppins', sans-serif;
  --header-h: 90px;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  background:var(--black);
  color:var(--white);
  font-family:var(--sans);
  font-weight:300;
  overflow-x:hidden;
}

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

a{ color:inherit; text-decoration:none; }

ul{ list-style:none; }

h1,h2,h3,h4{ font-family:var(--serif); font-weight:400; }

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- Loader ---------- */
.loader{
  position:fixed; inset:0; background:var(--black);
  display:flex; align-items:center; justify-content:center;
  z-index:9999;
  transition:opacity .6s ease, visibility .6s ease;
}
.loader span{
  font-family:var(--serif); font-style:italic; font-size:2rem; color:var(--gold);
  letter-spacing:2px;
  animation:pulse 1.4s ease-in-out infinite;
}
.loader.hidden{ opacity:0; visibility:hidden; }
@keyframes pulse{ 0%,100%{opacity:.4;} 50%{opacity:1;} }

/* ---------- Header ----------
   Le fond noir est une barre séparée, en position absolute (donc
   ancrée au document) : elle défile avec la page et disparaît sous
   le header une fois qu'on scrolle. Le header lui-même est fixed et
   toujours transparent : seuls la taille du logo/nav se réduit. */
.header-bg-fill{
  position:absolute; top:0; left:0; right:0; z-index:499;
  height:var(--header-h); background:var(--black);
}
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:500;
  height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 4vw;
  background:transparent;
  transition:height .4s ease;
}
.site-header.scrolled{
  height:70px;
}
.logo{
  display:flex; align-items:center; gap:12px;
  white-space:nowrap;
}
.logo-img{
  height:40px; width:40px; object-fit:contain; flex-shrink:0;
  transition:height .4s ease, width .4s ease;
}
.site-header.scrolled .logo-img{ height:32px; width:32px; }
.logo-text{
  font-size:13px; letter-spacing:2px; font-weight:400; color:var(--gold);
}
.main-nav ul{ display:flex; gap:2.2vw; }
.nav-link{
  font-size:12px; letter-spacing:1.5px; color:var(--white);
  position:relative; padding:6px 0;
}
.nav-link::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--gold); transition:width .35s ease;
}
.nav-link:hover::after{ width:100%; }

.burger{
  display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer;
  z-index:600;
}
.burger span{ width:26px; height:1px; background:var(--white); transition:.3s; }

/* ---------- Hero / Showcase (video sections) ----------
   .hero/.showcase sont maintenant de simples conteneurs en flux normal ;
   toute la mise en page plein écran vit dans .section-visual, ce qui
   permet à .gallery-panel (sibling) de s'ouvrir juste en dessous et de
   pousser la suite de la page, sans jamais toucher aux 100vh. */
.hero, .showcase{ position:relative; }
.section-visual{
  position:relative; height:100vh; min-height:600px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  overflow:hidden;
}
.hero-media, .showcase-media{ position:absolute; inset:0; z-index:0; }
.hero-bg, .showcase-bg{
  position:absolute; inset:-5%;
  background-size:cover; background-position:center;
  animation:kenburns 18s ease-in-out infinite alternate;
}
.hero-bg{ background-image:radial-gradient(circle at 30% 30%, #2b2b2b, #000 70%); }
.bg-portraits{ background-image:radial-gradient(circle at 70% 40%, #3a2f22, #000 70%); }
.bg-mouvements{ background-image:radial-gradient(circle at 30% 60%, #223a26, #000 70%); }
.bg-territoires{ background-image:radial-gradient(circle at 50% 50%, #1c2f3a, #000 70%); }

.bg-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0; transition:opacity 1s ease;
}
.bg-video.loaded{ opacity:1; }

@keyframes kenburns{
  from{ transform:scale(1); }
  to{ transform:scale(1.12); }
}
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,.75) 100%);
}

.hero-content, .showcase-content{
  position:relative; z-index:2; text-align:center; display:flex; flex-direction:column; align-items:center; gap:28px;
}
.hero-content .eyebrow, .showcase-content .eyebrow{
  font-size:clamp(.95rem,1.7vw,1.25rem);
}
.eyebrow{
  font-size:13px; letter-spacing:6px; text-transform:uppercase; color:var(--white);
}
.clip-title{
  font-family:var(--serif); font-style:italic; font-size:clamp(1.6rem,3vw,2.35rem); color:var(--gold);
  margin-top:-16px; min-height:1.4em;
}
.play-btn{
  background:none; border:none; color:var(--white); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.play-circle{
  width:78px; height:78px; border:1px solid var(--white); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:transform .4s ease, background .4s ease;
}
.play-circle svg{ width:22px; height:22px; fill:var(--white); margin-left:3px; }
.play-btn:hover .play-circle{ transform:scale(1.1); background:rgba(255,255,255,.1); }
.play-label{ font-family:var(--serif); font-style:italic; font-size:15px; letter-spacing:.5px; }

.play-btn.small{ gap:10px; pointer-events:none; }
.play-btn.small .play-circle{ width:52px; height:52px; }
.play-btn.small .play-circle svg{ width:16px; height:16px; }
.play-btn.small .play-label{ font-size:12px; }

.all-videos-btn{
  position:absolute; bottom:60px; left:0; right:0; width:max-content; margin:0 auto;
  z-index:2; border:1px solid var(--white); padding:12px 30px;
  font-family:var(--serif); font-style:italic; font-size:14px;
  background:none; color:var(--white); cursor:pointer;
  transition:background .35s ease, color .35s ease;
}
.all-videos-btn:hover{ background:var(--white); color:var(--black); }

/* ---------- Galerie repliable (bouton "Toutes les vidéos") ----------
   Cartes collées les unes aux autres et contre la vidéo au-dessus
   (aucune marge), 3 par page maximum ; des chevrons apparaissent pour
   faire défiler s'il y a plus de vidéos. Titre + bouton de lecture
   centrés, révélés uniquement au survol. */
.gallery-panel{
  position:relative;
  max-height:0; opacity:0; overflow:hidden; background:var(--near-black);
  transition:max-height .6s ease, opacity .5s ease;
}
.gallery-panel.open{ max-height:2000px; opacity:1; }
.gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); }
.gallery-card{
  position:relative; aspect-ratio:3/2; overflow:hidden; cursor:pointer;
  background:none; padding:0; border:none;
  background-size:cover; background-position:center;
}
.gallery-card::after{
  content:''; position:absolute; inset:0; background:rgba(0,0,0,.55);
  opacity:0; transition:opacity .35s ease;
}
.gallery-card:hover::after{ opacity:1; }
.gallery-card-overlay{
  position:absolute; inset:0; z-index:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:16px; text-align:center; padding:0 10%;
  opacity:0; transition:opacity .35s ease;
}
.gallery-card:hover .gallery-card-overlay{ opacity:1; }
.gallery-card-title{ font-family:var(--serif); font-style:italic; color:var(--white); font-size:1rem; }
.gallery-card.active{ outline:2px solid var(--gold); outline-offset:-2px; z-index:1; }
.gallery-card.active .gallery-card-title{ color:var(--gold); }

.gallery-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,.35);
  background:rgba(0,0,0,.35); color:var(--white); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .3s ease, border-color .3s ease;
}
.gallery-nav:hover{ background:rgba(255,255,255,.15); border-color:var(--white); }
.gallery-nav svg{ width:20px; height:20px; }
.gallery-prev{ left:16px; }
.gallery-next{ right:16px; }
.gallery-nav.hidden{ display:none; }

@media (max-width:700px){
  .gallery-nav{ width:38px; height:38px; }
}

@media (max-width:700px){
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
}

.next-btn{
  position:absolute; z-index:2; right:5%; top:50%; transform:translateY(-50%);
  width:50px; height:50px; border:1px solid rgba(255,255,255,.4); border-radius:50%;
  background:rgba(0,0,0,.2); color:var(--white); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .3s ease, border-color .3s ease, transform .3s ease;
}
.next-btn svg{ width:20px; height:20px; }
.next-btn:hover{ background:rgba(255,255,255,.15); border-color:var(--white); transform:translateY(-50%) scale(1.08); }
.next-btn.single{ display:none; }

.prev-btn{
  position:absolute; z-index:2; left:5%; top:50%; transform:translateY(-50%);
  width:50px; height:50px; border:1px solid rgba(255,255,255,.4); border-radius:50%;
  background:rgba(0,0,0,.2); color:var(--white); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .3s ease, border-color .3s ease, transform .3s ease;
}
.prev-btn svg{ width:20px; height:20px; }
.prev-btn:hover{ background:rgba(255,255,255,.15); border-color:var(--white); transform:translateY(-50%) scale(1.08); }
.prev-btn.single{ display:none; }

@media (max-width:900px){
  .next-btn, .prev-btn{ width:42px; height:42px; }
  .next-btn{ right:4%; }
  .prev-btn{ left:4%; }
}

.scroll-cue{
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%); z-index:2;
  width:1px; height:40px; background:rgba(255,255,255,.4); overflow:hidden;
}
.scroll-cue span{
  position:absolute; top:-40px; left:0; width:1px; height:40px; background:var(--gold);
  animation:scrollDown 2s ease-in-out infinite;
}
@keyframes scrollDown{ to{ top:40px; } }

/* ---------- Lecteur vidéo plein écran ---------- */
.video-modal{
  position:fixed; inset:0; z-index:2000; background:#000;
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .3s ease, visibility .3s ease;
}
.video-modal.open{ opacity:1; visibility:visible; pointer-events:auto; }

.modal-topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 32px; flex-shrink:0;
}
.modal-topbar-left{ display:flex; align-items:center; gap:22px; }
.modal-icon-btn{
  background:none; border:none; color:var(--white); cursor:pointer;
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  opacity:.85; transition:opacity .3s ease;
}
.modal-icon-btn:hover{ opacity:1; }
.modal-icon-btn svg{ width:19px; height:19px; }
.modal-share{
  background:none; border:none; color:var(--white); cursor:pointer;
  display:flex; align-items:center; gap:8px; font-size:.82rem; letter-spacing:.5px;
  opacity:.85; transition:opacity .3s ease;
}
.modal-share:hover{ opacity:1; }
.modal-share svg{ width:16px; height:16px; }

.modal-main{ flex:1; display:flex; align-items:stretch; padding:0 32px 24px; gap:44px; min-height:0; }

.modal-stage{
  position:relative; flex:1.6; min-width:0; background:#000;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.modal-stage video{ width:100%; height:100%; object-fit:contain; background:#000; }

/* Repli "faux plein écran" quand la Fullscreen API est indisponible/refusée */
.modal-stage.pseudo-fullscreen{
  position:fixed; inset:0; z-index:3000; flex:none;
}

.modal-chevron{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.35);
  background:rgba(0,0,0,.25); color:var(--white); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .3s ease, border-color .3s ease;
}
.modal-chevron:hover{ background:rgba(255,255,255,.15); border-color:var(--white); }
.modal-chevron svg{ width:18px; height:18px; }
.modal-prev{ left:16px; }
.modal-next{ right:16px; }
.modal-chevron.single{ display:none; }

.modal-stage-overlay{
  position:absolute; inset:0; z-index:2; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:16px;
  background:rgba(0,0,0,.4);
  opacity:1; visibility:visible; transition:opacity .3s ease, visibility .3s ease;
}
.modal-stage-overlay.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.modal-stage-author{ font-size:.78rem; letter-spacing:2px; text-transform:uppercase; color:var(--gold); }
.modal-stage-title{ font-size:1.7rem; text-align:center; padding:0 8%; }

.modal-controls{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:16px 20px;
  display:flex; align-items:center; gap:14px;
  background:linear-gradient(0deg, rgba(0,0,0,.8), transparent);
  opacity:0; transition:opacity .3s ease;
}
.modal-stage:hover .modal-controls, .modal-controls.force-show{ opacity:1; }
.mc-btn{
  background:none; border:none; color:var(--white); cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:4px; opacity:.9; flex-shrink:0;
}
.mc-btn:hover{ opacity:1; }
.mc-btn svg{ width:19px; height:19px; }
.mc-btn .icon-pause, .mc-btn .icon-mute{ display:none; }
.mc-btn.is-playing .icon-play{ display:none; }
.mc-btn.is-playing .icon-pause{ display:block; }
.mc-btn.is-muted .icon-vol{ display:none; }
.mc-btn.is-muted .icon-mute{ display:block; }
.mc-time{ font-size:.75rem; color:#ddd; white-space:nowrap; flex-shrink:0; }
.mc-progress{ flex:1; height:3px; background:rgba(255,255,255,.25); cursor:pointer; position:relative; }
.mc-progress-fill{ position:absolute; left:0; top:0; height:100%; width:0%; background:var(--gold); pointer-events:none; }
.mc-speed{
  font-size:.72rem; border:1px solid rgba(255,255,255,.4); border-radius:4px; padding:3px 7px;
  background:none; color:var(--white); cursor:pointer; flex-shrink:0;
}

.modal-info{ flex:1; max-width:380px; padding:10px 4px 10px 0; overflow-y:auto; }
.modal-info.hidden{ display:none; }
.video-modal.info-hidden .modal-main{ gap:0; }
.modal-info h2{ font-size:1.9rem; margin-bottom:10px; }
.modal-meta{ font-size:.78rem; letter-spacing:1px; color:var(--gold); text-transform:uppercase; margin-bottom:24px; }
.modal-desc{ color:#ccc; line-height:1.85; font-size:.9rem; font-weight:300; margin-bottom:30px; }
.modal-details{
  display:grid; grid-template-columns:1fr 1fr; gap:22px 16px;
  border-top:1px solid rgba(255,255,255,.14); padding-top:22px;
}
.modal-details > div{
  display:flex; flex-direction:column; gap:6px;
}
.modal-details .d-label{
  font-size:.68rem; letter-spacing:1px; text-transform:uppercase; color:#888;
  display:block;
}
.modal-details .d-value{
  font-size:.85rem; color:#eee; line-height:1.5; display:block;
}

.modal-cards{
  flex-shrink:0; display:flex; gap:2px; overflow-x:auto; scrollbar-width:thin;
}
.modal-card{
  position:relative; flex:1 0 150px; max-width:220px; aspect-ratio:1/1; max-height:130px;
  background:none; border:none; padding:0;
  background-size:cover; background-position:center; cursor:pointer;
}
.modal-card::after{
  content:''; position:absolute; inset:0; background:rgba(0,0,0,.55);
  opacity:0; transition:opacity .3s ease;
}
.modal-card:hover::after{ opacity:1; }
.modal-card-overlay{
  position:absolute; inset:0; z-index:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px; text-align:center; padding:0 8%;
  opacity:0; transition:opacity .3s ease;
}
.modal-card:hover .modal-card-overlay{ opacity:1; }
.modal-card-title{
  font-size:.75rem; font-family:var(--serif); font-style:italic; line-height:1.25; color:var(--white);
}
.modal-card.active{ outline:2px solid var(--gold); outline-offset:-2px; z-index:1; }
.modal-card.active .modal-card-title{ color:var(--gold); }
.modal-card-overlay .play-btn.small{ gap:6px; }
.modal-card-overlay .play-btn.small .play-circle{ width:32px; height:32px; }
.modal-card-overlay .play-btn.small .play-circle svg{ width:10px; height:10px; }
.modal-card-overlay .play-btn.small .play-label{ display:none; }

.modal-toast{
  position:fixed; bottom:30px; left:50%; z-index:2100;
  transform:translateX(-50%) translateY(20px);
  background:var(--white); color:var(--black); padding:10px 22px;
  font-size:.8rem; border-radius:3px; opacity:0; pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}
.modal-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

@media (max-width:900px){
  .modal-topbar{ padding:16px 20px; }
  .modal-main{ flex-direction:column; padding:0 20px 16px; gap:18px; overflow-y:auto; }
  .modal-stage{ flex:none; height:42vh; min-height:240px; }
  .modal-info{ max-width:none; flex:none; padding:0; }
  .modal-details{ grid-template-columns:1fr 1fr; }
  .modal-card{ flex-basis:110px; max-height:100px; }
}

/* ---------- Page hero (sous-pages légales) ---------- */
.page-hero{
  position:relative; height:50vh; min-height:340px;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.bg-legal{ background-image:radial-gradient(circle at 50% 40%, #232323, #000 75%); }
.page-hero-content{ position:relative; z-index:2; text-align:center; }
.page-hero-content h1{ font-size:clamp(2.2rem,5vw,3.4rem); margin-top:14px; }

/* ---------- Intro / Bio ---------- */
.intro{
  display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:60px;
  padding:140px 6vw; background:var(--near-black);
}
.portrait-frame{
  aspect-ratio:3/4; width:100%; overflow:hidden;
  background:linear-gradient(160deg,#2a2a2a,#0d0d0d);
  border:1px solid rgba(255,255,255,.08);
  position:relative;
}
.portrait-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.portrait-frame::after{
  content:''; position:absolute; inset:16px; border:1px solid var(--gold); opacity:.4; pointer-events:none;
}
.intro-text h2{
  font-size:clamp(1.8rem, 3vw, 2.6rem); line-height:1.25; margin-bottom:26px; font-weight:400;
}
.intro-text h2 span{
  display:block; font-size:.42em; font-style:italic; color:var(--gray); margin-top:10px; font-family:var(--sans); letter-spacing:1px;
}
.intro-text p{ color:#c9c9c9; line-height:1.9; max-width:52ch; margin-bottom:24px; font-weight:300; }
.text-link{
  font-family:var(--serif); font-style:italic; color:var(--gold); border-bottom:1px solid var(--gold); padding-bottom:2px;
  transition:opacity .3s ease;
}
.text-link:hover{ opacity:.7; }

.services-overview{
  display:grid; grid-template-columns:repeat(3,1fr); background:var(--black); align-items:stretch;
  margin-top:-32px; position:relative; z-index:3;
}
.services-overview-header{
  grid-column:1 / -1; padding:110px 8vw 28px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:18px;
}
.services-overview-icon{
  width:46px; height:46px; color:var(--gold); display:flex; align-items:center; justify-content:center;
}
.services-overview-icon svg{
  width:100%; height:100%; display:block;
}
.services-overview-header h2{
  margin:0; color:var(--white); font-family:var(--sans); font-size:clamp(1.1rem, 1.8vw, 1.7rem);
  font-weight:300; letter-spacing:.18em; text-transform:uppercase;
}
.service-card{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:70px 7% 120px; color:var(--white); background:var(--black);
  border:none;
}
.service-card-inner{
  display:flex; flex-direction:column; align-items:center; gap:26px;
  transition:transform .45s ease;
}
.service-card:hover .service-card-inner{ transform:scale(1.04); }
.service-card h3{
  font-size:clamp(1.05rem, 1.4vw, 1.4rem); font-weight:500; font-family:var(--sans);
  color:var(--white); text-transform:uppercase; letter-spacing:.12em; margin:0;
}
.service-card p{
  font-family:var(--serif); font-style:italic; color:#d8d8d8; font-size:1rem; line-height:1.8; max-width:30ch; margin:0;
}
.service-card strong{ color:var(--gold); font-weight:700; }

/* ---------- Page Bio (texte + photo plein écran) ---------- */
.bio-intro{ background:var(--black); padding:180px 8vw 100px; }
.bio-intro-inner{ max-width:820px; }
.bio-intro-inner h1{
  font-size:clamp(1.9rem, 3.6vw, 3rem); line-height:1.25; margin-top:20px; margin-bottom:46px; font-weight:400;
}
.bio-intro-inner h1 span{
  display:block; font-size:.42em; font-style:italic; color:var(--gray); margin-top:12px;
  font-family:var(--sans); letter-spacing:1px;
}
.bio-intro-inner p{ color:#c9c9c9; line-height:1.9; max-width:72ch; margin-bottom:34px; font-weight:300; }
.bio-intro-inner p.bio-question{
  font-family:var(--sans); font-weight:700; color:var(--gold);
  font-size:1.2rem; line-height:1.6; max-width:none;
  margin-top:44px;
}

.bio-photo{
  position:relative; height:80vh; min-height:480px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:var(--black);
}
.bio-photo-img{
  max-width:88%; max-height:82%; width:auto; height:auto;
  object-fit:contain;
  animation:kenburns 20s ease-in-out infinite alternate;
}

/* ---------- Categories (fond blanc + icônes, comme le template) ---------- */
.categories{ display:grid; grid-template-columns:repeat(3,1fr); background:var(--white); }
.category-card{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:130px 7% 140px; color:#111;
  border-right:1px solid rgba(0,0,0,.08);
}
.category-card:last-child{ border-right:none; }
.category-card-inner{
  display:flex; flex-direction:column; align-items:center; gap:24px;
  transition:transform .45s ease;
}
.category-card:hover .category-card-inner{ transform:scale(1.06); }
.category-icon{ width:60px; height:60px; color:var(--gold); }
.category-card h3{ font-size:1.5rem; font-weight:700; font-family:var(--sans); color:#111; }
.category-card p{
  font-family:var(--serif); font-style:italic; color:#666; font-size:.9rem; line-height:1.75; max-width:30ch;
}

/* ---------- Prestations ---------- */
.services-overview{
  background:var(--black); padding:0;
}
.services-overview-inner{
  width:100%; max-width:none; margin:0; padding:100px 6vw 100px;
  min-height:100%;
  background:rgba(255,255,255,0.01);
  border:none;
  box-shadow:inset 0 0 0 1px rgba(209,171,92,0.14);
  position:relative;
}
.services-overview-inner::before{
  content:''; position:absolute; inset:0; border:1px solid rgba(209,171,92,0.7);
  pointer-events:none;
}
.services-header{ text-align:center; margin-bottom:40px; }
.services-header .eyebrow{
  font-size:clamp(1.25rem, 2vw, 1.9rem);
  letter-spacing:0.14em;
  font-weight:600;
}
.services-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:0; max-width:none; min-height:100%; margin:0; position:relative; z-index:1;
  align-items:stretch;
}
.service-block{
  text-align:center; padding:30px 32px 38px; display:flex; flex-direction:column; justify-content:center; align-items:center;
  border-right:1px solid rgba(255,255,255,0.08);
}
.service-block:last-child{ border-right:none; }
.service-block h3{
  font-size:clamp(1.15rem, 1.7vw, 1.55rem);
  font-family:var(--sans); font-weight:700; color:var(--white);
  margin:0 0 18px; letter-spacing:.04em;
}
.service-block p{
  margin:0; color:#d9d9d9; line-height:1.9; font-size:1rem; font-weight:300;
  max-width:30ch;
}
.service-block strong{ color:var(--gold); font-weight:700; }

/* ---------- Équipements (noir en haut, blanc en dessous) ---------- */
.equip-hero{
  position:relative; min-height:60vh; overflow:hidden;
  display:flex; align-items:center; padding:170px 8vw 90px;
}
.equip-hero-bg{
  position:absolute; inset:-5%; background-size:cover; background-position:center;
  background-image:radial-gradient(circle at 30% 40%, #242424, #000 75%);
  animation:kenburns 20s ease-in-out infinite alternate;
}
.equip-hero-content{ position:relative; z-index:2; max-width:640px; }
.equip-hero-content h1{ font-size:clamp(1.9rem,3.6vw,2.8rem); margin-bottom:22px; }
.equip-hero-content p{ color:#c9c9c9; line-height:1.85; font-weight:300; }

.equip-list{ background:var(--white); color:#111; padding:110px 8vw 130px; }
.equip-list-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:60px 60px;
  max-width:1160px; margin:0 auto;
}
.equip-block{ width:100%; display:flex; justify-content:center; }
.equip-list-grid .equip-block:nth-child(3n+2){ transition-delay:.12s; }
.equip-list-grid .equip-block:nth-child(3n){ transition-delay:.24s; }
.equip-block-inner{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  width:100%; transition:transform .45s ease;
}
.equip-block:hover .equip-block-inner{ transform:scale(1.06); }
.equip-icon{ width:42px; height:42px; color:var(--gold); margin-bottom:22px; }
.equip-block h3{
  font-family:var(--sans); font-weight:700; font-size:1.15rem; color:#111;
  margin-bottom:14px; letter-spacing:.2px;
}
.equip-block ul{ list-style:none; }
.equip-block li{
  font-family:var(--serif); font-style:italic; color:#555; font-size:.94rem; line-height:1.8;
}

.equip-photo{
  position:relative; height:70vh; min-height:420px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:var(--black);
}
.equip-photo-img{
  max-width:88%; max-height:82%; width:auto; height:auto;
  object-fit:contain;
  animation:kenburns 20s ease-in-out infinite alternate;
}

/* ---------- Pages légales ---------- */
.legal-content{
  max-width:760px; margin:0 auto; padding:110px 6vw 120px;
  color:#c9c9c9; font-weight:300; line-height:1.85;
}
.legal-content h2{ font-size:1.3rem; color:var(--white); margin:48px 0 16px; }
.legal-content h2:first-child{ margin-top:0; }
.legal-content p{ margin-bottom:16px; }
.legal-content ul{ margin:0 0 16px 22px; list-style:disc; }
.legal-content li{ margin-bottom:8px; }
.legal-content a{ color:var(--gold); text-decoration:underline; text-underline-offset:2px; }
.legal-content .updated{ color:#777; font-size:.8rem; margin-bottom:50px; }
.legal-content .placeholder{ color:var(--gold); font-style:italic; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--near-black); padding:120px 6vw 40px; text-align:center; }
.footer-inner{ max-width:560px; margin:0 auto; }
.site-footer h2{ font-size:2rem; margin-bottom:10px; }
.site-footer > .footer-inner > p{ color:#bbb; font-weight:300; margin-bottom:34px; }
.footer-contact{ display:flex; gap:10px; justify-content:center; font-size:.95rem; color:#ddd; margin-bottom:34px; flex-wrap:wrap; }
.footer-contact a{ text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(255,255,255,.35); }
.footer-contact a:hover{ color:var(--gold); text-decoration-color:var(--gold); }

.social-bar{ display:flex; gap:22px; justify-content:center; margin-bottom:60px; }
.social-bar a{
  width:38px; height:38px; border:1px solid rgba(255,255,255,.3); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:.8rem;
  transition:background .3s ease, border-color .3s ease;
}
.social-bar a:hover{ background:var(--gold); border-color:var(--gold); color:var(--black); }

.footer-legal{ display:flex; gap:22px; justify-content:center; font-size:.75rem; color:#999; margin-bottom:26px; flex-wrap:wrap; }
.footer-legal a:hover{ color:var(--gold); }
.footer-copy{ font-size:.72rem; color:#666; }

/* ---------- Reveal on scroll ----------
   Effet vertical bas -> haut : chaque élément marqué .reveal part
   légèrement décalé vers le bas et remonte en place au scroll. Les
   classes .reveal-d1..d4 ajoutent un délai pour faire apparaître les
   éléments d'un même groupe les uns après les autres. */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity .9s ease, transform .9s ease; }
.reveal.visible{ opacity:1; transform:translateY(0); }
.reveal-d1{ transition-delay:.12s; }
.reveal-d2{ transition-delay:.24s; }
.reveal-d3{ transition-delay:.36s; }
.reveal-d4{ transition-delay:.48s; }
.reveal-d5{ transition-delay:.6s; }

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .main-nav{
    position:fixed; top:0; right:0; height:100vh; width:min(78vw,340px);
    background:var(--near-black); transform:translateX(100%);
    transition:transform .5s ease; display:flex; align-items:center; z-index:550;
    box-shadow:-10px 0 30px rgba(0,0,0,.5);
  }
  .main-nav.open{ transform:translateX(0); }
  .main-nav ul{ flex-direction:column; gap:28px; padding:0 40px; }
  .burger{ display:flex; }
  .intro{ grid-template-columns:1fr; padding:100px 8vw; }
  .categories{ grid-template-columns:1fr; }
  .services-overview{ grid-template-columns:1fr; }
  .category-card{ border-right:none; border-bottom:1px solid rgba(0,0,0,.08); padding:70px 10%; }
  .category-card:last-child{ border-bottom:none; }
  .equip-list-grid{ grid-template-columns:repeat(2,1fr); gap:56px 50px; }
}

@media (max-width: 480px){
  .equip-list-grid{ grid-template-columns:1fr; gap:48px; }
  .logo-text{ font-size:10px; }
  .logo-img{ height:32px; width:32px; }
}