/* ── Typographie Inter auto-hébergée (OFL 1.1) ────────────────── */
@font-face { font-family:'Inter'; src:url('assets/fonts/inter-300.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('assets/fonts/inter-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('assets/fonts/inter-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('assets/fonts/inter-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('assets/fonts/inter-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }

/* ── Variables ────────────────────────────────────────────────── */
:root {
  --navy:    #082A46;
  --petrol:  #31737F;
  --aqua:    #5EAAAD;
  --aqua-lt: #8DCDD0;
  --gray:    #626B73;
  --gray-lt: #F4F6F8;
  --white:   #FFFFFF;
  --text:    #1A2733;
  --text-muted: #4A5568;
  --nav-h:   72px;
  --radius:  10px;
  --shadow:  0 4px 24px rgba(8,42,70,.10);
  --transition: 0.22s ease;
}

/* ── Reset ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body { font-family:'Inter', system-ui, -apple-system, sans-serif; color:var(--text); background:var(--white); line-height:1.65; -webkit-font-smoothing:antialiased; }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
button { cursor:pointer; border:none; background:none; }

/* ── Container ────────────────────────────────────────────────── */
.container { width:100%; max-width:1160px; margin:0 auto; padding:0 28px; }

/* ── Sections ─────────────────────────────────────────────────── */
.section { padding:88px 0; }
.section-header { text-align:center; max-width:680px; margin:0 auto 56px; }
.section-eyebrow { font-size:.75rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--aqua); margin-bottom:12px; }
.section-title { font-size:clamp(1.6rem, 3.5vw, 2.25rem); font-weight:700; color:var(--navy); line-height:1.2; margin-bottom:16px; }
.section-title--light { color:var(--white); }
.section-intro { font-size:1.05rem; color:var(--text-muted); line-height:1.75; }
.section-intro--light { color:rgba(255,255,255,.75); }

/* ── Buttons ──────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:8px; padding:13px 26px; border-radius:6px; font-weight:600; font-size:.925rem; transition:all var(--transition); white-space:nowrap; }
.btn-primary { background:var(--aqua); color:var(--white); }
.btn-primary:hover { background:var(--petrol); transform:translateY(-1px); box-shadow:0 6px 20px rgba(94,170,173,.35); }
.btn-ghost { background:transparent; color:var(--white); border:1.5px solid rgba(255,255,255,.5); }
.btn-ghost:hover { background:rgba(255,255,255,.1); border-color:var(--white); }
.btn-lg { padding:16px 32px; font-size:1rem; }

/* ════════════════════════ NAVIGATION ════════════════════════════ */
.nav-header {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:var(--nav-h);
  background:var(--navy);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:box-shadow var(--transition);
}
.nav-header.scrolled { box-shadow:0 2px 20px rgba(8,42,70,.3); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:100%; }
.nav-logo { display:flex; align-items:center; flex-shrink:0; }
.nav-logo img { height:44px; width:auto; }
.nav-links { display:flex; align-items:center; gap:8px; }
.nav-links a { font-size:.875rem; font-weight:500; color:rgba(255,255,255,.82); padding:8px 14px; border-radius:6px; transition:all var(--transition); }
.nav-links a:hover { color:var(--white); background:rgba(255,255,255,.1); }
.nav-links .nav-cta { background:var(--aqua); color:var(--white); padding:8px 18px; }
.nav-links .nav-cta:hover { background:var(--aqua-lt); }
.nav-burger { display:none; flex-direction:column; gap:5px; padding:6px; }
.nav-burger span { display:block; width:22px; height:2px; background:var(--white); border-radius:2px; transition:all var(--transition); }
.nav-burger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity:0; }
.nav-burger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ════════════════════════ HERO ══════════════════════════════════ */
.hero {
  min-height:100vh;
  padding-top:var(--nav-h);
  background:var(--navy);
  display:flex; flex-direction:column; justify-content:center;
  position:relative; overflow:hidden;
}
.hero-inner {
  display:grid;
  grid-template-columns:1fr 420px;
  gap:60px;
  align-items:center;
  padding-top:48px;
  padding-bottom:64px;
}
.hero-content { max-width:600px; }
.hero-eyebrow { font-size:.78rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--aqua); margin-bottom:18px; }
.hero-title { font-size:clamp(1.8rem, 4vw, 3rem); font-weight:700; color:var(--white); line-height:1.18; margin-bottom:24px; }
.hero-desc { font-size:1.05rem; color:rgba(255,255,255,.78); line-height:1.8; margin-bottom:36px; max-width:520px; }
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; }
.hero-visual { display:flex; align-items:center; justify-content:center; }
.hero-symbol { width:340px; max-width:100%; opacity:.18; filter:brightness(2); }
.hero-scroll { position:absolute; bottom:32px; left:50%; transform:translateX(-50%); display:flex; justify-content:center; }
.scroll-line { width:1px; height:40px; background:linear-gradient(to bottom, transparent, rgba(94,170,173,.6)); animation:scroll-pulse 2s ease-in-out infinite; }
@keyframes scroll-pulse { 0%,100%{opacity:.3} 50%{opacity:1} }

