/**
 * Page "Contact" — intégration fidèle de la référence Claude Design
 * (claude-design-reference/contact/TNT Plus France - Contact.dc.html).
 * Réutilise variables.css/base.css/components.css (tp-container, tp-h2,
 * tp-btn, tp-eyebrow-pill, tp-pulse-dot, tp-reveal, tp-link-arrow…) ainsi
 * que les composants de formulaire de resiliation.css (tp-res-kicker,
 * tp-res-field, tp-res-row, tp-res-submit, tp-res-confirm__icon, tp-res-help…)
 * — chargé comme dépendance partagée, à l'image de front-page.css déjà
 * partagé entre plusieurs pages. Uniquement les styles propres à cette
 * page ci-dessous.
 */

/* ================= HERO ================= */
.tp-contact-hero { position: relative; z-index: 1; padding: clamp(32px, 3.6vw, 54px) 0 clamp(22px, 2.6vw, 32px); overflow: hidden; }
.tp-contact-hero__glow {
	position: absolute; left: 14%; top: -40px; width: min(600px, 90vw); height: 260px; pointer-events: none;
	background: radial-gradient(closest-side, rgba(15, 122, 61, .24), transparent 72%); filter: blur(34px);
}
.tp-contact-hero__inner { position: relative; }
.tp-contact-hero__title { font-size: clamp(30px, 4.2vw, 54px); line-height: 1.05; letter-spacing: -.032em; margin: 0 0 16px; max-width: 720px; text-wrap: pretty; }
.tp-contact-hero__lead { font-size: 16.5px; line-height: 1.66; color: var(--tp-text-muted); margin: 0; max-width: 600px; text-wrap: pretty; }

/* ================= FORMULAIRE + AIDE ================= */
.tp-contact-main { position: relative; z-index: 1; padding: 0 0 clamp(50px, 6vw, 90px); }
.tp-contact-main__inner { display: flex; flex-wrap: wrap; flex-direction: row-reverse; gap: clamp(24px, 3vw, 48px); align-items: flex-start; }

.tp-contact-card { flex: 1 1 460px; min-width: 0; }
.tp-contact-card .tp-res-kicker { margin-bottom: 12px; }
.tp-contact-card .tp-res-card__title { margin-bottom: 26px; }

.tp-contact-res-notice {
	display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 16px 18px; margin: -4px 0 4px; border-radius: 12px;
	border: 1px solid rgba(31, 140, 74, .4); background: rgba(15, 122, 61, .12);
}
.tp-contact-res-notice[hidden] { display: none; }
.tp-contact-res-notice__text { font-size: 14px; line-height: 1.6; color: #d7e3da; flex: 1 1 240px; }

.tp-contact-consent { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.tp-contact-consent__input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--tp-green-700); flex: none; }
.tp-contact-consent__text { font-size: 13px; line-height: 1.6; color: #8b928c; }
.tp-contact-consent.has-error .tp-contact-consent__input { outline: 2px solid #e2725a; outline-offset: 2px; }

.tp-contact-honeypot { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.tp-contact-confirm { animation: tpResStep .6s cubic-bezier(.2, .7, .2, 1) both; padding: clamp(6px, 1vw, 14px) 0; }
.tp-contact-confirm__text { font-size: 15.5px; line-height: 1.65; color: var(--tp-text-soft); margin: 0 0 20px; text-wrap: pretty; }
.tp-contact-confirm__reset { font-size: 13.5px; color: #8b928c; }

.tp-contact-help { flex: 1 1 300px; max-width: 400px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tp-contact-help .tp-res-kicker { margin-bottom: 16px; }
.tp-contact-help__item {
	display: block; padding: 20px 0; border-top: 1px solid var(--tp-border-soft); color: var(--tp-white);
	transition: border-color .35s ease;
}
.tp-contact-help__item--last { border-bottom: 1px solid var(--tp-border-soft); }
.tp-contact-help__item:hover { border-top-color: rgba(31, 140, 74, .5); color: var(--tp-white); }
.tp-contact-help__item--last:hover { border-bottom-color: rgba(31, 140, 74, .5); }
.tp-contact-help__title { display: block; font-family: var(--font-display); font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.tp-contact-help__text { display: block; font-size: 14px; line-height: 1.62; color: #8b928c; margin-bottom: 12px; }

/* ================= NOUS CONTACTER ================= */
.tp-contact-coords-section { position: relative; z-index: 1; padding: clamp(20px, 2.4vw, 36px) 0 clamp(44px, 5vw, 74px); }
.tp-contact-coords { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: clamp(22px, 2.6vw, 40px); }
.tp-contact-coords__label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .2em; color: var(--tp-text-mute3); margin-bottom: 10px; }
.tp-contact-coords__value { font-size: 15px; line-height: 1.6; color: var(--tp-text-soft); }
.tp-contact-coords__note { margin-top: 26px; font-size: 12.5px; color: var(--tp-text-mute4); }

/* ================= RÉSILIATION (bannière) ================= */
.tp-contact-cta-section { position: relative; z-index: 1; padding: clamp(44px, 5vw, 80px) 0; }
.tp-contact-cta__text { flex: 1 1 320px; min-width: 0; }
.tp-contact-cta__title { margin: 0 0 10px; line-height: 1.15; }
.tp-contact-cta__lead { font-size: 15px; line-height: 1.65; color: var(--tp-text-muted); margin: 0; max-width: 520px; text-wrap: pretty; }

@media (prefers-reduced-motion: reduce) {
	.tp-contact-confirm { animation: none !important; }
}