/*
Theme Name: Ebookine — enfant de Kadence
Description: Thème enfant de Kadence pour ebookine.ca. Porte le balisage que Kadence ne fournit pas (bande fil d'Ariane, widget Articles populaires) ET l'habillage VALIDÉ du site.
Author: Francis
Template: kadence
Version: 1.1.0
Text Domain: ebookine-child
*/

/* =====================================================================
   MÉTHODE DE TRAVAIL — posée par Francis le 28 juillet
   =====================================================================

   Deux endroits, deux rôles, et c'est la seule chose à retenir :

     L'ATELIER ....... le champ « CSS supplémentaire » du personnalisateur.
                       Rapide, aperçu immédiat. On y essaie, on y règle.
     L'ARCHIVE ....... ce fichier. Une règle y descend UNIQUEMENT quand
                       elle est réglée et validée à l'œil.

   ⭐ POURQUOI : le champ du personnalisateur TRONQUE LES COLLAGES LONGS,
   sans aucun message d'erreur (constaté deux fois le 28 juillet, trois
   heures perdues). En gardant l'atelier court, le problème ne peut plus
   se produire. Un fichier, lui, ne tronque jamais.

   ⚠️ CONSÉQUENCE : quand une retouche ne prend pas, vérifier D'ABORD si
   la règle est ici ou là-bas. Le CSS supplémentaire est chargé APRÈS ce
   fichier : à spécificité égale, c'est l'atelier qui gagne. C'est voulu —
   on peut donc y neutraliser une règle archivée le temps d'un essai.

   ===================================================================== */


/* =====================================================================
   1. LES COULEURS ET LES RÉGLAGES — source unique
   Ces variables vivaient dans le CSS supplémentaire. Elles descendent
   ici : le fil d'Ariane et le widget Articles populaires s'en servent
   déjà, et une variable définie plus bas dans la page n'aurait pas
   couvert le balisage produit par functions.php.
   ===================================================================== */
:root {
	--ebk-bourgogne: #600606;
	--ebk-bourgogne-survol: #c60800;
	--ebk-or: #c0a878;
	--ebk-parchemin: #f7edda;

	/* Menu déroulant — les trois seuls réglages à toucher. */
	--ebk-bulle-noir: #121212;
	/* Couleur de la QUEUE, la pointe sous l'item de menu. Même noir que
	   la bulle, donc invisible tant qu'elle est bien placée. POUR LA
	   REPÉRER le temps d'un réglage : mettre #ff0000, juger, remettre. */
	--ebk-queue: var(--ebk-bulle-noir);
	/* Vide entre l'item de menu et la bulle. 0 = collée. 38px = 1 cm. */
	--ebk-bulle-descente: 16px;
}

/* =====================================================================
   BANNIÈRE D'ENTÊTE — doit s'ÉTIRER, pas seulement se rétrécir

   Le vivant porte « .banniere img { width: 100% } » : l'image suit son
   conteneur dans les deux sens, y compris au-delà de sa largeur naturelle
   de 1920 px. Kadence ne pose que « max-width: 100% » : l'image peut
   rétrécir, jamais grandir. D'où du blanc de chaque côté dès que la
   fenêtre (ou un dézoom) dépasse 1920 px.

   ⚠️ MAIS « width: 100% » sur l'image ne suffit PAS, et voici pourquoi
   (diagnostiqué au navigateur le 25 juillet) : le conteneur
   « .site-header-item » est un élément flex en « flex: 0 1 auto », donc
   sa largeur est décidée par son CONTENU — c'est-à-dire par la largeur
   naturelle de l'image, 1920 px. L'image se mesurait donc contre
   elle-même : 100 % de 1920 = 1920. Il faut d'abord forcer le conteneur
   à occuper la rangée, ensuite l'image suit.

   Vérifié en direct : conteneur forcé à 2400 px → image 2400×625,
   retour à 1319 px quand on relâche. Sans !important, la spécificité
   suffit.
   ===================================================================== */

#masthead .site-top-header-wrap .site-header-item {
	flex: 1 1 100%;
	width: 100%;
}

