/* ===========================================================
   CRISS KAYJI — bone / béton / noir
   =========================================================== */
:root{
  --black:#0A0A0A;
  --bone:#E4DFD4;
  --sand:#C2BBAD;
  --concrete:#8D8679;
  --line:rgba(228,223,212,.18);
  --line-dark:rgba(10,10,10,.16);
  --sans:"Helvetica Neue",Helvetica,Arial,"Segoe UI",sans-serif;
  --pad:clamp(20px,5vw,72px);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border-radius:0}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

body{
  background:var(--black);
  color:var(--sand);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{
  font-weight:700;
  text-transform:uppercase;
  line-height:.86;
  letter-spacing:-.045em;
  color:var(--bone);
}
h1{font-size:clamp(58px,10.5vw,148px);letter-spacing:-.055em}
h2{font-size:clamp(36px,6vw,86px)}
h3{font-size:clamp(22px,2.6vw,32px);letter-spacing:-.03em}

a{color:inherit;text-decoration:none}

.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--pad);top:12px;z-index:100;background:var(--bone);color:var(--black);padding:10px 16px;font-size:11px;letter-spacing:.2em;text-transform:uppercase}

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

.wrap{max-width:1240px;margin:0 auto;padding:0 var(--pad)}

/* ---------- petits labels ---------- */
.eyebrow,.flag,.cred,.cr,figcaption span{
  font-size:10px;
  font-weight:600;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--concrete);
}

/* ---------- barre ---------- */
.bar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;
  padding:18px var(--pad);
  background:rgba(10,10,10,.86);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.word{
  font-size:clamp(15px,1.6vw,20px);font-weight:700;
  text-transform:uppercase;letter-spacing:-.01em;color:var(--bone);
}
.bar nav{display:flex;gap:clamp(14px,2.4vw,34px);flex-wrap:wrap}
.bar nav a{
  font-size:10px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--sand);padding:4px 0;border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s;
}
.bar nav a:hover{color:var(--bone);border-bottom-color:var(--bone)}

/* ---------- boutons ---------- */
.btn{
  display:inline-block;
  font-size:10px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  padding:19px 36px;
  border:1px solid var(--bone);
  color:var(--bone);background:transparent;
  cursor:pointer;font-family:var(--sans);
  transition:background .2s,color .2s;
}
.btn:hover{background:var(--bone);color:var(--black)}
.btn.fill{background:var(--bone);color:var(--black)}
.btn.fill:hover{background:transparent;color:var(--bone)}

.lien{
  display:inline-block;margin-top:26px;
  font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--bone);padding-bottom:7px;border-bottom:1px solid var(--line);
  transition:border-color .2s;
}
.lien:hover{border-bottom-color:var(--bone)}

/* ---------- hero ---------- */
.hero{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:clamp(28px,5vw,80px);
  align-items:center;
  padding:clamp(40px,5vw,80px) var(--pad) clamp(56px,7vw,104px);
  max-width:1240px;margin:0 auto;
}
.flag{display:flex;align-items:center;gap:10px;color:var(--bone)}
.dot{width:7px;height:7px;background:var(--bone);display:inline-block;flex:0 0 auto}
.hero h1{margin:22px 0 26px}
.lede{max-width:40ch;color:var(--sand);font-size:15px}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

.hero-film{
  position:relative;border:1px solid var(--line);
  justify-self:end;width:100%;max-width:400px;
}
.hero-film video{
  display:block;width:100%;height:auto;max-height:66vh;
  aspect-ratio:9/16;object-fit:cover;background:#000;
}
.hero-film figcaption{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:14px 16px;border-top:1px solid var(--line);
}
#ouvrir-son{
  font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  background:transparent;border:1px solid var(--line);color:var(--bone);
  padding:9px 16px;cursor:pointer;transition:background .2s,color .2s,border-color .2s;
}
#ouvrir-son:hover{background:var(--bone);color:var(--black);border-color:var(--bone)}

