/*
Theme Name: LMN
Theme URI: https://livingmuseumneuchatel.ch/
Author: Association Living Museum Neuchâtel
Author URI: https://livingmuseumneuchatel.ch/
Description: Thème de blocs sur mesure pour le Living Museum Neuchâtel. Toutes les couleurs, tailles et espacements viennent de theme.json ; ce fichier ne contient que ce que theme.json ne sait pas exprimer (survols, bandeau défilant, cases à cocher en pastilles, séparateurs en vague, animations).
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lmn
Tags: full-site-editing, block-patterns, custom-colors, custom-menu, one-column, accessibility-ready
*/

/* ==========================================================================
   0. Variables locales
   ========================================================================== */

:root {
	--lmn-vague-bas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,58 C160,22 340,6 520,26 C700,46 880,74 1060,64 C1200,56 1330,26 1440,10 L1440,0 L0,0 Z' fill='%23000'/%3E%3C/svg%3E");
	--lmn-vague-haut: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,22 C170,60 350,74 530,52 C710,30 890,4 1070,16 C1210,26 1340,56 1440,70 L1440,0 L0,0 Z' fill='%23000'/%3E%3C/svg%3E");
	--lmn-hauteur-vague: clamp(40px, 4.6vw, 78px);
	--lmn-icone-coeur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5'/%3E%3C/svg%3E");
	--lmn-icone-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E");
}

/* ==========================================================================
   1. Base
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

/* Le pied de page jaune doit toucher le bas de l'écran, même sur une page
   très courte (page 404, résultat de recherche vide). */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

/* Les sections portent leur propre respiration : il ne doit rien y avoir entre
   le bandeau, l'en-tête, le contenu et le pied de page. Sans cette règle,
   l'espacement entre blocs laisse une bande sombre sous l'en-tête. */
.wp-site-blocks > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* L'en-tête est collant : les ancres ne doivent pas passer dessous. */
:where([id]) {
	scroll-margin-top: 96px;
}

p,
li {
	text-wrap: pretty;
}

h1, h2, h3,
.wp-block-post-title {
	text-wrap: balance;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* ==========================================================================
   2. Liens et boutons
   ========================================================================== */

a {
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

a:where(:not(.wp-element-button)):hover,
a:where(:not(.wp-element-button)):focus-visible {
	color: var(--wp--preset--color--jaune);
}

.wp-element-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Bouton « Contour » — fond anthracite, bordure grise, survol jaune. */
.wp-block-button.is-style-lmn-contour > .wp-block-button__link {
	background-color: var(--wp--preset--color--anthracite);
	color: var(--wp--preset--color--blanc);
	border: 1px solid var(--wp--preset--color--gris-fonce);
}

.wp-block-button.is-style-lmn-contour > .wp-block-button__link:hover,
.wp-block-button.is-style-lmn-contour > .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--jaune);
	color: var(--wp--preset--color--noir);
	border-color: var(--wp--preset--color--jaune);
}

/* Bouton « Contour clair » — pour les sections sur fond jaune ou clair. */
.wp-block-button.is-style-lmn-contour-clair > .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--noir);
	border: 1px solid var(--wp--preset--color--noir);
}

.wp-block-button.is-style-lmn-contour-clair > .wp-block-button__link:hover,
.wp-block-button.is-style-lmn-contour-clair > .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--noir);
	color: var(--wp--preset--color--jaune);
}

/* Flèche « → » ajoutée aux boutons qui portent la classe utilitaire. */
.wp-block-button.is-style-lmn-fleche > .wp-block-button__link::after {
	content: "";
	flex: none;
	width: 15px;
	height: 15px;
	background-color: currentColor;
	-webkit-mask-image: var(--lmn-fleche);
	mask-image: var(--lmn-fleche);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

:root {
	--lmn-fleche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
}

/* Focus visible partout, y compris sur fond jaune. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--jaune);
	outline-offset: 3px;
}

.has-jaune-background-color :where(a, button, input, select, textarea, summary):focus-visible,
.has-blanc-casse-background-color :where(a, button, input, select, textarea, summary):focus-visible {
	outline-color: var(--wp--preset--color--noir);
}

/* ==========================================================================
   3. Styles de blocs enregistrés (functions.php)
   ========================================================================== */

/* Paragraphe — « Surtitre » */
.is-style-lmn-surtitre {
	font-size: var(--wp--preset--font-size--surtitre);
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--jaune);
	margin-bottom: 16px;
}

/* Paragraphe — « Étiquette accent » (Gelasio italique jaune) */
.is-style-lmn-etiquette-accent {
	font-family: var(--wp--preset--font-family--accent);
	font-style: italic;
	font-weight: 400;
	color: var(--wp--preset--color--jaune);
}

/* Paragraphe — « Compteur animé » */
.is-style-lmn-compteur {
	font-size: clamp(2.4rem, 4.4vw, 3.8rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--wp--preset--color--jaune);
	font-variant-numeric: tabular-nums;
	margin: 8px 0 0;
}

/* Titre — « Apparition mot à mot » : aucun style propre, le JS s'en charge. */
.is-style-lmn-mot-a-mot > span[data-lmn-mot] {
	display: inline-block;
	will-change: opacity, transform;
}

/* Groupe — « Carte » (fond anthracite) */
.wp-block-group.is-style-lmn-carte {
	background-color: var(--wp--preset--color--anthracite);
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: var(--wp--custom--radius--carte);
	padding: clamp(28px, 3vw, 42px);
}

/* Groupe — « Carte claire » (fond blanc, sections claires) */
.wp-block-group.is-style-lmn-carte-claire {
	background-color: var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--gris-moyen);
	border: 1px solid var(--wp--preset--color--bordure-claire);
	border-radius: var(--wp--custom--radius--carte);
	padding: clamp(24px, 2.8vw, 36px);
}

.wp-block-group.is-style-lmn-carte-claire :where(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--noir);
}

/* Groupe — « Carte jaune » */
.wp-block-group.is-style-lmn-carte-jaune {
	background-color: var(--wp--preset--color--jaune);
	color: var(--wp--preset--color--gris-fonce);
	border-radius: var(--wp--custom--radius--carte);
	padding: clamp(22px, 2.4vw, 30px) clamp(22px, 2.6vw, 34px);
}

.wp-block-group.is-style-lmn-carte-jaune :where(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--noir);
}

/* Groupe — « Carte portrait » : photo à fond perdu en haut, texte en dessous.
   Utilisée pour les membres du comité ; chaque personne est un groupe à part,
   donc dupliquer ou supprimer quelqu'un reste une opération d'un seul geste. */
.wp-block-group.is-style-lmn-carte-portrait {
	background-color: var(--wp--preset--color--anthracite);
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: var(--wp--custom--radius--carte);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: 0;
}

