/*
 * md3-components.css — Composants Material Design 3 + WordPress
 * ==============================================================
 * Dépend de : md3-tokens.css + md3-base.css (à charger avant)
 *
 * Sommaire :
 * 1. Boutons (5 variantes MD3)
 * 2. Cartes (3 variantes MD3)
 * 3. Champs de texte (Filled & Outlined)
 * 4. Checkbox & Radio
 * 5. Chips (4 types MD3)
 * 6. FAB — Floating Action Button
 * 7. Badges
 * 8. Listes MD3
 * 9. Snackbar / Toast
 * 10. Indicateurs de progression
 * 11. WordPress — En-tête & Top App Bar
 * 12. WordPress — Navigation principale
 * 13. WordPress — Pied de page
 * 14. WordPress — Articles & Pages
 * 15. WordPress — Commentaires
 * 16. WordPress — Widgets & Sidebar
 * 17. WordPress — Pagination
 * 18. WordPress — Images, galeries & alignements Gutenberg
 * 19. WordPress — Formulaire de recherche
 * 20. WordPress — Page 404 & Aucun résultat
 * 21. Events Manager (EM)
 * 22. Feed Them Social (FTS)
 *
 * CHARGEMENT dans functions.php :
 * wp_enqueue_style('md3-components', LSAJ_URI . '/assets/css/md3-components.css',
 * ['md3-tokens', 'md3-base'], LSAJ_VERSION);
 */

/* =============================================================================
	1. BOUTONS
	MD3 définit 5 variantes. Toutes ont :
	- hauteur 40px, border-radius full, padding 0 24px
	- label-large pour le texte
	- state layer via ::before (overlay coloré au hover/focus/press)
============================================================================= */

/* ── Base commune ─────────────────────────────────────────────────────────────── */
.md-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--md-spacing-2);
	height: 40px;
	padding: 0 var(--md-spacing-6);
	border: none;
	border-radius: var(--md-sys-shape-corner-full);
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	/* Typographie label-large */
	font-family: var(--md-sys-typescale-label-font);
	font-size: var(--md-sys-typescale-label-large-size);
	line-height: var(--md-sys-typescale-label-large-line-height);
	letter-spacing: var(--md-sys-typescale-label-large-tracking);
	font-weight: var(--md-sys-typescale-label-large-weight);
	/* Transition */
	transition:
		box-shadow var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
		background-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

/* State layer (hover/focus/press) via pseudo-élément */
.md-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background-color: currentColor;
	opacity: 0;
	transition: opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
	pointer-events: none;
}

.md-btn:hover::before {
	opacity: var(--md-sys-state-hover-opacity);
	box-shadow: var(--md-sys-elevation-level1);
}
.md-btn:focus::before {
	opacity: var(--md-sys-state-focus-opacity);
	box-shadow: var(--md-sys-elevation-level1);
}
.md-btn:active::before {
	opacity: var(--md-sys-state-pressed-opacity);
	box-shadow: var(--md-sys-elevation-level1);
}

/* Icônes dans les boutons */
.md-btn .md-icon {
	font-size: 1.125rem;
	line-height: 1;
	flex-shrink: 0;
}

/* État désactivé commun */
.md-btn:disabled,
.md-btn[aria-disabled="true"] {
	pointer-events: none;
	cursor: default;
}

/* ── Filled (bouton principal) ────────────────────────────────────────────────── */
.md-btn--filled,
.md-btn--filled:visited {
	background-color: var(--md-sys-color-primary);
	color: var(--md-sys-color-on-primary);
	box-shadow: var(--md-sys-elevation-level0);
}

.md-btn--filled:hover,
.md-btn--filled:visited:hover {
	color: var(--md-sys-color-surface-variant);
	box-shadow: var(--md-sys-elevation-level1);
}

.md-btn--filled:active,
.md-btn--filled:active:hover {
	color: var(--md-sys-color-surface-variant);
	box-shadow: var(--md-sys-elevation-level0);
}

.md-btn--filled:disabled {
	background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
	color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
	box-shadow: none;
}

/* ── Tonal (secondaire) ───────────────────────────────────────────────────────── */
.md-btn--tonal,
.md-btn--tonal:visited {
	background-color: var(--md-sys-color-secondary-container);
	color: var(--md-sys-color-on-secondary-container);
}

.md-btn--tonal:hover,
.md-btn--tonal:visited:hover {
	color: var(--md-sys-color-surface-variant);
	box-shadow: var(--md-sys-elevation-level1);
}

.md-btn--tonal:active,
.md-btn--tonal:active:hover {
	color: var(--md-sys-color-surface-variant);
	box-shadow: var(--md-sys-elevation-level0);
}

.md-btn--tonal:disabled {
	background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
	color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
}

/* ── Elevated (surface surélevée) ─────────────────────────────────────────────── */
.md-btn--elevated,
.md-btn--elevated:visited {
	background-color: var(--md-sys-color-surface-container-low);
	color: var(--md-sys-color-primary);
	box-shadow: var(--md-sys-elevation-level1);
}

.md-btn--elevated:hover,
.md-btn--elevated:visited:hover {
	color: var(--md-sys-color-surface-variant);
	box-shadow: var(--md-sys-elevation-level2);
}

.md-btn--elevated:active,
.md-btn--elevated:active:hover {
	color: var(--md-sys-color-surface-variant);
	box-shadow: var(--md-sys-elevation-level1);
}
.md-btn--elevated:disabled {
	background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
	color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
	box-shadow: none;
}

/* ── Outlined ─────────────────────────────────────────────────────────────────── */
.md-btn--outlined,
.md-btn--outlined:visited {
	background-color: transparent;
	color: var(--md-sys-color-primary);
	border: 1px solid var(--md-sys-color-outline);
}

.md-btn--outlined:hover { border-color: var(--md-sys-color-primary); }
.md-btn--outlined:focus { border-color: var(--md-sys-color-primary); }

.md-btn--outlined:disabled {
	border-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
	color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
}

/* ── Text ─────────────────────────────────────────────────────────────────────── */
.md-btn--text,
.md-btn--text:visited {
	background-color: transparent;
	color: var(--md-sys-color-primary);
	padding: 0 var(--md-spacing-3);
}

.md-btn--text:disabled {
	color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
}

/* ── Variante danger (error) ──────────────────────────────────────────────────── */
.md-btn--danger,
.md-btn--danger:visited {
	background-color: var(--md-sys-color-error);
	color: var(--md-sys-color-on-error);
}

/* =============================================================================
	2. CARTES
	Border-radius : medium (12px).
	Padding interne recommandé : 16px.
============================================================================= */

.md-card {
	position: relative;
	border-radius: var(--md-sys-shape-corner-medium);
	overflow: hidden;
	transition:
		box-shadow var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
		background-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

/* State layer pour cartes cliquables */
.md-card[href]::before,
.md-card[tabindex]::before,
.md-card--clickable::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--md-sys-color-on-surface);
	opacity: 0;
	transition: opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
	pointer-events: none;
}

.md-card[href]:hover::before,
.md-card--clickable:hover::before { opacity: var(--md-sys-state-hover-opacity); }

.md-card__media { overflow: hidden; }
.md-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.md-card__header {
	padding: var(--md-spacing-4) var(--md-spacing-4) 0;
	display: flex;
	gap: var(--md-spacing-4);
	align-items: flex-start;
}

