/* ==========================================================================
   CRÉA — WooCommerce
   Contraintes du brief :
   - aucun badge de réduction, sur aucune page
   - la quantité restante s'affiche uniquement quand elle est faible
   - checkout le plus court possible
   ========================================================================== */

/* --------------------------------------------------------------------------
   Nettoyage des sorties Woo par défaut
   -------------------------------------------------------------------------- */

.woocommerce .woocommerce-breadcrumb { display: none; }

/* Badge de promotion : neutralisé au cas où un plugin le réinjecterait */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale,
.wc-block-components-product-sale-badge { display: none !important; }

/* --------------------------------------------------------------------------
   Boutons WooCommerce génériques
   Woo applique son propre bleu à .button : sans cette reprise, un bouton
   « Retour à la boutique » ou « Mettre à jour le panier » casse la charte.
   -------------------------------------------------------------------------- */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .woocommerce-message a.button,
.woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: .95rem 2.2rem;
	background: var(--crea-navy);
	border: 1px solid var(--crea-navy);
	border-radius: var(--crea-radius);
	color: var(--crea-cream);
	font-family: var(--crea-font-body);
	font-size: var(--crea-fs-small);
	font-weight: 500;
	letter-spacing: var(--crea-ls-button);
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	text-shadow: none;
	transition: background var(--crea-dur-fast) var(--crea-ease),
	            border-color var(--crea-dur-fast) var(--crea-ease);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit:hover {
	background: var(--crea-navy-700);
	border-color: var(--crea-navy-700);
	color: var(--crea-cream);
}

.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button[disabled] {
	opacity: .45;
	cursor: not-allowed;
}

/* Bouton secondaire : mise à jour du panier, retour */
.woocommerce button.button[name="update_cart"],
.woocommerce a.button.wc-backward {
	background: transparent;
	border-color: var(--crea-navy);
	color: var(--crea-navy);
}
.woocommerce button.button[name="update_cart"]:hover,
.woocommerce a.button.wc-backward:hover {
	background: var(--crea-navy);
	color: var(--crea-cream);
}

/* --------------------------------------------------------------------------
   Catalogue : barre d'outils
   -------------------------------------------------------------------------- */

.crea-shop-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--crea-sp-4);
	padding-block: var(--crea-sp-5);
	border-bottom: 1px solid var(--crea-rule);
}

.crea-shop-count {
	margin: 0;
	color: var(--crea-text-muted);
	font-size: var(--crea-fs-micro);
	letter-spacing: .1em;
	text-transform: uppercase;
}

.crea-shop-toolbar .woocommerce-ordering { margin: 0; }
.crea-shop-toolbar select {
	width: auto;
	min-width: 12rem;
	padding-block: .6rem;
	background-color: transparent;
	border-color: var(--crea-rule);
	font-size: var(--crea-fs-small);
}

.crea-filter-toggle {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .6rem 1.1rem;
	background: none;
	border: 1px solid var(--crea-rule);
	color: var(--crea-navy);
	cursor: pointer;
	font-size: var(--crea-fs-micro);
	letter-spacing: .1em;
	text-transform: uppercase;
}
@media (min-width: 1000px) { .crea-filter-toggle { display: none; } }

/* --------------------------------------------------------------------------
   Catalogue : mise en page avec colonne de filtres
   -------------------------------------------------------------------------- */

/*
 * Enveloppe du catalogue. Elle porte la trame en losange et une hauteur
 * minimale : tant que le catalogue ne compte que quelques pièces, la grille
 * laisse de larges vides, et un aplat crème nu donne une page inachevée.
 * La trame occupe ce vide sans rien ajouter au poids de la page.
 */
.crea-shop {
	min-height: 62vh;
	padding-bottom: var(--crea-sp-8);
}

