/*
Theme Name: Jours de Chasse
Theme URI: https://joursdechasse.com
Author: WinWin Partners
Author URI: https://winwin-partners.fr
Description: Thème bloc sur mesure du magazine Jours de Chasse. Palette sarcelle et or laiton, typographie Playfair Display / EB Garamond / Instrument Sans, d'après la planche de style et les quatre modèles de pages validés. La boutique (abonnements, commandes) reste externe, sur boutique.joursdechasse.com.
Version: 0.2.0
Requires at least: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: joursdechasse
Tags: blog, news, editorial, full-site-editing, block-patterns
*/

/*
 * L'essentiel des styles vit dans theme.json — c'est là qu'il faut aller en premier.
 * Ce fichier ne porte que ce que theme.json ne sait pas exprimer : les composants
 * signature de la planche de style (bandeau de rubrique, lettrine, monogramme),
 * les mises en page en grille et les états d'interface (header condensé, menus).
 *
 * Chaque utilitaire s'écrit deux fois : la classe simple (utilisable directement
 * dans le balisage des compositions) et la classe `is-style-…` que WordPress
 * ajoute quand la rédaction choisit le style depuis l'éditeur. Les deux doivent
 * rester synchronisées — voir les register_block_style() de functions.php.
 */

:root {
	/* Losange or de l'ornement : dessiné en SVG pour rester net à toute échelle. */
	--jdc-losange: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M4 0 8 4 4 8 0 4z' fill='%23B08D3F'/%3E%3C/svg%3E");
	--jdc-losange-pale: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M4 0 8 4 4 8 0 4z' fill='%23D6BC85'/%3E%3C/svg%3E");
	--jdc-transition: 260ms ease;
}

/* ------------------------------------------------------------------ Base */

/* Le corps de lecture veut une césure propre : les colonnes sont étroites. */
body {
	-webkit-font-smoothing: antialiased;
	text-wrap: pretty;
}

/* Le soulignement des liens de contenu ne doit pas mordre sur les jambages. */
a {
	text-underline-offset: 0.18em;
}

/* Angles : 0 partout, 2 px sur les boutons seulement (planche de style, XI). */
img,
figure {
	border-radius: 0;
}

/*
 * En-tête, contenu et pied de page se touchent.
 *
 * WordPress applique l'écart de bloc entre les enfants directs de la page, ce
 * qui glissait une bande blanche de 16 px sous l'en-tête, avant le hero. Chaque
 * section porte déjà ses propres marges : il n'y a rien à intercaler.
 */
.wp-site-blocks > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* ---------------------------------------------------------------- En-tête */

/*
 * Le header colle en haut et se condense au défilement : fond sarcelle, logo en
 * blanc, hauteur réduite. La classe est posée par assets/js/jdc.js.
 *
 * C'est l'enveloppe « partie de gabarit » qui colle, pas le groupe d'en-tête :
 * WordPress place ce dernier dans un conteneur exactement aussi haut que lui,
 * où `position: sticky` n'a aucune course et ne produit donc rien du tout.
 */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 30;
}

/*
 * Connecté à l'administration, le bandeau de WordPress est fixe en haut de la
 * fenêtre : l'en-tête collant doit se poser dessous, sinon il passe en partie
 * derrière. Les trois règles sont sous `.admin-bar`, classe que WordPress ne
 * pose que pour les utilisateurs connectés — un visiteur ne les voit jamais.
 *
 * Hauteurs prises dans wp-includes/css/admin-bar.css : 32 px, 46 px sous
 * 782 px, et sous 600 px le bandeau cesse d'être fixe et défile avec la page,
 * l'en-tête reprend donc le haut de la fenêtre.
 */
.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: 46px;
	}
}

@media screen and (max-width: 600px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: 0;
	}
}

.jdc-header {
	transition: background var(--jdc-transition), padding var(--jdc-transition),
		border-color var(--jdc-transition);
}

/*
 * L'or laiton devient l'or pâle sur ce fond : sur la sarcelle vive, le laiton
 * ne détache plus (1,5:1) là où il tenait sur la sarcelle profonde (3,6:1).
 */
.jdc-header.est-condense {
	background-color: var(--wp--preset--color--sarcelle) !important;
	border-bottom-color: var(--wp--preset--color--or-pale) !important;
	padding-top: 0.75rem !important;
	padding-bottom: 0.75rem !important;
	/* La couleur se pose ici, pas seulement sur les descendants : ce qui hérite
	   (le bouton de recherche, par exemple) doit trouver du blanc en remontant. */
	color: var(--wp--preset--color--blanc);
}

.jdc-header.est-condense :where(a, span, p, button, input, .wp-block-navigation) {
	color: var(--wp--preset--color--blanc);
}

/*
 * Les liens d'appoint reprennent leur pleine opacité une fois le fond passé en
 * sarcelle : à 72 % ils tombaient à 3,2:1, sous le seuil AA. En blanc plein ils
 * sont à 4,7:1, comme le reste du texte sur cette couleur.
 */
.jdc-header.est-condense .jdc-header-appoint,
.jdc-header.est-condense .wp-block-search__button {
	opacity: 1;
}

