/**
 * Guide Vélo – Calculateur de taille de vélo enfant
 * Feuille de style du plugin.
 *
 * Le style s'appuie sur les variables CSS exposées par le thème Foxiz
 * (--g-color, --btn-primary, --round-7, --flex-gray-15, etc.) pour rester
 * cohérent avec le reste du site.
 * Toutes les classes sont préfixées `gv-tve-` ou `gv-tve__` pour éviter
 * les collisions avec l'existant.
 */

.gv-tve {
	--gv-tve-accent: var(--btn-primary, var(--g-color, #2d7a4b));
	--gv-tve-accent-hover: var(--dark-accent, #1f5a36);
	--gv-tve-text: var(--body-fcolor, #1a1a1a);
	--gv-tve-muted: var(--meta-fcolor, #6b6b6b);
	--gv-tve-border: var(--flex-gray-15, #e5e5e5);
	--gv-tve-bg-soft: var(--flex-gray-5, #f6f7f8);
	--gv-tve-radius: var(--round-7, 12px);
	--gv-tve-radius-sm: var(--round-3, 6px);

	max-width: 640px;
	margin: 1.5rem 0;
	padding: 1.75rem;
	border: 1px solid var(--gv-tve-border);
	border-radius: var(--gv-tve-radius);
	background-color: #fff;
	color: var(--gv-tve-text);
	box-sizing: border-box;
}

[data-theme='dark'] .gv-tve {
	background-color: var(--dark-content-bg, #1a1a1a);
	border-color: var(--dark-border-color, #2a2a2a);
	color: var(--dark-body-fcolor, #eaeaea);
}

.gv-tve *,
.gv-tve *::before,
.gv-tve *::after {
	box-sizing: inherit;
}

/* ---------- En-tête ---------- */
.gv-tve__header {
	margin-bottom: 1.25rem;
}

.gv-tve__title {
	margin: 0 0 .4rem;
	font-size: 1.35rem;
	line-height: 1.25;
	color: inherit;
}

.gv-tve__intro {
	margin: 0;
	font-size: .95rem;
	line-height: 1.5;
	color: var(--gv-tve-muted);
}

/* ---------- Formulaire ---------- */
.gv-tve__form {
	margin-bottom: 1rem;
}

.gv-tve__label {
	display: block;
	margin-bottom: .5rem;
	font-size: .9rem;
	font-weight: 600;
	color: inherit;
}

.gv-tve__field {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: .5rem;
	position: relative;
}

.gv-tve__input {
	flex: 1 1 140px;
	min-width: 0;
	padding: .85rem 2.5rem .85rem 1rem;
	font-size: 1rem;
	font-family: inherit;
	color: inherit;
	background-color: #fff;
	border: 1px solid var(--gv-tve-border);
	border-radius: var(--gv-tve-radius-sm);
	appearance: textfield;
	-moz-appearance: textfield;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.gv-tve__input::-webkit-outer-spin-button,
.gv-tve__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.gv-tve__input:focus {
	outline: none;
	border-color: var(--gv-tve-accent);
	box-shadow: 0 0 0 3px rgba(45, 122, 75, .15);
}

[data-theme='dark'] .gv-tve__input {
	background-color: rgba(255, 255, 255, .04);
	border-color: var(--dark-border-color, #333);
}

.gv-tve__unit {
	position: absolute;
	top: 50%;
	left: calc(1rem + 2.75ch);
	transform: translateY(-50%);
	pointer-events: none;
	font-size: .9rem;
	color: var(--gv-tve-muted);
}

/* Quand le champ est vide, on cache l'unité (sinon elle flotte seule). */
.gv-tve__input:placeholder-shown + .gv-tve__unit {
	opacity: 0;
}

.gv-tve__submit {
	flex: 0 0 auto;
	padding: .85rem 1.4rem;
	font-size: .95rem;
	font-weight: 600;
	font-family: inherit;
	color: var(--btn-accent, #fff);
	background-color: var(--gv-tve-accent);
	border: 1px solid var(--gv-tve-accent);
	border-radius: var(--gv-tve-radius-sm);
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, transform .05s ease;
}

.gv-tve__submit:hover,
.gv-tve__submit:focus-visible {
	background-color: var(--gv-tve-accent-hover);
	border-color: var(--gv-tve-accent-hover);
	outline: none;
}

.gv-tve__submit:active {
	transform: translateY(1px);
}

.gv-tve__error {
	margin: .75rem 0 0;
	padding: .6rem .85rem;
	font-size: .9rem;
	color: #9a1f1f;
	background-color: #fdecec;
	border-radius: var(--gv-tve-radius-sm);
}

[data-theme='dark'] .gv-tve__error {
	color: #ffb4b4;
	background-color: rgba(154, 31, 31, .2);
}

/* ---------- Résultat ---------- */
.gv-tve__result {
	margin-top: 1.25rem;
	padding: 1.25rem;
	background-color: var(--gv-tve-bg-soft);
	border-radius: var(--gv-tve-radius);
	border-left: 4px solid var(--gv-tve-accent);
	animation: gvTveFadeIn .25s ease;
}

[data-theme='dark'] .gv-tve__result {
	background-color: rgba(255, 255, 255, .04);
}

.gv-tve__result-main {
	display: flex;
	align-items: baseline;
	gap: .6rem;
	flex-wrap: wrap;
	margin-bottom: .75rem;
}

.gv-tve__result-label {
	font-size: .85rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--gv-tve-muted);
}

.gv-tve__result-size {
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--gv-tve-accent);
}

.gv-tve__result-alt,
.gv-tve__result-range,
.gv-tve__result-notice,
.gv-tve__result-safety {
	margin: .45rem 0;
	font-size: .95rem;
	line-height: 1.5;
}

.gv-tve__result-notice {
	margin-top: .85rem;
	padding: .6rem .85rem;
	background-color: rgba(255, 255, 255, .6);
	border-radius: var(--gv-tve-radius-sm);
	font-size: .9rem;
}

[data-theme='dark'] .gv-tve__result-notice {
	background-color: rgba(0, 0, 0, .25);
}

.gv-tve__result-safety {
	display: flex;
	gap: .5rem;
	align-items: flex-start;
	padding-top: .85rem;
	margin-top: .85rem;
	border-top: 1px dashed var(--gv-tve-border);
	font-size: .9rem;
	color: var(--gv-tve-muted);
}

.gv-tve__result-safety::before {
	content: "⚠";
	flex-shrink: 0;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--gv-tve-accent);
}

.gv-tve__result-adult-list {
	margin: .6rem 0 0;
	padding-left: 1.2rem;
	font-size: .9rem;
	line-height: 1.6;
}

.gv-tve__result-adult-list li {
	margin-bottom: .15rem;
}

/* ---------- Pied ---------- */
.gv-tve__footnote {
	margin: 1rem 0 0;
	font-size: .85rem;
	font-style: italic;
	line-height: 1.5;
	color: var(--gv-tve-muted);
}

/* ---------- Animations ---------- */
@keyframes gvTveFadeIn {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Responsive ---------- */
@media (max-width: 520px) {
	.gv-tve {
		padding: 1.25rem;
	}

	.gv-tve__title {
		font-size: 1.2rem;
	}

	.gv-tve__field {
		flex-direction: column;
	}

	.gv-tve__unit {
		left: auto;
		right: 1rem;
		top: 1.35rem;
		transform: none;
	}

	.gv-tve__submit {
		width: 100%;
	}

	.gv-tve__result-size {
		font-size: 1.6rem;
	}
}