/* ================================================
   CIE CLOUKS — cieclouks.ch
   ================================================ */

:root {
  --ink:      #0E0D0A;
  --ink-2:    #141310;
  --bone:     #F4F0E6;
  --bone-2:   #EAE4D6;
  --rouge:    #C4402F;
  --rouge-l:  #D65742;
  --gris:     #6E6860;

  --on-dark:      rgba(244, 240, 230, .70);
  --on-dark-soft: rgba(244, 240, 230, .42);
  --line-dark:    rgba(244, 240, 230, .16);
  --line-light:   rgba(14, 13, 10, .14);

  --display: 'Bodoni Moda', 'Playfair Display', Georgia, serif;
  --sans:    'Inter', system-ui, -apple-system, sans-serif;

  --wrap:  1240px;
  --pad:   clamp(20px, 4vw, 64px);
  --nav-h: 74px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

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

html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bone);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
/* <picture> ne sert qu'à proposer le WebP : il ne doit rien changer à la mise en page. */
picture { display: contents; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
figure { margin: 0; }

section[id], header[id] { scroll-margin-top: var(--nav-h); }

:focus-visible { outline: 2px solid var(--rouge); outline-offset: 4px; border-radius: 2px; }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--ink); color: var(--bone); padding: 12px 20px; font-size: .85rem;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ================================================
   TYPO
   ================================================ */
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.02; letter-spacing: -.02em; }
h2 { font-size: clamp(2.3rem, 5.4vw, 4.6rem); margin-bottom: 34px; }
h2 em { font-style: italic; font-weight: 400; }

.label {
  display: flex; align-items: center; gap: 14px;
  font-size: .7rem; letter-spacing: .3em; text-transform: uppercase;
  font-weight: 500; color: var(--rouge); margin-bottom: 40px;
}
/* chiffres en sans : le Bodoni italique est illisible à cette taille */
.label .num { font-family: var(--sans); font-size: .7rem; font-weight: 500; letter-spacing: .14em; opacity: .8; }
.label::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .3; }
.label-light { color: var(--rouge-l); }

.sub-label {
  font-size: .68rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--rouge); font-weight: 500; margin-bottom: 12px;
}

/* ================================================
   NAV
   ================================================ */
#navbar {
  position: fixed; inset: 0 0 auto 0; z-index: 200;
  padding: 22px 0;
  transition: background .4s var(--ease), padding .4s var(--ease), box-shadow .4s;
}
#navbar.scrolled, #navbar.is-solid {
  background: rgba(14, 13, 10, .92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding: 12px 0;
  box-shadow: 0 1px 0 var(--line-dark);
}
.nav-inner {
  max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nav-logo { font-family: var(--display); font-size: 1.35rem; font-weight: 700; color: var(--bone); letter-spacing: -.01em; }
.nav-logo span { font-style: italic; font-weight: 400; opacity: .65; margin-right: .1em; }

.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a {
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--on-dark); transition: color .25s; position: relative;
}
.nav-links a:not(.nav-cta)::after {
  content: ""; position: absolute; left: 0; bottom: -5px; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .35s var(--ease);
}
.nav-links a:not(.nav-cta):hover { color: var(--bone); }
.nav-links a:not(.nav-cta):hover::after { transform: scaleX(1); transform-origin: left; }
.nav-links a[aria-current="page"] { color: var(--bone); }
.nav-links a[aria-current="page"]:not(.nav-cta)::after { transform: scaleX(1); background: var(--rouge); }

/* sous-menu Créations */
.has-sub { position: relative; }
.caret {
  display: inline-block; width: 0; height: 0; margin-left: 5px; vertical-align: middle;
  border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor; opacity: .7;
  transition: transform .3s var(--ease);
}
.has-sub:hover .caret, .has-sub:focus-within .caret { transform: rotate(180deg); }

.sub {
  position: absolute; top: calc(100% + 16px); left: -18px;
  min-width: 250px; padding: 7px 0;
  background: rgba(14, 13, 10, .97);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line-dark); border-radius: 3px;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
/* passerelle invisible : le curseur peut traverser le vide sans fermer le menu */
.sub::before { content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 16px; }
.has-sub:hover .sub, .has-sub:focus-within .sub { opacity: 1; visibility: visible; transform: none; }
.sub li { display: block; }
.sub a {
  display: block; padding: 11px 20px;
  font-family: var(--display); font-size: 1rem; font-weight: 700;
  text-transform: none; letter-spacing: -.01em; color: var(--on-dark);
}
.sub a::after { display: none; }
.sub a:hover { color: var(--bone); background: rgba(244,240,230,.06); }

.nav-cta {
  padding: 9px 22px; border: 1px solid var(--line-dark); border-radius: 999px;
  color: var(--bone) !important; transition: background .3s, color .3s, border-color .3s;
}
.nav-cta:hover { background: var(--rouge); border-color: var(--rouge); }

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
.nav-toggle span { display: block; width: 24px; height: 1.5px; background: var(--bone); transition: transform .3s var(--ease), opacity .25s; }

/* ================================================
   HERO
   ================================================ */
