:root{
  --noir:#0B0A09;
  --noir-2:#12100E;
  --ocre:#E8A33D;
  --ocre-clair:#F5D08A;
  --sang:#8E1B1B;
  --blanc:#F5EFE6;
  --gris:#9C948A;
  --serif:"Bodoni Moda", "Didot", "Bodoni MT", Georgia, serif;
  --sans:"Archivo", "Segoe UI", system-ui, sans-serif;
  --mx:clamp(1.25rem, 5vw, 6rem);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--noir);
  color:var(--blanc);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ————————————————————————————— LE COMPÁS
   12 temps, accents sur 3 · 6 · 8 · 10 · 12.
   C'est la grille rythmique du flamenco, et ici la grille du site. */
.compas{
  display:flex;
  align-items:flex-end;
  gap:clamp(6px,1.1vw,14px);
  height:22px;
}
.compas span{
  width:2px;
  height:7px;
  background:var(--gris);
  opacity:.35;
  display:block;
  transition:opacity .4s, height .4s, background .4s;
}
.compas span.accent{height:18px;opacity:.75;background:var(--ocre)}
.compas.bat span.on{opacity:1;background:var(--ocre-clair);height:22px}

/* ————————————————————————————— NAV */
header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem var(--mx);
  background:linear-gradient(to bottom, rgba(11,10,9,.92), rgba(11,10,9,0));
  backdrop-filter:blur(6px);
}
.marque{
  font-family:var(--serif);
  font-size:1.05rem;letter-spacing:.34em;text-transform:uppercase;
  font-weight:500;
}
.marque em{font-style:italic;letter-spacing:.1em;color:var(--ocre)}
nav{display:flex;gap:clamp(1rem,2.4vw,2.4rem);align-items:center}
nav a{
  color:var(--blanc);text-decoration:none;
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  opacity:.72;position:relative;padding-bottom:4px;
}
nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--ocre);transition:width .35s;
}
nav a:hover{opacity:1}
nav a:hover::after{width:100%}
.btn{
  display:inline-block;text-decoration:none;
  font-family:var(--sans);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  padding:.85rem 1.6rem;border:1px solid var(--ocre);color:var(--ocre);
  background:transparent;transition:.35s;white-space:nowrap;
}
.btn:hover{background:var(--ocre);color:var(--noir)}
.btn-plein{background:var(--ocre);color:var(--noir)}
.btn-plein:hover{background:var(--ocre-clair);border-color:var(--ocre-clair)}
nav .btn{opacity:1}
nav .btn::after{display:none}

/* ————————————————————————————— HERO / LE CONTRE-JOUR */
.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:8rem var(--mx) 3rem;
  overflow:hidden;
}
/* la source de lumière, derrière la danseuse */
.hero::before{
  content:"";position:absolute;top:42%;left:50%;
  width:min(120vh,1100px);aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(232,163,61,.30) 0%, rgba(232,163,61,.10) 35%, transparent 68%);
  pointer-events:none;
}
/* la jupe qui tourne : arcs concentriques déphasés */
.ruedo{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(92vh,900px);aspect-ratio:1;pointer-events:none;opacity:.55;
}
.ruedo circle{fill:none;stroke:var(--ocre);transform-origin:center}
.ruedo .r1{stroke-opacity:.30;stroke-width:.6;animation:tourne 34s linear infinite}
.ruedo .r2{stroke-opacity:.20;stroke-width:.5;stroke-dasharray:3 9;animation:tourne 52s linear infinite reverse}
.ruedo .r3{stroke-opacity:.14;stroke-width:.4;stroke-dasharray:1 6;animation:tourne 78s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}

.hero-inner{position:relative;z-index:2;max-width:1100px}
.surtitre{
  font-size:.76rem;letter-spacing:.42em;text-transform:uppercase;
  color:var(--ocre);margin-bottom:1.8rem;max-width:none;
}
h1{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.9rem,9.5vw,8.2rem);
  line-height:.94;
  letter-spacing:-.02em;
  text-wrap:balance;
}
h1 em{
  font-style:italic;font-weight:500;
  color:transparent;
  background:linear-gradient(100deg,var(--ocre-clair),var(--ocre) 45%,var(--sang));
  -webkit-background-clip:text;background-clip:text;
}
.hero p{
  margin-top:2.2rem;max-width:44ch;
  font-size:clamp(1rem,1.5vw,1.18rem);color:var(--gris);
}
.hero p.surtitre{margin-top:0;max-width:none}
.hero-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.8rem}
.hero-compas{
  position:absolute;left:var(--mx);bottom:3rem;z-index:2;
  display:flex;align-items:center;gap:1.4rem;
}
.hero-compas small{
  font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gris);
}

