/*
Theme Name:        Là Où L'on Va
Theme URI:         https://laoulonva.fr
Author:            Là Où L'on Va
Author URI:        https://laoulonva.fr
Description:       Thème FSE sur mesure pour Là Où L'on Va — randonnées guidées de Ludovic Blanchoin. Charte nature « Feuillage / Miel / Crème », titres Cormorant Garamond, texte Mulish. Aucune dépendance à un thème parent, aucune requête externe (polices et icônes auto-hébergées, conformité RGPD).
Requires at least: 6.6
Tested up to:      6.8
Requires PHP:      8.0
Version:           0.2.0
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       la-ou-lon-va
Tags:              full-site-editing, block-styles, custom-colors, custom-logo, custom-menu, editor-style, threaded-comments, translation-ready, blog, portfolio

  Thème FSE : la présentation est presque entièrement pilotée par theme.json.
  Cette feuille de style ne porte que la « finition » impossible à exprimer en
  JSON : transitions, ombres douces, survols, et menus détails typographiques.
*/

:root {
	--lolv-shadow: 0 1px 2px rgba(56, 74, 53, .05), 0 10px 28px -14px rgba(56, 74, 53, .20);
	--lolv-shadow-hover: 0 1px 2px rgba(56, 74, 53, .06), 0 20px 40px -18px rgba(56, 74, 53, .30);
	--lolv-ease: cubic-bezier(.22, .61, .36, 1);

	/* ─── Direction « Herbier » : tokens de carnet de terrain ─── */
	/* Rayon unifié (cartes, boutons, photos « tirage ») — fin de l'incohérence 4px/10px */
	--lolv-radius: 4px;
	--lolv-radius-media: 4px;
	/* Filets « à l'encre » : trait fin et chaud, jamais pur noir */
	--lolv-ink: rgba(56, 74, 53, .16);
	--lolv-ink-strong: rgba(42, 32, 24, .28);
	/* Épingle dorée des cartes « spécimen » */
	--lolv-pin: var(--wp--preset--color--dore);
	/* Inclinaison maîtrisée des éléments épinglés (planches, photos) */
	--lolv-tilt: -1.5deg;
	/* Grain de papier — SVG inline, faible alpha, motif répété léger */
	--lolv-paper: 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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.22 0 0 0 0 0.16 0 0 0 0 0.09 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Rendu de texte raffiné : anti-crénelage, équilibrage des titres, défilement doux */
html {
	scroll-behavior: smooth;
}
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	/* Grain de papier subtil sur tout le fond crème (le « support » du carnet).
	   NB : pas de background-attachment: fixed → évite les coutures de
	   compositing (filets horizontaux) sur certains navigateurs/GPU. */
	background-image: var(--lolv-paper);
}
h1, h2, h3, .wp-block-heading {
	text-wrap: balance;
}
p, .wp-element-caption, li {
	text-wrap: pretty;
}

/* Transitions douces et cohérentes partout */
a,
.wp-element-button,
.wp-block-button__link,
.wp-block-image img {
	transition: color .2s var(--lolv-ease), background-color .2s var(--lolv-ease),
		transform .25s var(--lolv-ease), box-shadow .25s var(--lolv-ease), border-color .2s var(--lolv-ease);
}

/* Boutons : micro-relief au survol */
.wp-block-button__link {
	letter-spacing: .015em;
}
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
	transform: translateY(-1px);
	box-shadow: var(--lolv-shadow);
}

/* Cartes (fonds clairs) : ombre douce et bord net */
.wp-block-group.has-brume-background-color,
.wp-block-group.has-creme-background-color.has-border-color {
	box-shadow: var(--lolv-shadow);
}

/* Pied de carte (Durée / prix discret) : toujours pleine largeur
   → le trait de séparation s'étend sur toute la largeur de la carte. */
.lolv-cardmeta {
	width: 100%;
}

/* Prix sur les cartes « Nos parcours » : volontairement discret et grisé
   (encre désaturée, sans étiquette « Tarif » ni gras vert), pour ne pas
   rivaliser avec le tableau comparatif de « Tarifs » où le prix est le
   héros. Une simple indication « combien, à peu près ». */
.lolv-card-price {
	align-self: end;
	color: rgba(56, 74, 53, .6);
	font-weight: 500;
}

/* Cartes en grille (parcours, contenu, tarifs) : hauteurs égales, sans effet
   de survol — rendu calme et posé, sans soulèvement ni ombre. */
.wp-block-post-template .wp-block-group.has-background,
.is-layout-grid > .wp-block-group.has-background {
	height: 100%;
}

/* Images : coins arrondis qui clippent, et zoom discret dans la galerie */
figure.wp-block-image.has-custom-border {
	overflow: hidden;
	border-radius: var(--lolv-radius-media);
}
figure.wp-block-image.has-custom-border:hover img {
	transform: scale(1.035);
}

/* Sections image + texte : WordPress ajoute par défaut du padding dans la
   colonne texte, trop serré pour nos sections vitrines en largeur large. */
