/**
 * PLM lab Adhérents: shared front components of the plml/* blocks.
 *
 * Style handle "plml-components" (depends on "plml-base"), declared in the
 * block.json "style" of the blocks that render forms, flows, notices,
 * badges, panels or tables:
 * "style": [ "plml-base", "plml-components", "file:./style-index.css" ].
 *
 * Reference: refonte/design/pages/PARCOURS-COMMUN.md sections 2 to 5 (BEM
 * names of the plugin markup), values of refonte/design/COMPONENTS.md C20,
 * C29 to C33, C40, C50 and of the V2 mockup (V2-composants artboard).
 * Only the --plml-* variables of plml-base.css are used (no colour, font or
 * radius written here). Breakpoints: 1199px (tablet: mobile structure) and
 * 781px (mobile, mockup 390).
 *
 * Block-specific layouts (membership form, dashboard cards content, login,
 * contacts table columns...) stay in each block's style.scss.
 */

/* ==========================================================================
   1. Accessibility and utilities
   ========================================================================== */

.plml :focus-visible {
	outline: var(--plml-focus);
	outline-offset: 3px;
}

/* Focus on navy backgrounds: white outline (accent only reaches 2.2:1). */
.plml-on-dark :focus-visible,
.plml-dash-card--dark :focus-visible,
.plml-date-tile :focus-visible {
	outline-color: var(--plml-color-background);
}

.plml .screen-reader-text,
.plml-only-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	overflow-wrap: normal !important;
}

.plml .screen-reader-text:focus {
	top: 5px;
	left: 5px;
	z-index: 100000;
	width: auto;
	height: auto;
	padding: 12px 20px;
	clip-path: none;
	border-radius: var(--plml-radius);
	background: var(--plml-color-background);
	color: var(--plml-color-primary);
	font-size: 14px;
	font-weight: 600;
}

/* Two text lengths rendered in the DOM (desktop and short mobile label). */
.plml-only-mobile {
	display: none;
}

.plml-muted {
	color: var(--plml-color-muted);
}

.plml sup {
	font-size: 0.62em;
	line-height: 0;
	vertical-align: 0.42em;
}

/* Hover transitions (150 ms), off under prefers-reduced-motion (plml-base). */
.plml-button,
.plml-icon-button,
.plml-option,
.plml-tier,
.plml-input,
.plml-select,
.plml-textarea,
.plml-pagination a,
.plml-link-back,
.plml-link-arrow,
.plml-link-more {
	transition:
		color 150ms ease,
		background-color 150ms ease,
		border-color 150ms ease,
		text-decoration-color 150ms ease;
}

/* Loading placeholder for data loaded by REST (spec 10.5). */
.plml-skeleton {
	display: block;
	min-height: 1em;
	border-radius: 6px;
	background: var(--plml-color-surface);
	color: transparent;
}

/*
 * Line heights: the mockup leaves most component texts at "normal"
 * (Poppins metrics); set explicitly so that the theme body line height
 * (1.7) does not leak into the components. Explicit values below win.
 */
.plml-flow__eyebrow,
.plml-card__eyebrow,
.plml-section-desc,
.plml-form__legend,
.plml-field__label,
.plml-input,
.plml-select,
.plml-textarea,
.plml-stepper__label,
.plml-stepper__mobile,
.plml-fieldset__legend,
.plml-option__title,
.plml-option__price,
.plml-button,
.plml-link-back,
.plml-link-arrow,
.plml-link-more,
.plml-link-on-dark,
.plml-badge,
.plml-tag,
.plml-role,
.plml-attach-count,
.plml-dl dt,
.plml-dl dd,
.plml-recap__title,
.plml-recap__row dt,
.plml-recap__total-label,
.plml-review__title,
.plml-review__cell-title,
.plml-review__edit,
.plml-review__total-label,
.plml-help-card__title,
.plml-panel__list li,
.plml-event-summary__type,
.plml-event-summary__meta li,
.plml-date-tile__month,
.plml-breadcrumb ol,
.plml-member-head__eyebrow,
.plml-dash-card__eyebrow,
.plml-quota__label,
.plml-quota__value,
.plml-data-table thead th,
.plml-data-table__sub,
.plml-pagination,
.plml-person-row__name,
.plml-person-row__job,
.plml-person__name,
.plml-result__eyebrow {
	line-height: normal;
}

/* ==========================================================================
   2. Eyebrows, section titles, form texts
   ========================================================================== */

.plml-flow__eyebrow,
.plml-card__eyebrow {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--plml-color-accent);
}

.plml-section-title {
	margin: 0;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--plml-color-primary);
}

.plml-section-desc {
	margin: 6px 0 20px;
	font-size: 14.5px;
	color: var(--plml-color-muted);
}

.plml-form__legend {
	margin: 8px 0 0;
	font-size: 14.5px;
	color: var(--plml-color-muted);
}

.plml-form__privacy {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--plml-color-muted);
}

.plml-form__privacy a {
	color: var(--plml-color-primary);
	font-weight: 600;
}

/* ==========================================================================
   3. Flow layout (tunnel): container, grid, title, actions bar
   ========================================================================== */

.plml-flow {
	box-sizing: border-box;
	max-width: 1440px;
	margin: 0 auto;
	padding: 48px var(--plml-gutter) 96px;
}

.plml-flow__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 24px;
	align-items: start;
	margin-top: 44px;
}

.plml-flow__main {
	grid-column: span 7;
	min-width: 0;
	padding-right: 8px;
}

.plml-flow__aside {
	grid-column: span 5;
	min-width: 0;
}

.plml-flow__title {
	margin: 0;
	font-size: 34px;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--plml-color-primary);
}

.plml-flow__title:focus,
.plml-flow__title:focus-visible {
	outline: none;
}

.plml-flow__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-top: 36px;
	padding-top: 28px;
	border-top: 1px solid var(--plml-color-border);
}

.plml-flow__actions-main {
	display: flex;
	align-items: center;
	gap: 20px;
}

/* ==========================================================================
   4. Stepper (C30)
   ========================================================================== */

.plml-stepper__list {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.plml-stepper__item {
	display: flex;
	flex-grow: 1;
	align-items: center;
	margin: 0;
}

.plml-stepper__item:last-child {
	flex-grow: 0;
}

.plml-stepper__marker {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 32px;
	height: 32px;
	border: 1.5px solid var(--plml-color-border-strong);
	border-radius: 50%;
	background: var(--plml-color-background);
	color: var(--plml-color-muted);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
}

.plml-stepper__marker svg {
	width: 17px;
	height: 17px;
	stroke-width: 2.4;
}

.plml-stepper__label {
	margin-left: 10px;
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
	color: var(--plml-color-muted);
}

.plml-stepper__line {
	flex-grow: 1;
	height: 2px;
	margin: 0 14px;
	background: var(--plml-color-border-strong);
}

.plml-stepper__item.is-done .plml-stepper__marker {
	border: 0;
	background: var(--plml-color-primary);
	color: var(--plml-color-background);
}

a.plml-stepper__marker:hover {
	background: var(--plml-color-secondary);
	color: var(--plml-color-background);
}

.plml-stepper__item.is-done .plml-stepper__label {
	color: var(--plml-color-primary);
}

.plml-stepper__item.is-done .plml-stepper__line {
	background: var(--plml-color-primary);
}

.plml-stepper__item.is-current .plml-stepper__marker {
	border: 2px solid var(--plml-color-accent);
	background: var(--plml-color-accent-tint);
	color: var(--plml-color-primary);
	font-weight: 700;
}

.plml-stepper__item.is-current .plml-stepper__label {
	font-weight: 600;
	color: var(--plml-color-primary);
}

.plml-stepper__mobile,
.plml-stepper__bars {
	display: none;
}

.plml-stepper__count {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--plml-color-accent);
}

