/* ==========================================================================
   Épicerie Racines — pages intérieures (Produit, Producteur, Contact, Panier,
   Connexion, Livraison et paiement, Commande confirmée).
   Les tokens (couleurs, polices, rayons) viennent de style.css.

   Sommaire
   1. Composants communs
   2. Fiche produit
   3. Fiche producteur
   4. Contact
   5. Panier
   6. Connexion
   7. Livraison et paiement
   8. Commande confirmée
   9. Pages WooCommerce sans maquette (repli)
   10. Boutique (repli)
   11. Page introuvable et texte d'introduction des catégories (repli)
   12. Responsive (repli)
   ========================================================================== */

/* 1. Composants communs ---------------------------------------------------- */
:root {
	/* Interligne « auto » de Jost tel que Figma le calcule (hhea : 1,07 + 0,375 = 1,445 × la taille, sans arrondi) ;
	   le navigateur arrondit chaque ligne à l'entier (24 px au lieu de 24,57 px à 17 px), d'où ce coefficient explicite. */
	--lh-jost: 1.445;
}

.inner {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 20px 50px 40px;
}

.heading-lg {
	font-size: var(--fs-section);
	font-weight: 600;
	line-height: var(--lh-jost);
	color: var(--color-graphite);
}

.link-more {
	flex: none;
	color: var(--color-cinnamon-wood);
	font-size: var(--fs-body-sm);
	font-weight: 600;
	line-height: var(--lh-jost);
	white-space: nowrap;
}

/* Fil d'Ariane */
.breadcrumb {
	flex: none;
	padding: 5px 0;
	overflow: hidden;
	overflow: clip;
}

.breadcrumb__list {
	display: flex;
	gap: 10px;
	align-items: center;
	white-space: nowrap;
}

.breadcrumb__item {
	display: flex;
	gap: 10px;
	align-items: center;
	color: var(--color-graphite);
	font-size: 0.875rem;
	line-height: var(--lh-jost);
}

.breadcrumb__item + .breadcrumb__item::before {
	content: ">";
	color: var(--color-black);
	font-size: var(--fs-small);
}

.breadcrumb__item [aria-current="page"] {
	font-weight: 700;
}

.breadcrumb--lg .breadcrumb__item {
	font-size: var(--fs-body);
}

.breadcrumb--sm .breadcrumb__item {
	font-size: var(--fs-small);
}

.breadcrumb--sm .breadcrumb__item [aria-current="page"] {
	font-weight: 600;
}

/* Filets de séparation : le trait est un fichier du thème (assets/img/separateur-*.svg) ;
   sans fichier, une bordure CSS équivalente prend le relais. */
.separator {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 20px;
	padding: 5px 38px;
	overflow: hidden;
	overflow: clip;
}

.separator__line {
	position: relative;
	display: block;
	flex: none;
	width: 988px;
	max-width: 100%;
	height: 0;
}

.separator__line img {
	position: absolute;
	top: -3px;
	left: 0;
	max-width: none;
}

.separator--solid .separator__line:not(:has(img))::before {
	content: "";
	position: absolute;
	top: -3px;
	right: 0;
	left: 0;
	height: 3px;
	background: var(--color-graphite);
}

/* Boutons d'action (terracotta) */
.cta,
.btn-add {
	display: flex;
	flex: none;
	gap: 20px;
	align-items: center;
	justify-content: center;
	height: 52px;
	padding: 5px 20px;
	border: 0;
	border-radius: var(--radius-sm);
	background: var(--color-cinnamon-wood);
	color: var(--color-antique-white);
	font: 500 var(--fs-body) / var(--lh-jost) var(--font-body);
	text-align: left;
	white-space: nowrap;
	cursor: pointer;
}

.cta {
	transition: background-color var(--hover-quick), color var(--hover-quick), box-shadow var(--hover-quick);
}

/* « Ajouter » (fiche produit) : l'animation de survol dure 300 ms dans la maquette */
.btn-add {
	transition: background-color 300ms ease-out, color 300ms ease-out, box-shadow 300ms ease-out;
}

/* Survol : terracotta → miel, texte et pictogramme graphite, ombre légère (le bouton grisé ne réagit pas) */
.cta:hover,
.btn-add:not(.disabled):hover {
	background: var(--color-honey-bronze);
	color: var(--color-graphite);
	box-shadow: var(--shadow-button-hover);
}

.btn-add .is-hover {
	display: none;
}

.btn-add:not(.disabled):hover .is-hover {
	display: block !important; /* masqué en ligne dans le HTML, pour ne jamais voir les deux pictogrammes à la fois */
}

.btn-add:not(.disabled):hover img:not(.is-hover) {
	display: none;
}

.btn-add img {
	flex: none;
	max-width: none;
}

.btn-add.disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

.btn-add[hidden] {
	display: none !important;
}

/* Compteur de la fiche produit (maquette « Frame 18 », états « Add / AddMore / AddMax ») : 153 × 52 px, blocs terracotta de 31 et 33 px,
   nombre graphite 17 px ; le bloc « + » s'estompe (70 %) à la quantité maximale. Il prend la place du bouton « Ajouter ». */
.qty-pill--page {
	--pill-ink: var(--color-antique-white);
	--pill-block: var(--color-cinnamon-wood);
	--pill-block-dim: rgba(184, 92, 57, 0.7);
	--pill-block-hover: var(--color-honey-bronze); /* comme le bouton « Ajouter » au survol */
	--pill-ink-hover: var(--color-graphite);
	flex: none;
	width: 153px;
	min-width: 0;
	height: 52px;
	color: var(--color-graphite);
	font-size: var(--fs-body);
}

.qty-pill--page .qty-pill__btn {
	width: 31px;
}

.qty-pill--page .qty-pill__btn--more {
	width: 33px;
}

/* Menu déroulant (« Format », « Objet ») : le <select> natif occupe toute la surface du cadre, flèche comprise,
   pour que le moindre clic dans le rectangle l'ouvre. Avec JavaScript, assets/js/select.js dessine par-dessus la liste
   de la maquette (« Dropdown menu » dans Figma) ; le <select> reste la source de vérité du formulaire.
   Les sélecteurs sont doublés (« .select .select__field ») pour l'emporter sur les règles génériques de WooCommerce
   et des formulaires (« .woocommerce form select »), qui redonneraient une seconde bordure et une hauteur de 45 px. */
.select {
	--select-py: 7px;
	--select-px: 10px;
	position: relative;
	display: block;
	width: 100%;
	border: 1px solid var(--color-graphite);
	border-radius: var(--radius-sm);
	background: var(--color-white);
	color-scheme: light; /* la liste native reste claire, même si le système est en mode sombre */
}

.select .select__field {
	display: block;
	width: 100%;
	height: auto;
	min-width: 0;
	margin: 0;
	padding: var(--select-py) calc(var(--select-px) * 2 + 14px) var(--select-py) var(--select-px);
	border: 0;
	border-radius: inherit;
	background: transparent;
	box-shadow: none;
	color: var(--color-graphite);
	color-scheme: light;
	font: inherit;
	cursor: pointer;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
}

.select .select__field:disabled {
	color: var(--color-graphite);
	-webkit-text-fill-color: var(--color-graphite);
	opacity: 1;
	cursor: default;
}

.select .select__field:focus-visible {
	outline: none;
}

.select:focus-within {
	outline: 3px solid var(--color-cinnamon-wood);
	outline-offset: 2px;
}

.select .select__chevron {
	position: absolute;
	top: 50%;
	right: var(--select-px);
	display: block;
	width: 14px;
	height: 7px;
	margin-top: -3.5px;
	pointer-events: none;
}

.select .select__chevron img {
	position: absolute;
	top: -14.29%;
	left: -7.14%;
	max-width: none;
}

/* Repère de localisation */
.pin {
	position: relative;
	display: block;
	flex: none;
	width: 20px;
	height: 20px;
	overflow: hidden;
	overflow: clip;
}

.pin img {
	position: absolute;
	top: 0;
	left: 12.17%;
	max-width: none;
}

/* Cartes produit de 200 px (pages Produit et Producteur) */
.product-card--wide {
	width: 200px;
	height: 314px;
}

.product-card--wide .product-card__label {
	width: 177px;
}

/* 2. Fiche produit ---------------------------------------------------------- */
.product-top {
	display: flex;
	flex: none;
	gap: 50px;
	align-items: center;
	justify-content: flex-start; /* sur grand écran, les photos restent alignées à gauche avec le fil d'Ariane et les titres */
	width: 100%;
	padding: 10px 0;
}

.product-gallery {
	display: flex;
	flex: none;
	gap: 20px;
	align-items: center;
	width: 620px;
}

.product-gallery--single {
	width: 400px;
}

.product-gallery__thumbs {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 10px;
	align-self: stretch;
	width: 200px;
	max-width: 200px;
	overflow: hidden;
	overflow: clip;
}

.product-gallery__thumbs li {
	display: flex;
	flex: 1 1 0;
	min-height: 0;
}

.product-gallery__thumb {
	position: relative;
	display: block;
	flex: 1 1 0;
	min-width: 0;
	padding: 0;
	overflow: hidden;
	overflow: clip;
	border: 0;
	border-radius: var(--radius-sm);
	background: var(--color-graphite);
	cursor: pointer;
}

.product-gallery__thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	pointer-events: none;
}

/* Miniature inactive : voile blanc à 40 % ; miniature active : cadre terracotta de 3 px */
.product-gallery__thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--radius-sm);
	background: rgba(255, 255, 255, 0.4);
	pointer-events: none;
}

.product-gallery__thumb.is-active::after {
	background: none;
	box-shadow: inset 0 0 0 3px var(--color-cinnamon-wood);
}

.product-gallery__main {
	position: relative;
	flex: 1 0 0;
	min-width: 1px;
	max-width: 401.7291259765625px;
	max-height: 410px;
	aspect-ratio: 400 / 408.23529052734375;
	overflow: hidden;
	overflow: clip;
	border-radius: var(--radius-sm);
	background: var(--color-graphite);
}

.product-gallery__slide {
	position: absolute;
	inset: 0;
}

.product-gallery__slide[hidden] {
	display: none;
}

.product-gallery__slide img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* Fiche producteur (mobile) : la grande photo s'ouvre dans la visionneuse */
.product-gallery__zoom {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: zoom-in;
}

.product-gallery__zoom:focus-visible {
	outline: 3px solid var(--color-cinnamon-wood);
	outline-offset: -3px;
}

.product-gallery__main::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--radius-sm);
	background: rgba(28, 28, 30, 0.2);
	pointer-events: none;
}

.product-summary {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	gap: 5px;
	align-items: stretch;
	justify-content: center;
	min-width: 1px;
	max-width: 510px; /* largeur de la colonne dans la maquette : sur grand écran, le prix et le bouton « Ajouter » restent près des photos au lieu de filer au bord de la page */
	padding: 10px 0;
}

.product-summary__head {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 30px;
	align-items: flex-start;
	padding: 10px 0;
	overflow: hidden;
	overflow: clip;
}

.product-title {
	color: var(--color-graphite);
	font-size: var(--fs-section);
	font-weight: 700;
	line-height: var(--lh-jost);
	text-transform: uppercase;
}

.product-meta-line {
	display: flex;
	gap: 5px;
	align-items: center;
	justify-content: center;
	font-size: var(--fs-body-sm);
	line-height: var(--lh-jost);
	white-space: nowrap;
}