#hero {
  position: relative; min-height: 100svh; background: var(--ink);
  overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img {
  width: 100%; height: 110%; object-fit: cover; object-position: center 18%;
  /* Photo en couleur : le nez rouge est la marque de la compagnie, le
     désaturer la faisait disparaître. Reste un léger assombrissement, le
     voile ci-dessous ne suffit pas seul à tenir le titre lisible. */
  filter: brightness(.94); will-change: transform;
}
/* Le second cliché : une bande le long du bord droit, dont le bord gauche se
   dissout dans la photo de fond. Un rectangle net posé au milieu se lisait
   comme une photo collée dans une autre ; le dégradé de masque, lui, fait
   lire les deux comme une seule image, le rideau cuivré prolongeant la
   pénombre de la loge. Le bas n'a pas besoin d'être fondu : le voile y est
   déjà presque opaque.
   La règle `.hero-media img` ci-dessus vise toutes les images du bloc, d'où
   la hauteur et le cadrage rendus ici. L'assombrissement est conservé — les
   deux photos doivent recevoir le même traitement. */
.hero-inset {
  position: absolute; z-index: 2; inset: 0 0 0 auto;
  /* En pourcentage et non en clamp : le dégradé ci-dessous doit devenir
     opaque exactement là où s'arrête la photo de fond, et ce rapport ne
     tient que si les deux largeurs sont proportionnelles à l'écran.
     Bande de 46 % -> commence à 54 % ; fond jusqu'à 68 % ; donc pleine
     opacité à (68-54)/46 = 30 % de la bande. */
  width: 46%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 30%);
  mask-image: linear-gradient(to right, transparent 0%, #000 30%);
}
/* La photo de fond ne couvre plus toute la largeur : la bande prend le
   relais, ce qui divise d'autant son agrandissement — de 1.86x à 1.26x en
   1920, de 2.47x à 1.68x en 2560. C'est la vraie raison d'être du montage :
   clara-loge ne fait que 1035 px de large, il n'existe pas plus grand.
   Sous 880 px la bande disparaît, la photo reprend donc toute la largeur. */
@media (min-width: 881px) {
  #heroImg { width: 68%; }
}
.hero-media .hero-inset img { height: 100%; object-position: center 32%; }
@media (max-width: 880px) { .hero-inset { display: none; } }

.hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  /* le voile est au-dessus du nez : sans ceci il intercepterait le clic */
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(14,13,10,.72) 0%, rgba(14,13,10,.12) 30%, rgba(14,13,10,.55) 62%, rgba(14,13,10,.96) 100%),
    radial-gradient(90% 70% at 50% 35%, rgba(14,13,10,0) 40%, rgba(14,13,10,.6) 100%);
}
.hero-inner {
  position: relative; z-index: 3; max-width: var(--wrap); margin: 0 auto; width: 100%;
  padding: 0 var(--pad) clamp(64px, 9vh, 104px);
  /* Ce bloc couvre toute la largeur au-dessus de la photo et interceptait
     le clic destiné au nez. On le rend transparent au pointeur, et on rend
     la main aux seuls éléments réellement cliquables. */
  pointer-events: none;
}
.hero-inner a, .hero-inner button { pointer-events: auto; }
.hero-title { color: var(--bone); margin-bottom: 34px; }
.hero-cie {
  display: block; font-size: clamp(1rem, 2.2vw, 1.65rem); font-style: italic; font-weight: 400;
  letter-spacing: .42em; text-transform: uppercase; color: var(--on-dark);
  margin-bottom: .35em; margin-left: .2em;
}
.hero-word { display: block; font-size: clamp(3.6rem, 15.5vw, 14rem); line-height: .82; letter-spacing: -.035em; text-shadow: 0 6px 60px rgba(0,0,0,.5); }
.hero-word .ch { display: inline-block; }
.hero-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 34px; flex-wrap: wrap; padding-top: 30px; border-top: 1px solid var(--line-dark); }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-scroll {
  position: absolute; right: var(--pad); bottom: clamp(64px, 9vh, 104px); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-size: .62rem; letter-spacing: .28em; text-transform: uppercase; color: var(--on-dark-soft); transition: color .25s;
}
.hero-scroll:hover { color: var(--bone); }
.hero-scroll-line { width: 1px; height: 56px; background: currentColor; position: relative; overflow: hidden; }
.hero-scroll-line::after { content: ""; position: absolute; inset: 0; background: var(--rouge); animation: scrollLine 2.4s var(--ease) infinite; }
@keyframes scrollLine { 0% { transform: translateY(-100%); } 60% { transform: translateY(100%); } 100% { transform: translateY(100%); } }

