/* =============================================================
   OralData — Dark Glassmorphism Theme  v1.7
   Classes alignées avec header.php / footer.php / front-page.php
   ============================================================= */

/* ----------------------------------------------------------
   RESET
   ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box !important; }

/* ----------------------------------------------------------
   VARIABLES
   ---------------------------------------------------------- */
:root {
  --bg:            #0C1217;
  --bg-card:       #161E26;
  --glass-bg:      rgba(23,31,38,0.6);
  --glass-border:  #2D3843;
  --glass-blur:    blur(24px);
  --primary:       #488BA8;
  --primary-light: #61A8C9;
  --teal:          #36A198;
  --pink:          #D45483;
  --orange:        #E88630;
  --green:         #4CAF7A;
  --purple:        #8B65D9;
  --primary-bg:    rgba(72,139,168,0.12);
  --teal-bg:       rgba(54,161,152,0.12);
  --pink-bg:       rgba(212,84,131,0.12);
  --orange-bg:     rgba(232,134,48,0.12);
  --green-bg:      rgba(76,175,122,0.12);
  --purple-bg:     rgba(139,101,217,0.12);
  --fg:            #EEF2F6;
  --fg-muted:      rgba(238,242,246,0.6);
  --fg-subtle:     rgba(238,242,246,0.35);
  --border:        #2D3843;
  --radius-sm:     4px;
  --radius:        8px;
  --radius-md:     10px;
  --radius-lg:     12px;
  --radius-xl:     16px;
  --radius-full:   9999px;
  --font-heading:  'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body:     'Inter', system-ui, sans-serif;
  --nav-h:         102px; /* 37 + 65 */
}

/* ----------------------------------------------------------
   BASE
   ---------------------------------------------------------- */
html { scroll-behavior: smooth; }

body {
  background: var(--bg) !important;
  color: var(--fg) !important;
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  -webkit-font-smoothing: antialiased !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh !important;
}

a { color: inherit !important; text-decoration: none !important; }
a:hover { text-decoration: none !important; }
img { display: block !important; max-width: 100% !important; height: auto; }
ul, ol { list-style: none !important; margin: 0 !important; padding: 0 !important; }

.container {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 0 40px !important;
  width: 100% !important;
}

/* ----------------------------------------------------------
   TYPOGRAPHIE
   ---------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--font-heading) !important;
  color: var(--fg) !important;
}

h1 {
  font-size: 96px !important;
  font-weight: 700 !important;
  letter-spacing: -2.4px !important;
  line-height: 1.0 !important;
}

h2 {
  font-size: 60px !important;
  font-weight: 700 !important;
  letter-spacing: -1.5px !important;
  line-height: 1.1 !important;
}

h3 {
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

h4 { font-size: 16px !important; font-weight: 600 !important; }

p {
  color: var(--fg-muted) !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}

/* ----------------------------------------------------------
   COMPOSANT : GLASS
   ---------------------------------------------------------- */
.od-glass {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-lg) !important;
}

/* ----------------------------------------------------------
   COMPOSANT : BADGE / PILL
   ---------------------------------------------------------- */
.od-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 14px !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--glass-border) !important;
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: var(--fg-muted) !important;
  margin-bottom: 20px !important;
}

.od-badge__dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: var(--primary-light) !important;
  display: inline-block !important;
  animation: od-blink 2.2s ease-in-out infinite !important;
  flex-shrink: 0 !important;
}

@keyframes od-blink { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* ----------------------------------------------------------
   COMPOSANT : BOUTONS
   ---------------------------------------------------------- */
.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 11px 22px !important;
  border-radius: var(--radius-md) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 200ms !important;
  border: 1px solid transparent !important;
  text-decoration: none !important;
  width: auto !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  font-family: var(--font-body) !important;
}

.btn--primary {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
}
.btn--primary:hover {
  background: var(--primary-light) !important;
  border-color: var(--primary-light) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 32px rgba(72,139,168,0.3) !important;
  color: #fff !important;
}

.btn--ghost {
  background: transparent !important;
  color: var(--fg-muted) !important;
  border-color: var(--border) !important;
}
.btn--ghost:hover {
  color: var(--fg) !important;
  border-color: var(--primary) !important;
  background: rgba(72,139,168,0.06) !important;
}

.btn--lg {
  padding: 14px 28px !important;
  font-size: 15px !important;
}

/* ----------------------------------------------------------
   HEADER SPACER
   ---------------------------------------------------------- */
