/*
 * Panier et Commander (includes/habillage.php) : en-tête et pied de page du club autour
 * du contenu Divi. Le contenu de la page garde ses styles Divi et WooCommerce : tout est
 * limité à body.ltl-habillage et aux blocs .ltl-header, .ltl-pied et .ltl-skip.
 * Styles de l'en-tête : page.css ; du pied de page : blocks/pied/style.css.
 */

/* En-tête et pied de page de Divi (classiques ; ceux du Theme Builder ne sont pas rendus). */
body.ltl-habillage #top-header,
body.ltl-habillage #main-header,
body.ltl-habillage #main-footer,
body.ltl-habillage .et-l--header,
body.ltl-habillage .et-l--footer {
	display: none !important;
}

/* Divi réserve en JS la hauteur de son en-tête fixe en haut de la page. */
body.ltl-habillage #page-container {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

/* Mêmes repères que sur l'accueil (page.css). */
body.ltl-habillage {
	--ltl-header-hauteur: 64px;
	--ltl-header-haut: 0px;
}

body.ltl-habillage.admin-bar {
	--ltl-header-haut: 32px;
}

@media (max-width: 782px) {
	body.ltl-habillage.admin-bar {
		--ltl-header-haut: 46px;
	}
}

@media (max-width: 600px) {
	body.ltl-habillage.admin-bar {
		--ltl-header-haut: 0px;
	}
}

@media (min-width: 900px) {
	body.ltl-habillage {
		--ltl-header-hauteur: 84px;
	}
}

/*
 * Styles globaux de Divi (corps de texte en Open Sans 14 px, marges basses des titres et
 * des paragraphes) : l'en-tête et le pied de page reprennent ceux de l'accueil. Marges,
 * listes, box-sizing et images : Divi les réinitialise déjà comme page.css.
 */
body.ltl-habillage :where(.ltl-header, .ltl-pied) {
	font-family: var(--ltl-font-texte);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	text-rendering: optimizeLegibility;
}

body.ltl-habillage :where(.ltl-header, .ltl-pied) :where(h1, h2, h3, h4, p) {
	padding-bottom: 0;
}

body.ltl-habillage .ltl-header :focus-visible {
	outline: 3px solid var(--ltl-turquoise-lien);
	outline-offset: 3px;
}

/*
 * WooCommerce aux couleurs du club, sur ces pages seulement (mêmes boutons que
 * composants.css : .ltl-bouton--principal et --secondaire). Divi pose le fond des messages
 * et une partie du style des boutons avec !important (personnalisation du thème) : les
 * valeurs du club doivent l'être aussi. Les moyens de paiement (champs Stripe, Apple Pay,
 * Google Pay, Link, Klarna) ne sont pas visés : seuls les boutons nommés ci-dessous le sont.
 */

/* Messages : panier vide, « Avez-vous un code promo ? », produit ajouté. */
body.ltl-habillage #page-container :is(.woocommerce-info, .woocommerce-message) {
	padding: 16px 20px !important;
	border: 2px solid var(--ltl-turquoise) !important;
	border-radius: var(--ltl-rayon-m);
	background: var(--ltl-turquoise-clair) !important;
	color: var(--ltl-marine) !important;
	font-family: var(--ltl-font-texte);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
}

body.ltl-habillage #page-container :is(.woocommerce-info, .woocommerce-message)::before {
	display: none;
}

body.ltl-habillage #page-container :is(.woocommerce-info, .woocommerce-message) a:not(.button) {
	color: var(--ltl-turquoise-texte);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Boutons : principal (rose) et secondaires (contour marine). */
body.ltl-habillage #page-container :is(
	#place_order,
	.wc-proceed-to-checkout .checkout-button,
	.return-to-shop .button,
	.woocommerce-message .button,
	.woocommerce-cart-form .coupon .button,
	.woocommerce-cart-form button[name="update_cart"],
	.checkout_coupon .button
) {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 12px 24px !important;
	border: 2px solid var(--ltl-marine) !important;
	border-radius: var(--ltl-rayon-m) !important;
	background: transparent !important;
	color: var(--ltl-marine) !important;
	font-family: var(--ltl-font-texte) !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: normal !important;
	text-align: center;
	text-transform: none !important;
	white-space: normal;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
	transition: background-color 0.2s, color 0.2s, transform 0.14s;
}