.product-meta-line__unit,
.product-meta-line__format {
	color: var(--color-cinnamon-wood);
	font-weight: 500;
}

.product-meta-line__kilo {
	color: var(--color-black);
}

.product-buy {
	display: flex;
	flex-direction: column;
	gap: 5px;
	align-items: stretch;
}

.product-buy__row {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 140px;
	overflow: hidden;
	overflow: clip;
}

.product-buy__price {
	display: flex;
	align-items: center;
	height: 100%;
	overflow: hidden;
	overflow: clip;
	color: var(--color-graphite);
	font-size: var(--fs-section);
	font-weight: 700;
	line-height: var(--lh-jost);
	white-space: nowrap;
}

.product-buy__price ins {
	text-decoration: none;
}

.product-buy__price del {
	margin-right: 10px;
	font-size: 0.6em;
	font-weight: 400;
	opacity: 0.6;
}

.product-buy__action {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	height: 100%;
	padding: 0 10px;
	overflow: hidden;
	overflow: clip;
}

.product-buy__action .variations_button {
	display: flex;
}

/* WooCommerce injecte le prix, la description et la disponibilité de la variation choisie dans ce bloc :
   le prix est déjà affiché en grand (maquette), on ne garde donc le bloc que pour les lecteurs d'écran. */
.product-buy .single_variation {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden !important;
	border: 0;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.product-buy__unavailable {
	color: var(--color-cinnamon-wood);
	font-size: var(--fs-body);
	font-weight: 500;
}

.product-options {
	display: flex;
	flex: none;
	gap: 19px;
	align-items: center;
}

.product-option {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: center;
	overflow: hidden;
	overflow: clip;
	color: var(--color-graphite);
	font-size: var(--fs-body-sm);
	line-height: var(--lh-jost);
}

.product-option--format {
	gap: 8px;
	align-items: flex-start;
	min-width: 84px;
	height: 77px;
	overflow: visible;
}

.product-option__label {
	white-space: nowrap;
}

.product-option__icon {
	position: relative;
	display: block;
	flex: none;
	width: 54px;
	height: 54px;
}

.product-option__icon img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
}

.product-option__text {
	display: flex;
	align-items: center;
	height: 54px;
	font-weight: 500;
}

.calendar__month,
.calendar__day {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-cinnamon-wood);
	font-size: var(--fs-small);
	font-weight: 500;
	line-height: var(--lh-jost);
	white-space: nowrap;
}

.calendar__month {
	top: 12.96%;
	right: 22.22%;
	bottom: 51.85%;
	left: 22.22%;
}

.calendar__day {
	top: 50%;
	right: 37.04%;
	bottom: 24.07%;
	left: 37.04%;
}

.product-related {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 40px;
	align-items: center;
	width: 100%;
	overflow: hidden;
	overflow: clip;
}

.product-related .heading-lg {
	align-self: flex-start;
}

.product-related__list {
	display: flex;
	flex: none;
	gap: 120px;
	align-items: center;
	justify-content: center;
}

.product-related__list > li {
	display: flex;
	flex: none;
}

.product-description {
	--desc-pad-r: 36px;
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
	width: 100%;
	padding: 12px var(--desc-pad-r) 12px 0;
	overflow: hidden;
	overflow: clip;
}

.product-description__text {
	color: var(--color-graphite);
	font-size: var(--fs-body);
	line-height: var(--lh-jost);
}

/* « Plus d'infos » : texte complet, informations complémentaires et « Réduire » (maquette Produit, état déplié) */
.product-more {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: flex-start;
	/* Dans la maquette dépliée, le bloc occupe toute la largeur (sans le retrait de droite de la section) et touche le bas de la section */
	width: calc(100% + var(--desc-pad-r));
	margin: 0 calc(-1 * var(--desc-pad-r)) -12px 0;
}

.product-more[hidden] {
	display: none;
}

/* Sans JavaScript, le bouton « Plus d'infos » ne peut rien déplier : le texte complet est affiché d'office */
html:not(.js) .product-more[hidden] {
	display: flex;
}

html:not(.js) .more-toggle {
	display: none;
}

.product-more:focus {
	outline: none;
}

.product-more__text {
	max-width: 370px;
	padding-bottom: 12px;
	color: var(--color-graphite);
	font-size: var(--fs-body-sm);
	line-height: var(--lh-jost);
}

.product-more__text p {
	margin: 0;
}

.product-more__text p + p {
	margin-top: 10px;
}

/* Filet central entre le texte et les informations complémentaires */
.product-more__rule {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	height: 20px;
}

.product-more__rule::before {
	content: "";
	width: 250px;
	max-width: 100%;
	height: 3px;
	border-radius: 2px;
	background: var(--color-graphite);
}

.product-info {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-self: stretch;
	padding: 12px 0;
}

.product-info__title {
	color: var(--color-graphite);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: var(--lh-jost);
}

.product-info__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	font-size: var(--fs-body-sm);
	line-height: 23px;
}

.product-info__row dt {
	margin: 0;
	color: var(--color-graphite);
}

.product-info__row dd {
	margin: 0;
	color: var(--color-cinnamon-wood);
}

/* Le poids sort de WooCommerce en minuscules (« 0,3 kg ») : la maquette l'écrit « 0,3 KG » */
.product-info__row dd[data-info-weight] {
	text-transform: uppercase;
}

.more-toggle {
	display: inline-grid;
	grid-template-columns: max-content;
	grid-template-rows: max-content;
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-cinnamon-wood);
	font: 700 var(--fs-body-sm) / var(--lh-jost) var(--font-body);
	text-align: left;
	cursor: pointer;
	place-items: start;
}

.more-toggle[hidden] {
	display: none;
}

.more-toggle__label,
.more-toggle__arrow {
	grid-area: 1 / 1;
	white-space: nowrap;
}

.more-toggle__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 0;
	height: 13px;
	margin-top: 5px;
	margin-left: var(--arrow-x, 97px);
}

.more-toggle--close {
	--arrow-x: 69px;
	align-self: center;
	padding: 0 10px;
}

.more-toggle__turn {
	display: block;
	flex: none;
	transform: rotate(90deg);
	transition: transform 0.2s ease;
}

.more-toggle[aria-expanded="true"] .more-toggle__turn {
	transform: rotate(-90deg);
}

.more-toggle__line {
	position: relative;
	display: block;
	width: 13px;
	height: 0;
}

.more-toggle__inset {
	position: absolute;
	inset: -3.68px -3.85%;
}

.more-toggle__inset img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
}

.product-producer {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 20px;
	align-items: flex-start;
	width: 100%;
	padding: 12px 0;
	overflow: hidden;
	overflow: clip;
}

.product-producer__row {
	display: flex;
	gap: 10px;
	align-items: center;
	width: 100%;
	padding: 10px 0;
	overflow: hidden;
	overflow: clip;
}

.product-producer__photo {
	position: relative;
	flex: none;
	width: 221px;
	height: 221px;
	overflow: hidden;
	overflow: clip;
	border: 2px solid var(--color-graphite);
	border-radius: 124px;
	background: var(--color-graphite);
}

.product-producer__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--producer-photo-position);
}

.product-producer__text {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	align-self: stretch;
	padding: 0 10px;
	overflow: hidden;
	overflow: clip;
	color: var(--color-graphite);
	line-height: var(--lh-jost);
}

.product-producer__name {
	font-size: 1.5rem;
	font-weight: 500;
	white-space: nowrap;
}

.product-producer__place {
	display: flex;
	flex: none;
	gap: 5px;
	align-items: center;
	font-size: 0.875rem;
	overflow: hidden;
	overflow: clip;
}

.product-producer__blurb {
	font-size: 0.875rem;
	white-space: nowrap;
}

/* 3. Fiche producteur ------------------------------------------------------- */
.inner--producer {
	min-height: 1528px; /* hauteur du cadre Figma (1528 px) */
	padding-bottom: 20px;
}

.producer-profile {
	display: flex;
	flex: none;
	gap: 20px;
	align-items: center;
	width: 100%;
	padding: 20px 0;
}

.producer-profile__photo {
	position: relative;
	flex: none;
	width: 655px;
	height: 614px;
	overflow: hidden;
	overflow: clip;
	border-radius: var(--radius-sm);
	background: var(--color-graphite);
}

.producer-profile__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--producer-photo-position);
}

.producer-profile__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--radius-sm);
	background: rgba(28, 28, 30, 0.2);
	pointer-events: none;
}

.producer-profile__text {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	min-width: 1px;
	min-height: 310px;
	color: var(--color-graphite);
	text-align: center;
}

.producer-profile__title {
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 22px;
	text-transform: uppercase;
}

.producer-profile__body {
	width: 100%;
	font-size: var(--fs-body);
	line-height: 22px;
}

.producer-profile__body p + p {
	margin-top: 22px; /* une ligne vide entre les paragraphes, comme dans la maquette */
}

.producer-strip {
	display: flex;
	flex: none;
	gap: 15px;
	align-items: center;
	width: 1180px;
	max-width: 100%;
	padding: 10px 0;
}

.producer-strip li {
	position: relative;
	flex: none;
	width: 224px;
	height: 209px;
	overflow: hidden;
	overflow: clip;
	border-radius: var(--radius-sm);
	background: var(--color-graphite);
}

.producer-strip img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* Depuis la 1.8.5, un clic sur une photo l'ouvre dans la visionneuse (voir « Visionneuse de photos » plus bas) */
.producer-strip__photo {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: inherit;
	background: transparent;
	color: inherit;
	cursor: zoom-in;
}

.producer-strip li:has(.producer-strip__photo:focus-visible) {
	z-index: 2;
	outline: 3px solid var(--color-cinnamon-wood);
	outline-offset: 3px;
	transform: scale(1.268); /* au clavier, la photo prend le même état que le survol */
}

.producer-strip li:has(.producer-strip__photo:focus-visible)::after {
	opacity: 0;
}

.producer-strip li::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--radius-sm);
	background: rgba(255, 255, 255, 0.4);
	pointer-events: none;
}

/* Survol d'une photo : elle grandit (224 × 209 → 284 × 265 px), passe au premier plan et perd son voile blanc */
@media (hover: hover) {
	.producer-strip li:hover {
		z-index: 2;
		transform: scale(1.268);
	}

	.producer-strip li:hover::after {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.producer-strip li,
	.producer-strip li::after {
		transition: transform 938ms cubic-bezier(0.16, 1, 0.3, 1), opacity 938ms cubic-bezier(0.16, 1, 0.3, 1);
	}
}

/* Visionneuse de photos (fiche producteur) ---------------------------------------
   Composant Figma « Zoom » (700:2702) : fenêtre au centre de l'écran sur un fond noir à 50 %, photo de 956 × 782 px avec un voile noir
   de 20 %, flèches de 75 px dans deux dégradés graphite de 227 px. Ouverture et changement de photo en fondu de 0,3 s ; un clic à
   côté de la photo ferme la fenêtre. */
html.has-lightbox {
	overflow: hidden;
}

.lightbox {
	position: fixed;
	inset: 0;
	z-index: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity 300ms ease-out;
}

.lightbox[hidden] {
	display: none;
}

.lightbox.is-open {
	opacity: 1;
}

.lightbox__backdrop {
	position: absolute;
	inset: 0;
	cursor: zoom-out;
}

.lightbox__frame {
	position: relative;
	width: min(956px, 100%, calc((100vh - 32px) * 956 / 782));
	width: min(956px, 100%, calc((100dvh - 32px) * 956 / 782));
	aspect-ratio: 956 / 782;
	overflow: hidden;
	overflow: clip;
	background: var(--color-graphite);
	container-type: inline-size;
	outline: none;
}

.lightbox__slides {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lightbox__slide {
	position: absolute;
	inset: 0;
	visibility: hidden;
	opacity: 0;
	transition: opacity 300ms ease-out, visibility 0s linear 300ms;
}

.lightbox__slide.is-current {
	visibility: visible;
	opacity: 1;
	transition-delay: 0s;
}

.lightbox__slide img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.lightbox__slide::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.2);
	pointer-events: none;
}

