:root{
  /* Palette inspirée du style BorealClim : bleu profond + accents froid/chaud */
  --bg: #f6f8fc;
  --surface: #ffffff;
  --surface2: #eef3ff;

  --navy: #0b1b3a;
  --navy2:#102a57;
  --text: #0f172a;
  --muted: #475569;

  --cold: #2f6bff;   /* froid */
  --cold2:#1f4fd6;
  --hot:  #ff9d2e;   /* chaud */
  --hot2: #f07c0a;

  --stroke: rgba(15,23,42,.10);
  --shadow: 0 16px 42px rgba(2,6,23,.10);
  --shadow2: 0 10px 24px rgba(2,6,23,.10);
  --radius: 18px;
  --max: 1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text);
  background: var(--bg);
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{max-width:var(--max); margin:0 auto; padding:0 18px}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:1000;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.86);
  border-bottom: 1px solid var(--stroke);
  transition: background .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.topbar--overlay{
  /* Ultra transparent sur le hero (style BorealClim) */
  /* NOTE: sur la home, le hero peut etre tres clair -> on augmente un peu le contraste */
  background: rgba(11,27,58,.22);
  border-bottom: 1px solid rgba(255,255,255,.16);
}
.topbar--overlay .menu a,
.topbar--overlay .brand .name span,
.topbar--overlay .burger{ color:#fff; }
.topbar--overlay .brand .name span:last-child{ color: rgba(255,255,255,.75); }
.topbar--overlay .btn{
  border-color: rgba(255,255,255,.24);
  background: rgba(255,255,255,.14);
  color:#fff;
  box-shadow:none;
}
.topbar--overlay .btn:hover{background: rgba(255,255,255,.20)}
.topbar--overlay .burger{ border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.06); }

/* Topbar en scroll : devient “solide” */
.topbar--overlay.topbar--scrolled{
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid var(--stroke);
  box-shadow: 0 16px 42px rgba(2,6,23,.10);
}
.topbar--overlay.topbar--scrolled .menu a,
.topbar--overlay.topbar--scrolled .brand .name span,
.topbar--overlay.topbar--scrolled .burger{ color: var(--navy2); }
.topbar--overlay.topbar--scrolled .brand .name span:last-child{ color: var(--muted); }
.topbar--overlay.topbar--scrolled .btn{
  border-color: var(--stroke);
  background: rgba(255,255,255,.92);
  color: var(--text);
  box-shadow: 0 8px 18px rgba(2,6,23,.06);
}
.topbar--overlay.topbar--scrolled .btn:hover{ background: rgba(47,107,255,.08); }
.topbar--overlay.topbar--scrolled .burger{ border-color: var(--stroke); background: rgba(255,255,255,.92); }

.nav{display:flex; align-items:center; justify-content:space-between; height:74px; gap:14px}
.brand{display:flex; gap:12px; align-items:center}
.brand img{width:44px; height:44px}
.brand .name{font-weight:800; letter-spacing:.2px; display:flex; flex-direction:column; line-height:1.05}
.brand .name span:last-child{font-weight:600; color:var(--muted); font-size:12.5px}

.menu{
  display:flex;
  flex: 1 1 auto;        /* laisse la place au menu entre logo et CTA */
  gap:10px;
  align-items:center;
  justify-content:center;
  flex-wrap:nowrap;      /* tous les boutons sur une seule ligne */
  white-space:nowrap;    /* évite les retours à la ligne dans les libellés */
}
.menu a{
  position:relative;
  font-weight:900;
  font-size:12.75px;
  padding:9px 12px;
  border-radius:999px;
  color: var(--navy2);
  /* Boutons bien visibles sur un header clair : léger fond bleuté + bord plus marqué */
  border:1px solid rgba(11,27,58,.22);
  background: rgba(11,27,58,.06);
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
  box-shadow: 0 8px 18px rgba(2,6,23,.08);
}
.menu a::after{
  content:"";
  position:absolute;
  left:12px; right:12px; bottom:7px;
  height:2px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--cold), var(--hot2));
  transform: scaleX(0);
  transform-origin:left;
  opacity:.0;
  transition: transform .22s ease, opacity .22s ease;
}
.menu a:hover{
  background: rgba(47,107,255,.12);
  border-color: rgba(47,107,255,.34);
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(2,6,23,.10);
}
.menu a:hover::after{ transform: scaleX(1); opacity: 1; }
.menu a:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(47,107,255,.18), 0 12px 22px rgba(2,6,23,.10);
  border-color: rgba(47,107,255,.35);
}
.menu a.is-active{
  background: rgba(47,107,255,.18);
  border-color: rgba(47,107,255,.42);
}
.menu a.is-active::after{ transform: scaleX(1); opacity: 1; }

