/* ══════════════════════════════════════════════════════════════
   RoadStim NSQ® — Cohérence Souffle · Cohérence Émotionnelle
   Une action principale par écran. Consignes courtes pendant les
   pratiques, explications sur les écrans qui les précèdent.
   ══════════════════════════════════════════════════════════════ */

/* ── le bloc de conversion du hero ────────────────────────────── */
.rsHero{background:linear-gradient(180deg,rgba(13,16,34,.94),rgba(13,16,34,.78));
  border:1px solid var(--bord);border-radius:18px;padding:34px;backdrop-filter:blur(18px);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.9)}
.rsHero h2{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:31px;line-height:1.22;
  margin:14px 0 18px;text-wrap:balance}
.rsHero h2 em{font-style:italic;color:var(--accent)}
.rsHero .rsLead{color:var(--txt2);font-size:16.5px;line-height:1.7;margin-bottom:12px}
.rsHero .rsVerbs{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:23px;
  color:var(--txt);margin-bottom:14px}
.rsHero .rsName{display:inline-flex;align-items:center;gap:9px;margin:6px 0 22px;
  font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--gold);border:1px solid rgba(201,168,76,.35);border-radius:999px;padding:8px 15px;
  background:rgba(201,168,76,.06)}
.rsHero .exp-btn{width:100%}
.rsHero .rsSafe{margin-top:16px;text-align:center}
.rsHero .rsSign{margin-top:22px;padding-top:18px;border-top:1px solid var(--bord);
  color:var(--txt2);font-size:13.5px;line-height:1.6}
.rsHero .rsMore{margin-top:12px}
@media(max-width:620px){.rsHero{padding:26px 22px}.rsHero h2{font-size:26px}}

/* ── la surimpression ─────────────────────────────────────────── */
/* fond plein : pendant une pratique, rien de la page ne doit
   rester lisible derrière l'écran */
