/*
 * Épicerie Racines — couche mobile (maquettes « Mobile – … », 402 px).
 *
 * Chargée après style.css et pages.css. Ses règles ne s'appliquent qu'en dessous de 721 px :
 * au-dessus, le thème garde sa mise en page ordinateur (1280 px) et ses adaptations tablette.
 * Les valeurs (tailles, espacements, couleurs) sont relevées dans les calques Figma mobile.
 *
 * Sommaire
 *   1. Éléments propres au mobile (masqués ailleurs)
 *   2. En-tête collant : burger, logo, panier, recherche
 *   3. Accueil : hero, catégories, produits phares, producteurs
 *   4. Pied de page
 *   5. Fiche produit (barre d'achat fixe, galerie, options, produits similaires, producteur)
 *   6. Fiche producteur
 *   7. Contact
 *   8. Panier
 *   9. Connexion
 *  10. Livraison et paiement
 *  11. Commande confirmée
 */

/* 1. Éléments propres au mobile ------------------------------------------- */
.menu-toggle,
.producers-m,
.product-buy__name,
.producer-gallery,
.label-m {
	display: none;
}

@media (max-width: 720px) {
	:root {
		--fs-title-m: 1.375rem; /* titres de section mobile : 22 px */
		--lh-title-m: 26px;
		--stroke-text: rgba(47, 42, 34, 0.9); /* contour des textes posés sur photo (Figma : trait 1 px à l'extérieur) */
	}

	.section-title {
		position: relative;
		top: 1px; /* la ligne de Redaction se pose 1 px plus bas dans Figma */
		font-size: var(--fs-title-m);
		line-height: var(--lh-title-m);
		white-space: normal;
		text-align: center;
	}

	/* 2. En-tête collant ---------------------------------------------------- */
	/* Maquette : en-tête fixe au défilement (171 px = ligne logo 110 px + ligne recherche 61 px). Le bandeau d'informations,
	   absent de la maquette mobile, est ajouté dessous (36 px) et reste collé avec lui ; l'en-tête collant est défini dans style.css. */
	.top-bar {
		height: 36px;
		--marquee-duration: 32s;
	}

	.top-bar__item {
		font-size: var(--fs-small);
	}

	.site-header__inner {
		display: grid;
		grid-template-areas: "burger brand cart" "search search search";
		grid-template-columns: 1fr auto 1fr;
		row-gap: 32px;
		align-items: center;
		height: auto;
		min-height: 0;
		padding: 16px;
		overflow: visible;
	}

	html:not(.js) .site-header__inner {
		grid-template-areas: "burger brand cart" "search search search" "nav nav nav";
	}

	.brand {
		grid-area: brand;
		height: 78px;
	}

	.brand__name {
		align-self: auto;
		width: 112px;
		padding: 0;
	}

	.brand__logo {
		height: 76px;
	}

	/* Compte + panier : groupés à droite de l'en-tête (la maquette mobile n'a que le panier ; le bouton compte est celui de la maquette ordinateur). */
	.header-actions {
		display: flex;
		grid-area: cart;
		gap: 16px;
		align-items: center;
		justify-self: end;
	}

	/* Mobile : plus d'icône de compte dans l'en-tête (1.8.14) ; le lien « Mon compte » / « Connexion » est dans le menu burger. */
	.header-actions .account-link {
		display: none;
	}

	.search-box {
		grid-area: search;
		order: 0;
		width: 100%;
		max-width: none;
	}

	/* Burger : trois traits de 23 × 2 px (maquette « menu 1 », 35 × 35 px) */
	.menu-toggle {
		position: relative;
		display: block;
		grid-area: burger;
		justify-self: start;
		width: 35px;
		height: 35px;
		padding: 0;
		border: 0;
		background: none;
		color: var(--color-antique-white);
		cursor: pointer;
		filter: var(--filter-products);
	}

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

	.menu-toggle__bars span {
		position: absolute;
		left: 6px;
		width: 23px;
		height: 2px;
		border-radius: 1px;
		background: currentcolor;
	}

	.menu-toggle__bars span:nth-child(1) {
		top: 6px;
	}
	.menu-toggle__bars span:nth-child(2) {
		top: 16px;
	}
	.menu-toggle__bars span:nth-child(3) {
		top: 26px;
	}

	@media (prefers-reduced-motion: no-preference) {
		.menu-toggle__bars span {
			transition: transform 150ms ease-out, opacity 150ms ease-out;
		}
	}

	.is-menu-open .menu-toggle__bars span:nth-child(1) {
		transform: translateY(10px) rotate(45deg);
	}
	.is-menu-open .menu-toggle__bars span:nth-child(2) {
		opacity: 0;
	}
	.is-menu-open .menu-toggle__bars span:nth-child(3) {
		transform: translateY(-10px) rotate(-45deg);
	}

	/* Navigation : panneau sous l'en-tête (l'état ouvert n'est pas dessiné dans la maquette : mêmes couleurs et mêmes titres que l'ordinateur) */
	.main-nav {
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		display: block;
		border-top: 1px solid rgba(242, 232, 217, 0.35);
		background: var(--color-dusty-olive);
		box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
	}

	.main-nav ul {
		display: flex;
		flex-direction: column;
	}

	.main-nav li,
	.main-nav .main-nav__account {
		display: block;
	}

	.main-nav a {
		display: block;
		padding: 14px 16px;
		text-align: center;
	}

	.main-nav [aria-current="page"],
	.main-nav .current-menu-item > a {
		text-decoration: underline;
		text-underline-offset: 6px;
	}

	html.js .main-nav {
		display: none;
	}

	html.js .is-menu-open .main-nav {
		display: block;
	}

	html:not(.js) .main-nav {
		position: static;
		grid-area: nav;
		border-top: 0;
		box-shadow: none;
	}

	html:not(.js) .main-nav ul {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0 20px;
	}

	/* 3. Accueil ------------------------------------------------------------ */
	/* Hero : 402 × 255 px, panneau 370 × 215 px, titre 22 px, bouton 145 × 33 px */
	.hero {
		height: 255px;
		min-height: 0;
		padding: 20px var(--gutter);
	}

	.hero__panel {
		gap: 10px;
		padding: 10px;
	}

	.hero__copy {
		gap: 18px;
	}

	.hero__title {
		position: relative;
		top: 1px; /* la ligne de Redaction se pose 1 px plus bas dans Figma */
		font-size: var(--fs-title-m);
		line-height: var(--lh-title-m);
		paint-order: stroke fill;
		-webkit-text-stroke: 2px var(--stroke-text);
	}

	.hero__subtitle {
		font-family: var(--font-body);
		font-size: var(--fs-body-sm);
		line-height: normal;
		paint-order: stroke fill;
		-webkit-text-stroke: 2px var(--stroke-text);
	}

	.hero__cta.btn--olive {
		width: auto;
		height: 33px;
		font-size: var(--fs-body-sm);
	}

	/* Catégories : défilement horizontal, cartes de 160 × 128 px, la troisième dépasse pour montrer qu'on peut faire défiler */
	.categories {
		display: flex;
		gap: 20px;
		justify-content: flex-start;
		height: 202px;
		padding: 0 var(--gutter);
		overflow-x: auto;
		overflow-y: hidden;
		scroll-padding: 0 var(--gutter);
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.categories::-webkit-scrollbar {
		display: none;
	}

	.category-card {
		flex: none;
		width: 160px;
		height: 128px;
		scroll-snap-align: start;
		filter: var(--filter-products);
	}

	.category-card__image {
		border: 0; /* pas de liseré sur la maquette mobile */
	}

	.category-card__label {
		font-size: var(--fs-body-sm);
	}

	/* Produits phares : 4 produits en 2 colonnes de 177 px */
	.home-featured {
		gap: 20px;
		padding: 20px var(--gutter) 24px;
	}

	.home-featured__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px 16px;
		align-items: stretch;
		justify-content: normal;
	}

	.home-featured__list > li {
		display: block;
	}

	/* La maquette mobile montre l'entrecôte, le saumon, les pommes Gala et le bleu : les 3e et 4e produits de la liste sont masqués */
	.home-featured__list > li:nth-child(n + 3):nth-child(-n + 4) {
		display: none;
	}

	.home-featured .product-card {
		width: 100%;
		height: 314px;
	}

	.home-featured .product-card__info {
		height: 64px;
	}

	.home-featured .product-card__cart {
		width: 44px;
		height: 44px;
		padding: 8px;
		border-radius: 5.13px;
	}

	.home-featured .product-card__cart img {
		width: 37px;
		height: 37px;
	}

	/* Producteurs : un seul visuel avec le texte posé dessus, à la place des trois cartes de l'ordinateur */
	.producers {
		display: none;
	}

	.producers-m {
		display: flex;
		flex-direction: column;
		gap: 20px;
		align-items: center;
		padding: 20px var(--gutter);
		overflow: hidden;
		overflow: clip;
	}

	.producers-m__visual {
		position: relative;
		display: flex;
		align-items: flex-start;
		justify-content: flex-end;
		width: 100%;
		height: 311px;
		padding: 30px 10px 10px;
		overflow: hidden;
		overflow: clip;
		border-radius: var(--radius-lg);
		background: var(--color-graphite);
	}

	.producers-m__bg {
		position: absolute;
		inset: 0;
		border-radius: var(--radius-lg);
		pointer-events: none;
	}

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

	.producers-m__bg::after {
		content: "";
		position: absolute;
		inset: 0;
		background: var(--scrim-producers-m);
	}

	.producers-m__text {
		position: relative;
		width: 324px;
		max-width: 100%;
		color: var(--color-antique-white);
		font-size: var(--fs-body-sm);
		line-height: normal;
		text-align: right;
		white-space: break-spaces; /* les retours à la ligne saisis sont conservés, et l'espace final de « d’ici, » comme dans la maquette */
		paint-order: stroke fill;
		-webkit-text-stroke: 2px rgba(0, 0, 0, 0.3);
	}

	.producers-m__cta.btn--olive {
		width: auto;
		height: 33px;
		font-size: var(--fs-body-sm);
	}

	/* 4. Pied de page ------------------------------------------------------- */
	/* Deux colonnes : navigation / informations, aide / réseaux, puis la mention légale pleine largeur */
	.site-footer {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: minmax(88px, auto) minmax(88px, auto) auto;
		row-gap: 5px;
		font-size: var(--fs-small);
		text-align: left;
	}

	.site-footer__col--nav,
	.site-footer__col--info {
		position: relative;
		top: 1px; /* interligne de 22 px : Figma pose le texte 1 px plus bas */
	}

	.site-footer__col--info {
		text-align: right;
	}

	.site-footer__col--info li,
	.site-footer__col--info .site-footer__title {
		white-space: normal;
	}

	.site-footer__social {
		display: flex;
		flex-direction: column;
		gap: 7px;
		align-items: flex-end;
		justify-self: stretch;
		width: auto;
		height: auto;
		overflow: visible;
	}

	.site-footer__social-title {
		position: static;
		transform: none;
		text-align: right;
	}

	.site-footer__social-icons {
		display: flex;
		flex-direction: row-reverse;
		gap: 15px;
	}

	.site-footer__social .site-footer__social-link {
		position: relative;
		inset: auto;
		flex: none;
	}

	.site-footer__legal {
		display: grid;
		grid-column: 1 / -1;
		grid-template-columns: auto minmax(0, 1fr);
		gap: 10px;
		align-items: start;
		min-height: 176px;
		height: auto;
		padding: 20px 14px 0;
	}

	.site-footer__legal-logo {
		width: 114px;
		height: 67px;
	}

	.site-footer__legal-logo img {
		width: 100%;
		height: 100%;
	}

	.site-footer__legal-text {
		display: contents;
	}

	.site-footer__legal-strong {
		white-space: normal;
	}

	.site-footer__legal-text > div {
		grid-column: 1 / -1;
		text-align: right;
	}

	.site-footer__legal-text p:not(.site-footer__legal-strong) {
		line-height: normal;
	}
}