.wp-block-media-text.alignwide {
	column-gap: clamp(2.5rem, 6vw, 5rem);
}
.wp-block-media-text.alignwide .wp-block-media-text__content {
	padding-left: 0;
	padding-right: 0;
}

/* Légendes : centrées et discrètes */
.wp-element-caption {
	text-align: center;
	opacity: .82;
}

/* Citation de marque : une halte éditoriale, pas une carte monumentale */
.lolv-quote-band {
	display: grid;
	grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
	align-items: start;
	border-top: 1px solid rgba(56, 74, 53, .16);
	border-bottom: 1px solid rgba(56, 74, 53, .16);
}
.lolv-quote-band .lolv-quote-kicker {
	color: var(--wp--preset--color--dore);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: .14em;
	line-height: 1.3;
	text-transform: uppercase;
}
.lolv-quote-band .lolv-quote {
	border: 0;
	margin: 0;
	padding: 0 0 0 var(--wp--preset--spacing--40);
	position: relative;
}
.lolv-quote-band .lolv-quote::before {
	content: "";
	position: absolute;
	left: 0;
	top: .42em;
	bottom: .36em;
	width: 2px;
	background: linear-gradient(180deg, var(--wp--preset--color--dore), rgba(194, 161, 91, .18));
}
.lolv-quote-band .lolv-quote p {
	font-size: clamp(1.55rem, 2.6vw, 2.25rem);
	line-height: 1.28;
	margin: 0;
	max-width: 18em;
}
.lolv-quote-band .lolv-quote cite {
	display: block;
	margin-top: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--encre);
	font-family: var(--wp--preset--font-family--corps);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	font-weight: 600;
	letter-spacing: .03em;
}

/* Note de clôture : plus éditoriale qu'une carte, avec des filets fins. */
.lolv-signature-note {
	position: relative;
	border-top: 1px solid rgba(56, 74, 53, .16);
	border-bottom: 1px solid rgba(56, 74, 53, .16);
}
.lolv-signature-note::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 50%;
	width: 5rem;
	height: 1px;
	background: var(--wp--preset--color--dore);
	transform: translateX(-50%);
}
.lolv-signature-note p:first-child {
	color: rgba(56, 74, 53, .86);
	font-size: 1rem;
	line-height: 1.85;
}
.lolv-signature-note p:last-child {
	font-size: clamp(1.8rem, 3.2vw, 2.65rem);
	line-height: 1.2;
}

/* Liens de contenu : soulignement plus fin et aéré */
.wp-block-post-content a,
.wp-block-group a:where(:not(.wp-element-button)) {
	text-underline-offset: .18em;
	text-decoration-thickness: 1px;
}

/* Footer : liens lisibles sur le fond vert (la couleur de lien globale est verte)
   + filet de séparation discret */
footer.wp-block-group a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--brume);
	text-decoration: none;
}
footer.wp-block-group a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--creme);
	text-decoration: underline;
	text-underline-offset: .18em;
}
.lolv-footer-rule {
	opacity: .25;
}

/* Bouton du footer : discret, compact, sur une seule ligne */
.lolv-footer-cta .wp-block-button__link {
	padding: .6rem 1.45rem;
	font-size: .85rem;
	white-space: nowrap;
	border-width: 1px;
}

/* Footer « quatrième de couverture » : planche botanique en filigrane,
   recolorée en crème pâle sur le fond sapin. Touche finale du carnet. */
.lolv-footer {
	position: relative;
	overflow: clip;
}
.lolv-footer > :not(.lolv-footer__plate) {
	position: relative;
	z-index: 1;
}
.lolv-footer__plate {
	position: absolute;
	z-index: 0;
	right: -4%;
	bottom: -10%;
	width: min(34vw, 400px);
	opacity: .08;
	rotate: -6deg;
	pointer-events: none;
	filter: brightness(0) invert(1); /* planche verte → crème pâle */
}
.lolv-footer__plate img {
	display: block;
	width: 100%;
	height: auto;
}
@media (max-width: 600px) {
	.lolv-footer__plate {
		width: 62vw;
		right: -12%;
		bottom: -3%;
		opacity: .06;
	}
}

/* En-tête : petit trait centré sous le menu (séparation subtile, pas pleine largeur) */
.lolv-header-sep {
	/* !important : le bloc séparateur de WordPress force width:100px via une règle plus spécifique */
	width: min(540px, 82vw) !important;
	max-width: 540px;
	height: 2px;
	border: 0;
	opacity: .5;
}

/* Easter-egg : une petite feuille discrète sous le menu mène à « L'herbier ».
   Presque invisible au repos, elle s'anime pour qui la remarque. */
.lolv-herbier-egg {
	display: block;
	width: 28px;
	margin: .45rem auto 0;
	color: var(--wp--preset--color--sapin);
	line-height: 0;
	opacity: .3;
	transform: rotate(45deg);
	transition: opacity .3s var(--lolv-ease), transform .35s var(--lolv-ease), color .3s var(--lolv-ease);
}
.lolv-herbier-egg:hover,
.lolv-herbier-egg:focus-visible {
	opacity: 1;
	color: var(--wp--preset--color--dore);
	transform: rotate(52deg) scale(1.2);
}
.lolv-herbier-egg svg {
	display: block;
	width: 28px;
	height: 28px;
}

