/**
 * Elsa Yoga — tunnel de commande.
 *
 * Chargée sur le panier, la commande et la page de confirmation.
 *
 * WooCommerce et Divi rendent ici trois blocs de nature très différente avec le
 * même bandeau bleu plein bord à bord : la confirmation d'ajout au panier, le
 * repli « déjà client » et le repli « code promo ». Rien ne dit lequel est une
 * information et lequel se clique, et le seul bouton visible, « Poursuivre les
 * achats », est le plus gros de la page alors qu'il en fait sortir.
 *
 * Cette feuille rétablit trois niveaux, et trois seulement :
 *
 *   1. Commander, l'orange plein de la charte. Une seule fois sur la page.
 *   2. Se connecter, appliquer un code : pilule bleue bordée, l'action existe
 *      mais elle ne dispute rien au paiement.
 *   3. Poursuivre les achats, ouvrir un repli, mot de passe perdu : des liens
 *      soulignés, qui se voient sans peser.
 *
 * L'orange vient de la charte, avec l'écart de contraste connu et assumé décrit
 * en tête de services.css. Le module s'aligne sur la décision prise pour tout
 * le site plutôt que d'en diverger.
 */

.woocommerce-checkout,
.woocommerce-cart,
.woocommerce-order-received {
	--ecb-bleu: #10069f;
	--ecb-orange: #f2782e;
	--ecb-orange-fonce: #dd651c;
	--ecb-encre: #22223b;
	--ecb-gris: #6b6b80;
	--ecb-bord: rgba(16, 6, 159, .16);
	--ecb-fond: #f2f2fb;
	--ecb-rayon: 12px;
	--ecb-colonne: 660px;
	--ecb-ease: cubic-bezier(.22, 1, .36, 1);
}

/* Une colonne de lecture -----------------------------------------------------
   Trois champs et un récapitulatif étalés sur 1080 px ne se lisent pas : l'œil
   traverse la page pour relier une étiquette à son champ. On ramène tout à une
   colonne, calée à gauche sur le titre de la page. */

.woocommerce-checkout .woocommerce-notices-wrapper,
.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout form.woocommerce-form-login,
.woocommerce-checkout form.checkout_coupon,
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
	max-width: var(--ecb-colonne);
	margin-right: auto;
}

/* Niveau 1 : la confirmation ------------------------------------------------
   Elle dit qu'une chose s'est passée. Elle prend le bleu plein des autres
   alertes du site (erreurs du tunnel, notices de Mon compte), pour qu'une
   même chose ait une même couleur d'une page à l'autre : une coche blanche,
   un texte blanc, et le lien de sortie réduit à ce qu'il est. */

.woocommerce .woocommerce-message,
.woocommerce-page .woocommerce-message {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 10px 16px;
	margin: 0 0 18px;
	padding: 17px 20px;
	border: 1px solid var(--ecb-bleu);
	border-radius: var(--ecb-rayon);
	/* Le customizer Divi peint les trois encadrés avec la couleur de ses
	   boutons, en « !important » sur « .woocommerce-message ». Rien d'autre
	   qu'un « !important » de spécificité au moins égale ne le bat, et c'est
	   la raison unique de sa présence dans ce fichier : on garde son bleu,
	   mais on le pose en variable pour que le texte et la coche le suivent. */
	background: var(--ecb-bleu) !important;
	color: #fff !important;
	font-size: 16px;
	line-height: 1.5;
	list-style: none;
}

/* La coche est une case du flux, pas une image de fond : centrée en fond, elle
   tombait au milieu du texte dès qu'il passait à trois lignes. */
