/* ==========================================================================
   Stolip — halos aux couleurs « Atelier » (en plus de « La chaîne »)

   Demande de Julien (03/10) : remettre du flou, mais aux couleurs Atelier.
   Ce ne sont pas les nuages violets d'avant (--tex reste à 0). Peu d'endroits,
   ceux où la chaîne s'arrête :
     1. le cadre du héros : la grande maquette est éclairée par-derrière, à la
        couleur de la page (une seule teinte). La lumière sort sur les côtés,
        jamais au-dessus du haut du cadre : le titre, le chapeau et les
        boutons restent sur du noir à toutes les largeurs.
        Hub : une tache sous chaque nœud de la frise, qui s'allume avec lui.
        Landing : bleu catalogue à gauche, corail commandes à droite ;
     2. la carte « page suivante » : la lumière part de la pastille flèche, à
        la couleur de la page suivante (tuiles du hub : même idée) ;
     3. le formulaire final : autour de la carte, à la couleur de la page. Si
        mat-chaine.js expose le côté du logo final (<html data-chn-end="l|r">),
        la lumière part du logo lui-même, à la couleur des voies qui y arrivent.
   Rien dans les scènes, le bento (seul le reflet au survol, à la couleur de la
   carte), les modules de la landing, le méga-menu, le hub des cas d'usage.

   Règles tenues ici :
     · le halo passe SOUS les traits de la chaîne et du cadre : z-index -2
       dans le contexte racine (les svg de la chaîne et du cadre sont à -1,
       premiers enfants du body). Le héros, la scène du héros et le CTA final
       perdent pour cela leur isolation / perspective (inutiles : matières
       éteintes, scène à plat avec « Le cadre ») ;
     · les maquettes restent neutres : derrière une composition sans fond
       (cas d'usage : deux fenêtres, dont une atténuée), un aplat de la couleur
       du fond arrête la lumière ;
     · uniquement des radial-gradient (aucun filter:blur) ;
     · couleurs chaudes (devis, commandes, AVA, boutiques) : teinte claire et
       saturée, petite source au ras du bord, sans longue traîne (un jaune ou
       un corail pâle atténué sur du noir se lit brun ou olive) ; jamais deux
       couleurs chaudes ensemble. Lavande des maquettes : même forme, dosée bas ;
     · une seule respiration lente (le halo du héros), figée en mouvement réduit ;
     · page AVA (papier) : encres -ink, dosées plus bas (--hl-o) ;
     · rien ne dépasse en largeur (le héros de la landing rogne en x).

   Couleurs : --fx-c = couleur courante (palette-atelier.css, ou un style posé
   sur body : pages /cas-d-usage) ; --hk = lumière de la page ; --g-<slug> =
   lumière de chaque fonctionnalité. Chargée en dernier, après mat-chaine et
   hero-cadre.
   ========================================================================== */

/* ---------- 1. Jetons ---------- */
/* Lumière de chaque fonctionnalité : froides = la couleur Atelier, chroma
   relevé (atténuée sur du noir, une couleur pâle vire au gris sale) ;
   chaudes = une teinte claire et saturée (or, corail vif, orange AVA, rose). */
:root{
  --g-catalogue:var(--c-catalogue);--g-devis:var(--c-devis);--g-espace-client:var(--c-espace-client);--g-commandes:var(--c-commandes);
  --g-boutiques:var(--c-boutiques);--g-ava:var(--c-ava);--g-branchements:var(--c-branchements);--g-maquettes:var(--c-maquettes)}
@supports (color:oklch(from red l c h)){
  :root{
    --g-catalogue:oklch(from var(--c-catalogue) l calc(c * 1.6) h);
    --g-espace-client:oklch(from var(--c-espace-client) l calc(c * 1.6) h);
    --g-branchements:oklch(from var(--c-branchements) l calc(c * 1.6) h);
    --g-maquettes:oklch(from var(--c-maquettes) l calc(c * 1.6) h)}
}
@supports (color:oklch(0 0 0)){
  :root{--g-devis:oklch(.85 .16 82);--g-commandes:oklch(.75 .165 37);--g-ava:oklch(.77 .175 56);--g-boutiques:oklch(.8 .14 350)}
}
body.fx-ava{
  --g-catalogue:var(--c-catalogue);--g-devis:var(--c-devis);--g-espace-client:var(--c-espace-client);--g-commandes:var(--c-commandes);
  --g-boutiques:var(--c-boutiques);--g-ava:var(--c-ava);--g-branchements:var(--c-branchements);--g-maquettes:var(--c-maquettes)}

