/* Bloc villemont/visite-pratique — styles venus de sections.css (refonte 1e) */

/* ── Visite — infos pratiques (image + liste) ── */
.vp-head { margin-bottom: 48px; }

.vp-head .section-title { margin-top: 14px; }

/* La photo s'étire sur la hauteur de la liste : début au niveau de la 1re ligne,
   fin (légende comprise) au niveau du dernier filet. */
.vp-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--gap-large); align-items: stretch; }

.vp-media { display: flex; flex-direction: column; }

.vp-media .img-frame { flex: 1; min-height: 360px; }

.vp-media .img-frame img { position: absolute; inset: 0; } /* la liste fixe la hauteur, pas l'image */
.vp-media__caption { margin-top: 14px; }

/* Ordinateur : la photo s'arrête sur le dernier filet de la liste, la légende passe dessous. */
@media (min-width: 1025px) {

  .vp-media { position: relative; }

  .vp-media__caption { position: absolute; top: 100%; left: 0; right: 0; }
}

.vp-list { margin: 0; border-top: 1px solid var(--rule-soft); }

.vp-row { display: grid; grid-template-columns: 170px 1fr; padding: 18px 0; border-bottom: 1px solid var(--rule-soft); align-items: baseline; }

.vp-row__label { color: var(--ochre-deep); margin: 0; }

.vp-row__value { font-size: var(--fs-text); margin: 0; }

.vp-info .btn { margin-top: 36px; }

@media (max-width: 768px) {

  .vp-grid { grid-template-columns: 1fr; gap: var(--gap-medium); }

  .vp-media .img-frame { flex: none; min-height: 0; aspect-ratio: 4/5; }
}

@media (max-width: 640px) {

 .vp-row { grid-template-columns: 1fr; gap: 4px; } }