/* ═══════════════════════════════════════════════════════════════════════════
   Compagnie PulsionL — refonte

   Parti pris : leurs photos sont des clichés de scène, pris dans le noir.
   Un fond clair les enferme dans des rectangles ; un fond sombre les prolonge
   et fait disparaître le cadre. Le site s'efface, la danse reste.

   Quatre couleurs, pas une de plus : le noir de la salle, l'ivoire du texte,
   et les deux teintes du logo — le sarcelle des ailes et du mot « elles »,
   le brun-beige qui les accompagne.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --nuit:#0A0A0C; --nuit-2:#111114; --carte:#161619; --ligne:#26262C;
  --ivoire:#F0EBE5; --ivoire-2:#A5A0A0;
  /* Les couleurs viennent du LOGO : le sarcelle du mot « elles » et des ailes
     (#669496 relevé sur le fichier), et le brun-beige des ailes (#D5C9BB).
     Tous deux éclaircis pour tenir sur le fond nuit — mesurés : sarcelle 8,1:1
     et brun 10:1 sur #0A0A0C, largement au-dessus des 4,5:1 exigés.
     ⚠️ Les noms `--lilas`/`--lilas-fonce` sont CONSERVÉS : ils sont appelés à
     une vingtaine d'endroits dans cette feuille, et les renommer d'un seul
     geste serait une passe aveugle. Ils portent désormais le sarcelle. */
  --bleu:#7FB0B2; --bleu-fonce:#4E7C7E; --brun:#C9B9A6; --brun-fonce:#8A7259;
  --lilas:var(--bleu); --lilas-fonce:var(--bleu-fonce);
  --serif:"Fraunces","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --large:1180px; --rayon:2px;
}

*,*::before,*::after{box-sizing:border-box}
/* ⚠️ Indispensable, et non négociable : `[hidden]` (attribut) et `.nav` (classe)
   ont la MÊME spécificité. Sans cette règle, « .nav{display:flex} » — écrit plus
   bas — annule l'attribut hidden, et le menu mobile reste déplié pour toujours :
   le JavaScript bascule bien l'attribut, mais la CSS l'ignore. */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--nuit);color:var(--ivoire);font-family:var(--sans);
  font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased}
/* ⚠️ `height:auto` est obligatoire dès qu'on déclare width/height sur les <img> :
   sans lui l'attribut hauteur l'emporte, et l'image est étirée à sa hauteur
   d'origine (une galerie de 3 000 px devient une page de 36 000 px). */
img{max-width:100%;display:block;height:auto}
a{color:inherit}

.wrap{max-width:var(--large);margin:0 auto;padding:0 26px}
@media(max-width:640px){.wrap{padding:0 20px}}

/* ── Titres ─────────────────────────────────────────────────────────────── */
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.015em;line-height:1.08;margin:0}
h1{font-size:clamp(2.6rem,6.4vw,4.7rem)}
h2{font-size:clamp(1.9rem,3.9vw,2.9rem)}
h3{font-size:1.32rem;line-height:1.25}
.kicker{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--lilas);margin:0 0 18px;font-weight:500}
.chapo{font-size:clamp(1.05rem,1.9vw,1.24rem);line-height:1.62;color:var(--ivoire-2);max-width:62ch}
p{margin:0 0 1.15em}

/* ── En-tête ────────────────────────────────────────────────────────────── */
header{position:sticky;top:0;z-index:60;background:rgba(10,10,12,.82);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--ligne)}
.barre{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:19px 0}
.logo{font-family:var(--serif);font-size:1.16rem;letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap}
.logo b{font-weight:400;color:var(--lilas)}
/* Le logo fourni par la compagnie, recadré au plus juste (le fichier d'origine
   était blanc aux deux tiers) et éclairci pour tenir sur le fond nuit.
   On fixe la HAUTEUR : la largeur suit le rapport de l'image, donc rien ne se
   déforme, et la barre ne saute pas pendant le chargement (width/height sont
   dans la balise). */
