@property --r { syntax: '<length>'; inherits: true; initial-value: -20px; } /* négatif : aucun trou de givre au repos */

:root {
  --noir: #000000;
  --papier: #F2F2F0;
  --rouge: #E73039;      /* rouge du logo : le seul rouge de la charte */
  --rouge-logo: #E73039; /* rouge exact du logo, 4,9:1 sur noir */
  --anneau: 4px;        /* contour des gélules : 8 / 120 de la hauteur, comme le logo */
  --beton: rgba(242, 242, 240, .6); /* texte secondaire : blanc cassé transparent, jamais de gris en aplat */

  --trait: 2px;
  --marge: clamp(1rem, 4vw, 3.5rem);
  --police: "Jost", "Futura PT", "Futura", "Century Gothic", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.2 -.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --ressort: cubic-bezier(.16, 1, .3, 1);
  /* Grain argentique : bruit de luminance, neutre en couleur (ne grise pas les aplats) */
  --grain-film: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.9' intercept='-.45'/%3E%3CfeFuncG type='linear' slope='1.9' intercept='-.45'/%3E%3CfeFuncB type='linear' slope='1.9' intercept='-.45'/%3E%3CfeFuncA type='table' tableValues='1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");

  /* Vitesse de défilement, mise à jour en JS : pilote les échos des titres */
  --v: 0;

  --fond: var(--noir);
  --encre: var(--papier);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  background: var(--noir);
  color: var(--papier);
  font-family: var(--police);
  font-size: 1.125rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
/* Les images déclarent leur taille (la page ne saute pas au chargement) ; la hauteur suit la largeur */
img { height: auto; }
::selection { background: var(--rouge); color: var(--papier); }

.ctx-noir   { --fond: var(--noir);   --encre: var(--papier); --accent: var(--rouge); --survol-fond: var(--papier); --survol-texte: var(--noir);   --filet: rgba(242, 242, 240, .22); --echo: rgb(231, 48, 57);   background: var(--fond); color: var(--encre); }
.ctx-papier { --fond: var(--papier); --encre: var(--noir);   --accent: var(--rouge); --survol-fond: var(--noir);   --survol-texte: var(--papier); --filet: rgba(0, 0, 0, .18);       --echo: rgb(231, 48, 57);   background: var(--fond); color: var(--encre); }
.ctx-eau    { --fond: var(--noir);   --encre: var(--papier); --accent: var(--rouge); --survol-fond: var(--papier); --survol-texte: var(--noir);   --filet: rgba(242, 242, 240, .22); --echo: rgb(231, 48, 57);   background: linear-gradient(180deg, #000 calc(100% - 300px), #74181C 100%); color: var(--encre); }
.ctx-rouge  { --fond: var(--rouge);  --encre: var(--noir);   --accent: var(--noir);  --survol-fond: var(--papier); --survol-texte: var(--noir);   --filet: rgba(0, 0, 0, .25);       --echo: rgb(242, 242, 240); background: var(--fond); color: var(--encre); }

/* Textures : grain argentique, trame d'écran et grille de construction */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: 100;
  pointer-events: none;
  opacity: .38;
  background-image: var(--grain-film);
  mix-blend-mode: overlay; /* neutre en moyenne : le rouge reste #E73039, le blanc reste blanc */
  animation: grain .6s steps(6) infinite;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 99;
  pointer-events: none;
  mix-blend-mode: difference;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px calc(100% / 6));
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -4%); }
  60% { transform: translate(-4%, -1%); }
  80% { transform: translate(3%, 3%); }
  100% { transform: translate(0, 0); }
}

.evitement { position: absolute; left: var(--marge); top: -5rem; z-index: 400; }
.evitement:focus { top: 1rem; }
:focus-visible { outline: var(--trait) solid var(--accent, var(--rouge)); outline-offset: 4px; }
.ctx-rouge :focus-visible { outline-color: var(--papier); }

