/*
Theme Name: Digital Padmakara v2
Theme URI: https://digital.padmakara.fr
Description: Deuxième thème enfant de Digital Download. CSS autonome : ne dépend plus de la feuille de style du thème parent.
Author: Padmakara
Author URI: https://www.padmakara.com/
Template: digital-download
Version: 2.15.0
License: GNU General Public License v3 or later
Text Domain: digital-download-child-v2
*/

/* ========================================================================
   1. Design tokens
   ======================================================================== */

:root {
	/* Couleurs — la planche de catalogue s'inspire des éditions papier
	   Padmakara (papier crème, encre noire, double filet rouge cinabre). */
	--color-paper: #F7F5F0;
	--color-paper-soft: #EFEBE2;
	--color-ink: #1A1816;
	--color-cinnabar: #B83C2E;
	--color-cinnabar-dark: #8F2A1F;
	--color-stone: #8A8580;
	--color-rule: #D4CFC7;
	--color-border: var(--color-rule);
	--color-success: #2C8A4F;
	--color-error: #C0392B;
	--color-warning: #B87E2E;

	/* Typographies — chargées par le thème enfant (functions.php prio 9) */
	/* EB Garamond plutot que Cormorant : Cormorant est un caractere de
	   titrage, il devient gris et maigre a la taille du texte courant.
	   EB Garamond est un Garamond de labeur, et c'est la famille des
	   livres imprimes par Padmakara. */
	--font-serif: 'EB Garamond', Georgia, 'Iowan Old Style', serif;
	--font-sans: 'Source Sans 3', system-ui, -apple-system, sans-serif;

	/* Échelle d'espacement (en rem, base 16 px) */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 2.5rem;
	--space-8: 3rem;
	--space-9: 4rem;

	/* Mesures */
	--padmakara-radius: 2px;

	/* L'en-tête est collant (section 10) : tout ce qui vient se caler dessous
	   doit connaître sa hauteur. Elle n'est pas relevée à la règle mais
	   déduite de ses parties — le logo, qui est l'élément le plus haut de la
	   barre, le remplissage vertical de `.padmakara-header__inner` (0,75 rem
	   de part et d'autre) et le filet du bas. Changer la taille du logo
	   déplace donc l'ancrage tout seul. */
	--padmakara-logo-size: 44px;
	--padmakara-header-height: calc(var(--padmakara-logo-size) + 1.5rem + 1px);

	/* Hauteur du haut de la fenêtre déjà occupée. Nulle pour un visiteur ;
	   pour un administrateur connecté, WordPress y fixe sa barre, sous
	   laquelle l'en-tête collant disparaissait à moitié. Un seul repère pour
	   les deux cas : l'en-tête s'y accroche, et la colonne de la fiche
	   produit s'accroche sous l'en-tête. */
	--padmakara-sticky-top: 0px;
	--padmakara-shadow-image: 0 2px 14px rgba(26, 26, 26, 0.12);
	--padmakara-shadow-card: 0 1px 3px rgba(26, 26, 26, 0.06);
	/* Une feuille posee sur la planche, pas une carte qui flotte. */
	--padmakara-shadow-sheet: 0 1px 2px rgba(26, 24, 22, 0.10), 0 8px 20px rgba(26, 24, 22, 0.07);
	--padmakara-shadow-sheet-hover: 0 2px 4px rgba(26, 24, 22, 0.12), 0 14px 30px rgba(26, 24, 22, 0.10);

	--padmakara-content-max: 72rem;
	--padmakara-shell-max: 80rem;
	--padmakara-reading-max: 38rem;

	/* Couleurs sémantiques */
	--color-link: var(--color-cinnabar);
	--color-link-hover: var(--color-cinnabar-dark);
}

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

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

html {
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
}

body {
	margin: 0;
	background: var(--color-paper);
	color: var(--color-ink);
	font-family: var(--font-sans);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Le thème parent injecte `body.custom-background` : on impose notre fond
   et on neutralise toute image de fond héritée. Le customizer WP écrit
   aussi une couleur inline dans `body.style`, donc il faut un
   !important pour passer outre. */
body.custom-background,
body.custom-background-color {
	background-image: none !important;
	background-color: var(--color-paper) !important;
}

h1, h2, h3, h4, h5, h6,
p, figure, blockquote,
dl, dd, ul, ol {
	margin: 0;
}

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

ul, ol {
	padding: 0;
}

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

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

h1 {
	font-family: var(--font-serif);
	font-size: clamp(1.8rem, 4vw, 2.4rem);
	line-height: 1.15;
	font-weight: 500;
	letter-spacing: -0.005em;
	margin-block: 0 0.6em;
}

h2 {
	font-family: var(--font-serif);
	font-size: clamp(1.5rem, 3vw, 1.85rem);
	line-height: 1.2;
	font-weight: 500;
	margin-block: 0 0.55em;
}

h3 {
	font-family: var(--font-serif);
	font-size: clamp(1.25rem, 2.5vw, 1.4rem);
	line-height: 1.25;
	font-weight: 500;
	margin-block: 0 0.5em;
}

h4 {
	font-family: var(--font-serif);
	font-size: 1.15rem;
	line-height: 1.3;
	font-weight: 600;
	margin-block: 0 0.4em;
}

h5 {
	font-family: var(--font-serif);
	font-size: 1.05rem;
	line-height: 1.3;
	font-weight: 600;
	margin-block: 0 0.4em;
}

h6 {
	font-family: var(--font-serif);
	font-size: 0.98rem;
	line-height: 1.3;
	font-weight: 600;
	margin-block: 0 0.4em;
}

p {
	margin-block: 0 1em;
	line-height: 1.65;
}

p:last-child {
	margin-bottom: 0;
}

small {
	font-size: 0.875rem;
	color: var(--color-stone);
}

blockquote {
	border-left: 3px solid var(--color-cinnabar);
	padding-left: 1rem;
	margin-block: 1.25rem;
	font-style: italic;
	color: var(--color-stone);
}

hr {
	border: 0;
	border-top: 1px solid var(--color-rule);
	margin-block: 2rem;
}

/* Liens */
a {
	color: var(--color-link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 0.15s;
}

a:hover,
a:focus-visible {
	color: var(--color-link-hover);
}

/* Sélection */
::selection {
	background: var(--color-cinnabar);
	color: var(--color-paper);
}

/* Focus visible global */
*:focus-visible {
	outline: 2px solid var(--color-cinnabar);
	outline-offset: 2px;
	border-radius: 1px;
}

/* ========================================================================
   4. Accessibilité — screen-reader-text
   ======================================================================== */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--color-paper);
	clip: auto !important;
	-webkit-clip-path: none;
	clip-path: none;
	color: var(--color-cinnabar);
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	height: auto;
	left: 0.5rem;
	line-height: 1.5;
	margin: 0;
	padding: 0.85rem 1rem;
	position: absolute;
	top: 0.5rem;
	width: auto;
	z-index: 100000;
}

.skip-link {
	background-color: var(--color-cinnabar);
	color: var(--color-paper);
	padding: 0.5rem 0.75rem;
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.skip-link:focus {
	left: 1rem;
	top: 1rem;
	width: auto;
	height: auto;
	z-index: 100001;
}

/* ========================================================================
   5. Conteneur et shell
   ======================================================================== */

.container {
	max-width: var(--padmakara-shell-max);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
	width: 100%;
}

.entry-content,
.site-main > article {
	max-width: var(--padmakara-content-max);
	/* Sans marges automatiques, un bloc plus étroit que son conteneur se colle
	   à son bord gauche : le contenu se retrouvait décalé, et d'autant plus que
	   la fenêtre est large. Il se pose désormais sur l'axe de la page, comme le
	   titre et le double filet qui le surmontent. */
	margin-inline: auto;
}

.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-main {
	padding-block: clamp(2rem, 5vw, 4rem);
	min-height: 60vh;
}

/* Sur la fiche produit, le contenu doit rester dans une largeur de lecture */
.single-download .entry-content {
	max-width: var(--padmakara-reading-max);
}

/* ========================================================================
   6. Alignements WordPress standards
   ======================================================================== */

.alignleft {
	float: left;
	margin-right: 1.5rem;
	margin-bottom: 1rem;
}

.alignright {
	float: right;
	margin-left: 1.5rem;
	margin-bottom: 1rem;
}

.aligncenter {
	clear: both;
	display: block;
	margin-inline: auto;
	margin-block: 1rem;
}

.alignwide {
	max-width: var(--padmakara-shell-max);
	margin-inline: auto;
}

.alignfull {
	max-width: 100%;
	width: 100%;
}

.wp-caption {
	max-width: 100%;
}

.wp-caption-text {
	font-size: 0.875rem;
	color: var(--color-stone);
	font-style: italic;
	text-align: center;
	margin-top: 0.5rem;
}

/* ========================================================================
   7. Tableaux standards (en plus des styles EDD qui ciblent #edd_*)
   ======================================================================== */

table {
	border-collapse: collapse;
	width: 100%;
	margin-block: 1.25rem;
}

th, td {
	padding: 0.6rem 0.75rem;
	text-align: left;
	border-bottom: 1px solid var(--color-rule);
	vertical-align: top;
}

th {
	font-weight: 600;
	font-family: var(--font-sans);
}

/* ========================================================================
   8. Formulaires génériques
   ======================================================================== */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="tel"],
input[type="search"],
input[type="number"],
select,
textarea {
	width: 100%;
	max-width: 100%;
	padding: 0.55rem 0.75rem;
	border: 1px solid var(--color-rule);
	background: white;
	border-radius: var(--padmakara-radius);
	color: var(--color-ink);
	transition: border-color 0.15s, box-shadow 0.15s;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	border-color: var(--color-cinnabar);
	outline: 0;
	box-shadow: 0 0 0 3px rgba(184, 60, 46, 0.15);
}

textarea {
	min-height: 6rem;
	resize: vertical;
}

label {
	display: block;
	font-size: 0.9rem;
	color: var(--color-stone);
	margin-bottom: 0.3rem;
}

button,
.button,
.btn {
	background: var(--color-cinnabar);
	color: white;
	border: 0;
	padding: 0.7rem 1.4rem;
	font-family: var(--font-sans);
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	border-radius: var(--padmakara-radius);
	transition: background-color 0.15s, color 0.15s;
	display: inline-block;
}

button:hover,
button:focus-visible,
.button:hover,
.btn:hover {
	background: var(--color-cinnabar-dark);
	color: white;
}

button[disabled],
.button[disabled] {
	opacity: 0.6;
	cursor: not-allowed;
}

/* ========================================================================
   9. Listes et contenu entry
   ======================================================================== */

.entry-content ul:not(.sub-menu):not(.menu):not(.social-networks):not(.padmakara-header__menu):not(.edd-cart):not(.edd-cart-meta),
.entry-content ol {
	padding-left: 1.5rem;
	margin-block: 0.75rem 1.25rem;
}

.entry-content ul li,
.entry-content ol li {
	margin-bottom: 0.4rem;
}

.entry-content code {
	font-family: 'SF Mono', Menlo, Consolas, monospace;
	font-size: 0.9em;
	background: var(--color-paper-soft);
	padding: 0.1em 0.4em;
	border-radius: var(--padmakara-radius);
}

.entry-content pre {
	background: var(--color-paper-soft);
	padding: 1rem;
	border-radius: var(--padmakara-radius);
	overflow-x: auto;
	margin-block: 1rem;
}

.entry-content pre code {
	background: transparent;
	padding: 0;
}

/* ========================================================================
   10. Header v2
   ======================================================================== */

/* L'en-tete tient sur DEUX rangs : la marque et les outils au premier, le
   menu seul au second.

   Le rang unique etait arithmetiquement impossible. `.container` plafonne a
   `--padmakara-shell-max` (80 rem), soit 1 216 px utiles une fois les marges
   retirees — et ce plafond ne bouge pas quand la fenetre s'elargit. Mesure du
   contenu : marque 202 px, menu 653 px, outils 357 px, gouttieres 64 px, soit
   1 276 px. Il manquait 60 px A TOUTE LARGEUR D'ECRAN, d'ou un menu qui
   revenait a la ligne aussi bien a 1 000 px qu'a 1 600 px.

   Separer les rangs rend au menu la largeur entiere : 653 px dans 1 216 px,
   une marge de 563 px. Plus aucun libelle ne peut le faire deborder, et la
   coupure vers le menu deroulant descend de 900 px a 768 px — les tablettes
   gardent desormais le menu complet. */

.site-header.padmakara-header {
	background: var(--color-paper);
	border-bottom: 1px solid var(--color-rule);
	position: sticky;
	top: var(--padmakara-sticky-top);
	z-index: 50;
}

/* La barre d'administration est fixe et haute de 32 px — 46 px en dessous de
   782 px, où WordPress la fixe en bas de l'écran mais garde la même réserve
   en haut. Sans cette déclaration, l'en-tête s'y glissait dessous. Les
   visiteurs ne la voient jamais : le thème masque la barre pour tout ce qui
   n'est pas administrateur (voir functions.php). */
body.admin-bar {
	--padmakara-sticky-top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar {
		--padmakara-sticky-top: 46px;
	}
}

/* ---- Rang 1 : la marque, les outils -------------------------------- */

/* Tout le rang est centre sur un seul axe.

   L'alignement sur la ligne de base, essaye d'abord, verrouillait bien le nom
   et le menu l'un sur l'autre — mais il ne dit rien des elements qui n'ont pas
   de ligne de base signifiante : le logo et le bloc de droite. Ceux-ci
   restaient centres, et le groupe aligne se retrouvait 10 px plus bas.

   Le centrage des boites suffit ici parce que menu et bloc de droite sont dans
   la meme police : leurs encres tombent au meme endroit. Seul le nom, en
   Garamond et plus grand, s'en ecarte — d'environ un pixel, ce qui ne se voit
   pas. */
.padmakara-header__inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	/* Remplissage dissymetrique : une fois tout le contenu aligne, son encre
	   reste 4 px au-dessus du milieu geometrique de la barre, pour la raison
	   dite plus bas — une boite de texte inclut la place du jambage
	   descendant. On decale donc la ligne entiere vers le bas d'autant, sans
	   changer la hauteur totale du rang. */
	padding-block: calc(0.75rem + 4px) calc(0.75rem - 4px);
}

/* Le logo et les outils n'ont pas de ligne de base signifiante : ils restent
   centres. Ecarter le logo de l'alignement a un second effet utile — la
   ligne de base du bloc de marque devient alors celle du nom. */
.padmakara-header__brand {
	display: flex;
	align-items: center;
	/* Le nom se rapproche du logo : les deux forment une seule marque. */
	gap: 0.5rem;
	flex-shrink: 0;
}

/* C'est le LIEN qui est l'element flex, pas l'image : WordPress enveloppe le
   logo dans <a class="custom-logo-link">. Viser l'image seule ne changeait
   rien, et le lien continuait de participer a l'alignement sur la ligne de
   base — avec une ligne de base synthetisee sur son bord inferieur. Le logo
   reposait donc SUR la ligne de base et imposait 44 px au-dessus d'elle :
   d'ou un logo qui paraissait trop haut et un texte pousse trop bas. */
.padmakara-header__brand .custom-logo-link,
.padmakara-header__brand .custom-logo,
.padmakara-header__tools,
.padmakara-header__menu-toggle {
	align-self: center;
}

.padmakara-header__brand .custom-logo {
	width: var(--padmakara-logo-size);
	height: var(--padmakara-logo-size);
	border-radius: var(--padmakara-radius);
	object-fit: contain;
}

