/* ==========================================================================
   "Peps" — couche de style sitewide (18/08/2026)
   Reprise de la piste validée dans la maquette Claude Design "Peps
   DureToujours" : accent terre cuite, typo de titrage affirmée, score mis en
   avant, barre de nav verte, barres de critères plus généreuses.

   RÈGLE DE CETTE FEUILLE : STYLE UNIQUEMENT.
   Aucune modification des templates PHP ni du contenu des pages : on ne fait
   que recolorer / retypographier ce qui existe déjà. Le seul repositionnement
   est celui du libellé des cartes catégorie de l'accueil, remonté par-dessus
   la photo (section 04, demandé explicitement) ; il se fait en CSS, sur le
   bloc de texte existant, sans toucher au HTML. Le seul pseudo-élément ajouté
   est le voile de ces cartes, qui ne porte aucun contenu.

   Chargée en dernier (priorité 99 dans functions.php) pour passer après le
   CSS généré par GenerateBlocks (wp-content/uploads/generateblocks/*.css),
   qui écrit des couleurs en dur bloc par bloc.
   ========================================================================== */

:root {
	/* Terre cuite clair de la maquette. Le site avait déjà --accent-2
	   (#c16d45) mais il n'était utilisé nulle part ; on garde une variable
	   dédiée pour ne rien casser de l'existant. */
	--dt-accent: #e2662e;

	/* Variante foncée réservée AU TEXTE sur fond clair : #e2662e ne fait que
	   3,1:1 sur le fond papier, insuffisant pour du petit texte (AA = 4,5:1).
	   #bd4d1b monte à 4,5:1 tout en restant la même teinte. */
	--dt-accent-ink: #bd4d1b;

	/* Variante claire pour le texte d'accent sur les fonds vert foncé. */
	--dt-accent-pale: #f0b694;

	--dt-accent-soft: #fbede5;
	--dt-accent-line: #f1d5c4;

	/* Police de titrage UNIQUE du site. Elle est aussi réglée dans
	   Personnaliser > Typographie (all-headings = Archivo 700), et toutes les
	   feuilles du thème enfant pointent sur cette variable plutôt que d'écrire
	   un nom de police en dur : un seul endroit à changer. */
	--dt-display: 'Archivo', system-ui, sans-serif;
}

/* ==========================================================================
   01 · Titrage
   Même hiérarchie, mêmes tailles : seules la graisse, la police et
   l'interlettrage changent. Les titres passent de "poli" à "affirmé".
   ========================================================================== */

h1,
h2,
h3,
body.single-product .bifl-title,
body.single-product .bifl-section-title,
body.archive.woocommerce .bifl-archive-title,
body.home .bifl-home-hero-title,
.dt-blog-hero-title {
	font-family: var(--dt-display);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.05;
	text-wrap: balance;
}

/* Les titres de section de l'accueil et des pages statiques sont des blocs
   GenerateBlocks : le sélecteur porte le type d'élément pour passer devant
   la règle de police écrite en dur par GB (.gb-text-dthNN, spécificité 0,1,0). */
h2.gb-text,
h3.gb-text {
	font-family: var(--dt-display);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.05;
}

/* Titres de cartes (produit, article, catégorie) : même police que le reste,
   mais un titrage 800 sur 3 lignes de nom produit serait illisible. La
   graisse reste intermédiaire. */
body.archive.woocommerce .bifl-card__name,
body.home .bifl-home-product__name,
body.single-product .bifl-related__card-name {
	font-weight: 600;
}

/* Prix : même police que les titres, chiffres à chasse fixe pour que les
   colonnes de prix s'alignent dans les grilles. */
body.single-product .bifl-price,
body.single-product .bifl-price .woocommerce-Price-amount,
body.archive.woocommerce .bifl-card__price,
body.archive.woocommerce .bifl-card__price .woocommerce-Price-amount,
body.home .bifl-home-product__price {
	font-family: var(--dt-display);
	font-weight: 800;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
}

p {
	text-wrap: pretty;
}

/* Chiffres des cartes stats de l'accueil ("+200 produits", "Depuis 2025") :
   avant-dernier enfant de la carte, la légende étant le dernier. */
body.home .bifl-home-stat-card > .gb-text:nth-last-child(2) {
	font-family: var(--dt-display);
	font-weight: 800;
	letter-spacing: -.02em;
}