.hero-foot, .hero-scroll { opacity: 0; animation: fadeUp .95s var(--ease) forwards; }
.hero-foot { animation-delay: .85s; }
.hero-scroll { animation-delay: 1.05s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.hero-word .ch { opacity: 0; transform: translateY(.42em); animation: chIn .9s var(--ease) forwards; animation-delay: calc(.28s + var(--i) * .055s); }
@keyframes chIn { to { opacity: 1; transform: none; } }
.hero-cie { opacity: 0; animation: fadeUp .9s var(--ease) .2s forwards; }

/* ================================================
   BOUTONS
   ================================================ */
.btn {
  display: inline-block; padding: 15px 34px;
  font-family: var(--sans); font-size: .74rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  border-radius: 999px; cursor: pointer; border: 1px solid transparent;
  transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease);
}
.btn-solid { background: var(--rouge); color: #fff; border-color: var(--rouge); }
.btn-solid:hover { background: var(--rouge-l); border-color: var(--rouge-l); transform: translateY(-3px); }
.btn-ghost { border-color: var(--line-dark); color: var(--bone); }
.btn-ghost:hover { background: rgba(244,240,230,.1); border-color: var(--bone); transform: translateY(-3px); }
.btn-line { border-color: var(--ink); color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--bone); transform: translateY(-3px); }
.btn-line-light { border-color: var(--line-dark); color: var(--bone); }
.btn-line-light:hover { background: rgba(244,240,230,.1); border-color: var(--bone); transform: translateY(-3px); }
.btn-sm { padding: 11px 24px; font-size: .68rem; }
.btn-full { width: 100%; }

/* ================================================
   REVEAL
   ================================================ */
[data-reveal] { opacity: 0; transform: translateY(32px); }
[data-reveal].is-in { opacity: 1; transform: none; transition: opacity .9s var(--ease), transform .9s var(--ease); }

/* ================================================
   COMPAGNIE (+ équipe + comité)
   ================================================ */
#compagnie { background: var(--bone); padding: clamp(80px, 11vw, 150px) 0; }
.statement {
  font-family: var(--display); font-size: clamp(1.45rem, 3.1vw, 2.6rem);
  font-style: italic; font-weight: 400; line-height: 1.32; letter-spacing: -.015em;
  max-width: 24ch; margin-bottom: clamp(56px, 8vw, 96px);
}
.statement em { font-style: normal; font-weight: 700; color: var(--rouge); }

.compagnie-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(36px, 6vw, 86px); align-items: start; }
.compagnie-text p { color: var(--gris); margin-bottom: 18px; max-width: 54ch; }
.compagnie-fig img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: center 28%; border-radius: 2px; }
/* Le logo est tracé en clair, pour fond sombre — cette section est sur fond
   clair, le dessin y serait invisible. D'où ce panneau sombre, plutôt qu'une
   recoloration : un logo ne se retouche pas. */
/* Version d'origine du logo, dessinée au crayon noir : elle se pose
   directement sur le crème de la page, sans fond ni cadre. Le nez rouge est
   conservé, seul le blanc du scan a été rendu transparent. */
.compagnie-fig.is-logo {
  aspect-ratio: 4/5; display: grid; place-items: center;
  padding: clamp(8px, 1.5vw, 20px);
}
.compagnie-fig.is-logo img {
  width: auto; height: auto; max-width: 100%; max-height: 100%;
  aspect-ratio: auto; object-fit: contain;
}

.membre {
  display: grid; grid-template-columns: 330px 1fr; gap: clamp(34px, 6vw, 82px);
  align-items: start; margin-top: clamp(70px, 9vw, 120px);
  padding-top: clamp(50px, 6vw, 80px); border-top: 1px solid var(--line-light);
}
/* Le cadre 3/4 rogne 11 % d'une photo en 2/3 : on cale vers le haut pour
   garder de l'air au-dessus de la tête plutôt que de la couper. */
.membre-photo img { width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: center 20%; border-radius: 2px; }
.membre-bio h2 { margin-bottom: 6px; }
.membre-role { font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--rouge); font-weight: 500; margin-bottom: 28px; }
.membre-bio p:not(.membre-role):not(.sub-label) { color: var(--gris); margin-bottom: 17px; max-width: 62ch; }
.membre-bio strong { color: var(--ink); font-weight: 500; }

.comite { margin-top: 44px; padding-top: 34px; border-top: 1px solid var(--line-light); }
.comite-list { display: flex; flex-wrap: wrap; gap: 12px 40px; }
.comite-list li { display: flex; flex-direction: column; }
.comite-nom { font-family: var(--display); font-size: 1.22rem; font-weight: 700; }
.comite-role { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--rouge); margin-top: 2px; }
/* La liste n'a pas de marge basse : sans cela la notice colle aux noms.
   Couleur et largeur viennent de `.membre-bio p`, ce bloc y est imbriqué. */
.comite-bio { margin-top: 26px; }

/* ================================================
   À L'AFFICHE (accueil)
   ================================================ */
#affiche { background: var(--ink); color: var(--bone); padding: clamp(80px, 11vw, 150px) 0 0; }
.affiche-band {
  position: relative; display: block; min-height: clamp(360px, 52vh, 560px);
  overflow: hidden; margin-top: 10px;
}
.affiche-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; transition: transform 1.1s var(--ease); }
.affiche-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(14,13,10,.92) 0%, rgba(14,13,10,.62) 50%, rgba(14,13,10,.35) 100%); }
.affiche-band:hover img { transform: scale(1.04); }
.affiche-inner {
  position: relative; z-index: 2;
  max-width: var(--wrap); margin: 0 auto; padding: clamp(48px, 7vw, 88px) var(--pad);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  min-height: clamp(360px, 52vh, 560px);
}
.affiche-inner h2 { color: var(--bone); margin-bottom: 14px; }
.affiche-inner p { color: var(--on-dark); margin-bottom: 26px; max-width: 40ch; }
.affiche-cta {
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 500;
  color: var(--bone); border-bottom: 1px solid var(--rouge); padding-bottom: 5px;
}

