/*! tailwindcss v3.4.0 | 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:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;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:JetBrains Mono,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:initial}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;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-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]{display:none}*,::backdrop,: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:#3b82f680;--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: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.bottom-\[10\%\]{bottom:10%}.bottom-\[30\%\]{bottom:30%}.left-4{left:1rem}.left-\[-8\%\]{left:-8%}.left-\[30\%\]{left:30%}.right-\[-12\%\]{right:-12%}.top-1\/2{top:50%}.top-\[-80px\]{top:-80px}.top-\[5\%\]{top:5%}.z-0{z-index:0}.z-10{z-index:10}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:.25rem}.mb-10{margin-bottom:2.5rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.ml-auto{margin-left:auto}.mt-0{margin-top:0}.mt-0\.5{margin-top:.125rem}.mt-2{margin-top:.5rem}.mt-2\.5{margin-top:.625rem}.mt-6{margin-top:1.5rem}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.\!grid{display:grid!important}.grid{display:grid}.hidden{display:none}.h-10{height:2.5rem}.h-12{height:3rem}.h-2{height:.5rem}.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-\[300px\]{height:300px}.h-\[550px\]{height:550px}.h-\[600px\]{height:600px}.h-\[620px\]{height:620px}.min-h-\[78vh\]{min-height:78vh}.w-10{width:2.5rem}.w-12{width:3rem}.w-2{width:.5rem}.w-3{width:.75rem}.w-3\.5{width:.875rem}.w-5{width:1.25rem}.w-\[40\%\]{width:40%}.w-\[52\%\]{width:52%}.w-\[58\%\]{width:58%}.w-\[65\%\]{width:65%}.w-full{width:100%}.w-px{width:1px}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-7xl{max-width:80rem}.max-w-lg{max-width:32rem}.max-w-md{max-width:28rem}.max-w-xl{max-width:36rem}.shrink-0{flex-shrink:0}.-translate-y-1\/2{--tw-translate-y:-50%}.-translate-y-1\/2,.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 pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.resize{resize:both}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0{gap:0}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-3\.5{gap:.875rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-y-3{row-gap:.75rem}.space-y-12>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(3rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(3rem*var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-2\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.625rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.625rem*var(--tw-space-y-reverse))}.space-y-24>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(6rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(6rem*var(--tw-space-y-reverse))}.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))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem*var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-x-hidden{overflow-x:hidden}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-t{border-top-width:1px}.border-slate-100{--tw-border-opacity:1;border-color:rgb(241 245 249/var(--tw-border-opacity))}.border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity))}.border-slate-200\/30{border-color:#e2e8f04d}.border-slate-200\/50{border-color:#e2e8f080}.bg-\[\#F14E1D\]{--tw-bg-opacity:1;background-color:rgb(241 78 29/var(--tw-bg-opacity))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity))}.bg-emerald-400{--tw-bg-opacity:1;background-color:rgb(52 211 153/var(--tw-bg-opacity))}.bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity))}.bg-slate-100\/50{background-color:#f1f5f980}.bg-slate-100\/85{background-color:#f1f5f9d9}.bg-slate-300\/60{background-color:#cbd5e199}.bg-slate-50\/50{background-color:#f8fafc80}.bg-slate-900{--tw-bg-opacity:1;background-color:rgb(15 23 42/var(--tw-bg-opacity))}.bg-transparent{background-color:initial}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-white\/40{background-color:#fff6}.bg-white\/80{background-color:#fffc}.p-1{padding:.25rem}.p-1\.5{padding:.375rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.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-8{padding-left:2rem;padding-right:2rem}.py-0{padding-top:0;padding-bottom:0}.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-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-4{padding-top:1rem;padding-bottom:1rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-16{padding-bottom:4rem}.pb-8{padding-bottom:2rem}.pr-4{padding-right:1rem}.pt-1{padding-top:.25rem}.pt-16{padding-top:4rem}.pt-6{padding-top:1.5rem}.pt-8{padding-top:2rem}.text-left{text-align:left}.text-center{text-align:center}.font-display{font-family:Outfit,sans-serif}.font-mono{font-family:JetBrains Mono,monospace}.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-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-black{font-weight:900}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.leading-\[1\.05\]{line-height:1.05}.leading-none{line-height:1}.leading-normal{line-height:1.5}.leading-relaxed{line-height:1.625}.leading-tight{line-height:1.25}.tracking-\[\.16em\]{letter-spacing:.16em}.tracking-\[\.18em\]{letter-spacing:.18em}.tracking-\[\.22em\]{letter-spacing:.22em}.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.text-\[\#0B0B0C\]{--tw-text-opacity:1;color:rgb(11 11 12/var(--tw-text-opacity))}.text-\[\#334155\]{--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity))}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.text-orange-500{--tw-text-opacity:1;color:rgb(249 115 22/var(--tw-text-opacity))}.text-slate-100{--tw-text-opacity:1;color:rgb(241 245 249/var(--tw-text-opacity))}.text-slate-300{--tw-text-opacity:1;color:rgb(203 213 225/var(--tw-text-opacity))}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity))}.text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity))}.text-slate-600\/90{color:#475569e6}.text-slate-700{--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity))}.text-slate-800{--tw-text-opacity:1;color:rgb(30 41 59/var(--tw-text-opacity))}.text-slate-900{--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.filter{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)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.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}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.selection\:bg-slate-900 ::-moz-selection{--tw-bg-opacity:1;background-color:rgb(15 23 42/var(--tw-bg-opacity))}.selection\:bg-slate-900 ::selection{--tw-bg-opacity:1;background-color:rgb(15 23 42/var(--tw-bg-opacity))}.selection\:text-white ::-moz-selection{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.selection\:text-white ::selection{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.selection\:bg-slate-900::-moz-selection{--tw-bg-opacity:1;background-color:rgb(15 23 42/var(--tw-bg-opacity))}.selection\:bg-slate-900::selection{--tw-bg-opacity:1;background-color:rgb(15 23 42/var(--tw-bg-opacity))}.selection\:text-white::-moz-selection{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.selection\:text-white::selection{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.hover\:scale-\[1\.01\]:hover{--tw-scale-x:1.01;--tw-scale-y:1.01;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\:bg-slate-900:hover{--tw-bg-opacity:1;background-color:rgb(15 23 42/var(--tw-bg-opacity))}.hover\:bg-white:hover{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.hover\:bg-white\/80:hover{background-color:#fffc}.hover\:text-black:hover{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.hover\:text-slate-600:hover{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity))}.hover\:underline:hover{text-decoration-line:underline}.hover\:shadow-md:hover{--tw-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.group:hover .group-hover\:translate-x-1{--tw-translate-x:0.25rem;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))}@media (min-width:640px){.sm\:block{display:block}.sm\:min-h-\[82vh\]{min-height:82vh}.sm\:w-auto{width:auto}.sm\:flex-row{flex-direction:row}.sm\:gap-x-6{-moz-column-gap:1.5rem;column-gap:1.5rem}.sm\:space-y-0>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0px*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0px*var(--tw-space-y-reverse))}.sm\:px-8{padding-left:2rem;padding-right:2rem}.sm\:py-8{padding-top:2rem;padding-bottom:2rem}.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}.sm\:text-sm{font-size:.875rem;line-height:1.25rem}}@media (min-width:768px){.md\:flex{display:flex}.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\:gap-3{gap:.75rem}.md\:space-y-36>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(9rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(9rem*var(--tw-space-y-reverse))}.md\:p-8{padding:2rem}.md\:px-12{padding-left:3rem;padding-right:3rem}.md\:pt-20{padding-top:5rem}.md\:text-3xl{font-size:1.875rem;line-height:2.25rem}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}.md\:text-6xl{font-size:3.75rem;line-height:1}.md\:text-base{font-size:1rem;line-height:1.5rem}.md\:text-lg{font-size:1.125rem;line-height:1.75rem}.md\:text-sm{font-size:.875rem;line-height:1.25rem}.md\:text-xs{font-size:.75rem;line-height:1rem}.md\:leading-\[\.92\]{line-height:.92}.md\:tracking-tighter{letter-spacing:-.05em}}@media (min-width:1024px){.lg\:text-7xl{font-size:4.5rem;line-height:1}}
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ── Font fallbacks — site lisible même sans Google Fonts ── */
:root {
  --font-display: 'Outfit', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
}
.font-display { font-family: var(--font-display) !important; }
body { font-family: var(--font-body); }

