@property --q { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --fl-x { syntax: "<number>"; inherits: true; initial-value: 50; }
@property --fl-y { syntax: "<number>"; inherits: true; initial-value: 50; }
@property --cache { syntax: "<number>"; inherits: true; initial-value: 0; }

:is(.t-carte, .fx-photo) { container-type: inline-size; }
:is(.t-fx, .fx-calque) { position: absolute; z-index: 3; inset: 0; pointer-events: none; container-type: size; font-size: clamp(12px, 2.5cqw, 13.5px); }
:is(.t-fx, .fx-calque) > * { position: absolute; left: calc(var(--x, 50) * 1%); top: calc(var(--y, 50) * 1%); }
html:not(.t-anime) :is(.t-fx, .fx-calque) [data-fin] { display: none; }
.fx-l, .fx-tag, .fx-rail, .fx-pin > b { display: inline-flex; align-items: center; gap: .5em; padding: .64em .95em; border-radius: 999px; background: #0b0c0ee6; border: 1px solid #ffffff3d; color: #fff; font: 700 1em/1 var(--dn-texte); letter-spacing: .005em; white-space: nowrap; box-shadow: inset 0 1px 0 #ffffff1f, 0 14px 28px -12px #000; }

.fx-cadre { width: calc(var(--w) * 1%); height: calc(var(--h) * 1%); --c: clamp(10px, 3.4cqw, 20px); --b: #f4f6f8; --lueur: #ffffffa6; }
.fx-cadre::before { content: ""; position: absolute; inset: calc(var(--cache) * -9%); opacity: calc(1 - var(--cache));
  background:
    linear-gradient(var(--b), var(--b)) 0 0 / var(--c) 2px no-repeat, linear-gradient(var(--b), var(--b)) 0 0 / 2px var(--c) no-repeat,
    linear-gradient(var(--b), var(--b)) 100% 0 / var(--c) 2px no-repeat, linear-gradient(var(--b), var(--b)) 100% 0 / 2px var(--c) no-repeat,
    linear-gradient(var(--b), var(--b)) 0 100% / var(--c) 2px no-repeat, linear-gradient(var(--b), var(--b)) 0 100% / 2px var(--c) no-repeat,
    linear-gradient(var(--b), var(--b)) 100% 100% / var(--c) 2px no-repeat, linear-gradient(var(--b), var(--b)) 100% 100% / 2px var(--c) no-repeat;
  filter: drop-shadow(0 0 5px var(--lueur)) drop-shadow(0 1px 1px #000); }
.fx-cadre::after { content: ""; position: absolute; inset: 0; border-radius: 8px; border: 1px solid #ffffff1c; background: radial-gradient(80% 80% at 50% 50%, #ffffff0a, transparent 70%); opacity: calc(1 - var(--cache)); }
.fx-cadre--or { --b: var(--dn-or-vif); --lueur: #f0c86ab3; }
.fx-cadre--or::after { border-color: #f0c86a33; background: radial-gradient(80% 80% at 50% 50%, #f0c86a14, transparent 70%); }
.fx-cadre--or .fx-l { border-color: var(--dn-or-lumiere); color: var(--dn-or-vif); box-shadow: 0 0 26px -6px var(--dn-or-lueur), 0 14px 28px -12px #000; }
.fx-cadre > .fx-l { position: absolute; z-index: 1; }
.fx-l--ht { left: 0; bottom: calc(100% + .7em); }
.fx-l--hd { right: 0; bottom: calc(100% + .7em); }
.fx-l--bg { left: 0; top: calc(100% + .7em); }
.fx-l--bd { right: 0; top: calc(100% + .7em); }
.fx-l--dt { left: calc(100% + .8em); top: 0; }
.fx-l--ok { background: #f4f6f8f0; color: var(--dn-charbon); border-color: #fff; }
.fx-l--ok::before { content: ""; width: .8em; height: .42em; margin-top: -.2em; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: -45deg; }
.fx-l .fx-cloche { width: 1.05em; height: 1.05em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9M9 21h6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9M9 21h6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.fx-coeur { position: relative; width: 1.1em; height: 1em; margin-left: .15em; }
.fx-coeur::before, .fx-coeur::after { content: ""; position: absolute; inset: 0; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21S2 14.6 2 7.6A5.4 5.4 0 0 1 12 4.7a5.4 5.4 0 0 1 10 2.9C22 14.6 12 21 12 21Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21S2 14.6 2 7.6A5.4 5.4 0 0 1 12 4.7a5.4 5.4 0 0 1 10 2.9C22 14.6 12 21 12 21Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.fx-coeur::before { background: #ffffff40; }
.fx-coeur::after { background: linear-gradient(180deg, #fff, #b9bec4); transition: scale calc(.5s * var(--e-t, 1)) var(--t-ressort); }
html.t-anime :is(.t-ch, .fx-etapes):not(.e-4) .fx-coeur::after { scale: 0; }

.fx-tag { padding-left: 1.75em; translate: -1em -50%; opacity: calc(clamp(0, (var(--q, 1) - var(--t, -1)) * 14, 1) * (1 - var(--cache))); scale: calc(.7 + .3 * clamp(0, (var(--q, 1) - var(--t, -1)) * 14, 1)); transform-origin: 1em 50%; transition: background-color calc(.4s * var(--e-t, 1)) ease, color calc(.4s * var(--e-t, 1)) ease, border-color calc(.4s * var(--e-t, 1)) ease; }
.fx-tag::before { content: ""; position: absolute; left: .72em; top: 50%; width: .52em; height: .52em; margin-top: -.26em; border-radius: 50%; background: #fff; box-shadow: 0 0 0 .22em #ffffff2e, 0 0 8px #fff; }
.fx-tag--g { translate: calc(-100% + 1em) -50%; padding: .64em 1.75em .64em .95em; transform-origin: calc(100% - 1em) 50%; }
.fx-tag--g::before { left: auto; right: .72em; }
.fx-tag--monte b { color: #fff; font-weight: 800; }
.fx-tag--monte { color: var(--dn-argent-2); }
html.t-anime :is(.t-ch, .fx-etapes).e-2 .fx-tag[data-eteint="2"], html:not(.t-anime) .fx-tag[data-eteint] { background: #0b0c0e99; color: #ffffff73; border-color: #ffffff1f; text-decoration: line-through; text-decoration-thickness: 1.5px; }
html.t-anime :is(.t-ch, .fx-etapes).e-2 .fx-tag[data-eteint="2"]::before, html:not(.t-anime) .fx-tag[data-eteint]::before { background: #ffffff59; box-shadow: none; }

.fx-loupe { display: none; }
html.t-anime .fx-loupe { display: block; --r: clamp(38px, 10.5cqw, 62px); --m: 1.85; left: 0; top: 0; translate: calc(var(--fl-x) * 1cqw) calc(var(--fl-y) * 1cqh); width: calc(var(--r) * 2); height: calc(var(--r) * 2); margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1); border-radius: 50%;
  background: var(--src) no-repeat; background-size: calc(100cqw * var(--m)) calc(100cqh * var(--m));
  background-position: calc(var(--r) - var(--fl-x) / 100 * 100cqw * var(--m)) calc(var(--r) - var(--fl-y) / 100 * 100cqh * var(--m));
  box-shadow: 0 0 0 4px #d9dcdf, 0 0 0 6px #4a4f57, 0 0 0 7px #000, 0 30px 50px -10px #000, inset 0 0 26px #ffffff2e;
  animation: fx-loupe 1s linear both paused; animation-delay: calc(var(--q, 0) * -1s); }
html.t-anime .fx-loupe::after { content: ""; position: absolute; left: 84%; top: 84%; width: 46%; height: 13%; border-radius: 8px; transform-origin: 0 50%; rotate: 45deg; background: linear-gradient(180deg, #fff, #8d939a 50%, #3a3f45); box-shadow: 0 8px 14px #000; }
@keyframes fx-loupe {
  0% { --fl-x: 80; --fl-y: 4; opacity: 0; scale: .6; }
  7% { opacity: 1; scale: 1; }
  14% { --fl-x: 13; --fl-y: 25; }
  23% { --fl-x: 57; --fl-y: 22; }
  33% { --fl-x: 15; --fl-y: 60; }
  42% { --fl-x: 49; --fl-y: 61; }
  50% { --fl-x: 62; --fl-y: 42; }
  61% { --fl-x: 33; --fl-y: 37; opacity: 1; scale: 1; }
  70% { --fl-x: 33; --fl-y: 37; opacity: 1; scale: 1; }
  80%, 100% { --fl-x: 33; --fl-y: 37; opacity: 0; scale: 1.25; }
}

.fx-pin { width: 1.3em; height: 1.3em; translate: -50% -50%; opacity: calc(1 - var(--cache)); }
.fx-pin > i { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #b9bec4 50%, #4a4f57); box-shadow: 0 0 0 .3em #ffffff26, 0 6px 14px #000c; }
.fx-pin > i::after { content: ""; position: absolute; inset: -.3em; border-radius: 50%; border: 1.5px solid #fff; opacity: 0; }
html.t-anime :is(.t-ch, .fx-etapes).is-la.e-1 .fx-pin > i::after { animation: fx-bat 1.8s ease-out .6s infinite; }
@keyframes fx-bat { 0% { opacity: .9; scale: .8; } 100% { opacity: 0; scale: 2.4; } }
.fx-pin > b { position: absolute; left: calc(100% + 1.5em); top: 50%; translate: calc(var(--cache) * -.6em) -50%; opacity: calc(1 - var(--cache)); }
.fx-pin > b::before { content: ""; position: absolute; right: 100%; top: 50%; width: 1.5em; height: 1.5px; background: linear-gradient(90deg, transparent, #fff); }

.fx-jauge { width: 0; height: calc(var(--h) * 1%); }
.fx-jauge-piste { position: absolute; left: -2px; top: 0; bottom: 0; width: 4px; border-radius: 4px; background: #ffffff26; box-shadow: inset 0 0 0 1px #ffffff1f, 0 0 0 1px #00000080; opacity: calc(1 - var(--cache)); }
.fx-jauge-plein { position: absolute; left: -3.5px; top: 11%; bottom: 22%; width: 7px; border-radius: 7px; background: linear-gradient(180deg, #fff, #c9ced3 50%, #fff); box-shadow: 0 0 14px #ffffffb3, 0 0 0 1px #000; transform-origin: 50% 100%; transform: scaleY(calc(1 - var(--cache))); }
.fx-jauge-m { position: absolute; right: 1em; top: calc(var(--m) * 100%); translate: calc(var(--cache) * 1.2em) -50%; opacity: calc(1 - var(--cache)); padding: .5em .8em; }
.fx-jauge-m::after { content: ""; position: absolute; left: 100%; top: 50%; width: 1em; height: 1.5px; background: #fff; }
.fx-jauge-marge { position: absolute; right: 1.3em; top: 47%; translate: 0 -50%; justify-items: end; text-align: right; opacity: calc(1 - var(--cache)); scale: calc(1 - var(--cache) * .35); transform-origin: 100% 50%; }

.fx-chiffre { display: grid; justify-items: center; gap: .3em; translate: -50% -50%; text-align: center; opacity: calc(1 - var(--cache)); scale: calc(1 - var(--cache) * .4); }
.fx-chiffre b { font: 600 clamp(22px, 7.4cqw, 44px)/1 var(--dn-titre); letter-spacing: -.06em; color: transparent; background-image: var(--dn-chrome-reflet), var(--dn-chrome-chiffre); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 8px 18px #000) drop-shadow(0 0 2px #000); padding-bottom: .04em; }
.fx-chiffre small { font: 800 max(12px, .82em)/1.2 var(--dn-texte); letter-spacing: .12em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 8px #000, 0 0 2px #000; white-space: nowrap; }
.fx-chiffre--grand b { font-size: clamp(28px, 9.5cqw, 56px); }
html.t-anime :is(.t-ch, .fx-etapes) .fx-chiffre b { animation: none; }
html.t-anime :is(.t-ch, .fx-etapes).e-2 .fx-chiffre--grand b, html.t-anime :is(.t-ch, .fx-etapes).e-4 .fx-chiffre b { animation: dn-reflet calc(1.8s * var(--e-t, 1)) var(--dn-levee) calc(.3s * var(--e-t, 1)) backwards; }

.fx-courbe { width: calc(var(--w) * 1%); height: calc(var(--h) * 1%); }
.fx-courbe svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fx-courbe path { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 2 2; stroke-dashoffset: calc(var(--cache) * 2); filter: drop-shadow(0 0 5px #ffffffb3) drop-shadow(0 2px 4px #000); }
.fx-courbe > small { position: absolute; right: 0; top: calc(100% + .7em); font: 800 max(12px, .82em)/1.2 var(--dn-texte); letter-spacing: .1em; text-transform: uppercase; color: var(--dn-argent-2); text-shadow: 0 2px 8px #000; white-space: nowrap; opacity: calc(1 - var(--cache)); }
.fx-courbe > small b { color: #fff; font-family: var(--dn-titre); font-weight: 600; letter-spacing: -.02em; text-transform: none; font-size: 1.25em; }
.fx-courbe--grande > small { right: auto; left: 50%; translate: -50% 0; }

.fx-scan { display: none; }
html.t-anime .fx-scan { --sp: clamp(0, (var(--q, 1) - .08) / .3, 1); display: block; position: absolute; left: -2%; right: -2%; top: calc(var(--sp) * 100%); height: 2px; background: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent); box-shadow: 0 0 18px 4px #ffffff73, 0 -40px 60px -20px #ffffff26; opacity: clamp(0, min(var(--sp), 1 - var(--sp)) * 8, 1); }

.fx-etiquette { display: grid; gap: .35em; translate: -50% -50%; rotate: calc(-6deg + var(--cache) * -14deg); scale: calc(1 + var(--cache) * .4); opacity: calc(1 - var(--cache)); padding: .95em 1.15em .95em 2.3em; border-radius: .7em 1.1em 1.1em .7em; background: radial-gradient(120% 90% at 20% 0%, #fff, transparent 60%), linear-gradient(170deg, #f5f6f8, #c9cdd2); color: var(--dn-charbon); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px #000, 0 26px 40px -14px #000; }
.fx-etiquette::before { content: ""; position: absolute; left: .8em; top: 50%; width: .7em; height: .7em; margin-top: -.35em; border-radius: 50%; background: #0b0c0e; box-shadow: inset 0 1px 2px #000; }
.fx-etiquette b { font: 600 2.4em/1 var(--dn-titre); letter-spacing: -.05em; }
.fx-etiquette small { display: grid; font-size: max(12px, .9em); font-weight: 800; letter-spacing: .01em; white-space: nowrap; }
.fx-etiquette small > span { grid-area: 1 / 1; opacity: calc(1 - var(--cache)); }
.fx-fil { left: 0 !important; top: 0 !important; width: 100%; height: 100%; overflow: visible; }
.fx-fil path { fill: none; stroke: #e8eaed; stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 2 2; stroke-dashoffset: calc(var(--cache) * 2); filter: drop-shadow(0 1px 2px #000); }

.fx-histo { display: flex; align-items: flex-end; gap: 4%; width: calc(var(--w) * 1%); height: calc(var(--h) * 1%); }
.fx-histo i { --k: clamp(0, (1 - var(--cache)) * 2.2 - var(--n, 0) * .1, 1); flex: 1; height: calc(var(--h) * 100%); border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #ffffff73, #ffffff12); border: 1px solid #ffffff4d; border-bottom: 0; transform-origin: 50% 100%; transform: scaleY(var(--k)); }
.fx-histo i.is-toi { background: linear-gradient(180deg, #fff, #ffffff4d); box-shadow: 0 0 18px #ffffff80; }
.fx-histo small { position: absolute; left: 0; top: calc(100% + .5em); font: 800 max(12px, .8em)/1 var(--dn-texte); letter-spacing: .1em; text-transform: uppercase; color: var(--dn-argent-2); white-space: nowrap; text-shadow: 0 2px 6px #000; opacity: calc(1 - var(--cache)); }

.fx-ondes { width: 0; height: 0; }
.fx-ondes i { position: absolute; left: -4.5em; top: -4.5em; width: 9em; height: 9em; border-radius: 50%; border: 1.5px solid #ffffffb3; opacity: 0; }
html:not(.t-anime) .fx-ondes i { opacity: .35; scale: .5; }
html:not(.t-anime) .fx-ondes i + i { scale: .9; opacity: .2; }
html.t-anime :is(.t-ch, .fx-etapes).is-la.e-4 .fx-ondes i { animation: fx-onde 2.4s ease-out infinite; }
html.t-anime :is(.t-ch, .fx-etapes).e-4 .fx-ondes i:nth-child(2) { animation-delay: .8s; } html.t-anime :is(.t-ch, .fx-etapes).e-4 .fx-ondes i:nth-child(3) { animation-delay: 1.6s; }
@keyframes fx-onde { 0% { opacity: .9; scale: .15; } 100% { opacity: 0; scale: 1.6; } }
.fx-notif { display: flex; align-items: center; gap: .75em; translate: calc(-100% + var(--cache) * 1.5em) 0; opacity: calc(1 - var(--cache)); padding: .6em 1em .6em .6em; border-radius: 1.15em; background: #1d2024eb; border: 1px solid #ffffff33; color: #fff; font-weight: 700; white-space: nowrap; box-shadow: inset 0 1px 0 #ffffff1f, 0 20px 34px -12px #000; transition-delay: calc((var(--i, 0) * .14s) * var(--e-t, 1)) !important; }
.fx-notif > span { display: grid; gap: .25em; line-height: 1.1; }
.fx-notif small { font-size: max(12px, .78em); font-weight: 700; color: var(--dn-argent-3); }
.fx-notif-ic { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: .7em; font: 600 1em/1 var(--dn-titre); font-style: normal; color: var(--dn-charbon); background: linear-gradient(180deg, #fff, #b9bec4); }
html.t-anime :is(.t-ch, .fx-etapes).is-la.e-3 .fx-cadre--arme::after { border-color: #ffffff80; box-shadow: 0 0 30px -4px #ffffff66, inset 0 0 20px #ffffff1f; animation: fx-arme 1.6s ease-in-out infinite; }
@keyframes fx-arme { 0%, 100% { opacity: calc((1 - var(--cache)) * .3); } 50% { opacity: calc(1 - var(--cache)); } }

.fx-ecrit { display: grid; gap: .25em; rotate: -2.5deg; transform-origin: 0 0; }
.fx-ecrit > span { --k: clamp(0, (1 - var(--cache)) * 2.2 - var(--i, 0) * .4, 1); display: block; font: italic 700 clamp(12px, 2.8cqw, 16px)/1.22 var(--dn-texte); letter-spacing: -.01em; color: #17191d; white-space: nowrap; clip-path: inset(-20% calc((1 - var(--k)) * 100%) -20% 0); text-shadow: 0 0 1px #17191d66; }
.fx-ecrit--question { rotate: -1.5deg; }
.fx-ecrit--question > span { color: #2a2d33; font-weight: 600; font-size: clamp(12px, 3cqw, 17px); }
.fx-ecrit { transition-duration: calc(1.6s * var(--e-t, 1)) !important; transition-timing-function: linear !important; }
.fx-tampon { display: inline-flex; align-items: center; gap: .45em; translate: 0 -50%; rotate: -5deg; scale: calc(1 + var(--cache) * .7); opacity: calc(1 - var(--cache)); padding: .5em .8em; border: 2px solid #17191d; border-radius: .5em; color: #17191d; font: 800 max(12px, .95em)/1 var(--dn-texte); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.fx-tampon::before { content: ""; width: .75em; height: .4em; margin-top: -.2em; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: -45deg; }

.fx-rail { translate: -50% calc(-50% + var(--cache) * -.8em); opacity: calc(1 - var(--cache)); transition-delay: calc((var(--i, 0) * .14s) * var(--e-t, 1)) !important; }
.fx-rail::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1.5px; height: 1.6em; background: linear-gradient(180deg, #fff, transparent); }
.fx-rail--vendu { transition: background-color calc(.5s * var(--e-t, 1)) ease, color calc(.5s * var(--e-t, 1)) ease, box-shadow calc(.5s * var(--e-t, 1)) ease; }
html.t-anime :is(.t-ch, .fx-etapes).e-3 .fx-rail--vendu, html:not(.t-anime) .fx-rail--vendu { background: #f4f6f8f0; color: var(--dn-charbon); box-shadow: 0 0 34px -4px #ffffffa6, 0 14px 28px -12px #000; }

.fx-mois { width: calc(var(--w) * 1%); height: calc(var(--h) * 1%); }
.fx-mois svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fx-mois path { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 2 2; stroke-dashoffset: calc(var(--cache) * 2); filter: drop-shadow(0 0 6px #ffffffa6); }
.fx-mois i { --k: clamp(0, (1 - var(--cache)) * 1.8 - var(--i, 0) * .25, 1); position: absolute; left: calc(var(--px) * 1%); top: calc(var(--py) * 1%); width: .8em; height: .8em; margin: -.4em; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #9aa0a7 60%, #3a3f45); box-shadow: 0 0 0 .25em #ffffff1f, 0 0 10px #ffffffa6; scale: var(--k); }
.fx-mois i.is-la { width: 1.1em; height: 1.1em; margin: -.55em; background: #fff; box-shadow: 0 0 0 .3em #ffffff33, 0 0 18px #fff; }
.fx-mois small { position: absolute; left: 50%; top: calc(100% + .55em); translate: -50% 0; font: 800 max(12px, .78em)/1 var(--dn-texte); letter-spacing: .08em; text-transform: uppercase; color: var(--dn-argent-2); white-space: nowrap; text-shadow: 0 2px 6px #000; }
html.t-anime :is(.t-ch, .fx-etapes).e-4 .fx-mois i.is-la { animation: fx-pouls calc(1.4s * var(--e-t, 1)) ease-in-out calc(.2s * var(--e-t, 1)) 3; }
@keyframes fx-pouls { 50% { box-shadow: 0 0 0 .6em #ffffff26, 0 0 26px #fff; } }

@container (max-width: 480px) {
  .fx-cadre > .fx-l--dt { left: calc(100% + .55em); }
  .fx-courbe--grande > small { display: grid; justify-items: center; gap: .25em; }
  .fx-courbe--grande > small .fx-sep { display: none; }
  .fx-l, .fx-tag, .fx-rail, .fx-pin > b { gap: .38em; padding: .5em .72em; letter-spacing: 0; }
  .fx-tag { padding-left: 1.55em; }
  .fx-tag--g { padding: .5em 1.55em .5em .72em; }
  .fx-notif { gap: .55em; padding: .42em .8em .42em .42em; border-radius: .95em; }
  .fx-notif-ic { width: 1.9em; height: 1.9em; }
  .fx-etiquette { padding: .75em .9em .75em 2em; }
  .fx-etiquette::before { left: .7em; }
  .fx-etiquette b { font-size: 2.1em; }
  .fx-chiffre small, .fx-courbe > small, .fx-histo small, .fx-mois small { letter-spacing: .04em; }
  .fx-tampon { display: inline-grid; grid-template-columns: auto auto; align-items: center; column-gap: .45em; row-gap: .2em; padding: .45em .65em; letter-spacing: .03em; }
  .fx-tampon::before { grid-row: span 2; }
}

html.t-anime :is(.t-fx, .fx-calque) [data-e], html.t-anime :is(.t-fx, .fx-calque) [data-fin] { transition: --cache calc(.75s * var(--e-t, 1)) cubic-bezier(.3, 1.25, .5, 1); }
html.t-anime :is(.t-fx, .fx-calque) :is(.fx-courbe, .fx-mois, .fx-fil)[data-e] { transition-duration: calc(1.5s * var(--e-t, 1)); transition-timing-function: var(--dn-glisse); }
html.t-anime :is(.t-fx, .fx-calque) .fx-histo[data-e] { transition-duration: calc(1.3s * var(--e-t, 1)); transition-timing-function: var(--dn-levee); }
html.t-anime :is(.t-fx, .fx-calque) .fx-ecrit[data-e] { transition: --cache calc(1.7s * var(--e-t, 1)) linear; }
html.t-anime :is(.t-ch, .fx-etapes):not(.e-1) :is(.t-fx, .fx-calque) [data-e="1"], html.t-anime :is(.t-ch, .fx-etapes):not(.e-2) :is(.t-fx, .fx-calque) [data-e="2"],
html.t-anime :is(.t-ch, .fx-etapes):not(.e-3) :is(.t-fx, .fx-calque) [data-e="3"], html.t-anime :is(.t-ch, .fx-etapes):not(.e-4) :is(.t-fx, .fx-calque) [data-e="4"],
html.t-anime :is(.t-ch, .fx-etapes).e-2 :is(.t-fx, .fx-calque) [data-fin="2"], html.t-anime :is(.t-ch, .fx-etapes).e-3 :is(.t-fx, .fx-calque) [data-fin="3"], html.t-anime :is(.t-ch, .fx-etapes).e-4 :is(.t-fx, .fx-calque) [data-fin="4"] { --cache: 1; }
html.t-anime :is(.t-fx, .fx-calque) .fx-cadre > .fx-l:not([data-e]):not([data-fin]) { opacity: calc(1 - var(--cache)); translate: 0 calc(var(--cache) * .5em); }
html.t-anime :is(.t-fx, .fx-calque) .fx-cadre > .fx-l[data-e], html.t-anime :is(.t-fx, .fx-calque) .fx-cadre > .fx-l[data-fin] { opacity: calc(1 - var(--cache)); translate: 0 calc(var(--cache) * .5em); }
html.t-anime :is(.t-ch, .fx-etapes) :is(.t-fx, .fx-calque) [data-e].fx-tampon { transition: --cache calc(.5s * var(--e-t, 1)) cubic-bezier(.5, 0, .7, .4); }