/* ═══════════════════════════════════════════════════════════════════════
   SCROLER — Page « Création de site web »
   ───────────────────────────────────────────────────────────────────────
   Suppose base.css puis page.css chargés avant.

   La page est UNE SEULE PIÈCE traversée du haut en bas. Pas de sections
   claires alternées : la respiration vient de la lumière, de la densité du
   verre et de l'échelle typographique. Chaque station reprend un geste de
   la scène 3D de l'accueil — le faisceau, le socle, l'arc de projecteurs.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --sw-holo-gap-y: clamp(30px, 3.6vw, 54px);
  --sw-holo-gap-x: clamp(20px, 2.6vw, 34px);
  /* En-tete 66 px + sommaire 50 px + respiration : sous cette valeur,
     les dalles glissaient derriere le sommaire collant. */
  /* Calé sur la hauteur RÉELLE des bandeaux, mesurée par page.js. Une
     valeur en dur cassait sous 860 px, où l en-tête double de hauteur. */
  --sw-collant: calc(var(--scr-barres-px, 116px) + 20px);
}

/* ═══════════════════════════════════════════════════════════════════════
   1. HERO — la typographie est le décor
   ═══════════════════════════════════════════════════════════════════════ */
.sw-hero {
  position: relative;
  min-height: calc(100svh - var(--scr-header-px, 66px));
  display: flex;
  align-items: center;
  padding-block: clamp(52px, 6.5vw, 88px);
  overflow: hidden;
}
/* Torche : une nappe de lumière qui suit le curseur, en fusion additive.
   C'est le seul élément qui réagit au pointeur dans le hero.          */
.sw-torche {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(460px circle at var(--tx, 50%) var(--ty, 42%),
    rgba(233,78,26,.26) 0%, rgba(233,78,26,.09) 38%, transparent 72%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .6s ease;
}
.sw-hero:hover .sw-torche { opacity: 1; }

/* Le hero deborde volontairement la mesure des autres sections : a 1036 px
   la premiere phrase du titre se coupait en deux des 66 px. A 1176 px, elle
   tient sur une ligne jusqu a 74 px. */
.sw-hero .scr-wrap { max-width: 1320px; }
.sw-hero__inner { position: relative; z-index: 2; width: 100%; }

.sw-hero h1 {
  margin: 0 0 26px;
  /* 104px donnait SIX lignes pour deux phrases : la typo monumentale ne
     convient qu aux titres courts. Calibre pour une phrase par ligne. */
  font-size: clamp(26px, 5vw, 72px);
  font-weight: 200;
  line-height: 1.04;
  letter-spacing: -.032em;
  color: var(--scr-on-night);
}
/* Chaque ligne monte de sa propre gouttière : la phrase s'assemble. */
.sw-hero h1 .sw-l { display: block; overflow: hidden; }
.sw-hero h1 .sw-l > span { display: block; }
.js .sw-hero h1 .sw-l > span {
  transform: translateY(108%);
  animation: swMonte 1.05s var(--scr-ease) forwards;
}
.js .sw-hero h1 .sw-l:nth-child(2) > span { animation-delay: .13s; }
@keyframes swMonte { to { transform: translateY(0); } }

.sw-hero h1 em {
  font-style: normal;
  color: var(--scr-orange);
  /* Le mot accentué a sa propre lueur, comme un néon dans la pièce. */
  text-shadow: 0 0 38px rgba(233,78,26,.55), 0 0 90px rgba(233,78,26,.25);
}


/* Le contenu du hero apparaît en cascade, après la montée du titre. */
.js .sw-hero .scr-lede,
.js .sw-hero__actions,
.js .sw-preuve { opacity: 0; animation: swApparait .9s ease .45s forwards; }
.js .sw-hero__actions { animation-delay: .58s; }
.js .sw-preuve { animation-delay: .7s; }
@keyframes swApparait { to { opacity: 1; } }

.sw-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* Repère de défilement, en bas du hero */
.sw-descendre {
  position: absolute;
  left: 50%; bottom: 26px;
  z-index: 2;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  font-family: var(--scr-mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  /* .55 = 5,6:1 sur la nuit — meme valeur que communication.css.
     .44 ne donnait que 3,97:1 pour du mono 10 px.                    */
  color: var(--scr-on-night-faint);
  pointer-events: none;
}
.sw-descendre i {
  display: block;
  width: 1px; height: 36px;
  background: linear-gradient(to bottom, transparent, var(--scr-orange));
}
.js .sw-descendre i { animation: swDesc 2.1s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes swDesc { 0%,100% { transform: scaleY(.35); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }
/* Hors écran dès que le hero dépasse la fenêtre : le repère n en a plus.
   Sur mobile, personne n a besoin qu on lui dise de faire défiler.   */
@media (max-height: 780px), (max-width: 860px) { .sw-descendre { display: none; } }

/* ═══════════════════════════════════════════════════════════════════════
   2. RELANCES
   ═══════════════════════════════════════════════════════════════════════ */
.sw-relance {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 30px;
  margin-top: clamp(40px, 5vw, 66px);
  padding: 30px 34px;
  border: 1px solid var(--scr-bord);
  border-left: 2px solid var(--scr-orange);
  border-radius: 4px 20px 20px 4px;
  background: var(--scr-verre-1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.sw-relance p { margin: 0; font-size: 17px; line-height: 1.65; color: var(--scr-on-night-soft); }
.sw-relance p b { font-weight: 400; color: var(--scr-on-night); }
.sw-relance .scr-btn { flex: 0 0 auto; }

/* ═══════════════════════════════════════════════════════════════════════
   3. CE QUE NOUS CRÉONS — la pile de dalles
   ───────────────────────────────────────────────────────────────────────
   Chaque offre s'accroche sous l'en-tête et la suivante vient se poser
   par-dessus. Le décalage croissant laisse dépasser la tranche de celles
   du dessous : on voit la pile se construire. Zéro JavaScript — c'est du
   `position: sticky`, donc le défilement reste celui du navigateur.
   ═══════════════════════════════════════════════════════════════════════ */
.sw-pile { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(22px, 3vw, 40px); }
.sw-pile > li { position: sticky; top: var(--sw-collant); }
.sw-pile > li:nth-child(2) { top: calc(var(--sw-collant) + 14px); }
.sw-pile > li:nth-child(3) { top: calc(var(--sw-collant) + 28px); }
.sw-pile > li:nth-child(4) { top: calc(var(--sw-collant) + 42px); }
.sw-pile > li:nth-child(5) { top: calc(var(--sw-collant) + 56px); }
.sw-pile > li:nth-child(6) { top: calc(var(--sw-collant) + 70px); }

.sw-carte {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: start;
  padding: clamp(28px, 3.4vw, 46px);
  border: 1px solid var(--scr-bord);
  border-radius: 22px;
  /* Opaque, pas translucide : une dalle doit masquer celle du dessous.
     Plafond du stop haut : #221A15 — l orange mono du prix y fait 4,54:1,
     au seuil AA. Ne pas eclaircir davantage.                          */
  background: linear-gradient(150deg, #221A15 0%, #1B1512 58%, #181310 100%);
  box-shadow: 0 -1px 0 rgba(var(--scr-encre-rgb),.06) inset, 0 30px 60px -40px #000;
  overflow: hidden;
  transition: border-color .4s ease;
}
@media (max-width: 760px) { .sw-carte { grid-template-columns: 1fr; } }
.sw-carte:hover { border-color: var(--scr-bord-vif); }
/* Le faisceau qui balaie la dalle au survol */
.sw-carte::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;                      /* même raison que le numéro */
  pointer-events: none;
  background: linear-gradient(112deg, transparent 40%, rgba(233,78,26,.14) 50%, transparent 60%);
  transform: translateX(-130%);
  transition: transform 1s cubic-bezier(.22,1,.36,1);
}
.sw-carte:hover::after { transform: translateX(130%); }

/* Numéro de la dalle.
   Il était en filet de 1 px à 16 % d'opacité et rogné par le haut : on ne
   le lisait pas, et il creusait un vide. Désormais un vrai chiffre, cadré
   dans la dalle, avec un dégradé qui le fait exister sans voler la
   vedette au titre.                                                     */
.sw-carte__num {
  position: absolute;
  top: clamp(14px, 1.6vw, 24px);
  right: clamp(18px, 2vw, 30px);
  font-size: clamp(72px, 8.5vw, 132px);
  font-weight: 200;
  line-height: .82;
  letter-spacing: -.04em;
  /* Dégradé du plein vers le vide : le chiffre s'allume par le haut. */
  background: linear-gradient(160deg, rgba(233,78,26,.62) 0%, rgba(233,78,26,.14) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px rgba(233,78,26,.34);
  pointer-events: none;
  user-select: none;
  /* Les deux colonnes de contenu sont montées en z-index 1 : sans ça, le
     bas du chiffre passait sous la liste opaque et se trouvait tranché
     net, de 23 % à 46 % de sa hauteur selon la largeur d écran. */
  z-index: 2;
  transition: -webkit-text-stroke-color .45s ease, opacity .45s ease, transform .6s var(--scr-ease);
  opacity: .85;
}
.sw-carte:hover .sw-carte__num {
  -webkit-text-stroke-color: rgba(233,78,26,.7);
  opacity: 1;
  transform: translateY(-4px);
}
/* Sous 760 px la dalle passe en une colonne : le chiffre se range au-dessus
   du titre plutôt que de se superposer au texte. */
@media (max-width: 760px) {
  .sw-carte__num { font-size: clamp(56px, 14vw, 80px); top: 10px; right: 16px; }
}
.sw-carte h3 {
  position: relative;
  /* Réserve la place du chiffre, en haut à droite. */
  padding-right: clamp(70px, 9vw, 140px);
  margin: 0 0 12px;
  font-size: clamp(24px, 2.7vw, 38px);
  font-weight: 200;
  letter-spacing: -.015em;
  color: var(--scr-on-night);
}
.sw-carte p { margin: 0; font-size: 16.5px; line-height: 1.68; color: var(--scr-on-night-soft); }

/* Prix de départ et délai, en tête de dalle : c'est la première question
   d'un dirigeant devant ce type de page, autant y répondre tout de suite. */
.sw-carte p.sw-carte__prix {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin: 0 0 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--scr-bord);
}
.sw-carte p.sw-carte__prix b {
  font-family: var(--scr-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--scr-orange);
  font-variant-numeric: tabular-nums;
}
.sw-carte p.sw-carte__prix span {
  font-family: var(--scr-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--scr-on-night-faint);
}
.sw-carte p.sw-carte__pour {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--scr-on-night-mute);
}
.sw-carte p.sw-carte__pour b { font-weight: 400; color: var(--scr-on-night); }
.sw-carte ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--scr-bord);
  border-radius: 12px;
  overflow: hidden;
}
.sw-carte li {
  padding: 14px 16px;             /* +2px d'air vertical entre deux items */
  background: #1E1915;
  font-family: var(--scr-mono);
  font-size: 12px;
  letter-spacing: .05em;
  color: var(--scr-on-night-mute);
  display: flex;
  align-items: center;
  gap: 11px;
}
.sw-carte li::before {
  content: "";
  flex: 0 0 auto;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--scr-orange);
  box-shadow: 0 0 8px rgba(233,78,26,.9);
}

/* ═══════════════════════════════════════════════════════════════════════
   4. RÉFÉRENCEMENT
   ═══════════════════════════════════════════════════════════════════════ */
.sw-seo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 5vw, 72px); align-items: start; }
@media (max-width: 900px) { .sw-seo { grid-template-columns: 1fr; } }