/* ---------- Ouverture : le disque qui roule (animée par ouverture.js) ---------- */
.ouverture {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.ouverture__fond { position: absolute; inset: 0; background: var(--noir); }
.ouverture__logo {
  position: relative;
  width: clamp(13rem, 56vw, 26rem);
  aspect-ratio: 1648 / 919;
  transform-origin: 0 0;
  visibility: hidden; /* le script le montre à sa première image, disque déjà hors de l'écran */
}
.ouverture--joue .ouverture__logo { visibility: visible; will-change: transform; }
.ouverture__logo svg { display: block; width: 100%; height: 100%; overflow: visible; fill: var(--rouge-logo); }
.ouverture__echo { opacity: 0; }
.ouverture__fil { fill: none; stroke: var(--rouge-logo); stroke-width: 51; stroke-linecap: round; }
html:not(.js) .ouverture, .arrivee-ancre .ouverture, .ouverture-vue .ouverture, .ouverture[hidden] { display: none; }
/* Pendant l'ouverture : le logo de l'en-tête attend que le grand logo vienne s'y poser, la page ne défile pas */
.ouverture-en-cours .entete .logo-marque { visibility: hidden; }
html.ouverture-en-cours { overflow: hidden; }

/* ---------- Logo officiel : le PNG sert de pochoir, la couleur vient du CSS ---------- */
.logo-marque {
  display: block;
  aspect-ratio: 1648 / 919;
  background: currentColor;
  -webkit-mask: url("images/logo-lfr.png") center / contain no-repeat;
  mask: url("images/logo-lfr.png") center / contain no-repeat;
}

/* ---------- Curseur : triangle noir cerclé du rouge du logo, suivi de ses échos ---------- */
.curseur { display: none; }
.curseur-actif, .curseur-actif a, .curseur-actif button, .curseur-actif label { cursor: none; }
.curseur-actif .curseur { display: block; }
.curseur span {
  position: fixed;
  left: 0; top: 0;
  z-index: 250;
  width: 24px;
  height: 24px;
  margin: -3px 0 0 -3px; /* la pointe du triangle est le point cliqué */
  pointer-events: none;
  will-change: transform;
  transition: opacity .2s;
}
.curseur svg { display: block; width: 100%; height: 100%; overflow: visible; }
.curseur path { fill: var(--noir); stroke: var(--rouge-logo); stroke-width: 2.5; stroke-linejoin: miter; }
.curseur .curseur__echo:nth-child(3) { opacity: .5; }
.curseur .curseur__echo:nth-child(2) { opacity: .28; }
.curseur .curseur__echo:nth-child(1) { opacity: .12; }
.curseur.cache span { opacity: 0 !important; }

/* ---------- Typographie ---------- */
.titre-geant, .titre, .sous-titre {
  font-weight: 900;
  text-transform: uppercase;
  margin: 0;
  letter-spacing: -.02em;
}
.titre { font-size: clamp(2.75rem, 9vw, 8rem); line-height: .86; }
/* Les titres laissent des échos quand on défile vite */
.titre, .manifeste__mot {
  text-shadow:
    calc(var(--v) * .6px) 0 calc(var(--v) * .08px) color-mix(in srgb, var(--echo) 85%, transparent),
    calc(var(--v) * 1.2px) 0 calc(var(--v) * .16px) color-mix(in srgb, var(--echo) 50%, transparent),
    calc(var(--v) * 1.8px) 0 calc(var(--v) * .24px) color-mix(in srgb, var(--echo) 25%, transparent);
}
.sous-titre { font-size: clamp(1.5rem, 3.2vw, 2.5rem); line-height: .95; }
.texte { max-width: 60ch; margin: 0; }
.texte + .texte { margin-top: 1em; }
.texte-fort { font-weight: 700; }
.photo { filter: grayscale(1) contrast(1.25) brightness(.92); object-fit: cover; }

/* ---------- Boutons : gélule noire, anneau du logo ; au survol le verre givre depuis le curseur (G2) ---------- */
.bouton {
  --teinte: rgba(8, 8, 8, .38);   /* teinte du verre, selon le fond de la section */
  --mx: 50%;                      /* point d'entrée de la souris, mis à jour en JS */
  --my: 50%;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.6rem;
  padding: calc(1rem - var(--anneau)) calc(2.2rem - var(--anneau));
  border: var(--anneau) solid var(--rouge-logo);
  border-radius: 999px;
  background: transparent;
  color: var(--rouge-logo);
  font: 900 1.05rem/1 var(--police);
  text-transform: uppercase;
  letter-spacing: .02em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: --r .9s var(--ressort), color .5s, text-shadow .7s var(--ressort), transform .6s var(--ressort);
}
/* Le verre : toujours présent sous le noir, avec la lueur qui suit la souris */
.bouton::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .2), rgba(231, 48, 57, .14) 30%, transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 55%),
    var(--teinte);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .28), inset 0 -12px 20px -14px rgba(231, 48, 57, .7);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
}
/* Le noir opaque : un trou de givre s'y ouvre depuis le point d'entrée de la souris */
.bouton::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--noir);
  -webkit-mask-image: radial-gradient(circle at var(--mx) var(--my), transparent var(--r), #000 calc(var(--r) + 18px));
  mask-image: radial-gradient(circle at var(--mx) var(--my), transparent var(--r), #000 calc(var(--r) + 18px));
}
@media (hover: hover) {
  .bouton:hover {
    --r: 340px;
    color: var(--papier);
    /* Grossit un peu (G4), sans pousser les boutons voisins */
    transform: scale(1.06);
    text-shadow: .25em 0 .08em rgba(231, 48, 57, .45), .5em 0 .14em rgba(231, 48, 57, .18);
  }
}
.bouton:active { transform: scale(.97); transition-duration: .12s; }
.ctx-papier .bouton { --teinte: rgba(0, 0, 0, .9); }
.ctx-rouge .bouton { --teinte: rgba(0, 0, 0, .6); }
.benevoles .bouton { --teinte: rgba(8, 8, 8, .38); }
.boutons { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ---------- En-tête ---------- */
.entete {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4.5rem;
  padding: 0 var(--marge);
  background: rgba(0, 0, 0, .42);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid rgba(242, 242, 240, .18);
  box-shadow: inset 0 1px 0 rgba(242, 242, 240, .16), 0 18px 40px -30px rgba(0, 0, 0, .9);
  transition: transform .6s var(--ressort), background-color .4s;
}
.entete.masquee { transform: translateY(-100%); }
.logo { display: flex; align-items: center; gap: .75rem; color: var(--rouge); text-decoration: none; }
.logo .logo-marque { width: 3.4rem; }
.logo__nom { font-weight: 900; font-size: 1.35rem; text-transform: uppercase; letter-spacing: -.01em; color: var(--papier); }
.nav ul { display: flex; gap: clamp(1.25rem, 2.4vw, 2.25rem); list-style: none; margin: 0; padding: 0; }
.nav a {
  position: relative;
  display: inline-block;
  font: 500 .8rem/1 var(--mono);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: .4rem 0;
  transition: transform .45s cubic-bezier(.2, .9, .3, 1);
}
.nav a::before {
  content: "";
  position: absolute;
  left: -.9em;
  top: 50%;
  width: .45em;
  height: .45em;
  margin-top: -.225em;
  border-radius: 50%;
  background: var(--rouge);
  transform: scale(0);
  transition: transform .45s cubic-bezier(.2, .9, .3, 1.4);
}
.nav a[aria-current="page"]::before { transform: scale(1); }
@media (hover: hover) {
  .nav a:hover { transform: translateX(.35em); }
  .nav a:hover::before { transform: scale(1); }
}
.bouton-menu { display: none; }

/* 6 entrées de menu : en dessous de 1000 px elles ne tiennent plus sur une ligne, on passe au bouton Menu */
@media (max-width: 1000px) {
  .bouton-menu {
    display: inline-flex;
    min-height: 2.75rem;
    padding: .5rem 1.2rem .5rem 1rem;
    --encre: var(--papier); --fond: var(--noir); --accent: var(--rouge);
    --survol-fond: var(--papier); --survol-texte: var(--noir);
  }
  .nav {
    position: fixed;
    /* L'en-tête a un backdrop-filter : il devient le bloc conteneur du menu fixe, d'où la hauteur explicite */
    inset: 4.5rem 0 auto 0;
    height: calc(100svh - 4.5rem);
    background: rgba(0, 0, 0, .72);
    -webkit-backdrop-filter: blur(26px) saturate(150%);
    backdrop-filter: blur(26px) saturate(150%);
    padding: 2rem var(--marge) 2rem calc(var(--marge) + 1rem);
    visibility: hidden;
    clip-path: circle(0 at calc(100% - 3rem) 0);
    transition: clip-path .7s cubic-bezier(.65, 0, .25, 1), visibility 0s .7s;
  }
  .nav ul { flex-direction: column; gap: .25rem; }
  .nav a {
    font-family: var(--police);
    font-weight: 900;
    font-size: clamp(2.4rem, 11vw, 4.5rem);
    line-height: 1;
    letter-spacing: -.02em;
    opacity: 0;
    filter: blur(14px);
    transform: translateX(3rem);
    transition: opacity .6s, filter .6s, transform .6s cubic-bezier(.2, .8, .2, 1);
  }
  .menu-ouvert .nav { visibility: visible; clip-path: circle(150% at calc(100% - 3rem) 0); transition: clip-path .8s cubic-bezier(.65, 0, .25, 1); }
  .menu-ouvert .nav a { opacity: 1; filter: blur(0); transform: none; }
  .menu-ouvert .nav li:nth-child(1) a { transition-delay: .15s; }
  .menu-ouvert .nav li:nth-child(2) a { transition-delay: .2s; }
  .menu-ouvert .nav li:nth-child(3) a { transition-delay: .25s; }
  .menu-ouvert .nav li:nth-child(4) a { transition-delay: .3s; }
  .menu-ouvert .nav li:nth-child(5) a { transition-delay: .35s; }
  .menu-ouvert .nav li:nth-child(6) a { transition-delay: .4s; }
  .logo__nom { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-content: end;
  padding: 7rem var(--marge) clamp(2.5rem, 6vw, 5rem);
  overflow: hidden;
}
.hero__fond, .hero__fond img, .hero__fond canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__fond img { opacity: .5; }
.hero__fond .hero__trainee { filter: grayscale(1) contrast(1.4) url(#flou-horizontal-fixe); opacity: .35; mix-blend-mode: screen; transform: scaleX(1.08); }
.hero__fond canvas { opacity: 0; transition: opacity .6s; }
.hero__fond.webgl canvas { opacity: 1; }
.hero__fond.webgl img { display: none; }
.hero__fond::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, var(--noir) 4%, rgba(0,0,0,0) 45%), linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,0) 30%); }
/* Repères techniques du hero */
.hud {
  position: absolute;
  inset: 5.75rem var(--marge) auto;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 2.5rem;
  padding: .7rem 1.1rem;
  background: rgba(0, 0, 0, .3);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(242, 242, 240, .16);
  box-shadow: inset 0 1px 0 rgba(242, 242, 240, .2), inset 0 -1px 0 rgba(0, 0, 0, .35), 0 20px 40px -32px rgba(0, 0, 0, .9);
  font: 500 .75rem/1.2 var(--mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(242, 242, 240, .7);
  pointer-events: none;
}
.hud__lien {
  pointer-events: auto;
  color: var(--papier);
  text-decoration: underline dotted rgba(231, 48, 57, .9);
  text-decoration-thickness: 1.5px;
  text-underline-offset: .35em;
  transition: color .3s, text-shadow .6s var(--ressort);
}
.hud__lien:hover { color: var(--rouge); text-shadow: .5em 0 .1em rgba(231, 48, 57, .35); }
.hud .tc { margin-left: auto; color: var(--papier); font-variant-numeric: tabular-nums; }
.hud .tc::before { content: ""; display: inline-block; width: .55em; height: .55em; margin-right: .6em; border-radius: 50%; background: var(--rouge); animation: clignote 1s steps(1) infinite; }
@keyframes clignote { 50% { opacity: .15; } }

.titre-geant {
  --e: 0px;
  --f: 0px;
  position: relative;
  /* Assez gros pour frapper, assez petit pour laisser voir la photo, quelle que soit la forme de l'écran */
  font-size: clamp(3rem, min(15vw, 22svh), 13rem);
  line-height: .8;
  letter-spacing: -.035em;
  margin-left: -.04em;
  color: var(--papier);
  pointer-events: none;
  text-shadow:
    var(--e) 0 var(--f) rgba(231, 48, 57, .95),
    calc(var(--e) * 2) 0 calc(var(--f) * 1.5) rgba(231, 48, 57, .6),
    calc(var(--e) * 3) 0 calc(var(--f) * 2) rgba(231, 48, 57, .32);
}
.titre-geant .ligne { display: block; will-change: transform; }
.js .titre-geant .ligne { transform: translateX(110vw); }
/* Ligne descriptive dans le titre principal (pour Google : le titre dit « rap » et « Nantes ») */
.titre-geant__sous { display: block; margin: .9rem 0 0 .06em; font: 500 clamp(.68rem, 1.1vw, .82rem)/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(242, 242, 240, .8); text-shadow: none; }
.hero__pied {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.hero__pied .texte { font-size: clamp(1.1rem, 1.6vw, 1.35rem); font-weight: 500; max-width: 34ch; }

/* ---------- Sections : aplats, dégradés, textures ---------- */
.section { padding: clamp(3rem, 7vw, 6rem) var(--marge) clamp(4rem, 10vw, 9rem); position: relative; scroll-margin-top: 4.5rem; overflow: clip; isolation: isolate; }
.section > * { position: relative; }

/* Braise : un halo rouge très flou qui dérive derrière les sections noires */
.section.ctx-noir::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -20vw;
  top: -10vw;
  width: 70vw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(231, 48, 57, .42), rgba(231, 48, 57, .12) 40%, transparent 70%);
  filter: blur(40px);
  animation: derive 22s ease-in-out infinite alternate;
  pointer-events: none;
}
.section.ctx-noir:nth-of-type(odd)::before { right: auto; left: -25vw; top: 20%; animation-duration: 28s; }
@keyframes derive {
  to { transform: translate(-12vw, 18vw) scale(1.25); }
}
/* Papier : béton, grain appuyé et léger dégradé */
.section.ctx-papier { background: var(--papier); }
/* Rouge : dégradé profond et grain */
.section.ctx-rouge { background: var(--rouge); }
/* Sans fumée (pas de WebGL), la section rouge termine le dégradé commencé en bas du manifeste */
.fumee-zone:not(.fumee-active) > .section.ctx-rouge { background: linear-gradient(#74181C, var(--rouge) 300px); }
.section.ctx-rouge::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--grain);
  opacity: .5;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* En-tête de piste, comme une tracklist */
.piste {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
  font: 500 .75rem/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: .12em;
}
.piste i { flex: 1; height: 1px; background: currentColor; opacity: .35; }

/* ---------- Images : coupe franche, trame, flou de bougé ---------- */
.image-mouvement { position: relative; overflow: hidden; isolation: isolate; background: var(--noir); }
.image-mouvement img { width: 100%; aspect-ratio: 4 / 5; }
.image-mouvement .image__nette { position: relative; transition: transform 1.6s var(--ressort), filter 1.2s var(--ressort), opacity 1s; }
.image-mouvement .image__trainee {
  position: absolute;
  inset: 0;
  z-index: 1;
  filter: grayscale(1) contrast(1.3) url(#flou-horizontal-fixe);
  opacity: .45;
  mix-blend-mode: screen;
  transform: scaleX(1.15);
  transition: transform 1.8s var(--ressort), opacity 1.8s;
}
.image-mouvement::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px),
    linear-gradient(to top, rgba(231, 48, 57, .55), transparent 55%);
  mix-blend-mode: multiply;
}
.js .image-mouvement:not(.visible) .image__nette { transform: translateX(12%); filter: grayscale(1) contrast(1.25) blur(16px); opacity: 0; }
.js .image-mouvement:not(.visible) .image__trainee { transform: scaleX(1.8); opacity: 0; }
.legende { margin: .75rem 0 0; font: 500 .72rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .1em; opacity: .7; }

/* Manifeste + dernière sortie : un seul décor continu, fumée légère (fumee.js).
   Dégradé du noir au rouge sur A2, rouge plein sur A3. Sans WebGL, les fonds CSS des sections restent. */
.fumee-zone { position: relative; isolation: isolate; overflow: clip; }
/* Flou de vitre dépolie : le canvas déborde de 80 px (constante DEBORD de fumee.js) pour garder des bords nets */
.fumee {
  position: absolute;
  inset: -80px;
  z-index: -2;
  display: block;
  width: calc(100% + 160px);
  height: calc(100% + 160px);
  filter: blur(18px);
}
/* Grain argentique : bruit de luminance en lumière dure, clair dans les noirs, sombre dans les clairs */
.fumee-zone.fumee-active::before {
  content: "";
  position: absolute;
  inset: -50%;
  z-index: -1;
  background-image: var(--grain-film);
  opacity: .2;
  mix-blend-mode: hard-light; /* visible dans le noir, mais limité au haut de la zone pour ne pas ternir le rouge */
  pointer-events: none;
  animation: grain .5s steps(5) infinite;
  -webkit-mask-image: linear-gradient(#000 0%, #000 22%, transparent 42%);
  mask-image: linear-gradient(#000 0%, #000 22%, transparent 42%);
}
/* Le grain apparaît progressivement sous la section du dessus, sans marquer de ligne */
.fumee-zone.fumee-active { -webkit-mask-image: none; }
.fumee-zone.fumee-active::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 14rem;
  z-index: -1;
  background: linear-gradient(#000, rgba(0, 0, 0, 0));
  pointer-events: none;
}
.fumee-zone.fumee-active > .section { background: transparent; }
/* Les grains propres aux sections se mélangeaient à un fond devenu transparent (voile gris) : le grain global suffit */
.fumee-zone.fumee-active > .section::before { display: none; }
.ctx-eau .piste { color: var(--papier); }
.section.ctx-eau::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--grain);
  opacity: .5;
  mix-blend-mode: overlay;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(transparent 40%, #000);
  mask-image: linear-gradient(transparent 40%, #000);
}
.openmic { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }

/* Vidéo YouTube : vignette au style du site, le vrai lecteur ne se charge qu'au clic (sans cookies avant) */
.video { position: relative; aspect-ratio: 16 / 9; background: var(--noir); overflow: hidden; }
.video__lancer { position: absolute; inset: 0; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.video .image-mouvement { position: absolute; inset: 0; display: block; }
.video .image-mouvement img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.video__lire { position: absolute; z-index: 4; left: 50%; top: 50%; translate: -50% -50%; pointer-events: auto; }
/* Le survol de toute la vignette déclenche le givre de la gélule */
@media (hover: hover) {
  .video__lancer:hover .video__lire {
    --r: 340px;
    color: var(--papier);
    transform: scale(1.06);
    text-shadow: .25em 0 .08em rgba(231, 48, 57, .45), .5em 0 .14em rgba(231, 48, 57, .18);
  }
  .video__lancer:hover .image__nette { filter: grayscale(.4) contrast(1.2) brightness(1); }
}
.video__lancer:focus-visible { outline-offset: -6px; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.openmic__avec { font-weight: 700; font-size: clamp(1.1rem, 2vw, 1.5rem); margin: .75rem 0 2rem; }
.openmic .boutons { margin-top: 2.25rem; }

/* Titre « Ce qu'on fait » en piste audio (titre-piste.js) */
.titre-piste { display: block; width: 100%; }
.piste-lecteur { display: grid; gap: .75rem; margin: 0 0 clamp(1rem, 2.5vw, 2rem); }
/* Petit bouton son, mini-gélule du logo */
.piste-son {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: .6em;
  min-height: 2.4rem;
  padding: .4rem 1.05rem;
  border: 3px solid var(--rouge-logo);
  border-radius: 999px;
  background: var(--noir);
  color: var(--rouge-logo);
  font: 500 .75rem/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  cursor: pointer;
  transition: color .3s, background-color .3s, transform .5s var(--ressort);
}
.piste-son::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: currentColor; }
.piste-son[aria-pressed="true"]::before { animation: clignote 1s steps(1) infinite; }
.piste-son[hidden] { display: none; }
@media (hover: hover) { .piste-son:hover { color: var(--papier); background: rgba(231, 48, 57, .16); transform: scale(1.06); } }

/* Pôles : rangées qui se déroulent */
.poles { list-style: none; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 0; }
.pole { border-top: 1px solid var(--filet); }
.pole:last-child { border-bottom: 1px solid var(--filet); }
.pole__tete {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr minmax(0, 24rem) auto;
  gap: 1rem 3rem;
  align-items: center;
  width: 100%;
  padding: clamp(1.25rem, 3vw, 2.25rem) 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.pole__tete::before, .pole__tete::after {
  content: "";
  position: absolute;
  inset: 0 calc(var(--marge) * -1);
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s, transform 1.1s var(--ressort);
}
.pole__tete::before { background: var(--img) center / cover; filter: grayscale(1) contrast(1.3) brightness(.7) url(#flou-rangee); transform: scaleX(1.25); }
.pole__tete::after { background: linear-gradient(90deg, rgba(231, 48, 57, .7), rgba(231, 48, 57, .2) 45%, rgba(0, 0, 0, .8)); mix-blend-mode: multiply; }
.pole.ouvert .pole__tete::before, .pole.ouvert .pole__tete::after { opacity: 1; transform: none; }
@media (hover: hover) {
  .pole__tete:hover::before, .pole__tete:hover::after { opacity: 1; transform: none; }
}
.pole__nom {
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(2.5rem, 8.5vw, 7.5rem);
  line-height: .85;
  letter-spacing: -.02em;
  text-shadow: 0 0 0 rgba(231, 48, 57, 0), 0 0 0 rgba(231, 48, 57, 0), 0 0 0 rgba(231, 48, 57, 0);
  transition: transform .8s var(--ressort), text-shadow .8s var(--ressort), color .4s;
}
@media (hover: hover) {
  .pole__tete:hover .pole__nom {
    transform: translateX(2rem);
    text-shadow: -.06em 0 .04em rgba(231, 48, 57, .9), -.12em 0 .08em rgba(231, 48, 57, .5), -.18em 0 .12em rgba(231, 48, 57, .25);
  }
}
.pole__tete:focus-visible { outline-offset: -4px; }
.pole__resume { display: grid; gap: .6rem; justify-items: start; }
.pole__desc { margin: 0; }
.pole__lien { font: 500 .75rem/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; border-bottom: 1px solid currentColor; padding-bottom: .3rem; }
.pole.ouvert .pole__lien { opacity: 0; }
/* Signe + / − dans une petite gélule */
.pole__signe {
  position: relative;
  width: 4.2rem;
  height: 2.4rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px currentColor;
  transition: background-color .4s, color .4s;
}
.pole__signe::before, .pole__signe::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1rem;
  height: 2px;
  margin: -1px 0 0 -.5rem;
  background: currentColor;
  transition: transform .6s var(--ressort);
}
.pole__signe::after { transform: rotate(90deg); }
.pole.ouvert .pole__signe { background: var(--papier); color: var(--noir); }
.pole.ouvert .pole__signe::after { transform: rotate(0deg); }

.pole__panneau { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .8s var(--ressort); }
.pole.ouvert .pole__panneau { grid-template-rows: 1fr; }
.pole__contenu {
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 5rem);
}
.pole__contenu > * { padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(2.5rem, 5vw, 4.5rem); }
/* Le contenu arrive avec un flou de bougé */
.pole__texte, .pole__infos { transition: transform .9s var(--ressort), filter .9s var(--ressort), opacity .6s; }
.pole:not(.ouvert) .pole__texte { transform: translateX(-4rem); filter: blur(12px); opacity: 0; }
.pole:not(.ouvert) .pole__infos { transform: translateX(4rem); filter: blur(12px); opacity: 0; }
.pole.ouvert .pole__infos { transition-delay: .08s; }
.pole__texte .texte { color: rgba(242, 242, 240, .86); }

.offres { list-style: none; margin: 2rem 0 0; padding: 0; }
.offres li { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; padding: 1rem 0; border-top: 1px solid var(--filet); }
.offres strong { font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; font-size: 1.15rem; }
.offres em { font-style: normal; font-weight: 900; font-size: 1.15rem; color: var(--rouge); }
.offres span { grid-column: 1 / -1; color: rgba(242, 242, 240, .72); font-size: 1rem; }

.tarifs { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tarifs th, .tarifs td { padding: .85rem .5rem .85rem 0; border-bottom: 1px solid var(--filet); text-align: left; }
.tarifs thead th { font: 500 .72rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: rgba(242, 242, 240, .6); }
.tarifs tbody th { font-weight: 500; }
.tarifs td { font-weight: 900; font-size: 1.25rem; }
.note { margin: 1rem 0 0; font: 500 .75rem/1.5 var(--mono); letter-spacing: .04em; color: rgba(242, 242, 240, .6); }
.adresse { display: grid; gap: .25rem; margin: 1.75rem 0 2rem; }
.adresse a { font-weight: 900; text-transform: uppercase; font-size: 1.15rem; text-decoration-color: var(--rouge); text-decoration-thickness: 2px; text-underline-offset: .3em; }
.adresse a:hover { color: var(--rouge); }
.adresse span { font: 500 .75rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: rgba(242, 242, 240, .6); }
.pole__intertitre { margin: 0 0 1rem; font: 500 .75rem/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: rgba(242, 242, 240, .6); }

.projets { list-style: none; margin: 0 0 2rem; padding: 0; }
.projets a { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--filet); text-decoration: none; transition: color .3s, text-shadow .6s var(--ressort), padding .6s var(--ressort); }
.projets li:last-child a { border-bottom: 1px solid var(--filet); }
.projets strong { font-weight: 900; text-transform: uppercase; font-size: 1.2rem; }
.projets span { font: 500 .75rem/1.6 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: rgba(242, 242, 240, .6); }
@media (hover: hover) {
  .projets a:hover { color: var(--rouge); padding-left: 1rem; text-shadow: -.3em 0 .08em rgba(231, 48, 57, .35); }
}

.pochettes { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.pochettes a { display: grid; gap: .35rem; text-decoration: none; }
.pochettes img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .7s var(--ressort), filter .7s var(--ressort); }
.pochettes strong { margin-top: .3rem; font-weight: 900; text-transform: uppercase; font-size: .95rem; line-height: 1.1; }
.pochettes span { font: 500 .7rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: rgba(242, 242, 240, .6); }
@media (hover: hover) {
  .pochettes a:hover img { transform: translateY(-.4rem); filter: drop-shadow(0 1.2rem 1.2rem rgba(231, 48, 57, .45)); }
}


/* Sortie : pochette + vinyle à scratcher */
.sortie { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.pochette { position: relative; width: 62%; isolation: isolate; }
.pochette img { position: relative; width: 100%; aspect-ratio: 1; object-fit: cover; box-shadow: 0 2.5rem 4rem -1.5rem rgba(0, 0, 0, .55); pointer-events: none; }
.vinyle {
  position: absolute;
  top: 3%;
  left: 3%;
  z-index: -1;
  width: 94%;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 2rem 3rem -1.5rem rgba(0, 0, 0, .55);
  transform: translateX(56%);
  transition: transform 1.8s var(--ressort);
  touch-action: none;
  cursor: grab;
}
.vinyle:active { cursor: grabbing; }
.js .sortie:not(.visible) .vinyle { transform: translateX(0); }
.vinyle__disque {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, #050505 0 2px, #161616 2px 3px);
  -webkit-mask-image: radial-gradient(circle, #000 70.5%, transparent 71%);
  mask-image: radial-gradient(circle, #000 70.5%, transparent 71%);
  transform: rotate(var(--rot, 0deg));
}
/* Étiquette centrale = la pochette de la sortie, cerclée du rouge du logo (comme sur la page Label) */
.vinyle__disque::before {
  content: "";
  position: absolute;
  inset: 33%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--noir) 0 6%, transparent 6.5%), var(--etiquette, var(--rouge)) center / cover;
  box-shadow: 0 0 0 3px var(--rouge);
}
.vinyle::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(from 20deg, transparent 0 8%, rgba(255,255,255,.14) 12%, transparent 18% 55%, rgba(255,255,255,.1) 62%, transparent 68%);
  -webkit-mask-image: radial-gradient(circle, transparent 18%, #000 19% 70.5%, transparent 71%);
  mask-image: radial-gradient(circle, transparent 18%, #000 19% 70.5%, transparent 71%);
}
.sortie__statut { font-weight: 700; font-size: clamp(1.1rem, 2vw, 1.5rem); margin: 0 0 .5rem; }
.sortie__titre { font-size: clamp(3.5rem, 10vw, 10rem); }
.sortie__credit { font-weight: 500; font-size: clamp(1.1rem, 2vw, 1.5rem); margin: .75rem 0 2.25rem; }
.sortie__consigne { margin: 1.5rem 0 0; font-size: .95rem; font-weight: 500; }

/* Playlist Sur Le Fil, sous la dernière sortie */
.playlist {
  margin-top: clamp(3.5rem, 7vw, 6rem);
  padding: .9rem;
  background: rgba(0, 0, 0, .22);
  border: 1px solid rgba(242, 242, 240, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 40px 60px -45px rgba(0, 0, 0, .9);
}
.playlist__tete {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: .1rem .1rem 1rem;
  font: 500 .72rem/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--noir);
}
.playlist__tete i { flex: 1; height: 1px; background: currentColor; opacity: .4; }
.playlist iframe { display: block; border: 0; border-radius: 12px; background: #121212; }

/* Manifeste : les mots se défloutent à la lecture */
.manifeste { overflow: hidden; }
.manifeste__corps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 40rem); gap: 2rem; }
.manifeste__corps .texte { font-size: clamp(1.3rem, 2.1vw, 1.85rem); line-height: 1.4; font-weight: 500; }
.mot { transition: none; }
.manifeste__mot {
  margin: clamp(3rem, 7vw, 6rem) 0 0;
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(3.5rem, 20vw, 22rem);
  line-height: .8;
  letter-spacing: -.04em;
  color: var(--rouge);
  white-space: nowrap;
  will-change: transform;
}

/* Chiffres */
.chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(1.5rem, 4vw, 4rem); margin: clamp(2.5rem, 5vw, 4rem) 0 0; }
.chiffre { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding: clamp(1.25rem, 2.5vw, 2rem) 0 clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--filet); }
.chiffre dd { margin: 0; }
.chiffre__valeur { display: block; font-weight: 900; font-size: clamp(3rem, 7.5vw, 7rem); line-height: .9; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.chiffre__label { display: block; margin-top: .75rem; font: 500 .78rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .1em; }

/* Compteurs vivants : les chiffres qui ont bougé roulent une fois à l'écran */
.roule { display: inline-block; height: .9em; overflow: hidden; vertical-align: top; }
.roule > span { display: flex; flex-direction: column; transition: transform 1.4s var(--ressort), filter 1.4s var(--ressort); filter: blur(0); }
.roule > span > span { display: block; height: .9em; }
.roule.pret > span { transform: translateY(-50%); }
.roule:not(.pret) > span { filter: blur(0); }
.roule.pret.en-cours > span { filter: blur(3px); }

/* Enregistrement */
/* B3 : le bouton REC d'un magnéto, disque noir cerclé de rouge comme le logo (proposition R2 validée) */
.enregistrer { display: grid; justify-items: center; gap: 1.5rem; text-align: center; }
.enregistrer .titre { max-width: 14ch; }
.rec {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(11rem, 22vw, 16rem);
  aspect-ratio: 1;
  border: 6px solid var(--rouge);
  border-radius: 50%;
  background: var(--noir);
  text-decoration: none;
  transition: transform .6s var(--ressort), box-shadow .6s var(--ressort);
}
.rec__point {
  position: absolute;
  width: 38%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--rouge);
  animation: pulsation 1.6s ease-in-out infinite;
  transition: width .6s var(--ressort);
}
@keyframes pulsation { 50% { transform: scale(.88); opacity: .75; } }
.rec__libelle { position: relative; font: 900 1.4rem/1 var(--police); letter-spacing: .04em; color: var(--noir); }
.rec__tc { position: absolute; bottom: 16%; font: 500 .7rem/1 var(--mono); letter-spacing: .12em; color: var(--papier); opacity: 0; transition: opacity .3s; }
@media (hover: hover) {
  .rec:hover { transform: scale(1.06); box-shadow: 0 0 0 10px rgba(231, 48, 57, .12), 0 0 60px -10px rgba(231, 48, 57, .8); }
  .rec:hover .rec__point { width: 64%; animation-duration: .8s; }
  .rec:hover .rec__tc { opacity: 1; }
}
.rec:active { transform: scale(.97); }
.rec:focus-visible { outline: 2px solid var(--papier); outline-offset: 6px; }
.rec__sous { margin: 0; font-weight: 900; font-size: 1.1rem; text-transform: uppercase; }
.faits { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin: .5rem 0 0; padding: 0; list-style: none; font: 500 .75rem/1.5 var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.faits li { padding: .55rem 1rem; border: 2px solid var(--filet); border-radius: 999px; }

/* Contact + bénévoles */
.contact { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(3rem, 7vw, 7rem); }
.contact .texte { margin: 1.25rem 0 2rem; }
.formulaire { display: grid; gap: 1.25rem; }
.champ { display: grid; gap: .45rem; }
.champ label { font: 500 .75rem/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.champ input, .champ select, .champ textarea {
  width: 100%;
  min-height: 3.5rem;
  padding: .85rem 0;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, .45);
  border-radius: 0;
  background: transparent;
  color: var(--noir);
  font: 500 1.1rem/1.4 var(--police);
  transition: border-color .3s, box-shadow .4s var(--ressort), background-color .4s;
  appearance: none;
}
.champ select {
  padding-right: 2rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--noir) 50%), linear-gradient(135deg, var(--noir) 50%, transparent 50%);
  background-position: calc(100% - .9rem) 55%, calc(100% - .5rem) 55%;
  background-size: .45rem .45rem;
  background-repeat: no-repeat;
}
.champ textarea { min-height: 9rem; padding: .85rem 1rem; border: 1px solid rgba(0, 0, 0, .45); resize: vertical; }
.champ input:hover, .champ select:hover, .champ textarea:hover { border-color: var(--noir); }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none;
  border-color: var(--rouge);
  box-shadow: 0 10px 18px -12px rgba(231, 48, 57, .9);
  background-color: rgba(231, 48, 57, .05);
}
.champs-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.formulaire .bouton { justify-self: start; margin-top: .5rem; }
.benevoles {
  background: radial-gradient(120% 80% at 100% 0%, rgba(231, 48, 57, .5), transparent 62%), var(--noir) !important;
  border-radius: 0; padding: clamp(1.75rem, 3.5vw, 3rem); align-self: start; background: var(--noir); color: var(--papier); --encre: var(--papier); --fond: var(--noir); --survol-fond: var(--papier); --survol-texte: var(--noir); }
.benevoles .texte { margin: 1.25rem 0 2rem; }

/* Pied de page */
.pied { position: relative; overflow: clip; padding: clamp(3rem, 7vw, 5rem) var(--marge) 2rem; background: radial-gradient(80% 120% at 50% 120%, rgba(231, 48, 57, .45), transparent 60%), var(--noir); }
.pied__haut { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2.5rem; }
.pied__logo { color: var(--rouge); width: clamp(7rem, 14vw, 11rem); }
.pied__colonnes { display: flex; flex-wrap: wrap; gap: clamp(2rem, 6vw, 6rem); }
.pied h2, .pied__titre { font-size: .95rem; font-weight: 500; color: var(--beton); margin: 0 0 1rem; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.pied a { text-decoration: none; font-weight: 700; transition: color .3s; }
.pied a:hover { color: var(--rouge); }
.pied__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: clamp(3rem, 6vw, 5rem); padding-top: 1.25rem; border-top: 1px solid var(--filet); color: var(--beton); font-size: .95rem; }

/* ---------- Tablette / mobile ---------- */
@media (max-width: 900px) {
  .openmic, .sortie, .contact, .manifeste__corps { grid-template-columns: 1fr; }
  .manifeste__corps > :first-child { display: none; }
  .pole__tete { grid-template-columns: 1fr auto; }
  .pole__resume { grid-column: 1 / -1; grid-row: 2; }
  .pole__signe { grid-column: 2; grid-row: 1; }
  .pole__contenu { grid-template-columns: 1fr; gap: 0; }
  .pole__contenu > .pole__infos { padding-top: 0; }
  .playlist { margin-top: 3rem; }
  .chiffres { grid-template-columns: repeat(2, 1fr); }
  .pochette { width: 58%; }
}
@media (max-width: 560px) {
  body { font-size: 1.05rem; }
  .champs-duo { grid-template-columns: 1fr; }
  .boutons .bouton { flex: 1 1 100%; }
  .formulaire .bouton { justify-self: stretch; }
  .pole__signe { width: 3.4rem; height: 2rem; }
  .pochettes { grid-template-columns: repeat(2, 1fr); }
  .tarifs td { font-size: 1.05rem; }
  .chiffre__valeur { font-size: clamp(2.4rem, 12vw, 3.5rem); }
  .hero__pied .bouton { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .ouverture { display: none; }
}

/* ---------- Verre dépoli : replis ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .entete { background: rgba(0, 0, 0, .92); }
  .hud { background: rgba(0, 0, 0, .8); }
  .benevoles { background: radial-gradient(120% 80% at 100% 0%, rgba(231, 48, 57, .5), transparent 60%), var(--noir) !important; }
  .nav { background: rgba(0, 0, 0, .96); }
}
@media (prefers-reduced-transparency: reduce) {
  .entete, .hud, .nav, .benevoles {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .entete { background: var(--noir); }
  .hud { background: rgba(0, 0, 0, .9); }
  .nav { background: var(--noir); }
  .benevoles { background: #0A0A0A !important; }
  .bouton::before { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--noir); }
}
.bouton[hidden] { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ================= Page Studio audio ================= */
.prestations { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 6vw, 6rem); margin-top: clamp(2rem, 4vw, 3rem); align-items: start; }
.prestations .offres { margin-top: 0; }
.prestations .offres li:first-child { border-top: 0; padding-top: 0; }

/* Réservation : le calendrier SimplyBook posé dans un cadre noir sur la section rouge */
.resa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; margin-top: clamp(1rem, 3vw, 2rem); }
.resa__intro { }
.resa .titre { font-size: clamp(2.6rem, 5.2vw, 5.2rem); }
/* Étapes et formules, sur le fond rouge : noir et blanc cassé uniquement */
.resa__etape { display: flex; align-items: center; gap: 1rem; margin: 2rem 0 1rem; font-weight: 700; font-size: 1.1rem; }
.resa__etape b {
  display: grid; place-items: center; flex: none;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--noir); color: var(--rouge);
  font: 900 1.1rem/1 var(--police);
}
.resa__etape + .resa__etape { margin-top: 1rem; }
/* Sélecteur semaine / soir : grand, avec une pastille noire qui glisse sous l'option choisie */
.creneau__question { margin: 1.75rem 0 .6rem; font: 500 .75rem/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.creneau {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  max-width: 38rem;
  margin: 0 0 1.25rem;
  padding: 5px;
  border: 3px solid var(--noir);
  border-radius: 999px;
}
.creneau::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 5px;
  bottom: 5px;
  left: 5px;
  width: calc(50% - 5px);
  border-radius: 999px;
  background: var(--noir);
  transition: transform .55s var(--ressort);
}
.creneau[data-actif="soir"]::before { transform: translateX(100%); }
.creneau button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  min-height: 4rem;
  padding: .8rem 1rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--noir);
  font: 900 clamp(.95rem, 1.4vw, 1.1rem)/1 var(--police);
  text-transform: uppercase;
  cursor: pointer;
  transition: color .35s, background-color .35s, transform .45s var(--ressort);
}
.creneau button small { font: 500 .68rem/1 var(--mono); letter-spacing: .1em; text-transform: none; opacity: .8; }
.creneau button[aria-pressed="true"] { color: var(--rouge); }
.creneau button[aria-pressed="true"] small { color: var(--papier); opacity: .85; }
/* Survol de l'option non choisie : elle s'assombrit et gonfle légèrement, on comprend qu'elle se clique */
@media (hover: hover) {
  .creneau button[aria-pressed="false"]:hover { background: rgba(0, 0, 0, .16); transform: scale(1.04); }
}
.creneau button:active { transform: scale(.97); }
.creneau button:focus-visible { outline: 2px solid var(--papier); outline-offset: 2px; }
.formules { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.formule button {
  display: grid; grid-template-columns: auto 1fr auto; gap: .15rem .9rem; align-items: center;
  width: 100%; padding: .8rem 1.3rem; border: 3px solid var(--noir); border-radius: 999px;
  background: none; color: var(--noir); font: inherit; text-align: left; cursor: pointer;
  transition: background-color .35s, color .35s, transform .5s var(--ressort);
}
.formule .puce { width: .9rem; height: .9rem; border-radius: 50%; box-shadow: inset 0 0 0 2px currentColor; transition: background-color .3s, box-shadow .3s; }
.formule strong { font-weight: 900; text-transform: uppercase; font-size: 1rem; }
.formule small { grid-column: 2; font-size: .85rem; opacity: .8; }
.formule em { grid-row: 1 / span 2; grid-column: 3; font-style: normal; font-weight: 900; font-size: 1.4rem; letter-spacing: -.02em; }
.formule .etiquette { margin-left: .5rem; padding: .18rem .5rem; border-radius: 999px; background: var(--noir); color: var(--rouge); font: 500 .6rem/1 var(--mono); letter-spacing: .1em; vertical-align: middle; }
/* Survol : la gélule se remplit de noir, comme une formule sélectionnée, et avance */
@media (hover: hover) {
  .formule button:hover { background: var(--noir); color: var(--papier); transform: translateX(.4rem); }
  .formule button:hover .puce { background: var(--rouge); box-shadow: inset 0 0 0 2px var(--rouge); }
  .formule button:hover em { color: var(--rouge); }
  .formule button:hover .etiquette { background: var(--rouge); color: var(--noir); }
}
.formule button:focus-visible { background: var(--noir); color: var(--papier); transform: translateX(.4rem); }
.formule button:focus-visible .puce { background: var(--rouge); box-shadow: inset 0 0 0 2px var(--rouge); }
.formule button:focus-visible em { color: var(--rouge); }
.formule button:focus-visible { outline: 2px solid var(--papier); outline-offset: 3px; }
.formule button:active { transform: translateX(.4rem) scale(.98); }

/* Les trois étapes, en grand, à côté des formules */
.etapes-grandes { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-self: center; }
.etapes-grandes li { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: start; }
.etapes-grandes b {
  display: grid; place-items: center;
  width: 3.4rem; height: 3.4rem; border-radius: 50%;
  background: var(--noir); color: var(--rouge);
  font: 900 1.4rem/1 var(--police);
}
.etapes-grandes strong { display: block; font-weight: 900; text-transform: uppercase; font-size: clamp(1.2rem, 2vw, 1.6rem); line-height: 1; margin: .35rem 0 .45rem; }
.etapes-grandes span { font-size: 1.05rem; }

/* ---------- Fenêtre de réservation (calendrier SimplyBook) ---------- */
.modale {
  width: min(60rem, 94vw);
  max-width: none;
  max-height: 92dvh;
  padding: 0;
  border: 0;
  background: var(--noir);
  color: var(--papier);
  box-shadow: 0 0 0 4px var(--rouge), 0 50px 120px -40px rgba(0, 0, 0, .9);
  overflow: hidden;
  display: none;
}
.modale[open] { display: flex; flex-direction: column; animation: modale-entree .6s var(--ressort); }
@keyframes modale-entree { from { opacity: 0; transform: translateY(3rem); filter: blur(12px); } }
.modale::backdrop { background: rgba(0, 0, 0, .62); -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); }
.modale__tete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem clamp(1rem, 2.5vw, 1.5rem); border-bottom: 1px solid rgba(242, 242, 240, .15); }
.modale__titre { display: grid; gap: .3rem; margin: 0; }
.modale__titre strong { font-weight: 900; text-transform: uppercase; font-size: clamp(1.3rem, 2.6vw, 2rem); line-height: 1; }
.modale__titre span { font: 500 .72rem/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--rouge); }
.modale__fermer { min-height: 2.6rem; padding: .45rem 1.2rem; font-size: .85rem; }
.modale__corps { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: clamp(.75rem, 2vw, 1.25rem); }
.modale .resa__widget { min-height: 34rem; background: #FFFFFF; }
/* Pendant que la fenêtre est ouverte : curseur normal (le triangle resterait sous la fenêtre) */
.modale-ouverte .curseur { display: none; }
.modale-ouverte, .modale-ouverte * { cursor: auto; }
.modale-ouverte button, .modale-ouverte a { cursor: pointer; }
@media (max-width: 700px) {
  .modale { width: 100vw; height: 100dvh; max-height: 100dvh; box-shadow: none; }
}
/* Pendant que le calendrier change de formule */
.resa__cadre { position: relative; }
.resa__cadre::after {
  content: "Chargement du calendrier…";
  position: absolute; inset: 3.2rem clamp(1rem, 2.5vw, 1.75rem) clamp(1rem, 2.5vw, 1.75rem);
  display: grid; place-items: start center; padding-top: 6rem;
  background: rgba(255, 255, 255, .92);
  color: var(--noir); font: 500 .8rem/1 var(--mono); text-transform: uppercase; letter-spacing: .12em;
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.resa__cadre.chargement::after { opacity: 1; }
.etapes { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1rem; }
.etapes li { display: flex; align-items: center; gap: 1rem; font-weight: 700; font-size: 1.1rem; }
.etapes b {
  display: grid; place-items: center; flex: none;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--noir); color: var(--rouge);
  font: 900 1.1rem/1 var(--police);
}
.resa__cadre {
  background: var(--noir);
  color: var(--papier);
  padding: clamp(1rem, 2.5vw, 1.75rem);
  box-shadow: 0 40px 70px -45px rgba(0, 0, 0, .9);
}
.resa__tete { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; font: 500 .72rem/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.resa__tete i { flex: 1; height: 1px; background: currentColor; opacity: .35; }
.resa__widget { min-height: 32rem; background: #FFFFFF; }
.resa__widget iframe { display: block; width: 100%; border: 0; }
.resa__attente { margin: 0; padding: 4rem 0; text-align: center; font: 500 .8rem/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; opacity: .7; }

/* Venir au studio */
.venir { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.venir__adresse { margin: 1.75rem 0 1rem; font-weight: 900; text-transform: uppercase; font-size: clamp(1.6rem, 3.5vw, 2.8rem); line-height: 1; letter-spacing: -.01em; }
.venir__adresse a { text-decoration: none; }
.venir__adresse a:hover { color: var(--rouge); }
.venir__demande { padding: clamp(1.75rem, 3.5vw, 3rem); background: radial-gradient(120% 80% at 100% 0%, rgba(231, 48, 57, .5), transparent 62%), var(--noir); color: var(--papier); --encre: var(--papier); --fond: var(--noir); }
.venir__demande .texte { margin: 1rem 0 2rem; }

/* Bouton « Réserver » flottant, sur téléphone seulement, masqué quand le calendrier est à l'écran */
/* Bouton « Réserver » flottant : en bas à droite sur ordinateur, centré sur téléphone ; caché dans l'intro et sur la réservation */
.cta-flottant {
  display: inline-flex;
  position: fixed;
  z-index: 60;
  right: var(--marge);
  bottom: calc(1.5rem + env(safe-area-inset-bottom));
  box-shadow: inset 0 0 0 0 transparent, 0 12px 30px -10px rgba(0, 0, 0, .9);
  transition: opacity .4s, translate .5s var(--ressort), transform .6s var(--ressort), color .5s;
}
.cta-flottant.cache { opacity: 0; translate: 0 150%; pointer-events: none; }
@media (max-width: 900px) {
  .prestations, .resa, .venir { grid-template-columns: 1fr; }
  .resa__intro { position: static; }
  .cta-flottant { right: auto; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom)); translate: -50% 0; }
  .cta-flottant.cache { translate: -50% 150%; }
}

/* ==========================================================================
   Page Label (26/09)
   ========================================================================== */
.image-mouvement--large img { aspect-ratio: 3 / 2; }
.projet__studio { margin: 2rem 0 0; font: 500 .75rem/1.6 var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.projet__studio a { font-weight: 500; text-decoration-color: var(--rouge); text-decoration-thickness: 2px; text-underline-offset: .35em; transition: color .3s; }
.projet__studio a:hover { color: var(--rouge); }

/* Sur Le Fil : le concept en 3 temps + la playlist */
.slf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.slf__chapo { margin: 1.5rem 0 clamp(2rem, 4vw, 3rem); font-weight: 500; font-size: clamp(1.1rem, 1.6vw, 1.35rem); }
.slf .playlist { margin-top: 0; }

/* Petite gélule : même bouton, en plus compact (fiche des sorties) */
.bouton--petit { min-height: 2.8rem; padding: calc(.7rem - var(--anneau)) calc(1.3rem - var(--anneau)); font-size: .82rem; }

/* Liste des sorties : affichée telle quelle sans JS ou avec « réduire les animations », et lue par les lecteurs d'écran */
.bac__liste { list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 2.5rem 1.5rem; }
.disque { display: grid; gap: .35rem; align-content: start; }
.disque__pochette img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.disque__titre { margin: .6rem 0 0; font-weight: 900; text-transform: uppercase; font-size: 1.15rem; line-height: 1.05; }
.disque__credit { margin: 0; font-weight: 500; }
.disque__infos, .disque__titres, .disque__liens { margin: 0; font: 500 .7rem/1.5 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--beton); }
.disque__infos span::after { content: " / "; }
.disque__titres { display: none; }
.disque__liens { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-top: .4rem; }
.disque__liens a { color: var(--papier); text-decoration-color: var(--rouge); text-underline-offset: .3em; }
.disque__liens a:hover { color: var(--rouge); }

/* ---------- Le bac à disques (label.js) : on feuillette en faisant défiler ---------- */
.bac.bac--3d { padding: 0; }
.bac--3d .bac__titre, .bac--3d .bac__liste { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bac .bac__scene {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  grid-template-rows: auto auto auto;
  column-gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(3rem, 7vw, 6rem) var(--marge) clamp(2rem, 4vw, 3.5rem);
}
.bac__scene .piste { grid-column: 1 / -1; margin-bottom: 0; }
.bac__caisse { position: relative; height: calc(min(48svh, 34rem) + 9rem); touch-action: pan-y; clip-path: inset(-100vh -100vw 0 -100vw); } /* coupe seulement en bas : les pochettes feuilletées ne débordent pas sur la frise */
.bac__lueur {
  position: absolute;
  left: 45%;
  top: 50%;
  width: 95%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(231, 48, 57, .4), rgba(231, 48, 57, .1) 45%, transparent 70%);
  filter: blur(30px);
  pointer-events: none;
}
.bac__pile {
  position: absolute;
  z-index: 0;
  left: 40%;
  bottom: 4.5rem;
  width: min(70%, 48svh, 34rem);
  aspect-ratio: 1;
  translate: -50% 0;
  perspective: 1500px;
  perspective-origin: 50% -60%;
}
.bac__disque { position: absolute; inset: 0; display: block; transform-origin: 50% 100%; will-change: transform, filter; isolation: isolate; }
.bac__disque img { position: relative; width: 100%; height: 100%; object-fit: cover; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 2rem 3rem -1.5rem rgba(0, 0, 0, .9); user-select: none; }
/* Le vinyle, avec la pochette en étiquette centrale */
.bac__vinyle {
  position: absolute;
  top: 3%;
  left: 3%;
  z-index: -1;
  width: 94%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    conic-gradient(from 20deg, transparent 0 8%, rgba(255, 255, 255, .12) 12%, transparent 18% 55%, rgba(255, 255, 255, .09) 62%, transparent 68%),
    repeating-radial-gradient(circle, #050505 0 2px, #161616 2px 3px);
  box-shadow: 0 1.5rem 2.5rem -1rem rgba(0, 0, 0, .9);
}
.bac__vinyle span {
  position: absolute;
  inset: 33%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--noir) 0 6%, transparent 6.5%), var(--etiquette) center / cover;
  box-shadow: 0 0 0 3px var(--rouge);
}
/* Façade du bac : les pochettes s'y enfoncent (placée dans la pile, par-dessus toutes les pochettes) */
.bac__facade {
  position: absolute;
  z-index: 1000;
  left: -14%;
  width: 176%;
  top: 88%;
  bottom: calc(-4.5rem - 4px); /* dépasse un peu sous la coupe pour ne laisser aucun liseré */
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: .9rem 1.1rem;
  background: var(--noir);
  border-top: var(--anneau) solid var(--rouge);
  box-shadow: 0 -2.5rem 3rem -1.5rem rgba(0, 0, 0, .95);
  font: 500 .68rem/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--beton);
}
.bac__facade i { flex: 1; height: 1px; margin-top: .35rem; background: currentColor; opacity: .5; }

