/* =========================================================
   STRUCTURIA — styles.css
   Charte globale, stable et maintenable
   ========================================================= */

/* -----------------------------
   VARIABLES GLOBALES
   ----------------------------- */
:root{
  --blue-electric: #0b5cff;
  --blue-dark: #0f172a;
  --blue-muted: #334155;

  /* bleu-vert clair des pavés (KPI, prestations, etc.) */
  --panel-bg: #eef6f8;

  --border-soft: rgba(15,23,42,.12);
  --shadow-soft: 0 10px 28px rgba(15,23,42,.08);

  --text-main: #0f172a;
  --text-muted: #475569;

  --radius: 16px;
}

/* -----------------------------
   RESET / BASE
   ----------------------------- */
*{
  box-sizing:border-box;
}

html, body{
  margin:0;
  padding:0;
}

body{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;
  color:var(--text-main);
  background:#ffffff;
  line-height:1.55;
}

img{
  max-width:100%;
  display:block;
}

a{
  color:inherit;
  text-decoration:none;
}

/* -----------------------------
   LAYOUT
   ----------------------------- */
.container{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 20px;
}

.section{
  padding:70px 0;
}

/* -----------------------------
   NAVBAR
   ----------------------------- */
.navbar{
  background:#ffffff;
  border-bottom:1px solid var(--border-soft);
}

.navbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:78px;
}

.navlinks{
  display:flex;
  gap:22px;
}

.navlinks a{
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--blue-dark);
  opacity:.85;
}

.navlinks a.active,
.navlinks a:hover{
  opacity:1;
  color:var(--blue-electric);
}

/* -----------------------------
   HERO
   ----------------------------- */
.hero{
  background:#f4f6f9;
  padding:90px 0 80px;
}

.hero h1{
  font-size:2.4rem;
  line-height:1.2;
  margin:0 0 16px;
}

.hero .lead{
  font-size:1.05rem;
  color:var(--text-muted);
}

/* Badge typographique (pas une pilule) */
.badge{
  font-weight:700;
  color:var(--blue-electric);
  margin-bottom:12px;
}

/* -----------------------------
   BOUTONS
   ----------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 20px;
  border-radius:999px;
  font-weight:700;
  font-size:.9rem;
  cursor:pointer;
  white-space:nowrap;
}

.btn.primary{
  background:var(--blue-electric);
  color:#ffffff;
}

.btn.primary:hover{
  opacity:.9;
}

.btn.ghost{
  border:1px solid var(--border-soft);
  color:var(--blue-dark);
  background:#ffffff;
}

/* -----------------------------
   GRILLES
   ----------------------------- */
.grid{
  display:grid;
  gap:18px;
}

.grid.cols-2{
  grid-template-columns:repeat(2, 1fr);
}

.grid.cols-3{
  grid-template-columns:repeat(3, 1fr);
}

@media(max-width:900px){
  .grid.cols-2,
  .grid.cols-3{
    grid-template-columns:1fr;
  }
}

/* -----------------------------
   PAVÉS / CARTES
   ----------------------------- */
.card{
  background:#ffffff;
  border:1px solid var(--border-soft);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow-soft);
}

.kpis{
  display:flex;
  gap:18px;
  margin-top:28px;
  flex-wrap:wrap;
}

/* PAVÉS STRUCTURIA (KPI + prestations) */
.kpi{
  background:var(--panel-bg);
  border:1px solid var(--border-soft);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow-soft);
  flex:1;
  min-width:240px;
}

.kpi b{
  display:block;
  font-weight:800;
  margin-bottom:6px;
}

.kpi span{
  color:var(--blue-muted);
  font-size:.95rem;
}

/* -----------------------------
   LISTES
   ----------------------------- */
.list{
  margin:10px 0 0;
  padding-left:18px;
}

.list li{
  margin:6px 0;
}

/* -----------------------------
   CALLOUT / ENTRÉE UNIQUE
   ----------------------------- */
.callout{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  background:#ffffff;
  border:1px solid var(--border-soft);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow-soft);
}

@media(max-width:700px){
  .callout{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* -----------------------------
   FOOTER
   ----------------------------- */
.footer{
  border-top:1px solid var(--border-soft);
  padding:28px 0;
  font-size:.85rem;
  color:var(--text-muted);
}

.footer a{
  color:var(--text-muted);
}

.footer a:hover{
  color:var(--blue-electric);
}

/* =========================================================
   V1.1 — Normalisation globale (navbar bleue + CTA pilule)
   ========================================================= */
.navbar{
  position:sticky;
  top:0;
  z-index:9999;
  background:#0a2342;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.navbar-inner{
  background:#0a2342;
}
.navbar .navlinks a{
  color:rgba(255,255,255,.88);
  opacity:1;
}
.navbar .navlinks a:hover{
  color:#ffffff;
}
.navbar .navlinks a.active{
  color:#ffffff;
  position:relative;
}
.navbar .navlinks a.active:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-10px;
  height:2px;
  background:var(--blue-electric);
  border-radius:2px;
  opacity:.95;
}
.brand img{
  height:62px;
  width:auto;
  display:block;
}
/* CTA navbar : pilule bleue permanente */
.navbar .btn.primary{
  background:var(--blue-electric);
  border:1px solid rgba(255,255,255,.00);
  color:#ffffff;
}
.navbar .btn.primary:hover{ opacity:.92; }