:root{
  --petrol:#0b3b45; --petrol-dark:#062226; --turquoise:#1fb6b0; --turquoise-light:#5fd6cf;
  --grey:#f4f7f7; --grey-mid:#e4eaea; --ink:#0f2224; --white:#fff;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth; scroll-padding-top:80px;}
body{font-family:'Segoe UI',Arial,sans-serif; color:var(--ink); background:var(--white); overflow-x:hidden;}
img{max-width:100%; display:block;}
a{text-decoration:none; color:inherit;}
.container{max-width:1180px; margin:0 auto; padding:0 24px;}
.wrap-x{overflow-x:auto;}

/* HEADER */
header{position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(255,255,255,.97); box-shadow:0 2px 14px rgba(0,0,0,.06); padding-top:env(safe-area-inset-top,0px);}
.nav{display:flex; align-items:center; justify-content:space-between; height:74px; max-width:1180px; margin:0 auto; padding:0 24px;}
.nav img.logo{height:42px; width:auto;}
.nav-links{display:flex; gap:28px; list-style:none; font-size:15px; font-weight:600; color:var(--petrol);}
.nav-links a:hover{color:var(--turquoise);}
.nav-right{display:flex; align-items:center; gap:14px;}
.btn-cta{background:var(--turquoise); color:#fff; border:none; padding:12px 22px; border-radius:30px; font-weight:700; font-size:14px; cursor:pointer; white-space:nowrap;}
.btn-cta:hover{background:#189991;}
.phone-ic{width:40px;height:40px;border-radius:50%;background:var(--petrol);display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;}
.burger{display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none;}
.burger span{width:26px;height:3px;background:var(--petrol);border-radius:2px;}
.mobile-menu{display:none; flex-direction:column; gap:0; background:#fff; position:fixed; top:74px; left:0; right:0; padding:10px 24px 20px; box-shadow:0 8px 14px rgba(0,0,0,.08);}
.mobile-menu a{padding:12px 0; border-bottom:1px solid var(--grey-mid); font-weight:600; color:var(--petrol);}
.mobile-menu.open{display:flex;}
@media(max-width:880px){
  .nav-links{display:none;}
  .burger{display:flex;}
  .nav-right .btn-cta span.long{display:none;}
}
@media(max-width:400px){
  .nav{height:64px;}
  .nav img.logo{height:32px;}
  .btn-cta{padding:9px 14px; font-size:13px;}
  .phone-ic{width:34px; height:34px; font-size:15px;}
  .nav-right{gap:8px;}
  .hero{margin-top:64px;}
}

/* HERO */
.hero{position:relative; margin-top:74px; min-height:640px; display:flex; align-items:center; justify-content:center; background-size:cover; background-position:center;}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,34,38,.72),rgba(6,34,38,.6));}
.hero-inner{position:relative; z-index:2; text-align:center; color:#fff; padding:60px 20px;}
.hero-inner img.hlogo{height:76px; margin:0 auto 14px; filter:drop-shadow(0 4px 10px rgba(0,0,0,.4));}
.hero-sub{font-size:15px; letter-spacing:.3px; opacity:.92; margin-bottom:4px;}
.hero-sub2{font-size:13px; color:var(--turquoise-light); font-weight:600; margin-bottom:26px;}
.hero h1{font-size:clamp(28px,4.4vw,46px); line-height:1.2; font-weight:800; max-width:680px; margin:0 auto 18px;}
.hero h1 .accent{color:var(--turquoise-light);}
.hero p.lead{max-width:560px; margin:0 auto 30px; font-size:16px; opacity:.9; line-height:1.55;}
.btn-hero{background:var(--turquoise); color:#fff; border:none; padding:16px 30px; border-radius:32px; font-size:16px; font-weight:700; cursor:pointer;}
.btn-hero:hover{background:#189991;}

.hero{margin-top:74px; display:block; min-height:0; background:#fff;}
.hero::after{display:none;}
.hero{padding:22px 20px 0;}
.hero img.cover{width:100%; max-width:1120px; margin:0 auto; height:auto; min-height:180px; object-fit:cover; display:block; border-radius:24px; box-shadow:0 12px 34px rgba(11,59,69,.22);}
@media(max-width:620px){.hero{padding:14px 12px 0;} .hero img.cover{border-radius:16px;}}
.intro{text-align:center; padding:44px 20px 50px; background:#fff;}
.intro h1{font-size:clamp(28px,4.4vw,44px); line-height:1.2; font-weight:800; color:var(--petrol); max-width:680px; margin:0 auto 16px;}
.intro h1 .accent{color:var(--turquoise);}
.intro .lead{max-width:560px; margin:0 auto 28px; font-size:16px; color:#4a5b5c; line-height:1.55;}
/* TRUST BAND */
.trust{background:#fff; padding:34px 0; border-bottom:1px solid var(--grey-mid);}
.trust .container{display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px;}
.trust-item{display:flex; align-items:center; gap:10px; font-weight:600; font-size:14.5px; color:var(--petrol); flex:1 1 200px;}
.trust-item .ic{color:var(--turquoise); display:flex;}

/* SECTION TITLES */
.sect{padding:70px 0;}
.sect-head{text-align:center; max-width:600px; margin:0 auto 44px;}
.sect-head h2{font-size:clamp(26px,3vw,34px); color:var(--petrol); font-weight:800; margin-bottom:10px;}
.sect-head p{color:#5a6b6c; font-size:15.5px;}

/* SERVICES */
.services{background:var(--grey);}
.grid9{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media(max-width:900px){.grid9{grid-template-columns:repeat(2,1fr);}}
@media(max-width:620px){.grid9{grid-template-columns:repeat(2,1fr); gap:10px;}}
@media(max-width:400px){.grid9{grid-template-columns:1fr;}}
.card{background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 6px 20px rgba(11,59,69,.08); display:flex; flex-direction:column;}
.card .cimg{height:46px; width:46px; border-radius:11px; background:linear-gradient(135deg,var(--petrol),var(--turquoise)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:19px; margin:16px 0 2px 16px;}
.card .cimg svg{width:20px; height:20px;}
.card h3{padding:8px 16px 0; font-size:15.5px; color:var(--petrol);}
.card p{padding:5px 16px 2px; font-size:12.5px; color:#5a6b6c; line-height:1.45; flex:1;}
.card .clink{padding:4px 16px 16px; color:var(--turquoise); font-weight:700; font-size:12.5px; cursor:pointer;}

.card{cursor:pointer; transition:transform .25s ease, box-shadow .25s ease; outline:none;}
.card:hover,.card:focus-visible{transform:translateY(-6px); box-shadow:0 14px 30px rgba(11,59,69,.18);}
.card:focus-visible{box-shadow:0 0 0 3px var(--turquoise), 0 14px 30px rgba(11,59,69,.18);}
.card:hover .clink,.card:focus-visible .clink{letter-spacing:.3px;}

/* REALISATIONS */
.realisations{background:var(--grey);}
.gal-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
@media(max-width:900px){.gal-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.gal-grid{grid-template-columns:1fr;}}
.gal-item{border-radius:16px; overflow:hidden; box-shadow:0 8px 20px rgba(11,59,69,.10); background:#fff;}
.gal-item img{width:100%; height:210px; object-fit:cover; display:block;}
.gal-item p{padding:12px 14px; font-size:13.5px; color:var(--petrol); font-weight:600; line-height:1.4;}
/* WHY */
.why{background:var(--petrol-dark); color:#fff; padding:70px 0; text-align:center;}
.why .eyebrow{color:var(--turquoise-light); font-weight:700; font-size:13px; margin-bottom:12px;}
.why h2{font-size:clamp(26px,3vw,32px); margin-bottom:14px;}
.why p{max-width:600px; margin:0 auto 40px; opacity:.85; font-size:15.5px;}
.why-grid{display:flex; flex-wrap:wrap; justify-content:center; gap:40px;}
.why-item{display:flex; flex-direction:column; align-items:center; gap:10px; font-weight:600; font-size:15px; width:150px;}
.why-item .ic{width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; color:var(--turquoise-light); font-size:22px;}

/* CONTACT */
.contact{padding:70px 0;}
.contact .row{display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:start;}
@media(max-width:820px){.contact .row{grid-template-columns:1fr;}}
.contact .eyebrow{color:var(--turquoise); font-weight:700; font-size:13px; margin-bottom:10px;}
.contact h2{font-size:28px; color:var(--petrol); margin-bottom:14px;}
.contact p.lead2{color:#5a6b6c; margin-bottom:26px; font-size:15px;}
.cline{display:flex; align-items:center; gap:14px; margin-bottom:16px; font-weight:700; color:var(--petrol);}
.cline .ic{width:42px;height:42px;border-radius:50%;background:var(--grey-mid); display:flex; align-items:center; justify-content:center; color:var(--turquoise);}
.cbtns{display:flex; gap:14px; margin-top:20px; flex-wrap:wrap;}
.cbtns a{padding:13px 22px; border-radius:30px; font-weight:700; font-size:14px;}
.cbtns .fill{background:var(--turquoise); color:#fff;}
.cbtns .line{border:2px solid var(--petrol); color:var(--petrol);}
.social-title{font-weight:700; color:var(--petrol); margin-bottom:16px;}
.socials{display:flex; gap:14px; margin-bottom:30px;}
.soc{width:52px;height:52px;border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:22px; font-weight:700;}
.soc.fb{background:#1877F2;} .soc.wa{background:#25D366;}
.soc.ig{background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);}

.chip svg{width:18px;height:18px;vertical-align:-4px}.why-item .ic svg{width:26px;height:26px}

/* Blocs arrondis */
.intro{max-width:1120px; margin:22px auto 0; border-radius:24px; background:var(--grey); box-shadow:0 8px 24px rgba(11,59,69,.10);}
.why{max-width:1120px; width:calc(100% - 40px); margin:30px auto; border-radius:24px; box-shadow:0 12px 34px rgba(6,34,38,.28);}
section.contact{max-width:1120px; width:calc(100% - 40px); margin:30px auto; border-radius:24px; background:var(--grey); box-shadow:0 8px 24px rgba(11,59,69,.10);}
@media(max-width:620px){.intro,.why,section.contact{border-radius:16px;} .why,section.contact{width:calc(100% - 24px);} .hero .intro{padding:34px 16px 38px;}}

/* Correctif logos footer */
.foot-grid .foot-soc{display:flex; flex-direction:row; align-items:center; gap:12px; margin-top:10px;}
.foot-grid .foot-soc a.soc{display:flex; align-items:center; justify-content:center; width:40px; height:40px; margin:0; padding:0; border-radius:50%; flex:0 0 40px; line-height:0;}
.foot-grid .foot-soc a.soc svg{display:block; width:20px; height:20px; margin:0;}
.soc svg{display:block;}

/* ANIMATIONS */
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);}
  .reveal.in{opacity:1; transform:translateY(0);}
  .reveal-stagger.in > *{animation:fadeUp .6s cubic-bezier(.2,.7,.2,1) both;}
  .reveal-stagger.in > *:nth-child(1){animation-delay:.02s}
  .reveal-stagger.in > *:nth-child(2){animation-delay:.08s}
  .reveal-stagger.in > *:nth-child(3){animation-delay:.14s}
  .reveal-stagger.in > *:nth-child(4){animation-delay:.20s}
  .reveal-stagger.in > *:nth-child(5){animation-delay:.26s}
  .reveal-stagger.in > *:nth-child(6){animation-delay:.32s}
  .reveal-stagger.in > *:nth-child(7){animation-delay:.38s}
  .reveal-stagger.in > *:nth-child(8){animation-delay:.44s}
  .reveal-stagger.in > *:nth-child(9){animation-delay:.50s}
  @keyframes fadeUp{from{opacity:0; transform:translateY(22px);} to{opacity:1; transform:translateY(0);}}
  .hero{position:relative;}
  .hero-anim{animation:heroIn 1.1s cubic-bezier(.2,.7,.2,1) both, kenBurns 18s ease-in-out 1.1s infinite alternate; will-change:transform;}
  @keyframes heroIn{from{opacity:0; transform:translateY(-14px) scale(1.03);} to{opacity:1; transform:translateY(0) scale(1);}}
  @keyframes kenBurns{from{transform:scale(1) translate(0,0);} to{transform:scale(1.06) translate(-1%,-1%);}}
  .hero-shine{position:absolute; top:22px; left:20px; right:20px; max-width:1120px; margin:0 auto; height:auto; min-height:180px; border-radius:24px; overflow:hidden; pointer-events:none;}
  .hero-shine::after{content:''; position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 100%); transform:skewX(-20deg); animation:shine 2.8s 1.3s ease-in-out 1;}
  @keyframes shine{0%{left:-60%;} 100%{left:130%;}}
  @media(max-width:620px){.hero-shine{top:14px; left:12px; right:12px; border-radius:16px;}}
  .intro-anim{animation:fadeUp .8s .15s cubic-bezier(.2,.7,.2,1) both;}
  .btn-cta,.btn-hero,.cbtns a,.btn-next,.btn-back{transition:transform .18s ease, box-shadow .18s ease, background .18s ease;}
  .btn-cta:hover,.btn-hero:hover{transform:translateY(-2px); box-shadow:0 8px 18px rgba(31,182,176,.35);}
  .cbtns a:hover{transform:translateY(-2px);}
  .soc{transition:transform .2s ease;}
  .soc:hover{transform:translateY(-3px) scale(1.06);}
  .overlay .modal{animation:modalIn .35s cubic-bezier(.2,.7,.2,1) both;}
  @keyframes modalIn{from{opacity:0; transform:translateY(16px) scale(.98);} to{opacity:1; transform:translateY(0) scale(1);}}
}

/* ACCESSIBILITE */
.skip-link{position:absolute; left:-999px; top:auto; background:var(--turquoise); color:#fff; padding:12px 18px; border-radius:0 0 10px 0; z-index:2000; font-weight:700;}
.skip-link:focus{left:0; top:0;}
a:focus-visible, button:focus-visible, .chip:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{outline:3px solid var(--turquoise); outline-offset:2px; border-radius:4px;}
.field .required{color:#b23b3b;}
.field small.err{display:none; color:#b23b3b; font-size:12.5px; margin-top:5px;}
.field.has-err small.err{display:block;}
.field.has-err input,.field.has-err select{border-color:#b23b3b;}
.rgpd-note{font-size:13px; color:#5a6b6c; background:var(--grey); border-radius:10px; padding:12px 14px; margin:14px 0 4px; line-height:1.5;}
.rgpd-note a{color:var(--turquoise); font-weight:700; text-decoration:underline;}
.hp-field{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.legal-modal{max-width:760px;}
.legal-modal h4{color:var(--petrol); font-size:16px; margin:18px 0 8px;}
.legal-modal p, .legal-modal li{font-size:14px; color:#3a4c4d; line-height:1.6; margin-bottom:8px;}
.legal-modal ul{padding-left:20px; margin-bottom:10px;}
.legal-modal .placeholder{background:#fff4e6; color:#8a5a00; padding:1px 6px; border-radius:5px; font-weight:700; font-size:12.5px;}
/* FOOTER */
footer{background:var(--petrol-dark); color:#cfe3e2; padding:56px 0 26px;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:34px; margin-bottom:40px;}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr;}}
.foot-grid h4{color:#fff; margin-bottom:14px; font-size:15px;}
.foot-grid img{height:34px; margin-bottom:8px;}
.foot-grid a,.foot-grid p{display:block; color:#a9c4c2; font-size:14px; margin-bottom:9px;}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1); padding-top:22px; text-align:center; font-size:13px; color:#8fb0ae;}
.foot-soc{display:flex; gap:10px; margin-top:6px;}
.foot-soc .soc{width:36px;height:36px;font-size:15px;}

/* MODAL / CONFIGURATOR */
.overlay{position:fixed; inset:0; background:rgba(6,34,38,.6); display:none; align-items:center; justify-content:center; z-index:1000; padding:16px;}
.overlay.open{display:flex;}
.modal{background:#fff; width:100%; max-width:640px; max-height:88vh; overflow-y:auto; border-radius:18px; padding:30px;}
.modal-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px;}
.modal-head h3{color:var(--petrol); font-size:20px;}
.close-x{background:none;border:none;font-size:22px;cursor:pointer;color:#5a6b6c;}
.steps-track{display:flex; gap:4px; margin-bottom:24px;}
.steps-track span{flex:1; height:4px; border-radius:2px; background:var(--grey-mid);}
.steps-track span.done{background:var(--turquoise);}
.step-label{font-size:12px; color:var(--turquoise); font-weight:700; margin-bottom:6px;}
.field{margin-bottom:16px;}
.field label{display:block; font-size:13.5px; font-weight:600; color:var(--petrol); margin-bottom:6px;}
.field input,.field select,.field textarea{width:100%; padding:11px 13px; border:1.5px solid var(--grey-mid); border-radius:9px; font-size:14px; font-family:inherit;}
.chips{display:flex; flex-wrap:wrap; gap:10px;}
.chip{border:1.5px solid var(--grey-mid); padding:10px 16px; border-radius:24px; font-size:14px; cursor:pointer; font-weight:600; color:var(--petrol);}
.chip.sel{background:var(--turquoise); border-color:var(--turquoise); color:#fff;}
.modal-nav{display:flex; justify-content:space-between; margin-top:26px;}
.modal-nav button{padding:12px 24px; border-radius:26px; border:none; font-weight:700; cursor:pointer; font-size:14px;}
.btn-next{background:var(--turquoise); color:#fff;}
.btn-back{background:var(--grey-mid); color:var(--petrol);}
.recap p{font-size:14px; margin-bottom:8px; color:#3a4c4d;}
.recap b{color:var(--petrol);}
.confirm{text-align:center; padding:20px 0;}
.confirm .ok{width:70px;height:70px;border-radius:50%;background:var(--turquoise); color:#fff; font-size:34px; display:flex; align-items:center; justify-content:center; margin:0 auto 18px;}