/* ═══════════════════════════════════════════════════════════════════════
   SCROLER — Mobilier commun aux pages intérieures
   ───────────────────────────────────────────────────────────────────────
   Principe : les pages intérieures ne sont pas des documents, ce sont des
   stations dans LA MÊME PIÈCE que celle de la page d'accueil. Un seul sol
   nocturne du haut en bas, éclairé à l'orange, dans lequel le contenu se
   matérialise sur des dalles de verre.

   Il n'y a donc PAS d'alternance clair/sombre : c'est elle qui donnait à
   la page son air de brochure d'agence. La respiration vient du matériau
   (verre plus ou moins dense) et de la lumière, pas du fond.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --scr-header: 66px;
  /* Version toujours numerique : --scr-header passe a `auto` sur mobile,
     ce qui casserait les calc() du sommaire et des ancres. */
  --scr-header-px: 66px;
  /* Densités de verre, du plus discret au plus affirmé */
  --scr-verre-1: rgba(242,239,234,.055);
  --scr-verre-2: rgba(242,239,234,.085);
  --scr-bord:    rgba(242,239,234,.17);
  --scr-bord-vif:rgba(233,78,26,.52);
  /* Le pied de page : une bande plus sombre que le sol en thème sombre,
     plus claire en thème clair (l'orange des liens y garde 4,6:1). */
  --scr-pied: rgba(0,0,0,.62);
}

/* Thème clair : le verre devient du papier plus blanc que le sol, posé
   dessus avec un trait d'encre. Voir base.css pour le reste des jetons. */
:root[data-theme="light"] {
  --scr-verre-1: rgba(255,255,255,.5);
  --scr-verre-2: rgba(255,255,255,.72);
  --scr-bord:    rgba(27,23,20,.14);
  --scr-bord-vif:rgba(193,61,18,.5);
  --scr-pied:    rgba(255,255,255,.45);
}

html { background: var(--scr-sol); }

/* Le fond est porté par <html> (plus haut) et NON par <body> : un fond sur
   <body> passerait devant le canvas en z-index négatif et le masquerait. */
body.scr-nuit {
  background: transparent;
  color: var(--scr-on-night);
}

/* ═══ Matière — grain et lumière ═══════════════════════════════════════
   Deux voiles fixes portés par les pseudo-éléments du body, donc sans
   toucher au HTML. Le halo (::before) réchauffe le haut de page ; le
   grain (::after, feTurbulence en data-URI, ≈.028 d'opacité) passe
   au-dessus de tout et fait basculer le noir d'« écran éteint » à
   « pellicule ». Les deux sont inertes au pointeur et coupés en
   impression et en couleurs forcées.                                  */
body.scr-nuit::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 120% 60% at 50% -12%, rgba(233,78,26,.05) 0%, transparent 65%);
}
body.scr-nuit::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* ═══ La salle — décor de fond, fixe derrière tout ═════════════════════ */
.scr-salle {
  position: fixed;
  inset: 0;
  /* z-index négatif plutôt que de repositionner tous les enfants de body :
     la règle `.scr-nuit > *` qui servait à ça écrasait le position:sticky
     de l'en-tête, qui cessait donc de se coller en haut.
     Le décor se glisse entre le fond de <html> et le contenu de <body>. */
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Voile qui assombrit le décor derrière les zones de lecture dense */
.scr-voile {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 120% 80% at 50% 50%, rgba(var(--scr-matiere-rgb),.86) 0%, rgba(var(--scr-matiere-rgb),.55) 60%, transparent 100%);
}

/* ═══ Barre de progression ═════════════════════════════════════════════ */
.scr-progress {
  position: fixed;
  top: 0; left: 0;
  z-index: 60;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--scr-orange-d), var(--scr-orange));
  pointer-events: none;
}
/* Animation pilotée par le défilement, sans une ligne de JavaScript.
   Là où ce n'est pas supporté, la barre reste simplement invisible.  */
@supports (animation-timeline: scroll()) {
  .scr-progress {
    animation: scrProgress linear forwards;
    animation-timeline: scroll(root block);
  }
  @keyframes scrProgress { to { transform: scaleX(1); } }
}