/* ================================================
   GALERIE
   ================================================ */
#galerie { background: var(--bone-2); padding: clamp(80px, 11vw, 150px) 0; }
.galerie-h2 { margin-bottom: clamp(44px, 6vw, 70px); }
/* Galerie de l'accueil : un album par projet, la couverture est la première
   photo. Le clic ouvre la visionneuse sur les seules photos de l'album. */
.albums {
  max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 22px);
}
.album { overflow: hidden; }
.album-btn {
  position: relative; display: block; width: 100%; padding: 0; border: 0;
  background: none; cursor: pointer; overflow: hidden; border-radius: 2px;
}
.album-btn img { width: 100%; aspect-ratio: 4/5; object-fit: cover; transition: transform 1s var(--ease), filter .5s; }
.album-btn:hover img, .album-btn:focus-visible img { transform: scale(1.045); filter: brightness(.88); }
/* Voile bas : le nom doit rester lisible quelle que soit la photo. */
.album-voile {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(14,13,10,.86) 0%, rgba(14,13,10,.30) 46%, rgba(14,13,10,0) 78%);
}
.album-nom {
  position: absolute; left: clamp(14px, 1.6vw, 22px); right: clamp(14px, 1.6vw, 22px);
  bottom: clamp(12px, 1.4vw, 18px); text-align: left;
  font-family: var(--display); font-size: clamp(1rem, 1.5vw, 1.3rem); font-weight: 700;
  color: var(--bone); line-height: 1.15;
}
.album-n {
  display: block; margin-top: 4px;
  font-family: var(--sans); font-size: .68rem; font-weight: 500;
  letter-spacing: .16em; color: var(--on-dark-soft);
}
.g-btn {
  display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in; position: relative; overflow: hidden; border-radius: 2px;
}
.g-btn img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; transition: transform 1s var(--ease), filter .5s; }
.g-btn:hover img { transform: scale(1.045); filter: brightness(.82); }
.g-zoom {
  position: absolute; inset: 0; display: grid; place-items: center;
  opacity: 0; transition: opacity .35s;
}
.g-zoom::before, .g-zoom::after {
  content: ""; position: absolute; background: var(--bone);
}
.g-zoom::before { width: 26px; height: 1.5px; }
.g-zoom::after { width: 1.5px; height: 26px; }
.g-btn:hover .g-zoom, .g-btn:focus-visible .g-zoom { opacity: 1; }

/* GALERIE D'UN SPECTACLE — sous-catégories (rendu depuis data.js) */
/* `.sous-partie` découpe un bloc en sections — les deux volets du calendrier
   par exemple. Même graphie que les rubriques de galerie, d'où les sélecteurs
   partagés plutôt que des déclarations recopiées. */
.gal-cat + .gal-cat, .sous-partie + .sous-partie { margin-top: 38px; }
.gal-cat-titre, .sous-partie-titre {
  font-family: var(--sans); font-size: .7rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--rouge-l); margin-bottom: 14px;
}
.gal-grid {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.gal-item { overflow: hidden; }
.gal-item .g-btn img { aspect-ratio: 4/3; }
.gal-cat .empty { margin: 0; }

@media (max-width: 600px) {
  .gal-grid { grid-template-columns: repeat(2, 1fr); }
}

/* PRESSE — un article par bloc, vignette cliquable + lien externe */
.pr-item { display: grid; grid-template-columns: 200px 1fr; gap: 22px; align-items: start; }
.pr-item + .pr-item {
  margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--line-dark);
}
/* Article sans visuel : le texte occupe toute la largeur au lieu d'être
   comprimé dans la colonne réservée à la vignette. */
.pr-corps:only-child { grid-column: 1 / -1; }
.pr-vignette { border-radius: 2px; }
.pr-vignette img { aspect-ratio: 4/3; }
.pr-corps .press { margin-bottom: 12px; }
.pr-titre { font-family: var(--display); font-size: 1.12rem; font-weight: 700; color: var(--bone); }
.pr-titre a {
  color: var(--bone); text-decoration: none;
  border-bottom: 1px solid rgba(244, 240, 230, .28);
  transition: color .25s, border-color .25s;
}
.pr-titre a:hover, .pr-titre a:focus-visible { color: var(--rouge-l); border-color: var(--rouge-l); }
.pr-ext { font-size: .78em; margin-left: .4em; }
.pr-source {
  font-family: var(--sans); font-size: .74rem; letter-spacing: .08em;
  color: var(--on-dark-soft); margin-top: 6px;
}

@media (max-width: 700px) {
  .pr-item { grid-template-columns: 1fr; gap: 14px; }
  .pr-vignette img { aspect-ratio: 16/9; }
}