.crea-shop-layout {
	display: grid;
	gap: var(--crea-sp-6);
	padding-block: var(--crea-sp-7);
	align-items: start;
}
@media (min-width: 1000px) {
	.crea-shop-layout {
		grid-template-columns: 250px minmax(0, 1fr);
		gap: clamp(2rem, 1rem + 3vw, 4rem);
	}
}

/* Colonne de filtres — tiroir sur mobile, colonne fixe sur desktop */
.crea-shop-filters {
	position: fixed;
	inset: 0 0 0 auto;
	z-index: var(--crea-z-drawer);
	width: min(90vw, 24rem);
	padding: var(--crea-sp-6) var(--crea-gutter);
	background: var(--crea-cream-100);
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: translateX(100%);
	transition: transform var(--crea-dur) var(--crea-ease);
}
.crea-shop-filters.is-open { transform: translateX(0); }

@media (min-width: 1000px) {
	.crea-shop-filters {
		position: sticky;
		top: calc(var(--crea-header-h) + 1.5rem);
		inset: auto;
		/* Le z-index du tiroir mobile passerait au-dessus de l'en-tête collé. */
		z-index: auto;
		width: auto;
		max-height: calc(100svh - var(--crea-header-h) - 3rem);
		padding: 0;
		background: none;
		transform: none;
	}
	/* L'en-tête « Filtrer ✕ » n'a de sens que dans le tiroir mobile */
	.crea-shop-filters .crea-drawer__head { display: none; }
}

.crea-filter-block + .crea-filter-block {
	margin-top: var(--crea-sp-6);
	padding-top: var(--crea-sp-6);
	border-top: 1px solid var(--crea-rule);
}

.crea-filter-block__title {
	margin-bottom: var(--crea-sp-4);
	color: var(--crea-navy);
	font-family: var(--crea-font-body);
	font-size: var(--crea-fs-micro);
	font-weight: 600;
	letter-spacing: var(--crea-ls-eyebrow);
	text-transform: uppercase;
}

.crea-filter-list { margin: 0; padding: 0; list-style: none; }
.crea-filter-list li { margin-bottom: var(--crea-sp-3); }
.crea-filter-list a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--crea-sp-3);
	color: var(--crea-ink);
	font-size: var(--crea-fs-small);
	text-decoration: none;
	transition: color var(--crea-dur-fast) var(--crea-ease);
}
.crea-filter-list a:hover,
.crea-filter-list .is-active > a { color: var(--crea-terracotta); }
.crea-filter-list .is-active > a { font-weight: 600; }
.crea-filter-list .count {
	color: var(--crea-text-muted);
	font-size: var(--crea-fs-micro);
}
/* Sous-catégories : créées à la volée à l'arrivée du catalogue */
.crea-filter-list .children {
	margin: var(--crea-sp-3) 0 0;
	padding-left: var(--crea-sp-4);
	border-left: 1px solid var(--crea-rule);
	list-style: none;
}

.crea-filter-clear {
	display: inline-block;
	margin-top: var(--crea-sp-4);
	color: var(--crea-text-muted);
	font-size: var(--crea-fs-micro);
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* Filtre par gamme de prix */
.crea-price-filter { display: grid; gap: var(--crea-sp-3); }
.crea-price-filter__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--crea-sp-3);
}
.crea-price-filter input { padding-block: .6rem; font-size: var(--crea-fs-small); }

/* --------------------------------------------------------------------------
   Grille produits
   -------------------------------------------------------------------------- */

.woocommerce ul.products,
.crea-products {
	display: grid;
	gap: var(--crea-sp-5) var(--crea-sp-4);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 720px) {
	.woocommerce ul.products,
	.crea-products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--crea-sp-6) var(--crea-sp-5); }
}
@media (min-width: 1200px) {
	.crea-shop-layout .woocommerce ul.products,
	.crea-shop-layout .crea-products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.crea-products--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Woo ajoute des classes de colonnes et des floats : on les neutralise */
.woocommerce ul.products li.product {
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
	text-align: left;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none; }

/* Carte produit */
.crea-card { position: relative; display: flex; flex-direction: column; height: 100%; }

.crea-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--crea-cream-300);
}
.crea-card__media img {
	width: 100%;
	aspect-ratio: var(--crea-ratio-product);
	object-fit: cover;
	transition: transform 1.1s var(--crea-ease), opacity var(--crea-dur) var(--crea-ease);
}
.crea-card:hover .crea-card__media img { transform: scale(1.04); }

