/**
 * Page produit « formation à sessions » — section 1 (ancre) et section 2 (étapes + résumé).
 * Voir inc/formation-sessions/front.php
 *
 * Reprend les codes du site : noir #050505, cartes blanches à coins de 8px, Poppins,
 * boutons Anton en dégradé (child-style.css, bouton panier des produits variables).
 */

.aec-fs-product {
	--aec-fs-ink: #050505;
	--aec-fs-muted: #6b7280;
	--aec-fs-line: #e3e3e3;
	--aec-fs-card: #fff;
	--aec-fs-radius: 8px;
	--aec-fs-ok: #1e7a4f;
	--aec-fs-ok-bg: #e6f4ec;
	--aec-fs-low: #b45309;
	--aec-fs-low-bg: #fdf0e1;
	--aec-fs-error: #b32d2e;
}

/* --- Descriptions courte et longue — listes numérotées en 01 / 02 / 03 ------------------ */
/* Les listes à puces gardent le style par défaut ; seules les <ol> sont renumérotées.
   Blocksy rend la description longue dans #tab-description, sans la classe WooCommerce. */

.aec-fs-product .woocommerce-product-details__short-description ol,
.aec-fs-product .woocommerce-Tabs-panel--description ol,
.aec-fs-product #tab-description ol {
	margin: 1.25em 0;
	padding: 0;
	list-style: none;
	counter-reset: aec-fs-point;
}

.aec-fs-product .woocommerce-product-details__short-description ol > li,
.aec-fs-product .woocommerce-Tabs-panel--description ol > li,
.aec-fs-product #tab-description ol > li {
	position: relative;
	margin: 0 0 0.6em;
	padding-left: 2.25em;
	counter-increment: aec-fs-point;
}

.aec-fs-product .woocommerce-product-details__short-description ol > li::before,
.aec-fs-product .woocommerce-Tabs-panel--description ol > li::before,
.aec-fs-product #tab-description ol > li::before {
	content: counter(aec-fs-point, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0.15em;
	font-size: 0.75em;
	color: var(--aec-fs-muted);
	letter-spacing: 0.05em;
}

/* --- « 3 sessions » derrière le prix ---------------------------------------------------- */

.aec-fs-product .price:has(.aec-fs-price-meta) {
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
}

