/*
Theme Name:   JMG Editions
Theme URI:    https://jmgeditions.fr/
Description:  Thème enfant Kadence pour JMG Editions, éditeur de livres paranormaux depuis 1997. Design éditorial clair sur fond crème, catalogue WooCommerce, réception de manuscrits.
Author:       JMG Editions
Author URI:   https://jmgeditions.fr/
Template:     kadence
Version:      1.0.0
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:  jmg
Tags:         woocommerce, editorial, light
*/

/* ==========================================================================
   1. Variables
   ========================================================================== */

:root {
	/* Couleurs de fond. Le papier est chaud (teinte 88, celle de l'or),
	   l'encre est froide (teinte 272) : ce désaccord est volontaire. Une
	   encre chaude donnerait le brun du papier vieilli, donc le sépia
	   victorien qu'on refuse. L'encre bleu-noir est celle de l'offset, celle
	   d'une revue savante. Le chroma reste sous 0.025, on ne voit pas du
	   bleu, on voit un noir qui n'est pas sépia.
	   Valeurs en hexadécimal et non en oklch() : le lectorat comprend une
	   part de vieux matériel, et oklch n'est lu qu'à partir de Safari 15.4.
	   Les équivalents OKLCH sont documentés dans DESIGN.md. */
	--jmg-fond:            #FAF7F0;  /* oklch(0.977 0.010  88) */
	--jmg-fond-eleve:      #F4F0E5;  /* oklch(0.955 0.015  90) */
	--jmg-fond-carte:      #FEFDF9;  /* oklch(0.993 0.005  88) */
	/* Papier profond, pour les bandes de l'accueil. Le fond élevé ne se
	   séparait du fond de page que de deux centièmes de clarté : à l'écran,
	   les sections se fondaient les unes dans les autres et la page n'avait
	   plus de découpe. L'écart passe ici à près du double, en restant très
	   clair : l'encre y tient 14.28:1, bien au-delà de l'objectif AAA. Seul
	   l'or courant y tombe à 5.88, d'où le passage des liens et surtitres de
	   bande à l'or fort, qui y donne 9.2. */
	--jmg-fond-bande:      #F0EBDE;  /* oklch(0.940 0.018  88) */

	/* Liseré de tranche. Une couverture posée sans cadre n'est visible sur le
	   papier que si elle est plus sombre que lui, et le fonds compte des
	   couvertures franchement blanches : elles disparaissaient. Ce filet-ci
	   n'est pas un cadre de vignette, c'est l'épaisseur du bord imprimé, à
	   quatorze pour cent d'encre. */
	--jmg-tranche: rgba(26, 28, 36, 0.14);

	/* Bleu du portail. C'est le bleu du logo de la maison, oklch(0.56 0.141
	   245), assombri de douze centièmes de clarté à teinte et saturation
	   inchangées. L'assombrissement n'est pas un goût, c'est une nécessité :
	   le bleu du logo tel quel tombe dans la zone médiane où plus rien ne
	   passe, 4.31:1 avec le crème et 3.69 avec l'encre, donc ni texte clair
	   ni texte sombre. À cette clarté-ci, le crème y tient 7.42:1.

	   C'est le seul aplat de couleur pleine du site et le seul endroit où le
	   texte est clair sur fond sombre. Il ne sert qu'à la bande de renvoi. */
	--jmg-portail-bleu:    #005391;  /* oklch(0.435 0.123 250) */
	--jmg-bordure:         #8F836A;  /* oklch(0.614 0.039  85), 3.49:1 */
	--jmg-bordure-forte:   #6E560A;  /* oklch(0.465 0.091  89), 6.55:1 */

	/* Couleurs de texte. Cible AAA (7:1) sur tout ce qui se lit longtemps :
	   le seuil réglementaire de 4.5 est calibré sur une vision moyenne, que
	   ce lectorat n'a pas. */
	--jmg-texte:           #1A1C24;  /* 15.89:1 sur le fond */
	--jmg-texte-doux:      #4A4E5B;  /*  7.75:1 */
	--jmg-texte-discret:   #60646F;  /*  5.53:1, mentions brèves seulement */

	/* L'or, quatre rôles. Sur crème, l'or de la marque ne donne que 2.26:1 :
	   inutilisable en texte, parfait en fond. On scinde le rôle, pas la
	   teinte. Le rapport clair/foncé s'inverse par rapport au fond sombre,
	   y compris pour l'ornement, qui doit désormais s'assombrir pour rester
	   visible. */
	--jmg-or:              #6E560A;  /* liens, focus, titres.  6.55:1 */
	--jmg-or-fort:         #513800;  /* survol.               10.25:1 */
	--jmg-or-vif:          #C9A227;  /* fond de bouton. 7.03:1 avec l'encre */
	--jmg-or-doux:         #A2822A;  /* filets et ornements.   3.41:1 */

	/* Sceau : rouge de cire, repris du script du logo. Réservé aux
	   signatures et clôtures de section, jamais un accent courant. */
	--jmg-sceau:           #8C2F29;  /* 7.69:1 */

	/* États. Même teinte 27 pour le sceau et l'erreur, séparés par le
	   chroma : la cire est éteinte, l'erreur est franche. Aucun état n'est
	   porté par la couleur seule, chacun a son pictogramme et son texte. */
	--jmg-succes:          #1F6B41;  /* 6.06:1 */
	--jmg-erreur:          #A51F1E;  /* 6.97:1 */

	/* Typographie */
	--jmg-titre:  "Playfair Display", Georgia, "Times New Roman", serif;
	--jmg-corps:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	/* Échelle typographique fluide. Plancher absolu à 16px : aucun texte du
	   site, quel que soit son rôle, ne descend en dessous. Ce qui s'appelait
	   « très petit » devient donc la taille normale. */
	--jmg-t-xs:   1rem;        /* 16px, mentions et métadonnées */
	--jmg-t-sm:   1.0625rem;   /* 17px, interface et étiquettes */
	--jmg-t-base: 1.1875rem;   /* 19px, corps de lecture */
	--jmg-t-lg:   clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
	--jmg-t-h4:   clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	--jmg-t-h3:   clamp(1.4375rem, 1.25rem + 0.9vw, 1.875rem);
	--jmg-t-h2:   clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
	--jmg-t-h1:   clamp(2.125rem, 1.6rem + 2.4vw, 3.5rem);

	/* Espacements */
	--jmg-e-1:  0.25rem;
	--jmg-e-2:  0.5rem;
	--jmg-e-3:  0.75rem;
	--jmg-e-4:  1rem;
	--jmg-e-5:  1.5rem;
	--jmg-e-6:  2rem;
	--jmg-e-7:  3rem;
	--jmg-e-8:  4rem;
	--jmg-e-9:  6rem;

	/* Divers */
	--jmg-rayon:      2px;
	--jmg-rayon-lg:   4px;
	--jmg-largeur:    1200px;
	/* 62ch et non 68 : au-delà, l'œil qui fatigue rate la ligne suivante au
	   retour chariot. */
	--jmg-largeur-texte: 62ch;
	--jmg-transition: 160ms ease;

	/* Plus petite cible cliquable. WCAG 2.5.8 se contente de 24px ; ce
	   seuil-ci est calibré sur une main qui tremble et une visée moins
	   précise. */
	--jmg-cible:      48px;
}

/* ==========================================================================
   2. Reset minimal
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background-color: var(--jmg-fond);
	color: var(--jmg-texte);
	font-family: var(--jmg-corps);
	font-size: var(--jmg-t-base);
	line-height: 1.75;
	text-rendering: optimizeLegibility;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

/* ==========================================================================
   3. Typographie
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--jmg-titre);
	font-weight: 600;
	line-height: 1.2;
	color: var(--jmg-texte);
	margin-block: 0 var(--jmg-e-4);
	letter-spacing: -0.01em;
}

h1 { font-size: var(--jmg-t-h1); line-height: 1.1; }
h2 { font-size: var(--jmg-t-h2); }
h3 { font-size: var(--jmg-t-h3); }
h4 { font-size: var(--jmg-t-h4); }

p {
	margin-block: 0 var(--jmg-e-4);
	max-width: var(--jmg-largeur-texte);
}

/*
 * Les liens du corps de texte restent soulignés en permanence. La couleur ne
 * suffit jamais à désigner un lien (RGAA 10.6), et le soulignement est ce qui
 * le rend repérable sans discrimination fine des teintes.
 */
a {
	color: var(--jmg-or);
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color var(--jmg-transition), text-decoration-color var(--jmg-transition);
}

a:hover,
a:focus-visible {
	color: var(--jmg-or-fort);
	text-decoration-thickness: 2px;
}

/*
 * Anneau de focus à 3px plutôt que 2 : même logique que le reste du site,
 * on paye un peu d'épaisseur pour un repérage immédiat.
 */
:focus-visible {
	outline: 3px solid var(--jmg-or);
	outline-offset: 3px;
}

/*
 * Kadence pose .hide-focus-outline sur le body au mousedown, ce qui coupe
 * l'anneau pour toute la session tant qu'aucune touche n'est frappée. Une
 * personne qui clique puis tabule perdrait son repère : on rétablit.
 */
body.hide-focus-outline :focus-visible {
	outline: 3px solid var(--jmg-or);
	outline-offset: 3px;
}

::selection {
	background: var(--jmg-or-vif);
	color: var(--jmg-texte);
}

/*
 * Surtitre : purement ornemental, il garde ses capitales. Mais à 16px et
 * 0.1em au lieu de 13px et 0.16em : capitales, petit corps et lettres
 * écartées cumulés, c'est exactement ce qui casse la reconnaissance de la
 * forme des mots.
 */
.jmg-surtitre {
	font-family: var(--jmg-corps);
	font-size: var(--jmg-t-xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--jmg-or);
	margin-block: 0 var(--jmg-e-3);
}

.jmg-chapeau {
	font-size: var(--jmg-t-lg);
	color: var(--jmg-texte-doux);
	line-height: 1.6;
}

/* ==========================================================================
   4. Boutons
   ========================================================================== */

.jmg-bouton,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--jmg-e-2);
	/* 0.9em sur 19px de texte porte le bouton à 52px de haut, au-dessus du
	   plancher de 48. min-height couvre le cas d'un libellé très court. */
	padding: 0.9em 1.9em;
	min-height: var(--jmg-cible);
	background-color: var(--jmg-or-vif);
	color: var(--jmg-texte);
	font-family: var(--jmg-corps);
	font-size: var(--jmg-t-base);
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.2;
	/* L'or vif ne contraste qu'à 2.26:1 avec le fond de page, en deçà des
	   3:1 exigés pour la limite d'un composant (WCAG 1.4.11). La bordure
	   sombre règle la conformité et, accessoirement, donne au bouton une
	   frontière franche au lieu de le laisser se dissoudre dans le crème. */
	border: 2px solid var(--jmg-or);
	border-radius: var(--jmg-rayon);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--jmg-transition), border-color var(--jmg-transition);
}

.jmg-bouton:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	/* Le survol renverse le bouton du clair au sombre plutôt que de nuancer
	   l'or : un changement franc reste perceptible même quand la
	   discrimination des teintes proches s'est dégradée. */
	background-color: var(--jmg-or);
	border-color: var(--jmg-or);
	color: var(--jmg-fond);
}

.jmg-bouton--fantome {
	background-color: transparent;
	color: var(--jmg-or);
	border-color: var(--jmg-bordure-forte);
}

.jmg-bouton--fantome:hover {
	background-color: var(--jmg-or);
	border-color: var(--jmg-or);
	color: var(--jmg-fond);
}

/* ==========================================================================
   5. Overrides Kadence
   ========================================================================== */

/*
 * Kadence pilote la quasi-totalité de ses couleurs par ces neuf variables.
 * Les remapper règle d'un coup l'en-tête, le menu, le pied de page et les
 * blocs, au lieu de courir après chaque sélecteur.
 */
:root {
	--global-palette1: var(--jmg-or);
	--global-palette2: var(--jmg-or-fort);
	--global-palette3: var(--jmg-texte);
	--global-palette4: var(--jmg-texte);
	--global-palette5: var(--jmg-texte-doux);
	--global-palette6: var(--jmg-texte-discret);
	--global-palette7: var(--jmg-fond-eleve);
	--global-palette8: var(--jmg-fond-carte);
	--global-palette9: var(--jmg-fond);

	--global-palette-highlight:     var(--jmg-or);
	--global-palette-highlight-alt: var(--jmg-or-fort);
	--global-palette-highlight-alt2: var(--jmg-fond);

	/*
	 * Piège de la bascule : le libellé des boutons Kadence était mappé sur la
	 * couleur de fond, ce qui donnait du sombre sur or clair. Le fond ayant
	 * changé de camp, la même équation produirait du crème sur or vif, soit
	 * 2.2:1. Le libellé passe donc sur l'encre au repos, et sur le fond
	 * seulement au survol, où l'or s'est assombri.
	 */
	--global-palette-btn:        var(--jmg-texte);
	--global-palette-btn-hover:  var(--jmg-fond);
	--global-palette-btn-bg:     var(--jmg-or-vif);
	--global-palette-btn-bg-hover: var(--jmg-or);

	--global-content-width: var(--jmg-largeur);
	--global-content-narrow-width: 800px;

	--global-heading-font-family: var(--jmg-titre);
	--global-body-font-family: var(--jmg-corps);
	--global-primary-nav-font-family: var(--jmg-corps);
}

/* Même traitement pour le logo de l'en-tête, qui est le même JPEG bleu à
   fond blanc (fourni par le repli jmg_logo_repli() de functions.php, accroché
   au filtre kadence_custom_logo). Wordmark bleu d'origine, en couleur (comme
   la signature du colophon) : multiply efface le fond blanc du JPEG sans
   désaturer le tracé. */
.custom-logo {
	mix-blend-mode: multiply;
}

/* La mise en page par défaut de Kadence (logo_layout desktop = logo_title)
   affiche le titre du site à côté du logo. Le mot-symbole du logo porte déjà
   « JMG Editions » : le nom du site en texte à côté ferait doublon, ce que
   la signature du colophon (logo + baseline, jamais le nom du site répété)
   n'a pas. */
.site-branding .site-title-wrap {
	display: none;
}

/* Le nom du site suit sa propre couleur chez Kadence, on la force. */
.site-branding a.brand,
.site-branding .site-title,
.site-title a {
	color: var(--jmg-texte);
	font-family: var(--jmg-titre);
}

.site-branding a.brand:hover,
.site-title a:hover {
	color: var(--jmg-or);
}

body,
#wrapper,
#inner-wrap,
.content-bg,
.content-area,
.site-container,
.entry-content-wrap {
	background-color: var(--jmg-fond);
}

.site-header-wrap,
.site-bottom-header-wrap,
.site-main-header-wrap,
.site-top-header-wrap {
	background-color: var(--jmg-fond);
	border-bottom: 1px solid var(--jmg-bordure);
}

/*
 * Les menus déroulants du header (Les livres, Envoyer un manuscrit, Revue
 * Parasciences) héritent par défaut du panneau sombre de Kadence, en rupture
 * avec la charte claire du site. On les ramène sur le fond carte, avec le
 * même vocabulaire de couleurs que le reste de l'en-tête.
 */
.header-navigation .header-menu-container ul ul.sub-menu,
.header-navigation .header-menu-container ul ul.submenu {
	background: var(--jmg-fond-carte);
	border: 1px solid var(--jmg-bordure);
}

.header-navigation .header-menu-container ul ul li.menu-item {
	border-bottom: 1px solid var(--jmg-fond-eleve);
}

.header-navigation .header-menu-container ul ul li.menu-item > a {
	color: var(--jmg-texte);
}

.header-navigation .header-menu-container ul ul li.menu-item > a:hover {
	color: var(--jmg-or-fort);
	background: var(--jmg-fond-eleve);
}

.header-navigation .header-menu-container ul ul li.menu-item.current-menu-item > a {
	color: var(--jmg-or-fort);
	background: var(--jmg-fond-eleve);
}

/* ==========================================================================
   Signature du colophon
   --------------------------------------------------------------------------
   Le logo et la baseline du compte d'éditeur, en colonne de gauche du
   sommaire, au même niveau que les quatre groupes de liens
   (inc/citation-pied-de-page.php, hook kadence_footer_navigation).
   ========================================================================== */

#colophon .footer-navigation-inner {
	display: flex;
	align-items: flex-start;
	gap: var(--jmg-e-7);
}

.jmg-citation-pied {
	flex: 0 0 auto;
	width: 14rem;
	max-width: 100%;
	text-align: left;
}

.jmg-citation-pied__logo {
	display: block;
	width: auto;
	height: 3.75rem;
	max-width: 100%;
	margin-bottom: var(--jmg-e-4);
	/* Même traitement que le logo de l'en-tête (.custom-logo,
	   .jmg-logo-link img) : wordmark bleu en couleur, multiply pour
	   effacer le fond blanc du JPEG. */
	mix-blend-mode: multiply;
}

.jmg-citation-pied__texte {
	margin: 0;
	color: var(--jmg-texte-doux);
	font-family: var(--jmg-titre);
	font-size: var(--jmg-t-sm);
	font-style: italic;
	line-height: 1.5;
	text-align: left;
}

/* ==========================================================================
   Colophon — le pied de page
   --------------------------------------------------------------------------
   Kadence nomme cet élément #colophon. On prend le mot au sérieux : chez un
   éditeur, le colophon est la note de fin d'ouvrage. C'est la quatrième de
   couverture du site, pas une barre de liens.
   ========================================================================== */

/*
 * Un seul aplat pour tout le pied de page. Kadence donne à chaque ligne, à
 * chaque conteneur et à chaque zone de widget son propre fond : trois boîtes
 * emboîtées les unes dans les autres. On les rend toutes transparentes pour
 * que le champ reste continu, et la séparation d'avec le contenu se fait par
 * un unique filet.
 */
.site-footer,
.site-footer-wrap {
	background-color: var(--jmg-fond-eleve);
	border-top: 1px solid var(--jmg-bordure);
	color: var(--jmg-texte-doux);
}

#colophon .site-footer-row-container,
#colophon .site-footer-row-container-inner,
#colophon .site-footer-row,
#colophon .site-container,
#colophon .footer-widget-area,
#colophon .site-footer-section {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* Le sommaire respire : c'est la seule zone dense du pied de page. */
#colophon .site-middle-footer-inner-wrap {
	padding-top: var(--jmg-e-8);
	padding-bottom: var(--jmg-e-8);
}

#colophon .footer-navigation-wrap,
#colophon .footer-navigation-inner,
#colophon .footer-navigation,
#colophon .footer-menu-container {
	width: 100%;
	flex: 1 1 auto;
}

/* --------------------------------------------------------------------------
   Le sommaire, en quatre colonnes
   --------------------------------------------------------------------------
   Les onze destinations ne forment pas une liste : elles répondent à quatre
   raisons distinctes de venir ici. Le regroupement est porté par le menu
   lui-même (Apparence → Menus), la grille ne fait que le montrer.
   -------------------------------------------------------------------------- */

#colophon .footer-menu-container > ul.jmg-colophon {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: var(--jmg-e-6);
	row-gap: var(--jmg-e-7);
	/* Le conteneur de Kadence est un flex : sans cela, la grille se rétracte
	   sur son contenu au lieu d'occuper la largeur disponible. */
	flex: 1 1 auto;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
	justify-content: start;
}

#colophon .jmg-colophon > li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* L'intitulé de colonne : c'est lui qui porte l'or, pas les liens. */
#colophon .jmg-colophon .jmg-colophon-titre {
	display: block;
	margin-bottom: var(--jmg-e-4);
	color: var(--jmg-or);
	font-family: var(--jmg-corps);
	font-size: var(--jmg-t-xs);
	font-weight: 600;
	/* Titre de rubrique, pas un lien : les capitales restent, l'espacement
	   redescend de 0.14em à 0.1em et la taille suit le plancher de 16px. */
	letter-spacing: 0.1em;
	line-height: 1.3;
	text-transform: uppercase;
}

#colophon .jmg-colophon .sub-menu {
	display: flex;
	flex-direction: column;
	gap: var(--jmg-e-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

#colophon .jmg-colophon .sub-menu li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Le soulignement se dessine de la gauche vers la droite au survol. Il est
 * peint en fond plutôt qu'en bordure : aucune propriété de disposition n'est
 * animée, donc rien ne se remet en page au passage de la souris.
 */
#colophon .jmg-colophon .sub-menu a {
	display: inline;
	padding: 0;
	color: var(--jmg-texte-doux);
	font-size: var(--jmg-t-sm);
	line-height: 1.5;
	text-decoration: none;
	background-image: linear-gradient(var(--jmg-or), var(--jmg-or));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size 220ms cubic-bezier(0.25, 1, 0.5, 1),
	            color 220ms cubic-bezier(0.25, 1, 0.5, 1);
}

#colophon .jmg-colophon .sub-menu a:hover,
#colophon .jmg-colophon .sub-menu a:focus-visible {
	color: var(--jmg-texte);
	background-size: 100% 1px;
}

#colophon .jmg-colophon .sub-menu a:focus-visible {
	outline: 2px solid var(--jmg-or);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   L'astérisme
   --------------------------------------------------------------------------
   Marque d'imprimerie qui sépare les sections d'un ouvrage. Le rouge de cire
   est réservé, dans ce thème, aux signatures et aux clôtures de section : la
   fin de la page en est une. C'est le seul geste appuyé du pied de page.

   Dessiné en SVG et non avec le caractère ⁂ (U+2042) : ni Inter ni Playfair
   ne le possèdent, le glyphe partirait donc en police de repli, avec une
   taille et un dessin différents sur chaque machine.
   -------------------------------------------------------------------------- */

#colophon .site-bottom-footer-wrap::before {
	content: "";
	display: block;
	width: 24px;
	height: 20px;
	margin: 0 auto;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cg fill='%238C2F29'%3E%3Ccircle cx='12' cy='4' r='2.6'/%3E%3Ccircle cx='5' cy='16' r='2.6'/%3E%3Ccircle cx='19' cy='16' r='2.6'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

#colophon .site-bottom-footer-inner-wrap {
	padding-top: var(--jmg-e-6);
	padding-bottom: var(--jmg-e-8);
}

/*
 * La mention légale se tient en retrait par la taille, pas par un gris trop
 * pâle : --jmg-texte-discret ne donne que 4.16 de contraste ici, sous le
 * seuil AA de 4.5.
 */
#colophon .site-info {
	color: var(--jmg-texte-doux);
	font-size: var(--jmg-t-xs);
	text-align: center;
}

/*
 * Le paragraphe hérite de la mesure de lecture posée sur `p` (--jmg-largeur-
 * texte) : sa boîte est donc plus étroite que la barre, et elle se cale à
 * gauche. Le texte avait beau être centré, il l'était dans une boîte décalée.
 * Les marges automatiques ramènent la boîte au milieu, sous l'astérisme.
 */
