/*
 * Fichier : intemporris-livre-fiche.css
 * Emplacement : designs/intemporris/assets/css/
 *
 * Responsabilité :
 * Habille la fiche détail d'un livre audio : la couverture sur sa dalle, la
 * colonne de lecture, le bloc d'achat et son verre, les onglets, les avis et
 * la bande des recommandations. La charpente du Reader place les blocs ; cette
 * feuille ne pose que la matière, la lumière et les filets.
 *
 * Dépendance :
 *   Cette feuille suit intemporris.css, qui pose les variables du design et
 *   habille déjà les grilles et les cartes.
 *
 * Accent :
 *   L'or des livres audio, comme le catalogue d'où l'on vient.
 *
 * Couleur des lueurs :
 *   Le moteur de palettes sert à la fiche les couleurs tirées de la
 *   couverture. La lumière les emprunte et les mêle à l'accent ; sans
 *   palette, l'accent reprend la main.
 *
 * Accessibilité : WCAG 2.1 niveau AA strict.
 *   - L'ordre de lecture reste celui du balisage : la grille ne fait que
 *     placer.
 *   - Ce qui répond au pointeur répond au focus clavier, par le même signe.
 *   - L'onglet courant porte sa graisse et sa lumière, pas la seule couleur ;
 *     l'étoile acquise porte son trait plein, pas la seule couleur.
 *   - Les champs du formulaire d'avis gardent un contour lisible.
 */

/* Fiche d'un livre audio, habillage Intemporris. */

