/* ===========================
   DATA-SERVICES — styles4.css
   Partenaires : fond bleu (sans image), nav, cartes, galerie logos compacte
   =========================== */

/* ---------- Variables ---------- */
:root{
  --nav-bg: rgba(8,12,28,.88);
  --nav-border: rgba(255,255,255,.12);
  --brand: #4f7cff;

  --fg:#e9ecf1;
  --muted:#c7cfdf;

  --bg:#0b1020;
  --bg-mid:#0d1430;
  --bg-bottom:#0a0f22;
}

/* ---------- Base ---------- */
*{ box-sizing: border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family: Arial, sans-serif;
  color: var(--fg);
  background: linear-gradient(180deg, var(--bg), var(--bg-mid) 35%, var(--bg-bottom));
  background-attachment: fixed; /* pas d'image de fond */
}
a{ color:#cfe0ff; text-decoration:none; }
a:hover{ text-decoration: underline; }

/* ---------- Nav commune ---------- */
.topnav{
  position: sticky; top: 0; z-index: 1000;
  background: var(--nav-bg);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--nav-border);
}
.nav-inner{
  max-width:1100px; margin:0 auto; padding:12px 18px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:700; letter-spacing:.3px; color:#fff; text-decoration:none;
  font-size:15px; line-height:1;
}
.brand svg{ width:18px; height:18px; }
.nav{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.nav>li>a{
  color:#fff; text-decoration:none; padding:8px 10px;
  border-radius:10px; display:inline-flex; align-items:center; gap:6px;
  border:1px solid transparent;
}
.nav>li>a:hover{
  border-color: var(--nav-border);
  background: rgba(255,255,255,.10);
}
.nav>li>a.active{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.22);
}

/* ---------- Mise en page ---------- */
.content{ padding:28px; min-height:100vh; padding-bottom:120px; }
.container{ max-width:1100px; margin:0 auto; }

/* ---------- Cartes ---------- */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  padding: 20px;
}
.hero h1{ margin:0 0 8px; font-size:36px; }
.text-muted{ color: var(--muted); }

/* CTA boutons */
.cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:12px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 16px; border-radius:12px; border:1px solid rgba(255,255,255,.14);
  font-weight:600; color:#fff; text-decoration:none;
}
.btn.primary{ background: linear-gradient(180deg, var(--brand), #3a69ff); border-color:#365ff2; }
.btn.ghost{ background: transparent; }

/* Liste bullets */
.bullets{ margin:10px 0 0 18px; }
.bullets li{ margin:6px 0; }

/* ---------- Galerie logos (compacte) ---------- */
.gallery-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px;
}
.gallery-controls{ display:flex; gap:8px; }
.arrow{
  appearance: none; border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08);
  color:#fff; padding:8px 12px; border-radius:10px; cursor:pointer; font-weight:600;
}
.arrow[disabled]{ opacity:.5; cursor:not-allowed; }

.logo-gallery{ position: relative; overflow: hidden; }
.logo-track{
  display:flex; align-items:center; gap:6px;         /* gap réduit */
  overflow-x: auto; scroll-behavior: smooth;
  scrollbar-width: none; padding-bottom: 2px;
}
.logo-track::-webkit-scrollbar{ display:none; }

/* === Tailles très petites par défaut === */
.logo-item{
  flex: 0 0 auto;
  display:flex; align-items:center; justify-content:center;
  width: 64px;            /* largeurs compactes */
  height: 28px;
  border-radius: 8px;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
}
.logo-item img{
  max-width: 54px;
  max-height: 18px;
  object-fit: contain;
  filter: grayscale(18%);
  opacity:.95;
}

/* Etat vide */
.empty{ color: var(--muted); padding: 20px; }

/* ---------- Footer fixe ---------- */
footer{
  position: fixed; bottom: 0; left: 0; right: 0;
  width: 100%;
  background: #f1f1f1;
  color: #111;
  text-align: center;
  padding: 1em 0;
  z-index: 500;
}
footer a{ color:#0b5fff; }
footer a:hover{ text-decoration: underline; }

/* ---------- Responsive ---------- */
/* ====== x4 : logos très grands ====== */
.logo-item{
  width: 256px;   /* 64 x 4 */
  height: 112px;  /* 28 x 4 */
}
.logo-item img{
  max-width: 216px;  /* 54 x 4 */
  max-height: 72px;  /* 18 x 4 */
}

/* Ajustements responsives (x4) */
@media (min-width: 1280px){
  .logo-item{ width: 288px; height: 128px; }      /* 72x32 x4 */
  .logo-item img{ max-width: 240px; max-height: 80px; }
}
@media (max-width: 640px){
  .logo-item{ width: 240px; height: 104px; }      /* 60x26 x4 */
  .logo-item img{ max-width: 200px; max-height: 64px; }
}