/* Pastille d'attente de chargement (WpAttente) — copie de welplan (static/css/wp_attente.css).
   Zone ciblée remplacée par un squelette gris animé + pastille qui dit ce qui se charge. */

/* Squelette */
.wpa-charge > :not(.wpa-sq) { display:none !important; }
.wpa-charge { pointer-events:none; overflow:hidden !important; }
.wpa-sq { padding:6px; }
.wpa-sq-l { display:flex; gap:6px; margin-bottom:6px; }
.wpa-sq-l.tete i { height:18px; }
.wpa-sq-l i { flex:1; height:22px; border-radius:4px; min-width:0;
    background:linear-gradient(90deg,#efede7 25%,#f8f7f3 50%,#efede7 75%); background-size:200% 100%;
    animation:wpaBrille 1.2s infinite; }
.wpa-sq-l i:first-child { flex:0 0 160px; }
.wpa-sq-l i:only-child { flex:1; }
@media (max-width:700px) { .wpa-sq-l i:first-child { flex-basis:80px; } }

/* Voile anti-clic (paramètre bloquer) */
.wpa-voile { position:fixed; inset:0; z-index:1999; background:transparent; cursor:wait; }

/* Pastille */
.wpa-pastille { --wpa-c:#1a5fa8; --wpa-clair:#e6f0fb; --wpa-bord:#b9d3f1;
    position:fixed; top:84px; /* ajusté par le script */ left:50%; transform:translateX(-50%); z-index:2000;
    display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .6rem; width:max-content; max-width:min(720px, calc(100vw - 32px));
    background:#fff; border:1px solid var(--wpa-bord); border-radius:22px; box-shadow:0 8px 24px rgba(26,95,168,.18);
    padding:.45rem 1rem .45rem .5rem; font-size:.84rem; color:#1f1f1d; text-align:left; animation:wpaGlisse .2s ease-out; }
.wpa-pastille.wpa-vert   { --wpa-c:#2f7a12; --wpa-clair:#e5f3dd; --wpa-bord:#b7d7a8; }
.wpa-pastille.wpa-orange { --wpa-c:#b45309; --wpa-clair:#fdf0dc; --wpa-bord:#f2d49b; }
.wpa-pastille.wpa-rouge  { --wpa-c:#b42318; --wpa-clair:#fdecea; --wpa-bord:#f1b5ae; }
.wpa-pastille.wpa-avec-phases { border-radius:14px; }
.wpa-pastille .wpa-rond { flex:none; width:28px; height:28px; border-radius:50%; border:3px solid var(--wpa-clair);
    border-top-color:var(--wpa-c); animation:wpaTourne .8s linear infinite; }
.wpa-pastille .wpa-ico { flex:none; width:28px; text-align:center; font-size:1.25rem; color:var(--wpa-c); }
.wpa-pastille b { color:var(--wpa-c); }
.wpa-pastille .wpa-ico-ok { color:#2f7a12; }
.wpa-pastille .wpa-ico-erreur { color:#b42318; }
.wpa-pastille .wpa-txt { flex:1 1 200px; }
.wpa-pastille .wpa-note { font-size:.72rem; color:#2f7a12; border-left:1px solid #e7e5df; padding-left:.6rem; white-space:nowrap; }
.wpa-pastille .wpa-lent { font-size:.72rem; color:#6b6a64; border-left:1px solid #e7e5df; padding-left:.6rem; }
@media (max-width:700px) { .wpa-pastille .wpa-note, .wpa-pastille .wpa-lent { flex-basis:100%; border-left:0; padding-left:36px; } }

/* Phases (attente à étapes, ex. connexion) */
.wpa-phases { flex-basis:100%; list-style:none; margin:.15rem 0 0; padding:0 0 0 36px; }
.wpa-phases li { display:flex; align-items:center; gap:.45rem; padding:.12rem 0; color:#9a988f; }
.wpa-phases li .wpa-ph-i { flex:none; width:14px; height:14px; border-radius:50%; border:2px solid #d9d7d0; }
.wpa-phases li.encours { color:#1f1f1d; font-weight:600; }
.wpa-phases li.encours .wpa-ph-i { border-color:var(--wpa-clair); border-top-color:var(--wpa-c); animation:wpaTourne .8s linear infinite; }
.wpa-phases li.ok { color:#1f1f1d; }
.wpa-phases li.ok .wpa-ph-i { border:0; background:#2f7a12; position:relative; }
.wpa-phases li.ok .wpa-ph-i::after { content:''; position:absolute; left:4px; top:1px; width:5px; height:9px;
    border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.wpa-phases li.erreur { color:#b42318; font-weight:600; }
.wpa-phases li.erreur .wpa-ph-i { border:0; background:#b42318; position:relative; }
.wpa-phases li.erreur .wpa-ph-i::before, .wpa-phases li.erreur .wpa-ph-i::after { content:''; position:absolute;
    left:6px; top:3px; width:2px; height:8px; background:#fff; transform:rotate(45deg); }
.wpa-phases li.erreur .wpa-ph-i::after { transform:rotate(-45deg); }

@keyframes wpaBrille { to { background-position:-200% 0; } }
@keyframes wpaTourne { to { transform:rotate(360deg); } }
@keyframes wpaGlisse { from { opacity:0; transform:translate(-50%,-8px); } }
@media (prefers-reduced-motion:reduce) {
    .wpa-sq-l i, .wpa-pastille, .wpa-phases li .wpa-ph-i { animation:none; }
    .wpa-pastille .wpa-rond { animation-duration:2.4s; }
}