/* ————————————————————————————————————————————————————————————
   RONDE 02 · « AU CONTACT » : le concept unique du réalisateur.
   Une femme, une F1, une salle rouge; chaque toucher fait
   apparaître une ville (Vancouver, Calgary, Toronto, Montréal,
   Halifax). Salle rouge interactive + scénario plan par plan +
   transition live (foule en direct + boîte rouge LED).
   Le plafond LED de la couverture est une pure animation CSS.
   ———————————————————————————————————————————————————————————— */

.r2 { row-gap: var(--space-m); }

/* ——— Couverture : séquence de départ F1 (14 s en boucle, pur CSS) ———
   0,0 s  noir, le portique apparaît
   1,0 s  feu 1 · 1,8 s feu 2 · 2,6 s feu 3 · 3,4 s feu 4 · 4,2 s feu 5
   4,2 s  hold (suspense)
   6,2 s  EXTINCTION : c'est elle qui allume la salle
   6,4 s  onde d'allumage : le plafond LED déferle vers le spectateur
   8,0 s  la salle vit (respirations), le portique s'efface
   12,5 s fondu au noir, la boucle repart                                */
.r2-cover {
  grid-column: 1 / -1;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  min-height: min(88svh, 840px);
  display: grid;
  align-content: end;
  background: #060407;
}

