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


/* =========================================================
   V0.10 - actualités + galeries par dossier + hero rotatif
   ========================================================= */

/* Hero rotatif */
.hero-rotator{
  position:absolute;
  inset:0;
  overflow:hidden;
}
.hero-slide{
  position:absolute;
  inset:0;
  background-position:48% 42%;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:0;
  transform:scale(1.025);
  transition:opacity 1.6s ease, transform 9s ease;
}
.hero-slide.is-active{
  opacity:1;
  transform:scale(1);
}

/* Le sélecteur historique ne doit plus interférer */
.hero-img{display:none!important}

/* Actualités : titre plus haut sous le header */
#actualites{
  scroll-margin-top:78px;
  padding-top:92px;
  padding-bottom:110px;
}

#actualites .head{
  margin-bottom:34px;
}

/* Cartes recalibrées pour mieux tenir dans le viewport */
#actualites .news-grid{
  grid-template-columns:1.45fr .75fr;
  grid-template-rows:1fr 1fr;
  gap:16px;
}

#actualites .main-card{
  min-height:560px;
}

#actualites .card:not(.main-card){
  min-height:272px;
}

/* galeries dans les cartes */
.gallery-card{
  position:relative;
}
.gallery-card .gallery-photo{
  position:absolute;
  inset:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:0;
  transition:opacity 1.2s ease, transform .85s cubic-bezier(.2,.7,.1,1);
}
.gallery-card .gallery-photo.is-active{
  opacity:1;
}
.gallery-card:hover .gallery-photo.is-active{
  transform:scale(1.035);
}

/* Maroc : horizon un peu plus bas pour garder du ciel */
.gallery-card[data-gallery*="maroc"] .gallery-photo{
  background-position:center 68%;
}

/* Jazz */
.gallery-card[data-gallery*="jazz-vienne"] .gallery-photo{
  background-position:50% 48%;
}

.gallery-card[data-gallery*="mouvement"] .gallery-photo{
  background-position:53% 44%;
}

/* Mobile */
@media(max-width:800px){
  #actualites{
    scroll-margin-top:74px;
    padding-top:76px;
    padding-bottom:90px;
  }

  #actualites .news-grid{
    grid-template-columns:1fr;
    grid-template-rows:auto;
  }

  #actualites .main-card{
    min-height:460px;
  }

  #actualites .card:not(.main-card){
    min-height:340px;
  }
}


/* =========================================================
   V0.12 - HEADER STRICTEMENT STABLE + ALIGNEMENT DES SECTIONS
   ========================================================= */

/* 1) Le header ne change PLUS pendant le scroll */
.clean-header,
.clean-header.scrolled{
  background:transparent !important;
  backdrop-filter:none !important;
  padding:0 !important;
  height:78px !important;
}

.clean-header .menu-row,
.clean-header.scrolled .menu-row{
  position:absolute;
  left:34px;
  top:18px;
  height:auto !important;
  padding:0 !important;
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
}

.identity-row,
.clean-header.scrolled .identity-row{
  position:absolute;
  inset:0;
  width:100%;
  height:78px;
  margin:0;
}

.identity-line,
.clean-header.scrolled .identity-line{
  top:52px;
}

.identity-signature,
.clean-header.scrolled .identity-signature{
  right:34px;
  left:auto;
  top:14px;
}

/* 2) Position de référence des titres sous le header */
:root{
  --section-title-top:58px;
  --header-anchor-offset:78px;
}

/* Tous les liens du menu tombent proprement sous le header */
#actualites,
#histoires,
#univers,
#barth,
#contact{
  scroll-margin-top:var(--header-anchor-offset);
}

/* ACTUALITÉS : remonter franchement le contenu */
#actualites{
  padding-top:var(--section-title-top) !important;
  padding-bottom:92px !important;
}

#actualites .head{
  margin-bottom:24px !important;
}

/* Garder davantage des photos visibles dans un viewport desktop */
#actualites .main-card{
  min-height:520px !important;
}

#actualites .card:not(.main-card){
  min-height:252px !important;
}