/* ————————————————————————————— SECTIONS */
section{padding:clamp(5rem,11vh,9rem) var(--mx);position:relative}
.rule{
  display:flex;align-items:center;gap:1.6rem;
  margin-bottom:3.2rem;
}
.rule h2{
  font-family:var(--serif);font-weight:400;font-style:italic;
  font-size:clamp(1.7rem,3.6vw,2.9rem);line-height:1.05;white-space:nowrap;
}
.rule .num{
  font-size:.72rem;letter-spacing:.3em;color:var(--ocre);
  font-family:var(--sans);
}
.rule .trait{flex:1;height:1px;background:linear-gradient(to right,rgba(232,163,61,.5),transparent)}

/* — Les cours : quatre temps de la semaine */
.cours{display:grid;gap:1px;background:rgba(245,239,230,.12);border:1px solid rgba(245,239,230,.12)}
.cours article{
  background:var(--noir);
  padding:clamp(1.6rem,3vw,2.6rem);
  display:grid;grid-template-columns:auto 1fr auto;gap:clamp(1rem,3vw,3rem);align-items:center;
  transition:background .4s;
}
.cours article:hover{background:var(--noir-2)}
.jour{
  font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--ocre);
  min-width:5.5rem;
}
.horaire{font-variant-numeric:tabular-nums;font-size:.86rem;color:var(--gris);letter-spacing:.08em;display:block;margin-top:.15rem}
.cours h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,2.6vw,1.85rem);line-height:1.15}
.cours h3 span{display:block;font-family:var(--sans);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gris);margin-top:.5rem;font-weight:400}
.niveau{
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid rgba(232,163,61,.45);color:var(--ocre);
  padding:.35rem .8rem;white-space:nowrap;
}

/* — Tarifs */
.tarifs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem}
.tarif{
  border:1px solid rgba(245,239,230,.14);padding:2.4rem 2rem;position:relative;
  display:flex;flex-direction:column;
  transition:border-color .4s,transform .4s;
}
.tarif:hover{border-color:rgba(232,163,61,.55);transform:translateY(-4px)}
.tarif.mise-en-avant{border-color:rgba(232,163,61,.55);background:linear-gradient(160deg,rgba(232,163,61,.07),transparent 60%)}
.tarif .quoi{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ocre);margin-bottom:1.4rem}
.tarif .prix{font-family:var(--serif);font-size:clamp(2.6rem,5vw,3.6rem);line-height:1;font-weight:400}
.tarif .prix .eur{
  font-family:var(--sans);font-size:.30em;font-weight:400;
  vertical-align:.9em;margin-left:.22em;letter-spacing:.05em;color:var(--ocre);
}
.tarif .detail{color:var(--gris);font-size:.92rem;margin-top:1.2rem;flex:1}
.tarif .plus{
  margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid rgba(245,239,230,.12);
  font-size:.86rem;color:var(--blanc);
}
.tarif .plus b{color:var(--ocre);font-weight:500}