.woocommerce .woocommerce-message::before,
.woocommerce-page .woocommerce-message::before {
	content: "";
	/* Divi masque en « !important » les pseudo-éléments des trois encadrés,
	   pour effacer les icônes de WooCommerce. Celle-ci est la nôtre. */
	display: block !important;
	/* WooCommerce la sort du flux en « absolute ; top: 1em ; left: 1.5em ».
	   Cette feuille lui mettait une taille de police nulle pour cacher le
	   glyphe : ces em valaient zéro et la coche se collait dans le coin de
	   l'encadré. Le « content » vide suffit à effacer le glyphe ; on la remet
	   dans le flux, où la grille flex la range devant le texte. */
	position: static;
	flex: 0 0 auto;
	width: 20px;
	/* Une ligne de texte de haut, pour que le dessin tombe au milieu de la
	   première ligne quelle que soit la taille que Divi impose au texte. */
	height: 1.5em;
	height: 1lh;
	margin: 0;
	padding: 0;
	border: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5l4 4 8-9'/%3E%3C/svg%3E") no-repeat center / 20px 20px;
	color: transparent;
}

.woocommerce .woocommerce-message::after,
.woocommerce-page .woocommerce-message::after {
	content: none;
	display: none;
}

/* Le texte occupe la ligne, le lien de sortie se range au bout. */
.woocommerce .woocommerce-message .ecy-woo-ajout {
	flex: 1 1 240px;
}

/* Les informations : « Votre panier est actuellement vide » et consorts ----
   Une annonce, comme la confirmation : même bleu plein, même texte blanc. */

.woocommerce .woocommerce-info,
.woocommerce-page .woocommerce-info {
	margin: 0 0 14px;
	padding: 15px 20px;
	border: 1px solid var(--ecb-bleu);
	border-radius: var(--ecb-rayon);
	/* Même !important du customizer, même raison : voir le message ci-dessus. */
	background: var(--ecb-bleu) !important;
	color: #fff !important;
	font-size: 15.5px;
	line-height: 1.5;
	list-style: none;
}

/* Niveau 3 : les replis -----------------------------------------------------
   « Déjà client ? » et « Code promo ? » sont des portes, pas des annonces :
   WooCommerce les sert pourtant dans le même encadré que les informations.
   Un panneau blanc bordé, et à l'intérieur un lien qui se voit être un lien. */

.woocommerce .woocommerce-form-login-toggle .woocommerce-info,
.woocommerce .woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-page .woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-page .woocommerce-form-coupon-toggle .woocommerce-info {
	border-color: var(--ecb-bord);
	background: #fff !important;
	color: var(--ecb-encre) !important;
}

.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-info::after,
.woocommerce-page .woocommerce-info::before {
	content: none;
	display: none;
}

.woocommerce .woocommerce-info a,
.woocommerce .woocommerce-message a:not(.button),
.woocommerce .lost_password a,
.woocommerce .woocommerce-message a.button.wc-forward {
	padding: 0;
	border: 0;
	background: none;
	color: var(--ecb-bleu);
	font-size: inherit;
	font-weight: 700;
	line-height: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	box-shadow: none;
	transition: text-decoration-thickness .15s ease;
}

.woocommerce .woocommerce-info a,
.woocommerce .woocommerce-message a {
	color: #fff !important;
}

.woocommerce .woocommerce-form-login-toggle .woocommerce-info a,
.woocommerce .woocommerce-form-coupon-toggle .woocommerce-info a {
	color: var(--ecb-bleu) !important;
}

.woocommerce .woocommerce-info a:hover,
.woocommerce .woocommerce-message a.button.wc-forward:hover,
.woocommerce .lost_password a:hover {
	background: none;
	color: var(--ecb-bleu);
	text-decoration-thickness: 2px;
	transform: none;
	box-shadow: none;
}

.woocommerce .woocommerce-message a.button.wc-forward::after,
.woocommerce .woocommerce-info a::after {
	content: none;
}

/* Sortir du tunnel est une porte de secours, pas une proposition : le lien
   passe après le message, en retrait, et non en gros bouton à sa droite. */
.woocommerce .woocommerce-message a.button.wc-forward {
	margin-left: 0;
	font-size: 14.5px;
	font-weight: 600;
	color: #fff !important;
	text-decoration-color: rgba(255, 255, 255, .6);
}

/* Les formulaires dépliés --------------------------------------------------- */