.od-header-spacer {
  height: 102px !important;
  display: block !important;
}

body.admin-bar .od-header-spacer { height: 134px !important; }

/* ----------------------------------------------------------
   HEADER : position fixe
   ---------------------------------------------------------- */
.od-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  width: 100% !important;
}

body.admin-bar .od-header { top: 32px !important; }
@media screen and (max-width: 782px) {
  body.admin-bar .od-header { top: 46px !important; }
}

/* ── TOPBAR (37px) ── */
.od-topbar {
  background: rgba(12,18,23,0.9) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border-bottom: 1px solid var(--glass-border) !important;
  height: 37px !important;
  width: 100% !important;
}

.od-topbar__inner {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 20px !important;
}

.od-topbar__social {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-right: auto !important;
}

.od-topbar__social a {
  color: var(--fg-muted) !important;
  transition: color 200ms !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
}
.od-topbar__social a:hover { color: var(--fg) !important; }
.od-topbar__social svg { width: 14px !important; height: 14px !important; display: block !important; }

.od-topbar__contact a {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  color: var(--fg-muted) !important;
  transition: color 200ms !important;
}
.od-topbar__contact a:hover { color: var(--fg) !important; }
.od-topbar__contact svg { width: 12px !important; height: 12px !important; flex-shrink: 0 !important; }

.od-topbar__lang {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.od-lang-link {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--fg-muted) !important;
  padding: 2px 7px !important;
  border-radius: var(--radius-sm) !important;
  transition: all 200ms !important;
  letter-spacing: 0.05em !important;
}
.od-lang-link:hover,
.od-lang-link.active {
  color: var(--fg) !important;
  background: rgba(72,139,168,0.12) !important;
}

/* ── NAVBAR (65px) ── */
.od-navbar {
  background: rgba(12,18,23,0.8) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border-bottom: 1px solid var(--glass-border) !important;
  height: 65px !important;
  width: 100% !important;
}

.od-navbar__inner {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}

/* Logo */
.od-nav-logo {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  margin-right: 40px !important;
  text-decoration: none !important;
}
.od-nav-logo img {
  height: 56px !important;
  width: auto !important;
  max-width: none !important;
  display: block !important;
}
.od-nav-logo__text {
  font-family: var(--font-heading) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--fg) !important;
}

/* Liens nav */
.od-nav-links {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  flex: 1 !important;
}
.od-nav-links a,
.od-nav-links .nav-link {
  display: inline-flex !important;
  align-items: center !important;
  padding: 8px 14px !important;
  border-radius: var(--radius) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--fg-muted) !important;
  transition: all 200ms !important;
  text-decoration: none !important;
  background: none !important;
  border: none !important;
  white-space: nowrap !important;
}
.od-nav-links a:hover,
.od-nav-links .nav-link:hover,
.od-nav-links a.active,
.od-nav-links .current-menu-item > a {
  color: var(--fg) !important;
  background: rgba(72,139,168,0.08) !important;
}

/* CTA nav */
.od-nav-cta {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}
.od-nav-cta .btn {
  padding: 8px 18px !important;
  font-size: 13px !important;
}

/* Burger mobile */
.od-nav-burger {
  display: none !important;
  flex-direction: column !important;
  gap: 5px !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: 8px !important;
  margin-left: auto !important;
}
.od-nav-burger span {
  display: block !important;
  width: 22px !important;
  height: 2px !important;
  background: var(--fg) !important;
  border-radius: 2px !important;
  transition: all 200ms !important;
}

/* Mobile menu */
.od-mobile-menu {
  display: none !important;
}

/* ----------------------------------------------------------
   SECTIONS (padding général)
   ---------------------------------------------------------- */
.od-section {
  padding: 128px 0 !important;
  position: relative !important;
}

/* Section Pourquoi — plus compacte */
.od-why {
  padding: 80px 0 !important;
}

/* CTA finale — plus aérée */
.od-cta-final {
  padding: 160px 0 !important;
}

/* Backgrounds alternants (reflet du prototype) */
.od-donnee,
.od-analytics-section {
  background: var(--bg) !important;
}

/* Override h2 section Pourquoi */
.od-why h2 {
  font-size: 30px !important;
  letter-spacing: -0.75px !important;
}

.od-section__header {
  text-align: center !important;
  max-width: 720px !important;
  margin: 0 auto 64px !important;
}
.od-section__header .od-badge { margin-bottom: 16px !important; }
.od-section__header h2 { margin-bottom: 16px !important; }
.od-section__sub {
  font-size: 17px !important;
  color: var(--fg-muted) !important;
  line-height: 1.7 !important;
  margin-top: 16px !important;
}