/* --hk = lumière de la page. La page est reconnue par sa classe fx-<slug> ou,
   pour les pages qui posent leur couleur en style sur body (/cas-d-usage :
   style="--fx-c:var(--c-<slug>)"), par ce style. Couleur inconnue : --fx-c
   relevée. --hl-o dose l'ensemble (papier clair : plus bas). */
body{--hk:var(--fx-c);--hl-o:1;--hl-k:1}
@supports (color:oklch(from red l c h)){body{--hk:oklch(from var(--fx-c) l calc(c * 1.6) h)}}
body:is(.fx-catalogue,[style*="--c-catalogue)"]){--hk:var(--g-catalogue)}
body:is(.fx-devis,[style*="--c-devis)"]){--hk:var(--g-devis)}
body:is(.fx-espace-client,[style*="--c-espace-client)"]){--hk:var(--g-espace-client)}
body:is(.fx-commandes,[style*="--c-commandes)"]){--hk:var(--g-commandes)}
body:is(.fx-boutiques,[style*="--c-boutiques)"]){--hk:var(--g-boutiques)}
body:is(.fx-ava,[style*="--c-ava)"]){--hk:var(--g-ava)}
body:is(.fx-branchements,[style*="--c-branchements)"]){--hk:var(--g-branchements)}
body:is(.fx-maquettes,[style*="--c-maquettes)"]){--hk:var(--g-maquettes)}
body.fx-ava{--hl-o:.5}
/* --hl-k dose la couleur de la page (héros, formulaire). Lavande des
   maquettes : dosée bas, on ne revient pas aux nuages violets. */
body:is(.fx-maquettes,[style*="--c-maquettes)"]){--hl-k:.55}

/* Éléments qui parlent d'une autre fonctionnalité (page ou cas suivant, tuiles
   du hub) : leur propre lumière, tirée de leur --fx-c. */
.fx-next,.hb-tile{--hk:var(--fx-c)}
@supports (color:oklch(from red l c h)){.fx-next,.hb-tile{--hk:oklch(from var(--fx-c) l calc(c * 1.6) h)}}
:is(.hb-t-catalogue,a.fx-next[href$="/catalogue"],:is(.fx-next,.hb-tile)[style*="--c-catalogue)"]){--hk:var(--g-catalogue)}
:is(.hb-t-devis,a.fx-next[href$="/devis"],:is(.fx-next,.hb-tile)[style*="--c-devis)"]){--hk:var(--g-devis)}
:is(.hb-t-espace-client,a.fx-next[href$="/espace-client"],:is(.fx-next,.hb-tile)[style*="--c-espace-client)"]){--hk:var(--g-espace-client)}
:is(.hb-t-commandes,a.fx-next[href$="/commandes"],:is(.fx-next,.hb-tile)[style*="--c-commandes)"]){--hk:var(--g-commandes)}
:is(.hb-t-boutiques,a.fx-next[href$="/boutiques"],:is(.fx-next,.hb-tile)[style*="--c-boutiques)"]){--hk:var(--g-boutiques)}
:is(.hb-t-ava,a.fx-next[href$="/ava"],:is(.fx-next,.hb-tile)[style*="--c-ava)"]){--hk:var(--g-ava)}
:is(.hb-t-branchements,a.fx-next[href$="/branchements"],:is(.fx-next,.hb-tile)[style*="--c-branchements)"]){--hk:var(--g-branchements)}
:is(.hb-t-maquettes,a.fx-next[href$="/maquettes"],:is(.fx-next,.hb-tile)[style*="--c-maquettes)"]){--hk:var(--g-maquettes)}

/* ---------- 2. Le cadre du héros : la maquette éclairée par-derrière ----------
   Le halo est accroché à la scène (.fx-stage), donc à la vraie taille de la
   maquette à toutes les largeurs. La scène perd sa perspective (elle est à
   plat avec « Le cadre ») : sans contexte d'empilement, son ::before à -2
   reste dans le contexte racine, sous les svg de la chaîne et du cadre (-1).
   Le masque ne laisse rien monter au-dessus du haut du cadre. */
