/* ---------- Base ---------- */
:root{
  --bg: #0b0d10;
  --surface: #12161b;
  --alt: #0f1318;
  --text: #e8edf3;
  --muted: #b9c3cf;
  --primary: #2f80ed;
  --primary-strong: #1f65c0;
  --accent: #67e8f9;
  --border: #1e242c;
  --card: #0e1217;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 16px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: linear-gradient(180deg, var(--bg) 0%, #0b0d10 100%);
  color: var(--text);
  line-height:1.55;
}

.container{ width:min(1120px, 92vw); margin:0 auto; }

h1,h2,h3{ line-height:1.2; margin:0 0 .5rem 0; }
h1{ font-size: clamp(2rem, 3.8vw, 3rem); font-weight:800; letter-spacing:-.02em; }
h2{ font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight:800; }
h3{ font-size: clamp(1.15rem, 1.8vw, 1.35rem); font-weight:700; }

p{ margin:.25rem 0 .75rem; color: var(--muted); }
.lead{ font-size: clamp(1rem, 1.8vw, 1.2rem); color:#e3eaf3; }

a{ color: var(--accent); text-decoration: none; }
a:hover{ text-decoration: underline; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; padding:.8rem 1rem; border-radius: 999px; font-weight:700; letter-spacing:.01em;
  text-decoration:none; border:1px solid transparent; transition:.2s;
}
.btn-primary{ background: var(--primary); color:white; box-shadow: var(--shadow); }
.btn-primary:hover{ background: var(--primary-strong); transform: translateY(-1px); }
.btn-secondary{ background: transparent; color: var(--text); border-color: #2a313b; }
.btn-secondary:hover{ background:#0d1218; }

.center{ text-align:center; }

/* ---------- Header ---------- */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(10,12,15,.72); backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:.7rem 0; }
.brand{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  color:#fff; /* sans effet sur l'image */
  font-weight:800;
  text-decoration:none;
}
.brand-logo{
  display:block;
  height:54px; /* ajuste visuellement la hauteur du logo */
  width:auto;  /* garde les proportions */
}

/* Option: réduire un peu sur mobile */
@media (max-width: 480px){
  .brand-logo{ height:30px; }
}
.main-nav .menu{ display:flex; gap:.6rem; align-items:center; list-style:none; margin:0; padding:0; }
.main-nav a{ color:#cfe3ff; padding:.5rem .7rem; border-radius:8px; }
.main-nav a:hover{ background:#0e141b; text-decoration:none; }
.btn.btn-primary{ margin-left:.4rem; }

.nav-toggle{ display:none; background:transparent; border:1px solid #263042; color:#cfe3ff; padding:.45rem .6rem; border-radius:8px; }

@media (max-width: 980px){
  .nav-toggle{ display:inline-block; }
  .main-nav .menu{ position:absolute; right:1rem; top:64px; background:rgba(10,12,15,.96); border:1px solid var(--border); border-radius:12px; padding:.6rem; display:none; flex-direction:column; align-items:stretch; min-width: 260px; }
  .main-nav .menu.open{ display:flex; }
  .main-nav a{ padding:.6rem .7rem; }
}

/* ---------- Hero ---------- */
.hero{ position:relative; min-height: 72vh; display:flex; align-items:center; }
.hero-media{ position:absolute; inset:0; overflow:hidden; border-bottom:1px solid var(--border); }
.hero-video{ width:100%; height:100%; object-fit:cover; filter: saturate(1.1) contrast(1.05) brightness(.7); }
.hero-overlay{ position:absolute; inset:0; background: radial-gradient(circle at 20% 20%, rgba(47,128,237,.25), transparent 40%), linear-gradient(180deg, rgba(11,13,16,.4), rgba(11,13,16,.85)); }
.video-toggle{
  position:absolute; right:1rem; bottom:1rem; z-index: 2;
  background: rgba(0,0,0,.5); color:#fff; border:1px solid #2d3644; padding:.5rem .7rem; border-radius: 10px;
}
.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.02) contrast(1.02) brightness(1.25);
  position: absolute;
  inset: 0;
}

.hero-content{ position:relative; z-index:2; padding: 6rem 0 4rem; }
.cta-row{ display:flex; gap:.6rem; margin:.8rem 0 1.1rem; flex-wrap:wrap; }
.trust-list{ display:flex; gap:.9rem; list-style:none; padding:0; margin:1rem 0 0; color:#9fb2c9; flex-wrap:wrap; }
.trust-list li{ background:#0f141a; padding:.35rem .6rem; border:1px solid var(--border); border-radius:999px; font-size:.9rem; }

/* ---------- Sections ---------- */
.section{ padding: 72px 0; }
.section.alt{ background: linear-gradient(180deg, var(--alt), rgba(10,12,15,.2)); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.section-header{ text-align:center; margin-bottom:1.6rem; }
.section-header p{ max-width: 720px; margin: .4rem auto 0; }

/* ---------- Cards ---------- */
.cards{ display:grid; gap:1rem; }
.cards-5{ grid-template-columns: repeat(5, 1fr); }
.cards-3{ grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1080px){ .cards-5{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px){ .cards-5{ grid-template-columns: repeat(2, 1fr); } .cards-3{ grid-template-columns: 1fr; } }

.card{
  background: var(--card); border:1px solid var(--border); border-radius: var(--radius);
  padding:1rem; box-shadow: var(--shadow);
}
.card p{ color:#c8d5e6; }
.card .bullets{ margin:.5rem 0 0; padding-left: 1rem; color:#a9b7c8; }

/* Footer collé en bas */
.card-footer {
  margin-top: auto;
  padding-top: 0.8rem;
}

/* Style du lien dans les cartes */
.card-link {
  display: inline-block;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  margin-top: 0.5rem;
  transition: color 0.2s ease, transform 0.2s ease;
}

.card-link:hover {
  color: var(--primary);
  transform: translateY(-2px);
  text-decoration: underline;
}

/* Optionnel : séparation visuelle avant le lien */
.card-footer::before {
  content: "";
  display: block;
  height: 1px;
  background: var(--border);
  margin-bottom: 0.7rem;
  opacity: 0.4;
}

.project .project-top{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.tag{ font-size:.8rem; background:#0f141a; color:#a9b7c8; border:1px solid var(--border); padding:.2rem .5rem; border-radius:999px; }

/* ---------- Steps ---------- */
.steps{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:.9rem; counter-reset: step;
}
.steps li{
  list-style:none; background: var(--card); border:1px solid var(--border); border-radius: var(--radius); padding: .9rem 1rem;
}
.steps li::before{
  counter-increment: step; content: counter(step); font-weight:800; font-size: .9rem;
  display:inline-flex; width:28px; height:28px; align-items:center; justify-content:center; margin-right:.5rem;
  background: linear-gradient(135deg, var(--primary), var(--accent)); color:#081119; border-radius: 8px;
}
@media (max-width: 760px){ .steps{ grid-template-columns: 1fr; } }

/* ---------- Forms ---------- */
.contact-form{
  background: var(--card); border:1px solid var(--border); border-radius: var(--radius); padding:1rem; box-shadow: var(--shadow);
}
.form-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; }
.form-full{ grid-column: 1 / -1; }
.form-field{ display:flex; flex-direction:column; gap:.35rem; }
label{ font-weight:600; color:#dbe6f5; }
input, select, textarea{
  background:#0c1116; color:#e8edf3; border:1px solid #273141; border-radius:10px; padding:.7rem .8rem; outline:none;
}
input:focus, select:focus, textarea:focus{ border-color: var(--primary); box-shadow: 0 0 0 3px rgba(47,128,237,.18); }
.form-checkbox{ display:flex; flex-direction:row; align-items:center; gap:.6rem; }
.form-actions{ display:flex; align-items:center; gap:1rem; margin-top: .8rem; }
.form-note{ margin:0; font-size:.9rem; color:#8aa0bb; }
@media (max-width: 760px){ .form-grid{ grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.site-footer{ border-top:1px solid var(--border); padding: 32px 0; color:#9fb2c9; text-align:center; }

/* ---------- Utilities & a11y ---------- */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{ left:1rem; top:1rem; width:auto; height:auto; background:#000; color:#fff; padding:.5rem; border-radius:8px; z-index:999; }

/* ---------- Section partenaires (statique) ---------- */
#partenaires {
  text-align: center;
  padding: 3.5rem 0;
}

#partenaires .section-header h2 {
  color: #fff;
  margin-bottom: 0.4rem;
}

#partenaires .section-header p {
  color: #b9c3cf;
  margin-bottom: 2rem;
}

.logo-track.static {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 3rem 4rem;
}

/* ---------- Section partenaires (statique) ---------- */
#partenaires {
  text-align: center;
  padding: 3.5rem 0;
}

#partenaires .section-header h2 {
  color: #fff;
  margin-bottom: 0.4rem;
}

#partenaires .section-header p {
  color: #b9c3cf;
  margin-bottom: 2rem;
}

.logo-track.static {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 3rem 4rem;
}

/* Taille de base plus grande pour tous les logos */
.logo-track img {
  display: block;
  height: 60px; /* taille de base */
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.85;
  transition: opacity 0.25s ease, transform 0.25s ease;
  padding: 10px 26px; /* équilibre autour du logo */
  border-radius: 12px;
}

.logo-track img:hover {
  opacity: 1;
  transform: scale(1.05);
}

/* Ajustements de taille individuels */
.logo-track img.large {
  height: 78px; /* différence marquée pour les logos naturellement petits */
}

.logo-track img.small {
  height: 52px; /* pour compenser les logos très “étalés” */
}

/* Responsive */
@media (max-width: 768px) {
  .logo-track.static {
    gap: 2rem 2.5rem;
  }

  .logo-track img {
    height: 50px;
    padding: 6px 18px;
  }

  .logo-track img.large {
    height: 66px;
  }

  .logo-track img.small {
    height: 44px;
  }
}

/* ---------- Localisation ---------- */
.loc-grid{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap:1.4rem;
  align-items:start;
}
.loc-map iframe{
  width:100%;
  height:420px;
  border:0;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border:1px solid var(--border);
}
.loc-info h3{
  margin:.6rem 0 .2rem;
  color:#e6eef9;
  font-size:1.1rem;
}
.loc-info p{ color:#b9c3cf; margin:0 0 .7rem; }
.loc-areas{
  display:flex; flex-wrap:wrap; gap:.5rem;
  list-style:none; padding:0; margin:1rem 0 0;
}
.loc-areas li{
  background:#0f141a; border:1px solid var(--border);
  color:#9fb2c9; border-radius:999px; padding:.3rem .6rem; font-size:.9rem;
}
@media (max-width: 980px){
  .loc-grid{ grid-template-columns: 1fr; }
  .loc-map iframe{ height:340px; }
}