#colophon .site-info .footer-html p {
	margin-inline: auto;
}

#colophon .site-info a {
	color: var(--jmg-texte-doux);
	text-decoration: none;
	border-bottom: 1px solid var(--jmg-or-doux);
	transition: color var(--jmg-transition), border-color var(--jmg-transition);
}

#colophon .site-info a:hover,
#colophon .site-info a:focus-visible {
	color: var(--jmg-or);
	border-bottom-color: var(--jmg-or);
}

/* --------------------------------------------------------------------------
   Adaptations
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	#colophon .footer-menu-container > ul.jmg-colophon {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: var(--jmg-e-6);
	}
}

@media (max-width: 782px) {
	/* En dessous de deux colonnes de menu, la signature reprend sa place
	   naturelle : au-dessus, plutôt que compressée dans une colonne étroite. */
	#colophon .footer-navigation-inner {
		flex-direction: column;
		gap: var(--jmg-e-6);
	}

	.jmg-citation-pied {
		width: 100%;
		text-align: center;
	}

	.jmg-citation-pied__logo {
		margin-inline: auto;
	}

	.jmg-citation-pied__texte {
		text-align: center;
	}
}

@media (max-width: 600px) {
	#colophon .footer-menu-container > ul.jmg-colophon {
		grid-template-columns: 1fr;
	}

	#colophon .site-middle-footer-inner-wrap {
		padding-top: var(--jmg-e-7);
	}
}

@media (prefers-reduced-motion: reduce) {
	#colophon .jmg-colophon .sub-menu a {
		transition: none;
	}
}

.site-branding a,
.header-navigation .header-menu-container > ul > li > a {
	color: var(--jmg-texte);
	font-family: var(--jmg-corps);
	font-size: var(--jmg-t-sm);
	letter-spacing: 0.03em;
}

.header-navigation .header-menu-container > ul > li > a:hover,
.header-navigation .header-menu-container > ul > li.current-menu-item > a {
	color: var(--jmg-or);
}

/*
 * La barre de navigation porte une entrée de plus depuis l'ajout du Panier, et
 * le conteneur de l'en-tête est plafonné à la largeur du site : au réglage
 * d'origine elle passait sur deux lignes en dessous de 1150px environ. La
 * place se prend sur l'espacement et sur le logo, jamais sur la taille du
 * texte, qui ne se négocie pas ici.
 *
 * Rien ne s'applique sous 1025px : Kadence y bascule sur le menu déroulant,
 * qui n'a pas cette contrainte, et le logo doit y rester grand.
 */
@media (min-width: 1025px) {
	/* Le retrait vient du CSS inline de Kadence, sur ce sélecteur exact : il
	   faut le reprendre tel quel pour le surcharger. 6px de part et d'autre
	   laisse 12px entre deux cibles, au-dessus du plancher de 8px du système. */
	.main-navigation .primary-menu-container > ul > li.menu-item > a {
		padding-left: 6px;
		padding-right: 6px;
	}

	/*
	 * Le logo rend de la largeur là où elle manque et la reprend dès qu'elle
	 * revient : 115px à 1025px, 200px à partir de 1280px, une progression
	 * continue entre les deux. Un palier franc se verrait au redimensionnement,
	 * et une valeur basse fixée pour tous les écrans amoindrirait la marque
	 * partout pour résoudre un problème qui n'existe que sur 255px de plage.
	 */
	.site-branding .custom-logo {
		max-width: clamp(115px, calc(115px + (100vw - 1025px) * 0.333), 200px);
	}

	/*
	 * Filet d'or entre les entrées. Sans lui, l'espace qui sépare deux entrées
	 * (12px) est à peine plus grand que celui qui sépare deux mots d'une même
	 * entrée (environ 5px) : « Envoyer un manuscrit » et « La maison » se
	 * lisent comme une seule suite de mots. Le trait rend la frontière
	 * explicite sans rien coûter en largeur, étant posé en absolu dans
	 * l'espace qui existe déjà.
	 *
	 * Il reprend la signature du site : un dégradé qui s'éteint aux deux
	 * extrémités plutôt qu'un trait sec, et l'or-doux, la valeur réservée aux
	 * ornements. Il ne porte aucune information, aucun contraste ne lui est
	 * donc imposé, mais il doit rester perceptible.
	 */
	.main-navigation .primary-menu-container > ul > li.menu-item {
		position: relative;
	}

	.main-navigation .primary-menu-container > ul > li.menu-item + li.menu-item::before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 1px;
		height: 1.4em;
		background-image: linear-gradient(
			to bottom,
			transparent,
			var(--jmg-or-doux) 25%,
			var(--jmg-or-doux) 75%,
			transparent
		);
		pointer-events: none;
	}

	/* Les sous-menus déroulants sont des listes à part, posées sous l'entrée :
	   le filet y séparerait des lignes empilées, ce qui n'a pas de sens. */
	.main-navigation .primary-menu-container > ul > li.menu-item ul li::before {
		display: none;
	}
}

/* ==========================================================================
   Panneau du catalogue — les rubriques de l'ancien site sous « Les livres »
   --------------------------------------------------------------------------
   L'arborescence vient de inc/navigation.php, qui pose la classe jmg-megamenu
   sur l'entrée du catalogue. Le déroulant y compte deux niveaux — les
   rubriques (jmg-menu-rubrique) et leurs sous-rubriques — plus trois entrées
   d'un autre ordre : la vitrine (jmg-menu-vitrine) et les deux sorties du pied
   de panneau (jmg-menu-catalogue, jmg-menu-auteurs).

   Un déroulant classique le rendrait en cascade — survoler « Mystères » pour
   voir « Hantises » — ce qui demande de tenir un cap au trackpad et perd la
   moitié des visiteurs de ce site. Le panneau montre tout d'un coup : chaque
   rubrique fait titre de colonne, ses sous-rubriques sont posées dessous, et
   plus rien ne se survole. C'est aussi la lecture d'un sommaire d'ouvrage,
   qu'aucun lecteur n'a besoin qu'on lui explique.

   La première version rangeait les rubriques dans une grille de trois colonnes
   sur deux rangs. Une grille aligne ses rangées : chacune prenait la hauteur de
   sa colonne la plus haute — sept lignes pour « Survie et paranormal », trois
   pour « Miracles » — et le panneau se creusait d'un trou sous chaque rubrique
   courte, jusqu'à mille pixels de haut pour une trentaine de liens. Le sommaire
   coule donc désormais en colonnes de texte : les rubriques s'y suivent sans
   rangée commune, le navigateur équilibre les hauteurs, et il ne reste aucun
   vide. C'est la seule mise en page qui le garantisse — une grille ne sait pas
   décaler ses cases, et les grilles en maçonnerie ne sont pas encore là.

   Rien de tout cela ne s'applique sous 1025px : Kadence y bascule sur le
   panneau mobile, où la hauteur est la ressource rare et où le dépliage repli-
   able de Kadence reste le bon geste.
   ========================================================================== */

@media (min-width: 1025px) {
	/*
	 * Le panneau fait toute la largeur du sommaire, là où l'entrée qui l'ouvre
	 * ne fait qu'une centaine de pixels : ancré sur elle, il déborderait à
	 * gauche comme à droite selon la largeur de l'écran. Il s'ancre donc sur la
	 * barre de navigation entière et se cale sur son bord droit, qui est aussi
	 * celui du conteneur du site. Il reste ainsi dans l'écran quoi qu'il
	 * arrive, sans dépendre de la détection de débordement de Kadence.
	 */
	.main-navigation.header-navigation {
		position: relative;
	}

	.main-navigation .primary-menu-container > ul > li.menu-item.jmg-megamenu {
		position: static;
	}

	/*
	 * Le panneau n'existe qu'ouvert : fermé, il reste le display:none de
	 * Kadence. Les trois états d'ouverture (survol, clavier, tactile) sont
	 * repris tels quels pour que la mise en page les remplace tous.
	 *
	 * Trois colonnes, dimensionnées pour que le plus long nom de rubrique —
	 * « Miracles et spiritualité » en capitales — tienne sur une ligne : c'est
	 * ce qui remet les filets d'or au même niveau, là où la version précédente
	 * devait imposer aux titres une hauteur de deux lignes pour rattraper le
	 * décalage, sans y parvenir.
	 *
	 * La réserve de droite est la place de la vitrine, qui est posée par-dessus
	 * plutôt que dans le flux : une colonne de texte ne se laisse pas
	 * interrompre par un bloc d'une autre nature. Sans ouvrage mis en avant,
	 * inc/navigation.php n'ajoute pas l'entrée et la réserve tombe à zéro,
	 * plutôt que de laisser un quart de panneau vide.
	 */
	.main-navigation .primary-menu-container li.jmg-megamenu:hover > ul.sub-menu,
	.main-navigation .primary-menu-container li.jmg-megamenu:focus-within > ul.sub-menu,
	.main-navigation .primary-menu-container li.jmg-megamenu.menu-item--toggled-on > ul.sub-menu {
		--jmg-mega-vitrine: 11rem;
		--jmg-mega-reserve: 0px;

		display: block;
		column-count: 3;
		column-gap: var(--jmg-e-6);
		left: auto;
		right: 0;
		width: min(72rem, calc(100vw - 3rem));
		padding: var(--jmg-e-5) calc(var(--jmg-e-6) + var(--jmg-mega-reserve)) var(--jmg-e-5) var(--jmg-e-6);
	}

	.main-navigation .primary-menu-container li.jmg-megamenu:hover > ul.sub-menu:has(> li.jmg-menu-vitrine),
	.main-navigation .primary-menu-container li.jmg-megamenu:focus-within > ul.sub-menu:has(> li.jmg-menu-vitrine),
	.main-navigation .primary-menu-container li.jmg-megamenu.menu-item--toggled-on > ul.sub-menu:has(> li.jmg-menu-vitrine) {
		/* La colonne de la vitrine, plus la gouttière qui la sépare du sommaire. */
		--jmg-mega-reserve: calc(var(--jmg-mega-vitrine) + var(--jmg-e-6));

		/* La vitrine ne pesant pas dans le flux, elle ne pousse pas le panneau :
		   un sommaire très court le laisserait plus haut qu'elle. Sa hauteur
		   propre — couverture, titre, auteur — tient sous vingt-quatre rems. */
		min-height: 24rem;
	}

	/* Les bordures que le header pose entre les lignes d'un déroulant
	   ordinaire n'ont plus de sens ici : elles souligneraient chaque entrée
	   d'un sommaire. */
	.main-navigation .primary-menu-container li.jmg-megamenu ul.sub-menu li.menu-item {
		border-bottom: 0;
	}

	/* Une rubrique et ses sous-rubriques ne se coupent jamais d'une colonne à
	   l'autre : un titre en bas d'une colonne et sa liste en haut de la
	   suivante, c'est le désordre que le sommaire vient corriger. */
	.main-navigation .primary-menu-container li.jmg-megamenu ul.sub-menu > li.jmg-menu-rubrique {
		break-inside: avoid;
		margin-bottom: var(--jmg-e-5);
	}

	/* Le second niveau est posé sous son titre de rubrique, pas en volet
	   surgissant sur le côté. */
	.main-navigation .primary-menu-container li.jmg-megamenu ul.sub-menu ul.sub-menu {
		display: block;
		position: static;
		width: auto;
		min-height: 0;
		margin-top: var(--jmg-e-2);
		padding: 0;
		background: transparent;
		border: 0;
		box-shadow: none;
	}

	/* Plus rien ne se déplie : la flèche annoncerait un geste qui n'existe pas.
	   Celle de « Les livres », elle, reste en place. Kadence en pose deux sortes
	   selon la profondeur — dropdown-nav-toggle et dropdown-nav-special-toggle —
	   et il faut les viser toutes les deux : la seconde, laissée en place,
	   flotte à droite du titre de rubrique et lui prend soixante-dix pixels,
	   assez pour renvoyer « Miracles et spiritualité » sur une seconde ligne. */
	.main-navigation .primary-menu-container li.jmg-megamenu ul.sub-menu .dropdown-nav-toggle,
	.main-navigation .primary-menu-container li.jmg-megamenu ul.sub-menu .dropdown-nav-special-toggle {
		display: none;
	}

	/*
	 * Titre de rubrique. Le nom reste un lien — il l'était sur l'ancien site,
	 * et c'est le seul chemin vers le rayon entier — mais il se lit d'abord
	 * comme un intitulé : capitales espacées, filet d'or dessous, la même
	 * signature que les titres de section du site.
	 */
	.main-navigation .primary-menu-container li.jmg-megamenu ul.sub-menu > li.jmg-menu-rubrique > a {
		display: block;
		/* Kadence donne aux liens d'un déroulant la largeur fixe réglée dans le
		   personnalisateur — 200px ici. Elle a un sens pour une liste étroite,
		   aucun dans un sommaire dont les colonnes sont plus larges : le titre
		   s'y replierait sur deux lignes au milieu d'une colonne à moitié vide. */
		width: auto;
		padding: 0 0 var(--jmg-e-2);
		border-bottom: 1px solid var(--jmg-or-doux);
		color: var(--jmg-or);
		font-family: var(--jmg-corps);
		font-size: var(--jmg-t-xs);
		font-weight: 600;
		/* Assez d'espacement pour que le titre se lise comme un intitulé, assez
		   peu pour que « Miracles et spiritualité », le plus long du catalogue,
		   tienne sur une ligne dans une colonne du sommaire. */
		letter-spacing: 0.03em;
		line-height: 1.3;
		text-transform: uppercase;
	}

	.main-navigation .primary-menu-container li.jmg-megamenu ul.sub-menu > li.jmg-menu-rubrique > a:hover,
	.main-navigation .primary-menu-container li.jmg-megamenu ul.sub-menu > li.jmg-menu-rubrique.current-menu-item > a,
	.main-navigation .primary-menu-container li.jmg-megamenu ul.sub-menu > li.jmg-menu-rubrique.current-menu-parent > a {
		color: var(--jmg-or-fort);
		background: transparent;
	}

	/*
	 * Les sous-rubriques sont des lignes de liste ordinaires. Leur corps ne
	 * bouge pas — 17px, le plancher du site n'admet rien en dessous — mais
	 * l'interligne se resserre : c'est un sommaire qu'on parcourt du regard,
	 * pas un texte qu'on lit. La cible reste confortable à la souris, seul
	 * dispositif au-dessus de 1025px ; au doigt, c'est le panneau mobile qui
	 * s'affiche, avec ses lignes pleine largeur.
	 */
	.main-navigation .primary-menu-container li.jmg-megamenu ul.sub-menu ul.sub-menu > li.menu-item > a {
		display: block;
		width: auto;
		padding: var(--jmg-e-1) 0;
		color: var(--jmg-texte);
		font-size: var(--jmg-t-sm);
		line-height: 1.45;
	}

	.main-navigation .primary-menu-container li.jmg-megamenu ul.sub-menu ul.sub-menu > li.menu-item > a:hover {
		color: var(--jmg-or-fort);
		background: transparent;
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}

	/*
	 * L'ouvrage en vitrine, dans la réserve de droite. Le sommaire dit ce que
	 * la maison range, la couverture dit ce qu'elle publie : sans elle, le
	 * panneau d'un éditeur ne se distingue pas de la liste de catégories d'une
	 * boutique.
	 */
	.main-navigation .primary-menu-container li.jmg-megamenu ul.sub-menu > li.jmg-menu-vitrine {
		position: absolute;
		top: var(--jmg-e-5);
		right: var(--jmg-e-6);
		width: var(--jmg-mega-vitrine);
	}

	.main-navigation .primary-menu-container li.jmg-megamenu ul.sub-menu > li.jmg-menu-vitrine > a {
		display: block;
		padding: var(--jmg-e-3);
		background: var(--jmg-fond-eleve);
		border: 1px solid var(--jmg-bordure);
		text-align: center;
	}

	.main-navigation .primary-menu-container li.jmg-megamenu ul.sub-menu > li.jmg-menu-vitrine > a:hover {
		background: var(--jmg-fond-carte);
		border-color: var(--jmg-bordure-forte);
	}

	.jmg-vitrine__etiquette {
		display: block;
		margin-bottom: var(--jmg-e-2);
		color: var(--jmg-or);
		font-size: var(--jmg-t-xs);
		font-weight: 600;
		letter-spacing: 0.04em;
		text-transform: uppercase;
	}

	/* Le socle est posé même sans couverture : les fiches reprises de l'ancien
	   site n'ont pas toutes la leur, et la carte s'affaisserait sur son titre. */
	.jmg-vitrine__socle {
		display: block;
		margin-bottom: var(--jmg-e-3);
	}

	.jmg-vitrine__couverture {
		display: block;
		width: auto;
		max-width: 100%;
		height: auto;
		max-height: 10rem;
		margin: 0 auto;
	}

	.jmg-vitrine__titre {
		display: block;
		color: var(--jmg-texte);
		font-family: var(--jmg-titre);
		font-size: var(--jmg-t-sm);
		line-height: 1.3;
	}

	.jmg-vitrine__auteur {
		display: block;
		margin-top: var(--jmg-e-1);
		color: var(--jmg-texte-doux);
		font-size: var(--jmg-t-xs);
	}

	/*
	 * Le pied du panneau ferme le sommaire sur toute sa largeur, réserve de la
	 * vitrine exceptée. Le panneau ne montre qu'une partie des rubriques : le
	 * visiteur qui n'a rien reconnu doit pouvoir sortir par le haut plutôt que
	 * refermer le menu — vers le catalogue entier, ou vers les auteurs, par où
	 * se cherche presque toujours un ouvrage dont on ignore le rayon.
	 *
	 * « Tout le catalogue » interrompt les colonnes et porte le filet ; « Les
	 * auteurs » se pose à l'autre bout de ce filet, hors du flux, une colonne
	 * de texte n'ayant pas de bord droit sur lequel aligner quoi que ce soit.
	 */
	.main-navigation .primary-menu-container li.jmg-megamenu ul.sub-menu > li.jmg-menu-catalogue {
		column-span: all;
		padding-top: var(--jmg-e-3);
		border-top: 1px solid var(--jmg-bordure);
	}

	.main-navigation .primary-menu-container li.jmg-megamenu ul.sub-menu > li.jmg-menu-auteurs {
		position: absolute;
		right: calc(var(--jmg-e-6) + var(--jmg-mega-reserve));
		bottom: var(--jmg-e-5);
	}

	.main-navigation .primary-menu-container li.jmg-megamenu ul.sub-menu > li.jmg-menu-catalogue > a,
	.main-navigation .primary-menu-container li.jmg-megamenu ul.sub-menu > li.jmg-menu-auteurs > a {
		display: inline-block;
		padding: 0;
		color: var(--jmg-or);
		font-size: var(--jmg-t-sm);
		font-weight: 600;
	}

	.main-navigation .primary-menu-container li.jmg-megamenu ul.sub-menu > li.jmg-menu-catalogue > a:hover,
	.main-navigation .primary-menu-container li.jmg-megamenu ul.sub-menu > li.jmg-menu-auteurs > a:hover {
		color: var(--jmg-or-fort);
		background: transparent;
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}
}

/*
 * Panneau mobile. Les rubriques y gardent leur rôle d'intitulé, mais le second
 * niveau reste replié derrière le bouton de Kadence : déplié d'office, le
 * catalogue à lui seul ferait une trentaine de lignes à faire défiler avant
 * d'atteindre « Les auteurs ».
 */
.mobile-navigation .jmg-menu-rubrique > .drawer-nav-drop-wrap > a,
.mobile-navigation .jmg-menu-rubrique > a {
	/* L'or du site est fait pour du texte sombre sur papier clair : posé sur le
	   fond du panneau mobile, qui lui est resté sombre, il tombe à 3:1. C'est
	   l'or vif, réservé ailleurs aux fonds de bouton, qui tient ici la charte
	   sans descendre sous les 7:1 que le site s'impose. */
	color: var(--jmg-or-vif);
	font-weight: 600;
}

.mobile-navigation .jmg-menu-catalogue > a {
	font-weight: 600;
}

/*
 * La vitrine et la seconde sortie ne suivent pas dans le panneau mobile. La
 * couverture y coûterait un écran de défilement à elle seule, pour une mise en
 * avant que la page d'accueil porte déjà ; « Les auteurs » y est redondant,
 * l'entrée de premier niveau du même nom étant visible dans le même panneau,
 * à quelques lignes de là. Sur le panneau desktop, aucune des deux n'est dans
 * ce cas : la place y est horizontale, et l'entrée des auteurs est hors de la
 * ligne de regard une fois le déroulant ouvert.
 */
.mobile-navigation .jmg-menu-vitrine,
.mobile-navigation .jmg-menu-auteurs {
	display: none;
}

/*
 * Page courante. La règle du header colore l'entrée active en or du site,
 * pensé pour du texte sombre sur papier clair ; dans le panneau mobile, resté
 * sombre, elle tombait à 3:1 — c'est-à-dire que l'entrée signalant où l'on se
 * trouve était la moins lisible du panneau. Même correction que pour les
 * rubriques, appliquée à tous les niveaux.
 */
.mobile-navigation ul li.menu-item.current-menu-item > a,
.mobile-navigation ul li.menu-item.current-menu-item > .drawer-nav-drop-wrap,
.mobile-navigation ul li.menu-item.current-menu-item > .drawer-nav-drop-wrap > a {
	color: var(--jmg-or-vif);
}

/* --------------------------------------------------------------------------
   Frontispice — bandeau de titre des pages et archives (Kadence)

   Le bandeau ne se lit plus comme une boîte grise posée sur la page mais
   comme la page de titre d'un ouvrage : papier vergé, filet typographique
   interrompu par un point d'or.

   En passant au clair, la métaphore change de source lumineuse. La lueur de
   bougie montant du bas n'a plus de sens sur du papier : le bandeau se lit
   maintenant comme une feuille éclairée par le haut, qui s'assombrit vers la
   pliure. Le halo d'or subsiste en bas, très atténué, comme une dorure sur
   tranche.
   -------------------------------------------------------------------------- */

.entry-hero-container-inner {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--jmg-fond);
	background-image:
		radial-gradient(ellipse 68% 130% at 50% 118%, rgba(201, 162, 39, 0.16), transparent 68%),
		linear-gradient(180deg, var(--jmg-fond-carte) 0%, var(--jmg-fond-eleve) 100%);
	border-bottom: 1px solid var(--jmg-bordure);
}

/* Kadence emboîte un « .hero-container.site-container » (1200px, centré) dans
   le bandeau. La règle générale plus haut lui pose un background-color opaque,
   qui découpait le dégradé du hero en trois : deux bandes vives sur les marges
   et un aplat mort au centre. Le conteneur redevient transparent pour que la
   lumière du hero traverse toute la largeur. */
