/* ═══════════════════════════════════════════
   BRAND STRATEGY LAB — style.css  v3
   ═══════════════════════════════════════════ */
#mainNav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px var(--pad-x);
}
h1 {
  font-family: 'Poppins', sans-serif;
  font-size: 72px;
  font-weight: 800;
  line-height: 1.1;
  color: #0D2B4E;
  }
  #impact-line {
  font-family: 'Poppins', sans-serif;
  font-size: 72px;
  font-weight: 800;
  line-height: 1.1;
  color: #0D2B4E;
  }
.logo-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* <-- gauche */
}


.nav-logo {
  width: 120px;   /* ajuste taille logo */
  height: auto;
  display: block;
}

#org {
  color: #E8861A;
font-family: 'Manrope', sans-serif;
font-style: oblique;

}
.nav-logo {
  display: block;

}

.hero-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: #1C2E4A;
  margin-bottom: 20px;
  margin-top: 20px; 
}
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&family=Lora:ital,wght@0,400;0,600;1,400&display=swap');

*, *::before, *::after { box-sizing: border-box; border-radius: 0.5rem ;  padding: 0; }

:root {
  --orange:       #E8861A;
  --orange-light: #FF9E3A;
  --orange-dim:   rgba(232,134,26,0.10);
  --blue:         #0D2B4E;
  --blue-card:    #1C2E4A;
  --white:        #FAFAF8;
  --gray-100:     #F0EEEb;
  --gray-300:     #C8C5BF;
  --gray-500:     #7A7872;
  --font-head:    'Poppins', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-serif:   'Lora', serif;
  --pad-x:        72px;
  --section-py:   160px;
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--white);
  color: var(--blue);
  overflow-x: hidden;
}

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--blue); }
::-webkit-scrollbar-thumb { background: var(--orange); border-radius: 2px; }

/* ─────────────────────────────────────────
   NAV
──────────────────────────────────────────*/
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px var(--pad-x);
  transition: background 0.5s, padding 0.4s, box-shadow 0.5s;
  border-radius: 0rem;
  background-color: #1C2951;
}
nav.scrolled {
  background: rgba(13,43,78,0.96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 12px var(--pad-x);
  box-shadow: 0 2px 40px rgba(0,0,0,0.28);
}
.nav-logo { text-decoration: none; display: flex; align-items: center; }
.logo-svg  { height: 62px; width: auto; transition: transform 0.35s; }
.nav-logo:hover .logo-svg { transform: scale(1.04); }

.nav-links { display: flex; gap: 36px; list-style: none; }

.nav-links a {
  font-family: var(--font-body); font-size: 12px; font-weight: 500;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: rgba(250,250,248,0.6); text-decoration: none;
  position: relative; transition: color 0.25s;
}
.nav-links a::after {
  content: ''; position: absolute; bottom: -3px; left: 0; right: 0;
  height: 1px; background: var(--orange);
  transform: scaleX(0); transition: transform 0.3s;
}
.nav-links a:hover { color: var(--orange); }
.nav-links a:hover::after { transform: scaleX(1); }

.nav-cta {
  font-family: var(--font-body); font-size: 12px; font-weight: 500;
  letter-spacing: 0.08em; color: var(--white); background: var(--orange);
  padding: 12px 28px; text-decoration: none; border: none; cursor: pointer;
  transition: background 0.25s, transform 0.25s, box-shadow 0.25s;
}
.nav-cta:hover {
  background: var(--orange-light); transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(232,134,26,0.35);
}
@media (max-width: 768px) {

  .nav-links {
    position: fixed;
    top: 0;
    right: -100%; /* caché */
    width: 100%;
    height: 100vh;
    background: #0D2B4E;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 0rem;

    transition: 0.4s;
  }
.nav-links.active {
  right: 0; /* visible */
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #0D2B4E;
  border-radius: 0rem;
  flex-direction: column;
  display: flex;

  padding: 20px;
  gap: 15px;

  z-index: 999;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);

  /* CORRECTION ESPACE INUTILE */
  height: auto;
  min-height: unset;
  bottom: auto;
  margin-top: 0;
  margin-bottom: 0;
}

}
/* ─────────────────────────────────────────
   HERO
──────────────────────────────────────────*/
.hero {
  min-height: 100vh; background: var(--blue); position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 var(--pad-x) 110px; overflow: hidden;
}

