/**
 * Parcours — visionneuse trou par trou et carte de score.
 *
 * La photo occupe l'espace, les chiffres sont dans un panneau à côté : c'est la
 * disposition de l'ancien site, celle qui donne à voir le trou avant de le
 * décrire.
 *
 * Tous les trous sont dans la page. Sans JavaScript, ils se lisent les uns
 * après les autres ; avec, seul le trou actif reste visible. La règle qui les
 * replie est donc portée par `.is-enhanced`, posée par le script — jamais par
 * défaut, sinon une page sans JS n'afficherait qu'un trou sur dix-huit.
 */

/* ─── Onglets des trous ──────────────────────────────────────────────────── */

.vc-hole-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: 1rem;
}

.vc-hole-tab {
	background: #fff;
	border: 1px solid rgba( 0, 0, 0, .1 );
	border-radius: 8px;
	color: inherit;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	line-height: 1.1;
	min-width: 46px;
	padding: .4rem .3rem;
	transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

.vc-hole-tab-number {
	font-size: 1rem;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

/* Le par sous le numéro : on choisit un trou en sachant ce qui l'attend. */
.vc-hole-tab-par {
	font-size: .62rem;
	letter-spacing: .04em;
	opacity: .6;
	text-transform: uppercase;
	white-space: nowrap;
}

.vc-hole-tab:hover {
	border-color: var( --vc-color-primary, #2d5a27 );
	transform: translateY( -1px );
}

.vc-hole-tab.is-active {
	background: var( --vc-color-primary, #2d5a27 );
	border-color: var( --vc-color-primary, #2d5a27 );
	color: #fff;
}

/* Sans script, les onglets ne mènent nulle part : on les retire. */
.vc-course-viewer:not( .is-enhanced ) .vc-hole-tabs {
	display: none;
}

/* ─── Un trou ────────────────────────────────────────────────────────────── */

.vc-hole-view {
	background: #fff;
	border-radius: 10px;
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) 300px;
	margin-bottom: 2rem;
	overflow: hidden;
}

.vc-course-viewer.is-enhanced .vc-hole-view {
	display: none;
	margin-bottom: 0;
}

.vc-course-viewer.is-enhanced .vc-hole-view.is-active {
	display: grid;
}

/* ─── La photo ───────────────────────────────────────────────────────────── */

.vc-hole-stage {
	background: #1d2327;
	min-height: 420px;
	position: relative;
}

.vc-hole-photo {
	height: 100%;
	inset: 0;
	object-fit: cover;
	opacity: 0;
	position: absolute;
	transition: opacity .35s ease;
	width: 100%;
}

.vc-hole-photo.is-active {
	opacity: 1;
}

.vc-hole-nophoto {
	background: repeating-linear-gradient( 45deg, #263029, #263029 12px, #2c372f 12px, #2c372f 24px );
	inset: 0;
	position: absolute;
}

/* Un voile en bas : un titre blanc sur un ciel clair devient illisible. */
.vc-hole-stage::after {
	background: linear-gradient( to top, rgba( 0, 0, 0, .6 ), transparent 55% );
	content: '';
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.vc-hole-heading {
	bottom: 1.5rem;
	color: #fff;
	left: 0;
	position: absolute;
	right: 0;
	text-align: center;
	text-shadow: 0 1px 12px rgba( 0, 0, 0, .5 );
	z-index: 1;
}

.vc-hole-heading span {
	display: block;
	font-size: .8rem;
	letter-spacing: .12em;
	opacity: .9;
	text-transform: uppercase;
}

.vc-hole-heading strong {
	display: block;
	font-size: 1.7rem;
}

/* ─── Trou précédent / suivant ───────────────────────────────────────────── */

.vc-hole-step {
	background: rgba( 255, 255, 255, .14 );
	border: 1px solid rgba( 255, 255, 255, .5 );
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	font-size: 1.6rem;
	height: 46px;
	line-height: 1;
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	transition: background .15s ease;
	width: 46px;
	z-index: 2;
}

.vc-hole-step:hover {
	background: rgba( 255, 255, 255, .3 );
}

.vc-hole-step--prev { left: 1rem; }
.vc-hole-step--next { right: 1rem; }

/* Sans script, ces boutons ne feraient rien. */
.vc-course-viewer:not( .is-enhanced ) .vc-hole-step {
	display: none;
}

/* ─── Le panneau ─────────────────────────────────────────────────────────── */

.vc-hole-side {
	border-left: 1px solid rgba( 0, 0, 0, .08 );
	padding: 1.5rem;
}

.vc-hole-number {
	font-size: 1.15rem;
	margin: 0 0 1rem;
	text-transform: uppercase;
}

/* Trois vignettes de front : par, longueur, index. Un tableau à deux colonnes
   se lisait ligne par ligne ; là, la fiche du trou se saisit d'un coup d'œil. */
.vc-hole-figures {
	display: grid;
	gap: .5rem;
	grid-template-columns: repeat( 3, 1fr );
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}

.vc-hole-figure {
	align-items: center;
	background: #f5f7f3;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: .7rem .3rem;
	text-align: center;
}

.vc-hole-icon {
	color: var( --vc-color-primary, #2d5a27 );
	height: 20px;
	width: 20px;
}

.vc-hole-figure-label {
	color: #5b6156;
	font-size: .68rem;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.vc-hole-figure-value {
	font-size: 1.1rem;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

.vc-hole-thumbs {
	margin-bottom: 1.25rem;
}

.vc-hole-thumbs-label {
	align-items: center;
	color: #5b6156;
	display: flex;
	font-size: .72rem;
	gap: .4rem;
	letter-spacing: .08em;
	margin-bottom: .5rem;
	text-transform: uppercase;
}

.vc-hole-thumbs-label .vc-hole-icon {
	height: 16px;
	width: 16px;
}

.vc-hole-thumbs-row {
	display: flex;
	gap: 6px;
}

.vc-hole-thumb {
	background: #fff;
	border: 1px solid rgba( 0, 0, 0, .2 );
	border-radius: 50%;
	cursor: pointer;
	font-variant-numeric: tabular-nums;
	height: 34px;
	transition: transform .15s ease;
	width: 34px;
}

.vc-hole-thumb:hover {
	transform: scale( 1.08 );
}

.vc-hole-thumb.is-active {
	background: var( --vc-color-primary, #2d5a27 );
	border-color: var( --vc-color-primary, #2d5a27 );
	color: #fff;
}

.vc-hole-media {
	align-items: center;
	background: var( --vc-color-primary, #2d5a27 );
	border: 1px solid var( --vc-color-primary, #2d5a27 );
	border-radius: 8px;
	color: #fff;
	cursor: pointer;
	display: flex;
	font-size: .78rem;
	gap: .5rem;
	justify-content: center;
	letter-spacing: .06em;
	margin-bottom: .5rem;
	padding: .65rem 1rem;
	text-transform: uppercase;
	transition: filter .15s ease;
	width: 100%;
}

.vc-hole-media .vc-hole-icon {
	color: currentColor;
	height: 18px;
	width: 18px;
}

.vc-hole-media:hover {
	filter: brightness( 1.12 );
}

/* Le survol 3D est un complément, pas l'action principale : il s'efface un peu
   derrière la vidéo pour que le choix soit évident. */
.vc-hole-media--ghost {
	background: none;
	color: var( --vc-color-primary, #2d5a27 );
}

.vc-hole-media--ghost:hover {
	background: var( --vc-color-primary, #2d5a27 );
	color: #fff;
	filter: none;
}

.vc-hole-advice {
	color: #5b6156;
	font-size: .9rem;
	margin-top: 1rem;
}

/* ─── Lecteur vidéo / survol 3D ──────────────────────────────────────────── */

.vc-embed-overlay {
	align-items: center;
	background: rgba( 0, 0, 0, .85 );
	display: flex;
	inset: 0;
	justify-content: center;
	padding: 1.5rem;
	position: fixed;
	z-index: 9999;
}

.vc-embed-frame {
	aspect-ratio: 16 / 9;
	background: #000;
	border: 0;
	max-height: 90vh;
	max-width: 1100px;
	width: 100%;
}

.vc-embed-close {
	background: none;
	border: 1px solid rgba( 255, 255, 255, .6 );
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	font-size: 1.4rem;
	height: 42px;
	position: absolute;
	right: 1.5rem;
	top: 1.5rem;
	width: 42px;
}

/* ─── Carte de score ─────────────────────────────────────────────────────── */

.vc-scorecard table {
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
	width: 100%;
}

.vc-scorecard caption {
	font-weight: 600;
	padding-bottom: .75rem;
	text-align: left;
}

.vc-scorecard th,
.vc-scorecard td {
	border: 1px solid rgba( 0, 0, 0, .1 );
	padding: .45rem .6rem;
	text-align: center;
}

.vc-scorecard thead th {
	background: #f3f5f2;
}

.vc-scorecard .vc-scorecard-total {
	background: #f8f9f7;
	font-weight: 600;
}

/* Les départs gardent la couleur qui les nomme : sur une carte de score, on
   cherche « le jaune », pas « la troisième colonne ».
   L'en-tête prend la couleur pleine du départ, les distances une teinte
   claire de la même couleur : la colonne se suit d'un coup d'œil. */
.vc-scorecard thead th.vc-tee--champ  { background: #1f1f1f; color: #fff; }
.vc-scorecard thead th.vc-tee--white  { background: #fff; box-shadow: inset 0 -3px 0 #b9bcb6; }
.vc-scorecard thead th.vc-tee--yellow { background: #f2c744; color: #1f1f1f; }
.vc-scorecard thead th.vc-tee--blue   { background: #3d7dd8; color: #fff; }
.vc-scorecard thead th.vc-tee--red    { background: #d0483c; color: #fff; }

.vc-scorecard td.vc-tee--champ  { background: rgba( 31, 31, 31, .08 ); }
.vc-scorecard td.vc-tee--white  { background: #fff; }
.vc-scorecard td.vc-tee--yellow { background: rgba( 242, 199, 68, .22 ); }
.vc-scorecard td.vc-tee--blue   { background: rgba( 61, 125, 216, .14 ); }
.vc-scorecard td.vc-tee--red    { background: rgba( 208, 72, 60, .13 ); }

.vc-scorecard .vc-scorecard-total td.vc-tee--champ  { background: rgba( 31, 31, 31, .16 ); }
.vc-scorecard .vc-scorecard-total td.vc-tee--yellow { background: rgba( 242, 199, 68, .4 ); }
.vc-scorecard .vc-scorecard-total td.vc-tee--blue   { background: rgba( 61, 125, 216, .26 ); }
.vc-scorecard .vc-scorecard-total td.vc-tee--red    { background: rgba( 208, 72, 60, .24 ); }

/* « Championship » s'affiche abrégé : la colonne n'est pas plus large que
   les autres départs. */
.vc-scorecard th abbr {
	cursor: help;
	text-decoration: none;
}

/* ─── Écrans étroits ─────────────────────────────────────────────────────── */

@media ( max-width: 860px ) {
	.vc-hole-view,
	.vc-course-viewer.is-enhanced .vc-hole-view.is-active {
		grid-template-columns: 1fr;
	}

	.vc-hole-stage {
		min-height: 260px;
	}

	.vc-hole-tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 4px;
		scroll-snap-type: x proximity;
	}

	.vc-hole-tab {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}

	.vc-hole-side {
		border-left: 0;
		border-top: 1px solid rgba( 0, 0, 0, .08 );
	}

	/* Une carte de score ne se réduit pas : elle défile dans son cadre plutôt
	   que de faire déborder toute la page. */
	.vc-scorecard {
		overflow-x: auto;
	}
}

/* ─── Plan et record du parcours (en tête de la visionneuse) ───────────────── */

.vc-course-overview {
	display: grid;
	grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
	gap: 1.25rem;
	align-items: start;
	margin-bottom: 1.5rem;
}

.vc-course-overview:not(:has(.vc-course-record)) {
	grid-template-columns: minmax(0, 1fr);
}

.vc-course-record {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 1.1rem 1.2rem;
	border-radius: 12px;
	background: var( --vc-color-primary, #0a4240 );
	color: #fff;
}

.vc-course-record-label {
	font-size: .75rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	opacity: .8;
}

.vc-course-record-score {
	font-size: 2.4rem;
	line-height: 1.05;
}

.vc-course-record-holder {
	font-size: .9rem;
	opacity: .9;
}

.vc-course-map {
	margin: 0;
}

.vc-course-map img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid rgba( 0, 0, 0, .08 );
	border-radius: 12px;
}

.vc-course-map figcaption {
	margin-top: 6px;
	color: #5b6156;
	font-size: .85rem;
}

@media (max-width: 700px) {
	.vc-course-overview {
		grid-template-columns: minmax(0, 1fr);
	}
}