.lightbox__side {
	position: absolute;
	top: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	width: 23.74%; /* 227 px sur 956 */
	padding: 10px;
	pointer-events: none;
}

.lightbox__side--prev {
	left: 0;
	background: linear-gradient(90deg, rgba(28, 28, 30, 0.7) 13.321%, rgba(28, 28, 30, 0.34) 70.957%, rgba(28, 28, 30, 0) 100%);
}

.lightbox__side--next {
	right: 0;
	justify-content: flex-end;
	background: linear-gradient(270deg, rgba(28, 28, 30, 0.7) 13.321%, rgba(28, 28, 30, 0.34) 70.957%, rgba(28, 28, 30, 0) 100%);
}

.lightbox__nav {
	display: block;
	flex: none;
	width: 75px;
	width: clamp(44px, 7.85cqw, 75px); /* 75 px dans la maquette ; plus petit sur petit écran */
	aspect-ratio: 1;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	pointer-events: auto;
}

.lightbox__nav img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
}

.lightbox__side--next .lightbox__nav img {
	transform: rotate(180deg); /* la maquette retourne tout le panneau de droite */
}

.lightbox__nav:focus-visible {
	outline: 3px solid var(--color-antique-white);
	outline-offset: 2px;
}

/* « Fermer » : caché à l'écran (la maquette n'a pas de croix), mais atteignable au clavier et par les lecteurs d'écran */
.lightbox__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

.lightbox__close:focus-visible {
	width: auto;
	height: auto;
	padding: 8px 18px;
	clip-path: none;
	border: 2px solid var(--color-graphite);
	border-radius: 35px;
	background: var(--color-antique-white);
	color: var(--color-graphite);
	font: 400 var(--fs-body-sm) / var(--lh-jost) var(--font-body);
	cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
	.lightbox,
	.lightbox__slide {
		transition: none;
	}
}

.producers__list--archive {
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
}

/* 4. Contact ---------------------------------------------------------------- */
.inner--contact {
	gap: 30px;
	min-height: 801px; /* hauteur du cadre Figma (801 px) */
	padding: 40px 60px;
}

.contact {
	display: flex;
	flex: none;
	align-items: stretch;
	justify-content: center; /* depuis la 1.8.2 : tout le bloc (colonne de gauche + formulaire) est centré sur la page */
	width: 100%;
}

/* Colonne de gauche (cadre orange + plan) : 529 px, jusqu'à 589 px dès que la place le permet, contre 625 px pour le formulaire.
   Le bloc fait 1 214 px au plus (589 + 625) ; sur un écran plus large il est centré, avec des marges égales à gauche et à droite. */
.contact__info {
	display: flex;
	flex: 0 1 clamp(529px, calc(100% - 625px), 589px);
	flex-direction: column;
	gap: 30px;
	justify-content: flex-start;
	min-width: 0;
	padding-right: 29px;
}

.contact-card {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 0;
	padding: 15px 10px;
	overflow: hidden;
	overflow: clip;
	border: 2px solid var(--color-graphite);
	border-radius: 15px;
	background: var(--color-cinnamon-wood);
	color: var(--color-white);
	font-size: var(--fs-body);
	font-style: normal;
	line-height: var(--lh-jost);
	text-align: center;
}

.contact-map {
	position: relative;
	flex: none;
	width: 100%;
	aspect-ratio: 5 / 4; /* 500 × 400 px à 1280 px, 560 × 448 px sur grand écran (477 × 335 px avant la 1.8.1) */
	overflow: hidden;
	overflow: clip;
	border: 2px solid var(--color-graphite);
	border-radius: 15px;
	background: var(--color-white);
}

.contact-map img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	pointer-events: none;
}

/* Carte interactive (iframe) posée sur l'image d'attente ; le cadre arrondi de la maquette la rogne. */
.contact-map__frame {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	border: 0;
	background: transparent;
}

/* Écran tactile : un premier toucher active la carte, pour ne pas bloquer le défilement de la page avec le doigt. */
@media (pointer: coarse) {
	.contact-map:not(.is-active) .contact-map__frame {
		pointer-events: none;
	}
}

.contact-form {
	position: relative;
	display: flex;
	flex: 0 1 625px;
	flex-direction: column;
	gap: 30px;
	align-items: center;
	align-self: stretch;
	min-width: 0;
	/* pas de rognage : la liste du menu « Objet » doit pouvoir dépasser du cadre (ouverture vers le haut sur mobile) */
}

.contact-form__title {
	flex: none;
	color: var(--color-graphite);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: var(--lh-jost);
	white-space: nowrap;
}

.contact-form__trap {
	position: absolute;
	left: -9999px;
}

.contact-form__subject {
	flex: none;
	width: 100%;
	margin: -1.68px 0 -1.57px; /* dans la maquette, le menu (46,57 px) chevauche le blanc de 45 px prévu pour lui */
}

.contact-form__email {
	flex: none;
	width: 100%;
}

.contact-form__message {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	width: 100%;
	min-height: 120px;
}

.select--lg {
	--select-py: 10px;
	font-size: var(--fs-body);
	line-height: var(--lh-jost);
}

.field-input {
	display: block;
	width: 100%;
	height: 45px;
	padding: 10px;
	border: 1px solid var(--color-graphite);
	border-radius: var(--radius-sm);
	background: var(--color-white);
	color: var(--color-graphite);
	font: 400 var(--fs-body-sm) / var(--lh-jost) var(--font-body);
}

.field-input::placeholder {
	color: var(--color-graphite);
	opacity: 1;
}

.field-input:focus-visible {
	outline: 3px solid var(--color-cinnamon-wood);
	outline-offset: 2px;
}

.field-input--area {
	flex: 1 0 0;
	height: auto;
	min-height: 0;
	resize: none;
}

.form-notice {
	flex: none;
	width: 100%;
	padding: 10px;
	border: 1px solid var(--color-graphite);
	border-radius: var(--radius-sm);
	font-size: var(--fs-body-sm);
	line-height: 1.3;
}

.form-notice--success {
	background: var(--color-dusty-olive);
	color: var(--color-white);
}

.form-notice--error {
	background: var(--color-cinnamon-wood);
	color: var(--color-antique-white);
}

.contact__submit {
	display: flex;
	flex: none;
	justify-content: center; /* même centrage que .contact */
	width: 100%;
}

.contact__submit::before {
	content: "";
	flex: 0 1 clamp(529px, calc(100% - 625px), 589px); /* même colonne que .contact__info */
	min-width: 0;
}

.contact__submit-box {
	display: flex;
	flex: 0 1 625px; /* même largeur que .contact-form : le bouton reste centré sous le formulaire */
	justify-content: center;
	min-width: 0;
	padding: 0;
}

.contact-form__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 350px;
	max-width: 100%;
	height: 40px;
	padding: 5px 15px;
	border: 0;
	border-radius: var(--radius-sm);
	background: var(--color-dusty-olive);
	color: var(--color-white);
	font: 700 1.125rem / var(--lh-jost) var(--font-body);
	cursor: pointer;
}

.contact-form__submit {
	transition: background-color var(--hover-quick), color var(--hover-quick), box-shadow var(--hover-quick);
}

.contact-form__submit:hover {
	background: var(--color-olive-hover);
	color: var(--color-antique-white);
	box-shadow: var(--shadow-button-hover);
}

/* 5. Panier ----------------------------------------------------------------- */

/* Bouton d'action olive (Passer la commande, Envoyer, Payer maintenant, Voir ma commande) */
.btn-olive {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 5px 15px;
	border: 0;
	border-radius: var(--radius-sm);
	background: var(--color-dusty-olive);
	color: var(--color-white);
	font: 700 1.125rem / var(--lh-jost) var(--font-body);
	text-align: left;
	white-space: nowrap;
	cursor: pointer;
}

.btn-olive {
	transition: background-color var(--hover-quick), color var(--hover-quick), box-shadow var(--hover-quick);
}

.btn-olive:hover {
	background: var(--color-olive-hover);
	color: var(--color-antique-white);
	box-shadow: var(--shadow-button-hover);
}

/* Filets en pointillés : le trait est un fichier du thème (assets/img/separateur-pointille-<largeur>.svg) */
.dashed {
	position: relative;
	display: block;
	flex: none;
	pointer-events: none;
}

.dashed img {
	display: block;
	max-width: none;
}

.dashed--613 {
	width: 613px;
	height: 20px;
}

.dashed--550 {
	width: 550px;
	height: 20px;
}

.dashed--516 {
	width: 516px;
	height: 20px;
}

/* Le trait de 382 px (fichier d'export, 382 × 2) est centré dans le cadre de la maquette, à 8 px du haut */
.dashed--613 img {
	position: absolute;
	top: 8px;
	left: 115.5px;
}

.dashed--550 img {
	position: absolute;
	top: 8px;
	left: 84px;
}

.dashed--516 img {
	position: absolute;
	top: 8px;
	left: 0;
	width: 516px;
	height: 2px;
}

/* Sans fichier, un trait pointillé de la même couleur prend le relais */
.dashed:not(:has(img))::before {
	content: "";
	position: absolute;
	top: 8px;
	left: 115.5px;
	width: 382px;
	border-top: 2px dashed var(--color-dusty-olive);
}

.dashed--550:not(:has(img))::before {
	left: 84px;
}

.dashed--516:not(:has(img))::before {
	top: 8px;
	left: 0;
	width: 516px;
}

/* Messages de WooCommerce (ajout, erreur, information) */
.woocommerce-notices-wrapper:empty {
	display: none;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	margin: 0;
	padding: 10px 15px;
	border: 2px solid var(--color-dusty-olive);
	border-radius: var(--radius-sm);
	background: var(--color-white);
	color: var(--color-graphite);
	font-size: var(--fs-body-sm);
	line-height: 1.4;
	list-style: none;
}

.woocommerce-error {
	border-color: var(--color-cinnamon-wood);
}

.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a {
	font-weight: 600;
	text-decoration: underline;
}

.inner--cart {
	gap: 40px;
	min-height: 749px;
	padding: 40px 50px 20px;
}

/* Mise en page de la page Panier (« .cart » est aussi la classe du formulaire d'ajout au panier de WooCommerce : on cible la page) */
.inner--cart > .cart {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 10px;
	overflow: hidden;
	overflow: clip;
}

/* Les deux colonnes se partagent la largeur ; le récapitulatif compte sa bordure (2 × 2 px) dans sa base,
   comme dans la maquette (colonne des articles 578 px, récapitulatif 582 px). */
.cart__items {
	flex: 1 0 0;
	min-width: 1px;
}

