/*
 * Global visual consistency layer — v3 — 2026-08-16
 * Professional site-wide system:
 * - sticky header that stays in normal document flow (no content hidden behind it)
 * - one typography scale across all public pages
 * - one light content palette across legacy/new templates
 * - consistent hero spacing, cards, links and CTAs
 *
 * This file is intentionally loaded LAST on every HTML page.
 */

:root {
  --ui-bg: #ffffff;
  --ui-surface: #ffffff;
  --ui-soft: #f8fafc;
  --ui-border: #e2e8f0;
  --ui-border-strong: #cbd5e1;
  --ui-title: #0f172a;
  --ui-text: #334155;
  --ui-muted: #64748b;
  --ui-blue: #1d4ed8;
  --ui-blue-dark: #1e40af;
  --ui-violet: #6d28d9;
  --ui-success: #15803d;
  --ui-header: #111827;
  --ui-header-text: #e5e7eb;
  --ui-shadow: 0 10px 30px rgba(15, 23, 42, .06);
  --font-display: 'Space Grotesk', 'Space Grotesk Fallback', Arial, sans-serif;
  --font-body: 'Space Grotesk', 'Space Grotesk Fallback', Arial, sans-serif;
}


/* Prevent horizontal scrolling without creating a sticky-breaking scroll container. */
html body {
  overflow-x: clip !important;
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
  font-family: 'Space Grotesk', 'Space Grotesk Fallback', Arial, sans-serif !important;
}

/* -------------------------------------------------------------------------- */
/* Header: professional, stable and NEVER overlays the first page content.    */
/* -------------------------------------------------------------------------- */

