/* =========================================================
   Fabio Header Integrated Into Hero
   ========================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid rgba(204, 217, 229, 0.55);
}

.inside-header {
  padding-top: 18px;
  padding-bottom: 18px;
  max-width: 1280px;
  margin: 0 auto;
}

.main-navigation,
.inside-navigation {
  background: transparent !important;
}

.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-item > a {
  color: var(--fabio-text) !important;
  font-weight: 600;
}

.main-navigation .main-nav ul li a {
  border-radius: 12px;
  padding: 10px 14px;
  transition: background var(--fabio-transition-fast), color var(--fabio-transition-fast);
}

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current_page_item > a {
  background: rgba(255, 255, 255, 0.58);
  color: var(--fabio-blue) !important;
}

.site-logo img,
.custom-logo {
  border-radius: 12px;
}

.site-branding .main-title,
.site-branding .main-title a,
.site-logo + .site-branding .main-title a {
  color: var(--fabio-text) !important;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.site-content {
  padding-top: 0;
}

/* Supprime l'espace supérieur des conteneurs principaux GeneratePress
   uniquement sur les templates Fabio */
.fabio-homepage-template,
.fabio-features-template,
.fabio-installation-template,
.fabio-pricing-template {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.fabio-homepage-template #primary,
.fabio-homepage-template .site-main,
.fabio-homepage-template .inside-article,
.fabio-homepage-template .entry-content,
.fabio-features-template #primary,
.fabio-features-template .site-main,
.fabio-features-template .inside-article,
.fabio-features-template .entry-content,
.fabio-installation-template #primary,
.fabio-installation-template .site-main,
.fabio-installation-template .inside-article,
.fabio-installation-template .entry-content,
.fabio-pricing-template #primary,
.fabio-pricing-template .site-main,
.fabio-pricing-template .inside-article,
.fabio-pricing-template .entry-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* =========================================================
   Fabio Global Site Background
   ========================================================= */

html,
body {
  min-height: 100%;
  background:
    radial-gradient(circle at top left, rgba(29, 78, 216, 0.12), transparent 26%),
    radial-gradient(circle at top right, rgba(14, 165, 166, 0.10), transparent 24%),
    linear-gradient(180deg, #edf4fb 0%, #f4f8fc 38%, #e7eef5 100%);
}

body {
  color: var(--fabio-text);
}

/* Wrappers principaux */
body,
#page,
.site,
.site-content,
.content-area,
.site-main {
  background: transparent !important;
}

/* Header / navigation / footer */
.site-header,
.main-navigation,
.site-footer,
.inside-header,
.inside-navigation,
.inside-site-info,
.footer-widgets,
.site-info {
  background: transparent !important;
}

/* Conteneurs GeneratePress souvent blancs par défaut */
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.one-container .container,
.separate-containers .paging-navigation,
.separate-containers .inside-page-header {
  background: transparent !important;
  box-shadow: none !important;
}

/* On évite les bandes blanches latérales */
body.separate-containers {
  background: linear-gradient(180deg, #edf3f8 0%, #e7eef5 100%) !important;
}

body.one-container .site,
body.separate-containers .site {
  background: transparent !important;
}

/* =========================================================
   Fabio Base
   Design tokens + layout foundations + global utilities
   ========================================================= */

:root {
  /* Colors */
  --fabio-blue: #1d4ed8;
  --fabio-blue-hover: #1e40af;
  --fabio-cyan: #0ea5a6;

  --fabio-text: #0b1220;
  --fabio-text-soft: #445468;
  --fabio-text-muted: #66758b;

  --fabio-surface: #ffffff;
  --fabio-surface-soft: #eef4f8;
  --fabio-surface-alt: #e4edf5;

  --fabio-border: #ccd9e5;
  --fabio-border-soft: #dbe5ee;

  --fabio-dark: #08111f;
  --fabio-dark-2: #0f172a;
  --fabio-dark-3: #172033;

  --fabio-success-bg: #e9f9ef;
  --fabio-success-border: #b7efcb;
  --fabio-success-text: #166534;

  --fabio-info-bg: #eaf4ff;
  --fabio-info-border: #bfd8ff;
  --fabio-info-text: #1d3f91;

  /* Radius */
  --fabio-radius-xs: 12px;
  --fabio-radius-sm: 16px;
  --fabio-radius-md: 20px;
  --fabio-radius-lg: 28px;
  --fabio-radius-xl: 34px;
  --fabio-radius-pill: 999px;

  /* Shadows */
  --fabio-shadow-sm: 0 10px 30px rgba(8, 17, 31, 0.08);
  --fabio-shadow-md: 0 18px 44px rgba(8, 17, 31, 0.14);
  --fabio-shadow-lg: 0 28px 80px rgba(8, 17, 31, 0.19);
  --fabio-shadow-blue: 0 16px 40px rgba(29, 78, 216, 0.26);

 /* Widths */
--fabio-container: min(90%, 1500px);
--fabio-container-narrow: min(90%, 1000px);
--fabio-container-padding: 24px;

  /* Vertical rhythm */
  --fabio-section-space: 72px;

  /* Transitions */
  --fabio-transition-fast: 0.2s ease;
}

/* =========================================================
   GeneratePress / WordPress safety
   ========================================================= */

.fabio-homepage-template,
.fabio-features-template,
.fabio-installation-template,
.fabio-pricing-template {
  margin: 0;
  color: var(--fabio-text);
}

.inside-article:has(.fabio-homepage-template),
.inside-article:has(.fabio-features-template),
.inside-article:has(.fabio-installation-template),
.inside-article:has(.fabio-pricing-template) {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.entry-content:has(.fabio-homepage-template),
.entry-content:has(.fabio-features-template),
.entry-content:has(.fabio-installation-template),
.entry-content:has(.fabio-pricing-template) {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* =========================================================
   Layout foundations
   ========================================================= */

.fabio-container {
  width: min(var(--fabio-container), calc(100% - (var(--fabio-container-padding) * 2)));
  margin-inline: auto;
}

.fabio-container-narrow {
  width: min(var(--fabio-container-narrow), 100%);
  margin-inline: auto;
}

.fabio-section,
.fabio-section-soft,
.fabio-section-dark {
  position: relative;
  padding: var(--fabio-section-space) 0;
}

.fabio-section {
  background: transparent;
}

.fabio-section-soft {
  background: linear-gradient(180deg, rgba(226, 236, 245, 0.72) 0%, rgba(235, 243, 249, 0.86) 100%);
}

.fabio-section-dark {
  background: linear-gradient(180deg, #08111f 0%, #172033 100%);
  color: #ffffff;
}

.fabio-section-head {
  text-align: center;
}

.fabio-section-head .fabio-title-lg,
.fabio-section-head .fabio-lead {
  margin-top: 20px;
}

/* =========================================================
   Shared typography / content rhythm
   ========================================================= */

.fabio-card-copy {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--fabio-text-soft);
}

.fabio-list {
  margin: 24px 0 0;
  padding-left: 18px;
  color: var(--fabio-text-soft);
  line-height: 1.9;
}

.fabio-list li + li {
  margin-top: 6px;
}

.fabio-compare-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #7f93ad;
}

.fabio-compare-title {
  margin-top: 14px;
}

.fabio-dark-title {
  margin-top: 20px;
  color: #ffffff;
}

.fabio-dark-lead {
  margin-top: 20px;
  color: #d8e6f8;
  max-width: 720px;
}

/* =========================================================
   Shared structural blocks reused across templates
   ========================================================= */

.fabio-how-wrap {
  align-items: start;
}

.fabio-how-title {
  margin-top: 20px;
  max-width: 14ch;
}

.fabio-how-lead {
  margin-top: 20px;
  max-width: 720px;
}

.fabio-how-steps {
  margin-top: 40px;
}

.fabio-how-right {
  padding: 24px;
  border-radius: var(--fabio-radius-xl);
}

.fabio-rounded-card {
  border-radius: 30px;
}

.fabio-scanned-grid {
  margin-top: 24px;
  gap: 12px;
}

.fabio-scanned-item {
  padding: 16px;
  border-radius: var(--fabio-radius-sm);
  border: 1px solid var(--fabio-border);
  background: var(--fabio-surface-soft);
  font-size: 14px;
  font-weight: 500;
  color: var(--fabio-text-soft);
}

.fabio-scanned-note {
  margin-top: 24px;
  padding: 16px;
  border-radius: var(--fabio-radius-sm);
  background: var(--fabio-info-bg);
  color: #334155;
  font-size: 14px;
  line-height: 1.9;
}

.fabio-final-cta-grid {
  align-items: center;
  grid-template-columns: 1fr auto;
}

.fabio-final-cta-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 260px;
}

.fabio-final-cta-note {
  text-align: center;
  font-size: 14px;
  color: #d8e6f8;
}

/* =========================================================
   Shared hero rhythm
   ========================================================= */

.fabio-homepage-template .fabio-hero-copy,
.fabio-features-template .fabio-hero-copy,
.fabio-installation-template .fabio-hero-copy,
.fabio-pricing-template .fabio-hero-copy {
  max-width: 760px;
}

.fabio-homepage-template .fabio-hero-actions,
.fabio-features-template .fabio-hero-actions,
.fabio-installation-template .fabio-hero-actions,
.fabio-pricing-template .fabio-hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 32px;
}

.fabio-homepage-template .fabio-hero-proof,
.fabio-features-template .fabio-hero-proof,
.fabio-installation-template .fabio-hero-proof,
.fabio-pricing-template .fabio-hero-proof {
  margin-top: 20px;
}

/* =========================================================
   Shared CTA button variant
   ========================================================= */

.fabio-btn-white {
  background: #ffffff;
  color: var(--fabio-blue);
  border-color: #ffffff;
}

.fabio-btn-white:hover {
  background: #f3f8fc;
  color: var(--fabio-blue-hover);
}

/* =========================================================
   Global links / media polish
   ========================================================= */

.fabio-homepage-template a:not(.fabio-btn),
.fabio-features-template a:not(.fabio-btn),
.fabio-installation-template a:not(.fabio-btn),
.fabio-pricing-template a:not(.fabio-btn) {
  font-weight: 600;
}

.fabio-homepage-template img,
.fabio-features-template img,
.fabio-installation-template img,
.fabio-pricing-template img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 20px;
}

/* =========================================================
   Global responsive foundations
   ========================================================= */


@media (max-width: 1024px) {
  :root {
    --fabio-section-space: 80px;
    --fabio-container-padding: 20px;
  }

  .fabio-grid-2,
  .fabio-grid-3,
  .fabio-grid-4,
  .fabio-hero-grid,
  .fabio-compare,
  .fabio-final-cta-grid {
    grid-template-columns: 1fr;
  }

  .fabio-dark-lead,
  .fabio-how-title,
  .fabio-how-lead {
    max-width: none;
  }
}

/* =========================================================
   Fabio Responsive Fixes
   ========================================================= */

html {
  -webkit-text-size-adjust: 100%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
svg,
video,
iframe {
  max-width: 100%;
  height: auto;
}

/* Empêche les enfants de grid/flex de déborder */
.fabio-grid-2 > *,
.fabio-grid-3 > *,
.fabio-grid-4 > *,
.fabio-grid-auto > *,
.fabio-hero-grid > *,
.fabio-compare > * {
  min-width: 0;
}

@media (max-width: 1024px) {
  .fabio-grid-2,
  .fabio-grid-3,
  .fabio-grid-4,
  .fabio-grid-auto,
  .fabio-hero-grid,
  .fabio-compare,
  .fabio-final-cta-grid {
    grid-template-columns: 1fr !important;
  }

  .fabio-homepage-template .fabio-hero-copy h1,
  .fabio-features-template .fabio-features-hero-title,
  .fabio-installation-template .fabio-installation-hero-title,
  .fabio-pricing-template .fabio-pricing-hero-title,
  .fabio-how-title,
  .fabio-dark-title {
    max-width: none !important;
  }

  .fabio-homepage-template .fabio-hero-copy .fabio-lead,
  .fabio-features-template .fabio-features-hero-lead,
  .fabio-installation-template .fabio-installation-hero-lead,
  .fabio-pricing-template .fabio-pricing-hero-lead,
  .fabio-how-lead,
  .fabio-dark-lead {
    max-width: none !important;
  }
}

@media (max-width: 768px) {
  :root {
    --fabio-container-padding: 16px;
    --fabio-section-space: 56px;
  }

  .fabio-container {
    width: min(var(--fabio-container), calc(100% - 32px));
  }

  .fabio-section,
  .fabio-section-soft,
  .fabio-section-dark {
    padding: var(--fabio-section-space) 0;
  }

  .fabio-title-xl {
    font-size: clamp(2rem, 11vw, 3rem);
    line-height: 1.05;
  }

  .fabio-title-lg {
    font-size: clamp(1.7rem, 8vw, 2.3rem);
    line-height: 1.1;
  }

  .fabio-title-md {
    font-size: clamp(1.2rem, 5vw, 1.5rem);
  }

  .fabio-lead {
    font-size: 1rem;
    line-height: 1.7;
  }

  .fabio-btn {
    width: 100%;
    min-height: 50px;
    padding: 14px 18px;
  }

  .fabio-homepage-template .fabio-hero-actions,
  .fabio-features-template .fabio-hero-actions,
  .fabio-installation-template .fabio-hero-actions,
  .fabio-pricing-template .fabio-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .fabio-card,
  .fabio-card-feature,
  .fabio-card-faq,
  .fabio-card-pricing,
  .fabio-card-highlight,
  .fabio-cta-band,
  .fabio-how-right,
  .fabio-pricing-hero-panel,
  .fabio-features-hero-panel,
  .fabio-installation-hero-panel {
    padding: 20px !important;
    border-radius: 24px;
  }

  .fabio-scanned-grid {
    grid-template-columns: 1fr !important;
  }

  .fabio-scanned-item {
    width: 100%;
    min-width: 0;
    word-break: normal;
    overflow-wrap: anywhere;
  }

  .fabio-pricing-template .fabio-pricing-grid,
  .fabio-features-template .fabio-features-grid,
  .fabio-homepage-template .fabio-benefits-grid,
  .fabio-homepage-template .fabio-use-cases-grid {
    grid-template-columns: 1fr !important;
  }

  .fabio-pricing-template .fabio-pricing-plan-head {
    align-items: flex-start;
  }

  .fabio-pricing-template .fabio-pricing-price-main {
    font-size: 2rem;
  }

  .fabio-final-cta-actions {
    min-width: 100%;
  }

  .fabio-final-cta-note {
    text-align: left;
  }
}

/* =========================================================
   First section under header: remove large top gap
   ========================================================= */

.fabio-homepage-template > section:first-child,
.fabio-features-template > section:first-child,
.fabio-installation-template > section:first-child,
.fabio-pricing-template > section:first-child {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

@media (max-width: 768px) {
  .fabio-homepage-template > section:first-child,
  .fabio-features-template > section:first-child,
  .fabio-installation-template > section:first-child,
  .fabio-pricing-template > section:first-child {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

.fabio-homepage-template .fabio-hero {
  padding-top: 0 !important;
  padding-bottom: 16px;
}

.fabio-homepage-template .fabio-demo-section {
  padding-top: 8px;
}

/* =========================================================
   Fabio Pricing template global spacing reset
   ========================================================= */

.fabio-pricing-template > section,
.fabio-pricing-template > div {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.fabio-pricing-template > section:first-child {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.fabio-pricing-template .fabio-pricing-hero-section {
  padding-top: 0 !important;
  padding-bottom: 16px !important;
}

.fabio-pricing-template > .fabio-pricing-chatbot-raw {
  margin: 0 !important;
  padding: 0 !important;
}

.fabio-pricing-template > .fabio-pricing-chatbot-raw > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.fabio-pricing-template .fabio-pricing-plans-section {
  padding-top: 16px !important;
}