.sw-piliers { display: grid; gap: 1px; background: var(--scr-bord); border-radius: 18px; overflow: hidden; }
.sw-pilier {
  padding: 26px 28px;
  background: #1B1512;
  transition: background-color .35s ease;
}
.sw-pilier:hover { background: #221812; }
.sw-pilier h3 {
  margin: 0 0 9px;
  font-family: var(--scr-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--scr-orange);
}
.sw-pilier p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--scr-on-night-soft); }

.sw-serp {
  --row: 70px;
  position: relative;
  padding: 26px;
  border: 1px solid var(--scr-bord);
  border-radius: 20px;
  background: var(--scr-verre-2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.sw-serp__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 17px;
  margin-bottom: 20px;
  border-radius: 999px;
  background: rgba(var(--scr-encre-rgb),.08);
  font-size: 14.5px;
  color: var(--scr-on-night-soft);
}
.sw-serp__bar svg { flex: 0 0 auto; opacity: .6; }
.sw-serp__list { list-style: none; margin: 0; padding: 0; position: relative; }
.sw-serp__row {
  height: 62px;
  margin-bottom: 8px;
  padding: 11px 16px;
  border-radius: 12px;
  background: rgba(var(--scr-encre-rgb),.05);
  transition: transform 1s cubic-bezier(.22,1,.36,1);
}
.sw-serp__row span { display: block; height: 9px; border-radius: 4px; background: rgba(var(--scr-encre-rgb),.20); }
.sw-serp__row span + span { width: 62%; margin-top: 9px; height: 7px; background: rgba(var(--scr-encre-rgb),.12); }
.sw-serp__row--you {
  background: rgba(233,78,26,.14);
  border: 1px solid var(--scr-bord-vif);
  box-shadow: 0 0 30px -8px rgba(233,78,26,.6);
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--scr-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--scr-on-night);
}
/* #FF7A3D et non le vif : pose sur la nappe orange .14, le vif tombe
   a 3,55:1 — le clair y fait 5,17:1 (mesure).                        */
