/* Éditorial — le principe du jeu, en boucle automatique. */

*{box-sizing:border-box;}

/* `hidden` ne cache que si aucune règle ne pose un `display` par ailleurs —
   `.rgl-b-vignettes` (display:grid) et consorts en posent un : sans ce
   `!important`, `element.hidden = true` ne ferait plus rien pour elles. */
[hidden]{display:none!important;}

.rgl-b-page{margin:0;background:var(--bg);color:var(--ink);font-family:'Plus Jakarta Sans',system-ui,sans-serif;}

/* Le conteneur principal — même logique que .seance-shell : largeur plafonnée,
   centrée, un peu d'air au-dessus du bandeau standard (.topbar.app-topbar,
   dans le flux, plus en position:fixed) et en dessous du contenu. */
.rgl-b-shell{width:min(1380px,calc(100% - 32px));margin:0 auto;padding:28px 0 64px;}

.rgl-b-retour{margin-bottom:18px;}

/* Le kicker et le titre du niveau actif d'abord, centrés ; la navigation
   entre niveaux ensuite — les 5 niveaux toujours visibles côte à côte (une
   tuile chacun), celle du niveau actif agrandie et remplie de son accent,
   flèches aux deux bouts — voir renderNav dans regles.js. Pas de minuteur :
   on ne fait jamais avancer l'utilisateur d'un niveau à l'autre tout seul.
   Chaque tuile garde la couleur de SON niveau (n.couleur), contrairement au
   cycle sauge/terracotta/moutarde/prune du halo du niveau 3 (plus bas) qui
   ne dépend d'aucun niveau. */
.rgl-b-niv-section{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:26px;text-align:center;}
/* Fondu enchaîné au changement de niveau (renderContenuTexte dans
   regles.js) : sortant, texte remplacé, entrant — plutôt qu'un texte qui
   saute d'un mot à l'autre sans transition. */
.rgl-b-niv-section .rgl-b-kicker{margin-bottom:0;transition:opacity .22s ease;}
.rgl-b-niv-section h1{
  font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:clamp(26px,3.2vw,40px);line-height:1.05;
  margin:0;letter-spacing:-.01em;max-width:700px;transition:opacity .22s ease;
}
@media(prefers-reduced-motion:reduce){
  .rgl-b-niv-section .rgl-b-kicker,.rgl-b-niv-section h1{transition:none;}
}

.rgl-b-niv-row{width:100%;display:flex;align-items:center;gap:10px;}
.rgl-b-niv-tuiles{flex:1;display:flex;align-items:center;gap:8px;min-width:0;}

/* Une tuile : léger dégradé de carte, un fin liseré de couleur en pied qui
   trahit l'accent du niveau même au repos, et un lift au survol — pour ne
   plus être un simple rectangle gris parmi d'autres rectangles gris.
   Élément UNIQUE (voir renderNav dans regles.js) : actif/inactif ne fait que
   basculer des classes sur la même tuile, jamais la reconstruire, sinon
   aucune des transitions ci-dessous n'aurait d'état de départ à animer.
   Le remplissage actif vit dans ::before (superposé, opacité 0→1) plutôt
   que dans `background` directement : un dégradé ne s'anime pas en fondu
   d'une valeur à l'autre, une opacité oui. */
.rgl-b-niv-tuile{
  flex:1;min-width:0;height:58px;box-sizing:border-box;position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  border-radius:14px;border:1.5px solid var(--line);
  background:linear-gradient(165deg,var(--card-2,var(--card)) 0%,var(--card) 100%);
  color:var(--ink);font:inherit;padding:7px 8px;cursor:pointer;
  transition:flex-grow .45s cubic-bezier(.16,1,.3,1),height .45s cubic-bezier(.16,1,.3,1),
    transform .2s ease,border-color .25s ease,box-shadow .35s ease;
}
.rgl-b-niv-tuile::before{
  content:'';position:absolute;inset:0;border-radius:inherit;opacity:0;z-index:0;
  background:linear-gradient(180deg,rgba(255,255,255,.16) 0%,transparent 45%),
    linear-gradient(160deg,var(--ca-solid,var(--mustard)) 0%,var(--ca,var(--mustard)) 100%);
  transition:opacity .4s ease;pointer-events:none;
}
.rgl-b-niv-tuile::after{
  content:'';position:absolute;left:14px;right:14px;bottom:0;height:3px;border-radius:3px 3px 0 0;
  background:var(--ca,var(--line));opacity:.5;transition:opacity .3s ease;
}
.rgl-b-niv-tuile:hover{transform:translateY(-3px);}
.rgl-b-niv-tuile:hover:not(.rgl-b-niv-tuile--active){border-color:var(--ca,var(--line));box-shadow:0 10px 22px rgba(0,0,0,.22);}
.rgl-b-niv-tuile:hover:not(.rgl-b-niv-tuile--active)::after{opacity:.85;}
.rgl-b-niv-tuile-icone{
  position:relative;z-index:1;flex:none;width:22px;height:22px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:var(--ca-soft,var(--mustard-soft));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  transition:width .35s cubic-bezier(.16,1,.3,1),height .35s cubic-bezier(.16,1,.3,1),
    background .35s ease,box-shadow .35s ease;
}
.rgl-b-niv-tuile-icone svg{width:11px;height:11px;color:var(--ca,var(--mustard-2));transition:width .3s ease,height .3s ease,color .3s ease;}
/* `white-space:nowrap` + ellipsis : un titre ne doit JAMAIS passer à la
   ligne dans une tuile, quelle que soit sa longueur ou l'étroitesse de
   l'écran (voir titreCourt dans regles-scenes.js pour le niveau 4, dont le
   titre complet ne tiendrait pas). 12px : le plancher du site (CLAUDE.md). */