/* Fiche de la sortie regardée */
.bac__fiche { align-self: center; min-width: 0; padding-bottom: 2rem; }
.fiche__compte { margin: 0 0 1rem; font: 500 .8rem/1 var(--mono); letter-spacing: .12em; color: var(--beton); }
.fiche__compte b { font-weight: 500; font-size: 1.5rem; color: var(--rouge); }
.fiche__titre { margin: 0; font-size: clamp(2.4rem, 5vw, 5.5rem); overflow-wrap: break-word; }
.bac__fiche[data-long] .fiche__titre { font-size: clamp(2rem, 3.6vw, 3.9rem); }
.fiche__credit { margin: 1rem 0 0; font-weight: 700; font-size: clamp(1.05rem, 1.6vw, 1.35rem); }
.fiche__infos { display: flex; flex-wrap: wrap; gap: .4rem 0; margin: .8rem 0 0; font: 500 .75rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--beton); }
.fiche__infos span + span::before { content: "/"; margin: 0 .9rem; color: var(--rouge); }
.fiche__titres { margin: 1.25rem 0 0; max-width: 48ch; font: 500 .72rem/1.65 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: rgba(242, 242, 240, .78); }
.fiche__liens { margin-top: 1.75rem; gap: .75rem; }
/* Le texte arrive en glissant, flou, du côté où l'on feuillette */
.bascule > * { animation: fiche-entree .8s var(--ressort) both; }
.bascule > :nth-child(2) { animation-delay: .03s; }
.bascule > :nth-child(3) { animation-delay: .07s; }
.bascule > :nth-child(4) { animation-delay: .1s; }
.bascule > :nth-child(5) { animation-delay: .13s; }
.bascule > :nth-child(6) { animation-delay: .16s; }
@keyframes fiche-entree {
  from { opacity: 0; transform: translateX(calc(var(--sens, 1) * 2.5rem)); filter: blur(10px); }
}

/* Frise : un repère par sortie, la tête de lecture rouge avance avec le défilement */
.bac__frise { grid-column: 1 / -1; position: relative; border-top: 1px solid var(--filet); }
.bac__frise ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.bac__frise button { position: relative; display: block; width: 100%; height: 2.9rem; padding: 0; border: 0; background: none; color: var(--papier); cursor: pointer; }
.bac__frise button::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: .75rem;
  background: currentColor;
  opacity: .45;
  transition: height .4s var(--ressort), opacity .3s;
}
.bac__frise button:hover::before { height: 1.2rem; opacity: 1; }
.bac__frise button[aria-current]::before { opacity: 0; }
.frise__annee { position: absolute; left: 50%; bottom: .4rem; translate: -50% 0; font: 500 .65rem/1 var(--mono); letter-spacing: .1em; color: var(--beton); }
.frise__nom {
  position: absolute;
  left: 50%;
  bottom: calc(100% + .9rem);
  translate: -50% 0;
  padding: .4rem .65rem;
  background: var(--noir);
  border: 1px solid var(--filet);
  font: 500 .65rem/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, translate .4s var(--ressort);
}
.bac__frise li:first-child .frise__nom { left: 0; translate: 0 0; }
.bac__frise li:last-child .frise__nom { left: auto; right: 0; translate: 0 0; }
.bac__frise button:hover .frise__nom, .bac__frise button:focus-visible .frise__nom { opacity: 1; }
.frise__tete { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform; }
.frise__tete::before { content: ""; position: absolute; left: -1px; top: -.55rem; width: 2px; height: 1.9rem; background: var(--rouge); box-shadow: 0 0 14px rgba(231, 48, 57, .85); }
.frise__tete::after { content: ""; position: absolute; left: -.4rem; top: -1.1rem; border: .4rem solid transparent; border-top: .55rem solid var(--rouge); }

@media (max-width: 900px) {
  .slf { grid-template-columns: 1fr; }
  .bac .bac__scene { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; }
  .bac__caisse { height: calc(min(56vw, 30svh) + 7.5rem); }
  .bac__pile { left: 40%; width: min(56vw, 30svh); bottom: 3.25rem; }
  .bac__lueur { left: 44%; }
  .bac__facade { bottom: calc(-3.25rem - 4px); left: -40vw; width: 200vw; padding-left: calc(40vw + .25rem); }
  .bac__facade span:last-child { display: none; }
  .bac__fiche { align-self: end; height: 14.5rem; padding-bottom: 1rem; }
  .fiche__compte { margin-bottom: .45rem; }
  .fiche__compte b { font-size: 1.15rem; }
  .fiche__titre, .bac__fiche[data-long] .fiche__titre { font-size: clamp(1.7rem, 8vw, 2.6rem); }
  .fiche__credit { margin-top: .5rem; }
  .fiche__titres { display: none; }
  .fiche__liens { margin-top: 1rem; gap: .5rem; flex-wrap: nowrap; }
  .fiche__liens .bouton { min-height: 2.5rem; padding-inline: calc(.95rem - var(--anneau)); font-size: .72rem; }
  .frise__nom { display: none; }
  .frise__annee { font-size: 0; }
  .frise__annee::after { content: attr(data-court); font-size: .6rem; letter-spacing: .02em; }
}
.projet__titre { font-size: clamp(2.6rem, 6vw, 6rem); }

/* ==========================================================================
   Clips (clips.js) : 3 intégrations proposées, V1 banc de montage (retenue sur la page Label), V2 zapping, V3 pellicule
   ========================================================================== */
/* Sans JS ou avec « réduire les animations » : simples vignettes vers YouTube */
.clips__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: 2rem 1.5rem; }
.clips__liste a { display: grid; gap: .3rem; text-decoration: none; }
.clips__liste img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.clips__liste strong { margin-top: .5rem; font-weight: 900; text-transform: uppercase; font-size: 1.15rem; }
.clips__liste span { font: 500 .72rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .08em; opacity: .7; }
.clips--actif .clips__liste { display: none; }
/* Les images tirées des vidéos ont des bandes noires sur les côtés : on les recadre */
.rogne { display: block; overflow: hidden; }
.rogne img { transform: scale(1.32); }

