/* ═══════════════════════════════════════════════════════════════════════
   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-paper);
}
/* 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: rgba(242,239,234,.55);
  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-paper); }
.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(242,239,234,.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-paper);
}
.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: rgba(242,239,234,.60);
}
.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-paper); }
.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: rgba(242,239,234,.74);
  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(242,239,234,.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(242,239,234,.05);
  transition: transform 1s cubic-bezier(.22,1,.36,1);
}
.sw-serp__row span { display: block; height: 9px; border-radius: 4px; background: rgba(242,239,234,.20); }
.sw-serp__row span + span { width: 62%; margin-top: 9px; height: 7px; background: rgba(242,239,234,.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-paper);
}
/* #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)); }

.sw-serp__rank {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--scr-bord);
  font-family: var(--scr-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(242,239,234,.62);
}
.sw-serp__rank b {
  font-family: var(--scr-font);
  font-size: 38px;
  font-weight: 200;
  letter-spacing: 0;
  color: var(--scr-orange);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 26px rgba(233,78,26,.6);
}

/* ═══════════════════════════════════════════════════════════════════════
   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: rgba(242,239,234,.74);
  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-paper); }
.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-night); }
.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: rgba(242,239,234,.5); }
.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: rgba(242,239,234,.7);
}
.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: rgba(242,239,234,.74);
  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-paper); }
.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-lecture {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  min-height: 42px;
  border: 1.5px solid var(--scr-bord);
  border-radius: 999px;
  background: transparent;
  color: rgba(242,239,234,.74);
  font-family: var(--scr-mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease;
}
.sw-lecture:hover { border-color: var(--scr-orange); color: var(--scr-paper); }
.sw-lecture__pause { display: none; }
.sw-mur.is-pause .sw-lecture__pause { display: block; }
.sw-mur.is-pause .sw-lecture__play { display: none; }
.sw-mur[data-etat="grille"] .sw-lecture { display: none; }

.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-pause .sw-mur__piste,
.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(23,18,15,.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-paper); transition: color .3s ease; }
.sw-holo__dom {
  display: block;
  margin-top: 4px;
  font-family: var(--scr-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: rgba(242,239,234,.60);
  /* 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: rgba(242,239,234,.66);
}
.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: rgba(242,239,234,.66);
}
.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-night);
  font-family: var(--scr-mono);
  font-size: 12px;
  color: rgba(242,239,234,.6);
  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-paper);
}
.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; }

/* ═══════════════════════════════════════════════════════════════════════
   8. CE QUI EST COMPRIS — la fiche technique
   ───────────────────────────────────────────────────────────────────────
   Prix de départ, délais, propriété, suivi. C'est ce que cherche un
   dirigeant avant d'écrire, et c'est exactement ce qui manquait. Traité
   en fiche technique plutôt qu'en argumentaire : des faits alignés, en
   chiffres tabulaires, sans adjectif.
   ═══════════════════════════════════════════════════════════════════════ */