.padmakara-header__name {
	font-family: var(--font-serif);
	font-size: 1.25rem;
	color: var(--color-ink);
	text-decoration: none;
	font-weight: 500;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.padmakara-header__name:hover {
	color: var(--color-cinnabar);
}

.padmakara-header__menu-toggle {
	display: none;
	background: transparent;
	border: 1px solid var(--color-rule);
	padding: 0.4rem 0.8rem;
	font-family: var(--font-sans);
	font-size: 0.9rem;
	color: var(--color-ink);
	cursor: pointer;
	border-radius: var(--padmakara-radius);
	line-height: 1;
}

/* La regle generique `button:hover` (specificite 0,1,1) l'emportait sur la
   declaration ci-dessus (0,1,0) : au survol, le bouton du menu se remplissait
   de cinabre comme un bouton d'achat. Il annonce une navigation, pas un acte
   — il garde son trait et se contente de le rougir. */
.padmakara-header__menu-toggle:hover,
.padmakara-header__menu-toggle:focus-visible {
	background: transparent;
	color: var(--color-cinnabar);
	border-color: var(--color-cinnabar);
}

/* Les outils sont pousses au bord droit. Ils n'ont plus a se retrecir : a
   357 px dans un rang qui n'en contient que 559, la place est large. Le
   retour a la ligne reste autorise malgre tout — un libelle rallonge ne doit
   jamais pouvoir repousser l'en-tete hors-champ. */
.padmakara-header__tools {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-left: auto;
	flex-shrink: 1;
	flex-wrap: wrap;
	justify-content: flex-end;
	min-width: 0;
}

/* La cible, pas seulement le dessin. À 0,4 rem de remplissage le bouton du
   panier faisait 28 px de haut : l'icône y tenait, la main non. On le porte à
   40 px — sous les 44 px du logo, donc le rang ne bouge pas d'un pixel — et
   le panier annonce qu'il se clique, ce qu'un `div` ne fait pas tout seul. */
.padmakara-header__tools .btn-login,
.padmakara-header__tools .cart {
	font-size: 0.9rem;
	color: var(--color-ink);
	text-decoration: none;
	padding: 0.6rem 0.9rem;
	min-height: 2.5rem;
	border: 1px solid transparent;
	border-radius: var(--padmakara-radius);
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	line-height: 1;
}

.padmakara-header__tools .cart {
	cursor: pointer;
}

/* Le pointeur s'arrête au bouton. `cursor` s'hérite, et le menu déroulant
   est un descendant de `.cart` : la main se répandait donc sur toute la
   carte — le titre, les montants, le fond — qui annonçait ainsi un clic
   qu'elle ne rend pas. On rétablit le comportement ordinaire du navigateur
   sur le menu ; les deux seules choses qu'on y clique, « supprimer » et
   « Voir le panier », sont des liens et reprennent la main par la feuille
   de style du navigateur, qui l'emporte sur un héritage. */
.padmakara-header__tools .product-holder {
	cursor: auto;
}

.padmakara-header__tools .btn-login:hover,
.padmakara-header__tools .cart:hover {
	border-color: var(--color-rule);
	color: var(--color-cinnabar);
}

.padmakara-header__tools .cart .count {
	background: var(--color-cinnabar);
	color: white;
	font-size: 0.7rem;
	padding: 1px 6px;
	border-radius: 999px;
	font-weight: 600;
	min-width: 18px;
	text-align: center;
}

.padmakara-header__tools .form-section {
	position: relative;
}

.padmakara-header__tools .form-section .search-form {
	display: flex;
	gap: 0.3rem;
}

.padmakara-header__tools .form-section .search-form input[type="search"] {
	width: 200px;
	padding: 0.4rem 0.6rem;
	font-size: 0.9rem;
}

.padmakara-header__tools .form-section .search-form input[type="submit"] {
	background: var(--color-cinnabar);
	color: white;
	border: 0;
	padding: 0.4rem 0.8rem;
	font-size: 0.9rem;
	cursor: pointer;
	border-radius: var(--padmakara-radius);
}

/* ---- Rang 2 : le menu ---------------------------------------------- */

/* Le rang se replie au defilement vers le bas : seule la marque reste
   collante, et le contenu recupere la hauteur du menu. Il revient des qu'on
   remonte. La classe est posee par le script de `footer.php`.

   `overflow` ne s'anime pas. Il doit valoir `hidden` pendant le repli, sinon
   le menu deborde du rang qui retrecit ; et `visible` une fois le rang
   ouvert, sinon le menu deroulant des retraites serait rogne net. On le
   bascule donc en fin de transition avec `transition-behavior`. La ou cette
   propriete manque, `overflow` redevient visible tout de suite : le menu
   reapparait d'un coup au lieu de se devoiler, ce qui est disgracieux mais
   jamais casse. */
.padmakara-header__navbar {
	/* `clip` et non `hidden` : rogner un axe avec `hidden` force l'autre a
	   devenir defilable, ce qui emprisonnerait le menu deroulant. `clip`
	   laisse l'axe vertical libre.

	   Il est la pour une raison mesurable : le menu deroulant est en
	   positionnement absolu et reste dans le flux de calcul de la page meme
	   masque. A 768 px il debordait de 12 px a droite et donnait a la page
	   entiere une barre de defilement horizontale, alors qu'il n'y avait rien
	   a voir. */
	overflow-x: clip;
	overflow-y: visible;
	/* `max-height` sert de borne animee, pas de mesure : le rang fait 42 px,
	   et tant que la borne reste au-dessus, elle ne le touche pas. Trop haute,
	   elle passe le premier tiers de l'animation a descendre dans le vide
	   avant que quoi que ce soit ne bouge — c'etait le cas a 6 rem. A 4,5 rem
	   elle laisse encore de la marge pour un libelle rallonge, sans que le
	   repli paraisse partir en retard. Le fondu de l'opacite couvre ce qu'il
	   en reste. */
	max-height: 4.5rem;
	transition:
		max-height 0.25s ease,
		opacity 0.18s ease,
		overflow-y 0s 0.25s;
	transition-behavior: allow-discrete;
}

.padmakara-header--collapsed .padmakara-header__navbar {
	overflow-y: hidden;
	max-height: 0;
	opacity: 0;
	transition:
		max-height 0.25s ease,
		opacity 0.18s ease,
		overflow-y 0s;
}

@media (prefers-reduced-motion: reduce) {
	.padmakara-header__navbar {
		transition: none;
	}
}

.padmakara-header__nav {
	padding-bottom: 0.5rem;
}

/* `gap` n'est PAS mutualise avec le sous-menu. Il l'etait, et c'etait la
   cause des grands vides du menu deroulant : `.padmakara-header__menu
   ul.sub-menu` (specificite 0,2,1) l'emportait sur `.padmakara-header__menu
   .sub-menu { gap: 0 }` (0,2,0), qui n'a donc jamais rien fait. Chaque entree
   du deroulant trainait 24 px de vide derriere elle — un vide qui
   n'appartenait a aucun element et ne reagissait a aucun survol. */
.padmakara-header__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 1.5rem;
	align-items: center;
	flex-wrap: wrap;
}

.padmakara-header__menu li {
	position: relative;
}

/* L'interligne fait la zone cliquable, disait la version precedente : 2,2
   fois la taille du texte, sans remplissage. Cela marchait tant qu'aucun
   libelle ne revenait a la ligne — au premier retour, l'entree passait de
   33 px a 67 px et l'en-tete entier enflait de 30 px.

   Un interligne ordinaire plus un remplissage symetrique donne la meme boite
   de 34 px et survit au retour a la ligne. Le filet reste a 5 px du bas : le
   remplissage remplace exactement le demi-interligne qu'il avait pris. */
.padmakara-header__menu a {
	color: var(--color-ink);
	text-decoration: none;
	font-size: 0.95rem;
	line-height: 1.3;
	padding-block: 0.45rem;
	display: inline-block;
	border-bottom: 0;
	/* Le filet est dessine par un fond, pas par un pseudo-element : `::after`
	   est deja pris par la fleche des entrees a sous-menu, et deux regles sur
	   le meme pseudo-element se marchent dessus — la fleche heritait du
	   positionnement absolu du filet et tombait sous le texte. */
	background-image: linear-gradient(var(--color-cinnabar), var(--color-cinnabar));
	background-repeat: no-repeat;
	background-size: 0 1px;
	background-position: left bottom 5px;
	transition: color 0.15s, background-size 0.15s;
}

.padmakara-header__menu a:hover,
.padmakara-header__menu .current-menu-item > a,
.padmakara-header__menu .current_page_item > a {
	color: var(--color-cinnabar);
	background-size: 100% 1px;
}

.padmakara-header__menu li.menu-item-has-children > a::after {
	content: ' \25BE';
	font-size: 0.7em;
	opacity: 0.6;
}

/* ---- Menu deroulant ------------------------------------------------ */

.padmakara-header__menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0.25rem 0;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	/* Les entrees se touchent : le survol doit pouvoir couvrir toute la
	   hauteur d'une ligne, sans bande morte entre deux. */
	gap: 0;
	position: absolute;
	top: 100%;
	/* Centre sous le declencheur. Le decalage horizontal passe par la
	   propriete `translate` et non par `transform`, deja pris par
	   l'animation d'ouverture : deux regles sur `transform` s'ecrasent, et
	   celle du survol aurait efface le centrage au moment precis ou le
	   deroulant devient visible. */
	left: 50%;
	translate: -50% 0;
	/* La boite se regle sur son contenu, sans jamais passer sous la largeur
	   de son propre declencheur : un deroulant plus etroit que le mot qui
	   l'ouvre se lit comme un defaut. C'est la regle que Material enonce et
	   que Radix expose en variable CSS ; ici elle ne coute rien, parce que
	   le sous-menu est en absolu dans un `li` en `position: relative` — un
	   pourcentage s'y resout donc sur la largeur du declencheur.

	   Les 8 rem ne sont plus un plancher de confort mais un garde-fou pour
	   le seul cas degenere : declencheur court ET entrees courtes, ou
	   `max-content` seul donnerait une boite de deux centimetres. Le plafond
	   empeche un libelle long de pousser la boite hors du rognage
	   horizontal du rang. */
	width: max-content;
	min-width: max(8rem, 100%);
	max-width: 17rem;
	background: var(--color-paper);
	border: 1px solid var(--color-rule);
	box-shadow: var(--padmakara-shadow-card);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
	z-index: 60;
}

.padmakara-header__menu li:hover > .sub-menu,
.padmakara-header__menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* `block` et non `inline-block` : une boite en ligne repose sur la ligne de
   base et reserve sous elle la place du jambage descendant de sa ligne
   parente — quelques pixels de plus par entree, eux aussi hors de toute
   zone de survol. En bloc, la boite du lien EST la ligne. */
.padmakara-header__menu .sub-menu a {
	display: block;
	width: 100%;
	/* Des libelles d'un seul mot n'ont pas besoin d'un interligne de
	   paragraphe : 0,4 rem donne une ligne de 33 px, assez pour viser, assez
	   serre pour que les neuf retraites forment une liste et non une
	   colonne. */
	padding: 0.4rem 0.9rem;
	font-size: 0.9rem;
	line-height: 1.4;
	border-bottom: 0;
	/* Dans le menu deroulant, le filet n'a pas de sens : les entrees y sont
	   empilees et un fond de survol suffit. */
	background-image: none;
}

.padmakara-header__menu .sub-menu li:hover > a,
.padmakara-header__menu .sub-menu li:focus-within > a {
	background: rgba(184, 60, 46, 0.06);
	color: var(--color-cinnabar);
}

/* ---- Sous 768 px : menu deroulant complet -------------------------- */

/* La coupure etait a 900 px. Le menu demande 653 px, et une fenetre de
   768 px en offre 712 une fois les marges retirees : les tablettes n'ont
   plus de raison de passer par le bouton. */
@media (max-width: 767px) {
	/* Le rang 1 passe a la ligne. Sans cela, marque + outils + bouton
	   demandaient 629 px dans les 343 px d'un telephone : les outils
	   recouvraient le bouton, qui devenait incliquable — le menu n'etait plus
	   atteignable du tout. */
	.padmakara-header__inner {
		flex-wrap: wrap;
		column-gap: 1rem;
		row-gap: 0.5rem;
	}

	/* Le nom passe sur deux lignes a cote du logo. Pas de mesure en dur : la
	   marque a le droit de se retrecir, et « Digital Padmakara » se coupe de
	   lui-meme a son espace quand la place manque. Il reprend une seule ligne
	   des qu'elle revient. */
	.padmakara-header__brand {
		flex-shrink: 1;
		min-width: 0;
	}

	.padmakara-header__name {
		white-space: normal;
		line-height: 1.15;
	}

	.padmakara-header__menu-toggle {
		display: inline-block;
		order: 2;
		margin-left: auto;
	}

	/* Les outils prennent leur propre ligne, calee a droite. */
	.padmakara-header__tools {
		order: 3;
		flex-basis: 100%;
		margin-left: 0;
	}

	/* Un cran plus compact : a 0,9 rem les deux liens de compte et le panier
	   demandaient 357 px et debordaient d'un ecran de 375 px. A 0,85 rem ils
	   tiennent sur une ligne. La cible reste a 40 px de haut. */
	.padmakara-header__tools .btn-login,
	.padmakara-header__tools .cart {
		font-size: 0.85rem;
		padding: 0.5rem 0.6rem;
	}

	/* Le repli au defilement ne s'applique pas ici : c'est le bouton qui
	   commande, et lui seul. Le script s'en charge aussi de son cote, mais la
	   regle le dit en clair. */
	.padmakara-header__navbar {
		overflow-y: hidden;
		max-height: 0;
		opacity: 0;
	}

	.padmakara-header--open .padmakara-header__navbar {
		overflow-y: auto;
		max-height: 70vh;
		opacity: 1;
	}

	.padmakara-header__nav {
		padding-bottom: 0.75rem;
	}

	.padmakara-header__menu,
	.padmakara-header__menu .sub-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		flex-wrap: nowrap;
	}

	.padmakara-header__menu .sub-menu {
		position: static;
		border: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		/* Le centrage du deroulant n'a pas de sens dans une liste depliee :
		   sans cette remise a zero, chaque sous-menu partait d'une demi-
		   largeur vers la gauche, hors de l'ecran. */
		translate: none;
		padding: 0 0 0 1rem;
		width: auto;
		min-width: 0;
		max-width: none;
		background: transparent;
	}

	.padmakara-header__menu > li {
		border-bottom: 1px solid var(--color-rule);
	}

	.padmakara-header__menu > li:last-child {
		border-bottom: 0;
	}

	.padmakara-header__menu a {
		display: block;
		padding-block: 0.7rem;
	}
}

/* ========================================================================
   11. Footer v2
   ======================================================================== */

.site-footer.padmakara-footer {
	background: var(--color-paper);
	border-top: 1px solid var(--color-cinnabar);
	padding-block: 1.75rem;
	margin-top: 3rem;
	font-size: 0.875rem;
	color: var(--color-stone);
}

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

.padmakara-footer__legal {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.padmakara-footer__legal a {
	color: var(--color-cinnabar);
	text-decoration: none;
}

.padmakara-footer__legal a:hover {
	text-decoration: underline;
}

.padmakara-footer__separator {
	opacity: 0.4;
}

.padmakara-footer__credit {
	font-style: italic;
}

.social-networks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 1rem;
}

.social-networks a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: var(--color-stone);
	border: 1px solid transparent;
	border-radius: 50%;
	text-decoration: none;
	transition: color 0.15s, border-color 0.15s;
}

.social-networks a:hover {
	color: var(--color-cinnabar);
	border-color: var(--color-cinnabar);
}

.social-networks .fab,
.social-networks .fas,
.social-networks .fa {
	font-size: 1rem;
	line-height: 1;
}

@media (max-width: 600px) {
	.padmakara-footer__inner {
		justify-content: center;
		text-align: center;
	}

	.padmakara-footer__legal {
		justify-content: center;
	}
}

/* ========================================================================
   12. Sidebar et widgets WP
   ======================================================================== */

.padmakara-sidebar {
	font-size: 0.95rem;
	color: var(--color-stone);
}

.padmakara-sidebar .widget {
	margin-bottom: 2rem;
	padding: 1.25rem;
	background: white;
	border: 1px solid var(--color-rule);
	border-radius: var(--padmakara-radius);
}

.padmakara-sidebar .widget .widget-title {
	font-family: var(--font-sans);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--color-stone);
	margin: 0 0 0.75rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--color-rule);
}

.padmakara-sidebar .widget ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.padmakara-sidebar .widget ul li {
	padding-block: 0.4rem;
	border-bottom: 1px solid var(--color-rule);
}

.padmakara-sidebar .widget ul li:last-child {
	border-bottom: 0;
}

.padmakara-sidebar .widget a {
	color: var(--color-ink);
	text-decoration: none;
}

.padmakara-sidebar .widget a:hover {
	color: var(--color-cinnabar);
}

.padmakara-sidebar .widget_search .wp-block-search__inside-wrapper {
	display: flex;
	gap: 0.4rem;
}

.padmakara-sidebar .widget_search input[type="search"] {
	flex: 1;
	padding: 0.5rem 0.7rem;
	font-size: 0.9rem;
}

.padmakara-sidebar .widget_search button {
	padding: 0.5rem 0.9rem;
	background: var(--color-cinnabar);
	color: white;
	border: 0;
	cursor: pointer;
	font-size: 0.9rem;
	border-radius: var(--padmakara-radius);
}

.padmakara-sidebar .widget_search button:hover {
	background: var(--color-cinnabar-dark);
}

/* Layout avec sidebar — deux colonnes quand une barre latérale est
   réellement rendue.

   La règle portait sur `.site-main` et s'appliquait à toute page dépourvue de
   la classe `padmakara-no-cart`. Or aucun gabarit du parent ne place l'aside
   dans `.site-main` : `get_sidebar()` l'écrit À CÔTÉ de `#primary`, dans le
   conteneur. La deuxième colonne de 280 px ne recevait donc jamais rien, et
   toutes les pages sans barre latérale — c'est-à-dire presque toutes —
   perdaient 320 px à droite et se trouvaient décalées vers la gauche.

   On cible donc le conteneur qui porte vraiment les deux blocs, et seulement
   lorsqu'il en contient une. La fiche produit a sa propre grille (section 22)
   et reste en dehors. */
@media (min-width: 900px) {
	body:not(.single-download) #content > .container:has(> .padmakara-sidebar) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 280px;
		gap: 2.5rem;
		align-items: start;
	}
}

/* ========================================================================
   13. Cartes produit EDD — grille + vue liste
   ======================================================================== */

/* Grille de cartes — on force `display: grid` et `min-width: 0` sur les
   enfants pour passer outre le `display: flex` natif du plugin EDD,
   qui sinon laisse les cartes garder leur largeur intrinsèque et
   fait déborder la grille (assertion A2). */
.edd_downloads_list {
	display: grid !important;
	gap: 1.75rem;
	grid-template-columns: minmax(0, 1fr);
	/* EDD applique `margin: 0 -15px` aux grilles pour les étendre de bord
	   à bord. Dans la mise en page v2 ce débordement casse l'assertion
	   A2 ; on le neutralise. */
	margin: 0;
	width: auto;
	/* Chaque carte fait sa hauteur propre. Les couvertures s'alignent par
	   leur hauteur commune (voir plus bas), pas par etirement de la
	   rangee : un titre sur deux lignes ne doit pas raccourcir son image. */
	align-items: start;
}

.edd_downloads_list > .edd_download {
	min-width: 0;
}