.cart-collaterals {
	display: flex;
	flex: 1 0 4px;
	min-width: 1px;
}

.cart-list {
	display: flex;
	flex-direction: column;
	gap: 30px;
	align-items: flex-start;
}

.cart-item {
	display: flex;
	gap: 19px;
	align-items: center;
	width: 544px;
	max-width: 100%;
	padding: 10px;
	border: 2px solid var(--color-dusty-olive);
	border-radius: 10px;
	overflow: hidden;
	overflow: clip;
}

.cart-item__media {
	position: relative;
	flex: none;
	width: 101px;
	height: 101px;
}

.cart-item__media a {
	display: block;
	height: 100%;
}

.cart-item__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Voile de 20 % sur la photo (couche « scrim » de la maquette) */
.cart-item__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(28, 28, 30, 0.2);
	pointer-events: none;
}

.cart-item__body {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	gap: 20px;
	align-items: flex-start;
	min-width: 1px;
	overflow: hidden;
	overflow: clip;
}

.cart-item__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	width: 100%;
	color: var(--color-graphite);
	font-size: var(--fs-body-sm);
	font-weight: 600;
	line-height: var(--lh-jost);
}

/* La maquette passe à la ligne après « Cuvée » : les noms longs se coupent dans une colonne de 180 px. */
.cart-item__name {
	max-width: 180px;
}

.cart-item__price {
	flex: none;
	white-space: nowrap;
}

.cart-item__format,
.cart-item__label {
	color: var(--color-graphite);
	font-size: 0.875rem;
	line-height: var(--lh-jost);
	white-space: nowrap;
}

/* Choix du format dans le panier (produit variable) : « Format : [ 750 ml ▾ ] ». La liste déroulante déborde de la ligne. */
.inner--cart > .cart:has(.cart-item__format-picker),
.cart-item:has(.cart-item__format-picker),
.cart-item__body:has(.cart-item__format-picker) {
	overflow: visible;
}

.cart-item__format-picker {
	display: flex;
	flex: none;
	gap: 10px;
	align-items: center;
}

.cart-item__format-picker .select {
	--select-py: 3px;
	--select-px: 8px;
	flex: none;
	width: auto;
	font-size: 0.875rem;
	line-height: var(--lh-jost);
}

.cart-item__tools {
	display: flex;
	flex: none;
	gap: 10px;
	align-items: center;
	width: 100%;
	overflow: hidden;
	overflow: clip;
}

.qty-step {
	position: relative;
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-graphite);
	font: 400 0.875rem / 1 var(--font-body);
	cursor: pointer;
}

.qty-step img {
	flex: none;
	max-width: none;
}

/* Zone de clic agrandie sans modifier la mise en page */
.qty-step::after {
	content: "";
	position: absolute;
	inset: -10px -5px;
}

.qty-step:not(:has(img))::before {
	content: "+";
}

.qty-step[data-qty-step="-1"]:not(:has(img))::before {
	content: "−";
}

/* « .woocommerce » reste dans le sélecteur : sans lui, la règle générale « .woocommerce form .input-text » (champs de formulaire) l'emporte. */
.qty-field,
.woocommerce .cart-item__tools .qty-field {
	display: block;
	flex: none;
	width: calc(var(--digits, 1) * 1ch);
	min-width: 1ch;
	height: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--color-graphite);
	font: 400 0.875rem / var(--lh-jost) var(--font-body);
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.qty-field::-webkit-inner-spin-button,
.qty-field::-webkit-outer-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.cart-item__remove {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	min-width: 1px;
	height: 19px;
	padding: 0 3px;
	overflow: hidden;
	overflow: clip;
}

.cart-item__remove a {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 13px;
	height: 15px;
	color: var(--color-graphite);
	font-size: 0.875rem;
	line-height: 1;
}

.cart-item__remove img {
	flex: none;
	max-width: none;
}

/* Sans JavaScript, la quantité s'enregistre avec ce bouton ; avec JavaScript, elle se met à jour toute seule. */
.cart__update {
	margin-top: 20px;
	padding: 8px 15px;
	border: 1px solid var(--color-graphite);
	border-radius: var(--radius-sm);
	background: var(--color-white);
	color: var(--color-graphite);
	font: 500 var(--fs-body-sm) / var(--lh-jost) var(--font-body);
	cursor: pointer;
}

.js .cart__update {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Récapitulatif */
.cart-summary {
	position: relative;
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	gap: 10px;
	min-width: 1px;
	padding: 20px 0;
	border: 2px solid var(--color-dusty-olive);
	border-radius: 10px;
	overflow: hidden;
	overflow: clip;
}

.cart-summary__title {
	min-height: 45px;
	color: var(--color-graphite);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: var(--lh-jost);
	text-align: center;
}

.cart-summary__list {
	display: grid;
	grid-auto-rows: minmax(45px, auto);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
}

.cart-summary__row {
	display: contents;
}

.cart-summary__label,
.cart-summary__value {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 9px 10px;
	color: var(--color-graphite);
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: var(--lh-jost);
	white-space: nowrap;
}

.cart-summary__value {
	justify-content: flex-end;
}

.cart-summary__label--strong,
.cart-summary__value--strong {
	font-weight: 600;
}

.cart-summary__value--note {
	font-style: italic;
}

.cart-summary__label--top {
	position: relative;
	align-items: flex-start;
}

/* Le filet pointillé chevauche la ligne « Total » (cadre de 613 × 20 px, 7 px au-dessus de la ligne) */
.cart-summary__label .dashed {
	position: absolute;
	top: -7px;
	left: 0;
}

/* 1.8.23 : le filet s'étend sur toute la largeur du récapitulatif, avec la même marge (115,5 px, celle de la maquette) à gauche et à droite,
   au lieu de garder 382 px collés à gauche quand le récapitulatif est plus large que dans la maquette. Mêmes tirets (6 px, intervalle 6 px). */
.cart-summary__label .dashed {
	width: calc(200% + 10px); /* deux colonnes du récapitulatif + leur écart */
}

.cart-summary__label .dashed img {
	display: none;
}

.cart-summary__label .dashed::before,
.cart-summary__label .dashed:not(:has(img))::before {
	content: "";
	position: absolute;
	top: 8px;
	right: 115.5px;
	left: 115.5px;
	width: auto;
	height: 2px;
	border: 0;
	background: repeating-linear-gradient(90deg, var(--color-dusty-olive) 0 6px, transparent 6px 12px);
}

.cart-summary__action {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 45px;
}

/* « ← Continuer mes achats » */
.cart__back {
	display: inline-grid;
	flex: none;
	grid-template-columns: max-content;
	grid-template-rows: max-content;
	align-self: flex-start;
	margin-left: 10px;
	padding: 0 2px;
	color: var(--color-graphite);
	place-items: start;
}

.cart__back-arrow,
.cart__back-label {
	grid-area: 1 / 1;
}

.cart__back-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 0;
	margin-top: 11.5px;
}

.cart__back-turn {
	display: block;
	flex: none;
	transform: rotate(180deg);
}

.cart__back-line {
	position: relative;
	display: block;
	width: 20px;
	height: 0;
}

.cart__back-inset {
	position: absolute;
	inset: -7.36px -5%;
}

.cart__back-inset img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
}

.cart__back-label {
	margin-left: 30px;
	font-size: var(--fs-body);
	font-weight: 500;
	line-height: var(--lh-jost);
	white-space: nowrap;
}

/* Panier vide : message, retour à la boutique, puis les nouveautés */
.cart-empty-box {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 15px;
	align-items: flex-start;
}

.cart-empty {
	margin: 0;
	color: var(--color-graphite);
	font-size: var(--fs-subtitle);
	font-weight: 600;
	line-height: var(--lh-jost);
}

.cart-empty__hint {
	margin: 0;
	color: var(--color-graphite);
	font-size: var(--fs-body);
	line-height: var(--lh-jost);
}

.cart-empty-box .cart__back {
	margin-top: 5px;
}

.cart-empty__news {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 30px;
	width: 100%;
}

/* 6. Connexion --------------------------------------------------------------- */

/* Boutons pleine largeur (Envoyer, Continuer en tant qu'invité, Payer maintenant) */
.btn--block {
	width: 100%;
	height: 46px;
}

.btn-cinnamon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 5px 15px;
	border: 0;
	border-radius: var(--radius-sm);
	background: var(--color-cinnamon-wood);
	color: var(--color-antique-white);
	font: 700 1.125rem / var(--lh-jost) var(--font-body);
	text-align: left;
	white-space: nowrap;
	cursor: pointer;
}

.btn-cinnamon {
	transition: background-color var(--hover-quick), color var(--hover-quick), box-shadow var(--hover-quick);
}

.btn-cinnamon:hover {
	background: var(--color-honey-bronze);
	color: var(--color-graphite);
	box-shadow: var(--shadow-button-hover);
}

.btn--block.btn-cinnamon,
.btn--block.btn-olive {
	height: 46px;
}

/* Titre de page précédé d'une flèche de retour */
.page-head {
	display: flex;
	flex: none;
	gap: 40px;
	align-items: center;
}

.back-link {
	display: block;
	flex: none;
	width: 30px;
	height: 30px;
}

.back-link img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
}

.back-link:not(:has(img))::before {
	content: "←";
	font-size: 1.875rem;
	line-height: 30px;
}

/* Champs de formulaire (Connexion, Livraison et paiement) */
.form-field {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 5px;
	align-items: flex-start;
	width: 100%;
}

.form-label {
	color: var(--color-graphite);
	font-size: var(--fs-body);
	font-weight: 600;
	line-height: var(--lh-jost);
}

.form-input,
.woocommerce form .input-text,
.woocommerce form select:not(.select__field),
.woocommerce form textarea {
	display: block;
	width: 100%;
	height: 45px;
	padding: 10px;
	border: 1px solid var(--color-graphite);
	border-radius: var(--radius-sm);
	background: var(--color-white);
	color: var(--color-graphite);
	font: 400 var(--fs-body) / var(--lh-jost) var(--font-body);
}

.woocommerce form textarea {
	height: auto;
	min-height: 120px;
}

.form-input::placeholder {
	color: #b0b0b0;
	opacity: 1;
}

.form-input:focus-visible,
.woocommerce form .input-text:focus-visible {
	outline: 3px solid var(--color-cinnamon-wood);
	outline-offset: 2px;
}

.inner--auth {
	gap: 40px;
	min-height: 801px;
	padding: 40px 50px 20px;
}

.auth {
	display: flex;
	flex: none;
	gap: 10px;
	align-items: stretch;
	width: 100%;
	padding: 20px 10px;
	overflow: hidden;
	overflow: clip;
}

.auth__perks {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 40px;
	align-items: center;
	justify-content: center;
	width: 594px;
	height: 491px;
	border: 2px solid var(--color-black);
	border-radius: var(--radius-sm);
}

/* Illustration de 253 × 106,6 px : le cadre de 106 px de haut rogne le dernier demi-pixel, comme dans la maquette. */
.auth__perks-art {
	display: flex;
	flex: none;
	align-items: flex-start;
	justify-content: center;
	width: 100%;
	height: 106px;
	padding: 0 93px 66px;
	overflow: hidden;
	overflow: clip;
}

.auth__perks-img {
	flex: none;
	width: 253.064px;
	height: 106.633px;
}

.auth__perks-img img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
}