/* ==========================================================================
   02 · L'accent terre cuite partout où il y a une décision
   Le vert reste la voix de la marque, l'orange devient le doigt qui pointe.
   ========================================================================== */

/* Sur-titres ("La sélection", "L'évaluation", nom de marque sur les cartes).
   Les trois sélecteurs scopés répètent la couleur parce que home-page.css,
   archive-page.css et product-page.css posent déjà `color:var(--muted)` avec
   la même spécificité : sans eux, seule une partie des sur-titres passerait
   en terre cuite. */
.bifl-eyebrow,
body.home .bifl-eyebrow,
body.archive.woocommerce .bifl-eyebrow,
body.single-product .bifl-eyebrow {
	color: var(--dt-accent-ink);
}

/* Le lien de marque de la fiche produit garde son soulignement, mais en
   terre cuite plutôt qu'en gris. */
body.single-product .bifl-brand-link {
	border-bottom-color: var(--dt-accent-line);
}

/* Sur-titres des sections GenerateBlocks : le petit texte placé juste avant
   un titre. Sélecteur structurel (:has) plutôt que les identifiants de style
   générés par GB, pour rester valable si un bloc est recréé. La variante
   "+ style +" est indispensable : selon la page, GB écrit son CSS dans un
   fichier (accueil) ou dans une balise <style> insérée entre chaque bloc
   (blog, articles), et cette balise casse le sélecteur de frère adjacent. */
.gb-text:has(+ h1.gb-text),
.gb-text:has(+ h2.gb-text),
.gb-text:has(+ style + h1.gb-text),
.gb-text:has(+ style + h2.gb-text) {
	color: var(--dt-accent-ink);
}

/* Sur fond vert foncé, la terre cuite foncée ne ressort plus (2,5:1) : ces
   blocs prennent la version claire. La liste est explicite parce qu'aucun
   sélecteur CSS ne sait reconnaître "un bloc au fond sombre" ; les
   identifiants gb-element-* sont ceux des sections vertes existantes
   (accueil #methode, FAQ, Contact). Si un nouveau bloc vert est créé,
   ajouter sa classe ici. */
body.home #methode .gb-text:has(+ h2.gb-text),
body.home #methode .gb-text:has(+ style + h2.gb-text),
.gb-element-ab00000d .gb-text:has(+ h2.gb-text),
.gb-element-ab00000d .gb-text:has(+ style + h2.gb-text) {
	color: var(--dt-accent-pale);
}

/* ---- Cohérence de police ------------------------------------------------
   Le site n'a plus qu'une police de titrage (--dt-display) et une police de
   texte (Manrope, réglée dans Personnaliser). Toutes les feuilles du thème
   enfant pointent sur la variable, mais deux sources écrivent encore un nom
   de police en dur et doivent être rattrapées ici :
   1. le CSS généré par GenerateBlocks, bloc par bloc, à partir des réglages
      faits dans l'éditeur (les sélecteurs structurels ci-dessous couvrent les
      blocs existants : sur-titres, chiffres, titres d'encadré) ;
   2. le plugin dt-bifl-block, qu'on ne modifie pas. Son CSS est imprimé dans
      le corps de la page, donc APRÈS cette feuille : ses sélecteurs sont
      repris ici préfixés de `body`, sans quoi l'égalité de spécificité le
      ferait gagner.
   Si un nouveau bloc GB reçoit une police dans l'éditeur, c'est ce réglage-là
   qu'il faut corriger dans l'éditeur, pas ici. */
.gb-text:has(+ h1.gb-text),
.gb-text:has(+ h2.gb-text),
.gb-text:has(+ style + h1.gb-text),
.gb-text:has(+ style + h2.gb-text),
.gb-text-dtcallouttitleclemolette1,
body .dt-bifl-info h3,
body .dt-bifl-grid__card h3,
body .dt-bifl-rank__body h3,
body .dt-bifl-spec__v,
body .dt-bifl-scoreline__val,
body .dt-bifl-grid__price,
body .dt-bifl-rank__num,
body .dt-bifl-rank__price {
	font-family: var(--dt-display);
}

/* ---- Surlignage d'un mot dans un titre ---------------------------------
   À poser à la main dans le contenu, sur le ou les mots à souligner :
   <span class="dt-mark">à vie.</span>
   Fonctionne dans n'importe quel bloc (titre GB, titre de page, article).
   Le trait est un fond, pas une bordure : il suit les retours à la ligne. */