/* Grid subtle */
.hero-bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(250,250,248,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(250,250,248,0.028) 1px, transparent 1px);
  background-size: 80px 80px;
}

/* Particules triangle flottantes */
.hero-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hpart {
  position: absolute; width: 0; height: 0; opacity: 0;
  animation: partFloat linear infinite;
}
/* tailles / positions / délais variés */
.hpart:nth-child(1)  { border-left:40px solid transparent; border-right:40px solid transparent; border-bottom:70px solid rgba(232,134,26,.10); top:8%;  left:72%; animation-duration:18s; animation-delay:0s; }
.hpart:nth-child(2)  { border-left:18px solid transparent; border-right:18px solid transparent; border-bottom:32px solid rgba(232,134,26,.20); top:60%; left:80%; animation-duration:12s; animation-delay:2s; }
.hpart:nth-child(3)  { border-left:60px solid transparent; border-right:60px solid transparent; border-bottom:104px solid rgba(29,62,100,.35);  top:18%; left:55%; animation-duration:20s; animation-delay:4s; }
.hpart:nth-child(4)  { border-left:14px solid transparent; border-right:14px solid transparent; border-bottom:24px solid rgba(232,134,26,.28); top:70%; left:65%; animation-duration:9s;  animation-delay:1s; }
.hpart:nth-child(5)  { border-left:80px solid transparent; border-right:80px solid transparent; border-bottom:138px solid rgba(232,134,26,.05); top:2%;  left:60%; animation-duration:22s; animation-delay:3s; }
.hpart:nth-child(6)  { border-left:28px solid transparent; border-right:28px solid transparent; border-bottom:48px solid rgba(29,62,100,.22);   top:80%; left:50%; animation-duration:14s; animation-delay:5s; }
.hpart:nth-child(7)  { border-left:50px solid transparent; border-right:50px solid transparent; border-bottom:86px solid rgba(232,134,26,.08); top:35%; left:88%; animation-duration:16s; animation-delay:6s; }
.hpart:nth-child(8)  { border-left:22px solid transparent; border-right:22px solid transparent; border-bottom:38px solid rgba(232,134,26,.15); top:50%; left:92%; animation-duration:11s; animation-delay:7s; }

@keyframes partFloat {
  0%   { opacity:0; transform:translateY(40px) rotate(0deg); }
  10%  { opacity:1; }
  50%  { transform:translateY(-60px) rotate(12deg); }
  90%  { opacity:.8; }
  100% { opacity:0; transform:translateY(40px) rotate(0deg); }
}

/* Cercles accent */
.hero-circle {
  position: absolute; border-radius: 50%;
  animation: circleBreath 6s ease-in-out infinite;
}
.hero-circle-1 {
  top: -130px; right: -100px; width: 620px; height: 620px;
  border: 1px solid rgba(232,134,26,0.12);
  animation-delay: 0s;
}
.hero-circle-2 {
  top: -50px; right: -160px; width: 840px; height: 840px;
  border: 1px solid rgba(232,134,26,0.06);
  animation-delay: 1.5s;
}
.hero-circle-3 {
  top: 30px; right: -220px; width: 1060px; height: 1060px;
  border: 1px solid rgba(232,134,26,0.03);
  animation-delay: 3s;
}
@keyframes circleBreath {
  0%,100% { transform: scale(1); opacity:1; }
  50%      { transform: scale(1.03); opacity:.6; }
}

