/**
 * CBS Theme — Blocs ACF génériques (refonte ACF Blocks).
 * Styles partagés par blocks/ *. Le HTML de chaque render.php réutilise en
 * priorité les composants existants (offre-detail, cards, hero…) ; ce fichier
 * ne porte que les primitives réellement génériques et non déjà couvertes.
 */

/* ——— Page 404 (404.php) ———
   Le header est en position fixed sur 5rem : sans décalage haut explicite, le
   titre passait dessous. Sert aussi de repli visuel aux liens légaux tant que
   leurs pages n'existent pas. */
.page-404 {
	padding-top: calc(5rem + var(--cbs-section-py));
	background-color: var(--cbs-silver-50);
}

/* Sélecteur à 2 classes : layout/grid.css est importé APRÈS components/blocks.css
   dans main.css, donc un simple .page-404__inner se ferait écraser par la
   max-width de .cbs-container, à spécificité égale. */
.page-404 .page-404__inner {
	max-width: 40rem;
	text-align: center;
}

.page-404__kicker {
	font-family: var(--cbs-font-sans);
	font-size: var(--cbs-text-xs);
	font-weight: 600;
	letter-spacing: var(--cbs-tracking-wider);
	text-transform: uppercase;
	color: var(--cbs-gold-dark);
	margin: 0 0 var(--cbs-space-3);
	/* explicite : les <p> du thème sont en text-align: justify, qui l'emporte
	   sur le center hérité du conteneur */
	text-align: center;
}

.page-404__title {
	font-family: var(--cbs-font-serif);
	font-size: var(--cbs-text-h2);
	font-weight: 400;
	line-height: var(--cbs-leading-snug);
	color: var(--cbs-silver-800);
	margin: 0 0 var(--cbs-space-4);
}

.page-404__text {
	font-family: var(--cbs-font-sans);
	font-size: var(--cbs-text-body);
	line-height: var(--cbs-leading-relaxed);
	color: var(--cbs-silver-700);
	margin: 0 auto var(--cbs-space-8);
	text-align: center;
}

.page-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cbs-space-4);
	justify-content: center;
}

/* Résultats de recherche (search.php réutilise le gabarit de la page 404) */
.page-search__list {
	list-style: none;
	margin: 0 0 var(--cbs-space-10);
	padding: 0;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: var(--cbs-space-6);
}

.page-search__link {
	font-family: var(--cbs-font-serif);
	font-size: var(--cbs-text-h3);
	color: var(--cbs-silver-800);
	text-decoration: none;
}

.page-search__link:hover,
.page-search__link:focus-visible {
	color: var(--cbs-gold-dark);
}

.page-search__excerpt {
	font-family: var(--cbs-font-sans);
	font-size: var(--cbs-text-small);
	line-height: var(--cbs-leading-relaxed);
	color: var(--cbs-silver-700);
	margin: var(--cbs-space-2) 0 0;
	text-align: left;
}

/* Surtitre / kicker générique de section (repris du motif kicker existant) */
.cbs-block__kicker {
	font-family: var(--cbs-font-sans);
	font-size: var(--cbs-text-small);
	font-weight: 600;
	letter-spacing: var(--cbs-tracking-wide);
	text-transform: uppercase;
	color: var(--cbs-gold);
	margin: 0 0 var(--cbs-space-4);
}

/* Corps de texte riche (wysiwyg) générique */
.cbs-prose {
	font-family: var(--cbs-font-sans);
	font-size: var(--cbs-text-body);
	line-height: var(--cbs-leading-relaxed);
	color: var(--cbs-silver-700);
}

.cbs-prose > :first-child {
	margin-top: 0;
}

.cbs-prose > :last-child {
	margin-bottom: 0;
}

.cbs-prose p {
	margin: 0 0 var(--cbs-space-4);
}

/* ------------------------------------------------------------------ */
/* Bloc « Split media » — image + texte cote a cote, inversible        */
/* ------------------------------------------------------------------ */
.cbs-split__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--cbs-space-8);
	align-items: center;
}

@media (min-width: 768px) {
	.cbs-split__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--cbs-space-12);
	}

	/* Sens inverse : media a droite (l'ordre DOM garde media en premier) */
	.cbs-split--right .cbs-split__media {
		order: 2;
	}
}

.cbs-split__media {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--cbs-radius-md);
	background-color: var(--cbs-silver-100);
}

.cbs-split__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.cbs-split__body > :first-child {
	margin-top: 0;
}

/* ------------------------------------------------------------------ */
/* Bloc « Cartes » — grille de cartes generique                        */
/* ------------------------------------------------------------------ */
.cbs-cards__title {
	font-family: var(--cbs-font-serif);
	font-size: var(--cbs-text-h2);
	font-weight: 400;
	color: var(--cbs-silver-800);
	margin: 0 0 var(--cbs-space-8);
}

