/*
 * Corrections d'affichage sur les pages de la boutique.
 *
 * WooCommerce charge woocommerce-layout.css sur toute page boutique, et cette
 * feuille contient :
 *
 *     .woocommerce img, .woocommerce-page img { height: auto; max-width: 100% }
 *
 * Ces deux classes sont posées sur le <body>. La règle attrape donc toutes les
 * images de la page, y compris celles du header et du pied — qui n'ont rien à
 * voir avec la boutique. Avec une spécificité de (0,1,1) elle bat le (0,1,0) de
 * design.css, et le logo perdait sa hauteur pour reprendre son ratio d'origine :
 * 74 px attendus, 160 px affichés, débordant sur le fil d'ariane.
 *
 * On remonte donc la spécificité côté design. Les valeurs ci-dessous sont
 * relevées dans design.css — si le design du header change, elles sont à
 * reprendre ici aussi.
 */

.site-header .brand__logo {
	height: 74px;
	width: auto;
}

.site-header.is-scrolled .brand__logo {
	height: 60px;
}

@media (max-width: 768px) {
	.site-header .brand__logo {
		height: 56px;
	}
}

/*
 * Le panier.
 *
 * Les blocs de WooCommerce arrivent avec leur propre feuille, chargée au moment
 * où le bloc se rend — après celle-ci. La spécificité est donc remontée avec
 * body.woocommerce-page, que WooCommerce pose sur ses pages, et jamais avec
 * !important.
 */

/* Respiration : le bloc colle au pied de page, et l'état vide n'a ni marge ni
 * centrage — ses boutons partent à gauche. */
body.woocommerce-page .wp-block-woocommerce-cart {
	padding-block: 8px clamp(56px, 8vw, 96px);
}
body.woocommerce-page .wp-block-woocommerce-empty-cart-block {
	text-align: center;
	padding-block: clamp(24px, 4vw, 48px) 0;
}
body.woocommerce-page .wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(30px, 3.6vw, 44px);
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: var(--sauge-800);
	margin-bottom: 12px;
}
body.woocommerce-page .wp-block-woocommerce-empty-cart-block p {
	max-width: 52ch;
	margin-inline: auto;
	color: var(--ink-700);
}
body.woocommerce-page .wp-block-woocommerce-empty-cart-block .wp-block-buttons {
	justify-content: center;
	gap: 12px;
	margin-top: 28px;
}

/* Le bandeau des notices — « ajouté au panier » — sort du bloc de page dans
 * un conteneur alignwide de 1240px que rien ne centre : il colle au bord
 * gauche, quand le fil d'Ariane et le titre commencent 48px plus loin. On lui
 * donne le cadrage du fil d'Ariane (.crumb) : la largeur de page plafonnée à
 * --container-bleed, centrée, avec la même gouttière. */
body.woocommerce-page .wc-block-store-notices.alignwide {
	max-width: var(--container-bleed);
	margin-inline: auto;
	padding-inline: 48px;
	box-sizing: border-box;
}
body.woocommerce-page .wc-block-store-notices .wc-block-components-notice-banner {
	margin-block: 8px 0;
}

/* Les bannières — « ajouté au panier », erreurs, informations — sortent en vert
 * de feu de signalisation, rouge vif et bleu. Sauge, terre et laiton. */
body.woocommerce-page .wc-block-components-notice-banner {
	border-radius: var(--radius-md);
	color: var(--ink-900);
}
body.woocommerce-page .wc-block-components-notice-banner.is-success {
	border-color: var(--sauge-300);
	background-color: var(--sauge-50);
}
body.woocommerce-page .wc-block-components-notice-banner.is-success > svg {
	background-color: var(--sauge-700);
}
body.woocommerce-page .wc-block-components-notice-banner.is-error {
	border-color: var(--terre-700);
	background-color: var(--terre-100);
}
body.woocommerce-page .wc-block-components-notice-banner.is-error > svg {
	background-color: var(--color-danger);
}
body.woocommerce-page .wc-block-components-notice-banner.is-info,
body.woocommerce-page .wc-block-components-notice-banner.is-warning {
	border-color: var(--laiton-500);
	background-color: var(--laiton-50);
}
body.woocommerce-page .wc-block-components-notice-banner.is-info > svg,
body.woocommerce-page .wc-block-components-notice-banner.is-warning > svg {
	background-color: var(--laiton-800);
}
body.woocommerce-page .wc-block-components-notice-banner__content a {
	color: var(--sauge-800);
}