/* Gradient warm overlay droite */
.hero-warm {
  position: absolute; top: 0; right: 0; width: 50%; height: 100%;
  background: linear-gradient(135deg, rgba(232,134,26,.07) 0%, transparent 55%);
}

/* Contenu hero */
.hero-eyebrow {
  font-family: var(--font-serif); font-style: italic; font-size: 12px;
  letter-spacing: 0.14em; color: var(--orange);
  margin-bottom: 32px; position: relative;
  margin-top: 80px;
  display: flex; align-items: center; gap: 14px;
}
.hero-eyebrow::before { content:''; width:36px; height:1px; background:var(--orange); }

.hero h1 {
  margin-top: 200px;
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(52px, 6.8vw, 102px); line-height: 0.96;
  letter-spacing: -0.025em; color: var(--white);
  max-width: 860px; position: relative;
}
.hero h1 em { font-style: normal; color: var(--orange); }

.hero-sub {
  margin-top: 38px; max-width: 500px; font-size: 15.5px; line-height: 1.72;
  font-weight: 300; color: rgba(250,250,248,.60); position: relative;
}

.hero-actions {
  margin-top: 52px; display: flex; align-items: center; gap: 36px; position: relative;
}

.btn-primary {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-body); font-size: 12px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--white); background: var(--orange);
  padding: 18px 40px; text-decoration: none;
  transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
}
.btn-primary svg { transition: transform 0.3s; }
.btn-primary:hover {
  background: var(--orange-light); transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(232,134,26,0.38);
}
.btn-primary:hover svg { transform: translateX(6px); }

.hero-scroll {
  font-family: var(--font-serif); font-style: italic; font-size: 12px;
  letter-spacing: 0.08em; color: rgba(250,250,248,.30);
  animation: scrollBlink 2.5s ease-in-out infinite;
}
@keyframes scrollBlink {
  0%,100% { opacity:.3; } 50% { opacity:.9; }
}

/* Stats bar */
.hero-bottom-bar {
  position: absolute; bottom: 0; left: 0; right: 0;
  border-top: 1px solid rgba(250,250,248,.08);
  display: flex; padding: 0 var(--pad-x);
}
.hero-bottom-item {
  flex:1; padding: 20px 0 20px 40px;
  border-right: 1px solid rgba(250,250,248,.08);
  display: flex; align-items: center; gap: 16px;
  transition: background 0.3s;
}
.hero-bottom-item:first-child { padding-left: 0; }
.hero-bottom-item:last-child  { border-right: none; }
.hero-bottom-item:hover { background: rgba(250,250,248,.03); }
.hbi-num   { font-family:var(--font-head); font-size:28px; font-weight:800; color:var(--orange); }
.hbi-label {
  font-family: var(--font-serif); font-style: italic; font-size: 11px;
  color: rgba(250,250,248,.42); line-height: 1.5;
}

/* ─────────────────────────────────────────
   SECTION LABEL
──────────────────────────────────────────*/
.section-label {
  font-family: var(--font-serif); font-style: italic; font-size: 12px;
  letter-spacing: 0.13em; color: var(--orange); margin-bottom: 24px;
  display: flex; align-items: center; gap: 12px;
}
.section-label::before { content:''; width:22px; height:1px; background:var(--orange); }

/* ─────────────────────────────────────────
   INSIGHT
──────────────────────────────────────────*/
.insight {
  background: var(--white); padding: var(--section-py) var(--pad-x);
  display: grid; grid-template-columns: 1fr 1fr; gap: 110px; align-items: center;
}
.insight-left h2 {
  font-family: var(--font-head); font-size: clamp(28px,3vw,48px);
  font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; color: var(--blue);
}
.insight-right { border-left: 1px solid var(--gray-300); padding-left: 56px; }
.insight-line {
  padding: 26px 0; border-bottom: 1px solid var(--gray-300);
  font-size: 14.5px; font-weight: 300; line-height: 1.72;
  color: var(--gray-500); transition: color 0.25s, padding-left 0.25s;
}
.insight-line:first-child { border-top: 1px solid var(--gray-300); }
.insight-line:hover { color: var(--blue); padding-left: 8px; }
.insight-line strong { font-weight: 500; color: var(--blue); }