/* ═══ En-tête ══════════════════════════════════════════════════════════ */
.scr-head {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--scr-header);
  display: flex;
  align-items: center;
  gap: 24px;
  padding-inline: var(--scr-gutter);
  background: rgba(var(--scr-matiere-rgb),.72);
  border-bottom: 1px solid rgba(var(--scr-encre-rgb),.08);
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  color: var(--scr-on-night);
}

.scr-logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: inherit;
  font-weight: 300;
  font-size: 19px;
  letter-spacing: .06em;
  flex: 0 0 auto;
}
.scr-logo img { width: 21px; height: 21px; }
.scr-logo b { font-weight: 300; }
.scr-logo:hover b { color: var(--scr-orange); }

.scr-head nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.scr-head nav a {
  padding: 9px 14px;
  border-radius: 999px;
  font-family: var(--scr-mono);
  font-size: 11.5px;
  letter-spacing: .11em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--scr-on-night-mute);
  white-space: nowrap;
  transition: color .25s ease, background-color .25s ease;
}
.scr-head nav a:hover { color: var(--scr-on-night); background: rgba(var(--scr-encre-rgb),.08); }
.scr-head nav a[aria-current="page"] { color: var(--scr-orange); }
.scr-head nav a.scr-head__cta { border: 1.5px solid var(--scr-orange); color: var(--scr-on-night); }
.scr-head nav a.scr-head__cta:hover { background: var(--scr-orange-d); border-color: var(--scr-orange-d); color: #fff; }
/* La bascule de thème se range à droite de la navigation. */
.scr-head .scr-theme { margin-left: 4px; }

@media (max-width: 860px) {
  :root { --scr-header: auto; }
  .scr-head { flex-direction: column; align-items: stretch; gap: 0; height: auto; padding-block: 12px 0; }
  /* Fondu au bord droit : l indice qu on peut faire defiler la nav.
     Le padding final de 44 px fait qu en fin de course le CTA sort
     entierement de la zone fondue — rien ne semble tronque.          */
  .scr-head nav {
    margin-left: 0;
    overflow-x: auto;
    padding-bottom: 10px;
    padding-inline-end: 44px;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent);
  }
  .scr-head nav::-webkit-scrollbar { display: none; }
  /* L'en-tête passe en colonne : la bascule remonte sur la ligne du
     logo, à droite, au lieu de prendre une rangée entière.          */
  .scr-head .scr-theme {
    position: absolute;
    top: 7px;
    right: var(--scr-gutter);
    width: 36px; height: 36px;
    margin: 0;
  }
}

/* ═══ Sections ═════════════════════════════════════════════════════════ */
/* overflow-x: clip — le bassin de lumiere de __head (inset -16%) deborde
   du bord droit et rendait la page pannable de 36 px sur mobile. clip et
   non hidden : aucun conteneur de defilement cree, sticky intact.     */
.scr-section { position: relative; padding-block: clamp(76px, 11vw, 168px); overflow-x: clip; }

.scr-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  font-family: var(--scr-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--scr-orange);
}
.scr-eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .55; }
.scr-eyebrow--center { justify-content: center; }

/* Les titres de section : grands, fins, serrés. C'est la typographie qui
   porte la page, pas les encadrés.                                    */
.scr-section h2 {
  margin: 0 0 20px;
  /* Calibre pour que les titres longs de la page tiennent en DEUX lignes
     a pleine largeur. Au-dela, ils se hachaient en trois ou quatre. */
  font-size: clamp(24px, 3.4vw, 46px);
  font-weight: 200;
  line-height: 1.1;
  letter-spacing: -.018em;
  color: var(--scr-on-night);
  text-wrap: balance;
}
.scr-section h2 em { font-style: normal; color: var(--scr-orange); }

/* Le chapo est bride a 75ch : a pleine largeur il depassait 95 caracteres
   par ligne et l oeil perdait le retour a la ligne. La lecon reste la
   meme qu avec l ancienne bride a 58ch : on mesure LE CHAPO, jamais le
   conteneur ni le h2 — c est la bride sur __head qui etranglait les
   titres a 668 px sur une page large de 1180.                        */
