body{margin:0;background:#F5F3ED}
a{color:#364D40}a:hover{color:#24342B}
.eclat{position:relative;overflow:hidden;font-family:Arial,Helvetica,sans-serif;color:#364D40;background:#F5F3ED;-webkit-font-smoothing:antialiased}
.eclat *{box-sizing:border-box}
.serif{font-family:Georgia,'Times New Roman',serif}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 32px}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:700;letter-spacing:.22em;text-transform:uppercase}
.kicker svg{width:14px;height:14px}

/* ---------- Keyframes ---------- */
@keyframes up{to{transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes shine{0%{background-position:130% 0}100%{background-position:-130% 0}}
@keyframes twinkle{0%,100%{transform:scale(.15) rotate(0deg);opacity:0}50%{transform:scale(1) rotate(90deg);opacity:1}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
@keyframes floatyB{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(14px) rotate(1deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes blob{0%,100%{border-radius:42% 58% 63% 37%/41% 44% 56% 59%;transform:translate(0,0) scale(1)}33%{border-radius:63% 37% 38% 62%/58% 33% 67% 42%;transform:translate(60px,-40px) scale(1.1)}66%{border-radius:38% 62% 52% 48%/36% 61% 39% 64%;transform:translate(-40px,50px) scale(.92)}}
@keyframes bubble{0%{transform:translate(0,0) scale(.6);opacity:0}10%{opacity:1}50%{transform:translate(30px,-460px) scale(1)}100%{transform:translate(-20px,-960px) scale(1.1);opacity:0}}
@keyframes wipe{0%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 100%)}}
@keyframes squeegee{0%{left:-4%;opacity:1}100%{left:102%;opacity:1}}
@keyframes popIn{0%{opacity:0;transform:scale(.4) rotate(-12deg)}60%{opacity:1;transform:scale(1.08) rotate(2deg)}100%{opacity:1;transform:scale(1)}}
@keyframes sheen{0%{transform:translateX(-160%) skewX(-20deg)}55%,100%{transform:translateX(360%) skewX(-20deg)}}
@keyframes gleam{0%{transform:translateX(-200%) skewX(-20deg)}50%,100%{transform:translateX(500%) skewX(-20deg)}}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@keyframes knob{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}50%{box-shadow:0 0 0 16px rgba(255,255,255,0)}}
@keyframes reveal{from{opacity:0;transform:translateY(80px) scale(.96)}to{opacity:1;transform:none}}
@keyframes revealL{from{opacity:0;transform:translateX(-90px)}to{opacity:1;transform:none}}
@keyframes revealR{from{opacity:0;transform:translateX(90px)}to{opacity:1;transform:none}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ink{from{color:#C3CEBF}to{color:#364D40}}
@keyframes drift{from{transform:translateY(-120px) rotate(-12deg)}to{transform:translateY(160px) rotate(16deg)}}
@keyframes popScroll{from{opacity:0;transform:scale(.3) rotate(-30deg)}to{opacity:1;transform:none}}
@keyframes tilt{from{transform:rotate(-3deg) translateX(-4%)}to{transform:rotate(-3deg) translateX(2%)}}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:#24342B;color:#FFFFFF;padding-bottom:120px}
.blob{position:absolute;filter:blur(80px);opacity:.6;animation:blob 18s ease-in-out infinite}
.bubble{position:absolute;bottom:-70px;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.75),rgba(255,255,255,.1) 40%,rgba(138,161,131,.18) 72%);border:1px solid rgba(255,255,255,.35);animation:bubble var(--t) linear infinite;animation-delay:var(--d);pointer-events:none}
.spark{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);color:#FFFFFF;animation:twinkle var(--t,3.2s) ease-in-out infinite;animation-delay:var(--d,0s);pointer-events:none}
.spark svg{width:100%;height:100%;display:block}
.nav{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 0;opacity:0;animation:fadeIn 1s ease forwards 1.9s}
.nav-links{display:flex;align-items:center;gap:34px;font-size:15px}
.nav-links a{position:relative;color:#FFFFFF;text-decoration:none;padding:12px 0}
.nav-links a::after{content:'';position:absolute;left:0;bottom:6px;width:100%;height:2px;background:#8AA183;transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.hero-grid{position:relative;z-index:4;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px;align-items:center;padding-top:56px}
.mask{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.mask>span{display:inline-block;transform:translateY(115%);animation:up 1.1s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:var(--d)}
.a-rise{opacity:0;animation:rise 1s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:var(--d,0s)}
.shine{font-style:italic;background:linear-gradient(110deg,#8AA183 0%,#8AA183 38%,#FFFFFF 50%,#8AA183 62%,#8AA183 100%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 3.8s ease-in-out infinite 2.6s}
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:0 30px;border-radius:999px;font-size:16px;font-weight:700;text-decoration:none;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,background .35s,color .35s;cursor:pointer;border:0;font-family:Arial,Helvetica,sans-serif}
.btn::after{content:'';position:absolute;top:0;left:0;width:35%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);animation:sheen 3.6s ease-in-out infinite;pointer-events:none}
.btn:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.28)}
.btn .arr{transition:transform .35s}
.btn:hover .arr{transform:translateX(6px)}
.btn-light{background:#F5F3ED;color:#24342B}
.btn-light:hover{color:#24342B;background:#FFFFFF}
.btn-ghost{background:transparent;color:#FFFFFF;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.btn-ghost::after{display:none}
.btn-ghost:hover{color:#24342B;background:#FFFFFF}
.btn-dark{background:#364D40;color:#FFFFFF}
.btn-dark:hover{color:#FFFFFF;background:#24342B}
.chip{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);font-size:14px}
.arch-zone{position:relative;opacity:0;animation:popIn 1.4s cubic-bezier(.2,.8,.2,1) forwards 2s}
.arch{position:relative;width:100%;max-width:470px;margin:0 auto;aspect-ratio:4/5;border-radius:240px 240px 36px 36px;overflow:hidden;background:radial-gradient(120% 90% at 50% 20%,#8AA183 0%,#4F6A59 55%,#364D40 100%);box-shadow:0 40px 90px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.18)}
.rays{position:absolute;inset:-60%;background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,255,255,.09) 0deg 5deg,transparent 5deg 15deg);animation:spin 50s linear infinite}
.gleam{position:absolute;top:-20%;left:0;width:22%;height:140%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);animation:gleam 5.5s ease-in-out infinite 3s}
.arch-mono{position:absolute;left:50%;top:44%;width:64%;transform:translate(-50%,-50%)}
.arch-mono img{width:100%;display:block;filter:drop-shadow(0 0 34px rgba(255,255,255,.45));animation:floaty 6s ease-in-out infinite}
.glass{position:absolute;z-index:3;display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:20px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 20px 50px rgba(0,0,0,.25);color:#FFFFFF}
.glass .ico{flex:0 0 44px;height:44px;border-radius:14px;background:#F5F3ED;color:#364D40;display:flex;align-items:center;justify-content:center}
.badge{position:absolute;z-index:4;top:-34px;right:-10px;width:150px;height:150px;border-radius:50%;background:#F5F3ED;color:#364D40;display:flex;align-items:center;justify-content:center;box-shadow:0 18px 40px rgba(0,0,0,.3)}
.badge svg.ring{position:absolute;inset:8px;width:134px;height:134px;animation:spin 16s linear infinite}
.cue{position:absolute;z-index:4;left:50%;bottom:34px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.75);opacity:0;animation:fadeIn 1s ease forwards 3s}
.cue i{display:block;width:1px;height:46px;background:#8AA183;animation:cue 2.2s ease-in-out infinite}
.intro{position:absolute;inset:0;z-index:20;background:#F5F3ED;display:flex;align-items:center;justify-content:center;animation:wipe 1.1s cubic-bezier(.77,0,.18,1) forwards 1.3s;pointer-events:none}
.intro img{width:180px;animation:popIn 1s cubic-bezier(.2,.8,.2,1) both}
.squeegee{position:absolute;z-index:21;top:0;bottom:0;left:-4%;width:10px;background:#FFFFFF;box-shadow:0 0 40px 18px rgba(255,255,255,.9),0 0 120px 40px rgba(138,161,131,.6);opacity:0;animation:squeegee 1.1s cubic-bezier(.77,0,.18,1) forwards 1.3s;pointer-events:none}


/* ---------- Services ---------- */
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.svc{position:relative;overflow:hidden;border-radius:36px;padding:52px 48px;min-height:560px;display:flex;flex-direction:column;gap:22px;transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .6s}
.svc:hover{transform:translateY(-12px) rotate(-.5deg);box-shadow:0 40px 80px rgba(36,52,43,.22)}
.svc::before{content:'';position:absolute;right:-120px;top:-120px;width:340px;height:340px;border-radius:50%;background:#8AA183;opacity:.22;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.svc:hover::before{transform:translate(-80px,90px) scale(1.5)}
.svc::after{content:'';position:absolute;top:0;left:0;width:30%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:translateX(-200%) skewX(-20deg);transition:transform 0s}
.svc:hover::after{transform:translateX(500%) skewX(-20deg);transition:transform 1.1s ease}
.svc-light{background:#FFFFFF;color:#364D40;box-shadow:0 20px 50px rgba(36,52,43,.08)}
.svc-dark{background:#364D40;color:#FFFFFF}
.num{font-family:Georgia,'Times New Roman',serif;font-size:120px;line-height:.8;color:transparent;-webkit-text-stroke:1.5px currentColor;opacity:.35;position:absolute;right:40px;bottom:30px;transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .6s}
.svc:hover .num{transform:translateY(-18px) scale(1.08);opacity:.7}
.svc-ico{position:relative;width:72px;height:72px;border-radius:22px;display:flex;align-items:center;justify-content:center;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.svc:hover .svc-ico{transform:rotate(-10deg) scale(1.12)}
.svc ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;position:relative}
.svc li{display:flex;align-items:center;gap:12px;font-size:16px;transition:transform .4s}
.svc li:hover{transform:translateX(8px)}
.svc li svg{flex:0 0 16px;width:16px;height:16px}
.more{position:relative;margin-top:auto;display:inline-flex;align-items:center;gap:10px;font-weight:700;text-decoration:none;min-height:44px}
.more .arr{transition:transform .35s}
.more:hover .arr{transform:translateX(8px)}

/* ---------- Avant / après ---------- */
.ba{position:relative;width:100%;max-width:560px;margin:0 auto;aspect-ratio:1/1;border-radius:32px;overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.4);user-select:none}
.scene{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.scene-before{background:radial-gradient(circle at 18% 78%,rgba(97,85,64,.35) 0 7%,transparent 8%),radial-gradient(circle at 84% 22%,rgba(97,85,64,.28) 0 6%,transparent 7%),radial-gradient(circle at 70% 85%,rgba(97,85,64,.25) 0 9%,transparent 10%),#C9C1AF}
.scene-after{background:#F5F3ED}
.win{position:relative;width:58%;aspect-ratio:4/3;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:16px;border-radius:14px}
.scene-before .win{background:#A69D89}
.scene-after .win{background:#FFFFFF;box-shadow:0 30px 60px rgba(54,77,64,.18)}
.pane{position:relative;overflow:hidden;border-radius:6px}
.scene-before .pane{background:repeating-linear-gradient(115deg,rgba(80,70,50,.16) 0 5px,transparent 5px 24px),radial-gradient(circle at 35% 40%,rgba(90,80,60,.4) 0 18%,transparent 19%),radial-gradient(circle at 70% 70%,rgba(90,80,60,.3) 0 14%,transparent 15%),linear-gradient(#9FA394,#BDB9A9)}
.scene-after .pane{background:linear-gradient(160deg,#CFE0D6 0%,#EEF4F0 60%,#FFFFFF 100%)}
.scene-after .pane::after{content:'';position:absolute;top:-20%;left:0;width:26%;height:140%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);animation:gleam 4s ease-in-out infinite}
.scene-after .pane:nth-child(2)::after{animation-delay:.6s}
.scene-after .pane:nth-child(3)::after{animation-delay:1.2s}
.scene-after .pane:nth-child(4)::after{animation-delay:1.8s}
.sill{position:absolute;left:12%;right:12%;bottom:12%;height:14px;border-radius:8px}
.scene-before .sill{background:#8F8672}
.scene-after .sill{background:#FFFFFF;box-shadow:0 10px 24px rgba(54,77,64,.12)}
.ba-tag{position:absolute;top:22px;z-index:3;padding:9px 16px;border-radius:999px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.ba-line{position:absolute;top:0;bottom:0;width:3px;margin-left:-1.5px;background:#FFFFFF;z-index:4;pointer-events:none;box-shadow:0 0 18px rgba(0,0,0,.25)}
.ba-knob{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:62px;height:62px;border-radius:50%;background:#FFFFFF;color:#364D40;display:flex;align-items:center;justify-content:center;animation:knob 2s ease-out infinite}
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:5}

/* ---------- Étapes ---------- */
.steps{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.steps-line{position:absolute;left:8%;right:8%;top:44px;height:2px;background:#DCE4D8}
.steps-line i{position:absolute;inset:0;background:#364D40;transform-origin:left}
.step{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}
.dot{position:relative;width:90px;height:90px;border-radius:50%;background:#FFFFFF;border:2px solid #364D40;display:flex;align-items:center;justify-content:center;font-family:Georgia,'Times New Roman',serif;font-size:34px;color:#364D40;transition:background .4s,color .4s,transform .5s cubic-bezier(.2,.8,.2,1)}
.step:hover .dot{background:#364D40;color:#FFFFFF;transform:scale(1.12) rotate(-8deg)}

/* ---------- Manifeste ---------- */
.mono-drift{position:absolute;width:520px;right:-140px;top:40px;opacity:.12;pointer-events:none}
.values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.val{position:relative;overflow:hidden;background:#FFFFFF;border-radius:28px;padding:40px 34px;display:flex;flex-direction:column;gap:16px;transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .55s,background .55s,color .55s}
.val:hover{transform:translateY(-10px);background:#364D40;color:#FFFFFF;box-shadow:0 30px 70px rgba(36,52,43,.25)}
.val-ico{width:60px;height:60px;border-radius:50%;background:#E6ECE3;color:#364D40;display:flex;align-items:center;justify-content:center;transition:transform .7s cubic-bezier(.2,.8,.2,1),background .5s}
.val:hover .val-ico{transform:rotate(180deg) scale(1.1);background:#8AA183;color:#24342B}

/* ---------- Contact ---------- */
.contact{position:relative;overflow:hidden;background:#364D40;color:#FFFFFF}
.contact-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}
.big-link{display:inline-flex;align-items:center;gap:14px;color:#FFFFFF;text-decoration:none;font-family:Georgia,'Times New Roman',serif;font-size:34px;min-height:48px;transition:color .3s,transform .4s}
.big-link:hover{color:#DCE4D8;transform:translateX(6px)}
.form{background:#F5F3ED;color:#364D40;border-radius:32px;padding:40px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;box-shadow:0 40px 90px rgba(0,0,0,.3)}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:13px;font-weight:700;letter-spacing:.06em}
.field input,.field select,.field textarea{font:inherit;font-size:16px;color:#24342B;background:#FFFFFF;border:1.5px solid #D6DDD2;border-radius:14px;padding:14px 16px;min-height:52px;transition:border-color .3s,box-shadow .3s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:#364D40;box-shadow:0 0 0 4px rgba(138,161,131,.35)}
.full{grid-column:1 / -1}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-erreurs{display:flex;flex-direction:column;gap:4px;background:#FBEDEA;color:#8A3B2E;border-radius:14px;padding:14px 16px;font-size:14px;font-weight:700}
.form-merci{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:48px 40px}
.merci-ico{width:60px;height:60px;border-radius:50%;background:#364D40;color:#FFFFFF;display:flex;align-items:center;justify-content:center;animation:popIn .7s cubic-bezier(.2,.8,.2,1) both}
.foot a{color:#DCE4D8;text-decoration:none}.foot a:hover{color:#FFFFFF}

/* ---------- Animations au défilement ---------- */
@supports (animation-timeline: view()){
.reveal{animation:reveal linear both;animation-timeline:view();animation-range:entry 0% cover 28%}
.reveal-l{animation:revealL linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
.reveal-r{animation:revealR linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
.grow{animation:grow linear both;animation-timeline:view();animation-range:entry 30% cover 55%}
.ink{animation:ink linear both;animation-timeline:view();animation-range:cover 22% cover 42%}
.drift{animation:drift linear both;animation-timeline:view()}
.pop{animation:popScroll linear both;animation-timeline:view();animation-range:entry 10% cover 35%}
}

/* ---------- Mobile ---------- */
@media (max-width:1000px){
.hero-grid,.split,.contact-grid{grid-template-columns:minmax(0,1fr)}
.nav-links{display:none}
.steps,.values{grid-template-columns:minmax(0,1fr)}
.steps-line{display:none}
.svc{padding:40px 28px;min-height:0}
.form{grid-template-columns:minmax(0,1fr);padding:28px}
.glass{display:none}
.badge{right:4px;width:120px;height:120px}
.badge svg.ring{width:104px;height:104px}
.wrap{padding:0 20px}
}

/* ---------- Mouvement réduit / désactivé ---------- */
.motion-off *,.motion-off *::before,.motion-off *::after{animation:none !important;transition:none !important}
.motion-off .mask>span{transform:none}
.motion-off .a-rise,.motion-off .nav,.motion-off .arch-zone,.motion-off .cue{opacity:1}
.motion-off .intro,.motion-off .squeegee,.motion-off .bubble,.motion-off .spark{display:none}
@media (prefers-reduced-motion: reduce){
.eclat *,.eclat *::before,.eclat *::after{animation:none !important;transition:none !important}
.mask>span{transform:none}
.a-rise,.nav,.arch-zone,.cue{opacity:1}
.intro,.squeegee,.bubble,.spark{display:none}
}