.sw-serp__row--you b { color: #FF7A3D; font-weight: 500; }
.sw-serp.is-climbed .sw-serp__row--you { transform: translateY(calc(-4 * var(--row))); }
.sw-serp.is-climbed .sw-serp__row:not(.sw-serp__row--you) { transform: translateY(var(--row)); }

/* ═══════════════════════════════════════════════════════════════════════
   5. OUTILS SUR MESURE
   ═══════════════════════════════════════════════════════════════════════ */
.sw-secteurs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.sw-secteur {
  padding: 11px 18px;
  min-height: 42px;
  border: 1.5px solid var(--scr-bord);
  border-radius: 999px;
  background: transparent;
  color: var(--scr-on-night-mute);
  font-family: var(--scr-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .2s ease;
}
.sw-secteur:hover { transform: translateY(-2px); border-color: var(--scr-orange); color: var(--scr-on-night); }
.sw-secteur[aria-selected="true"] {
  background: var(--scr-orange-d);
  border-color: var(--scr-orange-d);
  color: #fff;
  box-shadow: 0 0 26px -6px rgba(233,78,26,.85);
}
.sw-secteur--autre { border-style: dashed; border-color: rgba(233,78,26,.6); color: var(--scr-orange); }

.sw-cas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  border: 1px solid var(--scr-bord);
  border-radius: 22px;
  overflow: hidden;
  background: var(--scr-bord);
}
@media (max-width: 780px) { .sw-cas { grid-template-columns: 1fr; } }
.sw-cas[hidden] { display: none; }
.sw-cas > div { padding: clamp(28px, 3.2vw, 46px); background: #1B1512; }
/* `> div` fait (0,1,1) et bat `.sw-cas__probleme` (0,1,0) quel que soit
   l ordre : la moitié gauche n a jamais eu son fond plus sombre. */
.sw-cas > div.sw-cas__probleme { background: var(--scr-sol); }
.sw-cas h3 {
  margin: 0 0 15px;
  font-family: var(--scr-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--scr-orange);
}
.sw-cas__probleme h3 { color: var(--scr-on-night-faint); }
.sw-cas p { margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--scr-on-night-soft); }
.sw-cas ul { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sw-cas li {
  padding: 7px 13px;
  border: 1px solid var(--scr-bord);
  border-radius: 999px;
  font-family: var(--scr-mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--scr-on-night-mute);
}
.sw-cas .scr-btn { margin-top: 24px; }
/* Le panneau bascule dans l'espace au changement d'onglet. */
.js .sw-cas.is-swap { animation: swBascule .55s var(--scr-ease); transform-origin: 50% 0; }
@keyframes swBascule {
  from { opacity: 0; transform: perspective(1200px) rotateX(-7deg) translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   6. RÉALISATIONS — le mur incurvé
   ───────────────────────────────────────────────────────────────────────
   Les colonnes latérales pivotent vers le visiteur : le mur épouse le même
   arc que les trois projecteurs de l'accueil. Chaque vignette est un
   hologramme, avec sa réflexion sur le sol et son léger clignotement.
   ═══════════════════════════════════════════════════════════════════════ */
.sw-mur__barre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  margin-bottom: clamp(28px, 3.4vw, 44px);
}
.sw-filtres { display: flex; flex-wrap: wrap; gap: 8px; }
.sw-filtre {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 17px;
  min-height: 42px;
  border: 1.5px solid var(--scr-bord);
  border-radius: 999px;
  background: transparent;
  color: var(--scr-on-night-mute);
  font-family: var(--scr-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .2s ease;
}
.sw-filtre:hover { transform: translateY(-2px); border-color: var(--scr-orange); color: var(--scr-on-night); }
.sw-filtre[aria-pressed="true"] {
  background: var(--scr-orange-d);
  border-color: var(--scr-orange-d);
  color: #fff;
  box-shadow: 0 0 26px -6px rgba(233,78,26,.85);
}
.sw-filtre em { font-style: normal; opacity: .62; font-size: 11px; font-variant-numeric: tabular-nums; }


.sw-mur__fenetre { position: relative; }
.js .sw-mur[data-etat="defile"] .sw-mur__fenetre {
  height: min(var(--sw-fenetre), 76svh);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 92%, transparent 100%);
}
.sw-mur__piste { display: grid; gap: var(--sw-holo-gap-y); }
.js .sw-mur[data-etat="defile"] .sw-mur__piste {
  animation: swMur var(--sw-duree, 60s) linear infinite;
  will-change: transform;
}
/* Doit être au moins aussi spécifique que la règle `animation` ci-dessus :
   la propriété raccourcie remet animation-play-state à `running`.     */
.js .sw-mur[data-etat="defile"].is-horschamp .sw-mur__piste,
.js .sw-mur[data-etat="defile"] .sw-mur__fenetre:hover .sw-mur__piste { animation-play-state: paused; }
@keyframes swMur {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(-1 * var(--sw-cycle, 50%))); }
}

/* Colonnes explicites : l'incurvation repose sur nth-child, qui a besoin
   d'un nombre de colonnes connu.                                      */
.sw-holos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sw-holo-gap-y) var(--sw-holo-gap-x);
  perspective: 1500px;
}
@media (min-width: 700px)  { .sw-holos { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1080px) { .sw-holos { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.sw-holo { position: relative; }
.sw-holo[hidden] { display: none; }
.sw-holo__link { display: block; text-decoration: none; color: inherit; border-radius: 16px; }
.sw-holo__link:focus-visible { outline: 3px solid var(--scr-orange); outline-offset: 10px; }

.sw-holo__stage { position: relative; display: block; padding-bottom: 40px; transform-style: preserve-3d; }

.sw-holo__panel {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(233,78,26,.40);
  background: #191411;
  transform: rotateX(6deg);
  transform-origin: 50% 100%;
  box-shadow: 0 0 0 1px rgba(233,78,26,.08), 0 26px 50px -30px rgba(233,78,26,.8);
  transition: transform .6s var(--scr-ease), box-shadow .6s ease, border-color .4s ease;
  /* La réflexion sur le sol. Non supportée par Firefox : le halo du socle
     prend alors le relais, l'effet reste cohérent.                    */
  -webkit-box-reflect: below 10px linear-gradient(transparent 58%, rgba(255,255,255,.20));
}
/* L'arc : les colonnes latérales se tournent vers le visiteur. */
@media (min-width: 1080px) {
  .sw-holo:nth-child(3n+1) .sw-holo__panel { transform: rotateX(6deg) rotateY(11deg); }
  .sw-holo:nth-child(3n)   .sw-holo__panel { transform: rotateX(6deg) rotateY(-11deg); }
}
@media (min-width: 700px) and (max-width: 1079px) {
  .sw-holo:nth-child(2n+1) .sw-holo__panel { transform: rotateX(6deg) rotateY(7deg); }
  .sw-holo:nth-child(2n)   .sw-holo__panel { transform: rotateX(6deg) rotateY(-7deg); }
}

.sw-holo__shot {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  filter: saturate(.86) contrast(1.04) brightness(.92);
  transition: filter .6s ease, transform .9s var(--scr-ease);
}
/* Teinte de projection : une seule nappe continue qui monte du socle.
   PAS de trame de balayage — les lignes sombres tous les 4 px striaient
   la capture et c'est exactement ce qu'on nous reprochait. La vignette
   doit se lire comme une photo rétroéclairée : aucune modulation
   périodique, aucun clignotement. */
.sw-holo__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(var(--scr-matiere-rgb),.30) 100%),
    linear-gradient(to top, rgba(233,78,26,.30) 0%, rgba(233,78,26,.06) 55%, transparent 100%);
  transition: opacity .55s ease;
}
.sw-holo__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255,236,224,.18) 50%, transparent 58%);
  transform: translateX(-130%);
  transition: transform .95s cubic-bezier(.22,1,.36,1);
}

.sw-holo__base { position: absolute; left: 50%; bottom: 4px; width: 62%; height: 36px; transform: translateX(-50%); pointer-events: none; }
.sw-holo__base::before {
  content: "";
  position: absolute;
  left: 50%; bottom: 6px;
  width: 100%; height: 20px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(233,78,26,.7) 0%, rgba(233,78,26,.22) 42%, rgba(233,78,26,0) 74%);
  filter: blur(4px);
  transition: transform .5s ease, opacity .5s ease;
}
.sw-holo__base::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 12px;
  width: 128%; height: 34px;
  transform: translateX(-50%);
  clip-path: polygon(50% 100%, 10% 0%, 90% 0%);
  background: linear-gradient(to top, rgba(233,78,26,.46), rgba(233,78,26,0));
  opacity: .75;
  transition: opacity .5s ease;
}

/* Survol : l'hologramme se stabilise et se met face au visiteur. */
.sw-holo__link:hover .sw-holo__panel,
.sw-holo__link:focus-visible .sw-holo__panel {
  transform: rotateX(0deg) rotateY(0deg) translateY(-10px) scale(1.015);
  border-color: rgba(233,78,26,.9);
  box-shadow: 0 0 0 1px rgba(233,78,26,.3), 0 40px 70px -30px rgba(233,78,26,.95);
}
.sw-holo__link:hover .sw-holo__shot,
.sw-holo__link:focus-visible .sw-holo__shot { filter: none; transform: scale(1.04); }
.sw-holo__link:hover .sw-holo__panel::after,
.sw-holo__link:focus-visible .sw-holo__panel::after { opacity: .18; }
.sw-holo__link:hover .sw-holo__panel::before { transform: translateX(130%); }
/* 1.35 et non 1.2 : le halo au sol s'élargit sous la lueur du mur. */
.sw-holo__link:hover .sw-holo__base::before { transform: translateX(-50%) scaleX(1.35); }
.sw-holo__link:hover .sw-holo__base::after { opacity: 1; }

.sw-holo__meta { display: block; margin-top: 18px; }
.sw-holo__meta h3 { margin: 0; font-size: 19px; font-weight: 300; color: var(--scr-on-night); transition: color .3s ease; }
.sw-holo__dom {
  display: block;
  margin-top: 4px;
  font-family: var(--scr-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--scr-on-night-faint);
  /* break-all coupait les noms de domaine n importe ou, au milieu d un
     mot. break-word ne coupe que si la ligne deborde vraiment. */
  overflow-wrap: break-word;
}
.sw-holo__sect {
  display: inline-block;
  margin-top: 11px;
  padding: 4px 10px;
  border: 1px solid var(--scr-bord);
  border-radius: 999px;
  font-family: var(--scr-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--scr-on-night-mute);
}
.sw-holo__link:hover .sw-holo__meta h3 { color: var(--scr-orange); }