/* Seconde image au survol, si la galerie en contient une */
.crea-card__media .crea-card__img--hover {
	position: absolute;
	inset: 0;
	opacity: 0;
}
.crea-card:hover .crea-card__img--hover { opacity: 1; }

/*
 * On ne masque l'image principale que si une seconde image la remplace. La
 * classe --bascule est posée par le gabarit uniquement quand la galerie du
 * produit contient au moins une image : sinon la carte se vidait au survol.
 */
.crea-card:hover .crea-card__media--bascule .crea-card__img--main { opacity: 0; }

.crea-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding-top: var(--crea-sp-4);
}

.crea-card__cat {
	margin-bottom: .35rem;
	color: var(--crea-text-muted);
	font-size: var(--crea-fs-micro);
	letter-spacing: .14em;
	text-transform: uppercase;
}

.crea-card__title {
	margin-bottom: var(--crea-sp-2);
	font-family: var(--crea-font-display);
	font-size: var(--crea-fs-h4);
	font-weight: 400;
	line-height: 1.25;
}
.crea-card__title a { color: var(--crea-navy); text-decoration: none; }
.crea-card__title a:hover { color: var(--crea-terracotta); }

.crea-card__price {
	margin-top: auto;
	color: var(--crea-ink);
	font-size: var(--crea-fs-small);
	font-weight: 500;
	letter-spacing: .03em;
}

/* La rareté est un argument, pas une alerte : ton sobre, pas de rouge */
.crea-stock-note {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	margin-top: var(--crea-sp-2);
	color: var(--crea-terracotta);
	font-size: var(--crea-fs-micro);
	letter-spacing: .06em;
}
.crea-stock-note::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: currentColor;
}
.crea-stock-note--out { color: var(--crea-text-muted); }

/* Bouton d'ajout depuis la grille : discret, apparaît au survol sur desktop */
.crea-card__action { margin-top: var(--crea-sp-4); }
.crea-card__action .crea-btn { min-height: 46px; padding-inline: 1.4rem; font-size: var(--crea-fs-micro); }

@media (min-width: 1000px) {
	.crea-card__action {
		opacity: 0;
		transform: translateY(6px);
		transition: opacity var(--crea-dur-fast) var(--crea-ease),
		            transform var(--crea-dur-fast) var(--crea-ease);
	}
	.crea-card:hover .crea-card__action,
	.crea-card:focus-within .crea-card__action { opacity: 1; transform: none; }
}

/* Catalogue vide */
.crea-empty {
	padding-block: var(--crea-sp-8);
	text-align: center;
}
.crea-empty p { color: var(--crea-text-muted); }

/* --------------------------------------------------------------------------
   Fiche produit
   -------------------------------------------------------------------------- */

.crea-product {
	display: grid;
	gap: var(--crea-sp-6);
	padding-block: var(--crea-sp-6) var(--crea-section-y);
}
@media (min-width: 900px) {
	.crea-product {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		gap: clamp(2.5rem, 1rem + 4vw, 5rem);
		align-items: start;
	}
}

/* Galerie avec zoom sur le détail */
.crea-gallery { position: relative; }

.crea-gallery__main {
	position: relative;
	overflow: hidden;
	background: var(--crea-cream-300);
	cursor: zoom-in;
}
.crea-gallery__main img {
	width: 100%;
	aspect-ratio: var(--crea-ratio-product);
	object-fit: cover;
	transition: transform .6s var(--crea-ease);
}
/* Zoom au survol : le geste met le détail de broderie en avant */
.crea-gallery__main.is-zoomed img { transform: scale(2); transition: transform .18s linear; }

