/* FLUXYA — site V2 · marine #08263B / lime #C1FF2F / ivoire #F7F5EC */
@font-face{font-family:'Archivo Black';src:url(../fonts/archivo-black-latin.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Anton';src:url(../fonts/anton-latin.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Caveat';src:url(../fonts/caveat-700-latin.woff2) format('woff2');font-weight:700;font-display:swap}

:root{--n:#08263b;--l:#c1ff2f;--c:#f7f5ec;--m:#4d626e;--g:#abb8bb;--rose:#f3c9da;--err:#a32235;
 --display:'Archivo Black','Arial Black',Arial,sans-serif;--impact:'Anton',Impact,'Arial Narrow',sans-serif;--hand:'Caveat','Segoe Print',cursive}
*{box-sizing:border-box}
html{scroll-padding-top:85px}
body{margin:0;background:var(--c);color:var(--n);font:17px/1.5 Arial,Helvetica,sans-serif;overflow-x:hidden}
h1,h2,h3,p,ul{margin:0}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.045em;line-height:1.05}
h1{font-size:clamp(49px,5.9vw,84px)}
h2{font-size:clamp(29px,3.4vw,46px)}
h3{font-size:23px}
a{color:inherit}
button,input,textarea{font:inherit}
button,a{touch-action:manipulation}
button{cursor:pointer}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #315f9b;outline-offset:5px}
.dark a:focus-visible,.dark button:focus-visible{outline-color:var(--l)}
.wrap{max-width:1240px;margin:auto;padding:0 34px}
.eyebrow{font-size:11px;font-weight:bold;letter-spacing:.12em;text-transform:uppercase}
.under{position:relative;display:inline-block;z-index:0}
.under:after{content:'';position:absolute;background:var(--l);height:5px;bottom:-6px;left:0;width:100%;transform:rotate(-1deg) scaleX(var(--u,1));transform-origin:left center;z-index:-1}
.dark .under:after{background:var(--l)}
.skip{position:absolute;top:-100px;left:10px;z-index:100}
.skip:focus{top:10px;background:var(--l);padding:12px}

/* barre de progression */
.progress{position:fixed;top:0;left:0;height:4px;width:100%;background:var(--l);transform:scaleX(0);transform-origin:left;z-index:60;pointer-events:none}

/* boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:20px;background:var(--n);color:var(--c);padding:13px 20px;min-height:50px;border:1px solid var(--n);font-size:15px;font-weight:bold;text-decoration:none;box-shadow:7px 7px 0 var(--l);transition:transform .18s,box-shadow .18s}
.btn:hover{transform:translate(2px,2px);box-shadow:4px 4px 0 var(--l)}
.btn.lime{background:var(--l);color:var(--n);box-shadow:none;border-color:var(--l)}
.btn.lime:hover{background:#d3ff75;transform:none}
.btn.ghost{background:transparent;color:var(--n);box-shadow:none;border-color:var(--n)}
.btn.ghost:hover{background:var(--n);color:var(--c);transform:none}
.dark .btn.ghost{color:var(--c);border-color:var(--c)}
.dark .btn.ghost:hover{background:var(--c);color:var(--n)}
.btn[disabled]{opacity:.6;cursor:wait}

/* papier déchiré */
.stamp{display:inline-block;background:var(--l);font-family:var(--hand);font-weight:700;font-size:26px;line-height:1.05;padding:13px 21px;transform:rotate(-7deg);clip-path:polygon(0 3%,6% 0,13% 3%,22% 0,30% 2%,40% 0,48% 3%,57% 1%,68% 3%,80% 0,89% 3%,100% 0,98% 20%,100% 40%,98% 62%,100% 80%,99% 100%,85% 97%,70% 100%,56% 98%,44% 100%,30% 97%,13% 100%,0 97%,2% 75%,0 58%,2% 36%)}

/* en-tête */
.header{background:var(--c);position:sticky;top:0;z-index:50;border-bottom:1px solid #08263b11;transition:box-shadow .25s}
.header.scrolled{box-shadow:0 6px 24px #08263b14}
.nav{display:flex;align-items:center;gap:42px;min-height:77px}
.brand{display:block;width:164px}
.brand img{width:100%;display:block}
.navlinks{display:flex;gap:24px;font-size:13px}
.navlinks a{text-decoration:none;padding:10px 0;white-space:nowrap}
.navlinks a:hover{text-decoration:underline;text-underline-offset:6px}
.go{margin-left:auto;width:43px;height:43px;border-radius:50%;background:var(--l);display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:27px;font-weight:bold;transition:transform .2s}
.go:hover{transform:rotate(45deg)}
.menu{display:none;background:none;border:1px solid var(--n);min-height:44px;padding:9px 12px;color:var(--n)}

/* hero */
.hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;padding-top:30px;padding-bottom:50px}
.hero-copy{position:relative;z-index:1}
.hero .eyebrow{margin-bottom:24px}
.hero h1{margin-bottom:27px}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hero h1 .line>span{display:block}
.hero p.lead{font-size:19px;max-width:510px;margin-bottom:28px;color:var(--m)}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-art{position:relative;align-self:stretch;display:flex;align-items:center}
.hero-art{justify-content:center}
.video-wrap{position:relative;width:calc(100% - 12px);max-width:640px}
.hero-video{display:block;width:100%;height:auto;aspect-ratio:1/1;background:var(--c);border:2px solid var(--n);box-shadow:12px 12px 0 var(--l);will-change:transform}
.hero-video img{display:block;width:100%;height:auto}
.video-toggle{position:absolute;left:14px;bottom:14px;width:44px;height:44px;border-radius:50%;border:2px solid var(--n);background:var(--c);color:var(--n);display:flex;align-items:center;justify-content:center;padding:0;opacity:.85;transition:opacity .2s,transform .2s}
.video-toggle:hover,.video-toggle:focus-visible{opacity:1;transform:scale(1.06)}
.video-toggle .ic-pause{width:14px;height:16px;border-left:5px solid currentColor;border-right:5px solid currentColor}
.video-toggle[aria-pressed="true"] .ic-pause{border:0;width:0;height:0;border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent currentColor;margin-left:4px}
.hero-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:34px}
.hero-chips div{border:1px solid var(--g);padding:9px 14px;font-size:12px;text-transform:uppercase;letter-spacing:.07em;font-weight:bold;color:var(--m)}
.hero-chips b{display:block;font:30px/1 var(--impact);letter-spacing:.01em;color:var(--n);text-transform:none}