.md-card__title {
	font-size: var(--md-sys-typescale-title-large-size);
	line-height: var(--md-sys-typescale-title-large-line-height);
	font-weight: var(--md-sys-typescale-title-large-weight);
	letter-spacing: var(--md-sys-typescale-title-large-tracking);
	color: var(--md-sys-color-on-surface);
	margin: 0;
}

.md-card__subtitle {
	font-size: var(--md-sys-typescale-body-medium-size);
	line-height: var(--md-sys-typescale-body-medium-line-height);
	font-weight: var(--md-sys-typescale-body-medium-weight);
	letter-spacing: var(--md-sys-typescale-body-medium-tracking);
	color: var(--md-sys-color-on-surface-variant);
	margin: var(--md-spacing-1) 0 0;
}

.md-card__content {
	padding: var(--md-spacing-4);
	color: var(--md-sys-color-on-surface-variant);
	font-size: var(--md-sys-typescale-body-medium-size);
}

.md-card__content p { max-width: none; }

.md-card__actions {
	padding: var(--md-spacing-2) var(--md-spacing-4) var(--md-spacing-4);
	display: flex;
	gap: var(--md-spacing-2);
	flex-wrap: wrap;
	align-items: center;
}

/* ── Elevated card ────────────────────────────────────────────────────────────── */
.md-card--elevated {
	background-color: var(--md-sys-color-surface-container-low);
	box-shadow: var(--md-sys-elevation-level1);
}
.md-card--elevated:hover,
.md-card--elevated.md-card--clickable:hover {
	box-shadow: var(--md-sys-elevation-level2);
}

/* ── Filled card ──────────────────────────────────────────────────────────────── */
.md-card--filled {
	background-color: var(--md-sys-color-surface-container-highest);
	box-shadow: var(--md-sys-elevation-level0);
}
.md-card--filled:hover,
.md-card--filled.md-card--clickable:hover {
	box-shadow: var(--md-sys-elevation-level1);
}

/* ── Outlined card ────────────────────────────────────────────────────────────── */
.md-card--outlined {
	background-color: var(--md-sys-color-surface);
	border: 1px solid var(--md-sys-color-outline-variant);
	box-shadow: var(--md-sys-elevation-level0);
}

/* =============================================================================
	3. CHAMPS DE TEXTE
	MD3 propose deux variantes : Filled et Outlined.
============================================================================= */

/* ── Base commune ─────────────────────────────────────────────────────────────── */
.md-field {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--md-spacing-1);
}

.md-field__label {
	font-size: var(--md-sys-typescale-label-large-size);
	font-weight: var(--md-sys-typescale-label-large-weight);
	letter-spacing: var(--md-sys-typescale-label-large-tracking);
	color: var(--md-sys-color-on-surface-variant);
	transition: color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

.md-field__input,
.md-field__textarea,
.md-field__select {
	font-family: inherit;
	font-size: var(--md-sys-typescale-body-large-size);
	line-height: var(--md-sys-typescale-body-large-line-height);
	letter-spacing: var(--md-sys-typescale-body-large-tracking);
	color: var(--md-sys-color-on-surface);
	width: 100%;
	transition:
		border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
		box-shadow var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

.md-field__textarea { resize: vertical; min-height: 120px; }

.md-field__support {
	font-size: var(--md-sys-typescale-body-small-size);
	letter-spacing: var(--md-sys-typescale-body-small-tracking);
	color: var(--md-sys-color-on-surface-variant);
	padding-inline: var(--md-spacing-4);
}

.md-field--error .md-field__label,
.md-field--error .md-field__support {
	color: var(--md-sys-color-error);
}

/* ── Filled field ─────────────────────────────────────────────────────────────── */
.md-field--filled .md-field__input,
.md-field--filled .md-field__textarea,
.md-field--filled .md-field__select {
	background-color: var(--md-sys-color-surface-variant);
	border: none;
	border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
	border-radius: var(--md-sys-shape-corner-extra-small) var(--md-sys-shape-corner-extra-small) 0 0;
	padding: var(--md-spacing-4);
	outline: none;
}

.md-field--filled .md-field__input:focus,
.md-field--filled .md-field__textarea:focus,
.md-field--filled .md-field__select:focus {
	border-bottom: 2px solid var(--md-sys-color-primary);
}

.md-field--filled.md-field--error .md-field__input,
.md-field--filled.md-field--error .md-field__textarea {
	border-bottom-color: var(--md-sys-color-error);
}

/* ── Outlined field ───────────────────────────────────────────────────────────── */
.md-field--outlined .md-field__input,
.md-field--outlined .md-field__textarea,
.md-field--outlined .md-field__select {
	background-color: transparent;
	border: 1px solid var(--md-sys-color-outline);
	border-radius: var(--md-sys-shape-corner-extra-small);
	padding: var(--md-spacing-4);
	outline: none;
}

.md-field--outlined .md-field__input:hover,
.md-field--outlined .md-field__textarea:hover,
.md-field--outlined .md-field__select:hover {
	border-color: var(--md-sys-color-on-surface);
}

.md-field--outlined .md-field__input:focus,
.md-field--outlined .md-field__textarea:focus,
.md-field--outlined .md-field__select:focus {
	border: 2px solid var(--md-sys-color-primary);
	padding: calc(var(--md-spacing-4) - 1px); /* compense l'épaisseur de bordure */
}

.md-field--outlined.md-field--error .md-field__input,
.md-field--outlined.md-field--error .md-field__textarea {
	border-color: var(--md-sys-color-error);
}

/* Styles natifs WordPress sur les champs de formulaire */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
	font-family: inherit;
	font-size: var(--md-sys-typescale-body-large-size);
	letter-spacing: var(--md-sys-typescale-body-large-tracking);
	color: var(--md-sys-color-on-surface);
	background-color: transparent;
	border: 1px solid var(--md-sys-color-outline);
	border-radius: var(--md-sys-shape-corner-extra-small);
	padding: var(--md-spacing-3) var(--md-spacing-4);
	width: 100%;
	outline: none;
	transition: border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
	border-width: 2px;
	border-color: var(--md-sys-color-primary);
	padding: calc(var(--md-spacing-3) - 1px) calc(var(--md-spacing-4) - 1px);
}

label {
	display: block;
	margin-bottom: var(--md-spacing-1);
	font-size: var(--md-sys-typescale-label-large-size);
	font-weight: var(--md-sys-typescale-label-large-weight);
	letter-spacing: var(--md-sys-typescale-label-large-tracking);
	color: var(--md-sys-color-on-surface-variant);
}

/* =============================================================================
	4. CHECKBOX & RADIO
============================================================================= */

.md-checkbox,
.md-radio {
	display: flex;
	align-items: center;
	gap: var(--md-spacing-3);
	cursor: pointer;
	font-size: var(--md-sys-typescale-body-large-size);
	color: var(--md-sys-color-on-surface);
}

.md-checkbox input[type="checkbox"],
.md-radio input[type="radio"] {
	width: 20px;
	height: 20px;
	min-width: 20px;
	accent-color: var(--md-sys-color-primary);
	cursor: pointer;
	border: none;
	padding: 0;
}

/* =============================================================================
	5. CHIPS
	Hauteur 32px, border-radius small (8px).
============================================================================= */

.md-chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--md-spacing-1);
	height: 32px;
	padding: 0 var(--md-spacing-4);
	border-radius: var(--md-sys-shape-corner-small);
	cursor: pointer;
	overflow: hidden;
	font-family: var(--md-sys-typescale-label-font);
	font-size: var(--md-sys-typescale-label-large-size);
	font-weight: var(--md-sys-typescale-label-large-weight);
	letter-spacing: var(--md-sys-typescale-label-large-tracking);
	text-decoration: none;
	transition: box-shadow var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

