/*
Theme Name: MC Librairie
Theme URI: https://www.micro-concepts.be/
Author: Micro-Concepts
Author URI: https://www.micro-concepts.be/
Description: Thème socle FSE (Full Site Editing) des sites librairies Micro-Concepts. Fonctionnalités BnR fournies par le plugin bnr-connect ; design par variation de styles (theme.json) — le client édite tout dans l'éditeur de site natif.
Version: 0.1.52
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mc-librairie
Tags: full-site-editing, block-patterns, e-commerce
*/

/* Tout le style vient de theme.json (tokens + styles globaux).
   Ce fichier ne contient que des compléments impossibles en theme.json. */

/* Eyebrow — label mono majuscule (classe utilitaire posée dans les patterns). */
.mc-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	letter-spacing: var(--wp--custom--tracking-mono);
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

/* Cartes (évènements, encarts) — ombre et transition des tokens. */
.mc-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line-soft);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--custom--shadow--card);
	transition: box-shadow var(--wp--custom--transition--base);
}
.mc-card:hover {
	box-shadow: var(--wp--custom--shadow--hover);
}

/* Badges d'état (agenda). */
.mc-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: var(--wp--custom--radius--pill);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
	width: max-content;
}
.mc-badge--full { background: var(--wp--preset--color--danger); }
.mc-badge--past { background: var(--wp--preset--color--muted-2); }

/* Focus visibles (a11y AA). */
:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Options des menus natifs (axes de déclinaison, tri du catalogue…) : sans
   `color-scheme` déclaré, le navigateur ouvre la liste sur fond CLAIR même
   quand la variation du site est sombre — et les options y héritent l'encre
   ivoire du thème : ivoire sur blanc, sélections invisibles (vu sur Velours &
   Laiton). On peint donc chaque option aux jetons de la variation, ce qui est
   neutre sur un thème clair. Safari ignore ces propriétés mais sa liste est
   rendue par le système, toujours lisible. */
option {
	color: var(--wp--preset--color--ink, #1F1B16);
	background-color: var(--wp--preset--color--surface, #FFFFFF);
}

/* Lien « Voir tout → » des têtes de section (portage .rnr-section__more V1). */
.mc-more {
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	border-bottom: 2px solid var(--wp--preset--color--accent);
	padding-bottom: 3px;
	white-space: nowrap;
}
.mc-more:hover { color: var(--wp--preset--color--accent); }

/* ============================================================================
   UNIVERS — mosaïque (portage fidèle .rnr-univers V1)
   ========================================================================== */
.mc-univers__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--4-xl);
	margin: 0 0 32px;
}
/* (La mosaïque elle-même est rendue par le bloc bnr/universes — CSS dans le plugin bnr-connect.) */
/* Disposition « centrées » choisie depuis la console (bnr-connect ≥ 1.16.0) : le
   titre suit les tuiles au centre. Le bloc ne connaît pas le titre du thème, c'est
   donc le thème qui reconnaît la classe du bloc — d'où `:has()`. */
.mc-univers-wrap:has(.bnr-univers--layout-centered) .mc-univers__title { text-align: center; }

/* ============================================================================
   NEWSLETTER — carte sombre (portage .rnr-newsletter V1)
   ========================================================================== */
.mc-newsletter__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: 38px;
	line-height: 1.08;
	margin: 10px 0;
}
.mc-newsletter__desc {
	color: var(--wp--preset--color--on-dark-soft);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.6;
	max-width: 440px;
	margin: 0;
}
.mc-newsletter-form { display: flex; gap: 10px; flex-wrap: wrap; }
/* Le champ est posé sur la carte, pas sur la page : ses deux teintes passent par
   des variables locales, que la variante claire (.mc-newsletter--card) redéfinit.
   Sur une carte sombre, un blanc translucide reste la bonne réponse ; sur une
   carte blanche il disparaît, d'où le repli tokenisé. */
.mc-newsletter {
	--mc-nl-field-bd: rgba(244, 233, 221, .28);
	--mc-nl-field-bg: rgba(255, 255, 255, .06);
}
.mc-newsletter__input {
	flex: 1 1 200px;
	min-width: 0;
	padding: 13px 18px;
	font: inherit;
	font-size: var(--wp--preset--font-size--base);
	border-radius: var(--wp--custom--radius--pill);
	border: 1px solid var(--mc-nl-field-bd);
	background: var(--mc-nl-field-bg);
	color: var(--wp--preset--color--on-dark);
}
.mc-newsletter__input::placeholder { color: var(--wp--preset--color--on-dark-soft); }
/* Mention de désinscription : sur sa propre ligne quel que soit le sens du formulaire. */
.mc-newsletter__legal {
	flex-basis: 100%;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--on-dark-soft);
}
.mc-newsletter__input:focus { outline: none; border-color: var(--wp--preset--color--accent); }
.mc-newsletter-form .wp-element-button { min-height: 44px; cursor: pointer; }

/* ============================================================================
   WOOCOMMERCE — Direction A portée sur les templates blockifiés.
   Grille = Product Collection (.wc-block-product) ; fiche = blocs single ;
   panier/checkout = Cart & Checkout Blocks (.wc-block-*).
   ========================================================================== */

/* ---- Auteur du livre (injecté par functions.php sous le titre) ---- */
.mc-book-author {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
	margin: 2px 0 0;
}
.mc-book-author--single {
	font-size: var(--wp--preset--font-size--lg);
	margin: 0 0 4px;
}

/* ---- Grille produits (Product Collection) ---- */
.wc-block-product { text-align: left; position: relative; }
.wc-block-product .wc-block-components-product-image { margin: 0 0 16px; }
.wc-block-product .wc-block-components-product-image img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--sm);
	box-shadow: var(--wp--custom--shadow--cover);
	transition: transform var(--wp--custom--transition--slow), box-shadow var(--wp--custom--transition--slow);
}
.wc-block-product:hover .wc-block-components-product-image img {
	transform: translateY(-4px);
	box-shadow: var(--wp--custom--shadow--hover);
}
.wc-block-product .wp-block-post-title {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--base);
	margin: 0 0 2px;
}
.wc-block-product .wp-block-post-title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.wc-block-product .wp-block-post-title a:hover { color: var(--wp--preset--color--primary); }
.wc-block-product .wc-block-components-product-price {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	color: var(--wp--preset--color--primary);
	display: block;
	margin-top: 8px;
}
.wc-block-product .wc-block-components-product-price del {
	color: var(--wp--preset--color--muted-2);
	font-size: var(--wp--preset--font-size--base);
}
.wc-block-product .wc-block-components-product-price ins { text-decoration: none; }

/* Badge promo */
.wc-block-components-product-sale-badge {
	position: absolute;
	top: 12px; right: 12px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	padding: 4px 9px;
}

/* Bouton « Ajouter au panier » de la carte : variante discrète (outline) */
.wc-block-product .wp-block-button .wp-element-button,
.wc-block-product .wc-block-components-product-button .wp-element-button {
	background: transparent;
	color: var(--wp--preset--color--primary);
	border: 1.5px solid var(--wp--preset--color--primary);
	padding: 10px 18px;
	font-size: 14px;
	margin-top: 12px;
}
.wc-block-product .wp-block-button .wp-element-button:hover,
.wc-block-product .wc-block-components-product-button .wp-element-button:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
}

/* ---- Sidebar boutique : filtres (portage .rnr-filters V1) ---- */
.mc-filters .mc-filters__group,
.mc-filters .wp-block-woocommerce-filter-wrapper { margin-bottom: 30px; }
.mc-filters h4 {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
	margin: 0 0 14px;
}
/* Liste des catégories (bloc woocommerce/product-categories) */
.mc-filters .wc-block-product-categories-list {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 14px;
	color: var(--wp--preset--color--ink-soft);
}
.mc-filters .wc-block-product-categories-list li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	padding: 5px 0;
}
/* Sous-catégories (si la hiérarchie est réactivée) : à la ligne, indentées. */
.mc-filters .wc-block-product-categories-list li ul {
	flex-basis: 100%;
	padding-left: 14px;
	margin: 4px 0 0;
}
.mc-filters .wc-block-product-categories-list li a {
	color: inherit;
	text-decoration: none;
}
.mc-filters .wc-block-product-categories-list li a:hover { color: var(--wp--preset--color--primary); }
.mc-filters .wc-block-product-categories-list-item-count { color: var(--wp--preset--color--muted-2); }
/* Filtres prix / disponibilité (blocs natifs) */
.mc-filters .wc-block-components-price-slider__range-input-progress { --range-color: var(--wp--preset--color--primary); }
.mc-filters .wc-block-price-filter__range-text,
.mc-filters .wc-block-components-checkbox__label {
	font-size: 14px;
	color: var(--wp--preset--color--ink-soft);
}
.mc-filters .wc-block-components-checkbox .wc-block-components-checkbox__input:checked {
	background-color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}