/* ════════════════════════ VALUES STRIP ══════════════════════════ */
.values-strip { background:var(--petrol); padding:20px 0; }
.values-inner { display:flex; align-items:center; justify-content:center; gap:0; flex-wrap:wrap; }
.value-item { display:flex; align-items:center; gap:10px; padding:10px 32px; font-size:.88rem; font-weight:500; color:rgba(255,255,255,.9); }
.value-icon { color:var(--aqua-lt); font-size:.5rem; }
.value-sep { width:1px; height:24px; background:rgba(255,255,255,.2); }

/* ════════════════════════ EXPERTISES ════════════════════════════ */
/* Grille 2×2 fixe sur desktop */
.cards-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.card {
  background:var(--white);
  border:1px solid #E8EDF2;
  border-radius:var(--radius);
  padding:32px;
  box-shadow:var(--shadow);
  transition:transform var(--transition), box-shadow var(--transition);
  display:flex; flex-direction:column; gap:16px;
}
.card:hover { transform:translateY(-4px); box-shadow:0 12px 36px rgba(8,42,70,.14); }
.card-icon { width:48px; height:48px; background:var(--gray-lt); border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.card-icon svg { width:26px; height:26px; stroke:var(--petrol); }
.card-title { font-size:1.08rem; font-weight:700; color:var(--navy); line-height:1.3; }
.card-text { font-size:.9rem; color:var(--text-muted); line-height:1.7; }
.card-list { display:flex; flex-direction:column; gap:8px; margin-top:auto; }
.card-list li { font-size:.875rem; color:var(--text-muted); padding-left:16px; position:relative; line-height:1.5; }
.card-list li::before { content:''; position:absolute; left:0; top:8px; width:5px; height:5px; border-radius:50%; background:var(--aqua); }

/* ════════════════════════ ENJEUX ════════════════════════════════ */
.section-enjeux { background:var(--navy); }
.enjeux-grid { display:grid; grid-template-columns:1fr 1fr; gap:2px; border:1px solid rgba(255,255,255,.1); border-radius:var(--radius); overflow:hidden; }
.enjeu-item { display:flex; gap:20px; align-items:flex-start; padding:32px 28px; background:rgba(255,255,255,.03); transition:background var(--transition); border:1px solid rgba(255,255,255,.06); }
.enjeu-item:hover { background:rgba(255,255,255,.06); }
.enjeu-num { font-size:2rem; font-weight:700; color:var(--aqua); opacity:.8; flex-shrink:0; line-height:1; min-width:44px; }
.enjeu-title { font-size:.975rem; font-weight:600; color:var(--white); line-height:1.45; margin-bottom:10px; }
.enjeu-text { font-size:.875rem; color:rgba(255,255,255,.65); line-height:1.7; }

/* ════════════════════════ APPROCHE ══════════════════════════════ */
.section-approche { background:var(--navy); padding-top:0; }
.steps-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; }
.steps-grid::before { content:''; position:absolute; top:36px; left:10%; right:10%; height:1px; background:linear-gradient(to right, transparent, var(--aqua), transparent); pointer-events:none; }
.step { padding:40px 24px 32px; text-align:center; position:relative; }
.step-num {
  font-size:2.2rem; font-weight:700;
  color:var(--aqua);
  opacity:.9;
  line-height:1;
  margin-bottom:20px;
}
.step-title { font-size:1rem; font-weight:600; color:var(--white); margin-bottom:12px; }
.step-text { font-size:.875rem; color:rgba(255,255,255,.65); line-height:1.75; }

/* ════════════════════════ À PROPOS ══════════════════════════════ */
.about-inner { display:grid; grid-template-columns:280px 1fr; gap:64px; align-items:center; }
.about-visual { display:flex; align-items:center; justify-content:center; }
.about-symbol { width:220px; opacity:.85; }
.about-content { display:flex; flex-direction:column; gap:20px; }
.about-text { font-size:.975rem; color:var(--text-muted); line-height:1.8; }
.about-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.tag { background:var(--gray-lt); color:var(--navy); font-size:.78rem; font-weight:600; padding:5px 12px; border-radius:100px; letter-spacing:.02em; }