/* portique des cinq feux */
.r2-gantry {
  position: absolute;
  left: 50%;
  top: 6.5%;
  transform: translateX(-50%);
  display: flex;
  gap: clamp(9px, 1.3vw, 17px);
  z-index: 4;
  animation: r2-gantry 14s linear infinite;
}
.r2-gantry::before {
  content: "";
  position: absolute;
  left: clamp(-40px, -3vw, -26px);
  right: clamp(-40px, -3vw, -26px);
  top: -11px;
  height: 5px;
  background: #131318;
  border: 1px solid oklch(100% 0 0 / .1);
  border-radius: 3px;
}
.r2-gantry i {
  position: relative;
  width: clamp(26px, 3.4vw, 40px);
  height: clamp(60px, 8vw, 94px);
  background:
    radial-gradient(circle at 50% 26%, #1a1216 0 27%, transparent 34%),
    radial-gradient(circle at 50% 74%, #1a1216 0 27%, transparent 34%),
    #0e0e13;
  border: 1px solid oklch(100% 0 0 / .14);
  border-radius: clamp(6px, 1vw, 10px);
}
.r2-gantry i::before,
.r2-gantry i::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 58%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 42% 36%, #ff9d92 0%, #ff2531 52%, #93060e 100%);
  box-shadow:
    0 0 10px 2px oklch(78% .16 27 / .9),
    0 0 22px 7px oklch(62% .23 27 / .85),
    0 0 60px 20px oklch(58% .23 27 / .38);
  opacity: 0;
}
.r2-gantry i::before { top: 7%; }
.r2-gantry i::after { bottom: 7%; }
.r2-gantry i:nth-child(1)::before, .r2-gantry i:nth-child(1)::after { animation: r2-lamp1 14s linear infinite; }
.r2-gantry i:nth-child(2)::before, .r2-gantry i:nth-child(2)::after { animation: r2-lamp2 14s linear infinite; }
.r2-gantry i:nth-child(3)::before, .r2-gantry i:nth-child(3)::after { animation: r2-lamp3 14s linear infinite; }
.r2-gantry i:nth-child(4)::before, .r2-gantry i:nth-child(4)::after { animation: r2-lamp4 14s linear infinite; }
.r2-gantry i:nth-child(5)::before, .r2-gantry i:nth-child(5)::after { animation: r2-lamp5 14s linear infinite; }
@keyframes r2-gantry {
  0%, 2% { opacity: 0; }
  5%, 54% { opacity: 1; }
  62%, 88% { opacity: .45; }
  95.5%, 100% { opacity: 0; }
}
@keyframes r2-lamp1 { 0%, 7.1% { opacity: 0; } 7.4%, 44.2% { opacity: 1; } 44.45%, 100% { opacity: 0; } }
@keyframes r2-lamp2 { 0%, 12.8% { opacity: 0; } 13.1%, 44.2% { opacity: 1; } 44.45%, 100% { opacity: 0; } }
@keyframes r2-lamp3 { 0%, 18.5% { opacity: 0; } 18.8%, 44.2% { opacity: 1; } 44.45%, 100% { opacity: 0; } }
@keyframes r2-lamp4 { 0%, 24.2% { opacity: 0; } 24.5%, 44.2% { opacity: 1; } 44.45%, 100% { opacity: 0; } }
@keyframes r2-lamp5 { 0%, 29.9% { opacity: 0; } 30.2%, 44.2% { opacity: 1; } 44.45%, 100% { opacity: 0; } }

/* plafond LED en perspective */
.r2-cover__sky {
  position: absolute;
  left: -22%;
  right: -22%;
  top: -14%;
  height: 74%;
  transform: perspective(720px) rotateX(57deg);
  transform-origin: 50% 100%;
  overflow: hidden;
  animation: r2-sky 14s linear infinite;
}
.r2-sky__rows {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(180deg,
      transparent 0 26px,
      oklch(52% .21 27 / .92) 26px 34px,
      transparent 34px 40px),
    repeating-linear-gradient(90deg,
      transparent 0 88px,
      oklch(10% .02 27) 88px 92px);
  filter: drop-shadow(0 0 22px oklch(55% .22 27 / .5)) brightness(1);
  animation: r2-rows 14s linear infinite;
}
/* surtension à l'allumage, puis la salle se stabilise */
@keyframes r2-rows {
  0%, 45.5% { filter: drop-shadow(0 0 22px oklch(55% .22 27 / .5)) brightness(1); }
  47%, 54% { filter: drop-shadow(0 0 34px oklch(58% .23 27 / .75)) brightness(1.65); }
  62%, 100% { filter: drop-shadow(0 0 22px oklch(55% .22 27 / .5)) brightness(1); }
}
/* volet noir : cache les rangées avant l'extinction des feux */
.r2-sky__shutter {
  position: absolute;
  inset: -2% 0;
  z-index: 2;
  background: #060407;
  animation: r2-shutter 14s linear infinite;
}
/* le bord du volet porte le front lumineux : toujours synchro avec la révélation */
.r2-sky__shutter::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -22px;
  height: 22px;
  background: linear-gradient(180deg,
    transparent 0%,
    oklch(75% .2 27 / .55) 45%,
    oklch(96% .07 27 / .95) 100%);
  filter: blur(1px);
  animation: r2-edge 14s linear infinite;
  opacity: 0;
}
@keyframes r2-edge {
  0%, 45.5% { opacity: 0; }
  46%, 52.6% { opacity: 1; }
  53.4%, 100% { opacity: 0; }
}
/* front d'allumage : l'onde qui déferle vers le spectateur */
.r2-cover__sky::before {
  content: "";
  position: absolute;
  inset: -40% 0;
  z-index: 3;
  background: linear-gradient(180deg,
    transparent 0%,
    oklch(80% .19 27 / .6) 46%,
    oklch(95% .08 27 / .9) 50%,
    oklch(80% .19 27 / .6) 54%,
    transparent 100%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translateY(-46%);
  animation: r2-front 14s linear infinite;
}
/* respiration ambiante une fois la salle allumée */
.r2-cover__sky::after {
  content: "";
  position: absolute;
  inset: -40% 0;
  z-index: 3;
  background: linear-gradient(180deg,
    transparent 0%,
    oklch(74% .18 27 / .4) 47%,
    oklch(88% .1 27 / .55) 50%,
    oklch(74% .18 27 / .4) 53%,
    transparent 100%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translateY(-46%);
  animation: r2-breathe 14s linear infinite;
}
@keyframes r2-sky {
  0%, 89% { opacity: 1; }
  95.5%, 99.9% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes r2-shutter {
  0%, 45.6% { transform: translateY(0); }
  53%, 95.8% { transform: translateY(112%); }
  96.2%, 100% { transform: translateY(0); }
}
@keyframes r2-front {
  0%, 45.4% { transform: translateY(-46%); opacity: 0; }
  45.9% { opacity: .95; }
  52.8% { opacity: .85; }
  53.6%, 100% { transform: translateY(46%); opacity: 0; }
}
@keyframes r2-breathe {
  0%, 55.5% { transform: translateY(-46%); opacity: 0; }
  57% { opacity: .4; }
  66.5% { transform: translateY(46%); opacity: .4; }
  66.8% { opacity: 0; }
  67.1% { transform: translateY(-46%); opacity: 0; }
  68.6% { opacity: .4; }
  78% { transform: translateY(46%); opacity: .4; }
  78.3% { opacity: 0; }
  78.6% { transform: translateY(-46%); opacity: 0; }
  80.1% { opacity: .4; }
  88.5% { transform: translateY(46%); opacity: .35; }
  89%, 100% { opacity: 0; }
}
/* réverbération au sol : reflet flou du plafond */
.r2-cover__floor {
  position: absolute;
  inset: auto -22% -6%;
  height: 46%;
  transform: perspective(720px) rotateX(-57deg);
  transform-origin: 50% 0%;
  background:
    repeating-linear-gradient(180deg,
      transparent 0 26px,
      oklch(52% .21 27 / .3) 26px 34px,
      transparent 34px 40px);
  filter: blur(14px);
  opacity: 0;
  mask-image: linear-gradient(180deg, #000 0%, transparent 82%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 82%);
  animation: r2-floor 14s linear infinite;
}
@keyframes r2-floor {
  0%, 46.2% { opacity: 0; }
  54%, 89% { opacity: .55; }
  95.5%, 100% { opacity: 0; }
}
.r2-cover__veil {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    radial-gradient(140% 90% at 50% 108%, transparent 30%, oklch(4% .01 27 / .82) 78%),
    linear-gradient(180deg, oklch(4% .01 27 / .4), transparent 34% 62%, oklch(4% .01 27 / .88));
}
.r2-cover__text {
  position: relative;
  z-index: 4;
  padding: clamp(24px, 4vw, 56px);
  display: grid;
  gap: var(--space-xs);
}
.r2-cover__kicker {
  color: var(--color-fg-secondary);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 560;
}
.r2-cover__kicker b { color: var(--color-accent); font-weight: 620; }
/* le titre encaisse l'extinction : légère poussée + halo rouge */
.r2-cover__title {
  text-shadow: 0 8px 60px oklch(0% 0 0 / .6);
  animation: r2-title 14s linear infinite;
}
@keyframes r2-title {
  0%, 44.2% { transform: none; text-shadow: 0 8px 60px oklch(0% 0 0 / .6); }
  44.7% { transform: scale(1.013); text-shadow: 0 0 38px oklch(62% .23 27 / .8), 0 8px 60px oklch(0% 0 0 / .6); }
  48.5%, 100% { transform: none; text-shadow: 0 8px 60px oklch(0% 0 0 / .6); }
}
.r2-cover__tag {
  color: var(--color-fg-secondary);
  font-size: var(--step-1);
  letter-spacing: var(--tracking-tight);
  max-width: 34ch;
  text-wrap: balance;
}
@media (prefers-reduced-motion: reduce) {
  .r2-gantry,
  .r2-gantry i::before, .r2-gantry i::after,
  .r2-cover__sky, .r2-sky__shutter, .r2-sky__shutter::before,
  .r2-sky__rows, .r2-cover__sky::before, .r2-cover__sky::after,
  .r2-cover__floor, .r2-cover__title { animation: none; }
  .r2-sky__shutter { transform: translateY(112%); }
  .r2-cover__floor { opacity: .5; }
  .r2-gantry { opacity: .5; }
}

/* ——— Intro / pitch ——— */
.r2-lede {
  grid-column: 1 / span 7;
  display: grid;
  gap: var(--space-xs);
  font-size: var(--step-1);
  letter-spacing: var(--tracking-tight);
  line-height: 1.45;
  text-wrap: pretty;
}
.r2-side {
  grid-column: 9 / -1;
  align-self: start;
  display: grid;
  gap: var(--space-2xs);
  color: var(--color-fg-secondary);
  font-size: var(--step--1);
  border-inline-start: 2px solid var(--color-accent);
  padding-inline-start: var(--space-xs);
}
.r2-side b { color: var(--color-fg); font-weight: 580; }
@media (max-width: 900px) {
  .r2-lede { grid-column: 1 / -1; }
  .r2-side { grid-column: 1 / -1; }
}

/* ——— Ce qu'on retient → ce que ça devient ——— */
.r2-map {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--gutter);
}
.r2-map__item {
  border-top: 1px solid oklch(100% 0 0 / .14);
  padding-top: var(--space-xs);
  display: grid;
  align-content: start;
  gap: var(--space-2xs);
}
.r2-map__brief {
  color: var(--color-fg-tertiary);
  font-size: var(--step--1);
  font-style: italic;
}
.r2-map__arrow { color: var(--color-accent); font-size: var(--step--1); }
.r2-map__resp { font-size: var(--step--1); line-height: 1.5; color: var(--color-fg-secondary); }
.r2-map__resp b { color: var(--color-fg); font-weight: 580; }

/* ——— Le film, plan par plan : planches alternées avec les réfs du deck ——— */
.r2-film-note { max-width: 70ch; }
.r2-film {
  grid-column: 1 / -1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-s);
}
.r2f {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--gutter);
  border-top: 1px solid oklch(100% 0 0 / .14);
  padding-top: var(--space-s);
}
.r2f:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.r2f:nth-child(even) .r2f__text { order: 2; }
.r2f:nth-child(even) .r2f__media { order: 1; }
.r2f__text { display: grid; gap: var(--space-2xs); align-content: start; }
.r2f__no {
  color: var(--color-accent);
  font-size: var(--step--1);
  font-weight: 620;
  font-variant-numeric: tabular-nums;
  letter-spacing: .07em;
}
.r2f__title {
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.r2f__script { color: var(--color-fg-secondary); line-height: 1.55; max-width: 58ch; text-wrap: pretty; }
.r2f-vo {
  display: grid;
  gap: 10px;
  border-inline-start: 2px solid var(--color-accent);
  padding-inline-start: var(--space-xs);
  margin-top: var(--space-3xs);
}
.r2f-vo__l { display: grid; gap: 2px; }
.r2f-vo__l span {
  color: var(--color-accent);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 620;
}
.r2f-vo__l em { font-style: normal; color: var(--color-fg); line-height: 1.4; text-wrap: pretty; }
.r2f__media { display: grid; gap: 10px; align-content: start; }
.r2f__frame {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  background: oklch(11% .012 27);
  aspect-ratio: 16 / 9;
}
.r2f-clip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.r2f__media--n2 { grid-template-columns: 1fr 1fr; }
.r2f__media--n3 { grid-template-columns: 1fr 1fr; }
.r2f__media--n3 .r2f__frame:first-child { grid-column: 1 / -1; }
.r2f__media--n6 { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) {
  .r2f, .r2f:nth-child(even) { grid-template-columns: 1fr; }
  .r2f:nth-child(even) .r2f__text { order: 0; }
  .r2f:nth-child(even) .r2f__media { order: 0; }
  .r2f__media--n2 { grid-template-columns: 1fr; }
}

/* ——— Le pont : transition vers la piste ——— */
.r2-bridge {
  grid-column: 1 / -1;
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid oklch(100% 0 0 / .1);
}
.r2-bridge__strip {
  height: clamp(72px, 10vw, 110px);
  position: relative;
  background:
    repeating-linear-gradient(90deg,
      transparent 0 34px,
      oklch(52% .21 27 / .85) 34px 42px,
      transparent 42px 48px),
    #070508;
  filter: drop-shadow(0 0 18px oklch(55% .22 27 / .4));
  overflow: hidden;
}
.r2-bridge__strip::after {
  content: "";
  position: absolute;
  inset: 0 -40%;
  background: linear-gradient(90deg,
    transparent 0%,
    oklch(80% .18 27 / .55) 48%,
    oklch(93% .09 27 / .8) 50%,
    oklch(80% .18 27 / .55) 52%,
    transparent 100%);
  mix-blend-mode: screen;
  animation: r2-run 4.4s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes r2-run {
  0%   { transform: translateX(-38%); }
  100% { transform: translateX(38%); }
}
@media (prefers-reduced-motion: reduce) {
  .r2-bridge__strip::after { animation: none; opacity: .35; }
}
.r2-bridge__body {
  padding: clamp(20px, 3vw, 40px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--gutter);
}
.r2-bridge__label {
  grid-column: 1 / -1;
  color: var(--color-accent);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 580;
}
.r2-bridge__body p { color: var(--color-fg-secondary); line-height: 1.55; text-wrap: pretty; }
.r2-bridge__body p b { color: var(--color-fg); font-weight: 580; }

/* ——— Questions du brief : Q / R ——— */
.r2-qr {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--gutter);
  border-top: 1px solid oklch(100% 0 0 / .14);
  padding-block: var(--space-s);
}
.r2-qr__q { display: grid; gap: var(--space-3xs); align-content: start; }
.r2-qr__q .tag {
  color: var(--color-accent);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 580;
}
.r2-qr__q .quote { color: var(--color-fg-tertiary); font-size: var(--step--1); font-style: italic; }
.r2-qr__r { display: grid; gap: var(--space-xs); align-content: start; }
.r2-qr__r p { color: var(--color-fg-secondary); line-height: 1.55; max-width: 66ch; text-wrap: pretty; }
.r2-qr__r p b { color: var(--color-fg); font-weight: 580; }
@media (max-width: 900px) {
  .r2-qr { grid-template-columns: 1fr; }
}

/* ——— Découpage du temps : barre ——— */
.r2-time { display: grid; gap: var(--space-2xs); }
.r2-time__bar {
  display: flex;
  gap: 3px;
  border-radius: 4px;
  overflow: hidden;
}
.r2-time__seg {
  min-height: 74px;
  display: grid;
  align-content: end;
  gap: 2px;
  padding: 10px 12px;
  font-size: var(--step--1);
}
.r2-time__seg .t {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  font-size: .72em;
  white-space: nowrap;
}
.r2-time__seg .d { font-variant-numeric: tabular-nums; font-weight: 620; }
.r2-time__seg--film { flex: 0 0 31%; background: oklch(30% .11 27); }
.r2-time__seg--pont {
  flex: 0 0 8%;
  background: var(--color-accent);
  color: oklch(98% .01 27);
  box-shadow: 0 0 26px oklch(60% .22 27 / .55);
}
.r2-time__seg--live { flex: 1 1 auto; background: oklch(22% .06 27); }
.r2-time__seg--proto {
  flex: 0 0 14%;
  background:
    repeating-linear-gradient(-45deg,
      transparent 0 6px,
      oklch(100% 0 0 / .09) 6px 8px),
    var(--color-surface);
  color: var(--color-fg-tertiary);
}
.r2-time__legend {
  color: var(--color-fg-tertiary);
  font-size: var(--step--1);
}
@media (max-width: 720px) {
  .r2-time__bar { flex-direction: column; }
  .r2-time__seg { min-height: 0; padding: 12px; }
  .r2-time__seg--film, .r2-time__seg--pont, .r2-time__seg--proto { flex-basis: auto; }
}

/* ——— Pourquoi ça marche (réutilise concept__why) + fin de section ——— */
.r2-close {
  grid-column: 1 / -1;
  border-top: 1px solid oklch(100% 0 0 / .14);
  padding-block-start: var(--space-s);
  color: var(--color-fg-tertiary);
  font-size: var(--step--1);
}
.r2-close b { color: var(--color-fg); font-weight: 580; }

/* ——— Plan technique : la boîte rouge ——— */
.r2-tech {
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid oklch(100% 0 0 / .1);
}
.r2-tech__body {
  padding: clamp(20px, 3vw, 40px);
  display: grid;
  gap: var(--space-s);
}
.r2-tech__intro { color: var(--color-fg-secondary); line-height: 1.55; max-width: 70ch; text-wrap: pretty; }
.r2-tech__fig {
  background: oklch(11% .012 27);
  border: 1px solid oklch(100% 0 0 / .08);
  border-radius: 6px;
  padding: clamp(10px, 2vw, 24px);
}
.r2-tech__fig svg { display: block; width: 100%; height: auto; }
.r2-tech svg .ln { stroke: oklch(100% 0 0 / .45); stroke-width: 1.5; fill: none; }
.r2-tech svg .ln--soft { stroke: oklch(100% 0 0 / .2); }
.r2-tech svg .ln--dash { stroke-dasharray: 5 6; }
.r2-tech svg .red { fill: var(--color-accent); }
.r2-tech svg .red-line { stroke: var(--color-accent); stroke-width: 4; }
.r2-tech svg text {
  font-size: 15px;
  fill: var(--color-fg-tertiary);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.r2-tech svg .t-strong { fill: var(--color-fg); font-weight: 600; font-size: 17px; }
.r2-tech svg .t-red { fill: var(--color-accent); font-weight: 600; }
.r2-tech__specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--gutter);
}
.r2-spec {
  border-top: 1px solid oklch(100% 0 0 / .14);
  padding-top: var(--space-2xs);
  display: grid;
  align-content: start;
  gap: 6px;
}
.r2-spec__no { color: var(--color-accent); font-weight: 620; font-size: var(--step--1); }
.r2-spec__t { font-weight: 600; }
.r2-spec__s { color: var(--color-fg-secondary); font-size: var(--step--1); line-height: 1.5; }

/* ——— La note du réalisateur ——— */
.r2-note {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 0;
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid oklch(100% 0 0 / .1);
}
.r2-note__body {
  padding: clamp(20px, 3vw, 44px);
  display: grid;
  gap: var(--space-xs);
  align-content: start;
}
.r2-note__quote {
  font-size: var(--step-2);
  line-height: 1.22;
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
  text-wrap: balance;
}
.r2-note__p { color: var(--color-fg-secondary); line-height: 1.55; text-wrap: pretty; }
.r2-note__sig {
  color: var(--color-fg-tertiary);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: .07em;
}
.r2-note__media { position: relative; min-height: 300px; margin: 0; }
.r2-note__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .r2-note { grid-template-columns: 1fr; }
  .r2-note__media { min-height: 220px; order: -1; }
}