.dt-mark {
	background-image: linear-gradient(var(--dt-accent), var(--dt-accent));
	background-size: 100% .44em;
	background-position: 0 94%;
	background-repeat: no-repeat;
}

/* Sur fond vert foncé, le trait garde la même teinte mais le texte reste
   blanc : rien à changer, la classe est identique. */

/* ---- Boutons principaux : socle terre cuite, inversion au survol -------- */
body.single-product .bifl-cta .single_add_to_cart_button {
	box-shadow: inset 0 -3px 0 var(--dt-accent);
	transition: background-color .2s, box-shadow .2s;
}

body.single-product .bifl-cta .single_add_to_cart_button:hover {
	background: var(--dt-accent) !important;
	box-shadow: inset 0 -3px 0 var(--green);
}

/* Boutons du hero d'accueil (blocs GB) : le premier est le bouton plein. */
body.home .bifl-home-hero .gb-element > a.gb-text:first-child {
	box-shadow: inset 0 -3px 0 var(--dt-accent);
	transition: background-color .2s, box-shadow .2s;
}

body.home .bifl-home-hero .gb-element > a.gb-text:first-child:is(:hover, :focus) {
	background-color: var(--dt-accent);
	box-shadow: inset 0 -3px 0 var(--green);
}

body.home .bifl-home-hero .gb-element > a.gb-text:last-child:is(:hover, :focus) {
	color: var(--dt-accent-ink);
	border-color: var(--dt-accent);
}

/* Bouton de réinitialisation des filtres (page "aucun produit trouvé"). */
.dt-no-products__reset.apf-reset {
	box-shadow: inset 0 -3px 0 var(--dt-accent);
}

/* Bouton de fin d'article (blog). */
.dt-blog-cta__btn {
	box-shadow: inset 0 -3px 0 var(--dt-accent);
	transition: background-color .2s, box-shadow .2s;
}

.dt-blog-cta__btn:hover {
	background-color: var(--dt-accent);
	box-shadow: inset 0 -3px 0 var(--green);
}

/* Boutons des fiches produit insérées dans les articles (plugin dt-bifl-block,
   surchargé depuis le thème enfant : on n'édite jamais le plugin). */
.dt-bifl-cta,
.dt-bifl-cta-small,
.dt-bifl-rank__right a {
	box-shadow: inset 0 -3px 0 var(--dt-accent);
	transition: background-color .2s, box-shadow .2s;
}

.dt-bifl-cta:hover,
.dt-bifl-cta-small:hover,
.dt-bifl-rank__right a:hover {
	background: var(--dt-accent);
	box-shadow: inset 0 -3px 0 var(--green);
}

/* Barres de score du même bloc : même traitement que la fiche produit. */
.dt-bifl-scoretrack {
	height: 9px;
	border-radius: 999px;
}

.dt-bifl-scorefill {
	border-radius: 999px;
	background: linear-gradient(90deg, var(--dt-accent), var(--green));
}

/* ---- Blog : sur-titres et "Lire plus" ---------------------------------- */
.dt-blog-eyebrow,
a.dt-blog-eyebrow {
	color: var(--dt-accent-ink);
}

a.dt-blog-eyebrow:hover {
	color: var(--green);
}

.dt-blog-card .entry-summary .read-more {
	color: var(--dt-accent-ink);
}

/* ==========================================================================
   03 · Le score, héros de la carte produit
   La pastille "♻️ Durabilité 8" existe déjà en haut à droite de la photo,
   mais en gris pâle sur fond blanc : on ne la voit pas. Même position, même
   texte, même HTML — elle passe en vert plein.
   ========================================================================== */

body.archive.woocommerce .bifl-card__durability-pill {
	background: var(--green);
	color: #fff;
	font-family: var(--dt-display);
	font-weight: 700;
	font-size: 12px;
	padding: 6px 11px 6px 8px;
	font-variant-numeric: tabular-nums;
}

/* Note globale à côté du prix : même langage que la pastille, en terre cuite
   pour ne pas répéter deux fois le même vert sur une carte. */