/* HISTOIRES : titre à la même hauteur sous le header */
#histoires .immersive-copy{
  justify-content:flex-start !important;
  padding-top:var(--section-title-top) !important;
}

/* UNIVERS : même départ */
#univers{
  padding-top:var(--section-title-top) !important;
}

/* BARTH : même départ */
#barth{
  padding-top:var(--section-title-top) !important;
}

/* CONTACT : même départ, sans centrage vertical forcé */
#contact{
  padding-top:var(--section-title-top) !important;
  justify-content:flex-start !important;
}

/* Mobile : même logique avec le header mobile */
@media(max-width:800px){
  .clean-header,
  .clean-header.scrolled{
    height:74px !important;
  }

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

  .identity-row,
  .clean-header.scrolled .identity-row{
    height:74px;
  }

  .identity-line,
  .clean-header.scrolled .identity-line{
    top:50px;
  }

  .identity-signature,
  .clean-header.scrolled .identity-signature{
    right:18px;
    top:15px;
  }

  :root{
    --section-title-top:44px;
    --header-anchor-offset:74px;
  }

  #actualites{
    padding-top:var(--section-title-top) !important;
    padding-bottom:78px !important;
  }

  #actualites .head{
    margin-bottom:20px !important;
  }

  #actualites .main-card{
    min-height:430px !important;
  }

  #actualites .card:not(.main-card){
    min-height:320px !important;
  }

  #histoires .immersive-copy{
    padding-top:var(--section-title-top) !important;
  }
}


/* =========================================================
   V0.13 - les sections se calent sur le bord supérieur
   ========================================================= */

/* Les ancres ne compensent plus le header :
   le début réel de chaque section arrive en haut du viewport. */
#actualites,
#histoires,
#univers,
#barth,
#contact{
  scroll-margin-top:0 !important;
}

/* On conserve l'espace visuel nécessaire DANS la section,
   afin que son contenu ne passe pas sous le header transparent. */
#actualites{
  padding-top:96px !important;
}

#histoires .immersive-copy{
  padding-top:96px !important;
}

#univers{
  padding-top:96px !important;
}

#barth{
  padding-top:96px !important;
}

#contact{
  padding-top:96px !important;
}

/* Mobile */
@media(max-width:800px){
  #actualites{
    padding-top:86px !important;
  }

  #histoires .immersive-copy{
    padding-top:86px !important;
  }

  #univers{
    padding-top:86px !important;
  }

  #barth{
    padding-top:86px !important;
  }

  #contact{
    padding-top:86px !important;
  }
}


/* =========================================================
   V0.14 - UNIVERS : réduire la taille pour tout afficher
   ========================================================= */

#univers .words{
  margin-top:34px;
}

#univers .words a{
  font-size:clamp(2.65rem,6.8vw,7.1rem);
  line-height:.88;
  padding:.10em 0;
}

/* Mobile */
@media(max-width:800px){
  #univers .words{
    margin-top:28px;
  }

  #univers .words a{
    font-size:clamp(2.25rem,11vw,4.4rem);
    line-height:.90;
    padding:.11em 0;
  }
}


/* =========================================================
   V0.15 - 05 BARTH : le fond clair commence pile sous la ligne
   ========================================================= */

/* Header desktop : la ligne est à 52px du haut.
   On conserve donc le noir de la page précédente jusqu'à 52px,
   puis seulement le fond clair de la section BARTH. */
#barth{
  background:
    linear-gradient(
      to bottom,
      var(--black) 0,
      var(--black) 52px,
      var(--ivory) 52px,
      var(--ivory) 100%
    ) !important;
}

/* Mobile : la ligne du header est à 50px */
@media(max-width:800px){
  #barth{
    background:
      linear-gradient(
        to bottom,
        var(--black) 0,
        var(--black) 50px,
        var(--ivory) 50px,
        var(--ivory) 100%
      ) !important;
  }
}


/* =========================================================
   V0.16 - CONTACT
   ========================================================= */

#contact.contact-page{
  min-height:100svh;
  padding:0 !important;
  background:var(--black) !important;
  display:block !important;
}