.entry-hero .hero-container,
.entry-hero .hero-container.site-container,
.entry-hero-container-inner > .site-container {
	background-color: transparent;
}

/* Papier vergé : rainures verticales très faibles, effacées sur les bords.
   Sur fond clair, les rainures se creusent au lieu de s'éclairer. */
.entry-hero-container-inner::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: repeating-linear-gradient(
		90deg,
		rgba(26, 28, 36, 0.045) 0 1px,
		transparent 1px 10px
	);
	-webkit-mask-image: radial-gradient(ellipse 58% 120% at 50% 60%, #000 0%, transparent 78%);
	mask-image: radial-gradient(ellipse 58% 120% at 50% 60%, #000 0%, transparent 78%);
}

/* Dorure de pied de page : filet d'or qui s'éteint vers les marges. */
.entry-hero-container-inner::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 1px;
	pointer-events: none;
	background-image: linear-gradient(
		90deg,
		transparent 0%,
		var(--jmg-or-doux) 18%,
		var(--jmg-or) 50%,
		var(--jmg-or-doux) 82%,
		transparent 100%
	);
	/* 0.6 suffisait sur fond sombre, où l'or ressortait de lui-même. Sur
	   crème, l'écart de clarté est bien plus faible : sous 0.85 le filet
	   disparaît. */
	opacity: 0.85;
}

/* L'en-tête ne porte plus de fond : la boîte dans la boîte disparaît. */
.entry-hero .entry-header,
.entry-hero[class*="-hero-section"] .entry-header {
	background: transparent;
	border: 0;
	padding-block: clamp(3.25rem, 7vw, 6rem) clamp(2.75rem, 6vw, 5rem);
	text-align: center;
}

.entry-hero .entry-header > * {
	margin-inline: auto;
}

/* Les pages sortent un h1.entry-title, les archives (dont la boutique
   WooCommerce) un h1.page-title — et Kadence pose aussi « page-title » sur
   le <header> lui-même. On vise donc le h1, pas les classes de titre. */
.entry-hero .entry-header h1 {
	max-width: 22ch;
	margin-block: 0;
	font-family: var(--jmg-titre);
	font-size: clamp(2.375rem, 1.7rem + 3.1vw, 4rem);
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

/* Signature : filet typographique interrompu par un point d'or. */
.entry-hero .entry-header h1::after {
	content: "";
	display: block;
	width: min(280px, 46%);
	height: 7px;
	margin: clamp(1.25rem, 2.2vw, 1.875rem) auto 0;
	background-image:
		linear-gradient(90deg, transparent, var(--jmg-or-doux)),
		radial-gradient(circle at 50% 50%, var(--jmg-or) 0 2.5px, transparent 3px),
		linear-gradient(90deg, var(--jmg-or-doux), transparent);
	background-size: calc(50% - 13px) 1px, 26px 100%, calc(50% - 13px) 1px;
	background-position: 0 50%, 50% 50%, 100% 50%;
	background-repeat: no-repeat;
}

/*
 * Fil d'Ariane, au-dessus du titre. Les petites capitales à 11px lettrées
 * à 0.16em ont sauté : c'est de la navigation, elle se lit en casse normale.
 * La couleur remonte de --jmg-texte-discret à --jmg-texte-doux, pour la
 * même raison.
 */
.entry-hero .kadence-breadcrumbs,
.entry-hero .woocommerce-breadcrumb {
	margin-block: 0 var(--jmg-e-4);
	font-size: var(--jmg-t-sm);
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--jmg-texte-doux);
}

.entry-hero .archive-description,
.entry-hero .taxonomy-description,
.entry-hero .entry-taxonomies {
	max-width: 58ch;
	margin-block: var(--jmg-e-4) 0;
	color: var(--jmg-texte-doux);
}

.entry-hero .archive-description p,
.entry-hero .taxonomy-description p {
	margin-inline: auto;
}

@media (max-width: 640px) {
	.entry-hero .entry-header h1 {
		max-width: none;
	}

	.entry-hero .entry-header h1::after {
		width: min(200px, 60%);
	}
}

.kadence-breadcrumbs,
.woocommerce-breadcrumb {
	font-size: var(--jmg-t-xs);
	color: var(--jmg-texte-discret);
	letter-spacing: 0.02em;
}

.kadence-breadcrumbs a,
.woocommerce-breadcrumb a {
	color: var(--jmg-texte-doux);
	text-decoration: none;
}

.kadence-breadcrumbs a:hover,
.woocommerce-breadcrumb a:hover {
	color: var(--jmg-or);
}

/* Cartes produits */
.woocommerce ul.products li.product,
.wc-block-grid__product {
	background-color: var(--jmg-fond-carte);
	border: 1px solid var(--jmg-bordure);
	border-radius: var(--jmg-rayon-lg);
	overflow: hidden;
	transition: border-color var(--jmg-transition);
}

.woocommerce ul.products li.product:hover,
.wc-block-grid__product:hover {
	border-color: var(--jmg-or-doux);
}

/* Même règle pour les boucles WooCommerce : la couverture entre en entier
   dans une boîte au format livre, sans rognage. */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img.attachment-woocommerce_thumbnail,
.wc-block-grid__product-image img,
.wc-block-product-template img,
.wp-block-woocommerce-product-image img {
	width: 100%;
	aspect-ratio: 5 / 7;
	object-fit: contain;
	object-position: center;
}

/* WooCommerce pose « opacity: 0 » en attribut sur la galerie et compte sur un
   script jQuery pour la révéler. Le site ne charge pas jQuery : sans cette
   règle, la couverture de la fiche produit reste invisible. Le !important est
   la seule façon de battre un style en attribut. */
.woocommerce div.product .woocommerce-product-gallery {
	opacity: 1 !important;
}

/* La fiche produit et sa galerie montrent la couverture à son format réel :
   aucune boîte imposée, donc aucune coupe. */
.woocommerce div.product div.images img,
.woocommerce div.product div.images .flex-control-thumbs img {
	aspect-ratio: auto;
	object-fit: contain;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--jmg-titre);
	font-size: var(--jmg-t-base);
	color: var(--jmg-texte);
	line-height: 1.3;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price {
	color: var(--jmg-or);
	font-family: var(--jmg-corps);
	font-weight: 600;
}

.woocommerce div.product .product_title {
	font-family: var(--jmg-titre);
}

/* Formulaires WooCommerce et WordPress */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="file"],
select,
textarea {
	width: 100%;
	padding: 0.75em 0.9em;
	min-height: var(--jmg-cible);
	background-color: var(--jmg-fond-carte);
	color: var(--jmg-texte);
	/* 2px et non 1 : la limite d'un champ est un élément d'interface, elle
	   doit se voir. La teinte tient les 3:1 de WCAG 1.4.11. */
	border: 2px solid var(--jmg-bordure);
	border-radius: var(--jmg-rayon);
	transition: border-color var(--jmg-transition);
}

textarea {
	min-height: calc(var(--jmg-cible) * 3);
}

/*
 * Le placeholder ne remplace jamais une étiquette : il disparaît à la
 * saisie, et c'est la personne qui écrit lentement qui en aurait le plus
 * besoin. Il reste un exemple de saisie, d'où la teinte en retrait, qui
 * garde tout de même ses 5.53:1.
 */
input::placeholder,
textarea::placeholder {
	color: var(--jmg-texte-discret);
	opacity: 1;
}

/*
 * L'ancienne règle coupait l'outline et ne laissait qu'un changement de
 * couleur de bordure d'1px pour signaler le focus. Insuffisant au regard du
 * RGAA 10.7, et proprement invisible pour l'œil qu'on vise ici. Le champ
 * reçoit le même anneau que le reste du site, et sa bordure s'assombrit en
 * plus.
 */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	border-color: var(--jmg-or);
	outline: 3px solid var(--jmg-or);
	outline-offset: 2px;
}

/* Repli pour les navigateurs sans :focus-visible sur les champs, où :focus
   fait le même office : la règle ci-dessus le remplace dès qu'il est lu. */
input:focus,
select:focus,
textarea:focus {
	border-color: var(--jmg-or);
}

/* ==========================================================================
   5b. Mise en page
   ========================================================================== */

.jmg-conteneur {
	width: 100%;
	max-width: var(--jmg-largeur);
	margin-inline: auto;
	padding-inline: var(--jmg-e-5);
}

.jmg-conteneur--etroit {
	max-width: 800px;
}

.jmg-hero {
	position: relative;
	padding-block: var(--jmg-e-8) var(--jmg-e-7);
	border-bottom: 1px solid var(--jmg-bordure);
	margin-block: 0 var(--jmg-e-7);
}

/* Repère de positionnement du cachet (jmg_cachet_maison()) pour les
   frontispices secondaires. Deux gabarits coexistent : .jmg-hero porte
   directement le titre (nouveautés, numéros, index des auteurs), ou
   enveloppe une colonne étroite qui le porte (abonnement, manuscrit). Le
   cachet s'ancre au plus proche des deux, jamais au conteneur pleine largeur
   qui l'entoure parfois, sous peine de dériver loin du titre sur un grand
   écran. */
.jmg-hero > .jmg-conteneur--etroit {
	position: relative;
}

.jmg-hero .jmg-chapeau {
	max-width: 62ch;
}

.jmg-bloc-texte {
	margin-block: 0 var(--jmg-e-7);
}

.jmg-bloc-formulaire {
	padding-block: var(--jmg-e-7) var(--jmg-e-9);
	border-top: 1px solid var(--jmg-bordure);
}

.jmg-etapes {
	counter-reset: jmg-etape;
	list-style: none;
	padding: 0;
	margin: 0;
	max-width: var(--jmg-largeur-texte);
}

.jmg-etapes li {
	counter-increment: jmg-etape;
	position: relative;
	padding-left: 3rem;
	margin-block: 0 var(--jmg-e-4);
	color: var(--jmg-texte-doux);
}

.jmg-etapes li::before {
	content: counter( jmg-etape );
	position: absolute;
	left: 0;
	top: 0.1em;
	/* min- plutôt que width/height fixes : la pastille doit pouvoir grandir
	   si l'utilisateur force l'espacement du texte (WCAG 1.4.12). */
	min-width: 2.25rem;
	min-height: 2.25rem;
	display: grid;
	place-items: center;
	border: 2px solid var(--jmg-or-doux);
	border-radius: 50%;
	font-family: var(--jmg-titre);
	font-size: var(--jmg-t-sm);
	color: var(--jmg-or);
	line-height: 1;
}

@media (max-width: 640px) {
	.jmg-hero {
		padding-block: var(--jmg-e-6) var(--jmg-e-5);
		margin-block: 0 var(--jmg-e-6);
	}

	.jmg-conteneur {
		padding-inline: var(--jmg-e-4);
	}
}

/* ==========================================================================
   5c. Fiche ouvrage
   ========================================================================== */

.jmg-fiche__auteurs {
	font-size: var(--jmg-t-lg);
	color: var(--jmg-texte-doux);
	margin-block: 0 var(--jmg-e-4);
}

.jmg-fiche__auteurs a {
	color: var(--jmg-or);
}

.jmg-fiche__biblio {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--jmg-e-2) var(--jmg-e-5);
	margin-block: var(--jmg-e-5);
	padding-block: var(--jmg-e-5);
	border-block: 1px solid var(--jmg-bordure);
	font-size: var(--jmg-t-sm);
}

.jmg-fiche__biblio dt {
	color: var(--jmg-texte-discret);
	white-space: nowrap;
}

.jmg-fiche__biblio dd {
	margin: 0;
	color: var(--jmg-texte);
}

.jmg-fiche__extrait {
	margin-block: var(--jmg-e-5) 0;
}

.jmg-section {
	margin-block: var(--jmg-e-8) 0;
	padding-block: var(--jmg-e-7) 0;
	border-top: 1px solid var(--jmg-bordure);
}

.jmg-section h2 {
	font-size: var(--jmg-t-h3);
	margin-block: 0 var(--jmg-e-5);
}

.jmg-section__lien {
	margin-block: var(--jmg-e-5) 0;
	font-size: var(--jmg-t-sm);
}

.jmg-grille-livres {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--jmg-e-5);
	list-style: none;
	padding: 0;
	margin: 0;
}

.jmg-carte {
	display: flex;
	flex-direction: column;
	gap: var(--jmg-e-2);
}

.jmg-carte__lien {
	display: block;
	text-decoration: none;
	color: inherit;
}

/* Les couvertures ne sont jamais rognées : une couverture coupée fait perdre
   le titre et le nom de l'auteur, qui sont l'essentiel de l'information. On
   réserve une boîte au format livre (5/7) et l'image s'y inscrit en entier ;
   les formats atypiques (revues, albums) laissent une marge sur les côtés
   plutôt que d'être tronqués. */
.jmg-carte__image {
	width: 100%;
	aspect-ratio: 5 / 7;
	object-fit: contain;
	border: 1px solid var(--jmg-bordure);
	border-radius: var(--jmg-rayon);
	margin-block: 0 var(--jmg-e-3);
	transition: border-color var(--jmg-transition);
}

.jmg-carte__lien:hover .jmg-carte__image {
	border-color: var(--jmg-or-doux);
}

/* Mention d'action de la carte : casse normale, c'est ce sur quoi on clique. */
.jmg-carte__fiche {
	display: block;
	font-family: var(--jmg-corps);
	font-size: var(--jmg-t-sm);
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--jmg-or);
	margin-block: 0 0.3rem;
}

.jmg-carte__titre {
	display: block;
	font-family: var(--jmg-titre);
	font-size: var(--jmg-t-base);
	line-height: 1.35;
	color: var(--jmg-texte);
}

.jmg-carte__lien:hover .jmg-carte__titre {
	color: var(--jmg-or);
}

.jmg-carte__prix {
	font-size: var(--jmg-t-sm);
	font-weight: 600;
	color: var(--jmg-or);
}

@media (max-width: 900px) {
	.jmg-grille-livres {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 640px) {
	.jmg-grille-livres {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--jmg-e-4);
	}

	.jmg-fiche__biblio {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.jmg-fiche__biblio dt {
		margin-top: var(--jmg-e-3);
	}

	.jmg-section {
		margin-block: var(--jmg-e-7) 0;
		padding-block: var(--jmg-e-6) 0;
	}
}

/* ==========================================================================
   5d. Catalogue et pages thème
   ========================================================================== */

.jmg-boucle__auteur {
	font-size: var(--jmg-t-sm);
	color: var(--jmg-texte-discret);
	margin-block: 0 var(--jmg-e-2);
}

.jmg-filtres {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--jmg-e-4);
	width: 100%;
	padding-block: var(--jmg-e-5);
	margin-block: 0 var(--jmg-e-5);
	border-block: 1px solid var(--jmg-bordure);
}

.jmg-filtres__champ {
	display: flex;
	flex-direction: column;
	gap: var(--jmg-e-2);
	min-width: 200px;
	flex: 1 1 200px;
}

/* Étiquette de champ : casse normale et pleine encre. Une étiquette de
   formulaire n'est pas un ornement. */
.jmg-filtres__label {
	font-size: var(--jmg-t-sm);
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--jmg-texte);
}

.jmg-filtres select {
	background-color: var(--jmg-fond-carte);
	border-color: var(--jmg-bordure);
}

.jmg-filtres__reset {
	font-size: var(--jmg-t-sm);
	color: var(--jmg-texte-doux);
	padding-block: 0.75em;
	white-space: nowrap;
}

.jmg-theme__texte {
	max-width: var(--jmg-largeur-texte);
}

.jmg-theme__texte h2,
.jmg-theme__texte h3 {
	font-size: var(--jmg-t-h3);
}

@media (max-width: 640px) {
	.jmg-filtres {
		gap: var(--jmg-e-3);
	}

	.jmg-filtres__champ {
		min-width: 100%;
	}
}

/* ==========================================================================
   5e. Auteurs
   ========================================================================== */

.jmg-auteur__entete {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: var(--jmg-e-7);
	align-items: start;
	padding-block: var(--jmg-e-8) var(--jmg-e-6);
}

/* Sans portrait, la colonne de gauche laisserait un vide de 260 px. */
.jmg-auteur__entete--sans-portrait {
	grid-template-columns: 1fr;
	max-width: var(--jmg-largeur-texte);
}

.jmg-auteur__image {
	width: 100%;
	border-radius: var(--jmg-rayon-lg);
	border: 1px solid var(--jmg-bordure);
}

.jmg-auteur__dates,
.jmg-auteur__pseudo {
	font-size: var(--jmg-t-sm);
	color: var(--jmg-texte-discret);
	margin-block: 0 var(--jmg-e-2);
}

.jmg-auteur__bio {
	max-width: var(--jmg-largeur-texte);
	margin-block: 0 var(--jmg-e-6);
}

.jmg-liens {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--jmg-e-5);
}

.jmg-auteurs-liste {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--jmg-e-4);
	list-style: none;
	padding: 0;
	margin-block: 0 var(--jmg-e-9);
}

.jmg-auteurs-liste__lien {
	display: flex;
	align-items: center;
	gap: var(--jmg-e-4);
	padding: var(--jmg-e-4);
	border: 1px solid var(--jmg-bordure);
	border-radius: var(--jmg-rayon-lg);
	text-decoration: none;
	color: inherit;
	transition: border-color var(--jmg-transition), background-color var(--jmg-transition);
}

.jmg-auteurs-liste__lien:hover {
	border-color: var(--jmg-or-fort);
	background-color: var(--jmg-fond-carte);
}

.jmg-auteurs-liste__portrait,
.jmg-auteurs-liste__initiale {
	width: 64px;
	height: 64px;
	flex-shrink: 0;
	border-radius: 50%;
	object-fit: cover;
}

.jmg-auteurs-liste__initiale {
	display: grid;
	place-items: center;
	border: 1px solid var(--jmg-bordure-forte);
	font-family: var(--jmg-titre);
	font-size: 1.5rem;
	color: var(--jmg-or);
}

.jmg-auteurs-liste__texte {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.jmg-auteurs-liste__nom {
	font-family: var(--jmg-titre);
	font-size: var(--jmg-t-lg);
	line-height: 1.25;
	color: var(--jmg-texte);
}

.jmg-auteurs-liste__lien:hover .jmg-auteurs-liste__nom {
	color: var(--jmg-or);
}

.jmg-auteurs-liste__compte {
	font-size: var(--jmg-t-xs);
	color: var(--jmg-texte-discret);
}

@media (max-width: 900px) {
	.jmg-auteurs-liste {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.jmg-auteur__entete {
		grid-template-columns: 1fr;
		gap: var(--jmg-e-5);
		padding-block: var(--jmg-e-6) var(--jmg-e-5);
	}

	.jmg-auteur__portrait {
		max-width: 180px;
	}

	.jmg-auteurs-liste {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   5f. Accueil
   ========================================================================== */

/* --------------------------------------------------------------------------
   Le rythme de la page
   --------------------------------------------------------------------------
   La monotonie de l'accueil ne venait pas de sa palette : elle venait de ce
   que neuf sections se succédaient dans le même conteneur, à la même
   largeur, avec le même écart et le même corps de titre. Rien ne dominait,
   donc rien n'accrochait. Le rythme se fait maintenant par variation, comme
   le veut DESIGN.md : les bandes de papier profond respirent large, les
   vitrines se resserrent, et deux bandes ne se touchent jamais.
   -------------------------------------------------------------------------- */

.jmg-section-accueil {
	padding-block: clamp(3rem, 5.5vw, 5rem) 0;
}

/* Entête de section : trois corps franchement séparés. Le surtitre à 16px,
   le titre jusqu'à 48px, le filet d'or entre les deux et la suite. Un écart
   de trois pour un, là où la page n'avait qu'un h2 de trente pixels répété
   d'un bout à l'autre. */
.jmg-entete-section {
	margin-block: 0 clamp(1.75rem, 3vw, 2.75rem);
}

.jmg-entete-section .jmg-surtitre {
	margin-block: 0 var(--jmg-e-2);
}

.jmg-entete-section__titre {
	margin-block: 0;
	font-family: var(--jmg-titre);
	font-size: clamp(1.875rem, 1.35rem + 2.3vw, 3rem);
	font-weight: 500;
	line-height: 1.06;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

/* Le filet à point d'or, signature du site, repris ici en fermeture de
   titre. Il est aligné à gauche et non centré comme sur les pages
   intérieures : le titre de section l'est aussi. */
.jmg-entete-section__titre::after {
	content: "";
	display: block;
	width: min(220px, 40%);
	height: 7px;
	margin-block: var(--jmg-e-4) 0;
	background-image:
		linear-gradient(90deg, var(--jmg-or), var(--jmg-or-doux)),
		radial-gradient(circle at 50% 50%, var(--jmg-or) 0 2.5px, transparent 3px),
		linear-gradient(90deg, var(--jmg-or-doux), transparent);
	background-size: calc(50% - 13px) 1px, 26px 100%, calc(50% - 13px) 1px;
	background-position: 0 50%, 50% 50%, 100% 50%;
	background-repeat: no-repeat;
}

/* --------------------------------------------------------------------------
   Le frontispice
   --------------------------------------------------------------------------
   Le premier écran porte le papier profond et se ferme sur un filet d'or,
   plutôt que sur le trait beige qui ne se voyait pas. La pièce du moment
   n'est plus une vignette de deux cent cinquante pixels dans un cadre blanc :
   c'est un livre posé, à l'échelle qu'il mérite, avec l'ombre qui le décolle
   de la page. La profondeur manquait entièrement au site.
   -------------------------------------------------------------------------- */

.jmg-accueil__hero {
	padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3rem, 5.5vw, 5rem);
	background-color: var(--jmg-fond-bande);
	border-bottom: 1px solid var(--jmg-or-doux);
}

/* Le cachet « depuis 1997 » (jmg_cachet_maison(), appelé par tous les
   frontispices de section) est affixé au coin du titre comme un tampon sur
   un document, dans le vocabulaire déjà posé par .jmg-carton : fond d'encre,
   dorure de tête, nom en crème et mention en or vif, qui ne se lit en texte
   que sur ce fond sombre (7.03:1, contre 2.26 sur le crème).

   Il s'ancre sur la colonne de texte qui porte le titre, jamais sur le
   conteneur pleine largeur qui l'entoure : sur l'accueil, ancré sur toute la
   grille à deux colonnes, il se serait retrouvé au-dessus du carrousel, loin
   du titre. Chaque gabarit qui l'appelle pose donc son propre repère
   (.jmg-accueil__intro ici ; .jmg-hero ou .jmg-hero > .jmg-conteneur--etroit
   pour les frontispices secondaires, plus bas dans ce fichier).

   La rotation reste à six degrés, sous le plafond de trois à neuf degrés que
   le reste du site s'impose déjà pour un objet « posé » plutôt qu'un
   « effet » (enseigne du portail, piles de couvertures) : au repos, un
   tampon plus droit qu'un livre jeté sur une table, jamais un ruban plaqué
   à 45 degrés. */
.jmg-accueil__intro {
	position: relative;
}

.jmg-cachet-maison {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	margin: 0;
	padding: var(--jmg-e-3) var(--jmg-e-5);
	background-color: var(--jmg-texte);
	border: 2px solid var(--jmg-or-doux);
	border-radius: var(--jmg-rayon);
	text-align: center;
	transform: rotate(-6deg);
	box-shadow: 0 16px 26px -18px rgba(26, 28, 36, 0.6);
}

.jmg-cachet-maison__nom {
	display: block;
	font-family: var(--jmg-titre);
	font-size: var(--jmg-t-sm);
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--jmg-fond);
}

.jmg-cachet-maison__depuis {
	display: block;
	margin-block: var(--jmg-e-1) 0;
	font-family: var(--jmg-corps);
	font-size: var(--jmg-t-xs);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--jmg-or-vif);
}

/* Sous 780px, le frontispice repasse en une colonne et le cachet, resté en
   position absolue, chevaucherait le h1. Il rejoint le fil du texte,
   au-dessus du surtitre qui porte la même information en toutes lettres. */
@media (max-width: 780px) {
	.jmg-cachet-maison {
		position: static;
		display: inline-block;
		margin-bottom: var(--jmg-e-4);
	}
}

.jmg-accueil__hero-inner {
	display: grid;
	grid-template-columns: 1fr minmax(300px, 440px);
	gap: clamp(2rem, 5vw, 5rem);
	/* Stretch et non end : le carrousel se centre lui-même dans la pleine
	   hauteur de la ligne (voir .jmg-hero-carrousel), pour occuper l'espace
	   vertical qu'une seule rangée de couvertures calée en bas laissait
	   vide au-dessus d'elle. */
	align-items: stretch;
}

.jmg-accueil__intro {
	padding-block: 0 var(--jmg-e-2);
}

/* Le h1 de l'accueil sort de l'échelle commune : il est le seul de la page,
   et l'écart avec le surtitre à 16px est ce qui fait la hiérarchie. Un titre
   plus grand se lit mieux, pas moins bien : rien n'est cédé au confort de
   lecture ici. */
.jmg-accueil__hero h1 {
	max-width: 14ch;
	margin-block: 0;
	font-size: clamp(2.375rem, 1.6rem + 3.6vw, 4.5rem);
	line-height: 1.03;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.jmg-accueil__accroche {
	max-width: 50ch;
	margin-block: var(--jmg-e-5) var(--jmg-e-6);
}

.jmg-accueil__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jmg-e-4);
	max-width: none;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Le carrousel du frontispice
   --------------------------------------------------------------------------
   Remplace l'ancienne « pièce du moment » (un livre unique, souvent absent
   faute de fiche cochée) par une vitrine des nouveautés, avec un lien vers
   la page qui les réunit toutes (page-nouveautes.php). Une version à trois
   rubriques à onglets (Nouveautés / À paraître / À découvrir) a été
   essayée puis abandonnée au profit de cette vitrine unique, plus lisible
   dans une colonne de cette largeur.

   Le défilement se fait tout seul, en boucle continue et lente (la piste est
   dessinée deux fois côté PHP, une translation de -50% referme la boucle
   sans à-coup). Aucun JavaScript : l'animation et sa pause au survol ou au
   focus clavier sont en CSS pur. Un visiteur qui a demandé moins de
   mouvement n'a droit à aucune des deux copies qui boucle : la piste
   redevient un simple défilement manuel.
   -------------------------------------------------------------------------- */

.jmg-hero-carrousel {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	/* La piste (width: max-content) ferait sinon remonter sa largeur
	   incompressible à travers ce conteneur flex jusqu'à la grille du hero,
	   qui compte sur minmax(0, 1fr) pour ne jamais déborder sur mobile :
	   min-width auto est le défaut flex qui casse cette hypothèse. */
	min-width: 0;
}

.jmg-hero-carrousel__entete {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--jmg-e-3);
	margin-block: 0 var(--jmg-e-4);
}

