:root{
  --black:#090909;
  --black2:#10100f;
  --ivory:#f0ede6;
  --accent:#b79a73;
  --line:rgba(255,255,255,.14);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--black)}
body{
  margin:0;
  background:var(--black);
  color:var(--ivory);
  font-family:Arial,Helvetica,sans-serif;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
::selection{background:var(--ivory);color:#111}

/* INTRO DOUCE */
.intro{
  position:fixed;
  inset:0;
  z-index:9999;
  background:#000;
  overflow:hidden;
}
.intro-black{
  position:absolute;
  inset:0;
  background:#000;
  opacity:1;
}
.intro-photo,.piece{
  position:absolute;
  inset:0;
  background:url("assets/hero-concert-red.jpg") 48% 42%/cover no-repeat;
}
.intro-photo.full{
  opacity:0;
  filter:blur(6px);
  transform:scale(1.03);
}
.piece{
  opacity:0;
  filter:blur(10px);
  transform:translateY(10px) scale(1.015);
}
.p1{clip-path:polygon(16% 8%,52% 8%,52% 34%,16% 34%)}
.p2{clip-path:polygon(28% 23%,68% 23%,68% 54%,28% 54%)}
.p3{clip-path:polygon(44% 0,64% 0,64% 36%,44% 36%)}
.p4{clip-path:polygon(12% 42%,88% 42%,88% 82%,12% 82%)}
.mist{
  position:absolute;
  inset:-8%;
  background:radial-gradient(circle at 50% 45%, rgba(255,255,255,.16), transparent 38%);
  opacity:0;
}
.soft-glow{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 28%, rgba(255,255,255,.06) 100%);
  opacity:0;
}
.intro-title{
  position:absolute;
  inset:0;
  display:grid;
  place-content:center;
  text-align:center;
  opacity:0;
  transform:translateY(8px);
}
.intro-name{
  font-size:clamp(2.6rem,7vw,7rem);
  font-weight:700;
  letter-spacing:.025em;
}
.intro-tag{
  margin-top:14px;
  font-size:clamp(.7rem,1vw,1rem);
  letter-spacing:.43em;
  color:#d4d4d4;
}

/* MASQUAGE DOUX DE LA PAGE AVANT INTRO */
.before-intro header,
.before-intro .hero-copy{
  opacity:0;
}
header,
.hero-copy{
  transition:opacity 1.2s ease, transform 1.2s ease;
}
.before-intro .hero-copy{
  transform:translateY(18px);
}
.before-intro header{
  transform:translateY(-8px);
}
.intro-complete header,
.intro-complete .hero-copy{
  opacity:1;
  transform:none;
}

/* HEADER */
header{
  position:fixed;
  z-index:100;
  top:0;left:0;right:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px 34px;
  transition:background .3s ease, backdrop-filter .3s ease, padding .3s ease, opacity 1.2s ease, transform 1.2s ease;
}
header.scrolled{
  background:rgba(8,8,8,.72);
  backdrop-filter:blur(15px);
  padding-top:14px;
  padding-bottom:14px;
}
.brand{display:flex;align-items:center;gap:12px;font-size:.76rem;letter-spacing:.18em}
.brand-mark{
  width:34px;height:34px;
  border:1px solid rgba(255,255,255,.7);
  border-radius:50%;
  display:grid;place-items:center;
  font-size:.64rem;
}
nav{
  display:flex;
  gap:30px;
  font-size:.71rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}
nav a{opacity:.82}
nav a:hover{opacity:1}
#menuBtn{display:none;background:0;border:0}
#menuBtn i{display:block;width:26px;height:1px;background:#fff;margin:6px}

/* HERO */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
.hero-img{
  position:absolute;
  inset:0;
  background:url("assets/hero-concert-red.jpg") 48% 42%/cover no-repeat;
  transform:scale(1.03);
  animation:herozoom 14s ease-out forwards;
}
@keyframes herozoom{to{transform:scale(1)}}
.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.13) 46%,rgba(0,0,0,.76));
}
.hero-copy{
  position:relative;
  z-index:2;
  width:min(1120px,calc(100% - 64px));
  margin:0 auto 8.5vh;
}
.kicker{
  font-size:.68rem;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--accent);
}
h1{
  font-size:clamp(3.7rem,9.5vw,9rem);
  line-height:.87;
  letter-spacing:-.06em;
  margin:.3em 0 .18em;
  max-width:1000px;
}
.hero-lead{
  max-width:590px;
  font-size:clamp(1rem,1.4vw,1.25rem);
  line-height:1.55;
  color:rgba(255,255,255,.85);
}
.enter{
  display:inline-flex;
  align-items:center;
  gap:14px;
  margin-top:23px;
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.enter span{width:72px;height:1px;background:#fff}

/* SECTIONS */
.section,.light,.contact{padding:145px max(32px,7vw)}
.light{background:var(--ivory);color:#181818}
h2{
  font-size:clamp(2.8rem,6vw,6.3rem);
  line-height:.94;
  letter-spacing:-.052em;
  margin:.3em 0;
}
.lead{
  max-width:780px;
  font-size:1.22rem;
  line-height:1.7;
  color:#55514c;
}
.head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:55px;
  gap:30px;
}
.underlink{
  font-size:.75rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  border-bottom:1px solid currentColor;
  padding-bottom:5px;
}

/* ACTUS */
.news-grid{
  display:grid;
  grid-template-columns:1.45fr .75fr;
  grid-template-rows:1fr 1fr;
  gap:18px;
}
.card{
  position:relative;
  min-height:325px;
  overflow:hidden;
  background:#161616;
}
.main-card{grid-row:1/3;min-height:690px}
.photo{
  position:absolute;
  inset:0;
  background-position:center;
  background-size:cover;
  transition:transform .85s cubic-bezier(.2,.7,.1,1);
}
.jazz-duo{background-image:url("assets/jazz-duo.jpg");background-position:50% 52%}
.jazz-stage{background-image:url("assets/jazz-stage.jpg");background-position:53% 45%}
.maroc{background-image:url("assets/maroc-silence.jpg");background-position:center 68%}
.card:hover .photo{transform:scale(1.035)}
.card:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 42%,rgba(0,0,0,.84));
}
.meta{
  position:absolute;
  z-index:2;
  left:27px;right:27px;bottom:25px;
}
.meta small{font-size:.67rem;letter-spacing:.18em;color:var(--accent)}
.meta h3{font-size:clamp(1.6rem,3vw,3rem);margin:.22em 0 .1em}
.meta p{margin:0;color:#c8c8c8}

/* IMMERSIVE */
.immersive{
  min-height:100svh;
  display:grid;
  grid-template-columns:1.25fr .75fr;
  background:#070707;
}
.immersive-photo{
  background:url("assets/jazz-stage.jpg") 51% 43%/cover no-repeat;
  min-height:72vh;
}
.immersive-copy{
  padding:8vw;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.immersive-copy p:not(.kicker){
  max-width:500px;
  color:#bbb;
  line-height:1.72;
}

/* SILENCE */
.silence{
  min-height:100svh;
  position:relative;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
.silence-img{
  position:absolute;
  inset:0;
  background:url("assets/maroc-silence.jpg") center 65%/cover no-repeat;
}
.silence:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.01),rgba(0,0,0,.07) 52%,rgba(0,0,0,.6));
}
.silence-copy{
  position:relative;
  z-index:2;
  padding:0 max(32px,7vw) 8vh;
}
.silence-copy h2{
  font-size:clamp(3rem,7vw,7.5rem);
  max-width:1000px;
}

