.aurore {
  position: fixed;
  inset: -20vmax;              
  z-index: 0;
  pointer-events: none;
  opacity: var(--aur-force);
  filter: blur(var(--aur-flou)) saturate(125%);
  transition: opacity 900ms var(--doux);
  contain: strict;             
}
.aurore span {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;      
  will-change: transform;
}
:root[data-theme="jour"] .aurore span { mix-blend-mode: multiply; }
.aurore .a1 { width: 52vmax; height: 52vmax; left: 4%;  top: 2%;    background: radial-gradient(circle, var(--aur-1) 0%, transparent 68%); }
.aurore .a2 { width: 46vmax; height: 46vmax; right: 2%; top: 14%;   background: radial-gradient(circle, var(--aur-2) 0%, transparent 68%); }
.aurore .a3 { width: 40vmax; height: 40vmax; left: 26%; bottom: 2%; background: radial-gradient(circle, var(--aur-3) 0%, transparent 70%); }
.aurore .a4 { width: 34vmax; height: 34vmax; right: 18%; bottom: 8%; background: radial-gradient(circle, var(--aur-4) 0%, transparent 70%); }
html.anim .aurore .a1 { animation: derive-a 23s ease-in-out infinite; }
html.anim .aurore .a2 { animation: derive-b 31s ease-in-out infinite; }
html.anim .aurore .a3 { animation: derive-c 37s ease-in-out infinite; }
html.anim .aurore .a4 { animation: derive-d 29s ease-in-out infinite; }
@keyframes derive-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(7vmax, 5vmax, 0) scale(1.14); }
  66%      { transform: translate3d(-4vmax, 8vmax, 0) scale(.93); }
}
@keyframes derive-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.06); }
  40%      { transform: translate3d(-9vmax, 6vmax, 0) scale(.9); }
  75%      { transform: translate3d(3vmax, -5vmax, 0) scale(1.18); }
}
@keyframes derive-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(.96); }
  45%      { transform: translate3d(10vmax, -7vmax, 0) scale(1.2); }
  80%      { transform: translate3d(-6vmax, -2vmax, 0) scale(1.02); }
}
@keyframes derive-d {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.1); }
  50%      { transform: translate3d(-7vmax, -9vmax, 0) scale(.88); }
}
.grain::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: var(--grain);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  transition: opacity 900ms var(--doux);
}
.tilt {
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform 500ms var(--entree), box-shadow 500ms var(--entree);
  will-change: transform;
}
.tilt.actif {
  transition: transform 90ms linear, box-shadow 200ms var(--doux);
}
.tilt-lustre::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 320ms var(--doux);
  background: radial-gradient(420px circle at var(--mx) var(--my),
              rgba(255,255,255,.14) 0%, rgba(255,255,255,.05) 34%, transparent 62%);
}
:root[data-theme="jour"] .tilt-lustre::after {
  background: radial-gradient(420px circle at var(--mx) var(--my),
              rgba(122,108,196,.13) 0%, rgba(122,108,196,.05) 34%, transparent 62%);
}
.tilt.actif.tilt-lustre::after { opacity: 1; }
.eleve   { transform: translateZ(26px); }
.eleve-2 { transform: translateZ(46px); }
.lueur-curseur, .lueur-apres { position: relative; }
.lueur-curseur::before,
.lueur-apres::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  z-index: 0;
  transition: opacity 260ms var(--doux);
  background: radial-gradient(var(--lueur-taille, 180px) circle at var(--mx, 50%) var(--my, 50%),
              rgba(255,255,255,var(--lueur-force, .22)) 0%, transparent 62%);
}
html.anim .lueur-curseur:hover::before,
html.anim .lueur-apres:hover::after { opacity: 1; }
:root[data-theme="jour"] .lueur-curseur::before,
:root[data-theme="jour"] .lueur-apres::after {
  background: radial-gradient(var(--lueur-taille, 180px) circle at var(--mx, 50%) var(--my, 50%),
              rgba(111,107,255,var(--lueur-force-jour, .22)) 0%, transparent 62%);
}
:root[data-theme="jour"] .btn-primaire.lueur-curseur::before,
:root[data-theme="jour"] .carte-nuit.lueur-curseur::before {
  background: radial-gradient(var(--lueur-taille, 180px) circle at var(--mx, 50%) var(--my, 50%),
              rgba(255,255,255,var(--lueur-force, .26)) 0%, transparent 62%);
}
.lueur-curseur > *, .lueur-apres > * { position: relative; z-index: 1; }
.lueur-large { --lueur-taille: 420px; --lueur-force: .09; --lueur-force-jour: .15; }
.lueur-fine  { --lueur-taille: 120px; --lueur-force: .16; --lueur-force-jour: .20; }
html.anim .btn {
  transform: perspective(600px) translateY(0) translateZ(0);
  transform-style: preserve-3d;
}
html.anim .btn:hover:not(:disabled) {
  transform: perspective(600px) translateY(-2px) translateZ(6px);
  box-shadow: var(--om-2);
}
html.anim .btn-primaire:hover:not(:disabled) {
  box-shadow: var(--om-btn), 0 18px 36px -16px rgba(20,14,50,.55);
}
html.anim .btn:active:not(:disabled) {
  transform: perspective(600px) translateY(1px) translateZ(0);
  box-shadow: var(--om-1);
  transition-duration: 60ms;
}
html.anim .btn:disabled { transform: none; }
html.anim .rvl {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 620ms var(--entree), transform 620ms var(--entree);
  transition-delay: calc(var(--i, 0) * 55ms);
}
html.anim .rvl.vu { opacity: 1; transform: none; }
html.anim .ecran-entre > * {
  animation: monte 380ms var(--entree) both;
}
html.anim .ecran-entre > *:nth-child(1) { animation-delay: 0ms; }
html.anim .ecran-entre > *:nth-child(2) { animation-delay: 45ms; }
html.anim .ecran-entre > *:nth-child(3) { animation-delay: 85ms; }
html.anim .ecran-entre > *:nth-child(4) { animation-delay: 115ms; }
html.anim .ecran-entre > *:nth-child(n+5) { animation-delay: 140ms; }
@keyframes monte {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
:root.transition-ecran #vue { view-transition-name: vue; }
:root.transition-ecran::view-transition-old(root), :root.transition-ecran::view-transition-new(root) { animation: none; }
::view-transition-old(vue) { animation: vue-sort 160ms var(--sortie) both; }
::view-transition-new(vue) { animation: vue-entre 320ms var(--doux) both; }
@keyframes vue-sort { to { opacity: 0; translate: 0 -8px; } }
@keyframes vue-entre { from { opacity: 0; translate: 0 10px; } }
:root.vague-theme::view-transition-old(root), :root.vague-theme::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
:root.vague-theme::view-transition-image-pair(root) { background: conic-gradient(from 200deg at var(--vx, 50%) var(--vy, 0px), #6f6bff, #a97bff, #ff7ab8, #c0a6ff, #6f6bff); }
:root.vague-theme::view-transition-new(root) {
  -webkit-mask: radial-gradient(closest-side, #000 86%, transparent) var(--vx, 50%) var(--vy, 0px) / 0 0 no-repeat;
          mask: radial-gradient(closest-side, #000 86%, transparent) var(--vx, 50%) var(--vy, 0px) / 0 0 no-repeat;
}
:root.vague-theme::view-transition-old(root) {
  -webkit-mask: linear-gradient(#000,#000) 0 0 / 100% 100% no-repeat, radial-gradient(closest-side, #000 86%, transparent) var(--vx, 50%) var(--vy, 0px) / 0 0 no-repeat;
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000,#000) 0 0 / 100% 100% no-repeat exclude, radial-gradient(closest-side, #000 86%, transparent) var(--vx, 50%) var(--vy, 0px) / 0 0 no-repeat;
}
@keyframes bt-leve { from { rotate: -110deg; scale: .25; opacity: 0; } to { rotate: 0deg; scale: 1; opacity: 1; } }
:root.vague-theme[data-theme="nuit"] .bascule-theme .bt-lune,
:root.vague-theme[data-theme="jour"] .bascule-theme .bt-soleil { animation: bt-leve .8s var(--ressort) both; }
html.anim .nav-curseur { transition: translate .55s var(--ressort), opacity .3s var(--doux); }
html.anim .verrou { animation: fondu 320ms var(--doux) both; }
html.anim .verrou-boite > * { animation: monte 520ms var(--entree) both; }
html.anim .verrou-boite > :nth-child(1) { animation-delay: 60ms; }
html.anim .verrou-boite > :nth-child(2) { animation-delay: 120ms; }
html.anim .verrou-boite > :nth-child(3) { animation-delay: 180ms; }
html.anim .verrou-boite > :nth-child(4) { animation-delay: 260ms; }
html.anim .verrou-boite > :nth-child(5) { animation-delay: 340ms; }
html.anim .verrou-boite > :nth-child(n+6) { animation-delay: 420ms; }
.anneau-maintien {
  --p: 0;
  background: conic-gradient(from 0deg,
              var(--acc-vif) 0turn,
              var(--acc) calc(var(--p) * 1turn),
              rgba(255,255,255,.07) calc(var(--p) * 1turn),
              rgba(255,255,255,.07) 1turn);
}
.orbe-verrou {
  --p: 0;
  box-shadow:
    0 0 calc(30px + var(--p) * 90px) calc(var(--p) * 14px) rgba(164,150,255,calc(.16 + var(--p) * .5)),
    inset 0 1px 0 rgba(255,255,255,.14);
  transform: scale(calc(1 + var(--p) * .055));
}
html.anim .respire { animation: respire 4.2s ease-in-out infinite; }
@keyframes respire {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.035); }
}
html.anim .refus { animation: refus 420ms var(--doux); }
@keyframes refus {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}
html.anim .trace {
  stroke-dasharray: var(--long, 2000);
  stroke-dashoffset: var(--long, 2000);
  animation: trace 1500ms var(--doux) forwards;
}
@keyframes trace { to { stroke-dashoffset: 0; } }
html.anim .aire-fondue { animation: fondu 900ms 700ms var(--doux) both; }
@keyframes fondu { from { opacity: 0; } to { opacity: 1; } }
html.anim .pousse { animation: pousse 780ms var(--entree) both; transform-origin: bottom; }
@keyframes pousse { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
html.anim .balaie { animation: balaie 1100ms var(--entree) both; }
@keyframes balaie { from { --p: 0; } }
@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }
html.anim .lustre { position: relative; overflow: hidden; }
html.anim .lustre::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.10) 50%, transparent 62%);
  transform: translateX(-100%);
  animation: lustre 3.8s ease-in-out infinite;
}
@keyframes lustre { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }
html.anim .toast-entre { animation: toast-entre 480ms var(--ressort) both; }
@keyframes toast-entre {
  from { opacity: 0; transform: translateY(22px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
html.anim .voile-entre { animation: fondu 220ms var(--doux) both; }
html.anim .boite-entre { animation: boite-entre 380ms var(--entree) both; }
@keyframes boite-entre {
  from { opacity: 0; transform: translateY(24px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
html.anim .maj { animation: maj 900ms var(--doux); }
@keyframes maj {
  0%   { color: var(--acc-vif); text-shadow: 0 0 22px var(--acc-trait); }
  100% { color: inherit; text-shadow: none; }
}
@media (hover: none) {
  html.anim .btn,
  html.anim .btn:hover:not(:disabled) { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  html.anim .rvl { opacity: 1 !important; transform: none !important; }
  .tilt { transform: none !important; }
  .tilt-lustre::after, .lueur-curseur::before { display: none; }
  html.anim .btn,
  html.anim .btn:hover:not(:disabled),
  html.anim .btn:active:not(:disabled) { transform: none !important; }
  .aurore { filter: blur(var(--aur-flou)); }
}