/* La navigation occupe le centre, quelle que soit la largeur des deux flancs. */
.jdc-header-nav {
	flex: 1 1 auto;
	justify-content: center;
}

/* Le logo vert devient blanc par filtre : une seule image à maintenir. */
.jdc-header .wp-block-site-logo {
	margin: 0;
}

.jdc-header .wp-block-site-logo img {
	height: 46px;
	width: auto;
	max-width: none;
	transition: height var(--jdc-transition), filter var(--jdc-transition);
}

/* Le CTA du header est plus compact que les boutons de contenu. */
.jdc-header .wp-block-button__link {
	padding: 0.8125rem 1.375rem;
	font-size: var(--wp--preset--font-size--petit);
}

/*
 * La recherche est un mot, pas une loupe sur aplat : elle s'aligne sur les
 * liens d'appoint, et le champ ne se déplie qu'au clic. Le bloc de recherche
 * hérite sinon du style de bouton du thème, d'où la remise à plat.
 */
/* Sans cela le formulaire prend toute la largeur et pousse « Compte » à la ligne. */
.jdc-header .wp-block-search {
	margin: 0;
	width: auto;
	flex: 0 0 auto;
}

/* Le champ replié garde sa hauteur : sans recentrage, le mot « Rechercher »
   se retrouve étiré sur toute la boîte et ne s'aligne plus sur « Compte ». */
.jdc-header .wp-block-search__inside-wrapper {
	align-items: center;
}

.jdc-header .wp-block-search__button {
	background: transparent;
	color: inherit;
	border: 0;
	border-radius: 0;
	padding: 0;
	font-family: var(--wp--preset--font-family--interface);
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
	opacity: 0.72;
	transition: opacity 180ms ease;
}

.jdc-header .wp-block-search__button:hover,
.jdc-header .wp-block-search__button:focus {
	background: transparent;
	color: inherit;
	opacity: 1;
}

.jdc-header .wp-block-search__input {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--sarcelle);
	border-radius: 0;
	background: transparent;
	color: inherit;
	padding: 0.375rem 0.5rem;
	font-family: var(--wp--preset--font-family--lecture);
	font-size: var(--wp--preset--font-size--interface);
	min-width: 15rem;
}

.jdc-header .wp-block-search__input::placeholder {
	color: inherit;
	opacity: 0.55;
}

.jdc-header.est-condense .wp-block-search__input {
	border-bottom-color: var(--wp--preset--color--or-pale);
}

.jdc-header.est-condense .wp-block-site-logo img {
	height: 30px;
	filter: brightness(0) invert(1);
}

/*
 * Le bouton d'abonnement s'inverse une fois l'en-tête condensé : son aplat
 * étant de la couleur du fond, il disparaîtrait purement et simplement.
 * Même logique que les boutons posés sur les blocs sombres.
 */
.jdc-header.est-condense .wp-block-button__link {
	background-color: var(--wp--preset--color--blanc);
	border-color: var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--sarcelle);
}

.jdc-header.est-condense .wp-block-button__link:hover {
	background-color: transparent;
	border-color: var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--blanc);
}

/*
 * Liens d'appoint du header (Rechercher, Compte) : discrets, jamais soulignés.
 * L'opacité ne se pose qu'une fois — sur le paragraphe et sur son lien, elle se
 * multipliait, et « Compte » sortait plus pâle que « Rechercher ».
 */
.jdc-header-appoint {
	font-family: var(--wp--preset--font-family--interface);
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
	color: inherit;
	opacity: 0.72;
	transition: opacity 180ms ease;
}

.jdc-header-appoint a {
	color: inherit;
	text-decoration: none;
}

.jdc-header-appoint:hover {
	opacity: 1;
}

/* ------------------------------------------------------------ Navigation */

/* Souligné sarcelle au survol et sur la page courante — jamais de gras. */
.jdc-header .wp-block-navigation-item__content {
	padding-bottom: 4px;
	border-bottom: 2px solid transparent;
	transition: border-color 180ms ease;
}

.jdc-header .wp-block-navigation-item__content:hover,
.jdc-header .current-menu-item > .wp-block-navigation-item__content,
.jdc-header .current-menu-ancestor > .wp-block-navigation-item__content {
	border-bottom-color: var(--wp--preset--color--sarcelle);
}

/*
 * Sous-menus : panneau clair, filet or en tête, aucun angle arrondi.
 *
 * Les couleurs d'overlay ne sont volontairement pas réglées sur le bloc de
 * navigation : WordPress les recopierait sur le panneau déroulant, en classes
 * `!important`, et le menu se retrouverait en vert sur vert. L'habillage sombre
 * du panneau mobile est donc entièrement porté par le CSS, plus bas.
 */
/* Le `.has-child` n'est pas décoratif : sans lui, la règle du cœur — qui pose
   un fond blanc et un filet gris — l'emporte sur celle-ci. */
