.portail-hero {
	padding: 100px 32px 48px;
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
}

.portail-hero h1 {
	font-size: 44px;
	margin: 0 0 16px;
}

.portail-hero p {
	color: var(--text-muted);
	font-size: 16px;
	line-height: 1.6;
}

/* ============================================================
   Logged-out gate screen (my-account.php) — heading + a single card
   pointing to the dedicated /connexion/ and /creer-un-compte/ pages.
   ============================================================ */
.portail-gate {
	padding: 20px 32px 100px;
}

.portail-gate__card {
	max-width: 640px;
	margin: 0 auto;
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-panel);
	padding: 56px 48px;
	text-align: center;
}

.portail-gate__icon {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	border: 2px solid var(--accent);
	margin: 0 auto 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--accent);
}

.portail-gate__card h2 {
	font-size: 22px;
	margin: 0 0 14px;
}

.portail-gate__card p {
	color: var(--text-muted);
	font-size: 15px;
	line-height: 1.6;
	max-width: 420px;
	margin: 0 auto 32px;
}

.portail-gate__actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 16px;
}

/* ============================================================
   Auth pages (page-connexion.php / page-creer-un-compte.php) — the
   real WooCommerce login/register forms, POSTing directly to
   WC_Form_Handler::process_login() / process_registration() with the
   exact field names + nonce actions those expect. Only the markup and
   styling are custom, with zero WC CSS classes to fight for control of.
   Shares the .portail-gate__card shell above for a consistent look.
   ============================================================ */
.portail-auth__social {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 28px;
}

.portail-auth__social-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	background: transparent;
	border: 2px solid var(--border-outline);
	border-radius: var(--radius-btn);
	padding: 13px;
	color: var(--text-heading);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
}

.portail-auth__social-btn:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.portail-auth__social-btn:disabled {
	color: var(--text-body-dim);
	cursor: not-allowed;
}

.portail-auth__social-btn:disabled:hover {
	border-color: var(--border-outline);
	color: var(--text-body-dim);
}

.portail-auth__social-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

/* Keep the button's own dimmed/disabled state legible instead of a
   bright brand-colored logo sitting on otherwise-grayed-out "Bientôt
   disponible" text. */
.portail-auth__social-btn:disabled .portail-auth__social-icon {
	filter: grayscale(1);
	opacity: 0.5;
}

.portail-auth__divider {
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--text-faint);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	margin-bottom: 28px;
}

.portail-auth__divider::before,
.portail-auth__divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--border);
}

.portail-auth__form {
	text-align: left;
}

.portail-auth__switch {
	text-align: center;
	font-size: 14px;
	color: var(--text-muted);
	margin-top: 24px;
}

.portail-auth__switch a {
	color: var(--accent);
	font-weight: 700;
}

.revive-auth__field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 20px;
}

.revive-auth__field label {
	color: var(--text-body-dim);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

.revive-auth__field .required {
	color: var(--accent);
}

.revive-auth__field input {
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-input);
	padding: 14px;
	color: var(--text-heading);
	font-size: 15px;
	font-family: var(--font-body);
	width: 100%;
	transition: border-color 0.15s ease;
}

.revive-auth__field input:focus {
	outline: none;
	border-color: var(--accent);
}

.revive-auth__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 24px;
	font-size: 13px;
}

.revive-auth__remember {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--text-body);
	cursor: pointer;
}

.revive-auth__remember input {
	accent-color: var(--accent);
	width: 16px;
	height: 16px;
	cursor: pointer;
}

.revive-auth__meta a {
	color: var(--accent);
}

.revive-auth__hint,
.revive-auth__privacy {
	color: var(--text-muted);
	font-size: 12px;
	line-height: 1.6;
	margin: 0 0 20px;
}

.revive-auth__submit {
	display: block;
	width: 100%;
	background: var(--accent);
	color: var(--bg);
	font-weight: 800;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	padding: 15px;
	border: none;
	border-radius: var(--radius-btn);
	cursor: pointer;
}

.revive-auth__submit:hover {
	background: var(--accent-hover);
}

.revive-auth__submit--outline {
	background: transparent;
	border: 2px solid var(--border-outline);
	color: var(--text-heading);
	padding: 13px;
}

.revive-auth__submit--outline:hover {
	border-color: var(--accent);
	color: var(--accent);
	background: transparent;
}