.plml-stepper__name {
	display: block;
	margin-top: 4px;
	font-size: 18px;
	font-weight: 600;
	color: var(--plml-color-primary);
}

.plml-stepper__bars span {
	display: block;
	height: 5px;
	border-radius: 3px;
	background: var(--plml-color-border-strong);
}

.plml-stepper__bars span.is-done {
	background: var(--plml-color-primary);
}

/* ==========================================================================
   5. Fields (C29): labels, inputs, selects, textareas, help, errors
   ========================================================================== */

.plml-form__stack {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-top: 32px;
}

.plml-fields--2,
.plml-grid-2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.plml-grid-2 {
	gap: 20px 16px;
}

.plml-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px 16px;
}

.plml-grid-3-2 {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	gap: 20px 16px;
}

.plml-grid-1-2 {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: 20px 16px;
}

.plml-grid-1-2-2 {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 2fr);
	gap: 20px 16px;
}

.plml-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.plml-field__label {
	font-size: 14px;
	font-weight: 600;
	color: var(--plml-color-primary);
}

.plml-field__req {
	color: var(--plml-color-danger);
}

.plml-field__opt {
	font-weight: 400;
	color: var(--plml-color-muted);
}

.plml-field__control,
.plml-select-wrap {
	position: relative;
}

.plml-field__icon {
	position: absolute;
	top: 50%;
	left: 14px;
	display: flex;
	color: var(--plml-color-muted);
	transform: translateY(-50%);
	pointer-events: none;
}

.plml-field__icon svg {
	width: 18px;
	height: 18px;
}

.plml-input,
.plml-select,
.plml-textarea {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 52px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid var(--plml-color-control);
	border-radius: var(--plml-radius);
	background: var(--plml-color-background);
	box-shadow: none;
	color: var(--plml-color-text);
	font-family: var(--plml-font-body);
	font-size: 15px;
	font-weight: 400;
}

.plml-field__control--icon .plml-input {
	padding-left: 44px;
}

.plml-textarea {
	height: auto;
	min-height: 104px;
	padding: 14px 16px;
	line-height: 1.6;
	resize: vertical;
}

.plml-select {
	padding-right: 44px;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.plml-select-wrap > svg {
	position: absolute;
	top: 50%;
	right: 14px;
	width: 18px;
	height: 18px;
	color: var(--plml-color-primary);
	transform: translateY(-50%);
	pointer-events: none;
}

.plml-input:focus-visible,
.plml-select:focus-visible,
.plml-textarea:focus-visible {
	border-color: var(--plml-color-accent);
	outline: var(--plml-focus);
	outline-offset: 3px;
}

.plml-input[readonly],
.plml-textarea[readonly] {
	background: var(--plml-color-surface);
}

.plml-input:disabled,
.plml-select:disabled,
.plml-textarea:disabled {
	border-color: var(--plml-color-border-strong);
	background: var(--plml-color-surface);
	color: var(--plml-color-muted);
	cursor: not-allowed;
}

/* Sizes: 48 (filters), 44 (inline table forms), 42 (repeated contact rows). */
.plml-input--48 {
	height: 48px;
	font-size: 14.5px;
}

.plml-input--44 {
	height: 44px;
	font-size: 14.5px;
}

.plml-input--sm {
	height: 42px;
	padding: 0 12px;
	font-size: 14px;
}

.plml-field__help {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--plml-color-muted);
}

/* Validation error (field and message). */
.plml-field.has-error .plml-input,
.plml-field.has-error .plml-select,
.plml-field.has-error .plml-textarea,
.plml-input[aria-invalid="true"],
.plml-select[aria-invalid="true"],
.plml-textarea[aria-invalid="true"] {
	border: 1.5px solid var(--plml-color-danger);
}

.plml-field__error {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--plml-color-danger);
}

.plml-field__error[hidden] {
	display: none;
}

.plml-field__error svg {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin-top: 2px;
}

/* ==========================================================================
   6. Choices: checkboxes, fieldsets, option cards, category tiles, switch
   ========================================================================== */

.plml-check {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--plml-color-text);
	cursor: pointer;
}

.plml-check__input {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	accent-color: var(--plml-color-primary);
	cursor: pointer;
}

.plml-check__hint {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.55;
	color: var(--plml-color-muted);
}

.plml-check a {
	color: var(--plml-color-primary);
	font-weight: 600;
}

.plml-check:has(.plml-check__input:disabled) {
	color: var(--plml-color-muted);
	cursor: not-allowed;
}

.plml-fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

/*
 * The legend is floated so that it behaves like a heading even when the
 * fieldset carries a separator border (a rendered legend sits on the
 * border line). Spacing after it: 6px before a description, 20px before
 * fields or options (their own top margin is absorbed by the clearance).
 */
.plml-fieldset__legend {
	float: left;
	box-sizing: border-box;
	width: 100%;
	margin: 0 0 20px;
	padding: 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--plml-color-primary);
}

.plml-fieldset__legend:has(+ .plml-fieldset__desc) {
	margin-bottom: 6px;
}

.plml-fieldset__legend + * {
	clear: both;
}

/* Separator between groups (a fieldset or any section of a flow). */
.plml-fieldset--sep,
.plml-section--sep {
	margin-top: 36px;
	padding-top: 32px;
	border-top: 1px solid var(--plml-color-border);
}

.plml-fieldset__desc {
	margin: 6px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--plml-color-muted);
}

/* Option cards (payment method, registration price). */
.plml-options {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 20px;
}

.plml-options--2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.plml-option {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 20px;
	border: 1px solid var(--plml-color-border-strong);
	border-radius: var(--plml-radius-md);
	background: var(--plml-color-background);
	cursor: pointer;
}

.plml-option:hover {
	border-color: var(--plml-color-button-border);
}

/* Mockup: same padding, 1.5px border when selected. */
.plml-option:has(.plml-option__input:checked) {
	border: 1.5px solid var(--plml-color-accent);
	background: var(--plml-color-accent-tint);
}

.plml-option:has(.plml-option__input:disabled) {
	opacity: 0.55;
	cursor: not-allowed;
}

.plml-option__input {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--plml-color-primary);
	cursor: inherit;
}

.plml-option__icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--plml-radius-md);
	background: var(--plml-color-accent-tint);
	color: var(--plml-color-accent);
}

.plml-option__icon svg {
	width: 19px;
	height: 19px;
}

.plml-option__text {
	min-width: 0;
}

.plml-option__title {
	display: block;
	font-size: 15px;
	font-weight: 600;
	color: var(--plml-color-primary);
}

.plml-option__desc {
	display: block;
	margin-top: 3px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--plml-color-muted);
}

.plml-option__price {
	flex-shrink: 0;
	margin-left: auto;
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--plml-color-primary);
}