/* — Spectacle, en contre-jour */
.spectacle{
  background:
    radial-gradient(ellipse at 78% 45%, rgba(232,163,61,.16), transparent 58%),
    var(--noir-2);
  border-top:1px solid rgba(245,239,230,.10);
  border-bottom:1px solid rgba(245,239,230,.10);
}
.spectacle-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,6vw,6rem);align-items:center}
.spectacle h2{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(2.6rem,7vw,5.4rem);line-height:.98;margin-bottom:1.6rem;
}
.spectacle p{color:var(--gris);max-width:46ch;margin-bottom:1rem}
.chiffres{display:flex;gap:clamp(1.5rem,4vw,3.5rem);margin-top:2.6rem;flex-wrap:wrap}
.chiffre b{
  display:block;font-family:var(--serif);font-size:clamp(2rem,4vw,2.9rem);
  font-weight:400;line-height:1;color:var(--ocre);
}
.chiffre span{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gris)}
/* le cadre photo à contre-jour */
.photo{
  aspect-ratio:3/4;position:relative;overflow:hidden;
  background:linear-gradient(190deg,#1B1712,#0B0A09 70%);
  border:1px solid rgba(245,239,230,.12);
  display:flex;align-items:flex-end;justify-content:center;
}
.photo::before{
  content:"";position:absolute;top:-15%;left:50%;transform:translateX(-50%);
  width:130%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(245,208,138,.34),transparent 62%);
}
.photo span{
  position:relative;z-index:2;margin-bottom:1.6rem;
  font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gris);
}

/* — Représentations */
.intro{color:var(--gris);max-width:58ch;margin-bottom:3rem;font-size:1.05rem}
.scenes-piste{
  display:flex;gap:1.5rem;overflow-x:auto;padding-bottom:1.5rem;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;scrollbar-color:rgba(232,163,61,.5) transparent;
}
.scene{flex:0 0 clamp(240px,26vw,330px);scroll-snap-align:start}
.scene-img{
  aspect-ratio:4/5;position:relative;overflow:hidden;
  background:linear-gradient(200deg,#1B1712,#0B0A09 72%);
  border:1px solid rgba(245,239,230,.12);
  display:flex;align-items:center;justify-content:center;
}
.scene-img::before{
  content:"";position:absolute;top:-20%;right:-10%;
  width:110%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(245,208,138,.26),transparent 62%);
}
.scene-img span{
  position:relative;z-index:2;
  font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gris);
}
.scene figcaption{margin-top:1rem}
.scene figcaption b{
  display:block;font-family:var(--serif);font-weight:400;font-size:1.2rem;
}
.scene figcaption span{
  display:block;margin-top:.25rem;
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);
}
.sous-titre{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:1.45rem;margin:3.5rem 0 1.6rem;
}
.lieux{
  display:flex;flex-wrap:wrap;gap:.7rem;list-style:none;
}
.lieux li{
  border:1px solid rgba(245,239,230,.16);
  padding:.5rem 1rem;font-size:.86rem;color:var(--gris);
  transition:border-color .35s,color .35s;
}
.lieux li:hover{border-color:rgba(232,163,61,.5);color:var(--blanc)}
.demander{
  margin-top:3.5rem;padding:2.2rem;
  border-left:2px solid var(--ocre);
  background:linear-gradient(90deg,rgba(232,163,61,.07),transparent 70%);
  display:flex;flex-wrap:wrap;gap:1.6rem;align-items:center;justify-content:space-between;
}
.demander p{color:var(--gris);max-width:56ch}
.demander b{color:var(--blanc);font-weight:500}

/* — L'association */
.asso-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2.5rem}
.asso-grid h4{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ocre);margin-bottom:1.2rem;font-weight:500}
.asso-grid li{list-style:none;color:var(--gris);padding:.45rem 0;border-bottom:1px solid rgba(245,239,230,.07);font-size:.94rem}
.asso-grid li b{color:var(--blanc);font-weight:400;display:block;font-family:var(--serif);font-size:1.05rem}

/* — Adhésion / CTA */
.adhesion{
  text-align:center;
  background:radial-gradient(ellipse at 50% 120%, rgba(142,27,27,.30), transparent 62%);
}
.adhesion h2{
  font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,6vw,4.4rem);
  line-height:1.02;margin-bottom:1.4rem;
}
.adhesion h2 em{font-style:italic;color:var(--ocre)}
.adhesion p{color:var(--gris);max-width:52ch;margin:0 auto 2.6rem}
.adhesion .hero-actions{justify-content:center}

/* — Contact */
form{display:grid;gap:1.4rem;max-width:640px}
.champ{display:grid;gap:.5rem}
label{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gris)}
input,textarea,select{
  background:transparent;border:0;border-bottom:1px solid rgba(245,239,230,.22);
  color:var(--blanc);font-family:var(--sans);font-size:1rem;padding:.7rem 0;
  transition:border-color .35s;
}
input:focus,textarea:focus,select:focus{outline:0;border-color:var(--ocre)}
textarea{resize:vertical;min-height:110px}
.deux{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}