.mc-filters .wc-block-components-filter-submit-button,
.mc-filters .wc-block-components-price-slider__button {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
	border-radius: var(--wp--custom--radius--pill);
	border: 0;
	font-weight: 700;
}
@media (max-width: 781px) {
	.mc-shoplayout { flex-wrap: wrap !important; }
	.mc-filters { flex-basis: 100% !important; }
	.mc-filters > * { display: inline-block; vertical-align: top; width: 32%; min-width: 200px; }
}

/* Barre méta boutique (compteur + tri) */
.woocommerce-result-count,
.wc-block-product-results-count p { font-size: 14px; color: var(--wp--preset--color--muted); margin: 0; }
.wc-block-catalog-sorting select,
.woocommerce-ordering select.orderby {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	font-size: 14px;
	padding: 8px 16px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
}

/* ---- Fiche produit ---- */
.woocommerce-product-gallery { width: 100% !important; margin: 0; }
.woocommerce-product-gallery img { border-radius: var(--wp--custom--radius--md); box-shadow: var(--wp--custom--shadow--cover-lg); }
/* Le visuel produit ne prend jamais le cintre `arche`, même quand la direction le
   définit : une couverture ou un coffret est une image rectangulaire dont le haut
   porte le titre — l'arrondir le rogne. Le cintre reste la signature des sections
   éditoriales (hero, univers, lieu), la boutique garde le rayon courant. */

/* ---- Avis produit : les champs natifs de WordPress, habillés comme le reste ---- */
.woocommerce-Reviews .comment-form input[type="text"],
.woocommerce-Reviews .comment-form input[type="email"],
.woocommerce-Reviews .comment-form textarea {
	width: 100%;
	max-width: 520px;
	padding: 12px 16px;
	font: inherit;
	font-size: var(--wp--preset--font-size--base);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--ink);
}
.woocommerce-Reviews .comment-form :is(input, textarea):focus {
	outline: 0;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px var(--wp--custom--focus-ring);
}
.woocommerce-Reviews .comment-form label {
	display: block;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--sm);
	margin-bottom: 6px;
}
.woocommerce-Reviews .comment-form-cookies-consent label { display: inline; font-weight: 400; }
.woocommerce-Reviews .comment-form p { margin-bottom: 18px; }
.mc-product-price .wc-block-components-product-price,
.wp-block-woocommerce-product-price.mc-product-price {
	font-family: var(--wp--preset--font-family--display);
	font-size: 38px;
	color: var(--wp--preset--color--primary);
	display: block;
	margin: 16px 0 24px;
}
.single-product .stock.in-stock {
	display: inline-block;
	background: var(--wp--preset--color--success);
	color: var(--wp--preset--color--on-accent);
	font-size: 13px;
	font-weight: 700;
	padding: 6px 13px;
	border-radius: var(--wp--custom--radius--pill);
}

/* Formulaire d'achat (markup classique rendu par le bloc add-to-cart-form) */
.wp-block-woocommerce-add-to-cart-form form.cart {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 20px;
	flex-wrap: wrap;
}
.wp-block-woocommerce-add-to-cart-form .quantity {
	display: flex;
	align-items: center;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill);
	overflow: hidden;
	background: var(--wp--preset--color--surface);
}
.wp-block-woocommerce-add-to-cart-form .quantity .qty {
	width: 64px;
	text-align: center;
	border: 0;
	background: transparent;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--base);
	padding: 14px 4px;
}
.wp-block-woocommerce-add-to-cart-form button.single_add_to_cart_button {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--md);
	line-height: 1;
	padding: 16px 28px;
	border: 1.5px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	cursor: pointer;
	transition: background var(--wp--custom--transition--base), border-color var(--wp--custom--transition--base);
}
.wp-block-woocommerce-add-to-cart-form button.single_add_to_cart_button:hover {
	background: var(--wp--preset--color--accent-deep);
	border-color: var(--wp--preset--color--accent-deep);
}

/* Déclinaisons (produit variable poussé par BnR) : le formulaire classique
   `form.variations_form` rendu par le même bloc — menus déroulants des axes,
   prix et disponibilité de la combinaison choisie, puis quantité + bouton. */
.wp-block-woocommerce-add-to-cart-form form.variations_form {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}
.wp-block-woocommerce-add-to-cart-form table.variations {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 8px;
}
.wp-block-woocommerce-add-to-cart-form table.variations tr { display: block; margin: 0 0 12px; }
.wp-block-woocommerce-add-to-cart-form table.variations th.label,
.wp-block-woocommerce-add-to-cart-form table.variations td.value {
	display: block;
	padding: 0;
	text-align: left;
}
.wp-block-woocommerce-add-to-cart-form table.variations th.label {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	margin: 0 0 6px;
}
/* Le second sélecteur reprend mot pour mot celui de woocommerce-blocktheme.css,
   (0,4,5) : woocommerce.css pose sur ces selects un chevron SVG base64 au trait
   NOIR CODÉ EN DUR — invisible sur une variation sombre (vu sur Velours &
   Laiton) — via `.woocommerce div.product form.cart .variations select`,
   (0,4,3), que la forme courte du bloc, (0,2,2), ne peut pas battre. Chargé
   après ces deux feuilles, (0,4,5) reprend la main sur tout le paquet
   (chevron, height:3em, min-width:70%, font-size small, margin-right). */
