/* =============================================================================
   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; }
}

/* ---------------------------------------------------------------- Interrupteur
 * Un réglage à deux états qui bascule sur place, sans bouton « Enregistrer » :
 * on voit l'état actuel ET l'action, ce qu'une paire de boutons ne montre pas.
 *
 * Un VRAI <input type="checkbox"> en dessous : le clavier, le lecteur d'écran
 * et le formulaire continuent de fonctionner, on ne redessine que l'apparence.
 */
.u2-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13.5px; }
.u2-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.u2-switch .piste {
	position: relative; flex: 0 0 auto; width: 42px; height: 24px; border-radius: 999px;
	background: var(--u2-piste); transition: background .18s ease;
}
.u2-switch .piste::after {
	content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
	border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(16,24,40,.25);
	transition: transform .18s ease;
}
.u2-switch input:checked + .piste { background: var(--u2-ok); }
.u2-switch input:checked + .piste::after { transform: translateX(18px); }
.u2-switch input:focus-visible + .piste { outline: 2px solid var(--u2-accent); outline-offset: 2px; }
.u2-switch input:disabled + .piste { opacity: .5; cursor: not-allowed; }
.u2-switch.occupe .piste { opacity: .6; }

@media (prefers-reduced-motion: reduce) {
	.u2-switch .piste, .u2-switch .piste::after { transition: none; }
}

/* ---------------------------------------------------------------------- Badge
 * Un compteur de ce qui attend. Il ne se dessine qu'à partir de 1 : une
 * pastille « 0 » attire l'œil pour rien.
 *
 * Le chiffre est marqué aria-hidden et doublé d'un texte lisible par le
 * lecteur d'écran (.u2-lecture) : « 3 » seul ne veut rien dire à l'oreille.
 */
.u2-badge {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px;
	border-radius: 999px; background: var(--u2-accent); color: #fff;
	font-size: 11px; font-weight: 800; line-height: 1; letter-spacing: 0;
	vertical-align: middle; flex: 0 0 auto;
}
.u2-badge.rouge  { background: var(--u2-ko); }
.u2-badge.calme  { background: var(--u2-piste); color: var(--u2-texte); }

/* Visible du seul lecteur d'écran : on ne cache pas avec display:none, qui le
   ferait taire lui aussi. */
.u2-lecture {
	position: absolute !important; width: 1px; height: 1px; padding: 0;
	margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------- Modale
 * Fenêtre bloquante : le fond s'assombrit, le reste de la page ne répond plus.
 * Sobre volontairement — elle sert surtout à confirmer une suppression, pas à
 * se faire remarquer.
 */
.u2-modale-fond {
	position: fixed; inset: 0; z-index: 9000;
	display: flex; align-items: center; justify-content: center; padding: 18px;
	background: rgba(15, 23, 42, .45); backdrop-filter: blur(2px);
	animation: u2-fond-entre .12s ease-out;
}
.u2-modale-fond.part { animation: u2-fond-part .12s ease-in forwards; }
@keyframes u2-fond-entre { from { opacity: 0; } }
@keyframes u2-fond-part  { to { opacity: 0; } }
.u2-modale {
	width: 100%; max-width: 420px; background: #fff; color: #16233c;
	border-radius: 16px; box-shadow: 0 12px 40px rgba(15, 23, 42, .22);
	padding: 22px 22px 18px; animation: u2-modale-entre .14s ease-out;
}
@keyframes u2-modale-entre { from { opacity: 0; transform: translateY(8px) scale(.985); } }
.u2-modale-t { margin: 0 0 8px; font-size: 17px; font-weight: 800; }
.u2-modale-c { font-size: 14px; line-height: 1.55; color: var(--u2-texte); }
.u2-modale-p { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
.u2-modale-b {
	padding: 10px 18px; border-radius: 10px; font-size: 14px; font-weight: 700;
	cursor: pointer; border: 1px solid transparent; font-family: inherit;
}
.u2-modale-b.annule { background: #fff; border-color: var(--u2-piste); color: #16233c; }
.u2-modale-b.annule:hover { background: #f5f8fc; }
.u2-modale-b.ok { background: var(--u2-accent); color: #fff; }
.u2-modale-b.ok:hover { filter: brightness(.94); }
.u2-modale-b:focus-visible { outline: 2px solid var(--u2-accent); outline-offset: 2px; }
/* Action irréversible : le bouton de validation prend la couleur du danger, et
   c'est « Annuler » qui reçoit le focus. */
.u2-modale.danger .u2-modale-b.ok { background: var(--u2-ko); }

@media (prefers-reduced-motion: reduce) {
	.u2-modale-fond, .u2-modale, .u2-modale-fond.part { animation: none; }
}

/* ---------------------------------------------------------------------- Bulle
 * Ancrée à un élément, jamais bloquante. Positionnée en absolu dans le
 * document (pas en fixed) : elle suit la page quand on la fait défiler.
 */
.u2-bulle {
	position: absolute; z-index: 8500; min-width: 230px; max-width: 320px;
	background: #fff; color: #16233c; border: 1px solid var(--u2-piste);
	border-radius: 12px; box-shadow: 0 8px 28px rgba(15, 23, 42, .16);
	padding: 13px 15px; font-size: 13px; line-height: 1.5;
	animation: u2-bulle-entre .12s ease-out;
}
@keyframes u2-bulle-entre { from { opacity: 0; transform: translateY(-3px); } }
.u2-bulle-chargement { display: flex; justify-content: center; padding: 6px 0; }
.u2-bulle-vide { color: var(--u2-texte); font-style: italic; }
.u2-bulle .t { font-weight: 800; font-size: 14px; margin-bottom: 2px; }
.u2-bulle .s { color: var(--u2-texte); margin-bottom: 8px; }
.u2-bulle .l { display: flex; gap: 8px; align-items: center; padding: 3px 0; }
.u2-bulle .l i { width: 14px; color: var(--u2-texte); flex: 0 0 auto; }
.u2-bulle .p { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--u2-piste); font-size: 12.5px; }
.u2-bulle a { color: var(--u2-accent); }

@media (prefers-reduced-motion: reduce) { .u2-bulle { animation: none; } }