/* ============================================================
   NOS OFFRES — réutilise les sections de prix PREMIUM
   (bb-home-offers / bb-id-offers) affichées en 2 COLONNES,
   dans le thème Global Essor. Prix uniquement dans ces cartes.
============================================================ */

.no-wrap { max-width: 1120px; margin: 0 auto; padding: 0 1.25rem; }

/* ---------- HERO ---------- */
.no-hero { text-align: center; padding: clamp(2.5rem, 6vw, 4.5rem) 1.25rem clamp(1.5rem, 3vw, 2.5rem); }
.no-hero__pill {
  display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #1F4FD8; background: #EAF0FF; padding: 0.45rem 0.95rem; border-radius: 999px; margin-bottom: 1.2rem;
}
.no-hero__title { font-size: clamp(2rem, 5.2vw, 3.4rem); line-height: 1.08; font-weight: 800; color: #0F1B2D; margin: 0 auto 1.1rem; max-width: 900px; }
.no-hero__sub { font-size: clamp(1rem, 1.4vw, 1.15rem); color: #5B6472; max-width: 720px; margin: 0 auto 1.9rem; line-height: 1.6; }
.no-hero__reviews { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; color: inherit; font-size: 0.98rem; flex-wrap: wrap; justify-content: center; }
.no-hero__reviews span { color: #5B6472; }
.no-hero__reviews strong { color: #0F1B2D; }
.no-hero__reviews .no-hero__stars { color: #FFB400; letter-spacing: 2px; font-size: 1.05rem; }
.no-hero__reviews .no-hero__link { color: #1F4FD8; font-weight: 600; }
.no-hero__reviews:hover .no-hero__link { text-decoration: underline; }

/* ---------- BADGE "DESCENDRE" (scroll cue) ---------- */
.hero-scroll-cue {
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.35rem;
  margin: 2.4rem auto 0; text-decoration: none;
  color: #1F4FD8; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em;
}
.hero-scroll-cue__pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: #EAF0FF; padding: 0.5rem 1rem; border-radius: 999px;
}
.hero-scroll-cue__chev { width: 16px; height: 16px; animation: heroCueBounce 1.6s ease-in-out infinite; }
@keyframes heroCueBounce { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(4px); } }
.hero-scroll-cue:hover .hero-scroll-cue__pill { background: #1F4FD8; color: #fff; }

/* ============================================================
   SÉPARATION NETTE entre les offres — cartes premium en affichage
   natif (3 côte à côte pour la présence & le SEO, 2 pour l'identité).
============================================================ */
.no-premium + .no-premium { border-top: 1px solid #E6EAF2; }

/* ---------- PACK ---------- */
.no-packs { padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(2.5rem, 5vw, 4rem); }
.no-packs__box {
  background: linear-gradient(135deg, #1F4FD8, #2F7BFF); color: #fff; border-radius: 24px;
  padding: clamp(2rem, 5vw, 3.25rem); text-align: center; max-width: 1120px; margin: 0 auto;
}
.no-packs__box h2 { font-size: clamp(1.5rem, 3.2vw, 2.2rem); font-weight: 800; margin: 0 0 0.8rem; }
.no-packs__box p { color: rgba(255,255,255,0.9); max-width: 640px; margin: 0 auto 1.7rem; line-height: 1.6; }
.no-packs__btn { display: inline-flex; align-items: center; gap: 0.45rem; background: #fff; color: #1F4FD8; font-weight: 700; text-decoration: none; padding: 0.9rem 1.7rem; border-radius: 999px; transition: transform .18s ease; }
.no-packs__btn:hover { transform: translateY(-2px); }
.no-packs__note { display: block; margin-top: 0.9rem; font-size: 0.85rem; color: rgba(255,255,255,0.75); }