/* LIGHTBOX */
.lightbox {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(8, 7, 5, .96);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(20px, 5vw, 70px);
  opacity: 0; transition: opacity .3s var(--ease);
}
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }
.lb-figure { max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.lb-figure img { max-width: 100%; max-height: 80vh; width: auto; height: auto; object-fit: contain; border-radius: 2px; }
.lb-close {
  position: absolute; top: clamp(14px, 2.5vw, 28px); right: clamp(14px, 2.5vw, 28px);
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(244,240,230,.08); border: 1px solid var(--line-dark);
  color: var(--bone); font-size: 1.7rem; line-height: 1; cursor: pointer;
  transition: background .25s, transform .25s;
}
.lb-close:hover { background: var(--rouge); transform: rotate(90deg); }
.lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(244,240,230,.06); border: 1px solid var(--line-dark);
  color: var(--bone); font-size: 2rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center; transition: background .25s;
}
.lb-nav:hover { background: var(--rouge); }
.lb-prev { left: clamp(10px, 2.5vw, 30px); }
.lb-next { right: clamp(10px, 2.5vw, 30px); }
body.lb-open { overflow: hidden; }

/* ================================================
   CONTACT
   ================================================ */
#contact { background: var(--ink); color: var(--bone); padding: clamp(80px, 11vw, 150px) 0; }
#contact h2 { color: var(--bone); }
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px, 7vw, 96px); align-items: start; }
/* Le même logo qu'en pied de page, mais plus petit : ici il introduit une
   adresse, il ne signe pas la page. Même remarque que pour .footer-logo :
   `width: auto` doit être explicite pour écraser la règle globale sur img. */
.contact-logo { height: clamp(84px, 9vw, 116px); width: auto; margin-bottom: 20px; user-select: none; }
.contact-nom { font-size: clamp(1.9rem, 3.6vw, 2.8rem); margin-bottom: 16px; }
.contact-adresse {
  font-style: normal; color: var(--on-dark);
  font-size: 1rem; line-height: 1.75; margin-bottom: 30px;
}
.contact-email, .contact-tel {
  display: block; width: fit-content;
  font-family: var(--display); font-size: clamp(1.2rem, 2.4vw, 1.75rem); font-style: italic;
  border-bottom: 1px solid var(--line-dark); padding-bottom: 5px; margin-bottom: 18px;
  transition: color .3s, border-color .3s;
}
.contact-tel { margin-bottom: 30px; }
.contact-email:hover, .contact-tel:hover { color: var(--rouge-l); border-color: var(--rouge-l); }

.socials { display: flex; gap: 12px; margin-top: 26px; }
.socials a {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line-dark); color: var(--on-dark);
  transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease);
}
.socials a:hover { background: var(--rouge); border-color: var(--rouge); color: #fff; transform: translateY(-3px); }

.contact-form label { display: block; margin-bottom: 18px; }
.contact-form label span { display: block; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark-soft); margin-bottom: 9px; }
.contact-form input, .contact-form textarea {
  width: 100%; background: rgba(244,240,230,.05); border: 1px solid var(--line-dark);
  color: var(--bone); padding: 15px 17px;
  font-family: var(--sans); font-size: .95rem; font-weight: 300;
  outline: none; border-radius: 3px; transition: border-color .25s, background .25s;
  -webkit-appearance: none; appearance: none; resize: vertical;
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(244,240,230,.25); }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--rouge-l); background: rgba(244,240,230,.08); }
.contact-form .btn { margin-top: 8px; }
/* Piège à robots : hors écran, hors tabulation, hors lecteurs d'écran. */
.contact-form input.botcheck {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; padding: 0; border: 0; opacity: 0;
}
.form-note { font-size: .76rem; color: var(--on-dark-soft); margin-top: 14px; text-align: center; }
.form-note.error { color: #E8896F; }

/* ================================================
   PAGES INTÉRIEURES
   ================================================ */
body.page { background: var(--ink); color: var(--bone); }
.page-head { padding: calc(var(--nav-h) + clamp(56px, 9vw, 110px)) 0 clamp(40px, 6vw, 66px); background: var(--ink); }
.page-title { font-size: clamp(2.6rem, 7vw, 6rem); color: var(--bone); }
.back-link { display: inline-block; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-soft); margin-bottom: 26px; transition: color .25s; }
.back-link:hover { color: var(--bone); }

.page-tail { background: var(--ink); padding: clamp(56px, 8vw, 100px) 0 clamp(70px, 9vw, 120px); text-align: center; border-top: 1px solid var(--line-dark); }
.tail-note { color: var(--on-dark); margin-bottom: 24px; }
.page-tail .btn-line { border-color: var(--line-dark); color: var(--bone); }
.page-tail .btn-line:hover { background: var(--bone); color: var(--ink); }

/* CRÉATIONS — bandes */
.creations { background: var(--ink); }
.creation-band { position: relative; display: block; min-height: clamp(420px, 62vh, 640px); overflow: hidden; border-top: 1px solid var(--line-dark); }
.creation-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transition: transform 1.2s var(--ease); }
.creation-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(14,13,10,.93) 0%, rgba(14,13,10,.6) 55%, rgba(14,13,10,.3) 100%); }
.creation-band:hover img { transform: scale(1.045); }
.creation-inner {
  position: relative; z-index: 2; max-width: var(--wrap); margin: 0 auto;
  padding: clamp(50px, 7vw, 90px) var(--pad);
  min-height: clamp(420px, 62vh, 640px);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
}
.creation-meta { font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: var(--rouge-l); margin-bottom: 16px; }
.creation-inner h2 { color: var(--bone); margin-bottom: 16px; }
.creation-desc { color: var(--on-dark); max-width: 44ch; margin-bottom: 28px; }
.creation-cta { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 500; color: var(--bone); border-bottom: 1px solid var(--rouge); padding-bottom: 5px; }

