/* Virgule Experience Layer */
:root{--vgl-motion-fast:160ms;--vgl-motion:280ms;--vgl-motion-slow:620ms;--vgl-ease:cubic-bezier(.22,1,.36,1)}
html.vgl-experience{scroll-behavior:smooth}
body.vgl-experience{overflow-x:clip}
body.vgl-experience::before{content:'';position:fixed;inset:0 auto auto 0;z-index:10000;width:calc(var(--vgl-scroll,0)*1%);height:2px;background:var(--craie-doree,#d9a857);pointer-events:none}
body.vgl-experience::after{content:'';position:fixed;inset:0;z-index:9998;background:var(--ardoise,#101d19);pointer-events:none;opacity:1;animation:vgl-page-in 520ms cubic-bezier(.22,1,.36,1) forwards}
@keyframes vgl-page-in{from{opacity:1}to{opacity:0;visibility:hidden}}
.vgl-reveal{opacity:0;transform:translate3d(0,20px,0);transition:opacity var(--vgl-motion-slow) var(--vgl-ease),transform var(--vgl-motion-slow) var(--vgl-ease);transition-delay:var(--vgl-delay,0ms)}
.vgl-reveal.vgl-visible{opacity:1;transform:none}
.vgl-stagger>:nth-child(2){--vgl-delay:45ms}.vgl-stagger>:nth-child(3){--vgl-delay:90ms}.vgl-stagger>:nth-child(4){--vgl-delay:135ms}.vgl-stagger>:nth-child(5){--vgl-delay:180ms}.vgl-stagger>:nth-child(6){--vgl-delay:225ms}.vgl-stagger>:nth-child(n+7){--vgl-delay:270ms}
.vgl-interactive{-webkit-tap-highlight-color:transparent;transition:transform var(--vgl-motion-fast) var(--vgl-ease),border-color var(--vgl-motion-fast) ease,background-color var(--vgl-motion-fast) ease,color var(--vgl-motion-fast) ease}
.vgl-interactive:hover{transform:translateY(-2px)}.vgl-interactive:active{transform:scale(.985)}.vgl-interactive:focus-visible{outline:2px solid var(--craie-doree,#d9a857);outline-offset:3px}
.vgl-card-motion{position:relative;transform:perspective(900px) rotateX(var(--vgl-rx,0deg)) rotateY(var(--vgl-ry,0deg)) translate3d(0,var(--vgl-y,0),0);transition:transform var(--vgl-motion) var(--vgl-ease),border-color var(--vgl-motion-fast) ease,background-color var(--vgl-motion-fast) ease}.vgl-card-motion:hover{--vgl-y:-3px}.vgl-card-motion.vgl-pressed{--vgl-y:0;transform:scale(.992)}.vgl-card-motion.vgl-tap{animation:vgl-tap 240ms var(--vgl-ease)}
@keyframes vgl-tap{50%{transform:perspective(900px) scale(.985)}}
.vgl-card-motion::after{content:'';position:absolute;inset:0;border:1px solid transparent;border-radius:inherit;pointer-events:none;transition:border-color var(--vgl-motion-fast) ease,inset var(--vgl-motion) var(--vgl-ease)}.vgl-card-motion:hover::after{inset:-2px;border-color:var(--craie-doree-border,rgba(217,168,87,.28))}
.vgl-magnetic{transform:translate3d(var(--vgl-mx,0),var(--vgl-my,0),0);transition:transform 180ms var(--vgl-ease),background-color var(--vgl-motion-fast) ease,border-color var(--vgl-motion-fast) ease}.vgl-magnetic:hover{transform:translate3d(var(--vgl-mx,0),var(--vgl-my,-2px),0)}
.vgl-button-arrow{display:inline-flex;align-items:center;gap:8px}.vgl-button-arrow::after{content:'→';transition:transform var(--vgl-motion) var(--vgl-ease)}[dir=rtl] .vgl-button-arrow::after{content:'←'}.vgl-button-arrow:hover::after{transform:translateX(4px)}[dir=rtl] .vgl-button-arrow:hover::after{transform:translateX(-4px)}
.vgl-section-marker::before{content:'';display:block;width:0;height:1px;margin-block-end:14px;background:var(--craie-doree,#d9a857);transition:width 700ms var(--vgl-ease)}.vgl-section-marker.vgl-visible::before{width:42px}
.vgl-hero-live{overflow:clip}.vgl-hero-live::before{content:'';position:absolute;inset:0;background-image:inherit;background-position:center calc(50% + var(--vgl-hero-shift,0px));background-size:cover;z-index:-2;transform:scale(1.03);pointer-events:none}.vgl-hero-live{background-image:none!important}.vgl-hero-live .hero-tag,.vgl-hero-live .hero-kicker,.vgl-hero-live .bib-hero-kicker,.vgl-hero-live .parcours-kicker,.vgl-hero-live .exam-hero-eyebrow{animation:vgl-kicker-in 700ms var(--vgl-ease) 260ms both}.vgl-hero-live h1,.vgl-hero-live .page-title,.vgl-hero-live .bib-hero-title,.vgl-hero-live .parcours-title,.vgl-hero-live .exam-hero-title{animation:vgl-title-in 820ms var(--vgl-ease) 340ms both}.vgl-hero-live .hero-tagline,.vgl-hero-live .hero-sub,.vgl-hero-live .bib-hero-sub,.vgl-hero-live .parcours-sub,.vgl-hero-live .exam-hero-sub{animation:vgl-copy-in 700ms var(--vgl-ease) 470ms both}.vgl-hero-live .hero-actions,.vgl-hero-live .hero-cta,.vgl-hero-live .bib-hero-actions{animation:vgl-copy-in 700ms var(--vgl-ease) 560ms both}
@keyframes vgl-kicker-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes vgl-title-in{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}@keyframes vgl-copy-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.vgl-ripple{position:absolute;width:10px;height:10px;border:1px solid var(--craie-doree,#d9a857);border-radius:50%;pointer-events:none;transform:translate(-50%,-50%) scale(1);animation:vgl-ripple 520ms cubic-bezier(.22,1,.36,1) forwards}@keyframes vgl-ripple{to{opacity:0;transform:translate(-50%,-50%) scale(8)}}
.vgl-choice-pop{animation:vgl-choice 360ms var(--vgl-ease)}@keyframes vgl-choice{0%{transform:scale(1)}45%{transform:scale(.975)}100%{transform:scale(1)}}
.vgl-scene{animation:vgl-scene-ready 420ms var(--vgl-ease) both}@keyframes vgl-scene-ready{from{opacity:.45;transform:translateY(12px)}to{opacity:1;transform:none}}
.vgl-leaving{animation:vgl-leave 190ms ease both!important}@keyframes vgl-leave{to{opacity:0;transform:translateY(-5px)}}
@media(prefers-reduced-motion:reduce){html.vgl-experience{scroll-behavior:auto}body.vgl-experience::after{animation:none;opacity:0;visibility:hidden}.vgl-reveal,.vgl-interactive,.vgl-card-motion,.vgl-card-motion::after,.vgl-magnetic{transition:none!important;transform:none!important}.vgl-hero-live *,.vgl-hero-live::before,.vgl-choice-pop,.vgl-scene,.vgl-leaving{animation:none!important}.vgl-ripple{display:none}}
@media(max-width:767px){.vgl-card-motion:hover{--vgl-y:0}.vgl-hero-live::before{background-position:center}.vgl-interactive:hover{transform:none}}

/* Page-specific choreography — motion carries meaning, not decoration. */
.vgl-hero-live .hero-fond{transform:translate3d(var(--vgl-px,0),var(--vgl-py,0),0) scale(1.025);transition:transform 700ms var(--vgl-ease)}
.vgl-home-rail{position:fixed;z-index:9000;inset-inline-end:18px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px;padding:8px 6px;border:1px solid var(--card-border,rgba(255,255,255,.14));border-radius:var(--radius-pill);background:var(--ardoise,#101d19)}
.vgl-rail-dot{width:7px;height:7px;padding:0;border:1px solid var(--craie-pale,rgba(232,245,232,.45));border-radius:50%;background:transparent;cursor:pointer;transition:transform 220ms var(--vgl-ease),background-color 220ms ease,border-color 220ms ease}
.vgl-rail-dot.active{transform:scale(1.7);background:var(--craie-doree,#d9a857);border-color:var(--craie-doree,#d9a857)}
.bib-main.vgl-filter-flash{animation:vgl-filter-flash 360ms var(--vgl-ease)}
@keyframes vgl-filter-flash{0%{opacity:.55;transform:translateY(6px)}100%{opacity:1;transform:none}}
.filters-bar{position:relative}.vgl-filter-count{margin-inline-start:auto;margin-top:8px;color:var(--craie-pale-vive,rgba(232,245,232,.6));font-size:11px;letter-spacing:.04em}
.options-grid.vgl-answer-pulse{animation:vgl-answer-pulse 300ms var(--vgl-ease)}
@keyframes vgl-answer-pulse{0%{transform:scale(.995)}100%{transform:none}}
.vgl-fiche-progress{position:sticky;top:72px;z-index:20;height:2px;margin:0 0 18px;background:var(--card-border,rgba(255,255,255,.14));overflow:hidden}.vgl-fiche-progress span{display:block;height:100%;width:0;background:var(--craie-doree,#d9a857);transition:width 100ms linear}
.vgl-lesson-scene{scroll-margin-top:96px}
@media(max-width:767px){.vgl-home-rail{display:none}.vgl-filter-count{margin-inline-start:0}.vgl-hero-live .hero-fond{transform:none}.vgl-fiche-progress{top:64px}}
@media(prefers-reduced-motion:reduce){.vgl-hero-live .hero-fond{transform:none;transition:none}.vgl-home-rail,.vgl-rail-dot,.vgl-filter-count,.vgl-fiche-progress span{transition:none}.bib-main.vgl-filter-flash,.options-grid.vgl-answer-pulse{animation:none}}

/* Layer 2: the page rail is a compact control, never a full-width nav surface. */
.vgl-home-rail{inline-size:max-content;width:max-content;block-size:auto;height:auto;min-width:0;max-width:max-content;inset-inline-start:auto;justify-content:center;align-items:center;}




/* Layer 2 correction: keep the hero image on the real element; animate its position instead of hiding it behind a negative-z pseudo. */
.vgl-hero-live{background-image:url('/assets/hero/hero-fond.webp') !important;background-position:center calc(50% + var(--vgl-hero-shift,0px)) !important;background-size:cover !important;}
.vgl-hero-live::before{display:none;}
@media(max-width:767px){.vgl-hero-live{background-image:url('/assets/hero/hero-fond-m.webp') !important;background-position:center !important;}}

/* Capture-safe motion: content is always present; observation only choreographs arrival. */
.vgl-reveal{opacity:1;transform:none;transition:none}
.vgl-reveal.vgl-visible{animation:vgl-experience-reveal 620ms var(--vgl-ease) both}
@keyframes vgl-experience-reveal{from{opacity:0;transform:translate3d(0,20px,0)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.vgl-reveal.vgl-visible{animation:none!important;opacity:1;transform:none}}

/* Legacy entrance hooks are also capture-safe: never hide product content while waiting for an observer. */
.animate{opacity:1;transform:none;transition:none}
.animate.visible{animation:vgl-legacy-experience-reveal 500ms var(--vgl-ease) both}
@keyframes vgl-legacy-experience-reveal{from{opacity:0;transform:translate3d(0,24px,0)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.animate.visible{animation:none!important;opacity:1;transform:none}}