.jdc-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--blanc-froid);
	border: 0;
	border-top: 1px solid var(--wp--preset--color--or);
	border-bottom: 1px solid var(--wp--preset--color--filet);
	box-shadow: 0 24px 40px -28px rgba(21, 21, 19, 0.3);
	padding: 0.5rem 0;
	min-width: 16rem;
}

.jdc-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--lecture);
	font-size: var(--wp--preset--font-size--interface);
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--encre);
	padding: 0.5rem 1.25rem;
	border-bottom: 0;
}

.jdc-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--sarcelle);
}

/*
 * Bouton d'ouverture du panneau : trois traits, pas les deux de WordPress.
 * L'icône est redessinée en CSS plutôt qu'en remplaçant le SVG du cœur — les
 * traits suivent alors `currentColor`, donc l'encre au repos et le blanc une
 * fois l'en-tête condensé, sans règle supplémentaire.
 */
.wp-block-navigation__responsive-container-open {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
}

.wp-block-navigation__responsive-container-open svg {
	display: none;
}

.wp-block-navigation__responsive-container-open::before {
	content: "";
	display: block;
	width: 24px;
	height: 15px;
	background-image: linear-gradient(currentColor, currentColor),
		linear-gradient(currentColor, currentColor),
		linear-gradient(currentColor, currentColor);
	background-size: 100% 1.5px;
	background-position: left top, left center, left bottom;
	background-repeat: no-repeat;
}

/* Panneau plein écran sur mobile : fond sarcelle, portes en Playfair. */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--sarcelle) !important;
	color: var(--wp--preset--color--blanc);
	padding: 1.5rem 1.25rem 2rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--titre);
	font-size: 1.875rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--blanc);
	padding: 1rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.28);
	width: 100%;
}

/* Dans le panneau plein écran, les sous-menus se déplient à même le fond
   sombre : pas de carte claire posée par-dessus. */
.wp-block-navigation__responsive-container.is-menu-open .has-child .wp-block-navigation__submenu-container {
	background-color: transparent;
	border: 0;
	box-shadow: none;
	padding: 0 0 0 1.25rem;
	min-width: 0;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container
	.wp-block-navigation-item__content {
	font-size: 1.25rem;
	color: var(--wp--preset--color--blanc);
	padding: 0.75rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.20);
}

/* --------------------------------------------- Bandeau de rubrique (signature) */

/*
 * Composant signature de la planche de style : deux filets, un losange or,
 * capitales espacées à 0,34em. Réutilisé sur l'accueil, les pages et les articles.
 * Balisage attendu : un groupe .jdc-bandeau contenant un unique paragraphe.
 */
.jdc-bandeau,
.is-style-jdc-bandeau {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	text-align: center;
}

.jdc-bandeau::before,
.jdc-bandeau::after,
.is-style-jdc-bandeau::before,
.is-style-jdc-bandeau::after {
	content: "";
	align-self: stretch;
	height: 8px;
	background:
		var(--jdc-losange) center / 8px 8px no-repeat,
		linear-gradient(var(--jdc-couleur-filet, #e2e4e3), var(--jdc-couleur-filet, #e2e4e3))
			left center / calc(50% - 15px) 1px no-repeat,
		linear-gradient(var(--jdc-couleur-filet, #e2e4e3), var(--jdc-couleur-filet, #e2e4e3))
			right center / calc(50% - 15px) 1px no-repeat;
}

/*
 * Les deux derniers sélecteurs ne sont pas redondants : theme.json règle la
 * taille et la couleur de post-terms et de query-title au même poids que
 * `.jdc-bandeau > *`. Les nommer donne le poids qui tranche.
 */
.jdc-bandeau > *,
.is-style-jdc-bandeau > *,
.jdc-bandeau > .wp-block-post-terms,
.jdc-bandeau > .wp-block-query-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--interface);
	font-size: var(--wp--preset--font-size--interface);
	font-weight: 500;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	padding-left: 0.34em;
	color: var(--wp--preset--color--encre);
}

/* Sur un article, la rubrique du bandeau est un lien : sans cela elle reprend
   le sarcelle des post-terms, alors que la maquette la veut en encre comme le
   reste des bandeaux. Seuls les filets et le losange sont colorés. */
.jdc-bandeau a,
.is-style-jdc-bandeau a {
	color: inherit;
	text-decoration: none;
}

.jdc-bandeau a:hover,
.is-style-jdc-bandeau a:hover {
	color: var(--wp--preset--color--sarcelle);
}

/* Sur fond sombre : filets et texte s'éclaircissent, le losange passe en or pâle. */
.jdc-bandeau.sur-fond-sombre::before,
.jdc-bandeau.sur-fond-sombre::after {
	background-image: var(--jdc-losange-pale),
		linear-gradient(rgba(214, 188, 133, 0.7), rgba(214, 188, 133, 0.7)),
		linear-gradient(rgba(214, 188, 133, 0.7), rgba(214, 188, 133, 0.7));
}

.jdc-bandeau.sur-fond-sombre > * {
	color: var(--wp--preset--color--blanc);
}

/* ------------------------------------------------------- Surtitres et filets */

/* Kicker : surtitre en capitales au-dessus d'un titre. */
.jdc-kicker,
.is-style-jdc-kicker {
	font-family: var(--wp--preset--font-family--interface);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 500;
	letter-spacing: 0.18em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--wp--preset--color--sarcelle);
}

/* Kicker précédé d'un trait court, comme au-dessus des titres de section. */
.jdc-kicker-trait,
.is-style-jdc-kicker-trait {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-family: var(--wp--preset--font-family--interface);
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 500;
	letter-spacing: 0.2em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--wp--preset--color--sarcelle);
}

