*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}html{scroll-behavior:smooth}body{text-rendering:optimizeLegibility}summary::-webkit-details-marker{display:none}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;transition-duration:.01ms!important}html{scroll-behavior:auto}}.text-hero{background:linear-gradient(180deg,#fff,#fff,hsla(0,0%,100%,.55));-webkit-background-clip:text;background-clip:text}.text-glow,.text-hero{-webkit-text-fill-color:transparent}.text-glow{background:linear-gradient(180deg,#93b4ff,#3866ff);-webkit-background-clip:text;background-clip:text}.hero-pad{padding-top:168px}@media (min-width:768px){.hero-pad{padding-top:196px}}.hero-h1{font-size:clamp(34px,calc((100vw - 72px)/12.4),86px);line-height:1.04;font-weight:800}
/* titre long : il s equilibre sur plusieurs lignes au lieu d etre fige */
.hero-h1--long{font-size:clamp(29px,calc((100vw - 72px)/17.5),62px);line-height:1.08;max-width:28ch;letter-spacing:-.045em;word-spacing:.04em}
.hero-h1--long i.text-glow{display:inline;font-style:normal}
/* Sur grand ecran, la coupure du titre est choisie et non subie : le mot
   ameliorez doit finir la premiere ligne. En dessous, on laisse le navigateur
   equilibrer, une coupure figee y donnerait des lignes bancales. */
.hero-h1--long,.hero-sub{text-wrap:balance}
.hero-h1 .h1-coupe,.hero-sub .h1-coupe{display:none}
@media(min-width:900px){.hero-h1--long,.hero-sub{text-wrap:normal}.hero-h1 .h1-coupe,.hero-sub .h1-coupe{display:inline}}
div.cp-preuve{margin-bottom:32px}
.hero-h1.hero-h1--long{margin-bottom:28px}
p.hero-sub{margin-bottom:36px}
div.hero-cta{margin-top:54px}
/* Traits de reperage facon plan technique : ils passent par le centre des
   quatre croix et filent jusqu aux bords de la section, qui les coupe elle-meme
   grace a son overflow. Les croix marquent donc les intersections. */
/* --cp-ec : la distance entre le bord des cartes et le reperage. Une seule
   valeur pour les croix ET les traits, sinon les deux se desynchronisent des
   qu on la retouche. */
.cp-x,.cp-tr{--cp-ec:18px;--cp-x-t:16px}
.cp-x{position:absolute;width:var(--cp-x-t);height:var(--cp-x-t);color:rgba(203,213,225,.14);pointer-events:none}
.cp-x-hg{left:calc(var(--cp-x-t) / -2 - var(--cp-ec));top:calc(var(--cp-x-t) / -2 - var(--cp-ec))}
.cp-x-hd{right:calc(var(--cp-x-t) / -2 - var(--cp-ec));top:calc(var(--cp-x-t) / -2 - var(--cp-ec))}
.cp-x-bg{left:calc(var(--cp-x-t) / -2 - var(--cp-ec));bottom:calc(var(--cp-x-t) / -2 - var(--cp-ec))}
.cp-x-bd{right:calc(var(--cp-x-t) / -2 - var(--cp-ec));bottom:calc(var(--cp-x-t) / -2 - var(--cp-ec))}
.cp-tr{position:absolute;pointer-events:none;background:rgba(203,213,225,.14)}
.cp-tr-h{left:-100vw;right:-100vw;height:1px}
.cp-tr-v{top:-100vh;bottom:-100vh;width:1px}
.cp-tr-haut{top:calc(var(--cp-ec) * -1);margin-top:-.5px}
.cp-tr-bas{bottom:calc(var(--cp-ec) * -1);margin-bottom:-.5px}
.cp-tr-gauche{left:calc(var(--cp-ec) * -1);margin-left:-.5px}
.cp-tr-droite{right:calc(var(--cp-ec) * -1);margin-right:-.5px}
.cp-remise{border-radius:99px;padding:3.5px 10px;background:#0f7a4d;color:#fff;font-size:11px;font-weight:800;line-height:1.35;letter-spacing:.01em;box-shadow:0 5px 14px -4px rgba(15,122,77,.55);transform:rotate(10deg);transform-origin:center}.hero-sub{line-height:1.5}.hero-cta{margin-top:46px}.cta-hero{min-height:64px;padding:0 40px;font-size:17.5px;background:linear-gradient(135deg,#6e8bff 0%,#3866ff 52%,#2b4fe0 100%);box-shadow:0 10px 38px rgba(56,102,255,.5)}.cta-hero:hover{box-shadow:0 14px 46px rgba(56,102,255,.62)}@media (min-width:620px){.hero-h1 .hero-line{display:block;white-space:nowrap;padding-bottom:.11em;margin-bottom:-.11em}.hero-h1 i.text-glow{display:inline;font-style:normal}}.dot-bg{background-image:radial-gradient(hsla(0,0%,100%,.14) 1px,transparent 0);background-size:26px 26px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 35%,#000 40%,transparent 100%);mask-image:radial-gradient(ellipse 70% 60% at 50% 35%,#000 40%,transparent 100%)}.grid-bg{background-image:linear-gradient(90deg,rgba(23,32,51,.08) 1px,transparent 0),linear-gradient(180deg,rgba(23,32,51,.08) 1px,transparent 0);background-size:32px 32px;-webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%)}.scroll-card{box-shadow:0 0 #0000004d,0 9px 20px #0000004a,0 37px 37px #00000042,0 84px 50px #00000026,0 149px 60px #0000000a,0 233px 65px #00000003;transform:perspective(1000px) rotateX(20deg) scale(1.05)}.scroll-card,.scroll-head{will-change:transform}.marquee{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}.marquee-track{display:flex;flex-shrink:0;align-items:center;gap:2.5rem;padding-right:2.5rem;animation:marquee 32s linear infinite}@keyframes marquee{0%{transform:translateX(0)}to{transform:translateX(-100%)}}.shimmer{position:relative;overflow:hidden}.shimmer:after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(110deg,transparent 30%,hsla(0,0%,100%,.45) 50%,transparent 70%);animation:shimmer 2.8s ease-in-out infinite}@keyframes shimmer{60%,to{transform:translateX(100%)}}.spot{position:relative}.spot:before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .3s;pointer-events:none;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(56,102,255,.14),transparent 55%)}.spot:hover:before{opacity:1}.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}.reveal.reveal-in{opacity:1;transform:none}.meteor{position:absolute;top:0;width:2px;height:2px;border-radius:9999px;background:#6f95ff;box-shadow:0 0 0 1px rgba(111,149,255,.1);transform:rotate(215deg);animation:meteor 5s linear infinite;opacity:0}.meteor:before{content:"";position:absolute;top:50%;transform:translateY(-50%);width:70px;height:1px;background:linear-gradient(90deg,rgba(111,149,255,.6),transparent)}@keyframes meteor{0%{transform:rotate(215deg) translateX(0);opacity:0}8%{opacity:1}70%{opacity:1}to{transform:rotate(215deg) translateX(-620px);opacity:0}}.pfl-marquee{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}.pfl-track{display:flex;flex-shrink:0;gap:14px;padding-right:14px;animation:marquee 55s linear infinite}.pfl-marquee:hover .pfl-track{animation-play-state:paused}.pfl-card{gap:12px;background:linear-gradient(180deg,hsla(0,0%,100%,.06),hsla(0,0%,100%,.03));border:1px solid hsla(0,0%,100%,.09);border-radius:14px;padding:10px 18px 10px 12px;transition:border-color .25s ease,background .25s ease}.pfl-card:hover{border-color:rgba(147,180,255,.32);background:linear-gradient(180deg,rgba(147,180,255,.10),hsla(0,0%,100%,.03))}.pfl-txt{font-size:15px;line-height:1.25;color:hsla(0,0%,100%,.5);white-space:nowrap}.pfl-txt b{color:#fff;font-weight:700}.pfl-card,.pfl-ic{flex:none;display:flex;align-items:center}.pfl-ic{justify-content:center;width:38px;height:38px;border-radius:11px;background:linear-gradient(145deg,rgba(110,139,255,.24),rgba(56,102,255,.08));border:1px solid rgba(147,180,255,.18)}.pfl-ic svg{width:20px;height:20px;stroke:url(#pflGrad)}.border-trail{pointer-events:none;position:absolute;inset:0;border-radius:inherit;border:1px solid transparent;-webkit-mask-image:linear-gradient(transparent,transparent),linear-gradient(#000,#000);mask-image:linear-gradient(transparent,transparent),linear-gradient(#000,#000);-webkit-mask-clip:padding-box,border-box;mask-clip:padding-box,border-box;-webkit-mask-composite:source-in;mask-composite:intersect}.border-trail{will-change:transform;isolation:isolate}.border-trail:after{content:"";position:absolute;width:90px;aspect-ratio:1;background:#3866ff;box-shadow:0 0 34px 14px rgba(56,102,255,.5);offset-path:rect(0 auto auto 0 round 90px);animation:trail 6s linear infinite;will-change:offset-distance}@keyframes trail{0%{offset-distance:0}to{offset-distance:100%}}.pointer-events-none{pointer-events:none}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.-inset-16{inset:-4rem}.inset-0{inset:0}.-bottom-3{bottom:-.75rem}.-left-3{left:-.75rem}.-right-20{right:-5rem}.-right-3{right:-.75rem}.-top-20{top:-5rem}.-top-3{top:-.75rem}.-top-44{top:-11rem}.left-1\/2{left:50%}.left-16{left:4rem}.right-16{right:4rem}.top-0{top:0}.top-1\/2{top:50%}.top-\[42px\]{top:42px}.z-10{z-index:10}.z-50{z-index:50}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:.25rem}.mb-1\.5{margin-bottom:.375rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-7{margin-bottom:1.75rem}.mb-8{margin-bottom:2rem}.ml-2{margin-left:.5rem}.ml-3{margin-left:.75rem}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-1\.5{margin-top:.375rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-auto{margin-top:auto}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.h-1\.5{height:.375rem}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-12{height:3rem}.h-2{height:.5rem}.h-2\.5{height:.625rem}.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-64{height:16rem}.h-7{height:1.75rem}.h-9{height:2.25rem}.h-\[300px\]{height:300px}.h-\[540px\]{height:540px}.h-full{height:100%}.h-px{height:1px}.min-h-\[42px\]{min-height:42px}.min-h-\[52px\]{min-height:52px}.min-h-\[54px\]{min-height:54px}.min-h-\[56px\]{min-height:56px}.w-1\/2{width:50%}.w-10{width:2.5rem}.w-11{width:2.75rem}.w-12{width:3rem}.w-2{width:.5rem}.w-2\.5{width:.625rem}.w-3{width:.75rem}.w-3\.5{width:.875rem}.w-4{width:1rem}.w-44{width:11rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-64{width:16rem}.w-7{width:1.75rem}.w-9{width:2.25rem}.w-\[600px\]{width:600px}.w-\[860px\]{width:860px}.w-full{width:100%}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}.max-w-6xl{max-width:72rem}.max-w-lg{max-width:32rem}.max-w-md{max-width:28rem}.max-w-xl{max-width:36rem}.flex-1{flex:1 1 0%}.flex-none{flex:none}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,.-translate-y-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/2{--tw-translate-y:-50%}.-rotate-90{--tw-rotate:-90deg}.-rotate-90,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes ping{75%,to{transform:scale(2);opacity:0}}.animate-ping{animation:ping 1s cubic-bezier(0,0,.2,1) infinite}.cursor-pointer{cursor:pointer}.resize{resize:both}.list-none{list-style-type:none}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-7{gap:1.75rem}.gap-8{gap:2rem}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-\[30px\]{border-radius:30px}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-2{border-width:2px}.border-4{border-width:4px}.border-y{border-top-width:1px}.border-b,.border-y{border-bottom-width:1px}.border-t{border-top-width:1px}.border-\[\#6C6C6C\]{--tw-border-opacity:1;border-color:rgb(108 108 108/var(--tw-border-opacity,1))}.border-amber-200{--tw-border-opacity:1;border-color:rgb(253 230 138/var(--tw-border-opacity,1))}.border-emerald-200{--tw-border-opacity:1;border-color:rgb(167 243 208/var(--tw-border-opacity,1))}.border-primary{--tw-border-opacity:1;border-color:rgb(56 102 255/var(--tw-border-opacity,1))}.border-slate-200{--tw-border-opacity:1;border-color:rgb(230 230 235/var(--tw-border-opacity,1))}.border-white{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity,1))}.border-white\/10{border-color:hsla(0,0%,100%,.1)}.border-white\/15{border-color:hsla(0,0%,100%,.15)}.border-white\/20{border-color:hsla(0,0%,100%,.2)}.border-white\/5{border-color:hsla(0,0%,100%,.05)}.bg-\[\#222222\]{--tw-bg-opacity:1;background-color:rgb(34 34 34/var(--tw-bg-opacity,1))}.bg-accent{--tw-bg-opacity:1;background-color:rgb(147 180 255/var(--tw-bg-opacity,1))}.bg-amber-400{--tw-bg-opacity:1;background-color:rgb(251 191 36/var(--tw-bg-opacity,1))}.bg-amber-50{--tw-bg-opacity:1;background-color:rgb(255 251 235/var(--tw-bg-opacity,1))}.bg-emerald-100{--tw-bg-opacity:1;background-color:rgb(209 250 229/var(--tw-bg-opacity,1))}.bg-emerald-400{--tw-bg-opacity:1;background-color:rgb(52 211 153/var(--tw-bg-opacity,1))}.bg-emerald-400\/15{background-color:rgba(52,211,153,.15)}.bg-emerald-50{--tw-bg-opacity:1;background-color:rgb(236 253 245/var(--tw-bg-opacity,1))}.bg-nav{--tw-bg-opacity:1;background-color:rgb(5 5 6/var(--tw-bg-opacity,1))}.bg-nav\/80{background-color:rgba(5,5,6,.82)}.bg-primary{--tw-bg-opacity:1;background-color:rgb(56 102 255/var(--tw-bg-opacity,1))}.bg-primary\/15{background-color:rgba(56,102,255,.15)}.bg-primary\/20{background-color:rgba(56,102,255,.2)}.bg-primary\/30{background-color:rgba(56,102,255,.3)}.bg-red-400{--tw-bg-opacity:1;background-color:rgb(248 113 113/var(--tw-bg-opacity,1))}.bg-slate-100{--tw-bg-opacity:1;background-color:rgb(243 243 246/var(--tw-bg-opacity,1))}.bg-slate-200{--tw-bg-opacity:1;background-color:rgb(230 230 235/var(--tw-bg-opacity,1))}.bg-slate-50{--tw-bg-opacity:1;background-color:rgb(250 250 251/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-white\/10{background-color:hsla(0,0%,100%,.1)}.bg-white\/5{background-color:hsla(0,0%,100%,.05)}.bg-white\/\[0\.03\]{background-color:hsla(0,0%,100%,.03)}.stroke-accent{stroke:#93b4ff}.stroke-emerald-600{stroke:#059669}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-3\.5{padding:.875rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-7{padding:1.75rem}.p-8{padding:2rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-3\.5{padding-left:.875rem;padding-right:.875rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-7{padding-left:1.75rem;padding-right:1.75rem}.px-8{padding-left:2rem;padding-right:2rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-20{padding-top:5rem;padding-bottom:5rem}.py-24{padding-top:6rem;padding-bottom:6rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.pb-20{padding-bottom:5rem}.pb-3{padding-bottom:.75rem}.pb-4{padding-bottom:1rem}.pb-5{padding-bottom:1.25rem}.pt-1{padding-top:.25rem}.pt-16{padding-top:4rem}.pt-2{padding-top:.5rem}.pt-28{padding-top:7rem}.text-center{text-align:center}.text-right{text-align:right}.font-sans{font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[12\.5px\]{font-size:12.5px}.text-\[12px\]{font-size:12px}.text-\[13px\]{font-size:13px}.text-\[14px\]{font-size:14px}.text-\[15px\]{font-size:15px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.italic{font-style:italic}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.leading-\[1\.04\]{line-height:1.04}.tracking-\[-0\.04em\]{letter-spacing:-.04em}.tracking-\[0\.15em\]{letter-spacing:.15em}.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.text-accent{--tw-text-opacity:1;color:rgb(147 180 255/var(--tw-text-opacity,1))}.text-amber-700{--tw-text-opacity:1;color:rgb(180 83 9/var(--tw-text-opacity,1))}.text-emerald-300{--tw-text-opacity:1;color:rgb(110 231 183/var(--tw-text-opacity,1))}.text-emerald-700{--tw-text-opacity:1;color:rgb(4 120 87/var(--tw-text-opacity,1))}.text-ink{--tw-text-opacity:1;color:rgb(23 32 51/var(--tw-text-opacity,1))}.text-primary{--tw-text-opacity:1;color:rgb(56 102 255/var(--tw-text-opacity,1))}.text-slate-300{--tw-text-opacity:1;color:rgb(210 210 217/var(--tw-text-opacity,1))}.text-slate-400{--tw-text-opacity:1;color:rgb(156 156 166/var(--tw-text-opacity,1))}.text-slate-500{--tw-text-opacity:1;color:rgb(108 108 118/var(--tw-text-opacity,1))}.text-slate-600{--tw-text-opacity:1;color:rgb(78 78 88/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-white\/30{color:hsla(0,0%,100%,.3)}.text-white\/40{color:hsla(0,0%,100%,.4)}.text-white\/50{color:hsla(0,0%,100%,.5)}.text-white\/60{color:hsla(0,0%,100%,.6)}.text-white\/70{color:hsla(0,0%,100%,.7)}.line-through{text-decoration-line:line-through}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-75{opacity:.75}.shadow-\[0_24px_70px_rgba\(91\2c 92\2c 226\2c 0\.18\)\]{--tw-shadow:0 24px 70px rgba(56,102,255,.18);--tw-shadow-colored:0 24px 70px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_8px_30px_rgba\(91\2c 92\2c 226\2c 0\.45\)\]{--tw-shadow:0 8px 30px rgba(56,102,255,.45);--tw-shadow-colored:0 8px 30px var(--tw-shadow-color)}.shadow-\[0_8px_30px_rgba\(91\2c 92\2c 226\2c 0\.45\)\],.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-xl{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.blur-3xl{--tw-blur:blur(64px)}.blur-3xl,.blur-\[100px\]{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur-\[100px\]{--tw-blur:blur(100px)}.blur-\[130px\]{--tw-blur:blur(130px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-md{--tw-backdrop-blur:blur(12px)}.backdrop-blur-md,.backdrop-blur-sm{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.\[text-wrap\:balance\]{text-wrap:balance}.hover\:-translate-y-0\.5:hover{--tw-translate-y:-0.125rem}.hover\:-translate-y-0\.5:hover,.hover\:-translate-y-1:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:-translate-y-1:hover{--tw-translate-y:-0.25rem}.hover\:border-primary\/40:hover{border-color:rgba(56,102,255,.4)}.hover\:border-slate-300:hover{--tw-border-opacity:1;border-color:rgb(210 210 217/var(--tw-border-opacity,1))}.hover\:bg-primary-dark:hover{--tw-bg-opacity:1;background-color:rgb(68 69 199/var(--tw-bg-opacity,1))}.hover\:bg-white\/10:hover{background-color:hsla(0,0%,100%,.1)}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.hover\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.active\:scale-\[0\.98\]:active{--tw-scale-x:0.98;--tw-scale-y:0.98}.active\:scale-\[0\.98\]:active,.group[open] .group-open\:rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group[open] .group-open\:rotate-45{--tw-rotate:45deg}@media (min-width:640px){.sm\:flex{display:flex}.sm\:inline-flex{display:inline-flex}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:768px){.md\:col-span-2{grid-column:span 2/span 2}.md\:col-span-3{grid-column:span 3/span 3}.md\:flex{display:flex}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:gap-0{gap:0}.md\:divide-x>:not([hidden])~:not([hidden]){--tw-divide-x-reverse:0;border-right-width:calc(1px*var(--tw-divide-x-reverse));border-left-width:calc(1px*(1 - var(--tw-divide-x-reverse)))}.md\:divide-white\/10>:not([hidden])~:not([hidden]){border-color:hsla(0,0%,100%,.1)}.md\:p-4{padding:1rem}.md\:p-5{padding:1.25rem}.md\:px-6{padding-left:1.5rem;padding-right:1.5rem}.md\:py-24{padding-top:6rem;padding-bottom:6rem}.md\:pt-32{padding-top:8rem}.md\:text-3xl{font-size:1.875rem;line-height:2.25rem}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}.md\:text-5xl{font-size:3rem;line-height:1}.md\:text-\[64px\]{font-size:64px}.md\:text-lg{font-size:1.125rem;line-height:1.75rem}}@media (min-width:1024px){.lg\:block{display:block}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}.cp-sec{padding:78px 20px}@media(min-width:768px){.cp-sec{padding:62px 20px}}
.cp-wrap{max-width:1080px;margin:0 auto}
.cp-wrap--large{max-width:980px}
.cp-eyebrow{text-align:center;font-size:12px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:#3866ff;margin:0 0 12px}
.cp-h2{text-align:center;font-size:clamp(26px,4vw,40px);font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:0 0 14px;text-wrap:balance}
.cp-lead{text-align:center;max-width:640px;margin:0 auto 48px;font-size:16.5px;line-height:1.6}
.cp-dark{background:#050506;color:#fff}.cp-dark .cp-lead{color:rgba(255,255,255,.58)}
.cp-light{background:#fff;color:#0f0f14}.cp-light .cp-lead{color:#6c6c76}
.cp-soft{background:#fafafa;color:#0f0f14}.cp-soft .cp-lead{color:#6c6c76}
.cp-dark .cp-eyebrow{color:#93b4ff}

.cp-demo{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:920px){.cp-demo{grid-template-columns:330px 1fr;align-items:start}}
.cp-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.cp-step{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;padding:13px 15px;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:inherit;font:inherit;cursor:pointer;transition:border-color .25s,background .25s}
.cp-step[aria-current="true"]{border-color:#3866ff;background:rgba(56,102,255,.16)}
.cp-step b{display:block;font-size:14.5px;font-weight:700}
.cp-step span{display:block;font-size:12.5px;opacity:.55;margin-top:2px}
.cp-num{flex:none;width:23px;height:23px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:800;margin-top:1px}
.cp-step[aria-current="true"] .cp-num{background:#3866ff;color:#fff}
.cp-screen{position:relative;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:#0d0d11;min-height:360px;overflow:hidden}
.cp-pane{position:absolute;inset:0;padding:24px;opacity:0;transform:translateY(12px);transition:opacity .45s ease,transform .45s ease;pointer-events:none}
.cp-pane.on{opacity:1;transform:none;pointer-events:auto}
.cp-tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#93b4ff;margin-bottom:12px}
.cp-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px;border-radius:11px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);margin-bottom:8px;font-size:13.5px}
.cp-row b{font-weight:700}
.cp-row em{font-style:normal;opacity:.5;font-size:12.5px}
.cp-chip{font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:99px;background:rgba(56,102,255,.28);color:#c2d7ff}
.cp-chip.ok{background:rgba(16,185,129,.2);color:#6ee7b7}
.cp-quote{padding:13px 15px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font-size:14px;line-height:1.55}
.cp-mark{background:rgba(56,102,255,.45);border-radius:4px;padding:1px 4px}
.cp-arrow{text-align:center;font-size:20px;color:#93b4ff;margin:12px 0}

.cp-cols{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:820px){.cp-cols.c2{grid-template-columns:1fr 1fr}.cp-cols.c3{grid-template-columns:repeat(3,1fr)}}
.cp-card{border-radius:18px;padding:24px;border:1px solid #e5e8ee;background:#fff}
.cp-dark .cp-card{border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.04)}
.cp-card h3{font-size:17px;font-weight:800;margin:0 0 8px}
.cp-card p{font-size:14.5px;line-height:1.6;margin:0;color:#6c6c76}
.cp-dark .cp-card p{color:rgba(255,255,255,.58)}

.cp-time{list-style:none;margin:0;padding:0;max-width:760px;margin-left:auto;margin-right:auto}
.cp-time li{display:grid;grid-template-columns:76px 1fr;gap:18px;padding:0 0 30px;position:relative}
.cp-time li:before{content:"";position:absolute;left:87px;top:26px;bottom:0;width:1px;background:#e2e8f0}
.cp-time li:last-child{padding-bottom:0}.cp-time li:last-child:before{display:none}
.cp-hour{font-size:15px;font-weight:800;color:#3866ff;text-align:right;padding-top:2px;position:relative}
.cp-hour:after{content:"";position:absolute;right:-16px;top:6px;width:9px;height:9px;border-radius:50%;background:#3866ff}
.cp-time h3{font-size:16.5px;font-weight:800;margin:0 0 5px}
.cp-time p{font-size:14.5px;line-height:1.6;color:#6c6c76;margin:0}

.lo-grid{display:grid;gap:34px;grid-template-columns:minmax(0,1fr);align-items:stretch}.lo-grid>*{min-width:0}.lo-eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 16px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#90909a}.lo-eyebrow b{color:#3866ff}.lo-eyebrow i{flex:1;max-width:130px;height:1px;background:#dfe3ea}.lo-h2{font-size:clamp(32px,4.6vw,50px);font-weight:800;letter-spacing:-.038em;line-height:1.06;margin:0 0 16px;color:#0f0f14}.lo-lead{margin:0 0 28px;font-size:16.5px;line-height:1.6;color:#6c6c76;max-width:520px}.lo-items{margin:0}.lo-grp+.lo-grp{margin-top:22px}.lo-grp-t{margin:0 0 10px;padding-left:2px;font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:#aab3c2}.lo-pills{display:grid;grid-template-columns:1fr;gap:9px}.lo-it{display:flex;align-items:center;gap:10px;padding:11px 17px 11px 13px;border:1px solid #e3e7ef;border-radius:999px;background:#fff;cursor:pointer;user-select:none;transition:border-color .18s ease,background .18s ease,box-shadow .18s ease}.lo-it:hover{border-color:#c9cdf7}.lo-it.on{border-color:#c6c8fa;background:#f6f6fe;box-shadow:0 1px 2px rgba(56,102,255,.08)}.lo-it input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.lo-tick{flex:none;width:20px;height:20px;border-radius:50%;border:1.5px solid #d3d8e2;background:#fff;position:relative;transition:border-color .18s ease,background .18s ease}.lo-it.on .lo-tick{border-color:#3866ff;background:#3866ff}.lo-it.on .lo-tick:after{content:"";position:absolute;left:6.5px;top:3px;width:4px;height:8.5px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(43deg)}.lo-name{flex:1;min-width:0;font-size:14px;font-weight:700;color:#54545e;transition:color .18s ease}.lo-it.on .lo-name{color:#0f0f14}.lo-val{flex:none;font-size:13px;font-weight:600;color:#9b9ba4;white-space:nowrap;font-variant-numeric:tabular-nums;transition:color .18s ease}.lo-it.on .lo-val{text-decoration:line-through;text-decoration-thickness:1.5px;color:#93b4ff}@media(min-width:600px){.lo-pills{grid-template-columns:1fr 1fr}}@media(max-width:420px){.lo-it{padding:10px 13px 10px 11px;gap:8px}.lo-name{font-size:13.5px}.lo-val{font-size:12px}}.lo-panel{display:flex;flex-direction:column;padding:26px;border-radius:26px;background:linear-gradient(168deg,#141418,#0c0c0f 58%,#070708);box-shadow:0 30px 70px -30px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.05)}.lo-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 6px;font-size:14.5px;color:hsla(0,0%,100%,.62)}.lo-row+.lo-row{border-top:1px solid hsla(0,0%,100%,.08)}.lo-row b{font-size:17px;font-weight:800;color:#fff;white-space:nowrap}.lo-row b.lo-eur-val{color:#93b4ff}.lo-box{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:20px 0 0;padding:30px 18px;border-radius:20px;text-align:center;background:linear-gradient(180deg,rgba(56,102,255,.2),rgba(56,102,255,.04));border:1px solid rgba(147,180,255,.2)}.lo-box-lb{margin:0;font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#93b4ff}.lo-box-n{margin:10px 0 8px;font-size:clamp(54px,8.6vw,92px);font-weight:800;letter-spacing:-.04em;line-height:1;color:#fff;font-variant-numeric:tabular-nums}.lo-box-sub{margin:0;max-width:270px;font-size:14px;color:hsla(0,0%,100%,.55)}.lo-box-sub b{color:#fff;font-weight:700}.lo-cta{display:flex;align-items:center;justify-content:center;gap:9px;margin:18px 0 0;min-height:56px;padding:0 20px;border-radius:999px;font-size:15.5px;font-weight:800;color:#fff;text-decoration:none;background:linear-gradient(135deg,#6e8bff,#3866ff 52%,#2b4fe0);box-shadow:0 10px 32px rgba(56,102,255,.42);transition:transform .18s ease,box-shadow .18s ease}.lo-cta:hover{transform:translateY(-1px);box-shadow:0 14px 40px rgba(56,102,255,.55)}.lo-cta svg{width:17px;height:17px;flex:none}.lo-note{margin:12px 0 0;text-align:center;font-size:12.5px;color:hsla(0,0%,100%,.42)}@media(min-width:1000px){.lo-grid{grid-template-columns:minmax(0,1fr) 400px;gap:54px}.lo-panel{padding:26px}}.cp-punch{max-width:720px;margin:44px auto 0;text-align:center;font-size:clamp(19px,2.6vw,25px);font-weight:800;line-height:1.4;letter-spacing:-.01em;text-wrap:balance}
.cp-punch span{color:#3866ff}

.cp-founder{display:grid;gap:26px;grid-template-columns:1fr;max-width:880px;margin:0 auto;align-items:center}
@media(min-width:760px){.cp-founder{grid-template-columns:190px 1fr}}
.cp-face{width:170px;height:170px;border-radius:22px;background:linear-gradient(150deg,rgba(56,102,255,.35),rgba(147,180,255,.15));border:1px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;font-size:38px;font-weight:800;color:#c2d7ff;margin:0 auto;overflow:hidden}
.cp-face img{width:100%;height:100%;object-fit:cover}
.cp-founder p{font-size:15.5px;line-height:1.68;margin:0 0 13px}
.cp-sign{font-weight:800;font-size:15px}

.cp-streak{display:flex;gap:7px;justify-content:center;margin:0 0 8px}
.cp-streak i{width:26px;height:34px;border-radius:7px;background:rgba(56,102,255,.22);display:block}
.cp-streak i.on{background:#3866ff}
.cp-streak i.off{background:rgba(255,255,255,.08)}
.cp-step .cp-num{display:flex}
.cp-step .cp-txt{display:block}
.cp-soft .cp-face,.cp-light .cp-face{background:linear-gradient(150deg,rgba(56,102,255,.16),rgba(147,180,255,.12));border-color:#e5e8ee;color:#3866ff}
.cp-dark .cp-punch span{color:#93b4ff}
.cp-light .cp-row,.cp-soft .cp-row,.cp-light .cp-quote,.cp-soft .cp-quote{background:#f1f5f9;border-color:#e2e8f0}
.cp-screen{border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.14);background:#fff;min-height:436px;box-shadow:0 24px 60px rgba(5,8,20,.45)}
.cp-topbar{display:flex;align-items:center;gap:7px;padding:9px 13px;background:#f1f1f4;border-bottom:1px solid #e4e4e9}
.cp-dot{width:9px;height:9px;border-radius:50%;flex:none}
.cp-url{flex:1;text-align:center;font-size:11px;color:#90909a;background:#fff;border-radius:6px;padding:3px 0;border:1px solid #e5e5ea;margin-left:6px}
.cp-app{display:flex;min-height:390px}
.cp-nav{flex:none;width:134px;background:#17171b;padding:14px 10px;display:none}
@media(min-width:640px){.cp-nav{display:block}}
.cp-logo{display:flex;align-items:center;gap:7px;color:#fff;font-weight:800;font-size:13.5px;margin:0 4px 15px}
.cp-logo svg,.cp-logo img{width:23px;height:23px;color:#6f95ff}
.cp-navi{display:block;padding:7px 10px;border-radius:8px;font-size:12px;font-weight:600;color:rgba(255,255,255,.5);margin-bottom:3px}
.cp-navi.on{background:rgba(255,255,255,.13);color:#fff;font-weight:700}
.cp-body{position:relative;flex:1;background:#f7f7f9;min-width:0}
.cp-pane{position:absolute;inset:0;padding:16px 18px;opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .4s ease;pointer-events:none;overflow:auto;color:#0f0f14}
.cp-pane.on{opacity:1;transform:none;pointer-events:auto}
.cp-eye{font-size:10px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:#90909a;margin:0 0 4px}
.cp-title{font-size:17px;font-weight:800;letter-spacing:-.01em;margin:0 0 13px}
.cp-title small{font-weight:600;font-size:13px;color:#90909a}
.cp-badge{float:right;font-size:10.5px;font-weight:800;padding:3px 10px;border-radius:99px;background:#e8f8f0;color:#12805a}
.cp-card{background:#fff;border:1px solid #e7e7ec;border-radius:12px;padding:14px}
.cp-card+.cp-card{margin-top:9px}
.cp-grid{display:grid;gap:9px;grid-template-columns:1fr}
@media(min-width:820px){.cp-grid.g2{grid-template-columns:1.45fr 1fr}}
.cp-form{display:flex;gap:9px;align-items:flex-end;flex-wrap:wrap;background:#fff;border:1px solid #e7e7ec;border-radius:12px;padding:12px}
.cp-field{flex:1 1 130px;min-width:0}
.cp-field.sm{flex:0 0 76px}
.cp-field label{display:block;font-size:10.5px;font-weight:700;color:#90909a;margin-bottom:5px}
.cp-input{min-height:34px;display:flex;align-items:center;padding:0 9px;border-radius:8px;background:#fff;border:1px solid #e4e4e9;font-size:12.5px;color:#0f0f14}
.cp-chip-naf{display:inline-flex;gap:6px;align-items:center;padding:3px 8px;border-radius:6px;background:#e9f1ff;color:#2c50d8;font-size:11.5px;font-weight:700;white-space:nowrap;overflow:hidden}
.cp-chip-naf em{font-style:normal;opacity:.6;font-weight:500}
.cp-btn{flex:none;min-height:34px;padding:0 15px;border:none;border-radius:8px;background:#3866ff;color:#fff;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;transition:background .2s,transform .12s}
.cp-btn:hover{background:#2c50d8}
.cp-btn:active{transform:scale(.97)}
.cp-btn.ghost{background:#f0f0f3;color:#46464f}
.cp-btn.ghost:hover{background:#e6e6eb}
.cp-btn[disabled]{opacity:.55;cursor:default;transform:none}
.cp-res{margin-top:11px}
.cp-res-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:10.5px;color:#98a2b3;margin-bottom:8px}
.cp-res-head b{font-size:13px;color:#0f0f14;font-weight:800}
.cp-line{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;background:#fff;border:1px solid #e7e7ec;margin-bottom:6px;font-size:12.5px;opacity:0;transform:translateY(7px);transition:opacity .32s ease,transform .32s ease}
.cp-line.in{opacity:1;transform:none}
.cp-line em{font-style:normal;color:#98a2b3}
.cp-chip{font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:99px;background:#e9f1ff;color:#2c50d8;white-space:nowrap}
.cp-chip.ok{background:#e8f8f0;color:#12805a}
.cp-ta{width:100%;min-height:70px;resize:none;border-radius:10px;background:#fff;border:1px solid #e4e4e9;color:#63636d;font:inherit;font-size:11.5px;line-height:1.55;padding:10px;margin-bottom:9px;white-space:pre;overflow:auto}
.cp-name{font-size:17px;font-weight:800;margin:0 0 3px}
.cp-meta{font-size:12px;color:#90909a;margin:0 0 11px}
.cp-tel{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:9px;background:#3866ff;color:#fff;font-size:13.5px;font-weight:700;margin-bottom:11px}
.cp-script{padding:10px 12px;border-radius:9px;background:#f7f7f9;border:1px solid #e7e7ec;font-size:11.5px;line-height:1.55;color:#46464f;margin-bottom:11px}
.cp-acts{display:flex;gap:7px;flex-wrap:wrap}
.cp-act{flex:1 1 0;min-height:34px;border-radius:9px;border:1px solid #e3e8ef;background:#fff;color:#4a5568;font:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:.18s}
.cp-act:hover{border-color:#c9d1de}
.cp-act.ok{background:#f2fbf6;border-color:#cdeedd;color:#12805a}
.cp-act.warn{background:#fffbf0;border-color:#f7e7bd;color:#a5730a}
.cp-act.done{box-shadow:0 0 0 2px rgba(56,102,255,.35)}
.cp-side{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#63636d}
.cp-side b{font-size:18px;color:#0f0f14}
.cp-ring{width:34px;height:34px;border-radius:50%;border:4px solid #e6e9f2;border-top-color:#3866ff;border-right-color:#3866ff}
.cp-wave{display:flex;align-items:center;gap:3px;height:32px;margin-bottom:10px}
.cp-wave i{flex:1;background:#c2d7ff;border-radius:2px;height:20%}
.cp-wave.play i{animation:cpw .95s ease-in-out infinite;background:#3866ff}
.cp-wave.play i:nth-child(3n){animation-delay:.18s}
.cp-wave.play i:nth-child(3n+1){animation-delay:.36s}
.cp-wave.play i:nth-child(5n){animation-delay:.52s}
@keyframes cpw{0%,100%{height:16%}50%{height:88%}}
.cp-note{font-size:11.5px;color:#90909a;margin:10px 0 0;line-height:1.5}
.cp-quote-app{font-style:italic;color:#63636d;font-size:12px;margin:0 0 6px}
.cp-ok-txt{color:#12805a;font-weight:700;font-size:12.5px}
.cp-mark{background:#dbe7ff;color:#3535a8;border-radius:4px;padding:1px 4px;font-weight:700}
.cp-hint{text-align:center;font-size:12px;color:rgba(255,255,255,.4);margin-top:16px}
.cp-hint b{color:rgba(255,255,255,.72)}
.cp-bars{display:flex;gap:4px;align-items:flex-end;height:36px;margin-top:8px}
.cp-bars i{flex:1;background:#dbe7ff;border-radius:3px 3px 0 0}
.cp-bars i.hi{background:#3866ff}
.cp-wrap.wide{max-width:1200px}
.cp-demo{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:980px){.cp-demo{grid-template-columns:296px 1fr;align-items:start}}
.cp-screen{border-radius:16px;overflow:hidden;border:0;background:#f7f7f9;min-height:474px;box-shadow:0 34px 80px rgba(4,7,18,.55)}
.cp-topbar{display:flex;align-items:center;gap:7px;padding:9px 13px;background:#e9edf4;border-bottom:1px solid #dde3ec}
.cp-dot{width:9px;height:9px;border-radius:50%;flex:none}
.cp-url{flex:1;text-align:center;font-size:11px;color:#90909a;background:#fff;border-radius:6px;padding:3px 0;border:1px solid #e5e5ea;margin-left:6px}
.cp-app{display:flex;min-height:428px}
.cp-nav{flex:none;width:138px;background:#17171b;padding:15px 10px;display:none}
@media(min-width:640px){.cp-nav{display:block}}
.cp-logo{display:flex;align-items:center;gap:7px;color:#fff;font-weight:800;font-size:13.5px;margin:0 4px 16px}
.cp-logo svg,.cp-logo img{width:23px;height:23px;color:#6f95ff}
.cp-navi{display:block;padding:8px 10px;border-radius:8px;font-size:12px;font-weight:600;color:rgba(255,255,255,.48);margin-bottom:3px;transition:.25s}
.cp-navi.on{background:rgba(255,255,255,.13);color:#fff;font-weight:700}
.cp-body{position:relative;flex:1;background:#f7f7f9;min-width:0}
.cp-pane{position:absolute;inset:0;background:#f7f7f9;padding:18px 20px;opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .4s ease;pointer-events:none;color:#0f0f14;overflow:hidden}
.cp-pane.on{opacity:1;transform:none;pointer-events:auto}
.cp-eye{font-size:10px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:#90909a;margin:0 0 4px}
.cp-title{font-size:17px;font-weight:800;letter-spacing:-.01em;margin:0 0 14px}
.cp-title small{font-weight:600;font-size:13px;color:#90909a}
.cp-badge{float:right;font-size:10.5px;font-weight:800;padding:3px 10px;border-radius:99px;background:#e8f8f0;color:#12805a}
.cp-card{background:#fff;border:1px solid #e7e7ec;border-radius:12px;padding:14px}
.cp-card+.cp-card{margin-top:9px}
.cp-grid{display:grid;gap:9px;grid-template-columns:1fr}
@media(min-width:860px){.cp-grid.g2{grid-template-columns:1.5fr 1fr}}
.cp-form{display:flex;gap:9px;align-items:flex-end;flex-wrap:wrap;background:#fff;border:1px solid #e7e7ec;border-radius:12px;padding:12px}
.cp-field{flex:1 1 130px;min-width:0}
.cp-field.sm{flex:0 0 76px}
.cp-field label{display:block;font-size:10.5px;font-weight:700;color:#90909a;margin-bottom:5px}
.cp-input{min-height:34px;display:flex;align-items:center;padding:0 9px;border-radius:8px;background:#fff;border:1px solid #e4e4e9;font-size:12.5px}
.cp-chip-naf{display:inline-flex;gap:6px;align-items:center;padding:3px 8px;border-radius:6px;background:#e9f1ff;color:#2c50d8;font-size:11.5px;font-weight:700;white-space:nowrap;overflow:hidden}
.cp-chip-naf em{font-style:normal;opacity:.6;font-weight:500}
.cp-btn{flex:none;min-height:34px;padding:0 15px;border:none;border-radius:8px;background:#3866ff;color:#fff;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;transition:background .2s,transform .12s}
.cp-btn:hover{background:#2c50d8}
.cp-btn:active{transform:scale(.97)}
.cp-btn.ghost{background:#f0f0f3;color:#46464f}
.cp-btn.ghost:hover{background:#e6e6eb}
.cp-btn[disabled]{opacity:.5;cursor:default;transform:none}
.cp-res{margin-top:11px}
.cp-res-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:10.5px;color:#98a2b3;margin-bottom:8px}
.cp-res-head b{font-size:13px;color:#0f0f14;font-weight:800}
.cp-line{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;background:#fff;border:1px solid #e7e7ec;margin-bottom:6px;font-size:12.5px;opacity:0;transform:translateY(7px);transition:opacity .32s ease,transform .32s ease}
.cp-line.in{opacity:1;transform:none}
.cp-line em{font-style:normal;color:#98a2b3}
.cp-chip{font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:99px;background:#e9f1ff;color:#2c50d8;white-space:nowrap}
.cp-chip.ok{background:#e8f8f0;color:#12805a}
.cp-name{font-size:17px;font-weight:800;margin:0 0 3px}
.cp-meta{font-size:12px;color:#90909a;margin:0 0 11px}
.cp-tel{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:9px;background:#3866ff;color:#fff;font-size:13.5px;font-weight:700;margin-bottom:11px}
.cp-script{padding:10px 12px;border-radius:9px;background:#f7f7f9;border:1px solid #e7e7ec;font-size:11.5px;line-height:1.55;color:#46464f;margin-bottom:11px}
.cp-acts{display:flex;gap:7px;flex-wrap:wrap}
.cp-act{flex:1 1 0;min-height:34px;border-radius:9px;border:1px solid #e3e8ef;background:#fff;color:#4a5568;font:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:.18s}
.cp-act:hover{border-color:#c9d1de}
.cp-act.ok{background:#f2fbf6;border-color:#cdeedd;color:#12805a}
.cp-act.warn{background:#fffbf0;border-color:#f7e7bd;color:#a5730a}
.cp-act.done{box-shadow:0 0 0 2px rgba(56,102,255,.35)}
.cp-wave{display:flex;align-items:center;gap:3px;height:30px;margin-bottom:10px}
.cp-wave i{flex:1;background:#c2d7ff;border-radius:2px;height:20%}
.cp-wave.play i{animation:cpw .95s ease-in-out infinite;background:#3866ff}
.cp-wave.play i:nth-child(3n){animation-delay:.18s}
.cp-wave.play i:nth-child(3n+1){animation-delay:.36s}
@keyframes cpw{0%,100%{height:16%}50%{height:88%}}
.cp-note{font-size:11.5px;color:#90909a;margin:10px 0 0;line-height:1.5}
.cp-quote-app{font-style:italic;color:#63636d;font-size:12.5px;line-height:1.6;margin:0 0 10px}
.cp-mark{background:#dbe7ff;color:#3535a8;border-radius:4px;padding:1px 4px;font-weight:700;font-style:normal}
.cp-hint{text-align:center;font-size:12px;color:rgba(255,255,255,.38);margin-top:16px}
.cp-hint b{color:rgba(255,255,255,.7)}
.cp-pipe{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media(max-width:560px){.cp-pipe{grid-template-columns:repeat(2,1fr)}}
.cp-col{background:#f1f1f4;border-radius:10px;padding:8px;min-height:132px}
.cp-col h5{margin:0 0 7px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#90909a;display:flex;justify-content:space-between;gap:4px}
.cp-col h5 em{font-style:normal;color:#63636d}
.cp-mini{background:#fff;border:1px solid #e7e7ec;border-radius:8px;padding:7px 8px;margin-bottom:6px;font-size:11.5px;font-weight:700;line-height:1.3}
.cp-mini span{display:block;font-weight:500;color:#98a2b3;font-size:10.5px;margin-top:2px}
.cp-mini.moved{box-shadow:0 0 0 2px rgba(56,102,255,.45);border-color:#c2d7ff}
.cp-bars{display:flex;gap:6px;align-items:flex-end;height:74px;margin:4px 0 6px}
.cp-bars i{flex:1;background:#d9dbfb;border-radius:4px 4px 0 0;height:6%;transition:height .55s cubic-bezier(.22,1,.36,1)}
.cp-bars i.hi{background:#3866ff}
.cp-days{display:flex;gap:6px}
.cp-days span{flex:1;text-align:center;font-size:10px;color:#98a2b3;font-weight:700}
.cp-kpi{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:9px}
.cp-kpi div{flex:1 1 90px;background:#fff;border:1px solid #e7e7ec;border-radius:10px;padding:10px 12px}
.cp-kpi b{display:block;font-size:19px;font-weight:800;letter-spacing:-.02em}
.cp-kpi span{font-size:10.5px;color:#90909a;font-weight:600}
.cp-screen{min-height:524px}
.cp-app{min-height:478px}
.cp-pane{overflow:auto}
.cp-bars{height:60px}
.cp-kpi b{font-size:18px}
@media(max-width:639px){.cp-app{min-height:548px}.cp-screen{min-height:594px}}
@media(max-width:639px){.cp-app{min-height:576px}.cp-screen{min-height:622px}}
.cp-screen{display:flex;flex-direction:column}
.cp-app{flex:1 1 auto}
.cp-nav{background:#17171b}
.cp-screen{min-height:0}
@media(max-width:639px){.cp-screen{min-height:0}}#cpScreen .cp-card,.et-shot .cp-card{background:#fff;border:1px solid #e7e7ec}#cpScreen .cp-card p,.et-shot .cp-card p{color:#46464f}#cpScreen .cp-card h3,.et-shot .cp-card h3{color:#0f0f14}#cpScreen .cp-eye,.et-shot .cp-eye{color:#90909a}#cpScreen .cp-name,.et-shot .cp-name{color:#0f0f14}#cpScreen .cp-meta,.et-shot .cp-meta{color:#90909a}#cpScreen .cp-note,.et-shot .cp-note{color:#90909a}#cpScreen .cp-quote-app,.et-shot .cp-quote-app{color:#63636d}#cpScreen .cp-title,.et-shot .cp-title{color:#0f0f14}#cpScreen .cp-line,.et-shot .cp-line{color:#0f0f14;background:#fff}#cpScreen .cp-mini,.et-shot .cp-mini{color:#0f0f14;background:#fff}#cpScreen .cp-card p.cp-eye,.et-shot .cp-card p.cp-eye{color:#90909a}#cpScreen .cp-card p.cp-name,.et-shot .cp-card p.cp-name{color:#0f0f14}#cpScreen .cp-card p.cp-meta,.et-shot .cp-card p.cp-meta{color:#90909a}#cpScreen p.cp-note,.et-shot p.cp-note{color:#90909a}#cpScreen p.cp-quote-app,.et-shot p.cp-quote-app{color:#63636d}#cpScreen .cp-col h5,.et-shot .cp-col h5{color:#90909a}
.cp-pipe{position:relative}
.cp-cursor{position:absolute;left:0;top:0;width:19px;height:19px;opacity:0;pointer-events:none;z-index:6;filter:drop-shadow(0 2px 5px rgba(10,15,35,.35))}#cpScreen .cp-mini,.et-shot .cp-mini{position:relative}#cpScreen .cp-mini.grab,.et-shot .cp-mini.grab{box-shadow:0 10px 24px rgba(15,20,40,.22);z-index:5;border-color:#c2d7ff}#cpScreen .cp-col,.et-shot .cp-col{transition:background .4s ease,box-shadow .4s ease}#cpScreen .cp-col.drop,.et-shot .cp-col.drop{background:#ecedfd;box-shadow:inset 0 0 0 2px #c2c3fb}#cpScreen .cp-mini,.et-shot .cp-mini{transition:transform 1s cubic-bezier(.22,1,.36,1),box-shadow .4s ease,border-color .4s ease}#cpScreen .cp-mini.grab,.et-shot .cp-mini.grab{box-shadow:0 18px 34px rgba(15,20,40,.24);z-index:6;border-color:#c2c3fb}#cpScreen .cp-mini.moved,.et-shot .cp-mini.moved{animation:cpPop .75s cubic-bezier(.22,1,.36,1)}
@keyframes cpPop{0%{box-shadow:0 0 0 0 rgba(56,102,255,.5)}100%{box-shadow:0 0 0 10px rgba(56,102,255,0)}}#cpScreen .cp-col h5 em,.et-shot .cp-col h5 em{display:inline-block}#cpScreen .cp-col h5 em.bump,.et-shot .cp-col h5 em.bump{animation:cpBump .6s cubic-bezier(.22,1,.36,1)}
@keyframes cpBump{0%{transform:scale(1)}35%{transform:scale(1.45);color:#3866ff}100%{transform:scale(1)}}
.cp-cursor{transition:transform 1.02s cubic-bezier(.22,1,.36,1),opacity .38s ease}#cpScreen .cp-col,.et-shot .cp-col{min-height:150px}
.cp-app{min-height:556px}
@media(max-width:639px){.cp-app{min-height:648px}}#cpScreen .cp-chat,.et-shot .cp-chat{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid #e7e7ec;border-radius:12px;padding:14px;min-height:198px}#cpScreen .cp-ask,.et-shot .cp-ask{align-self:flex-end;max-width:80%;background:#3866ff;color:#fff;border-radius:13px 13px 4px 13px;padding:9px 12px;font-size:12.5px;line-height:1.5;font-weight:600}#cpScreen .cp-answer,.et-shot .cp-answer{align-self:flex-start;max-width:93%;background:#f4f4f7;color:#46464f;border:1px solid #e9e9ee;border-radius:13px 13px 13px 4px;padding:10px 12px;font-size:12.5px;line-height:1.6}#cpScreen .cp-bubble,.et-shot .cp-bubble{opacity:0;transform:translateY(9px);transition:opacity .4s ease,transform .55s cubic-bezier(.22,1,.36,1)}#cpScreen .cp-bubble.in,.et-shot .cp-bubble.in{opacity:1;transform:none}#cpScreen .cp-typing,.et-shot .cp-typing{align-self:flex-start;display:flex;align-items:center;gap:4px;padding:11px 13px;background:#f4f4f7;border:1px solid #e9e9ee;border-radius:13px;opacity:0;transition:opacity .25s ease}#cpScreen .cp-typing.in,.et-shot .cp-typing.in{opacity:1}#cpScreen .cp-typing i,.et-shot .cp-typing i{width:6px;height:6px;border-radius:50%;background:#a8b0c2;animation:cpTy 1.15s infinite}#cpScreen .cp-typing i:nth-child(2),.et-shot .cp-typing i:nth-child(2){animation-delay:.16s}#cpScreen .cp-typing i:nth-child(3),.et-shot .cp-typing i:nth-child(3){animation-delay:.32s}
@keyframes cpTy{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}#cpScreen .cp-sugg,.et-shot .cp-sugg{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}#cpScreen .cp-qbtn,.et-shot .cp-qbtn{border:1px solid #d9def0;background:#fff;color:#2c50d8;border-radius:99px;padding:6px 12px;font:inherit;font-size:11.5px;font-weight:700;cursor:pointer;transition:background .2s,border-color .2s}#cpScreen .cp-qbtn:hover,.et-shot .cp-qbtn:hover{background:#e9f1ff;border-color:#c2c3fb}
.cp-app{min-height:584px}
@media(max-width:639px){.cp-app{min-height:672px}}
@media(max-width:639px){.cp-app{min-height:712px}#cpScreen .cp-pane,.et-shot .cp-pane{padding:14px}#cpScreen .cp-title,.et-shot .cp-title{margin-bottom:10px}#cpScreen .cp-form,.et-shot .cp-form{padding:10px}#cpScreen .cp-pane[data-i="0"] .cp-res .cp-line:last-child,.et-shot .cp-pane[data-i="0"] .cp-res .cp-line:last-child{display:none}}#cpScreen .cp-chat,.et-shot .cp-chat{min-height:176px}

/* le coin bas-gauche de la barre laterale doit epouser le cadre, sinon le fond clair du cadre reste visible dans l arrondi */
.cp-nav{border-bottom-left-radius:16px}
/* le fond clair du cadre bavait d un pixel le long de l arrondi, sous la barre laterale sombre.
   la topbar et l app couvrent deja 100% de la surface : ce fond ne servait a rien. */
.cp-screen{background:transparent}#cpScreen .cp-grid,.et-shot .cp-grid{position:relative}#cpScreen [data-prospect],.et-shot [data-prospect]{transition:transform .55s cubic-bezier(.22,1,.36,1),opacity .45s ease}#cpScreen [data-prospect].cp-enter,.et-shot [data-prospect].cp-enter{transform:translateX(24px);opacity:0}#cpScreen [data-prospect].cp-out,.et-shot [data-prospect].cp-out{transform:translateX(-24px);opacity:0}#cpScreen [data-rdv],.et-shot [data-rdv]{display:inline-block}#cpScreen [data-rdv].bump,.et-shot [data-rdv].bump{animation:cpBump .6s cubic-bezier(.22,1,.36,1)}#cpScreen .cp-rec,.et-shot .cp-rec{display:none;align-items:center;gap:7px;margin:-3px 0 11px;font-size:11.5px;font-weight:700;color:#b3261e}#cpScreen .cp-rec.on,.et-shot .cp-rec.on{display:flex}#cpScreen .cp-rec i,.et-shot .cp-rec i{width:8px;height:8px;border-radius:50%;background:#e5484d;animation:cpRec 1.15s infinite}
@keyframes cpRec{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.8)}}#cpScreen .cp-tel,.et-shot .cp-tel{transition:background .3s ease,box-shadow .3s ease}#cpScreen .cp-tel.rec,.et-shot .cp-tel.rec{background:#3f40b8;box-shadow:0 0 0 4px rgba(56,102,255,.22)}
.cp-app{min-height:610px}
@media(max-width:639px){.cp-app{min-height:740px}}#cpScreen .cp-recbox,.et-shot .cp-recbox{display:flex;align-items:center;gap:9px;background:#f7f7f9;border:1px solid #e7e7ec;border-radius:10px;padding:7px 10px;margin:0 0 11px}#cpScreen .cp-recbtn,.et-shot .cp-recbtn{flex:none;width:26px;height:26px;border-radius:50%;border:none;background:#e5484d;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:box-shadow .3s ease}#cpScreen .cp-recbtn span,.et-shot .cp-recbtn span{width:9px;height:9px;border-radius:50%;background:#fff;display:block;transition:border-radius .25s ease,width .25s ease,height .25s ease}#cpScreen .cp-recbox.on .cp-recbtn span,.et-shot .cp-recbox.on .cp-recbtn span{border-radius:2px;width:8px;height:8px}#cpScreen .cp-recbox.on .cp-recbtn,.et-shot .cp-recbox.on .cp-recbtn{animation:cpRec 1.25s infinite}
@keyframes cpRec{0%,100%{box-shadow:0 0 0 0 rgba(229,72,77,.42)}70%{box-shadow:0 0 0 8px rgba(229,72,77,0)}}#cpScreen .cp-rectxt,.et-shot .cp-rectxt{flex:1;font-size:11.5px;color:#90909a;font-weight:600;line-height:1.35}#cpScreen .cp-recbox.on .cp-rectxt,.et-shot .cp-recbox.on .cp-rectxt{color:#b3261e}#cpScreen .cp-rectime,.et-shot .cp-rectime{font-size:13px;font-weight:800}
.cp-app{min-height:636px}
@media(max-width:639px){.cp-app{min-height:772px}}

/* ecran de demo : un peu plus large, un peu moins haut */
#demo .cp-wrap{max-width:1280px}
@media(min-width:980px){.cp-demo{grid-template-columns:320px 1fr}}
.cp-app{min-height:520px}
@media(max-width:639px){.cp-app{min-height:650px}}

/* panneau relances : le passage cle se surligne, puis la fiche de rappel apparait */
.cp-quote-app .cp-mark{background:none;background-image:linear-gradient(90deg,rgba(56,102,255,.4) 0,rgba(56,102,255,.4) 100%);background-repeat:no-repeat;background-size:0 100%;background-position:0 50%;color:#2b3346;font-weight:800;border-radius:4px;padding:2px 5px}.cp-quote-app.surligne .cp-mark{animation:cpMark 2.3s cubic-bezier(.35,.05,.25,1) forwards}
@keyframes cpMark{to{background-size:100% 100%}}
.cp-flow-arrow{display:flex;justify-content:center;margin:9px 0 7px;opacity:0}
.cp-flow-arrow.go{animation:cpArrow .9s cubic-bezier(.33,.06,.24,1) forwards}
@keyframes cpArrow{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.cp-flow-arrow svg{width:21px;height:21px;fill:none;stroke:#c2c6d6;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cp-line.cp-remind{transition:opacity .8s ease,transform .8s ease;display:flex;align-items:flex-start;justify-content:flex-start;gap:13px;padding:14px 15px;border-radius:15px;border:1px solid #cfe7d9;background:#fff;margin-bottom:0;font-size:inherit;box-shadow:0 1px 2px rgba(23,32,51,.04),0 12px 26px -18px rgba(23,32,51,.35)}
.cp-rem-d{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:60px;padding:9px 0;border-radius:12px;background:linear-gradient(180deg,#eff0fe,#e4e6fd);color:#5051d4}
.cp-rem-d b{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.cp-rem-d i{font-style:normal;font-size:15.5px;font-weight:800;letter-spacing:-.02em}
.cp-rem-m{flex:1;min-width:0}
.cp-rem-t{margin:1px 0 0;font-size:14px;font-weight:800;color:#0f0f14}
.cp-rem-s{margin:2px 0 0;font-size:12px;color:#6b7688}
.cp-rem-c{display:flex;align-items:center;gap:7px;margin:9px 0 0;padding:6px 9px;border-radius:8px;background:#f4f6fa;font-size:11.5px;color:#63636d}
.cp-rem-c svg{flex:none;width:13px;height:13px;fill:none;stroke:#98a2b3;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cp-rem-b{flex:none;display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:99px;background:#e7f6ee;color:#2d8b55;font-size:11px;font-weight:800;white-space:nowrap}
.cp-rem-b svg{flex:none;width:12px;height:12px;fill:none;stroke:#2d8b55;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:520px){.cp-line.cp-remind{flex-wrap:wrap}.cp-rem-b{order:3;margin-left:73px}}#cpScreen .cp-mini,.et-shot .cp-mini{will-change:transform}#cpScreen .cp-mini.grab,.et-shot .cp-mini.grab{box-shadow:0 22px 42px rgba(15,20,40,.26);border-color:#b9baf9;z-index:7}#cpScreen .cp-col.drop,.et-shot .cp-col.drop{background:#eceefe;box-shadow:inset 0 0 0 2px #c2c3fb}#cpScreen .cp-col,.et-shot .cp-col{transition:background .45s ease,box-shadow .45s ease}
.cp-cursor{will-change:transform}#cpScreen .cp-mini.moved,.et-shot .cp-mini.moved{animation:cpPop .9s cubic-bezier(.22,1,.36,1)}
@keyframes cpPop{0%{box-shadow:0 0 0 0 rgba(56,102,255,.5)}100%{box-shadow:0 0 0 12px rgba(56,102,255,0)}}
.cp-app{min-height:664px}
@media(max-width:639px){.cp-app{min-height:800px}}

/* panneau Trouver : saisie jouee a l ecran (curseur, frappe, focus) */#cpScreen .cp-form,.et-shot .cp-form{position:relative}#cpScreen .cp-input,.et-shot .cp-input{transition:border-color .25s ease,box-shadow .25s ease}#cpScreen .cp-input.focus,.et-shot .cp-input.focus{border-color:#8a8bf0;box-shadow:0 0 0 3px rgba(56,102,255,.16)}#cpScreen .cp-caret,.et-shot .cp-caret{display:none;width:1.5px;height:14px;margin-left:1px;background:#3866ff;animation:cpCaret 1s steps(1) infinite}#cpScreen .cp-input.focus .cp-caret,.et-shot .cp-input.focus .cp-caret{display:inline-block}
@keyframes cpCaret{0%,49%{opacity:1}50%,100%{opacity:0}}#cpScreen .cp-input [data-typed-metier],.et-shot .cp-input [data-typed-metier],#cpScreen .cp-input [data-typed-dep],.et-shot .cp-input [data-typed-dep]{white-space:nowrap}#cpScreen .cp-chip-naf,.et-shot .cp-chip-naf{margin-left:7px}#cpScreen .cp-chip-naf.pop,.et-shot .cp-chip-naf.pop{animation:cpNaf .4s cubic-bezier(.34,1.3,.5,1)}
@keyframes cpNaf{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}#cpScreen .cp-ptr>svg,.et-shot .cp-ptr>svg{display:block;width:100%;height:100%}#cpScreen .cp-ptr.clic>svg,.et-shot .cp-ptr.clic>svg{animation:cpClic .24s ease}
@keyframes cpClic{50%{transform:scale(.74)}}#cpScreen .cp-ptr:after,.et-shot .cp-ptr:after{content:"";position:absolute;left:1px;top:1px;width:9px;height:9px;border-radius:50%;background:rgba(56,102,255,.55);opacity:0;transform:scale(.4)}#cpScreen .cp-ptr.clic:after,.et-shot .cp-ptr.clic:after{animation:cpOnde .55s ease}
@keyframes cpOnde{0%{opacity:.7;transform:scale(.4)}100%{opacity:0;transform:scale(3.4)}}

/* pipeline : fiches plus grandes, colonnes qui remplissent la hauteur */#cpScreen .cp-pipe,.et-shot .cp-pipe{gap:10px}#cpScreen .cp-col,.et-shot .cp-col{padding:10px;min-height:376px;border-radius:12px}#cpScreen .cp-col h5,.et-shot .cp-col h5{margin:0 0 9px;font-size:10.5px}#cpScreen .cp-mini,.et-shot .cp-mini{padding:10px 11px;margin-bottom:7px;border-radius:9px;font-size:12.5px;line-height:1.35}#cpScreen .cp-mini span,.et-shot .cp-mini span{display:block;margin-top:2px;font-size:11px;font-weight:600;color:#90909a}

/* panneau Progression : semaine chiffree + curseur qui pose la question */#cpScreen .cp-pane[data-nav="progression"],.et-shot .cp-pane[data-nav="progression"]{position:absolute}#cpScreen .cp-week,.et-shot .cp-week{margin:0 0 10px;padding:12px 14px;border-radius:12px;background:#fff;border:1px solid #e7e7ec}#cpScreen .cp-week-h,.et-shot .cp-week-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px}#cpScreen .cp-week-h b,.et-shot .cp-week-h b{font-size:12px;font-weight:800;color:#0f0f14}#cpScreen .cp-week-h span,.et-shot .cp-week-h span{font-size:11px;color:#9b9ba4}#cpScreen .cp-week .cp-bars,.et-shot .cp-week .cp-bars{display:flex;gap:7px;align-items:flex-end;height:62px;margin-top:11px}#cpScreen .cp-week .cp-bars span,.et-shot .cp-week .cp-bars span{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;height:100%;justify-content:flex-end}#cpScreen .cp-week .cp-bars i,.et-shot .cp-week .cp-bars i{display:block;width:100%;min-height:3px;height:6%;border-radius:5px 5px 3px 3px;background:linear-gradient(180deg,#6e8bff,#3866ff);transition:height .8s cubic-bezier(.22,1,.36,1)}#cpScreen .cp-week .cp-bars em,.et-shot .cp-week .cp-bars em{font-style:normal;font-size:10px;font-weight:700;color:#a3adbd}#cpScreen .cp-qbtn.active,.et-shot .cp-qbtn.active{background:#e9f1ff;border-color:#a9abf5;color:#3b3cc0}

/* panneau Sprint : resume IA qui arrive apres l issue de l appel */#cpScreen .cp-sum,.et-shot .cp-sum{margin-top:9px;opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1);border-color:#dcdefb;background:linear-gradient(180deg,#fbfbff,#fff)}#cpScreen .cp-sum.in,.et-shot .cp-sum.in{opacity:1;transform:none}#cpScreen .cp-sum-h,.et-shot .cp-sum-h{display:flex;align-items:center;gap:7px;margin:0;color:#3866ff}#cpScreen .cp-sum-h svg,.et-shot .cp-sum-h svg{width:14px;height:14px;flex:none;fill:#6e8bff}#cpScreen .cp-dots,.et-shot .cp-dots{display:inline-flex;gap:3px;margin-left:2px}#cpScreen .cp-dots span,.et-shot .cp-dots span{width:4px;height:4px;border-radius:50%;background:#93b4ff;animation:cpDots 1.1s infinite}#cpScreen .cp-dots span:nth-child(2),.et-shot .cp-dots span:nth-child(2){animation-delay:.16s}#cpScreen .cp-dots span:nth-child(3),.et-shot .cp-dots span:nth-child(3){animation-delay:.32s}
@keyframes cpDots{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-2px)}}#cpScreen .cp-sum-body,.et-shot .cp-sum-body{opacity:0;transition:opacity .45s ease}#cpScreen .cp-sum-body.in,.et-shot .cp-sum-body.in{opacity:1}#cpScreen .cp-sum-l,.et-shot .cp-sum-l{margin:9px 0 0;font-size:12.5px;line-height:1.5;color:#46464f}#cpScreen .cp-sum-l b,.et-shot .cp-sum-l b{color:#0f0f14;font-weight:800}#cpScreen .cp-sum-i,.et-shot .cp-sum-i{display:flex;align-items:flex-start;gap:8px;margin:7px 0 0;font-size:11.5px;line-height:1.45;color:#63636d}#cpScreen .cp-sum-i em,.et-shot .cp-sum-i em{flex:none;font-style:normal;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#7d7ff0;background:#e9f1ff;border-radius:5px;padding:2px 6px;margin-top:1px}

/* champ metier : liste de suggestions NAF */#cpScreen .cp-field,.et-shot .cp-field{position:relative}#cpScreen .cp-sug,.et-shot .cp-sug{position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:7;background:#fff;border:1px solid #dfe4ee;border-radius:9px;box-shadow:0 14px 30px -12px rgba(15,20,40,.28);overflow:hidden;opacity:0;transform:translateY(-5px);transition:opacity .22s ease,transform .22s ease}#cpScreen .cp-sug.in,.et-shot .cp-sug.in{opacity:1;transform:none}#cpScreen .cp-sug-i,.et-shot .cp-sug-i{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 11px;font-size:12px;cursor:pointer;transition:background .18s ease}#cpScreen .cp-sug-i+.cp-sug-i,.et-shot .cp-sug-i+.cp-sug-i{border-top:1px solid #f0f2f7}#cpScreen .cp-sug-i b,.et-shot .cp-sug-i b{font-weight:700;color:#0f0f14}#cpScreen .cp-sug-i em,.et-shot .cp-sug-i em{font-style:normal;font-size:11px;font-weight:700;color:#90909a}#cpScreen .cp-sug-i.sel,.et-shot .cp-sug-i.sel{background:#e9f1ff}#cpScreen .cp-sug-i.sel b,.et-shot .cp-sug-i.sel b{color:#3b3cc0}

/* Regle heritee du faux ecran de demo, aujourd'hui retire. Elle forcait display:none
   sur tout [hidden] d'un .et-shot, ce qui ecrasait l'empilement des scenes 01 et 03 :
   les etats caches doivent garder leur place pour que la hauteur ne bouge pas. */#cpScreen [hidden]{display:none !important}

/* derniere ligne : le reste des resultats */#cpScreen .cp-more,.et-shot .cp-more{background:#f2f4f9;border-style:dashed;border-color:#d5dbe6;color:#7c879a;justify-content:space-between}#cpScreen .cp-more b,.et-shot .cp-more b{color:#2c50d8}#cpScreen .cp-more svg,.et-shot .cp-more svg{width:15px;height:15px;flex:none;stroke:#a9b3c3}

/* pipeline : la fiche bouge seule, declenchee par l issue de l appel */#cpScreen .cp-toast,.et-shot .cp-toast{position:absolute;top:14px;right:22px;z-index:8;max-width:236px;display:flex;align-items:center;gap:9px;margin:0;padding:8px 12px;box-shadow:0 10px 24px -14px rgba(15,20,40,.45);border-radius:11px;background:linear-gradient(180deg,#e9f1ff,#e7e9fd);border:1px solid #c9cbfa;opacity:0;transform:translateY(-6px);transition:opacity .45s ease,transform .45s cubic-bezier(.22,1,.36,1)}#cpScreen .cp-toast.in,.et-shot .cp-toast.in{opacity:1;transform:none}#cpScreen .cp-toast svg,.et-shot .cp-toast svg{width:14px;height:14px;flex:none;color:#3866ff}#cpScreen .cp-toast span,.et-shot .cp-toast span{display:flex;flex-direction:column;gap:1px;min-width:0}#cpScreen .cp-toast b,.et-shot .cp-toast b{font-size:11.5px;font-weight:800;line-height:1.25;color:#2f30a8;white-space:nowrap}#cpScreen .cp-toast em,.et-shot .cp-toast em{font-style:normal;font-size:10.5px;line-height:1.25;color:#6b6cc4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#cpScreen .cp-mini.auto,.et-shot .cp-mini.auto{border-color:#a9abf5;box-shadow:0 0 0 3px rgba(56,102,255,.14)}

/* barre de saisie du coach : il tape sa question lui-meme */#cpScreen .cp-ask-bar,.et-shot .cp-ask-bar{display:flex;align-items:stretch;gap:8px;margin-top:10px}#cpScreen .cp-ask-in,.et-shot .cp-ask-in{position:relative;flex:1;min-width:0;display:flex;align-items:center;min-height:38px;padding:0 12px;border-radius:10px;background:#fff;border:1px solid #dfe4ee;font-size:12.5px;color:#0f0f14;transition:border-color .25s ease,box-shadow .25s ease}#cpScreen .cp-ask-in.focus,.et-shot .cp-ask-in.focus{border-color:#8a8bf0;box-shadow:0 0 0 3px rgba(56,102,255,.14)}#cpScreen .cp-ask-in .cp-caret,.et-shot .cp-ask-in .cp-caret{display:none}#cpScreen .cp-ask-in.focus .cp-caret,.et-shot .cp-ask-in.focus .cp-caret{display:inline-block}#cpScreen .cp-ask-ph,.et-shot .cp-ask-ph{font-style:normal;color:#a3adbd;pointer-events:none}#cpScreen .cp-ask-send,.et-shot .cp-ask-send{flex:none;width:38px;border:0;border-radius:10px;background:#e7e9f5;color:#90909a;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .25s ease,color .25s ease,transform .2s ease}#cpScreen .cp-ask-send svg,.et-shot .cp-ask-send svg{width:16px;height:16px}#cpScreen .cp-ask-send.on,.et-shot .cp-ask-send.on{background:#3866ff;color:#fff;transform:scale(1.06)}

/* volume au-dessus de chaque barre, week-end grise */#cpScreen .cp-week .cp-bars u,.et-shot .cp-week .cp-bars u{text-decoration:none;font-size:10px;font-weight:800;color:#3866ff;line-height:1}#cpScreen .cp-week .cp-bars span.off u,.et-shot .cp-week .cp-bars span.off u{color:#c2cad6}#cpScreen .cp-week .cp-bars span.off i,.et-shot .cp-week .cp-bars span.off i{background:#dde2ea}#cpScreen .cp-week .cp-bars span.off em,.et-shot .cp-week .cp-bars span.off em{color:#c2cad6}

/* la souris doit rester devant la liste de suggestions (z-index 7) */#cpScreen .cp-ptr,.et-shot .cp-ptr{z-index:12}

/* une couleur par etape : le passage d une colonne a l autre devient visible */#cpScreen .cp-col,.et-shot .cp-col{border-top:3px solid #cdd5e0;position:relative}#cpScreen .cp-col[data-col="rappel"],.et-shot .cp-col[data-col="rappel"]{border-top-color:#e0973f}#cpScreen .cp-col[data-col="rdv"],.et-shot .cp-col[data-col="rdv"]{border-top-color:#3866ff}#cpScreen .cp-col[data-col="signe"],.et-shot .cp-col[data-col="signe"]{border-top-color:#3f9e69}#cpScreen .cp-col[data-col="rappel"] h5 em,.et-shot .cp-col[data-col="rappel"] h5 em{color:#c07f2c}#cpScreen .cp-col[data-col="rdv"] h5 em,.et-shot .cp-col[data-col="rdv"] h5 em{color:#4c4dd6}#cpScreen .cp-col[data-col="signe"] h5 em,.et-shot .cp-col[data-col="signe"] h5 em{color:#2f8557}#cpScreen .cp-mini,.et-shot .cp-mini{border-left:3px solid #cdd5e0;transition:transform 1s cubic-bezier(.22,1,.36,1),box-shadow .4s ease,border-color .5s ease}#cpScreen .cp-col[data-col="rappel"] .cp-mini,.et-shot .cp-col[data-col="rappel"] .cp-mini{border-left-color:#e8b573}#cpScreen .cp-col[data-col="rdv"] .cp-mini,.et-shot .cp-col[data-col="rdv"] .cp-mini{border-left-color:#8a8bf0}#cpScreen .cp-col[data-col="signe"] .cp-mini,.et-shot .cp-col[data-col="signe"] .cp-mini{border-left-color:#6fbd93}

/* transcription qui s ecrit en direct */#cpScreen .cp-live,.et-shot .cp-live{display:inline-flex;align-items:center;gap:5px;margin-left:8px;padding:2px 8px;border-radius:99px;background:#fdeceb;color:#b3261e;font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}#cpScreen .cp-live i,.et-shot .cp-live i{width:6px;height:6px;border-radius:50%;background:#e5484d;animation:cpRec 1.15s infinite}#cpScreen .cp-quote-app,.et-shot .cp-quote-app{min-height:34px}#cpScreen .cp-tr-caret,.et-shot .cp-tr-caret{display:none;width:1.5px;height:12px;margin-left:2px;background:#3866ff;vertical-align:-2px;animation:cpCaret 1s steps(1) infinite}#cpScreen .cp-tr-caret.on,.et-shot .cp-tr-caret.on{display:inline-block}

/* la carte du prospect appele reste a l ecran, marquee comme traitee */#cpScreen .cp-card.termine,.et-shot .cp-card.termine{border-color:#cfe7d9;background:linear-gradient(180deg,#fbfefc,#fff)}#cpScreen .cp-card.termine .cp-acts .cp-act:not(.done),.et-shot .cp-card.termine .cp-acts .cp-act:not(.done){opacity:.4}#cpScreen .cp-card.termine .cp-tel,.et-shot .cp-card.termine .cp-tel{opacity:.55}

/* pipeline fidele a l app : montant par colonne, pastille d echeance par fiche */#cpScreen .cp-col h5,.et-shot .cp-col h5{display:block;margin:0 0 10px}#cpScreen .cp-col h5>span,.et-shot .cp-col h5>span{display:block;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:#90909a}#cpScreen .cp-col h5>em,.et-shot .cp-col h5>em{display:flex;align-items:baseline;gap:7px;margin-top:3px;font-style:normal}#cpScreen .cp-col h5 b,.et-shot .cp-col h5 b{font-size:15px;font-weight:800;color:#0f0f14;font-variant-numeric:tabular-nums}#cpScreen .cp-col h5 i,.et-shot .cp-col h5 i{font-style:normal;font-size:11.5px;font-weight:700;color:#90909a;font-variant-numeric:tabular-nums}#cpScreen .cp-col[data-col="rdv"] h5 i,.et-shot .cp-col[data-col="rdv"] h5 i{color:#4c4dd6}#cpScreen .cp-col[data-col="signe"] h5 i,.et-shot .cp-col[data-col="signe"] h5 i{color:#2f8557}#cpScreen .cp-mini,.et-shot .cp-mini{padding:9px 10px}#cpScreen .cp-mini-h,.et-shot .cp-mini-h{display:flex;align-items:flex-start;justify-content:space-between;gap:7px}#cpScreen .cp-mini-h b,.et-shot .cp-mini-h b{font-size:12px;font-weight:700;line-height:1.25;color:#0f0f14}#cpScreen .cp-mini-c,.et-shot .cp-mini-c{display:block;margin-top:2px;font-size:10.5px;font-weight:600;color:#9b9ba4}#cpScreen .cp-mini-v,.et-shot .cp-mini-v{display:block;margin-top:5px;font-style:normal;font-size:11.5px;font-weight:800;color:#54545e;font-variant-numeric:tabular-nums}#cpScreen .cp-dot,.et-shot .cp-dot{flex:none;width:9px;height:9px;margin-top:2px;border-radius:50%;background:#dfe4ec;box-shadow:inset 0 0 0 1px #cfd6e1}#cpScreen .cp-dot.late,.et-shot .cp-dot.late{background:#e35d57;box-shadow:none}#cpScreen .cp-dot.today,.et-shot .cp-dot.today{background:#54b06e;box-shadow:none}#cpScreen .cp-dot.soon,.et-shot .cp-dot.soon{background:#b9c0cb;box-shadow:none}#cpScreen .cp-dot.ok,.et-shot .cp-dot.ok{background:#2f8557;box-shadow:none}#cpScreen .cp-col h5 b.bump,.et-shot .cp-col h5 b.bump,#cpScreen .cp-col h5 i.bump,.et-shot .cp-col h5 i.bump{animation:cpBump .5s ease}
@keyframes cpBump{40%{transform:scale(1.16);color:#3866ff}}

/* section Demarrer : trois etapes */
.st-grid{display:grid;gap:16px;grid-template-columns:1fr;max-width:1000px;margin:0 auto}
.st-card{position:relative;padding:30px 26px 26px;border-radius:18px;background:#fff;border:1px solid #e5e8ee;box-shadow:0 1px 2px rgba(23,32,51,.04),0 16px 34px -24px rgba(23,32,51,.3)}
.st-n{display:flex;align-items:center;justify-content:center;width:34px;height:34px;margin-bottom:16px;border-radius:11px;background:linear-gradient(145deg,#6e8bff,#3866ff);color:#fff;font-size:15px;font-weight:800}
.st-card h3{margin:0 0 8px;font-size:17px;font-weight:800;letter-spacing:-.02em;color:#0f0f14}
.st-card p{margin:0;font-size:14.5px;line-height:1.6;color:#6c6c76}
.st-foot{margin:26px auto 0;max-width:620px;text-align:center;font-size:14px;color:#90909a}
@media(min-width:900px){.st-grid{grid-template-columns:repeat(3,1fr);gap:18px}}

/* section 04 : tout ce que tu as, groupe par moment de la journee */
.ar-grp{max-width:1080px;margin:0 auto}
.ar-grp+.ar-grp{margin-top:44px}
.ar-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid hsla(0,0%,100%,.1)}
.ar-h h3{margin:0;font-size:19px;font-weight:800;letter-spacing:-.02em;color:#fff}
.ar-h span{font-size:13.5px;color:hsla(0,0%,100%,.42)}
.ar-grid{display:grid;gap:12px;grid-template-columns:1fr}
.ar-card{padding:20px;border-radius:16px;background:hsla(0,0%,100%,.045);border:1px solid hsla(0,0%,100%,.09);transition:border-color .25s ease,background .25s ease,transform .25s ease}
.ar-card:hover{border-color:rgba(147,180,255,.34);background:hsla(0,0%,100%,.07);transform:translateY(-2px)}
.ar-ic{display:flex;align-items:center;justify-content:center;width:36px;height:36px;margin-bottom:13px;border-radius:11px;background:linear-gradient(145deg,rgba(110,139,255,.26),rgba(56,102,255,.09));border:1px solid rgba(147,180,255,.2)}
.ar-ic svg{width:19px;height:19px;stroke:url(#pflGrad)}
.ar-card h4{margin:0 0 6px;font-size:15.5px;font-weight:800;letter-spacing:-.015em;color:#fff}
.ar-card p{margin:0;font-size:13.5px;line-height:1.6;color:hsla(0,0%,100%,.52)}
@media(min-width:700px){.ar-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.ar-grid{grid-template-columns:repeat(3,1fr)}}

/* garanties sous les offres + CTA final */
.pr-gar{display:grid;gap:14px;grid-template-columns:1fr;max-width:1000px;margin:34px auto 0}
.pr-g{display:flex;align-items:flex-start;gap:12px;padding:18px 20px;border-radius:15px;background:#f8f9fc;border:1px solid #e8ebf2}
.pr-g svg{flex:none;width:20px;height:20px;margin-top:1px;color:#3866ff}
.pr-g b{display:block;margin-bottom:4px;font-size:14.5px;font-weight:800;color:#0f0f14}
.pr-g p{margin:0;font-size:13px;line-height:1.55;color:#6c6c76}
@media(min-width:820px){.pr-gar{grid-template-columns:repeat(3,1fr)}}
/* Rembourrage bas ramene de 96 a 40 (le client, 2026-09-05) : avec les 64 px de
   rembourrage haut du pied, l ecart sous le moniteur faisait 160 px, trop grand. */
.fin-sec{padding:96px 20px 40px;background:linear-gradient(180deg,#050506,#0e0e12);text-align:center}
.fin-wrap{max-width:640px;margin:0 auto}
.fin-h{margin:0 0 14px;font-size:clamp(30px,4.6vw,46px);font-weight:800;letter-spacing:-.038em;line-height:1.08;color:#fff}
.fin-p{margin:0 0 30px;font-size:16.5px;line-height:1.6;color:hsla(0,0%,100%,.55)}
.fin-cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 34px;border-radius:999px;font-size:16px;font-weight:800;line-height:1;white-space:nowrap;color:#fff;text-decoration:none}.fin-cta svg{flex:none;width:17px;height:17px}
.fin-n{margin:16px 0 0;font-size:13px;color:hsla(0,0%,100%,.4)}

/* gabarit temoignages (section commentee en attendant les vrais) */
.tm-grid{display:grid;gap:14px;grid-template-columns:1fr;max-width:1040px;margin:0 auto}
.tm-card{padding:22px;border-radius:16px;background:#fff;border:1px solid #e5e8ee}
.tm-head{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.tm-face{flex:none;display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:linear-gradient(145deg,#6e8bff,#3866ff);color:#fff;font-size:13px;font-weight:800}
.tm-head b{display:block;font-size:14.5px;color:#0f0f14}
.tm-head span+div span,.tm-head div>span{font-size:12.5px;color:#90909a}
.tm-card>p{margin:0;font-size:14px;line-height:1.6;color:#54545e}
@media(min-width:860px){.tm-grid{grid-template-columns:repeat(2,1fr)}}

/* section Demarrer : gris plus franc pour se detacher du calcul blanc */
.st-sec{background:#fff;color:#0f0f14}

/* section Tarif en sombre : elle se detache, et les deux offres blanches ressortent */
.tarif-dark{background:linear-gradient(180deg,#050506,#0b0b0e)}
.tarif-dark h2{color:#fff}
.tarif-dark>div>p.text-slate-500{color:hsla(0,0%,100%,.5)}
.tarif-dark .text-primary{color:#93b4ff}
.tarif-dark .bg-white .text-primary{color:#3866ff}
.tarif-dark .grid-bg{background-image:linear-gradient(to right,hsla(0,0%,100%,.05) 1px,transparent 1px),linear-gradient(to bottom,hsla(0,0%,100%,.05) 1px,transparent 1px)}
.tarif-dark .billing-tab{color:hsla(0,0%,100%,.55)}
.tarif-dark .billing-tab[aria-pressed="true"]{background:#fff;color:#0f0f14}
.tarif-dark .rounded-full.border-slate-200{border-color:hsla(0,0%,100%,.14);background:hsla(0,0%,100%,.06)}
.tarif-dark .text-slate-300{color:hsla(0,0%,100%,.2)}
.tarif-dark .pr-gar .pr-g{background:hsla(0,0%,100%,.05);border-color:hsla(0,0%,100%,.1)}
.tarif-dark .pr-g b{color:#fff}
.tarif-dark .pr-g p{color:hsla(0,0%,100%,.52)}
.tarif-dark .pr-g svg{color:#93b4ff}

/* les cinq etapes : ligne de progression et etats nets */
#cpSteps{position:relative;gap:6px}
#cpSteps:before{content:"";position:absolute;left:30px;top:26px;bottom:26px;width:2px;border-radius:2px;background:hsla(0,0%,100%,.09)}
#cpSteps li{position:relative;z-index:1}
#cpSteps .cp-step{position:relative;align-items:center;gap:13px;padding:15px 16px;border-radius:15px;border:1px solid transparent;background:transparent;transition:background .3s ease,border-color .3s ease,transform .3s ease}
#cpSteps .cp-step:hover{background:hsla(0,0%,100%,.05)}
#cpSteps .cp-num{width:30px;height:30px;margin:0;border-radius:50%;background:#1b2233;border:2px solid #2a3348;color:hsla(0,0%,100%,.45);font-size:12.5px;transition:background .3s ease,border-color .3s ease,color .3s ease,box-shadow .3s ease}
#cpSteps .cp-txt b{display:block;font-size:14.5px;font-weight:700;line-height:1.3;color:hsla(0,0%,100%,.72);transition:color .3s ease}
#cpSteps .cp-txt>span{display:block;margin-top:2px;font-size:12.5px;line-height:1.35;color:hsla(0,0%,100%,.36);transition:color .3s ease}
#cpSteps .cp-step[aria-current="true"]{background:linear-gradient(90deg,rgba(56,102,255,.2),rgba(56,102,255,.06));border-color:rgba(124,125,240,.42)}
#cpSteps .cp-step[aria-current="true"] .cp-num{background:#3866ff;border-color:#6e8bff;color:#fff;box-shadow:0 0 0 5px rgba(56,102,255,.18)}
#cpSteps .cp-step[aria-current="true"] .cp-txt b{color:#fff}
#cpSteps .cp-step[aria-current="true"] .cp-txt>span{color:hsla(0,0%,100%,.58)}

/* etapes un peu plus grandes */
#cpSteps{gap:8px}
#cpSteps:before{left:36px;top:30px;bottom:30px}
#cpSteps .cp-step{gap:15px;padding:18px 19px;border-radius:16px}
#cpSteps .cp-num{width:35px;height:35px;font-size:14px}
#cpSteps .cp-step[aria-current="true"] .cp-num{box-shadow:0 0 0 6px rgba(56,102,255,.18)}
#cpSteps .cp-txt b{font-size:15.5px}
#cpSteps .cp-txt>span{margin-top:3px;font-size:13px}

/* hauteur de l ecran de demo : valeur finale, elle prime sur les reglages accumules plus haut */#cpScreen .cp-app,.et-shot .cp-app{min-height:615px}
@media(max-width:639px){#cpScreen .cp-app,.et-shot .cp-app{min-height:745px}}
.hq{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:12px;border:1px solid #e7e7ec;background:#fff;margin-bottom:7px}
.hq b{font-size:13.5px;font-weight:800;color:#0f0f14}
.hq .ville{font-size:12px;color:#98a2b3;font-weight:500}
.hq .h{flex:none;width:46px;font-size:12px;font-weight:800;color:#3866ff}
.hq .h.vide{color:#c3cad6}
.hq .mid{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.hq .tag{margin-left:auto;flex:none;font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:99px;white-space:nowrap}
.tag-r{background:#fff4e5;color:#a5730a}
.tag-x{background:#feecec;color:#b3261e}
.tag-n{background:#e9f1ff;color:#2c50d8}
.hstats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.hstats div{border:1px solid #e7e7ec;background:#fff;border-radius:12px;padding:10px 12px}
.hstats b{display:block;font-size:17px;font-weight:800;color:#0f0f14}
.hstats span{font-size:10px;color:#90909a;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
@media(max-width:520px){.hq .h{width:38px;font-size:11px}.hq b{font-size:12.5px}.hstats{grid-template-columns:1fr 1fr}.hstats div:last-child{display:none}}
@media(max-width:520px){.hstats{gap:7px}.hstats div{padding:8px 9px}.hstats b{font-size:15px}.hstats span{font-size:9.5px}.hq{gap:9px;padding:8px 10px}.hq .tag{font-size:10px;padding:3px 7px}}
[data-scroll-card] .flex-1{min-width:0}
[data-scroll-card] .hq{overflow:hidden}
@media(max-width:640px){[data-scroll-card] .flex-1{padding:12px}[data-scroll-card] .hstats div{padding:7px 8px}}
.cp-part{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:1000px;margin:0 auto}
@media(min-width:900px){.cp-part{grid-template-columns:repeat(4,1fr)}}
.cp-partc{border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.035);border-radius:16px;padding:26px 16px;text-align:center;transition:border-color .3s ease,background .3s ease}
.cp-partc:hover{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.06)}

.cp-partc b{display:block;font-size:15px;font-weight:800;margin-bottom:5px;color:#fff}
.cp-partc span{display:block;font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.5)}
.cp-part-sec{background:linear-gradient(180deg,#0b0b0e,#050506)}
.cp-part-sec .cp-eyebrow{color:#93b4ff}
[data-scroll-card]>div{border-radius:13px}
[data-scroll-card] .bg-nav{border-bottom-left-radius:13px}
@media(max-width:767px){[data-scroll-card]>div{border-radius:20px}[data-scroll-card] .bg-nav{border-bottom-left-radius:20px}}
.cp-sec.cp-light{background:#fff}
.cp-sec.cp-light .cp-lead{color:#63636d}
.cp-sec.cp-light .cp-calc div{background:#fff;border-color:#e7e7ec;box-shadow:0 1px 2px rgba(0,0,0,.05),0 10px 26px -14px rgba(0,0,0,.12)}
#faq{background:#fff}
/* py-14 / md:py-16 absents du build Tailwind : padding vertical explicite */
#faq{padding-top:84px;padding-bottom:92px}
#faq h2{margin-bottom:48px}
#faq .space-y-3>*+*{margin-top:14px}
@media(max-width:900px){#faq{padding-top:58px;padding-bottom:64px}#faq h2{margin-bottom:36px}}
#faq details{border-color:#e7e7ec;overflow:hidden;transition:border-color .45s cubic-bezier(.4,0,.2,1),box-shadow .45s cubic-bezier(.4,0,.2,1)}
/* group-open:rotate-45, hover:border-slate-300 et min-h-[56px] absents du build Tailwind */
#faq summary{min-height:60px;padding:16px 0;list-style:none;-webkit-tap-highlight-color:transparent}
#faq summary::-webkit-details-marker{display:none}
#faq summary::marker{content:""}
#faq details[open]{border-color:#3866ff;box-shadow:0 1px 2px rgba(15,20,40,.04),0 20px 44px -26px rgba(56,102,255,.5)}
/* pendant la fermeture l attribut open vaut encore true : on relache le bleu tout de suite */
#faq details.se-ferme{border-color:#e7e7ec;box-shadow:none}
#faq summary:focus-visible{outline:2px solid #3866ff;outline-offset:4px;border-radius:14px}
#faq summary>span:last-child{display:inline-flex;align-items:center;justify-content:center;flex:none;width:30px;height:30px;border-radius:50%;background:rgba(56,102,255,.08);font-size:19px;line-height:1;transition:transform .45s cubic-bezier(.32,.72,0,1),background .3s ease}
#faq summary:hover>span:last-child{background:rgba(56,102,255,.14)}
#faq details[open] summary>span:last-child{transform:rotate(135deg);background:rgba(56,102,255,.16)}
#faq details.se-ferme summary>span:last-child{transform:none;background:rgba(56,102,255,.08)}
#faq .faq-corps{overflow:hidden}
#faq .faq-corps>:last-child{margin-bottom:0}
@media(prefers-reduced-motion:reduce){#faq details,#faq summary>span:last-child{transition:none}}
#faq details:hover{border-color:#d3d3da}
.cp-wrap.wide{max-width:1120px}
.cp-app{min-height:614px}
@media(max-width:639px){.cp-app{min-height:742px}}
@media(max-width:639px){.cp-app{min-height:806px}}
@media(max-width:639px){#cpScreen .cp-app,.et-shot .cp-app{min-height:812px}}
@media(max-width:639px){#cpScreen .cp-app,.et-shot .cp-app{min-height:930px}#cpScreen .cp-mini,.et-shot .cp-mini{padding:5px 7px;font-size:11px;line-height:1.25;margin-bottom:4px}#cpScreen .cp-mini span,.et-shot .cp-mini span{font-size:9.5px;margin-top:1px}#cpScreen .cp-col,.et-shot .cp-col{min-height:0;padding:6px}#cpScreen .cp-col h5,.et-shot .cp-col h5{font-size:9px;margin-bottom:5px}#cpScreen .cp-pipe,.et-shot .cp-pipe{gap:6px}}#cpScreen .cp-app,.et-shot .cp-app{min-height:632px}
.cp-week .cp-bars i{flex:0 0 auto;height:3px}#cpScreen .cp-week .cp-bars,.et-shot .cp-week .cp-bars{height:88px}#cpScreen .cp-week .cp-bars i,.et-shot .cp-week .cp-bars i{transition:min-height .8s cubic-bezier(.22,1,.36,1)}#cpScreen .cp-week .cp-bars,.et-shot .cp-week .cp-bars{height:74px}#cpScreen .cp-week .cp-bars i,.et-shot .cp-week .cp-bars i{height:auto;min-height:0;flex:0 0 auto;transition:none}#cpScreen .cp-app,.et-shot .cp-app{min-height:642px}
@media(max-width:639px){#cpScreen .cp-app,.et-shot .cp-app{min-height:940px}}
.cp-cadre{position:relative;--cadre:560px;--cy:46px;--cl:rgba(255,255,255,.09)}
.cp-cadre>*:not(.absolute):not(.fixed){position:relative;z-index:1}
.cp-cadre>.absolute{z-index:0}
.cp-cadre::before,.cp-cadre::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0}
.cp-cadre::before{background-image:linear-gradient(var(--cl),var(--cl)),linear-gradient(var(--cl),var(--cl));background-size:100% 1px,100% 1px;background-position:0 var(--cy),0 calc(100% - var(--cy));background-repeat:no-repeat}
.cp-cadre::after{background-image:linear-gradient(var(--cl),var(--cl)),linear-gradient(var(--cl),var(--cl)),var(--croix),var(--croix),var(--croix),var(--croix);background-size:1px 100%,1px 100%,11px 11px,11px 11px,11px 11px,11px 11px;background-position:calc(50% - var(--cadre)) 0,calc(50% + var(--cadre)) 0,calc(50% - var(--cadre)) calc(var(--cy) - 5px),calc(50% + var(--cadre)) calc(var(--cy) - 5px),calc(50% - var(--cadre)) calc(100% - var(--cy) + 5px),calc(50% + var(--cadre)) calc(100% - var(--cy) + 5px);background-repeat:no-repeat}
.cp-cadre{--croix:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Cpath d='M5.5 0v11M0 5.5h11' stroke='rgba(255,255,255,0.28)' stroke-width='1'/%3E%3C/svg%3E")}
@media(max-width:1240px){.cp-cadre{--cadre:calc(50vw - 28px)}}
@media(max-width:900px){.cp-cadre{--cadre:calc(50vw - 16px);--cy:30px}}
/* Largeur du contenu = largeur du cadre, pilotees par la meme variable */
#demo .cp-wrap.wide{max-width:calc(var(--cadre) * 2)}
/* Etapes au-dessus, ecran en dessous */
@media(min-width:980px){
  #demo .cp-demo{grid-template-columns:1fr;gap:18px}
  #demo .cp-steps{flex-direction:row;gap:8px;align-items:stretch}
  #demo .cp-step{flex:1 1 0;min-width:0;padding:12px 13px;gap:11px;align-items:center;min-height:66px;border-radius:13px}
  #demo .cp-step .cp-txt b{font-size:12.5px;line-height:1.25}
  #demo .cp-step .cp-txt>span{font-size:10.5px;line-height:1.3;margin-top:3px}
  #demo .cp-num{width:22px;height:22px;font-size:11px}
  #demo .cp-step[aria-current="true"] .cp-num{box-shadow:0 0 0 4px rgba(56,102,255,.18)}
}
@media(min-width:980px){#cpScreen{width:100%;max-width:920px;justify-self:center}#cpScreen .cp-app,.et-shot .cp-app{min-height:626px}
}
@media(min-width:980px){
  #demo .cp-steps{width:100%;max-width:920px;justify-self:center}
  #demo .cp-steps li{flex:1 1 0;min-width:0;display:flex}
  #demo .cp-steps .cp-step{width:100%}
}
/* Sections claires en blocs arrondis posés sur le fond sombre */
.cp-sec.cp-light,.cp-sec.st-sec,.cp-sec.st-bloc,#faq{background:transparent!important;position:relative}
.cp-sec.cp-light::before,.cp-sec.st-sec::before,.cp-sec.st-bloc::before,#faq::before{content:"";position:absolute;left:22px;right:22px;top:11px;bottom:11px;background:#fff;border-radius:30px;z-index:0}
.cp-sec.cp-light>*,.cp-sec.st-sec>*,.cp-sec.st-bloc>*,#faq>*{position:relative;z-index:1}
@media(max-width:900px){.cp-sec.cp-light::before,.cp-sec.st-sec::before,.cp-sec.st-bloc::before,#faq::before{left:12px;right:12px;top:8px;bottom:8px;border-radius:22px}}
/* Deux sections claires qui se suivent = une seule carte */
.cp-sec.cp-light:has(+ .cp-sec.st-sec)::before,.cp-sec.st-sec:has(+ .cp-sec.cp-light)::before{bottom:0;border-radius:30px 30px 0 0}
.cp-sec.cp-light + .cp-sec.st-sec::before,.cp-sec.st-sec + .cp-sec.cp-light::before{top:0;border-radius:0 0 30px 30px}
@media(max-width:900px){.cp-sec.cp-light:has(+ .cp-sec.st-sec)::before,.cp-sec.st-sec:has(+ .cp-sec.cp-light)::before{border-radius:22px 22px 0 0}.cp-sec.cp-light + .cp-sec.st-sec::before,.cp-sec.st-sec + .cp-sec.cp-light::before{border-radius:0 0 22px 22px}}
/* Fusion des cartes claires voisines, meme separees par un script */
.cp-sec.cp-light:has(+ script + .cp-sec.st-sec)::before,.cp-sec.st-sec:has(+ script + .cp-sec.cp-light)::before{bottom:0;border-radius:30px 30px 0 0}
.cp-sec.cp-light + script + .cp-sec.st-sec::before,.cp-sec.st-sec + script + .cp-sec.cp-light::before{top:0;border-radius:0 0 30px 30px}
@media(max-width:900px){.cp-sec.cp-light:has(+ script + .cp-sec.st-sec)::before,.cp-sec.st-sec:has(+ script + .cp-sec.cp-light)::before{border-radius:22px 22px 0 0}.cp-sec.cp-light + script + .cp-sec.st-sec::before,.cp-sec.st-sec + script + .cp-sec.cp-light::before{border-radius:0 0 22px 22px}}
/* CTA du hero : pastille ronde + halo, dans l'esprit des references */
.cta-hero{position:relative;padding:0 8px 0 32px;gap:14px}
.cta-rond{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9999px;background:rgba(255,255,255,.22);flex:none;transition:transform .25s ease,background .25s ease}
.cta-rond svg{width:15px;height:15px}
.cta-hero:hover .cta-rond{background:rgba(255,255,255,.32);transform:translateX(2px)}
.hero-cta{position:relative}
.hero-cta::before{content:"";position:absolute;left:50%;top:50%;width:340px;height:120px;transform:translate(-50%,-50%);background:radial-gradient(ellipse at center,rgba(56,102,255,.42),transparent 70%);filter:blur(26px);pointer-events:none;z-index:0}
.hero-cta>a{position:relative;z-index:1}
/* Points de fond plus discrets */
.dot-bg{background-image:radial-gradient(hsla(0,0%,100%,.055) 1px,transparent 0);background-size:34px 34px}
/* Hero : traits verticaux seuls, sans lignes horizontales ni croix */
.cp-cadre.cadre-v::before{display:none}
.cp-cadre.cadre-v::after{background-image:linear-gradient(var(--cl),var(--cl)),linear-gradient(var(--cl),var(--cl));background-size:1px 100%,1px 100%;background-position:calc(50% - var(--cadre)) 0,calc(50% + var(--cadre)) 0;background-repeat:no-repeat}
/* Lueur d'horizon a la jonction texte / ecran */
[data-scroll-container]{position:relative}
[data-scroll-container]::before{content:"";position:absolute;left:50%;bottom:12%;width:min(1180px,94vw);height:460px;transform:translateX(-50%);background:radial-gradient(ellipse at 50% 100%,rgba(56,102,255,.34),rgba(124,125,240,.12) 45%,transparent 72%);filter:blur(52px);pointer-events:none;z-index:0}
@media(max-width:900px){[data-scroll-container]::before{height:300px;filter:blur(38px)}}
/* Hero facon reference : fond net, lumiere uniquement par le bas */
.cadre-v .blur-\[130px\]{opacity:0}
.cadre-v .dot-bg{opacity:.5}
/* Seconde ligne du titre en gris, pas en couleur */
.hero-h1 .text-glow{background:linear-gradient(180deg,#8da5ff 0%,#5c80ff 45%,#3866ff 78%,#2b4fe0 100%);-webkit-background-clip:text;background-clip:text;filter:saturate(1.25) brightness(1.1);text-shadow:none}
/* Lueur du bas renforcee : c'est elle qui porte l'ambiance */
[data-scroll-container]::before{bottom:6%;height:520px;background:radial-gradient(ellipse at 50% 100%,rgba(56,102,255,.42),rgba(124,125,240,.16) 42%,transparent 70%);filter:blur(58px)}
/* Lueur d'horizon : collee au haut de la capture, comme la reference */
[data-scroll-container]::before{display:none}
[data-scroll-card]{position:relative}
[data-scroll-card]::before{content:"";position:absolute;left:50%;top:-150px;width:min(1240px,96vw);height:330px;transform:translateX(-50%);background:radial-gradient(ellipse 62% 100% at 50% 100%,rgba(111,149,255,.55),rgba(56,102,255,.26) 42%,rgba(56,102,255,.07) 62%,transparent 76%);filter:blur(58px);pointer-events:none;z-index:-1}
@media(max-width:900px){[data-scroll-card]::before{top:-90px;height:200px;filter:blur(42px)}}
/* Etoiles derivantes dans le hero */
.cadre-v .dot-bg{opacity:1}
.dot-bg::before,.dot-bg::after{content:"";position:absolute;left:0;right:0;top:0;height:200%;pointer-events:none;will-change:transform}
.dot-bg::before{
  background-image:
    radial-gradient(1.6px 1.6px at 12% 6%,rgba(147,180,255,.65),transparent),
    radial-gradient(1.2px 1.2px at 63% 11%,rgba(255,255,255,.42),transparent),
    radial-gradient(1.8px 1.8px at 29% 19%,rgba(111,149,255,.55),transparent),
    radial-gradient(1.1px 1.1px at 87% 24%,rgba(255,255,255,.32),transparent),
    radial-gradient(1.5px 1.5px at 45% 31%,rgba(147,180,255,.5),transparent),
    radial-gradient(1.2px 1.2px at 8% 39%,rgba(255,255,255,.28),transparent),
    radial-gradient(1.7px 1.7px at 74% 44%,rgba(111,149,255,.48),transparent),
    radial-gradient(1.1px 1.1px at 37% 48%,rgba(255,255,255,.3),transparent);
  background-size:340px 340px;
  animation:cpDerive1 78s linear infinite;
}
.dot-bg::after{
  background-image:
    radial-gradient(2.2px 2.2px at 22% 9%,rgba(111,149,255,.4),transparent),
    radial-gradient(1.4px 1.4px at 78% 17%,rgba(255,255,255,.22),transparent),
    radial-gradient(2px 2px at 52% 27%,rgba(147,180,255,.34),transparent),
    radial-gradient(1.3px 1.3px at 15% 34%,rgba(255,255,255,.2),transparent),
    radial-gradient(1.9px 1.9px at 91% 41%,rgba(111,149,255,.3),transparent),
    radial-gradient(1.5px 1.5px at 41% 47%,rgba(255,255,255,.18),transparent);
  background-size:560px 560px;
  animation:cpDerive2 124s linear infinite;
}
@keyframes cpDerive1{from{transform:translate3d(0,0,0)}to{transform:translate3d(-30px,-50%,0)}}
@keyframes cpDerive2{from{transform:translate3d(0,0,0)}to{transform:translate3d(24px,-50%,0)}}
@media(prefers-reduced-motion:reduce){.dot-bg::before,.dot-bg::after{animation:none}}
@media(max-width:640px){.dot-bg::after{display:none}}
/* Plus de trame de points statique : seules les etoiles derivantes restent */
.cadre-v .dot-bg{background-image:none}
/* Hero : fond bleu quasi noir en haut, qui rejoint la page en bas */
section.cadre-v{background:linear-gradient(180deg,#000 0%,#020203 42%,#040405 74%,#050506 100%)}
/* Lueur du hero : halo diffus + noyau serre, la source est cachee derriere l'ecran */
[data-scroll-card]{margin-top:112px!important}
[data-scroll-card]::before,[data-scroll-card]::after{content:"";position:absolute;left:50%;bottom:auto;transform:translateX(-50%);pointer-events:none;z-index:-1;opacity:1}
[data-scroll-card]::before{top:-150px;height:270px;width:min(1560px,118vw);background:radial-gradient(ellipse 50% 68% at 50% 100%,rgba(58,99,232,.34) 0%,rgba(45,80,205,.18) 40%,rgba(40,70,180,.06) 64%,transparent 100%);filter:blur(82px) saturate(1.45)}
[data-scroll-card]::after{top:-96px;height:96px;width:min(1150px,88vw);background-image:radial-gradient(ellipse 46% 84% at 50% 100%,rgba(74,118,255,.30),rgba(45,80,205,.10) 55%,transparent 82%),linear-gradient(90deg,transparent 0%,rgba(74,118,255,.08) 18%,rgba(74,118,255,.62) 50%,rgba(74,118,255,.08) 82%,transparent 100%);background-size:100% 100%,72% 2px;background-position:center,50% 100%;background-repeat:no-repeat}
@media(max-width:900px){[data-scroll-card]{margin-top:84px!important}[data-scroll-card]::before{top:-118px;height:190px;width:min(700px,104vw);filter:blur(48px) saturate(1.35)}[data-scroll-card]::after{top:-58px;height:58px;width:min(500px,90vw)}}
/* Liseret lumineux : le bord haut de l'ecran emet la lumiere */
[data-scroll-card]>div{box-shadow:0 0 70px rgba(45,80,205,.20),0 0 200px 44px rgba(45,80,205,.08)!important}
/* Lignes du hero : elles s'arretent au niveau de l'ecran, avec un fondu (style TrendTrack) */
section.cp-cadre.cadre-v::after{background-image:linear-gradient(180deg,var(--cl) 0%,var(--cl) 58%,transparent 100%),linear-gradient(180deg,var(--cl) 0%,var(--cl) 58%,transparent 100%);background-size:1px 430px,1px 430px}
@media(max-width:900px){section.cp-cadre.cadre-v::after{background-size:1px 520px,1px 520px}}
/* Tailles hero calees sur la reference ToolScale */
.hero-sub{font-size:20.5px;font-weight:500}
@media(max-width:640px){.hero-sub{font-size:17px}}
section.cadre-v .rounded-full span{font-size:13.5px}
.cta-hero .cta-rond{width:38px;height:38px}


/* ===== NAVIGATION MOBILE =====
   Sous 940 px la rangee de liens centree de l entete est masquee et il ne
   restait aucune navigation, ni sur mobile ni sur tablette. Le bouton reprend
   le style de la pastille blanche, le panneau tombe juste dessous et se ferme
   au clic sur un lien, a l echap, et des que la fenetre repasse au dessus de 940. */
.cp-burger{display:none;position:relative;flex:none;width:42px;height:42px;align-items:center;justify-content:center;padding:0;border:1px solid rgba(15,15,20,.10);border-radius:11px;background:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cp-burger span{position:absolute;left:11px;width:20px;height:1.9px;border-radius:2px;background:#0f0f14;transition:transform .26s cubic-bezier(.4,0,.2,1),opacity .16s ease}
.cp-burger span:nth-child(1){transform:translateY(-6px)}
.cp-burger span:nth-child(3){transform:translateY(6px)}
.cp-burger[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg)}
.cp-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.cp-burger[aria-expanded="true"] span:nth-child(3){transform:rotate(-45deg)}
.cp-menu{display:none}
@media(max-width:940px){
.cp-burger{display:inline-flex}
.cp-menu{display:block;overflow:hidden;max-width:64rem;margin:10px auto 0;max-height:0;opacity:0;background:#fff;border:1px solid rgba(15,15,20,.08);border-radius:14px;box-shadow:0 1px 2px rgba(15,15,20,.05),0 18px 40px -22px rgba(15,15,20,.45);transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .2s ease;pointer-events:none;visibility:hidden}
.cp-menu.ouvert{max-height:340px;opacity:1;pointer-events:auto;visibility:visible}
.cp-menu a{display:flex;align-items:center;min-height:50px;padding:0 18px;font-size:15px;font-weight:600;letter-spacing:-.01em;color:#3d4356;text-decoration:none;border-bottom:1px solid #f1f3f7}
.cp-menu a:last-child{border-bottom:0;color:#3866ff}
.cp-menu a:active{background:#f6f8fd}
}
/* cibles tactiles du pied de page : 21 px de haut, sous le minimum tapable */
@media(max-width:640px){.pied2-cols a{display:flex;align-items:center;min-height:40px}}
@media(prefers-reduced-motion:reduce){.cp-menu,.cp-burger span{transition:none}}


/* ===== COUCHE TT : typographie, bouton et FAQ partages par toute la vitrine (2026-09-04) =====
   le client : la typographie, le bouton avec son animation et la FAQ de la page d affiliation,
   partout sur le site. Ce bloc est le DERNIER de landing.php, donc le dernier de la feuille
   commune servie a toutes les pages (callpit_vitrine_css). Les !important passent devant les
   regles d origine plus specifiques (#faq h2, .so-grid .so-h2) et leurs variantes mobiles ;
   les tailles sont des clamp, donc le mobile suit. */
.hero-h1, .hero-h1--long, .cp-h2, .lo-h2, .so-h2, .et-h2, .pq-h2, .wl-h2, .fin-h, h2.text-3xl { font-size: clamp(34px, 3.7vw, 52px) !important; font-weight: 600 !important; letter-spacing: -.042em !important; line-height: 1.1 !important; word-spacing: normal !important; }
.cp-punch { font-weight: 600 !important; letter-spacing: -.02em !important; }
/* Les traits decoratifs (span.cp-tr) de la section des tarifs sont retires (le client, 2026-09-04), sur l accueil comme sur /tarifs/ qui reprend la section. */
#tarif .cp-tr, #tarif .cp-x { display: none !important; }
/* Le bleu nuit rgb(1,7,12) remplace les noirs de SECTION sur tout le site
   (le client, 2026-09-04, apres le bloc final de l affiliation). Les degrades entre
   deux noirs deviennent un aplat : toutes les sections sombres et le pied ne font
   plus qu une seule couleur, et le lisere blanc du pied saute. Ne touche PAS aux
   noirs de composant (lecteur video, moniteur, maquettes d ecran, cartes, pastilles). */
.cp-dark, body .cp-sec.cp-dark, .tarif-dark, .cp-part-sec, .hh-noir, .wl-sec, .fin-sec, section.fin-sec, .pied2 { background: rgb(1,7,12) !important; }
.pied2 { border-top: 0 !important; }
.hero-sub, .cp-lead, .so-lead, .pq-lead, .et-lead, .fin-p, .wl-sub { font-size: 16px !important; line-height: 22.4px !important; letter-spacing: -.112px !important; font-weight: 400 !important; }
.cp-lead, .so-lead, .pq-lead { color: rgba(15,15,16,.73) !important; }
.hero-sub { color: rgba(255,255,255,.73) !important; }
.fin-p, .wl-sub { color: rgba(255,255,255,.73) !important; }
/* Les sections 01 / 02 / 03 (.et-*) sont CLAIRES : leur couleur d origine etait declaree en blanc puis corrigee plus loin, un !important blanc les rendait invisibles. */
.et-lead { color: rgba(15,15,16,.73) !important; }
.cp-eyebrow, .et-eyebrow, .lo-eyebrow, p.text-xs.font-extrabold.uppercase { font-size: 14px !important; font-weight: 400 !important; line-height: 19.6px !important; letter-spacing: -.112px !important; text-transform: uppercase !important; color: rgba(15,15,16,.73) !important; }
.tarif-dark p.text-xs.font-extrabold.uppercase, .cp-dark .cp-eyebrow, .wl-sec .cp-eyebrow, .fin-sec .cp-eyebrow { color: rgba(255,255,255,.73) !important; }
.et-eyebrow { color: rgba(15,15,16,.73) !important; }
.et-eyebrow b { color: #2e6aff !important; }
.cp-eyebrow::before, p.text-xs.font-extrabold.uppercase::before { content: "[ "; color: #2e6aff; font-weight: 500; }
.cp-eyebrow::after, p.text-xs.font-extrabold.uppercase::after { content: " ]"; color: #2e6aff; font-weight: 500; }
.tarif-dark p.text-xs.font-extrabold.uppercase::before, .tarif-dark p.text-xs.font-extrabold.uppercase::after, .cp-dark .cp-eyebrow::before, .cp-dark .cp-eyebrow::after { color: #3f8fff; }
.et-eyebrow b { font-weight: 500 !important; }
/* Le bouton, releve sur trendtrack.io : texte qui roule, fleche qui glisse, fond qui se retracte, .45s. */
.hx-btn { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 8px 8px 8px 18px; border-radius: 18px; background: none; box-shadow: none; text-decoration: none; isolation: isolate; color: #fff; font-size: 16px; transform: none; }
.hx-btn:hover { transform: none; box-shadow: none; }
.hx-btn.hx-auto { display: inline-flex; }
.hx-btn.hx-plein { display: flex; width: 100%; }
.hx-btn-in { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; height: 32px; }
.hx-btn-bg { position: absolute; inset: 0; z-index: -1; border-radius: 18px; background: linear-gradient(135deg, #3f8fff 0%, #1d44ff 100%); box-shadow: 0 16px 32px 0 rgba(63,143,255,.10), 0 8px 16px 0 rgba(63,143,255,.10), 0 4px 8px 0 rgba(63,143,255,.10), 0 0 10px 0 rgba(63,143,255,.10), 0 0 50px 0 rgba(63,143,255,.16); transition: all .45s cubic-bezier(.32, .72, 0, 1); }
.hx-btn:hover .hx-btn-bg { inset: 2px; }
.hx-btn-t { display: inline-flex; height: 1.4em; overflow: hidden; font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: -.112px; color: #fff; text-shadow: 0 1.4em; }
.hx-btn-ts { display: inline-block; transition: transform .45s cubic-bezier(.32, .72, 0, 1); }
.hx-btn:hover .hx-btn-ts { transform: translateY(-100%); }
.hx-btn-i { position: relative; flex: none; box-sizing: border-box; width: 32px; height: 32px; border: 1px solid rgba(255,255,255,.28); border-radius: 12px; background: rgba(255,255,255,.28); overflow: hidden; }
.hx-btn-i svg { position: absolute; left: 9px; top: 9px; width: 12px; height: 12px; color: #fff; transition: transform .45s cubic-bezier(.32, .72, 0, 1); }
.hx-btn-i svg:nth-child(2) { transform: translateX(-22px); }
.hx-btn:hover .hx-btn-i svg:nth-child(1) { transform: translateX(22px); }
.hx-btn:hover .hx-btn-i svg:nth-child(2) { transform: translateX(0); }
/* La FAQ, deux colonnes, accordeon anime par data-state. */
.hf-sec { background: rgb(251,251,251); color: rgb(15,15,16); padding: 80px 40px; }
.hf-in { width: min(1280px, 100%); margin: 0 auto; }
#faq.hf-sec { border-top: 0; padding: 80px 40px; background: rgb(251,251,251); }
#faq.hf-sec::before, #faq.hf-sec::after { content: none; display: none; }
.hf-lay { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
.hf-gauche { display: flex; flex-direction: column; gap: 16px; }
.hf-eyebrow { display: flex; align-items: center; gap: 4px; margin: 0 0 3.5px; font-size: 14px; font-weight:600; line-height: 19.6px; letter-spacing:-.01em; text-transform:none; color:#3866ff; }
.hf-eyebrow i{display:none}
.hf-h2, #faq.hf-sec .hf-h2 { max-width: 480px; margin: 0; font-size: clamp(34px, 3.7vw, 52px); font-weight: 600; line-height: 1.1; letter-spacing: -.042em; color: rgb(15,15,16); text-wrap: balance; }
.hf-p { max-width: 424px; margin: 0; font-size: 16px; font-weight: 400; line-height: 22.4px; letter-spacing: -.112px; color: rgba(15,15,16,.73); text-wrap: balance; }
.hf-p a { color: inherit; text-decoration: underline; }
.hf-liste { display: flex; flex-direction: column; }
.hf-q { border-bottom: 1px dashed rgba(15,15,16,.12); }
.hf-t { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 20px 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; color: rgb(15,15,16); }
.hf-t p { margin: 0; font-size: 16px; font-weight: 500; line-height: 22.4px; }
.hf-t svg { flex: none; width: 18px; height: 18px; color: rgb(15,15,16); transition: transform .45s cubic-bezier(.32, .72, 0, 1); }
.hf-q[data-state="open"] .hf-t svg { transform: rotate(180deg); }
.hf-r { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows .45s cubic-bezier(.32, .72, 0, 1); }
.hf-q[data-state="open"] .hf-r { grid-template-rows: 1fr; }
.hf-r > div { min-height: 0; overflow: hidden; }
.hf-r p { margin: 0; font-size: 14px; font-weight: 400; line-height: 19.6px; letter-spacing: -.112px; color: rgba(15,15,16,.73); }
.hf-esp { height: 20px; }
@media (max-width: 1000px) { .hf-lay { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 760px) { .hf-sec, #faq.hf-sec { padding: 56px 20px; } }
@media (prefers-reduced-motion: reduce) { .hf-t svg, .hf-r, .hx-btn-bg, .hx-btn-ts, .hx-btn-i svg { transition: none; } }

/* ===== LE HEROS DE L ACCUEIL, COPIE DE CELUI DE L AFFILIATION (2026-09-04) =====
   Ce heros etait sombre a l origine ; hero-clair le repassait en clair, remplacee
   par hero-nuit. On lui greffe le decor de la page affiliation : fond rgb(1,7,12),
   voile lumineux des cotes, deux paires de traits fins, et l onde en anneaux
   derriere. Pas de simulateur : le contenu de la page ne bouge pas. */
section.cadre-v.hero-nuit { background: rgb(1,7,12) !important; }
/* L entete est transparente tant qu on n a pas defile, puis reprend sa pastille
   blanche. Meme dispositif que la page affiliation : la classe af-haut est posee
   sur le body cote serveur et retiree au premier defilement. Les pages sans cette
   classe (tarifs, mentions legales) gardent l entete blanche. */
.cp-entete-in { transition: background-color .28s ease, border-color .28s ease, box-shadow .28s ease; }
.cp-mot, .cp-nom, .cp-lien, .cp-connexion { transition: color .28s ease; }
body.af-haut .cp-entete-in { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
body.af-haut .cp-mot, body.af-haut .cp-nom { color: #fff !important; }
body.af-haut .cp-lien { color: rgba(255,255,255,.62) !important; }
body.af-haut .cp-lien:hover { color: #fff !important; }
body.af-haut .cp-connexion { color: rgba(255,255,255,.82) !important; }
body.af-haut .cp-connexion:hover { color: #fff !important; }
body.af-haut .cp-burger { background: rgba(255,255,255,.08) !important; }
body.af-haut .cp-burger span { background: #fff !important; }
/* Le clair de l accueil prend le blanc de la page affiliation, rgb(251,251,251),
   au lieu du bleu-gris #f4f6fb. Les cartes restent en blanc pur par-dessus. */
/* Les zones claires deviennent des panneaux arrondis poses sur le fond sombre, comme
   le light_wrap de trendtrack : 8 px de marge laterale, 32 px de rayon, debordement
   coupe. Le corps de page repasse donc en sombre, c est lui qui apparait autour et
   entre les panneaux. Les croix, les filets de tete et les rails du cadre sont
   retires a l interieur : TrendTrack n en a pas. */
/* Cadre sur l accueil : la couche est partagee, un corps sombre casserait les pages legales et Tarifs, qui n ont pas de heros sombre. */
body:has(.hero-nuit) { background: rgb(1,7,12) !important; }
/* Les pages sans heros sombre gardent le blanc de l affiliation, demande plus tot. */
body:not(:has(.hero-nuit)) { background: rgb(251,251,251) !important; }
.hh-clair { position: relative; z-index: 1; margin: 0 8px; border-radius: 32px; background: rgb(251,251,251); overflow: hidden; }
.hh-clair + .hh-clair, .tarif-dark + .hh-clair { margin-top: 8px; }
.hh-clair .cp-sec.st-bloc, .hh-clair .cta-mid, .hh-clair #faq.hf-sec { border-top: 0 !important; }
.hh-clair .cp-sec.st-bloc::before, .hh-clair .cp-sec.st-bloc::after, .hh-clair .cta-mid::before, .hh-clair .cta-mid::after, .hh-clair #faq::before, .hh-clair #faq::after { display: none !important; content: none !important; }
.hh-clair #faq.hf-sec { background: transparent !important; }
body:has(.hero-nuit) .cp-rails { display: none !important; }
@media (max-width: 900px) { .hh-clair { margin: 0 6px; border-radius: 22px; } }
.cp-sec.so-gris::before { background: rgb(251,251,251) !important; }
/* La marque de l entete prend la typographie de la couche : graisse 600 et le meme resserrement que les titres. */
.cp-nom { font-weight: 600 !important; letter-spacing: -.042em !important; }
/* Le titre du heros prend la taille de celui de trendtrack.io/fr : 68 px a 1440,
   graisse 600, interligne 1.1, resserrement -.042em. Les titres de section restent
   a 52. Le mot en couleur prend leur degrade a 135 degres, transpose en bleu. */
.hero-nuit .hero-h1, .hero-nuit .hero-h1--long { font-size: clamp(34px, 4.9vw, 68px) !important; }
/* background-image et non background : la forme courte reinitialise background-clip, et comme elle est en !important elle gagnait sur le clip pose juste apres, ce qui affichait un bloc plein a la place du texte. */
.hero-nuit .hero-h1 .text-glow { background-image: linear-gradient(135deg, #3fa9ff 0%, #1d44ff 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; filter: none !important; }
/* Restes de l ancien heros sombre : le semis de points et ses deux couches
   d etoiles qui derivent (cpDerive1 et cpDerive2), plus la grosse tache bleue
   floutee. La page affiliation n en a aucun, on les coupe. */
.hero-nuit .dot-bg, .hero-nuit .dot-bg::before, .hero-nuit .dot-bg::after { display: none !important; }
.hero-nuit [class*="bg-primary/30"] { display: none !important; }
/* Les lueurs bleues posees autour du cadre video : deux sur la carte elle-meme et
   une sur le conteneur. Ce sont des pseudo-elements, donc invisibles a une sonde de
   pile ; celle du conteneur dessinait le trait a gauche de la video. Retirees. */
.hero-nuit [data-scroll-container]::before, .hero-nuit [data-scroll-container]::after { display: none !important; content: none !important; }
.hero-nuit [data-scroll-card]::before, .hero-nuit [data-scroll-card]::after { display: none !important; content: none !important; }
/* La pastille au-dessus du titre, valeurs relevees sur trendtrack.io/fr le 2026-09-04 :
   hauteur 34, marges 6 / 14 / 6 / 6, ecart 10, pilule, fond et filet blancs a 6 %,
   sans ombre ; texte 14 / 500 / 19.6 / -.112 en blanc plein ; quatre photos rondes
   de 20 px qui se chevauchent de 4 px, sans anneau blanc. */
/* L ecart entete-pastille etait deja celui de trendtrack (85 contre 84), mais notre
   entete est plus haute de 40 px, ce qui descendait tout le bloc. On remonte le
   rembourrage haut de 196 a 156, et le decor de 136 a 96 pour garder la meme
   distance entre le haut de la boite et le premier element de texte. */
.hero-nuit .hero-pad { padding-top: clamp(130px, 10.8vw, 156px) !important; }
.hero-nuit .cp-preuve { box-sizing: border-box; min-height: 34px; padding: 6px 14px 6px 6px !important; gap: 10px !important; border-radius: 999px !important; background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.06) !important; box-shadow: none !important; }
.hero-nuit .cp-preuve-txt { font-size: 14px !important; font-weight: 500 !important; line-height: 19.6px !important; letter-spacing: -.112px !important; color: #fff !important; }
.hero-nuit .cp-preuve-txt b { font-weight: 500 !important; color: #fff !important; }
.hero-nuit .cp-av { width: 20px !important; height: 20px !important; border: 0 !important; }
.hero-nuit .cp-av + .cp-av { margin-left: -4px !important; }
.hero-nuit .hero-atouts span { border-color: rgba(255,255,255,.12) !important; background: rgba(255,255,255,.05) !important; color: rgba(255,255,255,.73) !important; }
/* Sous-titre et badges du heros, valeurs relevees sur trendtrack.io/fr le 2026-09-04 :
   sous-titre 18 / 400 / 25.2 / -.112 en blanc a 73 % ; badges 16 / 400 / 22.4 / -.112
   en blanc plein, SANS aplat, un simple filet a 6 %, pilule, 6 px sur 12, ecart 10. */
.hero-nuit .hero-sub { font-size: 18px !important; font-weight: 400 !important; line-height: 25.2px !important; letter-spacing: -.112px !important; color: rgba(255,255,255,.73) !important; }
/* > span : sinon la regle attrape aussi les span internes et fait reapparaitre la variante courte du premier badge, cachee par display:none. */
/* Valeurs strictes de trendtrack.io/fr : 16 / 400 / 22.4 / -.112, hauteur 34,
   marges 12, ecart 10, icone 16, pilule, filet blanc a 6 %, sans aplat. Un essai a
   15 px a ete annule : le client veut leurs chiffres exacts, meme si Inter est 6 %
   plus large que leur Geist. */
.hero-nuit .hero-atouts > span { display: inline-flex; align-items: center; gap: 9px !important; box-sizing: border-box; min-height: 32px; padding: 0 12px !important; border: 1px solid rgba(255,255,255,.06) !important; border-radius: 999px !important; background: none !important; box-shadow: none !important; font-size: 14px !important; font-weight: 400 !important; line-height: 19.6px !important; letter-spacing: -.112px !important; color: #fff !important; }
.hero-nuit .hero-atouts > span > svg { width: 15px !important; height: 15px !important; color: #3f8fff !important; fill: currentColor; stroke: none !important; }
/* Le texte du premier badge est dans un span interne que .hero-atouts span figeait a 12,5 px : il herite maintenant du badge. */
.hero-nuit .hero-atouts > span > span { font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; letter-spacing: inherit !important; color: inherit !important; }
/* Le libelle long est conserve (le client) ; c est la taille du texte qui descend. */
@media (max-width: 760px) { .hero-nuit .hero-sub { font-size: 16px !important; line-height: 22.4px !important; } .hero-nuit .hero-atouts > span { font-size: 13px !important; padding: 0 10px !important; min-height: 30px; gap: 8px !important; } }

/* -- le decor : sous le contenu, jamais cliquable -- */
/* Le decor, calque sur le heros de trendtrack.io/fr releve le 2026-09-04 :
   leur .main_hero__bg est une boite de 1056 x 544 posee a 84 px du haut, masquee
   en fondu vertical 0/50/100, qui contient l image de fond ET l onde. L onde y est
   .cta_bg__wrap (fondu 15/65, overflow hidden) > .cta_mask__dots (semis 201 px) >
   .cta_circle__wrap (flou 14) > 3 anneaux LARGES COMME LA BOITE (1056), donc
   fortement rognes, bordure clamp(4em,10vh,10em), 9 s ease, decales de 3 s.
   Ici la boite descend a 136 px : notre contenu commence 52 px plus bas, la
   distance boite/texte reste la leur (60 px en haut comme en bas). Les delais sont
   negatifs pour qu un anneau soit deja en vol au chargement, l etat stable est le
   meme que le leur. */
.hh-deco { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
/* Le voile blanc est de retour, mais decoupe comme sur la page affiliation : la boite de 1056 px est peinte en rgb(1,7,12) par-dessus, donc il n en reste que les deux bandes de 72 px, entre le trait exterieur et le trait interieur. Aucun halo au centre. */
.hh-lueur { position: absolute; left: 50%; top: 96px; transform: translateX(-50%); box-sizing: border-box; width: min(1200px, 100%); height: 544px; padding: 0 72px; background-image: radial-gradient(59.01% 50%, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 100%); }
.hh-lueur::before, .hh-lueur::after { content: ""; position: absolute; top: 0; width: 1px; height: 440px; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.03) 28%, rgba(255,255,255,.03) 55%, rgba(255,255,255,0) 100%); }
.hh-lueur::before { left: 0; }
.hh-lueur::after { right: 0; }
.hh-fond { position: absolute; left: 72px; right: 72px; top: 0; height: 544px; overflow: hidden; background: rgb(1,7,12); -webkit-mask: linear-gradient(rgba(0,0,0,0) 0%, #fff 50%, rgba(0,0,0,0) 100%); mask: linear-gradient(rgba(0,0,0,0) 0%, #fff 50%, rgba(0,0,0,0) 100%); }
.hh-fond img { display: block; width: 100%; height: auto; }
.hh-fond::before, .hh-fond::after { content: ""; position: absolute; top: 0; width: 1px; height: 460px; z-index: 2; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.06) 28%, rgba(255,255,255,.06) 55%, rgba(255,255,255,0) 100%); }
.hh-fond::before { left: 0; }
.hh-fond::after { right: 0; }
.hh-onde { position: absolute; inset: 0; overflow: hidden; -webkit-mask: linear-gradient(rgba(0,0,0,0) 0%, #fff 15%, #fff 65%, rgba(0,0,0,0) 100%); mask: linear-gradient(rgba(0,0,0,0) 0%, #fff 15%, #fff 65%, rgba(0,0,0,0) 100%); }
.hh-points { position: absolute; inset: 0; -webkit-mask: url(/wp-content/themes/callpit-theme/img/points-masque.png?v=3) 0 0 / 201px 201px; mask: url(/wp-content/themes/callpit-theme/img/points-masque.png?v=3) 0 0 / 201px 201px; }
.hh-cercles { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; filter: blur(14px); }
.hh-cercles i { position: absolute; width: 100%; aspect-ratio: 1; border-radius: 999em; border: clamp(4em, 10vh, 10em) solid #1e90ff; overflow: hidden; transform: scale(0); opacity: 0; animation: hh-onde 9s ease infinite; }
.hh-cercles i:nth-child(1) { animation-delay: -6s; }
.hh-cercles i:nth-child(2) { animation-delay: -3s; }
.hh-cercles i:nth-child(3) { animation-delay: 0s; }
@keyframes hh-onde { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hh-cercles i { animation: none; } }
@media (max-width: 900px) { .hh-lueur { padding: 0 20px; height: 470px; } .hh-fond { left: 20px; right: 20px; height: 470px; } .hh-fond::before, .hh-fond::after { height: 400px; } .hh-lueur::before, .hh-lueur::after { height: 380px; } }


/* ===== BANDEAU D OFFRE =====
   Pose le 17/09/2026. La hauteur est une variable : l entete flottante s en
   sert pour descendre d autant, sans toucher a sa propre animation. Pour
   arreter l offre, supprimer ce bloc et le <a class="cp-promo"> qui ouvre
   le <header>. La balise reste un <style> NU : callpit_vitrine_css() ne
   capte que <style> sans attribut, un id ici et /tarifs/ perdrait la mise
   en forme du bandeau. */
:root{--cp-promo-h:38px}
/* 5C : le bandeau parlait une autre langue que le site. Il posait un aplat de
   bleus Tailwind (#1e40af, #2563eb, #3b82f6) qui ne sont meme pas le bleu de la
   marque, en haut d une page dont tout le reste est presque noir (#050506) avec
   des panneaux rgba(11,17,22,.82) et des ombres internes. Il reprend desormais
   ce vocabulaire : fond sombre floute comme l entete, ombres internes, et LE
   bleu #3866ff garde pour l accent, porte par la seule pastille. */
.cp-promo{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:center;height:var(--cp-promo-h);padding:0 14px;text-decoration:none;color:rgba(255,255,255,.7);font-size:13px;line-height:1;background:radial-gradient(62% 340% at 50% 0%,rgba(56,102,255,.17) 0%,rgba(56,102,255,0) 68%),rgba(10,15,21,.88);border-bottom:1px solid rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 0 70px rgba(255,255,255,.02);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background-color .25s ease}
.cp-promo:hover{background:radial-gradient(62% 340% at 50% 0%,rgba(56,102,255,.22) 0%,rgba(56,102,255,0) 68%),rgba(13,19,26,.92)}
.cp-promo-in{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:1100px}
.cp-promo-tag{flex:none;font-size:10.5px;font-weight:700;letter-spacing:.055em;text-transform:uppercase;color:#fff;background:#3866ff;padding:4px 10px;border-radius:999px;box-shadow:0 0 0 1px rgba(56,102,255,.4),0 4px 14px rgba(56,102,255,.32)}
.cp-promo-txt{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:rgba(255,255,255,.68)}
.cp-promo-txt b{font-weight:600;color:#fff}
.cp-promo-cta{flex:none;display:inline-flex;align-items:center;gap:5px;font-weight:600;color:#fff}
.cp-promo:hover .cp-promo-cta svg{transform:translateX(3px)}
.cp-promo-cta svg{width:11px;height:11px;transition:transform .2s cubic-bezier(.32,.72,0,1)}
/* L entete est collee a top:0 par une classe utilitaire. On la bat en
   specificite et non en ordre : le CSS de la vitrine est concatene ailleurs
   (callpit_vitrine_css) et l ordre final n est pas garanti. */
header.cp-entete{top:var(--cp-promo-h)}
@media (max-width:640px){
  :root{--cp-promo-h:34px}
  .cp-promo{font-size:12px;padding:0 10px}
  .cp-promo-in{gap:8px}
  .cp-promo-long{display:none}
}
/* La pastille tient jusqu'a 340 px : sur un telephone courant (375 px)
   « Offre speciale » doit rester lisible, c'est elle qui porte l'urgence. */
@media (max-width:340px){.cp-promo-tag{display:none}}


/* TELEPHONE, corrige le 2026-09-12.
   1. La barre ne garde que le logo et le bouton menu : les deux boutons
      (Se connecter, Commencer) se chevauchaient avec le logo. Ils sont dans
      le menu deroulant, ou Commencer a ete ajoute.
   2. Le menu passe AU-DESSUS du flou de la barre. Sans ca, des qu on avait
      defile, les quatre couches floutees (.cp-entete-fond, position absolue)
      se depliaient par-dessus le menu, qui n est pas positionne : il s ouvrait
      bien, mais flou et illisible. */
@media(max-width:940px){
  .cp-entete .cp-connexion,.cp-entete .cp-cta-nav,.cp-entete .hx-btn{display:none!important}
}
.cp-entete .cp-menu{position:relative;z-index:6}
.cp-entete .cp-menu .cp-menu-cta{color:#3866ff}
/* 3. Le bouton menu suit la teinte de ce qu il y a derriere la barre.
      Sur une section noire, ses trois barres passaient au blanc (regle
      data-entete) alors que le bouton restait blanc : bouton vide a l ecran.
      Signale le 2026-09-12 sur la page Tarifs. */
html[data-entete="sombre"] .cp-entete .cp-burger{background:rgba(255,255,255,.10)!important;border-color:rgba(255,255,255,.22)!important}
html[data-entete="clair"] .cp-entete .cp-burger{background:#fff!important;border-color:rgba(15,15,20,.10)!important}


/* ===== LA BARRE, REPRISE DE TRENDTRACK (releve du 04/09/2026) =====
   Leur barre n est pas une carte : elle est transparente, et ce qui apparait
   au defilement est un FLOU EN DEGRADE, pas un fond plein. Quatre couches
   superposees, chacune un peu plus floue que la precedente et masquee sur une
   bande decalee de 12,5 % : le flou est franc en haut et s eteint vers le bas
   sans jamais montrer de bord. Le tout est aplati (scaleY 0) tant qu on n a
   pas defile, et se deplie en 0,45 s.
   Valeurs calculees relevees chez eux, reprises telles quelles :
     conteneur  fixe, padding 24 / 32, puis 16 des qu on defile,
                transition padding .35s cubic-bezier(.32,.72,0,1)
     rangee     largeur max 75em = 1200 px, hauteur 36 px
     fond       hauteur 280 %, origine en haut, scaleY 0 -> 1 en .45s
     couches    flous 1, 2, 5 et 6 px
     lien       14 px, rayon 12, padding 6 / 12
     pastille   ::after a 8 % de la couleur du texte, scale .9 -> 1
     roulement  le texte n est PAS duplique : un text-shadow pose 1,2em plus
                bas sert de copie, et .cp-lien-in la rogne jusqu au survol.
   Les couleurs restent pilotees par body.af-haut, qui existait deja : blanc
   tant qu on est en haut du heros sombre, sombre des qu on defile. */
.cp-entete{padding:24px 32px!important;transition:padding .35s cubic-bezier(.32,.72,0,1)}
html[data-defile="oui"] .cp-entete{padding:16px!important}

.cp-entete-fond{position:absolute;top:0;left:0;width:100%;height:280%;pointer-events:none;z-index:0;transform-origin:center top;transform:scaleY(0) translateY(-30%);transition:transform .45s cubic-bezier(.32,.72,0,1)}
html[data-defile="oui"] .cp-entete-fond{transform:scaleY(1) translateY(-30%)}
.cp-entete-fond>div{position:absolute;inset:0}
.cp-entete-fond>div:nth-child(1){z-index:2;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);-webkit-mask:linear-gradient(to top,rgba(255,255,255,0) 0%,#fff 12.5%,#fff 37.5%,rgba(255,255,255,0) 50%);mask:linear-gradient(to top,rgba(255,255,255,0) 0%,#fff 12.5%,#fff 37.5%,rgba(255,255,255,0) 50%)}
.cp-entete-fond>div:nth-child(2){z-index:3;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);-webkit-mask:linear-gradient(to top,rgba(255,255,255,0) 12.5%,#fff 37.5%,#fff 50%,rgba(255,255,255,0) 62.5%);mask:linear-gradient(to top,rgba(255,255,255,0) 12.5%,#fff 37.5%,#fff 50%,rgba(255,255,255,0) 62.5%)}
.cp-entete-fond>div:nth-child(3){z-index:4;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);-webkit-mask:linear-gradient(to top,rgba(255,255,255,0) 37.5%,#fff 50%,#fff 62.5%,rgba(255,255,255,0) 75%);mask:linear-gradient(to top,rgba(255,255,255,0) 37.5%,#fff 50%,#fff 62.5%,rgba(255,255,255,0) 75%)}
.cp-entete-fond>div:nth-child(4){z-index:5;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);-webkit-mask:linear-gradient(to top,rgba(255,255,255,0) 50%,#fff 62.5%,#fff 75%,rgba(255,255,255,0) 87.5%);mask:linear-gradient(to top,rgba(255,255,255,0) 50%,#fff 62.5%,#fff 75%,rgba(255,255,255,0) 87.5%)}

/* la carte blanche disparait : la barre flotte, comme chez eux */
.cp-entete .cp-entete-in{position:relative;z-index:1;max-width:1200px;min-height:36px;padding:0!important;background:none!important;border:0!important;box-shadow:none!important}
/* La marque est desormais UNE image, fournie par le client, en deux versions :
   le mot est blanc pour le fond sombre, recolore en #0f0f14 pour le fond clair
   (variante fabriquee sur le serveur, l icone bleue n a pas bouge). La blanche
   est celle par defaut : tant que data-entete n est pas pose, on est en haut
   d une page a l entete sombre, donc pas de clignotement au chargement. */
/* hauteur explicite : min-height ne suffisait pas, la rangee retombait a 44
   (le lien du logo se donnait 8 px de plus sans qu aucune regle servie ne
   l explique). 36 px, c est la hauteur de barre de trendtrack, et le logo
   fait 28, donc rien n est rogne. */
.cp-entete .cp-mot{gap:0;height:36px;min-height:36px}
.cp-entete .cp-logo{display:block;flex:none;width:auto;height:28px}
.cp-entete .cp-logo--sombre{display:none}
html[data-entete="clair"] .cp-entete .cp-logo--blanc{display:none}
html[data-entete="clair"] .cp-entete .cp-logo--sombre{display:block}


/* --- les liens : pastille qui se deploie, texte qui roule --- */
.cp-entete .cp-liens{display:flex;align-items:center;gap:8px}
.cp-entete .cp-lien{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;padding:6px 12px;border-radius:12px;font-size:14px;font-weight:500;line-height:1.4;text-decoration:none;background:none}
.cp-entete .cp-lien::after{content:"";position:absolute;inset:0;border-radius:inherit;background:currentColor;opacity:0;transform:scale(.9);transition:transform .45s cubic-bezier(.32,.72,0,1),opacity .45s cubic-bezier(.32,.72,0,1)}
.cp-entete .cp-lien:hover::after{transform:scale(1);opacity:.08}
.cp-entete .cp-lien-in{position:relative;z-index:1;display:block;height:1.4em;overflow:hidden}
.cp-entete .cp-lien-txt{display:block;line-height:1.4;transition:transform .45s cubic-bezier(.32,.72,0,1);text-shadow:0 1.2em currentColor}
.cp-entete .cp-lien:hover .cp-lien-txt{transform:translateY(-1.2em)}
.cp-entete .cp-lien:focus-visible{outline:2px solid currentColor;outline-offset:2px}

/* --- Se connecter : la pilule contournee de leur variante glass --- */
.cp-entete .cp-connexion{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 14px;border-radius:14px;font-size:14px;font-weight:500;text-decoration:none;background:rgba(127,127,127,.06);box-shadow:inset 0 0 0 1px rgba(127,127,127,.14);transition:background .2s cubic-bezier(.32,.72,0,1),color .28s ease}
@supports (background:color-mix(in srgb,red 6%,transparent)){
  .cp-entete .cp-connexion{background:color-mix(in srgb,currentColor 6%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 8%,transparent)}
}
.cp-entete .cp-connexion:hover{background:rgba(127,127,127,.12)}
@supports (background:color-mix(in srgb,red 6%,transparent)){
  .cp-entete .cp-connexion:hover{background:color-mix(in srgb,currentColor 12%,transparent)}
}

/* --- le bouton bleu a la taille de barre de trendtrack ---
   Un script de la vitrine reecrit ce lien en .hx-btn au chargement : la classe
   posee dans le balisage est effacee, c est donc .hx-btn qu il faut viser. Leur
   bouton de barre est la variante small du meme bouton : 36 px de haut, rayon
   14, texte 14, ecart 6, pastille de fleche 24. On ne touche qu au header, les
   boutons du reste du site gardent leur taille. */
.cp-entete .hx-btn{min-height:36px;padding:6px 6px 6px 14px}
.cp-entete .hx-btn-in{height:24px;gap:6px}
.cp-entete .hx-btn-bg{border-radius:14px}
.cp-entete .hx-btn-t{font-size:14px}
.cp-entete .hx-btn-i{width:24px;height:24px;border-radius:9px}
.cp-entete .hx-btn-i svg{left:6px;top:6px}
.cp-entete .hx-btn-i svg:nth-child(2){transform:translateX(-18px)}
.cp-entete .hx-btn:hover .hx-btn-i svg:nth-child(1){transform:translateX(18px)}

@media(max-width:640px){
  .cp-entete{padding:16px 14px!important}
  html[data-defile="oui"] .cp-entete{padding:12px!important}
}
/* --- LA COULEUR DE LA BARRE SUIT CE QU IL Y A DERRIERE ---
   L ancien dispositif basculait au PREMIER DEFILEMENT (body.af-haut retiree) :
   les liens passaient au sombre alors qu on etait encore sur le heros noir, et
   devenaient illisibles. html porte desormais data-entete="sombre" tant qu une
   zone sombre passe sous le milieu de la barre, "clair" sinon. Ces regles sont
   posees apres celles de af-haut et en !important : ce sont elles qui tranchent,
   af-haut ne decide plus de la couleur. */
html[data-entete="sombre"] .cp-entete .cp-mot,
html[data-entete="sombre"] .cp-entete .cp-nom,
html[data-entete="sombre"] .cp-entete .cp-lien,
html[data-entete="sombre"] .cp-entete .cp-connexion{color:#fff!important}
html[data-entete="sombre"] .cp-entete .cp-burger span{background:#fff!important}
html[data-entete="clair"] .cp-entete .cp-mot,
html[data-entete="clair"] .cp-entete .cp-nom{color:#0f0f14!important}
html[data-entete="clair"] .cp-entete .cp-lien,
html[data-entete="clair"] .cp-entete .cp-connexion{color:#0f0f10!important}
html[data-entete="clair"] .cp-entete .cp-burger span{background:#0f0f14!important}

/* Se connecter recoit le meme roulement que les liens. */
.cp-entete .cp-connexion .cp-lien-in{height:1.4em}
.cp-entete .cp-connexion:hover .cp-lien-txt{transform:translateY(-1.2em)}

@media(prefers-reduced-motion:reduce){
  .cp-entete,.cp-entete-fond,.cp-entete .cp-lien::after,.cp-entete .cp-lien-txt,.cp-entete .cp-connexion .cp-lien-txt{transition:none}
}


/* En-tete flottante : une carte blanche posee sur la page, pas un bandeau
   colle en haut. Les couleurs du contenu basculent, il etait blanc sur sombre. */
/* Preuve sociale au-dessus du titre : pastille sombre, visages qui se
   chevauchent. Les images arrivent, les ronds sont des reserves en attendant. */
/* Le bandeau des atouts passe en clair : ses cartes etaient du verre blanc
   translucide, il faut leur redonner un fond et une encre. */
.cp-bandeau-clair{background:transparent!important}
.cp-bandeau-clair .text-white\/40{color:#767c8c}
.cp-bandeau-clair .pfl-card{background:linear-gradient(180deg,#fff,#fafbfd);border-color:#e6e8ee;box-shadow:0 1px 2px rgba(15,15,20,.05)}
.cp-bandeau-clair .pfl-card:hover{border-color:#c6d2f2;background:linear-gradient(180deg,#f6f9ff,#fff)}
.cp-bandeau-clair .pfl-txt{color:#5b6172}
.cp-bandeau-clair .pfl-txt b{color:#0f0f14}
.cp-bandeau-clair .pfl-ic{background:linear-gradient(145deg,rgba(56,102,255,.13),rgba(56,102,255,.04));border-color:rgba(56,102,255,.18)}
/* la section suivante devient une carte grise, avec son bloc interieur blanc */
/* Le corps de la page est noir : une carte inseree y laisse voir ses
   gouttieres. Tant que le haut etait sombre ca passait ; il est clair
   desormais, donc le parcours devient des bandes pleine largeur. */
/* Inversion du systeme : le clair devient la page, et les blocs sombres sont
   des cartes arrondies posees dessus, comme l etait la FAQ. */
body{background:#f4f6fb!important}
.cp-sec.cp-dark,.tarif-dark,.fin-sec{margin-left:22px;margin-right:22px;border-radius:30px;overflow:hidden}
.cp-sec.cp-dark{background:#050506!important;margin-top:11px;margin-bottom:11px;border-radius:30px}
/* La boucle et le tarif se touchent : une seule carte sombre, pas deux */
.tarif-dark{margin-top:11px;margin-bottom:11px;border-radius:30px}
.tarif-dark{padding-top:66px;padding-bottom:74px}
@media(max-width:900px){.tarif-dark{padding-top:48px;padding-bottom:54px}}
.fin-sec{margin-top:0;margin-bottom:0;border-radius:30px}
/* le bloc final et le pied de page ne forment qu un seul aplat sombre :
   pas de liseré clair entre les deux, et le dégradé finit sur la couleur du footer */
section.fin-sec{margin-left:0;margin-right:0;margin-bottom:0;border-radius:0;background:linear-gradient(180deg,#0e0e12,#050506)}
@media(max-width:900px){section.fin-sec{margin-left:0;margin-right:0;margin-bottom:0;border-radius:0}}
/* la FAQ redevient une bande claire, la page l est deja */
#faq{background:transparent!important}
#faq::before{display:none}
@media(max-width:900px){.cp-sec.cp-dark,.tarif-dark,.fin-sec{margin-left:12px;margin-right:12px;border-radius:22px}.cp-sec.cp-dark,.tarif-dark,.fin-sec{border-radius:22px}}
/* Mise au cordeau des sections : meme largeur de contenu et meme echelle de
   titres partout, le tarif et la FAQ etaient sur d autres reglages. */
.tarif-dark>.mx-auto{max-width:1080px}
.so-grid .so-h2,.tarif-dark h2,#faq h2,.fin-sec .fin-h{font-size:clamp(29px,4vw,44px);letter-spacing:-.035em;line-height:1.08}
/* meme repere au-dessus de chaque titre */
.tarif-dark>.mx-auto>p:first-of-type,#faq>.mx-auto>p:first-of-type{font-size:12px;letter-spacing:.14em}
.cp-sec.st-bloc{background:transparent!important}
.cp-sec.st-bloc::before{display:none}
.cp-sec.so-gris{background:transparent!important}
.cp-sec.so-gris::before{background:#f1f2f6}
.so-gris .so-carte{background:none;box-shadow:none}
/* LES REPERES DE LA PAGE, RECETTE DE TOOLSCALE
   Deux verticales fixes qui traversent l ecran en permanence, et entre
   chaque section une ligne pleine largeur ponctuee d un + a l aplomb de
   chaque verticale. Les verticales ne sont pas refaites section par
   section : un seul element fixe, donc aucun risque de decalage.
   --rail suit leur formule : au large, la colonne des reperes fait 1200 px
   et deborde du contenu ; en dessous, elle se cale a 16 px des bords. */
:root{--rail:max(16px,calc(50% - 600px));--line:rgba(15,15,16,.07);--plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Cpath d='M5.5 0.5v10M0.5 5.5h10' stroke='rgba(15,15,16,0.28)' stroke-width='1'/%3E%3C/svg%3E")}
.tarif-dark::before,.tarif-dark::after,.fin-sec::before,.fin-sec::after{background-image:none}
.cp-rails{position:fixed;inset:0;pointer-events:none;z-index:0}
.cp-rails::before,.cp-rails::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--line)}
.cp-rails::before{left:var(--rail)}
.cp-rails::after{right:var(--rail)}
/* la separation. La bande fait 11 px de haut pour loger les +, remontee de
   5 px pour que la ligne tombe pile sur la jonction. */
.cta-mid{position:relative}
.cta-mid>*{position:relative;z-index:1}
.cp-sec.st-bloc,#faq,.cta-mid{border-top:1px solid var(--line)}
.cp-sec.st-bloc::before,.cp-sec.st-bloc::after,#faq::before,#faq::after,.cta-mid::before,.cta-mid::after{content:"";display:block;position:absolute;top:-6px;width:11px;height:11px;pointer-events:none;z-index:1;background:var(--plus) center/11px 11px no-repeat}
.cp-sec.st-bloc::before,#faq::before,.cta-mid::before{left:calc(var(--rail) - 5px);right:auto}
.cp-sec.st-bloc::after,#faq::after,.cta-mid::after{right:calc(var(--rail) - 5px);left:auto}
/* le hero n a plus ses propres verticales : les rails fixes s en chargent */
section.cp-cadre.cadre-v::before,section.cp-cadre.cadre-v::after{content:"";display:block;position:absolute;top:0;width:1px;height:520px;pointer-events:none;z-index:0;background:linear-gradient(180deg,var(--line) 0%,var(--line) 58%,transparent 100%)}
section.cp-cadre.cadre-v::before{left:var(--rail);right:auto}
section.cp-cadre.cadre-v::after{right:var(--rail);left:auto}
/* Cadre video : un bloc sombre arrondi pose sur la page claire. Le decor
   3D et les lueurs de l ancien ecran ne s appliquent plus. */
[data-scroll-card].cp-video{position:relative;z-index:10;margin:52px auto 0!important;width:100%;max-width:1003px;padding:12px;border-radius:26px;background:#0d0f12;border:1px solid rgba(255,255,255,.10);box-shadow:0 1px 3px rgba(15,20,40,.07);transform:none!important}

[data-scroll-card].cp-video::before,[data-scroll-card].cp-video::after{display:none}
@media(max-width:768px){[data-scroll-card].cp-video{padding:8px;border-radius:20px;margin-top:38px!important}}
/* Bande de logos clients : un ruban qui defile sous le cadre video. Le
   masque est porte par le rail et non par la piste, sinon il defilerait
   avec elle au lieu de rester aux bords de l ecran. */




.cp-entete{background:none;border:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:20px 16px}
@media(min-width:768px){.cp-entete{padding:28px 20px}}
.cp-entete-in{position:relative;background:#fff;border:1px solid rgba(15,15,20,.08);border-radius:18px;box-shadow:0 1px 2px rgba(15,15,20,.05),0 14px 34px -20px rgba(15,15,20,.35);padding:9px 10px 9px 16px}
.cp-entete .cp-mot{color:#0f0f14}
.cp-entete .cp-lien{color:#5b6172}
.cp-entete .cp-lien:hover{color:#0f0f14}
.cp-entete .cp-connexion{color:#3d4356;text-decoration:none}
.cp-entete .cp-connexion:hover{color:#0f0f14}


.hero-clair.cadre-v{background:radial-gradient(ellipse 78% 52% at 50% -10%,rgba(120,150,235,.20),transparent 72%),linear-gradient(180deg,#f4f6fb,#f4f6fb)}
/* la trame de points passe en negatif */
.hero-clair .dot-bg{background-image:radial-gradient(rgba(20,32,70,.11) 1px,transparent 0)}
.hero-clair .dot-bg::before{background-image:radial-gradient(2.2px 2.2px at 12% 6%,rgba(46,74,160,.42),transparent),radial-gradient(1.8px 1.8px at 63% 11%,rgba(40,60,120,.26),transparent),radial-gradient(2.4px 2.4px at 29% 19%,rgba(46,74,160,.38),transparent),radial-gradient(1.7px 1.7px at 87% 24%,rgba(40,60,120,.22),transparent),radial-gradient(2.1px 2.1px at 45% 31%,rgba(46,74,160,.34),transparent),radial-gradient(1.8px 1.8px at 8% 39%,rgba(40,60,120,.2),transparent),radial-gradient(2.3px 2.3px at 74% 44%,rgba(46,74,160,.34),transparent),radial-gradient(1.7px 1.7px at 37% 48%,rgba(40,60,120,.22),transparent)}
.hero-clair .dot-bg::after{background-image:radial-gradient(2.8px 2.8px at 22% 9%,rgba(56,102,255,.30),transparent),radial-gradient(2px 2px at 78% 17%,rgba(40,60,120,.18),transparent),radial-gradient(2.6px 2.6px at 52% 27%,rgba(56,102,255,.26),transparent),radial-gradient(1.9px 1.9px at 15% 34%,rgba(40,60,120,.16),transparent),radial-gradient(2.5px 2.5px at 91% 41%,rgba(56,102,255,.24),transparent),radial-gradient(2.1px 2.1px at 41% 47%,rgba(40,60,120,.15),transparent)}
/* le halo derriere le titre : bleu electrique dilue, pas un aplat */
.hero-clair .bg-primary\/30{background-color:transparent}
.hero-clair .meteor{display:none}
/* titre : encre pour la premiere ligne, bleu electrique pour la seconde */
.hero-clair .text-hero{background-image:linear-gradient(180deg,#121729,#121729,rgba(18,23,41,.78))}
.hero-clair .text-glow{background-image:linear-gradient(180deg,#3a63e8,#1f3fc4)}
/* la pastille et les trois puces : verre blanc translucide -> bleu tres pale */
.hero-clair .border-white\/15,.hero-clair .border-white\/12{border-color:#dfe3ee}
.hero-clair .bg-white\/5{background-color:#fff;box-shadow:0 1px 2px rgba(20,32,70,.05)}
.hero-clair [data-scroll-card] .bg-white\/5{background-color:rgba(255,255,255,.05);box-shadow:none}
.hero-clair [data-scroll-card] .border-white\/12,.hero-clair [data-scroll-card] .border-white\/15{border-color:rgba(255,255,255,.12)}
.hero-clair [data-scroll-card] .text-white\/70{color:rgba(255,255,255,.7)}

.hero-clair .text-white\/70{color:#2c3550}
.hero-clair .hero-sub{color:#4a5570}
.hero-clair .hero-sub b{color:#2c3550}
/* le bouton reste le seul aplat sature, en bleu electrique plein */
.hero-clair .cta-hero{background:linear-gradient(135deg,#4a76ff 0%,#2450ea 58%,#1a3bb8 100%);box-shadow:0 2px 4px rgba(20,40,120,.18),0 14px 28px -12px rgba(26,59,184,.55)}
.hero-clair .cta-hero:hover{box-shadow:0 3px 6px rgba(20,40,120,.2),0 18px 34px -12px rgba(26,59,184,.62)}
/* le point clignotant tombait a 2,1 de contraste sur blanc */
.hero-clair .bg-accent{background-color:#0b44ff}



    /* Le cadre sombre est retire : la video se pose seule sur la page claire. */
    [data-scroll-card].cp-video{padding:0;background:none;border:0;border-radius:16px;overflow:hidden;box-shadow:0 26px 64px -34px rgba(15,20,40,.34)}
    @media(max-width:768px){[data-scroll-card].cp-video{padding:0;border-radius:12px}}

    /* Le cadre noir incruste est desormais rogne a l encodage : plus besoin
       d agrandir en CSS, ce qui reagrandissait l image et coutait en nettete.
       --cpv-zoom reste disponible si un rognage d appoint devient utile. */
    .cp-video-el{transform:scale(var(--cpv-zoom,1));transform-origin:center center}

    /* Commandes : au survol, et en permanence quand la video est en pause.
       Le fondu est porte par l etat survole, pas par l etat de repos : il joue
       donc a l apparition, et le menu part net des que la souris s en va. */
    .cpv-ui{position:absolute;inset:0;border-radius:inherit;opacity:0;pointer-events:none;z-index:2}
    .cp-video:hover .cpv-ui,.cp-video.cpv-pause .cpv-ui{opacity:1;transition:opacity .28s cubic-bezier(.4,0,.2,1)}
    /* Au clavier seulement : un clic souris ne doit pas figer le menu affiche.
       La classe est posee par le script, qui suit l intention de navigation. */
    .cp-video.cpv-clavier .cpv-ui{opacity:1;transition:opacity .28s cubic-bezier(.4,0,.2,1)}
    .cpv-ui::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(10,12,18,.24) 0,rgba(10,12,18,0) 22%,rgba(10,12,18,0) 55%,rgba(10,12,18,.55) 100%)}

    .cpv-son-pilule,.cpv-centre,.cpv-b{pointer-events:auto;border:0;cursor:pointer;font:inherit;color:#fff;display:inline-flex;align-items:center;justify-content:center;transition:background .25s cubic-bezier(.4,0,.2,1),transform .25s cubic-bezier(.4,0,.2,1),opacity .25s ease}

    /* pilule de son : elle ne sert qu avant le premier declenchement */
    .cpv-son-pilule{position:absolute;z-index:3;top:14px;right:14px;gap:8px;height:36px;padding:0 15px 0 12px;border-radius:999px;background:rgba(16,18,24,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:13px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
    .cpv-son-pilule svg{width:16px;height:16px;flex:none}
    .cpv-son-pilule:hover{background:rgba(16,18,24,.82)}
    .cp-video.cpv-son-on .cpv-son-pilule{opacity:0;pointer-events:none}

    /* gros bouton central */
    .cpv-centre{position:absolute;top:50%;left:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;background:rgba(16,18,24,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
    .cpv-centre:hover{background:rgba(16,18,24,.72);transform:scale(1.06)}
    .cpv-centre svg{width:22px;height:22px}

    /* barre du bas */
    .cpv-barre{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:12px;padding:14px 16px;pointer-events:auto}
    .cpv-b{flex:none;width:30px;height:30px;border-radius:8px;background:none}
    .cpv-b:hover{background:rgba(255,255,255,.16)}
    .cpv-b svg{width:18px;height:18px}
    .cpv-temps{flex:none;margin:0;display:flex;align-items:center;gap:5px;font-size:12.5px;font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:#fff}
    .cpv-temps b{font-weight:700}
    .cpv-temps span,.cpv-temps i{font-style:normal;font-weight:500;color:rgba(255,255,255,.6)}

    /* piste de progression : cliquable et glissable */
    .cpv-piste{position:relative;flex:1;min-width:0;height:16px;display:flex;align-items:center;cursor:pointer;pointer-events:auto;touch-action:none}
    .cpv-piste::before{content:"";position:absolute;left:0;right:0;height:4px;border-radius:2px;background:rgba(255,255,255,.3)}
    .cpv-remplie{position:absolute;left:0;height:4px;width:0;border-radius:2px;background:#3866ff}
    .cpv-poignee{position:absolute;left:0;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.4);opacity:0;transition:opacity .2s ease}
    .cpv-piste:hover .cpv-poignee,.cpv-piste:focus-visible .cpv-poignee,.cp-video.cpv-glisse .cpv-poignee{opacity:1}
    .cpv-piste:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:4px}
    .cpv-son-pilule:focus-visible,.cpv-centre:focus-visible,.cpv-b:focus-visible{outline:2px solid #fff;outline-offset:3px}


    /* Reglage du volume : il se deplie au survol du haut-parleur. */
    .cpv-son-groupe{flex:none;display:flex;align-items:center;gap:0;pointer-events:auto}
    .cpv-vol{-webkit-appearance:none;appearance:none;flex:none;width:0;opacity:0;margin:0;height:4px;border-radius:2px;border:0;cursor:pointer;
      transition:width .26s cubic-bezier(.4,0,.2,1),opacity .2s ease,margin-left .26s cubic-bezier(.4,0,.2,1);
      background:linear-gradient(to right,#fff 0,#fff var(--vol,0%),rgba(255,255,255,.32) var(--vol,0%),rgba(255,255,255,.32) 100%)}
    .cpv-son-groupe:hover .cpv-vol,.cpv-son-groupe:focus-within .cpv-vol{width:62px;opacity:1;margin-left:9px}
    .cpv-vol::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;border-radius:50%;background:#fff;border:0;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.45)}
    .cpv-vol::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:#fff;border:0;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.45)}
    .cpv-vol:focus{outline:none}
    .cpv-vol:focus-visible{outline:2px solid #fff;outline-offset:4px}
    /* le doigt n a pas de survol : sur tactile le curseur reste replie */
    @media(hover:none){.cpv-son-groupe:hover .cpv-vol{width:0;opacity:0;margin-left:0}}
    @media(prefers-reduced-motion:reduce){.cpv-vol{transition:none}}

    /* une seule icone a la fois, pilotee par l etat pose sur le conteneur */
    .cpv-i-on,.cpv-i-play,.cpv-i-quitte{display:none}
    .cp-video.cpv-son-on .cpv-i-on{display:block}
    .cp-video.cpv-son-on .cpv-i-off{display:none}
    .cp-video.cpv-pause .cpv-i-play{display:block}
    .cp-video.cpv-pause .cpv-i-pause{display:none}
    .cp-video.cpv-plein .cpv-i-quitte{display:block}
    .cp-video.cpv-plein .cpv-i-plein{display:none}

    /* plein ecran : la video occupe l ecran, les commandes restent dessus */
    .cp-video:fullscreen{width:100%;height:100%;max-width:none;margin:0!important;border-radius:0;background:#000;display:flex;align-items:center;justify-content:center;box-shadow:none}
    .cp-video:fullscreen .cp-video-el{width:100%;height:100%;aspect-ratio:auto;object-fit:contain;border-radius:0}

    @media(max-width:640px){
      .cpv-son-pilule{top:10px;right:10px;height:32px;padding:0 12px 0 10px;font-size:12px}
      .cpv-centre{width:52px;height:52px;margin:-26px 0 0 -26px}
      .cpv-centre svg{width:19px;height:19px}
      .cpv-barre{gap:9px;padding:10px 11px}
      .cpv-temps{font-size:11.5px}
      .cpv-b{width:28px;height:28px}
    }
    @media(prefers-reduced-motion:reduce){.cpv-ui,.cpv-son-pilule,.cpv-centre,.cpv-b,.cpv-poignee{transition:none}}
    

.so-carte{border-radius:26px;padding:38px 0;--so-ombre:0 0 0 1px rgba(20,60,134,.05),0 1px 1px -.5px rgba(10,30,74,.05),0 3px 3px -1.5px rgba(10,30,74,.06),0 6px 8px -3px rgba(10,30,74,.02),0 6px 12px -6px rgba(20,60,134,.03),0 24px 24px -12px rgba(20,60,134,.06)}
@media(min-width:768px){.so-carte{border-radius:34px;padding:42px 0}}
.so-grid{display:grid;gap:40px;grid-template-columns:minmax(0,1fr);align-items:center}
@media(min-width:940px){.so-grid{grid-template-columns:minmax(0,1fr) minmax(420px,560px);gap:52px}}
.so-h2{font-size:clamp(27px,3.6vw,40px);font-weight:800;letter-spacing:-.035em;line-height:1.07;margin:0 0 18px;color:#0f0f14;text-wrap:balance}
.so-lead{margin:0;font-size:16.5px;line-height:1.6;color:#6c6c76;max-width:44ch}
.so-flux{display:grid;gap:20px;grid-template-columns:minmax(0,1fr);align-items:center}
@media(min-width:940px){.so-flux{grid-template-columns:minmax(0,1fr) 76px auto;gap:0;align-items:stretch}.so-outils{grid-template-columns:1fr;grid-template-rows:repeat(6,1fr);gap:0}.so-chip{margin:4.5px 0}.so-cible{align-self:center}}
.so-outils{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:559px){.so-outils{gap:8px}.so-chip{gap:6px;padding:9px;font-size:12px}.so-chip svg{width:14px;height:14px}.so-chip--long{grid-column:1/-1}}
@media(min-width:560px){.so-outils{grid-template-columns:repeat(3,1fr)}}
@media(min-width:940px){.so-outils{grid-template-columns:1fr;gap:9px}}
.so-chip{display:flex;align-items:center;gap:9px;padding:11px 12px;min-width:0;border:1px solid #e6e8ee;border-radius:14px;background:#fff;font-size:13.5px;font-weight:600;color:#6c6c76;box-shadow:0 1px 2px rgba(15,15,20,.045)}
.so-chip{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.so-chip svg{width:17px;height:17px;flex:none;stroke:#aab3c2;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.so-ico{width:44px;height:27px;flex:none;object-fit:contain;display:block}@media(max-width:640px){.so-ico{width:36px;height:22px}}
.so-fleche{position:relative;display:flex;align-items:center;justify-content:center;color:#c8cfdb}
/* L energie qui remonte des six outils vers Callpit. Une comete par fil :
   un halo large qui traine derriere, un coeur court et lumineux devant, et
   une lueur qui s ouvre au point de jonction a chaque arrivee. Les delais
   sont negatifs pour qu il n y ait pas de temps mort au chargement. */
/* Le faisceau : le degre lui-meme se deplace le long du trace, coordonnees
   x1 et x2 animees en SVG natif. C est le mecanisme du composant React
   Animated Beam, sans React ni framer-motion. */
.so-nrj-c{fill:none;stroke-linecap:round;stroke-width:2;filter:drop-shadow(0 0 3px rgba(79,176,255,.55))}
/* Trois logos a gauche, trois a droite, Callpit au centre : la geometrie de
   la demo Animated Beam. Courbes quadratiques, meme courbure de 75, et un
   faisceau par branche qui part du logo vers le centre. */
.so-schema{position:relative;width:360px;max-width:100%;height:230px;margin:0 auto}
.so-faisceaux{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.so-rond{position:absolute;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#fff;box-shadow:var(--so-ombre)}
.so-rond img{width:26px;height:26px;object-fit:contain;display:block}
.so-r1{left:0;top:0}.so-r2{left:0;top:91px}.so-r3{left:0;top:182px}
.so-r4{right:0;top:0}.so-r5{right:0;top:91px}.so-r6{right:0;top:182px}
.so-noyau{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px}
@media(max-width:559px){.so-schema{transform:scale(.84);margin:-18px -29px}}
.so-hub{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
@media(min-width:0px){
.so-hub i{position:absolute;left:0;top:0;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:radial-gradient(circle,rgba(56,102,255,.42) 0%,rgba(56,102,255,.16) 45%,rgba(56,102,255,0) 70%);opacity:0;animation:so-hub 1.8s ease-out infinite}
.so-hub i:nth-child(2){animation-delay:-.6s}.so-hub i:nth-child(3){animation-delay:-1.2s}}
@keyframes so-hub{0%{transform:scale(.25);opacity:.9}65%{opacity:.12}100%{transform:scale(1.35);opacity:0}}
@media(max-width:939px){.so-nrj-c{filter:none}}
@media(prefers-reduced-motion:reduce){.so-nrj-c,.so-hub{display:none}}
.so-f-desk{display:none}
.so-f-mob{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:940px){.so-f-mob{display:none}.so-f-desk{display:block;position:absolute;inset:0;width:100%;height:100%}}

.so-cible{position:relative;display:flex;align-items:center;justify-content:center;min-height:158px;overflow:hidden;border-radius:24px;padding:30px 26px;text-align:center;color:#0f0f14;background:#fff;box-shadow:inset 0 0 0 1.5px rgba(56,102,255,.30),0 2px 6px rgba(20,32,80,.06),0 22px 44px -18px rgba(56,102,255,.34)}
@media(min-width:940px){.so-cible{width:236px}}

.so-logo{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:rgba(255,255,255,.16)}
.so-logo svg,.so-logo img{width:28px;height:28px}
.so-nom{position:relative;margin-top:16px;font-size:24px;font-weight:700;letter-spacing:-.035em;line-height:1}
.so-mot{position:relative;display:block;width:auto;max-width:100%;height:50px;object-fit:contain}
/* Mise en page editoriale calquee sur TrendTrack : une etiquette entre
   crochets, le titre, puis l accroche et le bouton sur la meme ligne ; en
   dessous un cadre a filets fins qui porte le visuel, deux legendes separees
   par un filet, et la bande hachuree qui ferme le bloc. */
.so-eti{display:flex;align-items:center;gap:.55em;margin:0;line-height:20px;font-family:inherit;font-size:14px;font-weight:600;letter-spacing:-.01em;text-transform:none;color:#3866ff}
.so-eti i{display:none}
.so-tete{display:flex;flex-direction:column;gap:16px;padding:0 72px}
.so-tete-bas{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 40px;flex-wrap:wrap}
.so-tete .so-h2{margin:0}
.so-tete .so-lead{margin:0;max-width:48ch}
/* Six couches d ombre et aucune bordure : le trait de 1px est la premiere
   couche. Releve sur trendtrack.io, encre re-teintee vers notre bleu. C est
   ce qui separe une carte qui a l air dessinee d une carte qui a l air posee. */
.so-cadre{--fil:#e4e7f0;--so-ombre:0 0 0 1px rgba(20,60,134,.05),0 1px 1px -.5px rgba(10,30,74,.05),0 3px 3px -1.5px rgba(10,30,74,.06),0 6px 8px -3px rgba(10,30,74,.02),0 6px 12px -6px rgba(20,60,134,.03),0 24px 24px -12px rgba(20,60,134,.06);position:relative;margin-top:80px;display:grid;grid-template-columns:1fr 1fr;border-left:1px solid var(--fil);border-right:1px solid var(--fil)}
.so-panneau{display:flex;flex-direction:column;min-width:0}
.so-panneau+.so-panneau{border-left:1px solid var(--fil)}
.so-vue{padding:26px 14px;display:flex;align-items:flex-start;justify-content:center}
.so-vue .so-flux{max-width:100%;margin:0}
@media(min-width:940px){
.so-vue{height:372px;padding:26px 24px 0}
.so-vue .so-flux{width:320px;grid-template-columns:minmax(0,1fr) 180px auto}
.so-vue .so-chip{justify-self:end;width:auto;margin:3px 0;padding:9px;gap:0;border-radius:14px;border:0;background:#fff;box-shadow:var(--so-ombre)}
.so-vue .so-ico{width:46px;height:30px}
.so-vue .so-cible{width:64px;min-height:0;padding:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
}
.so-lg{padding:24px 44px 36px;flex:1}
.so-lg h3{margin:0 0 10px;font-size:18px;font-weight:500;line-height:25.2px;letter-spacing:-.112px;color:#0f0f10}
/* Chez eux le texte d une carte ne va pas jusqu au bord. Ce n est PAS une
   largeur maximale : c est text-wrap:balance, qui garde le meme nombre de
   lignes et les egalise. Releve sur leur page : leurs lignes font 366, 353
   et 368 px dans une boite de 511, et la propriete calculee vaut bien
   balance. Leurs titres, eux, restent en wrap normal. */
.so-lg p{margin:0;font-size:16px;font-weight:400;line-height:22.4px;letter-spacing:-.112px;color:rgba(15,15,16,.73)}
.so-lg p{text-wrap:balance}
/* meme chose pour l accroche : la propriete donne exactement les memes deux
   lignes que mes retours forces (417 et 375 px), mais elle se recalcule a
   toutes les largeurs au lieu de casser sur un ecran plus etroit.
   Portee a .so-carte : les autres sections gardent leur reglage. */
.so-carte .so-lead,#produit .so-lead{text-wrap:balance}
section.cp-sec.st-bloc.so-gris{padding-top:100px!important;padding-bottom:0!important}
.so-gris .so-carte{padding:0!important}
/* --- LA BANDE DE PASTILLES, RELEVEE SUR TRENDTRACK LE 04/09/2026 ---
     conteneur des pastilles  1056 px centre, padding 20, gap 10 / 12
     filets                   1 px de chaque cote du conteneur
     hachure                  UNIQUEMENT sur les deux bandes laterales, jamais
                              derriere les pastilles
     trame                    masque SVG de 8 px, une diagonale d un pixel,
                              applique a currentColor a 6 pour cent : elle
                              prend donc la couleur du texte et tient aussi
                              bien sur clair que sur sombre
   Notre bande d avant etait hachuree sur toute sa largeur, pastilles comprises,
   avec un degrade raye a 45 degres. Les deux filets verticaux n existaient pas.
   Un ecart impose par la mise en page : chez eux les bandes vont jusqu au bord
   de l ecran, leur page etant une surface continue. Nos sections sont des cartes
   blanches arrondies, les bandes s arretent donc au bord de la carte, sinon
   elles deborderaient sur le fond sombre. */
.so-hach{position:relative;display:flex;align-items:center;justify-content:center;gap:10px 12px;flex-wrap:wrap;padding:20px;border-top:1px solid var(--fil,#e4e7f0);border-bottom:1px solid var(--fil,#e4e7f0);background-image:linear-gradient(var(--fil,#e4e7f0),var(--fil,#e4e7f0)),linear-gradient(var(--fil,#e4e7f0),var(--fil,#e4e7f0));background-size:1px 100%,1px 100%;background-position:calc(50% - 528px) 0,calc(50% + 528px) 0;background-repeat:no-repeat}
/* Les bandes laterales vont jusqu au bord de la SURFACE CLAIRE du site, pas
   jusqu au bord du bloc. On leur donne donc 50vw de large : c est .hh-clair,
   en overflow:hidden et large de 1409 px, qui les arrete pile au bon endroit.
   Elles sont en position absolue, donc cette largeur n ajoute aucune barre de
   defilement horizontale.
   Le filet du haut est porte par la bande ELLE-MEME et non par la trame : une
   opacite de 6 pour cent sur tout l element aurait aussi delave le filet. */
/* --fil est declaree sur .so-cadre. La bande ayant ete sortie du cadre, la
   variable n y est plus heritee, et un var() qui ne resout pas annule TOUTE la
   declaration : les filets disparaissaient sans erreur visible. D ou le repli. */
.so-cote{position:absolute;top:-1px;bottom:-1px;width:50vw;pointer-events:none;border-top:1px solid var(--fil,#e4e7f0);border-bottom:1px solid var(--fil,#e4e7f0)}
.so-cote--g{right:calc(50% + 528px)}
.so-cote--d{left:calc(50% + 528px)}
/* --- LES TROIS MONTANTS, RELEVES SUR TRENDTRACK LE 04/09/2026 --- so-montants
   Chez eux le trait du MILIEU (.shop_item__border) n est pas un bord mais un
   element de 1 px portant
     background: linear-gradient(rgba(0,0,0,0), rgba(15,15,16,.06))
   soit transparent en haut, plein en bas. C est ce qui lui donne l air de ne
   commencer qu a mi-hauteur : il est bien la sur toute la hauteur, mais
   invisible au depart. Un bord ne peut pas faire ca, d ou le passage en fond.
   Les deux montants LATERAUX montent jusqu en haut de la carte et s effacent
   vers le titre. Ils sont poses sur le cadre avec un depassement de 230 px
   vers le haut : la carte commence a 1529, le cadre a 1766. */
.so-panneau+.so-panneau{border-left:0;background-image:linear-gradient(180deg,rgba(228,231,240,0) 0%,rgba(228,231,240,.22) 22%,rgba(228,231,240,.58) 40%,var(--fil,#e4e7f0) 62%,var(--fil,#e4e7f0) 100%);background-size:1px 100%;background-position:0 0;background-repeat:no-repeat}
.so-cadre::before,.so-cadre::after{content:"";position:absolute;top:-300px;bottom:0;width:1px;pointer-events:none;z-index:1;background:linear-gradient(180deg,rgba(228,231,240,0) 0%,rgba(228,231,240,.16) 14%,rgba(228,231,240,.42) 26%,rgba(228,231,240,.72) 35%,var(--fil,#e4e7f0) 44%,var(--fil,#e4e7f0) 100%)}
.so-cadre::before{left:-1px}
.so-cadre::after{right:-1px}
/* --- L ETIQUETTE, RELEVEE SUR TRENDTRACK LE 04/09/2026 --- so-eti-tt
     police       monospace, la leur est Geistmono ; on prend la mono du
                  systeme, meme dessin de principe et aucune fonte a charger
     taille       14 px, casse capitales, interlettre -0,112
     ecart        4 px entre les crochets et le mot
     mot          la couleur du texte a 73 pour cent, graisse 400
     crochets     la couleur de marque, graisse 500 (leur vert, notre bleu)
   Le mot est un simple noeud de texte entre les deux <i> : en flex il devient
   un element anonyme, l ecart de 4 px s applique donc bien de part et d autre. */
.so-tete .so-eti{margin:0 0 14px;display:inline-flex;align-items:center;align-self:flex-start;width:fit-content;padding:0;background:none;border-radius:0;font-family:inherit;font-size:14px;font-weight:600;line-height:20px;letter-spacing:-.01em;text-transform:none;color:#3866ff}
.so-tete .so-eti i{display:none}
@media(max-width:939px){
  .so-panneau+.so-panneau{background-image:none;border-top:1px solid var(--fil,#e4e7f0)}
  .so-cadre::before,.so-cadre::after{top:-160px}
}
.so-cote::before{content:"";position:absolute;inset:0;background:#0f0f14;opacity:.06;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath fill='%23000' d='M0 0h1v1H0zM1 1h1v1H1zM2 2h1v1H2zM3 3h1v1H3zM4 4h1v1H4zM5 5h1v1H5zM6 6h1v1H6zM7 7h1v1H7z'/%3E%3C/svg%3E") 0 0/8px 8px;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath fill='%23000' d='M0 0h1v1H0zM1 1h1v1H1zM2 2h1v1H2zM3 3h1v1H3zM4 4h1v1H4zM5 5h1v1H5zM6 6h1v1H6zM7 7h1v1H7z'/%3E%3C/svg%3E") 0 0/8px 8px}
/* currentColor ne pouvait pas servir ici : le body est en text-white, la
   trame serait blanche sur blanc. L encre est donc fixee, la bande etant de
   toute facon toujours posee sur la carte claire. */
.so-hach .so-tag svg{width:16px;height:16px}
/* la section prend la largeur de la leur : 1200 et non 1080 */
.so-gris .cp-wrap{max-width:1200px}
/* ombre exacte de trendtrack (--sh-base, six couches, relevee le 04/09/2026).
   Elle etait a none : la regle appelait var(--so-ombre), declaree sur .so-cadre,
   dont la bande a ete sortie. Un var() qui ne resout pas annule TOUTE la
   declaration, sans erreur, d ou des pastilles blanches sur blanc. Ici la
   valeur est ecrite en dur : plus rien ne peut la faire disparaitre. */
.so-tag{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 12px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px rgba(6,86,134,.04),0 1px 1px -.5px rgba(1,34,54,.04),0 3px 3px -1.5px rgba(1,34,54,.06),0 6px 8px -3px rgba(1,34,54,.01),0 6px 12px -6px rgba(6,86,134,.02),0 24px 24px -12px rgba(6,86,134,.04);font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.112px;color:#0f0f10;white-space:nowrap}
.so-tag svg{width:15px;height:15px;flex:none;stroke:#3866ff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* La pastille centrale : degrade 135deg, deux reflets internes et cinq lueurs
   externes, exactement l empilement de leur logo de radar. */
.so-pastille{position:relative;z-index:2;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(20,60,134,.10),0 1px 1px -.5px rgba(10,30,74,.05),0 3px 3px -1.5px rgba(10,30,74,.07),0 8px 12px -4px rgba(20,60,134,.07),0 24px 28px -12px rgba(20,60,134,.10)}
.so-pastille img{width:30px;height:30px;object-fit:contain;display:block}
.so-toast{position:absolute;left:50%;top:calc(100% + 20px);transform:translateX(-42%);display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:10px;background:#fff;box-shadow:var(--so-ombre);font-size:12.5px;font-weight:500;letter-spacing:-.112px;color:#0f0f10;white-space:nowrap}
.so-toast svg{width:13px;height:13px;flex:none;stroke:#3866ff;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:939px){.so-toast{position:static;transform:none;margin-top:16px}.so-cible{width:auto;min-height:0;padding:0;border-radius:0;background:none;box-shadow:none;overflow:visible;flex-direction:column;gap:0}.so-hach{gap:8px;padding:16px 14px}}
/* TELEPHONE (2026-09-12) : les quatre pastilles tombaient l une sous l autre,
   centrees et de largeurs differentes, ce qui faisait un escalier. Elles
   prennent maintenant toute la largeur, alignees a gauche : meme bord gauche,
   meme bord droit, icones sur une seule colonne. */
@media(max-width:560px){
.so-hach{flex-direction:column;align-items:stretch;gap:8px;padding:18px 16px}
.so-hach .so-tag{width:100%;justify-content:flex-start;padding:10px 16px 10px 14px}
}
/* Le panneau de droite : la maquette produit, calquee sur la grammaire de
   trendtrack.io. Barre de navigateur, colonne d icones, deux colonnes, deux
   graphiques a gauche, fiche et vignettes a droite, et le bas de la carte qui
   s efface au masque pour suggerer qu il y a du produit au-dela du cadre. */
@media(max-width:939px){.so-outils{grid-template-columns:repeat(6,auto);justify-content:center;gap:8px}.so-chip{padding:9px;gap:0}.so-ico{width:40px;height:26px}}
@media(max-width:559px){.so-outils{grid-template-columns:repeat(3,auto)}}
.so-mock{position:relative;display:flex;flex-direction:column;width:490px;max-width:100%;height:330px;border-radius:20px;background:#fff;box-shadow:var(--so-ombre);overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 64%,transparent 99%);mask-image:linear-gradient(to bottom,#000 0%,#000 64%,transparent 99%)}
.mk-bar{position:relative;flex:none;display:flex;align-items:center;height:40px;padding:0 12px}
.mk-logo{display:block;width:22px;height:22px}
.mk-logo img{width:22px;height:22px;object-fit:contain;display:block}
.mk-url{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;height:22px;padding:0 10px;border-radius:6px;background:#f6f7f9;font-size:10.5px;font-weight:400;color:#8a8e98;white-space:nowrap}
.mk-url svg{width:10px;height:10px;flex:none;color:#a8adb8}
.mk-corps{display:flex;flex:1;min-height:0}
.mk-nav{flex:none;display:flex;flex-direction:column;align-items:center;gap:15px;width:40px;padding-top:15px}
.mk-nav i{display:grid;place-items:center;width:20px;height:20px}
/* Icones redessinees sur une grille de 16, souvent en aplat, comme les leurs.
   Un trace prevu pour 24 et reduit a 13 px rend le trait mou et flou. */
.mk-nav svg{width:15px;height:15px;color:#c6cad4}
.mk-nav i.on svg{color:#3866ff}
.mk-main{flex:1;display:flex;gap:16px;padding:14px 14px 0;min-width:0}
.mk-col{min-width:0}
.mk-g{flex:1.28}
.mk-d{flex:1}
.mk-sep{margin-top:12px;padding-top:12px;border-top:1px solid #f1f2f5}
.mk-t{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mk-t span{font-size:11.5px;font-weight:400;letter-spacing:-.01em;color:#8a8e98}
.mk-t b{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:600;letter-spacing:-.02em;color:#17181c}
.mk-t b s{width:5px;height:5px;flex:none;border-radius:50%;background:#3866ff;text-decoration:none}
.mk-t em{font-style:normal;font-size:10.5px;font-weight:500;color:#3866ff}
.mk-graf{display:block;width:100%;height:74px;margin-top:8px;overflow:visible}
.mk-graf2{height:52px}
.mk-trait{fill:none;stroke:#3866ff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.mk-trait2{stroke:#8aa6ff}
.mk-lab{margin:0 0 8px;font-size:11.5px;font-weight:400;letter-spacing:-.01em;color:#8a8e98}
.mk-lab2{display:flex;align-items:center;justify-content:space-between;margin:12px 0 8px}
.mk-lab2 b{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:#17181c}
.mk-lab2 b s{width:5px;height:5px;flex:none;border-radius:50%;background:#3866ff;text-decoration:none}
.mk-row{display:flex;align-items:center;gap:8px;height:30px;padding:0 9px;margin-bottom:6px;border-radius:10px;background:#fafbfc}
.mk-row u{display:grid;place-items:center;width:16px;height:16px;flex:none;text-decoration:none}
.mk-row u svg{width:13px;height:13px;color:#a8adb8}
.mk-row span{flex:1;min-width:0;font-size:11.5px;letter-spacing:-.01em;color:#5f636e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-row b{flex:none;font-size:11.5px;font-weight:600;color:#17181c}
.mk-row b.bd{padding:2px 6px;border-radius:5px;background:rgba(56,102,255,.09);color:#3866ff}
/* La note prend le traitement du Trustscore de trendtrack : le vrai logo de la
   source a la place d une etoile generique, et la valeur en pastille verte.
   Aucune affirmation nouvelle, la mention Note Google existait deja. */
.mk-row u.mk-src{width:15px;height:15px}
.mk-row u.mk-src img{display:block;width:100%;height:100%;object-fit:contain}
.mk-row b.mk-score{display:flex;align-items:center;gap:3px;padding:0;background:none;color:#17181c}
.mk-row b.mk-score i{font-style:normal;font-size:9.5px;font-weight:500;opacity:.65}
.mk-tuiles{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.mk-tuiles i{display:grid;place-items:center;aspect-ratio:1;border-radius:7px;background:#f4f6fa;font-style:normal;font-size:9.5px;font-weight:600;letter-spacing:.03em;color:#aab0bd}
/* Le mix : la recherche en haut, la liste qui defile a gauche, la fiche de
   l entreprise ouverte a droite. La piste porte deux fois la meme serie et se
   translate de la hauteur exacte d une serie, 672 px, donc la boucle ne se
   voit pas. Marge et pas gap, sinon le demi-tour tombe a cote. */
.mk-mix{flex-direction:column;gap:0;padding:12px 14px 0;overflow:hidden}
.mk-tete{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.mk-champ{display:flex;align-items:center;gap:7px;height:28px;padding:0 10px;border-radius:8px;background:#f6f7f9;font-size:11.5px;font-weight:500;letter-spacing:-.01em;color:#17181c;white-space:nowrap}
.mk-champ svg{width:12px;height:12px;flex:none;color:#a8adb8}
.mk-champ s{width:1px;height:12px;background:#e3e5ea;text-decoration:none}
.mk-champ em{font-style:normal;font-weight:400;color:#8a8e98}
.mk-nb{flex:none;font-size:11px;color:#8a8e98;white-space:nowrap}
.mk-duo{display:flex;gap:14px;flex:1;min-height:0}
.mk-flux{position:relative;flex:1.24;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 7%);mask-image:linear-gradient(to bottom,transparent 0,#000 7%)}
.mk-piste{will-change:transform}
.mk-e{display:flex;align-items:center;gap:8px;height:36px;margin-bottom:6px;padding:0 9px;border-radius:12px;background:#fafbfc}
.mk-e u{display:grid;place-items:center;width:22px;height:22px;flex:none;border-radius:7px;background:#eef2fb;font-style:normal;font-size:8.5px;font-weight:600;letter-spacing:.02em;color:#8a93a8;text-decoration:none}
/* Les pastilles d initiales laissent place aux logos des vrais clients. Fond
   blanc et filet interieur : les logos sombres comme Cana Plomb ou le H gardent
   leur bord, les logos clairs ne flottent pas. */
.mk-e u.cli{background:#fff;padding:2px;box-shadow:inset 0 0 0 1px rgba(15,20,40,.09)}
.mk-e u.cli img{display:block;width:100%;height:100%;object-fit:contain;border-radius:4px}
.mk-e span{flex:1;min-width:0}
.mk-e b{display:block;font-size:11px;font-weight:500;letter-spacing:-.01em;color:#17181c;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-e i{display:block;font-style:normal;font-size:9.5px;color:#8a8e98;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Les 16 notes de la liste portent le logo Google, seule source confirmee par
   le client le 04/09/2026. Il est pose en fond du ::before : un seul reglage,
   16 logos a l ecran, et zero balise en plus. La pastille passe au vert,
   comme celle de la fiche : le bleu reste la couleur de l interface Callpit,
   le vert celle d une note venue de l exterieur. */
/* note nue, encre foncee : chez eux la valeur n a pas de pastille, seule
   l icone porte la couleur. Le fond de la ligne suffit a la detacher. */
.mk-e em{display:flex;align-items:center;gap:4px;flex:none;font-style:normal;font-size:10px;font-weight:600;color:#17181c;padding:0;background:none}
/* La source varie d une ligne a l autre : Google, Maps ou Pages Jaunes.
   Choix du client le 04/09/2026, apres que je lui aie signale qu il n avait
   confirme que Google. Il a maintenu, la maquette etant illustrative. */
.mk-e em::before{content:"";flex:none;width:9px;height:9px;background-position:center;background-size:contain;background-repeat:no-repeat}
.mk-e em.src-g::before{background-image:url(/wp-content/themes/callpit-theme/img/logo-google.webp?v=1788445549)}
.mk-e em.src-m::before{background-image:url(/wp-content/themes/callpit-theme/img/logo-maps.webp?v=1788372460)}
.mk-e em.src-p::before{background-image:url(/wp-content/themes/callpit-theme/img/logo-pagesjaunes.webp?v=1788372460)}
/* Le filet gris de trendtrack. Chez eux le bloc interieur de la maquette
   (.illu_product__body) porte un vrai border de 1 px a 6 pour cent d encre,
   sans fond, avec un rayon plus petit que la carte qui l entoure : 9,85
   contre 13,13, soit un rapport de 0,75. La carte, elle, tire son propre
   filet de la premiere couche de --sh-base (0 0 0 1px a 4 pour cent).
   On applique le meme principe aux deux colonnes de la maquette. */
/* Les deux filets de la maquette, celui sous la barre et celui a droite de la
   colonne d icones, se croisaient en angle vif. Ils sont retires et remplaces
   par UN SEUL trait porte par la zone de contenu, qui tourne en arrondi.
   Et la carte recoit un vrai filet gris : la premiere couche de son ombre,
   a 5 pour cent de bleu, etait trop pale pour se lire. */
.so-mock{border:1px solid rgba(15,15,16,.07)}
/* TELEPHONE (2026-09-12) : la maquette d ecran fait 490 px de large et ne se
   reduit pas (max-width:100% est annule plus loin, et les enfants sont en px).
   Sur un telephone elle debordait de sa carte : la fiche de droite etait coupee
   net. On la met a l echelle. C est zoom et non transform : l animation d entree
   (.so-mock.reveal-in) pose deja un transform sur cette boite et l ecraserait. */
@media(max-width:939px){.so-mock{zoom:.78}}
@media(max-width:560px){.so-mock{zoom:.66}}
@media(max-width:420px){.so-mock{zoom:.56}}
.mk-main{border-top:1px solid #eceef2;border-left:1px solid #eceef2;border-top-left-radius:15px}
.mk-fiche{flex:1;min-width:0;padding:9px;border:1px solid rgba(15,15,16,.06);border-radius:14px}
.mk-flux{padding:5px;border:1px solid rgba(15,15,16,.06);border-radius:14px}
.mk-fh{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.mk-fh u{display:grid;place-items:center;width:26px;height:26px;flex:none;border-radius:7px;background:rgba(56,102,255,.10);font-style:normal;font-size:9px;font-weight:600;letter-spacing:.02em;color:#3866ff;text-decoration:none}
.mk-fh u.cli{background:#fff;padding:2px;box-shadow:inset 0 0 0 1px rgba(15,20,40,.09)}.mk-fh u.cli img{display:block;width:100%;height:100%;object-fit:contain;border-radius:5px}.mk-fh span{min-width:0}
.mk-fh b{display:block;font-size:11.5px;font-weight:600;letter-spacing:-.015em;color:#17181c;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-fh i{display:block;font-style:normal;font-size:10px;color:#8a8e98}
.mk-cta{display:flex;align-items:center;justify-content:center;gap:6px;height:30px;margin-top:4px;border-radius:8px;background:#fff;box-shadow:inset 0 0 0 1px rgba(15,20,40,.09);font-size:10.5px;font-weight:600;letter-spacing:-.01em;color:#17181c;white-space:nowrap}
.mk-cta svg{width:12px;height:12px;flex:none;stroke:#17181c;fill:none;stroke-width:2.4;stroke-linecap:round}
@keyframes mk-defile{from{transform:translateY(0)}to{transform:translateY(-672px)}}
.so-mock.reveal-in .mk-piste{animation:mk-defile 26s linear infinite}
@media(prefers-reduced-motion:reduce){.so-mock .mk-piste{animation:none!important}}
/* le trait se dessine, les lignes montent : une seule fois, a l entree */
@keyframes mk-trace{to{stroke-dashoffset:0}}
@keyframes mk-up{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.so-mock.reveal-in .mk-trait{stroke-dasharray:210;stroke-dashoffset:210;animation:mk-trace 1.5s cubic-bezier(.22,1,.36,1) .25s both}
.so-mock.reveal-in .mk-trait2{animation-delay:.5s}
.so-mock.reveal-in .mk-row,.so-mock.reveal-in .mk-tuiles i{animation:mk-up .55s cubic-bezier(.22,1,.36,1) both}
.so-mock.reveal-in .mk-row:nth-child(2){animation-delay:.30s}.so-mock.reveal-in .mk-row:nth-child(3){animation-delay:.38s}.so-mock.reveal-in .mk-row:nth-child(4){animation-delay:.46s}
.so-mock.reveal-in .mk-tuiles i:nth-child(1){animation-delay:.60s}.so-mock.reveal-in .mk-tuiles i:nth-child(2){animation-delay:.64s}.so-mock.reveal-in .mk-tuiles i:nth-child(3){animation-delay:.68s}.so-mock.reveal-in .mk-tuiles i:nth-child(4){animation-delay:.72s}
.so-mock.reveal-in .mk-tuiles i:nth-child(5){animation-delay:.76s}.so-mock.reveal-in .mk-tuiles i:nth-child(6){animation-delay:.80s}.so-mock.reveal-in .mk-tuiles i:nth-child(7){animation-delay:.84s}.so-mock.reveal-in .mk-tuiles i:nth-child(8){animation-delay:.88s}
@media(prefers-reduced-motion:reduce){.so-mock .mk-trait,.so-mock .mk-row,.so-mock .mk-tuiles i{animation:none!important;stroke-dasharray:none;stroke-dashoffset:0;opacity:1;transform:none}}
@media(max-width:559px){.so-mock{max-width:none;flex:none;transform:scale(.6);margin:-66px -98px}}
@media(max-width:860px){
.so-tete .so-h2{margin:0}
section.cp-sec.st-bloc.so-gris{padding-top:64px!important}
.so-tete{padding:0}
.so-cadre{grid-template-columns:1fr}
.so-panneau+.so-panneau{border-left:0;border-top:1px solid var(--fil)}
.so-cadre{margin-top:32px}
.so-vue{padding:26px 14px 18px}
.so-lg{padding:22px 18px}
}


  /* --- PARCOURS : les trois etapes reunies, sur le modele de trendtrack ---
     Releve sur trendtrack.io le 04/09/2026, section BrandTracker, valeurs
     calculees reprises telles quelles :
       scene    padding 24 / 48, les visuels empiles, un seul montre
       nav      3 colonnes, gap 32, padding 32 / 40 / 48
       bouton   gap 12, padding 24 a gauche et 8 a droite, rayon 16
       courant  opacite 1 et icone coloree, les deux autres a 0,5
       jauge    un trait de 1 px a gauche, rempli du haut vers le bas
     Deux ecarts assumes :
     1. leurs panneaux inactifs sont en visibility:hidden, les notres en
        display:none. Nos trois animations demarrent sur un observateur
        d intersection : masquees en visibility elles se joueraient toutes
        les trois a la fois, hors de vue, et seraient finies a l arrivee.
        En display:none elles ne rencontrent l observateur qu au moment ou
        leur onglet passe devant : chacune demarre donc quand on la regarde.
     2. leur vert #0ced1e devient notre bleu #3866ff. */
  /* --- L OSSATURE DE LA SECTION, RELEVEE SUR TRENDTRACK LE 04/09/2026 ---
   Section BrandTracker, qui est le modele de celle-ci. Leurs valeurs :
     entete  max-width 1056, padding 100 / 40 / 60, gap 28, filets VERTICAUX
             seuls : le bas de la boite est ferme par le filet du bloc suivant
     bloc    max-width 1056, filets verticaux + horizontaux haut et bas
     cotes   hachures, collees au bord du bloc
   Comme pour la bande de pastilles, nos cotes font 50vw et c est .hh-clair,
   en overflow:hidden, qui les arrete au bord de la surface claire. Ils portent
   aussi les filets horizontaux, sans quoi ceux-ci s arreteraient a 1056. */
/* produit-colle : la section ne porte plus d espacement en haut, c est
   l entete qui le porte avec ses 100 px, exactement comme chez eux ou le
   conteneur est en data-pt=0. Sans ca les deux filets verticaux du carre
   demarraient sous le rembourrage et ne rejoignaient pas le trait du dessus. */
#produit{padding-top:0!important}
#produit .so-tete{max-width:1056px;margin:0 auto;padding:100px 40px 60px;gap:28px;border-left:1px solid var(--fil,#e4e7f0);border-right:1px solid var(--fil,#e4e7f0)}
/* produit-centre : leur entete de section BrandTracker est une colonne
   entierement centree. Structure relevee :
     .flex-col.gap-16   etiquette centree, titre centre, accroche centree
                        dans un bloc de 446 px de large
     gap 28             puis le bouton, centre lui aussi, en dessous
   Notre .so-tete-bas posait l accroche a gauche et le bouton a droite : il
   repasse en colonne centree, avec leur ecart de 28. */
#produit .so-tete{align-items:center;text-align:center;gap:16px}
#produit .so-eti{margin-left:auto;margin-right:auto}
#produit .so-h2{text-align:center;max-width:100%}
#produit .so-tete-bas{flex-direction:column;align-items:center;justify-content:center;gap:28px;width:100%;margin-top:12px}
#produit .so-lead{text-align:center;max-width:456px;margin:0 auto}
#produit .pa{position:relative;max-width:1056px;margin:0 auto;border:1px solid var(--fil,#e4e7f0)}
#produit .pa-cote{position:absolute;top:-1px;bottom:-1px;width:50vw;pointer-events:none;border-top:1px solid var(--fil,#e4e7f0);border-bottom:1px solid var(--fil,#e4e7f0)}
#produit .pa-cote--g{right:100%}
#produit .pa-cote--d{left:100%}
#produit .pa-cote::before{content:"";position:absolute;inset:0;background:#0f0f14;opacity:.06;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath fill='%23000' d='M0 0h1v1H0zM1 1h1v1H1zM2 2h1v1H2zM3 3h1v1H3zM4 4h1v1H4zM5 5h1v1H5zM6 6h1v1H6zM7 7h1v1H7z'/%3E%3C/svg%3E") 0 0/8px 8px;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath fill='%23000' d='M0 0h1v1H0zM1 1h1v1H1zM2 2h1v1H2zM3 3h1v1H3zM4 4h1v1H4zM5 5h1v1H5zM6 6h1v1H6zM7 7h1v1H7z'/%3E%3C/svg%3E") 0 0/8px 8px}
@media(max-width:900px){
  #produit .so-tete{padding:56px 20px 36px;gap:20px}
  #produit .pa-cote{display:none}
}
  .pa-scene{display:grid;padding:24px 48px;overflow:hidden}
  .pa-panneau{position:relative;z-index:0;grid-area:1/1;display:flex;align-items:center;justify-content:center;width:100%;min-height:470px}.pa-panneau[data-pa-etat="actif"]{z-index:1;opacity:1;transition:none}
  .pa-panneau[data-pa-etat="inactif"]{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .45s cubic-bezier(.32,.72,0,1),visibility 0s linear .45s}
  .pa-panneau[data-pa-etat="masque"]{opacity:0;visibility:hidden;pointer-events:none;transition:none}
  .pa-panneau>*{width:100%;margin-left:auto;margin-right:auto}
  .pa-panneau .ia-scene{max-width:100%}
  
  

  .pa-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;padding:32px 40px 48px}
  .pa-btn{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:12px;margin:0;padding:0 8px 0 24px;background:none;border:0;border-radius:16px;font:inherit;color:#0f0f10;text-align:left;cursor:pointer;opacity:.5;transition:opacity .45s cubic-bezier(.32,.72,0,1)}
  .pa-btn[data-pa-etat="actif"]{opacity:1}
  .pa-btn:focus-visible{outline:2px solid #3866ff;outline-offset:3px}
  .pa-btn-tete{display:flex;flex-direction:column;gap:8px}
  .pa-ico{display:block;width:18px;height:18px;color:currentColor;transition:color .45s cubic-bezier(.32,.72,0,1)}
  .pa-ico svg{display:block;width:18px;height:18px}
  .pa-btn[data-pa-etat="actif"] .pa-ico{color:#3866ff}
  .pa-titre{display:block;font-size:16px;font-weight:500;line-height:1.4;color:#0f0f10}
  .pa-txt{display:block;font-size:14px;font-weight:400;line-height:1.4;color:rgba(15,15,16,.73)}
  .pa-bar{position:absolute;left:0;top:0;bottom:0;width:1px;overflow:hidden;background:rgba(15,15,16,.08)}
  .pa-prog{display:block;width:100%;height:100%;background:#3866ff;transform:scaleY(0);transform-origin:50% 0}
  .pa-btn[data-pa-etat="actif"] .pa-prog{animation:pa-jauge 8s linear forwards}
  .pa[data-pa-vu="non"] .pa-prog{animation-play-state:paused}
  @keyframes pa-jauge{from{transform:scaleY(0)}to{transform:scaleY(1)}}

  @media(max-width:900px){
    .pa{margin-top:28px}
    .pa-scene{padding:0}
    .pa-panneau{min-height:0}
    .pa-nav{grid-template-columns:1fr;gap:0;padding:16px 0}
    .pa-btn{padding:16px 8px 16px 24px}
    .pa-bar{background:transparent}
  }
  @media(prefers-reduced-motion:reduce){
    .pa-btn,.pa-ico{transition:none}
    .pa-btn[data-pa-etat="actif"] .pa-prog{animation:none;transform:scaleY(1)}
  }
  

/* ===== LES TROIS ANIMATIONS DU PARCOURS =====
   La CHARTE vient de trendtrack (bloc « Demandez a l IA »), les SUJETS sont les
   notres : trois scenes qui racontent trois choses differentes.
     carte blanche   rayon 14, padding 8, ombre a six couches
     texte mini      10 px / 14 px, poids 500 ; secondaire a 50 pour cent
     etiquette       18 px de haut, rayon 6, encre a 6 pour cent
     decor           filets a 30, 70 et 55 pour cent, encre a 6 pour cent, fondus
     mouvement       flou 3 px + echelle 0,92 + 20 px trop bas, pose en 650 ms
                     sur leur courbe de rebond, 60 ms d ecart, fondu en 400 ms
   Leur vert devient notre bleu. */
.ia-scene{position:relative;display:flex;align-items:center;justify-content:center;width:100%;padding:64px 0;color:#0f0f10;font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-size:16px;line-height:1.4;--ia-bleu:#3866ff;--ia-vert:#03ac4c;--ia-rouge:#e5484d;--ia-ambre:#e0973f;--ia-ombre:0 0 0 1px rgba(20,60,134,.05),0 1px 1px -.5px rgba(10,30,74,.05),0 3px 3px -1.5px rgba(10,30,74,.06),0 6px 8px -3px rgba(10,30,74,.02),0 6px 12px -6px rgba(20,60,134,.03),0 24px 24px -12px rgba(20,60,134,.05)}
/* Hauteur commune aux trois scenes : sans elle le bloc sautait d un onglet a
   l autre (324, 111 et 253 de contenu mesures). Le contenu est centre dedans. */
.ia-wrap{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;width:100%;max-width:552px;height:324px}
.ia-mini{font-size:10px;line-height:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ia-a50{color:rgba(15,15,16,.5);font-weight:400}
.ia-etq{display:inline-flex;align-items:center;justify-content:center;gap:3px;height:18px;padding:2px 5px;border-radius:6px;background:rgba(15,15,16,.06);font-size:10px;line-height:14px;font-weight:500;white-space:nowrap;flex:none}
.ia-etq svg{width:10px;height:10px;display:block;flex:none}
.ia-etq--bleu{color:var(--ia-bleu);background:rgba(56,102,255,.1)}
.ia-etq--vert{color:var(--ia-vert);background:rgba(3,172,76,.09)}
.ia-etq--rouge{color:#c0392b;background:rgba(229,72,77,.09)}
.ia-etq--ambre{color:#a8701f;background:rgba(224,151,63,.12)}
.ia-logo{display:flex;align-items:center;justify-content:center;flex:none;width:26px;height:26px;border-radius:999em;font-size:10px;font-weight:700;color:#fff;background:var(--ia-bleu)}.ia-logo--img{padding:2px;background:#fff;box-shadow:inset 0 0 0 1px rgba(15,20,40,.09)}.ia-logo--img img{display:block;width:100%;height:100%;object-fit:contain;border-radius:999em}
.ia-logo svg{width:13px;height:13px;display:block}
.ia-point{flex:none;width:3px;height:3px;border-radius:99em;background:rgba(15,15,16,.14)}

/* --- 1. TROUVER : on tape un metier et une zone, les entreprises remontent --- */
.tv-barre{display:flex;align-items:center;gap:10px;padding:13px 13px 13px 16px;background:#fff;border-radius:18px;box-shadow:var(--ia-ombre)}
.tv-loupe{flex:none;width:17px;height:17px;color:rgba(15,15,16,.38)}
.tv-champ{position:relative;flex:1;min-width:0;height:1.4em;overflow:hidden}
.tv-texte{position:absolute;top:0;left:0;margin:0;white-space:nowrap;font-size:15px;letter-spacing:-.112px}
.tv-car{display:inline-block;opacity:0}
.tv-curseur{display:inline-block;width:1.5px;height:1.02em;margin-left:1px;vertical-align:-.15em;background:var(--ia-bleu);animation:tv-clign 1.05s steps(1) infinite}
@keyframes tv-clign{50%{opacity:0}}
.tv-naf{opacity:0}
.tv-compte{display:flex;align-items:baseline;gap:6px;padding:16px 4px 10px}
.tv-nb{display:inline-block;min-width:58px;text-align:left;font-size:19px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tv-liste{display:flex;flex-direction:column;gap:8px}
/* L arrivee d une fiche est une TRANSITION, plus une animation a flou : le
   flou sur quatre cartes en meme temps est ce qui hachait le mouvement, et
   le rebond faisait bon marche a cote du graphe. Meme courbe qu eux. */
.tv-ligne{display:flex;align-items:center;gap:10px;padding:9px 12px 9px 9px;border-radius:14px;background:#fff;box-shadow:var(--ia-ombre);opacity:0;transform:translateY(10px);transition:opacity .42s linear,transform .58s cubic-bezier(.32,.72,0,1);will-change:transform,opacity}
.tv-ligne.vu{opacity:1;transform:none}
.tv-ligne:nth-child(2){transition-delay:.07s}
.tv-ligne:nth-child(3){transition-delay:.14s}
.tv-ligne:nth-child(4){transition-delay:.21s}
/* remise a zero instantanee entre deux requetes, sinon les fiches jouent
   leur sortie pendant que la suivante se tape */
.tv-net,.tv-net *{transition:none!important}
/* Entree de l onglet, les memes valeurs que le graphe et que l onde : les
   trois panneaux doivent arriver de facon identique. */
.pa-panneau .tv-wrap{transform:scale(.92) translateY(1em);opacity:0;transition:transform .6s cubic-bezier(.32,.72,0,1),opacity .6s cubic-bezier(.32,.72,0,1)}
.pa-panneau[data-pa-etat="actif"] .tv-wrap{transform:scale(1) translateY(0);opacity:1}
/* Descendre le bloc SANS grandir la scene : le panneau ne fait que 470 et la
   scene en occupe deja 452, il n y a pas 40 px a prendre. On deplace donc la
   marge du bas vers le haut, hauteur totale inchangee, contenu 40 px plus bas. */
.ia-scene[data-v2="trouver"]{padding:104px 0 24px}
.tv-nom{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.tv-nom b{font-size:12px;font-weight:600;letter-spacing:-.112px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* --- 2. APPELER : l onde seule, sans rien derriere. Scene 958 x 360,
   l onde centree sur y=160, le bloc de lecture dessous. --- */
.ia-scene--wf{padding:0}
/* La scene fait 440 de haut pour 360 de contenu : les 80 px de rabiot sont
   AU-DESSUS. Le panneau centrant la scene, c est ce qui fait descendre
   l ensemble sans le pousser hors du cadre. */
.wf{position:relative;width:958px;height:440px;flex:none;color:#0f0f10}
/* Les deux bords fondus, leur degrade au caractere pres. Les filets sont DANS
   le trace : ils s eteignent aux bords avec lui, comme sur le graphe. */
.wf-wave{position:absolute;left:69px;top:142px;width:820px;height:196px;display:flex;align-items:center;justify-content:space-between;-webkit-mask:linear-gradient(90deg,rgba(217,217,217,0) 0%,rgb(198,198,198) 25%,rgb(166,166,166) 50%,rgb(182,182,182) 90.19%,rgba(115,115,115,0) 100%);mask:linear-gradient(90deg,rgba(217,217,217,0) 0%,rgb(198,198,198) 25%,rgb(166,166,166) 50%,rgb(182,182,182) 90.19%,rgba(115,115,115,0) 100%)}
/* Deux couches par barre. Le CSS ne sait PAS passer d une couleur unie a un
   degrade : une transition sur le fond ne ferait rien, la couleur basculerait
   d un coup. Le gris reste donc le fond, la couleur vit sur une couche
   par-dessus, et c est son OPACITE qui fond. Le gris s efface en meme temps,
   sinon il transparaitrait sous le bas du degrade, qui est transparent. */
.wf-b{position:relative;flex:none;width:5px;height:6px;border-radius:2px;background-color:rgba(19,25,50,var(--g,.12));transition:background-color .55s cubic-bezier(.32,.72,0,1);will-change:height}
.wf-b::after{content:"";position:absolute;inset:0;border-radius:2px;background:var(--cg,linear-gradient(180deg,transparent,transparent));opacity:0;transition:opacity .55s cubic-bezier(.32,.72,0,1)}
.wf-b.t{background-color:transparent}
.wf-b.t::after{opacity:1}
.wf-wrap{position:absolute;inset:0;pointer-events:none}
.wf-marks{position:absolute;left:69px;top:0;width:820px;height:400px}
.wf-mark{position:absolute;top:0;transform:translateX(-50%);opacity:0}
.wf-mark--orange{--c:#F97316}.wf-mark--indigo{--c:#6366F1}.wf-mark--vert{--c:#22C55E}
/* L etiquette en gris, celui de la section des entreprises, pas en noir. */
.wf-lab{position:absolute;left:50%;top:102px;transform:translateX(-50%) translateY(-6px);font-size:13px;font-weight:500;letter-spacing:-.01em;color:#8a8e98;white-space:nowrap;opacity:0;transition:opacity .5s linear .2s,transform .62s cubic-bezier(.32,.72,0,1) .2s}
/* La pastille : cerclee de blanc puis d un halo de sa couleur, comme les
   pastilles du graphe. C est le blanc qui la detache du trace. */
.wf-pt{position:absolute;left:50%;top:132px;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px #fff,0 0 0 5px color-mix(in srgb,var(--c) 20%,transparent);transform:scale(0);transition:transform .66s cubic-bezier(.34,1.16,.64,1) .12s}
/* Le filet : un cheveu d un pixel, dense sous la pastille, qui se dissout dans
   la grappe. Il pousse depuis le haut, sur la courbe du graphe. */
.wf-line{position:absolute;left:50%;top:132px;width:2px;height:var(--lh,206px);margin-left:-1px;border-radius:1px;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 88%,transparent) 0%,color-mix(in srgb,var(--c) 62%,transparent) 100%);transform-origin:50% 0;transform:scaleY(0);transition:transform .9s cubic-bezier(.32,.72,0,1)}
.wf-net,.wf-net *{transition:none!important}
.wf-mark.vu{opacity:1}
.wf-mark.vu .wf-lab{opacity:1;transform:translateX(-50%) translateY(0)}
.wf-mark.vu .wf-pt{transform:scale(1)}
.wf-mark.vu .wf-line{transform:scaleY(1)}
/* Le bloc de lecture : sans lui, « Objection » et « Reponse IA » ne disent
   rien. Une colonne par moment, qui parait quand il est detecte. */
.wf-bloc{position:absolute;left:50%;top:376px;width:700px;margin-left:-350px;display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.wf-col{min-width:0;opacity:0;transform:translateY(7px);transition:opacity .46s linear .12s,transform .62s cubic-bezier(.32,.72,0,1) .12s}
.wf-col.vu{opacity:1;transform:none}
.wf-col--orange{--c:#F97316}.wf-col--indigo{--c:#6366F1}.wf-col--vert{--c:#22C55E}
.wf-col span{display:flex;align-items:center;gap:7px;font-size:11.5px;line-height:15px;color:#8a8e98;white-space:nowrap}
.wf-col span i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--c)}
.wf-col b{display:block;margin-top:5px;font-size:13.5px;font-weight:600;letter-spacing:-.01em;color:#17181c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Entree ET sortie : exactement les regles du graphe de l onglet suivant.
   Le panneau inactif garde le trace rogne et son calque en retrait, l onglet
   actif les ramene ; la transition joue donc aussi quand on quitte.
   AUCUNE autre entree ici : une seconde animation par-dessus, c est le
   defaut « c est decale, ca bug » qu on a deja corrige sur le graphe. */
.pa-panneau .wf-wave{clip-path:inset(0 100% 0 0);transition:clip-path .6s cubic-bezier(.32,.72,0,1)}
.pa-panneau .wf-wrap{transform:scale(.92) translateY(1em);opacity:0;transition:transform .6s cubic-bezier(.32,.72,0,1),opacity .6s cubic-bezier(.32,.72,0,1)}
.pa-panneau[data-pa-etat="actif"] .wf-wave{clip-path:inset(0 0 0 0)}
.pa-panneau[data-pa-etat="actif"] .wf-wrap{transform:scale(1) translateY(0);opacity:1}
@media(max-width:1000px){.wf{zoom:.72}}
@media(max-width:760px){.wf{zoom:.5}}
/* TELEPHONE (2026-09-12) : les trois scenes du Parcours gardent leur largeur de
   479 px sous 940 px et depassaient donc leur cadre, coupees net a droite.
   Meme recette que la maquette d ecran de la section precedente : zoom par
   paliers, et pas transform (les scenes animent deja le leur). Le zoom de .wf
   ci-dessus se multiplie avec celui-ci, les deux restent coherents. */
@media(max-width:939px){.ia-scene{zoom:.9}}
@media(max-width:560px){.ia-scene{zoom:.72}}
@media(max-width:420px){.ia-scene{zoom:.62}}
/* « Simplifiez chaque appel » (la forme d onde) est agrandie de 20 % par rapport
   aux deux autres, a la demande du 2026-09-12 : elle avait trop de vide autour.
   Elle depasse donc legerement son cadre et se coupe un peu sur les cotes, ce
   qui est assume. Valeurs = celles de .ia-scene multipliees par 1,2. */
/* Entre 761 et 939, .wf est deja a .72 (regle plus haut) : 1.05 suffit, 1.4 la\n   faisait deborder de 117 px de chaque cote sur tablette. */
@media(max-width:939px){.ia-scene--wf{zoom:1.05}}
@media(max-width:560px){.ia-scene--wf{zoom:1.11}}
@media(max-width:420px){.ia-scene--wf{zoom:.96}}
/* Le panneau est un element de grille : sans min-width:0 il grandit jusqu au
   contenu et tout le debordement part a DROITE, la scene parait decalee. A 0,
   le panneau garde la largeur du cadre et la scene deborde des deux cotes,
   donc centree. Demande du 2026-09-12. */
@media(max-width:939px){.pa-panneau{min-width:0}}
/* Decalage de 30 px vers la droite, demande du 2026-09-12. La valeur est posee
   DANS la scene, donc dans son espace zoome : on divise 30 par le zoom de la
   tranche pour retomber sur 30 px a l ecran. Attention : .wf porte SON PROPRE\n   zoom (.5 sous 760, .72 au-dessus), qui se multiplie avec celui de la scene.\n   Un left de 31 px ne donnait que 15 px a l ecran. */
@media(max-width:939px){.ia-scene--wf .wf{left:40px}}
@media(max-width:760px){.ia-scene--wf .wf{left:57px}}
@media(max-width:560px){.ia-scene--wf .wf{left:54px}}
@media(max-width:420px){.ia-scene--wf .wf{left:62px}}
/* --- 3. PROGRESSER : les chiffres montent, la semaine se dessine --- */
/* Le graphe de trendtrack, valeurs relevees chez eux. Tout est en em, comme chez eux, pour que le bloc entier suive la taille de police du panneau. */.ia-scene--pf{padding:0}.pf-pane{position:relative;width:100%;height:27.5em}/* Entree ET sortie, exactement leurs regles : le panneau inactif garde le graphe rogne et sa colonne en retrait ; l onglet actif les ramene. Comme les panneaux sont maintenant empiles et masques par la visibilite, la transition joue dans les deux sens, y compris quand on quitte. */.pa-panneau .pf-chart{clip-path:inset(0 100% 0 0);transition:clip-path .6s cubic-bezier(.32,.72,0,1)}.pa-panneau .pf-wrap{transform:scale(.92) translateY(1em);opacity:0;transition:transform .6s cubic-bezier(.32,.72,0,1),opacity .6s cubic-bezier(.32,.72,0,1)}.pa-panneau[data-pa-etat="actif"] .pf-chart{clip-path:inset(0 0 0 0)}.pa-panneau[data-pa-etat="actif"] .pf-wrap{transform:scale(1) translateY(0);opacity:1}@media(prefers-reduced-motion:reduce){.pa-panneau .pf-chart,.pa-panneau .pf-wrap{transition:none}}.pf-chart{position:absolute;left:0;right:0;bottom:0;display:flex;width:100%;-webkit-mask:linear-gradient(90deg,rgba(217,217,217,0) 0%,rgb(198,198,198) 25%,rgb(166,166,166) 50%,rgb(182,182,182) 90.19%,rgba(115,115,115,0) 100%);mask:linear-gradient(90deg,rgba(217,217,217,0) 0%,rgb(198,198,198) 25%,rgb(166,166,166) 50%,rgb(182,182,182) 90.19%,rgba(115,115,115,0) 100%)}.pf-lines{position:absolute;inset:0;display:flex;flex-flow:column;justify-content:space-between}.pf-lines i{display:block;width:100%;height:1px;background:color-mix(in srgb,currentcolor 6%,transparent)}.pf-svg{position:relative;width:100%;height:19.5em}.pf-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%;pointer-events:none;}.pf-details{position:absolute;bottom:0;left:0;display:flex;align-items:center;justify-content:center;width:1px;height:100%;will-change:transform}.pf-index{position:absolute;bottom:0;width:100%;height:80%;background:#e5e5e5}.pf-dot{position:absolute;flex-shrink:0;width:.5625em;height:.5625em;border:.125em solid #fff;border-radius:999px}.pf-cdot{flex:none;width:.75em;height:.75em;border:.125em solid #fff;border-radius:999px;box-shadow:var(--ia-ombre)}.cc-vert{background:#0CED1E}.cc-bleu{background:#3B82F6}.cc-violet{background:#8B5CF6}.cc-orange{background:#F97316}.pf-card{position:absolute;right:calc(100% + 1em);transition:transform .45s ease;display:flex;flex-flow:column;gap:.5em;width:12.5em;padding:.75em;border-radius:1em;background:#fff;box-shadow:var(--ia-ombre)}.pf-card[data-flip="true"]{transform:translateX(calc(100% + 2em))}.pf-date{font-size:1em;font-weight:500;line-height:1.4;letter-spacing:-.112px;color:#0f0f10}.pf-rows{display:flex;flex-flow:column;gap:.375em}.pf-row{display:flex;align-items:center;justify-content:space-between;gap:.75em;font-size:.875em;line-height:1.4;letter-spacing:-.112px}.pf-row span{display:flex;align-items:center;gap:.375em;font-weight:400;color:rgba(15,15,16,.5)}.pf-row b{font-weight:500;color:#0f0f10;font-variant-numeric:tabular-nums}@media(max-width:767px){.pf-pane{height:22em}.pf-svg{height:15em}.pf-card{width:10.5em}}












/* L entree du panneau : elle rejoue a chaque fois que l onglet devient actif,
   puisque la regle se met a correspondre. Meme courbe que le reste. */
/* Leur panneau n a AUCUNE animation propre : verifie chez eux, animation:none et transition 0s. L entree, c est celle du contenu, pas celle du cadre. Notre fondu de 340 ms se superposait au devoilement du graphe de 600 ms : la premiere moitie du mouvement se jouait sous un panneau encore transparent, ce qui se lisait comme un retard puis un surgissement. */
to{opacity:1;transform:none}}
@media(max-width:900px){
  .ia-wrap{height:300px}
  
  .ia-scene{padding:40px 0;font-size:15px}
  
  
  
}
.ia-brut .tv-car,.ia-brut .tv-naf,.ia-brut .tv-ligne,.ia-brut .tv-curseur{animation:none}
@media(prefers-reduced-motion:reduce){
  .tv-car,.tv-naf,.tv-ligne{opacity:1}
  .tv-curseur,.ap-state i{animation:none}
  .pa-panneau .wf-wave,.pa-panneau .wf-wrap,.pa-panneau .tv-wrap{transition:none}
  .tv-ligne{opacity:1;transform:none;transition:none}
}


/* Une etape sur deux est posee sur le fond noir : ses textes doivent basculer,
   sinon ils restent encre sur encre. */
.cp-dark .et-h2{color:#fff}
.cp-dark .et-lead{color:rgba(255,255,255,.6)}
.cp-dark .et-note{color:rgba(255,255,255,.4)}
.cp-dark .et-eyebrow{color:rgba(255,255,255,.45)}
.cp-dark .et-eyebrow b{color:#93b4ff}
.cp-dark .et-eyebrow i{background:rgba(255,255,255,.14)}
.cp-dark .et-puces li{color:rgba(255,255,255,.72)}
.cp-dark .et-puces li::before{background:#93b4ff}
/* Le schema des six outils, lui aussi, passe en negatif. */
.so-fleche{color:#cfd9f2}
.cp-dark .so-carte{background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.cp-dark .so-h2{color:#fff}
.cp-dark .so-lead{color:rgba(255,255,255,.6)}
.cp-dark .so-chip{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);color:rgba(255,255,255,.74);box-shadow:none}
.cp-dark .so-chip svg{stroke:rgba(255,255,255,.42)}
.cp-dark .so-fleche{color:rgba(147,180,255,.34)}
.et-grid{display:grid;gap:28px;grid-template-columns:minmax(0,1fr);align-items:start}
@media(min-width:960px){.et-grid{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:56px}.et-grid>div:not(.et-shot){padding-top:14px}.et-grid--inv{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)}.et-grid--inv>.et-shot{order:-1}}
.et-eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 16px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#90909a}
.et-eyebrow b{color:#3866ff}.et-eyebrow i{flex:1;max-width:120px;height:1px;background:#dfe3ea}
.et-h2{font-size:clamp(27px,3.6vw,40px);font-weight:800;letter-spacing:-.035em;line-height:1.08;margin:0 0 14px;color:#0f0f14;text-wrap:balance}
.et-lead{margin:0;font-size:16.5px;line-height:1.6;color:#6c6c76;max-width:440px}
.et-note{margin:0;font-size:14.5px;line-height:1.55;color:#98a0ad;max-width:460px}
.et-puces{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:11px}
.et-puces li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.5;color:#4a4a55}
.et-puces li::before{content:'';flex:none;width:6px;height:6px;margin-top:8px;border-radius:50%;background:#3866ff}
.et-shot .cp-screen{min-height:0}
.et-shot .cp-app{min-height:0}
.et-shot .cp-body{position:relative;max-height:300px;overflow:hidden}
.et-shot .cp-body::after{content:'';position:absolute;left:0;right:0;bottom:0;height:64px;background:linear-gradient(180deg,rgba(247,247,249,0),#f7f7f9);pointer-events:none;z-index:3}

.et-shot .cp-pane{position:static;inset:auto;opacity:1;transform:none;pointer-events:auto}
/* Sans JavaScript les lignes restent visibles ; le script ne les cache que
   s'il va vraiment les animer. */
.et-shot .cp-line{opacity:1;transform:none}
.et-shot.et-anim .cp-line{opacity:0;transform:translateY(6px);transition:opacity .34s ease,transform .34s ease}
.et-shot.et-anim .cp-line.in{opacity:1;transform:none}
.et-shot .cp-navi.on{color:#fff;background:rgba(255,255,255,.10)}

.cp-c{display:block;flex:none;width:auto;height:38px;object-fit:contain}.cp-c--pied{height:32px}.cp-nom{font-size:25px;font-weight:600;letter-spacing:-.035em;line-height:1;color:#0f0f14}.cp-nom--pied{font-size:21px;color:#fff}.hero-atouts{margin:0 0 30px}
/* le libelle long tient sur ordinateur, pas sur mobile ou il passerait a la ligne.
   display:contents : le span ne cree pas de boite propre, sinon il devient un
   element flex et rehausse la pastille de 5 px par rapport aux deux autres. */
.hero-fr-long{display:contents}
.hero-fr-court{display:none}
@media(max-width:767px){.hero-fr-long{display:none}.hero-fr-court{display:contents}}.hero-atouts span{border-color:#e3e7f0!important;background:hsla(0,0%,100%,.72)!important;color:#7b849b!important;font-size:12.5px!important;padding:5px 12px!important}.hero-atouts svg{stroke:#3866ff!important;width:13px!important;height:13px!important}.hero-ico{flex:none;width:auto;height:14px;object-fit:contain;display:block}.so-marque{display:inline-flex;align-items:center;gap:14px}.so-c{display:block;flex:none;width:auto;height:56px;object-fit:contain}.so-marque b{font-size:38px;font-weight:600;letter-spacing:-.035em;line-height:1;color:#0f0f14}.cp-logo img{width:auto!important;height:22px!important;aspect-ratio:auto!important}@media(max-width:640px){.cp-c{height:32px}.cp-nom{font-size:22px}.so-c{height:46px}.so-marque b{font-size:31px}}/* min-height:38px reservait deux lignes pour lancienne phrase de 95 caracteres.
   Elle en fait une seule maintenant : 23 px de vide en moins sous chaque bouton. */
.pr-rassure{margin:12px 0 0;text-align:center;font-size:12.5px;line-height:1.5;color:#94a0b8;letter-spacing:-.005em}.pr-cta{background:linear-gradient(135deg,#4a76ff 0%,#2450ea 58%,#1a3bb8 100%);box-shadow:0 2px 4px rgba(20,40,120,.18),0 14px 28px -12px rgba(26,59,184,.55)}.pr-cta:hover{box-shadow:0 3px 6px rgba(20,40,120,.2),0 18px 34px -12px rgba(26,59,184,.62)}.pr-trio{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:13px 30px;margin:40px 0 0;padding:0;list-style:none;width:min(1040px,calc(100vw - 88px));margin-left:50%;transform:translateX(-50%)}.pr-trio li{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:#7b879e;letter-spacing:-.005em}.pr-trio li::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:#3866ff}@media(max-width:640px){.pr-trio{gap:11px 18px;margin-top:30px}.pr-trio li{font-size:12.5px}}.cta-fixe{display:none}@media(max-width:640px){.cta-fixe{position:fixed;left:14px;right:14px;bottom:14px;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:54px;padding:8px 18px;border-radius:16px;background:linear-gradient(135deg,#4a76ff 0%,#2450ea 58%,#1a3bb8 100%);color:#fff;text-decoration:none;box-shadow:0 6px 22px -8px rgba(26,59,184,.6);opacity:0;transform:translateY(14px);transition:opacity .28s ease,transform .28s ease;pointer-events:none}.cta-fixe.on{opacity:1;transform:none;pointer-events:auto}.cta-fixe span{font-size:15px;font-weight:800;letter-spacing:-.015em}.cta-fixe small{font-size:11.5px;font-weight:600;color:rgba(255,255,255,.78)}.fin-sec{padding-bottom:40px}}@media(prefers-reduced-motion:reduce){.cta-fixe{transition:none}}


/* Lenis pilote le scroll : le smooth natif doit etre desactive, sinon les deux se battent */
html.lenis{scroll-behavior:auto!important}
html.lenis,html.lenis body{height:auto}
/* Entete flottante calee sur la reference taap.it : plus large, plus fine, detachee du haut */
.cp-entete{padding:34px 20px 22px!important}
.cp-entete-in{min-height:60px;padding:8px 10px 8px 18px;border-radius:16px}@media(max-width:940px){.cp-entete-in>.absolute{display:none!important}}
@media(max-width:640px){.cp-entete{padding:22px 14px 14px!important}.cp-entete-in{min-height:54px;border-radius:14px}}
/* Passe-partout gris autour de l'ecran du hero (reference taap.it) : un anneau plein, dont le rayon suit celui de la carte */
[data-scroll-card]{box-shadow:0 0 0 7px #d7dce8,0 26px 60px -28px rgba(15,20,40,.28)!important}
@media(max-width:767px){[data-scroll-card]{box-shadow:0 0 0 7px #d7dce8,0 18px 40px -22px rgba(15,20,40,.26)!important}}
/* Hero : la ligne de cible sous le sous-titre, et la levee de risque sous le
   bouton. Meme famille, memes gris que le reste du hero. */
.cp-ava{width:84px;height:84px;border-radius:50%;margin:0 auto 14px;background:linear-gradient(150deg,rgba(56,102,255,.34),rgba(147,180,255,.1));border:1px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;overflow:hidden}.cp-ava img{width:100%;height:100%;object-fit:cover;display:block}.cp-ava svg{width:34px;height:34px;color:rgba(255,255,255,.3)}.cp-video-el{display:block;width:100%;aspect-ratio:16/9;border-radius:16px;background:#0a0c0f;object-fit:cover}@media(max-width:768px){.cp-video-el{border-radius:12px}}.cp-clients{width:min(100vw - 32px,660px);margin:62px auto 0}.cp-clients-rail{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}.cp-clients-piste{display:flex;width:max-content;animation:cliDefile 30s linear infinite}.cp-clients-serie{display:flex;align-items:center;gap:17px;padding:5px 17px 5px 0}.cp-cli{position:relative;flex:none;display:block;width:50px;height:50px;border-radius:50%;overflow:hidden;background:#fff;box-shadow:0 0 0 1.5px rgba(15,20,40,.20),0 1px 2px rgba(15,20,40,.05)}.cp-cli img{display:block;width:100%;height:100%;object-fit:cover}.cp-clients-txt{margin:19px auto 0;padding:0;width:max-content;max-width:calc(100vw - 32px);white-space:nowrap;text-align:center;font-size:min(22px,calc(3.6vw - 1.5px));line-height:1.25;font-weight:600;color:#9297a3;letter-spacing:-.012em}.cp-clients-txt b{color:#40454f;font-weight:700}@media(prefers-reduced-motion:reduce){.cp-clients-piste{animation:none}}@media(max-width:640px){.cp-clients{margin-top:46px}.cp-cli{width:44px;height:44px}.cp-clients-serie{gap:14px;padding:5px 14px 5px 0}.cp-clients-txt{margin-top:15px}}.cp-preuve{display:inline-flex;align-items:center;gap:9px;margin:0 auto 24px;padding:4px 14px 4px 5px;border-radius:999px;background:#fff;border:1px solid rgba(15,15,20,.08);box-shadow:0 1px 2px rgba(15,15,20,.05),0 12px 30px -18px rgba(15,15,20,.32)}.cp-preuve-av{display:inline-flex;flex:none}.cp-av{width:26px;height:26px;border-radius:50%;border:2px solid #fff;background-size:cover;background-position:center;flex:none}.cp-av + .cp-av{margin-left:-9px}.cp-preuve-txt{font-size:13px;font-weight:600;color:#4a5163;white-space:nowrap;letter-spacing:-.005em}.cp-preuve-txt b{color:#0f0f14;font-weight:800}/* le texte complet sur ordinateur ; en dessous il passerait sur deux lignes, donc on bascule sur la version courte. */.cp-preuve-court{display:none}@media(max-width:760px){.cp-preuve-long{display:none}.cp-preuve-court{display:inline}}@media(max-width:520px){.cp-preuve{gap:9px;padding:5px 14px 5px 6px}.cp-av{width:23px;height:23px}.cp-av + .cp-av{margin-left:-8px}.cp-preuve-txt{font-size:11.5px;white-space:normal;text-align:left}}.cp-av1{background-image:url(/wp-content/themes/callpit-theme/img/av1.webp?v=1786547314)}.cp-av2{background-image:url(/wp-content/themes/callpit-theme/img/av2.webp?v=1786547329)}.cp-av3{background-image:url(/wp-content/themes/callpit-theme/img/av3.webp?v=1786547530)}.cp-av4{background-image:url(/wp-content/themes/callpit-theme/img/av4.webp?v=1786547365)}.cp-av5{background-image:url(/wp-content/themes/callpit-theme/img/av5.webp?v=1786610875)}.cp-av6{background-image:url(/wp-content/themes/callpit-theme/img/av6.webp?v=1786611164)}@keyframes cliDefile{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.cta-sous{margin:14px 0 0;font-size:13.5px;font-weight:600;color:#8b93a7;letter-spacing:-.005em}
/* L'ecran pose dans le cadre du hero reprend le rayon interieur de l'ancien
   lecteur video. Le cadre lui-meme, son passe-partout et son ombre ne bougent pas. */
@media(max-width:767px){.hero-cible{font-size:13px;margin-bottom:20px}.cta-sous{font-size:12.5px}}


.dp-tete{margin:0 auto 32px;max-width:740px;text-align:center}
.dp-tete .et-eyebrow{justify-content:center}
.dp-tete .et-eyebrow i{display:none}
.dp-tete .et-lead{margin:0 auto;max-width:600px}
.pg-panneau{background:#f1f2f6;border-radius:34px;padding:42px 40px}
@media(max-width:760px){.pg-panneau{border-radius:26px;padding:28px 18px}.dp-tete{margin-bottom:26px}}


.cta-mid{padding:46px 20px 58px;text-align:center}
.cta-mid .cta-mid-t{margin:0 auto 18px;max-width:520px;font-size:17px;line-height:1.5;font-weight:600;letter-spacing:-.015em;color:#4a4a55;text-wrap:balance}
.cta-mid .cta-sous{margin-top:14px;color:#8b93a7}
.cta-mid .cta-hero{box-shadow:0 2px 4px rgba(20,40,120,.18),0 14px 28px -12px rgba(26,59,184,.55)}
.cta-mid .cta-hero:hover{box-shadow:0 3px 6px rgba(20,40,120,.2),0 18px 34px -12px rgba(26,59,184,.62)}
@media(max-width:640px){.cta-mid{padding:34px 18px 42px}.cta-mid .cta-mid-t{font-size:15.5px;margin-bottom:15px}}


/* Section ACCES API. Toutes les cotes sont relevees sur trendtrack.io a
   1440 : bloc de 980 de large, en-tete de 184, scene de 390, colonne de
   texte de 600, carte de saisie 552x118 rayon 24, cartes de sortie 109x129
   rayon 14, pastilles de logos de 40, filets de fond a 6 %. */
.apx-sec{--apx-ombre:0 0 0 1px rgba(20,60,134,.05),0 1px 1px -.5px rgba(10,30,74,.05),0 3px 3px -1.5px rgba(10,30,74,.06),0 6px 8px -3px rgba(10,30,74,.02),0 6px 12px -6px rgba(20,60,134,.03),0 24px 24px -12px rgba(20,60,134,.06);background:transparent;padding:100px 20px;overflow:hidden}
.apx-lay{max-width:980px;margin:0 auto}
.apx-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:32px}
.apx-txt{display:flex;flex-direction:column;gap:16px;max-width:600px}
/* Surtitres de section : les crochets et la chasse fixe de trendtrack cedent
   la place au mot seul, en bleu : rien qui detourne du titre juste en dessous.
   un surtitre. Les crochets restent dans le balisage, simplement masques. */
.apx-eti{margin:0;display:inline-flex;align-items:center;align-self:flex-start;width:fit-content;padding:0;background:none;border-radius:0;font-family:inherit;font-size:14px;font-weight:600;line-height:20px;letter-spacing:-.01em;text-transform:none;color:#3866ff}
.apx-eti i{display:none}
.apx-h2{margin:0;font-size:clamp(32px,5.2vw,52px);font-weight:600;line-height:1.1;letter-spacing:-.042em;color:#0f0f10}
.apx-p{margin:0;font-size:18px;font-weight:400;line-height:25.2px;letter-spacing:-.112px;color:#0f0f10}
.apx-p em{font-style:normal;color:rgba(15,15,16,.5)}
.apx-cta{flex:none}
.apx-scene{position:relative;height:390px;margin-top:28px}
.apx-grille{position:absolute;inset:0;pointer-events:none}
.apx-grille i{position:absolute;background:rgba(15,15,16,.06)}
.apx-grille .gv1{left:294px;top:0;width:1px;height:100%}
.apx-grille .gv2{left:685px;top:0;width:1px;height:100%}
.apx-grille .gh{left:0;top:215px;width:100%;height:1px}
/* La rangee s aligne desormais sur le champ de saisie, comme chez eux :
   meme largeur, meme bord gauche, et elle se pose juste au-dessus. */
.apx-sorties{position:absolute;left:214px;bottom:240px;width:552px;display:flex;gap:8px}.apx-s2,.apx-s3,.apx-s4,.apx-s5{pointer-events:none}
.apx-carte{box-sizing:border-box;position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:.5em;padding:.5em;border-radius:.875em;background:#fff;box-shadow:var(--apx-ombre);font-size:16px;color:#17181c;opacity:0;filter:blur(3px);transform:translateY(20px) scale(.92)}
.apx-l{display:flex;align-items:center;justify-content:space-between;gap:.25em}
.apx-marque{display:flex;align-items:center;gap:.25em;min-width:0}
/* Leur logo de marque est un rond de 1.25em. Nos tuiles ent-*.webp sont carrees
   a fond blanc : recadrees en rond, seuls les coins arrondis de la tuile sont
   rognes, le symbole est centre et survit. */
.apx-vig{flex:none;width:1.25em;height:1.25em;border-radius:999em;overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px rgba(15,20,40,.09)}
.apx-vig img{display:block;width:100%;height:100%;object-fit:cover}
.apx-nom{font-size:.625em;font-weight:500;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.apx-val{font-size:.75em;font-weight:500;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.apx-lb{font-size:.625em;font-weight:500;line-height:1.4}
.apx-meta{display:flex;align-items:center;gap:.1875em;min-width:0}
.apx-mt{font-size:.625em;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.apx-pt{flex:none;width:.1875em;height:.1875em;border-radius:99em;background:rgba(23,24,28,.12)}
/* Leur pastille prend son fond de la couleur du texte a 6 %, ce qui la teinte
   en vert des que le texte l est. On ecrit les deux valeurs en clair : un
   color-mix rate rendrait la pastille invisible sur les vieux navigateurs. */
.apx-jeton{display:flex;align-items:center;justify-content:center;gap:.25em;flex:none;padding:.125em .25em;border-radius:.375em;background:rgba(23,24,28,.06);color:#17181c}
.apx-jeton.cc-vert{background:rgba(3,172,76,.07);color:#03ac4c}
/* Le rouge ne sert qu aux causes d une baisse : un ecart defavorable ne peut
   pas porter la meme couleur qu une bonne note. Le bleu, lui, est neutre :
   une heure de rappel n est ni bonne ni mauvaise. */
.apx-jeton.cc-rouge{background:rgba(220,38,38,.07);color:#dc2626}
.apx-jeton.cc-bleu{background:rgba(56,102,255,.10);color:#3866ff}
.apx-date{flex:none;font-size:.625em;line-height:1.4;color:rgba(15,15,16,.5)}
.apx-g{font-style:normal;color:rgba(15,15,16,.4)}
.apx-jeton span{font-size:.625em;line-height:1.4}
.apx-jeton b{font-size:.625em;font-weight:500;line-height:1.4}
.apx-jeton svg{flex:none;width:.625em;height:.625em;fill:currentColor}
.apx-barre{flex:1;height:.25em;border-radius:999em;background:rgba(23,24,28,.06)}
.apx-barre i{display:block;height:100%;border-radius:inherit;background:#3866ff}
.apx-num{flex:none;font-size:.625em;line-height:1.4;color:rgba(15,15,16,.5)}
/* Les societes portent leur logo, le meme fichier que la maquette du cockpit.
   Fond blanc et filet interieur, comme dans la liste : les logos sombres gardent
   leur bord, les clairs ne flottent pas sur la pastille bleue. */
.apx-champ{position:absolute;left:214px;top:156px;width:552px;border-radius:24px;background:#fff;box-shadow:var(--apx-ombre)}
.apx-haut{position:relative;height:62px}
.apx-t{position:absolute;left:20px;top:20px;margin:0;font-size:16px;line-height:22.4px;letter-spacing:-.01em;color:#0f0f10;white-space:nowrap}
.apx-t i{font-style:normal;opacity:0}
.apx-bas{display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 12px}
.apx-tag{display:inline-flex;align-items:center;gap:4px;height:32px;padding:0 6px;border-radius:999px;background:rgba(56,102,255,.12);font-size:14px;font-weight:500;letter-spacing:-.01em;color:#0f0f10}
.apx-tag u{box-sizing:border-box;display:block;width:20px;height:20px;flex:none;text-decoration:none;background:url(/wp-content/themes/callpit-theme/img/logo-c.webp?v=<?php echo filemtime(get_template_directory() . '/img/logo-c.webp'); ?>) center/contain no-repeat}
/* Chez eux le petit logo tient dans une pastille verte pleine, qui le porte.
   Le notre est pose a nu sur le fond bleu pale : a 11 px il se perdait,
   il occupe donc son emplacement de 20 px au lieu d y flotter. */
.apx-tag svg{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-opacity:.5;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.apx-env{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:50%;background:#3866ff;color:#fff}
.apx-env svg{width:16px;height:16px}
.apx-integ{position:absolute;left:50%;transform:translateX(-50%);top:307px;width:280px;text-align:center}
.apx-integ p{margin:0 0 16px;font-size:14px;line-height:22px;color:rgba(15,15,16,.5)}
.apx-logos{display:flex;justify-content:center;align-items:center;gap:20px;height:40px}
.apx-logo{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;box-shadow:var(--apx-ombre)}
.apx-logo img{width:100%;height:100%;object-fit:contain;display:block}
/* Le flottement des pastilles, releve chez eux : cinq decalages verticaux
   differents, de 0 a -7,9 px, pilotes en continu. Cinq durees et cinq
   retards distincts suffisent a reproduire le dephasage sans JavaScript. */
@keyframes apx-flot{0%,100%{transform:translateY(-4px)}50%{transform:translateY(4px)}}
.apx-scene.reveal-in .apx-logo{animation:apx-flot 3.6s ease-in-out infinite}
.apx-scene.reveal-in .apx-logo:nth-child(2){animation-duration:4.3s;animation-delay:-1.1s}
.apx-scene.reveal-in .apx-logo:nth-child(3){animation-duration:3.9s;animation-delay:-2.4s}
.apx-scene.reveal-in .apx-logo:nth-child(4){animation-duration:4.6s;animation-delay:-.6s}
.apx-scene.reveal-in .apx-logo:nth-child(5){animation-duration:4.1s;animation-delay:-3.2s}
/* La 1re question etait la seule a apparaitre deja ecrite en entier avant de
   se retaper lettre par lettre. Chaque lettre porte un retard, donc au moment
   ou la boucle repart, celles de la fin n ont pas encore boucle et sont restees
   a 1. Les questions 2 et 3 n avaient pas le probleme : leur maintien a 0 couvre
   tout le debut de la boucle. On rend le meme maintien a la premiere, en la
   remettant a 0 a mi-boucle, hors ecran. */
@keyframes apx-t1{0%{opacity:0;animation-timing-function:cubic-bezier(.625,.05,0,1)}1.17%,50%{opacity:1}50.01%,100%{opacity:0}}
@keyframes apx-t2{0%,20%{opacity:0;animation-timing-function:cubic-bezier(.625,.05,0,1)}21.17%,100%{opacity:1}}
@keyframes apx-t3{0%,40%{opacity:0;animation-timing-function:cubic-bezier(.625,.05,0,1)}41.17%,100%{opacity:1}}
@keyframes apx-t4{0%,60%{opacity:0;animation-timing-function:cubic-bezier(.625,.05,0,1)}61.17%,100%{opacity:1}}
@keyframes apx-t5{0%,80%{opacity:0;animation-timing-function:cubic-bezier(.625,.05,0,1)}81.17%,100%{opacity:1}}
@keyframes apx-q1{0%,16.13%{opacity:1;transform:none;filter:blur(0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}18.72%,100%{opacity:0;transform:translateY(-80%);filter:blur(3px)}}
@keyframes apx-q2{0%,19.99%{opacity:0;transform:translateY(-80%);filter:blur(3px)}20%,36.13%{opacity:1;transform:none;filter:blur(0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}38.72%,100%{opacity:0;transform:translateY(-80%);filter:blur(3px)}}
@keyframes apx-q3{0%,39.99%{opacity:0;transform:translateY(-80%);filter:blur(3px)}40%,56.13%{opacity:1;transform:none;filter:blur(0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}58.72%,100%{opacity:0;transform:translateY(-80%);filter:blur(3px)}}
@keyframes apx-q4{0%,59.99%{opacity:0;transform:translateY(-80%);filter:blur(3px)}60%,76.13%{opacity:1;transform:none;filter:blur(0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}78.72%,100%{opacity:0;transform:translateY(-80%);filter:blur(3px)}}
@keyframes apx-q5{0%,79.99%{opacity:0;transform:translateY(-80%);filter:blur(3px)}80%,96.13%{opacity:1;transform:none;filter:blur(0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}98.72%,100%{opacity:0;transform:translateY(-80%);filter:blur(3px)}}
@keyframes apx-c1{0%,0.78%{opacity:0;transform:translateY(1.25rem) scale(.92);filter:blur(3px);animation-timing-function:cubic-bezier(.34,1.35,.64,1)}4.98%,16.13%{opacity:1;transform:none;filter:blur(0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}18.46%,100%{opacity:0;transform:translateY(-1rem) scale(.97);filter:blur(3px)}}
@keyframes apx-c2{0%,20.78%{opacity:0;transform:translateY(1.25rem) scale(.92);filter:blur(3px);animation-timing-function:cubic-bezier(.34,1.35,.64,1)}24.98%,36.13%{opacity:1;transform:none;filter:blur(0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}38.46%,100%{opacity:0;transform:translateY(-1rem) scale(.97);filter:blur(3px)}}
@keyframes apx-c3{0%,40.78%{opacity:0;transform:translateY(1.25rem) scale(.92);filter:blur(3px);animation-timing-function:cubic-bezier(.34,1.35,.64,1)}44.98%,56.13%{opacity:1;transform:none;filter:blur(0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}58.46%,100%{opacity:0;transform:translateY(-1rem) scale(.97);filter:blur(3px)}}
@keyframes apx-c4{0%,60.78%{opacity:0;transform:translateY(1.25rem) scale(.92);filter:blur(3px);animation-timing-function:cubic-bezier(.34,1.35,.64,1)}64.98%,76.13%{opacity:1;transform:none;filter:blur(0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}78.46%,100%{opacity:0;transform:translateY(-1rem) scale(.97);filter:blur(3px)}}
@keyframes apx-c5{0%,80.78%{opacity:0;transform:translateY(1.25rem) scale(.92);filter:blur(3px);animation-timing-function:cubic-bezier(.34,1.35,.64,1)}84.98%,96.13%{opacity:1;transform:none;filter:blur(0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}98.46%,100%{opacity:0;transform:translateY(-1rem) scale(.97);filter:blur(3px)}}
.apx-scene.reveal-in .apx-t1{animation:apx-q1 15.45s linear infinite}
.apx-scene.reveal-in .apx-t1 i{animation:apx-t1 15.45s linear infinite}
.apx-scene.reveal-in .apx-s1 .apx-carte{animation:apx-c1 15.45s linear infinite}
.apx-scene.reveal-in .apx-t2{animation:apx-q2 15.45s linear infinite}
.apx-scene.reveal-in .apx-t2 i{animation:apx-t2 15.45s linear infinite}
.apx-scene.reveal-in .apx-s2 .apx-carte{animation:apx-c2 15.45s linear infinite}
.apx-scene.reveal-in .apx-t3{animation:apx-q3 15.45s linear infinite}
.apx-scene.reveal-in .apx-t3 i{animation:apx-t3 15.45s linear infinite}
.apx-scene.reveal-in .apx-s3 .apx-carte{animation:apx-c3 15.45s linear infinite}
.apx-scene.reveal-in .apx-t4{animation:apx-q4 15.45s linear infinite}
.apx-scene.reveal-in .apx-t4 i{animation:apx-t4 15.45s linear infinite}
.apx-scene.reveal-in .apx-s4 .apx-carte{animation:apx-c4 15.45s linear infinite}
.apx-scene.reveal-in .apx-t5{animation:apx-q5 15.45s linear infinite}
.apx-scene.reveal-in .apx-t5 i{animation:apx-t5 15.45s linear infinite}
.apx-scene.reveal-in .apx-s5 .apx-carte{animation:apx-c5 15.45s linear infinite}
@media(prefers-reduced-motion:reduce){.apx-t,.apx-t i,.apx-carte,.apx-logo{animation:none!important;opacity:1;filter:none;transform:none}.apx-t2,.apx-t3,.apx-t4,.apx-t5,.apx-s2,.apx-s3,.apx-s4,.apx-s5{display:none}}
/* la scene garde ses cotes exactes et se met a l echelle en dessous de 1040 */
@media(max-width:1039px){.apx-scene{width:980px;margin-left:calc(50% - 490px);transform-origin:top center;transform:scale(.80);margin-bottom:-78px}}
@media(max-width:880px){.apx-sec{padding:72px 18px}.apx-tete{flex-direction:column;gap:22px}.apx-scene{transform:scale(.64);margin-bottom:-140px;margin-top:44px}}
/* En dessous de 700 on abandonne la mise a l echelle : elle rendait le texte
   de la carte illisible. On repasse en flux normal, empile, et on ne garde
   que trois cartes de resultat et une seule question. */
@media(max-width:700px){
.apx-sec{padding:64px 16px}
.apx-scene{width:auto;height:auto;margin:34px 0 0;transform:none}
.apx-grille{display:none}
.apx-sorties{position:static;width:auto;justify-content:center;flex-wrap:wrap;gap:8px}
/* Leur carte est horizontale : sur mobile elle se lit mieux pleine largeur,
   empilee, que serree a deux par ligne ou la ligne meta se coupe. */
.apx-carte{flex:1 1 100%;min-width:0;max-width:none}
.apx-champ{position:static;width:100%;max-width:520px;margin:20px auto 0}
.apx-haut{height:auto;padding:16px 16px 2px}
.apx-t{position:static;white-space:normal}
.apx-t2,.apx-t3,.apx-t4,.apx-t5,.apx-s2,.apx-s3,.apx-s4,.apx-s5{display:none}
.apx-integ{position:static;transform:none;margin:28px auto 0}
}
@media(max-width:560px){.apx-p{font-size:16px;line-height:22.4px}.apx-t{font-size:15px}}


.pq-carte{background:transparent;border-radius:0;padding:8px 0;box-shadow:none}
.pq-h2{font-size:clamp(24px,3vw,33px);font-weight:800;letter-spacing:-.035em;line-height:1.12;margin:0 auto 38px;max-width:640px;color:#0f0f14;text-align:center;text-wrap:balance}
.pq-lead{margin:0 auto 34px;max-width:560px;text-align:center;font-size:16px;line-height:1.6;color:#6c6c76}
.pq-eye{margin:0 0 12px;text-align:center;font-size:11.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:#a2abbd}.pq-c{display:flex;flex-direction:column;gap:0}.pq-ico{display:grid;place-items:center;width:44px;height:44px;margin:0 0 16px;border-radius:14px;background:#eef3ff;color:#3866ff}.pq-ico svg{width:22px;height:22px}
.pq-ct{margin:0 0 14px;font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#8b8f9c}
.pq-liste{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.pq-liste li{display:flex;align-items:center;gap:9px;font-size:14.5px;line-height:1.45;color:#4a4a55}
.pq-liste li span{flex:none;width:5px;height:5px;border-radius:50%;background:#c5cad6}
.pq-pied{margin:16px 0 0;padding-top:14px;border-top:1px solid #e6e9f1;font-size:13.5px;line-height:1.5;color:#8b8f9c}
.pq-trois{display:grid;gap:26px;grid-template-columns:1fr}
@media(min-width:860px){.pq-trois{grid-template-columns:repeat(3,minmax(0,1fr));gap:0}.pq-trois>*{padding:0 34px;border-left:1px solid rgba(15,15,16,.09)}.pq-trois>*:first-child{border-left:0;padding-left:0}.pq-trois>*:last-child{padding-right:0}}
.pq-t{margin:0 0 8px;font-size:17px;font-weight:800;letter-spacing:-.022em;line-height:1.3;color:#0f0f14}
.pq-d{margin:0;font-size:15px;line-height:1.6;color:#6c6c76}

/* ---- Reprise de la section : alignement, separateurs, etats ---- */

/* la carte gagne un peu de relief et une lumiere douce en haut */
.pq-carte{position:relative;border:0;box-shadow:none}
.pq-carte::before{content:none}
.pq-carte>*{position:relative}

/* filets de part et d autre du surtitre */
.pq-eye{display:flex;align-items:center;justify-content:center;gap:11px}
.pq-eye::before,.pq-eye::after{content:"";width:24px;height:1px;flex:none}
.pq-eye::before{background:linear-gradient(90deg,transparent,#c3cfff)}
.pq-eye::after{background:linear-gradient(90deg,#c3cfff,transparent)}

.pq-c{position:relative;z-index:0}

/* voile au survol, porte par un pseudo-element : sa transition reste
   independante du retard d apparition pose plus bas sur .pq-c */
.pq-c::after{content:"";position:absolute;inset:-20px -18px;z-index:-1;border-radius:20px;background:#f5f8ff;opacity:0;transition:opacity .42s cubic-bezier(.4,0,.2,1)}
@media(hover:hover){.pq-carte .pq-c:hover::after{opacity:1}}

.pq-ico{transition:background .42s cubic-bezier(.4,0,.2,1),color .42s cubic-bezier(.4,0,.2,1),box-shadow .42s cubic-bezier(.4,0,.2,1)}
@media(hover:hover){.pq-carte .pq-c:hover .pq-ico{background:#3866ff;color:#fff;box-shadow:0 12px 24px -12px rgba(56,102,255,.8)}}

/* apparition en cascade plutot que d un seul bloc */
.pq-c:nth-child(2){transition-delay:.09s}
.pq-c:nth-child(3){transition-delay:.18s}

@media(min-width:860px){
  /* les trois colonnes partagent les memes lignes : icone, titre et paragraphe
     demarrent a la meme hauteur meme quand un titre passe sur deux lignes */
  .pq-trois{grid-template-rows:auto auto auto;gap:0}
  .pq-c{display:grid;grid-row:span 3;grid-template-rows:subgrid;padding:0 34px}
  .pq-c:first-child{padding-left:0}
  .pq-c:last-child{padding-right:0}
  .pq-c::after{inset:-20px 16px}
  .pq-c:first-child::after{left:-18px}
  .pq-c:last-child::after{right:-18px}

  /* filet vertical entre les colonnes, estompe aux extremites */
  .pq-c + .pq-c::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:1px;background:linear-gradient(180deg,transparent,#e6e9f1 18%,#e6e9f1 82%,transparent)}
}

/* sans subgrid : on reserve deux lignes au titre pour garder l alignement */
@supports not (grid-template-rows:subgrid){
  @media(min-width:860px){.pq-t{min-height:2.6em}}
}

/* en colonne, un filet horizontal remplace le filet vertical */
@media(max-width:859px){
  .pq-trois{gap:0}
  .pq-c + .pq-c{margin-top:26px;padding-top:26px;border-top:1px solid #eef0f5}
}

@media(prefers-reduced-motion:reduce){
  .pq-c,.pq-c::after,.pq-ico{transition:none}
}


/* ===== SECTION TARIF : COPIE DE trendtrack.io/fr/pricing (2026-09-04) =====
   Toutes les valeurs ci-dessous ont ete relevees sur leur page, pas estimees.

   section        padding 84 en haut
   panneau titre  1056 de large, 386 de haut, meme fond que la page,
                  decor = semis de points + trois anneaux qui s ouvrent
                  section_layout a ecart 44 : (label + titre + phrase) puis la bascule
   label          74x20, ecart 4, crochets en accent 14/500, mot a 73 %
   titre          68 / 600 / 74,8 / -2,856 px de chasse
   phrase         560 de large
   bascule        45 de haut, rayon 20, fond et bord blanc a 4 %, rembourrage 2
                  onglet 156x39 rayon 18, pastille active blanc a 8 %
   grille         980, ecart 20
   carte          313 chez eux (480 chez nous, deux offres), rayon 28,
                  rembourrage 24, colonne a ecart 24, fond blanc a 4 %,
                  ombres  inset 0 1px 0 blanc 4 % + inset 0 0 70px blanc 2 %
                        + inset 0 0 12px blanc 4 %
   carte en avant fond blanc 6 % + anneau 0 0 0 4px accent 8 %
   nom            16/500, description 14/400 a 73 %, ecart 4
   prix           32/500/35,2 en rouleau de chiffres, ecart 8 avec la pastille
   pastille       12/400, rayon 8, rembourrage 3/7, fond et bord accent a 4 %
   sous-prix      14/400 a 73 %
   bouton         265x48 chez eux, fond a rayon 18
   filet          1 px en pointilles : degrade a 66,66 % repete tous les 6 px
   rangee sieges  rond de 24 borde blanc 8 %, icone 14, texte 14 a 50 %
   rangee liste   hauteur 24, ecart 12 ; a gauche rond de 24 + libelle 16/400 ;
                  a droite valeur 14/400 a 73 %
   rangee absente le groupe de gauche tombe a 50 % d opacite, la valeur devient
                  une croix de 18

   Deux ecarts assumes, expliques au client : leur bascule a trois periodes
   (mensuel, trimestriel, annuel) et Callpit n en vend que deux, donc deux
   onglets ; et leur carte Enterprise n a pas d equivalent ici. Rien d autre
   n a ete change. */
#tarif{padding:84px 20px 80px}
#tarif .tp-in{max-width:1056px;margin:0 auto}

/* ---- panneau du titre ---- */
/* Le decor est desormais celui du heros, colle tel quel (le client, 2026-09-05) :
   meme balisage .hh-deco, memes classes, donc meme voile blanc a 8 %, memes
   filets verticaux de 1 px, meme image de fond et memes anneaux bleus qui
   s ouvrent. Rien n est redefini ici, tout vient du bloc .hh- de l entete. */
#tarif .tp-in{position:relative;z-index:1}
#tarif .tp-entete{position:relative;padding:80px 20px 40px}
/* ===== DECOR : releve sur trendtrack.io/fr/pricing, pas sur leur accueil =====
   le client (2026-09-05) : leurs traits sont plus courts. Verifie, et ce sont deux
   dispositifs differents. Leur heros d accueil fait 544 de haut et porte quatre
   filets de 1 px (440 et 460). Leur page tarifs n en a AUCUN : la boite fait
   386, exactement la hauteur du panneau de titre, et les deux traits clairs que
   l on voit sont juste les bandes de 72 px de la lueur laissees libres par la
   plaque opaque de 1056 posee dessus. L onde de choc est centree au milieu de
   ces 386, soit 193, et non a 272 comme sur un heros de 544.
   Trois calques chez eux, trois ici : la plaque est opaque et SANS masque, le
   masque 0/50/100 est sur l image, le masque 0/15/65/100 sur l onde. La hauteur
   est en 100 %, le decor suit donc le panneau quel que soit le rembourrage de
   la section, qui differe entre l accueil et /tarifs/. */
#tarif .tp-fond{position:absolute;left:50%;top:0;z-index:0;width:min(1200px,calc(100vw - 40px));height:100%;transform:translateX(-50%);pointer-events:none;background-image:radial-gradient(59.01% 50%,rgba(255,255,255,.08) 0%,rgba(255,255,255,0) 100%)}
#tarif .tp-plaque{position:absolute;left:72px;right:72px;top:0;height:100%;overflow:hidden;background:rgb(1,7,12)}
/* Les quatre filets de 1 px, remis a la demande du client (2026-09-05). Ce sont
   ceux du heros d accueil, mais ramenes a l echelle de la boite de 386 : ils y
   faisaient 440 et 460 pour 544 de haut, soit 81 et 85 %, exprimes en pourcentage
   pour qu ils suivent la boite. Opacites baissees le 2026-09-05 : chez eux
   AUCUN element de ce bloc ne depasse 8 % de blanc, c est le maximum de leur
   lueur. Nos filets interieurs etaient a 11 %, donc plus clairs que la lueur
   elle-meme, d ou l effet trop marque. On passe sous leur plafond : 3 % pour
   les deux filets exterieurs, 6 % pour les deux interieurs. */
#tarif .tp-fond::before,#tarif .tp-fond::after{content:"";position:absolute;top:15%;width:1px;height:50%;pointer-events:none;background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.03) 28%,rgba(255,255,255,.03) 55%,rgba(255,255,255,0) 100%)}
#tarif .tp-fond::before{left:0}
#tarif .tp-fond::after{right:0}
#tarif .tp-plaque::before,#tarif .tp-plaque::after{content:"";position:absolute;top:15%;z-index:2;width:1px;height:50%;pointer-events:none;background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.06) 28%,rgba(255,255,255,.06) 55%,rgba(255,255,255,0) 100%)}
#tarif .tp-plaque::before{left:0}
#tarif .tp-plaque::after{right:0}
#tarif .tp-img{position:absolute;inset:0;-webkit-mask:linear-gradient(rgba(0,0,0,0) 0%,#fff 50%,rgba(0,0,0,0) 100%);mask:linear-gradient(rgba(0,0,0,0) 0%,#fff 50%,rgba(0,0,0,0) 100%)}
#tarif .tp-img img{display:block;width:100%;height:auto;margin-top:12px}
/* L onde doit etre IDENTIQUE a celle du heros d accueil (le client, 2026-09-05).
   Chez lui l anneau de 1056 de diametre vit dans une boite de 544 de haut ;
   ici la boite ne fait que 386, l anneau y etait donc rogne bien plus tot et
   l arc visible n avait plus la meme courbure. On rend a ce seul calque les
   544 px du heros, centres sur la plaque : la geometrie de l anneau redevient
   la sienne, et c est la plaque qui coupe, exactement comme .hh-fond coupe
   la sienne sur l accueil. */
#tarif .tp-onde{position:absolute;left:0;right:0;top:50%;height:544px;transform:translateY(-50%);overflow:hidden;-webkit-mask:linear-gradient(rgba(0,0,0,0) 0%,#fff 15%,#fff 65%,rgba(0,0,0,0) 100%);mask:linear-gradient(rgba(0,0,0,0) 0%,#fff 15%,#fff 65%,rgba(0,0,0,0) 100%)}
#tarif .tp-pts{position:absolute;inset:0;-webkit-mask:url(/wp-content/themes/callpit-theme/img/points-masque.png?v=3) 0 0 / 201px 201px;mask:url(/wp-content/themes/callpit-theme/img/points-masque.png?v=3) 0 0 / 201px 201px}
#tarif .tp-cercles{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;filter:blur(14px)}
#tarif .tp-cercles i{position:absolute;width:100%;aspect-ratio:1;border-radius:999em;border:clamp(4em,10vh,10em) solid #1e90ff;overflow:hidden;transform:scale(0);opacity:0;animation:tp-choc 9s ease infinite}
#tarif .tp-cercles i:nth-child(1){animation-delay:-6s}
#tarif .tp-cercles i:nth-child(2){animation-delay:-3s}
#tarif .tp-cercles i:nth-child(3){animation-delay:0s}
@keyframes tp-choc{0%{transform:scale(0);opacity:1}100%{transform:scale(1);opacity:0}}
@media(prefers-reduced-motion:reduce){#tarif .tp-cercles i{animation:none}}
#tarif .tp-entete-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:44px}
#tarif .tp-tete-txt{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%}
#tarif .tp-eye{display:flex;align-items:center;gap:4px;margin:0;font-size:14px;font-weight:600;line-height:19.6px;letter-spacing:-.01em;text-transform:none;color:#3f8fff}
#tarif .tp-eye i{display:none}
#tarif .tp-h2{max-width:934px;margin:0;font-size:clamp(38px,4.72vw,68px);font-weight:600;line-height:1.1;letter-spacing:-.042em;color:#fff;text-align:center;text-wrap:balance}
/* Leur phrase fait 18/25,2 sur DEUX lignes, soit 50 px : c est le seul ecart
   qui restait entre leur en-tete et le notre (386 contre 358). Le min-height
   garantit les deux lignes meme si le texte change, sinon la bascule et les
   cartes remontent de 28 px. */
#tarif .tp-lead{width:100%;max-width:560px;margin:0;min-height:50.4px;font-size:18px;font-weight:400;line-height:25.2px;letter-spacing:-.112px;color:rgba(255,255,255,.73);text-align:center;text-wrap:balance}

/* ---- bascule ---- */
#tarif .tp-nav{position:relative;display:inline-flex;gap:2px;padding:2px;border:1px solid rgba(255,255,255,.04);border-radius:20px;background:rgba(255,255,255,.04)}
#tarif .tp-nav-bg{position:absolute;left:2px;top:2px;bottom:2px;width:calc(50% - 3px);border-radius:18px;background:rgba(255,255,255,.08);transition:transform .38s cubic-bezier(.32,.72,0,1)}
#tarif .tp-nav[data-on="y"] .tp-nav-bg{transform:translateX(calc(100% + 2px))}
#tarif .tp-btn{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:156px;height:39px;padding:0 20px;border:0;border-radius:18px;background:none;font:inherit;font-size:16px;font-weight:400;line-height:1;letter-spacing:-.112px;color:rgba(255,255,255,.55);cursor:pointer;transition:color .3s ease}
#tarif .tp-btn[aria-pressed="true"]{background:none;color:#fff}

/* la pastille de remise, la meme dans l onglet et a cote du prix */
#tarif .tp-tag{display:inline-flex;align-items:center;gap:2.8px;padding:3px 7px;border:1px solid rgba(63,143,255,.14);border-radius:8px;background:rgba(63,143,255,.10);font-size:12px;font-weight:400;line-height:16.8px;letter-spacing:-.112px;color:#3f8fff;white-space:nowrap}

/* ---- grille et cartes ---- */
#tarif .tp-scene{position:relative;max-width:980px;margin:0 auto;padding:0 0 0}
#tarif .tp-grille{position:relative;display:grid;gap:20px;max-width:480px;margin:0 auto}
#tarif .tp-grille.tp-deux{max-width:none;grid-template-columns:repeat(2,minmax(0,1fr))}
#tarif .tp-carte{display:flex;flex-direction:column;gap:24px;padding:24px;border-radius:28px;text-align:left;background:rgba(11,17,22,.82);box-shadow:inset 0 1px 0 rgba(255,255,255,.04),inset 0 0 70px rgba(255,255,255,.02),inset 0 0 12px rgba(255,255,255,.04)}
#tarif .tp-carte.tp-vedette{background:rgba(16,22,27,.82);box-shadow:0 0 0 4px rgba(56,102,255,.10),inset 0 1px 0 rgba(255,255,255,.05),inset 0 0 70px rgba(255,255,255,.02),inset 0 0 12px rgba(255,255,255,.04)}

#tarif .tp-tete{display:flex;flex-direction:column;gap:4px}
#tarif .tp-nom{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;font-size:16px;font-weight:500;line-height:22.4px;letter-spacing:-.112px;color:#fff}
#tarif .tp-chip{flex:none;padding:3px 10px;border-radius:99px;background:rgba(255,255,255,.08);font-size:12px;font-weight:500;line-height:16px;letter-spacing:0;color:rgba(255,255,255,.73)}
#tarif .tp-desc{min-height:39.2px;margin:0;font-size:14px;font-weight:400;line-height:19.6px;letter-spacing:-.112px;color:rgba(255,255,255,.73)}

/* ---- prix en rouleau de chiffres ---- */
#tarif .tp-prix{display:flex;flex-direction:column;gap:2px}
#tarif .tp-montant{display:flex;align-items:center;gap:8px;margin:0;height:35px}
#tarif .tp-chiffres{display:flex;align-items:flex-start;font-size:32px;font-weight:500;line-height:35px;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
/* 5C : la metrique du rouleau doit etre un nombre ENTIER de pixels. A 35,2 px,
   la colonne du chiffre « 2 » glissait de -70,4 px : le compositeur arrondit cette
   valeur au pixel, alors que le chiffre « 0 », qui glisse de 0, n arrondit rien.
   Les deux chiffres du prix ne tombaient donc pas sur la meme ligne. */
#tarif .tp-d{display:block;height:35px;overflow:hidden}
#tarif .tp-d span{display:block;transform:translateY(calc(var(--n,0) * -35px));transition:transform .5s cubic-bezier(.32,.72,0,1)}
#tarif .tp-d i{display:block;height:35px;font-style:normal}
#tarif .tp-chiffres s{text-decoration:none;margin-left:2px}
#tarif .tp-sous{margin:0;font-size:14px;font-weight:400;line-height:19.6px;letter-spacing:-.112px;color:rgba(255,255,255,.73)}
/* la pastille de remise a cote du prix ne vit qu en mode annuel, comme chez eux */
#tarif .tp-tag-prix{transition:opacity .3s ease}
#tarif .tp-scene[data-on="m"] .tp-tag-prix{opacity:0;visibility:hidden}

/* ---- bouton ---- */
#tarif .tp-action{display:flex;flex-direction:column;gap:10px}
#tarif .tp-cta{width:100%}
#tarif .tp-cta2 .hx-btn-bg{background:none;box-shadow:none;border:1px solid rgba(255,255,255,.24)}
#tarif .tp-cta2:hover .hx-btn-bg{border-color:rgba(255,255,255,.44);background:rgba(255,255,255,.05)}
#tarif .tp-cta2 .hx-btn-i{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.10)}
#tarif .tp-rassure{margin:0;font-size:13px;font-weight:400;line-height:1.5;letter-spacing:-.112px;color:rgba(255,255,255,.5)}

/* ---- filets en pointilles, sieges, liste ---- */
#tarif .tp-sieges{display:flex;flex-direction:column;gap:16px}
#tarif .tp-filet{display:block;height:1px;background-image:linear-gradient(to right,rgba(255,255,255,0) 66.66%,rgba(255,255,255,.24) 0);background-size:6px 1px;background-repeat:repeat-x}
#tarif .tp-siege{display:flex;align-items:center;gap:8px;margin:0;font-size:14px;font-weight:400;line-height:19.6px;letter-spacing:-.112px;color:rgba(255,255,255,.5)}
#tarif .tp-pict{display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:50%;border:1px solid rgba(255,255,255,.08)}
#tarif .tp-pict svg{width:14px;height:14px;display:block}

#tarif .tp-liste{display:flex;flex-direction:column;gap:16px;margin:0;padding:0;list-style:none}
#tarif .tp-liste li{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:24px}
#tarif .tp-liste b{display:flex;align-items:center;gap:8px;min-width:0;font-size:16px;font-weight:400;line-height:22.4px;letter-spacing:-.112px;color:#fff}
#tarif .tp-ico{display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:50%;background:rgba(63,143,255,.12)}
#tarif .tp-ico svg{width:12px;height:12px;display:block;color:#3f8fff}
#tarif .tp-liste i{flex:none;font-style:normal;font-size:14px;font-weight:400;line-height:19.6px;letter-spacing:-.112px;color:rgba(255,255,255,.73);text-align:right}
#tarif .tp-liste li.tp-non b{opacity:.5}
#tarif .tp-liste li.tp-non .tp-ico{background:rgba(255,255,255,.08)}
#tarif .tp-liste li.tp-non .tp-ico svg{color:rgba(255,255,255,.6)}
#tarif .tp-x{display:grid;place-items:center;width:18px;height:18px;flex:none}
#tarif .tp-x svg{width:12px;height:12px;display:block;color:rgba(255,255,255,.35)}

/* ---- garanties sous les cartes ---- */
#tarif .tp-gar{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px 36px;width:min(1100px,calc(100vw - 80px));margin:44px 0 0 50%;padding:0;list-style:none;transform:translateX(-50%)}
#tarif .tp-gar li{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:400;line-height:19.6px;letter-spacing:-.112px;color:rgba(255,255,255,.5)}
#tarif .tp-gar b{font-weight:500;color:rgba(255,255,255,.82)}

@media(max-width:900px){
#tarif .tp-grille.tp-deux{grid-template-columns:1fr;max-width:480px}
#tarif .tp-entete{padding:48px 16px 32px}
#tarif .tp-entete-in{gap:32px}
}
@media(max-width:560px){
#tarif{padding:56px 16px 64px}
#tarif .tp-nav{display:flex;width:100%}
#tarif .tp-btn{flex:1;min-width:0;padding:0 8px;font-size:15px}
#tarif .tp-carte{gap:20px;padding:20px;border-radius:22px}
#tarif .tp-desc{min-height:0}
#tarif .tp-liste li{align-items:flex-start}
#tarif .tp-liste b{align-items:flex-start}
#tarif .tp-liste i{padding-top:2px}
#tarif .tp-gar{flex-direction:column;align-items:flex-start;gap:14px;width:min(340px,calc(100vw - 56px));margin:36px 0 0 50%}
#tarif .tp-gar li{align-items:flex-start}
#tarif .tp-gar .tp-pict{margin-top:-2px}
}


/* FAQ EN NOIR (le client, 2026-09-04). Le panneau qui la porte prend le fond
   sombre du site ; tous les gris de texte sont retournes. Le CTA qui la
   suivait DANS LE MEME panneau clair a desormais le sien, sinon il aurait
   vire au noir avec elle. */
.hh-noir #faq.hf-sec{color:#fff}
.hh-noir .hf-eyebrow{color:#3f8fff;letter-spacing:-.01em}
.hh-noir .hf-eyebrow i{display:none}
.hh-noir .hf-h2,.hh-noir #faq.hf-sec .hf-h2{color:#fff}
.hh-noir .hf-p{color:rgba(255,255,255,.73)}
.hh-noir .hf-p a{color:#fff}
.hh-noir .hf-q{border-bottom-color:rgba(255,255,255,.14)}
.hh-noir .hf-t,.hh-noir .hf-t svg{color:#fff}
.hh-noir .hf-r p{color:rgba(255,255,255,.73)}


/* WALL OF LOVE : copie du dispositif TrendTrack. Colonnes en maconnerie,
   cartes sombres, etoiles, troisieme rangee fondue sous un masque, bouton
   « Voir plus d'avis » pose dessus qui deplie tout. */
/* Le mur d avis, calque sur celui de trendtrack.io : trois colonnes de 387
   dans 1200, ecart 20, carte a rayon 28 et fond blanc a 4 % avec deux ombres
   internes, cinq etoiles de 20, avatar de 44 rond et debordement cache, mur
   coupe a 640 avec un voile degrade vers le fond de section. */
.wl-sec{position:relative;padding:80px 20px;background:rgb(1,7,12);border-radius:30px 30px 0 0;text-align:center}
.wl-eye{display:flex;align-items:center;justify-content:center;gap:.45em;margin:0 0 16px;font-family:inherit;font-size:14px;font-weight:600;line-height:20px;color:#3f8fff;letter-spacing:-.01em}
.wl-eye i{display:none}
.wl-h2{margin:0 0 16px;color:#fff}
.wl-sub{margin:0 auto;max-width:636px}
.wl-mur{position:relative;max-width:1200px;margin:60px auto 0;max-height:640px;overflow:hidden;text-align:left}
.wl-grille{columns:3;column-gap:20px}
.wl-carte{break-inside:avoid;display:flex;flex-direction:column;gap:20px;margin:0 0 20px;padding:24px;border-radius:28px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 100px rgba(255,255,255,.04),inset 0 0 20px rgba(255,255,255,.04)}
.wl-etoiles{display:flex;margin:0;line-height:0}
.wl-etoiles img{width:20px;height:20px;display:block}
.wl-txt{margin:0;font-size:16px;line-height:22.4px;letter-spacing:-.112px;color:#fff}
.wl-auteur{display:flex;align-items:center;gap:12px;min-width:0}
.wl-photo{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;overflow:hidden;background:rgba(255,255,255,.08)}
.wl-photo img{width:44px;height:44px;object-fit:cover;display:block}
.wl-ini{font-size:14px;font-weight:600;letter-spacing:.02em;color:rgba(255,255,255,.6)}
.wl-qui{min-width:0}
.wl-qui b{display:block;font-size:14px;font-weight:500;letter-spacing:-.112px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wl-qui i{display:block;font-style:normal;font-size:14px;font-weight:400;letter-spacing:-.112px;color:rgba(255,255,255,.5);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wl-voile{position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(1,7,12,0),rgb(1,7,12))}
.wl-btn{position:absolute;left:50%;bottom:0;transform:translateX(-50%);z-index:2;display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 14px;border:0;border-radius:10px;background:none;font:inherit;font-size:16px;font-weight:500;letter-spacing:-.112px;color:#fff;cursor:pointer}
.wl-btn:hover{background:rgba(255,255,255,.06)}
.wl-mur.ouvert{max-height:none}
.wl-mur.ouvert .wl-voile,.wl-mur.ouvert .wl-btn{display:none}
@media(max-width:940px){.wl-grille{columns:2}.wl-sec{border-radius:22px 22px 0 0}}
@media(max-width:620px){.wl-grille{columns:1}.wl-carte{padding:20px;border-radius:22px;gap:16px}}


/* Le bouton final est le meme que celui du heros (le client, 2026-09-03), en inline-flex pour rester centre dans son bloc. */
section.fin-sec .fin-btn { display: inline-flex; }
/* L onde du bloc final, relevee sur la section finale de trendtrack.io le
   2026-09-03 : trois anneaux (bordure clamp(4em,10vh,10em), largeur 100 %,
   ratio 1) dans un calque floute a 14 px, chacun anime 9 s en boucle, echelle 0
   vers 1 et opacite 1 vers 0, decales de 0, 3 et 6 s. Le calque est masque par un
   semis de points (notre fichier, meme pas : 2 px tous les 6 px a demi-echelle)
   puis fondu en haut et en bas. Vert remplace par le bleu Callpit. */
.fin-sec { position: relative; }
.fin-sec > .fin-wrap, .fin-sec > .fe { position: relative; z-index: 1; }
/* La classe absolute sur l enveloppe la soustrait a la regle commune
   .cp-cadre > :not(.absolute):not(.fixed) { position: relative; z-index: 1 }, plus
   specifique qu une classe seule, qui l aplatissait a 0 px de haut. */
.fin-sec > .fo-enveloppe { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; isolation: isolate; -webkit-mask: linear-gradient(rgba(0,0,0,0) 0%, #fff 15%, #fff 65%, rgba(0,0,0,0) 100%); mask: linear-gradient(rgba(0,0,0,0) 0%, #fff 15%, #fff 65%, rgba(0,0,0,0) 100%); }
/* Le semis de points : tuile de 402 px affichee a 201 px, points a 0, 6, ... 396 pour un raccord sans couture (une premiere tuile commencant a 6 px laissait une rangee vide a chaque raccord, d ou un grand quadrillage de traits, corrige le 2026-09-03). */
.fin-sec .fo-points { position: absolute; inset: 0; -webkit-mask: url(/wp-content/themes/callpit-theme/img/points-masque.png?v=3) 0 0 / 201px 201px; mask: url(/wp-content/themes/callpit-theme/img/points-masque.png?v=3) 0 0 / 201px 201px; }
.fin-sec .fo-cercles { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; filter: blur(14px); }
.fin-sec .fo-cercle { position: absolute; width: 60%; aspect-ratio: 1; border-radius: 999em; border: clamp(4em, 10vh, 10em) solid #82b6ff; overflow: hidden; transform: scale(0); opacity: 0; animation: fo-onde 10s ease infinite; }
/* Delais negatifs : au chargement les anneaux sont deja en cours, pas de temps mort avant le premier (le client, 2026-09-03). Meme vitesse, meme rythme. */
.fo-cercle:nth-child(1) { animation-delay: -6.67s; }
.fo-cercle:nth-child(2) { animation-delay: -3.33s; }
.fo-cercle:nth-child(3) { animation-delay: 0s; }
/* le client (2026-09-03) : chez eux l onde s eteint vers la moitie de l ecran et va un
   peu moins vite. Arreter la course a l echelle .5 rendait l anneau invisible : son
   epaisseur suit l echelle. On garde leur trajet complet (echelle 0 a 1, anneau
   epais) sur un cercle de base plus petit, 60 % de la largeur, 10 s au lieu de 9,
   et un bleu plus clair qui ressort sur le noir comme leur vert vif. */
@keyframes fo-onde { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fo-cercle { animation: none; } }


/* ECRAN FINAL : le moniteur est l image fournie par le client le 2026-09-04 (la dalle
   de TrendTrack, passee du vert au bleu nuit cote serveur : rgb(16,25,24) devient
   rgb(16,20,33)), et la capture du pipeline est calee dans la dalle aux memes
   proportions que la capture de TrendTrack dans son moniteur : 2,155 % du bord
   gauche, 2,945 % du haut, 95,69 % de large, 70,04 % de haut. Notre capture est
   plus large (rapport 2,02 contre 1,78), elle est recadree a droite. */
.fe{position:relative;max-width:min(820px,max(68vw,340px));margin:56px auto 0;pointer-events:none}
.fe-lueur{position:absolute;left:50%;top:-30px;width:120%;height:280px;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(63,143,255,.13),transparent 72%);filter:blur(34px)}
/* La feuille commune garde l ancien .fe-cadre de la landing (rembourrage 12 px, bord, fond degrade) : on le remet a zero ici, l image du moniteur se suffit. */
.fe-cadre{position:relative;z-index:1;padding:0;border:0;background:none;box-shadow:none;border-radius:0}
.fe-moniteur{display:block;width:100%;height:auto}
.fe-app{position:absolute;left:2.155%;top:2.945%;width:95.69%;height:70.04%;object-fit:cover;object-position:left top;border-radius:0;outline:0;background:#fff}
@media(max-width:560px){
.fe{margin-top:44px}
}


/* PIED DE PAGE structure : marque + description a gauche, colonnes de liens,
   rang du bas avec copyright et preuve sociale. */
.pied2{position:relative;--rail:max(16px,calc(50% - 600px));border-top:1px solid rgba(255,255,255,.09);background:#050506;padding:48px 40px 32px}/* Les deux rails verticaux du pied sont retires (le client, 2026-09-05). */
.pied2-wrap{max-width:1200px;margin:0 auto}
.pied2-haut{display:grid;gap:40px;margin-bottom:48px}
@media(min-width:768px){.pied2-haut{grid-template-columns:minmax(0,1.15fr) minmax(0,1.6fr);gap:60px;margin-bottom:60px}}
/* Le pied porte desormais le VRAI logo, le meme fichier que l entete
   (cp-logo-blanc.webp), et non plus la pastille suivie du mot en texte.
   Meme hauteur que dans la barre : 28 px. */
.pied2-logo{display:flex;align-items:center;margin:0 0 16px}
.pied2-marque{display:block;width:auto;height:28px}
.pied2-desc{margin:0;max-width:340px;font-size:14px;line-height:19.6px;letter-spacing:-.112px;color:rgba(255,255,255,.73)}
.pied2-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 40px}
@media(min-width:900px){.pied2-cols{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Titres de colonne repris du pied de trendtrack (le client, 2026-09-05) : 16/500
   en casse normale et en blanc, au lieu de 11,5/800 en majuscules espacees a
   50 %. Liens a 73 % comme chez eux, ecart de 8 entre eux, 16 sous le titre. */
.pied2-t{margin:0 0 16px;font-size:16px;font-weight:500;line-height:22.4px;letter-spacing:-.112px;text-transform:none;color:#fff}
.pied2-cols a{display:block;margin:0 0 8px;font-size:14px;line-height:19.6px;letter-spacing:-.112px;color:rgba(255,255,255,.73);text-decoration:none;transition:color .15s ease}
.pied2-cols a:hover{color:#fff}
/* Le filet du bas devient le pointille de trendtrack : degrade coupe a 66,66 %
   repete tous les 6 px, exactement la recette de leur .divider. */
.pied2-bas{display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:space-between;padding-top:24px;border-top:0;background-image:linear-gradient(to right,rgba(255,255,255,0) 66.66%,rgba(255,255,255,.12) 0);background-size:6px 1px;background-repeat:repeat-x;background-position:0 0;font-size:14px;line-height:19.6px;letter-spacing:-.112px;color:rgba(255,255,255,.73)}
@media(min-width:768px){.pied2-bas{flex-direction:row}}
.pied2-bas p{margin:0}
.pied2-etoiles span{color:#f0b429;letter-spacing:2.5px;margin-right:8px;font-size:12px}
.pied2-mention{margin:18px 0 0;text-align:center;font-size:11.5px;color:rgba(255,255,255,.26)}


/* RESPIRATION VERTICALE. Les sections produit tombaient a 62px de marge en
   desktop (moins qu'en mobile !) et la carte de la 01 restait basse : tout se
   touchait. Echelle unique : ~76px entre les blocs en desktop, ~56 en mobile.
   Pose en fin de fichier pour gagner la cascade sur les reglages epars. */
.cp-sec.st-bloc{padding:56px 18px}
.cta-mid{padding:40px 18px 46px}.lien-cta{display:inline-flex;align-items:center;gap:7px;margin-top:20px;font-size:15px;font-weight:750;color:#2450ea;text-decoration:none;letter-spacing:-.01em}.lien-cta svg{width:17px;height:17px;transition:transform .18s ease}.lien-cta:hover svg{transform:translateX(3px)}.btn-sec{display:inline-flex;align-items:center;gap:9px;margin-top:24px;min-height:46px;padding:0 26px;border-radius:99px;font-size:15px;font-weight:700;color:#fff;text-decoration:none;background:linear-gradient(135deg,#4a76ff 0%,#2450ea 58%,#1a3bb8 100%);box-shadow:0 2px 4px rgba(20,40,120,.15),0 10px 20px -10px rgba(26,59,184,.5);transition:transform .18s ease,box-shadow .18s ease}.btn-sec:hover{transform:translateY(-2px);box-shadow:0 3px 6px rgba(20,40,120,.18),0 14px 26px -10px rgba(26,59,184,.6)}.btn-sec svg{width:16px;height:16px}.fq-grille{display:grid;gap:34px;max-width:1040px;margin:0 auto}.pg-pile{display:grid}.pg-pile>*{grid-area:1/1}.pr-ancre{margin:34px 0 0;text-align:center;font-size:14px;color:#8b93a7;letter-spacing:-.005em;padding:0 14px}.pr-ancre s{color:#6b7488}.pr-ancre b{color:#eceef4;font-weight:700}.pr-bouclier{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;width:fit-content;margin:32px auto 0;padding:13px 24px;border-radius:99px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.045);font-size:13.5px;color:#8b93a7;text-align:center}.pr-bouclier svg{width:17px;height:17px;flex:none;stroke:#7f8ff5}.pr-bouclier b{color:#e6e9f2;font-weight:700}.pf-cta{margin-top:36px;text-align:center}.pf-cta .pf-sous{margin:13px 0 0;font-size:13px;font-weight:600;color:#8b93a7}
.cta-mid .cta-mid-t{font-size:18px}
.pq-h2{font-size:clamp(28px,3.4vw,40px);margin-bottom:40px}
.pq-carte{padding:16px 0 6px}
#tarif{padding-top:56px;padding-bottom:64px}
#faq{padding-top:54px;padding-bottom:60px}
.wl-sec{padding:64px 16px}
.pg-panneau{padding:32px 20px}
.tr{padding:18px}
.tr-scene>*{min-height:252px}
@media(min-width:768px){
.cp-sec.st-bloc{padding:76px 20px}
.cta-mid{padding:44px 20px 48px}.fq-grille{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px}
.cta-mid .cta-mid-t{font-size:19px;max-width:560px}
.pq-h2{margin-bottom:46px}
#tarif{padding-top:84px;padding-bottom:80px}
#faq{padding-top:74px;padding-bottom:80px}
.wl-sec{padding:80px 20px}
.pg-panneau{padding:54px 46px}
.dp-tete{margin-bottom:46px}
.tr-scene>*{min-height:288px}
}


/* ===== CORRECTIFS RESPONSIVE, EN DERNIER =====
   La feuille contient 31 regles de media query neutralisees par une regle
   plate ecrite plus loin dans le fichier : a specificite egale, la derniere
   gagne, et le media query ne sert jamais. La majorite sont des vestiges de
   refontes et doivent rester mortes. Celles qui suivent sont les seules qui
   corrigeaient un vrai defaut ; elles sont donc redeclarees ici, tout en bas,
   ou plus rien ne peut les ecraser. Ne rien ajouter apres ce bloc. */
@media(max-width:559px){
.so-outils{gap:8px}
.so-chip{gap:6px;padding:9px 10px;font-size:12px}
}
@media(max-width:640px){
.pied2-cols a{display:flex;align-items:center;min-height:40px}
/* cibles tactiles restantes : logo de l entete et lien texte de section */
.cp-mot{min-height:42px}
.lien-cta{min-height:44px;align-items:center}
}
/* ===== HERO MOBILE =====
   1. Le titre passait en inline sous 620 px : les deux lignes voulues se
      collaient et la coupure tombait n importe ou, laissant le mot outil seul
      sur une troisieme ligne. On rend les blocs, et on cale la taille pour que
      la plus longue des deux tienne sur une ligne (elle mesure 10,94 em).
   2. Le bandeau de preuve passait sur deux lignes dont la seconde ne portait
      quun mot : avatars et police reduits pour le ramener sur une ligne.
   3. 46 px de vide entre les pastilles et le bouton. */
@media(max-width:620px){
.hero-line{display:block}
.hero-h1{font-size:clamp(24px,calc((100vw - 32px)/11.6),44px)}
.hero-h1--long{font-size:clamp(25px,calc((100vw - 32px)/14.5),38px);max-width:22ch}
}
/* le bandeau de preuve tenait sur deux lignes quand il disait "Utilise par
   2 000+ entreprises et utilisateurs". Texte raccourci a "2 000+ utilisateurs",
   il tient largement : les reductions d avatars et de police sont retirees. */
@media(max-width:640px){
.hero-atouts{margin-bottom:16px}
/* le vide venait de la marge haute du bouton, pas des pastilles : marges
   adjacentes fusionnees, la plus grande gagne */
.hero-cta{margin-top:28px}
/* Pastilles : deux par ligne, la troisieme centree dessous. Il faut 166 px par
   pastille sur les 343 disponibles, donc police et gabarit reduits. Le bloc
   au dessus pose !important, on le reprend ici. */
.hero-atouts{gap:8px}
.hero-atouts span{font-size:11px!important;padding:4px 10px!important;gap:6px!important}
.hero-atouts svg{width:12px!important;height:12px!important}
/* Bouton : 311 x 64 pour un texte de 219, trop massif sur un ecran de 375 */
.cta-hero{min-height:54px;font-size:15.5px;padding:0 7px 0 24px;gap:10px}
.cta-hero .cta-rond{width:32px;height:32px}
}
/* ===== SIX OUTILS VERS UN : LA CONVERGENCE SUR MOBILE =====
   Sur bureau la carte de destination est etroite (236 px) face a une colonne
   d outils large : la forme elle meme dit six vers un. Cette largeur etait
   posee dans @media(min-width:940px), donc jamais appliquee en dessous. La
   carte s etalait sur toute la largeur, faisait 158 px de haut pour un logo de
   46, soit plus haute que les six outils reunis (142 px) et vide aux neuf
   dixiemes. L entonnoir se lisait a l envers : la destination ecrasait ce qu
   elle est censee absorber. On lui rend sa largeur et on la degonfle. */
@media(max-width:939px){
.so-cible{width:236px;max-width:100%;margin-left:auto;margin-right:auto;min-height:96px;padding:18px 20px}
.so-flux{gap:16px}
/* Sous 940 px la colonne de texte nest plus a gauche dun duo, elle est seule
   au dessus dun schema centre : le fer a gauche navait plus de raison detre. */
.so-grid > div:first-child{text-align:center}
/* La fleche mobile reprend la langue du schema bureau : des courbes qui
   convergent vers un point, avec la meme pastille bleue #3866ff. Une branche
   par colonne, donc deux sous 560 px et trois au dessus. Les courbes sont
   etirees en largeur (preserveAspectRatio none) pour se caler sur le centre de
   chaque colonne ; non-scaling-stroke garde le trait a epaisseur constante. */
.so-fleche{height:42px;color:#a8bdf0}
.so-fk{position:absolute;left:0;top:0;width:100%;height:34px}
.so-fleche::after{content:"";position:absolute;left:50%;top:34px;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:#3866ff}
}

/* la fourche : deux branches sous 560 px, trois au dessus, rien des 940 */
.so-fk{display:none}
@media(max-width:559px){.so-fk2{display:block}}
@media(min-width:560px) and (max-width:939px){.so-fk3{display:block}}

/* ===== TEXTES DE SECTION CENTRES SUR MOBILE =====
   Meme logique que pour le schema des six outils : tant que le bloc de texte
   est seul au dessus de sa maquette, le fer a gauche na plus de raison detre.
   Il revient des que la section repasse en deux colonnes, a 960 px pour les
   etapes 01 et 03, a 768 px pour la FAQ. Le trait de leyebrow est masque, comme
   il lest deja dans letape 02 qui etait la seule deja centree.
   Les contenus de cartes restent a gauche : tarifs, avis et maquettes se lisent
   mal centres. */
@media(max-width:959px){
.et-grid > div:first-child{text-align:center}
.et-grid > div:first-child .et-eyebrow{justify-content:center}
.et-grid > div:first-child .et-eyebrow i{display:none}
}
@media(max-width:767px){
.fq-tete{text-align:center}
}

/* ===== ETAPE 02 : LES DEUX MOMENTS DANS LA MEME CASE =====
   Les deux colonnes sont successives dans le temps : pendant lappel, puis
   apres. Cote a cote sur grand ecran, on voit la note se remplir pendant que
   la transcription tourne. Empilees sur mobile, ce nest plus vrai : la
   sequence demarre des que 28 % de la section est visible, et la bascule tombe
   a 2,3 s alors que la colonne de droite est encore 400 px sous lecran. Le
   moment ou la note secrit seule, qui est largument, netait jamais vu.
   On pose donc les deux colonnes dans la meme case de grille et on passe de
   lune a lautre sur les classes que le script met deja. La hauteur devient
   celle de la plus haute des deux au lieu de leur somme. */
@media(max-width:899px){
.ap-duo > .ap-col{grid-area:1 / 1}
.ap-col{transition:opacity .4s ease}
.ap .ap-col--cr{opacity:0;visibility:hidden}
.ap.fini .ap-col:not(.ap-col--cr){opacity:0;visibility:hidden}
.ap.fini .ap-col--cr{opacity:1;visibility:visible}
}
/* sans animation, aucune bascule ne se produit : on remet les deux lune sous lautre */
@media(max-width:899px) and (prefers-reduced-motion:reduce){
.ap-duo > .ap-col{grid-area:auto}
.ap .ap-col,.ap.fini .ap-col{opacity:1;visibility:visible;transition:none}
}

/* ===== ASSISTANT DE LETAPE 03 : LA CARTE QUI DEBORDAIT =====
   .pg-scene et .pg-pile sont des grilles. Un enfant de grille a min-width:auto
   par defaut, ce qui linterdit de retrecir en dessous de sa taille min-content.
   La question tapee par le script est en white-space:nowrap : sa taille
   min-content vaut la ligne entiere, donc la carte poussait la grille au lieu
   de se laisser rogner. 55 px dans le vide a 375. min-width:0 rend la reduction
   possible, et le overflow:hidden deja pose sur le champ fait son travail. */
.pg-scene,.pg-scene > *,.pg-pile,.pg-pile > *{min-width:0}

/* ===== SECTION PREUVE SUR MOBILE =====
   Trois defauts mesures a 375 px, carte de 163 pour 121 px de contenu :
   la valeur 2 628 099 EUR debordait de 46 px, trois badges sur quatre
   passaient sur deux lignes dans leur pastille, et le titre du graphique
   etait ecrase a 113 px par la pastille En direct posee a cote de lui. */
@media(max-width:560px){
.pf-s{padding:14px 13px}
.pf-s b{font-size:clamp(16px,4.9vw,23px)}
.pf-s > span{font-size:12px}
.pf-s em{margin-top:8px;padding:2.5px 7px;font-size:9.5px}
.pf-s em svg{width:8px;height:8px}
.pf-g-tete{flex-direction:column;align-items:flex-start;gap:7px}
}
@media(max-width:360px){.pf-s{padding:12px 10px}}
/* les 96 px du bas servaient a degager le bandeau fixe, qui nexiste plus */
@media(max-width:640px){.fin-sec{padding-bottom:32px}}

/* ===== SECTION TARIF SUR MOBILE =====
   A 375 px la section etait encartee de 12 px de chaque cote alors que toutes
   les autres sont pleine largeur, et les cartes gardaient les 32 px de padding
   prevus pour le bureau. Resultat : 243 px de contenu utile, ou la note sous le
   prix et la ligne de reassurance passaient sur trois lignes chacune.
   On recupere 36 px de contenu en resserrant marge, padding de section et
   padding de carte. */
@media(max-width:640px){
#tarif{margin-left:8px;margin-right:8px;padding:44px 14px 48px}
#tarif .relative.grid > .reveal{padding:22px 20px}
/* Le bandeau garantie faisait 331 x 128 : il se cassait en trois rangees,
   licone seule, le titre, puis le texte gris sur deux lignes, et un rayon de
   99 px sur 128 px de haut en faisait une grosse bulle. Sur mobile on enleve
   le cadre : plus de fond, plus de bordure, plus de rayon. Licone reprend sa
   place a cote du titre et lensemble redevient une note discrete. */
#tarif .pr-bouclier{padding:0;margin-top:24px;gap:8px;font-size:11.5px;line-height:1.55;background:none;border:0;box-shadow:none;border-radius:0;width:auto;max-width:320px}
#tarif .pr-bouclier b{font-size:12.5px}
#tarif .pr-bouclier svg{width:15px;height:15px}
}

/* ===== FAQ ET AVIS SUR MOBILE =====
   FAQ : 24 px de padding de chaque cote sur une carte de 335, plus 30 px de
   chevron et 16 px de gouttiere, il ne restait que 239 px a la question. Deux
   questions sur six passaient sur une ligne de trop pour une poignee de pixels.
   Avis : le mur montre 3 avis puis un bouton, ce qui est le comportement voulu.
   Mais la hauteur maxi de 640 px laissait 94 px de vide sous le troisieme,
   les avis 4 a 9 partant dans les colonnes de debordement, invisibles. */
@media(max-width:640px){
#faq{padding:44px 16px 48px}
#faq details{padding:0 18px}
#faq summary{gap:10px}
/* la premiere question tenait sur trois lignes pour 4 px manquants : la police
   seule ne suffisait pas, il fallait aussi degonfler la colonne du chevron */
#faq summary > span:first-child{font-size:15px}
#faq summary > span:last-child{width:26px;min-width:26px;text-align:center}
.wl-mur{max-height:560px}
}

/* ===== PIED DE PAGE SUR MOBILE =====
   Trois groupes de liens dans une grille a deux colonnes : Produit et Compte
   occupaient la premiere rangee, et Entreprise se retrouvait seul sur une
   deuxieme rangee 267 px plus bas, avec un grand trou sous Compte, la grille
   etirant les deux colonnes a la hauteur de la plus haute.
   Les colonnes CSS equilibrent toutes seules : Produit a gauche, Compte et
   Entreprise empiles a droite. 101 px de moins et plus dorphelin. */
@media(max-width:640px){
.pied2{padding:48px 20px 24px}
.pied2-cols{display:block;columns:2;column-gap:24px}
.pied2-cols > *{break-inside:avoid;margin:0 0 26px}
.pied2-bas > p{font-size:12.5px}
/* tout centre, comme le reste de la page sur mobile. Le logo et les liens sont
   des boites flex : text-align ne les bouge pas, il leur faut justify-content. */
.pied2-haut{text-align:center}
.pied2-logo{justify-content:center}
.pied2-cols a{justify-content:center}
.pied2-bas{flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center}
.pied2-etoiles{text-align:center}
}

/* Le mot en bleu du titre des offres.
   C est le text-glow maison TRANSPOSE pour fond sombre. L original, #3a63e8
   vers #1f3fc4, est dessine pour un fond CLAIR : il fonce vers le bas, ce qui
   gagne en lisibilite sur blanc (4,70 puis 7,57) mais la perd sur noir
   (4,01 puis 2,49, sous le seuil). Ici les deux sections des offres sont
   sur le noir de la maison, d ou ces deux bleus-ci : 5,81 puis 4,38.
   Les deux sont de la palette de l accueil.
   Cette regle vit dans la feuille de la vitrine, elle sert donc ici ET sur
   /tarifs/. Seule la TAILLE du titre reste propre a /tarifs/. */
#tarif h2 i{
  font-style:normal;
  background:linear-gradient(180deg,#5c80ff,#3866ff);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

/* ===== LE CADRE VIDEO, REPRIS DE TRENDTRACK =====
   Releve sur trendtrack.io le 04/09/2026, valeurs calculees prises telles quelles.
   Leur lecteur est pose dans DEUX cadres emboites :
     - l exterieur, rayon 36 px, 10 px de marge interieure, fond blanc a 2 %, et
       deux ombres INTERIEURES qui font la nervure du haut et le halo diffus ;
     - l interieur, rayon 26 px, un filet blanc a 4 %, c est lui qui coupe la video.
   Le notre n avait plus de cadre du tout : une regle tardive remettait padding 0,
   background none et border 0. On le lui rend ici.
   Le cadre interieur est dessine en ::after plutot qu en ajoutant une balise :
   le balisage du lecteur n est pas touche, seulement son habillage.
   Seule adaptation : leur vert #0ced1e devient notre bleu #3866ff. */
[data-scroll-card].cp-video{
  padding:10px;
  border:0;
  border-radius:36px;
  background:rgba(255,255,255,.02);
  overflow:visible;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 0 70px rgba(255,255,255,.02),
    0 26px 64px -34px rgba(15,20,40,.34);
}
[data-scroll-card].cp-video::after{
  content:"";
  display:block;
  position:absolute;
  inset:10px;
  border:1px solid rgba(255,255,255,.04);
  border-radius:26px;
  pointer-events:none;
  z-index:4;
}
.cp-video-el{border-radius:26px}

/* L interface se cale sur le cadre INTERIEUR : sans ca elle deborderait sur les
   10 px de marge et la barre du bas passerait sur le cadre. */
.cpv-ui{inset:10px;border-radius:26px}

/* Le voile : chez eux un seul degrade, en bas, 134 px, a 50 % d opacite. Le notre
   assombrissait aussi le haut, ce qui salissait l image. */
.cpv-ui::before{
  inset:auto 0 0 0;
  height:135px;
  border-radius:0 0 26px 26px;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 100%);
  opacity:.5;
}

/* La pastille du son est hors de .cpv-ui, elle se cale donc sur le cadre
   exterieur : 10 px de marge + 16 px comme chez eux. */
.cpv-son-pilule{
  top:26px;right:26px;
  height:32px;padding:6px 12px;gap:6px;
  background:rgba(15,15,16,.24);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  font-size:14px;font-weight:500;
}
.cpv-son-pilule:hover{background:rgba(15,15,16,.42)}
.cpv-son-pilule svg{width:18px;height:18px}

.cpv-centre{
  width:64px;height:64px;margin:-32px 0 0 -32px;
  background:rgba(15,15,16,.12);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
}
.cpv-centre:hover{background:rgba(15,15,16,.28);transform:scale(1.06)}
.cpv-centre svg{width:26px;height:26px;opacity:.9}

.cpv-barre{height:72px;padding:24px;gap:16px}
.cpv-b{width:24px;height:24px;border-radius:0;background:none;opacity:.7}
.cpv-b:hover{background:none;opacity:1}
.cpv-b svg{width:24px;height:24px}
.cpv-son-groupe{gap:8px}

.cpv-temps{gap:2px;font-size:16px;font-weight:400}
.cpv-temps b{font-weight:400}
.cpv-temps span,.cpv-temps i{opacity:.5;color:#fff;font-weight:400}

/* La piste : 5 px, rayon 16, fond blanc a 15 %, remplissage au bleu maison, et
   une poignee ronde de 16 px TOUJOURS visible, comme chez eux. */
.cpv-piste::before{height:5px;border-radius:16px;background:rgba(255,255,255,.15)}
.cpv-remplie{height:5px;border-radius:16px;background:#3866ff}
.cpv-poignee{
  width:16px;height:16px;margin-left:-8px;
  border-radius:16px;background:#3866ff;
  box-shadow:none;opacity:0;
}
.cpv-piste:hover .cpv-poignee,.cpv-piste:focus-visible .cpv-poignee,.cp-video.cpv-glisse .cpv-poignee{opacity:1}

/* Plein ecran : le cadre n a plus lieu d etre. */
.cp-video:fullscreen{padding:0;border-radius:0;background:#000;box-shadow:none}
.cp-video:fullscreen::after{display:none}
.cp-video:fullscreen .cpv-ui{inset:0;border-radius:0}
.cp-video:fullscreen .cpv-ui::before{border-radius:0}

@media(max-width:900px){
  [data-scroll-card].cp-video{padding:6px;border-radius:24px}
  [data-scroll-card].cp-video::after{inset:6px;border-radius:18px}
  .cp-video-el{border-radius:18px}
  .cpv-ui{inset:6px;border-radius:18px}
  .cpv-ui::before{height:92px;border-radius:0 0 18px 18px}
  .cpv-son-pilule{top:16px;right:16px;height:30px;padding:5px 10px;font-size:12.5px}
  .cpv-son-pilule svg{width:15px;height:15px}
  .cpv-centre{width:54px;height:54px;margin:-27px 0 0 -27px}
  .cpv-centre svg{width:22px;height:22px}
  .cpv-barre{height:auto;padding:12px;gap:10px}
  .cpv-b,.cpv-b svg{width:20px;height:20px}
  .cpv-temps{font-size:12.5px}
  .cpv-piste::before,.cpv-remplie{height:4px}
  .cpv-poignee{width:12px;height:12px;margin-left:-6px}
}

/* --- AJUSTEMENTS DE PRIORITE ---
   Trois regles ci-dessus perdaient la cascade, verifie rule par rule dans le
   navigateur :
     - l anneau gris du cadre d avant, [data-scroll-card]{box-shadow:0 0 0 7px
       #d7dce8 ... !important}, gagnait par son !important ; seul un autre
       !important peut passer devant. L attribut n est porte que par la video,
       le surcharger ne touche rien d autre (verifie : 1 seul element) ;
     - .cpv-ui perdait contre [data-scroll-card] > div, plus specifique ;
     - .cpv-centre et .cpv-poignee restaient sur leurs valeurs d origine.
   On passe ces trois-la sous .cp-video, ce qui les rend strictement plus
   specifiques sans ajouter d !important inutiles. */
[data-scroll-card].cp-video{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 0 70px rgba(255,255,255,.02),
    0 26px 64px -34px rgba(15,20,40,.34) !important;
}
.cp-video .cpv-ui{border-radius:26px}
.cp-video .cpv-centre{background:rgba(15,15,16,.12)}
.cp-video .cpv-centre:hover{background:rgba(15,15,16,.28)}
.cp-video .cpv-poignee{opacity:0}
.cp-video:fullscreen{box-shadow:none !important}
.cp-video:fullscreen .cpv-ui{border-radius:0}
@media(max-width:900px){
  .cp-video .cpv-ui{border-radius:18px}
  .cp-video .cpv-centre{width:54px;height:54px;margin:-27px 0 0 -27px}
}
@media(max-width:767px){
  [data-scroll-card].cp-video{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.04),
      inset 0 0 50px rgba(255,255,255,.02),
      0 18px 40px -22px rgba(15,20,40,.26) !important;
  }
}

/* --- DEUX DECLARATIONS RECALCITRANTES ---
   Le fond du gros bouton et l opacite de la poignee restaient sur leurs
   anciennes valeurs au chargement, malgre une regle plus specifique et plus
   tardive (.cp-video .cpv-centre) dont j ai verifie dans le navigateur
   qu elle existe et que l element y correspond. La cascade n explique pas
   ce resultat. Faute d explication, on tranche avec !important : c est deja
   ce qu emploie cette feuille pour l anneau du meme bloc. Les deux seules
   declarations concernees, rien de plus. */
.cp-video .cpv-centre{background:rgba(15,15,16,.12) !important}
.cp-video .cpv-centre:hover{background:rgba(15,15,16,.28) !important}
.cp-video .cpv-poignee{opacity:0}
.cp-video .cpv-piste:hover .cpv-poignee,
.cp-video .cpv-piste:focus-visible .cpv-poignee,
.cp-video.cpv-glisse .cpv-poignee{opacity:1}

/* --- LE CADRE VIDEO NE DOIT RIEN HERITER DE L ECRAN DU HERO ---
   Deux defauts signales le 04/09, meme cause : la video porte encore
   data-scroll-card, donc les regles decoratives de l ancien ecran la visent.
   1. Mon ::after du cadre interieur ne faisait que rallumer le ::after du hero
      (display:block). Il en gardait width, height, le translateX(-50%) et
      surtout ses deux degrades bleus, dont un trait de 2 px large de 72 % :
      c est le trait bleu qui debordait a gauche de l ecran.
   2. [data-scroll-card]>div pose un halo bleu en box-shadow !important. Le seul
      div enfant du lecteur est .cpv-ui, invisible au repos et affichee au
      survol : d ou la lueur bleue qui apparaissait en passant la souris.
   On coupe les deux a la source. L inset du cadre reste pilote par les regles
   responsives deja en place, on n y touche pas. */
[data-scroll-card].cp-video::after{width:auto;height:auto;transform:none;background:none;background-image:none}
[data-scroll-card].cp-video>div{box-shadow:none!important}

/* --- LES ICONES DU LECTEUR, RELEVEES SUR TRENDTRACK LE 04/09/2026 ---
   Les dessins sont repris tels quels, memes viewBox et memes traces. Restaient
   les tailles calculees, prises chez eux : gros bouton 64 px pour une icone de
   32 px (leur bouton porte 16 px de padding), boutons de barre 24 px pour une
   icone de 24 px, play et pause a 70 pour cent d opacite, son et plein ecran a
   100, compteur a 15 px et non 16.
   Seul ecart assume : la poignee de la piste reste invisible au repos. Leur
   video tourne en boucle, la notre demarre en pause a zero. */
.cp-video .cpv-centre svg{width:32px;height:32px;opacity:.7}
.cp-video .cpv-b{opacity:1}
.cp-video .cpv-b svg{width:24px;height:24px;opacity:1}
.cp-video .cpv-b[data-cpv-play] svg{opacity:.7}
.cp-video .cpv-temps{font-size:15px;line-height:15px}
@media(max-width:900px){
.cp-video .cpv-centre svg{width:27px;height:27px}
.cp-video .cpv-b svg{width:20px;height:20px}
.cp-video .cpv-temps{font-size:12.5px;line-height:1}
}

/* --- LA PASTILLE DU SON, ANIMEE COMME CHEZ TRENDTRACK (releve du 04/09/2026) ---
   Chez eux l habillage tient sur TROIS couches, et il en faut trois : deux
   animations qui touchent toutes les deux au transform ne peuvent pas vivre
   sur le meme element, la seconde ecraserait la premiere.
     .bunny_unmute_btn       placement + scale(1,05) au survol
     .bunny_unmute_tag_wrap  nudge   : une petite secousse, 3,5 s
     .bunny_unmute_tag       breathe : une respiration, 3,2 s
   Les deux durees sont volontairement premieres entre elles, elles ne
   retombent jamais en phase : c est ce qui donne le mouvement vivant.
   Les ondes du haut-parleur clignotent a part, 1,8 s, la seconde decalee de
   0,3 s par le nth-of-type, exactement comme chez eux. */
.cpv-son-place{position:absolute;z-index:3;top:26px;right:26px;display:block;transition:transform .2s cubic-bezier(.32,.72,0,1)}
.cpv-son-place:hover{transform:scale(1.05)}
.cpv-son-secousse{display:block;animation:cpv-secousse 3.5s ease-in-out infinite}
.cp-video .cpv-son-pilule{position:static;animation:cpv-respire 3.2s ease-in-out infinite;outline:1px solid rgba(255,255,255,.08);outline-offset:-1px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),inset 0 0 70px rgba(255,255,255,.02),inset 0 0 12px rgba(255,255,255,.04)}
.cp-video.cpv-son-on .cpv-son-place{opacity:0;pointer-events:none}
.cpv-onde{animation:cpv-onde 1.8s ease-in-out infinite}
.cpv-onde:nth-of-type(1){animation-delay:0s}
.cpv-onde:nth-of-type(2){animation-delay:.3s}
@keyframes cpv-secousse{0%,82%,100%{transform:rotate(0deg)}85%{transform:rotate(-3deg)}88%{transform:rotate(3deg)}91%{transform:rotate(-2deg)}94%{transform:rotate(1.5deg)}97%{transform:rotate(0deg)}}
@keyframes cpv-respire{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes cpv-onde{0%,100%{opacity:0}40%,70%{opacity:1}}
@media(prefers-reduced-motion:reduce){
.cpv-son-secousse,.cp-video .cpv-son-pilule,.cpv-onde{animation:none}
.cpv-onde{opacity:1}
}
@media(max-width:900px){
.cpv-son-place{top:16px;right:16px}
}

/* --- LE BANDEAU CLIENTS SUR FOND SOMBRE ---
   Il avait ete dessine pour la page claire. Deux valeurs ne survivaient pas au
   passage au noir :
     .cp-cli         anneau rgba(15,20,40,.20), donc quasi noir sur du noir,
                     d ou les pastilles sans contour ;
     .cp-clients-txt gris #9297a3 choisi contre du blanc.
   On les repasse du cote sombre, sous .hero-nuit : si la section redevient
   claire un jour, l habillage d origine reprend tout seul. Rien d autre ne
   bouge, ni les tailles, ni l espacement, ni le defilement. */
/* Le liseret blanc : la pastille portait background:#fff. L image est
   decoupee en cercle, et sur la ligne de decoupe les pixels sont a moitie
   couverts, donc ils se melangent au fond de la pastille. Sur un logo clair
   invisible, sur un logo sombre cela dessine un cheveu blanc. Ce fond ne
   servait a rien : les 10 images sont opaques a 100 pour cent (verifie).
   On le retire, et le contour est desormais trace PAR-DESSUS l image, en
   ::after : il tombe donc pile sur la couture au lieu de la laisser paraitre,
   et il se voit sur les logos sombres sans cercler les logos blancs. */
.hero-nuit .cp-cli{background:none;box-shadow:none}
.hero-nuit .cp-cli::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);pointer-events:none}
.hero-nuit .cp-clients-txt{color:rgba(255,255,255,.66)}
.hero-nuit .cp-clients-txt b{color:#fff}

/* 5A : le choix de langue du pied. Discret, mais toujours atteignable. */
/* Le choix de langue, repris de trendtrack (releve sur leur site le 2026-09-23).
   Leur page est rendue a l echelle 0,8205 : les valeurs ci-dessous sont les leurs
   ramenees a l echelle 1 (36 px de haut, 162 de large, rayons 10 et 12, drapeau 18,
   chevron 12). Le panneau s ouvre VERS LE HAUT, le pied etant en bas de page. */
.cp-loc{position:relative;width:162px;min-width:162px;margin-top:14px}
.cp-loc-btn{display:flex;align-items:center;gap:6px;width:100%;height:36px;padding:0 10px;border:0;border-radius:10px;background:rgba(255,255,255,.06);color:#fff;font-family:inherit;font-size:14px;line-height:22.4px;letter-spacing:-.112px;cursor:pointer;transition:background-color .2s cubic-bezier(.32,.72,0,1)}
.cp-loc-btn:hover{background:rgba(255,255,255,.1)}
.cp-loc-drapeau{flex:none;display:block;width:18px;height:18px;overflow:hidden}
.cp-loc-drapeau svg,.cp-loc-drapeau img{display:block;width:100%;height:100%}
.cp-loc-val{flex:1 1 auto;text-align:left}
.cp-loc-chev{flex:none;width:12px;height:12px;color:#fff;transition:transform .2s cubic-bezier(.32,.72,0,1)}
.cp-loc[data-state="open"] .cp-loc-chev{transform:rotate(180deg)}
.cp-loc-panneau{position:absolute;left:0;right:0;bottom:44px;z-index:8;padding:6px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:#0f0f10;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),inset 0 0 70px rgba(255,255,255,.02),inset 0 0 12px rgba(255,255,255,.04);opacity:0;visibility:hidden;transform:scale(.95);transition:opacity .2s cubic-bezier(.32,.72,0,1),transform .2s cubic-bezier(.32,.72,0,1),visibility}
.cp-loc[data-state="open"] .cp-loc-panneau{opacity:1;visibility:visible;transform:scale(1)}
.cp-loc-liste{display:flex;flex-direction:column;gap:2px}
.cp-loc-lien{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;color:#fff;font-size:14px;line-height:22.4px;letter-spacing:-.112px;text-decoration:none;transition:background-color .2s cubic-bezier(.32,.72,0,1)}
.cp-loc-lien:hover{background:rgba(255,255,255,.06)}
.cp-loc-lien[aria-current]{background:rgba(255,255,255,.06)}
@media(prefers-reduced-motion:reduce){.cp-loc-panneau,.cp-loc-chev,.cp-loc-btn{transition:none}}


/* ===== PAGES LEGALES =====
   Elles reprennent l'en-tete, le pied, la palette et le quadrillage de la
   vitrine : une page legale qui ressemble a un document etranger au site fait
   douter, et c'est exactement le moment ou le visiteur decide s'il sort sa
   carte. */
.lg-body{background:#f4f6fb;color:#0f0f14;margin:0}
.lg-page{max-width:1200px;margin:0 auto;padding:150px 24px 0}
.lg-tete{max-width:840px;padding:0 0 40px 34px}
.lg-h1{margin:0 0 20px;font-size:clamp(36px,6.2vw,62px);line-height:1.04;letter-spacing:-.035em;font-weight:800;color:#0f0f14}
.lg-h1 i{font-style:normal;color:#3866ff}
.lg-intro{margin:0;max-width:680px;font-size:16.5px;line-height:1.7;color:#5a5f75}
.lg-intro b{color:#0f0f14;font-weight:600}
.lg-intro a{color:#3866ff;font-weight:600;text-decoration:none}
.lg-intro a:hover{text-decoration:underline}

/* Le quadrillage : deux rails verticaux, une ligne haute, une croix a chaque
   intersection. Meme grammaire que la section tarifs de la vitrine. */
.lg-cadre{position:relative;padding:46px 34px 0;border-left:1px solid #dde1ee;border-right:1px solid #dde1ee}
/* Les traits horizontaux traversent tout l ecran, les rails verticaux
   restent sur le cadre : les croix marquent les intersections. */
.lg-cadre::before,.lg-cta::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:var(--pleine,100vw);height:1px;background:#dde1ee;pointer-events:none}
.lg-x{position:absolute;width:11px;height:11px;background:linear-gradient(#c2c7dc,#c2c7dc) center/11px 1px no-repeat,linear-gradient(#c2c7dc,#c2c7dc) center/1px 11px no-repeat}
.lg-x1{top:-5px;left:-6px}
.lg-x2{top:-5px;right:-6px}
.lg-alerte{margin:0 0 34px;padding:16px 20px;background:#fff4f4;border:1px solid #ffc9c9;border-radius:14px;color:#8d1027;font-size:15px;line-height:1.6}
.lg-alerte strong{color:#8d1027;font-weight:700}
.lg-alerte code{background:rgba(141,16,39,.08);border-radius:5px;padding:1px 5px;font-size:.92em}

.lg-grille{display:grid;grid-template-columns:1fr}
@media(min-width:900px){.lg-grille{grid-template-columns:272px 1fr;column-gap:56px}}
.lg-cote{min-width:0;margin:0 0 40px}
@media(min-width:900px){.lg-cote{position:sticky;top:118px;align-self:start;max-height:calc(100vh - 150px);overflow-y:auto;margin:0;padding-bottom:24px}}
.lg-cote-t{margin:0 0 10px;padding-left:14px;font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:#9196ac}
.lg-cote-l{display:flex;flex-direction:column;gap:1px}
.lg-cote-l a{position:relative;display:flex;gap:12px;align-items:baseline;padding:9px 14px;border-radius:11px;font-size:14.5px;line-height:1.4;color:#5d6178;text-decoration:none;transition:background .15s,color .15s}
.lg-cote-l a:hover{background:rgba(15,15,20,.045);color:#0f0f14}
.lg-cote-l b{flex:none;min-width:15px;font-size:12px;font-weight:600;color:#a8adc2;font-variant-numeric:tabular-nums}
.lg-cote-l a.on{background:#fff;color:#0f0f14;font-weight:600;box-shadow:0 1px 2px rgba(15,15,20,.05),0 10px 24px -18px rgba(15,15,20,.55)}
.lg-cote-l a.on b{color:#3866ff}
.lg-cote-l a.on::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:3px;background:#3866ff}

.lg-corps{min-width:0;max-width:800px;padding:0 0 88px}
.lg-corps h2{display:flex;gap:14px;align-items:baseline;margin:54px 0 20px;padding-top:40px;border-top:1px solid #dde1ee;font-size:clamp(22px,2.6vw,29px);line-height:1.2;letter-spacing:-.025em;font-weight:800;color:#0f0f14;scroll-margin-top:128px}
.lg-corps h2#s1{margin-top:0;padding-top:0;border-top:0}
.lg-num{position:relative;top:-2px;flex:none;font-size:14px;font-weight:700;color:#3866ff;font-variant-numeric:tabular-nums}
.lg-corps h3{margin:28px 0 8px;font-size:17px;font-weight:700;letter-spacing:-.01em;color:#0f0f14}
/* Couche TT (2026-09-04) : la typographie des titres suit celle de la vitrine. */
.lg-h1{font-size:clamp(34px,3.7vw,52px);line-height:1.1;letter-spacing:-.042em;font-weight:600}
.lg-corps h2{font-weight:600;letter-spacing:-.03em}
.lg-corps h3{font-weight:600}
.lg-intro{font-size:16px;line-height:22.4px;letter-spacing:-.112px;color:rgba(15,15,16,.73)}
.lg-corps p,.lg-corps li,.lg-corps dd{font-size:16.5px;line-height:1.75;color:#43485e}
.lg-corps p{margin:0 0 15px}
.lg-corps strong{color:#0f0f14;font-weight:600}
.lg-corps a{color:#3866ff;font-weight:500;text-decoration:none}
.lg-corps a:hover{text-decoration:underline}
.lg-corps ul,.lg-corps ol{margin:0 0 15px;padding-left:22px}
.lg-corps ul{list-style:disc}
.lg-corps ol{list-style:decimal}
.lg-corps li{margin:7px 0}
.lg-corps code{background:#eceff8;border:1px solid #dde1ee;border-radius:6px;padding:1px 6px;font-size:.9em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.lg-enc{margin:22px 0;padding:18px 22px;background:#fff;border:1px solid #e4e7f2;border-radius:14px}
.lg-cle{margin:22px 0;padding:17px 22px;background:#fff;border:1px solid #e4e7f2;border-left:3px solid #3866ff;border-radius:4px 14px 14px 4px}
.lg-enc p:first-child,.lg-cle p:first-child{margin-top:0}
.lg-enc p:last-child,.lg-cle p:last-child{margin-bottom:0}
.lg-vide{background:#ffe2e2;color:#a4102b;font-weight:600;padding:1px 7px;border-radius:6px;font-size:.94em}
.lg-tab{overflow-x:auto;margin:20px 0;background:#fff;border:1px solid #e4e7f2;border-radius:14px}
.lg-corps table{width:100%;border-collapse:collapse;font-size:15.5px}
.lg-corps th,.lg-corps td{padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid #eceff6;color:#43485e}
.lg-corps th{font-weight:600;color:#0f0f14;background:#f7f8fc;white-space:nowrap}
.lg-corps tr:last-child td{border-bottom:0}
.lg-corps dl{margin:16px 0}
.lg-corps dt{margin-top:16px;font-size:16px;font-weight:600;color:#0f0f14}
.lg-corps dd{margin:3px 0 0}

/* L'appel a l'action ferme le cadre : le lecteur qui arrive au bout d'un
   document juridique a fini de se rassurer, c'est la qu'on lui tend la porte. */
.lg-cta{position:relative;margin:0 -34px;padding:62px 34px 70px;text-align:center}
.lg-cta-in{max-width:680px;margin:0 auto}
.lg-cta-t{margin:0 0 12px;font-size:clamp(26px,3.4vw,38px);line-height:1.12;letter-spacing:-.03em;font-weight:800;color:#0f0f14}
.lg-cta-s{margin:0 auto 28px;max-width:560px;font-size:17px;line-height:1.65;color:#5a5f75}
.lg-cta-b{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center}
.lg-btn{display:inline-flex;align-items:center;min-height:50px;padding:0 26px;border-radius:12px;background:#3866ff;color:#fff;font-size:15.5px;font-weight:700;text-decoration:none;box-shadow:0 12px 26px -16px rgba(56,102,255,.95);transition:background .15s,transform .15s}
.lg-btn:hover{background:#2a55e6;transform:translateY(-1px);text-decoration:none;color:#fff}
.lg-btn2{display:inline-flex;align-items:center;min-height:50px;padding:0 20px;border-radius:12px;color:#3d4356;font-size:15.5px;font-weight:600;text-decoration:none;transition:background .15s,color .15s}
.lg-btn2:hover{background:rgba(15,15,20,.05);color:#0f0f14;text-decoration:none}

.lg-pied2{background:#0f0f14;color:#fff}
.lg-pied2-in{max-width:1200px;margin:0 auto;padding:30px 24px;display:flex;flex-wrap:wrap;gap:8px 24px;font-size:14.5px;color:rgba(255,255,255,.55)}
.lg-pied2-in a{color:rgba(255,255,255,.55);text-decoration:none}
.lg-pied2-in a:hover{color:#fff}
.lg-cote-d > summary.lg-cote-t{list-style:none;cursor:pointer}
.lg-cote-d > summary.lg-cote-t::-webkit-details-marker{display:none}
@media(min-width:900px){.lg-cote-d > summary.lg-cote-t{cursor:default}}
@media(max-width:899px){
.lg-cote-d{background:#fff;border:1px solid #e4e7f2;border-radius:14px;padding:13px 10px}
.lg-cote-d > summary.lg-cote-t{position:relative;margin:0;padding:3px 28px 3px 8px}
.lg-cote-d[open] > summary.lg-cote-t{margin:0 0 8px}
.lg-cote-d > summary.lg-cote-t::after{content:"";position:absolute;right:10px;top:2px;width:7px;height:7px;border-right:2px solid #9196ac;border-bottom:2px solid #9196ac;transform:rotate(45deg)}
.lg-cote-d[open] > summary.lg-cote-t::after{top:6px;transform:rotate(-135deg)}
.lg-page{padding-top:118px}
.lg-tete{padding-left:20px}
.lg-cadre{padding:34px 20px 0}
.lg-cta{margin:0 -20px;padding:48px 20px 56px}
.lg-corps{padding-bottom:64px}
}
@media(max-width:620px){
.lg-page{padding-left:14px;padding-right:14px}
.lg-tete{padding-left:16px;padding-bottom:30px}
.lg-cadre{padding:28px 16px 0}
.lg-cta{margin:0 -16px;padding:42px 16px 50px}
.lg-corps p,.lg-corps li,.lg-corps dd{font-size:16px}
.lg-corps h2{margin-top:42px;padding-top:32px}
.lg-btn,.lg-btn2{width:100%;justify-content:center}
}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* 5A.1 : le statut de la traduction anglaise. Visible, sobre, jamais ignorable. */
.lg-brouillon{max-width:840px;margin:0 0 26px 34px;padding:14px 18px;border-radius:12px;background:#fff7ed;border:1px solid #fed7aa;color:#7c2d12;font-size:14px;line-height:1.55;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline}
.lg-brouillon strong{font-weight:700}
.lg-brouillon a{color:#7c2d12;text-decoration:underline;text-underline-offset:2px}
@media(max-width:860px){.lg-brouillon{margin-left:20px}}
@media(max-width:640px){.lg-brouillon{margin-left:16px}}

 NU : callpit_vitrine_css() ne
   capte que <style> sans attribut, un id ici et /tarifs/ perdrait la mise
   en forme du bandeau. */
:root{--cp-promo-h:38px}
/* 5C : le bandeau parlait une autre langue que le site. Il posait un aplat de
   bleus Tailwind (#1e40af, #2563eb, #3b82f6) qui ne sont meme pas le bleu de la
   marque, en haut d une page dont tout le reste est presque noir (#050506) avec
   des panneaux rgba(11,17,22,.82) et des ombres internes. Il reprend desormais
   ce vocabulaire : fond sombre floute comme l entete, ombres internes, et LE
   bleu #3866ff garde pour l accent, porte par la seule pastille. */
.cp-promo{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:center;height:var(--cp-promo-h);padding:0 14px;text-decoration:none;color:rgba(255,255,255,.7);font-size:13px;line-height:1;background:radial-gradient(62% 340% at 50% 0%,rgba(56,102,255,.17) 0%,rgba(56,102,255,0) 68%),rgba(10,15,21,.88);border-bottom:1px solid rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 0 70px rgba(255,255,255,.02);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background-color .25s ease}
.cp-promo:hover{background:radial-gradient(62% 340% at 50% 0%,rgba(56,102,255,.22) 0%,rgba(56,102,255,0) 68%),rgba(13,19,26,.92)}
.cp-promo-in{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:1100px}
.cp-promo-tag{flex:none;font-size:10.5px;font-weight:700;letter-spacing:.055em;text-transform:uppercase;color:#fff;background:#3866ff;padding:4px 10px;border-radius:999px;box-shadow:0 0 0 1px rgba(56,102,255,.4),0 4px 14px rgba(56,102,255,.32)}
.cp-promo-txt{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:rgba(255,255,255,.68)}
.cp-promo-txt b{font-weight:600;color:#fff}
.cp-promo-cta{flex:none;display:inline-flex;align-items:center;gap:5px;font-weight:600;color:#fff}
.cp-promo:hover .cp-promo-cta svg{transform:translateX(3px)}
.cp-promo-cta svg{width:11px;height:11px;transition:transform .2s cubic-bezier(.32,.72,0,1)}
/* L entete est collee a top:0 par une classe utilitaire. On la bat en
   specificite et non en ordre : le CSS de la vitrine est concatene ailleurs
   (callpit_vitrine_css) et l ordre final n est pas garanti. */
header.cp-entete{top:var(--cp-promo-h)}
@media (max-width:640px){
  :root{--cp-promo-h:34px}
  .cp-promo{font-size:12px;padding:0 10px}
  .cp-promo-in{gap:8px}
  .cp-promo-long{display:none}
}
/* La pastille tient jusqu'a 340 px : sur un telephone courant (375 px)
   « Offre speciale » doit rester lisible, c'est elle qui porte l'urgence. */
@media (max-width:340px){.cp-promo-tag{display:none}}


/* TELEPHONE, corrige le 2026-09-12.
   1. La barre ne garde que le logo et le bouton menu : les deux boutons
      (Se connecter, Commencer) se chevauchaient avec le logo. Ils sont dans
      le menu deroulant, ou Commencer a ete ajoute.
   2. Le menu passe AU-DESSUS du flou de la barre. Sans ca, des qu on avait
      defile, les quatre couches floutees (.cp-entete-fond, position absolue)
      se depliaient par-dessus le menu, qui n est pas positionne : il s ouvrait
      bien, mais flou et illisible. */
@media(max-width:940px){
  .cp-entete .cp-connexion,.cp-entete .cp-cta-nav,.cp-entete .hx-btn{display:none!important}
}
.cp-entete .cp-menu{position:relative;z-index:6}
.cp-entete .cp-menu .cp-menu-cta{color:#3866ff}
/* 3. Le bouton menu suit la teinte de ce qu il y a derriere la barre.
      Sur une section noire, ses trois barres passaient au blanc (regle
      data-entete) alors que le bouton restait blanc : bouton vide a l ecran.
      Signale le 2026-09-12 sur la page Tarifs. */
html[data-entete="sombre"] .cp-entete .cp-burger{background:rgba(255,255,255,.10)!important;border-color:rgba(255,255,255,.22)!important}
html[data-entete="clair"] .cp-entete .cp-burger{background:#fff!important;border-color:rgba(15,15,20,.10)!important}


/* ===== LA BARRE, REPRISE DE TRENDTRACK (releve du 04/09/2026) =====
   Leur barre n est pas une carte : elle est transparente, et ce qui apparait
   au defilement est un FLOU EN DEGRADE, pas un fond plein. Quatre couches
   superposees, chacune un peu plus floue que la precedente et masquee sur une
   bande decalee de 12,5 % : le flou est franc en haut et s eteint vers le bas
   sans jamais montrer de bord. Le tout est aplati (scaleY 0) tant qu on n a
   pas defile, et se deplie en 0,45 s.
   Valeurs calculees relevees chez eux, reprises telles quelles :
     conteneur  fixe, padding 24 / 32, puis 16 des qu on defile,
                transition padding .35s cubic-bezier(.32,.72,0,1)
     rangee     largeur max 75em = 1200 px, hauteur 36 px
     fond       hauteur 280 %, origine en haut, scaleY 0 -> 1 en .45s
     couches    flous 1, 2, 5 et 6 px
     lien       14 px, rayon 12, padding 6 / 12
     pastille   ::after a 8 % de la couleur du texte, scale .9 -> 1
     roulement  le texte n est PAS duplique : un text-shadow pose 1,2em plus
                bas sert de copie, et .cp-lien-in la rogne jusqu au survol.
   Les couleurs restent pilotees par body.af-haut, qui existait deja : blanc
   tant qu on est en haut du heros sombre, sombre des qu on defile. */
.cp-entete{padding:24px 32px!important;transition:padding .35s cubic-bezier(.32,.72,0,1)}
html[data-defile="oui"] .cp-entete{padding:16px!important}

.cp-entete-fond{position:absolute;top:0;left:0;width:100%;height:280%;pointer-events:none;z-index:0;transform-origin:center top;transform:scaleY(0) translateY(-30%);transition:transform .45s cubic-bezier(.32,.72,0,1)}
html[data-defile="oui"] .cp-entete-fond{transform:scaleY(1) translateY(-30%)}
.cp-entete-fond>div{position:absolute;inset:0}
.cp-entete-fond>div:nth-child(1){z-index:2;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);-webkit-mask:linear-gradient(to top,rgba(255,255,255,0) 0%,#fff 12.5%,#fff 37.5%,rgba(255,255,255,0) 50%);mask:linear-gradient(to top,rgba(255,255,255,0) 0%,#fff 12.5%,#fff 37.5%,rgba(255,255,255,0) 50%)}
.cp-entete-fond>div:nth-child(2){z-index:3;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);-webkit-mask:linear-gradient(to top,rgba(255,255,255,0) 12.5%,#fff 37.5%,#fff 50%,rgba(255,255,255,0) 62.5%);mask:linear-gradient(to top,rgba(255,255,255,0) 12.5%,#fff 37.5%,#fff 50%,rgba(255,255,255,0) 62.5%)}
.cp-entete-fond>div:nth-child(3){z-index:4;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);-webkit-mask:linear-gradient(to top,rgba(255,255,255,0) 37.5%,#fff 50%,#fff 62.5%,rgba(255,255,255,0) 75%);mask:linear-gradient(to top,rgba(255,255,255,0) 37.5%,#fff 50%,#fff 62.5%,rgba(255,255,255,0) 75%)}
.cp-entete-fond>div:nth-child(4){z-index:5;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);-webkit-mask:linear-gradient(to top,rgba(255,255,255,0) 50%,#fff 62.5%,#fff 75%,rgba(255,255,255,0) 87.5%);mask:linear-gradient(to top,rgba(255,255,255,0) 50%,#fff 62.5%,#fff 75%,rgba(255,255,255,0) 87.5%)}

/* la carte blanche disparait : la barre flotte, comme chez eux */
.cp-entete .cp-entete-in{position:relative;z-index:1;max-width:1200px;min-height:36px;padding:0!important;background:none!important;border:0!important;box-shadow:none!important}
/* La marque est desormais UNE image, fournie par le client, en deux versions :
   le mot est blanc pour le fond sombre, recolore en #0f0f14 pour le fond clair
   (variante fabriquee sur le serveur, l icone bleue n a pas bouge). La blanche
   est celle par defaut : tant que data-entete n est pas pose, on est en haut
   d une page a l entete sombre, donc pas de clignotement au chargement. */
/* hauteur explicite : min-height ne suffisait pas, la rangee retombait a 44
   (le lien du logo se donnait 8 px de plus sans qu aucune regle servie ne
   l explique). 36 px, c est la hauteur de barre de trendtrack, et le logo
   fait 28, donc rien n est rogne. */
.cp-entete .cp-mot{gap:0;height:36px;min-height:36px}
.cp-entete .cp-logo{display:block;flex:none;width:auto;height:28px}
.cp-entete .cp-logo--sombre{display:none}
html[data-entete="clair"] .cp-entete .cp-logo--blanc{display:none}
html[data-entete="clair"] .cp-entete .cp-logo--sombre{display:block}


/* --- les liens : pastille qui se deploie, texte qui roule --- */
.cp-entete .cp-liens{display:flex;align-items:center;gap:8px}
.cp-entete .cp-lien{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;padding:6px 12px;border-radius:12px;font-size:14px;font-weight:500;line-height:1.4;text-decoration:none;background:none}
.cp-entete .cp-lien::after{content:"";position:absolute;inset:0;border-radius:inherit;background:currentColor;opacity:0;transform:scale(.9);transition:transform .45s cubic-bezier(.32,.72,0,1),opacity .45s cubic-bezier(.32,.72,0,1)}
.cp-entete .cp-lien:hover::after{transform:scale(1);opacity:.08}
.cp-entete .cp-lien-in{position:relative;z-index:1;display:block;height:1.4em;overflow:hidden}
.cp-entete .cp-lien-txt{display:block;line-height:1.4;transition:transform .45s cubic-bezier(.32,.72,0,1);text-shadow:0 1.2em currentColor}
.cp-entete .cp-lien:hover .cp-lien-txt{transform:translateY(-1.2em)}
.cp-entete .cp-lien:focus-visible{outline:2px solid currentColor;outline-offset:2px}

/* --- Se connecter : la pilule contournee de leur variante glass --- */
.cp-entete .cp-connexion{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 14px;border-radius:14px;font-size:14px;font-weight:500;text-decoration:none;background:rgba(127,127,127,.06);box-shadow:inset 0 0 0 1px rgba(127,127,127,.14);transition:background .2s cubic-bezier(.32,.72,0,1),color .28s ease}
@supports (background:color-mix(in srgb,red 6%,transparent)){
  .cp-entete .cp-connexion{background:color-mix(in srgb,currentColor 6%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 8%,transparent)}
}
.cp-entete .cp-connexion:hover{background:rgba(127,127,127,.12)}
@supports (background:color-mix(in srgb,red 6%,transparent)){
  .cp-entete .cp-connexion:hover{background:color-mix(in srgb,currentColor 12%,transparent)}
}

/* --- le bouton bleu a la taille de barre de trendtrack ---
   Un script de la vitrine reecrit ce lien en .hx-btn au chargement : la classe
   posee dans le balisage est effacee, c est donc .hx-btn qu il faut viser. Leur
   bouton de barre est la variante small du meme bouton : 36 px de haut, rayon
   14, texte 14, ecart 6, pastille de fleche 24. On ne touche qu au header, les
   boutons du reste du site gardent leur taille. */
.cp-entete .hx-btn{min-height:36px;padding:6px 6px 6px 14px}
.cp-entete .hx-btn-in{height:24px;gap:6px}
.cp-entete .hx-btn-bg{border-radius:14px}
.cp-entete .hx-btn-t{font-size:14px}
.cp-entete .hx-btn-i{width:24px;height:24px;border-radius:9px}
.cp-entete .hx-btn-i svg{left:6px;top:6px}
.cp-entete .hx-btn-i svg:nth-child(2){transform:translateX(-18px)}
.cp-entete .hx-btn:hover .hx-btn-i svg:nth-child(1){transform:translateX(18px)}

@media(max-width:640px){
  .cp-entete{padding:16px 14px!important}
  html[data-defile="oui"] .cp-entete{padding:12px!important}
}
/* --- LA COULEUR DE LA BARRE SUIT CE QU IL Y A DERRIERE ---
   L ancien dispositif basculait au PREMIER DEFILEMENT (body.af-haut retiree) :
   les liens passaient au sombre alors qu on etait encore sur le heros noir, et
   devenaient illisibles. html porte desormais data-entete="sombre" tant qu une
   zone sombre passe sous le milieu de la barre, "clair" sinon. Ces regles sont
   posees apres celles de af-haut et en !important : ce sont elles qui tranchent,
   af-haut ne decide plus de la couleur. */
html[data-entete="sombre"] .cp-entete .cp-mot,
html[data-entete="sombre"] .cp-entete .cp-nom,
html[data-entete="sombre"] .cp-entete .cp-lien,
html[data-entete="sombre"] .cp-entete .cp-connexion{color:#fff!important}
html[data-entete="sombre"] .cp-entete .cp-burger span{background:#fff!important}
html[data-entete="clair"] .cp-entete .cp-mot,
html[data-entete="clair"] .cp-entete .cp-nom{color:#0f0f14!important}
html[data-entete="clair"] .cp-entete .cp-lien,
html[data-entete="clair"] .cp-entete .cp-connexion{color:#0f0f10!important}
html[data-entete="clair"] .cp-entete .cp-burger span{background:#0f0f14!important}

/* Se connecter recoit le meme roulement que les liens. */
.cp-entete .cp-connexion .cp-lien-in{height:1.4em}
.cp-entete .cp-connexion:hover .cp-lien-txt{transform:translateY(-1.2em)}

@media(prefers-reduced-motion:reduce){
  .cp-entete,.cp-entete-fond,.cp-entete .cp-lien::after,.cp-entete .cp-lien-txt,.cp-entete .cp-connexion .cp-lien-txt{transition:none}
}