/**
 * Dahu Theme Annad 2026 — bloc « Schéma du moteur à points » (blocks/moteur-points, 4.48.0).
 * Feuille du bloc (block.json « style ») : chargée là où le bloc est présent, façade et éditeur.
 *
 * Deux dispositions :
 * - .is-interactive (posée par view.js, et par l'éditeur) à partir de 64em : carte du point actif et
 *   bouton à gauche, schéma à droite avec ses points-boutons étiquetés ;
 * - sinon (petit écran, ou pas de JavaScript) : schéma réduit à repères décoratifs, liste des points
 *   en accordéon dessous, bouton à la fin. Les points-boutons y sont masqués : rien de minuscule à viser.
 * Mouvement réduit : aucune transition.
 */

.annad-mp {
	--annad-mp-line: color-mix(in srgb, var(--color-on-surface) 18%, transparent);
	--annad-mp-anneau: color-mix(in srgb, var(--color-brand-green) 38%, var(--color-bg));
	display: grid;
	grid-template-areas: "schema" "accordeon" "actions";
	gap: 2rem;
}

.annad-mp__carte {
	display: none;
	grid-area: carte;
}

.annad-mp__actions {
	grid-area: actions;
}

.annad-mp__actions .wp-block-buttons {
	margin: 0;
}

.annad-mp__actions .wp-block-button__link {
	min-width: min(100%, 17.5rem);
}

.annad-mp__accordeon {
	grid-area: accordeon;
}

/* ---------- Schéma : photo dans l'anneau ---------- */

.annad-mp__schema {
	grid-area: schema;
	display: flex;
	justify-content: center;
	container-type: inline-size;
}

.annad-mp__anneau {
	--annad-mp-d: min(22rem, 78cqi);
	position: relative;
	flex: none;
	width: var(--annad-mp-d);
	height: var(--annad-mp-d);
	margin: calc(var(--annad-mp-d) * 0.035);
	padding: calc(var(--annad-mp-d) * 0.075);
	background-color: var(--annad-mp-anneau);
	border-radius: 50%;
	box-shadow: 0 0 0 calc(var(--annad-mp-d) * 0.035) var(--color-bg);
}

.annad-mp__image {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: var(--color-surface-3);
	border-radius: 50%;
}

.annad-mp__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.annad-mp__points {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Chaque point sur la ligne médiane de l'anneau vert, à son angle (0° en haut, sens horaire). */
.annad-mp__point-item {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	transform: rotate(var(--annad-mp-angle)) translateY(calc(var(--annad-mp-d) * -0.4625)) rotate(calc(-1 * var(--annad-mp-angle)));
}

/* Repère décoratif (disposition accordéon) */
.annad-mp__repere {
	position: absolute;
	width: 0.875rem;
	height: 0.875rem;
	background-color: var(--color-on-surface);
	border-radius: 50%;
	translate: -50% -50%;
}

.annad-mp__repere.is-active {
	background-color: var(--color-brand-green);
}

/* Point-bouton (disposition interactive) */
.annad-mp__point {
	display: none;
	position: absolute;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	cursor: pointer;
	background-color: var(--color-on-surface);
	border: 0;
	border-radius: 50%;
	translate: -50% -50%;
	transition: background-color 0.25s ease, box-shadow 0.25s ease, scale 0.25s ease;
}

.annad-mp__point:hover {
	scale: 1.08;
}

.annad-mp__point.is-active {
	background-color: var(--color-brand-green);
	box-shadow: 0 0 0 0.4rem color-mix(in srgb, var(--color-brand-green) 30%, transparent);
}

.annad-mp__point:focus-visible {
	outline: 2px solid var(--color-brand-green);
	outline-offset: 4px;
}

.annad-mp__etiquette {
	position: absolute;
	padding: 0.5rem 1.5rem;
	font-size: 0.75rem;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--color-on-surface);
	background-color: var(--color-surface-2);
	border: 1px solid var(--annad-mp-line);
	border-radius: 0.375rem;
	transition: border-color 0.25s ease;
}

.annad-mp__point.is-active .annad-mp__etiquette {
	border-color: var(--color-brand-green);
}

.annad-mp__point--haut .annad-mp__etiquette {
	bottom: calc(100% + 0.9rem);
}