/* ---------- sections ---------- */
.band{padding:clamp(76px,10vw,180px) 0;border-top:1px solid var(--line)}
.band h2{margin:20px 0 40px}
.band.light{background:var(--bone);border-top:0}
.band.light h2,.band.light h3{color:var(--black)}
.band.light .eyebrow{color:#7E786C}
.band.light .note,.band.light p{color:#4C4840}

.note{max-width:62ch;margin-top:34px;font-size:14px;color:var(--sand)}
.note em{font-style:italic}

/* ---------- plateformes ---------- */
.plats{list-style:none;border-top:1px solid var(--line)}
.plats a{
  display:flex;align-items:baseline;gap:clamp(16px,4vw,54px);
  padding:clamp(20px,2.6vw,34px) 0;border-bottom:1px solid var(--line);
  font-size:clamp(22px,3.6vw,46px);font-weight:700;text-transform:uppercase;
  letter-spacing:-.03em;color:var(--bone);
  transition:padding-left .25s,color .2s;
}
.plats a:hover{padding-left:16px;color:#fff}
.plats span{font-size:10px;font-weight:600;letter-spacing:.3em;color:var(--concrete);flex:0 0 auto}

/* ---------- discographie ---------- */
.disco{list-style:none;border-top:1px solid var(--line-dark)}
.disco li{
  display:grid;grid-template-columns:76px 1fr auto;gap:clamp(12px,2.4vw,32px);
  align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line-dark);
}
.disco .an{font-size:10px;font-weight:600;letter-spacing:.24em;color:#7E786C}
.disco .ti{font-size:clamp(19px,2.5vw,30px);font-weight:700;text-transform:uppercase;letter-spacing:-.03em;color:var(--black);line-height:1.05}
.disco .fo{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#7E786C;text-align:right}

/* ---------- clips ---------- */
.clips{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(14px,2vw,24px)}
.clip{
  display:flex;flex-direction:column;
  border:1px solid var(--line);padding:clamp(26px,3vw,40px);
  transition:border-color .25s,background .25s;
}
.clip:hover{border-color:var(--bone);background:rgba(228,223,212,.04)}
.clips h3{margin-bottom:14px}
.clips p{font-size:13px;color:var(--sand)}
.clips .cred{margin-top:10px;font-size:9px;line-height:1.9}
.clip .go{
  margin-top:26px;align-self:flex-start;
  font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--bone);padding-bottom:6px;border-bottom:1px solid var(--line);
  transition:border-color .2s;
}
.clip:hover .go{border-bottom-color:var(--bone)}

/* ---------- booking ---------- */
.book{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:start}
.facts{margin-top:40px;border-top:1px solid var(--line-dark)}
.facts div{display:flex;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid var(--line-dark)}
.facts dt{font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:#7E786C}
.facts dd{font-size:13px;color:var(--black);text-align:right}

.book-form{display:flex;flex-direction:column;gap:20px}
.book-form label{
  display:flex;flex-direction:column;gap:7px;
  font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:#7E786C;
}
.book-form input,.book-form textarea{
  font-family:var(--sans);font-size:15px;color:var(--black);
  background:transparent;border:0;border-bottom:1px solid var(--line-dark);
  padding:11px 0;resize:vertical;
}
.book-form input:focus,.book-form textarea:focus{outline:0;border-bottom-color:var(--black)}
.book-form .btn{align-self:flex-start;margin-top:10px;border-color:var(--black);background:var(--black);color:var(--bone)}
.book-form .btn:hover{background:transparent;color:var(--black)}
.hp{position:absolute;left:-9999px}

/* ---------- pied ---------- */
footer{border-top:1px solid var(--line);padding:clamp(44px,6vw,80px) 0}
.foot{display:flex;flex-wrap:wrap;gap:20px 36px;align-items:center;justify-content:space-between}
.soc{display:flex;flex-wrap:wrap;gap:clamp(14px,2.4vw,30px);list-style:none}
.soc a{
  font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--sand);
  padding-bottom:5px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s;
}
.soc a:hover{color:var(--bone);border-bottom-color:var(--bone)}

/* ---------- lightbox ---------- */
.boite{
  position:fixed;inset:0;z-index:90;
  background:rgba(10,10,10,.96);
  display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,48px);
}
.boite[hidden]{display:none}
.boite video{max-width:min(440px,92vw);max-height:86vh;width:100%;height:auto;background:#000;border:1px solid var(--line)}
.fermer{
  position:absolute;top:clamp(14px,3vw,28px);right:clamp(14px,3vw,28px);
  font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  background:transparent;border:1px solid var(--bone);color:var(--bone);
  padding:11px 20px;cursor:pointer;transition:background .2s,color .2s;
}
.fermer:hover{background:var(--bone);color:var(--black)}

/* ---------- mobile ---------- */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;padding-top:clamp(36px,8vw,64px)}
  .hero-film{max-width:430px;width:100%}
  .book{grid-template-columns:1fr}
  .disco li{grid-template-columns:62px 1fr;row-gap:4px}
  .disco .fo{grid-column:2;text-align:left}
}
@media (max-width:560px){
  .bar{flex-direction:column;align-items:flex-start;gap:12px}
  .bar nav{gap:16px}
  .cta{flex-direction:column;align-items:stretch}
  .cta .btn{text-align:center}
  .foot{flex-direction:column;align-items:flex-start}
}
.note a{color:var(--bone);border-bottom:1px solid var(--line);transition:border-color .2s}
.note a:hover{border-bottom-color:var(--bone)}
.clips{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

/* ---------- miniatures clips ---------- */
.clips{grid-template-columns:repeat(2,minmax(0,1fr))}
.clip{min-width:0;overflow:hidden}
.clip .thumb{
  position:relative;display:block;min-width:0;
  margin:calc(-1*clamp(26px,3vw,40px)) calc(-1*clamp(26px,3vw,40px)) 26px;
  aspect-ratio:16/9;overflow:hidden;background:#000;border-bottom:1px solid var(--line);
}
.clip .thumb img{
  position:absolute;inset:0;width:100%;height:100%;max-width:none;
  object-fit:cover;   /* hqdefault 4:3 : le cadrage 16:9 en cover rogne pile les bandes noires */
  filter:grayscale(.35) contrast(1.05);transition:filter .4s,transform .6s;
}
.clip:hover .thumb img{filter:none;transform:scale(1.04)}
@media (max-width:640px){ .clips{grid-template-columns:minmax(0,1fr)} }
.cr a{color:inherit;border-bottom:1px solid var(--line)}
.cr a:hover{color:var(--bone)}

/* ---------- pages secondaires ---------- */
.page{max-width:760px;margin:0 auto;padding:clamp(56px,8vw,120px) var(--pad)}
.page h1{font-size:clamp(44px,8vw,96px);margin:18px 0 48px}
.page h2{font-size:clamp(20px,2.4vw,26px);letter-spacing:-.02em;line-height:1.1;margin:48px 0 14px}
.page p,.page li{font-size:14px;color:var(--sand);margin-bottom:12px}
.page ul{padding-left:18px}
.page a{color:var(--bone);border-bottom:1px solid var(--line)}
.page a:hover{border-bottom-color:var(--bone)}
.page .btn{border-bottom:1px solid var(--bone);margin-top:24px}