#rsApp{position:fixed;inset:0;z-index:120;display:none;overflow:hidden;
  background:var(--bg,#080B14)}
#rsApp[data-open]{display:flex;flex-direction:column}
.rsTop{flex:0 0 auto;background:rgba(8,11,20,.96);border-bottom:1px solid var(--bord);
  padding:13px 22px 11px}
.rsTopIn{max-width:900px;margin:0 auto;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.rsTopIn .lab{flex:1;min-width:0}
.rsProg{flex-basis:100%;height:2px;background:rgba(107,79,187,.22);border-radius:2px;overflow:hidden}
.rsProgIn{height:100%;width:0;background:linear-gradient(90deg,var(--purple),var(--gold));
  border-radius:2px;transition:width .5s cubic-bezier(.4,0,.2,1)}
.rsTools{display:flex;gap:8px;align-items:center}
.rsIcon{all:unset;cursor:pointer;width:38px;height:38px;border-radius:50%;border:1px solid var(--bord);
  display:flex;align-items:center;justify-content:center;color:var(--txt2);font-size:14px;transition:.2s}
.rsIcon:hover{color:var(--txt);border-color:var(--accent)}
.rsIcon:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rsIcon[aria-pressed="true"]{color:var(--gold);border-color:rgba(201,168,76,.5)}

.rsBody{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column}
.rsScreen{max-width:640px;width:100%;margin:auto;padding:44px 22px 70px;
  animation:rsIn .4s ease-out both}
@keyframes rsIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.rsScreen h2{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:38px;line-height:1.16;
  margin:12px 0 20px;text-wrap:balance}
.rsScreen h2 em{font-style:italic;color:var(--accent)}
.rsScreen p{color:var(--txt2);font-size:17px;line-height:1.75;margin-bottom:18px}
.rsScreen p strong{color:var(--txt);font-weight:500}
.rsScreen .rsAccent{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:22px;
  line-height:1.5;color:var(--txt)}
@media(max-width:760px){.rsScreen{padding:30px 20px 60px}.rsScreen h2{font-size:29px}}
@media(prefers-reduced-motion:reduce){.rsScreen{animation:none}}

/* ── les trois gestes annoncés ────────────────────────────────── */
.rsGestes{list-style:none;margin:24px 0;display:flex;flex-direction:column;gap:0}
.rsGestes li{display:grid;grid-template-columns:34px 1fr;gap:16px;align-items:center;
  padding:16px 0;border-top:1px solid rgba(107,79,187,.2);color:var(--txt);font-size:17px}
.rsGestes li:last-child{border-bottom:1px solid rgba(107,79,187,.2)}
.rsGestes i{width:32px;height:32px;border-radius:50%;border:1px solid var(--bord);background:var(--card);
  display:flex;align-items:center;justify-content:center;font-style:normal;
  font-family:'DM Mono',monospace;font-size:11px;color:var(--gold)}

/* ── consigne de sécurité ─────────────────────────────────────── */
.rsSafety{padding:15px 19px;border-left:2px solid var(--gold);background:rgba(201,168,76,.05);
  color:var(--txt2);font-size:14.5px;line-height:1.65;margin:22px 0 26px;border-radius:0 8px 8px 0}

/* ── boutons ──────────────────────────────────────────────────── */
.rsActs{display:flex;flex-direction:column;gap:14px;margin-top:30px}
.rsActs.row{flex-direction:row;flex-wrap:wrap;align-items:center}
.rsActs .exp-ghost{align-self:flex-start;padding-left:0}
.rsActs.center{align-items:center}

/* ── les échelles ─────────────────────────────────────────────── */
.rsScale{margin:0 0 30px}
.rsScale .rsScaleQ{font-size:17px;color:var(--txt);margin-bottom:6px}
.rsScale .rsScaleEnds{display:flex;justify-content:space-between;gap:14px;margin-bottom:14px;
  font-family:'DM Mono',monospace;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--txt2)}
.rsTicks{display:grid;grid-template-columns:repeat(11,1fr);gap:6px}
.rsTicks button{all:unset;box-sizing:border-box;cursor:pointer;text-align:center;
  padding:13px 0;border:1px solid var(--bord);border-radius:9px;color:var(--txt2);
  font-family:'DM Mono',monospace;font-size:13px;background:rgba(107,79,187,.04);transition:.16s}
.rsTicks button:hover{border-color:var(--accent);color:var(--txt);background:rgba(155,127,232,.12)}
.rsTicks button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rsTicks button[aria-pressed="true"]{border-color:var(--gold);background:rgba(201,168,76,.16);
  color:var(--txt);font-weight:500}
@media(max-width:560px){.rsTicks{gap:4px}.rsTicks button{padding:11px 0;font-size:12px}}

/* ── choix en liste ───────────────────────────────────────────── */
.rsChoices{display:flex;flex-direction:column;gap:11px;margin-bottom:24px}
.rsChoice{all:unset;box-sizing:border-box;cursor:pointer;display:block;width:100%;
  border:1px solid var(--bord);border-radius:13px;padding:17px 20px;color:var(--txt);
  font-size:16.5px;line-height:1.5;background:rgba(107,79,187,.04);transition:.2s}
.rsChoice:hover{border-color:var(--accent);background:rgba(155,127,232,.11);transform:translateX(3px)}
.rsChoice:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rsChoice[aria-pressed="true"]{border-color:var(--gold);background:rgba(201,168,76,.13)}

/* ── champs ───────────────────────────────────────────────────── */
.rsField{margin-bottom:24px}
.rsField label{display:block;font-family:'DM Mono',monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--txt2);margin-bottom:9px}
.rsInput,.rsArea{all:unset;box-sizing:border-box;width:100%;border:1px solid var(--bord);
  border-radius:12px;padding:15px 18px;font-family:'DM Sans',sans-serif;font-size:16px;
  line-height:1.6;color:var(--txt);background:rgba(8,11,20,.55);transition:.2s}
.rsArea{min-height:104px}
.rsInput::placeholder,.rsArea::placeholder{color:var(--txt2)}
.rsInput:focus,.rsArea:focus{border-color:var(--accent);background:rgba(155,127,232,.07)}

/* ══════════════════════════════════════════════════════════════
   LA SCÈNE DE PRATIQUE
   ══════════════════════════════════════════════════════════════ */
.rsStage{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:30px;padding:20px 0 10px;min-height:58vh}
.rsOrb{position:relative;width:min(58vw,260px);aspect-ratio:1;display:flex;
  align-items:center;justify-content:center}
.rsOrbCore{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle,rgba(155,127,232,.42),rgba(107,79,187,.10) 62%,transparent 74%);
  border:1px solid rgba(155,127,232,.32);
  transform:scale(.62);transition:transform var(--rs-dur,5s) cubic-bezier(.37,0,.63,1)}