.scr-lede {
  max-width: 75ch;
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.75;
  color: var(--scr-on-night-soft);
}
/* Pas de max-width ici (voir ci-dessus) — et un leger bassin de lumiere
   derriere chaque tete de section : la lecture commence toujours dans
   une zone eclairee.                                                  */
.scr-section__head { position: relative; margin-bottom: clamp(44px, 5.5vw, 78px); }
.scr-section__head::before {
  content: "";
  position: absolute;
  inset: -14% -16%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 72% 85% at 26% 32%, rgba(233,78,26,.055) 0%, transparent 70%);
}

/* ═══ Boutons ══════════════════════════════════════════════════════════ */
.scr-nuit .scr-btn { color: var(--scr-on-night); border-color: currentColor; }
.scr-nuit .scr-btn--accent { color: var(--scr-orange); }
.scr-nuit .scr-btn:hover {
  background: var(--scr-orange-d);
  border-color: var(--scr-orange-d);
  color: #fff;
}

/* ═══ Révélation au défilement ═════════════════════════════════════════ */
.js .scr-reveal { opacity: 0; transform: translateY(22px); }
.js .scr-reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .8s ease, transform .8s var(--scr-ease);
}
.js .scr-reveal.is-in:nth-child(2) { transition-delay: .08s; }
.js .scr-reveal.is-in:nth-child(3) { transition-delay: .16s; }
.js .scr-reveal.is-in:nth-child(4) { transition-delay: .24s; }
.js .scr-reveal.is-in:nth-child(5) { transition-delay: .32s; }
.js .scr-reveal.is-in:nth-child(6) { transition-delay: .40s; }

