/* ===================================================================
   Page Contact (contact.php)
   Feuille de style dédiée — s'appuie sur les tokens définis dans
   assets/css/style.css (couleurs, typographies, container, radius).
   =================================================================== */

/* -------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------- */

.contact-hero{
	position: relative;
	min-height: 32vh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	padding-bottom: 48px;
	background-color: var(--bg);
	background-image:
		radial-gradient(560px 260px at 10% 15%, rgba(255,176,32,.18), transparent 60%),
		radial-gradient(560px 280px at 90% 30%, rgba(47,217,198,.16), transparent 60%);
}

.contact-hero::before{
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10,10,11,.15) 0%, rgba(10,10,11,.9) 100%);
	z-index: 1;
}

.contact-hero-content{
	position: relative;
	z-index: 2;
	animation: contactHeroFadeUp .8s ease both;
}

.contact-hero-content h1{
	font-size: clamp(1.8rem, 4.4vw, 2.8rem);
	color: #fff;
}

.contact-hero-tagline{
	margin: 10px 0 0;
	color: rgba(255,255,255,.75);
	max-width: 560px;
	font-size: 1rem;
}

.breadcrumb{
	margin: 0 0 14px;
	font-size: .85rem;
	color: rgba(255,255,255,.55);
}
.breadcrumb a{ color: rgba(255,255,255,.75); transition: color .15s ease; }
.breadcrumb a:hover{ color: var(--accent-2); }
.breadcrumb span{ margin: 0 6px; }

@keyframes contactHeroFadeUp{
	from{ opacity: 0; transform: translateY(16px); }
	to{ opacity: 1; transform: translateY(0); }
}

/* Égaliseur décoratif, cohérent avec les autres pages du site */
.contact-hero-waves{
	position: absolute;
	left: 50%;
	bottom: 14px;
	transform: translateX(-50%);
	z-index: 2;
	display: flex;
	align-items: flex-end;
	gap: 6px;
	height: 30px;
	opacity: .5;
}
.contact-hero-waves span{
	width: 4px;
	border-radius: 2px;
	background: var(--accent-2);
	animation: contactEqBounce 1.1s ease-in-out infinite;
}
.contact-hero-waves span:nth-child(1){ animation-delay: .0s; }
.contact-hero-waves span:nth-child(2){ animation-delay: .1s; background: var(--accent); }
.contact-hero-waves span:nth-child(3){ animation-delay: .2s; }
.contact-hero-waves span:nth-child(4){ animation-delay: .3s; background: var(--accent); }
.contact-hero-waves span:nth-child(5){ animation-delay: .15s; }
.contact-hero-waves span:nth-child(6){ animation-delay: .25s; background: var(--accent); }
.contact-hero-waves span:nth-child(7){ animation-delay: .05s; }
.contact-hero-waves span:nth-child(8){ animation-delay: .35s; background: var(--accent); }

@keyframes contactEqBounce{
	0%, 100%{ height: 6px; }
	50%{ height: 30px; }
}

@media (prefers-reduced-motion: reduce){
	.contact-hero-content{ animation: none; }
	.contact-hero-waves span{ animation: none; height: 14px; }
}

/* -------------------------------------------------------------------
   Contenu : coordonnées + carte à gauche, formulaire à droite
   ------------------------------------------------------------------- */

.contact-section{ padding: 72px 0 96px; background: var(--bg); }

.contact-grid{
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 48px;
	align-items: start;
}

/* La carte s'étend sur toute la largeur du grid, sous les 2 colonnes */
.contact-grid .contact-map{
	grid-column: 1 / -1;
}

.contact-info h2,
.contact-form-wrap h2{
	font-size: clamp(1.3rem, 2.4vw, 1.7rem);
	color: var(--text);
	margin-bottom: 10px;
}

.contact-lead{
	color: var(--muted);
	margin: 0 0 28px;
	line-height: 1.7;
}

.contact-info-list{
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.contact-info-list li{
	display: flex;
	align-items: flex-start;
	gap: 14px;
	background: white;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 16px 18px;
	transition: border-color .2s ease, transform .2s ease;
}
.contact-info-list li:hover{ border-color: var(--accent-2); transform: translateY(-2px); }

.contact-info-icon{
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(47,217,198,.12);
	color: #4b82ff;
	display: flex;
	align-items: center;
	justify-content: center;
}
.contact-info-icon svg{ width: 20px; height: 20px; fill: currentColor; }

.contact-info-list h3{
	font-size: .92rem;
	color: #333;
	margin-bottom: 4px;
}
.contact-info-list p{
	margin: 0;
	color: #333;
	font-size: .92rem;
	line-height: 1.6;
}
.contact-info-list a{ color: var(--muted); transition: color .15s ease; }
.contact-info-list a:hover{ color: #4b82ff; }

.contact-social{ display: flex; gap: 12px; margin-bottom: 28px; }
.contact-social a{
	width: 50px; height: 48px;
	display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--border);
	border-radius: 50%;
	color: #4b82ff;
	transition: color .15s ease, border-color .15s ease;
}
.contact-social a:hover{ color: #4b82ff; border-color: #4b82ff; }
.contact-social .ic{ width: 18px; height: 18px; fill: currentColor; }

.contact-map{
	position: relative;
	margin-top: 8px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--surface);
	box-shadow: 0 0 0 1px rgba(255,176,32,0), 0 18px 40px -20px rgba(10,10,11,.35);
	transition: box-shadow .3s ease, border-color .3s ease, transform .3s ease;
}

/* Liseré néon type égaliseur, dégradé orange -> turquoise (identité sono & lumière) */
.contact-map::before{
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 50%, var(--accent) 100%);
	background-size: 200% 100%;
	z-index: 3;
	animation: contactMapNeonSweep 4s linear infinite;
}

