/* =============================================================
   CHLOÉ STORY — Feuille de style
   Univers : cinéma · luxe · minimalisme · émotion
   Fidèle au visuel : Poppins capitales, or, noir, caméra ciné
   ============================================================= */

:root{
  --black:      #0A0A0A;
  --black-2:    #101012;
  --panel:      #141416;
  --panel-2:    #1a1a1d;
  --line:       rgba(255,255,255,.08);
  --line-gold:  rgba(212,175,55,.30);

  --gold:       #D4AF37;
  --gold-soft:  #E7C86B;
  --gold-bright:#F3DE9B;
  --gold-grad:  linear-gradient(135deg,#F3DE9B 0%,#D4AF37 45%,#B8912B 100%);

  --white:      #F8F8F8;
  --mute:       #A0A09B;
  --mute-2:     #6d6d69;

  --sans:    "Poppins", system-ui, -apple-system, sans-serif;
  --display: "Poppins", system-ui, -apple-system, sans-serif;

  --ease: cubic-bezier(.7,0,.15,1);
  --shutter-cover: 640ms;
  --shutter-reveal: 720ms;

  --container: 1240px;
}

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

html{ scroll-behavior:smooth; overflow-x:hidden; }

body{
  font-family:var(--sans);
  background:var(--black);
  color:var(--white);
  font-weight:300;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.no-scroll{ overflow:hidden; }

::selection{ background:var(--gold); color:var(--black); }

a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }

/* --------- Typographic helpers ------------------------------ */
.overline{
  font-size:.72rem;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:400;
}
.overline--muted{ color:var(--mute); letter-spacing:.5em; }
.accent{ color:var(--gold); }

.section-title{
  font-family:var(--display);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:clamp(1.5rem,3.6vw,2.5rem);
  line-height:1.25;
  margin-top:.9rem;
}
.section-rule{
  width:56px; height:1px; margin:1.6rem auto 0;
  background:var(--gold-grad);
}
.section-head{ text-align:center; max-width:680px; margin:0 auto 3.4rem; }

/* =============================================================
   GRAIN + OBTURATEUR (volet oblique coulissant)
   ============================================================= */
.grain{
  position:fixed; inset:0; z-index:5; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.shutter{
  position:fixed; inset:0; z-index:1000; pointer-events:none;
  overflow:hidden;
  visibility:hidden;               /* strictement invisible hors transition */
}
.shutter.cover, .shutter.reveal{ visibility:visible; }

.shutter__panel,
.shutter__blade{
  position:absolute; top:-10%;
  height:120%; width:130vw;
  left:-15vw;
  transform:translateX(120vw) skewX(-11deg);
  will-change:transform;
}
.shutter__panel{
  background:linear-gradient(135deg, rgba(44,44,48,.92) 0%, rgba(22,22,25,.94) 72%);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  display:flex; align-items:center; justify-content:center;
}
.shutter__blade{
  width:5vw;
  background:linear-gradient(135deg, rgba(212,175,55,.55), rgba(212,175,55,.12));
  box-shadow:0 0 34px 5px rgba(212,175,55,.22);
  z-index:2;
}
.shutter__mark{
  width:min(140px,28vw); height:auto;
  transform:skewX(11deg) scale(.85);
  opacity:0;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.5));
  transition:opacity .4s ease .1s, transform .6s var(--ease) .1s;
}

/* --- Sens normal (page suivante) : entre par la droite ------ */
.shutter.cover .shutter__panel{ transition:transform var(--shutter-cover) var(--ease); transform:translateX(0) skewX(-11deg); }
.shutter.cover .shutter__blade{ transition:transform var(--shutter-cover) var(--ease); transform:translateX(-4vw) skewX(-11deg); }
.shutter.cover .shutter__mark{ opacity:1; transform:skewX(11deg) scale(1); }
.shutter.reveal .shutter__panel{ transition:transform var(--shutter-reveal) var(--ease); transform:translateX(-140vw) skewX(-11deg); }
.shutter.reveal .shutter__blade{ transition:transform var(--shutter-reveal) var(--ease); transform:translateX(-150vw) skewX(-11deg); }
.shutter.reveal .shutter__mark{ opacity:0; transition:opacity .3s ease; }