.wp-block-woocommerce-add-to-cart-form table.variations select,
.woocommerce div.product form.cart table.variations td select {
	box-sizing: border-box;
	display: block;
	width: 100%;
	min-width: 260px;
	max-width: 340px;
	height: auto;
	min-height: 48px;
	margin: 0;
	padding: 10px 40px 10px 16px;
	font: inherit;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.4;
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--md);
	/* Chevron dessiné aux jetons du thème (deux dégradés dans le padding droit
	   réservé) : lisible quelle que soit la palette, là où le SVG noir de Woo
	   et la flèche native (qui suit le `color-scheme`, pas le thème)
	   disparaissent sur un fond charbon. */
	appearance: none;
	background-color: var(--wp--preset--color--surface);
	background-image:
		linear-gradient(45deg, transparent 50%, var(--wp--preset--color--ink, #1F1B16) 50%),
		linear-gradient(135deg, var(--wp--preset--color--ink, #1F1B16) 50%, transparent 50%);
	background-position: calc(100% - 22px) calc(50% - 2px), calc(100% - 16px) calc(50% - 2px);
	background-size: 6px 6px;
	background-repeat: no-repeat;
}
.wp-block-woocommerce-add-to-cart-form table.variations select:focus,
.woocommerce div.product form.cart table.variations td select:focus {
	outline: 0;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px var(--wp--custom--focus-ring);
}
.wp-block-woocommerce-add-to-cart-form .reset_variations {
	display: inline-block;
	margin-top: 4px;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
}
.wp-block-woocommerce-add-to-cart-form .single_variation_wrap { margin: 4px 0 0; }
.wp-block-woocommerce-add-to-cart-form .woocommerce-variation.single_variation { margin: 0 0 14px; }
.wp-block-woocommerce-add-to-cart-form .woocommerce-variation-price .price {
	font-family: var(--wp--preset--font-family--display);
	font-size: 28px;
	color: var(--wp--preset--color--primary);
}
.wp-block-woocommerce-add-to-cart-form .woocommerce-variation-availability .stock.in-stock {
	display: inline-block;
	background: var(--wp--preset--color--success);
	color: var(--wp--preset--color--on-accent);
	font-size: 13px;
	font-weight: 700;
	padding: 6px 13px;
	border-radius: var(--wp--custom--radius--pill);
}
.wp-block-woocommerce-add-to-cart-form .woocommerce-variation-availability .stock.out-of-stock {
	color: var(--wp--preset--color--danger, #B23A3A);
	font-weight: 700;
	font-size: 13px;
}
.wp-block-woocommerce-add-to-cart-form .woocommerce-variation-add-to-cart {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.wp-block-woocommerce-add-to-cart-form button.single_add_to_cart_button.disabled,
.wp-block-woocommerce-add-to-cart-form button.single_add_to_cart_button:disabled {
	opacity: .45;
	cursor: not-allowed;
}

/* Méta produit (ISBN/UGS, catégories) */
.wp-block-woocommerce-product-meta {
	border-top: 1px solid var(--wp--preset--color--line);
	margin-top: 32px;
	padding-top: 24px;
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--muted);
}
.wp-block-woocommerce-product-meta .wp-block-post-terms,
.wp-block-woocommerce-product-meta .wc-block-components-product-sku {
	display: block;
	padding: 6px 0;
	border-bottom: 1px dashed var(--wp--preset--color--line);
}
.wp-block-woocommerce-product-meta a { font-weight: 600; }

/* Détails produit (accordéon/onglets du bloc product-details) */
.wp-block-woocommerce-product-details { margin-top: 48px; }

/* Le panneau d'un onglet répète en titre le nom de l'onglet actif : « Description »
   s'affichait deux fois, une fois dans la barre d'onglets et une fois en dessous en
   37 px. Le titre est retiré de l'œil mais conservé pour les lecteurs d'écran, qui
   s'en servent pour se repérer dans la page. Le sélecteur vise l'enfant DIRECT du
   panneau : un h2 écrit par le libraire dans son résumé n'est pas concerné. */
.single-product .woocommerce-Tabs-panel > h2 {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* « Produits similaires » : le seul titre de section qui reste visible sur la fiche.
   theme.json donne 4XL (37 px) à tous les h2 — la bonne mesure pour une tête de
   section d'accueil, mais deux points seulement sous le titre du produit (45 px).
   Il passe à 2XL. `.single-product` est indispensable : le bloc `product-collection`
   sert aussi aux sections de l'accueil, qui doivent rester grandes. */
.single-product .wp-block-woocommerce-product-collection > h2.wp-block-heading {
	font-size: var(--wp--preset--font-size--2xl, 27px);
}

/* ---- Panier & Checkout (Cart/Checkout Blocks) ---- */

/* Cartes récapitulatives en crème */
.wp-block-woocommerce-cart .wc-block-cart__sidebar,
.wc-block-checkout__sidebar {
	background: var(--wp--preset--color--cream);
	border-radius: var(--wp--custom--radius--lg);
	padding: 24px;
}

/* En-têtes de colonnes du panier en mono uppercase */
.wc-block-cart-items th {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.wc-block-cart-items td { border-bottom: 1px solid var(--wp--preset--color--line); }

/* Vignettes 3:4, noms en gras, prix en display bordeaux */
.wc-block-cart-item__image img {
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--sm);
}
.wc-block-components-product-name {
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.wc-block-cart-item__prices .wc-block-components-product-price,
.wc-block-cart-item__total .wc-block-components-product-price {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	color: var(--wp--preset--color--primary);
}
.wc-block-cart-item__remove-link {
	color: var(--wp--preset--color--muted-2);
	text-decoration: none;
}
.wc-block-cart-item__remove-link:hover { color: var(--wp--preset--color--danger); }

/* Sélecteur de quantité en pilule */
.wc-block-components-quantity-selector {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--surface);
}
.wc-block-components-quantity-selector::after { border: 0; }

/* Total commande en display bordeaux */
.wc-block-components-totals-footer-item .wc-block-formatted-money-amount {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--2-xl);
	color: var(--wp--preset--color--primary);
}

/* Boutons de commande : pleine largeur (le pill terracotta vient de theme.json) */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	width: 100%;
	min-height: 52px;
}

/* Champs de formulaire checkout */
.wc-block-components-text-input input,
.wc-block-components-combobox .wc-block-components-combobox-control input,
.wc-block-components-form .wc-block-components-textarea,
.wc-block-components-country-input input,
.wc-block-components-state-input input {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--md);
	font-family: var(--wp--preset--font-family--sans);
	color: var(--wp--preset--color--ink);
}
.wc-block-components-text-input input:focus,
.wc-block-components-form .wc-block-components-textarea:focus {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px var(--wp--custom--focus-ring);
	outline: 0;
}

/* Méthodes de paiement en cartes */
.wc-block-components-radio-control-accordion-option,
.wc-block-checkout__payment-method .wc-block-components-radio-control__option {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--surface);
	margin-bottom: 12px;
	padding: 16px;
}

/* ---- Notices (bannières blocks + messages classiques) ---- */
.wc-block-components-notice-banner {
	border: 0;
	border-radius: var(--wp--custom--radius--md);
	padding: 16px 20px;
}
.wc-block-components-notice-banner.is-success { background: var(--wp--custom--notice--success-bg); color: var(--wp--custom--notice--success-ink); border-left: 4px solid var(--wp--preset--color--success); }
.wc-block-components-notice-banner.is-info    { background: var(--wp--preset--color--cream); color: var(--wp--preset--color--ink-soft); border-left: 4px solid var(--wp--preset--color--accent); }
.wc-block-components-notice-banner.is-error   { background: var(--wp--custom--notice--error-bg); color: var(--wp--custom--notice--error-ink); border-left: 4px solid var(--wp--preset--color--danger); }
.woocommerce-message { background: var(--wp--custom--notice--success-bg); color: var(--wp--custom--notice--success-ink); border: 0; border-left: 4px solid var(--wp--preset--color--success); border-radius: var(--wp--custom--radius--md); padding: 16px 20px; }
.woocommerce-info    { background: var(--wp--preset--color--cream); color: var(--wp--preset--color--ink-soft); border: 0; border-left: 4px solid var(--wp--preset--color--accent); border-radius: var(--wp--custom--radius--md); padding: 16px 20px; }
.woocommerce-error   { background: var(--wp--custom--notice--error-bg); color: var(--wp--custom--notice--error-ink); border: 0; border-left: 4px solid var(--wp--preset--color--danger); border-radius: var(--wp--custom--radius--md); padding: 16px 20px; list-style: none; }

/* ---- Pagination (boutique + requêtes) ---- */
.wp-block-query-pagination .page-numbers {
	width: 38px; height: 38px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: var(--wp--custom--radius--pill);
	border: 1px solid var(--wp--preset--color--line);
	font-weight: 600; font-size: 14px;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.wp-block-query-pagination .page-numbers.current,
.wp-block-query-pagination a.page-numbers:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
	border-color: var(--wp--preset--color--primary);
}

/* ---- Responsive boutique ---- */
@media (max-width: 600px) {
	.wp-block-woocommerce-add-to-cart-form form.cart { flex-wrap: wrap; }
	.wp-block-woocommerce-add-to-cart-form button.single_add_to_cart_button { flex: 1 1 100%; min-height: 48px; }
	.mc-product-price .wc-block-components-product-price { font-size: 30px; }
}

/* ============================================================================
   ACCUEIL ÉDITORIALE — sections de la page d'accueil (compositions patterns/*.php).
   Chaque section expose ses couleurs via des variables locales (--mc-fg, --mc-rule…)
   pour qu'une section inversée (.mc-sec--alt) bascule tout son contenu d'un seul
   endroit, sans dupliquer les règles composant par composant.
   ========================================================================== */

.mc-sec {
	--mc-fg:       var(--wp--preset--color--ink);
	--mc-fg-soft:  var(--wp--preset--color--muted);
	--mc-rule:     var(--wp--preset--color--line);
	--mc-label:    var(--wp--preset--color--accent);
	--mc-hl:       var(--wp--preset--color--primary);
	padding-top: var(--wp--custom--section-pad);
	padding-bottom: var(--wp--custom--section-pad);
}

/* Rupture de section : le contraire du fond de page (crème sur un thème sombre,
   sombre sur un thème clair). Les slugs alt-* portent les valeurs par variation. */
.mc-sec--alt {
	--mc-fg:       var(--wp--preset--color--on-alt);
	--mc-fg-soft:  var(--wp--preset--color--on-alt-soft);
	--mc-rule:     var(--wp--preset--color--alt-line);
	--mc-label:    var(--wp--preset--color--alt-accent);
	--mc-hl:       var(--wp--preset--color--primary-deep);
	background: var(--wp--preset--color--alt);
	color: var(--mc-fg);
}
.mc-sec--alt :is(h1, h2, h3, h4, h5, h6) { color: var(--mc-fg); }
.mc-sec--alt .mc-eyebrow { color: var(--mc-label); }
.mc-sec--alt a { color: var(--mc-hl); }

/* Section posée sur la teinte de carte (rupture douce, sans inversion). */
.mc-sec--surface { background: var(--wp--preset--color--surface); }

/* Tête de section : titre à gauche, chapô ou lien à droite. */
.mc-sec-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 30px;
	margin-bottom: 50px;
}
.mc-sec-head__sub {
	max-width: 340px;
	font-size: var(--wp--preset--font-size--md);
	color: var(--mc-fg-soft);
	margin: 0;
}
.mc-sec-head h2 { margin: 14px 0 0; }