.sw-fiche {
  margin: 0;
  border-top: 1px solid var(--scr-bord);
}
.sw-fiche__ligne {
  display: grid;
  grid-template-columns: minmax(160px, 3fr) minmax(0, 9fr);
  gap: clamp(14px, 2.4vw, 40px);
  align-items: baseline;
  padding: clamp(20px, 2.4vw, 30px) clamp(8px, 1.4vw, 20px);
  border-bottom: 1px solid var(--scr-bord);
  border-left: 2px solid transparent;
  transition: border-left-color .35s ease, background-color .35s ease, padding-left .35s ease;
}
.sw-fiche__ligne:hover {
  border-left-color: var(--scr-orange);
  background: var(--scr-verre-1);
  padding-left: clamp(16px, 2vw, 28px);
}
.sw-fiche dt {
  font-family: var(--scr-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(242,239,234,.60);
}
.sw-fiche dd { margin: 0; }
.sw-fiche dd b {
  display: block;
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 200;
  line-height: 1.2;
  color: var(--scr-paper);
  font-variant-numeric: tabular-nums;
}
.sw-fiche dd span {
  display: block;
  margin-top: 7px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--scr-on-night-soft);
}
@media (max-width: 620px) {
  .sw-fiche__ligne { grid-template-columns: 1fr; gap: 10px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   9. APPEL FINAL
   ═══════════════════════════════════════════════════════════════════════ */
.sw-cta { text-align: center; }
.sw-cta h2 { max-width: 900px; margin-inline: auto; font-size: clamp(26px, 3.6vw, 50px); }
.sw-cta .scr-lede { max-width: 78ch; margin-inline: auto; text-align: center; }
.sw-cta__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 38px; }

/* ═══════════════════════════════════════════════════════════════════════
   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; }
  .sw-fiche__ligne { border-color: #ccc; }
  /* Recensement exhaustif du texte clair : sans ces sélecteurs, la page
     sortait en grande partie blanche sur blanc. */
  .sw-fiche dt, .sw-fiche dd b, .sw-fiche dd span,
  .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-etude--brouillon dd,
  .sw-etudes__titre, .sw-fonction h3, .sw-fonction p,
  .sw-raison h3, .sw-raison p, .sw-raison__pastille,
  .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);
}

/* ═══════════════════════════════════════════════════════════════════════
   10. « UN SITE UTILE » — les quatre fonctions
   ═══════════════════════════════════════════════════════════════════════ */
.sw-fonctions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--scr-bord);
  border: 1px solid var(--scr-bord);
  border-radius: 20px;
  overflow: hidden;
}
.sw-fonction {
  position: relative;
  padding: clamp(26px, 3vw, 38px) clamp(22px, 2.4vw, 30px);
  background: #1B1512;
  transition: background-color .4s ease;
}
.sw-fonction:hover { background: #221A15; }
.sw-fonction h3 {
  margin: 0 0 12px;
  font-size: 21px;
  font-weight: 300;
  color: var(--scr-paper);
}
.sw-fonction p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--scr-on-night-soft); }
/* Trait de lumière qui s'allume à l'arrivée du bloc */
.sw-fonction::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 2px; height: 100%;
  background: var(--scr-orange);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform .7s var(--scr-ease);
}
.sw-fonction.is-in::before { transform: scaleY(1); }
.sw-fonction.is-in:nth-child(2)::before { transition-delay: .1s; }
.sw-fonction.is-in:nth-child(3)::before { transition-delay: .2s; }
.sw-fonction.is-in:nth-child(4)::before { transition-delay: .3s; }

/* ═══════════════════════════════════════════════════════════════════════
   11. POURQUOI SCROLER
   ═══════════════════════════════════════════════════════════════════════ */
.sw-pourquoi { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--scr-bord); border-radius: 20px; overflow: hidden; }
@media (min-width: 900px) { .sw-pourquoi { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.sw-raison {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: clamp(24px, 2.8vw, 34px);
  background: #1B1512;
}
/* Dernière raison seule sur sa ligne : elle occupe toute la largeur. */
@media (min-width: 900px) { .sw-pourquoi > li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.sw-raison__pastille {
  width: 34px; height: 34px;
  border: 1px solid var(--scr-bord-vif);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--scr-mono);
  font-size: 11px;
  color: var(--scr-orange);
}
.sw-raison h3 { margin: 5px 0 9px; font-size: 19px; font-weight: 300; color: var(--scr-paper); }
.sw-raison p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--scr-on-night-soft); }

/* ═══════════════════════════════════════════════════════════════════════
   12. MINI ÉTUDES DE CAS
   ═══════════════════════════════════════════════════════════════════════ */