.sw-vide {
  padding: 40px 0;
  font-family: var(--scr-mono);
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--scr-on-night-mute);
}
.sw-vide[hidden] { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   7. MÉTHODE — le faisceau descend
   ═══════════════════════════════════════════════════════════════════════ */
.sw-etapes { list-style: none; margin: 0; padding: 0; position: relative; }
/* Le rail, et la lumière qui le remplit au fur et à mesure. */
.sw-etapes::before {
  content: "";
  position: absolute;
  left: 17px; top: 8px; bottom: 8px;
  width: 1px;
  background: var(--scr-bord);
}
.sw-etape { position: relative; padding: 0 0 clamp(34px, 4vw, 58px) 58px; }
.sw-etape:last-child { padding-bottom: 0; }
.sw-etape__n {
  position: absolute;
  left: 0; top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px; height: 35px;
  border: 1px solid var(--scr-bord);
  border-radius: 50%;
  background: var(--scr-sol);
  font-family: var(--scr-mono);
  font-size: 12px;
  color: var(--scr-on-night-faint);
  transition: color .5s ease, border-color .5s ease, box-shadow .5s ease;
}
.sw-etape.is-in .sw-etape__n {
  color: var(--scr-orange);
  border-color: var(--scr-orange);
  box-shadow: 0 0 26px -4px rgba(233,78,26,.9);
}
.sw-etape h3 {
  margin: 4px 0 10px;
  font-size: clamp(21px, 2.2vw, 28px);
  font-weight: 200;
  color: var(--scr-on-night);
}
.sw-etape p { margin: 0; font-size: 17px; line-height: 1.68; color: var(--scr-on-night-soft); }
/* Segment de faisceau, allumé étape par étape */
.sw-etape::before {
  content: "";
  position: absolute;
  left: 17px; top: 35px; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, var(--scr-orange), rgba(233,78,26,.15));
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform .9s var(--scr-ease);
}
.sw-etape.is-in::before { transform: scaleY(1); }
.sw-etape:last-child::before { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   Préférences système
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .js .sw-hero h1 .sw-l > span { transform: none; animation: none; }
  .js .sw-hero .scr-lede, .js .sw-hero__actions, .js .sw-preuve { opacity: 1; animation: none; }
  .js .sw-descendre i { animation: none; }
  .sw-torche { display: none; }
  .sw-carte::after, .sw-holo__panel::before { display: none; }
  .sw-holo__panel { transform: none !important; }
  .sw-holo__link:hover .sw-holo__shot { transform: none; }
  .sw-serp.is-climbed .sw-serp__row--you,
  .sw-serp.is-climbed .sw-serp__row:not(.sw-serp__row--you) { transition: none; }
  .js .sw-cas.is-swap { animation: none; }
  .sw-etape::before { transition: none; }
  .js .sw-mur .sw-mur__piste { animation: none; }
  .js .sw-mur .sw-mur__fenetre { height: auto; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  /* La pile perd son accroche : les dalles se lisent à la suite. */
  .sw-pile > li { position: static; }
}

@media (forced-colors: active) {
  .sw-torche, .sw-holo__base, .sw-carte__num { display: none; }
  .sw-holo__panel::after, .sw-holo__panel::before { display: none; }
  .sw-holos--clone { display: none; }
  /* (0,3,0) : la règle d arc en nth-child fait (0,2,0) et l emporterait. */
  .sw-holo:nth-child(n) .sw-holo__panel { transform: none; }
  .sw-holo__panel { -webkit-box-reflect: none; }
  .sw-holo__shot { filter: none; }
  .sw-filtre[aria-pressed="true"], .sw-secteur[aria-selected="true"] { border: 3px solid ButtonText; }
}

@media print {
  .sw-hero { min-height: 0; }
  /* Recensement exhaustif du texte clair : sans ces sélecteurs, la page
     sortait en grande partie blanche sur blanc. */
  .sw-hero h1, .sw-hero h1 em, .sw-preuve, .sw-preuve b,
  .sw-carte, .sw-carte h3, .sw-carte p, .sw-carte li,
  .sw-carte p.sw-carte__prix b, .sw-carte p.sw-carte__prix span,
  .sw-carte p.sw-carte__pour, .sw-carte .sw-carte__titrePoints,
  .sw-avertissement, .sw-consigne,
  .sw-pilier h3, .sw-pilier .sw-pilier__phrase, .sw-pilier p,
  .sw-serp__bar, .sw-serp__legende,
  .sw-cas h3, .sw-cas > div.sw-cas__probleme h3, .sw-cas p, .sw-cas li,
  .sw-etude h3, .sw-etude__bloc dt,
  .sw-etudes__titre,
  .sw-etape h3, .sw-etape p, .sw-etape p.sw-etape__duree,
  .sw-faq summary, .sw-faq__rep{ color: #000; }
  .sw-carte { background: #fff; border-color: #ccc; }
  .sw-carte__num { display: none; }
  /* Le clone du mur est un doublon décoratif : sans cette règle, les 21
     réalisations sortaient deux fois, soit 42 vignettes. */
  .sw-holos--clone { display: none; }
  /* (0,3,0) pour battre la règle d arc en nth-child, sinon les vignettes
     s impriment encore pivotées. */
  .sw-holo:nth-child(n) .sw-holo__panel { transform: none; }
  .sw-torche, .sw-descendre, .sw-mur__barre, .sw-secteurs, .sw-relance { display: none; }
  .sw-pile > li { position: static; }
  .sw-carte { background: #fff; color: #000; border-color: #999; }
  .sw-mur__fenetre { height: auto !important; overflow: visible !important; mask-image: none !important; }
  .sw-mur__piste { animation: none !important; }
  .sw-holo__panel { transform: none; -webkit-box-reflect: none; border-color: #999; }
  .sw-holo__shot { filter: none; }
  .sw-holos { grid-template-columns: repeat(3, 1fr); }
  .sw-holo__meta h3, .sw-holo__dom, .sw-holo__sect { color: #000; }
}

/* Durée de l'étape, sous son titre : c'est l'information que cherche le
   lecteur quand il parcourt une méthode. */
.sw-etape p.sw-etape__duree {
  margin: 0 0 10px;
  font-family: var(--scr-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--scr-orange);
}

/* ═══════════════════════════════════════════════════════════════════════
   12. MINI ÉTUDES DE CAS
   ───────────────────────────────────────────────────────────────────────
   Un récit par rangée, et non plus trois colonnes : côte à côte, les
   trois cas se lisaient comme trois rayons (la marque blanche, le
   e-commerce, la formation). En rangée, chacun montre la même chose —
   un besoin, puis plusieurs savoir-faire au service d'une seule réponse.
   À gauche le besoin et l'avant, à droite ce sur quoi nous avons travaillé et
   le résultat ; sous 900 px, tout se replie en une colonne.
   ═══════════════════════════════════════════════════════════════════════ */
.sw-cas-etudes {
  list-style: none;
  margin: 0 0 clamp(28px, 3.4vw, 44px);
  padding: 0;
  display: grid;
  gap: 20px;
}
.sw-etude {
  display: grid;
  gap: 18px clamp(28px, 4vw, 60px);
  padding: clamp(24px, 2.8vw, 38px);
  border: 1px solid var(--scr-bord);
  border-radius: 20px;
  background: var(--scr-verre-1);
}
@media (min-width: 900px) {
  .sw-etude { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
}
.sw-etude__tete,
.sw-etude__corps {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
/* Le besoin : la phrase qui ouvre le récit, un cran au-dessus du reste. */
.sw-etude__bloc dd.sw-etude__besoin {
  font-size: clamp(17px, 1.45vw, 19px);
  line-height: 1.45;
  font-weight: 300;
  color: var(--scr-on-night);
}

/* ─── Nous avons travaillé sur ────────────────────────────────────────
   Les apports sont enfilés sur un même trait : ce ne sont pas des
   prestations juxtaposées, c'est une seule réponse. Chacun porte le
   savoir-faire qu'il mobilise, dans la même pastille neutre pour tous —
   aucun pôle n'a sa couleur, justement.                              */
.sw-etude__apports {
  position: relative;
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
.sw-etude__apports::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  bottom: 9px;
  width: 1px;
  background: linear-gradient(to bottom, var(--scr-orange), var(--scr-bord-vif) 70%, var(--scr-bord));
}
.sw-etude__apports > li {
  position: relative;
  padding-left: 26px;
}
.sw-etude__apports > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--scr-orange);
}

/* La pastille de savoir-faire : dans un apport (au-dessus de la phrase)
   comme dans le bandeau « Le site, et le reste » (en rangée).        */
.sw-savoir {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 6px;
  padding: 3px 10px;
  border: 1px solid var(--scr-bord-vif);
  border-radius: 999px;
  font-family: var(--scr-mono);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--scr-on-night-mute);
}
.sw-savoirs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sw-savoirs .sw-savoir { margin: 0; }

/* ─── Le site, et le reste ────────────────────────────────────────────
   Les clients du mur qui sont aussi dans la vitrine de la page
   Communication. Même feuille que les récits, liseré orange à gauche
   comme les relances : c'est un pont vers une autre page.           */
.sw-ensemble {
  display: grid;
  gap: 22px clamp(28px, 4vw, 60px);
  margin: 0 0 clamp(40px, 5vw, 64px);
  padding: clamp(24px, 2.8vw, 38px);
  border: 1px solid var(--scr-bord);
  border-left: 2px solid var(--scr-orange);
  border-radius: 4px 20px 20px 4px;
  background: var(--scr-verre-1);
}
/* Le lien vient après la liste dans le HTML — c'est l'ordre de lecture
   en colonne. En deux colonnes, il remonte sous le texte de gauche.  */
@media (min-width: 900px) {
  .sw-ensemble {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    grid-template-areas: "tete liste" "lien liste";
    grid-template-rows: auto 1fr;
    align-items: start;
  }
  .sw-ensemble__tete { grid-area: tete; }
  .sw-ensemble__liste { grid-area: liste; }
  .sw-ensemble__lien { grid-area: lien; }
}
.sw-ensemble__tete { min-width: 0; }
.sw-ensemble__surtitre {
  margin: 0 0 12px;
  font-family: var(--scr-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--scr-on-night-faint);
}
.sw-ensemble h3 {
  margin: 0 0 12px;
  font-size: clamp(19px, 1.7vw, 23px);
  font-weight: 300;
  line-height: 1.3;
  color: var(--scr-on-night);
  text-wrap: balance;
}
.sw-ensemble__tete > p:not(.sw-ensemble__surtitre) {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--scr-on-night-soft);
}
.sw-ensemble p.sw-ensemble__lien { margin: 0; }
.sw-ensemble__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.sw-ensemble__liste > li {
  display: grid;
  gap: 10px;
  padding: 16px 0;
  border-top: 1px solid var(--scr-bord);
}
.sw-ensemble__liste > li:first-child { padding-top: 0; border-top: 0; }
.sw-ensemble__liste > li:last-child { padding-bottom: 0; }
.sw-ensemble__liste b {
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--scr-on-night);
}
.sw-etude h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 300;
  color: var(--scr-on-night);
}
.sw-etude__bloc dt {
  font-family: var(--scr-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #FF7A3D;              /* orange eclairci : sur verre-1, l orange de
                                  marque tombe sous 4,5:1 */
  margin-bottom: 6px;
}
.sw-etude__bloc dd { margin: 0 0 18px; font-size: 15.5px; line-height: 1.62; color: var(--scr-on-night-soft); }
.sw-etude__bloc dd:last-child { margin-bottom: 0; }
.sw-etude dl { margin: 0; }

/* ═══════════════════════════════════════════════════════════════════════
   13. FAQ — <details> natif, donc utilisable sans JavaScript
   ═══════════════════════════════════════════════════════════════════════ */
.sw-faq { border-top: 1px solid var(--scr-bord); }
.sw-faq details { border-bottom: 1px solid var(--scr-bord); }
.sw-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(20px, 2.2vw, 26px) clamp(6px, 1.2vw, 16px);
  cursor: pointer;
  list-style: none;
  font-size: clamp(17px, 1.7vw, 21px);
  font-weight: 300;
  color: var(--scr-on-night);
  transition: color .3s ease;
}
.sw-faq summary::-webkit-details-marker { display: none; }
.sw-faq summary:hover { color: var(--scr-orange); }
.sw-faq summary:focus-visible { outline: 3px solid var(--scr-orange); outline-offset: -3px; border-radius: 6px; }
/* Le chevron, dessiné en CSS pour rester net à toutes les tailles */
.sw-faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 10px; height: 10px;
  border-right: 1.5px solid var(--scr-orange);
  border-bottom: 1.5px solid var(--scr-orange);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform .35s var(--scr-ease);
}
.sw-faq details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.sw-faq__rep {
  margin: 0;
  padding: 0 clamp(6px, 1.2vw, 16px) clamp(24px, 2.6vw, 30px);
  font-size: 17px;
  line-height: 1.7;
  color: var(--scr-on-night-soft);
}
.sw-faq__rep + .sw-faq__rep { padding-top: 0; margin-top: -12px; }

/* ═══════════════════════════════════════════════════════════════════════
   14. Bandeau de chiffres : variante textuelle
   ═══════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .sw-faq summary::after { transition: none; }
}
@media print {
  .sw-faq details { border-color: #ccc; }
  .sw-faq details[open] summary::after { display: none; }.sw-faq summary, .sw-faq__rep, .sw-etude h3{ color: #000; }
}

/* ═══════════════════════════════════════════════════════════════════════
   15. Compléments issus de l'analyse éditoriale
   ═══════════════════════════════════════════════════════════════════════ */

/* Mise en garde honnête sur le référencement, mise en avant plutôt que
   noyée : c'est elle qui rend le reste du bloc crédible. */
.sw-avertissement {
  margin: 0 0 clamp(34px, 4vw, 52px);
  padding: 22px 26px;
  border-left: 2px solid var(--scr-orange);
  background: var(--scr-verre-1);
  border-radius: 2px 14px 14px 2px;
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--scr-on-night);
}