/* ---- Boutons secondaires (le bouton plein vient de theme.json) ---- */
.mc-btn-ghost {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 15px 28px;
	border: 1px solid var(--mc-rule);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--mc-fg);
	background: transparent;
	text-decoration: none;
	transition: var(--wp--custom--transition--slow);
}
.mc-btn-ghost:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}
.mc-sec--alt .mc-btn-ghost:hover {
	border-color: var(--mc-hl);
	color: var(--mc-hl);
}

/* Bouton plein en teinte de marque (contrepoint du bouton accent). */
.mc-btn-deep {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 15px 30px;
	border: 1px solid var(--wp--preset--color--primary-deep);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--primary-deep);
	color: var(--wp--preset--color--on-dark);
	text-decoration: none;
	transition: var(--wp--custom--transition--slow);
}
.mc-btn-deep:hover { filter: brightness(1.18); color: var(--wp--preset--color--on-dark); }

/* Lien fléché de bas de section. */
.mc-link-arrow {
	display: inline-flex; align-items: center; gap: 9px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking-mono);
	text-transform: uppercase;
	color: var(--mc-label);
	text-decoration: none;
	transition: gap var(--wp--custom--transition--slow);
}
.mc-link-arrow:hover { gap: 15px; }

/* ============================================================================
   COUPS DE CŒUR — grille produits numérotée (Product Collection dans .mc-books).
   ========================================================================== */

.mc-books .wp-block-post-template { counter-reset: mc-book; }

/* Numéro 01, 02… suivi d'un filet qui court jusqu'au bord de la colonne. */
.mc-books .wc-block-product {
	counter-increment: mc-book;
	padding-top: 32px;
}
.mc-books .wc-block-product::before {
	content: counter(mc-book, decimal-leading-zero);
	position: absolute;
	top: 0; left: 0;
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1;
	color: var(--wp--preset--color--accent);
}
.mc-books .wc-block-product::after {
	content: "";
	position: absolute;
	top: 9px; left: 2.4em; right: 0;
	height: 1px;
	background: var(--mc-rule);
}
/* Le badge promo descend sous la ligne du numéro. */
.mc-books .wc-block-components-product-sale-badge { top: 44px; }

/* Genre du livre (bloc core/post-terms, catégorie produit). */
.mc-books .wp-block-post-terms {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: var(--wp--custom--tracking-mono);
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	margin: 0 0 5px;
}
.mc-books .wp-block-post-terms a { color: inherit; text-decoration: none; }

/* Titre en display : la grille boutique reste en sans, l'accueil passe en serif. */
.mc-books .wc-block-product .wp-block-post-title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--xl);
	line-height: var(--wp--custom--line-height--snug);
}
.mc-books .mc-book-author {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: var(--wp--preset--font-size--base);
}

/* Ligne prix / disponibilité, séparée par un filet. */
.mc-books .mc-book-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 13px;
	padding-top: 13px;
	border-top: 1px solid var(--mc-rule);
}
.mc-books .mc-book-meta .wc-block-components-product-price { margin-top: 0; }
.mc-books .wc-block-components-product-stock-indicator {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--success);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 0;
	padding: 0;
}
.mc-books .wc-block-components-product-stock-indicator::before {
	content: "";
	width: 6px; height: 6px;
	border-radius: 50%;
	background: currentColor;
}
.mc-books .wc-block-components-product-stock-indicator--low,
.mc-books .wc-block-components-product-stock-indicator--out-of-stock { color: var(--wp--preset--color--danger); }

/* Bouton pleine largeur qui se remplit au survol de la carte. */
.mc-books .wc-block-product .wp-block-button,
.mc-books .wc-block-product .wc-block-components-product-button { display: block; }
.mc-books .wc-block-product .wp-block-button .wp-element-button,
.mc-books .wc-block-product .wc-block-components-product-button .wp-element-button {
	display: block;
	width: 100%;
	text-align: center;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: var(--wp--custom--tracking-mono);
	text-transform: uppercase;
	border-color: var(--mc-rule);
	color: var(--mc-fg);
	padding: 11px;
}
.mc-books .wc-block-product:hover .wp-block-button .wp-element-button,
.mc-books .wc-block-product:hover .wc-block-components-product-button .wp-element-button {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
}

/* Le bloc dynamique bnr/coups-de-coeur (sélection console + mot du libraire)
   reprend les classes wc-* ci-dessus ; ici, seulement ce que la Product
   Collection apportait par le CSS de WooCommerce — grille, ancrage du numéro,
   couverture — plus le mot du libraire, propre au bloc. */
.mc-books .bnr-books {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px 24px;
}
.mc-books .bnr-books .wc-block-product { position: relative; }
/* La couverture porte la classe wc-block-components-product-image : ratio 3:4,
   ombre et survol viennent des règles de la grille boutique ci-dessus. */
.mc-books .bnr-book__cover { display: block; }
.mc-books .bnr-book__cover img { display: block; }
.mc-books .bnr-book .wp-block-post-title { margin: 0; }
.mc-books .mc-book-note {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: var(--wp--preset--font-size--base);
	color: var(--mc-fg-soft);
	margin: 8px 0 0;
}
@media (max-width: 960px) {
	.mc-books .bnr-books { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.mc-books .bnr-books { grid-template-columns: 1fr; }
}

/* ============================================================================
   LE LIEU — section magazine (photo + tampon, texte + carte de prix).
   ========================================================================== */

.mc-lieu {
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: 64px;
	align-items: center;
}
.mc-lieu__media { position: relative; }
.mc-lieu__media img {
	width: 100%;
	aspect-ratio: 5 / 6;
	object-fit: cover;
	border-radius: var(--wp--custom--arche, var(--wp--custom--radius--sm));
	box-shadow: var(--wp--custom--shadow--cover);
}
/* Tampon circulaire en débord : toujours en teinte profonde de marque, quelle
   que soit la variation — c'est lui qui signe la section claire. */
.mc-lieu__stamp {
	position: absolute;
	top: -22px; right: -20px;
	width: 118px; height: 118px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary-deep);
	border: 1px solid var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-dark);
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	text-align: center;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	line-height: var(--wp--custom--line-height--snug);
	box-shadow: var(--wp--custom--shadow--hover);
}
.mc-lieu__stamp p { margin: 0; }
.mc-lieu__stamp-sub {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 9px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	margin-top: 5px !important;
}
.mc-lieu__copy > h2 { margin: 18px 0; }
.mc-lieu__copy p { color: var(--mc-fg-soft); max-width: 480px; }