400;500;600;700&family=Outfit:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');
:root{--orange:#F14E1D;--orange-h:#d63d12;--violet:#A3167D;--font-d:'Outfit',sans-serif;--font-b:'Inter',sans-serif;--font-m:'JetBrains Mono',monospace}
html,body{font-family:var(--font-b);background:#f0ede8;overflow-x:hidden;color:#1e293b;-webkit-font-smoothing:antialiased}
.font-display{font-family:var(--font-d)}.font-mono{font-family:var(--font-m)}
.dot-grid{background-size:22px 22px;background-image:radial-gradient(rgba(100,90,80,0.18) 1px,transparent 1px)}
.glass-card{background:rgba(255,255,255,.30);backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);border:1px solid rgba(255,255,255,.55);box-shadow:0 20px 60px rgba(15,23,42,.07),inset 0 1.5px 0 rgba(255,255,255,.75)}
.site-nav{position:fixed;top:24px;left:50%;transform:translateX(-50%);z-index:50;width:95%;max-width:56rem;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 20px;background:rgba(255,252,248,.55);backdrop-filter:blur(32px) saturate(180%);-webkit-backdrop-filter:blur(32px) saturate(180%);border:1px solid rgba(255,255,255,.70);border-radius:9999px;box-shadow:0 4px 24px rgba(15,23,42,.06),inset 0 1px 0 rgba(255,255,255,.9);transition:all .5s}
.site-nav.scrolled{background:rgba(255,252,248,.72);box-shadow:0 8px 32px rgba(15,23,42,.09),inset 0 1px 0 rgba(255,255,255,.95);padding:8px 20px}
@keyframes orbA{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(60px,-50px) scale(1.2)}66%{transform:translate(-40px,80px) scale(.85)}}
@keyframes orbB{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-70px,60px) scale(.9)}66%{transform:translate(50px,-40px) scale(1.15)}}
@keyframes orbC{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(50px,40px) scale(1.1)}66%{transform:translate(-50px,30px) scale(.9)}}
@keyframes rotR{to{transform:rotate(360deg)}}@keyframes rotL{to{transform:rotate(-360deg)}}
@keyframes fU{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}@keyframes fD{0%,100%{transform:translateY(0)}50%{transform:translateY(15px)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeDown{from{opacity:0;transform:translateY(-15px)}to{opacity:1;transform:translateY(0)}}
@keyframes bp1{0%,100%{height:65%}50%{height:20%}}@keyframes bp2{0%,100%{height:85%}50%{height:40%}}@keyframes bp3{0%,100%{height:55%}50%{height:15%}}@keyframes bp4{0%,100%{height:92%}50%{height:50%}}@keyframes bp5{0%,100%{height:70%}50%{height:30%}}@keyframes bp6{0%,100%{height:100%}50%{height:60%}}
@keyframes cf1{0%,100%{transform:translateY(4px) rotate(6deg)}50%{transform:translateY(-4px) rotate(6deg)}}@keyframes cf2{0%,100%{transform:translateY(-4px) rotate(-6deg)}50%{transform:translateY(4px) rotate(-6deg)}}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,100%{transform:scale(2);opacity:0}}
@keyframes slideR{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
.orb-a{animation:orbA 20s ease-in-out infinite}.orb-b{animation:orbB 26s ease-in-out infinite}.orb-c{animation:orbC 18s ease-in-out infinite}
.ring-cw{animation:rotR 70s linear infinite}.ring-ccw{animation:rotL 90s linear infinite}
.float-u{animation:fU 6s ease-in-out infinite}.float-d{animation:fD 8s ease-in-out infinite}
.ping-dot{animation:ping 1.5s ease-in-out infinite}
.bar1{animation:bp1 1.5s ease-in-out infinite}.bar2{animation:bp2 1.2s ease-in-out infinite .3s}.bar3{animation:bp3 1.7s ease-in-out infinite .2s}.bar4{animation:bp4 1.4s ease-in-out infinite .5s}.bar5{animation:bp5 1.6s ease-in-out infinite .4s}.bar6{animation:bp6 1.1s ease-in-out infinite .6s}
.card-f1{animation:cf1 5s ease-in-out infinite}.card-f2{animation:cf2 5s ease-in-out infinite .5s}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;cursor:pointer;outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#0f172a;border-radius:50%;border:2px solid white;box-shadow:0 2px 6px rgba(15,23,42,.25)}
input[type=range].h-1\.5::-webkit-slider-runnable-track{height:6px;background:#e2e8f0;border-radius:999px}
input[type=range].h-2::-webkit-slider-runnable-track{height:8px;background:#e2e8f0;border-radius:999px}
.faq-answer{max-height:0;overflow:hidden;opacity:0;transition:max-height .4s cubic-bezier(.4,0,.2,1),opacity .3s}
.faq-answer.open{max-height:500px;opacity:1}
.faq-icon{transition:transform .3s}.faq-icon.open{transform:rotate(180deg)}
.faq-filter-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border-radius:999px;font-size:.72rem;font-weight:600;font-family:var(--font-d);letter-spacing:.04em;border:1.5px solid rgba(203,213,225,.7);background:rgba(255,255,255,.5);color:#64748b;cursor:pointer;transition:all .2s;backdrop-filter:blur(8px)}
.faq-filter-btn:hover{border-color:#F14E1D;color:#F14E1D;background:rgba(241,78,29,.05)}
.faq-filter-btn.sel{background:linear-gradient(to right,#F14E1D,#DF3351);color:#fff !important;border-color:transparent;box-shadow:0 4px 14px rgba(241,78,29,.30)}
.faq-filter-btn.sel .faq-count{background:rgba(255,255,255,.28);color:#fff}
.faq-count{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 5px;border-radius:999px;font-size:.62rem;font-weight:700;background:rgba(100,116,139,.12);color:#64748b;transition:all .2s}
.faq-item.faq-hidden{display:none !important}
#faq-search{width:100%;padding:11px 18px 11px 44px;border-radius:14px;border:1.5px solid rgba(203,213,225,.7);background:rgba(255,255,255,.55);backdrop-filter:blur(12px);font-size:.8rem;font-family:var(--font-b);color:#1e293b;outline:none;transition:border-color .2s,box-shadow .2s}
#faq-search:focus{border-color:#F14E1D;box-shadow:0 0 0 3px rgba(241,78,29,.10)}
#faq-search::placeholder{color:#94a3b8}
/* estep managed inline */
.progress-grad{background:linear-gradient(to right,var(--orange),#DF3351,var(--violet));transition:width .5s cubic-bezier(.4,0,.2,1)}
.cond-btn{transition:all .2s cubic-bezier(.16,1,.3,1);cursor:pointer;text-align:left;border-radius:.75rem;padding:.75rem;border:1px solid rgba(255,255,255,.65);background:rgba(255,255,255,.4);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 1px 4px rgba(15,23,42,.04)}
.cond-btn:hover{background:rgba(255,255,255,.75);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 4px 12px rgba(15,23,42,.07)}.cond-btn.sel{background:#0f172a;border-color:#0f172a;color:white;transform:scale(1.03);box-shadow:0 8px 24px rgba(15,23,42,.18),inset 0 1px 0 rgba(255,255,255,.07)}
.cond-btn.sel .cond-desc{color:#cbd5e1}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .6s ease,transform .6s ease}.reveal.visible{opacity:1;transform:translateY(0)}
.hover-lift{transition:transform .3s ease}.hover-lift:hover{transform:scale(1.01)}
.btn-grad{background:linear-gradient(to right,var(--orange),#DF3351,var(--violet));color:white;transition:all .2s}
.btn-grad:hover:not(:disabled){transform:scale(1.01);box-shadow:0 8px 24px rgba(241,78,29,.2)}
.btn-grad:disabled{background:#cbd5e1;color:#94a3b8;cursor:not-allowed}
.type-btn{transition:all .25s cubic-bezier(.16,1,.3,1);cursor:pointer;text-align:left;padding:1.1rem;border-radius:1rem;border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.45);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);position:relative;overflow:hidden;box-shadow:0 2px 12px rgba(15,23,42,.05),inset 0 1px 0 rgba(255,255,255,.8)}
.type-btn.sel{background:#0f172a;color:white;border-color:#0f172a;transform:scale(1.02);box-shadow:0 12px 32px rgba(15,23,42,.22),inset 0 1px 0 rgba(255,255,255,.08)}
.type-btn.sel .t-desc{color:#94a3b8}
.type-check{display:none;width:20px;height:20px;background:#10b981;border-radius:50%;align-items:center;justify-content:center;color:white}
.type-btn.sel .type-check{display:flex}
.hero-a1{animation:fadeDown .8s ease forwards}
.hero-a2{opacity:0;animation:fadeUp .8s ease .08s forwards}
.hero-a3{opacity:0;animation:fadeUp .8s ease .16s forwards}
.hero-a4{opacity:0;animation:fadeUp .8s ease .24s forwards}
.hero-a5{opacity:0;animation:fadeUp .8s ease .32s forwards}

/* ── Inputs Apple glass ── */
.input-glass{background:rgba(255,255,255,.55);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.7);border-radius:.75rem;padding:.625rem .875rem;font-family:var(--font-b);font-size:.8125rem;color:#1e293b;outline:none;width:100%;transition:all .2s;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 1px 3px rgba(15,23,42,.04)}
.input-glass:focus{background:rgba(255,255,255,.80);border-color:rgba(15,23,42,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 3px rgba(15,23,42,.06)}
.input-glass::placeholder{color:#94a3b8}
/* ── Select glass ── */
.select-glass{background:rgba(255,255,255,.55);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.7);border-radius:.75rem;padding:.625rem .875rem;font-family:var(--font-b);font-size:.8125rem;color:#1e293b;outline:none;width:100%;transition:all .2s;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 1px 3px rgba(15,23,42,.04);appearance:none;-webkit-appearance:none;cursor:pointer}
.select-glass:focus{background:rgba(255,255,255,.8);border-color:rgba(15,23,42,.3)}
/* ── Label upper style ── */
.field-label{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#64748b;display:block;margin-bottom:.4rem}
/* ── type-icon color quand selected ── */
.type-btn.sel .type-icon{background:rgba(255,255,255,.12);color:white}

/* ── Estimator card wrapper ── */
.est-card { position:relative; }

/* ── cond-btn selected state glass ── */
.cond-btn.sel {
  background:rgba(15,23,42,.85) !important;
  border-color:rgba(15,23,42,.9) !important;
  box-shadow:0 8px 24px rgba(15,23,42,.2),inset 0 1px 0 rgba(255,255,255,.08) !important;
  transform:scale(1.03);
}
.cond-btn.sel .cond-name { color:white !important; }
.cond-btn.sel .cond-desc { color:rgba(255,255,255,.4) !important; }

/* ── type-btn selected state glass ── */
.type-btn.sel {
  background:rgba(15,23,42,.88) !important;
  border-color:rgba(15,23,42,.9) !important;
  box-shadow:0 12px 32px rgba(15,23,42,.25),inset 0 1px 0 rgba(255,255,255,.06) !important;
  transform:scale(1.02);
}
.type-btn.sel .type-icon { background:rgba(255,255,255,.1) !important; border-color:rgba(255,255,255,.15) !important; color:white !important; }
.type-btn.sel .font-display { color:white !important; }
.type-btn.sel .t-desc { color:rgba(255,255,255,.45) !important; }
.type-btn:not(.sel):hover { background:rgba(255,255,255,.38) !important; transform:scale(1.01); }
.cond-btn:not(.sel):hover { background:rgba(255,255,255,.38) !important; }

/* ── Slider styling ── */
.est-slider { -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:999px; outline:none; cursor:pointer; background:rgba(255,255,255,.20); }
.est-slider::-webkit-slider-thumb { -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:#0f172a; border:3px solid white; box-shadow:0 2px 8px rgba(15,23,42,.25); }

/* Input placeholder */
input::placeholder { color:rgba(15,23,42,.3) !important; }

/* ── Footer boutons estimateur ── */
.est-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.20);
}

.btn-prev-glass:hover {
  background: rgba(220,180,175,0.40) !important;
  border-color: rgba(241,78,29,0.30) !important;
  color: #4a2020 !important;
}

.cond-row:hover:not([style*="rgba(241,78,29"]) {
  background: rgba(230,190,185,0.35) !important;
  border-color: rgba(220,160,150,0.45) !important;
}

#carQuery:hover {
  background: rgba(235,205,200,0.35) !important;
}
input[type=text]:hover, input[type=number]:hover, input[type=tel]:hover, input[type=email]:hover {
  background: rgba(235,205,200,0.30) !important;
}

#carList button:hover {
  background: rgba(235,190,180,0.45) !important;
}

/* ══ TOGGLE SWITCH ══ */
.toggle-sw { position:relative; display:inline-block; width:46px; height:26px; flex-shrink:0; cursor:pointer; }
.toggle-sw input { opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; inset:0; background:rgba(200,170,165,0.45); border-radius:999px; transition:.3s; border:1px solid rgba(220,160,150,0.35); }
.toggle-slider::before { content:''; position:absolute; width:20px; height:20px; left:2px; top:50%; transform:translateY(-50%); background:white; border-radius:50%; transition:.3s; box-shadow:0 1px 4px rgba(0,0,0,0.15); }
.toggle-sw input:checked + .toggle-slider { background:linear-gradient(to right,#F14E1D,#e11d48); border-color:#F14E1D; }
.toggle-sw input:checked + .toggle-slider::before { left:calc(100% - 22px); }

/* ══ MEC BUTTONS ══ */
.mec-btn:hover { transform:scale(1.02); }
.mec-btn.sel { border-color:rgba(241,78,29,0.55) !important; background:rgba(241,78,29,0.14) !important; }

/* ══ EQUIP CHIP ══ */
.equip-chip { padding:10px 12px; border-radius:12px; border:1.5px solid rgba(200,170,165,0.35); background:rgba(200,185,185,0.12); font-size:11px; font-weight:600; color:#9a8080; cursor:pointer; transition:all .18s; display:flex; align-items:center; gap:8px; position:relative; text-decoration:line-through; text-decoration-color:rgba(180,140,135,0.5); }
.equip-chip.on { background:rgba(16,185,129,0.10); border-color:rgba(16,185,129,0.50); color:#0f4a35; text-decoration:none; }
.equip-chip.on .chip-icon { background:#10b981; border-color:#10b981; color:#fff; }
.chip-icon { width:18px; height:18px; border-radius:5px; border:1.5px solid rgba(180,140,135,0.45); background:rgba(200,185,185,0.18); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .2s; font-size:11px; color:transparent; }
.equip-chip:not(.on) .chip-icon::after { content:''; }
.equip-chip.on .chip-icon::after { content:'✓'; color:#fff; font-size:11px; font-weight:700; line-height:1; }

/* ══ HEADER ESTIMATEUR barre progress 5 steps ══ */
.step-dots { display:flex; gap:5px; align-items:center; }
.step-dot { width:6px; height:6px; border-radius:50%; background:rgba(220,160,150,0.35); transition:all .3s; }
.step-dot.active { width:20px; border-radius:3px; background:#F14E1D; }
.step-dot.done { background:rgba(241,78,29,0.4); }

/* ══════════════════════════════════════
   ANIMATIONS & MICRO-INTERACTIONS
══════════════════════════════════════ */

/* ── Transition entre steps ── */
@keyframes stepIn {
  from { opacity:0; transform:translateX(28px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes stepInBack {
  from { opacity:0; transform:translateX(-28px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes stepOut {
  from { opacity:1; transform:translateX(0); }
  to   { opacity:0; transform:translateX(-28px); }
}
.m-estep-anim-in { animation: stepIn 0.28s cubic-bezier(0.16,1,0.3,1) forwards; }

/* ── Feedback clic bouton ── */
.btn-grad { position:relative; overflow:hidden; }
.btn-grad::after {
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:rgba(255,255,255,0.18); opacity:0;
  transition:opacity 0.15s;
}
.btn-grad:active::after { opacity:1; }
.btn-grad { transition:transform 0.18s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s; }
.btn-grad:hover  { transform:scale(1.03) translateY(-1px); }
.btn-grad:active { transform:scale(0.97); }

/* ── Toggle switch animation améliorée ── */
.toggle-slider { transition:background .3s, border-color .3s; }
.toggle-slider::before { transition:left .28s cubic-bezier(0.34,1.56,0.64,1), background .2s; }
.toggle-sw input:checked + .toggle-slider::before { box-shadow:0 2px 8px rgba(241,78,29,0.35); }

/* ── Equip chip ── */
.equip-chip {
  transition: all 0.2s cubic-bezier(0.34,1.56,0.64,1);
  user-select:none;
}
.equip-chip:active { transform:scale(0.93); }
.equip-chip.on { transform:scale(1.03); }

/* ── Cond row ── */
.cond-row { transition:all 0.22s cubic-bezier(0.16,1,0.3,1); }
.cond-row:active { transform:scale(0.97); }

/* ── Mec btn ── */
.mec-btn { transition:all 0.2s cubic-bezier(0.34,1.56,0.64,1); }
.mec-btn:active { transform:scale(0.94); }
.mec-btn.sel { transform:scale(1.04); }

/* ── Toggle row hover ── */
.toggle-row {
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.toggle-row:hover { background:rgba(235,205,200,0.28) !important; transform:translateX(2px); }

/* ── Input focus ring animé ── */
input:focus { transition:all 0.2s cubic-bezier(0.16,1,0.3,1) !important; }

/* ── Bouton Précédent hover ── */
.btn-prev:hover {
  background:rgba(235,205,195,0.40) !important;
  border-color:rgba(241,78,29,0.35) !important;
  transform:translateX(-2px);
}
.btn-prev { transition:all 0.2s cubic-bezier(0.16,1,0.3,1); }

/* ── Step dot animation ── */
.step-dot { transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1); }

/* ── Progress bar ── */
#estProgress { transition:width 0.5s cubic-bezier(0.34,1.56,0.64,1) !important; }

/* ── Carte estimateur — légère élévation au hover ── */
#estimator-box > div { transition:box-shadow 0.3s; }
#estimator-box:hover > div {
  box-shadow:0 40px 100px rgba(15,23,42,0.16),inset 0 1.5px 0 rgba(255,255,255,0.65) !important;
}

/* ── Ripple sur toggles ── */
@keyframes togglePop {
  0%   { transform:scale(1); }
  40%  { transform:scale(1.18); }
  70%  { transform:scale(0.95); }
  100% { transform:scale(1); }
}
.toggle-pop { animation: togglePop 0.35s cubic-bezier(0.34,1.56,0.64,1); }

/* ── Checkmark draw ── */
@keyframes checkDraw {
  from { stroke-dashoffset:30; }
  to   { stroke-dashoffset:0; }
}
.check-anim { stroke-dasharray:30; stroke-dashoffset:30; animation:checkDraw 0.3s ease forwards 0.05s; }

/* ── Loader pulsation ── */
@keyframes loaderPulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%     { opacity:0.7; transform:scale(0.95); }
}
.loader-pulse { animation:loaderPulse 1.5s ease-in-out infinite; }

/* ── Success bounce ── */
@keyframes successPop {
  0%   { transform:scale(0); opacity:0; }
  60%  { transform:scale(1.2); }
  80%  { transform:scale(0.92); }
  100% { transform:scale(1); opacity:1; }
}
.success-pop { animation:successPop 0.55s cubic-bezier(0.34,1.56,0.64,1) forwards; }

/* ── Badge valeur slider ── */
@keyframes badgePop {
  0%   { transform:scale(1); }
  40%  { transform:scale(1.15); }
  100% { transform:scale(1); }
}
.badge-pop { animation:badgePop 0.25s cubic-bezier(0.34,1.56,0.64,1); }

/* ── Scroll doux de la carte ── */
#estimator-box {
  scroll-behavior: smooth;
}

/* ══ HERO ORNEMENTS — apparition + animations ══ */
@keyframes orntFadeIn {
  from { opacity:0; transform:scale(0.92) rotate(var(--r,0deg)); }
  to   { opacity:1; transform:scale(1) rotate(var(--r,0deg)); }
}
@keyframes orntFloat1 {
  0%,100% { transform:translateY(0px) rotate(0deg); }
  50%     { transform:translateY(-12px) rotate(3deg); }
}
@keyframes orntFloat2 {
  0%,100% { transform:translateY(0px) rotate(0deg); }
  50%     { transform:translateY(10px) rotate(-2deg); }
}
@keyframes orntSpin {
  from { transform:translate(-50%,-50%) rotate(0deg); }
  to   { transform:translate(-50%,-50%) rotate(360deg); }
}

.hero-ornt { animation-fill-mode:forwards; }
.hero-ornt-1 {
  animation: orntFadeIn 1s ease 0.6s forwards, orntFloat1 8s ease-in-out 1.6s infinite;
}
.hero-ornt-2 {
  animation: orntFadeIn 1s ease 0.9s forwards, orntFloat2 10s ease-in-out 1.9s infinite;
}
.hero-ornt-3 {
  animation: orntFadeIn 1s ease 0.75s forwards, orntFloat1 12s ease-in-out 1.75s infinite;
}
.hero-ornt-4 {
  animation: orntFadeIn 1s ease 1.0s forwards, orntFloat2 9s ease-in-out 2s infinite;
}
.hero-ornt-5 {
  animation: orntFadeIn 1.5s ease 0.4s forwards;
}
.hero-ornt-5 ellipse:last-child {
  animation: none;
  transform-origin: center;
}

/* ── Grille subtile en fond ── */
section#hero svg:first-of-type { animation: orntFadeIn 2s ease 0.2s forwards; }

/* ══ BUBBLE BUTTON ══ */
#bubbleBtn:hover { transform:translateY(-4px) scale(1.03); box-shadow:0 14px 40px rgba(241,78,29,0.50),0 4px 12px rgba(0,0,0,0.12); }
#bubbleBtn:active { transform:scale(0.97); }

/* ══ ESTIMATOR MODAL ══ */
#estModal { display:none; opacity:0; }
#estModal.open { display:flex; animation:modalFadeIn .3s cubic-bezier(0.22,1,0.36,1) forwards; }
@keyframes modalFadeIn {
  from { opacity:0; transform:scale(0.97); }
  to   { opacity:1; transform:scale(1); }
}
@keyframes modalFadeOut {
  from { opacity:1; }
  to   { opacity:0; }
}
/* Contenu modal */
#estModal > div:last-child {
  animation: modalContentIn .35s cubic-bezier(0.22,1,0.36,1) .05s both;
}
@keyframes modalContentIn {
  from { opacity:0; transform:translateY(20px) scale(0.98); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
#m_estimator-box { animation:modalSlideUp .3s cubic-bezier(.16,1,.3,1); }
@keyframes modalSlideUp { from{transform:translateY(32px);opacity:0} to{transform:translateY(0);opacity:1} }

/* Scrollbar modal */
#m_estimator-box::-webkit-scrollbar { width:4px; }
#m_estimator-box::-webkit-scrollbar-track { background:transparent; }
#m_estimator-box::-webkit-scrollbar-thumb { background:rgba(241,78,29,0.3);border-radius:4px; }

/* ══ SECTION 2 ANIMATIONS ══ */

/* ── Hover cards — transitions ultra-smooth ── */
.s2-card {
  transition: transform 0.65s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.65s cubic-bezier(0.22,1,0.36,1) !important;
  will-change: transform;
}
.s2-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 36px rgba(15,23,42,0.07),
              0 4px 12px rgba(15,23,42,0.04) !important;
}
.s2-card-bar {
  transition: transform 1s cubic-bezier(0.22,1,0.36,1) !important;
}
.s2-card:hover .s2-card-bar { transform: scaleX(1) !important; }
.s2-icon {
  transition: transform 0.65s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.65s cubic-bezier(0.22,1,0.36,1) !important;
}
.s2-card:hover .s2-icon {
  transform: scale(1.06) rotate(-3deg);
  box-shadow: 0 3px 10px rgba(241,78,29,0.10);
}

/* Stats hover */
.s2-stat {
  transition: transform 0.65s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.65s cubic-bezier(0.22,1,0.36,1) !important;
  will-change: transform;
}
.s2-stat:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 30px rgba(241,78,29,0.07) !important;
}

/* CTA hover */
.s2-cta {
  transition: transform 0.55s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.55s cubic-bezier(0.22,1,0.36,1) !important;
}
.s2-cta:hover {
  transform: scale(1.02) translateY(-1px) !important;
  box-shadow: 0 8px 28px rgba(241,78,29,0.30) !important;
}
.s2-cta:active { transform: scale(0.98) !important; transition-duration: 0.12s !important; }

/* Pills comparatif hover */
.comp-pill {
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
}
.comp-pill:hover { transform: translateX(2px); }

/* Pills comparatif */
.comp-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 600;
  padding: 3px 10px; border-radius: 999px;
  width: fit-content;
}
.comp-yes {
  color: #059669;
  background: rgba(5,150,105,0.08);
  border: 1px solid rgba(5,150,105,0.18);
}
.comp-yes::before { content:'✓'; font-size:9px; }
.comp-no {
  color: #ef4444;
  background: rgba(239,68,68,0.06);
  border: 1px solid rgba(239,68,68,0.14);
}
.comp-no::before { content:'✗'; font-size:9px; }

/* Animations entrée séquencées */
@keyframes s2FadeUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}

.s2-header.in    { animation: s2FadeUp .7s cubic-bezier(.16,1,.3,1) forwards; }
.s2-stat.in      { animation: s2FadeUp .6s cubic-bezier(.16,1,.3,1) forwards; }
.s2-card.in      { animation: s2FadeUp .6s cubic-bezier(.16,1,.3,1) forwards; }
.s2-card-dark.in { animation: s2FadeUp .6s cubic-bezier(.16,1,.3,1) forwards; }
.s2-comparatif.in{ animation: s2FadeUp .7s cubic-bezier(.16,1,.3,1) forwards; }

/* ── Reviews grid responsive ── */
@media (max-width: 768px) {
  .reviews-grid { grid-template-columns: 1fr !important; }
  .reviews-grid > div:first-child { grid-column: auto !important; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .reviews-grid { grid-template-columns: 1fr 1fr !important; }
  .reviews-grid > div:first-child { grid-column: 1/-1 !important; }
}

/* ── Section Avis — toujours visible, animation scroll bonus ── */
.avis-anim { opacity:1; transform:none; }
.avis-card {
  opacity:1;
  transform:none;
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.5s cubic-bezier(0.22,1,0.36,1);
}
.avis-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(15,23,42,0.10),inset 0 1px 0 rgba(255,255,255,0.8) !important;
}

/* ── Navbar — overflow sur petits écrans ── */
@media (max-width: 640px) {
  .site-nav nav { display: none !important; }
}
@media (max-width: 380px) {
  .site-nav { padding: 8px 14px !important; }
}

/* ── Pulse animation pour le dot live ── */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}
.animate-pulse { animation: pulse 1.8s ease-in-out infinite; }

/* ── Active nav link ── */
[data-nav].active {
  background: rgba(241,78,29,0.08);
  color: #F14E1D !important;
  font-weight: 700 !important;
}

/* ── Hover cards avis — fix ── */
.avis-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 20px 48px rgba(15,23,42,0.10) !important;
}

/* ── Hero split responsive ── */
@media (max-width: 768px) {
  #heroRight { display: none !important; }
  #heroLeft  { width: 100% !important; padding-right: 0 !important; }
  #heroLeft h1 { align-items: center !important; text-align: center !important; }
}

/* ══ HERO SPLIT ANIMATION — smooth & propre ══ */

/* État initial */
#heroSplit {
  display: flex;
  align-items: center;
  justify-content: center;
}

#heroLeft {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* Transition uniquement sur les props qui bougent */
  transition:
    width       0.75s cubic-bezier(0.16, 1, 0.3, 1),
    padding     0.75s cubic-bezier(0.16, 1, 0.3, 1),
    opacity     0.5s  ease;
}

#heroRight {
  width: 0;
  opacity: 0;
  overflow: hidden;
  flex-shrink: 0;
  /* Transition séparée pour chaque propriété */
  transition:
    width       0.75s cubic-bezier(0.16, 1, 0.3, 1),
    opacity     0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.15s,
    transform   0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
  transform: translateX(20px);
}

/* État ouvert */
#heroSplit.hero-split-open {
  align-items: stretch;
}

#heroLeft.hero-left-open {
  width: 50%;
  padding-right: 40px;
}

#heroRight.hero-right-open {
  width: 50%;
  opacity: 1;
  transform: translateX(0);
}

/* Responsive — désactiver le split sur mobile */
@media (max-width: 768px) {
  #heroLeft.hero-left-open  { width: 100%; padding-right: 0; }
  #heroRight.hero-right-open { display: none; }
}

/* ══ BACK TO TOP ══ */
#backToTop { transition: opacity .3s ease, background .2s ease !important; }

/* ══ PRINT STYLES ══ */
@media print {
  #siteNav, #bubbleBtn, #backToTop, #cookieBanner,
  #hero canvas, .hero-ornt, section#rachat { display:none !important; }
  body { background:white !important; }
  .glass-card { box-shadow:none !important; border:1px solid #ddd !important; }
}

/* ══ FOCUS VISIBLE (accessibilité) ══ */
:focus-visible {
  outline: 2px solid #F14E1D;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ══ SELECTION COLOR ══ */
::selection { background: rgba(241,78,29,0.2); color: #0f172a; }

/* ══ SMOOTH SCROLL ══ */
html { scroll-behavior: smooth; }

/* ══ LOADING SKELETON pour les images ══ */
img { loading: lazy; }

/* ── Documents grid responsive ── */
@media (max-width: 768px) {
  #docsGrid { grid-template-columns: 1fr !important; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  #docsGrid { grid-template-columns: 1fr 1fr !important; }
}
.doc-card:hover {
  box-shadow: 0 12px 36px rgba(15,23,42,0.09) !important;
  transform: translateY(-3px);
}

/* ── Doc cards — transitions premium ── */
.doc-card {
  transition: box-shadow 0.4s cubic-bezier(0.16,1,0.3,1),
              transform  0.4s cubic-bezier(0.16,1,0.3,1) !important;
  will-change: transform;
}
.doc-card:hover {
  box-shadow: 0 12px 36px rgba(15,23,42,0.09) !important;
  transform: translateY(-3px) !important;
}
.doc-card:active {
  transform: scale(0.98) !important;
  transition-duration: 0.12s !important;
}

/* Hint text transition */
#doc1-hint, #doc2-hint, #doc3-hint {
  transition: color 0.2s ease;
}

/* ═══════════════════════════════════════════════════════════
   OPTIMISATIONS MOBILE — Ajouts UX & ergonomie tactile
   Cibles tap conformes Google (min 44-48px), anti-overflow,
   confort de lecture. Ajouté en autonomie.
═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── Anti-débordement horizontal global ── */
  html, body { overflow-x: hidden; max-width: 100vw; }

  /* ── Cibles tactiles du formulaire mécanique (étape 5) ── */
  /* padding:7px inline trop petit pour le doigt → on force une hauteur de tap correcte */
  .hf-mec-btn {
    padding: 12px 10px !important;
    min-height: 44px !important;
    font-size: 13px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* ── Espacement vertical des groupes de boutons mécaniques ── */
  .hf-mec-row, [class*="hf-mec"] { gap: 8px !important; }

  /* ── Inputs : empêcher le zoom auto iOS (font < 16px = zoom indésirable) ── */
  input[type="text"], input[type="tel"], input[type="email"],
  input[type="number"], select, textarea {
    font-size: 16px !important;
  }

  /* ── Boutons CTA principaux : zone de tap généreuse ── */
  button[type="submit"], .cta-primary, .hf-btn-next, .hf-btn-submit {
    min-height: 48px;
  }

  /* ── Confort de lecture : largeur de ligne et marges ── */
  p { line-height: 1.65; }

  /* ── Cercles décoratifs : ne jamais déborder ── */
  [style*="border-radius:50%"][style*="position:absolute"] {
    max-width: 70vw;
    max-height: 70vw;
  }

  /* ── Tableaux comparatifs : scroll horizontal propre si trop large ── */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ── FAQ : zone de clic pleine largeur ── */
  .faq-question, [class*="faq"] button, [onclick*="faq"] {
    min-height: 48px;
  }
}

/* ── Très petits écrans (≤ 380px) : compactage supplémentaire ── */
@media (max-width: 380px) {
  .hf-mec-btn { font-size: 12px !important; padding: 11px 6px !important; }
  h1, .hero-title { font-size: clamp(1.6rem, 8vw, 2.2rem) !important; }
}

/* ── Sliders (range) : thumb plus gros pour le tactile mobile ── */
@media (max-width: 768px) {
  input[type="range"] {
    height: 32px;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
  }
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #F14E1D;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(15,23,42,0.25);
    cursor: pointer;
  }
  input[type="range"]::-moz-range-thumb {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #F14E1D;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(15,23,42,0.25);
    cursor: pointer;
  }
  input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    background: rgba(241,78,29,0.2);
  }
}

/* ── Lisibilité mobile : plancher de taille de police ──
   Sur mobile, le texte de contenu (paragraphes, listes, liens de nav)
   ne doit pas descendre sous ~12px. On cible les éléments de TEXTE,
   pas les badges décoratifs (plaque immat, puces, etc.). */
@media (max-width: 768px) {
  p, li, td, th,
  .footer-link, footer a, nav a,
  .faq-question, .faq-answer,
  [class*="desc"], [class*="text-body"] {
    font-size: max(13px, 1em) !important;
    line-height: 1.6;
  }
  /* Petits labels/légendes : plancher à 12px (lisible sans casser le design) */
  small, .caption, .label, [class*="caption"], [class*="legend"] {
    font-size: 12px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   CTA MOBILE — Barre "Estimer" pleine largeur en bas
   Sur mobile, le bouton bulle devient une barre sticky bottom
   (plus visible, tap plus facile, meilleur taux de conversion).
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #floatBubble {
    bottom: 0 !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 9998 !important;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom)) !important;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(203,213,225,0.5);
  }
  #floatBubble #bubbleBtn, #floatBubble button {
    width: 100% !important;
    justify-content: center !important;
    min-height: 52px !important;
    font-size: 15px !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 20px rgba(241,78,29,0.35) !important;
  }
  /* Décaler le back-to-top pour ne pas chevaucher la barre */
  #backToTop {
    bottom: 84px !important;
    right: 16px !important;
  }
  /* Marge en bas du body pour que la barre ne cache pas le contenu/footer */
  body { padding-bottom: 76px; }
}

/* ═══════════════════════════════════════════════════════════
   NAVIGATION RESPONSIVE — Switch Desktop ↔ Mobile
   Desktop (>768px) : barre de liens + CTA "Estimer mon véhicule"
   Mobile  (≤768px) : logo + CTA compact + hamburger uniquement
   (Les commentaires HTML annonçaient ce switch, mais les règles
    CSS étaient absentes — voici la correction.)
═══════════════════════════════════════════════════════════ */

/* Par défaut (desktop) : nav visible, contrôles mobiles cachés */
#navDesktop { display: flex !important; }
#navCtaDesktop { display: flex !important; }
#navMobileControls { display: none !important; }

@media (max-width: 768px) {
  /* Mobile : on masque la nav desktop + le CTA desktop */
  #navDesktop { display: none !important; }
  #navCtaDesktop { display: none !important; }
  /* On affiche les contrôles mobiles (CTA compact + hamburger) */
  #navMobileControls { display: flex !important; }
}

/* ═══════════════════════════════════════════════════════════
   GRILLES RESPONSIVE — Effondrement en 1 colonne sur mobile
   Les grilles inline (documents, comparatif, avis…) gardaient
   3-4 colonnes sur mobile = illisible. On les force en 1 colonne.
   Les petites grilles de stats restent en 2 pour rester compactes.
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Grilles 3 et 4 colonnes → 1 colonne */
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns:1.2fr 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* La grille de stats (4 chiffres) reste en 2 colonnes : plus joli compact */
  #statsGrid, [data-grid="stats"] {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 480px) {
  /* Très petits écrans : même les grilles 2 colonnes passent en 1 */
  [style*="grid-template-columns:1fr 1fr"]:not(#statsGrid):not([data-grid="stats"]) {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   MODALE ESTIMATEUR — Bottom-sheet premium (refonte mobile)
   Desktop : carte centrée 440px
   Mobile  : feuille qui monte du bas, handle de glissement,
             animation fluide type app native (Uber/Airbnb).
═══════════════════════════════════════════════════════════ */
#estModal {
  position: fixed;
  inset: 0;
  z-index: 9998;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
#m_estimator-box {
  width: 100%;
  max-width: 440px;
  max-height: 88vh;
  overflow-y: auto;
  background: #FDF4EE;
  border-radius: 24px;
  box-shadow: 0 24px 70px rgba(15,23,42,0.25);
  position: relative;
}

@media (max-width: 768px) {
  /* Overlay : ancre la feuille en bas, fond assombri */
  #estModal {
    align-items: flex-end !important;
    padding: 0 !important;
    background: rgba(15,23,42,0.45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }
  #estModal.open {
    display: flex !important;
    opacity: 1 !important;
    animation: sheetFadeIn .3s ease forwards !important;
  }

  /* La feuille : plein largeur, monte du bas, coins arrondis en haut */
  #m_estimator-box {
    max-width: 100% !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100svh !important;
    max-height: 100svh !important;
    border-radius: 0 !important;
    box-shadow: 0 -8px 40px rgba(15,23,42,0.28) !important;
    padding-bottom: env(safe-area-inset-bottom);
    animation: sheetSlideUp .42s cubic-bezier(.16,1,.3,1) !important;
  }

  /* Handle de glissement (barre grise en haut) */
  #m_estimator-box::before {
    content: '';
    position: sticky;
    top: 0;
    display: block;
    width: 40px;
    height: 5px;
    margin: 10px auto 2px;
    border-radius: 999px;
    background: rgba(15,23,42,0.18);
    z-index: 5;
  }
}

@keyframes sheetFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes sheetSlideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@keyframes sheetSlideDown {
  from { transform: translateY(0); }
  to   { transform: translateY(100%); }
}
#m_estimator-box.sheet-closing {
  animation: sheetSlideDown .3s cubic-bezier(.4,0,1,1) forwards !important;
}

/* ═══════════════════════════════════════════════════════════
   HERO MOBILE — Refonte équilibre & densité
   Problème : min-h 78vh + formulaire invisible (width:0) =
   mur de texte tassé en haut + énorme vide en bas.
   Solution : hauteur auto, espacement maîtrisé, hiérarchie nette.
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Le hero ne force plus 78vh : il prend juste la place nécessaire */
  #hero {
    padding-top: 92px !important;   /* sous la navbar fixe */
    padding-bottom: 32px !important;
    justify-content: center !important;
  }

  /* heroSplit : on empile, on ne tente pas le côte-à-côte */
  #heroSplit {
    flex-direction: column !important;
    overflow: visible !important;
  }

  /* heroRight (formulaire desktop) : totalement retiré du flux mobile
     car sur mobile le formulaire s'ouvre en bottom-sheet via le CTA */
  #heroRight {
    display: none !important;
  }

  /* heroLeft prend toute la largeur proprement */
  #heroLeft {
    max-width: 100% !important;
    padding: 0 4px !important;
  }

  /* Eyebrow (RACHAT DE VÉHICULE — OFFRE IMMÉDIATE) : un peu d'air */
  .hero-a1 { margin-bottom: 14px !important; }

  /* Titre : resserrer l'interligne pour un bloc compact et fort */
  .hero-a2 { line-height: 1.1 !important; margin-bottom: 14px !important; }

  /* Paragraphe : lisible mais compact */
  .hero-a3 {
    font-size: 14px !important;
    line-height: 1.55 !important;
    margin-bottom: 22px !important;
    max-width: 340px;
  }

  /* Boutons CTA : pleine largeur, empilés, généreux */
  .hero-a4 {
    width: 100%;
    gap: 10px !important;
    padding-top: 4px !important;
    margin-bottom: 24px !important;
  }
  .hero-a4 > a, .hero-a4 > button {
    width: 100% !important;
    justify-content: center !important;
    min-height: 50px;
    font-size: 13px !important;
  }

  /* Badges de réassurance : ligne horizontale compacte centrée */
  .hero-a5 {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px 16px !important;
  }
  .hero-a5 > div { font-size: 12px !important; }
}

/* Très petits écrans : compacter encore le titre */
@media (max-width: 400px) {
  .hero-a2 span:first-child { font-size: clamp(1rem, 4.6vw, 1.4rem) !important; }
  .hero-a2 span:last-child  { font-size: clamp(1.3rem, 6vw, 1.9rem) !important; }
}

/* ── Hero mobile : épurer le décor (moins de bruit visuel) ── */
@media (max-width: 768px) {
  /* Atténuer les ornements (constellations, croix, losanges) */
  .hero-ornt { opacity: 0.35 !important; }
  .hero-ornt-4, .hero-ornt-5 { display: none !important; } /* retirer les 2 plus encombrants */
  /* Particules : réduire la densité visuelle */
  #heroParticles { opacity: 0.5 !important; }
  /* Grille de fond : plus discrète pour laisser respirer le texte */
  #hero svg[style*="inset:0"] { opacity: 0.5 !important; }
}

/* ═══════════════════════════════════════════════════════════
   HERO MOBILE — CTA principal premium + pulse d'invitation
   Le bouton "Estimer mon véhicule" devient le point focal :
   plus grand, ombre colorée, légère pulsation pour attirer l'œil.
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* CTA principal (1er bouton de .hero-a4) : mise en avant */
  .hero-a4 > button:first-child,
  .hero-a4 > a:first-child {
    background: linear-gradient(135deg, #F14E1D, #ff6a3d) !important;
    box-shadow: 0 8px 28px rgba(241,78,29,0.4) !important;
    font-size: 14px !important;
    letter-spacing: .05em !important;
    animation: ctaInvite 2.8s ease-in-out infinite;
  }
  /* CTA secondaire "Comment ça marche" : discret, en outline */
  .hero-a4 > button:last-child,
  .hero-a4 > a:last-child {
    background: transparent !important;
    border: 1.5px solid rgba(241,78,29,0.3) !important;
    color: #F14E1D !important;
    font-size: 12px !important;
  }
}
@keyframes ctaInvite {
  0%, 100% { transform: translateY(0); box-shadow: 0 8px 28px rgba(241,78,29,0.4); }
  50%      { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(241,78,29,0.5); }
}

/* ═══════════════════════════════════════════════════════════
   PLEIN ÉCRAN PAR SECTION (MOBILE)
   Chaque section occupe au minimum toute la hauteur de l'écran
   et centre son contenu verticalement. Effet "une section =
   un écran" au scroll, sans jamais couper le contenu long.
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #hero,
  #documents,
  #rachat,
  #garanties,
  #process,
  #avis,
  #faq {
    min-height: 100vh !important;
    min-height: 100svh !important; /* hauteur réelle mobile (barre d'adresse exclue) */
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    padding-top: 72px;    /* sous la navbar fixe */
    padding-bottom: 40px;
    scroll-margin-top: 0;
  }

  /* Le hero garde un padding-top plus large (navbar + respiration) */
  #hero {
    padding-top: 84px !important;
    padding-bottom: 100px !important; /* place pour la barre CTA sticky */
  }

  /* Sections à contenu potentiellement long : on autorise l'extension
     mais elles remplissent au moins l'écran */
  #process, #faq, #documents {
    justify-content: flex-start;
    padding-top: 90px;
  }
}