/* Intertitre des piliers SEO : la phrase qui résume, puis le détail. */
.sw-pilier .sw-pilier__phrase {
  margin: 0 0 8px;
  font-size: 16.5px;
  line-height: 1.45;
  color: var(--scr-on-night);
}
.sw-pilier .sw-pilier__phrase + p { font-size: 15px; }

/* Légende de l'illustration SERP, à la place du chiffre de position. */
.sw-serp__legende {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--scr-bord);
  font-size: 15px;
  line-height: 1.6;
  color: var(--scr-on-night-soft);
}

/* Consigne de lecture, au-dessus du mur */
.sw-consigne {
  margin: 0 0 clamp(28px, 3.4vw, 44px);
  font-size: 16px;
  line-height: 1.6;
  color: var(--scr-on-night-soft);
}

/* Titre des mini études de cas */
.sw-etudes__titre {
  margin: 0 0 clamp(20px, 2.4vw, 28px);
  font-family: var(--scr-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--scr-on-night-faint);
}

/* Intitulé de la colonne de droite des dalles d'offre */
.sw-carte .sw-carte__titrePoints {
  margin: 0 0 12px;
  font-family: var(--scr-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--scr-on-night-faint);
}

/* ═══════════════════════════════════════════════════════════════════════
   16. Ligne de preuve du hero
   ───────────────────────────────────────────────────────────────────────
   Remplace le bandeau de trois « chiffres clés ». Il n'y avait qu'un seul
   chiffre réel — 21 sites — et les deux autres étaient du remplissage
   pour tenir la grille. Une ligne de faits vaut mieux que trois colonnes
   dont deux sont vides de sens, et elle ne se casse plus en deux rangées.
   ═══════════════════════════════════════════════════════════════════════ */
