/**
 * Habillage des actualités — Betton & Dragons
 *
 * Couvre deux gabarits qui ne sont pas construits avec Elementor :
 *  - la page « Actualités », qui n'est plus qu'un appel à [bd_actualites] ;
 *  - la fiche d'article, où OceanWP sort ses valeurs d'usine.
 *
 * Toutes les valeurs viennent de CHARTE-GRAPHIQUE.md — aucune n'est inventée.
 *
 * Deux garde-fous de cascade, pour la raison déjà rencontrée sur la fiche
 * d'événement (voir CLAUDE.md) — vérifier une surcharge, c'est résoudre la
 * cascade, pas constater que la règle est dans le fichier :
 *
 *  1. Les sélecteurs sont préfixés `body.bd-page-actualites` / `body.bd-article`
 *     (classes posées par le plugin), ce qui ajoute une classe et un élément.
 *  2. Tout ce qui touche à un lien ou à la pagination est en plus ancré sur
 *     `#content`. OceanWP habille les liens de contenu avec
 *     `.page:not(.elementor-page):not(.woocommerce-page) .entry a:not(…):not(…)`,
 *     soit (0,6,1) : aucune combinaison raisonnable de classes ne passe devant.
 *     L'identifiant, lui, tranche d'un coup — et `#content` est le conteneur
 *     d'OceanWP, présent sur les deux gabarits.
 *
 * Le fond du site est déjà en crème (#f6f7e9, réglage de thème) : les cartes
 * sont donc en blanc, jamais l'inverse.
 */

body.bd-page-actualites,
body.bd-article {
	--bd-vert: #08403f;
	--bd-terracotta: #c0623e;
	--bd-noir: #282828;
	--bd-creme: #f6f7e9;
	--bd-filet: #ededed;
}

/* ---------------------------------------------------------------------------
 * 1. En-tête de page — Oswald en majuscules espacées, la signature du site
 *
 * Le réglage de thème pose un fond noir pur sur .page-header. La charte (§1)
 * réserve le noir pur aux overlays d'image : on repasse en vert profond, et le
 * titre reste en blanc — sur fond vert, les titres sont blancs.
 * ------------------------------------------------------------------------ */

body.bd-page-actualites .page-header,
body.bd-article .page-header {
	background-color: var(--bd-vert);
}

body.bd-page-actualites .page-header .page-header-title,
body.bd-article .page-header .page-header-title {
	font-family: "Oswald", sans-serif;
	font-size: 40px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: #fff;
}

/* Le fil d'Ariane est une aide à la navigation, pas un titre : il reste en
   mention secondaire (charte, §2). Sur fond vert, en blanc atténué. */
body.bd-page-actualites .page-header .site-breadcrumbs,
body.bd-article .page-header .site-breadcrumbs {
	font-family: "Roboto", sans-serif;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.75);
}

body.bd-page-actualites .page-header .site-breadcrumbs a,
body.bd-article .page-header .site-breadcrumbs a {
	color: #fff;
}

body.bd-page-actualites .page-header .site-breadcrumbs a:hover,
body.bd-article .page-header .site-breadcrumbs a:hover {
	color: var(--bd-terracotta);
}

/* ---------------------------------------------------------------------------
 * 2. Listing — grille de cartes
 * ------------------------------------------------------------------------ */

/* Chapô de la page, avant la grille. Colonne de lecture limitée à ~860 px
   (charte, §5) alors que la grille, elle, occupe tout le conteneur. */
body.bd-page-actualites .bd-actus__intro {
	max-width: 860px;
	margin: 0 0 40px;
	font-family: "Roboto", sans-serif;
	font-size: 16px;
	line-height: 1.7;
	color: var(--bd-noir);
}

.bd-actus {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
	margin: 0 0 48px;
	font-family: "Roboto", sans-serif;
	color: var(--bd-noir);
}

.bd-actus__carte {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background-color: #fff;
	border: 1px solid var(--bd-filet);
	/* 15 px : le rayon des cartes de contenu (charte, §4). */
	border-radius: 15px;
	/* La home ne pose pas d'ombre marquée : la hiérarchie passe par les aplats.
	   On se limite au détachement minimal admis par la charte (§4). */
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07);
}