.crea-gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--crea-sp-2);
	margin-top: var(--crea-sp-2);
}
@media (min-width: 900px) { .crea-gallery__thumbs { grid-template-columns: repeat(5, 1fr); } }

.crea-gallery__thumb {
	padding: 0;
	background: var(--crea-cream-300);
	border: 1px solid transparent;
	cursor: pointer;
	transition: border-color var(--crea-dur-fast) var(--crea-ease);
}
.crea-gallery__thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.crea-gallery__thumb.is-active { border-color: var(--crea-gold); }

/* Colonne d'informations */
.crea-product__summary { position: relative; }
@media (min-width: 900px) {
	.crea-product__summary { position: sticky; top: calc(var(--crea-header-h) + 2rem); }
}

.crea-product__cat {
	margin-bottom: var(--crea-sp-3);
	color: var(--crea-gold-600);
	font-size: var(--crea-fs-micro);
	letter-spacing: var(--crea-ls-eyebrow);
	text-transform: uppercase;
}

.crea-product__title {
	margin-bottom: var(--crea-sp-4);
	font-size: var(--crea-fs-h1);
}

.crea-product__price {
	margin-bottom: var(--crea-sp-5);
	color: var(--crea-navy);
	font-family: var(--crea-font-body);
	font-size: 1.35rem;
	font-weight: 500;
	letter-spacing: .02em;
}
.crea-product__price .woocommerce-Price-amount { color: inherit; }
/* Prix barré : conservé pour la lisibilité, sans jamais afficher de pourcentage */
.crea-product__price del {
	margin-right: .6rem;
	color: var(--crea-text-muted);
	font-size: 1rem;
	opacity: .7;
}
.crea-product__price ins { text-decoration: none; }

/* Mention de quantité limitée — argument de rareté, jamais une alarme */
.crea-scarcity {
	display: flex;
	align-items: flex-start;
	gap: var(--crea-sp-3);
	margin-bottom: var(--crea-sp-5);
	padding: var(--crea-sp-4);
	background: var(--crea-gold-050);
	border-left: 2px solid var(--crea-gold);
	color: var(--crea-navy);
	font-size: var(--crea-fs-small);
	line-height: 1.6;
}
.crea-scarcity svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: .18em; color: var(--crea-gold-600); }

/* Récit court — premier niveau de description (brief §4) */
.crea-product__excerpt {
	margin-bottom: var(--crea-sp-6);
	padding-bottom: var(--crea-sp-6);
	border-bottom: 1px solid var(--crea-rule);
	color: var(--crea-text-muted);
	line-height: 1.75;
}

/* Variations taille / couleur */
.woocommerce div.product form.cart .variations {
	width: 100%;
	margin-bottom: var(--crea-sp-5);
	border-collapse: collapse;
}
.woocommerce div.product form.cart .variations tr { display: block; margin-bottom: var(--crea-sp-4); }
.woocommerce div.product form.cart .variations td { display: block; padding: 0; }
.woocommerce div.product form.cart .variations th.label {
	display: block;
	padding: 0 0 var(--crea-sp-2);
	text-align: left;
}
.woocommerce div.product form.cart .variations label {
	margin: 0;
	color: var(--crea-navy);
	font-size: var(--crea-fs-micro);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.woocommerce div.product form.cart .reset_variations {
	display: inline-block;
	margin-top: var(--crea-sp-2);
	color: var(--crea-text-muted);
	font-size: var(--crea-fs-micro);
	letter-spacing: .06em;
}

.woocommerce div.product form.cart .woocommerce-variation-price {
	margin-bottom: var(--crea-sp-4);
	font-size: 1.2rem;
	font-weight: 500;
}

/* Quantité + ajout au panier */
.crea-cart-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--crea-sp-3);
	align-items: stretch;
}