.sw-preuve {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 26px;
  margin: clamp(32px, 4vw, 50px) 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--scr-bord);
  font-family: var(--scr-mono);
  font-size: 12px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--scr-on-night-mute);
}
.sw-preuve span { display: inline-flex; align-items: center; gap: 11px; }
.sw-preuve span::before {
  content: "";
  flex: 0 0 auto;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--scr-orange);
  box-shadow: 0 0 9px rgba(233,78,26,.9);
}
.sw-preuve b {
  font-weight: 500;
  color: var(--scr-on-night);
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════════
   17. LE SCANNER DU HERO
   ───────────────────────────────────────────────────────────────────────
   Une grille fine, révélée par un masque radial qui suit le curseur : le
   faisceau balaie le plan de travail et en découvre la structure. Les
   coordonnées --tx/--ty sont celles que torche() pose déjà sur le hero —
   zéro JavaScript nouveau, une seule écriture par frame déjà amortie.
   Sans JS, le masque reste au centre : une lueur fixe et discrète.
   ═══════════════════════════════════════════════════════════════════════ */
.sw-scan {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg,  rgba(233,78,26,.13) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(233,78,26,.13) 0 1px, transparent 1px 56px);
  -webkit-mask-image: radial-gradient(300px circle at var(--tx, 50%) var(--ty, 42%), #000 0%, transparent 70%);
  mask-image: radial-gradient(300px circle at var(--tx, 50%) var(--ty, 42%), #000 0%, transparent 70%);
  opacity: 0;
  transition: opacity .6s ease;
}
.sw-hero:hover .sw-scan { opacity: 1; }
@media (pointer: coarse) { .sw-scan { display: none; } }

/* ═══════════════════════════════════════════════════════════════════════
   18. LA PILE D'OFFRES EN PROFONDEUR — pilotée par le défilement, zéro JS
   ───────────────────────────────────────────────────────────────────────
   a) Tranche lumineuse : un liseré orange en haut de chaque dalle,
      présent partout (opacité .25 au repos).
   b) Sous @supports : quand la dalle suivante entre à l'écran, la dalle
      recouverte recule (scale + brightness) — chaque carte N écoute la
      view-timeline de la carte N+1 via timeline-scope, car une carte
      collée (sticky) ne traverse plus elle-même le scrollport. Et le
      liseré s'allume à l'entrée de sa propre carte puis retombe à .25.
   Navigateurs sans animation-timeline (Firefox…) : rien ne s'applique,
   la pile actuelle est le repli. Le sticky (top/position) reste intact :
   seuls transform, filter et opacity sont animés.
   ═══════════════════════════════════════════════════════════════════════ */
.sw-carte::before {
  content: "";
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 2px;
  z-index: 1;
  pointer-events: none;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--scr-orange), transparent);
  opacity: .25;
}

@supports (animation-timeline: view()) {
  .sw-pile { timeline-scope: --sw-c2, --sw-c3, --sw-c4, --sw-c5, --sw-c6; }
  .sw-pile > li:nth-child(2) { view-timeline: --sw-c2 block; }
  .sw-pile > li:nth-child(3) { view-timeline: --sw-c3 block; }
  .sw-pile > li:nth-child(4) { view-timeline: --sw-c4 block; }
  .sw-pile > li:nth-child(5) { view-timeline: --sw-c5 block; }
  .sw-pile > li:nth-child(6) { view-timeline: --sw-c6 block; }

  .sw-pile > li {
    animation: swPileRecul linear both;
    animation-range: entry 40% contain 30%;
  }
  .sw-pile > li:nth-child(1) { animation-timeline: --sw-c2; }
  .sw-pile > li:nth-child(2) { animation-timeline: --sw-c3; }
  .sw-pile > li:nth-child(3) { animation-timeline: --sw-c4; }
  .sw-pile > li:nth-child(4) { animation-timeline: --sw-c5; }
  .sw-pile > li:nth-child(5) { animation-timeline: --sw-c6; }
  /* la dernière dalle n'est jamais recouverte : pas de recul */
  .sw-pile > li:last-child { animation: none; }

  .sw-carte::before {
    animation: swTranche linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
  }
}
@keyframes swPileRecul {
  to { transform: scale(.965) translateY(-6px); filter: brightness(.82) saturate(.9); }
}
@keyframes swTranche {
  0%   { opacity: 0; }
  55%  { opacity: 1; }
  100% { opacity: .25; }
}

/* ═══════════════════════════════════════════════════════════════════════
   19. LA TRAÎNÉE DE LA REMONTÉE SERP
   ═══════════════════════════════════════════════════════════════════════ */
