/* =====================================================================
   SAINT-CYPRIEN · "LA NOUVELLE GÉNÉRATION" — la-salle.css
   La visite privée : le récit de la lignée, six postes qui S'ALLUMENT au
   passage (la lumière isole le geste), le code de la salle, le réseau comme
   preuve du titre, les infos pratiques. Réutilise base.css + home.css
   (.phero, .media, .gong, .quartier__cta) — n'ajoute que le propre à la page.
   ===================================================================== */

/* ==================== LE RÉCIT / SEO LOCAL ======================= */
.ecrin__grid { display: grid; gap: clamp(1.6rem,4vw,3.4rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 940px){ .ecrin__grid { grid-template-columns: 1fr 1.1fr; } }
.ecrin__title { margin-top: 1rem; font-size: clamp(1.9rem,1rem+2.8vw,3.4rem); }
.ecrin__prose { display: grid; gap: 1.1rem; }
.ecrin__prose p { color: var(--ink-soft); font-size: var(--step-0); line-height: 1.7; max-width: 60ch; }
.ecrin__prose strong { color: var(--spark); font-weight: 600; }

/* ====================== LA VISITE — postes ====================== */
.visite-sec__title { margin-top: 1rem; font-size: clamp(1.9rem,1rem+2.6vw,3.2rem); }
.visite-sec__lead { margin-top: .9rem; max-width: 52ch; color: var(--ink-soft); }
.visite { display: flex; flex-direction: column; gap: clamp(2.4rem,6vw,5rem); margin-top: clamp(2.4rem,5vw,3.6rem); }

.station { display: grid; gap: clamp(1.4rem,4vw,3rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 860px){
  .station { grid-template-columns: 1.05fr .95fr; }
  .station:nth-child(even) .station__media { order: 2; }
}
/* the photo, lit under a spot — dim by default, brightens when the beam lands */
.station__media { position: relative; aspect-ratio: 16/11; border-radius: calc(var(--radius) + 4px); box-shadow: var(--shadow), 0 0 0 1px var(--line); }
.station__media img { filter: contrast(1.05) brightness(.52) saturate(.82); transition: filter .8s var(--ease), transform .9s var(--ease); }
.station.is-lit .station__media img { filter: contrast(1.08) brightness(.98) saturate(.96); }
/* the beam itself — a white-hot wash that turns on at contact */
.station__glow { position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: screen; opacity: 0; transition: opacity .8s var(--ease);
  background: radial-gradient(80% 60% at 50% -8%, rgba(var(--spark-rgb),.28), rgba(var(--spark-rgb),.06) 42%, transparent 68%); }
.station.is-lit .station__glow { opacity: 1; }
/* keep the mono pill (data-label) legible over the dim photo */
.station__media::after { z-index: 3; }

.station__body { max-width: 46ch; }
.station__n { font-family: var(--f-display); font-weight: 700; font-size: clamp(2.4rem,5vw,3.6rem); line-height: 1; background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; display: block; }
.station__tag { display: inline-block; margin-top: .7rem; font: 600 var(--step--1)/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--spark); }
.station__t { font-family: var(--f-display); font-weight: 700; letter-spacing: -.02em; font-size: clamp(1.6rem,1rem+2vw,2.6rem); color: var(--ink); margin-top: .5rem; }
.station__d { margin-top: .9rem; color: var(--ink-soft); font-size: var(--step-0); line-height: 1.66; }
.station__specs { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.station__specs li { display: inline-flex; align-items: center; gap: .55ch; font: 600 .66rem/1.4 var(--f-mono); letter-spacing: .05em; color: var(--ink); background: rgba(var(--paper-2-rgb),.7); border: 1px solid var(--line); border-radius: 100px; padding: .5em .9em; }
.station__specs li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--spark); box-shadow: 0 0 9px rgba(var(--spark-rgb),.7); }