.aec-fs-price-meta {
	color: var(--aec-fs-muted);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* --- Section 1 : ancre « Choisir mes dates » ------------------------------------------ */

.aec-fs-cta-box {
	display: grid;
	gap: 0.6rem;
	max-width: 32rem;
}

/* Les !important sur la typo : Blocksy style .single_add_to_cart_button par variables de thème. */
.aec-fs-cta,
.aec-fs-form .single_add_to_cart_button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 48px !important;
	margin: 0;
	padding: 0.75rem 1.25rem;
	line-height: 1em !important;
	border: 1px solid var(--aec-fs-ink);
	border-radius: var(--aec-fs-radius);
	background: linear-gradient(248deg, var(--Gris-500, #A1A6AB) 13.04%, var(--Black, #050505) 62.46%) !important;
	box-shadow: 0 17px 5px 0 rgba(0, 0, 0, 0.00), 0 11px 4px 0 rgba(0, 0, 0, 0.01), 0 6px 4px 0 rgba(0, 0, 0, 0.05), 0 3px 3px 0 rgba(0, 0, 0, 0.09), 0 1px 2px 0 rgba(0, 0, 0, 0.10);
	color: #fff !important;
	font-family: 'Anton', sans-serif !important;
	font-size: 1.05rem !important;
	font-weight: 400 !important;
	letter-spacing: 0.02em;
	text-transform: uppercase !important;
	text-decoration: none;
	transition: 0.3s ease-in-out;
}

.aec-fs-cta:hover,
.aec-fs-cta:focus-visible,
.aec-fs-form .single_add_to_cart_button:not(:disabled):hover {
	background: var(--aec-fs-ink) !important;
}

.aec-fs-form .single_add_to_cart_button:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.aec-fs-cta-note {
	margin: 0;
	font-size: 0.8rem;
	color: var(--aec-fs-muted);
}

/* Aucune date à venir : message à la place de l'ancre. */
.aec-fs-soon {
	display: inline-block;
	margin: 0;
	padding: 12px 18px;
	border: 1px solid var(--aec-fs-line);
	border-radius: var(--aec-fs-radius);
	background: var(--aec-fs-card);
	font-weight: 500;
}

/* --- Section 2 : mise en page ---------------------------------------------------------- */

.aec-fs-booking {
	padding-top: 72px;
	padding-bottom: 72px;
	scroll-margin-top: calc(var(--header-h, 90px) + 16px);
}

.aec-fs-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
	gap: 40px;
	align-items: start;
	margin: 0;
}

/* Le clearfix de WooCommerce sur form.cart occuperait la première case de la grille. */
.aec-fs-form::before,
.aec-fs-form::after {
	content: none !important;
	display: none !important;
}

.aec-fs-title {
	margin: 0 0 0.25em;
	font-size: 1.5rem;
}

.aec-fs-intro {
	margin: 0 0 1.5rem;
	color: var(--aec-fs-muted);
}

/* --- Étapes ----------------------------------------------------------------------------- */

.aec-fs-step {
	margin-bottom: 12px;
	border: 1px solid var(--aec-fs-line);
	border-radius: var(--aec-fs-radius);
	background: var(--aec-fs-card);
	scroll-margin-top: calc(var(--header-h, 90px) + 16px);
}

.aec-fs-step__head {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 18px 20px;
	border: 0;
	background: none;
	color: var(--aec-fs-ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.aec-fs-step__head:disabled {
	cursor: default;
}

.aec-fs-step__num {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--aec-fs-ink);
	color: #fff;
	font-size: 0.8rem;
	font-weight: 600;
}

.aec-fs-step__text {
	display: grid;
	flex: 1 1 auto;
	gap: 2px;
}

.aec-fs-step__name {
	font-weight: 600;
}

.aec-fs-step__status {
	font-size: 0.85rem;
	color: var(--aec-fs-muted);
}

.aec-fs-step__status::first-letter {
	text-transform: uppercase;
}

.aec-fs-step__status:empty,
.aec-fs-step__edit {
	display: none;
}

.aec-fs-step[data-state="done"] .aec-fs-step__edit {
	display: inline;
	font-size: 0.85rem;
	text-decoration: underline;
}

/* Étape faite : le numéro laisse place à la coche. */
.aec-fs-step__check {
	display: none;
	width: 16px;
	height: 16px;
}

.aec-fs-step[data-state="done"] .aec-fs-step__num {
	background: var(--aec-fs-ok);
}

.aec-fs-step[data-state="done"] .aec-fs-step__digit {
	display: none;
}

.aec-fs-step[data-state="done"] .aec-fs-step__check {
	display: block;
}

.aec-fs-step[data-state="done"] .aec-fs-step__status {
	color: var(--aec-fs-ink);
}

.aec-fs-step[data-state="locked"] {
	background: rgba(255, 255, 255, 0.55);
}

.aec-fs-step[data-state="locked"] .aec-fs-step__num {
	background: var(--aec-fs-line);
	color: var(--aec-fs-muted);
}

.aec-fs-step[data-state="locked"] .aec-fs-step__name {
	color: var(--aec-fs-muted);
	font-weight: 500;
}

.aec-fs-step[data-state="locked"] .aec-fs-step__status::before {
	content: "🔒 ";
	font-size: 0.75em;
}

.aec-fs-step__body {
	padding: 0 20px 20px;
}

/* Sans JS, rien ne s'ouvre ni ne s'active : on n'affiche que le message. */
.aec-fs-form:not(.is-ready) .aec-fs-step__body {
	display: none;
}

/* --- Tableau des dates ------------------------------------------------------------------ */

.aec-fs-dates {
	margin: 0;
	padding: 0;
	border: 1px solid var(--aec-fs-line);
	border-radius: var(--aec-fs-radius);
	overflow: hidden;
}

.aec-fs-dates__head,
.aec-fs-date {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr) auto;
	gap: 14px;
	align-items: center;
	padding: 12px 16px;
}

.aec-fs-dates__head {
	background: #f7f7f7;
	color: var(--aec-fs-muted);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.aec-fs-dates__head span:first-child {
	grid-column: 2;
}

.aec-fs-date {
	margin: 0;
	border-top: 1px solid var(--aec-fs-line);
	cursor: pointer;
	transition: background 0.15s ease;
}

.aec-fs-date[hidden] {
	display: none;
}

.aec-fs-date:hover {
	background: #fafafa;
}

.aec-fs-date:has(input:checked) {
	background: #f3f3f3;
}

.aec-fs-date input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--aec-fs-ink);
}

.aec-fs-date__label {
	font-weight: 500;
}

.aec-fs-date__label::first-letter {
	text-transform: uppercase;
}

.aec-fs-date.is-full {
	cursor: not-allowed;
}

.aec-fs-date.is-full .aec-fs-date__label {
	color: var(--aec-fs-muted);
	text-decoration: line-through;
}

.aec-fs-date.is-full:hover {
	background: none;
}

/* --- Badge places ----------------------------------------------------------------------- */

.aec-fs-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	white-space: nowrap;
}