/* Carte (boissons, tarifs d'atelier…) : nom + description à gauche, prix à droite. */
.mc-carte { margin: 30px 0 32px; }
.mc-carte p { margin: 0; }
.mc-carte__row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	padding: 14px 0;
	border-bottom: 1px solid var(--mc-rule);
}
.mc-carte__name {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	line-height: var(--wp--custom--line-height--snug);
	color: var(--mc-fg);
}
.mc-carte__desc {
	display: block;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--mc-fg-soft);
	margin-top: 4px;
	max-width: 320px;
}
.mc-carte__price {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 600;
	color: var(--mc-hl);
	white-space: nowrap;
	flex-shrink: 0;
	padding-top: 2px;
}

/* ============================================================================
   COLLECTION — bande de produits non-livres (concept store, papeterie…).
   ========================================================================== */

.mc-store .wc-block-product .wc-block-components-product-image img { aspect-ratio: 4 / 5; }
.mc-store .wc-block-product .wp-block-post-title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--lg);
}
.mc-store .wc-block-product .wc-block-components-product-price {
	font-size: var(--wp--preset--font-size--md);
	color: var(--wp--preset--color--accent);
}

/* ============================================================================
   ACTUALITÉS — un article à la une + deux colonnes de brèves.
   ========================================================================== */

.mc-news { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 30px; }
.mc-news__feat img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--sm);
	margin-bottom: 20px;
}
.mc-news__cat,
.mc-news .wp-block-post-terms {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: var(--wp--custom--tracking-mono);
	text-transform: uppercase;
	color: var(--mc-hl);
	font-weight: 600;
	margin: 0 0 10px;
}
.mc-news__feat .wp-block-post-title { font-size: var(--wp--preset--font-size--3-xl); margin: 0 0 12px; }
.mc-news__feat .wp-block-post-excerpt { color: var(--mc-fg-soft); max-width: 440px; }
.mc-news__feat .wp-block-post-title a,
.mc-news__col .wp-block-post-title a { text-decoration: none; color: inherit; }

.mc-news__col .wp-block-post-template { display: flex; flex-direction: column; gap: 24px; }
.mc-news__col .wp-block-post {
	padding-bottom: 22px;
	border-bottom: 1px solid var(--mc-rule);
}
.mc-news__col .wp-block-post:last-child { border-bottom: 0; padding-bottom: 0; }
.mc-news__col .wp-block-post-date {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--mc-fg-soft);
	margin-bottom: 7px;
}
.mc-news__col .wp-block-post-title {
	font-size: var(--wp--preset--font-size--xl);
	line-height: var(--wp--custom--line-height--snug);
	margin: 0;
}
.mc-news__col .wp-block-post-title a:hover { color: var(--mc-hl); }

/* ============================================================================
   NEWSLETTER — variante bandeau pleine largeur (la carte reste .mc-newsletter).
   ========================================================================== */

.mc-newsletter--band {
	background: var(--wp--preset--color--primary-deep);
	color: var(--wp--preset--color--on-dark);
	text-align: center;
	border-radius: 0;
	margin: 0;
}
.mc-newsletter--band :is(h2, h3) {
	color: var(--wp--preset--color--on-dark);
	max-width: 640px;
	margin-inline: auto;
}
.mc-newsletter--band p {
	color: var(--wp--preset--color--on-dark-soft);
	max-width: 460px;
	margin-inline: auto;
}
.mc-newsletter--band .mc-eyebrow { justify-content: center; display: flex; }
.mc-newsletter--band .mc-newsletter-form { max-width: 470px; margin-inline: auto; }

/* ============================================================================
   MENUS DÉROULANTS — sous-menus de la navigation principale.
   Le menu se compose depuis Book'n Roll ou « Ma vitrine → Menu du site »
   (bnr-connect ≥ 1.26) et reste rendu par le bloc Navigation natif. Sans ces
   règles, WordPress pose un menu blanc à texte noir : lisible, mais étranger à la
   direction du site.
   `surface`, `ink` et `line` plutôt que `paper` ou `on-dark` : ce sont les jetons
   dont le rôle ne change pas d'un site à l'autre (fond de carte, texte courant,
   filet) — `on-dark` vaut une couleur sombre sur un site et claire sur un autre.
   Portée : le menu déployé à l'écran. Le menu mobile ouvert (`.is-menu-open`)
   garde le rendu de WordPress, qui y aplatit les sous-menus sur son propre fond :
   un texte `ink` clair y deviendrait illisible sur une variation sombre.
   Spécificité (0,4,0) : la règle de WordPress
   `.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container`
   pèse (0,3,0), et l'ordre de chargement des deux feuilles n'est pas garanti.
   ========================================================================== */

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item .wp-block-navigation__submenu-container,
.wp-block-navigation > .wp-block-navigation__container .wp-block-navigation-item .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--surface, #fff);
	color: var(--wp--preset--color--ink, #1c1518);
	border: 1px solid var(--wp--preset--color--line, rgba(0, 0, 0, .15));
	border-radius: 6px;
	box-shadow: 0 16px 36px -20px rgba(0, 0, 0, .35);
	padding: 6px 0;
	min-width: 230px;
	font-weight: 500;
}
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.wp-block-navigation > .wp-block-navigation__container .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 7px 16px;
}
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation > .wp-block-navigation__container .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: color-mix(in srgb, currentColor 7%, transparent);
}

/* ============================================================================
   EN-TÊTE ÉDITORIAL — barre d'annonce à deux zones et marque au sceau.
   (Classes optionnelles : posées dans le part header d'un site qui les utilise.)
   ========================================================================== */

.mc-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.mc-topbar p { margin: 0; }

/* En-tête collant : le fond reprend `paper` en translucide pour laisser deviner le
   défilement. Sélecteur élément + classe pour passer devant `.has-paper-background-color`,
   dont l'ordre de chargement n'est pas garanti. Repli opaque si le flou n'est pas géré. */
header.mc-header--sticky { position: sticky; top: 0; z-index: 60; }
@supports (backdrop-filter: blur(1px)) {
	header.mc-header--sticky {
		background: color-mix(in srgb, var(--wp--preset--color--paper) 82%, transparent);
		backdrop-filter: blur(14px);
	}
}

.mc-brand { display: flex; align-items: center; gap: 13px; }
.mc-brand__mark { line-height: 0; flex: none; }
/* Pas de taille en dur : elle vient de l'attribut `width` du bloc, donc réglable
   depuis l'éditeur de site.
   Découpe circulaire, et rien d'autre — pas de liseré ni de halo : un sceau porte
   déjà son propre cercle, un anneau CSS en dessinerait un second juste à côté.
   C'est la découpe qui supprime les coins du fichier ; la fusion « screen » du pied
   de page ne convient pas ici, le débord pose un z-index qui crée un contexte
   d'empilement et prive le mélange du fond de l'en-tête. */
.mc-brand__mark img {
	height: auto;
	aspect-ratio: 1;
	border-radius: 50%;
	object-fit: cover;
}
/* ---- Zone d'actions : recherche et compte en icônes nues, panier en bouton ----
   Les trois blocs arrivent avec leurs styles par défaut (bouton plein pour la
   recherche, icône seule pour le panier) ; on les ramène au même registre. */
.mc-actions {
	--mc-icon: var(--wp--preset--color--ink-soft);
	gap: 18px;
	color: var(--mc-icon);
}
/* Le bloc « code court » enveloppe son rendu dans un paragraphe : sans ça, ses
   marges décalent le bouton par rapport aux icônes de la ligne. */
.mc-actions p { margin: 0; }

/* Recherche : le bouton du thème (aplat + pilule) redevient une simple loupe. */
.mc-actions .wp-block-search__button {
	background: transparent;
	border: 0;
	padding: 0;
	color: var(--mc-icon);
	min-height: 0;
}
.mc-actions .wp-block-search__button:hover,
.mc-actions .wp-block-search__button:focus {
	background: transparent;
	color: var(--wp--preset--color--accent);
}
.mc-actions .wp-block-search__button svg { width: 22px; height: 22px; fill: currentColor; }