/* ========================= LE CODE ============================== */
.code-sec__title { margin-top: 1rem; font-size: clamp(1.9rem,1rem+2.4vw,3rem); }
.code { display: grid; gap: .7rem; grid-template-columns: 1fr; margin-top: clamp(1.8rem,4vw,2.6rem); }
@media (min-width: 620px){ .code { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1000px){ .code { grid-template-columns: repeat(4,1fr); } }
.codecard { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-2); padding: clamp(1.3rem,2.4vw,1.8rem); display: flex; flex-direction: column; gap: .6rem; min-height: 12rem; transition: transform .35s var(--ease-spring), box-shadow .35s, border-color .3s; }
.codecard:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: rgba(var(--ink-rgb),.3); }
.codecard__n { font: 600 .66rem/1 var(--f-mono); letter-spacing: .18em; color: var(--spark); }
.codecard__t { font-family: var(--f-display); font-weight: 700; font-size: var(--step-1); letter-spacing: -.01em; color: var(--ink); }
/* vraie prose → --ink-soft (~11:1). --muted reste aux labels/meta (loi corps ~15:1) */
.codecard__d { color: var(--ink-soft); font-size: var(--step--1); line-height: 1.6; margin-top: auto; }

/* ======================= LE RÉSEAU ============================= */
.reseau-sec__title { margin-top: 1rem; font-size: clamp(1.8rem,1rem+2.4vw,3rem); }
.reseau-sec__lead { margin-top: .9rem; max-width: 52ch; color: var(--ink-soft); }
.lineage { display: flex; flex-direction: column; gap: .6rem; margin-top: clamp(1.8rem,4vw,2.8rem); counter-reset: none; }
.sister { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(1rem,2.5vw,1.8rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-2); padding: clamp(1.1rem,2.4vw,1.6rem) clamp(1.2rem,2.6vw,1.8rem); transition: transform .35s var(--ease-spring), border-color .3s, background .3s; }
.sister:hover { transform: translateX(6px); border-color: rgba(var(--ink-rgb),.3); }
.sister__i { font: 600 .8rem/1 var(--f-mono); letter-spacing: .1em; color: var(--muted); }
.sister__tag { font: 600 .6rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--spark); }
.sister__name { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.3rem,1rem+1.4vw,2rem); letter-spacing: -.01em; color: var(--ink); margin-top: .35rem; }
.sister__feat { color: var(--muted); font-size: var(--step--1); line-height: 1.5; margin-top: .3rem; }
.sister__link { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; border: 1.5px solid var(--line); border-radius: 50%; color: var(--ink-soft); font-family: var(--f-mono); transition: border-color .3s, color .3s, transform .4s var(--ease-spring); }
.sister__link:hover { border-color: var(--spark); color: var(--spark); transform: translateY(-2px); }
/* la dernière-née = la salle allumée (le bout de la lignée) */
.sister--self { background: var(--spark); border-color: var(--spark); box-shadow: var(--glow), var(--shadow); }
.sister--self .sister__i { color: rgba(var(--void-rgb),.6); }
.sister--self .sister__tag { color: var(--on-spark); }
.sister--self .sister__name { color: var(--on-spark); }
.sister--self .sister__feat { color: rgba(var(--spark-rgb),.82); }
.sister__here { font: 600 .62rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--on-spark); background: rgba(var(--spark-rgb),.16); border: 1px solid rgba(var(--spark-rgb),.34); border-radius: 100px; padding: .55em .9em; white-space: nowrap; }

/* ===================== INFOS PRATIQUES ========================= */
.infos__grid { display: grid; gap: clamp(1.8rem,4vw,3.4rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px){ .infos__grid { grid-template-columns: 1fr .95fr; } }
.infos__title { margin-top: 1rem; font-size: clamp(2rem,1rem+3vw,3.4rem); }
.infos__lead { margin-top: 1rem; max-width: 42ch; }
.infos__facts { display: grid; gap: 1px; background: var(--line-soft); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.infos__facts li { background: var(--paper-2); padding: clamp(.9rem,1.8vw,1.2rem) clamp(1rem,2vw,1.3rem); display: flex; flex-direction: column; gap: .3rem; transition: background .3s; }
.infos__facts li:hover { background: var(--paper-3); }
.infos__facts .qk { font: 600 .6rem/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--spark); }
.infos__facts .qv { font-size: var(--step-0); color: var(--ink); font-weight: 500; }
/* ≥44px de cible tactile sur le tél (idem .cv a / .fv a) */
.infos__facts .qv a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -.7rem; transition: color .3s; }
.infos__facts .qv a:hover { color: var(--spark); }
.infos__facts .qv a:active { color: var(--ink-soft); }