.rgl-b-niv-tuile-label{
  position:relative;z-index:1;font-size:12px;font-weight:700;color:var(--ink-soft);line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
  transition:color .3s ease,font-size .3s ease,font-weight .3s ease;
}

/* Active : la tuile grandit et son remplissage à deux tons (--ca-solid →
   --ca, calibrés pour porter un libellé blanc dans les deux thèmes — voir
   tokens.css) apparaît en fondu par-dessus le dégradé neutre — jamais un
   simple aplat mustard fixe. */
.rgl-b-niv-tuile--active{
  flex:1.7;height:70px;border-color:transparent;
  box-shadow:0 16px 34px -6px var(--ca-soft,rgba(0,0,0,.3)),0 8px 20px rgba(0,0,0,.32);
}
.rgl-b-niv-tuile--active::before{opacity:1;}
.rgl-b-niv-tuile--active::after{opacity:0;}
.rgl-b-niv-tuile--active .rgl-b-niv-tuile-icone{
  width:27px;height:27px;border-radius:9px;background:rgba(255,255,255,.24);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);
}
.rgl-b-niv-tuile--active .rgl-b-niv-tuile-icone svg{width:14px;height:14px;color:#fff;}
.rgl-b-niv-tuile--active .rgl-b-niv-tuile-label{font-weight:800;font-size:12px;color:#fff;}

.rgl-b-niv-tuile--reussi:not(.rgl-b-niv-tuile--active){border-color:var(--sage-light,#86a473);}
.rgl-b-niv-badge-reussi{
  position:absolute;top:-6px;right:-6px;width:19px;height:19px;border-radius:50%;
  background:var(--sage-solid,var(--sage));color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.35),0 0 0 2px var(--bg);z-index:1;
}
.rgl-b-niv-check-icon{width:10px;height:10px;}

.rgl-b-niv-fleche{
  flex:none;width:30px;height:30px;border-radius:50%;
  border:1.5px solid var(--line);background:var(--card);color:var(--ink-soft);cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-subtle);
  transition:border-color .15s ease,color .15s ease,transform .15s ease;
}
.rgl-b-niv-fleche svg{width:13px;height:13px;}
.rgl-b-niv-fleche:hover{border-color:var(--mustard);color:var(--ink);transform:scale(1.06);}

@media(prefers-reduced-motion:reduce){
  .rgl-b-niv-tuile,.rgl-b-niv-tuile::before,.rgl-b-niv-tuile::after,
  .rgl-b-niv-tuile-icone,.rgl-b-niv-tuile-icone svg,.rgl-b-niv-tuile-label{transition:none;}
  .rgl-b-niv-tuile:hover,.rgl-b-niv-fleche:hover{transform:none;}
}
.rgl-b-stage-wrap{
  display:grid;grid-template-columns:1.25fr 1fr;align-items:start;gap:clamp(24px,4vw,64px);
}
@media(max-width:860px){.rgl-b-stage-wrap{grid-template-columns:1fr;gap:16px;}}

/* La carte du court — même vocabulaire que .hp-section-card (home.css) :
   liseré var(--line), fond var(--card), coins arrondis du design system.
   Le court lui-même (.rgl-b-stage) ne change pas : il se contente de vivre
   dans une carte plutôt que de flotter sur le fond de page. */
.rgl-b-stage-card{
  position:sticky;top:100px;aspect-ratio:1/1;
  border:1.5px solid var(--line);border-radius:var(--radius);
  background:var(--card);box-shadow:var(--shadow-subtle);overflow:hidden;
}
@media(max-width:860px){.rgl-b-stage-card{position:relative;}}
.rgl-b-stage{position:absolute;inset:26px;}
/* `touch-action:none` : sans lui, le premier glissé au doigt fait défiler la
   page plutôt que tourner la caméra — même compromis que `seance.css` pour
   les GRANDS courts (pas les vignettes de bibliothèque, où le glissé sert
   déjà à faire défiler la liste). */
.rgl-b-court{position:absolute;inset:0;width:100%;height:100%;cursor:grab;touch-action:none;}
.rgl-b-court.court-tourne{cursor:grabbing;}
.rgl-b-blobs{position:absolute;inset:0;pointer-events:none;}
.rgl-b-trace{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.rgl-b-court[hidden],.rgl-b-trace[hidden]{display:none;}
/* La scène 3D (public/scene-3d/scene.js) : posée SOUS le court SVG, prête à
   le remplacer si WebGL est disponible (voir mountZones dans regles.js) —
   même géométrie de conteneur, même geste de rotation (`court-tourne`).
   `canvas{display:block}` : sans lui, l'espace blanc sous la ligne de base
   du canvas déborderait légèrement de `inset:0`. */
.rgl-b-scene3d{position:absolute;inset:0;width:100%;height:100%;cursor:grab;touch-action:none;}
.rgl-b-scene3d canvas{display:block;width:100%;height:100%;}
.rgl-b-scene3d.court-tourne{cursor:grabbing;}
.rgl-b-scene3d[hidden]{display:none;}

/* Le verdict/la légende d'impact : posé au point de contact avec le mur,
   projeté en coordonnées écran (positionnerSur) — pas un élément fixe. */
.rgl-b-verdict{
  position:absolute;transform:translate(-50%,-130%);padding:6px 14px;border-radius:999px;
  font-size:13px;font-weight:800;white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;letter-spacing:.01em;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.rgl-b-verdict--visible{opacity:1;transform:translate(-50%,-160%);}
.rgl-b-verdict--valide{background:var(--success);color:#0e1a0f;}
.rgl-b-verdict--tin,.rgl-b-verdict--out,.rgl-b-verdict--faute{background:var(--danger);color:var(--danger-ink);}
.rgl-b-verdict--neutre{background:var(--card-pop,var(--card));color:var(--ink);border:1px solid var(--mustard);}
.rgl-b-verdict--alerte{background:var(--mustard);color:#2a1e04;}
.rgl-b-verdict--fin{left:50%!important;top:8%!important;transform:translate(-50%,0)!important;}

/* Le niveau 4 : quatre vignettes indépendantes, en grille. Remplace le court
   principal (masqué) le temps du niveau. */
.rgl-b-vignettes{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;position:absolute;inset:0;
}
.rgl-b-vignette{display:flex;flex-direction:column;gap:6px;}
.rgl-b-vignette-stage{position:relative;flex:1;border-radius:14px;overflow:hidden;background:var(--card);}
.rgl-b-vignette-court,.rgl-b-vignette-trace{position:absolute;inset:0;width:100%;height:100%;}
.rgl-b-vignette-trace{pointer-events:none;}
.rgl-b-vignette-titre{margin:0;font-size:13px;font-weight:700;color:var(--ink-soft);text-align:center;}
.rgl-b-vignette-label{
  position:absolute;left:50%;bottom:8%;transform:translate(-50%,10px);padding:4px 10px;border-radius:999px;
  font-size:12px;font-weight:800;white-space:nowrap;opacity:0;transition:opacity .18s ease,transform .18s ease;
}
.rgl-b-vignette-label--visible{opacity:1;transform:translate(-50%,0);}
.rgl-b-vignette-label--valide{background:var(--success);color:#0e1a0f;}
.rgl-b-vignette-label--tin,.rgl-b-vignette-label--out,.rgl-b-vignette-label--faute{background:var(--danger);color:var(--danger-ink);}
.rgl-b-vignette-label--alerte{background:var(--mustard);color:#2a1e04;}
@media(max-width:640px){.rgl-b-vignettes{position:static;grid-template-columns:1fr 1fr;aspect-ratio:1/1.15;}}

/* Le niveau 5 : le panneau de choix, posé en bas de la scène principale. */
.rgl-b-choice{
  position:absolute;left:0;right:0;bottom:0;padding:16px;border-radius:16px 16px 0 0;
  background:linear-gradient(to top,var(--card) 70%,transparent);
}
.rgl-b-choice-progress{margin:0 0 4px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-muted);}
.rgl-b-choice-intro{margin:0 0 12px;font-size:15px;line-height:1.4;color:var(--ink);}
.rgl-b-choice-buttons{display:flex;gap:8px;flex-wrap:wrap;}
.rgl-b-choice-reveal{margin-top:12px;padding-top:12px;border-top:1px solid var(--mustard-soft);}
.rgl-b-choice-verdict{margin:0 0 4px;font-weight:800;font-size:15px;}
.rgl-b-choice-verdict--ok{color:var(--success);}
.rgl-b-choice-verdict--ko{color:var(--danger);}
.rgl-b-choice-explication{margin:0 0 12px;font-size:14px;color:var(--ink-soft);line-height:1.4;}

/* Une lueur ambiante au sol, sous les joueurs — le dessin net du joueur vient
   se poser dessus, pas à sa place : la lueur donne l'atmosphère, le tracé
   donne la figure. */
.rgl-b-blob{
  position:absolute;width:110px;height:110px;border-radius:50%;filter:blur(22px);
  transition:transform .15s ease-out;
}
.rgl-b-blob--a{background:radial-gradient(circle,var(--terracotta) 0%,transparent 72%);opacity:.4;}
.rgl-b-blob--b{background:radial-gradient(circle,var(--blue) 0%,transparent 72%);opacity:.4;}

/* Le niveau 3 (le service) : une zone du court allumée à la fois, posée dans
   .rgl-b-trace par surlignerZones (court-3d.js) — un groupe par forme, la
   forme elle-même plus un jeton numéroté qui reprend le numéro de la puce.
   `opacity` sur le groupe gère l'apparition / la disparition (le blanc entre
   deux puces) ; l'animation ne touche que fill-opacity/stroke-opacity, pour
   ne jamais se battre avec cette transition. */
/* `transform-box:fill-box` : le point de départ de l'agrandissement suit la
   FORME elle-même (son propre centre), pas l'origine du viewBox entier —
   sans lui, chaque zone surgirait depuis le coin du court plutôt que de se
   poser sur place. */
.rgl-b-surlignage{
  opacity:0;transform:scale(.94);transform-box:fill-box;transform-origin:center;
  transition:opacity .45s ease,transform .45s cubic-bezier(.16,1,.3,1);pointer-events:none;
}
.rgl-b-surlignage--visible{opacity:1;transform:scale(1);}
/* Remplissage bas (le halo reste un REPÈRE, jamais un aplat qui masque le
   court dessous) + une lueur externe portée par la couleur d'accent : c'est
   elle qui fait lire « zone éclairée » plutôt que « zone peinte ». */
.rgl-b-surlignage-forme--aire{
  fill:var(--rgl-accent,var(--mustard));stroke:var(--rgl-accent,var(--mustard));stroke-width:1.2;
  filter:drop-shadow(0 0 7px var(--rgl-accent-soft,rgba(231,168,37,.55)));
  animation:rgl-b-surlignage-respire 1.7s ease-in-out infinite;
}
.rgl-b-surlignage-forme--ligne{
  fill:none;stroke:var(--rgl-accent,var(--mustard));stroke-width:2.4;stroke-linecap:round;
  filter:drop-shadow(0 0 5px var(--rgl-accent-soft,rgba(231,168,37,.55)));
  animation:rgl-b-surlignage-respire 1.7s ease-in-out infinite;
}
@keyframes rgl-b-surlignage-respire{
  0%,100%{fill-opacity:.13;stroke-opacity:.6;}
  50%{fill-opacity:.25;stroke-opacity:1;}
}
/* Le jeton numéroté — un repère discret, pas un aplat qui capte l'œil avant
   le dessin : fond sombre translucide, liseré et chiffre dans l'accent du
   niveau. Son ancrage (voir FORMES_SURLIGNAGE dans court-3d.js) l'écarte
   déjà du joueur posé dans la même zone ; il reste petit pour ne jamais le
   chevaucher. */
/* Même pastille que la puce active de la liste (.rgl-b-note-num) et que le
   jeton de la scène 3D : aplat de l'accent, chiffre blanc, halo doux. */
.rgl-b-surlignage-jeton{fill:var(--rgl-accent-solid,var(--mustard));stroke:var(--rgl-accent-soft,var(--mustard-soft));stroke-width:1.6;paint-order:stroke;}
.rgl-b-surlignage-numero{
  fill:#fff;font-size:5.5px;font-weight:700;font-family:'Plus Jakarta Sans',system-ui,sans-serif;
}
@media(prefers-reduced-motion:reduce){
  .rgl-b-surlignage-forme--aire,.rgl-b-surlignage-forme--ligne{animation:none;fill-opacity:.22;stroke-opacity:.85;}
}

/* Le trajet du service (puce « La cible » uniquement) : un ARC lissé (voir
   cheminLisse dans regles-kit.js), pas une balle qui vole en boucle — la
   scène reste immobile (voir traceTrajectoireService dans regles.js). Trois
   indices de mouvement superposés, tous discrets : une lueur floue sous le
   trait, un pointillé qui défile, et un point qui parcourt le trait une
   fois toutes les quelques secondes. */
.rgl-b-trajectoire-lueur{
  fill:none;stroke:var(--rgl-accent,var(--mustard));stroke-width:3.2;stroke-linecap:round;
  opacity:.2;filter:blur(2.2px);
}
.rgl-b-trajectoire-trait{
  fill:none;stroke-width:1;stroke-linecap:round;
  stroke-dasharray:2.2 2.2;animation:rgl-b-trajectoire-marche 1.4s linear infinite;
}
@keyframes rgl-b-trajectoire-marche{to{stroke-dashoffset:-8.8;}}
.rgl-b-trajectoire-comete{
  fill:var(--rgl-accent,var(--mustard));opacity:0;
  filter:drop-shadow(0 0 3px var(--rgl-accent,var(--mustard)));
  animation:rgl-b-trajectoire-comete 3.2s ease-in-out infinite;
}
@keyframes rgl-b-trajectoire-comete{
  0%,6%{offset-distance:0%;opacity:0;}
  16%,86%{opacity:.95;}
  96%,100%{offset-distance:100%;opacity:0;}
}
@media(prefers-reduced-motion:reduce){
  .rgl-b-trajectoire-trait{animation:none;}
  .rgl-b-trajectoire-comete{display:none;}
}
/* Les deux points jaunes de la balle — comme un vrai ballon de compétition,
   jamais teintés par l'accent du niveau. Le corps est un dégradé posé en
   ligne par `creerBalleIcone` (regles.js), pas une classe : un radial-
   gradient a besoin d'un identifiant propre par instance. */
.rgl-b-balle-point{fill:#f2c94c;}
/* Le joueur entier se détache très légèrement du fond du court — une ombre
   portée courte, jamais la même chose que l'ombre au sol projetée (`ombre`
   dans regles-kit.js), qui elle suit la géométrie du sol. */
.rgl-b-joueur{filter:drop-shadow(0 1.5px 2px rgba(0,0,0,.28));}

.rgl-b-column{max-width:600px;}
.rgl-b-kicker{display:block;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mustard-2);margin-bottom:16px;}

.rgl-b-notes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:26px;}
.rgl-b-note{
  position:relative;padding-left:28px;margin:0;opacity:0;filter:blur(6px);
  transform:translateY(14px) scale(.96);
  font-size:20px;line-height:1.5;color:var(--ink-soft);
  transition:opacity .55s cubic-bezier(.16,1,.3,1),filter .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1);
}
.rgl-b-note::before{
  content:'';position:absolute;left:0;top:9px;width:9px;height:9px;border-radius:50%;
  background:var(--mustard);box-shadow:0 0 0 4px var(--mustard-soft);
}
.rgl-b-note strong{color:var(--ink);font-weight:700;}
.rgl-b-note--visible{opacity:1;filter:blur(0);transform:translateY(0) scale(1);}

/* Niveaux 1 et 3 uniquement : la puce dont le halo est actuellement posé
   sur le court (boucleZones dans regles.js) — sa couleur suit --rgl-accent,
   la même variable que le halo, pour que l'œil relie les deux sans effort. */
.rgl-b-note--actif::before{background:var(--rgl-accent,var(--mustard));box-shadow:0 0 0 4px var(--rgl-accent-soft,var(--mustard-soft));}
.rgl-b-note--actif strong{color:var(--rgl-accent,var(--ink));}

/* Niveaux 1 et 3 : la puce devient une pastille numérotée — le même numéro
   que le jeton posé sur la zone du court (boucleZones dans regles.js,
   construireSurbrillance dans scene-3d/court.js). Au repos, un simple
   cercle au liseré discret ; la puce active prend l'aplat de l'accent et le
   halo doux de la zone éclairée, exactement comme son jeton sur le court.
   Les autres puces s'effacent un peu, sans disparaître : on lit la règle
   active, on voit les suivantes. */
.rgl-b-notes--numerotees{gap:22px;}
.rgl-b-notes--numerotees .rgl-b-note{
  padding-left:46px;cursor:pointer;border-radius:12px;outline:none;
  transition:opacity .55s cubic-bezier(.16,1,.3,1),filter .55s cubic-bezier(.16,1,.3,1),
    transform .55s cubic-bezier(.16,1,.3,1),color .5s ease;
}
.rgl-b-notes--numerotees .rgl-b-note::before{content:none;}
.rgl-b-notes--numerotees .rgl-b-note:not(.rgl-b-note--actif){color:var(--ink-muted);}
.rgl-b-notes--numerotees .rgl-b-note strong{transition:color .5s ease;}
.rgl-b-notes--numerotees .rgl-b-note:not(.rgl-b-note--actif) strong{color:var(--ink-soft);}
.rgl-b-notes--numerotees .rgl-b-note:focus-visible .rgl-b-note-num{outline:2px solid var(--rgl-accent,var(--mustard));outline-offset:3px;}
.rgl-b-note-num{
  position:absolute;left:0;top:1px;width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;
  color:var(--ink-muted);background:var(--card);border:1.5px solid var(--line);
  box-shadow:0 0 0 0 transparent;
  transition:background .5s ease,color .5s ease,border-color .5s ease,box-shadow .6s cubic-bezier(.16,1,.3,1);
}
.rgl-b-notes--numerotees .rgl-b-note:hover:not(.rgl-b-note--actif) .rgl-b-note-num{
  border-color:var(--rgl-accent,var(--mustard));color:var(--rgl-accent,var(--ink));
}
.rgl-b-note--actif .rgl-b-note-num{
  background:var(--rgl-accent-solid,var(--mustard));border-color:transparent;color:#fff;
  box-shadow:0 0 0 5px var(--rgl-accent-soft,var(--mustard-soft));
}
@media(max-width:860px){
  .rgl-b-notes--numerotees .rgl-b-note{padding-left:40px;}
  .rgl-b-note-num{width:27px;height:27px;font-size:13px;top:0;}
}

@media(prefers-reduced-motion:reduce){
  .rgl-b-note{transition:opacity .3s ease;filter:none;transform:none;}
  .rgl-b-notes--numerotees .rgl-b-note{transition:opacity .3s ease;}
  .rgl-b-note-num,.rgl-b-notes--numerotees .rgl-b-note strong{transition:none;}
}

@media(max-width:860px){
  .rgl-b-note{font-size:17px;}
}

/* Boutons — un seul style partagé par le panneau de choix (niveau 5) et le
   score, décliné en neutre / accent / correct / incorrect. */
.rgl-b-btn{
  border:1.5px solid var(--mustard);border-radius:10px;background:transparent;color:var(--ink);
  font:inherit;font-weight:700;font-size:14px;padding:9px 16px;cursor:pointer;transition:background .15s ease,color .15s ease;
}
.rgl-b-btn:hover:not(:disabled){background:var(--mustard-soft);}
.rgl-b-btn:disabled{cursor:default;opacity:.6;}
.rgl-b-btn--accent{background:var(--mustard);color:#2a1e04;border-color:var(--mustard);}
.rgl-b-btn--accent:hover{background:var(--mustard-2);}
.rgl-b-btn--correct{background:var(--success);color:#0e1a0f;border-color:var(--success);}
.rgl-b-btn--incorrect{background:var(--danger);color:var(--danger-ink);border-color:var(--danger);}

.rgl-b-panneau{margin-top:clamp(36px,6vh,64px);}

/* Le score du niveau 5 (les 4 scénarios sont notés directement). */
.rgl-b-score{padding:18px 20px;border-radius:14px;background:var(--card-2);}
.rgl-b-score-titre{margin:0 0 6px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-muted);}
.rgl-b-score-valeur{margin:0;font-size:16px;font-weight:700;color:var(--ink);}

/* ==========================================================================
   MOBILE — le mode « leçon » (≤ 760px)
   Le court est épinglé en haut, les règles se lisent en carrousel juste
   dessous (une carte par règle, la suivante dépasse), un pied donne le
   rythme (précédent · points · suivant), et les cinq niveaux forment une
   barre d'onglets à portée de pouce. Voir regles-mobile.js. Hors mobile,
   les éléments propres à ce mode restent masqués.
   ========================================================================== */

.rgl-b-pied,.rgl-b-astuce,.rgl-b-niv-tuile-tab,.rgl-b-btn-indice,.rgl-b-choice-segments{display:none;}

@media(max-width:760px){
  /* Le bandeau du site défile avec la page : le court épinglé prend sa place. */
  .rgl-b-page .topbar{position:relative;}

  .rgl-b-shell{
    width:calc(100% - 32px);padding:12px 0 calc(96px + env(safe-area-inset-bottom));
    display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:center;
  }
  .rgl-b-shell .rgl-b-retour{
    margin:0;width:44px;height:44px;padding:0;border-radius:50%;
    display:flex;align-items:center;justify-content:center;font-size:18px;
  }
  .rgl-b-retour-txt{display:none;}

  .rgl-b-niv-section{display:block;margin:0;text-align:left;min-width:0;}
  .rgl-b-niv-section .rgl-b-kicker{font-size:12px;letter-spacing:.08em;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .rgl-b-niv-section h1{font-size:22px;line-height:1.1;max-width:none;}

  /* La barre d'onglets : les cinq niveaux, toujours atteignables au pouce. */
  .rgl-b-niv-row{
    position:fixed;left:0;right:0;bottom:0;z-index:50;width:auto;gap:0;
    padding:6px 8px calc(6px + env(safe-area-inset-bottom));
    background:color-mix(in srgb,var(--card) 94%,transparent);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border-top:1px solid var(--line);
  }
  .rgl-b-niv-fleche{display:none;}
  .rgl-b-niv-tuiles{gap:2px;}
  .rgl-b-niv-tuile,.rgl-b-niv-tuile--active{
    flex:1;height:56px;padding:4px 2px;gap:3px;overflow:visible;
    border:0;border-radius:14px;background:transparent;box-shadow:none;
  }
  .rgl-b-niv-tuile::before,.rgl-b-niv-tuile::after{content:none;}
  .rgl-b-niv-tuile:hover{transform:none;}
  .rgl-b-niv-tuile-icone,.rgl-b-niv-tuile--active .rgl-b-niv-tuile-icone{
    width:30px;height:30px;border-radius:50%;background:transparent;box-shadow:none;
  }
  .rgl-b-niv-tuile-icone svg,.rgl-b-niv-tuile--active .rgl-b-niv-tuile-icone svg{width:19px;height:19px;color:var(--ink-muted);}
  .rgl-b-niv-tuile-label{display:none;}
  .rgl-b-niv-tuile-tab{display:block;position:relative;z-index:1;font-size:12px;font-weight:700;line-height:1;color:var(--ink-muted);white-space:nowrap;}
  .rgl-b-niv-tuile--active .rgl-b-niv-tuile-icone{background:var(--ca-solid,var(--mustard));box-shadow:0 6px 14px -4px var(--ca-soft,transparent);}
  .rgl-b-niv-tuile--active .rgl-b-niv-tuile-icone svg{width:17px;height:17px;color:#fff;}
  .rgl-b-niv-tuile--active .rgl-b-niv-tuile-tab{color:var(--ink);font-weight:800;}
  .rgl-b-niv-badge-reussi{top:2px;right:calc(50% - 25px);width:16px;height:16px;box-shadow:0 0 0 2px var(--card);}
  .rgl-b-niv-check-icon{width:9px;height:9px;}

  /* Le court épinglé : pleine largeur, il reste visible pendant la lecture. */
  .rgl-b-stage-wrap{display:block;grid-column:1/-1;}
  .rgl-b-stage-card{
    position:sticky;top:0;z-index:6;aspect-ratio:auto;
    height:clamp(220px,36vh,400px);height:clamp(220px,36dvh,400px);
    margin:12px -16px 0;border-width:0 0 1.5px;border-radius:0 0 22px 22px;
    box-shadow:var(--shadow-subtle);
  }
  .rgl-b-stage{inset:8px 12px;}

  .rgl-b-astuce{
    display:block;position:absolute;left:50%;bottom:0;margin:0;transform:translateX(-50%);
    padding:5px 12px;border-radius:999px;background:var(--card-pop,var(--card));border:1px solid var(--line);
    color:var(--ink-soft);font-size:12px;font-weight:700;white-space:nowrap;pointer-events:none;
    animation:rgl-b-astuce 6s ease both;
  }
  @keyframes rgl-b-astuce{
    0%{opacity:0;transform:translate(-50%,6px);}
    8%,85%{opacity:1;transform:translate(-50%,0);}
    100%{opacity:0;}
  }

  /* Le carrousel de règles. */
  .rgl-b-column{max-width:none;}
  .rgl-b-notes{
    flex-direction:row;gap:10px;position:relative;margin:14px -16px 0;padding:4px 16px 10px;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0 16px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .rgl-b-notes::-webkit-scrollbar{display:none;}
  .rgl-b-notes .rgl-b-note{
    flex:0 0 calc(100% - 12px);scroll-snap-align:start;scroll-snap-stop:always;
    padding:16px 16px 16px 38px;border:1.5px solid var(--line);border-radius:16px;background:var(--card);
    font-size:15.5px;line-height:1.5;opacity:.55;filter:none;transform:none;
    transition:opacity .25s ease,border-color .25s ease,box-shadow .25s ease;
  }
  .rgl-b-notes .rgl-b-note::before{left:16px;top:22px;}
  .rgl-b-notes .rgl-b-note--actif{opacity:1;border-color:var(--rgl-accent,var(--line));box-shadow:var(--shadow-subtle);}
  .rgl-b-notes--numerotees .rgl-b-note{padding-left:58px;}
  .rgl-b-notes--numerotees .rgl-b-note .rgl-b-note-num{left:16px;top:14px;width:30px;height:30px;font-size:14px;}
  .rgl-b-notes--numerotees .rgl-b-note:not(.rgl-b-note--actif){color:var(--ink-soft);}

  /* Le pied : précédent · points · suivant. */
  .rgl-b-pied{display:flex;align-items:center;gap:12px;margin-top:6px;}
  .rgl-b-pied-prec{
    flex:none;width:48px;height:48px;border-radius:50%;border:1.5px solid var(--line);background:var(--card);color:var(--ink);
    display:flex;align-items:center;justify-content:center;cursor:pointer;
  }
  .rgl-b-pied-prec:disabled{opacity:.35;cursor:default;}
  .rgl-b-pied-prec svg{width:20px;height:20px;}
  .rgl-b-points{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;min-width:0;}
  .rgl-b-point{width:8px;height:8px;border-radius:999px;background:var(--line);transition:width .3s ease,background .3s ease;}
  .rgl-b-point--actif{width:22px;background:var(--rgl-accent-solid,var(--mustard));}
  .rgl-b-pied-suiv{
    flex:none;height:48px;padding:0 20px;border:0;border-radius:999px;cursor:pointer;
    background:var(--rgl-accent-solid,var(--mustard));color:#fff;font:inherit;font-size:15px;font-weight:800;
    display:inline-flex;align-items:center;gap:8px;
    box-shadow:0 8px 18px -6px var(--rgl-accent-soft,transparent);
  }
  .rgl-b-pied-suiv svg{width:18px;height:18px;}
  .rgl-b-pied-suiv:active,.rgl-b-pied-prec:active{transform:scale(.96);}

  /* Niveau 4 : les quatre vignettes défilent dans le court épinglé. */
  .rgl-b-vignettes{
    display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    position:absolute;inset:0;aspect-ratio:auto;
  }
  .rgl-b-vignettes::-webkit-scrollbar{display:none;}
  .rgl-b-vignette{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;}

  /* Niveau 5 : le quiz se pose sous le court, en carte. */
  body[data-scene="scenarios"] .rgl-b-pied,
  body[data-scene="scenarios"] .rgl-b-panneau{display:none;}
  body[data-scene="scenarios"] .rgl-b-notes .rgl-b-note{opacity:1;}
  .rgl-b-choice{
    position:static;margin-top:14px;padding:16px;border-radius:18px;
    border:1.5px solid var(--line);background:var(--card);
  }
  .rgl-b-choice-segments{display:flex;gap:6px;margin-bottom:12px;}
  .rgl-b-segment{flex:1;height:5px;border-radius:3px;background:var(--line);transition:background .3s ease;}
  .rgl-b-segment--courant{background:var(--rgl-accent-solid,var(--mustard));}
  .rgl-b-segment--ok{background:var(--success);}
  .rgl-b-segment--ko{background:var(--danger);}
  .rgl-b-choice-intro{font-size:16px;}
  .rgl-b-choice-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
  .rgl-b-choice .rgl-b-btn{
    min-height:64px;padding:8px 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  }
  .rgl-b-btn-nom{font-size:16px;font-weight:800;line-height:1.1;}
  .rgl-b-btn-indice{display:block;font-size:12px;font-weight:600;line-height:1.2;opacity:.75;}
  .rgl-b-choice-suivant{width:100%;min-height:48px;}
  .rgl-b-choice-reveal{scroll-margin-bottom:96px;}
  body[data-scene="scenarios"] .rgl-b-notes{margin-top:18px;}
}

@media(max-width:760px) and (prefers-reduced-motion:reduce){
  .rgl-b-astuce{animation:none;}
  .rgl-b-point,.rgl-b-segment,.rgl-b-notes .rgl-b-note{transition:none;}
}