/* 5. Fiche produit ------------------------------------------------------------ */
@media (max-width: 720px) {
	.inner--product {
		gap: 20px;
		padding: 20px var(--gutter);
	}

	.breadcrumb .breadcrumb__item {
		font-size: var(--fs-small);
		line-height: 19px;
	}

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

	.heading-lg {
		font-size: 1.5rem;
		line-height: 35px;
	}

	/* Ordre de la maquette : titre, galerie, options. Le bloc « summary » s'efface pour que ses enfants se rangent
	   avec la galerie dans la même colonne. */
	.product-top {
		flex-direction: column;
		gap: 20px;
		align-items: stretch;
		justify-content: flex-start;
		padding: 0;
	}

	.product-summary {
		display: contents;
	}

	.product-summary__head {
		order: 1;
		gap: 10px;
		width: 100%;
	}

	.product-top > .product-gallery {
		order: 2;
	}

	.product-gallery {
		flex-direction: column-reverse;
		gap: 20px;
		align-items: stretch;
		width: 100%;
		max-width: none;
	}

	.product-gallery--single {
		width: 100%;
	}

	.product-gallery__main {
		flex: none;
		width: 100%;
		max-width: none;
		max-height: none;
		aspect-ratio: 370 / 347;
	}

	/* Miniatures en rangée sous la photo (134 × 126 px) */
	.product-gallery__thumbs {
		flex-direction: row;
		gap: 10px;
		align-self: auto;
		width: 100%;
		max-width: none;
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: none;
	}

	.product-gallery__thumbs::-webkit-scrollbar {
		display: none;
	}

	.product-gallery__thumbs li {
		flex: none;
		width: 134px;
		height: 126px;
	}

	.product-buy {
		order: 3;
		gap: 0;
	}

	.product-option--format .select {
		--select-py: 10px;
	}

	/* Barre d'achat : fixe en bas de l'écran (maquette « Frame 32 »), prix et nom à gauche, bouton panier à droite.
	   Le trait terracotta de 3 px est tracé à l'extérieur de l'écran sur les côtés et en bas, comme dans Figma. */
	.product-buy__row {
		position: fixed;
		z-index: 40;
		right: -3px;
		bottom: -3px;
		left: -3px;
		display: grid;
		grid-template-areas: "price action" "name action";
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: start;
		justify-content: normal;
		width: auto;
		height: auto;
		min-height: 0;
		padding: 10px 20px calc(20px + env(safe-area-inset-bottom, 0px));
		overflow: visible;
		border: 3px solid var(--color-cinnamon-wood);
		border-radius: var(--radius-lg) var(--radius-lg) 0 0;
		background: rgba(242, 232, 217, 0.9);
	}

	.product-buy__price {
		grid-area: price;
		height: auto;
		min-width: 0;
		overflow: visible;
		line-height: var(--lh-jost);
	}

	.product-buy__name {
		display: block;
		grid-area: name;
		min-width: 0;
		overflow: hidden;
		color: var(--color-graphite);
		font-size: 1.5rem;
		line-height: var(--lh-jost);
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.product-buy__action {
		grid-area: action;
		align-self: start;
		height: auto;
		margin-top: 10px;
		padding: 0;
		overflow: visible;
	}

	.product-buy__action .btn-add {
		width: 53px;
		height: 53px;
		padding: 8px;
		border-radius: 5.13px;
	}

	/* Seul le pictogramme reste visible ; le texte « Ajouter au panier » reste lu par les lecteurs d'écran */
	.product-buy__action .btn-add > span {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.product-buy__action .btn-add img {
		width: 37px;
		height: 37px;
	}

	/* Compteur dans la barre fixe : même hauteur que le bouton, blocs plus larges pour le doigt */
	.product-buy__action .qty-pill--page {
		width: 150px;
		height: 53px;
	}

	.product-buy__action .qty-pill--page .qty-pill__btn {
		width: 48px;
	}

	.cart-toast {
		bottom: 110px;
	}

	.product-buy__unavailable {
		font-size: var(--fs-body-sm);
	}

	/* Place de la barre fixe sous le pied de page (la maquette réserve 100 px sous les mentions légales) */
	.has-buy-bar .site-footer {
		padding-bottom: 110px;
	}

	/* Filets : 250 px de large, centrés */
	.separator__line {
		width: 250px;
	}

	.separator__line img {
		width: 100%;
		height: 3px;
	}

	/* Sous la fiche, la maquette mobile trace un filet là où la maquette ordinateur laisse un simple espace */
	.separator--spacer::before {
		content: "";
		flex: none;
		width: 250px;
		max-width: 100%;
		height: 3px;
		border-radius: 2px;
		background: var(--color-graphite);
	}

	/* Produits similaires : 2 colonnes de 177 px */
	.product-related {
		gap: 20px;
	}

	.product-related .heading-lg {
		align-self: center;
		text-align: center;
	}

	.product-related__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px 16px;
		align-items: stretch;
		justify-content: normal;
		width: 100%;
	}

	.product-related__list > li {
		display: block;
	}

	.product-card--wide {
		width: 100%;
		height: 313.608px;
	}

	.product-card--wide .product-card__label {
		width: 100%;
	}

	.product-description {
		--desc-pad-r: 36px;
		padding-right: var(--desc-pad-r);
	}

	.product-description__text {
		font-size: var(--fs-body-sm);
	}

	.product-more__text {
		max-width: none;
	}

	/* Producteur : photo ronde de 150 px et texte à droite */
	.product-producer__row {
		align-items: flex-start;
	}

	.product-producer__photo {
		width: 150px;
		height: 150px;
		border-radius: 75px;
	}

	.product-producer__text {
		flex: 1 1 0;
		gap: 10px;
		justify-content: flex-start;
		min-width: 0;
		padding: 5px 0;
	}

	.product-producer__name {
		font-size: var(--fs-body-sm);
		white-space: normal;
	}

	.product-producer__place,
	.product-producer__blurb {
		font-size: var(--fs-small);
	}

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

	.product-producer .cta {
		height: 29px;
		padding: 5px 15px;
		font: 400 var(--fs-small) / normal var(--font-body);
	}
}

/* 6. Fiche producteur --------------------------------------------------------- */
@media (max-width: 720px) {
	.inner--producer {
		gap: 20px;
		padding: 20px var(--gutter);
	}

	/* Ordre de la maquette : titre, photo, texte (le bloc texte s'efface pour que titre et texte se rangent avec la photo) */
	.producer-profile {
		flex-direction: column;
		gap: 20px;
		align-items: stretch;
		padding: 10px 0;
	}

	.producer-profile__text {
		display: contents;
	}

	.producer-profile__title {
		order: 1;
		white-space: normal;
		text-align: center;
	}

	.producer-profile__photo {
		order: 2;
		width: 100%;
		height: auto;
		aspect-ratio: 370 / 347;
	}

	.producer-profile__body {
		order: 3;
		font-size: var(--fs-body-sm);
		text-align: center;
	}

	.producer-profile__body p + p {
		margin-top: 0; /* pas de ligne vide entre les paragraphes sur la maquette mobile */
	}

	/* La bande de photos cède la place à la galerie (grande photo + miniatures) */
	.producer-strip {
		display: none;
	}

	.product-gallery.producer-gallery {
		display: flex;
	}

	.producer-gallery .product-gallery__slide img {
		object-position: 83% 50%; /* cadrage de la maquette mobile pour la photo d'ouverture de la galerie */
	}

	/* Visionneuse : 10 px de marge, comme le reste des écrans mobiles (la photo garde les proportions 956 : 782) */
	.lightbox {
		padding: 10px;
	}
}

/* 7. Contact ------------------------------------------------------------------ */
@media (max-width: 720px) {
	/* Maquette mobile : marges de 10 px seulement, tout en colonne */
	.inner--contact {
		gap: 30px;
		padding: 20px 10px;
	}

	.contact {
		flex-direction: column;
		gap: 30px;
		align-items: stretch;
	}

	.contact__info {
		gap: 30px;
		align-items: stretch;
		width: 100%;
		min-height: 0;
	}

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

	.contact-card {
		padding: 10px;
		font-size: var(--fs-small);
		line-height: 19px;
		white-space: normal;
	}

	.contact-map {
		height: auto;
		aspect-ratio: 5 / 4; /* 382 × 306 px (382 × 268 px dans la maquette, agrandi en 1.8.1) */
	}

	/* Filet en pointillés (2 px, tirets de 6 px) entre le plan et le formulaire */
	.contact-form {
		gap: 20px;
	}

	.contact-form__subject {
		margin: 0;
	}

	.contact-form::before {
		content: "";
		flex: none;
		align-self: stretch;
		height: 20px;
		margin-bottom: 10px; /* 30 px entre le filet et le titre, comme sur la maquette */
		background: repeating-linear-gradient(90deg, var(--color-dusty-olive) 0 6px, transparent 6px 12px) 0 9px / 100% 2px no-repeat;
	}

	.contact-form__title {
		font-size: var(--fs-body-sm);
		white-space: normal;
		text-align: center;
	}

	.select--lg {
		font-size: var(--fs-body-sm);
	}

	.contact-form__message {
		flex: none;
		height: 235px;
		min-height: 0;
	}

	/* Bouton « Envoyer » : 362 × 40 px au centre d'une zone de 111 px */
	.contact__submit {
		align-items: center;
		justify-content: center;
		height: 111px;
		padding: 20px 10px;
	}

	.contact__submit-box {
		width: 100%;
		padding: 0;
	}

	.contact-form__submit {
		width: 100%;
	}

	/* 8. Panier -------------------------------------------------------------- */
	/* Maquette mobile : pas de carte « Récapitulatif » ; un filet pointillé, les lignes
	   Sous-total / Livraison, le bouton puis « Continuer mes achats », le tout centré. */
	.inner--cart {
		gap: 30px;
		min-height: 710px;
		padding: 20px 10px;
	}

	.cart__title {
		font-size: 1.5rem;
		line-height: 22px;
		text-align: center;
	}

	.inner--cart > .cart {
		gap: 30px;
		padding: 0;
		overflow: visible;
	}

	/* Panier vide : message, retour à la boutique et titre des nouveautés centrés comme le titre de la page */
	.cart-empty-box {
		align-items: center;
		text-align: center;
	}

	.cart-empty {
		font-size: var(--fs-title-m);
		line-height: var(--lh-title-m);
	}

	.cart-empty__hint {
		font-size: var(--fs-body-sm);
	}

	.cart-empty-box .cart__back {
		align-self: center;
		margin-left: 0;
	}

	.cart-empty__news .heading-lg {
		text-align: center;
	}

	.cart-list {
		align-items: stretch;
	}

	.cart-item__head {
		gap: 10px;
	}

	.cart-item__price {
		margin-right: 1px;
	}

	/* La poubelle déborde de 2 px à droite de la ligne de quantité (cadre de 123 px dans la maquette) */
	.cart-item__remove {
		margin-right: -2px;
	}

	.cart-item__format,
	.cart-item__label,
	.qty-field,
	.woocommerce .cart-item__tools .qty-field {
		position: relative;
		top: 1px; /* le texte automatique de Figma est dessiné 1 px plus bas */
		font-size: var(--fs-small);
	}

	/* Le « 1 » de la maquette occupe 6 px (et non 1ch = 7,8 px) */
	.qty-field,
	.woocommerce .cart-item__tools .qty-field {
		width: calc(var(--digits, 1) * 1ch - 1.8px);
		min-width: 0;
	}

	.cart-item__format-picker .select {
		font-size: var(--fs-small);
	}

	.cart-collaterals {
		display: block;
	}

	.cart-summary {
		gap: 30px;
		padding: 0;
		border: 0;
		border-radius: 0;
		overflow: visible;
	}

	/* Filet pointillé (2 px, tirets de 8 px, intervalle de 4 px) entre les articles et le récapitulatif */
	.cart-summary::before {
		content: "";
		flex: none;
		height: 20px;
		background: repeating-linear-gradient(90deg, var(--color-dusty-olive) 0 8px, transparent 8px 12px) -3px 8px / 100% 2px no-repeat;
	}

	.cart-summary__title,
	.cart-summary .order-total {
		display: none;
	}

	.cart-summary__list {
		grid-auto-rows: auto;
		grid-template-columns: auto minmax(0, 1fr);
		gap: 20px 10px;
		padding: 0 10px;
	}

	.cart-summary__label,
	.cart-summary__value {
		padding: 0;
		font-size: 1rem;
		line-height: var(--lh-jost);
	}

	.cart-summary__value {
		margin-right: 1px;
		text-align: right;
		white-space: normal;
	}

	.cart-summary__action {
		min-height: 0;
	}

	.cart-summary__action .checkout-button {
		width: 238px;
		max-width: 100%;
	}

	.cart__back {
		align-self: center;
		margin-left: 0;
	}

	.cart__back-label {
		font-size: 1rem;
		font-weight: 400;
	}

	/* 9. Connexion ----------------------------------------------------------- */
	/* Libellés propres au mobile : « Connexion » et « Se connecter » remplacent « Se connecter » et « Envoyer ». */
	.label-d {
		display: none;
	}

	.label-m {
		display: inline;
	}

	.inner--auth {
		gap: 30px;
		min-height: 710px;
		padding: 20px 10px;
	}

	/* Flèche de 20 px dans un cadre de 30 × 35 px, puis le titre (marge intérieure de 10 px) */
	.page-head {
		gap: 20px;
	}

	.back-link {
		display: flex;
		align-items: center;
		width: 30px;
		height: 35px;
	}

	.back-link img {
		width: 30px;
		height: 30px;
	}

	.auth {
		gap: 0;
		padding: 0;
		overflow: visible;
	}

	/* La carte « Vos avantages » n'existe pas sur la maquette mobile */
	.auth__perks {
		display: none;
	}

	.auth .auth__form {
		gap: 30px;
		align-items: stretch;
		padding: 0;
		overflow: visible;
	}

	.auth .form-field {
		gap: 10px;
		padding: 0 10px;
	}

	.auth .form-label {
		font-size: 1rem;
	}

	.auth .auth__form .form-input {
		height: 35px;
		padding: 0 10px 2px;
		font-size: 1rem; /* 16 px à la saisie : évite le zoom automatique d'iOS */
	}

	.auth .auth__form .form-input::placeholder {
		color: rgba(0, 0, 0, 0.5);
		font-size: var(--fs-small);
		font-weight: 500;
	}

	.auth .auth__forgot {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		align-self: stretch;
		height: 24px;
		color: var(--color-black);
		font-size: var(--fs-small);
		font-weight: 300;
		white-space: nowrap;
		position: relative;
		top: 1px;
	}

	.auth .auth__submit {
		align-items: stretch;
		min-height: 111px;
		padding: 0 10px;
	}

	.auth .auth__submit .btn--block {
		height: 40px;
	}

	.auth .auth__switch {
		align-self: flex-end;
		width: auto;
		color: var(--color-black);
		font-size: var(--fs-small);
		font-weight: 300;
		white-space: nowrap;
		position: relative;
		top: 1px;
	}

	.auth .auth__switch a {
		margin-left: 5px; /* la maquette met une double espace avant « Créer mon compte » */
	}

	/* 9 bis. Mon compte (pas de maquette mobile : mêmes composants que la page Connexion, sur une colonne) ------------ */
	.inner--account {
		gap: 30px;
		min-height: 0;
		padding: 20px 10px;
	}

	.account {
		gap: 20px;
	}

	.account-nav__list {
		gap: 8px;
	}

	.account-nav__link {
		padding: 7px 14px;
		font-size: 1rem;
	}

	.account__content {
		gap: 20px;
	}

	.account-title {
		font-size: var(--fs-section-mobile);
	}

	.account-lead,
	.account-empty {
		font-size: 1rem;
	}

	.account-card {
		gap: 15px;
		padding: 15px;
	}

	.account-tiles,
	.account-addresses,
	.account-form__grid,
	.account-fields {
		grid-template-columns: minmax(0, 1fr);
		gap: 15px;
	}

	.account-fields .form-row-first,
	.account-fields .form-row-last {
		grid-column: 1 / -1;
	}

	.account-tile__link {
		padding: 15px;
	}

	.account .form-input,
	.account .woocommerce form .input-text {
		height: 40px;
		font-size: 1rem; /* 16 px à la saisie : évite le zoom automatique d'iOS */
	}

	.account-form__actions .btn-olive {
		width: 100%;
	}

	/* Commande : numéro et état, puis total, puis boutons sur toute la largeur (les trois colonnes du bureau ne tiennent pas) */
	.order-card {
		grid-template-areas:
			"main status"
			"total total"
			"actions actions";
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 8px 12px;
		padding: 12px 15px;
	}

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

	.order-card__total {
		flex-flow: row wrap;
		gap: 0 8px;
		align-items: baseline;
	}

	.order-card__actions {
		flex-wrap: wrap;
	}

	.order-card__actions > * {
		flex: 1 1 auto;
	}

	.order-view {
		gap: 20px;
	}

	.order-view__actions > * {
		flex: 1 1 100%;
	}

	.confirm__box {
		gap: 16px;
		padding: 20px;
	}

	.confirm__title {
		font-size: 1.375rem;
	}

	.confirm__actions {
		flex-direction: column-reverse;
	}

	.confirm__actions > * {
		width: 100%;
	}

	.order-view__meta {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	/* Suivi en colonne : pastille à gauche, trait vertical vers l'étape suivante */
	.order-track {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.order-track__step {
		display: grid;
		grid-template-columns: 28px minmax(0, 1fr);
		column-gap: 12px;
		row-gap: 2px;
		align-items: start;
		text-align: left;
	}

	.order-track__dot {
		grid-row: 1 / span 2;
	}

	.order-track__step:not(:last-child)::after {
		top: 28px;
		bottom: -20px;
		left: 13px;
		width: 2px;
		height: auto;
	}

	.order-track__label {
		align-self: center;
		font-size: 1rem;
	}

	.order-track__note {
		grid-column: 2;
	}

	.order-item {
		gap: 10px;
	}

	.order-item__media {
		width: 48px;
		height: 48px;
	}

	.order-summary__row {
		gap: 10px;
	}

	.order-summary__row dt {
		min-width: 0;
	}

	.inner--auth-single {
		min-height: 0;
	}

	.auth__form--single .form-field {
		padding: 0;
	}

	/* Séparateur « ou » : deux filets pointillés (traits de 6 px, bouts arrondis) de 123 et 126 px */
	.or {
		gap: 19px;
		padding: 5px 38px;
	}

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

	.or__line + .or__label + .or__line {
		flex-grow: 126;
	}

	.or__inset {
		display: none;
	}

	.or__line::before {
		content: "";
		position: absolute;
		top: -1px;
		right: 0;
		left: -1px;
		height: 2px;
		border: 0;
		background: repeating-linear-gradient(90deg, var(--color-dusty-olive) 0 8px, transparent 8px 12px);
	}

	.or__label {
		position: relative;
		top: -1px;
		font-size: 1rem;
	}

	.auth__guest {
		height: auto;
	}

	.auth__guest .btn--block {
		height: 40px;
	}

	/* 10. Livraison et paiement ---------------------------------------------- */
	/* Maquette mobile : tout est empilé à plat, les sections sont séparées par des filets pointillés de 382 × 20 px. */
	.inner--checkout {
		gap: 30px;
		padding: 20px 10px 68px;
	}

	.age-notice__box {
		width: 100%;
	}

	.age-notice__text {
		font-size: 1rem;
		line-height: 23px; /* hauteur de ligne arrondie comme dans Figma : évite que les décimales ne s'additionnent */
	}

	.checkout-layout {
		gap: 30px;
		padding: 0;
		overflow: visible;
	}

	.checkout-main {
		gap: 30px;
		align-items: stretch;
		overflow: visible;
	}

	/* 1.8.32 : encadré comme sur ordinateur (contour graphite de 2 px, coins de 20 px, ombre : règle commune en fin de pages.css) */
	.checkout-panel {
		gap: 30px;
		align-items: stretch;
		padding: 20px 10px;
	}

	/* Le contour délimite déjà l'encadré : pas de filet pointillé au-dessus de « Paiement » */
	.checkout-panel::before {
		display: none;
	}

	/* Filets pointillés (traits de 6 px, bouts arrondis : 8 px visibles pour 4 px d'intervalle) */
	.checkout-panel::before,
	.dashed--516 {
		background: repeating-linear-gradient(90deg, var(--color-dusty-olive) 0 8px, transparent 8px 12px) -3px 8px / 100% 2px no-repeat;
	}

	.checkout-panel::before {
		content: none;
		order: -1;
		flex: none;
		height: 20px;
	}

	.dashed--516 {
		width: 100%;
	}

	.dashed--516 img {
		display: none;
	}

	.mode-block__title,
	.checkout-title {
		padding: 0;
		font-size: 1rem;
		font-weight: 600;
		line-height: 23px;
	}

	.mode-block__row {
		flex-wrap: nowrap;
		gap: 20px;
		align-items: stretch;
	}

	/* Deux boutons de 162 et 160 px dans la rangée de 342 px */
	.mode:first-child {
		flex-grow: 162;
	}

	.mode:last-child {
		flex-grow: 160;
	}

	.mode {
		flex-basis: 0;
	}

	.mode__label {
		line-height: 19px;
		height: auto;
		min-height: 35px;
		padding: 0 10px;
		font-size: var(--fs-small);
	}

	/* Champs : étiquette 16 px semi-grasse, champ de 35 px, deux colonnes de 176 px pour code postal / ville */
	.checkout-fields,
	.wc-credit-card-form {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px 10px;
		padding: 0 10px;
	}

	.woocommerce-checkout .form-row {
		gap: 10px;
	}

	/* Code postal et ville côte à côte (la règle tablette les empile) */
	.woocommerce-checkout .form-row-first {
		grid-column: 1;
	}

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

	.woocommerce-checkout .form-row label {
		font-size: 1rem;
		line-height: 23px;
	}

	/* La maquette écrit « Nom » en étiquette et « NOM » dans le champ */
	.woocommerce-checkout #billing_last_name_field > label {
		text-transform: lowercase;
	}

	.woocommerce-checkout #billing_last_name_field > label::first-letter {
		text-transform: uppercase;
	}

	.woocommerce-checkout .form-row .input-text {
		height: 35px;
		padding: 0 10px 2px;
		font-size: 1rem; /* 16 px à la saisie : évite le zoom automatique d'iOS */
	}

	.woocommerce-checkout .form-row .input-text::placeholder {
		color: rgba(0, 0, 0, 0.5);
		font-size: var(--fs-small);
		font-weight: 500;
	}

	/* Récapitulatif de commande */
	.checkout-summary {
		gap: 30px;
		overflow: visible;
	}

	.checkout-summary__title {
		min-height: 0;
		font-size: 1rem;
		font-weight: 600;
		line-height: 23px;
	}

	.checkout-summary__list {
		grid-auto-rows: auto;
		grid-template-columns: auto minmax(0, 1fr);
		gap: 20px 10px;
		padding: 10px 20px;
	}

	.checkout-summary__label,
	.checkout-summary__value {
		padding: 0;
		font-size: 1rem;
		line-height: 23px;
	}

	.checkout-summary__items {
		margin-top: -12px;
		padding: 0;
	}

	/* Le filet de 284 px passe 10 px sous la dernière ligne de détail, la ligne « Total » 10 px plus bas */
	.checkout-summary__label--total,
	.checkout-summary__value--total {
		margin-top: 20px;
		font-weight: 700;
	}

	.checkout-summary__label .dashed {
		top: -30px;
		left: 29px;
		width: min(284px, calc(100vw - 118px));
		height: 20px;
	}

	.checkout-summary__label .dashed--613 {
		background: repeating-linear-gradient(90deg, var(--color-dusty-olive) 0 8px, transparent 8px 12px) -3px 8px / 100% 2px no-repeat;
	}

	.checkout-summary__label .dashed--613 img {
		display: none;
	}

	/* Code promo (1.8.30) : étiquette à la taille des titres mobiles, champ et bouton de 40 px comme « Payer maintenant » */
	.checkout-coupon__label {
		font-size: 1rem;
		line-height: 23px;
	}

	.woocommerce form .checkout-coupon__input {
		height: 40px;
		font-size: 1rem; /* 16 px à la saisie : évite le zoom automatique d'iOS */
	}

	.checkout-coupon__button {
		height: 40px;
		padding: 5px 15px;
	}

	.place-order {
		padding: 0 10px;
	}

	.place-order .btn--block {
		height: 40px;
	}

	/* 11. Commande confirmée ------------------------------------------------- */
	/* Maquette mobile : animation de 200 px, titre, numéro de commande et deux boutons, le tout centré dans un cadre
	   de 710 px. Le récapitulatif détaillé et la phrase sur l'email ne figurent pas sur cette maquette. */
	.inner--thanks {
		justify-content: center;
		min-height: 710px;
		padding: 20px 10px;
	}

	.thanks {
		gap: 30px;
	}

	.check-anim {
		width: 200px;
		height: 200px;
	}

	/* Le tracé garde 4 px (cercle) et 8 px (coche) malgré l'agrandissement du dessin de 180 à 200 px */
	.check-anim__ring {
		stroke-width: 3.6;
	}

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

	.thanks__title {
		font-size: 1.125rem;
		line-height: 26px;
	}

	.thanks__lead {
		font-size: 1rem;
		line-height: 23px;
	}

	.thanks__box {
		display: none;
	}

	.thanks__actions {
		flex-direction: column;
		gap: 40px;
		width: 100%;
		max-width: none;
		padding: 20px 10px;
	}

	.thanks__actions .btn-olive {
		width: 100%;
	}
}

/* En-tête très étroit (≤ 350 px) : burger, logo, compte et panier (30 + 16 + 36 px) ne tiennent plus avec le logo centré sur l'écran ;
   les colonnes latérales s'adaptent à leur contenu et le logo se centre entre elles. */
@media (max-width: 350px) {
	.site-header__inner {
		grid-template-columns: auto minmax(0, 1fr) auto;
	}

	.brand {
		justify-self: center;
	}

	.header-actions {
		gap: 8px;
	}
}