/**
 * Anneau segmenté — motif signature de la charte E4Y.
 *
 * La taille est pilotée par le parent (width ou max-width sur .anneau ou un ancêtre).
 * Ne jamais écrire de valeur en pixels ici.
 *
 * Emplacement : assets/css/components/anneau.css
 */

/* ============================================================
   Socle
   ============================================================ */

.anneau {
	position: relative;
	aspect-ratio: 1 / 1;
}

/* Le SVG couvre l'intégralité du carré */
.anneau__svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Zone de contenu central : inscrite dans le cercle intérieur de l'anneau.
   inset = trait + blanc = (--ring-stroke + --ring-gap) %
   Le blanc reproduit le gap Figma entre les segments et le cercle intérieur. */
.anneau__contenu {
	position: absolute;
	inset: calc((var(--ring-stroke) + var(--ring-gap)) * 1%);
	border-radius: var(--radius-full);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Image circulaire à l'intérieur de l'anneau */
.anneau__contenu img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}