/*
 * Le sélecteur s'applique partout où WooCommerce l'affiche : fiche produit et
 * panier. Il n'est donc pas limité à form.cart.
 */
.woocommerce .quantity--crea,
.quantity--crea {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	border: 1px solid var(--crea-rule);
	border-radius: var(--crea-radius);
	background: var(--crea-white);
}

/*
 * Filet de sécurité : si le pas de quantité de Blocksy venait à être
 * réactivé, ses éléments ne doivent pas se superposer aux nôtres.
 */
.quantity--crea .ct-increase,
.quantity--crea .ct-decrease { display: none !important; }

.crea-qty-btn {
	display: grid;
	place-items: center;
	width: 44px;
	height: 52px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--crea-navy);
	cursor: pointer;
	font-family: var(--crea-font-body);
	font-size: 1.1rem;
	line-height: 1;
	transition: color var(--crea-dur-fast) var(--crea-ease);
}
.crea-qty-btn:hover:not(:disabled) { color: var(--crea-gold-600); }
.crea-qty-btn:disabled { opacity: .35; cursor: not-allowed; }

.quantity--crea input.qty {
	width: 46px;
	height: 52px;
	padding: 0;
	background: none;
	border: 0;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}
.quantity--crea input.qty:focus {
	outline: none;
	box-shadow: none;
}
.quantity--crea input.qty::-webkit-outer-spin-button,
.quantity--crea input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Dans le tableau du panier, la cellule est plus étroite */
.woocommerce table.shop_table .quantity--crea { width: auto; }

.woocommerce div.product form.cart .button.single_add_to_cart_button {
	flex: 1 1 14rem;
	min-height: 52px;
	padding: .95rem 2rem;
	background: var(--crea-navy);
	border: 1px solid var(--crea-navy);
	border-radius: var(--crea-radius);
	color: var(--crea-cream);
	font-family: var(--crea-font-body);
	font-size: var(--crea-fs-small);
	font-weight: 500;
	letter-spacing: var(--crea-ls-button);
	text-transform: uppercase;
	transition: background var(--crea-dur-fast) var(--crea-ease);
}
.woocommerce div.product form.cart .button.single_add_to_cart_button:hover {
	background: var(--crea-navy-700);
}
.woocommerce div.product form.cart .button.disabled,
.woocommerce div.product form.cart .button:disabled { opacity: .45; cursor: not-allowed; }

/* Second niveau : matières et entretien */
.crea-product__details { margin-top: var(--crea-sp-6); }

.crea-detail {
	border-top: 1px solid var(--crea-rule);
}
.crea-detail summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--crea-sp-4);
	padding-block: var(--crea-sp-4);
	color: var(--crea-navy);
	cursor: pointer;
	font-size: var(--crea-fs-small);
	font-weight: 600;
	letter-spacing: .1em;
	list-style: none;
	text-transform: uppercase;
}
.crea-detail summary::-webkit-details-marker { display: none; }
.crea-detail summary::after {
	content: "";
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-right: 1.5px solid var(--crea-gold-600);
	border-bottom: 1.5px solid var(--crea-gold-600);
	transform: rotate(45deg);
	transition: transform var(--crea-dur-fast) var(--crea-ease);
}
.crea-detail[open] summary::after { transform: rotate(-135deg); }
.crea-detail__body {
	padding-bottom: var(--crea-sp-5);
	color: var(--crea-text-muted);
	font-size: var(--crea-fs-small);
	line-height: 1.75;
}
.crea-detail__body ul { padding-left: 1.1em; }

