:root{
  --ink:#0d2f47; --ink-2:#153e58; --blue:#3f7fa7; --blue-soft:#6ca0bf; --line:#dbe6ed;
  --paper:#f7f8f8; --white:#fff; --shadow:0 28px 70px rgba(14,45,67,.16); --radius:24px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;color:var(--ink);background:#fff;font-family:Manrope,Arial,sans-serif;overflow-x:hidden} button,a{font:inherit} a{text-decoration:none;color:inherit} button{cursor:pointer}
.topbar{height:112px;display:flex;align-items:center;justify-content:space-between;padding:0 5.4vw;background:rgba(255,255,255,.96);position:sticky;top:0;z-index:40;border-bottom:1px solid rgba(13,47,71,.07);backdrop-filter:blur(18px)}
.brand img{width:172px;height:auto;display:block;image-rendering:auto}.nav{display:flex;align-items:center;gap:30px;font:700 12px/1 Plus Jakarta Sans,sans-serif;text-transform:uppercase;letter-spacing:.03em}.nav a{position:relative;padding:18px 0;color:#203d50;transition:.25s}.nav a:not(.nav-cta):after{content:"";position:absolute;left:0;right:100%;bottom:8px;height:2px;background:linear-gradient(90deg,#2f6f98,#76aac7);transition:right .3s}.nav a:hover:after,.nav a.active:after{right:0}.nav-cta{padding:15px 20px!important;color:#fff!important;background:linear-gradient(135deg,#356f96,#5f93b5);box-shadow:0 10px 30px rgba(45,106,146,.23);border-radius:3px}
.hero{min-height:620px;position:relative;overflow:hidden;display:flex;align-items:center}.hero-photo{position:absolute;inset:0;background-image:url('https://images.unsplash.com/photo-1768321902863-56fd5963a726?auto=format&fit=crop&fm=jpg&ixlib=rb-4.1.0&q=82&w=2600');background-size:cover;background-position:center 52%;transform:scale(1.015);filter:saturate(.92) contrast(1.03)}
.hero-blue{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,45,70,.96) 0%,rgba(14,57,82,.88) 28%,rgba(24,72,98,.58) 49%,rgba(20,61,84,.17) 68%,rgba(8,34,50,.08) 100%)}.hero-grain{position:absolute;inset:0;opacity:.13;background-image:radial-gradient(rgba(255,255,255,.32) .55px,transparent .55px);background-size:4px 4px;mix-blend-mode:soft-light}
.hero-content{position:relative;z-index:2;color:#fff;width:min(600px,48vw);margin-left:5.7vw;padding:64px 0}.eyebrow,.kicker{margin:0 0 12px;text-transform:uppercase;letter-spacing:.13em;font:700 13px Plus Jakarta Sans,sans-serif;color:#4f88ad}.hero .eyebrow{color:#dbeaf2}.hero h1{margin:0;font:800 clamp(42px,4.2vw,70px)/.95 Plus Jakarta Sans,sans-serif;letter-spacing:-.045em;text-transform:uppercase}.hero h1 span{font-weight:700}.accent-line{width:44px;height:3px;background:#7eacc7;margin:24px 0}.accent-line.dark{background:#4e83a4;margin:18px 0 20px}.hero h2{margin:0 0 18px;font:700 clamp(23px,2.2vw,34px)/1.22 Plus Jakarta Sans,sans-serif;text-transform:uppercase;color:#bcd1de}.hero-copy{max-width:550px;margin:0;font-size:16px;line-height:1.75;color:rgba(255,255,255,.93)}
.hero-facts{display:flex;gap:28px;margin:30px 0 28px}.fact{display:flex;align-items:center;gap:11px}.fact-icon{display:grid;place-items:center;width:36px;height:36px;border:1px solid rgba(255,255,255,.6);border-radius:50%;background:rgba(255,255,255,.12);backdrop-filter:blur(8px)}.fact strong,.fact small{display:block;text-transform:uppercase}.fact strong{font-size:12px}.fact small{font-size:10px;opacity:.88;margin-top:2px}.primary-btn,.secondary-btn,.cta-white{display:inline-flex;align-items:center;gap:18px;border:0;text-transform:uppercase;font:800 12px Plus Jakarta Sans,sans-serif;letter-spacing:.04em;transition:transform .25s,box-shadow .25s}.primary-btn{padding:16px 21px;color:#fff;background:linear-gradient(135deg,#3b7da8,#6ba0bf);box-shadow:0 14px 35px rgba(1,32,52,.25)}.primary-btn:hover{box-shadow:0 18px 45px rgba(1,32,52,.36)}.hero-signal{position:absolute;right:4vw;bottom:24px;display:flex;gap:6px;z-index:2}.hero-signal span{width:5px;height:5px;border-radius:50%;background:#fff;opacity:.5;animation:pulse 2s infinite}.hero-signal span:nth-child(2){animation-delay:.25s}.hero-signal span:nth-child(3){animation-delay:.5s}
.section-pad{padding:78px 5.7vw}.section-head{text-align:center;max-width:780px;margin:0 auto 42px}.section-head h2,.about h2,.reviews h2{margin:0;font:800 clamp(28px,3vw,43px)/1.18 Plus Jakarta Sans,sans-serif;letter-spacing:-.035em}.section-head>p:last-child{margin:13px auto 0;color:#5f7482;line-height:1.7}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1180px;margin:auto}.service-card{position:relative;overflow:hidden;min-height:300px;text-align:left;padding:34px;border:1px solid rgba(69,115,145,.18);border-radius:22px;background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(241,246,249,.82));box-shadow:0 20px 55px rgba(25,67,94,.08);color:var(--ink);transform-style:preserve-3d;transition:box-shadow .35s,border-color .35s,transform .15s}.service-card:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(106,160,191,.11),transparent 40%,rgba(255,255,255,.5));opacity:0;transition:.35s}.service-card:hover{box-shadow:0 30px 70px rgba(26,75,106,.17);border-color:rgba(75,132,168,.4)}.service-card:hover:before{opacity:1}.shine{position:absolute;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.95),rgba(120,174,205,.2) 35%,transparent 70%);filter:blur(2px);opacity:0;pointer-events:none;transform:translate(-50%,-50%);transition:opacity .25s}.service-card:hover .shine{opacity:.55}.service-icon{position:relative;display:grid;place-items:center;width:64px;height:64px;border-radius:18px;background:linear-gradient(145deg,rgba(67,125,160,.12),rgba(255,255,255,.7));box-shadow:inset 0 0 0 1px rgba(66,118,151,.16),0 14px 28px rgba(26,72,101,.1);margin-bottom:24px;transition:transform .35s,box-shadow .35s}.service-card:hover .service-icon{transform:translateY(-4px) scale(1.06);box-shadow:inset 0 0 0 1px rgba(66,118,151,.22),0 18px 36px rgba(26,72,101,.17)}.service-icon svg{width:36px;fill:none;stroke:#4a83a7;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}.service-title{position:relative;display:block;font:800 18px Plus Jakarta Sans,sans-serif;text-transform:uppercase;margin-bottom:10px}.service-text{position:relative;display:block;color:#667884;line-height:1.7;font-size:14px}.service-link{position:absolute;left:34px;bottom:30px;color:#477fa2;text-transform:uppercase;font:800 11px Plus Jakarta Sans,sans-serif;letter-spacing:.06em}.service-link b{margin-left:8px;transition:margin .25s}.service-card:hover .service-link b{margin-left:14px}
.about{display:grid;grid-template-columns:.82fr 1.18fr;min-height:430px;background:#fafbfb}.about-copy{padding:70px 5.7vw}.about-copy p{max-width:560px;color:#526b7a;line-height:1.7}.secondary-btn{margin-top:12px;padding:15px 19px;background:#497fa2;color:#fff}.values-panel{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:55px 5vw;background:linear-gradient(135deg,#0d3855,#0a2d46 70%,#0b3f61);color:#fff;overflow:hidden}.values-panel:after{content:"";position:absolute;inset:-40%;background:radial-gradient(circle at 40% 30%,rgba(92,157,196,.20),transparent 42%);pointer-events:none}.value-item{position:relative;z-index:1;display:flex;gap:18px;padding:24px;border-radius:18px;transition:.3s}.value-item:hover{background:rgba(255,255,255,.055);transform:translateY(-3px)}.value-symbol{font-size:30px;color:#a9c9dc}.value-item strong{text-transform:uppercase;font:800 13px Plus Jakarta Sans,sans-serif}.value-item p{font-size:13px;line-height:1.65;color:rgba(255,255,255,.83);margin:8px 0 0}
.realisations{background:#fff}.real-grid{max-width:1160px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.real-card{position:relative;padding:28px 28px 30px;border-top:1px solid #dce7ed;background:linear-gradient(180deg,#fff,#f8fafb);box-shadow:0 18px 46px rgba(14,55,81,.06)}.real-card span{font:800 11px Plus Jakarta Sans,sans-serif;color:#6e9ab5}.real-card h3{font:800 17px Plus Jakarta Sans,sans-serif;text-transform:uppercase}.real-card p{color:#657984;line-height:1.7;font-size:14px}
.reviews{padding:64px 5.7vw;background:linear-gradient(105deg,#184963,#2d678a 55%,#7ca8c1);color:white}.reviews-inner{max-width:1160px;margin:auto;display:grid;grid-template-columns:1.2fr .8fr;gap:55px;align-items:end}.kicker.light{color:#cae0ec}.review-note{margin:0;padding:22px 24px;border:1px solid rgba(255,255,255,.24);border-radius:18px;background:rgba(255,255,255,.08);backdrop-filter:blur(12px);line-height:1.7;color:rgba(255,255,255,.88)}
.cta-band{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;padding:30px 7vw;background:linear-gradient(90deg,#6f9bb7,#95b6ca);color:#fff}.cta-icon{font-size:42px}.cta-band h2{margin:0;font:800 26px Plus Jakarta Sans,sans-serif;text-transform:uppercase}.cta-band p{margin:5px 0 0}.cta-white{padding:16px 22px;background:#fff;color:#3e7293}
.footer{display:grid;grid-template-columns:1.05fr 1fr .8fr 1.25fr;gap:42px;padding:44px 5.7vw 26px;background:#0b3551;color:#dfeaf0;font-size:13px}.footer-logo img{width:160px;filter:brightness(0) invert(1);opacity:.95}.footer h3{font:700 13px Plus Jakarta Sans,sans-serif;text-transform:uppercase;letter-spacing:.06em;color:#fff}.footer p{margin:8px 0;line-height:1.55}.footer a{display:block;margin:9px 0}.footer-bottom{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.14);padding-top:18px;color:#9fb7c5}
.modal-shell{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px;visibility:hidden;opacity:0;transition:opacity .35s,visibility .35s}.modal-shell.open{visibility:visible;opacity:1}.modal-backdrop{position:absolute;inset:0;background:rgba(5,25,38,.50);backdrop-filter:blur(14px) saturate(.8)}.modal-card{position:relative;width:min(820px,92vw);max-height:86vh;overflow:auto;padding:54px 62px 44px;border-radius:28px;border:1px solid rgba(255,255,255,.44);background:linear-gradient(145deg,rgba(250,253,255,.88),rgba(235,244,249,.78));box-shadow:0 40px 120px rgba(1,20,32,.43),inset 0 1px 0 rgba(255,255,255,.8);backdrop-filter:blur(24px);transform:translateY(28px) scale(.94);opacity:0;transition:transform .45s cubic-bezier(.16,1,.3,1),opacity .35s;overflow-x:hidden}.modal-shell.open .modal-card{transform:translateY(0) scale(1);opacity:1}.modal-glow{position:absolute;inset:-20% 30% auto -20%;height:300px;background:radial-gradient(circle,rgba(84,151,191,.28),transparent 65%);pointer-events:none}.modal-close{position:absolute;right:22px;top:20px;width:42px;height:42px;border-radius:50%;border:1px solid rgba(15,56,81,.12);background:rgba(255,255,255,.5);font-size:28px;color:#315e78;transition:.25s}.modal-close:hover{transform:rotate(90deg);background:#fff}.modal-icon{position:relative;width:72px;height:72px;display:grid;place-items:center;border-radius:22px;background:linear-gradient(145deg,#3d7ca3,#74a6c2);color:#fff;font-size:30px;box-shadow:0 18px 42px rgba(44,105,144,.25);margin-bottom:24px}.modal-kicker{position:relative;text-transform:uppercase;letter-spacing:.14em;font:800 11px Plus Jakarta Sans,sans-serif;color:#5483a0}.modal-card h2{position:relative;margin:4px 0 0;font:800 clamp(30px,4vw,48px)/1.04 Plus Jakarta Sans,sans-serif;letter-spacing:-.04em;color:#123f59}.modal-line{width:48px;height:3px;background:#6194b2;margin:22px 0}.modal-body{position:relative;color:#38586b;line-height:1.78;font-size:15px}.modal-body p{margin:0 0 16px}.modal-body strong{color:#163f57}.modal-footer{margin-top:28px}.modal-footer a{display:inline-flex;gap:15px;align-items:center;padding:14px 18px;background:#356f95;color:#fff;text-transform:uppercase;font:800 11px Plus Jakarta Sans,sans-serif}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.75,.2,1)}.reveal.visible{opacity:1;transform:none}@keyframes pulse{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.25)}}
@media(max-width:1020px){.nav{gap:16px}.nav a:not(.nav-cta){display:none}.hero-content{width:72vw}.service-grid,.real-grid{grid-template-columns:1fr}.about{grid-template-columns:1fr}.values-panel{min-height:380px}.footer{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.topbar{height:84px;padding:0 20px}.brand img{width:126px}.nav-cta{font-size:10px;padding:12px 14px!important}.hero{min-height:690px}.hero-content{width:auto;margin:0 22px;padding:55px 0}.hero-blue{background:linear-gradient(90deg,rgba(8,45,70,.94),rgba(8,45,70,.70) 70%,rgba(8,45,70,.40))}.hero-facts{flex-direction:column;gap:12px}.section-pad{padding:58px 22px}.services .section-head{text-align:left}.service-card{min-height:280px}.about-copy{padding:58px 22px}.values-panel{grid-template-columns:1fr;padding:28px 18px}.reviews{padding:54px 22px}.reviews-inner{grid-template-columns:1fr;gap:28px}.cta-band{grid-template-columns:1fr;padding:30px 22px}.cta-icon{display:none}.footer{grid-template-columns:1fr;padding:38px 22px}.modal-card{padding:44px 25px 34px;border-radius:22px}.modal-icon{width:60px;height:60px}.modal-card h2{font-size:31px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* =========================================================
   V5 — Animation pass only. Existing layout/content retained.
   ========================================================= */
body.is-loading{overflow:hidden}
.topbar{background:#fff;transition:box-shadow .45s ease,transform .45s ease,border-color .45s ease}
.topbar.scrolled{box-shadow:0 12px 34px rgba(13,47,71,.10);border-bottom-color:rgba(13,47,71,.10)}
.brand{position:relative;isolation:isolate}
.brand img{position:relative;z-index:1}
.brand:after{content:"";position:absolute;left:12%;right:12%;bottom:-8px;height:2px;background:linear-gradient(90deg,transparent,rgba(86,171,222,.72),transparent);opacity:0;transform:scaleX(.25);filter:blur(.15px);transition:opacity .35s,transform .5s cubic-bezier(.16,1,.3,1)}
.brand:hover:after{opacity:1;transform:scaleX(1)}

/* Cinematic entrance: construction-grid -> logo -> site */
.site-intro{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:linear-gradient(135deg,#081f30 0%,#0c3450 52%,#102f43 100%);overflow:hidden;opacity:1;visibility:visible;transition:opacity .72s cubic-bezier(.4,0,.2,1),visibility .72s}
.site-intro:before,.site-intro:after{content:"";position:absolute;inset:-20%;pointer-events:none}
.site-intro:before{background:radial-gradient(circle at 50% 48%,rgba(83,169,219,.22),transparent 30%),radial-gradient(circle at 68% 34%,rgba(255,255,255,.07),transparent 18%);animation:introAura 2.6s ease-in-out infinite alternate}
.site-intro:after{background:linear-gradient(110deg,transparent 42%,rgba(112,197,245,.10) 49%,rgba(255,255,255,.18) 50%,rgba(112,197,245,.08) 51%,transparent 58%);transform:translateX(-70%);animation:introSweep 1.25s .18s cubic-bezier(.22,.61,.36,1) forwards}
.intro-grid{position:absolute;inset:0;opacity:.14;background-image:linear-gradient(rgba(117,187,226,.28) 1px,transparent 1px),linear-gradient(90deg,rgba(117,187,226,.28) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(circle at center,#000 0,transparent 72%);transform:perspective(700px) rotateX(58deg) scale(1.35) translateY(27%);transform-origin:center bottom;animation:gridRise 1.4s ease-out both}
.intro-beam{position:absolute;width:min(720px,78vw);height:1px;background:linear-gradient(90deg,transparent,#75c9f6 25%,#fff 50%,#75c9f6 75%,transparent);box-shadow:0 0 18px rgba(75,183,240,.85);transform:scaleX(0);animation:beamBuild .9s .28s cubic-bezier(.16,1,.3,1) forwards}
.intro-mark{position:relative;z-index:2;text-align:center;transform:translateY(12px) scale(.94);opacity:0;animation:introMark .85s .16s cubic-bezier(.16,1,.3,1) forwards}
.intro-mark img{width:min(270px,56vw);height:auto;display:block;margin:auto;filter:drop-shadow(0 16px 34px rgba(0,0,0,.24))}
.intro-line{display:block;width:0;height:2px;margin:20px auto 12px;background:linear-gradient(90deg,transparent,#7dcff7 22%,#fff 50%,#7dcff7 78%,transparent);box-shadow:0 0 16px rgba(74,183,239,.7);animation:introLine .7s .58s cubic-bezier(.16,1,.3,1) forwards}
.intro-mark p{margin:0;color:rgba(226,241,249,.82);font:600 10px Plus Jakarta Sans,sans-serif;text-transform:uppercase;letter-spacing:.18em;opacity:0;transform:translateY(5px);animation:introText .5s .72s ease forwards}
.site-intro.leave{opacity:0;visibility:hidden;pointer-events:none}

/* Hero arrives as if the chantier is being revealed. */
.hero-photo{background-image:url('assets/chantier-hero-hd.jpg');will-change:transform,clip-path;clip-path:inset(0 0 0 100%);transform:scale(1.07);transition:none}
body.page-ready .hero-photo{animation:heroPhotoReveal 1.18s .05s cubic-bezier(.16,1,.3,1) forwards}
.hero-blue{opacity:0;transform:translateX(-3%)}
body.page-ready .hero-blue{animation:heroBlueReveal 1.05s .24s cubic-bezier(.16,1,.3,1) forwards}
.hero-grain{opacity:0}
body.page-ready .hero-grain{animation:grainReveal .9s .52s ease forwards}
.hero-stage{opacity:1!important;transform:none!important}
.hero-in{opacity:0;transform:translateY(17px);filter:blur(5px)}
body.page-ready .hero-in{animation:heroItemIn .72s cubic-bezier(.16,1,.3,1) forwards}
body.page-ready .hero-in-1{animation-delay:.38s}body.page-ready .hero-in-2{animation-delay:.45s}body.page-ready .hero-in-3{animation-delay:.53s}body.page-ready .hero-in-4{animation-delay:.59s}body.page-ready .hero-in-5{animation-delay:.67s}body.page-ready .hero-in-6{animation-delay:.75s}body.page-ready .hero-in-7{animation-delay:.84s}
.topbar .brand,.topbar .nav>a{opacity:0;transform:translateY(-9px)}
body.page-ready .topbar .brand{animation:navIn .65s .22s cubic-bezier(.16,1,.3,1) forwards}
body.page-ready .topbar .nav>a{animation:navIn .62s cubic-bezier(.16,1,.3,1) forwards}
body.page-ready .topbar .nav>a:nth-child(1){animation-delay:.30s}body.page-ready .topbar .nav>a:nth-child(2){animation-delay:.35s}body.page-ready .topbar .nav>a:nth-child(3){animation-delay:.40s}body.page-ready .topbar .nav>a:nth-child(4){animation-delay:.45s}body.page-ready .topbar .nav>a:nth-child(5){animation-delay:.50s}body.page-ready .topbar .nav>a:nth-child(6){animation-delay:.55s}

/* Existing blue cursor feeling, extended gently across desktop. */
.cursor-halo{position:fixed;left:0;top:0;z-index:90;width:34px;height:34px;border:1px solid rgba(86,173,224,.50);border-radius:50%;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.72);transition:opacity .25s,transform .16s ease-out,width .22s,height .22s,border-color .22s,background .22s;mix-blend-mode:multiply}
.cursor-halo:before{content:"";position:absolute;inset:7px;border-radius:50%;background:rgba(83,173,225,.14);box-shadow:0 0 18px rgba(82,177,233,.32)}
.cursor-halo span{position:absolute;width:4px;height:4px;left:50%;top:50%;border-radius:50%;background:#54aee1;box-shadow:0 0 9px rgba(63,167,226,.8);transform:translate(-50%,-50%)}
.cursor-halo.visible{opacity:1;transform:translate(-50%,-50%) scale(1)}
.cursor-halo.active{width:48px;height:48px;border-color:rgba(79,171,222,.72);background:rgba(96,178,224,.055)}

/* Living service / value cards, without changing their layout. */
.service-card,.value-item,.real-card{will-change:transform}
.service-card:after{content:"";position:absolute;left:-38%;right:-38%;top:-2px;height:2px;background:linear-gradient(90deg,transparent,rgba(78,176,233,.0),rgba(95,190,241,.95),rgba(255,255,255,.96),rgba(95,190,241,.95),transparent);opacity:0;transform:translateX(-36%);transition:opacity .2s}
.service-card:hover:after{opacity:.9;animation:edgeScan 1.35s cubic-bezier(.2,.7,.2,1) infinite}
.service-card:hover .service-title{color:#255f83;text-shadow:0 0 18px rgba(73,154,201,.12)}
.service-card:hover .service-icon{animation:iconFloat 2.1s ease-in-out infinite}
.value-symbol{transition:transform .35s,text-shadow .35s,color .35s}.value-item:hover .value-symbol{transform:translateY(-3px) scale(1.08);color:#d9f1ff;text-shadow:0 0 20px rgba(98,192,244,.55)}
.real-card:after{content:"";position:absolute;left:0;top:0;width:0;height:1px;background:linear-gradient(90deg,#4a92bd,#8ec8e8);box-shadow:0 0 10px rgba(81,164,213,.55);transition:width .55s cubic-bezier(.16,1,.3,1)}.real-card:hover:after{width:100%}

/* Small neon motion only on important actions. */
.neon-action{position:relative;overflow:hidden;isolation:isolate}
.neon-action:before{content:"";position:absolute;top:-80%;left:-42%;width:28%;height:260%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.52),transparent);transform:rotate(18deg) translateX(-180%);transition:none;z-index:-1}
.neon-action:hover:before{animation:buttonSweep .82s ease-out}
.nav-cta{box-shadow:0 10px 30px rgba(45,106,146,.23),0 0 0 rgba(92,187,239,0);transition:box-shadow .35s,transform .25s}
.nav-cta:hover{box-shadow:0 12px 34px rgba(45,106,146,.28),0 0 24px rgba(92,187,239,.20)}
.accent-line{position:relative;overflow:visible}.accent-line:after{content:"";position:absolute;left:0;top:0;width:12px;height:100%;background:#d9f4ff;box-shadow:0 0 10px #8bd5fb;opacity:.0}.hero:hover .accent-line:after{animation:lineSpark 2.6s ease-in-out infinite}

/* Modal: centred zoom, blur, staged content and subtle living motion. */
.modal-shell{perspective:1200px}
.modal-backdrop{opacity:0;transition:opacity .42s ease,backdrop-filter .42s ease;background:radial-gradient(circle at 50% 45%,rgba(18,58,82,.30),rgba(5,25,38,.58));backdrop-filter:blur(0px) saturate(1)}
.modal-shell.open .modal-backdrop{opacity:1;backdrop-filter:blur(16px) saturate(.82)}
.modal-card{transform:translateY(24px) scale(.84) rotateX(3deg);filter:blur(5px);transform-origin:50% 55%;transition:transform .62s cubic-bezier(.16,1,.3,1),opacity .35s ease,filter .55s ease;box-shadow:0 46px 140px rgba(1,20,32,.46),0 0 0 1px rgba(121,199,241,.14),inset 0 1px 0 rgba(255,255,255,.82)}
.modal-card:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(125deg,rgba(255,255,255,.82),rgba(85,181,234,.42),rgba(255,255,255,.12),rgba(86,179,231,.38));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.7}
.modal-card:after{content:"";position:absolute;top:-30%;left:-15%;width:30%;height:165%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);transform:rotate(12deg) translateX(-240%);pointer-events:none}
.modal-shell.open .modal-card{transform:translateY(0) scale(1) rotateX(0);filter:blur(0);animation:modalBreath 5.6s .78s ease-in-out infinite}
.modal-shell.open .modal-card:after{animation:modalGlassSweep 1.05s .2s ease-out both}
.modal-piece{opacity:0;transform:translateY(13px)}
.modal-shell.open .modal-piece{animation:modalPieceIn .55s cubic-bezier(.16,1,.3,1) forwards}
.modal-shell.open .modal-icon{animation-delay:.22s}.modal-shell.open .modal-kicker{animation-delay:.29s}.modal-shell.open #modalTitle{animation-delay:.34s}.modal-shell.open .modal-line{animation-delay:.40s}.modal-shell.open .modal-body{animation-delay:.45s}.modal-shell.open .modal-footer{animation-delay:.52s}
.modal-glow{animation:modalGlowDrift 6s ease-in-out infinite alternate}
.modal-icon{box-shadow:0 18px 42px rgba(44,105,144,.25),0 0 26px rgba(81,180,233,.14)}
.modal-line{box-shadow:0 0 12px rgba(91,184,235,.30)}

@keyframes introAura{from{transform:translate3d(-1%,1%,0) scale(.98)}to{transform:translate3d(1%,-1%,0) scale(1.04)}}
@keyframes introSweep{to{transform:translateX(70%)}}
@keyframes gridRise{from{opacity:0;transform:perspective(700px) rotateX(58deg) scale(1.55) translateY(37%)}to{opacity:.14;transform:perspective(700px) rotateX(58deg) scale(1.35) translateY(27%)}}
@keyframes beamBuild{to{transform:scaleX(1)}}
@keyframes introMark{to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes introLine{to{width:min(260px,50vw)}}
@keyframes introText{to{opacity:1;transform:none}}
@keyframes heroPhotoReveal{0%{clip-path:inset(0 0 0 100%);transform:scale(1.07)}100%{clip-path:inset(0);transform:scale(1.015)}}
@keyframes heroBlueReveal{to{opacity:1;transform:none}}
@keyframes grainReveal{to{opacity:.13}}
@keyframes heroItemIn{to{opacity:1;transform:none;filter:blur(0)}}
@keyframes navIn{to{opacity:1;transform:none}}
@keyframes edgeScan{0%{transform:translateX(-36%)}100%{transform:translateX(42%)}}
@keyframes iconFloat{0%,100%{transform:translateY(-4px) scale(1.06)}50%{transform:translateY(-8px) scale(1.075)}}
@keyframes buttonSweep{to{transform:rotate(18deg) translateX(620%)}}
@keyframes lineSpark{0%,100%{left:0;opacity:0}12%{opacity:.9}52%{left:36px;opacity:.8}67%,100%{left:44px;opacity:0}}
@keyframes modalPieceIn{to{opacity:1;transform:none}}
@keyframes modalBreath{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.002)}}
@keyframes modalGlassSweep{to{transform:rotate(12deg) translateX(520%)}}
@keyframes modalGlowDrift{from{transform:translate3d(-2%,0,0) scale(.96);opacity:.7}to{transform:translate3d(5%,4%,0) scale(1.05);opacity:1}}

@media(pointer:coarse){.cursor-halo{display:none}}
@media(max-width:700px){.site-intro .intro-mark img{width:190px}.intro-mark p{font-size:8px;letter-spacing:.11em;padding:0 24px}.modal-shell.open .modal-card{animation:none}.cursor-halo{display:none}}
@media(prefers-reduced-motion:reduce){.site-intro{display:none}.topbar .brand,.topbar .nav>a,.hero-in,.hero-photo,.hero-blue,.hero-grain,.modal-piece{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}.cursor-halo{display:none!important}}


/* VERSION 6 — retouches ciblées : entrée propre, triptyque chantier, modal stable */
.intro-mark img,
.brand img{
  background:transparent!important;
  box-shadow:none!important;
}
.intro-mark{
  isolation:isolate;
}
.intro-mark:before,
.intro-mark:after{
  display:none!important;
}

/* Le hero conserve exactement ses overlays et sa mise en page ; seule la photo devient un triptyque. */
.hero-photo.hero-triptych{
  background:none!important;
  filter:none!important;
  overflow:hidden;
  clip-path:inset(0 0 0 100%);
  transform:scale(1.025);
}
body.page-ready .hero-photo.hero-triptych{
  animation:heroPhotoReveal 1.18s .05s cubic-bezier(.16,1,.3,1) forwards;
}
.hero-triptych .hero-phase{
  position:absolute;
  top:-2%;
  bottom:-2%;
  background-size:cover;
  background-position:center;
  transform:scale(1.035);
  will-change:transform;
}
.hero-phase-raw{
  left:-1%;
  width:37%;
  background-image:url('https://images.unsplash.com/photo-1768321915878-84ae4e46f943?auto=format&fit=crop&fm=jpg&ixlib=rb-4.1.0&q=82&w=2400');
  background-position:center 48%;
  clip-path:polygon(0 0,92% 0,100% 100%,0 100%);
}
.hero-phase-build{
  left:31%;
  width:39%;
  background-image:url('https://images.unsplash.com/photo-1768321910174-6f55899299a2?auto=format&fit=crop&fm=jpg&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&ixlib=rb-4.1.0&q=82&w=2400');
  background-position:center 50%;
  clip-path:polygon(8% 0,92% 0,100% 100%,0 100%);
}
.hero-phase-finish{
  right:-1%;
  width:38%;
  background-image:url('https://images.unsplash.com/photo-1762811003338-aef30274513b?auto=format&fit=crop&fm=jpg&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&ixlib=rb-4.1.0&q=82&w=2400');
  background-position:center 52%;
  clip-path:polygon(8% 0,100% 0,100% 100%,0 100%);
}
.hero-triptych:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(4,25,40,.05),rgba(255,255,255,.015) 50%,rgba(4,25,40,.04));
}
.hero-slash{
  position:absolute;
  top:-10%;
  width:2px;
  height:120%;
  z-index:3;
  background:linear-gradient(180deg,transparent 2%,rgba(255,255,255,.68) 22%,rgba(126,202,243,.54) 50%,rgba(255,255,255,.44) 78%,transparent 98%);
  box-shadow:0 0 18px rgba(90,188,240,.28);
  transform:rotate(-5deg);
  opacity:.72;
}
.hero-slash-one{left:34.1%}
.hero-slash-two{left:66.1%}
body.page-ready .hero-phase-raw{animation:phaseSettle 1.5s .18s cubic-bezier(.16,1,.3,1) both}
body.page-ready .hero-phase-build{animation:phaseSettle 1.6s .28s cubic-bezier(.16,1,.3,1) both}
body.page-ready .hero-phase-finish{animation:phaseSettle 1.7s .38s cubic-bezier(.16,1,.3,1) both}
@keyframes phaseSettle{from{transform:scale(1.095)}to{transform:scale(1.035)}}

/* Ouverture : zoom doux, puis fenêtre parfaitement stable et lisible. */
.modal-card{
  transform:translateY(16px) scale(.90)!important;
  filter:blur(2px)!important;
  transition:transform .58s cubic-bezier(.16,1,.3,1),opacity .34s ease,filter .42s ease!important;
}
.modal-shell.open .modal-card{
  transform:translateY(0) scale(1)!important;
  filter:blur(0)!important;
  animation:none!important;
}
.modal-glow{
  animation:none!important;
}
.modal-shell.open .modal-card:after{
  animation:modalGlassSweep .9s .12s ease-out both!important;
}

@media(max-width:700px){
  .hero-phase-raw{left:-10%;width:52%}
  .hero-phase-build{left:35%;width:42%}
  .hero-phase-finish{right:-12%;width:44%}
  .hero-slash-one{left:39%}.hero-slash-two{left:69%}
}


/* VERSION 7 — corrections ciblées uniquement : logo d'intro supprimé, footer propre, hero avant/après à 2 vues */
/* L'intro conserve son animation de fond et de révélation, mais aucun logo n'y est affiché. */
.intro-mark-no-logo{
  min-width:min(460px,78vw);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
}
.intro-mark-no-logo .intro-line{
  display:block;
  height:2px;
  width:0;
  margin:0;
  background:linear-gradient(90deg,transparent,rgba(125,210,255,.95),rgba(255,255,255,.96),rgba(125,210,255,.95),transparent);
  box-shadow:0 0 16px rgba(90,190,241,.34);
  animation:introLine .78s .30s cubic-bezier(.16,1,.3,1) forwards;
}
.intro-mark-no-logo p{margin:0}

/* Footer : aucun bitmap, donc aucun carré/pixel parasite. Marque secondaire blanche/bleu ciel dessinée en CSS. */
.footer-logo{display:flex;align-items:flex-start;justify-content:flex-start}
.footer-brandmark{position:relative;display:inline-flex;flex-direction:column;align-items:center;padding-top:25px;line-height:1;filter:drop-shadow(0 8px 18px rgba(0,0,0,.14))}
.footer-brandmark strong{
  font:800 58px/.82 "Plus Jakarta Sans",sans-serif;
  letter-spacing:-.075em;
  background:linear-gradient(180deg,#ffffff 4%,#f6fbff 58%,#8fd4fa 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.footer-brandmark small{
  margin-top:10px;
  font:700 12px/1 "Plus Jakarta Sans",sans-serif;
  letter-spacing:.22em;
  color:#eaf8ff;
}
.footer-roof{position:absolute;left:50%;top:1px;width:92px;height:38px;transform:translateX(-50%)}
.footer-roof:before,.footer-roof:after{content:"";position:absolute;top:12px;width:58px;height:4px;border-radius:5px;background:linear-gradient(90deg,#ffffff,#8ed6fc);box-shadow:0 0 9px rgba(120,209,255,.20)}
.footer-roof:before{right:44px;transform:rotate(-34deg);transform-origin:right center}
.footer-roof:after{left:44px;transform:rotate(34deg);transform-origin:left center}

/* Hero : deux photos seulement, pensées comme une même évolution de chantier. */
.hero-photo.hero-triptych{background:#8a8f91!important}
.hero-triptych .hero-phase{top:-2%;bottom:-2%;filter:saturate(.96) contrast(1.04) brightness(1.02)}
.hero-phase-raw{
  left:-1%;width:61%;
  background-image:url('https://images.unsplash.com/photo-1768321912023-7807cf0a11e5?auto=format&fit=crop&fm=jpg&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&ixlib=rb-4.1.0&q=82&w=2600');
  background-position:center 48%;
  clip-path:polygon(0 0,100% 0,88% 100%,0 100%);
}
.hero-phase-finish{
  right:-1%;width:50%;
  background-image:url('https://images.unsplash.com/photo-1625334783132-bbf53a38e026?fm=jpg&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDV8fHxlbnwwfHx8fHw%3D&ixlib=rb-4.1.0&q=82&w=3000');
  background-position:center 50%;
  clip-path:polygon(16% 0,100% 0,100% 100%,0 100%);
}
.hero-slash-one{
  left:56.2%;
  top:-12%;
  width:3px;
  height:124%;
  transform:rotate(6.6deg);
  border-radius:999px;
  background:linear-gradient(180deg,transparent 1%,rgba(255,255,255,.92) 14%,rgba(122,208,252,.95) 48%,rgba(255,255,255,.82) 82%,transparent 99%);
  box-shadow:0 0 7px rgba(255,255,255,.28),0 0 20px rgba(74,181,237,.36),0 0 42px rgba(74,181,237,.14);
  opacity:.82;
}
.hero-slash-one:before,.hero-slash-one:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.hero-slash-one:before{left:-7px;width:1px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.19),transparent)}
.hero-slash-one:after{left:8px;width:1px;background:linear-gradient(180deg,transparent,rgba(68,174,232,.18),transparent)}
.hero-triptych:after{background:linear-gradient(90deg,rgba(4,25,40,.03),rgba(255,255,255,.01) 55%,rgba(4,25,40,.025))}
body.page-ready .hero-phase-raw{animation:phaseSettle 1.55s .18s cubic-bezier(.16,1,.3,1) both}
body.page-ready .hero-phase-finish{animation:phaseSettle 1.65s .28s cubic-bezier(.16,1,.3,1) both}

/* V6 avait déjà neutralisé le tremblement : on verrouille ce comportement. */
.modal-shell.open .modal-card{animation:none!important;transform:translateY(0) scale(1)!important;filter:blur(0)!important}

@media(max-width:700px){
  .hero-phase-raw{left:-12%;width:75%;background-position:58% center}
  .hero-phase-finish{right:-18%;width:58%;background-position:42% center}
  .hero-slash-one{left:61%}
  .footer-brandmark strong{font-size:52px}
}

/* VERSION 10 — DEUX CORRECTIONS CIBLÉES UNIQUEMENT
   1) logo footer fidèle au logo officiel du header ;
   2) une seule photo hero professionnelle.
   Tout le reste reste celui de la V7 validée. */

/* Footer : même géométrie que le logo officiel, recolorée pour le fond bleu. */
.footer-brandmark,.footer-roof{display:none!important}
.footer-logo{display:flex;align-items:flex-start;justify-content:flex-start}
.footer-logo-img{
  display:block;
  width:154px;
  height:auto;
  object-fit:contain;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.14));
}

/* Hero : une seule photographie. Le HTML, le dégradé .hero-blue,
   le grain, les textes et les animations V7 restent inchangés. */
.hero-photo.hero-triptych{background:#8a8f91!important}
.hero-triptych .hero-phase-raw{
  display:block!important;
  left:0!important;
  right:0!important;
  top:-2%!important;
  bottom:-2%!important;
  width:100%!important;
  clip-path:none!important;
  background-image:url('https://images.unsplash.com/photo-1768321902863-56fd5963a726?auto=format&fit=crop&fm=jpg&q=88&w=3200&h=1500&crop=focalpoint&fp-x=.56&fp-y=.50')!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  filter:saturate(.98) contrast(1.04) brightness(1.04)!important;
}
.hero-triptych .hero-phase-finish,
.hero-triptych .hero-slash-one,
.hero-triptych .hero-slash-two{display:none!important}
.hero-triptych:after{background:linear-gradient(90deg,rgba(4,25,40,.03),rgba(255,255,255,.01) 55%,rgba(4,25,40,.025))!important}

@media(max-width:700px){
  .hero-triptych .hero-phase-raw{
    left:0!important;
    width:100%!important;
    background-position:58% center!important;
  }
  .footer-logo-img{width:142px}
}

/* VERSION 11 — corrections strictement ciblées à partir de la V10
   1) pictogrammes du hero conformes à la maquette ;
   2) lisibilité du titre "Nos prestations" ;
   3) pictogrammes discrets dans le footer.
   Aucun JavaScript, animation, fond, structure de section ou autre élément n'est modifié. */

/* 1 — Hero : seuls les trois pictogrammes sont redessinés. */
.hero-facts .fact-icon{
  width:40px;
  height:40px;
  flex:0 0 40px;
  border:1px solid rgba(255,255,255,.92);
  border-radius:50%;
  background:#fff;
  color:#5e95b7;
  box-shadow:0 7px 18px rgba(4,31,48,.12);
  backdrop-filter:none;
}
.hero-facts .fact-icon svg{
  width:22px;
  height:22px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* 2 — Services : le titre reste sur une ligne quand l'espace le permet. */
.services .section-head h2{
  width:min(1000px,88vw);
  max-width:none;
  margin-left:50%;
  transform:translateX(-50%);
  white-space:nowrap;
  letter-spacing:-.028em;
  text-align:center;
}
@media(max-width:900px){
  .services .section-head h2{
    width:auto;
    max-width:100%;
    margin-left:0;
    transform:none;
    white-space:normal;
    text-align:center;
  }
}

/* 3 — Footer : pictogrammes fins, alignés et homogènes, sans changer la grille. */
.footer .footer-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.footer p.footer-row{margin:8px 0}
.footer a.footer-row{display:flex;margin:9px 0}
.footer .footer-item-icon{
  width:16px;
  height:16px;
  flex:0 0 16px;
  display:grid;
  place-items:center;
  margin-top:1px;
  color:#9fd4f1;
  opacity:.96;
}
.footer .footer-item-icon svg{
  width:15px;
  height:15px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.footer .footer-row > span:last-child{
  min-width:0;
}

/* VERSION 13 — reconstruction strictement ciblée du bloc Valeurs.
   Référence : maquette validée. Aucune règle ci-dessous ne cible une autre section. */
.values-panel{
  align-self:stretch;
  margin:0;
  min-width:0;
  min-height:0;
  padding:44px 48px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(2,auto);
  align-content:center;
  gap:16px 0;
  color:#fff;
  overflow:hidden;
  border-radius:14px;
  background:
    linear-gradient(135deg,rgba(8,49,76,.985) 0%,rgba(10,63,94,.975) 52%,rgba(17,79,108,.965) 100%);
  box-shadow:0 16px 38px rgba(7,37,57,.14);
}
.values-panel:after{
  content:"";
  position:absolute;
  inset:-28%;
  pointer-events:none;
  background:
    radial-gradient(circle at 22% 18%,rgba(152,211,242,.13),transparent 38%),
    radial-gradient(circle at 88% 82%,rgba(80,152,193,.10),transparent 42%);
}
.values-panel .value-item{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  min-width:0;
  gap:24px;
  padding:20px 32px 20px 0;
  border-radius:12px;
}
.values-panel .value-item:nth-child(2),
.values-panel .value-item:nth-child(4){
  padding-right:0;
  padding-left:38px;
}
.values-panel .value-item:nth-child(2)::before,
.values-panel .value-item:nth-child(4)::before{
  content:"";
  position:absolute;
  left:0;
  top:15%;
  width:1px;
  height:70%;
  background:rgba(214,237,249,.25);
  pointer-events:none;
}
.values-panel .value-symbol{
  width:72px;
  height:72px;
  flex:0 0 72px;
  display:grid;
  place-items:center;
  color:#edf9ff;
  font-size:0;
  line-height:0;
  text-shadow:none;
}
.values-panel .value-symbol svg{
  display:block;
  width:68px;
  height:68px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
  overflow:visible;
}
.values-panel .value-content{
  min-width:0;
  flex:1 1 auto;
}
.values-panel .value-item strong{
  display:block;
  margin:0;
  color:#fff;
  text-transform:uppercase;
  font:800 14px/1.2 "Plus Jakarta Sans",sans-serif;
  letter-spacing:.025em;
}
.values-panel .value-item p{
  width:auto;
  max-width:275px;
  margin:10px 0 0;
  color:rgba(255,255,255,.94);
  font-size:13.5px;
  line-height:1.58;
}

@media(max-width:1180px){
  .values-panel{
    padding:38px 34px;
  }
  .values-panel .value-item{
    gap:20px;
    padding-right:24px;
  }
  .values-panel .value-item:nth-child(2),
  .values-panel .value-item:nth-child(4){
    padding-left:28px;
  }
  .values-panel .value-symbol{
    width:64px;
    height:64px;
    flex-basis:64px;
  }
  .values-panel .value-symbol svg{
    width:60px;
    height:60px;
  }
  .values-panel .value-item p{
    font-size:13px;
  }
}

@media(max-width:1020px){
  .values-panel{
    align-self:auto;
    margin:0 5.7vw 46px;
    padding:38px 42px;
    min-height:0;
  }
}

@media(max-width:760px){
  .values-panel{
    grid-template-columns:1fr;
    grid-template-rows:auto;
    gap:0;
    margin:0 22px 38px;
    padding:24px 22px;
    border-radius:14px;
  }
  .values-panel .value-item,
  .values-panel .value-item:nth-child(2),
  .values-panel .value-item:nth-child(4){
    gap:20px;
    padding:22px 8px;
  }
  .values-panel .value-item:nth-child(2)::before,
  .values-panel .value-item:nth-child(4)::before{
    display:none;
  }
  .values-panel .value-item + .value-item{
    border-top:1px solid rgba(214,237,249,.18);
  }
  .values-panel .value-symbol{
    width:58px;
    height:58px;
    flex-basis:58px;
  }
  .values-panel .value-symbol svg{
    width:54px;
    height:54px;
  }
  .values-panel .value-item strong{
    font-size:13.5px;
  }
  .values-panel .value-item p{
    max-width:none;
    font-size:13px;
    line-height:1.55;
  }
  .values-panel .value-item p br{
    display:none;
  }
}