/* Page « Fiabilité et méthodologie de la carte 3D » (acheteur), token-driven (--vefa-*). */
.m3dm { background: var(--vefa-bg, #fff); color: var(--vefa-text, #0f172a); }
.m3dm-container { max-width: 860px; margin: 0 auto; padding: 0 1.25rem; }

/* Hero */
.m3dm-hero {
    background: var(--vefa-gradient-hero, linear-gradient(135deg, #eff6ff 0%, #ffffff 55%, #fff7ed 100%));
    border-bottom: 1px solid var(--vefa-border, #e2e8f0);
    padding: 3rem 0 2.5rem;
}
.m3dm-overline {
    font-size: var(--vefa-fs-sm, 0.875rem); font-weight: var(--vefa-fw-bold, 700);
    letter-spacing: var(--vefa-tracking-wide, 0.05em); text-transform: uppercase;
    color: var(--vefa-primary, #3498db); margin: 0 0 0.6rem;
}
.m3dm-overline i { margin-right: 0.35rem; }
.m3dm-title {
    font-size: var(--vefa-fs-4xl, clamp(2.25rem, 3vw + 1.5rem, 3rem));
    font-weight: var(--vefa-fw-extrabold, 800); margin: 0 0 0.9rem; color: var(--vefa-text, #0f172a);
}
.m3dm-lead {
    max-width: 760px; font-size: var(--vefa-fs-lg, 1.125rem); line-height: var(--vefa-lh-relaxed, 1.7);
    color: var(--vefa-text-muted, #475569); margin: 0;
}

.m3dm-h2 {
    font-size: var(--vefa-fs-2xl, clamp(1.5rem, 1vw + 1.3rem, 1.75rem));
    font-weight: var(--vefa-fw-bold, 700); margin: 0 0 0.6rem; color: var(--vefa-text, #0f172a);
}

/* Sections */
.m3dm-section {
    display: flex; align-items: flex-start; gap: 1.1rem;
    padding: 2rem 1.25rem; border-bottom: 1px solid var(--vefa-border-subtle, #f1f5f9);
}
.m3dm-section__icon {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: var(--vefa-radius-lg, 16px);
    background: var(--vefa-primary-soft, rgba(52, 152, 219, 0.08)); color: var(--vefa-primary, #3498db);
    font-size: var(--vefa-fs-lg, 1.125rem);
}
.m3dm-section__body { flex: 1 1 auto; min-width: 0; }
.m3dm-section__body p {
    font-size: var(--vefa-fs-base, 1rem); line-height: var(--vefa-lh-relaxed, 1.7);
    color: var(--vefa-text-muted, #475569); margin: 0;
}

/* Encadré final */
.m3dm-callout {
    display: flex; align-items: flex-start; gap: 1.1rem;
    margin: 2.5rem 0 3.5rem; padding: 1.6rem 1.6rem;
    background: var(--vefa-bg-soft, #f8fafc);
    border: 1px solid var(--vefa-border, #e2e8f0);
    border-left: 4px solid var(--vefa-accent, #ff4000);
    border-radius: var(--vefa-radius-lg, 16px);
    box-shadow: var(--vefa-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06));
}
.m3dm-callout__icon {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: var(--vefa-radius-md, 10px);
    background: var(--vefa-accent-soft, rgba(255, 64, 0, 0.08)); color: var(--vefa-accent, #ff4000);
    font-size: var(--vefa-fs-base, 1rem);
}
.m3dm-callout__body { flex: 1 1 auto; min-width: 0; }
.m3dm-callout__title {
    font-size: var(--vefa-fs-xl, clamp(1.25rem, 0.5vw + 1.15rem, 1.375rem));
    font-weight: var(--vefa-fw-bold, 700); margin: 0 0 0.5rem; color: var(--vefa-text, #0f172a);
}
.m3dm-callout__body p {
    font-size: var(--vefa-fs-base, 1rem); line-height: var(--vefa-lh-relaxed, 1.7);
    color: var(--vefa-text-muted, #475569); margin: 0 0 1.2rem;
}
.m3dm-callout__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.m3dm-callout__btn {
    display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.3rem;
    background: var(--vefa-bg, #fff); color: var(--vefa-text, #0f172a);
    border: 1px solid var(--vefa-border-strong, #cbd5e1);
    font-weight: var(--vefa-fw-semibold, 600); font-size: var(--vefa-fs-sm, 0.875rem);
    text-decoration: none; border-radius: var(--vefa-radius-pill, 999px);
    transition: background var(--vefa-duration-base, 250ms) var(--vefa-ease, ease),
                transform var(--vefa-duration-base, 250ms) var(--vefa-ease, ease);
}
.m3dm-callout__btn:hover { background: var(--vefa-bg-muted, #f1f5f9); transform: translateY(-1px); color: var(--vefa-text, #0f172a); }
.m3dm-callout__btn--primary {
    background: var(--vefa-accent, #ff4000); color: var(--vefa-text-on-primary, #fff);
    border-color: var(--vefa-accent, #ff4000);
}
.m3dm-callout__btn--primary:hover { background: var(--vefa-accent-dark, #d93600); color: var(--vefa-text-on-primary, #fff); }

@media (max-width: 640px) {
    .m3dm-section { flex-direction: column; gap: 0.8rem; padding: 1.6rem 1.25rem; }
    .m3dm-callout { flex-direction: column; padding: 1.3rem; }
}