.woocommerce div.product {
	container: intemporris / inline-size;

	/* L'etoile de la fiche, creuse et pleine. Le dessin tient dans une case
	   un peu plus large que haute : posee bout a bout, elle donne la rangee
	   de cinq etoiles d'une note. */
	--intemporris-etoile-creuse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 24'%3E%3Cpath d='M13 1 15.59 8.44 23.46 8.6 17.19 13.36 19.46 20.9 13 16.4 6.54 20.9 8.81 13.36 2.54 8.6 10.41 8.44Z' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
	--intemporris-etoile-pleine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 24'%3E%3Cpath d='M13 1 15.59 8.44 23.46 8.6 17.19 13.36 19.46 20.9 13 16.4 6.54 20.9 8.81 13.36 2.54 8.6 10.41 8.44Z' fill='%23000'/%3E%3C/svg%3E");
	--intemporris-etoile-case: 1.08em 1em;
	--intemporris-colonne-garde: minmax(0, 1fr);
	--intemporris-signe-information: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10.2' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Ccircle cx='12' cy='7.2' r='1.25' fill='%23000'/%3E%3Cpath d='M12 10.6V17.4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
	--intemporris-etoile-eteinte: color-mix(in srgb, var(--discovery-color-muted, #b3b3b3) 58%, transparent);
	--intemporris-etoile-acquise: linear-gradient(180deg, color-mix(in srgb, var(--intemporris-accent-texte) 70%, var(--discovery-color-text, #ffffff)), var(--intemporris-accent));
}

/* Les blocs de la charpente respirent : un bloc suit le precedent sans
   marge propre, c'est la charpente qui les espace. Les blocs du plugin
   portaient leurs marges quand ils se suivaient dans une colonne unique. */
.abs-charpente-livre .abs-charpente-bloc > .abs-livre-fiche {
	margin-block-end: 0;
}

/* Le moteur de palettes sert ses couleurs a la fiche par une classe posee
   sur div.product, et aux cartes de recommandation par leur attribut style.
   Tout ce qui est a l'interieur en herite : la galerie, le resume, l'ecoute.
   Sans couverture, aucune propriete n'est servie et l'or reprend la main. */

/* La charpente du Reader place les zones : cette feuille ne pose que la
   matiere. La colonne de tete garde la couverture au niveau du titre, et la
   bande recoit les onglets et les recommandations. */

/* La couverture est la pièce de tête de la page : elle est posée sur la
   dalle de verre du design, avec son épaisseur, sa lumière basse et l'éclat
   qui la traverse une fois à l'ouverture. C'est la même matière que la
   grande carte du catalogue : la fiche est la suite de la page d'où l'on
   vient. */
.woocommerce div.product div.images {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: var(--discovery-space-3, 0.75rem);
	border: 0;
	background: none;
}

/* Deux équerres d'or tiennent la couverture, en haut à gauche et en bas à
   droite. Aucun cadre continu : l'image est déjà un objet, elle n'a pas
   besoin d'être mise en boîte. */
.woocommerce div.product div.images::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	background:
		linear-gradient(90deg, var(--intemporris-filet-accent) 0 28%, transparent 28%) top left / 100% 1px no-repeat,
		linear-gradient(180deg, var(--intemporris-filet-accent) 0 22%, transparent 22%) top left / 1px 100% no-repeat,
		linear-gradient(270deg, var(--intemporris-filet-accent) 0 28%, transparent 28%) bottom right / 100% 1px no-repeat,
		linear-gradient(0deg, var(--intemporris-filet-accent) 0 22%, transparent 22%) bottom right / 1px 100% no-repeat;
	pointer-events: none;
}

.woocommerce div.product div.images img {
	box-shadow: var(--intemporris-portee) var(--intemporris-ombre);
}

/* L'éclat : une bande de lumière qui traverse la dalle en biais, blanche sur
   ses bords et dorée en son coeur. Elle passe une fois à l'ouverture de la
   page, puis seulement quand le pointeur vient sur la couverture ou qu'un de
   ses liens reçoit le focus. */
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper::after {
	content: "";
	position: absolute;
	z-index: 2;
	inset: 0;
	background: linear-gradient(104deg, transparent 38%, var(--intemporris-eclat-clair) 47%, var(--intemporris-eclat-or) 50%, var(--intemporris-eclat-clair) 53%, transparent 62%);
	transform: translateX(110%);
	animation: intemporris-eclat-ouverture 6s ease-in-out 1 backwards;
	pointer-events: none;
}

.woocommerce div.product div.images:hover .woocommerce-product-gallery__wrapper::after,
.woocommerce div.product div.images:has(:focus-visible) .woocommerce-product-gallery__wrapper::after {
	animation: intemporris-eclat-ouverture 6s ease-in-out 1 backwards, intemporris-eclat-passage 6s ease-in-out 1 backwards;
}

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

	.woocommerce div.product div.images .woocommerce-product-gallery__wrapper::after {
		display: none;
	}
}

.woocommerce div.product div.images::after {
	content: "";
	position: absolute;
	z-index: 0;
	inset-inline: calc(var(--discovery-space-4, 1rem) * -1);
	inset-block-end: calc(var(--discovery-space-6, 1.5rem) * -1);
	block-size: 9rem;
	background:
		radial-gradient(ellipse 45% 60% at 26% 88%, var(--intemporris-nappe-a), transparent 72%),
		radial-gradient(ellipse 34% 48% at 66% 104%, var(--intemporris-nappe-b), transparent 74%);
	filter: blur(var(--intemporris-nappe-flou));
	animation: intemporris-nappe 26s ease-in-out infinite;
	pointer-events: none;
}

.woocommerce div.product div.images .woocommerce-product-gallery__image {
	position: static;
	z-index: 1;
}

.woocommerce div.product div.images .woocommerce-product-gallery__image > a {
	position: relative;
	z-index: 1;
	display: block;
}

.woocommerce div.product div.images img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: var(--abs-forme-couverture, 1 / 1);
	object-fit: contain;
	border-radius: var(--discovery-radius-sm, 0.25rem);
	background-color: var(--discovery-color-surface, #141414);
}

/* Le bouton qui ouvre la description de l'illustration ne se pose pas sur la
   couverture : rien ne vient sur une image qu'on montre en entier. Il se
   range sous elle, dans la dalle, et prend son libelle en toutes lettres.
   Ce libelle est contenu dans le nom accessible du bouton, qui reste celui
   du theme : « Description de l'illustration de <titre> ». */
.woocommerce div.product .discovery-produit-galerie-description {
	position: relative;
	z-index: 2;
	display: inline-flex;
	margin-block-start: var(--discovery-space-3, 0.75rem);
	/* Le symbole et le libelle n'ont ni la meme taille ni la meme hauteur de
	   ligne : c'est leur ligne de base qui doit s'aligner, pas leur milieu. */
	align-items: baseline;
	gap: var(--discovery-space-2, 0.5rem);
	min-inline-size: 0;
	min-block-size: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--discovery-color-muted, #b3b3b3);
	font-size: var(--discovery-text-xs, 0.75rem);
	text-align: start;
	cursor: pointer;
	transition: color var(--intemporris-duree);
}

.woocommerce div.product .discovery-produit-galerie-description .discovery-dialogue-symbole {
	color: var(--intemporris-accent-texte);
	font-size: var(--discovery-text-sm, 0.875rem);
}

.woocommerce div.product .discovery-produit-galerie-description:hover,
.woocommerce div.product .discovery-produit-galerie-description:focus-visible {
	color: var(--discovery-color-text, #ffffff);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* La description de l'illustration : une petite capsule de verre fumé, au
   lieu d'une ligne posée sous l'image. Elle reste un contrôle, discret, et
   son contour d'or ne paraît qu'au passage. Le contour de focus du thème,
   lui, ne change pas : il doit rester franc. */
.woocommerce div.product .discovery-produit-galerie-description {
	align-items: center;
	min-block-size: 2.25rem;
	padding: 0 var(--discovery-space-4, 1rem);
	border: 1px solid var(--intemporris-filet);
	border-radius: var(--intemporris-rond);
	background: color-mix(in srgb, var(--discovery-color-text, #ffffff) 4%, transparent);
	color: var(--discovery-color-muted, #b3b3b3);
	transition: border-color var(--intemporris-duree), background-color var(--intemporris-duree), color var(--intemporris-duree);
}

.woocommerce div.product .discovery-produit-galerie-description:hover,
.woocommerce div.product .discovery-produit-galerie-description:focus-visible {
	border-color: var(--intemporris-verre-bord);
	background-color: color-mix(in srgb, var(--intemporris-accent) 8%, transparent);
	color: var(--discovery-color-text, #ffffff);
	text-decoration: none;
}

/* Mentions de la couverture, en ourlet sous elle. */
.abs-livre-fiche.abs-fiche-mentions {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--discovery-space-2, 0.5rem);
	margin: 0;
	/* Les mentions sont l'ourlet de la couverture : elles se lisent juste
	   dessous. */
	align-self: start;
	padding-block-start: var(--discovery-space-3, 0.75rem);
	font-size: var(--discovery-text-xs, 0.75rem);
}

.abs-livre-fiche .abs-fiche-mention {
	display: grid;
	grid-template-columns: minmax(0, 7rem) minmax(0, 1fr);
	align-items: baseline;
	overflow-wrap: anywhere;
	gap: var(--discovery-space-3, 0.75rem);
	margin: 0;
	padding-block: var(--discovery-space-3, 0.75rem);
	border-block-end: 1px solid color-mix(in srgb, var(--discovery-color-text, #ffffff) 8%, transparent);
}

.abs-livre-fiche .abs-fiche-mention:last-child {
	border-block-end: 0;
}

/* Colonne de droite
   ======================================================================= */

/* L'espace fait les groupes : aucun filet, aucune surface pour les separer.
   Chaque respiration marque un changement de question, du titre au prix, du
   prix a l'achat, de l'achat a l'ecoute, puis aux renseignements. */
/* Votre achat
   ======================================================================= */

/* Ce que l'on emporte après l'achat se lit sur une plaque de verre fumé, et
   la couleur n'est pas dans la plaque : elle est derrière elle, dans la
   page. La lueur déborde autour de la note, qui paraît alors flotter dans
   l'air de la fiche plutôt que d'être remplie d'un dégradé.

   Le verre reste sombre et presque mat : on perçoit d'abord une profondeur,
   et seulement ensuite qu'il y a du verre. */
.abs-charpente-livre .abs-charpente-bloc-prix_et_achat {
	position: relative;
	isolation: isolate;
}

/* L'ambiance, posée dans la page : une chaleur qui monte du bas à gauche et
   se perd vers le centre, et une ardoise très sombre à l'autre bout, qui la
   rattache à l'enveloppe du site. Elle déborde de la note. */
.abs-charpente-livre .abs-charpente-bloc-prix_et_achat::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset-block: 38% -8%;
	inset-inline: -16% -10%;
	background:
		radial-gradient(ellipse 52% 60% at 6% 96%, color-mix(in srgb, var(--intemporris-accent) 26%, transparent), transparent 72%),
		radial-gradient(ellipse 66% 46% at 34% 72%, color-mix(in srgb, var(--intemporris-accent) 12%, transparent), transparent 74%),
		radial-gradient(ellipse 40% 44% at 94% 38%, color-mix(in srgb, #7e8693 10%, transparent), transparent 74%);
	filter: blur(3.5rem);
	pointer-events: none;
}

.abs-livre-fiche.abs-livre-achat {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: var(--discovery-space-8, 2rem) var(--discovery-space-6, 1.5rem);
	/* Le verre est fumé chaud : la lumière dorée qui passe derrière se devine
	   dans la matière, sans jamais s'y lire comme un dégradé. */
	border: 1px solid color-mix(in srgb, #dabe87 13%, transparent);
	border-radius: var(--intemporris-rayon-grand);
	background: linear-gradient(135deg, color-mix(in srgb, #221f1b 72%, transparent), color-mix(in srgb, #101114 66%, transparent));
	backdrop-filter: blur(1.1rem) saturate(1.15);
	box-shadow: inset 0 1px 0 color-mix(in srgb, #dabe87 16%, transparent);
	color: color-mix(in srgb, var(--discovery-color-muted, #b3b3b3) 96%, var(--discovery-color-text, #ffffff));
	font-size: var(--discovery-text-sm, 0.875rem);
}

/* Une seule portion du contour prend l'or : en haut à gauche, là d'où vient
   la lumière. Le reste du bord garde son gris chaud. */
.abs-livre-fiche.abs-livre-achat::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset-block-start: -1px;
	inset-inline-start: -1px;
	inline-size: 52%;
	block-size: 1px;
	background: linear-gradient(90deg, color-mix(in srgb, #dabe87 34%, transparent), transparent);
	pointer-events: none;
}

.abs-livre-fiche .abs-livre-achat-titre {
	margin: 0 0 var(--discovery-space-3, 0.75rem);
	color: var(--intemporris-accent-texte);
	font-size: var(--discovery-text-xs, 0.75rem);
	font-weight: var(--discovery-weight-semibold, 600);
	letter-spacing: var(--intemporris-approche-etiquette);
	text-transform: uppercase;
}

.abs-livre-fiche.abs-livre-achat p {
	margin: 0 0 var(--discovery-space-3, 0.75rem);
	max-inline-size: 58ch;
}

/* La conclusion : ce qui reste acquis se lit dans la couleur du texte, tenu
   par un filet court. Le reste de la note est d'un ton en dessous : la
   dernière phrase n'a pas besoin d'être plus grande pour être la dernière. */
.abs-livre-fiche.abs-livre-achat p:last-child {
	margin-block-end: 0;
	padding-block-start: var(--discovery-space-3, 0.75rem);
	border-block-start: 1px solid var(--intemporris-filet);
	color: var(--discovery-color-text, #ffffff);
}

/* Choix de la devise
   ======================================================================= */

/* Le prix se lit dans la monnaie du visiteur. Le choix se range sous l'achat,
   en verre fumé : une étiquette en petites capitales, la liste en pilule, et
   le bouton qui l'applique dans la même matière, en retrait. */
.abs-devises-selecteur {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--discovery-space-2, 0.5rem) var(--discovery-space-3, 0.75rem);
	margin-block: 0;
}

.abs-devises-selecteur-libelle {
	margin: 0;
	color: var(--intemporris-accent-texte);
	font-size: var(--discovery-text-xs, 0.75rem);
	letter-spacing: var(--intemporris-approche-etiquette);
	text-transform: uppercase;
}

/* La liste des devises est une capsule de verre : un reflet court le long du
   bord supérieur, un liseré clair fait le tour, et le fond s'éclaircit à
   peine vers le haut. Au passage, le liseré prend l'or. */
.abs-devises-selecteur-liste {
	min-block-size: 2.4rem;
	inline-size: auto;
	max-inline-size: 100%;
	padding-inline: var(--discovery-space-4, 1rem) var(--discovery-space-8, 2rem);
	border: 1px solid color-mix(in srgb, var(--discovery-color-text, #ffffff) 16%, transparent);
	border-radius: var(--intemporris-rond);
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--discovery-color-text, #ffffff) 10%, transparent), transparent 46%),
		var(--intemporris-verre-fume);
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, var(--discovery-color-text, #ffffff) 22%, transparent),
		inset 0 -1px 0 var(--intemporris-biseau-sombre);
	color: var(--discovery-color-text, #ffffff);
	font-size: var(--discovery-text-sm, 0.875rem);
	transition: border-color var(--intemporris-duree), box-shadow var(--intemporris-duree);
}

.abs-devises-selecteur-liste:hover,
.abs-devises-selecteur-liste:focus-visible {
	border-color: var(--intemporris-verre-bord);
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, var(--discovery-color-text, #ffffff) 26%, transparent),
		inset 0 -1px 0 var(--intemporris-biseau-sombre),
		0 0 var(--discovery-space-8, 2rem) var(--intemporris-verre-halo);
}

/* Le bouton qui applique la devise est de la même famille que la capsule,
   avec un liseré d'or tenu bas : il a sa présence au repos, et il s'éclaire
   au passage sans jamais prendre la place du panier. */
.abs-devises-selecteur .abs-devises-selecteur-bouton.button {
	min-block-size: 2.4rem;
	padding-inline: var(--discovery-space-5, 1.25rem);
	border: 1px solid var(--intemporris-filet-accent);
	border-radius: var(--intemporris-rond);
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--discovery-color-text, #ffffff) 10%, transparent), transparent 46%),
		color-mix(in srgb, var(--intemporris-accent) 8%, var(--intemporris-verre-fume));
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, var(--discovery-color-text, #ffffff) 22%, transparent),
		inset 0 -1px 0 var(--intemporris-biseau-sombre);
	color: var(--discovery-color-text, #ffffff);
	font-size: var(--discovery-text-sm, 0.875rem);
	transition: border-color var(--intemporris-duree), background-color var(--intemporris-duree), box-shadow var(--intemporris-duree);
}

.abs-devises-selecteur .abs-devises-selecteur-bouton.button:hover,
.abs-devises-selecteur .abs-devises-selecteur-bouton.button:focus-visible {
	border-color: var(--intemporris-verre-bord-vif);
	background-color: color-mix(in srgb, var(--intemporris-accent) 16%, transparent);
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, var(--discovery-color-text, #ffffff) 26%, transparent),
		inset 0 -1px 0 var(--intemporris-biseau-sombre),
		0 0 var(--discovery-space-8, 2rem) var(--intemporris-verre-halo-vif);
}

/* Le livre qui n'est pas vendu dans cette monnaie le dit juste au-dessus du
   choix de la devise : une plaque courte, du verre du bloc d'achat, avec une
   lueur tenue derriere son bord gauche. Ce n'est pas une alerte, et cela ne
   prend pas la forme d'une alerte : le livre s'achete, dans une autre
   monnaie, et le moyen d'y aller est juste dessous. */
.abs-devises-indisponible {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-start;
	gap: var(--discovery-space-3, 0.75rem);
	margin: 0;
	padding: var(--discovery-space-4, 1rem);
	border: 1px solid color-mix(in srgb, var(--intemporris-accent) 22%, transparent);
	border-radius: var(--intemporris-rayon);
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--discovery-color-text, #ffffff) 6%, transparent), transparent 40%),
		color-mix(in srgb, var(--discovery-color-background, #000000) 42%, transparent);
	backdrop-filter: blur(0.5rem) saturate(1.04);
	color: color-mix(in srgb, var(--discovery-color-text, #ffffff) 86%, var(--discovery-color-muted, #b3b3b3));
	font-size: var(--discovery-text-sm, 0.875rem);
	line-height: 1.55;
	text-wrap: pretty;
}

/* La lueur ne fait pas le tour : elle tient derriere le bord gauche, et la
   plaque semble posee dans le courant plutot que collee dessus. */
.abs-devises-indisponible::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset-block: -25%;
	inset-inline-start: -8%;
	inline-size: 55%;
	background: radial-gradient(ellipse 60% 70% at 12% 50%, var(--intemporris-verre-halo), transparent 72%);
	filter: blur(1rem);
	pointer-events: none;
}

/* Le signe tient la marge de gauche. Il est dessine, pas ecrit : le sens est
   dans la phrase, et une voix de synthese n'a rien a annoncer de plus. */
.abs-devises-indisponible::before {
	content: "";
	flex: none;
	inline-size: 1.25rem;
	block-size: 1.25rem;
	margin-block-start: 0.1rem;
}

@supports (mask-image: url("")) or (-webkit-mask-image: url("")) {

	.abs-devises-indisponible::before {
		background-color: var(--intemporris-accent-texte);
		-webkit-mask-image: var(--intemporris-signe-information);
		mask-image: var(--intemporris-signe-information);
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-position: center;
		mask-position: center;
		-webkit-mask-size: contain;
		mask-size: contain;
	}
}

/* L'annonce et le choix de la devise forment une seule sequence : le constat,
   puis le moyen d'en sortir. Le bloc se resserre autour des deux. */
.abs-charpente-livre .abs-charpente-bloc-prix_et_achat:has(.abs-devises-indisponible) {
	gap: var(--discovery-space-4, 1rem);
}

.abs-charpente-livre .abs-charpente-bloc-prix_et_achat:has(.abs-devises-indisponible) .abs-devises-selecteur {
	margin-block: 0;
}

/* Composition de la page
   ======================================================================= */

/* Les proportions : la charpente partage la page en deux moitiés égales, ce
   qui donne à la couverture plus de place qu'elle n'en demande et comprime
   la colonne de lecture. La fiche reprend les proportions d'une page de
   livre : une colonne de garde pour l'objet, une colonne large pour ce qui
   se lit. L'ordre des blocs, lui, appartient à la charpente. */
@container intemporris (min-width: 48rem) {

	.abs-charpente-livre.abs-charpente-colonnes {
		grid-template-columns: var(--intemporris-colonne-garde) minmax(0, 1fr);
		column-gap: var(--discovery-space-12, 3rem);
	}
}

/* La brume : la fiche cesse d'être posée sur un noir sans fond. Trois masses
   très sombres tirées de l'accent se tiennent derrière la page, fixées à la
   fenêtre. Elles ne portent aucun texte et rien ne bouge au repos. */
.woocommerce div.product::before {
	content: "";
	position: fixed;
	z-index: -1;
	inset: 0;
	background:
		radial-gradient(ellipse 70% 55% at 12% 8%, color-mix(in srgb, var(--intemporris-accent) 12%, transparent), transparent 70%),
		radial-gradient(ellipse 60% 50% at 88% 34%, color-mix(in srgb, var(--intemporris-accent) 7%, transparent), transparent 72%),
		radial-gradient(ellipse 90% 45% at 50% 104%, color-mix(in srgb, var(--intemporris-accent) 9%, transparent), transparent 74%);
	pointer-events: none;
}

/* Les onglets ferment leur partie par un filet, et l'air qui suit tient ce
   qui vient à distance. Le filet est porté par le bloc des onglets lui-même :
   il paraît quel que soit le bloc qui suit, et même si celui-ci est vide. */
.abs-charpente-livre .abs-charpente-bloc-onglets {
	padding-block-end: var(--discovery-space-12, 3rem);
	background: linear-gradient(90deg, var(--intemporris-filet), var(--intemporris-filet-accent) 26%, var(--intemporris-filet) 62%, var(--intemporris-filet)) bottom / 100% 1px no-repeat;
}

.abs-charpente-livre .abs-charpente-bloc-onglets + .abs-charpente-bloc {
	margin-block-start: var(--discovery-space-10, 2.5rem);
}

/* La bande qui porte les onglets et les recommandations se détache par un
   filet traversé de lumière, jumeau de celui de l'enveloppe du site. */
.abs-charpente-livre .abs-charpente-zone-bande:first-of-type {
	border-block-start: 0;
	padding-block-start: var(--discovery-space-10, 2.5rem);
	background: linear-gradient(90deg, var(--intemporris-filet), var(--intemporris-filet-accent) 30%, var(--intemporris-filet) 65%, var(--intemporris-filet)) top / 100% 1px no-repeat;
}

@media (prefers-contrast: more) {

	.woocommerce div.product::before {
		display: none;
	}
}

/* La charpente empile les blocs de chaque colonne et les espace d'une même
   valeur. La feuille ne change que les respirations qui portent un sens :
   ce qui se lit d'un trait reste serré, ce qui demande une décision prend
   de l'air. */
.abs-charpente-livre .abs-charpente-bloc > * {
	margin: 0;
}

.abs-charpente-livre .abs-charpente-bloc + :is(.abs-charpente-bloc-titre, .abs-charpente-bloc-intro, .abs-charpente-bloc-notation) {
	margin-block-start: var(--discovery-space-3, 0.75rem);
}

.abs-charpente-livre .abs-charpente-bloc + .abs-charpente-bloc-personnes {
	margin-block-start: var(--discovery-space-6, 1.5rem);
}

.abs-charpente-livre .abs-charpente-bloc + .abs-charpente-bloc-prix_et_achat {
	margin-block-start: var(--discovery-space-12, 3rem);
}

/* Le prix, la carte du format, le choix de la devise et la note d'achat se
   suivent dans un même bloc. Les intervalles sont portés par le bloc : ses
   enfants ont leurs marges remises à zéro, et un espacement posé sur l'un
   d'eux resterait sans effet. */
.abs-charpente-livre .abs-charpente-bloc-prix_et_achat {
	display: flex;
	flex-direction: column;
	gap: var(--discovery-space-8, 2rem);
}

/* La note d'achat se détache un peu plus : elle ferme la zone. */
.abs-charpente-livre .abs-charpente-bloc-prix_et_achat > .abs-livre-achat {
	margin-block-start: var(--discovery-space-3, 0.75rem);
}

.abs-charpente-livre .abs-charpente-bloc-ecoute {
	margin-block-start: var(--discovery-space-12, 3rem);
}

/* Le bandeau des renseignements se détache de ce qui le précède par un petit
   espace, pas par un blanc : de quoi respirer, sans couper la page en deux. */
.abs-charpente-livre .abs-charpente-bloc + :is(.abs-charpente-bloc-identifiant, .abs-charpente-bloc-renseignements) {
	margin-block-start: var(--discovery-space-8, 2rem);
}

/* La marque editrice, en surtitre, precedee du filet. */
.abs-livre-fiche.abs-livre-marque {
	display: flex;
	align-items: center;
	gap: var(--discovery-space-3, 0.75rem);
	font-size: var(--discovery-text-xs, 0.75rem);
	letter-spacing: var(--intemporris-approche-etiquette);
	color: var(--intemporris-accent-texte);
}

.abs-livre-fiche.abs-livre-marque::before {
	content: "";
	flex: none;
	inline-size: var(--discovery-space-8, 2rem);
	block-size: var(--intemporris-filet-epaisseur);
	background-color: var(--intemporris-accent);
	box-shadow: 0 0 var(--discovery-space-2, 0.5rem) var(--intemporris-halo);
}

.abs-livre-fiche.abs-livre-marque a {
	color: inherit;
	text-decoration-color: var(--intemporris-filet-accent);
	text-underline-offset: 0.2em;
}

/* L'échelle de la page tient en quatre niveaux : le titre, le prix, les
   textes courants, les étiquettes. Chacun garde sa part, et aucun ne grossit
   pour compenser un vide : c'est l'espace qui sépare, pas la taille. */
.woocommerce div.product .product_title {
	font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem);
	font-weight: var(--discovery-weight-bold, 700);
	letter-spacing: var(--intemporris-approche-titre);
	line-height: 1.05;
	text-wrap: balance;
}

.abs-livre-fiche .abs-fiche-sous-titre {
	font-size: var(--discovery-text-lg, 1.125rem);
	color: var(--discovery-color-muted, #b3b3b3);
}

.abs-livre-fiche .abs-fiche-serie a,
.abs-livre-fiche .abs-role-personnes a {
	color: var(--discovery-color-text, #ffffff);
	text-decoration-line: underline;
	text-decoration-color: var(--intemporris-filet-accent);
	text-underline-offset: 0.2em;
	transition: text-decoration-color var(--intemporris-duree);
}

.abs-livre-fiche .abs-fiche-serie a:hover,
.abs-livre-fiche .abs-fiche-serie a:focus-visible,
.abs-livre-fiche .abs-role-personnes a:hover,
.abs-livre-fiche .abs-role-personnes a:focus-visible {
	text-decoration-color: var(--intemporris-accent);
}

/* Personnes creditees : une ligne par role. */
/* Le Reader range les rôles en deux colonnes, étiquette et noms, chaque rôle
   en display: contents. La fiche les remet l'un sous l'autre : l'écriture et
   la voix ne se lisent pas côte à côte, et un rôle qui compte plusieurs
   personnes garderait mal sa colonne. */
.abs-livre-fiche .abs-fiche-personnes {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--discovery-space-4, 1rem);
	margin: 0;
	font-size: var(--discovery-text-base, 1rem);
}

/* Un rôle par ligne : l'écriture et la voix ne se lisent pas l'une à côté de
   l'autre. L'étiquette tient au-dessus, en petites capitales, et les noms
   suivent. Quand un rôle en compte plusieurs, les noms restent sur la même
   ligne, séparés par la ponctuation que le Reader écrit lui-même, et se
   replient au besoin sur la ligne suivante. */
.abs-livre-fiche .abs-role {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--discovery-space-1, 0.25rem);
	margin: 0;
}

.abs-livre-fiche .abs-role-libelle {
	font-weight: var(--discovery-weight-normal, 400);
	color: var(--discovery-color-muted, #b3b3b3);
	font-size: var(--discovery-text-xs, 0.75rem);
	letter-spacing: var(--intemporris-approche-etiquette);
	text-transform: uppercase;
}

.abs-livre-fiche .abs-role-personnes {
	display: block;
	margin: 0;
}

.abs-livre-fiche .abs-personnes-plus {
	color: var(--intemporris-accent-texte);
}

/* Prix. */
.woocommerce div.product p.price {
	font-size: clamp(1.6rem, 1.2rem + 1.1vw, 2rem);
	font-weight: var(--discovery-weight-bold, 700);
	font-variant-numeric: tabular-nums;
	color: var(--intemporris-accent-texte);
	line-height: 1.1;
}

.woocommerce div.product p.price .woocommerce-price-suffix {
	font-size: var(--discovery-text-xs, 0.75rem);
	font-weight: var(--discovery-weight-normal, 400);
	color: var(--discovery-color-muted, #b3b3b3);
}

/* Identifiant, en petit, sous le prix. */
.abs-livre-fiche.abs-livre-isbn {
	gap: var(--discovery-space-2, 0.5rem);
	font-variant-numeric: tabular-nums;
}

/* Annonce d'indisponibilite : un encart borde, non une alerte. */
.abs-livre-fiche.abs-livre-indisponible {
	inline-size: 100%;
	padding: var(--discovery-space-4, 1rem);
	border: 1px solid var(--intemporris-filet-accent);
	border-radius: var(--intemporris-rayon);
	background:
		radial-gradient(ellipse 60% 120% at 12% 120%, var(--intemporris-nappe-b), transparent 70%),
		var(--discovery-color-surface, #141414);
}

/* Les deux commandes sont deux façons de faire la même chose, pas deux
   appels concurrents : elles s'empilent à une largeur commune, alignées à
   gauche. Rien ne les encadre : les boutons appartiennent au lecteur, et le
   design ne pose autour d'eux qu'une réaction au passage. */
/* Chaque commande prend la largeur de son intitule : elles se rangent cote a
   cote quand la colonne le permet, l'une sous l'autre sinon. */
.abs-livre-fiche .abs-livre-ecoute-commandes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--discovery-space-2, 0.5rem);
	margin-block-start: var(--discovery-space-3, 0.75rem);
}

.abs-livre-fiche .abs-livre-ecoute-commandes .gp-bouton,
.abs-livre-fiche .abs-livre-ecoute-commandes .gp-bouton__declencheur {
	inline-size: auto;
	justify-content: center;
}

/* Ecoute. */
.abs-livre-fiche.abs-livre-ecoute {
	inline-size: 100%;
	margin: 0;
	padding-block-start: var(--discovery-space-2, 0.5rem);
}

.abs-livre-fiche .abs-livre-ecoute-titre {
	display: flex;
	align-items: center;
	gap: var(--discovery-space-3, 0.75rem);
	margin: 0 0 var(--discovery-space-3, 0.75rem);
	font-size: var(--discovery-text-xs, 0.75rem);
	letter-spacing: var(--intemporris-approche-etiquette);
	color: var(--intemporris-accent-texte);
}

.abs-livre-fiche .abs-livre-ecoute-titre::before {
	content: "";
	flex: none;
	inline-size: var(--discovery-space-8, 2rem);
	block-size: var(--intemporris-filet-epaisseur);
	background-color: var(--intemporris-accent);
}

/* Renseignements : paires etiquette et valeur, sur deux colonnes des qu'il
   y a la place. */
/* Dans les onglets, les renseignements restent des paires en colonne. */
.abs-livre-fiche .abs-livre-onglet .abs-livre-renseignements {
	display: grid;
	gap: 0;
	inline-size: 100%;
	margin: 0;
	font-size: var(--discovery-text-sm, 0.875rem);
}

.abs-livre-fiche .abs-livre-onglet .abs-livre-renseignement {
	display: grid;
	grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
	gap: var(--discovery-space-3, 0.75rem);
	margin: 0;
	padding-block: var(--discovery-space-4, 1rem);
	border-block-end: 1px solid color-mix(in srgb, var(--discovery-color-text, #ffffff) 8%, transparent);
}

/* Sur la fiche, ils forment un bandeau : la valeur d'abord, son etiquette
   dessous, et un filet vertical entre deux mesures. */
/* La ligne des données : le Reader la range déjà sur une seule ligne, chaque
   paire dans sa colonne, l'étiquette au-dessus de la valeur, avec un filet
   entre deux colonnes voisines. La feuille ne touche donc pas à sa
   structure : elle lui donne la matière du design, ses filets et son
   silence. */
.abs-charpente-bloc-renseignements .abs-livre-renseignements {
	margin: 0;
	padding-block: var(--discovery-space-6, 1.5rem);
	border-block: 1px solid var(--intemporris-filet);
	font-size: var(--discovery-text-xs, 0.75rem);
}

.abs-charpente-bloc-renseignements .abs-livre-renseignements dt {
	color: var(--discovery-color-muted, #b3b3b3);
	font-size: var(--discovery-text-xs, 0.75rem);
	letter-spacing: var(--intemporris-approche-etiquette);
	text-transform: uppercase;
}

.abs-charpente-bloc-renseignements .abs-livre-renseignements dd {
	color: var(--discovery-color-text, #ffffff);
	font-size: var(--discovery-text-sm, 0.875rem);
	font-weight: var(--discovery-weight-semibold, 600);
	line-height: var(--discovery-line-tight, 1.2);
}

/* Le filet qui sépare deux colonnes voisines prend la couleur du design. */
.abs-charpente-bloc-renseignements .abs-livre-renseignements .abs-livre-renseignement:not(:first-child) dt,
.abs-charpente-bloc-renseignements .abs-livre-renseignements .abs-livre-renseignement:not(:first-child) dd {
	border-inline-start-color: var(--intemporris-filet);
}


.abs-livre-fiche .abs-livre-renseignement dt,
.abs-livre-fiche .abs-fiche-mention dt {
	color: var(--discovery-color-muted, #b3b3b3);
}

/* Onglets du livre
   ======================================================================= */

.woocommerce div.product .woocommerce-tabs {
	margin-block-start: var(--discovery-space-20, 5rem);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--discovery-space-1, 0.25rem);
	margin: 0 0 var(--discovery-space-6, 1.5rem);
	padding: var(--discovery-space-1, 0.25rem);
	border: 1px solid var(--intemporris-filet);
	border-radius: var(--intemporris-rond);
	background-color: var(--discovery-color-surface, #141414);
	list-style: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--intemporris-cible);
	padding: 0 var(--discovery-space-5, 1.25rem);
	border: 1px solid transparent;
	border-radius: var(--intemporris-rond);
	color: var(--discovery-color-muted, #b3b3b3);
	font-weight: var(--discovery-weight-semibold, 600);
	text-decoration: none;
	transition: color var(--intemporris-duree), border-color var(--intemporris-duree), background-color var(--intemporris-duree);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	border-color: var(--intemporris-filet-accent);
	color: var(--discovery-color-text, #ffffff);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: none;
	border-color: transparent;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	border-color: var(--intemporris-accent);
	background-color: var(--intemporris-voile);
	color: var(--discovery-color-text, #ffffff);
}

/* Le panneau garde une hauteur de base, même quand son contenu tient en
   trois lignes : la page ne saute pas d'un onglet à l'autre, et un panneau
   court ne laisse pas un grand vide éclairé avant la suite. Au-delà, il
   s'allonge autant qu'il faut. */
.woocommerce div.product .woocommerce-Tabs-panel {
	min-block-size: 14rem;
	margin-block-start: var(--discovery-space-8, 2rem);
	padding-block-end: var(--discovery-space-4, 1rem);
}

.woocommerce div.product .woocommerce-Tabs-panel p + p {
	margin-block-start: var(--discovery-space-5, 1.25rem);
}

.woocommerce div.product .woocommerce-Tabs-panel > h2,
.abs-livre-fiche .abs-livre-onglet-titre {
	margin: 0 0 var(--discovery-space-4, 1rem);
	font-size: var(--discovery-text-xl, 1.25rem);
	letter-spacing: var(--intemporris-approche-titre);
}

.woocommerce div.product .woocommerce-Tabs-panel p {
	line-height: var(--discovery-line-loose, 1.75);
}

/* Equipe : une ligne par membre. */
.abs-livre-fiche .abs-livre-membre {
	display: grid;
	gap: var(--discovery-space-2, 0.5rem);
	margin: 0;
	padding-block: var(--discovery-space-5, 1.25rem);
	border-block-end: 1px solid color-mix(in srgb, var(--discovery-color-text, #ffffff) 8%, transparent);
	border-bottom-color: color-mix(in srgb, var(--discovery-color-text, #ffffff) 8%, transparent);
}

.abs-livre-fiche .abs-livre-membre-role {
	font-size: var(--discovery-text-xs, 0.75rem);
	letter-spacing: var(--intemporris-approche-etiquette);
	text-transform: uppercase;
	color: var(--discovery-color-muted, #b3b3b3);
}

.abs-livre-fiche .abs-livre-membre-nom a {
	color: var(--discovery-color-text, #ffffff);
	text-decoration-color: var(--intemporris-filet-accent);
	text-underline-offset: 0.2em;
}

/* Autres versions : la notice, resserrée.

   Rien n'est ajouté : ni carte, ni grille, ni symbole. La notice se contente
   de respirer un peu moins, pour que « À découvrir aussi » se lise comme la
   suite de la fiche et non comme une autre page. Le titre garde son filet
   d'or, plus fin au repos, plus net au passage. La liste reste dessinée pour
   plusieurs versions : chacune porte son filet, la dernière n'en a pas. */
.abs-livre-fiche.abs-livre-onglet-abs-versions,
.abs-livre-fiche .abs-livre-entrees {
	max-inline-size: 52rem;
}

.abs-livre-fiche .abs-livre-entree {
	padding-block: var(--discovery-space-4, 1rem);
	gap: var(--discovery-space-1, 0.25rem);
}

.abs-livre-fiche .abs-livre-entree:last-child {
	padding-block-end: 0;
	border-block-end: 0;
}

.abs-livre-fiche .abs-livre-entree-titre a {
	text-decoration: none;
	box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--intemporris-accent) 30%, transparent);
	transition: box-shadow var(--intemporris-duree);
}

.abs-livre-fiche .abs-livre-entree-titre a:hover,
.abs-livre-fiche .abs-livre-entree-titre a:focus-visible {
	box-shadow: inset 0 -1px 0 var(--intemporris-verre-bord-vif);
}

/* Autres versions, seconde manière : chaque version devient un rang que la
   lumière souligne au passage.

   Le dessin ne change pas : mêmes titres, mêmes précisions, mêmes filets.
   Mais le rang tout entier répond quand la main s'en approche, et pas
   seulement le titre : la version se comporte alors comme une entrée que
   l'on peut suivre, ce qu'elle est. */
.abs-livre-fiche .abs-livre-entree {
	position: relative;
	isolation: isolate;
	padding-inline: var(--discovery-space-4, 1rem);
	margin-inline: calc(var(--discovery-space-4, 1rem) * -1);
	border-radius: var(--intemporris-rayon);
	transition: background-color var(--intemporris-duree);
}

.abs-livre-fiche .abs-livre-entree::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset-block: auto 0;
	inset-inline: var(--discovery-space-4, 1rem);
	block-size: 1px;
	background: linear-gradient(90deg, var(--intemporris-filet-accent), transparent 70%);
	opacity: 0;
	transition: opacity var(--intemporris-duree);
	pointer-events: none;
}

.abs-livre-fiche .abs-livre-entree:hover,
.abs-livre-fiche .abs-livre-entree:focus-within {
	background-color: color-mix(in srgb, var(--discovery-color-text, #ffffff) 3%, transparent);
}

.abs-livre-fiche .abs-livre-entree:hover::before,
.abs-livre-fiche .abs-livre-entree:focus-within::before {
	opacity: 1;
}

/* Recommandations
   ======================================================================= */

.abs-livre-fiche.abs-livre-recommandations {
	margin-block-start: var(--discovery-space-20, 5rem);
}

.abs-livre-fiche .abs-livre-recommandations-titre {
	display: flex;
	align-items: center;
	gap: var(--discovery-space-3, 0.75rem);
	margin: 0 0 var(--discovery-space-6, 1.5rem);
	font-size: var(--discovery-text-xl, 1.25rem);
	letter-spacing: var(--intemporris-approche-titre);
}

.abs-livre-fiche .abs-livre-recommandations-titre::before {
	content: "";
	flex: none;
	inline-size: var(--discovery-space-8, 2rem);
	block-size: var(--intemporris-filet-epaisseur);
	background-color: var(--intemporris-accent);
	box-shadow: 0 0 var(--discovery-space-2, 0.5rem) var(--intemporris-halo);
}


/* Notation, quand le livre en a une. Les etoiles viennent de la police de
   WooCommerce ; la feuille ne fait que leur donner la teinte. */
.woocommerce div.product .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: var(--discovery-space-3, 0.75rem);
	font-size: var(--discovery-text-sm, 0.875rem);
}

.woocommerce div.product .woocommerce-product-rating .star-rating {
	color: var(--intemporris-accent-texte);
}

.woocommerce div.product .woocommerce-review-link {
	color: var(--discovery-color-muted, #b3b3b3);
	text-underline-offset: 0.2em;
}

/* Achat : la seule action pleine de la page. */
.woocommerce div.product form.cart {
	display: grid;
	gap: var(--discovery-space-4, 1rem);
	margin: 0;
	padding: var(--discovery-space-5, 1.25rem);
	border: 1px solid var(--intemporris-filet);
	border-radius: var(--intemporris-rayon);
	background:
		radial-gradient(ellipse 55% 120% at 10% 120%, var(--intemporris-nappe-b), transparent 70%),
		linear-gradient(180deg, var(--intemporris-dalle-haut), var(--intemporris-dalle-bas) 55%, var(--intemporris-dalle-bas));
}

.woocommerce div.product form.cart table.variations {
	display: grid;
	gap: var(--discovery-space-2, 0.5rem);
	inline-size: 100%;
	margin: 0;
	border: 0;
}

.woocommerce div.product form.cart table.variations tbody,
.woocommerce div.product form.cart table.variations tr {
	display: contents;
}

.woocommerce div.product form.cart table.variations th.label,
.woocommerce div.product form.cart table.variations td.value {
	display: block;
	padding: 0;
	border: 0;
	text-align: start;
}

.woocommerce div.product form.cart table.variations th.label label {
	margin: 0;
	font-size: var(--discovery-text-xs, 0.75rem);
	font-weight: var(--discovery-weight-semibold, 600);
	letter-spacing: var(--intemporris-approche-etiquette);
	text-transform: uppercase;
	color: var(--discovery-color-muted, #b3b3b3);
}

/* Le selecteur de format et le bouton d'achat forment une meme famille :
   meme largeur, meme hauteur, meme rayon. La pilule s'etire au lieu de
   flotter a gauche d'un bouton pleine largeur. */
.woocommerce div.product form.cart table.variations td.value {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--discovery-space-4, 1rem);
}

.woocommerce div.product form.cart table.variations td.value select {
	inline-size: 100%;
	min-inline-size: 0;
	min-block-size: 3.25rem;
	padding-inline: var(--discovery-space-5, 1.25rem) var(--discovery-space-10, 2.5rem);
	border-radius: var(--intemporris-forme-achat, var(--intemporris-rayon-grand));
	background-position:
		calc(100% - var(--discovery-space-5, 1.25rem) - 0.3rem) 55%,
		calc(100% - var(--discovery-space-5, 1.25rem)) 55%;
	font-size: var(--discovery-text-base, 1rem);
}

.woocommerce div.product form.cart .reset_variations {
	font-size: var(--discovery-text-sm, 0.875rem);
	color: var(--discovery-color-muted, #b3b3b3);
	text-underline-offset: 0.2em;
}

.woocommerce div.product form.cart .woocommerce-variation-description p {
	margin: 0;
	font-size: var(--discovery-text-sm, 0.875rem);
	color: var(--discovery-color-muted, #b3b3b3);
}

.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--discovery-space-3, 0.75rem);
}

.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
	align-items: stretch;
}

.woocommerce div.product form.cart .single_add_to_cart_button {
	inline-size: 100%;
	min-block-size: 3.25rem;
	padding-inline: var(--discovery-space-8, 2rem);
	border: 1px solid var(--intemporris-accent-texte);
	border-radius: var(--intemporris-forme-achat, var(--intemporris-rayon-grand));
	background-color: var(--intemporris-accent-texte);
	color: var(--intemporris-sur-accent);
	font-size: var(--discovery-text-base, 1rem);
	font-weight: var(--discovery-weight-bold, 700);
	transition: box-shadow var(--intemporris-duree);
}


.woocommerce div.product form.cart .single_add_to_cart_button:hover {
	box-shadow:
		0 0 0 var(--discovery-space-1, 0.25rem) var(--intemporris-voile),
		0 0 var(--discovery-space-8, 2rem) var(--intemporris-halo);
}

/* Autres versions : une ligne par edition. */
.abs-livre-fiche .abs-livre-entree {
	display: grid;
	gap: var(--discovery-space-2, 0.5rem);
	margin: 0;
	padding-block: var(--discovery-space-5, 1.25rem);
	border-block-end: 1px solid color-mix(in srgb, var(--discovery-color-text, #ffffff) 8%, transparent);
	border-bottom-color: color-mix(in srgb, var(--discovery-color-text, #ffffff) 8%, transparent);
}

.abs-livre-fiche .abs-livre-entree-titre {
	font-size: var(--discovery-text-lg, 1.125rem);
	font-weight: var(--discovery-weight-semibold, 600);
}

.abs-livre-fiche .abs-livre-entree-precisions {
	font-size: var(--discovery-text-xs, 0.75rem);
	color: var(--discovery-color-muted, #b3b3b3);
}

.abs-livre-fiche .abs-livre-entree-titre a {
	color: var(--discovery-color-text, #ffffff);
	text-decoration-color: var(--intemporris-filet-accent);
	text-underline-offset: 0.2em;
}

/* Avis
   ======================================================================= */

/* L'onglet tient deux moments : les avis deja ecrits, et celui qu'on ecrit.
   Les premiers sont tenus par une plaque de verre dormant, le second par la
   plaque vive du formulaire. Le titre de la section et la mention d'absence
   d'avis appartiennent a la page et restent sur le noir. */

.woocommerce div.product .woocommerce-Reviews-title {
	margin: 0;
	font-size: var(--discovery-text-xl, 1.25rem);
	letter-spacing: var(--intemporris-approche-titre);
}

.woocommerce div.product .woocommerce-Reviews-title span {
	color: var(--discovery-color-muted, #b3b3b3);
	font-weight: var(--discovery-weight-normal, 400);
}

.woocommerce div.product .woocommerce-noreviews {
	margin-block-end: var(--discovery-space-8, 2rem);
	color: var(--discovery-color-muted, #b3b3b3);
}

.woocommerce div.product #reviews #comments .commentlist {
	display: grid;
	gap: var(--discovery-space-4, 1rem);
	max-inline-size: 58rem;
	margin: var(--discovery-space-8, 2rem) 0 0;
	padding: 0;
	list-style: none;
}

/* Le verre d'un avis est plus sombre et plus mat que celui des actions : il
   se lit, il ne s'actionne pas. Une lueur bronze dort a son pied et se leve
   a peine au passage. */
.woocommerce div.product #reviews #comments .commentlist li.review {
	position: relative;
	isolation: isolate;
	margin: 0;
	padding: var(--discovery-space-5, 1.25rem) var(--discovery-space-6, 1.5rem);
	border: 1px solid color-mix(in srgb, var(--discovery-color-text, #ffffff) 10%, var(--intemporris-filet));
	border-radius: var(--intemporris-rayon-grand);
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--discovery-color-text, #ffffff) 5%, transparent), transparent 46%),
		var(--intemporris-verre-fume);
	backdrop-filter: blur(var(--intemporris-verre-flou)) saturate(1.02);
	list-style: none;
	transition: border-color var(--intemporris-duree);
}

.woocommerce div.product #reviews #comments .commentlist li.review::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset-inline: 0;
	inset-block-end: -1rem;
	block-size: 5rem;
	background: radial-gradient(ellipse 50% 70% at 20% 100%, var(--intemporris-verre-halo), transparent 74%);
	filter: blur(1rem);
	opacity: 0.55;
	transition: opacity var(--intemporris-duree);
	pointer-events: none;
}

/* Le filet d'or dit que la carte est sous la main : au passage du pointeur,
   et de la meme facon quand ce qu'elle contient prend le focus au clavier. */
.woocommerce div.product #reviews #comments .commentlist li.review:has(:focus-visible) {
	border-color: var(--intemporris-filet-accent);
}

.woocommerce div.product #reviews #comments .commentlist li.review:has(:focus-visible)::after {
	opacity: 1;
}

@media (hover: hover) {

	.woocommerce div.product #reviews #comments .commentlist li.review:hover {
		border-color: var(--intemporris-filet-accent);
	}

	.woocommerce div.product #reviews #comments .commentlist li.review:hover::after {
		opacity: 1;
	}
}

.woocommerce div.product #reviews #comments .commentlist .comment_container {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: var(--discovery-space-4, 1rem);
	align-items: start;
}

/* Le portrait, quand il y en a un, prend une colonne a lui. */
.woocommerce div.product #reviews #comments .commentlist .comment_container:has(img.avatar) {
	grid-template-columns: auto minmax(0, 1fr);
}

/* Le portrait reste petit et rond : il situe la personne, il ne la met pas
   en vitrine. */
.woocommerce div.product #reviews #comments .commentlist img.avatar {
	position: static;
	float: none;
	padding: 0;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	margin: 0;
	border: 1px solid var(--intemporris-filet);
	border-radius: 50%;
	background-color: var(--discovery-color-surface, #141414);
	object-fit: cover;
}

/* Une seule ligne d'entete : le nom et la date a gauche, la note a droite ;
   le texte de l'avis passe dessous, aligne sur le nom. La grille place, le
   balisage garde son ordre. */
.woocommerce div.product #reviews #comments .commentlist .comment-text {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: var(--discovery-space-4, 1rem);
	row-gap: var(--discovery-space-3, 0.75rem);
	align-items: baseline;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
}

.woocommerce div.product #reviews #comments .commentlist p.meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--discovery-space-2, 0.5rem);
	grid-column: 1;
	grid-row: 1;
	margin: 0;
	font-size: var(--discovery-text-sm, 0.875rem);
}

/* La note prend l'or : c'est un jugement, pas un ornement. L'etoile non
   acquise garde son trait gris, pour que la note ne tienne pas a la seule
   couleur. */
.woocommerce div.product #reviews #comments .commentlist .star-rating {
	grid-column: 2;
	grid-row: 1;
	justify-self: end;
	float: none;
	margin: 0;
	color: var(--intemporris-accent-texte);
}

.woocommerce div.product #reviews #comments .commentlist .star-rating::before {
	color: color-mix(in srgb, var(--discovery-color-muted, #b3b3b3) 55%, transparent);
	opacity: 1;
}

.woocommerce div.product #reviews #comments .commentlist .description {
	grid-column: 1 / -1;
	grid-row: 2;
}

.woocommerce div.product #reviews #comments .commentlist .woocommerce-review__author {
	font-weight: var(--discovery-weight-semibold, 600);
	color: var(--discovery-color-text, #ffffff);
}

.woocommerce div.product #reviews #comments .commentlist .woocommerce-review__dash {
	color: var(--intemporris-filet-accent);
}

.woocommerce div.product #reviews #comments .commentlist .woocommerce-review__published-date {
	color: var(--discovery-color-muted, #b3b3b3);
	font-variant-numeric: tabular-nums;
}

.woocommerce div.product #reviews #comments .commentlist .comment-text p {
	margin: 0;
}

.woocommerce div.product #reviews #comments .commentlist .description p {
	color: var(--discovery-color-text, #ffffff);
	font-size: var(--discovery-text-sm, 0.875rem);
	line-height: 1.65;
}

.woocommerce div.product #reviews #comments .commentlist .description p + p {
	margin-block-start: var(--discovery-space-3, 0.75rem);
}

.woocommerce div.product .woocommerce-verification-required {
	margin-block-start: var(--discovery-space-4, 1rem);
	padding: var(--discovery-space-4, 1rem);
	border: 1px solid var(--intemporris-filet);
	border-radius: var(--intemporris-rayon);
	background-color: var(--discovery-color-surface, #141414);
	font-size: var(--discovery-text-sm, 0.875rem);
	color: var(--discovery-color-muted, #b3b3b3);
}


/* Avis : le formulaire
   ======================================================================= */

/* Ecrire un avis est une action : le formulaire prend le verre, comme le bloc
   d'achat, mais un verre plus retenu. Un reflet en haut, un filet d'or au
   bord, et rien qui bouge tant que personne n'ecrit : la lueur ne se leve
   qu'une fois un champ touche. */

.woocommerce div.product #review_form_wrapper {
	margin-block-start: var(--discovery-space-8, 2rem);
}

/* L'invitation est une phrase de la page, pas une etiquette : elle garde sa
   casse et se pose au-dessus de la plaque. */
.woocommerce div.product #review_form #reply-title {
	display: block;
	max-inline-size: 58rem;
	margin: 0 0 var(--discovery-space-4, 1rem);
	color: var(--discovery-color-text, #ffffff);
	font-size: var(--discovery-text-lg, 1.125rem);
	font-weight: var(--discovery-weight-semibold, 600);
	letter-spacing: var(--intemporris-approche-titre);
	text-wrap: balance;
}

.woocommerce div.product #review_form form.comment-form {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--discovery-space-5, 1.25rem);
	max-inline-size: 58rem;
	padding: var(--discovery-space-6, 1.5rem);
	border: 1px solid var(--intemporris-filet);
	border-radius: var(--intemporris-rayon-grand);
	background:
		linear-gradient(112deg, transparent 38%, color-mix(in srgb, var(--discovery-color-text, #ffffff) 3.5%, transparent) 50%, transparent 62%),
		radial-gradient(ellipse 55% 120% at 12% 118%, var(--intemporris-nappe-c), transparent 70%),
		linear-gradient(180deg, color-mix(in srgb, var(--discovery-color-text, #ffffff) 10%, transparent), transparent 30%),
		color-mix(in srgb, var(--discovery-color-background, #000000) 48%, transparent);
	backdrop-filter: blur(0.75rem) saturate(1.05);
	box-shadow:
		inset 0 1px 0 var(--intemporris-verre-reflet),
		inset -1px -1px 0 var(--intemporris-biseau-sombre),
		var(--intemporris-portee) var(--intemporris-ombre);
}

/* Le bord haut prend l'or, du meme trait que le filet qui ferme les onglets. */
.woocommerce div.product #review_form form.comment-form::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset-block-start: -1px;
	inset-inline: var(--intemporris-rayon-grand);
	block-size: 1px;
	background: linear-gradient(90deg, transparent, var(--intemporris-filet-accent) 22%, var(--intemporris-filet-accent) 58%, transparent);
	pointer-events: none;
}

.woocommerce div.product #review_form form.comment-form::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset-inline: 0;
	inset-block-end: -1.5rem;
	block-size: 7rem;
	background: radial-gradient(ellipse 60% 80% at 22% 100%, var(--intemporris-verre-halo-vif), transparent 72%);
	filter: blur(1.25rem);
	opacity: 0;
	transition: opacity calc(var(--intemporris-duree) * 2.5);
	pointer-events: none;
}

.woocommerce div.product #review_form form.comment-form:focus-within::after {
	opacity: 1;
}

.woocommerce div.product #review_form form.comment-form > p {
	margin: 0;
}

/* La mention de service reste en petits caracteres, tenue a l'ecart des
   champs par un filet. */
.woocommerce div.product #review_form .comment-notes {
	padding-block-end: var(--discovery-space-4, 1rem);
	border-block-end: 1px solid var(--intemporris-filet);
	color: var(--discovery-color-muted, #b3b3b3);
	font-size: var(--discovery-text-xs, 0.75rem);
	line-height: 1.6;
}

/* Etiquettes des champs : la meme petite capitale doree que le choix de la
   devise et les renseignements. L'accord de depot du nom garde sa casse :
   c'est une phrase, pas une etiquette. */
.woocommerce div.product #review_form :is(.comment-form-rating, .comment-form-comment, .comment-form-author, .comment-form-email) > label {
	display: block;
	margin: 0 0 var(--discovery-space-2, 0.5rem);
	color: color-mix(in srgb, var(--intemporris-accent-texte) 76%, var(--discovery-color-muted, #b3b3b3));
	font-size: var(--discovery-text-sm, 0.875rem);
	font-weight: var(--discovery-weight-normal, 400);
	letter-spacing: var(--intemporris-approche-etiquette);
	text-transform: uppercase;
}

/* L'obligation se voit a la forme et au texte de la mention, jamais a la
   seule couleur : l'asterisque passe en clair sur l'etiquette doree. */
.woocommerce div.product #review_form form.comment-form .required {
	color: var(--discovery-color-text, #ffffff);
	font-weight: var(--discovery-weight-semibold, 600);
	text-decoration: none;
}

/* Les champs sont des creux dans la plaque : fond plus sombre, biseau en
   haut, et un bord qui reste lisible. */
.woocommerce div.product #review_form :is(.comment-form-author, .comment-form-email) input,
.woocommerce div.product #review_form .comment-form-comment textarea {
	padding: var(--discovery-space-3, 0.75rem);
	border: 1px solid color-mix(in srgb, var(--discovery-color-muted, #b3b3b3) 72%, var(--intemporris-accent));
	border-radius: var(--intemporris-rayon);
	background-color: color-mix(in srgb, var(--discovery-color-background, #000000) 55%, transparent);
	box-shadow: inset 0 1px 0 var(--intemporris-biseau-sombre);
	transition: border-color var(--intemporris-duree), box-shadow var(--intemporris-duree);
}

.woocommerce div.product #review_form :is(.comment-form-author, .comment-form-email) input:focus,
.woocommerce div.product #review_form .comment-form-comment textarea:focus {
	border-color: var(--intemporris-verre-bord-vif);
	box-shadow:
		inset 0 1px 0 var(--intemporris-biseau-sombre),
		0 0 0 0.2rem var(--intemporris-verre-halo);
}

.woocommerce div.product #review_form .comment-form-comment textarea {
	block-size: 10.5rem;
	min-block-size: 8rem;
	line-height: 1.65;
	resize: vertical;
}

/* La note garde la mecanique de la boutique : memes liens, meme ordre, meme
   valeur envoyee. L'etoile, elle, est celle de la fiche : un trait fin quand
   elle est eteinte, l'or plein et un halo quand elle est acquise. La
   difference tient au trait autant qu'a la couleur. */
.woocommerce div.product #review_form .comment-form-rating {
	margin: 0;
}

.woocommerce div.product #review_form p.stars {
	margin: 0;
}

.woocommerce div.product #review_form p.stars > span {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.woocommerce div.product #review_form p.stars a {
	font-size: 1.6rem;
}

@supports (mask-image: url("")) or (-webkit-mask-image: url("")) {

	.woocommerce div.product #review_form p.stars a::before {
		content: "";
		background-color: var(--intemporris-etoile-eteinte);
		background-image: none;
		-webkit-mask-image: var(--intemporris-etoile-creuse);
		mask-image: var(--intemporris-etoile-creuse);
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-position: center;
		mask-position: center;
		-webkit-mask-size: var(--intemporris-etoile-case);
		mask-size: var(--intemporris-etoile-case);
		filter: drop-shadow(0 1px 0 var(--intemporris-biseau-sombre));
		transition: background-color var(--intemporris-duree), filter var(--intemporris-duree);
	}

	.woocommerce div.product #review_form p.stars:hover a::before,
	.woocommerce div.product #review_form p.stars.selected a::before {
		background-color: var(--intemporris-accent-texte);
		background-image: var(--intemporris-etoile-acquise);
		-webkit-mask-image: var(--intemporris-etoile-pleine);
		mask-image: var(--intemporris-etoile-pleine);
		filter: drop-shadow(0 0 0.4rem var(--intemporris-verre-halo-vif));
	}

	.woocommerce div.product #review_form p.stars a:hover ~ a::before,
	.woocommerce div.product #review_form p.stars.selected a.active ~ a::before {
		background-color: var(--intemporris-etoile-eteinte);
		background-image: none;
		-webkit-mask-image: var(--intemporris-etoile-creuse);
		mask-image: var(--intemporris-etoile-creuse);
		filter: drop-shadow(0 1px 0 var(--intemporris-biseau-sombre));
	}

	/* La note deja donnee est faite de la meme etoile : cinq etoiles creuses,
	   les etoiles acquises posees par-dessus et coupees a la largeur de la
	   note. La mecanique et le texte de remplacement restent ceux de la
	   boutique. */
	.woocommerce div.product .star-rating::before,
	.woocommerce div.product .star-rating span::before {
		content: "";
		display: block;
		inline-size: 5.4em;
		block-size: 1em;
		-webkit-mask-repeat: repeat-x;
		mask-repeat: repeat-x;
		-webkit-mask-position: left center;
		mask-position: left center;
		-webkit-mask-size: var(--intemporris-etoile-case);
		mask-size: var(--intemporris-etoile-case);
	}

	.woocommerce div.product .star-rating::before {
		background-color: var(--intemporris-etoile-eteinte);
		-webkit-mask-image: var(--intemporris-etoile-creuse);
		mask-image: var(--intemporris-etoile-creuse);
	}

	.woocommerce div.product .star-rating span::before {
		background-color: var(--intemporris-accent-texte);
		background-image: var(--intemporris-etoile-acquise);
		-webkit-mask-image: var(--intemporris-etoile-pleine);
		mask-image: var(--intemporris-etoile-pleine);
		filter: drop-shadow(0 0 0.35rem var(--intemporris-verre-halo));
	}
}

.woocommerce div.product #review_form p.stars a:focus-visible {
	outline: 2px solid var(--intemporris-verre-bord-vif);
	outline-offset: 0.2rem;
	border-radius: 0.15rem;
}

/* L'accord de depot du nom : une case, une phrase, et le ton d'une note de
   service. */
.woocommerce div.product #review_form .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: var(--discovery-space-2, 0.5rem);
	color: var(--discovery-color-muted, #b3b3b3);
	font-size: var(--discovery-text-sm, 0.875rem);
}

.woocommerce div.product #review_form .comment-form-cookies-consent input {
	flex: none;
	margin-block-start: 0.2rem;
	accent-color: var(--intemporris-accent);
}

.woocommerce div.product #review_form .comment-form-cookies-consent label {
	margin: 0;
	line-height: 1.5;
}

/* Le depot de l'avis est une action seconde : le meme verre que l'achat et la
   meme lumiere qui monte du pied, en plus retenu et sans aplat. */
.woocommerce div.product #review_form .form-submit {
	display: flex;
	justify-content: flex-start;
	padding-block-start: var(--discovery-space-2, 0.5rem);
}

.woocommerce div.product #review_form #respond input#submit {
	min-block-size: var(--intemporris-cible);
	padding-inline: var(--discovery-space-6, 1.5rem);
	border: 1px solid color-mix(in srgb, var(--intemporris-accent) 38%, transparent);
	border-radius: var(--intemporris-rond);
	color: var(--discovery-color-text, #ffffff);
	font-weight: var(--discovery-weight-semibold, 600);
	letter-spacing: 0.02em;
	background-color: color-mix(in srgb, var(--discovery-color-background, #000000) 48%, transparent);
	background-image: linear-gradient(0deg, var(--intemporris-verre-halo-bouton), transparent 52%);
	background-repeat: no-repeat;
	background-size: 100% 200%;
	background-position: 50% 0;
	box-shadow: inset 0 1px 0 var(--intemporris-verre-reflet);
	transition:
		background-position calc(var(--intemporris-duree) * 1.6),
		border-color var(--intemporris-duree),
		color var(--intemporris-duree),
		box-shadow var(--intemporris-duree);
}

.woocommerce div.product #review_form #respond input#submit:hover,
.woocommerce div.product #review_form #respond input#submit:focus-visible {
	background-color: color-mix(in srgb, var(--discovery-color-background, #000000) 48%, transparent);
	background-position: 50% 100%;
	border-color: color-mix(in srgb, var(--intemporris-accent) 62%, transparent);
	color: var(--discovery-color-text, #ffffff);
	box-shadow:
		inset 0 1px 0 var(--intemporris-verre-reflet),
		0 0.5rem 1.5rem -0.75rem var(--intemporris-verre-lueur);
}

/* Assez large pour deux colonnes : le nom et l'adresse partagent une ligne.
   La grille les pose cote a cote, le balisage garde son ordre. */
@container intemporris (min-width: 46rem) {

	.woocommerce div.product #review_form form.comment-form {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--discovery-space-6, 1.5rem);
		padding: var(--discovery-space-8, 2rem);
	}

	.woocommerce div.product #review_form form.comment-form > :not(.comment-form-author):not(.comment-form-email) {
		grid-column: 1 / -1;
	}
}

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

	.woocommerce div.product #reviews #comments .commentlist li.review,
	.woocommerce div.product #reviews #comments .commentlist li.review::after,
	.woocommerce div.product #review_form form.comment-form::after,
	.woocommerce div.product #review_form #respond input#submit {
		transition-duration: 1ms;
	}
}


/* Onglet Equipe
   ======================================================================= */

/* Un generique, non une liste de champs.

   Chaque crédit garde son rôle et son nom, dans l'ordre du balisage. La
   grille les range sur deux colonnes, colonne par colonne : la lecture au
   clavier et à la voix suit toujours le même ordre, seule la place change.

   Aucune carte : chaque crédit est tenu par un filet court, sous lui. Le
   rôle est en petites capitales, le nom un cran plus grand, parce que cet
   onglet parle des personnes. */
.abs-livre-fiche.abs-livre-onglet-abs-equipe {
	max-inline-size: 56rem;
}

.abs-livre-fiche.abs-livre-onglet-abs-equipe .abs-livre-onglet-titre {
	display: flex;
	align-items: center;
	gap: var(--discovery-space-3, 0.75rem);
}

.abs-livre-fiche.abs-livre-onglet-abs-equipe .abs-livre-onglet-titre::before {
	content: "";
	inline-size: var(--discovery-space-6, 1.5rem);
	block-size: 1px;
	flex: none;
	background: var(--intemporris-filet-accent);
}

.abs-livre-fiche.abs-livre-onglet-abs-equipe .abs-livre-equipe {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--discovery-space-12, 3rem);
	row-gap: var(--discovery-space-6, 1.5rem);
}

.abs-livre-fiche.abs-livre-onglet-abs-equipe .abs-livre-membre {
	display: grid;
	gap: var(--discovery-space-1, 0.25rem);
	margin: 0;
	padding: 0 0 var(--discovery-space-3, 0.75rem);
	border-block-end: 1px solid var(--intemporris-filet);
}

.abs-livre-fiche.abs-livre-onglet-abs-equipe .abs-livre-membre-role {
	color: var(--discovery-color-muted, #b3b3b3);
	font-size: var(--discovery-text-xs, 0.75rem);
	letter-spacing: var(--intemporris-approche-etiquette);
	text-transform: uppercase;
}

.abs-livre-fiche.abs-livre-onglet-abs-equipe .abs-livre-membre-nom {
	font-size: var(--discovery-text-lg, 1.125rem);
	line-height: var(--discovery-line-tight, 1.2);
}

/* Un nom qui mène quelque part porte un filet d'or, qui s'allume au passage.
   Le contour de focus du thème, lui, reste franc. */
.abs-livre-fiche.abs-livre-onglet-abs-equipe .abs-livre-membre-nom a {
	color: inherit;
	text-decoration: none;
	box-shadow: inset 0 -1px 0 var(--intemporris-filet);
	transition: box-shadow var(--intemporris-duree), color var(--intemporris-duree);
}

.abs-livre-fiche.abs-livre-onglet-abs-equipe .abs-livre-membre-nom a:hover,
.abs-livre-fiche.abs-livre-onglet-abs-equipe .abs-livre-membre-nom a:focus-visible {
	color: var(--discovery-color-text, #ffffff);
	box-shadow: inset 0 -1px 0 var(--intemporris-filet-accent);
}

@container intemporris (max-width: 48rem) {

	.abs-livre-fiche.abs-livre-onglet-abs-equipe .abs-livre-equipe {
		grid-template-columns: minmax(0, 1fr);
	}
}


/* Largeurs de la colonne de lecture
   ======================================================================= */

/* La colonne de lecture se mesure elle-meme.

   Les tailles du theme grandissent avec la fenetre. Sur une page large, une
   colonne etroite recoit donc un titre calibre pour la fenetre et non pour
   elle : le texte se casse, les commandes se serrent. La colonne se declare
   conteneur, et ce qu'elle porte se regle sur sa largeur a elle. Tant qu'elle
   reste au large, rien ne change. */

.abs-charpente-livre .abs-charpente-zone-suite {
	container: intemporris-suite / inline-size;
}

@container intemporris (min-width: 48rem) {

	@container intemporris-suite (max-width: 40rem) {

		.woocommerce div.product .product_title {
			font-size: clamp(1.9rem, 0.95rem + 4cqi, 2.6rem);
		}

		.woocommerce div.product p.price {
			font-size: clamp(1.4rem, 0.9rem + 1.7cqi, 1.9rem);
		}

		.abs-livre-fiche .abs-livre-marque {
			font-size: var(--discovery-text-xs, 0.75rem);
		}

		.abs-livre-fiche .abs-role-personnes {
			font-size: var(--discovery-text-base, 1rem);
		}

		/* La carte du format et la note d'achat se resserrent d'un cran :
		   l'air qu'on leur retire, le texte le reprend. */
		.woocommerce div.product form.cart {
			padding: var(--discovery-space-4, 1rem);
		}

		.abs-livre-fiche.abs-livre-achat {
			padding: var(--discovery-space-6, 1.5rem) var(--discovery-space-5, 1.25rem);
			font-size: var(--discovery-text-sm, 0.875rem);
		}

		/* Le choix de la devise : l'etiquette passe au-dessus, et la liste et
		   son bouton tiennent alors sur une seule ligne. */
		.abs-devises-selecteur {
			gap: var(--discovery-space-2, 0.5rem);
			font-size: var(--discovery-text-xs, 0.75rem);
		}

		.abs-devises-selecteur-liste,
		.abs-devises-selecteur-bouton {
			min-block-size: 2.2rem;
			padding-inline: var(--discovery-space-3, 0.75rem);
			font-size: var(--discovery-text-xs, 0.75rem);
		}

		/* La liste garde de quoi montrer la devise active, et laisse au bouton
		   la place de rester sur la meme ligne. */
		.abs-devises-selecteur-liste {
			max-inline-size: 19rem;
			padding-inline-end: var(--discovery-space-6, 1.5rem);
		}

		/* La bande des renseignements tient cinq colonnes : etiquettes et
		   valeurs descendent d'un cran, et le filet se rapproche. */
		.abs-livre-fiche.abs-livre-renseignements {
			column-gap: var(--discovery-space-3, 0.75rem);
		}

		.abs-livre-fiche.abs-livre-renseignements dt {
			font-size: var(--discovery-text-xs, 0.75rem);
			letter-spacing: 0.04em;
		}

		.abs-livre-fiche.abs-livre-renseignements dd {
			font-size: var(--discovery-text-sm, 0.875rem);
		}

		.abs-devises-indisponible {
			padding: var(--discovery-space-3, 0.75rem);
			font-size: var(--discovery-text-xs, 0.75rem);
		}
	}
}


/* Largeurs reduites
   ======================================================================= */

@container intemporris (max-width: 40rem) {

	.woocommerce div.product .product_title {
		font-size: var(--discovery-text-2xl, 1.5rem);
	}

	.woocommerce div.product p.price {
		font-size: var(--discovery-text-2xl, 1.5rem);
	}

	.abs-livre-fiche .abs-role,
	.abs-livre-fiche .abs-livre-renseignement,
	.abs-livre-fiche .abs-fiche-mention {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.woocommerce div.product form.cart .single_add_to_cart_button {
		inline-size: 100%;
	}

	/* En etroit, la barre devient un rail : une seule ligne, comme sur grand
	   ecran, et on glisse pour voir la suite. Le debut de l'onglet suivant
	   depasse au bord droit : c'est lui qui dit qu'il y a de la suite, sans
	   fleche ni consigne. Le rail se colle sous l'entete pendant la lecture
	   du panneau, puis se decroche a la fin de la section : on change
	   d'onglet sans remonter toute la description. */
	.woocommerce div.product .woocommerce-tabs ul.tabs {
		position: sticky;
		inset-block-start: 0;
		z-index: 3;
		display: flex;
		flex-wrap: nowrap;
		gap: var(--discovery-space-1, 0.25rem);
		inline-size: 100%;
		padding: var(--discovery-space-3, 0.75rem) var(--discovery-space-2, 0.5rem);
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		scrollbar-width: none;
		scroll-snap-type: inline proximity;
	}

	.woocommerce div.product .woocommerce-tabs ul.tabs::-webkit-scrollbar {
		display: none;
	}

	.woocommerce div.product .woocommerce-tabs ul.tabs li {
		flex: 0 0 auto;
		scroll-snap-align: center;
	}

	.woocommerce div.product .woocommerce-tabs ul.tabs li a {
		inline-size: auto;
		justify-content: center;
		padding-inline: var(--discovery-space-4, 1rem);
		font-size: var(--discovery-text-sm, 0.875rem);
		white-space: nowrap;
	}

	/* Le panneau ne passe pas sous le rail quand on saute a une ancre. */
	.woocommerce div.product .woocommerce-Tabs-panel {
		scroll-margin-block-start: 4.5rem;
	}

	/* Fin des mentions de la couverture : un vrai silence avant que le livre
	   commence. Les trois mentions, elles, restent serrees entre elles. */
	.abs-charpente-livre .abs-charpente-zone-suite {
		margin-block-start: var(--discovery-space-10, 2.5rem);
	}
}

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

	.woocommerce div.product div.images::after,
	.woocommerce div.product .woocommerce-tabs ul.tabs li a {
		transition: none;
		animation: none;
	}
}


/* Le fond de la page sous les onglets : la chambre, transposée à la fiche.

   La page d'accueil pose une lampe et des poussières : une lumière qui vient
   de loin, et des grains qui flottent dedans. La fiche reprend cette matière
   pour tout ce qui suit la barre d'onglets, mais à voix plus basse et dans
   ses couleurs : l'or du domaine et l'ardoise du site.

   Trois plans se superposent :
     la lueur, qui traverse la page en diagonale, d'un angle bas à gauche
     vers le haut à droite, sans jamais dessiner de forme ;
     les poussières, les mêmes masses passées au grain, qui donnent à la
     nuit sa texture ;
     le fondu, qui éteint l'ensemble en haut et en bas, pour que rien ne
     commence ni ne s'arrête net.

   La lumière s'arrête avec le panneau : les recommandations qui suivent
   gardent un fond noir, car leurs cartes s'éclairent au passage et il leur
   faut cette nuit pour se détacher. La barre d'onglets n'est pas touchée non
   plus, et rien ne bouge au repos. */
.abs-charpente-livre {
	--intemporris-chambre-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
}

.abs-charpente-livre .abs-charpente-bloc-onglets {
	--intemporris-chambre-teinte: color-mix(in srgb, #9a8f84 22%, var(--intemporris-accent));
	--intemporris-chambre-lueur: color-mix(in srgb, var(--intemporris-chambre-teinte) 34%, transparent);
	--intemporris-chambre-lueur-loin: color-mix(in srgb, var(--intemporris-chambre-teinte) 16%, transparent);
	--intemporris-chambre-ardoise: color-mix(in srgb, #7e8693 20%, transparent);
	--intemporris-chambre-fondu: linear-gradient(to bottom, transparent, #000 12%, #000 86%, transparent);
	--intemporris-chambre-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");

	position: relative;
	isolation: isolate;
}

/* La lueur. */
.abs-charpente-livre .abs-charpente-bloc-onglets::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 5rem -12% 0;
	background:
		radial-gradient(ellipse 46% 52% at 4% 86%, color-mix(in srgb, var(--intemporris-chambre-lueur) 38%, transparent), transparent 74%),
		radial-gradient(ellipse 62% 44% at 34% 104%, color-mix(in srgb, var(--intemporris-chambre-lueur-loin) 70%, transparent), transparent 76%),
		radial-gradient(ellipse 30% 44% at 96% 22%, var(--intemporris-chambre-ardoise), transparent 72%),
		radial-gradient(ellipse 40% 30% at 74% 62%, var(--intemporris-chambre-lueur-loin), transparent 76%);
	mask-image: var(--intemporris-chambre-fondu);
	filter: blur(2.5rem);
	pointer-events: none;
}

/* Les poussières : les mêmes masses, mais le grain leur sert de masque. On
   ne voit donc que des grains, chacun prenant la couleur de l'endroit où il
   flotte. */
.abs-charpente-livre .abs-charpente-bloc-onglets::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 5rem -12% 0;
	background:
		radial-gradient(ellipse 40% 44% at 10% 78%, color-mix(in srgb, var(--intemporris-accent) 30%, transparent), transparent 74%),
		radial-gradient(ellipse 34% 40% at 62% 46%, color-mix(in srgb, #7e8693 52%, transparent), transparent 72%),
		radial-gradient(ellipse 30% 36% at 92% 88%, color-mix(in srgb, var(--intemporris-accent) 48%, transparent), transparent 72%);
	mask-image: var(--intemporris-chambre-grain);
	opacity: 0.4;
	pointer-events: none;
}

/* Sous le panneau, les recommandations gardent leur nuit : leurs cartes
   s'éclairent au passage et il leur faut ce noir pour se détacher. Un grain
   d'ardoise, seul, vient poser un souffle de lumière froide autour d'elles,
   sans jamais remplir le fond. */
.abs-charpente-livre :is(.abs-charpente-bloc-montees, .abs-charpente-bloc-recommandations) {
	position: relative;
	isolation: isolate;
}

.abs-charpente-livre :is(.abs-charpente-bloc-montees, .abs-charpente-bloc-recommandations)::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -3rem -10%;
	background:
		radial-gradient(ellipse 54% 50% at 88% 30%, color-mix(in srgb, #7e8693 46%, transparent), transparent 74%),
		radial-gradient(ellipse 46% 44% at 12% 78%, color-mix(in srgb, #7e8693 34%, transparent), transparent 76%);
	mask-image: var(--intemporris-chambre-grain);
	opacity: 0.32;
	pointer-events: none;
}

@media (prefers-contrast: more) {

	.abs-charpente-livre .abs-charpente-bloc-onglets::before,
	.abs-charpente-livre .abs-charpente-bloc-onglets::after,
	.abs-charpente-livre :is(.abs-charpente-bloc-montees, .abs-charpente-bloc-recommandations)::before {
		display: none;
	}
}


/* Autour du livre : une fiche éditoriale, non un tableau.

   Ce panneau ne se lit pas comme la description : ce sont des données, et
   elles se consultent. Elles gardent donc leurs paires étiquette et valeur,
   côte à côte comme le Reader les écrit, mais dans une colonne bornée : les
   informations cessent d'occuper le premier tiers d'une page vide.

   Le filet passe sous la valeur seule, et non d'un bord à l'autre : il tient
   la donnée, il ne barre pas la page. L'or ne paraît qu'au tiret du titre,
   celui de « À découvrir aussi ». */
.abs-livre-fiche.abs-livre-onglet-abs-autour {
	max-inline-size: 52rem;
}

.abs-livre-fiche.abs-livre-onglet-abs-autour .abs-livre-onglet-titre {
	display: flex;
	align-items: center;
	gap: var(--discovery-space-3, 0.75rem);
}

.abs-livre-fiche.abs-livre-onglet-abs-autour .abs-livre-onglet-titre::before {
	content: "";
	inline-size: var(--discovery-space-6, 1.5rem);
	block-size: 1px;
	flex: none;
	background: var(--intemporris-filet-accent);
}

.abs-livre-fiche.abs-livre-onglet-abs-autour .abs-livre-renseignements {
	display: grid;
	grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
	column-gap: var(--discovery-space-6, 1.5rem);
	row-gap: 0;
}

.abs-livre-fiche.abs-livre-onglet-abs-autour .abs-livre-renseignement {
	display: contents;
}

.abs-livre-fiche.abs-livre-onglet-abs-autour .abs-livre-renseignement dt {
	padding-block: var(--discovery-space-4, 1rem);
	color: var(--discovery-color-muted, #b3b3b3);
	font-size: var(--discovery-text-xs, 0.75rem);
	letter-spacing: var(--intemporris-approche-etiquette);
	text-transform: uppercase;
}

.abs-livre-fiche.abs-livre-onglet-abs-autour .abs-livre-renseignement dd {
	margin: 0;
	padding-block: var(--discovery-space-4, 1rem);
	border-block-end: 1px solid var(--intemporris-filet);
	color: var(--discovery-color-text, #ffffff);
	font-size: var(--discovery-text-base, 1rem);
}

/* La dernière valeur ferme la liste sans filet : rien ne pend. */
.abs-livre-fiche.abs-livre-onglet-abs-autour .abs-livre-renseignement:last-child dd {
	border-block-end: 0;
}

@container intemporris (max-width: 48rem) {

	.abs-livre-fiche.abs-livre-onglet-abs-autour .abs-livre-renseignements {
		grid-template-columns: minmax(0, 1fr);
	}

	.abs-livre-fiche.abs-livre-onglet-abs-autour .abs-livre-renseignement dt {
		padding-block: var(--discovery-space-4, 1rem) 0;
	}
}


/* L'atmosphère
   ======================================================================= */

/* Le bronze n'est pas une couleur d'interface posée partout : c'est une
   lumière qui existe sous l'interface. On la voit plus qu'on ne voit sa
   couleur. Rien n'est ajouté à la page : ni icône, ni séparateur, ni bloc. */

.woocommerce div.product {
	--intemporris-courant: color-mix(in srgb, var(--intemporris-accent) 72%, var(--intemporris-lumiere));
	--intemporris-courant-a: color-mix(in srgb, var(--intemporris-courant) 17%, transparent);
	--intemporris-courant-b: color-mix(in srgb, var(--intemporris-courant) 30%, transparent);
	--intemporris-courant-c: color-mix(in srgb, var(--intemporris-courant) 21%, transparent);
	--intemporris-courant-d: color-mix(in srgb, var(--intemporris-courant) 12%, transparent);
}

/* 1. Un seul courant, pas cinq halos. Il nait tres faiblement derriere le
   prix, s'epaissit au pied du bloc d'achat, redescend vers l'ecoute et meurt
   derriere les donnees. On ne voit jamais de vague : seulement des
   differences de densite dans le noir. */
.abs-charpente-livre .abs-charpente-zone-suite {
	position: relative;
	isolation: isolate;
}

.abs-charpente-livre .abs-charpente-zone-suite::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset-block: -6% -10%;
	inset-inline: -12% -14%;
	background:
		radial-gradient(ellipse 55% 10% at 20% 36%, var(--intemporris-courant-a), transparent 74%),
		radial-gradient(ellipse 70% 14% at 46% 58%, var(--intemporris-courant-b), transparent 72%),
		radial-gradient(ellipse 55% 12% at 24% 74%, var(--intemporris-courant-c), transparent 74%),
		radial-gradient(ellipse 80% 16% at 62% 92%, var(--intemporris-courant-d), transparent 76%);
	filter: blur(3rem);
	opacity: 0.9;
	animation: intemporris-courant 72s ease-in-out infinite;
	pointer-events: none;
}

@keyframes intemporris-courant {

	0%, 100% {
		transform: translate3d(0, 0, 0) scale(1);
	}

	50% {
		transform: translate3d(-1.5%, 1.5%, 0) scale(1.05);
	}
}

/* 3. Le bloc d'achat : une plaque de verre fume posee dans le courant. Son
   degrade et son halo bas sont gardes ; c'est le cadre qui devient du verre,
   avec une refraction interieure a peine lisible. */
.woocommerce div.product form.cart {
	border-color: color-mix(in srgb, var(--discovery-color-text, #ffffff) 10%, transparent);
	background:
		linear-gradient(112deg, transparent 38%, color-mix(in srgb, var(--discovery-color-text, #ffffff) 3.5%, transparent) 50%, transparent 62%),
		radial-gradient(ellipse 55% 120% at 10% 120%, var(--intemporris-nappe-b), transparent 70%),
		linear-gradient(180deg, var(--intemporris-verre-reflet), transparent 42%),
		color-mix(in srgb, var(--discovery-color-background, #000000) 52%, transparent);
	backdrop-filter: blur(0.75rem) saturate(1.05);
	box-shadow:
		inset 0 1px 0 var(--intemporris-verre-reflet),
		inset -1px -1px 0 var(--intemporris-biseau-sombre);
}

/* 4. Ajouter au panier : le point lumineux de la zone. Un centre sombre et
   translucide, une lumière bronze prise dans le verre et plus dense vers les
   bords. Au passage, la lumière monte du pied du bouton et remplit le verre,
   puis redescend quand la main s'en va. Aucune déformation, aucun saut. */
.woocommerce div.product form.cart .single_add_to_cart_button {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--intemporris-accent) 58%, transparent);
	background:
		radial-gradient(120% 180% at 50% 50%, transparent 42%, color-mix(in srgb, var(--intemporris-accent) 58%, transparent) 96%),
		linear-gradient(180deg, var(--intemporris-verre-reflet), transparent 45%),
		color-mix(in srgb, var(--intemporris-accent) 16%, var(--discovery-color-background, #000000));
	color: var(--discovery-color-text, #ffffff);
	backdrop-filter: blur(0.5rem) saturate(1.05);
	box-shadow:
		inset 0 1px 0 var(--intemporris-verre-reflet),
		0 0 var(--discovery-space-8, 2rem) color-mix(in srgb, var(--intemporris-accent) 22%, transparent);
	transition: border-color var(--intemporris-duree), box-shadow var(--intemporris-duree);
}

.woocommerce div.product form.cart .single_add_to_cart_button::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: auto 0 0 0;
	block-size: 140%;
	background: radial-gradient(ellipse 60% 100% at 50% 118%, color-mix(in srgb, var(--intemporris-accent) 70%, transparent), transparent 72%);
	filter: blur(0.75rem);
	opacity: 0.5;
	transform: translateY(45%);
	transition: transform 700ms cubic-bezier(0.25, 0.6, 0.3, 1), opacity var(--intemporris-duree);
	pointer-events: none;
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce div.product form.cart .single_add_to_cart_button:focus-visible {
	border-color: color-mix(in srgb, var(--intemporris-accent) 80%, transparent);
	box-shadow:
		inset 0 1px 0 var(--intemporris-verre-reflet),
		0 0 var(--discovery-space-10, 2.5rem) color-mix(in srgb, var(--intemporris-accent) 34%, transparent);
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover::before,
.woocommerce div.product form.cart .single_add_to_cart_button:focus-visible::before {
	transform: translateY(0);
	opacity: 1;
}

/* 5. Ecouter et decouvrir : les commandes appartiennent au lecteur et gardent
   leur dessin. Intemporris ne pose qu'une reaction autour d'elles : au
   passage, un contour bronze s'allume et un halo s'ouvre. Rien n'est change
   a l'interieur du bouton. */
.abs-livre-ecoute-commandes .gp-bouton {
	border-radius: var(--intemporris-rond);
	transition: box-shadow var(--intemporris-duree);
}

.abs-livre-ecoute-commandes .gp-bouton:hover,
.abs-livre-ecoute-commandes .gp-bouton:focus-within {
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--intemporris-accent) 45%, transparent),
		0 0 var(--discovery-space-8, 2rem) color-mix(in srgb, var(--intemporris-accent) 16%, transparent);
}

/* 6. Les onglets : une barre de verre fume, un peu plus presente que le
   fond sans jamais devenir une dalle. La lumiere bronze se pose sous
   l'onglet retenu, exactement sous lui : elle est portee par l'onglet
   lui-meme et non par la barre, donc elle ne peut pas se decaler. Elle
   s'allume et s'eteint en fondu quand on change d'onglet. L'etat retenu
   porte aussi sa graisse : il ne tient pas a la seule couleur. */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	border-color: color-mix(in srgb, var(--discovery-color-text, #ffffff) 13%, transparent);
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--discovery-color-text, #ffffff) 10%, transparent), transparent 58%),
		color-mix(in srgb, var(--discovery-color-text, #ffffff) 6%, color-mix(in srgb, var(--discovery-color-background, #000000) 62%, transparent));
	background-color: transparent;
	backdrop-filter: blur(var(--intemporris-verre-flou)) saturate(1.05);
	box-shadow: inset 0 1px 0 color-mix(in srgb, var(--discovery-color-text, #ffffff) 12%, transparent);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	position: relative;
	isolation: isolate;
	border: 0;
	border-radius: var(--intemporris-rond);
	margin: 0;
}

/* La boutique dessine les angles de ses onglets avec deux petits carres
   clairs et ferme sa barre par un filet : le verre se passe des trois. */
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	content: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -0.2rem -0.45rem;
	border: 0;
	box-shadow: none;
	background:
		radial-gradient(ellipse 62% 120% at 50% 122%, color-mix(in srgb, var(--intemporris-accent) 80%, transparent), transparent 70%),
		radial-gradient(ellipse 96% 190% at 50% 128%, color-mix(in srgb, var(--intemporris-accent) 34%, transparent), transparent 74%);
	filter: blur(0.45rem);
	opacity: 0;
	transition: opacity 320ms ease;
	pointer-events: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active::before {
	box-shadow: none;
	opacity: 1;
}

/* Rien n'entoure l'onglet retenu : ni cadre, ni pastille. Ce qui le designe,
   c'est la lumiere qui monte sous lui, exactement a son aplomb, et sa
   graisse. Le texte pale sur la lueur suffit a le distinguer. */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	border-color: transparent;
	background-color: transparent;
	color: var(--discovery-color-text, #ffffff);
	font-weight: var(--discovery-weight-bold, 700);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	border-color: transparent;
	background-color: color-mix(in srgb, var(--discovery-color-text, #ffffff) 6%, transparent);
	color: var(--discovery-color-text, #ffffff);
}

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

	.abs-charpente-livre .abs-charpente-zone-suite::before,
	.woocommerce div.product form.cart .single_add_to_cart_button::before,
	.woocommerce div.product .woocommerce-tabs ul.tabs li::before {
		animation: none;
		transition: none;
	}

	.woocommerce div.product form.cart .single_add_to_cart_button:hover::before,
	.woocommerce div.product form.cart .single_add_to_cart_button:focus-visible::before {
		transform: none;
		opacity: 1;
	}
}

@media (prefers-contrast: more) {

	.abs-charpente-livre .abs-charpente-zone-suite::before {
		display: none;
	}

	.woocommerce div.product form.cart,
	.woocommerce div.product form.cart .single_add_to_cart_button,
	.woocommerce div.product .woocommerce-tabs ul.tabs {
		background: var(--discovery-color-surface, #141414);
		backdrop-filter: none;
		box-shadow: none;
	}

	.woocommerce div.product form.cart .single_add_to_cart_button::before {
		display: none;
	}

	.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
		border-color: var(--discovery-color-border, #ffffff);
	}
}