/* ============ TOKENS ============ */
:root{
  --bg:#ffffff;
  --fg:#161616;
  --fg-dim:#6b6b6b;
  --fg-faint:#a7a7a3;
  --line:rgba(20,20,20,0.12);
  --line-strong:rgba(20,20,20,0.32);
  --nav-line:rgba(20,20,20,0.62);
  --nav-line-dark:rgba(244,242,236,0.5);

  --dark-bg:#1c1c1c;
  --dark-fg:#f4f2ec;
  --dark-fg-dim:#a8a49c;
  --dark-line:rgba(244,242,236,0.16);
  --dark-line-strong:rgba(244,242,236,0.34);

  --sans:'Poppins', sans-serif;
  --serif:'Fraunces', serif;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{scroll-behavior:smooth;}
html, body, main, section{overflow-anchor:none;}
html{touch-action:manipulation;}

body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  cursor:none;
}

html.touch, html.touch *{cursor:auto !important;}
html.touch #cursor-dot{display:none;}

a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
h1,h2,h3,p{margin:0;}

::selection{background:var(--fg);color:var(--bg);}

/* ============ CUSTOM CURSOR ============ */
#cursor-dot{
  position:fixed;
  top:0;left:0;
  width:9px;height:9px;
  border-radius:50%;
  background:var(--fg);
  transform:translate3d(-50%,-50%,0);
  pointer-events:none;
  z-index:9999;
  opacity:0;
  transition:width .3s var(--ease), height .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease), opacity .4s var(--ease);
}
#cursor-dot.show{opacity:1;}
#cursor-dot.cursor-hover{
  width:38px;height:38px;
  background:transparent;
  border:1px solid var(--fg);
}
#cursor-dot.on-dark{background:var(--dark-fg);}
#cursor-dot.on-dark.cursor-hover{background:transparent;border-color:var(--dark-fg);}

/* ============ INTRO ============ */
#intro{
  position:fixed;inset:0;
  background:var(--bg);
  z-index:10000;
  display:flex;align-items:center;justify-content:center;
  clip-path:circle(150% at 50% 50%);
  transition:clip-path 1.05s var(--ease);
}
#intro.fade-out{clip-path:circle(0% at 50% 50%);}
#intro-logo{
  width:clamp(220px,32vw,440px);
  height:auto;
  opacity:0;
  transform:scale(1.1);
  filter:blur(18px);
  transition:opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease);
}
#intro-logo.in{opacity:1;transform:scale(1);filter:blur(0);}
#intro-logo.intro-exit{opacity:0;transform:scale(.92);filter:blur(6px);transition:opacity .6s var(--ease), transform .6s var(--ease), filter .6s var(--ease);}

/* ============ TOP BAR ============ */
#top-bar{
  position:fixed;top:0;left:0;right:0;
  display:flex;justify-content:space-between;align-items:center;
  padding:22px 5vw 22px calc(5vw + 64px);
  z-index:50;
  pointer-events:none;
}
.top-logo{display:block;height:22px;width:auto;transition:filter .4s var(--ease);}
.top-right{display:flex;align-items:center;gap:22px;pointer-events:none;}
.top-tag{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim);transition:color .4s var(--ease);}
#top-bar.on-dark .top-logo{filter:invert(1) brightness(1.3);}
#top-bar.on-dark .top-tag{color:var(--dark-fg-dim);}
@media (max-width:640px){ .top-tag{display:none;} }