.jmg-hero-carrousel__label {
	margin: 0;
	font-family: var(--jmg-corps);
	font-size: var(--jmg-t-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--jmg-texte-doux);
}

.jmg-hero-carrousel__controles {
	display: flex;
	align-items: center;
	gap: var(--jmg-e-4);
	flex-shrink: 0;
}

.jmg-hero-carrousel__tout {
	flex-shrink: 0;
	font-size: var(--jmg-t-xs);
	font-weight: 600;
	white-space: nowrap;
}

.jmg-hero-carrousel__fenetre {
	overflow: hidden;
}

.jmg-hero-carrousel__piste {
	display: flex;
	gap: var(--jmg-e-4);
	width: max-content;
	margin: 0;
	/* Le padding-top réserve la place du léger soulèvement de la couverture
	   au survol (transform: translateY) : la fenêtre s'ajuste à la piste
	   padding compris, ce mouvement de quelques pixels reste dans sa boîte
	   plutôt que d'être rogné par overflow:hidden. */
	padding: var(--jmg-e-2) 0 var(--jmg-e-3);
	list-style: none;
	animation: jmg-hero-carrousel-defile var(--jmg-marquee-duree, 40s) linear infinite;
}

@keyframes jmg-hero-carrousel-defile {
	from {
		transform: translateX(0);
	}

	to {
		/* La piste contient deux fois la même liste : -50% ramène tout
		   juste au point de départ visuel, sans saut perceptible. */
		transform: translateX(-50%);
	}
}

.jmg-hero-carrousel__fenetre:hover .jmg-hero-carrousel__piste,
.jmg-hero-carrousel__fenetre:focus-within .jmg-hero-carrousel__piste {
	animation-play-state: paused;
}

.jmg-hero-carrousel__item {
	flex: 0 0 clamp(120px, 15vw, 172px);
}

.jmg-hero-carrousel__lien {
	display: block;
	text-decoration: none;
	color: inherit;
}

.jmg-hero-carrousel__couverture {
	width: 100%;
	height: auto;
	/* Rapport de la couverture-attente (200x280) : réservé d'avance, la
	   vignette réelle n'a jamais à décaler le reste de la page en arrivant. */
	aspect-ratio: 200 / 280;
	object-fit: cover;
	border: 1px solid var(--jmg-tranche);
	box-shadow: 0 16px 24px -18px rgba(26, 28, 36, 0.55);
	transition: transform var(--jmg-transition);
}

.jmg-hero-carrousel__couverture--attente {
	object-fit: contain;
	box-shadow: none;
	opacity: 0.7;
	background-color: var(--jmg-fond-eleve);
}

.jmg-hero-carrousel__lien:hover .jmg-hero-carrousel__couverture,
.jmg-hero-carrousel__lien:focus-visible .jmg-hero-carrousel__couverture {
	transform: translateY(-4px);
}

.jmg-hero-carrousel__texte {
	display: block;
	margin-block: var(--jmg-e-2) 0;
}

.jmg-hero-carrousel__collection {
	display: block;
	font-family: var(--jmg-corps);
	/* var(--jmg-t-xs), jamais moins : c'est le plancher du site, voir
	   .jmg-presentoir__collection qui tient la même règle. */
	font-size: var(--jmg-t-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--jmg-or-fort);
	margin-block: 0 0.2rem;
}

/* Un titre long ne pousse plus la carte en longueur : deux lignes, jamais
   plus, la troisième s'efface derrière l'ellipse. La hauteur réservée par
   line-height × 2 vaut pour toutes les cartes, courtes ou longues : la
   rangée ne dessine plus de titres à hauteurs inégales. */
.jmg-hero-carrousel__titre {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(1.3em * 2);
	font-family: var(--jmg-titre);
	/* var(--jmg-t-xs), 16px : c'est le plancher du site, celui déjà tenu par
	   .jmg-hero-carrousel__collection juste au-dessus. Le texte ne peut pas
	   être plus petit que ça sans y déroger. */
	font-size: var(--jmg-t-xs);
	line-height: 1.3;
	color: var(--jmg-texte);
}

.jmg-hero-carrousel__lien:hover .jmg-hero-carrousel__titre {
	color: var(--jmg-or-fort);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Sur un écran d'ordinateur, la colonne du frontispice a de la hauteur à
   revendre : le texte de gauche (titre, chapeau, boutons) en occupe plus
   que cette vitrine seule. Des couvertures plus grandes comblent cet
   espace au lieu de le laisser vide au-dessus du carrousel. Le texte, lui,
   reste au plancher du site (16px) : c'est la taille des couvertures qui
   remplit la hauteur, pas celle des légendes. */
@media (min-width: 1024px) {
	.jmg-hero-carrousel__item {
		flex: 0 0 clamp(172px, 13vw, 228px);
	}
}

/* Un visiteur qui a demandé moins de mouvement n'a pas besoin du glissement
   automatique de la piste ni du soulèvement de la couverture au survol :
   l'un comme l'autre restent un déplacement, même bref. La piste redevient
   un simple défilement manuel, sans la copie qui n'existe que pour boucler. */
@media (prefers-reduced-motion: reduce) {
	.jmg-hero-carrousel__piste {
		animation: none;
	}

	.jmg-hero-carrousel__fenetre {
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		scroll-padding-inline: var(--jmg-e-1);
	}

	.jmg-hero-carrousel__item {
		scroll-snap-align: start;
	}

	.jmg-hero-carrousel__item--decor {
		display: none;
	}

	.jmg-hero-carrousel__couverture {
		transition: none;
	}

	.jmg-hero-carrousel__lien:hover .jmg-hero-carrousel__couverture,
	.jmg-hero-carrousel__lien:focus-visible .jmg-hero-carrousel__couverture {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Les thèmes, montrés par leurs ouvrages
   --------------------------------------------------------------------------
   Six cadres vides portant chacun un nom et un compte : c'est exactement la
   grille de cartes identiques que tout le monde produit, et elle ne montrait
   rien du catalogue. Chaque thème porte maintenant trois de ses couvertures,
   prises automatiquement dans le thème. Aucune image n'est à déposer, donc
   rien ne se dégradera à mesure que l'éditeur saisira ses fiches.
   -------------------------------------------------------------------------- */

.jmg-themes__grille {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.5rem, 3vw, 2.5rem) var(--jmg-e-5);
	list-style: none;
	padding: 0;
	margin: 0;
}

.jmg-themes__lien {
	display: block;
	height: 100%;
	padding: var(--jmg-e-4) var(--jmg-e-4) var(--jmg-e-5);
	text-decoration: none;
	color: inherit;
	border-bottom: 1px solid var(--jmg-bordure);
	transition: background-color var(--jmg-transition), border-color var(--jmg-transition);
}

.jmg-themes__lien:hover,
.jmg-themes__lien:focus-visible {
	background-color: var(--jmg-fond-carte);
	border-bottom-color: var(--jmg-or);
}

/* La pile est une pile de livres posés, pas un éventail de cartes : au repos
   les angles restent sous cinq degrés, au-delà l'objet cesse de se lire comme
   un livre. Ils vont jusqu'à neuf le temps de l'ouverture, ce qui est le
   propre d'une pile qu'on écarte de la main. Les couvertures sont calées par
   le bas, elles ont des formats différents et rien ne doit être rogné. */
.jmg-themes__pile {
	position: relative;
	display: block;
	height: clamp(150px, 15vw, 190px);
	margin-block: 0 var(--jmg-e-5);
}

/* La largeur est bornée en pourcentage de la pile, et pas seulement la
   hauteur : le catalogue contient des formats panoramiques, des revues et
   des albums, et une seule couverture large suffirait à faire sortir la pile
   de sa colonne. */
.jmg-themes__couverture {
	position: absolute;
	bottom: 0;
	left: 50%;
	display: block;
	max-width: 44%;
	transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.jmg-themes__couverture img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: clamp(140px, 14vw, 180px);
	height: auto;
	border: 1px solid var(--jmg-tranche);
	box-shadow: 0 14px 24px -18px rgba(26, 28, 36, 0.6);
}

.jmg-themes__couverture--1 {
	z-index: 3;
	transform: translateX(-50%);
}

.jmg-themes__couverture--2 {
	z-index: 2;
	transform: translateX(-88%) rotate(-4deg);
	transform-origin: bottom center;
}

.jmg-themes__couverture--3 {
	z-index: 1;
	transform: translateX(-12%) rotate(4deg);
	transform-origin: bottom center;
}

/* L'ouverture de la pile.
   --------------------------------------------------------------------------
   Les trois couvertures s'écartent pour se laisser voir. L'écart passe de
   huit points à trente-deux, quatre fois plus qu'à l'origine, et c'est le
   maximum praticable : au-delà, la couverture de gauche sort de la gouttière
   et vient chevaucher le thème voisin. Les couvertures latérales se
   soulèvent en même temps qu'elles s'écartent, ce qui achève de les dégager
   de celle du dessus.

   L'état « actif » accompagne le survol et le focus, et il n'est pas
   décoratif : c'est le seul des trois qui existe au doigt. Sans lui,
   l'animation n'aurait jamais lieu sur un téléphone, où il n'y a pas de
   survol.

   La durée passe de 160 à 260 millisecondes, avec une décélération
   exponentielle : sur une course quatre fois plus longue, la durée commune
   du site donnait un mouvement sec. `prefers-reduced-motion` la coupe en fin
   de feuille, comme le reste. */
.jmg-themes__lien:hover .jmg-themes__couverture--2,
.jmg-themes__lien:focus-visible .jmg-themes__couverture--2,
.jmg-themes__lien:active .jmg-themes__couverture--2 {
	transform: translateX(-120%) rotate(-9deg) translateY(-8px);
}

.jmg-themes__lien:hover .jmg-themes__couverture--3,
.jmg-themes__lien:focus-visible .jmg-themes__couverture--3,
.jmg-themes__lien:active .jmg-themes__couverture--3 {
	transform: translateX(20%) rotate(9deg) translateY(-8px);
}

/* La couverture du dessus se soulève elle aussi, d'un cran plus court : sans
   cela, les deux autres montent et elle paraît s'enfoncer. */
.jmg-themes__lien:hover .jmg-themes__couverture--1,
.jmg-themes__lien:focus-visible .jmg-themes__couverture--1,
.jmg-themes__lien:active .jmg-themes__couverture--1 {
	transform: translateX(-50%) translateY(-4px);
}

/* Quand l'éditeur a déposé une image de thème, elle prime sur la pile : elle
   est un choix, la pile n'est qu'un repli. */
.jmg-themes__pile--photo {
	height: auto;
}

.jmg-themes__photo {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--jmg-rayon);
}

.jmg-themes__nom {
	display: block;
	font-family: var(--jmg-titre);
	font-size: var(--jmg-t-h4);
	line-height: 1.2;
	color: var(--jmg-or);
}

.jmg-themes__lien:hover .jmg-themes__nom,
.jmg-themes__lien:focus-visible .jmg-themes__nom {
	color: var(--jmg-or-fort);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.jmg-themes__compte {
	display: block;
	margin-block: var(--jmg-e-2) 0;
	font-size: var(--jmg-t-xs);
	color: var(--jmg-texte-doux);
}

/* --------------------------------------------------------------------------
   Les présentoirs d'ouvrages
   --------------------------------------------------------------------------
   Le nom « vitrine » était déjà pris par le panneau du menu de navigation,
   et « rayon » est le border-radius du projet : d'où « présentoir ». Deux
   blocs de même nom auraient silencieusement écrasé l'un les règles de
   l'autre, et la vitrine du menu serait tombée sans que rien ne le signale.

   La grille de la fiche produit ne bouge pas : elle travaille dans une
   colonne étroite et ses vignettes y sont à leur échelle. Ici la page est
   vide autour, les couvertures prennent la place. Elles ne sont jamais
   rognées, jamais encadrées : un livre a déjà son bord imprimé, un cadre par
   dessus en fait une vignette de site marchand.
   -------------------------------------------------------------------------- */

.jmg-presentoir__rang {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(1.75rem, 3vw, 2.75rem) var(--jmg-e-6);
	list-style: none;
	padding: 0;
	margin: 0;
}

.jmg-presentoir--serre .jmg-presentoir__rang {
	grid-template-columns: repeat(5, 1fr);
	gap: var(--jmg-e-6) var(--jmg-e-5);
}

.jmg-presentoir__item {
	display: flex;
	flex-direction: column;
	gap: var(--jmg-e-2);
}

.jmg-presentoir__lien {
	display: block;
	text-decoration: none;
	color: inherit;
}

/* Ligne de pied commune : sans elle, des formats différents flotteraient
   chacun à sa hauteur et le rang perdrait son assise. */
.jmg-presentoir__socle {
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	min-height: clamp(180px, 18vw, 260px);
	margin-block: 0 var(--jmg-e-4);
}

.jmg-presentoir--serre .jmg-presentoir__socle {
	min-height: clamp(150px, 14vw, 200px);
}

.jmg-presentoir__couverture {
	width: auto;
	max-width: 100%;
	max-height: clamp(180px, 18vw, 260px);
	height: auto;
	object-fit: contain;
	border: 1px solid var(--jmg-tranche);
	box-shadow: 0 18px 28px -22px rgba(26, 28, 36, 0.55);
	transition: transform var(--jmg-transition);
}

.jmg-presentoir--serre .jmg-presentoir__couverture {
	max-height: clamp(150px, 14vw, 200px);
}

.jmg-presentoir__couverture--attente {
	box-shadow: none;
	opacity: 0.7;
}

.jmg-presentoir__lien:hover .jmg-presentoir__couverture,
.jmg-presentoir__lien:focus-visible .jmg-presentoir__couverture {
	transform: translateY(-6px);
}

.jmg-presentoir__texte {
	display: block;
}

.jmg-presentoir__collection {
	display: block;
	font-size: var(--jmg-t-xs);
	font-weight: 600;
	color: var(--jmg-or);
	margin-block: 0 0.3rem;
}

.jmg-presentoir__titre {
	display: block;
	font-family: var(--jmg-titre);
	font-size: var(--jmg-t-base);
	line-height: 1.3;
	color: var(--jmg-texte);
}

.jmg-presentoir--serre .jmg-presentoir__titre {
	font-size: var(--jmg-t-sm);
}

.jmg-presentoir__lien:hover .jmg-presentoir__titre,
.jmg-presentoir__lien:focus-visible .jmg-presentoir__titre {
	color: var(--jmg-or);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.jmg-presentoir__auteur {
	display: block;
	margin-block: 0.3rem 0;
	font-size: var(--jmg-t-sm);
	color: var(--jmg-texte-doux);
}

.jmg-presentoir__prix {
	font-size: var(--jmg-t-sm);
	font-weight: 600;
	color: var(--jmg-texte);
}

.jmg-presentoir__suite {
	margin-block: clamp(1.75rem, 3vw, 2.5rem) 0;
	font-size: var(--jmg-t-base);
}

/* Le lien de fin de section est une action isolée, pas un lien au fil du
   texte : il doit atteindre les 48 pixels de cible que le projet s'impose.
   Le calage est repris en marge négative pour que la hauteur gagnée ne
   déplace rien. */
.jmg-presentoir__suite a {
	display: inline-block;
	padding-block: 0.75rem;
	margin-block: -0.75rem;
}

/* --------------------------------------------------------------------------
   Les coups de cœur, en notes signées
   --------------------------------------------------------------------------
   Troisième rubrique d'ouvrages de la page, elle ne pouvait pas être une
   troisième grille. L'ouvrage est ici couché, avec son résumé : c'est une
   recommandation, pas un rayon.
   -------------------------------------------------------------------------- */

.jmg-notes__liste {
	list-style: none;
	padding: 0;
	margin: 0;
}

.jmg-notes__item {
	display: grid;
	grid-template-columns: minmax(120px, 170px) 1fr;
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: start;
	padding-block: clamp(1.75rem, 3vw, 2.5rem);
	border-top: 1px solid var(--jmg-bordure);
}

.jmg-notes__item:first-child {
	border-top: none;
	padding-top: 0;
}

.jmg-notes__couverture {
	display: block;
}

.jmg-notes__couverture img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 240px;
	height: auto;
	border: 1px solid var(--jmg-tranche);
	box-shadow: 0 20px 30px -24px rgba(26, 28, 36, 0.55);
	transition: transform var(--jmg-transition);
}

.jmg-notes__item:hover .jmg-notes__couverture img {
	transform: translateY(-4px);
}

.jmg-notes__titre {
	margin-block: 0;
	font-size: var(--jmg-t-h3);
	line-height: 1.2;
}

.jmg-notes__titre a {
	display: inline-block;
	/* Même raison que le lien de fin de section : c'est le seul lien de la
	   note, la couverture à côté n'étant qu'un doublon masqué au clavier. */
	padding-block: 0.7rem;
	margin-block: -0.7rem;
	color: var(--jmg-texte);
	text-decoration: none;
}

.jmg-notes__titre a:hover,
.jmg-notes__titre a:focus-visible {
	color: var(--jmg-or);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.jmg-notes__auteur {
	margin-block: var(--jmg-e-2) 0;
	font-size: var(--jmg-t-base);
	color: var(--jmg-texte-doux);
}

.jmg-notes__resume {
	max-width: 62ch;
	margin-block: var(--jmg-e-4) 0;
	color: var(--jmg-texte-doux);
}

.jmg-notes__prix {
	margin-block: var(--jmg-e-4) 0;
	font-size: var(--jmg-t-base);
	font-weight: 600;
	color: var(--jmg-texte);
}

/* --------------------------------------------------------------------------
   Les bandes de papier profond
   --------------------------------------------------------------------------
   L'écart entre le fond de page et le fond élevé valait deux centièmes de
   clarté : il ne se voyait pas, et les sections se fondaient les unes dans
   les autres. Les bandes prennent le papier profond et se ferment sur le
   filet d'or. Sur ce fond, l'or courant tombe à 5.88:1 : les liens et les
   surtitres y passent à l'or fort, qui tient l'objectif AAA du projet.
   -------------------------------------------------------------------------- */

.jmg-accueil__revue,
.jmg-accueil__auteurs-appel {
	margin-block: clamp(3rem, 5.5vw, 5rem) 0;
	padding-block: clamp(3rem, 5.5vw, 5rem);
	background-color: var(--jmg-fond-bande);
	border-block: 1px solid var(--jmg-or-doux);
}

.jmg-accueil__revue .jmg-surtitre,
.jmg-accueil__auteurs-appel .jmg-surtitre,
.jmg-vedette .jmg-surtitre {
	color: var(--jmg-or-fort);
}

.jmg-accueil__revue .jmg-bouton--fantome,
.jmg-accueil__auteurs-appel .jmg-bouton--fantome,
.jmg-vedette .jmg-bouton--fantome {
	color: var(--jmg-or-fort);
}

/* L'anneau de focus suit la même correction que le texte : sur le papier
   profond, l'or courant ne donne plus que 3.4:1 contre le fond, et un anneau
   de focus qui se devine ne remplit pas son office. */
.jmg-accueil__hero :focus-visible,
.jmg-accueil__revue :focus-visible,
.jmg-accueil__auteurs-appel :focus-visible,
.jmg-vedette :focus-visible {
	outline-color: var(--jmg-or-fort);
}

.jmg-accueil__revue h2,
.jmg-accueil__auteurs-appel h2 {
	margin-block: 0 var(--jmg-e-5);
	font-size: clamp(1.875rem, 1.35rem + 2.3vw, 3rem);
	line-height: 1.06;
	letter-spacing: -0.02em;
}

.jmg-accueil__revue p,
.jmg-accueil__auteurs-appel p {
	max-width: 58ch;
}

/* --------------------------------------------------------------------------
   L'étalage de la revue
   --------------------------------------------------------------------------
   La bande de la revue portait un chiffre, trente-sept, pour dire les années
   de parution. Il disait la durée, il ne la montrait pas, et le nombre posé
   sur son unité en capitales faisait un bloc dont les deux lignes se
   chevauchaient. Les couvertures le remplacent : la maison a quatre-vingt-un
   numéros en catalogue, tous avec leur couverture, et une pile de revues dit
   la continuité mieux qu'un nombre.

   Le geste est celui du kiosque : les numéros étalés à plat, chacun ne
   laissant voir de son voisin que la bande de gauche. Le chevauchement est
   serré, les rotations restent sous deux degrés. Au-delà, l'étalage cesse
   d'être une pile de revues posées et devient un jeu de cartes.
   -------------------------------------------------------------------------- */

.jmg-accueil__revue-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 46%);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

.jmg-etalage {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	/* Le débordement de la dernière couverture est encaissé par la bande,
	   qui est pleine largeur : l'étalage peut sortir du conteneur sans
	   ouvrir de barre de défilement. */
	min-height: clamp(180px, 20vw, 260px);
}

.jmg-etalage__piece {
	display: block;
	flex: none;
	/* Chaque numéro recouvre son voisin d'environ un quart. Moins, et
	   l'étalage se lit comme une bande continue où aucune revue ne se
	   distingue ; plus, et il n'en reste qu'une tranche. La marge négative
	   est nulle sur le premier, sinon l'étalage décrocherait de la colonne. */
	margin-left: -22%;
	/* Le premier numéro est au-dessus, les suivants passent dessous : c'est
	   le sens dans lequel on pose des revues sur une table. */
	z-index: calc(20 - var(--jmg-rang));
	transform: rotate(calc((var(--jmg-rang) - 4) * 0.6deg)) translateY(calc(var(--jmg-rang) * -1px));
	transform-origin: bottom center;
	transition: transform var(--jmg-transition);
}

.jmg-etalage__piece:first-child {
	margin-left: 0;
}

.jmg-etalage__piece img {
	display: block;
	width: auto;
	max-width: none;
	height: clamp(180px, 20vw, 260px);
	border: 1px solid var(--jmg-tranche);
	/* L'ombre porte vers la gauche, du côté du recouvrement : c'est elle qui
	   détache chaque numéro de celui qu'il couvre, sans quoi l'étalage
	   redevient un aplat. */
	box-shadow: -14px 10px 22px -12px rgba(26, 28, 36, 0.55);
}

/* --------------------------------------------------------------------------
   Écrans étroits
   --------------------------------------------------------------------------
   L'étalage se resserre plutôt que de se réduire : dix couvertures de cent
   pixels de haut ne se lisent plus comme des revues. Les dernières sortent
   du cadre, ce qui est le propre d'un étalage.
   -------------------------------------------------------------------------- */

/* Sous 1100 pixels, la colonne de l'étalage se resserre bien plus vite que
   les couvertures : à 834, elle ne fait plus que 362 pixels, et les dix
   numéros du bureau s'y recouvraient aux trois quarts.

   Le recouvrement s'exprime ici en pixels et non plus en pourcentage. C'est
   le point important : un pourcentage se calcule sur la largeur du
   conteneur, si bien qu'une même valeur donne un recouvrement différent à
   chaque palier, et qu'il faudrait la réajuster à chaque fois. En pixels, la
   hauteur des couvertures étant fixée juste en dessous, leur largeur est
   connue à quelques unités près et le recouvrement ne bouge plus.

   Sept numéros à cent quarante pixels de haut, chacun montrant quarante-sept
   pour cent de lui-même : c'est le maximum tenable sur un écran de trois cent
   quatre-vingt-dix pixels sans que l'étalage n'en sorte. Au-delà, il faut
   rapetisser les couvertures plus vite qu'on n'en ajoute, et une couverture
   de revue qu'on ne reconnaît plus ne compte pas. */
@media (max-width: 1100px) {
	.jmg-etalage {
		min-height: 140px;
	}

	.jmg-etalage__piece {
		margin-left: -56px;
	}

	.jmg-etalage__piece img {
		height: 140px;
	}

	.jmg-etalage__piece:nth-child(n + 8) {
		display: none;
	}
}

@media (max-width: 780px) {
	/* Sur un téléphone, l'étalage est centré sous le texte, et il doit donc
	   tenir dans la colonne : centré tout en débordant, il serait coupé des
	   deux côtés et le premier numéro, le seul qui se lise, y perdrait son
	   titre. Il descend d'un cran et se limite à quatre numéros, les autres
	   étant retirés du flux plutôt que masqués sous le bord. */
	/* L'étalage se centre sous le texte. Sa taille et son recouvrement sont
	   réglés au palier du dessus, qui vaut aussi ici. */
	.jmg-etalage {
		justify-content: center;
	}

	/* L'appel à l'abonnement se centre avec les couvertures qu'il accompagne,
	   et l'appel aux auteurs suit : les deux bandes ont la même structure, un
	   bouton centré dans l'une et calé à gauche dans l'autre se remarquerait.
	   Le corps du texte, lui, reste aligné à gauche : trois lignes centrées
	   se lisent moins bien, et le lectorat de ce site est le dernier à qui
	   l'on peut demander cet effort. */
	.jmg-accueil__revue .jmg-bouton,
	.jmg-accueil__auteurs-appel .jmg-bouton {
		display: block;
		width: fit-content;
		margin-inline: auto;
	}

}

/* --------------------------------------------------------------------------
   L'appel aux auteurs
   --------------------------------------------------------------------------
   La bande étalait trois lignes sur douze cents pixels et laissait les deux
   tiers droits vides. Elle porte maintenant l'argument en face du texte.

   Le zéro n'est pas un ornement, contrairement au compteur d'années qui
   occupait la bande de la revue avant que les couvertures ne le remplacent :
   c'est la promesse commerciale elle-même, celle qui sépare une maison à
   compte d'éditeur d'une maison à compte d'auteur, et le cahier des charges
   demande qu'elle reste explicite. Un chiffre est ce qui la dit le plus vite.

   Les trois lignes ne se chevauchent pas : chacune est un bloc, avec son
   corps et son interligne propres. C'est le défaut qui avait fait retirer le
   compteur de la revue, il ne se reproduit pas ici.
   -------------------------------------------------------------------------- */

.jmg-accueil__auteurs-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
}

.jmg-promesse {
	max-width: none;
	margin: 0;
	padding-block: var(--jmg-e-5) 0;
	text-align: center;
	/* Le filet d'or en tête tient lieu de tampon : c'est le geste par lequel
	   la maison signe un engagement, et il n'y en a qu'un dans la bande. */
	border-top: 2px solid var(--jmg-or);
}

.jmg-promesse__chiffre {
	display: block;
	font-family: var(--jmg-titre);
	font-size: clamp(3.5rem, 2.2rem + 6vw, 7rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--jmg-or-fort);
}

.jmg-promesse__mention {
	display: block;
	margin-block: var(--jmg-e-3) 0;
	font-family: var(--jmg-corps);
	font-size: var(--jmg-t-lg);
	font-weight: 600;
	color: var(--jmg-texte);
}

.jmg-promesse__note {
	display: block;
	margin-block: var(--jmg-e-2) 0;
	font-family: var(--jmg-corps);
	font-size: var(--jmg-t-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--jmg-texte-doux);
}

/* --------------------------------------------------------------------------
   L'infolettre
   --------------------------------------------------------------------------
   Deuxième bande crème d'affilée, de même largeur et de même alignement que
   l'appel aux auteurs : les deux se lisaient comme un seul aplat mou en fin
   de page. Elle passe en deux colonnes, le propos à gauche et le formulaire
   en face, ce qui divise sa hauteur par deux, et prend le fond de page pour
   se détacher du papier profond de la bande qui la précède.

   Les deux ne peuvent pas être fondues en une : elles ne s'adressent pas au
   même public, l'une aux auteurs et l'autre aux lecteurs, et l'infolettre
   paraît sur toutes les pages du site quand l'appel aux auteurs n'existe que
   sur l'accueil.
   -------------------------------------------------------------------------- */

.jmg-infolettre-bandeau {
	background-color: var(--jmg-fond);
	border-top: 1px solid var(--jmg-or-doux);
	padding-block: clamp(2.5rem, 4.5vw, 4rem);
}

.jmg-infolettre {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 46%);
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: start;
}