/* Navigation : transition de couleur au survol */
.wp-block-navigation .wp-block-navigation-item__content {
	transition: color .2s var(--lolv-ease);
}

/* ─────────────────────────────────────────────────────────────
   Navigation mobile — « on ouvre le carnet »
   L'overlay plein écran reprend la charte : papier crème grainé,
   liens en Cormorant, grandes cibles tactiles, hiérarchie douce.
   (Les couleurs de fond/texte sont posées en presets via le bloc
   navigation ; ici la finition : icônes, typographie, respiration.)
   ───────────────────────────────────────────────────────────── */

/* Boutons hamburger (ouvrir) et croix (fermer) : encre, cible ≥ 44px */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--encre);
	padding: .55rem;
	border-radius: var(--lolv-radius);
	transition: color .2s var(--lolv-ease), transform .25s var(--lolv-ease);
}
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
	width: 30px;
	height: 30px;
	fill: currentColor;
}
.wp-block-navigation__responsive-container-open:hover,
.wp-block-navigation__responsive-container-open:focus-visible {
	color: var(--wp--preset--color--dore);
}
.wp-block-navigation__responsive-container-close:hover,
.wp-block-navigation__responsive-container-close:focus-visible {
	color: var(--wp--preset--color--dore);
	transform: rotate(90deg);
}

/* Le panneau ouvert : support papier du carnet + respiration */
.wp-block-navigation__responsive-container.is-menu-open {
	background-image: var(--lolv-paper);
	padding-top: clamp(4.5rem, 17vw, 6.5rem);
	padding-bottom: 3rem;
	padding-inline: var(--wp--preset--spacing--40);
}
/* Filet doré discret sous la croix, comme un trait à l'encre */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content::before {
	content: "";
	display: block;
	width: 4rem;
	height: 2px;
	margin: 0 auto clamp(1.5rem, 6vw, 2.75rem);
	background: var(--wp--preset--color--dore);
	opacity: .8;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: center;
	width: min(92%, 460px);
	margin-inline: auto;
	gap: clamp(.75rem, 3.5vw, 1.4rem);
}

/* Liens de premier niveau : Cormorant, ample, grande cible tactile */
.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	width: 100%;
	text-align: center;
}
.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--titre);
	font-size: clamp(1.5rem, 6.2vw, 1.95rem);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: .005em;
	color: var(--wp--preset--color--encre);
	padding-block: .4rem;
}
.is-menu-open .wp-block-navigation-item__content:hover,
.is-menu-open .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--dore);
}
/* Anneau de focus aux couleurs de la maison (clavier), jamais le bleu système */
.is-menu-open .wp-block-navigation-item__content:focus-visible {
	outline: 2px solid var(--wp--preset--color--dore);
	outline-offset: 4px;
	border-radius: 2px;
}

/* Sous-menu (« Les randonnées ») : italique sapin, plus discret, resserré */
.is-menu-open .wp-block-navigation__submenu-container {
	gap: .15rem;
	margin-top: .2rem;
	padding-bottom: .4rem;
}
.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: clamp(1.05rem, 4.6vw, 1.3rem);
	font-style: italic;
	font-weight: 500;
	color: var(--wp--preset--color--sapin);
	padding-block: .28rem;
}
/* Chevron du sous-menu : aligné sur l'encre, taille confortable */
.is-menu-open .wp-block-navigation__submenu-icon {
	color: var(--wp--preset--color--dore);
}

/* Listes « éditoriales » (audiences, bénéfices) : marqueur ocre + filets fins */
.lolv-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.lolv-list li {
	position: relative;
	margin: 0;
	padding: .8rem 0 .8rem 1.65rem;
	border-bottom: 1px solid rgba(56, 74, 53, .1);
}
.lolv-list li:last-child {
	border-bottom: 0;
}
.lolv-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(.8rem + .58em);
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--dore);
}
.lolv-list-columns {
	max-width: 960px !important;
}

/* ─────────────────────────────────────────────────────────────
   Cartes « spécimen épinglé » (Herbier)
   Fond papier, épingle dorée plantée en tête, inclinaison « main »
   très légère et alternée, soulèvement doux au survol. Brique partagée
   par les grilles : parcours (query), tarifs, contenu des randonnées.
   ───────────────────────────────────────────────────────────── */
.lolv-card.wp-block-group.has-background,
.lolv-content-grid > .wp-block-group.has-background,
.wp-block-post-template > .wp-block-group.has-background {
	position: relative;
	background-color: #F2EDDF;
	background-image: none;
	border: 1px solid var(--lolv-ink);
	/* impose le rayon unifié par-dessus les valeurs inline héritées des patterns (10px) */
	border-radius: var(--lolv-radius) !important;
	box-shadow: var(--lolv-shadow);
	transition: transform .3s var(--lolv-ease), box-shadow .3s var(--lolv-ease), rotate .3s var(--lolv-ease);
}