/* La planche de couvertures se lit par balayage : des vignettes plus petites
   et plus nombreuses valent mieux que trois grandes images.

   Rangées CENTRÉES, et non colonnes étirées. Une grille en `1fr` remplit
   toujours toute la largeur : une planche d'une seule couverture la posait
   dans la colonne de gauche avec trois colonnes vides à sa droite, et une
   rangée incomplète — cinq fiches sur quatre colonnes — laissait la
   cinquième seule à gauche. Les couvertures se donnent à voir au centre de
   la planche, pas accrochées à son bord gauche.

   D'où le passage en boîte flexible : elle centre chaque ligne, y compris la
   dernière quand elle est incomplète, ce qu'une grille ne sait pas faire.
   Le `!important` neutralise `edd_download_columns_3`, posé par le shortcode
   et plus spécifique, ainsi que la grille d'EDD lui-même. */
.padmakara-plate.edd_downloads_list,
.padmakara-plate .edd_downloads_list {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2rem 1.75rem;
}

/* EDD termine sa liste par un `::after` de nettoyage de flottants
   (`content: ""; display: table`). En boite flexible il devient un element
   de plein droit : large de zero, mais precede d'une gouttiere, il decalait
   toute la ligne de 28 px vers la gauche. */
.padmakara-plate.edd_downloads_list::after,
.padmakara-plate .edd_downloads_list::after {
	display: none;
}

/* Largeur FIXE, pas proportionnelle : c'est elle qui rend toutes les
   couvertures égales, sur toutes les lignes et à toutes les largeurs de
   fenêtre. En `1fr`, une couverture presque carrée — plafonnée par sa
   colonne et non par sa hauteur — grossissait quand la fenêtre rétrécissait,
   jusqu'à être plus grande sur tablette que sur grand écran. 16,5 rem
   reprend la mesure que les colonnes atteignaient sur la largeur de lecture
   courante. */
.padmakara-plate.edd_downloads_list > .edd_download,
.padmakara-plate .edd_downloads_list > .edd_download {
	flex: 0 1 16.5rem;
}

/* Colonnes selon la classe injectée par le shortcode EDD */
.edd_download_columns_1 .edd_downloads_list { grid-template-columns: minmax(0, 1fr); }
.edd_download_columns_2 .edd_downloads_list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.edd_download_columns_3 .edd_downloads_list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.edd_download_columns_4 .edd_downloads_list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.edd_download_columns_5 .edd_downloads_list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.edd_download_columns_6 .edd_downloads_list { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* Quand la zone contenu est étroite (par ex. sidebar présente), on
   ramène automatiquement la grille à un nombre de colonnes qui tient
   vraiment (le but est l'assertion A2 : aucun débordement). */
@media (max-width: 1100px) {
	.edd_download_columns_4 .edd_downloads_list,
	.edd_download_columns_5 .edd_downloads_list,
	.edd_download_columns_6 .edd_downloads_list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.edd_download_columns_3 .edd_downloads_list,
	.edd_download_columns_4 .edd_downloads_list,
	.edd_download_columns_5 .edd_downloads_list,
	.edd_download_columns_6 .edd_downloads_list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
	/* Neutralise les nth-child d'EDD qui assument une largeur ≥ 700px */
	.edd_downloads_list {
		grid-template-columns: 1fr !important;
	}
}

/* Une couverture Padmakara porte deja son propre double filet rouge.
   L'enfermer dans une seconde boite — fond blanc, bordure grise, ombre
   douce — donne un cadre dans un cadre : c'est ce qui faisait « grille de
   produits » au lieu de « planche de catalogue ». La carte n'a donc plus
   de chrome ; les feuilles se posent directement sur le creme. */
.edd_download {
	background: transparent;
	/* Repère pour la zone cliquable étendue à la carte entière. */
	position: relative;
	border: 0;
	border-radius: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	min-width: 0;
}

/* Couvertures : hauteur commune, largeur propre, posees sur le creme.

   C'est la regle du catalogue Padmakara (beta.padmakara.com/67-livres) :
   chaque couverture garde son format, toutes sont reproduites a la meme
   hauteur et reposent sur une base commune. Aucune boite, aucun fond — le
   calage blanc se voyait sur le creme et enfermait la couverture dans un
   second cadre alors qu'elle porte deja le sien.

   Les formats mesures sur la page Textes vont de 0,78 a 1,20 : la hauteur
   commune est choisie pour que meme la plus large tienne dans sa colonne
   sans etre reduite, ce qui romprait l'alignement. */
.padmakara-card--cover .edd_download_image {
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

/* Une couverture est un OBJET : on la reproduit entiere, a hauteur commune,
   sa largeur varie selon son format. Une photo d'enseignement est une VUE :
   elle remplit sa case, quitte a etre recadree. Appliquer la regle des
   couvertures aux photos paysage les faisait letterboxer — des bandes vides
   que l'ombre encadrait comme si elles faisaient partie de l'image. */
.padmakara-card--cover .edd_download_image img {
	/* La boite de l'image a une hauteur commune — c'est elle qui aligne les
	   titres — mais l'image y est posee au format qui lui convient, calee sur
	   le bas. Deux contraintes jouent : la hauteur de la boite, et la largeur
	   de la colonne. Une couverture en portrait est limitee par la hauteur,
	   une couverture presque carree par la largeur. Chacune est donc aussi
	   grande que sa colonne le permet, au lieu d'etre plafonnee par la plus
	   large de la page — c'est ce qui rendait le livre audio minuscule.
	   La boite est transparente : le calage ne se voit pas. */
	height: clamp(180px, 22vw, 300px);
	width: auto;
	max-width: 100%;
	object-fit: contain;
	object-position: bottom center;
	background: transparent;
}

.padmakara-card--photo .edd_download_image img {
	width: 100%;
	aspect-ratio: 3 / 2;
	height: auto;
	object-fit: cover;
	/* Legerement au-dessus du centre : c'est la ou se trouvent les visages. */
	object-position: center 30%;
}

.edd_download_image img {
	border-radius: 0;
	transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

/* Une photo remplit sa boite : l'ombre de boite lui convient. */
.padmakara-card--photo .edd_download_image img {
	box-shadow: var(--padmakara-shadow-sheet);
}

.padmakara-card--photo .edd_download:hover .edd_download_image img,
.padmakara-card--photo:hover .edd_download_image img,
.padmakara-card--photo:focus-within .edd_download_image img {
	box-shadow: var(--padmakara-shadow-sheet-hover);
}

/* Une couverture, elle, est calee dans une boite plus haute qu'elle : une
   ombre de boite dessinait un rectangle fantome au-dessus de l'image.
   `drop-shadow` suit le contenu reellement rendu, donc l'image seule. */
.padmakara-card--cover .edd_download_image img {
	filter:
		drop-shadow(0 1px 2px rgba(26, 24, 22, 0.10))
		drop-shadow(0 8px 20px rgba(26, 24, 22, 0.07));
}

.padmakara-card--cover:hover .edd_download_image img,
.padmakara-card--cover:focus-within .edd_download_image img {
	filter:
		drop-shadow(0 2px 4px rgba(26, 24, 22, 0.12))
		drop-shadow(0 14px 30px rgba(26, 24, 22, 0.10));
}

/* La carte entiere etant la cible, elle repond au clavier comme a la souris :
   au focus du lien, la couverture se souleve de la meme facon. */
.edd_download:hover .edd_download_image img,
.edd_download:focus-within .edd_download_image img {
	transform: translateY(-3px);
}

.edd_download_inner {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	flex: 1 1 auto;
}

.edd_download_title {
	font-family: var(--font-serif);
	font-size: 1.2rem;
	font-weight: 500;
	line-height: 1.25;
	margin: 0;
	/* Un titre sous une couverture passe presque toujours sur deux lignes, et
	   le retour à la ligne naturel laissait un mot seul sur la seconde
	   (« Immeasurable Life and Pristine / Awareness »). L'équilibrage répartit
	   les lignes à longueur égale — c'est la composition d'un titre, pas celle
	   d'un paragraphe. La forme courte sert de repli aux navigateurs qui ne
	   connaissent pas encore la propriété longue. */
	text-wrap: balance;
	text-wrap-style: balance;
	/* Un titre long en anglais (« Immeasurable Life and Pristine Awareness »)
	   ne doit pas pousser sa carte au-delà de la piste de la grille. */
	overflow-wrap: anywhere;
	min-width: 0;
}

.edd_download_title a {
	color: var(--color-ink);
	text-decoration: none;
}

.edd_download_title a:hover {
	color: var(--color-cinnabar);
}

/* Toute la carte est cliquable — couverture et prix compris : le lien du
   titre est étendu à la carte entière par un pseudo-élément. Sans cela, seule
   la chaîne de caractères du titre réagissait, alors que la couverture est
   précisément ce que l'œil vise en premier.

   Un seul lien, pas trois : la carte reste une entrée unique au clavier et
   pour un lecteur d'écran, et le nom accessible reste le titre. Envelopper
   l'image dans un second lien ajouterait une tabulation muette par carte. */
.edd_download_title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.edd_download .edd_price {
	font-family: var(--font-sans);
	font-size: 0.9rem;
	color: var(--color-stone);
	/* Le prix se dessine au-dessus de la zone cliquable étendue, mais ne
	   l'intercepte pas : un clic sur le prix ouvre la fiche comme ailleurs. */
	position: relative;
	z-index: 1;
	pointer-events: none;
}

.edd_download .edd_price .edd_price_amount,
.edd_download .edd_price ins,
.edd_download .edd_price .edd_price_options_price {
	background: transparent;
	color: var(--color-cinnabar);
	font-weight: 600;
	text-decoration: none;
}

.edd_download .edd_price del {
	color: var(--color-stone);
	opacity: 0.7;
	margin-right: 0.4rem;
}

.edd_download .edd_purchase_submit_wrapper {
	margin-top: auto;
	align-self: flex-start;
	/* Le bouton garde son propre clic : il passe devant la zone étendue. */
	position: relative;
	z-index: 2;
}

.edd_download .edd-add-to-cart,
.edd_download .edd-submit,
.edd_download .edd-submit.button {
	background: var(--color-cinnabar);
	color: white;
	border: 0;
	padding: 0.55rem 1rem;
	font-family: var(--font-sans);
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	border-radius: var(--padmakara-radius);
	display: inline-block;
	transition: background-color 0.15s;
}

.edd_download .edd-add-to-cart:hover,
.edd_download .edd-submit:hover {
	background: var(--color-cinnabar-dark);
	color: white;
}

.edd_download .edd-cart-added-alert {
	font-size: 0.85rem;
	color: var(--color-success);
	margin-top: 0.5rem;
}

/* Variante par catégorie : cover, photo, none (définie par PHP) */
.padmakara-card--none .edd_download_image,
.padmakara-card--none .edd_download_inner > .edd_download_image {
	display: none;
}

/* Une fiche sans couverture (les retraites) ne doit pas laisser un vide a
   la place de l'image : elle se reduit a son titre et son prix, et ne
   s'etire pas a la hauteur des cartes illustrees de sa rangee. */
.padmakara-card--none .edd_download_image {
	display: none;
}

.padmakara-card--none {
	align-self: start;
}

/* ========================================================================
   14. Vue liste — planche de catalogue (retraites Lembrun)
   ======================================================================== */

.padmakara-list {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-block: 2rem;
}

.padmakara-list .edd_downloads_list,
.padmakara-list.edd_downloads_list {
	display: flex !important;
	flex-direction: column;
	gap: 0;
	/* La grille pose `align-items: start` pour ses cartes ; en colonne flex
	   cette valeur ramene chaque ligne a la largeur de son propre texte et
	   donne des filets de longueurs inegales. */
	align-items: stretch;
}

.padmakara-list .edd_download {
	/* En grille, une fiche sans couverture porte `align-self: start` pour ne
	   pas s'etirer a la hauteur de sa rangee. Ici le conteneur est une
	   colonne flex : le meme mot-cle agit sur l'axe horizontal et ramene
	   chaque ligne a la largeur de son texte. On le neutralise. */
	align-self: stretch;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 1rem 1.5rem;
	/* Pas de remplissage lateral : le texte reste aligne sur le titre de page
	   et sur les filets. La zone cliquable couvre malgre tout toute la ligne,
	   remplissage vertical compris. */
	padding: 1.1rem 0;
	border-radius: 0;
	border-left: 0;
	border-right: 0;
	border-top: 0;
	border-bottom: 1px solid var(--color-rule);
	background: transparent;
}

.padmakara-list .edd_download:first-child {
	border-top: 1px solid var(--color-rule);
	padding-top: 1.1rem;
}

.padmakara-list .edd_download:last-child {
	border-bottom: 3px double var(--color-cinnabar);
	padding-bottom: 1.1rem;
}

.padmakara-list .edd_download:hover,
.padmakara-list .edd_download:focus-within {
	background: rgba(184, 60, 46, 0.045);
	box-shadow: none;
	border-bottom-color: var(--color-rule);
}

.padmakara-list .edd_download:first-child:hover {
	border-top-color: var(--color-cinnabar);
}

.padmakara-list .edd_download_inner {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	gap: 0.75rem 1.5rem;
	width: 100%;
}

.padmakara-list .edd_download_title {
	font-size: 1.2rem;
	line-height: 1.3;
	flex: 1 1 auto;
	min-width: 0;
}

.padmakara-list .edd_download .edd_price {
	font-size: 1.05rem;
	/* EDD pose `margin-bottom: 10px` sur le prix. Le centrage flex centre la
	   boite de MARGE : le prix se retrouvait 5 px au-dessus du titre. */
	margin: 0;
}

.padmakara-list .edd_download .edd_price {
	text-align: right;
	color: var(--color-cinnabar);
	font-weight: 600;
	justify-self: end;
	white-space: nowrap;
}

.padmakara-list .edd_download .edd_purchase_submit_wrapper {
	margin-top: 0;
}

.padmakara-list .edd_download .edd-add-to-cart,
.padmakara-list .edd_download .edd-submit {
	font-size: 0.85rem;
	padding: 0.35rem 0.8rem;
	justify-self: end;
}

@media (max-width: 600px) {
	.padmakara-list .edd_download {
		grid-template-columns: 1fr;
		gap: 0.4rem;
	}

	.padmakara-list .edd_download_inner {
		flex-wrap: wrap;
		gap: 0.3rem;
	}

	.padmakara-list .edd_download_title {
		flex: 1 1 100%;
	}

	.padmakara-list .edd_download .edd_price,
	.padmakara-list .edd_download .edd_purchase_submit_wrapper {
		justify-self: start;
		text-align: left;
	}
}

/* ========================================================================
   15. Fiche single download
   ======================================================================== */

.single-download .site-main .entry-header {
	margin-bottom: 1.5rem;
}

.single-download .site-main .entry-header .entry-title {
	font-family: var(--font-serif);
	font-size: clamp(1.8rem, 4vw, 2.4rem);
	margin: 0;
}

.single-download .site-main .entry-content {
	max-width: var(--padmakara-reading-max);
	line-height: 1.65;
}

.single-download .padmakara-sidebar .widget_edd_product_details {
	text-align: left;
}

.single-download .padmakara-sidebar .widget_edd_product_details .edd_purchase_submit_wrapper {
	margin-top: 1rem;
}

.single-download .padmakara-sidebar .widget_edd_product_details .edd-add-to-cart,
.single-download .padmakara-sidebar .widget_edd_product_details .edd-submit {
	width: 100%;
	text-align: center;
}

/* ========================================================================
   16. Pagination et en-têtes d'archives
   ======================================================================== */

/* Le filet gris est remplace par le double filet cinabre de la section 20 ;
   les deux ensemble feraient un triple trait. */
.page-header {
	padding-block: 0;
}

.page-header .page-title {
	font-family: var(--font-serif);
	font-size: clamp(1.7rem, 3.5vw, 2.1rem);
	font-weight: 500;
	margin: 0 0 0.4rem;
	line-height: 1.15;
}

.page-header .archive-type,
.page-header .page-description {
	font-size: 0.9rem;
	color: var(--color-stone);
	margin: 0;
}

.page-header .taxonomy-description {
	margin-top: 0.6rem;
	font-size: 0.95rem;
	color: var(--color-ink);
}

.search .page-header {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.search .page-header .search-form {
	max-width: 420px;
}

.pagination,
.edd_pagination,
.navigation.pagination,
.nav-links {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--color-rule);
}

.pagination .page-numbers,
.edd_pagination .page-numbers,
.nav-links a,
.nav-links .page-numbers {
	display: inline-block;
	min-width: 38px;
	padding: 0.45rem 0.7rem;
	text-align: center;
	background: white;
	border: 1px solid var(--color-rule);
	color: var(--color-ink);
	text-decoration: none;
	font-size: 0.9rem;
	border-radius: var(--padmakara-radius);
	transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}

.pagination .page-numbers.current,
.edd_pagination .page-numbers.current,
.nav-links .current {
	background: var(--color-cinnabar);
	color: white;
	border-color: var(--color-cinnabar);
}

.pagination a:hover,
.edd_pagination a:hover,
.nav-links a:hover {
	border-color: var(--color-cinnabar);
	color: var(--color-cinnabar);
}

/* ========================================================================
   17. 404, mot de passe, recherche vide
   ======================================================================== */

.error404 .site-main {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	text-align: center;
	min-height: 50vh;
	padding-block: 3rem 4rem;
}

.error404 .page-content .page-title,
.error404 .entry-header .entry-title {
	font-family: var(--font-serif);
	font-size: clamp(3rem, 10vw, 4.5rem);
	color: var(--color-cinnabar);
	margin: 0 0 0.5rem;
	font-weight: 500;
	line-height: 1;
}

.error404 .page-content > p,
.error404 .page-content .taxonomy-description {
	max-width: 32rem;
	color: var(--color-stone);
	margin: 0 auto 1.5rem;
}

.error404 .page-content .search-form {
	max-width: 360px;
	margin: 0 auto 1.5rem;
	display: flex;
	gap: 0.4rem;
}

.error404 .page-content .search-form input[type="search"] {
	flex: 1;
	padding: 0.6rem 0.8rem;
	font-size: 0.95rem;
}

.error404 .page-content .search-form input[type="submit"],
.error404 .page-content .search-form button {
	background: var(--color-cinnabar);
	color: white;
	border: 0;
	padding: 0.6rem 1.2rem;
	font-size: 0.95rem;
	cursor: pointer;
	border-radius: var(--padmakara-radius);
}

.error404 .page-content .btn-primary,
.error404 .page-content a.btn,
.error404 .page-content a.button {
	background: var(--color-cinnabar);
	color: white;
	padding: 0.7rem 1.4rem;
	text-decoration: none;
	border-radius: var(--padmakara-radius);
	display: inline-block;
	border: 0;
}

.error404 .page-content .btn-primary:hover,
.error404 .page-content a.btn:hover,
.error404 .page-content a.button:hover {
	background: var(--color-cinnabar-dark);
	color: white;
}

/* Formulaire de mot de passe — fiche protégée */
.post-password-form {
	max-width: 28rem;
	margin: 3rem auto;
	padding: 1.5rem 1.75rem;
	background: white;
	border: 1px solid var(--color-rule);
	border-radius: var(--padmakara-radius);
}

.post-password-form p {
	margin: 0 0 0.75rem;
	color: var(--color-stone);
	font-size: 0.95rem;
}

.post-password-form label {
	display: block;
	font-size: 0.85rem;
	color: var(--color-stone);
	margin-bottom: 0.4rem;
}

.post-password-form input[type="password"] {
	width: 100%;
	padding: 0.55rem 0.75rem;
	border: 1px solid var(--color-rule);
	background: var(--color-paper);
	font: inherit;
	border-radius: var(--padmakara-radius);
}

.post-password-form input[type="submit"] {
	background: var(--color-cinnabar);
	color: white;
	border: 0;
	padding: 0.6rem 1.2rem;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	border-radius: var(--padmakara-radius);
	margin-top: 0.5rem;
}

.post-password-form input[type="submit"]:hover {
	background: var(--color-cinnabar-dark);
}

/* Recherche sans résultat */
.search.no-results .page-content p {
	color: var(--color-stone);
}

/* ========================================================================
   18. Tunnel EDD — panier, checkout, mon compte
   ======================================================================== */

/* Conteneur central des pages checkout / dashboard / mon compte */
.page-template-checkout .site-main .entry-content,
.page-template-dashboard .site-main .entry-content,
.edd-checkout .site-main .entry-content,
body.page-template-default .site-main .entry-content:has(#edd_checkout_cart) {
	max-width: 56rem;
	margin-inline: auto;
}

/* La même mesure pour le titre, son double filet et le contenu.
   Les règles ci-dessus ne bornent que `.entry-content` : tant que la barre
   latérale occupait la droite, la colonne entière faisait 56 rem et les deux
   coïncidaient par accident. Sans elle (`padmakara_v2_no_sidebar()`), l'article
   revient à ses 72 rem et le filet dépassait le contenu de 128 px de part et
   d'autre. C'est l'article qu'on borne, le contenu suit. */
.padmakara-tunnel .site-main > article {
	max-width: 56rem;
}

/* Alertes EDD — surchargent les styles natifs si nécessaire */
.edd-alert {
	padding: 0.875rem 1rem;
	border-left: 3px solid;
	border-radius: 0 var(--padmakara-radius) var(--padmakara-radius) 0;
	background: white;
	margin-block: 1rem;
	color: var(--color-ink);
}

.edd-alert-error {
	border-color: var(--color-error);
	background: #fdf3f1;
	color: #6b1a13;
}

.edd-alert-success {
	border-color: var(--color-success);
	background: #f1f8f3;
	color: #1b5b34;
}

.edd-alert-info {
	border-color: var(--color-cinnabar);
	background: white;
	color: var(--color-ink);
}

/* Tableau panier (#edd_checkout_cart) */
#edd_checkout_cart {
	width: 100%;
	border-collapse: collapse;
	background: white;
	border: 1px solid var(--color-rule);
	margin-block: 1.5rem;
}

#edd_checkout_cart th {
	background: var(--color-paper);
	font-family: var(--font-sans);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--color-stone);
	padding: 0.75rem;
	text-align: left;
	border-bottom: 1px solid var(--color-rule);
}

#edd_checkout_cart td {
	padding: 0.85rem 0.75rem;
	border-bottom: 1px solid var(--color-rule);
	vertical-align: middle;
}

