/**
 * Infographies générées (SVG inline) - hub Services, pages détail, étude de cas.
 *
 * Le SVG est produit par utils/build_infographics.py : fond transparent, aucun
 * script, aucune ressource distante. Le conteneur fournit la surface vitrée et
 * la couleur de texte est forcée ici pour rester lisible sur le thème sombre.
 */

.infographic {
    margin: 2rem auto 0;
    max-width: 72rem;
}

.infographic-canvas {
    /* Direction technique LTR même en arabe : le diagramme n'est pas du texte. */
    direction: ltr;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-color: var(--primary-soft) var(--dark-bg-alt);
    scrollbar-width: thin;
    padding: clamp(0.75rem, 2vw, 1.75rem);
    background:
        radial-gradient(ellipse at 20% 0%, rgba(var(--primary-rgb), 0.08), transparent 55%),
        radial-gradient(ellipse at 100% 100%, rgba(var(--accent-rgb), 0.07), transparent 50%),
        var(--dark-bg-alt);
    border: 1px solid var(--border-strong);
    border-radius: var(--border-radius-lg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--shadow-sm);
}

.infographic-canvas > svg {
    display: block;
    width: 100%;
    max-width: var(--infographic-natural-width, 100%);
    min-width: var(--infographic-min-width, 720px);
    margin-inline: auto;
    height: auto;
    font-family: var(--font-sans);
}

.infographic-canvas svg svg {
    width: 100%;
    height: 100%;
}

.infographic-canvas:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.infographic-canvas svg text {
    font-family: inherit;
}

.infographic-title {
    margin: 0 0 1rem;
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    text-align: center;
    color: var(--text-emphasis);
}

.infographic-caption-block {
    margin-top: 1rem;
    text-align: center;
}

.infographic-caption {
    max-width: 70ch;
    margin: 0.35rem auto 0;
    font-size: var(--font-size-sm);
    line-height: 1.6;
    color: var(--text-muted);
}

@media (max-width: 575.98px) {
    .infographic-canvas {
        padding: 0.5rem;
        border-radius: var(--border-radius-md);
    }
}

@media print {
    .infographic-canvas {
        /* Keep the dark charte surface: the inline SVG carries light labels. */
        background: #0e1630;
        box-shadow: none;
        break-inside: avoid;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .infographic-canvas {
        overflow: visible;
    }

    .infographic-canvas > svg {
        min-width: 0;
    }

    .infographic-title,
    .infographic-caption {
        color: #111;
    }
}