/*
 * Ekdotis — boutique WooCommerce. Le bouton de la zone d'achat (W1), le lien
 * Panier de l'en-tête, l'habillage des pages Panier, Commande, Commande reçue,
 * Mon compte et Conditions, et du message d'ajout au panier (W2).
 *
 * Les jetons du thème seulement, comme PayPal et les librairies : la
 * direction graphique habille la boutique par eux. Aucun gabarit de
 * WooCommerce n'est surchargé : tout passe par les classes de ses blocs et de
 * ses formulaires. Les règles permanentes tiennent :
 *
 * - aucune capitale, ni `uppercase` ni petites capitales ;
 * - au plus un filet par page : les filets des blocs (au-dessus et au-dessous
 *   des totaux, entre les lignes du panier, le cadre du résumé de commande,
 *   celui du formulaire de connexion) sont retirés ; les champs gardent leur
 *   bordure, qui n'est pas un filet ;
 * - liens soulignés au survol et au focus seulement ;
 * - contraste de 4,5:1 au moins : textes en `--text` et `--text-muted`,
 *   bouton en `--text-on-accent` sur `--accent` (garanti par la palette).
 *
 * LA LARGEUR EST CELLE DE LA COLONNE, 150 PX AU MOINS (CDC § 22.6, même
 * règle que PayPal) : `contain: inline-size`, le bloc ne pèse pas dans la
 * largeur de la colonne des caractéristiques.
 */

/* =========================================================================
 * 1. La zone d'achat de la fiche
 * ====================================================================== */

.boutique-achat {
	contain: inline-size;
	display: flex;
	flex-direction: column;
	font-family: var(--font-ui);
	font-size: var(--font-size-s);
	gap: var(--zone-achat-ecart, var(--space-s));
	min-width: 150px;
	text-align: start;
}

/* Dans une colonne d'achat flexible (Cartouche), la zone se règle sur son
   contenu : elle prend la largeur de la colonne. */
.livre__zone-achat:has(> .boutique-achat) {
	align-self: stretch;
}

/* L'étiquette et la quantité sur une ligne, le bouton dessous, à toute la
   largeur de la colonne : la colonne des caractéristiques descend à 150 px
   (Cartouche à 1 280), où un bouton posé à côté de la quantité n'en avait
   plus que 70 et coupait son libellé. */
.boutique-achat__formulaire {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	margin: 0;
}

.boutique-achat__libelle {
	font-size: var(--font-size-xs);
}

.boutique-achat__quantite {
	background: var(--surface);
	border: var(--border-width) solid var(--border-strong);
	border-radius: var(--radius-s);
	box-sizing: border-box;
	color: var(--text);
	font-family: var(--font-ui);
	font-size: var(--font-size-s);
	min-height: 2.75rem;
	min-width: 0;
	padding: var(--space-2xs) var(--space-3xs);
	width: 4.5rem;
}

.boutique-achat__bouton {
	border: 0;
	box-sizing: border-box;
	cursor: pointer;
	display: block;
	flex: 1 0 100%;
	line-height: var(--leading-snug);
	min-height: 2.75rem;
	text-align: center;
	width: 100%;
}

.boutique-achat__quantite:focus-visible,
.boutique-achat__bouton:focus-visible {
	outline: var(--focus-ring, 2px solid var(--accent));
	outline-offset: var(--focus-offset, 2px);
}

.boutique-achat__messages:empty {
	display: none;
}

/* Le message natif d'ajout (« … a été ajouté à votre panier », bouton Voir
   le panier), rendu par `wc_print_notices()` dans la zone. WooCommerce le
   dessine avec un filet de couleur en haut et une icône : ici un fond, sans
   filet ni icône, le texte à la couleur du texte, le lien en lien. */
.boutique-achat__messages .woocommerce-message,
.boutique-achat__messages .woocommerce-info,
.boutique-achat__messages .woocommerce-error {
	background: var(--surface);
	border: 0;
	border-radius: var(--radius-s);
	color: var(--text);
	display: flex;
	flex-direction: column;
	font-family: var(--font-ui);
	font-size: var(--font-size-xs);
	gap: var(--space-3xs);
	line-height: var(--leading-snug);
	list-style: none;
	margin: 0;
	padding: var(--space-2xs) var(--space-xs);
}

.boutique-achat__messages .woocommerce-message::before,
.boutique-achat__messages .woocommerce-info::before,
.boutique-achat__messages .woocommerce-error::before,
.boutique-achat__messages .woocommerce-message::after {
	content: none;
	display: none;
}

