/* =========================
   BASE
========================= */
html, body{ margin:0; padding:0; height:100%; }
body{
  background:#ffffff;
  font-family:'Tenor Sans', sans-serif;
  overflow:hidden;
  color:#000;
}

/* Variables layout Artists */
:root{
  --artists-header-h: 240px;
  --artists-pad-bottom: 40px;
  --x-ease: cubic-bezier(.2,.8,.2,1);
}

/* =========================
   STRUCTURE SLIDE
========================= */
.viewport{ height:100vh; overflow:hidden; }

/* pile verticale */
.stack{
  height:300vh;
  width:100vw;
  display:flex;
  flex-direction:column;
  transform:translateY(-100vh);
  transition:transform 1000ms cubic-bezier(.2,.8,.2,1);
}

/* chaque panel = 1 écran */
.panel{
  height:100vh;
  width:100vw;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 18px;
  box-sizing:border-box;
}

/* =========================
   LOGO PERSISTANT
========================= */
.floating-logo{
  position:fixed;
  left:50%;
  top:42%;
  transform:translate(-50%,-50%);
  width:280px;
  max-width:70vw;
  pointer-events:none;
  z-index:12;
  transition:transform 1000ms cubic-bezier(.2,.8,.2,1), top 1000ms cubic-bezier(.2,.8,.2,1);
}
body.is-about .floating-logo{
  top:50%;
  transform:translate(-50%,-50%) translateY(26vh);
}
.floating-logo img{ width:100%; display:block; }

/* =========================
   NAV BUTTONS
========================= */
.navbtn{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  background:transparent;
  border:none;
  padding:0;
  font-size:12px;
  letter-spacing:.14em;
  cursor:pointer;
  opacity:.78;
  z-index:999;
  display:none;
}
.navbtn:hover{ opacity:1; }

.navbtn.top{ top:18px; padding-top:10px; }
.navbtn.bottom{ bottom:26px; padding-bottom:10px; }

body.is-home    .navbtn[data-show="home"]{ display:block; }
body.is-about   .navbtn[data-show="about"]{ display:block; }
body.is-artists .navbtn[data-show="artists"]{ display:block; }

/* chevrons */
.navbtn.top::before{
  content:"";
  position:absolute;
  left:50%;
  top:0px;
  width:7px;
  height:7px;
  border-left:1px solid rgba(0,0,0,.7);
  border-top:1px solid rgba(0,0,0,.7);
  transform:translateX(-50%) rotate(45deg);
}
.navbtn.bottom::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0px;
  width:7px;
  height:7px;
  border-right:1px solid rgba(0,0,0,.7);
  border-bottom:1px solid rgba(0,0,0,.7);
  transform:translateX(-50%) rotate(45deg);
}

/* anim home */
@keyframes navInTop{
  0%   { opacity:0; transform:translateX(-50%) translateY(-6px); }
  70%  { opacity:1; transform:translateX(-50%) translateY(12px); }
  100% { opacity:1; transform:translateX(-50%) translateY(0); }
}
@keyframes navInBottom{
  0%   { opacity:0; transform:translateX(-50%) translateY(6px); }
  70%  { opacity:1; transform:translateX(-50%) translateY(-12px); }
  100% { opacity:1; transform:translateX(-50%) translateY(0); }
}
body.is-home .navbtn[data-show="home"]{ opacity:0; }
body.is-home .navbtn.top[data-show="home"]{
  animation: navInTop 920ms cubic-bezier(.22,.61,.36,1) 1.0s both;
}
body.is-home .navbtn.bottom[data-show="home"]{
  animation: navInBottom 920ms cubic-bezier(.22,.61,.36,1) 1.0s both;
}

/* =========================
   CONTACT (HOME)
========================= */
footer.contact{
  position:fixed;
  left:0;
  right:0;
  bottom:190px;
  text-align:center;

  font-family: Georgia, "Times New Roman", Times, serif;
  font-size:14px;
  line-height:1;

  opacity:0;
  pointer-events:none;
  transition: opacity 400ms ease;

  z-index:200;
  color:#000;
}
footer.contact p{ margin:6px 0 14px; }

footer.contact a,
footer.contact a:link,
footer.contact a:visited,
footer.contact a:hover,
footer.contact a:active{
  color:#000 !important;
  text-decoration:none !important;
}
footer.contact a:hover{ text-decoration:underline !important; }
footer.contact svg{
  display:block;
  margin:0 auto;
  color:#000 !important;
}
body.is-home:not(.show-slogan) footer.contact{
  opacity:1;
  pointer-events:auto;
}

/* =========================
   HOME SLOGAN
========================= */
.home-slogan{
  position:fixed;
  left:50%;
  bottom:190px;
  transform:translateX(-50%);
  text-align:center;

  font-family:'Tenor Sans', sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  line-height:1.35;
  text-transform:uppercase;
  color:rgba(0,0,0,.75);

  opacity:0;
  pointer-events:none;
  transition: opacity 900ms cubic-bezier(.22,.61,.36,1);
  z-index:9999;
}
body.show-slogan .home-slogan{ opacity:1; }

/* =========================
   ABOUT
========================= */
.about-text{
  max-width:440px;
  font-size:16px;
  line-height:1.7;
  text-align:justify;
  hyphens:auto;
  text-justify:inter-word;
  z-index:200;
  position:relative;
  transform: translateY(-70px);
}

/* =========================
   ARTISTS — header fixe + layout
========================= */
body.is-artists .floating-logo{
  top:70px;
  transform:translate(-50%,0);
}