/* ── Scroll fluide entre sections ── */
html { scroll-behavior: smooth; }

/* ── Bottom-sheet plein écran : répartition interne du contenu ── */
@media (max-width: 768px) {
  #m_estimator-box {
    display: flex !important;
    flex-direction: column !important;
  }
  /* Le header (handle + titre + progression) reste en haut, fixe */
  #m_estimator-box > div:first-child {
    flex-shrink: 0;
    border-radius: 0 !important;
    position: sticky;
    top: 0;
    z-index: 4;
  }
  /* Le corps des étapes prend tout l'espace restant */
  #m_estimator-box > div:nth-child(2) {
    flex: 1;
    display: block;
    overflow-y: auto;
    padding: 24px 20px !important;
  }
  /* Le handle de glissement reste visible au-dessus du header */
  #m_estimator-box::before {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
  }
  /* Un peu de padding-top sur le header pour laisser place au handle */
  #m_estimator-box > div:first-child {
    padding-top: 20px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   MENU MOBILE — Design premium + z-index au-dessus de la navbar
   Bug corrigé : le menu (z-index 49) passait SOUS la navbar
   (z-index 50) → la navbar restait visible par-dessus le menu.
   Maintenant le menu est à 9999, il couvre tout.
═══════════════════════════════════════════════════════════ */
#mobileMenu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999; /* au-dessus de la navbar (50) et de tout le reste */
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .2s ease; /* fond apparaît vite, le slide du panneau reste visible */
}
#mobileMenu.open { opacity: 1; }