/* « Voir le panier » : un lien, pas un second bouton à côté de celui de la
   zone ; WooCommerce le pose avant le texte, il passe après. */
.boutique-achat__messages .woocommerce-message .button {
	background: none;
	border: 0;
	color: var(--link, var(--accent));
	float: none;
	font: inherit;
	order: 1;
	padding: 0;
	text-decoration: none;
}

.boutique-achat__messages .woocommerce-message .button:hover,
.boutique-achat__messages .woocommerce-message .button:focus-visible {
	background: none;
	color: var(--link, var(--accent));
	text-decoration: underline;
}

/* =========================================================================
 * 2. Le lien Panier de l'en-tête (action `ekdotis_entete_outils`)
 * ====================================================================== */

/* Couleur et famille du bandeau, de la direction : le lien est un outil de
   la barre, comme la loupe. Le lien de compte (« Se connecter », « Mon
   compte », 1.2.0) porte la même classe, et le même style. */
.bandeau-site__panier {
	align-items: center;
	color: inherit;
	display: inline-flex;
	font-family: inherit;
	font-size: var(--entete-menu-corps, 1rem);
	min-height: var(--cible, 44px);
	text-decoration: none;
	white-space: nowrap;
}

.bandeau-site__panier:hover,
.bandeau-site__panier:focus-visible {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.bandeau-site__panier:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Sous 64 rem, les outils se dissolvent dans la barre (main.css) : loupe en
   1, bascule en 2 ; le lien se range entre les deux. */
@media (max-width: 63.999rem) {
	.bandeau-site__panier {
		font-size: var(--font-size-s);
		order: 2;
	}

	/* Le lien de compte quitte la barre pour le panneau du menu (2 novembre
	   2026) : la barre garde la marque entière. */
	.bandeau-site__compte {
		display: none;
	}
}

/* Le lien de compte dans le panneau du menu mobile (action du thème
   `ekdotis_menu_outils`), sous la liste : le corps et la cible d'une entrée
   du menu, la couleur de lien sur le fond du panneau, l'anneau de focus du
   thème. Au-dessus de 64 rem, il n'existe pas : la barre porte le sien. */
.navigation__compte {
	display: none;
}

@media (max-width: 63.999rem) {
	.navigation__compte {
		display: block;
		font-size: var(--menu-mobile-corps, 22px);
		margin: 0;
	}

	.navigation__compte-lien {
		align-items: center;
		color: var(--link);
		display: flex;
		min-height: var(--cible, 44px);
		padding-block: var(--space-xs);
		text-decoration: none;
	}

	.navigation__compte-lien:hover,
	.navigation__compte-lien:focus-visible {
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}

	.navigation__compte-lien:focus-visible {
		outline: var(--focus-ring, 2px solid currentColor);
		outline-offset: 2px;
	}

	.navigation__compte-lien[aria-current="page"] {
		font-weight: 600;
	}
}

/* =========================================================================
 * 3. Les pages de la boutique : la colonne
 * ====================================================================== */

/* Le panier, la commande et le compte ne sont pas de la prose : ni encadré
   (son fond et, dans certaines directions, son filet gauche), ni colonne de
   lecture. Le bloc prend la largeur du contenu. */
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .page-standard__contenu {
	background: none;
	border: 0;
	padding: 0;
}

:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .page-standard__texte {
	max-width: none;
}

/* =========================================================================
 * 4. Les blocs Panier et Commande
 * ====================================================================== */

:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout, .woocommerce-order, .woocommerce-page .page-standard .woocommerce) {
	color: var(--text);
	font-family: var(--font-ui);
	font-size: var(--font-size-s);
	line-height: var(--leading-normal);
}

/* Aucune capitale : WooCommerce en pose sur les en-têtes de colonnes, sur
   « Gratuit » (retrait sur place, livraison offerte), sur les badges, par
   des sélecteurs de trois classes qui changent d'une version à l'autre. La
   règle permanente ne se négocie pas sélecteur par sélecteur : `!important`,
   ici seulement (vu le 1er novembre 2026 : « Livraison GRATUIT », règle
   `.wc-block-components-totals-shipping .wc-block-components-totals-item strong`). */
:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout, .woocommerce-order, .woocommerce-page .page-standard .woocommerce) * {
	font-variant-caps: normal !important;
	letter-spacing: normal;
	text-transform: none !important;
}

