#preloader {
  --pl-fire: #ff5547;
  --pl-gold: #ffbd78;
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff8f2;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(12, 7, 10, .2), rgba(8, 5, 8, .42) 78%),
    rgba(8, 6, 8, .24);
  transition: opacity .35s ease, visibility .35s ease;
}

#preloader.loaded {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

#preloader:not(.loaded) ~ .app-shell {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Fido est hors de l’app-shell : masquer aussi ses bulles pendant le chargement. */
body.is-loading #fido {
  opacity: 0 !important;
  pointer-events: none !important;
}

body.is-loading #fido,
body.is-loading #fido * {
  visibility: hidden !important;
}

.pl-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  color: rgba(255, 84, 77, .012);
  font-size: clamp(5rem, 14vw, 12rem);
  font-family: var(--font-head, 'Space Grotesk', sans-serif);
  font-style: normal;
  font-weight: 900;
  letter-spacing: -.075em;
  line-height: .9;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  -webkit-text-stroke: 2px rgba(255, 70, 76, .16);
  filter: drop-shadow(0 0 38px rgba(255, 65, 49, .035));
  transform: translate(-50%, -50%);
  animation: pl-watermark-breathe 28s cubic-bezier(.45, 0, .55, 1) -11s infinite;
}

.pl-content {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(88vw, 440px);
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: pl-content-arrive .95s cubic-bezier(.2, .8, .2, 1) both;
}

.pl-logo-frame {
  display: grid;
  width: clamp(132px, 19vw, 184px);
  aspect-ratio: 1;
  place-items: center;
  padding: 1px;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--pl-gold), var(--pl-fire) 54%, #8f1b29);
  background-size: 180% 180%;
  box-shadow: 0 12px 42px rgba(255, 67, 54, .24);
  animation:
    pl-logo-float 7.4s ease-in-out -2.1s infinite,
    pl-border-glow 8.6s ease-in-out -5s infinite;
}

.pl-logo-frame img {
  display: block;
  width: 100%;
  height: 100%;
  padding: 10%;
  border-radius: 50%;
  background: #100a0b;
  object-fit: contain;
  object-position: center;
}

.pl-kicker {
  margin-top: 1.35rem;
  color: rgba(255, 239, 229, .68);
  font-family: var(--font-head, 'Space Grotesk', sans-serif);
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .38em;
  text-transform: uppercase;
  animation: pl-kicker-glow 6.8s ease-in-out -3s infinite;
}

.pl-wordmark {
  margin-top: .12rem;
  background: linear-gradient(105deg, #fff3e7, #ffc184 52%, #ff6852);
  background-size: 220% 100%;
  background-position: 0% 50%;
  background-clip: text;
  color: transparent;
  font-family: var(--font-head, 'Space Grotesk', sans-serif);
  font-size: clamp(2rem, 7vw, 3.3rem);
  font-weight: 900;
  letter-spacing: .11em;
  line-height: 1.08;
  text-shadow: 0 0 34px rgba(255, 96, 67, .15);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: pl-title-shimmer 7.6s ease-in-out -4.8s infinite;
}

.pl-order {
  margin-top: .65rem;
  color: rgba(255, 239, 229, .55);
  font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  animation: pl-signature-glow 8.2s ease-in-out -6.1s infinite;
}

.pl-order span {
  color: #ffc184;
}

.pl-progress {
  width: 100%;
  height: 6px;
  margin-top: 2.15rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  box-shadow: 0 0 22px rgba(255, 75, 57, .14);
  animation: pl-bar-glow 5.4s ease-in-out -2.7s infinite;
}

.pl-progress span {
  display: block;
  width: 12%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--pl-fire), var(--pl-gold));
  transition: width .42s cubic-bezier(.22, 1, .36, 1);
}

@keyframes pl-content-arrive {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes pl-watermark-breathe {
  0%, 100% { opacity: .62; transform: translate(-50%, -50%) scale(.985); }
  52% { opacity: 1; transform: translate(-50%, -50%) scale(1.012); }
}

@keyframes pl-logo-float {
  0%, 100% { transform: translateY(0) scale(1); }
  48% { transform: translateY(-7px) scale(1.018); }
}

@keyframes pl-border-glow {
  0%, 100% { background-position: 0% 50%; box-shadow: 0 12px 34px rgba(255, 67, 54, .18); }
  54% { background-position: 100% 50%; box-shadow: 0 14px 48px rgba(255, 93, 67, .34); }
}

@keyframes pl-kicker-glow {
  0%, 100% { opacity: .68; }
  52% { opacity: 1; }
}

@keyframes pl-title-shimmer {
  0%, 18%, 100% { background-position: 0% 50%; }
  58% { background-position: 100% 50%; }
}

@keyframes pl-signature-glow {
  0%, 100% { opacity: .54; }
  50% { opacity: .9; }
}

@keyframes pl-bar-glow {
  0%, 100% { box-shadow: 0 0 15px rgba(255, 75, 57, .1); }
  56% { box-shadow: 0 0 26px rgba(255, 113, 73, .28); }
}

@media (max-width: 560px) {
  .pl-watermark { font-size: clamp(2rem, 9vw, 3.25rem); letter-spacing: -.065em; }

  .pl-logo-frame {
    width: 142px;
  }

  .pl-progress { margin-top: 1.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pl-content,
  .pl-watermark,
  .pl-logo-frame,
  .pl-kicker,
  .pl-wordmark,
  .pl-order,
  .pl-progress {
    animation: none;
  }
}