/* Le bouton de validation : les angles de la charte. */
body.woocommerce-page .wc-block-cart__submit-button,
body.woocommerce-page .wc-block-components-checkout-place-order-button {
	border-radius: var(--radius-md);
}

/* Sur mobile, le gabarit de WooCommerce colle le titre, le panier et la page de
 * commande aux bords (la commande avait été oubliée : texte et bouton à 0 px). */
@media (max-width: 768px) {
	body.woocommerce-page main .wp-block-post-title,
	body.woocommerce-page .wp-block-woocommerce-cart,
	body.woocommerce-page .wp-block-woocommerce-checkout {
		padding-inline: 16px;
	}
}

/* Le champ de quantité du bloc d'achat : WooCommerce le laisse aux couleurs
 * du navigateur (texte noir, bordure grise). */
body.single-product .quantity .qty {
	color: var(--ink-900);
	background-color: var(--paper-0);
	border: 1px solid var(--paper-300);
	border-radius: var(--radius-md);
	font-family: var(--font-body);
}

/*
 * « Et maintenant ? » — après le paiement d'une consultation.
 *
 * Posé par inc/consultations.php en tête de la page de confirmation et de la
 * commande du compte, avant le récapitulatif : c'est la première chose à lire.
 */
.et-maintenant {
	max-width: 60ch;
	margin: 0 0 40px;
	padding: 26px 28px;
	background: var(--paper-100);
	border: 1px solid var(--paper-200);
	border-radius: var(--radius-md);
}
/* .et-maintenant p (0,1,1) passait devant .ed-eyebrow (0,1,0) : l'eyebrow
 * prenait la taille du texte courant, en mono gras. */
.et-maintenant .ed-eyebrow {
	margin-bottom: 12px;
	font-size: 11px;
	line-height: 1.4;
	color: var(--laiton-800);
}
.et-maintenant p {
	font-size: var(--fs-md);
	line-height: 1.55;
	color: var(--ink-900);
	margin: 0 0 12px;
}
.et-maintenant p:last-child {
	margin-bottom: 0;
}
.et-maintenant .btn {
	margin-top: 6px;
}

/*
 * Le sélecteur de variation, dans le bloc d'achat.
 *
 * Deux produits variables : la séance accompagnée des élèves (« Ta place »,
 * gabarit formation, bloc en colonne) et l'accompagnement professionnel
 * (« Formule », gabarit capsule, bloc en ligne). WooCommerce rend le sélecteur
 * dans une table ; on la met dans la charte du formulaire de contact (label
 * mono, champ à bordure fine, chevron laiton), et le prix de la variation
 * choisie prend la place du prix de départ.
 */