/* Menu en overlay (sur le hero) : version “glass” */
.topbar--overlay .menu a{
  color:#fff;
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.28);
  box-shadow:none;
}
.topbar--overlay .menu a:hover{ background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.34); }
.topbar--overlay .menu a.is-active{ background: rgba(255,255,255,.26); border-color: rgba(255,255,255,.40); }

/* Mobile menu : liens façon boutons */
.mobileMenu a{
  display:block;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.92);
  font-weight:900;
  box-shadow: 0 8px 18px rgba(2,6,23,.06);
}
.mobileMenu a:hover{ transform: translateY(-1px); box-shadow: 0 12px 22px rgba(2,6,23,.10); }
.mobileMenu a.is-active{ border-color: rgba(47,107,255,.35); background: rgba(47,107,255,.08); }

.cta{display:flex; gap:10px; align-items:center; flex:0 0 auto}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:12px 14px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.92);
  color:var(--text);
  font-weight:900;
  font-size:14px;
  box-shadow: 0 8px 18px rgba(2,6,23,.06);
}
.btn:hover{transform: translateY(-1px); box-shadow: 0 12px 22px rgba(2,6,23,.10)}
.btn.primary{
  border:none;
  background: linear-gradient(90deg, var(--cold), var(--hot2));
  color:#fff;
  box-shadow: 0 18px 40px rgba(47,107,255,.22), 0 14px 32px rgba(240,124,10,.14);
}
.btn.primary:hover{background: linear-gradient(90deg, var(--cold2), var(--hot2))}
.btn.ghost{
  border:1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
  color:#fff;
  box-shadow:none;
}
.btn.ghost:hover{background: rgba(255,255,255,.10)}

.burger{
  display:none;
  width:46px; height:46px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.92);
  color: var(--text);
  box-shadow: 0 8px 18px rgba(2,6,23,.06);
}

.mobileMenu{
  display:none;
  padding:12px 0 18px;
}
.mobileMenu .row{display:grid; gap:10px}

/* Scroll reveal (fade/slide)
   Fallback-friendly: elements are VISIBLE by default.
   JS adds .has-js on <html> then we animate in. */
[data-reveal]{ opacity: 1; transform: none; }
.has-js [data-reveal]{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}
.has-js [data-reveal].reveal--in{ opacity: 1; transform: translateY(0); }
.has-js [data-reveal][data-reveal-delay="1"]{ transition-delay: .06s; }
.has-js [data-reveal][data-reveal-delay="2"]{ transition-delay: .12s; }
.has-js [data-reveal][data-reveal-delay="3"]{ transition-delay: .18s; }
.has-js [data-reveal][data-reveal-delay="4"]{ transition-delay: .24s; }
.has-js [data-reveal][data-reveal-delay="5"]{ transition-delay: .30s; }


/* Hero */
.hero{
  padding:74px 0 38px;
  background:
    radial-gradient(900px 420px at 15% 20%, rgba(47,107,255,.55), transparent 60%),
    radial-gradient(900px 420px at 85% 25%, rgba(255,157,46,.40), transparent 62%),
    linear-gradient(180deg, var(--navy) 0%, #0a1731 60%, rgba(246,248,252,0) 100%);
  color:#fff;
}
.heroGrid{display:grid; grid-template-columns: 1.08fr .92fr; gap:22px; align-items:stretch}

.kicker{
  display:inline-flex; gap:10px; align-items:center;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
  font-weight:900;
  font-size:13px;
}
.kicker .dot{width:10px; height:10px; border-radius:50%; background: var(--cold); box-shadow: 0 0 0 6px rgba(47,107,255,.18)}

.h1{margin:16px 0 12px; font-size:50px; line-height:1.02; letter-spacing:-.9px}
.sub{margin:0 0 18px; color: rgba(255,255,255,.80); font-size:16.5px; line-height:1.6; white-space:pre-line}

.heroActions{display:flex; gap:12px; flex-wrap:wrap; margin-top:12px}

.stats{
  display:flex; gap:10px; flex-wrap:wrap;
  margin-top:18px;
}
.stat{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
}
.stat .icon{
  width:36px; height:36px; border-radius:14px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.12);
}
.stat strong{display:block; font-size:14px}
.stat span{display:block; color: rgba(255,255,255,.78); font-size:12.5px; font-weight:700}

.heroCard{
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: 0 20px 60px rgba(0,0,0,.22);
  overflow:hidden;
  position:relative;
}
.heroCard .img{height:330px; background: url("../img/hero-hp.webp") center/cover no-repeat; filter:saturate(1.05) contrast(1.05)}
.heroCard .overlay{
  position:absolute; inset:auto 0 0 0;
  padding:16px;
  background: linear-gradient(180deg, transparent, rgba(11,27,58,.88));
}
.pills{display:flex; gap:8px; flex-wrap:wrap}
.pill{
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.90);
  font-weight:900;
  font-size:12px;
}