/* Category tiles (membership category selector): styled radio buttons. */
.plml-tiers {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.plml-tiers--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

.plml-tier {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	box-sizing: border-box;
	min-height: 78px;
	padding: 10px 14px;
	border: 1.5px solid var(--plml-color-tile-border);
	border-radius: var(--plml-radius-md);
	background: var(--plml-color-background);
	color: var(--plml-color-primary);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	cursor: pointer;
}

.plml-tiers--3 .plml-tier {
	min-height: 64px;
	font-size: 14.5px;
}

.plml-tier--compact {
	min-height: 62px;
	font-size: 14px;
}

.plml-tier:hover {
	border-color: var(--plml-color-button-border);
}

.plml-tier:has(.plml-tier__input:checked) {
	border-color: var(--plml-color-accent);
	background: var(--plml-color-accent-tint);
}

.plml-tier:has(.plml-tier__input:focus-visible) {
	outline: var(--plml-focus);
	outline-offset: 3px;
}

.plml-tier:has(.plml-tier__input:disabled) {
	opacity: 0.55;
	cursor: not-allowed;
}

.plml-tier__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.plml-tier__name {
	font-weight: 600;
}

.plml-tier__sub {
	font-size: 12.5px;
	font-weight: 400;
	color: var(--plml-color-muted);
}

.plml-tier__side {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	align-items: flex-end;
	gap: 1px;
}

.plml-tier__price {
	font-size: 16px;
	font-weight: 600;
	white-space: nowrap;
}

.plml-tier__seats {
	font-size: 12.5px;
	white-space: nowrap;
	color: var(--plml-color-muted);
}

.plml-tier__check {
	display: flex;
	flex-shrink: 0;
	color: var(--plml-color-accent);
	opacity: 0;
}

.plml-tier__check svg {
	width: 18px;
	height: 18px;
	stroke-width: 2.4;
}

.plml-tier:has(.plml-tier__input:checked) .plml-tier__check {
	opacity: 1;
}

/* Switch (subscription to the members' communications). */
.plml-switch {
	display: flex;
	flex-shrink: 0;
	justify-content: flex-start;
	box-sizing: border-box;
	width: 54px;
	height: 32px;
	margin: 0;
	padding: 4px;
	border: 0;
	border-radius: var(--plml-radius-pill);
	background: var(--plml-color-muted);
	cursor: pointer;
}

.plml-switch[aria-checked="true"] {
	justify-content: flex-end;
	background: var(--plml-color-success);
}

.plml-switch:disabled,
.plml-switch[aria-disabled="true"] {
	opacity: 0.55;
	cursor: not-allowed;
}

.plml-switch__knob {
	display: block;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--plml-color-background);
}

/* ==========================================================================
   7. Buttons and links (C05, C06)
   plml-base.css ships a minimal .plml-button: every property is set here.
   ========================================================================== */

.plml-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	box-sizing: border-box;
	height: 54px;
	margin: 0;
	padding: 0 22px;
	border: 0;
	border-radius: var(--plml-radius);
	background: var(--plml-color-primary);
	box-shadow: none;
	color: var(--plml-color-background);
	font-family: var(--plml-font-body);
	font-size: 15.5px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.plml-button:focus-visible {
	border-color: transparent;
	background: var(--plml-color-primary);
	color: var(--plml-color-background);
}

.plml-button:hover,
.plml-button:active {
	background: var(--plml-color-secondary);
	color: var(--plml-color-background);
}

.plml-button svg {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
}

/* Secondary (outline). */
.plml-button--secondary {
	height: 50px;
	border: 1px solid var(--plml-color-button-border);
	background: var(--plml-color-background);
	color: var(--plml-color-primary);
	font-size: 14.5px;
}

.plml-button--secondary:focus-visible {
	border-color: var(--plml-color-button-border);
	background: var(--plml-color-background);
	color: var(--plml-color-primary);
}

.plml-button--secondary:hover,
.plml-button--secondary:active {
	border-color: var(--plml-color-primary);
	background: var(--plml-color-surface);
	color: var(--plml-color-primary);
}

/* White on navy, outline on navy. */
.plml-button--on-dark {
	height: 48px;
	background: var(--plml-color-background);
	color: var(--plml-color-primary);
	font-size: 14px;
}

.plml-button--on-dark:focus-visible {
	background: var(--plml-color-background);
	color: var(--plml-color-primary);
}

.plml-button--on-dark:hover,
.plml-button--on-dark:active {
	background: var(--plml-color-accent-tint);
	color: var(--plml-color-primary);
}

.plml-button--outline-on-dark,
.plml-button--outline-on-dark:focus-visible {
	border: 1px solid var(--plml-color-on-dark-border);
	background: transparent;
	color: var(--plml-color-background);
}

.plml-button--outline-on-dark:hover,
.plml-button--outline-on-dark:active {
	border-color: var(--plml-color-background);
	background: var(--plml-color-on-dark-overlay);
	color: var(--plml-color-background);
}

.plml-button--on-dark:focus-visible,
.plml-button--outline-on-dark:focus-visible {
	outline-color: var(--plml-color-background);
}

/* Sizes (mockup values; the name gives the height when it is not obvious). */
.plml-button--lg {
	height: 54px;
	font-size: 15.5px;
}

.plml-button--md {
	height: 48px;
	font-size: 14px;
}

/* 52 px: default size of the public pages (C05). */
.plml-button--h52 {
	height: 52px;
	font-size: 15px;
}

.plml-button--h50 {
	height: 50px;
	font-size: 15px;
}

.plml-button--h48,
.plml-button--md48 {
	height: 48px;
	padding: 0 20px;
	font-size: 14.5px;
}

.plml-button--sm,
.plml-button--h46 {
	height: 46px;
	padding: 0 16px;
	font-size: 14.5px;
}

.plml-button--44 {
	height: 44px;
	padding: 0 20px;
	font-size: 14px;
}

.plml-button--primary-sm {
	gap: 8px;
	height: 42px;
	padding: 0 16px;
	font-size: 14px;
}

.plml-button--xs40 {
	height: 40px;
	padding: 0 14px;
	font-size: 14px;
}

.plml-button--xs {
	gap: 8px;
	height: 40px;
	padding: 0 14px;
	font-size: 13.5px;
}

.plml-button--xs svg {
	width: 16px;
	height: 16px;
}

.plml-button--undo {
	gap: 6px;
	height: 36px;
	padding: 0 12px;
	font-size: 13px;
}

.plml-button--block {
	display: flex;
	width: 100%;
}

/* Disabled and loading states. */
.plml-button:disabled,
.plml-button[aria-disabled="true"],
.plml-button:disabled:hover,
.plml-button[aria-disabled="true"]:hover {
	border: 1px solid var(--plml-color-border-strong);
	background: var(--plml-color-surface);
	color: var(--plml-color-disabled);
	opacity: 1;
	cursor: not-allowed;
}

.plml-button[aria-busy="true"],
.plml-button[aria-busy="true"]:hover {
	opacity: 0.7;
	cursor: progress;
}

/* Back link of the actions bar (link or submit button). */
.plml-link-back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--plml-color-primary);
	font-family: var(--plml-font-body);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.plml-link-back:hover {
	color: var(--plml-color-secondary);
	text-decoration: underline;
	text-underline-offset: 5px;
}

