/* ==========================================================================
   Les Mains Levées – touches artisanales
   ========================================================================== */

:root {
	--lml-ink: var(--wp--preset--color--encre, #23302A);
	--lml-shadow: 4px 5px 0 var(--lml-ink);
	--lml-squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14'%3E%3Cpath d='M2 9 C 20 2, 35 13, 55 7 S 90 2, 110 8 S 150 13, 170 6 S 192 5, 198 8' fill='none' stroke='%23E0702B' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Grain de papier très léger sur le fond */
body {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.4 0 0 0 0 0.3 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--wp--preset--color--anis); color: var(--lml-ink); }

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px dashed var(--wp--preset--color--violet);
	outline-offset: 3px;
}

/* --- Accents de titres --- */
.lml-surligne {
	background: linear-gradient(transparent 58%, var(--wp--preset--color--anis) 58%, var(--wp--preset--color--anis) 90%, transparent 90%);
	padding: 0 .1em;
}
.lml-main { font-family: var(--wp--preset--font-family--main); font-weight: 600; }

.is-style-souligne { position: relative; display: inline-block; padding-bottom: .35em; }
.is-style-souligne::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: .32em;
	background: var(--lml-squiggle) no-repeat center / 100% 100%;
}
.has-text-align-center.is-style-souligne { display: block; width: fit-content; margin-inline: auto !important; }

.is-style-manuscrit {
	font-family: var(--wp--preset--font-family--main) !important;
	font-size: var(--wp--preset--font-size--manuscrit) !important;
	line-height: 1.2;
	color: var(--wp--preset--color--violet);
	transform: rotate(-2deg);
}

/* --- Boutons façon « autocollant » --- */
.wp-element-button, .wp-block-button__link {
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.wp-element-button:hover, .wp-block-button__link:hover {
	transform: translate(-1px, -2px) rotate(-1deg);
	box-shadow: 5px 7px 0 var(--lml-ink);
}
.wp-element-button:active, .wp-block-button__link:active { transform: translate(2px, 3px); box-shadow: 0 0 0 var(--lml-ink); }
.is-style-violet .wp-block-button__link { background: var(--wp--preset--color--violet); }
.is-style-violet .wp-block-button__link:hover { background: var(--wp--preset--color--orange); }
.is-style-contour .wp-block-button__link { background: var(--wp--preset--color--creme); color: var(--lml-ink); }
.is-style-contour .wp-block-button__link:hover { background: var(--wp--preset--color--anis); color: var(--lml-ink); }

/* --- Cartes « cousues » --- */
.is-style-carte {
	position: relative;
	background-color: var(--wp--preset--color--blanc);
	border: 2px solid var(--lml-ink);
	border-radius: 22px;
	box-shadow: var(--lml-shadow);
	padding: var(--wp--preset--spacing--40);
}
.is-style-carte::before {
	content: ""; position: absolute; inset: 8px; border-radius: 15px;
	border: 2px dashed color-mix(in srgb, currentColor 22%, transparent);
	pointer-events: none;
}
.wp-block-columns > .wp-block-column:nth-child(3n+1) > .is-style-carte { transform: rotate(-.8deg); }
.wp-block-columns > .wp-block-column:nth-child(3n+2) > .is-style-carte { transform: rotate(.6deg); }
.wp-block-columns > .wp-block-column:nth-child(3n) > .is-style-carte { transform: rotate(-.4deg); }
.is-style-carte { transition: transform .2s ease; }
.is-style-carte:hover { transform: rotate(0) translateY(-4px) !important; }

/* --- Papier déchiré (bords irréguliers) --- */
.is-style-papier {
	--dent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 10 L0 4 L4 6 L9 2 L14 5 L19 1 L25 6 L31 3 L36 6 L42 2 L47 5 L53 1 L59 5 L64 3 L70 6 L76 2 L81 5 L87 1 L93 5 L100 3 L100 10Z'/%3E%3C/svg%3E");
	position: relative;
	margin-block: 18px !important;
}
.is-style-papier::before, .is-style-papier::after {
	content: ""; position: absolute; left: 0; right: 0; height: 18px;
	background: inherit;
	-webkit-mask: var(--dent) center / 100% 100%; mask: var(--dent) center / 100% 100%;
}
.is-style-papier::before { top: -17px; }
.is-style-papier::after { bottom: -17px; transform: scaleY(-1); }

/* --- Vague en bas de section --- */
.is-style-vague { position: relative; margin-bottom: 40px !important; }
.is-style-vague::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -39px; height: 40px;
	background: inherit;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H1200 V10 C1100 40 1000 40 900 18 S700 -4 600 18 S400 40 300 18 S100 0 0 22Z'/%3E%3C/svg%3E") center / 100% 100%;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H1200 V10 C1100 40 1000 40 900 18 S700 -4 600 18 S400 40 300 18 S100 0 0 22Z'/%3E%3C/svg%3E") center / 100% 100%;
}
.is-style-vague + * { margin-block-start: 0 !important; }