footer{
  padding:3rem var(--mx);border-top:1px solid rgba(245,239,230,.10);
  display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between;align-items:center;
  font-size:.8rem;color:var(--gris);
}
footer a{color:var(--gris);text-decoration:none}
footer a:hover{color:var(--ocre)}

@media(max-width:860px){
  .spectacle-grid{grid-template-columns:1fr}
  .cours article{grid-template-columns:1fr;gap:.9rem}
  .niveau{justify-self:start}
  .deux{grid-template-columns:1fr}
  .rule h2{white-space:normal}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* =========================================================
   PAGES INTÉRIEURES
   ========================================================= */

/* — Bandeau de tête des pages intérieures (hero court) */
.entete{
  position:relative;
  padding:calc(6rem + 4vh) var(--mx) clamp(3rem,7vh,5rem);
  overflow:hidden;
  border-bottom:1px solid rgba(245,239,230,.10);
}
.entete::before{
  content:"";position:absolute;top:-40%;left:62%;
  width:min(90vh,760px);aspect-ratio:1;transform:translateX(-50%);
  background:radial-gradient(circle, rgba(232,163,61,.24) 0%, rgba(232,163,61,.07) 38%, transparent 68%);
  pointer-events:none;
}
.entete-inner{position:relative;z-index:2;max-width:900px}
.entete h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.4rem,6.5vw,5rem);line-height:1;letter-spacing:-.02em;
}
.entete h1 em{
  font-style:italic;color:transparent;
  background:linear-gradient(100deg,var(--ocre-clair),var(--ocre) 55%,var(--sang));
  -webkit-background-clip:text;background-clip:text;
}
.entete .chapeau{
  margin-top:1.6rem;max-width:52ch;color:var(--gris);
  font-size:clamp(1rem,1.4vw,1.14rem);
}

/* — Fil d'Ariane */
.ariane{
  font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gris);margin-bottom:1.6rem;
}
.ariane a{color:var(--ocre);text-decoration:none}
.ariane a:hover{text-decoration:underline}

/* — Page active dans la nav */
nav a[aria-current="page"]{opacity:1}
nav a[aria-current="page"]::after{width:100%}

/* — Teasers de l'accueil vers les pages */
.teasers{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;
  background:rgba(245,239,230,.12);border:1px solid rgba(245,239,230,.12)}
.teaser{
  background:var(--noir);padding:clamp(1.8rem,3vw,2.6rem);
  text-decoration:none;color:var(--blanc);display:flex;flex-direction:column;
  transition:background .4s;
}
.teaser:hover{background:var(--noir-2)}
.teaser .num{font-size:.7rem;letter-spacing:.3em;color:var(--ocre);margin-bottom:1.4rem}
.teaser h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.1}
.teaser p{color:var(--gris);font-size:.94rem;margin-top:.9rem;flex:1}
.teaser .fleche{color:var(--ocre);margin-top:1.6rem;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase}

/* — Galerie photo en grille (spectacle, représentations) */
.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.2rem}
.galerie figure{margin:0}
.galerie .cadre{
  aspect-ratio:4/5;position:relative;overflow:hidden;
  background:linear-gradient(200deg,#1B1712,#0B0A09 72%);
  border:1px solid rgba(245,239,230,.12);
  display:flex;align-items:center;justify-content:center;
}
.galerie .cadre::before{
  content:"";position:absolute;top:-18%;left:52%;transform:translateX(-50%);
  width:120%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(245,208,138,.24),transparent 62%);
}
.galerie .cadre span{
  position:relative;z-index:2;
  font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gris);text-align:center;padding:0 1rem;
}
.galerie figcaption{margin-top:.8rem;font-size:.82rem;color:var(--gris)}