#edd_checkout_cart .edd_cart_item_image img {
	width: 60px;
	height: auto;
	border-radius: var(--padmakara-radius);
}

#edd_checkout_cart .edd_checkout_cart_item_title {
	font-family: var(--font-serif);
	font-size: 1.05rem;
	color: var(--color-ink);
}

#edd_checkout_cart .edd_cart_remove_item_btn {
	color: var(--color-stone);
	text-decoration: none;
	font-size: 0.85rem;
}

#edd_checkout_cart .edd_cart_remove_item_btn:hover {
	color: var(--color-cinnabar);
}

#edd_checkout_cart .edd_cart_amount,
#edd_checkout_cart .edd_cart_subtotal_amount,
#edd_checkout_cart .edd_cart_tax_amount {
	color: var(--color-cinnabar);
	font-weight: 600;
}

#edd_checkout_cart .edd_cart_subtotal_row th,
#edd_checkout_cart .edd_cart_tax_row th {
	text-transform: none;
	font-size: 0.9rem;
	color: var(--color-ink);
	letter-spacing: 0;
}

/*
 * Le même panier, servi par les blocs.
 *
 * Les règles ci-dessus visent `th` et `td` : elles décrivent le panier du
 * code court, qui est un vrai tableau. La page Commande, elle, passe par le
 * bloc Checkout, qui rend les mêmes données en `div` — aucune ne
 * s'appliquait, et le panier restait au gris d'EDD au milieu d'une page
 * crème. On garde les deux : le code court sert encore ailleurs.
 *
 * La feuille reprend celle des deux encadrés de saisie qui la suivent, pour
 * que la page n'ait qu'un seul bord vertical.
 */
.edd-blocks-form__cart #edd_checkout_cart {
	background: white;
	border: 1px solid var(--color-rule);
	border-radius: var(--padmakara-radius);
}

.edd-blocks-form__cart .edd-blocks-cart__row,
.edd-blocks-form__cart .edd_cart_footer_row {
	padding: 0.9rem 1.75rem;
	gap: 1rem;
}

/* L'en-tête du panier est une légende de colonne, pas un titre. */
.edd-blocks-form__cart .edd-blocks-cart__row-header {
	padding-block: 0.75rem;
	background: var(--color-paper);
	border-bottom: 1px solid var(--color-rule);
	font-family: var(--font-sans);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--color-stone);
}

.edd-blocks-form__cart .edd-blocks-cart__items {
	border-bottom: 1px solid var(--color-rule);
}

.edd-blocks-form__cart .edd_checkout_cart_item_title {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	font-family: var(--font-serif);
	font-size: 1.05rem;
	line-height: 1.3;
	color: var(--color-ink);
}

.edd-blocks-form__cart .edd_cart_item_image img {
	display: block;
	width: 48px;
	height: auto;
	box-shadow: var(--padmakara-shadow-card);
}

/* EDD donne au dernier bloc de la ligne `flex: 1 1 110px`. Dans une colonne
   de 56 rem la place restait ; dans 36 rem, le titre prenait toute la ligne
   et poussait le prix dessous. On inverse les rôles : le prix fait sa taille
   et ne bouge plus, le titre prend ce qui reste et se replie s'il le faut.
   Le prix revient alors à côté de son article.

   Sous 400 px il n'y a plus la place, et la ligne se replie quand même —
   c'est la bonne réponse, un titre sur deux lignes et un prix côte à côte
   n'y tiendraient pas. Mais repliée, la boîte du prix ne fait que la
   largeur du montant, et « flex-end » n'a alors rien à distribuer : le
   montant retombait à gauche sous le titre, en contradiction avec l'en-tête
   « Prix unitaire » qui l'annonce à droite. La marge automatique règle les
   deux cas d'un coup — elle vaut zéro quand la ligne est pleine, et pousse
   le prix au bord quand il se retrouve seul sur la sienne. Pas de point de
   rupture à entretenir. */
.edd-blocks-form__cart .edd-blocks-cart__row-item .edd_cart_item_name {
	flex: 1 1 auto;
	min-width: 0;
}

.edd-blocks-form__cart .edd-blocks-cart__row-item > .edd_cart_item_price:last-of-type:not(:first-of-type) {
	flex: 0 0 auto;
	margin-inline-start: auto;
}

.edd-blocks-form__cart .edd_cart_item_price {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.75rem;
	font-family: var(--font-sans);
	color: var(--color-ink);
}

/* Les lignes de bas de panier : le libellé pèse moins que le montant, et
   seul le total est appuyé. La TVA sortait en cinabre gras, à égalité avec
   le total — deux accents qui s'annulent. */
.edd-blocks-form__cart .edd_cart_tax,
.edd-blocks-form__cart .edd_cart_total {
	font-family: var(--font-sans);
	font-size: 0.92rem;
	font-weight: 400;
	color: var(--color-stone);
}

/* Les montants passent par un identifiant, comme les règles du panier en
   tableau plus haut qui les mettaient tous les deux en cinabre gras : deux
   accents côte à côte ne hiérarchisent rien, ils s'annulent. La TVA revient
   donc à l'encre courante et le cinabre reste au total, seul chiffre que
   l'acheteur a besoin de retrouver d'un coup d'œil. */
#edd_checkout_cart .edd_cart_tax .edd_cart_tax_amount {
	font-weight: 400;
	color: var(--color-ink);
}

#edd_checkout_cart .edd_cart_total .edd_cart_amount {
	font-weight: 600;
	color: var(--color-cinnabar);
}

.edd-blocks-form__cart .edd_cart_total {
	font-size: 1rem;
	color: var(--color-ink);
}

.edd-blocks-form__cart .edd_cart_tax_row {
	padding-bottom: 0.2rem;
}

/* Le code de remise est une porte de service : elle doit être trouvable et
   ne rien réclamer. En bouton gris plein, elle pesait autant que le total
   qui lui fait face. */
.edd-blocks-form__cart .edd_discount_link,
#edd_checkout_form_wrap .edd-blocks-form__cart .edd_discount_link {
	padding: 0;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--color-rule);
	border-radius: 0;
	font-family: var(--font-sans);
	font-size: 0.88rem;
	color: var(--color-stone);
	cursor: pointer;
}

.edd-blocks-form__cart .edd_discount_link:hover,
.edd-blocks-form__cart .edd_discount_link:focus-visible {
	color: var(--color-cinnabar);
	border-bottom-color: var(--color-cinnabar);
	transform: none;
}

/*
 * Panier vide — une sortie, pas un étalage.
 *
 * Le bloc est centré comme le titre et son double filet : sur une page qui
 * n'a plus rien à montrer, l'axe de la page est le seul repère qui reste.
 * Le blanc autour n'est pas un vide à combler, c'est le même calme que le
 * bas de l'accueil.
 */
.padmakara-empty-cart {
	max-width: 32rem;
	margin-inline: auto;
	padding-block: clamp(1.5rem, 4vw, 2.5rem) 0;
	text-align: center;
}

.padmakara-empty-cart__lede {
	font-family: var(--font-serif);
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.25;
	color: var(--color-ink);
	margin: 0;
}

.padmakara-empty-cart__note {
	font-family: var(--font-sans);
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--color-stone);
	margin: 0.6rem auto 0;
	max-width: 26rem;
	text-wrap: balance;
	text-wrap-style: balance;
}

.padmakara-empty-cart__action {
	display: inline-block;
	margin-top: 1.75rem;
	padding: 0.7rem 1.6rem;
	background: var(--color-cinnabar);
	border-radius: var(--padmakara-radius);
	font-family: var(--font-sans);
	font-size: 0.95rem;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.padmakara-empty-cart__action:hover,
.padmakara-empty-cart__action:focus-visible {
	background: var(--color-cinnabar-dark);
	color: #fff;
}

/*
 * La colonne du tunnel.
 *
 * Le rapport était inversé : les feuilles prenaient les 56 rem du conteneur
 * pendant que les champs restaient bornés à 360 px. Chaque encadré portait
 * donc une colonne de saisie serrée à gauche et un demi-mètre de blanc à
 * droite, et le bouton de paiement flottait au milieu de ce vide sans se
 * raccrocher à rien.
 *
 * On prend le problème par l'autre bout : c'est le formulaire qui donne sa
 * mesure à la colonne, et les champs occupent ensuite toute la colonne. Un
 * seul bord vertical du haut de la page jusqu'au bouton — le panier, les
 * deux feuilles de saisie et le paiement sont à l'aplomb.
 *
 * La mesure ne s'applique qu'au tunnel : le tableau de l'historique de
 * commande et le tableau de bord gardent leurs 56 rem, ils en ont besoin.
 */
:root {
	--padmakara-checkout-max: 36rem;
}

/* `width: 100%` n'est pas une redondance devant `max-width`.
   `#edd_checkout_form_wrap` est une grille : ses enfants s'étirent sur la
   piste tant que leurs marges horizontales valent zéro, et une marge
   automatique annule cet étirement. En centrant les deux blocs, on les
   faisait donc retomber sur la largeur de leur contenu — 416 px mesurés au
   lieu des 576 posés ici. La largeur explicite leur rend la piste, la
   mesure la borne, et la marge les centre. */
.edd-blocks__cart,
.edd-blocks__purchase-form {
	width: 100%;
	max-width: var(--padmakara-checkout-max);
	margin-inline: auto;
}

/* Feuilles du tunnel de paiement */
#edd_checkout_form_wrap fieldset {
	background: white;
	border: 1px solid var(--color-rule);
	border-radius: var(--padmakara-radius);
	padding: 1.5rem 1.75rem;
	margin-block: 1.5rem;
}

#edd_checkout_form_wrap fieldset > fieldset {
	background: var(--color-paper-soft);
	margin-top: 1rem;
}

#edd_checkout_form_wrap label,
#edd_checkout_form_wrap .edd-label {
	display: block;
	margin-bottom: 0.4rem;
	font-family: var(--font-sans);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--color-stone);
}

#edd_checkout_form_wrap input.edd-input,
#edd_checkout_form_wrap select.edd-select,
#edd_checkout_form_wrap textarea.edd-input {
	width: 100%;
	max-width: none;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--color-rule);
	background: white;
	font: inherit;
	border-radius: var(--padmakara-radius);
}

/* Un champ dit sa mesure par sa longueur. Tout ce qu'on ne peut pas prévoir
   — une adresse, une ville, un nom — prend la colonne ; un code postal
   français en fait cinq signes, et une case de 30 rem pour cinq signes est
   une question mal posée. C'est le seul bord ragé de la colonne, et il est
   voulu. */
#edd_checkout_form_wrap #edd-card-zip-wrap input.edd-input {
	max-width: 11rem;
}

#edd_checkout_form_wrap input.edd-input:focus,
#edd_checkout_form_wrap select.edd-select:focus {
	border-color: var(--color-cinnabar);
	outline: 0;
	box-shadow: 0 0 0 3px rgba(184, 60, 46, 0.15);
}

#edd_checkout_form_wrap #edd-discount-code-wrap,
#edd_checkout_form_wrap #edd-discount-error-wrap,
#edd_checkout_form_wrap #edd-payment-mode-wrap,
#edd_checkout_form_wrap .edd-cart-adjustment {
	margin-top: 1rem;
}

/* Sélecteur de mode de paiement */
#edd-payment-mode-select {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

#edd_checkout_form_wrap #edd-payment-mode-wrap .edd-payment-mode-label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--color-rule);
	border-radius: var(--padmakara-radius);
	cursor: pointer;
	background: white;
	font-family: var(--font-sans);
	font-size: 0.95rem;
	color: var(--color-ink);
	transition: border-color 0.15s, background-color 0.15s;
}

#edd_checkout_form_wrap #edd-payment-mode-wrap .edd-payment-mode-label:has(input:checked) {
	border-color: var(--color-cinnabar);
	background: rgba(184, 60, 46, 0.04);
}

#edd_checkout_form_wrap #edd-payment-mode-wrap input[type="radio"] {
	margin: 0;
	width: auto;
}

/*
 * La feuille de paiement.
 *
 * C'est le dernier geste de la page : elle doit se lire comme une pile de
 * moyens de payer, pas comme un encadré avec un rectangle jaune dedans.
 * D'où une colonne — un moyen par ligne, tous de la largeur de la feuille,
 * séparés d'un pas constant. Ajouter la carte bancaire (Stripe) plus tard
 * revient alors à ajouter une ligne : la mise en page est déjà écrite pour
 * elle, et le choix se lira comme un choix parce que les deux boutons
 * auront exactement la même emprise.
 *
 * EDD sème dans ce fieldset des conteneurs vides qu'il remplit au besoin
 * (erreurs, messages, Apple Pay, Google Pay). Dans une colonne à `gap`, un
 * conteneur vide occupe quand même un pas ; on les retire du flux tant
 * qu'ils sont vides, sinon la pile prend des trous sans raison visible.
 */
/* Trois identifiants : `edd.min.css` remet à plat ce fieldset précis par
   `#edd_checkout_form_wrap #edd_purchase_submit { border: none; padding: 0 }`,
   ce qui laissait un aplat blanc sans marge intérieure ni filet — une bande,
   pas une feuille. Il faut donc passer devant sans `!important`. */
#edd_checkout_form_wrap #edd_purchase_form #edd_purchase_submit {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.85rem;
	padding: 1.5rem 1.75rem;
	border: 1px solid var(--color-rule);
	border-radius: var(--padmakara-radius);
	background: white;
}