.od-section__cta {
  text-align: center !important;
  margin-top: 48px !important;
}

/* ----------------------------------------------------------
   HERO
   ---------------------------------------------------------- */
.od-hero {
  padding: 160px 0 80px !important;
  position: relative !important;
  overflow: hidden !important;
  text-align: center !important;
}

/* Grille de fond */
.od-hero::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    linear-gradient(rgba(72,139,168,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(72,139,168,0.04) 1px, transparent 1px) !important;
  background-size: 40px 40px !important;
  pointer-events: none !important;
}

/* Orbes lumineux */
.od-orb {
  position: absolute !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  filter: blur(60px) !important;
}
.od-orb--1 {
  width: 600px !important; height: 600px !important;
  top: -200px !important; left: -200px !important;
  background: rgba(72,139,168,0.07) !important;
}
.od-orb--2 {
  width: 400px !important; height: 400px !important;
  top: 100px !important; right: -100px !important;
  background: rgba(54,161,152,0.06) !important;
}
.od-orb--3 {
  width: 300px !important; height: 300px !important;
  bottom: 0 !important; left: 50% !important;
  transform: translateX(-50%) !important;
  background: rgba(72,139,168,0.05) !important;
}
.od-orb--cta1 {
  width: 500px !important; height: 500px !important;
  top: -100px !important; left: -150px !important;
  background: rgba(72,139,168,0.08) !important;
}
.od-orb--cta2 {
  width: 400px !important; height: 400px !important;
  bottom: -100px !important; right: -100px !important;
  background: rgba(54,161,152,0.06) !important;
}

.od-hero__inner {
  position: relative !important;
  z-index: 1 !important;
  max-width: 900px !important;
  margin: 0 auto !important;
}

.od-hero__content { position: relative !important; z-index: 1 !important; }

.od-hero h1 {
  margin: 0 0 24px !important;
}

