:root{
  --bg:#0b1015;
  --card:#111826;
  --text:#eaf1f8;
  --muted:#91a3b7;
  --accent:#3ea6ff;      /* bleu principal */
  --accent2:#8b5cf6;     /* violet léger */
  --border:#1b2733;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}

body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 480px at 80% -10%, rgba(62,166,255,.10), transparent 60%),
    radial-gradient(800px 420px at -10% 10%, rgba(139,92,246,.08), transparent 60%),
    var(--bg);
  line-height:1.65;
  font-size:17px;
}

.container{width:min(1024px,92%); margin-inline:auto}
a{color:var(--text); text-decoration:none}
a:hover{color:var(--accent)}
.muted{color:var(--muted)}
.tiny{font-size:.85rem}

/* Boutons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.9rem 1.1rem; border-radius:12px; font-weight:700; border:0; cursor:pointer;
  background:linear-gradient(135deg,var(--accent),#6dc0ff); color:#04131f;
}
.btn:hover{filter:brightness(1.05)}
.btn-small{padding:.6rem .8rem; border-radius:10px}
.ghost{background:transparent; color:var(--text); outline:1px solid var(--border)}
.link-like{background:none; border:0; color:var(--accent); cursor:pointer; padding:0}

/* Header / Nav */
.site-header{
  position:sticky; top:0; z-index:10;
  background:rgba(11,16,22,.72);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border)
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:.8rem 0}

/* Brand propre : MTNA blanc / Logistic bleu */
.brand{display:flex; align-items:center; gap:.35rem; font-weight:800}
.brand .logo{
  display:inline; background:none; color:#fff; width:auto; height:auto; padding:0; border-radius:0;
  font-weight:800; font-size:1.08rem; letter-spacing:.4px;
}
.brand .brand-sub{color:var(--accent); font-weight:800; margin-left:.35rem;}
.site-header .brand:hover .brand-sub,
.site-footer .brand:hover .brand-sub{filter:brightness(1.12)}

.nav-links{display:flex; gap:1rem; align-items:center}
.nav-links a{padding:.5rem .7rem; border-radius:9px}
.nav-links a:hover{background:rgba(255,255,255,.045)}
.menu-toggle{display:none; background:transparent; border:0}
.menu-bar{display:block; width:22px; height:2px; background:var(--text); margin:4px 0; border-radius:2px}

/* Hero */
.hero{
  padding:3.6rem 0 2.6rem;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)), transparent;
}
.hero h1{
  margin:0 0 .6rem;
  font-size:clamp(2.2rem,5.6vw,3.4rem);
  line-height:1.15;
}
.lead{color:#cfe1f5; max-width:58ch}
.cta-row{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.05rem}
.cta-row.left{justify-content:flex-start}
.pill-list{display:flex; flex-wrap:wrap; gap:.6rem; margin:1rem 0 0; padding:0; list-style:none}
.pill-list li{background:#0e1621; border:1px solid #243241; padding:.45rem .75rem; border-radius:999px}

/* Sections */
.section{padding:2.4rem 0}
.section.alt{background:linear-gradient(180deg, rgba(255,255,255,.02), transparent 45%)}
h2{margin:.1rem 0 1rem; font-size:1.8rem}

/* Cartes / blocs */
.card{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:1.1rem}
.card.simple{padding:1rem}
.stack{display:grid; gap:1rem}
.contact-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:1rem; align-items:start}

.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:.8rem}
label{display:grid; gap:.35rem; font-weight:600}
input,textarea{background:#0a121a; color:var(--text); border:1px solid var(--border); border-radius:10px; padding:.85rem}
input::placeholder,textarea::placeholder{color:#7f93a8}
input:focus,textarea:focus{outline:1px solid var(--accent)}

.kv{display:flex; justify-content:space-between; gap:1rem; padding:.35rem 0; border-bottom:1px solid rgba(255,255,255,.04)}
.kv:last-child{border-bottom:0}

.map iframe{width:100%; height:260px; border:0; border-radius:12px}

/* Services & Tarifs */
.cards-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.list{margin:.6rem 0 0; padding:0; list-style:none; display:grid; gap:.4rem}
.price{font-weight:800; font-size:1.25rem; margin:.4rem 0; color:#d8e8fb}

/* Étapes */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; margin:0; padding:0; list-style:none}
.steps li{background:#0e1621; border:1px solid var(--border); border-radius:12px; padding:.7rem; text-align:center}

/* FAQ */
.qa{background:var(--card); border:1px solid var(--border); border-radius:12px; padding:.8rem; margin:.5rem 0}
.qa summary{cursor:pointer; font-weight:600}

/* Footer */
.site-footer{border-top:1px solid var(--border); padding:1.6rem 0; background:#0a0f15}
.foot{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-top:.2rem}
.site-footer .foot-right a{opacity:.95}
.site-footer .foot-right a:hover{color:var(--accent); text-decoration:underline}

/* Cookies */
.cookie-banner{position:fixed; left:0; right:0; bottom:0; background:#0a0f15; border-top:1px solid var(--border); padding:.7rem 0; z-index:20}
.cookie-inner{width:min(1000px,92%); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:.8rem}
.cookie-actions{display:flex; gap:.5rem}
.cookie-modal,.cookie-read{position:fixed; inset:0; background:rgba(0,0,0,.5); display:grid; place-items:center; z-index:30}
.cookie-card{width:min(520px,92%); background:var(--card); border:1px solid var(--border); border-radius:12px; padding:1rem}
.switch{display:flex; align-items:center; gap:.6rem; margin:.4rem 0}
.cookie-dump{background:#081019; border:1px solid var(--border); border-radius:10px; padding:.7rem; max-height:40vh; overflow:auto}

/* Contrat cookies + lecture lisible */
.cookie-terms{margin:.6rem 0}
.cookie-terms summary{cursor:pointer; font-weight:700}
.cookie-terms .terms-body{padding:.5rem 0 0 .2rem; color:var(--muted)}
.cookie-terms ul{margin:.4rem 0 .6rem; padding-left:1.2rem}
#cookie-readable ul{margin:.4rem 0; padding-left:1.2rem}

/* Responsive */
@media (max-width:960px){
  .container{width:min(92ch,92%)}
  .contact-grid{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .cards-3{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .nav-links{
    position:fixed; inset:60px 0 auto 0;
    background:#0a0f15; border-bottom:1px solid var(--border);
    display:none; flex-direction:column; padding:1rem; gap:.2rem
  }
  .nav-links a{padding:.7rem; border-radius:10px}
  .menu-toggle{display:block}
}