body.archive.woocommerce .bifl-card__score-inline {
	color: var(--dt-accent-ink);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

body.archive.woocommerce .bifl-card__score-inline .bifl-related__dot {
	background: var(--dt-accent);
}

/* Le "7" de l'accueil parle la même langue que la grille boutique. */
body.home .bifl-home-product__score {
	color: var(--dt-accent-ink);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

body.home .bifl-home-product__score::before {
	color: var(--dt-accent);
}

/* Élévation au survol : 2 px vers le haut et une ombre douce, sur la photo
   seulement (le texte ne bouge pas, la grille non plus). */
body.archive.woocommerce .bifl-shot--sq {
	transition: border-color .15s, transform .3s, box-shadow .3s;
}

body.archive.woocommerce .bifl-card__link:hover .bifl-shot--sq {
	transform: translateY(-2px);
	box-shadow: 0 18px 40px -28px rgba(17, 35, 25, .55);
	border-color: var(--line-2);
}

body.home .bifl-home-product__img {
	transition: border-color .15s, transform .3s, box-shadow .3s;
}

body.home .bifl-home-product:hover .bifl-home-product__img {
	transform: translateY(-2px);
	box-shadow: 0 18px 40px -28px rgba(17, 35, 25, .55);
}

/* ==========================================================================
   04 · Cartes catégorie de l'accueil : image plein cadre, texte dedans
   Même grille, même HTML, mêmes textes : le bloc "libellé + compteur" qui
   était sous la photo est remonté par-dessus, sur un voile vert. Le blanc
   mort sous chaque image disparaît et la rangée gagne en présence.
   ========================================================================== */

/* La carte (le lien GB qui contient la figure) devient le repère de
   positionnement du bloc de texte. */
body.home a:has(> .bifl-home-cat__img) {
	position: relative;
}

/* L'image occupe désormais toute la carte. */
body.home .bifl-home-cat__img {
	height: 100%;
}

/* Le voile, en pseudo-élément : aucun HTML en plus. */
body.home a:has(> .bifl-home-cat__img)::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(17, 35, 25, .88) 0%, rgba(17, 35, 25, .15) 55%, transparent 100%);
	pointer-events: none;
}

/* Le bloc titre + compteur existant, repositionné en bas de la photo. */
body.home .bifl-home-cat__img + .gb-element {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	padding: 18px;
}

body.home .bifl-home-cat__img + .gb-element > .gb-text:first-child {
	font-family: var(--dt-display);
	font-weight: 800;
	font-size: 22px;
	letter-spacing: -.02em;
	line-height: 1.1;
	color: #fff;
}

body.home .bifl-home-cat__img + .gb-element > .gb-text:last-child {
	color: var(--dt-accent-pale);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 500;
}