.fh-buy .variations,
.fc-buy__row .variations {
	width: 100%;
	margin: 0 0 14px;
	border-collapse: collapse;
}
.fh-buy .variations,
.fh-buy .variations tbody,
.fh-buy .variations tr,
.fh-buy .variations th,
.fh-buy .variations td,
.fc-buy__row .variations,
.fc-buy__row .variations tbody,
.fc-buy__row .variations tr,
.fc-buy__row .variations th,
.fc-buy__row .variations td {
	display: block;
	width: 100%;
	padding: 0;
	text-align: left;
}
.fh-buy .variations label,
.fc-buy__row .variations label {
	display: block;
	margin: 0 0 7px;
	font-family: var(--font-mono);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-500);
}
.fh-buy .variations td.value,
.fc-buy__row .variations td.value {
	position: relative;
}
.fh-buy .variations select,
.fc-buy__row .variations select {
	width: 100%;
	max-width: none;
	padding: 12px 40px 12px 14px;
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	color: var(--ink-900);
	background: var(--paper-0);
	border: 1px solid var(--paper-200);
	border-radius: var(--radius-md);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.fh-buy .variations select:focus,
.fc-buy__row .variations select:focus {
	outline: none;
	border-color: var(--sauge-500);
	box-shadow: 0 0 0 3px rgba(138, 154, 114, 0.18);
}
.fh-buy .variations td.value::after,
.fc-buy__row .variations td.value::after {
	content: "";
	position: absolute;
	right: 16px;
	top: 50%;
	width: 9px;
	height: 9px;
	border-right: 1.5px solid var(--laiton-700);
	border-bottom: 1.5px solid var(--laiton-700);
	transform: translateY(-65%) rotate(45deg);
	pointer-events: none;
}
/* « Effacer » : inutile avec un seul attribut, on rechoisit dans la liste. Le
   script de WooCommerce lui pose display:inline en style inline : on le sort du
   flux plutôt que de le masquer. */
.fh-buy .reset_variations,
.fc-buy__row .reset_variations {
	position: absolute;
	left: -9999px;
}
/* Le bouton de la variation prend toute la largeur, comme celui d'un produit
   simple ; la quantité n'a pas lieu d'être (vendu à l'unité). */
.fh-buy .woocommerce-variation-add-to-cart,
.fc-buy__row .woocommerce-variation-add-to-cart {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.fh-buy .woocommerce-variation-add-to-cart .quantity,
.fc-buy__row .woocommerce-variation-add-to-cart .quantity {
	display: none;
}
/*
 * Bloc en ligne (capsule) : la ligne d'achat est « prix · bouton ». Avec un
 * sélecteur, le formulaire se dissout dans la ligne (display: contents) pour
 * que ses morceaux s'y rangent : le sélecteur d'abord, pleine largeur ; puis le
 * prix et le bouton côte à côte, comme pour un produit simple. Dès qu'une
 * formule est choisie, le prix de la variation remplace la fourchette.
 */
.fc-buy__row form.cart:has(.variations) {
	display: contents;
}
.fc-buy__row form.cart:has(.variations) .variations {
	order: -1;
	flex: 0 0 100%;
	margin: 0 0 4px;
}
.fc-buy__row form.cart:has(.variations) .single_variation_wrap {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 28px;
	flex-wrap: wrap;
}
.fc-buy__row form.cart:has(.variations) .single_variation:empty {
	display: none;
}
.fc-buy__row:has(.single_variation:not(:empty)) > .fc-buy__price {
	display: none;
}
.fc-buy__row form.cart:has(.variations) .woocommerce-variation-add-to-cart {
	flex: 1 1 auto;
}
.fc-buy__row form.cart:has(.variations) .woocommerce-variation-price {
	margin: 0;
	font-size: clamp(34px, 3.6vw, 44px);
	line-height: 1;
	letter-spacing: -0.02em;
}
/* Le bouton en attente d'un choix : présent, mais visiblement inactif. */
.fc-buy__row .single_add_to_cart_button.wc-variation-selection-needed,
.fh-buy .single_add_to_cart_button.wc-variation-selection-needed {
	opacity: 0.55;
	cursor: not-allowed;
}
@media (max-width: 600px) {
	.fc-buy__row form.cart:has(.variations) .single_variation_wrap {
		flex-direction: column;
		align-items: stretch;
	}
}

/* Le prix de la variation, affiché par WooCommerce sous le sélecteur. */
.fh-buy .woocommerce-variation-price,
.fc-buy__row .woocommerce-variation-price {
	margin: 0 0 10px;
	font-family: var(--font-display);
	font-size: 22px;
	color: var(--sauge-800);
}
.fh-buy .woocommerce-variation-price del,
.fc-buy__row .woocommerce-variation-price del {
	color: var(--ink-300);
	font-size: 0.75em;
}
.fh-buy .woocommerce-variation-availability,
.fc-buy__row .woocommerce-variation-availability {
	font-size: var(--fs-xs);
	color: var(--ink-500);
}

/*
 * La page de confirmation de commande.
 *
 * WooCommerce la compose en blocs (gabarit order-confirmation) : statut,
 * résumé, détail, adresse, puis « informations complémentaires », où se
 * pose « Et maintenant ? ». La suite à donner arrivait donc tout en bas,
 * sous l'adresse de facturation. On garde le gabarit de WooCommerce (le
 * thème est régénéré par le pipeline) et on réordonne : le merci, la suite,
 * puis le récapitulatif, de plus en plus discret.
 */
body.woocommerce-order-received main.wp-block-group {
	display: flex;
	flex-direction: column;
	padding-top: var(--space-7);
	padding-bottom: var(--space-9);
	padding-left: max(var(--space-4), var(--wp--style--root--padding-left, 0px));
	padding-right: max(var(--space-4), var(--wp--style--root--padding-right, 0px));
}
body.woocommerce-order-received main.wp-block-group > * {
	order: 5;
	width: 100%;
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}
body.woocommerce-order-received main.wp-block-group > .wc-block-order-confirmation-status { order: 1; }
body.woocommerce-order-received main.wp-block-group > .wc-block-order-confirmation-additional-information { order: 2; }
body.woocommerce-order-received main.wp-block-group > .wc-block-order-confirmation-summary { order: 3; }
body.woocommerce-order-received main.wp-block-group > .wc-block-order-confirmation-totals-wrapper { order: 4; }

/* Le merci. */
body.woocommerce-order-received .wc-block-order-confirmation-status h1 {
	font-family: var(--font-display);
	font-size: clamp(2.5rem, 1.6rem + 3vw, var(--fs-4xl));
	font-weight: 400;
	line-height: var(--lh-tight);
	letter-spacing: -0.02em;
	color: var(--sauge-800);
	margin: 0 0 var(--space-4);
}
body.woocommerce-order-received .wc-block-order-confirmation-status p {
	font-family: var(--font-body);
	font-size: var(--fs-lg);
	line-height: var(--lh-normal);
	color: var(--ink-700);
	max-width: 52ch;
	margin: 0 0 var(--space-7);
	text-wrap: pretty;
}
body.woocommerce-order-received .wc-block-order-confirmation-status p strong {
	color: var(--ink-900);
	font-weight: 600;
}

/* La suite : la seule carte de la page, parce que c'est la seule action. */
body.woocommerce-order-received .et-maintenant {
	max-width: 760px;
	margin: 0 0 var(--space-7);
	padding: var(--space-6);
	background: var(--paper-0);
	border: 1px solid var(--paper-300);
	box-shadow: var(--shadow-sm);
}
@media (max-width: 600px) {
	body.woocommerce-order-received .et-maintenant {
		padding: var(--space-5);
	}
}
body.woocommerce-order-received .et-maintenant p:not(.ed-eyebrow) {
	max-width: 60ch;
}
body.woocommerce-order-received .et-maintenant p + p:has(> .btn) {
	margin-top: var(--space-4);
}

/* Le résumé : une ligne de repères, pas cinq colonnes de gras. */
body.woocommerce-order-received .wc-block-order-confirmation-summary {
	margin-bottom: var(--space-7);
}
body.woocommerce-order-received .wc-block-order-confirmation-summary-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
	gap: var(--space-4) var(--space-5);
	margin: 0;
	padding: var(--space-5) 0;
	list-style: none;
	border-top: 1px solid var(--paper-300);
	border-bottom: 1px solid var(--paper-300);
}
body.woocommerce-order-received .wc-block-order-confirmation-summary-list-item {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	min-width: 0;
}
body.woocommerce-order-received .wc-block-order-confirmation-summary-list-item__key {
	font-size: var(--fs-xs);
	font-weight: 400;
	color: var(--ink-500);
}
body.woocommerce-order-received .wc-block-order-confirmation-summary-list-item__value {
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--ink-900);
	overflow-wrap: anywhere;
}

