/* -------------------------------------------------------------------------
 * CGT Accords — cartes d'accord (Figma 137:4839)
 * Complète la feuille du module CGT Publications, dont elle dépend.
 *
 * Cotes de la maquette :
 *   carte     retrait haut 50, côtés 15, bas 15
 *   bloc      212 de haut, contenu en haut et triangle en bas à droite
 *   contenu   retrait latéral 25 supplémentaire, soit 40 depuis le bord
 *   -> hauteur de carte : 50 + 212 + 15 = 277
 *
 * Le triangle est ici DANS LE FLUX, comme dans la maquette, et non posé en
 * absolu : c'est ce qui permet au cadre du titre d'occuper toute la largeur
 * sans jamais passer dessous.
 * ---------------------------------------------------------------------- */

.cgt-pubs--accords {
	--cgt-a-haut: 50px;
	--cgt-a-bloc: 212px;
	--cgt-a-bas: 15px;
	--cgt-a-cotes: 25px;

	/* Pas de badge de type à faire déborder au-dessus de la grille. */
	padding-top: 0;
	gap: var(--cgt-p-gap);
}

.cgt-accord__lien {
	height: 100%;
	justify-content: space-between;
	gap: 22px;
	padding-top: var(--cgt-a-haut, 50px);
	padding-bottom: var(--cgt-a-bas, 15px);
	min-height: calc(
		var(--cgt-a-haut, 50px) + var(--cgt-a-bloc, 212px) + var(--cgt-a-bas, 15px)
	);
}

/* Retrait latéral du contenu : 25 px en plus des 15 de la carte. */
.cgt-accord__lien .cgt-pub__corps {
	padding: 0 var(--cgt-a-cotes, 25px);
}

/* Le cadre du titre occupe toute la largeur disponible. */
.cgt-accord__titre {
	display: block;
	width: 100%;
	padding: 15px;
	border: 1px solid rgba( 250, 217, 11, 0.5 );
	border-radius: 8px;
	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;
	transition: border-color 0.2s ease;
}

.cgt-accord__lien:hover .cgt-accord__titre,
.cgt-accord__lien:focus-visible .cgt-accord__titre {
	border-color: var(--cgt-p-jaune);
}

/* ---------------------------- Triangle d'angle -------------------------- */
/* Dans le flux, aligné à droite en bas du bloc. */

.cgt-accord__lien .cgt-pub__plus {
	position: static;
	align-self: flex-end;
	flex: 0 0 46px;
	margin: 0;
	border-radius: 0;
	overflow: visible;
}

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

@media only screen and (max-width: 690px) {
	.cgt-pubs--accords {
		--cgt-a-haut: 35px;
		--cgt-a-bloc: 180px;
		--cgt-a-cotes: 15px;
	}
}

/* ====================== Fiche accord : grille de fin ==================== */
/* Trois accords au maximum. En dessous, la grille se resserre au nombre
   réel et se centre, plutôt que d'étirer les cartes ou de laisser un vide
   en bout de ligne. */

.cgt-article__grille.cgt-pubs--accords {
	--cgt-a-carte-max: 420px;

	justify-content: center;
	grid-template-columns: repeat( 3, minmax( 0, var(--cgt-a-carte-max) ) ) !important;
}

.cgt-article__grille--2.cgt-pubs--accords {
	grid-template-columns: repeat( 2, minmax( 0, var(--cgt-a-carte-max) ) ) !important;
}

.cgt-article__grille--1.cgt-pubs--accords {
	grid-template-columns: minmax( 0, var(--cgt-a-carte-max) ) !important;
}

@media only screen and (max-width: 999px) {
	.cgt-article__grille.cgt-pubs--accords,
	.cgt-article__grille--2.cgt-pubs--accords {
		grid-template-columns: repeat( 2, minmax( 0, var(--cgt-a-carte-max) ) ) !important;
	}

	/* Une seule carte : elle garde sa colonne unique et reste centrée. */
	.cgt-article__grille--1.cgt-pubs--accords {
		grid-template-columns: minmax( 0, var(--cgt-a-carte-max) ) !important;
	}

	/* Trois cartes sur deux colonnes : la dernière est orpheline et se
	   retrouverait calée à gauche. On la centre sur sa ligne. */
	.cgt-article__grille.cgt-pubs--accords .cgt-accord:last-child:nth-child( odd ) {
		grid-column: 1 / -1;
		justify-self: center;
		width: 100%;
		max-width: var(--cgt-a-carte-max);
	}
}

@media only screen and (max-width: 690px) {
	.cgt-article__grille.cgt-pubs--accords,
	.cgt-article__grille--2.cgt-pubs--accords,
	.cgt-article__grille--1.cgt-pubs--accords {
		grid-template-columns: minmax( 0, var(--cgt-a-carte-max) ) !important;
	}
}