/* — Bloc texte long */
.prose{max-width:64ch}
.prose p{color:var(--gris);margin-bottom:1.2rem}
.prose p b,.prose strong{color:var(--blanc);font-weight:500}
.prose h3{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:1.5rem;color:var(--blanc);margin:2.6rem 0 1rem;
}
.prose a:not(.btn){color:var(--ocre);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:not(.btn):hover{color:var(--ocre-clair)}
.prose code{font-size:.9em;color:var(--ocre-clair);background:rgba(232,163,61,.09);padding:.1em .4em;border-radius:2px}

/* — Deux colonnes texte / encadré */
.duo{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.encadre{
  border:1px solid rgba(245,239,230,.14);padding:2rem;
  background:linear-gradient(160deg,rgba(232,163,61,.06),transparent 60%);
}
.encadre h4{
  font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ocre);margin-bottom:1.2rem;font-weight:500;
}
.encadre li{list-style:none;color:var(--gris);padding:.5rem 0;border-bottom:1px solid rgba(245,239,230,.08);font-size:.92rem}
.encadre li:last-child{border-bottom:0}
.encadre li b{color:var(--blanc);font-weight:400;display:block;font-family:var(--serif);font-size:1.02rem}

/* — Message de retour du formulaire */
.retour{
  padding:1rem 1.3rem;border-left:2px solid var(--ocre);
  background:rgba(232,163,61,.09);margin-bottom:2rem;font-size:.94rem;
}
.retour.erreur{border-left-color:var(--sang);background:rgba(142,27,27,.14)}

@media(max-width:860px){
  .duo{grid-template-columns:1fr}
}

/* — Le select doit suivre le même trait que les autres champs */
select{
  appearance:none;-webkit-appearance:none;
  border-radius:0;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ocre) 50%),
                   linear-gradient(135deg,var(--ocre) 50%,transparent 50%);
  background-position:calc(100% - 12px) 1.25em, calc(100% - 7px) 1.25em;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  padding-right:2rem;
}
select option{background:var(--noir-2);color:var(--blanc)}

/* =========================================================
   PHOTOS — traitement « à contre-jour »
   Les photos viennent de sources très différentes (scène sombre,
   plein soleil de féria). On les ramène dans la même lumière :
   assombries et légèrement désaturées, avec un voile chaud.
   Au survol, l'image reprend ses couleurs.
   ========================================================= */
.ph{position:relative;overflow:hidden;display:block;background:var(--noir-2)}
.ph img{
  display:block;width:100%;height:100%;object-fit:cover;
  filter:brightness(.80) contrast(1.10) saturate(.80);
  transition:filter .6s ease, transform .6s ease;
}
.ph::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to top, rgba(11,10,9,.72) 0%, rgba(11,10,9,.12) 45%, transparent 75%),
    radial-gradient(ellipse at 50% 12%, rgba(232,163,61,.20), transparent 62%);
  transition:opacity .6s ease;
}
.ph:hover img{filter:brightness(.95) contrast(1.04) saturate(.96);transform:scale(1.03)}
.ph:hover::after{opacity:.55}

/* Formats selon l'emplacement */
.galerie .ph{aspect-ratio:4/5;border:1px solid rgba(245,239,230,.12)}
.scene .ph{aspect-ratio:4/5;border:1px solid rgba(245,239,230,.12)}
.spectacle .ph{aspect-ratio:3/4;border:1px solid rgba(245,239,230,.12)}

/* — Variante affiche : on reproduit le document tel quel.
     Pas de recadrage, pas de filtre contre-jour, pas de voile :
     le bandeau de date est en bas de l'affiche et doit rester lisible. */
.spectacle .photo.affiche{
  aspect-ratio:1132/1600;align-items:stretch;
  background:var(--noir-2);
}
.spectacle .photo.affiche::before,
.spectacle .photo.affiche::after{display:none}
.spectacle .photo.affiche img{filter:none;object-fit:contain}
.spectacle .photo.affiche:hover img{filter:none;transform:none}

/* Légende posée dans l'image */
.ph figcaption,.ph .legende{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:1.1rem 1.2rem;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--blanc);
}

/* =========================================================
   VIDÉO — façade sans traceur
   Rien n'est demandé à YouTube tant que le visiteur n'a pas
   cliqué : la vignette est une de nos photos, servie par nous.
   ========================================================= */