#masthead .header-html,
#masthead .header-html-inner {
	width: 100%;
}

#masthead .header-html p {
	margin: 0; /* wpautop enveloppe l'image dans un <p> */
}

#masthead .header-html img,
#mobile-header .mobile-html img {
	display: block;
	width: 100%;
	height: auto;
}

/* =====================================================================
   BANDE FIL D'ARIANE — 3e rangée d'entête (forme Booklovers)
   Balisage produit par functions.php sur le crochet kadence_after_header.
   Cette CSS reste ICI, avec le balisage qu'elle habille : si le thème
   enfant est désactivé un jour, rien ne devient orphelin.
   Relevé du vivant : fond #600607, hauteur 65px, fil d'Ariane à droite,
   19px, liens gris clair, élément courant en blanc, séparateur « › ».
   ===================================================================== */

.ebk-ariane {
	background: #600607;
}

.ebk-ariane .ebk-ariane-inner {
	display: flex;
	align-items: center;
	justify-content: flex-end; /* fil d'Ariane à droite, comme le vivant */
	flex-wrap: wrap;
	min-height: 65px;
	padding-top: 8px;
	padding-bottom: 8px;
}

/* La bande reste visible même vide (accueil) : c'est le cas du vivant. */

.ebk-ariane .kadence-breadcrumbs,
.ebk-ariane .kadence-breadcrumb-container {
	font-size: 19px;
	line-height: 1.42;
}

.ebk-ariane .kadence-breadcrumbs a {
	color: #d9c9c9;
	text-decoration: none;
	box-shadow: none;
}

.ebk-ariane .kadence-breadcrumbs a:hover,
.ebk-ariane .kadence-breadcrumbs a:focus {
	color: #ffffff;
}

.ebk-ariane .kadence-bread-current {
	color: #ffffff;
}

/* Séparateur : Kadence sort « / », le vivant a « › ».
   On masque le caractère du thème et on pose le bon par-dessus,
   sans toucher au PHP (les espaces autour du span sont conservés). */
.ebk-ariane .bc-delimiter {
	font-size: 0;
}

.ebk-ariane .bc-delimiter::after {
	content: "\203A";
	font-size: 19px;
	color: #d9c9c9;
}

/* =====================================================================
   WIDGET « ARTICLES POPULAIRES » — habillage du balisage produit par
   la section 6 de functions.php. Sa CSS reste donc ICI, avec lui.
   Relevé du vivant : vignette carrée 75x75 à gauche, titre à droite,
   nombre de lectures dessous avec une icône d'œil.
   La variable --ebk-bourgogne vit dans le CSS supplémentaire ; la
   valeur de secours après la virgule évite un titre invisible si ce
   bloc-là venait à disparaître.
   ===================================================================== */

.ebk-populaires {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ebk-populaires li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 20px;
}

.ebk-populaires li:last-child {
	margin-bottom: 0;
}

.ebk-pop-vignette {
	flex: 0 0 75px; /* ne rétrécit jamais : la vignette garde son carré */
}

.ebk-pop-vignette img {
	display: block;
	width: 75px;
	height: 75px;
	object-fit: cover; /* recadre au centre au lieu de déformer */
}

.ebk-pop-texte {
	flex: 1 1 auto;
	min-width: 0; /* autorise les longs titres à se couper */
}

