/* ══ MDLM EVENTS — RÉACTIONS AUX ÉVÉNEMENTS ════════════════════════════════
 *
 * Composant du plugin : « Ça m'intéresse » / « Je participe », plus les deux
 * compteurs publics. Quatre variantes, une seule feuille :
 *
 *   .mdlm-reactions--full     fiche événement — barre compacte « Vous venez ? »
 *   .mdlm-reactions--card     vue Liste — deux boutons courts, compteurs à côté
 *   .mdlm-reactions--mini     vue Photo — pictogramme et nombre
 *   .mdlm-reactions--sidebar  sidebar d'une fiche — le même, encore plus serré
 *   .mdlm-reactions--home     cartes de la page d'accueil — comme la vue Photo
 *   .mdlm-reactions--past     [mdlm_past_events] — compteurs LECTURE SEULE
 *
 * REFONTE 0.1.41 — le composant était un bloc : panneau bleu, titre, boutons de
 * 40 px, ligne d'amorce « Soyez le premier à réagir ». Il pesait plus que le
 * contenu qu'il accompagnait. Il devient une LIGNE : pas de fond, pas de carte,
 * pas de titre, des pastilles de 32 px au plus, et rien à lire quand personne
 * n'a encore réagi.
 *
 * SCOPE — le composant porte sa propre classe et n'est jamais rendu ailleurs
 * (voir MDLM_Events_Reactions_Display) : les règles partent donc de
 * .mdlm-reactions, sans emprunter le scope des vues. Aucune règle ne vise un
 * élément de TEC, d'Elementor ou du thème : rien d'autre que ce composant n'est
 * atteint.
 *
 * JETONS — ceux du design system (mdlm-events-base.css), avec un repli écrit en
 * dur : le composant peut être rendu dans une fiche, dans une vue ou dans un
 * conteneur Elementor, et il doit s'afficher juste même si aucun jeton n'est
 * hérité. Seule la teinte rose des « intéressés » est propre à ce composant —
 * le design system n'a que le rouge d'action du § 8, trop vif pour un état.
 *
 * ÉTATS — les deux choix ne se ressemblent JAMAIS à l'état actif : « Intéressé »
 * se remplit d'un rose très clair avec un cœur plein, « Je participe » passe en
 * bleu soutenu avec un texte blanc. Le visiteur sait lequel il a choisi d'un
 * coup d'œil, sans lire.
 */