/* WooCommerce notices (login errors, "account created", "confirm your
   email address", etc.) — printed either above this template's markup by
   wc_print_notices(), or inline by WooCommerce's own account templates
   (e.g. the account/order-linking prompt hooked onto
   woocommerce_before_account_orders). WooCommerce's bundled stylesheet
   fights for control of these same classes — text + an embedded CTA
   link/button, sometimes with an icon element — and its exact markup
   isn't reliably guessable across versions. Rather than chase WC's exact
   class names, flex-column stacks WHATEVER children are actually in
   there (a text node + any link/button, regardless of its class) onto
   clean separate lines, and every link/button inside is styled uniformly
   as one solid CTA — in practice these notices only ever carry a single
   action, never a plain inline text link. !important throughout to beat
   WooCommerce's own CSS (same reason forms.css uses !important against
   WPForms' bundled CSS). */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 12px;
	max-width: 760px;
	margin: 24px auto 0;
	padding: 18px 20px !important;
	background: var(--bg-card) !important;
	border: 1px solid var(--border) !important;
	border-left: 4px solid var(--accent) !important;
	border-radius: var(--radius-card) !important;
	color: var(--text-body) !important;
	font-size: 14px;
	line-height: 1.6;
	list-style: none;
}

.portail-shell__content .woocommerce-error,
.portail-shell__content .woocommerce-message,
.portail-shell__content .woocommerce-info {
	max-width: none;
	margin: 0 0 20px;
}

.woocommerce-error::before,
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error img,
.woocommerce-message img,
.woocommerce-info img,
.woocommerce-error svg,
.woocommerce-message svg,
.woocommerce-info svg {
	display: none !important;
	content: none !important;
}

.woocommerce-error {
	border-left-color: #c0392b !important;
}

/* WooCommerce's "error" notice type sometimes renders as <ul><li> instead
   of a plain <div> — apply the same flex-column stacking one level down
   in that case so text + an embedded link still split onto clean lines. */
.woocommerce-error li {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-error a,
.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error button,
.woocommerce-message button,
.woocommerce-info button {
	display: inline-block !important;
	background: var(--accent) !important;
	color: var(--bg) !important;
	font-weight: 800 !important;
	font-size: 12px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.4px;
	padding: 10px 18px !important;
	border: none !important;
	border-radius: var(--radius-btn);
	text-decoration: none !important;
	margin: 0 !important;
	cursor: pointer;
}

.woocommerce-error a:hover,
.woocommerce-message a:hover,
.woocommerce-info a:hover,
.woocommerce-error button:hover,
.woocommerce-message button:hover,
.woocommerce-info button:hover {
	background: var(--accent-hover) !important;
}

.portail-features {
	padding: 20px 32px 100px;
	max-width: 900px;
	margin: 0 auto;
}

.portail-features h3 {
	font-size: 20px;
	text-align: center;
	margin: 0 0 36px;
}

.portail-features__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 28px;
}

.portail-feature {
	text-align: center;
}

.portail-feature__icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 2px solid var(--accent);
	margin: 0 auto 14px;
}

.portail-feature p {
	color: var(--text-body);
	font-size: 15px;
}

/* Shop/gym view-switch toggle (my-account.php) — same markup, light
   equivalent in assets/css/shop-account.css. */
.portail-view-switch {
	max-width: 1800px;
	margin: 24px auto 0;
	padding: 0 32px;
	display: flex;
	gap: 8px;
}

.portail-view-switch__link {
	padding: 8px 16px;
	border: 1px solid var(--border);
	border-radius: var(--radius-btn);
	color: var(--text-muted);
	font-size: 13px;
	font-weight: 600;
	background: var(--bg-card);
}

.portail-view-switch__link:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.portail-view-switch__link.is-active {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--bg);
	font-weight: 800;
}

/* ============================================================
   Logged-in account shell: sidebar (navigation.php override) +
   content panel (dashboard.php / abonnement.php / reservations.php
   overrides, or WooCommerce's own orders/payment-methods/edit-account
   templates reskinned below).
   ============================================================ */
.portail-shell {
	padding: 40px 32px 100px;
	max-width: 1800px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 32px;
	align-items: start;
}

@media (max-width: 780px) {
	.portail-shell {
		grid-template-columns: 1fr;
	}
}

.portail-sidebar-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	position: sticky;
	top: 90px;
}

.portail-sidebar-nav a {
	display: block;
	padding: 12px 16px;
	border-left: 3px solid transparent;
	border-radius: 0 var(--radius-btn) var(--radius-btn) 0;
	color: var(--text-body-strong);
	font-size: 14px;
	font-weight: 600;
}

.portail-sidebar-nav a:hover {
	color: var(--accent);
}

.portail-sidebar-nav li.is-active a {
	border-left-color: var(--accent);
	color: var(--accent);
	background: var(--bg-card);
}