html[data-mat] .fx-hero{isolation:auto}
html[data-mat][data-hero] .fx-hero .fx-stage{perspective:none}
html[data-mat] body .fx-hero .fx-stage::before{content:"";display:block;position:absolute;left:-14%;right:-14%;top:-10%;bottom:-6%;width:auto;height:auto;
  transform:none;filter:none;z-index:-2;pointer-events:none;opacity:calc(var(--hl-o) * var(--hl-k));transform-origin:50% 55%;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 86%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 86%,transparent);
  background:
    radial-gradient(46% 62% at 30% 42%,color-mix(in srgb,var(--hk) 34%,transparent),color-mix(in srgb,var(--hk) 28%,transparent) 45%,color-mix(in srgb,var(--hk) 14%,transparent) 66%,color-mix(in srgb,var(--hk) 4%,transparent) 86%,transparent),
    radial-gradient(42% 58% at 72% 48%,color-mix(in srgb,var(--hk) 22%,transparent),color-mix(in srgb,var(--hk) 18%,transparent) 45%,color-mix(in srgb,var(--hk) 9%,transparent) 66%,color-mix(in srgb,var(--hk) 3%,transparent) 86%,transparent);
  animation:fl-breathe 13s ease-in-out infinite alternate}
/* Chaudes (et le lavande des maquettes, qui étalé redevient une nappe
   violette) : une source vive au ras du bord gauche de la maquette (côté de
   l'étiquette), une plus faible à droite ; pas de longue traîne. */
html[data-mat] body:is(.fx-devis,.fx-commandes,.fx-boutiques,.fx-ava,.fx-maquettes,[style*="--c-devis)"],[style*="--c-commandes)"],[style*="--c-boutiques)"],[style*="--c-ava)"],[style*="--c-maquettes)"]) .fx-hero .fx-stage::before{
  background:
    radial-gradient(12% 34% at 14% 46%,color-mix(in srgb,var(--hk) 56%,transparent),color-mix(in srgb,var(--hk) 44%,transparent) 35%,color-mix(in srgb,var(--hk) 14%,transparent) 68%,transparent 88%),
    radial-gradient(10% 30% at 86% 56%,color-mix(in srgb,var(--hk) 34%,transparent),color-mix(in srgb,var(--hk) 26%,transparent) 35%,color-mix(in srgb,var(--hk) 8%,transparent) 68%,transparent 88%)}
@keyframes fl-breathe{from{opacity:calc(var(--hl-o) * var(--hl-k));transform:none}to{opacity:calc(.78 * var(--hl-o) * var(--hl-k));transform:scale(1.03)}}
/* Une composition sans fond (cas d'usage : deux fenêtres, une atténuée) : un
   aplat de la couleur du fond derrière elle, la lumière ne la teinte pas.
   :where() = spécificité nulle, les fenêtres gardent leur propre fond. */
:where(html[data-mat] .fx-hero .fx-stage [data-fit] > :not(.hb-rail)){background-color:var(--bg)}

/* Hub des cas d'usage (toutes les fonctionnalités) : les deux couleurs de la
   landing, bleu catalogue à gauche, corail commandes à droite. */
html[data-mat] body.uc-hub .fx-hero .fx-stage::before{
  background:
    radial-gradient(44% 60% at 26% 44%,color-mix(in srgb,var(--g-catalogue) 34%,transparent),color-mix(in srgb,var(--g-catalogue) 28%,transparent) 45%,color-mix(in srgb,var(--g-catalogue) 14%,transparent) 66%,color-mix(in srgb,var(--g-catalogue) 4%,transparent) 86%,transparent),
    radial-gradient(10% 30% at 86% 56%,color-mix(in srgb,var(--g-commandes) 50%,transparent),color-mix(in srgb,var(--g-commandes) 38%,transparent) 35%,color-mix(in srgb,var(--g-commandes) 11%,transparent) 68%,transparent 88%)}