.mdlm-reactions {
	--mdlm-rx-navy: var(--mdlm-ev-navy, #0B3D82);
	--mdlm-rx-blue: var(--mdlm-ev-blue, #178FE6);
	--mdlm-rx-blue-strong: var(--mdlm-ev-blue-strong, #0B74C2);
	--mdlm-rx-blue-ink: var(--mdlm-ev-blue-ink, #0A63B0);
	--mdlm-rx-tint: var(--mdlm-ev-tint, #EAF5FE);
	--mdlm-rx-line: var(--mdlm-ev-line-strong, #BBD7EF);
	--mdlm-rx-muted: var(--mdlm-ev-muted, #50677F);
	--mdlm-rx-white: var(--mdlm-ev-white, #FFFFFF);

	/* Rose « intéressé » : fond très clair, bordure douce, encre à 5,4:1 sur ce
	   fond et 6,1:1 sur blanc — un état, jamais une alerte. */
	--mdlm-rx-rose-tint: #FDEEF1;
	--mdlm-rx-rose-line: #F0B8C4;
	--mdlm-rx-rose-ink: #B03350;
	--mdlm-rx-rose-soft: #D2899A;
	--mdlm-rx-blue-soft: #8FB6DA;

	--mdlm-rx-font: var(--mdlm-ev-font-text, "Nunito Sans", "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
	--mdlm-rx-transition: var(--mdlm-ev-transition, .18s ease);

	box-sizing: border-box;
	font-family: var(--mdlm-rx-font);
}

.mdlm-reactions *,
.mdlm-reactions *::before,
.mdlm-reactions *::after {
	box-sizing: inherit;
}

/* Un compteur à zéro porte l'attribut `hidden`. Sans cette règle, le `display`
   des classes ci-dessous l'emporterait sur le `display: none` du navigateur, et
   un zéro resterait affiché. */
.mdlm-reactions [hidden] {
	display: none;
}

/* ══ BOUTONS — gabarit commun ══════════════════════════════════════════════
 * Qualifiés par la balise : le thème Hello borde et survole tout <button> en
 * rose, et le kit Elementor impose sa propre typographie. */

.mdlm-reactions button.mdlm-reactions__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .375rem;
	min-height: 2rem;
	margin: 0;
	padding: 0 .6875rem;
	border: 1px solid var(--mdlm-rx-line);
	border-radius: 999px;
	background: var(--mdlm-rx-white);
	box-shadow: none;
	color: var(--mdlm-rx-blue-ink);
	font-family: var(--mdlm-rx-font);
	font-size: .8125rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-shadow: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--mdlm-rx-transition), border-color var(--mdlm-rx-transition), color var(--mdlm-rx-transition);
}

.mdlm-reactions button.mdlm-reactions__btn:is(:hover, :focus) {
	border-color: var(--mdlm-rx-blue);
	background: var(--mdlm-rx-tint);
	color: var(--mdlm-rx-navy);
	outline: none;
}

.mdlm-reactions button.mdlm-reactions__btn:focus-visible {
	outline: 2px solid var(--mdlm-rx-blue);
	outline-offset: 2px;
}

.mdlm-reactions button.mdlm-reactions__btn[disabled] {
	cursor: default;
	opacity: .65;
}

.mdlm-reactions__icon {
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
	fill: currentColor;
	stroke: currentColor;
	stroke-width: 0;
}

/* Le cœur est un contour tant que le choix n'est pas fait… */
.mdlm-reactions__btn--interested .mdlm-reactions__icon {
	fill: none;
	stroke-width: 1.6;
}

/* …et se remplit lorsqu'il l'est. */
.mdlm-reactions__btn--interested.is-active .mdlm-reactions__icon {
	fill: currentColor;
	stroke-width: 1.2;
}

.mdlm-reactions__btn--attending .mdlm-reactions__icon {
	fill: none;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ── État actif : deux rendus VOLONTAIREMENT différents ─────────────────── */

.mdlm-reactions button.mdlm-reactions__btn--interested.is-active {
	border-color: var(--mdlm-rx-rose-line);
	background: var(--mdlm-rx-rose-tint);
	color: var(--mdlm-rx-rose-ink);
}

.mdlm-reactions button.mdlm-reactions__btn--interested.is-active:is(:hover, :focus) {
	border-color: var(--mdlm-rx-rose-ink);
	background: var(--mdlm-rx-rose-tint);
	color: var(--mdlm-rx-rose-ink);
}

.mdlm-reactions button.mdlm-reactions__btn--attending.is-active {
	border-color: var(--mdlm-rx-blue-strong);
	background: var(--mdlm-rx-blue-strong);
	color: var(--mdlm-rx-white);
}

.mdlm-reactions button.mdlm-reactions__btn--attending.is-active:is(:hover, :focus) {
	border-color: var(--mdlm-rx-navy);
	background: var(--mdlm-rx-navy);
	color: var(--mdlm-rx-white);
}

/* ── Chargement : discret, et jamais un saut de mise en page ───────────── */

.mdlm-reactions.is-busy .mdlm-reactions__actions {
	opacity: .7;
}

/* ══ COMPTEURS ═════════════════════════════════════════════════════════════
 * À CÔTÉ des boutons, jamais dedans : sur la fiche et en vue Liste, le nombre
 * n'est écrit qu'une fois. Un compteur à zéro porte `hidden` ; la ligne entière
 * aussi quand les deux le sont. */

.mdlm-reactions__counts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .125rem .75rem;
	margin: 0;
	padding: 0;
	color: var(--mdlm-rx-muted);
	font-size: .8125rem;
	font-weight: 600;
	line-height: 1.4;
}

.mdlm-reactions__count {
	display: inline-flex;
	align-items: center;
	gap: .3125rem;
	white-space: nowrap;
}

.mdlm-reactions__count-icon {
	flex: 0 0 auto;
	width: .875rem;
	height: .875rem;
	fill: none;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Pictogrammes de compteur : légers, et de la couleur de l'état qu'ils
   comptent — on reconnaît la ligne sans lire le mot. */
.mdlm-reactions__count--interested .mdlm-reactions__count-icon {
	fill: var(--mdlm-rx-rose-soft);
	stroke: var(--mdlm-rx-rose-soft);
	stroke-width: 1;
}

.mdlm-reactions__count--attending .mdlm-reactions__count-icon {
	stroke: var(--mdlm-rx-blue-soft);
}

/* ══ ANNONCE ═══════════════════════════════════════════════════════════════
 * Masquée aux yeux par défaut : après un clic réussi, elle annonce les
 * compteurs aux lecteurs d'écran sans les réécrire à l'écran, où ils sont déjà.
 * Elle ne devient VISIBLE que pour une erreur réelle, et le script l'efface au
 * succès suivant. */

.mdlm-reactions__status {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.mdlm-reactions__status.is-error {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: normal;
	flex: 1 0 100%;
	color: var(--mdlm-rx-rose-ink);
	font-size: .8125rem;
	font-weight: 600;
	line-height: 1.4;
}

/* ══ VARIANTE FICHE — une barre, pas un bloc ═══════════════════════════════ */

.mdlm-reactions--full {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .875rem;
	width: 100%;
	padding-top: .875rem;
	border-top: 1px solid var(--mdlm-ev-line, #D9ECFA);
}

.mdlm-reactions--full .mdlm-reactions__intro {
	color: var(--mdlm-rx-navy);
	font-size: .9375rem;
	font-weight: 700;
	line-height: 1.3;
}

.mdlm-reactions--full .mdlm-reactions__actions {
	display: inline-flex;
	flex-wrap: wrap;
	gap: .5rem;
}

/* ══ VARIANTE CARTE — vue Liste ════════════════════════════════════════════
 * Une ligne de plus dans la carte, pas davantage. */

.mdlm-reactions--card {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .375rem .75rem;
}

/* ── L'ESPACE AU-DESSUS DU COMPOSANT — et pourquoi la classe est DOUBLÉE ───
 * Le gabarit « cost » de TEC ne pose aucune marge basse : l'écart visible sous
 * le badge tarif est entièrement le nôtre. Mais `common-skeleton.css` de TEC
 * porte un reset
 *
 *     .tribe-common div { border: 0; margin: 0; padding: 0 }
 *
 * qui pèse (0,1,1) et qui est imprimé DANS LE CORPS, donc APRÈS notre feuille.
 * Une règle `.mdlm-reactions--card` seule pèse (0,1,0) : sa marge était écrasée
 * à 0 en vue Liste comme en sidebar — le composant était collé au tarif, et
 * augmenter la valeur n'y aurait rien changé.
 *
 * La classe de base est donc répétée pour atteindre (0,2,0) : c'est un poids,
 * pas une règle globale — chaque sélecteur reste attaché à SA variante. La
 * fiche n'en a pas besoin (elle est rendue hors d'une vue TEC, et son écart est
 * un `padding-top`), et la vue Photo n'est volontairement pas touchée. */
.mdlm-reactions.mdlm-reactions--card {
	margin: .5rem 0 0;
}

.mdlm-reactions--card .mdlm-reactions__actions {
	display: inline-flex;
	flex-wrap: nowrap;
	gap: .375rem;
	min-width: 0;
}

.mdlm-reactions--card .mdlm-reactions__counts {
	font-size: .75rem;
}

/* ══ VARIANTES PICTOGRAMME + NOMBRE — vue Photo et sidebar ═════════════════
 * Le mot vit dans le nom accessible : deux pastilles tiennent dans une colonne
 * de vue Photo à trois colonnes comme dans une carte de sidebar. */

.mdlm-reactions--mini,
.mdlm-reactions--sidebar,
.mdlm-reactions--home {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.mdlm-reactions--mini .mdlm-reactions__actions,
.mdlm-reactions--sidebar .mdlm-reactions__actions,
.mdlm-reactions--home .mdlm-reactions__actions {
	display: inline-flex;
	flex-wrap: nowrap;
	min-width: 0;
}

/* ── PLACEMENT DANS UNE CARTE PHOTO ───────────────────────────────────────
 * Le bas d'une carte Photo est une colonne flex dont TEC Pro — et notre feuille
 * de vue — ordonnent les enfants (titre 1, date 2, catégories 3, prix 4). Le
 * composant, ajouté en fin de DOM, se plaçait donc en tête par le seul effet de
 * son `order` implicite à 0 : un placement subi, que le moindre changement
 * d'ordre chez Pro aurait déplacé. Il est désormais EXPLICITE.
 *
 * L'air passe SOUS les pastilles, pas au-dessus : elles se rapprochent ainsi de
 * l'image qu'elles accompagnent, et le titre cesse de leur être collé — il n'y
 * avait aucun espace entre les deux, sur les deux pages.
 *
 * Cet air est un PADDING, et c'est délibéré. Events Calendar Pro porte
 *
 *     .tribe-events-pro .tribe-events-pro-photo__event-details > :last-child
 *         { margin-bottom: 0 }
 *
 * qui pèse (0,3,0). Le composant est ajouté en FIN de DOM — `order` ne change
 * que l'ordre visuel, pas le rang réel —, il est donc toujours ce dernier
 * enfant : une marge basse y serait annulée, quelle que soit sa valeur. Un
 * rembourrage produit le même espace et n'est visé par aucun reset (celui de
 * TEC, `.tribe-common div { padding: 0 }`, pèse (0,1,1) et passe derrière la
 * classe doublée). */
.mdlm-reactions.mdlm-reactions--mini {
	order: -1;
	margin: 0;
	padding: 0 0 .625rem;
}

.mdlm-reactions--mini .mdlm-reactions__actions,
.mdlm-reactions--home .mdlm-reactions__actions {
	gap: .375rem;
}

.mdlm-reactions--mini button.mdlm-reactions__btn,
.mdlm-reactions--home button.mdlm-reactions__btn {
	min-height: 1.625rem;
	padding: 0 .5rem;
	gap: .25rem;
	font-size: .78125rem;
}

.mdlm-reactions--mini .mdlm-reactions__icon,
.mdlm-reactions--home .mdlm-reactions__icon {
	width: .875rem;
	height: .875rem;
}

/* Comme la vue Liste et la sidebar, la carte de l'accueil vit DANS une vue TEC :
   la classe est doublée pour passer devant `.tribe-common div { margin: 0 }`
   (voir le § de la vue Liste). La vue Photo, elle, n'est pas touchée. */
.mdlm-reactions.mdlm-reactions--home {
	margin: .5rem 0 0;
}

.mdlm-reactions.mdlm-reactions--sidebar {
	margin: .5rem 0 0;
}

.mdlm-reactions--sidebar .mdlm-reactions__actions {
	gap: .25rem;
}

.mdlm-reactions--sidebar button.mdlm-reactions__btn {
	min-height: 1.5rem;
	padding: 0 .4375rem;
	gap: .1875rem;
	font-size: .75rem;
}

.mdlm-reactions--sidebar .mdlm-reactions__icon {
	width: .8125rem;
	height: .8125rem;
}

.mdlm-reactions--mini .mdlm-reactions__status.is-error,
.mdlm-reactions--sidebar .mdlm-reactions__status.is-error,
.mdlm-reactions--home .mdlm-reactions__status.is-error {
	margin-top: .25rem;
	font-size: .6875rem;
}

/* ══ VARIANTE LECTURE SEULE — [mdlm_past_events] ═══════════════════════════
 * Un événement terminé n'accepte plus d'écriture : ses compteurs sont une
 * ARCHIVE. Aucun bouton n'est rendu, donc rien ici ne doit ressembler à un
 * bouton — ni bordure, ni fond, ni survol, ni curseur. On réemploie les
 * pictogrammes et la couleur secondaire des compteurs vivants, et rien d'autre.
 * La classe est doublée par précaution : ce bloc vit dans une page Elementor,
 * dont le thème donne une marge basse aux paragraphes. */

.mdlm-reactions.mdlm-reactions--past {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .25rem .75rem;
	margin: .5rem 0 0;
	padding: 0;
	color: var(--mdlm-rx-muted);
	font-size: .75rem;
	font-weight: 600;
	line-height: 1.4;
}

/* ══ TÉLÉPHONE ═════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
	.mdlm-reactions--full {
		padding-top: .75rem;
		gap: .5rem .75rem;
	}
}

@media (max-width: 600px) {
	.mdlm-reactions--card button.mdlm-reactions__btn {
		padding: 0 .5625rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mdlm-reactions button.mdlm-reactions__btn {
		transition: none;
	}
}