/* ============================================================
   Diagrammes animés — couche WebGL
   Prolonge le style suisse : trait fin, encre bleue, fond papier.
   Aucun dégradé, aucun flou, aucun halo. Chaque diagramme illustre
   un argument du texte ; aucun n'est décoratif.
   ============================================================ */

/* La scène est FIXE et AU-DESSUS du contenu (z-index 4), pas derrière :
   les cartes ont un fond blanc opaque qui masquerait le canvas.
   `pointer-events: none` la rend totalement transparente aux clics,
   au défilement et à la sélection de texte.
   Repères : .container = 1, .nav = 1000, .progress = 1500. */
.fx-diagrammes {
    position: fixed;
    inset: 0;
    z-index: 4;
    pointer-events: none;

    /* Encre sur papier.
       Sur fond noir, l'éclat vient du blending additif ; sur fond clair il
       ne donne rien (l'additif tend vers le blanc). Le `multiply` fait
       l'inverse et c'est exactement le bon geste ici : le tracé se comporte
       comme de l'encre déposée sur la page — il fonce là où il se
       superpose, et le texte qu'il croise se teinte au lieu d'être couvert.

       Pas de `contain` : toute valeur autre que `size`/`style` créerait un
       contexte d'empilement, et le multiply n'aurait plus que du vide à
       multiplier. La nav (z-index 1000) est peinte après : elle reste nette. */
    mix-blend-mode: multiply;
}

/* Sur fond sombre, `multiply` ne donne plus rien : multiplier par du noir
   ne fait qu'assombrir. `screen` en est le dual exact — il éclaircit le
   fond sans effacer le texte clair posé dessus, exactement comme
   `multiply` fonçait le papier sans effacer le texte sombre. */
:root[data-theme="sombre"] .fx-diagrammes {
    mix-blend-mode: screen;
}

    .fx-diagrammes a-scene,
    .fx-diagrammes .a-canvas {
        width: 100% !important;
        height: 100% !important;
        pointer-events: none !important;
    }

/* Interfaces injectées par A-Frame : sans objet ici. */
.a-enter-vr,
.a-enter-ar,
.a-orientation-modal,
.a-loader-title {
    display: none !important;
}

/* ------------------------------------------------------------
   Emplacements réservés aux diagrammes.
   Le cadre, le quadrillage de construction et la légende sont en
   CSS : ils restent visibles même si le WebGL ne démarre jamais.
   ------------------------------------------------------------ */
.diagramme {
    display: block;              /* aussi utilisable en <span>, dans une carte-lien */
    position: relative;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    overflow: hidden;
    margin: 0;
}

/* Bande large sous un chapeau de section */
.diagramme--bande {
    aspect-ratio: 5 / 1;
    margin-top: 2.75rem;
}

/* Vignette au sein d'une carte */
.diagramme--vignette {
    aspect-ratio: 2 / 1;
    margin-top: 1.25rem;
}

/* Quadrillage de construction — le papier millimétré sous le dessin. */
.diagramme::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(90deg, var(--border) 0 1px, transparent 1px 26px),
        repeating-linear-gradient(0deg, var(--border) 0 1px, transparent 1px 26px);
    opacity: .55;
}

/* Repère d'angle : détail d'atelier, pas d'ornement. */
.diagramme::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 9px;
    height: 9px;
    border-top: 1px solid var(--accent);
    border-left: 1px solid var(--accent);
    opacity: .8;
}

.diagramme-legende {
    position: absolute;
    right: .55rem;
    bottom: .35rem;
    margin: 0;
    font-family: var(--mono);
    font-size: .68rem;
    letter-spacing: .04em;
    color: var(--faint);
    background: var(--bg-soft);
    padding-left: .4rem;
}

/* Sur écran étroit la bande devient trop basse pour se lire. */
@media (max-width: 720px) {
    .diagramme--bande {
        aspect-ratio: 3 / 1;
    }
}

/* Le mouvement s'arrête ; le diagramme reste, figé sur son état final. */
@media (prefers-reduced-motion: reduce) {
    .diagramme::after {
        opacity: .8;
    }
}