.wp-block-group.is-style-lmn-carte-portrait > .wp-block-image {
	margin: 0;
}

.wp-block-group.is-style-lmn-carte-portrait > .wp-block-image img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	background-color: var(--wp--preset--color--noir);
	border-radius: 0;
}

/* Portrait pas encore reçu : les initiales, à la place et à la taille de la
   photo (voir lmn_portrait_initiales dans functions.php). */
.lmn-portrait-initiales {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 3 / 4;
	margin: 0;
	background-color: var(--wp--preset--color--noir);
	color: var(--wp--preset--color--jaune);
	font-family: var(--wp--preset--font-family--titres);
	font-size: clamp(3rem, 5vw, 4.5rem);
	font-weight: 800;
	letter-spacing: 0.04em;
	line-height: 1;
}

/* Téléphone : une carte par ligne avec un portrait pleine largeur faisait
   défiler longtemps ; la carte passe en ligne, petit portrait à gauche. */
@media (max-width: 599px) {
	.wp-block-group.is-style-lmn-carte-portrait {
		flex-direction: row;
	}

	.wp-block-group.is-style-lmn-carte-portrait > .wp-block-image {
		position: relative;
		flex: 0 0 112px;
		min-height: 150px;
	}

	.wp-block-group.is-style-lmn-carte-portrait > .lmn-portrait-initiales {
		flex: 0 0 112px;
		width: 112px;
		min-height: 150px;
		aspect-ratio: auto;
		font-size: 2.25rem;
	}

	/* Le portrait remplit la hauteur de la carte, fixée par le texte. */
	.wp-block-group.is-style-lmn-carte-portrait > .wp-block-image img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		aspect-ratio: auto !important;
	}

	.wp-block-group.is-style-lmn-carte-portrait > .wp-block-group {
		flex: 1;
		min-width: 0;
		padding: 16px 18px !important;
	}
}

/* Cartes d'appel à l'action, avec une icône jaune en haut. */
.wp-block-group.is-style-lmn-carte-coeur,
.wp-block-group.is-style-lmn-carte-plus {
	background-color: var(--wp--preset--color--anthracite);
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: var(--wp--custom--radius--carte);
	padding: clamp(28px, 3vw, 42px);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.wp-block-group.is-style-lmn-carte-coeur::before,
.wp-block-group.is-style-lmn-carte-plus::before {
	content: "";
	display: block;
	flex: none;
	width: 24px;
	height: 24px;
	margin-bottom: 18px;
	background-color: var(--wp--preset--color--jaune);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.wp-block-group.is-style-lmn-carte-coeur::before {
	-webkit-mask-image: var(--lmn-icone-coeur);
	mask-image: var(--lmn-icone-coeur);
}

.wp-block-group.is-style-lmn-carte-plus::before {
	-webkit-mask-image: var(--lmn-icone-plus);
	mask-image: var(--lmn-icone-plus);
}

/* Le dernier bouton d'une carte se colle en bas, pour que deux cartes côte à
   côte alignent leurs boutons même si leurs textes ont des longueurs
   différentes. */
.wp-block-group.is-style-lmn-carte-coeur > .wp-block-buttons:last-child,
.wp-block-group.is-style-lmn-carte-plus > .wp-block-buttons:last-child,
.wp-block-group.is-style-lmn-carte > .wp-block-buttons:last-child {
	margin-top: auto;
	padding-top: 28px;
}

/* Liste — « Liste de partenaires » : tuiles centrées, responsives. */
.wp-block-list.is-style-lmn-liste-partenaires {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
	gap: 12px;
}

.wp-block-list.is-style-lmn-liste-partenaires > li {
	display: grid;
	place-items: center;
	min-height: 84px;
	background-color: var(--wp--preset--color--anthracite);
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: var(--wp--custom--radius--petit);
	padding: 16px;
	text-align: center;
	font-size: 1.125rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gris-clair);
}

/* Liste — « Liste de liens » : colonne sans puces (menus de pied de page). */
.wp-block-list.is-style-lmn-liste-liens {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 11px;
	font-size: 1.125rem;
}

.wp-block-list.is-style-lmn-liste-liens > li {
	margin: 0;
}

/* ==========================================================================
   4. Séparateurs en vague (style de bloc « Séparateur »)
   ========================================================================== */

.wp-block-separator.is-style-lmn-vague-bas,
.wp-block-separator.is-style-lmn-vague-haut {
	position: relative;
	height: var(--lmn-hauteur-vague);
	/* Surtout pas width:100% : la pleine largeur vient des marges négatives que
	   WordPress applique à .alignfull, et une largeur fixée à 100 % du parent
	   les annule visuellement (la vague resterait en retrait de 28 px). */
	width: auto;
	max-width: none;
	margin-block: 0;
	border: 0;
	opacity: 1;
	overflow: hidden;
	z-index: 1;
	line-height: 0;
}

/* Une vague colle à la section qui la suit : sans cela, l'espacement entre
   blocs laisse voir une bande du fond de page entre la vague et la section.
   Sélecteur volontairement plus spécifique que la règle d'espacement que
   WordPress génère pour le conteneur (.wp-container-… > *). */
.wp-site-blocks .wp-block-separator.is-style-lmn-vague-bas,
.wp-site-blocks .wp-block-separator.is-style-lmn-vague-haut,
.wp-site-blocks .wp-block-separator.is-style-lmn-vague-bas + *,
.wp-site-blocks .wp-block-separator.is-style-lmn-vague-haut + * {
	margin-block-start: 0;
}

/* Et la vague ne doit pas non plus se décoller de la section qui la précède. */
.wp-site-blocks .wp-block-separator.is-style-lmn-vague-bas,
.wp-site-blocks .wp-block-separator.is-style-lmn-vague-haut {
	margin-block-end: 0;
}

.wp-block-separator.is-style-lmn-vague-bas::before,
.wp-block-separator.is-style-lmn-vague-haut::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -2px;
	height: calc(100% + 2px);
	background-color: currentColor;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.wp-block-separator.is-style-lmn-vague-bas::before {
	-webkit-mask-image: var(--lmn-vague-bas);
	mask-image: var(--lmn-vague-bas);
}

.wp-block-separator.is-style-lmn-vague-haut::before {
	-webkit-mask-image: var(--lmn-vague-haut);
	mask-image: var(--lmn-vague-haut);
}

/* Dans l'éditeur, montrer à quoi sert le bloc quand il est sélectionné. */
.editor-styles-wrapper .wp-block-separator.is-style-lmn-vague-bas,
.editor-styles-wrapper .wp-block-separator.is-style-lmn-vague-haut {
	min-height: 40px;
}

/* ==========================================================================
   5. Bandeau défilant (marquee)
   ========================================================================== */

.is-style-lmn-bandeau-defilant {
	overflow: hidden;
	white-space: nowrap;
	padding-block: 9px;
}

.is-style-lmn-bandeau-defilant > * {
	margin: 0;
}

/* Piste dupliquée par le JS ; sans JS le texte reste lisible et statique. */
.is-style-lmn-bandeau-defilant .lmn-piste {
	display: inline-flex;
	width: max-content;
	gap: 0;
}

html.lmn-js .is-style-lmn-bandeau-defilant .lmn-piste {
	animation: lmn-defile var(--wp--custom--marquee--duree) linear infinite;
}

html.lmn-js .is-style-lmn-bandeau-defilant:hover .lmn-piste,
html.lmn-js .is-style-lmn-bandeau-defilant:focus-within .lmn-piste,
html.lmn-js .is-style-lmn-bandeau-defilant.lmn-en-pause .lmn-piste {
	animation-play-state: paused;
}

/* Bouton pause et lecture ajouté par le JS à chaque bandeau qui défile :
   le survol et le focus ne suffisent pas au doigt. Il reprend le fond du
   bandeau pour masquer le texte qui passe dessous. */
.is-style-lmn-bandeau-defilant,
.is-style-lmn-bandeau-disciplines,
.is-style-lmn-bandeau-logos {
	position: relative;
}

.lmn-pause {
	position: absolute;
	top: 50%;
	right: max(8px, var(--wp--style--root--padding-right, 28px) - 8px);
	z-index: 1;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 2px solid currentColor;
	border-radius: var(--wp--custom--radius--pilule);
	background-color: inherit;
	color: inherit;
	cursor: pointer;
}

/* Zone de toucher de 44 px autour du rond visible. */
.lmn-pause::before {
	content: "";
	position: absolute;
	inset: -4px;
}

.lmn-pause:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 2px;
}