.jmg-infolettre__titre {
	margin-block: 0 var(--jmg-e-3);
	font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);
	line-height: 1.1;
	letter-spacing: -0.015em;
}

/* Le propos et le formulaire sont deux blocs, un par colonne : ils sont
   enveloppés dans le gabarit, un placement automatique rangeant sinon le
   titre seul à gauche et tout le reste à droite. */
.jmg-infolettre__form {
	margin-block: 0;
	max-width: none;
}

.jmg-infolettre__mention {
	margin-block: var(--jmg-e-3) 0;
}

@media (max-width: 860px) {
	.jmg-accueil__auteurs-inner,
	.jmg-infolettre {
		grid-template-columns: minmax(0, 1fr);
	}

	.jmg-promesse {
		justify-self: center;
	}
}

.jmg-accueil__libre {
	padding-block: clamp(3rem, 5.5vw, 5rem);
}

/* --------------------------------------------------------------------------
   Écrans étroits
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
	.jmg-presentoir__rang,
	.jmg-presentoir--serre .jmg-presentoir__rang {
		grid-template-columns: repeat(3, 1fr);
	}

	.jmg-themes__grille {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 780px) {
	/* La pièce passe sous le titre : sur une colonne, c'est le titre qui doit
	   arriver en premier, la couverture le suit.

	   minmax(0, 1fr) et non 1fr : une piste « 1fr » ne descend pas sous la
	   largeur minimale de son contenu, et le paragraphe de la bande, borné à
	   58ch, en imposait près de cinq cents pixels. Le texte sortait de
	   l'écran par la droite sur un téléphone. */
	.jmg-accueil__hero-inner,
	.jmg-accueil__revue-inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.jmg-notes__item {
		grid-template-columns: minmax(100px, 140px) 1fr;
	}
}

@media (max-width: 560px) {
	.jmg-presentoir__rang,
	.jmg-presentoir--serre .jmg-presentoir__rang {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--jmg-e-6) var(--jmg-e-4);
	}

	.jmg-themes__grille {
		grid-template-columns: 1fr;
	}

	/* Sur une seule colonne, la pile prendrait toute la largeur et se
	   centrerait, alors que le nom du thème posé dessous reste à gauche : les
	   deux décrochaient. On borne la pile, elle se cale au bord comme son
	   texte. */
	.jmg-themes__pile {
		max-width: 320px;
	}

	.jmg-notes__item {
		grid-template-columns: 1fr;
		gap: var(--jmg-e-4);
	}

	.jmg-notes__couverture img {
		max-height: 200px;
	}
}


/* --------------------------------------------------------------------------
   L'auteur du moment
   --------------------------------------------------------------------------
   Le bloc reprend la bande de la revue, à ceci près qu'il ne s'arrête pas au
   portrait : la « sélection de son œuvre » est montrée, pas annoncée. Les
   couvertures sont alignées par le bas et posées sur un filet d'or, seul
   ornement de la section.
   -------------------------------------------------------------------------- */

.jmg-vedette {
	margin-block: var(--jmg-e-8) 0;
	padding-block: var(--jmg-e-8);
	background-color: var(--jmg-fond-eleve);
	border-block: 1px solid var(--jmg-bordure);
}

















.jmg-etagere {
	margin-block: var(--jmg-e-8) 0;
}

.jmg-etagere__legende {
	margin-block: 0 var(--jmg-e-5);
	font-family: var(--jmg-corps);
	font-size: var(--jmg-t-sm);
	font-weight: 600;
	color: var(--jmg-texte-doux);
}

/* Pas de gouttière entre les colonnes : elle couperait le filet d'or en
   cinq segments et l'étagère cesserait d'en être une. L'écart passe donc
   par le calage intérieur de chaque item, et le filet court d'un bord du
   conteneur à l'autre. */
.jmg-etagere__rang {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	column-gap: 0;
	row-gap: var(--jmg-e-6);
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Le calage se prend à l'intérieur du socle et du titre, jamais sur l'item :
   posé sur l'item, il rognerait le filet à chaque colonne. */

.jmg-etagere__lien {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

/* Le socle donne aux couvertures une ligne de pied commune : sans lui, des
   formats différents flotteraient chacun à sa hauteur et le filet d'or ne
   ressemblerait plus à une étagère. */
.jmg-etagere__socle {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	min-height: 200px;
	padding-inline: var(--jmg-e-3);
	padding-bottom: var(--jmg-e-3);
	border-bottom: 1px solid var(--jmg-or-doux);
}

.jmg-etagere__couverture {
	max-width: 100%;
	width: auto;
	max-height: 200px;
	height: auto;
	object-fit: contain;
	border: 1px solid var(--jmg-tranche);
	box-shadow: 0 10px 20px -14px rgba(26, 28, 36, 0.4);
	transition: transform var(--jmg-transition);
}

/* Le visuel d'attente n'est pas un objet imprimé : il ne porte donc pas
   l'ombre portée qui fait tenir les couvertures sur l'étagère. */
.jmg-etagere__couverture--attente {
	box-shadow: none;
	opacity: 0.7;
}

.jmg-etagere__lien:hover .jmg-etagere__couverture,
.jmg-etagere__lien:focus-visible .jmg-etagere__couverture {
	transform: translateY(-4px);
}

.jmg-etagere__titre {
	display: block;
	margin-block: var(--jmg-e-3) 0;
	padding-inline: var(--jmg-e-3);
	font-family: var(--jmg-titre);
	font-size: var(--jmg-t-sm);
	line-height: 1.35;
	color: var(--jmg-texte);
}

.jmg-etagere__lien:hover .jmg-etagere__titre {
	color: var(--jmg-or);
}

/* --------------------------------------------------------------------------
   Le carton de l'auteur du moment
   --------------------------------------------------------------------------
   Un objet posé sur la page, pas une section de plus. Le carton a d'abord
   été fait en papier de carte, et la mesure a tranché : il tombait sur le
   même #FEFDF9 et la même bordure que les cases de produit qui l'entourent,
   et ne s'en distinguait que par trois pixels de dorure. Le papier profond
   n'aurait pas suffi non plus, 1.17:1 contre une case de produit.

   Il est donc inversé : encre profonde, dorure, texte clair. C'est le
   vocabulaire de la page de garde d'un ouvrage relié, et c'est le seul
   endroit du site où l'or vif de la marque, #C9A227, redevient lisible en
   texte : 7.03:1 sur l'encre, contre 2.26 sur le crème, où il n'est bon
   qu'en fond de bouton. La couleur de l'enseigne trouve ici son seul emploi
   typographique.

   Le sombre est réservé à ce qui n'est pas le catalogue : le renvoi vers le
   portail, et la recommandation que la maison signe en son nom. Trois lignes
   dans les deux cas, jamais de la lecture longue, ce que la règle du fond
   clair de ce projet vise.

   Deux formats pour un seul motif. Sur l'accueil, le carton est large et
   porte l'étagère des couvertures. Dans le catalogue, il tient sur deux
   cases de la grille et s'en tient au nécessaire : entouré de couvertures,
   il n'a pas à en ajouter.

   Le point dur est ailleurs que dans la forme : aucun des 293 auteurs n'a de
   portrait en base. Le médaillon est donc le cas favorable, et le repli, une
   couverture de l'auteur posée droite, est ce qui s'affichera en pratique.
   Les deux occupent la même colonne et le carton tient dans les deux cas.
   -------------------------------------------------------------------------- */

.jmg-carton {
	position: relative;
	background-color: var(--jmg-texte);
	border: 2px solid var(--jmg-or-doux);
	border-radius: var(--jmg-rayon-lg);
	padding: clamp(1.75rem, 3.5vw, 3rem);
	color: var(--jmg-fond);
	/* L'ombre est franche et non diffuse : le carton doit se lire comme posé
	   sur la page, pas comme un fond un peu différent. Elle est teintée à
	   l'encre, jamais au noir pur, qui poserait un halo gris sur le crème. */
	box-shadow: 0 30px 50px -30px rgba(26, 28, 36, 0.7);
}

/* Sur l'encre, le liseré de tranche des couvertures s'inverse : à quatorze
   pour cent d'encre il serait invisible, c'est le crème qui détache
   désormais les couvertures sombres du fond. */
.jmg-carton {
	--jmg-tranche: rgba(250, 247, 240, 0.22);
}

/* La dorure de tête, plus épaisse que l'encadrement : c'est le dos doré de
   la reliure, et elle donne au carton un haut et un bas, ce qu'un cadre
   uniforme ne fait pas. */
.jmg-carton__dorure {
	position: absolute;
	inset: 0 0 auto;
	height: 5px;
	border-radius: var(--jmg-rayon-lg) var(--jmg-rayon-lg) 0 0;
	background-image: linear-gradient(
		90deg,
		var(--jmg-or-doux),
		var(--jmg-or-vif) 30%,
		var(--jmg-or-vif) 70%,
		var(--jmg-or-doux)
	);
}

.jmg-carton__corps {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: center;
}

.jmg-carton--accueil .jmg-carton__corps {
	grid-template-columns: minmax(140px, 200px) 1fr;
}

/* Dans la grille du catalogue, le carton est étroit : la figure passe
   au-dessus du texte plutôt qu'à côté. */
.jmg-carton--catalogue .jmg-carton__corps {
	grid-template-columns: 1fr;
	justify-items: center;
	text-align: center;
	gap: var(--jmg-e-5);
}

/* Le médaillon, quand le portrait existe. Le cercle d'or est la seule forme
   ronde du site : elle ne se justifie que pour un visage. */
.jmg-carton__medaillon {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	border-radius: 50%;
	padding: 5px;
	background-image: linear-gradient(150deg, var(--jmg-or-vif), var(--jmg-or-doux));
	box-shadow: 0 18px 30px -22px rgba(26, 28, 36, 0.6);
}

.jmg-carton__portrait {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
}

/* Le repli. Une couverture ne se recadre pas en rond : elle est posée
   droite, avec le liseré de tranche et l'ombre des couvertures du site. */
.jmg-carton__couverture img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 240px;
	height: auto;
	margin-inline: auto;
	border: 1px solid var(--jmg-tranche);
	box-shadow: 0 22px 34px -24px rgba(26, 28, 36, 0.6);
}

.jmg-carton--catalogue .jmg-carton__couverture img {
	max-height: 200px;
}

/* Le seul texte du site composé dans l'or vif de la marque : il n'est
   lisible que sur l'encre, 7.03:1.

   Le sélecteur est redoublé pour passer devant la règle qui met les
   surtitres de bande à l'or fort : le carton de l'accueil est posé dans
   .jmg-vedette, qui est une bande, et en héritait un or calibré pour le
   papier, invisible ici à 1.2:1. */
.jmg-carton .jmg-carton__surtitre {
	margin-block: 0 var(--jmg-e-2);
	color: var(--jmg-or-vif);
}

/* Le nom porte l'échelle du carton. C'est le seul mot qui doit se lire de
   loin, dans une grille où tout le reste est à dix-neuf pixels. */
.jmg-carton__nom {
	margin-block: 0;
	font-family: var(--jmg-titre);
	font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -0.02em;
}

.jmg-carton--catalogue .jmg-carton__nom {
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
}

/* Le nom est un lien à part entière et non un titre décoratif : il porte donc
   les 48 pixels de cible que le projet s'impose. Le calage est repris en
   marge négative pour que la hauteur gagnée ne déplace rien. */
.jmg-carton__nom a {
	display: inline-block;
	padding-block: 0.6rem;
	margin-block: -0.6rem;
	color: var(--jmg-fond);
	text-decoration: none;
}

.jmg-carton__nom a:hover,
.jmg-carton__nom a:focus-visible {
	color: var(--jmg-or-vif);
	text-decoration: underline;
	text-underline-offset: 0.12em;
}

/* Sur l'encre, les gris de texte du site sont calibrés pour le crème et
   n'ont plus cours : dates et notice prennent le crème, à demi-opacité pour
   les premières. 15.89:1 et 11.1:1. */
.jmg-carton__dates {
	margin-block: var(--jmg-e-2) 0;
	font-size: var(--jmg-t-sm);
	color: rgba(250, 247, 240, 0.72);
}

.jmg-carton__bio {
	max-width: 56ch;
	margin-block: var(--jmg-e-4) 0;
	color: var(--jmg-fond);
	/* Un cran de plus que le corps du site : le texte clair sur fond sombre
	   se lit plus maigre qu'il n'est. */
	line-height: 1.8;
}

.jmg-carton--catalogue .jmg-carton__bio {
	margin-inline: auto;
	font-size: var(--jmg-t-sm);
}

.jmg-carton__action {
	max-width: none;
	margin-block: clamp(1.5rem, 2.5vw, 2rem) 0;
}

/* L'étagère reprend la sienne, resserrée : dans un carton, elle n'a plus la
   largeur de la page. Les couvertures, elles, y gagnent : ce sont les seuls
   objets colorés du carton, et l'encre les fait ressortir comme le crème ne
   le faisait pas. */
.jmg-carton__etagere {
	margin-block: clamp(2rem, 4vw, 3rem) 0;
	padding-block: clamp(1.75rem, 3vw, 2.5rem) 0;
	border-top: 1px solid rgba(250, 247, 240, 0.22);
}

.jmg-carton__etagere .jmg-etagere__legende,
.jmg-carton__etagere .jmg-etagere__titre {
	color: var(--jmg-fond);
}

.jmg-carton__etagere .jmg-etagere__lien:hover .jmg-etagere__titre,
.jmg-carton__etagere .jmg-etagere__lien:focus-visible .jmg-etagere__titre {
	color: var(--jmg-or-vif);
}

/* L'anneau de focus passe à l'or vif : l'or de texte du site, calibré pour
   le crème, ne se détache pas de l'encre. */
.jmg-carton :focus-visible {
	outline-color: var(--jmg-or-vif);
}

/* Le visuel d'attente est un aplat clair : sur le crème il s'efface, sur
   l'encre il devient la tache la plus lumineuse du carton et attire l'œil
   avant les vraies couvertures. Il descend donc bien plus bas ici. */
.jmg-carton .jmg-etagere__couverture--attente {
	opacity: 0.28;
}

/* --------------------------------------------------------------------------
   Le carton dans la grille du catalogue
   -------------------------------------------------------------------------- */

/* Deux cases de large : le carton doit rompre la trame, pas s'y ranger. Sur
   trois colonnes il en prend deux aussi, sur deux il prend toute la largeur.
   Le `li` est vidé de tout ce que Kadence pose sur une case de produit. */
.jmg-carton-case {
	grid-column: span 2;
	list-style: none;
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	box-shadow: none;
}

.jmg-carton-case .jmg-carton {
	height: 100%;
}

@media (max-width: 767px) {
	.jmg-carton-case {
		grid-column: 1 / -1;
	}
}

/* En vue liste, la grille n'a qu'une colonne : un « span 2 » y fabrique une
   deuxième piste implicite, et toute la vue se disloque en deux colonnes de
   largeurs inégales. L'encart y prend donc la colonne unique, comme les
   ouvrages. */
.products-list-view .jmg-carton-case {
	grid-column: auto;
}

/* La vue liste n'a pas de rang, donc pas de ligne de pied à tenir : la
   couverture s'y cale en tête de notice, à hauteur du titre, et la boîte
   n'impose plus sa hauteur minimale. */
.products-list-view li.product .woocommerce-loop-image-link {
	align-items: flex-start;
	min-height: 0;
}

@media (max-width: 900px) {
	.jmg-carton--accueil .jmg-carton__corps {
		grid-template-columns: minmax(120px, 160px) 1fr;
	}
}

@media (max-width: 640px) {
	/* Sur une colonne, la figure passe au-dessus du texte : à côté, elle
	   n'aurait plus que quatre-vingts pixels et le nom se casserait en trois
	   lignes. Elle se centre alors, comme dans le carton du catalogue, et le
	   bouton la suit : une couverture calée à gauche au-dessus d'un texte
	   pleine largeur laisse un vide à droite que rien ne vient occuper. */
	.jmg-carton--accueil .jmg-carton__corps {
		grid-template-columns: 1fr;
		justify-items: center;
	}

	.jmg-carton--accueil .jmg-carton__couverture img,
	.jmg-carton--accueil .jmg-carton__medaillon {
		margin-inline: auto;
	}

	.jmg-carton--accueil .jmg-carton__action {
		text-align: center;
	}

	.jmg-carton__medaillon {
		max-width: 180px;
	}
}

/* --------------------------------------------------------------------------
   Le catalogue en PDF
   --------------------------------------------------------------------------
   Une carte, pas une bande : l'appel aux auteurs qui la suit est déjà une
   bande, et deux fonds élevés collés annuleraient la respiration des deux.
   -------------------------------------------------------------------------- */

.jmg-catalogue {
	display: grid;
	grid-template-columns: minmax(140px, 200px) 1fr;
	gap: var(--jmg-e-7);
	align-items: center;
	margin-block: var(--jmg-e-8) 0;
	padding: var(--jmg-e-7);
	background-color: var(--jmg-fond-carte);
	border: 1px solid var(--jmg-bordure);
	border-radius: var(--jmg-rayon-lg);
}

.jmg-catalogue__image {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--jmg-bordure);
	border-radius: var(--jmg-rayon);
	box-shadow: 0 16px 32px -22px rgba(26, 28, 36, 0.4);
}