/* Hub : une tache sous chaque nœud de la frise, qui s'allume avec lui
   (.hb-rail.k1 … .k4). Nœuds à x = 90 / 420 / 760 / 1090 et y = 236 sur une
   frise de 1180 × 440, centrée dans la scène (gouttières 28 px + place du cadre). */
@property --a1{syntax:'<number>';inherits:true;initial-value:0}
@property --a2{syntax:'<number>';inherits:true;initial-value:0}
@property --a3{syntax:'<number>';inherits:true;initial-value:0}
@property --a4{syntax:'<number>';inherits:true;initial-value:0}
html[data-mat] body.fx-hub .fx-hero .fx-stage{--rl:var(--hcd-room-l,0px);--rr:var(--hcd-room-r,0px);transition:--a1 .9s ease-out,--a2 .9s ease-out,--a3 .9s ease-out,--a4 .9s ease-out}
html[data-mat] body.fx-hub .fx-hero .fx-stage:has(.hb-rail.k1){--a1:1}
html[data-mat] body.fx-hub .fx-hero .fx-stage:has(.hb-rail.k2){--a2:1}
html[data-mat] body.fx-hub .fx-hero .fx-stage:has(.hb-rail.k3){--a3:1}
html[data-mat] body.fx-hub .fx-hero .fx-stage:has(.hb-rail.k4){--a4:1}
html[data-mat] body.fx-hub .fx-hero .fx-stage::before{left:-60px;right:-60px;top:-40px;bottom:-40px;animation:none;
  -webkit-mask-image:none;mask-image:none;
  --fw:calc(100% - 176px - var(--rl) - var(--rr));
  background:
    radial-gradient(9% 26% at calc(88px + var(--rl) + var(--fw) * .0763) calc(40px + (100% - 80px) * .536),color-mix(in srgb,var(--g-catalogue) calc(var(--a1) * 30%),transparent),color-mix(in srgb,var(--g-catalogue) calc(var(--a1) * 18%),transparent) 45%,transparent),
    radial-gradient(8% 23% at calc(88px + var(--rl) + var(--fw) * .356) calc(40px + (100% - 80px) * .536),color-mix(in srgb,var(--g-devis) calc(var(--a2) * 36%),transparent),color-mix(in srgb,var(--g-devis) calc(var(--a2) * 22%),transparent) 45%,transparent 90%),
    radial-gradient(9% 26% at calc(88px + var(--rl) + var(--fw) * .644) calc(40px + (100% - 80px) * .536),color-mix(in srgb,var(--g-espace-client) calc(var(--a3) * 28%),transparent),color-mix(in srgb,var(--g-espace-client) calc(var(--a3) * 16%),transparent) 45%,transparent),
    radial-gradient(8% 23% at calc(88px + var(--rl) + var(--fw) * .924) calc(40px + (100% - 80px) * .536),color-mix(in srgb,var(--g-commandes) calc(var(--a4) * 34%),transparent),color-mix(in srgb,var(--g-commandes) calc(var(--a4) * 20%),transparent) 45%,transparent 90%)}

/* Landing : la grande application, bleu catalogue à gauche (les voies
   arrivent), corail commandes à droite (elles repartent). Le héros de la
   landing ne coupait rien : il rogne désormais ce qui dépasse en largeur. */
html[data-mat] main > .hero{overflow-x:clip}
html[data-mat] body main > .hero .appwrap::before{content:"";display:block;position:absolute;left:-12%;right:-12%;top:-8%;bottom:-6%;width:auto;height:auto;
  transform:none;filter:none;z-index:-2;pointer-events:none;opacity:1;transform-origin:50% 55%;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 86%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 86%,transparent);
  background:
    radial-gradient(40% 58% at 22% 46%,color-mix(in srgb,var(--g-catalogue) 34%,transparent),color-mix(in srgb,var(--g-catalogue) 28%,transparent) 45%,color-mix(in srgb,var(--g-catalogue) 14%,transparent) 66%,color-mix(in srgb,var(--g-catalogue) 4%,transparent) 86%,transparent),
    radial-gradient(11% 30% at 87% 56%,color-mix(in srgb,var(--g-commandes) 50%,transparent),color-mix(in srgb,var(--g-commandes) 38%,transparent) 35%,color-mix(in srgb,var(--g-commandes) 11%,transparent) 68%,transparent 88%);
  animation:fl-breathe 13s ease-in-out infinite alternate}