#edd_checkout_form_wrap #edd_purchase_submit > div:empty {
	display: none;
}

/*
 * L'alignement du bouton PayPal.
 *
 * Il ne flottait pas par accident : `paypal.min.css` pose
 * `#edd_purchase_submit #edd-paypal-container { max-width: 575px;
 * margin-inline: auto }`. 575 px est un chiffre d'EDD, qui ne connaît ni la
 * mesure de cette page ni celle de la feuille qui le porte — d'où un
 * rectangle centré sur lui-même au milieu d'un blanc plus large que lui.
 *
 * On reprend la main à la régulière, par trois identifiants plutôt que deux,
 * sans `!important` : le bouton prend la colonne, comme tout le reste. Même
 * traitement pour les portefeuilles et le bloc carte, que la même règle
 * bornait à 575 px.
 */
#edd_checkout_form_wrap #edd_purchase_submit #edd-paypal-container,
#edd_checkout_form_wrap #edd_purchase_submit #edd-paypal-messages,
#edd_checkout_form_wrap #edd_purchase_submit #edd-fastlane-container,
#edd_checkout_form_wrap #edd_purchase_submit .edd-paypal-wallet-container,
#edd_checkout_form_wrap #edd_purchase_submit .edd-paypal-unbranded-card,
#edd_checkout_form_wrap #edd_purchase_submit .edd-paypal-card-divider,
#edd_checkout_form_wrap #edd_purchase_submit .edd-fastlane-divider {
	max-width: none;
	margin-inline: 0;
	margin-block: 0;
}

/* Le « ou » entre deux moyens de paiement : un filet interrompu par un mot,
   au crème et au filet du site plutôt qu'au gris d'EDD. */
#edd_checkout_form_wrap #edd_purchase_submit .edd-paypal-card-divider,
#edd_checkout_form_wrap #edd_purchase_submit .edd-fastlane-divider {
	margin-block: 0.25rem;
}

#edd_checkout_form_wrap #edd_purchase_submit .edd-paypal-card-divider::before,
#edd_checkout_form_wrap #edd_purchase_submit .edd-paypal-card-divider::after,
#edd_checkout_form_wrap #edd_purchase_submit .edd-fastlane-divider::before,
#edd_checkout_form_wrap #edd_purchase_submit .edd-fastlane-divider::after {
	border-top-color: var(--color-rule);
}

#edd_checkout_form_wrap #edd_purchase_submit .edd-paypal-card-divider span,
#edd_checkout_form_wrap #edd_purchase_submit .edd-fastlane-divider span {
	font-family: var(--font-sans);
	font-size: 0.85rem;
	color: var(--color-stone);
}

/* Bouton d'achat principal */
#edd-purchase-button,
#edd_checkout_form_wrap #edd_purchase_submit input[type="submit"],
#edd_checkout_form_wrap #edd_purchase_submit button {
	display: block;
	width: 100%;
	background: var(--color-cinnabar);
	color: white;
	border: 0;
	padding: 0.85rem 1.6rem;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	border-radius: var(--padmakara-radius);
	font-size: 1rem;
}

#edd-purchase-button:hover,
#edd_checkout_form_wrap #edd_purchase_submit input[type="submit"]:hover,
#edd_checkout_form_wrap #edd_purchase_submit button:hover {
	background: var(--color-cinnabar-dark);
}

#edd-purchase-button[data-edd-button-state="processing"],
#edd-purchase-button[data-edd-button-state="disabled"] {
	background: var(--color-cinnabar-dark);
	opacity: 0.85;
	cursor: progress;
}

/* Tableau historique */
#edd_user_history,
table#edd_purchase_receipt,
table#edd_purchase_receipt_products {
	width: 100%;
	border-collapse: collapse;
	background: white;
	border: 1px solid var(--color-rule);
	margin-block: 1.5rem;
}

#edd_user_history th,
table#edd_purchase_receipt th,
table#edd_purchase_receipt_products th {
	background: var(--color-paper);
	font-family: var(--font-sans);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--color-stone);
	padding: 0.75rem;
	text-align: left;
	border-bottom: 1px solid var(--color-rule);
}

#edd_user_history td,
table#edd_purchase_receipt td,
table#edd_purchase_receipt_products td {
	padding: 0.85rem 0.75rem;
	border-bottom: 1px solid var(--color-rule);
	vertical-align: top;
}

#edd_user_history .edd_purchase_status {
	font-size: 0.82rem;
	padding: 0.15rem 0.5rem;
	border-radius: var(--padmakara-radius);
	font-weight: 600;
}

#edd_user_history .edd_purchase_status.completed,
.edd_purchase_status.complete {
	background: rgba(44, 138, 79, 0.12);
	color: var(--color-success);
}

#edd_user_history .edd_purchase_status.pending {
	background: rgba(184, 126, 46, 0.15);
	color: var(--color-warning);
}

#edd_user_history .edd_purchase_status.failed,
#edd_user_history .edd_purchase_status.cancelled,
#edd_user_history .edd_purchase_status.revoked {
	background: rgba(192, 57, 43, 0.12);
	color: var(--color-error);
}

/*
 * Page « Mon compte ».
 *
 * Le gabarit du parent (templates/dashboard.php) empile trois blocs
 * `.page-content > .post-text` — téléchargements, historique, informations —
 * sans jamais passer par `.entry-content`. La mesure posée plus haut ne les
 * atteignait donc pas : les champs du profil s'étiraient sur toute la largeur
 * du conteneur, et les trois sections se touchaient, leurs intitulés se
 * lisant comme des libellés de formulaire plutôt que comme des titres.
 */
.page-template-dashboard .site-main > article {
	max-width: 46rem;
	margin-inline: auto;
}

.page-template-dashboard .page-content + .page-content {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.page-template-dashboard .account-title,
.dashboard-account-title {
	font-family: var(--font-serif);
	font-size: 1.35rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--color-ink);
	margin: 0 0 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--color-rule);
	display: block;
}

/* « Vous n'avez encore fait aucun achat. » — une absence se dit à voix basse. */
.page-template-dashboard .edd-no-downloads,
.page-template-dashboard .edd-no-purchases {
	font-family: var(--font-sans);
	font-size: 0.95rem;
	color: var(--color-stone);
	margin: 0;
}

/*
 * Le formulaire de profil.
 *
 * EDD le rend en trois `fieldset` successifs avec leur `legend`. Laissés au
 * navigateur, ils arrivent avec la bordure en relief et la légende à cheval
 * dessus — un dialogue système posé au milieu d'une page composée. On retire
 * la chrome du navigateur, comme le fait déjà le panneau de connexion
 * (section 25), et on redonne à la légende le rôle de sous-titre.
 */
#edd_profile_editor_form fieldset {
	border: 0;
	margin: 0 0 2rem;
	padding: 0;
	background: transparent;
	min-width: 0;
}

#edd_profile_editor_form fieldset:last-of-type {
	margin-bottom: 0;
}

/* La légende nomme le groupe, le libellé nomme le champ : c'est la légende
   qui porte l'encre, sans quoi les deux niveaux se lisent à l'envers. */
#edd_profile_editor_form legend {
	display: block;
	float: none;
	width: 100%;
	margin: 0 0 1rem;
	padding: 0;
	border: 0;
	font-family: var(--font-sans);
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--color-ink);
}

#edd_profile_editor_form p {
	margin: 0 0 1rem;
}

#edd_profile_editor_form label {
	display: block;
	font-family: var(--font-sans);
	font-size: 0.88rem;
	color: var(--color-stone);
	margin-bottom: 0.3rem;
}

#edd_profile_editor_form input[type="text"],
#edd_profile_editor_form input[type="email"],
#edd_profile_editor_form input[type="password"],
#edd_profile_editor_form select {
	/* La largeur du champ annonce ce qu'on y attend. Une adresse e-mail ou un
	   nom n'ont pas besoin de 46 rem — et un champ aussi long se lit comme
	   une invitation à écrire un paragraphe. */
	width: 100%;
	max-width: 24rem;
	padding: 0.55rem 0.75rem;
	border: 1px solid var(--color-rule);
	background: #fff;
	font: inherit;
	border-radius: var(--padmakara-radius);
}

#edd_profile_editor_form input:focus,
#edd_profile_editor_form select:focus {
	border-color: var(--color-cinnabar);
	outline: 0;
	box-shadow: 0 0 0 3px rgba(184, 60, 46, 0.15);
}

#edd_profile_editor_form #edd_profile_submit_fieldset {
	margin-top: 0.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--color-rule);
}

#edd_profile_editor_form #edd_profile_submit_wrap {
	margin: 0;
}

/* Responsive du panier — mobile */
@media (max-width: 700px) {
	#edd_checkout_cart thead {
		display: none;
	}

	#edd_checkout_cart,
	#edd_checkout_cart tbody,
	#edd_checkout_cart tr {
		display: block;
		width: 100%;
	}

	#edd_checkout_cart tr.edd_cart_item {
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 0.4rem 1rem;
		padding: 0.85rem 0.75rem;
		border-bottom: 1px solid var(--color-rule);
	}

	#edd_checkout_cart td {
		border: 0;
		padding: 0;
	}

	#edd_checkout_cart .edd_cart_item_image {
		grid-column: 1 / 3;
	}

	#edd_checkout_cart .edd_cart_actions {
		grid-column: 2;
		text-align: right;
	}

	#edd_checkout_cart tfoot tr {
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 0.4rem 1rem;
		padding: 0.6rem 0.75rem;
	}

	#edd_checkout_cart tfoot th {
		border-bottom: 0;
		padding: 0;
		background: transparent;
		font-size: 0.9rem;
		text-transform: none;
		letter-spacing: 0;
		color: var(--color-ink);
	}
}

/* ========================================================================
   19. Boutons EDD — sortir du bleu par défaut
   ======================================================================== */

/* EDD sert ses propres boutons depuis `edd.min.css`, avec une classe de
   couleur (`blue`, `gray`…) qui l'emporte en spécificité sur un sélecteur
   simple : c'est pourquoi retirer la feuille du thème parent n'avait rien
   changé au bouton bleu #428bca. On le remplace partout, y compris dans le
   formulaire de `free-downloads-edd`, qui rend un <a> et non un <button>. */
a.edd-submit.button,
a.edd-submit.button.blue,
a.edd-submit.button.gray,
a.edd-submit.button.dark-gray,
input.edd-submit.button,
input.edd-submit.button.blue,
input.edd-submit.button.gray,
button.edd-submit.button,
button.edd-submit.button.blue,
/* Sur la page de connexion, EDD rend `input.edd-submit` SANS la classe
   `.button` : les selecteurs ci-dessus le manquaient et le bouton restait au
   gris par defaut du navigateur. */
input[type="submit"].edd-submit,
button.edd-submit,
.edd_download .edd-add-to-cart,
.edd_download .edd-submit {
	background: var(--color-cinnabar);
	background-color: var(--color-cinnabar);
	border: 0;
	border-radius: var(--padmakara-radius);
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-family: var(--font-sans);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.25;
	padding: 0.7rem 1.4rem;
	text-align: center;
	text-decoration: none;
	text-shadow: none;
	box-shadow: none;
	transition: background-color 0.15s ease;
}

input[type="submit"].edd-submit:hover,
button.edd-submit:hover,
a.edd-submit.button:hover,
a.edd-submit.button.blue:hover,
a.edd-submit.button:focus,
a.edd-submit.button.blue:focus,
input.edd-submit.button:hover,
input.edd-submit.button.blue:hover,
button.edd-submit.button:hover,
button.edd-submit.button.blue:hover,
.edd_download .edd-add-to-cart:hover,
.edd_download .edd-submit:hover {
	background: var(--color-cinnabar-dark);
	background-color: var(--color-cinnabar-dark);
	color: #fff;
}

/* EDD rend DEUX boutons d'achat : le vrai, piloté en JavaScript, et une
   réplique `input.edd-no-js` pour les navigateurs sans script. Il masque la
   seconde par une règle en ligne, `.edd-js .edd-no-js { display: none }`,
   dont la spécificité vaut 0,2,0 — moins que les sélecteurs ci-dessus, qui
   posent `display: inline-block`. Les deux « Acheter » apparaissaient donc
   empilés dans le panneau d'acquisition de la fiche produit.

   On rétablit le masquage plutôt que d'alléger les sélecteurs de couleur :
   ceux-ci doivent rester assez forts pour battre le bleu d'EDD, qui est lui
   aussi servi avec une classe de couleur. */
body.edd-js input.edd-no-js.edd-submit,
body.edd-js input.edd-no-js.edd-submit.button.blue {
	display: none;
}

/* ========================================================================
   20. Le double filet — titres de page
   ======================================================================== */

/* Le motif vient des pecha imprimées par Padmakara : la page est encadrée
   d'un double filet cinabre. On le cite ici comme séparateur, et nulle part
   ailleurs en décoration. */
.entry-header,
.page-header,
.padmakara-download__header {
	margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.entry-header::after,
.page-header::after,
.padmakara-download__header::after,
.padmakara-home__intro::after {
	content: "";
	display: block;
	height: 6px;
	margin-top: 1rem;
	border-top: 2px solid var(--color-cinnabar);
	border-bottom: 1px solid var(--color-cinnabar);
}

/* ========================================================================
   21. Page d'accueil — la planche d'entrée
   ======================================================================== */

.padmakara-home {
	padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5rem);
}

.padmakara-home__intro {
	max-width: 44rem;
	margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.padmakara-home__title {
	font-family: var(--font-serif);
	font-size: clamp(2rem, 4.4vw, 2.9rem);
	font-weight: 500;
	line-height: 1.1;
	margin: 0;
}

.padmakara-home__lede {
	font-family: var(--font-sans);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--color-stone);
	max-width: 36rem;
	margin-top: 1rem;
	text-wrap: pretty;
}

.padmakara-home__columns {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1.25rem, 2.2vw, 2rem);
	align-items: start;
}

@media (max-width: 1100px) {
	.padmakara-home__columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.padmakara-home__column {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	color: inherit;
	text-decoration: none;
}

.padmakara-home__column img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	box-shadow: var(--padmakara-shadow-sheet);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.padmakara-home__column:hover img,
.padmakara-home__column:focus-visible img {
	transform: translateY(-3px);
	box-shadow: var(--padmakara-shadow-sheet-hover);
}

.padmakara-home__column h2 {
	font-family: var(--font-serif);
	font-size: clamp(1.4rem, 2.2vw, 1.7rem);
	font-weight: 500;
	line-height: 1.15;
	margin: 0;
	text-wrap: balance;
	text-wrap-style: balance;
	color: var(--color-ink);
	transition: color 0.15s ease;
}

.padmakara-home__column:hover h2 {
	color: var(--color-cinnabar);
}

.padmakara-home__column p {
	font-family: var(--font-sans);
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--color-stone);
	margin: 0;
	max-width: 38ch;
	/* `pretty` se contente d'éviter le mot solitaire en dernière ligne ; sur
	   une légende de deux lignes sous une image, c'est `balance` qui convient —
	   même traitement que les titres de carte, juste au-dessus. */
	text-wrap: balance;
	text-wrap-style: balance;
}

/* Pas de filet au-dessus : la ligne de contact prolonge la planche, elle ne
   s'en détache pas. L'écart seul suffit à la poser à part, et la page ne
   compte alors qu'un seul trait horizontal — le double filet du titre. */
.padmakara-home__contact {
	margin-top: clamp(3rem, 6vw, 4.5rem);
}

.padmakara-home__contact h3 {
	font-family: var(--font-serif);
	font-size: 1.25rem;
	font-weight: 500;
	margin: 0 0 0.3rem;
}

.padmakara-home__contact p {
	font-family: var(--font-sans);
	font-size: 0.95rem;
	color: var(--color-stone);
	margin: 0;
}

@media (max-width: 900px) {
	.padmakara-home__columns {
		grid-template-columns: 1fr;
		gap: 2.25rem;
	}

	.padmakara-home__column img {
		aspect-ratio: 16 / 9;
	}

	.padmakara-home__column p {
		max-width: 46ch;
	}
}

/* ========================================================================
   22. Fiche produit — deux colonnes et panneau d'acquisition
   ======================================================================== */

/* `single-download.php` du parent pose deux blocs frères dans le conteneur :
   #primary (titre, couverture, description) et #secondary (prix, bouton,
   métadonnées). Il suffit donc de les mettre en grille — aucun gabarit à
   surcharger.

   La grille ne vaut que pour les fiches qui ont vraiment deux blocs : les
   fiches gratuites n'ont plus de second (section 29), et sans cette réserve
   elles gardaient une colonne de 20 rem vide à leur droite, qui décalait
   toute la composition vers la gauche. */
@media (min-width: 950px) {
	.single-download:not(.padmakara-free-download) #content > .container {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 20rem;
		gap: clamp(2rem, 4vw, 3.5rem);
		align-items: start;
	}

	/* Le panneau suit le défilement, mais l'en-tête est collant lui aussi :
	   calé à 2 rem du haut de la fenêtre, il glissait sous la barre dès qu'on
	   descendait — le prix disparaissait derrière le menu. Il s'arrête
	   désormais sous l'en-tête, à la hauteur que celui-ci déclare. */
	.single-download .padmakara-sidebar {
		position: sticky;
		top: calc(var(--padmakara-sticky-top) + var(--padmakara-header-height) + 1.5rem);
	}
}

.single-download .padmakara-download__title {
	font-family: var(--font-serif);
	font-size: clamp(1.9rem, 3.6vw, 2.6rem);
	font-weight: 500;
	line-height: 1.12;
	margin: 0;
	/* Les titres d'ouvrage sont longs et portent souvent l'auteur en fin de
	   ligne — « … de Śāntideva » tombait seul sur une deuxième ligne, sous une
	   première pleine. `balance` répartit les lignes à égalité et repose le
	   titre sur son double filet. */
	text-wrap: balance;
	text-wrap-style: balance;
}

