/* Odyssix — réparations visuelles (mu-plugin odyssix-reparations-visuelles) */

/* ===== 1. En-tête : une seule ligne de 1200 à 1920 px ===== */
@media (min-width: 1200px) {
  header .header-right { flex: 1 1 auto; min-width: 0; align-items: center; }
  header .mean__menu-wrapper { flex: 1 1 auto; min-width: 0; }
  header #menu-menu { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; white-space: nowrap; }
  header #menu-menu > li { flex: 0 0 auto; margin-right: 16px; }
  header .header-action { flex: 0 0 auto; }
  header .header-link-1 .content h6, header .header-link-1 .content h6 a, header .header-link-1 .content span { white-space: nowrap; }
}
@media (min-width: 1200px) and (max-width: 1599px) {
  header #menu-menu > li { margin-right: 12px; }
  header #menu-menu > li.odx-nav-right:not(.odx-nav-client) { padding-left: 34px; }
  header .header-link-1 .content h6 { font-size: 17px; }
}

/* ===== 2. FAQ : la grille « faq-fixed » passe en une colonne sous 1024 px ===== */
@media (max-width: 1024px) {
  #odx-page .faq-grid.faq-fixed { grid-template-columns: minmax(0, 1fr) !important; gap: 32px !important; }
}
#odx-page .faq-grid > * { min-width: 0; }

/* ===== 3. Formations SST / EPI : carte d'informations du héros ===== */
#odx-page .sst-hero-card, #odx-page .epi-hero-card {
  background: #fff; color: var(--text, #1e293b); border-radius: 14px; padding: 32px;
  width: 100%; max-width: 420px; box-shadow: 0 24px 64px rgba(2, 6, 23, .45); position: relative;
}
#odx-page .sst-hero-icon-ring {
  width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: #fee2e2; color: #dc2626; box-shadow: 0 0 0 8px rgba(220, 38, 38, .07); margin-bottom: 20px;
}
#odx-page .sst-hero-icon-ring svg { width: 26px; height: 26px; }
#odx-page .epi-hero-icons { display: flex; gap: 10px; margin-bottom: 20px; }
#odx-page .epi-hero-icon { width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
#odx-page .epi-hero-icon svg { width: 26px; height: 26px; }
#odx-page .epi-hero-icon.fire { background: #fee2e2; color: #dc2626; }
#odx-page .epi-hero-icon.exit { background: #dcfce7; color: #15803d; }
#odx-page .sst-hero-title, #odx-page .epi-hero-title { font-family: var(--heading); font-size: 22px; font-weight: 800; line-height: 1.2; color: var(--dark, #0f172a); letter-spacing: -.01em; }
#odx-page .sst-hero-sub, #odx-page .epi-hero-sub { font-size: 14px; color: var(--text-secondary, #475569); margin: 4px 0 18px; line-height: 1.5; }
#odx-page .sst-hero-card .sst-cert-badge, #odx-page .epi-hero-card .epi-cert-badge { display: flex; margin: 0 0 8px; padding: 10px 14px; font-size: 13px; font-weight: 600; color: #1e3a8a; border-radius: 10px; }
#odx-page .sst-hero-card .sst-info-row, #odx-page .epi-hero-card .epi-info-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 0; padding: 12px 0; border-top: 1px solid var(--border, #e2e8f0); font-size: 14px;
}
#odx-page .sst-hero-card .sst-info-row:last-child, #odx-page .epi-hero-card .epi-info-row:last-child { padding-bottom: 0; }
#odx-page .sst-hero-card .sst-info-label, #odx-page .epi-hero-card .epi-info-label { color: var(--muted, #64748b); font-weight: 500; }
#odx-page .sst-hero-card .sst-info-value, #odx-page .epi-hero-card .epi-info-value { color: var(--dark, #0f172a); font-weight: 700; text-align: right; }