.is-style-lmn-bandeau-disciplines > .lmn-pause {
	color: var(--wp--preset--color--jaune);
}

.is-style-lmn-bandeau-logos > .lmn-pause {
	color: var(--wp--preset--color--noir);
}

.is-style-lmn-bandeau-defilant a {
	display: block;
	color: inherit;
	text-decoration: none;
}

.is-style-lmn-bandeau-defilant a:hover,
.is-style-lmn-bandeau-defilant a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.is-style-lmn-bandeau-defilant a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -4px;
}

@keyframes lmn-defile {
	to {
		transform: translateX(-50%);
	}
}

/* Variante « disciplines » : grand texte jaune sur fond noir, bords estompés. */
.is-style-lmn-bandeau-disciplines {
	overflow: hidden;
	white-space: nowrap;
	padding-block: clamp(10px, 1.6vw, 22px);
}

/* Le fondu porte sur le texte seul : le bouton pause reste net. */
.is-style-lmn-bandeau-disciplines > :not(.lmn-pause) {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
}

.is-style-lmn-bandeau-disciplines > * {
	margin: 0;
}

.is-style-lmn-bandeau-disciplines .lmn-piste {
	display: inline-flex;
	width: max-content;
}

html.lmn-js .is-style-lmn-bandeau-disciplines .lmn-piste {
	animation: lmn-defile 34s linear infinite;
}

html.lmn-js .is-style-lmn-bandeau-disciplines:hover .lmn-piste,
html.lmn-js .is-style-lmn-bandeau-disciplines:focus-within .lmn-piste,
html.lmn-js .is-style-lmn-bandeau-disciplines.lmn-en-pause .lmn-piste {
	animation-play-state: paused;
}

.is-style-lmn-bandeau-disciplines .lmn-piste > span {
	padding-inline-end: 0;
}

/* --------------------------------------------------------------------------
   Bandeau de logos défilant (partenaires)
   --------------------------------------------------------------------------
   Un groupe portant ce style fait défiler ses images en boucle. Ajouter un
   partenaire = ajouter un bloc Image dans le groupe ; en retirer un = le
   supprimer. Le JavaScript duplique la série pour que la boucle soit continue ;
   sans JavaScript, les logos restent simplement alignés et lisibles.
   -------------------------------------------------------------------------- */

.is-style-lmn-bandeau-logos {
	overflow: hidden;
	padding-block: clamp(26px, 3vw, 40px);
}

/* Les logos s'estompent aux deux bouts ; le fond du bandeau, lui, reste plein. */
.is-style-lmn-bandeau-logos > .wp-block-group {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.is-style-lmn-bandeau-logos .lmn-piste {
	display: flex;
	width: max-content;
	align-items: center;
}

.is-style-lmn-bandeau-logos .lmn-lot {
	display: flex;
	align-items: center;
	gap: clamp(46px, 5.4vw, 88px);
	padding-inline-end: clamp(46px, 5.4vw, 88px);
}

html.lmn-js .is-style-lmn-bandeau-logos .lmn-piste {
	animation: lmn-defile 42s linear infinite;
}

html.lmn-js .is-style-lmn-bandeau-logos:hover .lmn-piste,
html.lmn-js .is-style-lmn-bandeau-logos:focus-within .lmn-piste,
html.lmn-js .is-style-lmn-bandeau-logos.lmn-en-pause .lmn-piste {
	animation-play-state: paused;
}

/* Les logos des partenaires (préparés par scripts/prepare-logos.py : fond
   transparent, même poids visuel, même hauteur de toile) s'affichent en gris
   sur fond clair ; chacun retrouve sa couleur au survol ou au focus clavier. */
.is-style-lmn-bandeau-logos figure,
.is-style-lmn-bandeau-logos .wp-block-image {
	margin: 0;
	flex: none;
}

.is-style-lmn-bandeau-logos img {
	display: block;
	height: clamp(60px, 6.2vw, 88px);
	width: auto;
	max-width: none;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.78;
	transition: opacity 0.25s ease, filter 0.25s ease;
}

.is-style-lmn-bandeau-logos a:hover img,
.is-style-lmn-bandeau-logos a:focus-visible img,
.is-style-lmn-bandeau-logos img:hover {
	opacity: 1;
	filter: none;
}

.is-style-lmn-bandeau-logos a {
	display: block;
	border-radius: 6px;
}

.is-style-lmn-bandeau-logos a:focus-visible {
	outline: 3px solid var(--wp--preset--color--noir);
	outline-offset: 6px;
}

/* Sans JavaScript, la ligne reste une simple rangée qui peut défiler au doigt. */
html:not(.lmn-js) .is-style-lmn-bandeau-logos {
	overflow-x: auto;
}

@media (prefers-reduced-motion: reduce) {
	html.lmn-js .is-style-lmn-bandeau-logos .lmn-piste {
		animation: none;
	}

	html.lmn-js .is-style-lmn-bandeau-logos {
		overflow-x: auto;
	}
}

/* ==========================================================================
   6. En-tête et navigation
   ========================================================================== */

/* L'en-tête reste en haut pendant le défilement. Le collant se pose sur
   l'enveloppe <header> de la partie de modèle : elle n'est pas plus haute
   que l'en-tête, un enfant collant n'y aurait aucune place pour coller. */
header.wp-block-template-part:has(.lmn-entete) {
	position: sticky;
	top: 0;
	z-index: 40;
}

/* Connecté : sous la barre d'administration, pas derrière. Jusqu'à 600 px,
   WordPress laisse la barre partir avec la page (position absolue) : l'en-tête
   colle alors tout en haut, sinon un vide de 46 px resterait au-dessus. */
@media (min-width: 601px) {
	body.admin-bar header.wp-block-template-part:has(.lmn-entete) {
		top: var(--wp-admin--admin-bar--height, 0px);
	}
}

.lmn-entete .wp-block-navigation {
	--navigation-layout-justification-setting: flex-end;
}

.lmn-entete .wp-block-navigation .wp-block-navigation-item__content {
	padding-block: 6px;
}

.lmn-entete .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--jaune);
}

