:root{
      --bg:#0b1220;
      --text:#e8eefc;
      --muted:#a9b7d4;
      --line:rgba(255,255,255,.12);
      --accent:#7aa7ff;
      --accent2:#56d6c5;
      --shadow: 0 10px 30px rgba(0,0,0,.35);
      --radius: 16px;
      --max: 1080px;
    }
    *{ box-sizing:border-box; }
    html{ scroll-behavior:smooth; } /* smooth scroll */
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
      background: radial-gradient(1200px 600px at 10% 10%, rgba(122,167,255,.18), transparent 60%),
                  radial-gradient(900px 500px at 90% 20%, rgba(86,214,197,.14), transparent 55%),
                  var(--bg);
      color: var(--text);
      line-height: 1.55;
    }
    a{ color:inherit; text-decoration:none; }
    .container{ max-width: var(--max); margin: 0 auto; padding: 0 20px; }

    header{
      position: sticky; top: 0; z-index: 10;
      backdrop-filter: blur(10px);
      background: rgba(11,18,32,.70);
      border-bottom: 1px solid var(--line);
    }
    .topbar{
      display:flex; align-items:center; justify-content:space-between;
      padding: 14px 0; gap: 12px;
    }
    .brand{ display:flex; flex-direction:column; gap:2px; }
    .brand strong{ font-size: 15px; letter-spacing:.2px; }
    .brand span{ font-size: 12px; color: var(--muted); }

    nav{ display:flex; gap: 10px; flex-wrap:wrap; justify-content:flex-end; }
    nav a{
      font-size: 13px; color: var(--muted);
      padding: 8px 10px; border-radius: 10px;
      border: 1px solid transparent;
    }
    nav a:hover{
      color: var(--text);
      border-color: var(--line);
      background: rgba(255,255,255,.04);
    }

    /* Prevent sticky header from covering anchors */
    section{ scroll-margin-top: 78px; }

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.card-light{
  background: #ffffff;
  color: #0b1220;
  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
.card-light h2,
.card-light strong{ color: #0b1220; }
.card-light span,
.card-light .pill{ color: #374151; }
.card-light .pill{
  background: #f3f4f6;
  border-color: #e5e7eb;
}
.card-light .kv span{ color: #6b7280; }


 

    /* Hero */
    .hero{ padding: 54px 0 18px; }
    .hero-grid{
      display:grid;
      grid-template-columns: 1.25fr .75fr;
      gap: 18px;
      align-items: stretch;
    }
    .hero-main{ padding: 28px; }
    .kicker{
      display:inline-flex; gap:10px; align-items:center;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid var(--line);
      color: var(--muted);
      font-size: 12px;
      background: rgba(255,255,255,.03);
    }
    .dot{
      width: 8px; height: 8px; border-radius: 999px;
      background: linear-gradient(90deg, var(--accent), var(--accent2));
      box-shadow: 0 0 18px rgba(122,167,255,.5);
    }
    h1{
      margin: 14px 0 10px;
      font-size: clamp(26px, 3.3vw, 44px);
      line-height: 1.1;
      letter-spacing: -0.6px;
    }
    .subtitle{ margin:0 0 18px; color: var(--muted); max-width: 62ch; }

    .actions{ display:flex; gap: 12px; flex-wrap:wrap; margin-top: 18px; }
    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      padding: 10px 14px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.03);
      font-size: 13px;
      color: var(--text);
      cursor: pointer;
    }
    .btn.primary{
      border-color: rgba(122,167,255,.45);
      background: linear-gradient(90deg, rgba(122,167,255,.18), rgba(86,214,197,.14));
    }
    .btn:hover{ filter: brightness(1.05); }

    .hero-side{ padding: 22px; }
    .hero-side h2{
      margin:0 0 10px;
      font-size: 14px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .12em;
    }
    .pill{
      display:inline-flex; align-items:center;
      padding: 8px 10px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.03);
      color: var(--muted);
      font-size: 12px;
      margin: 6px 6px 0 0;
    }
    .kv{
      margin-top: 14px;
      border-top: 1px solid var(--line);
      padding-top: 14px;
      display:grid; gap: 10px;
    }
    .kv div{ display:flex; justify-content:space-between; gap: 10px; font-size: 13px; }
    .kv span{ color: var(--muted); }
    .kv strong{ font-weight: 600; }

    /* Sections */
    .section{ padding: 18px 0; }
    .section-card{ padding: 22px; }
    .section-title{
      display:flex; align-items:baseline; justify-content:space-between; gap:12px;
      margin-bottom: 14px;
    }
    .section-title h2{ margin:0; font-size: 18px; letter-spacing: -.2px; }
    .section-title p{ margin:0; font-size: 13px; color: var(--muted); }

    .grid-2{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }
    .grid-3{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }
    .item{
      border: 1px solid var(--line);
      border-radius: 14px;
      background: rgba(255,255,255,.02);
      padding: 14px;
    }
    .item h3{ margin: 0 0 8px; font-size: 15px; }
    .item p{ margin: 0; color: var(--muted); font-size: 13px; }
    ul{ margin: 10px 0 0 18px; color: var(--muted); }
    li{ margin: 6px 0; }

    /* Consultants */
    .person{
      display:flex;
      gap: 12px;
      align-items:flex-start;
    }
    .avatar{
      width: 64px; height: 64px;
      border-radius: 16px;
      border: 1px solid var(--line);
      object-fit: cover;
      flex: 0 0 auto;
      background: rgba(255,255,255,.04);
    }
    .role{ font-size: 12px; color: var(--muted); margin-top: -2px; }
    .tags{ margin-top: 10px; display:flex; flex-wrap:wrap; gap: 6px; }
    .tag{
      font-size: 12px;
      padding: 6px 8px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.03);
      color: var(--muted);
    }

    /* Contact */
    .contact-grid{
      display:grid;
      grid-template-columns: 1fr .9fr;
      gap: 14px;
      align-items:start;
    }
    form{ display:grid; gap: 10px; }
    input, textarea{
      width:100%;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: rgba(0,0,0,.12);
      color: var(--text);
      outline:none;
      font-size: 13px;
    }
    textarea{ min-height: 120px; resize: vertical; }
    .hint{ font-size: 12px; color: var(--muted); margin-top: 8px; }

    footer{
      padding: 26px 0 40px;
      color: var(--muted);
      font-size: 12px;
      border-top: 1px solid var(--line);
      margin-top: 16px;
    }

    @media (max-width: 980px){
      .grid-3{ grid-template-columns: 1fr; }
    }
    @media (max-width: 860px){
      .hero-grid{ grid-template-columns: 1fr; }
      .grid-2{ grid-template-columns: 1fr; }
      .contact-grid{ grid-template-columns: 1fr; }
      nav{ gap: 8px; }
    }
	
	/* Partners marquee */