.od-gradient-text {
  background: linear-gradient(135deg, var(--primary-light), var(--teal)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

.od-hero__sub {
  font-size: 18px !important;
  color: var(--fg-muted) !important;
  max-width: 640px !important;
  margin: 0 auto 40px !important;
  line-height: 1.7 !important;
}

.od-hero__cta {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  margin-bottom: 48px !important;
}

.od-hero__proof {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  margin-top: 8px !important;
}

.od-hero__avatars {
  display: flex !important;
  align-items: center !important;
}
.od-avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: var(--glass-bg) !important;
  border: 2px solid var(--glass-border) !important;
  margin-left: -8px !important;
  display: inline-block !important;
}
.od-avatar:first-child { margin-left: 0 !important; }

.od-hero__proof-text {
  font-size: 14px !important;
  color: var(--fg-muted) !important;
}
.od-hero__proof-text strong { color: var(--fg) !important; }

/* Hero visual / terminal */
.od-hero__visual {
  margin-top: 64px !important;
  max-width: 600px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ----------------------------------------------------------
   TERMINAL MOCKUP
   ---------------------------------------------------------- */
.od-terminal {
  overflow: hidden !important;
  font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace !important;
  font-size: 13px !important;
}

.od-terminal__bar {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--glass-border) !important;
  background: rgba(12,18,23,0.5) !important;
}

.od-terminal__dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}
.od-terminal__dot--red    { background: #FF5F57 !important; }
.od-terminal__dot--yellow { background: #FFBD2E !important; }
.od-terminal__dot--green  { background: #28CA42 !important; }

.od-terminal__title {
  font-size: 11px !important;
  color: var(--fg-muted) !important;
  margin-left: 8px !important;
  font-family: var(--font-body) !important;
}

.od-terminal__body {
  padding: 20px !important;
  line-height: 1.8 !important;
  text-align: left !important;
}

.od-terminal__line {
  display: flex !important;
  gap: 8px !important;
  align-items: baseline !important;
}
.od-terminal__line--comment { color: var(--fg-subtle) !important; font-style: italic !important; }
.od-terminal__line--divider {
  height: 1px !important;
  background: var(--glass-border) !important;
  margin: 8px 0 !important;
  display: block !important;
}
.od-terminal__line--generating { color: var(--primary-light) !important; }
.od-terminal__line--success { color: var(--teal) !important; }

.od-terminal__key {
  color: var(--fg-muted) !important;
  min-width: 100px !important;
  flex-shrink: 0 !important;
}
.od-terminal__sep { color: var(--fg-subtle) !important; }
.od-terminal__val { color: var(--fg) !important; }
.od-terminal__val--ok { color: var(--teal) !important; font-weight: 600 !important; }

.od-terminal__cursor {
  display: inline-block !important;
  width: 8px !important;
  height: 14px !important;
  background: var(--primary-light) !important;
  animation: od-blink 1s step-end infinite !important;
  vertical-align: text-bottom !important;
  margin-top: 4px !important;
}

.od-terminal--lg .od-terminal__body { padding: 24px !important; }

/* ----------------------------------------------------------
   CARTES GRID
   ---------------------------------------------------------- */
.od-cards-grid {
  display: grid !important;
  gap: 20px !important;
}
.od-cards-grid--3 {
  grid-template-columns: repeat(3, 1fr) !important;
}
.od-cards-grid--2 {
  grid-template-columns: repeat(2, 1fr) !important;
}

.od-card {
  padding: 28px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.od-card h3 { font-size: 16px !important; }
.od-card p  { font-size: 14px !important; }

.od-card--horizontal {
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 20px !important;
}

/* Icônes de cartes */
.od-card__icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: var(--radius-md) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.od-card__icon svg { width: 22px !important; height: 22px !important; }
.od-card__icon--blue   { background: var(--primary-bg) !important; color: var(--primary-light) !important; }
.od-card__icon--cyan   { background: rgba(97,168,201,0.12) !important; color: #61A8C9 !important; }
.od-card__icon--purple { background: var(--purple-bg) !important; color: var(--purple) !important; }
.od-card__icon--green  { background: var(--green-bg) !important; color: var(--green) !important; }
.od-card__icon--orange { background: var(--orange-bg) !important; color: var(--orange) !important; }
.od-card__icon--pink   { background: var(--pink-bg) !important; color: var(--pink) !important; }

/* Feature list */
.od-feature-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 16px 0 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.od-feature-list li {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 15px !important;
  color: var(--fg-muted) !important;
}
.od-feature-list li svg {
  color: var(--teal) !important;
  flex-shrink: 0 !important;
  width: 16px !important;
  height: 16px !important;
}

/* ----------------------------------------------------------
   WORKFLOW
   ---------------------------------------------------------- */
.od-workflow__steps {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0 !important;
  position: relative !important;
}

.od-workflow__step {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 12px !important;
}

.od-workflow__step-num {
  font-family: var(--font-heading) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  color: var(--primary) !important;
  background: var(--primary-bg) !important;
  border: 1px solid rgba(72,139,168,0.2) !important;
  border-radius: var(--radius-full) !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.od-workflow__step-card {
  padding: 20px !important;
  width: 100% !important;
}
.od-workflow__step-card h3 { font-size: 15px !important; margin-bottom: 6px !important; }
.od-workflow__step-card p  { font-size: 13px !important; }

.od-workflow__connector {
  width: 40px !important;
  height: 2px !important;
  background: linear-gradient(90deg, var(--glass-border), rgba(72,139,168,0.4)) !important;
  flex-shrink: 0 !important;
  margin-top: 18px !important;
  align-self: flex-start !important;
}

/* ----------------------------------------------------------
   SECTION COMPTES RENDUS (2 colonnes)
   ---------------------------------------------------------- */
.od-cr__inner {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 64px !important;
  align-items: center !important;
}

.od-cr__content { display: flex !important; flex-direction: column !important; gap: 16px !important; }
.od-cr__content h2 { font-size: 40px !important; line-height: 1.1 !important; }
.od-cr__content p { font-size: 16px !important; }

.od-cr__visual {}

/* ----------------------------------------------------------
   SECTION ANALYTIQUE (2 colonnes inversées)
   ---------------------------------------------------------- */
.od-analytics__inner {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 64px !important;
  align-items: center !important;
}

.od-analytics__content { display: flex !important; flex-direction: column !important; gap: 16px !important; }
.od-analytics__content h2 { font-size: 40px !important; line-height: 1.1 !important; }

.od-analytics__kpis {
  display: flex !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
  margin: 8px 0 !important;
}

.od-kpi {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.od-kpi strong {
  font-family: var(--font-heading) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--primary-light) !important;
  line-height: 1 !important;
}
.od-kpi span {
  font-size: 12px !important;
  color: var(--fg-muted) !important;
}

/* Dashboard mockup */
.od-dashboard {
  padding: 24px !important;
  overflow: hidden !important;
}

.od-dashboard__header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 20px !important;
}
.od-dashboard__title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--fg) !important;
}
.od-dashboard__period {
  font-size: 11px !important;
  color: var(--primary-light) !important;
  background: var(--primary-bg) !important;
  padding: 3px 10px !important;
  border-radius: var(--radius-full) !important;
}

.od-dashboard__stats {
  display: grid !important;
  grid-template-columns: repeat(3,1fr) !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
}

.od-stat {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  background: rgba(12,18,23,0.5) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius) !important;
  padding: 12px !important;
}
.od-stat__val {
  font-family: var(--font-heading) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}
.od-stat__val--primary { color: var(--primary-light) !important; }
.od-stat__val--cyan    { color: #61A8C9 !important; }
.od-stat__val--green   { color: var(--green) !important; }
.od-stat__label {
  font-size: 11px !important;
  color: var(--fg-muted) !important;
}
.od-stat__trend--up {
  font-size: 11px !important;
  color: var(--green) !important;
  font-weight: 600 !important;
}

/* Graphique barres */
.od-dashboard__chart {
  display: flex !important;
  align-items: flex-end !important;
  gap: 6px !important;
  height: 80px !important;
  padding: 0 4px !important;
}
.od-chart-bar {
  flex: 1 !important;
  background: rgba(72,139,168,0.25) !important;
  border-radius: 3px 3px 0 0 !important;
  transition: background 200ms !important;
  position: relative !important;
}
.od-chart-bar::after {
  content: attr(data-label) !important;
  position: absolute !important;
  bottom: -16px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-size: 9px !important;
  color: var(--fg-subtle) !important;
  white-space: nowrap !important;
}
.od-chart-bar--active { background: rgba(72,139,168,0.6) !important; }

/* ----------------------------------------------------------
   SÉCURITÉ
   ---------------------------------------------------------- */
.od-security__grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
}

.od-security__card {
  padding: 28px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  text-align: center !important;
  align-items: center !important;
}
.od-security__card h3 { font-size: 15px !important; }
.od-security__card p  { font-size: 13px !important; }

.od-security__badge {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  background: var(--primary-bg) !important;
  border: 1px solid rgba(72,139,168,0.25) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--primary-light) !important;
  letter-spacing: 0.05em !important;
}
.od-security__badge--cyan   { background: rgba(97,168,201,0.12) !important; border-color: rgba(97,168,201,0.25) !important; color: #61A8C9 !important; }
.od-security__badge--green  { background: var(--green-bg) !important; border-color: rgba(76,175,122,0.25) !important; color: var(--green) !important; }
.od-security__badge--purple { background: var(--purple-bg) !important; border-color: rgba(139,101,217,0.25) !important; color: var(--purple) !important; }
.od-security__badge svg { width: 22px !important; height: 22px !important; }

/* ----------------------------------------------------------
   INTÉGRATIONS
   ---------------------------------------------------------- */
.od-integrations__logos {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  margin-bottom: 32px !important;
}

.od-integration-logo {
  padding: 20px 16px !important;
  text-align: center !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--fg-muted) !important;
  transition: all 200ms !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 64px !important;
}
.od-integration-logo:hover { color: var(--fg) !important; background: rgba(72,139,168,0.06) !important; }

.od-integrations__api {
  text-align: center !important;
  font-size: 14px !important;
  color: var(--fg-muted) !important;
}

.od-link {
  color: var(--primary-light) !important;
  text-decoration: underline !important;
  transition: color 200ms !important;
}
.od-link:hover { color: var(--fg) !important; }

/* ----------------------------------------------------------
   CTA FINAL
   ---------------------------------------------------------- */
.od-cta-final {
  padding: 96px 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

.od-cta-final__card {
  max-width: 720px !important;
  margin: 0 auto !important;
  padding: 64px 56px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 16px !important;
}
.od-cta-final__card h2 { margin-bottom: 4px !important; }
.od-cta-final__card p  { font-size: 16px !important; max-width: 540px !important; }

.od-cta-final__actions {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  margin-top: 8px !important;
}

.od-cta-final__note {
  font-size: 13px !important;
  color: var(--fg-subtle) !important;
  margin-top: 4px !important;
}

/* ----------------------------------------------------------
   FOOTER
   ---------------------------------------------------------- */
.od-footer {
  padding: 48px 0 32px !important;
  border-top: 1px solid var(--glass-border) !important;
}

.od-footer__inner {
  display: flex !important;
  flex-direction: column !important;
  gap: 32px !important;
}

.od-footer__brand {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  align-items: flex-start !important;
}

.od-footer__logo img {
  height: 36px !important;
  width: auto !important;
}

.od-footer__tagline {
  font-size: 14px !important;
  color: var(--fg-muted) !important;
  margin-top: 4px !important;
}

.od-footer__nav {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px 24px !important;
}

.od-footer__nav a {
  font-size: 14px !important;
  color: var(--fg-muted) !important;
  transition: color 200ms !important;
  white-space: nowrap !important;
}
.od-footer__nav a:hover { color: var(--fg) !important; }

.od-footer__bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-top: 24px !important;
  border-top: 1px solid var(--glass-border) !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.od-footer__copy {
  font-size: 13px !important;
  color: var(--fg-subtle) !important;
}

.od-footer__legal {
  display: flex !important;
  gap: 20px !important;
}
.od-footer__legal a {
  font-size: 13px !important;
  color: var(--fg-subtle) !important;
  transition: color 200ms !important;
}
.od-footer__legal a:hover { color: var(--fg-muted) !important; }

/* ----------------------------------------------------------
   UTILITAIRES
   ---------------------------------------------------------- */
.od-why, .od-workflow, .od-cr, .od-analytics,
.od-research, .od-security, .od-integrations {
  padding: 96px 0 !important;
}

/* ----------------------------------------------------------
   OVERRIDES WORDPRESS
   ---------------------------------------------------------- */

/* Supprime les marges/paddings WP par défaut */
.wp-block-group,
.wp-block-group__inner-container {
  padding: 0 !important;
  margin: 0 !important;
}

/* Admin bar compensation */
body.admin-bar .od-header { top: 32px !important; }
body.admin-bar .od-header-spacer { height: 134px !important; }

/* Neutralise tout style parent résiduel sur les éléments clés */
.od-hero h1,
.od-section h2,
.od-why h2,
.od-cr h2,
.od-analytics h2 {
  font-family: var(--font-heading) !important;
  color: var(--fg) !important;
}

.od-cta-final h2 {
  font-size: 40px !important;
  font-family: var(--font-heading) !important;
  color: var(--fg) !important;
}

/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */
@media (max-width: 1024px) {
  h1 { font-size: 72px !important; }
  h2 { font-size: 40px !important; }
  .od-cards-grid--3 { grid-template-columns: repeat(2, 1fr) !important; }
  .od-security__grid { grid-template-columns: repeat(2, 1fr) !important; }
  .od-cr__inner,
  .od-analytics__inner { grid-template-columns: 1fr !important; gap: 40px !important; }
}

@media (max-width: 768px) {
  h1 { font-size: 52px !important; letter-spacing: -1.5px !important; }
  h2 { font-size: 32px !important; }
  .container { padding: 0 20px !important; }
  .od-hero { padding: 130px 0 64px !important; }
  .od-cards-grid--3,
  .od-cards-grid--2 { grid-template-columns: 1fr !important; }
  .od-security__grid { grid-template-columns: 1fr 1fr !important; }
  .od-integrations__logos { grid-template-columns: repeat(2, 1fr) !important; }
  .od-nav-links,
  .od-nav-cta { display: none !important; }
  .od-nav-burger { display: flex !important; }
  .od-workflow__steps {
    flex-direction: column !important;
    align-items: center !important;
  }
  .od-workflow__connector {
    width: 2px !important;
    height: 24px !important;
    margin: 0 !important;
    background: linear-gradient(180deg, var(--glass-border), rgba(72,139,168,0.4)) !important;
  }
  .od-footer__bottom { flex-direction: column !important; text-align: center !important; }
  .od-footer__legal { justify-content: center !important; }
  .od-cta-final__card { padding: 40px 24px !important; }
  .od-card--horizontal { flex-direction: column !important; }
}

/* ----------------------------------------------------------
   COMPOSANTS NOUVEAUX — v1.3
   ---------------------------------------------------------- */

/* Grille hero */
.od-hero__bg-grid {
  position: absolute !important;
  inset: 0 !important;
  background-image:
    linear-gradient(rgba(72,139,168,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(72,139,168,0.04) 1px, transparent 1px) !important;
  background-size: 40px 40px !important;
  pointer-events: none !important;
}

.od-hero__sub2 {
  font-size: 15px !important;
  color: var(--fg-subtle) !important;
  max-width: 560px !important;
  margin: -24px auto 40px !important;
  line-height: 1.7 !important;
}

/* ── Widget "Votre temps est précieux" ── */
.od-vt-card {
  margin-top: 64px !important;
  padding: 32px 40px 0 !important;
  text-align: center !important;
  overflow: hidden !important;
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.od-vt-header {
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
  margin-bottom: 28px !important;
  text-align: left !important;
}

.od-vt-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: rgba(138,155,173,0.12) !important;
  border: 1px solid rgba(138,155,173,0.2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: var(--fg-muted) !important;
}
.od-vt-icon svg { width: 22px !important; height: 22px !important; }

.od-vt-title {
  font-family: var(--font-heading) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--fg) !important;
  margin-bottom: 4px !important;
}
.od-vt-subtitle {
  font-size: 13px !important;
  color: var(--fg-muted) !important;
  line-height: 1.5 !important;
}

.od-vt-flow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  margin-bottom: 0 !important;
  flex-wrap: wrap !important;
}

.od-vt-step {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 120px !important;
}

.od-vt-step__icon {
  width: 72px !important;
  height: 72px !important;
  border-radius: var(--radius-xl) !important;
  border: 1px solid var(--glass-border) !important;
  background: rgba(31,41,51,0.5) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--primary-light) !important;
}
.od-vt-step__icon--purple { color: var(--purple) !important; }
.od-vt-step__icon--teal   { color: var(--teal) !important; }
.od-vt-step__icon svg { width: 28px !important; height: 28px !important; }

.od-vt-step__label {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--fg-muted) !important;
  text-align: center !important;
}