.logo img{display:block;height:42px;width:auto;max-width:56vw}
@media(max-width:640px){.logo img{height:34px}}
.nav{display:flex;align-items:center;gap:27px}
/* ⚠️ `:not(.bouton)` est indispensable : sans lui, « .nav a » est plus
   spécifique que « .bouton » et lui impose padding:4px 0 + une bordure basse.
   Résultat : le texte colle aux bords de la pastille et son bas est rogné. */
.nav a:not(.bouton){text-decoration:none;font-size:.87rem;color:var(--ivoire-2);transition:color .2s;
  padding:4px 0;border-bottom:1px solid transparent}
.nav a:not(.bouton):hover,.nav a:not(.bouton)[aria-current]{color:var(--ivoire);border-bottom-color:var(--lilas)}
.nav .bouton{margin-left:12px}
.bouton{display:inline-block;text-decoration:none;font-size:.87rem;font-weight:500;
  padding:11px 22px;border:1px solid var(--lilas);color:var(--lilas);
  border-radius:99px;transition:.24s;white-space:nowrap}
.bouton:hover{background:var(--lilas);color:var(--nuit)}
.bouton-plein{background:var(--lilas);color:var(--nuit);border-color:var(--lilas)}
.bouton-plein:hover{background:transparent;color:var(--lilas)}
.burger{display:none;background:none;border:0;color:var(--ivoire);font-size:1.5rem;
  cursor:pointer;padding:4px 8px;line-height:1}
@media(max-width:940px){
  .burger{display:block}
  .nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    gap:0;background:var(--nuit-2);border-bottom:1px solid var(--ligne);padding:8px 26px 20px}
  .nav a:not(.bouton){padding:13px 0;border-bottom:1px solid var(--ligne)}
  .nav .bouton{margin:16px 0 4px;text-align:center;display:block}
}

/* ── Ouverture ──────────────────────────────────────────────────────────── */
.hero{position:relative;min-height:min(86vh,760px);display:flex;align-items:flex-end;
  overflow:hidden;border-bottom:1px solid var(--ligne)}
.hero-img{position:absolute;inset:0;background-size:cover;background-position:center 32%}
/* La vidéo se pose PAR-DESSUS la photo, jamais à la place : si elle ne joue
   pas (données mobiles, format refusé, animations désactivées), la photo est
   déjà là et l'ouverture n'est jamais vide. */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  border:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.hero-video{display:none}}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,12,.62) 0%,rgba(10,10,12,.22) 34%,rgba(10,10,12,.94) 100%)}
.hero .wrap{position:relative;z-index:2;padding-top:96px;padding-bottom:60px;width:100%}
.hero h1{max-width:15ch}
.hero .chapo{margin-top:22px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.credit-photo{position:absolute;right:14px;bottom:10px;z-index:3;font-size:.66rem;
  letter-spacing:.08em;color:rgba(240,235,229,.4)}

/* ── Sections ───────────────────────────────────────────────────────────── */
section{padding:88px 0}
section.serre{padding:62px 0}
.sec-tete{max-width:64ch;margin-bottom:48px}
.sec-tete h2 em{font-style:normal;color:var(--brun)}

/* ── Créations ──────────────────────────────────────────────────────────── */
.creations{display:grid;gap:2px;background:var(--ligne)}
.creation{position:relative;display:grid;grid-template-columns:1fr 1fr;background:var(--nuit);
  text-decoration:none;overflow:hidden}
.creation:nth-child(even) .creation-img{order:2}
/* Le cadre s'adapte à CHAQUE photo, il n'y a pas de format unique : leurs
   clichés vont du 1,94 (très large) au 0,67 (portrait). Un cadre fixe coupait
   la moitié de la hauteur des portraits — d'où les corps tronqués.
   Chaque carte porte son --ratio et son --cadrage (point de mise au point). */
.creation-img{position:relative;aspect-ratio:var(--ratio,3/2);min-height:320px;
  background-size:cover;background-position:var(--cadrage,center);
  filter:grayscale(.34) contrast(1.04);transition:filter .55s,transform .8s}
.creation:hover .creation-img{filter:grayscale(0) contrast(1);transform:scale(1.035)}
.creation-txt{padding:52px 46px;display:flex;flex-direction:column;justify-content:center}
.creation-txt .annee{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--lilas);margin-bottom:12px}
.creation-txt h3{font-size:1.75rem;margin-bottom:14px}
.creation-txt p{color:var(--ivoire-2);font-size:.97rem;margin-bottom:22px}
.creation-txt .fleche{font-size:.85rem;color:var(--ivoire);letter-spacing:.04em}
.creation:hover .fleche{color:var(--lilas)}
@media(max-width:860px){
  .creation{grid-template-columns:1fr}
  .creation:nth-child(even) .creation-img{order:0}
  /* Sur mobile la photo occupe toute la largeur : on la laisse respirer
     dans son propre format plutôt que de la recadrer une seconde fois. */
  .creation-img{min-height:0;max-height:76vh}
  .creation-txt{padding:36px 26px}
}

