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









/* =========================
   DESKTOP — FIX SCROLL BOTTOM (avec zoom)
========================= */
@media (min-width:601px){

  /* 1) Listing Artists (grid) : ajoute du “gras” en bas */
  body.is-artists .panel--artists{
    padding-bottom: 220px !important;  /* augmente si besoin: 120 → 180 */
  }

  /* ton spacer existant était petit ; on le renforce */
  body.is-artists .artists-index::after{
    height: 220px !important;
  }

  /* 2) Artist page (vue artiste ouverte) : assure qu’on voit la fin */
  body.is-artists.is-artist-open .artist-view{
    padding-bottom: 180px;
    box-sizing: border-box;
  }
}


/* =========================
   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
========================= */
.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; }

/* affichage selon l'état */
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(-140px);
}


/* =========================
   ABOUT — MOBILE ADJUST
========================= */
@media (max-width:600px){

  /* Logo : on le descend légèrement */
  body.is-about .floating-logo{
    transform: translate(-50%,-50%) translateY(67vh); /* +4vh ≈ +20/25px */
  }

  /* Texte : on le descend aussi un peu */
  body.is-about .about-text{
    transform: translateY(0px); /* avant: -70px */
  }
}

/* =========================
   ARTISTS - HEADER + PANEL SCROLL
========================= */
body.is-artists .floating-logo{
  top:70px;
  transform:translate(-50%,0);
}

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

/* Panel Artists = scroll interne (et clip horizontal) */
body.is-artists .panel--artists{
  align-items:flex-start;
  justify-content:flex-start;

  padding-top:240px; /* = header */
  padding-bottom:40px;

  padding-left:0 !important;
  padding-right:0 !important;

  overflow-y:auto;
  overflow-x:hidden !important;

  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;

  display:block;
}

/* =========================
   DESKTOP GRID (ARTISTS)
========================= */
.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;
}

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

.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); }
}

/* Desktop: petit rab en bas */
@media (min-width:601px){
  body.is-artists .panel--artists{
    padding-bottom: 24px !important;
  }
  body.is-artists .artists-index::after{
    content:"";
    display:block;
    height: 56px;
  }
  body.is-artists .grid{
    margin-top: 18px !important;
  }
}

/* =========================
   MOBILE (max 600px) - general
========================= */
@media (max-width:600px){

  .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);
  }

  body.is-artists .artists-header{
    height:180px;
  }

  body.is-artists .panel--artists{
    padding-top:180px;
    padding-bottom:28px;
  }
}

/* =========================
   MOBILE SNAP (ARTISTS)
========================= */
/* par défaut */
.artist-scroll{ display:none; }

@media (max-width:600px){

  /* Sur mobile, on cache la grid desktop et on active le snap */
  body.is-artists .grid{ display:none; }
  body.is-artists .artist-scroll{ display:block; }

  /* snap sur le panel */
  body.is-artists .panel--artists{
    scroll-snap-type: y mandatory;
  }

  /* slide = 1 écran, centré */
  body.is-artists .art-slide{
    scroll-snap-align: start;
    scroll-snap-stop: always;

    min-height: calc(100vh - 40px);

    display:flex;
    align-items:flex-start;
    justify-content:center;

    /* ✅ L’ESPACE VIENT ICI (pas sur l’image) */
    padding: 30px 0 28px;   /* top | sides | bottom */
    box-sizing:border-box;

    width: 100vw !important;

    /* ✅ zone vide NON cliquable */
    pointer-events: none;
  }

  /* ✅ seul le lien est cliquable, à la taille de l’image */
  body.is-artists .art-slide > a{
    pointer-events: auto;
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;

    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;

    outline: none;
  }
  body.is-artists .art-slide > a:focus,
  body.is-artists .art-slide > a:active{
    outline: none;
  }

  body.is-artists .art-slide > a > img{
    width: 88vw;
    aspect-ratio: 4 / 5;
    height: auto;
    object-fit: cover;
    display:block;

    margin-top: 0 !important; /* ✅ IMPORTANT */
  }

  /* petit hack anti rounding */
  body.is-artists .artist-scroll{
    padding-bottom: 1px;
  }
}