.md-chip::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: currentColor;
	opacity: 0;
	transition: opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

.md-chip:hover::before { opacity: var(--md-sys-state-hover-opacity); }
.md-chip:active::before { opacity: var(--md-sys-state-pressed-opacity); }

/* Assist chip */
.md-chip--assist {
	background-color: var(--md-sys-color-surface);
	color: var(--md-sys-color-on-surface);
	border: 1px solid var(--md-sys-color-outline);
	box-shadow: var(--md-sys-elevation-level1);
}

/* Filter chip */
.md-chip--filter {
	background-color: var(--md-sys-color-surface-container-low);
	color: var(--md-sys-color-on-surface-variant);
	border: 1px solid var(--md-sys-color-outline);
}

.md-chip--filter.is-selected {
	background-color: var(--md-sys-color-secondary-container);
	color: var(--md-sys-color-on-secondary-container);
	border-color: transparent;
}

/* Input chip */
.md-chip--input {
	background-color: var(--md-sys-color-surface-container-high);
	color: var(--md-sys-color-on-surface);
	border: none;
}

/* Suggestion chip */
.md-chip--suggestion {
	background-color: var(--md-sys-color-surface-container-low);
	color: var(--md-sys-color-on-surface);
	border: 1px solid var(--md-sys-color-outline);
}

/* Groupe de chips */
.md-chip-set {
	display: flex;
	flex-wrap: wrap;
	gap: var(--md-spacing-2);
}

/* =============================================================================
	6. FAB — FLOATING ACTION BUTTON
============================================================================= */

.md-fab {
	position: fixed;
	bottom: var(--md-spacing-4);
	right: var(--md-spacing-4);
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--md-spacing-3);
	border: none;
	cursor: pointer;
	background-color: var(--md-sys-color-primary-container);
	color: var(--md-sys-color-on-primary-container);
	box-shadow: var(--md-sys-elevation-level3);
	border-radius: var(--md-sys-shape-corner-large);
	padding: var(--md-spacing-4);
	font-family: var(--md-sys-typescale-label-font);
	font-size: var(--md-sys-typescale-label-large-size);
	font-weight: var(--md-sys-typescale-label-large-weight);
	letter-spacing: var(--md-sys-typescale-label-large-tracking);
	overflow: hidden;
	transition:
		box-shadow var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

.md-fab::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: currentColor;
	opacity: 0;
	transition: opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

.md-fab:hover { box-shadow: var(--md-sys-elevation-level4); }
.md-fab:hover::before { opacity: var(--md-sys-state-hover-opacity); }
.md-fab:active { box-shadow: var(--md-sys-elevation-level3); }
.md-fab:active::before { opacity: var(--md-sys-state-pressed-opacity); }

.md-fab--small { border-radius: var(--md-sys-shape-corner-medium); padding: var(--md-spacing-2); }
.md-fab--large { border-radius: var(--md-sys-shape-corner-extra-large); padding: var(--md-spacing-6); }

/* =============================================================================
	7. BADGES
============================================================================= */

.md-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	height: 16px;
	padding: 0 var(--md-spacing-1);
	border-radius: var(--md-sys-shape-corner-full);
	background-color: var(--md-sys-color-error);
	color: var(--md-sys-color-on-error);
	font-size: var(--md-sys-typescale-label-small-size);
	font-weight: var(--md-sys-typescale-label-small-weight);
	letter-spacing: var(--md-sys-typescale-label-small-tracking);
}

.md-badge--small {
	width: 6px;
	height: 6px;
	padding: 0;
	min-width: unset;
}

/* =============================================================================
	8. LISTES MD3
============================================================================= */

.md-list {
	list-style: none;
	padding: 0;
	margin: 0;
	background: var(--md-sys-color-surface);
	border-radius: var(--md-sys-shape-corner-medium);
}

.md-list-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--md-spacing-4);
	padding: var(--md-spacing-3) var(--md-spacing-4);
	cursor: pointer;
	overflow: hidden;
	transition: background-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

.md-list-item::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--md-sys-color-on-surface);
	opacity: 0;
	transition: opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

.md-list-item:hover::before { opacity: var(--md-sys-state-hover-opacity); }
.md-list-item:active::before { opacity: var(--md-sys-state-pressed-opacity); }

.md-list-item__leading {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	color: var(--md-sys-color-on-surface-variant);
}

.md-list-item__content { flex: 1; min-width: 0; }

.md-list-item__label {
	font-size: var(--md-sys-typescale-body-large-size);
	font-weight: var(--md-sys-typescale-body-large-weight);
	letter-spacing: var(--md-sys-typescale-body-large-tracking);
	color: var(--md-sys-color-on-surface);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.md-list-item__support {
	font-size: var(--md-sys-typescale-body-medium-size);
	letter-spacing: var(--md-sys-typescale-body-medium-tracking);
	color: var(--md-sys-color-on-surface-variant);
}

.md-list-item__trailing {
	flex-shrink: 0;
	color: var(--md-sys-color-on-surface-variant);
	font-size: var(--md-sys-typescale-label-small-size);
}

.md-list-divider {
	border: none;
	border-top: 1px solid var(--md-sys-color-outline-variant);
	margin: var(--md-spacing-2) 0;
}

/* =============================================================================
	9. SNACKBAR / TOAST
============================================================================= */

.md-snackbar {
	position: fixed;
	bottom: var(--md-spacing-6);
	left: 50%;
	transform: translateX(-50%) translateY(calc(100% + var(--md-spacing-6)));
	z-index: 200;
	display: flex;
	align-items: center;
	gap: var(--md-spacing-4);
	min-width: 280px;
	max-width: min(560px, calc(100vw - var(--md-spacing-8)));
	padding: var(--md-spacing-3) var(--md-spacing-4);
	background-color: var(--md-sys-color-inverse-surface);
	color: var(--md-sys-color-inverse-on-surface);
	border-radius: var(--md-sys-shape-corner-extra-small);
	box-shadow: var(--md-sys-elevation-level3);
	font-size: var(--md-sys-typescale-body-medium-size);
	letter-spacing: var(--md-sys-typescale-body-medium-tracking);
	opacity: 0;
	transition:
		transform var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized),
		opacity var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
}

.md-snackbar.is-visible {
	transform: translateX(-50%) translateY(0);
	opacity: 1;
}

.md-snackbar__action {
	background: none;
	border: none;
	cursor: pointer;
	margin-left: auto;
	flex-shrink: 0;
	padding: var(--md-spacing-2);
	color: var(--md-sys-color-inverse-primary);
	font-size: var(--md-sys-typescale-label-large-size);
	font-weight: var(--md-sys-typescale-label-large-weight);
	letter-spacing: var(--md-sys-typescale-label-large-tracking);
	border-radius: var(--md-sys-shape-corner-extra-small);
}

/* =============================================================================
	10. INDICATEURS DE PROGRESSION
============================================================================= */

