/* L'Encre Interdite — retouches d'écriture et de mise en page du site.
   (Fichier historiquement dédié aux titres, d'où son nom.)

   --- Les titres à la manière de la carte ---
   Reprend le traitement du titre de la boutique (`ei-boutique.css`) et
   l'étend aux titres de page et de section : ornement doré au-dessus,
   initiale dorée, filet à losange en dessous.

   Propre à ce site : `mc-librairie` sert aux cinq boutiques. Tout est ici,
   rien n'est modifié dans le socle.

   Deux degrés, pour que la page garde une hiérarchie :
   — le titre de PAGE porte l'ornement complet ;
   — un titre de SECTION, partout dans le contenu principal, reçoit un
     ornement réduit. Sept
     sections sur l'accueil : sept grands ornements, c'est une page qui
     bégaie. */
:root {
	--ei-t-gold: #CDA862;
	--ei-t-bord: #8E2C30;
	--ei-t-crest: url("crest.png");
}

/* ---------- Titre de page ---------- */
h1.wp-block-post-title,
h1.wp-block-heading,
.wp-block-query-title h1,
h1.wp-block-query-title {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	text-align: center;
	font-family: var(--wp--preset--font-family--display, "Cormorant", Georgia, serif);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: .02em;
	margin-block: 28px 44px;
}
h1.wp-block-post-title::before,
h1.wp-block-heading::before,
.wp-block-query-title h1::before,
h1.wp-block-query-title::before {
	content: "";
	width: 124px;
	height: 36px;
	background: var(--ei-t-crest) center / contain no-repeat;
}
/* Le filet : un trait doré interrompu par un losange bordeaux. */
h1.wp-block-post-title::after,
h1.wp-block-heading::after,
.wp-block-query-title h1::after,
h1.wp-block-query-title::after {
	content: "";
	width: min(60vw, 340px);
	height: 11px;
	background:
		linear-gradient(90deg, transparent, var(--ei-t-gold) 46%, transparent 46%, transparent 54%, var(--ei-t-gold) 54%, transparent) center / 100% 1px no-repeat,
		linear-gradient(var(--ei-t-bord), var(--ei-t-bord)) center / 7px 7px no-repeat;
}
h1.wp-block-post-title::first-letter,
h1.wp-block-heading::first-letter,
h1.wp-block-query-title::first-letter {
	color: var(--ei-t-gold);
}

/* ---------- Titre de section ---------- */
main h2.wp-block-heading {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
}
main h2.wp-block-heading::before {
	content: "";
	width: 76px;
	height: 22px;
	background: var(--ei-t-crest) center / contain no-repeat;
	opacity: .8;
}
main h2.wp-block-heading::after {
	content: "";
	width: min(42vw, 220px);
	height: 9px;
	background:
		linear-gradient(90deg, transparent, var(--ei-t-gold) 45%, transparent 45%, transparent 55%, var(--ei-t-gold) 55%, transparent) center / 100% 1px no-repeat,
		linear-gradient(var(--ei-t-bord), var(--ei-t-bord)) center / 5px 5px no-repeat;
}
main h2.wp-block-heading::first-letter {
	color: var(--ei-t-gold);
}
/* La tête de section aligne son titre à gauche et son chapô à droite : une
   fois le titre centré sur sa colonne, il faut lui rendre toute la largeur. */
.mc-sec-head:has(h2.wp-block-heading) {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* ---------- Ce qui garde son propre traitement ---------- */
/* La boutique a déjà le sien, dans la feuille livrée. La carte des rayons est
   un dessin fermé : un ornement de plus l'encombrerait. Et le titre d'un
   produit dans la grille porte la même classe qu'un titre de page — sans
   cette exception, chaque couverture hériterait de l'ornement. */
.ei-shop-title::before,
.ei-shop-title::after,
.ei-carte__texte h2::before,
.ei-carte__texte h2::after,
.wc-block-product .wp-block-post-title::before,
.wc-block-product .wp-block-post-title::after,
.bnr-book .wp-block-post-title::before,
.bnr-book .wp-block-post-title::after {
	content: none;
}
.ei-carte__texte h2,
.wc-block-product .wp-block-post-title,
.bnr-book .wp-block-post-title {
	display: block;
	text-align: inherit;
}


/* ============================================================================
   COUPS DE CŒUR — une grille qui ne garde pas ses places vides.

   Le socle réserve quatre colonnes quoi qu'il arrive
   (`repeat(4, minmax(0, 1fr))`). La console n'a pour l'instant qu'un seul
   coup de cœur retenu : trois colonnes restaient vides, et la section occupait
   toute la largeur pour une seule couverture.

   `auto-fit` avec une largeur plafonnée pose autant de cartes qu'il y a de
   titres, groupées au centre : une seule reste une seule, quatre remplissent
   la rangée. Et la carte plafonne à 220 px au lieu des ~310 px d'une colonne
   sur quatre — la couverture suit, la section se resserre.
   ========================================================================== */
.mc-books .bnr-books {
	grid-template-columns: repeat(auto-fit, minmax(0, 220px));
	justify-content: center;
	gap: 32px 24px;
}
@media (max-width: 960px) {
	.mc-books .bnr-books {
		grid-template-columns: repeat(auto-fit, minmax(0, 200px));
	}
}

/* Et des cartes qui s'alignent entre elles. Un titre sur une ligne faisait
   remonter son prix et son bouton, là où le voisin en avait quatre : chaque
   carte se débrouillait seule.

   Les cinq éléments d'une carte — couverture, rayon, titre, prix, bouton —
   partagent maintenant les lignes de la grille commune (`subgrid`). La ligne
   du titre prend la hauteur du plus long, et toutes les autres s'alignent
   dessus. */
.mc-books .bnr-books {
	grid-template-rows: repeat(5, auto);
}
.mc-books .bnr-book {
	display: grid;
	grid-row: span 5;
	grid-template-rows: subgrid;
	align-content: start;
}
/* Repli pour un navigateur sans `subgrid` : au moins les boutons tombent sur
   une même ligne, poussés en bas de chaque carte. */
@supports not (grid-template-rows: subgrid) {
	.mc-books .bnr-books { grid-template-rows: none; }
	.mc-books .bnr-book {
		display: flex;
		flex-direction: column;
		grid-row: auto;
	}
	.mc-books .bnr-book .wp-block-button { margin-top: auto; }
}

/* Et des cartes plus resserrées. Avec la sous-grille, c'est l'écart de la
   grille qui sépare CHAQUE ligne d'une carte — couverture, rayon, titre, prix,
   bouton se retrouvaient à 32 px les uns des autres. Dix suffisent ; le filet
   au-dessus du prix garde un peu d'air de part et d'autre, mais moitié moins.

   L'écart entre deux RANGÉES de cartes se resserre d'autant, ce qui ne se voit
   pas : la sélection tient sur une seule rangée. */
.mc-books .bnr-books {
	gap: 10px 24px;
}
.mc-books .wp-block-post-terms {
	margin-bottom: 2px;
}
.mc-books .mc-book-meta {
	margin-top: 8px;
	padding-top: 10px;
}