.auth__perks-title {
	color: var(--color-graphite);
	font-size: 1.75rem;
	font-weight: 700;
	line-height: var(--lh-jost);
	white-space: nowrap;
}

.auth__perks-list {
	margin: 0;
	padding: 0;
	color: var(--color-black);
	font-size: var(--fs-body);
	line-height: var(--lh-jost);
	list-style: none;
	white-space: nowrap;
}

.auth__form {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	gap: 40px;
	align-items: flex-start;
	justify-content: center;
	min-width: 1px;
	padding: 0 20px;
	overflow: hidden;
	overflow: clip;
}

.auth__forgot {
	align-self: flex-end;
	margin: 0;
	color: var(--color-graphite);
	font-size: var(--fs-body-sm);
	line-height: var(--lh-jost);
	white-space: nowrap;
}

.auth__forgot a,
.auth__switch a {
	text-decoration: underline;
	text-decoration-skip-ink: none;
	text-underline-position: from-font;
}

.auth__submit {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 10px;
	align-items: flex-end;
	justify-content: center;
	width: 100%;
}

.auth__switch {
	width: 357px;
	max-width: 100%;
	margin: 0;
	color: var(--color-graphite);
	font-size: var(--fs-body-sm);
	line-height: var(--lh-jost);
	text-align: right;
	white-space: nowrap;
}

/* Indication sous le champ « Mot de passe » de l'inscription (1.8.19) */
.auth__hint {
	margin: 6px 0 0;
	color: var(--color-graphite);
	font-size: 0.875rem;
	line-height: 1.4;
}

.auth__note {
	margin: 0;
	color: var(--color-graphite);
	font-size: var(--fs-body-sm);
	line-height: 1.4;
}

.auth__guest {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 36px;
}

/* Séparateur « ou » : deux traits de 200 × 2 px (fichiers du thème) autour du mot */
.or {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 20px;
	padding: 5px 38px;
	overflow: hidden;
	overflow: clip;
}

.or__line {
	position: relative;
	display: block;
	flex: none;
	width: 200px;
	height: 0;
}

.or__inset {
	position: absolute;
	inset: -2px 0 0;
}

.or__inset img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
}

.or__line:not(:has(img))::before {
	content: "";
	position: absolute;
	top: -2px;
	right: 0;
	left: 0;
	border-top: 2px dashed var(--color-dusty-olive);
}

.or__label {
	color: var(--color-graphite);
	font-size: var(--fs-body-sm);
	font-weight: 600;
	line-height: var(--lh-jost);
}

/* 7. Livraison et paiement ---------------------------------------------------- */
.is-hidden {
	display: none !important;
}

.inner--checkout {
	gap: 40px;
	min-height: 1086px;
	padding: 40px 50px 20px;
}

.age-notice {
	display: flex;
	flex: none;
	justify-content: center;
	width: 100%;
}

.age-notice__box {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 10px;
	align-items: center;
	justify-content: center;
	width: 715px;
	max-width: 100%;
	height: 152px;
	padding: 10px;
	overflow: hidden;
	overflow: clip;
	background: var(--color-cinnamon-wood);
}

.age-notice__icon {
	position: relative;
	display: block;
	flex: none;
	width: 36px;
	height: 36px;
	overflow: hidden;
}

.age-notice__icon img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
}

.age-notice__text {
	margin: 0;
	color: var(--color-antique-white);
	font-size: var(--fs-body-sm);
	font-weight: 700;
	line-height: var(--lh-jost);
	text-align: center;
	white-space: nowrap;
}

.checkout-layout {
	display: flex;
	flex: none;
	gap: 10px;
	align-items: center;
	width: 100%;
	padding: 20px 10px;
	overflow: hidden;
	overflow: clip;
}

/* Colonne de gauche : mode de réception puis adresse (contenu centré dans la hauteur de la rangée) */
.checkout-main {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	gap: 20px;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	min-width: 1px;
	padding: 0 20px;
	overflow: hidden;
	overflow: clip;
}

.checkout-modes {
	display: contents;
}

.mode-block {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 10px;
	align-items: center;
	width: 100%;
	padding: 10px;
	overflow: hidden;
	overflow: clip;
}

.mode-block__title,
.checkout-title {
	margin: 0;
	color: var(--color-graphite);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: var(--lh-jost);
	white-space: nowrap;
}

.mode-block__row {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	width: 100%;
	padding: 10px;
	overflow: hidden;
	overflow: clip;
}

.mode {
	position: relative;
	display: flex;
	flex: 1 0 0;
	min-width: 1px;
}

/* Case d'option masquée à l'écran mais utilisable au clavier : le bouton est son libellé */
.mode__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
}

.mode__label {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	min-width: 0;
	height: 35px;
	padding: 10px;
	overflow: hidden;
	overflow: clip;
	border: 1px solid var(--color-graphite);
	border-radius: var(--radius-sm);
	background: var(--color-white);
	color: var(--color-graphite);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: var(--lh-jost);
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
}

.mode__label strong {
	font-weight: 700;
}

.mode__input:checked + .mode__label {
	border-width: 2px;
	background: rgba(232, 176, 75, 0.7);
}

.mode__input:focus-visible + .mode__label {
	outline: 3px solid var(--color-cinnamon-wood);
	outline-offset: 2px;
}

.checkout-title {
	width: 100%;
	padding: 3px 16px;
	text-align: center;
	overflow: hidden;
	overflow: clip;
}

.woocommerce-billing-fields {
	width: 100%;
}

/* Champs fabriqués par woocommerce_form_field() : étiquette semi-grasse au-dessus, champ de 45 px */
.checkout-fields,
.wc-credit-card-form {
	display: grid;
	grid-template-columns: 239px 240px;
	row-gap: 20px;
	justify-content: space-between;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
}

.woocommerce-checkout .form-row {
	display: flex;
	flex-direction: column;
	gap: 5px;
	align-items: flex-start;
	width: 100%;
	margin: 0;
	padding: 0;
}

.woocommerce-checkout .form-row-wide {
	grid-column: 1 / -1;
}

.woocommerce-checkout .form-row-first {
	grid-column: 1;
}

.woocommerce-checkout .form-row-last {
	grid-column: 2;
}

.woocommerce-checkout .form-row label {
	color: var(--color-graphite);
	font-size: var(--fs-body);
	font-weight: 600;
	line-height: var(--lh-jost);
}

.woocommerce-checkout .form-row .required {
	display: none;
}

.woocommerce-checkout .form-row .optional {
	font-weight: 400;
}

.woocommerce-checkout .woocommerce-input-wrapper {
	display: block;
	width: 100%;
}

.woocommerce-checkout .form-row .input-text::placeholder {
	color: #b0b0b0;
	opacity: 1;
}

.woocommerce-checkout .woocommerce-invalid .input-text,
.woocommerce-checkout .woocommerce-invalid select {
	border-color: var(--color-cinnamon-wood);
	box-shadow: inset 0 0 0 1px var(--color-cinnamon-wood);
}

.woocommerce-checkout .checkbox {
	display: flex;
	gap: 10px;
	align-items: center;
	font-weight: 400;
}

.woocommerce-account-fields {
	width: 100%;
	margin-top: 20px;
}

/* Encadré de droite : paiement, filet, récapitulatif, bouton (ordre de la maquette, quel que soit l'ordre des fragments WooCommerce) */
.checkout-panel {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 20px;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	width: 594px;
	padding: 40px 20px; /* 1.8.30 : marge haute et basse, le champ « Code promo » allonge l'encadré jusqu'à ses bords */
	border: 2px solid var(--color-black);
	border-radius: var(--radius-sm);
}

.checkout-panel #order_review,
.checkout-panel #payment {
	display: contents;
}

.checkout-panel > .checkout-title {
	order: 0;
}

.checkout-panel .wc_payment_methods {
	order: 1;
}

.checkout-panel__sep {
	display: flex;
	flex: none;
	order: 2;
	justify-content: center;
	width: 100%;
	height: 20px;
	overflow: hidden;
	overflow: clip;
}

.checkout-panel .checkout-summary {
	order: 3;
}

.checkout-panel .checkout-coupon {
	order: 4;
}

.checkout-panel .place-order {
	order: 5;
}

.wc_payment_methods {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wc_payment_methods .payment_box {
	width: 100%;
	color: var(--color-graphite);
	font-size: var(--fs-body-sm);
}

.wc_payment_methods .payment_box > p {
	margin: 0;
}

.wc_payment_methods .payment_box > p + p {
	margin-top: 10px;
}

.wc_payment_methods > li > label {
	color: var(--color-graphite);
	font-weight: 600;
}

.wc_payment_methods > li > .input-radio {
	margin-right: 8px;
}

/* Un seul moyen de paiement : seuls ses champs sont montrés (maquette) ; l'étiquette reste lue par les lecteurs d'écran. */
.wc_payment_methods > li:only-child > .input-radio,
.wc_payment_methods > li:only-child > label,
.wc-credit-card-form label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Récapitulatif de la commande : 4 rangées de 53,8 px, filet pointillé à cheval sur « Total » */
.checkout-summary {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	overflow: hidden;
	overflow: clip;
	border-radius: 10px;
}

.checkout-summary__title {
	min-height: 53.8px;
	margin: 0;
	color: var(--color-graphite);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: var(--lh-jost);
	text-align: center;
}

.checkout-summary__list {
	display: grid;
	grid-auto-rows: minmax(53.8px, auto);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
}

.checkout-summary__row {
	display: contents;
}

.checkout-summary__label,
.checkout-summary__value {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 9px 10px;
	color: var(--color-graphite);
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: var(--lh-jost);
	white-space: nowrap;
}

.checkout-summary__value {
	justify-content: flex-end;
}

/* Détail des articles sous « N articles » (1.8.17) : une ligne par produit (quantité, nom, format, prix), en plus petit, sur toute la largeur du récapitulatif. */
.checkout-summary__items {
	grid-column: 1 / -1;
	margin: -10px 0 0; /* collé à la ligne « N articles » */
	padding: 0 10px;
}

.checkout-items {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0 0 0 12px;
	border-left: 2px solid var(--color-dusty-olive);
	list-style: none;
}

.checkout-items__item {
	display: flex;
	gap: 16px;
	align-items: baseline;
	justify-content: space-between;
	color: var(--color-graphite);
	font-size: 0.875rem;
	line-height: 1.35;
}

.checkout-items__qty {
	font-weight: 600;
	white-space: nowrap;
}

.checkout-items__price {
	flex: none;
	white-space: nowrap;
}

/* Raison de la gratuité sous « Livraison » (seuil atteint, code promo, retrait en magasin) : en italique comme la note
   « Calculée à la prochaine étape » du panier. « Livraison » et « Gratuit » restent alignés sur la première ligne. */
.checkout-summary__row.has-note > * {
	align-items: flex-start;
}

.checkout-summary__row.has-note .checkout-summary__label {
	flex-direction: column;
}

.checkout-summary__note {
	font-size: var(--fs-small);
	font-style: italic;
	line-height: 18px;
	white-space: normal;
}

.checkout-summary__label--total,
.checkout-summary__value--total {
	font-weight: 600;
}

.checkout-summary__label--total {
	position: relative;
	align-items: flex-start;
}

.checkout-summary__label .dashed {
	position: absolute;
	top: -11.4px;
	left: 2px;
}

/* Code promo (1.8.30) : sous le récapitulatif, au-dessus de « Payer maintenant ». Étiquette comme les champs de l'adresse, bouton
   « Appliquer » à l'apparence de « Payer maintenant » (.btn-olive), message sous le champ (filet olive : appliqué ; terracotta : erreur). */
.checkout-coupon {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 5px;
	width: 100%;
}

.checkout-coupon__label {
	color: var(--color-graphite);
	font-size: var(--fs-body);
	font-weight: 600;
	line-height: var(--lh-jost);
}

.checkout-coupon__row {
	display: flex;
	gap: 10px;
	width: 100%;
}

.woocommerce form .checkout-coupon__input {
	flex: 1 1 auto;
	min-width: 0;
	text-transform: uppercase;
}

.woocommerce form .checkout-coupon__input::placeholder {
	color: #b0b0b0;
	text-transform: none;
	opacity: 1;
}

.checkout-coupon__button {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	height: 45px;
	padding: 5px 20px;
	border: 0;
	border-radius: var(--radius-sm);
	background: var(--color-dusty-olive);
	color: var(--color-white);
	font: 700 1.125rem / var(--lh-jost) var(--font-body);
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--hover-quick), color var(--hover-quick), box-shadow var(--hover-quick);
}