.od-vt-arrow {
  color: rgba(138,155,173,0.4) !important;
  padding: 0 12px !important;
  padding-bottom: 22px !important;
  flex-shrink: 0 !important;
}
.od-vt-arrow svg { width: 18px !important; height: 18px !important; }

.od-vt-stat {
  background: rgba(12,18,23,0.6) !important;
  border-top: 1px solid var(--glass-border) !important;
  padding: 14px 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin: 28px -40px 0 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--fg-muted) !important;
}
.od-vt-stat svg { width: 16px !important; height: 16px !important; color: var(--primary-light) !important; flex-shrink: 0 !important; }
.od-vt-stat strong { color: var(--fg) !important; }

/* ── Flow 5 étapes (section De la Donnée) ── */
.od-flow-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: rgba(72,139,168,0.7) !important;
  margin-bottom: 20px !important;
}
.od-flow-badge__dot {
  width: 6px !important; height: 6px !important;
  border-radius: 50% !important;
  background: rgba(72,139,168,0.7) !important;
  display: inline-block !important;
}

.od-flow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  background: rgba(23,31,38,0.4) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 24px 32px !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.od-flow__step {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--fg-muted) !important;
  min-width: 80px !important;
  text-align: center !important;
}
.od-flow__step--active { color: var(--primary-light) !important; }
.od-flow__step--active .od-flow__num {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}