/* ═══ Pied de page ═════════════════════════════════════════════════════ */
.scr-foot {
  position: relative;
  background: var(--scr-pied);
  border-top: 1px solid var(--scr-bord);
  color: var(--scr-on-night-soft);
  padding-block: clamp(54px, 6vw, 84px) 30px;
  font-size: 15px;
}
.scr-foot__grid {
  display: grid;
  /* 4 colonnes : logo, pôles, studio, zones (pages locales, 09/10/2026). */
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
@media (max-width: 760px) { .scr-foot__grid { grid-template-columns: 1fr; } }

.scr-foot h2 {
  margin: 0 0 14px;
  font-family: var(--scr-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--scr-on-night-faint);
}
.scr-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.scr-foot ul a { display: inline-block; padding-block: 2px; }
.scr-foot a { color: var(--scr-on-night-soft); text-decoration: none; }
.scr-foot a:not(.scr-logo):hover { color: var(--scr-orange); text-decoration: underline; }
.scr-foot__baseline { max-width: 34ch; line-height: 1.6; }
.scr-foot .scr-logo { margin-bottom: 14px; }
.scr-foot__bottom {
  margin-top: clamp(34px, 4vw, 54px);
  padding-top: 22px;
  border-top: 1px solid rgba(var(--scr-encre-rgb),.12);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  align-items: center;
  font-family: var(--scr-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--scr-on-night-faint);
}
.scr-foot__bottom a { color: inherit; }

/* ═══ Préférences système ══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .js .scr-reveal { opacity: 1; transform: none; }
  .scr-progress { animation: none; transform: scaleX(0); }
}
@media (forced-colors: active) {
  .scr-salle, .scr-voile, .scr-progress { display: none; }
  body.scr-nuit::before, body.scr-nuit::after,
  .scr-section__head::before { display: none; }
  .scr-head { border-bottom: 1px solid CanvasText; }
}
@media print {
  html, body.scr-nuit { background: #fff; color: #000; }
  .scr-salle, .scr-voile, .scr-progress, .scr-head, .scr-sommaire { display: none; }
  body.scr-nuit::before, body.scr-nuit::after,
  .scr-section__head::before { display: none; }
  .scr-section { padding-block: 18pt; }
  /* Chaque famille de texte doit être citée : une couleur posée sur le
     conteneur n est pas héritée par un enfant qui a la sienne. */
  .scr-section h2, .scr-lede,
  .scr-foot, .scr-foot h2, .scr-foot a, .scr-foot ul a,
  .scr-foot__bottom, .scr-foot__bottom a, .scr-foot .scr-logo,
  .scr-foot__baseline, .scr-eyebrow { color: #000; }
  .scr-foot { background: #fff; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SOMMAIRE COLLANT
   ───────────────────────────────────────────────────────────────────────
   La page couvre trois activités distinctes (sites, visibilité, outils)
   réparties sur onze sections. Ce bandeau les rend atteignables d'un clic
   et indique en permanence où l'on se trouve.

   Il est placé APRÈS le hero dans le document : il n'apparaît donc qu'une
   fois celui-ci dépassé, sans ajouter de barre au premier écran.
   ═══════════════════════════════════════════════════════════════════════ */
.scr-sommaire {
  position: sticky;
  top: var(--scr-header-px, 66px);
  z-index: 40;
  border-block: 1px solid var(--scr-bord);
  background: rgba(11,10,10,.80);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
}
.scr-sommaire__piste {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  list-style: none;
  margin: 0;
  padding: 0;
}
.scr-sommaire__piste::-webkit-scrollbar { display: none; }

.scr-sommaire a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 15px 16px;
  white-space: nowrap;
  text-decoration: none;
  font-family: var(--scr-mono);
  font-size: 11.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--scr-on-night-faint);
  transition: color .3s ease;
}
.scr-sommaire a:hover { color: var(--scr-on-night); }
.scr-sommaire a[aria-current="true"] { color: var(--scr-orange); }

/* Les trois activités portent un numéro ; le reste est secondaire. */
.scr-sommaire__num {
  font-size: 9.5px;
  letter-spacing: .1em;
  color: var(--scr-orange);
  opacity: .8;
}
.scr-sommaire li:not(.scr-sommaire--pilier) a { color: var(--scr-on-night-faint); }
.scr-sommaire li:not(.scr-sommaire--pilier) a:hover { color: var(--scr-on-night-soft); }
.scr-sommaire li:not(.scr-sommaire--pilier) a[aria-current="true"] { color: var(--scr-orange); }

/* Séparateur entre les trois piliers et le reste */
.scr-sommaire__coupe {
  flex: 0 0 auto;
  align-self: center;
  width: 1px;
  height: 16px;
  margin-inline: 10px;
  background: var(--scr-bord);
}

/* Le curseur qui glisse d'une entrée à l'autre. Position et largeur
   posées par le JS ; seul `transform` est animé, donc composité.     */
.scr-sommaire__glisseur {
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  width: 1px;
  background: var(--scr-orange);
  box-shadow: 0 0 12px rgba(233,78,26,.9);
  transform: translateX(var(--x, 0)) scaleX(var(--w, 0));
  transform-origin: 0 50%;
  transition: transform .45s var(--scr-ease);
  pointer-events: none;
  opacity: 0;
}
.scr-sommaire.is-actif .scr-sommaire__glisseur { opacity: 1; }

/* Sous 860 px l'en-tête fait deux rangées : empiler un second bandeau
   collant mangerait le peu de hauteur disponible. Il défile alors
   normalement avec la page.                                          */
@media (max-width: 860px) {
  .scr-sommaire { position: static; }
  .scr-sommaire a { padding: 13px 13px; font-size: 11px; }
}

/* Les ancres ne doivent pas se retrouver sous les deux bandeaux. */
:target,
.scr-section[id] { scroll-margin-top: calc(var(--scr-barres-px, 116px) + 14px); }

@media (prefers-reduced-motion: reduce) {
  .scr-sommaire__glisseur { transition: none; }
}
@media (forced-colors: active) {
  .scr-sommaire__glisseur { display: none; }
  .scr-sommaire a[aria-current="true"] { text-decoration: underline; }
}
@media print { .scr-sommaire { display: none; } }

/* ═══════════════════════════════════════════════════════════════════════
   MICRO-INTERACTIONS PARTAGÉES
   ───────────────────────────────────────────────────────────────────────
   Les variables --mx/--my, --rx/--ry et --gx/--gy sont posées par
   micro.js. Sans JavaScript elles valent leur repli et rien ne bouge.
   ═══════════════════════════════════════════════════════════════════════ */

/* Bouton magnétique : il se décale vers le curseur, jamais plus de 7 px. */
[data-magnetique] {
  transform: translate(var(--mx, 0), var(--my, 0));
  transition: transform .45s var(--scr-ease), background-color .28s ease,
              color .28s ease, border-color .28s ease;
}
[data-magnetique]:active { transition-duration: .1s; }

/* Lueur qui suit le curseur à l'intérieur d'un bloc. */
.scr-lueur { position: relative; isolation: isolate; }
.scr-lueur::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(320px circle at var(--gx, 50%) var(--gy, 50%),
    rgba(233,78,26,.16), transparent 70%);
  transition: opacity .4s ease;
}
.scr-lueur:hover::after { opacity: 1; }