.jdc-kicker-trait::before,
.is-style-jdc-kicker-trait::before {
	content: "";
	width: 34px;
	height: 1px;
	flex: none;
	background: currentColor;
}

/* Filet court, marqueur de fin d'introduction sur les pages simples. */
.jdc-filet,
.wp-block-separator.is-style-jdc-filet {
	width: 64px;
	max-width: 64px;
	height: 1px;
	border: 0;
	margin-left: auto;
	margin-right: auto;
	background: var(--wp--preset--color--sarcelle);
	opacity: 1;
}

/* Ligne d'attributs d'un article : auteur ◆ date ◆ numéro ◆ temps de lecture. */
.jdc-attributs {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.875rem;
	font-family: var(--wp--preset--font-family--interface);
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gris-fumee);
}

.jdc-attributs > * + *::before {
	content: "◆";
	color: var(--wp--preset--color--or);
	margin-right: 0.875rem;
	letter-spacing: 0;
}

/* Losange or utilisé comme séparateur dans une ligne de texte. */
.jdc-losange-or {
	color: var(--wp--preset--color--or);
	margin: 0 0.5rem;
}

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

/*
 * Les boutons s'inversent au survol : le plein se vide, le vide se remplit.
 * Le bouton par défaut est réglé dans theme.json ; restent les deux cas où
 * l'inversion doit se faire dans l'autre sens.
 *
 * Un filet est posé dès le repos, de la couleur du fond : la géométrie ne
 * bouge pas d'un pixel pendant la bascule.
 */
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--sarcelle);
	border-color: var(--wp--preset--color--sarcelle);
	color: var(--wp--preset--color--blanc);
}

/* Sur fond sombre, le bouton blanc se vide au lieu de blanchir sur du blanc. */
.jdc-sur-sombre .wp-block-button__link:hover {
	background-color: transparent;
	border-color: var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--blanc);
}

/* --------------------------------------------------------- Fil d'Ariane */

.jdc-fil-ariane {
	font-family: var(--wp--preset--font-family--interface);
	font-size: var(--wp--preset--font-size--petit);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gris-fumee);
	margin: 0;
}

.jdc-fil-ariane a {
	color: inherit;
	text-decoration: none;
}

.jdc-fil-ariane a:hover {
	color: var(--wp--preset--color--sarcelle);
}

.jdc-fil-ariane .separateur {
	color: var(--wp--preset--color--or);
	margin: 0 0.5rem;
}

/* --------------------------------------------------- Chapô et lettrine */

/*
 * Chapô : le paragraphe d'attaque, plus gros que le corps et détaché de lui
 * par un filet. Quand il ouvre l'article, la lettrine glisse au paragraphe
 * suivant — un chapô lettriné n'aurait pas de sens.
 */
.jdc-chapo,
p.is-style-jdc-chapo {
	font-size: var(--wp--preset--font-size--chapo);
	line-height: 1.6;
	padding-bottom: var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--filet);
}

/*
 * Lettrine : posée sur un groupe, elle habille le premier paragraphe ; posée
 * sur un paragraphe, elle habille celui-là. Les deux cas servent — le premier
 * pour les articles repris de l'ancien site, le second quand la rédaction choisit.
 */
.jdc-lettrine > p:first-of-type:not(.is-style-jdc-chapo)::first-letter,
.is-style-jdc-lettrine > p:first-of-type:not(.is-style-jdc-chapo)::first-letter,
.jdc-lettrine > .wp-block-post-content > p:first-of-type:not(.is-style-jdc-chapo)::first-letter,
.is-style-jdc-lettrine > .wp-block-post-content > p:first-of-type:not(.is-style-jdc-chapo)::first-letter,
.jdc-lettrine > .is-style-jdc-chapo + p::first-letter,
.jdc-lettrine > .wp-block-post-content > .is-style-jdc-chapo + p::first-letter,
p.is-style-jdc-lettrine::first-letter {
	float: left;
	font-family: var(--wp--preset--font-family--titre);
	font-size: 4em;
	line-height: 0.78;
	padding: 0.06em 0.14em 0 0;
	color: var(--wp--preset--color--sarcelle);
}

/* --------------------------------------------------- Photos et légendes */

/* Légende toujours sous l'image, jamais orpheline. */
.jdc-legende,
.wp-block-image figcaption {
	font-family: var(--wp--preset--font-family--interface);
	font-size: var(--wp--preset--font-size--petit);
	line-height: 1.5;
	color: var(--wp--preset--color--gris-fumee);
	text-align: left;
	margin-top: 0.75rem;
}