/* PAGE SPECTACLE */
.show-head { padding: calc(var(--nav-h) + clamp(48px, 8vw, 96px)) 0 clamp(34px, 5vw, 54px); }
.show-meta { font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: var(--rouge-l); margin-bottom: 16px; }
.show-title { font-size: clamp(2.7rem, 8vw, 7rem); color: var(--bone); margin-bottom: 30px; }
.show-title em { color: var(--rouge-l); font-style: italic; font-weight: 400; }
.show-hero { max-width: var(--wrap); margin: 0 auto clamp(50px, 7vw, 90px); padding-inline: var(--pad); }
.show-hero img { width: 100%; max-height: 74vh; object-fit: cover; object-position: center 20%; border-radius: 2px; }
/* Une affiche ne se recadre pas : on la montre entière, sinon le texte saute. */
.show-hero.is-affiche img { object-fit: contain; max-height: 66vh; }

/* Logos de soutien. Ils arrivent avec un fond blanc « cuit » dans l'image :
   impossible à détourer, leur texte est noir et disparaîtrait sur le fond
   sombre de la page. On les pose donc sur une pastille claire — ce que
   demande de toute façon la charte d'un logo officiel, qui ne doit être ni
   inversé ni recoloré. `width: auto` est explicite pour écraser la règle
   globale sur img. */
.soutiens { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.soutien {
  display: block; background: var(--bone); border-radius: 3px;
  padding: 13px 17px; transition: transform .3s var(--ease);
}
.soutien:hover { transform: translateY(-2px); }
.soutien img { height: clamp(38px, 4.6vw, 50px); width: auto; }

.show-block { padding: clamp(34px, 4.4vw, 54px) 0; border-top: 1px solid var(--line-dark); }
.show-block-last { border-bottom: 1px solid var(--line-dark); }
.block-grid { display: grid; grid-template-columns: 210px 1fr; gap: clamp(20px, 4vw, 60px); align-items: start; }
.block-label {
  font-family: var(--display); font-size: 1.35rem; font-weight: 700;
  color: var(--bone); letter-spacing: -.01em;
}
.block-body p { color: var(--on-dark); margin-bottom: 16px; max-width: 68ch; }
.block-body strong { color: var(--bone); font-weight: 500; }
.block-lede { font-family: var(--display); font-size: clamp(1.08rem, 1.8vw, 1.4rem); font-style: italic; line-height: 1.5; color: rgba(244,240,230,.9) !important; }
.block-more { font-size: .9rem; }
.block-more a { color: var(--rouge-l); border-bottom: 1px solid currentColor; }

/* Un lien au fil du texte doit se voir : la règle globale `a { color: inherit }`
   le rend sinon indistinguable de la prose, sur la fiche comme sur l'accueil.
   Le soulignement discret reprend l'idiome de `.year-dates a` et `.date-show a`,
   et `currentColor` le fait suivre la couleur du texte, claire ou sombre. */
.block-body p a, .membre-bio p a, .compagnie-text p a {
  border-bottom: 1px solid currentColor; transition: color .25s, border-color .25s;
}
.block-body p a:hover { color: var(--rouge-l); }
.membre-bio p a:hover, .compagnie-text p a:hover { color: var(--rouge); }
.empty { color: var(--on-dark-soft) !important; font-style: italic; }

.specs { margin: 28px 0 32px; border-top: 1px solid var(--line-dark); }
.specs li {
  display: grid; grid-template-columns: 210px 1fr; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--line-dark);
  color: var(--on-dark); font-size: .93rem;
}
.specs li span { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-soft); align-self: center; }

.doc-buttons { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }

.credits { border-top: 1px solid var(--line-dark); }
.credits li {
  display: grid; grid-template-columns: 210px 1fr; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--line-dark); color: var(--bone); font-size: .95rem;
}
.credits li span { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-soft); align-self: center; }

.press { margin-bottom: 26px; padding-left: 20px; border-left: 2px solid var(--rouge); }
.press p { font-family: var(--display); font-style: italic; font-size: 1.15rem; color: rgba(244,240,230,.9); margin-bottom: 8px; }
.press cite { font-style: normal; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-soft); }

.year-row { display: grid; grid-template-columns: 90px 1fr; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line-dark); }
.year { font-family: var(--display); font-size: 1.5rem; font-weight: 700; color: var(--rouge-l); }
.year-dates li { color: var(--on-dark); margin-bottom: 6px; font-size: .94rem; }
.year-dates a { color: var(--bone); border-bottom: 1px solid var(--line-dark); }