#lang-toggle{
  pointer-events:auto;
  cursor:none;
  display:flex;align-items:center;gap:6px;
  background:transparent;
  border:1px solid var(--line-strong);
  border-radius:20px;
  padding:6px 12px;
  font-family:var(--sans);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.08em;
  color:var(--fg-dim);
  transition:border-color .4s var(--ease), color .4s var(--ease);
}
.lang-opt{transition:color .3s var(--ease), font-weight .3s var(--ease);}
.lang-sep{opacity:.4;}
html[data-lang="fr"] #lang-toggle .lang-opt[data-lang="fr"],
html[data-lang="en"] #lang-toggle .lang-opt[data-lang="en"]{color:var(--fg);font-weight:700;}
#top-bar.on-dark #lang-toggle{border-color:var(--dark-line-strong);color:var(--dark-fg-dim);}
html[data-lang="fr"] #top-bar.on-dark #lang-toggle .lang-opt[data-lang="fr"],
html[data-lang="en"] #top-bar.on-dark #lang-toggle .lang-opt[data-lang="en"]{color:var(--dark-fg);}

/* ============ SIDE NAV ============ */
#side-nav{
  position:fixed;left:0;top:0;
  height:100vh;width:60px;
  z-index:60;
  display:flex;align-items:center;
}
#side-nav::before{
  content:'';
  position:absolute;inset:0 auto 0 0;
  width:0;
  background:linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.82) 55%, rgba(255,255,255,0) 100%);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:width .5s var(--ease);
  pointer-events:none;
  z-index:-1;
}
#side-nav.hovering::before{width:min(540px, 90vw);}

.side-nav-track{
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(9px,2vh,18px);
  padding-left:26px;
  height:100%;
}
.nav-item{
  display:flex;align-items:center;
  height:16px;
  padding:7px 40px 7px 0;
  margin:-7px -40px -7px 0;
}
.nav-line{
  width:16px;height:1.5px;
  background:var(--nav-line);
  transition:width .45s var(--ease), background-color .45s var(--ease);
  flex-shrink:0;
}
.nav-text{
  display:flex;align-items:baseline;gap:10px;
  margin-left:14px;
  opacity:0;
  transform:translateX(-10px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
  white-space:nowrap;
}
.nav-num{font-family:var(--sans);font-weight:500;font-size:.68rem;letter-spacing:.08em;color:var(--fg-dim);}
.nav-title{font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--fg);}

.nav-item.peek .nav-line{width:30px;background:var(--fg);}
.nav-item.peek .nav-text{opacity:1;transform:translateX(0);}

.nav-item.active .nav-line{width:30px;background:var(--fg);}

#side-nav.on-dark::before{background:linear-gradient(90deg, rgba(28,28,28,.96) 0%, rgba(28,28,28,.82) 55%, rgba(28,28,28,0) 100%);}
#side-nav.on-dark .nav-line{background:var(--nav-line-dark);}
#side-nav.on-dark .nav-item.peek .nav-line,
#side-nav.on-dark .nav-item.active .nav-line{background:var(--dark-fg);}
#side-nav.on-dark .nav-num{color:var(--dark-fg-dim);}
#side-nav.on-dark .nav-title{color:var(--dark-fg);}

/* Tablets (touch, wider than a phone) keep the full nav — titles + click —
   just opened by tapping a tick instead of hovering (see script.js). */
html.touch .nav-item{cursor:default;}

@media (max-width:640px){
  #side-nav{width:30px;}
  .side-nav-track{padding-left:12px;gap:9px;}
  .nav-line{width:9px;}
  .nav-item{padding:10px 18px 10px 0;margin:-10px -18px -10px 0;}
  .nav-item.peek .nav-line{width:20px;}
  .nav-num{font-size:.72rem;}
  .nav-title{font-size:.76rem;}
  #side-nav.hovering::before{width:min(300px, 82vw);}

  /* Phones (touch, ≤640px): passive scroll indicator only — no menu, no
     titles, nothing clickable. Only the active tick still travels with scroll. */
  html.touch #side-nav::before{display:none;}
  html.touch .nav-text{display:none;}
  html.touch .nav-item{pointer-events:none;padding:0;margin:0;}
  html.touch .nav-line{width:6px;}
  html.touch .nav-item.active .nav-line{width:14px;}
}

/* ============ LAYOUT ============ */
main{position:relative;z-index:2;}

section{
  position:relative;
  padding-left:64px;
}