/*
 * Images à la une : entières, jamais recadrées — ouverture d'article comme
 * vignettes de carte.
 *
 * Elles viennent du magazine et n'ont aucun format commun : du 0,64 au 2,51 sur
 * un échantillon de cent, dont un bon sixième de couvertures en portrait. Les
 * faire tenir dans un cadre fixe en `cover` en amputait la plupart — une
 * couverture s'y réduisait à une bande prise en son milieu. Tous les blocs sont
 * donc en `scale: contain` : le cadre garde sa proportion, l'image tient dedans,
 * et le fond posé ici se voit là où elle ne va pas.
 *
 * Le sable du pied de page sert de fond : la photo se lit comme posée sur du
 * papier, ce qui va mieux à un magazine qu'un aplat sombre de galerie.
 */
.wp-block-post-featured-image img {
	background-color: var(--wp--preset--color--sable);
}

/* Crédit photo sous l'image de tête d'un article (bloc jdc/credit-photo). */
.jdc-credit-photo {
	margin: 0.75rem auto var(--wp--preset--spacing--50);
	max-width: var(--wp--style--global--wide-size);
	color: var(--wp--preset--color--gris-fumee);
	font-family: var(--wp--preset--font-family--interface);
	font-size: var(--wp--preset--font-size--petit);
}

/*
 * Image débordante : plus large que la colonne de lecture sans aller
 * jusqu'aux bords. C'est la taille intermédiaire du modèle article.
 */
.jdc-image-debordante,
.wp-block-image.is-style-jdc-debordante {
	width: min(1160px, 100%);
	max-width: none;
	margin-left: 50%;
	transform: translateX(-50%);
}

/* Couverture présentée en objet : liseré fin et ombre douce. La seule du système. */
.jdc-couverture,
.wp-block-image.is-style-jdc-couverture {
	box-shadow: var(--wp--preset--shadow--couverture);
	border: 1px solid rgba(21, 21, 19, 0.12);
	line-height: 0;
}

.jdc-couverture img,
.wp-block-image.is-style-jdc-couverture img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------------------------------------------------- Hero de l'accueil */

/*
 * Diptyque : le titre sur blanc à gauche, la photo du dossier à droite,
 * la couverture du numéro posée en objet à cheval sur le bas de la photo.
 */
.jdc-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
	min-height: 640px;
	border-bottom: 1px solid var(--wp--preset--color--filet);
	position: relative;
	z-index: 5;
}

.jdc-hero > .jdc-hero-texte {
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	overflow: hidden;
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
}

.jdc-hero > .jdc-hero-photo {
	position: relative;
	background-color: var(--wp--preset--color--sarcelle);
	min-height: 420px;
}

/* Le sélecteur direct laisse de côté la couverture flottante, qui est imbriquée. */
.jdc-hero > .jdc-hero-photo > .wp-block-image,
.jdc-hero > .jdc-hero-photo > figure {
	margin: 0;
	height: 100%;
}

.jdc-hero > .jdc-hero-photo > .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* La couverture qui déborde en bas à droite de la photo du hero. */
.jdc-couverture-flottante {
	position: absolute;
	right: 52px;
	bottom: -58px;
	width: 206px;
	z-index: 4;
	pointer-events: none;
	box-shadow: 0 24px 48px rgba(21, 21, 19, 0.32);
	border: 1px solid rgba(21, 21, 19, 0.16);
	line-height: 0;
}

.jdc-couverture-flottante img {
	display: block;
	width: 100%;
	height: auto;
}

/* Monogramme JC en filigrane, derrière le titre ou dans un bloc citation. */
.jdc-monogramme {
	position: relative;
	overflow: hidden;
}

.jdc-monogramme::before {
	content: "JC";
	position: absolute;
	left: -40px;
	bottom: -90px;
	font-family: var(--wp--preset--font-family--titre);
	font-size: 300px;
	line-height: 1;
	color: rgba(176, 141, 63, 0.1);
	pointer-events: none;
	z-index: 0;
}

.jdc-monogramme > * {
	position: relative;
	z-index: 1;
}

/* Variante réduite, calée en haut à droite : pour un bloc citation. */
.jdc-monogramme.est-discret::before {
	font-size: 170px;
	left: auto;
	right: -14px;
	top: -40px;
	bottom: auto;
}

/* ------------------------------------------------------------- Citation */

/*
 * Citation à double filet sarcelle, centrée, monogramme en fond.
 * S'applique à un groupe .jdc-citation ou au bloc citation depuis l'éditeur.
 */
.jdc-citation,
.wp-block-quote.is-style-jdc-citation {
	border-top: 1px solid var(--wp--preset--color--sarcelle);
	border-bottom: 1px solid var(--wp--preset--color--sarcelle);
	border-left: 0;
	border-right: 0;
	padding: var(--wp--preset--spacing--50) 0;
	text-align: center;
	position: relative;
	overflow: hidden;
}

.jdc-citation > *,
.wp-block-quote.is-style-jdc-citation > p {
	position: relative;
	max-width: 26em;
	margin-left: auto;
	margin-right: auto;
}