.contact-inner{
  padding:96px max(32px,7vw) 90px;
  max-width:1500px;
  margin:0 auto;
}

.contact-page h2{
  margin-bottom:56px;
}

.contact-form{
  max-width:1120px;
}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:26px 34px;
}

.field{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.field-full{
  grid-column:1 / -1;
}

.field label{
  font-size:.67rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.68);
}

.field label span{
  color:var(--accent);
}

.field input,
.field textarea{
  width:100%;
  background:transparent;
  color:var(--ivory);
  border:0;
  border-bottom:1px solid rgba(255,255,255,.28);
  border-radius:0;
  padding:10px 0 13px;
  font:inherit;
  font-size:1rem;
  outline:none;
  transition:border-color .3s ease;
}

.field textarea{
  resize:vertical;
  min-height:150px;
  border:1px solid rgba(255,255,255,.22);
  padding:16px;
  line-height:1.55;
}

.field input:focus,
.field textarea:focus{
  border-color:rgba(255,255,255,.78);
}

.copy-row{
  margin-top:2px;
}

.check-label{
  display:inline-flex !important;
  flex-direction:row !important;
  align-items:center;
  gap:12px !important;
  cursor:pointer;
  text-transform:none !important;
  letter-spacing:.04em !important;
  font-size:.78rem !important;
}

.check-label input{
  width:auto;
  margin:0;
  accent-color:var(--accent);
}

.form-actions{
  margin-top:34px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.required-note{
  margin:0;
  color:#777;
  font-size:.72rem;
  letter-spacing:.06em;
}

.submit-btn{
  appearance:none;
  border:0;
  background:transparent;
  color:var(--ivory);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:15px;
  padding:10px 0;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.submit-btn i{
  width:76px;
  height:1px;
  background:rgba(255,255,255,.9);
  position:relative;
  overflow:hidden;
}

.submit-btn i::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--accent);
  transform:translateX(-100%);
  transition:transform .45s ease;
}

.submit-btn:hover i::after{
  transform:translateX(0);
}

.submit-btn:disabled{
  opacity:.5;
  cursor:wait;
}

.form-status{
  min-height:22px;
  margin-top:22px;
  font-size:.82rem;
  line-height:1.5;
}

.form-status.success{
  color:#c8d7c8;
}

.form-status.error{
  color:#e0a0a0;
}

.hp-field{
  position:absolute !important;
  left:-99999px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}

@media(max-width:800px){
  .contact-inner{
    padding:86px 18px 72px;
  }

  .contact-page h2{
    margin-bottom:38px;
  }

  .form-grid{
    grid-template-columns:1fr;
    gap:24px;
  }

  .field-full{
    grid-column:auto;
  }

  .form-actions{
    align-items:flex-start;
    flex-direction:column;
  }
}


/* =========================================================
   V0.18 - ICÔNE HEADER + HAUT DE PAGE
   ========================================================= */

/* Ancienne icône du site, discrète à gauche du menu */
.legacy-icon-link{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  width:22px;
  height:22px;
  margin-right:18px;
  flex:0 0 auto;
  opacity:.9;
  transition:opacity .25s ease, transform .25s ease;
}

.legacy-icon-link:hover{
  opacity:1;
  transform:translateY(-1px);
}

.legacy-icon{
  display:block;
  width:20px;
  height:20px;
  object-fit:contain;
}

/* Le menu reste aligné par le bas avec le bloc nom */
.clean-header .menu-row{
  display:flex;
  align-items:flex-end;
}

/* Bouton bas de page */
.back-top-wrap{
  background:var(--black);
  padding:42px max(32px,7vw) 18px;
  display:flex;
  justify-content:flex-end;
}

.back-top{
  display:inline-flex;
  align-items:center;
  gap:14px;
  font-size:.70rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ivory);
  opacity:.86;
  transition:opacity .25s ease;
}

.back-top:hover{
  opacity:1;
}

.back-top i{
  position:relative;
  display:block;
  width:72px;
  height:1px;
  background:rgba(255,255,255,.8);
  overflow:hidden;
}