/* ============ HERO ============ */
#hero{
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:120px 6vw 60px calc(6vw + 64px);
  overflow:hidden;
  background:var(--bg);
}
.hero-mist{
  position:absolute;
  inset:-10% -10%;
  background-image:url('../image/hero-cloud.png');
  background-size:cover;
  background-position:center 34%;
  background-repeat:no-repeat;
  filter:contrast(1.32) brightness(1.03) saturate(0);
  mix-blend-mode:multiply;
  opacity:.9;
  animation:mistDrift 10s ease-in-out infinite;
  will-change:transform;
  pointer-events:none;
  z-index:0;
}
.hero-mist::after{
  content:'';
  position:absolute;inset:0;
  background-image:url('../image/hero-cloud.png');
  background-size:150% auto;
  background-position:70% 60%;
  filter:contrast(1.4) brightness(1.1) saturate(0);
  mix-blend-mode:multiply;
  opacity:.5;
  animation:mistDriftAlt 15s ease-in-out infinite;
}
@keyframes mistDrift{
  0%{transform:scale(1.1) translate(0%,0%) rotate(0deg);}
  33%{transform:scale(1.22) translate(-3.5%,2.4%) rotate(.6deg);}
  66%{transform:scale(1.16) translate(3%,-2.6%) rotate(-.5deg);}
  100%{transform:scale(1.1) translate(0%,0%) rotate(0deg);}
}
@keyframes mistDriftAlt{
  0%{transform:scale(1) translate(0%,0%);}
  50%{transform:scale(1.12) translate(-4%,3%);}
  100%{transform:scale(1) translate(0%,0%);}
}
.hero-inner{position:relative;z-index:1;max-width:760px;}
.hero-bottom{z-index:1;}
.hero-logo-img{
  width:clamp(280px,42vw,560px);
  height:auto;
  margin:0 auto;
}
.hero-sub{
  margin:26px auto 0;
  max-width:600px;
  font-weight:400;
  font-size:clamp(1rem,1.6vw,1.2rem);
  line-height:1.55;
  color:var(--fg);
}
.hero-desc{
  margin:22px auto 0;
  max-width:560px;
  font-size:.92rem;
  line-height:1.8;
  color:var(--fg-dim);
}
.hero-desc{
  cursor:none;
  transform:scale(1);
  transition:color .3s var(--ease), -webkit-text-stroke-width .3s var(--ease), transform .35s var(--ease);
  -webkit-text-stroke:0px currentColor;
}
.hero-desc.in-view:hover{
  color:var(--fg);
  -webkit-text-stroke:.4px currentColor;
  transform:scale(1.035);
}

.hero-sub .hover-word{
  cursor:none;
  transition:color .22s var(--ease), -webkit-text-stroke-width .22s var(--ease);
  -webkit-text-stroke:0px currentColor;
}
.hero-sub .hover-word:hover{
  color:var(--fg);
  -webkit-text-stroke:.5px currentColor;
}
.hero-bottom{
  position:relative;
  margin-top:70px;
  display:flex;flex-direction:column;align-items:center;gap:22px;
}
.hero-counter{
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.2em;
  color:var(--fg-faint);
}
.hero-quote{
  font-family:var(--sans);
  font-weight:600;
  font-size:clamp(.78rem,1.3vw,.92rem);
  letter-spacing:.04em;
  line-height:1.7;
  color:var(--fg);
  max-width:520px;
  text-transform:uppercase;
}
.scroll-cue{
  font-size:.65rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--fg-faint);
  position:relative;
  padding-top:22px;
}
.scroll-cue::before{
  content:'';
  position:absolute;top:0;left:50%;
  width:1px;height:16px;
  background:var(--line-strong);
  transform:translateX(-50%);
  animation:scrollLine 1.8s ease-in-out infinite;
}
@keyframes scrollLine{
  0%{transform:translateX(-50%) scaleY(0);transform-origin:top;opacity:0;}
  40%{transform:translateX(-50%) scaleY(1);transform-origin:top;opacity:1;}
  60%{transform:translateX(-50%) scaleY(1);transform-origin:bottom;opacity:1;}
  100%{transform:translateX(-50%) scaleY(0);transform-origin:bottom;opacity:0;}
}

