/* -------------------------------------------------------------------------
 * CGT Publications — cartes de publication (Figma 207:4586)
 * Tokens : Jaune #FAD90B / Noir #212529 / Rouge #ED0A30 / Rouge clair #FF1A4B
 * ---------------------------------------------------------------------- */

.cgt-pubs {
	--cgt-p-jaune: #fad90b;
	--cgt-p-noir: #212529;
	--cgt-p-titre: "Boldonse", "Mona Sans", "Helvetica Neue", Arial, sans-serif;
	--cgt-p-corps: "Mona Sans", "Helvetica Neue", Arial, sans-serif;

	--cgt-pubs-colonnes: 3;
	--cgt-p-gap: 40px;
	--cgt-p-badge: 80px;
	--cgt-p-debord: 42px;

	/* Couleurs du triangle d'angle, permutées au survol. */
	--cgt-tri-fond: #fad90b;
	--cgt-tri-plus: #212529;

	display: grid;
	grid-template-columns: repeat( var(--cgt-pubs-colonnes), minmax( 0, 1fr ) );

	/* Toutes les lignes à la même hauteur, y compris entre elles : sans ça,
	   une deuxième ligne aux titres plus courts serait plus basse. */
	grid-auto-rows: 1fr;
	gap: calc( var(--cgt-p-gap) + var(--cgt-p-debord) ) var(--cgt-p-gap);

	/* Le badge de type déborde en haut : on réserve la place. */
	padding-top: var(--cgt-p-debord);
	margin: 0;
	list-style: none;
}

.cgt-pubs *,
.cgt-pubs *::before,
.cgt-pubs *::after {
	box-sizing: border-box;
}

/* ================================ La carte ============================== */

.cgt-pub {
	position: relative;
	display: flex;
	margin: 0;
	padding: 0;
	min-width: 0;
	height: 100%;
}

/* Toute la carte est cliquable, badge de type et triangle d'angle compris :
   ils sont dans le lien et ne bloquent plus les clics. */