.back-top i::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--accent);
  transform:translateX(-100%);
  transition:transform .45s ease;
}

.back-top:hover i::after{
  transform:translateX(0);
}

@media(max-width:800px){
  .legacy-icon-link{
    width:20px;
    height:20px;
    margin-right:12px;
  }

  .legacy-icon{
    width:18px;
    height:18px;
  }

  .back-top-wrap{
    padding:34px 18px 16px;
  }
}


/* =========================================================
   V0.19 - logos locaux + metadata galerie via info.txt
   ========================================================= */

/* Logo blanc transparent dans le header */
.legacy-icon-link{
  width:28px;
  height:28px;
  margin-right:16px;
}
.legacy-icon{
  width:26px;
  height:26px;
  object-fit:contain;
}

/* Les champs texte gardent les styles déjà validés */
.meta-date{
  display:block;
  min-height:0;
}
.meta-title:empty,
.meta-comment:empty,
.meta-partner:empty,
.meta-date:empty{
  display:none;
}

/* Partenaire : discret, même logique éditoriale */
.meta-partner{
  margin:.48rem 0 0;
  font-size:.64rem;
  line-height:1.35;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.68);
  font-weight:400;
}

@media(max-width:800px){
  .legacy-icon-link{
    width:24px;
    height:24px;
    margin-right:12px;
  }
  .legacy-icon{
    width:22px;
    height:22px;
  }
}


/* =========================================================
   V0.20 - URL partenaire
   ========================================================= */

.meta-partner a{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.28);
  padding-bottom:2px;
  transition:border-color .25s ease, color .25s ease;
}

.meta-partner a:hover{
  color:rgba(255,255,255,.95);
  border-color:rgba(255,255,255,.72);
}


/* =========================================================
   V0.29 - MULTILINGUE SANS MODIFIER LA GÉOMÉTRIE DU HEADER
   ========================================================= */
.barth-lang-switch{
  position:absolute;
  top:15px;
  right:330px;
  z-index:120;
  font-family:Arial,Helvetica,sans-serif;
}
.barth-lang-current{
  min-width:30px;
  height:24px;
  padding:0 6px;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(5,5,5,.34);
  color:rgba(255,255,255,.92);
  font-size:.61rem;
  letter-spacing:.12em;
  cursor:pointer;
}
.barth-lang-menu{
  position:absolute;
  top:29px;
  right:0;
  width:46px;
  padding:6px;
  display:flex;
  flex-direction:column;
  gap:2px;
  background:rgba(8,8,8,.92);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(10px);
  opacity:0;
  visibility:hidden;
  transform:translateY(-3px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.barth-lang-switch.open .barth-lang-menu{
  opacity:1;
  visibility:visible;
  transform:none;
}
.barth-lang-menu button{
  width:100%;
  padding:5px 3px;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.72);
  font-size:.60rem;
  letter-spacing:.10em;
  cursor:pointer;
}
.barth-lang-menu button:hover{
  background:rgba(255,255,255,.08);
  color:#fff;
}
@media(max-width:1100px){
  .barth-lang-switch{right:285px}
}
@media(max-width:800px){
  .barth-lang-switch{
    top:15px;
    right:60px;
  }
}


/* =========================================================
   V0.30 - sélecteur de langue visible à droite du nom
   ========================================================= */

/* Réserver la place du sélecteur à droite */
.identity-signature,
.clean-header.scrolled .identity-signature{
  right:112px !important;
}

/* Sélecteur juste après BARTH LAFONT / PHOTOGRAPHIE */
.barth-lang-switch{
  position:absolute !important;
  top:14px !important;
  right:34px !important;
  z-index:140 !important;
  margin:0 !important;
  display:block !important;
  font-family:Arial,Helvetica,sans-serif;
}

/* Bouton principal discret, aligné avec le bloc identité */
.barth-lang-current{
  width:46px;
  height:25px;
  padding:0;
  border:1px solid rgba(255,255,255,.34);
  background:rgba(5,5,5,.22);
  color:rgba(255,255,255,.95);
  font-size:.61rem;
  line-height:23px;
  letter-spacing:.12em;
  text-align:center;
  cursor:pointer;
}

/* Menu déroulant */
.barth-lang-menu{
  position:absolute !important;
  top:30px !important;
  right:0 !important;
  left:auto !important;
  width:46px !important;
  min-width:46px !important;
  padding:5px !important;
  display:flex !important;
  flex-direction:column;
  gap:2px;
  background:rgba(8,8,8,.94) !important;
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(10px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-3px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}

.barth-lang-switch.open .barth-lang-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:none;
}

.barth-lang-menu button{
  width:100%;
  height:25px;
  padding:0;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.74);
  font-size:.60rem;
  line-height:25px;
  letter-spacing:.10em;
  text-align:center;
  cursor:pointer;
}