/* Sections */
.section{padding:44px 0}
.sectionTitle{
  text-align:center;
  margin-bottom:18px;
}
.sectionTitle h2{margin:0; font-size:28px; letter-spacing:-.4px}
.sectionTitle p{margin:10px auto 0; color:var(--muted); max-width:760px; line-height:1.55}

/* Section sombre (style BorealClim) */
.section--dark{
  background:
    radial-gradient(820px 420px at 15% 15%, rgba(47,107,255,.34), transparent 60%),
    radial-gradient(820px 420px at 85% 20%, rgba(255,157,46,.24), transparent 62%),
    linear-gradient(180deg, rgba(11,27,58,.94), rgba(11,27,58,.90));
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sectionTitle--dark h2{color:#fff}
.sectionTitle--dark p{color: rgba(255,255,255,.72)}

/* Partenaires */
.partners{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin-top:14px;
}
.partner{
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.90);
  font-weight:900;
  letter-spacing:.2px;
}

/* Zone visuelle */
.zoneWrap{display:grid; grid-template-columns: 1fr 1.2fr; gap:14px; align-items:stretch}
.zoneMap{position:relative; overflow:hidden; min-height:260px;}
.zoneMap__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(520px 260px at 20% 25%, rgba(47,107,255,.22), transparent 60%),
    radial-gradient(520px 260px at 80% 20%, rgba(255,157,46,.18), transparent 62%),
    linear-gradient(135deg, rgba(11,27,58,.92), rgba(16,42,87,.92));
  filter:saturate(1.1);
}
.zoneMap__content{position:relative; z-index:1; color:#fff; padding:18px}
.zoneMap__content strong{font-size:18px}
.chips{display:flex; flex-wrap:wrap; gap:10px}
.chip{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.82);
  color: var(--navy2);
  font-weight:900;
  font-size:12.5px;
  box-shadow: 0 10px 20px rgba(2,6,23,.08);
}

.dividerIcon{
  width:44px; height:44px;
  margin:18px auto 0;
  border-radius:16px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(47,107,255,.14), rgba(255,157,46,.14));
  border: 1px solid rgba(47,107,255,.20);
  color: var(--cold2);
  font-weight:900;
}

.grid3{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px}

.card{
  border:1px solid var(--stroke);
  background: var(--surface);
  border-radius: var(--radius);
  padding:18px;
  box-shadow: var(--shadow2);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover{transform: translateY(-2px); box-shadow: var(--shadow)}

.card h3{margin:0 0 10px; font-size:16px; letter-spacing:-.1px}
.card p{margin:0; color:var(--muted); line-height:1.6}

.badge{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(47,107,255,.18);
  background: rgba(47,107,255,.08);
  color: var(--cold2);
  font-weight:900;
  font-size:12px;
}

.split{display:grid; grid-template-columns: 1fr 1fr; gap:14px}
.callout{
  border:1px solid rgba(47,107,255,.20);
  background: linear-gradient(135deg, rgba(47,107,255,.08), rgba(255,157,46,.06));
  border-radius: var(--radius);
  padding:18px;
}
.callout strong{color: var(--text)}
.callout p{margin:10px 0 0; color:var(--muted); line-height:1.6}

.gallery{display:grid; grid-template-columns: repeat(3, 1fr); gap:10px}
.gallery img{border-radius:18px; border:1px solid var(--stroke); height:210px; width:100%; object-fit:cover; box-shadow: var(--shadow2)}

/* Forms */
.form{display:grid; gap:12px}
.input{
  width:100%;
  padding:13px 14px;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.12);
  background: #ffffff;
  color:var(--text);
  outline:none;
  box-shadow: 0 8px 18px rgba(2,6,23,.06);
}
.input:focus{border-color: rgba(47,107,255,.45); box-shadow: 0 0 0 5px rgba(47,107,255,.12)}
textarea.input{min-height:140px; resize:vertical}

.small{font-size:14px; color:var(--muted); line-height:1.6}

/* Footer */
.footer{
  background: linear-gradient(180deg, rgba(11,27,58,.06), rgba(11,27,58,.10));
  border-top: 1px solid var(--stroke);
  padding:34px 0 26px;
}
.footerGrid{display:grid; grid-template-columns: 1.1fr .9fr; gap:14px; align-items:start}
.badges{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}

/* Responsive */
@media (max-width: 980px){
  .menu{display:none}
  .burger{display:inline-flex; align-items:center; justify-content:center}
  .cta{display:none}
  .heroGrid{grid-template-columns:1fr;}
  .zoneWrap{grid-template-columns:1fr}
  .h1{font-size:42px}
  .grid3{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .footerGrid{grid-template-columns:1fr}
}

@media (max-width: 420px){
  .h1{font-size:36px}
  .btn{width:100%}
  .stat{width:100%}
}


/* Contact form additions */
.label{display:block;font-weight:600;margin:0 0 .35rem;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:0 0 1rem;}
@media (max-width: 780px){.grid-2{grid-template-columns:1fr;}}