.wp-block-quote.is-style-jdc-citation cite,
.jdc-citation .jdc-attribution {
	display: block;
	font-family: var(--wp--preset--font-family--interface);
	font-size: var(--wp--preset--font-size--micro);
	font-style: normal;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sarcelle);
	margin-top: 1.25rem;
}

/* ----------------------------------------------------- Encadrés chiffrés */

.jdc-chiffre {
	font-family: var(--wp--preset--font-family--titre);
	font-size: 2.5rem;
	line-height: 1;
	color: var(--wp--preset--color--or);
}

/* --------------------------------------------------------------- Cartes */

/*
 * Brève de la colonne « À la une » : vignette 172 px à gauche, texte à droite,
 * filet de séparation en bas. Le balisage vient de la boucle de requête.
 */
.jdc-breves .wp-block-post-template > li {
	display: grid;
	grid-template-columns: 172px minmax(0, 1fr);
	gap: 1.375rem;
	padding-bottom: 1.75rem;
	border-bottom: 1px solid var(--wp--preset--color--filet);
}

.jdc-breves .wp-block-post-template > li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.jdc-breves .wp-block-post-featured-image {
	margin: 0;
}

.jdc-breves .wp-block-post-featured-image img {
	width: 172px;
	height: 115px;
	object-fit: contain;
}

/* Grille de cartes (rubrique, articles associés) : image, surtitre, titre, date. */
.jdc-grille .wp-block-post-featured-image img {
	width: 100%;
	object-fit: cover;
}

/* -------------------------------------------------- En-tête de rubrique */

/*
 * Photo d'ambiance assombrie à 72 % portant le bandeau de rubrique.
 * L'image sert de matière, jamais de porteuse de titre.
 */
.jdc-entete-rubrique {
	position: relative;
	min-height: 260px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: var(--wp--preset--color--sarcelle-profonde);
	text-align: center;
}

.jdc-entete-rubrique .jdc-bandeau {
	max-width: 420px;
	margin-left: auto;
	margin-right: auto;
}

/* ------------------------------------------------- Filtres de rubrique */

.jdc-filtres {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.jdc-filtres ul {
	display: flex;
	gap: 0.625rem;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

.jdc-filtres a {
	display: block;
	font-family: var(--wp--preset--font-family--interface);
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--gris-fumee);
	border: 1px solid var(--wp--preset--color--filet);
	padding: 0.9375rem 1rem; /* zone tactile de 44 px */
}

.jdc-filtres a:hover {
	border-color: var(--wp--preset--color--sarcelle);
	color: var(--wp--preset--color--sarcelle);
}

.jdc-filtres .est-actif a,
.jdc-filtres a.est-actif {
	background: var(--wp--preset--color--sarcelle);
	border-color: var(--wp--preset--color--sarcelle);
	color: var(--wp--preset--color--blanc);
}

.jdc-filtres .jdc-compteur {
	font-family: var(--wp--preset--font-family--interface);
	font-size: var(--wp--preset--font-size--petit);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gris-fumee);
}

/* ------------------------------------------------ Mots-clés d'un article */

.jdc-etiquettes .wp-block-post-terms__separator {
	display: none;
}

.jdc-etiquettes a {
	display: inline-block;
	font-family: var(--wp--preset--font-family--interface);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--gris-fumee);
	border: 1px solid var(--wp--preset--color--filet);
	padding: 0.5625rem 0.8125rem;
	margin: 0 0.375rem 0.375rem 0;
}

.jdc-etiquettes a:hover {
	border-color: var(--wp--preset--color--sarcelle);
	color: var(--wp--preset--color--sarcelle);
}

/* ------------------------------------------------- Réservé aux abonnés */

/*
 * Le texte s'estompe en dégradé blanc et la carte d'invitation se pose
 * par-dessus : pas de recouvrement brutal.
 */
.jdc-reserve-abonnes {
	position: relative;
	margin-top: -90px;
	padding-top: 90px;
	background: linear-gradient(
		to bottom,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.92) 55%,
		#ffffff 100%
	);
}

/* -------------------------------------------------- Encart publicitaire */

.jdc-publicite {
	border: 1px solid var(--wp--preset--color--or);
	padding: 5px;
	line-height: 0;
}

.jdc-publicite img {
	display: block;
	width: 100%;
	height: auto;
}

.jdc-mention-publicite {
	font-family: var(--wp--preset--font-family--interface);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--encre);
	margin: 0 0 0.5rem;
}

/* ------------------------------------------------------- Rubrique + colonne */

.jdc-avec-colonne {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: var(--wp--preset--spacing--60);
	align-items: start;
}

/* ------------------------------------------------------- Page de numéro */

/*
 * L'en-tête doit tenir aussi bien avec une couverture, un dossier, une date et
 * un texte qu'avec le seul rang du numéro — beaucoup d'anciens numéros n'auront
 * jamais mieux. D'où deux mises en page : deux colonnes quand il y a une
 * couverture, une colonne centrée sinon (`est-sobre`), sans jamais laisser un
 * vide là où l'image manque.
 */
.jdc-numero-entete {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: var(--wp--preset--spacing--60);
	align-items: center;
}