/* ── Linéaire ─────────────────────────────────────────────────────────────────── */
.md-progress-linear {
	width: 100%;
	height: 4px;
	background-color: var(--md-sys-color-surface-container-high);
	border-radius: var(--md-sys-shape-corner-full);
	overflow: hidden;
}

.md-progress-linear__track {
	height: 100%;
	background-color: var(--md-sys-color-primary);
	border-radius: inherit;
	transition: width var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
}

/* Indéterminé */
.md-progress-linear--indeterminate .md-progress-linear__track {
	width: 40%;
	animation: md-progress-indeterminate 1.5s var(--md-sys-motion-easing-emphasized) infinite;
}

@keyframes md-progress-indeterminate {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(350%); }
}

/* ── Circulaire ───────────────────────────────────────────────────────────────── */
.md-progress-circular {
	width: 48px;
	height: 48px;
	animation: md-spin 1.4s linear infinite;
}

.md-progress-circular circle {
	fill: none;
	stroke: var(--md-sys-color-primary);
	stroke-width: 4;
	stroke-dasharray: 126;
	stroke-dashoffset: 50;
	stroke-linecap: round;
}

@keyframes md-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/* =============================================================================
	11. WordPress — EN-TÊTE & TOP APP BAR
	Applique le pattern "Top App Bar" MD3 à l'en-tête WordPress.
============================================================================= */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--md-sys-color-surface-container);
	box-shadow: var(--md-sys-elevation-level2);
	transition:
		background-color var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard),
		top var(--md-sys-motion-duration-medium2) cubic-bezier(.73,.19,.28,.97),
		box-shadow var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
}

@media screen and (min-width: 783px) {
	#wpadminbar ~ .site-header:not(.static):not(.sticky),
	#wpadminbar ~ .site-header.sticky.is-scrolled {
		top: 32px;
	}
}
@media screen and (min-width: 601px) and (max-width: 782px) {
	#wpadminbar ~ .site-header:not(.static):not(.sticky),
	#wpadminbar ~ .site-header.sticky.is-scrolled {
		top: 46px;
	}
}
@media screen and (max-width: 600px) {
	.site-header.static {
		display: none !important;
		height: 0 !important;
	}
	.site-header.sticky { margin-bottom: 0 !important; }
}

.site-header.is-scrolled {
	background-color: color-mix(in srgb, var(--md-sys-color-surface-tint) 8%, var(--md-sys-color-surface));
	box-shadow: var(--md-sys-elevation-level4);
}

.site-header.sticky.is-scrolled { top: 0; }

.site-header.sticky {
	top: calc(var(--static-height) * -1);
	margin-top: calc(var(--static-height) * -1);
	border: 0;
	z-index: 99;
}

.site-header.static {
	position: relative;
	top: 0;
	display: flex;
	height: var(--static-height);
	flex-direction: column;
	justify-content: space-between;
	gap: 10px;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--md-spacing-4);
	min-height: 64px; /* hauteur Top App Bar MD3 */
	padding-inline: var(--md-spacing-4);
	max-width: 1200px;
	margin-inline: auto;
}

.site-branding {
	display: flex;
	align-self: center;
	gap: var(--md-spacing-3);
}

.site-header.static > .site-branding {
	max-width: 20vh;
	width: 15%;
}

.site-header:not(.static) .site-branding img {
	height: 48px;
	max-width: 48px;
	object-fit: contain;
}

.site-header.static > .site-branding img { margin-top: 25px; }

.site-header.static > .primary-navigation { margin-bottom: 5px; }

.site-title {
	font-size: var(--md-sys-typescale-title-large-size);
	line-height: var(--md-sys-typescale-title-large-line-height);
	font-weight: var(--md-sys-typescale-title-large-weight);
	letter-spacing: var(--md-sys-typescale-title-large-tracking);
	color: var(--md-sys-color-on-surface);
	text-decoration: none;
}

.site-title:hover { color: var(--md-sys-color-primary); }

.site-description {
	font-size: var(--md-sys-typescale-body-small-size);
	color: var(--md-sys-color-on-surface-variant);
	margin: 0;
}

.site-header__actions {
	display: grid;
	grid-auto-flow: column;
}

.site-header.static > .site-header__actions {
	position: absolute;
	top: 10px;
	right: 25px;
}

.menu-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: none;
	border: none;
	border-radius: var(--md-sys-shape-corner-full);
	color: var(--md-sys-color-on-surface-variant);
	cursor: pointer;
	font-size: 1.5rem;
	position: relative;
	overflow: hidden;
	transition: color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}
.menu-toggle:visited { color: var(--md-sys-color-on-surface-variant); }
.menu-toggle:hover { color: var(--md-sys-color-primary); }

.menu-toggle::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background-color: currentColor;
	opacity: 0;
	transition: opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

.menu-toggle:hover::before { opacity: var(--md-sys-state-hover-opacity); }
.menu-toggle:active::before { opacity: var(--md-sys-state-pressed-opacity); }

.menu-toggle svg {
	width: 50%;
	height: 50%;
}
.menu-toggle use { fill: currentColor; }

.menu-toggle.mobile { display: none; }

/* =============================================================================
	12. WordPress — NAVIGATION PRINCIPALE
============================================================================= */

.primary-navigation ul {
	list-style: none;
	padding: 0;
	margin: var(--md-spacing-1) 0 0;
	display: flex;
	column-gap: var(--md-spacing-1);
	flex-wrap: wrap;
	justify-content: center;
}

.primary-navigation a {
	position: relative;
	display: flex;
	align-items: center;
	height: 36px;
	padding: 0 var(--md-spacing-4);
	border-radius: var(--md-sys-shape-corner-full);
	color: var(--md-sys-color-on-surface-variant);
	text-decoration: none;
	font-size: var(--md-sys-typescale-label-large-size);
	font-weight: var(--md-sys-typescale-label-large-weight);
	letter-spacing: var(--md-sys-typescale-label-large-tracking);
	overflow: hidden;
	transition:
		color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
		background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

.primary-navigation a::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background-color: var(--md-sys-color-on-surface);
	opacity: 0;
	transition: opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

.primary-navigation a:hover { color: var(--md-sys-color-on-surface); }
.primary-navigation a:hover::before { opacity: var(--md-sys-state-hover-opacity); }

/* Élément actif (page courante) */
.primary-navigation .current-menu-item > a,
.primary-navigation .current_page_item > a,
.primary-navigation .current-menu-ancestor > a {
	background-color: var(--md-sys-color-secondary-container);
	color: var(--md-sys-color-on-secondary-container);
}

/* Sous-menus */
.primary-navigation li { position: relative; }

.primary-navigation .sub-menu {
	display: none;
	position: absolute;
	margin: 0;
	padding-top: calc(100% + var(--md-spacing-1));
	left: 0;
	min-width: 200px;
	background-color: var(--md-sys-color-surface-container);
	border-radius: var(--md-sys-shape-corner-medium);
	box-shadow: var(--md-sys-elevation-level2);
	flex-direction: column;
	padding: var(--md-spacing-2) 0;
	z-index: 200;
}

.primary-navigation .menu > .menu-item > .sub-menu {
	left: var(--md-spacing-2);
}
.primary-navigation li > .sub-menu .sub-menu {
	left: var(--md-spacing-8);
}

.primary-navigation li:hover > .sub-menu,
.primary-navigation li:focus-within > .sub-menu {
	display: flex;
}

.primary-navigation .sub-menu a {
	height: fit-content;
	border-radius: 0;
	padding: var(--md-spacing-1) var(--md-spacing-6);
	width: 100%;
}

.primary-navigation .menu-item-has-children > a::after {
	content: "\25BC";
	margin-left: calc(var(--md-sys-typescale-label-small-size) / 1.5);
	left: calc(var(--md-sys-typescale-label-small-size) / 1.5);
	font-size: var(--md-sys-typescale-label-small-size);
}
.primary-navigation .menu-item-has-children .menu-item-has-children > a::after {
	position: relative;
	margin-left: 0;
}

/* =============================================================================
	13. WordPress — PIED DE PAGE
============================================================================= */

.site-footer {
	background-color: var(--md-sys-color-surface-container-high);
	color: var(--md-sys-color-on-surface-variant);
	padding: var(--md-spacing-12) 0 var(--md-spacing-6);
	margin-top: var(--md-spacing-20);
}

.footer-widget-area {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--md-spacing-8);
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--md-spacing-6);
	margin-bottom: var(--md-spacing-8);
}