/* Zoom lent au survol. */
body.home .bifl-home-cat__img img {
	transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

body.home a:hover > .bifl-home-cat__img img,
body.home a:focus-visible > .bifl-home-cat__img img {
	transform: scale(1.06);
}

/* ==========================================================================
   05 · Bloc méthode : des chiffres énormes, en creux
   Le bloc vert est déjà le meilleur moment de la page. Les quatre chiffres
   existants passent en contour, un filet les sépare et s'allume au survol.
   Depuis le 18/08/2026, tout est dans les blocs sauf le contour du chiffre.
   ========================================================================== */

/* Le filet, le survol et la typo des chiffres sont passés dans les attributs
   des blocs le 18/08/2026 (éditables dans l'éditeur). Seul le contour du
   chiffre reste ici : `-webkit-text-stroke` n'a pas d'équivalent dans le
   panneau de style de GenerateBlocks. Les blocs concernés portent la classe
   `dt-ghost-number`. */
.dt-ghost-number {
	-webkit-text-stroke: 1.5px rgba(240, 182, 148, .65);
}

/* ==========================================================================
   06 · Header : une barre affirmée plutôt que deux barres pâles
   Surcharge du plugin WPlusMenu depuis le thème enfant (le plugin est
   partagé entre plusieurs sites de Julie, on ne l'édite jamais). On ne
   redéfinit que ses variables de thème sur la seconde barre : le tiroir, le
   méga-menu et la barre du haut gardent leur habillage clair.
   ========================================================================== */

.wplm-header .wplm-bar--nav {
	background: var(--green);

	/* Le plugin contraint .wplm-bar à --wplm-container (1600px) : le fond
	   vert s'arrêtait donc avec le contenu. L'ombre portée horizontale
	   prolonge le fond jusqu'aux bords de l'écran sans toucher au contenu,
	   et le clip-path empêche cette ombre de déborder verticalement. Pas de
	   100vw ici : avec scrollbar-gutter:stable (style.css), 100vw serait plus
	   large que la zone visible et créerait un défilement horizontal. */
	box-shadow: 0 0 0 100vmax var(--green);
	clip-path: inset(0 -100vmax);
	--wplm-text: #ffffff;
	--wplm-dim: rgba(255, 255, 255, .6);
	--wplm-line: rgba(255, 255, 255, .14);
	--wplm-surface: rgba(255, 255, 255, .08);
	--wplm-accent: var(--dt-accent);
	color: #fff;
	border-bottom-color: rgba(255, 255, 255, .14);
}

/* Le bouton "Tous les produits" était vert sur blanc : il disparaîtrait sur
   la barre verte, on l'inverse. */
.wplm-header .wplm-bar--nav .wplm-trigger {
	background: #fff;
	color: var(--green);
}

.wplm-header .wplm-bar--nav .wplm-trigger:hover {
	background: var(--dt-accent);
	color: #fff;
}

/* "Garantie à vie" : le seul lien de sélection, en pilule terre cuite. */
.wplm-header .wplm-bar--nav .wplm-nav--left a {
	background: var(--dt-accent);
	color: #fff;
	padding: 7px 14px;
	border-radius: 999px;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-weight: 600;
	transition: background-color .2s;
}

.wplm-header .wplm-bar--nav .wplm-nav--left a:hover {
	background: #fff;
	color: var(--green);
}

/* Liens de droite : soulignement terre cuite qui apparaît au survol. */
.wplm-header .wplm-bar--nav .wplm-nav--right a {
	border-bottom: 2px solid transparent;
	padding-bottom: 2px;
	transition: color .15s, border-color .15s;
}

.wplm-header .wplm-bar--nav .wplm-nav--right a:hover {
	color: #fff;
	border-bottom-color: var(--dt-accent);
}

/* Champ de recherche (barre du haut) : halo terre cuite au focus. */
.wplm-header .wplm-search:focus-within {
	border-color: var(--green);
	box-shadow: 0 0 0 4px rgba(226, 102, 46, .16);
}

/* ==========================================================================
   07 · Barres de critères de la fiche produit
   Quatre barres vertes fines et identiques → plus épaisses, en dégradé
   terre cuite → vert, remplies à l'apparition. C'est là que le visiteur
   juge la crédibilité de l'évaluation.
   ========================================================================== */

body.single-product .bifl-score-bar__track {
	height: 9px;
	border-radius: 999px;
}

body.single-product .bifl-score-bar__fill {
	border-radius: 999px;
	background: linear-gradient(90deg, var(--dt-accent), var(--green));
	transform-origin: left;
	animation: dtFillBar 1.1s cubic-bezier(.2, .7, .2, 1) both;
}

/* Léger décalage d'une barre à l'autre : le regard suit la lecture. */
body.single-product .bifl-score-bar:nth-child(2) .bifl-score-bar__fill {
	animation-delay: .08s;
}

body.single-product .bifl-score-bar:nth-child(3) .bifl-score-bar__fill {
	animation-delay: .16s;
}

body.single-product .bifl-score-bar:nth-child(4) .bifl-score-bar__fill {
	animation-delay: .24s;
}

body.single-product .bifl-score-bar__value {
	font-family: var(--dt-display);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

@keyframes dtFillBar {
	from {
		transform: scaleX(0);
	}
}

/* ==========================================================================
   08 · En-tête des pages boutique / catégorie / marque
   Le bandeau (sur-titre + titre + description) était posé sur le fond papier,
   sans limite visible avec la grille produits. Il devient un bloc vert à
   coins arrondis, dans le container comme le reste du contenu. Même HTML,
   mêmes textes : voir woocommerce/loop/header.php.
   ========================================================================== */

/* Catégories et marques : bloc vert. La boutique garde le fond papier (voir
   plus bas) — c'est la page d'entrée, la rangée de catégories juste en
   dessous fournit déjà la masse verte. */
body.archive.woocommerce.tax-product_cat .bifl-archive-header,
body.archive.woocommerce.tax-product_brand .bifl-archive-header {
	background: var(--green);
	border-radius: 16px;
	padding: 44px 40px 46px;
	margin: 12px 0 4px;
}

body.archive.woocommerce.tax-product_cat .bifl-archive-header .bifl-eyebrow,
body.archive.woocommerce.tax-product_brand .bifl-archive-header .bifl-eyebrow {
	color: var(--dt-accent-pale);
}

/* La double classe body est nécessaire : archive-page.css pose déjà la
   couleur du titre et de l'intro avec `body.archive.woocommerce ...`, plus
   spécifique qu'un simple `body.tax-product_cat ...`. */
body.archive.woocommerce.tax-product_cat .bifl-archive-title,
body.archive.woocommerce.tax-product_brand .bifl-archive-title {
	color: #fff;
}

body.archive.woocommerce.tax-product_cat .bifl-archive-intro,
body.archive.woocommerce.tax-product_brand .bifl-archive-intro {
	color: rgba(255, 255, 255, .72);
}

body.archive.woocommerce .bifl-archive-title {
	font-size: 52px;
	margin-top: 16px;
}

/* Le blanc entre le fil d'Ariane et le bandeau cumulait trois espaces : la
   marge basse du fil d'Ariane, le padding vertical de .inside-article
   (40px, GeneratePress en "Separate Containers") et la marge haute du
   bandeau. Resserré sur les archives boutique/catégorie/marque uniquement,
   le reste du site garde le rythme du thème. */
body.archive.woocommerce .dt-breadcrumb {
	margin-bottom: 10px;
}

body.archive.woocommerce.separate-containers .inside-article {
	padding-top: 14px;
}

body.archive.woocommerce .bifl-archive-header {
	margin-top: 0;
}

/* Boutique : même échelle de titre, sur le fond papier. */
body.woocommerce-shop .bifl-archive-header {
	padding: 12px 0 4px;
}

body.woocommerce-shop .bifl-archive-intro {
	max-width: 52ch;
}

@media (max-width: 768px) {

	body.archive.woocommerce.tax-product_cat .bifl-archive-header,
	body.archive.woocommerce.tax-product_brand .bifl-archive-header {
		padding: 30px 22px 32px;
		border-radius: 14px;
	}

	body.archive.woocommerce .bifl-archive-title {
		font-size: 34px;
	}
}

/* ==========================================================================
   09 · Filtres de la boutique (plugin WProductFilter)
   Le plugin reste tel quel : on ne fait que reprendre ses couleurs. Le "+"
   des sections repliées passe en terre cuite, et le curseur de score reçoit
   le même dégradé que les barres de critères de la fiche produit.
   ========================================================================== */

body.woocommerce .apf-accordion-icon {
	color: var(--dt-accent);
}

body.woocommerce .apf-slider-track {
	height: 6px;
	border-radius: 999px;
}

body.woocommerce .apf-slider-range {
	background: linear-gradient(90deg, var(--dt-accent), var(--green));
	border-radius: 999px;
}

body.woocommerce .apf-range::-webkit-slider-thumb {
	width: 18px;
	height: 18px;
	border: 3px solid var(--green);
	box-shadow: 0 2px 6px -2px rgba(17, 35, 25, .55);
}

body.woocommerce .apf-range::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border: 3px solid var(--green);
	box-shadow: 0 2px 6px -2px rgba(17, 35, 25, .55);
}

/* Le seuil courant du filtre maison "Score durabilité" (≥ 8). */
body.woocommerce .dt-score-current strong {
	font-family: var(--dt-display);
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   10 · Les détails gratuits
   Quelques règles globales qui donnent l'impression d'un site soigné, sur
   toutes les pages à la fois.
   ========================================================================== */

::selection {
	background: var(--dt-accent);
	color: #fff;
}

:where(a, button, input, select, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--dt-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Liens dans le corps des articles : le soulignement reste visible (sinon un
   lien vert sur texte encre est indétectable), mais il passe en terre cuite
   et s'épaissit au survol. */
body.single-post .entry-content p a,
body.single-post .entry-content li a,
body.page .entry-content p a {
	text-decoration-color: var(--dt-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	transition: color .2s;
}

body.single-post .entry-content p a:hover,
body.single-post .entry-content li a:hover,
body.page .entry-content p a:hover {
	color: var(--dt-accent-ink);
}

/* Évite le flash gris pendant le chargement des photos produit. */
.bifl-shot img,
.bifl-home-product__img img {
	background: #fff;
}

@media (prefers-reduced-motion: reduce) {

	body.single-product .bifl-score-bar__fill {
		animation: none;
	}

	body.home .bifl-home-cat__img img,
	body.archive.woocommerce .bifl-shot--sq,
	body.home .bifl-home-product__img {
		transition: none;
	}

	body.home a:hover > .bifl-home-cat__img img {
		transform: none;
	}
}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 900px) {

	/* Les chiffres du bloc méthode passent en 1 puis 2 colonnes : on les
	   ramène à une taille qui ne mange pas la carte. */
	/* (la taille mobile des chiffres est réglée dans les blocs eux-mêmes) */
}

/* ==========================================================================
   09 · Blocs éditoriaux des articles (18/08/2026)
   Recolorage seul, aucun HTML touché : le vert vif #3d9c5e hérité de l'ancienne
   charte est remplacé par le duo de la charte "peps" — vert profond pour le
   positif, terre cuite pour tout ce qui alerte ou attire l'œil.
   ========================================================================== */

/* ---- Avantages / inconvénients du bloc produit BIFL (plugin dt-bifl-block,
   jamais modifié directement : voir memory no-direct-plugin-edits) ---- */
.dt-bifl-procon__col--pro {
	background: rgba(43, 74, 58, .06);
}

.dt-bifl-procon__col--con {
	background: var(--dt-accent-soft);
}

.dt-bifl-procon__col--pro h4,
.dt-bifl-procon__col--pro li::before {
	color: var(--green-2);
}

.dt-bifl-procon__col--con h4,
.dt-bifl-procon__col--con li::before {
	color: var(--dt-accent-ink);
}

/* ---- Encadré "le repère qui ne trompe pas" (blocs GenerateBlocks, un
   uniqueId par article mais toujours préfixé `dtcallout`). Deux classes dans
   le sélecteur : le <style> de GenerateBlocks est imprimé dans le corps de la
   page, donc après cette feuille, et une seule classe ne suffirait pas.
   Fond blanc et pas `--paper` : le contenu de l'article est posé directement
   sur le fond papier de la page, un encadré papier sur papier ne se voit pas. ---- */
.entry-content [class*="gb-element-dtcallout"] {
	background: var(--card);
	border: 1px solid var(--line);
	border-left: 4px solid var(--dt-accent);
}

.entry-content [class*="gb-text-dtcallouttitle"] {
	color: var(--dt-accent-ink);
}

.entry-content [class*="gb-element-dtcallout"] a {
	color: var(--dt-accent-ink);
	text-decoration-color: var(--dt-accent-line);
	text-underline-offset: 3px;
}

.entry-content [class*="gb-element-dtcallout"] a:hover {
	text-decoration-color: var(--dt-accent);
}

/* ---- Bloc FAQ (SEOPress) : signe +/× et question active en terre cuite ---- */
.wp-block-wpseopress-faq-block-v2 .wp-block-details > summary::after {
	color: var(--dt-accent);
}

.wp-block-wpseopress-faq-block-v2 .wp-block-details > summary:hover,
.wp-block-wpseopress-faq-block-v2 .wp-block-details[open] > summary {
	color: var(--dt-accent-ink);
}

/* ---- Fiche produit BIFL : en-tête des badges sur le même blanc que le reste
   de la carte (le gris du plugin se confondait avec le fond de page). ---- */
.dt-bifl-badges {
	background: var(--card);
}

.dt-bifl-badge {
	background: rgba(43, 74, 58, .07);
	color: var(--green-2);
}

/* ---- CTA de fin d'article : bloc vert profond de la charte plutôt que le
   rose pâle, avec le bouton en terre cuite. Texte foncé sur le bouton : sur
   #e2662e, du blanc ne fait que 3,1:1 alors que l'encre monte à 6,4:1. ---- */
.dt-blog-cta {
	background: var(--green);
	border-color: transparent;
}

.dt-blog-cta__title {
	color: #fff;
}

.dt-blog-cta__text {
	color: rgba(244, 242, 236, .72);
}

.dt-blog-cta__btn {
	background-color: var(--dt-accent);
	color: var(--ink);
	box-shadow: inset 0 -3px 0 rgba(27, 30, 26, .28);
}

.dt-blog-cta__btn:hover {
	background-color: var(--dt-accent-pale);
	color: var(--ink);
	box-shadow: inset 0 -3px 0 rgba(27, 30, 26, .28);
}