@property --p { syntax: "<number>"; inherits: true; initial-value: 1; }
:root {
  --n-t1: #eef0f2;  
  --n-t2: #d3d7dc;  
  --n-t3: #9ba1a9;  
  --n-trait: #ffffff1f;
  --n-ressort: cubic-bezier(.3, 1.35, .45, 1);
}

.n-scene { margin: 0; }
.n-sujet { position: relative; width: 100%; aspect-ratio: var(--n-ar); }
.n-sujet picture, .n-sujet img { display: block; width: 100%; height: 100%; }
.n-sujet img { object-fit: contain; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.n-toile { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.n-sujet img.is-peinte, .n-carte-ecran img.is-peinte { opacity: 0; }
.n-ecran { z-index: 2; overflow: hidden; border-radius: 50px; background: #000; opacity: 0; pointer-events: none; transition: opacity .6s var(--dn-pose); }
.n-ecran.is-pret { opacity: 1; }
.n-ecran > img, .n-ecran > canvas, .n-carte-ecran > img, .n-carte-ecran > canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.n-ecran > img + img, .n-carte-ecran > img + img { opacity: 0; }
.is-film > img { transition: opacity .26s var(--dn-pose), translate 1.1s var(--dn-pose); }
.is-film > img:not(.is-actif) { opacity: 0; translate: 0 2%; }
.is-film > img.is-actif { opacity: 1; }
.is-film > img.is-glisse { translate: 0 -2.5%; }
.n-ecran::after { content: ""; position: absolute; inset: 0; z-index: 3; background: linear-gradient(128deg, #ffffff1f 0%, #ffffff08 24%, transparent 40%); }
.n-ecran--masque { border-radius: 0; -webkit-mask: linear-gradient(#0000, #0000); mask: linear-gradient(#0000, #0000); }
.n-scene.is-vu .n-ecran--masque { -webkit-mask: var(--n-ecran-masque) 0 0 / 100% 100% no-repeat; mask: var(--n-ecran-masque) 0 0 / 100% 100% no-repeat; }
.n-ecran--allume::before { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; background: radial-gradient(130% 70% at 50% 28%, #ffffffc7, #ffffff2e 55%, #ffffff00 80%); }
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  html.v-pret .n-scene.is-vu .n-ecran--allume.is-pret::before { animation: n-allume-ecran 1.3s var(--dn-pose) calc(.3s + var(--k, 0) * .5s) backwards; }
}
@keyframes n-allume-ecran { 0% { opacity: 0; } 16% { opacity: 1; } 100% { opacity: 0; } }
.n-eclat { position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; opacity: 0; mix-blend-mode: overlay; }
.n-scene.is-vu .n-eclat { -webkit-mask: var(--n-masque) center / 100% 100% no-repeat; mask: var(--n-masque) center / 100% 100% no-repeat; }
.n-eclat::before { content: ""; position: absolute; inset: -20% -70%; background: linear-gradient(104deg, transparent 42%, #ffffff 50%, transparent 58%); translate: -60% 0; }
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  html.v-pret .n-scene.is-vu .n-eclat { animation: n-eclat-vu 1.8s var(--dn-glisse) var(--n-eclat-t, .5s) backwards; }
  html.v-pret .n-scene.is-vu .n-eclat::before { animation: n-balaie 1.8s var(--dn-glisse) var(--n-eclat-t, .5s) backwards; }
}
@keyframes n-eclat-vu { 0%, 100% { opacity: 0; } 15%, 80% { opacity: .9; } }
@keyframes n-balaie { from { translate: -60% 0; } to { translate: 60% 0; } }

.n-flot { position: absolute; width: var(--l, 120px); pointer-events: none; }
.n-flot-in { --a: 9px; --rr: 2.5deg; --b: 7s; }
.n-loin { z-index: -1; opacity: .58; }
.n-pres { z-index: 3; }
.n-pres .n-sujet { filter: drop-shadow(0 24px 26px #000000b3); }
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  html.v-pret .n-flot-in { animation: n-apesanteur var(--b) ease-in-out var(--bt, 0s) infinite alternate both; }
}
@keyframes n-apesanteur { from { translate: 0 calc(var(--a) * -1); rotate: calc(var(--rr) * -1); } to { translate: 0 var(--a); rotate: var(--rr); } }
html.n-lie .n-flot { animation: n-derive linear both; animation-timeline: view(); animation-range: cover; }
@keyframes n-derive { from { translate: 0 calc(var(--v, 0) * 1px); } to { translate: 0 calc(var(--v, 0) * -1px); } }

.n-sur { display: inline-flex; align-items: center; gap: 12px; margin: 0; font: 700 12px/1.2 var(--dn-texte); letter-spacing: .14em; text-transform: uppercase; color: var(--n-t3); }
.n-sur::before { content: ""; width: 24px; height: 1.5px; background: currentColor; }
.n-h2 { margin-top: 18px; font-size: clamp(34px, 4.7vw, 70px); }
.n-dit { margin-top: 22px; max-width: 46ch; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; color: var(--n-t2); text-wrap: pretty; }
.n-points { display: grid; gap: 14px; margin-top: 28px; }
.n-points li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; font-weight: 650; line-height: 1.4; color: var(--n-t1); }
.n-points svg { flex: none; width: 24px; height: 24px; padding: 3px; margin-top: -1px; border-radius: 50%; border: 1px solid #ffffff38; color: var(--n-t1); }
.n-lien { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 22px; font-weight: 700; color: var(--n-t1); text-decoration: underline; text-decoration-color: #ffffff47; text-underline-offset: 5px; transition: text-decoration-color var(--dn-t-2) ease; }
.n-lien:hover { text-decoration-color: currentColor; }
.n-lien span { transition: translate var(--dn-t-2) var(--dn-levee); }
.n-lien:hover span { translate: 4px 0; }


.n-verdict, .n-verdict-x, .n-verdict-y { position: absolute; inset: 0; pointer-events: none; }
.n-verdict { z-index: 3; }
.n-verdict { --bx: 61%; --by: 5%; }
@media (max-width: 899px) { .n-verdict { --bx: 64%; --by: 3%; } }
:is(.n-verdict-goutte, .n-verdict-onde, .n-verdict-bulle) { position: absolute; left: var(--bx); top: var(--by); translate: -50% -50%; }
.n-verdict-goutte { width: clamp(44px, 4.4vw, 64px); }
.n-verdict-goutte .n-sujet { filter: drop-shadow(0 14px 16px #000000b3); }
.n-verdict-onde { width: clamp(110px, 11vw, 170px); aspect-ratio: 1; border-radius: 50%; border: 1.5px solid #e6eaef; }
.n-verdict-bulle { display: grid; gap: 5px; width: max-content; margin: 0; padding: 13px 18px 14px; border-radius: 20px; text-align: left; background: linear-gradient(#141619f5, #141619f5) padding-box, linear-gradient(140deg, #f4f6f8, #7d848c 38%, #e7eaee 58%, #575d64) border-box; border: 1.5px solid transparent; box-shadow: 0 26px 46px -18px #000, 0 0 0 1px #0000008c; }
.n-verdict-bulle b { font: 600 clamp(16px, 1.3vw, 19px)/1.1 var(--dn-titre); letter-spacing: -.02em; color: var(--n-t1); white-space: nowrap; }
.n-verdict-sur { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--n-t3); }
.n-verdict-dit { font-size: 13px; color: var(--n-t2); white-space: nowrap; }
@media (max-width: 699px) {
  .n-verdict-bulle { gap: 4px; padding: 10px 14px 11px; border-radius: 17px; }
  .n-verdict-bulle b { width: 0; min-width: 100%; font-size: 15px; white-space: normal; text-wrap: balance; }
  .n-verdict-dit { font-size: 12px; }
}
.n-verdict-goutte, .n-verdict-onde { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  html.v-pret .n-verdict:not(.is-dehors) .n-verdict-x { translate: calc(var(--cx) - var(--bx)) 0; }
  html.v-pret .n-verdict:not(.is-dehors) .n-verdict-y { translate: 0 calc(var(--cy) - var(--by)); }
  html.v-pret .n-verdict:not(.is-dehors) .n-verdict-bulle { scale: .2; opacity: 0; }
  .n-verdict.is-dehors .n-verdict-x { transition: translate .95s cubic-bezier(.45, 0, .25, 1) .1s; }
  .n-verdict.is-dehors .n-verdict-y { transition: translate .95s cubic-bezier(.1, .7, .3, 1) .1s; }
  .n-verdict.is-dehors .n-verdict-goutte { animation: n-verdict-sort 1.15s .1s cubic-bezier(.3, 0, .5, 1) backwards; }
  .n-verdict.is-dehors .n-verdict-onde { animation: n-onde .9s 1s cubic-bezier(.2, .8, .3, 1); }
  .n-verdict.is-dehors .n-verdict-bulle { transition: scale .62s cubic-bezier(.3, 1.45, .45, 1) .98s, opacity .2s .98s; }
  .n-verdict.is-rentre .n-verdict-bulle { transition: scale .36s cubic-bezier(.5, 0, .75, 0), opacity .22s .14s; }
  .n-verdict.is-rentre :is(.n-verdict-x, .n-verdict-y) { transition: translate .7s cubic-bezier(.55, 0, .45, 1) .3s; }
  .n-verdict.is-rentre .n-verdict-goutte { animation: n-verdict-rentre 1s .12s cubic-bezier(.4, 0, .6, 1) backwards; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .n-verdict.is-dehors .n-verdict-bulle { animation: n-verdict-flotte 4.6s ease-in-out 1.6s infinite alternate both; }
  .is-hors .n-verdict-bulle { animation-play-state: paused; }
}
@keyframes n-verdict-sort { 0% { scale: .15; opacity: 0; } 14% { opacity: 1; } 80% { scale: 1; opacity: 1; } 100% { scale: 1.7; opacity: 0; } }
@keyframes n-verdict-rentre { 0% { scale: 1.6; opacity: 0; } 22% { scale: 1; opacity: 1; } 85% { opacity: 1; } 100% { scale: .12; opacity: 0; } }
@keyframes n-verdict-flotte { from { transform: translateY(-5px) rotate(-1.2deg); } to { transform: translateY(5px) rotate(1.2deg); } }
@keyframes n-onde { from { transform: scale(.55); opacity: .75; } to { transform: scale(2.7); opacity: 0; } }

.n-face-peinte { position: relative; color: transparent !important; text-shadow: none !important; background: none !important; }
.n-face-peinte > svg { visibility: hidden; }
.n-face { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; }
html.ua-samsung .n-eclat { display: none; }

.is-hors .n-flot-in { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .is-film > img { transition: none !important; } }

.n-garantie { justify-content: center; margin-top: 16px; }
.n-garantie li { color: var(--n-t3); }
.n-fin { position: relative; z-index: 1; padding-top: clamp(80px, 12vw, 170px); overflow-x: clip; text-align: center; }
.n-fin-texte { display: grid; justify-items: center; }
.n-fin-titre { margin-inline: auto; max-width: 16ch; font-size: clamp(36px, 5.6vw, 86px); }
.n-fin .s-champ { margin-top: clamp(28px, 4vw, 44px); }
.n-fin-titre { margin-top: 18px; }
.n-fin-liste { display: grid; justify-items: center; width: 100%; margin-top: clamp(28px, 4vw, 44px); }
.n-fin-liste .l-liste { margin-inline: auto; }
.n-fin .n-garantie { margin-top: 18px; }
.n-scene--fin { position: relative; width: min(170vw, 1400px); margin: clamp(20px, 4vw, 56px) 0 0 50%; translate: -50% 0;
  -webkit-mask: linear-gradient(#000 70%, transparent 99%), linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); -webkit-mask-composite: source-in;
  mask: linear-gradient(#000 70%, transparent 99%), linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask-composite: intersect; }
html.n-lie .n-scene--fin .n-arrive { transform-origin: 50% 100%; animation: n-redresse-vue linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
@keyframes n-redresse-vue { from { opacity: 0; transform: perspective(1300px) translateY(14%) rotateX(30deg) scale(.92); } 50% { opacity: 1; } }
html.n-lie .n-scene--fin .n-sujet { transform-origin: 62% 100%; animation: n-avance linear both; animation-timeline: view(); animation-range: cover 35% cover 85%; }
@keyframes n-avance { to { scale: 1.07; } }
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  html.v-pret:not(.n-lie) .n-scene--fin:not(.is-vu) .n-arrive { opacity: 0; }
  html.v-pret:not(.n-lie) .n-scene--fin.is-vu .n-arrive { transform-origin: 50% 100%; animation: n-redresse-vue 1.5s var(--dn-levee) backwards; }
}
.n-f-goutte-loin { --l: clamp(120px, 14vw, 220px); left: 3%; top: 12%; --v: -60; }
.n-f-goutte-loin .n-flot-in { --b: 8s; }
.n-f-goutte { --l: clamp(54px, 7vw, 120px); right: 7%; top: 8%; --v: 170; }
.n-f-goutte .n-flot-in { --a: 13px; --rr: 0deg; --b: 5.5s; --bt: -2s; }
@media (max-width: 699px) { .n-f-goutte-loin { display: none; } .n-f-goutte { right: 3%; top: 2%; } }

@keyframes n-pastille { from { transform: translateY(12px) scale(.86); opacity: 0; } }
.n-jaillit, .n-jet, .n-jet-y { position: absolute; inset: 0; pointer-events: none; }
.n-jaillit { z-index: 3; }
.n-jet-piece { position: absolute; left: var(--x); top: var(--y); width: var(--l); translate: -50% -50%; rotate: var(--r); }
.n-jet-piece .n-sujet { filter: drop-shadow(0 22px 24px #000000b3); }
.n-jet-piece .n-flot-in { --a: 10px; --rr: 2.5deg; --b: 7s; }
.n-jet--levis-501 { --x: 84%; --y: 19%; --l: 25%; --r: 10deg; }
.n-jet--nb-9060 { --x: 11%; --y: 17%; --l: 29%; --r: -14deg; }
.n-jet--nb-9060 .n-flot-in { --b: 6s; --bt: -2s; }
.n-jet--nuptse { --x: 86%; --y: 80%; --l: 27%; --r: 8deg; }
.n-jet--nuptse .n-flot-in { --b: 8s; --bt: -1s; }
@media (max-width: 899px) {
  .n-jet--levis-501 { --x: 82%; --y: 15%; --l: 25%; }
  .n-jet--nb-9060 { --x: 15%; --y: 13%; --l: 28%; }
  .n-jet--nuptse { --x: 84%; --y: 81%; --l: 27%; }
}
.n-jet-rang { position: absolute; left: 50%; bottom: -4%; translate: -50% 0; rotate: calc(var(--r) * -1); padding: 5px 10px 6px; border-radius: 999px; background: #141619f0; border: 1px solid #ffffff38; box-shadow: 0 10px 22px -10px #000; font: 700 12px/1 var(--dn-texte); letter-spacing: .02em; color: var(--n-t1); white-space: nowrap; }
.n-jaillit-onde { position: absolute; left: var(--cx); top: var(--cy); width: 30%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 1.5px solid #e6eaef; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  html.v-pret .n-jaillit:not(.is-jailli) .n-jet-piece { opacity: 0; }
  .n-jaillit.is-jailli .n-jaillit-onde { animation: n-onde .9s .15s cubic-bezier(.2, .8, .3, 1) backwards; }
  .n-jaillit.is-jailli .n-jet { animation: n-jet-x 1.1s calc(.3s + var(--i) * .3s) cubic-bezier(.3, .6, .3, 1) backwards; }
  .n-jaillit.is-jailli .n-jet-y { animation: n-jet-y 1.1s calc(.3s + var(--i) * .3s) cubic-bezier(.12, .85, .35, 1.08) backwards; }
  .n-jaillit.is-jailli .n-jet-piece { animation: n-jet-piece 1.1s calc(.3s + var(--i) * .3s) cubic-bezier(.2, .9, .3, 1.12) backwards; }
  .n-jaillit.is-jailli .n-jet-rang { animation: n-pastille .5s calc(1.2s + var(--i) * .3s) cubic-bezier(.3, 1.35, .45, 1) backwards; }
}
@keyframes n-jet-x { from { translate: calc(var(--cx) - var(--x)) 0; } }
@keyframes n-jet-y { from { translate: 0 calc(var(--cy) - var(--y)); } }
@keyframes n-jet-piece { from { scale: .06; rotate: calc(var(--r) - 50deg); opacity: 0; } 18% { opacity: 1; } }

.n-saut { position: relative; width: 100%; aspect-ratio: var(--n-ar); }
.n-morceau { position: absolute; }
.n-saut-main { z-index: 1; }
.n-saut-main .n-sujet { -webkit-mask: linear-gradient(to top, transparent 2%, #000 34%), linear-gradient(to right, transparent, #000 18%); -webkit-mask-composite: source-in; mask: linear-gradient(to top, transparent 2%, #000 34%), linear-gradient(to right, transparent, #000 18%); mask-composite: intersect; }
.n-saut-tel { z-index: 2; }
.n-saut-tel .n-sujet { filter: drop-shadow(0 40px 36px #000000c2); }
@media (prefers-reduced-motion: no-preference) {
  html.v-pret .n-scene--alertes.is-vu .n-saut-sursaut { animation: n-sursaut 3.4s linear .1s backwards; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  html.v-pret .n-saut-flotte { animation: n-apesanteur 5.5s ease-in-out infinite alternate both; --a: 1.6%; --rr: 1.4deg; }
}
@keyframes n-sursaut {
  0%, 25%, 38%, 51%, 64%, 77%, 90%, 100% { transform: none; }
  28.5%, 54.5%, 80.5% { transform: translateY(-5%) rotate(-3deg); }
  31.5%, 57.5%, 83.5% { transform: translateY(-.6%) rotate(1.8deg); }
  34.5%, 60.5%, 86.5% { transform: translateY(-1.6%) rotate(-.8deg); }
}
.n-notifs { position: absolute; z-index: 3; top: 9%; left: -8%; display: grid; gap: 10px; width: min(76%, 330px); }
.n-notifs li { display: grid; grid-template-columns: 34px 1fr auto; align-items: start; gap: 10px; padding: 11px 12px; border-radius: 18px; background: #16181cf2; border: 1px solid #ffffff2b; box-shadow: 0 24px 40px -20px #000, inset 0 1px 0 #ffffff14; text-align: left; }
.n-notif-icone { width: 34px; height: 34px; border-radius: 10px; border: 1px solid #ffffff38; display: grid; place-items: center; color: var(--n-t1); }
.n-notif-icone::before { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-radius: 50%; translate: -1px -1px; box-shadow: 5px 5px 0 -3.5px currentColor; }
.n-notif-texte { display: grid; gap: 2px; min-width: 0; }
.n-notif-texte b { font-size: 13px; font-weight: 800; color: var(--n-t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n-notif-texte span { font-size: 13px; line-height: 1.35; color: var(--n-t2); }
.n-notifs time { font-size: 12px; font-weight: 700; color: var(--n-t3); white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  html.v-pret .n-scene--alertes:not(.is-vu) .n-notifs li { opacity: 0; }
  html.v-pret .n-scene--alertes.is-vu .n-notifs li { animation: n-tombe .9s var(--n-ressort) calc(.8s + var(--i) * .9s) backwards; }
}
@keyframes n-tombe { from { opacity: 0; transform: translateY(-26px) scale(.94); } }