/* Superposition mobile du bloc Navigation, aux couleurs du site. */
.wp-block-navigation__responsive-container.is-menu-open.is-menu-open {
	background-color: var(--wp--preset--color--noir);
	color: var(--wp--preset--color--blanc);
	padding: clamp(76px, 14vw, 110px) 28px clamp(40px, 8vw, 64px);
}

/* La navigation est alignée à droite dans l'en-tête ; dans la superposition,
   elle doit repartir de la gauche, sinon les entrées débordent de l'écran. */
.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-close,
.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-dialog {
	padding: 0;
}

.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-page-list {
	justify-content: flex-start;
	align-items: flex-start;
	text-align: left;
	width: 100%;
	gap: clamp(10px, 2.4vw, 18px);
}

.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation-item {
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding-block: 6px;
}

/* Le bouton de fermeture se place là où était le bouton d'ouverture, pour que
   le doigt n'ait pas à se déplacer. Assez grand pour être touché sans viser. */
.wp-block-navigation__responsive-container-close {
	top: 16px;
	right: 4px;
	padding: 12px;
	min-width: 48px;
	min-height: 48px;
	display: grid;
	place-items: center;
}

.wp-block-navigation__responsive-container-close svg {
	width: 28px;
	height: 28px;
}

/* Place mesurée par le JS à l'ouverture : celle du bouton d'ouverture. */
.wp-block-navigation__responsive-container.lmn-fermer-place .wp-block-navigation__responsive-container-close {
	position: fixed;
	top: var(--lmn-fermer-haut, 16px);
	right: var(--lmn-fermer-droite, 4px);
}

/* Téléphone : le bouton du menu se range au bord droit, après « Soutenir »,
   au lieu de flotter entre le logo et le bouton. */
@media (max-width: 599px) {
	.lmn-entete .wp-block-navigation {
		order: 3;
	}

	.lmn-entete .wp-block-buttons {
		margin-left: auto;
	}
}

.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--titres);
	font-size: clamp(1.5rem, 5vw, 2.2rem);
	font-weight: 800;
	letter-spacing: -0.022em;
	color: var(--wp--preset--color--blanc);
}

.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--jaune);
}

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	color: currentColor;
}

/* ==========================================================================
   7. Figures légendées (légende jaune en surimpression)
   ========================================================================== */

.lmn-figure-legendee {
	position: relative;
	border-radius: var(--wp--custom--radius--carte);
	overflow: hidden;
}

.lmn-figure-legendee img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lmn-figure-legendee > figcaption,
.lmn-legende-jaune {
	position: absolute;
	left: 20px;
	bottom: 20px;
	margin: 0;
	max-width: calc(100% - 40px);
	background-color: var(--wp--preset--color--jaune);
	color: var(--wp--preset--color--noir);
	font-family: var(--wp--preset--font-family--accent);
	font-style: italic;
	font-size: var(--wp--preset--font-size--moyen);
	line-height: 1.2;
	border-radius: var(--wp--custom--radius--petit);
	padding: 12px 18px;
}

/* ==========================================================================
   8. Formulaires (Contact Form 7)
   ========================================================================== */

.wpcf7 {
	--lmn-champ-fond: var(--wp--preset--color--noir);
	--lmn-champ-bordure: var(--wp--preset--color--gris-fonce);
}

.wpcf7 form > .lmn-champs,
.wpcf7-form > p {
	margin: 0;
}

.wpcf7 fieldset {
	border: 0;
	padding: 0;
	margin: 0 0 36px;
	min-width: 0;
}

.wpcf7 legend {
	padding: 0;
	margin-bottom: 18px;
	font-family: var(--wp--preset--font-family--titres);
	font-size: 1.2rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--jaune);
}

.wpcf7 .lmn-grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	gap: 18px;
	min-width: 0;
}

.wpcf7 .lmn-grille > * {
	min-width: 0;
}

.wpcf7 label {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--wp--preset--color--gris-clair);
}

.wpcf7 label .lmn-aide {
	display: block;
	font-weight: 400;
	font-size: 1.125rem;
	color: var(--wp--preset--color--gris);
}

.wpcf7 .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
	min-width: 0;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 textarea,
.wpcf7 select {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	background-color: var(--lmn-champ-fond);
	border: 1px solid var(--lmn-champ-bordure);
	border-radius: var(--wp--custom--radius--petit);
	color: var(--wp--preset--color--blanc);
	font-family: inherit;
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1.5;
	padding: 13px 15px;
	outline: none;
	transition: border-color 0.2s ease;
}

.wpcf7 input:hover,
.wpcf7 textarea:hover,
.wpcf7 select:hover {
	border-color: var(--wp--preset--color--gris);
}

.wpcf7 input:focus-visible,
.wpcf7 textarea:focus-visible,
.wpcf7 select:focus-visible {
	border-color: var(--wp--preset--color--jaune);
	outline: 2px solid var(--wp--preset--color--jaune);
	outline-offset: 1px;
}

.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
	color: var(--wp--preset--color--gris);
	opacity: 1;
}

.wpcf7 textarea {
	resize: vertical;
	min-height: 120px;
}

/* Cases à cocher « arts » en pastilles — CSS pur, pas de JS. */
.wpcf7 .lmn-pastilles .wpcf7-checkbox {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}

.wpcf7 .lmn-pastilles .wpcf7-list-item {
	margin: 0;
}

.wpcf7 .lmn-pastilles .wpcf7-list-item label {
	display: block;
	cursor: pointer;
}