.annad-mp__point--bas .annad-mp__etiquette {
	top: calc(100% + 0.9rem);
}

.annad-mp__point--centre .annad-mp__etiquette {
	left: 50%;
	translate: -50% 0;
}

.annad-mp__point--droite .annad-mp__etiquette {
	left: -0.75rem;
}

.annad-mp__point--gauche .annad-mp__etiquette {
	right: -0.75rem;
}

/* ---------- Carte du point actif ---------- */

.annad-mp__carte {
	align-self: center;
	padding: 1.25rem 1.25rem 1.5rem;
	background-image: linear-gradient(160deg, var(--color-surface-3), var(--color-surface-2));
	border: 1px solid var(--annad-mp-line);
	border-radius: 1.25rem;
}

.annad-mp__detail {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.annad-mp__detail.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.3s ease;
}

.annad-mp__entete {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1rem;
	margin-bottom: 1rem;
}

.annad-mp__titre {
	margin: 0;
	font-family: var(--font-heading);
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.annad-mp__badge {
	display: inline-block;
	padding: 0.25rem 1.5rem;
	font-size: 0.75rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
	border: 1px solid var(--color-brand-green);
	border-radius: 999px;
}

.annad-mp__texte {
	font-size: 0.9375rem;
	line-height: 1.65;
}

.annad-mp__texte p {
	margin: 0;
}

.annad-mp__texte p + p {
	margin-top: 0.75rem;
}

/* ---------- Accordéon ---------- */

.annad-mp__accordeon {
	border-top: 1px solid var(--annad-mp-line);
}

.annad-mp__item {
	border-bottom: 1px solid var(--annad-mp-line);
}

.annad-mp__resume {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	min-height: 3rem;
	padding: 0.75rem 0;
	font-size: 0.875rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	cursor: pointer;
	list-style: none;
}

.annad-mp__resume::-webkit-details-marker {
	display: none;
}

.annad-mp__resume::before {
	content: "";
	flex: none;
	width: 0.875rem;
	height: 0.875rem;
	background-color: var(--color-on-surface);
	border-radius: 50%;
}

.annad-mp__item[open] > .annad-mp__resume::before {
	background-color: var(--color-brand-green);
}

.annad-mp__resume::after {
	content: "+";
	margin-left: auto;
	font-size: 1.25rem;
	line-height: 1;
}

.annad-mp__item[open] > .annad-mp__resume::after {
	content: "\2212";
}

.annad-mp__resume:focus-visible {
	outline: 2px solid var(--color-brand-green);
	outline-offset: 2px;
}

.annad-mp__contenu {
	padding: 0 0 1.25rem 1.75rem;
}

.annad-mp__contenu .annad-mp__badge {
	margin-bottom: 0.75rem;
}

/* ---------- Disposition interactive (grand écran) ---------- */

@media (min-width: 64em) {
	.annad-mp.is-interactive {
		grid-template-columns: minmax(16rem, 26.5rem) minmax(0, 1fr);
		grid-template-rows: 1fr auto auto 1fr;
		grid-template-areas: ". schema" "carte schema" "actions schema" ". schema";
		column-gap: clamp(1.5rem, 3vw, 3.5rem);
		row-gap: 0;
	}

	.annad-mp.is-interactive .annad-mp__carte {
		display: grid;
	}

	.annad-mp.is-interactive .annad-mp__actions {
		margin-top: clamp(2rem, 5vw, 5.5rem);
	}

	.annad-mp.is-interactive .annad-mp__accordeon,
	.annad-mp.is-interactive .annad-mp__repere {
		display: none;
	}

	.annad-mp.is-interactive .annad-mp__point {
		display: block;
	}

	/* Place pour les étiquettes de part et d'autre de l'anneau. */
	.annad-mp.is-interactive .annad-mp__anneau {
		--annad-mp-d: min(38rem, 60cqi);
		margin-block: 3.5rem;
	}
}

@media (min-width: 64em) and (max-width: 79.99em) {
	.annad-mp__etiquette {
		padding-inline: 1rem;
		font-size: 0.6875rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.annad-mp__point,
	.annad-mp__etiquette,
	.annad-mp__detail,
	.annad-mp__detail.is-active {
		transition: none;
	}

	.annad-mp__point:hover {
		scale: none;
	}
}