.jmg-catalogue__texte h2 {
	margin-block: 0 var(--jmg-e-4);
}

.jmg-catalogue__texte p {
	max-width: 58ch;
}

.jmg-catalogue__action {
	margin-block: var(--jmg-e-5) 0;
	max-width: none;
}

.jmg-catalogue__edition {
	margin-block: var(--jmg-e-3) 0;
	font-size: var(--jmg-t-xs);
	color: var(--jmg-texte-discret);
}

@media (max-width: 900px) {
	

	/* À trois par rang, la cinquième couverture ouvre une seconde étagère :
	   le filet se répète, ce qui reste lisible comme un rayonnage. */
	.jmg-etagere__rang {
		grid-template-columns: repeat(3, 1fr);
	}

	.jmg-catalogue {
		gap: var(--jmg-e-6);
	}
}

@media (max-width: 640px) {
	.jmg-accueil__hero {
		padding-block: var(--jmg-e-7) var(--jmg-e-6);
	}

	.jmg-accueil__hero h1 {
		max-width: none;
	}

	.jmg-accueil__actions .jmg-bouton {
		width: 100%;
	}

	.jmg-accueil__revue,
	.jmg-accueil__auteurs-appel,
	.jmg-vedette {
		margin-block: var(--jmg-e-7) 0;
		padding-block: var(--jmg-e-6);
	}

	.jmg-catalogue {
		grid-template-columns: 1fr;
		gap: var(--jmg-e-5);
	}

	.jmg-catalogue__objet {
		max-width: 200px;
	}

	.jmg-etagere {
		margin-block: var(--jmg-e-7) 0;
	}

	.jmg-etagere__rang {
		grid-template-columns: repeat(2, 1fr);
	}

	.jmg-etagere__socle {
		min-height: 150px;
	}

	.jmg-etagere__couverture {
		max-height: 150px;
	}

	.jmg-catalogue {
		padding: var(--jmg-e-5);
	}

	.jmg-catalogue__action .jmg-bouton {
		width: 100%;
	}
}

/* ==========================================================================
   5g. Fil d'Ariane
   ========================================================================== */

.jmg-ariane {
	font-size: var(--jmg-t-xs);
	color: var(--jmg-texte-discret);
	padding-block: var(--jmg-e-5) 0;
	letter-spacing: 0.02em;
}

.jmg-ariane a {
	color: var(--jmg-texte-doux);
	text-decoration: none;
}

.jmg-ariane a:hover {
	color: var(--jmg-or);
	text-decoration: underline;
}

.jmg-ariane .separator {
	margin-inline: 0.4em;
	color: var(--jmg-bordure-forte);
}

/* ==========================================================================
   5h. Questions fréquentes
   ========================================================================== */

.wp-block-details {
	border-bottom: 1px solid var(--jmg-bordure);
	padding-block: var(--jmg-e-4);
}

.wp-block-details summary {
	cursor: pointer;
	list-style: none;
	position: relative;
	padding-right: 2.5rem;
	font-family: var(--jmg-titre);
	font-size: var(--jmg-t-h4);
	line-height: 1.35;
	color: var(--jmg-texte);
	transition: color var(--jmg-transition);
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary:hover {
	color: var(--jmg-or);
}

/* Le signe change d'état sans animation : rien à charger, rien à calculer. */
.wp-block-details summary::after {
	content: "+";
	position: absolute;
	right: 0;
	top: 0;
	font-family: var(--jmg-corps);
	font-size: 1.5rem;
	line-height: 1;
	color: var(--jmg-or);
}

.wp-block-details[open] summary::after {
	content: "\2212";
}

.wp-block-details[open] summary {
	margin-block: 0 var(--jmg-e-4);
}

.wp-block-details p {
	color: var(--jmg-texte-doux);
	max-width: 62ch;
}

.wp-block-details p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   5i. Abonnement
   ========================================================================== */

.jmg-liste-arguments {
	list-style: none;
	padding: 0;
	margin: 0;
	max-width: var(--jmg-largeur-texte);
}

.jmg-liste-arguments li {
	position: relative;
	padding-left: 1.75rem;
	margin-block: 0 var(--jmg-e-3);
	color: var(--jmg-texte-doux);
}

.jmg-liste-arguments li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.65em;
	width: 0.5rem;
	height: 0.5rem;
	border: 1px solid var(--jmg-or);
	transform: rotate(45deg);
}

/* ==========================================================================
   5j. Infolettre
   ========================================================================== */

.jmg-infolettre__texte {
	color: var(--jmg-texte-doux);
	max-width: 56ch;
	margin-block: 0 var(--jmg-e-5);
}

/*
 * Le formulaire tenait sur une seule ligne parce que son étiquette était
 * masquée. Devenue visible, elle s'est rangée à gauche du champ, où elle
 * n'a rien à faire : partout ailleurs sur le site, une étiquette se lit
 * au-dessus de son champ. La grille remet chacun à sa place, l'étiquette
 * sur toute la largeur, puis le champ et le bouton côte à côte.
 * stretch plutôt que end : les deux prennent la même hauteur, et leurs
 * bords s'alignent exactement.
 */
.jmg-infolettre__form {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: stretch;
	gap: var(--jmg-e-2) var(--jmg-e-3);
	max-width: 560px;
}

.jmg-infolettre__form label {
	grid-column: 1 / -1;
	font-weight: 600;
	color: var(--jmg-texte);
}

.jmg-infolettre__form input[type="email"] {
	background-color: var(--jmg-fond-carte);
}

.jmg-infolettre__mention {
	font-size: var(--jmg-t-xs);
	color: var(--jmg-texte-discret);
	margin-block: var(--jmg-e-3) 0;
}

/*
 * Message d'état. RGAA 3.1 interdit de porter l'information par la seule
 * couleur : chaque message reçoit donc un pictogramme, en plus de la teinte
 * et du texte. Le pictogramme est posé en image de fond plutôt qu'en
 * contenu généré, pour rester muet au lecteur d'écran, à qui le texte du
 * message suffit. Les couleurs des SVG sont écrites en dur, une data-uri ne
 * sachant pas lire une variable CSS ; elles reprennent --jmg-succes et
 * --jmg-erreur.
 */
.jmg-infolettre__message {
	padding: var(--jmg-e-3) var(--jmg-e-4) var(--jmg-e-3) 3.25rem;
	border-radius: var(--jmg-rayon);
	border: 2px solid;
	max-width: 560px;
	margin-block: 0 var(--jmg-e-4);
	background-repeat: no-repeat;
	background-position: var(--jmg-e-4) 0.95em;
	background-size: 1.5rem 1.5rem;
}

.jmg-infolettre__message--succes {
	border-color: var(--jmg-succes);
	color: var(--jmg-succes);
	background-color: rgba(31, 107, 65, 0.07);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F6B41' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.jmg-infolettre__message--erreur {
	border-color: var(--jmg-erreur);
	color: var(--jmg-erreur);
	background-color: rgba(165, 31, 30, 0.07);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A51F1E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Ccircle cx='12' cy='16.5' r='.6' fill='%23A51F1E'/%3E%3C/svg%3E");
}

@media (max-width: 640px) {
	/* Le champ et le bouton s'empilent, chacun sur toute la largeur. */
	.jmg-infolettre__form {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   5k. Numéros de la revue
   ========================================================================== */

.jmg-revue__entete {
	font-size: var(--jmg-t-sm);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--jmg-or);
	margin-block: 0 var(--jmg-e-3);
}

.jmg-revue__sommaire p,
.jmg-revue__sommaire li {
	color: var(--jmg-texte-doux);
}

/*
 * Les numéros passent par les cartes de la boutique : le catalogue et la revue
 * se lisent de la même façon, et la bascule grille/liste vaut pour les deux.
 * Ne restent ici que les deux ajouts propres à un numéro, le rang avec sa
 * période et le sommaire replié.
 */

.jmg-numeros {
	margin-block: 0 var(--jmg-e-9);
}

.jmg-numeros__barre {
	margin-block: 0 var(--jmg-e-5);
}

.jmg-numeros__tri {
	margin: 0;
}

.jmg-numeros__tri select {
	background-color: var(--jmg-fond-carte);
	border-color: var(--jmg-bordure);
	font-size: var(--jmg-t-sm);
}

@media (max-width: 640px) {
	.jmg-numeros__tri,
	.jmg-numeros__tri select {
		width: 100%;
	}
}

.jmg-carte-numero__meta {
	font-size: var(--jmg-t-sm);
	color: var(--jmg-texte-discret);
	margin-block: 0 var(--jmg-e-2);
}

.jmg-carte-numero__sommaire {
	margin-block: var(--jmg-e-3) 0;
	border: none;
	padding: 0;
	font-size: var(--jmg-t-sm);
}

.jmg-carte-numero__sommaire summary {
	font-family: var(--jmg-corps);
	font-size: var(--jmg-t-sm);
	color: var(--jmg-or);
	cursor: pointer;
	padding-right: 1.5rem;
}

.jmg-carte-numero__sommaire summary::after {
	font-size: 1.1rem;
}

.jmg-carte-numero__sommaire p,
.jmg-carte-numero__sommaire li {
	color: var(--jmg-texte-doux);
	text-align: left;
}

/*
 * En grille, le sommaire dépliant est un pense-bête : plafonné, il ne pousse
 * pas les cartes voisines hors de la ligne. En liste, il a la place de se
 * déployer entièrement.
 */
.products-list-view .jmg-carte-numero__sommaire[open] {
	max-height: none;
	overflow: visible;
}

.jmg-carte-numero__sommaire[open] {
	max-height: 16rem;
	overflow-y: auto;
}

/* ==========================================================================
   5l. Index des thèmes
   ========================================================================== */

/*
 * L'index se lit comme la table des matières d'un volume : un nom, une
 * conduite pointillée, un nombre. Cet idiome règle d'un coup le défaut le plus
 * voyant de la version précédente, un nombre lâché seul à trois centimètres de
 * son nom, que l'œil ne savait plus rattacher à rien.
 *
 * Le bloc s'accroche à woocommerce_after_main_content en priorité 20, donc
 * après la fermeture du conteneur WooCommerce : il lui faut son propre
 * .jmg-conteneur, faute de quoi il vient buter contre le bord gauche de la
 * fenêtre pendant que la grille des ouvrages reste alignée sur la page.
 */
.jmg-index-themes {
	position: relative;
	margin-block: var(--jmg-e-8) 0;
	padding-block: var(--jmg-e-7) var(--jmg-e-8);
}

/* Filet d'or de séparation plutôt qu'un trait gris : la bande de l'infolettre
   qui suit apporte déjà sa bordure, deux filets gris de suite feraient un
   empilement de traits sans hiérarchie. */
.jmg-index-themes::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 1px;
	background-image: linear-gradient(
		90deg,
		transparent 0%,
		var(--jmg-or-doux) 18%,
		var(--jmg-or) 50%,
		var(--jmg-or-doux) 82%,
		transparent 100%
	);
	opacity: 0.85;
}

.jmg-index-themes__titre {
	font-size: var(--jmg-t-h3);
	font-weight: 500;
	margin-block: 0 var(--jmg-e-6);
}

/*
 * L'index coule en colonnes de texte, il ne se pose pas dans des cellules de
 * grille. Une grille cale chaque rangée sur son groupe le plus haut : « Ovnis »
 * et sa ligne unique ouvraient un vide de la hauteur de « Survie et
 * paranormal » et de ses six sous-thèmes, et l'ensemble se lisait comme un
 * damier troué où l'œil ne trouvait plus de suite. Les colonnes CSS enchaînent
 * les groupes et équilibrent d'elles-mêmes les hauteurs, comme l'index d'un
 * volume imprimé.
 *
 * 264px : la colonne doit tenir le nom le plus long, sa conduite et son nombre
 * sans que la conduite se réduise à deux points. Trois colonnes au maximum,
 * au-delà les noms se couperaient.
 */
.jmg-index-themes__liste {
	columns: 3 264px;
	column-gap: var(--jmg-e-8);
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Une porte et ses sous-thèmes forment un bloc qui ne se coupe pas entre
   deux colonnes. La marque du groupe se prend en bas : en haut, elle
   décrocherait le premier groupe de chaque colonne d'un cran que ses voisins
   n'auraient pas. */
.jmg-index-themes__groupe {
	break-inside: avoid;
	margin: 0 0 var(--jmg-e-6);
}

/* La colonne ne traîne pas une marge sous sa dernière porte. */
.jmg-index-themes__groupe:last-child {
	margin-bottom: 0;
}

.jmg-index-themes__porte {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--jmg-or-doux);
	font-family: var(--jmg-titre);
	font-size: var(--jmg-t-lg);
	font-weight: 500;
	line-height: 1.3;
	max-width: none;
}

/*
 * Les sous-thèmes rentrent d'un cran sous leur porte. Le retrait ne touche que
 * le bord gauche : les nombres restent alignés sur ceux des portes, et la
 * colonne de chiffres tient d'un bout à l'autre de l'index.
 *
 * Ce cran porte une information, et il évite un contresens. Une porte annonce
 * son total, sous-thèmes compris, quand les lignes en dessous ne comptent
 * qu'elles-mêmes ; à plat, les deux niveaux avaient la même allure et l'œil
 * additionnait des nombres qui ne devaient pas s'additionner.
 */
.jmg-index-themes__enfants {
	list-style: none;
	padding: 0 0 0 var(--jmg-e-3);
	margin: 0;
}

/*
 * La ligne entière est cliquable, nombre compris. Elle faisait 25px de haut,
 * elle en fait 48 : la cible du système, calibrée sur une main qui vise moins
 * bien. La hauteur vient du padding et non d'un min-height, qui obligerait à
 * centrer et casserait l'alignement de la conduite sur la ligne de base.
 */
.jmg-index-themes__ligne {
	display: flex;
	align-items: baseline;
	gap: var(--jmg-e-2);
	padding-block: 0.7rem;
	font-size: var(--jmg-t-sm);
	text-decoration: none;
	color: var(--jmg-texte-doux);
	transition: color var(--jmg-transition);
}

.jmg-index-themes__porte .jmg-index-themes__ligne {
	font-family: inherit;
	font-size: inherit;
	color: var(--jmg-texte);
}

.jmg-index-themes__nom {
	flex: 0 1 auto;
}

/*
 * La conduite mène l'œil du nom au nombre sans jamais se lire comme un
 * soulignement de lien. Les points sont posés au dégradé radial et non avec
 * border-bottom: dotted : le pointillé natif serre ses points au point de
 * rendre un trait presque plein, qui se confondrait alors avec le filet de la
 * porte juste au-dessus. Ici le pas est de 6px pour un point de 1px, et la
 * conduite reste une trame, pas une ligne.
 */
.jmg-index-themes__conduite {
	flex: 1 1 var(--jmg-e-4);
	min-width: var(--jmg-e-3);
	align-self: baseline;
	height: 1px;
	transform: translateY(-0.28em);
	background-image: radial-gradient(circle at center, var(--jmg-bordure) 0 0.5px, transparent 0.5px);
	background-size: 6px 1px;
	background-repeat: repeat-x;
	background-position: 0 100%;
	opacity: 0.85;
}

/* La porte a déjà son filet plein : une conduite en plus ferait deux traits
   sur la même ligne. Le span reste, il pousse le nombre au bout. */
.jmg-index-themes__porte .jmg-index-themes__conduite {
	background-image: none;
}

/*
 * Les chiffres passent en Inter et en chasse fixe, y compris sur la ligne de
 * porte qui est en Playfair. Playfair sort des chiffres elzéviriens, à hampes
 * et à jambages : un 3 y descend sous la ligne de base et un 1 monte moins
 * haut que ses voisins, ce qui suffit à faire boiter une colonne de nombres.
 */
.jmg-index-themes__compte {
	flex: 0 0 auto;
	font-family: var(--jmg-corps);
	font-size: var(--jmg-t-xs);
	font-variant-numeric: lining-nums tabular-nums;
	font-feature-settings: "lnum" 1, "tnum" 1;
	color: var(--jmg-texte-discret);
}

/* Le total d'une porte pèse plus lourd que le compte d'un sous-thème : c'est
   lui qui dit l'ampleur du rayon, il se lit donc dans l'encre du texte et non
   dans le gris des mentions brèves. */
.jmg-index-themes__porte .jmg-index-themes__compte {
	font-size: var(--jmg-t-sm);
	color: var(--jmg-texte-doux);
}

.jmg-index-themes__ligne:hover,
.jmg-index-themes__ligne:focus-visible {
	color: var(--jmg-or-fort);
}

.jmg-index-themes__ligne:hover .jmg-index-themes__nom,
.jmg-index-themes__ligne:focus-visible .jmg-index-themes__nom {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.jmg-index-themes__ligne:hover .jmg-index-themes__compte,
.jmg-index-themes__ligne:focus-visible .jmg-index-themes__compte {
	color: var(--jmg-or-fort);
}

/* Le thème ouvert n'est signalé ni par la seule couleur ni par le seul
   survol : la graisse le tient, aria-current le dit. */
.jmg-index-themes__ligne--courant {
	color: var(--jmg-texte);
	font-weight: 600;
}

/* ==========================================================================
   6. Formulaire manuscrit
   ========================================================================== */

.jmg-manuscrit {
	max-width: 720px;
	margin-inline: auto;
}

/*
 * Ces sections sont des <fieldset>. Seule la bordure basse était déclarée,
 * les trois autres restaient donc celles du navigateur, un bleu-gris qui
 * n'appartient à aucune teinte du site. Invisible sur fond sombre, franc sur
 * crème. On repart de zéro, et le padding latéral par défaut disparaît avec.
 */
.jmg-manuscrit__section {
	margin-block: 0 var(--jmg-e-7);
	padding: 0 0 var(--jmg-e-6);
	border: 0;
	border-bottom: 1px solid var(--jmg-bordure);
	min-inline-size: 0;
}

.jmg-manuscrit__section:last-of-type {
	border-bottom: none;
}

.jmg-manuscrit__legende {
	font-family: var(--jmg-titre);
	font-size: var(--jmg-t-h4);
	color: var(--jmg-texte);
	padding: 0;
	margin-block: 0 var(--jmg-e-5);
}

.jmg-champ {
	margin-block: 0 var(--jmg-e-5);
}

.jmg-champ__label {
	display: block;
	font-size: var(--jmg-t-sm);
	font-weight: 500;
	color: var(--jmg-texte);
	margin-block: 0 var(--jmg-e-2);
}

.jmg-champ__requis {
	color: var(--jmg-or);
	margin-left: 0.2em;
}

.jmg-champ__aide {
	display: block;
	font-size: var(--jmg-t-xs);
	color: var(--jmg-texte-discret);
	margin-block: var(--jmg-e-2) 0;
	line-height: 1.5;
}

.jmg-champ__erreur {
	display: block;
	font-size: var(--jmg-t-xs);
	color: var(--jmg-erreur);
	margin-block: var(--jmg-e-2) 0;
}

.jmg-champ--erreur input,
.jmg-champ--erreur select,
.jmg-champ--erreur textarea {
	border-color: var(--jmg-erreur);
}

.jmg-champ textarea {
	min-height: 180px;
	resize: vertical;
}

.jmg-champ--case {
	display: flex;
	align-items: flex-start;
	gap: var(--jmg-e-3);
}

/*
 * Case à cocher. 18px était sous tous les seuils : la case passe à 26px et
 * l'étiquette reçoit assez de hauteur pour que la ligne entière, qui est
 * cliquable, dépasse les 48px de cible.
 */
.jmg-champ--case input[type="checkbox"] {
	width: 1.625rem;
	height: 1.625rem;
	margin-top: 0.15rem;
	flex-shrink: 0;
	accent-color: var(--jmg-or);
	cursor: pointer;
}

.jmg-champ--case label {
	display: block;
	min-height: var(--jmg-cible);
	padding-block: 0.35rem;
	cursor: pointer;
	font-size: var(--jmg-t-sm);
	color: var(--jmg-texte-doux);
	line-height: 1.6;
}

.jmg-grille-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 var(--jmg-e-5);
}

