:root{
  --bg:#ffffff;      /* fond sobre */
  --fg:#111827;      /* texte */
  --muted:#6b7280;   /* texte discret */
  --line:#4b5563;    /* traits / contours */
  --accent:#d1d5db;  /* anneau */
  --ease:cubic-bezier(.2,.6,.2,1);
}
*{box-sizing:border-box}
/* html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  color:var(--fg);
  background: var(--bg);
  display:grid; place-items:center;
} */

html.loading, body.loading { height: 100%; overflow: hidden; background:#fff; overscroll-behavior: none; }
.loader { touch-action: none; }
@media (prefers-reduced-motion: reduce) {
  .bar { animation: none !important; }
}


.loader{ display:grid; gap:14px; justify-items:center; padding:24px; }

/* Bloc visuel */
.loader .visual{ inline-size:min(220px, 70vw); aspect-ratio:1; position:relative; }



/* Phoenix minimal (contours) */
.loader .phoenix-img{ position:absolute; inset:0; display:block; width:72%; height:72%; margin:auto; object-fit:contain; animation: floaty 3.2s var(--ease) infinite; filter: drop-shadow(0 2px 8px rgba(0,0,0,.08)); }


.loader .title{ font-weight:600; letter-spacing:.02em; }
.loader .subtitle{ color:var(--muted); font-size:.95rem; margin-top:-4px; }

/* Barre de progression (optionnelle) */
.loader .progress{ width:min(320px, 84vw); height:6px; border-radius:9999px; background:#eceff3; overflow:hidden; }
.loader .bar{ height:100%; width:0%; background:#C9AC64; transition: width .2s var(--ease); }

to{ transform: rotate(360deg) }

@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion: reduce){.phoenix-img{animation:none !important}}