.plml-link-back svg {
	width: 17px;
	height: 17px;
}

/* Arrow links (C06) and « Tout voir » links of the member area. */
.plml-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	color: var(--plml-color-primary);
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
}

.plml-link-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	color: var(--plml-color-primary);
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	white-space: nowrap;
}

.plml-link-arrow:hover,
.plml-link-more:hover {
	color: var(--plml-color-secondary);
	text-decoration-thickness: 2px;
}

.plml-link-arrow svg {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
}

.plml-link-more svg {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
}

.plml-link-on-dark {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	color: var(--plml-color-background);
	font-size: 14px;
	font-weight: 600;
	text-underline-offset: 4px;
}

.plml-link-on-dark:hover {
	color: var(--plml-color-background);
	text-decoration-thickness: 2px;
}

/* Icon buttons (edit, remove, download). */
.plml-icon-button {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--plml-color-border-strong);
	border-radius: var(--plml-radius);
	background: var(--plml-color-background);
	color: var(--plml-color-primary);
	text-decoration: none;
	cursor: pointer;
}

.plml-icon-button:hover {
	border-color: var(--plml-color-button-border);
	background: var(--plml-color-surface);
}

.plml-icon-button svg {
	width: 18px;
	height: 18px;
}

.plml-icon-button--40 {
	width: 40px;
	height: 40px;
}

.plml-icon-button--accent {
	color: var(--plml-color-accent);
}

.plml-icon-button--sm {
	width: 36px;
	height: 36px;
}

.plml-icon-button--sm svg {
	width: 16px;
	height: 16px;
}

.plml-icon-button--danger {
	color: var(--plml-color-danger);
}

.plml-icon-button:disabled,
.plml-icon-button[aria-disabled="true"],
.plml-icon-button:disabled:hover {
	border-color: var(--plml-color-border-strong);
	background: var(--plml-color-surface);
	color: var(--plml-color-disabled);
	cursor: not-allowed;
}

/* ==========================================================================
   8. Notices (C33): info, success, warning, error; error summary
   plml-base.css ships a minimal .plml-notice: every property is set here.
   ========================================================================== */

.plml-notice {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	box-sizing: border-box;
	margin: 0;
	padding: 16px 18px;
	border: 0;
	border-radius: var(--plml-radius-md);
	background: var(--plml-color-accent-tint);
	color: var(--plml-color-text-soft);
}

.plml-notice:focus,
.plml-notice:focus-visible {
	outline: var(--plml-focus);
	outline-offset: 3px;
}

.plml-notice > svg,
.plml-notice__icon {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	color: var(--plml-color-accent);
	stroke-width: 2;
}

.plml-notice__body {
	flex-grow: 1;
	min-width: 0;
}

.plml-notice__title {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--plml-color-primary);
}

.plml-notice__text {
	margin: 4px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--plml-color-text-soft);
}

.plml-notice__text a,
.plml-notice__link {
	color: var(--plml-color-primary);
	font-weight: 600;
	text-underline-offset: 4px;
}

.plml-notice__link {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	margin-top: 4px;
	font-size: 14px;
}

.plml-notice--success {
	background: var(--plml-color-success-tint);
}

.plml-notice--success > svg,
.plml-notice--success .plml-notice__icon,
.plml-notice--success .plml-notice__title {
	color: var(--plml-color-success);
}

.plml-notice--warning {
	background: var(--plml-color-warning-tint);
}

.plml-notice--warning > svg,
.plml-notice--warning .plml-notice__icon,
.plml-notice--warning .plml-notice__title {
	color: var(--plml-color-warning);
}

.plml-notice--danger,
.plml-notice--error {
	background: var(--plml-color-danger-tint);
}

.plml-notice--danger > svg,
.plml-notice--danger .plml-notice__icon,
.plml-notice--danger .plml-notice__title,
.plml-notice--error > svg,
.plml-notice--error .plml-notice__icon,
.plml-notice--error .plml-notice__title {
	color: var(--plml-color-danger);
}

/* Neutral (closed registrations): surface background. */
.plml-notice--neutral {
	background: var(--plml-color-surface);
}

.plml-notice--neutral > svg,
.plml-notice--neutral .plml-notice__icon {
	color: var(--plml-color-muted);
}

/* Compact variant (member area, system board). */
.plml-notice--compact {
	gap: 12px;
	padding: 14px 16px;
}

.plml-notice--compact > svg,
.plml-notice--compact .plml-notice__icon {
	width: 18px;
	height: 18px;
	margin-top: 2px;
}

.plml-notice--compact .plml-notice__text {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
}

/* Error summary: list of links to the fields in error. */
.plml-notice__list {
	margin: 8px 0 0;
	padding: 0 0 0 18px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--plml-color-text-soft);
}

.plml-notice__list li + li {
	margin-top: 4px;
}

.plml-notice__list a {
	color: var(--plml-color-danger);
	font-weight: 600;
	text-underline-offset: 3px;
}

.plml-notice__ref {
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
	font-weight: 600;
	color: var(--plml-color-primary);
}

/* ==========================================================================
   9. Badges (C20), tags, roles
   plml-base.css ships a minimal .plml-badge: every property is set here.
   ========================================================================== */

.plml-badge,
.plml-tag,
.plml-role {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	box-sizing: border-box;
	width: fit-content;
	height: 28px;
	margin: 0;
	padding: 0 11px;
	border: 0;
	border-radius: var(--plml-radius-pill);
	background: var(--plml-color-accent-tint);
	color: var(--plml-color-primary);
	font-size: 12.5px;
	font-weight: 600;
	white-space: nowrap;
	vertical-align: middle;
}

.plml-badge svg,
.plml-tag svg {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	stroke-width: 2;
}

.plml-badge__dot {
	display: block;
	flex-shrink: 0;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentcolor;
}

.plml-badge--success {
	background: var(--plml-color-success-tint);
	color: var(--plml-color-success);
}

.plml-badge--warning {
	background: var(--plml-color-warning-tint);
	color: var(--plml-color-warning);
}

.plml-badge--danger,
.plml-badge--error {
	background: var(--plml-color-danger-tint);
	color: var(--plml-color-danger);
}

.plml-badge--neutral {
	background: var(--plml-color-neutral-tint);
	color: var(--plml-color-neutral);
}

.plml-badge--members,
.plml-badge--info {
	background: var(--plml-color-accent-tint);
	color: var(--plml-color-primary);
}

.plml-badge--outline {
	border: 1px solid var(--plml-color-border-strong);
	background: var(--plml-color-background);
	color: var(--plml-color-text);
}

.plml-badge--solid {
	background: var(--plml-color-primary);
	color: var(--plml-color-background);
}

.plml-badge--on-dark {
	background: var(--plml-color-on-dark-overlay);
	color: var(--plml-color-background);
}

.plml-badge--md,
.plml-badge--sm {
	height: 26px;
	font-size: 12px;
}

.plml-badge--xs {
	height: 24px;
	font-size: 11.5px;
}

.plml-badge--role {
	height: 26px;
	padding: 0 10px;
}

/* Tags of the communications (24 px). */
.plml-tag {
	height: 24px;
	font-size: 11.5px;
}

.plml-tag--26 {
	height: 26px;
	font-size: 12px;
}