.rsOrb[data-phase="in"]  .rsOrbCore{transform:scale(1)}
.rsOrb[data-phase="out"] .rsOrbCore{transform:scale(.62)}
.rsOrb[data-phase="hold"] .rsOrbCore{transform:scale(1)}
.rsOrbRing{position:absolute;inset:-14px;border-radius:50%;border:1px dashed rgba(107,79,187,.28)}
.rsOrbNum{position:relative;z-index:2;font-family:'DM Mono',monospace;font-size:15px;
  color:var(--txt);letter-spacing:.08em}
/* les rebonds : le halo tressaute doucement pendant l'inspiration */
.rsOrb[data-bounce="on"][data-phase="in"] .rsOrbRing{animation:rsBounce 620ms ease-in-out infinite}
@keyframes rsBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

.rsCue{font-family:'Cormorant Garamond',serif;font-size:32px;line-height:1.3;color:var(--txt);
  min-height:1.3em;text-wrap:balance}
.rsCue em{font-style:italic;color:var(--accent)}
.rsMicro{color:var(--txt2);font-size:15px;line-height:1.6;min-height:1.6em;max-width:44ch}
.rsCount{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--txt2)}
.rsPaused{color:var(--gold)}
@media(max-width:760px){.rsCue{font-size:26px}.rsStage{min-height:52vh;gap:24px}}
@media(prefers-reduced-motion:reduce){
  .rsOrbCore{transition:none}
  .rsOrb[data-bounce="on"][data-phase="in"] .rsOrbRing{animation:none}
}

/* ── la phrase d'accueil ──────────────────────────────────────── */
.rsWelcome{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:23px;line-height:1.55;
  color:var(--txt);padding:26px 28px;border-radius:14px;border:1px solid rgba(201,168,76,.32);
  background:rgba(201,168,76,.05);margin:6px 0 20px;text-wrap:pretty}
.rsWelcomeEdit{min-height:150px;font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:20px;line-height:1.55}

/* ── le récapitulatif des composantes ─────────────────────────── */
.rsRecap{display:flex;flex-direction:column;gap:0;margin:8px 0 26px}
.rsRecap div{padding:16px 0;border-top:1px solid rgba(107,79,187,.2)}
.rsRecap div:last-child{border-bottom:1px solid rgba(107,79,187,.2)}
.rsRecap small{display:block;font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.rsRecap p{color:var(--txt);font-size:17px;margin:0}
.rsRecap p.rsKept{color:var(--txt2);font-style:italic}

/* ── avant / après ────────────────────────────────────────────── */
.rsBefAft{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--bord);
  border:1px solid var(--bord);border-radius:14px;overflow:hidden;margin:22px 0}
.rsBefAft>div{background:var(--card);padding:20px 22px}
.rsBefAft small{display:block;font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--txt2)}
.rsBefAft b{display:block;margin-top:8px;font-family:'Cormorant Garamond',serif;font-size:38px;
  font-weight:600;line-height:1;color:var(--txt2)}
.rsBefAft .now b{color:var(--gold)}
.rsBefAft b i{font-style:normal;font-size:16px;color:var(--txt2)}

/* ── le panneau scientifique ──────────────────────────────────── */
.rsRefs{margin-top:26px}
.rsRefs>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:9px;
  font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--accent);padding:6px 0}
.rsRefs>summary::-webkit-details-marker{display:none}
.rsRefs>summary:before{content:"+";font-family:'DM Sans',sans-serif;font-size:16px;
  line-height:1;color:var(--purple);transition:transform .2s}
.rsRefs[open]>summary:before{transform:rotate(45deg)}
.rsRefs article{padding:18px 0;border-top:1px solid rgba(107,79,187,.2)}
.rsRefs h4{font-family:'Cormorant Garamond',serif;font-size:21px;font-weight:600;
  line-height:1.25;margin-bottom:8px;color:var(--txt)}
.rsRefs p{font-size:15.5px;margin-bottom:8px}
.rsRefs cite{display:block;font-style:normal;font-family:'DM Mono',monospace;font-size:10.5px;
  letter-spacing:.06em;color:var(--txt2);line-height:1.7}
.rsRefs a{color:var(--accent);word-break:break-all}

/* ── le message de confidentialité ────────────────────────────── */
.rsPrivacy{margin-top:22px;color:var(--txt2);font-size:13px;line-height:1.65}
.rsPrivacy b{color:var(--txt);font-weight:500}

/* ── le formulaire d'accès ────────────────────────────────────── */
.rsConsent{display:flex;gap:12px;align-items:flex-start;margin:18px 0 4px;
  color:var(--txt2);font-size:14.5px;line-height:1.6;cursor:pointer}
