/*
 * Theme Name:  Comms & Marketing Africa
 * Theme URI:   https://commsmarketingafrica.com/
 * Description: Habillage de Comms & Marketing Africa : police de marque, ajustements de cartes et composants éditoriaux.
 * Author:      Comms & Marketing Africa
 * Author URI:  https://commsmarketingafrica.com/
 * Template:    caards
 * Version:     5.2.0
 * Text Domain: caards
 */

/* =========================================================================
   PRINCIPE
   Le thème possède déjà son propre système de cartes : il peint
   .cs-entry__outer avec --cs-color-layout-elements-background, gère le rayon
   via --cs-image-border-radius, la hauteur via --cs-card-min-height et la
   colonne flex. Tout cela suit automatiquement le thème clair/sombre
   (attribut data-site-scheme). On n'y touche pas : ce fichier ne contient
   que la police de marque et des correctifs ciblés.
   ========================================================================= */

/* =========================================================================
   1. POLICE
   ========================================================================= */

@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url('assets/fonts/outfit-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url('assets/fonts/outfit-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
		U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
		U+2C60-2C7F, U+A720-A7FF;
}

/* =========================================================================
   2. JETONS DE MARQUE
   Uniquement l'orange et le bleu du logo : le reste vient du thème.
   ========================================================================= */

:root {
	--cma-orange:       #EF7F1F;
	--cma-orange-fonce: #CC6710;
	/* Orange lisible en petit corps sur fond clair : l'orange vif n'y
	   atteint que 2,5:1, très en dessous du minimum de 4,5:1. */
	--cma-orange-texte: #A85200;
	--cma-bleu:         #1B3A8F;
	--cma-police: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.cma-esperluette { color: var(--cma-orange); }

/* =========================================================================
   3. CARTES — HAUTEURS ÉGALES
   Le thème égalise déjà via --cs-card-min-height. Le seul écart vient des
   titres : en français ils montent à six ou sept lignes et imposent leur
   hauteur à toute la rangée. On les plafonne, sans rien changer d'autre.
   ========================================================================= */

.cnvs-block-posts .cs-entry__title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	/* Hauteur réservée pour trois lignes : un titre court n'écourte plus sa
	   carte, donc toutes les rangées d'une section ont la même hauteur. */
	line-height: 1.3;
	min-height: calc(3 * 1.3em);
}

.cnvs-block-posts .cs-entry__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.6;
	min-height: calc(2 * 1.6em);
}

/* Le visuel ne doit jamais varier d'une carte à l'autre : hauteur fixe et
   recadrage, quel que soit le format du fichier d'origine. */
.cnvs-block-posts .cs-entry__thumbnail .cs-overlay-background,
.cnvs-block-posts .cs-entry__thumbnail img,
.cnvs-block-posts .cs-entry__thumbnail picture,
.cnvs-block-posts .cs-entry__thumbnail picture img {
	width: 100%;
	object-fit: cover;
}

/* Arrondi en haut seulement quand l'image coiffe la carte : arrondir aussi
   le bas détacherait le visuel du texte qui le suit. */
.cnvs-block-posts-layout-standard-type-1 .cs-entry__thumbnail img,
.cnvs-block-posts-layout-standard-type-2 .cs-entry__thumbnail img,
.cnvs-block-posts-layout-standard-type-1 .cs-entry__thumbnail picture,
.cnvs-block-posts-layout-standard-type-2 .cs-entry__thumbnail picture {
	border-radius: var(--cs-image-border-radius) var(--cs-image-border-radius) 0 0;
	overflow: hidden;
}

/* Le pied de carte collait au visuel sur les cartes où l'image est dessous. */
.cnvs-block-posts-layout-standard-type-3 .cs-entry__footer {
	margin-top: 1.25rem;
}

/* =========================================================================
   4. PORTRAITS
   Des visages : format vertical et titre seul. L'extrait n'apporte rien et
   déséquilibre la carte.
   ========================================================================= */

.cma-portraits .cs-entry__excerpt,
.cma-portraits .cs-entry__footer {
	display: none;
}