.sw-serp__trail {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
/* Les rangées passent DEVANT la traînée ; la barre et la légende aussi. */
.sw-serp__list { z-index: 1; }
.sw-serp__bar, .sw-serp__legende { position: relative; z-index: 1; }

/* filtre ajouté aux transitions de rangée : les rangées dépassées
   s'assombrissent et s'écartent en 180 ms, sans boucle.               */
.sw-serp__row { transition: transform 1s cubic-bezier(.22,1,.36,1), filter .18s ease; }
.sw-serp.is-climbed .sw-serp__row.is-depasse:not(.sw-serp__row--you) {
  transform: translateY(var(--row)) translateX(2px);
  filter: brightness(.7);
}

/* Curseur de frappe dans la barre de recherche : 4 clignotements puis
   silence — jamais de boucle infinie (WCAG 2.2.2).                    */
.js .sw-serp__bar::after {
  content: "";
  flex: 0 0 auto;
  width: 2px;
  height: 1.05em;
  margin-left: -4px;
  background: var(--scr-orange);
  box-shadow: 0 0 8px rgba(233,78,26,.8);
  opacity: 0;
  animation: swCaret 1.1s steps(2, jump-none) 4;
}
@keyframes swCaret {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   20. CTA MAGNÉTIQUES — le geste de conversion
   ───────────────────────────────────────────────────────────────────────
   Le JavaScript (site-web-cta.js) ne touche que les custom properties :
   la translation et son retour élastique vivent ici. Le halo interne
   s'allume au survol ET au :focus-visible — le clavier a le même feu,
   centré par défaut. Sans JS, --sw-mx/--sw-my restent à zéro.
   ═══════════════════════════════════════════════════════════════════════ */
.scr-btn {
  position: relative;
  transform: translate(var(--sw-mx, 0px), var(--sw-my, 0px));
  transition: background-color .28s ease, color .28s ease, border-color .28s ease,
              transform .5s var(--scr-ease);
}
.scr-btn::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(120px circle at var(--bx, 50%) var(--by, 50%),
    rgba(233,78,26,.28), transparent 70%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .35s ease;
}
.scr-btn:hover::after,
.scr-btn:focus-visible::after { opacity: 1; }
@keyframes swSocleRespire {
  from { opacity: .5; }
  to   { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════
   21. LA LUEUR DU MUR 2D (états defile/grille)
   ═══════════════════════════════════════════════════════════════════════ */
.sw-mur__lueur {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
    rgba(233,78,26,.10), transparent 72%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .6s ease;
}
.sw-mur__fenetre:hover .sw-mur__lueur { opacity: 1; }
/* En mode scène WebGL, c'est la PointLight qui fait ce travail. */
.sw-mur[data-etat="scene"] .sw-mur__lueur { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   22. Préférences système — compléments des sections 17 à 21
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .sw-scan, .sw-mur__lueur, .sw-serp__trail { display: none; }
  .sw-pile > li { animation: none; }
  .sw-carte::before { animation: none; opacity: .25; }
  .sw-serp__row { transition: none; }
  .js .sw-serp__bar::after { animation: none; opacity: 0; }
  .scr-btn { transform: none; transition: background-color .28s ease, color .28s ease, border-color .28s ease; }
}
@media (forced-colors: active) {.sw-scan, .sw-mur__lueur, .sw-serp__trail,
  .scr-btn::after, .sw-carte::before{ display: none; }
}
@media print {.sw-scan, .sw-mur__lueur, .sw-serp__trail,
  .scr-btn::after, .sw-carte::before{ display: none; }
  .sw-pile > li { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   23. Passe lecture — le gras accroche l'œil qui balaye
   ───────────────────────────────────────────────────────────────────────
   Les <b> de contenu passent en couleur papier pleine, comme dans les
   relances. Les <b> déjà stylés en orange (prix des dalles, rangée SERP)
   restent orange : leurs sélecteurs sont plus spécifiques.            */.sw-carte p b,
.sw-cas p b,
.sw-faq__rep b,
.sw-etape p b,
.sw-consigne b,
.sw-avertissement b,
.sw-etude__bloc dd b{
  font-weight: 400;
  color: var(--scr-on-night);
}

/* ═══════════════════════════════════════════════════════════════════════
   19. MICRO-INTERACTIONS DE LA PAGE
   ═══════════════════════════════════════════════════════════════════════ */

/* Les dalles d'offre s'inclinent vers le curseur, comme les hologrammes
   du mur. Amplitude faible : le texte doit rester lisible pendant. */
.sw-pile > li { perspective: 1400px; }
.sw-carte {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: border-color .4s ease, transform .5s var(--scr-ease);
}
/* La lueur du curseur passe SOUS le contenu, au-dessus du fond. */
.sw-carte::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%),
    rgba(233,78,26,.13), transparent 72%);
  transition: opacity .45s ease;
}
.sw-carte:hover::before { opacity: 1; }
/* `> div` et non `> *` : un `*` attrapait aussi .sw-carte__num et écrasait
   son position:absolute. Le numéro devenait alors une case de la grille,
   volait une colonne au texte et laissait la dalle à moitié vide. */
.sw-carte > div { position: relative; z-index: 1; }

/* Onglets secteur : un curseur glisse sous l'onglet actif plutôt qu'un
   simple changement de fond. */
.sw-secteurs { position: relative; }
.sw-secteurs__glisseur {
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  width: 1px;
  border-radius: 999px;
  background: var(--scr-orange-d);
  box-shadow: 0 0 26px -6px rgba(233,78,26,.85);
  transform: translate(var(--x, 0), var(--y, 0)) scaleX(var(--w, 0));
  transform-origin: 0 50%;
  transition: transform .45s var(--scr-ease);
  pointer-events: none;
  opacity: 0;
  z-index: 0;
}
.sw-secteurs.is-actif .sw-secteurs__glisseur { opacity: 1; }
.sw-secteur { position: relative; z-index: 1; }
/* Le fond plein n'est plus nécessaire : le curseur le remplace. */
/* Le curseur orange ne bouge pas au survol : l onglet actif ne doit pas
   se lever non plus, sinon les deux se désalignent de 2 px. */
.sw-secteur[aria-selected="true"]:hover { transform: none; }
.sw-secteur[aria-selected="true"] {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

/* Les filtres du mur : le compteur pulse au changement. */
.sw-filtre em { transition: transform .3s var(--scr-ease), opacity .3s ease; }
.sw-filtre[aria-pressed="true"] em { transform: scale(1.18); opacity: 1; }

/* Le repère de défilement du hero réagit au survol du hero. */
.sw-hero:hover .sw-descendre { color: var(--scr-on-night-mute); }

@media (prefers-reduced-motion: reduce) {
  .sw-carte { transform: none; transition: border-color .4s ease; }.sw-carte::before{ display: none; }
  .sw-secteurs__glisseur { transition: none; }
  .sw-filtre[aria-pressed="true"] em { transform: none; }
}
@media (forced-colors: active) {
  .sw-carte { transform: none; }.sw-carte::before, .sw-secteurs__glisseur{ display: none; }
  .sw-secteur[aria-selected="true"] { border: 3px solid ButtonText; }
}

/* ═══════════════════════════════════════════════════════════════════════
   24. RÉUNION DU 24/08/2026
   ───────────────────────────────────────────────────────────────────────
   Les bénéfices sortis du paragraphe, le trajet vitrine → outil métier,
   la phrase qui porte chaque offre, et les réalisations mises en avant.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── « Ce que nous vous apportons : » ────────────────────────────────
   Ces quatre bénéfices ouvraient un pavé de six lignes ; personne ne
   les voyait. Ils deviennent des pastilles, et une mise en avant passe
   de l'une à l'autre — le « petit défilé » demandé en réunion.        */
.sw-gains__intro {
  margin: clamp(22px, 2.6vw, 32px) 0 14px;
  font-family: var(--scr-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--scr-orange);
}
.sw-gains {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin: 0 0 clamp(22px, 2.6vw, 30px);
  padding: 0;
}
.sw-gain {
  padding: 9px 18px;
  border: 1px solid var(--scr-bord);
  border-radius: 999px;
  background: var(--scr-verre-1);
  font-size: 15px;
  line-height: 1.25;
  color: var(--scr-on-night-soft);
  transition: color .5s ease, border-color .5s ease,
              background-color .5s ease, transform .5s var(--scr-ease);
}
.sw-gain.is-on {
  transform: translateY(-2px);
  border-color: rgba(233,78,26,.55);
  background: rgba(233,78,26,.10);
  color: var(--scr-on-night);
}

/* ─── Du site vitrine à l'outil métier ────────────────────────────────
   Le titre disait la même chose en trois lignes. Un trajet se montre. */
.sw-trajet {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin: 20px 0 0;
  font-family: var(--scr-mono);
  font-size: 12.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.sw-trajet__bout {
  padding: 8px 16px;
  border: 1px solid var(--scr-bord);
  border-radius: 999px;
  color: var(--scr-on-night-mute);
}
.sw-trajet__bout--fort {
  border-color: rgba(233,78,26,.55);
  background: rgba(233,78,26,.10);
  color: var(--scr-on-night);
}
.sw-trajet__fleche {
  width: 86px; height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--scr-orange);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ─── La phrase qui porte l'offre ─────────────────────────────────────
   « Prendre la meilleure phrase et la mettre en avant » : les dalles
   faisaient un pavé qu'on ne lisait pas jusqu'au bout. Sélecteur en
   .sw-carte p.X, comme .sw-carte__prix — à égalité de spécificité, la
   règle .sw-carte p gagnerait par sa position dans le fichier.        */
.sw-carte p.sw-carte__phare {
  margin: 0 0 14px;
  font-size: clamp(18px, 1.5vw, 21px);
  font-weight: 300;
  line-height: 1.38;
  color: var(--scr-on-night);
  text-wrap: balance;
}
.sw-carte__cadeau { color: var(--scr-orange); }
.sw-carte__cadeau::marker { color: var(--scr-orange); }

/* ─── Études de cas ───────────────────────────────────────────────── */
.sw-etude__rang {
  align-self: flex-start;
  margin: 0;
  padding: 4px 11px;
  border: 1px solid rgba(233,78,26,.5);
  border-radius: 999px;
  font-family: var(--scr-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #FF7A3D;
}
.sw-etude__lien { margin: 4px 0 0; }
.sw-etude__lien a {
  font-family: var(--scr-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--scr-on-night-mute);
  text-underline-offset: 4px;
  transition: color .3s ease;
}
.sw-etude__lien a:hover { color: var(--scr-orange); }

/* ─── Réalisations mises en avant ─────────────────────────────────────
   Les sept sites nommés en réunion. Ils gardent leur place dans le mur :
   seul un liseré les distingue, en grille comme dans le théâtre.     */
.sw-holo.is-vedette .sw-holo__panel {
  box-shadow: 0 0 0 1px rgba(233,78,26,.55), 0 18px 50px -22px rgba(233,78,26,.5);
}
.sw-holo.is-vedette .sw-holo__meta h3 { color: var(--scr-on-night); }
.sw-holo.is-vedette .sw-holo__sect { color: #FF7A3D; }

@media (prefers-reduced-motion: reduce) {
  .sw-gain, .sw-etude__lien a { transition: none; }
  .sw-gain.is-on { transform: none; }
}
@media print {
  .sw-gain, .sw-gains__intro, .sw-trajet__bout,
  .sw-carte p.sw-carte__phare, .sw-etude__rang,
  .sw-etude__lien a { color: #000; }
  /* Récits et bandeau : le noir d'encre et le gris de marque, par leurs
     jetons, qui ne changent pas d'un thème à l'autre.               */
  .sw-etude__bloc dd, .sw-etude__bloc dd.sw-etude__besoin, .sw-savoir,
  .sw-ensemble h3, .sw-ensemble p, .sw-ensemble__liste b { color: var(--scr-ink); }
  .sw-savoir { border-color: var(--scr-grey); }
  .sw-gain.is-on { background: none; }
  .sw-holo.is-vedette .sw-holo__panel { box-shadow: none; }
}
@media (forced-colors: active) {
  .sw-gain.is-on { border: 2px solid Highlight; }
  .sw-holo.is-vedette .sw-holo__panel { outline: 2px solid Highlight; }
  /* Le fil et ses perles sont des fonds : le mode contraste les
     effacerait. Ils passent à la couleur du texte.                   */
  .sw-etude__apports::before,
  .sw-etude__apports > li::before { forced-color-adjust: none; background: CanvasText; }
  .sw-savoir { border-color: CanvasText; }
}

/* ═══════════════════════════════════════════════════════════════════════
   THÈME CLAIR — « l'atelier de jour »
   ───────────────────────────────────────────────────────────────────────
   Même pièce, même mise en page : seules la matière et la lumière
   changent. Le verre devient une feuille de papier plus blanche que le
   sol, posée avec une ombre chaude ; la lumière orange devient de
   l'encre. Les jetons (base.css, page.css) font l'essentiel : il ne
   reste ici que ce qu'ils ne savent pas dire — aplats opaques des
   dalles, lueurs, fusions et oranges éclaircis pensés pour la nuit.
   Chaque sélecteur est préfixé par :root[data-theme="light"] ; quand
   il faut battre un état (survol, vedette), l'état est redéclaré ici
   avec le même préfixe, dans le même ordre que plus haut.
   ═══════════════════════════════════════════════════════════════════════ */

/* L'ombre des feuilles : chaude et diffuse. Une ombre noire sur du
   papier ferait une tache, pas un relief.                              */
:root[data-theme="light"] .sw-relance,
:root[data-theme="light"] .sw-etude,
:root[data-theme="light"] .sw-ensemble,
:root[data-theme="light"] .sw-serp,
:root[data-theme="light"] .sw-piliers,
:root[data-theme="light"] .sw-cas { box-shadow: 0 24px 60px -36px rgba(60,35,20,.28); }

/* ─── Hero ──────────────────────────────────────────────────────────── */
/* Le néon du mot accentué brouillait la lettre sur le papier : il n'en
   reste qu'un lavis, juste assez pour que le mot se détache.          */
:root[data-theme="light"] .sw-hero h1 em { text-shadow: 0 0 40px rgba(233,78,26,.16); }
/* `screen` n'ajoute rien à du blanc : la torche, le halo des boutons et
   la lueur du mur passent en multiplication — un lavis orange qui suit
   le curseur, plus léger pour ne pas salir la feuille.               */
:root[data-theme="light"] .sw-torche {
  background: radial-gradient(460px circle at var(--tx, 50%) var(--ty, 42%),
    rgba(233,78,26,.14) 0%, rgba(233,78,26,.05) 38%, transparent 72%);
  mix-blend-mode: multiply;
}
:root[data-theme="light"] .scr-btn::after,
:root[data-theme="light"] .sw-mur__lueur { mix-blend-mode: multiply; }
:root[data-theme="light"] .sw-preuve span::before,
:root[data-theme="light"] .sw-carte li::before { box-shadow: 0 0 6px rgba(233,78,26,.35); }

/* ─── Dalles d'offre ────────────────────────────────────────────────────
   Toujours opaques — une dalle doit masquer celle du dessous — mais en
   papier blanc. L'orange mono du prix y tient 5,3:1.                  */
:root[data-theme="light"] .sw-carte {
  background: linear-gradient(150deg, #FFFFFF 0%, #FCFAF7 58%, #F9F6F1 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 30px 60px -38px rgba(60,35,20,.32);
}
/* La liste des points : un cran sous le blanc de la dalle, pour que les
   filets de 1 px (le fond du <ul>) se lisent comme des séparations.   */
:root[data-theme="light"] .sw-carte li { background: #F7F4EF; }

/* ─── Référencement ─────────────────────────────────────────────────── */
:root[data-theme="light"] .sw-pilier { background: #FBF9F5; }
:root[data-theme="light"] .sw-pilier:hover { background: #FFF5EE; }
:root[data-theme="light"] .sw-serp__row--you { box-shadow: 0 12px 28px -16px rgba(168,54,15,.45); }
/* Le #FF7A3D de nuit tombe à 2,4:1 sur la nappe orange claire : c'est
   l'orange profond qui prend le relais (6:1).                         */
:root[data-theme="light"] .sw-serp__row--you b { color: var(--scr-orange-d); }
/* Les rangées dépassées « s'éteignent » la nuit par brightness(.7) ; sur
   le papier, assombrir un voile d'encre ne l'efface pas, ça le fonce.
   Le jour, elles pâlissent — toujours par `filter`, pour garder la
   transition de 180 ms.                                               */
:root[data-theme="light"] .sw-serp.is-climbed .sw-serp__row.is-depasse:not(.sw-serp__row--you) { filter: opacity(.5); }
/* Le curseur de frappe : un trait d'encre, plus un néon. */
:root[data-theme="light"] .sw-serp__bar::after { box-shadow: 0 0 5px rgba(233,78,26,.35); }

/* ─── Onglets et filtres ────────────────────────────────────────────────
   L'actif garde son aplat orange et son texte blanc ; seule sa lueur
   devient une ombre portée.                                           */
:root[data-theme="light"] .sw-secteurs__glisseur,
:root[data-theme="light"] .sw-filtre[aria-pressed="true"] { box-shadow: 0 8px 22px -10px rgba(168,54,15,.55); }
/* Le compteur était atténué par opacité (.62) : sur le papier il
   tombait à 3:1. Il passe au palier discret, pleine opacité, et
   reprend la couleur du bouton quand celui-ci est actif (blanc).     */
:root[data-theme="light"] .sw-filtre em { opacity: 1; color: var(--scr-on-night-faint); }
:root[data-theme="light"] .sw-filtre[aria-pressed="true"] em { color: inherit; }

/* ─── Panneaux secteur ──────────────────────────────────────────────────
   La moitié « solution » est la feuille ; la moitié « problème » garde
   le ton du sol, un cran en retrait. Le second sélecteur doit être
   redit : sans lui, le premier (0,3,1) l'emporterait sur les deux.    */
:root[data-theme="light"] .sw-cas > div { background: #FBF9F5; }
:root[data-theme="light"] .sw-cas > div.sw-cas__probleme { background: var(--scr-sol); }

/* ─── Mur des réalisations (2D) ─────────────────────────────────────────
   Les captures restent intactes : le filtre qui les assombrissait dans
   la pièce de nuit tombe. Le cadre projette une ombre chaude au lieu
   d'une lueur, la teinte de projection n'est plus qu'un lavis orange
   montant du socle, sans vignettage.                                  */
:root[data-theme="light"] .sw-holo__panel {
  background: #E9E4DD;
  box-shadow: 0 0 0 1px rgba(233,78,26,.08), 0 26px 44px -30px rgba(120,45,15,.45);
}
:root[data-theme="light"] .sw-holo__shot { filter: none; }
:root[data-theme="light"] .sw-holo__panel::after {
  background: linear-gradient(to top, rgba(233,78,26,.16) 0%, rgba(233,78,26,.04) 55%, transparent 100%);
}
:root[data-theme="light"] .sw-holo__link:hover .sw-holo__panel,
:root[data-theme="light"] .sw-holo__link:focus-visible .sw-holo__panel {
  box-shadow: 0 0 0 1px rgba(233,78,26,.3), 0 40px 60px -30px rgba(120,45,15,.5);
}
/* Après le survol, comme la nuit : la vedette garde son liseré même
   survolée.                                                           */
:root[data-theme="light"] .sw-holo.is-vedette .sw-holo__panel {
  box-shadow: 0 0 0 1px rgba(233,78,26,.55), 0 18px 44px -24px rgba(120,45,15,.45);
}
:root[data-theme="light"] .sw-holo.is-vedette .sw-holo__sect { color: var(--scr-orange); }

/* ─── Méthode et études de cas ──────────────────────────────────────── */
:root[data-theme="light"] .sw-etape.is-in .sw-etape__n { box-shadow: 0 0 18px -4px rgba(233,78,26,.45); }
/* Oranges éclaircis pour la nuit (#FF7A3D) : illisibles sur le papier,
   ils reprennent l'orange de jour (4,9:1 sur la feuille).            */
:root[data-theme="light"] .sw-etude__bloc dt,
:root[data-theme="light"] .sw-etude__rang { color: var(--scr-orange); }