/* ════════════════════════ CONTACT ═══════════════════════════════ */
.section-contact { background:var(--gray-lt); }
.contact-inner { display:flex; flex-direction:column; align-items:center; text-align:center; }
.contact-block { display:flex; flex-direction:column; align-items:center; gap:20px; margin-top:8px; }
.contact-email { font-size:1.35rem; font-weight:600; color:var(--navy); transition:color var(--transition); }
.contact-email:hover { color:var(--petrol); }
.contact-tel { font-size:1rem; color:var(--gray); font-weight:500; transition:color var(--transition); }
.contact-tel:hover { color:var(--navy); }

/* ════════════════════════ FOOTER ════════════════════════════════ */
.footer { background:var(--navy); padding:48px 0 32px; }
.footer-inner { display:grid; grid-template-columns:1fr 2fr 1fr; gap:32px; align-items:start; }
.footer-brand { display:flex; flex-direction:column; gap:10px; }
.footer-tagline { font-size:.78rem; color:rgba(255,255,255,.5); font-weight:500; letter-spacing:.04em; }
.footer-nav { display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:center; }
.footer-nav a { font-size:.85rem; color:rgba(255,255,255,.6); transition:color var(--transition); }
.footer-nav a:hover { color:var(--white); }
.footer-legal { font-size:.8rem; color:rgba(255,255,255,.4); text-align:right; line-height:1.6; }
.footer-sub { font-size:.75rem; }

/* ════════════════════════ RESPONSIVE ════════════════════════════ */
@media (max-width:1023px) {
  .hero-inner { grid-template-columns:1fr; gap:32px; }
  .hero-visual { display:none; }
  .hero-content { max-width:100%; }
  .about-inner { grid-template-columns:1fr; gap:40px; }
  .about-visual { display:none; }
  .steps-grid { grid-template-columns:1fr 1fr; }
  .steps-grid::before { display:none; }
  .footer-inner { grid-template-columns:1fr; gap:28px; }
  .footer-legal { text-align:left; }
}

@media (max-width:767px) {
  :root { --nav-h:60px; }
  .section { padding:64px 0; }
  .section-header { margin-bottom:40px; }

  /* Nav mobile */
  .nav-logo img { height:36px; }
  .nav-burger { display:flex; }
  .nav-links {
    display:none; flex-direction:column; gap:4px;
    position:fixed; top:var(--nav-h); left:0; right:0;
    background:var(--navy);
    padding:20px 24px 28px;
    border-bottom:1px solid rgba(255,255,255,.1);
    box-shadow:0 8px 32px rgba(8,42,70,.4);
  }
  .nav-links.open { display:flex; }
  .nav-links a { padding:12px 16px; font-size:.95rem; border-radius:8px; }
  .nav-links .nav-cta { margin-top:8px; text-align:center; justify-content:center; }

  /* Hero */
  .hero { min-height:100svh; }
  .hero-inner { padding-top:36px; padding-bottom:48px; }
  .hero-title { font-size:1.75rem; }
  .hero-desc { font-size:.95rem; }
  .hero-actions { flex-direction:column; gap:12px; }
  .hero-actions .btn { width:100%; justify-content:center; }

  /* Values */
  .values-inner { flex-direction:column; gap:4px; padding:8px 0; }
  .value-sep { width:40px; height:1px; }

  /* Cards 2×2 → 1 colonne sur mobile */
  .cards-grid { grid-template-columns:1fr; }

  /* Enjeux */
  .enjeux-grid { grid-template-columns:1fr; }
  .enjeu-num { font-size:1.5rem; min-width:36px; }

  /* Approche */
  .steps-grid { grid-template-columns:1fr; }
  .step { padding:28px 20px; text-align:left; }

  /* Footer */
  .footer-nav { justify-content:flex-start; }
}

@media (min-width:768px) and (max-width:1023px) {
  /* Tablette : 2 cols expertises déjà géré, enjeux 1 col */
  .enjeux-grid { grid-template-columns:1fr; }
}

/* ── Utilitaires accessibilité ───────────────────────────────── */
:focus-visible { outline:3px solid var(--aqua); outline-offset:3px; }
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { transition:none !important; animation:none !important; }
}