/*
Theme Name: Boussole Emporter
Theme URI: https://boussoledigitale.fr/themes/boussole-emporter
Description: Theme enfant de Hello Elementor pour un commerce de vente a emporter : carte, fiche produit, panier, commande et panneau lateral, ecrits mobile d abord. Concu pour fonctionner avec les extensions Emporter et Formules.
Author: La Boussole Digitale
Author URI: https://boussoledigitale.fr
Template: hello-elementor
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.8
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: boussole-emporter
Tags: e-commerce, custom-colors, translation-ready, accessibility-ready

LES COULEURS SE CHANGENT EN HUIT VALEURS, dans le Kit Elementor. Aucune
n est ecrite en dur ici : tout passe par les jetons --rlg-*.

AUCUN SELECTEUR NE CITE D IDENTIFIANT D ELEMENT ELEMENTOR. Ils sont
regeneres a l import - epreuve du 2026-08-12, 0 sur 9 preserve - et une
regle accrochee a l un d eux casserait chez le client suivant. Les
elements portent des classes semantiques : rlg-entete, rlg-ancres.
*/
/*
Theme Name: Hello Elementor Child - Roule La Galette
Template: hello-elementor
Version: 1.7.0
Text Domain: hello-elementor-child
Description: Theme enfant de Hello Elementor. Porte les en-tetes de securite repris d Astra le 2026-08-11, et la couche de design du site.
*/

/* ============================================================
   ROULE LA GALETTE - couche de design
   ------------------------------------------------------------
   Une seule source de verite pour les couleurs, les boutons,
   les liens et les etats de survol.

   Pourquoi ici et non dans les reglages Elementor : WooCommerce
   livre sa propre feuille de style, avec son mauve #7f54b3 sur
   les boutons et son rose sur les liens. Un reglage pose widget
   par widget se fait ecraser. Une couche de theme, chargee
   apres, gagne - et surtout elle s applique a TOUT, y compris
   aux pages que WooCommerce genere lui-meme.

   Les valeurs sont reliees aux couleurs globales d Elementor
   (--e-global-color-*) avec une valeur de repli : changer la
   couleur primaire dans le Kit repeint le site, et si le Kit
   disparait, le repli tient.
   ============================================================ */