/* UNIVERS */
.univers{background:var(--black2)}
.words{
  display:flex;
  flex-direction:column;
  margin-top:60px;
}
.words a{
  font-size:clamp(3.3rem,9vw,10rem);
  font-weight:700;
  line-height:.9;
  letter-spacing:-.06em;
  padding:.13em 0;
  border-top:1px solid var(--line);
  transition:.32s;
}
.words a:last-child{border-bottom:1px solid var(--line)}
.words a:hover{padding-left:.12em;color:var(--accent)}

.contact{
  min-height:72vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.contact>a{
  font-size:clamp(1.2rem,3vw,2.4rem);
  color:var(--accent);
  margin-top:18px;
}
footer{
  padding:28px max(32px,7vw);
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  color:#777;
  font-size:.72rem;
}

/* MOBILE */
@media(max-width:800px){
  header{padding:18px}
  .brand-text{display:none}
  #menuBtn{display:block;z-index:3}
  nav{
    position:fixed;
    inset:0;
    background:rgba(7,7,7,.98);
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:28px;
    font-size:1.1rem;
    transform:translateY(-100%);
    transition:.35s;
  }
  nav.open{transform:none}
  .hero-img{background-position:55% 42%}
  .hero-copy{width:calc(100% - 36px);margin-bottom:7vh}
  h1{font-size:clamp(3.2rem,16vw,6rem)}
  .section,.light,.contact{padding:100px 18px}
  .head{align-items:flex-start;flex-direction:column}
  .news-grid{grid-template-columns:1fr;grid-template-rows:auto}
  .main-card{grid-row:auto;min-height:480px}
  .card{min-height:360px}
  .immersive{grid-template-columns:1fr}
  .immersive-photo{min-height:65vh}
  .immersive-copy{padding:80px 18px}
  .silence-copy{padding:0 18px 7vh}
  footer{padding:24px 18px;flex-direction:column;gap:12px}
  .intro-tag{letter-spacing:.25em}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}


/* =========================================================
   V0.5 — HEADER CORRIGÉ
   Objectif : retrouver la hauteur V0.3, ligne 12px sous le menu,
   départ bord gauche, signature propre et lisible.
   ========================================================= */

.clean-header{
  position:fixed;
  z-index:100;
  top:0;
  left:0;
  right:0;
  display:block;
  padding:0 !important;
  background:transparent;
  transition:
    background .3s ease,
    backdrop-filter .3s ease,
    opacity 1.2s ease,
    transform 1.2s ease;
}

/* Menu : même hauteur visuelle que V0.3 */
.clean-header .menu-row{
  height:48px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:0 34px;
}

.clean-header nav{
  display:flex;
  gap:30px;
  margin:0;
  padding:0;
  align-items:center;
  font-size:.71rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1;
}

.clean-header nav a{
  opacity:.82;
}

.clean-header nav a:hover{
  opacity:1;
}

/* Ligne : exactement 12px sous la ligne de texte du menu */
.identity-row{
  position:relative;
  width:100%;
  height:56px;
  margin-top:0;
}

/* Le trait commence bien à x=0 */
.identity-line{
  position:absolute;
  top:12px;
  left:0;
  width:78.5%;
  height:1px;
  background:rgba(255,255,255,.72);
  transform-origin:left center;
  transform:scaleX(0);
}

/* Signature propre au bout de la ligne */
.identity-signature{
  position:absolute;
  top:-2px;
  left:79.3%;
  width:19.5%;
  min-width:245px;
  white-space:nowrap;
  opacity:0;
  transform:translateX(-4px);
  display:flex;
  align-items:baseline;
  gap:10px;
}

.sig-barth{
  font-family:"Segoe Script","Snell Roundhand","Brush Script MT","URW Chancery L",cursive;
  font-size:clamp(1.4rem,1.75vw,2rem);
  font-style:italic;
  font-weight:400;
  letter-spacing:-.035em;
  color:rgba(255,255,255,.95);
}

.sig-photo{
  font-size:.58rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
}

/* animation déclenchée après l'intro V0.3 */
.before-intro .identity-row{
  opacity:0;
}

.intro-complete .identity-row{
  opacity:1;
  transition:opacity .8s ease .15s;
}

.intro-complete .identity-line{
  animation:identityLineDraw 2.4s cubic-bezier(.2,.65,.15,1) .35s forwards;
}

.intro-complete .identity-signature{
  animation:identitySignatureReveal 1.6s ease 2.45s forwards;
}

@keyframes identityLineDraw{
  to{transform:scaleX(1)}
}

@keyframes identitySignatureReveal{
  from{
    opacity:0;
    transform:translateX(-4px);
    filter:blur(3px);
  }
  to{
    opacity:1;
    transform:translateX(0);
    filter:blur(0);
  }
}

/* Header au scroll : ne change pas la hauteur du menu */
.clean-header.scrolled{
  background:rgba(8,8,8,.72);
  backdrop-filter:blur(15px);
  padding:0 !important;
}

.clean-header.scrolled .menu-row{
  height:48px;
}

/* Le hero reste identique à V0.3 */
.clean-header + main{
  margin-top:0;
}

/* Mobile */
@media(max-width:800px){
  .clean-header .menu-row{
    height:48px;
    padding:0 18px;
    justify-content:flex-end;
  }

  .clean-header nav{
    position:fixed;
    inset:0;
    background:rgba(7,7,7,.98);
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:28px;
    font-size:1.1rem;
    transform:translateY(-100%);
    transition:.35s;
  }

  .clean-header nav.open{
    transform:none;
  }

  .identity-line{
    width:66%;
  }

  .identity-signature{
    left:68%;
    top:0;
    width:30%;
    min-width:0;
    gap:0;
  }

  .sig-barth{
    font-size:1.05rem;
  }

  .sig-photo{
    display:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .identity-line{
    transform:scaleX(1)!important;
    animation:none!important;
  }

  .identity-signature{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    animation:none!important;
  }
}


/* =========================================================
   V0.6 — micro-ajustements demandés
   - menu descendu de 5px
   - ligne inchangée
   - nom remonté de 4px
   - typo d'origine, sobre, en capitales
   ========================================================= */

/* Descendre le bloc menu de 5px, sans toucher à la ligne */
.clean-header .menu-row{
  padding-top:5px;
}

/* Remonter le bloc nom de 4px au-dessus de sa position V0.5 */
.identity-signature{
  top:-6px; /* était -2px */
}

/* Revenir à une esthétique de police d'origine, sobre, uppercase */
.sig-barth,
.sig-photo{
  font-family:Arial, Helvetica, sans-serif;
  font-style:normal;
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.sig-barth{
  font-size:clamp(1.12rem,1.35vw,1.48rem);
  color:rgba(255,255,255,.95);
  letter-spacing:.07em;
}

.sig-photo{
  font-size:.50rem;
  color:rgba(255,255,255,.78);
  letter-spacing:.20em;
  position:relative;
  top:-1px;
}

/* Mobile cohérent */
@media(max-width:800px){
  .clean-header .menu-row{
    padding-top:5px;
  }

  .identity-signature{
    top:-4px;
  }

  .sig-barth{
    font-size:.92rem;
  }
}


/* =========================================================
   V0.7 — ajustements d'alignement et de rythme
   ========================================================= */

/* Le bloc menu descend légèrement et s'aligne par le bas avec le nom */
.clean-header .menu-row{
  height:52px;
  padding-top:9px;
  align-items:flex-end;
}

/* Les onglets se calent sur une même ligne de base visuelle */
.clean-header nav{
  align-items:flex-end;
}

/* Ligne inchangée géométriquement */
.identity-row{
  height:56px;
}

/* Nom centré verticalement entre le haut de l'écran et la ligne */
.identity-signature{
  top:-12px; /* recentré plus haut dans l'espace au-dessus de la ligne */
  align-items:flex-end;
}

/* Le nom garde la typo d'origine en capitales */
.sig-barth,
.sig-photo{
  font-family:Arial, Helvetica, sans-serif;
  font-style:normal;
  font-weight:300;
  text-transform:uppercase;
}

.sig-barth{
  font-size:clamp(1.12rem,1.35vw,1.48rem);
  letter-spacing:.07em;
  line-height:1;
}

/* PHOTOGRAPHE un peu plus gros */
.sig-photo{
  font-size:.58rem;
  letter-spacing:.20em;
  line-height:1;
  position:relative;
  top:-1px;
}

/* La ligne doit courir à vitesse constante, sans ralentir */
.intro-complete .identity-line{
  animation:identityLineDraw 2.4s linear .35s forwards;
}

/* Mobile cohérent */
@media(max-width:800px){
  .clean-header .menu-row{
    height:52px;
    padding-top:9px;
    align-items:flex-end;
  }

  .identity-signature{
    top:-10px;
  }

  .sig-photo{
    font-size:.56rem;
  }
}


/* =========================================================
   V0.8 — ligne sur toute la largeur + nom au-dessus +
   alignement par le bas des lettres
   ========================================================= */

.clean-header{
  height:78px;
  padding:0 !important;
}

/* Menu positionné dans une bande haute fixe */
.clean-header .menu-row{
  position:absolute;
  left:34px;
  top:18px;
  height:auto;
  padding:0 !important;
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
}

.clean-header nav{
  display:flex;
  align-items:flex-end;
  gap:30px;
  line-height:1;
}

.clean-header nav a{
  line-height:1;
}

/* Le bloc identité ne sert plus que de calque absolu */
.identity-row{
  position:absolute;
  inset:0;
  width:100%;
  height:78px;
  margin:0;
  pointer-events:none;
}

/* La ligne court maintenant d'un bord à l'autre */
.identity-line{
  position:absolute;
  left:0;
  top:52px;
  width:100%;
  height:1px;
  background:rgba(255,255,255,.72);
  transform-origin:left center;
  transform:scaleX(0);
}

/* Le nom est au-dessus de la ligne, à droite */
.identity-signature{
  position:absolute;
  right:34px;
  left:auto;
  top:14px;
  width:auto;
  min-width:0;
  white-space:nowrap;
  opacity:0;
  transform:translateX(-4px);
  display:flex;
  align-items:flex-end;
  gap:10px;
}

/* Police sobre, nom plus grand, mot photographe plus petit mais lisible */
.sig-barth,
.sig-photo{
  font-family:Arial, Helvetica, sans-serif;
  font-style:normal;
  font-weight:300;
  text-transform:uppercase;
  line-height:1;
}

.sig-barth{
  font-size:clamp(1.18rem,1.45vw,1.58rem);
  letter-spacing:.065em;
  color:rgba(255,255,255,.95);
}

.sig-photo{
  font-size:.62rem;
  letter-spacing:.18em;
  color:rgba(255,255,255,.80);
  position:relative;
  top:-1px;
}

/* Ligne à vitesse constante */
.intro-complete .identity-line{
  animation:identityLineDraw 2.4s linear .35s forwards;
}

/* Scroll : ne rien décaler verticalement */
.clean-header.scrolled{
  background:rgba(8,8,8,.72);
  backdrop-filter:blur(15px);
  padding:0 !important;
}

/* Mobile */
@media(max-width:800px){
  .clean-header{
    height:74px;
  }

  .clean-header .menu-row{
    left:18px;
    top:18px;
  }

  .identity-row{
    height:74px;
  }

  .identity-line{
    top:50px;
  }

  .identity-signature{
    right:18px;
    top:15px;
    gap:8px;
  }

  .sig-barth{
    font-size:1rem;
  }

  .sig-photo{
    font-size:.55rem;
  }
}


/* =========================================================
   V0.9 — réduction des grands titres uniquement
   ========================================================= */

/* Hero principal : réduction nette mais sans casser l'impact */
h1{
  font-size:clamp(3.2rem,7.8vw,7.4rem);
}

/* Titres de sections de même famille visuelle */
h2{
  font-size:clamp(2.4rem,5.1vw,5.25rem);
}

/* Grand titre de la section silence : réduction cohérente */
.silence-copy h2{
  font-size:clamp(2.7rem,5.9vw,6.2rem);
}

/* Mobile */
@media(max-width:800px){
  h1{
    font-size:clamp(2.85rem,13.5vw,5.2rem);
  }

  h2{
    font-size:clamp(2.25rem,10.5vw,4.5rem);
  }

  .silence-copy h2{
    font-size:clamp(2.45rem,11.5vw,5rem);
  }
}