/* Page Activités (Activites.dc.html) : bandeau, filtres collants, sections des sorties, carte des sorties.
Chargée par les widgets vlbh-activites-hero, vlbh-activites, vlbh-carte-sorties (inc/elementor.php, handle vlbh-activites). */
/* Le corps de la maquette (18 px / 1.65) est hérité par tout ce qui n'a pas de taille propre. */
.vlbh-act-hero, .vlbh-activites, .vlbh-carte-sorties, .vlbh-act-legend-wrap, .vlbh-act-map-note { font-size: 18px; line-height: 1.65; }
/* ——— Bandeau ——— */
.vlbh-act-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: min(82vh, 760px); background: var(--forest-800); overflow: hidden; }
.vlbh-act-hero-photo { position: absolute; top: 0; right: 0; bottom: 0; width: 68%; -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .35) 22%, rgba(0, 0, 0, .85) 46%, #000 62%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .35) 22%, rgba(0, 0, 0, .85) 46%, #000 62%); }
.vlbh-act-hero-photo__img { position: absolute; inset: 0; }
.vlbh-act-hero-photo__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vlbh-act-hero-blend { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(18, 44, 30, .55) 0%, rgba(18, 44, 30, .08) 34%, rgba(18, 44, 30, 0) 60%), linear-gradient(90deg, rgba(22, 53, 33, .25) 0%, rgba(22, 53, 33, 0) 55%); }
.vlbh-act-hero-text { position: relative; z-index: 2; display: grid; align-content: center; gap: 20px; padding: 80px 24px 80px max(40px, calc((100vw - 1280px) / 2)); }
.vlbh-act-hero-orn { position: absolute; top: -8px; left: -8px; width: 170px; height: auto; opacity: .9; pointer-events: none; user-select: none; }
.vlbh-act-hero-in { opacity: 0; transform: translateY(10px); transition: opacity 900ms var(--ease-soft) 120ms, transform 900ms var(--ease-soft) 120ms; }
.vlbh-act-hero.is-shown .vlbh-act-hero-in { opacity: 1; transform: none; }
.elementor .vlbh-act-hero h1, .vlbh-act-h1 { margin: 16px 0 0; font: 600 clamp(38px, 5vw, 66px)/1.05 var(--font-serif); color: var(--cream-100); text-wrap: balance; letter-spacing: 0; }
.vlbh-act-h1__script { font-family: var(--font-script); font-weight: 400; font-size: .92em; color: var(--gold-200); }
.vlbh-act-hero-phrase { margin: 18px 0 0; font: 400 17px/1.65 var(--font-body); color: var(--cream-200); max-width: 46ch; }
.vlbh-act-hero-en { margin: 8px 0 0; font: italic 400 14.5px/1.6 var(--font-body); color: var(--gold-200); max-width: 46ch; }
.vlbh-act-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.vlbh-act-hero-badges { position: absolute; right: 22px; bottom: 20px; z-index: 3; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; pointer-events: none; }
.vlbh-act-hero-badges span { font: 500 10.5px/1.65 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--cream-100); background: rgba(18, 44, 30, .72); border: 1px solid rgba(219, 180, 100, .5); border-radius: var(--radius-pill); padding: 6px 12px; }
/* ——— Filtres collants ——— */
.vlbh-act-filters { position: sticky; top: var(--header-h); z-index: 20; background: color-mix(in srgb, var(--cream-300) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--border-hairline); }
.vlbh-act-filters-row { max-width: 1280px; margin: 0 auto; padding: 12px 40px; display: flex; align-items: center; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.vlbh-act-filters-row::-webkit-scrollbar { display: none; }
.vlbh-act-filters__label { flex: none; font: 600 9.5px/1.65 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); margin-right: 4px; }
button.vlbh-act-chip.vlbh-act-chip { cursor: pointer; display: inline-flex; align-items: center; gap: 7px; flex: none; border: 1px solid var(--border-hairline); background: var(--cream-050); color: var(--text-secondary); border-radius: var(--radius-pill); padding: 10px 16px; min-height: 44px; font: 500 11px/normal var(--font-sans); letter-spacing: .12em; text-transform: uppercase; transition: var(--transition-color); box-shadow: none; }
.vlbh-act-chip svg { color: var(--gold-700); flex: none; }
button.vlbh-act-chip.vlbh-act-chip.is-on { border-color: var(--border-gold); background: var(--gold-050); color: var(--forest-800); font-weight: 600; }
.vlbh-act-chip.is-on svg { color: var(--gold-900); }
.vlbh-act-filters__compte { margin-left: auto; flex: none; font: italic 400 13px/1.65 var(--font-body); color: var(--text-muted); }
/* ——— Une sortie ——— */
.vlbh-act { background: var(--cream-300); padding: 64px 40px; }
.vlbh-act--alt { background: var(--cream-200); }
.vlbh-act[hidden] { display: none; }
.vlbh-act-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: center; min-height: min(74vh, 680px); }
.vlbh-act-photo { order: 1; }
.vlbh-act-text { order: 2; display: grid; gap: 20px; align-content: center; }
.vlbh-act-flip .vlbh-act-photo { order: 2; }
.vlbh-act-flip .vlbh-act-text { order: 1; }
.vlbh-act-photo__cadre { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--border-hairline); background: var(--cream-500); }
.vlbh-act-photo__cadre > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vlbh-act-photo__cats { position: absolute; top: 16px; left: 16px; display: flex; gap: 6px; flex-wrap: wrap; pointer-events: none; }
.vlbh-act-photo__num { position: absolute; right: 18px; bottom: 14px; font: 400 44px/1 var(--font-display); color: var(--cream-100); text-shadow: 0 2px 14px rgba(22, 53, 33, .55); pointer-events: none; }
.vlbh-photo-vide { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 12px; color: var(--forest-800); font: 500 13px/1.3 var(--font-sans); letter-spacing: .01em; background: rgba(127, 127, 127, .08); }
.vlbh-photo-vide__anneau { position: absolute; inset: 0; border: 1.5px dashed currentColor; opacity: .35; pointer-events: none; }
.vlbh-photo-vide > svg { opacity: .45; }
.vlbh-photo-vide__legende { max-width: 90%; opacity: .75; }
.elementor .vlbh-act-text h2, .vlbh-act-title { margin: 10px 0 0; font: 600 clamp(30px, 3.2vw, 44px)/1.1 var(--font-serif); color: var(--forest-800); text-wrap: balance; letter-spacing: 0; }
.vlbh-act-en { margin-top: 6px; font: italic 400 16px/1.65 var(--font-body); color: var(--text-accent); }
.vlbh-act-filet { max-width: 200px; }
.vlbh-act-texte { margin: 0; font: 400 17px/1.68 var(--font-body); color: var(--text-secondary); max-width: 58ch; }
.vlbh-act-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 20px 0; border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); }
.vlbh-act-meta__item { display: grid; gap: 4px; }
.vlbh-act-meta__label { display: flex; align-items: center; gap: 6px; font: 600 9.5px/1.65 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--text-accent); }
.vlbh-act-meta__label svg { color: var(--gold-900); flex: none; }
.vlbh-act-meta__value { font: 400 13.5px/1.65 var(--font-sans); color: var(--forest-800); }
.vlbh-act-conseil { display: grid; gap: 4px; padding-left: 16px; border-left: 2px solid var(--aveu-600); }
.vlbh-act-conseil__titre { font: 600 9.5px/1.65 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--text-aveu); }
.vlbh-act-conseil__texte { font: italic 400 16px/1.6 var(--font-body); color: var(--text-secondary); max-width: 58ch; }
.vlbh-act-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.vlbh-act-note { padding: 0 40px 64px; background: var(--cream-300); }
.vlbh-act-note--alt { background: var(--cream-200); }
.vlbh-act-note__in { max-width: 1280px; margin: 0 auto; display: flex; justify-content: center; }
/* ——— Carte des sorties (villa-map de la maquette) ——— */
.vlbh-carte-sorties { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--gold-500); background: var(--forest-900); z-index: 0; }
.vlbh-carte-sorties .leaflet-container { height: 100%; width: 100%; background: #0f2a1c; font-family: var(--font-sans), sans-serif; }
.vlbh-carte-sorties .leaflet-tile { filter: saturate(.52) sepia(.16) brightness(1.04) contrast(.96); }
.vlbh-carte-sorties .leaflet-control-attribution { background: rgba(250, 242, 232, .86); color: #163521; font-size: 10px; }
.vlbh-carte-sorties .leaflet-control-attribution a { color: #7f6224; }
.vlbh-carte-sorties .leaflet-bar a { background: var(--cream-050); color: var(--forest-800); border-bottom-color: var(--border-hairline); }
.vlbh-carte-sorties .leaflet-bar a:hover { background: var(--cream-200); }
.vlbh-carte-sorties .leaflet-div-icon { background: none; border: 0; }
.vlbh-pin { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #163521; border: 2px solid #dbb464; color: #faf2e8; font: 400 14px/1 var(--font-display); box-shadow: 0 2px 10px rgba(12, 30, 19, .45); }
.vlbh-carte-sorties .leaflet-popup-content-wrapper { background: #fefdfb; border: 1px solid #dbb464; border-radius: 12px; box-shadow: 0 8px 26px rgba(22, 53, 33, .18); }
.vlbh-carte-sorties .leaflet-popup-content { margin: 14px 16px; font-family: var(--font-body), Georgia, serif; color: #163521; }
.vlbh-carte-sorties .leaflet-popup-tip { background: #fefdfb; border-right: 1px solid #dbb464; border-bottom: 1px solid #dbb464; }
.vlbh-pop-t { font: 600 17px/1.2 var(--font-serif); }
.vlbh-pop-m { font: 400 10px/1.65 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: #7f6224; margin-top: 5px; }
.vlbh-pop-x { font-size: 14px; line-height: 1.55; margin-top: 8px; }
.vlbh-pop-a { display: inline-block; margin-top: 9px; font: 400 11px/1.65 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: #163521; }
.vlbh-act-legend-wrap { margin-top: 20px; }
.vlbh-act-legend { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.vlbh-act-legend a, .vlbh-act-legend a:hover { text-decoration: none; display: inline-flex; align-items: center; gap: 7px; font: 400 11.5px/1.65 var(--font-sans); color: var(--cream-100); background: rgba(18, 44, 30, .78); border: 1px solid rgba(219, 180, 100, .45); border-radius: var(--radius-pill); padding: 7px 12px; }
.vlbh-act-legend__num { font: 400 12px/1.65 var(--font-display); color: var(--gold-200); }
.vlbh-act-legend__dist { color: var(--gold-200); }
.vlbh-act-map-note { margin-top: 24px; display: flex; justify-content: center; }
.vlbh-act-map-note__texte { font: italic 400 13px/1.65 var(--font-body); color: var(--gold-200); text-align: center; max-width: 60ch; }
/* ——— Tablette et mobile (règles de la maquette) ——— */
@media (max-width: 900px) {
.vlbh-act-hero { grid-template-columns: 1fr; min-height: 0; }
.vlbh-act-hero-photo { position: relative; width: 100%; order: -1; aspect-ratio: 16 / 10; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, rgba(0, 0, 0, .4) 80%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 55%, rgba(0, 0, 0, .4) 80%, rgba(0, 0, 0, 0) 100%); }
.vlbh-act-hero-blend { background: linear-gradient(to top, rgba(22, 53, 33, .45) 0%, rgba(22, 53, 33, 0) 50%); }
.vlbh-act-hero-text { padding: 0 40px 56px; margin-top: -60px; }
.vlbh-act-hero-badges { display: none; }
.vlbh-act-grid { grid-template-columns: 1fr; min-height: 0; gap: 32px; }
.vlbh-act-flip .vlbh-act-photo, .vlbh-act-photo { order: 1; }
.vlbh-act-flip .vlbh-act-text, .vlbh-act-text { order: 2; }
.vlbh-act-meta { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
/* La section de la note garde ses 40 px de côté : la maquette ne lui donne pas la classe .vlbh-section resserrée sur mobile. */
.vlbh-act { padding-left: 15px; padding-right: 15px; }
.vlbh-act { padding-top: 40px; padding-bottom: 40px; }
.vlbh-act-hero-text { padding: 0 15px 44px; margin-top: -40px; }
.vlbh-act-hero-orn { width: 110px; }
.elementor .vlbh-act-hero h1, .vlbh-act-h1 { font-size: 34px; }
.vlbh-act-hero-cta { flex-direction: column; }
.vlbh-act-hero-cta > * { width: 100%; }
.vlbh-act-filters-row { padding-left: 15px; padding-right: 15px; }
.vlbh-act-filters__compte { display: none; }
.elementor .vlbh-act-text h2, .vlbh-act-title { font-size: 28px; }
.vlbh-act-buttons > * { width: 100%; }
/* Écart de la maquette sous la carte, sur mobile : la légende descend de 200 px. */
.vlbh-act-legend { margin-top: 200px; padding: 0 0 14px; }
}