body{margin:0;background:#ffffff}
a{color:#006aff;text-decoration:none}a:hover{color:#0050c8}
.d{font-family:'Bricolage Grotesque',system-ui,sans-serif;letter-spacing:-0.02em}
.btn{display:inline-flex;align-items:center;gap:8px;transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,filter .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 28px -12px rgba(0,32,77,.55)}
.btn:active{transform:translateY(0) scale(.97);transition-duration:.08s}
.arr{display:inline-block;transition:transform .2s}.btn:hover .arr,.card:hover .arr{transform:translateX(5px)}
.nl{position:relative}.nl::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;border-radius:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s}.nl:hover::after{transform:scaleX(1)}
.dev{transition:translate .6s cubic-bezier(.2,.8,.2,1)}
.ph{transition:translate .35s cubic-bezier(.2,.8,.2,1),scale .35s cubic-bezier(.2,.8,.2,1),rotate .35s cubic-bezier(.2,.8,.2,1)}
.ph:hover{translate:0 -14px;scale:1.04}
.fan:hover .ph:first-child{rotate:-5deg}.fan:hover .ph:last-child{rotate:5deg}
.tab{transition:translate .45s cubic-bezier(.2,.8,.2,1),rotate .45s cubic-bezier(.2,.8,.2,1)}
.tabs:hover .tab1{translate:-10px -10px}.tabs:hover .tab2{translate:22px 14px;rotate:2deg}
.tr svg{transition:transform .35s cubic-bezier(.3,1.6,.5,1)}.tr:hover svg{transform:scale(1.25) rotate(-10deg)}
.card{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s}
.card:hover{transform:translateY(-6px);box-shadow:0 24px 40px -24px rgba(0,32,77,.35);border-color:#9ec2ff}
.ico{transition:transform .35s cubic-bezier(.3,1.6,.5,1)}.card:hover .ico{transform:rotate(-10deg) scale(1.12)}
.mini{transition:transform .35s cubic-bezier(.2,.8,.2,1)}.step:hover .mini{transform:translateY(-8px) rotate(-1.2deg)}
.step:hover .dot{animation:pulse .9s ease-out}
@keyframes pulse{from{box-shadow:0 0 0 0 rgba(0,106,255,.7)}to{box-shadow:0 0 0 20px rgba(0,106,255,0)}}
.buy{transition:filter .2s,transform .15s}.buy:hover{filter:brightness(1.12)}.buy:active{transform:scale(.96)}
.li{transition:transform .25s}.li:hover{transform:translateX(6px)}
.flot{transition:translate .6s cubic-bezier(.2,.8,.2,1),scale .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.flot:hover{scale:1.05;box-shadow:0 40px 60px -20px rgba(0,20,60,.6)}
.flot:hover .cadeau{animation:wiggle .6s ease-in-out}
@keyframes wiggle{0%,100%{transform:none}25%{transform:rotate(-14deg) scale(1.15)}75%{transform:rotate(14deg) scale(1.15)}}
a:focus-visible,button:focus-visible{outline:3px solid #ffb020;outline-offset:3px}
@media (prefers-reduced-motion: no-preference){
@keyframes up{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(90px)}to{opacity:1;transform:none}}
.in{animation:up .8s cubic-bezier(.2,.8,.2,1) both}
.in1{animation-delay:.05s}.in2{animation-delay:.15s}.in3{animation-delay:.3s}.in4{animation-delay:.42s}
@keyframes zoom{from{opacity:0;transform:scale(1.08)}to{opacity:1;transform:none}}
.zoom{animation:zoom 1.2s cubic-bezier(.2,.8,.2,1) both}
@keyframes tp{0%{opacity:0;transform:scale(.2)}70%{opacity:1;transform:scale(1.25)}100%{opacity:1;transform:none}}
.tp{animation:tp .45s cubic-bezier(.3,1.6,.5,1) both}
.tp1{animation-delay:1.25s}.tp2{animation-delay:1.33s}.tp3{animation-delay:1.41s}.tp4{animation-delay:1.49s}.tp5{animation-delay:1.57s}.tp6{animation-delay:1.65s}.tp7{animation-delay:1.73s}
.trace path{stroke-dasharray:24;animation:trace .5s ease-out 1.15s both}
@keyframes trace{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}
.badge{display:inline-block;animation:tp .5s cubic-bezier(.3,1.6,.5,1) 1.4s both}
.rise{animation:rise 1.1s cubic-bezier(.2,.8,.2,1) both}
.r1{animation-delay:.5s}.r2{animation-delay:.6s}.r3{animation-delay:.78s}.r4{animation-delay:.9s}
@supports (animation-timeline: view()){
.rv{animation:up linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
.ln{transform-origin:left;animation:grow linear both;animation-timeline:view();animation-range:entry 30% cover 45%}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.fill{animation:fill linear both;animation-timeline:view();animation-range:entry 40% cover 50%}
@keyframes fill{from{width:0}}
.bike{animation:bike linear both;animation-timeline:view();animation-range:entry 40% cover 50%}
@keyframes bike{from{left:0}}
.draw path{stroke-dasharray:24;animation:draw linear both;animation-timeline:view();animation-range:entry 50% cover 50%}
@keyframes draw{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}
.pop{animation:pop linear both;animation-timeline:view();animation-range:entry 60% cover 52%}
@keyframes pop{0%{opacity:0;transform:scale(.3) rotate(-25deg)}70%{opacity:1;transform:scale(1.15) rotate(4deg)}100%{opacity:1;transform:none}}
}
}


html{scroll-behavior:smooth}
.page{animation:pageIn .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes pageIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.charge{position:fixed;left:0;top:0;height:3px;width:100%;background:#006aff;transform-origin:left;z-index:100;animation:charge .9s cubic-bezier(.2,.8,.2,1) both;pointer-events:none}
@keyframes charge{0%{transform:scaleX(0);opacity:1}70%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px)}
.ici{color:#006aff!important}.ici::after{transform:scaleX(1)!important}
.burger{display:none;width:44px;height:44px;border-radius:12px;border:1px solid #d9dde8;background:#ffffff;align-items:center;justify-content:center;cursor:pointer;color:#151a2d}
.msheet{position:fixed;inset:0;z-index:60;background:#ffffff;display:flex;flex-direction:column;padding:18px 24px 32px;animation:sheet .35s cubic-bezier(.2,.8,.2,1) both;overflow-y:auto}
@keyframes sheet{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
.mi{animation:up .45s cubic-bezier(.2,.8,.2,1) both}
.mi1{animation-delay:.05s}.mi2{animation-delay:.1s}.mi3{animation-delay:.15s}.mi4{animation-delay:.2s}.mi5{animation-delay:.25s}.mi6{animation-delay:.3s}
.mcta{display:none}
.chip{transition:background-color .2s,color .2s,border-color .2s,transform .15s;cursor:pointer}
.chip:active{transform:scale(.95)}
.champ{transition:border-color .2s,box-shadow .2s}.champ:focus{outline:none;border-color:#006aff!important;box-shadow:0 0 0 4px rgba(0,106,255,.15)}
.qa summary{list-style:none;cursor:pointer}.qa summary::-webkit-details-marker{display:none}
.qa .plus{transition:transform .3s cubic-bezier(.2,.8,.2,1)}.qa[open] .plus{transform:rotate(45deg)}
.qa[open] .rep{animation:up .35s cubic-bezier(.2,.8,.2,1) both}
.qa{transition:background-color .2s}.qa:hover{background:#eef2fa!important}
.ong{transition:background-color .25s,color .25s;cursor:pointer}
.fondu{animation:fondu .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes fondu{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.toast{animation:toast .55s cubic-bezier(.3,1.4,.5,1) .35s both}
@keyframes toast{from{opacity:0;transform:translateY(-18px) scale(.94)}to{opacity:1;transform:none}}
.prog{animation:prog 5s linear both}
@keyframes prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.slist:hover .prog{animation-play-state:paused}
.etape{transition:background-color .3s,color .3s,border-color .3s,transform .2s;cursor:pointer;text-align:left;font:inherit}
.etape:hover{transform:translateX(4px)}
.spin{width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);border-top-color:#ffffff;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.coche circle{stroke-dasharray:160;animation:trait .7s ease-out both}.coche path{stroke-dasharray:40;animation:trait .45s ease-out .55s both}
@keyframes trait{from{stroke-dashoffset:160}to{stroke-dashoffset:0}}
.secoue{animation:secoue .4s}
@keyframes secoue{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.statut{transition:background-color .25s,color .25s,transform .2s;cursor:pointer}.statut:hover{transform:scale(1.06)}
.creneau{transition:background-color .2s,color .2s,border-color .2s,transform .15s;cursor:pointer}.creneau:hover{border-color:#006aff!important}
.toc a{transition:color .2s,padding-left .2s}.toc a:hover{color:#006aff!important;padding-left:6px}
.mobseul{display:none}
@media (max-width: 960px){
.navlinks,.navcta{display:none!important}
.burger{display:flex!important}
.toc{display:none!important}
}
@media (max-width: 700px){
.sec{padding-top:72px!important;padding-bottom:72px!important}
.mcta{display:flex!important}
.ctacard{padding:40px 24px!important;border-radius:28px!important}
.slist{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important}
.slist .sdesc,.slist .stitre,.slist .sprod{display:none!important}
.slist .etape{padding:12px 6px!important;justify-content:center!important;text-align:center}
.slist .etape:hover{transform:none}
.slist .stemps{font-size:18px!important}
.scene{min-height:700px!important}
.leg{position:static!important;justify-content:center;padding-top:14px}
.mobseul{display:block!important}
.ongrow{flex-wrap:nowrap!important;overflow-x:auto;justify-content:flex-start!important;scrollbar-width:none}
.pagepied{padding-bottom:110px!important}
}

.hwf-root{position:relative;width:100%;overflow:hidden;isolation:isolate;background:#0b1330;color:#e8f0ff;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column}
.hwf-root canvas{position:absolute;inset:0;width:100%;height:100%;display:block;max-width:none;z-index:0}
.hwf-top{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(0,1fr));gap:24px;padding:56px clamp(20px,3.4vw,44px) 0;font-size:12px;letter-spacing:.16em;text-transform:uppercase;line-height:1.9;max-width:1320px;width:100%;margin:0 auto;box-sizing:border-box}
.hwf-brand strong{display:block;font-weight:700}.hwf-brand span{opacity:.55}
.hwf-col h3{margin:0;font:inherit;opacity:.45;font-weight:600}
.hwf-col ul{list-style:none;margin:0;padding:0}
.hwf-col a,.hwf-up{color:inherit;text-decoration:none;opacity:.85;background:none;border:0;padding:0;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;background-image:linear-gradient(currentColor,currentColor);background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;transition:opacity .25s ease,background-size .35s cubic-bezier(.2,.7,.1,1)}
.hwf-col a:hover,.hwf-up:hover{opacity:1;background-size:100% 1px;color:#ffffff}
.hwf-rule{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin:32px auto 0;padding:14px clamp(20px,3.4vw,44px) 0;border-top:0.5px solid rgba(232,240,255,.18);font-size:11px;letter-spacing:.14em;text-transform:uppercase;max-width:1320px;width:calc(100% - 2*clamp(20px,3.4vw,44px));box-sizing:border-box;padding-left:0;padding-right:0}
.hwf-legal{opacity:.5;letter-spacing:.06em;text-transform:none;font-size:12px}
.hwf-place{position:relative;width:100%;aspect-ratio:625/190;min-height:120px}
.hwf-credits{position:absolute;left:0;right:0;bottom:8px;z-index:1;margin:0;text-align:center;font-size:10px;letter-spacing:.02em;color:rgba(232,240,255,.4);padding:0 16px}
.hwf-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (max-width: 900px){.hwf-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:22px}.hwf-brand{grid-column:1 / -1}}
@media (max-width: 700px){.hwf-top .hwf-col:nth-child(4){grid-column:1 / -1}.hwf-place{min-height:150px}.pagepied{padding-bottom:0!important}.hwf-root{padding-bottom:88px}}
@media (prefers-reduced-motion: reduce){.hwf-col a,.hwf-up{transition:none}}
.z20{zoom:0.2}
.z22{zoom:0.22}
.z24{zoom:0.24}
.z26{zoom:0.26}
.z28{zoom:0.28}
.z30{zoom:0.3}
.z32{zoom:0.32}
.z34{zoom:0.34}
.z36{zoom:0.36}
.z38{zoom:0.38}
.z40{zoom:0.4}
.z42{zoom:0.42}
.z44{zoom:0.44}
.z46{zoom:0.46}
.z48{zoom:0.48}
.z50{zoom:0.5}
.z52{zoom:0.52}
.z54{zoom:0.54}
.z56{zoom:0.56}
.z58{zoom:0.58}
.z60{zoom:0.6}
.z62{zoom:0.62}
.z64{zoom:0.64}
.z66{zoom:0.66}
.z68{zoom:0.68}
.z70{zoom:0.7}
.z72{zoom:0.72}
.z74{zoom:0.74}
.z76{zoom:0.76}
.z78{zoom:0.78}
.z80{zoom:0.8}
.z82{zoom:0.82}
.z84{zoom:0.84}
.z86{zoom:0.86}
.z88{zoom:0.88}
.z90{zoom:0.9}
.z92{zoom:0.92}
.z94{zoom:0.94}
.z96{zoom:0.96}
.z98{zoom:0.98}
.z100{zoom:1.0}
@media (max-width: 960px){.zt20{zoom:0.2!important}.zt22{zoom:0.22!important}.zt24{zoom:0.24!important}.zt26{zoom:0.26!important}.zt28{zoom:0.28!important}.zt30{zoom:0.3!important}.zt32{zoom:0.32!important}.zt34{zoom:0.34!important}.zt36{zoom:0.36!important}.zt38{zoom:0.38!important}.zt40{zoom:0.4!important}.zt42{zoom:0.42!important}.zt44{zoom:0.44!important}.zt46{zoom:0.46!important}.zt48{zoom:0.48!important}.zt50{zoom:0.5!important}.zt52{zoom:0.52!important}.zt54{zoom:0.54!important}.zt56{zoom:0.56!important}.zt58{zoom:0.58!important}.zt60{zoom:0.6!important}.zt62{zoom:0.62!important}.zt64{zoom:0.64!important}.zt66{zoom:0.66!important}.zt68{zoom:0.68!important}.zt70{zoom:0.7!important}.zt72{zoom:0.72!important}.zt74{zoom:0.74!important}.zt76{zoom:0.76!important}.zt78{zoom:0.78!important}.zt80{zoom:0.8!important}.zt82{zoom:0.82!important}.zt84{zoom:0.84!important}.zt86{zoom:0.86!important}.zt88{zoom:0.88!important}.zt90{zoom:0.9!important}.zt92{zoom:0.92!important}.zt94{zoom:0.94!important}.zt96{zoom:0.96!important}.zt98{zoom:0.98!important}.zt100{zoom:1.0!important}}
@media (max-width: 700px){.zm14{zoom:0.14!important}.zm16{zoom:0.16!important}.zm18{zoom:0.18!important}.zm20{zoom:0.2!important}.zm22{zoom:0.22!important}.zm24{zoom:0.24!important}.zm26{zoom:0.26!important}.zm28{zoom:0.28!important}.zm30{zoom:0.3!important}.zm32{zoom:0.32!important}.zm34{zoom:0.34!important}.zm36{zoom:0.36!important}.zm38{zoom:0.38!important}.zm40{zoom:0.4!important}.zm42{zoom:0.42!important}.zm44{zoom:0.44!important}.zm46{zoom:0.46!important}.zm48{zoom:0.48!important}.zm50{zoom:0.5!important}.zm52{zoom:0.52!important}.zm54{zoom:0.54!important}.zm56{zoom:0.56!important}.zm58{zoom:0.58!important}.zm60{zoom:0.6!important}.zm62{zoom:0.62!important}.zm64{zoom:0.64!important}.zm66{zoom:0.66!important}.zm68{zoom:0.68!important}.zm70{zoom:0.7!important}.zm72{zoom:0.72!important}.zm74{zoom:0.74!important}.zm76{zoom:0.76!important}.zm78{zoom:0.78!important}.zm80{zoom:0.8!important}.zm82{zoom:0.82!important}.zm84{zoom:0.84!important}.zm86{zoom:0.86!important}.zm88{zoom:0.88!important}.zm90{zoom:0.9!important}.zm92{zoom:0.92!important}.zm94{zoom:0.94!important}.zm96{zoom:0.96!important}.zm98{zoom:0.98!important}.zm100{zoom:1.0!important}}
/* Mise à l'échelle selon l'écran, validée le 16/10 (CSS_ECHELLE de la maquette, retouches.py) :
   sur grand écran la page entière grandit au lieu de rester une colonne étroite ;
   sur écran moyen, la composition du haut de page rétrécit avant de déborder. */
@media (min-width: 1680px){.page{zoom:1.12}}
@media (min-width: 1920px){.page{zoom:1.25}}
@media (min-width: 2300px){.page{zoom:1.45}}
@media (max-width: 1360px){.zl90{zoom:.9}}
@media (max-width: 1180px){.zl90{zoom:.8}}
sc-if{display:contents}sc-if[hidden]{display:none!important}
/* Une fois entrée, la page ne garde aucune transformation : sinon le menu plein écran du
   téléphone (position: fixed) se mesurerait sur la page entière, et non sur l'écran. */
.page{animation-fill-mode:backwards}
.hdr:has(sc-if:not([hidden]) > .msheet){backdrop-filter:none;-webkit-backdrop-filter:none}
html:has(sc-if:not([hidden]) > .msheet){overflow:hidden}
@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
}