/* =========================
   LATERAL NAV — Stage 200vw
========================= */
.artists-stage{
  display:flex;
  width: 200vw;
  transform: translateX(0);
  transition: transform 850ms cubic-bezier(.2,.8,.2,1);
  will-change: transform;

  max-width: 200vw;
  height: 100% !important; /* on remplit le panel */
}

.artists-index,
.artist-view{
  flex: 0 0 100vw;
  width: 100vw;
  max-width: 100vw;
}

/* Slide latéral */
body.is-artists.is-artist-open #artistsStage{
  transform: translateX(-100vw);
}

/* Empêche clics “derrière” en mode open */
body.is-artists.is-artist-open .artists-index{
  pointer-events:none;
}



@media (min-width:601px){
  body.is-artists.is-artist-open .artist-back{
    display:block;

    position: fixed;          /* ✅ indépendant du contenu */
    left: 30px;               /* ✅ marge gauche demandée */
    top: 80%;                 /* ✅ centrage vertical */
    transform: translateY(-80%);

    background: transparent;
    border: none;
    padding: 0;

    font-size: 12px;
    letter-spacing: .14em;
    cursor: pointer;
    opacity: .75;
    z-index: 50;              /* au-dessus du contenu */
    text-align: left;
  }

  body.is-artists.is-artist-open .artist-back:hover{
    opacity: 1;
  }
}


body.is-artists.is-artist-open .artist-back{
  position: sticky;
  top: 18px;
}




.artist-view[aria-hidden="true"]{ pointer-events:none; }