/* Épingle dorée */
.lolv-card.wp-block-group.has-background::before,
.lolv-content-grid > .wp-block-group.has-background::before,
.wp-block-post-template > .wp-block-group.has-background::before {
	content: "";
	position: absolute;
	top: -7px;
	left: 50%;
	translate: -50% 0;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #E7CE92, var(--lolv-pin) 58%, #957a3c);
	box-shadow: 0 2px 5px rgba(42, 32, 24, .34);
	z-index: 2;
}

/* Inclinaison alternée très subtile (≈0,45°), neutralisée au survol */
.lolv-card.wp-block-group.has-background,
.lolv-content-grid > .wp-block-group:nth-child(odd),
.wp-block-post-template > .wp-block-group:nth-child(odd) { rotate: -0.45deg; }
.lolv-card.wp-block-group.has-background:nth-child(even),
.lolv-content-grid > .wp-block-group:nth-child(even),
.wp-block-post-template > .wp-block-group:nth-child(even) { rotate: 0.45deg; }

.lolv-card.wp-block-group.has-background:hover,
.lolv-content-grid > .wp-block-group.has-background:hover,
.wp-block-post-template > .wp-block-group.has-background:hover {
	rotate: 0deg;
	transform: translateY(-3px);
	box-shadow: var(--lolv-shadow-hover);
}

/* ─── Vignette de carte : dimensionnement robuste (SVG compris) ───
   Les illustrations SVG (photos de démo et replis) n'ont pas de dimensions
   intrinsèques fiables : sans cadre imposé, elles débordent. On fixe donc le
   format sur la <figure> (ratio 4/3 + recadrage) et l'<img> la remplit,
   qu'il s'agisse d'une vraie photo ou d'un repli illustré. */
.lolv-vignette {
	width: 100%;
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--lolv-radius-media);
}
.lolv-vignette img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ─── Lien d'action des cartes (archive + aperçu) ───
   La carte n'est PAS cliquable dans son ensemble : l'unique point d'entrée
   est ce lien « Découvrir le parcours → » en pied de carte (bloc read-more),
   net et explicite. La flèche glisse au survol/focus clavier. */
.lolv-card-cta {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	margin-top: var(--wp--preset--spacing--10, .5rem);
	align-self: start;
	color: var(--wp--preset--color--dore);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: .06em;
	text-decoration: none;
	transition: color .2s var(--lolv-ease), transform .2s var(--lolv-ease);
}
.lolv-card-cta:hover,
.lolv-card-cta:focus-visible {
	color: var(--wp--preset--color--sapin);
	transform: translateX(3px);
}

/* Aperçu accueil : le lien d'action partage la ligne « meta » (Durée à gauche,
   lien à droite) → on le recentre verticalement, sans la marge de pied. */
.lolv-featured-query .lolv-cardmeta .lolv-card-cta {
	align-self: center;
	margin-top: 0;
	margin-left: auto;
	text-align: right;
}

/* Photo de carte « tirage » : rayon média unifié (par-dessus l'inline 10px) */
.wp-block-post-template .wp-block-post-featured-image img {
	border-radius: var(--lolv-radius-media) !important;
}

/* Grand tirage encadré et épinglé (photo à la une de la fiche randonnée) */
.lolv-print {
	position: relative;
	/* « Tirage » encadré, modeste et centré — pas une bannière pleine
	   largeur : on plafonne la taille pour ne pas écraser le haut de fiche. */
	max-width: 580px;
	margin-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	margin-inline: auto;
	padding: .7rem;
	background: var(--wp--preset--color--creme);
	border: 1px solid var(--lolv-ink);
	border-radius: var(--lolv-radius);
	box-shadow: var(--lolv-shadow);
}
.lolv-print img {
	display: block;
	width: 100%;
	/* Bannière maîtrisée : les images de fiche (illustrations 1200×880 ou
	   photos) sont recadrées en 16/9 plutôt que rendues en pleine hauteur,
	   pour ne pas écraser le haut de la fiche. Le sujet (randonneur, centré
	   bas) reste visible. */
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center 60%;
	border-radius: 2px;
}
.lolv-print::before { /* épingle dorée, centrée */
	content: "";
	position: absolute;
	top: -8px;
	left: 50%;
	translate: -50% 0;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #E7CE92, var(--lolv-pin) 58%, #957a3c);
	box-shadow: 0 2px 5px rgba(42, 32, 24, .38);
	z-index: 2;
}

/* La carte de formulaire reste un spécimen épinglé, mais redressée (lisibilité) */
.lolv-form-card.wp-block-group.has-background {
	rotate: 0deg !important;
}

/* ─────────────────────────────────────────────────────────────
   Fiche randonnée — encart tarif compact + galerie d'illustrations
   Le prix n'est plus un grand bloc vert : carte sobre crème, filet
   doré en tête, prix en Cormorant, et un bouton « Réserver » qui
   donne du sens à l'espace. Le vert ne subsiste que sur le bouton.
   ───────────────────────────────────────────────────────────── */