#mobileMenuPanel {
  position: absolute;
  top: 0;
  right: 0;
  width: 86%;
  max-width: 360px;
  height: 100%;
  background: #fdfaf7;
  display: flex;
  flex-direction: column;
  box-shadow: -12px 0 40px rgba(15, 23, 42, 0.2);
  transform: translateX(100%);
  transition: transform .42s cubic-bezier(.16, 1, .3, 1);
}
#mobileMenu.open #mobileMenuPanel { transform: translateX(0); }

/* Header du panneau */
.mm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 22px 18px;
  border-bottom: 1px solid rgba(203, 213, 225, 0.35);
  flex-shrink: 0;
}
.mm-logo {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 19px;
  letter-spacing: .14em;
  color: #0f172a;
}
.mm-close {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid rgba(241, 78, 29, 0.25);
  color: #F14E1D;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s;
}
.mm-close:active { transform: scale(.92); background: #F14E1D; color: #fff; }

/* Zone de navigation scrollable */
.mm-nav {
  flex: 1;
  overflow-y: auto;
  padding: 18px 16px;
  -webkit-overflow-scrolling: touch;
}
.mm-section-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: #b08d7d;
  padding: 0 10px 8px;
}

/* Liens principaux */
.mm-link {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 14px;
  margin-bottom: 2px;
  border: none;
  background: none;
  border-radius: 12px;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 15.5px;
  color: #0f172a;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  transition: background .18s, transform .18s;
}
.mm-link:active {
  background: rgba(241, 78, 29, 0.08);
  transform: translateX(3px);
}