.rsConsent input{flex:none;width:20px;height:20px;margin-top:2px;accent-color:var(--purple);cursor:pointer}
.rsErr{margin-top:14px;padding:13px 17px;border-left:2px solid var(--purple);
  background:rgba(107,79,187,.09);color:var(--txt);font-size:14.5px;line-height:1.6;border-radius:0 8px 8px 0}
.rsErr[hidden]{display:none}
.rsHp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ══════════════════════════════════════════════════════════════
   LES CARTES DE CONTEXTE
   Avant chaque exercice, une carte qui donne la raison de le
   faire. Le recto promet, le verso explique. On peut pratiquer
   sans jamais la retourner.
   ══════════════════════════════════════════════════════════════ */
.rsDots{display:flex;gap:6px;justify-content:center;margin-bottom:22px}
.rsDots span{width:26px;height:2px;background:var(--bord);border-radius:2px;transition:background .3s}
.rsDots span.on{background:var(--gold)}

.rsStageCard{perspective:1600px;margin-bottom:6px;
  animation:rsCardIn .5s cubic-bezier(.16,1,.3,1) both}
@keyframes rsCardIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}

.rsCard{all:unset;box-sizing:border-box;display:block;width:100%;cursor:pointer;
  font:inherit;color:inherit}
.rsCard:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:18px}
/* Les deux faces occupent la même cellule de grille : la carte prend
   la hauteur de la plus haute, et rien ne défile à l'intérieur. */
.rsCardIn{display:grid;width:100%;min-height:340px;
  transition:transform .75s cubic-bezier(.4,0,.2,1);transform-style:preserve-3d}
.rsCard[aria-pressed="true"] .rsCardIn{transform:rotateY(180deg)}

.rsFace{grid-area:1/1;position:relative;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  display:flex;flex-direction:column;gap:14px;border:1px solid var(--bord);border-radius:18px;
  padding:30px 32px;text-align:left;
  background:linear-gradient(180deg,rgba(13,16,34,.96),rgba(13,16,34,.82));
  box-shadow:0 30px 80px -34px rgba(0,0,0,.9)}
.rsFaceBack{transform:rotateY(180deg);border-color:rgba(201,168,76,.42);
  background:linear-gradient(150deg,rgba(201,168,76,.09),rgba(13,16,34,.94))}
/* Filet de sécurité : backface-visibility se comporte mal dès qu'une
   face défile ou qu'un ancêtre casse le contexte 3D. La face cachée
   passe donc aussi en opacité nulle, au milieu de la rotation. */
.rsFace{opacity:1;transition:opacity .01s linear .375s}
.rsCard[aria-pressed="true"]     .rsFace:not(.rsFaceBack){opacity:0;pointer-events:none}
.rsCard:not([aria-pressed="true"]) .rsFaceBack{opacity:0;pointer-events:none}

.rsCardKicker{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold)}
.rsCardTitle{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:29px;
  line-height:1.2;color:var(--txt);text-wrap:balance}
.rsCardText{color:var(--txt2);font-size:16px;line-height:1.7}
.rsCardText b{color:var(--txt);font-weight:500}
.rsCardChips{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:6px}
.rsCardChips span{border:1px solid rgba(201,168,76,.32);border-radius:999px;padding:6px 13px;
  font-family:'DM Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);background:rgba(201,168,76,.05)}
.rsCardHint{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  font-family:'DM Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);border:1px solid rgba(155,127,232,.4);border-radius:999px;
  padding:6px 13px;background:rgba(155,127,232,.09);
  animation:rsHint 2.6s ease-in-out infinite}
@keyframes rsHint{0%,100%{opacity:.8}50%{opacity:1;border-color:rgba(155,127,232,.75)}}
.rsCardSource{font-size:12.5px;line-height:1.6;color:var(--txt2);font-style:italic}
.rsCardSource a{color:var(--accent);word-break:break-word}

@media(max-width:620px){
  .rsCardIn{min-height:0}
  .rsFace{padding:24px 22px;gap:12px}
  .rsCardTitle{font-size:25px}
  .rsCardText{font-size:15.5px}
}
@media(prefers-reduced-motion:reduce){
  .rsStageCard{animation:none}
  .rsCardIn{transition:none}
  .rsCardHint{animation:none}
  .rsFace{transition:none}
}

/* le rappel de la situation choisie sur l'accueil de l'expérience */
.rsEcho{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:23px;line-height:1.45;
  color:var(--txt);padding:20px 24px;border-radius:14px;margin-bottom:8px;
  border:1px solid rgba(201,168,76,.3);background:rgba(201,168,76,.06)}
.rsEcho small{display:block;font-family:'DM Mono',monospace;font-style:normal;font-size:10.5px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}

/* ══════════════════════════════════════════════════════════════
   LE MÉTRONOME DES REBONDS
   ──────────────────────────────────────────────────────────────
   Un cercle qui grandit lentement dit « respirez ». Il ne dit rien
   d'une cadence de trois appuis par seconde : à ce rythme-là, une
   pulsation de cercle devient un scintillement illisible. Le
   repère passe donc à la verticale — une masse qui tombe, touche
   le sol, remonte. Une chute par rebond, à la cadence choisie.
   La position est écrite image par image par roadstim.js ; la
   feuille de style ne fait que poser la scène.
   ══════════════════════════════════════════════════════════════ */
.rsBeatFloor{position:absolute;left:14%;right:14%;bottom:15%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(155,127,232,.55) 22%,
             rgba(155,127,232,.55) 78%,transparent);
  opacity:0;transition:opacity .3s}