/* Compte. */
.mc-actions .wp-block-woocommerce-customer-account a { color: var(--mc-icon); text-decoration: none; }
.mc-actions .wp-block-woocommerce-customer-account a:hover { color: var(--wp--preset--color--accent); }
.mc-actions .wc-block-customer-account__account-icon { width: 22px; height: 22px; fill: currentColor; }

/* WooCommerce insère de lui-même son Mini-Cart dans l'en-tête des gabarits de
   boutique. Là où l'en-tête porte déjà le bouton panier du thème, les deux
   coexistaient : deux paniers à 40 px l'un de l'autre, dont un seul compte les
   articles. On masque le sien — et seulement là où le nôtre est présent, pour ne
   pas priver de panier un en-tête qui n'aurait que le bloc natif. */
header:has(.mc-cart) .wp-block-woocommerce-mini-cart { display: none; }

/* Panier : bouton encadré et libellé (rendu par le raccourci `mc_cart_button` du
   thème — voir functions.php ; le bloc Mini-Cart de WooCommerce est masqué
   ci-dessus quand les deux se retrouvent dans le même en-tête). */
.mc-cart {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 8px 15px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--sm);
	background: transparent;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: var(--wp--custom--transition--slow);
}
.mc-cart:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}
/* Pastille de comptage : seul point chaud de l'en-tête, d'où l'accent secondaire
   plutôt que le laiton, qui se fondrait dans le reste. */
.mc-cart__count {
	background: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--on-dark);
	padding: 1px 7px;
	border-radius: 9px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0;
}

/* Marque empilée : le titre prend sa largeur minimale, il se coupe donc à l'espace
   au lieu de s'étaler sur une ligne, et rend cette largeur à la navigation. */
.mc-brand--stacked .wp-block-site-title {
	width: min-content;
	line-height: 1.04;
}

/* Sceau en débord : il dépasse sous l'en-tête et mord sur le haut de la page, ce
   qui permet de l'agrandir franchement sans épaissir la barre. La marge basse
   négative lui fait rendre la hauteur qu'il occupait, et `flex-start` envoie tout
   le dépassement vers le bas — jamais sur la barre d'annonce au-dessus.
   Le débord tombe dans le retrait haut du hero (64 px) : il ne recouvre aucun
   texte tant qu'il reste en deçà — au-delà, il mordrait sur le kicker. */
.mc-brand--overhang .mc-brand__mark {
	align-self: flex-start;
	margin-bottom: calc(-1 * var(--mc-brand-overhang, 58px));
	position: relative;
	z-index: 1;
}

.mc-brand__est {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 9px;
	letter-spacing: .32em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	font-weight: 600;
	margin: 0;
}

/* ============================================================================
   PIED DE PAGE ÉDITORIAL — sceau et réseaux.
   ========================================================================== */

/* Même principe qu'en en-tête : la taille vient de l'attribut du bloc. La fusion
   « screen » efface le fond noir du sceau et ne laisse que la dorure. */
.mc-foot-mark img {
	height: auto;
	aspect-ratio: 1;
	border-radius: 50%;
	mix-blend-mode: screen;
}
/* Colonnes de liens du pied : une liste de navigation, pas une énumération —
   ni puce ni soulignement, le survol suffit à désigner le lien. */
.mc-foot-links {
	list-style: none;
	padding-left: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}
.mc-foot-links a { text-decoration: none; }
.mc-foot-links a:hover { text-decoration: underline; }

.mc-socials { display: flex; gap: 12px; }
.mc-socials a {
	width: 38px; height: 38px;
	border: 1px solid var(--wp--preset--color--alt-line);
	display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--on-dark-soft);
	text-decoration: none;
	transition: var(--wp--custom--transition--slow);
}
.mc-socials a:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}
.mc-foot-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	padding-top: 24px;
	border-top: 1px solid var(--wp--preset--color--alt-line);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--on-dark-soft);
}

/* ============================================================================
   FONDS DE GABARIT — un dégradé par famille de page (custom.fondGabarit).
   Le socle pose un aplat `paper` unique ; une direction peut vouloir que la page
   descende en valeur du haut vers le bas, et pas de la même façon au catalogue
   qu'au panier. Tant qu'une variation ne définit pas `fondGabarit`, tout retombe
   sur `none` : le fond reste l'aplat, aucun client existant ne bouge.

   Trois pièges, dans cet ordre :
   - `background-size: 100% 100%` est obligatoire, sinon le dégradé se répète ;
   - pas de `background-attachment: fixed` — le fond doit descendre avec la page ;
   - l'ordre des règles compte. Une page d'accueil statique porte aussi `.page`,
     et le panier comme la commande portent `.page` en plus de leur classe : les
     règles générales viennent donc EN PREMIER, les plus précises ensuite.
   ========================================================================== */

body {
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
body.page,
body.blog,
body.single-post,
body.archive,
body.search,
body.error404      { background-image: var(--wp--custom--fond-gabarit--annexes, none); }
body.post-type-archive-product,
body.tax-product_cat { background-image: var(--wp--custom--fond-gabarit--catalogue, none); }
body.single-product  { background-image: var(--wp--custom--fond-gabarit--fiche, none); }
body.woocommerce-cart     { background-image: var(--wp--custom--fond-gabarit--panier, none); }
body.woocommerce-checkout { background-image: var(--wp--custom--fond-gabarit--commande, none); }
body.home            { background-image: var(--wp--custom--fond-gabarit--accueil, none); }

/* Valeurs de bande (custom.bande) — aplats de zone : en-tête, bandeau d'agenda,
   pied. Classes optionnelles, posées dans l'assemblage d'un site qui les utilise ;
   sans token défini elles ne peignent rien et laissent voir le fond de page. */
.mc-band--header  { background: var(--wp--custom--bande--header, transparent); }
.mc-band--bandeau,
.mc-band--agenda  { background: var(--wp--custom--bande--bandeau, transparent); }
.mc-band--footer  { background: var(--wp--custom--bande--footer, transparent); }
.mc-band--alt     { background: var(--wp--custom--bande--alt, var(--wp--preset--color--alt)); }

/* Bande d'agenda : quand rien n'est à l'affiche, le bloc ne rend rien du tout —
   sans cette règle la bande resterait à l'écran avec son seul intitulé, ce qui
   se lit comme un oubli. La séquence de l'accueil se referme d'elle-même. */
.mc-band--agenda:not(:has(.bnr-events-strip)) { display: none; }

/* ============================================================================
   CARTES FLOTTANTES — variante « produit en carte » de la grille d'accueil.
   Contrepoint sobre de .mc-books (grille numérotée) : pas de numéro, pas de
   filet, une carte pleine qui porte l'image bord à bord et son propre corps.
   Le corps est un groupe `.mc-card__body` posé dans la composition.
   ========================================================================== */

.mc-cards .wc-block-product {
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--custom--shadow--card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: box-shadow var(--wp--custom--transition--base), transform var(--wp--custom--transition--slow);
}
.mc-cards .wc-block-product:hover {
	box-shadow: var(--wp--custom--shadow--hover);
	transform: translateY(-3px);
}
/* L'image occupe le haut de la carte : ni rayon propre, ni ombre, ni glissement
   au survol — c'est la carte entière qui bouge. */
.mc-cards .wc-block-components-product-image { margin: 0; }
.mc-cards .wc-block-components-product-image img,
.mc-cards .wc-block-product:hover .wc-block-components-product-image img {
	aspect-ratio: var(--mc-card-ratio, 1 / 1);
	border-radius: 0;
	box-shadow: none;
	transform: none;
}
.mc-cards .mc-card__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
	padding: 22px;
}
.mc-cards .wp-block-post-terms {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: var(--wp--custom--tracking-mono);
	text-transform: uppercase;
	color: var(--mc-fg-soft, var(--wp--preset--color--muted));
	margin: 0;
}
.mc-cards .wp-block-post-terms a { color: inherit; text-decoration: none; }
.mc-cards .wc-block-product .wp-block-post-title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--xl);
	line-height: var(--wp--custom--line-height--snug);
	margin: 0;
}
.mc-cards .wc-block-product .wp-block-post-title a { color: var(--wp--preset--color--primary); }
.mc-cards .wc-block-product .wc-block-components-product-price {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	margin-top: 8px;
}
.mc-cards .wc-block-components-product-stock-indicator {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	color: var(--wp--preset--color--success);
	border: 0;
	padding: 0;
}
.mc-cards .wc-block-components-product-stock-indicator--low,
.mc-cards .wc-block-components-product-stock-indicator--out-of-stock { color: var(--wp--preset--color--danger); }
/* Bouton en bas de carte, quelle que soit la longueur du titre. */
.mc-cards .wc-block-product .wp-block-button,
.mc-cards .wc-block-product .wc-block-components-product-button { display: block; margin-top: auto; padding-top: 14px; }
.mc-cards .wc-block-product .wp-block-button .wp-element-button,
.mc-cards .wc-block-product .wc-block-components-product-button .wp-element-button {
	display: block;
	width: 100%;
	text-align: center;
	min-height: 50px;
	margin-top: 0;
	font-size: var(--wp--preset--font-size--base);
}
/* Badge promo : sur la carte, il se pose dans l'angle de l'image. */
.mc-cards .wc-block-components-product-sale-badge { top: 14px; left: 14px; right: auto; }
/* Le bloc dynamique bnr/coups-de-coeur en mise en page « cartes » (bnr-connect
   ≥ 1.18.0) reprend les classes ci-dessus ; ici, seulement ce que la Product
   Collection apportait par le CSS de WooCommerce — la grille — plus le mot du
   libraire, propre au bloc. Même grille que .mc-books .bnr-books. */
