/**
 * Page tampon (maintenance.php).
 *
 * Une carte centrée sur le fond du site. Tout vient des jetons, et la seule
 * animation est une entrée en fondu, coupée par prefers-reduced-motion.
 */

.is-tampon {
	min-height: 100vh;
	min-height: 100dvh;
	display: grid;
	place-items: center;
	padding: var(--space-lg) var(--space-sm);
	background:
		radial-gradient(ellipse at top, var(--color-bg-alt), transparent 60%),
		var(--color-bg-site);
}

.tampon {
	width: min(100%, 44rem);
	display: grid;
	gap: var(--space-md);
	animation: tampon-in 0.6s ease-out both;
}

.tampon__card {
	position: relative;
	overflow: hidden;
	padding: clamp(var(--space-lg), 3vw + 1rem, var(--space-2xl));
	background: var(--color-bg);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	text-align: center;
}

/* Liseré vert en tête de carte : la signature de la marque, sans image. */
.tampon__card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 6px;
	background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}

.tampon__logo img {
	width: clamp(9rem, 30vw, 13rem);
	height: auto;
	margin-inline: auto;
}

.tampon__brand {
	font-family: var(--font-headings);
	font-weight: var(--weight-heading);
	font-size: var(--size-h2);
}

.tampon__eyebrow {
	margin-top: var(--space-lg);
	font-size: var(--size-meta);
	font-weight: var(--weight-lead);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.tampon__title {
	margin-top: var(--space-2xs);
	font-size: var(--size-h2);
	line-height: var(--leading-h2);
}

.tampon__text {
	max-width: 36rem;
	margin-top: var(--space-sm);
	margin-inline: auto;
	color: var(--color-muted);
}

.tampon__text.lead { color: var(--color-fg); }

/* ── Coordonnées ──────────────────────────────────────────────────────── */

.tampon__contact {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: var(--space-sm) var(--space-lg);
	margin-top: var(--space-lg);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--color-border);
	font-style: normal;
	text-align: left;
}

.tampon__line {
	display: block;
	color: var(--color-fg);
	line-height: var(--leading-tight);
}

a.tampon__line { transition: color var(--transition); }

a.tampon__line:hover,
a.tampon__line:focus-visible { color: var(--color-primary); }

.tampon__label {
	display: block;
	margin-bottom: var(--space-3xs);
	font-size: var(--size-meta);
	font-weight: var(--weight-lead);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-muted);
}

/* ── Actions ──────────────────────────────────────────────────────────── */

.tampon__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-xs);
	margin-top: var(--space-lg);
}

.tampon__footer {
	text-align: center;
	color: var(--color-muted);
}

@keyframes tampon-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tampon { animation: none; }
}