a:focus, button:focus, input:focus, textarea:focus {
  outline:3px solid #6050B044; outline-offset:2px;
}
:root{--navy:#202060;--purple:#6050B0;--ink:#10103D;--muted:#5f6b75;--bg:#f6f8fb;--accent:#50A0FD;--deep:#0010D0;--r:14px;--sh:0 10px 24px rgba(16,16,61,.12)}
*{box-sizing:border-box}body{margin:0;font:16px/1.6 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:#fff}
.wrapper{max-width:1100px;margin:auto;padding:0 22px}
h1{font-size:42px;line-height:1.2;margin:0 0 10px;color:#0d2633}h2{font-size:28px;margin:0 0 8px}
p{margin:0 0 10px;color:var(--muted)}a{color:var(--purple);text-decoration:none}
.btn{display:inline-block;background:var(--purple);color:#fff;padding:12px 18px;border-radius:12px;
box-shadow:var(--sh);font-weight:700} .btn.out{background:transparent;border:2px solid var(--purple);color:var(--purple)}
.badge{display:inline-block;background:#eef3f7;color:#2b4452;border-radius:999px;padding:6px 10px;margin:4px 6px 0 0;font-size:13px}
.top-nav{
  position:sticky; top:0;
  background:#fff;
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid #e8edf2;
}
.brand{display:flex;gap:10px;align-items:center;font-weight:800;color:var(--navy)}
.hero {
  background: linear-gradient(135deg, #6050B0 0%, #202060 100%);
  color: #fff;
  padding: 56px 0;
}
.hero h1, .hero h2, .hero p { color: #fff; }
.btn {
  background:#fff;
  color:#202060;
}
.btn.out {
  background:transparent;
  border:2px solid #fff;
  color:#fff;
}
.grid{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center;padding:56px 0}
.card{background:#fff;border:1px solid #e8edf2;border-radius:var(--r);padding:18px;box-shadow:var(--sh)}
.section{padding:60px 0}.strip{background:var(--bg);border-top:1px solid #eaedf1;border-bottom:1px solid #eaedf1}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:960px){.grid,.features{grid-template-columns:1fr}}
footer{background:#0f1b22;color:#c7d1d9;padding:34px 0}footer a{color:#c7d1d9}
.cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px}
@media(max-width:960px){.cols{grid-template-columns:1fr}}
.section{padding:72px 0}
#services .card h3{margin:0 0 6px}
#services .card p{margin:0}
/* --- HERO RESULTS CARD FIX --- */
.hero .card {
  background: rgba(255,255,255,.12);          /* translucent background */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.28);
  color: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.hero .card h2,
.hero .card p { 
  color:#fff; 
}
.hero .badge {
  background: rgba(255,255,255,.18);
  color: #fff;
  border: 1px solid rgba(255,255,255,.35);
}
/* --- CONTACT FORM STYLES --- */
.vx-form { padding:22px; }
.vx-form label { display:block; font-weight:600; margin:8px 0 4px; color:#202060; }
.vx-form input, .vx-form textarea {
  width:100%; padding:12px; border:1px solid #dce3ea; border-radius:10px; font:inherit;
}
.vx-form textarea { min-height:120px; resize:vertical; }
.vx-consent { display:flex; gap:8px; align-items:flex-start; font-size:14px; color:#5f6b75; margin:8px 0 12px; }
.vx-consent input { margin-top:3px; }
.vx-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:12px 0; }
@media (max-width: 960px){ .vx-grid2 { grid-template-columns:1fr; } }
/* --- Section Header Styling --- */
.section-head {
  text-align:center;
  margin-bottom:36px;
}
.section-head h1,
.section-head h2 {
  font-size:32px;
  font-weight:700;
  color:#202060;
  margin:0;
}
.section-head p {
  color:#5f6b75;
  font-size:16px;
  margin:6px 0 12px;
}
.section-head .underline {
  width:80px;
  height:4px;
  margin:0 auto;
  border-radius:2px;
  background:linear-gradient(90deg,#6050B0,#202060);
}
/* --- Footer heading style to match section header --- */
footer h3{
  color:#fff;
  font-size:18px;
  font-weight:700;
  margin:0;
}
footer .foot-underline{
  width:60px;height:3px;border-radius:2px;
  margin:6px 0 12px;
  background:linear-gradient(90deg,#6050B0,#202060);
}
footer p{color:#c7d1d9;margin:0}
footer a{color:#c7d1d9;text-decoration:none}
footer a:hover{color:#fff;text-decoration:underline}
/* --- Sectors grid --- */
#secteurs.section.strip{background:#f6f8fb}
.sectors { display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.sectors .card{ text-align:center; padding:18px; border:1px solid #e8edf2; border-radius:14px; background:#fff;
  transition:transform .25s, box-shadow .25s }
.sectors .card:hover{ transform:translateY(-6px); box-shadow:0 10px 28px rgba(15,27,34,.16) }
.sectors .svc-icon{ height:44px; width:44px; margin-bottom:8px }
.sectors h3{ margin:6px 0 0; font-size:16px; color:#202060 }
/* --- Testimonial & Case Study cards --- */
.card.testimonial, .card.casestudy{
  background:#fff;
  border:1px solid #e8edf2;
  border-radius:14px;
  box-shadow:0 10px 24px rgba(15,27,34,.08);
  padding:18px;
}
.card.testimonial{ position:relative; overflow:hidden }
.card.testimonial .quote-mark{
  position:absolute; top:-14px; left:-4px;
  font-size:100px; line-height:1; color:rgba(123,44,191,.12);
  font-family: Georgia, serif;
}
.card.testimonial h3{ margin:0 0 6px; color:#202060 }
.card.testimonial .quote{ margin:0 0 8px; color:#2b3540 }
.card.testimonial .author{ margin:0; color:#5f6b75; font-size:14px }

.card.casestudy h3{ margin:0 0 8px; color:#202060 }
.mini-list{ list-style:none; padding:0; margin:0 0 12px }
.mini-list li{ display:flex; align-items:flex-start; gap:8px; margin:6px 0; color:#2b3540 }
.mini-list .dot{
  display:inline-block; margin-top:6px; width:8px; height:8px; border-radius:50%;
  background:linear-gradient(90deg,#6050B0,#202060);
}
.btn.small{ padding:10px 14px; border-radius:10px; font-size:14px }
/* Unified sectors/testimonial/case-study grid */
.grid-harmonic{
  display:grid;
  gap:22px;
  grid-template-columns:repeat(4,1fr);
  align-items:stretch;
}
@media (max-width:1100px){
  .grid-harmonic{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:960px){
  .grid-harmonic{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .grid-harmonic{ grid-template-columns:1fr; }
}

/* sector cards */
.card.sector{
  text-align:center;
  padding:18px;
  border:1px solid #e8edf2;
  border-radius:14px;
  background:#fff;
  transition:transform .25s, box-shadow .25s;
  display:flex; flex-direction:column; justify-content:center;
}
.card.sector:hover{ transform:translateY(-6px); box-shadow:0 10px 28px rgba(15,27,34,.16) }
.card.sector .svc-icon{ height:44px; width:44px; margin:0 auto 8px; }
.card.sector h3{ margin:6px 0 0; font-size:16px; color:#202060 }

/* wide cards (span 2 columns on >= tablet) */
.wide{ grid-column: span 2; }
@media (max-width:600px){ .wide{ grid-column: span 1; } }

/* testimonial & case study (same as before, kept here for clarity) */
.card.testimonial, .card.case-study{
  background:#fff; border:1px solid #e8edf2; border-radius:14px;
  box-shadow:0 10px 24px rgba(15,27,34,.08); padding:18px;
}
.card.testimonial{ position:relative; overflow:hidden; }
.card.testimonial .quote-mark{
  position:absolute; top:-14px; left:-4px;
  font-size:100px; line-height:1; color:rgba(123,44,191,.12);
  font-family: Georgia, serif;
}
.card.testimonial h3{ margin:0 0 6px; color:#202060 }
.card.testimonial .quote{ margin:0 0 8px; color:#2b3540 }
.card.testimonial .author{ margin:0; color:#5f6b75; font-size:14px }

.card.case-study h3{ margin:0 0 8px; color:#202060 }
.bullet-list{ list-style:none; padding:0; margin:0 0 12px }
.bullet-list li{
  display:flex; gap:8px; align-items:flex-start;
  margin:6px 0; color:#2b3540
}
.bullet-list .dot{
  width:8px; height:8px; border-radius:50%;
  background:linear-gradient(90deg,#6050B0,#202060);
  margin-top:6px; flex:0 0 8px;
}
.btn-sm{ padding:10px 14px; border-radius:10px; font-size:14px }
/* === Section backgrounds with light brand washes === */

/* Nos Services - lilac tint */
#services.section {
  background: linear-gradient(180deg, #f9f0ff 0%, #ffffff 100%);
}

/* Secteurs Servis - lavender tint */
#sectors.section {
  background: linear-gradient(180deg, #f2e9fb 0%, #ffffff 100%);
  color: #202060; /* keep dark navy text */
}
#sectors .card { 
  background: #fff; 
  color: #202060; 
}

/* Contact Form - light sky-blue tint */
#contact.section {
  background: linear-gradient(180deg, #ebf3fa 0%, #ffffff 100%);
}
/* Align checkbox and label text inline */
.vx-form label {
  display: flex;
  align-items: center;
  gap: 8px; /* space between checkbox and text */
  font-size: 14px;
  color: #202060;
  cursor: pointer;
}
.vx-form input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #6050B0; /* modern browsers: brand-colored checkbox */
  cursor: pointer;
}
.vx-form label a {
  color: #6050B0;
  text-decoration: underline;
}
/* Error state (when checkbox is required but not ticked) */
.vx-form input[type="checkbox"]:invalid {
  outline: 2px solid #e63946;  /* red outline */
  outline-offset: 2px;
}
.vx-form input[type="checkbox"]:invalid + span::after {
  content: " (requis)";
  color: #e63946;
  font-size: 12px;
  margin-left: 6px;
}
/* Consent inline alignment */
.consent-field { margin: 10px 0 12px; }
.consent-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: #202060; cursor: pointer;
}
.consent-label input[type="checkbox"] {
  width: 18px; height: 18px; accent-color: #6050B0; cursor: pointer;
}

/* Inline error message */
.field-error {
  margin-top: 6px; font-size: 13px; color: #e63946; min-height: 16px;
}

/* Error highlight */
.consent-label.error input[type="checkbox"] {
  outline: 2px solid #e63946; outline-offset: 2px;
}
.consent-label.error span { color: #e63946; }
/* --- Form focus styling (brand glow) --- */
.vx-form input,
.vx-form textarea {
  transition: border-color .15s ease, box-shadow .15s ease;
}

.vx-form input:focus,
.vx-form textarea:focus {
  border-color: #6050B0; /* purple */
  box-shadow:
    0 0 0 2px rgba(123,44,191,.18), /* purple ring */
    0 0 0 4px rgba(44,79,97,.12);   /* blue outer halo */
  outline: none;
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .vx-form input, .vx-form textarea { transition: none; }
}
/* --- Icon micro-animations on hover --- */
.card .svc-icon {
  transition: transform .25s ease, filter .25s ease;
  transform-origin: center;
}

#services .card:hover .svc-icon,
#sectors .card.sector:hover .svc-icon {
  transform: translateY(-2px) scale(1.06);
  filter: drop-shadow(0 4px 8px rgba(15,27,34,.12));
}

/* smooth card lift already exists; keep consistent */
#services .card, #sectors .card.sector {
  transition: transform .25s ease, box-shadow .25s ease;
}

/* motion safety */
@media (prefers-reduced-motion: reduce) {
  .card .svc-icon { transition: none; }
}
/* --- Gradient separator between sections (lighter) --- */
.section + .section {
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, #6050B0, #202060) 1;
  border-image-slice: 1;
}

/* Sticky Contact Button */
.sticky-contact {
  position: fixed; bottom: 20px; right: 20px;
  background: linear-gradient(90deg, #6050B0, #202060);
  color: #fff; font-weight: 600; font-size: 15px;
  padding: 12px 20px; border-radius: 999px;
  box-shadow: 0 6px 14px rgba(15,27,34,.25);
  text-decoration: none; z-index: 9999;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease, visibility .2s ease;
}

.sticky-contact:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(15,27,34,.32); }

/* Hidden state when contact section is visible */
.sticky-contact.is-hidden {
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(6px);
}

/* Tiny screens tweak */
@media (max-width: 400px){
  .sticky-contact { font-size: 14px; padding: 10px 16px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .sticky-contact { transition: none; }
}
/* ===== TOP NAV (logo + horizontal menu) ===== */
.top-nav{
  position: sticky; top: 0;
  background: #fff;
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid #e8edf2;
  z-index: 1000;
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; }
.brand{ display:flex; gap:10px; align-items:center; font-weight:800; color:var(--navy); }
.nav .main-menu{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.nav .main-menu a{
  color:#202060; text-decoration:none; font-weight:600; transition:color .2s ease;
}
.nav .main-menu a:hover{ color:#6050B0; }

/* Gradient pill for the header Contact link */
.nav .main-menu .btn-nav{
  display:inline-block;
  background: linear-gradient(90deg,#6050B0,#202060);
  color:#fff !important;
  padding:8px 14px;
  border-radius:999px;
  font-weight:700;
  box-shadow: 0 6px 14px rgba(15,27,34,.18);
}
@media (max-width: 720px){
  .nav .main-menu{ gap:12px; }
  .nav .main-menu a{ font-size:14px; }
}
/* ===== FOOTER HORIZONTAL MENU (full-width centered) ===== */
.footer-menu{
  width:100%;
  display:flex;
  justify-content:center;
  background: transparent; /* inherits dark footer bg */
  margin: 8px 0 4px;
}
.footer-menu-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:18px;
  max-width:1100px; width:100%;
  padding:0 22px;
}
footer .footer-menu a{
  color:#c7d1d9; text-decoration:none; font-size:14px; font-weight:500;
  transition:color .2s ease;
}
footer .footer-menu a:hover{ color:#fff; text-decoration:underline; }
/* Full-width centered footer menu */
.footer-menu{
  width:100%;
  display:flex;
  justify-content:center;
  margin: 14px 0;
}
.footer-menu-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:18px;
}
footer .footer-menu a{
  color:#c7d1d9;
  text-decoration:none;
  font-size:14px;
  font-weight:500;
  transition:color .2s ease;
}
footer .footer-menu a:hover{
  color:#fff;
  text-decoration:underline;
}
/* Footer menu: mobile layout (wrap into two rows) */
@media (max-width: 640px){
  .footer-menu-list{
    row-gap: 10px;                 /* vertical space between rows */
    justify-content: center;       /* keep centered */
  }
  .footer-menu-list li{
    flex: 0 1 45%;                 /* ~2 items per row */
    text-align: center;
  }
  /* Put Contact on its own line, centered (full width) */
  .footer-menu-list .contact-link{
    flex-basis: 100%;
    order: 99;                     /* push to the end on mobile */
  }
}
footer .badge:first-child {
  margin-top: 16px;
}
/* Badge row: responsive wrap */
footer .badge {
  display: inline-block;
  margin: 4px 6px;    /* little breathing space around each badge */
  font-size: 13px;
}

@media (max-width: 640px){
  footer .badge {
    display: block;       /* each badge full width on its line */
    text-align: center;   /* centered text inside */
    margin: 6px auto;     /* vertical spacing */
  }
}
/* keep the first badge pushing the row down */
footer .badge:first-child { margin-top: 16px; }

/* default (desktop/tablet): inline badges with small gaps */
footer .badge {
  display: inline-block;
  margin: 4px 6px;
  font-size: 13px;
}

/* 2-per-line on mobile */
@media (max-width: 640px){
  /* center the inline-block badges in the first footer column only */
  footer .cols > div:first-child { text-align: center; }

  /* make each badge take about half width so they wrap into two columns */
  footer .badge {
    width: calc(50% - 12px); /* subtract the horizontal margin */
    margin: 6px 6px;
    vertical-align: top;
  }

  /* keep the tagline paragraph left-aligned even if the column is centered */
  footer .cols > div:first-child p { text-align: left; }
}

/* super small screens: 1-per-line for readability */
@media (max-width: 400px){
  footer .badge { width: 100%; }
}
/* legal page tweaks */
.legal h3 { margin: 10px 0 6px; color:#202060; }
.legal p  { margin: 0 0 10px; }
.cookie-banner{
  position: fixed; left: 16px; right: 16px; bottom: 16px;
  background: #0f1b22; color:#c7d1d9;
  border:1px solid #20313a; border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  z-index: 10000;
}
.cookie-inner{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding:12px 14px; }
.cookie-inner p{ margin:0; font-size:14px; }
.cookie-inner a{ color:#fff; text-decoration:underline; }
.cookie-inner .btn.btn-sm{ padding:8px 12px; border-radius:10px; font-size:14px; }
@media (max-width: 520px){
  .cookie-inner{ flex-direction:column; align-items:flex-start; gap:10px; }
}
/* === Cookie Modal (centered popup) === */
.cookie-modal{ position:fixed; inset:0; display:none; z-index:10000; }
.cookie-modal.show{ display:block; }

.cookie-backdrop{
  position:absolute; inset:0;
  background:rgba(15,27,34,.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity:0; transition:opacity .25s ease;
}
.cookie-dialog{
  position:relative; z-index:1;
  max-width:520px; margin:10vh auto; padding:18px;
  background:#0f1b22; color:#c7d1d9;
  border:1px solid #20313a; border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
  transform: translateY(20px) scale(.98);
  opacity:0; transition: transform .25s ease, opacity .25s ease;
}
.cookie-modal.show .cookie-backdrop{ opacity:1; }
.cookie-modal.show .cookie-dialog{ opacity:1; transform:none; }

.cookie-dialog h3{ margin:0 0 6px; color:#fff; }
.cookie-dialog p{ margin:0; }
.cookie-dialog a{ color:#fff; text-decoration:underline; }
.cookie-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:12px; }

/* lock page scroll while modal is open */
html.no-scroll, body.no-scroll{ overflow:hidden; }
/* === Cookie note (floating, non-blocking) === */
.cookie-note{
  position: fixed;
  right: 20px; bottom: 20px;
  max-width: 520px;
  background: #0f1b22; color:#c7d1d9;
  border:1px solid #20313a; border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
  padding: 12px 14px;
  z-index: 10000;
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  opacity: 0; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
}
.cookie-note[hidden]{ display:none; }
.cookie-note.show{ opacity:1; transform:none; }
.cookie-note p{ margin:0; font-size:14px; }
.cookie-note a{ color:#fff; text-decoration:underline; }
.cookie-note .btn.btn-sm{ padding:8px 12px; border-radius:10px; font-size:14px; }

@media (max-width: 560px){
  .cookie-note{
    left: 16px; right: 16px; bottom: 16px;
    max-width: none; flex-direction: column; align-items: flex-start;
  }
}
/* Mentions légales page background */
body.legal-page {
  background: linear-gradient(180deg, #f9f0ff 0%, #ffffff 100%);
}

/* Card container for legal content */
.card.legal {
  background: #fff;
  border: 1px solid #e8edf2;
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 8px 24px rgba(15,27,34,.08);
  line-height: 1.6;
}

.card.legal h3 {
  margin: 18px 0 8px;
  color: #202060;
  font-size: 20px;
}
.card.legal p {
  margin: 0 0 12px;
  color: #2b3540;
}
/* Privacy page background (same vibe as legal page) */
body.privacy-page {
  background: linear-gradient(180deg, #f9f0ff 0%, #ffffff 100%);
}
/* Reuse your legal card styles; already present: .card.legal {...} */
/* Base Technologique — blocks & grid */
.stack-block { margin-bottom: 28px; }
.stack-title { margin: 0 0 10px; color:#202060; font-size:20px; font-weight:700; }

/* responsive logo grid */
.logo-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 16px;
  grid-template-columns: repeat(6, 1fr);
}
@media (max-width: 1100px){ .logo-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 960px) { .logo-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 720px) { .logo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .logo-grid { grid-template-columns: repeat(2, 1fr); } }

.logo-card {
  background: #fff; border:1px solid #e8edf2; border-radius: 12px;
  padding: 14px; text-align:center;
  box-shadow: 0 8px 20px rgba(15,27,34,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.logo-card:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(15,27,34,.12); }
.logo-card img { max-width: 120px; max-height: 40px; width: auto; height: auto; margin-bottom: 8px; filter: saturate(0.95); }
.logo-card span { display:block; font-size: 13px; color:#5f6b75; }

/* badges row inside this page */
.stack-badges { display:flex; flex-wrap:wrap; gap:8px; margin: 8px 0 22px; }

/* CTA area spacing */
.cta-area { margin-top: 10px; }
/* Ensure SVG logos render at a sane size */
.logo-card img {
  display: inline-block;
  width: auto;
  height: 40px;              /* force visible height */
  max-width: 140px;          /* keep long logos in check */
  object-fit: contain;
}
/* Ensure <picture> plays nice */
.logo-card picture { display:inline-block; line-height:0; }
.logo-card picture img { height:40px; max-width:140px; object-fit:contain; }
/* Make logos actually visible/sized, regardless of SVG quirks */
.logo-card picture { display:inline-block; line-height:0; }
.logo-card picture img { height:40px; max-width:140px; object-fit:contain; }

/* Soft chip so white logos aren’t invisible */
.logo-card { background:#f9fbfd; border:1px solid #e8edf2; border-radius:12px; }
/* Mission/Vision extras */
.values-grid{
  display:grid; gap:16px;
  grid-template-columns:repeat(3,1fr);
}
@media(max-width:960px){ .values-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .values-grid{ grid-template-columns:1fr; } }
.v-item h3{ margin:0 0 6px; color:#202060; }
.v-item p{ margin:0; }

/* Steps (method) */
.steps{
  list-style:none; padding:0; margin:0;
  display:grid; gap:16px;
  grid-template-columns:repeat(5,1fr);
}
@media(max-width:1100px){ .steps{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:700px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .steps{ grid-template-columns:1fr; } }
.step h3{ margin:0 0 6px; color:#202060; }
.step p{ margin:0; }
/* --- Subpages (Mission/Vision, Mentions légales, etc.) --- */
body.subpage {
  background: linear-gradient(180deg, #f9f0ff 0%, #ffffff 100%);
}

/* give inner sections a white card look */
.subpage main .section,
.subpage header.section {
  background:#fff;
  border-radius:14px;
  box-shadow:0 6px 20px rgba(15,27,34,.08);
  padding:40px 28px;
  margin-bottom:36px;
}
/* Subpage sections with a light blue gradient wash */
.subpage main .section,
.subpage header.section {
  background: linear-gradient(180deg, #ebf3fa 0%, #ffffff 100%);
  border-radius:14px;
  box-shadow:0 4px 12px rgba(15,27,34,.06);
  padding:40px 28px;
  margin-bottom:36px;
  color:#202060; /* your brand navy text */
}

/* Headings and text stay in your normal palette */
.subpage .section h2,
.subpage .section h3 {
  color:#202060;
}

.subpage .section p {
  color:#5f6b75;
}

/* Underline keeps the brand gradient */
.subpage .section .underline {
  background: linear-gradient(90deg, #6050B0, #202060);
}
/* Mission/Vision section grid */
.mv-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
  margin-top:28px;
}
@media(max-width:800px){ .mv-grid{ grid-template-columns:1fr; } }

.mv-item {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  justify-content:space-between;
}

.mv-item h3 {
  margin:12px 0 8px;
  color:#202060;
}

.mv-item p {
  color:#5f6b75;
  margin:0;
}

/* small icons */
.mv-icon {
  width:48px;
  height:48px;
  margin-bottom:12px;
  display:block;
  opacity:.9;
}
.mv-item {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  justify-content:flex-start;
}

/* icon slot — same height for all */
.mv-icon {
  width:48px;
  height:48px;
  margin-bottom:12px;
  flex:0 0 48px;   /* reserve 48px space */
}
/* Make Mission/Vision cards equal height + aligned */
.mv-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
  align-items:stretch;           /* stretch cards to equal height */
}
@media(max-width:800px){ .mv-grid{ grid-template-columns:1fr; } }

.mv-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  justify-content:flex-start;
  height:100%;                   /* fill the stretched grid area */
  min-height: 240px;             /* safety so they look balanced even with short text */
}

/* icon slot — equal vertical space so titles line up */
.mv-icon{
  width:48px; height:48px; flex:0 0 48px;
  margin-bottom:12px;
}

/* tidy spacing so both cards read the same */
.mv-item h3{ margin:12px 0 8px; color:#202060; }
.mv-item p{ margin:0; color:#5f6b75; }
/* CTA button styling (like Contact button) */
.btn-cta {
  background: linear-gradient(90deg,#6050B0,#202060);
  color:#fff !important;
  padding:12px 20px;
  border-radius:999px;
  font-weight:700;
  box-shadow:0 6px 14px rgba(15,27,34,.18);
  transition: transform .2s ease, box-shadow .2s ease;
}

/* Hover effect */
.btn-cta:hover {
  transform: translateY(-2px);
  box-shadow:0 8px 18px rgba(15,27,34,.28);
  text-decoration:none;
}
/* Fix "Nos engagements" layout: 4 cols desktop, 2 cols tablet, 1 col mobile */
#engagements .values-grid{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(4, minmax(0,1fr));
}
@media (max-width: 1100px){
  #engagements .values-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 600px){
  #engagements .values-grid{ grid-template-columns:1fr; }
}

/* Make all engagement cards equal height for tidy rows */
#engagements .v-item{
  display:flex; flex-direction:column; justify-content:space-between;
  min-height: 160px; /* tweak if you want them taller */
}
/* Ensure 2x2 layout for 4 cards */
#engagements .values-grid{
  display:grid; gap:16px;
  grid-template-columns:repeat(2,1fr);
}
@media (max-width:600px){ #engagements .values-grid{ grid-template-columns:1fr; } }

/* Real card look (in case other rules overrode it) */
#engagements .v-item{
  background:#fff;
  border:1px solid #e8edf2;
  border-radius:14px;
  box-shadow:0 6px 14px rgba(15,27,34,.08);
  padding:24px 18px;
  text-align:center;
  transition: transform .25s ease, box-shadow .25s ease;
}
#engagements .v-item:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 20px rgba(15,27,34,.12);
}

/* Bigger icons + alternating soft halos */
#engagements .v-icon{
  position:relative;
  width:72px; height:72px;         /* bigger */
  margin:0 auto 14px;
  display:flex; align-items:center; justify-content:center;
}
#engagements .v-icon svg{ width:44px; height:44px; }  /* bigger svg inside */

#engagements .alt-bg1::before,
#engagements .alt-bg2::before{
  content:""; position:absolute; inset:0; border-radius:50%; z-index:0;
}
#engagements .alt-bg1::before{ background:rgba(123,44,191,.10); } /* purple tint */
#engagements .alt-bg2::before{ background:rgba(44,79,97,.10); }   /* blue tint */
#engagements .v-icon svg{ position:relative; z-index:1; }

#engagements .v-item h3{ margin:0 0 8px; font-size:18px; color:#202060; }
#engagements .v-item p{ margin:0; color:#5f6b75; }
/* Engagements: 4 cards in a row on desktop */
#engagements .values-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, 1fr); /* 4 columns side by side */
}

@media (max-width: 1100px) {
  #engagements .values-grid { grid-template-columns: repeat(2, 1fr); } /* 2x2 on tablets */
}

@media (max-width: 600px) {
  #engagements .values-grid { grid-template-columns: 1fr; } /* stacked on mobile */
}
/* Global hover for all cards on Mission/Vision page */
#mission .card,
#vision .card,
#valeurs .v-item,
#engagements .v-item {
  transition: transform .25s ease, box-shadow .25s ease;
}

#mission .card:hover,
#vision .card:hover,
#valeurs .v-item:hover,
#engagements .v-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(15,27,34,.12);
}
/* Universal hover for cards on subpages */
.subpage .card{
  transition: transform .25s ease, box-shadow .25s ease;
  will-change: transform;
}
.subpage .card:hover{
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(15,27,34,.12);
}

/* Ensure Mission/Vision and Steps are treated as cards */
.subpage .mv-item.card{ /* already a .card, this line is just to be explicit */ }
.subpage .steps .step.card{ /* li.card.step in the method section */ }
/* Responsive steps grid */
.subpage .steps{
  list-style:none; margin:0; padding:0;
  display:grid; gap:16px;
  grid-template-columns:repeat(5,1fr);
  position:relative;
}
@media(max-width:1100px){ .subpage .steps{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:700px){  .subpage .steps{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){  .subpage .steps{ grid-template-columns:1fr; } }

/* connector line behind cards (hidden on small) */
.subpage .steps::before{
  content:""; position:absolute; left:0; right:0; top:34px; height:3px;
  background: linear-gradient(90deg, #6050B033, #20206033);
  border-radius:2px;
}
@media(max-width:700px){ .subpage .steps::before{ display:none; } }

/* each step card */
.subpage .step.card{
  position:relative;
  text-align:center;
  padding:28px 16px 20px;
}

/* numbered badge */
.subpage .step .step-num{
  position:absolute; top:-14px; left:14px;
  width:32px; height:32px; border-radius:50%;
  background: linear-gradient(90deg,#6050B0,#202060);
  color:#fff; font-weight:700; font-size:15px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 10px rgba(15,27,34,.12);
}

/* icons + text */
.subpage .step .step-icon{ width:40px; height:40px; margin:0 auto 8px; display:block; }
.subpage .step h3{ margin:6px 0 6px; color:#202060; font-size:16px; }
.subpage .step p{ margin:0; color:#5f6b75; font-size:14px; }
/* --- Gradient glowing border on hover --- */
.subpage .card {
  border: 1px solid #e8edf2;
  position: relative;
  z-index: 0;
}

.subpage .card::before {
  content:"";
  position:absolute;
  inset:0;
  border-radius:14px;          /* match card radius */
  padding:2px;                 /* thickness of glow */
  background:linear-gradient(90deg,#6050B0,#202060);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity:0;
  transition:opacity .25s ease;
  z-index:-1;
}

.subpage .card:hover::before {
  opacity:1;
  box-shadow:0 0 12px rgba(123,44,191,.4), 0 0 18px rgba(44,79,97,.3);
}
/* === Gradient glowing border on hover (site-wide) === */
.card{
  border:1px solid #e8edf2;
  position:relative;
  z-index:0;
}
.card::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;              /* match whatever the card uses */
  padding:2px;                        /* glow thickness */
  background:linear-gradient(90deg,#6050B0,#202060);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity:0; transition:opacity .25s ease, box-shadow .25s ease;
  z-index:-1;
}
.card:hover::before{
  opacity:1;
  box-shadow:0 0 12px rgba(123,44,191,.35), 0 0 18px rgba(44,79,97,.28);
}

/* keep the lift you liked */
.card{
  transition:transform .25s ease, box-shadow .25s ease;
  will-change:transform;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 20px rgba(15,27,34,.12);
}
/* Nos valeurs — icon treatment & rhythm */
#valeurs .v-item{
  text-align:center;
  padding:22px 18px;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  min-height: 200px;
}
#valeurs .v-item h3{ margin:8px 0 6px; color:#202060; font-size:18px; }
#valeurs .v-item p{ margin:0; color:#5f6b75; }

/* icon with soft halo, slightly smaller than engagements for hierarchy */
.val-icon{
  position:relative;
  width:64px; height:64px;
  margin:0 auto 12px;
  display:flex; align-items:center; justify-content:center;
}
.val-icon svg{ width:36px; height:36px; display:block; }

/* alternating halos */
.val-icon.alt-bg1::before,
.val-icon.alt-bg2::before{
  content:""; position:absolute; inset:0; border-radius:50%;
}
.val-icon.alt-bg1::before{ background:rgba(123,44,191,.10); } /* purple tint */
.val-icon.alt-bg2::before{ background:rgba(44,79,97,.10); }   /* blue tint */
/* === Comfortable middle sizing for subpage cards === */

/* Sections */
.subpage main .section,
.subpage header.section {
  padding: 40px 24px;         /* balanced breathing room */
  margin-bottom: 32px;
}

/* Mission & Vision cards */
.mv-item {
  min-height: 200px;          /* between 180px (compact) and 240px (large) */
  padding: 20px 16px;
}
.mv-item h3 { font-size: 18px; margin: 8px 0 6px; }
.mv-item p  { font-size: 15px; line-height: 1.5; }
.mv-icon    { width: 54px; height: 54px; margin-bottom: 12px; }
.mv-icon svg{ width: 36px; height: 36px; }

/* Nos valeurs */
#valeurs .v-item {
  padding: 18px 16px;
  min-height: 185px;          /* comfortable height */
}
#valeurs .v-item h3 { font-size: 17px; margin: 6px 0 6px; }
#valeurs .v-item p  { font-size: 15px; }
.val-icon { width: 58px; height: 58px; margin-bottom: 12px; }
.val-icon svg { width: 32px; height: 32px; }

/* Nos engagements */
#engagements .v-item {
  padding: 18px 16px;
  min-height: 180px;
}
#engagements .v-item h3 { font-size: 17px; }
#engagements .v-item p  { font-size: 15px; }
#engagements .v-icon { width: 64px; height: 64px; margin-bottom: 12px; }
#engagements .v-icon svg { width: 38px !important; height: 38px !important; }

/* Notre méthode */
.subpage .step.card {
  padding: 22px 16px 18px;
}
.subpage .step .step-num {
  width: 30px; height: 30px; font-size: 14px;
}
.subpage .step .step-icon {
  width: 36px; height: 36px; margin-bottom: 8px;
}
.subpage .step h3 { font-size: 16px; }
.subpage .step p  { font-size: 14px; line-height: 1.45; }

/* Hover effect: still glow, but subtle shadow */
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 7px 18px rgba(15,27,34,.11);
}
/* Subpage section background (reuse your light blue wash) */
.subpage main .section,
.subpage header.section{
  background: linear-gradient(180deg, #ebf3fa 0%, #ffffff 100%);
  border-radius:14px;
  box-shadow:0 4px 12px rgba(15,27,34,.06);
  padding:40px 24px;
  margin-bottom:32px;
}

/* Removed duplicate logo wall / tile styles (see unified definitions below) */

/* Case studies grid */
.grid-cases{
  display:grid; gap:16px;
  grid-template-columns:repeat(3,1fr);
}
@media(max-width:980px){ .grid-cases{ grid-template-columns:repeat(2,1fr);} }
@media(max-width:640px){ .grid-cases{ grid-template-columns:1fr;} }

.t-card{ position:relative; padding:18px; }
.t-quote-mark{
  position:absolute; top:-10px; left:10px;
  font-size:90px; line-height:1; color:rgba(123,44,191,.10);
  font-family:Georgia,serif; pointer-events:none;
}
.t-card h3{ margin:0 0 6px; color:#202060; font-size:18px; }
.t-quote{ margin:0 0 10px; color:#2b3540; }
.kpis{ list-style:none; margin:0; padding:0; display:flex; gap:16px; color:#202060; }
.kpis li span{ font-weight:800; color:#6050B0; margin-right:4px; }
/* About page: stats strip */
.about-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
}
.about-stats div{ background:#fff; border:1px solid #e8edf2; border-radius:12px; padding:12px 8px; }
.about-stats strong{ display:block; font-size:20px; color:#202060; line-height:1; }
.about-stats span{ color:#5f6b75; font-size:13px; }

/* Team grid */
.team-grid{
  display:grid; gap:16px;
  grid-template-columns:repeat(4,1fr);
}
@media(max-width:1100px){ .team-grid{ grid-template-columns:repeat(3,1fr);} }
@media(max-width:780px){  .team-grid{ grid-template-columns:repeat(2,1fr);} }
@media(max-width:500px){  .team-grid{ grid-template-columns:1fr;} }

.team-card{ text-align:center; padding:18px; }
.team-card .avatar{
  width:72px; height:72px; margin:0 auto 10px; position:relative;
}
.team-card .avatar svg{ width:100%; height:100%; display:block; }
.team-card h3{ margin:0 0 4px; color:#202060; font-size:18px; }
.team-card .role{ margin:0 0 8px; color:#5f6b75; font-size:14px; }
.team-card .tags{ list-style:none; padding:0; margin:0; display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.team-card .tags li{ background:#eef3f7; color:#2b4452; border-radius:999px; padding:4px 8px; font-size:12px; }

/* Timeline */
.timeline{
  list-style:none; margin:0; padding:0;
  display:grid; gap:16px;
  grid-template-columns:repeat(4,1fr);
  position:relative;
}
@media(max-width:1100px){ .timeline{ grid-template-columns:repeat(2,1fr);} }
@media(max-width:600px){  .timeline{ grid-template-columns:1fr;} }

.timeline::before{
  content:""; position:absolute; left:0; right:0; top:30px; height:3px;
  background:linear-gradient(90deg,#6050B033,#20206033);
  border-radius:2px;
}
@media(max-width:600px){ .timeline::before{ display:none; } }

.t-item{ position:relative; padding:18px; text-align:left; }
.t-item .dot{
  position:absolute; top:20px; left:16px; width:12px; height:12px; border-radius:50%;
  background:linear-gradient(90deg,#6050B0,#202060);
  box-shadow:0 0 0 4px rgba(123,44,191,.10);
}
.t-item .t-year{ font-weight:800; color:#202060; margin-left:34px; }
.t-item h3{ margin:4px 0 6px; color:#202060; }
.t-item p{ margin:0; color:#5f6b75; }

/* Certifications */
.certs{
  list-style:none; margin:0; padding:0;
  display:grid; gap:16px; grid-template-columns:repeat(4,1fr);
}
@media(max-width:980px){ .certs{ grid-template-columns:repeat(3,1fr);} }
@media(max-width:720px){ .certs{ grid-template-columns:repeat(2,1fr);} }
@media(max-width:480px){ .certs{ grid-template-columns:1fr;} }

.cert{ display:flex; align-items:center; gap:12px; padding:14px; }
.cert .cert-mark{ width:44px; height:44px; flex:0 0 44px; }
.cert .cert-mark svg{ width:100%; height:100%; display:block; }
.cert .c-title{ color:#202060; font-weight:700; line-height:1.2; }
.cert .c-note{ color:#5f6b75; font-size:13px; }
/* ===== About page cleanup (scoped) ===== */

/* Sections: slightly tighter vertical rhythm */
.about-page main .section,
.about-page header.section{
  padding: 36px 22px;           /* was 40/24 */
  margin-bottom: 28px;          /* was 32 */
}

/* Section headers: compact, readable */
.about-page .section-head{ margin-bottom: 22px; }
.about-page .section-head h1,
.about-page .section-head h2{ font-size: 28px; }
.about-page .section-head p{ font-size: 15px; }

/* Intro grid: equal height cards so they align */
#about-header .grid{
  align-items: stretch !important;
}
#about-header .card{
  display:flex; flex-direction:column; justify-content:center;
}

/* Stats strip: slimmer, more contrast */
.about-stats{
  gap:10px;
}
.about-stats div{
  padding:10px 8px;
  box-shadow: 0 2px 6px rgba(15,27,34,.06);
}
.about-stats strong{ font-size:19px; }
.about-stats span{ font-size:12px; }

/* Team grid: consistent card sizing + tidy tags */
.about-page .team-grid{ gap:14px; }
.about-page .team-card{
  padding:16px;
  min-height: 220px;            /* consistent height */
}
.about-page .team-card .avatar{ width:68px; height:68px; margin-bottom:8px; }
.about-page .team-card h3{ font-size:17px; }
.about-page .team-card .role{ font-size:13px; }
.about-page .team-card .tags li{ font-size:11px; padding:3px 7px; }

/* Timeline: tighter cards + thinner connector line */
.about-page .timeline{ gap:14px; }
.about-page .timeline::before{ top:26px; height:2px; }
.about-page .t-item{ padding:16px; }
.about-page .t-item .dot{ top:16px; left:14px; width:10px; height:10px; box-shadow:0 0 0 3px rgba(123,44,191,.09); }
.about-page .t-item .t-year{ margin-left:30px; font-size:14px; }
.about-page .t-item h3{ margin:4px 0 4px; font-size:16px; }
.about-page .t-item p{ font-size:14px; }

/* Certifications: denser grid, balanced tiles */
.about-page .certs{ gap:14px; }
.about-page .cert{ padding:12px; }
.about-page .cert .cert-mark{ width:40px; height:40px; }
.about-page .cert .c-title{ font-size:15px; }
.about-page .cert .c-note{ font-size:12px; }

/* Card hover/glow: keep pretty, reduce eye burn on dense grids */
.about-page .card:hover{
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(15,27,34,.10);
}
.about-page .card::before{ padding:1.5px; }

/* Reduce motion preference respected (nice touch for UX) */
@media (prefers-reduced-motion: reduce){
  .about-page .card,
  .about-page .card::before{ transition: none !important; }
}/* ===== Certifications: tidy 5-up grid with equal tiles ===== */
#about-certs .certs{
  list-style:none; margin:0; padding:0;
  display:grid; gap:14px;
  grid-template-columns: repeat(5, 1fr);   /* 5 across on desktop */
  align-items:stretch;
}
@media (max-width:1100px){ #about-certs .certs{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width:720px){  #about-certs .certs{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:460px){  #about-certs .certs{ grid-template-columns: 1fr; } }

#about-certs .cert{
  display:flex; align-items:center; gap:12px;
  padding:14px; min-height:110px;         /* equal-ish height */
  text-align:left;
}

#about-certs .cert .cert-mark{
  flex:0 0 48px; width:48px; height:48px; /* consistent icon box */
}
#about-certs .cert .cert-mark svg,
#about-certs .cert .cert-mark img{
  width:100%; height:100%; display:block; object-fit:contain;
}

#about-certs .cert .cert-meta{ line-height:1.2; }
#about-certs .cert .c-title{ font-weight:700; color:#202060; font-size:16px; }
#about-certs .cert .c-note{ color:#5f6b75; font-size:13px; margin-top:2px; }
/* ===== Smart Certifications Grid ===== */
#about-certs .certs{
  list-style:none; margin:0; padding:0;
  display:grid; gap:14px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  align-items:stretch;
}

#about-certs .cert{
  display:flex; align-items:center; gap:12px;
  padding:14px; min-height:110px;
  text-align:left;
  background:#fff; border:1px solid #e8edf2; border-radius:14px;
  box-shadow:0 4px 12px rgba(15,27,34,.06);
  transition: transform .25s, box-shadow .25s;
}
#about-certs .cert:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 18px rgba(15,27,34,.12);
}

/* Consistent icon sizing */
#about-certs .cert .cert-mark{
  flex:0 0 48px; width:48px; height:48px;
}
#about-certs .cert .cert-mark svg,
#about-certs .cert .cert-mark img{
  width:100%; height:100%; display:block; object-fit:contain;
}

#about-certs .cert .cert-meta{ line-height:1.2; }
#about-certs .cert .c-title{ font-weight:700; color:#202060; font-size:16px; }
#about-certs .cert .c-note{ color:#5f6b75; font-size:13px; margin-top:2px; }
/* === Team grid auto-fit === */
.about-page .team-grid{
  display:grid;
  gap:16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-items:stretch;
}
/* Merci page card */
.thank{
  text-align:center;
  padding:24px 18px;
}
.thank .check{ margin:0 auto 8px; width:56px; height:56px; }
.thank h3{ margin:6px 0 6px; color:#202060; font-size:20px; }
.thank p{ margin:0 0 10px; color:#2b3540; }
.thank .thank-meta{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
  margin:10px 0 14px;
}
.thank .mini{
  background:#fff; border:1px solid #e8edf2; border-radius:12px; padding:10px;
}
.thank .mini strong{ display:block; color:#6050B0; font-size:18px; line-height:1; }
.thank .mini span{ color:#5f6b75; font-size:12px; }
.thank .btns{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
/* --- Kill the empty gap under the footer --- */
footer { margin-bottom: 0 !important; }

/* last section on any page shouldn't push the footer down */
.section:last-child { margin-bottom: 0 !important; }

/* subpages use section cards — trim their bottom margin too */
.subpage main .section:last-child,
.subpage header.section:last-child { margin-bottom: 0 !important; }

/* footer nav shouldn't add extra space */
.footer-menu { margin-bottom: 0 !important; }

/* just in case some global reset got “creative” */
html, body { height: auto; }
/* Sticky footer: push footer to bottom when content is short */
html, body { height: 100%; }
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* footer becomes the flex “pusher” to bottom */
footer { margin-top: auto; }
/* Services page tuning */
#svc-header .card{ padding:16px; }

.svc-cards{ grid-template-columns:repeat(3,1fr); gap:16px; }
@media(max-width:980px){ .svc-cards{ grid-template-columns:repeat(2,1fr);} }
@media(max-width:620px){ .svc-cards{ grid-template-columns:1fr;} }

.card.svc{ padding:18px; display:flex; flex-direction:column; }
.card.svc h3{ margin:8px 0 6px; color:#202060; }
.card.svc p{ margin:0 0 8px; color:#2b3540; }
.card.svc .mini-list{ margin-top:6px; }
.card.svc .svc-link{ margin-top:auto; font-weight:600; color:#6050B0; }

/* reuse your icons’ micro-animations */
.card.svc .svc-icon{
  height:44px; width:44px; margin-bottom:8px;
  transition: transform .25s ease, filter .25s ease; transform-origin:center;
}
.card.svc:hover .svc-icon{ transform: translateY(-2px) scale(1.06); filter: drop-shadow(0 4px 8px rgba(15,27,34,.12)); }

/* steps grid reuse from Mission/Vision with slightly tighter gaps */
#svc-method .steps{ gap:14px; }
.svc-badges{ margin-top:12px; display:flex; gap:8px; flex-wrap:wrap; }
.main-menu a.active {
  color: #6050B0;      /* brand purple */
  font-weight: 700;    /* bold */
}
/* ===== Clients page polish ===== */

/* Section backgrounds (very light brand wash) */
#clients-header.section { background: linear-gradient(180deg,#f9f0ff 0%, #ffffff 100%); }
#clients-cases.section.strip { background: linear-gradient(180deg,#f2e9fb 0%, #ffffff 100%); }

/* Logo wall */
.logo-wall{
  list-style:none; margin:0; padding:0;
  display:grid; gap:16px;
  grid-template-columns:repeat(6,1fr);
}
@media (max-width:1100px){ .logo-wall{ grid-template-columns:repeat(4,1fr);} }
@media (max-width:780px){  .logo-wall{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:540px){  .logo-wall{ grid-template-columns:repeat(2,1fr);} }

.logo-tile{
  display:flex; gap:12px; align-items:center; padding:14px;
  border:1px solid #e8edf2; border-radius:14px; background:#fff;
  box-shadow:0 4px 12px rgba(15,27,34,.06);
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.logo-tile:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 22px rgba(15,27,34,.12);
  border-color:transparent;
  /* glow ring */
  box-shadow:
    0 10px 22px rgba(15,27,34,.12),
    0 0 0 2px rgba(123,44,191,.18),
    0 0 0 6px rgba(44,79,97,.10);
}
.logo-mark{ flex:0 0 56px; width:56px; height:56px }
.logo-mark svg, .logo-mark img{ width:100%; height:100%; display:block; object-fit:contain }
.logo-meta .c-name{ font-weight:700; color:#202060; line-height:1.1 }
.logo-meta .c-sect{ color:#5f6b75; font-size:13px }

/* Mini case studies / testimonials */
.grid-cases{
  display:grid; gap:18px; grid-template-columns:repeat(3,1fr);
}
@media (max-width:980px){ .grid-cases{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .grid-cases{ grid-template-columns:1fr;} }

.t-card{
  position:relative; overflow:hidden; padding:18px;
  border:1px solid #e8edf2; border-radius:14px; background:#fff;
  box-shadow:0 4px 12px rgba(15,27,34,.06);
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.t-card:hover{
  transform:translateY(-4px);
  box-shadow:
    0 10px 22px rgba(15,27,34,.12),
    0 0 0 2px rgba(123,44,191,.18),
    0 0 0 6px rgba(44,79,97,.10);
  border-color:transparent;
}
.t-quote-mark{
  position:absolute; top:-12px; left:-2px; font-size:96px; line-height:1;
  color:rgba(123,44,191,.10); font-family:Georgia, serif; user-select:none;
}
.t-card h3{ margin:0 0 6px; color:#202060 }
.t-card .t-quote{ margin:0 0 10px; color:#2b3540 }

/* KPI chips */
.kpis{
  display:flex; gap:8px; flex-wrap:wrap; list-style:none; margin:0; padding:0;
}
.kpis li{
  display:flex; align-items:center; gap:6px;
  background:#f6f8fb; border:1px solid #e8edf2; border-radius:999px;
  padding:6px 10px; font-size:13px; color:#2b3540;
}
.kpis li span{
  display:inline-block; font-weight:800; color:#6050B0; font-variant-numeric:tabular-nums;
}

/* Optional “Voir le détail” link */
.t-actions{ margin:10px 0 0 }
.t-actions .svc-link{ font-weight:600; color:#6050B0 }

/* Tighten header card spacing in this page only */
#clients-header .card{ padding:14px }
/* ===== Base Technologique — polish ===== */

/* A) Section header spacing */
.stack-block { margin: 26px 0 34px; }
.stack-title {
  font-size:20px; font-weight:800; color:#202060; margin:0 0 12px;
}

/* B) Uniform logo grid */
.logo-grid{
  list-style:none; margin:0; padding:0;
  display:grid; gap:14px;
  grid-template-columns:repeat(6,1fr);
}
@media (max-width:1100px){ .logo-grid{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:780px){  .logo-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:540px){  .logo-grid{ grid-template-columns:repeat(2,1fr); } }

/* C) Logo cards (uniform height, centered) */
.logo-card{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; text-align:center; padding:14px;
  background:#fff; border:1px solid #e8edf2; border-radius:14px;
  box-shadow:0 4px 12px rgba(15,27,34,.06);
  height: 120px;                 /* uniform height */
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.logo-card img, .logo-card picture, .logo-card svg{
  max-width: 110px; max-height: 46px; width:auto; height:auto; display:block; object-fit:contain;
}
.logo-card span{ font-size:12px; color:#5f6b75; line-height:1; }

/* D) Gradient glow on hover (matches site) */
.logo-card:hover{
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow:
    0 10px 22px rgba(15,27,34,.12),
    0 0 0 2px rgba(123,44,191,.18),
    0 0 0 6px rgba(44,79,97,.10);
}

/* E) Subtle section tints (very light) */
#security   { background: linear-gradient(180deg,#fdeff2 0%, #ffffff 100%); }  /* soft red-ish */
#cloud      { background: linear-gradient(180deg,#ebf3fa 0%, #ffffff 100%); }  /* soft blue */
#network    { background: linear-gradient(180deg,#f5f9ff 0%, #ffffff 100%); }  /* even softer blue */
#telephony  { background: linear-gradient(180deg,#f5f0ff 0%, #ffffff 100%); }  /* soft purple */
#backup     { background: linear-gradient(180deg,#f7fbf2 0%, #ffffff 100%); }  /* soft green */

/* add breathing room so tints are clear but not chunky */
#security.section, #cloud.section, #network.section, #telephony.section, #backup.section { padding: 40px 0; }

/* F) CTA button at bottom of page consistent with hero */
.cta-area .btn { /* already a card wrapper around; just unify style */
  background: linear-gradient(90deg, #6050B0, #202060);
  color:#fff !important; font-weight:700; border-radius:999px; padding:12px 18px;
  box-shadow: 0 8px 18px rgba(15,27,34,.22);
  transition: transform .2s, box-shadow .2s;
}
.cta-area .btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(15,27,34,.28), 0 0 0 2px rgba(123,44,191,.18);
}

/* G) Optional: clickable vendor logos */
.logo-card a{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; width:100%; height:100%; color:inherit; text-decoration:none; }
.logo-card a:focus { outline:3px solid #6050B044; outline-offset:2px; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .logo-card { transition: none; }
  /* Center the H3 titles inside Base Tech sections, no excuses */
section.stack-block > h3.stack-title {
  display:block;
  text-align:center !important;
  margin:0 auto 14px !important;
  width:100%;
  font-size:20px; font-weight:800; color:#202060;
}
/* Nuke list defaults inside logo grids */
.stack-block .logo-grid { 
  list-style:none !important; margin:0 !important; padding:0 !important;
  display:grid !important; gap:16px !important;
  align-items:stretch; /* cards same height behavior */
}

/* Responsive columns: 6 → 4 → 3 → 2 */
@media (min-width:1100px){ .stack-block .logo-grid { grid-template-columns:repeat(6,1fr) !important; } }
@media (max-width:1099px) and (min-width:780px){ .stack-block .logo-grid { grid-template-columns:repeat(4,1fr) !important; } }
@media (max-width:779px) and (min-width:540px){ .stack-block .logo-grid { grid-template-columns:repeat(3,1fr) !important; } }
@media (max-width:539px){ .stack-block .logo-grid { grid-template-columns:repeat(2,1fr) !important; } }

/* Kill rogue margins on li */
.stack-block .logo-grid > li { margin:0 !important; }

/* Card uniformity */
.stack-block .logo-card{
  display:flex !important; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:8px; padding:14px;
  background:#fff; border:1px solid #e8edf2; border-radius:14px;
  box-shadow:0 4px 12px rgba(15,27,34,.06);
  min-height:120px; /* uniform baseline */
  height:100%;      /* stretch to grid row */
  transition:transform .25s, box-shadow .25s, border-color .25s;
}

/* Media sizing inside cards (contain, no overflow) */
.stack-block .logo-card img,
.stack-block .logo-card svg,
.stack-block .logo-card picture {
  max-width:120px !important; max-height:48px !important;
  width:auto; height:auto; object-fit:contain; display:block;
}

/* Label line — prevent wrap chaos */
.stack-block .logo-card span{
  font-size:12px; color:#5f6b75; line-height:1;
  max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Hover glow — keep your brand vibe */
.stack-block .logo-card:hover{
  transform:translateY(-4px);
  border-color:transparent;
  box-shadow:
    0 10px 22px rgba(15,27,34,.12),
    0 0 0 2px rgba(123,44,191,.18),
    0 0 0 6px rgba(44,79,97,.10);
}
/* Make logo card anchor fill the card and behave like the old container */
.logo-card { padding:0 !important; } /* padding moves to the <a> */
.logo-card > a{
  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%; height:100%;
  padding:14px;
  text-align:center;
  text-decoration:none;
  color:inherit;
  border-radius:14px; /* keep hover ring nice */
}

/* Keep media sizing sane inside the link */
.logo-card > a img,
.logo-card > a svg,
.logo-card > a picture {
  max-width:120px; max-height:48px;
  width:auto; height:auto; object-fit:contain; display:block;
}

/* Reapply hover glow to the link (not the li) */
.logo-card > a:hover{
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow:
    0 10px 22px rgba(15,27,34,.12),
    0 0 0 2px rgba(123,44,191,.18),
    0 0 0 6px rgba(44,79,97,.10);
}

/* Belt & suspenders: center section titles regardless of wrappers */
.stack-title { text-align:center !important; margin-left:auto; margin-right:auto; display:block; }
/* Center section titles inside stack-blocks */
.stack-block .stack-title {
  text-align: center;
  font-size: 26px;   /* adjust if you want bigger titles */
  font-weight: 700;
  margin-bottom: 20px;
  color: #202060;    /* company navy */
}
/* Logo grid */
.logo-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.logo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  background: #fff;
  border: 1px solid #e8edf2;
  border-radius: 12px;
  transition: transform .25s ease, box-shadow .25s ease;
}

.logo-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(15,27,34,0.12);
}

.logo-card picture,
.logo-card img {
  max-width: 100px;
  max-height: 60px;
  margin-bottom: 10px;
}

.logo-card span {
  font-size: 14px;
  color: #202060;
  display: block;
}
body.subpage {
  background: linear-gradient(180deg, #e9eef2 0%, #f6f8fb 100%);
}
.logo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  background: #fff;
  border: 1px solid #e8edf2;
  border-radius: 12px;
  transition: transform .25s ease, box-shadow .25s ease, border .25s ease;
}

.logo-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(15,27,34,.12);
  border: 1px solid transparent;
  border-image: linear-gradient(90deg,#6050B0,#202060) 1;
  border-image-slice: 1;
}
/* ==== Base Tech: make it match 'Nos Clients' ==== */

/* Full-width section tints (very light) */
.bt-tint-1 { background: linear-gradient(180deg,#eef3f7 0%, #ffffff 100%); }
.bt-tint-2 { background: linear-gradient(180deg,#f2e9fb 0%, #ffffff 100%); }

/* Section header (reuse same style as site) */
.stack-block .section-head { text-align:center; margin-bottom: 18px; }
.stack-block .section-head h3 { margin:0; color:#202060; font-weight:800; font-size:26px; }
.stack-block .section-head .underline{
  width:80px; height:4px; margin:8px auto 0; border-radius:2px;
  background:linear-gradient(90deg,#6050B0,#202060);
}

/* Use the exact grid from 'Nos Clients' */
.logo-wall{
  list-style:none; margin:0; padding:0;
  display:grid; gap:16px;
  grid-template-columns:repeat(6,1fr);
}
@media (max-width:1100px){ .logo-wall{ grid-template-columns:repeat(4,1fr);} }
@media (max-width:780px){  .logo-wall{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:540px){  .logo-wall{ grid-template-columns:repeat(2,1fr);} }

/* Card look identical to 'Nos Clients' */
.logo-tile{
  display:flex; gap:12px; align-items:center; padding:14px;
  border:1px solid #e8edf2; border-radius:14px; background:#fff;
  box-shadow:0 4px 12px rgba(15,27,34,.06);
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.logo-tile:hover{
  transform:translateY(-4px);
  box-shadow:
    0 10px 22px rgba(15,27,34,.12),
    0 0 0 2px rgba(123,44,191,.18),
    0 0 0 6px rgba(44,79,97,.10);
  border-color:transparent;
}

/* Anchor fills the card */
.logo-tile > a{
  display:flex; gap:12px; align-items:center; width:100%; color:inherit; text-decoration:none;
}

/* Mark + meta (adapted for vendor logos which are wider) */
.logo-mark{ flex:0 0 72px; width:72px; height:56px; display:flex; align-items:center; justify-content:center; }
.logo-mark img{ max-width:100%; max-height:56px; object-fit:contain; display:block; }
.logo-meta{ display:flex; flex-direction:column; line-height:1.1 }
.logo-meta .c-name{ font-weight:700; color:#202060; }
.logo-meta .c-sect{ color:#5f6b75; font-size:13px }

/* Page background slightly grey so it matches subpages */
body.subpage { background: linear-gradient(180deg, #e4ebf1 0%, #f3f6f9 100%); }
/* ===== Full-bleed section background + separator (matches 'Nos Clients') ===== */

/* Make the section create a full-viewport background layer */
.bt-bleed { position: relative; z-index: 0; }
.bt-bleed::before {
  content: "";
  position: absolute; z-index: -1;
  top: 0; bottom: 0;

  /* The magic: expand to full viewport width even inside a centered wrapper */
  left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw;
}

/* Two brand tints (exactly like we used earlier) */
.bt-tint-1::before { background: linear-gradient(180deg,#eef3f7 0%, #ffffff 100%); }
.bt-tint-2::before { background: linear-gradient(180deg,#f2e9fb 0%, #ffffff 100%); }

/* Full-bleed top separator between sections (subtle gradient line) */
.bt-bleed + .bt-bleed::after {
  content:""; position:absolute; z-index:-1; top:0; height:1px;
  left:50%; right:50%; margin-left:-50vw; margin-right:-50vw;
  background: linear-gradient(90deg, #6050B0, #202060);
  opacity:.35;
}

/* Card hover glow (unified with other pages) */
.logo-tile:hover,
.logo-card:hover,
.logo-card > a:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow:
    0 10px 22px rgba(15,27,34,.12),
    0 0 0 2px rgba(123,44,191,.18),
    0 0 0 6px rgba(44,79,97,.10);
}
/* === Full-bleed bands that ignore .wrapper width === */
.bt-band{
  width:100vw;            /* span viewport */
  position:relative;
  left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw;  /* escape the centered layout */
  padding:40px 0;        /* vertical breathing room */
}

/* very light brand tints (alternate them) */
.bt-band.tint-1{ background: linear-gradient(180deg,#eef3f7 0%, #ffffff 100%); }
.bt-band.tint-2{ background: linear-gradient(180deg,#f2e9fb 0%, #ffffff 100%); }

/* subtle full-width separator before each band (except first) */
.bt-band + .bt-band{ 
  border-top:1px solid transparent;
  border-image: linear-gradient(90deg,#6050B0,#202060) 1; 
  border-image-slice:1;
}

/* make sure inner content stays aligned like other pages */
.bt-band > .wrapper{ padding:0 22px; }

/* Keep the same hover glow everywhere (logos included) */
.logo-tile:hover,
.logo-card:hover,
.logo-card > a:hover{
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow:
    0 10px 22px rgba(15,27,34,.12),
    0 0 0 2px rgba(123,44,191,.18),
    0 0 0 6px rgba(44,79,97,.10);
}
/* ===========================
   ABOUT PAGE POLISH (safe drop-in)
   =========================== */

/* Page background: branded grey wash */
body.about-page {
  background: linear-gradient(180deg, #e9eef2 0%, #f6f8fb 100%);
}

/* Header strip look (same section-head vibe, full readability) */
#about-header.section .section-head h1,
#about-header.section .section-head h2 { color:#202060; }
#about-header.section .card { box-shadow: var(--sh); }

/* Stats row inside header */
.about-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
}
.about-stats > div{
  background:#fff; border:1px solid #e8edf2; border-radius:12px;
  padding:10px; text-align:center;
  box-shadow:0 4px 12px rgba(15,27,34,.06);
}
.about-stats strong{
  display:block; font-size:20px; color:#202060; line-height:1.1;
}
.about-stats span{
  font-size:12px; color:#5f6b75;
}
@media (max-width:760px){ .about-stats{ grid-template-columns:repeat(2,1fr); } }

/* Team grid */
.team-grid{
  display:grid; gap:16px; grid-template-columns:repeat(4,1fr);
}
@media (max-width:1100px){ .team-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){  .team-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){  .team-grid{ grid-template-columns:1fr; } }

.team-card{
  text-align:center; padding:16px; border:1px solid #e8edf2; border-radius:14px; background:#fff;
  box-shadow:0 4px 12px rgba(15,27,34,.06);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.team-card:hover{
  transform:translateY(-4px);
  border-color:transparent;
  box-shadow:
    0 10px 22px rgba(15,27,34,.12),
    0 0 0 2px rgba(123,44,191,.18),
    0 0 0 6px rgba(44,79,97,.10);
}
.team-card .avatar{
  width:100%; max-width:140px; margin:0 auto 10px;
}
.team-card .avatar svg{ width:100%; height:auto; display:block }
.team-card h3{ margin:6px 0 2px; color:#202060 }
.team-card .role{ margin:0 0 8px; color:#5f6b75; font-size:14px }
.team-card .tags{
  list-style:none; padding:0; margin:0; display:flex; gap:6px; justify-content:center; flex-wrap:wrap;
}
.team-card .tags li{
  background:#f6f8fb; border:1px solid #e8edf2; border-radius:999px; padding:4px 8px; font-size:12px; color:#2b3540;
}

/* Timeline (vertical, clean) */
.timeline{
  list-style:none; padding:0; margin:0; position:relative;
}
.timeline::before{
  content:""; position:absolute; left:22px; top:0; bottom:0; width:2px; background:linear-gradient(180deg,#6050B0,#202060);
  opacity:.25;
}
.t-item{
  position:relative; margin:0 0 14px 0; padding:14px 14px 14px 56px;
  background:#fff; border:1px solid #e8edf2; border-radius:12px; box-shadow:0 4px 12px rgba(15,27,34,.06);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.t-item:hover{
  transform:translateY(-3px);
  border-color:transparent;
  box-shadow:
    0 10px 22px rgba(15,27,34,.12),
    0 0 0 2px rgba(123,44,191,.18),
    0 0 0 6px rgba(44,79,97,.10);
}
.t-item .dot{
  position:absolute; left:14px; top:18px; width:16px; height:16px; border-radius:50%;
  background:linear-gradient(90deg,#6050B0,#202060);
  box-shadow:0 0 0 3px rgba(123,44,191,.12);
}
.t-year{
  position:absolute; left:44px; top:-10px; background:#eef3f7; color:#202060; font-weight:700; font-size:12px;
  padding:2px 8px; border-radius:999px; border:1px solid #e0e8ef;
}

/* Certifications grid */
.certs{
  list-style:none; margin:0; padding:0;
  display:grid; gap:16px; grid-template-columns:repeat(5,1fr);
}
@media (max-width:1100px){ .certs{ grid-template-columns:repeat(4,1fr);} }
@media (max-width:880px){  .certs{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:640px){  .certs{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:420px){  .certs{ grid-template-columns:1fr;} }

.cert{
  display:flex; align-items:center; gap:12px; padding:12px;
  background:#fff; border:1px solid #e8edf2; border-radius:12px; box-shadow:0 4px 12px rgba(15,27,34,.06);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.cert:hover{
  transform:translateY(-3px);
  border-color:transparent;
  box-shadow:
    0 10px 22px rgba(15,27,34,.12),
    0 0 0 2px rgba(123,44,191,.18),
    0 0 0 6px rgba(44,79,97,.10);
}
.cert-mark{ flex:0 0 56px; width:56px; height:56px; display:flex; align-items:center; justify-content:center }
.cert-mark svg{ width:100%; height:100%; object-fit:contain; display:block }
.cert-meta .c-title{ font-weight:700; color:#202060; line-height:1.1 }
.cert-meta .c-note{ color:#5f6b75; font-size:13px }

/* CTA button unify (same gradient pill as elsewhere) */
#about-cta .btn.btn-cta{
  background: linear-gradient(90deg,#6050B0,#202060);
  color:#fff !important; font-weight:700; border-radius:999px; padding:12px 18px;
  box-shadow:0 8px 18px rgba(15,27,34,.22);
  transition: transform .2s, box-shadow .2s;
}
#about-cta .btn.btn-cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(15,27,34,.28), 0 0 0 2px rgba(123,44,191,.18);
}/* ===== Blog landing ===== */
.blog-page .hero.sub-hero{
  background: linear-gradient(135deg,#6050B0 0%, #202060 100%);
  color:#fff; padding:48px 0;
}
.blog-page .hero.sub-hero h1,
.blog-page .hero.sub-hero p{ color:#fff; }

.pill-row{ display:flex; gap:10px; flex-wrap:wrap; }
.pill{
  display:inline-block; padding:8px 12px; border-radius:999px;
  background:#eef3f7; color:#202060; border:1px solid #e0e8ef; text-decoration:none;
  font-weight:600; font-size:14px;
}
.pill:hover{ background:#fff; box-shadow:0 6px 16px rgba(15,27,34,.12); }

.feature{ display:grid; grid-template-columns:1.3fr .7fr; gap:16px; align-items:stretch; }
@media (max-width:960px){ .feature{ grid-template-columns:1fr; } }
.feat-media img{ width:100%; height:100%; object-fit:cover; border-radius:14px; }
.feat-body{ display:flex; flex-direction:column; gap:10px; }
.feat-body .meta{ color:#5f6b75; font-size:13px }
.feature{ border:1px solid #e8edf2; border-radius:14px; box-shadow:0 4px 12px rgba(15,27,34,.06); padding:14px; }

.posts-grid{
  display:grid; gap:16px; grid-template-columns:repeat(3,1fr);
}
@media (max-width:1100px){ .posts-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){  .posts-grid{ grid-template-columns:1fr;} }

.post-card{ overflow:hidden; padding:0; }
.post-link{ display:block; color:inherit; text-decoration:none; }
.post-cover{ width:100%; height:160px; object-fit:cover; display:block; }
.post-card .post-meta{ font-size:12px; color:#5f6b75; padding:10px 14px 0; }
.post-card h3{ margin:6px 14px; color:#202060 }
.post-card p{ margin:0 14px 14px; color:#2b3540 }

.post-card:hover, .feature:hover{
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow:
    0 10px 22px rgba(15,27,34,.12),
    0 0 0 2px rgba(123,44,191,.18),
    0 0 0 6px rgba(44,79,97,.10);
}

.pager{ display:flex; gap:10px; justify-content:center; margin-top:16px; }

/* ===== Article page ===== */
.article-hero{
  background: linear-gradient(180deg,#e9eef2 0%, #f6f8fb 100%);
}
.article-hero .wrapper{ padding:28px 22px 12px; }
.article-hero .crumbs a{ color:#202060; text-decoration:none; }
.article-hero h1{ margin:6px 0 4px; color:#202060 }
.article-hero .a-meta{ color:#5f6b75; font-size:13px; margin-bottom:12px; }
.article-hero .hero-media img{ width:100%; max-height:380px; object-fit:cover; display:block; }

.article-body{ display:grid; grid-template-columns: 260px 1fr; gap:22px; }
@media (max-width:960px){ .article-body{ grid-template-columns: 1fr; } }

.toc{
  position:sticky; top:80px;
  background:#fff; border:1px solid #e8edf2; border-radius:12px; padding:12px;
  box-shadow:0 4px 12px rgba(15,27,34,.06);
  height: max-content;
}
.toc-title{ font-weight:700; color:#202060; margin:0 0 6px; }
.toc ol{ margin:0; padding-left:16px; }
.toc a{ color:#202060; text-decoration:none; }
.toc a:hover{ text-decoration:underline; }

.prose h2{ color:#202060; margin:18px 0 8px; }
.prose p, .prose li{ color:#2b3540; }
.cta-inline{ margin:16px 0; }

.prevnext{ display:flex; justify-content:space-between; gap:12px; }
.prevnext .pn{ color:#202060; text-decoration:none; font-weight:600; }
.prevnext .pn:hover{ text-decoration:underline; }

/* Make all these cards glow like the rest of the site */
.post-card, .feature, .toc, .t-item, .team-card, .cert {
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
/* --- Keep top nav on ONE line --- */
.top-nav .nav{ display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap; }
.main-menu{ display:flex; align-items:center; gap:16px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
.main-menu::-webkit-scrollbar{ display:none; } /* hide scrollbar on narrow screens */
.main-menu a{ white-space:nowrap; }

@media (max-width: 1150px){
  .main-menu{ gap:12px; }
  .main-menu a{ font-size:14px; }
  .btn-nav{ padding:8px 12px; }
}
@media (max-width: 980px){
  .brand span{ display:none; } /* hide the “Vortex Communications” text, keep the logo */
  .main-menu{ gap:10px; }
}/* ===== NAV: FORCE SINGLE LINE, NO WRAP ===== */
.top-nav { position: sticky; top:0; z-index:999; }

.top-nav .nav{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  flex-wrap:nowrap !important;
  padding:12px 0 !important;
}

.top-nav .brand{
  display:flex !important; align-items:center !important; gap:10px !important;
  flex:0 0 auto !important; min-width:0 !important; white-space:nowrap !important;
}
.top-nav .brand img{ flex-shrink:0 !important; }
.top-nav .brand span{ overflow:hidden !important; text-overflow:ellipsis !important; }

.top-nav .main-menu{
  margin:0 !important; padding:0 !important; list-style:none !important;
  display:flex !important; align-items:center !important; justify-content:flex-end !important;
  gap:16px !important;
  flex:1 1 auto !important;      /* take remaining space */
  min-width:0 !important;        /* allow shrinking */
  flex-wrap:nowrap !important;   /* DO NOT wrap */
  overflow-x:auto !important;    /* if still tight, allow horizontal scroll instead of wrapping */
  scrollbar-width:none !important;
  -ms-overflow-style: none !important;
}
.top-nav .main-menu::-webkit-scrollbar{ display:none !important; }

.top-nav .main-menu li{ flex:0 0 auto !important; }
.top-nav .main-menu a{ white-space:nowrap !important; }

.top-nav .btn-nav{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  white-space:nowrap !important; padding:8px 12px !important;
}

/* Progressive compression before anything would wrap */
@media (max-width: 1200px){
  .top-nav .main-menu{ gap:12px !important; }
  .top-nav .main-menu a{ font-size:14px !important; }
}
@media (max-width: 1024px){
  .top-nav .brand span{ display:none !important; }  /* hide brand text, keep logo */
  .top-nav .main-menu{ gap:10px !important; }
  .top-nav .main-menu a{ font-size:13.5px !important; }
  .top-nav .btn-nav{ padding:7px 11px !important; }
}
@media (max-width: 900px){
  .top-nav .main-menu a{ font-size:13px !important; }
}
/* One-line nav layout (no wrap) */
.top-nav .nav{ display:flex; align-items:center; justify-content:space-between; }
.main-menu{
  display:flex; align-items:center; gap:16px;
  list-style:none; margin:0; padding:0;
  flex-wrap:nowrap; white-space:nowrap; min-width:0; width:100%;
}
.main-menu > li{ flex:0 0 auto; }

/* “Plus” dropdown */
.more{ position:relative; }
.more-btn{
  background:transparent; border:1px solid #e0e8ef; color:#202060;
  padding:6px 10px; border-radius:999px; cursor:pointer; font-weight:600;
}
.more-list{
  position:absolute; right:0; top:calc(100% + 8px);
  min-width:220px; background:#fff; border:1px solid #e8edf2; border-radius:12px;
  box-shadow:0 12px 28px rgba(15,27,34,.18);
  padding:8px; margin:0; list-style:none; display:none; z-index:9999;
}
.more[aria-expanded="true"] .more-list{ display:block; }
.more-list a{
  display:block; padding:8px 10px; border-radius:8px; color:#202060; text-decoration:none;
}
.more-list a:hover{ background:#f6f8fb; }

/* Compress spacing/fonts slightly on medium screens */
@media (max-width: 1150px){
  .main-menu{ gap:12px; }
  .main-menu a{ font-size:14px; }
  .btn-nav{ padding:8px 12px; }
}

/* Hide brand text on smaller widths to save space (keeps logo) */
@media (max-width: 1024px){
  .brand span{ display:none; }
  .main-menu{ gap:10px; }
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.nav .main-menu {
  display: flex;
  flex: 1;
  justify-content: center; /* keeps links centered */
  flex-wrap: nowrap;       /* force single line */
  gap: 18px;
}

.btn-nav {
  white-space: nowrap;     /* never break Contact button */
  flex-shrink: 0;          /* don’t let it squish */
}/* === Restore the gradient pill for the Contact button (wherever it lives) === */
.top-nav .btn-nav,
.main-menu .btn-nav {
  display:inline-flex; align-items:center; justify-content:center;
  background: linear-gradient(90deg, #6050B0, #202060);
  color:#fff !important;
  font-weight:700;
  padding:8px 14px;
  border-radius:999px;
  border:0;
  box-shadow: 0 8px 18px rgba(15,27,34,.22);
  text-decoration:none;
  white-space:nowrap;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.top-nav .btn-nav:hover,
.main-menu .btn-nav:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(15,27,34,.28), 0 0 0 2px rgba(123,44,191,.18);
  filter: brightness(1.03);
}
.top-nav .btn-nav:focus {
  outline:3px solid #6050B044; outline-offset:2px;
}
/* Nuclear override for the nav CTA */
nav.top-nav a.btn-nav,
.top-nav .nav a.btn-nav,
.main-menu a.btn-nav {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  background: linear-gradient(90deg,#6050B0,#202060) !important;
  color:#fff !important;
  font-weight:700 !important;
  padding:8px 14px !important;
  border-radius:999px !important;
  border:0 !important;
  box-shadow:0 8px 18px rgba(15,27,34,.22) !important;
  text-decoration:none !important;
  white-space:nowrap !important;
}
nav.top-nav a.btn-nav:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(15,27,34,.28), 0 0 0 2px rgba(123,44,191,.18);
}.brand {
  display:flex;
  align-items:center;
  gap:12px; /* spacing between logo and name */
  margin-right: 28px; /* pushes menu away from brand */
}
.main-menu {
  display:flex;
  align-items:center;
  gap:22px; /* controls spacing between each link */
}
.main-menu .btn-nav {
  margin-left: 20px; /* separates it from "Nos Clients" */
}
/* === NAV SPACING: give everyone some personal space === */

/* spacing between the three flex children: brand | menu | CTA */
.top-nav .nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 28px !important;            /* <-- global breathing room */
}

/* brand: space after the logo/name block */
.top-nav .brand{
  display:flex; align-items:center;
  gap:12px;
  margin-right: 20px !important;   /* pushes "Accueil" away from brand */
}

/* inside the menu: space between each link */
.top-nav .main-menu{
  display:flex; align-items:center;
  gap: 22px !important;            /* increases spacing between links */
  flex-wrap:nowrap;
}

/* CTA spacing depending on where it lives */

/* If CTA is OUTSIDE the <ul> (your current setup): */
.top-nav .nav > .btn-nav{
  margin-left: 22px !important;    /* separates it from "Nos Clients" */
}

/* If CTA is INSIDE the <ul> (future you?): */
.top-nav .main-menu .btn-nav{
  margin-left: 16px !important;    /* extra space before the pill */
}
/* --- Nav edge breathing room --- */
.top-nav .main-menu li:first-child {
  margin-left: 18px;   /* push "Accueil" away from brand */
}

.top-nav .main-menu li:last-child {
  margin-right: 18px;  /* push "Contact" pill away from "Nos Clients" */
}
/* Keep nav items on one row and vertically centered */
.top-nav .nav { display:flex; align-items:center; }
.top-nav .main-menu {
  display:flex; align-items:center;
  flex: 1 1 auto; min-width:0;      /* let the menu shrink instead of wrapping */
  flex-wrap: nowrap;                 /* never drop to a second line */
  gap: 18px;
}

/* Ensure every <li> and its link align to the middle (button included) */
.top-nav .main-menu > li { display:flex; align-items:center; }
.top-nav .main-menu > li > a { display:inline-flex; align-items:center; line-height:1; }

/* Nudge the edges only (brand ↔ Accueil, Nos Clients ↔ Contact) */
.top-nav .brand { margin-right: 18px; }
.top-nav .main-menu > li:last-child { margin-left: 18px; }  /* the <li> that wraps Contact */
/* ====== FINAL NAV FORCE-FIX ====== */

/* 1) Bar layout: one row, centered items */
.top-nav .nav{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:20px !important;
}

/* 2) Main menu: single line, shrink instead of wrap */
.top-nav .main-menu{
  display:flex !important;
  align-items:center !important;
  flex:1 1 auto !important;
  min-width:0 !important;
  flex-wrap:nowrap !important;        /* never wrap */
  gap:18px !important;
}

/* 3) Each li is a flex box and vertically centers its child */
.top-nav .main-menu > li{
  display:flex !important;
  align-items:center !important;
}

/* 4) All links are inline-flex + same vertical rhythm */
.top-nav .main-menu > li > a{
  display:inline-flex !important;
  align-items:center !important;
  line-height:1 !important;
  height:40px !important;             /* normalize height */
  padding:0 6px !important;           /* tiny inner space for plain links */
  white-space:nowrap !important;
}

/* 5) The CTA pill: same height; looks like a button */
.top-nav .main-menu > li > a.btn-nav{
  height:40px !important;
  padding:0 14px !important;
  background:linear-gradient(90deg,#6050B0,#202060) !important;
  color:#fff !important; font-weight:700 !important;
  border-radius:999px !important; border:0 !important;
  box-shadow:0 8px 18px rgba(15,27,34,.22) !important;
}

/* 6) Edge breathing room only (brand ↔ Accueil, Nos Clients ↔ Contact) */
.top-nav .brand{ margin-right:18px !important; }
.top-nav .main-menu > li:last-child{ margin-left:18px !important; } /* the <li> that wraps Contact */

/* 7) Safety: prevent any accidental second row due to margins/padding */
.top-nav .main-menu,
.top-nav .main-menu > li,
.top-nav .main-menu > li > a { overflow:visible !important; }

/* === NAV: force uniform height + vertical centering for all items === */
.top-nav .main-menu { 
  display:flex !important; 
  align-items:center !important; 
  flex-wrap:nowrap !important;
}

.top-nav .main-menu > li { 
  display:flex !important; 
  align-items:center !important; 
}

/* Plain links: same height as the CTA, centered */
.top-nav .main-menu > li > a:not(.btn-nav){
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:40px !important;
  line-height:1 !important;
  padding:0 8px !important;   /* tiny inner space */
  white-space:nowrap !important;
}

/* CTA pill: same height so it aligns perfectly */
.top-nav .main-menu > li > a.btn-nav{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:40px !important;
  line-height:1 !important;
  white-space:nowrap !important;
  /* your visual styles already exist; we don't touch them here */
}

/* Edge cushions only (brand ↔ Accueil, Nos Clients ↔ Contact) */
.top-nav .brand{ margin-right:24px !important; }
.top-nav .main-menu > li:last-child{ margin-left:18px !important; }

/* NAV: unify spacing and alignment */

/* Brand spacing */
.top-nav .brand {
  margin-right: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Main menu container */
.top-nav .main-menu {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Main menu items */
.top-nav .main-menu > li {
  display: flex !important;
  align-items: center !important;
  margin: 0 6px !important; /* space between all items */
}

/* Links (plain ones) */
.top-nav .main-menu > li > a:not(.btn-nav) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;
  padding: 0 8px !important;
  white-space: nowrap !important;
}

/* CTA pill */
.top-nav .main-menu > li > a.btn-nav {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;
  padding: 0 14px !important;
  background: linear-gradient(90deg,#6050B0,#202060) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  border: 0 !important;
  box-shadow: 0 8px 18px rgba(15,27,34,.22) !important;
  white-space: nowrap !important;
  margin-left: 18px !important; /* cushion from 'Nos Clients' */
}

/* Safety: ensure wrapper aligns everything */
.top-nav .wrapper.nav {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
/* === Contact pill: restore full styling, win all specificity battles === */
.top-nav .main-menu > li > a.btn-nav,
.top-nav .nav .main-menu a.btn-nav,
nav.top-nav a.btn-nav {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  height: 40px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  border: 0 !important;

  background: linear-gradient(90deg, #6050B0, #202060) !important;
  color: #fff !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: 0 8px 18px rgba(15,27,34,.22) !important;
  white-space: nowrap !important;

  /* neutralize any generic link background/borders */
  background-clip: padding-box !important;
}

/* Hover/active focus states */
.top-nav .main-menu > li > a.btn-nav:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(15,27,34,.28), 0 0 0 2px rgba(123,44,191,.18) !important;
}
.top-nav .main-menu > li > a.btn-nav:focus {
  outline: 3px solid #6050B044; 
  outline-offset: 2px;
}/* === Contact pill with .btn-nav and .cta === */
.top-nav .main-menu > li > a.btn-nav,
.top-nav .main-menu > li > a.btn-nav.cta,
nav.top-nav a.btn-nav.cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  height: 40px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  border: 0 !important;

  background: linear-gradient(90deg, #6050B0, #202060) !important;
  color: #fff !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: 0 8px 18px rgba(15,27,34,.22) !important;
  white-space: nowrap !important;
}

/* Hover & focus */
.top-nav .main-menu > li > a.btn-nav.cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(15,27,34,.28), 0 0 0 2px rgba(123,44,191,.18) !important;
}
.top-nav .main-menu > li > a.btn-nav.cta:focus {
  outline: 3px solid #6050B044;
  outline-offset: 2px;
}

/* === FINAL: style the Contact CTA even when it's OUTSIDE the <ul> === */
nav.top-nav .wrapper.nav > a.btn-nav.cta,
nav.top-nav .wrapper.nav > a.btn-nav {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  height: 40px !important;
  padding: 0 14px !important;
  margin-left: 18px !important;          /* breathing room from 'Nos Clients' */

  background: linear-gradient(90deg,#6050B0,#202060) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  border: 0 !important;
  box-shadow: 0 8px 18px rgba(15,27,34,.22) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

nav.top-nav .wrapper.nav > a.btn-nav.cta:hover,
nav.top-nav .wrapper.nav > a.btn-nav:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(15,27,34,.28), 0 0 0 2px rgba(123,44,191,.18) !important;
}
/* Safety net: ensure all top-nav items align on one row */
.top-nav .wrapper.nav{display:flex;align-items:center;justify-content:space-between;}
.top-nav .main-menu>li{display:flex;align-items:center;}
.top-nav .brand{margin-right:24px;display:inline-flex;align-items:center;}

/* === NAV: Prevent wrapping on long items === */
.top-nav .main-menu > li > a {
  white-space: nowrap !important;   /* stop line breaks */
  padding: 0 12px !important;       /* tighter spacing for long words */
  display: inline-flex !important;  /* keeps text centered vertically */
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;          /* same height as Contact button */
  line-height: 1.2 !important;
}

/* Keep menu on one line and let it scroll if *really* tight */
.top-nav .main-menu{
  display:flex !important;
  align-items:center !important;
  flex-wrap:nowrap !important;      /* do not wrap to a 2nd row */
  gap:18px !important;
  min-width:0 !important;
  overflow-x:auto !important;       /* allow horizontal scroll instead of wrapping */
  scrollbar-width:none;             /* Firefox */
}
.top-nav .main-menu::-webkit-scrollbar{ display:none; } /* WebKit */

/* Links must never wrap their text */
.top-nav .main-menu > li > a{
  display:inline-flex !important;
  align-items:center !important;
  white-space:nowrap !important;
}

/* Slight compression on medium widths to avoid scroll */
@media (max-width: 1200px){
  .top-nav .main-menu{ gap:12px !important; }
  .top-nav .main-menu > li > a{ padding:0 10px !important; font-size:14px !important; }
}

/* Featured article image */
.card.feature .feat-media img {
  width: 100%;
  max-height: 320px;     /* shrink hero image */
  object-fit: cover;     /* crop instead of squashing */
  border-radius: 12px;   /* match cards */
  display: block;
}

/* Grid post images */
.post-card .post-cover {
  width: 100%;
  height: 180px;         /* consistent height */
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

.card.feature {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: stretch;
}

.card.feature .feat-media {
  flex: 0 0 40%;        /* image = 40% width */
  max-width: 400px;     /* cap it */
}

.card.feature .feat-media img {
  width: 100%;
  height: auto;
  max-height: 220px;    /* smaller */
  object-fit: cover;
  border-radius: 10px;
}
.card.feature .feat-body {
  flex: 1;
}

.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.post-card .post-cover {
  width: 100%;
  height: 140px;      /* much smaller */
  object-fit: cover;
  border-radius: 8px;
}

.post-card:empty { display:none; }

/* Hide any blog card that has no content/link */
.posts-grid .post-card:not(:has(.post-link)) {
  display: none !important;
}
.post-cover{ aspect-ratio: 16/9; object-fit: cover; }

/* Trust strip logos */
.logo-row{
  display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
}
.logo-pill{
  display:flex; align-items:center; justify-content:center;
  padding:12px; border-radius:12px; border:1px solid #e8edf2; background:#fff;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.logo-pill:hover{
  transform:translateY(-3px);
  border-color:#e0e6ec;
  box-shadow:0 10px 22px rgba(15,27,34,.10);
}
.logo-pill img{
  max-height:32px;   /* controls vertical size */
  max-width:120px;   /* NEW: stops them from being too wide */
  width:auto;
  height:auto;
  object-fit:contain;
  filter:grayscale(0.15) contrast(1.05);
}
@media (max-width: 640px){
  .logo-pill img{ max-height:24px; max-width:90px; }
}

/* === TRUST STRIP: hard constraints === */

/* 1) Keep the grid tidy */
#trust-strip .logo-row{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
}

/* 2) Pill container with a fixed vertical rhythm */
#trust-strip .logo-pill{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 16px;
  min-height:64px;                  /* fixed container height */
  border-radius:12px;
  border:1px solid #e8edf2;
  background:#fff;
}

/* 3) STOP THE IMAGE FROM STRETCHING */
#trust-strip .logo-pill img{
  max-height:28px !important;       /* controls vertical size */
  max-width:120px !important;       /* caps wide logos (AWS, Microsoft) */
  width:auto !important;
  height:auto !important;
  object-fit:contain !important;
  display:block;
  filter:grayscale(0.15) contrast(1.05);
}

/* smaller on phones */
@media (max-width:640px){
  #trust-strip .logo-pill{ min-height:56px; }
  #trust-strip .logo-pill img{ max-height:24px !important; max-width:90px !important; }
}

/* If you ALSO placed partner logos in the footer, constrain them too */
footer .logo-pill{
  display:flex; align-items:center; justify-content:center;
  min-height:56px;
}
footer .logo-pill img{
  max-height:24px !important;
  max-width:90px !important;
  width:auto !important;
  height:auto !important;
  object-fit:contain !important;
}

#trust-strip img { width:auto !important; height:auto !important; }

/* === NAV dropdown (Services) — clean, no arrow, glow like CTA/cards === */
.top-nav .main-menu .has-sub{ position:relative; }
.top-nav .main-menu .has-sub > a{
  display:inline-flex; align-items:center; justify-content:center;
  height:40px; padding:0 8px; white-space:nowrap;
  border-radius:10px; transition:box-shadow .2s,color .2s;
}
.top-nav .main-menu .has-sub:hover > a,
.top-nav .main-menu .has-sub:focus-within > a{
  color:#6050B0;
  box-shadow:0 0 0 2px rgba(123,44,191,.12);
}

/* dropdown panel */
.top-nav .main-menu .has-sub > .sub{
  position:absolute; top:100%; left:0;
  display:none; z-index:9999;
  min-width:260px; padding:8px;
  background:#fff; border:1px solid #e8edf2; border-radius:12px;
  box-shadow:0 14px 32px rgba(15,27,34,.18);
}

/* show on hover/focus */
.top-nav .main-menu .has-sub:hover > .sub,
.top-nav .main-menu .has-sub:focus-within > .sub{ display:block; }

/* submenu items with brand glow */
.top-nav .main-menu .has-sub > .sub > li{ list-style:none; }
.top-nav .main-menu .has-sub > .sub > li > a{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; margin:4px; border-radius:12px;
  color:#202060; text-decoration:none; font-weight:600;
  border:1px solid transparent;
  transition:transform .15s, box-shadow .2s, border-color .2s, background .2s;
}
.top-nav .main-menu .has-sub > .sub > li > a:hover,
.top-nav .main-menu .has-sub > .sub > li > a:focus{
  background:#fff;
  box-shadow:
    0 0 0 2px rgba(123,44,191,.16),
    0 0 0 4px rgba(44,79,97,.10),
    0 10px 22px rgba(15,27,34,.12);
  transform: translateY(-1px);
}

/* keep everything on one line, no wrap */
.top-nav .main-menu{ display:flex; align-items:center; flex-wrap:nowrap; }
.top-nav .brand{ margin-right:24px; }
.top-nav .main-menu > li:last-child{ margin-left:18px; }

/* spacing so long labels (Base Technologique) don't break */
.top-nav .main-menu > li > a{ white-space:nowrap; }

/* ==== NAV: normalize top-level items so nothing jumps a line ==== */
.top-nav .nav { display:flex; align-items:center; }
.top-nav .main-menu { display:flex; align-items:center; gap:18px; flex-wrap:nowrap; }
.top-nav .main-menu > li { position:relative; display:flex; align-items:center; }
.top-nav .main-menu > li > a {
  display:inline-flex; align-items:center; justify-content:center;
  height:40px; line-height:1; padding:0 8px;
  white-space:nowrap; border-radius:10px;
}

/* Edge breathing room */
.top-nav .brand{ margin-right:24px !important; }
.top-nav .main-menu > li:last-child{ margin-left:18px !important; }

/* ==== SERVICES DROPDOWN ==== */
.top-nav .main-menu .has-sub { position:relative; }

/* Parent hover feedback (subtle) */
.top-nav .main-menu .has-sub > a {
  transition: color .2s ease, box-shadow .2s ease;
}
.top-nav .main-menu .has-sub:hover > a,
.top-nav .main-menu .has-sub:focus-within > a {
  color:#6050B0;
  box-shadow: 0 0 0 2px rgba(123,44,191,.12);
}

/* Panel is absolutely positioned and hidden by default */
.top-nav .main-menu .has-sub > .sub{
  position:absolute; top:100%; left:0;
  min-width:260px; margin-top:8px;
  padding:8px;
  background:#fff; border:1px solid #e8edf2; border-radius:12px;
  box-shadow: 0 14px 32px rgba(15,27,34,.18);
  list-style:none; z-index:9999;

  opacity:0; visibility:hidden; transform: translateY(6px) scale(.98);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

/* Show on hover & keyboard focus */
.top-nav .main-menu .has-sub:hover > .sub,
.top-nav .main-menu .has-sub:focus-within > .sub{
  opacity:1; visibility:visible; transform: translateY(0) scale(1);
}

/* Items inside dropdown */
.top-nav .main-menu .has-sub > .sub > li { margin:0; }
.top-nav .main-menu .has-sub > .sub > li > a{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; margin:4px; border-radius:12px;
  color:#202060; text-decoration:none; font-weight:600;
  border:1px solid transparent;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
  /* keep same height feel as top */
  min-height:40px;
}

/* Brand gradient ring + lift on hover/focus (matches your cards/CTA vibe) */
.top-nav .main-menu .has-sub > .sub > li > a:hover,
.top-nav .main-menu .has-sub > .sub > li > a:focus{
  background:#fff;
  box-shadow:
    0 0 0 2px rgba(123,44,191,.16),
    0 0 0 4px rgba(44,79,97,.10),
    0 10px 22px rgba(15,27,34,.12);
  transform: translateY(-1px);
}

/* Safety: prevent accidental wrapping of long labels */
.top-nav .main-menu > li > a { white-space:nowrap; }

/* Dropdown container */
.main-menu li.has-sub {
  position: relative;
}

/* Submenu hidden by default */
.main-menu li.has-sub .sub {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border-radius: 12px;
  padding: 8px 0;
  list-style: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  z-index: 999;
  min-width: 220px;
}

/* Show submenu on hover */
.main-menu li.has-sub:hover .sub {
  display: block;
  animation: fadeIn 0.25s ease-in-out;
}

/* Submenu items styled like pill buttons */
.main-menu li.has-sub .sub li a {
  display: block;
  padding: 10px 16px;
  color: #202060;
  text-decoration: none;
  transition: all 0.3s ease;
  border-radius: 999px;
  margin: 4px 8px;
  position: relative;
  z-index: 1;
}

/* Hover: glowing gradient ring */
.main-menu li.has-sub .sub li a:hover {
  color: #fff;
  background: linear-gradient(90deg,#6050B0,#202060);
  box-shadow: 0 0 12px rgba(123,44,191,0.6), 0 0 24px rgba(44,79,97,0.6);
}

/* Small fade-in animation */
@keyframes fadeIn {
  from {opacity:0; transform:translateY(-5px);}
  to   {opacity:1; transform:translateY(0);}
}

/* === NAV DROPDOWN FIX (override everything) === */

/* keep top row aligned */
.top-nav .nav{ display:flex; align-items:center; }
.top-nav .main-menu{ display:flex; align-items:center; gap:18px; flex-wrap:nowrap; margin:0; padding:0; list-style:none; }
.top-nav .main-menu > li{ position:relative; display:flex; align-items:center; margin:0; padding:0; }
.top-nav .main-menu > li > a{
  display:inline-flex; align-items:center; justify-content:center;
  height:40px; line-height:1; padding:0 8px; white-space:nowrap; border-radius:10px;
}

/* parent hover feedback */
.top-nav .main-menu .has-sub > a{
  transition: color .2s ease, box-shadow .2s ease;
}
.top-nav .main-menu .has-sub:hover > a,
.top-nav .main-menu .has-sub:focus-within > a{
  color:#6050B0;
  box-shadow:0 0 0 2px rgba(123,44,191,.12);
}

/* SUBMENU: kill bullets + default spacing, keep off-flow */
.top-nav .main-menu .has-sub > .sub{
  position:absolute; top:100%; left:0;
  min-width: 240px;
  margin:8px 0 0 0; padding:8px;
  list-style:none;               /* <-- no bullets */
  background:#fff; border:1px solid #e8edf2; border-radius:12px;
  box-shadow:0 14px 32px rgba(15,27,34,.18);
  z-index:9999;

  /* hidden by default */
  opacity:0; visibility:hidden; transform: translateY(6px) scale(.98);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.top-nav .main-menu .has-sub > .sub > li{ list-style:none; margin:0; padding:0; } /* <-- no bullets, for good measure */

/* show on hover/focus-within ONLY */
.top-nav .main-menu .has-sub:hover > .sub,
.top-nav .main-menu .has-sub:focus-within > .sub{
  opacity:1; visibility:visible; transform: translateY(0) scale(1);
}

/* submenu links with brand glow */
.top-nav .main-menu .has-sub > .sub > li > a{
  display:flex; align-items:center; gap:10px;
  min-height:40px;
  padding:10px 12px; margin:4px; border-radius:12px;
  color:#202060; text-decoration:none; font-weight:600;
  border:1px solid transparent;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.top-nav .main-menu .has-sub > .sub > li > a:hover,
.top-nav .main-menu .has-sub > .sub > li > a:focus{
  background:#fff;
  box-shadow:
    0 0 0 2px rgba(123,44,191,.16),
    0 0 0 4px rgba(44,79,97,.10),
    0 10px 22px rgba(15,27,34,.12);
  transform: translateY(-1px);
}

/* edge breathing room so first/last items don't hug brand/CTA */
.top-nav .brand{ margin-right:24px; }
.top-nav .main-menu > li:last-child{ margin-left:18px; }

/* ===== NAV: FINAL HOTFIX (no bullets, no jumping, brand glow) ===== */

/* Keep top row aligned & single line */
.top-nav .nav{ display:flex; align-items:center; }
.top-nav .main-menu{
  display:flex; align-items:center; gap:18px; flex-wrap:nowrap;
  margin:0; padding:0; list-style:none;
}
.top-nav .main-menu > li{
  position:relative; display:flex; align-items:center;
  margin:0; padding:0; list-style:none;
}
.top-nav .main-menu > li > a{
  display:inline-flex; align-items:center; justify-content:center;
  height:40px; line-height:1; padding:0 8px; white-space:nowrap; border-radius:10px;
}

/* Services parent subtle hover */
.top-nav .main-menu .has-sub > a{
  transition: color .2s ease, box-shadow .2s ease;
}
.top-nav .main-menu .has-sub:hover > a,
.top-nav .main-menu .has-sub:focus-within > a{
  color:#6050B0;
  box-shadow:0 0 0 2px rgba(123,44,191,.12);
}

/* Submenu: ALWAYS absolute + block so it never affects layout */
.top-nav .main-menu .has-sub > .sub{
  position:absolute !important;
  left:0; top:100%;
  display:block !important;          /* block but out of flow */
  list-style:none !important;        /* kill bullets */
  margin:8px 0 0 0 !important; padding:8px !important;

  min-width:240px;
  background:#fff; border:1px solid #e8edf2; border-radius:12px;
  box-shadow:0 14px 32px rgba(15,27,34,.18);
  z-index:9999;

  /* hidden state */
  opacity:0; visibility:hidden; transform: translateY(6px) scale(.98);
  pointer-events:none;               /* don't catch hover when hidden */
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

/* Show on hover/focus */
.top-nav .main-menu .has-sub:hover > .sub,
.top-nav .main-menu .has-sub:focus-within > .sub{
  opacity:1; visibility:visible; transform: translateY(0) scale(1);
  pointer-events:auto;
}

/* Bullet-proof: remove any marker on children too */
.top-nav .main-menu .has-sub > .sub > li{ list-style:none; margin:0; padding:0; }
.top-nav .main-menu .has-sub > .sub > li::marker{ content:''; }

/* Submenu links with brand glow */
.top-nav .main-menu .has-sub > .sub > li > a{
  display:flex; align-items:center; gap:10px;
  min-height:40px;
  padding:10px 12px; margin:4px; border-radius:12px;
  color:#202060; text-decoration:none; font-weight:600;
  border:1px solid transparent;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.top-nav .main-menu .has-sub > .sub > li > a:hover,
.top-nav .main-menu .has-sub > .sub > li > a:focus{
  background:#fff;
  box-shadow:
    0 0 0 2px rgba(123,44,191,.16),
    0 0 0 4px rgba(44,79,97,.10),
    0 10px 22px rgba(15,27,34,.12);
  transform: translateY(-1px);
}

/* Edge breathing room so first/last items don't hug brand/CTA */
.top-nav .brand{ margin-right:24px !important; }
.top-nav .main-menu > li:last-child{ margin-left:18px !important; }

/* Safety: never wrap long labels */
.top-nav .main-menu > li > a{ white-space:nowrap !important; }

/* submenu links styled like CTA pill */
.top-nav .main-menu .has-sub > .sub > li > a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 14px;
  margin: 6px;
  border-radius: 999px; /* pill shape */
  font-weight: 600;
  white-space: nowrap;
  background: linear-gradient(90deg,#6050B0,#202060); /* dark gradient */
  color: #fff; /* always white */
  text-decoration: none;
  border: 0;
  box-shadow: 0 6px 14px rgba(15,27,34,.18);
  transition: transform .15s ease, box-shadow .2s ease;
}

/* hover = glow effect only, background stays the same */
.top-nav .main-menu .has-sub > .sub > li > a:hover,
.top-nav .main-menu .has-sub > .sub > li > a:focus {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 2px rgba(123,44,191,.35), /* glow */
    0 0 0 4px rgba(44,79,97,.25),
    0 10px 24px rgba(15,27,34,.20);
  background: linear-gradient(90deg,#6050B0,#202060); /* keep dark */
  color: #fff; /* keep readable */
  
  /* Submenu container: remove white bg */
.top-nav .main-menu .has-sub > .sub {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 8px 0;
}

/* Submenu links: gradient pill buttons */
.top-nav .main-menu .has-sub > .sub > li > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px;
  padding: 8px 16px;
  margin: 6px;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
  background: linear-gradient(90deg,#6050B0,#202060) !important;
  color: #fff !important;
  text-decoration: none !important;
  border: 0;
  box-shadow: 0 6px 14px rgba(15,27,34,.18);
  transition: transform .15s ease, box-shadow .2s ease;
}

/* Hover effect: glow, keep gradient */
.top-nav .main-menu .has-sub > .sub > li > a:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 2px rgba(123,44,191,.35),
    0 0 0 4px rgba(44,79,97,.25),
    0 10px 24px rgba(15,27,34,.20);
  background: linear-gradient(90deg,#6050B0,#202060) !important;
  color: #fff !important;
}

/* Dropdown menu style */
.top-nav .main-menu .has-sub .sub {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(44, 79, 97, 0.6);       /* translucent background */
  backdrop-filter: blur(8px);               /* frosted-glass effect */
  box-shadow: 0 0 0 2px rgba(123,44,191,0.4), 
              0 6px 18px rgba(0,0,0,0.25); /* gradient ring + shadow */
  min-width: 220px;
  z-index: 999;
  list-style: none;
}

/* Submenu links */
.top-nav .main-menu .has-sub .sub li a {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  color: #fff;                              /* readable on dark bg */
  text-decoration: none;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

/* Hover effect on submenu items */
.top-nav .main-menu .has-sub .sub li a:hover {
  background: rgba(255, 255, 255, 0.15);    /* translucent hover */
  box-shadow: 0 0 0 1px rgba(123,44,191,0.5);
}

/* --- SERVICES SUBMENU: translucent card + stays open --- */

/* Keep parent positioned so the child can anchor under it */
.top-nav .main-menu .has-sub { position: relative; }

/* Invisible hover bridge so moving from tab -> submenu doesn't close it */
.top-nav .main-menu .has-sub::after{
  content:"";
  position:absolute; left:0; top:100%;
  width:100%; height:14px;              /* tiny buffer zone */
}

/* The submenu panel (translucent box with gradient ring) */
.top-nav .main-menu .has-sub > .sub{
  position:absolute; top:100%; left:0;
  margin-top:10px;                       /* space under tab */
  min-width:260px;
  padding:12px;
  border-radius:14px;
  list-style:none;
  z-index:9999;

  /* frosted/translucent card */
  background:rgba(15,27,34,.55);         /* dark translucent to keep contrast */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);

  /* gradient ring using a pseudo-element */
  border:1px solid transparent;          /* actual border is done below */

  /* hidden by default */
  opacity:0; visibility:hidden; transform: translateY(6px);
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

/* Gradient ring (without filling the center) */
.top-nav .main-menu .has-sub > .sub::before{
  content:"";
  position:absolute; inset:0;
  border-radius:14px;
  padding:1.5px;                         /* ring thickness */
  background:linear-gradient(90deg,#6050B0,#202060);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;               /* shows only the border ring */
  pointer-events:none;
}

/* Show submenu: hovering parent, focusing inside, OR hovering the submenu itself */
.top-nav .main-menu .has-sub:hover > .sub,
.top-nav .main-menu .has-sub:focus-within > .sub,
.top-nav .main-menu .has-sub > .sub:hover{
  opacity:1; visibility:visible; transform: translateY(0);
  pointer-events:auto;
}

/* Submenu items (keep readable on dark translucent box) */
.top-nav .main-menu .has-sub > .sub > li{ margin:0; padding:0; list-style:none; }
.top-nav .main-menu .has-sub > .sub > li > a{
  display:block;
  color:#fff; text-decoration:none; font-weight:600;
  padding:10px 12px; border-radius:10px;
  transition: background .15s ease, box-shadow .2s ease, transform .15s ease;
}

/* Hover on items: light translucent highlight */
.top-nav .main-menu .has-sub > .sub > li > a:hover,
.top-nav .main-menu .has-sub > .sub > li > a:focus{
  background:rgba(255,255,255,.15);
  box-shadow:0 0 0 1px rgba(123,44,191,.35);
  transform: translateY(-1px);
}

/* Kill any rogue bullets/markers from global CSS */
.top-nav .main-menu .has-sub > .sub > li::marker{ content:''; }

/* ===== SERVICES SUBMENU — glass card, gradient ring, no flicker ===== */

/* parent */
.top-nav .main-menu .has-sub{
  position:relative; display:flex; align-items:center;
}

/* hover bridge (prevents flicker when moving cursor from tab → submenu) */
.top-nav .main-menu .has-sub::after{
  content:""; position:absolute; left:0; top:100%; width:100%; height:14px;
}

/* the panel (like “Résultats obtenus”) */
.top-nav .main-menu .has-sub > .sub{
  /* RESET any global nukes */
  display:none !important;
  list-style:none; margin:0; padding:12px;
  position:absolute; top:100%; left:0; margin-top:10px;
  min-width:280px; border-radius:14px; z-index:9999;

  /* frosted glass */
  background: rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);

  /* tidy layout */
  box-sizing:border-box;
}

/* gradient ring around the glass panel */
.top-nav .main-menu .has-sub > .sub::before{
  content:""; position:absolute; inset:0; border-radius:14px; padding:1.5px;
  background:linear-gradient(90deg,#6050B0,#202060);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude; /* show only the ring */
  pointer-events:none;
}

/* show panel (hover parent / focus within / hovering the panel itself) */
.top-nav .main-menu .has-sub:hover > .sub,
.top-nav .main-menu .has-sub:focus-within > .sub,
.top-nav .main-menu .has-sub > .sub:hover{
  display:block !important;
}

/* submenu items = gradient pills (readable on dark/glass) */
.top-nav .main-menu .has-sub > .sub > li{ margin:0; padding:0; }
.top-nav .main-menu .has-sub > .sub > li > a.pill-link{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:36px; padding:8px 14px; margin:6px;
  border-radius:999px; font-weight:700; white-space:nowrap;
  background:linear-gradient(90deg,#6050B0,#202060); color:#fff !important;
  text-decoration:none; box-shadow:0 6px 14px rgba(15,27,34,.18);
  transition:transform .15s ease, box-shadow .2s ease;
}
.top-nav .main-menu .has-sub > .sub > li > a.pill-link:hover{
  transform:translateY(-2px);
  box-shadow:
    0 0 0 3px rgba(123,44,191,.35),
    0 12px 24px rgba(15,27,34,.25);
}

/* parent tab subtle glow on hover (just like before) */
.top-nav .main-menu .has-sub > a{
  position:relative; z-index:1;
}
.top-nav .main-menu .has-sub:hover > a,
.top-nav .main-menu .has-sub:focus-within > a{
  background:rgba(255,255,255,0.08);
  border-radius:12px;
  box-shadow:0 0 0 2px rgba(123,44,191,.25), 0 0 12px rgba(44,79,97,.25);
}

<script>
(function(){
  var parent = document.getElementById('navServices');
  var trigger = parent ? parent.querySelector('a[href="services.php"]') : null;
  var sub = document.getElementById('navSub');
  if(!parent || !trigger || !sub) return;

  function show(){
    sub.style.display = 'block';
    trigger.setAttribute('aria-expanded','true');
  }
  function hide(){
    sub.style.display = 'none';
    trigger.setAttribute('aria-expanded','false');
  }

  // Hover
  parent.addEventListener('mouseenter', show);
  parent.addEventListener('mouseleave', hide);

  // Focus: open when focusing Services or any item in the submenu
  trigger.addEventListener('focus', show);
  sub.addEventListener('focusin', show);

  // Blur: close when focus leaves the whole container
  parent.addEventListener('focusout', function(e){
    if (!parent.contains(e.relatedTarget)) hide();
  });

  // Esc to close
  document.addEventListener('keydown', function(e){
    if(e.key === 'Escape') hide();
  });

  // Click outside to close
  document.addEventListener('click', function(e){
    if (!parent.contains(e.target)) hide();
  });

  // Touch: first tap opens, second navigates
  trigger.addEventListener('touchstart', function(e){
    if (getComputedStyle(sub).display === 'none') { e.preventDefault(); show(); }
  }, {passive:false});
})();
</script>

/* === NAV — final consistency patch (last-wins) === */
.top-nav .wrapper.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
}

.top-nav .brand{
  flex:0 0 auto; margin-right:12px;
}

.top-nav .main-menu{
  display:flex; align-items:center;
  flex:1 1 auto; min-width:0;            /* allow shrinking */
  flex-wrap:nowrap;                       /* single line */
  gap:clamp(8px, 2vw, 16px);              /* responsive spacing */
  overflow-x:auto;                        /* if still tight, allow scroll */
  -ms-overflow-style:none; scrollbar-width:none;
}
.top-nav .main-menu::-webkit-scrollbar{ display:none; }

.top-nav .main-menu > li{
  flex:0 0 auto;                          /* never stretch or wrap */
  margin:0 !important;                    /* kill random margins from earlier rules */
}

.top-nav .main-menu > li > a{
  display:inline-flex; align-items:center; justify-content:center;
  height:40px;
  padding:0 clamp(6px, 1.2vw, 10px);
  font-size:clamp(13px, 1.35vw, 15px);    /* compress font slightly on small screens */
  white-space:nowrap;
}

/* Contact pill: don’t let it shrink or get clipped */
.top-nav .main-menu > li > a.btn-nav{
  flex-shrink:0;
}

/* Remove edge “push” so items don’t get forced off-screen */
.top-nav .main-menu > li:first-child,
.top-nav .main-menu > li:last-child{
  margin:0 !important;
}

/* Hide brand text earlier to save space (keep logo visible) */
@media (max-width: 1024px){
  .top-nav .brand span{ display:none; }
}

/* Nudge spacing down a bit more on narrow widths */
@media (max-width: 900px){
  .top-nav .main-menu{ gap:10px; }
}

/* Absolute safety: nothing wraps to a second line */
.top-nav .main-menu,
.top-nav .main-menu > li,
.top-nav .main-menu > li > a{
  overflow:visible !important;
}

.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
  background:#111; color:#fff; padding:8px 12px; border-radius:6px;
  text-decoration:none; z-index:1000;
}
.skip-link:focus{
  position:fixed; left:8px; top:8px; width:auto; height:auto; overflow:visible;
  outline:2px solid #0ea5e9;
}
:focus-visible{ outline:2px solid #0ea5e9; outline-offset:2px; }

/* ===== MOBILE NAV OVERRIDES (must be last to win specificity) ===== */
.hamburger {
  display:none !important; flex-direction:column; justify-content:center; gap:5px;
  background:none; border:none; cursor:pointer; padding:8px; z-index:100001;
}
.hamburger-line {
  display:block; width:26px; height:3px; border-radius:2px;
  background:var(--navy); transition:transform .3s, opacity .3s;
}
.hamburger.open .hamburger-line:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.hamburger.open .hamburger-line:nth-child(2){ opacity:0; }
.hamburger.open .hamburger-line:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

@media (max-width:960px){
  .hamburger { display:flex !important; }
  .top-nav .main-menu,
  .top-nav .nav .main-menu,
  #mainMenu {
    display:none !important; flex-direction:column !important; align-items:stretch !important;
    gap:0 !important; flex-wrap:wrap !important;
    position:fixed !important; top:0 !important; left:0 !important; right:0 !important; bottom:0 !important;
    background:#fff !important; z-index:100000 !important;
    padding:80px 22px 32px !important; overflow-y:auto !important;
    margin:0 !important;
  }
  #mainMenu.open { display:flex !important; }
  .top-nav .main-menu > li,
  #mainMenu > li {
    display:block !important; border-bottom:1px solid #eef2f6 !important;
    flex:auto !important; margin:0 !important; padding:0 !important;
  }
  .top-nav .main-menu > li > a,
  #mainMenu > li > a {
    display:block !important; padding:14px 0 !important; font-size:18px !important;
    font-weight:600 !important; color:var(--ink) !important; white-space:normal !important;
  }
  .top-nav .main-menu > li > a.active,
  #mainMenu > li > a.active { color:var(--purple) !important; }
}

/* Hero styles now inline in index.php (vx-hero) to avoid CSS conflicts */