.mc-cards .bnr-cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 28px 24px;
}
.mc-cards .bnr-card__cover { display: block; }
.mc-cards .bnr-card__cover img { display: block; width: 100%; object-fit: cover; }
.mc-cards .mc-book-note {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: var(--wp--preset--font-size--base);
	color: var(--mc-fg-soft, var(--wp--preset--color--muted));
	margin: 0;
}
@media (max-width: 960px) {
	.mc-cards .bnr-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.mc-cards .bnr-cards { grid-template-columns: 1fr; }
}

/* ============================================================================
   ENCARTS DU LIEU — trois notes posées sur la section en rupture, sans prix.
   Variante de .mc-carte pour un lieu qui n'a pas de carte à afficher.
   ========================================================================== */

.mc-notes { display: flex; flex-direction: column; gap: 14px; margin: 30px 0 32px; }
.mc-note {
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--md);
	padding: 20px 24px;
}
.mc-note p { margin: 0; }
.mc-note__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	line-height: var(--wp--custom--line-height--snug);
	color: var(--wp--preset--color--ink);
}
.mc-note__desc {
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--ink-soft);
	margin-top: 6px !important;
}

/* Sceau posé en débord de la photo du lieu (image, là où .mc-lieu__stamp est un
   tampon de texte). Le fond blanc sous l'image évite qu'un sceau à fond
   transparent laisse voir la photo au travers. */
.mc-lieu__seal {
	position: absolute;
	right: -24px;
	bottom: -24px;
	width: var(--mc-seal-size, 118px);
	line-height: 0;
	border-radius: 50%;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
	box-shadow: var(--wp--custom--shadow--hover);
}
/* Le sceau vit dans .mc-lieu__media : sans ces deux valeurs il hériterait du
   cadrage de la photo (ratio du média, cintre de l'arche). */
.mc-lieu__seal img {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	display: block;
	border-radius: 50%;
	box-shadow: none;
}
/* Le sceau passe au-dessus des photos ET des points de navigation quand la
   photo du lieu devient un diaporama : il appartient au lieu, pas à la vue. */
.mc-lieu__seal { z-index: 3; }

/* Variante haute : le sceau prend la place qu'occupait un badge de texte
   (`.mc-lieu__stamp`, en haut à droite) dans les compositions qui en avaient
   un. En bas, il recouvrirait la légende de la photo quand celle-ci défile.
   Strictement additive : la position et la taille par défaut ne bougent pas,
   les sites qui posent déjà un sceau gardent exactement leur rendu. */
.mc-lieu__seal--haut {
	--mc-seal-size: 110px;
	top: -22px;
	right: -20px;
	bottom: auto;
}
/* Le cadre du sceau doit rester un disque : la marge basse que le bloc image
   porte par défaut l'étirerait en ovale, le conteneur étant découpé en rond. */
.mc-lieu__seal--haut .wp-block-image { margin-bottom: 0; }

/* ============================================================================
   CADRE DORÉ — une image encadrée comme un tableau de la fin du XIXᵉ.

   Pour les lieux dont le décor est ancien (L'Encre Interdite et son café de
   style anglais 1900) : la photo cesse d'être une vignette et devient un
   tableau accroché au mur. Entièrement en CSS — aucune image de cadre à
   charger, donc net à toutes les tailles et sur tous les écrans.

   Le profil suit celui d'une moulure dorée à la feuille, éclairée depuis le
   haut-gauche comme le veut la convention : arête claire, gorge sombre, tore
   lumineux, puis retour d'ombre. Les teintes dérivent toutes de l'accent de la
   variation — un site dont l'accent n'est pas doré obtient un cadre à SA
   couleur, pas du laiton plaqué de force.
   ========================================================================== */