.jdc-numero-entete.est-sobre {
	grid-template-columns: minmax(0, 640px);
	justify-content: center;
	text-align: center;
}

.jdc-numero-colonne > * {
	margin-block: 0;
}

.jdc-numero-colonne > * + * {
	margin-top: var(--wp--preset--spacing--30);
}

.jdc-numero-titre {
	font-family: var(--wp--preset--font-family--titre);
	font-size: var(--wp--preset--font-size--tres-grand);
	line-height: 1.1;
}

.jdc-numero-dossier {
	font-family: var(--wp--preset--font-family--titre);
	font-size: var(--wp--preset--font-size--grand);
	font-style: italic;
	color: var(--wp--preset--color--sarcelle);
	line-height: 1.2;
}

.jdc-numero-parution,
.jdc-numero-compte {
	font-family: var(--wp--preset--font-family--interface);
	font-size: var(--wp--preset--font-size--interface);
	color: var(--wp--preset--color--gris-fumee);
}

.jdc-numero-couverture img {
	display: block;
	width: 100%;
	height: auto;
	box-shadow: var(--wp--preset--shadow--couverture);
}

@media (max-width: 900px) {
	.jdc-numero-entete,
	.jdc-numero-entete.est-sobre {
		grid-template-columns: minmax(0, 1fr);
		text-align: left;
		justify-content: stretch;
	}

	/* La couverture passe devant le texte : c'est elle qu'on reconnaît. */
	.jdc-numero-couverture {
		order: -1;
		max-width: 240px;
	}
}

/* ---------------------------------------------------------- Newsletter */

.jdc-newsletter-champ {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--wp--preset--color--sarcelle);
	min-width: min(420px, 100%);
}

.jdc-newsletter-champ input[type="email"],
.jdc-newsletter-champ input[type="text"] {
	flex: 1;
	border: 0;
	padding: 0.9375rem 1.125rem;
	font-family: var(--wp--preset--font-family--lecture);
	font-size: var(--wp--preset--font-size--normal);
	color: var(--wp--preset--color--encre);
	background: transparent;
}

.jdc-newsletter-champ button,
.jdc-newsletter-champ input[type="submit"] {
	border: 0;
	border-radius: 0;
	background: var(--wp--preset--color--sarcelle);
	color: var(--wp--preset--color--blanc);
	font-family: var(--wp--preset--font-family--interface);
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 1rem 1.5rem;
	cursor: pointer;
}

.jdc-newsletter-champ button:hover,
.jdc-newsletter-champ input[type="submit"]:hover {
	background: var(--wp--preset--color--sarcelle);
}

/* ------------------------------------------------ Blocs sur fond sombre */

/*
 * Sur sarcelle profonde, les surtitres passent en sarcelle claire et l'or
 * reste réservé aux filets. Posée sur un groupe, la classe requalifie
 * les couleurs de ses enfants sans les redéclarer bloc par bloc.
 */
.jdc-sur-sombre {
	--jdc-couleur-filet: rgba(143, 211, 200, 0.35);
}

.jdc-sur-sombre :where(h1, h2, h3, h4, h5) {
	color: var(--wp--preset--color--blanc);
}

.jdc-sur-sombre .jdc-kicker,
.jdc-sur-sombre .jdc-kicker-trait,
.jdc-sur-sombre .is-style-jdc-kicker {
	color: var(--wp--preset--color--sarcelle-claire);
}

/* Compteur de places d'un événement du Club. */
.jdc-places {
	display: inline-block;
	font-family: var(--wp--preset--font-family--interface);
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--blanc);
	border: 1px solid rgba(143, 211, 200, 0.5);
	padding: 0.5rem 0.75rem;
}

.jdc-places.est-urgent {
	background: var(--wp--preset--color--rouge-meute);
	border-color: var(--wp--preset--color--rouge-meute);
}

/* Bloc date d'un événement : le quantième en gros, encadré à droite. */
.jdc-date-evenement {
	text-align: center;
	border-right: 1px solid rgba(143, 211, 200, 0.3);
	padding-right: 1.625rem;
}

.jdc-date-evenement .jour {
	font-family: var(--wp--preset--font-family--titre);
	font-size: 3.875rem;
	line-height: 1.05;
	color: var(--wp--preset--color--blanc);
}

/* --------------------------------------------------------- Pied de page */

.jdc-footer-colonne-titre {
	font-family: var(--wp--preset--font-family--interface);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sarcelle);
	margin: 0 0 1rem;
}

.jdc-footer-liens {
	font-family: var(--wp--preset--font-family--lecture);
	font-size: var(--wp--preset--font-size--interface);
	line-height: 1.6;
}

.jdc-footer-liens a {
	color: var(--wp--preset--color--encre);
	text-decoration: none;
}

.jdc-footer-liens a:hover {
	color: var(--wp--preset--color--sarcelle);
}

/* --------------------------------------------------------- Accessibilité */

:where(a, button, input, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--or);
	outline-offset: 3px;
}

/* ------------------------------------------------------------ Responsive */