.woocommerce form.woocommerce-form-login,
.woocommerce form.checkout_coupon {
	margin: 0 0 18px;
	padding: 22px 22px 8px;
	border: 1px solid var(--ecb-bord);
	border-radius: var(--ecb-rayon);
	background: #fff;
}

.woocommerce form.checkout_coupon .form-row-first,
.woocommerce form.checkout_coupon .form-row-last {
	width: 100%;
	max-width: 340px;
	float: none;
}

/* Niveau 2 : les commandes secondaires -------------------------------------- */

.woocommerce form.woocommerce-form-login button.button,
.woocommerce form.checkout_coupon button.button,
.woocommerce .woocommerce-cart-form button.button:not(.alt) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 26px;
	min-height: 46px;
	border: 2px solid var(--ecb-bleu);
	border-radius: 999px;
	background: transparent;
	color: var(--ecb-bleu);
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	box-shadow: none;
	transition: background-color .2s ease, color .2s ease;
}

.woocommerce form.woocommerce-form-login button.button::after,
.woocommerce form.checkout_coupon button.button::after,
.woocommerce .woocommerce-cart-form button.button:not(.alt)::after {
	content: none;
}

.woocommerce form.woocommerce-form-login button.button:hover,
.woocommerce form.checkout_coupon button.button:hover,
.woocommerce .woocommerce-cart-form button.button:not(.alt):hover {
	background: var(--ecb-bleu);
	color: #fff;
}

/* Paiement express ----------------------------------------------------------
   Apple Pay et Google Pay dessinent leurs propres boutons : on ne peut que
   leur donner la bonne place. Pleine largeur, ils écrasaient le formulaire
   avant même qu'on l'ait lu. */

#wc-stripe-express-checkout-element {
	max-width: 520px;
	margin: 4px 0 0;
}

/* Stripe écrit « — OU — » en dur, deux tirets cadratins compris. On masque son
   texte, on tire un filet, et on repose le mot dessus. */
#wc-stripe-express-checkout-button-separator {
	position: relative;
	display: block;
	max-width: 520px;
	/* Stripe écrit « margin-top: 1.5em » en style en ligne. Le « font-size: 0 »
	   qui masque son texte ramène cet em à zéro, et la césure vient alors se
	   coller sous le dernier bouton. Un style en ligne ne se reprend qu'avec
	   « !important ». */
	margin: 34px 0 32px !important;
	padding: 0;
	border-top: 1px solid var(--ecb-bord);
	font-size: 0;
	line-height: 0;
	text-align: left;
}

#wc-stripe-express-checkout-button-separator::after {
	content: "ou";
	position: absolute;
	top: -9px;
	left: 0;
	padding: 0 14px 0 0;
	background: #fff;
	color: var(--ecb-gris);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 18px;
	text-transform: uppercase;
}

/* Titres -------------------------------------------------------------------- */

.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #payment .payment_box + h3 {
	margin: 0 0 14px;
	padding-bottom: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ecb-bleu);
}

.woocommerce-checkout #order_review_heading {
	margin-top: 34px;
}

/* La deuxième colonne ne porte plus aucun champ depuis que le tunnel se limite
   à l'email et au nom : un titre seul au-dessus du vide. */
.woocommerce-checkout .col2-set .col-2:not(:has(input, select, textarea)) {
	display: none;
}

.woocommerce-checkout .col2-set .col-1 {
	width: 100%;
	float: none;
}

/* Champs --------------------------------------------------------------------
   Divi peint les champs de WooCommerce en gris plein, sans bordure ni angle
   adouci, depuis une règle qui porte un identifiant. L'enveloppe de page en
   préfixe suffit à repasser devant, sans recourir à « !important ». */

.woocommerce-checkout .form-row {
	margin: 0 0 16px;
	padding: 0;
}

.woocommerce-checkout .form-row label {
	display: block;
	margin: 0 0 6px;
	color: var(--ecb-encre);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.3;
}

.woocommerce-checkout .form-row .required {
	color: #a8281f;
	text-decoration: none;
}

