/* ==========================================================================
   Composants réutilisables — préfixe « cb- »
   ========================================================================== */

/* --- Boutons -------------------------------------------------------------- */

.cb-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--cb-tap-target);
	padding: var(--cb-space-xs) var(--cb-space-md);
	border: 2px solid transparent;
	border-radius: var(--cb-radius-md);
	font-family: var(--cb-font-heading);
	font-size: var(--cb-font-size-sm);
	font-weight: var(--cb-font-weight-bold);
	letter-spacing: var(--cb-letter-spacing-wide);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--cb-transition), color var(--cb-transition), border-color var(--cb-transition);
}

.cb-button--primary {
	background-color: var(--cb-color-accent);
	border-color: var(--cb-color-accent);
	color: var(--cb-color-text-invert);
}

.cb-button--primary:hover,
.cb-button--primary:focus-visible {
	background-color: var(--cb-color-text-invert);
	color: var(--cb-color-primary);
	text-decoration: none;
}

.cb-button--secondary {
	background-color: transparent;
	border-color: var(--cb-color-accent);
	color: var(--cb-color-text-invert);
}

.cb-button--secondary:hover,
.cb-button--secondary:focus-visible {
	background-color: var(--cb-color-accent);
	color: var(--cb-color-text-invert);
	text-decoration: none;
}

.cb-button[aria-disabled="true"],
.cb-button:disabled {
	opacity: 0.5;
	pointer-events: none;
}

/* --- Badge ---------------------------------------------------------------- */

.cb-badge {
	display: inline-block;
	padding: 2px var(--cb-space-xs);
	background-color: var(--cb-color-surface-muted);
	border-radius: var(--cb-radius-sm);
	color: var(--cb-color-primary);
	font-size: var(--cb-font-size-xs);
	font-weight: var(--cb-font-weight-bold);
	letter-spacing: var(--cb-letter-spacing-wide);
	line-height: 1.4;
	text-transform: uppercase;
}

/* --- Carte d'article ------------------------------------------------------ */

.cb-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: var(--cb-color-surface);
	border-radius: var(--cb-radius-lg);
	box-shadow: var(--cb-shadow-card);
	overflow: hidden;
	transition: transform var(--cb-transition), box-shadow var(--cb-transition);
}

.cb-card:hover,
.cb-card:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--cb-shadow-card-hover);
}

.cb-card__media {
	position: relative;
	aspect-ratio: 16 / 11; /* Hypothèse : ratio relevé sur les cartes de la maquette. */
}

.cb-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cb-card__badges {
	position: absolute;
	top: var(--cb-space-sm);
	left: var(--cb-space-sm);
	display: flex;
	flex-wrap: wrap;
	gap: var(--cb-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cb-card__body {
	padding: var(--cb-space-md);
}

.cb-card__title {
	margin: 0 0 var(--cb-space-xs);
	font-size: var(--cb-font-size-lg);
}

/* La carte entière est cliquable, mais un seul lien est exposé aux technologies
   d'assistance : le titre porte le libellé, la pseudo-élément couvre la carte. */
.cb-card__link {
	color: inherit;
}

.cb-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.cb-card__link:hover {
	text-decoration: none;
}

.cb-card__meta {
	margin: 0;
	color: var(--cb-color-accent);
	font-size: var(--cb-font-size-sm);
}

.cb-card__pole::before {
	content: " - ";
}

/* --- Grille d'articles ---------------------------------------------------- */

.cb-posts__title {
	margin: 0 0 var(--cb-space-lg);
	color: var(--cb-color-primary);
	font-size: var(--cb-font-size-sm);
	font-weight: var(--cb-font-weight-bold);
	letter-spacing: var(--cb-letter-spacing-wide);
	text-align: center;
	text-transform: uppercase;
}

.cb-posts__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--cb-grid-gap);
	align-items: start;
}

.cb-posts__more {
	display: inline-flex;
	align-items: center;
	min-height: var(--cb-tap-target);
	margin-top: var(--cb-space-md);
	color: var(--cb-color-primary);
	font-size: var(--cb-font-size-sm);
}

/* --- Section à fond teinté ------------------------------------------------ */

.cb-section--muted {
	background-color: var(--cb-color-surface-muted);
}

/* --- Corps rédactionnel de l'article -------------------------------------- */

.cb-prose strong {
	color: var(--cb-color-primary);
	font-weight: var(--cb-font-weight-bold);
}

.cb-prose img {
	border-radius: var(--cb-radius-lg);
}

.cb-prose ul,
.cb-prose ol {
	padding-left: var(--cb-space-md);
}

/* Galerie de 3 images insérée dans le contenu WordPress. */
.cb-prose .wp-block-gallery,
.cb-prose .gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--cb-grid-gap);
	margin: var(--cb-space-lg) 0;
}

/* --- En-tête d'article ---------------------------------------------------- */

.cb-article-meta {
	color: var(--cb-color-accent);
	font-size: var(--cb-font-size-sm);
}

.cb-article-hero img {
	border-radius: var(--cb-radius-lg);
	width: 100%;
}