/* VIDÉO (façade YouTube) */
.video { position: relative; aspect-ratio: 16/9; background: var(--ink-2); border: 1px solid var(--line-dark); border-radius: 3px; overflow: hidden; display: grid; place-items: center; }
/* sans vidéo, pas de grand cadre vide */
.video:has(.video-empty) { aspect-ratio: auto; min-height: 0; background: none; border: 0; place-items: start; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-play {
  position: relative; z-index: 2; width: 78px; height: 78px; border-radius: 50%;
  background: var(--rouge); border: 0; cursor: pointer; display: grid; place-items: center;
  transition: transform .3s var(--ease), background .3s;
}
.video-play::before { content: ""; border-left: 20px solid #fff; border-top: 12px solid transparent; border-bottom: 12px solid transparent; margin-left: 5px; }
.video-play:hover { transform: scale(1.08); background: var(--rouge-l); }
.video-empty { color: var(--on-dark-soft); font-size: .85rem; font-style: italic; text-align: center; padding: 20px; }

/* PAGE À VENIR */
.dates-section { padding: 0 0 clamp(80px, 11vw, 140px); }
.date-row {
  display: grid; grid-template-columns: 130px 1fr auto; gap: clamp(18px, 3vw, 40px);
  align-items: center; padding: 28px 0; border-bottom: 1px solid var(--line-dark);
}
.date-row:first-of-type { border-top: 1px solid var(--line-dark); }
.date-day { display: block; font-family: var(--display); font-size: 2.6rem; font-weight: 700; color: var(--rouge-l); line-height: 1; }
.date-mon { display: block; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-soft); margin-top: 5px; }
.date-show { font-family: var(--display); font-size: 1.45rem; font-weight: 700; color: var(--bone); margin-bottom: 4px; }
.date-place { font-size: .92rem; color: var(--on-dark); }
/* La forme jouée ce soir-là : une ligne à part, plus discrète que le lieu,
   pour qu'un programmateur voie d'un coup d'œil s'il s'agit du numéro court
   ou du spectacle entier. */
.date-note { font-size: .82rem; font-style: italic; color: var(--on-dark-soft); margin-top: 3px; }
.date-row .btn-line { border-color: var(--line-dark); color: var(--bone); }
.date-row .btn-line:hover { background: var(--bone); color: var(--ink); }

.dates-empty { border-top: 1px solid var(--line-dark); padding-top: clamp(40px, 6vw, 70px); max-width: 62ch; }
.dates-empty-title { font-family: var(--display); font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 700; color: var(--bone); margin-bottom: 14px; }
.dates-empty-text { color: var(--on-dark); margin-bottom: 30px; }
.dates-empty-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.dates-empty-actions .btn-line { border-color: var(--line-dark); color: var(--bone); }
.dates-empty-actions .btn-line:hover { background: var(--bone); color: var(--ink); }

/* ================================================
   FOOTER
   ================================================ */
footer { background: var(--ink); color: var(--bone); padding: 0 0 40px; border-top: 1px solid var(--line-dark); }
/* Le logo dessiné à la main, en clair sur le fond sombre : le crayon devient
   craie. En dessous d'une centaine de pixels « CLOUKS » devient illisible,
   d'où ce plancher. La règle globale `img { height: auto }` est ici écrasée
   par la spécificité de la classe, donc `width: auto` doit être explicite. */
.footer-logo {
  height: clamp(110px, 15vw, 180px); width: auto;
  margin: 40px 0 30px; user-select: none;
}
.footer-row { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding-bottom: 26px; border-bottom: 1px solid var(--line-dark); margin-bottom: 22px; }
.footer-nav { display: flex; gap: 26px; flex-wrap: wrap; }
.footer-nav a { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-soft); transition: color .25s; }
.footer-nav a:hover { color: var(--bone); }
.footer-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.footer-mail { font-family: var(--display); font-style: italic; font-size: 1.05rem; color: var(--on-dark); transition: color .25s; }
.footer-mail:hover { color: var(--rouge-l); }
.footer-legal { font-size: .72rem; color: rgba(244,240,230,.28); }

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 1000px) {
  .compagnie-grid, .contact-grid { grid-template-columns: 1fr; }
  .membre { grid-template-columns: 1fr; }
  .membre-photo { max-width: 340px; }

  .block-grid { grid-template-columns: 1fr; gap: 16px; }
  .block-label { color: var(--rouge-l); font-size: .72rem; letter-spacing: .28em; text-transform: uppercase; font-family: var(--sans); font-weight: 500; }
  .specs li, .credits li { grid-template-columns: 1fr; gap: 3px; padding: 14px 0; }
  .year-row { grid-template-columns: 1fr; gap: 8px; }


  .albums { grid-template-columns: repeat(2, 1fr); }

  .hero-scroll { display: none; }

  .date-row { grid-template-columns: 1fr; gap: 14px; }
  .footer-right { align-items: flex-start; }

  .nav-links {
    display: none; position: fixed; inset: 0; flex-direction: column; justify-content: center; gap: 6px;
    background: var(--ink); padding: 90px var(--pad) 40px; z-index: 199;
  }
  .nav-links.open { display: flex; overflow-y: auto; }
  /* backdrop-filter sur #navbar crée un bloc conteneur pour les enfants
     en position fixed : le menu plein écran se retrouvait limité à la
     hauteur de la barre. On le retire tant que le menu est ouvert. */
  body.nav-open #navbar {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: transparent; box-shadow: none;
  }
  .nav-links.open a { font-family: var(--display); font-size: 1.9rem; text-transform: none; letter-spacing: -.01em; color: var(--bone); padding: 10px 0; }

  /* pas de survol au doigt : le sous-menu est déplié en permanence */
  .caret { display: none; }
  .sub {
    position: static; opacity: 1; visibility: visible; transform: none;
    background: none; border: 0; box-shadow: none; backdrop-filter: none;
    min-width: 0; padding: 0 0 6px; margin-top: -2px; text-align: center;
  }
  .sub::before { display: none; }
  .nav-links.open .sub a { font-size: 1.15rem; color: var(--on-dark); padding: 7px 0; }
  .nav-links.open .sub a:hover { background: none; color: var(--bone); }
  .nav-links.open a::after { display: none; }
  .nav-links.open .nav-cta { border: none; padding: 10px 0; color: var(--rouge-l) !important; border-radius: 0; }
  .nav-links.open .nav-cta:hover { background: none; }
  .nav-toggle { display: flex; z-index: 201; }
  body.nav-open { overflow: hidden; }
  body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
}

