/* ===========================
   DATA-SERVICES — styles2.css
   Autonome pour contact.php (nav + page + footer)
   =========================== */

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

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

  --panel: rgba(8,12,28,.72);
  --panel-soft: rgba(12,18,40,.55);

  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin: 0;
  font-family: Arial, sans-serif;
  color: var(--fg);
  background: url('../images/fond2.jpg') no-repeat center center fixed;
  background-size: cover;
}
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,.06); }
.nav>li>a.active{
  background: rgba(255,255,255,.10);
  border-color: var(--nav-border);
}
.btn-small{
  padding:8px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.2);
  color:#fff; text-decoration:none; font-weight:600;
}
.btn-small.primary{
  background: linear-gradient(180deg, var(--brand), #3a69ff);
  border-color:#365ff2;
}

/* ---------- Mise en page contenu ---------- */
.content{
  padding: 28px;
  min-height: 100vh;
  padding-bottom: 120px; /* évite que le footer fixe chevauche le contenu */
  text-align: center;
}

/* ---------- Carte / panneau (utilisé pour formulaire) ---------- */
.card{
  background:linear-gradient(180deg, var(--panel), var(--panel-soft));
  border:1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
}

/* ---------- Formulaire contact ---------- */
form{
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.08);
  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;
}
form input[type="submit"]{
  background-color: #4CAF50; color: white; cursor: pointer; margin-top: 15px;
}
form input[type="submit"]:hover{ background-color: #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-color: #f1f1f1;
  color: #111;
  text-align: center;
  padding: 1em 0;
  z-index: 500;
}
footer a{ color:#0b5fff; text-decoration:none; }
footer a:hover{ text-decoration: underline; }

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