.plml-tag--tint {
	background: var(--plml-color-accent-tint);
	color: var(--plml-color-primary);
}

.plml-tag--outline {
	border: 1px solid var(--plml-color-border-strong);
	background: var(--plml-color-background);
	color: var(--plml-color-text-soft);
}

/* Contact roles. */
.plml-roles {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.plml-role {
	height: 24px;
	padding: 0 10px;
	font-size: 11.5px;
}

.plml-role--26 {
	height: 26px;
	font-size: 12px;
}

.plml-role--referent {
	background: var(--plml-color-primary);
	color: var(--plml-color-background);
}

.plml-role--billing {
	background: var(--plml-color-accent-tint);
	color: var(--plml-color-primary);
}

.plml-role--contact {
	border: 1px solid var(--plml-color-border-strong);
	background: var(--plml-color-background);
	color: var(--plml-color-text-soft);
}

.plml-attach-count {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12.5px;
	white-space: nowrap;
	color: var(--plml-color-muted);
}

.plml-attach-count svg {
	width: 15px;
	height: 15px;
}

/* ==========================================================================
   10. Panels, cards, definition lists, summaries (C31, C34)
   plml-base.css ships a minimal .plml-card: every property is set here.
   ========================================================================== */

.plml-panel {
	padding: 22px 24px;
	border-radius: var(--plml-radius-lg);
	background: var(--plml-color-surface);
}

.plml-panel__title {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--plml-color-primary);
}

.plml-panel__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.plml-panel__list li {
	display: flex;
	gap: 10px;
	font-size: 14.5px;
	color: var(--plml-color-text-soft);
}

.plml-panel__list svg {
	flex-shrink: 0;
	width: 17px;
	height: 17px;
	margin-top: 2px;
	color: var(--plml-color-muted);
}

.plml-help-box {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 18px 20px;
	border-radius: var(--plml-radius-md);
	background: var(--plml-color-surface);
}

.plml-help-box p {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--plml-color-text-soft);
}

.plml-help-box a {
	color: var(--plml-color-primary);
	font-weight: 600;
}

.plml-card {
	box-sizing: border-box;
	padding: 0;
	border: 1px solid var(--plml-color-border);
	border-radius: var(--plml-radius-lg);
	background: var(--plml-color-background);
	color: var(--plml-color-text);
	opacity: 1;
}

.plml-card--padded {
	padding: 24px 28px;
}

.plml-card--lg {
	border-radius: var(--plml-radius-xl);
}

/* Locked content (spec 10.5): members-only document or card. */
.plml-card--locked {
	border-color: var(--plml-color-border);
	background: var(--plml-color-surface);
	opacity: 1;
}

.plml-dl {
	display: flex;
	flex-direction: column;
	margin: 16px 0 0;
}

.plml-dl--flush {
	margin-top: 0;
}

.plml-dl__row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--plml-color-border);
}

.plml-dl dt {
	font-size: 14.5px;
	color: var(--plml-color-muted);
}

.plml-dl dd {
	margin: 0;
	font-size: 14.5px;
	font-weight: 600;
	text-align: right;
	color: var(--plml-color-primary);
}

.plml-dl--14 dt,
.plml-dl--14 dd {
	font-size: 14px;
}

/* Side summary « Votre adhésion » (C31). */
.plml-recap {
	padding: 28px 28px 24px;
	border: 1px solid var(--plml-color-border);
	border-radius: var(--plml-radius-xl);
	background: var(--plml-color-background);
}

.plml-recap__title {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	color: var(--plml-color-primary);
}

.plml-recap__list {
	display: flex;
	flex-direction: column;
	margin: 8px 0 0;
}

.plml-recap__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 12px;
	padding: 14px 0;
	border-bottom: 1px solid var(--plml-color-border);
}

.plml-recap__row dt {
	grid-column: 1;
	font-size: 13px;
	color: var(--plml-color-muted);
}

.plml-recap__row dd {
	grid-column: 1;
	margin: 3px 0 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--plml-color-primary);
}

.plml-recap__row .plml-recap__sub {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--plml-color-muted);
}

.plml-recap__row .plml-recap__edit {
	grid-row: 1 / span 2;
	grid-column: 2;
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
}

.plml-recap__edit a {
	color: var(--plml-color-primary);
	font-size: 13px;
	font-weight: 600;
}

.plml-recap__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-top: 18px;
	padding: 16px 18px;
	border-radius: var(--plml-radius-md);
	background: var(--plml-color-surface);
}

.plml-recap__total-label {
	margin: 0;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--plml-color-primary);
}

.plml-recap__total-amount {
	margin: 0;
	font-size: 28px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.02em;
	white-space: nowrap;
	color: var(--plml-color-primary);
}

.plml-recap__note {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 16px 0 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--plml-color-text-soft);
}

.plml-recap__note svg {
	flex-shrink: 0;
	width: 17px;
	height: 17px;
	margin-top: 1px;
	color: var(--plml-color-success);
}

/* Validation summary (grid of bordered cells, Adhesion-5). */
.plml-review__title {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--plml-color-primary);
}

.plml-review__desc {
	margin: 6px 0 20px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--plml-color-muted);
}

.plml-review {
	overflow: hidden;
	border: 1px solid var(--plml-color-border);
	border-radius: var(--plml-radius-lg);
}

.plml-review__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	background: var(--plml-color-border);
}

.plml-review__cell {
	padding: 20px 22px;
	background: var(--plml-color-background);
}

.plml-review__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.plml-review__cell-title {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--plml-color-primary);
}

.plml-review__edit {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 32px;
	color: var(--plml-color-primary);
	font-size: 13.5px;
	font-weight: 600;
}

.plml-review__edit svg {
	width: 15px;
	height: 15px;
}

.plml-review__list {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.plml-review__list li {
	font-size: 14px;
	line-height: 1.55;
	color: var(--plml-color-text-soft);
	overflow-wrap: anywhere;
}

.plml-review__list strong {
	font-weight: 600;
	color: var(--plml-color-primary);
}

.plml-review__total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px;
	border-top: 1px solid var(--plml-color-border);
	background: var(--plml-color-surface);
}

.plml-review__total-label {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--plml-color-primary);
}

.plml-review__total-label span {
	font-weight: 400;
	color: var(--plml-color-muted);
}

.plml-review__total-amount {
	margin: 0;
	font-size: 26px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	color: var(--plml-color-primary);
}

/* Help card « Besoin d'aide ? » and icon box. */
.plml-help-card {
	display: flex;
	gap: 16px;
	padding: 24px;
	border: 1px solid var(--plml-color-border);
	border-radius: var(--plml-radius-xl);
	background: var(--plml-color-background);
}

.plml-help-card__title {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--plml-color-primary);
}

.plml-help-card__text {
	margin: 4px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--plml-color-text-soft);
}

.plml-help-card__contact {
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--plml-color-primary);
}

.plml-help-card__contact strong {
	font-weight: 600;
}

.plml-help-card__contact a {
	color: var(--plml-color-primary);
	font-weight: 600;
	overflow-wrap: anywhere;
}

.plml-icon-box {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--plml-radius-md);
	background: var(--plml-color-accent-tint);
	color: var(--plml-color-accent);
}

.plml-icon-box svg {
	width: 20px;
	height: 20px;
}

