:where(.fd-hote) { position: relative; isolation: isolate; }
.fd-calque {
  --fd-k: 1; --fd-ra: .5;
  --fd-l: 233 236 241; --fd-c: 158 166 177; --fd-b1: transparent; --fd-b2: transparent; --fd-ombre: 11 12 14;
  --fd-dx: 1; --fd-dy: .35; --fd-fondu: min(30%, 360px);
  position: absolute; inset: 0; z-index: -1; overflow: clip; pointer-events: none; contain: layout paint style;
  --fd-bord: 100%;
  background: radial-gradient(55% 75% at var(--fd-bord) 45%, rgb(var(--fd-c) / calc(.06 * var(--fd-k))), transparent 72%);
  --fd-masque: linear-gradient(180deg, transparent, rgb(0 0 0 / .06) calc(var(--fd-fondu) * .25), rgb(0 0 0 / .26) calc(var(--fd-fondu) * .5), rgb(0 0 0 / .64) calc(var(--fd-fondu) * .75), #000 var(--fd-fondu), #000 calc(100% - var(--fd-fondu)), rgb(0 0 0 / .64) calc(100% - var(--fd-fondu) * .75), rgb(0 0 0 / .26) calc(100% - var(--fd-fondu) * .5), rgb(0 0 0 / .06) calc(100% - var(--fd-fondu) * .25), transparent);
  -webkit-mask: var(--fd-masque); mask: var(--fd-masque);
}
.fd-calque i, .fd-calque b { position: absolute; display: block; }
.fd-calque ~ .f-fond { display: none; }

.fd-calque[data-teinte="acier"] { --fd-l: 222 231 244; --fd-c: 150 170 201; }
.fd-calque[data-intensite="douce"] { --fd-k: .6; --fd-ra: .42; }
.fd-calque[data-intensite="forte"] { --fd-k: 1.45; --fd-ra: .6; }
.fd-calque[data-sens="gauche"] { --fd-dx: -1; --fd-dy: -.35; }
.fd-calque[data-sens="monte"] { --fd-dx: .2; --fd-dy: -1; }
.fd-calque[data-sens="descend"] { --fd-dx: -.2; --fd-dy: 1; }

.fd-lecture { inset: 0; z-index: 5; }
.fd-lecture::before { content: ""; position: absolute; inset: 0; background: var(--fd-voile, none); transition: opacity .8s ease; }
.fd-calque { --fd-loin: linear-gradient(#000, #000); }
.fd-calque[data-texte="gauche"] { --fd-loin: linear-gradient(90deg, rgb(0 0 0 / .16) 40%, #000 76%);
  --fd-voile: linear-gradient(90deg, rgb(var(--fd-ombre) / calc(var(--fd-ra) + .1)) 0%, rgb(var(--fd-ombre) / var(--fd-ra)) 40%, transparent 66%); }
.fd-calque[data-texte="droite"] { --fd-bord: 0%; --fd-loin: linear-gradient(270deg, rgb(0 0 0 / .16) 40%, #000 76%);
  --fd-voile: linear-gradient(270deg, rgb(var(--fd-ombre) / calc(var(--fd-ra) + .1)) 0%, rgb(var(--fd-ombre) / var(--fd-ra)) 40%, transparent 66%); }
.fd-calque[data-texte="centre"] { --fd-bord: 50%; --fd-loin: radial-gradient(62% 62% at 50% 46%, rgb(0 0 0 / .16) 45%, #000 100%);
  --fd-voile: radial-gradient(56% 58% at 50% 46%, rgb(var(--fd-ombre) / calc(var(--fd-ra) + .1)), rgb(var(--fd-ombre) / var(--fd-ra)) 55%, transparent 100%); }
@media (max-width: 760px) {
  .fd-calque:not([data-texte="aucun"]) { --fd-loin: linear-gradient(180deg, rgb(0 0 0 / .2) 45%, #000 88%);
    --fd-voile: linear-gradient(180deg, rgb(var(--fd-ombre) / calc(var(--fd-ra) + .06)) 0%, rgb(var(--fd-ombre) / var(--fd-ra)) 58%, transparent 92%); }
}
.fd-loin { inset: 0; -webkit-mask: var(--fd-loin); mask: var(--fd-loin); }
.fd-calque.is-lu .fd-lecture::before { opacity: .3; }
.fd-lecture > b { border-radius: 90px; background: rgb(var(--fd-ombre) / var(--fd-ra)); filter: blur(40px); }

.fd-calque[data-fond="metal"] { --fd-angle: 116deg; background: none; }
.fd-calque[data-fond="metal"][data-sens="gauche"] { --fd-angle: 64deg; }
.fd-calque[data-fond="metal"][data-sens="monte"] { --fd-angle: 162deg; }
.fd-calque[data-fond="metal"][data-sens="descend"] { --fd-angle: 18deg; }
.fd-repli { inset: -6%; background:
  linear-gradient(var(--fd-angle), transparent 12%, rgb(var(--fd-l) / calc(.06 * var(--fd-k))) 21%, transparent 29%, transparent 37%, rgb(var(--fd-c) / calc(.13 * var(--fd-k))) 46%, rgb(var(--fd-l) / calc(.2 * var(--fd-k))) 50%, rgb(var(--fd-c) / calc(.09 * var(--fd-k))) 54%, transparent 62%, rgb(var(--fd-l) / calc(.07 * var(--fd-k))) 73%, transparent 82%),
  radial-gradient(58% 52% at 80% 32%, rgb(var(--fd-c) / calc(.16 * var(--fd-k))), transparent 70%),
  radial-gradient(40% 40% at 92% 86%, rgb(var(--fd-l) / calc(.08 * var(--fd-k))), transparent 70%); }
.fd-repli-reflet { inset: -6%; background: linear-gradient(var(--fd-angle), transparent 49.7%, rgb(var(--fd-l) / calc(.45 * var(--fd-k))) 50.05%, transparent 50.4%);
  -webkit-mask: radial-gradient(46% 60% at 70% 42%, #000, transparent 75%); mask: radial-gradient(46% 60% at 70% 42%, #000, transparent 75%); }
.fd-gl { position: sticky; top: 0; z-index: 1; display: block; width: 100%; height: min(100%, 100lvh); opacity: 0; transition: opacity .9s var(--dn-pose, ease); }
.fd-gl.is-pret { opacity: 1; }
.fd-gl.is-entier { position: absolute; left: 0; top: 0; height: 100%; }

.fd-nappe { inset: -24% -14%; mix-blend-mode: screen; will-change: transform; }
.fd-calque[data-forme="aurore"] { --fd-a1: 64%; --fd-a2: 76%; }
.fd-calque[data-forme="aurore"][data-texte="droite"] { --fd-a1: 36%; --fd-a2: 24%; }
.fd-calque[data-forme="aurore"]:is([data-texte="centre"], [data-texte="aucun"]) { --fd-a1: 50%; --fd-a2: 50%; }
@media (max-width: 760px) { .fd-calque[data-forme="aurore"] { --fd-ay1: 64%; --fd-ay2: 88%; --fd-ay3: 70%; } }
.fd-nappe--1 { background: radial-gradient(48% 16% at var(--fd-a1) var(--fd-ay1, 30%), rgb(var(--fd-l) / calc(.27 * var(--fd-k))), rgb(var(--fd-c) / calc(.11 * var(--fd-k))) 46%, transparent 72%); rotate: -13deg; animation: fd-derive-1 34s ease-in-out infinite alternate; }
.fd-nappe--2 { background: radial-gradient(44% 13% at var(--fd-a2) var(--fd-ay2, 72%), rgb(var(--fd-c) / calc(.34 * var(--fd-k))), rgb(var(--fd-l) / calc(.08 * var(--fd-k))) 50%, transparent 72%); rotate: 9deg; animation: fd-derive-2 43s ease-in-out -14s infinite alternate; }
.fd-rayons { inset: -10% -30%; rotate: -9deg; mix-blend-mode: screen; will-change: transform;
  background: repeating-linear-gradient(90deg, rgb(var(--fd-l) / calc(.1 * var(--fd-k))) 0 1px, transparent 1px 9px, rgb(var(--fd-l) / calc(.05 * var(--fd-k))) 9px 11px, transparent 11px 23px);
  -webkit-mask: radial-gradient(34% 24% at var(--fd-a1) var(--fd-ay3, 40%), #000, rgb(0 0 0 / .4) 50%, transparent 100%); mask: radial-gradient(34% 24% at var(--fd-a1) var(--fd-ay3, 40%), #000, rgb(0 0 0 / .4) 50%, transparent 100%);
  animation: fd-rayons 52s ease-in-out -9s infinite alternate; }
@keyframes fd-derive-1 { from { translate: calc(var(--fd-dx) * -6%) calc(var(--fd-dy) * -5%); scale: 1; } to { translate: calc(var(--fd-dx) * 7%) calc(var(--fd-dy) * 6%); scale: 1.1; } }
@keyframes fd-derive-2 { from { translate: calc(var(--fd-dx) * 5%) calc(var(--fd-dy) * 4%); scale: 1.06; } to { translate: calc(var(--fd-dx) * -6%) calc(var(--fd-dy) * -5%); scale: .96; } }
@keyframes fd-rayons { from { translate: calc(var(--fd-dx) * -5%) calc(var(--fd-dy) * -3%); opacity: .7; } to { translate: calc(var(--fd-dx) * 5%) calc(var(--fd-dy) * 3%); opacity: 1; } }

.fd-calque[data-forme="projecteur"] { --fd-px: 68%; }
.fd-calque[data-forme="projecteur"][data-texte="droite"] { --fd-px: 32%; }
.fd-calque[data-forme="projecteur"]:is([data-texte="centre"], [data-texte="aucun"]) { --fd-px: 50%; }
.fd-cone { left: var(--fd-px); top: -2%; width: min(1100px, 170vw); height: 104%; translate: calc(-50% + var(--fd-mx, 0px)) 0; transform-origin: 50% 0;
  background: conic-gradient(at 50% 0%, transparent 176deg, rgb(var(--fd-l) / calc(.16 * var(--fd-k))) 180deg, transparent 184deg), conic-gradient(at 50% 0%, transparent 162deg, rgb(var(--fd-c) / calc(.1 * var(--fd-k))) 170deg, rgb(var(--fd-l) / calc(.24 * var(--fd-k))) 180deg, rgb(var(--fd-c) / calc(.1 * var(--fd-k))) 190deg, transparent 198deg);
  -webkit-mask: linear-gradient(180deg, #000 35%, transparent 94%); mask: linear-gradient(180deg, #000 35%, transparent 94%);
  animation: fd-balance 17s ease-in-out infinite alternate; transition: translate 1.2s var(--dn-levee, ease); }
.fd-poussiere { inset: 0; overflow: hidden;
  -webkit-mask: conic-gradient(at 50% 0%, transparent 168deg, #000 177deg, #000 183deg, transparent 192deg); mask: conic-gradient(at 50% 0%, transparent 168deg, #000 177deg, #000 183deg, transparent 192deg); }
.fd-poussiere::before { content: ""; position: absolute; inset: -40% 0 0; opacity: calc(.5 * var(--fd-k)); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='p' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='1' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 6 0 0 0 -4.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E") 0 0 / 260px 260px; animation: fd-poussiere 60s linear infinite; }
.fd-sol { left: var(--fd-px); bottom: 3%; width: min(860px, 120vw); height: 26%; translate: calc(-50% + var(--fd-mx, 0px)) 0; background: radial-gradient(closest-side, rgb(var(--fd-l) / calc(.22 * var(--fd-k))), rgb(var(--fd-c) / calc(.08 * var(--fd-k))) 55%, transparent); transition: translate 1.2s var(--dn-levee, ease); }
@media (max-width: 760px) {
  .fd-cone { -webkit-mask: linear-gradient(180deg, transparent 38%, rgb(0 0 0 / .6) 62%, #000 82%, transparent 98%); mask: linear-gradient(180deg, transparent 38%, rgb(0 0 0 / .6) 62%, #000 82%, transparent 98%); }
}
@keyframes fd-balance { from { rotate: calc(var(--fd-dx) * -3deg); } to { rotate: calc(var(--fd-dx) * 3deg); } }
@keyframes fd-poussiere { to { translate: 0 calc(var(--fd-dy) * 30% + 10%); } }

.fd-calque[data-forme="horizon"] { --fd-h: 70%; }
.fd-ciel, .fd-ligne, .fd-miroir { translate: 0 calc((.5 - var(--fd-p, .5)) * 26vh); }
.fd-ciel { inset: -10% 0; background: linear-gradient(180deg, transparent 0%, transparent calc(var(--fd-h) - 34%), rgb(var(--fd-c) / calc(.09 * var(--fd-k))) calc(var(--fd-h) - 6%), rgb(var(--fd-l) / calc(.2 * var(--fd-k))) calc(var(--fd-h) + 1%), rgb(var(--fd-c) / calc(.06 * var(--fd-k))) calc(var(--fd-h) + 3%), transparent calc(var(--fd-h) + 22%)); }
.fd-ligne { left: -40%; right: -40%; top: calc(var(--fd-h) + 1%); height: 2px; translate: calc((var(--fd-x, .62) - .5) * 60%) calc((.5 - var(--fd-p, .5)) * 26vh); background: radial-gradient(34% 100% at 50% 50%, rgb(var(--fd-l) / calc(.8 * var(--fd-k))), rgb(var(--fd-l) / calc(.2 * var(--fd-k))) 42%, transparent 72%); }
.fd-miroir { left: 0; right: 0; top: calc(var(--fd-h) + 2%); height: 30%; opacity: calc(.7 * var(--fd-k));
  background: repeating-linear-gradient(90deg, rgb(var(--fd-l) / .07) 0 1px, transparent 1px 5px, rgb(var(--fd-l) / .04) 5px 6px, transparent 6px 13px);
  -webkit-mask: radial-gradient(60% 100% at 50% 0%, #000, transparent 80%); mask: radial-gradient(60% 100% at 50% 0%, #000, transparent 80%); }

.fd-plaque { inset: 0; background: repeating-linear-gradient(180deg, rgb(255 255 255 / .016) 0 1px, transparent 1px 3px), linear-gradient(180deg, var(--fd-b1), var(--fd-b2)); }
.fd-plaque::before, .fd-bande::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='320'%3E%3Cfilter id='b' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0018 .62' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.8 0 0 0 -.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E") 0 0 / 640px 320px; }
.fd-plaque::before { opacity: calc(.07 * var(--fd-k)); }
.fd-bande { inset: 0 -50%; translate: calc((var(--fd-x, .62) - .5) * 50%) 0; will-change: translate;
  background: linear-gradient(90deg, transparent 37%, rgb(var(--fd-c) / calc(.05 * var(--fd-k))) 44%, rgb(var(--fd-l) / calc(.09 * var(--fd-k))) 48.6%, rgb(var(--fd-l) / calc(.13 * var(--fd-k))) 50%, rgb(var(--fd-l) / calc(.09 * var(--fd-k))) 51.4%, rgb(var(--fd-c) / calc(.05 * var(--fd-k))) 56%, transparent 63%); }
.fd-bande::after { opacity: .6; -webkit-mask: linear-gradient(90deg, transparent 42%, #000 48%, #000 52%, transparent 58%); mask: linear-gradient(90deg, transparent 42%, #000 48%, #000 52%, transparent 58%); filter: brightness(1.4); }
.fd-calque[data-forme="brosse"]:is([data-sens="monte"], [data-sens="descend"]) .fd-plaque::before,
.fd-calque[data-forme="brosse"]:is([data-sens="monte"], [data-sens="descend"]) .fd-bande::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='640'%3E%3Cfilter id='b' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62 .0018' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.8 0 0 0 -.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E") 0 0 / 320px 640px; }
.fd-calque[data-forme="brosse"]:is([data-sens="monte"], [data-sens="descend"]) .fd-plaque { background: repeating-linear-gradient(90deg, rgb(255 255 255 / .016) 0 1px, transparent 1px 3px), linear-gradient(180deg, var(--fd-b1), var(--fd-b2)); }
.fd-calque[data-forme="brosse"]:is([data-sens="monte"], [data-sens="descend"]) .fd-bande { inset: -50% 0; translate: 0 calc((var(--fd-x, .62) - .5) * 50%); background: linear-gradient(180deg, transparent 37%, rgb(var(--fd-c) / calc(.05 * var(--fd-k))) 44%, rgb(var(--fd-l) / calc(.1 * var(--fd-k))) 48.6%, rgb(var(--fd-l) / calc(.15 * var(--fd-k))) 50%, rgb(var(--fd-l) / calc(.1 * var(--fd-k))) 51.4%, rgb(var(--fd-c) / calc(.05 * var(--fd-k))) 56%, transparent 63%); }
.fd-calque[data-forme="brosse"]:is([data-sens="monte"], [data-sens="descend"]) .fd-bande::after { -webkit-mask: linear-gradient(180deg, transparent 42%, #000 48%, #000 52%, transparent 58%); mask: linear-gradient(180deg, transparent 42%, #000 48%, #000 52%, transparent 58%); }

.fd-calque[data-forme="topo"], .fd-calque[data-forme="grille"] { container-type: size; }
.fd-niveaux { position: absolute; inset: 0; width: 100%; height: 100%; display: block; fill: none; stroke: rgb(var(--fd-l)); stroke-width: 1; stroke-linejoin: round; opacity: calc(.15 * var(--fd-k)); }
.fd-spot { left: 0; top: 0; width: calc(2 * var(--fd-sr, 440px)); height: calc(2 * var(--fd-sr, 440px)); overflow: hidden; will-change: translate;
  translate: calc(var(--fd-sx, 70cqw) - var(--fd-sr, 440px)) calc(var(--fd-sy, 42cqh) - var(--fd-sr, 440px));
  -webkit-mask: radial-gradient(closest-side, #000, rgb(0 0 0 / .35) 45%, transparent 100%); mask: radial-gradient(closest-side, #000, rgb(0 0 0 / .35) 45%, transparent 100%); }
.fd-spot > * { inset: auto; left: 0; top: 0; width: 100cqw; height: 100cqh; will-change: translate;
  translate: calc(var(--fd-sr, 440px) - var(--fd-sx, 70cqw)) calc(var(--fd-sr, 440px) - var(--fd-sy, 42cqh)); }
.fd-niveaux--vif { opacity: calc(.62 * var(--fd-k)); stroke: rgb(var(--fd-l)); filter: drop-shadow(0 0 3px rgb(var(--fd-c) / .9)); }

.fd-trame { inset: 0; opacity: calc(.13 * var(--fd-k));
  background-image: radial-gradient(circle at 1px 1px, rgb(var(--fd-l) / .9) 1.1px, transparent 1.7px), linear-gradient(rgb(var(--fd-l) / .45) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--fd-l) / .45) 1px, transparent 1px);
  background-size: 56px 56px; -webkit-mask: radial-gradient(90% 80% at 62% 50%, #000 30%, transparent 92%); mask: radial-gradient(90% 80% at 62% 50%, #000 30%, transparent 92%); }
.fd-trame--vive { opacity: calc(.55 * var(--fd-k)); -webkit-mask: none; mask: none; background-image: radial-gradient(circle at 1px 1px, rgb(var(--fd-l)) 1.3px, transparent 2px), linear-gradient(rgb(var(--fd-c) / .8) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--fd-c) / .8) 1px, transparent 1px); }
.fd-balai { left: 0; right: 0; top: 0; height: 240px; translate: 0 calc(var(--fd-by, 420) * 1px - 100%); background: linear-gradient(180deg, transparent, rgb(var(--fd-c) / calc(.05 * var(--fd-k))) 60%, rgb(var(--fd-l) / calc(.16 * var(--fd-k))) 99%, transparent); -webkit-mask: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); mask: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); }
.fd-cellule { left: calc(var(--gx) * 56px + 1px); top: calc(var(--gy) * 56px + 1px); width: 55px; height: 55px; background: rgb(var(--fd-c) / calc(.26 * var(--fd-k))); box-shadow: inset 0 0 0 1px rgb(var(--fd-l) / .28), 0 0 24px rgb(var(--fd-c) / .25);
  opacity: max(0, 1 - max(var(--gy) * 56 - var(--fd-by, 420), var(--fd-by, 420) - var(--gy) * 56) / 190); }
.fd-spot > :is(.fd-niveaux--vif, .fd-trame--vive) { -webkit-mask: var(--fd-loin); mask: var(--fd-loin); }

.fd-calque.is-hors *, .fd-calque.is-hors ::before, .fd-calque.is-hors ::after,
html:is(.fd-pause, .fd-cache) .fd-calque *, html:is(.fd-pause, .fd-cache) .fd-calque ::before, html:is(.fd-pause, .fd-cache) .fd-calque ::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .fd-calque *, .fd-calque ::before, .fd-calque ::after { animation: none !important; transition: none !important; }
}
@media (hover: none) and (pointer: coarse) {
  .fd-nappe, .fd-rayons, .fd-cone, .fd-poussiere::before, .fd-bande, .fd-spot, .fd-spot > * { animation: none; will-change: auto; }
}