.mots .mot-m { display: inline-block; overflow: clip; vertical-align: top; padding: .12em 0 .2em; margin: -.12em 0 -.2em; }
.mots .mot-i { display: inline-block; }
html.anim .mots.rev { opacity: 1; translate: 0 0; }
html.anim .mots .mot-i { translate: 0 130%; opacity: 0; }
html.anim .mots.vu .mot-i {
  animation: mot-monte .95s var(--entree) both;
  animation-delay: calc(var(--i, 0) * 90ms + var(--n, 0) * 42ms);
}
@keyframes mot-monte { from { translate: 0 130%; opacity: 0; } to { translate: 0 0; opacity: 1; } }
.defilement {
  position: fixed; top: 0; left: 0; z-index: 90; width: 100%; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, var(--acc), var(--g2) 60%, var(--lueur));
  transform-origin: 0 50%; scale: 0 1;
}
@supports (animation-timeline: scroll()) {
  html.anim .defilement { animation: defile linear both; animation-timeline: scroll(root); }
  html.anim .hero-pile { animation: pile-derive linear both; animation-timeline: scroll(root); animation-range: 0 900px; }
  html.anim .hero-appareil { animation: appareil-derive linear both; animation-timeline: scroll(root); animation-range: 0 900px; }
  html.anim .onglets { animation: pile-derive linear both; animation-timeline: scroll(root); animation-range: 0 900px; }
}
@keyframes defile { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes pile-derive { to { transform: translateY(-90px); } }
@keyframes appareil-derive { to { translate: 0 -70px; } }
.aurore .a1, .aurore .a2, .aurore .a3 { transition: transform 1.2s var(--doux); }
.aurore .a1 { transform: translate(calc(var(--px, 0) * 26px), calc(var(--py, 0) * 18px)); }
.aurore .a2 { transform: translate(calc(var(--px, 0) * -20px), calc(var(--py, 0) * -14px)); }
.aurore .a3 { transform: translate(calc(var(--px, 0) * 14px), calc(var(--py, 0) * -10px)); }
.btn { translate: var(--dx, 0px) var(--dy, 0px); transition: translate .35s var(--doux), transform .25s var(--entree), box-shadow .25s var(--doux), background var(--tr) var(--doux), filter var(--tr) var(--doux), color var(--tr) var(--doux); }
.halo { position: relative; isolation: isolate; }
.halo::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
  transition: opacity .4s var(--doux);
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--acc) 14%, transparent), transparent 66%);
}
.halo:hover::after { opacity: 1; }
:root[data-theme="nuit"] .halo::after { background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--lueur) 16%, transparent), transparent 66%); }
@property --ang { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
.ecran::after, .prix-premium::before {
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 3px; pointer-events: none;
  background: conic-gradient(from var(--ang), transparent 0deg, transparent 262deg,
              color-mix(in srgb, var(--g1) 55%, transparent) 294deg, var(--g1) 318deg, var(--g2) 346deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--g2) 70%, transparent)) drop-shadow(0 0 12px color-mix(in srgb, var(--g1) 60%, transparent));
}
.hero-appareil .ecran::after, .z6-ecran::after, .sc-ecran::after, .ecran-large::after,
.verrou-zone .ecran-verrou::after, .ecran-carte.cal::after, .ecran-carte.calc::after {
  background: conic-gradient(from var(--ang),
              transparent 0deg, transparent 82deg,
              color-mix(in srgb, var(--g1) 55%, transparent) 114deg, var(--g1) 138deg, var(--g2) 166deg, transparent 180deg,
              transparent 262deg,
              color-mix(in srgb, var(--g1) 55%, transparent) 294deg, var(--g1) 318deg, var(--g2) 346deg, transparent 360deg);
}
.prix-premium::before {
  inset: -2px; padding: 3px; opacity: 1;
  background: conic-gradient(from var(--ang),
              transparent 0deg, transparent 64deg,
              color-mix(in srgb, var(--acc) 65%, transparent) 106deg, var(--lueur) 136deg, var(--g2) 160deg, #fff 173deg, transparent 180deg,
              transparent 244deg,
              color-mix(in srgb, var(--acc) 65%, transparent) 286deg, var(--lueur) 316deg, var(--g2) 340deg, #fff 353deg, transparent 360deg);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--g2) 75%, transparent)) drop-shadow(0 0 16px color-mix(in srgb, var(--acc) 50%, transparent));
}
.prix-badge { isolation: isolate; }
.prix-badge::after {
  content: ""; position: absolute; inset: -1.5px; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--ang) at var(--cx, 50%) var(--cy, 50%),
              transparent 0deg, transparent 64deg,
              color-mix(in srgb, var(--acc) 65%, transparent) 106deg, var(--lueur) 136deg, var(--g2) 160deg, #fff 173deg, transparent 180deg,
              transparent 244deg,
              color-mix(in srgb, var(--acc) 65%, transparent) 286deg, var(--lueur) 316deg, var(--g2) 340deg, #fff 353deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--g2) 70%, transparent));
}
.prix-badge-txt, .prix-badge i {
  background: conic-gradient(from var(--ang) at var(--cx, 50%) var(--cy, 50%),
              transparent 0deg, transparent 64deg,
              var(--g1) 106deg, var(--g3) 136deg, var(--g2) 160deg, var(--g2) 173deg, transparent 180deg,
              transparent 244deg,
              var(--g1) 286deg, var(--g3) 316deg, var(--g2) 340deg, var(--g2) 353deg, transparent 360deg),
            linear-gradient(var(--acc-fort), var(--acc-fort));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
html.anim .ecran::after { animation: tourne 7s linear infinite paused; }
html.anim .prix-premium { animation: tourne 6s linear infinite paused; }
html.anim .ecran.en-vue::after, html.anim .prix-premium.en-vue { animation-play-state: running; }
html.anim .sc-ecran:not(.actif)::after { animation-play-state: paused; }
@keyframes tourne { to { --ang: 360deg; } }
.ecran-carte { transition: translate .5s var(--entree), box-shadow .5s var(--doux); }
.fonction-visuel:hover .ecran-carte { translate: 0 -6px; }
.appareil { transition: box-shadow .5s var(--doux), transform .9s var(--entree); }
.appareil:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), 0 56px 110px -44px rgba(58,50,99,.6); }
:root[data-theme="nuit"] .appareil:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 56px 110px -44px rgba(0,0,0,.95); }
html.anim .entete-barre { animation: entete-entre .9s var(--entree) both .15s; }
@keyframes entete-entre { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
html.anim .hero-appareil .e-rail > * { animation: fondu-monte .55s var(--entree) both; animation-delay: calc(.55s + var(--r, 0) * 45ms); }
.hero-appareil .e-rail > :nth-child(2) { --r: 1; } .hero-appareil .e-rail > :nth-child(3) { --r: 2; } .hero-appareil .e-rail > :nth-child(4) { --r: 3; }
.hero-appareil .e-rail > :nth-child(5) { --r: 4; } .hero-appareil .e-rail > :nth-child(6) { --r: 5; } .hero-appareil .e-rail > :nth-child(7) { --r: 6; }
.hero-appareil .e-rail > :nth-child(8) { --r: 7; } .hero-appareil .e-rail > :nth-child(9) { --r: 8; } .hero-appareil .e-rail > :nth-child(10) { --r: 9; }
.hero-appareil .e-rail > :nth-child(11) { --r: 10; } .hero-appareil .e-rail > :nth-child(12) { --r: 11; } .hero-appareil .e-rail > :nth-child(13) { --r: 12; } .hero-appareil .e-rail > :nth-child(14) { --r: 13; }
html.anim .hero-appareil .e-entete { animation: fondu-monte .6s var(--entree) both .5s; }
html.anim .hero-appareil .e-page > * { animation: fondu-monte .85s var(--entree) both; animation-delay: calc(.75s + var(--c, 0) * 150ms); }
.hero-appareil .e-page > :nth-child(2) { --c: 1; } .hero-appareil .e-page > :nth-child(3) { --c: 2; } .hero-appareil .e-page > :nth-child(4) { --c: 3; } .hero-appareil .e-page > :nth-child(5) { --c: 4; }
@keyframes fondu-monte { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
html.anim .bulle { animation: bulle-pop .8s var(--ressort) both, flotte 7s ease-in-out infinite; }
html.anim .bulle-g { animation-delay: 1.35s, -1s; }
html.anim .bulle-d { animation-delay: 1.55s, -3.5s; }
html.anim .bulle-b { animation-delay: 1.75s, -5.5s; }
html.anim .bulle:hover { animation-play-state: paused; }
@keyframes bulle-pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@media (max-width: 1040px) {
  html.anim .hero-appareil { animation: none; }
  html.anim .bulle { animation: none; }
}
@media (max-width: 640px) {
  html.anim .bulle { animation: bulle-pop .8s var(--ressort) both, flotte-doux 7s ease-in-out infinite; }
  html.anim .bulle-g { animation-delay: 1.35s, -1s; }
  html.anim .bulle-d { animation-delay: 1.55s, -3.5s; }
  html.anim .bulle-b { animation-delay: 1.75s, -5.5s; }
}
@keyframes flotte-doux { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
html.anim .hero-pile .hero-mini, html.anim .auth-visuel .hero-mini {
  animation: hm-pop .85s var(--ressort) both, hm-flotte 8s ease-in-out infinite;
  animation-delay: calc(.4s + var(--k, 0) * .17s), calc(var(--k, 0) * -2.7s);
}
.hm-2, .av-2 { --k: 1; }
.hm-3, .av-3 { --k: 2; }
@keyframes hm-pop { from { opacity: 0; scale: .78; transform: translateY(28px); } to { opacity: 1; scale: 1; transform: none; } }
html.anim .onglet { animation: hm-pop .8s var(--ressort) both, hm-flotte 7s ease-in-out infinite; animation-delay: calc(.4s + var(--n, 0) * .14s), calc(var(--n, 0) * -1.7s); }
html.anim .rev.vu .fonction-ico { animation: ico-pop .7s var(--ressort) both .25s; }
@keyframes ico-pop { from { scale: .6; rotate: -8deg; } to { scale: 1; rotate: 0deg; } }