/* ============ MACHINES ROGER INTERNATIONAL : design system ============ */
:root{
  --color-accent:#D92624;   /* rouge marque : usage parcimonieux */
  --color-ink:#1D1E1B;      /* texte sombre / fond très sombre */
  --color-black:#141413;    /* entête / bandeaux / pied de page */
  --color-grey-dark:#535252;
  --color-grey-light:#989898;
  --color-cream:#FAF9F5;
  --color-white:#FFFFFF;
  --radius:0px;             /* AUCUN arrondi, nulle part */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* Accessible : présent pour les lecteurs d'écran, invisible à l'affichage
   (jamais display:none, qui serait ignoré par les lecteurs d'écran aussi). */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body{background:var(--color-cream);font-family:'Heebo',system-ui,sans-serif;color:var(--color-ink);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
#app,#app *{font-family:'Heebo',system-ui,sans-serif !important}

/* Angularité absolue : zéro arrondi, y compris pseudo-éléments et curseurs */
#app *,#app *::before,#app *::after,#app input[type=range]{border-radius:0 !important}

a{color:var(--color-ink);text-decoration:none}
a:hover{color:var(--color-accent)}
::selection{background:#D92624;color:#FFFFFF}
input::placeholder{color:rgba(29,30,27,.35)}
:focus-visible{outline:2px solid rgba(217,38,36,.75);outline-offset:2px}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:#EFEEE9}
::-webkit-scrollbar-thumb{background:#C6C4BE;border-radius:0;border:3px solid #EFEEE9}
::-webkit-scrollbar-thumb:hover{background:#989898}

/* Curseurs (sliders) carrés, accent rouge */
#app input[type=range]{-webkit-appearance:none;appearance:none;height:4px;background:#D8D6D0;outline:none;padding:0}
#app input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:#D92624;border:none;border-radius:0;cursor:pointer}
#app input[type=range]::-moz-range-thumb{width:16px;height:16px;background:#D92624;border:none;border-radius:0;cursor:pointer}
#app input[type=range]::-moz-range-track{height:4px;background:#D8D6D0;border-radius:0}

/* Bande signature : rayures diagonales rouges (remplace le faisceau cyan) */
.hz-stripe{background:repeating-linear-gradient(-45deg,#B71F1D 0 10px,#D92624 10px 22px)}

/* Titres filigranes fantômes : très grands, très discrets, derrière les sections */
.mr-ghost{position:relative;overflow:hidden;z-index:0}
.mr-ghost::before{
  content:attr(data-ghost);
  position:absolute;z-index:-1;right:-10px;top:-14px;
  font-weight:900 !important;font-size:clamp(96px,14vw,176px);line-height:1;
  letter-spacing:.01em;text-transform:uppercase;white-space:nowrap;
  pointer-events:none;user-select:none;color:rgba(29,30,27,.05)
}
.mr-ghost-dark::before{color:rgba(250,249,245,.045)}

/* Traitement photo/panneau sombre : grain + vignette subtils */
.mr-grain{position:relative}
.mr-grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(140% 120% at 50% 0%,transparent 58%,rgba(0,0,0,.26) 100%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.013) 0 1px,transparent 1px 3px)
}
.mr-photo-dark{position:relative}
.mr-photo-dark::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,20,19,.04) 0%,rgba(20,20,19,.38) 92%),
             radial-gradient(130% 95% at 50% 18%,transparent 52%,rgba(20,20,19,.42) 100%)
}

@keyframes rbFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes rbPulse{0%,100%{opacity:.55}50%{opacity:1}}
/* Voyant ambre anime : remplace la photo dans la section "Savoir arreter la machine".
   Cycle en 6 s : fixe (allume), clignotant, puis eteint. */
.rb-beacon{width:46px;height:46px;border-radius:50%;background:#F0A81E;box-shadow:0 0 26px 8px rgba(240,168,30,.9);animation:rbBeaconCycle 6s ease-in-out infinite}
@keyframes rbBeaconCycle{
  0%,20%{background:#F0A81E;box-shadow:0 0 26px 8px rgba(240,168,30,.9)}
  28%,44%{background:#F0A81E;box-shadow:0 0 28px 9px rgba(240,168,30,1)}
  32%,40%{background:#4a3f22;box-shadow:0 0 4px rgba(240,168,30,.15)}
  56%,100%{background:#332d20;box-shadow:0 0 3px rgba(0,0,0,0)}
}
@media (prefers-reduced-motion:reduce){.rb-beacon{animation:none;background:#F0A81E;box-shadow:0 0 20px 6px rgba(240,168,30,.7)}}
/* Voyant ambre du simulateur de modes : reagit au mode choisi.
   .on = fixe (allume + balayage rotatif) · .blink = clignotant · .off = eteint (gris). */
.rb-gyro{position:relative;width:46px;height:50px;border-radius:23px 23px 5px 5px;overflow:hidden;
  background:radial-gradient(circle at 50% 34%,#FFE0A3 0%,#F0A81E 48%,#A96C15 100%);
  box-shadow:0 0 24px 4px rgba(240,168,30,.85)}
.rb-gyro::before{content:"";position:absolute;inset:-40%;
  background:conic-gradient(from 0deg,rgba(255,255,255,.6) 0deg,transparent 50deg 310deg,rgba(255,255,255,.6) 360deg);
  animation:rbGyroSpin 1.5s linear infinite}
.rb-gyro::after{content:"";position:absolute;left:50%;top:7px;width:11px;height:11px;transform:translateX(-50%);
  border-radius:50%;background:rgba(255,255,255,.5);filter:blur(1px)}
.rb-gyro.blink{animation:rbGyroBlink .8s steps(1,end) infinite}
.rb-gyro.off{background:radial-gradient(circle at 50% 34%,#54544e 0%,#33332e 75%);box-shadow:none}
.rb-gyro.off::before,.rb-gyro.off::after{display:none}
@keyframes rbGyroSpin{to{transform:rotate(360deg)}}
@keyframes rbGyroBlink{0%,48%{box-shadow:0 0 24px 5px rgba(240,168,30,.9);filter:brightness(1.05)}
  50%,100%{box-shadow:0 0 3px 0 rgba(240,168,30,.12);filter:brightness(.42)}}
@media (prefers-reduced-motion:reduce){.rb-gyro::before{animation:none}.rb-gyro.blink{animation:none;box-shadow:0 0 18px 5px rgba(240,168,30,.7)}}
@keyframes rbPop{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
/* ================ PHOTO DE LA TELECOMMANDE (manuel p. 21) ================
   REGLE : la photo de la manette n'est JAMAIS couverte.
   - Les pastilles sont des zones tactiles transparentes, a la taille de leur
     commande (largeur et hauteur donnees par RRC_ZONES dans app.js).
   - Un appui n'importe ou sur la photo choisit la commande la plus proche
     (couche .rb-spot-layer + pickNearest) : un clic repond toujours.
   - Le marqueur de la commande choisie est un viseur en 4 coins : il encadre
     la commande, son centre reste libre.
   - La fiche s'ouvre a cote de la photo (ordinateur) ou en feuille du bas
     (telephone), jamais par-dessus la manette.
   - Les numeros sont optionnels (bouton dans la barre du haut). */

/* -- cadre de la photo + barre de titre (hors de l'image) -- */
.rb-rrc-photocard{background:#FFFFFF;border:1px solid rgba(29,30,27,.16);box-shadow:0 24px 50px -36px rgba(20,20,19,.6)}
.rb-rrc-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:#141413;color:#FAF9F5;padding:9px 12px;border-bottom:3px solid #D92624}
.rb-rrc-bar-t{font-weight:800;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#B8B7B2}
.rb-rrc-photo{position:relative;overflow:hidden}
.rb-rrc-hint{margin-top:10px;text-align:center;font-weight:700;font-size:12px;letter-spacing:.02em;color:#6E6D69}
.rb-rrc-tip{background:#EFEEE9;border:1px solid rgba(29,30,27,.1);padding:15px 17px;font-size:13px;line-height:1.55;color:#535252}
.rb-rrc-tip strong{color:#1D1E1B}

/* -- couche "toute la photo est cliquable" (sous les pastilles) -- */
.rb-spot-layer{position:absolute;inset:0;z-index:1;cursor:pointer;-webkit-tap-highlight-color:transparent}

/* -- pastilles -- */
.rb-spot{position:absolute;z-index:2;transform:translate(-50%,-50%);min-width:19px;min-height:19px;margin:0;padding:0;background:transparent;border:0;cursor:pointer;font:inherit;-webkit-tap-highlight-color:transparent}
/* survol et clavier : liseré fin, centre vide */
.rb-spot:hover,.rb-spot:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(250,249,245,.95),0 0 0 4px rgba(20,20,19,.55)}
/* commande choisie : viseur en 4 coins, rouge, avec un halo blanc pour le contraste */
.rb-spot.is-sel::before{content:"";position:absolute;inset:-6px;
  background-image:linear-gradient(#D92624,#D92624),linear-gradient(#D92624,#D92624),
    linear-gradient(#D92624,#D92624),linear-gradient(#D92624,#D92624),
    linear-gradient(#D92624,#D92624),linear-gradient(#D92624,#D92624),
    linear-gradient(#D92624,#D92624),linear-gradient(#D92624,#D92624);
  background-repeat:no-repeat;
  background-position:left top,left top,right top,right top,left bottom,left bottom,right bottom,right bottom;
  background-size:28% 2.5px,2.5px 28%,28% 2.5px,2.5px 28%,28% 2.5px,2.5px 28%,28% 2.5px,2.5px 28%;
  filter:drop-shadow(0 0 1.5px rgba(255,255,255,.95));
  animation:rbSpotAim .3s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes rbSpotAim{from{transform:scale(1.5);opacity:0}to{transform:scale(1);opacity:1}}
/* numeros : affiches seulement sur demande, le centre reste vide */
.rb-spot.is-num{box-shadow:0 0 0 2px rgba(250,249,245,.92),0 0 0 3.5px rgba(20,20,19,.5)}
.rb-spot.is-num::after{content:attr(data-n);position:absolute;top:-9px;right:-9px;min-width:15px;height:15px;padding:0 2px;background:#1D1E1B;color:#FFFFFF;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:10px;line-height:1;box-shadow:0 1px 2px rgba(0,0,0,.6)}
.rb-spot.is-num.is-sel::after{background:#D92624}
@media (prefers-reduced-motion:reduce){.rb-spot.is-sel::before{animation:none}}

/* -- arret d'urgence : cadre rouge seul, aucun voile sur la photo -- */
.rb-rrc-estop-frame{position:absolute;inset:0;z-index:3;border:4px solid #D92624;box-shadow:inset 0 0 0 2px rgba(255,255,255,.45);pointer-events:none;animation:rbPulse 1s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.rb-rrc-estop-frame{animation:none;opacity:1}}

/* -- bouton des numeros, dans la barre sombre -- */
.rb-rrc-numbtn{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:7px 12px;background:transparent;border:1px solid rgba(255,255,255,.3);color:#FAF9F5;font-family:inherit;font-weight:800;font-size:10px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.rb-rrc-numbtn:hover,.rb-rrc-numbtn:focus-visible{border-color:#D92624;background:rgba(217,38,36,.18);outline:none}
.rb-rrc-numbtn.is-on{background:#D92624;border-color:#D92624;color:#FFFFFF}

/* -- fiche de la commande : carte mise en evidence a cote de la photo -- */
.rb-rrc-card{background:#FFFFFF;border:1px solid rgba(29,30,27,.15);border-top:4px solid #D92624;
  padding:18px 20px 20px;box-shadow:0 20px 44px -30px rgba(20,20,19,.55);
  animation:rbPop .26s cubic-bezier(.2,.9,.3,1.15) both}
.rb-rrc-card-top{font-weight:800;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:#D92624;margin-bottom:9px}
.rb-rrc-card-head{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.rb-rrc-n{flex:none;width:34px;height:34px;background:#1D1E1B;color:#FFFFFF;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:14px}
.rb-rrc-name{flex:1;font-weight:900;font-size:18px;line-height:1.15;text-transform:uppercase;color:#1D1E1B}
.rb-rrc-lines{display:flex;flex-direction:column;gap:7px;margin-bottom:15px;font-size:14.5px;line-height:1.5;color:#3A3B38}
.rb-rrc-page{display:inline-flex;align-items:center;gap:8px;min-height:42px;background:none;border:1px solid rgba(217,38,36,.45);
  color:#D92624;font-family:inherit;font-weight:800;font-size:12px;letter-spacing:.03em;padding:10px 15px;cursor:pointer;
  transition:background .15s,border-color .15s}
.rb-rrc-page:hover,.rb-rrc-page:focus-visible{background:rgba(217,38,36,.08);border-color:#D92624;outline:none}
.rb-rrc-x{flex:none;width:36px;height:36px;background:#F0EEE9;border:none;color:#1D1E1B;font-size:17px;font-weight:800;cursor:pointer}
.rb-rrc-x:hover,.rb-rrc-x:focus-visible{background:#D92624;color:#FFFFFF;outline:none}

/* -- telephone : la fiche devient une feuille du bas. La photo est cadree
      au-dessus par revealRrcPhoto(), donc la manette reste visible. -- */
.rb-rrc-sheet{position:fixed;left:0;right:0;bottom:0;z-index:190;background:#FFFFFF;
  border-top:4px solid #D92624;box-shadow:0 -20px 50px -14px rgba(20,20,19,.55);
  max-height:52vh;overflow:auto;padding:15px 18px 20px;
  animation:rbSheet .26s cubic-bezier(.2,.9,.3,1.1) both}
@keyframes rbSheet{from{transform:translateY(100%)}to{transform:none}}
@media (min-width:821px){.rb-rrc-sheet{display:none}}
@media (max-width:820px){
  .rb-rrc-card{animation:none;box-shadow:none}
  .rb-rrc-card.is-under-sheet{display:none}   /* la feuille du bas prend le relais */
  .rb-rrc-sheet .rb-rrc-page{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.rb-rrc-card,.rb-rrc-sheet{animation:none}}
/* La photo zoome dans un cadre qui conserve toujours l'équipement au complet. */
@keyframes rbHeroZoom{
  from{background-size:100% 100%,auto 96%}
  to{background-size:100% 100%,auto 88%}
}
@keyframes rbHeroZoomMobile{
  from{background-size:100% 100%,auto 60%}
  to{background-size:100% 100%,auto 52%}
}
@keyframes rbHeroTextIn{
  from{opacity:0;transform:translateY(22px)}
  to{opacity:1;transform:none}
}
@keyframes rbHeroTitleIn{
  from{opacity:0;transform:translateY(28px);clip-path:inset(0 0 100% 0)}
  to{opacity:1;transform:none;clip-path:inset(0)}
}
@keyframes rbHeroStepIn{
  from{opacity:0;transform:translateX(-18px)}
  to{opacity:1;transform:none}
}
@keyframes rbButtonSheen{
  0%,45%{transform:translateX(-130%) skewX(-16deg);opacity:0}
  60%{opacity:.28}
  78%,100%{transform:translateX(160%) skewX(-16deg);opacity:0}
}
.rb-hero-photo{background-color:#141413;background-repeat:no-repeat;background-position:center,right 50%;background-size:100% 100%,auto 96%;animation:rbHeroZoom 20s cubic-bezier(.45,0,.55,1) infinite alternate;will-change:background-size;filter:saturate(1.05) contrast(1.06)}
.rb-hero-photo-vignette{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at 72% 40%,rgba(217,38,36,.08),transparent 34%),linear-gradient(180deg,transparent 58%,rgba(20,20,19,.68) 100%)}
.rb-hero-stage>.rb-reveal{animation:none}
.rb-hero-badges{animation:rbHeroTextIn .56s cubic-bezier(.22,.61,.36,1) .06s both}
.rb-hero-stage h1{animation:rbHeroTitleIn .72s cubic-bezier(.16,1,.3,1) .18s both}
.rb-hero-stage h1 span{display:inline-block;animation:rbHeroTextIn .58s cubic-bezier(.22,.61,.36,1) .36s both}
.rb-hero-copy{animation:rbHeroTextIn .58s cubic-bezier(.22,.61,.36,1) .4s both}
.rb-hero-copy strong{display:inline-block;animation:rbHeroStepIn .46s cubic-bezier(.22,.61,.36,1) both}
.rb-hero-copy strong:nth-of-type(1){animation-delay:.52s}
.rb-hero-copy strong:nth-of-type(2){animation-delay:.62s}
.rb-hero-copy strong:nth-of-type(3){animation-delay:.72s}
.rb-hero-actions{animation:rbHeroTextIn .58s cubic-bezier(.22,.61,.36,1) .82s both}
.rb-hero-cta,.rb-hero-secondary{position:relative;overflow:hidden}
.rb-hero-cta{box-shadow:0 14px 30px -16px rgba(217,38,36,.85)}
.rb-hero-cta::after{content:"";position:absolute;inset:-20% -35%;background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.34) 48%,transparent 58%);animation:rbButtonSheen 5.8s ease-in-out infinite;pointer-events:none}
.rb-hero-secondary{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.rb-side-toc{display:none}
.rb-toc-kicker{font-weight:900;font-size:9.5px;letter-spacing:.18em;color:#D92624;margin-bottom:9px}
.rb-toc-now{background:#141413;color:#FFFFFF;border-left:4px solid #D92624;padding:10px 10px 11px;margin-bottom:10px}
.rb-toc-now-label{display:block;color:#E8534F;font-weight:900;font-size:8.5px;line-height:1.2;letter-spacing:0;text-transform:uppercase;margin-bottom:5px}
.rb-toc-now-title{display:-webkit-box;color:#FFFFFF;font-weight:900;font-size:12px;line-height:1.18;letter-spacing:0;text-transform:uppercase;overflow:hidden;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.rb-toc-home{width:100%;height:34px;background:#141413;color:#FFFFFF;border:0;font-weight:900;font-size:10px;letter-spacing:.12em;text-align:left;padding:0 10px;cursor:pointer}
.rb-toc-list{display:flex;flex-direction:column;gap:6px;margin-top:9px}
.rb-toc-section-list{margin-top:0}
.rb-toc-section-item{width:100%;min-height:42px;background:#FFFFFF;color:#1D1E1B;border:1px solid rgba(29,30,27,.14);padding:7px 8px;display:grid;grid-template-columns:26px minmax(0,1fr);gap:8px;align-items:center;text-align:left;cursor:pointer;transition:transform .15s,border-color .15s,background .15s,color .15s}
.rb-toc-section-item:hover{transform:translateX(3px);border-color:#D92624}
.rb-toc-section-item.is-current{background:#141413;color:#FFFFFF;border-color:#D92624;box-shadow:inset 4px 0 #D92624}
.rb-toc-section-num{height:26px;background:#1D1E1B;color:#FFFFFF;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:9px;letter-spacing:0}
.rb-toc-section-item.is-current .rb-toc-section-num{background:#D92624}
.rb-toc-section-title{font-weight:900;font-size:11px;line-height:1.15;letter-spacing:0;text-transform:uppercase;overflow-wrap:anywhere}
.rb-toc-item{position:relative;width:100%;border:1px solid rgba(29,30,27,.14);padding:8px 8px;display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;text-align:left;cursor:pointer;transition:transform .15s,border-color .15s,background .15s}
.rb-toc-item:hover{transform:translateX(3px);border-color:#D92624 !important}
.rb-toc-item[aria-current="page"]{box-shadow:inset 4px 0 #D92624}
.rb-toc-num{height:28px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:10px;letter-spacing:.04em}
.rb-toc-copy{min-width:0;display:block;line-height:1.08;padding-top:1px}
.rb-toc-short{display:none}
.rb-toc-title{display:block;font-weight:900;font-size:11px;line-height:1.16;text-transform:uppercase;letter-spacing:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rb-toc-status{display:block;min-height:9px;margin-top:4px;color:#E8534F;font-weight:900;font-size:8px;line-height:1.1;letter-spacing:0;text-transform:uppercase}
.rb-lesson-item{transition:border-color .16s,box-shadow .16s}
.rb-lesson-item.rb-lesson-current{border-color:rgba(217,38,36,.55) !important;box-shadow:0 0 0 2px rgba(217,38,36,.2)}
/* La case de suivi de lecture se coche ET se décoche. Elle doit donc répondre
   au doigt : fond qui s'assombrit, léger enfoncement, contour au clavier. */
.rb-lesson-mark{transition:background .14s,transform .08s}
.rb-lesson-mark:hover{background:rgba(29,30,27,.05) !important}
.rb-lesson-mark:active{background:rgba(29,30,27,.11) !important;transform:scale(.985)}
.rb-lesson-mark:focus-visible{outline:3px solid #D92624;outline-offset:-3px}
.rb-lesson-mark:hover>span:first-child{border-color:#D92624 !important}
@media (min-width:1240px){
  #app main{margin-left:194px !important}
  .rb-side-toc{display:block;position:fixed;left:16px;top:82px;z-index:45;width:166px;max-height:calc(100vh - 100px);overflow:auto;background:#FAF9F5;border:1px solid rgba(29,30,27,.16);padding:12px;box-shadow:0 18px 40px -28px rgba(20,20,19,.45)}
}
@media (min-width:1440px){
  #app main{margin-left:208px !important}
  .rb-side-toc{left:18px;width:178px}
}
@media (prefers-reduced-motion: reduce){
  .rb-hero-photo,.rb-hero-badges,.rb-hero-stage h1,.rb-hero-stage h1 span,.rb-hero-copy,.rb-hero-copy strong,.rb-hero-actions,.rb-hero-cta::after{animation:none !important}
  .rb-toc-item,.rb-toc-section-item,.rb-lesson-item{transition:none !important}
  .rb-toc-item:hover,.rb-toc-section-item:hover{transform:none}
}

/* ---- Entrées en scène + cartes-images (décoratif) ---- */
@keyframes rbRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes rbHero{0%{opacity:0;transform:translateY(20px) scale(1.045)}16%{opacity:1}100%{opacity:1;transform:translateY(0) scale(1)}}
.rb-reveal{animation:rbRise .55s cubic-bezier(.22,.61,.36,1) backwards}
.rb-d1{animation-delay:.08s}
.rb-d2{animation-delay:.16s}
.rb-d3{animation-delay:.26s}
.rb-hero-img{animation:rbHero 5.5s cubic-bezier(.22,.61,.36,1) backwards}
.rb-stagger>*{animation:rbRise .55s cubic-bezier(.22,.61,.36,1) backwards}
.rb-stagger>*:nth-child(1){animation-delay:.06s}
.rb-stagger>*:nth-child(2){animation-delay:.14s}
.rb-stagger>*:nth-child(3){animation-delay:.22s}
.rb-stagger>*:nth-child(4){animation-delay:.30s}
.rb-stagger>*:nth-child(5){animation-delay:.38s}
.rb-stagger>*:nth-child(6){animation-delay:.46s}
.rb-stagger>*:nth-child(n+7){animation-delay:.52s}
.rb-img-card{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.rb-img-card:hover{transform:translateY(-4px);box-shadow:0 20px 44px -22px rgba(0,0,0,.65);border-color:rgba(217,38,36,.6)}
.rb-img-frame{overflow:hidden}
.rb-img-frame img{transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.rb-img-card:hover .rb-img-frame img{transform:scale(1.035)}

/* Leçon en deux niveaux : gestes courts d'abord, détails du manuel ensuite. */
.rb-manual-details-trigger{width:100%;min-height:48px;background:transparent;border:0;padding:11px 2px;display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:9px;text-align:left;color:#535252;font-family:inherit;font-weight:800;font-size:13px;line-height:1.3;cursor:pointer}
.rb-manual-details-trigger::before{content:"+";width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;background:#1D1E1B;color:#FFFFFF;font-weight:900;font-size:15px;line-height:1;flex:none}
.rb-manual-details.is-open .rb-manual-details-trigger::before{content:"−";background:#D92624}
.rb-manual-details-trigger:hover{color:#1D1E1B}
.rb-manual-details-page{background:#F1EEE7;color:#D92624;padding:4px 6px;font-weight:900;font-size:9px;line-height:1;white-space:nowrap}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.001s !important}
  .rb-reveal,.rb-hero-img,.rb-stagger>*{animation:none !important}
  .rb-img-card,.rb-img-frame img{transition:none !important}
  .rb-img-card:hover{transform:none;box-shadow:none}
  .rb-img-card:hover .rb-img-frame img{transform:none}
}

/* ============ RESPONSIVE / MOBILE ============ */
html,body{overflow-x:hidden;max-width:100%}
#app img{max-width:100%;height:auto}

/* Grilles multi-colonnes -> 1 colonne sur petits écrans */
@media (max-width:820px){
  #app [style*="grid-template-columns"]{grid-template-columns:1fr !important}
  #app .mr-gal{grid-template-columns:repeat(2,1fr) !important} /* galerie manuel = 2 col. */
}

/* Téléphones : typographie réduite + en-tête compact */
@media (max-width:640px){
  .rb-topbar-inner{height:56px !important;padding:0 12px !important;gap:8px !important}
  .rb-brand{flex:0 0 auto !important;min-width:0 !important;max-width:150px !important;gap:8px !important}
  .rb-brand-mark{width:30px !important;height:30px !important}
  .rb-brand-title{font-size:13px !important;letter-spacing:.045em !important;white-space:nowrap !important}
  .rb-brand-subtitle{font-size:7px !important;letter-spacing:.12em !important;white-space:nowrap !important;margin-top:2px !important}
  .rb-lang-switch{margin-left:auto !important}
  .rb-lang-switch button{min-width:37px !important;padding:9px 9px !important;font-size:10px !important}
  .rb-manual-link{padding:8px 8px !important;gap:5px !important;font-size:9.5px !important;letter-spacing:.06em !important;white-space:nowrap !important}
  .rb-manual-link span{font-size:9px !important;padding:2px 5px !important}
  #app [style*="font-size:64px"]{font-size:40px !important}
  #app [style*="font-size:54px"]{font-size:31px !important;line-height:1.06 !important}
  #app [style*="font-size:38px"]{font-size:26px !important}
  #app [style*="font-size:32px"]{font-size:23px !important}
  #app [style*="font-size:30px"]{font-size:22px !important}
  .rb-hdr-prog{display:none !important}
  .rb-worker-badge{display:none !important}
  .rb-hero-inner{padding:30px 16px 28px !important}
  .rb-hero-stage{min-height:0 !important;align-items:flex-start !important}
  .rb-hero-stage>.rb-reveal{width:100% !important;max-width:100% !important}
  .rb-hero-badges{gap:8px !important;margin-bottom:18px !important}
  .rb-hero-manual-badge{max-width:100% !important;padding:8px 10px !important;gap:8px !important}
  .rb-hero-manual-badge span:last-child{font-size:9.4px !important;letter-spacing:.09em !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;min-width:0 !important}
  .rb-version-badge{display:none !important}
  .rb-hero-copy{font-size:16px !important;line-height:1.47 !important;margin-bottom:24px !important;max-width:330px !important}
  .rb-hero-copy strong{display:block !important;margin-top:4px !important}
  .rb-hero-copy span{font-size:13.2px !important}
  .rb-hero-actions{display:grid !important;grid-template-columns:1fr !important;gap:10px !important;width:100% !important;max-width:100% !important}
  .rb-hero-cta,.rb-hero-secondary{width:100% !important;min-width:0 !important;min-height:56px !important;display:flex !important;align-items:center !important;justify-content:center !important;padding:0 18px !important;font-size:14px !important}
  .mr-ghost::before{font-size:clamp(60px,19vw,104px) !important}
  /* paddings horizontaux resserrés sur les grands blocs */
  #app [style*="padding:60px 28px"],
  #app [style*="padding:54px 28px"],
  #app [style*="padding:44px 28px"]{padding-left:16px !important;padding-right:16px !important}
  .rb-lesson-head{flex-basis:100% !important;padding:14px 12px !important;gap:9px !important;align-items:flex-start !important}
  .rb-lesson-head>span:first-child{min-width:27px !important}
  /* Téléphone : la case « Marquer comme lue » passe sous le titre, en pleine
     largeur. Le titre respire et la zone tactile devient franche, gants compris. */
  .rb-lesson-mark{max-width:none !important;width:100% !important;border-left:0 !important;border-top:1px solid rgba(29,30,27,.1) !important;padding:12px !important;min-height:48px !important}
  .rb-field-guide{padding:0 1px 2px !important}
}

/* Machine du hero : présente mais discrète sur mobile (derrière le texte) */
@media (max-width:640px){
  .rb-hero-photo{inset:-2% 0 !important;background-position:center,45% 58% !important;background-size:100% 100%,auto 60%;animation-name:rbHeroZoomMobile;filter:saturate(1.04) contrast(1.04) brightness(.9)}
  .rb-hero-photo-vignette{background:linear-gradient(90deg,rgba(20,20,19,.96) 0%,rgba(20,20,19,.9) 48%,rgba(20,20,19,.54) 100%),linear-gradient(180deg,transparent 54%,rgba(20,20,19,.76) 100%)}
}

@media (max-width:340px){
  .rb-brand{flex-basis:auto !important;min-width:0 !important;max-width:34px !important;gap:0 !important}
  .rb-brand-mark{width:28px !important;height:28px !important}
  .rb-brand>span{display:none !important}
  .rb-manual-link{font-size:0 !important;gap:0 !important;padding:8px 7px !important}
  .rb-manual-link span{font-size:9px !important}
}

/* ===== Accueil v1.10.3 : héros bannière — la machine 3D d'abord, le contenu ensuite ===== */
.rb-hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.rb-hero-bg video{width:100%;height:100%;object-fit:cover;object-position:62% 42%;filter:saturate(1.05) contrast(1.05)}
.rb-hero-bg-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,20,19,.94),rgba(20,20,19,.6) 46%,rgba(20,20,19,.24) 100%),linear-gradient(0deg,rgba(20,20,19,.88),transparent 38%),linear-gradient(180deg,rgba(20,20,19,.5),transparent 28%)}
.rb-hero-inner{min-height:min(86svh,780px);display:flex;align-items:center}
.rb-hero-grid{display:grid;grid-template-columns:minmax(0,680px);gap:38px;align-items:center}
/* la vidéo joue seule ~2,4 s, puis le voile et le contenu arrivent en fondu */
@keyframes rbScrimIn{from{opacity:0}to{opacity:1}}
.rb-hero-bg-scrim{animation:rbScrimIn 1.1s ease 2.4s both}
.rb-hero-badges{animation:rbHeroTextIn .56s cubic-bezier(.22,.61,.36,1) 2.46s both}
.rb-hero-stage h1{animation:rbHeroTitleIn .72s cubic-bezier(.16,1,.3,1) 2.58s both}
.rb-hero-stage h1 span{display:inline-block;animation:rbHeroTextIn .58s cubic-bezier(.22,.61,.36,1) 2.76s both}
.rb-hero-copy{animation:rbHeroTextIn .58s cubic-bezier(.22,.61,.36,1) 2.8s both}
.rb-hero-actions{animation:rbHeroTextIn .58s cubic-bezier(.22,.61,.36,1) 3.1s both}
@media(prefers-reduced-motion:reduce){.rb-hero-bg video{display:none}.rb-hero-bg-scrim{animation:none !important}}
@media(max-width:880px){.rb-hero-inner{min-height:min(76svh,600px)}}
/* v1.11.0 : héros 3D temps réel contrôlable — la vidéo couvre le chargement puis s'efface */
.rb-hero-bg canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .9s ease}
.rb-hero-bg video{transition:opacity .9s ease}
.rb-hero-bg.rb-3d-live canvas{opacity:1}
.rb-hero-bg.rb-3d-live video{opacity:0}
.rb-hero-3d-hint{position:absolute;right:16px;bottom:14px;z-index:2;pointer-events:none;background:rgba(20,20,19,.72);border:1px solid rgba(255,255,255,.22);color:#E5E4E0;font-weight:700;font-size:12px;letter-spacing:.04em;padding:8px 13px;opacity:0;transition:opacity .5s ease 1.2s}
.rb-hero-bg.rb-3d-live .rb-hero-3d-hint{opacity:1}
.rb-hero-3d-hint.rb-hint-vue{opacity:0 !important;transition-delay:0s}
@media(max-width:880px){.rb-hero-3d-hint{display:none}}
/* v1.12.0 : le glisser atteint le canvas 3D — les calques au-dessus laissent passer la souris,
   seuls les boutons et liens du héros restent cliquables */
.rb-hero-bg-scrim{pointer-events:none}
.rb-hero-inner{pointer-events:none}
.rb-hero-inner a,.rb-hero-inner button,.rb-hero-inner input,.rb-hero-inner select,.rb-hero-inner [role="button"]{pointer-events:auto}
.rb-hero-bg canvas{cursor:grab}
.rb-hero-bg canvas:active{cursor:grabbing}
/* v1.12.2 : boutons de zoom du héros 3D */
.rb-hero-zoom{position:absolute;right:16px;top:50%;transform:translateY(-50%);z-index:2;display:flex;flex-direction:column;gap:8px}
.rb-hero-zoom button{width:42px;height:42px;border:1px solid rgba(255,255,255,.28);background:rgba(20,20,19,.72);color:#FAF9F5;font-size:22px;font-weight:800;line-height:1;cursor:pointer;transition:border-color .15s,background .15s}
.rb-hero-zoom button:hover{border-color:#D92624;background:rgba(20,20,19,.9)}
@media(max-width:880px){.rb-hero-zoom{display:none}}

/* ===== v1.13.0 : la machine 3D seule en haut — aucun texte devant ===== */
:root{--rb3d-h:min(66svh,640px)}
.rb-hero-bg{inset:auto;top:0;left:0;right:0;height:var(--rb3d-h)}
/* voile réduit à une transition douce : rien ne masque la machine */
.rb-hero-bg-scrim{background:linear-gradient(180deg,rgba(20,20,19,.30),transparent 16%,transparent 74%,#141413 100%);animation:none}
/* le contenu passe SOUS la bande 3D (!important : bat le margin inline de l'app) */
.rb-hero-inner{margin-top:var(--rb3d-h) !important;min-height:0;display:block}
/* entrées rapides : plus besoin d'attendre, le texte ne couvre plus la machine */
.rb-hero-badges{animation:rbHeroTextIn .56s cubic-bezier(.22,.61,.36,1) .06s both}
.rb-hero-stage h1{animation:rbHeroTitleIn .72s cubic-bezier(.16,1,.3,1) .18s both}
.rb-hero-stage h1 span{display:inline-block;animation:rbHeroTextIn .58s cubic-bezier(.22,.61,.36,1) .36s both}
.rb-hero-copy{animation:rbHeroTextIn .58s cubic-bezier(.22,.61,.36,1) .4s both}
.rb-hero-actions{animation:rbHeroTextIn .58s cubic-bezier(.22,.61,.36,1) .82s both}
/* l'indice et le zoom restent dans la bande 3D */
.rb-hero-3d-hint{bottom:auto;top:calc(var(--rb3d-h) - 44px)}
.rb-hero-zoom{top:calc(var(--rb3d-h) / 2)}
@media(max-width:880px){:root{--rb3d-h:min(48svh,440px)}}
.rb-hero-photo-card{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.16);border-top:4px solid #D92624;box-shadow:0 34px 70px -30px rgba(0,0,0,.85);animation:rbHeroTextIn .6s cubic-bezier(.22,.61,.36,1) .3s both}
.rb-hero-photo-card img{display:block;width:100%;height:100%;min-height:250px;max-height:430px;object-fit:cover;object-position:62% 45%;animation:rbHeroImgZoom 18s ease-in-out infinite alternate;filter:saturate(1.05) contrast(1.05)}
/* vidéo 3D du héros : mêmes dimensions que la photo, sans le zoom CSS (la caméra bouge déjà) */
.rb-hero-photo-card video{display:block;width:100%;height:100%;min-height:250px;max-height:430px;object-fit:cover;object-position:50% 45%;filter:saturate(1.05) contrast(1.05)}
.rb-hero-photo-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 62%,rgba(20,20,19,.5) 100%);pointer-events:none}
@keyframes rbHeroImgZoom{from{transform:scale(1)}to{transform:scale(1.08)}}
@media(max-width:880px){.rb-hero-grid{grid-template-columns:1fr;gap:24px}.rb-hero-photo-card img,.rb-hero-photo-card video{max-height:280px;min-height:200px}}
@media(prefers-reduced-motion:reduce){.rb-hero-photo-card,.rb-hero-photo-card img{animation:none !important}.rb-hero-photo-card video{display:none}.rb-hero-photo-card video+img{display:block !important}}
/* Les puces d'info gardent leur propre taille malgré la règle mobile .rb-hero-copy */
.rb-hero-chips{max-width:100% !important}