@media (max-width: 780px) {
	.portail-sidebar-nav ul {
		flex-direction: row;
		overflow-x: auto;
		position: static;
		gap: 6px;
		padding-bottom: 10px;
	}

	.portail-sidebar-nav a {
		border-left: none;
		border-bottom: 3px solid transparent;
		border-radius: 0;
		padding: 10px 14px;
		white-space: nowrap;
	}

	.portail-sidebar-nav li.is-active a {
		border-bottom-color: var(--accent);
	}
}

.portail-shell__content {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-panel);
	padding: 40px;
	color: var(--text-body);
	min-width: 0;
}

/* Dashboard content sits directly on the page background — individual
   stat cards / panels below already carry their own borders, so an outer
   bounding card here would just double up the framing and read as
   cramped instead of the open, full-width dashboard layout it's meant to be. */
.portail-shell__content--dashboard {
	background: none;
	border: none;
	padding: 0;
	color: var(--text-body);
}

/* :not(.btn) so this plain-link color can't outrank .btn-solid/.btn-outline's
   own text color — a class selector plus element selector (.portail-shell__content a)
   is MORE specific than a single class (.btn-solid), so without this
   exclusion a solid green button's dark text loses to this rule and
   renders invisible (green text on a green background). */
.portail-shell__content a:not(.btn) {
	color: var(--accent);
}

.portail-shell__content h2 {
	font-size: 20px;
	margin: 0 0 16px;
}

/* Dashboard overview (dashboard.php) */
.portail-dashboard-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom: 28px;
}

.portail-welcome h2 {
	margin: 0 0 8px;
}

.portail-welcome p {
	color: var(--text-muted);
	font-size: 15px;
	margin: 0;
	max-width: 480px;
}

/* Four at-a-glance stat cards. */
.portail-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
	margin-bottom: 28px;
}

.portail-stat {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-card);
	padding: 24px;
}

.portail-stat__label {
	display: block;
	color: var(--text-faint);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	margin-bottom: 10px;
}

.portail-stat__value {
	display: block;
	font-family: var(--font-heading);
	color: var(--text-heading);
	font-size: 18px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

.portail-stat__value--muted {
	color: var(--text-muted);
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
}

.portail-stat__link {
	display: inline-block;
	color: var(--accent);
	font-size: 12px;
	font-weight: 700;
	margin-top: 10px;
}

/* Reservations preview + quick-access, side by side. */
.portail-dashboard-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 20px;
	margin-bottom: 28px;
	align-items: start;
}

@media (max-width: 780px) {
	.portail-dashboard-grid {
		grid-template-columns: 1fr;
	}
}

.portail-panel {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-card);
	padding: 24px;
}

.portail-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 20px;
}

.portail-panel__header h3 {
	font-size: 16px;
	margin: 0;
}

.portail-panel__header a {
	color: var(--accent);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

.portail-panel__empty {
	text-align: center;
	padding: 32px 0;
}

.portail-panel__empty-icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 2px solid var(--accent);
	margin: 0 auto 20px;
}

.portail-panel__empty p {
	color: var(--text-muted);
	font-size: 14px;
	line-height: 1.6;
	max-width: 380px;
	margin: 0 auto 20px;
}

.portail-quicklinks {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

.portail-quicklink {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
	padding: 20px 12px;
	background: var(--bg-panel-alt);
	border: 1px solid var(--border);
	border-radius: var(--radius-card);
	color: var(--text-body-strong);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.portail-quicklink:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.portail-quicklink__icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 2px solid var(--accent);
}

/* Subscription status card — accent-tinted, matches the woocommerce-message
   left-border treatment already used for WC notices elsewhere on this page. */
.portail-subscription-card {
	background: rgba(139, 197, 63, 0.08);
	border: 1px solid var(--border);
	border-left: 4px solid var(--accent);
	border-radius: var(--radius-card);
	padding: 24px;
}

.portail-subscription-card h3 {
	font-size: 16px;
	margin: 0 0 10px;
}

.portail-subscription-card p {
	color: var(--text-muted);
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 12px;
}

.portail-subscription-card > a {
	color: var(--accent);
	font-weight: 700;
	font-size: 14px;
}

/* Placeholder panels (abonnement.php / reservations.php) */
.portail-stub {
	text-align: center;
	padding: 20px 0;
}

.portail-stub__icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: 3px solid var(--accent);
	margin: 0 auto 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--accent);
}

.portail-stub h2 {
	margin: 0 0 12px;
}

.portail-stub p {
	color: var(--text-muted);
	font-size: 15px;
	max-width: 440px;
	margin: 0 auto 28px;
}