/* hero vidéo en bandeau */
.hv-band{background:var(--c);border-bottom:2px solid var(--n)}
.hv-frame{position:relative;width:min(100%,calc((100svh - 77px - 74px) * 16 / 9));aspect-ratio:16/9;margin:0 auto}
.hv{display:block;width:100%;height:100%;object-fit:cover;background:var(--c)}
.hv-progress{position:absolute;left:0;right:0;bottom:0;height:5px;background:#08263b22}
.hv-progress span{display:block;height:100%;width:100%;background:var(--l);transform:scaleX(0);transform-origin:left}
.hv-frame .video-toggle{left:20px;bottom:22px}
.hero-intro{grid-template-columns:1.05fr .95fr;gap:48px;align-items:end;padding-top:56px;padding-bottom:56px}
.hero.hero-intro h1{font-size:clamp(40px,4.6vw,68px);margin-bottom:0}
.hero-side .lead{margin-bottom:24px}
.hero-side .hero-chips{margin-top:26px}

/* bandeau défilant */
.ticker{background:var(--n);color:var(--c);overflow:hidden;white-space:nowrap;padding:15px 0;border-block:1px solid var(--n)}
.ticker-track{display:inline-flex;gap:0;will-change:transform}
.ticker span{font:24px/1 var(--impact);text-transform:uppercase;letter-spacing:.04em;padding:0 22px;display:inline-flex;align-items:center;gap:44px}
.ticker span:after{content:'';width:14px;height:14px;background:var(--l);transform:rotate(45deg);display:inline-block}

/* sections */
.section{padding:70px 0 65px}
.section .intro{margin:18px 0 26px;color:var(--m);max-width:790px}
.section-head{max-width:800px}
.section-head .eyebrow{margin-bottom:14px;color:var(--m)}
.dark .section-head .eyebrow,.dark .intro{color:#d1dce0}
.dark{background:var(--n);color:var(--c)}

.service-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:30px}
.service{border:1px solid var(--g);padding:23px;display:grid;grid-template-columns:1fr 138px;gap:16px;align-items:center;min-height:195px;background:var(--c);transition:background .25s,transform .25s}
.service:hover{background:#fffefa;transform:translateY(-3px)}
.service>img{width:100%;max-height:150px}
.service h3{font-size:22px;letter-spacing:-.03em}
.service-heading{display:flex;gap:12px;align-items:start;margin-bottom:16px}
.service p{font-size:15px;line-height:1.4;color:var(--m)}
.service:last-child{grid-column:1/-1;grid-template-columns:1fr 220px;min-height:155px}
.service:last-child>img{max-height:115px}
.num{display:inline-flex;width:40px;height:40px;border-radius:50%;background:var(--l);color:var(--n);align-items:center;justify-content:center;font:16px/1 var(--display);flex:none}

/* offres & tarifs */
.offers{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:34px}
.offers .offer{grid-column:span 2}
.offers .offer:nth-child(4),.offers .offer:nth-child(5){grid-column:span 3}
.offer{color:var(--n);border:1px solid var(--g);background:#fffefa;padding:22px;display:flex;flex-direction:column;gap:14px}
.offer .tag{font-size:11px;font-weight:bold;letter-spacing:.12em;color:var(--m)}
.offer h3{font-size:22px}
.offer .pitch{font-size:14px;color:var(--m);line-height:1.4}
.offer .price{border-block:1px solid var(--g);padding:12px 0;margin-block:2px}
.offer .price small{display:block;font-size:11px;color:var(--m);letter-spacing:.05em;text-transform:uppercase}
.offer .price b{font:36px/1.1 var(--impact);letter-spacing:.01em}
.offer .price em{font-style:normal;font-size:12px;color:var(--m);display:block}
.offer ul{list-style:none;padding:0;display:grid;gap:8px;font-size:14px;flex:1}
.offer li{display:grid;grid-template-columns:20px 1fr;gap:8px}
.offer li:before{content:'✓';background:var(--l);width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:bold}
.offer .btn{box-shadow:5px 5px 0 var(--l);padding:11px 14px;font-size:14px;justify-content:space-between}
.offer.hot{background:#e6ffc2;border-color:var(--n)}

/* cas concrets */
.case{border:1px solid var(--g);display:grid;grid-template-columns:1fr 1fr 1fr;gap:32px;padding:25px;margin-top:12px;align-items:center}
.case.alt{background:#e6ffc2}
.case-head{display:flex;gap:17px;align-items:center}
.case-head>img{width:63px}
.case h3{font-size:21px}
.case p{font-size:14px;color:var(--m);margin-top:8px}
.case small{display:inline-block;background:var(--rose);padding:3px 8px;font:15px var(--impact);letter-spacing:.03em;margin-bottom:5px;text-transform:uppercase}
.case .after small{background:var(--l)}
.case .before,.case .after{border-left:1px solid var(--g);padding-left:22px}
.note{font-size:11px;color:var(--m);margin-top:12px}

/* méthode */
.method-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:34px;position:relative}
.method{border:1px solid #8097a4;padding:22px;display:grid;grid-template-columns:48px 1fr;gap:12px}
.method h3{font-size:22px;margin:6px 0 14px}
.method p{font-size:15px;color:#d1dce0;max-width:440px}

/* résultats */
.results-sec{padding:70px 0}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px}
.stat{border:1px solid var(--g);background:#fffefa;padding:22px;display:grid;gap:8px;justify-items:start}
.stat .viz{width:100%;max-width:150px;height:auto;display:block;margin-bottom:6px}
.stat .big{font:70px/1 var(--impact);letter-spacing:.01em}
.stat h3{font-size:18px;letter-spacing:-.02em}
.stat p{font-size:14px;color:var(--m)}
.results{display:grid;grid-template-columns:1fr 1.1fr 160px;gap:32px;align-items:center;padding-top:60px;padding-bottom:50px}
.results h2{font-size:34px;margin-bottom:20px}
.results p{font-size:16px;color:var(--m)}
.checks{list-style:none;padding:0;margin:0}
.checks li{border:1px solid var(--g);font-weight:bold;font-size:14px;padding:9px 12px;margin-bottom:7px;display:flex;align-items:center;gap:13px}
.checks li:before{content:'✓';background:var(--l);display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex:none}
.results .stamp{font:30px/1.2 var(--impact);padding:26px 22px;text-transform:uppercase}

/* témoignages */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:34px}
.testi{border:1px solid var(--g);background:#fffefa;padding:22px;display:flex;flex-direction:column;gap:16px}
.testi:nth-child(2){background:#e6ffc2}
.testi .stars{letter-spacing:3px;font-size:16px}
.testi p{font-size:15px;flex:1}
.who{display:flex;gap:12px;align-items:center}
.avatar{width:42px;height:42px;border-radius:50%;background:var(--n);color:var(--l);display:flex;align-items:center;justify-content:center;font:14px var(--display);flex:none}
.who b{display:block;font-size:14px}
.who span{font-size:12px;color:var(--m)}
.testi-sum{display:flex;align-items:center;gap:16px;border:1px solid var(--n);background:var(--l);padding:18px 22px}
.testi-sum b{font:48px/1 var(--impact)}
.testi-sum span{font-weight:bold;font-size:14px}
.testi-sum .btn{margin-left:auto;background:var(--n);box-shadow:none}

/* à propos */
.about{display:grid;grid-template-columns:1.08fr .9fr .48fr;gap:35px;align-items:center;padding-top:35px;padding-bottom:10px}
.about h2{margin-bottom:22px}
.about p{font-size:16px;color:var(--m);margin:13px 0}
.about .tags{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 24px}
.about .tags span{border:1px solid var(--n);padding:6px 11px;font-size:12px;font-weight:bold}
.portrait{align-self:end;width:100%}
.portrait img{display:block;width:100%;height:auto;image-rendering:auto}
.about .stamp{background:#eeeadf}
.approach{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:24px 0 20px}
.approach div{border-top:3px solid var(--n);padding-top:12px;font-weight:bold;font-size:15px}
.approach div:before{content:'';display:block;width:12px;height:12px;background:var(--l);border:2px solid var(--n);margin-bottom:10px}

.care{background:var(--l);padding:26px 0}
.care .wrap{display:grid;grid-template-columns:270px 1fr;gap:35px;align-items:center}
.care h2{font-size:31px}
.care p{font-size:15px;border-left:1px solid var(--n);padding-left:30px}

/* faq */
.faq{margin-top:25px}
.faq details{border:1px solid var(--g);margin-top:7px;background:var(--c)}
.faq details[open]{background:#ddff9a}
.faq summary{padding:14px 20px;font-weight:bold;cursor:pointer;list-style:none;font-size:16px;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:'+';font-size:25px;line-height:20px}
.faq details[open] summary:after{content:'−'}
.faq details p{font-size:15px;margin:0 20px 20px;max-width:850px}

/* CTA */
.cta{padding:60px 0}
.cta .wrap{display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:30px}
.cta h2{font-size:42px;max-width:680px}
.cta p{font-size:16px;color:#d1dce0;margin:23px 0}
.cta .sub{font-size:13px;letter-spacing:.04em;margin:0 0 24px}
.cta-art{position:relative}
.cta-art img{display:block;width:100%;max-height:300px;object-fit:contain;will-change:transform}
.rays{position:absolute;left:8%;top:6%;width:30%;pointer-events:none}

/* contact */
.contact{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;padding:70px 0}
.contact h2{font-size:37px;margin:15px 0 24px}
.contact p{font-size:15px;color:var(--m)}
.perks{display:grid;gap:12px;margin-top:28px}
.perk{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:center;border:1px solid var(--g);padding:12px 14px;background:#fffefa}
.perk .ic{width:44px;height:44px;background:var(--l);display:flex;align-items:center;justify-content:center;font-size:20px}
.perk b{display:block;font-size:15px}
.perk span{font-size:13px;color:var(--m)}
label{display:block;font-size:13px;font-weight:bold;margin-bottom:6px}
input,textarea{border:1px solid var(--g);background:#fffefa;width:100%;padding:12px;border-radius:0;color:var(--n);font-size:16px;min-height:47px}
textarea{min-height:120px;resize:vertical}
.field{margin-bottom:17px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.error{display:none;font-size:12px!important;color:var(--err)!important;margin-top:5px}
.invalid{border:2px solid var(--err)}
.invalid+.error{display:block}
form .note{margin:8px 0 20px;font-size:12px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{display:none;margin-top:18px;padding:14px 16px;font-size:15px;border:2px solid var(--n)}
.form-status.ok{display:block;background:var(--l)}
.form-status.ko{display:block;background:#fbe3e6;border-color:var(--err);color:#5e0f1b}
.form-status a{font-weight:bold}

/* pied de page */
footer{border-top:1px solid var(--g);padding:26px 0 30px}
.footer{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.footer .brand{width:137px}
.footer p,.footer a{font-size:12px;color:var(--m)}
.footer-links{display:flex;gap:20px;margin-left:auto;flex-wrap:wrap}
.footer-legal{width:100%;font-size:11px;color:var(--m);padding-top:6px}

/* pages légales */
.legal{max-width:860px;padding-top:56px;padding-bottom:70px}
.legal h1{font-size:clamp(34px,4.4vw,56px);margin-bottom:10px}
.legal .upd{font-size:13px;color:var(--m);margin-bottom:34px}
.legal h2{font-size:24px;margin:38px 0 12px}
.legal p,.legal li{font-size:16px;margin:10px 0}
.legal ul{padding-left:22px}
.legal dl{display:grid;grid-template-columns:200px 1fr;gap:0;border:1px solid var(--g);margin:16px 0;background:#fffefa}
.legal dt,.legal dd{margin:0;padding:11px 14px;border-bottom:1px solid #abb8bb55;font-size:15px}
.legal dt{font-weight:bold}
.legal a{text-underline-offset:3px}
.back{display:inline-block;margin-bottom:26px;font-size:14px;font-weight:bold}


/* ═══ Matière du kit : papier, déchirures, stickers ═══ */
body{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.03 0 0 0 0 0.15 0 0 0 0 0.23 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E")}
.dark,.care{position:relative;z-index:1}
.dark::before,.dark::after,.care::before,.care::after{content:'';position:absolute;left:0;right:0;height:26px;background:inherit;pointer-events:none}
.dark::before,.care::before{top:-25px;clip-path:polygon(0.00% 42%,2.08% 29%,4.17% 66%,6.25% 23%,8.33% 58%,10.42% 45%,12.50% 22%,14.58% 56%,16.67% 21%,18.75% 50%,20.83% 23%,22.92% 25%,25.00% 49%,27.08% 79%,29.17% 27%,31.25% 35%,33.33% 64%,35.42% 88%,37.50% 61%,39.58% 47%,41.67% 90%,43.75% 21%,45.83% 82%,47.92% 39%,50.00% 29%,52.08% 27%,54.17% 41%,56.25% 78%,58.33% 31%,60.42% 61%,62.50% 65%,64.58% 46%,66.67% 59%,68.75% 23%,70.83% 22%,72.92% 33%,75.00% 68%,77.08% 50%,79.17% 41%,81.25% 61%,83.33% 52%,85.42% 40%,87.50% 77%,89.58% 70%,91.67% 36%,93.75% 61%,95.83% 57%,97.92% 83%,100.00% 72%,100% 100%,0 100%)}
.dark::after,.care::after{bottom:-25px;clip-path:polygon(0 0,100% 0,100.00% 73%,97.92% 35%,95.83% 39%,93.75% 29%,91.67% 72%,89.58% 69%,87.50% 73%,85.42% 49%,83.33% 41%,81.25% 14%,79.17% 72%,77.08% 37%,75.00% 26%,72.92% 18%,70.83% 65%,68.75% 12%,66.67% 17%,64.58% 20%,62.50% 42%,60.42% 10%,58.33% 57%,56.25% 37%,54.17% 29%,52.08% 69%,50.00% 81%,47.92% 56%,45.83% 60%,43.75% 12%,41.67% 57%,39.58% 43%,37.50% 78%,35.42% 70%,33.33% 42%,31.25% 51%,29.17% 52%,27.08% 59%,25.00% 31%,22.92% 73%,20.83% 50%,18.75% 65%,16.67% 57%,14.58% 11%,12.50% 44%,10.42% 19%,8.33% 64%,6.25% 39%,4.17% 17%,2.08% 81%,0.00% 29%)}
.dark,.care{background-color:var(--n)}
.care{background-color:var(--l)}

/* stickers tramés : découpes de papier posées sur la page */
.sticker{filter:drop-shadow(0 9px 0 rgba(8,38,59,.16));transition:rotate .35s cubic-bezier(.22,1,.36,1),scale .35s cubic-bezier(.22,1,.36,1),filter .35s}
.service>.stk{width:170px;margin:-10px -6px -10px 0}
.service{grid-template-columns:1fr 170px}
.service:last-child{grid-template-columns:1fr 200px}
.service:last-child>.stk{width:200px}

.case-head>img.sticker{width:96px;height:auto;flex:none}
.case:hover .case-head>img.sticker{rotate:8deg;scale:1.08}

/* méthode : un visuel par étape, qui dépasse du cadre */
.method-grid .method{position:relative;padding-right:150px;overflow:visible}
.method-ic{position:absolute;right:14px;top:50%;width:128px;height:auto;translate:0 -50%}
img.method-ic[src$=".svg"]{filter:invert(1) hue-rotate(180deg);opacity:.95}

/* témoignages : notes scotchées */
.testi{position:relative}
.testi::before{content:'';position:absolute;left:50%;top:-22px;width:120px;height:44px;translate:-50% 0;rotate:-4deg;background:url(../visuels/scotch-bande.svg) center/cover no-repeat;opacity:.95}
.testi:nth-child(odd){rotate:-.6deg}
.testi:nth-child(even){rotate:.5deg}
.testi-grid{row-gap:34px;padding-top:12px}

/* appel à l'action : la main qui montre le bouton */
.cta-actions{align-items:center}
.cta-hand{width:150px;height:auto;margin:-30px -6px -30px -18px;filter:drop-shadow(0 8px 0 rgba(0,0,0,.25))}

/* contact : l'enveloppe */
.contact-title{position:relative}
.contact-sticker{position:absolute;width:130px;height:auto;right:-10px;top:-40px;rotate:10deg}

@media(max-width:950px){.method-grid .method{padding-right:110px}.method-ic{width:92px}.service,.service:last-child{grid-template-columns:1fr 120px}.service>.stk,.service:last-child>.stk{width:120px}}
@media(max-width:640px){.service,.service:last-child{grid-template-columns:1fr 96px}.service>.stk,.service:last-child>.stk{width:96px;margin:0}.case-head>img.sticker{width:72px}.method-grid .method{padding-right:92px}.method-ic{width:70px;right:8px}.cta-hand{display:none}.contact-sticker{width:90px;right:0;top:-24px}.dark::before,.dark::after,.care::before,.care::after{height:16px}.dark::before,.care::before{top:-15px}.dark::after,.care::after{bottom:-15px}}


/* ═══ Accroche : actions visibles dès le premier écran ═══ */
.hv-strip{background:var(--n);color:var(--c);border-top:2px solid var(--n)}
.hv-strip-in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px;padding-top:12px;padding-bottom:12px}
.hv-proof{font-size:15px;color:#d1dce0;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center}
.hv-proof b{color:var(--l)}
.hv-actions{display:flex;gap:14px;flex-wrap:wrap}
.hv-actions .btn{min-height:46px;padding:10px 20px;font-size:15px;box-shadow:5px 5px 0 var(--l)}
.hv-actions .btn.lime{box-shadow:5px 5px 0 var(--c)}
.hv-actions .btn.ghost{color:var(--c);border-color:var(--c);box-shadow:none}
.hv-actions .btn.ghost:hover{background:var(--c);color:var(--n)}

/* bouton du menu avec libellé */
.go{width:auto;height:46px;padding:0 20px;border-radius:999px;gap:10px;font-size:15px;border:2px solid var(--n);box-shadow:4px 4px 0 var(--n);transition:transform .18s,box-shadow .18s}
.go:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--n)}
.go span[aria-hidden]{font-size:22px;line-height:1}
.navlinks a.active{text-decoration:underline;text-decoration-color:var(--l);text-decoration-thickness:4px;text-underline-offset:8px}

/* retour visuel au clic */
.btn:active{transform:translate(4px,4px);box-shadow:2px 2px 0 var(--l)}
.btn.lime:active,.btn.ghost:active{transform:scale(.97)}

/* offre encaissement : sticker de la caisse */
.offer-sticker{position:absolute;right:10px;top:-34px;width:120px;height:auto;rotate:8deg}

/* offre site web : badge */
.offer{position:relative}
.badge14{position:absolute;top:-16px;right:14px;background:var(--n);color:var(--l);font:17px/1 var(--impact);letter-spacing:.05em;text-transform:uppercase;padding:8px 12px;rotate:3deg;border:2px solid var(--n)}

/* contact : stickers à la place des caractères */
.perk .ic{background:none;width:56px;height:56px}
.perk .ic img{width:56px;height:auto;filter:drop-shadow(0 5px 0 rgba(8,38,59,.15))}
.perk{grid-template-columns:56px 1fr}

/* barre d'action mobile */
.m-cta{display:none}
@media(max-width:860px){
.go{width:46px;padding:0;justify-content:center;box-shadow:3px 3px 0 var(--n)}
.go-label{display:none}
.hv-strip-in{flex-direction:column;align-items:stretch;gap:10px}
.hv-proof{display:none}
.hv-actions .btn.ghost{display:none}
.hv-actions .btn{width:100%}
.m-cta{display:block;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:70;transform:translateY(160%);transition:transform .3s cubic-bezier(.22,1,.36,1)}
.m-cta.show{transform:none}
.m-cta .btn{width:100%;box-shadow:5px 5px 0 var(--n);border:2px solid var(--n)}
}
@media(prefers-reduced-motion:reduce){.m-cta{transition:none}}


/* ═══ Solutions : le sticker lui-même s'anime (calques découpés dans l'image d'origine) ═══ */
.stk{position:relative;aspect-ratio:1/1;filter:drop-shadow(0 9px 0 rgba(8,38,59,.16));transition:filter .35s}
.stk .lay{position:absolute;inset:0;width:100%;height:100%;display:block}
.service.on .stk{filter:drop-shadow(0 14px 0 rgba(8,38,59,.14))}
/* 01 engrenage : il tourne */
.stk-gear .base{transition:rotate .9s cubic-bezier(.22,1,.36,1)}
.service.on .stk-gear .base{rotate:120deg}
/* 02 cerveau : l'éclair s'illumine, le cerveau pulse */
.service.on .stk-ai{animation:stk-pulse .9s ease-in-out}
.service.on .stk-ai .bolt{animation:stk-zap .9s steps(1) 1}
@keyframes stk-pulse{50%{scale:1.06}}
@keyframes stk-zap{0%,30%,60%{filter:brightness(1.35) drop-shadow(0 0 6px #c1ff2f)}15%,45%{filter:none}100%{filter:brightness(1.2) drop-shadow(0 0 4px #c1ff2f)}}
.service.on .stk-ai .bolt{filter:brightness(1.2) drop-shadow(0 0 4px #c1ff2f)}
/* 03 ordinateur : l'écran s'allume, les éclats jaillissent */
.service.on .stk-web .screen{animation:stk-screen .7s steps(1) both}
@keyframes stk-screen{0%{filter:brightness(.6)}20%{filter:brightness(1.3)}35%{filter:brightness(.8)}55%,100%{filter:brightness(1.25) drop-shadow(0 0 8px rgba(193,255,47,.8))}}
/* éclats (commun) : ils jaillissent l'un après l'autre */
.stk .ray{transform-origin:var(--o,50% 50%)}
.service.on .stk .ray{animation:stk-ray .6s cubic-bezier(.34,1.56,.64,1) both}
.service.on .stk .ray.r2{animation-delay:.08s}.service.on .stk .ray.r3{animation-delay:.16s}
@keyframes stk-ray{0%{scale:1;translate:0 0}40%{scale:.4;opacity:.3}100%{scale:1.12;translate:var(--dx,0) var(--dy,0)}}
.stk-web .ray,.stk-idea .ray{--o:72% 40%;--dx:4%;--dy:0%}
.stk-pay .ray{--o:42% 32%;--dx:-4%;--dy:-2%}
/* 04 caisse : le ticket sort de l'imprimante, les touches s'allument */
.stk-pay .ticket{transform-origin:65% 26.5%;transition:scale .7s cubic-bezier(.22,1,.36,1)}
.service.on .stk-pay .ticket{animation:stk-print 1s cubic-bezier(.22,1,.36,1) both}
@keyframes stk-print{0%{scale:1 1}30%{scale:1 .25}100%{scale:1 1.45}}
.service.on .stk-pay .key{animation:stk-key .5s steps(1) both}
.service.on .stk-pay .k2{animation-delay:.15s}.service.on .stk-pay .k3{animation-delay:.3s}.service.on .stk-pay .k4{animation-delay:.45s}
@keyframes stk-key{0%{filter:brightness(1.6) drop-shadow(0 0 6px #c1ff2f)}100%{filter:none}}
/* 05 ampoule : elle s'allume et oscille */
.service.on .stk-idea .base{animation:stk-swing .9s ease-in-out;filter:brightness(1.12) drop-shadow(0 0 14px rgba(193,255,47,.75))}
.stk-idea .base{transform-origin:40% 90%;transition:filter .3s}
@keyframes stk-swing{30%{rotate:-6deg}65%{rotate:4deg}}
.service{cursor:default}
@media(prefers-reduced-motion:reduce){.stk,.stk *{transition:none!important;animation:none!important}}

/* états initiaux des animations (uniquement si JS actif) */
.js .anim-hide{opacity:0}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}.js .anim-hide{opacity:1}}

@media(max-width:1080px){.offers{grid-template-columns:1fr 1fr}.offers .offer,.offers .offer:nth-child(4){grid-column:auto}.offers .offer:nth-child(5){grid-column:1/-1}.stat .big{font-size:56px}.testi-grid{grid-template-columns:1fr 1fr}}
@media(max-width:950px){
.wrap{padding-left:26px;padding-right:26px}
.hero h1{font-size:63px}.hero .eyebrow{font-size:9px}.hero p.lead{font-size:17px}
.service{grid-template-columns:1fr 94px;padding:19px;gap:10px}.service h3{font-size:20px}
.case{gap:16px;padding:20px}.case-head{display:block}.case-head>img{width:48px}.case .before,.case .after{padding-left:15px}
.results{grid-template-columns:1fr 1fr}.results>.stamp{display:none}
.about{grid-template-columns:1fr 1fr}.about>.stamp{display:none}
.approach{grid-template-columns:1fr 1fr}
.care .wrap{grid-template-columns:235px 1fr}.contact{gap:30px}}
@media(max-width:860px){
.nav{min-height:71px;gap:15px}.brand{width:143px}
.go{margin-left:auto;width:40px;height:40px}
.menu{display:block;font-size:12px}
.navlinks{display:none;position:absolute;top:71px;left:0;right:0;background:var(--c);padding:15px 20px;border-bottom:1px solid var(--g);flex-direction:column;gap:0}
.navlinks.open{display:flex}.navlinks a{min-height:44px}}
@media(max-width:700px){.hv-frame{width:min(100%,calc((100svh - 71px - 70px) * 9 / 16));aspect-ratio:9/16}.hv-frame .video-toggle{left:auto;right:14px;bottom:auto;top:14px}}
@media(max-width:640px){
.wrap{padding-left:20px;padding-right:20px}
.hero-intro{grid-template-columns:1fr;gap:20px;padding-top:34px;padding-bottom:34px}
.hero.hero-intro h1{font-size:40px;line-height:1.05}
.nav{min-height:71px;gap:15px}.brand{width:143px}
.go{margin-left:auto;width:40px;height:40px}
.menu{display:block;font-size:12px}
.navlinks{display:none;position:absolute;top:71px;left:0;right:0;background:var(--c);padding:15px 20px;border-bottom:1px solid var(--g);flex-direction:column;gap:0}
.navlinks.open{display:flex}.navlinks a{min-height:44px}
.hero{grid-template-columns:1fr;padding-top:28px;padding-bottom:25px}
.hero h1{font-size:51px;line-height:1.01}
.hero p.lead{font-size:17px;margin-bottom:24px}.hero .eyebrow{margin-bottom:18px}
.hero .btn{width:calc(100% - 7px)}
.hero-art{margin-top:24px}
.hero-video{max-width:none}
.hero-chips b{font-size:24px}
.ticker span{font-size:19px;gap:30px;padding:0 15px}
.section{padding:42px 0}.results-sec{padding:42px 0}
.section .intro{font-size:16px;margin:18px 0 24px}
h2{font-size:30px;line-height:1.08}
.service-grid{grid-template-columns:1fr;gap:10px;margin-top:25px}
.service,.service:last-child{grid-template-columns:1fr 82px;min-height:160px;padding:17px;gap:10px}
.service-heading{gap:9px}.service h3{font-size:19px;line-height:1.13}.service p{font-size:14px}
.num{width:32px;height:32px;font-size:13px}.service:last-child{grid-column:auto}
.offers{grid-template-columns:1fr}
.case{grid-template-columns:1fr;gap:16px;padding:19px}
.case-head{display:flex;gap:18px}.case-head>img{width:54px}
.case .before,.case .after{border-left:0;border-top:1px solid var(--g);padding-left:0;padding-top:14px}
.case p{font-size:15px}
.method-grid{grid-template-columns:1fr}.method{padding:18px;grid-template-columns:33px 1fr;gap:11px}.method h3{font-size:21px}
.stats{grid-template-columns:1fr}.stat .big{font-size:60px}
.results{grid-template-columns:1fr;gap:23px;padding:37px 20px 20px}.results h2{font-size:31px}
.testi-grid{grid-template-columns:1fr}
.testi-sum{flex-wrap:wrap}.testi-sum .btn{margin-left:0;width:100%}
.about{grid-template-columns:1fr;gap:7px;padding-top:25px}.about h2{font-size:34px}
.about .portrait{max-width:370px;justify-self:center}
.approach{grid-template-columns:1fr 1fr}
.care .wrap{grid-template-columns:1fr;gap:18px}.care h2{font-size:31px}.care p{border:0;padding:0}
.faq summary{font-size:15px;padding:15px 13px}.faq details p{font-size:14px;margin:0 13px 18px}
.cta{padding:42px 0}.cta .wrap{grid-template-columns:1fr;gap:5px}.cta h2{font-size:33px}.cta p{font-size:15px}
.cta-art img{max-height:220px;margin-top:20px}.cta .btn{width:100%}
.contact{grid-template-columns:1fr;gap:25px;padding:42px 0}.contact h2{font-size:32px}
.form-grid{grid-template-columns:1fr;gap:0}
.footer{gap:15px}.footer .brand{width:123px}.footer p{font-size:11px}
.footer-links{width:100%;margin:0}
.contact form .btn{width:calc(100% - 7px)}
.legal dl{grid-template-columns:1fr}.legal dt{border-bottom:0;padding-bottom:0}}
@media(max-width:360px){.hero h1{font-size:43px}.service-grid{grid-template-columns:minmax(0,1fr)}.service,.service:last-child{grid-template-columns:minmax(0,1fr) 60px}.service-heading{display:block}.service-heading .num{margin-bottom:10px}.service h3{font-size:18px}}

/* ═══ Accroche sous la vidéo, version téléphone : un bouton principal, un lien, une bande de chiffres ═══ */
@media(max-width:640px){
.hero-intro .hero-actions{display:grid;grid-template-columns:1fr;gap:6px}
.hero-intro .hero-actions .btn{width:calc(100% - 7px)}
.hero-intro .hero-actions .btn.ghost{width:100%;border:0;box-shadow:none;background:none;min-height:44px;justify-content:center;gap:10px;text-decoration:underline;text-decoration-color:var(--l);text-decoration-thickness:3px;text-underline-offset:6px}
.hero-intro .hero-actions .btn.ghost:hover,.hero-intro .hero-actions .btn.ghost:active{background:none;color:var(--n);transform:none}
.hero-intro .hero-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:18px;border:2px solid var(--n);background:#fffefa;box-shadow:5px 5px 0 var(--l)}
.hero-intro .hero-chips div{border:0;border-left:1px solid var(--g);padding:12px 6px 10px;text-align:center;font-size:10px;letter-spacing:.06em;line-height:1.25}
.hero-intro .hero-chips div:first-child{border-left:0}
.hero-intro .hero-chips b{font-size:30px;margin-bottom:4px}
}

/* ═══ Méthode : un parcours en 4 étapes sur une ligne lime (au lieu de 4 cartes) ═══ */
.steps{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:26px;position:relative}
.steps-line{position:absolute;left:12.5%;right:12.5%;top:174px;height:6px;background:#ffffff1f;pointer-events:none}
.steps-line span{display:block;height:100%;background:var(--l);transform-origin:left;transform:scaleX(var(--p,1))}
.step{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.step-ic{width:140px;height:140px;object-fit:contain;filter:drop-shadow(0 8px 0 rgba(0,0,0,.25));margin-bottom:6px}
.step-ic-svg{filter:invert(1) hue-rotate(180deg);width:120px;height:120px;margin:10px 0 16px}
.step-num{position:relative;z-index:1;width:56px;height:56px;border-radius:50%;background:var(--l);color:var(--n);border:4px solid var(--n);box-shadow:0 0 0 4px var(--l);display:flex;align-items:center;justify-content:center;font:20px var(--display);margin-bottom:18px}
.step h3{font-size:24px;margin-bottom:10px}
.step p{font-size:15px;line-height:1.45;color:#d1dce0;max-width:270px}
@media(max-width:860px){
.steps{grid-template-columns:1fr;gap:0;margin-top:30px}
.steps-line{left:27px;right:auto;top:28px;bottom:28px;width:5px;height:auto}
.steps-line span{transform-origin:top;transform:scaleY(var(--p,1))}
.step{display:grid;grid-template-columns:56px 1fr 74px;column-gap:16px;align-items:start;text-align:left;padding-bottom:26px}
.step:last-child{padding-bottom:0}
.step-num{grid-column:1;grid-row:1/3;margin:0;width:56px;height:56px;font-size:18px}
.step h3{grid-column:2;grid-row:1;font-size:21px;margin:12px 0 6px;align-self:center}
.step p{grid-column:2/4;grid-row:2;font-size:15px;max-width:none}
.step-ic,.step-ic-svg{grid-column:3;grid-row:1;width:74px;height:74px;margin:-4px 0 0;justify-self:end}
}

/* ═══ Cas concrets : un exemple à la fois, choisi par onglets visuels (au lieu de 3 grandes cartes) ═══ */
.cx{margin-top:26px;border:2px solid var(--n);background:#fffefa;box-shadow:8px 8px 0 var(--l)}
.cx-tabs{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:2px solid var(--n)}
.cx-tab{display:flex;align-items:center;gap:12px;padding:12px 16px;border:0;border-left:2px solid var(--n);background:var(--c);color:var(--n);font:17px/1.15 var(--display);letter-spacing:-.02em;text-align:left;transition:background .2s}
.cx-tab:first-child{border-left:0}
.cx-tab img{width:58px;height:58px;object-fit:contain;flex:none;filter:drop-shadow(0 5px 0 rgba(8,38,59,.15));transition:rotate .3s cubic-bezier(.34,1.56,.64,1),scale .3s}
.cx-tab:hover img{rotate:-8deg;scale:1.08}
.cx-tab.is-active{background:var(--l)}
.cx-tab.is-active img{rotate:6deg;scale:1.1}
.cx-panel{padding:22px 26px 24px;animation:tq-in .4s cubic-bezier(.22,1,.36,1)}
.cx-panel[hidden]{display:none}
@keyframes tq-in{from{opacity:0;translate:20px 0}}
.cx-ctx{font-size:15px;color:var(--m);margin-bottom:14px}
.cx-ba{display:grid;grid-template-columns:1fr 44px 1fr;gap:12px;align-items:stretch}
.cx-before,.cx-after{padding:14px 16px;border:2px solid var(--n)}
.cx-before{background:#fbe9f0}
.cx-before p{text-decoration:line-through;text-decoration-color:#a3223566;text-decoration-thickness:2px}
.cx-after{background:#e6ffc2;box-shadow:5px 5px 0 var(--n)}
.cx-ba small{display:inline-block;font:14px var(--impact);letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;margin-bottom:8px;background:var(--rose);border:2px solid var(--n)}
.cx-after small{background:var(--l)}
.cx-ba p{font-size:15px;line-height:1.45;color:var(--n)}
.cx-arrow{align-self:center;justify-self:center;width:44px;height:44px;border-radius:50%;background:var(--n);color:var(--l);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:bold}
@media(max-width:760px){
.cx-tabs{grid-template-columns:repeat(3,1fr)}
.cx-tab{flex-direction:column;align-items:center;text-align:center;gap:6px;padding:10px 6px;font-size:13px}
.cx-tab img{width:46px;height:46px}
.cx-panel{padding:16px 14px 18px}
.cx-ba{grid-template-columns:1fr;gap:8px}
.cx-arrow{rotate:90deg;width:36px;height:36px;font-size:18px}
.cx-before p{font-size:14px}
}
@media(prefers-reduced-motion:reduce){.cx-panel{animation:none}}

/* ═══ À propos : une fiche « polaroïd » scotchée + un texte resserré ═══ */
.me{display:grid;grid-template-columns:minmax(260px,400px) 1fr;gap:64px;align-items:center}
.me-photo{position:relative;margin:0;background:#fffefa;border:2px solid var(--n);padding:14px 14px 64px;rotate:-3deg;box-shadow:10px 10px 0 var(--l);max-width:400px;justify-self:center;width:100%}
.me-photo img{display:block;width:100%;height:auto;aspect-ratio:222/178;object-fit:cover;filter:contrast(1.05)}
.me-tape{position:absolute;left:50%;top:-20px;width:140px;height:46px;translate:-50% 0;rotate:3deg;background:url(../visuels/scotch-bande.svg) center/cover no-repeat}
.me-stamp{position:absolute;left:18px;bottom:12px;font:700 30px/1 var(--hand);color:var(--n)}
.me-text .eyebrow{color:var(--m);margin-bottom:12px}
.me-text h2{margin-bottom:22px}
.me-quote{margin:0 0 18px;padding-left:20px;border-left:6px solid var(--l);font:clamp(19px,1.8vw,23px)/1.4 var(--display);letter-spacing:-.02em;color:var(--n)}
.me-text p{font-size:16px;color:var(--m);margin-bottom:12px;max-width:640px}
.me-text p strong{color:var(--n)}
.me-tags{list-style:none;padding:0;margin:18px 0 26px;display:flex;flex-wrap:wrap;gap:8px}
.me-tags li{font-size:13px;font-weight:bold;padding:7px 12px;border:2px solid var(--n);background:#fffefa}
.me-tags li:nth-child(4n+1){background:var(--l)}
@media(max-width:860px){
.me{grid-template-columns:1fr;gap:34px}
.me-photo{max-width:320px;padding:10px 10px 54px}
.me-stamp{font-size:26px}
.me-tags{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.me-tags li{text-align:center;padding:8px 6px}
.me-text .btn{width:calc(100% - 7px)}
}

/* téléphone : pas de menu (on fait défiler la page) */
@media(max-width:860px){.navlinks,.navlinks.open,.menu{display:none!important}.go{margin-left:auto}}

/* ═══ Témoignages : un avis à la fois sur une note scotchée (au lieu de 6 cartes) ═══ */
.tq{max-width:860px;margin:34px auto 0}
.tq-pile{position:relative;isolation:isolate}
.tq-stage{position:relative;background:#fffefa;border:2px solid var(--n);padding:40px 46px 38px 118px;rotate:-1deg;box-shadow:10px 10px 0 var(--l);min-height:250px}
.tq-pile::before,.tq-pile::after{content:'';position:absolute;inset:0;border:2px solid var(--n);z-index:-1}
.tq-pile::before{background:#e6ffc2;rotate:2.5deg;translate:10px 6px}
.tq-pile::after{background:var(--rose);rotate:-2deg;translate:-8px 10px;z-index:-2}
.tq-tape{position:absolute;left:50%;top:-22px;width:140px;height:46px;translate:-50% 0;rotate:-3deg;background:url(../visuels/scotch-bande.svg) center/cover no-repeat}
.tq-mark{position:absolute;left:24px;top:6px;font:170px/1 var(--display);color:var(--l);-webkit-text-stroke:3px var(--n);pointer-events:none}
.tq-card{margin:0;display:grid;gap:14px;animation:tq-in .45s cubic-bezier(.22,1,.36,1)}
.tq-card[hidden]{display:none}
.tq-stars{font-size:18px;letter-spacing:4px;color:var(--n)}
.tq-card blockquote{margin:0;font:clamp(20px,2.2vw,27px)/1.32 var(--display);letter-spacing:-.02em;color:var(--n)}
.tq-card figcaption{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline;font-size:14px;color:var(--m)}
.tq-card figcaption b{color:var(--n);font-size:16px}
.tq-bar{position:absolute;left:0;right:0;bottom:0;height:5px;background:#08263b14}
.tq-bar span{display:block;height:100%;background:var(--n);transform-origin:left;transform:scaleX(0)}
.tq-nav{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:28px}
.tq-dots{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.tq-dot{width:46px;height:46px;border-radius:50%;border:2px solid var(--n);background:var(--n);color:var(--l);font:13px var(--display);transition:transform .2s,background .2s,color .2s}
.tq-dot:hover{transform:translateY(-2px)}
.tq-dot.is-active{background:var(--l);color:var(--n);box-shadow:3px 3px 0 var(--n)}
.tq-arrow{width:46px;height:46px;border:2px solid var(--n);background:transparent;color:var(--n);font-size:20px;font-weight:bold;transition:background .2s,color .2s}
.tq-arrow:hover{background:var(--n);color:var(--c)}
@keyframes tq-in{from{opacity:0;translate:20px 0}}
@media(max-width:640px){
.tq-stage{padding:58px 20px 28px;min-height:0;rotate:-.6deg;box-shadow:5px 5px 0 var(--l)}
.tq{padding:0 8px;overflow-x:clip}
.tq-pile::before{translate:5px 4px;rotate:2deg}
.tq-pile::after{translate:-4px 6px;rotate:-1.5deg}
.tq-mark{left:14px;top:-4px;font-size:120px}
.tq-card blockquote{font-size:19px}
.tq-arrow{display:none}
.tq-dot{width:44px;height:44px}
}
@media(prefers-reduced-motion:reduce){.tq-card{animation:none}}

/* témoignages : le pouce levé du kit, collé en haut à droite de la note */
.tq-thumb{position:absolute;z-index:3;right:-46px;top:-62px;width:150px;height:auto;rotate:10deg;pointer-events:none}
@media(max-width:640px){.tq-thumb{right:-2px;top:-44px;width:96px}}

/* le pouce « pompe » régulièrement, et à chaque changement d'avis */
.tq-thumb{transform-origin:30% 85%;animation:tq-thumb 3.4s ease-in-out 1.2s infinite}
.tq-thumb.pump{animation:tq-thumb-once .7s ease-out}
@keyframes tq-thumb{0%,62%,100%{rotate:10deg;translate:0 0;scale:1}70%{rotate:24deg;translate:0 -8%;scale:1.08}78%{rotate:2deg;translate:0 0;scale:1}85%{rotate:18deg;translate:0 -4%;scale:1.04}92%{rotate:8deg;translate:0 0;scale:1}}
@keyframes tq-thumb-once{0%{rotate:10deg;scale:1}35%{rotate:28deg;translate:0 -10%;scale:1.12}65%{rotate:0deg;translate:0 0;scale:.98}100%{rotate:10deg;scale:1}}
@media(prefers-reduced-motion:reduce){.tq-thumb,.tq-thumb.pump{animation:none}}
/* ═══ Réalisations : le téléphone choisi vient au milieu, les deux autres s'écartent ═══ */
#realisations{overflow-x:clip}
.fan{--w:clamp(118px,19vw,240px);position:relative;height:calc(var(--w) * 2.62);margin:40px auto 0;max-width:900px}
.fan-phone{--x:0%;--y:0px;--r:0deg;--s:1;position:absolute;left:50%;bottom:0;width:var(--w);margin:0;outline:none;cursor:pointer;transform-origin:50% 115%;
  transform:translateX(calc(-50% + var(--x))) translateY(var(--y)) rotate(var(--r)) scale(var(--s));
  transition:transform .6s cubic-bezier(.34,1.4,.64,1),filter .4s,opacity .4s;-webkit-tap-highlight-color:transparent}
.fan-phone.pos-l{--x:-96%;--r:-15deg;--s:.88;z-index:1;filter:saturate(.65) brightness(.75)}
.fan-phone.pos-r{--x:96%;--r:15deg;--s:.88;z-index:1;filter:saturate(.65) brightness(.75)}
.fan-phone.pos-c{--y:-26px;--s:1.06;z-index:3;cursor:default}
.fan-phone.pos-l:hover,.fan-phone.pos-r:hover{filter:none;--y:-14px}
.fan-screen{position:relative;padding:8px;background:var(--n);border:3px solid var(--c);border-radius:calc(var(--w) * .15);box-shadow:8px 8px 0 var(--l)}
.fan-screen::before{content:'';position:absolute;z-index:1;top:14px;left:50%;width:28%;height:calc(var(--w) * .045);translate:-50% 0;border-radius:99px;background:var(--n)}
.fan-screen img{display:block;width:100%;height:auto;aspect-ratio:375/812;object-fit:cover;object-position:top;border-radius:calc(var(--w) * .11)}
.fan-phone figcaption{display:grid;justify-items:center;gap:6px;margin-top:16px;text-align:center}
.fan-phone figcaption b{font:clamp(13px,1.6vw,19px)/1.1 var(--display);letter-spacing:-.02em;color:var(--c)}
.fan-phone figcaption span{font:clamp(11px,1.1vw,13px) var(--impact);letter-spacing:.04em;text-transform:uppercase;color:var(--n);background:var(--l);padding:2px 8px}
.fan-phone:focus-visible .fan-screen{outline:3px solid var(--l);outline-offset:4px}
.fan-hint{text-align:center;font:700 22px/1 var(--hand);color:var(--l);margin-top:22px}
.briefs{max-width:640px;margin:18px auto 0}
.brief{position:relative;background:#fffefa;color:var(--n);border:2px solid var(--n);padding:22px 26px 24px;box-shadow:8px 8px 0 var(--l);rotate:-.8deg;animation:tq-in .45s cubic-bezier(.22,1,.36,1)}
.brief[hidden]{display:none}
.brief-label{display:inline-block;font:14px var(--impact);letter-spacing:.04em;text-transform:uppercase;background:var(--rose);border:2px solid var(--n);padding:2px 8px;margin-bottom:10px}
.brief h3{font-size:26px;margin-bottom:8px}
.brief p{font-size:16px;line-height:1.5;margin-bottom:14px}
.brief-chips{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.brief-chips li{font-size:13px;font-weight:bold;padding:6px 11px;border:2px solid var(--n);background:var(--l)}
.fan.is-ready:not(.is-in) .fan-phone{--x:0%;--r:0deg;--y:90px;opacity:0}
.fan.is-in .pos-l{transition-delay:.1s}.fan.is-in .pos-r{transition-delay:.2s}
.fan.is-in.done .fan-phone{transition-delay:0s}
@media(max-width:640px){
.fan{--w:min(30vw,130px);height:calc(var(--w) * 2.6);margin-top:28px}
.fan-phone.pos-l{--x:-84%;--r:-11deg;--s:.84}
.fan-phone.pos-r{--x:84%;--r:11deg;--s:.84}
.fan-screen{padding:5px;border-width:2px;box-shadow:5px 5px 0 var(--l)}
.fan-screen::before{top:9px}
.fan-phone figcaption{display:none}
.brief{padding:18px 18px 20px;rotate:0deg;box-shadow:6px 6px 0 var(--l)}
.brief h3{font-size:22px}
.brief p{font-size:15px}
}
@media(prefers-reduced-motion:reduce){.fan-phone,.brief{transition:none;animation:none}}

/* ═══ À propos : un badge « pass équipe » suspendu à sa lanière, qui se balance ═══ */
.badge-wrap{position:relative;justify-self:center;width:min(300px,100%);padding-top:110px;transform-origin:50% 0;animation:badge-swing 5s ease-in-out infinite}
.badge-wrap:hover{animation-play-state:paused}
.badge-strap{position:absolute;left:50%;top:-40px;width:34px;height:166px;translate:-50% 0;background:var(--l);border:2px solid var(--n);border-top:0;
  background-image:repeating-linear-gradient(0deg,transparent 0 22px,#08263b1f 22px 24px)}
.badge{position:relative;margin:0;background:#fffefa;border:2px solid var(--n);border-radius:16px;padding:26px 20px 18px;box-shadow:10px 10px 0 var(--l);text-align:center}
.badge-clip{position:absolute;left:50%;top:-16px;width:64px;height:28px;translate:-50% 0;background:var(--n);border-radius:8px}
.badge-clip::after{content:'';position:absolute;left:50%;top:9px;width:30px;height:8px;translate:-50% 0;background:var(--c);border-radius:99px}
.badge-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:12px;margin-bottom:14px;border-bottom:2px dashed #08263b40}
.badge-head img{width:96px;height:auto}
.badge-head span{font:12px var(--impact);letter-spacing:.06em;text-transform:uppercase;background:var(--n);color:var(--l);padding:3px 8px}
.badge-photo{display:block;width:100%;height:auto;aspect-ratio:222/178;object-fit:cover;border:2px solid var(--n);border-radius:10px;filter:contrast(1.05)}
.badge figcaption{display:grid;gap:2px;margin:14px 0 12px}
.badge figcaption b{font:46px/1 var(--impact);letter-spacing:.01em;text-transform:uppercase;color:var(--n)}
.badge figcaption span{font:700 22px/1 var(--hand);color:var(--m)}
.badge-facts{margin:0;display:grid;gap:6px;text-align:left}
.badge-facts div{display:grid;grid-template-columns:76px 1fr;align-items:center;border:2px solid var(--n);border-radius:8px;overflow:hidden;font-size:14px}
.badge-facts dt{background:var(--n);color:var(--l);font:13px var(--impact);letter-spacing:.05em;text-transform:uppercase;padding:6px 8px;height:100%;display:flex;align-items:center}
.badge-facts dd{margin:0;padding:6px 10px;font-weight:bold;color:var(--n)}
.badge-facts div:last-child dd{background:var(--l)}
.badge-code{display:block;height:30px;margin-top:14px;background:repeating-linear-gradient(90deg,var(--n) 0 2px,transparent 2px 4px,var(--n) 4px 7px,transparent 7px 9px,var(--n) 9px 10px,transparent 10px 14px);opacity:.8}
@keyframes badge-swing{0%,100%{rotate:-3deg}50%{rotate:3deg}}
@media(max-width:860px){.badge-wrap{width:min(280px,86%);padding-top:90px}.badge-strap{height:146px}}
@media(prefers-reduced-motion:reduce){.badge-wrap{animation:none}}
/* badge resserré */
.badge-wrap{width:min(240px,100%);padding-top:70px}
.badge-strap{width:26px;height:110px;top:-30px}
.badge{padding:18px 14px 12px;border-radius:12px;box-shadow:7px 7px 0 var(--l)}
.badge-clip{width:50px;height:22px;top:-12px}.badge-clip::after{top:7px;width:24px;height:6px}
.badge-head{padding-bottom:8px;margin-bottom:10px}.badge-head img{width:78px}.badge-head span{font-size:11px;padding:2px 6px}
.badge figcaption{margin:10px 0 8px}.badge figcaption b{font-size:34px}.badge figcaption span{font-size:18px}
.badge-facts{gap:4px}.badge-facts div{grid-template-columns:62px 1fr;font-size:12.5px;border-radius:6px}
.badge-facts dt{font-size:11px;padding:4px 6px}.badge-facts dd{padding:4px 8px}
.badge-code{height:18px;margin-top:10px}
.me{grid-template-columns:minmax(220px,300px) 1fr}
@media(max-width:860px){.badge-wrap{width:min(220px,70%);padding-top:56px}.badge-strap{height:92px}.me{grid-template-columns:1fr}}

/* ═══ Écran d'ouverture « appli » : logo qui s'assemble, question, puis l'écran s'ouvre ═══ */
.splash{display:none}
html.intro{overflow:hidden}
html.intro .splash{display:block;position:fixed;inset:0;z-index:9999;color:var(--c)}
.splash-half{position:absolute;left:0;right:0;height:50.5%;background:var(--n)}
.splash-half.sh-top{top:0}.splash-half.sh-bot{bottom:0}
.splash-half::before{content:'';position:absolute;inset:0;opacity:.08;background:radial-gradient(circle at 30% 20%,#fff 0 1px,transparent 1.5px) 0 0/7px 7px}
.splash::after{content:'';position:absolute;left:0;right:0;top:50%;height:4px;translate:0 -50%;background:var(--l);transform:scaleX(var(--seam,0));opacity:var(--seamo,1);z-index:2}
.splash-in{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;padding:24px}
.splash-logo{width:min(64vw,360px);height:auto;overflow:visible}
.splash-logo .lt{fill:var(--c)}
.splash-logo .xp{fill:var(--l)}
.splash-q{font:clamp(26px,7.4vw,46px)/1.08 var(--display);letter-spacing:-.04em;text-align:center;max-width:12ch}
.splash-q .w{display:inline-block}
.splash-q .hl{position:relative;color:var(--n);padding:0 .18em;z-index:0}
.splash-q .hl::before{content:'';position:absolute;inset:.06em -.04em;background:var(--l);z-index:-1;transform:scaleX(var(--hl,1));transform-origin:left;rotate:-1.5deg}
.splash-bar{width:min(46vw,200px);height:5px;background:#ffffff22;border-radius:9px;overflow:hidden}
.splash-bar span{display:block;height:100%;background:var(--l);transform:scaleX(0);transform-origin:left}
.splash-skip{position:absolute;z-index:4;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));background:transparent;color:#d1dce0;border:1.5px solid #ffffff55;border-radius:99px;padding:8px 16px;font:bold 13px Arial,sans-serif;cursor:pointer}
.splash-skip:hover{color:var(--n);background:var(--l);border-color:var(--l)}

/* ═══ Accueil : Cyril & Fluxya (remplace la vidéo et l'ancienne section À propos) ═══ */
.me-hero{padding:48px 0 64px;overflow-x:clip}
.me-hero-in{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:center}
.me-hero .eyebrow{margin-bottom:18px}
.me-hero h1{font-size:clamp(40px,5vw,72px);margin-bottom:24px}
.me-hero h1 .line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.me-hero h1 .line>span{display:block}
.me-hero .me-quote{max-width:640px}
.me-hero .lead{font-size:17px;color:var(--m);max-width:620px;margin-bottom:12px}
.me-hero .lead strong{color:var(--n)}
.me-hero-alfred{font-size:16px;color:var(--m);max-width:620px;margin-bottom:26px}
.me-hero-alfred strong{color:var(--n)}
.me-hero-proof{margin-top:22px;font-size:14px;color:var(--m);display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.me-hero-proof b{background:var(--l);color:var(--n);padding:1px 8px}
.me-hero-art{display:flex;justify-content:center}
.me-hero .badge-wrap{margin-top:-30px}
@media(max-width:860px){
.me-hero{padding:30px 0 48px}
.me-hero-in{grid-template-columns:1fr;gap:36px}
.me-hero .badge-wrap{margin-top:0}
.me-hero .hero-actions .btn{flex:1 1 220px}
}

/* ═══ Accueil v2 : titre → visuel « Cyril + ce qu'il fait » → texte ═══ */
.me-hero-in{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"top visual" "text visual";column-gap:56px;row-gap:18px;align-items:center}
.me-hero-top{grid-area:top;align-self:end}
.me-hero-text{grid-area:text;align-self:start}
.me-visual{grid-area:visual}
.me-hero h1{margin-bottom:16px}
.me-hero-sub{font:clamp(18px,1.7vw,22px)/1.4 var(--display);letter-spacing:-.02em;color:var(--n);max-width:560px;padding-left:16px;border-left:6px solid var(--l)}
.me-hero-sub strong{font-weight:400;background:var(--l);padding:0 4px}
.me-visual{position:relative;margin:0 auto;width:min(100%,500px);aspect-ratio:1}
.mv-orbit{position:absolute;inset:9%;border:2px dashed #08263b55;border-radius:50%;animation:mv-spin 40s linear infinite}
.mv-core{position:absolute;left:50%;top:50%;width:46%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:var(--l);border:3px solid var(--n);box-shadow:8px 8px 0 var(--n);overflow:hidden}
.mv-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;mix-blend-mode:multiply;filter:contrast(1.08)}
.mv-name{position:absolute;left:50%;bottom:8%;translate:-50% 0;font:clamp(14px,2.4vw,20px)/1 var(--impact);letter-spacing:.06em;text-transform:uppercase;background:var(--n);color:var(--l);padding:4px 12px;white-space:nowrap}
.mv-sats{list-style:none;margin:0;padding:0}
.mv-sat{position:absolute;width:25%;display:grid;justify-items:center;gap:2px;translate:-50% -50%}
.mv-sat>*{animation:mv-float 4.5s ease-in-out var(--d,0s) infinite}
.mv-sat img{width:78%;height:auto;filter:drop-shadow(0 6px 0 rgba(8,38,59,.16))}
.mv-sat span{font:clamp(11px,1.5vw,14px)/1.1 var(--impact);letter-spacing:.04em;text-transform:uppercase;background:#fffefa;border:2px solid var(--n);padding:3px 8px;white-space:nowrap;box-shadow:3px 3px 0 var(--l)}
.mv-sat.s1{left:50%;top:9%;--d:0s}
.mv-sat.s2{left:89%;top:36%;--d:-.9s}
.mv-sat.s3{left:76%;top:84%;--d:-1.8s}
.mv-sat.s4{left:24%;top:84%;--d:-2.7s}
.mv-sat.s5{left:11%;top:36%;--d:-3.6s}
.mv-note{position:absolute;right:2%;top:2%;font:700 clamp(18px,2.4vw,26px)/1 var(--hand);color:var(--n);rotate:8deg;background:var(--paper,#fffefa);padding:2px 8px;border:2px dashed #08263b66}
@keyframes mv-spin{to{rotate:360deg}}
@keyframes mv-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media(max-width:860px){
.me-hero-in{grid-template-columns:1fr;grid-template-areas:"top" "visual" "text";row-gap:26px}
.me-visual{width:min(100%,420px)}
.mv-sat{width:28%}
}
@media(prefers-reduced-motion:reduce){.mv-orbit,.mv-sat>*{animation:none}}

/* ═══ Visuel de l'accueil : un clic sur une activité retourne le bloc ═══ */
.me-visual{aspect-ratio:auto;perspective:1400px}
.mv-flip{position:relative;width:100%;aspect-ratio:1;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.5,-.2,.3,1.3)}
.me-visual.is-flipped .mv-flip{transform:rotateY(180deg)}
.mv-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.mv-back{transform:rotateY(180deg);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;
  margin:6%;padding:7% 9%;background:var(--n);color:var(--c);border:3px solid var(--n);border-radius:32px;box-shadow:10px 10px 0 var(--l)}
.mv-topic{display:grid;justify-items:center;gap:10px}
.mv-topic[hidden]{display:none}
.mv-topic img{width:clamp(70px,22%,120px);height:auto;filter:drop-shadow(0 6px 0 rgba(0,0,0,.25));rotate:-6deg}
.mv-topic h3{font:clamp(24px,3.4vw,34px)/1 var(--impact);letter-spacing:.03em;text-transform:uppercase;color:var(--l)}
.mv-topic p{font-size:clamp(15px,1.5vw,18px);line-height:1.45;max-width:34ch}
.mv-topic .mv-topic-2{color:#d1dce0;font-size:clamp(14px,1.3vw,16px)}
.mv-back-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.mv-back-actions .btn{padding:10px 16px;font-size:14px}
.mv-back .btn.ghost{color:var(--c);border-color:#ffffff88}
.mv-back .btn.ghost:hover{background:var(--c);color:var(--n)}
button.mv-sat{background:none;border:0;padding:0;cursor:pointer;color:inherit;font:inherit}
button.mv-sat:hover img,button.mv-sat:focus-visible img{scale:1.12;rotate:-6deg}
button.mv-sat img{transition:scale .25s cubic-bezier(.34,1.56,.64,1),rotate .25s}
button.mv-sat:focus-visible span{outline:3px solid var(--n);outline-offset:2px}
.mv-sats li{display:contents}
.mv-hint{margin-top:10px;text-align:center;font:700 22px/1 var(--hand);color:var(--m)}
@media(max-width:640px){.mv-back{margin:3%;padding:8% 7%;border-radius:24px}.mv-topic p{font-size:14px}.mv-topic .mv-topic-2{font-size:13px}.mv-back-actions .btn{padding:9px 12px;font-size:13px}}
@media(prefers-reduced-motion:reduce){.mv-flip{transition:none}}

/* portrait détouré : la tête dépasse du rond lime, le bas suit la courbe du cercle */
.mv-core{overflow:visible}
.mv-photo-wrap{position:absolute;left:-6%;right:-6%;bottom:0;top:-46%;overflow:hidden;border-radius:0 0 999px 999px}
.mv-photo-wrap .mv-photo{position:absolute;inset:auto 0 -4% 0;width:100%;height:auto;object-fit:contain;mix-blend-mode:normal;filter:drop-shadow(0 6px 0 rgba(8,38,59,.18))}
.mv-name{z-index:2}
.mv-photo-wrap{top:-34%}
.mv-sat.s1{top:6%}
/* activités réparties autour du portrait sans toucher la tête (qui dépasse du rond) */
.mv-sat.s1{left:19%;top:14%}
.mv-sat.s2{left:81%;top:14%}
.mv-sat.s3{left:90%;top:60%}
.mv-sat.s4{left:50%;top:92%}
.mv-sat.s5{left:10%;top:60%}
.mv-note{top:auto;bottom:1%;right:0}
/* portrait plus petit : tient dans la largeur du rond, tête entière */
.mv-photo-wrap{left:5%;right:5%;top:-40%}
.mv-photo-wrap .mv-photo{bottom:0}

/* bouton d'en-tête : un vrai appel à l'action, lisible aussi sur mobile */
.go,.go:hover{width:auto;height:44px;padding:0 18px;border-radius:999px;gap:8px;font-size:15px;font-weight:bold;color:var(--n);border:2px solid var(--n);box-shadow:4px 4px 0 var(--n);transform:none}
.go:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--n)}
.go .go-label{display:inline;white-space:nowrap}
@media(max-width:860px){.go,.go:hover{height:40px;padding:0 14px;font-size:14px;box-shadow:3px 3px 0 var(--n)}}
@media(max-width:360px){.go{padding:0 11px;font-size:13px}}

/* retournement simplifié (2D) : une seule face visible à la fois, animée en JS */
.mv-flip{transform-style:flat;transition:none;will-change:transform}
.me-visual.is-flipped .mv-flip{transform:none}
.mv-face{backface-visibility:visible;-webkit-backface-visibility:visible}
.mv-back{transform:none;visibility:hidden;opacity:0}
.me-visual.is-flipped .mv-back{visibility:visible;opacity:1}
.me-visual.is-flipped .mv-front{visibility:hidden}
.me-visual.is-turning .mv-orbit,.me-visual.is-turning .mv-sat>*,.me-visual.is-flipped .mv-orbit,.me-visual.is-flipped .mv-sat>*{animation-play-state:paused}