/* ============================================================
   ALLEMAX — États d'attente  v1.0
   SVG inline + CSS. Zéro dépendance, zéro JS requis.
   Variables : --alx-size  --alx-speed  --alx-color
   ============================================================ */

.alx{
  --alx-size:48px;
  --alx-speed:1;
  --alx-color:#E08346;
  width:var(--alx-size);
  height:var(--alx-size);
  display:block;
  flex:0 0 auto;
  overflow:visible;
}
.alx circle{
  fill:none;
  stroke:var(--alx-color);
  stroke-width:3.9;
  transform-box:fill-box;
  transform-origin:50% 50%;
}
.alx .core{ fill:var(--alx-color); stroke:none; }
.alx .track{ opacity:.16; }

/* --- 1. ONDES RADAR ------------------------------------------------ */
.alx--radar .wave{
  animation:alx-wave calc(1.9s * var(--alx-speed)) cubic-bezier(.22,.61,.36,1) infinite;
  opacity:0;
}
.alx--radar .w1{ animation-delay:calc(-1.27s * var(--alx-speed)); }
.alx--radar .w2{ animation-delay:calc(-.63s  * var(--alx-speed)); }
.alx--radar .core{
  animation:alx-pulse calc(1.9s * var(--alx-speed)) ease-in-out infinite;
}
@keyframes alx-wave{
  0%   { transform:scale(.40); opacity:0;   }
  14%  { opacity:.95; }
  100% { transform:scale(1);   opacity:0;   }
}
@keyframes alx-pulse{
  0%,100%{ transform:scale(.96); opacity:.85 }
  50%    { transform:scale(1);    opacity:1   }
}

/* --- 2. RESPIRATION ------------------------------------------------ */
.alx--breathe .core,
.alx--breathe .ring{
  animation:alx-breathe calc(2.6s * var(--alx-speed)) ease-in-out infinite;
}
.alx--breathe .core  { animation-delay:calc(-.28s * var(--alx-speed)); }
.alx--breathe .ring-1{ animation-delay:calc(-.14s * var(--alx-speed)); }
@keyframes alx-breathe{
  0%,100%{ transform:scale(.90); opacity:.42 }
  46%    { transform:scale(1);    opacity:1   }
}

/* --- 3. ROTATION SÉQUENTIELLE -------------------------------------- */
.alx--spin .arc{ stroke-linecap:round; }
.alx--spin .arc-1{
  stroke-dasharray:53 158;
  animation:alx-turn calc(1.5s * var(--alx-speed)) linear infinite;
}
.alx--spin .arc-2{
  stroke-dasharray:74 223;
  animation:alx-turn-rev calc(2.4s * var(--alx-speed)) linear infinite;
}
.alx--spin .core{
  animation:alx-pulse calc(2.4s * var(--alx-speed)) ease-in-out infinite;
}
@keyframes alx-turn     { to{ transform:rotate(360deg) } }
@keyframes alx-turn-rev { to{ transform:rotate(-360deg) } }

/* --- 4. PROGRESSION PAR ANNEAUX (indéterminée) --------------------- */
.alx--fill .arc{ stroke-linecap:round; transform:rotate(-90deg); }
.alx--fill .arc-1{
  stroke-dasharray:210.5; stroke-dashoffset:210.5;
  animation:alx-draw-1 calc(2.6s * var(--alx-speed)) ease-in-out infinite;
}
.alx--fill .arc-2{
  stroke-dasharray:297.2; stroke-dashoffset:297.2;
  animation:alx-draw-2 calc(2.6s * var(--alx-speed)) ease-in-out infinite;
}
.alx--fill .core{
  animation:alx-fade-core calc(2.6s * var(--alx-speed)) ease-in-out infinite;
}
@keyframes alx-draw-1{
  0%   { stroke-dashoffset:210.5 }
  30%  { stroke-dashoffset:0 }
  88%  { stroke-dashoffset:0; opacity:1 }
  97%,100%{ stroke-dashoffset:0; opacity:0 }
}
@keyframes alx-draw-2{
  0%,22%{ stroke-dashoffset:297.2 }
  58%  { stroke-dashoffset:0 }
  88%  { stroke-dashoffset:0; opacity:1 }
  97%,100%{ stroke-dashoffset:0; opacity:0 }
}
@keyframes alx-fade-core{
  0%,10%{ opacity:.18; transform:scale(.86) }
  58%   { opacity:1;   transform:scale(1)   }
  88%   { opacity:1 }
  97%,100%{ opacity:0 }
}

/* --- 5. JAUGE (progression réelle) --------------------------------- */
.alx--gauge{ --alx-p:0; }
.alx--gauge .arc{
  stroke-linecap:round;
  transform:rotate(-90deg);
  stroke-dasharray:297.2;
  stroke-dashoffset:calc(297.2 - 297.2 * var(--alx-p));
  transition:stroke-dashoffset .45s cubic-bezier(.3,.7,.3,1);
}
.alx--gauge .ring-1{
  animation:alx-pulse calc(2.2s * var(--alx-speed)) ease-in-out infinite;
}

/* --- OVERLAY plein écran ------------------------------------------- */
.alx-overlay{
  position:fixed; inset:0; z-index:9000;
  display:grid; place-content:center; place-items:center; gap:20px; grid-auto-rows:min-content;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(6px) saturate(.9);
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
}
.alx-overlay[data-open="true"]{ opacity:1; pointer-events:auto; }
.alx-overlay .alx{ --alx-size:88px; }
.alx-overlay .alx-msg{
  font-size:15px; font-weight:500; letter-spacing:.01em;
  color:#1B1715; text-align:center; max-width:34ch;
}
.alx-overlay .alx-sub{
  font-family:var(--font-mono, monospace); font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:#8A817A; margin-top:-12px;
}
.dark .alx-overlay{ background:rgba(11,22,32,.85) }
.dark .alx-overlay .alx-msg{ color:#F8F8F5 }

/* --- OVERLAY grille (filtres) ----------------------------------------- */
.alx-grid-overlay{
  position:absolute; inset:0; z-index:10;
  display:grid; place-items:center;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(2px);
  border-radius:inherit;
}
.dark .alx-grid-overlay{ background:rgba(11,22,32,.72) }

/* --- SCREEN-CENTER loader (filtres — pas de fond) ------------------- */
.alx-screen-loader{
  position:fixed; inset:0; z-index:9999;
  display:grid; place-items:center;
  pointer-events:none;
}

/* --- INLINE (bouton, cellule, ligne de tableau) -------------------- */
.alx--inline{ --alx-size:16px; display:inline-block; vertical-align:-2px; }
.alx--sm{ --alx-size:22px } .alx--md{ --alx-size:40px } .alx--lg{ --alx-size:72px }

/* --- ACCESSIBILITÉ : mouvement réduit ------------------------------ */
@media (prefers-reduced-motion: reduce){
  .alx *{
    animation:alx-quiet 2.4s ease-in-out infinite !important;
    transform:none !important;
    stroke-dashoffset:0 !important;
    stroke-dasharray:none !important;
    opacity:1;
  }
  .alx .ring-1{ animation-delay:.3s !important }
  .alx .ring-2{ animation-delay:.6s !important }
  .alx--gauge .arc{ animation:none !important;
    stroke-dasharray:297.2 !important;
    stroke-dashoffset:calc(297.2 - 297.2 * var(--alx-p)) !important; }
  @keyframes alx-quiet{ 0%,100%{opacity:.35} 50%{opacity:1} }
}