body {
	--rlg-cidre: var( --e-global-color-primary, #c8892b );
	--rlg-cidre-fonce: var( --e-global-color-accent, #8a5c15 );
	--rlg-pommier: var( --e-global-color-secondary, #4a5d3a );
	--rlg-encre: var( --e-global-color-text, #1f1d1a );

	--rlg-papier: #efeae0;
	--rlg-craie: #fbfaf7;
	--rlg-sarrasin: #6e6152;
	--rlg-trait: #ddd5c7;

	--rlg-rayon: 2px;
	--rlg-cible: 48px; /* hauteur minimale d une cible tactile */
	--rlg-serif: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
}

/* ---------- Fondations ---------- */

body {
	color: var( --rlg-encre );
	background: #fff;
}

h1,
h2,
h3,
h4 {
	font-family: var( --rlg-serif );
	font-weight: 400;
	text-wrap: balance;
}

/* Hello met strong a "bolder" : sur un titre en graisse 300,
   bolder calcule 400, donc rien ne change visuellement. */
h1 strong,
h2 strong,
h3 strong {
	font-weight: 700;
}

a {
	color: var( --rlg-cidre-fonce );
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

a:hover {
	color: var( --rlg-encre );
}

/* Un focus visible partout, sans exception : c est la seule
   facon de naviguer au clavier. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.elementor-button:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var( --rlg-cidre-fonce );
	outline-offset: 2px;
	border-radius: var( --rlg-rayon );
}

/* ---------- Boutons : une seule apparence pour tous ---------- */

.elementor-button,
.wp-element-button,
button.button,
a.button,
input[type="submit"],
button[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var( --rlg-cible );
	padding: 0 24px;
	border: 1px solid var( --rlg-cidre );
	border-radius: var( --rlg-rayon );
	background-color: var( --rlg-cidre );
	color: #1f1d1a;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	text-transform: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.elementor-button:hover,
.elementor-button:focus,
.wp-element-button:hover,
button.button:hover,
a.button:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background-color: var( --rlg-cidre-fonce );
	border-color: var( --rlg-cidre-fonce );
	color: #fff;
}

/* Elementor genere une regle par element -
   .elementor-element-XXX .elementor-button { background-color: ... } -
   plus specifique que le survol ci-dessus, qui restait donc sans effet.
   L emporter ici est deliberé : le survol doit exister sur TOUS les
   boutons, quelle que soit la couleur posee dans le panneau. */
.elementor-widget-button .elementor-button:hover,
.elementor-widget-button .elementor-button:focus-visible,
.elementor-widget-form .elementor-button:hover,
.elementor-widget-woocommerce-product-add-to-cart .button:hover {
	background-color: var( --rlg-cidre-fonce ) !important;
	border-color: var( --rlg-cidre-fonce ) !important;
	color: #fff !important;
}

/* Le bouton secondaire garde son inversion propre. */
.rlg-bouton-creux .elementor-button:hover {
	background-color: var( --rlg-encre ) !important;
	border-color: var( --rlg-encre ) !important;
	color: var( --rlg-papier ) !important;
}

/* Bouton secondaire : le contour. Elementor le pose via une
   couleur de fond transparente. */
.elementor-button[class*="creux"],
.rlg-bouton-creux .elementor-button {
	background-color: transparent;
	border-color: var( --rlg-encre );
	color: var( --rlg-encre );
}

.elementor-button[class*="creux"]:hover,
.rlg-bouton-creux .elementor-button:hover {
	background-color: var( --rlg-encre );
	border-color: var( --rlg-encre );
	color: var( --rlg-papier );
}

/* Boutons desactives : lisibles, mais clairement inertes. */
.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button.disabled {
	background-color: var( --rlg-trait );
	border-color: var( --rlg-trait );
	color: var( --rlg-sarrasin );
	opacity: 1;
}

/* ---------- Menu ---------- */

.elementor-nav-menu .elementor-item {
	font-size: 0.92rem;
	font-weight: 500;
	color: var( --rlg-encre );
	transition: color 0.15s ease;
}

.elementor-nav-menu .elementor-item:hover,
.elementor-nav-menu .elementor-item.highlighted,
.elementor-nav-menu .elementor-item:focus {
	color: var( --rlg-cidre-fonce );
}

/* L element actif se signale par un trait, pas par une couleur
   seule : la couleur seule ne passe pas les criteres de
   contraste pour tout le monde. */
.elementor-nav-menu .elementor-item.elementor-item-active {
	color: var( --rlg-encre );
	box-shadow: inset 0 -2px 0 0 var( --rlg-cidre );
}

/* Sous-menus */
.elementor-nav-menu--dropdown {
	background-color: var( --rlg-craie );
	border: 1px solid var( --rlg-trait );
	border-radius: var( --rlg-rayon );
}

.elementor-nav-menu--dropdown a {
	color: var( --rlg-encre );
	min-height: var( --rlg-cible );
	display: flex;
	align-items: center;
}

.elementor-nav-menu--dropdown a:hover {
	background-color: var( --rlg-papier );
	color: var( --rlg-cidre-fonce );
}

/* ---------- WooCommerce ---------- */

/* Le prix : la meme serif que les titres, la meme couleur que
   les accents. Sinon WooCommerce le rend en gris systeme. */
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price {
	font-family: var( --rlg-serif );
	color: var( --rlg-cidre-fonce );
	font-weight: 400;
	font-variant-numeric: tabular-nums;
}

.woocommerce ul.products li.product .price {
	font-size: 1.15rem;
}

.woocommerce div.product p.price del,
.woocommerce ul.products li.product .price del {
	color: var( --rlg-sarrasin );
	opacity: 0.75;
}

/* Fiches produit en grille */
.woocommerce ul.products li.product {
	background: var( --rlg-craie );
	border: 1px solid var( --rlg-trait );
	border-radius: 3px;
	padding: 0 0 16px;
	overflow: hidden;
	transition: border-color 0.15s ease;
}

.woocommerce ul.products li.product:hover {
	border-color: var( --rlg-cidre );
}

.woocommerce ul.products li.product img {
	margin: 0 0 12px;
	border-radius: 0;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var( --rlg-serif );
	font-size: 1.05rem;
	line-height: 1.25;
	padding: 0 16px;
	color: var( --rlg-encre );
}

.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .button {
	margin-left: 16px;
	margin-right: 16px;
}

.woocommerce ul.products li.product .button {
	display: inline-flex;
	margin-top: 12px;
}

/* Pastille Promo */
.woocommerce span.onsale {
	background-color: var( --rlg-pommier );
	color: #fff;
	border-radius: var( --rlg-rayon );
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	min-height: 0;
	min-width: 0;
	line-height: 1;
	padding: 7px 10px;
}

/* Champ quantite : aligne sur la hauteur du bouton */
.woocommerce .quantity .qty {
	min-height: var( --rlg-cible );
	border: 1px solid var( --rlg-trait );
	border-radius: var( --rlg-rayon );
	background: #fff;
	color: var( --rlg-encre );
	font-variant-numeric: tabular-nums;
}

/* Messages : WooCommerce les rend en violet et en vert vif */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
	background-color: var( --rlg-craie );
	border-top: 3px solid var( --rlg-cidre );
	color: var( --rlg-encre );
	border-radius: var( --rlg-rayon );
}

.woocommerce-error {
	border-top-color: #b32d2e;
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var( --rlg-cidre-fonce );
}

.woocommerce-error::before {
	color: #b32d2e;
}

/* Fil d Ariane */
.woocommerce .woocommerce-breadcrumb,
.woocommerce-breadcrumb {
	color: var( --rlg-sarrasin );
	font-size: 0.85rem;
}

.woocommerce .woocommerce-breadcrumb a,
.woocommerce-breadcrumb a {
	color: var( --rlg-sarrasin );
}

.woocommerce .woocommerce-breadcrumb a:hover {
	color: var( --rlg-cidre-fonce );
}

/* Meta produit : les liens de categorie etaient roses */
.woocommerce div.product .product_meta,
.woocommerce div.product .product_meta a {
	color: var( --rlg-sarrasin );
	font-size: 0.88rem;
}

.woocommerce div.product .product_meta a:hover {
	color: var( --rlg-cidre-fonce );
}

/* Onglets produit */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	border-bottom-color: var( --rlg-craie );
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	color: var( --rlg-encre );
}

/* Tableaux : panier et commande */
.woocommerce table.shop_table {
	border-color: var( --rlg-trait );
	border-radius: 3px;
}

.woocommerce table.shop_table th {
	color: var( --rlg-encre );
	font-family: var( --rlg-serif );
	font-weight: 400;
}

.woocommerce-cart table.cart td.actions .coupon .input-text,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container--default .select2-selection--single {
	min-height: var( --rlg-cible );
	border: 1px solid var( --rlg-trait );
	border-radius: var( --rlg-rayon );
	background: #fff;
	color: var( --rlg-encre );
	padding: 10px 12px;
}

.woocommerce form .form-row label {
	color: var( --rlg-sarrasin );
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Le total du panier et de la commande */
.woocommerce-checkout #payment,
.woocommerce .cart_totals,
.woocommerce ul.order_details {
	background: var( --rlg-craie );
	border: 1px solid var( --rlg-trait );
	border-radius: 3px;
}

.woocommerce-checkout #payment div.payment_box {
	background-color: var( --rlg-papier );
	color: var( --rlg-encre );
}

.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var( --rlg-papier );
}

/* ---------- Formulaires Elementor ---------- */

.elementor-field-group .elementor-field-label {
	color: var( --rlg-sarrasin );
}

.elementor-field-group input:not([type="submit"]),
.elementor-field-group textarea,
.elementor-field-group select,
.elementor-field-group .elementor-field-textual {
	min-height: var( --rlg-cible );
	border: 1px solid var( --rlg-trait );
	border-radius: var( --rlg-rayon );
	background: #fff;
	color: var( --rlg-encre );
}

.elementor-field-group textarea {
	min-height: 120px;
	padding-top: 12px;
}

/* ---------- Accordeon FAQ ---------- */

.elementor-accordion .elementor-accordion-item {
	border-color: var( --rlg-trait );
}

.elementor-accordion .elementor-tab-title {
	min-height: var( --rlg-cible );
	display: flex;
	align-items: center;
	gap: 12px;
}

.elementor-accordion .elementor-tab-title.elementor-active {
	color: var( --rlg-cidre-fonce );
}

/* ============================================================
   LE BANDEAU "OU EST LE CAMION"
   ------------------------------------------------------------
   Pose sur fond sombre dans le hero. Les couleurs sont ecrites
   en dur ici : ce bloc doit rester lisible meme si le Kit
   Elementor change ou tarde a charger. Un texte sombre sur fond
   sombre ne se rattrape pas.
   ============================================================ */

.emporter-auj {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.emporter-auj__bloc {
	flex: 1 1 260px;
	display: grid;
	grid-template-areas:
		"jour   jour"
		"lieu   lieu"
		"heure  reste"
		"cta    cta";
	grid-template-columns: auto 1fr;
	align-items: baseline;
	gap: 2px 14px;

	padding: 18px 20px;
	background: rgba( 255, 255, 255, 0.055 );
	border: 1px solid rgba( 239, 234, 224, 0.16 );
	border-left: 3px solid #c8892b;
	border-radius: 3px;
}

.emporter-auj__etiq {
	grid-area: jour;
	margin: 0 0 2px;
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #c8892b;
}

.emporter-auj__lieu {
	grid-area: lieu;
	margin: 0;
	font-family: var( --rlg-serif );
	font-size: 1.5rem;
	line-height: 1.15;
	color: #efeae0;
}

.emporter-auj__adr {
	display: none; /* le code postal n aide pas ici, la page locale le donne */
}

.emporter-auj__horaire {
	grid-area: heure;
	margin: 8px 0 0;
	font-family: var( --rlg-serif );
	font-size: 1.65rem;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	color: #efeae0;
}

.emporter-auj__reste {
	grid-area: reste;
	margin: 8px 0 0;
	font-size: 0.82rem;
	line-height: 1.4;
	color: #a79a87;
}

.emporter-auj .emporter-bouton {
	grid-area: cta;
	justify-self: start;
	margin-top: 14px;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	background: #c8892b;
	color: #1f1d1a;
	font-size: 0.88rem;
	font-weight: 600;
	border-radius: 2px;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.emporter-auj .emporter-bouton:hover {
	background: #9e6a1c;
	color: #fff;
}

/* Sur fond clair, le bandeau s inverse. */
.rlg-clair .emporter-auj__bloc {
	background: var( --rlg-craie );
	border-color: var( --rlg-trait );
}

.rlg-clair .emporter-auj__lieu,
.rlg-clair .emporter-auj__horaire {
	color: var( --rlg-encre );
}

.rlg-clair .emporter-auj__reste {
	color: var( --rlg-sarrasin );
}

/* La semaine, sur fond sombre */
.emporter-semaine {
	gap: 8px;
}

.emporter-jour {
	background: rgba( 255, 255, 255, 0.045 );
	border-color: rgba( 239, 234, 224, 0.14 );
	padding: 14px 12px;
}

.emporter-jour__lieu {
	font-size: 1rem;
}

/* ---------- Details ---------- */

::selection {
	background: var( --rlg-cidre );
	color: #1f1d1a;
}

hr,
.elementor-divider-separator {
	border-color: var( --rlg-trait );
}

img {
	max-width: 100%;
	height: auto;
}

/* Rien ne doit faire deborder la page horizontalement. */
html,
body {
	overflow-x: clip;
}

@media ( prefers-reduced-motion: reduce ) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}


/* ------------------------------------------------------------
   Correctif : l heure et le creneau restant etaient sur deux
   colonnes, la seconde ecrasee a 60 px, avec un texte casse mot
   par mot. Une seule colonne, empilee.
   ------------------------------------------------------------ */
.emporter-auj__bloc {
	grid-template-areas: "jour" "lieu" "heure" "reste" "cta";
	grid-template-columns: 1fr;
	gap: 0;
}

.emporter-auj__horaire { margin-top: 10px; }
.emporter-auj__reste { margin-top: 4px; max-width: 34ch; }


/* ============================================================
   LE BANDEAU DU JOUR
   ------------------------------------------------------------
   Une seule ligne, sous le hero. Couleurs ecrites en dur : ce
   bloc est toujours pose sur fond sombre, et un texte sombre
   sur fond sombre ne se rattrape pas.
   ============================================================ */

.emporter-bandeau {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 36px;
	width: 100%;
}

.emporter-bandeau__jour {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #c8892b;
}

.emporter-bandeau__point {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #c8892b;
	box-shadow: 0 0 0 4px rgba( 200, 137, 43, 0.22 );
}

.emporter-bandeau__lieu {
	font-family: var( --rlg-serif );
	font-size: 1.45rem;
	line-height: 1.2;
	color: #efeae0;
}

.emporter-bandeau__h {
	font-variant-numeric: tabular-nums;
	font-size: 0.95rem;
	color: #a79a87;
}

.emporter-bandeau__note {
	font-size: 0.9rem;
	color: #a79a87;
	max-width: 40ch;
}

.emporter-bandeau__cta {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	min-height: 46px;
	padding: 0 22px;
	background: #c8892b;
	color: #1f1d1a;
	font-size: 0.92rem;
	font-weight: 600;
	border-radius: 2px;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.emporter-bandeau__cta:hover {
	background: #9e6a1c;
	color: #fff;
}

@media ( max-width: 900px ) {
	.emporter-bandeau { gap: 8px 20px; }
	.emporter-bandeau__cta { margin-left: 0; width: 100%; justify-content: center; }
}


/* ============================================================
   Vignettes produit
   ------------------------------------------------------------
   Une grille de boutique doit donner faim avant d informer.
   Le bouton reste visible et centre : un bouton qui n apparait
   qu au survol n existe pas sur un ecran tactile.
   ============================================================ */

.woocommerce ul.products {
	display: grid !important;
	grid-template-columns: repeat( 4, 1fr );
	gap: 32px;
	margin: 0;
}

/* WooCommerce pose des largeurs et des marges en pourcentage sur ses
   colonnes. En grille, elles se cumulent et cassent l alignement. */
.woocommerce ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 0 0 26px;
	border-radius: 4px;
	transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.woocommerce ul.products li.product::before,
.woocommerce ul.products li.product::after { content: none !important; }

.woocommerce ul.products li.product:hover {
	border-color: var( --rlg-cidre );
	transform: translateY( -3px );
	box-shadow: 0 12px 28px rgba( 31, 29, 26, .10 );
}

.woocommerce ul.products li.product .woocommerce-loop-product__link {
	display: block;
	width: 100%;
	overflow: hidden;
	border-radius: 4px 4px 0 0;
}

.woocommerce ul.products li.product a img {
	width: 100%;
	margin: 0 0 22px;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 0;
	transition: transform .5s ease;
}

.woocommerce ul.products li.product:hover a img { transform: scale( 1.05 ); }

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	padding: 0 22px;
	margin: 0 0 10px;
	font-size: 1.08rem;
	line-height: 1.35;
}

.woocommerce ul.products li.product .price {
	display: block;
	margin: 0 22px 20px;
	font-size: 1.3rem;
}

.woocommerce ul.products li.product .button {
	margin: auto 22px 0;
	align-self: center;
	min-width: 168px;
}

@media ( max-width: 1100px ) {
	.woocommerce ul.products { grid-template-columns: repeat( 3, 1fr ); gap: 26px; }
}

@media ( max-width: 820px ) {
	.woocommerce ul.products { grid-template-columns: repeat( 2, 1fr ); gap: 20px; }
}

@media ( max-width: 520px ) {
	.woocommerce ul.products { grid-template-columns: 1fr; }
}

@media ( prefers-reduced-motion: reduce ) {
	.woocommerce ul.products li.product,
	.woocommerce ul.products li.product a img { transition: none !important; transform: none !important; }
}

/* Elementor impose son ecart de grille par variables : on les reprend,
   sinon le gap pose plus haut reste sans effet. */
.woocommerce ul.products,
.elementor-widget-woocommerce-products ul.products {
	--grid-column-gap: 32px;
	--grid-row-gap: 44px;
	column-gap: 32px !important;
	row-gap: 44px !important;
}


/* ==========================================================
   MOBILE-A11Y.CSS
   ========================================================== */

/* ============================================================
   RECETTE MOBILE ET ACCESSIBILITE - 2026-08-11
   ------------------------------------------------------------
   Chaque regle repare un defaut MESURE au navigateur sur
   320 / 375 / 390 / 768 / 1024 / 1440 px.
   Le detail des mesures est dans state/QA_REPORT.md.

   Ce fichier est charge APRES style.css. Il est isolable :
   le retirer annule cette passe et rien d autre.
   ============================================================ */

:root {
	--rlg-sarrasin-clair: var( --e-global-color-sarrasinclair, #a79a87 );
}

/* ============================================================
   1. CIBLES TACTILES - 48 px
   ============================================================ */

/* Le bouton du menu mobile mesurait 33 x 33 px. C est la commande
   principale sur telephone, et la seule voie vers les six pages :
   elle ne peut pas etre la plus petite cible de l ecran. */
.elementor-menu-toggle {
	min-width: var( --rlg-cible );
	min-height: var( --rlg-cible );
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Retirer un article du panier : la croix mesurait 22 x 22 px.
   Rater cette cible, c est payer ce qu on ne voulait pas. */
.woocommerce a.remove,
.woocommerce table.cart a.remove,
.woocommerce-cart table.cart a.remove {
	width: var( --rlg-cible );
	height: var( --rlg-cible );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	font-size: 1.5rem;
	border-radius: var( --rlg-rayon );
}

/* La loupe de la galerie produit : 36 x 36 px. */
.woocommerce-product-gallery__trigger {
	width: var( --rlg-cible );
	height: var( --rlg-cible );
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Le tri de la boutique, et les cases a cocher du tunnel :
   la case "creer un compte" mesurait 13 x 13 px. */
.woocommerce select.orderby,
.woocommerce-ordering select {
	min-height: var( --rlg-cible );
	padding: 10px 12px;
	border: 1px solid var( --rlg-trait );
	border-radius: var( --rlg-rayon );
	background: #fff;
	color: var( --rlg-encre );
}

.woocommerce form .form-row input[type="checkbox"],
.woocommerce-checkout input[type="checkbox"],
.woocommerce-form__input-checkbox,
.elementor-field-type-checkbox input[type="checkbox"],
.elementor-field-type-acceptance input[type="checkbox"] {
	width: 24px;
	height: 24px;
	min-width: 24px;
	margin-right: 10px;
	vertical-align: middle;
	accent-color: var( --rlg-cidre-fonce );
}

/* La zone cliquable de ces cases doit suivre : c est le libelle
   qu on vise avec le pouce, pas le carre de 24 px. */
.woocommerce-form__label-for-checkbox,
.woocommerce-checkout label.checkbox,
.woocommerce form .form-row label.checkbox {
	display: inline-flex;
	align-items: center;
	min-height: var( --rlg-cible );
	gap: 4px;
	cursor: pointer;
}

/* Afficher/masquer le mot de passe : 22 x 22 px. */
.woocommerce button.show-password-input,
.woocommerce .show-password-input {
	width: var( --rlg-cible );
	height: var( --rlg-cible );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	top: 0;
	right: 0;
}

/* ============================================================
   2. CONTRASTE
   ------------------------------------------------------------
   Le texte doux du plugin Emporter etait pose a #8d8477 sur
   #2a2825 : 3,97:1, sous le seuil AA de 4,5:1.
   #a79a87 sur le meme fond donne 5,33:1.
   ============================================================ */

.emporter-jour__h,
.emporter-jour__nom,
.emporter-jour__date,
.emporter-jour__auj,
.emporter-semaine .emporter-jour__h {
	color: var( --rlg-sarrasin-clair );
}

/* Le sarrasin #6e6152 ne tient que sur fond clair (5,9:1 sur
   craie). Sur l encre du pied de page il tombe a 2,8:1. */
.rlg-sombre,
.rlg-sombre p,
.rlg-sombre li {
	color: var( --rlg-sarrasin-clair );
}

/* ============================================================
   3. TAILLE DE TEXTE
   ------------------------------------------------------------
   Les noms de jour du selecteur tombaient a 9,92 px. En dessous
   de 12 px, un texte porteur d information n est plus lisible
   au bras tendu.
   ============================================================ */

.emporter-jour__nom,
.emporter-jour__auj,
.emporter-bandeau__jour {
	font-size: 0.78rem;
}

/* ============================================================
   4. LE SELECTEUR DE CRENEAU SUR TELEPHONE
   ------------------------------------------------------------
   C est l ecran qui decide de la commande. Les creneaux doivent
   rester en grille lisible, jamais en ligne qui deborde.
   ============================================================ */

@media ( max-width: 767px ) {
	.emporter-creneaux {
		display: grid;
		grid-template-columns: repeat( auto-fill, minmax( 84px, 1fr ) );
		gap: 8px;
	}

	.emporter-creneau {
		min-height: var( --rlg-cible );
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.emporter-jours {
		display: grid;
		grid-template-columns: repeat( auto-fill, minmax( 140px, 1fr ) );
		gap: 8px;
	}
}

/* La section 5 (tableaux du panier) a ete RETIREE : sa regle
   display:flex sur tous les td cassait la mise en page avec un
   panier reel. Elle est remplacee par mobile-a11y-3.css. */

/* ============================================================
   6. REFLOW
   ------------------------------------------------------------
   overflow-x: clip cachait les debordements au lieu de les
   corriger : un bouton hors cadre restait hors d atteinte,
   sans barre de defilement pour le rattraper. Les conteneurs
   s empilent desormais sous 768 px (regle posee element par
   element dans Elementor), donc le clip n a plus rien a cacher
   et devient une securite, non un pansement.

   Ce qui suit protege les contenus qui ne peuvent pas s empiler.
   ============================================================ */

pre,
table.shop_table {
	max-width: 100%;
}

.elementor-widget-table-of-contents,
.woocommerce-tabs .panel {
	overflow-wrap: break-word;
}

/* Une image ne deborde jamais, meme dans une galerie zoomable :
   le script de zoom de WooCommerce pose une image a sa taille
   native par-dessus la vignette. */
.woocommerce-product-gallery {
	overflow: hidden;
}

.woocommerce-product-gallery .zoomImg {
	max-width: none;
}

/* ============================================================
   7. MOUVEMENT ET LISIBILITE
   ============================================================ */

/* Un titre ne se coupe pas en pleine syllabe sur 320 px. */
h1,
h2,
h3 {
	overflow-wrap: break-word;
	hyphens: manual;
}

/* Le lien d evitement doit se voir quand il prend le focus. */
.skip-link:focus,
.skip-link:focus-visible {
	z-index: 100000;
	background: var( --rlg-craie );
	color: var( --rlg-encre );
	padding: 12px 20px;
	border-radius: var( --rlg-rayon );
	outline: 2px solid var( --rlg-cidre-fonce );
	outline-offset: 2px;
}

/* La cible du lien d evitement ne doit pas afficher d anneau
   permanent : elle recoit le focus par programme. */
main#content:focus,
main#main:focus {
	outline: none;
}


/* ==========================================================
   MOBILE-A11Y-2.CSS
   ========================================================== */

/* ============================================================
   RECETTE MOBILE ET ACCESSIBILITE - complement du 2026-08-11
   ------------------------------------------------------------
   Ce fichier ne contient que des regles dont la SPECIFICITE a
   du etre relevee : les regles equivalentes de mobile-a11y.css
   etaient ecrites, chargees, et perdaient la cascade contre
   WooCommerce, Elementor ou le plugin Emporter.

   Mesure a l appui a chaque fois, jamais un !important pose
   par precaution.
   ============================================================ */

/* ------------------------------------------------------------
   1. Le bouton d envoi des formulaires Elementor
   ------------------------------------------------------------
   .elementor-form .elementor-button.elementor-size-sm impose
   min-height: 40px. Notre regle sur .elementor-button ne pesait
   qu une classe : elle perdait. Mesure : 277 x 40 px sur la page
   Contact, sous les 48 px de la regle du projet.
   ------------------------------------------------------------ */
.elementor-form .elementor-button.elementor-size-xs,
.elementor-form .elementor-button.elementor-size-sm,
.elementor-form .elementor-button.elementor-size-md,
.elementor-form .elementor-button {
	min-height: var( --rlg-cible );
}

/* ------------------------------------------------------------
   2. La loupe de la galerie produit
   ------------------------------------------------------------
   WooCommerce la pose sous
   .woocommerce div.product div.images .woocommerce-product-gallery__trigger
   soit quatre classes contre une. Mesure : 36 x 36 px.
   ------------------------------------------------------------ */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger,
.woocommerce div.product .woocommerce-product-gallery__trigger {
	width: var( --rlg-cible );
	height: var( --rlg-cible );
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ------------------------------------------------------------
   3. Le selecteur de creneau du plugin Emporter
   ------------------------------------------------------------
   emporter.css pose .emporter-jour__nom { font-size: 0.62rem }
   soit 9,92 px, et se charge apres notre couche : a specificite
   egale, c est lui qui gagne. Le nom du jour porte l information
   qui decide du retrait ; il ne peut pas etre le plus petit
   texte de la page.
   ------------------------------------------------------------ */
.emporter-jour .emporter-jour__nom,
.emporter-jour .emporter-jour__auj,
.emporter-bandeau .emporter-bandeau__jour {
	font-size: 0.78rem;
}

/* Le texte doux du selecteur : #8d8477 sur #2a2825 donnait
   3,97:1. #a79a87 sur le meme fond donne 5,33:1. */
.emporter-jour .emporter-jour__h,
.emporter-jour .emporter-jour__nom,
.emporter-jour .emporter-jour__date {
	color: var( --rlg-sarrasin-clair );
}

/* Le jour courant s inverse : fond clair, texte encre. Cette
   regle du plugin doit continuer a passer devant la notre. */
.emporter-jour.est-aujourdhui .emporter-jour__nom,
.emporter-jour.est-aujourdhui .emporter-jour__auj,
.emporter-jour.est-aujourdhui .emporter-jour__lieu,
.emporter-jour.est-aujourdhui .emporter-jour__h {
	color: var( --rlg-encre );
}

/* ------------------------------------------------------------
   4. La page Politique de cookies
   ------------------------------------------------------------
   Page produite par Complianz, pas par nous. Ses commandes
   mesurent 34, 25 et 13 px. Elle est atteignable depuis le pied
   de page de chaque page du site : elle compte.
   ------------------------------------------------------------ */
.cmplz-document summary.cmplz-service-header,
.cmplz-document .cmplz-service-header {
	min-height: var( --rlg-cible );
	display: flex;
	align-items: center;
}

#cmplz-cookiebanner-container button.cmplz-category-toggle {
	min-width: var( --rlg-cible );
	min-height: var( --rlg-cible );
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Les tableaux de cookies sont generes par Complianz avec des
   largeurs fixes : 314 a 415 px dans une fenetre de 320. C est le
   seul debordement qui restait sur le site. La page est liee
   depuis le pied de page de chaque page : elle compte. */
.cmplz-document .cmplz-service-header,
.cmplz-document .cmplz-cookies-overview,
.cmplz-document [class*="cmplz"] > div {
	max-width: 100%;
	box-sizing: border-box;
}

.cmplz-document .purpose,
.cmplz-document .name,
.cmplz-document .retention,
.cmplz-document .function,
.cmplz-document .type,
.cmplz-document .cookies-per-purpose,
.cmplz-document .cookies-per-purpose *,
.cmplz-document .purpose h4,
.cmplz-document table,
.cmplz-document td,
.cmplz-document th {
	max-width: 100%;
	width: auto;
	box-sizing: border-box;
	overflow-wrap: break-word;
}

.cmplz-document input.cmplz-consent-checkbox,
#cmplz-cookiebanner-container input[type="checkbox"] {
	width: 24px;
	height: 24px;
	min-width: 24px;
	accent-color: var( --rlg-cidre-fonce );
}

/* ------------------------------------------------------------
   5. La case a cocher de WooCommerce
   ------------------------------------------------------------
   "Se souvenir de moi" et "creer un compte" mesuraient 13 px.
   La case passe a 24 px - le minimum de la norme - et c est son
   LIBELLE qui porte les 48 px de zone tactile.
   ------------------------------------------------------------ */
.woocommerce form .form-row label.woocommerce-form__label-for-checkbox,
.woocommerce-form-login label.woocommerce-form__label-for-checkbox,
.woocommerce label.woocommerce-form__label-for-checkbox {
	display: inline-flex;
	align-items: center;
	min-height: var( --rlg-cible );
	gap: 8px;
	cursor: pointer;
}

.woocommerce form .form-row input.woocommerce-form__input-checkbox,
.woocommerce input.woocommerce-form__input-checkbox {
	width: 24px;
	height: 24px;
	min-width: 24px;
	margin: 0;
}

/* Complianz revele des blocs supplementaires APRES le consentement,
   et ceux-la portent leurs propres largeurs. Plutot que de courir
   apres chaque classe generee, on contraint tout le document de la
   politique de cookies - et lui seul. */
.cmplz-document,
.cmplz-document * {
	max-width: 100%;
	box-sizing: border-box;
	overflow-wrap: break-word;
}

/* Le vrai mecanisme, mesure : .cookies-per-purpose est une grille,
   et une piste de grille vaut par defaut au moins la taille de son
   contenu insecable (min-width: auto sur les elements). Un nom de
   cookie sans espace elargit donc la piste au-dela du conteneur,
   et max-width: 100% sur l enfant ne sert a rien : 100 % d une
   piste de 415 px fait 415 px.

   C est le meme piege que celui des colonnes du site : la taille
   minimale automatique. On la desarme la ou elle se pose.

   Mesure : parent a 300 px, enfant a 415 px, fenetre a 320 px. */
.cmplz-document .cookies-per-purpose,
.cmplz-document [class*="cookies-per"] {
	grid-template-columns: minmax( 0, 1fr );
}

.cmplz-document .cookies-per-purpose > *,
.cmplz-document .purpose,
.cmplz-document .name,
.cmplz-document .retention,
.cmplz-document .function {
	min-width: 0;
}

/* Les trois bascules de categorie finissaient 3 px au-dela du bord
   droit une fois portees a 48 px. Rien ne defilait (scroll maximal
   mesure a 0, html en overflow-x: clip) mais 3 px de la cible etaient
   rognes. On les rentre. */
.cmplz-document .cmplz-category-toggle,
.cmplz-document button.cmplz-category-toggle {
	min-width: 44px;
	width: 44px;
	min-height: 48px;
}

/* Les selecteurs de ce fichier ne citent plus d identifiant
   d element : Elementor les REGENERE a l import - epreuve du
   2026-08-12, 0 sur 9 preserve. Des classes posees dans le champ
   "Classes CSS" voyagent avec l element et survivent. */

/* ============================================================
   LES LIENS DU PIED DE PAGE SUR TELEPHONE - 2026-08-11 (2e passe)
   ------------------------------------------------------------
   Mesure a 390 px : chaque lien du pied fait 19 px de haut, pour un
   pas vertical de 36 px. Entre deux liens il reste donc 17 px de
   vide qui ne declenchent rien. Sur une liste de onze entrees, c est
   la moitie de la surface qui ne repond pas au doigt.

   Verifie AVANT de corriger, et une hypothese est tombee : les
   entetes d accordeon de la FAQ semblaient trop petits (37 px sur
   l ancre) mais la vraie cible cliquable, .elementor-tab-title,
   mesure 348x61. Rien a y faire.
   ============================================================ */

@media ( max-width: 899px ) {

	.elementor-location-footer .elementor-heading-title > a {
		display: flex;
		align-items: center;
		min-height: 44px;
	}
}
/* ============================================================
   L EN-TETE SUR TELEPHONE - 2026-08-12
   ------------------------------------------------------------
   Mesure a 390 px : 275 px de haut, trois rangees empilees -
   le logo, puis le bouton du menu seul, puis le panier et
   "Commander". Un quart de l ecran mange avant le premier mot.

   Une seule rangee : menu, logo, panier, commander. La signature
   "Creperie ambulante - Morbihan" disparait sur telephone : elle
   est reprise en toutes lettres dans le pied de page, et c est
   elle qui forcait le retour a la ligne.
   ============================================================ */

@media ( max-width: 767px ) {

	.rlg-entete,
	.rlg-entete > .e-con-inner {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		gap: 10px;
	}

	/* Le bouton du menu passe en tete : c est la position ou le pouce
	   le cherche, et celle qu il occupait avant. */
	.rlg-entete__menu {
		order: -1;
		flex: 0 0 auto;
		width: auto;
	}

	.rlg-entete__marque {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
	}

	.rlg-entete__actions {
		flex: 0 0 auto;
		width: auto;
	}

	/* La signature sous le nom. */
	.rlg-entete__signature {
		display: none;
	}

	.rlg-entete__nom .elementor-heading-title {
		font-size: 17px;
		line-height: 1.15;
	}

	/* "Commander" se resserre pour tenir sur la rangee. */
	.rlg-entete__commander .elementor-button {
		padding-left: 14px;
		padding-right: 14px;
		font-size: 14px;
	}
}
/* Suite - 2026-08-12. La premiere passe a bien mis le menu et le logo
   sur une rangee, mais le troisieme bloc est passe dessous : additionnes,
   les trois faisaient 575 px pour 350 disponibles.

   "Commander" disparait sur telephone. Ce n est pas une perte : le
   panier a sa place, le menu contient l entree "Commander", et le hero
   porte son propre appel a l action juste dessous. C est ce que fait
   n importe quelle application de commande sur telephone.

   Les conteneurs perdent aussi leur remplissage : chacun ajoutait 20 px
   de chaque cote, soit 120 px sur une largeur de 350. */

@media ( max-width: 767px ) {

	.rlg-entete__menu,
	.rlg-entete__actions,
	.rlg-entete__marque {
		padding: 0;
		min-width: 0;
	}

	.rlg-entete__menu,
	.rlg-entete__actions {
		flex: 0 0 auto;
		width: auto;
	}

	.rlg-entete__marque {
		flex: 1 1 0%;
		width: auto;
	}

	.rlg-entete__commander {
		display: none;
	}

	.rlg-entete > .e-con-inner {
		padding-top: 12px;
		padding-bottom: 12px;
	}
}
/* La barre d ancres de La carte : corrigee dans les reglages de la
   page elle-meme, et non ici. Les regles posees d abord dans cette
   feuille perdaient contre le CSS personnalise des elements, qui
   porte !important. Voir state/CHANGELOG.md, 2026-08-12. */

/* ============================================================
   L INDICATION DE DEFILEMENT - 2026-08-12
   ------------------------------------------------------------
   Un degrade et un chevron sur le bord droit d une bande qui
   glisse. Ils disparaissent des que le bout est atteint : une
   fleche qui pointe vers rien est pire que pas de fleche.

   La couleur du degrade vient de --rlg-defile-fond, posee par le
   script depuis le fond reellement calcule de la page.
   ============================================================ */

.rlg-defile {
	position: relative;
}

.rlg-defile__fleche {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 62px;
	padding-right: 12px;
	pointer-events: none;
	background: linear-gradient( to right, rgba( 0, 0, 0, 0 ), var( --rlg-defile-fond, #FBFAF7 ) 58% );
	transition: opacity .25s ease;
	animation: rlg-pousse 1.7s ease-in-out 3;
}

.rlg-defile__fleche::after {
	content: "";
	width: 9px;
	height: 9px;
	border-top: 2px solid var( --rlg-cidre-fonce, #9E6A1C );
	border-right: 2px solid var( --rlg-cidre-fonce, #9E6A1C );
	transform: rotate( 45deg );
}

.rlg-defile--bout .rlg-defile__fleche {
	opacity: 0;
	animation: none;
}

/* Trois oscillations, puis plus rien : le geste est montre, pas
   ressasse. */
@keyframes rlg-pousse {
	0%, 100% { padding-right: 12px; }
	50%      { padding-right: 5px; }
}

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

	.rlg-defile__fleche {
		animation: none;
	}
}
/* ============================================================
   L EN-TETE SUIT LE DEFILEMENT - 2026-08-12
   ------------------------------------------------------------
   position: sticky et non fixed : l en-tete garde sa place dans le
   flux, donc rien ne passe dessous au chargement et il n y a aucune
   hauteur a compenser a la main.

   La barre d administration de WordPress est, elle, en position
   fixed. Sans decalage, l en-tete se glisserait dessous pour les
   personnes connectees - et pour elles seulement, ce qui est le
   genre de defaut qu on ne voit jamais en se relisant.
   ============================================================ */

.elementor-location-header {
	position: sticky;
	top: 0;
	z-index: 100;
	transition: box-shadow .2s ease;
}

body.admin-bar .elementor-location-header {
	top: 32px;
}

@media ( max-width: 782px ) {

	body.admin-bar .elementor-location-header {
		top: 46px;
	}
}

/* L ombre n apparait qu une fois la page defilee : posee d emblee,
   elle souligne un bord qui touche deja le haut de l ecran. */
.elementor-location-header.est-defilee {
	box-shadow: 0 6px 20px rgba( 31, 29, 26, .10 );
}

/* Tout ce qui colle plus bas se cale sous l en-tete. La hauteur est
   mesuree par le script : elle change avec la largeur d ecran, et
   une valeur ecrite en dur serait fausse une fois sur deux. */
.rlg-ancres {
	top: var( --rlg-entete-h, 0px );
}

html {
	scroll-padding-top: calc( var( --rlg-entete-h, 0px ) + 12px );
}

/* ============================================================
   LE BOUTON DU MENU ET SON TIROIR - 2026-08-12, corrige
   ------------------------------------------------------------
   Deux fautes dans la premiere version, toutes deux mesurees
   avant correction :

   1. Les regles du bouton etaient ecrites HORS requete media.
      Sur ordinateur Elementor le masque ; forcer display:flex
      le faisait reapparaitre a cote du menu complet.
      Mesure a 1440 px : bouton 48 x 48, visible.

   2. max-width: 46px pose sur le CONTENEUR bridait aussi le
      tiroir, qui vit dedans. Mesure a 390 px : tiroir de 46 px
      de large sur 326 de haut. Menu inutilisable.

   La lecon : ne jamais contraindre un conteneur pour regler la
   taille d un seul de ses enfants. On regle l enfant.
   ============================================================ */

@media ( max-width: 1024px ) {

	.rlg-entete__menu .elementor-menu-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 46px;
		height: 46px;
		padding: 0;
		background: transparent;
		border: 1px solid var( --rlg-trait, #DDD5C7 );
		border-radius: 3px;
		color: var( --rlg-encre, #1F1D1A );
		transition: background .15s, border-color .15s;
	}

	.rlg-entete__menu .elementor-menu-toggle:hover,
	.rlg-entete__menu .elementor-menu-toggle[aria-expanded="true"] {
		background: var( --rlg-cidre, #C8892B );
		border-color: var( --rlg-cidre, #C8892B );
		color: #1F1D1A;
	}

	.rlg-entete__menu .elementor-menu-toggle svg {
		width: 22px;
		height: 22px;
		fill: currentColor;
	}

	/* Le tiroir etait en position: static, donc DANS le flux : a
	   l ouverture il faisait passer l en-tete de 85 a 409 px et
	   poussait le panier de 162 px vers le bas. Mesure a 390 px.

	   position: fixed plutot qu absolute : le bloc conteneur le plus
	   proche est celui du menu, large de 132 px. Ancre a la fenetre,
	   le tiroir prend toute la largeur sans dependre de son
	   emboitement.

	   Le decalage se compose : la hauteur d en-tete, mesuree par le
	   script, plus la barre d administration quand elle est la. */
	.rlg-entete__menu .elementor-nav-menu--dropdown {
		position: fixed;
		top: calc( var( --rlg-entete-h, 85px ) + var( --rlg-barre-admin, 0px ) );
		left: 0;
		right: 0;
		width: auto;
		max-width: none;
		max-height: calc( 100vh - var( --rlg-entete-h, 85px ) - var( --rlg-barre-admin, 0px ) );
		overflow-y: auto;
		z-index: 99;
		border-radius: 0;
		/* Elementor pose une distance entre le bouton et le tiroir. Elle
		   avait un sens quand le tiroir suivait le bouton dans le flux ;
		   ancre a la fenetre, elle ne fait plus qu un trou de 10 px sous
		   l en-tete. */
		margin-top: 0;
		background: var( --rlg-craie, #FBFAF7 );
		border: 1px solid var( --rlg-trait, #DDD5C7 );
		border-radius: 0 0 5px 5px;
		box-shadow: 0 14px 30px rgba( 31, 29, 26, .12 );
		overflow: hidden;
	}

	.rlg-entete__menu .elementor-nav-menu--dropdown a.elementor-item {
		display: flex;
		align-items: center;
		min-height: 54px;
		padding: 0 20px;
		border-bottom: 1px solid var( --rlg-trait, #DDD5C7 );
		font-size: 16.5px;
		color: var( --rlg-encre, #1F1D1A );
	}

	.rlg-entete__menu .elementor-nav-menu--dropdown li:last-child a.elementor-item {
		border-bottom: 0;
	}

	.rlg-entete__menu .elementor-nav-menu--dropdown a.elementor-item:hover,
	.rlg-entete__menu .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active {
		background: var( --rlg-papier, #EFEAE0 );
		box-shadow: inset 3px 0 0 var( --rlg-cidre, #C8892B );
		color: var( --rlg-encre, #1F1D1A );
	}
}

/* La mise en page de l en-tete sur telephone est posee dans le CSS
   personnalise du conteneur, dans le gabarit 3963 : une regle de
   theme y perdait contre le CSS de page d Elementor.
   Voir state/CHANGELOG.md, 2026-08-12. */

/* Le decalage de la barre d administration, en variable : tout ce qui
   est ancre a la fenetre doit s en servir. */
body.admin-bar {
	--rlg-barre-admin: 32px;
}

@media ( max-width: 782px ) {

	body.admin-bar {
		--rlg-barre-admin: 46px;
	}
}


/* ==========================================================
   MOBILE-A11Y-3.CSS
   ========================================================== */

/* ============================================================
   LE TABLEAU DU PANIER SUR TELEPHONE - 2026-08-11
   ------------------------------------------------------------
   Correctif d une regle POSEE PAR NOUS quelques heures plus tot,
   et fausse.

   Ce que WooCommerce fait deja bien dans woocommerce-smallscreen.css :
   masquer l en-tete, passer tr et td en block, et reafficher le nom
   de la colonne par td::before { content: attr(data-title) }.

   Ce que notre regle a casse : passer TOUS les td en display:flex,
   y compris td.actions, qui contient le champ code promo et deux
   boutons. Un conteneur flex sans retour a la ligne prend la
   largeur minimale de son contenu : 453 px. La table entiere s est
   alignee dessus, et le prix, la quantite et le sous-total sont
   partis hors de l ecran - alignes a droite d une boite plus large
   que le telephone.

   Mesure avec un panier reel : 375 px de fenetre, 88 px de
   debordement, trois valeurs sur quatre invisibles.
   ============================================================ */

@media ( max-width: 600px ) {

	/* La table cesse d etre une table : sinon sa largeur reste
	   calculee sur le contenu, quoi qu on fasse aux lignes. */
	.woocommerce table.shop_table_responsive,
	.woocommerce-page table.shop_table_responsive,
	.woocommerce table.shop_table_responsive tbody,
	.woocommerce-page table.shop_table_responsive tbody {
		display: block;
		width: 100%;
		max-width: 100%;
	}

	.woocommerce table.shop_table_responsive tr,
	.woocommerce-page table.shop_table_responsive tr {
		display: block;
		width: 100%;
	}

	/* Le libelle a gauche, la valeur a droite, sur une seule ligne. */
	.woocommerce table.shop_table_responsive tr td,
	.woocommerce-page table.shop_table_responsive tr td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 16px;
		width: 100%;
		box-sizing: border-box;
		text-align: right;
	}

	.woocommerce table.shop_table_responsive tr td::before,
	.woocommerce-page table.shop_table_responsive tr td::before {
		float: none;
		text-align: left;
		font-weight: 600;
		color: var( --rlg-sarrasin );
		white-space: nowrap;
	}

	/* La cellule des actions ne contient pas un couple
	   libelle/valeur mais trois commandes : elle s empile. */
	.woocommerce table.shop_table_responsive tr td.actions,
	.woocommerce-page table.shop_table_responsive tr td.actions,
	.woocommerce table.shop_table_responsive tr td.product-remove,
	.woocommerce-page table.shop_table_responsive tr td.product-remove {
		display: block;
		text-align: left;
	}

	.woocommerce-cart table.cart td.actions .coupon {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		float: none;
		padding: 0;
	}

	.woocommerce-cart table.cart td.actions .coupon .input-text,
	.woocommerce-cart table.cart td.actions .coupon .button,
	.woocommerce-cart table.cart td.actions .button,
	.woocommerce-cart table.cart td.actions input[name="update_cart"] {
		width: 100%;
		min-width: 0;
		float: none;
		margin: 0;
		box-sizing: border-box;
	}

	.woocommerce-cart table.cart td.actions > .button {
		margin-top: 10px;
	}

	/* WooCommerce pose une largeur en pourcentage sur le champ du
	   code promo et sur son bouton. A specificite egale la nôtre
	   perdait, et le libelle "Appliquer le code promo" debordait de
	   son fond orange : mesure, boite de 157 px pour un texte de
	   200 px. Dans un conteneur flex, flex-basis decide de la
	   taille principale avant width : on regle la, pas ailleurs. */
	.woocommerce-cart table.cart td.actions .coupon > * {
		flex: 1 1 100%;
		width: auto;
		min-width: 0;
	}

	/* La quantite et son champ restent alignes a droite. */
	.woocommerce table.shop_table_responsive tr td.product-quantity .quantity {
		margin-left: auto;
	}

	/* Le total du panier : deux colonnes, pas trois. */
	.woocommerce .cart_totals table.shop_table tr th,
	.woocommerce .cart_totals table.shop_table tr td {
		text-align: left;
	}
}

/* ============================================================
   LE VOILE DU HERO SUR TELEPHONE
   ------------------------------------------------------------
   Le hero de l accueil pose un degrade a 100 degres sur la photo :
   de 0,97 d opacite a gauche a 0,20 a droite. Sur un grand ecran
   le texte tient dans le tiers gauche, la ou le voile est dense.

   Sur 375 px, le meme degre couvre toute la largeur et le texte
   va jusqu au bout : sa fin repose sur la partie a 0,20, donc
   presque sur la photo nue.

   Mesure sur les pixels rendus, et non sur la regle CSS :
   le paragraphe tombait a 3,32:1 contre le point le plus clair
   de la photo, pour un seuil de 4,5:1. Le titre passait (6,19:1)
   parce qu il est grand ; le paragraphe, non.

   Un second voile est pose sur le conteneur INTERIEUR : il
   s ajoute au premier sans avoir a recopier l URL de la photo,
   qui reste modifiable depuis Elementor.
   ============================================================ */

/* La regle est desormais portee par le CSS personnalise de
   l element lui-meme, dans Elementor : elle reste visible et
   modifiable depuis le panneau, et disparait avec le hero si
   celui-ci est refait. */

/* ------------------------------------------------------------
   Ceinture et bretelles : quel que soit l ecran, aucune table de
   boutique ne depasse son conteneur. Si un cas non prevu revient,
   il defile dans sa propre boite au lieu de pousser la page.
   ------------------------------------------------------------ */
.woocommerce table.shop_table,
.woocommerce-page table.shop_table {
	max-width: 100%;
}

.woocommerce .woocommerce-cart-form,
.woocommerce .cart_totals,
.woocommerce-checkout-review-order {
	max-width: 100%;
	overflow-x: auto;
}


/* ==========================================================
   COMMERCE.CSS
   ========================================================== */

/**
 * Roule La Galette - la couche commerce, mobile d abord.
 *
 * Panier, commande, compte. Tout est ecrit pour 390 px ; les deux
 * points de rupture n AJOUTENT que ce qu un ecran large permet.
 * Aucune regle ne repare ici un defaut cree la : le socle est le
 * telephone, le bureau est l exception.
 *
 * Les jetons --rlg-* viennent de style.css. Les valeurs de repli
 * servent si la feuille principale ne se charge pas : mieux vaut la
 * bonne couleur en dur qu un bouton invisible.
 */

/* ============================================================
   1. Socle commun
   ============================================================ */

.woocommerce .rlg-bouton,
.woocommerce-page .rlg-bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 22px;
	background: var(--rlg-cidre, #C8892B);
	color: #1F1D1A;
	border: 1px solid var(--rlg-cidre, #C8892B);
	border-radius: 3px;
	font-family: inherit;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
}

.woocommerce .rlg-bouton:hover,
.woocommerce-page .rlg-bouton:hover {
	background: var(--rlg-cidre-fonce, #9E6A1C);
	border-color: var(--rlg-cidre-fonce, #9E6A1C);
	color: #FBFAF7;
}

.woocommerce .rlg-bouton--creux,
.woocommerce-page .rlg-bouton--creux {
	background: transparent;
	color: var(--rlg-encre, #1F1D1A);
	border-color: var(--rlg-trait, #DDD5C7);
}

.woocommerce .rlg-bouton--creux:hover,
.woocommerce-page .rlg-bouton--creux:hover {
	background: var(--rlg-cidre, #C8892B);
	border-color: var(--rlg-cidre, #C8892B);
	color: #1F1D1A;
}

/* ============================================================
   2. Le panier
   ============================================================ */

.rlg-panier {
	margin: 0;
}

/* L en-tete de colonnes n a aucun sens tant qu il n y a pas de
   colonnes : sur telephone chaque article porte ses propres
   libelles, poses par ::before depuis data-titre. */
.rlg-panier__entete {
	display: none;
}

.rlg-panier__liste {
	border-top: 1px solid var(--rlg-trait, #DDD5C7);
}

.rlg-ligne {
	display: grid;
	/* Troisieme colonne en auto, et non 44px : elle porte le bouton de
	   retrait ET le total de ligne. Figee a la taille du bouton, le
	   symbole euro du total etait rogne - constate a 390 px. */
	grid-template-columns: 92px minmax(0, 1fr) auto;
	grid-template-areas:
		"img nom retirer"
		"img pu  pu"
		"qte qte total";
	gap: 6px 16px;
	align-items: start;
	padding: 20px 0;
	border-bottom: 1px solid var(--rlg-trait, #DDD5C7);
}

.rlg-ligne__image {
	grid-area: img;
}

.rlg-ligne__image img {
	width: 92px;
	height: 92px;
	object-fit: cover;
	border-radius: 4px;
	border: 1px solid var(--rlg-trait, #DDD5C7);
	display: block;
	margin: 0;
}

.rlg-ligne__nom {
	grid-area: nom;
	min-width: 0;
}

.rlg-ligne__nom h3 {
	margin: 0;
	font-family: var(--rlg-serif, Georgia, serif);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -.01em;
}

.rlg-ligne__nom a {
	color: var(--rlg-encre, #1F1D1A);
	text-decoration: none;
}

.rlg-ligne__nom a:hover {
	color: var(--rlg-cidre-fonce, #9E6A1C);
}

.rlg-ligne__nom .variation,
.rlg-ligne__nom dl {
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--rlg-sarrasin, #6E6152);
}

.rlg-ligne__nom dt,
.rlg-ligne__nom dd {
	display: inline;
	margin: 0;
	font-weight: 400;
}

.rlg-ligne__nom dd::after {
	content: "";
	display: block;
}

.rlg-ligne__pu {
	grid-area: pu;
	font-size: 14px;
	color: var(--rlg-sarrasin, #6E6152);
}

.rlg-ligne__pu::before {
	content: attr(data-titre) " ";
}

.rlg-ligne__qte {
	grid-area: qte;
	align-self: center;
}

.rlg-ligne__total {
	grid-area: total;
	align-self: center;
	text-align: right;
	font-family: var(--rlg-serif, Georgia, serif);
	font-size: 19px;
	color: var(--rlg-cidre-fonce, #9E6A1C);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.rlg-ligne__retirer {
	grid-area: retirer;
	justify-self: end;
}

/* 44 px : la cible tactile minimale. Le "x" d origine faisait 16 px. */
.woocommerce .rlg-ligne__retirer a.remove {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: -8px -8px 0 0;
	border-radius: 999px;
	background: transparent;
	color: var(--rlg-sarrasin, #6E6152);
	font-size: 22px;
	line-height: 1;
	text-decoration: none;
}

.woocommerce .rlg-ligne__retirer a.remove:hover {
	background: #B3261E;
	color: #fff;
}

/* Le champ de quantite : 48 px de haut, chiffres tabulaires. */
.rlg-ligne__qte .quantity {
	display: inline-flex;
	margin: 0;
	float: none;
}

.woocommerce .rlg-ligne__qte input.qty,
.woocommerce-page .rlg-ligne__qte input.qty {
	width: 76px;
	min-height: 48px;
	padding: 0 6px;
	font-size: 16px;
	text-align: center;
	font-variant-numeric: tabular-nums;
	color: var(--rlg-encre, #1F1D1A);
	background: var(--rlg-craie, #FBFAF7);
	border: 1px solid var(--rlg-trait, #DDD5C7);
	border-radius: 3px;
}

/* ---- code promo et mise a jour ---- */

.rlg-panier__actions {
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding-top: 24px;
}

.rlg-coupon label {
	display: block;
	margin-bottom: 8px;
	font-size: 14px;
	color: var(--rlg-sarrasin, #6E6152);
}

.rlg-coupon__ligne {
	display: flex;
	gap: 10px;
}

.woocommerce .rlg-coupon__ligne input.input-text {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 52px;
	padding: 0 14px;
	font-size: 16px;
	color: var(--rlg-encre, #1F1D1A);
	background: var(--rlg-craie, #FBFAF7);
	border: 1px solid var(--rlg-trait, #DDD5C7);
	border-radius: 3px;
}

.rlg-coupon__ligne .rlg-bouton {
	flex: 0 0 auto;
}

.rlg-panier__maj {
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: stretch;
}

.rlg-panier__continuer {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	font-size: 14.5px;
	color: var(--rlg-sarrasin, #6E6152);
}

/* ---- les totaux ---- */

.cart-collaterals {
	margin-top: 34px;
}

/* WooCommerce pose .woocommerce .cart-collaterals .cart_totals { width:48% }
   - trois classes. A deux classes la nôtre perdait, et le bloc des
   totaux tombait a 176 px dans une colonne de 366 : mesure du
   2026-08-11 a 1440 px. On egale la specificite, on ne l ecrase pas
   avec !important. */
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals,
.woocommerce .cart-collaterals .cross-sells,
.woocommerce-page .cart-collaterals .cross-sells {
	width: 100%;
	float: none;
}

.woocommerce .cart_totals {
	width: auto;
	float: none;
	padding: 20px;
	background: var(--rlg-papier, #EFEAE0);
	border: 1px solid var(--rlg-trait, #DDD5C7);
	border-radius: 5px;
}

.woocommerce .cart_totals h2 {
	margin: 0 0 14px;
	font-family: var(--rlg-serif, Georgia, serif);
	font-size: 22px;
	font-weight: 400;
}

.woocommerce .cart_totals table.shop_table {
	width: 100%;
	margin: 0;
	border: 0;
	border-radius: 0;
}

.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td {
	padding: 12px 0;
	border: 0;
	border-bottom: 1px solid var(--rlg-trait, #DDD5C7);
	font-size: 15px;
	font-weight: 400;
	color: var(--rlg-encre, #1F1D1A);
	vertical-align: top;
}

.woocommerce .cart_totals table.shop_table th {
	width: 46%;
	color: var(--rlg-sarrasin, #6E6152);
}

.woocommerce .cart_totals table.shop_table td {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.woocommerce .cart_totals .order-total th,
.woocommerce .cart_totals .order-total td {
	border-bottom: 0;
	padding-top: 16px;
	font-family: var(--rlg-serif, Georgia, serif);
	font-size: 21px;
}

.woocommerce .cart_totals .order-total td {
	color: var(--rlg-cidre-fonce, #9E6A1C);
}

.woocommerce .wc-proceed-to-checkout {
	padding: 18px 0 0;
}

.woocommerce .wc-proceed-to-checkout a.checkout-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 56px;
	margin: 0;
	padding: 0 20px;
	background: var(--rlg-cidre, #C8892B);
	color: #1F1D1A;
	border: 1px solid var(--rlg-cidre, #C8892B);
	border-radius: 3px;
	font-size: 16.5px;
	font-weight: 600;
	text-align: center;
}

.woocommerce .wc-proceed-to-checkout a.checkout-button:hover {
	background: var(--rlg-cidre-fonce, #9E6A1C);
	border-color: var(--rlg-cidre-fonce, #9E6A1C);
	color: #FBFAF7;
}

/* Le rappel de retrait : la seule information que le client ne peut
   pas deviner, et qui change tout a ce qu il achete. */
.rlg-rappel-retrait {
	margin-top: 16px;
	padding: 15px 16px;
	background: var(--rlg-craie, #FBFAF7);
	border-left: 3px solid var(--rlg-cidre, #C8892B);
	border-radius: 0 3px 3px 0;
}

.rlg-rappel-retrait b {
	display: block;
	font-size: 10.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--rlg-cidre-fonce, #9E6A1C);
}

.rlg-rappel-retrait span {
	display: block;
	margin-top: 7px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--rlg-sarrasin, #6E6152);
}

/* ---- panier vide ---- */

.rlg-vide {
	max-width: 46ch;
	margin: 0 auto;
	padding: 34px 0 10px;
	text-align: center;
}

.rlg-vide h2 {
	margin: 0 0 12px;
	font-family: var(--rlg-serif, Georgia, serif);
	font-size: 27px;
	font-weight: 400;
}

.rlg-vide p {
	margin: 0 0 22px;
	color: var(--rlg-sarrasin, #6E6152);
}

.rlg-vide .rlg-bouton {
	width: 100%;
}

/* ============================================================
   3. Commande et compte : les champs
   ============================================================ */

.woocommerce form .form-row {
	display: block;
	margin: 0 0 16px;
	padding: 0;
}

.woocommerce form .form-row label {
	display: block;
	margin-bottom: 7px;
	font-size: 14px;
	color: var(--rlg-sarrasin, #6E6152);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea,
.woocommerce-page form .form-row select {
	width: 100%;
	min-height: 52px;
	padding: 12px 14px;
	font-size: 16px; /* sous 16 px, iOS zoome au focus */
	line-height: 1.4;
	color: var(--rlg-encre, #1F1D1A);
	background: var(--rlg-craie, #FBFAF7);
	border: 1px solid var(--rlg-trait, #DDD5C7);
	border-radius: 3px;
}

.woocommerce form .form-row textarea {
	min-height: 110px;
}

.woocommerce .select2-container .select2-selection--single {
	height: 52px;
	border: 1px solid var(--rlg-trait, #DDD5C7);
	border-radius: 3px;
	background: var(--rlg-craie, #FBFAF7);
}

.woocommerce .select2-container .select2-selection--single .select2-selection__rendered {
	line-height: 50px;
	padding-left: 14px;
	color: var(--rlg-encre, #1F1D1A);
}

.woocommerce .select2-container .select2-selection--single .select2-selection__arrow {
	height: 50px;
}

.woocommerce-checkout #payment {
	background: var(--rlg-papier, #EFEAE0);
	border: 1px solid var(--rlg-trait, #DDD5C7);
	border-radius: 5px;
}

.woocommerce-checkout #payment div.form-row.place-order {
	padding: 16px;
}

.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order {
	width: 100%;
	min-height: 56px;
	float: none;
	background: var(--rlg-cidre, #C8892B);
	color: #1F1D1A;
	border: 1px solid var(--rlg-cidre, #C8892B);
	border-radius: 3px;
	font-size: 16.5px;
	font-weight: 600;
}

.woocommerce table.shop_table.woocommerce-checkout-review-order-table {
	width: 100%;
	border-radius: 5px;
}

/* ============================================================
   4. A partir de 700 px : deux colonnes de champs
   ============================================================ */

@media (min-width: 700px) {

	.rlg-panier__actions {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: 26px;
	}

	.rlg-coupon {
		flex: 1 1 340px;
		max-width: 400px;
	}

	.rlg-panier__maj {
		flex-direction: row;
		align-items: center;
		gap: 18px;
	}

	.woocommerce-checkout .col2-set .col-1,
	.woocommerce-checkout .col2-set .col-2 {
		float: none;
		width: auto;
	}

	.woocommerce-checkout .col2-set {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 30px;
	}
}

/* ============================================================
   5. A partir de 900 px : la ligne redevient une rangee
   ============================================================ */

@media (min-width: 900px) {

	.rlg-panier__entete {
		display: grid;
		grid-template-columns: 88px minmax(0, 1fr) 116px 116px 116px 48px;
		gap: 0 20px;
		align-items: center;
		padding: 0 0 12px;
		font-size: 11px;
		letter-spacing: .16em;
		text-transform: uppercase;
		color: var(--rlg-sarrasin, #6E6152);
	}

	.rlg-panier__entete span:nth-child(3),
	.rlg-panier__entete span:nth-child(5) {
		text-align: right;
	}

	.rlg-panier__entete span:nth-child(4) {
		text-align: center;
	}

	.rlg-ligne {
		grid-template-columns: 88px minmax(0, 1fr) 116px 116px 116px 48px;
		grid-template-areas: none;
		gap: 0 20px;
		align-items: center;
		padding: 18px 0;
	}

	.rlg-ligne__image,
	.rlg-ligne__nom,
	.rlg-ligne__pu,
	.rlg-ligne__qte,
	.rlg-ligne__total,
	.rlg-ligne__retirer {
		grid-area: auto;
		align-self: center;
	}

	.rlg-ligne__image img {
		width: 88px;
		height: 88px;
	}

	.rlg-ligne__nom h3 {
		font-size: 18px;
	}

	.rlg-ligne__pu {
		text-align: right;
		font-size: 15px;
	}

	/* Le libelle porte par ::before ne sert qu en pile. */
	.rlg-ligne__pu::before {
		content: none;
	}

	.rlg-ligne__qte {
		justify-self: center;
	}

	.woocommerce .rlg-ligne__qte input.qty,
	.woocommerce-page .rlg-ligne__qte input.qty {
		width: 84px;
	}

	.rlg-ligne__total {
		font-size: 20px;
	}

	.woocommerce .rlg-ligne__retirer a.remove {
		margin: 0;
	}

	.rlg-vide .rlg-bouton {
		width: auto;
		min-width: 260px;
	}
}

/* ============================================================
   6. A partir de 1040 px : les totaux passent a cote
   ============================================================ */

@media (min-width: 1040px) {

	.woocommerce-cart .woocommerce {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 366px;
		gap: 0 48px;
		align-items: start;
	}

	.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper {
		grid-column: 1 / -1;
	}

	.woocommerce-cart .cart-collaterals {
		margin-top: 0;
		position: sticky;
		top: 110px;
	}

	.woocommerce-cart .cart-collaterals .cross-sells {
		width: auto;
		float: none;
	}
}

/* ============================================================
   7. La fiche produit
   ============================================================ */

.rlg-produit .rlg-etiq {
	margin: 0;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--rlg-cidre-fonce, #9E6A1C);
}

.rlg-fiche {
	padding-bottom: 30px;
}

/* ---- galerie ---- */

.rlg-piste {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.rlg-piste::-webkit-scrollbar {
	display: none;
}

.rlg-piste figure {
	margin: 0;
	flex: 0 0 100%;
	scroll-snap-align: start;
	position: relative;
	border: 1px solid var(--rlg-trait, #DDD5C7);
	border-radius: 5px;
	overflow: hidden;
	background: var(--rlg-papier, #EFEAE0);
}

.rlg-piste figure img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

.rlg-pastille {
	position: absolute;
	left: 12px;
	top: 12px;
	padding: 7px 9px;
	background: rgba(31, 29, 26, .9);
	color: #EFEAE0;
	border-radius: 2px;
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: .11em;
	text-transform: uppercase;
}

.rlg-points {
	display: flex;
	justify-content: center;
	gap: 7px;
	margin-top: 12px;
}

.rlg-points i {
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: var(--rlg-trait, #DDD5C7);
	transition: width .2s, background .2s;
}

.rlg-points i.actif {
	width: 20px;
	background: var(--rlg-cidre, #C8892B);
}

.rlg-vign {
	display: none;
}

/* ---- colonne d achat ---- */

.rlg-achat {
	margin-top: 26px;
}

.rlg-produit h1.product_title {
	margin: 9px 0 0;
	font-family: var(--rlg-serif, Georgia, serif);
	font-size: clamp(26px, 7.4vw, 34px);
	font-weight: 400;
	line-height: 1.12;
	letter-spacing: -.015em;
	text-wrap: balance;
}

.rlg-prix {
	margin-top: 12px;
}

.rlg-produit .rlg-prix .price,
.rlg-produit .rlg-prix > .amount,
.rlg-produit .rlg-prix bdi {
	font-family: var(--rlg-serif, Georgia, serif);
	font-size: 31px;
	color: var(--rlg-cidre-fonce, #9E6A1C);
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
	margin: 0;
}

.rlg-produit .rlg-prix del {
	opacity: .55;
	font-size: 21px;
}

.rlg-produit .rlg-prix .woocommerce-price-suffix {
	font-family: inherit;
	font-size: 13px;
	color: var(--rlg-sarrasin, #6E6152);
}

.rlg-chapo {
	margin-top: 12px;
	max-width: 60ch;
	font-size: 16px;
	color: var(--rlg-sarrasin, #6E6152);
}

.rlg-chapo p {
	margin: 0 0 10px;
}

.rlg-puces {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.rlg-puces li {
	margin: 0;
	padding: 7px 13px;
	border: 1px solid var(--rlg-trait, #DDD5C7);
	border-radius: 999px;
	background: var(--rlg-papier, #EFEAE0);
	font-size: 12.5px;
	color: var(--rlg-sarrasin, #6E6152);
}

.rlg-puces b {
	color: var(--rlg-encre, #1F1D1A);
	font-weight: 600;
}

/* ---- le formulaire d ajout ---- */

.rlg-formulaire {
	margin-top: 22px;
}

.rlg-formulaire form.cart {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.rlg-formulaire .quantity {
	float: none;
	margin: 0;
}

.woocommerce .rlg-formulaire input.qty {
	width: 84px;
	min-height: 54px;
	padding: 0 6px;
	font-size: 16px;
	text-align: center;
	font-variant-numeric: tabular-nums;
	color: var(--rlg-encre, #1F1D1A);
	background: var(--rlg-craie, #FBFAF7);
	border: 1px solid var(--rlg-trait, #DDD5C7);
	border-radius: 3px;
}

/* Le bouton d ajout : c est celui qui etait violet, et qui sortait de
   l ecran a 390 px. Les selecteurs de WooCommerce et d Elementor le
   visent tous les deux ; on les egale ici plutot que de reprendre le
   combat ailleurs. */
.woocommerce .rlg-formulaire button.single_add_to_cart_button,
.woocommerce-page .rlg-formulaire button.single_add_to_cart_button,
.woocommerce .rlg-formulaire .button.alt {
	flex: 1 1 200px;
	min-width: 0;
	min-height: 54px;
	padding: 0 20px;
	background: var(--rlg-cidre, #C8892B);
	color: #1F1D1A;
	border: 1px solid var(--rlg-cidre, #C8892B);
	border-radius: 3px;
	font-family: inherit;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: none;
}

.woocommerce .rlg-formulaire button.single_add_to_cart_button:hover,
.woocommerce-page .rlg-formulaire button.single_add_to_cart_button:hover {
	background: var(--rlg-cidre-fonce, #9E6A1C);
	border-color: var(--rlg-cidre-fonce, #9E6A1C);
	color: #FBFAF7;
}

.woocommerce .rlg-formulaire button.single_add_to_cart_button.disabled {
	opacity: .45;
	cursor: not-allowed;
}

/* Les variations : un <table> a deux colonnes des 320 px. Il devient
   une pile de champs pleine largeur, avec le libelle au-dessus. */
.rlg-formulaire table.variations {
	flex: 1 1 100%;
	width: 100%;
	margin: 0 0 4px;
	border: 1px solid var(--rlg-trait, #DDD5C7);
	border-radius: 4px;
	background: var(--rlg-papier, #EFEAE0);
	overflow: hidden;
}

.rlg-formulaire table.variations,
.rlg-formulaire table.variations tbody,
.rlg-formulaire table.variations tr,
.rlg-formulaire table.variations th,
.rlg-formulaire table.variations td {
	display: block;
	width: auto;
	text-align: left;
}

.rlg-formulaire table.variations tr {
	border-bottom: 1px solid var(--rlg-trait, #DDD5C7);
	padding: 14px 16px;
}

.rlg-formulaire table.variations tr:last-child {
	border-bottom: 0;
}

.rlg-formulaire table.variations th,
.rlg-formulaire table.variations td {
	padding: 0;
	border: 0;
}

.rlg-formulaire table.variations th.label label {
	display: block;
	margin-bottom: 7px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--rlg-encre, #1F1D1A);
}

.woocommerce .rlg-formulaire table.variations select {
	width: 100%;
	min-height: 52px;
	padding: 0 40px 0 14px;
	font-size: 16px;
	color: var(--rlg-encre, #1F1D1A);
	background: var(--rlg-craie, #FBFAF7);
	border: 1px solid var(--rlg-trait, #DDD5C7);
	border-radius: 3px;
}

.rlg-formulaire .reset_variations {
	display: inline-block;
	margin-top: 10px;
	font-size: 13.5px;
	color: var(--rlg-sarrasin, #6E6152);
}

.rlg-formulaire .woocommerce-variation-price {
	flex: 1 1 100%;
	margin-bottom: 4px;
	font-family: var(--rlg-serif, Georgia, serif);
	font-size: 22px;
	color: var(--rlg-cidre-fonce, #9E6A1C);
}

/* ---- retrait et reassurance ---- */

.rlg-retrait {
	margin-top: 18px;
	padding: 16px;
	background: var(--rlg-papier, #EFEAE0);
	border-left: 3px solid var(--rlg-cidre, #C8892B);
	border-radius: 0 3px 3px 0;
}

.rlg-retrait__t {
	margin: 0;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--rlg-cidre-fonce, #9E6A1C);
}

.rlg-retrait__d {
	margin: 8px 0 0;
	font-size: 14.5px;
}

.rlg-retrait__ou {
	margin: 12px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--rlg-trait, #DDD5C7);
	font-size: 14px;
	color: var(--rlg-sarrasin, #6E6152);
}

.rlg-retrait__ou b {
	display: block;
	margin-top: 2px;
	font-family: var(--rlg-serif, Georgia, serif);
	font-size: 17px;
	font-weight: 400;
	color: var(--rlg-encre, #1F1D1A);
}

.rlg-rassure {
	display: grid;
	gap: 1px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
	background: var(--rlg-trait, #DDD5C7);
	border: 1px solid var(--rlg-trait, #DDD5C7);
	border-radius: 4px;
	overflow: hidden;
}

.rlg-rassure li {
	margin: 0;
	padding: 14px 16px;
	background: var(--rlg-craie, #FBFAF7);
	display: flex;
	gap: 12px;
	align-items: baseline;
}

.rlg-rassure b {
	flex: 0 0 auto;
	font-family: var(--rlg-serif, Georgia, serif);
	font-size: 16.5px;
	font-weight: 400;
}

.rlg-rassure span {
	font-size: 13px;
	line-height: 1.45;
	color: var(--rlg-sarrasin, #6E6152);
}

/* ---- recette et fiche technique ---- */

.rlg-recette {
	margin: 0 calc(50% - 50vw);
	padding: 34px calc(50vw - 50%);
	background: var(--rlg-papier, #EFEAE0);
}

.rlg-recette h2 {
	margin: 8px 0 0;
	font-family: var(--rlg-serif, Georgia, serif);
	font-size: clamp(23px, 5.5vw, 30px);
	font-weight: 400;
}

.rlg-recette__texte p,
.rlg-recette__texte ul {
	margin-top: 14px;
	max-width: 62ch;
}

.rlg-specs {
	margin: 22px 0 0;
	border: 1px solid var(--rlg-trait, #DDD5C7);
	border-radius: 4px;
	background: var(--rlg-craie, #FBFAF7);
	overflow: hidden;
}

.rlg-specs__l {
	padding: 13px 16px;
	border-bottom: 1px solid var(--rlg-trait, #DDD5C7);
	font-size: 14.5px;
}

.rlg-specs__l:last-child {
	border-bottom: 0;
}

.rlg-specs dt {
	margin: 0 0 3px;
	font-size: 12.5px;
	font-weight: 400;
	color: var(--rlg-sarrasin, #6E6152);
}

.rlg-specs dd {
	margin: 0;
}

.rlg-specs a {
	color: var(--rlg-cidre-fonce, #9E6A1C);
}

/* ---- la barre collee en bas ---- */

.rlg-barre {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 90;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
	background: var(--rlg-craie, #FBFAF7);
	border-top: 1px solid var(--rlg-trait, #DDD5C7);
	box-shadow: 0 -6px 20px rgba(31, 29, 26, .09);
}

.rlg-barre[hidden] {
	display: none;
}

.rlg-barre__p {
	flex: 0 0 auto;
	margin: 0;
	line-height: 1.2;
}

.rlg-barre__p .price,
.rlg-barre__p bdi {
	font-family: var(--rlg-serif, Georgia, serif);
	font-size: 20px;
	color: var(--rlg-cidre-fonce, #9E6A1C);
	font-variant-numeric: tabular-nums;
}

.rlg-barre__p span {
	display: block;
	font-size: 11.5px;
	color: var(--rlg-sarrasin, #6E6152);
}

.rlg-barre__cta {
	flex: 1;
	min-height: 50px;
	padding: 0 16px;
	background: var(--rlg-cidre, #C8892B);
	color: #1F1D1A;
	border: 1px solid var(--rlg-cidre, #C8892B);
	border-radius: 3px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

/* ============================================================
   8. Fiche produit : 620 px et au-dela
   ============================================================ */

@media (min-width: 620px) {

	.rlg-rassure {
		grid-template-columns: 1fr 1fr;
	}

	.rlg-specs {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.rlg-specs__l {
		border-right: 1px solid var(--rlg-trait, #DDD5C7);
	}

	.rlg-specs__l:nth-child(2n) {
		border-right: 0;
	}
}

/* ============================================================
   9. Fiche produit : la fiche passe cote a cote a 900 px
   ============================================================ */

@media (min-width: 900px) {

	.rlg-fiche {
		display: grid;
		grid-template-columns: 1.02fr .98fr;
		gap: 46px;
		align-items: start;
		padding-bottom: 56px;
	}

	.rlg-galerie {
		position: sticky;
		top: 100px;
	}

	/* Plus de defilement : une seule image, choisie par les vignettes. */
	.rlg-piste {
		display: block;
		overflow: visible;
	}

	.rlg-piste figure {
		display: none;
	}

	.rlg-piste figure:first-child,
	.rlg-piste figure.rlg-visible {
		display: block;
	}

	.rlg-piste figure.rlg-visible ~ figure:first-child {
		display: none;
	}

	.rlg-points {
		display: none;
	}

	.rlg-vign {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 9px;
		margin-top: 9px;
	}

	.rlg-vign button {
		padding: 0;
		background: none;
		border: 1px solid var(--rlg-trait, #DDD5C7);
		border-radius: 3px;
		overflow: hidden;
		cursor: pointer;
	}

	.rlg-vign button[aria-current="true"] {
		border: 2px solid var(--rlg-cidre, #C8892B);
	}

	.rlg-vign img {
		width: 100%;
		height: auto;
		aspect-ratio: 1;
		object-fit: cover;
		display: block;
	}

	.rlg-achat {
		margin-top: 4px;
	}

	.rlg-produit h1.product_title {
		font-size: clamp(32px, 3.4vw, 42px);
	}

	.rlg-produit .rlg-prix .price,
	.rlg-produit .rlg-prix bdi {
		font-size: 35px;
	}

	.rlg-recette {
		padding-top: 56px;
		padding-bottom: 56px;
	}

	.rlg-recette__in {
		display: grid;
		grid-template-columns: 1.15fr .85fr;
		gap: 46px;
		align-items: start;
	}

	.rlg-specs {
		margin-top: 0;
		grid-template-columns: 1fr;
	}

	.rlg-specs__l {
		border-right: 0;
	}

	/* La barre du bas est un geste de telephone : au-dela, le vrai
	   bouton reste a l ecran grace a la colonne collante. */
	.rlg-barre {
		display: none;
	}
}
/* ------------------------------------------------------------
   Le bouton violet, deuxieme manche.

   Sur un produit VARIABLE, WooCommerce ajoute la classe .disabled tant
   qu aucune variation n est choisie, et sa feuille repeint alors le
   bouton en #7F54B3 par un selecteur d une classe de plus que le notre :

     .woocommerce button.button.alt.disabled   -> 0,4,1
     .woocommerce .rlg-formulaire button.single_add_to_cart_button -> 0,3,1

   Mesure du 2026-08-11 sur /produit/menu-petite-faim : rgb(127,84,179).
   Le produit SIMPLE, lui, passait deja - meme regle, une classe de
   moins en face. On egale la specificite au lieu de sortir !important.

   Le conteneur .woocommerce-variation-add-to-cart passe en flex : sans
   cela, le flex:1 du bouton ne s appliquait a rien et il restait a
   164 px de large au lieu de remplir la ligne.
   ------------------------------------------------------------ */

.rlg-formulaire .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: stretch;
}

.rlg-formulaire .woocommerce-variation-add-to-cart .quantity {
	flex: 0 0 auto;
}

.woocommerce .rlg-formulaire button.single_add_to_cart_button.disabled,
.woocommerce-page .rlg-formulaire button.single_add_to_cart_button.disabled,
.woocommerce .rlg-formulaire button.button.alt.disabled,
.woocommerce-page .rlg-formulaire button.button.alt.disabled {
	background: var(--rlg-cidre, #C8892B);
	color: #1F1D1A;
	border-color: var(--rlg-cidre, #C8892B);
	opacity: .45;
}

.woocommerce .rlg-formulaire button.single_add_to_cart_button.disabled:hover,
.woocommerce-page .rlg-formulaire button.single_add_to_cart_button.disabled:hover,
.woocommerce .rlg-formulaire button.button.alt.disabled:hover,
.woocommerce-page .rlg-formulaire button.button.alt.disabled:hover {
	background: var(--rlg-cidre, #C8892B);
	color: #1F1D1A;
}

/* La meme classe .alt habille le bouton de commande et celui du compte. */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce-page a.button.alt,
.woocommerce-page button.button.alt,
.woocommerce-page input.button.alt {
	background: var(--rlg-cidre, #C8892B);
	color: #1F1D1A;
	border: 1px solid var(--rlg-cidre, #C8892B);
	border-radius: 3px;
	min-height: 52px;
	font-weight: 600;
	text-transform: none;
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce-page a.button.alt:hover,
.woocommerce-page button.button.alt:hover,
.woocommerce-page input.button.alt:hover {
	background: var(--rlg-cidre-fonce, #9E6A1C);
	border-color: var(--rlg-cidre-fonce, #9E6A1C);
	color: #FBFAF7;
}
/* ============================================================
   10. La grille de produits, mobile d abord
   ------------------------------------------------------------
   style.css la fixait a repeat(4, 1fr) SANS requete media : une
   regle ecrite pour le bureau, appliquee partout. Sur telephone une
   autre feuille la ramenait a une colonne, et chaque vignette
   occupait un ecran entier - mesure du 2026-08-11 sur les produits
   similaires d une fiche.

   Deux colonnes des 320 px : c est ce que fait n importe quelle
   application de commande, et cela laisse voir quatre articles sans
   defiler. La grille vaut pour la carte, l accueil et les fiches -
   elles partagent le meme ul.products.
   ============================================================ */

.woocommerce ul.products,
.woocommerce-page ul.products,
.elementor-widget-woocommerce-products ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 14px;
	row-gap: 26px;
	--grid-column-gap: 14px;
	--grid-row-gap: 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	width: auto;
	margin: 0;
	float: none;
	padding-bottom: 18px;
}

.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
	aspect-ratio: 1;
	object-fit: cover;
	margin: 0 0 14px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
	font-size: 15px;
	line-height: 1.32;
	padding: 0 12px;
	margin: 0 0 6px;
}

.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
	font-size: 17px;
	margin: 0 12px 12px;
}

.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: auto 12px 0;
	min-height: 46px;
	font-size: 13.5px;
	text-align: center;
}

@media (min-width: 620px) {

	.woocommerce ul.products,
	.woocommerce-page ul.products,
	.elementor-widget-woocommerce-products ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 24px;
		row-gap: 36px;
		--grid-column-gap: 24px;
		--grid-row-gap: 36px;
	}

	.woocommerce ul.products li.product a img,
	.woocommerce-page ul.products li.product a img {
		aspect-ratio: 4 / 3;
		margin-bottom: 18px;
	}

	.woocommerce ul.products li.product .woocommerce-loop-product__title,
	.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
		font-size: 16.5px;
		padding: 0 18px;
	}

	.woocommerce ul.products li.product .price,
	.woocommerce-page ul.products li.product .price {
		margin: 0 18px 16px;
		font-size: 19px;
	}

	.woocommerce ul.products li.product .button,
	.woocommerce-page ul.products li.product .button {
		margin: auto 18px 0;
		font-size: 14.5px;
	}
}

@media (min-width: 1000px) {

	.woocommerce ul.products,
	.woocommerce-page ul.products,
	.elementor-widget-woocommerce-products ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: 32px;
		row-gap: 44px;
		--grid-column-gap: 32px;
		--grid-row-gap: 44px;
	}

	.woocommerce ul.products li.product {
		padding-bottom: 26px;
	}

	.woocommerce ul.products li.product .button,
	.woocommerce-page ul.products li.product .button {
		margin: auto 22px 0;
		min-width: 0;
		min-height: 48px;
	}
}
/* "Effacer les options" mesurait 36x29 : c est une commande, pas une
   mention legale. */
.woocommerce .rlg-formulaire .reset_variations {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}
/* ============================================================
   11. Reequilibrage apres mesure sur ecran large - 2026-08-11
   ============================================================ */

/* ---- Le panier : la colonne du nom etait etranglee ----

   Mesure a 1440 px : les colonnes fixes mangeaient 584 px des 726 de
   la liste. Il restait 142 px pour le nom, et "Menu Petite Faim :
   Galette, Crepe & Boisson Soft" tombait sur trois lignes a cote de
   deux colonnes vides.

   Le prix unitaire descend sous le nom, comme sur telephone : c est
   l information la moins consultee des cinq, et elle libere 170 px
   pour celle qui identifie l article. */

@media (min-width: 900px) {

	.rlg-panier__entete,
	.rlg-ligne {
		grid-template-columns: 84px minmax(0, 1fr) 108px 112px 44px;
		gap: 0 18px;
	}

	/* Le libelle "Prix" n a plus de colonne. */
	.rlg-panier__entete span:nth-child(3) {
		display: none;
	}

	.rlg-panier__entete span:nth-child(4) {
		text-align: center;
	}

	.rlg-panier__entete span:nth-child(5) {
		text-align: right;
	}

	.rlg-ligne {
		align-items: start;
	}

	.rlg-ligne__image {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.rlg-ligne__nom {
		grid-column: 2;
		grid-row: 1;
	}

	.rlg-ligne__pu {
		grid-column: 2;
		grid-row: 2;
		text-align: left;
		margin-top: 6px;
		font-size: 14px;
	}

	/* En pile le libelle est indispensable ; en rangee il revient,
	   parce que la colonne "Prix" a disparu de l en-tete. */
	.rlg-ligne__pu::before {
		content: attr(data-titre) " ";
	}

	.rlg-ligne__qte {
		grid-column: 3;
		grid-row: 1 / span 2;
		justify-self: center;
		align-self: center;
	}

	.rlg-ligne__total {
		grid-column: 4;
		grid-row: 1 / span 2;
		align-self: center;
	}

	.rlg-ligne__retirer {
		grid-column: 5;
		grid-row: 1 / span 2;
		align-self: center;
	}
}

/* WooCommerce ecrit color:#a00 !important sur a.remove. C est le seul
   endroit de cette feuille ou !important est justifie : on ne peut pas
   gagner autrement contre un !important. */
.woocommerce .rlg-ligne__retirer a.remove {
	color: var(--rlg-sarrasin, #6E6152) !important;
}

.woocommerce .rlg-ligne__retirer a.remove:hover {
	color: #fff !important;
	background: #B3261E;
}

/* Les donnees de variation dans le panier : un couple libelle/valeur
   par ligne, sans le double interligne du dl par defaut. */
.rlg-ligne__nom dl.variation {
	display: grid;
	grid-template-columns: auto;
	gap: 2px;
	margin-top: 8px;
}

.rlg-ligne__nom dl.variation dt {
	display: block;
	font-size: 12px;
	color: var(--rlg-sarrasin, #6E6152);
}

.rlg-ligne__nom dl.variation dd {
	display: block;
	margin: 0 0 6px;
	font-size: 13.5px;
	color: var(--rlg-encre, #1F1D1A);
}

.rlg-ligne__nom dl.variation dd p {
	margin: 0;
}

.rlg-ligne__nom dl.variation dd::after {
	content: none;
}

/* ---- La fiche produit : 798 px de vide sous l image ----

   Mesure a 1440 px : colonne d achat 1217 px de haut, galerie 419.
   Le retrait et la reassurance passent donc SOUS l image, dans la
   colonne de gauche, et l image devient carree. Les deux colonnes
   tombent alors a peu pres a la meme hauteur.

   La galerie n est plus collante : avec du contenu sous elle, elle
   recouvrirait ce contenu au defilement. */

@media (min-width: 620px) {

	/* Trois cellules, trois colonnes. A deux colonnes, la troisieme
	   laissait une case grise vide - visible sur la capture. */
	.rlg-rassure {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.rlg-rassure li {
		flex-direction: column;
		gap: 4px;
	}
}

@media (min-width: 900px) {

	.rlg-fiche {
		grid-template-columns: 1.05fr .95fr;
		grid-template-areas:
			"gal     achat"
			"retrait achat"
			"rassure achat";
		grid-template-rows: auto auto 1fr;
	}

	.rlg-galerie {
		grid-area: gal;
		position: static;
	}

	.rlg-achat {
		grid-area: achat;
	}

	.rlg-fiche > .rlg-retrait {
		grid-area: retrait;
		margin-top: 24px;
	}

	.rlg-fiche > .rlg-rassure {
		grid-area: rassure;
		align-self: start;
		margin-top: 14px;
	}

	.rlg-piste figure img {
		aspect-ratio: 1;
	}
}

/* Le bouton d ajout passait a la ligne sous la quantite : son
   conteneur, enfant flex de form.cart, se retrecissait a 262 px
   pour un contenu de 294. Il prend la ligne entiere. */
.rlg-formulaire .single_variation_wrap,
.rlg-formulaire .woocommerce-variation-add-to-cart {
	flex: 1 1 100%;
	width: 100%;
}
/* ============================================================
   12. La page de commande
   ------------------------------------------------------------
   Mesure a 1440 px avant correction : #customer_details occupait
   les 1140 px, sa grille interne mettait la facturation A DROITE
   et le creneau a gauche - l inverse de l ordre du document - et
   la moitie haute de la page etait vide.

   La grille interne de .col2-set est supprimee : sans expedition,
   il n y a qu une colonne de champs. Les deux vraies colonnes sont
   desormais .rlg-client et .rlg-recap, posees par le gabarit.
   ============================================================ */

.woocommerce-checkout .col2-set,
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
	display: block;
	width: auto;
	float: none;
}

.woocommerce-checkout h3 {
	margin: 0 0 16px;
	font-family: var(--rlg-serif, Georgia, serif);
	font-size: 24px;
	font-weight: 400;
}

.woocommerce-checkout .col-2 h3 {
	margin-top: 34px;
}

.rlg-recap {
	margin-top: 34px;
}

.rlg-recap #order_review_heading {
	margin-bottom: 12px;
}

/* Le recapitulatif : meme carte que les totaux du panier. */
.woocommerce-checkout #order_review {
	padding: 20px;
	background: var(--rlg-papier, #EFEAE0);
	border: 1px solid var(--rlg-trait, #DDD5C7);
	border-radius: 5px;
}

.woocommerce table.shop_table.woocommerce-checkout-review-order-table {
	margin: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.woocommerce .woocommerce-checkout-review-order-table thead {
	display: none;
}

.woocommerce .woocommerce-checkout-review-order-table th,
.woocommerce .woocommerce-checkout-review-order-table td {
	padding: 12px 0;
	border: 0;
	border-bottom: 1px solid var(--rlg-trait, #DDD5C7);
	font-size: 14.5px;
	font-weight: 400;
	vertical-align: top;
}

.woocommerce .woocommerce-checkout-review-order-table td.product-total,
.woocommerce .woocommerce-checkout-review-order-table td:last-child {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.woocommerce .woocommerce-checkout-review-order-table .product-name {
	color: var(--rlg-encre, #1F1D1A);
}

.woocommerce .woocommerce-checkout-review-order-table .variation {
	margin: 6px 0 0;
	font-size: 12.5px;
	color: var(--rlg-sarrasin, #6E6152);
}

.woocommerce .woocommerce-checkout-review-order-table .order-total th,
.woocommerce .woocommerce-checkout-review-order-table .order-total td {
	border-bottom: 0;
	padding-top: 16px;
	font-family: var(--rlg-serif, Georgia, serif);
	font-size: 21px;
}

.woocommerce .woocommerce-checkout-review-order-table .order-total td {
	color: var(--rlg-cidre-fonce, #9E6A1C);
}

.woocommerce-checkout #payment {
	margin-top: 16px;
	background: transparent;
	border: 0;
	border-radius: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
	padding: 0;
	margin: 0 0 14px;
	border: 0;
	list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li {
	margin: 0 0 8px;
	padding: 14px 16px;
	background: var(--rlg-craie, #FBFAF7);
	border: 1px solid var(--rlg-trait, #DDD5C7);
	border-radius: 3px;
}

.woocommerce-checkout #payment ul.payment_methods li label {
	display: inline;
	font-size: 15px;
	font-weight: 600;
	color: var(--rlg-encre, #1F1D1A);
}

.woocommerce-checkout #payment div.payment_box {
	margin: 10px 0 0;
	padding: 12px 14px;
	background: var(--rlg-papier, #EFEAE0);
	border-radius: 3px;
	font-size: 13.5px;
	color: var(--rlg-sarrasin, #6E6152);
}

.woocommerce-checkout #payment div.payment_box::before {
	display: none;
}

.woocommerce-checkout #payment div.form-row.place-order {
	padding: 0;
	margin: 0;
}

.woocommerce-checkout .woocommerce-privacy-policy-text {
	margin-bottom: 14px;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--rlg-sarrasin, #6E6152);
}

/* Le selecteur de creneau d Emporter garde sa place dans le flux du
   formulaire, et prend la mise en forme du reste. */
.woocommerce-checkout .emporter-selecteur {
	margin-top: 30px;
	padding: 18px;
	background: var(--rlg-papier, #EFEAE0);
	border: 1px solid var(--rlg-trait, #DDD5C7);
	border-radius: 5px;
}

@media (min-width: 1040px) {

	.woocommerce-checkout form.checkout.rlg-commande {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 396px;
		column-gap: 48px;
		align-items: start;
	}

	.rlg-client {
		grid-column: 1;
	}

	.rlg-recap {
		grid-column: 2;
		margin-top: 0;
		position: sticky;
		top: 110px;
	}

	/* Les champs courts vont par deux : prenom/nom, code postal/ville. */
	.woocommerce-checkout .col-1 .woocommerce-billing-fields__field-wrapper {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 20px;
	}

	.woocommerce-checkout .col-1 .woocommerce-billing-fields__field-wrapper > .form-row-wide,
	.woocommerce-checkout .col-1 .woocommerce-billing-fields__field-wrapper > .form-row:not(.form-row-first):not(.form-row-last) {
		grid-column: 1 / -1;
	}
}
/* "Effacer les options" est masque par visibility tant qu aucun choix
   n est fait : il garde donc sa place et laissait une bande vide de
   44 px sous le dernier selecteur - creusee par le min-height que
   nous venions de lui donner. Il sort du flux quand il ne sert pas. */
.rlg-formulaire .reset_variations[style*="hidden"] {
	display: none;
}
/* Le nom d article du recapitulatif tombait sur trois lignes alors que
   la colonne des montants gardait sa largeur : c est le nom qui doit
   prendre la place restante, pas l inverse. */
.woocommerce .woocommerce-checkout-review-order-table {
	table-layout: auto;
}

.woocommerce .woocommerce-checkout-review-order-table th.product-name,
.woocommerce .woocommerce-checkout-review-order-table th {
	width: auto;
	padding-right: 14px;
}

.woocommerce .woocommerce-checkout-review-order-table td {
	width: 1%;
}
/* ============================================================
   13. Panier, commande, compte : le fond, la carte, le champ
   ------------------------------------------------------------
   Mesure du 2026-08-11 sur /commander :

     fond de page       #FFFFFF  (blanc pur)
     champ de saisie    #FBFAF7  (craie)
     carte recap        #EFEAE0  (papier)
     ligne du recap     gris 7 %  par-dessus le papier
     boite de paiement  #EFEAE0  dans une carte #FBFAF7 dans #EFEAE0

   Trois beiges empiles sur du blanc : aucun des trois ne se detache,
   et le champ de saisie - a 4 points de blanc - ne se lit pas comme
   un champ. Le probleme n est pas la teinte, c est l absence de
   hierarchie fond / carte / champ.

   On la pose franchement :
     fond de page   papier   #EFEAE0   (chaud, recule)
     carte          blanc    #FFFFFF   (avance)
     champ          blanc + bord net, et cidre au focus

   Et les libelles cessent de crier : ils etaient en CAPITALES, 600,
   interlettrage 0,84 px, brun sur blanc. C est ce qui donnait cet air
   ratatine - beaucoup de bruit typographique pour peu de texte.
   ============================================================ */

body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account {
	background: var(--rlg-papier, #EFEAE0);
}

/* ---- les libelles ---- */

body.woocommerce-checkout .woocommerce form .form-row label,
body.woocommerce-account .woocommerce form .form-row label,
body.woocommerce-cart .woocommerce form .form-row label,
.woocommerce-checkout .emporter-selecteur label {
	display: block;
	margin-bottom: 8px;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.4;
	color: var(--rlg-encre, #1F1D1A);
}

.woocommerce form .form-row label .required,
.woocommerce form .form-row abbr.required {
	color: var(--rlg-cidre-fonce, #9E6A1C);
	text-decoration: none;
	border: 0;
}

.woocommerce form .form-row .optional {
	color: var(--rlg-sarrasin, #6E6152);
	font-weight: 400;
}

/* ---- les champs ---- */

body.woocommerce-checkout .woocommerce form .form-row input.input-text,
body.woocommerce-checkout .woocommerce form .form-row textarea,
body.woocommerce-checkout .woocommerce form .form-row select,
body.woocommerce-account .woocommerce form .form-row input.input-text,
body.woocommerce-account .woocommerce form .form-row select,
body.woocommerce-cart .woocommerce .rlg-coupon__ligne input.input-text {
	background: #FFFFFF;
	border: 1px solid var(--rlg-trait, #DDD5C7);
	border-radius: 4px;
	min-height: 54px;
	color: var(--rlg-encre, #1F1D1A);
	transition: border-color .15s, box-shadow .15s;
}

body.woocommerce-checkout .woocommerce form .form-row input.input-text:focus,
body.woocommerce-checkout .woocommerce form .form-row textarea:focus,
body.woocommerce-checkout .woocommerce form .form-row select:focus,
body.woocommerce-account .woocommerce form .form-row input.input-text:focus {
	outline: none;
	border-color: var(--rlg-cidre, #C8892B);
	box-shadow: 0 0 0 3px rgba(200, 137, 43, .18);
}

.woocommerce form .form-row::placeholder,
.woocommerce form .form-row input::placeholder,
.woocommerce form .form-row textarea::placeholder {
	color: #9C9384;
}

.woocommerce form .form-row {
	margin-bottom: 20px;
}

/* ---- les titres de section ---- */

.woocommerce-checkout h3,
.woocommerce-account h2 {
	margin: 0 0 18px;
	font-family: var(--rlg-serif, Georgia, serif);
	font-size: 26px;
	font-weight: 400;
	letter-spacing: -.015em;
	color: var(--rlg-encre, #1F1D1A);
}

.woocommerce-checkout .col-2 h3 {
	margin-top: 38px;
}

/* ---- les cartes ---- */

.woocommerce-checkout .rlg-client > *,
.woocommerce-checkout #order_review,
.woocommerce-checkout .emporter-selecteur,
.woocommerce-cart .cart_totals,
.woocommerce-cart .rlg-panier__liste,
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account .woocommerce-MyAccount-navigation {
	background: #FFFFFF;
}

.woocommerce-checkout .col2-set,
.woocommerce-checkout .emporter-selecteur,
.woocommerce-checkout #order_review {
	padding: 26px;
	border: 1px solid var(--rlg-trait, #DDD5C7);
	border-radius: 6px;
}

.woocommerce-checkout .emporter-selecteur {
	margin-top: 26px;
}

.woocommerce-cart .rlg-panier__liste {
	padding: 4px 22px;
	border: 1px solid var(--rlg-trait, #DDD5C7);
	border-radius: 6px;
	border-top: 1px solid var(--rlg-trait, #DDD5C7);
}

.woocommerce-cart .rlg-ligne:last-child {
	border-bottom: 0;
}

.woocommerce .cart-collaterals .cart_totals {
	padding: 24px;
	border-radius: 6px;
}

/* Le recapitulatif : plus de gris pose sur du beige. */
.woocommerce .woocommerce-checkout-review-order-table tr,
.woocommerce .woocommerce-checkout-review-order-table td,
.woocommerce .woocommerce-checkout-review-order-table th,
.woocommerce .cart_totals table.shop_table tr,
.woocommerce .cart_totals table.shop_table td,
.woocommerce .cart_totals table.shop_table th {
	background: transparent;
}

/* ---- le paiement ---- */

.woocommerce-checkout #payment ul.payment_methods li {
	background: transparent;
	border: 1px solid var(--rlg-trait, #DDD5C7);
	border-radius: 4px;
}

.woocommerce-checkout #payment ul.payment_methods li:has(input:checked) {
	border-color: var(--rlg-cidre, #C8892B);
	background: rgba(200, 137, 43, .06);
}

.woocommerce-checkout #payment div.payment_box {
	background: var(--rlg-papier, #EFEAE0);
	color: var(--rlg-sarrasin, #6E6152);
}

/* ---- le bandeau code promo ---- */

.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error {
	background: #FFFFFF;
	border: 1px solid var(--rlg-trait, #DDD5C7);
	border-top: 3px solid var(--rlg-cidre, #C8892B);
	border-radius: 0 0 4px 4px;
	color: var(--rlg-encre, #1F1D1A);
	font-size: 15px;
}

.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-message::before {
	color: var(--rlg-cidre-fonce, #9E6A1C);
}

.woocommerce .woocommerce-info a,
.woocommerce .woocommerce-message a {
	color: var(--rlg-cidre-fonce, #9E6A1C);
}

/* ============================================================
   14. Le selecteur de creneau : on regle les jetons, pas les regles
   ------------------------------------------------------------
   Premiere tentative : redecrire .emporter-jour et .emporter-creneau
   ici. Elles perdaient - meme specificite, feuille du plugin chargee
   apres la notre. Et surtout c etait la mauvaise reponse : le plugin
   expose deja des variables faites pour ca.

   Le vrai defaut etait dans le plugin, qui ecrivait color:#fff en dur
   sur sa couleur primaire. Il a desormais un jeton
   --emporter-sur-primaire, et c est le theme qui tranche - lui seul
   sait sur quelle teinte le bouton est pose.
   ============================================================ */

.emporter-selecteur,
.emporter-points,
.emporter-carte,
.emporter-bandeau,
.emporter-semaine,
.emporter-aujourdhui {
	--emporter-primaire: var(--rlg-cidre, #C8892B);
	--emporter-sur-primaire: #1F1D1A;
	--emporter-texte: var(--rlg-encre, #1F1D1A);
	--emporter-attenue: var(--rlg-sarrasin, #6E6152);
	--emporter-bordure: var(--rlg-trait, #DDD5C7);
	--emporter-surface: #FFFFFF;
}

.emporter-selecteur {
	margin: 26px 0 0;
}

.emporter-selecteur__titre {
	margin: 0 0 16px;
	font-family: var(--rlg-serif, Georgia, serif);
	font-size: 22px;
	font-weight: 400;
	letter-spacing: -.01em;
}

.emporter-jour__nom {
	text-transform: none;
}

.emporter-point {
	margin-bottom: 22px;
}

/* ------------------------------------------------------------
   Le recapitulatif : des colonnes decidees, pas negociees.

   Mesure a 1440 px : nom 98 px, montant 244 px - l inverse de ce
   qu il faut. La cause tient a la structure du tableau : la ligne
   d article est <td>+<td>, les lignes de total sont <th>+<td>. Une
   largeur posee sur "td" touche donc le nom sur une ligne et le
   montant sur les autres, et le navigateur arbitre comme il peut.

   table-layout: fixed retire l arbitrage : les deux colonnes sont
   dites une fois, par leur rang.
   ------------------------------------------------------------ */

.woocommerce table.shop_table.woocommerce-checkout-review-order-table {
	table-layout: fixed;
	width: 100%;
}

.woocommerce .woocommerce-checkout-review-order-table tr > *:first-child {
	width: 66%;
	padding-right: 12px;
	text-align: left;
}

.woocommerce .woocommerce-checkout-review-order-table tr > *:last-child {
	width: 34%;
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Le total porte deja son montant en gros : la mention de TVA passe
   dessous plutot que de pousser la ligne. */
.woocommerce .woocommerce-checkout-review-order-table .order-total td small,
.woocommerce .cart_totals .order-total td small {
	display: block;
	margin-top: 2px;
	font-family: var(--rlg-sans, inherit);
	font-size: 12px;
	color: var(--rlg-sarrasin, #6E6152);
	white-space: normal;
}

.woocommerce .cart_totals table.shop_table {
	table-layout: fixed;
}

.woocommerce .cart_totals table.shop_table tr > *:first-child {
	width: 58%;
}

.woocommerce .cart_totals table.shop_table tr > *:last-child {
	width: 42%;
	text-align: right;
	white-space: nowrap;
}

/* Le pays est un <select> qui gardait la largeur de son contenu :
   une boite de 55 px autour du mot "France", au milieu de champs
   pleine largeur. */
body.woocommerce-checkout .woocommerce form .form-row select,
body.woocommerce-checkout .woocommerce-input-wrapper select,
body.woocommerce-account .woocommerce form .form-row select {
	width: 100%;
	max-width: 100%;
}

body.woocommerce-checkout .woocommerce-input-wrapper {
	display: block;
	width: 100%;
}
/* table-layout: fixed decide les colonnes sur la premiere rangee : on ne
   peut pas elargir la seule ligne du total. La mention de TVA tient donc
   sur une ligne par sa taille, et non par la largeur de sa colonne. */
.woocommerce .woocommerce-checkout-review-order-table .order-total td small,
.woocommerce .cart_totals .order-total td small {
	font-size: 11.5px;
	white-space: nowrap;
}
/* ------------------------------------------------------------
   L air sous "Ajouter au panier".

   Mesure du 2026-08-12 sur l accueil : padding-bottom 0, bouton a
   1 px du bord de la vignette. Notre regle visait
   ".woocommerce ul.products li.product" - deux classes - quand
   Elementor ecrit la sienne depuis le widget, avec une classe de
   plus. On egale, on n ecrase pas.
   ------------------------------------------------------------ */

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.elementor-widget-woocommerce-products ul.products li.product,
.elementor-widget-wc-archive-products ul.products li.product {
	padding-bottom: 20px;
}

@media (min-width: 620px) {

	.woocommerce ul.products li.product,
	.elementor-widget-woocommerce-products ul.products li.product,
	.elementor-widget-wc-archive-products ul.products li.product {
		padding-bottom: 24px;
	}
}

@media (min-width: 1000px) {

	.woocommerce ul.products li.product,
	.elementor-widget-woocommerce-products ul.products li.product,
	.elementor-widget-wc-archive-products ul.products li.product {
		padding-bottom: 28px;
	}
}
/* ------------------------------------------------------------
   L air sous le bouton, deuxieme approche.

   La premiere posait un padding-bottom sur la vignette. Il ne prenait
   pas : mesure a 1440 px, padding calcule a 0 alors que la regle est
   bien dans la feuille servie et que le selecteur correspond. Je n ai
   pas su nommer la regle qui gagne - mes sondes se sont contredites.

   Plutot que d empiler un !important sur une cause non comprise, on
   pose l air la ou notre regle s applique deja, verifie a la mesure :
   la marge basse du bouton. Meme resultat visuel, cause connue.
   ------------------------------------------------------------ */

.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button,
.elementor-widget-woocommerce-products ul.products li.product .button {
	margin: auto 12px 20px;
}

@media (min-width: 620px) {

	.woocommerce ul.products li.product .button,
	.woocommerce-page ul.products li.product .button,
	.elementor-widget-woocommerce-products ul.products li.product .button {
		margin: auto 18px 24px;
	}
}

@media (min-width: 1000px) {

	.woocommerce ul.products li.product .button,
	.woocommerce-page ul.products li.product .button,
	.elementor-widget-woocommerce-products ul.products li.product .button {
		margin: auto 22px 26px;
	}
}

/* "lundi et jeudi" : la capitale ne va qu au premier mot. text-transform
   capitalize donnait "Lundi Et Jeudi". */
.emporter-points__jours {
	text-transform: none;
}

.emporter-points__jours::first-letter {
	text-transform: uppercase;
}
/* ------------------------------------------------------------
   Le bouton des vignettes debordait de sa carte.

   Mesure du 2026-08-12 a 390 px sur /la-carte : vignette 159 px,
   bouton 168 px. Le min-width: 168px avait ete pose pour centrer les
   boutons quand la grille faisait quatre colonnes ; a deux colonnes
   sur telephone, il est plus large que la carte qui le contient.

   Une largeur minimale fixe ne peut pas convenir a une grille qui
   change de nombre de colonnes. Le bouton occupe donc la carte moins
   ses marges : centre par construction, et cible tactile plus large.
   ------------------------------------------------------------ */

.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button,
.elementor-widget-woocommerce-products ul.products li.product .button,
.elementor-widget-wc-archive-products ul.products li.product .button {
	min-width: 0;
	width: auto;
	align-self: stretch;
}
/* ------------------------------------------------------------
   Les boutons alignes d une vignette a l autre.

   Mesure du 2026-08-12 : li.product est en display:block. Les cartes
   d une meme rangee ont bien la meme hauteur - la grille les etire -
   mais le bouton, lui, suit le flux du texte. Un titre sur une ligne
   place donc son bouton 24 px plus haut que celui d a cote.

   La carte devient une colonne flex, et le bouton porte margin-top:
   auto. C est le seul moyen d aligner des boutons sans imposer une
   hauteur fixe aux titres - qui casserait au premier nom long.
   ------------------------------------------------------------ */

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.elementor-widget-woocommerce-products ul.products li.product,
.elementor-widget-wc-archive-products ul.products li.product {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* Le lien qui porte l image, le titre et le prix occupe toute la
   largeur : sans cela il se retrecit a son contenu dans la colonne. */
.woocommerce ul.products li.product > a,
.woocommerce-page ul.products li.product > a,
.elementor-widget-woocommerce-products ul.products li.product > a {
	width: 100%;
	display: block;
}

.woocommerce ul.products li.product > a.button,
.woocommerce-page ul.products li.product > a.button,
.elementor-widget-woocommerce-products ul.products li.product > a.button {
	display: flex;
	width: auto;
}
/* ============================================================
   LE FORMULAIRE DE VARIATIONS - 2026-08-12
   ------------------------------------------------------------
   Mesure sur /produit/menu-petite-faim :

     page              #FFFFFF  blanc pur
     boite de choix    #EFEAE0  papier
     bordure de boite  #1F1D1A  encre - un trait noir, hérité
     champ select      transparent

   Trois valeurs qui se neutralisent : le champ n a pas de fond
   propre, il prend celui de la boite, et rien ne se lit comme un
   endroit ou l on choisit quelque chose.

   Meme hierarchie que sur la commande, dans l autre sens puisque
   la page est blanche ici : la boite recule en papier, les champs
   avancent en blanc. Le trait noir redevient un trait.
   ============================================================ */

.woocommerce div.product form.cart table.variations,
.rlg-formulaire table.variations {
	background: var(--rlg-papier, #EFEAE0);
	border: 1px solid var(--rlg-trait, #DDD5C7);
	border-radius: 5px;
}

.woocommerce div.product form.cart table.variations tr,
.rlg-formulaire table.variations tr {
	border-bottom: 1px solid var(--rlg-trait, #DDD5C7);
}

.woocommerce div.product form.cart table.variations th.label label,
.rlg-formulaire table.variations th.label label {
	font-weight: 600;
	font-size: 14.5px;
	color: var(--rlg-encre, #1F1D1A);
	margin-bottom: 8px;
}

/* Le champ : fond plein, bord net, et une bague au focus. Sans fond
   propre il empruntait celui de la boite. */
.woocommerce div.product form.cart table.variations select,
.rlg-formulaire table.variations select {
	background-color: #FFFFFF;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236E6152' stroke-width='1.6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 15px center;
	border: 1px solid var(--rlg-trait, #DDD5C7);
	border-radius: 4px;
	min-height: 54px;
	padding: 0 42px 0 14px;
	font-size: 16px;
	color: var(--rlg-encre, #1F1D1A);
	appearance: none;
	-webkit-appearance: none;
	transition: border-color .15s, box-shadow .15s;
}

.woocommerce div.product form.cart table.variations select:focus,
.rlg-formulaire table.variations select:focus {
	outline: none;
	border-color: var(--rlg-cidre, #C8892B);
	box-shadow: 0 0 0 3px rgba(200, 137, 43, .18);
}

.woocommerce div.product form.cart table.variations select:hover,
.rlg-formulaire table.variations select:hover {
	border-color: var(--rlg-sarrasin, #6E6152);
}

/* Le prix de la variation choisie, une fois les trois faits. */
.rlg-formulaire .woocommerce-variation-price .price,
.rlg-formulaire .woocommerce-variation-price bdi {
	font-family: var(--rlg-serif, Georgia, serif);
	font-size: 24px;
	color: var(--rlg-cidre-fonce, #9E6A1C);
}

.rlg-formulaire .woocommerce-variation-availability p {
	margin: 0;
	font-size: 14px;
	color: var(--rlg-sarrasin, #6E6152);
}
/* ============================================================
   15. Le panneau lateral du panier
   ------------------------------------------------------------
   La coque appartient au widget d Elementor ; le contenu vient de
   notre gabarit cart/mini-cart.php, repris par filtre. Trois classes
   restent intouchees, le JavaScript d Elementor s y accroche :
   __products, __product, et les deux classes de suppression.
   ============================================================ */

.elementor-menu-cart__main {
	display: flex;
	flex-direction: column;
	padding: 0;
	background: var(--rlg-craie, #FBFAF7);
}

.elementor-menu-cart__main .widget_shopping_cart_content {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

/* ---- le rappel de retrait ---- */

.rlg-mini__retrait {
	display: flex;
	gap: 11px;
	margin: 0;
	padding: 13px 18px;
	background: var(--rlg-papier, #EFEAE0);
	border-bottom: 1px solid var(--rlg-trait, #DDD5C7);
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--rlg-sarrasin, #6E6152);
}

.rlg-mini__retrait i {
	flex: 0 0 7px;
	height: 7px;
	margin-top: 7px;
	border-radius: 999px;
	background: var(--rlg-cidre, #C8892B);
}

.rlg-mini__retrait b {
	display: block;
	margin-bottom: 4px;
	font-size: 10px;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--rlg-cidre-fonce, #9E6A1C);
}

.rlg-mini__retrait em {
	font-style: normal;
	font-weight: 600;
	color: var(--rlg-encre, #1F1D1A);
}

/* ---- la liste ---- */

.elementor-menu-cart__products {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 0 18px;
}

.elementor-menu-cart__product {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr) auto;
	grid-template-areas:
		"img nom retirer"
		"img qte total";
	gap: 6px 13px;
	align-items: start;
	padding: 16px 0;
	border-bottom: 1px solid var(--rlg-trait, #DDD5C7);
}

.elementor-menu-cart__product:last-child {
	border-bottom: 0;
}

.elementor-menu-cart__product-image {
	grid-area: img;
}

.elementor-menu-cart__product-image img {
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: 4px;
	border: 1px solid var(--rlg-trait, #DDD5C7);
}

.elementor-menu-cart__product-name {
	grid-area: nom;
	min-width: 0;
	font-family: var(--rlg-serif, Georgia, serif);
	font-size: 15.5px;
	line-height: 1.3;
}

.elementor-menu-cart__product-name a {
	color: var(--rlg-encre, #1F1D1A);
	text-decoration: none;
}

.rlg-mini__pu {
	display: block;
	margin-top: 3px;
	font-family: var(--rlg-sans, inherit);
	font-size: 13px;
	color: var(--rlg-sarrasin, #6E6152);
}

.elementor-menu-cart__product-name .variation {
	margin: 6px 0 0;
	font-family: var(--rlg-sans, inherit);
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--rlg-sarrasin, #6E6152);
}

.elementor-menu-cart__product-name .variation dt,
.elementor-menu-cart__product-name .variation dd {
	display: inline;
	margin: 0;
	font-weight: 400;
}

.elementor-menu-cart__product-name .variation dd::after {
	content: "";
	display: block;
}

.rlg-mini__q {
	grid-area: qte;
	align-self: center;
	display: inline-flex;
	align-items: center;
	width: max-content;
	background: var(--rlg-craie, #FBFAF7);
	border: 1px solid var(--rlg-trait, #DDD5C7);
	border-radius: 3px;
	transition: opacity .15s;
}

.rlg-mini__q.est-occupe {
	opacity: .45;
	pointer-events: none;
}

.rlg-mini__q button {
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--rlg-encre, #1F1D1A);
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
}

.rlg-mini__q b {
	width: 30px;
	text-align: center;
	font-size: 14.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.elementor-menu-cart__product-price {
	grid-area: total;
	align-self: center;
	text-align: right;
	font-family: var(--rlg-serif, Georgia, serif);
	font-size: 17px;
	color: var(--rlg-cidre-fonce, #9E6A1C);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Elementor masque la croix par defaut :
     .elementor-menu-cart__product-remove > a.elementor_remove_from_cart_button
     { display: var(--elementor-remove-from-cart-button, none) }

   Le reglage natif show_remove_icon n alimente pas cette variable -
   verifie le 2026-08-12, elle restait a none apres l avoir coche.
   On la pose donc directement : c est travailler avec le mecanisme
   d Elementor, pas contre lui.

   Une croix qui n apparait qu au survol n existe pas sur un ecran
   tactile, et c est la seule facon de retirer un article du
   panneau. */
.elementor-menu-cart__product-remove {
	grid-area: retirer;
	justify-self: end;
	position: static;
	--elementor-remove-from-cart-button: grid;
}

.elementor-menu-cart__product-remove a {
	position: static;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	margin: -4px -6px 0 0;
	border-radius: 999px;
	color: var(--rlg-sarrasin, #6E6152) !important;
	font-size: 0;
}

.elementor-menu-cart__product-remove a::before {
	content: "\2715";
	font-size: 16px;
	line-height: 1;
}

.elementor-menu-cart__product-remove a:hover {
	background: #B3261E;
	color: #fff !important;
}

/* La seconde ancre de suppression ferait doublon a l ecran. */
.elementor-menu-cart__product-remove a.remove_from_cart_button {
	display: none;
}

/* ---- suggestions ---- */

.rlg-mini__sug {
	padding: 14px 18px;
	background: var(--rlg-papier, #EFEAE0);
	border-top: 1px solid var(--rlg-trait, #DDD5C7);
}

.rlg-mini__sug-t {
	display: block;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--rlg-cidre-fonce, #9E6A1C);
}

.rlg-mini__sug-l {
	display: flex;
	gap: 10px;
	margin-top: 11px;
}

.rlg-mini__sug-l article {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
	padding: 8px;
	background: var(--rlg-craie, #FBFAF7);
	border: 1px solid var(--rlg-trait, #DDD5C7);
	border-radius: 4px;
}

.rlg-mini__sug-l img {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	object-fit: cover;
	border-radius: 3px;
	margin: 0;
}

.rlg-mini__sug-l .d {
	flex: 1;
	min-width: 0;
}

.rlg-mini__sug-l .d a {
	display: block;
	font-family: var(--rlg-serif, Georgia, serif);
	font-size: 13px;
	line-height: 1.25;
	color: var(--rlg-encre, #1F1D1A);
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.rlg-mini__sug-l .px {
	font-size: 12.5px;
	color: var(--rlg-cidre-fonce, #9E6A1C);
	font-variant-numeric: tabular-nums;
}

.rlg-mini__plus {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	background: transparent;
	border: 1px solid var(--rlg-cidre, #C8892B);
	border-radius: 3px;
	color: var(--rlg-cidre-fonce, #9E6A1C);
	font-size: 16px;
	line-height: 1;
	text-decoration: none;
}

.rlg-mini__plus:hover {
	background: var(--rlg-cidre, #C8892B);
	color: #1F1D1A;
}

/* ---- pied ---- */

.elementor-menu-cart__subtotal {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 10px;
	padding: 16px 18px 0;
	border-top: 1px solid var(--rlg-trait, #DDD5C7);
	font-family: var(--rlg-serif, Georgia, serif);
	font-size: 18px;
}

.elementor-menu-cart__subtotal strong {
	flex: 1;
	font-weight: 400;
}

.elementor-menu-cart__subtotal .amount,
.elementor-menu-cart__subtotal bdi {
	font-size: 25px;
	color: var(--rlg-cidre-fonce, #9E6A1C);
	font-variant-numeric: tabular-nums;
}

.rlg-mini__tva {
	flex: 1 0 100%;
	text-align: right;
	font-family: var(--rlg-sans, inherit);
	font-size: 12px;
	color: var(--rlg-sarrasin, #6E6152);
}

.elementor-menu-cart__footer-buttons {
	display: grid;
	gap: 9px;
	padding: 14px 18px calc(16px + env(safe-area-inset-bottom));
}

.elementor-menu-cart__footer-buttons .elementor-button {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	border-radius: 3px;
	font-size: 15.5px;
	font-weight: 600;
}

.elementor-menu-cart__footer-buttons .elementor-button--view-cart {
	background: transparent;
	color: var(--rlg-encre, #1F1D1A);
	border: 1px solid var(--rlg-trait, #DDD5C7);
}

.elementor-menu-cart__footer-buttons .elementor-button--view-cart:hover {
	background: var(--rlg-cidre, #C8892B);
	border-color: var(--rlg-cidre, #C8892B);
	color: #1F1D1A;
}

.elementor-menu-cart__footer-buttons .elementor-button--checkout {
	background: var(--rlg-cidre, #C8892B);
	color: #1F1D1A;
	border: 1px solid var(--rlg-cidre, #C8892B);
}

.elementor-menu-cart__footer-buttons .elementor-button--checkout:hover {
	background: var(--rlg-cidre-fonce, #9E6A1C);
	border-color: var(--rlg-cidre-fonce, #9E6A1C);
	color: var(--rlg-craie, #FBFAF7);
}

@media (min-width: 520px) {

	.elementor-menu-cart__footer-buttons {
		grid-template-columns: 1fr 1fr;
	}
}

/* ---- panier vide ---- */

.rlg-mini-vide {
	flex: 1;
	display: grid;
	align-content: center;
	justify-items: center;
	gap: 12px;
	padding: 30px 26px;
	text-align: center;
}

.rlg-mini-vide__r {
	display: grid;
	place-items: center;
	width: 62px;
	height: 62px;
	border-radius: 999px;
	background: var(--rlg-papier, #EFEAE0);
	border: 1px solid var(--rlg-trait, #DDD5C7);
	font-size: 26px;
}

.rlg-mini-vide__t {
	margin: 0;
	font-family: var(--rlg-serif, Georgia, serif);
	font-size: 20px;
}

.rlg-mini-vide__p {
	margin: 0;
	max-width: 30ch;
	font-size: 14.5px;
	color: var(--rlg-sarrasin, #6E6152);
}

.rlg-mini__b {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	margin-top: 6px;
	padding: 0 18px;
	background: var(--rlg-cidre, #C8892B);
	color: #1F1D1A;
	border: 1px solid var(--rlg-cidre, #C8892B);
	border-radius: 3px;
	font-size: 15.5px;
	font-weight: 600;
	text-decoration: none;
}