@media (max-width: 560px) {
  .hero-foot { flex-direction: column; align-items: stretch; }
  .hero-actions { width: 100%; }
  .hero-actions .btn { flex: 1; text-align: center; }
  .footer-row { flex-direction: column; align-items: flex-start; }
  .lb-nav { width: 42px; height: 42px; font-size: 1.5rem; }
  .doc-buttons .btn { flex: 1; text-align: center; }
}

/* ================================================
   MOUVEMENT RÉDUIT
   ================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-reveal], .hero-foot, .hero-scroll, .hero-cie { opacity: 1; transform: none; }
  .hero-word .ch { opacity: 1; transform: none; }
}

@media print {
  #navbar, .hero-scroll, .contact-form, .skip-link, .lightbox { display: none; }
  body { background: #fff; color: #000; }
}

/* rubrique active (page fille d'une section) */
.nav-links a.is-section { color: var(--bone); }
.nav-links a.is-section::after { transform: scaleX(1); background: var(--rouge); }
.sub a[aria-current="page"] { color: var(--bone); background: rgba(196,64,47,.14); }

/* ================================================
   BLOC « PHOTO À VENIR »
   ================================================ */
[hidden] { display: none !important; }

.photo-todo {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, #232119 0 16px, #262419 16px 32px);
  display: grid; place-items: center;
}
/* sur une bande, le texte du spectacle est à gauche : la mention va à droite */
.creation-band .photo-todo,
.affiche-band .photo-todo { place-items: end end; padding: 0 5% 7% 0; }
.photo-todo span {
  font-size: .68rem; letter-spacing: .28em; text-transform: uppercase;
  color: rgba(244,240,230,.42);
}
.photo-todo-hero {
  position: static; aspect-ratio: 16/7; border-radius: 2px;
  border: 1px solid var(--line-dark);
}
.creation-band.no-photo::after,
.affiche-band.no-photo::after {
  background: linear-gradient(to right, rgba(14,13,10,.9) 0%, rgba(14,13,10,.55) 62%, rgba(14,13,10,.3) 100%);
}

/* ================================================
   À L'AFFICHE
   ================================================ */
.affiche-date {
  font-size: .7rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--rouge-l); margin-bottom: 14px;
}
.affiche-lieu { color: var(--on-dark); margin-bottom: 26px; max-width: 40ch; }

/* ================================================
   AGENDA
   ================================================ */
.agenda-h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.5rem); color: var(--bone);
  margin: 0 0 28px;
}
.agenda-h2-past {
  margin-top: clamp(56px, 7vw, 96px);
  padding-top: clamp(30px, 4vw, 52px);
  border-top: 1px solid var(--line-dark);
}
.date-row.is-past { opacity: .72; }
.date-row.is-past .date-day { color: var(--on-dark-soft); }
.date-show a { border-bottom: 1px solid var(--line-dark); transition: color .25s, border-color .25s; }
.date-show a:hover { color: var(--rouge-l); border-color: var(--rouge-l); }

/* ================================================
   LE NEZ + FEU D'ARTIFICE
   ================================================ */
.nose {
  position: absolute; z-index: 4;
  width: clamp(34px, 4.2vw, 56px); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 0; background: transparent; border-radius: 50%;
  cursor: pointer; padding: 0; visibility: hidden;
  -webkit-tap-highlight-color: transparent;
}
.nose::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 1.5px rgba(196,64,47,0);
  transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}
.nose::before {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 1px solid rgba(196,64,47,.5);
  opacity: 0; animation: nezPulse 3.4s ease-out infinite;
}
@keyframes nezPulse {
  0%   { transform: scale(.72); opacity: 0; }
  35%  { opacity: .55; }
  70%  { transform: scale(1.25); opacity: 0; }
  100% { opacity: 0; }
}
.nose:hover::after {
  box-shadow: 0 0 0 2px rgba(196,64,47,.85), 0 0 30px 8px rgba(196,64,47,.3);
  transform: scale(1.1);
}
.nose:focus-visible::after { box-shadow: 0 0 0 2px var(--rouge), 0 0 30px 8px rgba(196,64,47,.35); }
.nose.pop::after { animation: nezPop .4s var(--ease); }
@keyframes nezPop { 0% { transform: scale(1); } 42% { transform: scale(1.45); } 100% { transform: scale(1); } }

#fx {
  position: fixed; inset: 0; z-index: 150;
  pointer-events: none; opacity: 0;
  transition: opacity .25s;
}
#fx.is-on { opacity: 1; }


@media (prefers-reduced-motion: reduce) {
  .nose::before { animation: none; }
}