.barth-lang-menu button:hover{
  background:rgba(255,255,255,.08);
  color:#fff;
}

/* Neutraliser les anciennes positions V0.29 */
@media(max-width:1100px){
  .identity-signature,
  .clean-header.scrolled .identity-signature{
    right:104px !important;
  }

  .barth-lang-switch{
    right:26px !important;
  }
}

@media(max-width:800px){
  .identity-signature,
  .clean-header.scrolled .identity-signature{
    right:78px !important;
  }

  .barth-lang-switch{
    top:14px !important;
    right:18px !important;
  }

  .barth-lang-current{
    width:42px;
  }

  .barth-lang-menu{
    width:42px !important;
    min-width:42px !important;
  }
}


/* =========================================================
   V0.32 - sélecteur cliquable hors identity-row
   ========================================================= */
.barth-lang-switch{
  pointer-events:auto !important;
}
.barth-lang-current,
.barth-lang-menu,
.barth-lang-menu button{
  pointer-events:auto !important;
}


/* =========================================================
   V0.33 - sélecteur langue fiabilisé
   ========================================================= */
.clean-header{
  overflow:visible !important;
}
.barth-lang-switch{
  pointer-events:auto !important;
}
.barth-lang-current{
  pointer-events:auto !important;
  position:relative;
  z-index:142;
}
.barth-lang-menu{
  z-index:143 !important;
}
.barth-lang-menu button{
  pointer-events:auto !important;
}


/* =========================================================
   V0.44 - Instagram + typographie / hero
   ========================================================= */

/* Instagram juste avant le sélecteur de langue */
.header-instagram{
  position:absolute;
  top:15px;
  right:92px;
  z-index:141;
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.88);
  opacity:.90;
  transition:opacity .2s ease, transform .2s ease;
}

.header-instagram:hover{
  opacity:1;
  transform:translateY(-1px);
}

.header-instagram svg{
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Laisser la place Instagram + langue à droite */
.identity-signature,
.clean-header.scrolled .identity-signature{
  right:146px !important;
}

/* Hero : titre un peu plus petit */
.hero-copy h1{
  font-size:clamp(3rem,6.9vw,6.45rem) !important;
}

/* Phrase sur une seule ligne en desktop */
.hero-lead{
  max-width:920px !important;
  font-size:clamp(.94rem,1.15vw,1.08rem) !important;
  white-space:nowrap;
}

/* Actualités home : titres un peu plus petits */
#actualites .meta h3{
  font-size:clamp(1.45rem,2.45vw,2.55rem) !important;
}

/* Dates plus présentes */
#actualites .meta small,
#actualites .meta-date{
  font-size:.74rem !important;
  font-weight:700 !important;
  letter-spacing:.16em !important;
}

/* Mobile : la phrase doit pouvoir repasser sur plusieurs lignes */
@media(max-width:900px){
  .hero-lead{
    white-space:normal;
    max-width:640px !important;
  }

  .identity-signature,
  .clean-header.scrolled .identity-signature{
    right:126px !important;
  }

  .header-instagram{
    right:72px;
  }
}

@media(max-width:800px){
  .header-instagram{
    top:15px;
    right:68px;
    width:22px;
    height:22px;
  }

  .header-instagram svg{
    width:18px;
    height:18px;
  }

  .identity-signature,
  .clean-header.scrolled .identity-signature{
    right:106px !important;
  }
}