.jmg-piege {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Même règle que pour les messages d'infolettre : pictogramme en plus de la
   couleur, image de fond pour rester muette au lecteur d'écran. */
.jmg-message {
	padding: var(--jmg-e-5) var(--jmg-e-5) var(--jmg-e-5) 3.75rem;
	border-radius: var(--jmg-rayon-lg);
	margin-block: 0 var(--jmg-e-6);
	border: 2px solid;
	background-repeat: no-repeat;
	background-position: var(--jmg-e-5) var(--jmg-e-5);
	background-size: 1.5rem 1.5rem;
}

.jmg-message p:last-child {
	margin-bottom: 0;
}

.jmg-message--succes {
	background-color: rgba(31, 107, 65, 0.07);
	border-color: var(--jmg-succes);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F6B41' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.jmg-message--succes .jmg-message__titre {
	color: var(--jmg-succes);
}

.jmg-message--erreur {
	background-color: rgba(165, 31, 30, 0.07);
	border-color: var(--jmg-erreur);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A51F1E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Ccircle cx='12' cy='16.5' r='.6' fill='%23A51F1E'/%3E%3C/svg%3E");
}

.jmg-message--erreur .jmg-message__titre {
	color: var(--jmg-erreur);
}

.jmg-message__titre {
	font-family: var(--jmg-titre);
	font-size: var(--jmg-t-h4);
	margin-block: 0 var(--jmg-e-2);
}

@media (max-width: 640px) {
	.jmg-grille-2 {
		grid-template-columns: 1fr;
		gap: 0;
	}
}

/* ==========================================================================
   7. Accessibilité
   ========================================================================== */

/* Le masquage accessible est défini une seule fois, en section 6, sous les
   deux noms en usage : .jmg-lecteur-ecran pour le thème, .screen-reader-text
   pour ce que produisent WordPress, WooCommerce et Kadence. */

/*
 * La section 8, « Signature (sceau) », a été retirée avec le bloc qu'elle
 * habillait sur l'accueil : le colophon posait déjà le même logo et la même
 * phrase quelques centaines de pixels plus bas.
 * Le traitement du logo (mix-blend-mode et filtre) vit désormais dans
 * .jmg-citation-pied__logo et dans la règle des logos d'en-tête.
 */

@media (max-width: 760px) {
	.jmg-accueil__hero-inner {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   6. Accessibilité

   Ce qui ne relève pas d'un composant en particulier : le masquage
   accessible, le lien d'évitement, le plancher de cible cliquable et les
   quelques endroits où WooCommerce produit un balisage trop serré.
   ========================================================================== */

/*
 * Contenu réservé aux lecteurs d'écran. Repris du modèle WordPress : clip
 * plutôt que display:none, sinon la synthèse vocale ne le lit pas non plus.
 */
.screen-reader-text,
.jmg-lecteur-ecran {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/*
 * Lien d'évitement. Kadence l'émet déjà vers #main ; on le rend franc quand
 * il prend le focus, au lieu du filet discret par défaut. C'est le premier
 * élément atteint à la tabulation, il doit se voir sans hésitation.
 */
.skip-link.screen-reader-text:focus {
	position: fixed;
	top: var(--jmg-e-3);
	left: var(--jmg-e-3);
	z-index: 100000;
	width: auto;
	height: auto;
	margin: 0;
	padding: var(--jmg-e-3) var(--jmg-e-5);
	overflow: visible;
	clip: auto;
	clip-path: none;
	background-color: var(--jmg-or-vif);
	color: var(--jmg-texte);
	font-family: var(--jmg-corps);
	font-size: var(--jmg-t-base);
	font-weight: 600;
	text-decoration: none;
	border: 2px solid var(--jmg-or);
	border-radius: var(--jmg-rayon);
	outline: 3px solid var(--jmg-or);
	outline-offset: 3px;
}

/*
 * Plancher de cible cliquable. WCAG 2.5.8 se contente de 24px ; on vise 48,
 * calibré sur une main qui tremble. Les liens inclus dans une phrase sont
 * exclus : les agrandir casserait l'interligne du paragraphe, et la norme
 * les exempte pour cette raison.
 */
.woocommerce-pagination a,
.woocommerce-pagination span,
.kadence-pagination a,
.nav-links a,
.page-numbers,
.woocommerce-MyAccount-navigation a,
.jmg-carte__lien,
#colophon .menu a,
.header-navigation .menu > li > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--jmg-cible);
	min-height: var(--jmg-cible);
	padding-inline: var(--jmg-e-3);
}

/* La carte du catalogue est un bloc, pas une pastille : elle reprend son
   alignement normal une fois la hauteur minimale acquise. */
.jmg-carte__lien {
	display: block;
	justify-content: initial;
	padding-inline: 0;
}

/* Écart minimal entre deux cibles voisines, pour éviter le clic à côté. */
.woocommerce-pagination ul,
.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jmg-e-2);
}

/*
 * Sélecteur de quantité WooCommerce. Le champ nombre nu impose de viser des
 * flèches de quelques pixels ; le module PHP lui adjoint deux vrais boutons.
 * Les trois pièces (moins, champ, plus) sont soudées en un seul contrôle,
 * plutôt que juxtaposées comme trois blocs disjoints : une bordure commune,
 * des filets internes en guise de séparation.
 */
.woocommerce .quantity {
	display: inline-flex;
	align-items: stretch;
	background-color: var(--jmg-fond-carte);
	border: 2px solid var(--jmg-bordure);
	border-radius: var(--jmg-rayon-lg);
}

.jmg-quantite__bouton {
	min-width: var(--jmg-cible);
	min-height: var(--jmg-cible);
	display: grid;
	place-items: center;
	background-color: transparent;
	color: var(--jmg-texte-doux);
	font-size: var(--jmg-t-h4);
	font-weight: 600;
	line-height: 1;
	border: none;
	cursor: pointer;
	transition: background-color var(--jmg-transition), color var(--jmg-transition);
}

.jmg-quantite__bouton[data-jmg-quantite="-1"] {
	border-right: 2px solid var(--jmg-bordure);
	border-radius: calc(var(--jmg-rayon-lg) - 2px) 0 0 calc(var(--jmg-rayon-lg) - 2px);
}

.jmg-quantite__bouton[data-jmg-quantite="1"] {
	border-left: 2px solid var(--jmg-bordure);
	border-radius: 0 calc(var(--jmg-rayon-lg) - 2px) calc(var(--jmg-rayon-lg) - 2px) 0;
}

/*
 * :hover réservé aux dispositifs qui survolent pour de vrai. Sur un écran
 * tactile, un simple tap active :hover et le garde « collé » tant que rien
 * d'autre n'est touché : le bouton qu'on vient de presser reste doré,
 * l'autre non, ce qui ressemble à une incohérence de style.
 */
@media (hover: hover) and (pointer: fine) {
	.jmg-quantite__bouton:hover {
		background-color: var(--jmg-fond-eleve);
		color: var(--jmg-or-fort);
	}
}

.jmg-quantite__bouton:active {
	background-color: var(--jmg-or-vif);
	color: var(--jmg-texte);
}

.woocommerce .quantity .qty {
	width: 4rem;
	min-height: var(--jmg-cible);
	background-color: transparent;
	border: none;
	border-radius: 0;
	text-align: center;
}

/*
 * Notices WooCommerce. Même règle que les messages du thème : pictogramme
 * en plus de la couleur, et une bordure franche plutôt qu'un simple fond.
 */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	padding: var(--jmg-e-4) var(--jmg-e-5) var(--jmg-e-4) 3.5rem;
	border: 2px solid;
	border-radius: var(--jmg-rayon);
	background-repeat: no-repeat;
	/* 1.15em ancre le pictogramme sur la première ligne du message, quelle que
	   soit la hauteur totale de la notice. Le fond est resté un fond, et non un
	   élément de la rangée : le message est un nœud de texte nu, sans balise
	   propre, et un pseudo-élément placé devant lui le ferait passer à la ligne
	   au lieu de rétrécir. */
	background-position: var(--jmg-e-4) 1.15em;
	background-size: 1.5rem 1.5rem;
	font-size: var(--jmg-t-base);
}

/* Kadence pose son propre retrait sur ces trois notices, et un liseré latéral
   de 5px que le système de design du site proscrit : une notice se signale par
   un cadre franc et un pictogramme, pas par une barre de couleur sur un bord.
   Seules la largeur et le retrait sont réaffirmés ici, jamais la couleur, que
   les règles de rôle posent plus bas. */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
	padding: var(--jmg-e-4) var(--jmg-e-5) var(--jmg-e-4) 3.5rem;
	border-width: 2px;
}

/*
 * WooCommerce ferme ses notices par des pseudo-éléments de dégagement de
 * flottants. Dans une rangée souple ils deviennent deux éléments vides de
 * plus, qui ajoutent des écarts et ne dégagent plus rien.
 */
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-message::after,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-info::after,
.woocommerce .woocommerce-error::before,
.woocommerce .woocommerce-error::after,
.woocommerce-message::before,
.woocommerce-message::after,
.woocommerce-info::before,
.woocommerce-info::after,
.woocommerce-error::before,
.woocommerce-error::after {
	display: none;
}

/*
 * WooCommerce pose le lien « Voir le panier » en `float: right` au milieu du
 * flux du texte. Sur une largeur étroite, le bouton flotté monte au-dessus de
 * la première ligne et pousse le message dans une colonne étroite à sa gauche,
 * sous le pictogramme : la phrase se lit après le bouton qui la commande.
 *
 * La notice devient donc une rangée souple. Le message est un nœud de texte
 * nu, sans balise : il ne peut pas porter de règle propre, mais il devient
 * bien un élément flex anonyme, ce qui suffit. D'où la marge automatique sur
 * le bouton seul pour l'écarter à droite, et la base de 100% sous le point de
 * rupture mobile pour le renvoyer sous la phrase, en pleine largeur.
 */
.woocommerce .woocommerce-message,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error li {
	display: flex;
	/* Kadence bascule cette notice en `column-reverse` sous 540px, ce qui met
	   le bouton avant la phrase qui l'explique et renvoie le pictogramme en
	   dernier. La direction est donc réaffirmée, à spécificité égale. */
	flex-direction: row;
	flex-wrap: wrap;
	/* Le haut, pas le centre : le pictogramme de fond est ancré sur la
	   première ligne du message, et un centrage ferait descendre le texte
	   sous lui dès que le bouton rend la rangée plus haute. */
	align-items: flex-start;
	column-gap: var(--jmg-e-4);
	row-gap: var(--jmg-e-4);
}

.woocommerce .woocommerce-message .button,
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
	float: none;
	margin-inline-start: auto;
	flex-shrink: 0;
}

/*
 * Sous le point de rupture mobile, le bouton passe sous la phrase, sur toute
 * la largeur. Il n'est plus une fin de ligne mais l'action de la notice : sa
 * cible couvre alors le pouce quel que soit l'endroit visé.
 */
@media (max-width: 640px) {
	.woocommerce .woocommerce-message .button,
	.woocommerce-message .button,
	.woocommerce-info .button,
	.woocommerce-error .button {
		flex-basis: 100%;
		margin-inline-start: 0;
		/* Kadence pose sa propre marge haute sous 540px : elle ferait double
		   emploi avec le row-gap de la rangée. */
		margin-block: 0;
	}
}

.woocommerce-message {
	border-color: var(--jmg-succes);
	color: var(--jmg-succes);
	background-color: rgba(31, 107, 65, 0.07);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F6B41' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.woocommerce-info {
	border-color: var(--jmg-or);
	color: var(--jmg-or);
	background-color: rgba(110, 86, 10, 0.07);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E560A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 16.5V11'/%3E%3Ccircle cx='12' cy='7.5' r='.6' fill='%236E560A'/%3E%3C/svg%3E");
}

.woocommerce-error {
	border-color: var(--jmg-erreur);
	color: var(--jmg-erreur);
	background-color: rgba(165, 31, 30, 0.07);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A51F1E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Ccircle cx='12' cy='16.5' r='.6' fill='%23A51F1E'/%3E%3C/svg%3E");
	list-style: none;
}

/* Une notice peut porter plusieurs erreurs : les lignes gardent un écart
   lisible entre elles. */
.woocommerce-error li + li {
	margin-block-start: var(--jmg-e-3);
}

/*
 * Plancher de taille sur ce que WooCommerce et Kadence produisent en petit.
 * Le thème tient son plancher de 16px sur ses propres composants, mais les
 * mentions du plugin (catégorie, étiquettes, référence, onglets, résumé de
 * commande) descendent plus bas et échappent aux variables du thème.
 */
.woocommerce .product_meta,
.woocommerce .product_meta a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a,
.woocommerce table.shop_table,
.woocommerce table.shop_table td,
.woocommerce table.shop_table th,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper,
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering select,
.woocommerce-MyAccount-navigation a,
.entry-hero .archive-description,
#colophon .site-bottom-footer-wrap {
	font-size: var(--jmg-t-sm);
}

/* Récapitulatif d'erreurs en tête de formulaire, posé par le module PHP. */
.jmg-erreurs {
	margin-block: 0 var(--jmg-e-5);
}

.jmg-erreurs ul {
	margin: var(--jmg-e-2) 0 0;
	padding-inline-start: var(--jmg-e-5);
}

.jmg-erreurs a {
	color: inherit;
}

/* Champ en erreur : la bordure rouge ne suffit pas, le message relié par
   aria-describedby porte le texte. */
.jmg-champ--erreur input,
.jmg-champ--erreur select,
.jmg-champ--erreur textarea,
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
	border-color: var(--jmg-erreur);
}

.jmg-champ__erreur {
	display: block;
	margin-top: var(--jmg-e-2);
	color: var(--jmg-erreur);
	font-size: var(--jmg-t-sm);
	font-weight: 600;
}

/*
 * Étiquette de champ. Visible, au-dessus, jamais remplacée par un
 * placeholder.
 */
.jmg-champ > label,
.woocommerce form .form-row label {
	display: block;
	margin-bottom: var(--jmg-e-2);
	font-weight: 600;
	color: var(--jmg-texte);
}

/* ==========================================================================
   Le portail, le renvoi vers parasciences.net
   --------------------------------------------------------------------------
   Dernière bande de chaque page, juste avant le colophon, et le seul aplat de
   couleur pleine du site. Elle a d'abord été traitée en colophon, sur le crème
   de la page : c'était juste et c'était invisible, coincé entre l'infolettre
   et le pied de page qui sont crème l'un et l'autre. Une bande dont l'objet
   est d'être remarquée ne peut pas se distinguer de ses voisines par la seule
   valeur du fond.

   L'aplat est le bleu du logo de la maison, assombri de douze centièmes de
   clarté à teinte et saturation inchangées. L'assombrissement n'est pas un
   goût : le bleu du logo tel quel, oklch(0.56 0.141 245), tombe dans la zone
   médiane où plus rien ne passe, 4.31:1 avec le crème et 3.69 avec l'encre.
   Ni texte clair ni texte sombre n'y auraient tenu. À oklch(0.435 0.123 250),
   le crème donne 7.42:1, et la couleur reste reconnaissable comme celle du
   logo.

   C'est le seul endroit du site où le texte est clair sur fond sombre. La
   règle du fond clair vise la lecture longue d'un lectorat âgé ; trois lignes
   de renvoi en pied de page n'en sont pas. L'interligne est tout de même
   ouvert d'un cran : un texte clair sur fond sombre se lit plus maigre qu'il
   n'est, et demande plus d'air.

   Pas d'or sur cet aplat. L'or du site n'y donne que 3.28:1, et surtout cette
   bande n'est pas l'endroit où la maison parle d'elle-même : le filet sous
   l'adresse est donc au crème, et le bouton est plein crème là où tous les
   autres boutons du site sont or.
   ========================================================================== */

.jmg-portail {
	position: relative;
	/* L'aplat déborde des deux côtés : l'enseigne inclinée sort du conteneur
	   sur les grands écrans, et rien ne doit pouvoir pousser une barre de
	   défilement horizontale. */
	overflow: hidden;
	background-color: var(--jmg-portail-bleu);
	padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.jmg-portail__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 48%);
	align-items: center;
	column-gap: clamp(2rem, 5vw, 4.5rem);
	row-gap: clamp(2rem, 4vw, 3rem);
}

.jmg-portail__surtitre,
.jmg-portail__adresse,
.jmg-portail__phrase {
	color: var(--jmg-fond);
}

/* L'enseigne. Elle passe de deux à quatre fois le corps du texte : c'est
   l'écart d'échelle qui fait qu'on la voit avant de la lire. Le
   letter-spacing reste négatif, Playfair espace trop à ce corps pour une
   chaîne qui doit se lire d'un bloc, comme un nom propre. */
.jmg-portail__adresse {
	/* width fit-content pour que le filet posé en ::after mesure exactement
	   la longueur de l'adresse, et pas celle de la colonne. */
	width: fit-content;
	margin-block: var(--jmg-e-2) var(--jmg-e-5);
	font-family: var(--jmg-titre);
	font-size: clamp(2.125rem, 1.4rem + 3.2vw, 4rem);
	font-weight: 500;
	line-height: 1.02;
	letter-spacing: -0.025em;
}

/* Le filet est au crème et non à l'or, qui serait illisible sur ce bleu.
   Il reste aligné sur l'adresse et pas sur la colonne. */
.jmg-portail__adresse::after {
	content: "";
	display: block;
	height: 2px;
	margin-block-start: var(--jmg-e-3);
	background-image: linear-gradient(
		90deg,
		var(--jmg-fond),
		rgba(250, 247, 240, 0.4) 70%,
		transparent
	);
}

.jmg-portail__phrase {
	margin-block: 0;
	max-width: 42ch;
	/* Jamais sous le corps de lecture du site : --jmg-t-lg tombe à 18px sur
	   les écrans étroits, soit un pixel de moins que le texte courant, ce qui
	   n'a pas de sens pour la phrase d'un appel. */
	font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem);
	/* Un cran de plus que le corps du site : le texte clair sur fond sombre
	   se lit plus maigre qu'il n'est, et demande plus d'air. */
	line-height: 1.85;
}

.jmg-portail__action {
	margin-block: clamp(1.75rem, 3vw, 2.5rem) 0;
	max-width: none;
}

/* Le bouton du portail est le seul du site à ne pas être or : sur ce bleu,
   l'or de bouton tomberait à 3.28:1, et un départ hors du site n'a de toute
   façon pas à porter la couleur des actions de la maison. Il est donc plein
   crème, encre sur crème, et il se creuse au survol. */
.jmg-portail__lien {
	display: inline-flex;
	align-items: center;
	gap: var(--jmg-e-3);
	min-height: var(--jmg-cible);
	/* Calage horizontal d'un cran plus serré depuis que la bande porte deux
	   destinations : à 2rem, les deux boutons demandaient douze pixels de plus
	   que la colonne n'en offre et passaient l'un sous l'autre. La hauteur de
	   cible, elle, ne bouge pas. */
	padding: 0.9rem var(--jmg-e-5);
	border: 2px solid var(--jmg-fond);
	border-radius: var(--jmg-rayon);
	background-color: var(--jmg-fond);
	color: var(--jmg-texte);
	font-family: var(--jmg-corps);
	font-size: var(--jmg-t-base);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--jmg-transition), color var(--jmg-transition);
}

/* Au survol, le bouton se vide plutôt que de s'inverser : le crème est déjà
   la valeur la plus claire disponible, et l'inversion vers l'encre ferait un
   trou noir dans la bande. */
.jmg-portail__lien:hover,
.jmg-portail__lien:focus-visible {
	background-color: transparent;
	color: var(--jmg-fond);
	text-decoration: none;
}

/* L'anneau de focus passe au crème : l'or réglementaire du site ne se
   détacherait pas de ce bleu. */
.jmg-portail :focus-visible {
	outline-color: var(--jmg-fond);
}

/* La flèche est dessinée en SVG et prend la couleur du libellé, y compris au
   survol où le bouton se renverse. */
.jmg-portail__fleche,
.jmg-portail__lecture {
	flex: none;
	color: currentColor;
}

/* Le logo de YouTube précède son libellé, là où la flèche de départ le suit :
   l'un dit où l'on va, l'autre indique qu'on s'en va. Il garde sa forme et sa
   couleur de marque, sans déformation : c'est ce que demandent les règles
   d'usage de la plateforme, et c'est ce qui le rend reconnaissable. */
.jmg-portail__youtube {
	flex: none;
	width: 28px;
	height: 20px;
}

/* Deux actions dans la bande, toutes deux en bouton plein. Le second l'est
   devenu par nécessité : le rouge de YouTube ne donne que 1.98:1 sur le bleu
   de l'aplat, sous le seuil de 3:1 que WCAG 1.4.11 demande à un élément
   graphique porteur de sens, et il fallait un fond clair sous lui, où il
   tient 3.74. Ce sont donc le logo et le mot YouTube qui distinguent les deux
   destinations, et non plus l'écart entre un bouton plein et un contour. */
.jmg-portail__action {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jmg-e-4);
}

/* Au survol, le second bouton ne se vide pas comme le premier : le logo y
   perdrait le fond clair dont il a besoin. Il s'assombrit d'un cran, ce qui
   suffit à marquer l'état sans toucher au contraste du logo. */
.jmg-portail__lien--second:hover,
.jmg-portail__lien--second:focus-visible {
	background-color: var(--jmg-fond-bande);
	color: var(--jmg-texte);
}

/* L'enseigne de Parasciences, posée comme un tirage encadré. L'inclinaison
   reste sous trois degrés : au-delà, l'objet cesse d'être posé et devient un
   effet. Le liseré crème tient lieu de marge de tirage, et il est devenu
   indispensable en passant au bleu profond : l'enseigne est sombre, l'aplat
   l'est aussi, sans lui le visuel se dissoudrait dans le fond. */
.jmg-portail__enseigne {
	display: block;
	transform: rotate(-2deg);
}