/* ============ PAGE SECTIONS ============ */
.page{
  min-height:100vh;
  display:flex;align-items:center;
  padding-top:140px;padding-bottom:140px;
  border-top:1px solid var(--line);
}
.page-inner{
  width:100%;
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 340px;
  gap:20px 70px;
  align-items:center;
}
.page-num{
  grid-column:1;
  font-family:var(--sans);
  font-weight:500;
  font-size:.85rem;
  letter-spacing:.1em;
  color:var(--fg-faint);
  display:block;
  margin-bottom:14px;
}
.page-title{
  grid-column:1;
  font-family:var(--sans);
  font-weight:700;
  text-transform:uppercase;
  font-size:clamp(1.6rem,3.4vw,2.5rem);
  letter-spacing:.01em;
  line-height:1.18;
  margin-bottom:22px;
}
.page-kicker{
  grid-column:1;
  font-size:.78rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--fg-dim);
  max-width:440px;
  margin-bottom:30px;
}
.page-body{
  grid-column:1;
  max-width:480px;
}
.page-body p{
  color:var(--fg-dim);
  line-height:1.8;
  font-size:.96rem;
  margin-bottom:18px;
}
.page-body h3{
  font-family:var(--sans);
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--fg);
  margin-bottom:10px;
}
.page-body.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:36px;
  max-width:640px;
}
@media (max-width:900px){
  .page-body.two-col{grid-template-columns:1fr;}
}

.card-shot{
  grid-column:2;grid-row:1 / span 5;
  justify-self:center;
  width:100%;
  max-width:340px;
  filter:drop-shadow(0 20px 40px rgba(20,20,20,.22));
  transition:transform .5s var(--ease);
  will-change:transform;
}
.card-shot img{width:100%;height:auto;display:block;}

/* logo-only visual (VIP section) */
.logo-shot{
  grid-column:2;grid-row:1 / span 5;
  justify-self:center;
  width:100%;
  max-width:180px;
  filter:drop-shadow(0 14px 30px rgba(20,20,20,.14));
}
.logo-shot img{width:100%;height:auto;}

/* photo visual (Seminaire section) */
.photo-shot{
  grid-column:2;grid-row:1 / span 5;
  justify-self:center;
  width:100%;
  max-width:340px;
  border-radius:2px;
  overflow:hidden;
  filter:drop-shadow(0 24px 46px rgba(20,20,20,.22));
}
.photo-shot img{width:100%;height:auto;display:block;}

@media (max-width:820px){
  .page-inner{grid-template-columns:1fr;}
  .page-num,.page-title,.page-kicker,.page-body{grid-column:1;}
  .card-shot,.logo-shot,.photo-shot{grid-column:1;grid-row:auto;margin-top:36px;max-width:300px;}
}

/* ticket special line */
.ticket-line{
  font-family:var(--sans);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.03em;
  font-size:.98rem;
  color:var(--fg);
  line-height:1.6;
  margin:26px 0 30px !important;
}

/* ============ FAQ ============ */
.faq-list{grid-column:1;max-width:700px;margin-top:10px;}
.faq-item{
  border-bottom:1px solid var(--line);
  padding:22px 0;
}
.faq-item summary{
  cursor:none;
  list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  font-family:var(--sans);
  font-weight:500;
  font-size:1rem;
  color:var(--fg);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:'+';
  font-family:var(--sans);
  font-weight:300;
  font-size:1.4rem;
  color:var(--fg-dim);
  transition:transform .4s var(--ease);
  flex-shrink:0;
}
.faq-item[open] summary::after{transform:rotate(135deg);}
.faq-item p{
  margin-top:14px;
  color:var(--fg-dim);
  line-height:1.75;
  font-size:.92rem;
  max-width:580px;
}