.rsBeatDot{position:absolute;left:50%;bottom:15%;width:38px;height:38px;margin-left:-19px;
  border-radius:50%;opacity:0;transition:opacity .3s;will-change:transform;
  background:radial-gradient(circle at 38% 33%,rgba(222,210,255,.95),var(--accent) 56%,rgba(107,79,187,.92));
  box-shadow:0 0 26px rgba(155,127,232,.45)}
.rsOrb[data-beat="on"] .rsBeatFloor,
.rsOrb[data-beat="on"] .rsBeatDot,
.rsOrb[data-beat="soft"] .rsBeatFloor,
.rsOrb[data-beat="soft"] .rsBeatDot,
.rsOrb[data-beat="settle"] .rsBeatFloor,
.rsOrb[data-beat="settle"] .rsBeatDot{opacity:1}
/* mode doux : la masse accompagne le souffle sans lui voler l'écran */
.rsOrb[data-beat="soft"] .rsBeatDot{width:22px;height:22px;margin-left:-11px;
  box-shadow:0 0 16px rgba(155,127,232,.35)}
.rsOrb[data-beat="soft"] .rsBeatFloor{opacity:.55}
/* mode posé : à l'expiration le corps s'arrête. La masse ne
   disparaît pas — elle touche le sol et y reste, plus sourde.
   Une disparition dirait « ce temps ne compte pas » ; or c'est
   pendant ce temps-là que la mâchoire lâche. */
.rsOrb[data-beat="settle"] .rsBeatDot{width:22px;height:22px;margin-left:-11px;
  transform:translateY(0)!important;
  background:radial-gradient(circle at 38% 33%,rgba(200,190,235,.6),rgba(107,79,187,.5) 60%,rgba(107,79,187,.3));
  box-shadow:0 0 10px rgba(155,127,232,.2);
  transition:opacity .3s,background .5s,box-shadow .5s,transform .45s cubic-bezier(.33,1,.68,1)}
.rsOrb[data-beat="settle"] .rsBeatFloor{opacity:.34}
/* pendant les rebonds, le souffle s'efface : un seul repère à la fois */
.rsOrb[data-beat="on"] .rsOrbCore{opacity:.12}
.rsOrb[data-beat="on"] .rsOrbRing{animation:none}

/* ── le curseur de cadence ─────────────────────────────────────
   1,5 rebond par seconde d'un côté, 5 de l'autre : la fourchette
   du shaking tel qu'il se pratique ici. La valeur choisie est
   gardée d'une séance à l'autre. */
.rsTempo[hidden]{display:none}
.rsTempo{width:min(100%,340px);display:flex;flex-direction:column;gap:10px;align-items:stretch}
.rsTempo .lab{text-align:center}
.rsTempoEnds{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--txt2)}
.rsTempoEnds output{color:var(--txt);letter-spacing:.06em;text-transform:none;font-size:12.5px}
.rsTempo input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;
  height:26px;background:transparent;cursor:pointer;margin:0}
.rsTempo input[type="range"]::-webkit-slider-runnable-track{height:3px;border-radius:2px;
  background:linear-gradient(90deg,rgba(155,127,232,.28),rgba(155,127,232,.75))}