/* Liens de zones (départements) */
.mm-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  margin-bottom: 1px;
  border-radius: 10px;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #475569;
  text-decoration: none;
  transition: background .18s;
}
.mm-zone:active { background: rgba(241, 78, 29, 0.06); }
.mm-dept {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  background: rgba(148, 163, 184, 0.12);
  padding: 2px 7px;
  border-radius: 6px;
}

/* CTA fixe en bas */
.mm-cta-wrap {
  padding: 16px 18px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(203, 213, 225, 0.4);
  background: #fdfaf7;
  flex-shrink: 0;
}
.mm-cta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 16px;
  background: linear-gradient(135deg, #F14E1D, #ff6a3d);
  color: #fff;
  border: none;
  border-radius: 14px;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: .04em;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(241, 78, 29, 0.35);
  transition: transform .2s;
}
.mm-cta:active { transform: scale(.97); }
.mm-cta-note {
  text-align: center;
  font-size: 10.5px;
  color: #94a3b8;
  margin-top: 10px;
  font-family: 'JetBrains Mono', monospace;
}

/* ── Quand le menu mobile est ouvert : masquer la navbar (double sécurité) ── */
body:has(#mobileMenu.open) .site-nav { opacity: 0; pointer-events: none; }

/* ═══════════════════════════════════════════════════════════
   PERFORMANCE MOBILE — Allègement des effets coûteux
   backdrop-filter (flou) et animations infinies sont très
   gourmands sur mobile → on les simplifie pour un site fluide,
   sans toucher au rendu desktop.
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Remplacer les flous par des fonds semi-opaques (bien plus léger) */
  .glass-card,
  .input-glass,
  .select-glass {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .glass-card { background: rgba(255,255,255,0.85) !important; }
  .input-glass, .select-glass { background: rgba(255,255,255,0.92) !important; }

  /* La navbar garde un léger flou (importante visuellement) mais réduit */
  .site-nav {
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
  }

  /* Désactiver l'animation pulse permanente du CTA (impression de lourdeur) */
  .hero-a4 > button:first-child,
  .hero-a4 > a:first-child {
    animation: none !important;
  }

  /* Accélération matérielle sur les éléments animés au scroll */
  #floatBubble, #mobileMenuPanel, #m_estimator-box {
    will-change: transform;
    transform: translateZ(0);
  }
}

