/* ==========================================================================
   Journey reel — bouton hero + focus bokeh + scène motion design
   Pigments : drapeau de La Réunion (Lo Mahavèl) + drapeau français,
   posés sur la DA noir/blanc.
   ========================================================================== */
:root{
  --jr-bleu:#3366ff;       /* ciel du volcan rayonnant */
  --jr-marine:#2a3fd0;     /* bleu de France */
  --jr-azur:#58a6ff;       /* océan Indien */
  --jr-rouge:#ef2b1e;      /* volcan / rouge du drapeau */
  --jr-lave:#e8501f;       /* coulée de lave */
  --jr-soleil:#ffd000;     /* rayons */
  --jr-paper:var(--hero-bg,var(--bg)); /* même fond que le hero (noir / blanc purs) : la photo s'y fond, relève invisible */
  --jr-ink:var(--w);
  --jr-ink-2:var(--w2);
  --jr-ink-3:var(--w3);
  --jr-blend:screen;
  --jr-acc:#ff4a3d;        /* accent : le rouge du drapeau (trajet, repères, curseurs, frises) */
  --jr-sea:var(--jr-azur);  /* la mer (lignes d'eau autour de l'île) */
}
[data-theme="light"]{--jr-blend:multiply;--jr-acc:#e0281d;--jr-sea:var(--jr-bleu)}

@property --jr-spin{syntax:'<angle>';inherits:false;initial-value:0deg}

/* ---------- Bouton "Lancer l'animation" (même famille que .cv-float-card) ---------- */
.reel-float-card{
  --reel-closed-width:74px;--reel-open-width:236px;
  position:absolute;right:-18px;bottom:112px;z-index:5;
  display:grid;grid-template-columns:auto 1fr;align-items:center;justify-items:center;gap:0;
  width:var(--reel-closed-width);padding:.62rem .9rem;border-radius:12px;
  border:1px solid rgba(var(--spot),.08);
  background:linear-gradient(180deg,rgba(var(--spot),.035),rgba(var(--spot),.015)),rgba(17,17,24,.72);
  color:var(--w);text-align:left;overflow:hidden;isolation:isolate;cursor:pointer;
  box-shadow:0 22px 70px rgba(0,0,0,.35),0 0 0 1px rgba(var(--spot),.03) inset;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  animation:cvFloat 5.5s ease-in-out -2.2s infinite;
  transition:width .48s var(--ease),padding .48s var(--ease),gap .48s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
[data-theme="light"] .reel-float-card{background:linear-gradient(180deg,rgba(var(--spot),.035),rgba(var(--spot),.015)),rgba(255,255,255,.8);border-color:rgba(0,0,0,.08);box-shadow:0 20px 60px rgba(0,0,0,.12)}
/* bordure pigmentée qui tourne */
.reel-float-card::before{
  content:'';position:absolute;inset:-1px;border-radius:13px;padding:1px;z-index:0;
  background:conic-gradient(from var(--jr-spin),transparent 0 55%,var(--jr-bleu) 65%,var(--jr-soleil) 75%,var(--jr-rouge) 85%,transparent 95%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:jrSpin 5s linear infinite;opacity:.75;pointer-events:none;transition:opacity .35s ease;
}
.reel-float-card>*{position:relative;z-index:1}
.reel-float-card:hover,.reel-float-card:focus-visible{
  width:var(--reel-open-width);gap:.8rem;padding:.78rem .95rem;
  transform:translateY(-4px) rotate(.6deg);border-color:rgba(var(--spot),.2);
  box-shadow:0 26px 90px rgba(0,0,0,.45),0 0 60px -10px color-mix(in srgb,var(--jr-bleu) 60%,transparent);outline:none;
}
.reel-float-card:hover::before,.reel-float-card:focus-visible::before{opacity:1;animation-duration:2.2s}
.reel-float-card:focus-visible{box-shadow:0 0 0 2px var(--w),0 26px 90px rgba(0,0,0,.45)}

/* logo animé : goutte de pigments qui tourne + play */
.reel-orb{position:relative;width:42px;height:52px;border-radius:7px;overflow:hidden;display:grid;place-items:center;background:#07070b}
[data-theme="light"] .reel-orb{background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.reel-orb__flag{position:absolute;inset:0;width:100%;height:100%}
.reel-orb__rays{transform-box:view-box;transform-origin:60px 40px;animation:jrRays 4s ease-in-out infinite alternate}
.reel-float-card:hover .reel-orb__rays,.reel-float-card:focus-visible .reel-orb__rays{animation-duration:1.1s}
.reel-orb__volcan{transform-box:view-box;transform-origin:60px 80px;transition:transform .5s var(--ease)}
.reel-float-card:hover .reel-orb__volcan{transform:scaleY(1.08)}
.reel-orb__play{position:relative;width:16px;height:16px;color:#fff;filter:drop-shadow(0 1px 6px rgba(0,0,0,.5));transition:transform .45s var(--ease)}
.reel-float-card:hover .reel-orb__play{transform:scale(1.18) translateX(1px)}
.reel-orb__ring{position:absolute;inset:6px;border-radius:50%;border:1px dashed rgba(255,255,255,.5);animation:jrSpinPlain 9s linear infinite;opacity:.55}

.reel-copy{min-width:0;width:0;display:flex;flex-direction:column;gap:.18rem;overflow:hidden;opacity:0;transform:translateX(-8px);
  transition:width .48s var(--ease),opacity .26s ease,transform .48s var(--ease);pointer-events:none}
.reel-float-card:hover .reel-copy,.reel-float-card:focus-visible .reel-copy{width:150px;opacity:1;transform:none;transition-delay:0s,.12s,0s}
.reel-kicker{font-family:var(--mono);font-size:.62rem;color:var(--w3);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.reel-title{font-family:var(--mono);font-size:.8rem;line-height:1.2;color:var(--w);font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.reel-title span{display:inline-block}
.reel-float-card:hover .reel-title span{animation:jrWave .9s var(--ease) both}

@keyframes jrSpin{to{--jr-spin:360deg}}
@keyframes jrSpinPlain{to{transform:rotate(360deg)}}
@keyframes jrRays{0%{opacity:.75}100%{opacity:1}}
@keyframes jrWave{0%{transform:translateY(6px);opacity:0}100%{transform:none;opacity:1}}

@media(max-width:900px){
  .reel-float-card{--reel-closed-width:72px;--reel-open-width:228px;right:-18px;bottom:66px;animation-name:cvFloatMobile}
}
@media(max-width:500px){
  .reel-float-card{--reel-closed-width:64px;--reel-open-width:222px;right:-10px;bottom:54px;padding:.5rem .86rem}
  .reel-float-card:hover,.reel-float-card:focus-visible{gap:.58rem;padding:.58rem .68rem}
  .reel-float-card:hover .reel-copy,.reel-float-card:focus-visible .reel-copy{width:146px}
  .reel-orb{width:36px;height:46px}
}

/* ---------- Boutons flottants du hero : CV puis animation, côte à côte, moitié moins grands ----------
   Le conteneur flex est ancré en bas à droite de la photo : quand un bouton s'ouvre au survol, il pousse
   l'autre vers la gauche au lieu de le recouvrir. Les libellés du survol restent lisibles. */
.hero-float-cta{position:absolute;right:-18px;bottom:26px;z-index:5;display:flex;align-items:flex-end;gap:6px}
.hero-float-cta .cv-float-card,.hero-float-cta .reel-float-card{position:relative;right:auto;bottom:auto;flex:none;height:42px;padding:.4rem .62rem;border-radius:9px}
.hero-float-cta .cv-float-card::before,.hero-float-cta .reel-float-card::before{border-radius:10px}
.hero-float-cta .cv-float-card{--cv-closed-width:42px;--cv-open-width:134px}
.hero-float-cta .reel-float-card{--reel-closed-width:42px;--reel-open-width:180px;animation-delay:-.35s} /* léger décalage : une vague */
.hero-float-cta .cv-float-card:hover,.hero-float-cta .cv-float-card:focus-visible,.hero-float-cta .cv-float-card.is-expanded,
.hero-float-cta .reel-float-card:hover,.hero-float-cta .reel-float-card:focus-visible{gap:.65rem;padding:.4rem .85rem;transform:translateY(-2px)}
.hero-float-cta .cv-doc{width:21px;height:26px;border-radius:4px;gap:2.5px;padding:6px 4px}
.hero-float-cta .cv-doc::after{border-left-width:6px;border-bottom-width:6px}
.hero-float-cta .cv-doc span{height:1.5px}
.hero-float-cta .reel-orb{width:21px;height:26px;border-radius:4px}
.hero-float-cta .reel-orb__play{width:9px;height:9px}
.hero-float-cta .reel-orb__ring{inset:3px}
.hero-float-cta .cv-float-card:hover .cv-copy,.hero-float-cta .cv-float-card:focus-visible .cv-copy,.hero-float-cta .cv-float-card.is-expanded .cv-copy{width:86px}
.hero-float-cta .reel-float-card:hover .reel-copy,.hero-float-cta .reel-float-card:focus-visible .reel-copy{width:126px}
.hero-float-cta .cv-kicker,.hero-float-cta .reel-kicker{font-size:.52rem}
.hero-float-cta .cv-copy strong,.hero-float-cta .reel-title{font-size:.68rem}
.hero-float-cta .cv-title__icon{width:12px;height:12px;flex-basis:12px}
@media(max-width:900px){.hero-float-cta{bottom:-18px}}
@media(max-width:500px){
  .hero-float-cta{right:-10px;bottom:-16px;gap:5px}
  .hero-float-cta .cv-float-card{--cv-closed-width:36px;--cv-open-width:128px}
  .hero-float-cta .reel-float-card{--reel-closed-width:36px;--reel-open-width:172px}
  .hero-float-cta .cv-float-card,.hero-float-cta .reel-float-card{height:37px;padding:.3rem .5rem}
  .hero-float-cta .cv-float-card:hover,.hero-float-cta .cv-float-card:focus-visible,.hero-float-cta .cv-float-card.is-expanded,
  .hero-float-cta .reel-float-card:hover,.hero-float-cta .reel-float-card:focus-visible{gap:.55rem;padding:.3rem .7rem}
  .hero-float-cta .cv-doc,.hero-float-cta .reel-orb{width:18px;height:23px}
}

/* ---------- Focus : page floutée en bokeh, trou net autour du bouton ---------- */
.jr-focus{
  --jr-x:50%;--jr-y:50%;--jr-rx:140px;--jr-ry:90px;
  position:fixed;inset:0;z-index:1200;pointer-events:none;opacity:0;visibility:hidden;
  transition:opacity .55s var(--ease),visibility 0s linear .55s;
  -webkit-mask:radial-gradient(var(--jr-rx) var(--jr-ry) at var(--jr-x) var(--jr-y),transparent 62%,#000 100%);
          mask:radial-gradient(var(--jr-rx) var(--jr-ry) at var(--jr-x) var(--jr-y),transparent 62%,#000 100%);
  backdrop-filter:blur(11px) saturate(.75);-webkit-backdrop-filter:blur(11px) saturate(.75);
  background:rgba(5,5,9,.42);
}
[data-theme="light"] .jr-focus{background:rgba(250,250,250,.38)}
.jr-focus.is-on{opacity:1;visibility:visible;transition:opacity .55s var(--ease),visibility 0s}

/* ---------- Scène ---------- */
/* défilement bloqué pendant l'animation ; la gouttière de la barre reste réservée : ni le contenu ni le menu fixe ne bougent */
html.jr-playing{scrollbar-gutter:stable}
/* papier opaque sur toute la page : gouttière libérée, la scène occupe toute la largeur (bande vide sinon) */
html.jr-playing.jr-full{scrollbar-gutter:auto}
html.jr-playing,html.jr-playing body{overflow:hidden!important}
html.jr-playing body>:not(.jr-stage),html.jr-playing body>:not(.jr-stage) *,html.jr-playing body>:not(.jr-stage) *::before,html.jr-playing body>:not(.jr-stage) *::after{animation-play-state:paused!important}
/* texte réservé aux lecteurs d'écran */
.jr-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* toute la fenêtre, gouttière de la barre de défilement comprise : les calculs en innerWidth tombent juste */
.jr-stage{position:fixed;inset:0;right:auto;width:100vw;z-index:1400;pointer-events:none;color:var(--jr-ink);font-family:var(--body);overflow:hidden}
.jr-stage.is-live{pointer-events:auto}
.jr-paper{position:absolute;inset:0;background:var(--jr-paper);opacity:0}
/* grille technique : déborde de 200px pour pouvoir glisser d'une scène à l'autre */
.jr-grid{position:absolute;inset:-200px;opacity:0;pointer-events:none;will-change:transform;
  background-image:linear-gradient(color-mix(in srgb,var(--jr-ink) 7%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--jr-ink) 7%,transparent) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask:radial-gradient(ellipse 62% 58% at 50% 50%,#000 25%,transparent 100%);mask:radial-gradient(ellipse 62% 58% at 50% 50%,#000 25%,transparent 100%)}
.jr-iris{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.jr-iris circle{fill:none;stroke:var(--jr-ink);stroke-width:1.2;opacity:0}
.jr-gl{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:var(--jr-blend)}
.jr-grain{position:absolute;inset:-4%;opacity:.16;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:jrGrain 1.2s steps(4) infinite}
/* en pause, plus rien ne bouge */
.jr-stage.is-paused .jr-grain,.jr-stage.is-paused .caret,.jr-stage.is-paused .jr-pin>i::after,.jr-stage.is-paused .jr-since__dot::after{animation-play-state:paused}
@keyframes jrGrain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-1%,3%)}100%{transform:translate(0,0)}}

/* portrait */
.jr-portrait{position:absolute;left:0;top:0;transform-origin:50% 50%;will-change:transform}
.jr-portrait__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* cadre de visée : quatre coins qui se resserrent sur le portrait */
.jr-portrait__frame{position:absolute;inset:var(--jr-fi,9%);opacity:0;pointer-events:none}
.jr-portrait__frame i{position:absolute;width:22px;height:22px;border:0 solid color-mix(in srgb,var(--jr-ink) 70%,transparent)}
.jr-portrait__frame i:nth-child(1){left:0;top:0;border-width:2px 0 0 2px}
.jr-portrait__frame i:nth-child(2){right:0;top:0;border-width:2px 2px 0 0}
.jr-portrait__frame i:nth-child(3){left:0;bottom:0;border-width:0 0 2px 2px}
.jr-portrait__frame i:nth-child(4){right:0;bottom:0;border-width:0 2px 2px 0}

/* textes */
.jr-scene{position:absolute;inset:0;display:grid;align-content:center;padding:clamp(1.5rem,6vw,6rem);pointer-events:none;visibility:hidden}
.jr-scene__col{max-width:min(560px,90vw);position:relative;isolation:isolate}
.jr-scene__col::before{content:'';position:absolute;inset:-22% -26%;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,color-mix(in srgb,var(--jr-paper) 82%,transparent) 35%,transparent)}
.jr-scene--low{align-content:end;padding-bottom:clamp(4.5rem,11vh,7rem)}
.jr-scene--right .jr-scene__col{justify-self:end}
.jr-scene--center{justify-items:center;text-align:center}
/* année : colonnes de chiffres qui roulent (compteur continu d'une scène à l'autre) */
.jr-year{font-family:var(--mono);font-weight:700;font-size:clamp(3.8rem,11vw,9rem);line-height:1;letter-spacing:-.06em;
  color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--jr-ink) 55%,transparent);margin-bottom:.15rem;display:flex}
.jr-scene--center .jr-year{justify-content:center}
/* 2021 -> aujourd'hui : un trait part de l'année, le point « en cours » pulse au bout */
.jr-yearrow{display:flex;align-items:center;gap:.9rem;margin-bottom:.15rem}
.jr-yearrow .jr-year{margin-bottom:0}
.jr-since{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--jr-ink);white-space:nowrap}
.jr-since__line{display:block;width:clamp(2rem,5vw,4.5rem);height:1px;background:linear-gradient(90deg,color-mix(in srgb,var(--jr-ink) 25%,transparent),var(--jr-acc));transform-origin:left}
.jr-since__dot{position:relative;display:block;flex:none;width:8px;height:8px;margin-left:-.45rem;border-radius:50%;background:var(--jr-acc);box-shadow:0 0 10px var(--jr-acc)}
.jr-since__dot::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--jr-acc);animation:jrPing 1.6s var(--ease) infinite}
.jr-year__d{display:block;height:1em;overflow:hidden;margin-right:-.04em;
  -webkit-mask:linear-gradient(transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(transparent,#000 10%,#000 90%,transparent)}
.jr-year__s{display:block;will-change:transform}
.jr-year__s b{display:block;height:1em;line-height:1em;font-weight:inherit;letter-spacing:0;padding-right:.02em}
.jr-h{font-weight:300;font-size:clamp(1.9rem,4.4vw,3.6rem);line-height:1.02;letter-spacing:-.035em;margin:0 0 .9rem}
.jr-h .w,.jr-h .wi{display:inline-block;will-change:transform,opacity}
/* entrée « cache » : chaque mot sort de sa propre fenêtre */
.jr-h.is-mask .w{overflow:hidden;vertical-align:top;padding:0 .06em .14em 0;margin:0 -.06em -.14em 0}
.jr-p{font-size:clamp(.98rem,1.4vw,1.15rem);line-height:1.55;color:var(--jr-ink-2);max-width:44ch;margin:0 0 1.4rem}
.jr-scene--center .jr-p{margin-inline:auto}
/* nombres animés (années d'expérience, durées par domaine) : chiffres à chasse fixe, rien ne bouge pendant le défilement */
.jr-cnt{display:inline-block;font-weight:inherit;font-variant-numeric:tabular-nums;text-align:right}
.jr-xp{font-weight:600;color:var(--jr-acc)}
.jr-scene--onflag .jr-xp{color:#fff}
.jr-domains{display:flex;flex-wrap:wrap;gap:.5rem .6rem;margin-bottom:1.2rem}
.jr-scene--center .jr-domains{justify-content:center}
/* domaines : puces au trait avec un point de couleur (pas d'aplat) */
.jr-domain{display:inline-flex;align-items:center;gap:.5rem;padding:.3rem .8rem .3rem .65rem;font-size:.9rem;font-weight:500;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--jr-ink) 20%,transparent);background:color-mix(in srgb,var(--jr-paper) 72%,transparent)}
.jr-domain::before{content:'';flex:none;width:6px;height:6px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c)}
/* indépendant -> cofondateur : deux logos (légende dessous) reliés par un trait parcouru d'un point */
.jr-cos{display:flex;align-items:flex-start;gap:.8rem;margin:0 0 1.2rem}
.jr-co{display:grid;justify-items:start;gap:.45rem;min-width:0}
.jr-co__tile{width:42px;height:42px;border-radius:11px;overflow:hidden;background:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 1px rgba(0,0,0,.08),0 10px 24px -12px rgba(0,0,0,.5)}
.jr-co__tile{padding:4px}
.jr-co__tile img{width:100%;height:100%;object-fit:contain;display:block}
.jr-co__tile.is-wide{width:112px;padding:7px 12px}
/* logo blanc (R.TORNEY CONSULTING) : tuile sombre, liseré clair pour la détacher du fond en thème sombre */
.jr-co__tile.is-dark{background:#141418;padding:2px;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 10px 24px -12px rgba(0,0,0,.55)}
.jr-co__tile.is-wide img{object-fit:contain}
.jr-co__txt{display:grid;gap:.12rem;min-width:0}
.jr-co__txt b{font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.06em;color:var(--jr-ink);white-space:nowrap}
.jr-co__txt small{font-family:var(--mono);font-size:.64rem;color:var(--jr-ink-3);white-space:nowrap}
.jr-cos__link{position:relative;flex:1 1 30px;min-width:22px;max-width:72px;height:1px;margin-top:21px}
.jr-cos__link i:first-child{position:absolute;inset:0;background:color-mix(in srgb,var(--jr-ink) 35%,transparent);transform-origin:left}
.jr-cos__link i:last-child{position:absolute;left:0;top:-3px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--jr-acc);box-shadow:0 0 10px var(--jr-acc)}

/* clients : tuiles claires (les logos gardent leurs couleurs) posées sur une frise datée */
.jr-clients{display:flex;flex-wrap:wrap;gap:.9rem 0;margin:0 0 1.1rem}
.jr-client{margin:0;padding:0 .25rem;display:grid;justify-items:center;gap:.45rem}
.jr-client__tile{width:88px;height:46px;padding:6px 9px;border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 1px rgba(0,0,0,.07),0 10px 22px -14px rgba(0,0,0,.55)}
/* flex (et non grid) : la hauteur en % se résout, un logo haut comme Imerys reste dans sa tuile */
.jr-client__tile img{width:100%;height:100%;min-width:0;object-fit:contain;display:block}
.jr-client__word{font-size:.68rem;font-weight:600;line-height:1.1;letter-spacing:-.01em;text-align:center;color:#1d1d1f}
.jr-client__tile img+.jr-client__word{display:none}
.jr-client figcaption{position:relative;width:100%;padding-top:.5rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;color:var(--jr-ink-3);text-align:center}
/* chaque légende porte un bout de trait : alignées, elles forment la ligne du temps */
.jr-client figcaption::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:color-mix(in srgb,var(--jr-ink) 28%,transparent);
  transform:scaleX(var(--jr-tick,1));transform-origin:left}
.jr-client figcaption::after{content:'';position:absolute;left:50%;top:-2.5px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--jr-acc)}
@media(min-width:1200px){.jr-scene[data-scene="cloud"] .jr-scene__col{max-width:680px}}
.jr-tools{display:flex;flex-wrap:wrap;gap:.35rem .9rem;font-family:var(--mono);font-size:.78rem;color:var(--jr-ink-3)}
.jr-tools span{display:inline-block;min-height:1.2em}

/* expérience par domaine : échelle en années, rang, barre segmentée (dégradé d'encre, accent sur la première),
   repère coloré à l'extrémité, durée, puis les logos des clients du secteur */
.jr-scene[data-scene="domains"] .jr-scene__col{max-width:min(820px,94vw)}
.jr-bars{display:grid;gap:.5rem;width:min(780px,92vw);margin:0 auto}
.jr-bar,.jr-bars__scale{display:grid;grid-template-columns:1.6rem minmax(8.5rem,11rem) 1fr 4.3rem 6.3rem;align-items:center;gap:0 .9rem;font-size:.95rem}
.jr-bars__scale{height:1rem}
.jr-bars__ticks{position:relative;align-self:stretch}
.jr-bars__ticks i{position:absolute;top:0;transform:translateX(-50%);font-style:normal;font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;color:var(--jr-ink-3);white-space:nowrap}
.jr-bars__ticks i:first-child{transform:none}
.jr-bars__ticks i:last-child{transform:translateX(-100%)}
.jr-bar__n{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;color:var(--jr-ink-3);text-align:left}
.jr-bar.is-top .jr-bar__n{color:var(--jr-acc)}
.jr-bar__k{text-align:right;white-space:nowrap}
/* piste : ligne de base + graduations d'une année (elles se prolongent d'une ligne à l'autre) */
.jr-bar__track{height:12px;position:relative;
  background:linear-gradient(color-mix(in srgb,var(--jr-ink) 16%,transparent),color-mix(in srgb,var(--jr-ink) 16%,transparent)) 0 50%/100% 1px no-repeat}
.jr-bar__track::before{content:'';position:absolute;left:0;right:0;top:-.45rem;bottom:-.45rem;pointer-events:none;
  background:linear-gradient(90deg,color-mix(in srgb,var(--jr-ink) 10%,transparent) 1px,transparent 1px) 0 0/25% 100%,
    linear-gradient(90deg,transparent calc(100% - 1px),color-mix(in srgb,var(--jr-ink) 10%,transparent) 0)}
.jr-bar__stroke{position:absolute;inset:0 auto 0 0;width:var(--v);
  background:linear-gradient(90deg,color-mix(in srgb,var(--jr-ink) 28%,transparent),color-mix(in srgb,var(--jr-ink) 85%,transparent));
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 9px,transparent 9px 12px);mask:repeating-linear-gradient(90deg,#000 0 9px,transparent 9px 12px)}
.jr-bar.is-top .jr-bar__stroke{background:linear-gradient(90deg,color-mix(in srgb,var(--jr-acc) 40%,transparent),var(--jr-acc))}
.jr-bar__cap{position:absolute;top:50%;left:var(--v);width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--c);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent),0 0 14px var(--c)}
.jr-bar__v{font-family:var(--mono);font-size:.78rem;color:var(--jr-ink-2);text-align:right;white-space:nowrap}
.jr-bar.is-top .jr-bar__v{color:var(--jr-ink);font-weight:600}
/* clients du secteur : petites tuiles claires, comme dans les scènes 2017-2021 */
.jr-bar__cl{display:flex;gap:4px}
.jr-bar__cl b{flex:none;width:47px;height:25px;padding:3px 5px;border-radius:6px;background:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 1px rgba(0,0,0,.08),0 6px 14px -8px rgba(0,0,0,.5)}
.jr-bar__cl img{width:100%;height:100%;min-width:0;object-fit:contain;display:block}
.jr-note{font-family:var(--mono);font-size:.7rem;color:var(--jr-ink-3);margin-top:1rem}

/* finale : trois piliers en colonnes, grille éditoriale (filets fins). En haut le numéro rouge et l'intitulé, au milieu
   l'objet 3D (couche WebGL), en bas le mot en très grand, un trait rouge (impact) et les mots-clés. Texte final compact. */
.jr-pillars{position:absolute;inset:0;pointer-events:none}
.jr-pillar{position:absolute;--pad:clamp(.9rem,1.6vw,1.6rem)}
.jr-pillar__rule{position:absolute;left:0;top:0;bottom:0;width:1px;background:color-mix(in srgb,var(--jr-ink) 16%,transparent);transform-origin:50% 0}
.jr-pillar__rule.is-end{left:auto;right:0}
.jr-pillar__n{position:absolute;left:var(--pad);top:4px;display:flex;align-items:baseline;gap:.8rem;white-space:nowrap;
  font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.2em;color:var(--jr-acc)}
.jr-pillar__n em{font-style:normal;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--jr-ink-3)}
.jr-pillar__word{position:absolute;left:var(--pad);top:var(--wy);display:block;overflow:hidden;padding-bottom:.04em;white-space:nowrap;
  font-size:var(--fs);font-weight:800;line-height:1;letter-spacing:-.05em;color:var(--jr-ink)}
.jr-pillar__word span{display:block}
.jr-pillar__bar{position:absolute;left:var(--pad);top:calc(var(--wy) + var(--fs) * 1.06 + 2px);width:2.4rem;height:2px;background:var(--jr-acc);transform-origin:0 50%;transform:scaleX(0)}
.jr-pillar__keys{position:absolute;left:var(--pad);right:var(--pad);top:calc(var(--wy) + var(--fs) * 1.06 + 14px);display:flex;flex-wrap:wrap;gap:.25rem 1.1rem;list-style:none;margin:0;padding:0;
  font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--jr-ink-2)}
.jr-pillar__keys li{position:relative}
.jr-pillar__keys li+li::before{content:'';position:absolute;left:-.6rem;top:50%;width:3px;height:3px;margin-top:-1.5px;border-radius:50%;background:var(--jr-acc)}
/* téléphone en portrait : trois rangées séparées par des filets, l'objet 3D à droite */
.jr-pillars.is-stacked .jr-pillar{--pad:0px}
.jr-pillars.is-stacked .jr-pillar__rule{right:0;bottom:auto;width:auto;height:1px;transform-origin:0 50%}
.jr-pillars.is-stacked .jr-pillar__rule.is-end{top:auto;bottom:0;left:0}
.jr-pillars.is-stacked .jr-pillar__n{top:10px;font-size:clamp(.62rem,1.5vw,.72rem);gap:.6rem}
.jr-pillars.is-stacked .jr-pillar__keys{right:var(--kr);font-size:clamp(.56rem,1.5vw,.7rem);gap:.15rem .9rem}
.jr-scene[data-scene="ai"] .jr-year{font-size:clamp(2.6rem,6vw,5rem)}
.jr-scene[data-scene="ai"] .jr-h{font-size:clamp(1.6rem,3.2vw,2.8rem);margin-bottom:.6rem}
.jr-scene[data-scene="ai"] .jr-p{margin-bottom:.4rem}

/* UI */
.jr-ui{position:absolute;left:0;right:0;bottom:0;padding:.9rem clamp(1rem,4vw,2.5rem) calc(.9rem + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:1rem;opacity:0}
/* chapitres : un segment par scène, cliquable (rejoue la section), étiquette au survol / au focus */
.jr-progress{flex:1;display:flex;gap:4px;align-items:flex-end;min-width:0}
.jr-seg{flex:var(--f,1);position:relative;height:26px;min-width:8px;padding:0;margin:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.jr-seg::before,.jr-seg b{content:'';position:absolute;left:0;right:0;bottom:10px;height:2px;border-radius:2px;transition:height .25s var(--ease),bottom .25s var(--ease)}
.jr-seg::before{background:color-mix(in srgb,var(--jr-ink) 16%,transparent)}
.jr-seg b{background:var(--jr-ink);transform:scaleX(0);transform-origin:left}
.jr-seg:hover::before,.jr-seg:hover b,.jr-seg:focus-visible::before,.jr-seg:focus-visible b{height:6px;bottom:8px}
.jr-seg:hover b,.jr-seg:focus-visible b{background:var(--jr-acc)}
.jr-seg:focus-visible{outline:none}
.jr-seg:focus-visible::before{box-shadow:0 0 0 2px color-mix(in srgb,var(--jr-acc) 60%,transparent)}
.jr-seg__lbl{position:absolute;left:50%;bottom:24px;transform:translate(-50%,4px);opacity:0;pointer-events:none;white-space:nowrap;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;color:var(--jr-ink);padding:.28rem .5rem;border-radius:6px;
  background:color-mix(in srgb,var(--jr-paper) 88%,transparent);border:1px solid color-mix(in srgb,var(--jr-ink) 16%,transparent);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:opacity .2s ease,transform .2s var(--ease)}
.jr-seg:first-child .jr-seg__lbl{left:0;transform:translate(0,4px)}
.jr-seg:last-child .jr-seg__lbl{left:auto;right:0;transform:translate(0,4px)}
.jr-seg:hover .jr-seg__lbl,.jr-seg:focus-visible .jr-seg__lbl{opacity:1;transform:translate(-50%,0)}
.jr-seg:first-child:hover .jr-seg__lbl,.jr-seg:first-child:focus-visible .jr-seg__lbl,.jr-seg:last-child:hover .jr-seg__lbl,.jr-seg:last-child:focus-visible .jr-seg__lbl{transform:none}
/* pause / lecture */
.jr-pp{flex:none;width:34px;height:34px;display:grid;place-items:center;padding:0;border-radius:50%;cursor:pointer;color:var(--jr-ink-2);
  border:1px solid color-mix(in srgb,var(--jr-ink) 18%,transparent);transition:color .25s,border-color .25s}
.jr-pp:hover,.jr-pp:focus-visible{color:var(--jr-ink);border-color:var(--jr-ink);outline:none}
.jr-pp svg{width:14px;height:14px;fill:currentColor}
.jr-pp__play,.jr-pp.is-paused .jr-pp__pause{display:none}
/* son : haut-parleur, ondes ou croix selon l'état */
.jr-snd{flex:none;width:34px;height:34px;display:grid;place-items:center;padding:0;border-radius:50%;cursor:pointer;color:var(--jr-ink-2);
  background:color-mix(in srgb,var(--jr-paper) 72%,transparent);border:1px solid color-mix(in srgb,var(--jr-ink) 18%,transparent);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:color .25s,border-color .25s}
.jr-snd:hover,.jr-snd:focus-visible{color:var(--jr-ink);border-color:var(--jr-ink);outline:none}
.jr-snd svg{width:16px;height:16px}
.jr-snd__spk{fill:currentColor}
.jr-snd__on,.jr-snd__off{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.jr-snd__off,.jr-snd.is-off .jr-snd__on{display:none}
.jr-snd.is-off .jr-snd__off{display:inline}
.jr-pp.is-paused .jr-pp__play{display:inline}
.jr-skip{font-family:var(--mono);font-size:.72rem;color:var(--jr-ink-2);border:1px solid color-mix(in srgb,var(--jr-ink) 18%,transparent);border-radius:999px;padding:.45rem .9rem;cursor:pointer;transition:color .25s,border-color .25s}
.jr-skip:hover,.jr-skip:focus-visible{color:var(--jr-ink);border-color:var(--jr-ink);outline:none}
/* pause et « Passer » lisibles sur le drapeau et sur la place de la Bourse : fond papier dépoli */
.jr-pp,.jr-skip{background:color-mix(in srgb,var(--jr-paper) 72%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.jr-flash{position:absolute;inset:0;background:var(--jr-ink);opacity:0;pointer-events:none;mix-blend-mode:difference}

/* drapeau plein écran */
.jr-flagfs{position:absolute;inset:0;visibility:hidden;overflow:hidden;will-change:clip-path}
.jr-flagfs__col{position:absolute;inset:0;width:100%;height:100%;display:block}
.jr-flagfs__lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.jr-flagfs__lines path{fill:none;stroke:#fff;stroke-width:1.1;stroke-linejoin:round;stroke-linecap:round}
[data-theme="light"] .jr-flagfs__lines path{stroke:#1d1d1f}
.jr-scene--onflag{color:#fff}
.jr-scene--onflag .jr-h{text-shadow:0 2px 24px rgba(0,0,0,.25)}
.jr-scene--onflag .jr-p{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6),0 0 12px rgba(0,0,0,.45)}
.jr-scene--onflag .jr-scene__col::before{display:none}

/* carte au trait (pixels écran, projetée par la couche 3D) : côte, lignes d'eau, pistes, trajet */
.jr-map{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;display:none;
  --jm-asphalt:#2b2f35;--jm-paint:#f3f2ee}
[data-theme="light"] .jr-map{--jm-asphalt:#3a3e44}
.jm-coast{fill:none;stroke:color-mix(in srgb,var(--jr-ink) 85%,transparent);stroke-width:1.5;stroke-linejoin:round}
.jm-water path{fill:none;stroke:var(--jr-sea);stroke-width:1;stroke-dasharray:1;stroke-linejoin:round}
.jm-water path:nth-child(1){stroke-opacity:.55}
.jm-water path:nth-child(2){stroke-opacity:.32}
.jm-water path:nth-child(3){stroke-opacity:.17}
.jm-rwy{fill:var(--jm-asphalt);stroke:color-mix(in srgb,var(--jm-paint) 55%,var(--jm-asphalt));stroke-width:1;stroke-linejoin:round}
.jm-axis{fill:none;stroke:var(--jm-paint);stroke-width:1.4;stroke-dasharray:14 10}
.jm-nums text{fill:var(--jm-paint);font-family:var(--mono);font-weight:700;text-anchor:middle;dominant-baseline:central;opacity:0}
.jm-trail{fill:none;stroke:var(--jr-acc);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:0;
  filter:drop-shadow(0 0 4px color-mix(in srgb,var(--jr-acc) 70%,transparent))}
/* France : contour fin, sans aplat (le zoom teinterait tout l'écran), et son étiquette à drapeau tricolore */
.jm-fr path{fill:none;stroke:color-mix(in srgb,var(--jr-ink) 72%,transparent);stroke-width:1.2;stroke-linejoin:round}
.jm-fr{opacity:0}
.jr-fr{position:absolute;left:0;top:0;opacity:0;will-change:transform;pointer-events:none}
.jr-fr__in{position:absolute;left:0;top:0;transform:translate(-50%,-50%);display:flex;align-items:center;gap:6px;white-space:nowrap;
  font-family:var(--mono);font-size:.64rem;font-weight:700;letter-spacing:.22em;color:var(--jr-ink);text-shadow:0 1px 8px var(--jr-paper),0 0 2px var(--jr-paper)}
.jr-fr__flag{display:flex;flex:none;width:18px;height:12px;border-radius:2px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.28),0 2px 6px rgba(0,0,0,.3)}
.jr-fr__flag b{flex:1}
.jr-fr__flag b:nth-child(1){background:#0055a4}
.jr-fr__flag b:nth-child(2){background:#fff}
.jr-fr__flag b:nth-child(3){background:#ef4135}
/* Gironde : entourée pendant la descente */
.jm-dep path{fill:none;stroke:var(--jr-acc);stroke-width:1.6;stroke-linejoin:round;stroke-dasharray:1}
.jm-dep text{fill:var(--jr-acc);font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.32em;text-anchor:middle;dominant-baseline:central}
.jm-dep{opacity:0}
.jm-morph{fill:#ff0000;stroke:color-mix(in srgb,var(--jr-ink) 85%,transparent);stroke-width:1.5;stroke-linejoin:round;opacity:0}

/* transitions d'évolution : flux de données (2019), nuage (2021). Masques en encre (sombres en thème clair, clairs en
   thème sombre) : une coupe franche en deux tons, tuyaux et contours couleur papier, un accent rouge */
.jr-evo{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;pointer-events:none;visibility:hidden}
.jr-evo .evo-fill,.jr-evo .evo-cfill{fill:var(--jr-ink)}
.jr-evo .evo-band:nth-child(even) .evo-fill{fill:color-mix(in srgb,var(--jr-ink) 90%,var(--jr-paper))}
.jr-evo .evo-pipe{fill:none;stroke:color-mix(in srgb,var(--jr-paper) 30%,transparent);stroke-width:1;stroke-dasharray:14 10}
.jr-evo .evo-edge{fill:none;stroke:color-mix(in srgb,var(--jr-paper) 70%,transparent);stroke-width:1.2}
.jr-evo .evo-edge.is-acc{stroke:var(--jr-acc);stroke-width:2.5;filter:drop-shadow(0 0 8px var(--jr-acc))}
.jr-evo .evo-cfill{stroke:var(--jr-acc);stroke-width:2;vector-effect:non-scaling-stroke}
.jr-evo .evo-hole{fill:none;stroke:var(--jr-acc);stroke-width:2.2;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 8px var(--jr-acc))}
.jr-evo .evo-cin{fill:none;stroke:color-mix(in srgb,var(--jr-paper) 35%,transparent);stroke-width:1;stroke-dasharray:6 8;vector-effect:non-scaling-stroke}
/* étapes du parcours, au centre pendant la transition */
.jr-evo-steps{position:absolute;left:50%;top:50%;display:flex;align-items:center;gap:.9rem;visibility:hidden;pointer-events:none;white-space:nowrap;
  font-family:var(--mono);font-size:clamp(.62rem,1.15vw,.85rem);font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--jr-paper);opacity:0}
.jr-evo-steps span{opacity:.18;padding:.3rem 0;border-bottom:1px solid transparent;transition:none}
.jr-evo-steps span.is-done{opacity:.45}
.jr-evo-steps span.is-cur{opacity:1;border-bottom-color:var(--jr-acc)}
.jr-evo-steps i{width:clamp(1.2rem,3vw,2.6rem);height:1px;background:color-mix(in srgb,var(--jr-paper) 40%,transparent)}
@media (max-width:560px){.jr-evo-steps{flex-direction:column;gap:.35rem;letter-spacing:.16em}.jr-evo-steps i{width:1px;height:.9rem}}
/* pendant le tram : en haut de l'écran, à l'encre sur le papier, au-dessus du tram */
.jr-evo-steps.is-top{top:max(10px,1.4vh);z-index:2;flex-direction:row;gap:.8rem;color:var(--jr-ink);font-size:clamp(.55rem,.95vw,.72rem)}
.jr-evo-steps.is-top i{width:clamp(1rem,2.4vw,2rem);height:1px;background:color-mix(in srgb,var(--jr-ink) 35%,transparent)}
@media (max-width:560px){.jr-evo-steps.is-top{gap:.45rem;letter-spacing:.08em}.jr-evo-steps.is-top i{width:.7rem}}

/* trait rouge qui balaie l'écran entre deux scènes */
.jr-sweep{position:absolute;left:0;top:0;bottom:0;width:2px;margin-left:-1px;opacity:0;pointer-events:none;will-change:transform;
  background:var(--jr-acc);box-shadow:0 0 18px 2px color-mix(in srgb,var(--jr-acc) 55%,transparent),0 0 60px 8px color-mix(in srgb,var(--jr-acc) 18%,transparent)}

/* repères (globe, île, aéroports) et avion : positionnés par la couche 3D */
.jr-geo{position:absolute;inset:0;pointer-events:none;display:none}
.jr-pin{position:absolute;left:0;top:0;opacity:0;will-change:transform}
.jr-pin>i{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 30%,transparent),0 0 18px var(--c)}
.jr-pin>i::after{content:'';position:absolute;inset:-8px;border-radius:50%;border:1px solid var(--c);animation:jrPing 1.6s var(--ease) infinite}
.jr-pin>span{position:absolute;left:14px;top:-9px;white-space:nowrap;font-family:var(--mono);font-size:.74rem;font-weight:600;letter-spacing:.04em;color:var(--jr-ink);
  text-shadow:0 1px 10px var(--jr-paper),0 0 2px var(--jr-paper)}
.jr-pin--a{--c:var(--jr-soleil)}
.jr-pin--b{--c:var(--jr-rouge)}
.jr-pin--b>span{left:auto;right:14px}
.jr-poi{position:absolute;left:0;top:0;opacity:0;will-change:transform}
.jr-poi__in{position:absolute;left:0;top:0;transform-origin:0 0}
.jr-poi__in>i{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--jr-acc);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--jr-acc) 28%,transparent)}
.jr-poi__in>span{position:absolute;left:0;top:-24px;white-space:nowrap;font-family:var(--mono);font-size:.66rem;letter-spacing:.05em;color:var(--jr-ink-2);
  text-shadow:0 1px 8px var(--jr-paper),0 0 2px var(--jr-paper)}
.jr-poi--s .jr-poi__in>span{top:10px}
.jr-plane{position:absolute;left:0;top:0;width:0;height:0;opacity:0;will-change:transform}
.jr-plane__body,.jr-plane__shadow{position:absolute;left:-16px;top:-16px;width:32px;height:32px;will-change:transform}
.jr-plane__body{color:var(--jr-ink);filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.jr-plane__shadow{color:#000;filter:blur(1.5px)}
.jr-plane svg{width:100%;height:100%;fill:currentColor;display:block}
@keyframes jrPing{0%{transform:scale(.4);opacity:1}100%{transform:scale(1.6);opacity:0}}

/* Bordeaux : Place de la Bourse et miroir d'eau, pleine largeur (révélés par une onde) */
.jr-bdx{position:absolute;inset:0;visibility:hidden;overflow:hidden;background:var(--jr-paper);will-change:clip-path;
  /* thème sombre : la place de nuit. Pierre dorée par l'éclairage, vitres sombres (quelques-unes allumées),
     combles d'ardoise, halo bleu nuit à l'horizon, miroir d'eau presque noir qui renvoie l'or des façades */
  --jb-stone:#5b4a2d;--jb-stone2:#3d321f;--jb-edge:rgba(255,226,170,.34);--jb-line:rgba(255,226,170,.24);
  --jb-roof:#232a34;--jb-glass:#121419;--jb-lit:#c9974f;--jb-arch:#0c0d10;--jb-gapc:#1a1610;--jb-bronze:#24221d;
  --jb-lamp:#f3d9a6;--jb-road:#1c1c1f;--jb-water:#0a0f16;--jb-sky:#0d1628}
/* thème clair : la place de jour, au trait sur papier */
[data-theme="light"] .jr-bdx{
  --jb-stone:color-mix(in srgb,#d9c29a 26%,var(--jr-paper));--jb-stone2:color-mix(in srgb,#8a7a60 34%,var(--jr-paper));
  --jb-edge:color-mix(in srgb,var(--jr-ink) 50%,transparent);--jb-line:color-mix(in srgb,var(--jr-ink) 40%,transparent);
  --jb-roof:color-mix(in srgb,#5d6b78 34%,var(--jr-paper));--jb-glass:color-mix(in srgb,var(--jr-ink) 34%,var(--jr-paper));--jb-lit:var(--jb-glass);
  --jb-arch:color-mix(in srgb,var(--jr-ink) 46%,var(--jr-paper));--jb-gapc:color-mix(in srgb,#5a4a36 40%,var(--jr-paper));
  --jb-bronze:color-mix(in srgb,#3a3a34 70%,var(--jr-paper));--jb-lamp:color-mix(in srgb,var(--jr-ink) 75%,transparent);
  --jb-road:color-mix(in srgb,var(--jr-ink) 14%,var(--jr-paper));--jb-water:color-mix(in srgb,#34465a 26%,var(--jr-paper));--jb-sky:var(--jr-paper)}
.jr-bdx::before{content:'';position:absolute;inset:0;opacity:.6;pointer-events:none;
  background-image:linear-gradient(color-mix(in srgb,var(--jr-ink) 6%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--jr-ink) 6%,transparent) 1px,transparent 1px);
  background-size:56px 56px;-webkit-mask:linear-gradient(#000,transparent 60%);mask:linear-gradient(#000,transparent 60%)}
.jr-bdx__art{position:absolute;left:0;right:0;bottom:0;width:100%;height:100%;overflow:hidden}
.jb-build{--jb-fill:1}
.jb-s{fill:var(--jb-stone);fill-opacity:var(--jb-fill);stroke:var(--jb-edge);stroke-width:.7;stroke-linejoin:round;stroke-dasharray:1}
.jb-sh{fill:var(--jb-stone2)}
.jb-r{fill:var(--jb-roof);fill-opacity:var(--jb-fill);stroke:var(--jb-edge);stroke-width:.7;stroke-linejoin:round;stroke-dasharray:1}
.jb-l{fill:none;stroke:var(--jb-line);stroke-width:.6;stroke-dasharray:1}
.jb-w{fill:var(--jb-glass)}
.jb-lit{fill:var(--jb-lit)}
.jb-a{fill:var(--jb-arch)}
.jb-gap{fill:var(--jb-gapc);fill-opacity:var(--jb-fill)}
.jb-f{fill:var(--jb-bronze);fill-opacity:var(--jb-fill);stroke:var(--jb-edge);stroke-width:.5;stroke-dasharray:1}
.jb-fl{fill:none}
.jb-k{fill:var(--jb-lamp)}
.jb-road{fill:var(--jb-road)}
.jb-water{fill:var(--jb-water)}
.jb-sky0{stop-color:var(--jb-sky);stop-opacity:0}
.jb-sky1{stop-color:var(--jb-sky);stop-opacity:1}
.jb-noz{fill:color-mix(in srgb,var(--jr-ink) 14%,transparent)}
.jb-bs{fill:#d8d0bd;stroke:color-mix(in srgb,var(--jr-ink) 40%,transparent);stroke-width:.5}
.jb-ch{fill:none;stroke:color-mix(in srgb,var(--jr-ink) 55%,transparent);stroke-width:.8}
.jb-bn{fill:#23283a}
.jb-bw{fill:#f4f4f2}
/* tram Citadis : livrée réelle (toit bleu acier, vitrage noir, caisse argent), identique dans les deux thèmes */
.jb-t1{fill:#3d6385}
.jb-t2{fill:#0e1a26}
.jb-t3{fill:#aab1b7;stroke:#5b6670;stroke-width:1}
.jb-t4{fill:#3b4148}
.jb-tv{fill:#1f3550}
.jb-ta{fill:#ffb000}
.jb-tb{fill:#3a4148}
.jb-trib{fill:none;stroke:#7d858d;stroke-width:1}
.jb-td{fill:none;stroke:#5b6670;stroke-width:1}
.jb-tp{fill:none;stroke:#41586e;stroke-width:1.2}
.jb-th{fill:#fff6c8}
.jb-tr{fill:#ff2a2a}
.jb-tl{fill:none;stroke:#5c626a;stroke-width:1.5}
.jb-slabs{fill:none;stroke:color-mix(in srgb,var(--jr-ink) 8%,transparent);stroke-width:1}
.jb-quay{fill:none;stroke:color-mix(in srgb,var(--jr-ink) 45%,transparent);stroke-width:1}
/* tram au premier plan (volet vers 2017) */
.jr-whoosh{position:absolute;inset:0;overflow:hidden;visibility:hidden;pointer-events:none}
.jr-whoosh__tram{position:absolute;left:0;top:-6%;height:112%;will-change:transform} /* largeur : calculée à la lecture */
.jr-whoosh [class^="jb-t"]{vector-effect:non-scaling-stroke}

/* diplôme (scène Bordeaux) : badge MIAGE + Bac +2 -> +5 */
.jr-degree{display:inline-flex;align-items:center;gap:1rem;padding:.75rem 1.1rem;border-radius:12px;
  background:color-mix(in srgb,var(--jr-paper) 80%,transparent);border:1px solid color-mix(in srgb,var(--jr-ink) 14%,transparent);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 18px 40px -22px rgba(0,0,0,.5)}
.jr-degree__txt{display:grid;gap:.3rem;justify-items:start}
/* logos d'université : tuile claire, les logos gardent leurs couleurs (lisibles aussi en thème sombre) */
.jr-uni{display:inline-flex;align-items:center;justify-content:center;flex:none;background:#fff;border-radius:10px;padding:7px 11px;
  box-shadow:0 0 0 1px rgba(0,0,0,.08),0 10px 24px -14px rgba(0,0,0,.55)}
.jr-uni img{display:block;height:34px;width:auto}
.jr-uni--solo img{height:32px}
.jr-degree .jr-uni img{height:40px}
.jr-degree__txt b{font-size:.86rem;font-weight:600;color:var(--jr-ink)}
.jr-degree__txt small{font-family:var(--mono);font-size:.7rem;color:var(--jr-ink-2)}
/* emplacement du logo MIAGE officiel (assets/miage-logo.svg), sinon badge typographique */
.jr-miage{display:flex;align-items:center}
.jr-miage__logo{height:26px;width:auto;display:block}
.jr-miage.has-logo .jr-miage__word{display:none}
.jr-miage__word{font-family:var(--mono);font-weight:700;font-size:.72rem;letter-spacing:.32em;padding:.22rem .5rem .22rem .6rem;border-radius:6px;
  color:var(--jr-ink);border:1px solid color-mix(in srgb,var(--jr-ink) 30%,transparent)}
/* Bac +2 -> +5 : odomètre */
.jr-bac{display:flex;align-items:baseline;gap:.25rem;font-weight:300;line-height:1;color:var(--jr-ink)}
.jr-bac__lbl{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--jr-ink-2);margin-right:.2rem}
.jr-bac__plus{font-size:2rem;color:var(--jr-soleil)}
.jr-bac__odo{display:inline-block;height:2.1rem;overflow:hidden;font-size:2.1rem;font-weight:500;color:var(--jr-soleil);
  -webkit-mask:linear-gradient(transparent,#000 22%,#000 78%,transparent);mask:linear-gradient(transparent,#000 22%,#000 78%,transparent)}
.jr-bac__roll{display:flex;flex-direction:column}
.jr-bac__roll i{font-style:normal;height:2.1rem;line-height:2.1rem}
[data-theme="light"] .jr-bac__plus,[data-theme="light"] .jr-bac__odo{color:#b88a00}
.jr-scene.jr-scene--top{align-content:start;padding-top:clamp(4.5rem,11vh,7rem)}

/* certifications : une carte animée par certification + frise 2022 → 2026 */
.jr-scene[data-scene="certs"] .jr-scene__col{max-width:min(960px,94vw)}
.jr-certs{width:min(920px,92vw);margin-top:.2rem}
.jr-cert-stage{position:relative;height:clamp(250px,36vh,320px);perspective:1300px}
.jr-cert{position:absolute;inset:0;display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(1rem,3vw,2.8rem);align-items:center;
  padding:clamp(1rem,2.2vw,1.6rem) clamp(1rem,2.4vw,1.8rem);text-align:left;clip-path:inset(0% 100% 0% 0%);
  border-top:1px solid color-mix(in srgb,var(--jr-ink) 14%,transparent);border-bottom:1px solid color-mix(in srgb,var(--jr-ink) 14%,transparent)}
.jr-cert::before{content:'';position:absolute;left:0;top:-1px;width:64px;height:2px;background:var(--c)}
.jr-cert__art{height:100%;display:flex;align-items:center;justify-content:center;min-height:0;min-width:0}
.jr-cert__art svg{width:100%;height:100%;max-height:250px;overflow:visible;fill:none;stroke:var(--jr-ink);stroke-width:.8;stroke-linecap:round;stroke-linejoin:round}
.jr-cert__art text{fill:var(--jr-ink-3);stroke:none;font-family:var(--mono);font-size:5.6px;letter-spacing:.06em}
.jr-cert__art .fl{stroke:none}
.jr-cert__art .bg{fill:var(--jr-paper)}
.jr-cert__art .silver{fill:color-mix(in srgb,var(--jr-ink) 55%,transparent)}
.jr-cert__art .guide{stroke:color-mix(in srgb,var(--jr-ink) 18%,transparent);stroke-dasharray:1.5 3}
.jr-cert__art .dash{stroke-dasharray:3 3}
.jr-cert__art text.on{fill:#fff;font-weight:700}
.jr-cert__art text.ok{fill:var(--jr-soleil);font-weight:700}
.jr-cert__art text.plus{fill:var(--jr-azur)}
.jr-cert__art text.minus{fill:var(--jr-lave)}
.jr-cert__art .a-t{font-size:6.6px}
.jr-cert__art .caret{animation:jrBlink 1s steps(2) infinite}
[data-theme="light"] .jr-cert__art text.ok{fill:#b88a00}
/* en-tête de carte : logo de l'outil (tuile claire, badge de l'organisme) + émetteur, année, code */
.jr-cert__head{display:flex;align-items:center;gap:.9rem}
.jr-cert__logo{position:relative;flex:none;width:58px;height:58px;border-radius:15px;background:#fff;display:grid;place-items:center;
  box-shadow:0 0 0 1px rgba(0,0,0,.07),0 14px 30px -14px rgba(0,0,0,.55)}
.jr-cert__logo img{width:66%;height:66%;object-fit:contain;display:block}
.jr-cert__logo img.is-crop{width:82%;height:82%;object-fit:cover}
.jr-cert__badge{position:absolute;right:-7px;bottom:-7px;min-width:24px;height:24px;padding:0 4px;border-radius:8px;background:#fff;display:grid;place-items:center;
  box-shadow:0 0 0 1px rgba(0,0,0,.09),0 4px 10px rgba(0,0,0,.25)}
.jr-cert__badge svg{width:14px;height:14px;display:block}
.jr-cert__badge b{font-family:var(--mono);font-size:.52rem;font-weight:700;letter-spacing:.04em;color:#1d1d1f}
.jr-cert__meta{display:grid;justify-items:start;gap:.3rem}
.jr-cert__issuer{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--jr-ink-3)}
.jr-cert__code{font-family:var(--mono);font-size:.64rem;font-weight:600;letter-spacing:.08em;color:var(--jr-ink);padding:.15rem .45rem;border-radius:5px;
  border:1px solid color-mix(in srgb,var(--c) 70%,transparent)}
.jr-cert__name{font-size:clamp(1.35rem,2.6vw,2.1rem);font-weight:400;line-height:1.05;letter-spacing:-.02em;margin:.8rem 0 .9rem;color:var(--jr-ink)}
/* deux certifications sur la même carte : deux colonnes, titres plus compacts */
.jr-cert__pair{display:grid;grid-template-columns:1fr 1fr;gap:.2rem 1.4rem}
.jr-cert__pair .jr-cert__name{font-size:clamp(1.05rem,1.7vw,1.4rem);margin:.8rem 0 .7rem}
.jr-cert__covers{list-style:none;margin:0;padding:0;display:grid;gap:.42rem}
.jr-cert__covers li{position:relative;padding-left:1.1rem;font-size:.92rem;color:var(--jr-ink-2)}
.jr-cert__covers li::before{content:'';position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:2px;background:var(--c);transform:rotate(45deg)}
/* frise : les logos des certifications, le curseur avance de l'un à l'autre */
.jr-cert-rail{position:relative;display:flex;justify-content:space-between;margin:1.3rem auto 0;width:min(620px,86vw)}
.jr-cert-rail::before{content:'';position:absolute;left:14px;right:14px;top:14px;height:1px;background:color-mix(in srgb,var(--jr-ink) 22%,transparent)}
.jr-cert-rail span{position:relative;display:grid;justify-items:center;gap:.4rem;font-family:var(--mono);font-size:.64rem;color:var(--jr-ink-3);opacity:.35}
.jr-cert-rail span b{width:28px;height:28px;border-radius:8px;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.jr-cert-rail span b img{width:64%;height:64%;object-fit:contain;display:block}
.jr-cert-rail span b img.is-crop{width:80%;height:80%;object-fit:cover}
/* deux certifications sous le même logo : pastille « ×2 » */
.jr-cert-rail span b{position:relative}
.jr-cert-rail__n{position:absolute;right:-9px;top:-7px;padding:1px 4px;border-radius:6px;font-style:normal;font-family:var(--mono);font-size:.55rem;font-weight:700;
  line-height:1.3;color:#fff;background:#d92a1e}
.jr-cert-rail__cursor{position:absolute;left:0;top:-5px;width:38px;height:38px;border-radius:11px;border:2px solid var(--jr-acc);
  box-shadow:0 0 16px color-mix(in srgb,var(--jr-acc) 60%,transparent);z-index:1}
@keyframes jrBlink{50%{opacity:0}}

/* stack : grille épurée, contours de logos dessinés */
.jr-scene[data-scene="stack"] .jr-scene__col{max-width:min(980px,94vw)}
.jr-stack{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(1rem,2.4vw,2rem) clamp(.6rem,1.6vw,1.4rem);width:min(960px,92vw);margin:.8rem auto 0}
.jr-tool{display:grid;justify-items:center;gap:.6rem}
.jr-tool__ring{grid-area:1/1;width:78px;height:78px;overflow:visible}
.jr-tool__ring circle{fill:none;stroke:color-mix(in srgb,var(--jr-ink) 30%,transparent);stroke-width:.9}
.jr-tool__logo{grid-area:1/1;align-self:center;width:40px;height:40px;display:flex;align-items:center;justify-content:center;color:var(--jr-ink)}
/* flex : la hauteur en % se résout, un logo haut et étroit (Kafka) reste dans son rond */
.jr-tool__logo .jr-logo{width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}
.jr-tool__img{width:100%;height:100%;object-fit:contain}
.jr-tool__glyph{font-family:var(--mono);font-weight:700;font-size:.95rem;color:var(--jr-soleil)}
[data-theme="light"] .jr-tool__glyph{color:#b88a00}
.jr-tool__name{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--jr-ink-3);white-space:nowrap}

/* tracé de secours sans WebGL */
.jr-route{display:none;position:absolute;right:6vw;top:18vh;width:min(46vw,560px);overflow:visible;opacity:0}
.jr-stage.no-gl .jr-route{display:block}
.jr-route__path{fill:none;stroke:var(--jr-soleil);stroke-width:2.5;stroke-linecap:round}

@media (max-width:760px) and (orientation:portrait),(max-width:760px) and (min-height:500px){
  /* stack : 5 colonnes (4 lignes), noms sur deux lignes si besoin */
  .jr-stack{grid-template-columns:repeat(5,minmax(0,1fr));gap:.75rem .2rem}
  .jr-tool{gap:.35rem}
  .jr-tool__ring{width:46px;height:46px}
  .jr-tool__logo{width:23px;height:23px}
  .jr-tool__name{font-size:.47rem;letter-spacing:.03em;white-space:normal;text-align:center;line-height:1.15;max-width:100%}
  /* certifications : carte compacte, liste sur deux colonnes, titre plus petit */
  .jr-scene[data-scene="certs"] .jr-h{font-size:1.55rem}
  .jr-scene[data-scene="certs"] .jr-p{margin-bottom:.7rem}
  .jr-cert-stage{height:min(56vh,470px)}
  .jr-cert{grid-template-columns:1fr;align-content:start;gap:.55rem;padding:.8rem .9rem 1rem}
  .jr-cert__art{height:clamp(96px,19vh,176px)}
  .jr-cert__covers{grid-template-columns:1fr 1fr;gap:.3rem .8rem}
  .jr-cert__name{margin:.6rem 0 .6rem}
  .jr-cert__pair{gap:0 .9rem}
  .jr-cert__pair .jr-cert__name{font-size:.95rem;margin:.5rem 0 .45rem}
  .jr-cert__pair .jr-cert__covers{grid-template-columns:1fr}
  .jr-cert__covers li{font-size:.74rem}
  .jr-cert__logo{width:46px;height:46px;border-radius:12px}
  .jr-cert-rail{margin-top:1rem}
  .jr-cert-rail span b{width:24px;height:24px;border-radius:7px}
  .jr-cert-rail::before{left:12px;right:12px;top:12px}
  .jr-cert-rail__cursor{width:34px;height:34px;top:-5px;border-radius:10px}
  .jr-route{right:auto;left:5vw;top:8vh;width:90vw}
  .jr-pin>span{font-size:.66rem}
  .jr-poi__in>span{font-size:.58rem}
  .jr-bdx__art{height:58%}
  .jr-scene.jr-scene--top{align-content:start;padding-top:4.2rem}
  .jr-degree{gap:.7rem;padding:.6rem .8rem}
  .jr-uni{padding:5px 8px;border-radius:8px}
  .jr-uni img{height:26px}
  .jr-uni--solo img{height:26px}
  .jr-scene{align-content:end;align-content:safe end;padding:1.4rem 1.4rem 6.3rem}
  .jr-scene--right .jr-scene__col{justify-self:start}
  .jr-scene--center{align-content:center}
  .jr-scene--center.jr-scene--low{align-content:end}
  .jr-portrait__frame i{width:16px;height:16px}
  .jr-cos{gap:.55rem}
  .jr-co{gap:.35rem}
  .jr-co__tile{width:36px;height:36px;border-radius:9px}
  .jr-co__tile.is-wide{width:94px;padding:6px 10px}
  .jr-co__txt b{font-size:.62rem;letter-spacing:.03em}
  .jr-co__txt small{font-size:.58rem}
  .jr-cos__link{margin-top:18px}
  .jr-client__tile{width:64px;height:34px;padding:5px 7px;border-radius:8px}
  .jr-client__word{font-size:.58rem}
  .jr-client figcaption{font-size:.56rem}
  /* place comptée sur mobile : les logos clients remplacent la liste d'outils (reprise dans la stack) */
  .jr-clients~.jr-tools{display:none}
  .jr-bar,.jr-bars__scale{grid-template-columns:7.5rem 1fr 3.9rem;gap:0 .6rem;font-size:.85rem}
  .jr-bar__n,.jr-bar__cl{display:none}
  .jr-bar__v{font-size:.7rem}
  /* noms longs sur deux lignes, échelle réduite à 0 / 2 / 4 ans (la piste est étroite) */
  .jr-bar__k{white-space:normal;line-height:1.15;font-size:.8rem}
  .jr-bars__ticks i:nth-child(2),.jr-bars__ticks i:nth-child(4){display:none}
  /* barre du bas : chapitres sur toute la largeur (cibles de 24 px au moins), pause et « Passer » au-dessus */
  .jr-ui{flex-wrap:wrap;row-gap:.3rem;padding:.5rem 1rem calc(.55rem + env(safe-area-inset-bottom,0px))}
  .jr-progress{order:2;flex:1 1 100%;gap:0}
  .jr-seg{min-width:24px;height:28px}
  .jr-seg::before,.jr-seg b{left:2px;right:2px}
  .jr-pp,.jr-snd{width:30px;height:30px}
  .jr-skip{margin-left:auto;padding:.38rem .8rem}
}
/* téléphones étroits : la carte du diplôme (logo, MIAGE, Bac +5) passe sur deux lignes au lieu de déborder */
@media (max-width:380px){
  .jr-degree{flex-wrap:wrap;row-gap:.45rem;gap:.45rem .6rem}
  .jr-degree .jr-uni img{height:24px}
}
/* petits téléphones (320 x 568) : la scène 2021 perd son paragraphe pour garder l'année et le titre */
@media (max-width:760px) and (max-height:620px) and (orientation:portrait){
  .jr-scene[data-scene="ai"] .jr-p{display:none}
  .jr-scene[data-scene="cloud"] .jr-year{font-size:2.8rem}
  .jr-scene[data-scene="cloud"] .jr-h{font-size:1.6rem;margin-bottom:.6rem}
  .jr-scene[data-scene="cloud"] .jr-cos{margin-bottom:.7rem}
  .jr-scene[data-scene="cloud"] .jr-p{display:none}
  .jr-scene[data-scene="cloud"] .jr-clients{gap:.6rem 0}
}
/* téléphone couché : mise en page côte à côte, tailles calées sur la hauteur */
@media (orientation:landscape) and (max-height:499px){
  .jr-cert__pair{gap:0 .9rem}
  .jr-cert__pair .jr-cert__name{font-size:.92rem;margin:.3rem 0 .35rem}
  .jr-cert__pair .jr-cert__covers li{font-size:.66rem;padding-left:.9rem}
  .jr-scene{align-content:center;align-content:safe center;padding:.9rem clamp(1.2rem,4vw,2.4rem) 3.9rem}
  .jr-scene--low{align-content:end;align-content:safe end;padding-bottom:3.9rem}
  .jr-scene.jr-scene--top{align-content:start;padding-top:.9rem}
  /* colonne étroite seulement à côté du portrait ; les scènes centrées gardent toute la largeur */
  .jr-scene:not(.jr-scene--center) .jr-scene__col{max-width:min(440px,48vw)}
  .jr-scene--center .jr-scene__col{max-width:min(760px,92vw)}
  .jr-year{font-size:min(11vw,17vh)}
  .jr-h{font-size:min(4.4vw,8.5vh);margin-bottom:.5rem}
  .jr-p{font-size:.84rem;line-height:1.45;margin-bottom:.6rem}
  .jr-domain{font-size:.78rem;padding:.2rem .65rem .2rem .55rem}
  .jr-ui{padding:.45rem clamp(1rem,4vw,2.4rem) calc(.5rem + env(safe-area-inset-bottom,0px))}
  .jr-pp,.jr-snd{width:30px;height:30px}
  .jr-skip{padding:.35rem .8rem}
  /* clients : tuiles compactes, la liste d'outils (reprise dans la stack) laisse la place */
  .jr-clients~.jr-tools{display:none}
  .jr-clients{gap:.5rem 0;margin-bottom:.4rem}
  .jr-client__tile{width:64px;height:34px;padding:5px 7px;border-radius:8px}
  .jr-client figcaption{font-size:.56rem;padding-top:.4rem}
  .jr-cos{margin-bottom:.6rem}
  .jr-co__tile{width:36px;height:36px;border-radius:9px}
  .jr-co__tile.is-wide{width:94px;padding:6px 10px}
  /* 2021 : année, titre, deux logos et sept clients doivent tenir au-dessus de la barre */
  .jr-scene[data-scene="cloud"] .jr-p{display:none}
  .jr-scene[data-scene="cloud"] .jr-year{font-size:11vh}
  .jr-scene[data-scene="cloud"] .jr-h{font-size:7vh}
  .jr-scene[data-scene="cloud"] .jr-cos{margin-bottom:.45rem}
  .jr-scene[data-scene="cloud"] .jr-client__tile{width:56px;height:30px;padding:4px 6px}
  .jr-scene[data-scene="cloud"] .jr-client{padding:0 .2rem;gap:.3rem}
  .jr-scene[data-scene="cloud"] .jr-clients{gap:.35rem 0}
  /* stack : deux rangées de neuf */
  .jr-scene[data-scene="stack"] .jr-h,.jr-scene[data-scene="certs"] .jr-h,.jr-scene[data-scene="domains"] .jr-h{font-size:min(3.4vw,7vh)}
  .jr-stack{grid-template-columns:repeat(9,minmax(0,1fr));gap:.5rem .3rem;margin-top:.3rem}
  .jr-tool{gap:.3rem}
  .jr-tool__ring{width:46px;height:46px}
  .jr-tool__logo{width:23px;height:23px}
  .jr-tool__name{font-size:.5rem;letter-spacing:.04em}
  /* domaines et certifications */
  .jr-bars{gap:.3rem}
  .jr-bar{font-size:.8rem}
  .jr-bar__cl b{width:34px;height:18px;padding:2px 4px}
  .jr-note{margin-top:.5rem}
  .jr-scene[data-scene="certs"] .jr-p{display:none}
  .jr-cert-stage{height:max(170px,52vh)}
  .jr-cert{padding:.5rem 1rem}
  .jr-cert__art svg{max-height:100%}
  .jr-cert__logo{width:44px;height:44px;border-radius:12px}
  .jr-cert__name{font-size:1.15rem;margin:.4rem 0 .5rem}
  .jr-cert__covers{gap:.25rem}
  .jr-cert__covers li{font-size:.74rem}
  .jr-cert-rail{margin-top:.6rem}
  .jr-cert-rail span b{width:24px;height:24px;border-radius:7px}
  .jr-cert-rail::before{left:12px;right:12px;top:12px}
  .jr-cert-rail__cursor{width:34px;height:34px;top:-5px;border-radius:10px}
  /* finale : l'année et le paragraphe laissent la place aux mots écrits en particules */
  .jr-scene[data-scene="ai"] .jr-p,.jr-scene[data-scene="ai"] .jr-year{display:none}
  .jr-degree{padding:.5rem .8rem;gap:.7rem}
  /* Bordeaux : la carte du diplôme dit déjà l'essentiel, le paragraphe laisse la façade dégagée */
  .jr-scene[data-scene="bordeaux"] .jr-p{display:none}
}
/* tablette en portrait : scènes empilées (visuel en haut, texte en bas) comme sur mobile, avec les tailles desktop */
@media(min-width:761px) and (max-width:1100px) and (orientation:portrait){
  .jr-scene{align-content:end;padding:2.5rem 3rem 7rem}
  .jr-scene--right .jr-scene__col{justify-self:start}
  .jr-scene--center{align-content:center}
  .jr-scene--center.jr-scene--low{align-content:end}
  .jr-scene.jr-scene--top{align-content:start;padding-top:6rem}
  .jr-bdx__art{height:58%}
  .jr-cert-stage{height:min(54vh,640px)}
  .jr-cert{grid-template-columns:1fr;align-content:start;gap:.9rem}
  .jr-cert__art{height:clamp(160px,22vh,280px)}
  .jr-route{right:auto;left:8vw;top:10vh;width:84vw}
}
@media(prefers-reduced-motion:reduce){
  .reel-float-card,.reel-float-card::before,.reel-orb__rays,.reel-orb__ring,.jr-grain,.jr-pin>i::after,.jr-since__dot::after{animation:none}
}