/* Affichage public des espaces disponibles.
   Le tableau reproduit la mise en forme des pages Elementor actuelles :
   bandeau bleu, colonnes centrées, lignes sans bordure.
   Les couleurs sont des variables : les modifier ici suffit. */

.gc-suites-table {
	--gc-head-bg: #023050;
	--gc-head-color: #ffffff;
	--gc-text: #6d7680;
	--gc-max-width: 1000px;

	width: 100%;
	max-width: var( --gc-max-width );
	margin: 0 auto 2em;
	color: var( --gc-text );
}

.gc-suites-row {
	display: grid;
	grid-template-columns: 1fr 1fr 2fr;
	align-items: center;
	text-align: center;
	gap: 12px;
	padding: 22px 0;
}

.gc-suites-row .gc-col {
	padding: 0 10px;
}

.gc-suites-row.gc-suites-head {
	background: var( --gc-head-bg );
	color: var( --gc-head-color );
	padding: 14px 0;
	font-weight: 600;
	font-size: 0.95em;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Liste compacte utilisée dans les cartes de la page générale. */
.gc-suites-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gc-suite-item {
	margin: 0 0 6px;
	line-height: 1.5;
}

.gc-suite-note {
	opacity: 0.7;
	font-style: italic;
}

.gc-suites-empty {
	opacity: 0.7;
	font-style: italic;
}

/* Sur mobile, chaque ligne devient une carte étiquetée.
   Un seul balisage sert aux deux affichages : plus besoin
   d'un second widget pour le téléphone. */
@media screen and (max-width: 767px) {
	.gc-suites-row.gc-suites-head {
		display: none;
	}

	.gc-suites-row {
		grid-template-columns: 1fr;
		gap: 4px;
		text-align: left;
		padding: 18px 0;
		border-bottom: 1px solid rgba( 2, 48, 80, 0.12 );
	}

	.gc-suites-row:last-child {
		border-bottom: none;
	}

	.gc-suites-row .gc-col {
		padding: 0;
	}

	.gc-suites-row .gc-col::before {
		content: attr( data-label ) " : ";
		font-weight: 700;
		font-size: 0.8em;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		opacity: 0.75;
	}

	.gc-suites-row .gc-col:empty {
		display: none;
	}
}