/* Orders list (woocommerce/myaccount/orders.php override — custom
   markup, real WC order data/actions). */
.portail-orders-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.portail-orders-table th {
	text-align: left;
	border-bottom: 1px solid var(--border);
	padding: 12px 10px;
	color: var(--text-heading);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

.portail-orders-table td {
	border-bottom: 1px solid var(--border-row);
	padding: 14px 10px;
	color: var(--text-body);
	vertical-align: middle;
}

.portail-orders-table td a:not(.btn) {
	color: var(--accent);
	font-weight: 700;
}

.portail-orders-table__count {
	display: block;
	color: var(--text-muted);
	font-size: 12px;
	margin-top: 2px;
}

.portail-orders-table__action {
	font-size: 12px;
	padding: 8px 14px;
	margin-right: 6px;
	white-space: nowrap;
}

.portail-orders-pagination {
	display: flex;
	justify-content: space-between;
	margin-top: 24px;
	font-size: 13px;
}

.portail-orders-pagination a {
	color: var(--accent);
	font-weight: 700;
}

@media (max-width: 640px) {
	.portail-orders-table thead {
		display: none;
	}

	.portail-orders-table,
	.portail-orders-table tbody,
	.portail-orders-table tr,
	.portail-orders-table td {
		display: block;
		width: 100%;
	}

	.portail-orders-table tr {
		border-bottom: 1px solid var(--border);
		padding: 12px 0;
	}

	.portail-orders-table td {
		border-bottom: none;
		padding: 4px 0;
	}

	.portail-orders-table td::before {
		content: attr(data-label);
		display: block;
		color: var(--text-faint);
		font-size: 11px;
		text-transform: uppercase;
		letter-spacing: 0.4px;
		margin-bottom: 2px;
	}
}

/* Reskin for WooCommerce's own templates still rendered inside the
   content panel: single order detail (view-order.php), payment-methods,
   edit-account form. CSS-only — the underlying WC logic (token
   add/delete, validation/nonces) is untouched. */
.portail-shell__content table.shop_table {
	width: 100%;
	border-collapse: collapse;
	color: var(--text-body);
	font-size: 14px;
}

.portail-shell__content table.shop_table th {
	text-align: left;
	border-bottom: 1px solid var(--border);
	padding: 12px 10px;
	color: var(--text-heading);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

.portail-shell__content table.shop_table td {
	border-bottom: 1px solid var(--border-row);
	padding: 12px 10px;
}

.portail-shell__content mark.default {
	background: var(--accent);
	color: var(--bg);
	font-size: 11px;
	text-transform: uppercase;
	padding: 2px 8px;
	border-radius: var(--radius-btn);
}

.portail-shell__content .woocommerce-Pagination a {
	color: var(--accent);
}

.portail-shell__content .woocommerce-form-row {
	margin: 0 0 18px;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.portail-shell__content label {
	color: var(--text-body-dim);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

.portail-shell__content input[type="text"],
.portail-shell__content input[type="email"],
.portail-shell__content input[type="password"],
.portail-shell__content input[type="tel"] {
	background: var(--bg) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius-input);
	padding: 12px 14px !important;
	color: var(--text-heading) !important;
	font-size: 15px;
	font-family: var(--font-body);
	width: 100%;
	max-width: 420px;
	transition: border-color 0.15s ease;
}

.portail-shell__content input:focus {
	outline: none;
	border-color: var(--accent);
}

.portail-shell__content fieldset {
	border: 1px solid var(--border);
	border-radius: var(--radius-card);
	padding: 20px;
	margin: 24px 0 0;
}

.portail-shell__content legend {
	color: var(--text-heading);
	font-weight: 700;
	padding: 0 8px;
}

.portail-shell__content button[type="submit"],
.portail-shell__content input[type="submit"],
.portail-shell__content .button,
.portail-shell__content .woocommerce-Button {
	display: inline-block;
	background: var(--accent) !important;
	color: var(--bg) !important;
	font-weight: 800;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	padding: 12px 24px !important;
	border: none !important;
	border-radius: var(--radius-btn);
	cursor: pointer;
}

.portail-shell__content button[type="submit"]:hover,
.portail-shell__content input[type="submit"]:hover,
.portail-shell__content .button:hover,
.portail-shell__content .woocommerce-Button:hover {
	background: var(--accent-hover) !important;
}

.portail-gate__icon .shop-icon {
	width: 30px;
	height: 30px;
}

.portail-stub__icon .shop-icon {
	width: 24px;
	height: 24px;
}