/* header blanc */
.artists-header{
  position:fixed;
  left:0;
  right:0;
  top:0;
  height:var(--artists-header-h);
  background:#fff;
  opacity:0;
  pointer-events:none;
  z-index:11; /* sous logo (12) */
}
body.is-artists .artists-header{ opacity:1; }

/* bouton back : sous le logo, dans la zone header */
.artist-back{
  position:fixed;
  left:18px;
  top: calc(70px + 120px); /* ≈ sous le logo (ajuste si tu changes le logo) */
  background:transparent;
  border:none;
  padding:10px 8px;
  font-size:12px;
  letter-spacing:.12em;
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  z-index:1000;
  transition:opacity 200ms ease;
}
body.is-artists.is-artist-view .artist-back{
  opacity:.85;
  pointer-events:auto;
}
.artist-back:hover{ opacity:1; }

/* panel Artists : important -> PAS de scroll ici */
.panel--artists{
  align-items:flex-start;
  justify-content:flex-start;

  padding-top:var(--artists-header-h);
  padding-bottom:var(--artists-pad-bottom);

  overflow:hidden;              /* ✅ empêche fuite + garde un viewport propre */
  -webkit-overflow-scrolling:auto;
  overscroll-behavior:contain;
}

/* =========================
   ARTISTS — STAGE HORIZONTAL (2 vues)
========================= */
.artists-stage{
  width:200%;
  height: calc(100vh - var(--artists-header-h) - var(--artists-pad-bottom));
  display:flex;
  transform:translateX(0%);
  transition:transform 800ms var(--x-ease);
  will-change:transform;
}
.artists-stage.no-x-transition{ transition:none !important; }

.artists-stage.is-artist-open{
  transform:translateX(-50%); /* 2 vues -> -50% (car width 200%) */
}

/* chaque vue = 100vw de la zone Artists */
.artists-index,
.artist-view{
  flex:0 0 50%;
  height:100%;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}

/* interactions */
body.is-artists.is-artist-view .artists-index{
  pointer-events:none;
}
.artist-view[aria-hidden="true"]{
  pointer-events:none;
}

/* =========================
   ARTISTS GRID — desktop
========================= */
.grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:32px;
  width:min(860px, 86vw);
  margin:0 auto;

  opacity:0;
  pointer-events:none;
  transition:opacity 250ms ease;
}
body.is-artists .grid{
  opacity:1;
  pointer-events:auto;
}

.card{
  display:block;
  overflow:hidden;
  text-decoration:none;
  background:transparent;
  aspect-ratio: 3 / 4;
}
.card img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
@media (hover:hover){
  .card img{ transition:transform 600ms ease; }
  .card:hover img{ transform:scale(1.04); }
}

/* raffinement desktop */
body.is-artists .grid{
  gap: 48px 56px;
  width: min(720px, 82vw);
  margin-top: 0px;
}

/* =========================
   ARTIST VIEW (contenu)
========================= */
.artist-content{
  width: min(820px, 86vw);
  margin: 0 auto;
  padding: 26px 0 60px;
  box-sizing:border-box;
}
.artist-title{
  margin: 8px 0 12px;
  font-size: 20px;
  letter-spacing:.02em;
}
.artist-intro{
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.6;
  opacity:.9;
}
.artist-bio{
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 1.75;
  opacity:.9;
}
.artist-figure{
  margin: 0 0 18px;
}
.artist-figure img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
}

/* =========================
   MOBILE
========================= */
.artist-scroll{ display:none; }

@media (max-width:600px){
  :root{
    --artists-header-h: 180px;
    --artists-pad-bottom: 28px;
  }

  .floating-logo{ width:240px; }

  body.is-home footer.contact{ font-size:13px; bottom:204px; }
  body.is-home .home-slogan{ bottom:204px; }

  body.is-about .floating-logo{
    top:50%;
    transform:translate(-50%,-50%) translateY(25vh);
  }
  body.is-about .about-text{
    transform: translateY(-140px);
    max-width:76vw;
  }
  .navbtn.bottom{ bottom:22px; }

  body.is-artists .floating-logo{
    top:72px;
    transform:translate(-50%,0);
  }

  /* bouton back : reposition mobile */
  .artist-back{
    left:14px;
    top: calc(72px + 94px);
    font-size:11px;
  }

  /* stage reste identique, c’est clean sur mobile aussi */
  body.is-artists .grid{ display:none; }
  body.is-artists .artist-scroll{ display:block; }

  /* snap uniquement sur la vue index */
  .artists-index{
    scroll-snap-type:y mandatory;
  }
  .art-slide{
    scroll-snap-align:start;
    scroll-snap-stop:always;

    min-height: calc(100vh - var(--artists-header-h) - var(--artists-pad-bottom));
    display:flex;
    align-items:flex-start;
    justify-content:center;

    padding: 0 0 28px;
    box-sizing:border-box;
  }
  .art-slide img{
    width: 88vw;
    aspect-ratio: 4 / 5;
    height: auto;
    object-fit: cover;
    display:block;

    margin-top: 34px; /* si tu veux l'air "grid" sur mobile */
  }

  /* contenue artist view */
  .artist-content{
    width: 88vw;
    padding-top: 22px;
  }
}

/* =========================
   Motion accessibility
========================= */
@media (prefers-reduced-motion: reduce){
  .stack{ transition:none !important; }
  .artists-stage{ transition:none !important; }
}