/**
 * Bloc : Localisation (ri-localisation)
 * Navigation par onglets entre une ou plusieurs localisations.
 */

.ri-localisation {
	width: 100%;
	padding-block: var(--ri-block-padding-xl);
}

/* Fond par défaut — surchargeable par le sélecteur de couleur Gutenberg
   (style inline) ou une couleur de palette (.has-background). */
.ri-localisation:not(.has-background):not([style*="background"]) {
	background-color: var(--ri-color-grey-mid);
}

.ri-localisation .titre {
	margin: 0 0 var(--ri-space-lg);
	font: 700 var(--ri-size-title-h2) / 1.4 var(--ri-font-1);
	color: var(--ri-color-teal);
}

/* ========================================
   Onglets — navigation
   ======================================== */

.ri-localisation .onglets {
	display: flex;
	flex-wrap: wrap;
}

.ri-localisation .onglet {
	display: inline-flex;
	align-items: center;
	padding: 8px 32px;
	background-color: var(--ri-color-grey-soft);
	border: 1px solid var(--ri-color-grey-light);
	cursor: pointer;
	transition: background-color var(--ri-transition-base), color var(--ri-transition-base);
}

.ri-localisation .onglet-nom {
	font: 500 var(--ri-size-text-body-xxl) / 24px var(--ri-font-1);
	color: var(--ri-color-grey);
}

/* Onglet actif + onglet unique statique */
.ri-localisation .onglet.is-active,
.ri-localisation .onglet--statique {
	background-color: var(--ri-color-grey-mid);
	border-color: transparent;
	cursor: default;
}

.ri-localisation .onglet--statique {
	background-color: var(--ri-color-grey-soft);
}

.ri-localisation .onglet--statique .onglet-nom,
.ri-localisation .onglet.is-active .onglet-nom {
	font-weight: 700;
	color: var(--ri-color-teal);
}

.ri-localisation .onglet:focus-visible {
	outline: 2px solid var(--ri-color-teal);
	outline-offset: -2px;
}

/* ========================================
   Carte wrapper — 2 colonnes
   ======================================== */

.ri-localisation .carte-wrapper {
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	align-items: stretch;
}

/* Bascule des panneaux (mode onglets) */
.ri-localisation.has-onglets .carte-wrapper {
	display: none;
}

.ri-localisation.has-onglets .carte-wrapper.is-active {
	display: grid;
}

/* ========================================
   Colonne image
   ======================================== */

.ri-localisation .carte-image {
	padding: var(--ri-space-md);
	background-color: var(--ri-color-grey-soft);
	overflow: hidden;
}

.ri-localisation .carte-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ri-localisation .carte-img-placeholder {
	width: 100%;
	height: 376px;
	background-color: var(--ri-color-grey-mid);
}

/* ========================================
   Colonne infos
   ======================================== */

.ri-localisation .carte-infos {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--ri-space-xl);
	padding-block: var(--ri-space-lg);
	padding-inline: 40px;
	background-color: var(--ri-color-grey-soft);
}

.ri-localisation .infos-content {
	display: flex;
	flex-direction: column;
	gap: var(--ri-space-md);
}

.ri-localisation .description {
	margin: 0;
	font: 400 var(--ri-size-text-body) / 1.7 var(--ri-font-1);
}

.ri-localisation .adresse {
	margin: 0;
	font: 700 var(--ri-size-title-h2) / 1.4 var(--ri-font-1);
	font-style: normal;
}

/* ========================================
   Liens
   ======================================== */

.ri-localisation .liens {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ri-space-md);
}

.ri-localisation .lien-action .ri-link-cta {
	text-decoration-skip-ink: auto;
	text-decoration-thickness: auto;
	text-underline-offset: auto;
	text-underline-position: from-font;
	text-decoration-color: var(--ri-color-teal);
}

/* ========================================
   Placeholder éditeur
   ======================================== */

.ri-localisation.is-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 200px;
	padding: var(--ri-space-lg);
	background-color: var(--ri-color-grey-soft);
	border: 2px dashed var(--ri-color-grey);
	text-align: center;
}

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 782px) {

	.ri-localisation .onglets {
		flex-wrap: nowrap;
		overflow-x: auto;
	}

	.ri-localisation .onglet {
		flex: 0 0 auto;
		padding-inline: 16px;
	}

	.ri-localisation .carte-wrapper {
		grid-template-columns: 1fr;
	}

	.ri-localisation .carte-img-placeholder {
		height: 220px;
	}

	/* Vertical déjà géré par --ri-space-lg ; seul l'inline diffère. */
	.ri-localisation .carte-infos {
		padding-inline: var(--ri-container-padding);
	}
}