#page-container .woocommerce-checkout .form-row input.input-text,
#page-container .woocommerce-checkout .form-row textarea,
#page-container .woocommerce-checkout .form-row select,
#page-container .woocommerce form.woocommerce-form-login input.input-text,
#page-container .woocommerce form.checkout_coupon input.input-text {
	width: 100%;
	min-height: 48px;
	padding: 12px 16px;
	border: 1px solid var(--ecb-bord);
	border-radius: 10px;
	background: #fff;
	color: var(--ecb-encre);
	font-family: inherit;
	/* 16 px : en dessous, iOS agrandit la page à la mise au point du champ. */
	font-size: 16px;
	line-height: 1.3;
	transition: border-color .2s ease, box-shadow .2s ease;
}

#page-container .woocommerce-checkout .form-row input.input-text::placeholder,
#page-container .woocommerce form.woocommerce-form-login input.input-text::placeholder {
	color: var(--ecb-gris);
}

#page-container .woocommerce-checkout .form-row input.input-text:focus,
#page-container .woocommerce-checkout .form-row textarea:focus,
#page-container .woocommerce-checkout .form-row select:focus,
#page-container .woocommerce form.woocommerce-form-login input.input-text:focus,
#page-container .woocommerce form.checkout_coupon input.input-text:focus {
	border-color: var(--ecb-bleu);
	box-shadow: 0 0 0 3px rgba(16, 6, 159, .15);
	outline: none;
}

/* Prénom et nom tiennent sur une ligne : ce sont deux moitiés d'une même
   information, les séparer sur deux lignes allonge le formulaire pour rien. */
@media (min-width: 600px) {
	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 16px;
	}

	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row {
		grid-column: span 2;
		width: auto;
		float: none;
	}

	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-first,
	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-last {
		grid-column: span 1;
	}
}

/* Carte offerte ---------------------------------------------------------------
   La case sous les coordonnées, puis trois champs repliés tant qu'elle n'est
   pas cochée. Le script du tunnel pose et retire « hidden » ; la règle :has()
   fait la même chose sans lui. Voir ecy_woo_champs_cadeau(). */

.woocommerce-checkout .ecy-cadeau {
	margin: 4px 0 22px;
	padding: 0;
	border: 0;
}

.woocommerce-checkout .ecy-cadeau__case {
	margin: 0;
}

.woocommerce-checkout .ecy-cadeau__label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 15.5px;
	font-weight: 600;
	color: var(--ecb-encre);
	cursor: pointer;
}

#page-container .woocommerce-checkout .ecy-cadeau__label input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--ecb-bleu);
	flex: none;
}

.woocommerce-checkout .ecy-cadeau__champs {
	margin: 14px 0 0;
	padding: 18px 20px 6px;
	border: 1px solid var(--ecb-bord);
	border-radius: 12px;
	background: #f7f7fd;
}

.woocommerce-checkout .ecy-cadeau:has(#ecy_cadeau:checked) .ecy-cadeau__champs[hidden] {
	display: block;
}

.woocommerce-checkout .ecy-cadeau__intro {
	margin: 0 0 16px;
	padding: 0;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--ecb-gris);
}

#page-container .woocommerce-checkout .form-row textarea.ecy-cadeau__message {
	min-height: 96px;
	resize: vertical;
}

/* Récapitulatif -------------------------------------------------------------- */

.woocommerce-checkout #order_review {
	padding: 4px 22px 22px;
	border: 1px solid var(--ecb-bord);
	border-radius: var(--ecb-rayon);
	background: #fff;
}

.woocommerce-checkout table.shop_table {
	width: 100%;
	margin: 0;
	border: 0;
	border-radius: 0;
	border-collapse: collapse;
	font-size: 15.5px;
}

.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td {
	padding: 14px 0;
	border: 0;
	border-bottom: 1px solid var(--ecb-bord);
	color: var(--ecb-encre);
	text-align: left;
}

.woocommerce-checkout table.shop_table th.product-total,
.woocommerce-checkout table.shop_table td.product-total,
.woocommerce-checkout table.shop_table tfoot td {
	text-align: right;
	/* Chiffres de même chasse : les montants s'alignent en colonne. */
	font-variant-numeric: tabular-nums;
}

