*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --primary:#31587D; --dark:#212529; --light:#f8f9fa;
  --radius:12px; --transition:.35s ease;
  --header-h:70px; --card-w:280px; --card-h:220px;
}

body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
     background:var(--light);color:var(--dark);line-height:1.6;}
h1{font-size:2.8rem;} h2{font-size:2.2rem;} h3{font-size:1.25rem;}
section{padding:4rem 1rem;width:100%;}
.section-title{text-align:center;margin-bottom:2rem;}
.btn{display:inline-block;padding:.75rem 1.5rem;border-radius:var(--radius);
     background:var(--primary);color:#fff;transition:var(--transition);
     box-shadow:none;text-align:center;cursor:pointer;}
.btn:hover{opacity:.85;transform:translateY(-2px);}

.topbar{height:var(--header-h);position:sticky;top:0;z-index:1000;
        display:flex;align-items:center;justify-content:space-between;
        padding:.75rem 1rem;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.05);}
.logo img{height:40px;}
.hamburger {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 0;
  background: 0;
  cursor: pointer;
}
.hamburger span {
  width: 26px;
  height: 3px;
  background: var(--primary);
  border-radius: 3px;
  box-shadow: 0 1px 4px rgba(49,88,125,0.10);
  transition: all 0.4s ease;
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
}
.hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger.open span:nth-child(2) {
  opacity: 0;
}
.hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
.nav {
  position: fixed;
  top: var(--header-h);
  right: 1rem;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
  transform: scale(0.95);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
  transform-origin: top right;
}
.nav.open {
  transform: scale(1);
  opacity: 1;
}
.nav ul{list-style:none;padding:.5rem 0;}
.nav a {
  display: block;
  padding: .75rem 1.5rem;
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  color: #000;
  transition: background-color 0.4s ease, color 0.3s ease, transform 0.3s ease;
  text-decoration: none;
}
.nav a:hover {
  background: var(--primary);
  color: #fff;
  transform: translateX(8px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.accueil{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
         min-height:calc(100vh - var(--header-h));text-align:center;color:#fff;overflow:hidden;}
.accueil .btn-main{margin-top:3.5rem;}
.accueil-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.accueil::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.4);z-index:1;}
.accueil>*:not(.accueil-video):not(.video-control){position:relative;z-index:2;}
.video-control{position:absolute;bottom:0;right:0;margin:1rem;width:42px;height:42px;border:0;
               border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:1.2rem;
               display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:3;}
.video-control:hover{background:rgba(0,0,0,.8);}

.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--card-w),1fr));
               gap:1.5rem;justify-content:center;}
.service-card{
  width:var(--card-w);
  min-height:var(--card-h);
  background:#fff;
  border-radius:var(--radius);
  padding:1.5rem 1.75rem 1.75rem;
  box-shadow:0 6px 15px rgba(49,88,125,0.1);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  cursor:pointer;
  transform: translateY(0);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  opacity: 0;
  animation: fadeInUp 0.6s ease forwards;
}
.service-card:hover{
  transform:translateY(-10px);
  box-shadow:0 18px 36px rgba(49,88,125,0.18);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2);
}
.service-card h3 {
  margin-bottom: 0.5rem;
  color: var(--primary);
  font-weight: 600;
}
.service-teaser {
  font-size: 0.9rem;
  color: #555;
  margin-top: 0.25rem;
  flex-grow: 1;
  line-height: 1.3;
}
.service-hint {
  margin-top: .6rem;
  font-size: .75rem;
  font-style: italic;
  color: #666;
}

#backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease;
  z-index: 1190;
}
#backdrop.show {
  opacity: 1;
  visibility: visible;
}
.expanded-card {
  position: fixed;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 25px 60px rgba(0,0,0,.4);
  padding: 2rem 2.5rem;
  z-index: 1200;
  max-width: 90vw;
  max-height: 80vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.expanded-card .close-x {
  position: absolute;
  top: .6rem;
  right: 1rem;
  border: 0;
  background: 0;
  cursor: pointer;
  font-size: 1.4rem;
  color: #333;
  transition: color 0.25s ease;
}
.expanded-card .close-x:hover {
  color: var(--primary);
}
.detail-text {
  line-height: 1.55;
  margin-top: 0.5rem;
  font-size: 1rem;
  color: var(--dark);
}

#about{background:#E9E9E9;}
.about-wrapper{display:flex;flex-wrap:wrap;gap:2rem;align-items:center;}
.about-img{flex:1 1 300px;min-width:260px;}
.about-img img{width:100%;border-radius:var(--radius);box-shadow:0 4px 10px rgba(0,0,0,.08);}
.about-text{flex:1 1 340px;align-self:center;}
.about-intro{margin-bottom:1rem;line-height:1.55;}
.about-list,.values-list{margin:1rem 0 1.5rem 1.25rem;}
.values-list li strong{color:var(--primary);}

.testimonial-wrapper{display:flex;flex-wrap:wrap;gap:2rem;align-items:center;justify-content:center;}
.testimonial{flex:1 1 340px;background:#fff;border-left:4px solid var(--primary);
             padding:2rem;border-radius:var(--radius);}
.testimonial-img{flex:0 0 220px;text-align:center;}
.testimonial-img img{width:220px;height:220px;border-radius:50%;object-fit:cover;
                     box-shadow:0 4px 10px rgba(0,0,0,.08);}
.testimonial cite{display:block;margin-top:1rem;font-weight:bold;color:var(--primary);}

#contact{position:relative;background:#fdfdfd;}
.contact-layer{position:absolute;inset:0;background:linear-gradient(135deg,#f7f7f7 0%,#ececec 100%);z-index:0;}
#contact form,#contact h2{position:relative;z-index:1;}
#contact form{display:grid;gap:1rem;max-width:600px;margin-inline:auto;}
input,textarea{padding:.75rem;border-radius:var(--radius);border:1px solid #ced4da;font:inherit;}
textarea{resize:vertical;min-height:120px;}

#contactForm .btn-main {
  display: inline-block;
  padding: .75rem 1.5rem;
  font-size: 1rem;
  border-radius: var(--radius);
  background: var(--primary);
  color: #fff;
  text-align: center;
  transition: var(--transition);
  box-shadow: none;
  margin: 0 auto;
  cursor: pointer;
  border: none;
  width: max-content;
}
#contactForm .btn-main:hover {
  opacity: .85;
  transform: translateY(-2px);
}

.footer{text-align:center;padding:2rem 1rem;background:#e9ecef;}

#toTop{
  position:fixed;bottom:1.5rem;right:1.5rem;
  width:44px;height:44px;border:0;border-radius:50%;
  background:var(--primary);color:#fff;font-size:1.3rem;line-height:44px;
  text-align:center;cursor:pointer;opacity:0;visibility:hidden;
  transition:opacity .25s ease,transform .25s ease;
  z-index:1250;
}
#toTop.show{opacity:1;visibility:visible;}
#toTop.launch{animation:rocket .8s forwards;}
@keyframes rocket{
  0%{transform:none;}
  40%{transform:translateY(-40px) rotate(-20deg);}
  100%{transform:translateY(-100vh) rotate(10deg);}
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media(max-width:640px){.testimonial-img{order:-1;}}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;}
  #toTop.launch{animation:none;}
}