.rsTempo input[type="range"]::-moz-range-track{height:3px;border-radius:2px;
  background:linear-gradient(90deg,rgba(155,127,232,.28),rgba(155,127,232,.75))}
.rsTempo input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:20px;height:20px;margin-top:-8.5px;border-radius:50%;border:1px solid rgba(222,210,255,.7);
  background:var(--accent);box-shadow:0 0 14px rgba(155,127,232,.5)}
.rsTempo input[type="range"]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;
  border:1px solid rgba(222,210,255,.7);background:var(--accent);box-shadow:0 0 14px rgba(155,127,232,.5)}
.rsTempo input[type="range"]:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:4px}

@media(prefers-reduced-motion:reduce){
  /* la masse ne se déplace plus : c'est le sol qui marque le temps */
  .rsBeatDot{display:none}
  .rsOrb[data-beat="on"] .rsBeatFloor{opacity:.45;transition:opacity .09s}
  .rsOrb[data-beat="on"][data-hit] .rsBeatFloor{opacity:1}
}

/* ══════════════════════════════════════════════════════════════
   LA DÉMONSTRATION DU SHAKING
   ──────────────────────────────────────────────────────────────
   La vidéo est verticale, 1080 × 1920. On ne la recadre pas : le
   geste se lit de la tête aux pieds, et c'est précisément le bas
   de l'image — les talons qui décollent, les orteils qui restent
   — qui répond à la question que le texte laisse ouverte. Le
   cadre s'adapte donc au format de la source, jamais l'inverse.
   ══════════════════════════════════════════════════════════════ */
.rsDemo{display:grid;grid-template-columns:minmax(200px,268px) 1fr;gap:32px;
  align-items:center;margin:26px 0 4px}
.rsDemoFrame{border-radius:18px;overflow:hidden;border:1px solid var(--bord);
  background:#0A0D19;line-height:0}
.rsDemoFrame video{display:block;width:100%;height:auto;aspect-ratio:1080/1920;
  object-fit:contain;background:#0A0D19}
.rsDemoPoints{list-style:none;display:flex;flex-direction:column;gap:18px;margin:0;padding:0}
.rsDemoPoints li{display:flex;gap:14px;align-items:flex-start;
  color:var(--txt2);font-size:15.5px;line-height:1.6}
.rsDemoPoints i{flex:0 0 30px;height:30px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-style:normal;
  font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.06em;
  color:var(--accent);border:1px solid rgba(155,127,232,.34);
  background:rgba(155,127,232,.08);margin-top:1px}
.rsDemoPoints b{color:var(--txt);font-weight:500}
.rsDemoBtn{margin:18px 0 0;text-align:center}

@media(max-width:760px){
  .rsDemo{grid-template-columns:1fr;gap:22px;justify-items:center}
  .rsDemoFrame{max-width:248px}
  .rsDemoPoints{gap:15px}
}


/* ── la phrase d'accueil ───────────────────────────────────────
   Elle s'affiche à l'écran où la personne la dit à voix haute,
   et là seulement. Pendant la pratique qui suit, l'écran ne la
   montre plus : le travail consiste précisément à ne plus rien
   formuler — laisser monter ce qui est, rester ouvert, faire
   l'exercice. Les règles qui rétrécissaient le cercle pour lui
   faire de la place n'ont donc plus d'objet, et la scène de
   pratique retrouve ses dimensions pleines. */
.rsMantra{font-family:'Cormorant Garamond',serif;font-size:19px;line-height:1.55;
  color:var(--txt);max-width:46ch;margin:2px auto 0;padding:16px 20px;
  border-radius:12px;border:1px solid rgba(201,168,76,.30);
  background:rgba(201,168,76,.05);text-wrap:pretty}
.rsMantraFin{margin:18px 0 6px}
@media(max-width:760px){.rsMantra{font-size:17px;padding:14px 16px}}

/* ══════════════════════════════════════════════════════════════
   LES ÉCRANS DE CITATION
   ──────────────────────────────────────────────────────────────
   Une respiration entre deux étapes, et une caution : ce que la
   personne vient de vivre, quelqu'un d'autre l'a formulé bien
   avant nous. L'écran ne demande rien — un seul bouton, aucune
   décision. Il ne doit jamais dépasser une hauteur d'écran.
   ══════════════════════════════════════════════════════════════ */
.rsCitation{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:26px;min-height:46vh;padding:12px 0}
.rsCitation blockquote{margin:0;max-width:22ch;
  font-family:'Cormorant Garamond',serif;font-weight:500;font-style:italic;
  font-size:clamp(26px,3.4vw,36px);line-height:1.32;color:var(--txt);text-wrap:balance}
.rsCitation figcaption{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--txt2);line-height:1.9}
.rsCitation figcaption b{display:block;color:var(--accent);font-weight:500}
.rsCitation .rsCitTrait{width:44px;height:1px;background:rgba(155,127,232,.45)}
@media(max-width:760px){
  .rsCitation{min-height:40vh;gap:22px}
  .rsCitation blockquote{max-width:18ch}
}

/* ══════════════════════════════════════════════════════════════
   LE RAPPEL DE CE QUI L'A AMENÉ
   ──────────────────────────────────────────────────────────────
   Ses mots à lui, tels qu'il les a choisis en arrivant, rendus
   tels quels au moment où il vient de sentir quelque chose.
   ══════════════════════════════════════════════════════════════ */
.rsPourquoi{margin:20px 0 26px;padding:22px 24px;border-radius:14px;
  border:1px solid rgba(155,127,232,.34);background:rgba(155,127,232,.07)}
.rsPourquoi small{display:block;font-family:'DM Mono',monospace;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--txt2);margin-bottom:10px}
.rsPourquoi p{margin:0;font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:clamp(21px,2.4vw,27px);line-height:1.34;color:var(--txt)}

