/* =========================================================
   TARIFS & OFFRES — Styles page-scoped (pricing.html)
   ========================================================= */

/* Header lisible sur fond sombre */
body.pricing-page .header{
  position: sticky; top:0; z-index:70;
  background: linear-gradient(180deg, rgba(13,27,42,.96), rgba(13,27,42,.65));
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
body.pricing-page .brand{ color:#fff; font-weight:900; letter-spacing:.3px }
body.pricing-page .menu{ display:flex; gap:1rem }
body.pricing-page .menu a{
  color:#e5e7eb; font-weight:800; border-radius:10px; padding:.5rem .6rem;
}
body.pricing-page .menu a:hover{
  color:#fff; background: rgba(255,255,255,.08);
}

/* Fond de page doux, pas blanc agressif */
body.pricing-page{
  background: #f6f7fb;
  color:#0a0f1a;
}

/* Hero */
.pricing-hero {
  padding: 7rem 2rem 3.2rem;
  text-align: center;
  background: linear-gradient(135deg, #0d1b2a, #1b263b);
  color: #fff;
}
.pricing-hero .container{ width:min(1100px,92vw); margin-inline:auto; }
.pricing-hero .display{ margin:.2rem 0 .5rem; }
.pricing-hero .lead{
  max-width: 70ch;
  margin: 0 auto;              /* centre vraiment le sous-titre */
  color:#dbe2ee;
}
.pricing-hero .btn { margin-top: 1rem; }

/* Boutons (fallback si global absent) */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.9rem 1.2rem; border-radius:999px; font-weight:900; cursor:pointer;
  text-decoration:none; transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-primary{
  background:#111827; color:#fff; border:1px solid #111827;
  box-shadow:0 12px 24px -12px rgba(0,0,0,.35);
}
.btn-primary:hover{ transform: translateY(-2px); }
.btn-secondary{
  background:#fff; color:#111827; border:1px solid #e5e7eb;
}
.btn-secondary:hover{ transform: translateY(-2px); }

/* Grille d’offres (cartes prospects) */
.offers.section{ padding: 3.2rem 0; background:transparent; }
.offers .grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1.1rem; }
@media (max-width: 980px){ .offers .grid{ grid-template-columns:1fr; } }

.offers .offer-card{
  background:#fff; border:1px solid #e5e7eb; border-radius:16px;
  padding:1.1rem; text-align:center;
  box-shadow:0 10px 26px -18px rgba(0,0,0,.18);
  transition: transform .2s ease, box-shadow .2s ease, outline .2s ease, border-color .2s ease;
}
.offers .offer-card:hover,
.offers .offer-card:focus-within{
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -22px rgba(0,0,0,.22);
  outline: 2px solid #0d1b2a;                   /* encadrement bleu nuit au hover/focus */
  outline-offset: 0;
  border-color: #0d1b2a;
}
.offers img{
  width:100%; height:190px; object-fit:cover;    /* crop propre */
  border-radius:12px; margin-bottom:.8rem; background:#e9edf3;
}
.offers h3{ margin: .6rem 0 .35rem; color:#0a0f1a; }
.offers p{ color:#5b657a; margin:0 0 .8rem; }
.offers .offer-card .btn{ margin-top: .3rem; }

/* “Recommandé” : pas d’encadrement permanent, juste ombre un peu plus forte */
.offers .offer-card.recommended{
  border-color:#e5e7eb;
  box-shadow: 0 18px 44px -22px rgba(13,27,42,.28);
}

/* Bande ROI */
.roi {
  padding: 3rem 2rem;
  background: transparent; /* hérite du fond de page */
  text-align: center;
}
.roi .grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:1rem;
  width:min(1140px,92vw); margin:0 auto;
}
@media (max-width: 980px){ .roi .grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .roi .grid{ grid-template-columns: 1fr; } }
.roi-item{
  background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:1rem;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
  font-size:1.06rem; font-weight:600; color:#0a0f1a;
}

/* CTA final */
.pricing-cta {
  padding: 3.2rem 2rem;
  text-align: center;
  background: #0d1b2a;
  color: #fff;
}
.pricing-cta .container{ width:min(900px,92vw); margin-inline:auto; }
.pricing-cta .lead{ color:#cbd5e1; }
.pricing-cta .btn { margin-top: 1rem; }

/* Focus accessible */
a:focus-visible, .btn:focus-visible, .offer-card:focus-visible{
  outline: 3px solid #0d1b2a;
  outline-offset: 2px;
  border-radius:12px;
}

/* Header aligné au thème global (comme les autres pages) */
body.pricing-page .header{
  position: sticky; top:0; z-index:70;
  background:#fff;                      /* plus de gradient sombre */
  backdrop-filter:none;
  border-bottom:1px solid rgba(17,24,39,.06);
}

/* Laisse la couleur venir du thème global (noir) */
body.pricing-page .brand{ color:inherit; font-weight:900; letter-spacing:.3px; }

/* Le menu reprend le gap global, pas de styles de couleur locaux */
body.pricing-page .menu{ display:flex; gap:var(--nav-gap); }

body.pricing-page .menu a{
  color:inherit;                         /* hérite du noir global */
  font-weight:600;
  border-radius:10px;
  padding:.5rem .6rem;
}

body.pricing-page .menu a:hover{
  color:var(--nav-hover);
  background: rgba(17,24,39,.06);
}

/* --- Promo bars (sticky, full-width, accessible) --- */
.site-announcements{
  position: sticky; top: 0; z-index: 60;  /* stays above header */
}
.ann{
  margin:0; padding:.6rem 1rem; text-align:center; font-weight:600;
}
.ann-vat{
  background:#b45309; /* amber-700 */
  color:#fff;
}
.ann-deal{
  background:#065f46; /* emerald-800 */
  color:#ecfdf5;
  border-top:1px solid rgba(0,0,0,.08);
}
.ann .till{opacity:.95; font-weight:600}

/* Avoid the hero being “too tight” under bars on mobile */
.pricing-hero{ padding:3rem 0; background:#f7f8fa; }
@media (max-width:640px){
  .pricing-hero{ padding:2.4rem 0; }
}

/* Badge in H1 stays neat on one line more often */
.display .badge{ white-space:nowrap; }

/* Centrer le contenu du Hero */
.pricing-hero {
  padding: 4rem 0;
  background: linear-gradient(180deg,#f8fafc 0%, #eef2f7 100%);
  border-bottom: 1px solid #e5e7eb;
  text-align: center;          /* ← centre le texte */
}

.pricing-hero .container {
  max-width: 900px;            /* largeur lisible */
  margin: 0 auto;              /* centre horizontalement */
}

.pricing-hero .display {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 2.5vw + 1rem, 2.8rem);
  line-height: 1.2;
}

.pricing-hero .lead {
  margin: 0 auto 1.5rem;
  max-width: 65ch;
  color: #475569;
  line-height: 1.5;
}

.pricing-hero .btn {
  margin: .3rem .4rem 0;        /* boutons centrés avec espace */
}

/* Correction couleurs Hero */
.pricing-hero .display,
.pricing-hero .lead {
  color: #111827; /* gris très foncé / noir */
}
.pricing-hero .badge {
  background: #dcfce7;
  color: #166534;
}

.offer-body {
  padding: 1.1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  text-align: center; /* ✅ centre tout le texte */
}
.price-row {
  justify-content: center; /* ✅ centre la ligne de prix */
}