/* Tableau d'attributs (matières, dimensions) */
.crea-attrs { width: 100%; border-collapse: collapse; font-size: var(--crea-fs-small); }
.crea-attrs th, .crea-attrs td {
	padding: .6rem 0;
	border-bottom: 1px solid var(--crea-rule);
	text-align: left;
	vertical-align: top;
}
.crea-attrs th {
	width: 42%;
	padding-right: var(--crea-sp-4);
	color: var(--crea-navy);
	font-weight: 600;
}
.crea-attrs td { color: var(--crea-text-muted); }
.crea-attrs tr:last-child th, .crea-attrs tr:last-child td { border-bottom: 0; }

/* Réassurance sous le bouton */
.crea-product__assurance {
	display: grid;
	gap: var(--crea-sp-3);
	margin-top: var(--crea-sp-5);
	padding-top: var(--crea-sp-5);
	border-top: 1px solid var(--crea-rule);
}
.crea-product__assurance li {
	display: flex;
	align-items: flex-start;
	gap: var(--crea-sp-3);
	margin: 0;
	color: var(--crea-text-muted);
	font-size: var(--crea-fs-small);
	line-height: 1.55;
	list-style: none;
}
.crea-product__assurance svg { flex: 0 0 auto; width: 17px; height: 17px; margin-top: .18em; color: var(--crea-gold-600); }
.crea-product__assurance ul { margin: 0; padding: 0; }

/* Produits liés */
.crea-related { padding-block: var(--crea-section-y); border-top: 1px solid var(--crea-rule); }
.crea-related .related > h2,
.crea-related .up-sells > h2 {
	margin-bottom: var(--crea-sp-6);
	font-size: var(--crea-fs-h2);
	text-align: center;
}

/* --------------------------------------------------------------------------
   Panier
   -------------------------------------------------------------------------- */

.crea-cart { padding-block: var(--crea-sp-7) var(--crea-section-y); }

.woocommerce table.shop_table {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	border-radius: 0;
}
.woocommerce table.shop_table th {
	padding: var(--crea-sp-3) var(--crea-sp-3);
	border-bottom: 1px solid var(--crea-rule);
	color: var(--crea-navy);
	font-family: var(--crea-font-body);
	font-size: var(--crea-fs-micro);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.woocommerce table.shop_table td {
	padding: var(--crea-sp-4) var(--crea-sp-3);
	border-top: 0;
	border-bottom: 1px solid var(--crea-rule);
	vertical-align: middle;
}
.woocommerce table.shop_table .product-thumbnail img { width: 80px; }

.woocommerce .cart_totals h2,
.woocommerce-checkout h3 { font-size: var(--crea-fs-h3); }

.woocommerce .cart_totals {
	padding: var(--crea-sp-6);
	background: var(--crea-surface);
	border: 1px solid var(--crea-rule);
}

.woocommerce .wc-proceed-to-checkout { padding: 0; margin-top: var(--crea-sp-5); }
.woocommerce .wc-proceed-to-checkout a.checkout-button { width: 100%; }

/* --------------------------------------------------------------------------
   Tunnel de commande
   Le point où une boutique premium algérienne se casse la figure (brief §4).
   Le moins de champs possible, une seule colonne sur mobile.
   -------------------------------------------------------------------------- */

.crea-checkout { padding-block: var(--crea-sp-7) var(--crea-section-y); }

/*
 * Le thème parent transforme form.checkout en grille deux colonnes. Notre
 * gabarit gère déjà la mise en page : sans cette reprise, nos deux colonnes
 * se retrouvent écrasées dans la première des siennes.
 */
.woocommerce form.checkout,
.woocommerce-checkout form.checkout {
	display: block !important;
	grid-template-columns: none !important;
}

.crea-checkout__grid { display: grid; gap: var(--crea-sp-7); }
@media (min-width: 900px) {
	.crea-checkout__grid {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, .85fr);
		gap: clamp(2.5rem, 1rem + 4vw, 5rem);
		align-items: start;
	}
}