/* ── le gain, en un chiffre ────────────────────────────────────
   Un écart de trois points sur dix ne se lit pas dans deux
   colonnes de chiffres : il se lit quand on l'écrit en toutes
   lettres, une fois, en grand. */
.rsGain{display:flex;align-items:baseline;justify-content:center;gap:14px;
  margin:22px 0 6px;text-align:center;flex-wrap:wrap}
.rsGain b{font-family:'Cormorant Garamond',serif;font-weight:600;
  font-size:clamp(46px,7vw,72px);line-height:1;color:var(--accent)}
.rsGain span{font-size:16px;color:var(--txt2);max-width:20ch;text-align:left}

/* ── les deux portes de la capture ─────────────────────────────
   Maintenant, ou plus tard par email. Deux intentions, deux
   boutons, le même formulaire. */
.rsPortes{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.rsPortes .exp-btn{width:100%}
.rsPortes .rsPorte2{all:unset;box-sizing:border-box;display:block;width:100%;
  text-align:center;cursor:pointer;padding:15px 18px;border-radius:12px;
  border:1px solid var(--bord);color:var(--txt);font-size:15px;
  transition:border-color .2s,background .2s}
.rsPortes .rsPorte2:hover{border-color:var(--accent);background:rgba(155,127,232,.10)}
.rsPortes .rsPorte2:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ══════════════════════════════════════════════════════════════
   LE TEASING — CE QU'IL VA OBTENIR
   ──────────────────────────────────────────────────────────────
   Des résultats, pas des étapes. Une étape décrit la méthode et
   donne l'impression d'avoir compris ; un bénéfice décrit ce
   qu'on emporte et donne envie de le prendre. La liste des
   étapes existe toujours, mais après la capture.
   ══════════════════════════════════════════════════════════════ */
.rsBenefs{list-style:none;margin:22px 0 4px;padding:0;
  display:flex;flex-direction:column;gap:2px}
.rsBenefs li{position:relative;padding:15px 0 15px 34px;
  color:var(--txt2);font-size:15.5px;line-height:1.6;
  border-bottom:1px solid var(--bord)}
.rsBenefs li:last-child{border-bottom:none}
.rsBenefs li:before{content:"";position:absolute;left:6px;top:24px;
  width:8px;height:8px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 12px rgba(155,127,232,.6)}
.rsBenefs b{color:var(--txt);font-weight:500}

/* ══════════════════════════════════════════════════════════════
   LES DEUX PORTES DE SORTIE — LE MOMENT LE PLUS CHAUD
   ══════════════════════════════════════════════════════════════ */
.rsOffres{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:26px 0 4px}
.rsOffre{display:flex;flex-direction:column;gap:10px;padding:24px 22px;
  border-radius:16px;border:1px solid var(--bord);background:rgba(155,127,232,.05)}
.rsOffre .ro-eng{font-family:'DM Mono',monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent)}
.rsOffre h3{font-family:'Cormorant Garamond',serif;font-weight:600;
  font-size:clamp(22px,2.4vw,27px);line-height:1.2;color:var(--txt);margin:0}