.marquee{
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.02);
  overflow: hidden;
}

.marquee-track{
  display:flex;
  width: max-content;
  animation: marquee 26s linear infinite;
}

.marquee:hover .marquee-track{
  animation-play-state: paused;
}

@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

.marquee-group{
  display:flex;
  gap: 14px;
  padding: 12px;
}

.partner-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.10);
  min-width: 180px;
  user-select:none;
}

.partner-logo img{
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 10px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
}


.partner-logo span{
  font-size: 13px;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation: none; }
}

/* --- Consultants marquee (re-use partners marquee) --- */
.consultant-card{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.10);
  min-width: 360px; /* largeur pour un défilement lisible */
  max-width: 420px;
}

.consultant-card .avatar{
  width: 56px;
  height: 56px;
  border-radius: 14px;
}

.consultant-card .name{
  font-size: 14px;
  font-weight: 700;
  margin: 0;
}

.consultant-card .role{
  font-size: 12px;
  color: var(--muted);
  margin: 2px 0 8px;
}

.consultant-card .desc{
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.consultant-card .tags{
  margin-top: 10px;
  display:flex;
  flex-wrap:wrap;
  gap: 6px;
}

/* ===== Responsive accordion nav ===== */

.nav { display:flex; align-items:center; }

/* Desktop nav stays as before */
.nav-links{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.nav-links a{
  font-size: 13px;
  color: var(--muted);
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
}
.nav-links a:hover{
  color: var(--text);
  border-color: var(--line);
  background: rgba(255,255,255,.04);
}

/* Mobile accordion hidden on desktop */
.nav-accordion{ display:none; }

/* Mobile breakpoint */
@media (max-width: 860px){
  .nav-links{ display:none; }       /* hide desktop links */
  .nav-accordion{ display:block; }  /* show accordion */

  .nav-accordion{
    position: relative;
  }

  .nav-summary{
    list-style: none;
    cursor: pointer;
    user-select: none;
    display:inline-flex;
    align-items:center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.03);
    color: var(--text);
    font-size: 13px;
  }

  /* remove default marker */
  .nav-summary::-webkit-details-marker{ display:none; }

  .nav-panel{
    margin-top: 10px;
    min-width: 240px;
    display:grid;
    gap: 6px;
    padding: 10px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: rgba(11,18,32,.92);
    backdrop-filter: blur(10px);
  }

  .nav-panel a{
    padding: 10px 10px;
    border-radius: 12px;
    border: 1px solid transparent;
    color: var(--muted);
    font-size: 13px;
  }
  .nav-panel a:hover{
    color: var(--text);
    border-color: var(--line);
    background: rgba(255,255,255,.04);
  }

  /* rotate chevron when open */
  .nav-accordion[open] .chev{
    transform: rotate(180deg);
    transition: transform .15s ease;
  }
  .chev{ transition: transform .15s ease; }
}

/* ============================
   Modern refresh (drop-in patch)
   Colle ce bloc EN FIN de fichier
   ============================ */

/* 1) Variables + base */
:root{
  /* Un fond un peu plus profond + lignes plus fines */
  --bg: #070b14;
  --text: #eaf0ff;
  --muted: rgba(234,240,255,.70);
  --line: rgba(255,255,255,.10);

  /* Accent plus “premium” */
  --accent: #8ab4ff;
  --accent2:#64f2da;

  /* Radius & shadows plus doux */
  --radius: 18px;
  --shadow: 0 18px 60px rgba(0,0,0,.45);

  /* Nouvelles vars utiles */
  --glass: rgba(255,255,255,.055);
  --glass2: rgba(255,255,255,.035);
  --focus: 0 0 0 4px rgba(138,180,255,.22);
}

body{
  /* contraste + profondeur + léger “grain” */
  background:
    radial-gradient(1200px 700px at 12% 8%, rgba(138,180,255,.22), transparent 60%),
    radial-gradient(900px 600px at 88% 18%, rgba(100,242,218,.16), transparent 55%),
    radial-gradient(700px 450px at 50% 95%, rgba(255,255,255,.06), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 25%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 2) Header plus clean */
header{
  background: rgba(7,11,20,.62);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.brand strong{
  font-size: 15px;
  letter-spacing: .25px;
}
.brand span{
  color: var(--muted);
}

/* 3) Liens nav : hover + “active feel” */
nav a,
.nav-links a{
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
nav a:hover,
.nav-links a:hover{
  transform: translateY(-1px);
}
nav a:focus-visible,
.nav-links a:focus-visible{
  outline: none;
  box-shadow: var(--focus);
}

/* 4) Cards: glassmorphism propre + hover subtil */
.card{
  background: linear-gradient(180deg, var(--glass), var(--glass2));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

.card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(600px 220px at 20% 0%, rgba(138,180,255,.12), transparent 60%),
    radial-gradient(500px 180px at 90% 10%, rgba(100,242,218,.08), transparent 55%);
  pointer-events:none;
}

.section-card, .hero-main, .hero-side{
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.section-card:hover, .hero-main:hover, .hero-side:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 22px 80px rgba(0,0,0,.55);
}

/* 5) Titres plus “design system” */
h1{
  letter-spacing: -0.8px;
}
.section-title h2{
  font-size: 18px;
}
.section-title p,
.subtitle,
.item p{
  color: var(--muted);
}

/* 6) Items : plus lisibles + micro-hover */
.item{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.item:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
}

/* 7) Pills / tags plus modernes */
.pill, .tag{
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.035);
  transition: border-color .18s ease, background .18s ease;
}
.pill:hover, .tag:hover{
  border-color: rgba(138,180,255,.28);
  background: rgba(138,180,255,.06);
}

/* 8) Boutons “premium” */
.btn{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 35px rgba(0,0,0,.35);
  border-color: rgba(255,255,255,.16);
}
.btn.primary{
  border-color: rgba(138,180,255,.55);
  background: linear-gradient(90deg, rgba(138,180,255,.22), rgba(100,242,218,.16));
}
.btn:focus-visible{
  outline: none;
  box-shadow: var(--focus);
}

/* 9) Inputs : focus propre + meilleure lisibilité */
input, textarea{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
  transition: box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
input:focus, textarea:focus{
  border-color: rgba(138,180,255,.35);
  box-shadow: var(--focus);
  background: rgba(255,255,255,.055);
}

/* 10) Marquee cards plus “polished” */
.partner-logo,
.consultant-card{
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.10);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.partner-logo:hover,
.consultant-card:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
}

/* 11) Accessibilité : réduit l’anim si l’utilisateur le demande */
@media (prefers-reduced-motion: reduce){
  .section-card, .hero-main, .hero-side, .item, .btn, nav a, .nav-links a,
  .partner-logo, .consultant-card{
    transition: none !important;
  }
}