.wpcf7 .lmn-pastilles input[type="checkbox"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.wpcf7 .lmn-pastilles .wpcf7-list-item-label {
	display: block;
	border: 1px solid var(--wp--preset--color--gris-fonce);
	border-radius: var(--wp--custom--radius--pilule);
	padding: 11px 17px;
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--wp--preset--color--blanc);
	background-color: transparent;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.wpcf7 .lmn-pastilles .wpcf7-list-item:hover .wpcf7-list-item-label {
	border-color: var(--wp--preset--color--gris);
}

.wpcf7 .lmn-pastilles input[type="checkbox"]:checked + .wpcf7-list-item-label {
	background-color: var(--wp--preset--color--jaune);
	color: var(--wp--preset--color--noir);
	border-color: var(--wp--preset--color--jaune);
}

.wpcf7 .lmn-pastilles input[type="checkbox"]:focus-visible + .wpcf7-list-item-label {
	outline: 2px solid var(--wp--preset--color--jaune);
	outline-offset: 3px;
}

/* Consentement : case classique, alignée avec son libellé. */
.wpcf7 .lmn-consentement .wpcf7-list-item {
	margin: 0;
}

.wpcf7 .lmn-consentement .wpcf7-list-item label {
	flex-direction: row;
	align-items: flex-start;
	gap: 13px;
	font-size: 1.125rem;
	font-weight: 400;
	color: var(--wp--preset--color--gris-clair);
}

.wpcf7 .lmn-consentement input[type="checkbox"] {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	accent-color: var(--wp--preset--color--jaune);
}

.wpcf7 .lmn-consentement a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Bouton d'envoi */
.wpcf7 input[type="submit"],
.wpcf7 button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	background-color: var(--wp--preset--color--jaune);
	color: var(--wp--preset--color--noir);
	border: 1px solid var(--wp--preset--color--jaune);
	border-radius: var(--wp--custom--radius--pilule);
	font-family: inherit;
	font-size: 1.125rem;
	font-weight: 800;
	line-height: 1;
	padding: 16px 22px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.wpcf7 input[type="submit"]:hover,
.wpcf7 button[type="submit"]:hover,
.wpcf7 input[type="submit"]:focus-visible,
.wpcf7 button[type="submit"]:focus-visible {
	background-color: var(--wp--preset--color--noir);
	color: var(--wp--preset--color--jaune);
}

/* Champs empilés à intervalle régulier, les mêmes dans les trois
   formulaires. Contact Form 7 enveloppe chaque champ dans un paragraphe :
   seul l'écart de la grille doit compter. */
.wpcf7 .lmn-champs {
	display: grid;
	gap: 18px;
	margin-bottom: 26px;
}

.wpcf7 .lmn-champs > p,
.wpcf7 .lmn-grille > p {
	margin: 0;
}

.wpcf7 .lmn-envoi {
	margin-top: 22px;
}

/* Newsletter : champ + bouton pleine largeur. */
.wpcf7 .lmn-newsletter input[type="submit"] {
	width: 100%;
	margin-top: 18px;
	padding: 14px 20px;
	font-size: 1.125rem;
}

/* Messages de réponse */
.wpcf7 .wpcf7-response-output {
	margin: 22px 0 0;
	padding: 14px 16px;
	border-radius: var(--wp--custom--radius--petit);
	border: 1px solid var(--wp--preset--color--gris-fonce);
	font-size: 1.125rem;
	color: var(--wp--preset--color--blanc);
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--wp--preset--color--jaune);
	color: var(--wp--preset--color--jaune);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
	border-color: #ff8a8a;
	color: #ff8a8a;
}

.wpcf7 .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	font-size: 1.125rem;
	font-weight: 600;
	color: #ff8a8a;
}

.wpcf7 .wpcf7-spinner {
	margin-inline-start: 12px;
}

/* Widget Turnstile. Les formulaires demandent la taille « flexible », mais
   Cloudflare garde une largeur minimale de 300 px : en dessous, le widget
   rogne son propre logo. Sur téléphone, on resserre donc les marges
   intérieures (voir plus bas) pour lui laisser cette place. */
.wpcf7 .lmn-turnstile,
.wpcf7 .cf-turnstile {
	margin-top: 22px;
	max-width: 100%;
}

/* --------------------------------------------------------------------------
   8 bis. Bloc Recherche — mêmes champs que les formulaires
   -------------------------------------------------------------------------- */

.wp-block-search__input {
	background-color: var(--wp--preset--color--noir);
	border: 1px solid var(--wp--preset--color--gris-fonce);
	border-radius: var(--wp--custom--radius--petit);
	color: var(--wp--preset--color--blanc);
	font-family: inherit;
	font-size: 1.125rem;
	padding: 13px 15px;
}

.wp-block-search__input::placeholder {
	color: var(--wp--preset--color--gris);
	opacity: 1;
}

.wp-block-search__input:hover {
	border-color: var(--wp--preset--color--gris);
}

.wp-block-search__input:focus-visible {
	border-color: var(--wp--preset--color--jaune);
}

.wp-block-search__button {
	background-color: var(--wp--preset--color--jaune);
	color: var(--wp--preset--color--noir);
	border: 1px solid var(--wp--preset--color--jaune);
	border-radius: var(--wp--custom--radius--pilule);
	font-family: inherit;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1;
	padding: 13px 20px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.wp-block-search__button:hover,
.wp-block-search__button:focus-visible {
	background-color: var(--wp--preset--color--noir);
	color: var(--wp--preset--color--jaune);
}

.wp-block-search .wp-block-search__inside-wrapper {
	gap: 12px;
}

/* Téléphone : le bouton passe sous le champ, qui garde toute la largeur. */
@media (max-width: 480px) {
	.wp-block-search .wp-block-search__inside-wrapper {
		flex-wrap: wrap;
	}

	.wp-block-search .wp-block-search__input {
		flex: 1 1 100%;
	}
}

/* Pagination des archives */
.wp-block-query-pagination .wp-block-query-pagination-numbers .page-numbers {
	padding: 6px 10px;
	border-radius: var(--wp--custom--radius--petit);
}

.wp-block-query-pagination .page-numbers.current {
	color: var(--wp--preset--color--jaune);
	font-weight: 800;
}

/* ==========================================================================
   9. Bloc « Liste d'événements » (lmn/evenements)
   ========================================================================== */

.lmn-evenements__compte {
	font-size: var(--wp--preset--font-size--surtitre);
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gris);
	margin: 0;
}

.lmn-evenements__barre {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 24px;
	margin: clamp(22px, 2.6vw, 32px) 0 clamp(20px, 2.2vw, 28px);
}

