/* =============================================================================
   Fiche voyage : colonne de droite (programme, renseignements pratiques, guide)
   Classes .vp-*, utilisées par voyages-culturels/partials/.
   Les cartes gardent .voyage-txt1 .coul1 pour la largeur de colonne du site ;
   .vp-card ne fait que surcharger la mise en forme intérieure.
   L'encadré « tarif anticipé » n'est pas concerné.
   ============================================================================= */

:root{
	--af-turquoise-900:#1f5a61;
	--af-turquoise-700:#2f8d97;
	--af-turquoise-500:#52BECA;
	--af-turquoise-100:#e3f4f6;
	--af-white:#FFFFFF;
	--af-grey-50:#F8F8F8;
	--af-grey-100:#F1F2F2;
	--af-grey-300:#D8D9DA;
	--af-grey-500:#6D6E71;
	--af-grey-700:#58595B;
}

/* --- Carte -------------------------------------------------------------- */

.voyage-txt1.vp-card{
	background: var(--af-grey-50);
	padding: 20px; /* même marge que l'encadré tarif anticipé (.voyage-txt1) */
	text-align: left;
	font-family: 'Quicksand', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--af-grey-700);
}
.vp-card__title{
	margin: 0 0 24px 0;
	font-family: 'Quicksand', sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 2px;
	color: var(--af-turquoise-500);
}
.vp-card a{
	color: var(--af-turquoise-700);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.vp-card a:hover{
	color: var(--af-turquoise-900);
}
.vp-card img{
	margin-bottom: 0;
}
.vp-texte{
	margin: 0;
	font-size: 15px;
	line-height: 22px;
	color: var(--af-grey-500);
}

/* --- Programme -----------------------------------------------------------
   Format en base : <p><strong>Jour</strong><br>Texte…</p>
   Le <strong> d'ouverture devient le titre du jour.                        */

.vp-programme{
	border-bottom: 1px solid var(--af-grey-300);
}
.vp-programme > p{
	margin: 0;
	padding: 16px 0;
	border-top: 1px solid var(--af-grey-300);
	font-size: 16px;
	line-height: 1.5;
	color: var(--af-grey-500);
}
.vp-programme > p > strong:first-child{
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--af-turquoise-700);
}
.vp-programme > p > strong:first-child + br{
	display: none;
}

/* --- Renseignements pratiques -------------------------------------------- */

.vp-infos{
	border-bottom: 1px solid var(--af-grey-300);
}
.vp-ligne{
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 16px;
	padding: 14px 0;
	border-top: 1px solid var(--af-grey-300);
}
.vp-ligne__label{
	flex: 0 0 130px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1px;
	color: var(--af-turquoise-700);
}
.vp-ligne__valeur{
	flex: 1 1 240px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 17px;
	font-weight: 500;
}
.vp-prix{
	font-size: 30px;
	font-weight: 600;
	line-height: 1.1;
}
.vp-paire{
	display: flex;
	justify-content: space-between;
	gap: 12px;
}
.vp-paire strong{
	font-weight: 600;
	text-align: right;
}
.vp-lien{
	margin-top: 4px;
	font-size: 15px;
}
/* Logement : HTML libre en base (liens séparés par <br>).
   Chaque lien est affiché comme une étiquette. */
.vp-ligne__valeur.vp-logement{
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.vp-logement br{
	display: none;
}
.vp-card .vp-logement a{
	display: inline-flex;
	gap: 6px;
	padding: 8px 12px;
	background: var(--af-white);
	color: var(--af-grey-700);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}
.vp-card .vp-logement a::after{
	content: "\2197"; /* ↗ */
	color: var(--af-turquoise-700);
}
.vp-card .vp-logement a:hover{
	background: var(--af-turquoise-100);
	color: var(--af-turquoise-900);
}

/* --- Bouton d'inscription ------------------------------------------------ */

.vp-inscription{
	margin-top: 24px;
}
.vp-card input#sinscrire[type=submit]{
	margin: 0;
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
	letter-spacing: 1px;
	border-radius: 4px;
}

/* Mobile : même marge que le reste du site (style.css, max-width 480px) */
@media screen and (max-width: 480px){
	.voyage-txt1.vp-card{
		padding: 10px;
	}
}

/* --- Guide --------------------------------------------------------------- */

.voyage-txt1.vp-guide{
	display: flex;
	align-items: center;
	gap: 20px;
}
.vp-guide__photo{
	flex-shrink: 0;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	border: 4px solid var(--af-white);
	overflow: hidden;
	background: var(--af-grey-300);
}
.vp-guide__photo img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1);
}
.vp-guide__texte{
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.vp-guide__intro{
	font-size: 13px;
	font-weight: 500;
	color: var(--af-grey-500);
}
.vp-guide__nom{
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--af-turquoise-700);
}
.vp-guide__titre{
	font-size: 15px;
	font-weight: 500;
	font-style: italic;
	color: var(--af-grey-700);
}
.vp-guide__formation{
	font-size: 14px;
	color: var(--af-grey-500);
}