/* Les titres des blocs : famille et graisse des titres de section du thème,
   à la couleur du texte. */
:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) :is(.wc-block-cart__totals-title, .wc-block-components-checkout-step__title, .wc-block-components-checkout-order-summary__title-text, .wc-block-components-title),
:is(.woocommerce-order, .woocommerce-page .page-standard .woocommerce) :is(h2, h3) {
	color: var(--text);
	font-family: var(--section-title-family, var(--font-body));
	font-size: var(--font-size-l);
	font-weight: var(--section-title-weight, 600);
	hyphens: manual;
	line-height: var(--leading-tight);
	overflow-wrap: normal;
	word-break: normal;
}

/* Les prix, les quantités, les libellés : la famille d'interface. */
:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) :is(.wc-block-components-product-name, .wc-block-components-product-price, .wc-block-components-formatted-money-amount, .wc-block-components-totals-item, .wc-block-components-product-metadata, .wc-block-components-panel__button, .wc-block-components-radio-control__label, .wc-block-components-checkbox__label, .wc-block-components-text-input label, .wc-block-components-text-input input, .wc-blocks-components-select__label, .wc-blocks-components-select__select, .wc-block-components-address-card, .wc-block-checkout__terms) {
	font-family: var(--font-ui);
}

:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) :is(.wc-block-components-product-metadata, .wc-block-components-totals-footer-item-tax, .wc-block-components-checkout-step__description, .wc-block-components-address-form__address_2-toggle, .wc-block-checkout__terms, .wc-block-components-totals-item__description) {
	color: var(--text-muted);
}

/* --- Les filets : tous retirés, sauf celui qui ouvre les totaux --------- */

:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) :is(.wc-block-cart-items, .wc-block-cart-items td, .wc-block-cart-items th, .wc-block-cart-items__header, .wc-block-cart-items__row, .wc-block-components-totals-wrapper, .wp-block-woocommerce-cart-order-summary-block, .wp-block-woocommerce-checkout-order-summary-block, .checkout-order-summary-block-fill, .wc-block-components-checkout-order-summary__title, .wc-block-components-order-summary, .wc-block-components-panel, .wc-block-components-totals-coupon, .wc-block-components-sidebar, .wc-block-checkout__actions, .wc-block-components-checkout-step, .wc-block-components-radio-control-accordion-option, .wc-block-components-radio-control__option, .wc-block-components-shipping-rates-control__package, .wc-block-checkout__no-payment-methods-notice, .wc-block-components-notice-banner, .wc-block-components-express-payment-continue-rule, .wc-block-checkout__terms) {
	border: 0;
	box-shadow: none;
}

:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) :is(.wc-block-components-express-payment-continue-rule)::before,
:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) :is(.wc-block-components-express-payment-continue-rule)::after,
:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-checkout-step::after {
	border: 0;
	content: none;
}

/* Le résumé de commande et les totaux sur un fond, pas dans un cadre. */
.wp-block-woocommerce-cart .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block,
.wp-block-woocommerce-checkout .checkout-order-summary-block-fill,
.wp-block-woocommerce-checkout .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
	background: var(--surface-alt);
	border-radius: var(--radius-s);
	padding: var(--space-xs) var(--space-s);
}

.wp-block-woocommerce-checkout .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block .checkout-order-summary-block-fill {
	padding: 0;
}

:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-totals-wrapper {
	padding-inline: 0;
}

:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-totals-footer-item {
	font-size: var(--font-size-m);
	font-weight: 600;
}

/* --- Liens : soulignés au survol et au focus seulement ----------------- */

:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout, .woocommerce-order, .woocommerce-page .page-standard .woocommerce) a:not(.wc-block-components-button, .button) {
	color: var(--link, var(--accent));
	text-decoration: none;
}

:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout, .woocommerce-order, .woocommerce-page .page-standard .woocommerce) a:not(.wc-block-components-button, .button):is(:hover, :focus-visible) {
	text-decoration: underline;
}

:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-product-name {
	color: var(--text);
	font-size: var(--font-size-s);
	font-weight: 600;
}

:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-cart-item__remove-link,
:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-address-form__address_2-toggle,
:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-checkout-step__heading-content a {
	color: var(--text-muted);
	text-decoration: none;
}

:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-cart-item__remove-link:is(:hover, :focus-visible),
:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-address-form__address_2-toggle:is(:hover, :focus-visible) {
	color: var(--text);
	text-decoration: underline;
}