/* --- Sens inversé (page précédente) : entre par la gauche --- */
.shutter.reverse .shutter__panel,
.shutter.reverse .shutter__blade{ transform:translateX(-140vw) skewX(-11deg); }
.shutter.reverse.cover .shutter__blade{ transform:translateX(4vw) skewX(-11deg); }
.shutter.reverse.reveal .shutter__panel{ transform:translateX(140vw) skewX(-11deg); }
.shutter.reverse.reveal .shutter__blade{ transform:translateX(150vw) skewX(-11deg); }

/* =============================================================
   EN-TÊTE
   ============================================================= */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.4rem clamp(1.2rem,4vw,3.2rem);
  transition:background .4s ease, padding .4s ease, backdrop-filter .4s ease;
}
.site-header.scrolled{
  background:rgba(10,10,10,.72);
  backdrop-filter:blur(14px);
  padding-top:.9rem; padding-bottom:.9rem;
  border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; }
.brand__logo{
  width:185px; height:185px; border-radius:6px; object-fit:cover;
  box-shadow:0 0 0 1px var(--line-gold);
  transition:width .45s var(--ease), height .45s var(--ease);
}
.site-header.scrolled .brand__logo{ width:72px; height:72px; }

.nav{ display:flex; align-items:center; gap:2.2rem; }
.nav__link{
  font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--mute); position:relative; padding:.3rem 0;
  transition:color .3s ease;
}
.nav__link::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0;
  background:var(--gold-grad); transition:width .35s var(--ease);
}
.nav__link:hover{ color:var(--white); }
.nav__link:hover::after{ width:100%; }
.nav__cta{
  font-size:.74rem; letter-spacing:.18em; text-transform:uppercase;
  padding:.6rem 1.3rem; border:1px solid var(--line-gold); border-radius:2px;
  color:var(--gold); transition:all .35s ease;
}
.nav__cta:hover{ background:var(--gold); color:var(--black); border-color:var(--gold); }

.burger{
  display:none; flex-direction:column; gap:5px; background:none; border:none;
  cursor:pointer; padding:6px; z-index:210;
}
.burger span{ width:26px; height:2px; background:var(--white); transition:.3s var(--ease); }
.burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:190;
  background:rgba(8,8,9,.97); backdrop-filter:blur(8px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.6rem; opacity:0; visibility:hidden; transition:opacity .4s ease, visibility .4s;
}
.mobile-menu.open{ opacity:1; visibility:visible; }
.mobile-menu a{
  font-family:var(--display); font-size:1.15rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--white); font-weight:300;
  opacity:.85; transition:color .3s, transform .3s;
}
.mobile-menu a:hover{ color:var(--gold); transform:translateX(4px); }

/* =============================================================
   VUES + TRANSITIONS
   ============================================================= */
.view{ display:none; }
.view.is-active{ display:block; animation:viewIn .9s var(--ease) both; }
@keyframes viewIn{ from{opacity:0} to{opacity:1} }

/* =============================================================
   HERO (fidèle au visuel : texte gauche, caméra droite)
   ============================================================= */
.hero{
  position:relative; min-height:100vh; overflow:hidden;
  display:flex; align-items:center;
}
.hero__media{
  position:absolute; top:0; right:0; bottom:0; width:62%;
  background:url("../assets/hero-camera.jpg") center right / cover no-repeat;
}
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, var(--black) 6%, rgba(10,10,10,.68) 40%, rgba(10,10,10,.12) 100%),
    linear-gradient(0deg, var(--black) 1%, transparent 26%),
    linear-gradient(180deg, var(--black) 1%, transparent 22%);
}
.hero__inner{
  position:relative; z-index:2; width:100%;
  max-width:var(--container); margin:0 auto;
  padding:8rem clamp(1.4rem,6vw,7rem) 5rem;
}
.hero__content{ max-width:600px; }
.hero__title{
  font-family:var(--display); font-weight:300;
  text-transform:uppercase; letter-spacing:.06em;
  font-size:clamp(4rem,13vw,9rem); line-height:.98;
  margin:.4rem 0 0; color:var(--white);
  text-shadow:0 12px 50px rgba(0,0,0,.5);
}
.hero__rule{ width:clamp(180px,24vw,360px); height:1px; background:var(--gold-grad); margin:1.6rem 0; }
.hero__sub{
  text-transform:uppercase; letter-spacing:.42em; font-size:.82rem;
  color:var(--white); margin-bottom:2rem;
}
.hero__lead{
  max-width:440px; color:var(--mute); font-size:1rem; line-height:1.85;
}
.hero__actions{ margin-top:2.4rem; }