.woocommerce-checkout table.shop_table thead th {
	padding-top: 0;
	color: var(--ecb-gris);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.woocommerce-checkout table.shop_table tfoot tr.order-total th,
.woocommerce-checkout table.shop_table tfoot tr.order-total td {
	padding-bottom: 0;
	border-bottom: 0;
	font-size: 19px;
	font-weight: 800;
	color: var(--ecb-bleu);
}

.woocommerce-checkout table.shop_table tfoot tr.order-total td small {
	display: block;
	font-size: 13px;
	font-weight: 400;
	color: var(--ecb-gris);
}

/* Moyens de paiement --------------------------------------------------------- */

.woocommerce-checkout #payment {
	margin-top: 22px;
	padding: 0;
	border-radius: 0;
	background: transparent;
}

.woocommerce-checkout #payment ul.payment_methods {
	margin: 0 0 18px;
	padding: 6px 18px;
	border: 1px solid var(--ecb-bord);
	border-radius: var(--ecb-rayon);
	background: #fff;
}

.woocommerce-checkout #payment ul.payment_methods li {
	margin: 0;
	padding: 14px 0;
	border-bottom: 1px solid var(--ecb-bord);
	list-style: none;
	background: transparent;
}

.woocommerce-checkout #payment ul.payment_methods li:last-child {
	border-bottom: 0;
}

.woocommerce-checkout #payment ul.payment_methods label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 15.5px;
	font-weight: 600;
	color: var(--ecb-encre);
	cursor: pointer;
}

.woocommerce-checkout #payment div.payment_box {
	margin: 12px 0 0;
	padding: 16px;
	border-radius: 10px;
	background: #f7f7fb;
	color: var(--ecb-encre);
	font-size: 14.5px;
	line-height: 1.5;
}

.woocommerce-checkout #payment div.payment_box::before,
.woocommerce-checkout #payment div.payment_box::after {
	content: none;
	display: none;
}

.woocommerce-checkout #payment .woocommerce-privacy-policy-text,
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper {
	margin: 0 0 18px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--ecb-gris);
}

#page-container .woocommerce-checkout #payment .place-order {
	float: none;
	width: 100%;
	margin: 0;
	padding: 0;
	text-align: left;
}

#page-container .woocommerce-checkout #payment .place-order #place_order {
	width: 100%;
}

/* Les liens des mentions suivent la couleur de lien du tunnel, pas l'orange,
   qui ne sert qu'à l'action principale. */
.woocommerce-checkout #payment .woocommerce-privacy-policy-text a,
.woocommerce-checkout .woocommerce-terms-and-conditions-link,
.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text a {
	color: var(--ecb-bleu);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Note sous le champ email ---------------------------------------------------
   WooCommerce sert la description d'un champ en infobulle bleue qui n'apparaît
   qu'au focus. « Déjà élève ? » doit se lire avant de taper, pas pendant : une
   note posée sous le champ, dans le gris des mentions. */
.woocommerce-checkout #billing_email_field .woocommerce-input-wrapper .description {
	display: block;
	position: static;
	margin: 6px 0 0;
	padding: 0;
	background: none;
	color: var(--ecb-gris);
	font-size: 14px;
	line-height: 1.45;
	box-shadow: none;
}

.woocommerce-checkout #billing_email_field .woocommerce-input-wrapper .description::before {
	content: none;
}

/* Panier vide ----------------------------------------------------------------
   « Retour à la boutique » est le seul geste de la page : la pilule pleine
   bleue du module, celle du bouton de réservation. Le customizer Divi repeint
   « a.button » en blanc bordé de 4 px, à spécificité égale et après cette
   feuille : #page-container le bat, dans le même ordre que pour le bouton de
   commande plus bas. */