.plml-icon-box--40 {
	width: 40px;
	height: 40px;
}

.plml-icon-box--40 svg {
	width: 19px;
	height: 19px;
}

/* Result screens (confirmation, pending payment, check your inbox). */
.plml-result-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--plml-color-success-tint);
	color: var(--plml-color-success);
}

.plml-result-icon svg {
	width: 36px;
	height: 36px;
	stroke-width: 2.6;
}

.plml-result-icon--60 {
	width: 60px;
	height: 60px;
}

.plml-result-icon--60 svg {
	width: 30px;
	height: 30px;
}

.plml-result-icon--pending {
	background: var(--plml-color-warning-tint);
	color: var(--plml-color-warning);
}

.plml-result-icon--info {
	background: var(--plml-color-accent-tint);
	color: var(--plml-color-accent);
}

.plml-result__eyebrow {
	margin: 24px 0 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--plml-color-success);
}

.plml-result__title {
	margin-top: 24px;
}

.plml-result__display {
	margin: 10px 0 0;
	font-size: 46px;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.025em;
	color: var(--plml-color-primary);
}

.plml-result__display:focus {
	outline: none;
}

.plml-result__lead {
	margin: 16px 0 0;
	font-size: 16.5px;
	line-height: 1.7;
	color: var(--plml-color-text-soft);
}

.plml-result__lead strong {
	color: var(--plml-color-primary);
}

.plml-result__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 18px;
}

.plml-result__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 20px;
}

.plml-result__block {
	margin-top: 28px;
}

.plml-result__links {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 24px;
	margin-top: 8px;
}

/* Event summary card (C14, flows) and date tile. */
.plml-event-summary {
	overflow: hidden;
}

.plml-event-summary__head {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 24px 28px;
	border-bottom: 1px solid var(--plml-color-border);
}

.plml-event-summary__type {
	margin: 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--plml-color-accent);
}

.plml-event-summary__title {
	margin: 6px 0 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--plml-color-primary);
}

.plml-event-summary__meta {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 24px 28px;
	border-bottom: 1px solid var(--plml-color-border);
	list-style: none;
}

.plml-event-summary__meta li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 16px;
	color: var(--plml-color-text);
}

.plml-event-summary__meta svg {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	color: var(--plml-color-accent);
}

.plml-event-summary__prices {
	padding: 24px 28px;
}

.plml-event-summary__prices .plml-dl {
	margin-top: 12px;
}

.plml-date-tile {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	gap: 3px;
	box-sizing: border-box;
	width: 84px;
	height: 84px;
	border-radius: var(--plml-radius-md);
	background: var(--plml-color-primary);
	color: var(--plml-color-background);
}

.plml-date-tile__day {
	font-size: 31px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.02em;
}

.plml-date-tile__month {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--plml-color-accent-on-dark);
}

.plml-date-tile--76 {
	width: 76px;
	height: 76px;
	border-radius: 9px;
}

.plml-date-tile--76 .plml-date-tile__day {
	font-size: 28px;
}

.plml-date-tile--88 {
	gap: 4px;
	width: 88px;
	height: 88px;
	border-radius: 11px;
}

.plml-date-tile--88 .plml-date-tile__day {
	font-size: 33px;
}

.plml-date-tile--96 {
	gap: 4px;
	width: 96px;
	height: 96px;
	border-radius: var(--plml-radius-lg);
}

.plml-date-tile--96 .plml-date-tile__day {
	font-size: 36px;
}

.plml-date-tile--64 {
	gap: 2px;
	width: 64px;
	height: 64px;
	border-radius: var(--plml-radius);
}

.plml-date-tile--64 .plml-date-tile__day {
	font-size: 24px;
}

/* Past date: tinted tile. */
.plml-date-tile--past {
	background: var(--plml-color-accent-tint);
	color: var(--plml-color-primary);
}

.plml-date-tile--past .plml-date-tile__month {
	color: var(--plml-color-accent);
}

/* ==========================================================================
   11. Member area: page header, breadcrumb, cards, people, files (C40, C50)
   ========================================================================== */

.plml-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	font-size: 13.5px;
	list-style: none;
	color: var(--plml-color-muted);
}

.plml-breadcrumb li {
	margin: 0;
}

.plml-breadcrumb li + li::before {
	content: "/";
	margin-right: 8px;
	color: var(--plml-color-muted);
}

.plml-breadcrumb a {
	color: var(--plml-color-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.plml-breadcrumb a:hover {
	color: var(--plml-color-secondary);
}

.plml-breadcrumb [aria-current] {
	font-weight: 500;
	color: var(--plml-color-primary);
}

.plml-breadcrumb + .plml-member-head {
	margin-top: 20px;
}

.plml-member-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
}

.plml-member-head__eyebrow {
	display: none;
	margin: 0;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--plml-color-accent);
}

.plml-member-head__title {
	margin: 0;
	font-size: 36px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--plml-color-primary);
}

.plml-member-head__intro {
	margin: 8px 0 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--plml-color-text-soft);
}

.plml-member-head__action {
	display: flex;
	flex-shrink: 0;
	gap: 12px;
}

.plml-dash-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	align-items: stretch;
	column-gap: 24px;
}

.plml-dash-grid + .plml-dash-grid {
	margin-top: 24px;
}

.plml-dash-grid > * {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

.plml-dash-col-5 {
	grid-column: span 5;
}

.plml-dash-col-6 {
	grid-column: span 6;
}

.plml-dash-col-7 {
	grid-column: span 7;
}

.plml-dash-col-12 {
	grid-column: 1 / -1;
}

.plml-dash-card {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	box-sizing: border-box;
	padding: 28px;
	border: 1px solid var(--plml-color-border);
	border-radius: var(--plml-radius-lg);
	background: var(--plml-color-background);
}

.plml-dash-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px 16px;
	margin-bottom: 20px;
}

.plml-dash-card__title-wrap {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.plml-dash-card__icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--plml-radius-md);
	background: var(--plml-color-accent-tint);
	color: var(--plml-color-accent);
}

.plml-dash-card__icon svg {
	width: 19px;
	height: 19px;
}

.plml-dash-card__title {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--plml-color-primary);
}

.plml-dash-card__foot {
	margin-top: auto;
	padding-top: 16px;
}

.plml-dash-card--dark {
	padding: 32px;
	border: 0;
	background: var(--plml-color-primary);
	color: var(--plml-color-background);
}

.plml-dash-card__eyebrow {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--plml-color-accent-on-dark);
}

.plml-dash-card--dark .plml-dash-card__title {
	margin-top: 10px;
	font-size: 21px;
	color: var(--plml-color-background);
}

.plml-dash-card__lead {
	margin: 12px 0 0;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--plml-color-on-dark-soft);
}

/* Numbered mini-steps on a dark card (« Mode d'emploi » of the
   communications, dashboard card). */
.plml-mini-steps {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.plml-mini-steps--16 {
	gap: 16px;
}

.plml-mini-steps li {
	display: flex;
	gap: 12px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--plml-color-background);
}

.plml-mini-steps .is-strong {
	font-weight: 600;
}

.plml-mini-steps__num {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--plml-color-on-dark-overlay);
	font-size: 12.5px;
	font-weight: 600;
}

.plml-mini-steps__sub {
	display: block;
	font-weight: 400;
	color: var(--plml-color-on-dark-soft);
	overflow-wrap: anywhere;
}