@keyframes contactMapNeonSweep{
	0%{ background-position: 0% 0; }
	100%{ background-position: 200% 0; }
}

.contact-map:hover{
	border-color: var(--accent-2);
	transform: translateY(-2px);
	box-shadow:
		0 0 0 1px rgba(47,217,198,.35),
		0 0 32px -4px rgba(47,217,198,.35),
		0 24px 48px -20px rgba(10,10,11,.45);
}

.contact-map-header{
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--border);
	background:
		radial-gradient(160px 60px at 0% 0%, rgba(255,176,32,.10), transparent 70%),
		radial-gradient(160px 60px at 100% 0%, rgba(47,217,198,.10), transparent 70%),
		var(--surface-2, var(--surface));
}

.contact-map-header .contact-map-dot{
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--accent-2);
	box-shadow: 0 0 0 3px rgba(47,217,198,.18), 0 0 10px rgba(47,217,198,.7);
	flex-shrink: 0;
	animation: contactMapPulse 1.6s ease-in-out infinite;
}

@keyframes contactMapPulse{
	0%, 100%{ opacity: .55; transform: scale(.85); }
	50%{ opacity: 1; transform: scale(1); }
}

.contact-map-header h3{
	margin: 0;
	font-size: .88rem;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--text);
}

.contact-map iframe{
	display: block;
	width: 100%;
	filter: grayscale(.35) contrast(1.08) saturate(1.05);
}

.contact-map-link{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 16px;
	font-size: .88rem;
	font-weight: 600;
	color: var(--text);
	border-top: 1px solid var(--border);
	transition: color .15s ease, background .15s ease;
}
.contact-map-link:hover{ color: #4b82ff; background: rgba(47,217,198,.06); }
.contact-map-link svg{ width: 16px; height: 16px; fill: currentColor; }

@media (prefers-reduced-motion: reduce){
	.contact-map::before{ animation: none; }
	.contact-map-header .contact-map-dot{ animation: none; }
}

/* -------------------------------------------------------------------
   Formulaire
   ------------------------------------------------------------------- */

.contact-form-wrap{
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: clamp(24px, 4vw, 40px);
}

.contact-form{ margin-top: 20px; }

.form-row{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.form-field{ margin-bottom: 18px; }

.form-field label{
	display: block;
	margin-bottom: 8px;
	font-size: .88rem;
	color: var(--text);
	font-weight: 600;
}

.form-field input,
.form-field textarea{
	width: 100%;
	padding: 12px 14px;
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	color: var(--text);
	font-family: var(--font-body);
	font-size: .95rem;
	resize: vertical;
}
.form-field input::placeholder,
.form-field textarea::placeholder{ color: var(--muted); }
.form-field input:focus,
.form-field textarea:focus{ outline: none; border-color: #4b82ff; }

.hp-field{
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
}

.btn-solid{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 14px 28px;
	background: #4b82ff;
	color: var(--accent-ink);
	font-weight: 600;
	font-size: .98rem;
	border: none;
	border-radius: var(--radius);
	cursor: pointer;
	transition: background .15s ease, transform .15s ease;
}
.btn-solid:hover{ background: var(--accent); transform: translateY(-1px); }

.contact-feedback{
	margin: 0 0 18px;
	padding: 12px 16px;
	border-radius: var(--radius);
	font-size: .9rem;
}
.contact-feedback.ok{ background: rgba(47,217,198,.12); color: #4b82ff; }
.contact-feedback.error{ background: rgba(255,107,107,.1); color: #ff6b6b; }

/* -------------------------------------------------------------------
   Apparition au scroll (appliquée via assets/js/contact.js)
   ------------------------------------------------------------------- */

.reveal{
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .7s ease, transform .7s ease;
}
.reveal.in-view{
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
	.reveal{ opacity: 1; transform: none; transition: none; }
}

/* -------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------- */

@media (max-width: 960px){
	.contact-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 780px){
	.contact-hero{ min-height: 28vh; padding-bottom: 36px; }
	.contact-section{ padding: 48px 0 64px; }
	.form-row{ grid-template-columns: 1fr; gap: 0; }
}