/* La couverture est une feuille posée sur le crème, comme sur la planche. */
.padmakara-download__cover {
	margin-block: 0 2rem;
}

.padmakara-download__cover img {
	width: auto;
	max-width: min(100%, 22rem);
	height: auto;
	box-shadow: var(--padmakara-shadow-sheet);
	/* Le titre et le double filet sont centrés (section 28), le texte courant
	   est posé sur le même axe : la couverture n'a pas de raison de rester,
	   seule, au fer à gauche. Les marges automatiques plutôt que `text-align`
	   sur la figure : le reset pose `display: block` sur toute image, qui
	   ignore donc l'alignement du texte. */
	margin-inline: auto;
}

/*
 * La description : du texte de quatrième de couverture.
 *
 * Elle arrivait dans la sans-serif de l'interface, au corps du texte courant.
 * Or ce n'est pas de l'interface : c'est la prose de l'éditeur, le même texte
 * qu'on lit au dos du livre imprimé. Elle passe donc dans le Garamond du
 * site, un peu plus grande et plus aérée — la mesure de lecture était déjà
 * là, il ne manquait que le caractère.
 */
.padmakara-download__content {
	max-width: var(--padmakara-reading-max);
	font-family: var(--font-serif);
	font-size: 1.12rem;
	line-height: 1.62;
	color: var(--color-ink);
}

.padmakara-download__content p {
	margin-block: 0 1.1em;
}

.padmakara-download__content strong {
	font-weight: 600;
}

/* Les fiches se terminent souvent par un paragraphe vide laissé par
   l'éditeur : il ouvrait un blanc que rien ne justifie. */
.padmakara-download__content p:empty {
	display: none;
}

/* Certaines fiches renvoient vers padmakara.com en collant l'adresse complète
   comme libellé du lien. À défaut de pouvoir la raccourcir, on l'autorise à
   se couper n'importe où : sans cela elle force la colonne à s'élargir. */
.padmakara-download__content a {
	overflow-wrap: anywhere;
}

/* Si une fiche montre une AUTRE image que sa couverture, elle reçoit le même
   traitement que celle-ci : une feuille posée sur le crème, sur l'axe de la
   page, et non une vignette collée au fer à gauche. */
.padmakara-download__content figure {
	margin-block: 1.75rem;
}

.padmakara-download__content figure img {
	margin-inline: auto;
	box-shadow: var(--padmakara-shadow-sheet);
}

/* Le formulaire de téléchargement est rendu DEUX fois : une fois par
   `free-downloads-edd` dans le contenu, une fois par le thème parent dans
   la colonne latérale. On garde celui de la colonne, qui porte aussi le
   prix et les métadonnées, et qui reste visible au défilement. */
.single-download .padmakara-download__content .somdn-download-wrap-outer,
.single-download .padmakara-download__content .edd_download_purchase_form {
	display: none;
}

/* Le panneau d'acquisition : une fiche de bibliothèque, pas une carte. */
.single-download .download-info-wrapper {
	background: var(--color-paper-soft);
	border-top: 2px solid var(--color-cinnabar);
	padding: 1.5rem 1.4rem;
}

.single-download .download-info-wrapper .purchase-price,
.single-download .download-info-wrapper .edd_price {
	font-family: var(--font-serif);
	font-size: 1.6rem;
	font-weight: 500;
	color: var(--color-ink);
	line-height: 1.2;
	margin-bottom: 1rem;
	display: block;
}

.single-download .download-info-wrapper a.edd-submit.button,
.single-download .download-info-wrapper input.edd-submit.button,
.single-download .download-info-wrapper .edd-add-to-cart {
	width: 100%;
	padding-block: 0.85rem;
	font-size: 1rem;
}

/* EDD sépare le formulaire d'achat de ce qui le suit par
   `.single-download .edd_download_purchase_form { margin-bottom: 1.387em }`.
   Dans sa mise en page à lui, le formulaire est au fil du texte et cette
   marge a un sens. Dans notre panneau il est le dernier élément : la marge
   ne séparait plus rien et laissait 21 px de blanc au fond, d'où un panneau
   plus lourd en bas qu'en haut — 45 px sous le bouton contre 24 au-dessus
   du prix. C'est cette place que la bande de confirmation occupe désormais. */
.single-download .download-info-wrapper .edd_download_purchase_form {
	margin-bottom: 0;
}

/*
 * « Ajouté au panier ».
 *
 * EDD pose ce message en `position: absolute` sans coordonnées : il se range
 * donc là où le flux l'aurait mis — collé sous le bouton, au fer à gauche,
 * avec une coche de 28 px hors de proportion avec son texte, et dans un vert
 * olive (#567622) étranger à la palette.
 *
 * On lui réserve une bande sous le bouton, et on l'y centre. La bande existe
 * en permanence : le message apparaît puis s'efface au bout de trois
 * secondes, et rien ne doit sauter à ces deux moments. Elle occupe la place
 * que la ligne vide prenait jusqu'ici — le panneau ne grandit donc pas.
 */
.single-download .download-info-wrapper .edd_purchase_submit_wrapper {
	position: relative;
	padding-bottom: 1.6rem;
}

.single-download .download-info-wrapper .edd-cart-added-alert {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	font-family: var(--font-sans);
	font-size: 0.85rem;
	line-height: 1.2;
	color: var(--color-success);
}

/* La coche se mesure sur son texte, pas sur les 28 px du gabarit d'EDD. */
.single-download .download-info-wrapper .edd-cart-added-alert .edd-icon {
	width: 0.95em;
	height: 0.95em;
	flex: none;
}

/* Les métadonnées du parent arrivent en <b> séparés par des <br> :
   on leur redonne une respiration lisible. */
.single-download .download-info-wrapper .edd-meta,
.single-download .padmakara-sidebar .edd-meta {
	margin-top: 1.25rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--color-rule);
	font-family: var(--font-sans);
	font-size: 0.9rem;
	line-height: 1.7;
	color: var(--color-stone);
}

.single-download .padmakara-sidebar .edd-meta b {
	color: var(--color-ink);
	font-weight: 600;
}

.single-download .padmakara-sidebar a {
	color: var(--color-cinnabar);
}

/* Le décalage vertical vient de `.site-main` (padding-top de 64 px). Dans la
   grille à deux colonnes, il ne s'applique qu'à la colonne de gauche et fait
   démarrer le panneau 64 px plus haut que le titre. On remonte donc
   l'espacement sur le conteneur, commun aux deux colonnes. */
@media (min-width: 950px) {
	.single-download #content > .container {
		padding-block: 4rem 1rem;
	}

	.single-download #primary > .site-main {
		padding-top: 0;
	}
}

/* Métadonnées : le thème parent titre « Catégories » en h2 avec une icône
   de dossier, ce qui donne plus de poids au libellé qu'à la donnée. */
.single-download .download-post-meta {
	margin-top: 1.5rem;
	font-family: var(--font-sans);
	font-size: 0.92rem;
}

.single-download .download-post-meta .meta-cat h2,
.single-download .download-post-meta h2 {
	font-family: var(--font-sans);
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--color-stone);
	margin: 0 0 0.35rem;
	display: flex;
	align-items: center;
	gap: 0.45rem;
}

.single-download .download-post-meta svg {
	width: 0.95em;
	height: 0.95em;
	flex: none;
	color: var(--color-stone);
}

.single-download .download-post-meta a {
	color: var(--color-cinnabar);
	text-decoration: none;
	border-bottom: 1px solid rgba(184, 60, 46, 0.35);
}

.single-download .download-post-meta a:hover {
	border-bottom-color: var(--color-cinnabar);
}

/* ========================================================================
   23. Le panier de l'en-tête — un menu déroulant, pas un bloc en ligne
   ======================================================================== */

/* `.product-holder` (le contenu du panier) était rendu en position statique :
   il s'affichait en permanence dans l'en-tête, et sur la page Panier, où EDD
   en détaille le contenu, il le faisait passer de 73 px à 154 px de haut.
   L'en-tête changeait donc de hauteur selon la page. On en fait un menu
   déroulant, ouvert au survol et au clavier. */
.padmakara-header__tools .cart {
	position: relative;
	/* L'écart entre le bouton et le menu est posé une fois ici : `top` le
	   creuse, le pont le comble. Les deux ne peuvent plus diverger. */
	--padmakara-cart-gap: 0.75rem;
}

.padmakara-header__tools .product-holder {
	position: absolute;
	top: calc(100% + var(--padmakara-cart-gap));
	right: 0;
	z-index: 60;
	min-width: 17rem;
	max-width: 22rem;
	padding: 1rem 1.1rem;
	background: var(--color-paper);
	border: 1px solid var(--color-rule);
	border-top: 2px solid var(--color-cinnabar);
	box-shadow: var(--padmakara-shadow-sheet);
	text-align: left;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease, visibility 0.15s ease;
	/* Le panier s'ouvre au survol de `.cart`, qui passe alors en cinabre. Sans
	   couleur propre, le menu héritait de ce rouge : titre, montants, « Total »
	   et « supprimer » sortaient tous de la même encre, et plus rien ne
	   ressortait — surtout pas l'action. */
	color: var(--color-ink);
	font-family: var(--font-sans);
}

/* Le menu est un descendant de `.cart` : tant que le curseur est dessus,
   `:hover` tient. Mais la bande vide qui les sépare n'appartenait à
   personne — en la traversant pour atteindre le menu, le curseur sortait de
   `.cart`, le menu se fermait, puis se rouvrait à l'arrivée. Un aller-retour
   de 12 px suffisait à le faire clignoter.

   On prolonge donc la surface sensible du menu jusqu'au bouton par un pont
   transparent, exactement de la hauteur de l'écart. Le vide reste visible ;
   il n'est plus un trou. Le pont suit la visibilité du menu — `visibility`
   s'hérite, donc panier fermé il n'intercepte rien. */
.padmakara-header__tools .product-holder::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 100%;
	height: var(--padmakara-cart-gap);
}

.padmakara-header__tools .cart:hover .product-holder,
.padmakara-header__tools .cart:focus-within .product-holder {
	opacity: 1;
	visibility: visible;
}

/* Le compte d'articles ne s'affiche plus : il est sorti de l'écran par le
   gabarit (edd_templates/widget-cart.php), où sa raison d'être est écrite.
   Il ne reste donc rien à habiller ici — mais le premier article, lui, ne
   doit plus porter le retrait qui séparait autrefois les deux. */
.padmakara-header__tools .product-holder .edd-cart > li:first-child {
	padding-top: 0;
}

.padmakara-header__tools .product-holder .edd-cart {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.92rem;
	line-height: 1.5;
}

.padmakara-header__tools .product-holder .edd-cart li {
	padding-block: 0.4rem;
	border-bottom: 0;
}

.padmakara-header__tools .product-holder .edd-cart li.cart_item.empty {
	color: var(--color-stone);
}

/* L'article : le titre sur sa ligne, puis prix et retrait aux deux bouts.
   Le gabarit surchargé (edd_templates/widget-cart-item.php) fournit la ligne
   d'appui qui rend cette opposition possible. */
.padmakara-header__tools .product-holder .edd-cart-item {
	padding-block: 0 0.75rem;
}

.padmakara-header__tools .product-holder .edd-cart-item-title {
	display: block;
	font-family: var(--font-serif);
	font-size: 1.02rem;
	line-height: 1.25;
	color: var(--color-ink);
}

.padmakara-header__tools .product-holder .edd-cart-item-line {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 0.25rem;
}

.padmakara-header__tools .product-holder .edd-cart-item-price {
	font-size: 0.88rem;
	color: var(--color-stone);
}

/* « Supprimer » doit se lire comme une action et non comme du texte : un
   libellé souligné, discret tant qu'on ne le vise pas, cinabre au survol. */
.padmakara-header__tools .product-holder a.edd-remove-from-cart {
	flex: none;
	font-size: 0.85rem;
	color: var(--color-stone);
	text-decoration: none;
	border-bottom: 1px solid var(--color-rule);
}

.padmakara-header__tools .product-holder a.edd-remove-from-cart:hover,
.padmakara-header__tools .product-holder a.edd-remove-from-cart:focus-visible {
	color: var(--color-cinnabar);
	border-bottom-color: var(--color-cinnabar);
	text-decoration: none;
}

/* Les totaux. EDD les sert en italique gras sur un aplat gris (#f9f9f9) qui
   ne connaît pas le crème du site ; on reprend la règle à zéro : libellé à
   gauche, montant à droite, et le total seul appuyé. */
.padmakara-header__tools .product-holder .edd-cart .edd-cart-meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.3rem 0;
	background: transparent;
	font-size: 0.88rem;
	font-style: normal;
	font-weight: 400;
	color: var(--color-stone);
}

.padmakara-header__tools .product-holder .edd-cart .edd-cart-meta span {
	color: var(--color-ink);
}

.padmakara-header__tools .product-holder .edd-cart .edd_subtotal {
	border-top: 1px solid var(--color-rule);
	padding-top: 0.6rem;
	margin-top: 0.25rem;
}

.padmakara-header__tools .product-holder .edd-cart .edd_total,
.padmakara-header__tools .product-holder .edd-cart .edd_total span {
	color: var(--color-ink);
	font-weight: 600;
}

/* La seule action de premier plan du menu. */
.padmakara-header__tools .product-holder .edd_checkout {
	padding: 0;
	margin-top: 0.9rem;
}

.padmakara-header__tools .product-holder .edd_checkout a {
	display: block;
	padding: 0.6rem 1rem;
	background: var(--color-cinnabar);
	border-radius: var(--padmakara-radius);
	color: #fff;
	font-size: 0.92rem;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}

.padmakara-header__tools .product-holder .edd_checkout a:hover,
.padmakara-header__tools .product-holder .edd_checkout a:focus-visible {
	background: var(--color-cinnabar-dark);
	color: #fff;
	text-decoration: none;
}

.padmakara-header__tools .product-holder a {
	color: var(--color-cinnabar);
	text-decoration: none;
}

.padmakara-header__tools .product-holder a:hover {
	text-decoration: underline;
}

/* Le panier reste atteignable au clavier : l'élément porte tabindex="0". */
.padmakara-header__tools .cart:focus-visible {
	outline: 2px solid var(--color-cinnabar);
	outline-offset: 3px;
}

/* En dessous de 700 px, le menu ne tient plus sous son icône : aligné par la
   droite sur `.cart`, ses 17 rem de largeur minimale débordaient par la
   gauche hors de l'écran. On l'accroche alors à l'en-tête entier plutôt qu'à
   l'icône, et il occupe la largeur du conteneur, bord à bord avec le reste
   de la page. */
@media (max-width: 700px) {
	.padmakara-header__inner {
		position: relative;
	}

	.padmakara-header__tools .cart {
		position: static;
	}

	.padmakara-header__tools .product-holder {
		left: 0;
		right: 0;
		min-width: 0;
		max-width: none;
	}
}

/* ========================================================================
   24. Tunnel de commande — corrections de mise en forme
   ======================================================================== */

/* Un <legend> se place par defaut A CHEVAL sur la bordure de son fieldset.
   Avec un fieldset a fond blanc pose sur le creme, le titre se retrouvait
   coupe en deux par le bord.

   `display: block` le sort de l'encoche et en fait un bloc ordinaire en tete
   de fieldset. C'est desormais bien supporte, et c'est plus sur qu'un
   flottant de pleine largeur : avec le flottant, la marge basse de la
   legende etait avalee par le calcul de `clear` et le premier libelle venait
   se coller au filet. */
/* `display: block` ne suffisait pas, et c'est la cause du titre coupé en
   deux par le bord de la feuille. En Chrome comme en Firefox, la légende
   d'un `fieldset` est une boîte à part : elle se dessine dans l'encoche de
   la bordure haute quel que soit son `display`, et le remplissage du
   fieldset ne commence qu'en dessous. Mesuré sur la page : `display: block`
   laisse la légende à 0 px du bord de la feuille — donc à cheval dessus,
   sur le crème. Seul `float` l'en sort et la ramène à 33 px, c'est-à-dire
   dans le blanc, à l'aplomb des champs.

   Le flottant était la première piste, abandonnée parce que le libellé
   suivant venait se coller au filet : un flottant de pleine largeur ne
   pousse que les lignes de texte, pas les blocs. Il manquait le `clear` sur
   le frère — avec lui, la boîte suivante se place sous la marge basse du
   flottant, et la respiration revient.

   Deux identifiants sur la variante du tunnel, pour la même raison que les
   groupes de champs : EDD annule la marge des légendes par
   `.wp-block-edd-checkout #edd_purchase_form .edd-blocks-form legend
   { margin: 0 }`. Sans elle, le premier libellé se recollait au filet — le
   défaut même qu'on cherchait à corriger. Dans une liste de sélecteurs
   chacun compte sa propre spécificité : le premier suffit partout ailleurs,
   le second reprend la main ici. */
#edd_checkout_form_wrap legend,
#edd_checkout_form_wrap #edd_purchase_form legend,
.edd_form fieldset > legend {
	float: left;
	width: 100%;
	margin: 0 0 1.4rem;
	padding: 0 0 0.6rem;
	border-bottom: 1px solid var(--color-rule);
	font-family: var(--font-serif);
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--color-ink);
}

#edd_checkout_form_wrap legend + *,
.edd_form fieldset > legend + * {
	clear: both;
}

/* EDD met region et code postal cote a cote par une grille a deux colonnes.
   Un champ seul en vis-a-vis d'un autre se lit mal : on empile. */
