:root{--sortie: cubic-bezier(.16,1,.3,1); --rideau: cubic-bezier(.76,0,.24,1);}
.chargeur{position:fixed; inset:0; z-index:1000; background:var(--encre); color:var(--papier); display:grid; grid-template-rows:auto 1fr auto; padding:clamp(18px,3vw,36px); transition:transform 1s var(--rideau);}
html:not(.js) .chargeur,.sans-chargeur .chargeur{display:none}
.chargeur.fini{transform:translateY(-100%)}
.chargeur.fini > *{opacity:0; transition:opacity .3s}
.chargeur__haut{display:flex; justify-content:space-between; font-family:var(--mono); font-size:var(--mini); letter-spacing:var(--caps); text-transform:uppercase; color:var(--gris)}
.chargeur__phrase{align-self:center; justify-self:center; margin:0; font-family:var(--serif); font-style:italic; font-size:clamp(2.4rem,7vw,6rem); color:var(--rouge); letter-spacing:-.02em; line-height:1}
.chargeur__phrase span{display:inline-block; opacity:0; transform:translateY(40%) rotate(4deg); animation:mot-entre .8s var(--sortie) forwards}
.chargeur__phrase span:nth-child(2){animation-delay:.18s}
.chargeur__phrase span:nth-child(3){animation-delay:.36s}
@keyframes mot-entre{to{ opacity:1; transform:none }}
.chargeur__bas{display:flex; justify-content:space-between; align-items:flex-end; gap:20px}
.chargeur__nombre{font-family:var(--display); font-weight:800; line-height:.8; font-size:clamp(5rem,20vw,17rem); letter-spacing:-.06em; font-variant-numeric:tabular-nums}
.chargeur__lib{font-family:var(--mono); font-size:var(--mini); letter-spacing:.1em; text-transform:uppercase; color:var(--gris); padding-bottom:1em; text-align:right}
.chargeur__barre{position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--trait)}
.chargeur__barre span{display:block; height:100%; background:var(--rouge); transform:scaleX(var(--p,0)); transform-origin:left}
.js .entete{transform:translateY(-110%); transition:transform .9s var(--sortie) .15s, background-color var(--court), border-color var(--court)}
.pret .entete{transform:none}
.js .grille-fond span{transform:scaleY(0); transform-origin:top; transition:transform 1.6s var(--sortie)}
.js .grille-fond span:nth-child(2){transition-delay:.08s}
.js .grille-fond span:nth-child(3){transition-delay:.16s}
.js .grille-fond span:nth-child(4){transition-delay:.24s}
.pret .grille-fond span{transform:none}
.l{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.02em}
.l__i{display:inline-block}
.js .heros h1 .l__i{transform:translateY(108%); transition:transform 1.1s var(--sortie) calc(.1s + var(--i) * 55ms)}
.pret .heros h1 .l__i{transform:none}
.js .incruste{clip-path:inset(0 50% 0 50%); transition:clip-path 1.1s var(--rideau) .55s}
.js .incruste img{scale:1.5; transition:scale 1.8s var(--sortie) .55s, transform 1.2s var(--courbe)}
.pret .incruste{clip-path:inset(0 0 0 0)}
.pret .incruste img{scale:1}
.js .heros .apparait{opacity:0; transform:translateY(22px); transition:opacity 1s var(--sortie), transform 1s var(--sortie)}
.js .heros .definition{transition-delay:.75s}
.js .heros .heros__dire{transition-delay:.9s}
.pret .heros .apparait{opacity:1; transform:none}
.pret .heros .rature path{animation:trace .6s var(--courbe) 1.6s forwards}
.pret .heros .rature path + path{animation-delay:1.85s}
.js .heros .correction{opacity:0; transform:translateY(30%) rotate(-3deg); transition:opacity .7s var(--sortie) 2.1s, transform .7s var(--sortie) 2.1s}
.pret .heros .correction{opacity:1; transform:none}
.js .tampon{opacity:0; scale:2.6}
.pret .tampon{animation:frappe .38s cubic-bezier(.55,0,1,.45) 2.4s forwards}
@keyframes frappe{0%{ opacity:0; scale:2.6 } 60%{ opacity:1 } 100%{ opacity:.95; scale:1 }}
.tampon__anneau{transform-box:view-box; transform-origin:60px 60px; animation:tourne 22s linear infinite}
@keyframes tourne{to{ transform:rotate(360deg) }}
.m{display:inline-block; overflow:hidden; vertical-align:bottom; padding:0 .06em .1em 0; margin:0 -.06em -.1em 0}
.m__i{display:inline-block}
.js .titre .m__i,.js .final h2 .m__i{transform:translateY(112%) rotate(5deg); transform-origin:left bottom; transition:transform 1s var(--sortie) calc(var(--i) * 70ms)}
.js .titre.vu .m__i,.js .final h2.vu .m__i{transform:none}
.js .titre.apparait,.js .final h2.apparait{opacity:1; transform:none}
.brouille{font-variant-numeric:tabular-nums}
.etat{position:sticky}
.etat::after{content:""; position:absolute; left:0; bottom:-1px; height:2px; width:100%; background:var(--rouge); transform:scaleX(var(--lu,0)); transform-origin:left}
.js .travail figcaption{opacity:0; transform:translateY(12px); transition:opacity .8s var(--sortie) .5s, transform .8s var(--sortie) .5s}
.js .travail.vu figcaption{opacity:1; transform:none}
.defile{overflow:hidden; border-top:1px solid var(--trait); border-bottom:1px solid var(--trait); padding:clamp(18px,2.4vw,30px) 0; user-select:none}
.defile__piste{display:flex; width:max-content; animation:defile 26s linear infinite}
.defile:hover .defile__piste{animation-play-state:paused}
.defile__piste span{flex-shrink:0; padding-right:.4em; white-space:nowrap; font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:clamp(2.6rem,8vw,7rem); line-height:1; letter-spacing:-.04em; color:transparent; -webkit-text-stroke:1px var(--gris)}
.defile__piste i{font-style:normal; color:var(--rouge); -webkit-text-stroke:0}
.defile__piste b{color:var(--rouge); -webkit-text-stroke:0; font-weight:800}
@keyframes defile{to{ transform:translateX(-50%) }}
.ticket{position:relative}
.ticket::before{content:""; position:absolute; z-index:2; left:-4%; right:-4%; top:-8px; height:14px; border-radius:7px; background:#1f1f1d; box-shadow:inset 0 3px 6px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.06)}
.js .ticket__ombre{clip-path:inset(0 -40px 100% -40px); transition:clip-path 2.2s cubic-bezier(.5,0,.2,1) .2s}
.js .prix.vu .ticket__ombre{clip-path:inset(0 -40px -60px -40px)}
.js .ticket__papier{transform:translateY(-40%); transition:transform 2.2s cubic-bezier(.5,0,.2,1) .2s}
.js .prix.vu .ticket__papier{transform:none}
.js .prix__suite{opacity:0; transform:translateY(24px); transition:opacity 1s var(--sortie) 1.4s, transform 1s var(--sortie) 1.4s}
.js .prix.vu .prix__suite{opacity:1; transform:none}
.etapes--trois .etape{position:relative; border-top-color:transparent}
.etapes--trois .etape::before{content:""; position:absolute; left:0; right:0; top:-1px; height:1px; background:var(--trait-f); transform:scaleX(0); transform-origin:left; transition:transform 1.2s var(--rideau)}
.etapes--trois .etape.vu::before{transform:none}
.etapes--trois .etape:nth-child(2)::before{transition-delay:.15s}
.etapes--trois .etape:nth-child(3)::before{transition-delay:.3s}
.question__titre{transition:transform .4s var(--sortie), color .3s}
.question__bouton:hover .question__titre{transform:translateX(10px); color:var(--rouge)}
.question__signe{transition:transform .4s var(--sortie)}
.question__bouton:hover .question__signe{transform:rotate(90deg)}
.question[open] .question__reponse{animation:deplie .55s var(--sortie)}
@keyframes deplie{from{ opacity:0; transform:translateY(-10px) }}
.btn{position:relative; overflow:hidden; isolation:isolate}
.btn::before{content:""; position:absolute; inset:0; z-index:-1; background:var(--rouge); transform:translateY(101%); transition:transform .45s var(--sortie)}
.btn:hover::before{transform:none}
.btn:hover,.btn--plein:hover,.btn--fil:hover{color:var(--encre); border-color:var(--rouge)}
.btn--plein:hover{background:var(--papier)}
.btn--fil:hover{background:transparent}
.menu a{position:relative}
.menu a::after{content:""; position:absolute; left:0; right:0; bottom:-4px; height:1px; background:var(--rouge); transform:scaleX(0); transform-origin:right; transition:transform .4s var(--sortie)}
.menu a:hover::after{transform:scaleX(1); transform-origin:left}
.final{position:relative; isolation:isolate}
.final::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(600px circle at var(--sx,70%) var(--sy,40%), rgba(224,69,43,.16), transparent 60%); transition:opacity .6s; opacity:.9}
@media (prefers-reduced-motion:reduce){.chargeur{display:none}
.js .entete,.js .grille-fond span,.js .heros h1 .l__i,.js .heros .apparait,.js .heros .correction,.js .titre .m__i,.js .final h2 .m__i,.js .travail figcaption,.js .ticket__papier,.js .prix__suite{transform:none; opacity:1}
.js .incruste,.js .ticket__ombre{clip-path:none}
.js .incruste img{scale:1}
.js .tampon{opacity:.95; scale:1}
.defile__piste,.tampon__anneau{animation:none}
.etapes--trois .etape::before{transform:none}
.rature path{stroke-dashoffset:0}}
.ticket__papier{position:relative}
@keyframes imprime-ligne{from{ opacity:0; transform:translateY(-5px) } to{ opacity:1; transform:none }}
@keyframes tape{from{ clip-path:inset(0 100% 0 0) } to{ clip-path:inset(0 0 0 0) }}
.js .ticket__entete,.js .ticket__lignes li,.js .ticket__total,.js .ticket__merci,.js .ticket__code{opacity:0}
.js .prix.vu .ticket__entete{animation:imprime-ligne .5s var(--sortie) .5s forwards}
.js .prix.vu .ticket__lignes li{animation:imprime-ligne .3s var(--sortie) forwards}
.js .prix.vu .ticket__lignes li span{clip-path:inset(0 100% 0 0); animation:tape .45s steps(22) forwards}
.js .prix.vu .ticket__lignes li b{opacity:0; animation:imprime-ligne .25s var(--sortie) forwards}
.js .prix.vu .ticket__lignes li:nth-child(1),.js .prix.vu .ticket__lignes li:nth-child(1) span{animation-delay:.8s}
.js .prix.vu .ticket__lignes li:nth-child(2),.js .prix.vu .ticket__lignes li:nth-child(2) span{animation-delay:1.05s}
.js .prix.vu .ticket__lignes li:nth-child(3),.js .prix.vu .ticket__lignes li:nth-child(3) span{animation-delay:1.3s}
.js .prix.vu .ticket__lignes li:nth-child(4),.js .prix.vu .ticket__lignes li:nth-child(4) span{animation-delay:1.55s}
.js .prix.vu .ticket__lignes li:nth-child(5),.js .prix.vu .ticket__lignes li:nth-child(5) span{animation-delay:1.8s}
.js .prix.vu .ticket__lignes li:nth-child(1) b{animation-delay:1.2s}
.js .prix.vu .ticket__lignes li:nth-child(2) b{animation-delay:1.45s}
.js .prix.vu .ticket__lignes li:nth-child(3) b{animation-delay:1.7s}
.js .prix.vu .ticket__lignes li:nth-child(4) b{animation-delay:1.95s}
.js .prix.vu .ticket__lignes li:nth-child(5) b{animation-delay:2.2s}
.js .prix.vu .ticket__total{animation:imprime-ligne .4s var(--sortie) 2.3s forwards}
.js .prix.vu .ticket__merci{animation:imprime-ligne .4s var(--sortie) 2.6s forwards}
.js .prix.vu .ticket__code{animation:imprime-ligne .4s var(--sortie) 2.8s forwards}
.ticket__tampon{position:absolute; right:18px; bottom:clamp(76px,9vw,92px); z-index:1; padding:6px 12px; border:3px double var(--rouge-p); border-radius:4px; font-family:var(--mono); font-weight:700; font-size:.95rem; line-height:1.1; letter-spacing:.14em; text-transform:uppercase; text-align:center; color:var(--rouge-p); transform:rotate(-14deg); mix-blend-mode:multiply; opacity:.88; pointer-events:none;}
.js .ticket__tampon{opacity:0; scale:2.4}
.js .tamponne .ticket__tampon{animation:frappe-ticket .3s cubic-bezier(.55,0,1,.45) forwards}
@keyframes frappe-ticket{0%{ opacity:0; scale:2.4 } 70%{ opacity:.95 } 100%{ opacity:.88; scale:1 }}
.js .tamponne:not(.imprime) .ticket__papier{animation:encaisse .22s ease-out .28s}
@keyframes encaisse{50%{ translate:0 3px; scale:.99 }}
.js .imprime .ticket__papier{transform-origin:50% 0; animation:balance 5.5s ease-in-out infinite}
@keyframes balance{0%,100%{ rotate:-.9deg } 50%{ rotate:.9deg }}
.ticket__code{position:relative}
.imprime .ticket__code::after{content:""; position:absolute; top:-6px; bottom:-6px; left:0; width:100%; background:linear-gradient(90deg, var(--rouge) 0 2px, transparent 2px); filter:drop-shadow(0 0 4px var(--rouge)); animation:laser 1.8s ease-in-out infinite alternate;}
@keyframes laser{to{ transform:translateX(100%) }}
.ticket__ombre{perspective:900px}
.js .prix.vu .ticket.penche .ticket__papier{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .25s ease-out}
.js .prix.vu .ticket .ticket__papier{transition:transform .6s var(--sortie)}
.ticket__papier::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:0; background:linear-gradient(105deg, transparent calc(var(--gx,50%) - 22%), rgba(255,255,255,.55) var(--gx,50%), transparent calc(var(--gx,50%) + 22%)); transition:opacity .3s;}
.ticket.penche .ticket__papier::after{opacity:1}
@media (prefers-reduced-motion:reduce){.js .ticket__entete,.js .ticket__lignes li,.js .ticket__lignes li b,.js .ticket__total,.js .ticket__merci,.js .ticket__code{opacity:1; animation:none}
.js .ticket__lignes li span{clip-path:none; animation:none}
.js .ticket__tampon{opacity:.88; scale:1; animation:none}
.js .imprime .ticket__papier{animation:none}
.imprime .ticket__code::after{display:none}}
@media (hover:none){.btn:hover::before{transform:translateY(101%)}
.btn:active::before{transform:none; transition-duration:.12s}
.btn:hover{color:var(--papier); border-color:var(--papier)}
.btn--plein:hover{background:var(--papier); color:var(--encre)}
.btn:active,.btn--plein:active{color:var(--encre); border-color:var(--rouge)}
.btn:hover svg{transform:none}
.question__bouton:hover .question__titre{transform:none; color:inherit}
.question__bouton:hover .question__signe{transform:none}
.defile:hover .defile__piste{animation-play-state:running}}
.ticket__tampon{position:relative; right:auto; bottom:auto; display:table; margin:6px auto 4px; transform:rotate(-7deg)}
.ticket__merci{margin-top:16px}
.js .scene .scene__ecran{clip-path:inset(100% 0 0 0); transition:clip-path 1.1s var(--sortie)}
.js .scene.vu .scene__ecran{clip-path:inset(0 0 0 0)}
.js .scene .scene__ecran img{scale:1.15; transition:scale 1.8s var(--sortie)}
.js .scene.vu .scene__ecran img{scale:1}
.js .scene .scene__tel img{opacity:0; translate:0 60px; transition:opacity .8s var(--sortie) .45s, translate 1.1s var(--sortie) .45s}
.js .scene.vu .scene__tel img{opacity:1; translate:0 0}
.js .scene .scene__tel{opacity:0; transition:opacity .6s var(--sortie) .4s}
.js .scene.vu .scene__tel{opacity:1}
.js .scene .scene__legende{opacity:0; transform:translateY(12px); transition:opacity .7s var(--sortie) .6s, transform .7s var(--sortie) .6s}
.js .scene.vu .scene__legende{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){.js .scene .scene__ecran{clip-path:none}
.js .scene .scene__ecran img,.js .scene .scene__tel img{scale:1; translate:none; opacity:1}
.js .scene .scene__tel,.js .scene .scene__legende{opacity:1; transform:none}}
.heros h1{translate:0 calc(var(--fuite, 0) * 90px); opacity:calc(1 - var(--fuite, 0) * .65)}
.heros .heros__dire{translate:0 calc(var(--fuite, 0) * 40px)}
.heros .tampon{rotate:calc(var(--fuite, 0) * 90deg)}
.section .titre{translate:calc(var(--glisse, 0) * -40px) 0}
.prix .ticket{translate:0 calc(var(--monte, 0) * -50px)}
.etapes--trois{position:relative}
.etapes--trois::before{content:""; position:absolute; left:0; top:0; height:2px; width:100%; background:var(--rouge); transform-origin:left; transform:scaleX(var(--avance, 0)); z-index:1}
@media (max-width:760px){.etapes--trois::before{width:2px; height:100%; transform-origin:top; transform:scaleY(var(--avance, 0))}
.etapes--trois .etape{padding-left:20px}}
@media (prefers-reduced-motion: reduce){.heros h1,.heros .heros__dire,.section .titre,.prix .ticket{translate:none; opacity:1}
.heros .tampon{rotate:none}
.etapes--trois::before{transform:none}}
.ticket__tampon{letter-spacing:.08em; white-space:nowrap}
@media (max-width:760px){.ticket__tampon{font-size:.8rem; letter-spacing:.05em}}
html,body{overflow-x:clip}
.descente{position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; contain:strict}
.descente__grille{position:absolute; inset:0; max-width:var(--large); margin:0 auto; padding:0 var(--gouttiere); overflow:hidden; background-origin:content-box; background-clip:content-box; background-image:linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px); background-size:25% 100%; -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%); mask-image:linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%);}
.descente__lignes{position:absolute; left:var(--gouttiere); right:var(--gouttiere); top:0; height:calc(100% + 160px); background-image:linear-gradient(180deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size:100% 160px; will-change:transform}
.descente__regle{position:absolute; top:0; bottom:0; right:0; width:30px; overflow:hidden; -webkit-mask-image:linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent); mask-image:linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent)}
.descente__traits{position:absolute; left:0; right:0; top:0; height:calc(100% + 80px); will-change:transform; background-image: linear-gradient(180deg, var(--gris-bas) 1px, transparent 1px), linear-gradient(180deg, rgba(255,255,255,.22) 1px, transparent 1px); background-size:24px 80px, 12px 16px; background-repeat:repeat-y; background-position:right top, right top}
.descente__repere{position:absolute; right:0; top:50%; width:46px; height:2px; background:var(--rouge); box-shadow:0 0 18px rgba(224,69,43,.7)}
.descente__geant{position:absolute; right:clamp(8px,3vw,48px); bottom:-.12em; display:flex; align-items:flex-start; gap:.04em; font-family:var(--display); font-weight:800; line-height:1; font-size:clamp(9rem,31vw,30rem); letter-spacing:-.06em; color:transparent; -webkit-text-stroke:1.5px rgba(242,239,233,.13); font-variant-numeric:tabular-nums; user-select:none;}
.descente__fleche{font-size:.42em; margin-top:.18em; -webkit-text-stroke:2px var(--rouge); opacity:.55; animation:fleche-descend 1.8s var(--courbe) infinite}
@keyframes fleche-descend{0%,100%{ translate:0 0 } 50%{ translate:0 .18em }}
.descente__graduations{position:absolute; top:0; right:34px; width:70px; height:100%; overflow:hidden; -webkit-mask-image:linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent); mask-image:linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent)}
.descente__graduations div{position:absolute; left:0; right:0; top:0; will-change:transform}
.descente__graduations span{position:absolute; right:0; height:0; display:flex; align-items:center; font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--gris-bas); white-space:nowrap}
@media (max-width:760px){.descente__grille{background-size:50% 100%}
.descente__geant{font-size:44vw; -webkit-text-stroke-width:1px; right:6px}
.descente__graduations{display:none}
.descente__regle{width:14px}
.descente__traits{background-size:12px 80px, 6px 16px}
.descente__repere{width:18px}}
@media (prefers-reduced-motion: reduce){.descente__fleche{animation:none}}
.tampon{display:block; aspect-ratio:1}
.tampon > svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.tampon__anneau{transform-box:border-box; transform-origin:50% 50%; will-change:transform}
@supports (animation-timeline: scroll()){.heros h1{animation:v8-fuite-h1 linear both; animation-timeline:scroll(root); animation-range:0 100vh}
.heros .heros__dire{animation:v8-fuite-dire linear both; animation-timeline:scroll(root); animation-range:0 100vh}
.tampon__fond{animation:v8-fuite-tampon linear both; animation-timeline:scroll(root); animation-range:0 100vh}
.tampon__anneau{animation:tourne 22s linear infinite, v8-fuite-tampon linear both; animation-timeline:auto, scroll(root); animation-range:normal, 0 100vh}
@keyframes v8-fuite-h1{to{ translate:0 90px }}
@keyframes v8-fuite-dire{to{ translate:0 40px }}
@keyframes v8-fuite-tampon{to{ rotate:90deg }}
.section .titre{animation:v8-glisse linear both; animation-timeline:view(); animation-range:entry 0% cover 45%}
@keyframes v8-glisse{from{ translate:-40px 0 } to{ translate:0 0 }}
.prix .ticket{animation:v8-monte linear both; animation-timeline:view(); animation-range:cover 0% cover 100%}
@keyframes v8-monte{from{ translate:0 35px } to{ translate:0 -35px }}
.etapes--trois{view-timeline:--etapes block}
.etapes--trois::before{animation:v8-avance linear both; animation-timeline:--etapes; animation-range:entry 20% cover 70%}
@keyframes v8-avance{from{ transform:scaleX(0) } to{ transform:scaleX(1) }}
@media (max-width:760px){@keyframes v8-avance{from{ transform:scaleY(0) } to{ transform:scaleY(1) }}}
.etat::after{animation:v8-lu linear both; animation-timeline:scroll(root)}
@keyframes v8-lu{from{ transform:scaleX(0) } to{ transform:scaleX(1) }}
.descente__lignes{height:calc(100% + var(--course, 0px) + 160px)}
.descente__traits{height:calc(100% + var(--course, 0px) + 80px)}
.descente__lignes,.descente__traits,.descente__graduations > div{animation:v8-descend linear both; animation-timeline:scroll(root)}
@keyframes v8-descend{from{ transform:translate3d(0,0,0) } to{ transform:translate3d(0,calc(var(--course, 0px) * -1),0) }}}
@media (prefers-reduced-motion: reduce){.heros h1,.heros .heros__dire,.tampon__fond,.section .titre,.prix .ticket,.descente__lignes,.descente__traits,.descente__graduations > div{animation:none !important}
.tampon__anneau{animation:none !important}}
.defile.hors-champ .defile__piste,.prix.hors-champ .ticket__papier,.prix.hors-champ .ticket__code::after{animation-play-state:paused}
.heros.hors-champ .tampon__anneau{animation-play-state:paused, running}