/* ========= PALETTE ========= */
:root{
  --blue:#0056A0;       /* accent principal (CTA, titres, liens) */
  --blue-soft:#E8F0FE;  /* fond doux des badges/pills */
  --bg:#DEDEDE;         /* fond général (gris Canva) */
  --text:#111111;       /* texte principal */
  --muted:#4A4A4A;      /* texte secondaire */
  --line:#C6C6C6;       /* bordures (légèrement plus visibles sur #DEDEDE) */
  --white:#FFFFFF;      /* cartes, éléments mis en avant */
}

/* ========= RESET + BASE ========= */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html,body{background:var(--bg)}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Open Sans', Arial, sans-serif;
  color:var(--text);
  line-height:1.6;
}
.container{width:min(1400px,92%);margin:0 auto}

/* ========= FONDS ========= */
.topbar,
.hero,
.section,
.section.soft,
.footer{background:var(--bg)}

/* ========= TOPBAR ========= */
.topbar{border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.topbar .bar{display:flex;align-items:center;justify-content:space-between;padding:.8rem 0}
.brand{font-weight:800;font-size:1.1rem;letter-spacing:.2px}
.brand .tag{margin-left:.5rem;font-weight:600;color:var(--muted)}
.nav a{margin-left:1rem;text-decoration:none;color:var(--muted);font-weight:600}
.nav .btn{margin-left:1rem}

/* Force le bouton nav en blanc sur fond bleu */
.nav-cta.btn.btn-primary{color:#fff !important}

/* ========= HERO ========= */
.hero{padding:3.2rem 0;border-bottom:1px solid var(--line)}
.hero h1{font-size:clamp(1.6rem,3.2vw,2.4rem);line-height:1.25;margin:0 0 .6rem}
.hero .accent{color:var(--blue)}
.lead{color:var(--muted);margin:.2rem 0 1rem}
.cta-row{display:flex;gap:.8rem;flex-wrap:wrap;margin:1rem 0 1.2rem}

/* Badges */
.benefits{display:flex;gap:1rem;flex-wrap:wrap;padding:0;margin:0;list-style:none;color:var(--muted)}
.benefits li{background:var(--blue-soft);border:1px solid var(--line);padding:.5rem .7rem;border-radius:999px}

/* ========= SECTIONS ========= */
.section{padding:2.6rem 0}
h2{font-size:1.6rem;margin:0 0 1.2rem}

/* ========= CARTES D’OFFRES ========= */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.2rem;
  align-items:stretch;
}
.card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:12px;
  padding:1rem;
  display:flex;
  flex-direction:column;             /* "result" en bas */
}
.card h3{
  display:flex;
  align-items:baseline;
  justify-content:space-between;     /* titre à gauche, prix à droite */
  min-height:3.2rem;                 /* normalise la hauteur du header */
  margin:0 0 .4rem 0;
}
.price{
  margin-left:1rem;
  white-space:nowrap;
  color:var(--text);
  font-weight:800;
}
.list{margin:.6rem 0 0 0;padding-left:1.1rem;flex:1}
.result{font-weight:700;margin-top:1rem}

/* ========= ENGAGEMENTS ========= */
.pillars{display:grid;gap:.6rem;margin:0;padding-left:1.1rem;color:var(--muted)}

/* ========= BOUTONS ========= */
.btn{
  display:inline-block;
  border:1px solid var(--line);
  padding:.8rem 1rem;
  border-radius:10px;
  text-decoration:none;
  font-weight:800;
}
.btn-primary{
  background:var(--blue);
  color:#fff !important;             /* texte blanc garanti */
  border-color:var(--blue);
}
.btn-ghost{background:var(--white);color:var(--text)}
.btn:hover{opacity:.92}

/* ========= MICRO-TYPO ========= */
.small{color:var(--muted);font-size:.95rem}
.muted{color:var(--muted)}

/* ========= FOOTER ========= */
.footer{border-top:1px solid var(--line);padding:1rem 0}
.footer .foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}