:root{--primary:#1C4E80;--accent:#16A34A;--bg:#F8FAFC}
*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,Helvetica,sans-serif;color:#0f172a;background:var(--bg)}
.container{max-width:1160px;margin:0 auto;padding:0 20px}
.nav{position:sticky;top:0;background:#fff;border-bottom:1px solid #e2e8f0;z-index:50}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:nowrap;height:72px}
.brand{display:flex;gap:12px;align-items:center;text-decoration:none}
.brand span{font-weight:800;color:#0f172a;font-size:22px}
.nav a{color:#475569;text-decoration:none;margin-left:20px;transition:.18s ease}
.nav a:hover{color:var(--accent)}
.nav .cta{background:#1C4E80;color:#fff;padding:10px 16px;border-radius:12px;font-weight:600;text-decoration:none}
.nav .cta:hover{background:var(--accent)}
.langswitch a{margin-left:12px;color:#475569;text-decoration:none}
.langswitch a:hover{color:var(--accent)}
.hero{min-height:560px;display:flex;align-items:center;background:#eef3fb}
.hero h1{font-size:46px;line-height:1.12;margin:0 0 14px}
.hero p{color:#334155;font-size:18px;max-width:680px}
.hero .btn{display:inline-block;margin-top:22px;background:#2D9CDB;color:#fff;padding:12px 18px;border-radius:12px;text-decoration:none}
.hero .btn:hover{background:var(--accent)}
.section{padding:72px 0}.section h2{font-size:34px;margin:0 0 22px}
.grid{display:grid;gap:24px}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:#fff;border:1px solid #e2e8f0;border-radius:18px;padding:22px;box-shadow:0 4px 18px rgba(0,0,0,.04)}
.card h3{margin:0}.muted{color:#64748b}
.columns{display:grid;grid-template-columns:1fr 1fr;gap:24px}
footer{border-top:1px solid #e2e8f0;background:#fff;color:#64748b;padding:30px 0}
@media(max-width:1024px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.section{padding:56px 0}.hero{min-height:480px}.hero h1{font-size:32px}.grid-4,.grid-3{grid-template-columns:1fr}.card{padding:18px}.columns{grid-template-columns:1fr;gap:18px}}

/* ===== Language Switcher ===== */
.lang-switcher{position:fixed;top:16px;right:20px;font-size:.95rem;z-index:1000;background:rgba(255,255,255,.85);backdrop-filter:saturate(1.2) blur(2px);padding:6px 10px;border-radius:12px;border:1px solid #e6e8ec;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.lang-link{text-decoration:none;color:#0f172a;font-weight:600;margin:0 6px}
.lang-link:hover{text-decoration:underline}
.lang-link.active{color:#0057b7}
.divider{color:#6b7280}
@media (prefers-color-scheme: dark){
  .lang-switcher{background:rgba(17,24,39,.7);border-color:#30363d}
  .lang-link{color:#e5e7eb}
  .lang-link.active{color:#60a5fa}
  .divider{color:#9ca3af}
}


/* ===== Header adjustments ===== */
.brand-text{color:#0b5fa5;font-weight:800}
.nav .sep{display:inline-block;width:12px}


/* ===== Section Cards Layout (encadrer chaque section) ===== */
.opti-section {
  background: #fff;
  border: 1px solid #e6e8ec;
  border-radius: 16px;
  padding: 48px 40px;
  margin: 48px auto;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  max-width: 1100px;
}
/* ===== CTA primary button color (bleu foncé) ===== */
.nav .btn-primary{
  background:#1f4f8a; color:#fff;
  padding:8px 12px;border-radius:10px;border:1px solid #1f4f8a;
}
.nav .btn-primary:hover{opacity:.92}


/* ===== Layout & Footer positioning ===== */
html, body { height:100%; }
body { min-height:100vh; display:flex; flex-direction:column; }
.site-footer { margin-top:auto; padding:20px 0; text-align:center; border-top:1px solid #e6e8ec; background:#fff; color:#475569; }
/* ===== Nav polish ===== */
.nav .sep{display:inline-block;width:12px}
.brand img{display:block}


/* Prevent nav labels from wrapping awkwardly */
.nav a { white-space: nowrap; }


/* ===== Header sticky + layout polish ===== */
.site-header{position:sticky;top:0;background:#fff;z-index:1000;border-bottom:1px solid #e6e8ec}
.site-header .wrap{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:10px 20px}
.brand img{height:40px;width:auto;display:block}
/* Keep header above hero graphics */
#home{position:relative;z-index:0}

/* ===== Smooth anchor + offset so header doesn't cover titles ===== */
html{scroll-behavior:smooth}
.opti-section{scroll-margin-top:96px}

/* Nav spacing */
.nav a{margin:0 10px}


/* ===== Sticky header (applies to .site-header and header.nav) ===== */
.site-header, header.nav { position: sticky; top: 0; background: #fff; z-index: 1000; border-bottom: 1px solid #e6e8ec; }
.site-header .wrap, header.nav .wrap { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; }
header.nav .brand img, .site-header .brand img { height: 48px; width: auto; display: block; }

/* Smooth scroll + offset so header doesn't cover section titles */
html { scroll-behavior: smooth; }
.opti-section { scroll-margin-top: 110px; }

/* Keep nav labels on one line */
.nav a { white-space: nowrap; }

.brand img{height:80px;width:auto;display:block}

/* Anchor offset so sticky header doesn't cover titles */
[id]{scroll-margin-top:120px}


/* ===== Fixed header & layout spacing ===== */
.site-header, header.nav { position: fixed; top: 0; left: 0; right: 0; background: #fff; z-index: 2000; border-bottom: 1px solid #e6e8ec; }
.site-header .wrap, header.nav .wrap { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; }

/* Body top padding to avoid content hidden under the fixed header */
body { padding-top: 140px; } /* adjust if needed */

/* Logo size */
.site-header .brand img, header.nav .brand img { height: 100px; width: auto; display: block; }

/* Smooth scroll and universal offset for anchors */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 150px; }

/* Prevent nav labels from wrapping */
.nav a { white-space: nowrap; }


/* Adjust for 115px logo header */
body { padding-top: 165px; }
[id] { scroll-margin-top: 175px; }


/* ===== Footer (dark style) ===== */
.site-footer{
  background:#0b1f3a;
  color:#e5e7eb;
  margin-top:auto;
  padding:20px 0;
  border-top:1px solid rgba(255,255,255,0.08);
}
.site-footer .footer-wrap{max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;padding:12px 20px;text-align:center;}
.site-footer a{color:#e5e7eb;text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.site-footer .dot{opacity:.7;margin:0 8px}
@media(max-width:800px){.footer-wrap{flex-direction:column;}}

/* ===== LinkedIn icon spacing ===== */
.site-footer .icon-ln{vertical-align:-3px;margin-right:6px}
.site-footer a{color:#e5e7eb;text-decoration:none}
.site-footer a:hover{text-decoration:underline}


/* Navigation mobile : afficher tous les liens (y compris Études de cas / Nous contacter) */
@media (max-width: 700px) {
  .nav-inner {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    padding: 8px 20px 10px;
  }

  .nav nav {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    row-gap: 4px;
    margin-top: 6px;
  }

  .nav nav a {
    margin-left: 0;
    margin-right: 12px;
    font-size: 14px;
  }
}

/* ===== OptiPEC services layout ===== */
.opti-cards {
  display: grid;
  gap: 24px;
}

.opti-card {
  background: #f9fafb;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  padding: 20px 18px;
}

.opti-card h4 {
  margin-top: 0;
  margin-bottom: 8px;
}

.opti-card p {
  margin-top: 0;
  margin-bottom: 10px;
  color: #475569;
}

.opti-card ul {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  row-gap: 4px;
}

/* Desktop: 3 services side by side */
@media (min-width: 960px) {
  .opti-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ===== Mobile navigation: logo + burger ===== */
.nav-inner {
  position: relative;
}

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  margin-left: auto;
  cursor: pointer;
}

.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 999px;
  background: #0f172a;
  margin-top: 4px;
}

.nav-toggle-bar + .nav-toggle-bar {
  margin-top: 4px;
}

.nav .nav-links {
  display: flex;
  align-items: center;
  margin-left: auto;
}

/* Mobile behavior */
@media (max-width: 768px) {
  .nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  margin-left: auto;
  cursor: pointer;
}

  .nav .nav-links {
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 20px 12px;
    gap: 4px;
    display: none;
  }

  header.nav.nav-open .nav-links {
    display: flex;
  }

  .nav .nav-links a {
    margin: 4px 0;
  }
}

.footer-left,.footer-right{width:100%;}
@media(min-width:768px){.footer-left,.footer-right{width:auto;text-align:left;}}