.crea-checkout__step {
	margin-bottom: var(--crea-sp-5);
	padding-bottom: var(--crea-sp-3);
	border-bottom: 1px solid var(--crea-rule-gold);
	font-size: var(--crea-fs-h3);
}
.crea-checkout__step small {
	display: block;
	margin-top: .35rem;
	color: var(--crea-text-muted);
	font-family: var(--crea-font-body);
	font-size: var(--crea-fs-small);
	letter-spacing: 0;
}

.woocommerce form .form-row {
	margin: 0 0 var(--crea-sp-4);
	padding: 0;
}
.woocommerce form .form-row label {
	display: block;
	margin-bottom: var(--crea-sp-2);
	color: var(--crea-navy);
	font-size: var(--crea-fs-micro);
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.woocommerce form .form-row .required { color: var(--crea-terracotta); border: 0; text-decoration: none; }
.woocommerce form .form-row .optional { color: var(--crea-text-muted); font-weight: 400; }

/* Deux champs sur une ligne dès 560px : le formulaire reste court à l'oeil */
@media (min-width: 560px) {
	.woocommerce form .form-row-first,
	.woocommerce form .form-row-last {
		float: none;
		display: inline-block;
		width: calc(50% - .5rem);
		vertical-align: top;
	}
	.woocommerce form .form-row-first { margin-right: 1rem; }
}

.woocommerce form .form-row.woocommerce-invalid input,
.woocommerce form .form-row.woocommerce-invalid select {
	border-color: var(--crea-terracotta);
}
.woocommerce form .form-row.woocommerce-validated input { border-color: rgba(0, 47, 108, .25); }

/* Le champ téléphone est le canal de confirmation : on le met en avant */
#billing_phone_field input { letter-spacing: .06em; }

.crea-checkout__hint {
	margin-top: -.5rem;
	margin-bottom: var(--crea-sp-4);
	color: var(--crea-text-muted);
	font-size: var(--crea-fs-micro);
	line-height: 1.5;
}

/* Récapitulatif */
.crea-order-review {
	padding: var(--crea-sp-6);
	background: var(--crea-surface);
	border: 1px solid var(--crea-rule);
}
@media (min-width: 900px) {
	.crea-order-review { position: sticky; top: calc(var(--crea-header-h) + 2rem); }
}
.crea-order-review table.shop_table { margin: 0; }
.crea-order-review table.shop_table td,
.crea-order-review table.shop_table th { padding-inline: 0; }
.crea-order-review .order-total .amount {
	color: var(--crea-navy);
	font-size: 1.2rem;
	font-weight: 600;
}

/* Paiement à la livraison — seule passerelle active */
.woocommerce-checkout #payment {
	background: none;
	border-radius: 0;
}
.woocommerce-checkout #payment ul.payment_methods {
	padding: 0;
	border-bottom: 0;
}
.woocommerce-checkout #payment ul.payment_methods li {
	margin: 0;
	padding: var(--crea-sp-4);
	background: var(--crea-gold-050);
	border: 1px solid var(--crea-rule-gold);
	list-style: none;
}
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] { display: none; }
.woocommerce-checkout #payment ul.payment_methods label {
	margin: 0;
	color: var(--crea-navy);
	font-size: var(--crea-fs-small);
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: none;
}
.woocommerce-checkout #payment div.payment_box {
	margin: var(--crea-sp-3) 0 0;
	padding: 0;
	background: none;
	color: var(--crea-text-muted);
	font-size: var(--crea-fs-small);
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }

.woocommerce-checkout #payment .form-row.place-order { padding: var(--crea-sp-5) 0 0; margin: 0; }
.woocommerce #payment #place_order,
.woocommerce-checkout button#place_order {
	width: 100%;
	min-height: 56px;
	background: var(--crea-navy);
	border: 1px solid var(--crea-navy);
	border-radius: var(--crea-radius);
	color: var(--crea-cream);
	font-family: var(--crea-font-body);
	font-size: var(--crea-fs-small);
	font-weight: 600;
	letter-spacing: var(--crea-ls-button);
	text-transform: uppercase;
}