/* --- Photos --- */
.is-style-polaroid img {
	background: #fff;
	padding: 12px 12px 46px;
	border: 1px solid rgba(0,0,0,.08);
	box-shadow: 0 14px 30px -12px rgba(35,48,42,.45);
	transform: rotate(-2.5deg);
	border-radius: 2px !important;
}
.is-style-polaroid { position: relative; }
.is-style-polaroid::before {
	content: ""; position: absolute; z-index: 2; top: -12px; left: 50%;
	width: 110px; height: 30px; transform: translateX(-50%) rotate(3deg);
	background: color-mix(in srgb, var(--wp--preset--color--anis) 80%, transparent);
	box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.is-style-polaroid figcaption {
	position: absolute; left: 0; right: 0; bottom: 8px; transform: rotate(-2.5deg);
	font-family: var(--wp--preset--font-family--main); font-size: 1.45rem; color: var(--lml-ink);
	margin: 0; text-align: center;
}
.is-style-tampon img { border-radius: 50%; border: 3px solid var(--lml-ink); box-shadow: var(--lml-shadow); aspect-ratio: 1; object-fit: cover; }

/* --- En-tête --- */
.lml-header { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(6px); background: color-mix(in srgb, var(--wp--preset--color--creme) 92%, transparent); border-bottom: 2px dashed color-mix(in srgb, var(--lml-ink) 18%, transparent); }
.admin-bar .lml-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .lml-header { top: 46px; } }
.lml-logo { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.lml-logo img { width: 52px; height: auto; transition: transform .3s ease; }
.lml-logo:hover img { transform: rotate(-8deg) scale(1.06); }
.lml-header .wp-block-site-title { line-height: 1; }
.lml-tagline { font-family: var(--wp--preset--font-family--main); font-size: 1.15rem; color: var(--wp--preset--color--violet); line-height: 1; margin: 0; }
.lml-header .wp-block-navigation-item__content { padding: .3em .2em; position: relative; }
.lml-header .wp-block-navigation-item__content::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 8px;
	background: var(--lml-squiggle) no-repeat center / 100% 100%;
	transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.lml-header .wp-block-navigation-item__content:hover::after,
.lml-header .current-menu-item > .wp-block-navigation-item__content::after { transform: scaleX(1); }

/* --- Héros --- */
.lml-hero { overflow: hidden; }
.lml-hero h1 { font-size: clamp(2.3rem, 5.5vw, 4.2rem); }
.lml-badge {
	display: inline-block; font-family: var(--wp--preset--font-family--main); font-size: 1.5rem; line-height: 1;
	background: var(--wp--preset--color--violet); color: #fff; padding: .35em .8em .45em; border-radius: 999px;
	transform: rotate(-3deg); box-shadow: 3px 3px 0 var(--lml-ink);
}

/* --- La route à vélo --- */
.lml-route { position: relative; height: 120px; overflow: hidden; }
.lml-route::before {
	content: ""; position: absolute; left: 0; right: 0; bottom: 14px; border-bottom: 3px dashed color-mix(in srgb, var(--lml-ink) 45%, transparent);
}
.lml-route img { position: absolute; bottom: 4px; width: 150px; height: auto; animation: lml-pedale 18s linear infinite; }
@keyframes lml-pedale { from { left: -170px; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .lml-route img { animation: none; left: 10%; } }

/* Petit vélo à côté d'un texte */
.lml-velo-inline { display: inline-block; width: 64px; vertical-align: middle; margin-right: .4rem; }

/* --- Icônes rondes --- */
.lml-icone img { width: 110px; height: 110px; padding: 10px; background: var(--wp--preset--color--creme); border: 2px solid var(--lml-ink); border-radius: 50%; }
.lml-icone { margin-bottom: .5rem !important; }

/* --- Étiquettes, puces --- */
.lml-etiquette {
	display: inline-block; font-family: var(--wp--preset--font-family--titre); font-weight: 600; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase;
	padding: .3em .9em; border: 2px solid var(--lml-ink); border-radius: 999px; background: var(--wp--preset--color--anis);
}
ul.lml-check { list-style: none; padding-left: 0; }
ul.lml-check li { padding-left: 2rem; position: relative; margin-bottom: .5rem; }
ul.lml-check li::before {
	content: ""; position: absolute; left: 0; top: .3em; width: 1.2rem; height: 1.2rem;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 13 C6 15 8 18 9 20 C12 13 16 8 22 3' fill='none' stroke='%232F5E47' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* --- Étapes numérotées --- */
.lml-num {
	display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
	font-family: var(--wp--preset--font-family--main); font-size: 1.9rem; font-weight: 700;
	background: var(--wp--preset--color--orange); color: #fff; border: 2px solid var(--lml-ink);
}

/* --- Liste d'articles --- */
.lml-posts .wp-block-post { height: 100%; }
.lml-posts .wp-block-post-featured-image img { border-radius: 14px; border: 2px solid var(--lml-ink); aspect-ratio: 4/3; object-fit: cover; }
.lml-posts .wp-block-post-terms a {
	text-decoration: none; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
	background: var(--wp--preset--color--violet-clair); color: var(--wp--preset--color--violet); padding: .2em .7em; border-radius: 999px;
}
.wp-block-query-pagination a { text-decoration: none; font-weight: 700; }

/* --- Article --- */
.single .wp-block-post-content > p:first-of-type::first-letter {
	float: left; font-family: var(--wp--preset--font-family--titre); font-size: 3.6em; line-height: .9; padding: .05em .12em 0 0; color: var(--wp--preset--color--orange);
}

/* --- Pied de page --- */
.lml-footer a { color: inherit; }
.lml-footer a:hover { color: var(--wp--preset--color--anis); }
.lml-footer .lml-velo-footer img { width: 120px; filter: drop-shadow(0 0 0 #fff); }

/* --- Formulaire --- */
.lml-form { display: grid; gap: .2rem; }
.lml-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .lml-form__row { grid-template-columns: 1fr; } }
.lml-form p { margin: 0 0 .8rem; }
.lml-form label { display: block; font-weight: 700; font-size: .95rem; margin-bottom: .3rem; }
.lml-form input:not([type=checkbox]), .lml-form select, .lml-form textarea {
	width: 100%; box-sizing: border-box; font: inherit; padding: .7rem .9rem;
	background: var(--wp--preset--color--creme); color: var(--lml-ink);
	border: 2px solid var(--lml-ink); border-radius: 14px;
}
.lml-form input:focus, .lml-form select:focus, .lml-form textarea:focus { background: #fff; }
.lml-form__rgpd label { font-weight: 400; font-size: .9rem; display: flex; gap: .6rem; align-items: flex-start; }
.lml-form__rgpd input { margin-top: .3rem; accent-color: var(--wp--preset--color--sapin); }
.lml-hp { position: absolute !important; left: -9999px; }
.lml-notice { padding: 1rem 1.2rem; border-radius: 14px; border: 2px solid var(--lml-ink); font-weight: 700; }
.lml-notice--ok { background: var(--wp--preset--color--anis); }
.lml-notice--err { background: #FBD9C4; }

/* --- Divers --- */
.lml-feuille { position: absolute; width: 70px; opacity: .9; pointer-events: none; }
.wp-block-separator.is-style-dots::before { color: var(--wp--preset--color--orange); font-size: 1.6rem; letter-spacing: 1.2em; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* --- Ajustements responsive --- */
@media (max-width: 700px) {
	.lml-header .wp-block-buttons { display: none; }
	.lml-logo img { width: 42px; }
	.lml-tagline { font-size: 1rem; }
}
.lml-grand-velo img { width: 100%; max-width: 360px; height: auto; }
.wp-block-image img[src$=".svg"] { height: auto; }
.lml-footer.is-style-papier::after { display: none; }
.lml-footer .wp-block-list { list-style: none; padding-left: 0; }

/* --- Correctifs mobile --- */
/* backdrop-filter piégeait le menu plein écran dans l'en-tête : fond opaque à la place */
.lml-header { backdrop-filter: none; background: var(--wp--preset--color--creme); }
/* Le menu mobile ouvert : grand, centré, lisible */
.lml-header .wp-block-navigation__responsive-container.is-menu-open { padding: 5rem 1.5rem 2rem; }
.lml-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { align-items: center; }
.lml-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: center; gap: 1.2rem; }
.lml-header .is-menu-open .wp-block-navigation-item__content { font-size: 1.5rem; }
/* Ni la photo inclinée ni le vélo qui roule ne doivent créer de défilement horizontal */
html, body { overflow-x: clip; }
/* Étiquettes de rubrique assez grandes pour le doigt */
.lml-posts .wp-block-post-terms a { display: inline-block; padding: .35em .9em; }