/* Soulignement qui se dessine sous les liens de texte. */
.scr-souligne {
  position: relative;
  text-decoration: none;
  background-image: linear-gradient(var(--scr-orange), var(--scr-orange));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size .45s var(--scr-ease), color .3s ease;
}
.scr-souligne:hover { background-size: 100% 1px; color: var(--scr-on-night); }

@media (prefers-reduced-motion: reduce) {
  [data-magnetique] { transform: none; transition: none; }
  .scr-lueur::after { display: none; }
  .scr-souligne { transition: none; }
}
@media (forced-colors: active) {
  [data-magnetique] { transform: none; }
  .scr-lueur::after { display: none; }
}
/* ═══════════════════════════════════════════════════════════════════════
   LES TROIS PÔLES — le théâtre de l'accueil, en pied de page
   ───────────────────────────────────────────────────────────────────────
   Partagé par les pages de pôle : poles-3d.js s'accroche au même
   balisage partout. Deux états superposés. Sans WebGL, en mouvement
   réduit ou sous
   900 px — seuls les trois liens s'affichent, centrés, et ils suffisent.
   Quand poles-3d.js prend la main il pose data-etat="scene" : la
   scène apparaît, et les liens passent dessous en petits repères.
   ═══════════════════════════════════════════════════════════════════════ */
.scr-poles { text-align: center; }
.scr-poles h2 {
  max-width: 900px;
  margin-inline: auto;
  font-size: clamp(26px, 3.6vw, 50px);
}
.scr-poles .scr-lede { max-width: 74ch; margin-inline: auto; text-align: center; }

.scr-poles__theatre {
  position: relative;
  margin-top: clamp(30px, 4vw, 46px);
}