body.ltl-habillage #page-container :is(#place_order, .wc-proceed-to-checkout .checkout-button) {
	border-color: var(--ltl-rose-action) !important;
	background: var(--ltl-rose-action) !important;
	color: var(--ltl-blanc) !important;
	box-shadow: 0 5px 0 var(--ltl-rose-ombre);
}

/* Flèche ajoutée par Divi au survol (et décalage du texte) : retirée. */
body.ltl-habillage #page-container :is(
	#place_order,
	.wc-proceed-to-checkout .checkout-button,
	.return-to-shop .button,
	.woocommerce-message .button,
	.woocommerce-cart-form .coupon .button,
	.woocommerce-cart-form button[name="update_cart"],
	.checkout_coupon .button
)::after {
	display: none !important;
}

@media (hover: hover) {
	body.ltl-habillage #page-container :is(
		.return-to-shop .button,
		.woocommerce-message .button,
		.woocommerce-cart-form .coupon .button,
		.woocommerce-cart-form button[name="update_cart"]:not(:disabled),
		.checkout_coupon .button
	):hover {
		background: var(--ltl-marine) !important;
		color: var(--ltl-blanc) !important;
	}

	body.ltl-habillage #page-container :is(#place_order, .wc-proceed-to-checkout .checkout-button):hover {
		border-color: #bb1a4f !important;
		background: #bb1a4f !important;
		color: var(--ltl-blanc) !important;
	}
}

body.ltl-habillage #page-container :is(#place_order, .wc-proceed-to-checkout .checkout-button, .woocommerce-cart-form .button):active {
	transform: scale(0.98);
}

body.ltl-habillage #page-container .woocommerce-cart-form button[name="update_cart"]:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

body.ltl-habillage #page-container :is(#place_order, .woocommerce-cart-form .button, .checkout_coupon .button, .wc-proceed-to-checkout .checkout-button):focus-visible {
	outline: 3px solid var(--ltl-turquoise-lien);
	outline-offset: 3px;
}

/* « Commander » : toute la largeur de la colonne des totaux, comme dans WooCommerce. */
body.ltl-habillage #page-container .wc-proceed-to-checkout .checkout-button {
	display: flex !important;
	width: 100%;
	margin-bottom: 12px;
}

body.ltl-habillage #page-container .woocommerce-message .button {
	min-height: 44px;
	padding: 8px 18px !important;
	font-size: 15px !important;
}

/* Mobile : code promo et bouton en pleine largeur, l'un sous l'autre. */
@media (max-width: 768px) {
	body.ltl-habillage #page-container .woocommerce-cart-form td.actions .coupon {
		display: flex;
		flex-direction: column;
		gap: 10px;
		float: none;
		width: 100%;
		padding-bottom: 12px;
	}

	body.ltl-habillage #page-container .woocommerce-cart-form td.actions :is(.coupon .input-text, .coupon .button, button[name="update_cart"]),
	body.ltl-habillage #page-container .checkout_coupon :is(.form-row-first, .form-row-last, .input-text, .button) {
		float: none !important;
		width: 100% !important;
		margin: 0 !important;
	}

	body.ltl-habillage #page-container .checkout_coupon .form-row-first {
		margin-bottom: 10px !important;
	}
}

/*
 * Aide du téléphone WhatsApp (includes/boutique.php), toujours visible sous le champ :
 * WooCommerce l'affiche sinon en info-bulle bleue au focus seulement (woocommerce.js).
 */
body.ltl-habillage #page-container #billing_phone_field .woocommerce-input-wrapper .description {
	display: block !important;
	position: static;
	height: auto !important;
	margin: 6px 0 0 !important;
	padding: 0 !important;
	overflow: visible !important;
	opacity: 1 !important;
	background: none;
	color: var(--ltl-marine);
	font-size: 14px;
	line-height: 1.45;
}

body.ltl-habillage #page-container #billing_phone_field .woocommerce-input-wrapper .description::before {
	display: none;
}