/**
 * Bulle partenaire — logo dans un disque, libellé optionnel sous un filet.
 *
 * La bulle est son propre conteneur de requête : ses descendants sont exprimés
 * en cqw, donc en centièmes de son diamètre. Elle garde ainsi ses proportions
 * qu'elle mesure 384 px dans le consortium pilote ou 258 px chez les
 * agrégateurs, sans que la mise en page parente ait à s'en occuper.
 * Ses propres dimensions, en revanche, sont en pourcentage — voir plus bas.
 *
 * Repères Figma (bulle de 384) : filet à 55 % de la hauteur, large de 74 %,
 * libellé 30 px.
 *
 * Emplacement : assets/css/components/bulle.css
 */

/* padding en % et non en cqw : un élément ne peut pas se mesurer à ses propres
   unités de conteneur. Sur .bulle — qui EST le conteneur — des cqw se
   résoudraient contre l'ancêtre le plus proche, ou contre le viewport à
   défaut, ce qui écrase le contenu. Le pourcentage se réfère à la largeur du
   bloc conteneur, qui est ici celle de la bulle : c'est la valeur voulue.
   Les descendants, eux, utilisent bien cqw. */
.bulle {
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	padding: 13%;
	border-radius: var(--radius-full);
	text-align: center;
}

/* ── Logo ──────────────────────────────────────────────────── */

/* 30 % de la bulle quand un libellé occupe le bas — c'est le cas du consortium
   pilote et des relais. */
.bulle__logo {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 30cqw;
}

/* Sans libellé, Figma laisse le logo prendre près de 70 % du disque : c'est
   toute la présence de la bulle.

   La largeur se borne aussi, et non plus seulement la hauteur : un logo très
   large, comme le bandeau de CCPA, prenait les 100 % et venait buter contre le
   cercle, où il paraissait à l'étroit. Le carré inscrit dans un disque mesure
   71 % de son diamètre ; 78 reste un peu généreux, l'angle d'un logo n'étant
   jamais aussi chargé que son centre. Les sigles carrés ne bougent pas : c'est
   leur hauteur qui les limite, pas leur largeur. */
.bulle--sans-label .bulle__logo {
	width: 78cqw;
	height: 70cqw;
	margin-inline: auto;
}

.bulle__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* ── Libellé ───────────────────────────────────────────────── */

/* Le filet est le bord haut du libellé : sans libellé, pas de filet. */
.bulle__label {
	width: 90cqw;
	margin-block-start: 7cqw;
	padding-block-start: 6cqw;
	font-family: var(--font-display);
	font-size: 7.8cqw;          /* Figma : 30 px sur une bulle de 384 */
	font-weight: var(--fw-bold);
	line-height: 1.2;
	border-block-start: 1px solid currentColor;
}

/* ── Variantes ─────────────────────────────────────────────── */

.bulle--gold,
.bulle--amber,
.bulle--sand,
.bulle--green {
	color: var(--color-text-inverse);
}

.bulle--gold {
	background-color: var(--card-gold-bg);
}

.bulle--amber {
	background-color: var(--card-amber-bg);
}

.bulle--sand {
	background-color: var(--card-sand-bg);
}

.bulle--green {
	background-color: var(--card-green-bg);
}

/* Contours : disque clair cerné d'un filet de 1 px, sans libellé.
   Vert chez les agrégateurs, orange chez les financiers et la distribution. */
.bulle--contour {
	background-color: var(--color-bg-alt);
	border: 1px solid var(--e4y-green);
}

.bulle--contour-orange {
	background-color: var(--e4y-off-white);
	border: 1px solid var(--e4y-orange);
}


/* Sans logo : le nom, au centre du disque. Il tient le rôle jusqu'à ce que le
   logo arrive, plutôt que de laisser un cercle vide qui passe pour une image
   non chargée. */
.bulle__nom {
	padding-inline: var(--space-4);
	font-family: var(--font-display);
	font-size: var(--fs-body);
	font-weight: var(--fw-bold);
	line-height: var(--lh-tight);
	color: currentColor;
	text-align: center;
	text-wrap: balance;
}