/* ============ CONTACT (dark section) ============ */
#contact{
  padding-top:140px;padding-bottom:60px;
  background:var(--dark-bg);
  color:var(--dark-fg);
}
.contact-inner{max-width:800px;margin:0 auto;padding-left:6px;}
#contact .page-num{color:var(--dark-fg-dim);}
.contact-title-word{
  font-family:var(--sans);
  font-weight:700;
  text-transform:uppercase;
  font-size:clamp(1.6rem,3.4vw,2.5rem);
  color:var(--dark-fg);
  margin-bottom:10px;
}
.contact-wordmark{
  width:clamp(200px,26vw,320px);
  height:auto;
  margin-bottom:26px;
}
.contact-desc{
  color:var(--dark-fg-dim);
  line-height:1.8;
  font-size:.98rem;
  max-width:520px;
  margin-bottom:50px;
}
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px 40px;
  margin-bottom:100px;
}
.contact-link, .contact-plain{
  display:flex;align-items:center;gap:10px;
  font-family:var(--sans);
  font-weight:500;
  font-size:1.15rem;
  color:var(--dark-fg);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), opacity .3s var(--ease);
  width:fit-content;
}
.contact-link:hover{border-color:var(--dark-line-strong);opacity:.8;}
.ig-icon{width:18px;height:18px;flex-shrink:0;}
@media (max-width:560px){ .contact-grid{grid-template-columns:1fr;} }

.site-footer{
  display:flex;justify-content:space-between;align-items:center;
  border-top:1px solid var(--dark-line);
  padding:26px 0;
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--dark-fg-dim);
}
.site-footer .footer-word{height:16px;width:auto;}

/* ============ SCROLL REVEAL ============ */
.reveal{
  opacity:0;
  transform:translateY(34px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.in-view{opacity:1;transform:translateY(0);}

.page-body .reveal:nth-child(2){transition-delay:.08s;}
.page-body .reveal:nth-child(3){transition-delay:.16s;}
.contact-grid.reveal .contact-link:nth-child(2),
.contact-grid.reveal .contact-link:nth-child(3){transition-delay:.05s;}

@media (max-width:820px){
  .page{padding-top:100px;padding-bottom:100px;}
  #contact{padding-top:100px;}
}

@media (max-width:640px){
  section{padding-left:32px;padding-right:24px;}
  #hero{padding-left:32px;padding-right:24px;}
  #top-bar{padding-left:32px;}

  .hero-logo-img{width:min(260px, 72vw);}
  #intro-logo{width:min(200px, 64vw);}

  .card-shot{max-width:min(300px, 82vw);}
  .logo-shot{max-width:min(150px, 45vw);}
  .photo-shot{max-width:min(300px, 82vw);}

  .page{padding-top:80px;padding-bottom:80px;}
  #contact{padding-top:80px;}

  .site-footer{flex-direction:column;align-items:flex-start;gap:14px;}

  /* smooth CSS-gradient mist on phones — the desktop photo, forced into a
     tall narrow "cover" crop, either zoomed into its blank center (invisible)
     or tiled/repeated (double, hard-edged). A soft radial wash reads cleanly
     at any phone aspect ratio instead. */
  .hero-mist::after{display:none;}
  .hero-mist{
    inset:-8% -8%;
    background-image:
      radial-gradient(ellipse 62% 30% at 28% 18%, rgba(90,90,90,.4), transparent 62%),
      radial-gradient(ellipse 55% 32% at 78% 46%, rgba(120,120,120,.32), transparent 64%),
      radial-gradient(ellipse 75% 38% at 45% 92%, rgba(80,80,80,.3), transparent 68%);
    background-size:auto;
    filter:none;
    mix-blend-mode:normal;
    opacity:1;
    animation-duration:16s;
  }
}