/* =============================================================================
   ui-2m — feuille de style des retours visuels (bouton en attente, barre de
   progression d'envoi, squelettes de chargement).

   Les couleurs se calent sur la charte de l'interface hôte quand elle expose
   des variables (--accent, --border…) et retombent sinon sur le bleu 2MWeb.
   Fichier identique dans css/, gestion/css/ et _crm/css/.
   ============================================================================= */
:root {
	--u2-accent: var(--accent, #2563eb);
	--u2-piste:  var(--border, #e5e9f0);
	--u2-texte:  var(--muted, #64748b);
	--u2-ok:     var(--green, #12824a);
	--u2-ko:     var(--red, #dc2626);
}

/* --------------------------------------------------------- Bouton en attente */
.u2-spin {
	display: inline-block;
	width: 14px; height: 14px;
	margin-right: 8px;
	vertical-align: -2px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: u2-tourne .6s linear infinite;
}
@keyframes u2-tourne { to { transform: rotate(360deg); } }

button.u2-charge, a.u2-charge {
	pointer-events: none;
	opacity: .78;
}
/* Un <input type="submit"> ne peut pas porter de pseudo-élément : l'attente se
   lit sur ces rayures qui défilent. Les deux teintes rendent le motif visible
   aussi bien sur un bouton plein que sur un bouton clair.

   !important assumé, et limité à ces deux propriétés : les trois interfaces
   habillent leurs boutons avec des sélecteurs plus spécifiques (.btn
   input[type=submit], …) dont le raccourci « background » effacerait l'image.
   Un état « en cours » qui ne s'affiche pas ne sert à rien. */
input.u2-charge {
	pointer-events: none;
	background-image: repeating-linear-gradient(45deg,
		rgba(255, 255, 255, .26) 0 10px,
		rgba(0, 0, 0, .07) 10px 20px) !important;
	background-size: 28px 28px !important;
	animation: u2-rayures .7s linear infinite;
}
@keyframes u2-rayures { to { background-position: 28px 0; } }

/* ------------------------------------------------------ Barre de progression */
.u2-bar { margin: 10px 0 2px; }
.u2-bar-piste {
	position: relative;
	height: 6px;
	border-radius: 99px;
	background: var(--u2-piste);
	overflow: hidden;
}
.u2-bar-piste span {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 99px;
	background: var(--u2-accent);
	transition: width .18s ease-out;
}
/* Progression inconnue (le navigateur ne sait pas mesurer) : va-et-vient. */
.u2-bar-piste.indetermine span {
	width: 35%;
	animation: u2-va-et-vient 1.1s ease-in-out infinite;
}
@keyframes u2-va-et-vient {
	0%   { transform: translateX(-100%); }
	100% { transform: translateX(300%); }
}
.u2-bar-txt {
	margin-top: 5px;
	font-size: 12px;
	color: var(--u2-texte);
}
.u2-bar.ok  .u2-bar-piste span { background: var(--u2-ok); }
.u2-bar.ok  .u2-bar-txt { color: var(--u2-ok); }
.u2-bar.ko  .u2-bar-piste span { background: var(--u2-ko); }
.u2-bar.ko  .u2-bar-txt { color: var(--u2-ko); font-weight: 600; }

/* ------------------------------------------------------------- Squelettes */
.u2-skel-zone { padding: 2px 0; }
.u2-skel {
	display: block;
	border-radius: 8px;
	background: linear-gradient(90deg,
		rgba(148, 163, 184, .13) 25%,
		rgba(148, 163, 184, .22) 37%,
		rgba(148, 163, 184, .13) 63%);
	background-size: 400% 100%;
	animation: u2-balaye 1.4s ease infinite;
}
@keyframes u2-balaye { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.u2-skel-bloc  { display: flex; flex-direction: column; gap: 18px; }
.u2-skel-titre { height: 26px; width: 240px; }
.u2-skel-sous  { height: 13px; width: 360px; max-width: 70%; }

/* Les tuiles de chiffres et la carte de tableau reprennent la silhouette des
   vraies pages : le contenu qui arrive se pose à la place du gris, sans
   décaler ce qui l'entoure. */
.u2-skel-tuiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.u2-skel-tuiles.trois { grid-template-columns: repeat(3, 1fr); }
.u2-skel-tuiles span { height: 92px; border-radius: 14px; }

.u2-skel-carte {
	background: var(--surface, #fff);
	border: 1px solid var(--u2-piste);
	border-radius: 14px;
	padding: 6px 18px;
}
.u2-skel-ligne {
	display: grid;
	grid-template-columns: 1.6fr 2.4fr 1fr;
	gap: 18px;
	align-items: center;
	padding: 15px 0;
	border-bottom: 1px solid var(--u2-piste);
}
.u2-skel-carte .u2-skel-ligne:last-child { border-bottom: 0; }
.u2-skel-ligne span { height: 13px; }
.u2-skel-ligne span:nth-child(2) { width: 82%; }
.u2-skel-ligne span:nth-child(3) { width: 58%; }

@media (max-width: 860px) {
	.u2-skel-tuiles, .u2-skel-tuiles.trois { grid-template-columns: 1fr 1fr; }
	.u2-skel-ligne { grid-template-columns: 1.4fr 1fr; }
	.u2-skel-ligne span:nth-child(3) { display: none; }
}

/* Une personne qui a demandé moins d'animations n'en reçoit pas : les états
   restent lisibles, ils cessent simplement de bouger. */
@media (prefers-reduced-motion: reduce) {
	.u2-spin, .u2-skel, .u2-bar-piste.indetermine span, input.u2-charge { animation: none; }
	.u2-bar-piste.indetermine span { width: 100%; opacity: .5; }
}