/* `flow-root` plutôt que `block`, et ce n'est pas un détail : la légende
   flotte désormais, et un `fieldset` ordinaire ne contient pas son
   flottant. Les deux légendes vivaient donc dans le même contexte de
   formatage, et le `clear` du premier champ de la facturation dégageait
   aussi le flottant de la feuille précédente — d'où 42 px sous un titre et
   22 px sous l'autre, pour des règles identiques. Chaque feuille tient
   maintenant son propre contexte : même titre, même écart, partout. */
#edd_checkout_form_wrap #edd_cc_address,
#edd_checkout_form_wrap #edd_purchase_form .edd-blocks-form,
#edd_checkout_form_wrap #edd_purchase_form .cc-address--state-zip,
#edd_checkout_form_wrap fieldset {
	display: flow-root;
}

/* Le pas entre deux champs doit être plus grand que celui qui sépare un
   libellé de sa case, sinon le libellé se lit comme la légende du champ du
   dessus. Dans « Détails de la facturation », où EDD ne donne aucune note
   explicative, les deux pas étaient presque égaux et la colonne se lisait
   décalée d'un cran. */
/* Deux identifiants, parce qu'EDD en dépense déjà un : sa feuille des blocs
   annule la marge des groupes par
   `.wp-block-edd-checkout #edd_purchase_form .edd-blocks-form
   .edd-blocks-form__group { margin: 0 }`. Un identifiant et une classe n'y
   suffisaient pas — d'où des libellés collés au champ du dessus partout où
   EDD ne fournit pas de note explicative pour écarter les lignes à sa
   place. */
#edd_checkout_form_wrap #edd_purchase_form .edd-blocks-form__group {
	margin-bottom: 1.35rem;
}

#edd_checkout_form_wrap #edd_purchase_form .edd-blocks-form__group:last-child,
#edd_checkout_form_wrap #edd_purchase_form div.edd-blocks-form__group:last-of-type {
	margin-bottom: 0;
}

#edd_checkout_form_wrap .edd-description {
	margin-top: 0.45rem;
	font-size: 0.82rem;
	line-height: 1.45;
	color: var(--color-stone);
}

/* ========================================================================
   25. Connexion et création de compte
   ======================================================================== */

/* Deux panneaux bornés à la mesure de lecture, côte à côte quand la place
   le permet, empilés sinon. Ils sont frères dans l'article, avec l'en-tête
   de page : il suffit de mettre l'article en grille, et de faire enjamber
   les deux colonnes au titre.

   Le seuil est calculé, pas choisi : deux panneaux de 30 rem séparés de
   2,5 rem occupent 62,5 rem, soit 1 000 px. Le conteneur retranche 64 px de
   marges internes à la fenêtre ; il faut donc 1 064 px de fenêtre pour les
   loger. 68 rem laisse la marge nécessaire. En deçà, les panneaux
   s'empilent, centrés comme le reste de la page. */
#edd_login_form,
#edd_register_form {
	max-width: 30rem;
	margin-inline: auto;
	background: var(--color-paper-soft);
	border-top: 2px solid var(--color-cinnabar);
	padding: 1.5rem 1.6rem 1.75rem;
	margin-block: 0 2rem;
}

#edd_login_form fieldset,
#edd_register_form fieldset {
	border: 0;
	margin: 0;
	padding: 0;
	background: transparent;
}

#edd_login_form p,
#edd_register_form p {
	margin-block: 0 1rem;
}

#edd_login_form label,
#edd_register_form label {
	display: block;
	font-family: var(--font-sans);
	font-size: 0.9rem;
	color: var(--color-ink);
	margin-bottom: 0.3rem;
}

#edd_login_form input[type="text"],
#edd_login_form input[type="email"],
#edd_login_form input[type="password"],
#edd_register_form input[type="text"],
#edd_register_form input[type="email"],
#edd_register_form input[type="password"] {
	width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--color-rule);
	background: #fff;
	font: inherit;
	border-radius: var(--padmakara-radius);
}

#edd_login_form input:focus,
#edd_register_form input:focus {
	border-color: var(--color-cinnabar);
	outline: 0;
	box-shadow: 0 0 0 3px rgba(184, 60, 46, 0.15);
}

/* « Se souvenir de moi » : la case et son libellé sur une même ligne. */
#edd_login_form .edd-login-remember label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--color-stone);
}

#edd_login_form .edd-login-remember input[type="checkbox"] {
	width: auto;
	margin: 0;
	accent-color: var(--color-cinnabar);
}

#edd_login_form .edd-login-submit,
#edd_register_form p:last-of-type {
	margin-top: 1.25rem;
}

#edd_login_form .edd-lost-password {
	margin-top: 1rem;
	font-size: 0.9rem;
}

#edd_login_form .edd-lost-password a {
	color: var(--color-cinnabar);
}

@media (min-width: 68rem) {
	.site-main > article:has(> #edd_login_form):has(> #edd_register_form) {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2.5rem;
		align-items: start;
		/* L'article se borne à la largeur des deux panneaux — deux fois 30 rem
		   plus la gouttière — et reste centré par les marges automatiques de la
		   section 5. Chaque colonne vaut alors exactement la mesure de lecture,
		   sans qu'aucune largeur ne soit écrite deux fois. */
		max-width: 62.5rem;
	}

	/* Le titre et son double filet couvrent les deux colonnes. */
	.site-main > article:has(> #edd_login_form):has(> #edd_register_form) > .entry-header,
	.site-main > article:has(> #edd_login_form):has(> #edd_register_form) > .page-header {
		grid-column: 1 / -1;
	}

	/* Chaque panneau remplit sa colonne, qui porte désormais la mesure. Les
	   marges automatiques doivent disparaître : une boîte à marges
	   automatiques n'est plus étirée par sa case, elle est dimensionnée sur
	   son contenu — les panneaux se réduisaient à la largeur de leur légende.
	   Et la marge basse qui les séparait empilés n'a plus d'objet. */
	.site-main > article:has(> #edd_login_form):has(> #edd_register_form) > #edd_login_form,
	.site-main > article:has(> #edd_login_form):has(> #edd_register_form) > #edd_register_form {
		max-width: none;
		margin-inline: 0;
		margin-bottom: 0;
	}
}

/* Le bouton « code de remise » n'est pas l'action principale : filet cinabre
   sur fond de papier, pour qu'il ne rivalise pas avec « Acheter ». */
#edd_checkout_form_wrap .edd-cart-adjustment .edd-apply-discount,
#edd_checkout_form_wrap .edd-has-js .edd-discount-code-toggle,
#edd_checkout_form_wrap .edd-discount-code-toggle,
#edd_checkout_cart .edd-discount-code-toggle {
	background: transparent;
	border: 1px solid var(--color-cinnabar);
	color: var(--color-cinnabar);
	font-family: var(--font-sans);
	font-size: 0.9rem;
	padding: 0.5rem 1rem;
	border-radius: var(--padmakara-radius);
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
}

#edd_checkout_form_wrap .edd-discount-code-toggle:hover,
#edd_checkout_cart .edd-discount-code-toggle:hover {
	background: var(--color-cinnabar);
	color: #fff;
}


/* ========================================================================
   26. Fondu au changement de page
   ======================================================================== */

/* Transition de vue entre documents : le navigateur fait lui-meme le fondu
   enchaine entre l'ancienne et la nouvelle page. Les navigateurs qui ne la
   connaissent pas ignorent la regle et naviguent normalement — aucune
   degradation, aucun script. */
@view-transition {
	navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 260ms;
	animation-timing-function: ease;
}

/* Le mouvement reste une preference, pas une fatalite. */
@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}
}

/* Les trois premières portes sont des photographies en 4/3 ; celle des livres
   audio est une couverture, en portrait. La recadrer au format des photos la
   détruirait : elle est donc posée entière sur un fond de papier, dans une
   boîte de même hauteur que ses voisines. */
.padmakara-home__column--cover img {
	object-fit: cover;
	object-position: center 30%;
	background: #fff;
}

/* Les catégories sortent du thème parent comme une suite de liens accolés :
   « Audio Kyérim Retraites Lembrun » se lit comme un seul bloc. */
.single-download .download-post-meta .meta-cat a + a::before {
	content: ", ";
	color: var(--color-stone);
}

/* Sur téléphone, la règle générale ramène toutes les grilles à une colonne.
   Pour la planche, cela donnait une couverture de 358 px de large, soit une
   seule par écran : deux par ligne conviennent mieux à des vignettes.

   La largeur fixe de 16,5 rem ne tient pas à deux sur un téléphone : on la
   remplace par une demi-ligne. Les couvertures restent égales entre elles,
   et une planche d'un seul titre reste centrée. */
@media (max-width: 700px) {
	.padmakara-plate.edd_downloads_list,
	.padmakara-plate .edd_downloads_list {
		gap: 1.25rem;
	}

	.padmakara-plate.edd_downloads_list > .edd_download,
	.padmakara-plate .edd_downloads_list > .edd_download {
		flex-basis: calc((100% - 1.25rem) / 2);
	}
}

/* ========================================================================
   27. En-tête — un seul axe pour le texte et le logo
   ======================================================================== */

/* Le bloc de droite vient du thème parent avec sa propre géométrie : hauteur
   de ligne 1 et 6,4 px de remplissage vertical. Résultat, son texte tombait
   2 px plus haut que celui du menu alors que les deux boîtes étaient bien
   centrées. On lui donne la géométrie du menu — même police, même hauteur de
   ligne, remplissage vertical nul — pour que leurs encres coïncident.

   Le centrage, lui, ne peut plus reposer sur `inline-block`. Tant que la
   boîte faisait exactement la hauteur de sa ligne, l'encre y était centrée
   par construction et il n'y avait rien à régler. Depuis que le bouton
   porte une hauteur minimale de 2,5 rem — posée avec celle du panier, pour
   que la main ait où se poser — la boîte est plus haute que la ligne, et un
   `inline-block` cale sa ligne en haut : « Mon Compte » remontait de 3 px
   et se décrochait du menu et de la pastille du panier.

   Un conteneur flexible centre sa ligne quelle que soit la hauteur de la
   boîte. C'est ce qui rend le réglage sûr : la hauteur du bouton peut
   changer, l'encre reste sur l'axe. Mesuré ici — encre du menu 37,28,
   pastille du panier 37,99, bouton 37,66 : les trois tiennent dans le
   demi-pixel.

   Allonger la hauteur de ligne à 2,5 rem recentrait aussi l'encre, mais
   faisait passer la boîte à 42 px : la hauteur de ligne s'ajoute au filet
   d'un pixel de chaque côté, et le bouton dépassait alors le panier qu'on
   cherchait justement à égaler. */