/* ── Réactivité tactile : supprimer le délai et le flash bleu au tap ── */
@media (max-width: 768px) {
  /* Supprime le surlignage bleu disgracieux au tap (impression de lenteur) */
  button, a, .mm-link, .mm-zone, .hf-mec-btn, .m-cond-btn, [onclick] {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation; /* supprime le délai de 300ms du double-tap */
  }
  /* Feedback tactile instantané (remplace le flash bleu) */
  button:active, a:active, [onclick]:active {
    opacity: 0.85;
  }
}

/* ── CTA final : hover desktop + plein écran mobile ── */
.cta-final-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 18px 50px rgba(241,78,29,0.6);
}
.cta-final-btn:active { transform: scale(.98); }
@media (max-width: 768px) {
  #cta-final {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 90px 6vw 80px !important;
  }
  .cta-final-btn { width: 100%; justify-content: center; }
}

/* ── Sécurité reveal : force la visibilité après 1.5s (anti contenu invisible) ── */
@keyframes revealFallback { to { opacity: 1; transform: translateY(0); } }
.reveal { animation: revealFallback 0.01s 1.5s forwards; }
.reveal.visible { animation: none; } /* si l'observer a fait son travail, pas de conflit */

/* ── Scroll fluide section par section (mobile, en douceur) ──
   'proximity' = accroche seulement si on est proche d'une section,
   ne bloque jamais le scroll libre (contrairement à 'mandatory'). */