/* ---------- 3. Page suivante, tuiles du hub ---------- */
/* La lumière part de la pastille flèche, à la couleur de la page suivante.
   Téléphone : la flèche passe sous le titre ; la lumière reste en haut à
   droite, à côté du titre, loin du texte gris. */
.fx-next::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:var(--hl-o);
  background:radial-gradient(460px 300px at calc(100% - 82px) 56%,color-mix(in srgb,var(--hk) 24%,transparent),color-mix(in srgb,var(--hk) 14%,transparent) 34%,color-mix(in srgb,var(--hk) 4%,transparent) 64%,transparent)}
@media(max-width:699px){.fx-next::before{background:radial-gradient(300px 220px at calc(100% - 30px) 36%,color-mix(in srgb,var(--hk) 24%,transparent),color-mix(in srgb,var(--hk) 14%,transparent) 34%,color-mix(in srgb,var(--hk) 4%,transparent) 64%,transparent)}}

/* Tuiles du hub : derrière la vignette (à droite), à la couleur de la tuile. */
.hb-tile::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(44% 74% at 82% 50%,color-mix(in srgb,var(--hk) 22%,transparent),color-mix(in srgb,var(--hk) 12%,transparent) 42%,color-mix(in srgb,var(--hk) 3%,transparent) 74%,transparent)}
.hb-tile:is(.hb-t-devis,.hb-t-commandes,.hb-t-boutiques,.hb-t-ava)::before{
  background:radial-gradient(30% 56% at 80% 50%,color-mix(in srgb,var(--hk) 34%,transparent),color-mix(in srgb,var(--hk) 24%,transparent) 44%,color-mix(in srgb,var(--hk) 6%,transparent) 76%,transparent 90%)}
@media(max-width:560px){
  .hb-tile::before{background:radial-gradient(90% 34% at 50% 84%,color-mix(in srgb,var(--hk) 22%,transparent),color-mix(in srgb,var(--hk) 12%,transparent) 42%,color-mix(in srgb,var(--hk) 3%,transparent) 74%,transparent)}
  .hb-tile:is(.hb-t-devis,.hb-t-commandes,.hb-t-boutiques,.hb-t-ava)::before{background:radial-gradient(64% 24% at 50% 84%,color-mix(in srgb,var(--hk) 32%,transparent),color-mix(in srgb,var(--hk) 22%,transparent) 44%,color-mix(in srgb,var(--hk) 5%,transparent) 76%,transparent 90%)}}

/* Le reflet qui suit la souris (cartes du bento, tuiles) prend la couleur de
   la carte (AVA garde le sien). C'est la seule lumière du bento. */
body:not(.fx-ava) .fx-card[data-glow]::after,
.hb-tile[data-glow]::after{background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--fx-c) 10%,transparent),transparent 60%)}

/* ---------- 4. Le formulaire final ----------
   .final perd son isolation : le halo passe sous les voies et le logo final
   de la chaîne. La carte du formulaire (540 × 441 px) finit à 104 px du bas
   de la section : la lumière l'entoure, rien ne monte au-dessus d'elle (le
   titre et le chapeau restent sur du noir). */