/* Vue artiste scrolle (le panel reste stable, le JS bloque le scroll du panel) */
body.is-artists.is-artist-open .artist-view{
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
body.is-artists.is-artist-open .artists-index{
  overflow: hidden;
}

/* =========================
   ARTIST CONTENT — typo alignée About
========================= */
body.is-artists .artist-content{
  width: 88vw;
  margin: 0 auto;
  max-width: 440px;
  font-size: 16px;
  line-height: 1.7;
  text-align: justify;
  hyphens: auto;
  text-justify: inter-word;
}

body.is-artists .artist-content p{
  font-size: inherit !important;
  line-height: inherit !important;
  margin: 0 0 18px;
}

body.is-artists .artist-content h2{
  font-size: 16px !important;
  margin: 0 0 18px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 400;
}

/* mobile largeur colonne = About */
@media (max-width:600px){
  body.is-artists .artist-content{
    width: 76vw !important;
    max-width: 76vw !important;
  }
  body.is-artists .artist-content img{
    width: 100%;
    max-width: 100%;
    display: block;
    margin: 0 auto 24px;
    object-fit: cover;
  }
}

/* =========================
   SAFETY: pas de scroll horizontal
========================= */
html, body{ overflow-x: hidden; }



/* === STOP Chrome scroll-anchoring (cause fréquente de jump + snap) === */
body.is-artists .panel--artists,
body.is-artists .artists-stage,
body.is-artists .artists-index,
body.is-artists .artist-scroll,
body.is-artists .art-slide{
  overflow-anchor: none;
}


@media (max-width:600px){
  /* panel stable */
  body.is-artists .panel--artists{
    overflow: hidden !important;
    scroll-snap-type: none !important;
  }

  /* c’est le conteneur interne qui scrolle */
  body.is-artists .artist-scroll{
    height: calc(100vh - 180px - 28px); /* viewport - header - padding bottom */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: y mandatory;
    overscroll-behavior: contain;
  }

  body.is-artists .art-slide{
    min-height: calc(100vh - 180px - 28px); /* 1 slide = 1 “page” du scroll interne */
  }
}


/* ===== MASK: éviter le flash/jump quand on quitte Artists ===== */
body.is-leaving-artists .panel--artists,
body.is-leaving-artists .artists-header{
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Desktop: pendant qu’on quitte Artists, ne jamais afficher la vue artiste */
@media (min-width:601px){
  body.is-leaving-artists .artist-view{
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* =========================================
   MOBILE: kill ALL scrollbars inside Artists
   (panel + stage + listing + artist view)
========================================= */
@media (max-width:600px){

  /* 1) Tout ce qui peut scroller dans Artists */
  body.is-artists .panel--artists,
  body.is-artists .panel--artists *,
  body.is-artists #artistsStage,
  body.is-artists .artists-index,
  body.is-artists .artist-view{
    scrollbar-width: none !important;     /* Firefox */
    -ms-overflow-style: none !important;  /* old Edge */
  }

  /* 2) WebKit (Chrome/Android, Safari) */
  body.is-artists .panel--artists::-webkit-scrollbar,
  body.is-artists .panel--artists *::-webkit-scrollbar,
  body.is-artists #artistsStage::-webkit-scrollbar,
  body.is-artists .artists-index::-webkit-scrollbar,
  body.is-artists .artist-view::-webkit-scrollbar{
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }

  /* 3) Au cas où le navigateur dessine quand même un "thumb" */
  body.is-artists .panel--artists::-webkit-scrollbar-thumb,
  body.is-artists .panel--artists *::-webkit-scrollbar-thumb,
  body.is-artists .artist-view::-webkit-scrollbar-thumb{
    background: transparent !important;
  }
}


/* caché le bouton back*/
@media (max-width:600px){
  .artist-back{ display:none !important; }
}


/* ===== Artists names under images (desktop grid) ===== */
/* =========================
   ARTISTS — NOMS SOUS IMAGES (DESKTOP)
========================= */

/* la card devient une colonne */
body.is-artists .grid--desktop .card{
  display: flex;
  flex-direction: column;
  gap: 10px;               /* espace image / nom */
  aspect-ratio: auto;     /* 🔥 IMPORTANT : on enlève le piège */
  overflow: visible;      /* 🔥 laisse vivre le texte */
  text-decoration: none;
}

/* l’image garde son ratio */
body.is-artists .grid--desktop .card img{
  width: 100%;
  aspect-ratio: 3 / 4;    /* ton ratio initial */
  object-fit: cover;
  display: block;
}

/* nom artiste */
body.is-artists .grid--desktop .artist-name{
  display: block;
  text-align: center;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(0,0,0,.85);
}



/* ===== Artists names under images (mobile snap) ===== */
@media (max-width:600px){
  body.is-artists .art-slide a{
    display:inline-flex !important;
    flex-direction:column;
    align-items:center;
    gap:5px;
    text-decoration:none;
  }

  body.is-artists .art-slide img{
    display:block;
  }

  body.is-artists .art-slide .artist-name{
    display:block;
    text-align:center;
    font-size:12px;
    letter-spacing:.14em;
    text-transform:uppercase;
    opacity:.85;
    line-height:1.0;
  }
}
body.is-artists .card,
body.is-artists .art-slide a{
  color:#000 !important;
  text-decoration:none !important;
}





/* =========================
   DESKTOP — MICRO AJUSTEMENTS ARTISTS
========================= */
@media (min-width:601px){

  /* 1) Réduire légèrement le header blanc */
  body.is-artists .artists-header{
    height: 210px;           /* avant: 240px */
  }

  /* 2) Synchroniser le padding du panel */
  body.is-artists .panel--artists{
    padding-top: 220px;      /* DOIT matcher le header */
  }

  /* 3) Remonter la grille (image + nom) */
  body.is-artists .grid{
    margin-top: -24px;       /* ajuste entre -20 et -30px selon ton œil */
  }

  /* 4) Nom artiste : un peu plus compact */
  body.is-artists .artist-name{
    margin-top: 6px;         /* évite l’effet “qui descend” */
  }
}



@media (min-width:601px){
  body.is-artists.is-artist-open .artist-view{
    padding-top: 40px;  /* ajuste 24 → 64px selon ton œil */
    box-sizing: border-box;
  }
}


/* =========================
   ARTIST VIEW — EDITORIAL LAYOUT
========================= */

/* =========================
   ARTIST — COLUMN & TYPO
   (match About)
========================= */
body.is-artists .artist-content{
  width: 88vw;
  max-width: 740px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.7;
  text-align: justify;
  hyphens: auto;
  text-justify: inter-word;
}

/* =========================
   MOBILE — ARTIST ADJUST
========================= */
@media (max-width:600px){
  body.is-artists .artist-content{
    width: 76vw;
    max-width: 76vw;

    /* ✅ descendre tout le bloc sous le logo */
    margin-top: 32px;   /* ajuste 24–40px si besoin */
  }
}

/* =========================
   TITLE
========================= */
body.is-artists .artist-content h2{
  margin: 0 0 14px;
  font-size: 16px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 400;
}

/* =========================
   META (dates, lieu, etc.)
========================= */
body.is-artists .artist-meta{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .65;
  margin: 0 0 18px;
}

/* =========================
   PARAGRAPHS
========================= */
body.is-artists .artist-content p{
  margin: 0 0 18px;
}

/* =========================
   WORK BLOCK
========================= */
body.is-artists .work{
  margin: 28px 0 34px;
}

body.is-artists .work img{
  width: 100%;
  display: block;
  height: auto;
  object-fit: cover;
}

/* =========================
   MOBILE — IMAGE BREATH
========================= */
@media (max-width:600px){
  body.is-artists .work{
    margin: 34px 0 38px; /* un peu plus d’air entre images */
  }
}

@media (max-width:600px){
  /* Images plus larges que la colonne texte, comme Artists */
  body.is-artists .work img{
    width: 88vw;
    max-width: 88vw;
    margin-left: 50%;
    transform: translateX(-50%);
  }
}

/* =========================
   CAPTION
========================= */
body.is-artists .caption{
  margin-top: 10px;
  font-size: 16px;
  letter-spacing: .06em;
  opacity: .95;
  line-height: 1.35;
}





/* =========================
   ARTIST GALLERY — CLEAN (mobile breakout + desktop 2 cols)
========================= */

/* Base: 1 colonne (mobile-first) */
body.is-artists .artist-gallery{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin: 28px 0 34px;
}

/* ✅ MOBILE: la galerie sort de la colonne texte (break-out) */
@media (max-width:600px){
  body.is-artists .artist-gallery{
    width: 100vw;
    max-width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    padding: 0 18px;          /* même logique que le reste */
    box-sizing: border-box;
  }

  /* Dans la galerie, les images prennent la largeur du break-out */
  body.is-artists .artist-gallery .work{ margin: 0; }

  body.is-artists .artist-gallery .work img{
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: cover;

    /* ✅ on tue tous les vieux centrages type 50%/translate */
    margin: 0 !important;
    transform: none !important;
  }

  body.is-artists .artist-gallery .caption{
    margin-top: 8px;
    font-size: 12px;
    letter-spacing: .06em;
    opacity: .65;
    line-height: 1.35;
  }
}

/* ✅ DESKTOP: 2 colonnes (et 3 si tu veux) */
@media (min-width:601px){
  body.is-artists .artist-gallery{
    width: min(80px, calc(100vw - 80px));
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    transform: none;

    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  body.is-artists .artist-gallery .work{ margin: 0; }

  body.is-artists .artist-gallery .work img{
    width: 100%;
    max-width: 100%;
    margin: 0;
    transform: none;
    display: block;
    height: auto;
    object-fit: cover;
  }
}

@media (min-width:1100px){
  body.is-artists .artist-gallery{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


/* ===== MOBILE — images larges comme Artists ===== */
@media (max-width:600px){
  body.is-artists .artist-gallery img{
    width: 88vw;
    max-width: calc(100vw - 36px); /* sécurité anti débordement */
    height: auto;
    display: block;
    object-fit: cover;

    margin: 0 auto;  /* ✅ centre proprement */
    transform: none; /* ✅ neutralise tout héritage */
  }

  /* caption alignée sous la même largeur visuelle */
  body.is-artists .artist-gallery .caption{
    width: 88vw;
    max-width: calc(100vw - 36px);
    margin-left: auto;
    margin-right: auto;
  }
}


/* =========================
   DESKTOP — 2 COLONNES + BREAK-OUT
========================= */
@media (min-width:601px){
  body.is-artists .artist-gallery{
    width: min(780px, calc(100vw - 80px)); /* ajuste si besoin */
    max-width: none;

    margin-left: 50%;
    transform: translateX(-50%);

    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 32px;
    margin-bottom: 40px;
  }

  body.is-artists .artist-gallery img{
    width: 100%;
    max-width: 100%;
    margin: 0;
    transform: none;
  }

  /* sécurité */
  body.is-artists .artist-view{
    overflow-x: hidden;
  }
}

/* =========================
   CAPTIONS
========================= */
body.is-artists .artist-gallery .caption{
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: .06em;
  opacity: .65;
  line-height: 1.35;
}



/* =========================
   ARTIST GALLERY — SPACING
========================= */

/* ===== DESKTOP: + espace vertical ET horizontal ===== */
@media (min-width:601px){
  body.is-artists .artist-gallery{
    gap: 42px 36px; 
    /* vertical | horizontal
       ajuste librement :
       - vertical: 36 → 52px
       - horizontal: 28 → 44px
    */
  }
}

/* ===== MOBILE: + espace vertical SEULEMENT ===== */
@media (max-width:600px){
  body.is-artists .artist-gallery{
    row-gap: 42px;   /* espace vertical entre images */
    column-gap: 0;  /* sécurité */
  }
}


/* ===== CAPTION: centered, 3 lines ===== */
body.is-artists .artist-gallery .caption{
  text-align: center;       /* ✅ centré */
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: .06em;
  opacity: .65;
  line-height: 1.35;

  /* optionnel: éviter les lignes trop longues */
  max-width: 42ch;
  margin-left: auto;
  margin-right: auto;
}

body.is-artists .artist-gallery .caption span{
  display: block;           /* ✅ une ligne par span */
}

/* optionnel: hiérarchie légère */
body.is-artists .artist-gallery .cap-title{
  opacity: .85;
}

body.is-artists .artist-gallery .cap-medium{
  opacity: .65;
}

body.is-artists .artist-gallery .cap-dims{
  opacity: .65;
}



/* =========================
   LIGHTBOX
========================= */
.lightbox{
  position: fixed;
  inset: 0;
 background: rgba(255,255,255,1);
  display: flex;
  align-items: center;
  justify-content: center;

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

  z-index: 9999;
}

.lightbox.is-open{
  opacity: 1;
  pointer-events: auto;
}

.lightbox-img{
  max-width: 97vw;
  max-height: 97vh;
  object-fit: contain;
}

/* bouton X */
.lightbox-close{
  position: fixed;
  top: 24px;
  right: 28px;

  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;

  opacity: .6;
}
.lightbox-close:hover{ opacity: 1; }

/* mobile: X un peu plus bas */
@media (max-width:600px){
  .lightbox-close{
    top: 18px;
    right: 18px;
  }
}

/* =========================
   LIGHTBOX — INDICATION INTERACTION
========================= */

/* Curseur main sur les œuvres */
body.is-artists .work img{
  cursor: zoom-in;
}

/* Optionnel : micro feedback au survol (desktop seulement) */
@media (hover: hover){
  body.is-artists .work img{
    transition: opacity 220ms ease;
  }

  body.is-artists .work img:hover{
    opacity: .92;
  }
}


body.is-artists .caption .cap-title{
  font-size: 13px;      /* +1px */
  line-height: 1.45;
}



@media (max-width:600px){

  /* Descendre le logo dans About */
  body.is-about .floating-logo{
    top: 50%;
    transform: translate(-50%, -50%) translateY(28vh);
    /* ↳ augmente/diminue 28–34vh selon ton œil */
  }

  /* Descendre le texte About */
  body.is-about .about-text{
    transform: translateY(-100px);
    /* ↳ ajuste 30–60px si besoin */
  }
}

/* =========================================
   ARTIST PAGE — TOP NAV CLEAN SWITCH (FINAL)
========================================= */

/* Par défaut : le bouton BACK est caché partout */
.navbtn-back{
  display: none !important;
}

/* Quand une page artiste est ouverte : on affiche BACK (desktop + mobile) */
body.is-artists.is-artist-open .navbtn-back{
  display: block !important;
}

/* Sur page artiste ouverte : on cache les boutons du haut (Contact) */
body.is-artists.is-artist-open .navbtn[data-show="home"],
body.is-artists.is-artist-open .navbtn[data-show="about"],
body.is-artists.is-artist-open .navbtn[data-show="artists"]{
  display: none !important;
}

/* Supprimer la flèche (chevron) au-dessus du bouton BACK */
body.is-artists.is-artist-open .navbtn-back::before,
body.is-artists.is-artist-open .navbtn-back::after{
  content: none !important;
}




/* =========================
   ARTIST — CONTACT BLOCK (BOTTOM)
========================= */
/* =========================
   ARTIST — CONTACT BLOCK (REFINED)
========================= */
/* =========================
   ARTIST — CONTACT BLOCK (BOTTOM) — FIX IMPORTANT
========================= */
body.is-artists .artist-contact{
  margin: 50px 0 110px;
  padding-top: 40px;
  border-top: 1px solid rgba(0,0,0,.18);

  display: flex;
  flex-direction: column;
  align-items: center;
}

/* TEXTE (p) : on doit battre le !important global sur .artist-content p */
body.is-artists .artist-content p.artist-contact-lead{
  margin: 0 0 14px;
  max-width: 52ch;

  font-size: 13px !important;     /* ✅ IMPORTANT sinon écrasé */
  line-height: 1.35 !important;   /* ✅ IMPORTANT sinon écrasé */
  opacity: .78;

  text-align: center !important;
  text-justify: auto !important;
  hyphens: none !important;
}

/* EMAIL (a) : garde un peu plus grand que le texte */
body.is-artists .artist-contact .artist-contact-email{
  margin: 0;
}

body.is-artists .artist-contact .artist-contact-email a{
  font-family: inherit;
  font-size: 11px;               /* ← ajuste si besoin */
  line-height: 1.2;

  text-transform: uppercase;
  letter-spacing: .08em;
  text-decoration: none;
  color: #000;
  opacity: .95;
}

body.is-artists .artist-contact .artist-contact-email a:hover{
  text-decoration: underline;
}



/* =========================
   MOBILE — extra bottom scroll space (artist page)
========================= */
@media (max-width:600px){
  body.is-artists.is-artist-open .artist-view{
    padding-bottom: 260px !important; /* ajuste 160–240 selon ton œil */
    box-sizing: border-box;
  }
}



/* =========================
   LEGAL (listing footer)
========================= */
.site-legal{
  width: 100%;
  text-align: center;
  margin: 40px auto 60px;
  font-size: 10px;
  line-height: 1.35;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .55;
  padding: 0 18px;
  box-sizing: border-box;
}

.site-legal .sep{ padding: 0 6px; }

.site-legal .legal-link{
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* visibilité desktop/mobile */
.site-legal--desktop{ display: none; }
.site-legal--mobile{ display: none; }

@media (min-width:601px){
  .site-legal--desktop{ display: block; }
}
@media (max-width:600px){
  .site-legal--mobile{ display: block; margin: 28px auto 40px; }
}

/* =========================
   LEGAL MODAL
========================= */
.legal-modal{
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,.96);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
  z-index: 9998; /* sous lightbox (9999), au-dessus du reste */
}

.legal-modal.is-open{
  opacity: 1;
  pointer-events: auto;
}

.legal-card{
  width: min(560px, calc(100vw - 48px));
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  padding: 22px 22px 18px;
  box-sizing: border-box;
  position: relative;
}

.legal-close{
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  opacity: .6;
}
.legal-close:hover{ opacity: 1; }

.legal-title{
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 14px;
  opacity: .85;
}

.legal-text{
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  opacity: .9;
}

.legal-text p{ margin: 0 0 10px; }
.legal-text a{ color: #000; text-decoration: underline; text-underline-offset: 2px; }


/* ===== LEGAL — desktop: wrap + lignes ===== */
@media (min-width:601px){
  .site-legal{
    max-width: 60ch;
    margin: 180px auto 70px;
    white-space: normal;
  }
  .site-legal span{
    display: block;
    margin: 0 0 6px;
  }
  .site-legal .sep{ display:none; }
  .site-legal .legal-link{
    display: inline-block;
    margin-top: 6px;
  }
}



/* ===== LEGAL — mobile: compatible snap ===== */
@media (max-width:600px){
  body.is-artists .artist-scroll .site-legal--mobile{
    scroll-snap-align: start;
    scroll-snap-stop: always;
    padding: 26px 18px 40px;
    box-sizing: border-box;
  }

  /* un peu d’air après pour être sûr de “descendre plus bas” */
  body.is-artists .artist-scroll{
    padding-bottom: 40px;
  }
}

/* =========================
   LEGAL — MOBILE FIX (clickable + visible)
========================= */
@media (max-width:600px){

  /* le scroller interne doit laisser de la place au legal fixé */
  body.is-artists .artist-scroll{
    padding-bottom: 84px; /* ajuste 70–110px selon ton œil */
    box-sizing: border-box;
  }

/* =========================
   LEGAL — MOBILE AS LAST SNAP SLIDE
========================= */
@media (max-width:600px){

  /* ton .art-slide a pointer-events:none -> on réactive pour le legal */
  body.is-artists .legal-slide{
    pointer-events: auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px 18px 44px;
    box-sizing: border-box;
  }

  body.is-artists .legal-slide .site-legal--mobile{
    max-width: 78vw;
    text-align: center;
    font-size: 10px;
    line-height: 1.35;
    letter-spacing: .04em;
    opacity: .75;

    display: block; /* ⟵ empêche la ligne unique qui déborde */
  }

  body.is-artists .legal-slide .sep{
    display: none; /* ⟵ on supprime les points sur mobile */
  }

  body.is-artists .legal-slide .legal-link{
    margin-top: 10px;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
    opacity: .9;
  }
}

  
/* =========================
   LEGAL — MOBILE CLEAN LINES
========================= */
@media (max-width:600px){

  .site-legal--mobile{
    text-align: center;
    font-size: 11px;
    letter-spacing: .08em;
    line-height: 1.6;
    opacity: .75;

    display: flex;
    flex-direction: column;
    align-items: center; /* ✅ centre tout proprement */
  }

  .site-legal--mobile span{
    display: block;
    margin-bottom: 4px;
  }

  .site-legal--mobile .legal-link{
    display: block;
    margin: 8px auto 0 auto;  /* ✅ centrage absolu */
    background: none;
    border: none;
    cursor: pointer;

    font-size: 11px;
    letter-spacing: .1em;
    text-decoration: underline;
    text-align: center;
  }
}