/* La plus récente prend toute la largeur, image à gauche. Sur la deuxième page
   et au-delà, plus de mise en avant : le shortcode ne pose la classe qu'en
   page 1, l'ordre chronologique n'y désigne plus « l'actualité du moment ». */
.bd-actus__carte--une {
	grid-column: 1 / -1;
	flex-direction: row;
	align-items: stretch;
}

.bd-actus__media {
	display: block;
	overflow: hidden;
	line-height: 0;
	background-color: var(--bd-creme);
}

.bd-actus__media img {
	display: block;
	width: 100%;
	height: 100%;
	/* Les affiches sont en portrait : un cadrage centré leur coupe le titre.
	   On accroche le haut de l'image, qui porte l'information. */
	object-fit: cover;
	object-position: center top;
	aspect-ratio: 4 / 3;
	transition: transform 0.3s ease;
}

.bd-actus__carte:hover .bd-actus__media img {
	transform: scale(1.04);
}

/* Image par défaut (le blason, 140 x 140) : jamais étirée. `object-fit: none`
   la rend à sa taille naturelle, centrée sur l'aplat crème du conteneur —
   un `cover` la remonterait à 350 px de large et la rendrait floue. Elle ne
   bouge pas au survol non plus : un logo qui zoome n'a pas de sens. */
.bd-actus__media img.bd-vignette-defaut,
body.bd-article #related-posts .related-post img.bd-vignette-defaut {
	object-fit: none;
	object-position: center;
	background-color: var(--bd-creme);
}

.bd-actus__carte:hover .bd-actus__media img.bd-vignette-defaut {
	transform: none;
}

.bd-actus__media--vide {
	display: block;
	aspect-ratio: 4 / 3;
	background-color: var(--bd-creme);
}

.bd-actus__carte--une .bd-actus__media {
	flex: 0 0 45%;
}

.bd-actus__carte--une .bd-actus__media img,
.bd-actus__carte--une .bd-actus__media--vide {
	aspect-ratio: auto;
	min-height: 100%;
}

.bd-actus__corps {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 24px 28px 28px;
}

/* Sur-titre / label : Roboto 700, 13 px, majuscules espacées, terracotta. */
.bd-actus__date {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--bd-terracotta);
}

.bd-actus__titre {
	margin: 0 0 14px;
	font-family: "Oswald", sans-serif;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.bd-actus__carte--une .bd-actus__titre {
	font-size: 28px;
}

.bd-actus__chapo {
	margin: 0 0 22px;
	font-size: 16px;
	line-height: 1.7;
	color: var(--bd-noir);
}

.bd-actus__vide {
	margin: 40px 0;
	font-family: "Roboto", sans-serif;
	font-size: 16px;
	color: var(--bd-noir);
}

/* Les liens des cartes : ancrés sur #content pour passer devant le
   soulignement d'OceanWP (voir l'en-tête de fichier). */
#content .bd-actus__titre a {
	color: var(--bd-vert);
	text-decoration: none;
}

#content .bd-actus__titre a:hover {
	color: var(--bd-terracotta);
}

/* Le bouton de la home, reproduit à l'identique (charte, §3) : le survol
   *inverse* le bouton, il ne l'assombrit pas. `margin-top: auto` aligne les
   boutons d'une même rangée quelle que soit la longueur des chapôs. */
#content .bd-actus__lien {
	align-self: flex-start;
	margin-top: auto;
	padding: 12px 40px;
	font-family: "Roboto", sans-serif;
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-decoration: none;
	color: #fff;
	background-color: var(--bd-terracotta);
	border-radius: 15px;
	transition: background-color 0.2s ease, color 0.2s ease;
}

#content .bd-actus__lien:hover,
#content .bd-actus__lien:focus {
	color: var(--bd-vert);
	background-color: #fff;
	text-decoration: none;
	box-shadow: inset 0 0 0 1px var(--bd-terracotta);
}

/* ---------------------------------------------------------------------------
 * 3. Pagination
 *
 * OceanWP habille .page-numbers en gris d'usine (#777 sur #f8f8f8) depuis le
 * réglage de thème, en (0,2,1) : là encore, l'ancrage sur #content tranche.
 * ------------------------------------------------------------------------ */

