/* Signature « faisceaux » FORMEL v1.0.0 — module de THÈME (jamais dans le Socle mobile commun).
   Motif décoratif : il ne représente aucune activité réelle (DEC-SYN-014, exception marketing).
   Zones : héros (réseau + balayage), séparation des sections, bandeau final, entrée du pied de page.
   Garde-fous : jamais devant un texte ni un bouton (z-index 0, pointer-events none, estompé côté texte) ;
   impulsions cachées si prefers-reduced-motion ; pages applicatives (Mon espace, panier, paiement) en
   variante statique (classe formel-faisceaux-static) ; interrupteur FORMEL_FAISCEAUX_DESACTIVE.
   Sources des tracés : maintenance/ux-final-20261005/build_faisceaux.py. */

:root {
    --faisceau-network: url("network.svg");
    --faisceau-sweep: url("sweep.svg");
    --faisceau-sweep-top: url("sweep-top.svg");
    --faisceau-divider: url("divider.svg");
    --faisceau-footer: url("footer.svg");
}
body.formel-faisceaux-static,
body.formel-faisceaux-static * {
    --faisceau-sweep: url("sweep-static.svg");
    --faisceau-sweep-top: url("sweep-top-static.svg");
    --faisceau-divider: url("divider-static.svg");
    --faisceau-footer: url("footer-static.svg");
}
@media (prefers-reduced-motion: reduce) {
    :root, body.formel-global-design {
        --faisceau-sweep: url("sweep-static.svg");
        --faisceau-sweep-top: url("sweep-top-static.svg");
        --faisceau-divider: url("divider-static.svg");
        --faisceau-footer: url("footer-static.svg");
    }
}

/* Héros : un seul pseudo-élément, deux calques (balayage en bas, réseau à droite). Les feuilles FMX posent
   déjà un halo sur ::before (et sur ::after pour la domiciliation) : la spécificité « html body » prend ::after
   sans toucher à ::before. Le réseau s'estompe lui-même côté texte (masque intégré au SVG). -------------- */
body.formel-global-design .fmx-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
html body.formel-global-design .fmx-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    width: auto;
    height: auto;
    border-radius: 0;
    pointer-events: none;
    background:
        var(--faisceau-sweep-top) repeat-x 0 0 / 1200px 84px,
        var(--faisceau-sweep) repeat-x 0 100% / 1200px 150px,
        var(--faisceau-network) no-repeat right center / clamp(460px, 46%, 760px) auto;
}

/* Sections : un filet à la jonction, derrière le contenu -------------------------------------------------- */
body.formel-global-design .fmx-section {
    position: relative;
    isolation: isolate;
}
body.formel-global-design .fmx-section::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: -30px;
    height: 60px;
    pointer-events: none;
    background: var(--faisceau-divider) repeat-x 0 50% / 1200px 100%;
}
/* Bandeau final ------------------------------------------------------------------------------------------- */
body.formel-global-design .fmx-final-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
body.formel-global-design .fmx-final-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    bottom: 0;
    height: 120px;
    pointer-events: none;
    background: var(--faisceau-sweep) repeat-x 0 100% / 1000px 100%;
    opacity: .85;
}
/* Entrée du pied de page : faisceaux lumineux sur le marine ---------------------------------------------- */
html body.formel-global-design #site-footer.site-footer.dynamic-footer::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    top: 0;
    height: 140px;
    pointer-events: none;
    background: var(--faisceau-footer) repeat-x 0 0 / 1200px 100%;
}

/* Mobile : tuiles plus serrées, réseau recentré et plus discret ------------------------------------------ */
@media (max-width: 767px) {
    html body.formel-global-design .fmx-hero::after {
        background:
            var(--faisceau-sweep-top) repeat-x 0 0 / 700px 32px,
            var(--faisceau-sweep) repeat-x 0 100% / 760px 96px,
            var(--faisceau-network) no-repeat 100% 108% / min(100%, 420px) auto;
    }
    body.formel-global-design .fmx-section::before { height: 44px; top: -22px; background-size: 760px 100%; }
    body.formel-global-design .fmx-final-card::after { height: 84px; background-size: 700px 100%; }
    html body.formel-global-design #site-footer.site-footer.dynamic-footer::before { height: 100px; background-size: 760px 100%; }
}