/* ── Bandeau de citation ────────────────────────────────────────────────── */
.citation{background:var(--nuit-2);border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne)}
.citation blockquote{margin:0;max-width:30ch;font-family:var(--serif);
  font-size:clamp(1.5rem,3.3vw,2.3rem);line-height:1.3}
.citation cite{display:block;margin-top:24px;font-style:normal;font-size:.78rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--lilas)}

/* ── Agenda ─────────────────────────────────────────────────────────────── */
.date{display:grid;grid-template-columns:132px 1fr auto;gap:26px;align-items:baseline;
  padding:24px 0;border-bottom:1px solid var(--ligne)}
.date:first-of-type{border-top:1px solid var(--ligne)}
.date .quand{font-family:var(--serif);font-size:1.12rem;color:var(--lilas)}
.date .quoi{font-size:1.06rem}
.date .quoi span{display:block;font-size:.88rem;color:var(--ivoire-2);margin-top:3px}
.date .ou{font-size:.86rem;color:var(--ivoire-2);text-align:right;white-space:nowrap}
@media(max-width:700px){
  .date{grid-template-columns:1fr;gap:5px}
  .date .ou{text-align:left}
}
.vide{border:1px dashed var(--ligne);border-radius:var(--rayon);padding:44px 34px;text-align:center}
.vide p{color:var(--ivoire-2);margin:0 0 20px}

/* ── Grilles génériques ─────────────────────────────────────────────────── */
.grille{display:grid;gap:34px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.carte{background:var(--carte);border:1px solid var(--ligne);border-radius:var(--rayon);padding:34px 30px}
.carte h3{margin-bottom:12px}
.carte p{color:var(--ivoire-2);font-size:.95rem}
.carte p:last-child{margin-bottom:0}

/* ── Portraits ──────────────────────────────────────────────────────────── */
.portrait img{width:100%;aspect-ratio:3/4;object-fit:cover;filter:grayscale(.3);
  transition:filter .5s;border:1px solid var(--ligne)}
.portrait:hover img{filter:grayscale(0)}
.portrait h3{margin:20px 0 4px}
.portrait .role{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--lilas)}
.portrait p{color:var(--ivoire-2);font-size:.93rem;margin-top:14px}

/* ── Galerie ────────────────────────────────────────────────────────────── */
.galerie{columns:3;column-gap:14px}
.galerie img{width:100%;margin-bottom:14px;break-inside:avoid;border:1px solid var(--ligne);
  filter:grayscale(.25);transition:filter .5s,transform .5s}
.galerie img:hover{filter:grayscale(0);transform:scale(1.012)}
@media(max-width:900px){.galerie{columns:2}}
@media(max-width:560px){.galerie{columns:1}}

/* ── Texte long ─────────────────────────────────────────────────────────── */
.prose{max-width:68ch}
.prose h2{margin:56px 0 18px}
.prose h2:first-child{margin-top:0}
.prose h3{margin:38px 0 12px;color:var(--brun);font-family:var(--sans);font-size:.76rem;
  letter-spacing:.2em;text-transform:uppercase;font-weight:600}
.prose p,.prose li{color:var(--ivoire-2)}
.prose li{margin-bottom:9px}
.prose strong{color:var(--ivoire);font-weight:600}
.prose a{color:var(--lilas)}

