:root{
  /* BLEU / BLANC / ROUGE */
  --c-bg-1:#0b2a4a;       /* bleu profond */
  --c-bg-2:#061b31;       /* bleu très foncé */
  --c-blue:#1f66c2;       /* bleu principal */
  --c-blue-2:#62a7ff;     /* bleu clair */
  --c-red:#e11d2e;        /* rouge accent */
  --c-red-2:#ff6b75;      /* rouge clair */
  --c-white:#ffffff;

  --c-text:var(--c-white);
  --c-tint:rgba(255,255,255,.86);

  --c-card:rgba(255,255,255,.07);
  --c-border:rgba(255,255,255,.20);

  --radius:14px;
  --radius-xl:18px;
  --shadow:0 10px 28px rgba(0,0,0,.22);
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%; overflow-x:hidden; scroll-behavior:smooth}

body{
  margin:0;
  font-family:Lato, Arial, sans-serif;
  color:var(--c-text);
  background:
    linear-gradient(180deg, rgba(11,42,74,.88) 0%, rgba(6,27,49,.98) 70%, rgba(6,27,49,.82) 100%),
    url(images/bg-toiture.jpg) center/cover no-repeat fixed;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.Body{
  min-height:100vh;
  overflow-x:hidden;
}

img{max-width:100%; display:block; height:auto}
a{color:inherit; text-decoration:none}
a:hover{color:var(--c-blue-2)}
:target{scroll-margin-top:120px}

h1{
  font-size:clamp(1.9rem,5vw,3.1rem);
  line-height:1.12;
  margin:0;
  font-weight:900;
}
h2{
  font-size:clamp(1.25rem,3.2vw,2rem);
  line-height:1.25;
  margin:.2em 0 .5em;
  font-weight:900;
}
p,li{
  font-size:clamp(1rem,1.4vw,1.12rem);
  line-height:1.7;
  margin:.55rem 0;
}

.center{text-align:center}
.muted{opacity:.9}
.muted-bis{opacity:.96; font-weight:700}
.shadow{box-shadow:var(--shadow)}
.radius{border-radius:var(--radius)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* TOPBAR */
.topbar{
  position:sticky;
  top:0;
  z-index:80;
  background:rgba(6,27,49,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.18);
}
.topbar__inner{
  max-width:1100px;
  margin:0 auto;
  padding:10px clamp(14px,4vw,40px);
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.topbar__item{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  opacity:.95;
}
.topbar__cta{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:linear-gradient(90deg, rgba(225,29,46,.22), rgba(31,102,194,.18));
  font-weight:900;
}

/* HEADER / NAV */
.site-header{
	position: fixed;
    top: 0px;
    z-index: 70;
    background: rgba(11, 42, 74, .72);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, .18);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px clamp(14px, 4vw, 40px);
    width: 100%;	
}

.brand{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-weight:900;
}
.brand img{border-radius:50%}

.nav{display:flex; align-items:center; gap:10px}
.nav a, .sub-toggle{
  color:var(--c-text);
  font-weight:900;
  padding:10px 12px;
  border-radius:999px;
}

.nav a:hover, .sub-toggle:hover{
  background:rgba(255,255,255,.06);
}

.nav-cta{
  border:2px solid rgba(255,255,255,.22);
  background:linear-gradient(90deg, rgba(225,29,46,.92), rgba(225,29,46,.78));
}

.nav-toggle{
  display:none;
  background:transparent;
  border:1px solid rgba(255,255,255,.22);
  border-radius:12px;
  color:var(--c-text);
  padding:8px 10px;
}

.nav-item{position:relative}
.sub-toggle{
  background:transparent;
  border:0;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:.2rem;
}

.sub{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  min-width:260px;
  background:rgba(6,27,49,.98);
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:8px;
  display:none;
}
.has-sub.sub-open .sub{display:block}
.sub a{display:block; border-radius:10px}
.sub a:hover{background:rgba(31,102,194,.16)}

/* HERO */
header.hero{
  position:relative;
  isolation:isolate;
  background:url('images/hero-toiture.jpg') center/cover no-repeat;
  min-height:clamp(46vh,64vh,76vh);
  display:grid;
  place-items:center;
  text-align:center;
  padding:14vh 5vw 10vh;
  border-bottom:1px solid rgba(255,255,255,.16);
}

header.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(6,27,49,.25), rgba(6,27,49,.72)),
    linear-gradient(90deg, rgba(31,102,194,.18), rgba(225,29,46,.14));
  z-index:0;
}

