/* Indicateurs de chargement communs : barre de progression fine et etat
   occupe des boutons pendant les soumissions hx-boost
   (docs/specs/soumissions-post-et-chargement.md par. 5 et 6).
   Consomme le jeton --bleu du module (repli : bleu des widgets). */

/* Barre fixe en haut de page, progression indeterminee simulee (avance
   rapide puis ralentissement). Decorative : aria-hidden, l'information
   accessible passe par l'etat du bouton et la zone d'annonces. */
#barre-chargement{position:fixed;top:0;left:0;height:3px;width:0;
    background:var(--bleu,#2557a7);z-index:1000;opacity:0;
    pointer-events:none;transition:opacity .2s}
#barre-chargement.active{opacity:1;
    animation:barre-progression 15s cubic-bezier(.1,.7,.3,1) forwards}
#barre-chargement.finie{width:100%;opacity:0;
    transition:width .15s,opacity .4s .15s}
@keyframes barre-progression{
    0%{width:0}10%{width:35%}40%{width:70%}100%{width:96%}}
@media (prefers-reduced-motion: reduce){
    #barre-chargement{transition:none}
    #barre-chargement.active{animation:none;width:60%}
}

/* Curseur d'attente global pendant une requete (la page reste utilisable :
   progress, jamais wait). Sans effet au clavier et au tactile : le
   changement visuel du bouton fait foi. */
html.chargement-en-cours{cursor:progress}

/* Etat occupe du bouton declencheur : htmx pose la classe htmx-request
   sur le formulaire emetteur et desactive le bouton (hx-disabled-elt) ;
   le libelle passe a "Envoi en cours..." (chargement.js). */
form.htmx-request button[type="submit"],
form.htmx-request input[type="submit"]{opacity:.75;cursor:progress}
form.htmx-request button[type="submit"]::after{content:"";
    display:inline-block;width:.8em;height:.8em;margin-left:.45em;
    vertical-align:-.08em;border:2px solid currentColor;
    border-right-color:transparent;border-radius:50%;
    animation:rotation-chargement .7s linear infinite}
@keyframes rotation-chargement{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){
    form.htmx-request button[type="submit"]::after{display:none}
}

/* Bandeau d'echec visible (role=alert, chargement.js) : une reponse en
   erreur n'etant pas remplacee par htmx, c'est le seul retour visuel de
   l'echec. Couple --rouge sur --rouge-pale : jetons presents dans les
   cinq modules, contraste AA verifie dans les deux themes
   (rgaa-suivi-conformite.md). Le repli sert aux pages sans jetons. */
#alerte-chargement{position:fixed;top:.75rem;left:50%;
    transform:translateX(-50%);z-index:1001;
    max-width:min(42rem,calc(100vw - 2rem));
    display:flex;gap:.75rem;align-items:flex-start;
    padding:.7rem .9rem;border:1px solid var(--rouge,#b3352e);
    border-radius:6px;background:var(--rouge-pale,#f9ebea);
    color:var(--rouge,#b3352e);box-shadow:0 2px 8px rgba(0,0,0,.18);
    font-size:.95rem;line-height:1.4}
/* display:flex l'emporterait sur le masquage natif de [hidden] */
#alerte-chargement[hidden]{display:none}
#alerte-chargement-texte{margin:0}
.alerte-chargement-fermer{flex:none;font:inherit;font-size:.85rem;
    color:inherit;background:transparent;border:1px solid currentColor;
    border-radius:4px;padding:.15rem .5rem;cursor:pointer}
.alerte-chargement-fermer:hover{background:var(--rouge-pale-survol,transparent)}
.alerte-chargement-fermer:focus-visible{outline:2px solid currentColor;
    outline-offset:2px}
@media (prefers-reduced-motion: reduce){
    #alerte-chargement{box-shadow:none}
}

/* Zone d'annonces des lecteurs d'ecran (role=status) : masquee
   visuellement, jamais display:none. */
.annonce-invisible{position:absolute;width:1px;height:1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Cible du focus apres une navigation boostee (tabindex=-1 pose par
   chargement.js) : pas d'anneau, le focus est programmatique. */
main:focus{outline:none}