/* ================ TOUCH LIFE + MOBILE PASS ===================== */
@media (hover: none){
  .station.is-lit .station__media img { filter: contrast(1.08) brightness(.92) saturate(.94); }
}
@media (max-width: 820px){
  .station__media { aspect-ratio: 16/10; }
  .visite-sec__title, .code-sec__title, .reseau-sec__title { font-size: clamp(1.5rem,6vw,2rem); }
  .sister { grid-template-columns: auto 1fr; }
  .sister__link, .sister__here { grid-column: 2; justify-self: start; margin-top: .2rem; }
}

/* ==================== LE PLAN — l'index des postes ============== */
/* Collant sous la barre : la visite se pilote au lieu de se subir. */
.plan { position: sticky; top: 4.6rem; z-index: 30; display: flex; gap: .45rem; overflow-x: auto; scrollbar-width: none;
  margin-bottom: clamp(1.6rem,3.5vw,2.4rem); padding: .55rem; border: 1px solid var(--line); border-radius: 100px;
  background: rgba(var(--paper-rgb),.86); backdrop-filter: blur(12px); box-shadow: var(--shadow); }
.plan::-webkit-scrollbar { display: none; }
.planbtn { display: inline-flex; align-items: center; gap: .75ch; flex: 0 0 auto; min-height: 44px; padding: .5em 1em; border-radius: 100px;
  border: 1px solid transparent; color: var(--ink-soft); transition: color .3s, background .3s, border-color .3s, transform .2s var(--ease-spring); }
.planbtn:hover { color: var(--ink); border-color: var(--line); }
.planbtn:active { transform: scale(.95); }
.planbtn.is-on { background: var(--spark); color: var(--on-spark); border-color: var(--spark); }
.planbtn:focus-visible { outline: 2px solid var(--spark); outline-offset: 2px; }
.planbtn__n { font: 600 .62rem/1 var(--f-mono); letter-spacing: .08em; opacity: .8; }
.planbtn__t { font: 600 var(--step--1)/1 var(--f-ui); white-space: nowrap; }
.station { scroll-margin-top: 9rem; border-radius: calc(var(--radius) + 6px); transition: box-shadow .5s var(--ease); }
.station.is-target { box-shadow: 0 0 0 1px var(--spark), var(--glow); }

/* ============ LE DÉROULÉ — de la porte au tapis ================= */
.deroule-sec__title { margin-top: 1rem; font-size: clamp(1.7rem,1rem+2.4vw,2.9rem); }
.deroule-sec__lead { margin-top: .9rem; max-width: 56ch; color: var(--ink-soft); }
.deroule { display: grid; gap: .7rem; grid-template-columns: 1fr; margin-top: clamp(1.8rem,4vw,2.8rem); counter-reset: dstep; }
@media (min-width: 720px){ .deroule { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1100px){ .deroule { grid-template-columns: repeat(4,1fr); } }
.dstep { position: relative; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-2); padding: clamp(1.2rem,2.4vw,1.6rem);
  display: flex; flex-direction: column; gap: .55rem; transition: transform .35s var(--ease-spring), box-shadow .35s, border-color .3s; }
.dstep:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: rgba(var(--ink-rgb),.3); }
/* le trait de lumière qui court d'une étape à l'autre : la chronologie
   se voit avant d'être lue (masqué en une colonne, où l'ordre suffit). */
.dstep::after { content: ""; position: absolute; top: -1px; left: 12%; width: 76%; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--spark-rgb),.4), transparent); opacity: 0; transition: opacity .6s var(--ease); }
.dstep:hover::after, .dstep.is-inview::after { opacity: 1; }
@media (max-width: 719px){ .dstep::after { display: none; } }
.dstep__k { font: 600 .62rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--spark); }
.dstep__t { font-family: var(--f-display); font-weight: 700; font-size: var(--step-1); letter-spacing: -.01em; color: var(--ink); }
.dstep__d { color: var(--ink-soft); font-size: var(--step--1); line-height: 1.6; }
.deroule__note { margin-top: clamp(1.4rem,3vw,2rem); max-width: 62ch; color: var(--ink-soft); font-size: var(--step--1); line-height: 1.6; padding-left: 1rem; border-left: 2px solid var(--line); }

@media (max-width: 820px){
  .plan { top: 3.9rem; }
  .deroule-sec__title { font-size: clamp(1.5rem,6vw,2rem); }
}