header.hero .inner{
  position:relative;
  z-index:1;
  max-width:1100px;
  margin:auto;
  display:grid;
  gap:18px;
}

.hero-logo{
  width:210px;
  height:auto;
  margin:0 auto 6px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
}

.lead{
  margin:0 auto;
  opacity:.98;
  font-weight:600;
  font-size:clamp(1rem,2.1vw,1.2rem);
}

.hero-cta{
  margin-top:1.2rem;
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}

.hero-logos{
  display:flex;
  gap:14px;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  margin:10px auto 0;
  max-width:820px;
}
.logo-card{
  background:transparent;
  border:1px solid rgba(255,255,255,.14);
  border-radius:20px;
  box-shadow:var(--shadow);
}
.logo-card img{
  display:block;
  height:110px;
  width:auto;
  object-fit:contain;
}

/* MAIN */
main{
  width:100%;
  max-width:1100px;
  margin:6vh auto 10vh;
  padding-inline:clamp(14px,4vw,40px);
  display:flex;
  flex-direction:column;
  gap:5vh;
}

/* Cards */
.card{
  background:var(--c-card);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius);
  padding:clamp(14px,2.6vw,20px);
  box-shadow:var(--shadow);
}

.card .icon{
  width:44px; height:44px;
  border-radius:10px;
  display:grid; place-items:center;
  background:linear-gradient(135deg, rgba(31,102,194,.25), rgba(225,29,46,.18));
  margin-bottom:.6rem;
  color:var(--c-white);
}

.card2{
  background:rgba(255,255,255,.96);
  border:1px solid rgba(6,27,49,.12);
  border-radius:var(--radius);
  padding:clamp(14px,2.6vw,20px);
  box-shadow:var(--shadow);
  color:#0e0e0e;
}

.card2 .icon{
  width:44px; height:44px;
  border-radius:10px;
  display:grid; place-items:center;
  background:linear-gradient(90deg, var(--c-blue), var(--c-red));
  margin-bottom:.6rem;
  color:#ffffff;
}