.hero__socials{ display:flex; align-items:center; gap:1rem; margin-top:2.6rem; }
.hero__socials-label{
  font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; color:var(--mute-2);
  margin-right:.3rem;
}
.hsocial{
  width:46px; height:46px; border-radius:3px;
  display:grid; place-items:center; color:var(--mute);
  border:1px solid var(--line); background:rgba(20,20,22,.35);
  transition:all .4s var(--ease);
}
.hsocial svg{ width:20px; height:20px; }
.hsocial:hover{
  color:var(--black); background:var(--gold-grad); border-color:transparent;
  transform:translateY(-4px); box-shadow:0 10px 26px rgba(212,175,55,.3);
}

.scroll-cue{
  position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%);
  z-index:2; display:flex; flex-direction:column; align-items:center; gap:.6rem;
  color:var(--mute); font-size:.6rem; letter-spacing:.35em; text-transform:uppercase;
}
.scroll-cue__mouse{
  width:22px; height:34px; border:1px solid var(--line-gold); border-radius:12px;
  display:flex; justify-content:center; padding-top:6px;
}
.scroll-cue__mouse span{
  width:3px; height:7px; border-radius:2px; background:var(--gold);
  animation:scrollDot 1.8s var(--ease) infinite;
}
@keyframes scrollDot{ 0%{opacity:0;transform:translateY(-4px)} 30%{opacity:1} 60%{opacity:1;transform:translateY(6px)} 100%{opacity:0;transform:translateY(10px)} }

/* =============================================================
   BOUTONS (contour or → plein au survol, comme le visuel)
   ============================================================= */
.btn{
  display:inline-flex; align-items:center; gap:.8rem;
  font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; font-weight:400;
  padding:1rem 1.9rem; border-radius:2px; cursor:pointer;
  transition:all .4s var(--ease); position:relative;
}
.btn__arrow{ transition:transform .4s var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(5px); }
.btn--gold{ border:1px solid var(--gold); color:var(--gold); background:transparent; }
.btn--gold:hover{ background:var(--gold-grad); color:#1a1508; border-color:transparent; box-shadow:0 10px 30px rgba(212,175,55,.28); }
.btn--ghost{ border:1px solid var(--line); color:var(--white); }
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold); }

/* =============================================================
   SERVICES
   ============================================================= */
.services{ padding:6rem clamp(1.4rem,6vw,7rem); max-width:var(--container); margin:0 auto; }
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.card{
  position:relative; padding:2.6rem 2rem 2.2rem;
  background:linear-gradient(160deg,var(--panel) 0%,var(--black-2) 100%);
  border:1px solid var(--line); border-radius:4px; overflow:hidden;
  transition:transform .5s var(--ease), border-color .5s ease, box-shadow .5s ease;
}
.card::before{
  content:""; position:absolute; inset:0; opacity:0;
  background:radial-gradient(90% 60% at 50% 0%, rgba(212,175,55,.10), transparent 70%);
  transition:opacity .5s ease;
}
.card:hover{ transform:translateY(-8px); border-color:var(--line-gold); box-shadow:0 24px 50px rgba(0,0,0,.5); }
.card:hover::before{ opacity:1; }
.card__num{
  position:absolute; top:1.5rem; right:1.7rem;
  font-size:.8rem; letter-spacing:.1em; color:var(--mute-2);
}
.card__icon{ display:block; width:50px; height:50px; color:var(--gold); margin-bottom:1.6rem; }
.card__icon svg{ width:100%; height:100%; }
.card__title{
  font-family:var(--display); text-transform:uppercase; letter-spacing:.12em;
  font-weight:500; font-size:1rem; margin-bottom:.9rem;
}
.card__text{ color:var(--mute); font-size:.92rem; margin-bottom:1.6rem; }
.card__more{
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
  display:inline-flex; gap:.5rem; align-items:center;
}
.card__more span{ transition:transform .4s var(--ease); }
.card:hover .card__more span{ transform:translateX(5px); }