.od-flow__num {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: 1px solid var(--glass-border) !important;
  background: rgba(31,41,51,0.5) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--fg-muted) !important;
  flex-shrink: 0 !important;
}

.od-flow__connector {
  width: 32px !important;
  height: 2px !important;
  background: linear-gradient(90deg, var(--glass-border), rgba(72,139,168,0.3)) !important;
  flex-shrink: 0 !important;
  align-self: center !important;
  margin-bottom: 20px !important;
}

/* ── Cartes centrees (why + security) ── */
.od-card--center {
  align-items: center !important;
  text-align: center !important;
}

/* ── Grid 4 colonnes ── */
.od-cards-grid--4 {
  grid-template-columns: repeat(4, 1fr) !important;
}

/* ── Security badge ── */
.od-security-badge {
  width: 52px !important; height: 52px !important;
  border-radius: 50% !important;
  background: var(--primary-bg) !important;
  border: 1px solid rgba(72,139,168,0.25) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: var(--primary-light) !important;
  letter-spacing: 0.05em !important;
}
.od-security-badge--cyan   { background: rgba(97,168,201,0.12) !important; color: #61A8C9 !important; border-color: rgba(97,168,201,0.25) !important; }
.od-security-badge--green  { background: var(--green-bg) !important; color: var(--green) !important; border-color: rgba(76,175,122,0.25) !important; }
.od-security-badge--purple { background: var(--purple-bg) !important; color: var(--purple) !important; border-color: rgba(139,101,217,0.25) !important; }
.od-security-badge svg { width: 22px !important; height: 22px !important; }

/* ── Stats row (section analytics) ── */
.od-stats-row {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  margin-top: 48px !important;
}
.od-stat-card {
  padding: 32px 24px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
}
.od-stat-card__val {
  font-family: var(--font-heading) !important;
  font-size: 40px !important;
  font-weight: 700 !important;
  color: var(--primary-light) !important;
  line-height: 1 !important;
  letter-spacing: -1px !important;
}
.od-stat-card__label {
  font-size: 13px !important;
  color: var(--fg-muted) !important;
  text-align: center !important;
}

/* ── CTA final (centré, pas de section padding double) ── */
.od-cta-final .od-cta-final__inner {
  position: relative !important;
  z-index: 1 !important;
}

/* ── Responsive v1.3 ── */
@media (max-width: 1024px) {
  .od-cards-grid--4 { grid-template-columns: repeat(2, 1fr) !important; }
  .od-stats-row     { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 768px) {
  .od-cards-grid--4 { grid-template-columns: 1fr 1fr !important; }
  .od-stats-row     { grid-template-columns: 1fr 1fr !important; }
  .od-vt-card       { padding: 24px 20px 0 !important; }
  .od-vt-stat       { margin: 20px -20px 0 !important; }
  .od-flow          { flex-direction: column !important; }
  .od-flow__connector { width: 2px !important; height: 20px !important; margin: 0 !important; background: linear-gradient(180deg, var(--glass-border), rgba(72,139,168,0.3)) !important; }
  .od-vt-flow       { gap: 4px !important; }
}


/* =============================================================
   v1.7 — Nouveaux composants
   ============================================================= */

/* ── §3 Workflow — badge AI + description par étape ── */
.od-flow__ai-badge {
  display: inline-block !important;
  background: rgba(72,139,168,0.15) !important;
  border: 1px solid rgba(72,139,168,0.35) !important;
  color: var(--primary-light) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  padding: 1px 6px !important;
  border-radius: var(--radius-sm) !important;
  margin-bottom: 6px !important;
  text-transform: uppercase !important;
}

.od-flow__label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: inherit !important;
}

.od-flow__step-desc {
  font-size: 11px !important;
  color: var(--fg-subtle) !important;
  line-height: 1.35 !important;
  max-width: 110px !important;
  margin-top: 4px !important;
  text-align: center !important;
}

/* ── §4 CR — Aperçu document ── */
.od-cr-layout {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 48px !important;
  align-items: start !important;
  margin-top: 48px !important;
}

.od-cr-preview {
  padding: 24px !important;
  border-radius: var(--radius-xl) !important;
}

.od-cr-preview__header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding-bottom: 14px !important;
  margin-bottom: 8px !important;
  border-bottom: 1px solid var(--glass-border) !important;
}

