/* =========================================================================
   Page "Contact" — banner, then the "Nous rejoindre" section (Figma
   "adverweb_nous_rejoindre_clean_editable", 1672×941).
   ========================================================================= */

/* Banner: dark with diagonal light streaks, big centered title */
.aw-contact-banner {
	position: relative;
	padding: clamp(24px, 2.5vw, 40px) 20px clamp(28px, 3vw, 48px);
	text-align: center;
	background:
		url('../images/contact-diagonals.webp') center / min(900px, 90%) auto repeat-x,
		radial-gradient(ellipse 60% 80% at 50% 0%, rgba(30, 60, 110, 0.5), transparent 70%),
		#0a1018;
	overflow: hidden;
}
.aw-contact-banner h1 {
	position: relative;
	margin: 0;
	color: #fff;
	font-size: clamp(3rem, 7.5vw, 120px);
	line-height: 1.1;
	font-weight: 600;
	text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
}

/* Nous rejoindre ------------------------------------------------------------ */
.aw-join {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: #030406;
}
/* OOPO.png: rotated -5.08°, spans 141.8% of the frame, top -324px */
.aw-join__wave {
	position: absolute;
	left: -33.75%;
	right: -8.05%;
	top: -324px;
	height: 1334px;
	background: url('../images/join-wave.png') center / contain no-repeat;
	transform: rotate(-5.08deg);
	opacity: 0.9;
	z-index: -1;
	pointer-events: none;
}

.aw-join__inner {
	display: flex;
	flex-direction: column;
	gap: 36px;
	padding: 48px 20px 0;
}

.aw-join__title {
	color: #fff;
	font-size: clamp(1.6rem, 2.81vw, 45px);
	line-height: 1.2;
	font-weight: 700;
	max-width: 949px;
	margin: 0;
}
.aw-join__title span { display: inline-block; margin-top: 12px; }
.aw-join__title em { font-style: normal; color: #1e90ff; }
.aw-join__title::after {
	content: "";
	display: block;
	width: 68px;
	height: 2px;
	margin-top: 23px;
	background: #087bff;
}

.aw-join__notice {
	max-width: 650px;
	margin-top: 24px;
	padding: 12px 16px;
	font-size: 14px;
	border-radius: 4px;
}
.aw-join__notice--success { background: rgba(31, 175, 56, 0.15); border: 1px solid #1faf38; }
.aw-join__notice--error { background: rgba(253, 10, 104, 0.12); border: 1px solid #fd0a68; }

/* Fields: 650px wide, 46.76px tall, 22px apart, #0D1527 / 1.5px #1E293B */
.aw-join__form {
	display: flex;
	flex-direction: column;
	gap: 22px;
	max-width: 650px;
	margin-top: clamp(40px, 4.4vw, 70px);
}
.aw-join__row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }

.aw-join__input {
	width: 100%;
	height: 46.76px;
	padding: 0 16px 0 22px;
	border: 1.5px solid #1e293b;
	border-radius: 4px;
	background: #0d1527;
	color: #e6eefb;
	font-family: inherit;
	font-size: 14px;
	line-height: 17px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.aw-join__input::placeholder { color: #b1c8ea; opacity: 1; }
.aw-join__input:hover { border-color: #3b82f6; }
.aw-join__input:focus {
	outline: none;
	border-color: #3b82f6;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}
.aw-join__select {
	appearance: none;
	color: #b1c8ea;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2'%3E%3Cpath d='M4 8l8 8 8-8'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 22px;
}
.aw-join__select:valid { color: #e6eefb; }
.aw-join__select option { color: #000; }

/* CV drop box: 650×84, icon + file name centered */
.aw-join__file {
	position: relative;
	height: 84px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	border: 1.5px solid #1e293b;
	border-radius: 4px;
	background: #0d1527;
	color: #b1c8ea;
	font-size: 14px;
	line-height: 17px;
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease;
}
.aw-join__file input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}
.aw-join__file img { width: 30px; height: 30px; transition: transform 0.2s ease; }
.aw-join__file:hover,
.aw-join__file:focus-within { border-color: #3b82f6; background: #101b33; }
.aw-join__file:hover img { transform: translateY(2px); }
.aw-join__file.has-file { border-color: #1faf38; color: #fff; }

.aw-join__submit { width: 219px; margin-top: 2px; }

.aw-join__media { margin: 0 -20px; }
.aw-join__media img { width: 100%; height: auto; display: block; }

@media (min-width: 1024px) {
	.aw-join { min-height: 941px; }
	.aw-join__inner {
		position: relative;
		display: block;
		padding: clamp(60px, 5.8vw, 93px) 0 clamp(40px, 3.4vw, 54px) 3.25%;
		min-height: 941px;
	}
	/* title may run over the (dark) top of the photo, as in the Figma */
	.aw-join__content { position: relative; z-index: 1; }
	.aw-join__title { max-width: min(65%, 949px); }
	/* the photo starts ~46% across: keep the fields clear of it */
	.aw-join__form { max-width: min(650px, 42%); }
	.aw-join__media {
		position: absolute;
		right: 1.38%;
		top: 19.23%;
		bottom: 4.46%;
		width: 52.03%;
		margin: 0;
	}
	.aw-join__media img { height: 100%; object-fit: cover; }
}