.sw-cas-etudes {
  list-style: none;
  margin: 0 0 clamp(40px, 5vw, 64px);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.sw-etude {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(24px, 2.8vw, 34px);
  border: 1px solid var(--scr-bord);
  border-radius: 20px;
  background: var(--scr-verre-1);
}
.sw-etude h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 300;
  color: var(--scr-paper);
}
.sw-etude__bloc dt {
  font-family: var(--scr-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #FF7A3D;              /* meme raison que .sw-etude__todo : verre-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; }

/* État « à compléter » : visible en clair tant que le contenu réel
   n'est pas fourni. Rien d'inventé ne part en production par accident. */
.sw-etude--brouillon { border-style: dashed; border-color: rgba(233,78,26,.5); }
.sw-etude__todo {
  align-self: flex-start;
  padding: 4px 10px;
  border: 1px solid var(--scr-orange);
  border-radius: 999px;
  font-family: var(--scr-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  /* #FF7A3D : sur le verre-1 de .sw-etude, l orange vif plafonne a
     4,47:1 — le clair y fait 6,5:1 (mesure). Le lisere reste vif.    */
  color: #FF7A3D;
}
/* .45 tombait sous 4,5:1 sur le fond éclairci : le jeton mute (8,8:1)
   garde l'air « brouillon » grâce à l'italique, sans devenir illisible. */
.sw-etude--brouillon dd { color: var(--scr-on-night-mute); font-style: italic; }

/* ═══════════════════════════════════════════════════════════════════════
   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-paper);
  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-fonction::before { transition: none; }
  .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-fonction h3, .sw-fonction p,
  .sw-raison h3, .sw-raison p, .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-paper);
}

/* 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-paper);
}
.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: rgba(242,239,234,.60);
}

/* 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: rgba(242,239,234,.60);
}

/* ═══════════════════════════════════════════════════════════════════════
   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: rgba(242,239,234,.66);
}
.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-paper);
  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; }

/* Le socle lumineux de l'appel final : le projecteur est sur vous.
   Présent sans JS ; respiration UNIQUE de 4,8 s au total (< 5 s :
   aucune commande d'arrêt requise, WCAG 2.2.2), figée ensuite.        */
.sw-cta__socle {
  width: min(520px, 70%);
  height: 44px;
  margin: 30px auto 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(233,78,26,.55) 0%, rgba(233,78,26,.18) 45%, rgba(233,78,26,0) 74%);
  filter: blur(10px);
  pointer-events: none;
  opacity: .55;
  animation: swSocleRespire 1.6s ease-in-out 3 alternate forwards;
}
@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; }
  .sw-cta__socle { animation: none; opacity: .8; }
}
@media (forced-colors: active) {
  .sw-scan, .sw-mur__lueur, .sw-serp__trail, .sw-cta__socle,
  .scr-btn::after, .sw-carte::before { display: none; }
}
@media print {
  .sw-scan, .sw-mur__lueur, .sw-serp__trail, .sw-cta__socle,
  .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-fiche dd span b,
.sw-etude__bloc dd b {
  font-weight: 400;
  color: var(--scr-paper);
   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; }

/* Les quatre fonctions : la lueur suit aussi le curseur. */
.sw-fonction { isolation: isolate; }
.sw-fonction::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(260px circle at var(--gx, 50%) var(--gy, 50%),
    rgba(233,78,26,.18), transparent 70%);
  transition: opacity .4s ease;
}
.sw-fonction:hover::after { opacity: 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; }

/* Les pastilles de la section « Pourquoi » se remplissent au survol. */
.sw-raison { transition: background-color .4s ease; }
.sw-raison:hover { background: #15110F; }
.sw-raison__pastille { transition: background-color .4s ease, color .4s ease, box-shadow .4s ease; }
.sw-raison:hover .sw-raison__pastille {
  background: var(--scr-orange-d);
  color: #fff;
  box-shadow: 0 0 26px -6px rgba(233,78,26,.9);
}

/* Les lignes de la fiche : la clé glisse légèrement au survol. */
.sw-fiche__ligne dt { transition: transform .35s var(--scr-ease), color .35s ease; }
.sw-fiche__ligne:hover dt { transform: translateX(4px); color: var(--scr-orange); }

/* Le repère de défilement du hero réagit au survol du hero. */
.sw-hero:hover .sw-descendre { color: rgba(242,239,234,.7); }

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