.padmakara-header__tools .btn-login,
.padmakara-header__tools .btn-primary {
	line-height: 2.2;
	padding-block: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Le nom se pose sur la ligne de base du menu, et le logo suit.

   Deux remarques pour comprendre le decalage corrige ici.

   La premiere : le logo remontait de 8 px, pas de 4. La regle precedente
   visait `.custom-logo-link` ET `.custom-logo` — or WordPress imbrique la
   seconde dans la premiere. Le `top: -4px` s'appliquait donc deux fois, au
   lien puis a l'image dans le lien. Mesure : centre du logo a 30 px pour une
   ligne centree a 38 px.

   La seconde : le nom et le menu sont bien centres sur le meme axe, boite
   pour boite, mais leurs lignes de base ne tombent pas au meme endroit. Une
   ligne de base ne se situe pas au milieu de sa boite : elle se place a la
   hauteur d'ascendante sous le sommet, et cette proportion depend de la
   police et du corps. Garamond en 20 px la pose 7 px sous le milieu de sa
   boite, la sans-serif du menu en 15,2 px seulement 4,28 px — d'ou 2,72 px
   d'ecart, assez pour se voir sur un mot aussi long.

   On decale donc la marque entiere de cet ecart mesure. `position: relative`
   ne change rien a la mise en page : le menu, le bloc de droite et la hauteur
   de la barre restent ou ils sont.

   Le logo se centre alors tout seul sur le titre, sans reglage : la boite de
   la marque est haute de 44 px, celle du logo aussi, et le nom y est centre.
   Le centre du logo tombe a 0,5 px du milieu de la hampe du titre — sous le
   pixel, donc invisible. */
.padmakara-header__brand {
	position: relative;
	top: -2.72px;
}

/* ========================================================================
   28. Composition centrée
   ======================================================================== */

/* Les couvertures posées sur le crème appellent une composition centrée :
   leurs largeurs varient, un bord gauche commun n'a donc plus rien à aligner.
   Le texte courant, lui, reste au fer à gauche — centrer un paragraphe rend
   chaque début de ligne à chercher. */
.entry-header,
.page-header,
.padmakara-download__header,
.padmakara-home__intro {
	text-align: center;
}

.padmakara-home__intro {
	max-width: none;
}

.padmakara-plate .edd_download,
.padmakara-plate .edd_download_inner {
	text-align: center;
	align-items: center;
}

/* `align-items: center` empeche les enfants de s'etirer : la boite d'image se
   reduisait alors a la largeur intrinseque de sa photo, si bien que les photos
   n'avaient ni la meme largeur ni la meme hauteur et que leurs bords bas ne
   s'alignaient plus. Le centrage vaut pour le texte, pas pour la boite
   d'image, qui doit occuper toute sa colonne. */
.padmakara-plate .edd_download_image {
	align-self: stretch;
	width: 100%;
}

.padmakara-plate .edd_download_title {
	text-align: center;
}

.padmakara-plate .edd_download .edd_price {
	text-align: center;
}

.padmakara-home__column {
	align-items: center;
	text-align: center;
}

.padmakara-home__column p {
	max-width: 34ch;
}

.padmakara-home__contact {
	text-align: center;
}

/* L'index réglé garde titre à gauche et prix à droite : c'est un tableau des
   matières, il se parcourt en colonne. */
.padmakara-list .edd_download,
.padmakara-list .edd_download_title {
	text-align: left;
}


/* ========================================================================
   29. Fiche gratuite — une colonne, une action
   ======================================================================== */

/* Une fiche gratuite n'a pas de prix, donc plus de panneau : il ne portait
   que cela. Le téléchargement descend sur l'axe de la page, sous la
   couverture, et la fiche se lit d'un seul tenant — même composition à 390 px
   et à 1440 px, plus rien à recentrer d'un gabarit à l'autre.

   C'est ce qui règle le décentrage visible jusqu'ici aux deux tailles : le
   bouton venait du formulaire de `free-downloads-edd`, qui pose ses styles en
   ligne (`margin: 0 15px`) — une marge qu'aucune règle de feuille ne pouvait
   annuler, et qui laissait 37 px de blanc à gauche du bouton contre 7 à
   droite. Le thème rend désormais son propre bouton ; celui du plugin reste
   masqué dans le contenu (section 22). */

/* Sans colonne latérale, la colonne de lecture n'a plus de voisine sur quoi
   s'appuyer : elle se centre. */
.padmakara-download--free .padmakara-download__content {
	margin-inline: auto;
}

/* La couverture est le premier geste possible : on peut prendre l'ouvrage en
   la touchant. Le bouton reste dessous — une image cliquable ne s'annonce pas
   d'elle-même, et rien ne la signalerait au clavier. */
.padmakara-download__cover-link {
	display: inline-block;
	/* Sans quoi la boîte du lien dépasse l'image du blanc de sa ligne, et
	   l'ombre portée paraît décollée du bas de la feuille. */
	line-height: 0;
	border-radius: var(--padmakara-radius);
	transition: transform 0.18s ease;
}

.padmakara-download__cover-link img {
	transition: box-shadow 0.18s ease;
}

.padmakara-download__cover-link:hover,
.padmakara-download__cover-link:focus-visible {
	transform: translateY(-2px);
}

.padmakara-download__cover-link:hover img,
.padmakara-download__cover-link:focus-visible img {
	box-shadow: var(--padmakara-shadow-sheet-hover);
}

/* Le lien enveloppe l'image : c'est lui, désormais, la boîte à centrer, et les
   marges automatiques posées sur l'image (section 22) n'ont plus de largeur à
   partager. */
.padmakara-download__cover {
	text-align: center;
}

.padmakara-download--free .padmakara-download__cover {
	margin-bottom: 1.5rem;
}

.padmakara-download__action {
	margin: 0 0 2.5rem;
	text-align: center;
}

/* Le bouton se mesure sur son texte, pas sur la colonne : un cinabre étiré
   d'un bord à l'autre de l'écran pèse plus lourd que l'ouvrage qu'il sert. */
.padmakara-download__button {
	display: inline-block;
	min-width: 14rem;
	padding: 0.85rem 2rem;
	background: var(--color-cinnabar);
	border-radius: var(--padmakara-radius);
	color: #fff;
	font-family: var(--font-sans);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.padmakara-download__button:hover,
.padmakara-download__button:focus-visible {
	background: var(--color-cinnabar-dark);
	color: #fff;
}

/* Sur téléphone, la couverture se mesure sur la fenêtre et non sur la
   colonne.

   À 22 rem de large elle occupait 358 px de haut à elle seule, et l'action
   tombait vers 770 px du haut de la page : visible sur un grand téléphone,
   hors écran sur un petit. Bornée par la hauteur, elle laisse le titre, la
   couverture et le bouton tenir dans le premier écran quelle que soit la
   proportion du fichier — et une couverture en portrait ne fait plus
   disparaître ce qu'on est venu chercher. */
@media (max-width: 700px) {
	.padmakara-download--free .padmakara-download__cover img {
		max-block-size: 46vh;
		width: auto;
	}
}


/* ========================================================================
   30. Mes commandes — un registre nommé
   ======================================================================== */

/* EDD rend l'historique en cartes bordées, deux par rangée, et nomme chaque
   commande par son numéro. Trois défauts se tiennent l'un l'autre :

   — la répétition : vingt cartes identiques, vingt fois « Terminé », vingt fois
     « Afficher les détails de la commande » ;
   — le vide : « Commande : 2031 » fait quinze caractères dans une colonne qui
     en tient soixante, et l'œil traverse trois cents pixels de rien ;
   — le nom : un numéro de commande n'est le nom de rien pour celui qui lit. Il
     vient chercher « Retraite Mandala Gourou Yoga — juin 2026 », et comme la
     même retraite revient d'une année sur l'autre, c'est le couple titre +
     saison qui distingue.

   Une seule cause : la ligne ne disait pas ce qu'elle contient. Le thème l'y
   met (`padmakara_v2_order_history_titles()`), et la composition devient celle
   que le thème a déjà retenue pour les enregistrements sans couverture
   (section 14) : un index réglé, fermé par le double filet cinabre.

   L'emphase suit l'information. Le montant vaut 0,00 € sur dix-neuf lignes sur
   vingt : il reste à l'encre. Le cinabre est rendu aux liens et aux filets —
   ce qu'on peut faire, et ce qui sépare. */

/* Une colonne. `display: flex` neutralise d'un mot le `grid-template-columns:
   repeat(2, 50%)` que la feuille du bloc pose au-dessus de 600 px ; la double
   classe suffit à passer devant elle sans `!important`. */
.edd-blocks__orders-grid.edd-blocks__columns {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-block: 2rem;
}

.edd-blocks__orders .edd-blocks-orders__order {
	display: grid;
	/* Les colonnes sont mesurées, pas déduites du contenu.

	   Chaque commande est sa PROPRE grille : le balisage n'offre aucun ancêtre
	   commun aux vingt lignes, et une colonne `auto` se règle donc sur le
	   contenu de sa seule ligne. Laissées libres, elles se décalaient d'une
	   ligne à l'autre — vingt pixels entre « 7 août 2024 » et
	   « 30 septembre 2024 », neuf entre « 0.00€ » et « 12.00€ » — et des
	   colonnes qui ne s'alignent pas ne font pas un tableau.

	   Les minima logent les valeurs courantes ; une valeur exceptionnellement
	   longue élargit sa colonne au lieu de déborder, et ne décale que sa propre
	   ligne. Seul le lien reste libre : son texte est le même partout. */
	grid-template-columns: minmax(0, 1fr) 8rem minmax(4.5rem, auto) auto;
	align-items: baseline;
	gap: 0.2rem 1.5rem;
	/* Pas de remplissage latéral : les lignes s'alignent sur le titre de page
	   et sur son double filet. */
	padding: 1rem 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--color-rule);
	border-radius: 0;
}

/* Les trois enveloppes internes du bloc sont effacées : leurs enfants
   deviennent alors les cases d'une même grille, et les colonnes s'alignent
   d'une ligne à l'autre. C'est la seule chose qui fasse d'une liste un
   tableau, et aucune boîte imbriquée ne le permettait. Les bordures et
   remplissages qu'EDD pose sur ces enveloppes disparaissent avec leurs
   boîtes. */
.edd-blocks__orders .edd-blocks-orders__order-header,
.edd-blocks__orders .edd-blocks-orders__order-data,
.edd-blocks__orders .edd-blocks-orders__order-details {
	display: contents;
}

/* Pour une commande à terminer, EDD n'enveloppe pas son lien : il écrit un
   tiret nu, puis le lien. Une fois la cellule effacée, ce tiret devient une
   case anonyme de la grille — impossible à désigner par un sélecteur — et il
   se posait tout seul sous le lien, sur une troisième ligne.
   La taille nulle le fait disparaître sans rien masquer d'autre : tout ce que
   cette cellule contient d'utile — le lien, le titre et la référence ajoutés
   par le thème — fixe sa propre taille en `rem`, indépendante de celle-ci. */
.edd-blocks__orders .edd-blocks-orders__order-details {
	font-size: 0;
}

.edd-blocks__orders .edd-blocks-orders__order:first-child {
	border-top: 1px solid var(--color-rule);
}

.edd-blocks__orders .edd-blocks-orders__order:last-child {
	border-bottom: 3px double var(--color-cinnabar);
}

.edd-blocks__orders .edd-blocks-orders__order:hover,
.edd-blocks__orders .edd-blocks-orders__order:focus-within {
	background: rgba(184, 60, 46, 0.045);
}

/* L'ordre des cases à l'écran n'est pas celui du balisage : EDD écrit l'état
   juste après le numéro, et le titre ajouté par le thème arrive en dernier,
   dans la cellule des détails. La lecture les veut ailleurs — chacune est donc
   placée explicitement.

   Rien n'est réordonné pour un lecteur d'écran, qui suit le balisage : « 2031,
   Terminé, 21 août 2026, 0,00 €, Retraite Mandala Gourou Yoga — juin 2026,
   Ouvrir le justificatif » se lit très bien. Et le seul élément focalisable,
   le lien, reste dernier dans les deux ordres. */

/* Première ligne : ce qu'on cherche, quand, combien, et par où l'ouvrir. */
.edd-blocks__orders .padmakara-order__title {
	grid-area: 1 / 1;
	font-family: var(--font-serif);
	font-size: 1.15rem;
	line-height: 1.3;
	color: var(--color-ink);
}

.edd-blocks__orders .edd-blocks-orders__order-date {
	grid-area: 1 / 2;
	font-size: 0.95rem;
	color: var(--color-stone);
	white-space: nowrap;
}

.edd-blocks__orders .edd-blocks-orders__order-amount {
	grid-area: 1 / 3;
	justify-self: end;
	color: var(--color-ink);
	/* Les chiffres à chasse fixe alignent les virgules d'une ligne à l'autre ;
	   sans quoi une colonne de montants n'est pas une colonne. */
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Le lien, dans les deux formes qu'EDD lui donne : enveloppé pour une commande
   réglée, nu (précédé d'un tiret) pour une commande à terminer. */
.edd-blocks__orders .edd-blocks-orders__order-downloads-link,
.edd-blocks__orders .edd-blocks-orders__order-details > a {
	grid-area: 1 / 4;
	justify-self: end;
	font-size: 0.875rem;
}

.edd-blocks__orders .edd-blocks-orders__order-details a {
	color: var(--color-cinnabar);
	text-decoration: none;
	white-space: nowrap;
}

.edd-blocks__orders .edd-blocks-orders__order-details a:hover,
.edd-blocks__orders .edd-blocks-orders__order-details a:focus-visible {
	color: var(--color-cinnabar-dark);
	text-decoration: underline;
}

/* Seconde ligne : la référence à citer, et les articles suivants s'il y en a. */
.edd-blocks__orders .padmakara-order__meta {
	grid-area: 2 / 1 / auto / 4;
	margin: 0;
	font-size: 0.8rem;
	line-height: 1.45;
	color: var(--color-stone);
}

/* Le numéro d'EDD est repris dans cette seconde ligne : celui du bloc ferait
   doublon, y compris à l'oreille. */
.edd-blocks__orders .edd-blocks-orders__order-id {
	display: none;
}

/* L'état ne s'affiche que lorsqu'il y a quelque chose à dire.

   « Terminé » était l'état de dix-neuf lignes sur vingt, posé au bout de la
   seconde ligne : il l'étirait sur toute la largeur pour n'apporter rien, et la
   ligne le disait déjà — un justificatif à ouvrir est ce qu'une commande
   terminée a de plus. Un remboursement ou un échec, en revanche, sont la raison
   même de venir voir cette page. Ceux-là s'affichent, au cinabre, sous la date.

   « Terminé » reste annoncé aux lecteurs d'écran (mêmes déclarations que la
   section 4) : c'est la vue qui s'en passe, pas le document. */
.edd-blocks__orders .edd-blocks-orders__order-status {
	grid-area: 2 / 2;
	font-size: 0.8rem;
	color: var(--color-cinnabar);
	font-weight: 600;
	white-space: nowrap;
}

.edd-blocks__orders .edd-blocks-orders__order-status.complete {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal;
}

/* Un compte sans commande : une phrase, pas un tableau vide. */
.edd-blocks__orders > p {
	margin-block: 2rem;
	color: var(--color-stone);
}

/* Sous cette largeur, le titre ne tient plus à côté du reste. Le registre se
   déplie : le nom prend sa ligne, puis la date et le montant, puis la
   référence et l'état, puis le lien. */
@media (max-width: 760px) {
	.edd-blocks__orders .edd-blocks-orders__order {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 0.3rem 1rem;
		padding: 1.1rem 0;
	}

	.edd-blocks__orders .padmakara-order__title {
		grid-area: 1 / 1 / auto / -1;
	}

	.edd-blocks__orders .edd-blocks-orders__order-date {
		grid-area: 2 / 1;
	}

	.edd-blocks__orders .edd-blocks-orders__order-amount {
		grid-area: 2 / 2;
	}

	.edd-blocks__orders .padmakara-order__meta {
		grid-area: 3 / 1;
	}

	.edd-blocks__orders .edd-blocks-orders__order-status {
		grid-area: 3 / 2;
		justify-self: end;
	}

	.edd-blocks__orders .edd-blocks-orders__order-downloads-link,
	.edd-blocks__orders .edd-blocks-orders__order-details > a {
		grid-area: 4 / 1 / auto / -1;
		justify-self: start;
		margin-top: 0.2rem;
	}
}

/* La phrase qui précède le formulaire de connexion, quand on arrive sur « Mes
   commandes » sans être connecté. Elle est seule sous un titre centré, au-dessus
   d'un panneau centré : au fer à gauche, elle était la seule chose de travers. */
.padmakara-orders__lede {
	max-width: 46ch;
	margin: 0 auto 2rem;
	text-align: center;
	color: var(--color-stone);
}


/* ========================================================================
   31. Mes téléchargements — l'index d'une bibliothèque
   ======================================================================== */

/* Le compte le mieux fourni du site possède 25 enregistrements de 12 fichiers
   en moyenne, jusqu'à 25 pour l'un d'eux : près de trois cents liens. Les
   afficher tous, c'est un mur ; les paginer, c'est découper une bibliothèque
   qui tient sur un écran une fois repliée.

   Chaque acquisition est donc une entrée d'index qui s'ouvre sur ses fichiers.
   `<details>` le fait sans une ligne de JavaScript, répond au clavier et à la
   recherche du navigateur. Replié, on lit ce qu'on possède ; déplié, on prend
   ce qu'on vient chercher. La plus récente est ouverte d'avance — c'est celle
   qu'on redemande le plus, et un compte qui ne contient qu'un achat ne tombe
   pas sur un accordéon fermé. */

.padmakara-library {
	margin-block: 2rem;
}

.padmakara-library__work {
	border-top: 1px solid var(--color-rule);
}

.padmakara-library__work:last-of-type {
	border-bottom: 3px double var(--color-cinnabar);
}

/* La ligne d'index : le nom à gauche, le compte et la date au bout. Mêmes
   colonnes mesurées que le registre des commandes (section 30), et pour la
   même raison — chaque `<details>` est sa propre grille. */
.padmakara-library__summary {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto 8rem;
	align-items: baseline;
	gap: 0.3rem 1.5rem;
	padding: 1rem 0 1rem 1.6rem;
	cursor: pointer;
	/* Le triangle par défaut se place mal et diffère d'un navigateur à
	   l'autre ; on le remplace par le nôtre, ci-dessous. */
	list-style: none;
	position: relative;
}

.padmakara-library__summary::-webkit-details-marker {
	display: none;
}

/* Le chevron est tracé en bordures : deux traits, pas une police d'icônes ni
   un fichier à charger. Il pivote à l'ouverture. */
.padmakara-library__summary::before {
	content: "";
	position: absolute;
	left: 0.2rem;
	top: 1.45rem;
	width: 0.42rem;
	height: 0.42rem;
	border-right: 1.5px solid var(--color-cinnabar);
	border-bottom: 1.5px solid var(--color-cinnabar);
	transform: rotate(-45deg);
	transition: transform 0.15s ease;
}

.padmakara-library__work[open] > .padmakara-library__summary::before {
	transform: rotate(45deg);
}

.padmakara-library__summary:hover,
.padmakara-library__work[open] > .padmakara-library__summary {
	background: rgba(184, 60, 46, 0.045);
}

.padmakara-library__summary:focus-visible {
	outline: 2px solid var(--color-cinnabar);
	outline-offset: -2px;
}

.padmakara-library__title {
	font-family: var(--font-serif);
	font-size: 1.15rem;
	line-height: 1.3;
	color: var(--color-ink);
}

.padmakara-library__count,
.padmakara-library__date {
	font-size: 0.8rem;
	color: var(--color-stone);
	white-space: nowrap;
}

.padmakara-library__date {
	text-align: right;
}

/* Les fichiers portent des noms courts et réguliers — « 03 JKR – APREM 1 – 20
   septembre ». En une colonne ils laissaient les deux tiers de la mesure vides
   sur vingt-cinq lignes. Les colonnes se déduisent de la place disponible : pas
   de point de rupture à tenir à jour. */
.padmakara-library__files {
	list-style: none;
	margin: 0;
	padding: 0 0 1.25rem 1.6rem;
	columns: 2;
	column-gap: 2rem;
}

.padmakara-library__files li {
	break-inside: avoid;
	padding-block: 0.3rem;
}

.padmakara-library__file {
	font-size: 0.9rem;
	color: var(--color-cinnabar);
	text-decoration: none;
}

.padmakara-library__file:hover,
.padmakara-library__file:focus-visible {
	color: var(--color-cinnabar-dark);
	text-decoration: underline;
}

.padmakara-library__vide {
	margin-block: 2rem;
	color: var(--color-stone);
}

/* Sous cette largeur, le nom prend sa ligne et les deux mentions se rangent en
   dessous ; les fichiers repassent en une colonne. */
@media (max-width: 760px) {
	.padmakara-library__summary {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 0.35rem 1rem;
		padding-top: 1.1rem;
		padding-bottom: 1.1rem;
	}

	.padmakara-library__title {
		grid-area: 1 / 1 / auto / -1;
	}

	.padmakara-library__count {
		grid-area: 2 / 1;
	}

	.padmakara-library__date {
		grid-area: 2 / 2;
	}

	.padmakara-library__files {
		columns: 1;
	}
}

/* Le chevron pivote : une transition suffit, et elle répond à un geste. Un
   visiteur qui demande moins de mouvement n'en a pas besoin pour autant. */
@media (prefers-reduced-motion: reduce) {
	.padmakara-library__summary::before {
		transition: none;
	}
}

/* Le renvoi d'une page du compte vers l'autre. Discret : c'est une sortie, pas
   une action. Il se pose sous le double filet qui ferme la liste. */
.padmakara-account__crosslink {
	margin: 1.75rem 0 0;
	font-size: 0.9rem;
}

.padmakara-account__crosslink a {
	color: var(--color-cinnabar);
	text-decoration: none;
}

.padmakara-account__crosslink a:hover,
.padmakara-account__crosslink a:focus-visible {
	color: var(--color-cinnabar-dark);
	text-decoration: underline;
}

/* ========================================================================
   32. Le ZIP d'un ouvrage — et les durées de l'index
   ======================================================================== */

/* L'archive est la seule action du panneau : elle se pose à droite, au-dessus
   des fichiers, alignée sur leur retrait. Elle n'est pas un bouton plein — un
   aplat cinabre de la largeur d'un pouce au-dessus de vingt-cinq lignes de
   texte ferait de la bibliothèque une boutique. */
.padmakara-library__bulk {
	margin: 0 0 0.9rem;
	padding-left: 1.6rem;
	text-align: right;
}

.padmakara-library__zip {
	font-size: 0.9rem;
	color: var(--color-cinnabar);
	text-decoration: none;
	border-bottom: 1px solid rgba(184, 60, 46, 0.35);
	padding-bottom: 1px;
}

/* Au survol, le filet simple devient le double filet de la maison. C'est la
   marque des pechas, et elle sert ici de réponse au geste plutôt que
   d'ornement. */
.padmakara-library__zip:hover,
.padmakara-library__zip:focus-visible {
	color: var(--color-cinnabar-dark);
	border-bottom: 3px double var(--color-cinnabar-dark);
	padding-bottom: 0;
}

/* Le nom à gauche, la durée au bout de sa colonne : l'index d'un ouvrage
   imprimé. Les deux colonnes de la section 31 tiennent, chaque ligne étant un
   bloc à part entière. */
.padmakara-library__files li {
	display: flex;
	align-items: baseline;
	gap: 0;
}

/* Le filet de conduite. Dans une colonne de cinq cents pixels, une durée
   alignée à droite se détache de son titre et l'œil ne sait plus laquelle
   appartient à laquelle — c'est le problème que les tables des matières
   imprimées résolvent depuis toujours, et de cette façon-là. Il est tracé par
   le pseudo-élément de la ligne, que `order` glisse entre le titre et la
   durée : aucun balisage ajouté pour un trait. */
.padmakara-library__files li::after {
	content: "";
	flex: 1 1 0;
	align-self: center;
	margin: 0 0.5rem;
	border-bottom: 1px dotted var(--color-rule);
}

.padmakara-library__duration {
	order: 1;
	flex: none;
	font-size: 0.8rem;
	color: var(--color-stone);
	/* Des chiffres de largeur fixe : sans eux, une colonne de durées
	   tremble d'une ligne à l'autre. */
	font-variant-numeric: tabular-nums;
}

/* Un fichier sans durée — un PDF — n'a rien à relier : le filet se retire
   plutôt que de courir jusqu'à un bout de ligne vide. */
.padmakara-library__files li:not(:has(.padmakara-library__duration))::after {
	content: none;
}

.padmakara-library__duration-total {
	margin-left: 0.4rem;
}