/* Le détail et l'adresse : en retrait, pour mémoire. */
body.woocommerce-order-received main h2.wp-block-heading {
	font-family: var(--font-display);
	font-weight: 400;
	color: var(--sauge-800);
	margin: 0 0 var(--space-4);
}
body.woocommerce-order-received .wc-block-order-confirmation-totals-wrapper {
	margin-bottom: var(--space-7);
}
body.woocommerce-order-received .wc-block-order-confirmation-totals__table {
	width: 100%;
	border-collapse: collapse;
	border: 0;
	font-size: var(--fs-sm);
	color: var(--ink-700);
}
body.woocommerce-order-received .wc-block-order-confirmation-totals__table th,
body.woocommerce-order-received .wc-block-order-confirmation-totals__table td {
	padding: var(--space-3) 0;
	border: 0;
	border-bottom: 1px solid var(--paper-200);
	background: transparent;
}
body.woocommerce-order-received .wc-block-order-confirmation-totals__table thead th {
	font-size: var(--fs-xs);
	font-weight: 400;
	color: var(--ink-500);
}
body.woocommerce-order-received .wc-block-order-confirmation-totals__table tfoot tr:last-child th,
body.woocommerce-order-received .wc-block-order-confirmation-totals__table tfoot tr:last-child td {
	font-size: var(--fs-md);
	font-weight: 600;
	color: var(--ink-900);
	border-bottom: 0;
}
body.woocommerce-order-received .wc-block-order-confirmation-totals__product a {
	color: var(--sauge-800);
	text-decoration-color: var(--laiton-500);
	text-underline-offset: 3px;
}
body.woocommerce-order-received .wc-block-order-confirmation-address-wrapper {
	gap: var(--space-5);
}
body.woocommerce-order-received .wc-block-order-confirmation-billing-address,
body.woocommerce-order-received .wc-block-order-confirmation-shipping-address {
	padding: 0;
	border: 0;
	font-size: var(--fs-sm);
	line-height: var(--lh-normal);
	color: var(--ink-700);
}