/* ── Deux colonnes texte + image ────────────────────────────────────────── */
.duo{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.duo img{width:100%;aspect-ratio:4/5;object-fit:cover;border:1px solid var(--ligne)}
@media(max-width:840px){.duo{grid-template-columns:1fr;gap:34px}}

/* ── Appel final ────────────────────────────────────────────────────────── */
.appel{background:var(--nuit-2);border-top:1px solid var(--ligne);text-align:center}
.appel h2{max-width:18ch;margin:0 auto 20px}
.appel .chapo{margin:0 auto 32px}

/* ── Pied ───────────────────────────────────────────────────────────────── */
footer{background:var(--nuit-2);border-top:1px solid var(--ligne);padding:62px 0 30px}
.pied{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:38px}
@media(max-width:780px){.pied{grid-template-columns:1fr;gap:26px}}
footer h4{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--lilas);
  margin:0 0 14px;font-weight:600}
footer a{display:block;color:var(--ivoire-2);text-decoration:none;font-size:.92rem;padding:4px 0}
footer a:hover{color:var(--lilas)}
.pied-desc{color:var(--ivoire-2);font-size:.92rem;max-width:36ch;margin:14px 0 0}
.pied-bas{margin-top:44px;padding-top:22px;border-top:1px solid var(--ligne);display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.82rem;color:var(--ivoire-2)}

/* Crédit créateur du site — `footer a` est en display:block, d'où le reset. */
.pied-bas .credit{display:inline;padding:0;font-size:inherit;color:inherit;text-decoration:none}
.pied-bas .credit strong{font-weight:600;color:inherit}
.pied-bas .credit:hover{color:var(--lilas)}

/* ── Formulaire ─────────────────────────────────────────────────────────── */
label.ch{display:block;font-size:.82rem;font-weight:600;margin:0 0 7px}
input,textarea,select{width:100%;padding:13px 15px;background:var(--nuit);color:var(--ivoire);
  border:1px solid var(--ligne);border-radius:var(--rayon);font:inherit;font-size:.96rem}
input:focus,textarea:focus,select:focus{outline:2px solid var(--lilas);outline-offset:1px;border-color:transparent}
.aide{font-size:.8rem;color:var(--ivoire-2);margin:6px 0 0}
.champ{margin-bottom:22px}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ── Distribution ───────────────────────────────────────────────────────────
   La première chose qu'un programmateur cherche sur une fiche de spectacle. */
.distribution{display:grid;grid-template-columns:minmax(180px,260px) 1fr;
  gap:0 32px;margin:0;max-width:78ch}
.distribution dt{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--lilas);padding:14px 0;border-top:1px solid var(--ligne)}
.distribution dd{margin:0;padding:14px 0;border-top:1px solid var(--ligne);color:var(--ivoire)}
@media(max-width:640px){
  .distribution{grid-template-columns:1fr;gap:0}
  .distribution dt{padding-bottom:2px;border-top:1px solid var(--ligne)}
  .distribution dd{padding-top:0;border-top:0;padding-bottom:16px}
}

/* ── Apparition au défilement ───────────────────────────────────────────────
   ⚠️ La classe .reveal est posée PAR LE JAVASCRIPT, jamais dans le HTML : si
   le script ne s'exécute pas, rien n'est masqué. On ne cache jamais en CSS ce
   qu'on compte révéler en JS — sinon une erreur de script vide la page. */
.reveal{opacity:0;transform:translateY(18px);
  transition:opacity .75s cubic-bezier(.22,.61,.36,1),transform .75s cubic-bezier(.22,.61,.36,1)}
.reveal.vu{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ── Galerie plein écran ────────────────────────────────────────────────── */
.visionneuse{position:fixed;inset:0;z-index:200;background:rgba(6,6,8,.96);
  display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,44px)}
.visionneuse img{max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;border:1px solid var(--ligne);filter:none}
.visionneuse-fermer{position:absolute;top:12px;right:18px;background:none;border:0;
  color:var(--ivoire);font-size:2.6rem;line-height:1;cursor:pointer;padding:4px 12px;transition:color .2s}
.visionneuse-fermer:hover{color:var(--lilas)}
.visionneuse-legende{position:absolute;left:0;right:0;bottom:14px;text-align:center;
  font-size:.76rem;letter-spacing:.08em;color:rgba(240,235,229,.45)}
.galerie img{cursor:zoom-in}