/* =========================================================
   V0.45 - Instagram couleur
   ========================================================= */
.header-instagram{
  color:inherit;
}

.header-instagram svg{
  width:20px !important;
  height:20px !important;
  display:block;
  overflow:visible;
  stroke:none !important;
}

.header-instagram:hover{
  transform:translateY(-1px) scale(1.04);
}


/* =========================================================
   V0.46 - Contenu Barth / introduction Contact
   ========================================================= */

#barth .barth-subtitle{
  margin:.15rem 0 2.2rem;
  font-size:clamp(1.15rem,1.65vw,1.7rem);
  font-weight:400;
  color:#5b5751;
}

#barth .barth-copy{
  max-width:900px;
}

#barth .barth-copy p{
  margin:0 0 1.25rem;
  font-size:clamp(1rem,1.2vw,1.13rem);
  line-height:1.7;
  color:#55514c;
}

#barth .barth-closing{
  margin-top:2rem !important;
  color:#24211f !important;
}

#barth .barth-closing strong{
  font-weight:700;
}

.contact-intro{
  max-width:830px;
  margin:-1rem 0 3rem;
  font-size:clamp(1rem,1.2vw,1.12rem);
  line-height:1.7;
  color:rgba(255,255,255,.72);
}

@media(max-width:800px){
  #barth .barth-copy p,
  .contact-intro{
    font-size:1rem;
  }
}

.contact-download{
  display:flex;
  align-items:baseline;
  gap:1rem;
  flex-wrap:wrap;
  margin:-1rem 0 3rem;
  color:rgba(255,255,255,.72);
  font-size:clamp(1rem,1.2vw,1.12rem);
  font-weight:400;
  line-height:1.7;
}

.contact-download-btn{
  display:inline;
  min-height:0;
  padding:0;
  border:0;
  background:transparent;
  color:#c6975b;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  transition:color .25s ease,opacity .25s ease;
}

.contact-download-btn:hover,
.contact-download-btn:focus-visible{
  background:transparent;
  color:#d7ab72;
  opacity:.9;
  outline:none;
}

@media(max-width:800px){
  .contact-download{
    align-items:flex-start;
    margin:-.5rem 0 2.3rem;
  }
}


/* =========================================================
   V0.47 - UNIVERS INTERACTIF
   ========================================================= */

#univers{
  min-height:100svh;
}

.univers-layout{
  display:grid;
  grid-template-columns:minmax(360px, .82fr) minmax(0, 1.18fr);
  gap:clamp(34px,5vw,86px);
  align-items:center;
  margin-top:28px;
  min-height:calc(100svh - 180px);
}

#univers .univers-words{
  margin-top:0;
  justify-content:center;
}

/* Suppression des lignes demandée */
#univers .univers-words a,
#univers .univers-words a:last-child{
  border-top:0 !important;
  border-bottom:0 !important;
}

/* Un peu plus compact pour laisser respirer la photo */
#univers .univers-words a{
  display:block;
  width:max-content;
  max-width:100%;
  font-size:clamp(2.55rem,5.25vw,6.0rem);
  line-height:.98;
  padding:.12em 0;
  opacity:.48;
  transition:
    opacity .3s ease,
    color .3s ease,
    transform .3s ease,
    padding-left .3s ease;
}

#univers .univers-words a:hover{
  opacity:.82;
  padding-left:.08em;
  color:var(--ivory);
}

#univers .univers-words a.is-active{
  opacity:1;
  color:var(--accent);
  padding-left:.08em;
}

.univers-visual{
  position:relative;
  width:100%;
  height:min(72vh,760px);
  min-height:470px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:transparent;
}

.univers-visual img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  opacity:1;
  transform:scale(1);
  filter:blur(0);
  transition:
    opacity .55s ease,
    transform .75s cubic-bezier(.2,.7,.1,1),
    filter .55s ease;
}

.univers-visual img.is-changing{
  opacity:0;
  transform:scale(.992);
  filter:blur(3px);
}