/* --- Le bouton : celui du thème ---------------------------------------- */

:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-button:not(.is-link),
:is(.woocommerce-order, .woocommerce-page .page-standard .woocommerce) :is(.button, button[type="submit"]) {
	background: var(--accent);
	border: 0;
	border-radius: var(--radius-m);
	box-shadow: none;
	color: var(--text-on-accent);
	font-family: var(--font-ui);
	font-size: var(--font-size-s);
	font-weight: 600;
	min-height: 2.75rem;
	padding: var(--space-2xs) var(--space-s);
	text-decoration: none;
}

:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-button:not(.is-link):is(:hover, :focus-visible),
:is(.woocommerce-order, .woocommerce-page .page-standard .woocommerce) :is(.button, button[type="submit"]):is(:hover, :focus-visible) {
	background: var(--accent);
	color: var(--text-on-accent);
	text-decoration: underline;
}

:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout, .woocommerce-order, .woocommerce-page .page-standard .woocommerce) :is(.wc-block-components-button, .button, button, input, select, textarea, a):focus-visible {
	outline: var(--focus-ring, 2px solid var(--accent));
	outline-offset: var(--focus-offset, 2px);
}

/* --- Les champs : bordure des champs du thème -------------------------- */

:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) :is(.wc-block-components-text-input input, .wc-blocks-components-select__select, .wc-block-components-textarea, .wc-block-components-combobox .components-combobox-control__input, .wc-block-components-quantity-selector),
:is(.woocommerce-page .page-standard .woocommerce) :is(input.input-text, select, textarea) {
	background-color: var(--surface);
	border-color: var(--border-strong);
	border-radius: var(--radius-s);
	color: var(--text);
}

:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) :is(.wc-block-components-text-input label, .wc-blocks-components-select__label) {
	color: var(--text-muted);
}

/* --- Les options de livraison et de paiement : un fond pour la choisie -- */

.wp-block-woocommerce-checkout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wp-block-woocommerce-checkout .wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted {
	background: var(--surface-alt);
	border-radius: var(--radius-s);
	box-shadow: none;
}

.wp-block-woocommerce-checkout .wc-block-components-radio-control--highlight-checked::after {
	border: 0;
	content: none;
}

/* Les avis des blocs (pas de moyen de paiement, erreurs) : un fond, pas de
   cadre. */
:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-notice-banner {
	background: var(--accent-soft);
	border-radius: var(--radius-s);
	color: var(--text);
}

/* =========================================================================
 * 5. Commande reçue et Mon compte (gabarits natifs, non surchargés)
 * ====================================================================== */

.woocommerce-order :is(.woocommerce-order-overview, .woocommerce-table, .woocommerce-table th, .woocommerce-table td, .woocommerce-table tfoot, .woocommerce-customer-details address, .woocommerce-column),
.woocommerce-page .page-standard .woocommerce :is(.woocommerce-form-login, .woocommerce-form-register, .woocommerce-MyAccount-navigation, .woocommerce-MyAccount-navigation li, table.shop_table, table.shop_table th, table.shop_table td, address) {
	border: 0;
	box-shadow: none;
}

.woocommerce .woocommerce-order ul.woocommerce-order-overview {
	background: var(--surface-alt);
	border-radius: var(--radius-s);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs) var(--space-l);
	list-style: none;
	margin: var(--space-s) 0 var(--space-l);
	padding: var(--space-s);
}

/* `.woocommerce ul.order_details li` pose des séparateurs en tirets, un
   flottant et des marges : repris ici à la même force. */
.woocommerce .woocommerce-order ul.woocommerce-order-overview li {
	border: 0;
	color: var(--text-muted);
	float: none;
	font-size: var(--font-size-xs);
	margin: 0;
	padding: 0;
}

.woocommerce .woocommerce-order ul.woocommerce-order-overview::before,
.woocommerce .woocommerce-order ul.woocommerce-order-overview::after {
	content: none;
}

.woocommerce .woocommerce-order ul.woocommerce-order-overview li strong {
	color: var(--text);
	display: block;
	font-size: var(--font-size-s);
}

.woocommerce-order .woocommerce-table th,
.woocommerce-order .woocommerce-table td,
.woocommerce-page .page-standard .woocommerce table.shop_table :is(th, td) {
	padding: var(--space-3xs) var(--space-xs) var(--space-3xs) 0;
	text-align: start;
	vertical-align: top;
}