.lolv-rando-price {
	margin-top: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--40);
	text-align: center;
	background: var(--wp--preset--color--creme);
	border: 1px solid var(--lolv-ink);
	border-top: 3px solid var(--wp--preset--color--dore);
	border-radius: var(--lolv-radius);
	box-shadow: var(--lolv-shadow);
}
.lolv-rando-price__amount {
	font-family: var(--wp--preset--font-family--titre);
	font-size: clamp(2.2rem, 5vw, 2.9rem);
	font-weight: 600;
	line-height: 1;
	margin-top: .4rem !important;
}
.lolv-rando-price__note {
	color: rgba(56, 74, 53, .68);
	margin-top: .35rem !important;
}
.lolv-rando-price .wp-block-button__link { white-space: nowrap; }
.lolv-rando-price__link a {
	color: var(--wp--preset--color--sapin);
	text-underline-offset: .18em;
}

/* Galerie « En images » : tirage encadré, même esprit que le reste du carnet */
.lolv-rando-galerie__item img {
	border: 1px solid var(--lolv-ink);
	box-shadow: var(--lolv-shadow);
}

/* ─────────────────────────────────────────────────────────────
   Tableau comparatif des tarifs (page « Tarifs »)
   Vraie <table> sémantique générée par le bloc serveur
   « laoulonva/grille-tarifs » (lecture du CPT Randonnée). Distinct du
   catalogue « Nos parcours » : ni photo ni prose — un registre de prix
   aligné, à colonnes, suivi d'un seul CTA global. Sur mobile, chaque
   ligne s'empile en bloc (nom + métriques étiquetées via data-label).
   ───────────────────────────────────────────────────────────── */

/* Utilitaire : masqué à l'œil, lu par les lecteurs d'écran. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Repli ultime si une valeur très longue dépasse : défilement horizontal
   propre, sans casser la mise en page de la page. */
.lolv-pricetable-wrap { overflow-x: auto; }

.lolv-pricetable {
	width: 100%;
	border-collapse: collapse;
	border-top: 1px solid var(--lolv-ink-strong);
	text-align: left;
}
.lolv-pricetable th,
.lolv-pricetable td {
	padding-block: var(--wp--preset--spacing--30);
	padding-inline: var(--wp--preset--spacing--20);
	border-bottom: 1px solid var(--lolv-ink);
	vertical-align: baseline;
}
/* En-tête de colonnes : petites capitales dorées, à droite sauf le nom */
.lolv-pricetable thead th {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--dore);
	white-space: nowrap;
}
.lolv-pricetable thead th:not(.lolv-pt-col--name) { text-align: right; }
/* Nom de la randonnée : Cormorant, en-tête de ligne (<th scope="row">) */
.lolv-pricetable .lolv-pt-name {
	margin: 0;
	font-family: var(--wp--preset--font-family--titre);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--encre);
	line-height: 1.2;
}
/* Métriques : valeurs alignées à droite en vue colonnes */
.lolv-pricetable td.lolv-pt-metric { text-align: right; white-space: nowrap; }
.lolv-pricetable .lolv-pt-metric--price {
	color: var(--wp--preset--color--sapin);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--medium);
}
.lolv-pricetable .lolv-pt-info-cell { width: 2.4rem; text-align: right; vertical-align: middle; }

/* Lien « fiche » : un « i » entouré, discret, en bout de ligne.
   Le libellé « Voir la fiche » reste dans le DOM (font-size:0) pour les
   lecteurs d'écran ; le « i » est dessiné en ::before. */
.lolv-pt-info {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	justify-self: end;
	align-self: center;
	width: 1.6rem;
	height: 1.6rem;
	border: 1px solid var(--wp--preset--color--dore);
	border-radius: 50%;
	color: var(--wp--preset--color--dore);
	font-size: 0;
	text-decoration: none;
	transition: background-color .2s var(--lolv-ease), color .2s var(--lolv-ease), transform .2s var(--lolv-ease);
}
.lolv-pt-info::before {
	content: "i";
	font-family: var(--wp--preset--font-family--titre);
	font-style: italic;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1;
}
.lolv-pt-info:hover,
.lolv-pt-info:focus-visible {
	background-color: var(--wp--preset--color--dore);
	color: var(--wp--preset--color--creme);
	transform: scale(1.08);
}

/* ─── Tableau tarifs : mobile (≤ 600 px) — empilement avec data-labels ───
   Chaque ligne devient un bloc ; chaque métrique est une rangée « étiquette
   à gauche / valeur à droite ». Les sélecteurs reprennent la spécificité de
   la vue colonnes (td.lolv-pt-metric) pour bien la remplacer ici. */