.od-cr-preview__header svg {
  color: var(--primary-light) !important;
  flex-shrink: 0 !important;
}

.od-cr-preview__filename {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--fg-muted) !important;
  font-family: var(--font-body) !important;
}

.od-cr-preview__row {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  padding: 9px 0 !important;
  border-bottom: 1px solid rgba(45,56,67,0.4) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}
.od-cr-preview__row:last-child { border-bottom: none !important; }

.od-cr-preview__chevron {
  color: var(--primary-light) !important;
  font-size: 14px !important;
  flex-shrink: 0 !important;
}

.od-cr-preview__label {
  color: var(--fg-muted) !important;
  flex-shrink: 0 !important;
  font-weight: 500 !important;
}

.od-cr-preview__value {
  color: var(--fg) !important;
}

@media (max-width: 900px) {
  .od-cr-layout { grid-template-columns: 1fr !important; }
}

/* ── §6 Research — infographie ── */
.od-research-infographic {
  padding: 24px 32px !important;
  border-radius: var(--radius-xl) !important;
  margin-bottom: 48px !important;
}

.od-research-infographic__label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--fg-subtle) !important;
  margin-bottom: 20px !important;
}

.od-research-infographic__stats {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 32px !important;
}

.od-research-infographic__stat {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.od-research-infographic__stat-value {
  font-family: var(--font-heading) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--fg) !important;
  line-height: 1 !important;
}

.od-research-infographic__stat-label {
  font-size: 11px !important;
  color: var(--fg-muted) !important;
}