.mc-cadre-dore {
	--mc-or: var(--wp--preset--color--accent, #CDA862);
	--mc-or-pale: color-mix(in srgb, var(--mc-or) 34%, #FFF8E8);
	--mc-or-clair: color-mix(in srgb, var(--mc-or) 62%, #FFF3D6);
	--mc-or-sombre: color-mix(in srgb, var(--mc-or) 58%, #3A2A10);
	--mc-or-creux: color-mix(in srgb, var(--mc-or) 26%, #2A1C0A);

	position: relative;
	padding: clamp(14px, 4.6%, 30px);
	background:
		/* grain de la feuille d'or, à peine perceptible */
		repeating-linear-gradient(118deg, color-mix(in srgb, var(--mc-or-pale) 24%, transparent) 0 2px, transparent 2px 6px),
		/* le profil de la moulure */
		linear-gradient(138deg,
			var(--mc-or-pale) 0%,
			var(--mc-or-clair) 5%,
			var(--mc-or) 13%,
			var(--mc-or-sombre) 24%,
			var(--mc-or-creux) 30%,
			var(--mc-or-sombre) 37%,
			var(--mc-or) 47%,
			var(--mc-or-clair) 55%,
			var(--mc-or) 67%,
			var(--mc-or-sombre) 81%,
			var(--mc-or-clair) 93%,
			var(--mc-or) 100%);
	box-shadow:
		inset 0 0 0 1px var(--mc-or-creux),
		inset 0 2px 1px -1px color-mix(in srgb, var(--mc-or-pale) 60%, transparent),
		inset 0 -2px 1px -1px color-mix(in srgb, var(--mc-or-creux) 70%, transparent),
		0 22px 46px rgba(0, 0, 0, .45);
}
/* Le listel qui sépare la moulure de l'œuvre : creux sombre, arête claire. */
.mc-cadre-dore > .wp-block-gallery,
.mc-cadre-dore > figure,
.mc-cadre-dore > img {
	box-shadow:
		0 0 0 2px var(--mc-or-creux),
		0 0 0 4px var(--mc-or-clair),
		0 0 0 5px var(--mc-or-sombre);
}
/* Sur un écran étroit la moulure se resserre : à 30 px de chaque côté, elle
   mangerait le tiers de la photo. */
@media (max-width: 600px) {
	.mc-cadre-dore { padding: clamp(10px, 3.4%, 18px); }
}
/* La taille mobile est posée ici, la position l'est plus bas : les ajustements
   mobiles du sceau vivent dans la media query de la section, et celle-ci doit
   passer après pour reprendre la main sur la règle qui le ramène en bas. */
@media (max-width: 600px) {
	.mc-lieu__seal--haut { --mc-seal-size: 76px; }
}

/* ============================================================================
   GALERIE EN DIAPORAMA — style de bloc « Diaporama » (core/gallery)

   Les photos du bloc natif, empilées dans un cadre unique et enchaînées en
   fondu, au lieu de la grille. Le markup reste celui de WordPress : rien n'est
   imposé au contenu, seule la présentation change — le libraire garde la main
   sur ses photos depuis l'éditeur de site.

   Le cadre garde le ratio de la composition qui l'accueille (`--mc-diaporama-
   ratio`, 5/6 par défaut comme la photo du lieu) : poser le style sur une
   galerie ne déplace donc rien autour d'elle.

   Les sélecteurs reprennent `.has-nested-images` et le nom d'élément `figure`
   pour une raison précise : la feuille du bloc galerie de WordPress écrit
   `.wp-block-gallery.has-nested-images figure.wp-block-image { position:
   relative }`, soit (0,3,2). Sans cette qualification, nos règles pèsent
   (0,3,0), les vues restent en flux au lieu de s'empiler, et le diaporama
   n'affiche que sa première photo — les autres défilent hors du cadre.
   ========================================================================== */

.wp-block-gallery.has-nested-images.is-style-mc-diaporama {
	position: relative;
	display: block;              /* annule la grille du bloc galerie */
	aspect-ratio: var(--mc-diaporama-ratio, 5 / 6);
	margin: 0;
	overflow: hidden;
	background: var(--wp--preset--color--cream, #F3EADF);
}
.wp-block-gallery.has-nested-images.is-style-mc-diaporama > figure.wp-block-image {
	position: absolute;
	inset: 0;
	width: 100%;
	margin: 0;
	opacity: 0;
	transition: opacity .9s ease;
}
/* Tant que le script n'a pas pris la main — et s'il ne vient jamais — la
   première photo reste seule à l'écran : jamais de grille cassée, jamais de
   cadre vide. Une fois le diaporama monté, c'est `is-active` qui décide. */
.wp-block-gallery.has-nested-images.is-style-mc-diaporama:not(.is-ready) > figure.wp-block-image:first-child,
.wp-block-gallery.has-nested-images.is-style-mc-diaporama.is-ready > figure.wp-block-image.is-active {
	opacity: 1;
}
.wp-block-gallery.has-nested-images.is-style-mc-diaporama > figure.wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}
/* Légende en surimpression basse, sur un voile pour rester lisible quelle que
   soit la photo ; le bas est dégagé pour les points de navigation. */
.wp-block-gallery.has-nested-images.is-style-mc-diaporama > figure.wp-block-image figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 42px 22px 34px;
	text-align: center;
	font-size: var(--wp--preset--font-size--sm, 14px);
	color: var(--wp--preset--color--on-dark, #F4E9DD);
	background: linear-gradient(transparent, rgba(0, 0, 0, .55));
}
.mc-diaporama__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 12px;
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: 9px;
}
.mc-diaporama__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--on-dark, #F4E9DD);
	opacity: .45;
	cursor: pointer;
	transition: opacity var(--wp--custom--transition--base, .2s ease);
}
.mc-diaporama__dot.is-active { opacity: 1; }
.mc-diaporama__dot:hover { opacity: .8; }
.mc-diaporama__dot:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #CDA862);
	outline-offset: 3px;
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	.wp-block-gallery.has-nested-images.is-style-mc-diaporama > figure.wp-block-image { transition: none; }
}

/* ============================================================================
   JOURNAL EN CARTES — variante de .mc-news : une seule colonne de brèves, chaque
   brève sur sa carte plutôt que séparée par un filet.
   ========================================================================== */

.mc-news--cards { grid-template-columns: 1.2fr 1fr; }
.mc-news--cards .mc-news__feat img { border-radius: var(--wp--custom--radius--lg); }
.mc-news--cards .mc-news__col .wp-block-post-template { gap: 12px; }
.mc-news--cards .mc-news__col .wp-block-post {
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--md);
	padding: 18px 22px;
	border-bottom: 0;
}
.mc-news--cards .mc-news__col .wp-block-post-date { color: var(--wp--preset--color--muted); }
.mc-news--cards .mc-news__col .wp-block-post-title { color: var(--wp--preset--color--ink); }

/* Newsletter en carte claire : le champ reprend les teintes de page au lieu du
   blanc translucide, qui disparaît sur une carte blanche. */
.mc-newsletter--card {
	--mc-nl-field-bd: var(--wp--preset--color--line);
	--mc-nl-field-bg: var(--wp--preset--color--paper);
}
.mc-newsletter--card .mc-newsletter__title,
.mc-newsletter--card h2 { color: var(--wp--preset--color--ink); }

/* ============================================================================
   VISUEL D'ATTENTE — un produit sans photo garde les couleurs de la variation.
   `cardCover` (rayures, hachures…) se voit au travers du SVG d'attente, qui est
   semi-transparent ; sans token défini, rien ne change.
   ========================================================================== */

.wc-block-product .woocommerce-placeholder,
.mc-card .woocommerce-placeholder,
.woocommerce-product-gallery .woocommerce-placeholder {
	background-image: var(--wp--custom--card-cover, none);
	background-size: cover;
}

/* ============================================================================
   PANIER & COMMANDE — robustesse entre 960 et 1320 px.
   Sans `min-width: 0`, la colonne des articles refuse de descendre sous sa
   largeur de contenu et le récapitulatif se fait tronquer à droite.
   ========================================================================== */

.wc-block-cart,
.wc-block-checkout { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.wp-block-woocommerce-cart-items-block { min-width: 0; }
.wc-block-cart-item__product { min-width: 0; }

/* ---- Responsive accueil ---- */
@media (max-width: 960px) {
	.mc-sec-head { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 38px; }
	.mc-lieu { grid-template-columns: 1fr; gap: 48px; }
	.mc-lieu__media { max-width: 420px; }
	.mc-news { grid-template-columns: 1fr; }
	.mc-news__feat img { aspect-ratio: 16 / 9; }
	.mc-topbar { justify-content: center; text-align: center; }
	.mc-topbar .mc-topbar__r { display: none; }
	/* Sur petit écran l'en-tête est déjà compact : le sceau reprend sa place dans
	   le flux et redescend en taille, sinon il écrase la barre. */
	.mc-brand--overhang .mc-brand__mark { align-self: center; margin-bottom: 0; }
	.mc-brand--overhang .mc-brand__mark img { width: 56px; }
}
@media (max-width: 600px) {
	.mc-lieu__stamp { width: 92px; height: 92px; font-size: var(--wp--preset--font-size--base); top: -16px; right: -8px; }
	/* Même raison que le tampon : le débord se resserre pour ne pas ouvrir de
	   défilement horizontal sur un écran étroit. */
	.mc-lieu__seal { right: -10px; bottom: -12px; width: 84px; }
	/* La variante haute reprend la main : la règle ci-dessus la ramènerait en
	   bas, et comme `top` reste posé, le sceau s'étirerait sur toute la hauteur
	   de la photo au lieu de rester un disque. */
	.mc-lieu__seal--haut { top: -16px; right: -8px; bottom: auto; width: var(--mc-seal-size); }
	.mc-books .wc-block-product::after { display: none; }
}

/* ============================================================================
   NOUS CONTACTER — coordonnées en colonne, plan en regard.
   (Composition patterns/contact.php ; le formulaire vient de bnr-connect.)
   ========================================================================== */

.mc-contact-top {
	display: grid;
	grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
	margin-top: 44px;
}
.mc-contact-infos { display: flex; flex-direction: column; gap: 26px; }
.mc-contact-item p { margin: 0; }
.mc-contact-item__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking-mono);
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	margin-bottom: 7px !important;
}

/* Le plan garde son ratio quelle que soit la colonne : une iframe sans hauteur
   déclarée s'effondre à 150px, hauteur par défaut du remplacement. */
.mc-map { margin: 0; }
.mc-map__frame {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--md);
	/* La carte est le seul élément du site à ne pas être cintré : l'arche
	   rognerait le nord du plan, c'est-à-dire une rue sur deux. */
}
.mc-map__cap {
	margin-top: 12px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: var(--wp--custom--tracking-mono);
	text-transform: uppercase;
}
.mc-map__cap a { text-decoration: none; }

@media (max-width: 960px) {
	.mc-contact-top { grid-template-columns: 1fr; gap: 36px; }
	.mc-map__frame { aspect-ratio: 3 / 2; }
}