/* ─────────────────────────────────────────
   VALEUR
──────────────────────────────────────────*/
.value-prop { background: var(--blue); padding: var(--section-py) var(--pad-x); }
.value-prop-head {
  display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 80px;
}
.value-prop h2 {
  font-family: var(--font-head); font-size: clamp(28px,3vw,48px);
  font-weight: 700; line-height: 1.12; color: var(--white); max-width: 460px; letter-spacing: -0.02em;
}
.value-prop-desc {
  max-width: 320px; font-family: var(--font-serif); font-style: italic;
  font-size: 14px; line-height: 1.72; color: rgba(250,250,248,.50); text-align: right;
}
.vp-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; }
.vp-card {
  background: rgba(250,250,248,.04); padding: 52px 44px;
  position: relative; overflow: hidden;
  transition: background 0.35s, transform 0.35s;
}
.vp-card::before {
  content:''; position:absolute; top:0; left:0; width:3px; height:0;
  background: var(--orange); transition: height 0.45s;
}
/* Triangle décoratif coin bas-droit */
.vp-card::after {
  content:''; position:absolute; bottom:0; right:0;
  border-bottom: 60px solid rgba(232,134,26,.06);
  border-left: 60px solid transparent;
  transition: border-color 0.35s;
}
.vp-card:hover { background: rgba(250,250,248,.07); transform: translateY(-4px); }
.vp-card:hover::before { height: 100%; }
.vp-card:hover::after  { border-bottom-color: rgba(232,134,26,.14); }
.vp-card-num {
  font-family:var(--font-head); font-size:11px; font-weight:600;
  letter-spacing:0.18em; color:var(--orange); margin-bottom:28px;
}
.vp-card h3 {
  font-family:var(--font-head); font-size:20px; font-weight:700;
  color:var(--white); margin-bottom:14px; line-height:1.22;
}
.vp-card p {
  font-family:var(--font-body); font-size:13.5px; font-weight:300;
  line-height:1.75; color:rgba(250,250,248,.46);
}

/* ─────────────────────────────────────────
   PHOTO STRIP — images du domaine
──────────────────────────────────────────*/
.photo-strip {
  background: var(--blue); padding: 0 var(--pad-x) var(--section-py);
  display: grid; grid-template-columns: repeat(3,1fr); gap: 3px;
}
.photo-card {
  position: relative; overflow: hidden; aspect-ratio: 4/3;
}
.photo-card img {
  width:100%; height:100%; object-fit:cover;
  filter: saturate(.6) brightness(.65);
  transition: filter 0.55s, transform 0.55s;
}
.photo-card:hover img { filter: saturate(.9) brightness(.80); transform: scale(1.06); }
.photo-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(13,43,78,.85) 0%, transparent 60%);
  transition: background 0.35s;
}
.photo-card:hover .photo-overlay {
  background: linear-gradient(to top, rgba(13,43,78,.6) 0%, rgba(232,134,26,.1) 100%);
}
.photo-label {
  position: absolute; bottom: 24px; left: 24px;
  font-family: var(--font-head); font-size: 15px; font-weight: 700;
  color: var(--white); letter-spacing: 0.04em;
  transform: translateY(6px); opacity: .9;
  transition: transform 0.35s, opacity 0.35s;
}
.photo-sub {
  position: absolute; bottom: 44px; left: 24px;
  font-family: var(--font-serif); font-style: italic; font-size: 11px;
  color: var(--orange); letter-spacing: 0.08em;
  transform: translateY(8px); opacity: 0;
  transition: transform 0.35s 0.05s, opacity 0.35s 0.05s;
}
.photo-card:hover .photo-label { transform: translateY(0); opacity: 1; }
.photo-card:hover .photo-sub   { transform: translateY(0); opacity: 1; }