/* =============================================================
   GALERIE / RÉALISATIONS
   ============================================================= */
.gallery{ padding:4rem clamp(1.4rem,6vw,7rem) 6rem; max-width:1340px; margin:0 auto; }
.gallery__grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; }
.gallery__item{
  position:relative; aspect-ratio:3/4; overflow:hidden;
  border:1px solid var(--line); border-radius:4px;
}
.gallery__item img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.15) brightness(.82);
  transition:transform .8s var(--ease), filter .5s ease;
}
.gallery__item:hover img{ transform:scale(1.07); filter:grayscale(0) brightness(1); }
.gallery__play{
  position:absolute; inset:0; display:grid; place-items:center;
  color:#fff; opacity:.9; transition:transform .4s var(--ease), opacity .4s;
  pointer-events:none;
}
.gallery__play svg{ width:52px; height:52px; filter:drop-shadow(0 4px 14px rgba(0,0,0,.6)); }
.gallery__item--play:hover .gallery__play{ transform:scale(1.12); opacity:1; }

/* =============================================================
   CONTACT
   ============================================================= */
.contact{ position:relative; padding:7rem clamp(1.4rem,6vw,7rem) 6rem; overflow:hidden; }
.contact__glow{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 60% at 50% 0%, rgba(212,175,55,.10), transparent 65%);
}
.contact__inner{ position:relative; max-width:900px; margin:0 auto; text-align:center; }
.contact__grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; max-width:640px;
  margin:0 auto 3.4rem;
}
.contact__item{
  padding:1.8rem; border:1px solid var(--line); border-radius:4px;
  display:flex; flex-direction:column; gap:.5rem; transition:all .4s var(--ease);
  background:var(--black-2);
}
.contact__item:hover{ border-color:var(--line-gold); transform:translateY(-4px); }
.contact__label{ font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; color:var(--mute-2); }
.contact__value{ font-size:1.1rem; color:var(--white); letter-spacing:.02em; }
.contact__item:hover .contact__value{ color:var(--gold); }
.contact__follow{ font-size:.68rem; letter-spacing:.34em; text-transform:uppercase; color:var(--mute); margin-bottom:1.4rem; }

.socials{ display:flex; justify-content:center; flex-wrap:wrap; gap:1rem; }
.social{
  display:inline-flex; align-items:center; gap:.7rem;
  padding:.8rem 1.4rem; border:1px solid var(--line); border-radius:2px;
  font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mute);
  transition:all .4s var(--ease);
}
.social svg{ width:20px; height:20px; }
.social:hover{ color:var(--black); background:var(--gold-grad); border-color:transparent; transform:translateY(-3px); }

/* =============================================================
   PAGES ACTIVITÉS
   ============================================================= */
.page{ max-width:920px; margin:0 auto; padding:9rem clamp(1.4rem,6vw,3rem) 5rem; }
.back{
  display:inline-block; font-size:.74rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--mute); margin-bottom:3rem; transition:color .3s, transform .3s;
}
.back:hover{ color:var(--gold); transform:translateX(-4px); }
.page__hero{ margin-bottom:3.4rem; }
.page__title{
  font-family:var(--display); font-weight:300;
  text-transform:uppercase; letter-spacing:.06em; line-height:1.05;
  font-size:clamp(2.2rem,6.5vw,4.4rem); margin:1.2rem 0 0;
}
.page__title .accent{ color:var(--gold); }
.page__rule{ width:clamp(140px,20vw,280px); height:1px; background:var(--gold-grad); margin:1.6rem 0; }
.page__lead{ max-width:640px; color:var(--mute); font-size:1.05rem; line-height:1.85; margin-top:1.6rem; }