#content .bd-actus__pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	width: auto;
	margin: 0 0 48px;
	padding: 0;
	list-style: none;
	text-align: center;
}

#content .bd-actus__pagination li {
	display: block;
	margin: 0;
}

#content .bd-actus__pagination .page-numbers {
	display: block;
	min-width: 42px;
	margin: 0;
	padding: 9px 14px;
	font-family: "Roboto", sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	color: var(--bd-vert);
	background-color: #fff;
	border: 1px solid var(--bd-filet);
	border-radius: 15px;
}

#content .bd-actus__pagination .page-numbers:hover,
#content .bd-actus__pagination .page-numbers.current {
	color: #fff;
	background-color: var(--bd-terracotta);
	border-color: var(--bd-terracotta);
}

/* ---------------------------------------------------------------------------
 * 4. Fiche d'article
 *
 * La colonne de lecture est déjà cadrée par OceanWP : la classe
 * `content-max-width`, posée sur le <body> dès que la page est en pleine
 * largeur, limite les blocs de texte à 700 px et les centre. On ne la
 * contrarie pas — on se contente de recadrer l'image à la une, qu'OceanWP
 * laisse filer à 1100 px.
 * ------------------------------------------------------------------------ */

body.bd-article #content .thumbnail {
	max-width: 860px;
	border-radius: 15px;
	overflow: hidden;
}

body.bd-article #content .single-post-title {
	font-family: "Oswald", sans-serif;
	font-size: 40px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: var(--bd-vert);
}

body.bd-article #content ul.meta {
	font-family: "Roboto", sans-serif;
	font-size: 14px;
	color: rgba(40, 40, 40, 0.7);
}

body.bd-article #content ul.meta a {
	color: var(--bd-terracotta);
}

body.bd-article #content .entry-content {
	font-family: "Roboto", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.7;
	color: var(--bd-noir);
}

body.bd-article #content .entry-content h2 {
	margin-top: 2em;
	font-family: "Oswald", sans-serif;
	font-size: 24px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--bd-vert);
}

body.bd-article #content .entry-content h3 {
	font-family: "Oswald", sans-serif;
	font-size: 20px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--bd-terracotta);
}

body.bd-article #content .entry-content a {
	color: var(--bd-terracotta);
}

body.bd-article #content .entry-content a:hover {
	color: var(--bd-vert);
}

body.bd-article #content .entry-content li {
	margin-bottom: 8px;
}

body.bd-article #content .entry-content img {
	border-radius: 15px;
}

body.bd-article #content .entry-content blockquote {
	padding: 18px 24px;
	background-color: var(--bd-creme);
	border-left: 3px solid var(--bd-terracotta);
	border-radius: 2px;
}

/* ---------------------------------------------------------------------------
 * 4 bis. « Vous devriez également aimer »
 *
 * Encart d'articles liés d'OceanWP, laissé jusqu'ici en valeurs d'usine :
 * titre de section noir en 14 px, colonnes flottantes centrées, pas de
 * vignette (le gabarit du thème ne la sort que derrière `has_post_thumbnail()`
 * — le plugin répond désormais à sa place, voir bd_actualites_thumbnail_defaut()).
 *
 * On reprend les cartes du listing à l'identique : même fond blanc, même
 * rayon, même filet, même hiérarchie. Les articles n'ont pas de conteneur
 * interne : les marges latérales sont portées par le titre et la date.
 * ------------------------------------------------------------------------ */

body.bd-article #related-posts {
	margin-top: 56px;
	padding-top: 40px;
	border-top: 1px solid var(--bd-filet);
}

body.bd-article #related-posts .related-posts-title {
	margin: 0 0 28px;
	font-family: "Oswald", sans-serif;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--bd-vert);
}

/* La grille remplace les colonnes flottantes : elles alignaient mal des cartes
   de hauteurs différentes (le `clear` d'OceanWP ne rattrape que les rangées). */
body.bd-article #related-posts .oceanwp-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	margin: 0;
}