.footer-widget-area > .widget {
	background: var(--md-sys-color-surface-container-highest);
}

.site-info {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--md-spacing-6);
	padding-top: var(--md-spacing-6);
	border-top: 1px solid var(--md-sys-color-outline-variant);
	text-align: center;
	font-size: var(--md-sys-typescale-body-small-size);
	letter-spacing: var(--md-sys-typescale-body-small-tracking);
	color: var(--md-sys-color-on-surface-variant);
}

.site-info p { max-width: none; }

/* =============================================================================
	14. WordPress — ARTICLES & PAGES
============================================================================= */

.site-main {
	min-height: 60vh;
	padding: var(--md-spacing-10) 0;
}

.content-area {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--md-spacing-10);
	margin-inline: auto;
	padding-inline: var(--md-spacing-6);
}

.content-area.has-sidebar { grid-template-columns: 1fr 27.5%; }

/* En-tête de page / archive */
.page-header {
	margin-bottom: var(--md-spacing-8);
	padding-bottom: var(--md-spacing-6);
	border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.page-title {
	font-size: var(--md-sys-typescale-headline-large-size);
	line-height: var(--md-sys-typescale-headline-large-line-height);
	font-weight: var(--md-sys-typescale-headline-large-weight);
	color: var(--md-sys-color-on-surface);
}

.archive-description {
	margin-top: var(--md-spacing-3);
	color: var(--md-sys-color-on-surface-variant);
	font-size: var(--md-sys-typescale-body-large-size);
}

/* Article — style carte MD3 dans la liste */
.entry {
	background-color: var(--md-sys-color-surface-container-low);
	border-radius: var(--md-sys-shape-corner-medium);
	overflow: hidden;
	margin-bottom: var(--md-spacing-6);
	box-shadow: var(--md-sys-elevation-level1);
	transition: box-shadow var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

.entry:hover { box-shadow: var(--md-sys-elevation-level2); }

/* Article unique : pas de card, pleine largeur */
.entry--single {
	background: none;
	box-shadow: none;
	border-radius: 0;
}

.entry--single:hover { box-shadow: none; }

.entry-thumbnail {
	overflow: hidden;
	/*aspect-ratio: 16/9;*/
}

.entry-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	transition: transform var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
}

.entry:hover .entry-thumbnail img { transform: scale(1.03); }

.entry-header { padding: var(--md-spacing-5) var(--md-spacing-5) 0; }

.entry--single .entry-header { padding: 0 0 var(--md-spacing-4); }

.entry-title a {
	color: inherit;
	text-decoration: none;
	transition: color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

.entry-title a:hover { color: var(--md-sys-color-primary); }

.entry-title a:visited { color: var(--md-sys-color-secondary); }

.entry-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--md-spacing-3);
	align-items: center;
	font-size: var(--md-sys-typescale-label-medium-size);
	letter-spacing: var(--md-sys-typescale-label-medium-tracking);
	font-weight: var(--md-sys-typescale-label-medium-weight);
	color: var(--md-sys-color-on-surface-variant);
}

.entry-meta a {
	color: var(--md-sys-color-primary);
	text-decoration: none;
}

.entry-meta a:visited { color: var(--md-sys-color-primary); }

.entry-meta > .cat-links > a { font-style: italic; }

.entry-summary,
.entry-content {
	padding: var(--md-spacing-4) var(--md-spacing-5);
	color: var(--md-sys-color-on-surface-variant);
	font-size: var(--md-sys-typescale-body-medium-size);
}

/*.entry--single .entry-summary,
.entry--single .entry-content {
	padding: var(--md-spacing-6) 0;
	color: var(--md-sys-color-on-surface);
	font-size: var(--md-sys-typescale-body-large-size);
}*/

.entry-footer {
	padding: 0 var(--md-spacing-5) var(--md-spacing-5);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--md-spacing-2);
}

.entry--single .entry-footer {
	padding: var(--md-spacing-4) 0;
	border-top: 1px solid var(--md-sys-color-outline-variant);
	margin-top: var(--md-spacing-8);
}

/* Bouton "Lire la suite" */
.read-more {
	display: inline-flex;
	align-items: center;
	gap: var(--md-spacing-1);
	height: 40px;
	padding: 0 var(--md-spacing-6);
	border-radius: var(--md-sys-shape-corner-full);
	background-color: var(--md-sys-color-secondary-container);
	color: var(--md-sys-color-on-secondary-container);
	text-decoration: none;
	font-size: var(--md-sys-typescale-label-large-size);
	font-weight: var(--md-sys-typescale-label-large-weight);
	letter-spacing: var(--md-sys-typescale-label-large-tracking);
	position: relative;
	overflow: hidden;
	transition: box-shadow var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

.read-more::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: currentColor;
	opacity: 0;
	transition: opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

.read-more:hover { box-shadow: var(--md-sys-elevation-level1); }
.read-more:hover::before { opacity: var(--md-sys-state-hover-opacity); }
.read-more:active::before { opacity: var(--md-sys-state-pressed-opacity); }

/* Navigation prev/next article */
.post-navigation {
	display: flex;
	justify-content: space-between;
	gap: var(--md-spacing-4);
	margin: var(--md-spacing-10) 0;
	padding: var(--md-spacing-5);
	background: var(--md-sys-color-surface-container);
	border-radius: var(--md-sys-shape-corner-medium);
}

.nav-previous, .nav-next { flex: 1; }
.nav-next { text-align: right; }

.nav-subtitle {
	display: block;
	font-size: var(--md-sys-typescale-label-small-size);
	letter-spacing: var(--md-sys-typescale-label-small-tracking);
	font-weight: var(--md-sys-typescale-label-small-weight);
	color: var(--md-sys-color-on-surface-variant);
	text-transform: uppercase;
}

.nav-title {
	font-size: var(--md-sys-typescale-title-small-size);
	font-weight: var(--md-sys-typescale-title-small-weight);
	color: var(--md-sys-color-primary);
}

#about-container {
	position: relative;
	margin-bottom: var(--md-spacing-5);
	background-image: url(../../img/about.webp);
	background-size: cover;
	background-position: center top;
	border-radius: var(--md-sys-shape-corner-medium);
}

#about-backdrop {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: var(--md-sys-color-surface);
	opacity: .85;
	border-radius: var(--md-sys-shape-corner-medium);
}

#about-content {
	position: relative;
	padding: var(--md-spacing-3);
	white-space: pre-line;
	text-align: center;
}