.cbs-cards__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--cbs-space-6);
}

@media (min-width: 640px) {
	.cbs-cards__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 960px) {
	.cbs-cards__grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.cbs-cards__grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.cbs-card {
	display: flex;
	flex-direction: column;
	background-color: var(--cbs-white);
	border: 1px solid var(--cbs-silver-200);
	border-radius: var(--cbs-radius-md);
	overflow: hidden;
}

.cbs-card__media {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background-color: var(--cbs-silver-100);
}

.cbs-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.cbs-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--cbs-space-3);
	padding: var(--cbs-space-6);
}

.cbs-card__badge {
	align-self: flex-start;
	font-family: var(--cbs-font-sans);
	font-size: var(--cbs-text-xs);
	font-weight: 600;
	letter-spacing: var(--cbs-tracking-wide);
	text-transform: uppercase;
	/* Les cartes sont blanches : --cbs-gold n'y donnait que 2,35:1 pour un texte
	   de 12 px en capitales. --cbs-gold-dark monte à 5,25:1. */
	color: var(--cbs-gold-dark);
}

/* Garde-fou : sur une carte en section sombre, on reprend le doré clair. */
.cbs-section--fond-sombre .cbs-card__badge {
	color: var(--cbs-gold);
}

.cbs-card__title {
	font-family: var(--cbs-font-serif);
	font-size: var(--cbs-text-h3);
	font-weight: 400;
	color: var(--cbs-silver-900);
	margin: 0;
}

.cbs-card__text {
	font-family: var(--cbs-font-sans);
	font-size: var(--cbs-text-body);
	line-height: var(--cbs-leading-relaxed);
	color: var(--cbs-silver-700);
	margin: 0;
}

.cbs-card__cta {
	margin-top: auto;
	padding-top: var(--cbs-space-2);
}

/* ------------------------------------------------------------------ */
/* Bloc « Liste » — titre + intro + liste                              */
/* ------------------------------------------------------------------ */
.cbs-liste__intro {
	font-family: var(--cbs-font-sans);
	font-size: var(--cbs-text-lead);
	line-height: var(--cbs-leading-relaxed);
	color: var(--cbs-silver-700);
	margin: 0 0 var(--cbs-space-6);
}

/* ------------------------------------------------------------------ */
/* Bloc « Citation » — pull-quote centre                               */
/* ------------------------------------------------------------------ */
.cbs-citation__inner {
	max-width: 48rem;
	margin-inline: auto;
	text-align: center;
}

.cbs-citation__quote {
	font-family: var(--cbs-font-serif);
	font-size: var(--cbs-text-h3);
	font-weight: 400;
	line-height: var(--cbs-leading-snug);
	color: var(--cbs-silver-900);
	margin: 0;
}

.cbs-citation__quote::before {
	content: "\201C";
	color: var(--cbs-gold);
}

.cbs-citation__quote::after {
	content: "\201D";
	color: var(--cbs-gold);
}

.cbs-citation__cite {
	display: block;
	margin-top: var(--cbs-space-5);
	font-family: var(--cbs-font-sans);
	font-size: var(--cbs-text-small);
	font-weight: 600;
	letter-spacing: var(--cbs-tracking-wide);
	text-transform: uppercase;
	color: var(--cbs-gold);
	font-style: normal;
}

/* ------------------------------------------------------------------ */
/* Fond de section (réglage éditeur) — blanc (défaut) / clair / sombre  */
/* Charte : silver-50 (clair), silver-900 (sombre). 3 valeurs sûres.    */
/* ------------------------------------------------------------------ */
.cbs-section--fond-clair {
	background-color: var(--cbs-silver-50);
}

.cbs-section--fond-sombre {
	background-color: var(--cbs-silver-900);
	color: var(--cbs-silver-300);
}

/* Mode sombre : titres et libellés en blanc */
.cbs-section--fond-sombre .offre-detail__h2,
.cbs-section--fond-sombre .cbs-cards__title,
.cbs-section--fond-sombre .cbs-card__title,
.cbs-section--fond-sombre .cbs-citation__quote {
	color: var(--cbs-white);
}

/* Mode sombre : corps de texte en gris clair lisible */
.cbs-section--fond-sombre .cbs-prose,
.cbs-section--fond-sombre .cbs-card__text,
.cbs-section--fond-sombre .cbs-liste__intro,
.cbs-section--fond-sombre .offre-detail__list,
.cbs-section--fond-sombre .social-proof__stat-label {
	color: var(--cbs-silver-300);
}

/* Mode sombre : cartes sur surface plus foncée, bordure discrète dorée */
.cbs-section--fond-sombre .cbs-card {
	background-color: var(--cbs-silver-850);
	border-color: color-mix(in srgb, var(--cbs-gold-warm) 15%, transparent);
}