body.bd-article #related-posts .oceanwp-row .col.related-post {
	display: flex;
	flex-direction: column;
	float: none;
	width: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	text-align: left;
	background-color: #fff;
	border: 1px solid var(--bd-filet);
	border-radius: 15px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07);
}

body.bd-article #related-posts .related-post-media {
	margin: 0;
	line-height: 0;
	background-color: var(--bd-creme);
}

body.bd-article #related-posts .related-post .related-thumb {
	display: block;
}

body.bd-article #related-posts .related-post img {
	display: block;
	width: 100%;
	height: 100%;
	/* Même cadrage que les cartes du listing : les affiches sont en portrait,
	   on accroche le haut, qui porte le titre. */
	object-fit: cover;
	object-position: center top;
	aspect-ratio: 4 / 3;
}

body.bd-article #related-posts .related-post-title {
	margin: 22px 24px 10px;
	font-family: "Oswald", sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: 1px;
}

/* Ancré sur #content, comme les liens du listing : OceanWP défend les liens de
   contenu en (0,6,1) (voir l'en-tête de fichier). */
#content .related-post-title a {
	color: var(--bd-vert);
	text-decoration: none;
}

#content .related-post-title a:hover {
	color: var(--bd-terracotta);
}

/* La date reprend celle de la fiche d'article (ul.meta) : même famille, même
   corps, même gris. C'est la même information, elle se lit pareil.
   `margin-top: auto` la colle en bas de carte, quelle que soit la longueur du
   titre au-dessus. */
body.bd-article #related-posts .related-post time.published {
	display: block;
	margin: auto 24px 22px;
	font-family: "Roboto", sans-serif;
	font-size: 14px;
	line-height: 1.4;
	letter-spacing: 0.6px;
	color: rgba(40, 40, 40, 0.7);
}

body.bd-article #related-posts .related-post time.published i {
	margin-right: 7px;
}

/* ---------------------------------------------------------------------------
 * 4 ter. Archives d'articles — /blog/, catégories, étiquettes
 *
 * Le plugin y sert son propre gabarit (templates/archive-actualites.php) et
 * pose la classe `bd-page-actualites` sur le <body> : tout ce qui précède
 * s'applique donc tel quel, cartes, boutons et pagination compris. Ne restent
 * ici que les deux écarts de contexte.
 * ------------------------------------------------------------------------ */

/* La description du terme, quand elle existe, tient le rôle du chapô. C'est
   un bloc et non un paragraphe (l'éditeur y met du HTML) : on rattrape la
   marge du dernier enfant, que la règle du paragraphe portait elle-même. */
body.bd-archive-actualites .bd-actus__intro > :last-child {
	margin-bottom: 0;
}

/* Sur une page, la grille hérite du rembourrage de l'article ; sur l'archive,
   il n'y a pas d'article autour d'elle. On lui rend l'air du haut. */
body.bd-archive-actualites #content > .bd-actus,
body.bd-archive-actualites #content > .bd-actus__intro {
	margin-top: 8px;
}

/* ---------------------------------------------------------------------------
 * 5. Adaptatif
 * ------------------------------------------------------------------------ */

@media only screen and (max-width: 959px) {
	.bd-actus {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}

	body.bd-article #related-posts .oceanwp-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}
}

@media only screen and (max-width: 767px) {
	.bd-actus {
		grid-template-columns: minmax(0, 1fr);
	}

	body.bd-article #related-posts .oceanwp-row {
		grid-template-columns: minmax(0, 1fr);
	}

	/* La mise en avant repasse en colonne : à cette largeur, une image de 45 %
	   ne montre plus rien de l'affiche. */
	.bd-actus__carte--une {
		flex-direction: column;
	}

	.bd-actus__carte--une .bd-actus__media {
		flex: 0 0 auto;
	}

	.bd-actus__carte--une .bd-actus__media img,
	.bd-actus__carte--une .bd-actus__media--vide {
		aspect-ratio: 4 / 3;
		min-height: 0;
	}

	.bd-actus__carte--une .bd-actus__titre {
		font-size: 22px;
	}

	body.bd-page-actualites .page-header .page-header-title,
	body.bd-article .page-header .page-header-title,
	body.bd-article #content .single-post-title {
		font-size: 28px;
	}
}