html[data-mat] .final{isolation:auto;--hl-n:var(--hk)}
main:has(a.fx-next[href$="/catalogue"],.fx-next[style*="--c-catalogue)"]) .final{--hl-n:var(--g-catalogue)}
main:has(a.fx-next[href$="/devis"],.fx-next[style*="--c-devis)"]) .final{--hl-n:var(--g-devis)}
main:has(a.fx-next[href$="/espace-client"],.fx-next[style*="--c-espace-client)"]) .final{--hl-n:var(--g-espace-client)}
main:has(a.fx-next[href$="/commandes"],.fx-next[style*="--c-commandes)"]) .final{--hl-n:var(--g-commandes)}
main:has(a.fx-next[href$="/boutiques"],.fx-next[style*="--c-boutiques)"]) .final{--hl-n:var(--g-boutiques)}
main:has(a.fx-next[href$="/ava"],.fx-next[style*="--c-ava)"]) .final{--hl-n:var(--g-ava)}
main:has(a.fx-next[href$="/branchements"],.fx-next[style*="--c-branchements)"]) .final{--hl-n:var(--g-branchements)}
main:has(a.fx-next[href$="/maquettes"],.fx-next[style*="--c-maquettes)"]) .final{--hl-n:var(--g-maquettes)}
html[data-mat] body .final::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;opacity:calc(var(--hl-o) * var(--hl-k));
  -webkit-mask-image:linear-gradient(to top,transparent,#000 64px,#000 400px,transparent 546px);mask-image:linear-gradient(to top,transparent,#000 64px,#000 400px,transparent 546px);
  background:
    radial-gradient(540px 300px at 50% calc(100% - 270px),color-mix(in srgb,var(--hk) 30%,transparent),color-mix(in srgb,var(--hk) 26%,transparent) 52%,color-mix(in srgb,var(--hk) 12%,transparent) 70%,color-mix(in srgb,var(--hk) 3%,transparent) 86%,transparent)}
html[data-mat] body:is(.fx-devis,.fx-commandes,.fx-boutiques,.fx-ava,[style*="--c-devis)"],[style*="--c-commandes)"],[style*="--c-boutiques)"],[style*="--c-ava)"]) .final::before{
  background:
    radial-gradient(390px 230px at 50% calc(100% - 250px),color-mix(in srgb,var(--hk) 46%,transparent),color-mix(in srgb,var(--hk) 40%,transparent) 64%,color-mix(in srgb,var(--hk) 10%,transparent) 82%,transparent 94%)}
/* Landing et hubs : les deux couleurs de la landing (catalogue, commandes). */
html[data-mat] body:is(:not(.fx-page),.fx-hub,.uc-hub) .final::before{
  background:
    radial-gradient(440px 300px at 33% calc(100% - 270px),color-mix(in srgb,var(--g-catalogue) 30%,transparent),color-mix(in srgb,var(--g-catalogue) 25%,transparent) 50%,color-mix(in srgb,var(--g-catalogue) 11%,transparent) 70%,color-mix(in srgb,var(--g-catalogue) 3%,transparent) 86%,transparent),
    radial-gradient(200px 190px at calc(50% + 270px) calc(100% - 250px),color-mix(in srgb,var(--g-commandes) 50%,transparent),color-mix(in srgb,var(--g-commandes) 38%,transparent) 40%,color-mix(in srgb,var(--g-commandes) 10%,transparent) 72%,transparent 90%)}
/* Le logo final est à côté du formulaire (≥ 1000 px) : si mat-chaine.js
   expose son côté (data-chn-end), la lumière part du logo lui-même, à la
   couleur des voies qui y arrivent. Centre du logo : à mi-chemin entre la
   carte et le bord du contenu, à mi-hauteur de la carte. */
@media(min-width:1000px){
  html[data-mat][data-chn-end] body .final{--lx:calc(50% - (540px + min(1124px,100% - 56px)) / 4)}
  html[data-mat][data-chn-end="r"] body .final{--lx:calc(50% + (540px + min(1124px,100% - 56px)) / 4)}
  html[data-mat][data-chn-end] body .final::before{opacity:var(--hl-o);
    -webkit-mask-image:linear-gradient(to top,transparent,#000 64px,#000 calc(100% - 200px),transparent calc(100% - 150px));mask-image:linear-gradient(to top,transparent,#000 64px,#000 calc(100% - 200px),transparent calc(100% - 150px));
    background:radial-gradient(250px 190px at var(--lx) calc(100% - 324px),color-mix(in srgb,var(--hl-n) 40%,transparent),color-mix(in srgb,var(--hl-n) 32%,transparent) 42%,color-mix(in srgb,var(--hl-n) 9%,transparent) 74%,transparent 90%)}
  html[data-mat][data-chn-end] body:is(:not(.fx-page),.fx-hub,.uc-hub) .final::before{
    background:
      radial-gradient(230px 110px at var(--lx) calc(100% - 362px),color-mix(in srgb,var(--g-catalogue) 40%,transparent),color-mix(in srgb,var(--g-catalogue) 28%,transparent) 45%,transparent 88%),
      radial-gradient(220px 100px at var(--lx) calc(100% - 286px),color-mix(in srgb,var(--g-commandes) 40%,transparent),color-mix(in srgb,var(--g-commandes) 28%,transparent) 45%,transparent 88%)}
}

/* ---------- 4 bis. Correctifs (audit 03/10) ---------- */
/* Halo du héros : fondu aussi sur les bords verticaux (l'ellipse dépassait la
   boîte du pseudo-élément : rectangle à bords droits). */
html[data-mat] body .fx-hero .fx-stage::before{
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 86%,transparent),linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 86%,transparent),linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);
  mask-composite:intersect}