.videos{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.6rem}
.video{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  border:1px solid rgba(245,239,230,.14);
  background:var(--noir-2);cursor:pointer;padding:0;width:100%;
  display:block;font-family:var(--sans);
}
.video img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.55) contrast(1.10) saturate(.75);
  transition:filter .5s, transform .6s;
}
.video::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 50%, rgba(232,163,61,.18), transparent 60%),
             linear-gradient(to top, rgba(11,10,9,.80), transparent 60%);
  pointer-events:none;
}
.video:hover img{filter:brightness(.70) contrast(1.05) saturate(.9);transform:scale(1.03)}
.video-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
  width:76px;height:76px;border-radius:50%;
  border:1px solid var(--ocre);background:rgba(11,10,9,.45);
  display:flex;align-items:center;justify-content:center;
  transition:background .4s, transform .4s;
}
.video:hover .video-play{background:var(--ocre);transform:translate(-50%,-50%) scale(1.08)}
.video-play svg{width:22px;height:22px;fill:var(--ocre);margin-left:4px;transition:fill .4s}
.video:hover .video-play svg{fill:var(--noir)}
.video-titre{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.2rem 1.4rem;text-align:left;
}
.video-titre b{
  display:block;font-family:var(--serif);font-weight:400;font-size:1.35rem;color:var(--blanc);
}
.video-titre span{
  display:block;margin-top:.3rem;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gris);
}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video.joue::after,.video.joue .video-play,.video.joue .video-titre,.video.joue img{display:none}
.note-video{color:var(--gris);font-size:.86rem;margin-top:1.4rem}

/* =========================================================
   NAVIGATION — paliers intermédiaire et mobile
   ========================================================= */

/* Entre 860 et 1180 px la barre est trop dense : on resserre. */
@media(max-width:1180px) and (min-width:861px){
  header{padding-left:1.5rem;padding-right:1.5rem}
  .marque{font-size:.92rem;letter-spacing:.22em}
  nav{gap:1.1rem}
  nav a{font-size:.7rem;letter-spacing:.09em}
  nav .btn{padding:.7rem 1.1rem}
}

/* Le bouton d'ouverture, invisible sur grand écran */
.burger{
  display:none;
  background:transparent;border:1px solid rgba(245,239,230,.28);
  width:44px;height:40px;padding:0;cursor:pointer;
  align-items:center;justify-content:center;gap:5px;flex-direction:column;
  transition:border-color .3s;
}
.burger:hover{border-color:var(--ocre)}
.burger span{display:block;width:18px;height:1px;background:var(--blanc);transition:transform .3s,opacity .3s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media(max-width:860px){
  .burger{display:flex}
  nav{
    position:fixed;inset:0 0 0 auto;width:min(82vw,340px);
    background:var(--noir-2);
    border-left:1px solid rgba(232,163,61,.28);
    flex-direction:column;align-items:flex-start;justify-content:center;
    gap:.4rem;padding:5rem 2rem 2rem;
    transform:translateX(100%);transition:transform .4s ease;
    z-index:60;overflow-y:auto;
  }
  nav.ouvert{transform:translateX(0)}
  nav a{
    font-size:.95rem;letter-spacing:.14em;opacity:.9;
    padding:.9rem 0;width:100%;
    border-bottom:1px solid rgba(245,239,230,.08);
  }
  nav a::after{display:none}
  nav a[aria-current="page"]{color:var(--ocre)}
  nav .btn{margin-top:1.6rem;width:100%;text-align:center;border-bottom:1px solid var(--ocre)}
  /* voile derrière le panneau */
  .voile{
    position:fixed;inset:0;background:rgba(11,10,9,.72);
    opacity:0;pointer-events:none;transition:opacity .4s;z-index:55;
  }
  .voile.ouvert{opacity:1;pointer-events:auto}
}

/* Un ancêtre en backdrop-filter confine les descendants position:fixed :
   le panneau se retrouverait enfermé dans la barre du haut. On le retire
   sur mobile et on compense par un fond opaque. */
@media(max-width:860px){
  header{
    backdrop-filter:none;-webkit-backdrop-filter:none;
    background:linear-gradient(to bottom, rgba(11,10,9,.97) 0%, rgba(11,10,9,.88) 65%, rgba(11,10,9,0) 100%);
  }
}

/* Le bouton doit rester au-dessus du panneau pour servir de fermeture. */
@media(max-width:860px){
  header{z-index:70}
  .burger{position:relative;z-index:65}
}