#about-title {
	margin: var(--md-spacing-2) 0 0;
}

#about-text {
	display: inline-block;
	margin: 0 0 var(--md-spacing-8);
	line-height: var(--md-sys-typescale-body-medium-line-height);
}

/* =============================================================================
	15. WordPress — COMMENTAIRES
============================================================================= */

.comments-area {
	margin-top: var(--md-spacing-12);
	padding-top: var(--md-spacing-8);
	border-top: 1px solid var(--md-sys-color-outline-variant);
}

.comments-title {
	font-size: var(--md-sys-typescale-headline-small-size);
	line-height: var(--md-sys-typescale-headline-small-line-height);
	font-weight: var(--md-sys-typescale-headline-small-weight);
	color: var(--md-sys-color-on-surface);
	margin-bottom: var(--md-spacing-6);
}

.comment-list {
	list-style: none;
	padding: 0;
}

.comment {
	padding: var(--md-spacing-5);
	margin-bottom: var(--md-spacing-4);
	background: var(--md-sys-color-surface-container-low);
	border-radius: var(--md-sys-shape-corner-medium);
}

.bypostauthor > .comment-body {
	border-left: 3px solid var(--md-sys-color-primary);
	padding-left: var(--md-spacing-4);
}

.comment-author {
	font-weight: var(--md-sys-typescale-title-medium-weight);
	font-size: var(--md-sys-typescale-title-medium-size);
	letter-spacing: var(--md-sys-typescale-title-medium-tracking);
	color: var(--md-sys-color-on-surface);
	display: flex;
	align-items: center;
	gap: var(--md-spacing-3);
	margin-bottom: var(--md-spacing-2);
}

.comment-author img {
	border-radius: var(--md-sys-shape-corner-full);
	width: 40px;
	height: 40px;
	object-fit: cover;
}

.comment-meta {
	font-size: var(--md-sys-typescale-label-medium-size);
	letter-spacing: var(--md-sys-typescale-label-medium-tracking);
	color: var(--md-sys-color-on-surface-variant);
	margin-bottom: var(--md-spacing-3);
}

.comment-meta a {
	color: var(--md-sys-color-on-surface-variant);
	text-decoration: none;
}

.comment-content p { max-width: none; color: var(--md-sys-color-on-surface); }

.reply { margin-top: var(--md-spacing-3); }

.comment-reply-link {
	font-size: var(--md-sys-typescale-label-large-size);
	font-weight: var(--md-sys-typescale-label-large-weight);
	letter-spacing: var(--md-sys-typescale-label-large-tracking);
	color: var(--md-sys-color-primary);
	text-decoration: none;
}

/* Formulaire de commentaire */
.comment-respond {
	margin-top: var(--md-spacing-10);
	padding: var(--md-spacing-6);
	background: var(--md-sys-color-surface-container-low);
	border-radius: var(--md-sys-shape-corner-medium);
}

.comment-reply-title {
	font-size: var(--md-sys-typescale-title-large-size);
	font-weight: var(--md-sys-typescale-title-large-weight);
	color: var(--md-sys-color-on-surface);
	margin-bottom: var(--md-spacing-6);
}

.comment-form p {
	margin-bottom: var(--md-spacing-4); 
	max-width: none;
}

.comment-form .submit {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 var(--md-spacing-6);
	background-color: var(--md-sys-color-primary);
	color: var(--md-sys-color-on-primary);
	border: none;
	border-radius: var(--md-sys-shape-corner-full);
	cursor: pointer;
	font-size: var(--md-sys-typescale-label-large-size);
	font-weight: var(--md-sys-typescale-label-large-weight);
	letter-spacing: var(--md-sys-typescale-label-large-tracking);
	transition: box-shadow var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

.comment-form .submit:hover { box-shadow: var(--md-sys-elevation-level1); }

/* =============================================================================
	16. WordPress — WIDGETS & SIDEBAR
============================================================================= */

.widget-area {
	display: flex;
	flex-direction: column;
	gap: var(--md-spacing-4);
}

.widget {
	--widgetHorizPadding: 6%;
	padding: var(--md-spacing-5) var(--widgetHorizPadding);
	background: var(--md-sys-color-surface-container-low);
	border-radius: var(--md-sys-shape-corner-medium);
}

.widget ul {
	list-style: none;
	padding: 0;
}

.widget ul li {
	padding: var(--md-spacing-2) 0;
	border-bottom: 1px solid var(--md-sys-color-outline-variant);
	color: var(--md-sys-color-on-surface-variant);
	font-size: var(--md-sys-typescale-body-medium-size);
}

.widget ul li:last-child { border-bottom: none; }

.widget ul li a {
	color: var(--md-sys-color-on-surface-variant);
	text-decoration: none;
}

.widget ul li a:hover { color: var(--md-sys-color-primary); }

.widget-title {
	font-size: var(--md-sys-typescale-title-medium-size);
	font-weight: var(--md-sys-typescale-title-medium-weight);
	letter-spacing: var(--md-sys-typescale-title-medium-tracking);
	color: var(--md-sys-color-on-surface);
	margin-bottom: var(--md-spacing-4);
	padding-bottom: var(--md-spacing-3);
	border-bottom: 2px solid var(--md-sys-color-primary);
}

.widget-title a {
	color: var(--md-sys-color-primary);
	text-decoration: none;
	filter: none;
}

/* =============================================================================
	17. WordPress — PAGINATION
============================================================================= */

.navigation { margin: var(--md-spacing-8) 0; }

.nav-links {
	display: flex;
	justify-content: space-between;
	gap: var(--md-spacing-4);
	flex-wrap: wrap;
}

.nav-links a {
	display: inline-flex;
	align-items: center;
	gap: var(--md-spacing-2);
	padding: var(--md-spacing-2) var(--md-spacing-5);
	background: var(--md-sys-color-surface-container);
	border-radius: var(--md-sys-shape-corner-full);
	color: var(--md-sys-color-primary);
	text-decoration: none;
	font-size: var(--md-sys-typescale-label-large-size);
	font-weight: var(--md-sys-typescale-label-large-weight);
	letter-spacing: var(--md-sys-typescale-label-large-tracking);
	transition: box-shadow var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

.nav-links a:hover { box-shadow: var(--md-sys-elevation-level1); }

/* Pagination numérotée */
.page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: var(--md-spacing-1);
	align-items: center;
	list-style: none;
	padding: 0;
}

.page-numbers a,
.page-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--md-sys-shape-corner-full);
	text-decoration: none;
	font-size: var(--md-sys-typescale-label-large-size);
	font-weight: var(--md-sys-typescale-label-large-weight);
	color: var(--md-sys-color-on-surface-variant);
	transition: background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

.page-numbers a:hover {
	background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
	color: var(--md-sys-color-on-surface);
}

.page-numbers .current {
	background-color: var(--md-sys-color-secondary-container);
	color: var(--md-sys-color-on-secondary-container);
}

.page-numbers .dots {
	width: auto;
	color: var(--md-sys-color-on-surface-variant);
}

/* =============================================================================
	18. IMAGES, GALERIES & ALIGNEMENTS GUTENBERG
============================================================================= */

/* Images WordPress avec légende */
.wp-caption {
	max-width: 100%;
	margin-bottom: var(--md-spacing-6);
}

.wp-caption img { border-radius: var(--md-sys-shape-corner-small); }