html[data-mat] body main > .hero .appwrap::before{
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 86%,transparent),linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 86%,transparent),linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);
  mask-composite:intersect}
/* Couleurs chaudes : pas de nappe (un jaune ou un corail atténué sur du noir
   se lit brun). Ni dans le héros, ni au formulaire final, ni sous les nœuds
   chauds de la frise du hub ; la lumière de fin de page s'éteint aussi quand
   la page suivante est chaude. */
html[data-mat] body:is(.fx-devis,.fx-commandes,.fx-boutiques,.fx-ava,[style*="--c-devis)"],[style*="--c-commandes)"],[style*="--c-boutiques)"],[style*="--c-ava)"]) .fx-hero .fx-stage::before,
html[data-mat] body:is(.fx-devis,.fx-commandes,.fx-boutiques,.fx-ava,[style*="--c-devis)"],[style*="--c-commandes)"],[style*="--c-boutiques)"],[style*="--c-ava)"]) .final::before{background:none}
@media(min-width:1000px){html[data-mat][data-chn-end] main:has(a.fx-next[href$="/devis"],.fx-next[style*="--c-devis)"],a.fx-next[href$="/commandes"],.fx-next[style*="--c-commandes)"],a.fx-next[href$="/boutiques"],.fx-next[style*="--c-boutiques)"],a.fx-next[href$="/ava"],.fx-next[style*="--c-ava)"]) .final::before{background:none}}
html[data-mat] body.fx-hub .fx-hero .fx-stage::before{
  background:
    radial-gradient(9% 26% at calc(88px + var(--rl) + var(--fw) * .0763) calc(40px + (100% - 80px) * .536),color-mix(in srgb,var(--g-catalogue) calc(var(--a1) * 30%),transparent),color-mix(in srgb,var(--g-catalogue) calc(var(--a1) * 18%),transparent) 45%,transparent),
    radial-gradient(9% 26% at calc(88px + var(--rl) + var(--fw) * .644) calc(40px + (100% - 80px) * .536),color-mix(in srgb,var(--g-espace-client) calc(var(--a3) * 28%),transparent),color-mix(in srgb,var(--g-espace-client) calc(var(--a3) * 16%),transparent) 45%,transparent)}
@media(max-width:560px){.hb-tile:is(.hb-t-devis,.hb-t-commandes,.hb-t-boutiques,.hb-t-ava)::before{background:none}}
/* Téléphone et tablette : le halo du héros tombait dans les gouttières, sous
   le cadre et les voies ; celui du formulaire, plus large que l'écran,
   devenait une bande. Éteints. */
@media(max-width:768px){html[data-mat] body .fx-hero .fx-stage::before,html[data-mat] body main > .hero .appwrap::before{display:none}}
@media(max-width:699px){html[data-mat] body .final::before{display:none}}

/* ---------- 5. Ce qui reste éteint ---------- */
/* Cas d'usage : le hub posait sa propre rangée de cinq halos sous les
   pastilles (cas/base.css) ; les pastilles portent déjà la couleur. */
html[data-mat] body.uc-hub .uc-hub-hero::after{content:none;display:none}

/* ---------- 6. Mouvement réduit, impression ---------- */
@media (prefers-reduced-motion:reduce){
  html[data-mat] body .fx-hero .fx-stage::before,html[data-mat] body main > .hero .appwrap::before{animation:none}
  html[data-mat] body.fx-hub .fx-hero .fx-stage{transition:none}
}
@media print{
  .fx-stage::before,.appwrap::before,.fx-next::before,.hb-tile::before,.final::before{display:none!important}
}