html body .header {
  position: sticky !important;
  top: 0 !important;
  left: auto !important;
  width: 100% !important;
  z-index: 10000 !important;
  background: rgba(17, 24, 39, .98) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
  box-shadow: 0 5px 20px rgba(15, 23, 42, .12) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

html body .header .nav {
  min-height: 80px !important;
  padding: .8rem 2rem !important;
}

html body .header .logo {
  font-family: 'Space Grotesk', 'Space Grotesk Fallback', Arial, sans-serif !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: -.02em !important;
}

html body .header .nav-link {
  color: #cbd5e1 !important;
  font-size: .96rem !important;
  font-weight: 600 !important;
}

html body .header .nav-link:hover,
html body .header .nav-link.active {
  color: #ffffff !important;
}

html body .header .btn-header {
  min-height: 44px !important;
  padding: .65rem 1.15rem !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* -------------------------------------------------------------------------- */
/* Main canvas / color system                                                  */
/* -------------------------------------------------------------------------- */

html body main {
  --bg-primary: var(--ui-bg) !important;
  --bg-secondary: var(--ui-soft) !important;
  --bg-card: var(--ui-surface) !important;
  --text-primary: var(--ui-title) !important;
  --text-secondary: var(--ui-muted) !important;
  --accent-cyan: var(--ui-blue) !important;
  --accent-violet: var(--ui-violet) !important;
  --accent-purple: var(--ui-violet) !important;
  --accent-success: var(--ui-success) !important;
  --gradient: linear-gradient(135deg, var(--ui-blue) 0%, var(--ui-violet) 100%) !important;
  padding-top: 0 !important;
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
}

/* Old templates used black section backgrounds. The public content canvas is now light. */
html body main section,
html body main article,
html body main .section,
html body main .content-section,
html body main .pourquoi-section,
html body main .pack-detail-section,
html body main .faq-offres-section,
html body main .faq-section,
html body main .contact-form-section,
html body main .reseller-section,
html body main .reviews-section,
html body main .carousel-section,
html body main .local-geo-section {
  background-color: var(--ui-bg) !important;
  color: var(--ui-text) !important;
}

/* A few intentional separators may use only a very subtle neutral surface. */
html body main :is(.cta-section, .final-cta) {
  background: var(--ui-soft) !important;
}

/* -------------------------------------------------------------------------- */
/* Fixed-header compensation cleanup. The header now occupies normal flow.     */
/* -------------------------------------------------------------------------- */

/* Standard first-screen rhythm for normal page heroes. */
html body main > :is(
  .city-hero,
  .contact-hero,
  .reseller-hero,
  .chaines-hero,
  .legal-hero,
  .faq-hero,
  .blog-hero,
  .apropos-hero,
  .error-section
) {
  min-height: auto !important;
  padding-top: 3.25rem !important;
  padding-bottom: 3.25rem !important;
}

/* Home remains a visual landing hero, but without legacy fixed-header padding. */
html body main > .hero {
  min-height: auto !important;
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}

/* Legacy product/city templates start with a breadcrumb then a hero. */
html body main > .breadcrumb-offres {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 2rem 2rem 0 !important;
}

html body main > .breadcrumb-offres + .offres-hero,
html body main > .breadcrumb-offres + section.offres-hero {
  padding-top: 1.5rem !important;
  padding-bottom: 3rem !important;
}

/* Older standalone articles compensated for a fixed header with 8rem. */
html body main > .article-hero {
  padding-top: 3.25rem !important;
  padding-bottom: 2rem !important;
}

/* New editorial articles have their own wrapper. */
html body.editorial-article main .editorial-page {
  padding-top: 2.75rem !important;
  padding-bottom: 4rem !important;
}

html body.editorial-article main .editorial-page .article-hero {
  padding-top: 0 !important;
  padding-bottom: .5rem !important;
}

/* -------------------------------------------------------------------------- */
/* One typography system across all page templates                            */
/* -------------------------------------------------------------------------- */

html body main h1,
html body main .hero-title,
html body main .article-hero h1,
html body main .offres-hero h1,
html body main .city-hero h1,
html body main .contact-hero h1,
html body main .reseller-hero h1,
html body main .chaines-hero h1,
html body main .legal-hero h1,
html body main .faq-hero h1,
html body main .blog-hero h1,
html body main .apropos-hero h1 {
  max-width: 920px !important;
  margin-top: 0 !important;
  margin-bottom: 1.15rem !important;
  font-family: 'Space Grotesk', 'Space Grotesk Fallback', Arial, sans-serif !important;
  font-size: clamp(2rem, 3.5vw, 2.9rem) !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  letter-spacing: -.03em !important;
  color: var(--ui-title) !important;
  -webkit-text-fill-color: var(--ui-title) !important;
  text-shadow: none !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  text-wrap: balance;
}

html body main h2,
html body main .section-title,
html body main .editorial-card-title {
  font-family: 'Space Grotesk', 'Space Grotesk Fallback', Arial, sans-serif !important;
  font-size: clamp(1.55rem, 2.4vw, 2rem) !important;
  font-weight: 700 !important;
  line-height: 1.24 !important;
  letter-spacing: -.02em !important;
  color: var(--ui-title) !important;
  -webkit-text-fill-color: var(--ui-title) !important;
  text-shadow: none !important;
  text-wrap: pretty;
}

html body main h3 {
  font-family: 'Space Grotesk', 'Space Grotesk Fallback', Arial, sans-serif !important;
  font-size: clamp(1.12rem, 1.7vw, 1.35rem) !important;
  font-weight: 700 !important;
  line-height: 1.34 !important;
  letter-spacing: -.012em !important;
  color: #172033 !important;
  -webkit-text-fill-color: #172033 !important;
  text-shadow: none !important;
}

/* No neon/gradient display typography in editorial content. */
html body main :is(h1, h2, h3) .gradient-text,
html body main :is(h1, h2, h3).gradient-text,
html body main .gradient-text:not(.btn-primary):not(.btn-secondary):not(.btn-whatsapp) {
  background: none !important;
  background-image: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  color: var(--ui-blue) !important;
  -webkit-text-fill-color: var(--ui-blue) !important;
  text-shadow: none !important;
}

html body main :is(p, li, dt, dd, label, small, td) {
  color: var(--ui-text) !important;
  -webkit-text-fill-color: var(--ui-text) !important;
}

html body main :is(strong, b, th) {
  color: var(--ui-title) !important;
  -webkit-text-fill-color: var(--ui-title) !important;
}

html body main :is(
  .subtitle,
  .lead,
  .hero-description,
  .section-subtitle,
  .article-meta,
  .breadcrumb,
  .breadcrumb-offres
) {
  color: var(--ui-muted) !important;
  -webkit-text-fill-color: var(--ui-muted) !important;
}

/* Common readable line lengths in hero copy. */
html body main :is(
  .city-hero,
  .contact-hero,
  .reseller-hero,
  .chaines-hero,
  .legal-hero,
  .faq-hero,
  .blog-hero,
  .apropos-hero
) p {
  max-width: 760px;
  line-height: 1.72 !important;
}

/* -------------------------------------------------------------------------- */
/* Hero visual language                                                        */
/* -------------------------------------------------------------------------- */

html body main :is(
  .hero,
  .article-hero,
  .offres-hero,
  .city-hero,
  .contact-hero,
  .reseller-hero,
  .chaines-hero,
  .legal-hero,
  .faq-hero,
  .blog-hero,
  .apropos-hero,
  .error-section
) {
  background:
    radial-gradient(circle at 16% 10%, rgba(29, 78, 216, .065), transparent 32%),
    radial-gradient(circle at 86% 15%, rgba(109, 40, 217, .05), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  color: var(--ui-text) !important;
  border-bottom: 1px solid var(--ui-border) !important;
}

/* Hero badges use one restrained blue treatment. */
html body main :is(.hero-badge, .section-tag, .city-hero-badge) {
  color: var(--ui-blue) !important;
  -webkit-text-fill-color: var(--ui-blue) !important;
}

html body main .hero-badge {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
  box-shadow: none !important;
}

/* -------------------------------------------------------------------------- */
/* Cards / panels / tables                                                     */
/* -------------------------------------------------------------------------- */

html body main :is(
  .pack-card,
  .pack-detail-visual,
  .garantie-card,
  .pourquoi-card,
  .appareil-card,
  .faq-offres-item,
  .article-cta,
  .step-box,
  .info-box,
  .warning-box,
  .comparison-card,
  .operator-card,
  .guide-card,
  .box-card,
  .contact-card,
  .contact-form-card,
  .horaires,
  .feature-card,
  .step-card,
  .category-card,
  .vod-card,
  .compat-card,
  .reseller-form-wrap,
  .cta-container,
  .final-cta,
  .faq-item,
  .faq-unified-item,
  .user-review,
  .editorial-card,
  .pricing-card,
  .device-card,
  .duration-card,
  .usage-card,
  .check-card,
  .choice-card,
  .blog-card,
  .region-card,
  .avantage-card,
  .review-card,
  .local-geo-card,
  .pros-box,
  .cons-box,
  .author-box,
  .editorial-author-box,
  .city-stat
) {
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
  border-color: var(--ui-border) !important;
  box-shadow: var(--ui-shadow) !important;
}

html body main :is(
  .pack-card,
  .pourquoi-card,
  .feature-card,
  .category-card,
  .compat-card,
  .pricing-card,
  .device-card,
  .duration-card,
  .usage-card,
  .check-card,
  .choice-card,
  .blog-card,
  .region-card,
  .avantage-card,
  .review-card,
  .local-geo-card,
  .editorial-card
) {
  border-radius: 16px !important;
}

html body main :is(.faq-offres-question, .faq-question, .faq-answer, .faq-unified-question, .faq-unified-answer) {
  background: var(--ui-surface) !important;
  color: var(--ui-title) !important;
}

html body main :is(.faq-offres-answer, .faq-answer, .faq-unified-answer) p {
  color: var(--ui-text) !important;
}

html body main :is(table, .comparatif-table, .comparison-table, .debit-table, .sanction-table) {
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
  border-color: var(--ui-border) !important;
}

html body main :is(table, .comparatif-table, .comparison-table, .debit-table, .sanction-table) thead th {
  background: #f1f5f9 !important;
  color: var(--ui-title) !important;
  border-color: var(--ui-border) !important;
}

html body main :is(table, .comparatif-table, .comparison-table, .debit-table, .sanction-table) tbody td {
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
  border-color: #edf2f7 !important;
}

/* -------------------------------------------------------------------------- */
/* Links and buttons                                                           */
/* -------------------------------------------------------------------------- */

html body main a:not(
  .btn-primary
):not(
  .btn-secondary
):not(
  .btn-outline
):not(
  .btn-secondary-outline
):not(
  .btn-whatsapp
):not(
  .pack-cta
):not(
  .form-submit
):not(
  .btn-cta-primary
):not(
  .btn-cta-whatsapp
) {
  color: var(--ui-blue) !important;
  -webkit-text-fill-color: var(--ui-blue) !important;
  text-decoration-color: rgba(29, 78, 216, .42) !important;
  text-underline-offset: 3px;
}

html body main :is(
  .btn-primary,
  .btn-whatsapp,
  .pack-cta,
  .form-submit,
  .btn-cta-primary,
  .btn-cta-whatsapp
),
html body main :is(
  .btn-primary,
  .btn-whatsapp,
  .pack-cta,
  .form-submit,
  .btn-cta-primary,
  .btn-cta-whatsapp
):visited {
  border-radius: 12px !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body main :is(.btn-outline, .btn-secondary-outline, .btn-secondary) {
  border-radius: 12px !important;
}


/* Anchor jumps remain visible below the sticky header. */
html body main [id] {
  scroll-margin-top: 96px;
}

/* -------------------------------------------------------------------------- */
/* Mobile                                                                      */
/* -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  html body .header .nav {
    min-height: 72px !important;
    padding: .7rem 1.25rem !important;
  }

  html body .header .logo {
    font-size: 1.15rem !important;
  }

  html body .nav-menu {
    top: 72px !important;
    height: calc(100vh - 72px) !important;
  }

  html body main > :is(
    .city-hero,
    .contact-hero,
    .reseller-hero,
    .chaines-hero,
    .legal-hero,
    .faq-hero,
    .blog-hero,
    .apropos-hero,
    .article-hero,
    .error-section
  ) {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  html body main > .hero {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  html body main > .breadcrumb-offres {
    padding: 1.5rem 1.25rem 0 !important;
  }

  html body.editorial-article main .editorial-page {
    padding-top: 2rem !important;
  }

  html body main h1,
  html body main .hero-title,
  html body main .article-hero h1,
  html body main .offres-hero h1,
  html body main .city-hero h1,
  html body main .contact-hero h1,
  html body main .reseller-hero h1,
  html body main .chaines-hero h1,
  html body main .legal-hero h1,
  html body main .faq-hero h1,
  html body main .blog-hero h1,
  html body main .apropos-hero h1 {
    max-width: 100% !important;
    font-size: clamp(1.9rem, 8.5vw, 2.3rem) !important;
    line-height: 1.14 !important;
    letter-spacing: -.025em !important;
  }

  html body main h2,
  html body main .section-title,
  html body main .editorial-card-title {
    font-size: clamp(1.45rem, 6.2vw, 1.75rem) !important;
  }

  html body main h3 {
    font-size: 1.15rem !important;
  }
}

@media (max-width: 480px) {
  html body main > :is(
    .city-hero,
    .contact-hero,
    .reseller-hero,
    .chaines-hero,
    .legal-hero,
    .faq-hero,
    .blog-hero,
    .apropos-hero,
    .article-hero,
    .error-section
  ) {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  html body main h1,
  html body main .hero-title,
  html body main .article-hero h1 {
    font-size: clamp(1.75rem, 9vw, 2.05rem) !important;
  }
}


/* ========================================================================== */
/* FINAL UI SYSTEM v3 — typography + buttons                                 */
/* ========================================================================== */

/*
 * The historical Syne display face is no longer used for visible site copy.
 * All text and display metrics use one readable family: Space Grotesk.
 */
html body,
html body main,
html body.editorial-article {
  --font-display: 'Space Grotesk', 'Space Grotesk Fallback', Arial, sans-serif !important;
  --font-body: 'Space Grotesk', 'Space Grotesk Fallback', Arial, sans-serif !important;
  --article-font-family: 'Space Grotesk', 'Space Grotesk Fallback', Arial, sans-serif !important;
}

html body :is(
  h1, h2, h3, h4, h5, h6,
  .hero-title,
  .section-title,
  .editorial-card-title,
  .pack-title,
  .stat-number,
  .city-stat strong,
  .chiffre-number,
  .order-summary-title,
  .order-price-value,
  .pricing-price,
  .price,
  .faq-question-text,
  .article-trial-cta-title
) {
  font-family: 'Space Grotesk', 'Space Grotesk Fallback', Arial, sans-serif !important;
  font-style: normal !important;
  text-transform: none;
}

/* Stats like “Sélection / Catalogue / Variable”: normal professional type. */
html body main .city-stat strong,
html body main .stat-number,
html body main .chiffre-number {
  font-size: clamp(1.35rem, 2.2vw, 1.8rem) !important;
  font-weight: 700 !important;
  line-height: 1.18 !important;
  letter-spacing: -.02em !important;
  background: none !important;
  background-image: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  color: var(--ui-blue) !important;
  -webkit-text-fill-color: var(--ui-blue) !important;
  text-shadow: none !important;
}

/* -------------------------------------------------------------------------- */
/* One button language across the whole site                                  */
/* Blue = every standard action. Green = WhatsApp only.                       */
/* -------------------------------------------------------------------------- */

html body :is(
  a[class*="btn"],
  button[class*="btn"],
  input[type="submit"],
  .pack-cta,
  .form-submit,
  a.card-link,
  button.card-link,
  a.vip-showcase-cta,
  button.vip-showcase-cta,
  a.article-trial-cta-button,
  button.article-trial-cta-button
) {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .5rem !important;
  padding: .75rem 1.25rem !important;
  border: 1px solid #1d4ed8 !important;
  border-radius: 12px !important;
  background: #1d4ed8 !important;
  background-image: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-family: 'Space Grotesk', 'Space Grotesk Fallback', Arial, sans-serif !important;
  font-size: .96rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease !important;
}

html body :is(
  a[class*="btn"],
  button[class*="btn"],
  input[type="submit"],
  .pack-cta,
  .form-submit,
  a.card-link,
  button.card-link,
  a.vip-showcase-cta,
  button.vip-showcase-cta,
  a.article-trial-cta-button,
  button.article-trial-cta-button
):hover {
  background: #1e40af !important;
  border-color: #1e40af !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: none !important;
}

/* Inputs that visually act as buttons keep existing sizing rules. */
html body .form-submit,
html body input[type="submit"] {
  width: 100%;
}

/* WhatsApp actions are the only green buttons. */
html body :is(
  a.btn-whatsapp,
  button.btn-whatsapp,
  a.btn-cta-whatsapp,
  button.btn-cta-whatsapp,
  a.btn-faq-whatsapp,
  button.btn-faq-whatsapp,
  a.sticky-btn-whatsapp,
  button.sticky-btn-whatsapp,
  a.form-whatsapp,
  button.form-whatsapp,
  a.card-link-whatsapp,
  button.card-link-whatsapp,
  a[href*="wa.me"][class*="btn"],
  button[class*="whatsapp"],
  a[class*="whatsapp"]
) {
  border-color: #16a34a !important;
  background: #16a34a !important;
  background-image: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body :is(
  a.btn-whatsapp,
  button.btn-whatsapp,
  a.btn-cta-whatsapp,
  button.btn-cta-whatsapp,
  a.btn-faq-whatsapp,
  button.btn-faq-whatsapp,
  a.sticky-btn-whatsapp,
  button.sticky-btn-whatsapp,
  a.form-whatsapp,
  button.form-whatsapp,
  a.card-link-whatsapp,
  button.card-link-whatsapp,
  a[href*="wa.me"][class*="btn"],
  button[class*="whatsapp"],
  a[class*="whatsapp"]
):hover {
  border-color: #15803d !important;
  background: #15803d !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Floating WhatsApp stays circular, but uses the same single green. */
html body :is(.whatsapp-float, .floating-whatsapp) {
  width: 56px !important;
  height: 56px !important;
  min-height: 56px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1px solid #16a34a !important;
  background: #16a34a !important;
  box-shadow: 0 8px 24px rgba(22, 163, 74, .22) !important;
}

/* Choice controls use the same blue language without introducing new colors. */
html body .screen-btn {
  border-color: #1d4ed8 !important;
  background: #1d4ed8 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html body .screen-btn.active,
html body .screen-btn:hover {
  border-color: #1e40af !important;
  background: #1e40af !important;
}

@media (max-width: 768px) {
  html body :is(
    a[class*="btn"],
    button[class*="btn"],
    input[type="submit"],
    .pack-cta,
    .form-submit,
    a.card-link,
    button.card-link,
    a.vip-showcase-cta,
    button.vip-showcase-cta,
    a.article-trial-cta-button,
    button.article-trial-cta-button
  ) {
    min-height: 44px !important;
    padding: .72rem 1.05rem !important;
    font-size: .94rem !important;
  }
}

/* ========================================================================== */
/* v4 — Footer + contact CTA polish — 2026-08-16                              */
/* ========================================================================== */

/* Professional footer: true horizontal desktop grid, predictable responsive */
/* collapse, and no legacy inline/vertical overrides.                         */
html body footer.footer {
  background: #111827 !important;
  color: #cbd5e1 !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
  padding: 3.5rem 0 1.5rem !important;
}

html body footer.footer > .container {
  width: min(100% - 3rem, 1240px) !important;
  max-width: 1240px !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}

html body footer.footer .footer-grid {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(250px, 1.55fr) minmax(130px, .8fr) minmax(185px, 1fr) minmax(220px, 1.2fr) minmax(150px, .8fr) !important;
  gap: 2rem 2.25rem !important;
  align-items: start !important;
  justify-items: stretch !important;
  margin: 0 0 2.5rem !important;
}

html body footer.footer .footer-grid > .footer-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  text-align: left !important;
}

html body footer.footer .footer-grid > .footer-col:first-child {
  padding-right: 1.25rem !important;
  border-right: 1px solid rgba(255,255,255,.10) !important;
}

html body footer.footer .footer-logo {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: .45rem !important;
  margin: 0 0 .8rem !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-family: 'Space Grotesk', 'Space Grotesk Fallback', Arial, sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

html body footer.footer .footer-logo strong {
  color: #60a5fa !important;
  -webkit-text-fill-color: #60a5fa !important;
  background: none !important;
  background-image: none !important;
}

html body footer.footer .footer-col h3,
html body footer.footer .footer-col h4 {
  margin: 0 0 .85rem !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-family: 'Space Grotesk', 'Space Grotesk Fallback', Arial, sans-serif !important;
  font-size: .92rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
}

html body footer.footer .footer-col p {
  margin: 0 !important;
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
  font-size: .9rem !important;
  line-height: 1.65 !important;
}

html body footer.footer .footer-col a,
html body footer.footer .footer-col a:visited {
  display: block !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0 0 .62rem !important;
  padding: 0 !important;
  color: #cbd5e1 !important;
  -webkit-text-fill-color: #cbd5e1 !important;
  font-size: .9rem !important;
  line-height: 1.45 !important;
  text-decoration: none !important;
  overflow-wrap: anywhere !important;
}

html body footer.footer .footer-col a:hover {
  color: #60a5fa !important;
  -webkit-text-fill-color: #60a5fa !important;
}

html body footer.footer .footer-bottom {
  width: 100% !important;
  margin: 0 !important;
  padding: 1.4rem 0 0 !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
  text-align: center !important;
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
  font-size: .84rem !important;
}

html body footer.footer .footer-bottom p {
  margin: 0 !important;
}

@media (max-width: 1100px) {
  html body footer.footer .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 2rem 3rem !important;
  }
  html body footer.footer .footer-grid > .footer-col:first-child {
    grid-column: 1 / -1 !important;
    padding: 0 0 1.5rem !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
  }
}

@media (max-width: 620px) {
  html body footer.footer {
    padding-top: 2.75rem !important;
  }
  html body footer.footer > .container {
    width: min(100% - 2rem, 1240px) !important;
  }
  html body footer.footer .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 1.65rem !important;
  }
  html body footer.footer .footer-grid > .footer-col:first-child {
    grid-column: auto !important;
  }
}

/* Contact page: use exactly the same two CTA colors as the rest of the site. */
/* Blue for normal actions, green for WhatsApp; text always white.             */
html body.page-contact-light main .contact-card a.card-link,
html body.page-contact-light main .contact-card a.card-link:visited {
  min-width: 168px !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
  font-size: .96rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-indent: 0 !important;
  white-space: normal !important;
}

html body.page-contact-light main .contact-card a.card-link-email,
html body.page-contact-light main .contact-card a.card-link-email:visited,
html body.page-contact-light main .contact-card a.card-link-phone,
html body.page-contact-light main .contact-card a.card-link-phone:visited {
  border-color: #1d4ed8 !important;
  background: #1d4ed8 !important;
  background-image: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body.page-contact-light main .contact-card a.card-link-email:hover,
html body.page-contact-light main .contact-card a.card-link-phone:hover {
  border-color: #1e40af !important;
  background: #1e40af !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body.page-contact-light main .contact-card a.card-link-whatsapp,
html body.page-contact-light main .contact-card a.card-link-whatsapp:visited {
  border-color: #16a34a !important;
  background: #16a34a !important;
  background-image: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body.page-contact-light main .contact-card a.card-link-whatsapp:hover {
  border-color: #15803d !important;
  background: #15803d !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}


/* ========================================================================== */
/* v5 — Footer compact + contact CTA contrast — 2026-08-16                   */
/* ========================================================================== */

/* Compact, professional 5-column desktop footer. */
@media (min-width: 901px) {
  html body footer.footer {
    padding: 2.4rem 0 1.15rem !important;
  }

  html body footer.footer > .container {
    width: min(100% - 2.5rem, 1260px) !important;
    max-width: 1260px !important;
  }

  html body footer.footer .footer-grid {
    display: grid !important;
    grid-template-columns: 190px 110px 185px 250px 145px !important;
    justify-content: space-between !important;
    gap: 1.25rem !important;
    margin-bottom: 1.8rem !important;
  }

  html body footer.footer .footer-grid > .footer-col:first-child {
    padding-right: 0 !important;
    border-right: 0 !important;
  }

  html body footer.footer .footer-logo {
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    gap: .3rem !important;
    margin-bottom: .7rem !important;
    font-size: .92rem !important;
    line-height: 1.15 !important;
  }

  html body footer.footer .footer-col h3,
  html body footer.footer .footer-col h4 {
    margin: 0 0 .62rem !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    opacity: 1 !important;
    filter: none !important;
    text-shadow: none !important;
    font-size: .78rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
  }

  html body footer.footer .footer-col p {
    color: #cbd5e1 !important;
    -webkit-text-fill-color: #cbd5e1 !important;
    font-size: .78rem !important;
    line-height: 1.55 !important;
  }

  html body footer.footer .footer-col a,
  html body footer.footer .footer-col a:visited {
    width: auto !important;
    max-width: none !important;
    margin-bottom: .42rem !important;
    color: #e2e8f0 !important;
    -webkit-text-fill-color: #e2e8f0 !important;
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    opacity: 1 !important;
    filter: none !important;
    text-shadow: none !important;
    text-decoration: none !important;
    font-size: .78rem !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  html body footer.footer .footer-col a:hover {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  html body footer.footer .footer-bottom,
  html body footer.footer .footer-bottom p {
    color: #cbd5e1 !important;
    -webkit-text-fill-color: #cbd5e1 !important;
    font-size: .76rem !important;
  }
}

@media (max-width: 900px) and (min-width: 621px) {
  html body footer.footer .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1.6rem 2rem !important;
  }
  html body footer.footer .footer-grid > .footer-col:first-child {
    grid-column: 1 / -1 !important;
    border: 0 !important;
    padding: 0 !important;
  }
  html body footer.footer .footer-col h3,
  html body footer.footer .footer-col h4 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: .84rem !important;
  }
  html body footer.footer .footer-col a,
  html body footer.footer .footer-col p {
    font-size: .82rem !important;
  }
}

@media (max-width: 620px) {
  html body footer.footer .footer-col h3,
  html body footer.footer .footer-col h4 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: .86rem !important;
  }
  html body footer.footer .footer-col a,
  html body footer.footer .footer-col p {
    font-size: .84rem !important;
  }
  html body footer.footer .footer-col a {
    white-space: normal !important;
  }
}

/* Contact cards: hard guarantee of readable CTA labels. */
html body.page-contact-light main .contact-cards .contact-card a.card-link,
html body.page-contact-light main .contact-cards .contact-card a.card-link:visited,
html body.page-contact-light main .contact-cards .contact-card a.card-link > span,
html body.page-contact-light main .contact-cards .contact-card a.card-link:visited > span {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-decoration: none !important;
  text-shadow: none !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  font-size: .92rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

html body.page-contact-light main .contact-cards .contact-card a.card-link-whatsapp,
html body.page-contact-light main .contact-cards .contact-card a.card-link-whatsapp:visited {
  background: #16a34a !important;
  background-image: none !important;
  border-color: #16a34a !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body.page-contact-light main .contact-cards .contact-card a.card-link-email,
html body.page-contact-light main .contact-cards .contact-card a.card-link-email:visited,
html body.page-contact-light main .contact-cards .contact-card a.card-link-phone,
html body.page-contact-light main .contact-cards .contact-card a.card-link-phone:visited {
  background: #1d4ed8 !important;
  background-image: none !important;
  border-color: #1d4ed8 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}


/* ========================================================================== */
/* v6 — deterministic footer + cache-safe rollout — 2026-08-16               */
/* ========================================================================== */

/* The same v6 stylesheet URL is loaded on every page to eliminate stale CSS
   differences between browsers after the footer/contact hotfixes. */
html body footer.footer {
  background: #101112 !important;
  color: #d7dee8 !important;
}
html body footer.footer > .container {
  width: min(calc(100% - 48px), 1240px) !important;
  max-width: 1240px !important;
  margin-inline: auto !important;
}
html body footer.footer .footer-grid {
  align-items: start !important;
}
html body footer.footer .footer-col,
html body footer.footer .footer-col * {
  box-sizing: border-box !important;
}
html body footer.footer .footer-col h3,
html body footer.footer .footer-col h4 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
  font-family: 'Space Grotesk', 'Space Grotesk Fallback', Arial, sans-serif !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
html body footer.footer .footer-col a,
html body footer.footer .footer-col a:visited,
html body footer.footer .footer-col p {
  color: #d7dee8 !important;
  -webkit-text-fill-color: #d7dee8 !important;
  font-family: 'Space Grotesk', 'Space Grotesk Fallback', Arial, sans-serif !important;
  text-decoration: none !important;
}
html body footer.footer .footer-logo,
html body footer.footer .footer-logo * {
  white-space: nowrap !important;
}

@media (min-width: 1180px) {
  html body footer.footer {
    padding: 2.4rem 0 1.15rem !important;
  }
  html body footer.footer .footer-grid {
    display: grid !important;
    grid-template-columns: minmax(220px, 1.25fr) minmax(100px, .58fr) minmax(180px, 1.05fr) minmax(300px, 1.58fr) minmax(150px, .82fr) !important;
    gap: 1.4rem !important;
    margin-bottom: 1.7rem !important;
  }
  html body footer.footer .footer-col h3,
  html body footer.footer .footer-col h4 {
    margin: 0 0 .65rem !important;
    font-size: .78rem !important;
    line-height: 1.2 !important;
  }
  html body footer.footer .footer-col a,
  html body footer.footer .footer-col p {
    font-size: .76rem !important;
    line-height: 1.45 !important;
  }
  html body footer.footer .footer-col a {
    display: block !important;
    margin: 0 0 .38rem !important;
  }
  html body footer.footer .footer-col:nth-child(4) a,
  html body footer.footer .footer-col:nth-child(4) a:visited {
    white-space: nowrap !important;
  }
  html body footer.footer .footer-col:first-child p {
    max-width: 235px !important;
    margin: 0 !important;
  }
  html body footer.footer .footer-bottom,
  html body footer.footer .footer-bottom p {
    font-size: .76rem !important;
  }
}

/* Medium desktop/tablet: still horizontal and clean, but fewer columns to avoid
   cramped telephone/email wrapping. This is intentional responsive behavior. */
@media (min-width: 760px) and (max-width: 1179px) {
  html body footer.footer {
    padding: 2.2rem 0 1.1rem !important;
  }
  html body footer.footer .footer-grid {
    display: grid !important;
    grid-template-columns: 1.2fr .75fr 1.05fr !important;
    gap: 1.6rem 2.2rem !important;
    margin-bottom: 1.5rem !important;
  }
  html body footer.footer .footer-grid > .footer-col:first-child {
    grid-column: 1 / -1 !important;
    padding: 0 0 1rem !important;
    border: 0 !important;
  }
  html body footer.footer .footer-col h3,
  html body footer.footer .footer-col h4 {
    font-size: .8rem !important;
    margin: 0 0 .6rem !important;
  }
  html body footer.footer .footer-col a,
  html body footer.footer .footer-col p {
    font-size: .78rem !important;
    line-height: 1.45 !important;
  }
  html body footer.footer .footer-col:nth-child(4) a {
    white-space: nowrap !important;
  }
}

@media (max-width: 759px) {
  html body footer.footer > .container {
    width: min(calc(100% - 32px), 1240px) !important;
  }
  html body footer.footer .footer-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.35rem !important;
  }
  html body footer.footer .footer-grid > .footer-col:first-child {
    grid-column: auto !important;
    padding: 0 !important;
    border: 0 !important;
  }
  html body footer.footer .footer-col h3,
  html body footer.footer .footer-col h4 {
    font-size: .84rem !important;
  }
  html body footer.footer .footer-col a,
  html body footer.footer .footer-col p {
    font-size: .82rem !important;
    line-height: 1.45 !important;
    white-space: normal !important;
  }
}


/* ========================================================================== */
/* v7 — precise hero-title alignment + standard footer typography — 2026-08-16 */
/* ========================================================================== */

/* Only these four commercial/support page titles are centered and constrained. */
html body.page-offers-light main .offres-hero h1,
html body.page-channels-light main .chaines-hero h1,
html body.page-reseller-light main .reseller-hero h1,
html body.page-contact-light main .contact-hero h1 {
  width: min(100%, 920px) !important;
  max-width: 920px !important;
  margin: 0 auto 1rem !important;
  text-align: center !important;
  font-family: 'Space Grotesk', 'Space Grotesk Fallback', Arial, sans-serif !important;
  font-size: clamp(2rem, 3.4vw, 2.9rem) !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.025em !important;
}

/* Keep the introductory copy of the same four heroes centered below the title. */
html body.page-offers-light main .offres-hero > .container,
html body.page-channels-light main .chaines-hero > .container,
html body.page-reseller-light main .reseller-hero > .container,
html body.page-contact-light main .contact-hero > .container {
  text-align: center !important;
}

/* Footer typography: normal professional website scale, not micro-text. */
html body footer.footer .footer-col h3,
html body footer.footer .footer-col h4 {
  font-size: 1rem !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  margin-bottom: .75rem !important;
}
html body footer.footer .footer-col a,
html body footer.footer .footer-col a:visited,
html body footer.footer .footer-col p {
  font-size: .95rem !important;
  line-height: 1.55 !important;
  color: #dbe3ee !important;
  -webkit-text-fill-color: #dbe3ee !important;
}
html body footer.footer .footer-col a {
  margin-bottom: .42rem !important;
}
html body footer.footer .footer-bottom,
html body footer.footer .footer-bottom p {
  font-size: .9rem !important;
  line-height: 1.45 !important;
}

@media (min-width: 1180px) {
  html body footer.footer .footer-grid {
    grid-template-columns: minmax(250px, 1.2fr) minmax(125px, .6fr) minmax(195px, .95fr) minmax(325px, 1.5fr) minmax(165px, .8fr) !important;
    gap: 1.6rem !important;
  }
  html body footer.footer .footer-col:nth-child(4) a,
  html body footer.footer .footer-col:nth-child(4) p {
    white-space: nowrap !important;
  }
}

@media (min-width: 760px) and (max-width: 1179px) {
  html body footer.footer .footer-col h3,
  html body footer.footer .footer-col h4 {
    font-size: 1rem !important;
  }
  html body footer.footer .footer-col a,
  html body footer.footer .footer-col p {
    font-size: .94rem !important;
  }
}

@media (max-width: 759px) {
  html body.page-offers-light main .offres-hero h1,
  html body.page-channels-light main .chaines-hero h1,
  html body.page-reseller-light main .reseller-hero h1,
  html body.page-contact-light main .contact-hero h1 {
    max-width: 100% !important;
    font-size: clamp(1.9rem, 8.5vw, 2.3rem) !important;
    line-height: 1.14 !important;
  }
  html body footer.footer .footer-col h3,
  html body footer.footer .footer-col h4 {
    font-size: 1rem !important;
  }
  html body footer.footer .footer-col a,
  html body footer.footer .footer-col p {
    font-size: .94rem !important;
  }
}