/* Reviews */
.reviews{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  margin-top:12px;
}
.review{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius);
  padding:16px;
}
.stars{color:#ffd37a; font-weight:900; letter-spacing:.08em}
.reviewer{opacity:.92; font-weight:900; margin-top:6px}

/* Services grid */
.service-grid{
  display:grid;
  gap:clamp(12px,2vw,16px);
  grid-template-columns:1fr;
}
.service-card{
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:10px;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(6,27,49,.12);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  color:#0e0e0e;
  overflow:hidden;
}
.service-thumb{width:100%; aspect-ratio:16/9; overflow:hidden; background:#eee}
.service-thumb img{width:100%; height:100%; object-fit:cover}
.service-body{padding:14px 16px}
.service-body .icon{
  width:44px; height:44px;
  border-radius:10px;
  display:grid; place-items:center;
  background:linear-gradient(90deg, var(--c-blue), var(--c-red));
  color:#fff;
  margin-bottom:.5rem;
}
.service-body h3{margin:.1rem 0 .3rem; font-size:1.08rem; line-height:1.25}
.service-body p{margin:0; font-size:1rem; line-height:1.6}
.service-actions{padding:0 16px 14px; display:flex; gap:10px; flex-wrap:wrap}

/* Buttons */
.btn-more, .cta{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  padding:14px 20px;
  border-radius:999px;
  border:2px solid rgba(6,27,49,.14);
  text-transform:uppercase;
  font-weight:900;
  letter-spacing:.3px;
  transition:.2s;
  background:linear-gradient(90deg, rgba(225,29,46,.95), rgba(225,29,46,.78));
  color:#fff;
}

.cta--blue{
  background:linear-gradient(90deg, rgba(31,102,194,.95), rgba(31,102,194,.78));
}

.btn-more--blue{
  background:linear-gradient(90deg, rgba(31,102,194,.95), rgba(31,102,194,.78));
}

.btn-more .material-icons, .cta .material-icons{font-size:1.1em}

.btn-more:hover, .cta:hover{
  background:#fff;
  transform:translateY(-1px);
  border-color:rgba(31,102,194,.35);
  color:var(--c-bg-2);
}

/* Stats */
.stats{
  display:grid;
  gap:clamp(12px,2vw,16px);
  grid-template-columns:repeat(4, minmax(0, 1fr));
}
.stat{
  text-align:center;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
}
.stat-label{
  opacity:.95;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:900;
  color:rgba(255,255,255,.86);
}
.stat-value{
  font-size:clamp(2rem,5vw,3rem);
  font-weight:900;
  line-height:1;
  margin:.15em 0;
}
.stat-sub{font-size:.98rem; opacity:.95}

/* Layout */
.features{
  display:grid;
  gap:clamp(12px,2.2vw,18px);
  grid-template-columns:repeat(3, minmax(0, 1fr));
}
.two-cols{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(16px,3vw,36px);
  align-items:center;
}
.two-cols>*{min-width:0}
.two-colsSPE{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(16px,3vw,36px);
  align-items:center;
}
.photo img{border-radius:var(--radius); box-shadow:var(--shadow); object-fit:cover}

/* CTA row */
.cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  justify-content:center;
  background:
    linear-gradient(90deg, rgba(31,102,194,.14), rgba(255,255,255,.06), rgba(225,29,46,.12));
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius-xl);
  padding:clamp(14px,2.6vw,22px);
}

/* Badge */
.badge{
  display:inline-block;
  padding:.42em .8em;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.22);
  font-weight:900;
  letter-spacing:.2px;
  color:rgba(255,255,255,.92);
}

/* Map */
.map-embed{
  width:100%;
  aspect-ratio:16/9;
  background:#cfd8dc;
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius);
  overflow:hidden;
}
.map-embed iframe{width:100%; height:100%; border:0; display:block}

/* Callbar */
.callbar{
  position:fixed;
  inset:auto 0 0 0;
  z-index:50;
  display:none;
  background:rgba(6,27,49,.92);
  backdrop-filter:saturate(1.1) blur(6px);
  padding:10px 14px;
  border-top:1px solid rgba(255,255,255,.18);
}
.callbar .cta{width:100%; justify-content:center}

/* Footer */
.footer{
  border-top:1px solid rgba(255,255,255,.18);
  padding:18px 0 70px;
  background:rgba(0,0,0,.18);
}
.footer__inner{
  max-width:1100px;
  margin:0 auto;
  padding:0 clamp(14px,4vw,40px);
  display:flex;
  gap:16px;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
}
.footer__links{display:flex; gap:14px; flex-wrap:wrap}
.footer__links a{text-decoration:underline}

/* Responsive */
@media (min-width:720px){
  .service-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:1100px){
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .features{grid-template-columns: 1fr; margin: 4vh;}
  .reviews{grid-template-columns:1fr}
}
@media (max-width:1024px){
  .two-cols{grid-template-columns:1fr}
}
@media (max-width:680px){
  .cta{width:100%; justify-content:center}
  .callbar{display:block}

  .nav-toggle{display:inline-flex; align-items:center; gap:.4rem}
  .nav{
    position:fixed;
    inset:110px 14px auto 14px;
    background:rgba(6,27,49,.98);
    border:1px solid rgba(255,255,255,.18);
    border-radius:16px;
    box-shadow:var(--shadow);
    padding:10px;
    display:none;
    flex-direction:column;
    align-items:stretch;
  }
  .nav.is-open{display:flex}
  .sub{position:static; display:none; margin-top:6px}
  .has-sub.sub-open .sub{display:block}
}

@media (max-width:480px){
  .logo-card img{height:90px}
}