/* Frais de livraison par wilaya */
.woocommerce-checkout .shipping th { vertical-align: top; }
.woocommerce ul#shipping_method {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}
.woocommerce ul#shipping_method li {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	margin: 0 0 .6rem;
	line-height: 1.4;
}
.woocommerce ul#shipping_method li:last-child { margin-bottom: 0; }
.woocommerce ul#shipping_method input[type="radio"] {
	flex: 0 0 auto;
	margin: .25rem 0 0;
	accent-color: var(--crea-navy);
}
.woocommerce ul#shipping_method label { margin: 0; letter-spacing: 0; text-transform: none; }
/* La colonne de gauche est étroite : le libellé passe sous le montant */
.woocommerce-checkout .shipping td { text-align: left; }

/* --------------------------------------------------------------------------
   Messages Woo
   -------------------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	margin: 0 0 var(--crea-sp-5);
	padding: var(--crea-sp-4) var(--crea-sp-5);
	background: var(--crea-gold-050);
	border: 0;
	border-left: 2px solid var(--crea-gold);
	border-radius: 0;
	color: var(--crea-navy);
	font-size: var(--crea-fs-small);
	line-height: 1.6;
	list-style: none;
}
.woocommerce-error { background: #fbeee8; border-left-color: var(--crea-terracotta); }
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }
.woocommerce-message .button,
.woocommerce-info .button {
	float: right;
	padding: .35rem 1rem;
	background: var(--crea-navy);
	border-radius: var(--crea-radius);
	color: var(--crea-cream);
	font-size: var(--crea-fs-micro);
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Compte client & pages Woo diverses
   -------------------------------------------------------------------------- */

.woocommerce-account .woocommerce { padding-block: var(--crea-sp-7) var(--crea-section-y); }
.woocommerce-account .woocommerce-MyAccount-navigation ul { margin: 0; padding: 0; list-style: none; }
.woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--crea-rule); }
.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: block;
	padding-block: var(--crea-sp-3);
	color: var(--crea-navy);
	font-size: var(--crea-fs-small);
	letter-spacing: .06em;
	text-decoration: none;
}

/* Confirmation de commande */
.woocommerce-order {
	padding-block: var(--crea-sp-7) var(--crea-section-y);
}
/*
 * Le message de confirmation sort avec le gris de WooCommerce et une puce
 * d'icône. On le repasse dans la charte : c'est le dernier écran que voit la
 * cliente, il doit rester dans le ton de la maison.
 */
.woocommerce-order .woocommerce-thankyou-order-received,
.woocommerce-order p.woocommerce-notice--success {
	margin-bottom: var(--crea-sp-6);
	padding: var(--crea-sp-5) var(--crea-sp-6);
	background: var(--crea-gold-050);
	border: 0;
	border-left: 2px solid var(--crea-gold);
	border-radius: 0;
	color: var(--crea-navy);
	font-family: var(--crea-font-display);
	font-size: var(--crea-fs-h3);
	line-height: 1.35;
}
.woocommerce-order p.woocommerce-notice--success::before,
.woocommerce-order p.woocommerce-notice--success::after { display: none; content: none; }
.woocommerce ul.order_details {
	display: grid;
	gap: var(--crea-sp-4);
	margin: 0 0 var(--crea-sp-6);
	padding: var(--crea-sp-5);
	background: var(--crea-surface);
	border: 1px solid var(--crea-rule);
	list-style: none;
}
@media (min-width: 720px) { .woocommerce ul.order_details { grid-template-columns: repeat(4, 1fr); } }
.woocommerce ul.order_details li {
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--crea-text-muted);
	font-size: var(--crea-fs-micro);
	letter-spacing: .1em;
	text-transform: uppercase;
}
.woocommerce ul.order_details li strong {
	display: block;
	margin-top: .35rem;
	color: var(--crea-navy);
	font-size: var(--crea-fs-body);
	letter-spacing: 0;
	text-transform: none;
}