.lmn-evenements__filtres {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.lmn-evenements__chip {
	background-color: transparent;
	border: 1px solid var(--wp--preset--color--gris-fonce);
	border-radius: var(--wp--custom--radius--pilule);
	color: var(--wp--preset--color--gris-clair);
	font: inherit;
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 9px 16px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.lmn-evenements__chip:hover {
	border-color: var(--wp--preset--color--gris);
}

.lmn-evenements__chip[aria-pressed="true"] {
	background-color: var(--wp--preset--color--jaune);
	color: var(--wp--preset--color--noir);
	border-color: var(--wp--preset--color--jaune);
}

.lmn-evenements__liste {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Variante « cartes sombres » — section jaune de la page Événements. */
.lmn-evenements--cartes-sombres .lmn-evenement {
	background-color: var(--wp--preset--color--noir);
	color: var(--wp--preset--color--blanc);
	border-radius: var(--wp--custom--radius--carte);
	padding: clamp(24px, 2.8vw, 36px);
	display: flex;
	flex-wrap: wrap;
	gap: 16px clamp(24px, 3vw, 44px);
	align-items: flex-start;
}

/* Variante « cartes jaunes » — section Rendez-vous de l'accueil.
   Date, titre et texte sont trois colonnes d'une même grille ; le texte en
   occupe deux, comme dans la maquette d’origine. */
.lmn-evenements--cartes-jaunes .lmn-evenement {
	background-color: var(--wp--preset--color--jaune);
	color: var(--wp--preset--color--gris-fonce);
	border-radius: var(--wp--custom--radius--carte);
	padding: clamp(22px, 2.4vw, 30px) clamp(22px, 2.6vw, 34px);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
	gap: 14px clamp(24px, 3vw, 44px);
	align-items: start;
}

/* Les événements au-delà de la limite affichée, et le bouton « Voir tout »
   quand il n'y a rien de plus à montrer, portent l'attribut hidden. Il doit
   l'emporter sur le display:flex/grid/inline-flex posé plus haut, sinon le
   filtre par année et la bascule « Voir tout » n'ont aucun effet visible. */
.lmn-evenements .lmn-evenement[hidden],
.lmn-evenements .lmn-evenements__plus[hidden] {
	display: none;
}

.lmn-evenements--cartes-jaunes .lmn-evenement__meta {
	flex: none;
}

.lmn-evenements--cartes-jaunes .lmn-evenement__date {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--noir);
}

.lmn-evenements--cartes-jaunes .lmn-evenement__horaire {
	margin: 5px 0 0;
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--wp--preset--color--gris-moyen);
}

.lmn-evenements--cartes-jaunes .lmn-evenement__titre {
	margin: 0;
	font-size: 1.3rem;
	line-height: 1.15;
	color: var(--wp--preset--color--noir);
}

.lmn-evenements--cartes-jaunes .lmn-evenement__resume {
	grid-column: span 2;
	margin: 0;
	max-width: 70ch;
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--wp--preset--color--gris-fonce);
}

.lmn-evenements--cartes-jaunes .lmn-evenement__lieu,
.lmn-evenements--cartes-jaunes .lmn-agenda {
	grid-column: span 2;
	color: var(--wp--preset--color--gris-moyen);
}

@media (max-width: 782px) {
	.lmn-evenements--cartes-jaunes .lmn-evenement__resume,
	.lmn-evenements--cartes-jaunes .lmn-evenement__lieu,
	.lmn-evenements--cartes-jaunes .lmn-agenda {
		grid-column: 1 / -1;
	}
}

/* Variante « lignes » (archive) */
.lmn-evenements--lignes .lmn-evenements__liste {
	gap: 0;
}

.lmn-evenements--lignes .lmn-evenement {
	border-top: 1px solid var(--wp--preset--color--bordure);
	padding: clamp(22px, 2.6vw, 32px) 0;
	display: flex;
	flex-wrap: wrap;
	gap: 14px clamp(24px, 3vw, 44px);
	align-items: flex-start;
}

.lmn-evenement__meta {
	flex: 0 0 190px;
}

.lmn-evenement__etiquette {
	margin: 0;
	font-size: var(--wp--preset--font-size--surtitre);
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--jaune);
}

.lmn-evenements--lignes .lmn-evenement__etiquette {
	color: var(--wp--preset--color--gris);
}

.lmn-evenement__date {
	margin: 10px 0 0;
	font-size: 1.125rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--blanc);
}

.lmn-evenement__horaire {
	margin: 5px 0 0;
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--wp--preset--color--gris-clair);
}

.lmn-evenements--lignes .lmn-evenement__horaire {
	color: var(--wp--preset--color--gris);
}

.lmn-evenement__corps {
	flex: 1 1 320px;
	min-width: 0;
}

.lmn-evenement__titre {
	font-family: var(--wp--preset--font-family--titres);
	margin: 0 0 10px;
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: -0.012em;
	line-height: 1.14;
	color: var(--wp--preset--color--jaune);
}

.lmn-evenements--lignes .lmn-evenement__titre {
	font-size: 1.35rem;
	line-height: 1.16;
	color: var(--wp--preset--color--blanc);
}

.lmn-evenement__titre a {
	color: inherit;
}

.lmn-evenement__resume {
	margin: 0;
	max-width: 74ch;
	font-size: 1.125rem;
	line-height: 1.68;
	color: var(--wp--preset--color--gris-clair);
}

.lmn-evenements--lignes .lmn-evenement__resume {
	color: var(--wp--preset--color--gris);
}

.lmn-evenement__lieu {
	margin: 10px 0 0;
	font-size: 1.125rem;
	color: var(--wp--preset--color--gris);
}

.lmn-evenements__plus {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: clamp(22px, 2.6vw, 32px);
	background-color: var(--wp--preset--color--anthracite);
	color: var(--wp--preset--color--blanc);
	border: 1px solid var(--wp--preset--color--gris-fonce);
	border-radius: var(--wp--custom--radius--pilule);
	font: inherit;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1;
	padding: 13px 20px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.lmn-evenements__plus:hover,
.lmn-evenements__plus:focus-visible {
	background-color: var(--wp--preset--color--jaune);
	color: var(--wp--preset--color--noir);
	border-color: var(--wp--preset--color--jaune);
}

.lmn-evenements__plus svg {
	transition: transform 0.2s ease;
}

.lmn-evenements__plus[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.lmn-evenements__vide {
	margin: 0;
	color: var(--wp--preset--color--gris);
}

/* Sur fond jaune, les cartes restent noires mais le compte et le message
   « aucun événement » passent en gris moyen : le gris clair n'y atteint pas
   le contraste minimal (2,9:1 au lieu de 4,5:1). */
.has-jaune-background-color .lmn-evenements__compte,
.has-jaune-background-color .lmn-evenements__vide {
	color: var(--wp--preset--color--gris-moyen);
}

@media (max-width: 600px) {
	.lmn-evenement__meta {
		flex: 1 1 100%;
	}
}

/* ==========================================================================
   10. Animations (progressive enhancement)
   ========================================================================== */

/* Sans JS — ou avant que le script ne s'exécute — tout est visible. */
html.lmn-js .lmn-rise {
	opacity: 0;
	transform: translateY(24px);
}

html.lmn-js .lmn-anim {
	transition:
		opacity 0.75s cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
}

html.lmn-js .lmn-in {
	opacity: 1;
	transform: none;
}

html.lmn-js .is-style-lmn-mot-a-mot > span[data-lmn-mot] {
	opacity: 0;
	transform: translateY(0.34em);
	transition:
		opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) var(--lmn-retard, 0ms),
		transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) var(--lmn-retard, 0ms);
}