.woocommerce-cart #page-container a.button.wc-backward {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 28px;
	min-height: 46px;
	border: 0;
	border-radius: 999px;
	background: var(--ecb-bleu, #10069f);
	color: #fff;
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	box-shadow: 0 8px 22px rgba(16, 6, 159, .28);
	transition: transform .25s var(--ecb-ease, ease), box-shadow .25s ease, background-color .25s ease;
}

.woocommerce-cart #page-container a.button.wc-backward::after {
	content: none;
}

.woocommerce-cart #page-container a.button.wc-backward:hover,
.woocommerce-cart #page-container a.button.wc-backward:focus-visible {
	background: #0d0580;
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(16, 6, 159, .36);
}

.woocommerce-cart #page-container a.button.wc-backward:focus-visible {
	outline: 3px solid var(--ecb-bleu);
	outline-offset: 3px;
}

/* Le panier n'est pas une page du builder : rien n'y pose l'espace que les
   sections Divi laissent avant le pied de page, et le dernier bouton touchait
   le bandeau du footer. Même respiration en bas que le titre a en haut. */
.woocommerce-cart #main-content .container {
	padding-bottom: 64px;
}

/* Un produit sans visuel affiche l'image de substitution grise de WooCommerce,
   qui en vignette ressemble à une image cassée. La masquer ne touche pas les
   produits qui ont une vraie photo. */
.woocommerce-cart img.woocommerce-placeholder {
	display: none;
}

/* Niveau 1 : commander -------------------------------------------------------
   L'unique orange plein de la page, et le seul bouton à porter une ombre. */

/* Le « Valider la commande » du panier est un lien, pas un bouton : le
   customizer Divi le repeint en blanc à spécificité égale et passe après
   cette feuille. L'identifiant #page-container le bat. Il se place APRÈS
   .woocommerce-cart : cette classe-là n'existe que sur le body, qui contient
   l'identifiant et non l'inverse. */
.woocommerce #place_order,
.woocommerce-checkout #place_order,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce a.button.alt,
body .woocommerce #place_order,
body .woocommerce button.button.alt,
.woocommerce-cart #page-container a.checkout-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 36px;
	min-height: 54px;
	border: 0;
	border-radius: 999px;
	background: var(--ecb-orange, #f2782e);
	color: #fff;
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 8px 22px rgba(242, 120, 46, .34);
	transition: transform .25s var(--ecb-ease, ease), box-shadow .25s ease, background-color .25s ease;
}

/* Divi pose une pastille en pseudo-élément après ses boutons, et un
   remplissage de droite pour lui faire de la place. Sur une pilule centrée,
   elle décale le libellé. */
.woocommerce #place_order::after,
.woocommerce button.button.alt::after,
.woocommerce a.button.alt::after,
.woocommerce-cart #page-container a.checkout-button::after {
	content: none;
}

/* Même largeur que les boutons de paiement express qui le suivent : trois
   boutons de trois largeurs différentes dans la même colonne se lisent comme
   trois blocs sans rapport, alors qu'ils proposent le même geste. */
.woocommerce-cart #page-container a.checkout-button {
	width: 100%;
}

.woocommerce #place_order:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce a.button.alt:hover,
body .woocommerce #place_order:hover,
body .woocommerce button.button.alt:hover,
.woocommerce-cart #page-container a.checkout-button:hover {
	background: var(--ecb-orange-fonce, #dd651c);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(242, 120, 46, .44);
}

.woocommerce #place_order:active,
body .woocommerce #place_order:active {
	transform: translateY(0);
}

.woocommerce #place_order:focus-visible,
.woocommerce button.button.alt:focus-visible,
.woocommerce form.woocommerce-form-login button.button:focus-visible,
.woocommerce form.checkout_coupon button.button:focus-visible {
	outline: 3px solid var(--ecb-bleu);
	outline-offset: 3px;
}

.woocommerce #place_order:disabled,
.woocommerce #place_order[disabled] {
	opacity: .6;
	transform: none;
	box-shadow: none;
	cursor: default;
}

/* Écrans étroits ------------------------------------------------------------- */