.plml-mini-steps__sub strong {
	font-weight: 600;
	color: var(--plml-color-background);
}

/* Quota of free seats (segments). */
.plml-quota__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 4px 12px;
}

.plml-quota__label,
.plml-quota__value {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--plml-color-primary);
}

.plml-quota__value {
	white-space: nowrap;
}

.plml-quota__bar {
	display: flex;
	gap: 6px;
	margin-top: 10px;
}

.plml-quota__bar span {
	flex: 1;
	height: 10px;
	border-radius: 5px;
	background: var(--plml-color-border-strong);
}

.plml-quota__bar span.is-used {
	background: var(--plml-color-primary);
}

.plml-quota__text {
	margin: 10px 0 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--plml-color-muted);
}

/* Progress bar (system board). */
.plml-progress {
	height: 6px;
	margin-top: 8px;
	overflow: hidden;
	border-radius: 3px;
	background: var(--plml-color-border);
}

.plml-progress > span {
	display: block;
	height: 6px;
	border-radius: 3px;
	background: var(--plml-color-accent);
}

/* Avatars (initials) and people rows. */
.plml-avatar {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--plml-color-accent-tint);
	color: var(--plml-color-primary);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
}

.plml-avatar--32 {
	width: 32px;
	height: 32px;
	font-size: 12px;
}

.plml-avatar--40 {
	width: 40px;
	height: 40px;
	font-size: 14px;
}

.plml-avatar--44 {
	width: 44px;
	height: 44px;
	font-size: 14px;
}

.plml-avatar--48 {
	width: 48px;
	height: 48px;
	font-size: 14px;
}

.plml-person-row {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.plml-person-row__name,
.plml-person__name {
	display: block;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--plml-color-primary);
}

.plml-person-row__job {
	display: block;
	font-size: 13px;
	color: var(--plml-color-muted);
}

.plml-person__email {
	display: block;
	margin: 3px 0 0;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--plml-color-muted);
	overflow-wrap: anywhere;
}

/* File type badge (PDF, PPTX...). */
.plml-file-badge {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	border: 1px solid var(--plml-color-border);
	border-radius: var(--plml-radius);
	background: var(--plml-color-surface);
	color: var(--plml-color-primary);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.plml-file-badge--44 {
	width: 44px;
	height: 44px;
}

.plml-file-badge--sm {
	font-size: 10.5px;
}

/* ==========================================================================
   12. Data tables (C32) and their mobile card version
   ========================================================================== */

.plml-table-card {
	overflow: hidden;
	border: 1px solid var(--plml-color-border);
	border-radius: var(--plml-radius-lg);
	background: var(--plml-color-background);
}

.plml-data-table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	table-layout: fixed;
}

.plml-data-table caption {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.plml-data-table thead {
	background: var(--plml-color-surface);
}

.plml-data-table thead th {
	padding: 12px 16px;
	border: 0;
	border-bottom: 1px solid var(--plml-color-border-strong);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--plml-color-muted);
}

.plml-data-table tbody th,
.plml-data-table td {
	padding: 14px 16px;
	border: 0;
	border-bottom: 1px solid var(--plml-color-border);
	font-size: 14.5px;
	font-weight: 400;
	line-height: 1.45;
	text-align: left;
	vertical-align: middle;
	color: var(--plml-color-text);
}

.plml-data-table tbody tr:last-child > * {
	border-bottom: 0;
}

.plml-data-table tbody th strong,
.plml-data-table td strong,
.plml-data-table__strong {
	font-weight: 600;
	color: var(--plml-color-primary);
}

.plml-data-table__sub {
	display: block;
	font-size: 13px;
	color: var(--plml-color-muted);
	overflow-wrap: break-word;
}

.plml-data-table .is-nowrap {
	white-space: nowrap;
}

.plml-data-table .is-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.plml-data-table__actions {
	display: flex;
	gap: 8px;
}

.plml-data-table tbody tr.is-new {
	background: var(--plml-color-success-tint);
}

.plml-data-table tbody tr.is-removed {
	background: var(--plml-color-surface);
}

.plml-data-table tr.is-removed .plml-person__name,
.plml-data-table tr.is-removed .plml-person-row__name {
	text-decoration: line-through;
	color: var(--plml-color-muted);
}

.plml-data-table__empty {
	padding: 28px 16px;
	font-size: 14.5px;
	text-align: center;
	color: var(--plml-color-muted);
}

/* ==========================================================================
   13. Pagination
   ========================================================================== */

.plml-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 24px;
}

.plml-pagination a,
.plml-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 44px;
	height: 44px;
	padding: 0 6px;
	border: 1px solid var(--plml-color-border-strong);
	border-radius: var(--plml-radius);
	background: var(--plml-color-background);
	color: var(--plml-color-primary);
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: none;
}

.plml-pagination a:hover {
	border-color: var(--plml-color-primary);
	background: var(--plml-color-surface);
}

.plml-pagination svg {
	width: 18px;
	height: 18px;
}

.plml-pagination [aria-disabled="true"] {
	color: var(--plml-color-muted);
	pointer-events: none;
}

.plml-pagination [aria-current="page"],
.plml-pagination [aria-current="page"]:hover {
	border-color: var(--plml-color-primary);
	background: var(--plml-color-primary);
	color: var(--plml-color-background);
}

.plml-pagination__gap {
	border-color: transparent !important;
	background: transparent !important;
	color: var(--plml-color-muted) !important;
}

/* ==========================================================================
   14. Tablet (782 to 1199 px): mobile structure of the flows
   ========================================================================== */

