.m{
  position:fixed; inset:0; z-index:2;
  pointer-events:none;
}

:root{ --m-voile:1; }

.m.m--grain{
  opacity:calc(var(--grain, .09) * var(--m-voile, 1));
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='b'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23b)'/></svg>");
}

.m.m--vignette{
  opacity:var(--m-voile, 1);
  background:radial-gradient(130% 110% at 50% 42%,
    transparent 50%,
    color-mix(in srgb, var(--bg) calc(var(--vignette, 55) * 1%), transparent) 100%);
}

.m.m--halation{
  mix-blend-mode:screen;
  opacity:calc(var(--halation, .55) * var(--m-voile, 1));
  background:
    radial-gradient(58% 44% at 68% 38%, oklch(from var(--accent) max(l, .8) min(c, .16) h / .42), transparent 66%),
    radial-gradient(70% 60% at 22% 72%, oklch(from var(--accent) max(l, .8) min(c, .16) h / .22), transparent 70%);
}

.m.m--trame{
  opacity:calc(var(--trame, .24) * var(--m-voile, 1));
  background:repeating-linear-gradient(180deg,
    color-mix(in srgb, var(--fg) 40%, transparent) 0 1px,
    transparent 1px 4px);
}

.m.m--caustiques{
  mix-blend-mode:screen;
  opacity:calc(var(--caustiques, .16) * var(--m-voile, 1));
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='480' height='480'><filter id='c' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.014' numOctaves='2' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  1 0 0 0 0'/><feComponentTransfer><feFuncA type='table' tableValues='0 0 0 0 0 0 0 0 .4 1 .4 0 0 0 0 0 0 0 0 0'/></feComponentTransfer><feGaussianBlur stdDeviation='.7'/></filter><rect width='100%25' height='100%25' filter='url(%23c)'/></svg>");
  background-size:480px 480px;
}

.m.m--trame-points{
  opacity:calc(var(--trame-points, .3) * var(--m-voile, 1));
  background-image:radial-gradient(circle,
    color-mix(in srgb, var(--fg) 55%, transparent) .6px, transparent 1px);
  background-size:4px 4px;
}

.m.m--givre{
  z-index:0;
  backdrop-filter:blur(calc(var(--givre, 3) * var(--m-voile, 1) * 1px)) saturate(1.08);
}

.a-mouvement .m.m--givre:not(.est-levee){ backdrop-filter:none }

.m.m--fuite{
  mix-blend-mode:screen;
  opacity:calc(var(--fuite, .28) * var(--m-voile, 1));
  background:
    radial-gradient(80% 60% at 100% 0%, oklch(from var(--accent) max(l, .78) min(c, .14) h) 0%, transparent 62%),
    radial-gradient(50% 40% at 92% 12%, oklch(from var(--accent) .95 .04 h) 0%, transparent 70%);
}

.m.m--poussiere{
  opacity:calc(var(--poussiere, .3) * var(--m-voile, 1));
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='340'><g fill='none' stroke='white' stroke-width='.6' opacity='.75'><path d='M18 0v340M97 0v340M164 0v340M203 0v340'/></g><g fill='white' opacity='.9'><circle cx='40' cy='70' r='.9'/><circle cx='130' cy='150' r='.7'/><circle cx='75' cy='260' r='1.1'/><circle cx='190' cy='40' r='.8'/><circle cx='150' cy='310' r='.6'/></g><g fill='none' stroke='black' stroke-width='.5' opacity='.5'><path d='M60 0v340M141 0v340'/></g><g fill='black' opacity='.55'><circle cx='110' cy='210' r='.8'/><circle cx='20' cy='300' r='.6'/><circle cx='172' cy='118' r='.7'/></g></svg>");
}

.m.m--papier{
  mix-blend-mode:multiply;
  opacity:calc(var(--papier, .75) * var(--m-voile, 1));
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='360' height='360'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.02 .6' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23f)' opacity='.55'/></svg>");
}

.m-lueur{
  text-shadow:
    0 0 calc(var(--lueur, 18) * 1px)   oklch(from var(--accent) max(l, .78) c h / .55),
    0 0 calc(var(--lueur, 18) * 2.4px) oklch(from var(--accent) max(l, .78) c h / .28);
}
.m-lueur-bord{
  box-shadow:
    0 0 calc(var(--lueur, 18) * 1px) oklch(from var(--accent) max(l, .78) c h / .38),
    inset 0 0 calc(var(--lueur, 18) * .8px) oklch(from var(--accent) max(l, .78) c h / .22);
  border-width:max(var(--filet), 1px); border-style:solid;
  border-color:color-mix(in srgb, var(--accent) 60%, transparent);
}

.fond > img,
.fond > video,
.fond > canvas,
.fond .fond__scene,
.fond .fond__dessus,
.fond .fond__bande{
  filter:var(--traitement, none);
  scale:var(--traitement-echelle, none);
}

.fond.fond--duotone{ --traitement:grayscale(1) contrast(1.12) }
.fond.fond--duotone::after{
  content:""; position:absolute; inset:0; mix-blend-mode:color;
  background:linear-gradient(160deg, var(--accent), oklch(from var(--accent) calc(l * .55) calc(c * .7) h));
  opacity:var(--duotone, .85);
}