.wp-caption-text {
	margin-top: var(--md-spacing-2);
	font-size: var(--md-sys-typescale-body-small-size);
	letter-spacing: var(--md-sys-typescale-body-small-tracking);
	color: var(--md-sys-color-on-surface-variant);
	text-align: center;
}

/* Galerie WordPress native */
.gallery {
	display: grid;
	grid-template-columns: repeat(var(--gallery-columns, 3), 1fr);
	gap: var(--md-spacing-2);
	margin-bottom: var(--md-spacing-6);
}

.gallery-item {
	overflow: hidden;
	border-radius: var(--md-sys-shape-corner-small);
	aspect-ratio: 1;
}

.gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	transition: transform var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
}

.gallery-item:hover img { transform: scale(1.05); }

/* Alignements Gutenberg */
.aligncenter, .alignleft, .alignright {
    display: block;
    padding: 0;
}

.alignleft {
	float: left;
	margin: 0 var(--md-spacing-6) var(--md-spacing-4) 0;
}

.alignright {
	float: right;
	margin: 0 0 var(--md-spacing-4) var(--md-spacing-6);
}

.aligncenter {
	float: none;
	margin-inline: auto;
	margin-bottom: var(--md-spacing-6);
	text-align: center;
}

.alignwide {
	margin-inline: calc(-1 * var(--md-spacing-8));
	max-width: calc(100% + var(--md-spacing-16));
}

.alignfull {
	margin-inline: calc(-1 * var(--md-spacing-6));
	max-width: calc(100% + var(--md-spacing-12));
}

@media (min-width: 1200px) {
	.alignfull {
		margin-inline: calc(-1 * ((100vw - 1200px) / 2 + var(--md-spacing-6)));
		max-width: 100vw;
	}
}

/* =============================================================================
	19. WordPress — FORMULAIRE DE RECHERCHE
============================================================================= */

.search-form {
	display: flex;
	gap: var(--md-spacing-2);
	flex-wrap: wrap;
}