@media (max-width: 768px) {
  /* Désactivé volontairement : scroll-snap peut gêner sur les sections
     à contenu long. On garde le scroll libre + plein écran par section.
     (Si tu veux tester le snap, décommente les 2 lignes ci-dessous) */
  /* html { scroll-snap-type: y proximity; } */
  /* #hero, #garanties, #process, #avis, #cta-final { scroll-snap-align: start; } */
}

/* ═══════════════════════════════════════════════════════════
   FOND MOBILE — Animé proprement, sans lag (remplace le canvas)
   Le canvas de particules est désactivé sur mobile (trop lourd).
   On le remplace par : orbs simplifiés (opacity pulse léger, pas
   de déplacement coûteux) + un dégradé doux qui respire. Tout
   est GPU-accéléré (opacity/transform only) = fluide garanti.
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Orbs : on garde le halo coloré mais on remplace le déplacement
     (translate 60-80px = coûteux) par une pulsation d'opacité douce */
  .orb-a, .orb-b, .orb-c {
    animation: none !important;
    will-change: opacity;
  }
  .orb-a { animation: orbPulseA 9s ease-in-out infinite !important; }
  .orb-b { animation: orbPulseB 11s ease-in-out infinite !important; }
  .orb-c { animation: orbPulseC 13s ease-in-out infinite !important; }

  /* Réduire le flou des orbs sur mobile (le blur est coûteux) */
  .orb-a, .orb-b, .orb-c { filter: blur(50px) !important; }
}