@media (max-width: 599px) {
	.woocommerce .woocommerce-message {
		padding: 15px 16px;
	}

	.woocommerce-checkout #order_review,
	.woocommerce-checkout #payment ul.payment_methods {
		padding-left: 16px;
		padding-right: 16px;
	}

	.woocommerce #place_order,
	.woocommerce button.button.alt {
		width: 100%;
		padding: 16px 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce #place_order,
	.woocommerce button.button.alt {
		transition: none;
	}
	.woocommerce #place_order:hover,
	.woocommerce button.button.alt:hover {
		transform: none;
	}
}

/* Tunnel fermé ---------------------------------------------------------------
   Sur la page de commande, le header et le corps du pied de page ne sont pas
   rendus (voir tunnel.php). Ce bloc habille ce qui les remplace : la barre
   logo + paiement sécurisé, l'échéance de la place gardée, la réassurance
   sous le bouton, et le bloc « Voir mes cours » de la confirmation. */

/* Le header fixe a disparu : aucun décalage à conserver. Divi et son JS
   peuvent tenter d'en poser un, l'!important reprend la main sur le style en
   ligne qu'écrit le script. */
.ecy-tunnel #page-container {
	padding-top: 0 !important;
}

.ecy-tunnel-tete {
	background: #fff;
	border-bottom: 1px solid var(--ecb-bord, rgba(16, 6, 159, .16));
}

.ecy-tunnel-tete__barre {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	max-width: 1080px;
	margin: 0 auto;
	padding: 14px 24px;
}

.ecy-tunnel-tete__logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--ecb-bleu, #10069f);
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 17px;
	font-weight: 700;
	text-decoration: none;
}

.ecy-tunnel-tete__logo img {
	display: block;
	width: 36px;
	height: 36px;
}

.ecy-tunnel-tete__securite {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--ecb-gris, #6b6b80);
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}

.ecy-tunnel-tete__cadenas {
	flex: none;
	color: var(--ecb-bleu, #10069f);
}

/* La même palette ambre que « Place gardée, à régler » sur le calendrier :
   l'information suit la personne d'une page à l'autre sous la même couleur. */
.ecy-tunnel-tete__place {
	margin: 0;
	padding: 9px 24px;
	background: #fff4ec;
	color: #8a4416;
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 14.5px;
	font-weight: 600;
	text-align: center;
}

/* Sans le corps du pied de page, seul le bandeau légal reste : rien à
   espacer au-dessus de lui. */
.ecy-tunnel #main-footer {
	padding-top: 0;
}

.ecy-tunnel-reassurance {
	margin: 12px 0 0;
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 13.5px;
	color: var(--ecb-gris, #6b6b80);
}

/* Confirmation : le chemin vers ses cours, avant le récapitulatif. */
.ecy-tunnel-merci {
	max-width: var(--ecb-colonne, 660px);
	margin: 0 0 26px;
	padding: 20px 22px;
	border: 1px solid var(--ecb-bord, rgba(16, 6, 159, .16));
	border-radius: var(--ecb-rayon, 12px);
	background: var(--ecb-fond, #f2f2fb);
}

.ecy-tunnel-merci__texte {
	margin: 0 0 14px;
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 16px;
	color: var(--ecb-encre, #22223b);
}

.ecy-tunnel-merci__bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 30px;
	min-height: 48px;
	border-radius: 999px;
	background: var(--ecb-orange, #f2782e);
	color: #fff;
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	box-shadow: 0 8px 22px rgba(242, 120, 46, .34);
	transition: background-color .2s ease;
}

.ecy-tunnel-merci__bouton:hover {
	background: var(--ecb-orange-fonce, #dd651c);
	color: #fff;
}

@media (max-width: 599px) {
	.ecy-tunnel-tete__barre {
		padding: 12px 16px;
	}

	.ecy-tunnel-tete__logo {
		font-size: 15.5px;
	}

	.ecy-tunnel-tete__logo img {
		width: 32px;
		height: 32px;
	}

	.ecy-tunnel-tete__place {
		padding: 9px 16px;
		font-size: 13.5px;
	}
}