@media (max-width: 600px) {
	.lolv-pricetable,
	.lolv-pricetable tbody { display: block; }
	/* En-tête de colonnes retiré de l'affichage mais lu par les lecteurs
	   d'écran (les data-labels prennent le relais). */
	.lolv-pricetable thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
	}
	.lolv-pricetable tr.lolv-pricetable__row {
		display: block;
		position: relative;
		padding-block: var(--wp--preset--spacing--30);
		border-bottom: 1px solid var(--lolv-ink);
	}
	.lolv-pricetable .lolv-pt-name {
		display: block;
		margin-bottom: .4rem;
		padding-right: 2.4rem; /* place réservée au « i » */
	}
	/* Chaque métrique : étiquette (data-label) à gauche, valeur à droite. */
	.lolv-pricetable td.lolv-pt-metric {
		display: flex;
		align-items: baseline;
		gap: .75rem;
		max-width: 100%;
		padding: .12rem 0;
		border: 0;
		text-align: left;
		white-space: normal;
	}
	/* Étiquette en colonne fixe → les valeurs s'alignent sous le nom.
	   (Pas de space-between : la valeur resterait poussée hors écran.) */
	.lolv-pricetable td.lolv-pt-metric::before {
		content: attr(data-label);
		flex: 0 0 5.5rem;
		font-size: 0.66rem;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--wp--preset--color--dore);
		align-self: center;
	}
	.lolv-pricetable td.lolv-pt-metric .lolv-pt-value { min-width: 0; }
	/* Le « i » se cale en haut à droite du bloc, au niveau du nom. */
	.lolv-pricetable td.lolv-pt-info-cell {
		display: block;
		position: absolute;
		top: var(--wp--preset--spacing--30);
		right: 0;
		width: auto;
		padding: 0;
		border: 0;
	}
}

/* Carte de visite Contact : filigrane botanique (même esprit que le footer) */
.lolv-contact-card {
	position: relative;
	overflow: clip;
}
.lolv-contact-card > :not(.lolv-contact-card__plate) {
	position: relative;
	z-index: 1;
}
.lolv-contact-card__plate {
	position: absolute;
	z-index: 0;
	right: -8%;
	bottom: -6%;
	width: min(62%, 230px);
	opacity: .1;
	rotate: -8deg;
	pointer-events: none;
	filter: brightness(0) invert(1);
}
.lolv-contact-card__plate img {
	display: block;
	width: 100%;
	height: auto;
}

/* Icône en trait, posée librement — plus de pastille ni d'ombre */
.lolv-icon {
	display: block;
	width: auto;
	height: auto;
	margin: 0 0 var(--wp--preset--spacing--10, .5rem);
	border-radius: 0;
	background: none;
	box-shadow: none;
}
.lolv-icon img {
	display: block;
	width: 44px;
	height: 44px;
	opacity: .9;
}

/* ─── Page Contact ─── */
/* Panneau « carte de visite » : liens lisibles sur le fond vert (crème → doré) */
.lolv-contact-card a {
	color: var(--wp--preset--color--creme);
	text-decoration: none;
	font-weight: 600;
	overflow-wrap: anywhere;
}
.lolv-contact-card a:hover {
	color: var(--wp--preset--color--dore);
}

/* Lignes de coordonnées : icône + libellé/valeur, séparées par de fins filets */
.lolv-contact-row {
	align-items: center;
	padding: var(--wp--preset--spacing--30, 1rem) 0;
	border-top: 1px solid rgba(247, 244, 234, .16);
}
.lolv-contact-list > .lolv-contact-row:first-child {
	border-top: 0;
	padding-top: 0;
}
.lolv-contact-list > .lolv-contact-row:last-child {
	padding-bottom: 0;
}
.lolv-contact-icon {
	flex: 0 0 auto;
	margin: 0;
}
.lolv-contact-icon img {
	display: block;
	width: 22px;
	height: 22px;
}

/* Carte du formulaire : le titre adopte la même couleur de marque que les liens */
.lolv-form-card .wp-block-heading {
	color: var(--wp--preset--color--sapin);
}

/* Image décorative : sécurité largeur sur petits écrans */
.lolv-divider img {
	max-width: min(240px, 100%);
	height: auto;
	opacity: 0.45;
}

/* ─────────────────────────────────────────────────────────────
   Hero « Herbier » (accueil) — la première page du carnet
   ───────────────────────────────────────────────────────────── */
.lolv-hero {
	position: relative;
	overflow: clip;
	padding-top: clamp(2rem, 5vw, 4rem);
	padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
	/* Gouttière propre : la section gère son inset, pas de breakout alignwide imbriqué */
	padding-inline: clamp(1.25rem, 5vw, 4rem);
}

/* Les blocs internes s'alignent sur une largeur maîtrisée, centrée — jamais de débordement */
.lolv-hero__head,
.lolv-hero > .wp-block-columns,
.lolv-hero > .lolv-ink {
	width: 100%;
	max-width: 1160px;
	margin-inline: auto;
}
.lolv-hero h1 {
	overflow-wrap: break-word;
}

/* Planche botanique débordante, en filigrane derrière le texte */
.lolv-hero__plate {
	position: absolute;
	z-index: 0;
	top: -6%;
	right: -3%;
	width: min(32vw, 440px);
	opacity: .5;
	pointer-events: none;
	rotate: 3deg;
}
.lolv-hero__plate img {
	display: block;
	width: 100%;
	height: auto;
}