nav {

}

/* ─────────────────────────────────────────
   METHODOLOGY — Diagramme triangles SVG
──────────────────────────────────────────*/
.methodology { padding: var(--section-py) var(--pad-x); }
.methodology-head { text-align:center; margin-bottom:80px; }
.methodology-head h2 {
  font-family: var(--font-head); font-size: clamp(34px,4.5vw,64px);
  font-weight: 800; letter-spacing: -0.03em; color: var(--blue); line-height:1;
}
.methodology-head h2 sup { font-size:18px; color:var(--orange); vertical-align:super; }
.methodology-head p {
  margin-top:14px; font-family:var(--font-serif); font-style:italic;
  font-size:14px; color:var(--gray-500);
}
.tri-diagram { max-width: 800px; margin: 0 auto; }
.tri-diagram svg { width:100%; height:auto; filter:drop-shadow(0 18px 52px rgba(13,43,78,.12)); }

/* SVG animations */
.tri-outer-border { animation: pulseBorder 4s ease-in-out infinite; }
@keyframes pulseBorder { 0%,100%{opacity:.18} 50%{opacity:.5} }
.tri-top   { animation: triFloat 7s ease-in-out infinite 0s;   cursor:pointer; }
.tri-left  { animation: triFloat 7s ease-in-out infinite 0.7s; cursor:pointer; }
.tri-right { animation: triFloat 7s ease-in-out infinite 1.4s; cursor:pointer; }
@keyframes triFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.label-think { animation: labelPulse 3s ease-in-out infinite 0s; }
.label-build  { animation: labelPulse 3s ease-in-out infinite 1s; }
.label-lead   { animation: labelPulse 3s ease-in-out infinite 2s; }
@keyframes labelPulse { 0%,100%{opacity:.75} 50%{opacity:1} }