@media (max-width: 1200px) {
	.jdc-avec-colonne {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 900px) {
	.jdc-hero {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	/* Mobile : la photo d'abord, le titre sur blanc en dessous. Jamais superposés. */
	.jdc-hero > .jdc-hero-photo {
		order: -1;
		min-height: 300px;
	}

	.jdc-couverture-flottante {
		display: none;
	}

	.jdc-breves .wp-block-post-template > li {
		grid-template-columns: minmax(0, 1fr);
	}

	.jdc-breves .wp-block-post-featured-image img {
		width: 100%;
		height: 200px;
	}

	.jdc-monogramme::before {
		font-size: 180px;
	}

	.jdc-image-debordante,
	.wp-block-image.is-style-jdc-debordante {
		width: 100%;
		margin-left: 0;
		transform: none;
	}

	.jdc-date-evenement {
		border-right: 0;
		border-bottom: 1px solid rgba(143, 211, 200, 0.3);
		padding-right: 0;
		padding-bottom: 1rem;
	}
}

@media (max-width: 600px) {
	/*
	 * L'échelle d'espacement se resserre au lieu d'être surchargée section par
	 * section : les gabarits écrivent ces presets en style en ligne, qu'aucune
	 * règle ne pourrait dépasser. Redéfinir la variable les emmène tous.
	 */
	:root {
		--wp--preset--spacing--40: 1.5rem;
		--wp--preset--spacing--50: 1.75rem;
		--wp--preset--spacing--60: 2rem;
		--wp--preset--spacing--70: 2.75rem;
	}

	/* Corps de 17 px minimum : le lectorat a entre 45 et 75 ans. */
	body {
		font-size: 1.0625rem;
	}

	/* --- En-tête : logo, abonnement, panneau. Rien d'autre ne tient. --- */

	/*
	 * « Rechercher » et « Compte » sortent de l'en-tête : à cette largeur ils
	 * écrasaient le bouton d'abonnement, qui se pliait en colonne de lettres.
	 * Les portes du site restent accessibles par le panneau plein écran.
	 */
	.jdc-header .wp-block-search,
	.jdc-header .jdc-header-appoint {
		display: none;
	}

	.jdc-header .wp-block-site-logo img {
		height: 34px;
	}

	.jdc-header .wp-block-button__link {
		padding: 0.75rem 0.875rem;
		font-size: var(--wp--preset--font-size--micro);
		letter-spacing: 0.08em;
	}

	/* --- Hero : la photo, puis le titre sur blanc. Jamais superposés. --- */

	.jdc-hero > .jdc-hero-texte {
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30)
			var(--wp--preset--spacing--60);
	}

	/* Le monogramme déborde plus qu'il n'orne à cette taille. */
	.jdc-monogramme::before {
		display: none;
	}

	/* --- Les boutons prennent toute la largeur, empilés. --- */

	/* Les sélecteurs doublés passent devant les règles de disposition du cœur,
	   qui centrent les boutons et les laissent à leur largeur de texte. */
	.wp-block-buttons.wp-block-buttons {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		/* Le conteneur se rétracte sinon à la largeur du plus long libellé,
		   et « pleine largeur » ne veut plus rien dire. */
		width: 100%;
	}

	/* Pas de `flex-basis` en pourcentage : l'axe principal est vertical ici,
	   et les boutons se répartiraient la hauteur au lieu de la largeur. */
	.wp-block-buttons > .wp-block-button {
		width: 100%;
		max-width: none;
		flex: 0 0 auto;
		align-self: stretch;
	}

	.wp-block-buttons > .wp-block-button > .wp-block-button__link {
		display: block;
		width: 100%;
		text-align: center;
		min-height: 44px;
	}

	/* --- Titres : l'échelle de la maquette mobile. --- */

	.jdc-bandeau > *,
	.is-style-jdc-bandeau > *,
	.jdc-bandeau > .wp-block-post-terms,
	.jdc-bandeau > .wp-block-query-title {
		font-size: var(--wp--preset--font-size--petit);
		letter-spacing: 0.3em;
	}

	/* --- Carte d'événement du Club : tout s'empile, le portrait en tête. --- */

	.jdc-date-evenement {
		text-align: left;
	}

	.jdc-date-evenement .jour {
		font-size: 2.625rem;
	}

	/* --- Rubriques --- */

	.jdc-filtres {
		gap: 1rem;
	}

	.jdc-filtres a {
		min-height: 44px;
		display: flex;
		align-items: center;
	}

	/* Le fil d'Ariane se coupe proprement au lieu de pousser la page. */
	.jdc-fil-ariane {
		font-size: var(--wp--preset--font-size--micro);
	}

	/* La colonne de lecture n'a plus besoin de sa marge propre. */
	.jdc-citation,
	.wp-block-quote.is-style-jdc-citation {
		padding: var(--wp--preset--spacing--50) 0;
	}
}

/* Le header collant gêne plus qu'il n'aide quand on demande moins d'animation. */
@media (prefers-reduced-motion: reduce) {
	.jdc-header,
	.jdc-header .wp-block-site-logo img {
		transition: none;
	}
}