/* Contenu au-dessus de la planche */
.lolv-hero__head,
.lolv-hero > .wp-block-columns,
.lolv-hero__foot {
	position: relative;
	z-index: 1;
}

/* Bandeau de tête : kicker à gauche, libellé de planche à droite */
.lolv-hero__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--40);
}
.lolv-plate-label {
	margin: 0;
	color: var(--wp--preset--color--dore);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Titre de vedette : grand Cormorant, une vraie respiration */
.lolv-hero h1 {
	margin: 0;
}
.lolv-hero h1 em {
	color: var(--wp--preset--color--encre);
}

/* Annotation manuscrite en marge */
.lolv-note {
	font-family: var(--wp--preset--font-family--titre);
	font-style: italic;
	font-size: 1.35rem;
	line-height: 1.4;
	color: var(--wp--preset--color--encre);
	opacity: .82;
	rotate: -2deg;
}

/* Photo « tirage épinglé » : cadre papier, légère rotation, épingle dorée */
.lolv-hero__photo {
	position: relative;
	margin: 0;
	padding: .6rem;
	background: var(--wp--preset--color--creme);
	border: 1px solid var(--lolv-ink);
	border-radius: var(--lolv-radius);
	box-shadow: var(--lolv-shadow);
	rotate: var(--lolv-tilt);
}
.lolv-hero__photo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 2px;
}
.lolv-hero__photo figcaption {
	margin-top: .5rem;
	text-align: center;
	font-family: var(--wp--preset--font-family--titre);
	font-style: italic;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--sapin);
}
.lolv-hero__photo::before { /* épingle dorée */
	content: "";
	position: absolute;
	top: -8px;
	left: 50%;
	translate: -50% 0;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #E7CE92, var(--lolv-pin) 58%, #957a3c);
	box-shadow: 0 2px 5px rgba(42, 32, 24, .38);
	z-index: 2;
}

/* Filet à l'encre de clôture du hero */
.lolv-ink {
	margin-top: var(--wp--preset--spacing--40);
	text-align: center;
}
.lolv-ink img {
	display: inline-block;
	width: min(260px, 60%);
	height: auto;
	opacity: .9;
}

/* Révélation douce au défilement — progressive, sans JS, sans dépendance */
@supports (animation-timeline: view()) {
	.lolv-hero__photo,
	.lolv-hero__plate {
		animation: lolv-rise both;
		animation-timeline: view();
		animation-range: entry 0% cover 28%;
	}
	@keyframes lolv-rise {
		from { opacity: 0; transform: translateY(26px); }
	}
	.lolv-hero__plate { --_o: .5; }
}

/* ─── Hero : tablette ─── */
@media (max-width: 781px) {
	.lolv-hero__plate {
		top: -2%;
		right: auto;
		left: 50%;
		translate: -50% 0;
		width: min(58vw, 320px);
		opacity: .32;
	}
	.lolv-hero__head {
		flex-wrap: wrap;
	}
	.lolv-hero__photo {
		max-width: 460px;
		margin-inline: auto;
		margin-top: var(--wp--preset--spacing--40);
	}
}

/* ─── Hero : mobile — la planche devient bandeau d'ouverture ─── */
@media (max-width: 600px) {
	.lolv-hero__plate {
		width: min(70vw, 280px);
		opacity: .28;
	}
	.lolv-note {
		font-size: 1.2rem;
	}
}

/* ─────────────────────────────────────────────────────────────
   « Spécimen de marge » — chaque page sa plante en filigrane
   (esprit cahier de voyage). Ancré sur <main> (.lolv-page), DERRIÈRE le
   contenu (z-index négatif → au-dessus du grain de papier, sous le texte).
   ───────────────────────────────────────────────────────────── */
.lolv-page {
	position: relative;
	overflow-x: clip; /* la plante peut déborder en marge sans créer de scroll */
}
.lolv-flora {
	position: absolute;
	z-index: -1;
	top: -1.5rem;
	width: min(28vw, 320px);
	opacity: .2;
	pointer-events: none;
}
.lolv-flora img {
	display: block;
	width: 100%;
	height: auto;
}
.lolv-flora--right { right: -2%; rotate: 4deg; }
.lolv-flora--left  { left: -2%; rotate: -5deg; }
.lolv-flora--mid   { top: 15rem; }
@media (max-width: 600px) {
	.lolv-flora { opacity: .14; width: 54vw; top: -.5rem; }
}

/* ─────────────────────────────────────────────────────────────
   Galerie — photos en « planches » légèrement dispersées (scrapbook chic)
   ───────────────────────────────────────────────────────────── */
.wp-block-image.has-custom-border {
	border: 1px solid var(--lolv-ink);
	box-shadow: var(--lolv-shadow);
	transition: rotate .3s var(--lolv-ease), box-shadow .3s var(--lolv-ease);
}
.wp-block-column:nth-child(odd) .wp-block-image.has-custom-border { rotate: -0.7deg; }
.wp-block-column:nth-child(even) .wp-block-image.has-custom-border { rotate: 0.7deg; }
.wp-block-image.has-custom-border:hover {
	rotate: 0deg;
	box-shadow: var(--lolv-shadow-hover);
}

