/**
 * Page "Suggestions" — intégration fidèle de la référence Claude Design
 * (claude-design-reference/suggestion/TNT Plus France - Suggestions.dc.html).
 * Réutilise variables.css/base.css/components.css (tp-container, tp-h2,
 * tp-btn, tp-eyebrow-pill, tp-pulse-dot, tp-reveal…) ainsi que les
 * composants de formulaire de resiliation.css (tp-res-*) — uniquement les
 * styles propres à cette page ci-dessous.
 */

/* ================= HERO (texte + visuel catalogue) ================= */
.tp-sugg-hero { position: relative; z-index: 1; padding: clamp(32px, 3.6vw, 56px) 0 clamp(24px, 3vw, 40px); overflow: hidden; }
.tp-sugg-hero__glow {
	position: absolute; left: 10%; top: -40px; width: min(620px, 90vw); height: 280px; pointer-events: none;
	background: radial-gradient(closest-side, rgba(15, 122, 61, .22), transparent 72%); filter: blur(34px);
}
.tp-sugg-hero__inner {
	position: relative;
	display: flex; flex-wrap: wrap; align-items: center;
	gap: clamp(28px, 4vw, 64px);
}
.tp-sugg-hero__text { flex: 1 1 440px; min-width: 0; }
.tp-sugg-hero__title { font-size: clamp(30px, 4.2vw, 54px); line-height: 1.05; letter-spacing: -.032em; margin: 0 0 16px; max-width: 640px; text-wrap: pretty; }
.tp-sugg-hero__lead { font-size: 16.5px; line-height: 1.66; color: var(--tp-text-muted); margin: 0 0 10px; max-width: 560px; text-wrap: pretty; }
.tp-sugg-hero__sublead { font-size: 14.5px; line-height: 1.64; color: var(--tp-text-mute3); margin: 0 0 26px; max-width: 520px; text-wrap: pretty; }
.tp-sugg-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

.tp-sugg-visual { flex: 1 1 380px; min-width: 0; max-width: 520px; }
.tp-sugg-visual__card {
	position: relative; padding: clamp(16px, 2vw, 24px); border-radius: 20px; border: 1px solid var(--tp-border);
	background: linear-gradient(170deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01));
	box-shadow: 0 40px 90px rgba(0, 0, 0, .5);
}
.tp-sugg-visual__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.tp-sugg-visual__dots { display: flex; gap: 5px; }
.tp-sugg-visual__dots span { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.tp-sugg-visual__dots span.is-live { background: var(--tp-green-500); }

.tp-sugg-visual__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(9px, 1.2vw, 13px); }
.tp-sugg-visual__tile {
	position: relative; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	border: 1px solid var(--tp-border-2);
	background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
	animation: tpSuggDrift 9s ease-in-out infinite;
	animation-delay: calc(var(--tp-tile-i, 0) * .4s);
	transition: border-color .25s ease, box-shadow .25s ease;
}
.tp-sugg-visual__tile:nth-child(odd) { animation-name: tpSuggDrift2; }
.tp-sugg-visual__tile:hover { border-color: rgba(31, 140, 74, .5); box-shadow: 0 0 26px rgba(15, 122, 61, .22); }

.tp-sugg-visual__logo-wrap {
	flex: 1; width: 100%; display: grid; place-items: center;
	padding: clamp(10px, 1.6vw, 16px) clamp(8px, 1.4vw, 14px) 4px;
}
.tp-sugg-visual__logo { max-width: 100%; max-height: 100%; object-fit: contain; }
.tp-sugg-visual__name {
	width: 100%; padding: 0 6px 9px; font-size: 9.5px; letter-spacing: .04em; text-align: center;
	color: var(--tp-text-mute2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.tp-sugg-visual__note {
	margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
	font-size: 12.5px; color: var(--tp-text-mute2);
}

@keyframes tpSuggDrift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes tpSuggDrift2 { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(3px); } }

/* ================= Champ conditionnel "Autre" ================= */
[data-suggestions-other-wrap] { animation: tpSuggExpand .45s cubic-bezier(.2, .7, .2, 1) both; overflow: hidden; }
[data-suggestions-other-wrap][hidden] { display: none; animation: none; }
@keyframes tpSuggExpand { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ================= Bandeau "chaîne déjà disponible" ================= */
/* .tp-res-notice force display:flex ; sans ce correctif, [hidden] serait
   silencieusement ignoré (même piège que .tp-contact-res-notice). */
[data-suggestions-match][hidden] { display: none; }

/* ================= Consentement + piège à robots ================= */
.tp-sugg-consent { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.tp-sugg-consent__input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--tp-green-700); flex: none; }
.tp-sugg-consent__text { font-size: 13px; line-height: 1.6; color: #8b928c; }
.tp-sugg-consent.has-error .tp-sugg-consent__input { outline: 2px solid #e2725a; outline-offset: 2px; }
.tp-sugg-honeypot { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ================= Confirmation ================= */
.tp-sugg-confirm__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }

@media (max-width: 640px) {
	.tp-sugg-hero__actions,
	.tp-sugg-confirm__actions { flex-direction: column; align-items: stretch; }
	.tp-sugg-hero__actions .tp-btn,
	.tp-sugg-confirm__actions .tp-btn { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.tp-sugg-visual__tile,
	[data-suggestions-other-wrap] {
		animation: none !important;
	}
}