/* ---------- V1 Banc de montage ---------- */
.montage { display: grid; gap: 1rem; }
.montage__moniteur { position: relative; aspect-ratio: 16 / 9; background: var(--noir); overflow: hidden; box-shadow: 0 0 0 1px rgba(242, 242, 240, .16), 0 40px 70px -45px rgba(231, 48, 57, .55); cursor: pointer; }
.montage__cadre, .montage__cadre img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.montage__cadre .rogne, .zapping__cadre .rogne { position: absolute; inset: 0; }
.montage__cadre { transition: transform 6s linear; }
.montage__moniteur:not(.lecture) .montage__cadre { transform: scale(1.04); }
.montage__cadre.saute { animation: montage-saute .45s var(--ressort); }
@keyframes montage-saute { from { filter: blur(10px) brightness(1.4); transform: translateX(2.5%) scale(1.04); } }
.montage__moniteur::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(0, 0, 0, .75), transparent 45%), linear-gradient(to bottom, rgba(0, 0, 0, .55), transparent 25%); }
.montage__osd { position: absolute; z-index: 2; left: 1.1rem; right: 1.1rem; display: flex; justify-content: space-between; gap: 1rem; pointer-events: none; }
.montage__osd--haut { top: .9rem; font: 500 .72rem/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: rgba(242, 242, 240, .8); }
.montage__osd--haut .montage__tc { color: var(--papier); font-variant-numeric: tabular-nums; }
.montage__osd--haut .montage__tc::before { content: ""; display: inline-block; width: .55em; height: .55em; margin-right: .6em; border-radius: 50%; background: var(--rouge); animation: clignote 1s steps(1) infinite; }
.montage__osd--bas { bottom: 1.1rem; align-items: end; }
.montage__titre { margin: 0; font-weight: 900; text-transform: uppercase; font-size: clamp(1.8rem, 4.5vw, 4.2rem); line-height: .86; letter-spacing: -.02em; }
.montage__credit { margin: .5rem 0 0; font-weight: 700; font-size: clamp(.9rem, 1.4vw, 1.15rem); }
.montage__lire { position: absolute; z-index: 3; right: 1.1rem; bottom: 1.1rem; }
.montage__moniteur.lecture .montage__cadre, .montage__moniteur.lecture .montage__osd, .montage__moniteur.lecture .montage__lire, .montage__moniteur.lecture::after { display: none; }
.montage__moniteur iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (hover: hover) {
  .montage__moniteur:hover .montage__lire { --r: 340px; color: var(--papier); transform: scale(1.06); }
}
/* La timeline, comme dans un logiciel de montage */
.montage__banc { position: relative; display: grid; gap: 4px; padding: 0 0 .5rem; touch-action: pan-y; user-select: none; cursor: col-resize; }
.montage__regle { position: relative; height: 1.6rem; margin-left: 3rem; border-bottom: 1px solid var(--filet); font: 500 .6rem/1 var(--mono); letter-spacing: .08em; color: var(--beton); }
.montage__regle span { position: absolute; bottom: 0; padding: 0 0 .45rem .35rem; border-left: 1px solid var(--filet); height: 100%; display: flex; align-items: end; }
.montage__piste { display: grid; grid-template-columns: 3rem 1fr; align-items: stretch; }
.montage__nom-piste { display: grid; place-items: center; font: 500 .65rem/1 var(--mono); letter-spacing: .1em; color: var(--beton); border: 1px solid var(--filet); border-right: 0; }
.montage__bloc { display: flex; gap: 2px; min-width: 0; }
.montage__clip { position: relative; display: block; min-width: 0; height: clamp(3.4rem, 6vw, 4.6rem); padding: 0; border: 0; background: var(--noir); color: var(--papier); cursor: inherit; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(242, 242, 240, .25); }
.montage__vignettes { position: absolute; inset: 0; display: flex; gap: 1px; opacity: .8; transition: opacity .3s; }
.montage__vignettes > span, .montage__vignettes > img { flex: 1; min-width: 0; height: 100%; }
.montage__vignettes img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.2); }
.montage__nom-clip { position: absolute; left: 0; right: 0; top: 0; padding: .3rem .45rem; background: var(--rouge); color: var(--noir); font: 500 .62rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.montage__clip.actif { box-shadow: inset 0 0 0 2px var(--rouge); }
.montage__clip.actif .montage__vignettes { opacity: 1; }
.montage__clip.actif img { filter: none; }
.montage__audio { position: relative; min-width: 0; height: 2.2rem; background: rgba(231, 48, 57, .14); box-shadow: inset 0 0 0 1px rgba(231, 48, 57, .45); }
.montage__audio canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.montage__zone { position: absolute; top: 0; bottom: 0; left: 3rem; right: 0; pointer-events: none; }
.montage__tete { position: absolute; top: 0; bottom: .5rem; left: 0; width: 2px; margin-left: -1px; background: var(--rouge); box-shadow: 0 0 14px rgba(231, 48, 57, .85); will-change: transform; }
.montage__tete::before { content: ""; position: absolute; top: 0; left: -.45rem; border: .45rem solid transparent; border-top: .6rem solid var(--rouge); }
.montage__tete span { position: absolute; top: -1.6rem; left: .5rem; padding: .25rem .4rem; background: var(--rouge); color: var(--noir); font: 500 .6rem/1 var(--mono); letter-spacing: .06em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.montage__consigne { margin: .25rem 0 0 3rem; font: 500 .68rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--beton); }
@media (max-width: 700px) {
  .montage__piste { grid-template-columns: 2rem 1fr; }
  .montage__regle, .montage__consigne { margin-left: 2rem; }
  .montage__zone { left: 2rem; }
  .montage__regle span:nth-child(even) { display: none; }
  .montage__lire { min-height: 2.6rem; padding: .45rem 1.1rem; font-size: .75rem; }
  .montage__osd--bas { right: 8.5rem; }
}

/* ---------- V2 Zapping ---------- */
.zapping { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.zapping__ecran { position: relative; aspect-ratio: 16 / 9; background: var(--noir); overflow: hidden; cursor: pointer; box-shadow: 0 0 0 1px rgba(242, 242, 240, .16), 0 40px 70px -45px rgba(231, 48, 57, .55); }
.zapping__cadre, .zapping__cadre img, .zapping__neige { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.zapping__neige { opacity: 0; mix-blend-mode: screen; image-rendering: pixelated; pointer-events: none; }
.zapping__ecran::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .28) 0 1px, transparent 1px 3px), linear-gradient(to top, rgba(0, 0, 0, .6), transparent 40%); }
.zapping__ecran.zap .zapping__cadre { animation: zap .42s steps(7) both; }
.zapping__ecran.zap .zapping__neige { animation: neige .42s ease-out both; }
@keyframes zap {
  0% { clip-path: inset(0 0 62% 0); transform: translateX(-6%); filter: drop-shadow(10px 0 0 rgba(231, 48, 57, .9)) drop-shadow(-10px 0 0 rgba(242, 242, 240, .5)); }
  30% { clip-path: inset(30% 0 22% 0); transform: translateX(5%) scaleY(1.2); }
  55% { clip-path: inset(8% 0 0 0); transform: translateX(-2%); filter: drop-shadow(5px 0 0 rgba(231, 48, 57, .9)); }
  100% { clip-path: inset(0); transform: none; filter: none; }
}
@keyframes neige { 0% { opacity: .95; } 100% { opacity: 0; } }
.zapping__osd { position: absolute; z-index: 2; top: 1rem; left: 1.1rem; right: 1.1rem; display: flex; justify-content: space-between; align-items: start; pointer-events: none; }
.zapping__ch { font: 500 clamp(1.4rem, 3.2vw, 2.6rem)/1 var(--mono); color: var(--papier); letter-spacing: .02em; text-shadow: 3px 0 0 rgba(231, 48, 57, .9); }
.zapping__direct { font: 500 .7rem/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--papier); }
.zapping__direct::before { content: ""; display: inline-block; width: .55em; height: .55em; margin-right: .6em; border-radius: 50%; background: var(--rouge); animation: clignote 1s steps(1) infinite; }
.zapping__lire { position: absolute; z-index: 3; right: 1.1rem; bottom: 1.1rem; }
.zapping__ecran.lecture .zapping__cadre, .zapping__ecran.lecture .zapping__osd, .zapping__ecran.lecture .zapping__lire, .zapping__ecran.lecture::after, .zapping__ecran.lecture .zapping__neige { display: none; }
.zapping__ecran iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (hover: hover) { .zapping__ecran:hover .zapping__lire { --r: 340px; color: var(--papier); transform: scale(1.06); } }
.zapping__chaines { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--filet); }
.zapping__chaines button { display: grid; grid-template-columns: auto 1fr; gap: .15rem 1.1rem; width: 100%; padding: 1.1rem 0; border: 0; border-bottom: 1px solid var(--filet); background: none; color: var(--papier); text-align: left; cursor: pointer; transition: padding .5s var(--ressort), color .3s; }
.zapping__chaines b { grid-row: 1 / span 2; font: 500 1.6rem/1 var(--mono); color: var(--beton); transition: color .3s; }
.zapping__chaines strong { font-weight: 900; text-transform: uppercase; font-size: clamp(1.2rem, 2.2vw, 1.8rem); line-height: 1; }
.zapping__chaines span { font: 500 .7rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--beton); }
.zapping__chaines button[aria-current] { padding-left: 1rem; }
.zapping__chaines button[aria-current] b { color: var(--rouge); }
.zapping__chaines button:hover strong { color: var(--rouge); }

/* ---------- V3 Pellicule ---------- */
.pellicule { position: relative; margin: 0 calc(var(--marge) * -1); padding: 3rem 0; overflow: hidden; }
.pellicule__bande { transform: rotate(-3deg); margin: 0 -4rem; padding: 1.4rem 0; background: var(--noir); box-shadow: 0 0 0 1px rgba(242, 242, 240, .12), 0 40px 60px -40px rgba(231, 48, 57, .6); position: relative; }
/* Perforations en haut et en bas */
.pellicule__bande::before, .pellicule__bande::after { content: ""; position: absolute; left: 0; right: 0; height: .7rem; background: repeating-linear-gradient(90deg, transparent 0 .9rem, var(--papier) .9rem 1.9rem, transparent 1.9rem 2.8rem); opacity: .85; }
.pellicule__bande::before { top: .35rem; }
.pellicule__bande::after { bottom: .35rem; }
.pellicule__defile { display: flex; gap: .6rem; width: max-content; will-change: transform; }
.pellicule__image, .pellicule__amorce { position: relative; flex: none; width: clamp(13rem, 24vw, 22rem); aspect-ratio: 4 / 3; }
.pellicule__image { padding: 0; border: 0; background: var(--noir); cursor: pointer; transition: transform .6s var(--ressort), z-index 0s .3s; }
.pellicule__image .rogne { position: absolute; inset: 0; }
.pellicule__image img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.2); transition: filter .5s; }
.pellicule__image .rogne img { transform: scale(1.02); }
.pellicule__image .pellicule__lire { position: absolute; left: 50%; top: 50%; translate: -50% -50%; opacity: 0; transition: opacity .3s; pointer-events: none; min-height: 2.8rem; padding: .5rem 1.2rem; font-size: .8rem; }
.pellicule__image:hover, .pellicule__image:focus-visible { z-index: 2; transform: scale(1.14); transition: transform .6s var(--ressort); }
.pellicule__image:hover img, .pellicule__image:focus-visible img { filter: none; }
.pellicule__image:hover .pellicule__lire, .pellicule__image:focus-visible .pellicule__lire { opacity: 1; }
/* Amorce de début de bobine : cercle, croix, numéro */
.pellicule__amorce { display: grid; place-items: center; background: var(--rouge); color: var(--noir); overflow: hidden; }
.pellicule__amorce::before { content: ""; position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--noir); box-shadow: 0 0 0 1.2rem transparent, inset 0 0 0 1.2rem rgba(0, 0, 0, .12); }
.pellicule__amorce::after { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--noir), var(--noir)) center / 100% 2px no-repeat, linear-gradient(var(--noir), var(--noir)) center / 2px 100% no-repeat; opacity: .6; }
.pellicule__amorce b { position: relative; z-index: 1; font: 900 clamp(3.5rem, 8vw, 6rem)/1 var(--police); }
.pellicule__amorce strong { position: absolute; z-index: 1; left: .8rem; bottom: .7rem; right: .8rem; font-weight: 900; text-transform: uppercase; font-size: 1rem; line-height: 1; }
.pellicule__amorce span { position: absolute; z-index: 1; left: .8rem; top: .7rem; font: 500 .6rem/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.pellicule__consigne { margin: 1.5rem 0 0; padding: 0 var(--marge); font: 500 .7rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--beton); }
.modale .video { position: relative; aspect-ratio: 16 / 9; background: var(--noir); }
.modale .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 900px) {
  .zapping { grid-template-columns: 1fr; }
}

/* ---------- Page Label : bande playlist ---------- */
.bande-playlist { padding: clamp(1.5rem, 3vw, 2.25rem) var(--marge); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.bande-playlist__texte { display: grid; gap: .5rem; }
.bande-playlist__texte span { font: 500 .72rem/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.bande-playlist__texte strong { font-weight: 900; text-transform: uppercase; font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: .9; letter-spacing: -.02em; }
.bande-playlist iframe { display: block; border: 0; border-radius: 12px; background: #121212; }
@media (max-width: 700px) { .bande-playlist { grid-template-columns: 1fr; } }
.clips__suite { margin-top: clamp(2rem, 4vw, 3rem); }

/* Photos du studio : couleurs naturelles (décision du user, 26/09) ; le reste du site reste en noir et blanc */
.photo--couleur { filter: contrast(1.05); }
.image-mouvement .image__nette.photo--couleur { filter: contrast(1.05) blur(0); }
.js .image-mouvement:not(.visible) .image__nette.photo--couleur { filter: contrast(1.05) blur(16px); }
.image-mouvement .image__trainee.photo--couleur, .hero__fond .hero__trainee.photo--couleur { filter: contrast(1.3) url(#flou-horizontal-fixe); }

/* ==========================================================================
   Photos du studio (visite.js) : S1 visite guidée, S2 planche contact, S3 lampe torche
   ========================================================================== */
/* Sans JS : grille simple des zones */
.visite__liste { list-style: none; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 0; display: grid; gap: 2.5rem; }
.visite__liste .zone { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: .75rem; }
.visite__liste .zone::before { content: attr(data-titre); grid-column: 1 / -1; font-weight: 900; text-transform: uppercase; font-size: 1.4rem; }
.visite__liste img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.visite--active .visite__liste { display: none; }

/* ---------- S1 Visite guidée ---------- */
.visite[data-visite="guidee"].visite--active { height: calc(100svh + (var(--n) - 1) * 70svh); margin-top: clamp(2rem, 5vw, 4rem); }
.guidee__scene { position: sticky; top: 0; height: 100svh; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: clamp(1rem, 2.5vw, 2rem); padding: 5.5rem 0 clamp(1rem, 3vw, 2.5rem); }
.guidee__tete { display: flex; align-items: flex-end; gap: clamp(1rem, 3vw, 2.5rem); border-bottom: 1px solid var(--filet); }
.guidee__tete .guidee__onglets { flex: 1; min-width: 0; border-bottom: 0; }
.guidee__passer { flex: none; display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 0 .8rem; border: 0; background: none; color: inherit; font: 500 .72rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; opacity: .55; transition: opacity .3s, color .3s; }
.guidee__passer:hover, .guidee__passer:focus-visible { opacity: 1; color: var(--rouge); }
.guidee__passer i { font-style: normal; transition: transform .3s; }
.guidee__passer:hover i { transform: translateY(3px); }
.guidee__onglets { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); border-bottom: 1px solid var(--filet); }
.guidee__onglets button { display: flex; align-items: baseline; gap: .6rem; padding: .6rem 0 .8rem; border: 0; background: none; color: inherit; font: 900 clamp(.8rem, 1.4vw, 1.1rem)/1 var(--police); text-transform: uppercase; text-align: left; cursor: pointer; opacity: .45; transition: opacity .3s; }
.guidee__onglets button b { font: 500 .7rem/1 var(--mono); letter-spacing: .1em; }
.guidee__onglets button[aria-current], .guidee__onglets button:hover { opacity: 1; }
.guidee__barre { position: absolute; left: 0; bottom: -2px; width: calc(100% / var(--n)); height: 3px; background: var(--rouge); will-change: transform; }
.guidee__fenetre { overflow: hidden; min-height: 0; }
.guidee__piste { display: flex; width: calc(var(--n) * 100%); height: 100%; will-change: transform; }
.guidee__piece { flex: 0 0 calc(100% / var(--n)); display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: clamp(1.5rem, 3.5vw, 3rem); height: 100%; min-height: 0; padding-right: clamp(1.5rem, 3.5vw, 3rem); }
.guidee__principale { position: relative; min-height: 0; background: var(--noir); overflow: hidden; }
.guidee__principale img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.guidee__principale::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px); }
.guidee__texte { display: flex; flex-direction: column; min-height: 0; }
.guidee__num { margin: 0 0 .75rem; font: 500 .8rem/1 var(--mono); letter-spacing: .12em; color: var(--rouge); }
.guidee__titre { font-size: clamp(2.2rem, 4.6vw, 4.8rem); margin-bottom: 1rem; }
.guidee__details { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: auto; min-height: 0; }
.guidee__details div { position: relative; aspect-ratio: 4 / 5; background: var(--noir); overflow: hidden; }
.guidee__details img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .visite[data-visite="guidee"].visite--active { height: calc(100svh + (var(--n) - 1) * 60svh); }
  .guidee__scene { padding-top: 5rem; padding-bottom: 5.5rem; } /* laisse la place au bouton Réserver flottant */
  .guidee__onglets button { flex-direction: column; gap: .3rem; font-size: .72rem; }
  .guidee__tete { flex-wrap: wrap; gap: 0; }
  .guidee__tete .guidee__onglets { flex-basis: 100%; }
  .guidee__passer { order: -1; margin-left: auto; padding: 0 0 .5rem; font-size: .65rem; letter-spacing: .08em; }
  .guidee__piece { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: 1rem; padding-right: 1rem; }
  .guidee__titre { font-size: clamp(1.8rem, 8vw, 2.6rem); margin-bottom: .5rem; }
  .guidee__texte .texte { font-size: 1rem; }
  .guidee__details { display: none; }
}

/* ---------- S2 Planche contact ---------- */
.planche { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 2px; margin-top: clamp(2.5rem, 5vw, 4rem); padding: 2.2rem 2px; background: var(--noir); position: relative; }
/* Perforations en haut et en bas de la planche */
.planche::before, .planche::after { content: ""; position: absolute; left: 0; right: 0; height: .6rem; background: repeating-linear-gradient(90deg, transparent 0 .9rem, var(--papier) .9rem 1.7rem, transparent 1.7rem 2.6rem); opacity: .75; }
.planche::before { top: .8rem; }
.planche::after { bottom: .8rem; }
.planche__vue { position: relative; display: block; padding: 0; border: 0; background: var(--noir); aspect-ratio: 3 / 2; cursor: zoom-in; overflow: visible; transition: transform .6s var(--ressort), z-index 0s .3s; }
.planche__vue img { width: 100%; height: 100%; object-fit: cover; transition: filter .4s; }
.planche__num { position: absolute; z-index: 2; left: .4rem; top: .35rem; font: 500 .6rem/1 var(--mono); letter-spacing: .1em; color: rgba(242, 242, 240, .8); }
.planche__cercle { position: absolute; z-index: 2; inset: -8% -6%; width: 112%; height: 116%; pointer-events: none; }
.planche__cercle path { fill: none; stroke: var(--rouge); stroke-width: 2.4; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 3px rgba(231, 48, 57, .6)); }
.planche__vue:hover, .planche__vue:focus-visible { z-index: 3; transform: scale(1.35); transition: transform .6s var(--ressort); box-shadow: 0 0 0 3px var(--papier), 0 30px 60px -20px rgba(0, 0, 0, .9); }
.planche__consigne { margin: 1rem 0 0; font: 500 .7rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .1em; opacity: .7; }
/* Visionneuse */
.visionneuse { width: min(90rem, 96vw); }
.visionneuse__corps { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; background: var(--noir); }
.visionneuse__corps img { max-width: 100%; max-height: calc(92dvh - 9rem); object-fit: contain; }
.visionneuse__fleche { position: absolute; top: 50%; translate: 0 -50%; width: 3.4rem; height: 3.4rem; border: var(--anneau) solid var(--rouge); border-radius: 50%; background: rgba(0, 0, 0, .6); color: var(--rouge); font: 900 1.4rem/1 var(--police); cursor: pointer; }
.visionneuse__fleche[data-sens="-1"] { left: 1rem; }
.visionneuse__fleche[data-sens="1"] { right: 1rem; }
.visionneuse__fleche:hover { background: var(--rouge); color: var(--noir); }
.visionneuse__legende { margin: 0; padding: .8rem 1.25rem 1rem; font: 500 .72rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: rgba(242, 242, 240, .75); }

/* ---------- S3 Lampe torche ---------- */
.torche { --x: 50%; --y: 50%; position: relative; margin-top: clamp(2.5rem, 5vw, 4rem); aspect-ratio: 3 / 2; background: var(--noir); overflow: hidden; cursor: none; touch-action: pan-y; }
.torche img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; }
.torche__nuit.photo--couleur { filter: brightness(.16) contrast(1.2); }
.torche__jour { -webkit-mask-image: radial-gradient(circle clamp(7rem, 17vw, 15rem) at var(--x) var(--y), #000 30%, rgba(0, 0, 0, .55) 60%, transparent 100%); mask-image: radial-gradient(circle clamp(7rem, 17vw, 15rem) at var(--x) var(--y), #000 30%, rgba(0, 0, 0, .55) 60%, transparent 100%); }
.torche__jour.photo--couleur { filter: brightness(1.2) contrast(1.05); }
.torche::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle clamp(7rem, 17vw, 15rem) at var(--x) var(--y), rgba(255, 240, 225, .12), transparent 70%); mix-blend-mode: screen; }
.torche__point { position: absolute; z-index: 2; width: 1.1rem; height: 1.1rem; margin: -.55rem 0 0 -.55rem; padding: 0; border: 0; border-radius: 50%; background: var(--rouge); box-shadow: 0 0 0 4px rgba(231, 48, 57, .3), 0 0 18px rgba(231, 48, 57, .9); cursor: pointer; animation: pulsation-point 1.8s ease-in-out infinite; }
@keyframes pulsation-point { 50% { box-shadow: 0 0 0 10px rgba(231, 48, 57, .12), 0 0 26px rgba(231, 48, 57, .9); } }
.torche__nom { position: absolute; left: 1.6rem; top: 50%; translate: 0 -50%; padding: .45rem .7rem; background: var(--noir); color: var(--papier); border: 1px solid rgba(242, 242, 240, .25); font: 500 .7rem/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; white-space: nowrap; opacity: 0; transition: opacity .3s, translate .5s var(--ressort); pointer-events: none; }
.torche__point.eclaire .torche__nom, .torche__point:hover .torche__nom, .torche__point:focus-visible .torche__nom { opacity: 1; translate: .3rem -50%; }
.torche__consigne { position: absolute; left: 1rem; bottom: .9rem; margin: 0; font: 500 .68rem/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: rgba(242, 242, 240, .7); pointer-events: none; }