@keyframes orbPulseA {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 0.8; transform: scale(1.08); }
}
@keyframes orbPulseB {
  0%, 100% { opacity: 0.45; transform: scale(1.05); }
  50%      { opacity: 0.75; transform: scale(0.95); }
}
@keyframes orbPulseC {
  0%, 100% { opacity: 0.4; transform: scale(0.98); }
  50%      { opacity: 0.7; transform: scale(1.06); }
}

/* ═══════════════════════════════════════════════════════════
   HAMBURGER — Design moderne propre + morph en croix
═══════════════════════════════════════════════════════════ */
.hb-btn {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(203,213,225,0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(15,23,42,0.06);
  transition: background .2s, box-shadow .2s, transform .2s;
}
.hb-btn:active { transform: scale(.92); }
.hb-line {
  display: block;
  width: 19px;
  height: 2.5px;
  background: #0f172a;
  border-radius: 99px;
  transition: transform .35s cubic-bezier(.68,-0.3,.32,1.3), opacity .25s;
}
/* État ouvert : les 2 barres forment une croix (X) */
.hb-btn.menu-open {
  background: #F14E1D;
  border-color: #F14E1D;
}
.hb-btn.menu-open .hb-line { background: #fff; }
.hb-btn.menu-open .hb-line-1 { transform: translateY(3.75px) rotate(45deg); }
.hb-btn.menu-open .hb-line-2 { transform: translateY(-3.75px) rotate(-45deg); }

/* ═══════════════════════════════════════════════════════════
   COMPARATIF — Garder les 3 colonnes alignées sur mobile
   La règle "grilles → 1 colonne" cassait ce tableau (les lignes
   critère/SIARA/particulier se déconnectaient). Exception ici :
   on garde 3 colonnes mais compactes et lisibles.
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Forcer le comparatif à rester en 3 colonnes (annule la règle générale) */
  .s2-comparatif > div[style*="grid-template-columns"] {
    grid-template-columns: 1.1fr 1fr 1fr !important;
  }
  /* Compacter le contenu pour que ça rentre */
  .s2-comparatif > div > div {
    padding: 12px 10px !important;
  }
  .s2-comparatif .comp-pill {
    font-size: 10px !important;
    padding: 3px 7px !important;
    white-space: nowrap;
  }
  /* Les labels de colonnes plus petits */
  .s2-comparatif [style*="font-size:9px"] {
    font-size: 8px !important;
    margin-bottom: 8px !important;
  }
  /* La colonne critères : texte un peu plus petit pour rentrer */
  .s2-comparatif p[style*="font-size:11px"] {
    font-size: 10px !important;
    line-height: 2.55 !important; /* aligné sur la hauteur des pills (pill ~22px + gap 5px) */
  }
  /* Aligner verticalement le contenu des 3 colonnes (haut) */
  .s2-comparatif > div > div { vertical-align: top; }
  /* Les pills : hauteur fixe pour matcher les lignes de critères */
  .s2-comparatif .comp-pill {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
  }
}

/* ═══════════════════════════════════════════════════════════
   FORMULAIRE D'ESTIMATION — Composants réutilisables (v2)
═══════════════════════════════════════════════════════════ */
/* Label de champ */
.ef-label { display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#64748b; margin-bottom:7px; }
.ef-label .req { color:#F14E1D; }
/* Input / select */
.ef-input, .ef-select {
  width:100%; padding:13px 14px; background:#fff; border:2px solid #e2e8f0;
  border-radius:12px; font-family:'Outfit',sans-serif; font-size:16px; color:#0f172a;
  transition:border-color .2s; outline:none; -webkit-appearance:none; appearance:none;
}
.ef-input:focus, .ef-select:focus { border-color:#F14E1D; }
.ef-select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:38px; }
.ef-field { margin-bottom:15px; }
/* Groupe de boutons d'options */
.ef-opts { display:grid; gap:8px; }
.ef-opts.cols-2 { grid-template-columns:1fr 1fr; }
.ef-opts.cols-3 { grid-template-columns:repeat(3,1fr); }
.ef-opt {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  padding:13px 10px; background:#fff; border:2px solid #e2e8f0; border-radius:12px;
  font-family:'Outfit',sans-serif; font-weight:600; font-size:13px; color:#475569;
  cursor:pointer; transition:all .18s; text-align:center; min-height:48px;
}
.ef-opt .ef-ico { font-size:20px; line-height:1; }
.ef-opt:active { transform:scale(.96); }
.ef-opt.sel { border-color:#F14E1D; background:linear-gradient(135deg,rgba(241,78,29,.08),rgba(225,29,72,.04)); color:#0f172a; }
.ef-opt.sel.yes { border-color:#22c55e; background:rgba(34,197,94,.08); }
.ef-opt.sel.no { border-color:#ef4444; background:rgba(239,68,68,.06); }
/* Mini-boutons Oui/Non pour les listes d'équipements */
.ef-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid #f1f5f9; }
.ef-row-label { font-family:'Outfit',sans-serif; font-weight:600; font-size:13.5px; color:#334155; flex:1; }
.ef-yn { display:flex; gap:5px; flex-shrink:0; }
.ef-yn-btn {
  width:42px; height:34px; border:1.5px solid #e2e8f0; background:#fff; border-radius:9px;
  font-size:12px; font-weight:700; color:#94a3b8; cursor:pointer; transition:all .15s;
}
.ef-yn-btn.sel-yes { border-color:#22c55e; background:#22c55e; color:#fff; }
.ef-yn-btn.sel-no { border-color:#ef4444; background:#ef4444; color:#fff; }
/* Titre d'étape */
.ef-step-head { text-align:center; margin-bottom:18px; }
.ef-step-ico { font-size:30px; margin-bottom:6px; }
.ef-step-title { font-family:'Outfit',sans-serif; font-weight:800; font-size:17px; color:#0f172a; }
.ef-step-sub { font-size:12px; color:#94a3b8; margin-top:3px; }
/* Sous-section dans une étape */
.ef-subsection { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:#b08d7d; margin:18px 0 10px; padding-bottom:6px; border-bottom:1px solid #f1f5f9; }
/* Bandeau "même en panne" */
.ef-reassure { display:flex; align-items:flex-start; gap:9px; padding:12px 14px; background:rgba(34,197,94,.07); border:1px solid rgba(34,197,94,.2); border-radius:11px; margin-bottom:16px; }
.ef-reassure-txt { font-size:12px; color:#15803d; line-height:1.45; font-weight:500; }
/* Zone de texte libre */
.ef-textarea { width:100%; padding:13px 14px; background:#fff; border:2px solid #e2e8f0; border-radius:12px; font-family:'Outfit',sans-serif; font-size:16px; color:#0f172a; resize:vertical; min-height:80px; outline:none; transition:border-color .2s; }
.ef-textarea:focus { border-color:#F14E1D; }
/* Erreur de validation */
.ef-error { border-color:#ef4444 !important; animation:efShake .35s ease; }
@keyframes efShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
.ef-error-msg { font-size:11px; color:#ef4444; margin-top:5px; font-weight:600; display:none; }
.ef-error-msg.show { display:block; }