/* ==========================================================================
   FAIR FUTURE - LOADER OVERLAY
   Simple: clair par defaut, sombre si OS en dark mode
   ========================================================================== */

/* 1) Masquer le contenu uniquement si le flag est actif */
html[data-fff-loader="on"] body #page-container { opacity: 0; }
body.loaded #page-container { opacity: 1; transition: opacity .35s ease; }

/* 2) Overlay & carte */
.fff-loader{
  position: fixed; inset: 0; z-index: 999999;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(180deg,#f8fafc 0%, #f2f5fb 100%);
  color:#252729; opacity:1; visibility:visible; pointer-events:auto;
  transition: opacity .25s ease, visibility 0s linear .25s;
}
body.loaded .fff-loader{ opacity:0; visibility:hidden; pointer-events:none; }

.fff-loader__inner{
  display:flex; flex-direction:column; align-items:center; gap:.9rem;
  padding:1.25rem 1.5rem; border-radius:16px; background:#fff;
  box-shadow:0 12px 32px rgba(10,22,50,.10); text-align:center;
  transition: transform .25s ease, opacity .25s ease;
}
body.loaded .fff-loader__inner{ transform: scale(0.965); opacity:0; }

/* 3) Logo - animations */
.fff-logo-loader img{ width:60px; height:auto; transform-origin:center center; }

.fff-logo-loader.anim-breath img{
  animation: fff-breath 1.8s ease-in-out infinite, fff-glow 2.4s ease-in-out infinite;
}
.fff-logo-loader.anim-tilt img{
  animation: fff-tilt 1.6s ease-in-out infinite, fff-glow-strong 2.2s ease-in-out infinite;
}

/* Masquer un ancien spinner eventuel */
.fff-spinner{ display:none !important; }

/* 4) Texte */
.fff-loader__text{
  font: 600 clamp(16px,15px + .35vw,18px)/1.35 system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  color:#212a36; letter-spacing:.2px;
}
.fff-loader__text.fallback{
  color:#4267b2; font-weight:400; font-style:italic;
  letter-spacing:.6px; font-size:.95em; opacity:.95;
  animation: fff-pulse 1.4s ease-in-out infinite;
}

/* Micro-stat sous le fallback */
.fff-microstat{
  margin-top:.15rem;
  font: 500 13.5px/1.3 system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  color:#556275; letter-spacing:.2px; opacity:.95;
}

/* 5) Barre de progression */
.fff-progress{
  width:clamp(200px,32vw,260px); height:8px; border-radius:999px;
  background:#e8ecf5; overflow:hidden; box-shadow: inset 0 1px 2px rgba(15,30,60,.06);
}
.fff-progress__bar{
  display:block; width:0%; height:100%;
  background: linear-gradient(90deg, #4267b2, #5a8ae0);
  border-radius:inherit; transition:width .25s ease;
}

/* 6) Apparition sequencee (fallback, microstat, barre) */
@keyframes fff-fadeIn { from{ opacity:0; transform: translateY(2px) } to{ opacity:1; transform:none } }
.fff-delay-1{ animation: fff-fadeIn .18s ease .10s both; }
.fff-delay-2{ animation: fff-fadeIn .18s ease .18s both; }
.fff-delay-3{ animation: fff-fadeIn .18s ease .26s both; }

/* 7) Fail-safe si JS off */
@keyframes fff-show{ to{ opacity:1 } }
@keyframes fff-hide{ to{ opacity:0; visibility:hidden } }
html[data-fff-loader="on"] body #page-container{ animation: fff-show 6s forwards }
html[data-fff-loader="on"] .fff-loader{ animation: fff-hide 6s both }

/* 8) Reveal doux des elements marques par JS */
.fff-fadein{
  opacity:0; transform: translateY(6px);
  will-change: opacity, transform; backface-visibility:hidden;
}
body.loaded .fff-fadein.fff-visible{
  opacity:1; transform:none;
  transition: opacity .28s ease, transform .28s ease;
}

/* 9) A11Y & motion */
@media (prefers-reduced-motion: reduce){
  .fff-logo-loader img{ animation:none !important }
  .fff-progress__bar{ transition:none !important }
  .fff-loader__text.fallback{ animation:none !important }
}

/* 10) Visual Builder */
body.et-fb .fff-loader{ display:none !important; }
body.et-fb #page-container{ opacity:1 !important; transition:none !important; }

/* 11) Petit filet anti flash de fond */
html[data-fff-loader="on"] body #page-container{ background-color: inherit; }

/* 12) Dark mode simple base sur le systeme (OS) */
@media (prefers-color-scheme: dark){
  .fff-loader{
    background: radial-gradient(1200px 800px at 50% 30%, #0f1a2a 0%, #0b1220 60%, #070e1a 100%);
    color:#c9d4e0;
  }
  .fff-loader__inner{
    background:#0f1625;
    box-shadow: 0 16px 40px rgba(0,0,0,.55);
    border:1px solid rgba(255,255,255,.05);
  }
  .fff-loader__text{ color:#e3ecf6; }
  .fff-loader__text.fallback{ color:#7fb0ff; opacity:.98; }
  .fff-microstat{ color:#a8b6c8; }

  .fff-progress{ background:#1b2a44; box-shadow: inset 0 1px 2px rgba(0,0,0,.35); }
  .fff-progress__bar{ background: linear-gradient(90deg, #7fb0ff, #a7c8ff); }

  .fff-logo-loader.anim-breath img{
    animation: fff-breath 1.8s ease-in-out infinite, fff-glow-dark 2.2s ease-in-out infinite;
  }
  .fff-logo-loader.anim-tilt img{
    animation: fff-tilt 1.6s ease-in-out infinite, fff-glow-dark 2.2s ease-in-out infinite;
  }
}

/* =============================
   KEYFRAMES
   ============================= */
@keyframes fff-breath{ 0%,100%{ transform: scale(1) } 50%{ transform: scale(1.12) } }
@keyframes fff-glow{
  0%,100%{ filter: drop-shadow(0 0 0 rgba(66,103,178,0)) }
  50%    { filter: drop-shadow(0 2px 6px rgba(66,103,178,.35)) }
}
@keyframes fff-tilt{
  0%  { transform: rotate(0deg) }
  25% { transform: rotate(3deg)  }
  50% { transform: rotate(0deg)  }
  75% { transform: rotate(-3deg) }
  100%{ transform: rotate(0deg)  }
}
@keyframes fff-glow-strong{
  0%,100%{ filter: drop-shadow(0 0 0 rgba(66,103,178,0)) }
  50%    { filter: drop-shadow(0 3px 10px rgba(66,103,178,.5)) }
}
@keyframes fff-glow-dark{
  0%,100%{ filter: drop-shadow(0 0 0 rgba(127,176,255,0)) }
  50%    { filter: drop-shadow(0 3px 12px rgba(127,176,255,.55)) }
}
@keyframes fff-pulse{ 0%,100%{opacity:.7} 50%{opacity:1} }