.m-frange{
  text-shadow:
    calc(var(--frange, 2) * -1px) 0 0 oklch(from var(--accent) .62 .22 calc(h - 120) / .55),
    calc(var(--frange, 2) *  1px) 0 0 oklch(from var(--accent) .72 .18 calc(h + 120) / .45);
}

.m.m--maille{
  mix-blend-mode:screen;
  opacity:calc(var(--maille, .7) * var(--m-voile, 1));
  background:
    radial-gradient(42% 38% at 18% 22%, oklch(from var(--accent) max(l, .8) c h / .55), transparent 70%),
    radial-gradient(38% 42% at 82% 30%, oklch(from var(--accent) max(l, .86) calc(c * .5) calc(h + 40) / .5), transparent 70%),
    radial-gradient(50% 40% at 55% 85%, oklch(from var(--accent) max(l, .8) c h / .3), transparent 70%);
  filter:blur(40px);
  inset:-4%;
}

.m.m--grille{
  opacity:calc(var(--grille, .22) * var(--m-voile, 1));
  background-image:
    linear-gradient(90deg, color-mix(in srgb, var(--fg) 35%, transparent) 1px, transparent 1px),
    linear-gradient(180deg, color-mix(in srgb, var(--fg) 35%, transparent) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 40%, var(--fg) 40%, transparent 100%);
          mask-image:radial-gradient(120% 90% at 50% 40%, var(--fg) 40%, transparent 100%);
}

.m.m--rayon{
  mix-blend-mode:screen;
  opacity:calc(var(--rayon, .5) * var(--m-voile, 1));
  background:linear-gradient(118deg,
    transparent 28%,
    oklch(from var(--bg) .92 .01 h / .26) 42%,
    oklch(from var(--bg) .97 .01 h / .34) 50%,
    oklch(from var(--bg) .92 .01 h / .20) 58%,
    transparent 72%);
  filter:blur(12px);
}

.m.m--brume{
  opacity:var(--m-voile, 1);
  background:linear-gradient(0deg,
    color-mix(in srgb, var(--bg) calc(var(--brume, 70) * 1%), transparent) 0%,
    color-mix(in srgb, var(--bg) calc(var(--brume, 70) * .35%), transparent) 32%,
    transparent 58%);
}

.fond.fond--noir-blanc{ --traitement:grayscale(1) contrast(1.08) }

.fond.fond--sepia{ --traitement:saturate(.4) sepia(.55) contrast(1.04) }

.m-creux{
  color:transparent;
  -webkit-text-stroke:max(1px, .035em) var(--creux-couleur, var(--fg));
  text-shadow:none;
  paint-order:stroke fill;
}

.m-degrade{
  background:linear-gradient(100deg, var(--accent), var(--fg) 70%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  text-shadow:none;
}
.m-degrade.est-vers-doux{ background-image:linear-gradient(100deg, var(--accent), var(--fg-doux) 80%) }

.fond.fond--flou{
  --traitement:blur(calc(var(--flou, 6) * 1px));
  --traitement-echelle:1.04;
}

.m-ombre{
  text-shadow:
    0 1px 2px  color-mix(in srgb, var(--bg) 70%, transparent),
    0 4px 22px color-mix(in srgb, var(--bg) 50%, transparent);
}

@media (prefers-reduced-motion:reduce){
  .m--grain, .m--givre{ display:none }
}

.m.m--persiennes{
  opacity:calc(var(--persiennes, .4) * var(--m-voile, 1));
  background:repeating-linear-gradient(-56deg,
    transparent 0,
    oklch(from var(--accent) .97 .03 h / .3) 9px,
    oklch(from var(--accent) .97 .03 h / .3) 30px,
    transparent 40px,
    oklch(from var(--bg) .2 .02 h / .3) 48px,
    oklch(from var(--bg) .2 .02 h / .3) 58px,
    transparent 66px);
  -webkit-mask-image:linear-gradient(205deg, var(--fg) 8%, transparent 74%);
          mask-image:linear-gradient(205deg, var(--fg) 8%, transparent 74%);
}

.m.m--cadre,
.m.m--cadre-filet{
  opacity:calc(var(--cadre, .9) * var(--m-voile, 1));
  box-shadow:inset 0 0 clamp(16px, 6vmin, 72px) clamp(2px, 1vmin, 12px) var(--bg);
}
.m.m--cadre-filet{
  outline:max(var(--filet), 1px) solid color-mix(in srgb, var(--fg) 30%, transparent);
  outline-offset:calc(-1 * clamp(14px, 1cm, 40px));
}
@media (max-width:640px){
  .m.m--cadre-filet{ outline:none }
}

.m.m--toile{
  opacity:calc(var(--toile, .3) * var(--m-voile, 1));
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='h' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.012 .9' numOctaves='2' seed='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><filter id='v' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.9 .012' numOctaves='2' seed='11' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23h)' opacity='.55'/><rect width='100%25' height='100%25' filter='url(%23v)' opacity='.45'/></svg>"),
    repeating-linear-gradient(0deg,  color-mix(in srgb, var(--fg) 50%, transparent) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--fg) 40%, transparent) 0 1px, transparent 1px 3px);
  background-size:320px 320px, auto, auto;
}

