*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:#0b0b0c;font-family:'Manrope',sans-serif;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
a:hover{color:#dcd9d3;}
img{max-width:100%;display:block;}
button{font-family:inherit;}

@keyframes fadeInUp{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:translateY(0);}}
.reveal{opacity:0;}
.reveal.is-visible{animation:fadeInUp .8s cubic-bezier(.2,.7,.3,1) forwards;}
input::placeholder, textarea::placeholder{color:#7c7a76;}
input:focus, textarea:focus{outline:none;border-color:#5b7a9d !important;}
::selection{background:#3a5a78;color:#fff;}
.faq-btn:hover{color:#f5f4f2 !important;}
a:focus-visible, button:focus-visible{outline:2px solid #5b8fc0;outline-offset:2px;}
.lazy-bg{background-color:#111113;transition:opacity .3s ease;}
.skip-link{position:absolute;top:-100px;left:16px;z-index:100;background:#25384a;color:#f5f4f2;padding:12px 20px;border-radius:8px;font-size:14px;font-weight:600;border:1px solid rgba(245,244,242,0.14);transition:top .2s ease;}
.skip-link:focus{top:16px;outline:2px solid #5b8fc0;outline-offset:2px;}
#main-content:focus{outline:none;}
.nav-link:hover{opacity:1 !important;}
.card-hover{transition:transform .35s cubic-bezier(.2,.7,.3,1), border-color .35s ease, box-shadow .35s ease;}
.card-hover:hover{border-color:rgba(91,143,192,0.5) !important;box-shadow:0 18px 40px -12px rgba(58,90,120,0.55);transform:translateY(-8px) scale(1.015);}
.btn-primary{transition:background .3s ease, transform .3s ease, box-shadow .3s ease;}
.btn-primary:hover{background:#2c4054 !important;transform:translateY(-2px);box-shadow:0 10px 28px -6px rgba(58,90,120,0.65);}
.btn-ghost{transition:border-color .3s ease, background .3s ease, box-shadow .3s ease, transform .3s ease;}
.btn-ghost:hover{border-color:#5b8fc0 !important;background:rgba(91,143,192,0.08) !important;box-shadow:0 10px 24px -8px rgba(91,143,192,0.4);transform:translateY(-2px);}

@keyframes shimmer{0%{background-position:0% 50%;}100%{background-position:200% 50%;}}
.shimmer-text{background:linear-gradient(90deg,#f5f4f2,#8fb4d6,#f5f4f2,#8fb4d6);background-size:300% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 5s linear infinite;}

@keyframes glowPulse{0%,100%{box-shadow:0 0 0 0 rgba(91,143,192,0.35),0 18px 40px -12px rgba(58,90,120,0.5);}50%{box-shadow:0 0 0 8px rgba(91,143,192,0),0 22px 48px -10px rgba(58,90,120,0.7);}}
.glow-pulse{animation:glowPulse 3.2s ease-in-out infinite;}

.why-card{transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease, background .35s ease;border-radius:16px;padding:24px;}
.why-card:hover{transform:translateY(-6px);box-shadow:0 20px 44px -14px rgba(245,244,242,0.18);background:rgba(245,244,242,0.04);}
.why-icon{transition:transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s ease;}
.why-card:hover .why-icon{transform:scale(1.15) rotate(6deg);box-shadow:0 0 22px 4px rgba(245,244,242,0.35);}

@keyframes fogDrift1{0%{transform:translate(-10vw,-5vh) scale(1);}25%{transform:translate(60vw,10vh) scale(1.3);}50%{transform:translate(30vw,25vh) scale(0.9);}75%{transform:translate(-20vw,15vh) scale(1.2);}100%{transform:translate(-10vw,-5vh) scale(1);}}
@keyframes fogDrift2{0%{transform:translate(70vw,5vh) scale(1.1);}25%{transform:translate(10vw,20vh) scale(0.9);}50%{transform:translate(50vw,25vh) scale(1.3);}75%{transform:translate(80vw,10vh) scale(1);}100%{transform:translate(70vw,5vh) scale(1.1);}}
@keyframes fogDrift3{0%{transform:translate(20vw,20vh) scale(1);}25%{transform:translate(70vw,10vh) scale(1.2);}50%{transform:translate(10vw,-5vh) scale(0.9);}75%{transform:translate(50vw,15vh) scale(1.1);}100%{transform:translate(20vw,20vh) scale(1);}}
.animated-bg{background:#0b0b0c;position:relative;overflow:hidden;}
.fog-blob{position:absolute;top:0;left:0;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0;}
.fog-1{width:560px;height:560px;top:0%;background:radial-gradient(circle, rgba(58,90,120,0.4), transparent 70%);animation:fogDrift1 40s ease-in-out infinite;}
.fog-2{width:620px;height:620px;top:35%;background:radial-gradient(circle, rgba(120,120,120,0.14), transparent 70%);animation:fogDrift2 46s ease-in-out infinite;}
.fog-3{width:500px;height:500px;top:70%;background:radial-gradient(circle, rgba(91,143,192,0.32), transparent 70%);animation:fogDrift3 36s ease-in-out infinite;}
.fog-4{width:540px;height:540px;top:18%;background:radial-gradient(circle, rgba(91,143,192,0.16), transparent 70%);animation:fogDrift2 44s ease-in-out infinite;}
.fog-5{width:580px;height:580px;top:52%;background:radial-gradient(circle, rgba(58,90,120,0.34), transparent 70%);animation:fogDrift3 38s ease-in-out infinite;}
.fog-6{width:520px;height:520px;top:86%;background:radial-gradient(circle, rgba(120,120,120,0.24), transparent 70%);animation:fogDrift1 42s ease-in-out infinite;}

@keyframes twinkle{0%,100%{opacity:0;transform:scale(0.6);}50%{opacity:1;transform:scale(1);}}
.star{position:fixed;border-radius:50%;background:#f5f4f2;pointer-events:none;z-index:0;animation-name:twinkle;animation-timing-function:ease-in-out;animation-iteration-count:infinite;}

@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.marquee-track{animation:marquee 26s linear infinite;}

@keyframes floatY{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
@keyframes pulseDot{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.5);opacity:.5;}}
.hero-float{animation:floatY 6s ease-in-out infinite;}
.pulse-dot{animation:pulseDot 2.2s ease-in-out infinite;}

.logo-mark{transition:transform .5s cubic-bezier(.2,.7,.3,1);}
.logo-mark:hover{transform:rotate(-8deg) scale(1.06);}
.nav-link{position:relative;padding-bottom:3px;}
.nav-link::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:#f5f4f2;transition:width .3s cubic-bezier(.2,.7,.3,1);}
.nav-link:hover::after{width:100%;}
.nav-link.active::after{width:100%;}
.cta-arrow{display:inline-block;transition:transform .3s cubic-bezier(.2,.7,.3,1);}
.btn-primary:hover .cta-arrow, .btn-ghost:hover .cta-arrow{transform:translateX(5px);}
.faq-icon{transition:transform .35s cubic-bezier(.2,.7,.3,1);display:inline-block;}

section .reveal:nth-child(1){animation-delay:0s;}
section .reveal:nth-child(2){animation-delay:.12s;}
section .reveal:nth-child(3){animation-delay:.24s;}
section .reveal:nth-child(4){animation-delay:.36s;}

/* ---- layout helpers shared with inline styles ---- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);}

.menu-toggle{display:none;}

@media (max-width:820px){
  .mobile-cta{display:flex !important;}
  body{padding-bottom:70px;}
}

/* ---- responsive additions (not present in the original desktop-only mockup) ---- */
@media (max-width:900px){
  header .desktop-nav{display:none !important;}
  header .header-cta{display:none !important;}
  .menu-toggle{display:flex !important;}
  .grid-3, .grid-4{grid-template-columns:1fr !important;}
  section[style*="padding:120px"], main{padding-left:24px !important;padding-right:24px !important;}
}

@media (max-width:760px){
  #home-hero-grid{grid-template-columns:1fr !important;}
  #home-hero-grid > div:first-child{max-width:280px !important;}
  #contact-grid{grid-template-columns:1fr !important;gap:40px !important;}
  #contact-grid > *{min-width:0;}
  #footer-grid{grid-template-columns:1fr !important;gap:36px !important;}
  h1{font-size:36px !important;}
  h2{font-size:28px !important;}
}

@media (max-width:560px){
  .form-row{grid-template-columns:1fr !important;}
}

/* hint that the comparison table on the Offres page scrolls horizontally on narrow screens */
@media (max-width:900px){
  .mobile-scroll-hint{display:block !important;}
  .table-scroll{position:relative;}
  .table-scroll::after{content:'';position:absolute;top:0;right:0;bottom:0;width:28px;pointer-events:none;background:linear-gradient(90deg, transparent, #0b0b0c);}
}

.mobile-menu{display:none;flex-direction:column;position:fixed;top:75px;left:0;right:0;background:#0b0b0c;border-bottom:1px solid rgba(245,244,242,0.09);z-index:49;padding:10px 24px 24px;gap:4px;}
.mobile-menu.is-open{display:flex;}
.mobile-menu a{padding:14px 4px;font-size:16px;font-weight:600;color:#e8e6e1;border-bottom:1px solid rgba(245,244,242,0.08);}