.cgt-pub__lien {
	/* !important : certains thèmes forcent position:static sur les liens.
	   Le triangle s'ancrerait alors sur l'article, qui peut être plus grand
	   que la carte, et déborderait du coin arrondi. */
	position: relative !important;
	display: flex !important;
	flex-direction: column;
	justify-content: space-between;
	gap: 7px;
	width: 100%;
	height: 100%;
	min-height: 212px;
	padding: 60px 15px 15px;
	border: 2px solid rgba( 250, 217, 11, 0.5 );
	border-radius: 10px;
	background: #fff;
	color: var(--cgt-p-noir) !important;
	text-decoration: none !important;

	/* Volontairement visible : le badge de type déborde en haut. Le triangle
	   d'angle est rogné par son propre rayon, plus bas. */
	overflow: visible;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Survol : « Variante2 » du composant Figma 128:4118.
   Ombre portée jaune pâle, et triangle d'angle inversé. */
.cgt-pub__lien:hover,
.cgt-pub__lien:focus-visible {
	--cgt-tri-fond: #212529;
	--cgt-tri-plus: #fad90b;
	box-shadow: 2px 2px 0 rgba( 255, 235, 87, 0.25 );
	text-decoration: none !important;
}

.cgt-pub__lien:focus-visible {
	outline: 2px solid var(--cgt-p-noir);
	outline-offset: 3px;
}

/* ============================= Badge de type ============================ */
/* Il chevauche le bord supérieur, comme dans la maquette. */

.cgt-pub__type {
	position: absolute;
	top: calc( var(--cgt-p-debord) * -1 );
	left: 34px;
	z-index: 2;
	display: block;
	width: var(--cgt-p-badge);
	height: var(--cgt-p-badge);
	line-height: 0;
}

.cgt-pub__type img,
.cgt-pub__type-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Repli sans logo : pastille dentelée portant le nom du type. */
.cgt-pub__type-repli {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	color: #ff1a4b;
}

.cgt-pub__dentelle {
	display: block;
	width: 100%;
	height: 100%;
}

.cgt-pub__type-label {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 10px;
	color: var( --cgt-p-noir, #212529 );
	font-family: var( --cgt-p-titre, "Boldonse", "Mona Sans", "Helvetica Neue", Arial, sans-serif );
	font-weight: 400;
	font-size: 10px;
	line-height: 1.1;
	text-align: center;
	text-transform: uppercase;
	word-break: break-word;
}

/* ================================= Corps ================================ */

.cgt-pub__corps {
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding: 0 10px;
	margin-top:30px;
}

/* ------------------------------- Pastilles ------------------------------ */

.cgt-pub__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.cgt-pub__tag {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 5px 8px 5px 5px;
	border: 1px solid var( --cgt-tag-bord, transparent );
	border-radius: 50px;
	background: var( --cgt-tag-fond, #fad90b );
	color: var( --cgt-tag-texte, #212529 );

	/* Valeur de repli indispensable : la pastille est aussi employée hors
	   d'une grille .cgt-pubs — chapô d'article, contenu libre — où la
	   variable ne serait pas déclarée et la règle abandonnée. */
	font-family: var( --cgt-p-titre, "Boldonse", "Mona Sans", "Helvetica Neue", Arial, sans-serif ) !important;
	font-weight: 400 !important;
	font-size: 9px !important;
	line-height: normal !important;
	letter-spacing: 0 !important;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Fond clair : la maquette passe alors en pastille cerclée. */
.cgt-pub__tag--cercle {
	background: #fff;
}

/* Survol : couleurs propres au terme, saisies dans le formulaire de la
   taxonomie. Non renseignées, elles reprennent celles du repos et rien
   ne bouge. L'effet suit le survol de la carte entière, et celui de la
   pastille elle-même quand elle est cliquable. */
.cgt-pub__lien:hover .cgt-pub__tag,
.cgt-pub__lien:focus-visible .cgt-pub__tag,
a.cgt-pub__tag:hover,
a.cgt-pub__tag:focus-visible {
	background: var( --cgt-tag-fond-survol, var( --cgt-tag-fond, #fad90b ) ) !important;
	color: var( --cgt-tag-texte-survol, var( --cgt-tag-texte, #212529 ) ) !important;
	border-color: var( --cgt-tag-bord-survol, var( --cgt-tag-bord, transparent ) ) !important;
}

.cgt-pub__tag-etoile {
	display: inline-flex;
	flex: 0 0 11px;
	width: 11px;
	height: 11px;
	line-height: 0;
}

.cgt-pub__tag-etoile svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* ----------------------------- Date et titre ---------------------------- */

.cgt-pub__meta {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.cgt-pub__date {
	color: var(--cgt-p-noir);
	font-family: var(--cgt-p-corps);
	font-weight: 800;
	font-size: 12px;
	line-height: normal;
	text-transform: uppercase;
}

.cgt-pub__titre {
	color: var(--cgt-p-noir);
	font-family: var(--cgt-p-corps);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.5;
	word-break: break-word;
}

/* ============================ Triangle d'angle ========================== */
/* Dans le flux, en bas à droite : posé en absolu, il chevauchait le titre
   dès que celui-ci occupait toute la hauteur de la carte. */

.cgt-pub__plus {
	position: static;
	align-self: flex-end;
	flex: 0 0 46px;
	display: block;
	width: 49px;
	height: 46px;
	margin: 0;
	line-height: 0;
}

.cgt-pub__plus svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* =============================== Responsive ============================= */

@media only screen and (max-width: 1100px) {
	.cgt-pubs {
		grid-template-columns: repeat( min( 2, var(--cgt-pubs-colonnes) ), minmax( 0, 1fr ) );
		--cgt-p-gap: 30px;
	}
}

@media only screen and (max-width: 690px) {
	.cgt-pubs {
		grid-template-columns: minmax( 0, 1fr );
		--cgt-p-gap: 25px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cgt-pub__lien {
		transition: none;
	}
}