/* Repli : les trois liens, alignés, rien de plus. */
.scr-poles__liens {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
.scr-poles__ici {
  margin-left: 10px;
  font-family: var(--scr-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--scr-on-night-mute);
}

/* La scène n'occupe la place que lorsqu'elle existe : hauteur nulle
   tant que data-etat n'est pas posé, donc aucun trou dans la page. */
.scr-poles__scene { display: none; }
.scr-poles__theatre[data-etat] .scr-poles__scene {
  display: block;
  width: 100%;
  height: clamp(340px, 40vw, 520px);
  /* Le fond du théâtre : la même nuit que le hero, en plus discret. */
  background:
    radial-gradient(120% 90% at 50% 100%, rgba(233,78,26,.10), transparent 60%),
    radial-gradient(90% 70% at 50% 0%, rgba(var(--scr-encre-rgb),.04), transparent 70%);
  border-radius: 22px;
  overflow: hidden;
}
.scr-poles__theatre[data-etat] .scr-poles__scene canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Les liens restent — c'est par eux qu'on navigue au clavier — mais ils
   se font discrets sous la scène, qui dit déjà la même chose. */
.scr-poles__theatre[data-etat="scene"] .scr-poles__liens {
  margin-top: 22px;
  gap: 10px;
}
.scr-poles__theatre[data-etat="scene"] .scr-poles__lien {
  padding: 9px 16px;
  font-size: 13px;
}

/* Pastilles de pôle.
   `display:flex` posé sur une classe bat l'attribut `hidden`, qui ne
   vaut que `display:none` dans la feuille du navigateur. Sans ces deux
   gardes, la barre s'afficherait vide avant que la scène n'existe. */
.scr-poles__barre[hidden], .scr-poles__nav[hidden] { display: none; }
.scr-poles__barre {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 18px;
}
.scr-poles__nav { display: flex; gap: 12px; }
.scr-poles__pip {
  width: 26px; height: 26px;              /* cible réelle ≥ 24 px */
  padding: 0;
  border: 1px solid var(--scr-bord);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: border-color .35s ease, background-color .35s ease, transform .35s var(--scr-ease);
}
.scr-poles__pip::before {
  content: "";
  display: block;
  width: 7px; height: 7px;
  margin: auto;
  border-radius: 50%;
  background: var(--pip, var(--scr-orange));
  opacity: .45;
  transition: opacity .35s ease, transform .35s var(--scr-ease);
}
.scr-poles__pip[aria-current="true"] {
  border-color: var(--pip, var(--scr-orange));
  transform: scale(1.12);
}
.scr-poles__pip[aria-current="true"]::before { opacity: 1; transform: scale(1.25); }
.scr-poles__pip:hover::before { opacity: .85; }

@media (prefers-reduced-motion: reduce) {
  .scr-poles__pip, .scr-poles__pip::before { transition: none; }
}
@media print {
  .scr-poles__scene, .scr-poles__barre { display: none !important; }
  .scr-poles h2, .scr-poles .scr-lede, .scr-poles__lien, .scr-poles__ici { color: #000; }
}
@media (forced-colors: active) {
  .scr-poles__pip[aria-current="true"] { border: 2px solid Highlight; }
}

/* ─── THÈME CLAIR — le théâtre passe de la nuit à l'atelier ───────────
   Rangé ici plutôt qu'en fin de fichier : le bloc appartient au théâtre,
   qui a son propre script. La scène 3D s'adapte d'elle-même
   (poles-3d.js) ; ici, le fond garde la trace de la lampe en bas, plus
   légère, et reçoit le jour d'en haut plutôt qu'un voile d'encre qui
   salirait le papier. Les pastilles prennent la teinte de trait posée
   par poles-3d.js (--pip-jour, 4,5:1 au moins sur le papier) : la
   lumière de nuit de la Communication, presque blanche, ne s'y verrait
   pas. Le repli (les trois liens seuls) n'a rien à régler : ce sont des
   .scr-btn, déjà convertis. */
:root[data-theme="light"] .scr-poles__theatre[data-etat] .scr-poles__scene {
  background:
    radial-gradient(120% 90% at 50% 100%, rgba(233,78,26,.07), transparent 60%),
    radial-gradient(90% 70% at 50% 0%, rgba(255,255,255,.55), transparent 70%);
}
:root[data-theme="light"] .scr-poles__pip::before { background: var(--pip-jour, var(--scr-orange)); }
:root[data-theme="light"] .scr-poles__pip[aria-current="true"] { border-color: var(--pip-jour, var(--scr-orange)); }
@media (forced-colors: active) {
  :root[data-theme="light"] .scr-poles__pip[aria-current="true"] { border-color: Highlight; }
}

/* ═══════════════════════════════════════════════════════════════════════
   THÈME CLAIR — ce que les jetons ne couvrent pas
   ───────────────────────────────────────────────────────────────────────
   Les voiles et le grain sont pensés pour la nuit : sur le papier, le
   grain passe en multiplication (une trame d'imprimerie plutôt qu'une
   pellicule) et le bandeau du sommaire prend la matière claire.       */
:root[data-theme="light"] body.scr-nuit::after { opacity: .05; mix-blend-mode: multiply; }
:root[data-theme="light"] .scr-sommaire { background: rgba(var(--scr-matiere-rgb),.86); }
:root[data-theme="light"] .scr-sommaire__glisseur { box-shadow: none; }
/* Les numéros des piliers étaient atténués à .8 : 3,6:1 sur le papier. */
:root[data-theme="light"] .scr-sommaire__num { opacity: 1; }