/* ==========================================================================
   TROUVETOUT — PAGE CONTACT
   Design : Leboncoin × Airbnb — fond blanc, accents orange brand.
   Chargé uniquement sur page-contact.php.
   ========================================================================== */


/* ==========================================================================
   1. HERO
   ========================================================================== */

.tt-contact-hero {
	padding-block:  var(--space-14) var(--space-8);
	text-align:     center;
	background:     linear-gradient( 180deg, var(--color-brand-subtle) 0%, var(--color-bg) 100% );
}

.tt-contact-hero__title {
	font-family:    var(--font-display);
	font-size:      var(--text-4xl);
	font-weight:    var(--font-extrabold);
	color:          var(--color-text);
	letter-spacing: var(--tracking-tight);
	text-wrap:      balance;
	margin-block:   var(--space-3) var(--space-4);
}

@media (min-width: 768px) {
	.tt-contact-hero__title { font-size: var(--text-5xl); }
}

.tt-contact-hero__subtitle {
	font-size:     var(--text-lg);
	color:         var(--color-text-muted);
	max-width:     52ch;
	margin-inline: auto;
}


/* ==========================================================================
   2. LAYOUT : infos + formulaire
   ========================================================================== */

.tt-contact-layout {
	display:      grid;
	gap:          var(--space-12);
	align-items:  start;
}

@media (min-width: 1024px) {
	.tt-contact-layout {
		grid-template-columns: 340px 1fr;
	}
}


/* ==========================================================================
   3. INFORMATIONS DE CONTACT
   ========================================================================== */

.tt-contact-infos {
	display:        flex;
	flex-direction: column;
	gap:            var(--space-6);
}

.tt-contact-infos__title {
	font-family:  var(--font-display);
	font-size:    var(--text-xl);
	font-weight:  var(--font-bold);
	color:        var(--color-text);
}

.tt-contact-info-list {
	display:        flex;
	flex-direction: column;
	gap:            var(--space-3);
}

.tt-contact-info-item {
	display:         flex;
	align-items:     flex-start;
	gap:             var(--space-4);
	padding:         var(--space-4);
	background:      var(--color-bg);
	border:          1px solid var(--color-border);
	border-radius:   var(--radius-xl);
	text-decoration: none;
	color:           inherit;
	transition:
		border-color var(--duration-fast) var(--ease-standard),
		box-shadow   var(--duration-fast) var(--ease-standard);
}

a.tt-contact-info-item:hover {
	border-color: var(--color-brand-muted);
	box-shadow:   var(--shadow-card);
}

.tt-contact-info-item__icon {
	width:            40px;
	height:           40px;
	background:       var(--color-brand-subtle);
	border-radius:    var(--radius-lg);
	display:          flex;
	align-items:      center;
	justify-content:  center;
	color:            var(--color-brand);
	flex-shrink:      0;
}

.tt-contact-info-item__icon--wa {
	background: #e8fdf0;
	color:      #25D366;
}

.tt-contact-info-item__icon svg {
	width:  18px;
	height: 18px;
}

.tt-contact-info-item__label {
	display:     block;
	font-size:   var(--text-xs);
	color:       var(--color-text-subtle);
	font-weight: var(--font-medium);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	margin-bottom: 2px;
}

.tt-contact-info-item__value {
	display:     block;
	font-size:   var(--text-sm);
	font-weight: var(--font-semibold);
	color:       var(--color-text);
}

/* Liens rapides */
.tt-contact-quick-links {
	padding:       var(--space-5);
	background:    var(--color-bg-subtle);
	border-radius: var(--radius-xl);
}

.tt-contact-quick-links__title {
	font-size:     var(--text-sm);
	font-weight:   var(--font-semibold);
	color:         var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	margin-bottom: var(--space-3);
}

.tt-contact-quick-links ul {
	list-style: none;
	padding:    0;
	display:    flex;
	flex-direction: column;
	gap:        var(--space-2);
}

.tt-contact-quick-links a {
	font-size:       var(--text-sm);
	color:           var(--color-text-muted);
	text-decoration: none;
	font-weight:     var(--font-medium);
	transition:      color var(--duration-fast) var(--ease-standard);
}

.tt-contact-quick-links a:hover {
	color: var(--color-brand);
}


/* ==========================================================================
   4. FORMULAIRE
   ========================================================================== */

.tt-contact-form-wrap__title {
	font-family:    var(--font-display);
	font-size:      var(--text-2xl);
	font-weight:    var(--font-bold);
	color:          var(--color-text);
	margin-bottom:  var(--space-6);
}

.tt-contact-form {
	background:    var(--color-bg);
	border:        1px solid var(--color-border);
	border-radius: var(--radius-2xl);
	padding:       var(--space-8);
	display:       flex;
	flex-direction: column;
	gap:           var(--space-5);
}

.tt-contact-form__row {
	display: grid;
	gap:     var(--space-4);
}

@media (min-width: 640px) {
	.tt-contact-form__row { grid-template-columns: 1fr 1fr; }
}

/* Réutilise les styles .tt-presse-form__field */

/* Accord RGPD */
.tt-contact-form__rgpd {
	font-size: var(--text-sm);
}

.tt-contact-form__checkbox-label {
	display:     flex;
	align-items: flex-start;
	gap:         var(--space-2);
	color:       var(--color-text-muted);
	cursor:      pointer;
}

.tt-contact-form__checkbox-label input[type="checkbox"] {
	width:       16px;
	height:      16px;
	flex-shrink: 0;
	margin-top:  2px;
	accent-color: var(--color-brand);
}

.tt-contact-form__checkbox-label a {
	color: var(--color-brand);
	text-decoration: underline;
}


/* ==========================================================================
   5. FAQ SECTION
   ========================================================================== */

.tt-contact-faq {
	background: var(--color-bg-subtle);
}