/* ---------- Studio audio : avis clients ---------- */
.resa__confiance { margin: 1.1rem 0 0; font: 500 .75rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.resa__confiance a { display: inline-flex; align-items: center; gap: .7rem; color: var(--noir); text-decoration: none; }
.resa__confiance a:hover { text-decoration: underline; text-underline-offset: .3em; }
.resa__confiance .avis__points { color: var(--noir); font-size: .95rem; letter-spacing: .12em; }
.bande-avis { padding-block: clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.75rem clamp(2rem, 4vw, 4rem); align-items: center; }
.avis__note p { margin: 0; }
.avis__chiffre { font: 900 clamp(3.5rem, 7vw, 6rem)/.8 var(--police); letter-spacing: -.03em; }
.avis__points { color: var(--rouge); font-size: 1.15rem; letter-spacing: .14em; }
.avis__note .avis__points { margin: .55rem 0 .5rem; }
.avis__source { font: 500 .68rem/1.5 var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.avis__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.avis__liste li { padding-left: 1rem; border-left: var(--anneau) solid var(--rouge); }
.avis__liste blockquote { margin: 0; font-weight: 700; font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.35; }
.avis__liste p { margin: .6rem 0 0; font: 500 .66rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.avis__liste p span { opacity: .6; margin-left: .4rem; }
@media (max-width: 1100px) {
  .bande-avis { grid-template-columns: auto 1fr; }
  .avis__liste { grid-column: 1 / -1; grid-row: 2; }
  .avis__lien { justify-self: end; }
}
@media (max-width: 700px) {
  .avis__liste { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .avis__liste::-webkit-scrollbar { display: none; } /* pas de barre grise : l'avis suivant qui dépasse suffit à inviter au glissement */
  .avis__liste li { scroll-snap-align: start; }
}
/* Bande d'avis sur fond rouge (entre A2 Le studio et B1 Venir au studio) */
.ctx-rouge .avis__points { color: var(--noir); }
.ctx-rouge .avis__liste li { border-left-color: var(--noir); }

/* ==========================================================================
   Page Studio visuel (visuel.js) : prestations, clips, reels, photos, covers
   ========================================================================== */
.presta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; margin-top: clamp(1rem, 3vw, 2rem); }
.presta__titre { font-size: clamp(2.6rem, 5.2vw, 5.2rem); }
.presta__choix { display: grid; gap: .9rem; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.presta__choix button {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 4.6rem; padding: .9rem 1.8rem;
  border: var(--anneau) solid var(--noir); border-radius: 999px;
  background: transparent; color: var(--noir);
  font: inherit; text-align: left; cursor: pointer;
  transition: background-color .35s, color .35s, transform .6s var(--ressort);
}
.presta__choix strong { font-weight: 900; text-transform: uppercase; font-size: clamp(1.15rem, 2vw, 1.6rem); letter-spacing: -.01em; }
.presta__choix em { font-style: normal; font-weight: 900; font-size: clamp(1.1rem, 1.8vw, 1.45rem); }
.presta__choix button[aria-pressed="true"] { background: var(--noir); color: var(--papier); }
.presta__choix button[aria-pressed="true"] em { color: var(--rouge); }
@media (hover: hover) {
  .presta__choix button[aria-pressed="false"]:hover { background: rgba(0, 0, 0, .16); transform: scale(1.03); }
}
.presta__choix button:focus-visible { outline-color: var(--papier); }
.presta__fiche { padding: clamp(1.75rem, 3.5vw, 3rem); background: radial-gradient(120% 80% at 100% 0%, rgba(231, 48, 57, .45), transparent 62%), var(--noir); box-shadow: 0 40px 70px -45px rgba(0, 0, 0, .9); }
.presta__prix { margin: 0 0 1.25rem; font: 900 clamp(3rem, 6vw, 5rem)/.85 var(--police); letter-spacing: -.03em; color: var(--rouge); }
.presta__prix small { display: block; margin-bottom: .6rem; font: 500 .72rem/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--beton); }
.presta__inclus { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 2rem; padding: 0; }
.presta__inclus li { padding: .45rem .8rem; border: 1px solid rgba(242, 242, 240, .3); font: 500 .7rem/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.presta__insta { margin: 1.5rem 0 0; font: 500 .72rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.presta__insta a { color: var(--papier); text-decoration-color: var(--rouge); text-decoration-thickness: 2px; text-underline-offset: .35em; }
.presta__insta a:hover { color: var(--rouge); }

/* En-têtes et liens des galeries */
.galerie__tete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); gap: 1rem 3rem; align-items: end; margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.galerie__tete .texte { font-weight: 500; }
.galerie__suite { margin: 1.75rem 0 0; font: 500 .75rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.galerie__suite a { text-decoration-color: var(--rouge); text-decoration-thickness: 2px; text-underline-offset: .35em; }
.ctx-rouge .galerie__suite a { text-decoration-color: var(--noir); }
.galerie__suite a:hover { color: var(--rouge); }
.ctx-rouge .galerie__suite a:hover { color: var(--papier); }

/* Reels : écrans verticaux qui se lancent au survol (ou quand ils sont au centre, au doigt) */
.reels { list-style: none; margin: 0; padding: 0 0 .25rem; display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.reels::-webkit-scrollbar { display: none; }
.reel { position: relative; flex: 0 0 clamp(12rem, 21vw, 17rem); aspect-ratio: 9 / 16; background: var(--noir); overflow: hidden; scroll-snap-align: start; box-shadow: 0 30px 50px -35px rgba(0, 0, 0, .8); }
.reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.reel::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(0, 0, 0, .75), transparent 40%); }
.reel__son { position: absolute; z-index: 2; top: .75rem; right: .75rem; padding: .4rem .75rem; border: 2px solid var(--rouge); border-radius: 999px; background: rgba(0, 0, 0, .55); color: var(--rouge); font: 500 .62rem/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; cursor: pointer; }
.reel__son[aria-pressed="true"] { background: var(--rouge); color: var(--noir); }
.reel__legende { position: absolute; z-index: 2; left: .9rem; right: 4.5rem; bottom: .8rem; margin: 0; color: var(--papier); font-weight: 700; font-size: .95rem; line-height: 1.2; }
.reel__lien { position: absolute; z-index: 2; right: .9rem; bottom: .85rem; color: var(--papier); font: 500 .6rem/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; text-decoration-color: var(--rouge); text-underline-offset: .3em; }

/* Photos : mur de photos, clic = visionneuse */
.photos { list-style: none; margin: 0; padding: 0; columns: 3 16rem; column-gap: .75rem; }
.photos li { break-inside: avoid; margin-bottom: .75rem; }
.photos button { display: block; width: 100%; padding: 0; border: 0; background: var(--noir); cursor: zoom-in; overflow: hidden; }
.photos img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ressort); }
@media (hover: hover) { .photos button:hover img { transform: scale(1.05); } }

/* Covers : le vinyle sort de la pochette au survol (comme sur la page Label) */
.covers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr)); gap: 2rem 1.75rem; }
.covers li { position: relative; }
.covers li:hover { z-index: 2; }
.cover { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: zoom-in; isolation: isolate; }
.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; box-shadow: 0 1.8rem 2.5rem -1.4rem rgba(0, 0, 0, .7); }
.cover__vinyle { position: absolute; z-index: -1; top: 3%; left: 3%; width: 94%; aspect-ratio: 1; border-radius: 50%; background: repeating-radial-gradient(circle, #050505 0 2px, #161616 2px 3px); box-shadow: 0 1.5rem 2rem -1rem rgba(0, 0, 0, .8); transition: transform 1s var(--ressort); }
.cover__vinyle::before { content: ""; position: absolute; inset: 33%; border-radius: 50%; background: radial-gradient(circle, var(--noir) 0 6%, transparent 6.5%), var(--etiquette) center / cover; box-shadow: 0 0 0 3px var(--rouge); }
@media (hover: hover) { .cover:hover .cover__vinyle, .cover:focus-visible .cover__vinyle { transform: translateX(40%) rotate(50deg); } }

/* Contact */
.visuel-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 5vw, 5rem); align-items: center; }
.visuel-contact .texte { font-size: clamp(1.1rem, 1.6vw, 1.35rem); font-weight: 500; }

@media (max-width: 900px) {
  .presta, .galerie__tete, .visuel-contact { grid-template-columns: 1fr; }
  .presta__choix button { min-height: 4rem; padding: .8rem 1.3rem; }
}

/* ==========================================================================
   Planche galeries.js : présentations des photos (P1-P3) et des covers (C1-C3)
   ========================================================================== */
/* ---------- P1 Le fil rouge ---------- */
.fil__scene { position: sticky; top: 0; height: 100svh; overflow: hidden; margin: 0 calc(var(--marge) * -1); background: radial-gradient(70% 55% at 50% 0%, rgba(231, 48, 57, .35), transparent 70%), var(--noir); }
.fil__repere { position: absolute; z-index: 3; left: var(--marge); right: var(--marge); bottom: clamp(1rem, 3vw, 2rem); display: flex; align-items: center; gap: 1rem; margin: 0; font: 500 .72rem/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--beton); }
.fil__repere i { flex: 1; height: 1px; background: currentColor; opacity: .4; }
.fil__piste { position: absolute; left: 0; top: 18svh; height: 70svh; will-change: transform; }
.fil__cordon { position: absolute; left: 0; top: 0; overflow: visible; }
.fil__cordon path { fill: none; stroke: var(--rouge); stroke-width: 3; filter: drop-shadow(0 0 6px rgba(231, 48, 57, .8)); }
.fil__tirage { position: absolute; top: 40px; padding: 10px 10px 34px; border: 0; background: var(--papier); cursor: zoom-in; transform-origin: 50% 0; box-shadow: 0 30px 50px -25px rgba(0, 0, 0, .95); }
.fil__tirage img { display: block; width: 100%; height: 100%; object-fit: cover; filter: invert(1) sepia(1) saturate(4) hue-rotate(-40deg) brightness(.75); transition: filter 1.8s ease-out; }
.fil__tirage.revele img { filter: none; }
.fil__pince { position: absolute; left: 50%; top: -14px; width: 14px; height: 30px; translate: -50% 0; background: var(--noir); border: 2px solid var(--papier); }
@media (hover: hover) { .fil__tirage:hover { box-shadow: 0 0 0 3px var(--rouge), 0 30px 50px -25px rgba(0, 0, 0, .95); } }

/* ---------- P2 Viseur ---------- */
[data-galerie-variante="viseur"].galerie-active { height: calc(100svh + (var(--n) - 1) * 38svh); }
.viseur__scene { position: sticky; top: 0; height: 100svh; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 1rem; padding: 5.5rem 0 1.5rem; }
.viseur__cadre { position: relative; min-height: 0; background: var(--noir); overflow: hidden; cursor: zoom-in; box-shadow: 0 0 0 1px rgba(242, 242, 240, .18); }
.viseur__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.viseur__cadre.clic .viseur__photo { animation: mise-au-point .8s cubic-bezier(.16, 1, .3, 1); }
@keyframes mise-au-point { 0% { filter: blur(16px); transform: scale(1.04); } 60% { filter: blur(2px); } 100% { filter: blur(0); transform: none; } }
.viseur__obturateur { position: absolute; inset: 0; background: var(--noir); opacity: 0; pointer-events: none; }
.viseur__cadre.clic .viseur__obturateur { animation: obturateur .22s steps(2) both; }
@keyframes obturateur { 0% { opacity: 1; } 100% { opacity: 0; } }
.viseur__coins { position: absolute; inset: 5%; pointer-events: none; background:
  linear-gradient(var(--papier), var(--papier)) 0 0 / 28px 2px no-repeat, linear-gradient(var(--papier), var(--papier)) 0 0 / 2px 28px no-repeat,
  linear-gradient(var(--papier), var(--papier)) 100% 0 / 28px 2px no-repeat, linear-gradient(var(--papier), var(--papier)) 100% 0 / 2px 28px no-repeat,
  linear-gradient(var(--papier), var(--papier)) 0 100% / 28px 2px no-repeat, linear-gradient(var(--papier), var(--papier)) 0 100% / 2px 28px no-repeat,
  linear-gradient(var(--papier), var(--papier)) 100% 100% / 28px 2px no-repeat, linear-gradient(var(--papier), var(--papier)) 100% 100% / 2px 28px no-repeat; opacity: .85; }
.viseur__tiers { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(90deg, transparent calc(33.33% - .5px), rgba(242, 242, 240, .22) 33.33%, transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), rgba(242, 242, 240, .22) 66.66%, transparent calc(66.66% + .5px)),
  linear-gradient(0deg, transparent calc(33.33% - .5px), rgba(242, 242, 240, .22) 33.33%, transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), rgba(242, 242, 240, .22) 66.66%, transparent calc(66.66% + .5px)); }
.viseur__mise-au-point { position: absolute; left: 50%; top: 50%; width: 3.2rem; height: 3.2rem; translate: -50% -50%; border: 2px solid var(--rouge); pointer-events: none; }
.viseur__cadre.clic .viseur__mise-au-point { animation: af .6s var(--ressort); }
@keyframes af { 0% { scale: 1.6; opacity: .3; } 50% { scale: .9; opacity: 1; } 100% { scale: 1; } }
.viseur__infos { position: absolute; left: 6%; right: 6%; bottom: 6%; display: flex; justify-content: space-between; margin: 0; font: 500 .75rem/1 var(--mono); letter-spacing: .12em; color: var(--papier); pointer-events: none; }
.viseur__infos span:first-child { color: var(--rouge); }
.viseur__bande { list-style: none; margin: 0; padding: 0; display: flex; gap: 3px; }
.viseur__bande li { flex: 1; height: 6px; background: rgba(242, 242, 240, .2); transition: background-color .3s; }
.viseur__bande li.actif { background: var(--rouge); }

/* ---------- P3 Table lumineuse ---------- */
.table { position: relative; height: min(80svh, 46rem); overflow: hidden; background: radial-gradient(80% 70% at 50% 45%, #FFFFFF, var(--papier) 70%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), inset 0 0 80px rgba(0, 0, 0, .08); touch-action: pan-y; }
.table__tirage { position: absolute; left: 0; top: 0; padding: 8px 8px 26px; border: 0; background: var(--papier); cursor: grab; touch-action: none; box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .55); user-select: none; }
.table__tirage:active { cursor: grabbing; }
.table__tirage img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.table.glisse .table__tirage { transition: transform .9s var(--ressort); }
.table__outils { position: absolute; z-index: 999; right: 1rem; bottom: 1rem; display: flex; gap: .5rem; }
.table__outils .bouton { --teinte: rgba(0, 0, 0, .9); }
.table__consigne { position: absolute; z-index: 999; left: 1rem; bottom: 1.2rem; margin: 0; font: 500 .68rem/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--noir); opacity: .7; pointer-events: none; }

/* ---------- C1 Platine ---------- */
.platine { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.platine__deck { position: relative; aspect-ratio: 1.2; background: var(--noir); border: var(--anneau) solid var(--noir); box-shadow: inset 0 1px 0 rgba(242, 242, 240, .15), 0 40px 70px -40px rgba(0, 0, 0, .9); }
.platine__socle { position: absolute; left: 4%; bottom: 5%; display: flex; gap: .5rem; font: 500 .65rem/1 var(--mono); letter-spacing: .1em; color: var(--beton); }
.platine__socle span { padding: .35rem .5rem; border: 1px solid rgba(242, 242, 240, .3); }
.platine__socle span:first-child { color: var(--rouge); border-color: var(--rouge); }
.platine__disque { position: absolute; left: 6%; top: 8%; width: 70%; aspect-ratio: 1; border-radius: 50%; cursor: grab; touch-action: none; background:
  conic-gradient(from 20deg, transparent 0 8%, rgba(255, 255, 255, .12) 12%, transparent 18% 55%, rgba(255, 255, 255, .09) 62%, transparent 68%),
  repeating-radial-gradient(circle, #050505 0 2px, #161616 2px 3px); box-shadow: 0 0 0 6px #0b0b0b, 0 0 0 7px rgba(242, 242, 240, .15); }
.platine__disque:active { cursor: grabbing; }
.platine__etiquette { position: absolute; inset: 32%; border-radius: 50%; background: center / cover no-repeat; box-shadow: 0 0 0 3px var(--rouge); }
.platine__etiquette::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: var(--papier); }
.platine__bras { position: absolute; right: 7%; top: 8%; width: 4%; height: 62%; background: linear-gradient(var(--papier), #bdbdb8); transform-origin: 50% 6%; rotate: 24deg; border-radius: 2px; }
.platine__bras::before { content: ""; position: absolute; left: 50%; top: -2%; width: 260%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: var(--papier); box-shadow: 0 0 0 4px var(--noir) inset; }
.platine__bras::after { content: ""; position: absolute; left: -60%; bottom: -3%; width: 220%; height: 9%; background: var(--rouge); }
.platine__pochette { display: grid; gap: 1rem; justify-items: start; }
.platine__compte { margin: 0; font: 500 .8rem/1 var(--mono); letter-spacing: .12em; }
.platine__image { width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.platine__image img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; box-shadow: 0 2rem 3rem -1.5rem rgba(0, 0, 0, .8); }
.platine__consigne { margin: 0; font: 500 .7rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .1em; }

/* ---------- C2 Mur infini ---------- */
.mur { --flou: 0px; position: relative; height: min(78svh, 44rem); overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; background: var(--noir); -webkit-mask-image: radial-gradient(75% 75% at 50% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(75% 75% at 50% 50%, #000 55%, transparent 100%); }
.mur.tenu { cursor: grabbing; }
.mur__case { position: absolute; left: 0; top: 0; padding: 0; border: 0; background: none; cursor: inherit; filter: blur(var(--flou)); will-change: transform; }
.mur__case img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.mur__case span { position: absolute; left: 0; top: calc(100% + 4px); font: 500 .55rem/1 var(--mono); letter-spacing: .08em; color: var(--beton); }
.mur__consigne { margin: 1rem 0 0; font: 500 .7rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .1em; opacity: .75; }

/* ---------- C3 Affichage sauvage ---------- */
.affiches { list-style: none; margin: 0; padding: 1.5rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: 0; background: var(--noir); }
.affiche { position: relative; margin: -.4rem; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; }
.affiche.collee { opacity: 1; animation: coller .7s var(--delai) cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes coller { 0% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(calc(var(--rot) * 3)) scale(1.35); filter: blur(8px); } 60% { opacity: 1; filter: blur(0); } 100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1); } }
.affiche button { --coin: 0rem; position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: zoom-in; transition: --coin .5s var(--ressort); }
.affiche img { display: block; width: 100%; height: 100%; object-fit: cover; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--coin)), calc(100% - var(--coin)) 100%, 0 100%); filter: contrast(1.05) saturate(.95); }
/* Papier collé : plis et reflets de colle */
.affiche button::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--coin)), calc(100% - var(--coin)) 100%, 0 100%);
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .16) 24%, transparent 30% 62%, rgba(0, 0, 0, .18) 66%, transparent 72%), linear-gradient(8deg, transparent 40%, rgba(255, 255, 255, .1) 44%, transparent 50%), var(--grain); mix-blend-mode: overlay; }
/* Coin qui se décolle */
.affiche button::after { content: ""; position: absolute; right: 0; bottom: 0; z-index: 2; width: var(--coin); height: var(--coin); background: linear-gradient(135deg, var(--papier) 45%, rgba(0, 0, 0, .35)); clip-path: polygon(0 0, 100% 0, 0 100%); box-shadow: -3px -3px 8px rgba(0, 0, 0, .5); }
@property --coin { syntax: '<length>'; inherits: true; initial-value: 0rem; }
@media (hover: hover) { .affiche:hover { z-index: 2; } .affiche:hover button { --coin: 2.6rem; } }

@media (max-width: 900px) {
  .platine { grid-template-columns: 1fr; }
  .fil__piste { top: 16svh; }
}

/* ---------- Studio visuel : photos dans le viseur (P2 sans défilement épinglé) ---------- */
.viseur { display: grid; gap: 1rem; }
.viseur .viseur__cadre { display: block; width: 100%; aspect-ratio: 3 / 2; max-height: 78svh; padding: 0; border: 0; color: inherit; font: inherit; touch-action: pan-y; user-select: none; }
.viseur .viseur__infos { display: flex; }
.viseur__commandes { display: flex; align-items: center; justify-content: center; gap: 1.25rem; }
/* Déclencheur : gros bouton rond, anneau du logo */
.viseur__declencheur { position: relative; width: 4.2rem; height: 4.2rem; padding: 0; border: var(--anneau) solid var(--rouge); border-radius: 50%; background: var(--noir); cursor: pointer; transition: transform .5s var(--ressort); }
.viseur__declencheur span { position: absolute; inset: 22%; border-radius: 50%; background: var(--rouge); transition: inset .25s var(--ressort); }
.viseur__declencheur:hover { transform: scale(1.08); }
.viseur__declencheur:active span { inset: 30%; }
.viseur__vignettes { list-style: none; margin: 0; padding: 0 0 .25rem; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.viseur__vignettes::-webkit-scrollbar { display: none; }
.viseur__vignettes button { position: relative; display: block; width: 4.6rem; height: 3.1rem; flex: none; padding: 0; border: 0; background: var(--noir); cursor: pointer; opacity: .45; transition: opacity .3s; }
.viseur__vignettes img { width: 100%; height: 100%; object-fit: cover; }
.viseur__vignettes button:hover, .viseur__vignettes button[aria-current] { opacity: 1; }
.viseur__vignettes button[aria-current] { box-shadow: 0 0 0 2px var(--rouge); }
/* Jauge du diaporama sur la vignette en cours */
.viseur__vignettes i { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--rouge); }
.avance .viseur__vignettes button[aria-current] i { animation: jauge 4s linear both; }
.viseur:hover .viseur__vignettes i { animation-play-state: paused; }
@keyframes jauge { to { width: 100%; } }
/* Mur de covers sur la section rouge : le noir du mur s'éteint dans le rouge */
.ctx-rouge .mur__case span { color: rgba(0, 0, 0, .7); }
@media (max-width: 700px) { .viseur .viseur__cadre { aspect-ratio: 4 / 5; } } /* sur téléphone, viseur en portrait : les photos de shooting le sont surtout */
/* Viseur sur la section rouge (B1 Photos) : le rouge des repères passe au noir pour rester visible */
.ctx-rouge .viseur__declencheur { border-color: var(--noir); }
.ctx-rouge .viseur__declencheur span { background: var(--rouge); box-shadow: 0 0 0 3px var(--noir); }
.ctx-rouge .viseur__vignettes button[aria-current] { box-shadow: 0 0 0 3px var(--noir); }
.ctx-rouge .viseur__vignettes i { background: var(--noir); }
.ctx-rouge .viseur__vignettes button { opacity: .6; }
.ctx-rouge .viseur .viseur__cadre { box-shadow: 0 40px 70px -45px rgba(0, 0, 0, .9); }
/* Vignettes non choisies : assombries plutôt que transparentes (sur le rouge, la transparence les rosissait) */
.viseur__vignettes button, .ctx-rouge .viseur__vignettes button { opacity: 1; filter: brightness(.45) grayscale(.3); transition: filter .3s; }
.viseur__vignettes button:hover, .viseur__vignettes button[aria-current], .ctx-rouge .viseur__vignettes button[aria-current] { filter: none; }


