:root{
  --black:#000000;
  --beige:#E2D2B6;
  --text:#111111;
  --maxw:1120px;
}

/* Base */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--beige);
  color:var(--black);
  font-family:'Space Grotesk', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.container{ max-width:var(--maxw); margin:0 auto; padding:clamp(16px,3vw,40px); }
.section{ padding:clamp(48px,12vw,160px) 0; }

/* ---------------- HERO ---------------- */
.hero{
  position:relative;
  min-height:100svh;                 /* 90% de l’écran pour entrevoir la suite */
  display:grid;
  place-items:center;
  overflow:hidden;
  background:var(--black);
  color:var(--beige);
}
.hero__content{ position:relative; text-align:center; z-index:1; }

.logo{
  font-family:'Space Grotesk', system-ui, sans-serif;
  letter-spacing:.08em;
  font-size:clamp(40px,8vw,112px);
  margin:0 0 .25em 0;
  position:relative;
  white-space:nowrap;               /* pour l’anim d’écriture */
  font-variant-ligatures:none;
}

/* Caret du typewriter (sera retiré par le JS à la fin) */
.logo .caret{
  display:inline-block;
  width:2px;
  height:.9em;
  background:currentColor;
  vertical-align:-.08em;
  margin-left:2px;
  animation:caret-blink 1s step-end infinite;
}
@keyframes caret-blink { 50% { opacity:0; } }

.tagline{
  font-family:'Playfair Display', ui-serif, Georgia, serif;
  font-size:clamp(16px,2.2vw,24px);
  margin:0 auto;
  opacity:.95;

  /* se révèle après le titre */
  opacity:0;
  transform:translateY(8px);
  transition:opacity 600ms ease 120ms, transform 600ms ease 120ms;
}
.tagline.in-view{ opacity:1; transform:none; }

.fault-line{
  width:min(68vw,680px);
  height:1px;
  background:linear-gradient(90deg,transparent,var(--beige),transparent);
  transform:skewY(-12deg);
  margin:clamp(16px,3vw,40px) auto 0;
  opacity:.6;
}

.scroll-cue{
  display:inline-block;
  margin-top:clamp(12px,3vw,40px);
  color:var(--beige);
  text-decoration:none;
  border-bottom:1px solid currentColor;
  opacity:.8;
}

/* ---------------- STATEMENT (clair par défaut) ---------------- */
.statement{ background:var(--beige); color:var(--black); }

.statement__text{
  font-family:'Playfair Display', ui-serif, Georgia, serif;
  font-size:clamp(18px,2.2vw,24px);
  max-width:60ch;
  margin:0 auto;
  text-wrap:pretty;
  line-height:1.6;
  text-align:left;
}

/* ---- STATEMENT 1 → noir full-width ---- */
#statement{
  width:100%;
  margin:0;
  padding:clamp(48px,12vw,160px) clamp(16px,3vw,40px);
  background:var(--black);
  color:var(--beige);
  border-top:none;
}
#statement.container{ max-width:none; padding:0; }
#statement .statement__text{
  max-width:var(--maxw);
  margin:0 auto;
  color:var(--beige);
}

/* ---------------- STATEMENT 2 (fond visuel) ---------------- */
.statement--dark{
  position:relative;
  background:var(--black);
  color:var(--beige);
  width:100%;
  margin:0;
  padding:0;
  overflow:hidden;
}
.statement--dark::before{
  content:"";
  position:absolute;
  inset:0;
  background:url('assets/DSCF9569.jpeg') center/cover no-repeat;
  opacity:.55;                           /* ajuste si besoin */
  filter:contrast(100%) brightness(65%);
  z-index:0;
}
.statement--dark .wrap{
  position:relative; z-index:1;
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(48px,12vw,160px) clamp(16px,3vw,40px);
}
.statement--dark .statement__text{
  color:var(--beige);
  font-family:'Playfair Display', ui-serif, Georgia, serif;
  font-size:clamp(18px,2.2vw,24px);
  max-width:60ch;
  margin:0 auto 1.5em auto;
  text-wrap:pretty;
  line-height:1.6;
  text-align:left;
}
/* fondu léger depuis la vidéo vers l’image (optionnel) */
.next-adventure.is-dark + .statement--dark::before{
  background:
    linear-gradient(to bottom, var(--black) 0%, rgba(0,0,0,.5) 20%, rgba(0,0,0,.5) 80%, var(--black) 100%),
    url('assets/DSCF9569.jpeg') center/cover no-repeat;
}

/* ---------------- NEXT ADVENTURE (Vimeo) ---------------- */
.next-adventure{
  background:var(--beige);
  color:var(--black);
  width:100%;
  margin:0;
  padding:0;
}
.next-adventure .wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(48px,10vw,140px) clamp(16px,3vw,40px);
  text-align:center;
}
.na__title{
  font-family:'Space Grotesk', system-ui, sans-serif;
  letter-spacing:.06em;
  font-weight:700;
  font-size:clamp(22px,3.6vw,36px);
  margin:0 0 .25em 0;
}
.na__subtitle{
  font-family:'Playfair Display', ui-serif, Georgia, serif;
  font-size:clamp(18px,2.2vw,24px);
  opacity:.9;
  margin:0 0 1.25rem 0;
}
.na__player{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  background:#000;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
}
.na__player iframe{
  position:absolute; inset:0;
  width:100%; height:100%; display:block;
}
.na__note{ margin-top:.85rem; }
.next-adventure.is-dark{ background:var(--black); color:var(--beige); }
.next-adventure.is-dark .na__player{ background:#000; }

/* ---------------- CONTACT ---------------- */
.contact{
  background:var(--beige);
  color:var(--black);
  text-align:center;
}
.contact__line a{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid currentColor;
}
/* moins haut que les autres sections */
.contact.section{ padding:clamp(32px,6vw,80px) 0; }

/* ---------------- FOOTER ---------------- */
.footer{
  padding:32px 0 64px;
  text-align:center;
  color:#222;
}

/* ---------------- ANIMATIONS ---------------- */
.reveal{
  opacity:0;
  transform:translateY(12px);
  transition:
    opacity 700ms ease var(--reveal-delay, 0ms),
    transform 700ms ease var(--reveal-delay, 0ms);
}
.reveal.in-view{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .reveal{ transition:none; }
}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:768px){
  .statement__text{ max-width:65ch; }
  .fault-line{ width:80vw; }
}