.woocommerce-order .woocommerce-table tfoot tr:last-child :is(th, td) {
	font-size: var(--font-size-m);
	font-weight: 600;
}

.woocommerce-order .woocommerce-customer-details .woocommerce-column {
	margin-bottom: var(--space-m);
}

.woocommerce-order .woocommerce-customer-details address,
.woocommerce-page .page-standard .woocommerce address {
	background: var(--surface-alt);
	border-radius: var(--radius-s);
	font-style: normal;
	padding: var(--space-s);
}

/* La connexion et l'inscription : des fonds, pas des cadres. Sur Mon
   compte, et sur Commande reçue quand le client n'est plus connecté. */
.woocommerce-page .page-standard .woocommerce :is(.woocommerce-form-login, .woocommerce-form-register) {
	background: var(--surface-alt);
	border-radius: var(--radius-s);
	margin: var(--space-s) 0;
	padding: var(--space-s);
}

.woocommerce-page .page-standard .woocommerce .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0 0 var(--space-m);
	padding: 0;
}

.woocommerce-page .page-standard .woocommerce .woocommerce-MyAccount-navigation li {
	padding: var(--space-3xs) 0;
}

.woocommerce-page .page-standard .woocommerce .woocommerce-MyAccount-navigation li.is-active a {
	color: var(--text);
	font-weight: 600;
}

/* Les avis natifs (« Commande reçue », erreurs de connexion) : un fond, sans
   le filet de couleur ni l'icône de WooCommerce. */
:is(.woocommerce-order, .woocommerce-page .page-standard .woocommerce, .woocommerce-notices-wrapper) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-thankyou-order-received) {
	background: var(--accent-soft);
	border: 0;
	border-radius: var(--radius-s);
	color: var(--text);
	list-style: none;
	margin: 0 0 var(--space-m);
	padding: var(--space-xs) var(--space-s);
}

:is(.woocommerce-order, .woocommerce-page .page-standard .woocommerce, .woocommerce-notices-wrapper) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before {
	content: none;
	display: none;
}

/* =========================================================================
 * 6. Les conditions générales de vente (brouillon)
 * ====================================================================== */

.boutique-cgv__modele {
	background: var(--accent-soft);
	border-radius: var(--radius-s);
	color: var(--text);
	font-family: var(--font-ui);
	font-weight: 600;
	padding: var(--space-xs) var(--space-s);
}

/* =========================================================================
 * Achat depuis une liste (2 novembre 2026, CDC § 22.9)
 * ====================================================================== */

/* Le bouton au pied de la vignette : la vignette est une colonne flexible,
   la marge automatique le pousse en bas — alignés d'une vignette à l'autre
   d'une même rangée, quelle que soit la longueur du titre. Le bouton du
   thème, sur toute la largeur de la vignette, sans capitale. */
.vignette-achat {
	margin: auto 0 0;
	/* Pas plus large que la couverture : en colonne unique (320 px), la
	   vignette prend la rangée, la couverture non. */
	max-width: var(--cover-width, 100%);
	padding-top: var(--space-xs, 0.5rem);
}

.vignette-achat__bouton {
	/* Sans liseré, comme le bouton de la fiche (`.boutique-achat__bouton`) :
	   le cadre du bouton du thème comptait pour un filet. */
	border: 0;
	font-size: var(--font-size-s, 0.875rem);
	min-height: var(--cible, 44px);
	text-transform: none;
	white-space: normal;
	width: 100%;
}

.vignette-achat__bouton:focus-visible {
	outline: var(--focus-ring, 2px solid currentColor);
	outline-offset: 2px;
}

.vignette-achat__bouton[aria-busy="true"] {
	cursor: progress;
	opacity: 0.7;
}

/* La zone des avis en tête de liste : vide, elle ne prend aucune place. */
.boutique-liste__messages:empty {
	display: none;
}

.boutique-liste__messages {
	margin-block: var(--space-s, 1rem);
}


/* Le choix du point relais (WC Multishipping, W9) : son bouton n'a aucun style
   et sort avec celui du navigateur sur la page de commande en blocs. */
.wms_pickup_selection_button {
	background: var(--accent);
	border: 0;
	border-radius: var(--radius-s);
	color: var(--text-on-accent);
	cursor: pointer;
	font-family: var(--font-ui);
	font-size: var(--font-size-s);
	padding: var(--space-2xs) var(--space-s);
}

.wms_pickup_selection_button:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}