.m-souligne,
.m-souligne-epais,
.m-souligne-survol{
  --trait-h:var(--souligne-epaisseur, .08em);
  background-image:linear-gradient(var(--souligne-couleur, var(--accent)), var(--souligne-couleur, var(--accent)));
  background-repeat:no-repeat;
  background-position:0 88%;
  background-size:var(--trait-l, 100%) var(--trait-h);
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.m-souligne-epais{
  --trait-h:.24em;
  background-image:linear-gradient(-1.4deg,
    transparent 0 14%,
    color-mix(in srgb, var(--souligne-couleur, var(--accent)) 80%, transparent) 22% 78%,
    transparent 86%);
  background-position:0 96%;
  padding-inline:.08em; margin-inline:-.08em;
}
.m-souligne-survol{ text-decoration:none }
@media (hover:hover){
  .m-souligne-survol{
    --trait-l:0%;
    transition:background-size var(--duree-courte) var(--courbe);
  }
  .m-souligne-survol:hover,
  .m-souligne-survol:focus-visible{ --trait-l:100% }
}

.m-surligne,
.m-surligne-plein{
  --trait-h:100%;
  background-image:linear-gradient(-2deg,
    transparent 0 8%,
    color-mix(in srgb, var(--accent) 38%, transparent) 13% 87%,
    transparent 92%);
  background-repeat:no-repeat;
  background-position:0 55%;
  background-size:var(--trait-l, 100%) var(--trait-h);
  padding-inline:.14em; margin-inline:-.04em;
  border-radius:var(--r-s);
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.m-surligne-plein{
  background-image:linear-gradient(-2deg,
    transparent 0 4%,
    var(--accent) 8% 92%,
    transparent 96%);
  color:var(--accent-fg);
}

.a-mouvement [data-monte]:not(.est-monte) :is(.m-souligne, .m-souligne-epais, .m-surligne),
.a-mouvement :is(.m-souligne, .m-souligne-epais, .m-surligne)[data-monte]:not(.est-monte){ --trait-l:0% }
[data-monte].est-monte :is(.m-souligne, .m-souligne-epais, .m-surligne),
:is(.m-souligne, .m-souligne-epais, .m-surligne)[data-monte].est-monte{
  transition:background-size calc(var(--duree) * 1.2) var(--courbe) calc(var(--retard, 0) * var(--pas) + var(--duree) * .5);
}

.m-ombre-dure,
.m-ombre-dure-accent,
.fond ~ .dessus :is(.m-ombre-dure, .m-ombre-dure-accent){
  --ombre-dure:var(--ombre-dure-couleur, color-mix(in srgb, var(--fg) 28%, var(--bg)));
  text-shadow:
    .012em .012em 0 var(--ombre-dure), .024em .024em 0 var(--ombre-dure),
    .036em .036em 0 var(--ombre-dure), .048em .048em 0 var(--ombre-dure),
    .06em  .06em  0 var(--ombre-dure), .072em .072em 0 var(--ombre-dure),
    .084em .084em 0 var(--ombre-dure), .096em .096em 0 var(--ombre-dure);
}
.m-ombre-dure-accent{ --ombre-dure-couleur:var(--accent) }

.display.m-masque{
  color:transparent;
  background-color:var(--fg);
  background-size:cover;
  background-position:50% 50%;
  background-repeat:no-repeat;
  -webkit-background-clip:text; background-clip:text;
  font-weight:max(800, var(--display-poids, 600));
  font-stretch:max(112%, calc(var(--display-chasse, 100) * 1%));
}

.m-masque,
.fond ~ .dessus .m-masque{ text-shadow:none }

.a-mouvement [data-monte]:not(.est-monte) .display.m-masque,
.a-mouvement .display.m-masque[data-monte]:not(.est-monte){ background-position:50% 100% }
[data-monte].est-monte .display.m-masque,
.display.m-masque[data-monte].est-monte{
  transition:background-position calc(var(--duree) * 2) var(--courbe) calc(var(--retard, 0) * var(--pas));
}

@media (prefers-reduced-motion:reduce){
  .a-mouvement [data-monte]:not(.est-monte) :is(.m-souligne, .m-souligne-epais, .m-surligne),
  .a-mouvement :is(.m-souligne, .m-souligne-epais, .m-surligne)[data-monte]:not(.est-monte){ --trait-l:100% }
  .a-mouvement [data-monte]:not(.est-monte) .display.m-masque,
  .a-mouvement .display.m-masque[data-monte]:not(.est-monte){ background-position:50% 50% }
  .m-souligne, .m-souligne-epais, .m-souligne-survol, .m-surligne,
  [data-monte].est-monte :is(.m-souligne, .m-souligne-epais, .m-surligne),
  :is(.m-souligne, .m-souligne-epais, .m-surligne)[data-monte].est-monte,
  [data-monte].est-monte .display.m-masque,
  .display.m-masque[data-monte].est-monte{ transition:none }
}