/* ─────────────────────────────────────────
   SERVICES
──────────────────────────────────────────*/
.services { background: var(--white); padding: var(--section-py) var(--pad-x); }
.services-head {
  display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 80px;
}
.services-head h2 {
  font-family: var(--font-head); font-size: clamp(28px,3vw,48px);
  font-weight:700; color:var(--blue); letter-spacing:-0.02em; line-height:1.12; max-width:360px;
}
.services-list { border-top: 1px solid var(--gray-300); }
.service-item {
  display: grid; grid-template-columns: 76px 1fr auto;
  align-items: center; gap: 56px; padding: 36px 0;
  border-bottom: 1px solid var(--gray-300);
  transition: padding-left 0.3s, background 0.3s;
}
.service-item:hover { padding-left: 20px; background: rgba(13,43,78,.02); }
.service-item:hover .si-num { color: var(--orange); }
.si-num {
  font-family:var(--font-head); font-size:12px; font-weight:600;
  letter-spacing:0.12em; color:var(--gray-300); transition:color 0.3s;
}
.si-name { font-family:var(--font-head); font-size:20px; font-weight:700; color:var(--blue); }
.si-desc {
  font-family:var(--font-serif); font-style:italic;
  font-size:13px; color:var(--gray-500); margin-top:5px; line-height:1.55;
}
.si-arrow {
  width:38px; height:38px; border:1px solid var(--gray-300);
  display:flex; align-items:center; justify-content:center;
  transition:all 0.3s; flex-shrink:0;
}
.service-item:hover .si-arrow { background:var(--orange); border-color:var(--orange); }
.service-item:hover .si-arrow path { stroke:#fff !important; }

/* ─────────────────────────────────────────
   CRÉDIBILITÉ
──────────────────────────────────────────*/
.credibility {
  background: var(--blue); padding: var(--section-py) var(--pad-x);
  display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: center;
}
.cred-left h2 {
  font-family:var(--font-head); font-size:clamp(26px,2.8vw,44px); font-weight:700;
  color:var(--white); line-height:1.16; letter-spacing:-0.02em; margin-bottom:22px;
}
.cred-left p {
  font-family:var(--font-body); font-size:14.5px; font-weight:300;
  line-height:1.78; color:rgba(250,250,248,.52);
}
.cred-right { display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.cred-stat {
  background:rgba(250,250,248,.04); padding:48px 40px;
  transition: background 0.3s, transform 0.3s;
}
.cred-stat:hover { background:rgba(250,250,248,.07); transform:translateY(-3px); }
.cred-stat-num {
  font-family:var(--font-head); font-size:60px; font-weight:800;
  color:var(--orange); line-height:1; letter-spacing:-0.03em;
}
.cred-stat-unit { font-size:26px; }
.cred-stat-label {
  font-family:var(--font-serif); font-style:italic; font-size:12px;
  color:rgba(250,250,248,.40); margin-top:12px; line-height:1.55;
}

/* ─────────────────────────────────────────
   PRÉ-FOOTER DÉGRADÉ
──────────────────────────────────────────*/
.pre-footer-gradient {
  position: relative; padding: 120px var(--pad-x) 100px;
  background: linear-gradient(160deg,
    #0D2B4E 0%,
    #1a3a62 25%,
    #0f3255 50%,
    #1C2E4A 70%,
    #E8861A 120%
  );
  overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 60px;
}
/* Effet grain/texture */
.pre-footer-gradient::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 200px;
  opacity: .5; pointer-events: none;
}
/* Triangles décoratifs dans le dégradé */
.pfg-tri {
  position: absolute; width:0; height:0; pointer-events:none;
  animation: pfgFloat 8s ease-in-out infinite;
}
.pfg-tri-1 { border-left:80px solid transparent; border-right:80px solid transparent; border-bottom:140px solid rgba(250,250,248,.04); bottom:-30px; right:8%; animation-delay:0s; }
.pfg-tri-2 { border-left:40px solid transparent; border-right:40px solid transparent; border-bottom:70px solid rgba(232,134,26,.12); bottom:40px; right:22%; animation-delay:2s; }
.pfg-tri-3 { border-left:120px solid transparent; border-right:120px solid transparent; border-bottom:208px solid rgba(250,250,248,.025); bottom:-60px; right:40%; animation-delay:4s; }
@keyframes pfgFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }

.pfg-left { position:relative; z-index:1; max-width:560px; }
.pfg-left h2 {
  font-family:var(--font-head); font-size:clamp(30px,3.5vw,52px);
  font-weight:800; color:var(--white); line-height:1.08; letter-spacing:-0.025em;
  margin-bottom:20px;
}
.pfg-left h2 em { font-style:normal; color:var(--orange); }
.pfg-left p {
  font-family:var(--font-body); font-size:15px; font-weight:300;
  color:rgba(250,250,248,.55); line-height:1.7;
}
.pfg-right { position:relative; z-index:1; flex-shrink:0; }

/* ─────────────────────────────────────────
   CTA + FORMULAIRE
──────────────────────────────────────────*/
.cta-section {
  background: var(--white); padding: var(--section-py) var(--pad-x);
  display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: center;
}
.cta-left h2 {
  font-family:var(--font-head); font-size:clamp(34px,4.2vw,64px);
  font-weight:800; color:var(--blue); line-height:1.06; letter-spacing:-0.03em;
}
.cta-left h2 em { font-style:normal; color:var(--orange); }
.cta-sub {
  margin-top:22px; font-size:15px; font-weight:300; color:var(--gray-500); line-height:1.72;
}
.cta-btn-group { margin-top:44px; display:flex; gap:14px; flex-wrap:wrap; }
.cta-tagline {
  margin-top:30px; font-family:var(--font-serif); font-style:italic;
  font-size:11px; color:var(--gray-300); letter-spacing:.09em;
}
.btn-secondary {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-body); font-size:12px; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; color:var(--blue);
  background:transparent; border:1px solid var(--blue);
  padding:14px 28px; text-decoration:none;
  transition:all 0.3s;
}
.btn-secondary:hover {
  background:var(--blue); color:var(--white);
  box-shadow: 0 8px 20px rgba(13,43,78,.20);
}

