/*
 * LPT — Pages destination
 * Couleurs héritées du thème GeneratePress (--accent, --base…), avec repli
 * en dur si les variables ne sont pas définies (éditeur, autre contexte).
 */

/* Le site a une navigation collante : sans cette marge, les liens d'ancrage
   font atterrir le titre visé sous l'en-tête. */
.entry-content [id] { scroll-margin-top: 100px; }

/* ------------------------------------------------------------- Respiration */
/* Espace au-dessus des titres de section, pour détacher les blocs les uns des
   autres. Ciblé via :has(.lpt-toc) — donc uniquement les pages qui portent le
   sommaire automatique — afin de ne pas modifier l'espacement des articles du
   blog, qui partagent la même feuille de style. */

.entry-content:has(.lpt-toc) h2 { margin-top: 3.75rem; margin-bottom: 1rem; }
.entry-content:has(.lpt-toc) h3 { margin-top: 2.25rem; }
.entry-content:has(.lpt-toc) .lpt-toc + h2 { margin-top: 2.5rem; }
.entry-content:has(.lpt-toc) h2:first-child { margin-top: 0; }

/* Repli pour les navigateurs sans :has() — espacement par défaut conservé. */

/* ---------------------------------------------------------------- Sommaire */

.lpt-toc {
	background: var(--base, #e8f0f3);
	border-radius: 10px;
	padding: 1.5rem 1.75rem;
	margin-block: 2.5rem;
}
.lpt-toc__titre {
	font-family: Lora, Georgia, serif;
	font-weight: 700;
	color: var(--accent, #a6300b);
	margin: 0 0 .75rem;
}
.lpt-toc__liste { margin: 0; padding-left: 1.15rem; }
.lpt-toc__item { margin: .4rem 0; }
.lpt-toc__item--n1 { margin-left: 1.1rem; font-size: .95em; }
.lpt-toc a { text-decoration: none; }
.lpt-toc a:hover, .lpt-toc a:focus { text-decoration: underline; }

/* ---------------------------------------------------------------- Encadrés */
/* Construits en colonnes et non en groupes : le thème impose
   padding:80px 20px à tout .wp-block-group__inner-container. */

.wp-block-columns.lpt-box { margin-block: 2.5rem; gap: 1.5rem; }
.lpt-box > .wp-block-column {
	background: var(--base, #e8f0f3);
	border-radius: 10px;
	padding: 1.75rem 1.5rem;
}
.lpt-box > .wp-block-column > *:first-child { margin-top: 0; }
.lpt-box > .wp-block-column > *:last-child { margin-bottom: 0; }

/* Encadré « L'avis de l'experte » */
.lpt-box.lpt-expert > .wp-block-column { border-left: 5px solid var(--accent, #a6300b); }
.lpt-expert__intro { font-family: Lora, Georgia, serif; font-size: 1.15em; color: var(--accent, #a6300b); }

/* Signature d'auteur : photo ronde, nom, fonction. Reste sur une ligne même
   sur mobile, où le CSS natif empilerait les colonnes (d'où les !important). */
.wp-block-columns.lpt-auteur {
	align-items: center;
	gap: .9rem;
	margin-top: 1.4rem;
	padding-top: 1.1rem;
	border-top: 1px solid rgba(53, 58, 61, .15);
	flex-wrap: nowrap;
}
.wp-block-columns.lpt-auteur > .wp-block-column.lpt-auteur__photo {
	flex: 0 0 62px;
	max-width: 62px;
}

/* La boîte de la vignette est verrouillée à trois niveaux : la colonne, la
   figure, et l'habillage que l'éditeur ajoute autour de l'image (poignée de
   redimensionnement). Sans cela, l'éditeur laisse la figure à sa taille
   naturelle et décale le nom vers la droite. */
.lpt-auteur__photo,
.lpt-auteur__photo figure,
.lpt-auteur__photo .components-resizable-box__container {
	width: 62px;
	max-width: 62px;
	height: 62px;
	margin: 0;
	padding: 0;
}
.lpt-auteur__photo img {
	width: 62px !important;
	height: 62px !important;
	max-width: none;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

/* L'éditeur intercale ses propres marges entre blocs frères, avec une
   spécificité équivalente à la nôtre : l'arbitrage dépendrait alors de
   l'ordre de chargement des feuilles. Le !important, limité à la signature
   d'auteur, est ici le seul moyen d'obtenir le même rendu des deux côtés.
   Ces marges gonflaient la colonne de texte, et la vignette — centrée
   verticalement — se retrouvait décalée vers le bas. */
.lpt-auteur .wp-block-column > * { margin-block: 0 !important; }
.lpt-auteur .lpt-auteur__photo figure { margin: 0 !important; }
.lpt-auteur .lpt-auteur__nom { margin: 0; font-weight: 700; line-height: 1.3; }
.lpt-auteur .lpt-auteur__role {
	margin: .15rem 0 0 !important;
	font-size: .92em;
	line-height: 1.3;
	color: var(--contrast-2, #666);
}

/* La colonne de texte ne doit pas imposer de largeur minimale, sinon elle
   pousse la vignette quand le canevas de l'éditeur est étroit. */
.lpt-auteur > .wp-block-column:not(.lpt-auteur__photo) { min-width: 0; }

/* Le canevas de l'éditeur est plus étroit que le site (barre latérale
   ouverte) : sans cela les deux colonnes s'empilent côté back-office. */
@media (max-width: 781px) {
	.wp-block-columns.lpt-auteur { flex-wrap: nowrap !important; }
	.wp-block-columns.lpt-auteur > .wp-block-column { flex-basis: auto !important; }
	.wp-block-columns.lpt-auteur > .wp-block-column.lpt-auteur__photo {
		flex: 0 0 62px !important;
		width: 62px !important;
	}
}

/* Appel à l'action */
.lpt-box.lpt-cta > .wp-block-column {
	background: var(--accent, #a6300b);
	color: var(--base-3, #fff);
	text-align: center;
	padding: 2.75rem 1.75rem;
	border-radius: 12px;
}
.lpt-cta p, .lpt-cta strong { color: var(--base-3, #fff); }
.lpt-cta__titre {
	font-family: Lora, Georgia, serif;
	font-size: 1.55em;
	line-height: 1.3;
	margin-bottom: .5rem;
}
.lpt-cta .wp-block-buttons { justify-content: center; }
.lpt-cta .wp-block-button__link {
	background: var(--base-3, #fff);
	color: var(--accent, #a6300b);
	border-radius: 6px;
	padding: 1rem 2.5rem;
	font-weight: 700;
}
.lpt-cta .wp-block-button__link:hover,
.lpt-cta .wp-block-button__link:focus { background: var(--base, #e8f0f3); color: var(--accent, #a6300b); }

/* Ligne « à compléter » — à supprimer une fois la section rédigée. */
.lpt-warn {
	background: #fdf3e3;
	border-left: 4px solid var(--base-2, #bb7c11);
	border-radius: 6px;
	padding: .9rem 1.1rem;
	font-size: .95em;
	color: #6b4a07;
}

/* ------------------------------------------------------------------ Cartes */
/* Hauteurs égales : les colonnes s'étirent, les images sont recadrées au même
   format et le lien est poussé en bas de carte. */

.wp-block-columns.lpt-cards { align-items: stretch; gap: 1.5rem; }
.lpt-cards > .wp-block-column.lpt-card {
	display: flex;
	flex-direction: column;
	background: var(--base-3, #fff);
	border: 1px solid #d7e2e8;
	border-radius: 10px;
	overflow: hidden;
	padding: 0 0 1.35rem;
}
.lpt-card > * { padding-inline: 1.35rem; margin-block: .6rem; }
.lpt-card > figure.wp-block-image {
	padding-inline: 0;
	margin: 0 0 .9rem;
}
.lpt-card figure.wp-block-image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.lpt-card h3 { margin-top: 0; }
.lpt-card > .lpt-plus {
	background: var(--base, #e8f0f3);
	border-left: 3px solid var(--base-2, #bb7c11);
	border-radius: 0 6px 6px 0;
	/* `margin-top:auto` cale l'encart en bas de carte : c'est lui qui aligne
	   désormais les cartes entre elles, puisqu'il contient le lien. */
	margin: auto 1.35rem .2rem;
	padding: .7rem .9rem;
	font-size: .93em;
	font-style: italic;
	color: var(--contrast, #353a3d);
}
.lpt-plus__label {
	display: block;
	font-style: normal;
	font-weight: 700;
	font-size: .74em;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--base-2, #bb7c11);
	margin-bottom: .2rem;
}
.lpt-plus a {
	display: inline-block;
	margin-top: .5rem;
	font-style: normal;
	font-weight: 700;
}

/* Repli pour une carte sans encart « notre expérience ». */
.lpt-card__lien { margin-top: auto; padding-top: .75rem; font-weight: 600; }
.lpt-card__lien a { text-decoration: none; }
.lpt-card__lien a:hover, .lpt-card__lien a:focus { text-decoration: underline; }

/* Cartes sans image : panneau plein et sans bordure. Une carte blanche
   cernée d'un filet ressemble à un élément cliquable ; un aplat non. */
.lpt-cards.lpt-cards--simples > .wp-block-column.lpt-card {
	background: var(--base, #e8f0f3);
	border: 0;
	padding-top: 1.4rem;
}

/* ------------------------------------------------------ Fiche pratique */
/* Rangées label / valeur, construites en colonnes plutôt qu'en tableau :
   l'icône est portée par la CLASSE de la colonne (attribut de bloc, donc
   préservé à l'édition) et non par un élément glissé dans le texte. */

.wp-block-columns.lpt-fiche {
	gap: 1.25rem;
	margin-block: 0;
	flex-wrap: nowrap;
	align-items: baseline;
}
.lpt-fiche + .lpt-fiche { border-top: 1px solid #d7e2e8; }
.lpt-fiche > .wp-block-column { padding-block: .85rem; }
.wp-block-columns.lpt-fiche > .wp-block-column.lpt-fiche__label {
	flex: 0 0 27%;
	max-width: 27%;
	font-weight: 700;
	color: var(--contrast-3, #004aad);
}
/* Même raison que pour la signature d'auteur : l'éditeur injecte ses propres
   marges entre blocs frères et gonflerait la hauteur des rangées. */
.lpt-fiche > .wp-block-column > * { margin-block: 0 !important; }
.lpt-fiche > .wp-block-column > * + * { margin-block-start: .5rem !important; }

/* Sur mobile, deux colonnes serrées sont illisibles : on empile. */
@media (max-width: 700px) {
	.wp-block-columns.lpt-fiche { flex-wrap: wrap; gap: 0; }
	.wp-block-columns.lpt-fiche > .wp-block-column,
	.wp-block-columns.lpt-fiche > .wp-block-column.lpt-fiche__label {
		flex-basis: 100%;
		max-width: 100%;
	}
	.lpt-fiche > .wp-block-column.lpt-fiche__label { padding-bottom: .15rem; }
	.lpt-fiche > .wp-block-column:not(.lpt-fiche__label) { padding-top: 0; }
}

/* --------------------------------------------------------------------- FAQ */

.wp-block-details.lpt-faq {
	background: var(--base-3, #fff);
	border: 1px solid #d7e2e8;
	border-radius: 8px;
	padding: 1rem 1.25rem;
	margin-block: .85rem;
}
.lpt-faq summary {
	cursor: pointer;
	font-weight: 700;
	color: var(--contrast-3, #004aad);
	list-style-position: outside;
}
.lpt-faq summary::marker { color: var(--accent, #a6300b); }
.lpt-faq[open] { background: var(--base, #e8f0f3); }
.lpt-faq[open] summary { margin-bottom: .6rem; }
.lpt-faq > *:not(summary) { margin-block: .5rem 0; }

/* ----------------------------------------------------------------- Galerie */

.wp-block-gallery.lpt-galerie { margin-block: 2rem; }
.lpt-galerie img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }


/* Icônes filaires intégrées : ni police d'icônes ni bibliothèque externe.

   Chaque modificateur ne fait que définir une variable `--lpt-ico`. Elle est
   consommée soit par un <span class="lpt-ico lpt-ico--x">, soit — et c'est le
   cas normal — par le ::before d'un bloc portant la classe. Cette seconde
   forme est indispensable : dans l'éditeur, le contenu des cellules et des
   paragraphes passe par RichText, qui supprime les éléments inline vides.
   Un <span> vide y est donc invisible, et perdu à la première modification.
   Une classe posée sur un bloc, elle, est un attribut : elle survit. */
.lpt-ico--age { --lpt-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5.5' r='2.5'/%3E%3Cpath d='M12 8v7'/%3E%3Cpath d='M8.5 11h7'/%3E%3Cpath d='M9.5 21l2.5-6 2.5 6'/%3E%3C/svg%3E"); }
.lpt-ico--saison { --lpt-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E"); }
.lpt-ico--trajet { --lpt-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='11' rx='2'/%3E%3Cpath d='M3 11h18M7 20v-2M17 20v-2'/%3E%3Ccircle cx='7.5' cy='16' r='.6' fill='black'/%3E%3Ccircle cx='16.5' cy='16' r='.6' fill='black'/%3E%3C/svg%3E"); }
.lpt-ico--sante { --lpt-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-4.4-7-9.6A4.4 4.4 0 0 1 12 8a4.4 4.4 0 0 1 7 3.4C19 16.6 12 21 12 21z'/%3E%3Cpath d='M12 11v4M10 13h4'/%3E%3C/svg%3E"); }
.lpt-ico--repas { --lpt-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4v6a3 3 0 0 0 6 0V4M7 10v10'/%3E%3Cpath d='M17 4c-1.5 1.5-2 3-2 5s.5 2.5 2 2.5V20'/%3E%3C/svg%3E"); }
.lpt-ico--vol { --lpt-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3L3 10.2l7.2 2.6 2.6 7.2L21 3z'/%3E%3Cpath d='M10.2 12.8L14 9'/%3E%3C/svg%3E"); }
.lpt-ico--lit { --lpt-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18V7M3 12h18v6M21 18v-4a3 3 0 0 0-3-3h-8'/%3E%3Ccircle cx='7' cy='10' r='2'/%3E%3C/svg%3E"); }
.lpt-ico--billet { --lpt-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v2a2 2 0 0 0 0 4v2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2a2 2 0 0 0 0-4V8z'/%3E%3Cpath d='M14 6v12' stroke-dasharray='2 2'/%3E%3C/svg%3E"); }
.lpt-ico--total { --lpt-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M8 7h8M8 11h3M13 11h3M8 15h3M13 15v2M8 18h3'/%3E%3C/svg%3E"); }

/* Le ::before est porté par le PARAGRAPHE et non par la colonne : posé sur
   la colonne, il se retrouverait sur sa propre ligne, au-dessus du libellé.
   La variable --lpt-ico, définie sur la colonne, est héritée. */
.lpt-ico,
.lpt-fiche__label > p:first-of-type::before {
	content: '';
	display: inline-block;
	width: 1.15em;
	height: 1.15em;
	vertical-align: -0.22em;
	margin-right: .5rem;
	background-color: currentColor;
	-webkit-mask: var(--lpt-ico) center / contain no-repeat;
	mask: var(--lpt-ico) center / contain no-repeat;
}
.lpt-fiche__label:not([class*="lpt-ico--"]) > p:first-of-type::before { content: none; }

/* -------------------------------------------------- Liste des destinations */
/* Rendu de [lpt_destinations] : grille de cartes cliquables, à hauteur égale. */

.lpt-destinations {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.75rem;
	margin-block: 2.5rem;
}
.lpt-destination {
	display: flex;
	flex-direction: column;
	background: var(--base-3, #fff);
	border: 1px solid #d7e2e8;
	border-radius: 10px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform .15s ease, box-shadow .15s ease;
}
.lpt-destination:hover,
.lpt-destination:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(53, 58, 61, .13);
}
.lpt-destination__visuel { display: block; }
.lpt-destination__visuel img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.lpt-destination__corps {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.1rem 1.25rem 1.35rem;
}
.lpt-destination__titre {
	font-family: Lora, Georgia, serif;
	font-size: 1.2em;
	line-height: 1.3;
	color: var(--contrast-3, #004aad);
	margin-bottom: .5rem;
}
.lpt-destination__resume {
	font-size: .93em;
	color: var(--contrast-2, #666);
	line-height: 1.5;
}
.lpt-destination__lien {
	margin-top: auto;
	padding-top: .9rem;
	font-weight: 700;
	color: var(--accent, #a6300b);
}

/* Filet de sécurité : si un thème ou une extension affichait l'image à la une
   sans passer par post_thumbnail_html, on la masque aussi côté CSS. Portée
   limitée aux pages qui portent le sommaire automatique. */
body:has(.lpt-toc) img.wp-post-image,
body:has(.lpt-toc) :has(> img.wp-post-image) { display: none; }
body:has(.lpt-toc) .lpt-destinations :has(> img.wp-post-image) { display: block; }

/* ------------------------------------------------------- Maillage interne */

.lpt-fil {
	font-size: .93em;
	margin-bottom: 1.5rem;
}
.lpt-fil a {
	text-decoration: none;
	color: var(--contrast-2, #666);
	font-weight: 600;
}
.lpt-fil a:hover,
.lpt-fil a:focus { color: var(--accent, #a6300b); }
.lpt-fil__fleche { margin-right: .25rem; }

.lpt-autres__titre {
	font-family: Lora, Georgia, serif;
	font-size: 1.35em;
	color: var(--accent, #a6300b);
	margin-top: 3.75rem;
	margin-bottom: .25rem;
}
.lpt-destinations--compact { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1.25rem; }
.lpt-destinations--compact .lpt-destination__corps { padding: .9rem 1rem 1.1rem; }
.lpt-destinations--compact .lpt-destination__titre { font-size: 1.05em; margin-bottom: 0; }
.lpt-destinations--compact .lpt-destination__lien { padding-top: .6rem; font-size: .9em; }