/* ==========================================================================
   Kamai Event — Chrome du site : header (navigation) + footer.
   Dépend de css/tokens.css. Le header reste caché pendant l'intro épinglée et
   n'apparaît (classe .is-visible) qu'à l'entrée dans le contenu — pilotage
   dans js/modules/site-chrome.js.
   ========================================================================== */

/* ---------- Marque (partagée header + footer) ---------- */
.brand{ display:inline-flex; align-items:baseline; gap:.04em; text-decoration:none; line-height:1; }
.brand__name{ font-family:var(--serif); font-weight:600; font-size:1.5rem; color:var(--ink); letter-spacing:.01em; }
.brand__suffix{ font-family:var(--serif); font-weight:400; font-size:.95rem; color:var(--gold); }

/* ============================ HEADER ============================ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  opacity:0; transform:translateY(-100%); pointer-events:none;
  transition:opacity .5s ease, transform .55s cubic-bezier(.6,0,.2,1);
  background:rgba(250,248,244,.8);
  -webkit-backdrop-filter:blur(12px) saturate(1.08);
  backdrop-filter:blur(12px) saturate(1.08);
  border-bottom:1px solid rgba(197,165,114,.26);
}
.site-header.is-visible{ opacity:1; transform:none; pointer-events:auto; }

.site-header__inner{
  width:100%; max-width:1200px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem 1.8rem;
}

.site-nav{ display:flex; align-items:center; gap:2.2rem; }
.site-nav__link{
  font-family:var(--sans); font-size:.74rem; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink);
  text-decoration:none; position:relative;
}
.site-nav__link::after{
  content:""; position:absolute; left:0; right:100%; bottom:-5px; height:1px;
  background:var(--gold); transition:right .35s cubic-bezier(.6,0,.2,1);
}
.site-nav__link:hover::after{ right:0; }

.site-nav__cta{
  font-family:var(--sans); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink); text-decoration:none;
  padding:.72rem 1.5rem; border:1px solid var(--gold);
  position:relative; overflow:hidden; z-index:0;
}
.site-nav__cta::before{
  content:""; position:absolute; inset:0; background:var(--gold);
  transform:scaleX(0); transform-origin:left; z-index:-1;
  transition:transform .42s cubic-bezier(.6,0,.2,1);
}
.site-nav__cta:hover::before{ transform:scaleX(1); }

/* ---- Menu mobile (burger) : CSS pur via case à cocher, marche sans JS sur toutes les pages ---- */
.nav-toggle{ display:none; }
.nav-burger{ display:none; }

@media (max-width:680px){
  .site-header__inner{ padding:.7rem 1.15rem; }
  .brand__name{ font-size:1.32rem; }

  /* bouton burger (3 traits) */
  .nav-burger{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:38px; height:38px; cursor:pointer; z-index:2;
  }
  .nav-burger span{
    display:block; width:24px; height:2px; background:var(--ink); border-radius:2px;
    transition:transform .3s ease, opacity .2s ease;
  }
  .nav-toggle:checked ~ .nav-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-burger span:nth-child(2){ opacity:0; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  /* le menu devient un panneau déroulant plein largeur sous la barre */
  .site-nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(250,248,244,.98);
    -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(197,165,114,.26);
    padding:0 1.3rem; max-height:0; overflow:hidden;
    transition:max-height .4s cubic-bezier(.6,0,.2,1), padding .4s ease;
  }
  .nav-toggle:checked ~ .site-nav{ padding:.3rem 1.3rem 1.4rem; max-height:75vh; }
  .site-nav__link{
    display:block; padding:1rem .1rem; font-size:.9rem;
    border-bottom:1px solid rgba(10,10,10,.07);
  }
  .site-nav__link::after{ display:none; }
  .site-nav__cta{ align-self:flex-start; margin-top:1.1rem; padding:.85rem 1.6rem; }
}

/* ============================ FOOTER ============================ */
.site-footer{
  position:relative; z-index:1;
  background:var(--ink); color:var(--ivory);
  padding:5.5rem 1.8rem 2.2rem;
  border-top:1px solid rgba(197,165,114,.32);
}
.site-footer .brand__name{ color:var(--ivory); }

.site-footer__inner{
  max-width:1100px; margin:0 auto;
  display:grid; grid-template-columns:1.5fr 1fr 1.2fr; gap:3.5rem; align-items:start;
}
.site-footer__tagline{
  margin-top:1.1rem; font-size:.95rem; line-height:1.7;
  color:rgba(250,248,244,.6); max-width:26ch;
}
.site-footer__col h3{
  font-family:var(--sans); font-weight:500; font-size:.7rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold); margin-bottom:1.1rem;
}
.site-footer__col a{
  display:block; color:rgba(250,248,244,.82); text-decoration:none;
  font-size:.95rem; line-height:1; padding:.45rem 0; transition:color .25s ease;
}
.site-footer__col a:hover{ color:var(--gold); }
.site-footer__note{ color:rgba(250,248,244,.6); font-size:.95rem; padding:.45rem 0; }

.footer-cta{
  display:inline-flex !important; align-items:center; margin-top:.7rem;
  font-family:var(--sans); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ivory); text-decoration:none;
  padding:.85rem 1.7rem; border:1px solid var(--gold);
  position:relative; overflow:hidden; z-index:0;
}
.footer-cta::before{
  content:""; position:absolute; inset:0; background:var(--gold);
  transform:scaleX(0); transform-origin:left; z-index:-1;
  transition:transform .42s cubic-bezier(.6,0,.2,1);
}
.footer-cta:hover{ color:var(--ink); }
.footer-cta:hover::before{ transform:scaleX(1); }

.site-footer__base{
  max-width:1100px; margin:3.5rem auto 0; padding-top:1.6rem;
  border-top:1px solid rgba(250,248,244,.12);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  font-size:.74rem; letter-spacing:.05em; color:rgba(250,248,244,.5);
}
.site-footer__base a{ color:rgba(250,248,244,.5); text-decoration:none; transition:color .25s ease; }
.site-footer__base a:hover{ color:var(--gold); }

@media (max-width:760px){
  .site-footer{ padding:4rem 1.4rem 2rem; }
  .site-footer__inner{ grid-template-columns:1fr; gap:2.4rem; }
  .site-footer__base{ flex-direction:column; gap:.7rem; text-align:center; }
}

/* ============ Curseur de défilement des bandes (galerie + cadres) ============ */
/* Ajouté en JS juste sous une bande défilante (js/modules/marquee.js). */
.marquee-range{
  -webkit-appearance:none; appearance:none;
  display:block; width:min(420px,80%); height:4px;
  margin:1.9rem auto 0; padding:0; border-radius:999px;
  background:rgba(197,165,114,.32); cursor:pointer;
}
.marquee-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; border:0;
  width:32px; height:14px; border-radius:999px; background:var(--gold); cursor:grab;
}
.marquee-range:active::-webkit-slider-thumb{ cursor:grabbing; }
.marquee-range::-moz-range-thumb{
  border:0; width:32px; height:14px; border-radius:999px; background:var(--gold); cursor:grab;
}
.marquee-range:focus-visible{ outline:2px solid var(--gold); outline-offset:6px; }
/* La galerie est sur fond sombre → piste un peu plus claire */
.galerie .marquee-range{ background:rgba(250,248,244,.24); }