.checkout-coupon__button:hover {
	background: var(--color-olive-hover);
	color: var(--color-antique-white);
	box-shadow: var(--shadow-button-hover);
}

.checkout-coupon__button:focus-visible {
	outline: 3px solid var(--color-cinnamon-wood);
	outline-offset: 2px;
}

.checkout-coupon__button:disabled {
	cursor: progress;
	opacity: 0.6;
}

.checkout-coupon__message {
	margin: 0;
	padding-left: 12px;
	border-left: 2px solid var(--color-dusty-olive);
	color: var(--color-graphite);
	font-size: 0.875rem;
	line-height: 1.35;
}

/* Vide : rien à l'écran, mais la zone reste en place pour que les lecteurs d'écran annoncent le prochain message */
.checkout-coupon__message:empty {
	margin-top: -5px;
	border: 0;
}

.checkout-coupon__message--error {
	border-left-color: var(--color-cinnamon-wood);
}

/* Code appliqué, dans le récapitulatif : le code puis « Retirer », sous « Code promo » */
.checkout-summary__coupon {
	font-style: normal;
}

.checkout-summary__code {
	font-weight: 600;
	letter-spacing: 0.02em;
}

.checkout-coupon-remove {
	margin-left: 6px;
	color: var(--color-graphite);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.checkout-coupon-remove:hover {
	color: var(--color-cinnamon-wood);
}

.checkout-coupon-remove:focus-visible {
	outline: 3px solid var(--color-cinnamon-wood);
	outline-offset: 2px;
}

/* Bouton « Payer maintenant » (et mentions légales éventuelles au-dessus) */
.place-order {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 10px;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 0;
	padding: 0;
}

.place-order .woocommerce-terms-and-conditions-wrapper {
	width: 100%;
	color: var(--color-graphite);
	font-size: 0.875rem;
	line-height: 1.4;
}

.place-order .woocommerce-privacy-policy-text p {
	margin: 0;
}

.place-order .btn--block {
	width: 100%;
}

/* 8. Commande confirmée ------------------------------------------------------ */

.inner--thanks {
	gap: 0;
	min-height: 897px;
	padding: 40px 10px 20px;
}

.thanks {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: center;
	width: 100%;
}

/* Animation « Check anim » : cercle tracé depuis 12 h, puis coche (pas de données de mouvement dans la maquette) */
.check-anim {
	display: block;
	flex: none;
	width: 180px;
	height: 180px;
}

.check-anim__ring,
.check-anim__tick {
	fill: none;
	stroke: var(--color-dusty-olive);
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 100;
	stroke-dashoffset: 0;
}

.check-anim__ring {
	stroke-width: 4;
}

.check-anim__tick {
	stroke-width: 8;
}

@media (prefers-reduced-motion: no-preference) {
	.check-anim__ring {
		animation: check-ring 0.7s cubic-bezier(0.65, 0, 0.35, 1) both;
	}

	.check-anim__tick {
		animation: check-tick 0.4s cubic-bezier(0.65, 0, 0.35, 1) 0.6s both;
	}
}

@keyframes check-ring {
	from {
		stroke-dashoffset: 100;
	}

	to {
		stroke-dashoffset: 0;
	}
}

@keyframes check-tick {
	0% {
		stroke-dashoffset: 100;
		opacity: 0;
	}

	1% {
		stroke-dashoffset: 100;
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.thanks__head {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 10px;
	align-items: center;
	text-align: center;
}

.thanks__title {
	margin: 0;
	color: var(--color-graphite);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: var(--lh-jost);
}

.thanks__lead {
	margin: 0;
	color: var(--color-black);
	font-size: var(--fs-body-sm);
	font-weight: 400;
	line-height: var(--lh-jost);
}

/* Encadré récapitulatif : 594 px, filet noir de 2 px */
.thanks__box {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 10px;
	box-sizing: border-box;
	width: 594px;
	max-width: 100%;
	padding: 10px 20px;
	border: 2px solid var(--color-black);
	border-radius: var(--radius-sm);
}

/* Figma arrondit l'interligne « auto » de Jost 17 px à 25 px : rangées de 43 px, lignes d'adresse de 25 px */
.thanks__box .checkout-summary__list {
	grid-auto-rows: auto;
	border-radius: 10px;
}

.thanks__box .checkout-summary__label,
.thanks__box .checkout-summary__value {
	line-height: 25px;
}

/* Le filet pointillé occupe sa propre rangée de 20 px : « Total » descend de 30 px (20 + 2 × 10 d'espacement) */
.thanks__box .order-total > * {
	margin-top: 30px;
}

.thanks__box .checkout-summary__label .dashed {
	top: -30px;
	left: 0;
}

.thanks__info {
	padding: 9px 10px;
	color: var(--color-graphite);
	font-size: var(--fs-body);
	line-height: 25px;
}

.thanks__info p {
	margin: 0;
	line-height: inherit;
}

.thanks__actions {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	width: 594px;
	max-width: 100%;
	padding: 20px 10px;
}

.thanks__actions--single {
	justify-content: center;
}

.thanks__actions .btn-cinnamon {
	font-weight: 500;
}

.thanks__extra:empty {
	display: none;
}

/* 9. Pages WooCommerce sans maquette ---------------------------------------------
   Nouveau paiement d'une commande (repli) ; l'espace « Mon compte » a sa propre section, plus bas (9 bis). */

.entry-wrap--shop {
	max-width: 1180px;
}

.woocommerce-account .woocommerce {
	display: flex;
	flex-wrap: wrap;
	gap: 30px 40px;
	align-items: flex-start;
}

.woocommerce-account .woocommerce-notices-wrapper {
	flex: 1 0 100%;
}

/* Écran Se connecter / Créer mon compte : pleine largeur de la page (sans cela, le bloc se réduit à son contenu) */
.woocommerce-account .woocommerce > .inner--auth,
.woocommerce-account .woocommerce > .inner--account {
	flex: 1 0 100%;
	min-width: 0;
}

/* Champ « Mot de passe » : WooCommerce l'enveloppe dans un <span class="password-input"> (qui se réduirait à la largeur
   par défaut d'un champ) et lui ajoute un bouton « afficher le mot de passe » sans style, qui apparaît comme un petit
   carré blanc. Le champ reprend la largeur de l'Identifiant ; le bouton est masqué, la maquette n'en dessine pas. */
.auth__form .password-input,
.account-form .password-input {
	display: block;
	position: relative;
	width: 100%;
}

.auth__form .show-password-input,
.account-form .show-password-input {
	display: none;
}

/* 9 bis. Mon compte ------------------------------------------------------------
   Pas de maquette Figma (hors bouton de l'en-tête et page Connexion) : l'espace client réutilise les composants du site —
   titre à flèche de retour, cartes à filet olive (comme les articles du panier), encadré noir (comme « Vos avantages »),
   boutons olive et terracotta, champs de 45 px. */

.inner--account {
	gap: 40px;
	min-height: 749px;
	padding: 40px 50px 20px;
}

.account {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

/* Menu du compte */
.account-nav {
	padding: 20px;
	border: 2px solid var(--color-black);
	border-radius: var(--radius-sm);
}

.account-nav__list {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.account-nav__link {
	display: block;
	padding: 10px 15px;
	border-radius: var(--radius-sm);
	color: var(--color-graphite);
	font-size: var(--fs-body);
	font-weight: 600;
	line-height: var(--lh-jost);
	transition: background-color var(--hover-quick), color var(--hover-quick);
}

.account-nav__link:hover {
	background: rgba(122, 139, 94, 0.2);
}

.account-nav__link[aria-current="page"] {
	background: var(--color-dusty-olive);
	color: var(--color-white);
}

.account-nav__item--logout {
	margin-top: 10px;
	padding-top: 15px;
	border-top: 1px solid rgba(47, 42, 34, 0.25);
}

.account-nav__item--logout .account-nav__link {
	color: var(--color-cinnamon-wood);
}

.account-nav__item--logout .account-nav__link:hover {
	background: rgba(184, 92, 57, 0.12);
}

/* Contenu */
.account__content {
	display: flex;
	flex-direction: column;
	gap: 30px;
	min-width: 0;
}

.account__content > .woocommerce-notices-wrapper {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.account__content > .woocommerce-notices-wrapper:empty {
	display: none;
}

.account-hello {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.account-title {
	color: var(--color-graphite);
	font-size: 1.75rem;
	font-weight: 700;
	line-height: var(--lh-jost);
}

.account-lead,
.account-empty,
.account-form__hint {
	color: var(--color-graphite);
	font-size: var(--fs-body);
	line-height: var(--lh-jost);
}

.account-form__hint {
	font-size: var(--fs-body-sm);
}

.account-card {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
	padding: 20px;
	border: 2px solid var(--color-dusty-olive);
	border-radius: 10px;
}

.account-card__title {
	color: var(--color-graphite);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: var(--lh-jost);
}

.account-card--empty {
	align-items: flex-start;
}

.account-empty__btn {
	align-self: flex-start;
}

.account-link-more {
	align-self: flex-start;
	text-decoration: underline;
}

/* Raccourcis du tableau de bord */
.account-tiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.account-tile__link {
	display: flex;
	flex-direction: column;
	gap: 5px;
	height: 100%;
	padding: 20px;
	border: 2px solid var(--color-dusty-olive);
	border-radius: 10px;
	background: var(--color-white);
	color: var(--color-graphite);
	transition: border-color var(--hover-quick), box-shadow var(--hover-quick);
}

.account-tile__link:hover {
	border-color: var(--color-cinnamon-wood);
	box-shadow: var(--shadow-button-hover);
}

.account-tile__title {
	font-size: 1.125rem;
	font-weight: 700;
	line-height: var(--lh-jost);
}

.account-tile__text {
	font-size: var(--fs-body-sm);
	line-height: 1.3;
	overflow-wrap: anywhere;
}

/* Bouton secondaire (filet graphite) : actions moins importantes que « Suivre ma commande » */
.btn-outline {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 5px 15px;
	border: 1px solid var(--color-graphite);
	border-radius: var(--radius-sm);
	background: var(--color-white);
	color: var(--color-graphite);
	font: 700 1.125rem / var(--lh-jost) var(--font-body);
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--hover-quick), box-shadow var(--hover-quick);
}

.btn-outline:hover {
	background: var(--color-honey-bronze);
	box-shadow: var(--shadow-button-hover);
}

/* Pastilles d'état d'une commande */
.status {
	display: inline-flex;
	flex: none;
	align-items: center;
	padding: 3px 12px;
	border: 1px solid transparent;
	border-radius: 35px;
	font-size: var(--fs-body-sm);
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
}

.status--done {
	background: var(--color-olive-hover);
	color: var(--color-white);
}

.status--progress {
	background: var(--color-honey-bronze);
	color: var(--color-graphite);
}

.status--waiting {
	border-color: var(--color-graphite);
	background: var(--color-white);
	color: var(--color-graphite);
}

.status--stopped {
	background: var(--color-cinnamon-wood);
	color: var(--color-white);
}

/* Liste des commandes */
.order-list {
	display: flex;
	flex-direction: column;
	gap: 15px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.order-card {
	display: grid;
	grid-template-areas: "main status total actions";
	grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 0.9fr) auto;
	gap: 10px 20px;
	align-items: center;
	padding: 15px 20px;
	border: 2px solid var(--color-dusty-olive);
	border-radius: 10px;
}

.order-card--flat {
	padding: 0;
	border: 0;
	border-radius: 0;
}

/* Trois boutons (commande en attente : payer, suivre, annuler) : ils passent sous les informations de la commande */
.order-card--stacked {
	grid-template-areas:
		"main status total"
		"actions actions actions";
	grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 0.9fr);
}

.order-card__main {
	display: flex;
	grid-area: main;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.order-card__number {
	font-size: 1.125rem;
	font-weight: 700;
	line-height: var(--lh-jost);
}

.order-card__number:hover {
	text-decoration: underline;
}

.order-card__date,
.order-card__count {
	font-size: var(--fs-body-sm);
	font-weight: 400;
	line-height: 1.3;
}

.order-card > .status {
	grid-area: status;
	justify-self: start;
}

.order-card__total {
	display: flex;
	grid-area: total;
	flex-direction: column;
	font-weight: 600;
	line-height: var(--lh-jost);
}

.order-card__actions {
	display: flex;
	grid-area: actions;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: flex-end;
}

.order-card .btn-olive,
.order-card .btn-cinnamon,
.order-card .btn-outline {
	height: 36px;
	font-size: 1rem;
}

.account-pagination {
	display: flex;
	gap: 15px;
	justify-content: space-between;
}

.account-pagination__next {
	margin-left: auto;
}

/* Détail d'une commande et suivi */
.order-view {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.order-view__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 20px;
	align-items: center;
	justify-content: space-between;
}

.order-view__line {
	margin: 0;
}

.order-view__date {
	font-size: var(--fs-body);
	line-height: var(--lh-jost);
}

/* Étapes : pastille, trait vers l'étape suivante (olive quand l'étape est franchie), libellé */
.order-track {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.order-track__step {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: center;
	text-align: center;
}

.order-track__step:not(:last-child)::after {
	position: absolute;
	top: 13px;
	left: 50%;
	z-index: 0;
	width: 100%;
	height: 2px;
	background: rgba(47, 42, 34, 0.25);
	content: "";
}

.order-track__step.is-done:not(:last-child)::after {
	background: var(--color-dusty-olive);
}

.order-track__dot {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: 28px;
	height: 28px;
	border: 2px solid rgba(47, 42, 34, 0.35);
	border-radius: 50%;
	background: var(--color-antique-white);
}

.order-track__step.is-done .order-track__dot {
	border-color: var(--color-dusty-olive);
	background: var(--color-dusty-olive);
}

.order-track__step.is-done .order-track__dot::after {
	position: absolute;
	top: 3px;
	left: 8px;
	width: 6px;
	height: 12px;
	border: solid var(--color-white);
	border-width: 0 2px 2px 0;
	content: "";
	transform: rotate(45deg);
}

.order-track__step.is-current .order-track__dot {
	border-color: var(--color-honey-bronze);
	background: var(--color-honey-bronze);
	box-shadow: 0 0 0 4px rgba(232, 176, 75, 0.35);
}

.order-track__label {
	font-size: var(--fs-body);
	font-weight: 700;
	line-height: var(--lh-jost);
}

.order-track__step.is-todo .order-track__label {
	color: rgba(47, 42, 34, 0.6);
	font-weight: 600;
}

.order-track__note {
	font-size: var(--fs-body-sm);
	line-height: 1.3;
}

/* Messages de l'épicerie */
.order-notes__list {
	display: flex;
	flex-direction: column;
	gap: 15px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.order-notes__item {
	padding-left: 15px;
	border-left: 3px solid var(--color-honey-bronze);
}

.order-notes__date {
	display: block;
	font-size: var(--fs-small);
	line-height: 1.3;
}

.order-notes__text,
.order-notes__text p {
	margin: 0;
	font-size: var(--fs-body);
	line-height: var(--lh-jost);
}

/* Articles et récapitulatif */
.order-items__list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.order-item {
	display: flex;
	gap: 15px;
	align-items: center;
	padding: 12px 0;
	border-top: 1px solid rgba(47, 42, 34, 0.2);
}

.order-item:first-child {
	padding-top: 0;
	border-top: 0;
}

.order-item__media {
	flex: none;
	width: 56px;
	height: 56px;
	overflow: hidden;
	border-radius: var(--radius-sm);
}

.order-item__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.order-item__body {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.order-item__name {
	font-weight: 600;
	line-height: var(--lh-jost);
}

.order-item__name a:hover {
	text-decoration: underline;
}

.order-item__meta,
.order-item__qty {
	font-size: var(--fs-body-sm);
	line-height: 1.3;
}

.order-item__total {
	flex: none;
	font-weight: 600;
	white-space: nowrap;
}

.order-summary {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding-top: 15px;
	border-top: 1px dashed var(--color-graphite);
}

.order-summary__row {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	justify-content: space-between;
	line-height: var(--lh-jost);
}

.order-summary__row dd {
	margin: 0;
	text-align: right;
	white-space: nowrap;
}

.order-summary__note {
	display: block;
	font-size: var(--fs-body-sm);
	font-style: italic;
	line-height: 18px;
}

.order-summary__row--total {
	padding-top: 10px;
	border-top: 1px solid var(--color-graphite);
	font-size: 1.25rem;
	font-weight: 700;
}

.order-reception__lines {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.order-reception__lines p {
	font-size: var(--fs-body);
	line-height: var(--lh-jost);
}

.order-view__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}

/* Fenêtre de confirmation (annulation d'une commande) */
.confirm {
	width: min(calc(100% - 32px), 480px);
	padding: 0;
	border: 2px solid var(--color-dusty-olive);
	border-radius: 10px;
	background: var(--color-white);
	color: var(--color-graphite);
	box-shadow: var(--shadow-elevation-1);
}

.confirm::backdrop {
	background: var(--scrim-hero);
}

.confirm__box {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0;
	padding: 30px;
}

.confirm__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.625rem;
	font-weight: 700;
	line-height: 1.2;
}

.confirm__text {
	margin: 0;
	font-size: var(--fs-body);
	line-height: var(--lh-jost);
}

.confirm__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	justify-content: flex-end;
}

.confirm__actions .btn-outline,
.confirm__actions .btn-cinnamon {
	height: 45px;
	font-size: 1.125rem;
}

.confirm__actions [aria-disabled="true"] {
	opacity: 0.6;
	pointer-events: none;
}

/* Formulaires : « Mes informations » et « Mon adresse » */
.account-form {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.account-form__grid,
.account-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
}

.account-form__wide {
	grid-column: 1 / -1;
}

.account-form__actions {
	display: flex;
	justify-content: flex-end;
}

.account-form__actions .btn-olive {
	min-width: 180px;
}

/* Champs fabriqués par woocommerce_form_field() (adresse) : mêmes règles que la page « Livraison et paiement » */
.account-fields .form-row {
	display: flex;
	flex-direction: column;
	gap: 5px;
	align-items: flex-start;
	width: 100%;
	margin: 0;
	padding: 0;
}

.account-fields .form-row-wide {
	grid-column: 1 / -1;
}

.account-fields .form-row label {
	color: var(--color-graphite);
	font-size: var(--fs-body);
	font-weight: 600;
	line-height: var(--lh-jost);
}

.account-fields .form-row .required {
	display: none;
}

.account-fields .form-row .optional {
	font-weight: 400;
}

.account-fields .woocommerce-input-wrapper {
	display: block;
	width: 100%;
}

.account-fields .form-row .input-text::placeholder {
	color: #b0b0b0;
	opacity: 1;
}

.account-fields .woocommerce-invalid .input-text,
.account-form .woocommerce-invalid .input-text {
	border-color: var(--color-cinnamon-wood);
	box-shadow: inset 0 0 0 1px var(--color-cinnamon-wood);
}

.account-addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.account-address {
	font-size: var(--fs-body);
	font-style: normal;
	line-height: var(--lh-jost);
}

.account-addresses .btn-outline {
	align-self: flex-start;
}

/* Mot de passe oublié : formulaire seul, centré */
.inner--auth-single {
	min-height: 560px;
}

.auth__form--single {
	flex: none;
	align-items: stretch;
	justify-content: flex-start;
	align-self: center;
	gap: 30px;
	width: 100%;
	max-width: 480px;
	padding: 0;
	overflow: visible;
}

/* 10. Boutique (repli) --------------------------------------------------------
   Pas de maquette pour la liste des produits : grille de cartes de 200 px (celles de la fiche Produit). */

.inner--shop {
	min-height: 600px;
	padding: 20px 50px 40px;
}

.shop-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, 200px);
	gap: 40px 60px;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Filtres de la boutique (1.8.29) : catégories en pastilles, puis producteur, tri et disponibilité.
   Les menus reprennent le composant « Menu déroulant » (.select) de la fiche produit. */
.shop-filters {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0 0 20px;
	padding: 0 0 20px;
	border-bottom: 1px solid var(--color-graphite);
}

.shop-filters__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.shop-chip {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 6px 18px;
	border: 1px solid var(--color-graphite);
	border-radius: 999px;
	background: var(--color-white);
	color: var(--color-graphite);
	font-size: var(--fs-body);
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--hover-quick), color var(--hover-quick);
}

.shop-chip:hover {
	background: #e6d8c2;
	background: color-mix(in srgb, var(--color-antique-white) 82%, var(--color-graphite));
	color: var(--color-graphite);
}

.shop-chip.is-active,
.shop-chip.is-active:hover {
	background: var(--color-graphite);
	color: var(--color-antique-white);
}

.shop-chip:focus-visible,
.shop-filters__submit:focus-visible,
.shop-filters__reset:focus-visible,
.shop-filter__check input:focus-visible {
	outline: 3px solid var(--color-cinnamon-wood);
	outline-offset: 3px;
}

.shop-filters__row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 30px;
	align-items: center;
}

.shop-filter {
	display: flex;
	gap: 10px;
	align-items: center;
}

.shop-filter__label {
	color: var(--color-graphite);
	font-size: var(--fs-body);
	white-space: nowrap;
}

.shop-filter .select {
	width: auto;
	min-width: 210px;
}

.shop-filter__check {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	color: var(--color-graphite);
	font-size: var(--fs-body);
	cursor: pointer;
}

.shop-filter__check input {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--color-olive-ink);
	cursor: pointer;
}

.shop-filters__submit {
	min-height: 40px;
	padding: 6px 22px;
	border: 0;
	border-radius: var(--radius-sm);
	background: var(--color-olive-ink);
	color: var(--color-white);
	font: inherit;
	font-size: var(--fs-body);
	cursor: pointer;
}

.shop-filters__submit:hover {
	background: var(--color-olive-hover);
}

.js .shop-filters__submit {
	display: none;
}

.shop-filters__count {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	align-items: center;
	margin: 0 0 0 auto;
	color: var(--color-graphite);
	font-size: var(--fs-body);
}

.shop-filters__reset {
	color: var(--color-graphite);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.shop-filters__reset:hover {
	color: var(--color-cinnamon-wood);
}

.shop-empty {
	margin: 20px 0;
	color: var(--color-graphite);
	font-size: var(--fs-body);
	line-height: var(--lh-jost);
	text-align: center;
}

/* 11. Page introuvable et texte d'introduction des catégories (repli) ---------- */

.inner--notfound {
	gap: 20px;
	align-items: center;
	min-height: 600px;
	padding-top: 60px;
	text-align: center;
}

.notfound__text {
	max-width: 560px;
	margin: 0;
	color: var(--color-graphite);
	font-size: var(--fs-body);
	line-height: var(--lh-jost);
}

.notfound__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
}

.shop-intro {
	max-width: 760px;
	color: var(--color-graphite);
	font-size: var(--fs-body);
	line-height: var(--lh-jost);
}

/* 12. Responsive (repli) ------------------------------------------------------
   Les maquettes fournies sont la version desktop (1280 px). Ces règles ne servent qu'à ne rien casser en dessous :
   colonnes empilées, largeurs fluides, plus de hauteurs minimales. À remplacer par les maquettes mobile. */

@media (max-width: 1100px) {
	.inner,
	.inner--cart,
	.inner--auth,
	.inner--account,
	.inner--checkout,
	.inner--contact,
	.inner--thanks,
	.inner--shop {
		min-height: 0;
		padding-right: 20px;
		padding-left: 20px;
	}

	.inner--producer {
		min-height: 0;
	}

	/* Mon compte : le menu passe au-dessus du contenu, en boutons à la suite */
	.account {
		grid-template-columns: minmax(0, 1fr);
		gap: 25px;
	}

	.account-nav {
		padding: 0;
		border: 0;
	}

	.account-nav__list {
		flex-flow: row wrap;
		gap: 10px;
	}

	.account-nav__link {
		padding: 8px 16px;
		border: 1px solid var(--color-graphite);
		border-radius: 35px;
		background: var(--color-white);
	}

	.account-nav__link[aria-current="page"] {
		border-color: var(--color-dusty-olive);
	}

	.account-nav__item--logout {
		margin: 0;
		padding: 0;
		border: 0;
	}

	.order-card {
		grid-template-areas:
			"main status"
			"total actions";
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.order-card--stacked {
		grid-template-areas:
			"main status"
			"total total"
			"actions actions";
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.order-card__actions {
		justify-content: flex-end;
	}

	/* Fiche produit */
	.product-top {
		flex-direction: column;
		gap: 20px;
	}

	.product-gallery {
		width: 100%;
		max-width: 620px;
	}

	.product-summary {
		flex: none;
		width: 100%;
		max-width: none;
	}

	.product-buy__row {
		flex-wrap: wrap;
		height: auto;
		min-height: 100px;
	}

	.product-options {
		flex-wrap: wrap;
	}

	.product-related__list {
		flex-wrap: wrap;
		gap: 30px;
	}

	.product-description {
		--desc-pad-r: 0px;
		padding-right: 0;
	}

	.product-producer__row {
		flex-wrap: wrap;
	}

	.product-producer__text {
		flex: 1 1 200px;
		min-width: 0;
	}

	.product-producer__name,
	.product-producer__blurb {
		white-space: normal;
	}

	/* Fiche producteur */
	.producer-profile {
		flex-direction: column;
	}

	.producer-profile__photo {
		width: 100%;
		height: auto;
		aspect-ratio: 655 / 614;
	}

	.producer-profile__text {
		flex: none;
		width: 100%;
		min-height: 0;
		gap: 20px;
	}

	.producer-profile__title {
		white-space: normal;
	}

	.producer-strip {
		flex-wrap: wrap;
		width: 100%;
	}

	.producer-strip li {
		flex: 1 1 140px;
		width: auto;
		height: 160px;
	}

	/* Contact */
	.contact {
		flex-direction: column;
		gap: 30px; /* écart entre le plan et le titre du formulaire */
		align-items: stretch;
	}

	.contact__info {
		flex: none;
		align-items: center;
		width: 100%;
		min-height: 0;
		padding-right: 0;
	}

	.contact-card,
	.contact-map {
		width: 100%;
		max-width: 560px;
	}

	.contact-card {
		white-space: normal;
	}

	.contact-form {
		flex: none;
		width: 100%;
	}

	.contact-form__title {
		white-space: normal;
	}

	.contact__submit::before {
		display: none;
	}

	.contact__submit,
	.contact__submit-box {
		flex: none;
		width: 100%;
	}

	.contact-form__submit {
		width: 100%;
	}

	/* Panier */
	.inner--cart > .cart {
		flex-direction: column;
		gap: 30px;
		align-items: stretch;
	}

	.cart-item {
		width: 100%;
	}

	.cart-collaterals {
		flex: none;
		width: 100%;
	}

	/* Connexion */
	.auth {
		flex-direction: column;
	}

	.auth__perks {
		width: 100%;
		height: auto;
		padding: 30px 10px;
	}

	.auth__perks-art {
		padding-right: 0;
		padding-left: 0;
	}

	.auth__perks-title,
	.auth__perks-list,
	.auth__forgot,
	.auth__switch {
		white-space: normal;
	}

	.auth__perks-title,
	.auth__perks-list {
		text-align: center;
	}

	.auth__form {
		flex: none;
		width: 100%;
		padding: 0 10px;
	}

	.or {
		padding-right: 0;
		padding-left: 0;
	}

	.or__line {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
		margin: 0 10px;
	}

	/* Livraison et paiement */
	.age-notice__box {
		height: auto;
	}

	.age-notice__text {
		white-space: normal;
	}

	.checkout-layout {
		flex-direction: column;
		gap: 30px;
		align-items: stretch;
		padding-right: 0;
		padding-left: 0;
	}

	.checkout-main {
		align-self: auto;
		padding: 0;
	}

	.checkout-panel {
		align-self: auto;
		width: 100%;
		padding: 20px;
	}

	.checkout-fields,
	.wc-credit-card-form {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 10px;
	}

	.mode-block__title,
	.checkout-title {
		white-space: normal;
	}

	.mode-block__row {
		flex-wrap: wrap;
	}

	.mode__label {
		height: auto;
		min-height: 35px;
		white-space: normal;
	}

	/* Commande confirmée */
	.thanks__box,
	.thanks__actions {
		width: 100%;
		max-width: 594px;
	}

	.thanks__list {
		overflow: hidden;
		overflow: clip;
	}

	.thanks__actions {
		flex-wrap: wrap;
		gap: 10px;
		justify-content: center;
	}

	.thanks__lead {
		white-space: normal;
	}
}

@media (max-width: 720px) {
	.inner,
	.inner--cart,
	.inner--auth,
	.inner--account,
	.inner--checkout,
	.inner--contact,
	.inner--thanks,
	.inner--shop {
		padding-right: 16px;
		padding-left: 16px;
	}

	.page-head {
		gap: 20px;
	}

	.cart-item__name {
		max-width: none;
	}

	.checkout-fields,
	.wc-credit-card-form {
		grid-template-columns: minmax(0, 1fr);
	}

	.woocommerce-checkout .form-row-first,
	.woocommerce-checkout .form-row-last {
		grid-column: 1 / -1;
	}

	.thanks__box {
		padding-right: 10px;
		padding-left: 10px;
	}

	.thanks__info p {
		white-space: normal;
	}

	.shop-grid {
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
		gap: 30px 20px;
	}

	/* Filtres : les catégories défilent sur une ligne, les menus prennent toute la largeur. */
	.shop-filters__cats {
		margin: 0 -16px;
	}

	.shop-filters__chips {
		flex-wrap: nowrap;
		padding: 2px 16px 6px;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.shop-filters__chips::-webkit-scrollbar {
		display: none;
	}

	.shop-chip {
		font-size: var(--fs-body-sm);
	}

	.shop-filters__row {
		gap: 14px;
	}

	.shop-filter {
		flex: 1 1 100%;
		flex-direction: column;
		gap: 6px;
		align-items: stretch;
	}

	.shop-filter .select {
		width: 100%;
		min-width: 0;
	}

	.shop-filter__label,
	.shop-filter__check,
	.shop-filters__count {
		font-size: var(--fs-body-sm);
	}

	.shop-filters__count {
		flex: 1 1 100%;
		justify-content: space-between;
		margin: 0;
	}
}

/* Encadrés posés sur le motif de fond (§3 de style.css) : même rendu que le cadre des pages de texte (§11) — fond blanc antique plein, coins arrondis de 20 px, ombre légère
   et contour graphite de 2 px (l'épaisseur d'origine est conservée, seule la couleur change). Le fond plein empêche les lignes ondulées de passer sous les textes, les prix
   et les formulaires. */
.cart-item,
.checkout-panel,
.auth__perks,
.thanks__box,
.account-card,
.account-tile__link,
.order-card:not(.order-card--flat) {
	border-color: var(--color-graphite);
	border-radius: var(--radius-lg);
	background-color: var(--color-antique-white);
	box-shadow: var(--shadow-panel);
}

/* Récapitulatif du panier : à plat (sans cadre) sur mobile ; liste de navigation du compte : à plat sous 1101 px (onglets). */
@media (min-width: 721px) {
	.cart-summary {
		border-color: var(--color-graphite);
		border-radius: var(--radius-lg);
		background-color: var(--color-antique-white);
		box-shadow: var(--shadow-panel);
	}
}

@media (min-width: 1101px) {
	.account-nav {
		border-color: var(--color-graphite);
		border-radius: var(--radius-lg);
		background-color: var(--color-antique-white);
		box-shadow: var(--shadow-panel);
	}
}

/* Avis WooCommerce (« ajouté au panier », « supprimé », informations) et rappel « Confirmer mon adresse e-mail » : même cadre, plus petit rayon car la barre est fine ; seule une erreur garde son contour terracotta, pour se distinguer des autres avis. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.confirm {
	border-radius: 12px;
	background-color: var(--color-antique-white);
	box-shadow: var(--shadow-panel);
}

.woocommerce-message,
.woocommerce-info,
.confirm {
	border-color: var(--color-graphite);
}

.order-notes__item,
.order-item {
	background-color: var(--color-antique-white);
}

/* Mise à jour du panier, du récapitulatif et du paiement (1.8.26) : WooCommerce pose un voile blanc semi-opaque (jQuery BlockUI) sur les blocs
   le temps de l'actualisation, ce qui faisait apparaître des rectangles beige. Le voile reste (il empêche un double clic pendant l'enregistrement)
   mais devient transparent ; seul le curseur indique l'attente. */
.blockUI.blockOverlay {
	background: transparent !important;
	opacity: 1 !important;
	cursor: progress !important;
}