/* ─────────────────────────────────────────────────────────────
   Sections image-texte & portraits — tirage épinglé (pin + léger angle)
   ───────────────────────────────────────────────────────────── */
.wp-block-media-text__media {
	position: relative;
	rotate: -1deg;
	transition: rotate .3s var(--lolv-ease);
}
.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media { rotate: 1deg; }
.wp-block-media-text:hover .wp-block-media-text__media { rotate: 0deg; }
.wp-block-media-text__media img {
	border: 1px solid var(--lolv-ink);
	box-shadow: var(--lolv-shadow);
	border-radius: var(--lolv-radius-media) !important;
}
/* Photos (webp) recadrées en 4/3 ; les illustrations SVG gardent leur ratio natif.
   Le recadrage est piloté ici (et non en style inline) pour rester conforme au
   markup généré par le bloc core/media-text — sinon « contenu invalide » dans l'éditeur. */
.wp-block-media-text__media img[src$=".webp"] {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.wp-block-media-text__media::before { /* épingle dorée */
	content: "";
	position: absolute;
	top: -8px;
	left: 50%;
	translate: -50% 0;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #E7CE92, var(--lolv-pin) 58%, #957a3c);
	box-shadow: 0 2px 5px rgba(42, 32, 24, .38);
	z-index: 2;
}
/* Sur mobile : on neutralise l'angle (évite tout débordement visuel des coins) */
@media (max-width: 600px) {
	.wp-block-media-text__media,
	.wp-block-column:nth-child(odd) .wp-block-image.has-custom-border,
	.wp-block-column:nth-child(even) .wp-block-image.has-custom-border {
		rotate: 0deg;
	}
}

/* ─────────────────────────────────────────────────────────────
   Page « L'herbier » — index des planches (chaque plante nommée + décrite)
   ───────────────────────────────────────────────────────────── */
.lolv-herbier-plate {
	margin: 0 0 var(--wp--preset--spacing--20);
	height: 190px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
.lolv-herbier-plate img {
	max-height: 100%;
	width: auto;
}
.lolv-herbier-name {
	margin: 0;
	font-family: var(--wp--preset--font-family--titre);
	font-style: italic;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.1;
	color: var(--wp--preset--color--sapin);
}
.lolv-herbier-desc {
	margin: .45rem 0 0;
	line-height: 1.5;
	color: rgba(56, 74, 53, .82);
}
.lolv-herbier-role {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: .82rem;
	color: rgba(56, 74, 53, .68);
}
.lolv-herbier-role a {
	color: var(--wp--preset--color--sapin);
	font-weight: 600;
}

/* ── Étiquette de planche collée dans le coin : n° + nom latin + Auvergne · saison ── */
.lolv-herbier-tag {
	position: absolute;
	top: 10px;
	right: -8px;
	rotate: 2.5deg;
	width: 124px;
	padding: .36rem .5rem .42rem;
	background: var(--wp--preset--color--creme);
	border: 1px solid var(--lolv-ink);
	box-shadow: var(--lolv-shadow);
	text-align: center;
	z-index: 4;
}
.lolv-herbier-tag__num {
	display: block;
	font-size: .54rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--dore);
}
.lolv-herbier-tag__latin {
	display: block;
	margin: .14rem 0;
	font-family: var(--wp--preset--font-family--titre);
	font-style: italic;
	font-size: .84rem;
	line-height: 1.12;
	color: var(--wp--preset--color--sapin);
}
.lolv-herbier-tag__place {
	display: block;
	padding-top: .18rem;
	border-top: 1px solid var(--lolv-ink);
	font-size: .55rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(56, 74, 53, .62);
}

/* Respect des préférences de mouvement réduit */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: .01ms !important;
	}
}

/* ─── Responsivité : tablette étroite (≤ 650 px) ─── */
@media (max-width: 650px) {
	/* Réduit le gap image/texte avant empilement pour éviter le squeeze */
	.wp-block-media-text.alignwide {
		column-gap: var(--wp--preset--spacing--30);
	}
}

/* ─── Responsivité : mobile (≤ 600 px) ─── */
@media (max-width: 600px) {
	/* Restaure un padding horizontal sur le texte quand le media-text s'empile
	   (on avait zeroed ces valeurs pour le desktop large) */
	.wp-block-media-text.alignwide.is-stacked-on-mobile .wp-block-media-text__content {
		padding-left: var(--wp--preset--spacing--30);
		padding-right: var(--wp--preset--spacing--30);
	}
}

/* ─── Responsivité : petit mobile (≤ 700 px) ─── */
@media (max-width: 700px) {
	.lolv-quote-band {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--20);
	}
	.lolv-quote-band .lolv-quote {
		padding-left: var(--wp--preset--spacing--30);
	}
	.lolv-quote-band .lolv-quote p {
		font-size: clamp(1.45rem, 8vw, 1.85rem);
	}
}