/* ==========================================================================
   Formulaires de contact (formulaire.js)
   ========================================================================== */
.formulaire__case { display: flex; align-items: flex-start; gap: .75rem; font-size: .95rem; line-height: 1.4; cursor: pointer; }
.formulaire__case input { flex: none; width: 1.25rem; height: 1.25rem; margin: .1rem 0 0; appearance: none; color: inherit; border: 2px solid currentColor; border-radius: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.formulaire__case input:checked { background: var(--rouge); border-color: var(--rouge); }
.formulaire__case input:checked::after { content: ""; width: .35rem; height: .65rem; border: solid var(--noir); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.formulaire__case input:focus-visible { outline: 2px solid var(--rouge); outline-offset: 3px; }
/* Champ piège : invisible pour les humains, rempli par les robots */
.formulaire__piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulaire__robot:empty { display: none; }
.formulaire__pied { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: .25rem; }
.formulaire__pied .bouton { margin-top: 0; }
.formulaire__mention { flex: 1 1 16rem; margin: 0; font: 500 .68rem/1.5 var(--mono); letter-spacing: .04em; opacity: .75; }
.formulaire__mention a { color: inherit; text-decoration-color: var(--rouge); text-underline-offset: .25em; }
.formulaire__statut { margin: 0; font-weight: 700; }
.formulaire__statut:empty { display: none; }
.formulaire__statut[data-type="erreur"] { color: var(--rouge); }
.formulaire__statut[data-type="ok"] { padding: 1rem 1.25rem; border-left: var(--anneau) solid var(--rouge); }
.formulaire.envoye > :not(.formulaire__statut) { display: none; }
/* Fenêtre de contact (fond noir) : champs en clair */
.modale--contact { width: min(46rem, 94vw); }
.modale--contact .modale__corps { padding: clamp(1.25rem, 3vw, 2rem); }
.modale--contact .champ input, .modale--contact .champ select, .modale--contact .champ textarea { color: var(--papier); border-color: rgba(242, 242, 240, .4); }
.modale--contact .champ select { background-image: linear-gradient(45deg, transparent 50%, var(--papier) 50%), linear-gradient(135deg, var(--papier) 50%, transparent 50%); }
.modale--contact .champ select option { color: var(--noir); }
.modale--contact .champ input:hover, .modale--contact .champ select:hover, .modale--contact .champ textarea:hover { border-color: var(--papier); }
.modale--contact .champ input::placeholder, .modale--contact .champ textarea::placeholder { color: rgba(242, 242, 240, .45); }
.modale--contact .champ textarea { min-height: 7rem; }
.pied__bas a { color: inherit; }

/* Pages de texte (confidentialité, mentions légales) */
.page-texte { padding-top: clamp(7rem, 12vw, 9rem); }
.page-texte__corps { max-width: 44rem; margin-top: clamp(2rem, 4vw, 3rem); }
.page-texte__corps .sous-titre { margin: 2.5rem 0 1rem; }
.page-texte__corps .texte + .texte { margin-top: 1em; }
.page-texte__corps a { color: inherit; text-decoration-color: var(--rouge); text-decoration-thickness: 2px; text-underline-offset: .25em; }
.page-texte .note { color: rgba(0, 0, 0, .6); margin-top: 2.5rem; }

/* ==========================================================================
   Kit du mois (kit-du-mois.js, dans le module du kit gratuit) : MPC jouable ; les styles .jouer, .kit-contenu,
   .kit-licence, .telecharger et .questions viennent de l'ancienne page Drumkit (archivée)
   ========================================================================== */
.drumkit__reste { display: block; margin-top: .4rem; color: var(--rouge); font-weight: 700; }
.jouer { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.jouer__texte .texte { margin-top: 1.25rem; font-weight: 500; }
.jouer__clavier { margin: 1.25rem 0 0; font: 500 .72rem/1.6 var(--mono); text-transform: uppercase; letter-spacing: .1em; }

/* La machine : noir, anneau du logo, pads qui s'allument en rouge */
.mpc { display: grid; gap: 1rem; padding: clamp(1rem, 2.5vw, 1.6rem); background: radial-gradient(90% 60% at 100% 0%, rgba(231, 48, 57, .25), transparent 60%), var(--noir); color: var(--papier); border: var(--anneau) solid var(--noir); box-shadow: inset 0 1px 0 rgba(242, 242, 240, .14), 0 50px 80px -45px rgba(0, 0, 0, .95); user-select: none; }
.mpc__haut { display: flex; gap: 1rem; align-items: stretch; }
.mpc__ecran { flex: 1; display: grid; gap: .35rem; padding: .8rem 1rem; background: #050505; border: 1px solid rgba(231, 48, 57, .45); box-shadow: inset 0 0 22px rgba(231, 48, 57, .18); font-family: var(--mono); min-width: 0; }
.mpc__nom { color: var(--rouge); font-size: clamp(.85rem, 1.6vw, 1.05rem); letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0 8px rgba(231, 48, 57, .7); }
.mpc__info { font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; color: var(--beton); }
.mpc__marque { display: grid; place-items: center; gap: .3rem; padding: 0 .4rem; color: var(--rouge); font: 500 .6rem/1 var(--mono); letter-spacing: .14em; }
.mpc__marque .logo-marque { width: 3rem; }
.mpc__pas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(16, 1fr); gap: 4px; }
.mpc__pas li { height: 6px; background: rgba(242, 242, 240, .14); }
.mpc__pas li:nth-child(4n + 1) { background: rgba(242, 242, 240, .28); }
.mpc__pas li.actif { background: var(--rouge); box-shadow: 0 0 10px rgba(231, 48, 57, .9); }
.mpc__pads { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.4rem, 1vw, .7rem); }
.pad { position: relative; aspect-ratio: 1; padding: .5rem; border: 1px solid rgba(242, 242, 240, .16); border-radius: 4px; background: linear-gradient(160deg, #141414, #070707); color: var(--papier); cursor: pointer; touch-action: manipulation; display: flex; flex-direction: column; justify-content: space-between; text-align: left; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .6), inset 0 1px 0 rgba(242, 242, 240, .08); transition: border-color .2s; }
.pad:hover { border-color: rgba(231, 48, 57, .7); }
.pad:focus-visible { outline: 2px solid var(--rouge); outline-offset: 2px; }
.pad__touche { font: 500 .62rem/1 var(--mono); color: var(--beton); }
.pad__nom { font: 900 clamp(.62rem, 1.2vw, .82rem)/1.1 var(--police); text-transform: uppercase; letter-spacing: .02em; }
.pad.frappe { animation: frappe .38s ease-out; }
@keyframes frappe {
  0% { background: var(--rouge); color: var(--noir); transform: scale(.94); box-shadow: 0 0 34px rgba(231, 48, 57, .9), inset 0 0 0 1px var(--rouge); }
  100% { transform: none; }
}
.mpc__commandes { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.mpc__commandes [data-beat][aria-pressed="true"] { --r: 340px; color: var(--papier); }
.mpc__bpm { display: inline-flex; align-items: center; gap: .6rem; font: 500 .72rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--beton); }
.mpc__bpm b { color: var(--papier); font-size: .95rem; font-variant-numeric: tabular-nums; }
.mpc__bpm button { width: 2.2rem; height: 2.2rem; border: 2px solid var(--rouge); border-radius: 50%; background: none; color: var(--rouge); font: 900 1rem/1 var(--police); cursor: pointer; }
.mpc__bpm button:hover { background: var(--rouge); color: var(--noir); }

/* Contenu du kit */
.kit-contenu { list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0; border-top: 1px solid var(--filet); }
.kit-contenu li { display: grid; gap: .3rem; padding: 1.1rem 1rem 1.3rem 0; border-bottom: 1px solid var(--filet); }
.kit-contenu b { font: 900 clamp(2.4rem, 5vw, 3.8rem)/.9 var(--police); letter-spacing: -.03em; }
.kit-contenu span { font: 500 .72rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.kit-contenu__total b { color: var(--rouge); }
.kit-licence { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--noir); color: var(--papier); }
.kit-licence__titre { margin: 0 0 1rem; font: 500 .72rem/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--rouge); }
.kit-licence ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .8rem; }
.kit-licence li { padding-left: 1.4rem; position: relative; }
.kit-licence li::before { content: ""; position: absolute; left: 0; top: .5em; width: .6rem; height: .6rem; border-radius: 50%; background: var(--rouge); }

/* Téléchargement (fond noir) */
.telecharger { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.telecharger .texte { margin-top: 1.25rem; font-weight: 500; }
.telecharger__reste { margin: 1.25rem 0 0; font: 500 .75rem/1.5 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--rouge); }
.formulaire--sombre .champ input, .formulaire--sombre .champ textarea { color: var(--papier); border-color: rgba(242, 242, 240, .4); }
.formulaire--sombre .champ input:hover { border-color: var(--papier); }

/* Questions */
.questions { margin: clamp(2rem, 4vw, 3rem) 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 0 clamp(2rem, 4vw, 3.5rem); }
.questions div { padding: 1.25rem 0; border-top: 1px solid var(--filet); }
.questions dt { font-weight: 900; text-transform: uppercase; font-size: 1.1rem; }
.questions dd { margin: .5rem 0 0; }

@media (max-width: 900px) {
  .jouer, .telecharger { grid-template-columns: 1fr; }
}
.telecharger__alerte { grid-column: 1 / -1; margin: 0 0 1.5rem; padding: 1rem 1.25rem; border-left: var(--anneau) solid var(--rouge); font-weight: 700; }
/* Choix du style du beat de démo (remplace le réglage du tempo) */
.mpc__styles { display: inline-flex; border: 2px solid rgba(242, 242, 240, .25); border-radius: 999px; padding: 3px; }
.mpc__styles button { padding: .5rem .95rem; border: 0; border-radius: 999px; background: none; color: var(--papier); font: 900 .72rem/1 var(--police); text-transform: uppercase; letter-spacing: .04em; cursor: pointer; transition: background-color .25s, color .25s; }
.mpc__styles button:hover { color: var(--rouge); }
.mpc__styles button[aria-pressed="true"] { background: var(--rouge); color: var(--noir); }

/* ==========================================================================
   Studio audio : B3 Déroulé de session (« Prêt à poser »)
   ========================================================================== */
.session__tete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); gap: 1rem 3rem; align-items: end; }
.session__tete .texte { font-weight: 500; }
.session__intertitre { margin: clamp(3rem, 6vw, 4.5rem) 0 1.5rem; }
.session__avant, .session__deroule { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); gap: 0; border-top: 1px solid var(--filet); }
.session__avant li, .session__deroule li { display: grid; align-content: start; gap: .5rem; padding: 1.25rem 1.25rem 1.5rem 0; border-bottom: 1px solid var(--filet); }
.session__avant b, .session__deroule b { font: 500 .8rem/1 var(--mono); letter-spacing: .1em; color: var(--rouge); }
.session__avant strong, .session__deroule strong { font-weight: 900; text-transform: uppercase; font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1; }
.session__avant span, .session__deroule span { font-size: 1rem; line-height: 1.45; }
.session__deroule { margin-top: 1.5rem; }

/* La timeline façon logiciel d'enregistrement : la règle = la structure du morceau.
   L'enregistrement se fait en 3 passages, comme en vraie session : les leads, puis les backs, puis les ambiances. */
.daw { --balayage: 3.2s; position: relative; display: grid; gap: 4px; padding: 1rem 1rem 1.1rem; background: var(--noir); color: var(--papier); box-shadow: 0 40px 70px -45px rgba(0, 0, 0, .9); }
.daw__etat { position: relative; height: 1.4rem; margin-left: 6.5rem; font: 500 .66rem/1.4rem var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.daw__etat span { position: absolute; left: 0; top: 0; opacity: 0; white-space: nowrap; }
.daw__etat span[style]::before, .daw__etat-fin::before { content: ""; display: inline-block; width: .55em; height: .55em; margin-right: .6em; border-radius: 50%; background: var(--rouge); vertical-align: .05em; }
.daw__etat span[style] { color: var(--rouge); }
.daw__etat-fin::before { border-radius: 0; background: var(--papier); }
.daw__etat-prete { opacity: 1; color: var(--beton); }
.daw__regle { position: relative; height: 1.6rem; margin-left: 6.5rem; border-bottom: 1px solid rgba(242, 242, 240, .2); }
.daw__regle span { position: absolute; left: calc(var(--d) * 100%); bottom: 0; padding: 0 0 .45rem .4rem; border-left: 1px solid rgba(242, 242, 240, .3); height: 100%; display: flex; align-items: end; font: 500 .62rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--beton); white-space: nowrap; }
.daw__regle abbr { text-decoration: none; display: none; }
.daw__regle em { font-style: normal; }
@media (max-width: 1080px) { .daw__regle em { display: none; } .daw__regle abbr { display: inline; } } /* règle étroite : I, C1, R, C2, R */
.daw__piste { display: grid; grid-template-columns: 6.5rem 1fr; }
.daw__piste b { position: relative; display: flex; align-items: center; padding: 0 .75rem; border: 1px solid rgba(242, 242, 240, .15); border-right: 0; font: 500 .65rem/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--beton); }
/* Point rouge « armé » sur la piste qu'on enregistre */
.daw__piste b::after { content: ""; position: absolute; right: .55rem; top: 50%; width: .5rem; height: .5rem; margin-top: -.25rem; border-radius: 50%; background: var(--rouge); box-shadow: 0 0 8px rgba(231, 48, 57, .9); opacity: 0; }
.daw__zone { position: relative; height: 2.8rem; background: repeating-linear-gradient(90deg, rgba(242, 242, 240, .05) 0 1px, transparent 1px 6.25%); border: 1px solid rgba(242, 242, 240, .1); }
/* Un clip audio : fond rouge + forme d'onde en rayures, révélé de gauche à droite quand la tête de lecture passe */
.daw__clip { position: absolute; top: 3px; bottom: 3px; left: calc(var(--d) * 100%); width: calc((var(--f) - var(--d)) * 100%); background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .35) 0 2px, transparent 2px 5px), linear-gradient(180deg, transparent 20%, rgba(0, 0, 0, .25) 50%, transparent 80%), var(--rouge); box-shadow: inset 1px 0 0 rgba(0, 0, 0, .6); }
.js .daw__clip { clip-path: inset(0 100% 0 0); }
.js .daw__clip.daw__clip--instru, .daw__clip--instru { clip-path: none; background: repeating-linear-gradient(90deg, rgba(242, 242, 240, .3) 0 2px, transparent 2px 6px), rgba(242, 242, 240, .12); }
.daw__piste[style*="--p:1"] .daw__clip { top: 22%; bottom: 22%; opacity: .9; } /* backs : plus fins, sous les fins de phrase */
.daw__piste[style*="--p:2"] .daw__clip { top: 30%; bottom: 30%; }                /* ambiances : petits gimmicks */
.daw.en-rec .daw__clip:not(.daw__clip--instru) { animation: daw-rec calc((var(--f) - var(--d)) * var(--balayage)) linear calc((var(--p) + var(--d)) * var(--balayage)) forwards; }
@keyframes daw-rec { to { clip-path: inset(0 0 0 0); } }
.daw.en-rec .daw__piste[style] b::after, .daw.en-rec .daw__etat span[style] { animation: daw-allume var(--balayage) linear calc(var(--p) * var(--balayage)); }
@keyframes daw-allume { 0%, 100% { opacity: 1; } }
.daw.en-rec .daw__etat-prete { opacity: 0; }
.daw.en-rec .daw__etat-fin { animation: daw-fin .3s linear calc(3 * var(--balayage)) forwards; }
@keyframes daw-fin { to { opacity: 1; } }
.daw__zone--tete { position: absolute; top: calc(1rem + 1.4rem + 4px); bottom: 1.1rem; left: calc(1rem + 6.5rem); right: 1rem; height: auto; background: none; border: 0; pointer-events: none; }
.daw__tete { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--rouge); box-shadow: 0 0 12px rgba(231, 48, 57, .9); opacity: 0; }
.daw__tete::before { content: ""; position: absolute; top: 0; left: -.4rem; border: .4rem solid transparent; border-top: .55rem solid var(--rouge); }
.daw.en-rec .daw__tete { animation: daw-tete var(--balayage) linear 3 forwards; }
@keyframes daw-tete { 0% { left: 0; opacity: 1; } 97% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

/* Mixage / mastering après la session */
.session__mix { margin-top: 2rem; padding: clamp(1.25rem, 3vw, 1.75rem); border-left: var(--anneau) solid var(--rouge); background: var(--noir); color: var(--papier); }
.session__mix-titre { margin: 0 0 .6rem; font-weight: 900; text-transform: uppercase; font-size: clamp(1.1rem, 2vw, 1.5rem); line-height: 1.05; }
.session__mix .texte { max-width: 62ch; }

/* Lexique */
.lexique { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 0 clamp(1.5rem, 3vw, 2.5rem); border-top: 1px solid var(--filet); }
.lexique div { padding: 1rem 0 1.1rem; border-bottom: 1px solid var(--filet); }
.lexique dt { font: 500 .78rem/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--rouge); }
.lexique dd { margin: .45rem 0 0; line-height: 1.45; }
.session__fin { margin-top: clamp(2rem, 4vw, 3rem); }


@media (max-width: 900px) {
  .session__tete { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .daw { padding: .75rem; }
  .daw__piste { grid-template-columns: 4.6rem 1fr; }
  .daw__regle, .daw__etat { margin-left: 4.6rem; }
  .daw__zone--tete { left: calc(.75rem + 4.6rem); right: .75rem; top: calc(.75rem + 1.4rem + 4px); bottom: .75rem; }
  .daw__piste b { padding: 0 .4rem; font-size: .55rem; letter-spacing: .04em; }
}

/* ---------- Page liens (bio Instagram) : une colonne, pensée pour le téléphone ---------- */
body.page-liens { background: radial-gradient(90% 55% at 50% 0%, rgba(231, 48, 57, .3), transparent 70%), var(--noir); }
.liens { min-height: 100svh; max-width: 32rem; margin: 0 auto; padding: 2.5rem 1rem 2rem; display: grid; gap: 1.75rem; align-content: start; background: transparent; }
.liens__tete { display: grid; justify-items: center; gap: .45rem; text-align: center; }
.liens__logo { display: block; width: 6.5rem; color: var(--rouge); }
.liens__logo .logo-marque { width: 100%; }
.liens__nom { margin: .35rem 0 0; font: 900 clamp(2rem, 9vw, 2.6rem)/.9 var(--police); text-transform: uppercase; letter-spacing: -.02em; }
.liens__repere { margin: 0; font: 500 .7rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--beton); }
/* « À la une » : la dernière actu (souvent la dernière sortie), en rouge plein */
.une { position: relative; padding: 1rem 1rem 1.25rem; background: var(--rouge); color: var(--noir); overflow: hidden; isolation: isolate; }
.une::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--grain); opacity: .5; mix-blend-mode: overlay; pointer-events: none; }
.une__tete { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; font: 500 .7rem/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.une__tete i { flex: 1; height: 1px; background: currentColor; opacity: .4; }
.une__image { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; margin-bottom: 1rem; box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .7); }
.une__image[hidden] { display: none; }
.une__statut { margin: 0 0 .3rem; font-weight: 700; }
.une__titre { margin: 0; font-size: clamp(2.6rem, 13vw, 3.6rem); overflow-wrap: anywhere; }
.une__credit { margin: .45rem 0 1.15rem; font-weight: 500; }
.une__boutons { display: flex; flex-wrap: wrap; gap: .6rem; }
.une__boutons .bouton { min-height: 2.9rem; padding: calc(.7rem - var(--anneau)) calc(1.3rem - var(--anneau)); font-size: .85rem; }
.liens__liste { display: grid; gap: .75rem; }
.liens__liste .bouton { display: flex; width: 100%; white-space: normal; text-align: center; }
.liens__pied { display: grid; justify-items: center; gap: .35rem; padding-top: .5rem; font: 500 .7rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--beton); text-align: center; }
.liens__pied a { color: var(--papier); text-decoration: none; }
.liens__pied a:hover { color: var(--rouge); }
/* Arrivée en cascade, chaque bloc avec un petit rebond */
.js .liens > *, .js .liens__liste > * { animation: liens-entree .9s var(--ressort) both; }
.js .liens > :nth-child(2) { animation-delay: .08s; }
.js .liens__liste > :nth-child(1) { animation-delay: .16s; }
.js .liens__liste > :nth-child(2) { animation-delay: .21s; }
.js .liens__liste > :nth-child(3) { animation-delay: .26s; }
.js .liens__liste > :nth-child(4) { animation-delay: .31s; }
.js .liens__liste > :nth-child(5) { animation-delay: .36s; }
.js .liens__liste > :nth-child(6) { animation-delay: .41s; }
.js .liens > :nth-child(4) { animation-delay: .5s; }
@keyframes liens-entree {
  0% { opacity: 0; transform: translateY(18px); filter: blur(6px); }
  60% { opacity: 1; transform: translateY(-3px); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ---------- Page 404 « Hors du fil » : le fil rouge se tend puis casse ---------- */
.hors-fil { background: radial-gradient(70% 55% at 50% 100%, rgba(231, 48, 57, .28), transparent 70%), var(--noir); }
.hors-fil__tc { margin-left: auto; color: var(--papier); font-variant-numeric: tabular-nums; }
.hors-fil__tc::before { content: ""; display: inline-block; width: .55em; height: .55em; margin-right: .6em; border-radius: 50%; background: var(--rouge); opacity: .35; } /* figé : ne clignote plus */
.fil-coupe { display: flex; align-items: center; height: 2.5rem; margin: clamp(1.25rem, 4vw, 2.5rem) calc(var(--marge) * -1) 0; }
.fil-coupe i { flex: 1; height: var(--anneau); background: var(--rouge); box-shadow: 0 0 18px rgba(231, 48, 57, .55); }
/* Bouts effilochés à la coupure ; à l'arrêt, les deux moitiés pendent un peu */
.fil-coupe i:first-child { transform-origin: left center; clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 50%, 100% 100%, 0 100%); transform: translateX(-1.25rem) rotate(2.5deg); }
.fil-coupe i:last-child { transform-origin: right center; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 7px 50%); transform: translateX(1.25rem) rotate(-3.5deg); }
.js .fil-coupe i:first-child { animation: fil-gauche 2.2s var(--ressort) .9s both; }
.js .fil-coupe i:last-child { animation: fil-droite 2.2s var(--ressort) .9s both; }
@keyframes fil-gauche {
  0% { transform: scaleX(0); }
  40% { transform: scaleX(1); }
  50% { transform: translateX(0) rotate(0); }
  62% { transform: translateX(-1.6rem) rotate(6deg); }
  78% { transform: translateX(-1.1rem) rotate(1.5deg); }
  100% { transform: translateX(-1.25rem) rotate(2.5deg); }
}
@keyframes fil-droite {
  0% { transform: scaleX(0); }
  40% { transform: scaleX(1); }
  50% { transform: translateX(0) rotate(0); }
  62% { transform: translateX(1.6rem) rotate(-7deg); }
  78% { transform: translateX(1.1rem) rotate(-2deg); }
  100% { transform: translateX(1.25rem) rotate(-3.5deg); }
}