@media (max-width: 1199px) {

	.plml-flow {
		padding: 32px var(--plml-gutter) 64px;
	}

	.plml-flow__grid {
		display: flex;
		flex-direction: column;
		gap: 28px;
		margin-top: 28px;
	}

	.plml-flow__main {
		padding-right: 0;
	}

	.plml-flow__main,
	.plml-flow__aside {
		width: 100%;
	}

	.plml-dash-col-5,
	.plml-dash-col-6,
	.plml-dash-col-7 {
		grid-column: 1 / -1;
	}

	.plml-dash-grid {
		row-gap: 24px;
	}

	.plml-tiers--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ==========================================================================
   15. Mobile (781 px and less, mockup 390)
   ========================================================================== */

@media (max-width: 781px) {

	.plml-only-desktop {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.plml-only-mobile {
		display: inline;
	}

	.plml-flow__eyebrow {
		font-size: 11.5px;
	}

	.plml-section-title {
		font-size: 20px;
	}

	/* Flow. */
	.plml-flow {
		padding: 24px 20px 48px;
	}

	.plml-flow__title {
		font-size: 27px;
	}

	.plml-flow__actions {
		flex-direction: column-reverse;
		align-items: stretch;
		gap: 10px;
		margin-top: 28px;
		padding-top: 24px;
	}

	.plml-flow__actions > span:empty {
		display: none;
	}

	.plml-flow__actions-main {
		flex-direction: column;
		align-items: stretch;
	}

	.plml-flow__actions .plml-button,
	.plml-result__buttons .plml-button {
		display: flex;
		width: 100%;
		font-size: 15px;
	}

	.plml-result__buttons .plml-button {
		white-space: normal;
	}

	/* Stepper. */
	.plml-stepper__list {
		display: none;
	}

	.plml-stepper__mobile {
		display: block;
		margin: 0;
	}

	.plml-stepper__bars {
		display: grid;
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
		gap: 6px;
		margin-top: 12px;
	}

	/* Fields. */
	.plml-form__stack {
		gap: 20px;
		margin-top: 24px;
	}

	.plml-fields--2,
	.plml-grid-3,
	.plml-grid-3-2,
	.plml-grid-1-2-2,
	.plml-options--2 {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.plml-fields--2 {
		gap: 20px;
	}

	.plml-grid-2 {
		gap: 16px 12px;
	}

	.plml-grid-1-2 {
		gap: 16px 12px;
	}

	.plml-form__privacy {
		font-size: 12.5px;
	}

	.plml-fieldset--sep,
	.plml-section--sep {
		margin-top: 32px;
		padding-top: 28px;
	}

	/* Choices. */
	.plml-tiers,
	.plml-tiers--3 {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.plml-tier {
		min-height: 64px;
	}

	.plml-option {
		align-items: flex-start;
		padding: 16px;
	}

	.plml-option__input {
		margin-top: 10px;
	}

	.plml-option__price {
		align-self: center;
	}

	/* Cards and summaries. */
	.plml-dl dt,
	.plml-dl dd {
		font-size: 14px;
	}

	.plml-review__grid {
		grid-template-columns: 1fr;
	}

	.plml-review__total {
		flex-wrap: wrap;
	}

	.plml-result-icon {
		width: 60px;
		height: 60px;
	}

	.plml-result-icon svg {
		width: 30px;
		height: 30px;
	}

	.plml-result__display {
		font-size: 34px;
	}

	.plml-result__lead {
		font-size: 15.5px;
	}

	.plml-result__links {
		flex-direction: column;
		gap: 4px;
	}

	.plml-event-summary__head {
		padding: 20px 24px;
	}

	.plml-event-summary .plml-date-tile {
		width: 68px;
		height: 68px;
		border-radius: var(--plml-radius);
	}

	.plml-event-summary .plml-date-tile__day {
		font-size: 25px;
	}

	.plml-event-summary__title {
		font-size: 17px;
	}

	.plml-event-summary__meta {
		padding: 20px 24px;
	}

	.plml-event-summary__meta li {
		font-size: 15px;
	}

	.plml-event-summary__prices {
		padding: 20px 24px;
	}

	.plml-date-tile--88 {
		gap: 3px;
		width: 76px;
		height: 76px;
		border-radius: 9px;
	}

	.plml-date-tile--88 .plml-date-tile__day {
		font-size: 28px;
	}

	/* Member area. */
	.plml-member-head {
		flex-direction: column;
		align-items: flex-start;
	}

	.plml-member-head__eyebrow {
		display: block;
	}

	.plml-member-head__eyebrow + .plml-member-head__title {
		margin-top: 10px;
	}

	.plml-member-head__title {
		font-size: 30px;
		line-height: 1.15;
	}

	.plml-member-head__intro {
		font-size: 15px;
	}

	.plml-member-head__action,
	.plml-member-head__action .plml-button {
		width: 100%;
	}

	.plml-dash-grid {
		row-gap: 16px;
	}

	.plml-dash-grid + .plml-dash-grid {
		margin-top: 16px;
	}

	.plml-dash-grid > * {
		gap: 16px;
	}

	.plml-dash-card {
		padding: 20px;
	}

	.plml-dash-card--dark {
		padding: 24px 20px;
	}

	/* Tables: horizontal scroll by default (tables marked
	   plml-data-table--cards become cards under 1200 px, section 16). */
	.plml-table-card {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Specificity of one class (0,1,0): a block overrides it with one class
	   of its own stylesheet. */
	.plml-data-table:where(
		.plml-table-card > .plml-data-table:not(.plml-data-table--cards)
	) {
		min-width: 640px;
		table-layout: auto;
	}


	/* Pagination: 44 px targets kept, arrows and current page first. */
	.plml-pagination {
		gap: 6px;
	}
}

/* ==========================================================================
   16. Touch screens (1199 px and less, P10 responsive audit)
   ========================================================================== */

@media (max-width: 1199px) {

	/* One card per row (cells labelled by data-label): phones and tablets,
	   where the content column beside the navigation is too narrow. */
	.plml-data-table--cards,
	.plml-data-table--cards tbody,
	.plml-data-table--cards tr,
	.plml-data-table--cards tbody th,
	.plml-data-table--cards td {
		display: block;
		width: auto;
	}

	.plml-data-table--cards colgroup,
	.plml-data-table--cards thead {
		display: none;
	}

	.plml-data-table--cards tbody tr {
		position: relative;
		padding: 14px 16px;
		border-bottom: 1px solid var(--plml-color-border);
	}

	.plml-data-table--cards tbody tr:last-child {
		border-bottom: 0;
	}

	.plml-data-table--cards tbody th,
	.plml-data-table--cards td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 5px 0;
		border: 0;
		text-align: right;
	}

	.plml-data-table--cards tbody th {
		justify-content: flex-start;
		padding-top: 0;
		padding-right: 96px;
		text-align: left;
	}

	.plml-data-table--cards td[data-label]::before {
		content: attr(data-label);
		flex-shrink: 0;
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0.06em;
		text-align: left;
		text-transform: uppercase;
		color: var(--plml-color-muted);
	}

	.plml-data-table--cards td.plml-data-table__actions-cell {
		position: absolute;
		top: 12px;
		right: 12px;
		padding: 0;
	}

	.plml-data-table--cards td.plml-data-table__actions-cell::before {
		content: none;
	}

	.plml-data-table--cards .plml-data-table__empty {
		display: block;
		text-align: center;
	}

	/* 44 px touch targets (the desktop mockup sizes stay from 1200 px). */
	.plml-icon-button--sm,
	.plml-icon-button--40 {
		width: 44px;
		height: 44px;
	}

	.plml-button--xs40,
	.plml-button--xs,
	.plml-button--primary-sm {
		height: 44px;
	}

	.plml-input--sm {
		height: 44px;
	}

	.plml-link-more {
		min-height: 44px;
	}

	/* Small controls keep their look; their hit area grows to 44 px. */
	.plml-check,
	.plml-switch,
	.plml-stepper__marker {
		position: relative;
	}

	.plml-check::after,
	.plml-switch::after,
	a.plml-stepper__marker::after {
		content: "";
		position: absolute;
		inset: -12px 0;
	}

	.plml-switch::after {
		inset: -6px -4px;
	}

	a.plml-stepper__marker::after {
		inset: -6px;
		border-radius: 50%;
	}

	/* Links inside a checkbox label stay clickable above its hit area. */
	.plml-check a {
		position: relative;
		z-index: 1;
	}
}

@media (max-width: 781px) {

	/* 16 px fields: no automatic zoom on focus (iOS). */
	.plml-input,
	.plml-select,
	.plml-textarea,
	.plml-input--48,
	.plml-input--44,
	.plml-input--sm {
		font-size: 16px;
	}
}

/* Long unbreakable strings (email addresses) inside narrow texts. */
.plml-notice__text,
.plml-option__desc,
.plml-field__help,
.plml-check__hint {
	overflow-wrap: anywhere;
}