:root{
  --ink:#0E1F27;--ink-2:#152E39;--slate:#2A4853;--cyan:#28BAE1;--lime:#B0CB46;
  --paper:#EDF1F2;--steel:#8FA3AB;--line:rgba(255,255,255,.14);--line-d:rgba(42,72,83,.18);
  --pad:clamp(20px,4.4vw,56px);--r:2px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--slate);
  font-family:Poppins,'Segoe UI',system-ui,sans-serif;font-weight:300;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-weight:600;line-height:1.02;letter-spacing:-.04em;margin:0;color:var(--ink)}
p{margin:0 0 1em}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.tag{font-size:.78rem;font-weight:500;color:var(--cyan);display:flex;align-items:center;gap:.6em}
.tag::before{content:"";width:26px;height:2px;background:linear-gradient(90deg,var(--cyan),var(--lime))}

/* layout */
.page{display:grid;grid-template-columns:400px 1fr;min-height:100vh}
.side{background:radial-gradient(70% 40% at 20% 8%,rgba(40,186,225,.20),transparent 70%),radial-gradient(60% 40% at 90% 95%,rgba(176,203,70,.14),transparent 70%),linear-gradient(170deg,#0B1D24,#13303C 60%,#0E1F27);color:#B9CBD2;padding:clamp(28px,3.4vw,48px) clamp(24px,2.6vw,44px);position:sticky;top:118px;height:calc(100vh - 118px);
  display:flex;flex-direction:column;overflow:auto}
.side::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1.2px);background-size:22px 22px;
  -webkit-mask-image:linear-gradient(200deg,#000,transparent 60%);mask-image:linear-gradient(200deg,#000,transparent 60%)}
.side>*{position:relative;z-index:2}
.side img.logo{height:56px;width:auto}
.back{display:inline-flex;align-items:center;gap:.55em;text-decoration:none;font-size:.86rem;color:#9DB4BC;margin-top:2.6rem;transition:color .25s}
.back:hover{color:var(--cyan)}
.side h1{color:#fff;font-size:clamp(1.9rem,2.5vw,2.5rem);margin-top:1.4rem}
.side .intro{margin-top:1.2rem;font-size:.95rem;color:#A9BFC7;max-width:34ch}
.side .direct{margin-top:auto;padding-top:2.4rem;border-top:1px solid var(--line)}
.side .direct .lbl{font-size:.78rem;color:var(--steel)}
.side .tel{display:block;text-decoration:none;font-weight:700;letter-spacing:-.045em;
  font-size:clamp(1.6rem,2.4vw,2.1rem);color:#fff;letter-spacing:-.03em;margin:.35rem 0 1.1rem;transition:color .25s}
.side .tel:hover{color:var(--cyan)}
.side .direct a.mail{color:#CFDDE2;text-decoration:none;font-size:.92rem;display:inline-flex;gap:.5em;align-items:center}
.side .direct a.mail:hover{color:var(--lime)}
.side .addr{font-size:.82rem;color:#7E959D;margin-top:1.6rem}

.main{padding:clamp(34px,4.6vw,76px) var(--pad) 96px}
.main-in{width:min(760px,100%)}

@media(max-width:1000px){
  .page{grid-template-columns:1fr}
  .side{position:static;height:auto}
  .side .direct{margin-top:2.4rem}
}

/* form */
fieldset{border:0;padding:0;margin:0 0 2.8rem}
legend{padding:0;font-weight:600;letter-spacing:-.02em;font-size:1.2rem;color:var(--ink);
  display:flex;align-items:baseline;gap:.8rem;margin-bottom:.35rem}
legend .num{font-size:.78rem;color:#fff;background:linear-gradient(135deg,var(--cyan),var(--cyan-d,#1B7F9C));width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;font-family:Poppins;font-weight:500}
.fs-note{font-size:.88rem;color:#63808B;margin:0 0 1.5rem}
.row{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.1rem}
.f{display:flex;flex-direction:column;gap:.42rem;margin-bottom:1.1rem}
.f.full{grid-column:1/-1}
label{font-size:.85rem;font-weight:400;color:#3F5F6B}
label .req{color:var(--cyan)}
input,select,textarea{
  font-family:Poppins;font-size:.97rem;font-weight:300;color:var(--ink);background:#fff;
  border:1px solid var(--line-d);border-radius:var(--r);padding:.85em .95em;transition:border-color .2s,box-shadow .2s;width:100%}
textarea{resize:vertical;min-height:130px;line-height:1.6}
select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%232A4853' stroke-width='1.5'/></svg>");
  background-repeat:no-repeat;background-position:right 1rem center}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(40,186,225,.16)}
input:user-invalid{border-color:#D2634C}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:.55rem}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip{position:relative}
.chip span{display:inline-flex;align-items:center;gap:.5em;border:1px solid var(--line-d);background:#fff;border-radius:100px;
  padding:.6em 1.05em;font-size:.89rem;cursor:pointer;transition:border-color .2s,background .2s,color .2s;user-select:none}
.chip span::before{content:"";width:7px;height:7px;border-radius:50%;background:#C6D2D6;transition:background .2s,box-shadow .2s}
.chip span:hover{border-color:var(--slate)}
.chip input:checked+span{border-color:var(--ink);background:var(--ink);color:#fff}
.chip input:checked+span::before{background:var(--lime);box-shadow:0 0 0 3px rgba(176,203,70,.25)}
.chip input:focus-visible+span{outline:2px solid var(--cyan);outline-offset:3px}

/* récap */
.recap{background:linear-gradient(150deg,#12303B,#0E1F27);border-left:3px solid transparent;border-image:linear-gradient(var(--cyan),var(--lime)) 1;color:#C3D4DA;border-radius:var(--r);padding:1.7rem 1.8rem;margin:0 0 2.2rem;position:relative;overflow:hidden}
.recap h3{color:#fff;font-size:1.05rem;font-variation-settings:'wdth' 104;margin-bottom:1rem}
.recap dl{margin:0;display:grid;grid-template-columns:150px 1fr;gap:.7rem 1.2rem;font-size:.9rem}
.recap dt{color:var(--steel);font-size:.82rem}
.recap dd{margin:0;color:#E4EDF0}
.recap dd em{color:#6D8791;font-style:normal}
@media(max-width:560px){.recap dl{grid-template-columns:1fr;gap:.15rem 0}.recap dt{margin-top:.7rem}}

/* consent + submit */
.consent{display:flex;gap:.8rem;align-items:flex-start;font-size:.85rem;color:#5A7883;margin-bottom:1.8rem}
.consent input{width:18px;height:18px;flex:none;margin-top:.15em;accent-color:var(--cyan)}
.actions{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.btn{display:inline-flex;align-items:center;gap:.7em;font-family:Poppins;font-weight:500;font-size:.95rem;
  padding:1.05em 1.7em;border-radius:var(--r);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:.25s}
.btn-cyan{background:var(--cyan);color:#06222C;border-color:var(--cyan);box-shadow:0 8px 26px -12px rgba(40,186,225,.9)}
.btn-cyan:hover{background:#5FD0EF;border-color:#5FD0EF}
.btn-outline{border-color:var(--line-d);color:var(--slate);background:none}
.btn-outline:hover{border-color:var(--slate);background:rgba(42,72,83,.05)}
.hint{font-size:.82rem;color:#6C8792;margin-top:1.2rem}

/* état envoyé */
.sent{display:none;border:1px solid var(--lime);background:rgba(176,203,70,.1);border-radius:var(--r);padding:1.6rem 1.7rem;margin-bottom:2rem}
.sent.on{display:block;animation:pop .5s cubic-bezier(.2,.8,.3,1)}
@keyframes pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.sent h3{font-size:1.1rem;margin-bottom:.5rem}
.sent p{font-size:.92rem;color:#42646F;margin-bottom:.9rem}
.err{color:#B4472F;font-size:.85rem;margin-top:.9rem;display:none}
.err.on{display:block}
.ico-wa{width:1.05em;height:1.05em;flex:none}
.btn-wa{background:#25D366;color:#042B18;border-color:#25D366;box-shadow:0 12px 30px -14px rgba(37,211,102,1)}
.btn-wa:hover{background:#3FE07B;border-color:#3FE07B}
.side .wa{display:inline-flex;align-items:center;gap:.6em;margin-top:1.1rem;padding:.75em 1.3em;border-radius:100px;
  background:#25D366;color:#042B18;font-size:.9rem;font-weight:500;text-decoration:none;transition:.25s}
.side .wa:hover{background:#3FE07B}

/* ===== header + hero repris de la landing ===== */
:root{--navy:#2A4853;--cyan-d:#1B7F9C}
.nav{position:fixed;inset:0 0 auto;z-index:60;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.nav.on{background:rgba(13,31,38,.9);backdrop-filter:blur(16px);border-bottom-color:var(--line)}
.nav .wrap{width:min(1340px,100%);margin-inline:auto;padding-inline:clamp(20px,4.2vw,68px)}
.nav-in{display:flex;align-items:center;gap:2.2rem;height:118px}
.nav .logo{height:68px;width:auto;transition:height .3s}
.nav.on .logo{height:56px}
.nav-links{display:flex;gap:2rem;margin-left:auto;font-size:.92rem;font-weight:400}
.nav-links a{text-decoration:none;color:#C3D2D8;position:relative;padding-block:6px}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--cyan),var(--lime));transition:width .3s}
.nav-links a:hover{color:#fff}
.nav-links a:hover::after{width:100%}
.nav-wa{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;color:#fff;
  border:1px solid rgba(255,255,255,.28);text-decoration:none;transition:.25s;flex:none}
.nav-wa svg{width:20px;height:20px}
.nav-wa:hover{background:#25D366;border-color:#25D366;color:#042B18}
.nav-tel{display:inline-flex;align-items:center;gap:.55em;text-decoration:none;color:#04222C;font-weight:500;
  font-size:.92rem;background:var(--lime);padding:.75em 1.3em;border-radius:100px;transition:.25s;margin-left:.7rem}
.nav-tel:hover{background:#fff}
.scrollbar{position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,var(--cyan),var(--lime));transform:scaleX(0);transform-origin:left}
@media(max-width:1040px){.nav-links{display:none}.nav-wa{margin-left:auto}}
@media(max-width:640px){.nav-in{height:86px}.nav .logo,.nav.on .logo{height:46px}
  .nav-tel{font-size:.85rem;padding:.68em 1.05em}}

.hero{position:relative;overflow:hidden;color:#CFDDE2;
  background:radial-gradient(56% 50% at 50% 4%,rgba(40,186,225,.22),transparent 68%),
             radial-gradient(44% 44% at 86% 86%,rgba(176,203,70,.15),transparent 70%),
             radial-gradient(42% 40% at 6% 60%,rgba(42,72,83,.85),transparent 70%),
             var(--ink);
  padding:clamp(150px,15vw,196px) 0 clamp(44px,5vw,72px)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:84px 84px;
  -webkit-mask-image:radial-gradient(ellipse 66% 60% at 50% 40%,#000,transparent 76%);
  mask-image:radial-gradient(ellipse 66% 60% at 50% 40%,#000,transparent 76%)}
.hero .wrap{position:relative;z-index:2;width:min(1340px,100%);margin-inline:auto;padding-inline:clamp(20px,4.2vw,68px)}
.hero-top{text-align:center}
.hero .tag{justify-content:center;margin-bottom:1.8rem;opacity:0;animation:fade .6s .15s forwards}
@keyframes fade{to{opacity:1}}
.h1wrap{position:relative;display:inline-block;padding:clamp(18px,3vw,40px) clamp(22px,4.2vw,58px) clamp(26px,3.6vw,48px)}
.cr{position:absolute;width:clamp(16px,2vw,26px);height:clamp(16px,2vw,26px);opacity:0;
  animation:crop .6s 1.1s cubic-bezier(.2,.9,.3,1) forwards}
@keyframes crop{from{opacity:0;transform:scale(.5)}to{opacity:.75;transform:none}}
.cr.tl{left:0;top:0;border-left:2px solid var(--cyan);border-top:2px solid var(--cyan)}
.cr.tr{right:0;top:0;border-right:2px solid var(--lime);border-top:2px solid var(--lime);animation-delay:1.2s}
.cr.bl{left:0;bottom:0;border-left:2px solid var(--lime);border-bottom:2px solid var(--lime);animation-delay:1.3s}
.cr.br{right:0;bottom:0;border-right:2px solid var(--cyan);border-bottom:2px solid var(--cyan);animation-delay:1.4s}
.hero h1{font-size:clamp(2.4rem,7.4vw,5.8rem);font-weight:600;letter-spacing:-.05em;color:#fff;line-height:.98;
  display:flex;justify-content:center;align-items:baseline;gap:.26em;opacity:0;animation:fade .7s .3s forwards}
.hero h1 .fixed{flex:none}
.hero h1 .word{display:inline-block;min-width:7.7ch;text-align:left;color:var(--cyan);transition:color .45s ease}
.hero h1 .wm{position:relative;display:inline-block}
.hero h1 .caret{display:inline-block;width:.06em;height:.74em;background:currentColor;margin-left:.05em;
  transform:translateY(.02em);animation:blink 1.05s steps(1) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.cote-dyn{position:absolute;left:0;right:0;bottom:-.26em;height:0;display:flex;align-items:center;gap:7px;
  font-size:.72rem;font-weight:400;letter-spacing:0;line-height:1;opacity:0;animation:fade .6s 1.6s forwards}
.cote-dyn i{flex:none;width:2px;height:12px;background:currentColor;border-radius:1px}
.cote-dyn .ln{flex:1 1 auto;height:1px;background:currentColor;opacity:.55;min-width:6px}
.cote-dyn .ln:first-of-type{flex-grow:.28}
.cote-dyn .ln:last-of-type{flex-grow:1.72}
.cote-dyn em{font-style:normal;white-space:nowrap;opacity:.9}
@media(max-width:620px){.cote-dyn em{display:none}}
.hero-sub{max-width:52ch;margin:1.8rem auto 0;color:#B3C6CD;font-size:1.02rem;opacity:0;animation:fade .8s .8s forwards}
.hero-act{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:2.2rem;opacity:0;animation:fade .8s .95s forwards}
.hero-act .btn{border-radius:100px}
.btn-ghost{border-color:rgba(255,255,255,.3);color:#fff;background:none}
.btn-ghost:hover{border-color:var(--lime);color:var(--lime)}
.ruler{margin-top:clamp(44px,5.5vw,76px);opacity:0;animation:fade .8s 1.6s forwards}
.rl{height:1px;background:rgba(255,255,255,.18);position:relative}
.rl b{position:absolute;inset:0;background:linear-gradient(90deg,var(--cyan),var(--lime));
  transform:scaleX(0);transform-origin:left;animation:grow 1.6s 1.8s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes grow{to{transform:scaleX(1)}}
.gr{height:9px;background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 1px,transparent 1px 26px);
  opacity:0;animation:fade .8s 2.4s forwards}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}
.hero h1,.hero-sub,.hero-act,.hero .tag,.ruler,.cote-dyn,.cr{opacity:1}.hero h1 .caret{display:none}.rl b{transform:scaleX(1)}}