/* Programme SST : intro à gauche, frise à droite */
#odx-page .programme { background: var(--bg, #f8fafc); }
#odx-page .programme .programme-grid { max-width: none; margin: 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
#odx-page .programme-intro { position: sticky; top: 120px; }
#odx-page .programme-intro .why-text { margin-bottom: 24px; }
#odx-page .programme .timeline { gap: 18px; padding-left: 40px; }
#odx-page .programme .timeline::before { left: 13px; top: 12px; bottom: 12px; }
#odx-page .programme .timeline-item { position: relative; background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: 12px; padding: 22px 24px; box-shadow: 0 6px 20px rgba(15, 23, 42, .04); }
#odx-page .programme .timeline-dot { position: absolute; left: -40px; top: 22px; width: 28px; height: 28px; min-width: 28px; display: flex; align-items: center; justify-content: center; color: #fff; border: 3px solid var(--bg, #f8fafc); box-shadow: 0 0 0 1px var(--brand, #2563eb); }
#odx-page .programme .timeline-dot svg { width: 14px; height: 14px; }
#odx-page .programme .timeline-tag { color: var(--brand-dark, #1d4ed8); }
#odx-page .programme .timeline-body h4 { font-family: var(--heading); font-size: 17px; font-weight: 700; color: var(--dark, #0f172a); margin: 0 0 10px; line-height: 1.35; }
#odx-page .programme .timeline-body ul { display: flex; flex-direction: column; gap: 6px; }
#odx-page .programme .timeline-body li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.6; color: var(--text-secondary, #475569); }
#odx-page .programme .timeline-body li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--brand, #2563eb); }
#odx-page .deroulé .day-tag { display: inline-block; margin-top: 14px; }
@media (max-width: 1024px) {
  #odx-page .programme .programme-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  #odx-page .programme-intro { position: static; }
}
@media (max-width: 1024px) { #odx-page .sst-hero-card, #odx-page .epi-hero-card { max-width: 520px; } }
@media (max-width: 480px) { #odx-page .sst-hero-card, #odx-page .epi-hero-card { padding: 24px 20px; } }

/* ===== 4. Cartes « maquette » sombres des héros (SEO, Ads, e-mailing, réseaux sociaux) ===== */
#odx-page .hero-card .serp-header { margin-bottom: 16px; }
#odx-page .serp-search-bar { display: flex; align-items: center; gap: 10px; background: #fff; color: #1f2937; border-radius: 999px; padding: 10px 18px; font-size: 14px; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); }
#odx-page .serp-search-bar svg { width: 16px; height: 16px; color: #64748b; flex: none; }
#odx-page .hero-card .serp-result { padding: 14px 4px; border: 0; border-top: 1px solid rgba(255, 255, 255, .08); background: none; }
#odx-page .hero-card .serp-result.top { background: rgba(37, 99, 235, .16); border: 1px solid rgba(122, 162, 255, .4); border-radius: 10px; padding: 14px 16px; margin-bottom: 4px; }
#odx-page .hero-card .serp-result.top + .serp-result { border-top: 0; }
#odx-page .serp-position { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .6); margin-bottom: 4px; }
#odx-page .serp-result.top .serp-position { color: #86efac; }
#odx-page .serp-url { font-size: 12px; color: rgba(255, 255, 255, .62); }
#odx-page .hero-card .serp-title { font-size: 15px; font-weight: 600; color: #8ab4f8; line-height: 1.35; margin: 2px 0 4px; }
#odx-page .serp-snippet { font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .7); }

#odx-page .ads-dash-title, #odx-page .email-dash-title { display: flex; align-items: center; gap: 8px; font-family: var(--heading); font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 18px; }
#odx-page .ads-dash-title::before, #odx-page .email-dash-title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 4px rgba(74, 222, 128, .18); flex: none; }
#odx-page .ads-kpis, #odx-page .email-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
#odx-page .ads-kpi, #odx-page .email-kpi { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .09); border-radius: 10px; padding: 14px 16px; }
#odx-page .ads-kpi-label, #odx-page .email-kpi-label { font-size: 12px; color: rgba(255, 255, 255, .65); margin-bottom: 4px; }
#odx-page .ads-kpi-value, #odx-page .email-kpi-value { font-family: var(--heading); font-size: 24px; font-weight: 800; line-height: 1.15; color: #fff; }
#odx-page .ads-kpi-value.blue, #odx-page .email-kpi-value.blue { color: #8ab4f8; }
#odx-page .ads-kpi-value.green, #odx-page .email-kpi-value.green { color: #4ade80; }
#odx-page .email-kpi-value.yellow { color: #facc15; }
#odx-page .ads-performance { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 10px; background: linear-gradient(90deg, rgba(37, 99, 235, .28), rgba(37, 99, 235, .08)); border: 1px solid rgba(122, 162, 255, .35); }
#odx-page .ads-perf-label { font-size: 13px; color: rgba(255, 255, 255, .78); }
#odx-page .ads-perf-value { font-family: var(--heading); font-size: 20px; font-weight: 800; color: #fff; white-space: nowrap; }
#odx-page .email-bar-row { margin-top: 14px; }
#odx-page .email-bar-label { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: rgba(255, 255, 255, .72); margin-bottom: 6px; }
#odx-page .email-bar-label span:last-child { font-weight: 700; white-space: nowrap; }
#odx-page .email-bar-label span[style*="--brand"] { color: #8ab4f8 !important; }
#odx-page .email-bar-track { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .09); overflow: hidden; }
#odx-page .email-bar-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--brand, #2563eb), #60a5fa); }

#odx-page .social-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
#odx-page .social-header > div[style] { display: inline-flex; align-items: center; gap: 6px; color: #4ade80 !important; }
#odx-page .social-header > div[style]::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #4ade80; }
#odx-page .social-profile { display: flex; align-items: center; gap: 12px; }
#odx-page .social-avatar { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #2563eb, #60a5fa); color: #fff; font-family: var(--heading); font-size: 14px; font-weight: 800; flex: none; }
#odx-page .social-name { font-family: var(--heading); font-size: 15px; font-weight: 700; color: #fff; }
#odx-page .social-handle { font-size: 12px; color: rgba(255, 255, 255, .62); }
#odx-page .social-stats-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 14px 0; margin-bottom: 16px; border-top: 1px solid rgba(255, 255, 255, .09); border-bottom: 1px solid rgba(255, 255, 255, .09); }
#odx-page .social-stat-item { text-align: center; }
#odx-page .social-stat-val { font-family: var(--heading); font-size: 18px; font-weight: 800; color: #fff; }
#odx-page .social-stat-lbl { font-size: 11px; color: rgba(255, 255, 255, .62); }
#odx-page .social-post { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .09); border-radius: 10px; padding: 16px; }
#odx-page .social-post-text { font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, .85); margin-bottom: 12px; }
#odx-page .social-post-actions { display: flex; gap: 18px; }
#odx-page .social-action { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255, 255, 255, .72); }
#odx-page .social-action svg { width: 16px; height: 16px; flex: none; }

/* ===== 5. Publicité : parcours par canal ===== */
#odx-page .canaux-section { padding: 96px 0; background: var(--bg, #f8fafc); }
#odx-page .funnel-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
#odx-page .funnel-lane { background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: 12px; padding: 24px 22px; display: flex; flex-direction: column; }
#odx-page .funnel-lane-badge { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 12px; border-radius: 999px; font-family: var(--heading); font-size: 12px; font-weight: 700; }
#odx-page .funnel-lane-badge svg { width: 14px; height: 14px; flex: none; }
#odx-page .badge-google { background: #eff6ff; color: #1d4ed8; }
#odx-page .badge-meta { background: #eef2ff; color: #3730a3; }
#odx-page .badge-linkedin { background: #e0f2fe; color: #075985; }
#odx-page .badge-retargeting { background: #fef3c7; color: #92400e; }
#odx-page .funnel-lane h3 { font-family: var(--heading); font-size: 17px; font-weight: 700; color: var(--dark, #0f172a); margin: 14px 0 14px; }
#odx-page .funnel-lane .funnel-steps { display: flex; flex-direction: column; gap: 0; position: relative; }
#odx-page .funnel-lane .funnel-steps::before { left: 5px; top: 18px; bottom: 18px; opacity: .35; }
#odx-page .funnel-lane .funnel-step { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; text-align: left; color: inherit; font-family: inherit; font-weight: 400; border-radius: 0; background: none; border-bottom: 1px dashed var(--border, #e2e8f0); }
#odx-page .funnel-lane .funnel-step:last-child { border-bottom: 0; }
#odx-page .funnel-lane .funnel-step-dot { width: 12px; height: 12px; min-width: 12px; margin: 0; border-radius: 50%; background: var(--brand, #2563eb); box-shadow: 0 0 0 3px #fff; position: relative; z-index: 1; }
#odx-page .funnel-lane .funnel-step-label { font-size: 13.5px; font-weight: 500; line-height: 1.4; color: var(--text, #1e293b); }
#odx-page .funnel-lane .funnel-step-num { font-family: var(--heading); font-size: 12px; font-weight: 700; color: #1d4ed8; background: #eff6ff; border-radius: 6px; padding: 3px 8px; white-space: nowrap; }
#odx-page .funnel-lane .funnel-step:last-child .funnel-step-num { background: #dcfce7; color: #065f46; }
@media (max-width: 1100px) { #odx-page .funnel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { #odx-page .funnel-grid { grid-template-columns: minmax(0, 1fr); } #odx-page .canaux-section { padding: 64px 0; } }

/* ===== 6. Community management : plateformes ===== */
#odx-page .plateformes-section { padding: 96px 0; background: var(--bg, #f8fafc); }
#odx-page .plateformes-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
#odx-page .plateforme-card { --c: #2563eb; --ct: #1d4ed8; background: #fff; border: 1px solid var(--border, #e2e8f0); border-top: 3px solid var(--c); border-radius: 12px; padding: 28px 24px; display: flex; flex-direction: column; gap: 8px; transition: box-shadow .3s ease, transform .3s ease; }
#odx-page .plateforme-card:hover { box-shadow: 0 16px 40px rgba(15, 23, 42, .08); transform: translateY(-2px); }
#odx-page .card-facebook { --c: #1877f2; --ct: #1559b8; }
#odx-page .card-instagram { --c: #e1306c; --ct: #b4235a; }
#odx-page .card-linkedin { --c: #0a66c2; --ct: #0a5aa8; }
#odx-page .card-tiktok { --c: #111827; --ct: #111827; }
#odx-page .plateforme-icon { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; background: #f1f5f9; color: var(--c); }
#odx-page .icon-facebook { background: #e7f0fe; }
#odx-page .icon-instagram { background: #fde7ef; }
#odx-page .icon-linkedin { background: #e5f0fa; }
#odx-page .plateforme-icon svg { width: 22px; height: 22px; }
#odx-page .plateforme-card h3 { font-family: var(--heading); font-size: 19px; font-weight: 800; color: var(--dark, #0f172a); margin: 0; }
#odx-page .plateforme-tagline { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ct); }
#odx-page .plateforme-desc { font-size: 14px; line-height: 1.65; color: var(--text-secondary, #475569); flex: 1; }
#odx-page .plateforme-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
@media (max-width: 1100px) { #odx-page .plateformes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { #odx-page .plateformes-grid { grid-template-columns: minmax(0, 1fr); } #odx-page .plateformes-section { padding: 64px 0; } }

/* ===== 7. E-mailing : parcours en 4 e-mails ===== */
#odx-page .parcours-section { padding: 96px 0; background: var(--white, #fff); }
#odx-page .journey-wrapper { position: relative; margin-top: 8px; }
#odx-page .journey-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; position: relative; }
#odx-page .journey-track::before { content: ""; position: absolute; top: 28px; left: 12.5%; right: 12.5%; height: 2px; background: linear-gradient(90deg, var(--brand, #2563eb), #93c5fd); }
#odx-page .journey-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
#odx-page .journey-icon-wrap { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; border: 2px solid var(--brand, #2563eb); color: var(--brand, #2563eb); box-shadow: 0 0 0 6px var(--white, #fff); }
#odx-page .journey-icon-wrap svg { width: 24px; height: 24px; }
#odx-page .journey-step-num { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--brand, #2563eb); color: #fff; font-family: var(--heading); font-size: 11px; font-weight: 800; }
#odx-page .journey-label { font-family: var(--heading); font-size: 17px; font-weight: 800; color: var(--dark, #0f172a); margin-top: 16px; }
#odx-page .journey-sublabel { font-size: 13.5px; line-height: 1.55; color: var(--text-secondary, #475569); margin: 6px 0 16px; }
#odx-page .journey-email-preview { width: 100%; margin-top: auto; text-align: left; background: var(--bg, #f8fafc); border: 1px solid var(--border, #e2e8f0); border-radius: 10px; padding: 14px 16px; }
#odx-page .journey-email-subject { font-size: 13.5px; font-weight: 700; color: var(--dark, #0f172a); margin-bottom: 4px; }
#odx-page .journey-email-preview-text { font-size: 12.5px; line-height: 1.5; color: var(--text-secondary, #475569); margin-bottom: 10px; }
#odx-page .journey-email-kpi { display: flex; flex-wrap: wrap; gap: 6px; }
#odx-page .journey-email-kpi span { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; background: #eff6ff; color: #1d4ed8; }
#odx-page .journey-email-kpi span + span { background: #ecfdf5; color: #047857; }
@media (max-width: 900px) { #odx-page .journey-track { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; } #odx-page .journey-track::before { display: none; } }
@media (max-width: 560px) { #odx-page .journey-track { grid-template-columns: minmax(0, 1fr); } #odx-page .parcours-section { padding: 64px 0; } }

/* ===== 8. Marketing automation : étapes + tableau de bord ===== */
#odx-page section.funnel:has(.funnel-layout) { display: block; max-width: none; margin: 0; padding: 96px 0; background: var(--white, #fff); }
#odx-page .funnel-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 56px; align-items: start; }
#odx-page .funnel-layout .funnel-steps { gap: 0; }
#odx-page .funnel-layout .funnel-steps::before { display: none; }
#odx-page .funnel-layout .funnel-step { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 20px; padding: 0; text-align: left; color: inherit; font-family: inherit; font-weight: 400; border-radius: 0; background: none; }
#odx-page .funnel-step-left { display: flex; flex-direction: column; align-items: center; }
#odx-page .funnel-step-circle { width: 44px; height: 44px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--brand, #2563eb); color: #fff; font-family: var(--heading); font-size: 16px; font-weight: 800; box-shadow: 0 6px 16px rgba(37, 99, 235, .25); }
#odx-page .funnel-step-line { flex: 1; width: 2px; min-height: 24px; margin: 6px 0; background: linear-gradient(var(--brand, #2563eb), rgba(37, 99, 235, .15)); }
#odx-page .funnel-layout .funnel-step:last-child .funnel-step-line { display: none; }
#odx-page .funnel-step-body { padding-bottom: 36px; text-align: left; }
#odx-page .funnel-step-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #1d4ed8; background: #eff6ff; padding: 4px 10px; border-radius: 6px; margin-bottom: 10px; }
#odx-page .funnel-step-body h3 { font-family: var(--heading); font-size: 20px; font-weight: 800; color: var(--dark, #0f172a); margin-bottom: 8px; }
#odx-page .funnel-step-body p { font-size: 15px; line-height: 1.7; color: var(--text-secondary, #475569); margin-bottom: 14px; }
#odx-page .funnel-step-details { display: flex; flex-wrap: wrap; gap: 8px; }
#odx-page .funnel-visual { position: sticky; top: 120px; }
#odx-page .funnel-visual-card { background: var(--dark, #0f172a); color: #fff; border-radius: 14px; padding: 28px; box-shadow: 0 24px 60px rgba(15, 23, 42, .18); }
#odx-page .funnel-visual-title { font-family: var(--heading); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .78); margin-bottom: 20px; }
#odx-page .funnel-bar-item { margin-bottom: 16px; }
#odx-page .funnel-bar-label { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
#odx-page .funnel-bar-name { font-size: 13.5px; color: rgba(255, 255, 255, .8); }
#odx-page .funnel-bar-val { font-family: var(--heading); font-size: 14px; font-weight: 800; color: #4ade80; }
#odx-page .funnel-bar-track { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .09); overflow: hidden; }
#odx-page .funnel-bar-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--brand, #2563eb), #60a5fa); }
#odx-page .funnel-cta-box { margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .09); }
#odx-page .funnel-cta-box .btn { width: 100%; justify-content: center; }
@media (max-width: 1024px) { #odx-page .funnel-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; } #odx-page .funnel-visual { position: static; } }

/* ===== 9. Méthodes en 4 étapes (VoIP, hébergement web…) ===== */
#odx-page .process-steps:has(> .process-step > .process-step-duration) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; max-width: none; margin: 0; }
#odx-page .process-steps:has(> .process-step > .process-step-duration)::before { display: none; }
#odx-page .process-step:has(> .process-step-duration) { display: flex; flex-direction: column; align-items: flex-start; gap: 0; background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: 12px; padding: 28px 24px; }
#odx-page .process-step:has(> .process-step-duration) .process-step-num { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--brand, #2563eb); color: #fff; font-family: var(--heading); font-size: 14px; font-weight: 800; position: static; }
#odx-page .process-step-icon { width: 48px; height: 48px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #eff6ff; color: var(--brand, #2563eb); margin: 16px 0; }
#odx-page .process-step-icon svg { width: 24px; height: 24px; }
#odx-page .process-step:has(> .process-step-duration) h3 { font-family: var(--heading); font-size: 17px; font-weight: 700; color: var(--dark, #0f172a); margin-bottom: 8px; }
#odx-page .process-step:has(> .process-step-duration) p { font-size: 14px; line-height: 1.6; color: var(--text-secondary, #475569); margin-bottom: 16px; }
#odx-page .process-step-duration { margin-top: auto; display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 6px; background: var(--bg, #f8fafc); border: 1px solid var(--border, #e2e8f0); font-size: 12px; font-weight: 700; color: #1d4ed8; }
@media (max-width: 1024px) { #odx-page .process-steps:has(> .process-step > .process-step-duration) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { #odx-page .process-steps:has(> .process-step > .process-step-duration) { grid-template-columns: minmax(0, 1fr); } }

/* ===== 10. Blocs visuels des sections « pourquoi » (cartes blanches) ===== */
/* Site vitrine : étapes numérotées */
#odx-page .steps-visual { display: flex; flex-direction: column; gap: 14px; }
#odx-page .step-block { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: 12px; padding: 20px 22px; box-shadow: 0 6px 20px rgba(15, 23, 42, .04); }
#odx-page .step-block .step-num { flex: none; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--brand, #2563eb); color: #fff; font-family: var(--heading); font-size: 15px; font-weight: 800; }
#odx-page .step-body h4 { font-family: var(--heading); font-size: 16px; font-weight: 700; color: var(--dark, #0f172a); margin-bottom: 4px; }
#odx-page .step-body p { font-size: 14px; line-height: 1.6; color: var(--text-secondary, #475569); }
/* E-commerce : 8 fonctionnalités en 2 colonnes */
#odx-page .features-grid-4x2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#odx-page .features-grid-4x2 .feat-tile p { color: var(--text-secondary, #475569); }
@media (max-width: 480px) { #odx-page .features-grid-4x2 { grid-template-columns: minmax(0, 1fr); } }
/* Intranet : tableau sans / avec */
#odx-page div.comparison-table { background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: 12px; overflow: hidden; box-shadow: 0 6px 20px rgba(15, 23, 42, .04); }
#odx-page .comp-header, #odx-page .comp-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
#odx-page .comp-col-header { display: flex; align-items: center; gap: 8px; padding: 14px 18px; font-family: var(--heading); font-size: 14px; font-weight: 700; }
#odx-page .comp-col-header svg { width: 18px; height: 18px; flex: none; }
#odx-page .comp-col-header.without { background: #fef2f2; color: #991b1b; }
#odx-page .comp-col-header.with { background: #eff6ff; color: #1d4ed8; }
#odx-page .comp-row { border-top: 1px solid var(--border, #e2e8f0); }
#odx-page .comp-row > .comp-cell { display: flex; gap: 10px; align-items: flex-start; padding: 14px 18px; font-size: 14px; line-height: 1.5; }
#odx-page .comp-row > .comp-cell.without { color: var(--text-secondary, #475569); background: #fff; }
#odx-page .comp-row > .comp-cell.with { color: var(--dark, #0f172a); background: #f8fbff; border-left: 1px solid var(--border, #e2e8f0); }
#odx-page .comp-row .comp-dot { flex: none; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
#odx-page .comp-row .without .comp-dot { background: #fee2e2; color: #dc2626; }
#odx-page .comp-row .with .comp-dot { background: #dcfce7; color: #15803d; }
#odx-page .comp-row .comp-dot svg { width: 11px; height: 11px; }
/* Refonte : avant / après */
#odx-page .before-after-card { background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: 14px; padding: 24px; box-shadow: 0 16px 48px rgba(15, 23, 42, .08); color: var(--text, #1e293b); }
#odx-page .before-after-card .ba-header { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; margin: 0 0 8px; padding: 0; background: none; }
#odx-page .ba-col-label { text-align: center; padding: 8px; border-radius: 8px; font-family: var(--heading); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
#odx-page .ba-col-label.before { background: #fef2f2; color: #b91c1c; }
#odx-page .ba-col-label.after { background: #ecfdf5; color: #047857; }
#odx-page .ba-vs { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--bg, #f8fafc); border: 1px solid var(--border, #e2e8f0); font-family: var(--heading); font-size: 11px; font-weight: 800; color: var(--text-secondary, #475569); }
#odx-page .ba-full-row { padding: 16px 0 4px; border-top: 1px solid var(--border, #e2e8f0); margin-top: 8px; }
#odx-page .ba-label-row { text-align: center; font-size: 13px; font-weight: 600; color: var(--text-secondary, #475569); margin-bottom: 6px; }
#odx-page .ba-metric-block { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; }
#odx-page .before-after-card .ba-value { text-align: center; font-family: var(--heading); font-size: 26px; font-weight: 800; line-height: 1.2; }
#odx-page .before-after-card .ba-value.bad { color: #b91c1c; }
#odx-page .before-after-card .ba-value.good { color: #047857; }
#odx-page .before-after-card .ba-arrow { display: flex; align-items: center; justify-content: center; width: 34px; color: var(--muted, #64748b); }
#odx-page .before-after-card .ba-arrow svg { width: 18px; height: 18px; }
/* Support : comparatif 3 colonnes */
#odx-page .compare-card { background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: 12px; overflow: hidden; box-shadow: 0 16px 48px rgba(15, 23, 42, .06); }
#odx-page .compare-header, #odx-page .compare-card .compare-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.15fr); gap: 0; padding: 0; margin: 0; }
#odx-page .compare-header { background: var(--dark, #0f172a); }
#odx-page .compare-header-cell { padding: 14px 16px; font-family: var(--heading); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
#odx-page .compare-header-cell.col-bad { color: #fecaca; }
#odx-page .compare-header-cell.col-good { color: #bbf7d0; }
#odx-page .compare-card .compare-row { border-top: 1px solid var(--border, #e2e8f0); }
#odx-page .compare-card .compare-cell { display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-size: 14px; line-height: 1.45; }
#odx-page .compare-card .compare-cell svg { width: 16px; height: 16px; flex: none; }
#odx-page .compare-card .compare-cell.col-label { font-weight: 700; color: var(--dark, #0f172a); background: var(--bg, #f8fafc); }
#odx-page .compare-card .compare-cell.col-bad { color: #b91c1c; }
#odx-page .compare-card .compare-cell.col-good { color: #047857; font-weight: 600; }
/* Supervision : indicateurs */
#odx-page .features-grid-card { background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: 14px; padding: 28px; box-shadow: 0 16px 48px rgba(15, 23, 42, .06); }
#odx-page .features-grid-title { font-family: var(--heading); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #1d4ed8; margin-bottom: 20px; }
#odx-page .features-icon-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
#odx-page .features-icon-grid .feat-icon-item { display: flex; gap: 12px; align-items: flex-start; }
#odx-page .features-icon-grid h5 { font-family: var(--heading); font-size: 14px; font-weight: 700; color: var(--dark, #0f172a); margin-bottom: 2px; }
#odx-page .features-icon-grid p { font-size: 13px; line-height: 1.5; color: var(--text-secondary, #475569); }
@media (max-width: 480px) { #odx-page .features-icon-grid { grid-template-columns: minmax(0, 1fr); } }
/* Déploiement : étapes verticales dans une carte */
#odx-page .process-card { background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: 14px; padding: 28px; box-shadow: 0 16px 48px rgba(15, 23, 42, .06); }
#odx-page .process-card .process-steps { max-width: none; margin: 0; gap: 0; }
#odx-page .process-card .process-steps::before { display: none; }
#odx-page .process-card .process-step { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; align-items: stretch; }
#odx-page .process-step-left { display: flex; flex-direction: column; align-items: center; }
#odx-page .process-card .process-step-number { width: 40px; height: 40px; min-width: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--brand, #2563eb); color: #fff; font-family: var(--heading); font-size: 15px; font-weight: 800; margin: 0; position: static; }
#odx-page .process-step-line { flex: 1; width: 2px; min-height: 16px; margin: 6px 0; background: linear-gradient(var(--brand, #2563eb), rgba(37, 99, 235, .15)); }
#odx-page .process-card .process-step:last-child .process-step-line { display: none; }
#odx-page .process-card .process-step-content { padding-bottom: 22px; }
#odx-page .process-card .process-step:last-child .process-step-content { padding-bottom: 0; }
#odx-page .process-step-tag { color: #1d4ed8; }
#odx-page .process-step-title { font-family: var(--heading); font-size: 16px; font-weight: 700; color: var(--dark, #0f172a); margin: 4px 0; }
#odx-page .process-step-desc { font-size: 14px; line-height: 1.6; color: var(--text-secondary, #475569); }

/* ===== 11. Comparatifs en colonnes (VPS, continuité) et tableau M365 / Google ===== */
#odx-page .comparison-col { background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: 12px; overflow: hidden; }
#odx-page .comparison-col-header { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--border, #e2e8f0); background: var(--bg, #f8fafc); color: var(--dark, #0f172a); }
#odx-page .comparison-col--without .comparison-col-header, #odx-page .comparison-col:first-child .comparison-col-header { background: #fef2f2; color: #991b1b; }
#odx-page .comparison-col--with .comparison-col-header, #odx-page .comparison-col:last-child:not(:first-child) .comparison-col-header { background: #eff6ff; color: #1d4ed8; }
#odx-page .comparison-col-header svg { width: 20px; height: 20px; flex: none; }
#odx-page .comparison-col-title { flex: 1; font-family: var(--heading); font-size: 16px; font-weight: 800; color: inherit; }
#odx-page .comparison-col-badge { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; background: #fff; border: 1px solid currentColor; color: inherit; }
#odx-page .comparison-col-body { padding: 6px 8px; }
#odx-page .comparison-col-body .comparison-row-desc { color: var(--text-secondary, #475569); }
#odx-page .comparison-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: 12px; }
#odx-page table.comparison-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 14px; margin: 0; }
#odx-page table.comparison-table th { background: var(--dark, #0f172a); color: #fff; text-align: left; padding: 14px 18px; font-family: var(--heading); font-size: 14px; font-weight: 700; }
#odx-page table.comparison-table th.col-m365 { box-shadow: inset 0 -3px 0 #3b82f6; }
#odx-page table.comparison-table th.col-gws { box-shadow: inset 0 -3px 0 #22c55e; }
#odx-page table.comparison-table td { padding: 14px 18px; border-top: 1px solid var(--border, #e2e8f0); vertical-align: top; line-height: 1.55; color: var(--text-secondary, #475569); background: #fff; }
#odx-page table.comparison-table td:first-child { font-weight: 700; color: var(--dark, #0f172a); background: var(--bg, #f8fafc); white-space: nowrap; }
#odx-page table.comparison-table .badge-winner { display: inline-flex; margin: 6px 0 0; }
#odx-page .comparison-note { font-size: 13px; color: var(--text-secondary, #475569); margin-top: 14px; }

/* ===== 12. Audit : étapes + contenu du rapport ===== */
#odx-page .process-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 56px; align-items: start; }
#odx-page .process-layout .process-steps { margin: 0; max-width: none; }
#odx-page .process-visual { background: var(--dark, #0f172a); color: #fff; border-radius: 14px; padding: 28px; box-shadow: 0 24px 60px rgba(15, 23, 42, .18); position: sticky; top: 120px; }
#odx-page .process-visual-title { font-family: var(--heading); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .8); margin-bottom: 18px; }
#odx-page .process-visual .process-deliverable { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .08); }
#odx-page .process-visual .process-deliverable-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #60a5fa; margin-top: 7px; }
#odx-page .process-visual h5 { font-family: var(--heading); font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 2px; }
#odx-page .process-visual p { font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, .72); }
@media (max-width: 1024px) { #odx-page .process-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; } #odx-page .process-visual { position: static; } }

/* ===== 13. RGPD : 4 étapes en cartes ===== */
#odx-page .steps-section { padding: 96px 0; background: var(--bg, #f8fafc); }
#odx-page .steps-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
#odx-page .step-item { background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: 12px; padding: 28px 24px; display: flex; flex-direction: column; }
#odx-page .step-item .step-number { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--brand, #2563eb); color: #fff; font-family: var(--heading); font-size: 16px; font-weight: 800; }
#odx-page .step-item h4 { font-family: var(--heading); font-size: 18px; font-weight: 800; color: var(--dark, #0f172a); margin: 16px 0 8px; }
#odx-page .step-item > p { font-size: 14px; line-height: 1.6; color: var(--text-secondary, #475569); }
#odx-page .step-item-detail { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--border, #e2e8f0); }
#odx-page .step-item-detail li { position: relative; padding-left: 22px; margin-bottom: 6px; font-size: 13.5px; line-height: 1.5; color: var(--text, #1e293b); }
#odx-page .step-item-detail li::before { content: ""; position: absolute; left: 2px; top: .35em; width: 11px; height: 6px; border-left: 2px solid var(--brand, #2563eb); border-bottom: 2px solid var(--brand, #2563eb); transform: rotate(-45deg); }
@media (max-width: 1024px) { #odx-page .steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { #odx-page .steps-grid { grid-template-columns: minmax(0, 1fr); } #odx-page .steps-section { padding: 64px 0; } }

/* ===== 14. Pages catégories : tableau de bord IT, carte GPS, avant / après, magasins d'applications ===== */
#odx-page .dashboard-card { width: 100%; max-width: 420px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; padding: 22px; backdrop-filter: blur(12px); box-shadow: 0 24px 60px rgba(2, 6, 23, .35); }
#odx-page .dashboard-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
#odx-page .dashboard-title { font-family: var(--heading); font-size: 15px; font-weight: 700; color: #fff; }
#odx-page .dashboard-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #4ade80; }
#odx-page .dashboard-live-dot, #odx-page .gps-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 rgba(74, 222, 128, .6); animation: odxPouls 2s infinite; }
#odx-page .dashboard-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; padding: 12px 14px; border-radius: 10px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); }
#odx-page .dashboard-row-left { display: flex; align-items: center; gap: 12px; }
#odx-page .dashboard-row-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: rgba(60, 114, 252, .16); color: #8ab4f8; }
#odx-page .dashboard-row-icon svg { width: 18px; height: 18px; }
#odx-page .dashboard-row-label { font-size: 14px; font-weight: 600; color: #fff; }
#odx-page .status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
#odx-page .status-ok { background: rgba(74, 222, 128, .14); color: #4ade80; }
#odx-page .status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
@keyframes odxPouls { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .55); } 70% { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } }
@keyframes odxOnde { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.2); opacity: 0; } }

#odx-page .gps-map-mockup { width: 100%; max-width: 460px; background: #0b1220; border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px rgba(2, 6, 23, .4); }
#odx-page .gps-map-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
#odx-page .gps-map-title { font-family: var(--heading); font-size: 14px; font-weight: 700; color: #fff; }
#odx-page .gps-live-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(74, 222, 128, .12); color: #4ade80; font-size: 11px; font-weight: 700; letter-spacing: .08em; }
#odx-page .gps-map-canvas { position: relative; height: 260px; overflow: hidden; background-color: #101b30; background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 28px 28px; }
#odx-page .gps-road { position: absolute; background: rgba(148, 163, 184, .2); border-radius: 4px; }
#odx-page .gps-road-h1 { left: 0; right: 0; top: 32%; height: 8px; }
#odx-page .gps-road-h2 { left: 0; right: 0; top: 72%; height: 6px; }
#odx-page .gps-road-v1 { top: 0; bottom: 0; left: 28%; width: 8px; }
#odx-page .gps-road-v2 { top: 0; bottom: 0; left: 70%; width: 6px; }
#odx-page .gps-route { position: absolute; left: calc(28% + 2px); top: calc(32% + 2px); width: 42%; height: 40%; border-top: 3px solid #3c72fc; border-right: 3px solid #3c72fc; border-top-right-radius: 12px; filter: drop-shadow(0 0 6px rgba(60, 114, 252, .7)); }
#odx-page .gps-pin { position: absolute; width: 14px; height: 14px; transform: translate(-50%, -50%); z-index: 2; }
#odx-page .gps-pin-dot { position: absolute; inset: 0; border-radius: 50%; background: #3c72fc; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
#odx-page .gps-pin-ring { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(60, 114, 252, .7); animation: odxOnde 2.4s ease-out infinite; }
#odx-page .gps-pin-ring-2 { animation-delay: 1.2s; }
#odx-page .gps-pin.alert .gps-pin-dot { background: #f59e0b; }
#odx-page .gps-pin.alert .gps-pin-ring { border-color: rgba(245, 158, 11, .75); }
#odx-page .gps-pin.stopped .gps-pin-dot { background: #94a3b8; }
#odx-page .gps-pin-a { left: calc(28% + 6px); top: calc(32% + 4px); }
#odx-page .gps-pin-b { left: 52%; top: calc(32% + 4px); }
#odx-page .gps-pin-c { left: calc(70% + 3px); top: 55%; }
#odx-page .gps-pin-d { left: 14%; top: calc(72% + 3px); }
#odx-page .gps-pin-e { left: 87%; top: calc(72% + 3px); }
#odx-page .gps-tooltip { position: absolute; left: 52%; top: calc(32% + 4px); transform: translate(-50%, calc(-100% - 16px)); z-index: 3; background: #fff; color: #0f172a; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 8px; white-space: nowrap; box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
#odx-page .gps-tooltip::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: #fff; transform: translateX(-50%) rotate(45deg); }
#odx-page .gps-tooltip-speed { color: #1d4ed8; }
#odx-page .gps-map-footer { border-top: 1px solid rgba(255, 255, 255, .08); }
@media (prefers-reduced-motion: reduce) { #odx-page .gps-pin-ring, #odx-page .dashboard-live-dot, #odx-page .gps-live-dot { animation: none; } }

#odx-page .store-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
#odx-page .store-badge { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 10px; background: #000; color: #fff; border: 1px solid rgba(255, 255, 255, .25); text-decoration: none; transition: border-color .2s ease; }
#odx-page .store-badge:hover { border-color: rgba(255, 255, 255, .6); }
#odx-page .store-badge svg { width: 24px; height: 24px; flex: none; }
#odx-page .store-badge-text { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
#odx-page .store-badge-sub { font-size: 11px; color: rgba(255, 255, 255, .78); }
#odx-page .store-badge-name { font-family: var(--heading); font-size: 16px; font-weight: 700; color: #fff; }

#odx-page .hero-card .transform-card-header { font-family: var(--heading); font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 14px; }
#odx-page .hero-card .transform-label.label-avant { color: #b91c1c; }
#odx-page .hero-card .transform-label.label-apres { color: #047857; }
#odx-page .hero-card .transform-badge, #odx-page .hero-card .transform-badge * { color: rgba(255, 255, 255, .8); }
#odx-page .hero-card:has(.transform-states) { max-width: 520px; }
#odx-page .hero-card .transform-item { font-size: 12.5px; line-height: 1.45; }
/* Digital & Web : étapes en frise verticale, pastilles visibles sous le texte */
#odx-page .steps-list:has(.step-row) { max-width: 860px; }
#odx-page .step-row { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "c t" "c v"; column-gap: 28px; row-gap: 4px; align-items: start; }
#odx-page .step-row .step-center { grid-area: c; }
#odx-page .step-row .step-content { grid-area: t; padding-top: 4px; }
#odx-page .step-row .step-visual { grid-area: v; display: block; }
#odx-page .step-row .step-pill-list { margin-top: 4px; }
#odx-page .step-tag { color: #1d4ed8; }
@media (max-width: 768px) { #odx-page .step-row { grid-template-columns: 42px minmax(0, 1fr); column-gap: 16px; } }

/* Infogérance / hébergement cloud : le SVG « moniteur » s'adapte à sa colonne */
#odx-page .hero-visual > svg, #odx-page .hero-visual svg[viewBox][width="520"], #odx-page .hero-visual svg[viewBox][width="480"] { width: 100%; max-width: 520px; height: auto; }

/* ===== 15. Petits contrastes ===== */
#odx-page .hero .hero-kicker, #odx-page .cta-final .section-kicker { color: #7ea2ff; }
#odx-page .cta-final .section-kicker::before, #odx-page .hero .hero-kicker::before { background: #7ea2ff; }
.odyx-ia p { color: inherit; }
.odyx-ia .hero .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .35); }
.odyx-ia .hero .btn--ghost:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, .06); }

/* ===== 16. Mobile : rien ne dépasse de l'écran ===== */
#odx-page img, #odx-page svg, #odx-page video, #odx-page iframe { max-width: 100%; }
@media (max-width: 768px) {
  #odx-page .hero .container > *, #odx-page .why-grid > *, #odx-page .faq-grid > * { min-width: 0; }
  #odx-page table:not(.comparison-table) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #odx-page .comp-row > .comp-cell, #odx-page .comp-col-header { padding: 12px; font-size: 13px; }
  #odx-page .compare-card .compare-cell, #odx-page .compare-header-cell { padding: 10px; font-size: 12.5px; }
}

/* ===== 17. Textes gris du thème (#787878 = 4,4:1) et styles en ligne trop pâles ===== */
p { color: #666b73; }
#odx-page .day-duration { color: #1d4ed8; }
#odx-page [style*="background:#1e293b"] [style*="color:#64748b"], #odx-page [style*="background:#0f172a"] [style*="color:#64748b"],
#odx-page [style*="background: #1e293b"] [style*="color: #64748b"], #odx-page [style*="background: #0f172a"] [style*="color: #64748b"] { color: #94a3b8 !important; }
.postid-3190 #odx-page [style*="color: #94a3b8"] { color: #64748b !important; }
#odx-privacy table, #ohc .ohc-table-wrap { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ohc-disclaimer, .ovc-disclaimer { color: #5b6472 !important; }
@media (max-width: 680px) {
  #odx-page [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  #odx-page [style*="padding: 40px"], #odx-page [style*="padding:40px"] { padding: 24px !important; }
}

/* ===== 18. Accueil et pages classiques sur mobile ===== */
@media (max-width: 900px) {
  [style*="grid-template-columns:repeat(4,1fr)"], [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 480px) {
  [style*="grid-template-columns:repeat(4,1fr)"], [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"], [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: minmax(0, 1fr) !important; }
}
.banner-section { overflow: hidden; }
@media (max-width: 768px) {
  .page-content h1, .breadcrumb__title { overflow-wrap: break-word; }
  .page-content h1 { font-size: clamp(28px, 8vw, 40px); line-height: 1.15; }
  #odx-page h1, #odx-page h2, #odx-page h3 { overflow-wrap: break-word; }
}

/* VPS / continuité : lignes icône + texte dans les colonnes */
#odx-page .comparison-col .comparison-row { grid-template-columns: 36px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 12px; border: 0; border-bottom: 1px solid var(--border, #e2e8f0); border-radius: 0; background: none; box-shadow: none; }
#odx-page .comparison-col .comparison-row:last-child { border-bottom: 0; }
#odx-page .comparison-col .comparison-row-icon svg { width: 18px; height: 18px; }
#odx-page .comparison-col--without .comparison-row-icon, #odx-page .comparison-col:first-child .comparison-row-icon { background: #fef2f2; color: #dc2626; }
#odx-page .comparison-col--with .comparison-row-icon, #odx-page .comparison-col:last-child:not(:first-child) .comparison-row-icon { background: #ecfdf5; color: #15803d; }
#odx-page .comparison-col .comparison-row-label { font-weight: 700; color: var(--dark, #0f172a); }
/* Protection cyber 360 : 8 capacités en grille */
#odx-page .icon-features { padding: 96px 0; background: var(--bg, #f8fafc); }
#odx-page .icon-features-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
#odx-page .icon-features-grid .icon-feat-card { display: flex; flex-direction: column; gap: 10px; padding: 28px 24px !important; background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: 12px; }
#odx-page .icon-feat-badge:has(> svg:only-child) { position: static !important; width: 48px !important; height: 48px !important; padding: 0 !important; border-radius: 10px !important; background: #eff6ff !important; color: var(--brand, #2563eb) !important; margin-bottom: 6px; }
#odx-page .icon-feat-badge:has(> svg:only-child) svg { width: 24px; height: 24px; }
#odx-page .icon-features-grid h4 { font-family: var(--heading); font-size: 16px; font-weight: 700; color: var(--dark, #0f172a); margin: 0; }
#odx-page .icon-features-grid p { font-family: var(--body, 'DM Sans', sans-serif); font-size: 14px; line-height: 1.6; color: var(--text-secondary, #475569); }
@media (max-width: 1024px) { #odx-page .icon-features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { #odx-page .icon-features-grid { grid-template-columns: minmax(0, 1fr); } #odx-page .icon-features { padding: 64px 0; } }
/* La feuille icomoon du thème applique sa police d'icônes à toute classe contenant « icon- » (icon-features, icon-feat-card…) */
#odx-page [class^="icon-"]:not(i), #odx-page [class*=" icon-"]:not(i) { font-family: var(--body, 'DM Sans', sans-serif); }

/* Section entière marquée « reveal » (CTA de fin) : jamais révélée par le script, on l'affiche */
#odx-page section.reveal, body > section.cta-final.reveal { opacity: 1; transform: none; }
/* Pastilles et chiffres en ligne trop clairs */
.postid-3190 #odx-page [style*="color: #22c55e"] { color: #15803d !important; }
[style*="background:#10b981"][style*="color:#fff"] { background: #047857 !important; }
#odx-page .financement-grid [style*="22c55e"] { color: #15803d !important; }
/* Mentions légales : titre blanc sur fond blanc, libellés trop pâles sur cartes sombres */
body .ml-container > h1 { color: #0f172a; }
body .ml-container .ml-label { color: #94a3b8; }
/* CTA de fin sorti de #odx-page (HTML de la page mal fermé) : on lui redonne les variables de la page */
body > section.cta-final { --dark: #0f172a; --white: #fff; --brand: #2563eb; --brand-dark: #1d4ed8; --muted: #64748b; --heading: 'Plus Jakarta Sans', sans-serif; --body: 'DM Sans', sans-serif; background: #0f172a; color: #fff; font-family: var(--body); }
body > section.cta-final p[style*="color:#64748b"] { color: #b6c2d4 !important; }
body > section.cta-final .section-title { color: #fff; }
[style*="background:#10b98111"][style*="color:#10b981"] { color: #047857 !important; }
#odx-page .step-number-ring .step-number { color: #1d4ed8; }