.rsOffre .ro-prix{font-family:'Cormorant Garamond',serif;font-weight:600;
  font-size:30px;line-height:1;color:var(--txt)}
.rsOffre .ro-prix small{font-family:'DM Sans',sans-serif;font-weight:400;
  font-size:13px;color:var(--txt2);margin-left:8px}
.rsOffre p{color:var(--txt2);font-size:15px;line-height:1.6;margin:0}
.rsOffre .ro-bonus{padding:13px 15px;border-radius:11px;
  border:1px solid rgba(201,168,76,.34);background:rgba(201,168,76,.07);
  color:var(--txt2);font-size:14.5px}
.rsOffre .ro-bonus b{color:var(--gold);font-weight:500}
.rsOffre .exp-btn{margin-top:auto;width:100%;text-align:center}
@media(max-width:760px){
  .rsOffres{grid-template-columns:1fr;gap:14px}
  .rsOffre{padding:20px 18px}
}

/* ── « Pour vous si » ──────────────────────────────────────────
   Entre deux offres également bonnes, ce n'est pas la
   comparaison des contenus qui décide, c'est le fait de se
   reconnaître dans une phrase. Elle se détache donc du reste du
   bloc, sans crier : un filet à gauche, et rien d'autre. */
.rsOffre .ro-pour{padding:10px 0 10px 14px;border-left:2px solid rgba(155,127,232,.45);
  color:var(--txt2);font-size:14.5px;line-height:1.55}
.rsOffre .ro-pour b{color:var(--txt);font-weight:500}

/* une coupure franche entre la preuve et l'offre, sur l'écran de
   capture : ce sont deux moments, pas un paragraphe qui continue */
.rsSep{height:1px;margin:30px 0 26px;
  background:linear-gradient(90deg,transparent,var(--bord) 18%,var(--bord) 82%,transparent)}
.rsH2b{margin-top:6px}

/* ── « Offert » ────────────────────────────────────────────────
   Le mot portait la même encre grise que le reste de la ligne et
   passait inaperçu. C'est pourtant l'argument qui lève la seule
   objection qui compte à cet endroit : combien ça coûte. Il
   reprend donc l'encre de lecture pleine, en capitales espacées,
   et rien d'autre — pas de pastille, pas de couleur d'accent :
   l'accent appartient à ce qui se clique. */
.rsOffert{font-size:var(--t-lede)}
.rsOffert b{color:var(--txt);font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;font-size:.92em;
  border-bottom:2px solid rgba(155,127,232,.55);padding-bottom:1px}

/* le prix barré de l'offre de bienvenue : la remise doit se voir
   sans crier, donc le prix plein s'efface au lieu de s'entourer */
.rsOffre .ro-prix s{color:var(--txt2);font-size:.62em;font-weight:400;
  text-decoration-color:rgba(155,127,232,.7);margin-right:8px}

/* ══════════════════════════════════════════════════════════════
   LE BLOC CADEAU
   ──────────────────────────────────────────────────────────────
   L'annonce du cadeau passait dans la même encre grise que le
   reste : un paragraphe de plus au milieu d'une page de texte,
   au moment précis où il fallait qu'on lève les yeux. Elle se
   présente donc maintenant comme une offre — un paquet dessiné,
   un cadre tenu, un fond qui s'éclaircit et un liseré doré, le
   seul du parcours. L'or ne sert qu'à ça ici : ce qui est donné.
   ══════════════════════════════════════════════════════════════ */
.rsCadeau{display:flex;align-items:center;gap:20px;margin:4px 0 26px;
  padding:22px 24px;border-radius:16px;
  border:1px solid rgba(201,168,76,.34);
  background:linear-gradient(110deg,rgba(201,168,76,.12),rgba(155,127,232,.07) 70%)}
.rc-icone{flex:0 0 54px;width:54px;height:54px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;color:var(--gold);
  border:1px solid rgba(201,168,76,.42);background:rgba(201,168,76,.10)}
.rc-kicker{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold);margin:0 0 8px;line-height:1.5}
.rc-titre{font-family:'Cormorant Garamond',serif;font-weight:600;
  font-size:clamp(25px,3.2vw,33px);line-height:1.18;color:var(--txt);margin:0;text-wrap:balance}
.rc-titre em{font-style:italic;color:var(--accent)}
@media(max-width:620px){
  .rsCadeau{flex-direction:column;align-items:flex-start;gap:14px;padding:20px}
  .rc-icone{flex:0 0 46px;width:46px;height:46px}
}