/* Togo Region Widget — styles front-end */

.trw-widget {
	--trw-accent: #A9762B;
	position: relative;
}

.trw-stage {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 4px;
	cursor: pointer;
}

.trw-svg {
	width: 100%;
	height: 100%;
	display: block;
}

.trw-shape {
	fill: var(--trw-accent);
	fill-opacity: 0.68;
	stroke: rgba(0, 0, 0, 0.55);
	stroke-width: 2.4;
	transition: fill-opacity 0.25s ease, filter 0.25s ease, transform 0.35s ease;
	transform-origin: center;
}

.trw-stage:hover .trw-shape,
.trw-stage:focus-within .trw-shape {
	fill-opacity: 1;
	filter: drop-shadow(0 0 14px rgba(0, 0, 0, 0.35));
	transform: scale(1.03);
}

.trw-name-plate {
	position: absolute;
	left: 14px;
	bottom: 14px;
	font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	letter-spacing: 0.03em;
	color: #fff;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
	z-index: 2;
	transition: opacity 0.2s ease;
	pointer-events: none;
}

.trw-stage:hover .trw-name-plate {
	opacity: 0;
}

/* Card qui glisse depuis le bas au survol, recouvre partiellement la forme */
.trw-info-card {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 62%;
	background-color: #F6EFE1;
	color: #17110A;
	border-top: 4px solid var(--trw-accent);
	border-radius: 0 0 4px 4px;
	padding: 16px 18px 14px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	transform: translateY(100%);
	opacity: 0;
	transition: transform 0.3s ease, opacity 0.3s ease;
	z-index: 3;
}

.trw-stage:hover .trw-info-card,
.trw-stage:focus-within .trw-info-card {
	transform: translateY(0);
	opacity: 1;
}

.trw-info-image {
	max-width: 100%;
	max-height: 70px;
	object-fit: cover;
	border-radius: 3px;
	margin-bottom: 8px;
	align-self: flex-start;
}

.trw-num {
	font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--trw-accent);
	font-weight: 600;
}

.trw-info-card h3 {
	font-size: 20px;
	margin: 4px 0 10px;
	font-weight: 400;
	line-height: 1.2;
}

.trw-fields {
	font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
	font-size: 12.5px;
	line-height: 1.6;
	overflow-y: auto;
}

.trw-field-row {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	padding: 5px 0;
}

.trw-field-row:first-child {
	border-top: none;
}

.trw-field-row b {
	text-align: right;
	font-weight: 600;
}

/* Accessibilité : rend la card révélable au clavier (focus sur le widget) */
.trw-stage {
	outline-offset: 4px;
}