.aec-fs-badge:empty {
	display: none;
}

.aec-fs-badge::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.aec-fs-badge.is-ok {
	background: var(--aec-fs-ok-bg);
	color: var(--aec-fs-ok);
}

.aec-fs-badge.is-low {
	background: var(--aec-fs-low-bg);
	color: var(--aec-fs-low);
}

.aec-fs-badge.is-full {
	background: #eee;
	color: var(--aec-fs-muted);
}

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

.aec-fs-hint:empty,
.aec-fs-incomplete:empty {
	display: none;
}

.aec-fs-hint,
.aec-fs-incomplete,
.aec-fs-noscript {
	margin: 0.75rem 0 0;
	font-size: 0.875em;
	line-height: 1.4;
}

.aec-fs-hint,
.aec-fs-noscript {
	color: var(--aec-fs-error);
}

.aec-fs-incomplete {
	margin: 0 0 0.75rem;
	color: var(--aec-fs-muted);
}

.aec-fs-back {
	padding: 0;
	border: 0;
	background: none;
	color: var(--aec-fs-ink);
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

/* --- Résumé ----------------------------------------------------------------------------- */

.aec-fs-summary {
	position: sticky;
	top: calc(var(--header-h, 90px) + 24px);
}

.aec-fs-summary__card {
	padding: 24px;
	border: 1px solid var(--aec-fs-line);
	border-radius: var(--aec-fs-radius);
	background: var(--aec-fs-card);
}

.aec-fs-summary__title {
	margin: 0 0 0.75rem;
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.3;
}

.aec-fs-summary__price {
	display: flex;
	margin: 0 0 1.25rem;
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--aec-fs-ink);
}

.aec-fs-summary__list {
	margin: 0 0 1.25rem;
	padding: 1rem 0 0;
	border-top: 1px solid var(--aec-fs-line);
	list-style: none;
}

.aec-fs-summary__list li {
	display: grid;
	gap: 2px;
	margin: 0 0 0.75rem;
}

.aec-fs-summary__name {
	font-size: 0.85rem;
	color: var(--aec-fs-muted);
}

.aec-fs-summary__value {
	font-weight: 500;
}

.aec-fs-summary__value::first-letter {
	text-transform: uppercase;
}

.aec-fs-summary__value.is-empty {
	font-style: italic;
	font-weight: 400;
	color: var(--aec-fs-muted);
}

/* --- Mobile ----------------------------------------------------------------------------- */

@media (max-width: 899px) {
	.aec-fs-form {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.aec-fs-summary {
		position: static;
	}

	.aec-fs-dates {
		border: 0;
		overflow: visible;
	}

	.aec-fs-dates__head {
		display: none;
	}

	.aec-fs-date {
		margin-bottom: 8px;
		border: 1px solid var(--aec-fs-line);
		border-radius: var(--aec-fs-radius);
	}

	.aec-fs-step__head,
	.aec-fs-step__body {
		padding-left: 14px;
		padding-right: 14px;
	}
}

/* --- Conditions à cocher ---------------------------------------------------------------- */

.aec-fs-conditions {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	border: 0;
}

.aec-fs-condition {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	margin: 0;
	padding: 12px 16px;
	border: 1px solid var(--aec-fs-line);
	border-radius: var(--aec-fs-radius);
	cursor: pointer;
	line-height: 1.45;
}

.aec-fs-condition:has(input:checked) {
	background: #f3f3f3;
}

.aec-fs-condition input {
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: var(--aec-fs-ink);
}

/* --- En savoir plus ----------------------------------------------------------------------- */

.aec-fs-infos {
	margin-top: 48px;
}

.aec-fs-infos .aec-fs-title {
	margin-bottom: 1rem;
}

.aec-fs-info {
	border: 1px solid var(--aec-fs-line);
	border-bottom-width: 0;
	background: var(--aec-fs-card);
}

.aec-fs-info:first-of-type {
	border-radius: var(--aec-fs-radius) var(--aec-fs-radius) 0 0;
}

.aec-fs-info:last-of-type {
	border-bottom-width: 1px;
	border-radius: 0 0 var(--aec-fs-radius) var(--aec-fs-radius);
}

.aec-fs-info:only-of-type {
	border-radius: var(--aec-fs-radius);
}

.aec-fs-info summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.aec-fs-info summary::-webkit-details-marker {
	display: none;
}

.aec-fs-info summary::after {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-3px);
	transition: transform 0.2s ease;
}

.aec-fs-info[open] summary::after {
	transform: rotate(-135deg) translateY(-3px);
}

.aec-fs-info__content {
	padding: 0 20px 18px;
}

.aec-fs-info__content > :last-child {
	margin-bottom: 0;
}