/* ---------- Sons & plugins : deux baies de rack en verre fumé (sons-plugins.js) ---------- */
.sp-consigne { margin: 0 0 1.5rem; font: 500 .68rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--beton); }
.baies { position: relative; isolation: isolate; display: grid; gap: 2.5rem; }
.baies::before { content: ""; position: absolute; inset: -6% -4%; z-index: -1; background: radial-gradient(40% 30% at 30% 20%, rgba(231, 48, 57, .28), transparent 70%), radial-gradient(40% 35% at 75% 75%, rgba(231, 48, 57, .22), transparent 70%); filter: blur(30px); pointer-events: none; }
.baie { position: relative; display: grid; padding: 0 1.15rem; border: 1px solid rgba(242, 242, 240, .12); border-radius: 14px; overflow: hidden; background: rgba(6, 6, 6, .55); -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); box-shadow: inset 0 1px 0 rgba(242, 242, 240, .14), 0 40px 80px -40px #000; }
/* Montants en verre fumé, une fine ligne de lumière au centre */
.baie::before, .baie::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1.15rem; background: linear-gradient(90deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015) 45%, rgba(0, 0, 0, .25)), linear-gradient(rgba(231, 48, 57, .16), rgba(231, 48, 57, .16)) center / 1px 100% no-repeat; }
.baie::before { left: 0; border-right: 1px solid rgba(242, 242, 240, .08); }
.baie::after { right: 0; border-left: 1px solid rgba(242, 242, 240, .08); }
.module[hidden] { display: none; }
.module__avant { position: relative; z-index: 1; display: grid; grid-template-columns: 1.9rem minmax(0, 1fr) auto 1.9rem; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; box-shadow: 0 1px 0 rgba(242, 242, 240, .09); transition: box-shadow .7s var(--ressort); }
.module.ouverte .module__avant { box-shadow: 0 1px 0 rgba(231, 48, 57, .5), inset 0 0 40px -20px rgba(231, 48, 57, .6); }
/* Oreilles en verre avec une barre de LED, qui s'allume au module survolé ou ouvert */
.oreille { position: relative; display: flex; justify-content: center; padding: .7rem 0; background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .01)); }
.oreille::before { content: ""; width: 3px; border-radius: 3px; background: rgba(231, 48, 57, .16); transition: background .35s, box-shadow .35s; }
.module__avant:hover .oreille::before, .module__avant:focus-visible .oreille::before, .module.ouverte .oreille::before { background: var(--rouge); box-shadow: 0 0 10px var(--rouge), 0 0 24px rgba(231, 48, 57, .6); }
.module__face { position: relative; display: flex; align-items: stretch; min-height: 5.5rem; overflow: hidden; }
.module__face > * { flex: 1; }
/* Colonne de droite, la même pour tous : badge, type, prix */
.module__info { display: grid; align-content: center; justify-items: end; gap: .3rem; width: 12.5rem; padding: .85rem 1.75rem; border-left: 1px solid rgba(242, 242, 240, .08); background: rgba(255, 255, 255, .025); text-align: right; }
.module__badge { font-style: normal; color: var(--rouge); }
.module__type { font: 500 .62rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--beton); }
.module__prix { font: 900 1.5rem/1 var(--police); color: var(--papier); }
.module__prix--gratuit { color: var(--rouge); }
/* Décompte du kit gratuit, sous « Gratuit » ; rouge qui pulse le dernier jour */
.module__reste { display: grid; justify-items: end; gap: .15rem; margin-top: .25rem; font: 500 .6rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--beton); font-variant-numeric: tabular-nums; }
.module__reste[hidden] { display: none; }
.module__reste b { font-weight: 500; font-size: .72rem; color: var(--papier); white-space: nowrap; }
.module__reste--urgent b { color: var(--rouge); animation: clignote 1s steps(1) infinite; }
/* Plaque de baie : verre dépoli, diode rouge, lettres espacées */
.module__avant--plaque { grid-template-columns: 1.9rem minmax(0, 1fr) 1.9rem; cursor: default; }
.module--plaque .oreille::before { background: rgba(242, 242, 240, .1); box-shadow: none; }
.plaque { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; padding: .85rem 1.4rem .85rem 2.4rem; background: rgba(242, 242, 240, .06); box-shadow: inset 0 -1px 0 rgba(242, 242, 240, .1); }
.plaque::before { content: ""; position: absolute; left: 1.4rem; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--rouge); box-shadow: 0 0 8px var(--rouge); }
.plaque strong { font: 900 1.2rem/1 var(--police); text-transform: uppercase; letter-spacing: .3em; }
.plaque small { font: 500 .62rem/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--beton); }
/* Drumkits : boîte à rythmes (écran LCD rouge), en attendant l'identité visuelle de chaque kit */
.boite { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: clamp(.8rem, 3vw, 2rem); padding: .6rem clamp(1rem, 3vw, 2rem); background: rgba(0, 0, 0, .45); }
.boite--premium { background: linear-gradient(180deg, rgba(42, 8, 10, .6), rgba(0, 0, 0, .5)); }
.boite__lcd { padding: .5rem .8rem; min-width: 9.5rem; background: linear-gradient(#170203, #0a0101); border: 2px solid #000; box-shadow: inset 0 0 12px rgba(231, 48, 57, .25), 0 1px 0 rgba(255, 255, 255, .08); font: 500 .62rem/1.4 var(--mono); letter-spacing: .14em; color: rgba(231, 48, 57, .7); text-transform: uppercase; }
.boite__lcd strong { display: block; font: 700 1.25rem/1.1 var(--mono); letter-spacing: .08em; color: var(--rouge); text-shadow: 0 0 8px rgba(231, 48, 57, .8); }
.boite__marque { text-align: right; font: 900 .9rem/1 var(--police); text-transform: uppercase; color: var(--papier); }
.boite__marque small { display: block; margin-top: .35rem; font: 500 .58rem/1 var(--mono); letter-spacing: .16em; color: var(--rouge); }
/* En-tête Le Fil Rouge des plugins : noir à braises rouges, logo rouge, titre Jost 900, « LE FIL ROUGE » en mono */
.et { position: relative; display: flex; align-items: center; gap: .95rem; padding: 0 1.4rem; overflow: hidden; background: radial-gradient(60% 140% at 88% -30%, rgba(231, 48, 57, .26), rgba(231, 48, 57, .07) 40%, transparent 70%), rgba(0, 0, 0, .55); }
.et::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .35; mix-blend-mode: overlay; pointer-events: none; }
.et__logo { flex: none; width: 2.2rem; color: var(--rouge); }
.et__titre { position: relative; display: inline-flex; font: 900 clamp(1.3rem, 2.5vw, 1.85rem)/1 var(--police); letter-spacing: .04em; color: var(--papier); white-space: nowrap; }
.et__titre > span { display: inline-block; transform-origin: 50% 55%; }
.et__sous { font: 500 .7rem/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--beton); white-space: nowrap; }
/* DELIRIUM : lettres de travers, goutte rouge sous le M, glitch de police */
.et__goutte { position: absolute; left: 62%; top: 92%; width: 6px; height: 8px; background: var(--rouge); border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; transform-origin: 50% 0; animation: goutte 8s ease-in infinite; }
.module__avant:hover .et__goutte { animation-duration: 3s; }
@keyframes goutte {
  0%, 8% { transform: translateY(-3px) scale(.2); opacity: 0; }
  45% { transform: translateY(0) scale(.8); opacity: 1; }
  62% { transform: translateY(1px) scale(1, 1.25); opacity: 1; }
  74% { transform: translateY(16px) scale(.8, 1.3); opacity: .8; }
  80%, 100% { transform: translateY(20px) scale(.6); opacity: 0; }
}
.et-glitch { text-shadow: -2px 0 rgba(231, 48, 57, .95), 2px 0 rgba(242, 242, 240, .3); }
/* EUWZZ : le mot posé sur la courbe de vitesse, remplissage rouge et point blanc */
.euw { position: relative; display: inline-block; padding: 0 6px 22px; margin-top: 14px; }
.euw .et__titre { position: relative; z-index: 1; }
.euw .euw__rouge { position: absolute; z-index: 2; left: 6px; top: 0; color: var(--rouge); opacity: 0; clip-path: inset(0 100% 0 0); pointer-events: none; }
.euw__courbe { position: absolute; z-index: 0; left: 0; top: 0; overflow: visible; pointer-events: none; }
.euw__point { position: absolute; z-index: 3; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #000; opacity: 0; pointer-events: none; }
/* FRACTION : la tête de coupe — une ligne rouge tranche le mot, la suite glisse puis se recolle au passage */
.frac { position: relative; display: inline-block; }
.frac > .frac__g, .frac > .frac__d { position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; }
.frac__g { clip-path: inset(-30% calc((1 - var(--p, 0)) * 100%) -30% 0); }
.frac__d { clip-path: inset(-30% 0 -30% calc(var(--p, 0) * 100%)); transform: translate(var(--e, 0px), calc(var(--e, 0px) * .35)); }
.frac.coupe > .frac__g { opacity: 1; }
.frac.coupe > .frac__d { opacity: .9; }
.frac.coupe > .et__titre:first-child { opacity: 0; }
.frac__ligne { position: absolute; top: -28%; bottom: -28%; left: calc(var(--p, 0) * 100%); width: 2px; margin-left: -1px; background: var(--rouge); box-shadow: 0 0 10px var(--rouge); opacity: 0; pointer-events: none; }
.frac.coupe .frac__ligne { opacity: 1; }
/* ONE SHOT : un seul coup — attaque sèche, puis la lueur et une onde rouge décroissent */
.one { position: relative; display: inline-block; padding-bottom: 16px; margin-top: 14px; }
.one__onde { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 14px; overflow: visible; }
.one__onde path { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.one.tir > .et__titre { animation: one-coup 1.4s cubic-bezier(.1, .9, .2, 1); }
.one.tir .one__onde path { animation: one-onde 1.5s ease-out forwards; }
@keyframes one-coup {
  0% { transform: scale(1.14); color: #fff; text-shadow: 0 0 2px #fff, 0 0 18px rgba(231, 48, 57, .95), 0 0 40px rgba(231, 48, 57, .6); }
  12% { transform: scale(.98); }
  22% { transform: scale(1.01); }
  100% { transform: scale(1); color: var(--papier); text-shadow: 0 0 0 rgba(231, 48, 57, 0); }
}
@keyframes one-onde { 0% { stroke-dashoffset: 1; opacity: 1; } 55% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
/* SAHAARA : le mirage — l'air chaud fait onduler le mot (filtre #mirage), une braise rougeoie dessous */
.sah { position: relative; display: inline-block; }
.sah::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: -12px; height: 16px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 120, 80, .9), rgba(231, 48, 57, .6) 45%, transparent); filter: blur(5px); opacity: .18; transition: opacity .6s; pointer-events: none; }
.sah.chaud::after { opacity: .9; animation: braise 1.6s ease-in-out infinite alternate; }
@keyframes braise { 0% { transform: scaleX(.92); opacity: .65; } 40% { opacity: 1; } 100% { transform: scaleX(1.06); opacity: .8; } }
/* QUASAR 108 : marque Legendary Fx Renderer (pas de logo LFR), plaque anodisée, point du quasar qui respire */
.et--quasar { gap: 1.6rem; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .02) 0 1px, transparent 1px 3px), linear-gradient(180deg, rgba(42, 43, 46, .9), rgba(21, 22, 24, .9)); }
.et-q__plaque { position: relative; display: inline-flex; align-items: center; gap: .55rem; padding-bottom: .55rem; }
.et-q__plaque::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #d7b56d; opacity: .55; }
.et-q__nom { font: 400 clamp(1.05rem, 2vw, 1.45rem)/1 Michroma, var(--police); letter-spacing: .05em; color: #d7b56d; white-space: nowrap; }
.et-q__point { position: relative; width: 6px; height: 6px; flex: none; }
.et-q__point::before { content: ""; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: radial-gradient(circle, rgba(114, 242, 207, .42), rgba(114, 242, 207, .12) 32%, transparent 68%); opacity: .12; transform: scale(.8); }
.et-q__point::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(#f2fffb 0, #bff9ea 35%, #72f2cf 70%, transparent); box-shadow: 0 0 4px 1px rgba(114, 242, 207, .75); opacity: .5; transform: scale(.85); }
.js .et-q__point::after { animation: quasar-coeur 3.2s ease-in-out infinite; }
.js .module__avant:hover .et-q__point::after { animation: quasar-son .9s linear infinite; }
.js .module__avant:hover .et-q__point::before { animation: quasar-halo .9s linear infinite; }
@keyframes quasar-coeur { 50% { opacity: .75; transform: scale(1); } }
@keyframes quasar-son { 0% { opacity: .55; transform: scale(.9); } 8% { opacity: 1; transform: scale(1.15); } 30% { opacity: .8; transform: scale(1); } 46% { opacity: 1; transform: scale(1.15); } 60% { opacity: .7; transform: scale(.95); } 72% { opacity: .95; transform: scale(1.1); } 100% { opacity: .55; transform: scale(.9); } }
@keyframes quasar-halo { 0% { opacity: .15; transform: scale(.8); } 8% { opacity: .62; transform: scale(1.25); } 35% { opacity: .3; transform: scale(1); } 46% { opacity: .6; transform: scale(1.22); } 70% { opacity: .25; transform: scale(.95); } 100% { opacity: .15; transform: scale(.8); } }
.et-q__marque { display: grid; gap: .2rem; }
.et-q__marque b { font: 700 clamp(.85rem, 1.6vw, 1.1rem)/1 Syncopate, var(--police); letter-spacing: .04em; background: linear-gradient(180deg, #f8e3a6 0 30%, #b88a3a 31% 52%, #f3d58e 53% 70%, #8c6424 71%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .8)); }
.et-q__marque small { font: 400 .55rem/1 Michroma, var(--mono); letter-spacing: .3em; color: #c9ccd0; }
/* Le plateau qui se déplie sous le module : interface, infos, prix, Acheter */
.module__tiroir { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .9s var(--ressort); }
.module__tiroir > div { overflow: hidden; }
.module.ouverte .module__tiroir { grid-template-rows: 1fr; }
.module__dedans { margin: 0 1.9rem; padding: clamp(1.25rem, 3vw, 2.25rem); background: radial-gradient(circle, rgba(255, 255, 255, .05) 1px, transparent 1.4px) 0 0 / 10px 10px, rgba(0, 0, 0, .5); box-shadow: inset 0 1px 0 rgba(231, 48, 57, .35); }
.pf { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(1.25rem, 4vw, 3rem); align-items: start; }
.pf__ligne { margin: 0 0 .5rem; font: 500 .7rem/1.35 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--rouge); }
.pf__nom { margin: 0 0 1rem; font: 900 clamp(2.2rem, 5vw, 3.6rem)/.9 var(--police); text-transform: uppercase; letter-spacing: -.03em; }
.pf__desc { margin: 0 0 1.25rem; padding: 0; list-style: none; display: grid; gap: .35rem; font-size: 1.02rem; }
.pf__desc li::before { content: "— "; color: var(--rouge); }
.pf__video { display: grid; place-items: center; aspect-ratio: 16 / 9; margin-top: 1rem; padding: 1rem; border: 1px dashed var(--filet); font: 500 .68rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--beton); text-align: center; }
.pf__specs { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.25rem; margin: 0 0 1.5rem; font-size: .95rem; }
.pf__specs dt { font: 500 .66rem/1.6 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--beton); }
.pf__specs dd { margin: 0; }
.pf__achat { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.pf__achat .bouton { flex: none; max-width: 100%; white-space: normal; text-align: center; }
.pf__prix { font: 900 2rem/1 var(--police); }
.pf--kit { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.pf__reste { margin: 1rem 0 0; }
.pf__reste .module__reste { justify-items: start; }
.modale--kit .modale-kit__texte { margin: 0 0 1.25rem; font-weight: 500; }
.ecran { margin: 0; padding: .5rem; background: #000; border: 1px solid rgba(242, 242, 240, .14); box-shadow: 0 30px 50px -30px #000; }
.ecran img { display: block; width: 100%; height: auto; }
.ecran figcaption { margin-top: .5rem; font: 500 .6rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--beton); }
@media (max-width: 760px) {
  .baie { padding: 0 1.1rem; }
  .baie::before, .baie::after { width: 1.1rem; }
  .module__avant { grid-template-columns: 1.1rem minmax(0, 1fr) auto 1.1rem; }
  .module__avant--plaque { grid-template-columns: 1.1rem minmax(0, 1fr) 1.1rem; }
  .module__face { min-height: 4.6rem; }
  .module__info { width: 6.2rem; padding: .7rem .8rem; }
  .module__prix { font-size: 1.15rem; }
  .module__type { font-size: .52rem; letter-spacing: .08em; }
  .module__reste-fin, .module__reste small { display: none; }
  .module__reste b { font-size: .62rem; }
  .plaque { padding-left: 2rem; }
  .plaque::before { left: 1rem; }
  .et { gap: .6rem; padding: 0 .8rem; }
  .et__logo { width: 1.6rem; }
  .et__sous, .et-q__marque, .boite__marque { display: none; }
  .et__titre { font-size: 1.15rem; }
  .et-q__nom { font-size: .9rem; }
  .boite { padding: .5rem .8rem; }
  .boite__lcd { min-width: 0; }
  .module__dedans { margin: 0 1.1rem; padding: 1rem; }
  .pf { grid-template-columns: 1fr; }
}

/* ---------- Événements : le conducteur de soirée (evenements.js) ---------- */
.conducteur { display: grid; gap: 4px; padding: 1rem; background: #050505; border: 1px solid rgba(242, 242, 240, .12); }
.conducteur__etat { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; margin-bottom: .6rem; font: 500 .72rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--beton); }
.conducteur__etat b { color: var(--papier); font-weight: 500; }
.conducteur__rec { color: var(--rouge); }
.conducteur__rec::before { content: ""; display: inline-block; width: .55em; height: .55em; margin-right: .5em; border-radius: 50%; background: var(--rouge); animation: clignote 1s steps(1) infinite; }
.conducteur__horloge { font: 900 clamp(2.4rem, 6vw, 4.5rem)/1 var(--police); color: var(--papier); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.conducteur__regle, .conducteur__piste { position: relative; display: grid; grid-template-columns: 7rem 1fr; align-items: center; min-height: 2.6rem; }
.conducteur__regle { min-height: 1.6rem; font: 500 .62rem/1 var(--mono); color: var(--beton); }
.conducteur__regle div, .conducteur__piste div { position: relative; height: 100%; }
.conducteur__regle span { position: absolute; top: 50%; transform: translate(-50%, -50%); }
.conducteur__piste > b { font: 500 .66rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--beton); }
.conducteur__piste div { background: rgba(242, 242, 240, .04); }
.bloc { position: absolute; top: 12%; bottom: 12%; display: flex; align-items: center; padding: 0 .5rem; overflow: hidden; border: 1px solid rgba(242, 242, 240, .2); background: rgba(242, 242, 240, .06); font: 900 .72rem/1 var(--police); text-transform: uppercase; white-space: nowrap; color: var(--papier); transition: background .2s, border-color .2s, color .2s; }
.bloc.actif { background: var(--rouge); border-color: var(--rouge); color: var(--noir); }
.bloc--mc { padding: 0; justify-content: center; font: 500 .5rem/1 var(--mono); }
.bloc--rec { background: repeating-linear-gradient(-45deg, rgba(231, 48, 57, .55) 0 6px, rgba(231, 48, 57, .3) 6px 12px); border-color: rgba(231, 48, 57, .8); color: var(--papier); font: 500 .62rem/1 var(--mono); letter-spacing: .12em; }
.conducteur__tete { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--rouge); box-shadow: 0 0 12px var(--rouge); pointer-events: none; }
.conducteur__zone { position: absolute; top: 0; bottom: 0; left: calc(7rem + 1rem); right: 1rem; pointer-events: none; }
@media (max-width: 760px) { .conducteur__regle, .conducteur__piste { grid-template-columns: 4.2rem 1fr; } .conducteur__zone { left: calc(4.2rem + 1rem); } .bloc { font-size: .55rem; padding: 0 .3rem; } }


/* ---------- Événements : la Nocturne Skyrock, le show, les formats, les partenaires, les dates, le devis ---------- */
.nocturne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.nocturne__avec { margin: .75rem 0 1.5rem; font-weight: 700; font-size: clamp(1.1rem, 2vw, 1.5rem); }
.nocturne__faits { list-style: none; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(1rem, 3vw, 2.5rem); }
@media (max-width: 900px) { .nocturne__faits { grid-template-columns: 1fr 1fr; } }
.nocturne__faits li { display: grid; gap: .3rem; padding: 1rem 0; border-top: 1px solid var(--filet); }
.nocturne__faits b { font: 900 clamp(2rem, 4.5vw, 3.4rem)/.9 var(--police); letter-spacing: -.03em; }
.nocturne__faits span { font: 500 .7rem/1.35 var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.soiree { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: end; margin-bottom: clamp(2rem, 4vw, 3rem); }
.soiree .texte-fort { margin-top: 1rem; }
.cle-en-main { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); margin-top: clamp(2rem, 4vw, 3rem); }
.cle-en-main h3 { margin: 0 0 1rem; font: 500 .75rem/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--rouge); }
.cle-en-main ul { list-style: none; margin: 0; padding: 0; display: grid; }
.cle-en-main li { padding: .9rem 0; border-top: 1px solid var(--filet); font-weight: 500; }
.cle-en-main li strong { font-weight: 900; text-transform: uppercase; }
.cle-en-main__note { grid-column: 1 / -1; margin: 0; font: 500 .75rem/1.6 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.formats { list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1px; background: rgba(242, 242, 240, .14); border: 1px solid rgba(242, 242, 240, .14); }
.formats li { display: grid; align-content: start; gap: .8rem; min-height: 15rem; padding: clamp(1.25rem, 2.5vw, 1.75rem); background: var(--noir); transition: background .4s; }
.formats li:hover { background: #0e0e0e; }
.formats b { font: 500 .7rem/1 var(--mono); letter-spacing: .12em; color: var(--rouge); }
.formats h3 { margin: 0; font: 900 clamp(1.4rem, 2.4vw, 1.9rem)/1 var(--police); text-transform: uppercase; }
.formats p { margin: 0; }
.formats small { align-self: end; margin-top: auto; font: 500 .66rem/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--beton); }
/* Bande des partenaires : les noms (puis les logos) défilent de gauche à droite */
.partenaires { padding: clamp(1.5rem, 3vw, 2.25rem) 0; overflow: hidden; }
.partenaires .piste { padding: 0 var(--marge); margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.partenaires__defile { display: flex; width: max-content; }
.partenaires__liste { display: flex; align-items: center; gap: clamp(2.5rem, 6vw, 5rem); padding-right: clamp(2.5rem, 6vw, 5rem); margin: 0; list-style: none; }
.partenaires__liste li { font: 900 clamp(1.4rem, 3.4vw, 2.6rem)/1 var(--police); text-transform: uppercase; letter-spacing: -.01em; white-space: nowrap; }
.partenaires__liste li::after { content: ""; display: inline-block; width: .32em; height: .32em; margin-left: clamp(2.5rem, 6vw, 5rem); border-radius: 50%; background: currentColor; vertical-align: middle; opacity: .5; }
.partenaires__liste img { display: block; height: clamp(2rem, 4vw, 3rem); width: auto; }
.js .partenaires__defile { animation: defile-droite 80s linear infinite; }
.partenaires:hover .partenaires__defile { animation-play-state: paused; }
@keyframes defile-droite { from { transform: translateX(-50%); } to { transform: translateX(0); } }
/* Prochaines dates (section absente quand il n'y a pas de date) */
.agenda { list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; display: grid; }
.agenda li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto; align-items: center; gap: 1rem 2rem; padding: 1.25rem 0; border-top: 1px solid var(--filet); }
.agenda__date { display: grid; font: 900 2.6rem/.85 var(--police); text-transform: uppercase; letter-spacing: -.02em; }
.agenda__date small { font: 500 .7rem/1.3 var(--mono); letter-spacing: .12em; color: var(--rouge); }
.agenda__titre { margin: 0; font: 900 clamp(1.3rem, 2.4vw, 1.8rem)/1 var(--police); text-transform: uppercase; }
.agenda__lieu { margin: .35rem 0 0; font: 500 .75rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.devis { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.devis .texte { margin-top: 1.25rem; font-weight: 500; }
@media (max-width: 900px) {
  .nocturne, .soiree, .cle-en-main, .devis { grid-template-columns: 1fr; }
  .agenda li { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .agenda li .bouton { grid-column: 2; justify-self: start; }
}
/* Titres dans une colonne (Nocturne, Soirée, Devis) : plus petits pour ne jamais déborder sur le texte voisin */
.nocturne .titre, .soiree .titre, .devis .titre { font-size: clamp(2.6rem, 6.2vw, 5.8rem); overflow-wrap: break-word; }
/* Formats : 4 de front (2 x 2 sur tablette, 1 par ligne sur téléphone), jamais de case vide */
.formats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.formats li { grid-template-rows: auto auto 1fr auto; }
@media (max-width: 1080px) { .formats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .formats { grid-template-columns: 1fr; } .formats li { min-height: 0; } }

/* A2 « Une soirée Fil Rouge » : titre + chiffre géant, le conducteur en vedette, le texte dessous en deux colonnes */
.soiree { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.soiree__chiffre { display: grid; justify-items: end; gap: .4rem; margin: 0; text-align: right; }
.soiree__chiffre b { font: 900 clamp(5rem, 14vw, 12rem)/.8 var(--police); letter-spacing: -.05em; color: var(--rouge); font-variant-numeric: tabular-nums; }
.soiree__chiffre span { font: 500 .75rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.soiree__textes { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }
.soiree__textes .texte { max-width: none; }
.soiree__textes .texte + .texte { margin-top: 0; }
.soiree__textes .texte-fort { display: block; margin-top: .75rem; }
@media (max-width: 900px) {
  .soiree { grid-template-columns: 1fr; }
  .soiree__chiffre { justify-items: start; text-align: left; }
  .soiree__textes { grid-template-columns: 1fr; }
  .soiree__textes .texte + .texte { margin-top: 1em; }
}
/* Événements, ordre du 09/10 : le 51 en bas de « La soirée » ; formats en cartes noires sur fond clair */
.soiree__chiffre { grid-template-columns: auto auto; align-items: end; justify-content: end; gap: 0 1rem; margin-top: clamp(2rem, 4vw, 3rem); padding-top: clamp(1.25rem, 3vw, 2rem); border-top: 1px solid var(--filet); }
.soiree__chiffre span { max-width: 14ch; padding-bottom: .5rem; text-align: left; }
.formats li { color: var(--papier); }
@media (max-width: 900px) { .soiree__chiffre { justify-content: start; } }

/* ---------- Pages de texte légal (mentions légales, CGU, CGV) ---------- */
.page-texte__sommaire { display: flex; flex-wrap: wrap; gap: .5rem; margin: 2rem 0 0; }
.page-texte__sommaire a { padding: .45rem .85rem; border: 1px solid var(--filet); border-radius: 999px; font: 500 .68rem/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; text-decoration: none; }
.page-texte__sommaire a:hover { border-color: var(--rouge); color: var(--rouge); }
.page-texte__h3 { margin: 1.75rem 0 .6rem; font: 900 1.05rem/1.2 var(--police); text-transform: uppercase; letter-spacing: .01em; }
.page-texte__liste { margin: .75rem 0 0; padding-left: 1.2rem; display: grid; gap: .5rem; }
.page-texte__liste li::marker { color: var(--rouge); }
.page-texte__encadre { margin-top: 1.5rem; padding: 1.25rem 1.5rem; border-left: var(--anneau) solid var(--rouge); background: rgba(231, 48, 57, .06); }
.page-texte__encadre .page-texte__h3 { margin-top: 0; }
.page-texte .sous-titre { scroll-margin-top: 6rem; }
/* Informations à compléter par l'association (repères visibles dans la maquette) */
.a-completer { padding: 0 .25em; background: rgba(231, 48, 57, .14); color: var(--rouge); font-weight: 700; }

/* Lien « Licence et CGV » sous les boutons d'achat (Sons & plugins) */
.pf__cgv { margin: .75rem 0 0; font: 500 .66rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.pf__cgv a { color: var(--beton); text-decoration-color: var(--rouge); text-underline-offset: .25em; }
.pf__cgv a:hover { color: var(--papier); }
/* Module du kit sur petit téléphone (360-420 px) : tout rentre dans la baie */
.pf > * { min-width: 0; }
@media (hover: none) and (pointer: coarse) { .pad__touche { visibility: hidden; } }
@media (max-width: 420px) {
  .module__dedans { margin: 0 .25rem; padding: .9rem .7rem; }
  .pf--kit .mpc { padding: .7rem; gap: .7rem; }
  .pf--kit .mpc__marque { display: none; }
  .pf--kit .mpc__ecran { padding: .6rem .7rem; }
  .pf--kit .mpc__pads { gap: .35rem; }
  .pf--kit .pad { padding: .3rem; }
  .pf--kit .pad__nom { font-size: .58rem; }
  .pf--kit .mpc__commandes { gap: .5rem; }
  .pf--kit .mpc__styles button { padding: .45rem .6rem; font-size: .62rem; }
  .pf--kit .mpc__commandes .bouton { padding-inline: calc(.9rem - var(--anneau)); font-size: .72rem; }
  .pf__specs { gap: .35rem .9rem; }
}

/* Sons & plugins en mode « bientôt » */
.module__prix--bientot { font-size: 1.05rem; letter-spacing: .02em; text-transform: uppercase; color: var(--rouge); }
.pf__prix--bientot { font-size: 1.35rem; color: var(--rouge); }
.pf--seul { grid-template-columns: minmax(0, 46rem); }

/* Lecteur Spotify en façade : rien ne se charge chez Spotify avant le clic */
.spotify { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem 2rem; padding: clamp(1.25rem, 3vw, 2rem); border-radius: 12px; background: radial-gradient(80% 120% at 100% 0%, rgba(231, 48, 57, .35), transparent 60%), #000; color: var(--papier); }
.spotify__texte strong { display: block; font: 900 clamp(1.6rem, 3vw, 2.6rem)/.9 var(--police); text-transform: uppercase; letter-spacing: -.02em; }
.spotify__texte span { display: block; margin-top: .5rem; font: 500 .72rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--beton); }
.spotify__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.spotify__actions .bouton { --teinte: rgba(8, 8, 8, .38); }
.spotify__note { grid-column: 1 / -1; align-self: end; margin: 0; font: 500 .62rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--beton); }
.spotify--compact { padding: 1rem 1.25rem; gap: .5rem 1.5rem; }
.spotify--compact .spotify__texte strong { font-size: clamp(1.2rem, 2.2vw, 1.6rem); }
.spotify--compact .spotify__actions .bouton { min-height: 2.8rem; padding: calc(.7rem - var(--anneau)) calc(1.3rem - var(--anneau)); font-size: .82rem; }
.spotify__lecteur { display: block; border: 0; border-radius: 12px; background: #121212; }
@media (max-width: 700px) { .spotify { grid-template-columns: 1fr; } }

/* Fenêtre de réservation : un message pendant que le calendrier SimplyBook arrive (sinon cadre blanc vide) */
.modale .modale__corps { position: relative; }
.resa__chargement { position: absolute; inset: clamp(.75rem, 2vw, 1.25rem); z-index: 2; display: grid; place-items: center; margin: 0; background: #FFFFFF; font: 500 .8rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--noir); pointer-events: none; transition: opacity .3s; }
.resa__chargement::after { content: ""; position: absolute; left: 50%; top: calc(50% + 1.6rem); width: 4rem; height: 3px; margin-left: -2rem; background: var(--rouge); animation: chargement 1s ease-in-out infinite alternate; }
@keyframes chargement { from { transform: scaleX(.15); } to { transform: scaleX(1); } }
.calendrier-pret .resa__chargement { opacity: 0; visibility: hidden; }

/* Lisibilité des petits textes (audit, 09/10) : pas de petit texte rouge sur fond clair, pas de transparence sur fond rouge.
   Le rouge reste en repère (petit carré) à côté du texte. */
.lexique dt, .ctx-papier .cle-en-main h3 { color: var(--noir); }
.lexique dt::before, .ctx-papier .cle-en-main h3::before { content: ""; display: inline-block; width: .55em; height: .55em; margin-right: .55em; background: var(--rouge); vertical-align: .05em; }
.ctx-rouge .creneau button small, .ctx-rouge .formule small, .ctx-rouge .avis__liste p span { opacity: 1; }
/* Sons & plugins sans JavaScript : liste simple des produits (remplacée par la baie dès que le script tourne) */
.catalogue-texte { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--filet); }
.catalogue-texte li { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: baseline; padding: 1rem 0; border-bottom: 1px solid var(--filet); }
.catalogue-texte strong { font: 900 1.3rem/1 var(--police); text-transform: uppercase; }
.catalogue-texte span { font: 500 .72rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--beton); }

/* Fonds photo plein cadre (Label A1 et B2, Studio visuel B3, Accueil B3, Studio audio B1, Événements A1).
   Le cadrage se règle sur la section : --cadre (ordinateur), --cadre-mobile (téléphone), --miroir: -1 pour retourner la photo. */
.fond-photo { --miroir: 1; --cadre: 50% 50%; --cadre-mobile: var(--cadre); --voile: .62; }
.section.fond-photo::before { display: none; }
.fond-photo__image { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--noir); }
.fond-photo__image img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; object-position: var(--cadre); transform: scaleX(var(--miroir)); filter: grayscale(1) contrast(1.05); }
.fond-photo--couleur .fond-photo__image img { filter: contrast(1.05); }
/* Par défaut : texte à gauche sur un dégradé noir ; fondu noir en haut (raccord avec la section du dessus) et en bas */
.fond-photo__image::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(0, 0, 0, .94) 0%, rgba(0, 0, 0, .82) 30%, rgba(0, 0, 0, .25) 62%, rgba(0, 0, 0, 0) 80%),
  linear-gradient(180deg, #000 0, #000 4rem, rgba(0, 0, 0, .75) 10rem, rgba(0, 0, 0, .3) 17rem, transparent 24rem),
  linear-gradient(0deg, rgba(0, 0, 0, .7) 0%, transparent 22%); }
/* Voile : pour les sections dont le contenu occupe toute la largeur */
.fond-photo--voile .fond-photo__image::after { background:
  linear-gradient(180deg, #000 0, #000 4rem, transparent 22rem),
  linear-gradient(0deg, #000 0, transparent 14rem),
  rgba(0, 0, 0, var(--voile)); }
.fond-photo--plein { min-height: min(100svh, 60rem); display: flex; flex-direction: column; }
.fond-photo--court { min-height: min(80svh, 46rem); }
.fond-photo__texte { position: relative; max-width: min(34rem, 46%); margin-block: auto; }
.fond-photo .texte { color: rgba(242, 242, 240, .88); }
@supports (animation-timeline: view()) {
  .fond-photo__image img { animation: fond-parallaxe linear both; animation-timeline: view(); animation-range: cover; }
}
@keyframes fond-parallaxe { from { transform: scaleX(var(--miroir)) translateY(-6%); } to { transform: scaleX(var(--miroir)) translateY(6%); } }
@media (prefers-reduced-motion: reduce) { .fond-photo__image img { animation: none; } }
@media (max-width: 900px) {
  .fond-photo__image img { object-position: var(--cadre-mobile); }
  .fond-photo--plein { min-height: 100svh; }
  .fond-photo:not(.fond-photo--voile) .fond-photo__image::after { background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .1) 18%, rgba(0, 0, 0, .55) 42%, rgba(0, 0, 0, .93) 62%, #000 100%); }
  .fond-photo--voile .fond-photo__image::after { background: linear-gradient(180deg, #000 0, transparent 8rem), linear-gradient(0deg, #000 0, transparent 8rem), rgba(0, 0, 0, .7); }
  .fond-photo__texte { max-width: none; margin-block: auto 0; padding-top: 40svh; }
}
.bac__consigne { grid-column: 1 / -1; margin-top: 1rem; }
/* Page liens : bloc « Dernier clip » */
.liens__clip { display: grid; gap: .75rem; }
.liens__clip-tete { display: flex; align-items: center; gap: .75rem; font: 500 .7rem/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.liens__clip-tete i { flex: 1; height: 1px; background: currentColor; opacity: .35; }
.liens__clip-tete span:last-child { color: var(--rouge); }
.liens__clip-titre { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .6rem; font: 900 1.4rem/1 var(--police); text-transform: uppercase; }
.liens__clip-titre small { font: 700 .95rem/1 var(--police); text-transform: none; opacity: .75; }
/* Sons & plugins : cover du kit du mois, en tête des infos du module */
.pf__cover { float: right; width: clamp(6.5rem, 13vw, 9.5rem); height: auto; aspect-ratio: 1; margin: 0 0 1rem 1.25rem; object-fit: cover; box-shadow: 0 0 0 1px rgba(242, 242, 240, .14), 0 1.25rem 2.5rem -1rem rgba(0, 0, 0, .9); }
@media (max-width: 900px) { .pf__cover { width: 6rem; margin-left: 1rem; } }
/* Sons & plugins : baie plugins tant qu'aucun plugin n'est sorti */
.module__avant--preparation { cursor: default; }
.preparation { display: flex; align-items: center; gap: 1.1rem; min-height: 5.5rem; padding: .85rem 1.4rem; }
.preparation strong { display: block; font: 900 clamp(1.05rem, 2vw, 1.4rem)/1 var(--police); text-transform: uppercase; letter-spacing: .04em; }
.preparation small { display: block; margin-top: .45rem; font: 500 .62rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--beton); }
.preparation__led { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--rouge); box-shadow: 0 0 10px var(--rouge); animation: clignote 1.6s steps(1) infinite; }
.module--preparation .module__info { gap: .55rem; }
@media (prefers-reduced-motion: reduce) { .preparation__led { animation: none; } }
@media (max-width: 700px) { .module__avant--preparation { grid-template-columns: 1.9rem minmax(0, 1fr) 1.9rem; } .module--preparation .module__info { grid-column: 2; grid-row: 2; width: auto; justify-items: start; border-left: 0; padding: 0 1.4rem 1rem; } }
/* Studio audio : FAQ */
.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.faq__tete .texte { margin-top: 1.5rem; }
.faq__liste { border-top: 1px solid var(--filet); }
.faq__item { border-bottom: 1px solid var(--filet); }
.faq__item summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1.2rem 0; cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__num { font: 500 .72rem/1 var(--mono); letter-spacing: .12em; color: var(--rouge); }
.faq__q { margin: 0; font: 800 clamp(1.05rem, 1.7vw, 1.3rem)/1.2 var(--police); transition: color .3s; }
.faq__item summary:hover .faq__q, .faq__item summary:focus-visible .faq__q { color: var(--rouge); }
.faq__signe { position: relative; width: 1rem; height: 1rem; }
.faq__signe::before, .faq__signe::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 2px; margin-top: -1px; background: var(--rouge); transition: transform .4s var(--ressort); }
.faq__signe::after { transform: rotate(90deg); }
.faq__item[open] .faq__signe::after { transform: rotate(0); }
.faq__r { padding: 0 2rem 1.4rem calc(.72rem * 2.6 + 1rem); }
.faq__r p { margin: 0; font-size: 1.05rem; line-height: 1.6; color: rgba(242, 242, 240, .85); }
.faq__r .faq__plus { margin-top: .9rem; font: 500 .72rem/1.6 var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.faq__plus a { text-decoration-color: var(--rouge); text-decoration-thickness: 2px; text-underline-offset: .35em; }
.faq__plus a:hover { color: var(--rouge); }
@media (max-width: 900px) { .faq { grid-template-columns: 1fr; } .faq__r { padding-left: 0; padding-right: 0; } }
/* Événements : agenda partagé avec les assos amies + « Propose ta date » */
.agenda__intro { margin-top: 1rem; max-width: 38rem; }
.agenda__ami { margin: .45rem 0 0; display: inline-flex; align-items: center; gap: .45rem; font: 500 .68rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--rouge); }
.agenda__ami::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.agenda__item--ami .agenda__date { opacity: .85; }
.agenda__proposer { margin: 1.75rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--filet); font: 500 .75rem/1.6 var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.lien-bouton { padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-decoration: underline; text-decoration-color: var(--rouge); text-decoration-thickness: 2px; text-underline-offset: .35em; cursor: pointer; transition: color .3s; }
.lien-bouton:hover, .lien-bouton:focus-visible { color: var(--rouge); }
.formulaire__ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 520px) { .formulaire__ligne { grid-template-columns: 1fr; } }
/* Événements : affiche d'un open mic dans l'agenda */
.agenda li.agenda__item--visuel { grid-template-columns: 7.5rem 4.6rem minmax(0, 1fr) auto; }
.agenda__visuel { display: block; width: 4.6rem; aspect-ratio: 3 / 4; overflow: hidden; background: var(--noir); box-shadow: 0 0 0 1px var(--filet); transition: transform .4s var(--ressort), box-shadow .3s; }
.agenda__visuel img { width: 100%; height: 100%; object-fit: cover; }
.agenda__visuel:hover, .agenda__visuel:focus-visible { transform: scale(1.06) rotate(-1.5deg); box-shadow: 0 0 0 2px var(--rouge); }
@media (max-width: 900px) {
  .agenda li.agenda__item--visuel { grid-template-columns: 5.5rem 3.4rem minmax(0, 1fr); }
  .agenda li.agenda__item--visuel > .bouton { grid-column: 3; }
  .agenda__visuel { width: 3.4rem; }
}
.affiche-grande { max-width: min(92vw, 40rem); max-height: 92svh; padding: 0; border: 0; background: transparent; overflow: visible; }
.affiche-grande::backdrop { background: rgba(0, 0, 0, .86); }
.affiche-grande img { display: block; max-width: 100%; max-height: 86svh; width: auto; height: auto; margin: 0 auto; box-shadow: 0 2rem 4rem -1rem rgba(0, 0, 0, .9); }
.affiche-grande__fermer { display: block; margin: 1rem auto 0; }
.champ--visuel input[type="file"] { padding: .7rem; font: 500 .8rem/1.3 var(--mono); }
.champ__apercu { width: 6rem; aspect-ratio: 3 / 4; object-fit: cover; box-shadow: 0 0 0 1px var(--filet); }