:root{
    --ink:#16130f;
    --ink-soft:#221d16;
    --plaster:#F0F0D0;
    --plaster-dim:#e1dbcb;
    --stone:#b7ae9c;
    --bordeaux:#6e2a35;
    --brass:#a6874f;
    --line: rgba(22,19,15,0.14);
    --line-light: rgba(237,232,222,0.22);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--plaster);
    color:var(--ink);
    font-family:'IBM Plex Sans', sans-serif;
    font-weight:400;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
  }
  a{color:inherit; text-decoration:none;}
  img{display:block; max-width:100%;}
  h1,h2,h3{font-family:'Fraunces', serif; font-weight:400; letter-spacing:-0.01em;}

  :focus-visible{outline:2px solid var(--bordeaux); outline-offset:3px;}

  .wrap{max-width:2500px; margin:0 auto; padding:0 48px;}
  @media (max-width:760px){ .wrap{padding:0 22px;} }

  /* ---------- NAV ---------- */
  header.site{
    position:fixed; top:0; left:0; right:0; z-index:100;
    display:flex; align-items:center; justify-content:space-between;
    padding:26px 48px;
    mix-blend-mode:difference;
    color:#EDE8DE;
  }
  @media (max-width:760px){ header.site{padding:20px 22px;} }
  .wordmark{
    font-family:'Fraunces', serif; font-style:italic; font-size:1.35rem;
    letter-spacing:0.01em;
  }
  nav.links{display:flex; gap:36px; font-size:0.92rem;}
  nav.links a{position:relative; padding-bottom:3px;}
  nav.links a::after{
    content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
    background:currentColor; transition:width .35s ease;
  }
  nav.links a:hover::after{width:100%;}
 

  /* ---------- HERO ---------- */
  .hero{
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    min-height:100vh;
  }
  @media (max-width:900px){ .hero{grid-template-columns:1fr; min-height:auto;} }

  .hero-text{
    background:var(--ink);
    color:var(--plaster);
    display:flex; flex-direction:column; justify-content:flex-end;
    padding:120px 56px 64px;
  }
  @media (max-width:900px){ .hero-text{padding:150px 26px 48px;} }

  .hero-eyebrow{
    font-size:0.86rem; color:var(--stone); letter-spacing:0.03em;
    margin-bottom:26px; max-width:24ch;
  }
  .hero-title{
    font-size:clamp(2.6rem, 6vw, 4.6rem);
    line-height:1.05;
    max-width:11ch;
  }
  .hero-title em{font-style:italic; color:var(--brass);}
  .hero-sub{
    margin-top:28px; font-size:1.02rem; line-height:1.65; max-width:38ch; color:#cfc9bb;
  }
  .hero-meta{
    margin-top:46px; display:flex; gap:40px; font-size:0.84rem; color:var(--stone);
  }
  .hero-meta div span{display:block; color:var(--plaster); font-size:1rem; margin-top:4px; font-family:'Fraunces', serif;}

  .hero-visual{
    position:relative;
    background:
      radial-gradient(ellipse at 30% 20%, #8a4a52 0%, transparent 55%),
      radial-gradient(ellipse at 75% 75%, #3c4a3f 0%, transparent 60%),
      linear-gradient(155deg, #d8c9a8 0%, #a6874f 38%, #6e2a35 72%, #221d16 100%);
    display:flex; align-items:center; justify-content:center;
    padding:64px;
    opacity:0; transform:scale(1.04);
    animation: heroReveal 1.4s cubic-bezier(.2,.7,.2,1) 0.2s forwards;
  }
  @keyframes heroReveal{ to{opacity:1; transform:scale(1);} }
  .hero-frame{
    width:100%; height:100%; max-width:560px;
    border:1px solid rgba(237,232,222,0.5);
    padding:14px;
  }
  .hero-frame-inner{
    width:100%; height:100%; min-height:420px;
    object-fit:cover;
    background:var(--ink-soft);
  }
  .hero-plaque{
    position:absolute; bottom:34px; left:64px;
    color:var(--plaster); font-size:0.82rem; letter-spacing:0.02em;
  }
  .hero-plaque .t{font-family:'Fraunces', serif; font-style:italic; font-size:1rem; display:block; margin-bottom:2px;}
  @media (max-width:900px){ .hero-plaque{left:26px; bottom:20px;} .hero-visual{padding:26px;} }

  /* ---------- SECTION HEADS ---------- */
  .section-head{
    display:flex; justify-content:space-between; align-items:flex-end;
    padding:120px 0 56px; gap:32px; flex-wrap:wrap;
  }
  .section-head h2{font-size:clamp(2rem, 4vw, 2.9rem); max-width:14ch;}
  .section-head p{max-width:34ch; font-size:0.96rem; line-height:1.6; color:var(--ink-soft); opacity:0.72;}

  /* ---------- COLLECTION GRID ---------- */
  .collection{
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    gap:28px;
    padding-bottom:100px;
  }
  @media (max-width:900px){ .collection{grid-template-columns:repeat(2,1fr); gap:20px;} }

  .piece{
    position:relative;
    display:flex; flex-direction:column;
  }
  .piece:nth-child(1){grid-column:span 3;}
  .piece:nth-child(2){grid-column:span 3;}
  .piece:nth-child(3){grid-column:span 2;}
  .piece:nth-child(4){grid-column:span 2;}
  .piece:nth-child(5){grid-column:span 2;}
  .piece:nth-child(6){grid-column:span 6;}
  @media (max-width:900px){ .piece{grid-column:span 1 !important;} }

  
  .piece:nth-child(6) .canvas{aspect-ratio:16/7;}



  .canvas img{
    width:100%; height:100%; object-fit:contain;
    transition:transform 1.1s cubic-bezier(.2,.7,.2,1);
  }
  .piece:hover .canvas img{transform:scale(1.06);}

  .piece-label{
  
  display:flex; flex-direction:column; gap:6px;
  padding-top:1px;  margin-top:1px;
  font-size:0.86rem;
}
  .piece-label .title{font-family:'Fraunces', serif; font-style:italic; font-size:1.05rem;}
  .piece-label .meta{color:var(--ink-soft); opacity:0.65; text-align:left; font-size:0.8rem; line-height:1.5;}
  .cat{color:var(--stone); font-size:0.76rem; letter-spacing:0.03em; margin-bottom:6px; display:block;}

  /* ---------- STRUCTURES ---------- */
  .structures-section{background:var(--ink); color:var(--plaster);}
  .structures-section .section-head p{color:#cfc9bb; opacity:1;}
  .structures-section .section-head h2{color:var(--plaster);}

  .structure-rail{
    display:flex; gap:26px; overflow-x:auto; padding-bottom:120px;
    scrollbar-width:thin;
  }
  .structure-rail::-webkit-scrollbar{height:5px;}
  .structure-rail::-webkit-scrollbar-thumb{background:var(--brass);}

  .structure-card{
    flex:0 0 auto; width:300px;
    border:1px solid var(--line-light);
  }
  .structure-stage{
    height:340px;
    background:linear-gradient(180deg, rgba(237,232,222,0.04), transparent);
    position:relative; overflow:hidden;
  }
  .structure-stage::after{
    content:''; position:absolute; bottom:0; left:14%; right:14%; height:1px;
    background:rgba(237,232,222,0.3);
  }
  .structure-stage img{
    width:100%; height:100%; object-fit:contain;
    transition:transform .6s cubic-bezier(.2,.7,.2,1);
  }
  .structure-card:hover .structure-stage img{transform:scale(1.04);}

  .structure-info{padding:22px 22px 26px; border-top:1px solid var(--line-light);}
  .structure-info .title{font-family:'Fraunces', serif; font-style:italic; font-size:1.1rem;}
  .structure-info .meta{font-size:0.8rem; color:var(--stone); margin-top:8px; line-height:1.6;}

  /* ---------- BIOGRAPHIE ---------- */
  .philosophy{
    padding:130px 0; display:grid; grid-template-columns:1fr 1fr; gap:60px;
  }
  @media (max-width:900px){ .philosophy{grid-template-columns:1fr; padding:90px 0;} }
  .philosophy blockquote{
    font-family:'Fraunces', serif; font-style:italic; font-size:clamp(1.6rem, 3vw, 2.3rem);
    line-height:1.35; max-width:16ch;
  }
  .philosophy .body p{font-size:1rem; line-height:1.75; color:var(--ink-soft); max-width:46ch; margin-bottom:20px;}
  .philosophy .body p:last-child{margin-bottom:0;}
  .signature{margin-top:28px; font-size:0.85rem; color:var(--stone);}

  /* ---------- ATELIER / CONTACT ---------- */
  .visite{
    background:var(--bordeaux); color:var(--plaster); padding:110px 0;
  }
  .visite-grid{display:grid; grid-template-columns:1.2fr 1fr; gap:60px; align-items:end;}
  @media (max-width:900px){ .visite-grid{grid-template-columns:1fr; gap:44px;} }
  .visite h2{font-size:clamp(2rem, 4.4vw, 3.3rem); max-width:14ch; line-height:1.1;}
  .visite-details{display:flex; flex-direction:column; gap:22px; font-size:0.94rem;}
  .visite-details .row{border-top:1px solid rgba(237,232,222,0.3); padding-top:14px;}
  .visite-details .row .label{color:#e6c9c9; font-size:0.78rem; margin-bottom:5px;}
  .cta{
    display:inline-block; margin-top:36px; padding:15px 30px;
    border:1px solid var(--plaster); font-size:0.9rem;
    transition:background .3s ease, color .3s ease;
  }
  .cta:hover{background:var(--plaster); color:var(--bordeaux);}

  /* ---------- FOOTER ---------- */
  footer{
    padding:40px 0; display:flex; justify-content:space-between; align-items:center;
    font-size:0.8rem; color:var(--ink-soft); opacity:0.7; flex-wrap:wrap; gap:12px;
  }
  /* ---------- MUSIQUE ---------- */
.music-section{padding-bottom:100px;}

.track-list{
  display:flex; flex-direction:column;
}
.track{
  display:flex; justify-content:space-between; align-items:center;
  gap:32px; flex-wrap:wrap;
  padding:26px 0;
  border-top:1px solid var(--line);
}
.track:last-child{border-bottom:1px solid var(--line);}

.track-info{display:flex; flex-direction:column; gap:2px;}
.track-info .title{font-family:'Fraunces', serif; font-style:italic; font-size:1.15rem;}
.track-info .meta{font-size:0.82rem; color:var(--ink-soft); opacity:0.65; margin-top:4px;}

.track audio{
  height:38px; max-width:320px; width:100%;
  accent-color:var(--bordeaux);
}
@media (max-width:600px){
  .track{padding:20px 0;}
  .track audio{max-width:100%;}
}
.hero-landing{
    position:relative;
    min-height:100vh;
    background:var(--ink);
    color:var(--plaster);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center;
    padding:140px 26px 80px;
  }
  .hero-landing .hero-eyebrow{max-width:none; margin-bottom:22px;}
  .hero-landing .hero-title{max-width:none; font-size:clamp(2.8rem, 8vw, 5.6rem);}
  .hero-landing .hero-sub{max-width:44ch; margin-left:auto; margin-right:auto;}

  /* trois grands boutons */
  .mega-nav{
    display:grid; grid-template-columns:repeat(3, 1fr);
    min-height:64vh;
  }
  .mega-btn{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; gap:16px; padding:48px 32px;
    border-right:1px solid var(--line-light);
    transition:filter .3s ease;
  }
  .mega-btn:last-child{border-right:none;}
  .mega-btn .mega-title{
    font-family:'Fraunces', serif; font-style:italic;
    font-size:clamp(1.7rem, 3.2vw, 2.6rem);
  }
  .mega-btn .mega-text{
    font-size:0.92rem; line-height:1.6; max-width:26ch; opacity:0.78;
  }
  .mega-btn:hover{filter:brightness(1.1);}
  .mega-btn--ink{background:var(--ink); color:var(--plaster);}
  .mega-btn--bordeaux{background:var(--bordeaux); color:var(--plaster);}
  .mega-btn--brass{background:var(--brass); color:var(--ink);}
  @media (max-width:900px){
    .mega-nav{grid-template-columns:1fr;}
    .mega-btn{border-right:none; border-bottom:1px solid var(--line-light); min-height:34vh;}
    .mega-btn:last-child{border-bottom:none;}
  }

  /* présentation : photo + texte */
  .presentation{
    padding:130px 0; display:grid; grid-template-columns:1fr 1.1fr; gap:64px; align-items:center;
  }
  
  .presentation-media img{width:50%; height:50%; object-fit:contain;}
  .presentation-text p{font-size:1rem; line-height:1.75; color:var(--ink-soft); max-width:46ch; margin-bottom:20px;}
  .presentation-text p:last-of-type{margin-bottom:0;}
  @media (max-width:900px){
    .presentation{grid-template-columns:1fr; padding:90px 0; gap:36px;}
  }
  .title-band{
    min-height:44vh;
    background:var(--ink);
    color:var(--plaster);
    display:flex; align-items:center; justify-content:center;
    text-align:center;
    padding:160px 26px 60px;
  }
  .title-band h1{
    font-size:clamp(2.4rem, 6vw, 4.2rem);
    line-height:1.05;
  }

  /* grille de cases, taille égale, pas de carrousel */
 .grid-uniform{
  display:flex; flex-wrap:wrap;
  justify-content:center;
  gap:28px;
  padding:25px 0 120px;
}
@media (max-width:900px){ .grid-uniform{grid-template-columns:repeat(2,1fr); gap:20px;} }
@media (max-width:560px){ .grid-uniform{grid-template-columns:1fr;} }

  .card{
  flex:0 0 calc((100% - 28px) / 3); /* 56px = les 2 espaces de 28px entre 3 cases */
  position:relative; display:flex; flex-direction:column;
}
  

.divider{
  flex:0 0 100%;
  height:1px;
  background:#16130f;
  margin:20px 0;
}
@media (max-width:900px){
  .card{ flex:0 0 calc((100% - 20px) / 2); }
}
@media (max-width:560px){
  .card{ flex:0 0 100%; }
}

.title-band{
    min-height:44vh;
    background:var(--ink);
    color:var(--plaster);
    display:flex; align-items:center; justify-content:center;
    text-align:center;
    padding:160px 26px 60px;
  }
  .title-band h1{
    font-size:clamp(2.4rem, 6vw, 4.2rem);
    line-height:1.05;
  }

  /* liste des pistes vidéo */
  .music-section{padding:100px 0 120px;}

  .track-list{display:flex; flex-direction:column;}
  .track{
  display:flex; flex-direction:column; align-items:center;
  gap:24px;
  padding:56px 0;
  border-top:1px solid var(--line);
  text-align:center;
}
.track:last-child{border-bottom:1px solid var(--line);}

.track-info{display:flex; flex-direction:column; gap:8px; align-items:center;}
.track-info .title{font-family:'Fraunces', serif; font-style:italic; font-size:1.5rem;}
.track-info .meta{font-size:0.88rem; color:var(--ink-soft); opacity:0.65;}

.track-video{
  width:100%; max-width:860px;
  aspect-ratio:16/9;
  border:none;
  background:var(--plaster-dim);
}

.expand{margin-top:12px;}
.expand summary{
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 20px;
  border:1px solid var(--line);
  font-size:0.9rem; color:var(--ink);
  letter-spacing:0.02em;
  list-style:none;
}
.expand summary::-webkit-details-marker{display:none;} /* idem sur Safari/Chrome */
.expand[open] summary{background:var(--ink); color:var(--plaster);}
.expand p{margin-top:12px; font-size:0.9rem; line-height:1.6; color:var(--ink-soft);}

.section-head--center{
  padding-top : 50px ;
  padding-bottom: 20px;
  flex-direction:column;
  align-items:center;
  text-align:center;
  font-size: 150%;
}

.card--text{
  justify-content:center;
  align-items:center;
  text-align:center;
}

.card--side{
  flex:0 0 50%;
  flex-direction:row;
  align-items:center;
  gap:24px;
  text-align:center;
  justify-content:center;
}
.card--side .canvas{
  flex:0 0 60%; /* largeur de la photo — ajustez selon le rendu voulu */
}
.card--side .piece-label{
  flex:1;
  border-top:none; padding-top:0; margin-top:0; /* plus besoin, ce n'était utile qu'en pile verticale */
}

.card--side .canvas{
  flex:0 0 70%;
}

.works-row{
  flex:0 0 100%;
  display:flex;
  gap:28px;
}
.works-row .card{
  flex:1;
}
@media (max-width:700px){
  .works-row{flex-direction:column;}
}

.card--sideleft{
  flex:0 0 50%;
  flex-direction:row;
  align-items:center;
  gap:24px;
}

.img{width:50%; height:50%; object-fit:contain;}

.card--text .piece-label .meta,
.card--text .piece-label p{
  font-size:1.5rem; /* ajustez la valeur selon le rendu voulu */
  line-height:1.7;
}



.card--text .piece-label .title,
.card--side .piece-label .title{
  font-size:3rem;
}

.lightbox{
  display:none;
  position:fixed; inset:0; z-index:1000;
  background:rgba(22,19,15,0.92);
  align-items:center; justify-content:center;
  flex-direction:column;
  padding:60px 20px;
}
.lightbox.is-open{display:flex;}
.lightbox-image{
  max-width:90vw; max-height:75vh;
  object-fit:contain;
}
.lightbox-caption{margin-top:20px; text-align:center; color:var(--plaster);}
.lightbox-title{font-family:'Fraunces', serif; font-style:italic; font-size:1.2rem;}
.lightbox-meta{font-size:0.85rem; opacity:0.75; margin-top:6px;}

.lightbox-close{
  top:20px; right:30px;
  font-size:2rem;
}
.lightbox-prev, .lightbox-next{
  position:absolute;
  font-size:3.5rem; /* ajustez selon la taille voulue */
  padding:20px;
  
}
.lightbox-prev{left:20px; top:50%; transform:translateY(-50%);}
.lightbox-next{right:20px; top:50%; transform:translateY(-50%);}
.lightbox-close{top:20px; right:30px;}
.lightbox-prev{left:20px; top:50%; transform:translateY(-50%);}
.lightbox-next{right:20px; top:50%; transform:translateY(-50%);}

.expand img{
  width:100%;
  max-width:400px; /* ajustez selon la taille voulue */
  margin-top:12px;
  display:block;
}

.expand-gallery{
  display:flex; flex-wrap:wrap; gap:12px;
  margin-top:12px;
}
.expand-gallery img{
  width:100%;
  max-width:320px;  /* limite la largeur si besoin, ajustez ou retirez */
  height:auto;      /* ← clé : la hauteur s'adapte à l'image, aucun recadrage */
  object-fit:contain;
  display:block;
}

.presentation-media{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
}
.presentation-media .carousel{
  width:80%;
  max-width:500px;
  margin:0 auto;
}

.presentation-text{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.presentation-text p{
  font-size:1rem; line-height:1.75; color:var(--ink-soft);
  max-width:70ch; /* au lieu de 46ch */
  margin-bottom:20px;
}

/* ---------- POP-UP D'ENTRÉE ---------- */
.gate{
  position:fixed; inset:0; z-index:2000;
  background:rgba(22,19,15,0.92);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.gate-box{
  background:var(--plaster);
  color:var(--ink);
  max-width:440px;
  padding:40px;
  text-align:center;
  border:1px solid var(--line);
}
.gate-text{font-size:1rem; line-height:1.6; margin-bottom:28px;}
.gate-actions{display:flex; gap:16px; justify-content:center;}
.gate-actions button{
  padding:12px 28px;
  border:1px solid var(--ink);
  background:none;
  font-family:'IBM Plex Sans', sans-serif;
  font-size:0.9rem;
  cursor:pointer;
  transition:background .3s ease, color .3s ease;
}
.gate-actions button:hover{background:var(--ink); color:var(--plaster);}
body.gate-open{overflow:hidden;}

/* ---------- MINI-CARROUSEL SUR UNE IMAGE ---------- */
.carousel{position:relative;}
.carousel-prev, .carousel-next{
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(22,19,15,0.5); color:var(--plaster);
  border:none; border-radius:50%;
  font-size:1.4rem; cursor:pointer;
  transition:background .2s ease;
}
.carousel-prev:hover, .carousel-next:hover{background:rgba(22,19,15,0.8);}
.carousel-prev{left:10px;}
.carousel-next{right:10px;}

.carousel{
  position:relative;
  width:80%;           /* la réduction se fait ici */
  margin:0 auto;        /* centre le conteneur dans .canvas */
}
.carousel img{
  width:100%; height:100%;   /* l'image remplit tout SON conteneur */
  object-fit:contain;
  object-position:center center;
}

.carousel--index{
  width:80%;      /* ajustez cette valeur selon la taille voulue */
  max-width:500px;
  margin:0 auto;
}

.carousel-wrap{
  display:flex; flex-direction:column; align-items:center;
  gap:16px;
}
.carousel-caption{
  font-size:0.85rem; color:var(--ink-soft); text-align:center;
}

.Boutonindex{
  padding-left: 20vh;
}

.presentation > .expand{
  grid-column:1 / -1;
  margin-top:50px;
  text-align:left;
}
.presentation > .expand .expand-gallery{
  justify-content:center;
}

.visite p{
  text-align:center;
  font-size:1.05rem;   /* ajustez selon le rendu voulu */
  line-height:1.8;
  padding-left: 50px;
  padding-right: 50px;
}

.carousel--small{
  width:80%;      /* ajustez ce pourcentage jusqu'au bon rendu */
  height:80%;
  margin:0 auto;
}

.visite h2{
  font-size:clamp(2rem, 4.4vw, 3.3rem); line-height:1.1;
  text-align:center;
  margin:0 auto 40px; /* centre le bloc + espace avant le texte */
  max-width:none;
}

.gate-checkbox{
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:0.9rem; margin-bottom:24px; cursor:pointer;
}
.gate-yes:disabled{
  opacity:0.4; cursor:not-allowed;
}
.gate-yes:disabled:hover{
  background:none; color:var(--ink);
}

.pdf-link{
  text-align:center;
  padding:40px 0;
}
.pdf-link-title{
  font-family:'Fraunces', serif; font-style:italic; font-size:1.2rem;
  margin-bottom:16px;
}
.pdf-link img{
  max-width:320px; /* ajustez la taille de l'image selon le rendu voulu */
  margin:0 auto;
  cursor:pointer;
}

.carousel--small{
  position:relative;
  width:100%;
  max-width: 1000px;      /* ← réduisez cette valeur pour la taille globale voulue */
  aspect-ratio:4/5;      /* donne une hauteur toujours proportionnelle à la largeur */
  margin:0 auto;         /* centre le bloc dans la carte */
  overflow:hidden;
}
.carousel--small img{
  width:100%; height:100%;
  object-fit:contain;    /* l'image reste entière, centrée automatiquement dans ce cadre */
}

.scroll-down{
  position:absolute;
  bottom:36px; left:50%;
  transform:translateX(-50%);
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
}
.scroll-down span{
  width:14px; height:14px;
  border-right:2px solid var(--plaster);
  border-bottom:2px solid var(--plaster);
  transform:rotate(45deg);
  animation:scrollBounce 1.8s ease-in-out infinite;
}
@keyframes scrollBounce{
  0%, 100%{ transform:rotate(45deg) translate(0,0); opacity:0.6; }
  50%{ transform:rotate(45deg) translate(6px,6px); opacity:1; }
}

/* ---------- MENU BURGER ---------- */
.menu-toggle{
  display:none;
  position:relative;
  width:32px; height:24px;
  background:none; border:none; cursor:pointer;
  color:inherit;
}
.menu-toggle span{
  position:absolute; left:0;
  width:100%; height:2px;
  background:currentColor;
  transition:transform .3s ease, opacity .3s ease, top .3s ease;
}
.menu-toggle span:nth-child(1){top:0;}
.menu-toggle span:nth-child(2){top:11px;}
.menu-toggle span:nth-child(3){top:22px;}

/* le burger devient une croix quand le menu est ouvert */
header.site.menu-open .menu-toggle span:nth-child(1){top:11px; transform:rotate(45deg);}
header.site.menu-open .menu-toggle span:nth-child(2){opacity:0;}
header.site.menu-open .menu-toggle span:nth-child(3){top:11px; transform:rotate(-45deg);}

@media (max-width:1060px){
  .menu-toggle{display:block;}

  nav.links{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:center;
    gap:24px;
    padding:32px 22px;
    background:var(--ink);
  }
  header.site.menu-open nav.links{display:flex;}

  /* sans ça, l'effet "difference" du header inverserait les couleurs du menu */
  header.site.menu-open{
    mix-blend-mode:normal;
    background:var(--ink);
  }
}

.title-band {
  position: relative; /* Sert de repère pour l'image */
}

.band-logo {
  position: absolute;
  left: 90px;         /* Fixe l'image à gauche du bandeau, peu importe sa taille */
  top: 60%;
  transform: translateY(-50%); /* La centre verticalement parfaitement */
  width: 7%;       /* Vous pouvez l'agrandir autant que vous voulez sans bouger le titre */
  height: auto;
}

/* Du coup, le titre reste bien centré dans le bandeau */
.title-band h1 {
  text-align: center;
  width: 100%;
  margin: 0;
}




/* Taille de l'image dans le bloc principal de l'index */
.hero-logo {
  position: absolute; /* Reste visible même si on défile, ou utilisez 'absolute' si elle doit rester au fond */
  bottom: 100px;    /* Distance par rapport au bas de la page */
  left: 100px;    /* Distance par rapport au bord gauche */
  width: 10%;  /* Ajustez la taille de l'image selon vos envies */
  height: auto;
  z-index: 10;   /* S'assure qu'elle passe au-dessus du fond noir */
}