.search-field {
	flex: 1;
	min-width: 200px;
	height: 48px;
	padding: 0 var(--md-spacing-5);
	background: var(--md-sys-color-surface-container-high);
	border: 1px solid var(--md-sys-color-outline);
	border-radius: var(--md-sys-shape-corner-full);
	color: var(--md-sys-color-on-surface);
	font-size: var(--md-sys-typescale-body-large-size);
	font-family: inherit;
	outline: none;
	transition: border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

.search-field:focus {
	border-color: var(--md-sys-color-primary);
	border-width: 2px;
	padding: 0 calc(var(--md-spacing-5) - 1px);
}

.search-submit {
	height: 48px;
	padding: 0 var(--md-spacing-6);
	background-color: var(--md-sys-color-primary);
	color: var(--md-sys-color-on-primary);
	border: none;
	border-radius: var(--md-sys-shape-corner-full);
	cursor: pointer;
	font-size: var(--md-sys-typescale-label-large-size);
	font-weight: var(--md-sys-typescale-label-large-weight);
	letter-spacing: var(--md-sys-typescale-label-large-tracking);
	font-family: inherit;
	transition: box-shadow var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

.search-submit:hover { box-shadow: var(--md-sys-elevation-level1); }

/* =============================================================================
	20. WordPress — PAGE 404 & AUCUN RÉSULTAT
============================================================================= */

.error-404,
.no-results {
	text-align: center;
	padding: var(--md-spacing-20) var(--md-spacing-6);
}

.error-404 .page-title {
	font-size: clamp(6rem, 20vw, 12rem);
	line-height: 1;
	color: var(--md-sys-color-surface-container-highest);
	font-weight: 700;
	margin-bottom: 0;
}

.error-404 h2 {
	font-size: var(--md-sys-typescale-headline-medium-size);
	line-height: var(--md-sys-typescale-headline-medium-line-height);
	color: var(--md-sys-color-on-surface);
	margin-bottom: var(--md-spacing-4);
}

.error-404 p {
	color: var(--md-sys-color-on-surface-variant);
	margin-inline: auto;
}

.error-404 .search-form {
	max-width: 480px;
	margin: var(--md-spacing-8) auto;
}

/* =============================================================================
	21. EVENTS MANAGER (EM)
============================================================================= */

.em.pixelbones .button.input:not([data-nostyle]), 
.em.pixelbones button.input:not([data-nostyle]), 
.em.pixelbones input[type=submit].input:not([data-nostyle]), 
.em.pixelbones input[type=reset].input:not([data-nostyle]), 
.em.pixelbones input[type=button].input:not([data-nostyle]), 
.em.pixelbones.input .button:not([data-nostyle]), 
.em.pixelbones.input button:not([data-nostyle]), 
.em.pixelbones.input input[type=submit]:not([data-nostyle]), 
.em.pixelbones.input input[type=reset]:not([data-nostyle]), 
.em.pixelbones.input input[type=button]:not([data-nostyle]), 
.em.pixelbones .input .button:not([data-nostyle]), 
.em.pixelbones .input button:not([data-nostyle]), 
.em.pixelbones .input input[type=submit]:not([data-nostyle]), 
.em.pixelbones .input input[type=reset]:not([data-nostyle]), 
.em.pixelbones .input input[type=button]:not([data-nostyle]),
.em.em-item .em-item-meta .em-item-meta-line {
	color: var(--md-sys-color-on-surface) !important;
	border-color: var(--md-sys-color-outline) !important;
}

.em.pixelbones .button.input:not([data-nostyle]):hover, 
.em.pixelbones button.input:not([data-nostyle]):hover, 
.em.pixelbones input[type=submit].input:not([data-nostyle]):hover, 
.em.pixelbones input[type=reset].input:not([data-nostyle]):hover, 
.em.pixelbones input[type=button].input:not([data-nostyle]):hover, 
.em.pixelbones.input .button:not([data-nostyle]):hover, 
.em.pixelbones.input button:not([data-nostyle]):hover, 
.em.pixelbones.input input[type=submit]:not([data-nostyle]):hover, 
.em.pixelbones.input input[type=reset]:not([data-nostyle]):hover, 
.em.pixelbones.input input[type=button]:not([data-nostyle]):hover, 
.em.pixelbones .input .button:not([data-nostyle]):hover, 
.em.pixelbones .input button:not([data-nostyle]):hover, 
.em.pixelbones .input input[type=submit]:not([data-nostyle]):hover, 
.em.pixelbones .input input[type=reset]:not([data-nostyle]):hover, 
.em.pixelbones .input input[type=button]:not([data-nostyle]):hover,
.em.pixelbones .input .button:not([data-nostyle]):hover {
	color: var(--md-sys-color-on-surface) !important;
	border-color: var(--md-sys-color-outline) !important;
	filter: invert(.4) saturate(1.4) !important;
}

.em.pixelbones .input textarea {
	background-color: var(--md-sys-color-on-secondary) !important;
	border-color: var(--md-sys-color-outline) !important;
}

.em.pixelbones .input select:not([multiple]) {
	background: var(--md-sys-color-on-secondary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 15 15'%3E%3Cpath stroke='%23555' stroke-linecap='square' d='m4.5 6.5 3 3 3-3'/%3E%3C/svg%3E") no-repeat right 0 top 55% !important;
	border-color: var(--md-sys-color-outline) !important;
}

.em.pixelbones a,
.em.em-item .em-item-meta .em-item-meta-line a {
	color: var(--md-sys-color-primary) !important;
	text-decoration: 1px underline;
	text-underline-offset: 3px;
}

.em.pixelbones a:visited,
.em.em-item .em-item-meta .em-item-meta-line a:visited {
	color: var(--md-sys-color-secondary) !important;
}

.em.pixelbones a:hover,
.em.em-item .em-item-meta .em-item-meta-line a:hover {
	filter: invert(.2) saturate(1.2) brightness(.9) !important;
	text-decoration-thickness: 1px;
	text-shadow: 0px 0px 1px #BBB;
}

.em.pixelbones .all-events-link {
	color: var(--md-sys-color-primary) !important;
	text-align: center;
	list-style-type: none;
}

.em.pixelbones .all-events-link a {
	color: var(--md-sys-color-primary) !important;
	font-size: 1.25rem;
}

.single-location .location .entry-meta {
	display: none;
}

/* --- Widget agenda --- */

.em.em-calendar .em-cal-nav .month-nav .em-calnav:hover, 
.em.em-calendar .em-cal-nav .month-nav .em-calnav:hover svg, 
.em.em-calendar .em-cal-nav .month-nav .em-calnav:hover path {
	filter: none !important;
}

.em.em-calendar .em-cal-nav .month-nav .em-calnav svg path {
	stroke: var(--md-sys-color-on-surface-variant);
}

.em.em-calendar .em-cal-nav .month-nav .em-calnav:hover svg path {
	filter: invert(.5) !important;
}

.em.em-list-widget > .em-item > .em-item-image {
	margin-right: -40%;
	width: 70%;
	height: 80px;
	align-self: center;
}

.em.em-list-widget > .em-item > .em-item-image.has-placeholder {
	padding-left: calc(15% - 35px);
	justify-content: normal;
	align-items: normal;
}

.em.em-list-widget > .em-item > .em-item-image.has-placeholder > .em-item-image-placeholder > .date > .day { line-height: 26px !important; }

.em.em-list-widget > .em-item > .em-item-image > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.em.em-list-widget > .em-item > .em-item-info {
	padding: 0;
	width: 70%;
	align-content: center;
	color: var(--md-sys-color-on-surface);
	background-color: var(--md-sys-color-surface-container-low);
}

.em.em-list-widget > .em-item > .em-item-info > .em-item-name {
	margin-right: calc(var(--widgetHorizPadding) * -1);
	padding: 0 var(--widgetHorizPadding);
}

.em.em-list-widget > .em-item > .em-item-info > .em-item-name a {
	color: var(--default-border) !important;
	text-shadow: 0px 0px 1px #BBB;
}

.em.em-list-widget > .em-item > .em-item-info > .em-item-meta {
	font-size: var(--md-sys-typescale-body-medium-size);
}

.em.em-list-widget > .em-item > .em-item-info > .em-item-meta > .em-item-meta-line {
	grid-template-columns: 17% 1fr;
	gap: var(--md-spacing-1);
}

.em.em-list-widget > .em-item > .em-item-info > .em-item-meta > .em-item-meta-line > .em-icon {
	margin: 0;
	justify-self: right;
	background-position: center;
}

/* --- Réservations --- */

.em-event > .em-event-content > p {
	margin-bottom: var(--md-spacing-3) !important;
	padding-left: var(--md-spacing-4) !important;
	white-space: break-spaces;
}

.em-event-content > p > strong {
	margin-left: calc(var(--md-spacing-4) * -1);
	white-space: normal;
	line-height: 2rem;
}

.em .em-event-bookings > p,
.em-event-booking-form {
	margin-left: var(--md-spacing-4) !important;
}

.em.em-event-booking-form .em-booking-section {
	padding: 0;
}

.em-booking-form {
	display: grid;
	grid-template-columns: minmax(70px, 10%) minmax(100px, 60%)
}

.em-booking-form-section-summary {
	display: none;
}

.em-booking-form-section-confirm {
	grid-column-start: span 2;
}

/* =============================================================================
	22. FEED THEM SOCIAL (FTS)
============================================================================= */

.fts-jal-fb-group-display.fts-simple-fb-wrapper {
	display: flex;
	padding: 0 !important;
	background: none !important;
	flex-direction: column;
	row-gap: var(--md-spacing-4);
}

.fts-jal-fb-group-display > .fts-jal-single-fb-post {
	border-radius: var(--md-sys-shape-corner-medium);
	padding: 15px 20px 10px !important;
	background-color: var(--md-sys-color-surface-container-low) !important;
	box-shadow: var(--md-sys-elevation-level1);
}

.fts-jal-fb-group-display > .fts-jal-single-fb-post a { transition: none; }
.fts-jal-fb-group-display > .fts-jal-single-fb-post a:hover { color: var(--md-sys-color-error); }

.fts-jal-fb-message { font-size: var(--md-sys-typescale-body-medium-size); }

.fts-jal-fb-right-wrap {
	display: grid;
	grid-template-columns: 1fr 40%;
	column-gap: 2%;
}

.fts-album-photos-wrap {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

/* Affichage compact du fil Facebook */
@media (max-width: 1024px) {
	.fts-jal-fb-right-wrap { display: block; }
	.fts-album-photos-wrap img { max-height: 60vh; }
}

/* =============================================================================
	RESPONSIVE — POINTS DE RUPTURE
	MD3 : compact (< 600px) / medium (600-904px) / expanded (> 904px)
============================================================================= */

/* Compact — mobile */
@media (max-width: 599px) {
	.site-header__inner { height: 56px; }

	.menu-toggle.mobile { display: inline-flex; }
	
	.primary-navigation {
		display: none;
		position: fixed;
		top: 64px;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99;
		background-color: var(--md-sys-color-surface-container);
		overflow-y: auto;
		padding: var(--md-spacing-4);
		animation: md-nav-slide-in var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decel);
	}

	#wpadminbar ~ .site-header:not(.is-scrolled) .primary-navigation {
		top: calc(64px + 46px);
	}

	@keyframes md-nav-slide-in {
		from { transform: translateY(-8px); opacity: 0; }
		to { transform: translateY(0); opacity: 1; }
	}

	.primary-navigation.is-open { display: block; }

	.primary-navigation ul {
		flex-direction: column;
		gap: var(--md-spacing-1);
	}

	.primary-navigation a {
		height: 48px;
		border-radius: var(--md-sys-shape-corner-small);
		padding: 0 var(--md-spacing-5);
	}

	.primary-navigation .sub-menu {
		position: static;
		box-shadow: none;
		border-radius: 0;
		padding: 0 0 0 var(--md-spacing-5);
		border-left: 2px solid var(--md-sys-color-outline-variant);
		margin-left: var(--md-spacing-4);
		display: flex;
	}

	.entry-thumbnail { aspect-ratio: 16/7; }

	.gallery { --gallery-columns: 2; }

	.alignleft,
	.alignright {
		float: none;
		margin-inline: 0;
	}

	.post-navigation { flex-direction: column; }
	.nav-next { text-align: left; }
}

/* Medium — tablette */
@media (min-width: 600px) and (max-width: 904px) {
	.gallery { --gallery-columns: 2; }
}


/* WordPress — tablette */
@media (max-width: 768px) {
	.menu-toggle.mobile { display: inline-flex; }
	
	.content-area.has-sidebar { grid-template-columns: 1fr; }
}