html.lmn-js .is-style-lmn-mot-a-mot.lmn-in > span[data-lmn-mot] {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	html.lmn-js .lmn-rise,
	html.lmn-js .is-style-lmn-mot-a-mot > span[data-lmn-mot] {
		opacity: 1;
		transform: none;
		transition: none;
	}

	html.lmn-js .is-style-lmn-bandeau-defilant .lmn-piste,
	html.lmn-js .is-style-lmn-bandeau-disciplines .lmn-piste {
		animation: none;
	}

	/* Rien ne défile : le texte entier passe à la ligne au lieu d'être coupé
	   au bord de l'écran. Le fondu des bords cacherait le début des lignes. */
	.is-style-lmn-bandeau-defilant,
	.is-style-lmn-bandeau-disciplines {
		white-space: normal;
		padding-inline: var(--wp--style--root--padding-left, 28px) var(--wp--style--root--padding-right, 28px);
	}

	.is-style-lmn-bandeau-disciplines > :not(.lmn-pause) {
		-webkit-mask-image: none;
		mask-image: none;
	}
}

/* Texte lu par les lecteurs d'écran seulement (valeur finale des compteurs). */
.lmn-pour-lecteurs {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   11. Éditeur
   ========================================================================== */

/* Dans l'éditeur, rien n'est animé ni masqué. */
.editor-styles-wrapper .lmn-rise,
.editor-styles-wrapper .is-style-lmn-mot-a-mot > span[data-lmn-mot] {
	opacity: 1;
	transform: none;
}

.editor-styles-wrapper .is-style-lmn-bandeau-defilant,
.editor-styles-wrapper .is-style-lmn-bandeau-disciplines {
	white-space: normal;
}

/* ==========================================================================
   12. Utilitaires de mise en page repris de la maquette d’origine
   ========================================================================== */

/* Grille auto-ajustée : reproduit repeat(auto-fit, minmax(min(Xpx,100%),1fr)). */
.lmn-auto-grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(var(--lmn-col, 300px), 100%), 1fr));
	gap: var(--lmn-gap, clamp(22px, 2.6vw, 32px));
}

/* Le héros plein écran de la maquette d’origine. */
.lmn-heros-plein {
	min-height: 100vh;
	min-height: 100svh;
}

/* Encadré d'information (jaune sur anthracite). */
.lmn-encadre {
	background-color: var(--wp--preset--color--anthracite);
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: var(--wp--custom--radius--petit);
	padding: 16px 18px;
}

/* --------------------------------------------------------------------------
   13. Grilles « auto-fit »
   --------------------------------------------------------------------------
   La disposition Grille de WordPress utilise repeat(auto-fill, …) : avec trois
   éléments dans une grille qui tient cinq colonnes, deux pistes restent vides
   et les éléments ne s'étirent pas. La maquette d’origine utilise auto-fit. Cette classe
   rétablit auto-fit sans toucher aux réglages natifs du bloc — la retirer rend
   la grille à son comportement WordPress d'origine.
   -------------------------------------------------------------------------- */

.wp-block-group.is-layout-grid.lmn-grille-fit,
.wp-block-columns.is-layout-grid.lmn-grille-fit {
	grid-template-columns: repeat(auto-fit, minmax(min(var(--lmn-col, 300px), 100%), 1fr));
}

.lmn-col-150 { --lmn-col: 150px; }
.lmn-col-170 { --lmn-col: 170px; }
.lmn-col-190 { --lmn-col: 190px; }
.lmn-col-200 { --lmn-col: 200px; }
.lmn-col-216 { --lmn-col: 216px; }
.lmn-col-220 { --lmn-col: 220px; }
.lmn-col-230 { --lmn-col: 230px; }
.lmn-col-260 { --lmn-col: 260px; }
.lmn-col-280 { --lmn-col: 280px; }
.lmn-col-290 { --lmn-col: 290px; }
.lmn-col-300 { --lmn-col: 300px; }
.lmn-col-310 { --lmn-col: 310px; }
.lmn-col-320 { --lmn-col: 320px; }
.lmn-col-330 { --lmn-col: 330px; }


/* --------------------------------------------------------------------------
   14. Bloc « Détails de l'événement » (page d'un événement)
   -------------------------------------------------------------------------- */

.lmn-details {
	background-color: var(--wp--preset--color--anthracite);
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: var(--wp--custom--radius--carte);
	padding: clamp(24px, 2.8vw, 36px);
	margin-block: var(--wp--preset--spacing--50);
}

.lmn-details__liste {
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	gap: clamp(16px, 2vw, 26px);
}

.lmn-details__ligne dt {
	margin: 0;
	font-size: var(--wp--preset--font-size--surtitre);
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--jaune);
}

.lmn-details__ligne dd {
	margin: 8px 0 0;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--wp--preset--color--blanc);
}

.lmn-details__lien {
	margin: clamp(22px, 2.6vw, 32px) 0 0;
}

/* « Ajouter à mon agenda » : un lien discret sous l'événement, souligné
   comme les liens du texte courant. */
.lmn-agenda {
	margin: 10px 0 0;
	font-size: 1.125rem;
	font-weight: 700;
}

.lmn-details > .lmn-agenda {
	margin-top: 16px;
}

.lmn-details__liste + .lmn-agenda {
	margin-top: clamp(22px, 2.6vw, 32px);
}

/* Bloc « Horaires » : l'état du jour, calculé dans le navigateur, sous la
   phrase des horaires, dans la couleur du texte qui l'entoure (fond jaune du
   pied de page compris). */
