/* ==================================================================
   waka-stage — preuve sociale (1.0.35, 24/09/2026)

   Sortie de frontend.css pour être chargée seule là où il n'y a pas de
   liste de stages : le tableau de bord de Mon compte (simple-lms). Sur la
   liste et la fiche, frontend.css en dépend et la charge avant elle.
   Couleur de l'anneau des avatars : --waka-visage-anneau (la page qui
   l'accueille la règle sur la couleur de sa carte).
   ================================================================== */

/* ==================================================================
   État d'un stage et preuve sociale (21/09/2026)

   Trois repères portent l'information en même temps : la forme (pastille
   pleine pour « complet », contour pour le reste), l'icône et le texte.
   La couleur ne fait jamais le travail toute seule : la différence reste
   visible en mode sombre et pour les personnes daltoniennes.
   ================================================================== */

.waka-statut {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	/* Les cartes de la liste sont des colonnes flex : sans ça, la pastille
	   s'étirerait sur toute la largeur et passerait sous la flèche. */
	align-self: flex-start;
	width: fit-content;
	max-width: 100%;
	margin: 0 0 .5rem;
	padding: .2rem .72rem .2rem .56rem;
	border: 1px solid var(--waka-statut-teinte, var(--wk-taupe, #6E6157));
	border-radius: var(--wk-rayon-bouton, 50px);
	background: color-mix(in srgb, var(--waka-statut-teinte, #6E6157) 12%, transparent);
	color: var(--wk-ecorce, #39291D);
	font: 500 var(--wp--preset--font-size--xs, .8125rem)/1.35 var(--wk-police, Poppins, sans-serif);
	font-style: normal;
	text-transform: none;
	letter-spacing: 0;
	vertical-align: middle;
}

.waka-statut .waka-icone {
	flex: none;
	width: 1rem;
	height: 1rem;
	color: var(--waka-statut-teinte, var(--wk-taupe, #6E6157));
}

.waka-statut--ouvert  { --waka-statut-teinte: var(--wk-sauge, #4A9B7E); }
.waka-statut--bientot { --waka-statut-teinte: var(--wk-ambre, #E89A4C); }
.waka-statut--annule  { --waka-statut-teinte: var(--wk-taupe, #6E6157); }

/* Complet : pastille pleine. La forme seule suffit à le repérer dans une
   liste, sans lire le texte ni distinguer les couleurs. */
.waka-statut--complet {
	border-color: transparent;
	background: #B0512E;
	color: #FAF7F4;
	font-weight: 700;
}

.waka-statut--complet .waka-icone { color: #FAF7F4; }

/* Preuve sociale : deux blocs lisibles d'un coup d'œil, jamais une phrase.
   Une pastille par place (les stages font 10 places), et le nombre de personnes
   en attente à côté. Le chiffre est en pleine couleur de texte, le mot dessous
   en petit : c'est le chiffre qu'on doit voir, pas la phrase. */
.waka-preuve {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 1.4rem;
	flex-basis: 100%;
	align-self: stretch;
	margin: .1rem 0 .15rem;
}

/* Rien d'autre à montrer que les places : elles se centrent au lieu de rester
   seules contre le bord gauche. */
.waka-preuve--seule { justify-content: center; }

.waka-preuve-bloc {
	display: inline-flex;
	align-items: center;
	gap: .35rem .5rem;
	flex-wrap: wrap;
	color: var(--wk-ecorce, #39291D);
	font: 700 var(--wp--preset--font-size--s, .9375rem)/1.2 var(--wk-police, Poppins, sans-serif);
	font-style: normal;
}

.waka-preuve-chiffre {
	font-weight: 800;
	letter-spacing: -.01em;
	white-space: nowrap;
}

.waka-preuve-mot {
	color: var(--wk-taupe, #6E6157);
	font-size: var(--wp--preset--font-size--xs, .8125rem);
	font-weight: 500;
	white-space: nowrap;
}

.waka-preuve .waka-icone {
	flex: none;
	width: 1.15rem;
	height: 1.15rem;
	color: var(--wk-or, #B8792F);
}

/* La file d'attente : une silhouette par personne, à la suite des places, séparée
   par un trait. Le regard voit la file déborder du stage avant de lire le chiffre. */
.waka-file {
	display: inline-flex;
	align-items: center;
	gap: 1px;
	flex: none;
}

.waka-preuve .waka-silhouette {
	width: .95rem;
	height: .95rem;
	color: var(--wk-or, #B8792F);
}

.waka-preuve-bloc--attente:not(:first-child) {
	padding-left: .9rem;
	border-left: 1px solid var(--wk-trait, rgba(57, 41, 29, .16));
}

/* Les sièges : une pastille par place, pleines pour celles qui sont prises. */
.waka-sieges {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex: none;
}

.waka-siege {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--wk-taupe, #6E6157) 55%, transparent);
}

.waka-siege--pris {
	background: var(--wk-or, #B8792F);
	box-shadow: none;
}

/* Les visages (1.0.33) : un avatar par stagiaire à la place des pastilles pleines,
   et un par personne en attente à la place des silhouettes. Ils se chevauchent,
   chacun cerclé de la couleur de la carte pour rester détaché du voisin. */
.waka-visages {
	display: inline-flex;
	align-items: center;
	flex: none;
	margin-right: 2px;
}

.waka-visage {
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--wk-sable-fonce, #E6DCCF);
	box-shadow: 0 0 0 2px var(--waka-visage-anneau, var(--ws-verre-plein, #FAF7F4));
}

.waka-visage + .waka-visage { margin-left: -9px; }

.waka-visage--lettre {
	display: grid;
	place-items: center;
	color: var(--wk-or-texte, #7E5424);
	font-size: .72rem;
	font-weight: 800;
	line-height: 1;
}

/* Personne qui a choisi de rester anonyme (1.0.38) : même rond, silhouette neutre. */
.waka-visage--anonyme {
	display: grid;
	place-items: center;
	color: var(--wk-taupe, #6E6157);
}

.waka-preuve .waka-visage--anonyme .waka-silhouette {
	width: 62%;
	height: 62%;
	color: inherit;
}

.waka-preuve-bloc--complet .waka-siege--pris { background: var(--wk-terracotta, #D86F4A); }
.waka-preuve-bloc--complet .waka-preuve-chiffre { color: var(--wk-terracotta-texte, #B0512E); }

/* Plus de quatorze places : la rangée de pastilles devient illisible, on garde une barre. */
.waka-jauge {
	flex: 0 1 7rem;
	min-width: 4rem;
	height: 7px;
	border-radius: var(--wk-rayon-bouton, 50px);
	background: color-mix(in srgb, var(--wk-taupe, #6E6157) 20%, transparent);
	overflow: hidden;
}

.waka-jauge-remplissage {
	display: block;
	height: 100%;
	border-radius: var(--wk-rayon-bouton, 50px);
	background: var(--wk-or, #B8792F);
}

.waka-jauge--complet .waka-jauge-remplissage { background: var(--wk-terracotta, #D86F4A); }

/* Lu par les lecteurs d'écran, invisible à l'œil. */
.waka-preuve .sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Le pied de l'affiche est centré : la preuve sociale s'y aligne aussi. */
.waka-stage-poster-footer .waka-preuve { justify-content: center; }
.waka-stage-poster-footer .waka-statut { margin-bottom: .65rem; }

/* Sur téléphone, l'en-tête de la fiche passe en colonne centrée (date, pastille,
   titre, bouton) : la preuve sociale se centre avec le reste plutôt que de rester
   collée à gauche. Sur ordinateur l'en-tête est aligné à gauche, elle le reste. */
@media screen and (max-width: 768px) {
	.waka-stage-poster-title-container .waka-preuve { justify-content: center; }
}

/* Écrans étroits : places et attente tiennent sur UNE ligne, comme sur ordinateur.
   Les mots « places » et « en attente » s'effacent — les pastilles et l'icône les
   disent déjà — et l'espacement se resserre. La phrase entière reste lue par les
   lecteurs d'écran et donnée en infobulle. */
@media screen and (max-width: 560px) {
	.waka-preuve { gap: .55rem; }

	/* « 7/10 élèves » reste écrit en entier sur téléphone (Gauthier, 24/09) : la file
	   d'attente a sa propre ligne, la place ne manque plus. */

	.waka-preuve-bloc { gap: .3rem; }

	.waka-sieges { gap: 3px; }

	.waka-siege {
		width: 8px;
		height: 8px;
	}

	.waka-preuve .waka-icone {
		width: 1rem;
		height: 1rem;
	}

	/* Trois silhouettes suffisent sur un téléphone : au-delà la ligne déborderait.
	   Le nombre exact reste affiché juste à côté. */
	.waka-preuve .waka-silhouette {
		width: .85rem;
		height: .85rem;
	}

	/* Dix visages + « 10/10 » + la file ne tiennent pas sur une ligne à 375 px
	   (~295 px pour ~255) : depuis la 1.0.34, la file passe sur sa propre ligne,
	   sous les places, et chaque bloc reste d'un seul tenant. */
	.waka-preuve { flex-wrap: wrap; row-gap: .45rem; }

	.waka-preuve-bloc--attente:not(:first-child) {
		flex-basis: 100%;
		padding-left: 0;
		border-left: 0;
	}

	.waka-stage-poster-title-container .waka-preuve-bloc--attente { justify-content: center; }

	.waka-visage {
		width: 20px;
		height: 20px;
		box-shadow: 0 0 0 1.5px var(--waka-visage-anneau, var(--ws-verre-plein, #FAF7F4));
	}

	.waka-visage + .waka-visage { margin-left: -10px; }

	/* Douze visages en attente au plus sur téléphone : le nombre exact est à côté. */
	.waka-file .waka-visage:nth-child(n+13) { display: none; }

	.waka-visage--lettre { font-size: .6rem; }

	.waka-preuve-bloc { flex-wrap: nowrap; }

}

@media (prefers-color-scheme: dark) {
	body.wk-sombre .waka-statut--ouvert  { --waka-statut-teinte: #6FC3A0; }
	body.wk-sombre .waka-statut--bientot { --waka-statut-teinte: #E3A862; }
	body.wk-sombre .waka-statut--annule  { --waka-statut-teinte: #A1A1A6; }
	body.wk-sombre .waka-statut--complet { background: #974E34; color: #FFE9E1; }
	body.wk-sombre .waka-statut--complet .waka-icone { color: #FFE9E1; }
}