/* ==========================================================================
   Inventiva Jobs — frontend styles
   Palette pulled from Inventiva brand tokens (fallbacks for standalone use):
     teal  #195d67 (primary)
     teal-dark #004f47
     lime  #7db61c (accent)
     off-white #f4f4f2 (surface)
   ========================================================================== */

:root {
	--inv-jobs-teal:      var(--inventiva-teal, #195d67);
	--inv-jobs-teal-dark: var(--inventiva-teal-dark, #004f47);
	--inv-jobs-lime:      var(--inventiva-lime, #7db61c);
	--inv-jobs-paper:     var(--inventiva-white, #ffffff);
	--inv-jobs-ink-muted: rgba(23, 90, 102, 0.62);
	--inv-jobs-border:    rgba(23, 90, 102, 0.14);
}

/* ---------- List view ---------- */

.inventiva-jobs-list {
	width: min(1320px, calc(100% - 3rem));
	margin: clamp(2rem, 4vw, 4rem) auto;
	color: var(--inv-jobs-teal);
	font-family: var(--inventiva-font-body, inherit);
}

.inventiva-jobs-list__header {
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.inventiva-jobs-list__heading {
	margin: 0 0 0.5rem;
	color: var(--inv-jobs-teal);
	font-family: var(--inventiva-font-heading, inherit);
	font-size: clamp(1.75rem, 3vw, 3rem);
	font-weight: 950;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.inventiva-jobs-list__intro {
	margin: 0;
	color: var(--inv-jobs-lime);
	font-weight: 700;
	font-size: 1rem;
}

/* Filters */

.inventiva-jobs-list__filters {
	display: grid;
	grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(180px, 1fr)) auto;
	gap: clamp(0.75rem, 1.5vw, 1.25rem);
	align-items: end;
	margin: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(0.5rem, 1vw, 1rem);
}

@media (max-width: 900px) {
	.inventiva-jobs-list__filters {
		grid-template-columns: 1fr 1fr;
	}
	.inventiva-jobs-list__field--search { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
	.inventiva-jobs-list__filters { grid-template-columns: 1fr; }
}

.inventiva-jobs-list__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	min-width: 0;
}

.inventiva-jobs-list__field-label {
	color: var(--inv-jobs-teal);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.inventiva-jobs-list__search {
	width: 100%;
	padding: 0.7rem 1rem;
	border: 1px solid var(--inv-jobs-border);
	border-radius: 0.5rem;
	background: #fff;
	color: var(--inv-jobs-teal-dark);
	font-family: inherit;
	font-size: 0.9rem;
	transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.inventiva-jobs-list__search:focus {
	outline: none;
	border-color: var(--inv-jobs-lime);
	box-shadow: 0 0 0 3px rgba(125, 182, 28, 0.18);
}

.inventiva-jobs-list__select-wrap {
	position: relative;
	display: block;
}

.inventiva-jobs-list__select-wrap select {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	padding: 0.7rem 2.2rem 0.7rem 1rem;
	border: 1px solid var(--inv-jobs-border);
	border-radius: 0.5rem;
	background: #fff;
	color: var(--inv-jobs-teal-dark);
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.inventiva-jobs-list__select-wrap select:focus {
	outline: none;
	border-color: var(--inv-jobs-lime);
	box-shadow: 0 0 0 3px rgba(125, 182, 28, 0.18);
}

.inventiva-jobs-list__select-wrap::after {
	content: "";
	position: absolute;
	right: 1rem;
	top: 50%;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid var(--inv-jobs-teal);
	transform: translateY(-3px);
	pointer-events: none;
}

.inventiva-jobs-list__reset {
	appearance: none;
	align-self: end;
	padding: 0.7rem 1.2rem;
	border: 1px solid var(--inv-jobs-border);
	border-radius: 999px;
	background: transparent;
	color: var(--inv-jobs-teal);
	cursor: pointer;
	font-family: inherit;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.inventiva-jobs-list__reset:hover,
.inventiva-jobs-list__reset:focus-visible {
	color: var(--inv-jobs-teal-dark);
	border-color: var(--inv-jobs-teal);
	background: rgba(23, 90, 102, 0.05);
}

/* Count line + groups */

.inventiva-jobs-list__count {
	margin: 0 0 clamp(1.25rem, 2vw, 1.75rem);
	color: var(--inv-jobs-teal);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.inventiva-jobs-list__count [data-jobs-count] {
	font-size: 1.05rem;
	font-weight: 800;
}

.inventiva-jobs-list__groups {
	display: grid;
	gap: clamp(1.75rem, 3vw, 2.5rem);
}

.inventiva-jobs-list__group[hidden] {
	display: none !important;
}

.inventiva-jobs-list__group-heading {
	margin: 0 0 0.75rem;
	padding-bottom: 0.5rem;
	color: var(--inv-jobs-teal);
	font-family: var(--inventiva-font-heading, inherit);
	font-size: clamp(1.05rem, 1.4vw, 1.35rem);
	font-weight: 900;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-bottom: 2px solid var(--inv-jobs-border);
}

/* Rows */

.inventiva-jobs-list__rows {
	display: grid;
	gap: 0.4rem;
}

.inventiva-jobs-list__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(140px, 260px) minmax(120px, auto);
	gap: clamp(1rem, 2vw, 1.75rem);
	align-items: center;
	padding: clamp(0.85rem, 1.4vw, 1.15rem) clamp(1.1rem, 1.8vw, 1.5rem);
	border: 1px solid var(--inv-jobs-border);
	border-radius: 0.6rem;
	background: #fff;
	color: var(--inv-jobs-teal-dark);
	text-decoration: none;
	transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.inventiva-jobs-list__row:hover,
.inventiva-jobs-list__row:focus-visible {
	border-color: var(--inv-jobs-teal);
	transform: translateY(-1px);
	box-shadow: 0 10px 24px rgba(23, 90, 102, 0.08);
	color: var(--inv-jobs-teal-dark);
}

.inventiva-jobs-list__row[hidden] {
	display: none !important;
}

.inventiva-jobs-list__row-department {
	color: var(--inv-jobs-lime);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.inventiva-jobs-list__row-title {
	font-size: clamp(1rem, 1.15vw, 1.15rem);
	font-weight: 800;
	line-height: 1.2;
}

.inventiva-jobs-list__row-location {
	color: var(--inv-jobs-ink-muted);
	font-size: 0.9rem;
	font-weight: 600;
}

.inventiva-jobs-list__row-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	justify-self: end;
	color: var(--inv-jobs-teal);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.inventiva-jobs-list__row-cta svg {
	transition: transform 0.16s ease;
}

.inventiva-jobs-list__row:hover .inventiva-jobs-list__row-cta svg {
	transform: translateX(2px);
}

@media (max-width: 780px) {
	.inventiva-jobs-list__row {
		grid-template-columns: 1fr;
		grid-template-areas:
			"title"
			"location"
			"cta";
		gap: 0.35rem;
	}
	.inventiva-jobs-list__row-title    { grid-area: title; }
	.inventiva-jobs-list__row-location { grid-area: location; }
	.inventiva-jobs-list__row-cta      { grid-area: cta; justify-self: start; }
}

.inventiva-jobs-list__no-results,
.inventiva-jobs-list__empty {
	margin: clamp(2rem, 3vw, 3rem) 0;
	padding: 1.5rem;
	border: 1px dashed var(--inv-jobs-border);
	border-radius: 0.6rem;
	color: var(--inv-jobs-ink-muted);
	font-weight: 600;
	text-align: center;
}

/* ---------- Single job ---------- */

.inventiva-single-job__article {
	width: min(1320px, calc(100% - 3rem));
	margin: clamp(2rem, 5vw, 5rem) auto;
	color: var(--inv-jobs-teal-dark);
	font-family: var(--inventiva-font-body, inherit);
}

/* On mobile the fixed Inventiva site header sits over the top of the article,
   making the "Back to open positions" link visually collide with the logo.
   Push the article down so the back link clears the header cleanly. */
@media (max-width: 780px) {
	.inventiva-single-job__article {
		margin-top: clamp(4.5rem, 14vw, 6rem);
	}
}

/* Two-column layout: content on the left, sticky apply form on the right.
   Below 1024px the aside stacks under the content since sticky wouldn't
   help much in a narrow viewport where the user is expected to scroll. */
.inventiva-single-job__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}

.inventiva-single-job__aside {
	position: relative;
}

.inventiva-single-job__sticky {
	position: sticky;
	top: clamp(5rem, 8vw, 6.5rem); /* clears the fixed site header. */
	/* No max-height / overflow: keep the whole form visible without an
	   internal scrollbar. If the viewport is short, sticky will let the
	   bottom edge fall below the fold naturally — acceptable trade-off. */
}

@media (max-width: 1024px) {
	.inventiva-single-job__layout {
		grid-template-columns: 1fr;
	}
	.inventiva-single-job__sticky {
		position: static;
	}
}

.inventiva-single-job__header {
	margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
	padding-bottom: clamp(1rem, 2vw, 1.5rem);
	border-bottom: 1px solid var(--inv-jobs-border);
}

.inventiva-single-job__back {
	display: inline-block;
	margin-bottom: 1.25rem;
	color: var(--inv-jobs-teal);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
}

.inventiva-single-job__back:hover {
	color: var(--inv-jobs-lime);
}

.inventiva-single-job__department {
	margin: 0 0 0.5rem;
	color: var(--inv-jobs-lime);
	font-size: 0.82rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.inventiva-single-job__title {
	margin: 0 0 1rem;
	color: var(--inv-jobs-teal);
	font-family: var(--inventiva-font-heading, inherit);
	font-size: clamp(1.75rem, 3vw, 2.75rem);
	font-weight: 950;
	line-height: 1.05;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.inventiva-single-job__meta {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.25rem;
	color: var(--inv-jobs-teal-dark);
	font-size: 0.95rem;
}

.inventiva-single-job__meta li strong {
	color: var(--inv-jobs-ink-muted);
	font-weight: 700;
	margin-right: 0.35rem;
}

.inventiva-single-job__pdf {
	margin: 1.25rem 0 0;
}

.inventiva-single-job__pdf-btn {
	display: inline-block;
	padding: 0.6rem 1.4rem;
	border: 1px solid var(--inv-jobs-teal);
	border-radius: 999px;
	color: var(--inv-jobs-teal);
	font-size: 0.85rem;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.16s ease, color 0.16s ease;
}

.inventiva-single-job__pdf-btn:hover {
	background: var(--inv-jobs-teal);
	color: #fff;
}

.inventiva-single-job__content {
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
	line-height: 1.55;
}

.inventiva-single-job__content h2,
.inventiva-single-job__content h3 {
	color: var(--inv-jobs-teal);
	margin-top: 1.75rem;
}

/* ---------- Application form ---------- */

.inventiva-single-job__apply {
	padding: clamp(1.75rem, 3vw, 2.5rem);
	border-radius: 1rem;
	background: rgba(23, 90, 102, 0.05);
}

.inventiva-single-job__apply-title {
	margin: 0 0 1.5rem;
	color: var(--inv-jobs-teal);
	font-family: var(--inventiva-font-heading, inherit);
	font-size: clamp(1.3rem, 2vw, 1.75rem);
	font-weight: 900;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.inventiva-jobs-form {
	display: grid;
	gap: 1.25rem;
}

.inventiva-jobs-form__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1rem;
}

.inventiva-jobs-form__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.inventiva-jobs-form__field--full {
	grid-column: 1 / -1;
}

.inventiva-jobs-form__label {
	color: var(--inv-jobs-teal);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.inventiva-jobs-form input[type="text"],
.inventiva-jobs-form input[type="email"],
.inventiva-jobs-form input[type="tel"],
.inventiva-jobs-form textarea {
	padding: 0.75rem 1rem;
	border: 1px solid var(--inv-jobs-border);
	border-radius: 0.5rem;
	background: #fff;
	color: var(--inv-jobs-teal-dark);
	font-family: inherit;
	font-size: 0.95rem;
	transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.inventiva-jobs-form input:focus,
.inventiva-jobs-form textarea:focus {
	outline: none;
	border-color: var(--inv-jobs-lime);
	box-shadow: 0 0 0 3px rgba(125, 182, 28, 0.18);
}

.inventiva-jobs-form__uploads {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1rem;
}

/* Custom file input — replaces the browser's native localised control
   ("Choisir le fichier" leaks in EN version when the browser locale is FR)
   with a labelled button that matches the site language. Native input stays
   in the DOM for accessibility, visually hidden inside the wrapper. */
.inventiva-jobs-form__file {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.55rem 0.7rem;
	border: 1px dashed var(--inv-jobs-border);
	border-radius: 0.5rem;
	background: #fff;
	cursor: pointer;
	font-size: 0.85rem;
	transition: border-color 0.16s ease, background-color 0.16s ease;
}

.inventiva-jobs-form__file:hover,
.inventiva-jobs-form__file:focus-within {
	border-color: var(--inv-jobs-teal);
	background: rgba(23, 90, 102, 0.03);
}

.inventiva-jobs-form__file input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: -1px;
}

.inventiva-jobs-form__file-btn {
	flex: 0 0 auto;
	padding: 0.35rem 0.9rem;
	border-radius: 999px;
	background: var(--inv-jobs-teal);
	color: #fff;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	transition: background-color 0.16s ease;
}

.inventiva-jobs-form__file:hover .inventiva-jobs-form__file-btn,
.inventiva-jobs-form__file:focus-within .inventiva-jobs-form__file-btn {
	background: var(--inv-jobs-teal-dark);
}

.inventiva-jobs-form__file-name {
	min-width: 0;
	flex: 1 1 auto;
	color: var(--inv-jobs-ink-muted);
	font-size: 0.85rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.inventiva-jobs-form__file-name.has-file {
	color: var(--inv-jobs-teal-dark);
	font-weight: 600;
}

.inventiva-jobs-form__file-hint {
	display: block;
	margin-top: 0.35rem;
	color: var(--inv-jobs-ink-muted);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.inventiva-jobs-form__consent {
	margin: 0;
	color: var(--inv-jobs-ink-muted);
	font-size: 0.8rem;
	line-height: 1.4;
}

.inventiva-jobs-form__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
}

.inventiva-jobs-form__submit {
	appearance: none;
	padding: 0.9rem 1.75rem;
	border: 0;
	border-radius: 999px;
	background: var(--inv-jobs-teal);
	color: #fff;
	cursor: pointer;
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	transition: background-color 0.16s ease, transform 0.12s ease;
}

.inventiva-jobs-form__submit:hover,
.inventiva-jobs-form__submit:focus-visible {
	background: var(--inv-jobs-teal-dark);
	transform: translateY(-1px);
}

.inventiva-jobs-form__submit[disabled] {
	opacity: 0.55;
	cursor: default;
	transform: none;
}

.inventiva-jobs-form__status {
	font-size: 0.9rem;
	font-weight: 600;
}

.inventiva-jobs-form__status--success { color: var(--inv-jobs-lime); }
.inventiva-jobs-form__status--error   { color: #b3261e; }