.contact-form { background:var(--gray-100); padding:56px; }
.form-title {
  font-family:var(--font-head); font-size:22px; font-weight:700;
  color:var(--blue); margin-bottom:30px;
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-group { margin-bottom:14px; }
.form-group label {
  display:block; font-family:var(--font-serif); font-style:italic;
  font-size:11px; color:var(--gray-500); margin-bottom:7px; letter-spacing:.07em;
}
.form-group input,
.form-group textarea {
  width:100%; background:var(--white); border:1px solid var(--gray-300);
  padding:13px 16px; font-family:var(--font-body); font-size:14px;
  font-weight:300; color:var(--blue); outline:none; transition:border-color 0.25s, box-shadow 0.25s;
}
.form-group input:focus,
.form-group textarea:focus {
  border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(232,134,26,.10);
}
.form-group textarea { height:100px; resize:none; }
.form-submit {
  width:100%; background:var(--blue); color:var(--white); border:none;
  padding:17px; font-family:var(--font-body); font-size:12px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; cursor:pointer;
  transition:background 0.3s, transform 0.3s, box-shadow 0.3s; margin-top:6px;
}
.form-submit:hover {
  background:var(--orange); transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(232,134,26,.30);
}

/* ─────────────────────────────────────────
   FOOTER
──────────────────────────────────────────*/
footer {
  background: #1C2951; border-top: 1px solid rgba(250,250,248,.08);
  padding: 56px var(--pad-x);
  display: flex; justify-content: space-between; align-items: center;
}
.footer-logo-svg { height:48px; width:auto; }
.footer-tagline-txt {
  font-family:var(--font-serif); font-style:italic; font-size:11px;
  color:rgba(250,250,248,.28); margin-top:7px; letter-spacing:.05em;
}
.footer-links { display:flex; gap:28px; list-style:none; }
.footer-links a {
  font-size:11px; font-weight:400; letter-spacing:.09em; text-transform:uppercase;
  color:rgba(250,250,248,.36); text-decoration:none; transition:color 0.2s;
}
.footer-links a:hover { color:var(--orange); }
.footer-social { display:flex; gap:12px; }
.social-link {
  width:34px; height:34px; border:1px solid rgba(250,250,248,.14);
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; transition:all 0.25s;
}
.social-link:hover { border-color:var(--orange); background:var(--orange-dim); transform:translateY(-2px); }
.footer-copy {
  font-family:var(--font-serif); font-style:italic; font-size:10px;
  color:rgba(250,250,248,.20); letter-spacing:.05em; margin-top:10px; text-align:right;
}

/* ─────────────────────────────────────────
   REVEAL ANIMATIONS
──────────────────────────────────────────*/
.reveal {
  opacity:0; transform:translateY(34px);
  transition:opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1);
}
.reveal.visible { opacity:1; transform:none; }
.reveal-delay-1 { transition-delay:.12s; }
.reveal-delay-2 { transition-delay:.24s; }
.reveal-delay-3 { transition-delay:.36s; }
.reveal-delay-4 { transition-delay:.48s; }

/* Counter animation */
.count-up { display:inline-block; }

