/* ===========================
   DATA-SERVICES — styles3.css
   Thème fond bleu (global)
   =========================== */

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

  /* Palette texte sur fond sombre */
  --fg:#e9ecf1;
  --muted:#c7cfdf;

  /* Dégradé fond bleu profond */
  --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;
}
a{ color:#cfe0ff; text-decoration:none; }
a:hover{ text-decoration: underline; }

/* ---------- Navigation (header commun) ---------- */
.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);
}

/* ---------- Contenu ---------- */
.content{
  padding:28px;
  min-height:100vh;
  padding-bottom:120px; /* évite chevauchement par footer fixe */
  color: var(--fg);
}

/* ---------- Cartes / panneaux (si besoin) ---------- */
.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;
}
.text-muted{ color: var(--muted); }

/* ---------- Formulaire (ex: contact) ---------- */
form{
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  display: inline-block;
  text-align: left;
  max-width: 500px;
  width: 100%;
  padding: 20px;
}
form label{ display:block; margin-top:10px; font-weight:bold; color:#fff; }
form input, form textarea{
  width:100%; padding:8px; margin-top:5px;
  border:none; border-radius:6px;
  color:#111;
}
form input[type="submit"]{
  background:#4CAF50; color:#fff; cursor:pointer; margin-top:15px;
}
form input[type="submit"]:hover{ background:#45a049; }
.word-count{ font-size:.9rem; color:#fff; text-align:right; margin-top:5px; }

.alert{
  margin: 0 auto 15px; max-width: 500px;
  padding: 12px 14px; border-radius: 6px;
}
.alert.ok { background: rgba(76,175,80,.2); border: 1px solid rgba(76,175,80,.6); }
.alert.err{ background: rgba(244,67,54,.2);  border: 1px solid rgba(244,67,54,.6); }
.small-note{ font-size:12px; color:#eee; margin-top:8px; }

/* ---------- 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; }

/* ---------- Utilitaires ---------- */
.container{ max-width:1100px; margin:0 auto; padding:0 18px; }

/* ---------- Responsive ---------- */
@media (max-width: 760px){
  .brand{ font-size:14px; }
  .nav{ gap:10px; }
}