.jmg-portail__enseigne img {
	display: block;
	width: 100%;
	height: auto;
	border: 6px solid var(--jmg-fond);
	border-radius: var(--jmg-rayon);
	box-shadow: 0 30px 50px -28px rgba(26, 28, 36, 0.75);
	transition: box-shadow 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   L'enseigne se redresse quand la souris entre dans la bande
   --------------------------------------------------------------------------
   Le tirage posé de travers se redresse, s'avance et se décolle : c'est le
   geste de quelqu'un qui prend une photographie sur une table pour la
   regarder. Il tient en trois transformations et une ombre, aucune propriété
   de mise en page n'est animée.

   Le déclencheur est la bande entière, pas l'image : l'enseigne est
   décorative et n'est pas un lien, c'est le bouton qui l'est. Réagir à
   l'approche de la souris sur toute la bande signale que ce bandeau mène
   quelque part, ce que l'image seule ne pourrait pas dire puisqu'on ne clique
   pas dessus. Le focus clavier déclenche la même chose, par focus-within :
   quelqu'un qui atteint le bouton à la tabulation voit le même mouvement.

   Au-dessus de 860 pixels seulement, c'est-à-dire là où l'enseigne est
   inclinée et où il y a une souris. En dessous elle est déjà droite et posée
   sous le texte, la redresser ne voudrait rien dire.
   -------------------------------------------------------------------------- */

@media (min-width: 861px) {
	.jmg-portail__enseigne {
		transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
	}

	.jmg-portail:hover .jmg-portail__enseigne,
	.jmg-portail:focus-within .jmg-portail__enseigne {
		transform: rotate(0deg) translateY(-10px) scale(1.03);
	}

	/* L'ombre suit le mouvement : un objet qui se lève porte plus loin. */
	.jmg-portail:hover .jmg-portail__enseigne img,
	.jmg-portail:focus-within .jmg-portail__enseigne img {
		box-shadow: 0 44px 64px -30px rgba(26, 28, 36, 0.85);
	}
}

@media (min-width: 1240px) {
	/* Sur les grands écrans, l'enseigne sort du conteneur par la droite : une
	   bande dont l'objet est de ne pas se fondre dans la page gagne à ce que
	   quelque chose y dépasse. Le débordement est encaissé par l'overflow
	   hidden posé sur la bande. */
	.jmg-portail__enseigne {
		margin-right: -12%;
	}
}

@media (max-width: 860px) {
	.jmg-portail__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.jmg-portail__phrase {
		max-width: var(--jmg-largeur-texte);
	}

	/* Les deux départs se centrent avec l'enseigne qu'ils accompagnent, comme
	   les autres appels à l'action du site sur une seule colonne. Le nom du
	   site et sa phrase restent à gauche : ce sont eux qui se lisent, et le
	   filet sous l'adresse est aligné sur elle. */
	.jmg-portail__action {
		justify-content: center;
	}

	/* L'enseigne passe sous le texte et se redresse : inclinée sur une seule
	   colonne, elle mangerait la marge des deux côtés pour rien. */
	.jmg-portail__enseigne {
		transform: none;
	}
}

/* ==========================================================================
   Propagation du système de l'accueil au reste du site
   --------------------------------------------------------------------------
   L'accueil a été refait le 27 août 2026 sur trois principes, et il était
   seul à les tenir : les couvertures portent la page et ne sont jamais mises
   en vignette encadrée ; les sections s'ouvrent sur trois corps franchement
   séparés, surtitre, titre et filet d'or ; le rythme vertical se fait par
   variation. Ce bloc les étend au catalogue, à la fiche d'ouvrage, aux
   auteurs et aux pages intérieures.

   Le tunnel d'achat n'en est pas : panier, commande et compte client se
   traitent en register produit, la forme s'y efface derrière la tâche.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Les couvertures, partout
   --------------------------------------------------------------------------
   Une couverture était jusqu'ici enfermée dans une boîte au format 5/7,
   bordée d'un trait beige, et centrée dedans. Deux défauts : le trait double
   le bord déjà imprimé de l'ouvrage, et la boîte fait flotter les formats
   atypiques, revues et albums, au milieu d'un vide. Elles sont désormais
   posées sur une ligne de pied commune, avec l'ombre et le liseré de tranche
   du reste du site.
   -------------------------------------------------------------------------- */

/* Grilles internes : fiche d'ouvrage, fiche auteur, « du même auteur »,
   « dans le même thème ». */

/* Le socle porte la ligne de pied commune du rang. */
.jmg-carte__socle {
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	min-height: clamp(170px, 17vw, 240px);
	margin-block: 0 var(--jmg-e-4);
}

.jmg-carte__image {
	width: auto;
	max-width: 100%;
	aspect-ratio: auto;
	max-height: clamp(170px, 17vw, 240px);
	height: auto;
	object-fit: contain;
	margin-block: 0;
	border: 1px solid var(--jmg-tranche);
	border-radius: 0;
	box-shadow: 0 18px 28px -22px rgba(26, 28, 36, 0.55);
	transition: transform var(--jmg-transition);
}

/* Le visuel d'attente n'est pas un objet imprimé : il ne porte donc ni
   l'ombre ni le liseré de tranche des couvertures. */
.jmg-carte__image--attente {
	border-color: transparent;
	box-shadow: none;
	opacity: 0.7;
}

.jmg-carte__lien:hover .jmg-carte__image,
.jmg-carte__lien:focus-visible .jmg-carte__image {
	border-color: var(--jmg-tranche);
	transform: translateY(-6px);
}

.jmg-carte__lien:hover .jmg-carte__image--attente,
.jmg-carte__lien:focus-visible .jmg-carte__image--attente {
	transform: none;
}

/* Boucles WooCommerce : catalogue, archives de thème, résultats de
   recherche. Même traitement, même raison. */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img.attachment-woocommerce_thumbnail,
.wc-block-grid__product-image img {
	width: auto;
	max-width: 100%;
	aspect-ratio: auto;
	max-height: clamp(190px, 19vw, 260px);
	height: auto;
	object-fit: contain;
	margin-inline: 0;
	border: 1px solid var(--jmg-tranche);
	box-shadow: 0 18px 28px -22px rgba(26, 28, 36, 0.55);
	transition: transform var(--jmg-transition);
}

.woocommerce ul.products li.product:hover a img,
.woocommerce ul.products li.product:focus-within a img {
	transform: translateY(-6px);
}

/* La case de produit n'est plus une carte : le cadre et le fond faisaient
   une vignette de site marchand autour d'un objet qui a déjà son bord. Reste
   le filet de pied, qui donne son assise au rang et sépare deux ouvrages
   sans les enfermer. */
.woocommerce ul.products li.product,
.wc-block-grid__product {
	display: flex;
	flex-direction: column;
	background-color: transparent;
	border: none;
	border-bottom: 1px solid var(--jmg-bordure);
	border-radius: 0;
	overflow: visible;
	padding: 0 0 var(--jmg-e-5);
	transition: border-color var(--jmg-transition);
}

.woocommerce ul.products li.product:hover,
.woocommerce ul.products li.product:focus-within,
.wc-block-grid__product:hover {
	border-bottom-color: var(--jmg-or);
}

/* La ligne de pied commune du rang. Le lien d'image devient la boîte qui la
   porte : les couvertures s'y calent par le bas, quelle que soit leur
   hauteur, et les titres partent tous de la même ligne. Sans cela, un album
   large et un roman haut décalent tout ce qui les suit, et le rang perd son
   assise. */
.woocommerce ul.products li.product .woocommerce-loop-image-link {
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	min-height: clamp(190px, 19vw, 260px);
	margin-block: 0 var(--jmg-e-4);
}

.woocommerce ul.products li.product .product-details {
	background: none;
	padding: 0;
}

/* Le bloc d'achat est poussé en pied de case, ce qui suppose que la colonne
   de texte soit elle-même un conteneur souple : les titres font une à trois
   lignes selon les ouvrages, et sans cela les boutons d'un même rang se
   retrouvent à quatre hauteurs différentes. Le calage est posé plus bas,
   avec le reste de la mise en forme du bloc d'action. */
.woocommerce ul.products li.product .product-details {
	display: flex;
	flex-direction: column;
	flex: 1;
}

/* La cible d'achat tient les 48 pixels du projet, y compris dans le style
   texte de Kadence, qui n'en fait que trente-trois. */
.woocommerce ul.products li.product .product-action-wrap .button,
.woocommerce ul.products li.product .product-action-wrap .button.add_to_cart_button {
	display: inline-flex;
	align-items: center;
	min-height: var(--jmg-cible);
}

/* --------------------------------------------------------------------------
   2. L'achat ne dépend plus du survol
   --------------------------------------------------------------------------
   Le fond de l'affaire est réglé en PHP, dans inc/catalogue-affichage.php :
   le style d'action de Kadence passe de « action-on-hover », son défaut, à
   « action-visible ». Le projet interdit toute interaction qui dépend du seul
   survol, et pour cause : il n'y en a pas au doigt, et un lecteur de
   soixante-quinze ans ne devine pas qu'il faut passer sur une vignette pour
   faire apparaître le moyen de l'acheter.

   Ne reste ici que la mise en forme du bloc ainsi rendu visible.
   -------------------------------------------------------------------------- */

/* « auto » et non un écart fixe : c'est ce qui pousse le bloc en pied de
   case et aligne les boutons d'un même rang. */
.woocommerce ul.products li.product .product-action-wrap {
	margin-block: auto 0;
	padding-block: var(--jmg-e-4) 0;
	padding-inline: 0;
	background: none;
	box-shadow: none;
}

/* --------------------------------------------------------------------------
   3. Les entêtes de section
   --------------------------------------------------------------------------
   Le h2 de section valait trente pixels et se répétait à l'identique d'un
   bout à l'autre d'une fiche. Il prend l'échelle et le filet de l'accueil :
   c'est l'écart entre les corps qui fait la hiérarchie, pas leur nombre.
   -------------------------------------------------------------------------- */

.jmg-section h2 {
	font-family: var(--jmg-titre);
	font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: -0.02em;
	margin-block: 0 clamp(1.75rem, 3vw, 2.5rem);
	text-wrap: balance;
}

.jmg-section h2::after {
	content: "";
	display: block;
	width: min(200px, 38%);
	height: 7px;
	margin-block: var(--jmg-e-4) 0;
	background-image:
		linear-gradient(90deg, var(--jmg-or), var(--jmg-or-doux)),
		radial-gradient(circle at 50% 50%, var(--jmg-or) 0 2.5px, transparent 3px),
		linear-gradient(90deg, var(--jmg-or-doux), transparent);
	background-size: calc(50% - 13px) 1px, 26px 100%, calc(50% - 13px) 1px;
	background-position: 0 50%, 50% 50%, 100% 50%;
	background-repeat: no-repeat;
}

/* --------------------------------------------------------------------------
   4. Le rythme et les séparations
   --------------------------------------------------------------------------
   Le trait beige d'un pixel qui ouvrait chaque section ne se voyait pas, et
   toutes les sections gardaient le même écart. Le filet d'or prend sa place,
   et l'écart devient fluide.
   -------------------------------------------------------------------------- */

.jmg-section {
	margin-block: clamp(3rem, 5.5vw, 5rem) 0;
	padding-block: clamp(2rem, 3.5vw, 3rem) 0;
	border-top: none;
	position: relative;
}

.jmg-section::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 1px;
	background-image: linear-gradient(
		90deg,
		var(--jmg-or-doux),
		var(--jmg-or) 25%,
		var(--jmg-or) 75%,
		var(--jmg-or-doux)
	);
	opacity: 0.55;
}

.jmg-section__lien {
	margin-block: clamp(1.75rem, 3vw, 2.5rem) 0;
	font-size: var(--jmg-t-base);
}

/* Comme sur l'accueil : un lien d'action isolé atteint les 48 pixels de
   cible que le projet s'impose, sans que la hauteur gagnée déplace rien. */
.jmg-section__lien a {
	display: inline-block;
	padding-block: 0.75rem;
	margin-block: -0.75rem;
}

/* --------------------------------------------------------------------------
   5. Le frontispice des pages intérieures
   --------------------------------------------------------------------------
   Le titre était centré, seul de tout le site à l'être, sur un dégradé qui
   n'appartenait à aucune autre surface. Il s'aligne à gauche comme le reste
   et prend l'échelle du h1 de l'accueil, moins un cran : l'accueil garde le
   plus grand titre du site.
   -------------------------------------------------------------------------- */

/* position: relative sert d'ancre au cachet « depuis 1997 »
   (jmg_cachet_maison(), accroché à kadence_entry_hero et
   kadence_entry_archive_hero dans functions.php), sur le même principe que
   les frontispices maison : ancré sur le bloc du titre, pas sur le bandeau
   pleine largeur qui l'entoure. Ses styles propres (fond, dorure, rotation)
   sont posés une seule fois, avec le frontispice de l'accueil, plus haut
   dans ce fichier. */
.entry-hero .entry-header {
	position: relative;
	text-align: left;
}

/* Sur les frontispices maison, le cachet hérite d'un top: 0 sans y toucher
   parce que sa colonne d'ancrage démarre déjà en retrait du bandeau (le fil
   d'Ariane au-dessus, ou le padding-block du bandeau lui-même). Ici, l'en-
   tête pose son propre padding-block sur sa propre boîte : top: 0 place
   donc le cachet avant que ce padding ne soit consommé, au ras du bandeau de
   navigation, à cheval sur le filet qui le sépare de la page. L'écart
   explicite ci-dessous rejoue le même dégagement que sur les frontispices
   maison, en dur plutôt que par un heureux hasard de mise en page. */
.entry-hero .jmg-cachet-maison {
	top: clamp(1.5rem, 4vw, 2.5rem);
}

.entry-hero .entry-header h1 {
	max-width: 20ch;
	margin-inline: 0;
	font-size: clamp(2.25rem, 1.6rem + 3vw, 4rem);
	line-height: 1.04;
}

/* Le filet du frontispice suit le titre : centré sous un titre aligné à
   gauche, il désignait le milieu de la page et rien d'autre. */
.entry-hero .entry-header h1::after {
	margin-inline: 0 auto;
}

.entry-hero .kadence-breadcrumbs,
.entry-hero .woocommerce-breadcrumb,
.entry-hero .archive-description,
.entry-hero .taxonomy-description {
	margin-inline: 0;
	text-align: left;
}

/* --------------------------------------------------------------------------
   6. La fiche d'ouvrage
   --------------------------------------------------------------------------
   La couverture est l'objet de la page : elle était encadrée d'un trait et
   tenait dans un tiers de la colonne. Elle est posée, avec l'ombre qui la
   décolle du papier.

   Elle n'est plus étirée à la largeur de sa colonne. Les visuels du fonds
   sont petits, 665 pixels de large en médiane et 43% sous 600 : étirée à 553,
   une couverture de 351 pixels était agrandie de moitié et rendue floue, ce
   qui se voit d'autant plus sur la quatrième de couverture, où le résumé
   imprimé devient une bouillie. Mieux vaut une image nette et plus petite
   qu'une image grande et molle. Le jour où des visuels en haute définition
   remplaceront ceux-ci, la couverture reprendra d'elle-même toute la place.
   -------------------------------------------------------------------------- */

.woocommerce div.product div.images img {
	width: auto;
	max-width: 100%;
	margin-inline: auto;
	border: 1px solid var(--jmg-tranche);
	box-shadow: 0 30px 48px -30px rgba(26, 28, 36, 0.6);
}

/* La présentation, seule version lisible du résumé.
   --------------------------------------------------------------------------
   Elle sort du jeu d'onglets de WooCommerce, qui n'en comptait qu'un : un
   onglet seul ne donne le choix de rien et demande un clic pour rien. Elle
   prend l'entête de section du site, et sa largeur de lecture est celle du
   projet, soixante-deux caractères, pas la largeur de la page.

   La galerie et le résumé produit de Kadence sont posés en float, à
   l'ancienne, et non en grille. Un clearfix sur .entry garantit bien que la
   fiche s'étend jusqu'au bas de ces deux colonnes flottantes, mais un
   clearfix sur un parent ne fait que ça : il ne force pas ses enfants à
   démarrer sous les flottants. Sans « clear », cette section s'insérait donc
   dans l'espace encore libre à droite de la couverture, tant que celle-ci
   n'était pas terminée. Le titre y tenait, la première ligne du résumé aussi,
   plus courte que les suivantes ; passé le bas de l'image, le texte reprenait
   sa pleine largeur. Pour un numéro de revue, dont le résumé tient en un seul
   paragraphe sans coupure de bloc, cela se voyait sur plusieurs lignes plutôt
   qu'une seule. */
.jmg-presentation {
	clear: both;
}

/* Même raison pour les grilles de fin de fiche, « dans le même thème » et
   « du même auteur » : rien ne les distingue structurellement de la
   présentation, sinon leur position plus basse dans la page, qui les
   maintenait par chance hors de portée des colonnes flottantes sur les
   fiches déjà vérifiées. Ça n'a rien d'une garantie sur une fiche à galerie
   courte ou à résumé bref. */
.woocommerce div.product .jmg-section--grille {
	clear: both;
}

.jmg-presentation__texte {
	max-width: var(--jmg-largeur-texte);
}

.jmg-presentation__texte > *:first-child {
	margin-top: 0;
}

/* Les vignettes de la galerie restent des vignettes : elles désignent, elles
   ne se donnent pas à lire. Ombre plus courte, pas de relief au survol. */
.woocommerce div.product div.images .flex-control-thumbs img {
	box-shadow: 0 10px 16px -12px rgba(26, 28, 36, 0.5);
}

.woocommerce div.product .product_title {
	font-size: clamp(1.875rem, 1.4rem + 2.2vw, 3rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

/* --------------------------------------------------------------------------
   7. Écrans étroits
   -------------------------------------------------------------------------- */

@media (max-width: 780px) {
	/* Le titre repasse au centre sur téléphone, réglé dans
	   inc/typographie.php. Son filet suit : posé à gauche sous un titre
	   centré, il désignerait le bord de la page et rien d'autre. */
	.entry-hero .entry-header h1::after {
		margin-inline: auto;
	}
}

@media (max-width: 640px) {
	.entry-hero .entry-header h1 {
		max-width: none;
	}
}

/* --------------------------------------------------------------------------
   Téléphone : les fiches d'ouvrage et les thèmes se centrent
   --------------------------------------------------------------------------
   Même raison que pour les bandes de l'accueil, poussée d'un cran : sur une
   ou deux colonnes étroites, une couverture calée à gauche au-dessus d'un
   titre qui court sur toute la largeur laisse un vide qu'aucun contenu ne
   vient occuper, et l'œil ne sait plus si le titre appartient à la
   couverture au-dessus ou à celle d'à côté.

   Ici le texte se centre aussi, contrairement aux bandes : ce ne sont pas des
   paragraphes de lecture mais des étiquettes, un titre, un nom d'auteur, un
   prix. Trois lignes courtes centrées sous l'objet qu'elles désignent se
   lisent sans effort ; c'est un paragraphe de six lignes qui ne le
   supporterait pas.

   La vue liste n'est pas exclue ici, contrairement à ce qu'on attendrait :
   sous cette largeur, elle cesse de poser l'image et le texte côte à côte et
   les empile, comme la vue grille. Les deux vues se ressemblent alors au
   point que les distinguer produirait deux centrages différents pour une
   même mise en page.
   -------------------------------------------------------------------------- */

@media (max-width: 780px) {

	/* Les cases du catalogue, des archives de thème et de la recherche. */
	.woocommerce ul.products li.product {
		text-align: center;
	}

	/* Le centrage passe par l'image et non par son conteneur : en vue liste,
	   le lien qui la porte repasse en « block », où justify-content ne veut
	   plus rien dire. Une marge automatique, elle, vaut dans les deux vues. */
	.woocommerce ul.products li.product .woocommerce-loop-image-link {
		justify-content: center;
	}

	.woocommerce ul.products li.product .woocommerce-loop-image-link img {
		display: block;
		margin-inline: auto;
	}

	.woocommerce ul.products li.product .product-action-wrap .button {
		margin-inline: auto;
	}

	/* Les grilles internes : fiche d'ouvrage, fiche auteur, « du même
	   auteur », « dans le même thème ». */
	.jmg-grille-livres .jmg-carte {
		text-align: center;
	}

	.jmg-carte__socle {
		justify-content: center;
	}

	/* Les thèmes de l'accueil : la pile était déjà centrée, son nom et son
	   compte la rejoignent. */
	.jmg-themes__lien {
		text-align: center;
	}

	.jmg-themes__pile {
		margin-inline: auto;
	}

	/* Les présentoirs de l'accueil, qui sont les mêmes objets. */
	.jmg-presentoir__item {
		text-align: center;
	}

	.jmg-presentoir__socle {
		justify-content: center;
	}
}

/* --------------------------------------------------------------------------
   Téléphone : les entêtes de section se centrent
   --------------------------------------------------------------------------
   Suite du centrage des colonnes étroites. Un titre de section est court et
   sert de séparateur : centré, il pose une respiration nette entre deux
   blocs, là où calé à gauche il laisse à sa droite un vide que rien
   n'occupe. Son surtitre et son filet le suivent, sans quoi le filet
   désignerait le bord de la page et rien d'autre.

   Les paragraphes ne sont pas concernés : ce sont eux qui se lisent, et
   quelques lignes centrées se lisent moins bien. La règle s'arrête donc aux
   titres, aux surtitres et à leurs ornements.
   -------------------------------------------------------------------------- */

@media (max-width: 780px) {
	.jmg-entete-section,
	.jmg-section h2,
	.jmg-accueil__revue .jmg-surtitre,
	.jmg-accueil__revue h2,
	.jmg-accueil__auteurs-appel .jmg-surtitre,
	.jmg-accueil__auteurs-appel h2,
	.jmg-infolettre__titre {
		text-align: center;
	}

	.jmg-entete-section__titre::after,
	.jmg-section h2::after {
		margin-inline: auto;
	}

	/* Le titre de l'accueil ne descend pas sous 14ch : borné, il se casserait
	   en trois lignes courtes au milieu d'une colonne large. */
	.jmg-entete-section__titre {
		max-width: none;
	}
}

@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;
	}
}

/* -------------------------------------------------------------------------
   Panier vide : icône du bloc Cart WooCommerce
   -------------------------------------------------------------------------- */

/* WooCommerce affiche par défaut un visage qui pleure au-dessus du message
   « Votre panier est actuellement vide ! ». Peu adapté à un éditeur : on le
   remplace par un livre ouvert, en gardant la même technique (mask-image en
   currentColor) pour que l'icône suive la couleur du texte environnant. */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
	mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0yIDNoNmE0IDQgMCAwIDEgNCA0djE0YTMgMyAwIDAgMC0zLTNIMnoiLz48cGF0aCBkPSJNMjIgM2gtNmE0IDQgMCAwIDAtNCA0djE0YTMgMyAwIDAgMSAzLTNoN3oiLz48L3N2Zz4=);
	mask-size: 4em;
	height: 4em;
}