@media(max-width:1050px){
  .univers-layout{
    grid-template-columns:minmax(300px,.78fr) minmax(0,1.22fr);
    gap:32px;
  }

  #univers .univers-words a{
    font-size:clamp(2.35rem,5.3vw,4.9rem);
    line-height:1;
    padding:.13em 0;
  }

  .univers-visual{
    height:min(65vh,650px);
  }
}

@media(max-width:800px){
  #univers{
    min-height:auto;
  }

  .univers-layout{
    display:block;
    min-height:0;
    margin-top:26px;
  }

  #univers .univers-words{
    display:flex;
    flex-direction:column;
  }

  #univers .univers-words a{
    width:100%;
    font-size:clamp(2.2rem,10.8vw,4.2rem);
    line-height:1;
    padding:.14em 0;
  }

  /*
   Sur mobile, la photo est présentée sous la liste.
   Elle reste toujours entière, portrait ou paysage.
  */
  .univers-visual{
    margin-top:28px;
    height:58vh;
    min-height:360px;
    max-height:620px;
  }
}


/* =========================================================
   V0.49 - UNIVERS : fondu/enchaîné ralenti à 1s
   ========================================================= */

.univers-visual img{
  transition:
    opacity 1s ease,
    transform 1.15s cubic-bezier(.2,.7,.1,1),
    filter 1s ease !important;
}

.univers-visual img.is-changing{
  opacity:0;
  transform:scale(.995);
  filter:blur(2px);
}

/* =========================================================
   V0.51 - UNIVERS : VRAI CROSSFADE À DEUX COUCHES
   ========================================================= */

.univers-visual{
  position:relative !important;
  overflow:hidden !important;
}

.univers-visual .univers-layer{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  display:block !important;
  object-fit:contain !important;
  object-position:center center !important;
  opacity:0 !important;
  visibility:visible !important;
  transform:none !important;
  filter:none !important;
  transition:opacity 1s cubic-bezier(.45,0,.55,1) !important;
  will-change:opacity;
  pointer-events:none !important;
}

.univers-visual .univers-layer.is-visible{
  opacity:1 !important;
}

/* Neutralisation de l'ancien système mono-image */
.univers-visual .univers-layer.is-changing{
  transform:none !important;
  filter:none !important;
}

@media(prefers-reduced-motion:reduce){
  .univers-visual .univers-layer{
    transition-duration:.15s !important;
  }
}