.lmn-horaires__statut:not([hidden]) {
	display: block;
	margin-top: 4px;
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   15. Mesures de lecture
   --------------------------------------------------------------------------
   La maquette d’origine limite la largeur de nombreux titres et paragraphes en « ch »
   (largeur du caractère), pour que les lignes se cassent au bon endroit. Ces
   classes reprennent ces valeurs. Un propriétaire qui veut une ligne plus
   large retire simplement la classe dans « Avancé → Classe(s) CSS ».
   -------------------------------------------------------------------------- */

[class*="lmn-m-"] {
	max-width: var(--lmn-m, none);
}

/* La disposition « contenu limité » de WordPress centre tout enfant plus
   étroit que la largeur de contenu (margin-inline: auto !important). La maquette d’origine
   aligne tout à gauche : on rétablit, avec la même arme. Dans un conteneur
   plus large que la colonne de contenu (section pleine largeur sur grand
   écran), « à gauche » veut dire au bord gauche de cette colonne, là où
   commencent les autres blocs, pas au bord de l'écran. */
.wp-site-blocks [class*="lmn-m-"],
.editor-styles-wrapper [class*="lmn-m-"] {
	margin-inline-start: 0 !important;
	margin-inline-end: auto !important;
}

.wp-site-blocks .is-layout-constrained > [class*="lmn-m-"]:not(.alignwide):not(.alignfull),
.editor-styles-wrapper .is-layout-constrained > [class*="lmn-m-"]:not(.alignwide):not(.alignfull) {
	margin-inline-start: max(0px, (100% - var(--wp--style--global--content-size)) / 2) !important;
}

.lmn-m-20 { --lmn-m: 20ch; }
.lmn-m-22 { --lmn-m: 22ch; }
.lmn-m-24 { --lmn-m: 24ch; }
.lmn-m-26 { --lmn-m: 26ch; }
.lmn-m-42 { --lmn-m: 42ch; }
.lmn-m-44 { --lmn-m: 44ch; }
.lmn-m-46 { --lmn-m: 46ch; }
.lmn-m-52 { --lmn-m: 52ch; }
.lmn-m-56 { --lmn-m: 56ch; }
.lmn-m-60 { --lmn-m: 60ch; }
.lmn-m-70 { --lmn-m: 70ch; }
.lmn-m-74 { --lmn-m: 74ch; }
.lmn-m-88 { --lmn-m: 88ch; }
.lmn-m-100 { --lmn-m: 100ch; }
.lmn-m-104 { --lmn-m: 104ch; }

/* --------------------------------------------------------------------------
   16. Téléphone : resserrer les marges intérieures
   --------------------------------------------------------------------------
   Sur un écran de 390 px, la gouttière de 28 px de la maquette d’origine plus les 28 px de
   marge intérieure des cartes ne laissent que 278 px de contenu — moins que
   les 300 px dont le widget anti-robots a besoin, et peu pour lire. On
   resserre les deux sous 430 px ; au-delà, rien ne change.
   -------------------------------------------------------------------------- */

@media (max-width: 430px) {
	/* WordPress range la gouttière du site dans ces deux propriétés et s'en sert
	   partout (marges intérieures, marges négatives des blocs pleine largeur).
	   Les redéfinir suffit : inutile de toucher aux règles elles-mêmes, qui
	   savent déjà ne pas s'empiler sur les conteneurs imbriqués. */
	body {
		--wp--style--root--padding-left: 20px;
		--wp--style--root--padding-right: 20px;
	}

	.wp-block-group.is-style-lmn-carte,
	.wp-block-group.is-style-lmn-carte-coeur,
	.wp-block-group.is-style-lmn-carte-plus,
	.wp-block-group.is-style-lmn-carte-claire {
		padding: 22px 18px;
	}

	/* Les compositions posent une marge intérieure explicite sur la carte des
	   formulaires : elle doit céder aussi, sinon le widget anti-robots n'a pas
	   ses 300 px. */
	.wp-block-group.is-style-lmn-carte:has( .wpcf7 ) {
		padding-left: 18px;
		padding-right: 18px;
	}
}

/* Contact : la carte Newsletter garde sa hauteur naturelle au lieu de
   s'étirer à la hauteur du formulaire de contact voisin. */
#contact .is-style-lmn-carte {
	align-self: start;
}

/* Bannières pleine largeur : WordPress réduit le conteneur intérieur à la
   largeur de son texte quand le contenu est placé en haut à gauche ; le
   texte collait alors au bord de l'écran. Le conteneur reprend la colonne de
   contenu du site, celle de l'en-tête et des autres sections. */
.wp-block-cover.alignfull > .wp-block-cover__inner-container,
.wp-block-cover.alignfull.has-custom-content-position.has-custom-content-position > .wp-block-cover__inner-container {
	width: min(100%, var(--wp--style--global--content-size));
	margin-inline: auto;
}

/* …avec les mêmes marges latérales que le reste du site. */
.wp-block-cover.alignfull {
	padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
}

/* Une colonne de texte à côté d'un long formulaire reste visible pendant
   qu'on remplit le formulaire, au lieu de laisser un grand vide sous elle.
   Seulement quand les deux colonnes sont côte à côte (grand écran). */
@media (min-width: 782px) {
	.lmn-grille-fit:has(> * .wpcf7) > :first-child:not(:has(.wpcf7)) {
		position: sticky;
		top: 120px;
		align-self: start;
	}
}

/* Pied de page : le lien vers la politique de confidentialité se reconnaît
   comme un lien, sur le fond jaune. */
.lmn-pied-legal a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Liens dans le texte courant : soulignés, pour ne pas dépendre de la seule
   couleur, qui est celle du texte. Les boutons et les titres cliquables des
   cartes d'événements, plus profonds, gardent leur style. */
main :where(p, li) > a:where(:not(.wp-element-button)),
main :where(p, li) > :where(strong, em) > a:where(:not(.wp-element-button)) {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* IBAN : d'un seul tenant pour pouvoir le lire et le recopier. Sur un
   téléphone de 390 px, l'encadré cède un peu de marge pour qu'il tienne ;
   sur un écran encore plus étroit, il peut de nouveau passer à la ligne. */
.lmn-iban {
	white-space: nowrap;
}

/* « Copier l'IBAN » : sous le numéro, dans le style des boutons « Contour ». */
.lmn-copier {
	display: flex;
	align-items: center;
	margin-top: 12px;
	padding: 8px 18px;
	border: 1px solid var(--wp--preset--color--gris-fonce);
	border-radius: 999px;
	background-color: var(--wp--preset--color--anthracite);
	color: var(--wp--preset--color--blanc);
	font: inherit;
	font-size: 1.125rem;
	line-height: 1.4;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.lmn-copier:hover,
.lmn-copier:focus-visible,
.lmn-copier.is-copie {
	border-color: var(--wp--preset--color--jaune);
	background-color: var(--wp--preset--color--jaune);
	color: var(--wp--preset--color--noir);
}

@media (max-width: 430px) {
	.lmn-encadre:has(.lmn-iban) {
		padding-inline: 12px;
	}
}

@media (max-width: 359px) {
	.lmn-iban {
		white-space: normal;
	}
}

/* Image panoramique légendée (« Pour qui ? ») : en 16/7, un téléphone n'en
   garde qu'une bande que la légende recouvre. Le rapport est posé en ligne
   sur l'image, d'où le !important. */
@media (max-width: 600px) {
	.lmn-figure-legendee img[style*="16/7"] {
		aspect-ratio: 4 / 3 !important;
	}
}

/* Prochaines fermetures : sous les horaires, même interligne qu'eux. */
.lmn-fermetures {
	line-height: 1.65;
}

/* Texte lu par les lecteurs d'écran seulement (message « IBAN copié »). */
.screen-reader-text:not(:focus) {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}