/* ——— La salle rouge interactive : toucher = ville ——— */
.r2-stage {
  grid-column: 1 / -1;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  min-height: min(88svh, 860px);
  background: #060407;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.r2-stage__base,
.r2-stage__mon video,
.r2-stage__mon img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.r2-stage__base { transition: opacity .5s ease; }
.r2-stage[data-mode="city"] .r2-stage__base { opacity: 0; }
.r2-stage__mon video,
.r2-stage__mon img { opacity: 0; visibility: hidden; }
.r2-stage__mon [data-on="true"] { opacity: 1; visibility: visible; }
.r2-stage__veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, oklch(4% .01 27 / .5), transparent 32% 56%, oklch(4% .01 27 / .84));
}
.r2-stage__flash {
  position: absolute;
  inset: 0;
  z-index: 6;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
.r2-stage__flash[data-on="true"] { animation: r2s-flash .24s ease-out; }
@keyframes r2s-flash {
  0% { opacity: .95; }
  100% { opacity: 0; }
}
/* le bégaiement d'image du scénario, au déclenchement d'un toucher */
.r2-stage[data-stutter="true"] .r2-stage__base { animation: r2s-stutter .38s steps(2, jump-none); }
@keyframes r2s-stutter {
  0% { transform: none; filter: none; }
  25% { transform: translate(-1.2%, .8%) scale(1.03); filter: brightness(1.6) contrast(1.2); }
  50% { transform: translate(1%, -.6%) scale(1.05); filter: brightness(.7); }
  75% { transform: translate(-.6%, -.9%) scale(1.02); filter: brightness(1.9) saturate(1.5); }
  100% { transform: none; filter: none; }
}
.r2-stage__city {
  position: absolute;
  left: clamp(20px, 3.4vw, 48px);
  bottom: clamp(96px, 13vw, 150px);
  z-index: 4;
  font-size: clamp(2.6rem, 8.5vw, 7rem);
  line-height: .95;
  text-transform: uppercase;
  pointer-events: none;
  text-shadow: 0 6px 50px oklch(0% 0 0 / .65);
}
.r2-stage__city span {
  display: inline-block;
  animation: r2s-letter .7s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: calc(var(--i) * 45ms);
}
@keyframes r2s-letter {
  0% { opacity: 0; transform: translateY(.35em); filter: blur(10px); }
  100% { opacity: 1; transform: none; filter: none; }
}
.r2-stage__cap {
  position: absolute;
  left: clamp(20px, 3.4vw, 48px);
  bottom: clamp(64px, 9vw, 108px);
  z-index: 4;
  color: var(--color-fg-secondary);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: .07em;
  pointer-events: none;
}
.r2-stage__prompt {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  text-align: center;
  pointer-events: none;
  transition: opacity .4s ease;
}
.r2-stage[data-mode="city"] .r2-stage__prompt { opacity: 0; }
.r2-stage__pulse {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 2px solid oklch(78% .16 27 / .9);
  box-shadow: 0 0 26px oklch(60% .22 27 / .55);
  animation: r2s-pulse 2.2s ease-out infinite;
  margin-bottom: 12px;
}
@keyframes r2s-pulse {
  0% { transform: scale(.7); opacity: .9; }
  70% { transform: scale(1.3); opacity: 0; }
  100% { transform: scale(.7); opacity: 0; }
}
.r2-stage__prompt-t {
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  text-shadow: 0 4px 40px oklch(0% 0 0 / .7);
}
.r2-stage__prompt-h {
  color: var(--color-fg-secondary);
  font-size: var(--step--1);
  text-shadow: 0 2px 20px oklch(0% 0 0 / .8);
}
.r2-stage__chips {
  position: absolute;
  left: 50%;
  bottom: clamp(14px, 2.4vw, 28px);
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: calc(100% - 28px);
}
.r2-stage__chip {
  appearance: none;
  border: 1px solid oklch(100% 0 0 / .18);
  background: oklch(8% .01 27 / .55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--color-fg-secondary);
  border-radius: 999px;
  padding: 9px 16px;
  font: inherit;
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: .07em;
  cursor: pointer;
  transition: color .25s, border-color .25s, background .25s, box-shadow .25s;
}
.r2-stage__chip:hover { color: var(--color-fg); border-color: oklch(100% 0 0 / .34); }
.r2-stage__chip[data-active="true"] {
  color: oklch(98% .01 27);
  background: oklch(52% .21 27 / .5);
  border-color: oklch(70% .2 27 / .7);
  box-shadow: 0 0 22px oklch(60% .22 27 / .4);
}
.r2-stage__exit {
  position: absolute;
  top: clamp(12px, 2vw, 20px);
  left: clamp(12px, 2vw, 20px);
  z-index: 5;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid oklch(100% 0 0 / .2);
  background: oklch(8% .01 27 / .5);
  color: var(--color-fg);
  font: inherit;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.r2-stage[data-mode="city"] .r2-stage__exit { opacity: 1; pointer-events: auto; }
.r2-stage__ring {
  position: absolute;
  top: -22px;
  left: -22px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid oklch(80% .15 27 / .8);
  box-shadow: 0 0 18px oklch(60% .22 27 / .45), inset 0 0 12px oklch(60% .22 27 / .25);
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s;
  will-change: transform;
}
.r2-stage__ring[data-on="true"] { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .r2-stage__pulse { animation: none; opacity: .6; }
  .r2-stage__city span { animation: none; opacity: 1; }
  .r2-stage[data-stutter="true"] .r2-stage__base { animation: none; }
  .r2-stage__flash[data-on="true"] { animation: none; }
}

/* ——— Le dernier plan du film : la foule, en direct ——— */
.r2-crowd {
  grid-column: 1 / -1;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  min-height: min(78svh, 720px);
  display: grid;
  align-content: end;
  background: #060407;
}
.r2-crowd__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: r2-crowd-zoom 18s ease-in-out infinite alternate;
}
@keyframes r2-crowd-zoom {
  0% { transform: scale(1); }
  100% { transform: scale(1.07); }
}
.r2-crowd__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(90% 60% at 18% 12%, oklch(4% .01 27 / .72), transparent 70%),
    linear-gradient(180deg, oklch(4% .01 27 / .38), transparent 42%, oklch(4% .01 27 / .9) 94%),
    radial-gradient(120% 70% at 50% 100%, oklch(45% .19 27 / .3), transparent 62%);
}
.r2-crowd__text {
  position: relative;
  z-index: 2;
  padding: clamp(24px, 4vw, 56px);
  display: grid;
  gap: var(--space-2xs);
}
.r2-crowd__label {
  color: var(--color-accent);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 580;
  text-shadow: 0 1px 14px oklch(0% 0 0 / .9);
}
.r2-crowd__vo {
  color: var(--color-fg);
  font-size: var(--step-1);
  max-width: 46ch;
  text-wrap: balance;
  text-shadow: 0 2px 24px oklch(0% 0 0 / .95), 0 0 8px oklch(0% 0 0 / .6);
}
.r2-crowd__vo span {
  display: block;
  color: var(--color-accent);
  font-size: .68rem;
  letter-spacing: .1em;
  font-weight: 620;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.r2-crowd__shout { text-shadow: 0 8px 60px oklch(0% 0 0 / .7); }
@media (prefers-reduced-motion: reduce) {
  .r2-crowd__img { animation: none; }
}

/* planche sans média : le texte prend toute la largeur */
.r2f.r2f--solo,
.r2f.r2f--solo:nth-child(even) { grid-template-columns: 1fr; }
.r2f--solo .r2f__script { max-width: 68ch; }

/* ——— Planches d'architecte : la boîte rouge en blueprint ——— */
.r2-bp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
}
.r2-bp__fig {
  margin: 0;
  display: grid;
  gap: 10px;
  align-content: start;
  cursor: zoom-in;
  outline: none;
}
.r2-bp__fig img {
  width: 100%;
  height: auto;
  display: block;
  /* encre blanche sur noir : screen fait disparaître le fond du rendu dans celui du site */
  mix-blend-mode: screen;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), filter .35s;
}
.r2-bp__fig:hover img,
.r2-bp__fig:focus-visible img {
  transform: scale(1.015);
  filter: brightness(1.12);
}
.r2-bp__fig figcaption { display: grid; gap: 2px; }
.r2-bp__no {
  color: var(--color-accent);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 620;
}
.r2-bp__t { font-weight: 600; }
.r2-bp__cap { color: var(--color-fg-tertiary); font-size: var(--step--1); line-height: 1.45; }
@media (max-width: 820px) {
  .r2-bp { grid-template-columns: 1fr; }
}

/* fiche technique compacte sous les planches */
.r2-techdata {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--gutter);
  border-top: 1px solid oklch(100% 0 0 / .14);
  padding-top: var(--space-2xs);
}
.r2-techdata > div { display: grid; gap: 2px; align-content: start; }
.r2-techdata dt {
  color: var(--color-accent);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 620;
}
.r2-techdata dd { margin: 0; color: var(--color-fg-secondary); font-size: var(--step--1); line-height: 1.5; }

/* lightbox des planches */
.bp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 3vmin;
  background: oklch(0% 0 0 / .88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  cursor: zoom-out;
}
.bp-lightbox img {
  max-width: 94vw;
  max-height: 88vh;
  mix-blend-mode: screen;
}
.bp-lightbox__cap {
  color: var(--color-fg-secondary);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: .07em;
}
.bp-lightbox__close {
  position: fixed;
  top: clamp(14px, 2.4vw, 26px);
  right: clamp(14px, 2.4vw, 26px);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid oklch(100% 0 0 / .25);
  background: oklch(10% .01 27 / .6);
  color: var(--color-fg);
  font: inherit;
  cursor: pointer;
}