.cma-portraits .cs-entry__title {
	-webkit-line-clamp: 3;
}

/* Le rapport est imposé ici plutôt que par la classe de ratio du thème :
   sans extrait ni pied de carte, le visuel absorbait toute la hauteur. */
.cma-portraits .cs-entry__thumbnail {
	aspect-ratio: 1 / 1;
	height: auto;
	padding-bottom: 0;
	flex: 0 0 auto;
}

.cma-portraits .cs-entry__thumbnail .cs-overlay-background,
.cma-portraits .cs-entry__thumbnail img,
.cma-portraits .cs-entry__thumbnail picture {
	position: absolute;
	inset: 0;
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.cma-portraits .cs-entry__thumbnail picture img {
	position: static;
	height: 100%;
	width: 100%;
	object-fit: cover;
}

/* =========================================================================
   5. SECTION MAGAZINE
   Une grille de couvertures, sur le modèle d'un rayon de librairie : le
   visuel domine et porte la reconnaissance, le texte se réduit au strict
   nécessaire sous l'image, l'action se cale en bas.
   ========================================================================= */

.cma-mag-grille {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
}

/* Les couvertures restent lisibles en petit : on garde 4 colonnes aussi sur
   portable, contrairement aux grilles d'articles qui passent à 3. */
@media (max-width: 1279px) { .cma-mag-grille { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px)  { .cma-mag-grille { grid-template-columns: 1fr; } }

.cma-mag {
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: var(--cs-color-layout-elements-background);
	border-radius: var(--cs-image-border-radius);
	overflow: hidden;
}

/* La couverture occupe toute la largeur, sans marge : c'est elle qu'on voit
   en premier dans une grille. */
.cma-mag__visuel {
	display: block;
	position: relative;
	aspect-ratio: 4 / 5;
	background-color: var(--cs-color-site-background);
	overflow: hidden;
}

.cma-mag__couv,
.cma-mag__couv img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.cma-mag__visuel:hover .cma-mag__couv { transform: scale(1.03); }

.cma-mag__corps {
	flex: 1 1 auto;
	padding: 1.125rem 1.125rem 0.75rem;
}

.cma-mag__titre {
	font-family: var(--cma-police);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.35;
	margin: 0;
	color: var(--cs-color-primary);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	/* Trois lignes réservées : les prix et les boutons restent alignés d'une
	   carte à l'autre, quelle que soit la longueur du titre. */
	min-height: calc(3 * 1.35em);
}

.cma-mag__prix {
	display: block;
	margin-top: 0.625rem;
	font-family: var(--cma-police);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cs-color-secondary);
}

.cma-mag__cta {
	display: block;
	margin: 0 1.125rem 1.125rem;
	padding: 0.6875rem 1rem;
	border-radius: 999px;
	background-color: var(--cma-orange);
	/* Blanc sur cet orange ne donne que 2,7:1. L'encre passe à 6:1. */
	color: #14192B;
	font-family: var(--cma-police);
	font-size: 0.8125rem;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.cma-mag__cta:hover,
.cma-mag__cta:focus { background-color: #FFA45C; color: #14192B; }

.cma-mag-vide {
	padding: 1.5rem;
	border: 1px dashed var(--cs-color-contrast-200);
	border-radius: var(--cs-image-border-radius);
	color: var(--cs-color-secondary);
}

/* =========================================================================
   6. ARCHIVES
   Les titres y sont dimensionnés pour une pleine largeur : en grille ils
   écrasent tout. On les ramène à l'échelle d'une carte et on égalise.
   ========================================================================= */

.cs-posts-area__archive .cs-entry__title {
	font-size: 1.25rem;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(3 * 1.3em);
}

.cs-posts-area__archive .cs-entry__excerpt {
	display: -webkit-box;
	line-height: 1.6;
	min-height: calc(3 * 1.6em);
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* En grille, les cartes d'archive doivent s'aligner comme sur l'accueil. */
.cs-posts-area__archive.cs-posts-area__grid article {
	height: 100%;
}

.cs-posts-area__archive.cs-posts-area__grid .cs-entry__outer {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.cs-posts-area__archive.cs-posts-area__grid .cs-entry__footer {
	margin-top: auto;
}

/* =========================================================================
   7. ENCARTS PUBLICITAIRES
   ========================================================================= */

.cma-encart {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 120px;
	padding: 1.5rem;
	border: 1px dashed var(--cs-color-contrast-200);
	border-radius: var(--cs-image-border-radius);
	background-color: var(--cs-color-layout-elements-background);
	text-align: center;
}

.cma-encart__format {
	font-family: var(--cma-police);
	font-size: 0.8125rem;
	color: var(--cs-color-secondary);
}

.cma-encart {
	margin: 2.5rem 0;
}

.cma-encart__mention {
	font-family: var(--cma-police);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--cs-color-secondary);
}

/* =========================================================================
   8. CARTES EN SURIMPRESSION
   Aplat noir uniforme du thème remplacé par un dégradé lesté vers le bas :
   la photo reste lisible en haut, le titre garde son contraste en bas.
   ========================================================================= */

.cs-entry__overlay .cs-overlay-background::after {
	opacity: 1;
	background: linear-gradient(
		to top,
		rgba(18, 39, 95, 0.94) 0%,
		rgba(18, 39, 95, 0.78) 26%,
		rgba(18, 39, 95, 0.38) 55%,
		rgba(18, 39, 95, 0.12) 80%,
		rgba(18, 39, 95, 0.02) 100%
	);
}

.cs-entry__overlay .cs-entry__title a {
	text-shadow: 0 1px 14px rgba(18, 39, 95, 0.55);
}

.cs-entry__overlay .cs-entry__category,
.cs-entry__overlay .cs-meta-category a {
	color: #FFB067;
}

/* =========================================================================
   9. CORPS D'ARTICLE
   Le thème réutilise .cs-entry__content sur les cartes, et la page d'accueil
   vit elle-même dans .entry-content : ces règles visent les enfants directs.
   ========================================================================= */

.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > blockquote {
	max-width: 68ch;
	line-height: 1.75;
}

.entry-content > p a:not(.wp-block-button__link),
.entry-content > ul a:not(.wp-block-button__link),
.entry-content > ol a:not(.wp-block-button__link),
.entry-content > blockquote a:not(.wp-block-button__link) {
	text-decoration: underline;
	text-decoration-color: var(--cma-orange);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.entry-content > blockquote {
	border-left: 3px solid var(--cma-orange);
	padding-left: 1.5rem;
	font-style: normal;
}

/* =========================================================================
   10. PIED DE PAGE
   Le thème ne peint le fond que pour la disposition « three ».
   ========================================================================= */

.cs-footer.cs-footer-one,
.cs-footer.cs-footer-two,
.cs-footer.cs-footer-four {
	background-color: var(--cs-color-footer-background);
}

.cs-footer .cs-footer__top {
	padding-top: 4rem;
	padding-bottom: 3rem;
}

/* Un seul filet de séparation suffit : le thème en dessine un second au-dessus
   de la ligne de copyright. */
.cs-footer .cs-footer__bottom {
	border-top: 0;
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}

/* Même hauteur qu'en en-tête : le logotype doit avoir le même poids visuel
   en haut et en bas de page. Le SVG s'y adapte sans perte. */
.cs-footer__logo img,
.cs-footer__logo svg {
	width: auto;
	height: 34px;
	max-width: 100%;
}

/* Un SVG sans dimensions explicites peut s'effondrer dans un conteneur
   flex : on lui garantit une hauteur. */
.cs-header__logo img[src$=".svg"],
.cs-footer__logo img[src$=".svg"] {
	height: 34px;
	width: auto;
}

/* =========================================================================
   11. ACCESSIBILITÉ
   ========================================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--cma-orange);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* =========================================================================
   12. PANNEAU « NOUVEAU »
   Le thème rend quatre colonnes en dur. La quatrième est vide : on la retire
   pour que les trois restantes occupent la largeur.
   ========================================================================= */

/* Le thème rend quatre colonnes en dur et la quatrième reste vide. « :empty »
   ne la vise pas : le gabarit y laisse des espaces et des retours à la ligne.
   On la masque donc par sa position, et les trois autres se répartissent la
   largeur à parts égales. */
.cs-header__featured-column-row > .cs-header__featured-column-col:nth-child(4) {
	display: none;
}

.cs-header__featured-column-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.5rem;
	align-items: start;
}

@media (max-width: 1279px) {
	.cs-header__featured-column-row { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}

/* Le bloc des rubriques portait un aplat gris qui le détachait des deux
   autres colonnes : on l'aligne sur le fond du panneau. */
.cs-header__featured-column-container .cnvs-block-featured-categories,
.cs-header__featured-column-container .wp-block-group.is-style-default {
	background-color: transparent;
}

/* =========================================================================
   13. WIDGET « LES RUBRIQUES »
   Le gabarit « vertical-list » de Powerkit est pensé pour des vignettes
   photo plein cadre : nom en blanc posé sur l'image, compteur en pastille
   noire, et le bloc Canvas qui déborde du widget pour aller bord à bord.
   Aucune rubrique n'ayant d'image, le nom se retrouvait blanc sur blanc.
   On repasse le composant en liste de navigation — en réglant ses propres
   variables plutôt qu'en luttant contre ses règles, ce qui préserve son
   animation de survol (le nombre glisse, une flèche le remplace).
   ========================================================================= */

/* Powerkit déclare ses variables sur « .pk-featured-categories » — même
   spécificité que la nôtre, mais sa feuille se charge après. On double la
   classe pour passer devant proprement, sans !important. */
.pk-featured-categories.pk-featured-categories-vertical-list {
	--pk-featured-link-color: var(--cs-color-primary);
	/* C'est cette variable-ci qui colore le texte des lignes : laissée à
	   #FFFFFF, le nom restait blanc sur blanc quelle que soit la couleur
	   de lien. */
	--pk-featured-content-color: var(--cs-color-primary);
	--pk-featured-name-font-weight: 600;
	--pk-featured-list-count-background: var(--cs-color-contrast-200);
	--pk-featured-list-count-size: 1.5rem;
	--pk-featured-list-count-font-size: 0.75rem;
	--pk-featured-list-number-font-weight: 600;
}

/* Powerkit et Canvas appliquent ces trois propriétés depuis des règles
   imbriquées, hors de portée d'une simple montée en spécificité. Elles
   partent d'un gabarit à vignettes photo qui ne correspond pas à l'usage
   qu'on en fait ici. */
.pk-featured-categories.pk-featured-categories-vertical-list .pk-featured-content,
.pk-featured-categories.pk-featured-categories-vertical-list .pk-featured-inner,
.pk-featured-categories.pk-featured-categories-vertical-list .pk-featured-name {
	color: var(--cs-color-primary) !important;
}

.pk-featured-categories.pk-featured-categories-vertical-list .pk-featured-count {
	background: var(--cs-color-contrast-200) !important;
	color: var(--cs-color-secondary) !important;
}

.widget .cnvs-block-featured-categories,
.cs-widget-area .cnvs-block-featured-categories {
	/* Canvas élargit le bloc de 2 × 24 px et le décale d'autant pour un rendu
	   bord à bord. Il faut annuler les deux : sans la largeur, la liste
	   continuait de dépasser à droite. */
	margin: 0 !important;
	width: auto !important;
	max-width: 100% !important;
}

/* Canvas sort le bloc du cadre avec une marge négative : en liste, le
   compteur venait mordre le bord du widget et le filet du titre ne
   s'alignait plus sur les lignes. */
/* Plus d'aplat ni de coins arrondis : ce sont des lignes, pas des tuiles. */
.pk-featured-categories.pk-featured-categories-vertical-list .pk-featured-item {
	margin-top: 0;
	background: none;
	border-radius: 0;
	border-bottom: 1px solid var(--cs-color-contrast-100);
}

.pk-featured-categories.pk-featured-categories-vertical-list .pk-featured-item:last-child {
	border-bottom: 0;
}

.pk-featured-categories.pk-featured-categories-vertical-list .pk-featured-content {
	padding: 0.625rem 0;
}

.pk-featured-categories.pk-featured-categories-vertical-list .pk-featured-name {
	font-family: var(--cma-police);
	font-size: 0.9375rem;
	line-height: 1.3;
	text-shadow: none;
	transition: color 0.15s ease;
}

.pk-featured-categories.pk-featured-categories-vertical-list .pk-featured-item:hover .pk-featured-name {
	color: var(--cma-orange-fonce);
}

.pk-featured-categories.pk-featured-categories-vertical-list .pk-featured-count {
	font-family: var(--cma-police);
}

/* Les surimpressions prévues pour la photo n'ont plus d'objet. */
.pk-featured-categories-vertical-list .pk-featured-overlay,
.pk-featured-categories-vertical-list .pk-featured-image {
	display: none;
}

/* =========================================================================
   14. BARRE LATÉRALE — DERNIER NUMÉRO
   ========================================================================= */

.cma-mag-side__visuel {
	display: block;
	aspect-ratio: 4 / 5;
	border-radius: var(--cs-image-border-radius);
	overflow: hidden;
	background-color: var(--cs-color-site-background);
}

.cma-mag-side__couv,
.cma-mag-side__couv img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.cma-mag-side__visuel:hover .cma-mag-side__couv { transform: scale(1.03); }

.cma-mag-side__titre {
	font-family: var(--cma-police);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.35;
	margin: 0.875rem 0 0;
	color: var(--cs-color-primary);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cma-mag-side__prix {
	display: block;
	margin-top: 0.375rem;
	font-family: var(--cma-police);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cs-color-secondary);
}

.cma-mag-side__cta {
	display: block;
	margin-top: 0.875rem;
	padding: 0.625rem 1rem;
	border-radius: 999px;
	background-color: var(--cma-orange);
	color: #14192B;
	font-family: var(--cma-police);
	font-size: 0.8125rem;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.cma-mag-side__cta:hover,
.cma-mag-side__cta:focus { background-color: #FFA45C; color: #14192B; }

/* =========================================================================
   15. ENCART A6
   105 × 148 mm, soit le même rapport qu'une A5 ou une A4 : 1 / 1,414.
   ========================================================================= */

.cma-encart--a6 {
	aspect-ratio: 1 / 1.414;
	min-height: 0;
	padding: 1rem;
}

/* Bloc image de l'encart : le visuel se remplace depuis Apparence → Widgets. */
.cma-pub-a6 {
	margin: 0;
}

.cma-pub-a6 img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1.414;
	object-fit: cover;
	border-radius: var(--cs-image-border-radius);
}

/* =========================================================================
   16. « À LIRE ENSUITE »
   Trois colonnes, et surtout des blocs de texte de hauteur réservée : sans
   cela un titre de quatre lignes décale son image et la rangée part en
   escalier.
   ========================================================================= */

.cs-entry__post-related .cs-entry__post-wrap {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	align-items: stretch;
}

@media (max-width: 1279px) {
	.cs-entry__post-related .cs-entry__post-wrap { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
	.cs-entry__post-related .cs-entry__post-wrap { grid-template-columns: 1fr; }
}

/* Le thème donne 25 % de largeur à ces cartes, pour sa propre disposition en
   quatre colonnes flex. Dans une grille, ce pourcentage se calcule sur la
   colonne : les cartes tombaient à 109 px de large. */
.cs-entry__post-related .cs-entry__post-wrap > article {
	width: 100%;
	max-width: none;
	flex: none;
	height: 100%;
	padding: 0;
}

.cs-entry__post-related .cs-entry__outer {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.cs-entry__post-related .cs-entry__title {
	font-size: 1.125rem;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(3 * 1.3em);
}

.cs-entry__post-related .cs-entry__excerpt {
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(2 * 1.6em);
}

/* Le visuel garde le même cadre d'une carte à l'autre. Le rapport est porté
   par l'image elle-même : sortir l'image du flux vide le conteneur, qui
   n'a pas de hauteur propre dans ce gabarit. */
.cs-entry__post-related .cs-entry__thumbnail {
	display: block;      /* le thème le met en flex : il se réduit alors à la
	                        largeur de son contenu, soit 21 px */
	position: relative;
	width: 100%;
	flex: 0 0 auto;
	overflow: hidden;
	border-radius: var(--cs-image-border-radius);
}

.cs-entry__post-related .cs-entry__thumbnail img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.cs-entry__post-related .cs-entry__footer { margin-top: auto; }

.pk-featured-categories.pk-featured-categories-vertical-list .pk-featured-content::before,
.pk-featured-categories.pk-featured-categories-vertical-list .pk-featured-overlay,
.pk-featured-categories.pk-featured-categories-vertical-list .pk-featured-image {
	display: none;
}

/* =========================================================================
   16. CITATION DE LA SEMAINE
   Bloc plein, en bleu de marque : c'est une respiration dans la colonne,
   il doit se distinguer nettement des cartes blanches qui l'entourent.
   ========================================================================= */

.cma-citation {
	margin: 0;
	padding: 1.75rem;
	border-radius: var(--cs-image-border-radius);
	background-color: var(--cma-bleu);
	color: #fff;
}

.cma-citation__intitule {
	display: block;
	font-family: var(--cma-police);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin-bottom: 1rem;
	color: #fff;
}

.cma-citation__texte {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: var(--cma-police);
	font-size: 1rem;
	font-style: italic;
	font-weight: 400;
	line-height: 1.55;
	color: #fff;
}

.cma-citation__texte::before,
.cma-citation__texte::after { content: none; }

.cma-citation__signature {
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(255, 255, 255, 0.22);
	font-family: var(--cma-police);
	font-style: italic;
	line-height: 1.4;
}

.cma-citation__auteur {
	display: block;
	font-size: 0.9375rem;
	font-weight: 700;
	color: #fff;
}

.cma-citation__fonction {
	display: block;
	font-size: 0.875rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.82);
}

.cma-cit-vide {
	padding: 1.5rem;
	border: 1px dashed var(--cs-color-contrast-200);
	border-radius: var(--cs-image-border-radius);
	color: var(--cs-color-secondary);
}

/* Le widget qui la contient ne doit pas doubler le cadre. */
.widget:has(> * > .cma-citation),
.widget:has(> .cma-citation) {
	padding: 0;
	background: none;
	box-shadow: none;
}

/* =========================================================================
   17. HÉROS ET INTITULÉS DE SECTION
   La signature de marque précède le titre. Elle doit se lire comme une
   devise, pas comme un second titre : italique, taille intermédiaire, et un
   filet ocre qui la rattache à la marque sans voler la vedette au H1.
   ========================================================================= */

/* Étiquette d'attaque : elle annonce, elle ne raconte pas. Elle doit donc
   rester nettement sous la taille du chapeau. */
.cma-eyebrow {
	font-family: var(--cma-police);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.4;
	color: var(--cs-color-secondary);
	margin: 0 0 0.75rem;
}

/* Description sous un titre de rubrique, sur la page d'accueil. */
.cma-section-desc {
	max-width: 46ch;
	margin: 0.5rem 0 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--cs-color-secondary);
}

.cma-signature {
	margin: 0 0 1.5rem;
	padding-left: 0.875rem;
	border-left: 3px solid var(--cma-orange);
	max-width: 40ch;
	font-family: var(--cma-police);
	font-size: 1.0625rem;
	font-style: italic;
	font-weight: 500;
	line-height: 1.45;
	color: var(--cs-color-secondary);
}

.cma-hero-lead {
	max-width: 48ch;
	line-height: 1.65;
}

@media (max-width: 767px) {
	.cma-signature {
		font-size: 1rem;
		margin-bottom: 1.25rem;
	}
}

/* =========================================================================
   18. BARRE D'ANNONCE
   Bandeau piloté depuis Magazine → Barre d'annonce. Il se place au-dessus
   de l'en-tête et pousse le contenu vers le bas plutôt que de le recouvrir.
   ========================================================================= */

.cma-barre {
	position: relative;
	z-index: 100;
	font-family: var(--cma-police);
}

.cma-barre--orange { background-color: var(--cma-orange); color: #14192B; }
.cma-barre--bleu   { background-color: var(--cma-bleu);   color: #fff; }
.cma-barre--encre  { background-color: #14192B;           color: #fff; }

.cma-barre__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.75rem 1.25rem;
	max-width: 1220px;
	margin: 0 auto;
	padding: 0.75rem 3rem 0.75rem 1.25rem;
	position: relative;
}

.cma-barre__texte {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
}

.cma-barre__cta {
	flex: 0 0 auto;
	padding: 0.375rem 1rem;
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 700;
	text-decoration: none;
	transition: opacity 0.15s ease;
}

.cma-barre--orange .cma-barre__cta { background-color: #14192B; color: #fff; }
.cma-barre--bleu .cma-barre__cta,
.cma-barre--encre .cma-barre__cta  { background-color: var(--cma-orange); color: #14192B; }
.cma-barre__cta:hover { opacity: 0.88; }

.cma-barre__fermer {
	position: absolute;
	right: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.15s ease;
}

.cma-barre__fermer:hover { opacity: 1; }

@media (max-width: 575px) {
	.cma-barre__inner { padding: 0.625rem 2.5rem 0.625rem 1rem; }
	.cma-barre__texte { font-size: 0.875rem; }
}


/* =========================================================================
   19. COMPATIBILITÉ <picture>
   Le module Media Encoder (WPMasterToolKit) enveloppe chaque image dans une
   balise <picture> pour servir le WebP avec repli. Les classes passées à
   get_the_post_thumbnail atterrissent alors sur le <picture> et non sur
   l'<img> : toutes les règles de recadrage tombaient à côté.
   ========================================================================= */

.cs-entry__thumbnail picture,
.cs-overlay-background picture,
.cma-mag picture,
.cma-mag-side picture {
	display: block;
	width: 100%;
	height: 100%;
}

.cs-entry__thumbnail picture img,
.cs-overlay-background picture img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* =========================================================================
   20. PAGE CONTACT
   Deux colonnes : à gauche ce qu'on peut nous envoyer, à droite le
   formulaire. En pleine largeur, cinq champs s'étirent sur 1200 px et
   deviennent pénibles à remplir.
   ========================================================================= */

.cma-contact-cols {
	gap: 3.5rem;
	align-items: flex-start;
}

.cma-contact-form {
	background-color: var(--cs-color-layout-elements-background);
	border-radius: var(--cs-image-border-radius);
	padding: 2rem;
	position: sticky;
	top: 2rem;
}

.cma-contact-form > h2:first-child { margin-top: 0; }

@media (max-width: 781px) {
	.cma-contact-cols { gap: 2.5rem; }
	.cma-contact-form { padding: 1.5rem; position: static; }
}

/* =========================================================================
   19. LARGEUR DU CONTENEUR SUR ÉCRANS INTERMÉDIAIRES
   Le thème plafonne le conteneur à 1360 px et ne l'élargit qu'au-delà de
   1780 px. Entre les deux, quatre colonnes se partagent 1280 px, soit
   302 px par carte — trop étroit pour un titre de trois lignes.
   On laisse le conteneur suivre la largeur disponible dans cet intervalle.
   ========================================================================= */

@media (min-width: 1520px) {
	.cs-container {
		max-width: min(1720px, calc(100% - 5rem));
	}
}

/* =========================================================================
   20. RANGÉES TOUJOURS PLEINES
   Le nombre d'articles d'un bloc Canvas n'est pas responsive : il est fixé
   une fois pour toutes. On en demande donc quatre — le compte des écrans de
   bureau — et on masque le quatrième là où la grille n'a que trois colonnes.
   Sans cela, une quatrième colonne vide laissait un trou à droite en
   1520 px et plus.
   ========================================================================= */

@media (min-width: 1280px) and (max-width: 1519px) {
	.cnvs-block-posts .cs-posts-area__main > article:nth-child(4) {
		display: none;
	}
}

/* =========================================================================
   ACCENT LISIBLE SELON LE FOND
   L'orange de marque tient parfaitement sur fond sombre (6,9:1) mais tombe
   à 2,5:1 en petit corps sur le gris clair des sections — sous le seuil AA.
   On ne touche pas à la couleur de marque : on n'assombrit que le texte,
   et seulement là où le fond est clair.
   ========================================================================= */

body[data-site-scheme="default"] .cnvs-block-custom-link .cs-custom-link,
body[data-site-scheme="default"] .cs-custom-link {
	--cs-custom-link-color: var(--cma-orange-texte);
	--cs-custom-link-color-hover: var(--cma-orange-texte);
}

/* Un bloc peut porter son propre schéma sombre au sein d'une page claire :
   l'orange vif y reste le bon choix. */
body[data-site-scheme="default"] [data-scheme="dark"] .cs-custom-link,
body[data-site-scheme="default"] [data-scheme="inverse"] .cs-custom-link,
body[data-site-scheme="default"] .cs-entry__overlay .cs-custom-link {
	--cs-custom-link-color: var(--cma-orange);
	--cs-custom-link-color-hover: var(--cma-orange);
}

/* -------------------------------------------------------------------------
   Rubrique active dans l'en-tête.
   Le thème la marque avec l'orange d'accent. Sur l'en-tête blanc, ce même
   orange ne donne que 2,7:1 en corps 14 : on reprend l'orange assombri.
   En schéma sombre l'orange vif atteint 6,9:1, on le laisse.
   ---------------------------------------------------------------------- */

body[data-site-scheme="default"] .cs-header__nav-inner > li.current-menu-item > a,
body[data-site-scheme="default"] .cs-header__nav-inner > li.current-menu-ancestor > a,
body[data-site-scheme="default"] .cs-header__nav-inner > li.current-menu-parent > a {
	color: var(--cma-orange-texte);
}

/* -------------------------------------------------------------------------
   Bouton « Charger plus d'articles ».
   Son libellé garde le bleu de marque quel que soit le schéma : sur le fond
   sombre il tombe à 1,8:1, soit un bouton pratiquement invisible.
   ---------------------------------------------------------------------- */

body[data-site-scheme="dark"] .cs-load-more,
body[data-site-scheme="dark"] .cs-load-more .cs-button-label,
body[data-site-scheme="dark"] .cs-posts-area__pagination .cs-load-more {
	color: #FFFFFF;
}

/* -------------------------------------------------------------------------
   Étiquettes en pied d'article.
   Le thème leur donne un texte bleu nuit sur pastille claire. En schéma
   sombre la pastille fonce mais le texte reste bleu nuit : 1,3:1, illisible.
   ---------------------------------------------------------------------- */

body[data-site-scheme="dark"] .cs-entry__tags a {
	color: rgba(255, 255, 255, 0.92);
	background-color: rgba(255, 255, 255, 0.08);
}

body[data-site-scheme="dark"] .cs-entry__tags a:hover,
body[data-site-scheme="dark"] .cs-entry__tags a:focus-visible {
	color: #FFFFFF;
	background-color: rgba(255, 255, 255, 0.16);
}

/* -------------------------------------------------------------------------
   Voile de l'en-tête d'article.
   Les cartes en surimpression sont passées au bleu de marque ; cet en-tête
   gardait l'aplat noir du thème. Même dégradé, même teinte, pour que la
   photo d'ouverture s'inscrive dans la même palette.
   ---------------------------------------------------------------------- */

.cs-entry__post-media.cs-entry__overlay-background::after,
.cs-entry__header-wrap .cs-entry__post-media::after {
	/* Calibré pour le pire cas : une photo d'ouverture quasi blanche.
	   À 0,70 d'opacité le blanc conserve 5,5:1 ; en dessous de 0,66 il
	   passe sous le seuil AA. Le voile s'allège vers le haut pour que
	   l'image respire là où il n'y a pas de texte. */
	background-image: linear-gradient(
		0deg,
		rgba(18, 39, 95, 0.82) 0%,
		rgba(18, 39, 95, 0.72) 40%,
		rgba(18, 39, 95, 0.44) 65%,
		rgba(18, 39, 95, 0.22) 85%,
		rgba(18, 39, 95, 0.14) 100%
	);
}