/* ─────────────────────────────────────────
   RESPONSIVE
──────────────────────────────────────────*/
@media (max-width: 1024px) {
  :root { --pad-x: 40px; --section-py: 120px; }
}
@media (max-width: 768px) {
  :root { --pad-x: 24px; --section-py: 88px; }
  nav { padding: 14px var(--pad-x); }
  nav.scrolled { padding: 10px var(--pad-x); }
  .nav-links { display:none; }
  .hero { padding: 0 var(--pad-x) 130px; }
  .hero-bottom-bar { display:none; }
  .insight, .credibility, .cta-section { grid-template-columns:1fr; gap:52px; }
  .value-prop-head { flex-direction:column; align-items:flex-start; gap:20px; }
  .value-prop-desc { text-align:left; }
  .vp-cards, .cred-right, .form-row { grid-template-columns:1fr; }
  .photo-strip { grid-template-columns:1fr; }
  .insight-right { border-left:none; padding-left:0; border-top:1px solid var(--gray-300); padding-top:36px; }
  footer { flex-direction:column; gap:36px; text-align:center; }
  .footer-copy { text-align:center; }
  .contact-form { padding:36px 20px; }
  .pre-footer-gradient { flex-direction:column; gap:40px; }
  .tri-diagram { max-width:100%; }
}
.methodology{

  display: center;
  margin-left: 200px;
  margin-right: 200px;
  margin-top: -200px;
  margin-bottom: -300px;
  background-size: 0px;
  
 ;
   /* prend toute la hauteur de l’écran */

  background-image: url("file_0000000062a872468c59b7e932461ab0");
  background-size: contain;      /* garde l’image entière visible */
  background-repeat: no-repeat;  /* pas de répétition */
  background-position: center;   /* centre l’image */
  .hero {
  height: 100vh;
  position: relative;
  overflow: hidden;

  background: url("file_0000000062a872468c59b7e932461ab0") center/cover no-repeat;

  /* animation d’entrée */
 
}
/*═══════════════════════════════════════════ */
.methodology {
  display: block;
  margin: 200px, 200px;

  background-image: url("BSL.jpeg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  height: 100px; /* IMPORTANT sinon rien ne s'affiche */
}
#image {
  display: block;
  width: 70%;
  max-width: 600px;
  margin: 0 auto;

  opacity: 0;
  transform: translateY(60px);
  border: 3px solid black;
    padding-top: 0px;
    margin-top: 105px auto;
    border-radius: 8px;

    color: #fff;
    transition: transform 0.9s ease-in-out;
    transform: translateY(60px);
}

/* animation */
#image.visible {
  animation: fadeIn 4s ease forwards;
}

@keyframes fadeIn {
  to {
    transform: translateY(-30px);
  }
}
#image {
  display: block;
  width: 70%;
  max-width: 600px;
  margin: 60px auto;
  opacity: 1; /* important pour voir l'image */
}
#image:hover{
     transform:scale(1.006);
     box-shadow: 0 2px 12px darkorange;
}
div4{

  margin-left: 0px;
}
mainNav{
  margin-left: 0px;
}
.hamburger{

  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  z-index: 999;
}

.hamburger span {
  width: 26px;
  height: 2px;
  background: #FFFFFF;
  transition: 0.3s;
  
}
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translateY(7px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translateY(-7px);
}

/* MOBILE MENU */
@media (max-width: 768px) {
  .hamburger {
    display: flex;
  }

  .nav-links {
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    background: #FFFFFF;
    flex-direction: column;
    gap: 20px;
    padding: 30px;
    display: none;
  }

  .nav-links.active {
    display: flex;
  }
}
/* CORRECTION FINALE MENU HAMBURGER */

/* MOBILE */
@media (max-width:768px){

  .nav-links{
    position: fixed !important;
    top: 95px;
    left: 0;
    width: 100%;
    height: calc(100vh - 95px);

    background: #1C2E4A !important;   /* ← BLEU DEMANDÉ */
    
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 25px;

    z-index: 999;
  }

  .nav-links.active{
    display: flex !important;
    bottom: -400PX;
  }

  .nav-links li{
    list-style: none;
  }

  .nav-links a{
    color: white !important;
    font-size: 20px;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 1px;
  }

  .nav-links a:hover{
    color: #E8861A !important;
  }