.page__body{ display:grid; grid-template-columns:1fr 1fr; gap:3.4rem; margin-top:1rem; }
.prose h2, .steps h2{
  font-family:var(--display); text-transform:uppercase; letter-spacing:.12em;
  font-weight:500; font-size:1.05rem; margin-bottom:1.6rem;
  padding-bottom:1rem; border-bottom:1px solid var(--line); color:var(--white);
}
.ticks{ list-style:none; display:flex; flex-direction:column; gap:1rem; }
.ticks li{ position:relative; padding-left:1.9rem; color:var(--mute); }
.ticks li::before{
  content:""; position:absolute; left:0; top:.55em; width:10px; height:6px;
  border-left:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold);
  transform:rotate(-45deg);
}
.timeline{ list-style:none; display:flex; flex-direction:column; gap:1.8rem; }
.timeline li{ display:flex; gap:1.2rem; }
.timeline__k{ color:var(--gold); font-size:.95rem; letter-spacing:.08em; min-width:2rem; padding-top:.15rem; }
.timeline h4{ font-weight:500; font-size:.98rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:.4rem; }
.timeline p{ color:var(--mute); font-size:.92rem; }

.page__cta{
  margin-top:5rem; padding:3.4rem; text-align:center; border-radius:6px;
  background:linear-gradient(160deg,var(--panel) 0%,var(--black-2) 100%);
  border:1px solid var(--line-gold);
}
.page__cta h3{
  font-family:var(--display); font-weight:300; text-transform:uppercase;
  letter-spacing:.1em; font-size:1.5rem; margin-bottom:1.8rem;
}

/* =============================================================
   PIED DE PAGE
   ============================================================= */
.site-footer{
  border-top:1px solid var(--line); padding:4rem clamp(1.4rem,6vw,7rem) 2.4rem;
  display:grid; grid-template-columns:1.4fr 2fr; gap:3rem; max-width:1400px; margin:0 auto;
}
.site-footer__brand img{ width:56px; height:56px; border-radius:4px; box-shadow:0 0 0 1px var(--line-gold); }
.site-footer__brand p{ color:var(--mute); letter-spacing:.06em; margin-top:1rem; font-size:.9rem; }
.site-footer__nav{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.site-footer__nav h5{
  font-size:.68rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gold);
  margin-bottom:1.2rem; font-weight:500;
}
.site-footer__nav a{ display:block; color:var(--mute); font-size:.88rem; padding:.28rem 0; transition:color .3s, padding-left .3s; }
.site-footer__nav a:hover{ color:var(--white); padding-left:.3rem; }
.site-footer__legal{
  grid-column:1 / -1; border-top:1px solid var(--line); margin-top:1.4rem; padding-top:1.6rem;
  color:var(--mute-2); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; text-align:center;
}

/* =============================================================
   RÉVÉLATIONS AU SCROLL
   ============================================================= */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.cards .card.reveal:nth-child(2){ transition-delay:.1s; }
.cards .card.reveal:nth-child(3){ transition-delay:.2s; }
.gallery__grid .gallery__item.reveal:nth-child(2){ transition-delay:.08s; }
.gallery__grid .gallery__item.reveal:nth-child(3){ transition-delay:.16s; }
.gallery__grid .gallery__item.reveal:nth-child(4){ transition-delay:.24s; }
.gallery__grid .gallery__item.reveal:nth-child(5){ transition-delay:.32s; }

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width:1000px){
  .gallery__grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:900px){
  .nav{ display:none; }
  .burger{ display:flex; }
  .cards{ grid-template-columns:1fr; }
  .page__body{ grid-template-columns:1fr; gap:2.4rem; }
  .site-footer{ grid-template-columns:1fr; }
  .site-footer__nav{ grid-template-columns:1fr 1fr; }
  .hero__media{ width:100%; }
  .hero__media::after{
    background:
      linear-gradient(90deg, var(--black) 20%, rgba(10,10,10,.72) 60%, rgba(10,10,10,.4) 100%),
      linear-gradient(0deg, var(--black) 2%, transparent 40%);
  }
}
@media (max-width:560px){
  .contact__grid{ grid-template-columns:1fr; }
  .gallery__grid{ grid-template-columns:repeat(2,1fr); }
  .hero__actions .btn{ width:100%; justify-content:center; }
  .hero__socials{ flex-wrap:wrap; }
  .brand__logo{ width:110px; height:110px; }
  .site-header.scrolled .brand__logo{ width:58px; height:58px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
}