/* V0.53 - Legal / privacy */
.legal-main{padding:150px clamp(24px,6vw,90px) 90px;background:#f4f2ed;color:#151515;min-height:100vh}.legal-shell{max-width:1040px;margin:0 auto}.legal-kicker{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;margin:0 0 20px;color:#6f6a62}.legal-main h1{font-size:clamp(2.6rem,6vw,5.8rem);line-height:.95;font-weight:500;letter-spacing:-.04em;margin:0 0 48px}.legal-intro{font-size:clamp(1.08rem,1.7vw,1.35rem);line-height:1.65;max-width:820px;margin:0 0 60px;color:#413d37}.legal-section{border-top:1px solid rgba(0,0,0,.18);padding:34px 0 28px}.legal-section h2{font-size:1.25rem;margin:0 0 16px;font-weight:600}.legal-section p,.legal-section li{font-size:1rem;line-height:1.72;color:#393631}.legal-section p{margin:0 0 12px}.legal-section ul{margin:8px 0 0;padding-left:20px}.legal-section a{color:inherit;text-decoration:underline;text-underline-offset:3px}.legal-note{font-size:.86rem!important;color:#706b64!important}.legal-updated{margin-top:42px;font-size:.8rem;color:#77716a}.footer-legal{display:flex;gap:18px;flex-wrap:wrap;align-items:center}.footer-legal a{color:inherit;text-decoration:none;opacity:.72;transition:opacity .2s ease}.footer-legal a:hover{opacity:1}.privacy-short{font-size:.78rem;line-height:1.55;opacity:.72;max-width:760px;margin:16px 0 0}.privacy-short a{color:inherit;text-decoration:underline;text-underline-offset:3px}.youtube-consent{min-height:300px;display:flex;align-items:center;justify-content:center;text-align:center;background:#0d0d0d;border:1px solid rgba(255,255,255,.14);padding:36px}.youtube-consent-inner{max-width:650px}.youtube-consent h3{font-size:clamp(1.6rem,3vw,2.5rem);font-weight:500;margin:0 0 14px}.youtube-consent p{opacity:.75;line-height:1.6;margin:0 auto 22px}.youtube-consent button{border:1px solid rgba(255,255,255,.55);background:transparent;color:#fff;padding:13px 20px;font:inherit;cursor:pointer;transition:background .2s,color .2s}.youtube-consent button:hover{background:#fff;color:#111}.youtube-consent a{color:inherit;text-underline-offset:3px}.video-wrap iframe{width:100%;aspect-ratio:16/9;border:0;display:block}@media(max-width:700px){.legal-main{padding-top:120px}.legal-main h1{margin-bottom:30px}.footer-legal{gap:10px 14px}.youtube-consent{min-height:240px;padding:24px}}


/* V0.56 - cartes Actualités ouvrables */
.gallery-card.is-clickable{cursor:pointer}
.gallery-card.is-clickable:focus-visible{outline:1px solid var(--accent);outline-offset:4px}

/* V0.57 - Actualités : affordance claire et source unique */
.gallery-card .gallery-cta{
  position:absolute;z-index:6;right:20px;top:20px;
  padding:8px 11px;border:1px solid rgba(255,255,255,.55);
  background:rgba(0,0,0,.42);backdrop-filter:blur(5px);
  color:#fff;font-size:.61rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  opacity:0;transform:translateY(-4px);transition:opacity .25s ease,transform .25s ease,background .25s ease;
  pointer-events:none;
}
.gallery-card.is-clickable:hover .gallery-cta,.gallery-card.is-clickable:focus-visible .gallery-cta{opacity:1;transform:none}
.gallery-card.is-clickable:hover{cursor:pointer}
@media(max-width:800px){.gallery-card .gallery-cta{opacity:1;transform:none;right:14px;top:14px}}

/* =========================================================
   V0.70 - lisibilite intro / reperes / header
   ========================================================= */

/* Intro accueil : sous-titre sous BARTH LAFONT */
.intro-tag{
  font-size:clamp(1.4rem,2vw,2rem) !important;
  font-weight:700 !important;
}

/* Reperes jaunes : +30% environ et graisse renforcee */
.kicker{
  font-size:.88rem !important;
  font-weight:700 !important;
}
.meta small{
  font-size:.87rem !important;
  font-weight:700 !important;
}
.news-date{
  font-size:.86rem !important;
  font-weight:700 !important;
}
.gallery-date{
  font-size:.94rem !important;
  font-weight:700 !important;
}
.story-date{
  font-size:.98rem !important;
  font-weight:700 !important;
}
.story-card-copy span{
  font-size:.96rem !important;
  font-weight:700 !important;
}

/* Header toujours lisible sur les fonds clairs */
.clean-header,
.clean-header.scrolled{
  background:rgba(0,0,0,.50) !important;
}


/* V0.77 - navigation coherente et onglet actif */
.clean-header nav{gap:18px;}
.clean-header nav a.is-active{color:var(--accent);opacity:1;font-weight:700;}
@media(max-width:1250px) and (min-width:801px){
  .clean-header nav{gap:12px;font-size:.64rem;letter-spacing:.10em;}
}


/* Accessible text hidden visually */
.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

/* CTA contact global */
.global-contact-cta{
  width:100%;
  box-sizing:border-box;
  padding:34px 24px 30px;
  text-align:center;
  color:rgba(255,255,255,.78);
  background:#090909;
  font-size:.9rem;
  line-height:1.5;
  letter-spacing:.02em;
}
.global-contact-cta a{
  color:var(--accent,#d9a15b);
  font-weight:700;
  text-decoration:none;
  margin-left:.22em;
}
.global-contact-cta a:hover,.global-contact-cta a:focus-visible{text-decoration:underline}
@media(max-width:700px){.global-contact-cta{padding:28px 18px 26px;font-size:.84rem}}