.ebk-pop-titre {
	display: block;
	font-size: 17px;
	line-height: 1.3;
	color: var(--ebk-bourgogne, #600606);
	text-decoration: none;
	box-shadow: none;
}

.ebk-pop-titre:hover,
.ebk-pop-titre:focus {
	color: var(--ebk-bourgogne-survol, #c60800);
}

.ebk-pop-vues {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	font-size: 15px;
	color: #797979;
}

.ebk-pop-oeil {
	color: var(--ebk-bourgogne, #600606);
	flex: 0 0 auto;
}

/* Téléphone : on laisse la bande grandir plutôt que déborder. */
@media (max-width: 767px) {
	.ebk-ariane .ebk-ariane-inner {
		justify-content: flex-start;
	}

	.ebk-ariane .kadence-breadcrumbs,
	.ebk-ariane .kadence-breadcrumb-container {
		font-size: 17px;
	}
}


/* =====================================================================
   =====================================================================
   HABILLAGE VALIDÉ — descendu du CSS supplémentaire le 28 juillet

   Le relevé automatique du champ avait trouvé 16 DOUBLONS SUR 75 RÈGLES,
   nés de l'empilement des blocs datés : chaque journée ajoutait sa couche
   en fin de champ plutôt que de modifier la précédente. C'était le bon
   choix tant que les valeurs n'étaient pas validées. Elles le sont.

   Doublons fondus : :root (2 fois) · la bulle du sous-menu (3) · la
   queue (2) · .ebk-zigzag (2) · .ebk-bouton-clair (2) ·
   .ebk-derniers-articles et > li (2) · le bandeau des derniers
   articles (3) · les titres de produits (2) · .product-action-wrap et
   .button (2) · une règle @media (2).
   =====================================================================
   ===================================================================== */


/* =====================================================================
   2. LE CORPS DES ARTICLES
   ===================================================================== */
.entry-content p,
.entry-content li {
	font-family: 'Times New Roman', Times, serif;
	font-size: 19px;
	color: #000;
}
.entry-content p { text-align: justify; }

/* Intertitres : Times italique petites capitales, centrés.
   ⚠️ Cette règle prend TOUT h2 du contenu — y compris les titres de
   section d'une page et les titres de produits WooCommerce, qui sont
   des h2. C'est pourquoi les sections 7 et 9 l'annulent explicitement. */
.entry-content h2 {
	font-family: 'Times New Roman', Times, serif;
	font-style: italic;
	font-variant: small-caps;
	font-size: 28px;
	font-weight: 400;
	line-height: 1.3;
	text-align: center;
	color: #121212;
	padding-bottom: 10px;
	margin-top: 2rem;
}

/* Encadré du corps : filet bleu et fond bleu pâle, comme le vivant. */
.cadre-article {
	background: #eff6fc;
	border: 2px solid #1e73be;
	border-radius: 4px;
	padding: 30px 35px;
}

.entry-content a { color: var(--ebk-bourgogne); }
.entry-content a:hover { color: var(--ebk-bourgogne-survol); }

/* Boutons du contenu : contour bourgogne, se remplit au survol. */
.entry-content .wp-block-button__link {
	background-color: transparent;
	color: var(--ebk-bourgogne);
	border: 2px solid var(--ebk-bourgogne);
}
.entry-content .wp-block-button__link:hover {
	background-color: var(--ebk-bourgogne);
	color: #fff;
}

/* Citation : Christine insère un bloc « Citation » et c'est stylé. */
.entry-content .wp-block-quote {
	border-left: 4px solid var(--ebk-bourgogne);
	padding: 6px 0 6px 28px;
	margin: 2rem 0;
	font-style: normal;
}
.entry-content .wp-block-quote p { font-weight: 700; }
.entry-content .wp-block-quote cite {
	display: block;
	margin-top: 1rem;
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	color: #888;
}


/* =====================================================================
   3. LE MENU ET SES SOUS-MENUS
   Trois blocs datés fondus en un : la bulle était déclarée trois fois,
   la queue deux fois.
   ===================================================================== */

/* La bulle noire du vivant, descendue sous l'item de menu.
   « overflow: visible » laisse dépasser la pointe. */
.main-navigation ul ul,
.primary-menu-container ul.sub-menu {
	background: var(--ebk-bulle-noir);
	border-radius: 0 0 3px 3px;
	padding: 5px 0 10px;
	margin-top: var(--ebk-bulle-descente);
	overflow: visible;
}
.main-navigation ul ul a,
.primary-menu-container ul.sub-menu a {
	color: #797979;
	font-size: 17px;
	font-weight: 400;
	text-transform: none;
}
.main-navigation ul ul a:hover,
.primary-menu-container ul.sub-menu a:hover {
	color: #fff;
}

/* LA QUEUE — relevé du 26 juillet : carré de 10px pivoté à 45 degrés,
   débordant de 5px vers le haut, à 19px du bord gauche. C'est la moitié
   supérieure du losange qui fait la pointe.
   ⚠️ UN LÉGER CARREAU se détache au survol. Constaté et ASSUMÉ le 27 :
   « on laisse, ça ne se remarque pas ». Ne pas rouvrir sans raison. */
.main-navigation ul ul::before,
.primary-menu-container ul.sub-menu::before {
	content: "";
	position: absolute;
	top: -5px;
	left: 19px;
	width: 10px;
	height: 10px;
	background: var(--ebk-queue);
	transform: rotate(45deg);
}

/* LE PONT DE SURVOL — indispensable dès que la bulle est décollée.
   Sans lui, la souris traverse le vide, le survol se rompt et le menu se
   referme avant qu'on l'atteigne : le menu devient inutilisable dès 10px
   de descente. Ce rectangle invisible comble le vide et APPARTIENT au
   sous-menu, donc le survol tient.
   « bottom: 100% » veut dire : juste au-dessus de la bulle.
   ⚠️ IMPOSSIBLE DE CAPTURER UN SURVOL sur ce site (le navigateur cale).
   Le jugement de cet élément passe forcément par l'œil de Francis. */
.main-navigation ul ul::after,
.primary-menu-container ul.sub-menu::after {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 0;
	width: 100%;
	height: calc(var(--ebk-bulle-descente) + 2px);
	background: transparent;
}

/* Les sous-sous-menus s'ouvrent sur le CÔTÉ : ni queue, ni pont, ni
   descente. */
.main-navigation ul ul ul::before,
.primary-menu-container ul.sub-menu ul::before,
.main-navigation ul ul ul::after,
.primary-menu-container ul.sub-menu ul::after {
	display: none;
}
.main-navigation ul ul ul,
.primary-menu-container ul.sub-menu ul {
	margin-top: 0;
}


/* =====================================================================
   4. LES BOUTONS DE FORMULAIRE — noir inversant
   ===================================================================== */
.comment-form input[type="submit"],
input#submit,
.wp-block-search__button {
	background: #121212;
	color: #fff;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 19px;
	border: 2px solid #121212;
	border-radius: 3px;
	padding: 10px 23px;
}
.comment-form input[type="submit"]:hover,
input#submit:hover,
.wp-block-search__button:hover {
	background: #fff;
	color: #121212;
}


/* =====================================================================
   5. LES WIDGETS
   Colonne latérale : bloc plein bourgogne, texte blanc.
   Pied de page : noir sur filet gris, PAS de bloc.
   Les deux écritures sont couvertes — widget classique (.widget-title)
   et bloc Titre de WP 5.8+ (.widget_block), sans quoi les titres saisis
   en bloc échappent à l'habillage.
   ===================================================================== */
#secondary .widget-title,
.primary-sidebar .widget-title,
#secondary .widget_block > h2,
#secondary .widget_block .wp-block-heading,
.primary-sidebar .widget_block > h2,
.primary-sidebar .widget_block .wp-block-heading {
	background: var(--ebk-bourgogne);
	color: #fff;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 19px;
	padding: 19px 33px;
	border-radius: 0;
	margin: 0 0 1em;
}

.site-footer .widget-title,
.site-footer .widget_block > h2,
.site-footer .widget_block .wp-block-heading {
	background: none;
	color: #121212;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 19px;
	padding: 0 0 10px 0;
	border-bottom: 1px solid #c9c9c9;
}

/* Vignettes des listes de produits en colonne latérale. */
#secondary .product_list_widget img { width: 70px; }

/* Air entre les produits. « li + li » = chaque item QUI SUIT un autre :
   le premier n'est donc pas décollé du titre du widget, seuls les
   intervalles grandissent. */
#secondary .product_list_widget li + li,
.primary-sidebar .product_list_widget li + li {
	margin-top: 19px;
}


/* =====================================================================
   6. L'ÉPHÉMÉRIDE « CE JOUR-LÀ »
   Le cadre externe est dessiné pour 360px. On le rend à sa taille native
   puis on le réduit à 75% (270/360), au lieu de l'écraser à 270px —
   sinon sa colonne de droite est rognée. L'enveloppe fixe la hauteur
   visible et coupe le reste.
   ===================================================================== */
.ebk-ephemeride {
	height: 525px;
	overflow: hidden;
}
.ebk-ephemeride iframe {
	width: 360px;
	max-width: none; /* Kadence plafonne les iframes à 100% */
	height: 700px;
	border: 0;
	display: block;
	transform: scale(0.75);
	transform-origin: top left;
}


/* =====================================================================
   7. PAGE D'ACCUEIL — LES TITRES DE SECTION
   Relevé au pixel sur le vivant : Times ROMAIN 34px, casse normale,
   #121212, 62px d'air au-dessus, 17px en dessous, filet gris de 94px.
   ⚠️ Le vivant DÉCLARE Playfair Display mais NE LA CHARGE JAMAIS : ce
   qui s'affiche est le repli Times. NE PAS charger Playfair.
   ⚠️ « getComputedStyle().fontFamily » retourne la police DÉCLARÉE, pas
   celle réellement rendue. Mesure trompeuse, à ne pas prendre au mot.
   ⚠️ « .entry-content h2 » répété devant la classe pour l'emporter sur
   la règle des intertitres (section 2).
   ===================================================================== */
.entry-content h2.ebk-titre-filet {
	font-family: 'Times New Roman', Times, serif;
	font-size: 34px;
	font-style: normal;
	font-variant: normal;
	text-transform: none;
	font-weight: 400;
	line-height: 1.2;
	text-align: center;
	color: #121212;
	position: relative;
	margin-top: 62px;
	margin-bottom: 17px;
	padding-bottom: 30px;
}
.entry-content h2.ebk-titre-filet::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 94px;
	height: 0;
	border-top: 1px solid rgba(121, 121, 121, 0.5);
}

/* Sur la bande lune, texte et filet passent au blanc. */
.entry-content h2.ebk-inverse { color: #fff; }
.entry-content h2.ebk-inverse::after {
	border-top-color: rgba(255, 255, 255, 0.7);
}


/* =====================================================================
   8. PAGE D'ACCUEIL — LES 4 DERNIERS ARTICLES
   Balisage RELEVÉ, non supposé :
     <li>
       <div class="wp-block-latest-posts__featured-image">
         <a><img></a>          ← le parent direct de l'image n'a AUCUNE
       </div>                     classe : viser « li img », pas le nom
       <a class="...__post-title">   du conteneur (mesure du 28 juillet)
     </li>
   ===================================================================== */

/* ⚠️ « minmax(0, 1fr) » ET NON « 1fr ». Une colonne 1fr a pour largeur
   minimale « auto », donc elle grandit pour contenir un enfant
   insécable. Avec le titre en « nowrap » plus bas, LA GRILLE EXPLOSAIT :
   les colonnes s'élargissaient à la mesure du plus long titre. Le 0
   comme minimum le lui interdit. Payé le 28 juillet.
   ⭐ RÈGLE GÉNÉRALE : « nowrap » dans une grille exige presque toujours
   « minmax(0, 1fr) » sur les colonnes et « min-width: 0 » sur les items. */
.ebk-derniers-articles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	list-style: none;
	padding: 0;
	margin-bottom: 48px;
}
@media (max-width: 900px) {
	.ebk-derniers-articles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
	.ebk-derniers-articles { grid-template-columns: minmax(0, 1fr); }
}

/* Chaque carte est une colonne : image en haut, bandeau en bas.
   La grille leur donne d'office la même hauteur. */
.ebk-derniers-articles > li {
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	background: #eeeeee;
}

/* L'image en CARRÉ recadré — valeur du vivant, 227x227.
   « object-fit: cover » remplit le cadre en rognant le surplus : c'est
   ce qui grossit l'image et la recadre, comme sur le vivant.
   ⚠️ « height ... !important » : Kadence impose « height: auto » avec un
   poids supérieur. Un des rares cas où !important se justifie.
   ⚠️ WP NE GÉNÈRE PAS une taille intermédiaire si l'original ne la
   dépasse pas, et n'agrandit jamais. D'où la consigne à Christine :
   image à la une d'au moins 800px de large, EN PAYSAGE. */
.ebk-derniers-articles .wp-block-latest-posts__featured-image { margin: 0; width: 100%; }
.ebk-derniers-articles .wp-block-latest-posts__featured-image a { display: block; }
.wp-block-latest-posts.wp-block-latest-posts__list.is-grid.ebk-derniers-articles li img {
	display: block;
	width: 100% !important;
	height: 250px !important;
	max-width: none;
	object-fit: cover;
}

/* LE BANDEAU DU TITRE, sous l'image.
   ⚠️ SÉLECTEUR À QUATRE CLASSES, ET C'EST NÉCESSAIRE. Kadence habille
   déjà ce lien avec « .wp-block-latest-posts.wp-block-latest-posts__list
   .is-grid li > a » : TROIS classes. En CSS, la règle qui nomme le plus
   de classes gagne, quel que soit l'ordre des fichiers. Mesure du 27,
   faite en parcourant les feuilles de style, pas devinée. Sans cela, le
   titre gardait le gris de Kadence sur fond bourgogne : illisible.
   « margin-top: auto » pousse le bandeau au bas de la carte : les quatre
   s'alignent, quel que soit le titre.
   « nowrap » borne le titre à UNE ligne coupée net, comme le vivant —
   sans quoi les cartes à titre court se remplissent de gris, les titres
   longs étirant toute la rangée. */
.wp-block-latest-posts.wp-block-latest-posts__list.is-grid.ebk-derniers-articles li > a {
	margin-top: auto;
	display: block;
	background: var(--ebk-bourgogne);
	color: #fff;
	font-family: 'Times New Roman', Times, serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
	text-decoration: none;
	padding: 10px 12px;
	white-space: nowrap;
	overflow: hidden;
}
.wp-block-latest-posts.wp-block-latest-posts__list.is-grid.ebk-derniers-articles li > a:hover {
	background: var(--ebk-bourgogne-survol);
	color: #fff;
}


/* =====================================================================
   9. PAGE D'ACCUEIL — LES PRODUITS
   Mesures du 28 juillet, chaîne des parents relevée au navigateur :
     A.button ................. 128,6px
     DIV.product-action-wrap .. 128,6px  (rembourrage 0)
     DIV.product-details ...... 160,6px  REMBOURRAGE 16px/16px ← la cause
     LI.product ............... 179,6px  (rembourrage 0)
   160,6 moins 2 x 16 = 128,6.
   ⭐ LE VIVANT N'ALIGNE PAS les boutons entre eux : il est simplement
   COMPACT. On ne cherche donc pas à étirer les cartes — la première
   version, qui le faisait, creusait un grand vide.
   ⚠️ Colonnes de 179,6px sur dev contre 240px sur le vivant : les
   valeurs relevées en pixels sur le vivant ne se transposent pas telles
   quelles (le « bouton de 155px » en était une).
   ===================================================================== */
.entry-content ul.products {
	margin-top: 24px;
	margin-bottom: 48px;
}

.entry-content ul.products li.product .product-details {
	padding-left: 0;
	padding-right: 0;
}

/* Le titre : Times ROMAIN. La règle des intertitres (section 2) le
   prenait parce qu'un titre de produit WooCommerce est un h2.
   Hauteur bornée à deux lignes (50px = 2 x 19 x 1,3), coupé net.
   ⚠️ « -webkit-line-clamp » ÉCARTÉ : il coupait une troisième ligne en
   deux, en plein milieu des lettres. Le vivant fait plus simple. */
.entry-content ul.products li.product h2.woocommerce-loop-product__title {
	font-family: 'Times New Roman', Times, serif;
	font-style: normal;
	font-variant: normal;
	text-transform: none;
	letter-spacing: normal;
	font-size: 19px;
	line-height: 1.3;
	font-weight: 700;
	color: #121212;
	text-align: center;
	margin: 12px 0 4px;
	padding: 0;
	height: 50px;
	overflow: hidden;
}

/* Les étoiles, quand les avis seront activés dans WooCommerce
   (Réglages → Produits → onglet Avis). Le vivant les affiche. */
.entry-content ul.products li.product .star-rating {
	margin: 0 auto 6px;
	color: var(--ebk-bourgogne);
}

.entry-content ul.products li.product .price {
	margin: 0 0 10px;
	text-align: center;
	color: var(--ebk-bourgogne);
	font-size: 19px;
	font-weight: 700;
}
.entry-content ul.products li.product .price ins,
.entry-content ul.products li.product .price bdi {
	color: var(--ebk-bourgogne);
	text-decoration: none;
}

.entry-content ul.products li.product .product-action-wrap {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}
.entry-content ul.products li.product .button {
	display: block;
	width: 100%;
	margin: 0;
	background: var(--ebk-bourgogne);
	color: #fff;
	font-size: 16.6px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	padding: 10.8px 10px;
	border-radius: 3px;
	text-align: center;
}
.entry-content ul.products li.product .button:hover {
	background: var(--ebk-bourgogne-survol);
	color: #fff;
}


/* =====================================================================
   10. PAGE D'ACCUEIL — LE ZIGZAG ET LE BOUTON CLAIR
   Le motif du zigzag est dessiné par deux dégradés en biais qui se
   répètent : c'est ce qui fait les dents. Il remplace [vc_zigzag].
   ===================================================================== */
.ebk-zigzag {
	border: 0;
	height: 10px;
	background:
		linear-gradient(135deg, var(--ebk-or) 25%, transparent 25%) -10px 0,
		linear-gradient(225deg, var(--ebk-or) 25%, transparent 25%) -10px 0;
	background-size: 20px 20px;
	opacity: 1;
	margin: 0 auto;
	max-width: 100%;
}

/* Bouton clair sur fond sombre (bande lune) : contour et texte blancs,
   se remplit au survol. 300px comme le vivant. */
.ebk-bouton-clair .wp-block-button__link {
	background: transparent;
	color: #fff;
	border: 2px solid #fff;
	border-radius: 3px;
	min-width: 300px;
	text-align: center;
	text-transform: uppercase;
	font-weight: 700;
}
.ebk-bouton-clair .wp-block-button__link:hover {
	background: #fff;
	color: #121212;
}


/* =====================================================================
   11. FILET GÉNÉRIQUE — pour un titre qui n'est pas un h2 de section
   ===================================================================== */
.ebk-titre-filet {
	position: relative;
	padding-bottom: 18px;
}
.ebk-titre-filet::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 60px;
	height: 2px;
	background: var(--ebk-bourgogne);
}
.ebk-inverse::after { background: #fff; }


/* Onglet « Extrait » — cadre du document (bloc 8 de functions.php) */
.ebk-extrait-cadre {
	margin-top: 1.5em;
}
.ebk-extrait-cadre iframe {
	width: 100%;
	height: 80vh;      /* 80 % de la hauteur de l'écran */
	border: 1px solid #ddd;
}
@media (max-width: 900px) {
	.ebk-extrait-cadre { display: none; }  /* le bouton suffit sur petit écran */
}
/* =====================================================================
   AJOUT DU 9 AOÛT — LA COULEUR DU TEXTE DES PAGES

   La section 2 (« LE CORPS DES ARTICLES ») met le texte en noir avec
   « .entry-content p ». Ce sélecteur ne distingue pas un article d'une
   page : les pages héritent donc du noir des articles.

   La règle ci-dessous nomme DEUX classes (.page et .entry-content)
   là où celle de la section 2 n'en nomme qu'une. Elle est donc plus
   précise, et elle gagne sur les pages — sans qu'on ait à toucher à
   la section 2, qui continue de servir aux articles.

   #797979 est le gris de la charte, mesuré sur les pages du vivant.
   ===================================================================== */
.page .entry-content p,
.page .entry-content li {
	color: #797979;
}