/* Enodia Careers : liste, popin, page d'offre.
   Couleurs et popin reprises du site (popin About, Divi Plus Team Grid, relevée le 2026-09-25). */

.ecj,
.ecj-single,
.ecj-dialog {
	--ecj-blue: #203c89;
	--ecj-pink: #e8508d;
	--ecj-text: #1c1c3a;
	--ecj-bg-soft: #f3f5ff;
	--ecj-radius: 16px;
	--ecj-overlay: rgba(32, 60, 137, 0.7);
}

/* ---------- Liste : encadrés au format des encadrés News (module dipl_blog de /news-events/) ----------
   Valeurs relevées par getComputedStyle sur /news-events/ le 2026-10-01 (1280, 768 et 375 px). */

.ecj-list {
	list-style: none;
	margin: 0;
	padding: 0 !important;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 15px; /* News : margin-right 15px */
	row-gap: 30px;    /* News : margin-bottom 30px */
}

.ecj-card {
	margin: 0;
	padding: 0 !important;
	list-style: none;
}

.ecj-card__link {
	box-sizing: border-box;
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	box-shadow: rgba(0, 0, 0, 0.05) 6px 6px 17px 0;
	color: #203c88;
	font-family: "Montserrat local", Helvetica, Arial, Lucida, sans-serif;
	font-size: 14px;
	line-height: 23.8px;
	text-decoration: none;
}

.ecj-card__link:focus-visible {
	outline: 2px solid var(--ecj-blue);
	outline-offset: 3px;
}

/* Bandeau : reproduit l'image des articles « We're hiring » (1767×891, affichée en 1024×516).
   Positions et tailles en % et en cqw : il se met à l'échelle comme l'image. */
.ecj-card__banner {
	position: relative;
	display: block;
	aspect-ratio: 1023 / 516;
	background: #e6eafe;
	container-type: inline-size;
}

.ecj-card__logo {
	position: absolute;
	top: 24.8%;
	left: 50%;
	width: 44.77%;
	height: auto;
	max-width: none;
	transform: translateX(-50%);
}

/* Libellé = pays, à la place de « Job Offer » : Montserrat bold, 111 px sur 1767 px de large = 6.28cqw, #2C3B87 */
.ecj-card__country {
	position: absolute;
	top: 67.3%;
	left: 0;
	right: 0;
	text-align: center;
	font-family: "Montserrat bold", Helvetica, Arial, Lucida, sans-serif;
	font-weight: 400;
	font-size: 6.28cqw;
	line-height: 1;
	color: #2c3b87;
}

.ecj-card__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	padding: 20px 20px 0;
	background: #fff;
}

.ecj-card__main {
	flex: 1 1 auto;
	display: block;
}

.ecj-card__tags {
	display: block;
	margin-bottom: 15px;
	line-height: 23.8px;
}

/* Étiquettes : style de l'étiquette « Careers » */
.ecj-card__tag {
	display: inline-block;
	margin: 0 6px 8px 0;
	padding: 3px 8px;
	border: 1px solid #203c88;
	border-radius: 15px;
	background: #fff;
	color: #203c89;
	font-size: 11px;
	line-height: 16.5px;
	font-weight: 700;
}

.ecj-card__title {
	margin: 0 0 15px;
	padding: 0;
	font-family: "Baloo heading - local", Helvetica, Arial, Lucida, sans-serif;
	font-size: 20px;
	line-height: 24px;
	font-weight: 400;
	color: #203c88;
}

.ecj-card__excerpt {
	display: block;
	margin: 0 0 15px;
	color: #1c1c3a;
	font-size: 14px;
	line-height: 21px;
}

/* « View position → » : style de « Read More → » (lien inline-block dans un bloc de 23.8px, flèche hors flux) */
.ecj-card__more {
	display: block;
	margin-bottom: 15px;
	line-height: 23.8px;
}

.ecj-card__cta {
	position: relative;
	display: inline-block;
	color: #203c89;
	font-family: "Montserrat bold", Helvetica, Arial, Lucida, sans-serif;
	font-size: 14px;
	line-height: 21px;
	font-weight: 500;
}

.ecj-card__cta::after {
	position: absolute;
	top: 0;
	left: 100%;
	display: block;
	width: 14px;
	margin-left: 4.2px;
	font-family: ETmodules;
	content: "\24";
	font-size: 14px;
	line-height: 21px;
	font-weight: 400;
	color: #203c89;
}

/* Pied : date de publication (News : padding-top 10px + date en marge 5px / 16px) */
.ecj-card__date {
	display: block;
	padding: 15px 0 16px;
	border-top: 1px solid #f3f5ff;
	color: #203c89;
	font-size: 12px;
	line-height: 18px;
}

/* Cartes à cheval sur la limite des deux fonds (page Careers, brief §7.3) : la liste remonte de la moitié de la
   hauteur du bandeau, pour que la limite blanc / bleuté passe à mi-hauteur du bandeau. La marge en % se calcule sur la
   largeur de la liste : largeur d'une carte × (516 / 1023) / 2. La section des offres a un padding haut nul (réglage Divi),
   la section d'intro garde en bas la place de la demi-carte et des 40 px minimum sous le texte. */
.ecj:has(.ecj-list) {
	position: relative;
	z-index: 3;
	margin-top: calc((100% - 30px) / 3 * -0.2522);
}

.ecj-empty {
	padding: 24px;
	background: #fff;
	color: var(--ecj-text);
}

@media (max-width: 980px) {
	.ecj-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ecj:has(.ecj-list) { margin-top: calc((100% - 15px) / 2 * -0.2522); }
}

@media (max-width: 767px) {
	.ecj-list { grid-template-columns: 1fr; }
	.ecj:has(.ecj-list) { margin-top: calc(100% * -0.2522); }
}

.ecj-job__meta {
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	font-size: 14px;
	color: var(--ecj-text);
}

.ecj-job__meta span + span::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: 16px;
	border-radius: 50%;
	background: var(--ecj-pink);
	vertical-align: middle;
}

/* Flèche Divi (police ETmodules) du lien de retour de la page d'offre */
.ecj-back a::before {
	font-family: ETmodules;
	content: "\24";
	color: var(--ecj-pink);
	margin-left: 6px;
	vertical-align: -2px;
}

/* ---------- Détail d'une offre (popin et page) ---------- */

.ecj-job__head {
	margin-bottom: 24px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--ecj-pink);
}

.ecj-job__title {
	margin: 0 0 12px;
	padding: 0;
	color: var(--ecj-blue);
}

.ecj-job__section {
	margin-bottom: 24px;
}

.ecj-job__section h2,
.ecj-job__section h3,
.ecj-about h2,
.ecj-apply__title {
	color: var(--ecj-blue);
	padding-bottom: 8px;
}

.ecj-dialog .ecj-job__section h3,
.ecj-dialog .ecj-apply__title {
	font-size: 18px;
}

/* Puces explicites : la popin vit sous <body>, hors des styles de contenu Divi. */
.ecj-job__section ul {
	list-style: disc outside;
	padding-left: 1.2em;
	margin: 0 0 1em;
}

.ecj-job__section ol {
	list-style: decimal outside;
	padding-left: 1.4em;
	margin: 0 0 1em;
}

.ecj-dialog p {
	margin: 0 0 1em;
	padding: 0;
}

.ecj-job__section li {
	margin-bottom: 4px;
}

.ecj-apply {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--ecj-pink);
}

/* ---------- Popin ----------
   Rattachée à <body> par le JS. Cadre repris de la popin About (fond, largeur, coins, marges internes),
   avec marges d'écran, en-tête et bouton « Apply » collants (retours du 2026-09-25). */

html.ecj-lock {
	overflow: hidden;
}

.ecj-dialog[hidden] {
	display: none;
}

.ecj-dialog {
	position: fixed;
	inset: 0;
	z-index: 1000000; /* au-dessus de l'en-tête Divi */
	font-family: inherit;
}

.ecj-dialog__backdrop {
	position: absolute;
	inset: 0;
	background: var(--ecj-overlay);
	opacity: 0.8;
}

.ecj-dialog__frame {
	position: absolute;
	inset: 0;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px 16px;
}

.ecj-dialog__panel {
	box-sizing: border-box;
	width: 45%;
	min-width: 560px;
	max-width: 760px;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	border-radius: var(--ecj-radius);
	box-shadow: 0 20px 60px rgba(28, 28, 58, 0.25);
	color: var(--ecj-text);
}

/* En-tête collant : intitulé, lieu, croix */
.ecj-dialog__head {
	flex: none;
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 24px 20px 18px 30px;
	border-bottom: 1px solid var(--ecj-pink);
	background: #fff;
}

.ecj-dialog__head-text {
	flex: 1;
	min-width: 0;
}

.ecj-dialog .ecj-job__head {
	margin: 0;
	padding: 0;
	border: 0;
}

.ecj-dialog .ecj-job__title {
	margin: 0 0 6px;
	padding: 0;
	color: var(--ecj-blue);
	font-size: 24px;
	line-height: 1.25;
}

.ecj-dialog__close {
	flex: none;
	width: 44px;
	height: 44px;
	margin: -8px 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ecj-bg-soft);
	color: var(--ecj-blue);
	font-size: 30px;
	line-height: 44px;
	font-family: Arial, sans-serif;
	text-align: center;
	cursor: pointer;
}

.ecj-dialog__close:hover {
	background: var(--ecj-blue);
	color: #fff;
}

.ecj-dialog__close:focus-visible {
	outline: 2px solid var(--ecj-blue);
	outline-offset: 2px;
}

/* Zone défilante : barre toujours visible */
.ecj-dialog__scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: scroll;
	overscroll-behavior: contain;
	padding: 24px 24px 30px 30px;
}

/* Barre toujours visible : ::-webkit-scrollbar force une barre classique (Chrome, Safari, Edge), même avec
   les barres superposées de macOS. Ne pas poser scrollbar-color/width ici : Chrome ignorerait alors ces règles. */
@supports not selector(::-webkit-scrollbar) {
	.ecj-dialog__scroll {
		scrollbar-width: auto;
		scrollbar-color: var(--ecj-blue) var(--ecj-bg-soft);
	}
}

.ecj-dialog__scroll::-webkit-scrollbar {
	width: 10px;
}

.ecj-dialog__scroll::-webkit-scrollbar-track {
	background: var(--ecj-bg-soft);
}

.ecj-dialog__scroll::-webkit-scrollbar-thumb {
	background: var(--ecj-blue);
	border-radius: 10px;
	border: 2px solid var(--ecj-bg-soft);
}

.ecj-dialog__scroll:focus-visible {
	outline: 2px solid var(--ecj-blue);
	outline-offset: -2px;
}

.ecj-dialog__body {
	color: var(--ecj-text);
}

.ecj-dialog .ecj-apply {
	scroll-margin-top: 12px;
}

/* Bouton « Apply » collant en bas */
.ecj-dialog__foot {
	flex: none;
	padding: 14px 30px;
	border-top: 1px solid #e3e7f5;
	background: #fff;
}

.ecj-dialog__foot.is-hidden {
	display: none;
}

.ecj-dialog__apply-btn {
	display: inline-block;
	padding: 12px 28px;
	border: 0;
	border-radius: 41px;
	background: var(--ecj-blue);
	color: #fff;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.ecj-dialog__apply-btn:hover,
.ecj-dialog__apply-btn:focus-visible {
	background: var(--ecj-pink);
}

.ecj-dialog__apply-btn:focus-visible {
	outline: 2px solid var(--ecj-blue);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
	.ecj-dialog.is-open .ecj-dialog__backdrop { animation: ecj-fade 0.2s ease-out; }
	.ecj-dialog.is-open .ecj-dialog__panel { animation: ecj-rise 0.25s ease-out; }
	.ecj-dialog__scroll { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
	.ecj-card__link { transition: none; }
	.ecj-card__link:hover,
	.ecj-card__link:focus-visible { transform: none; }
}

@keyframes ecj-fade { from { opacity: 0; } to { opacity: 0.8; } }
@keyframes ecj-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (max-width: 980px) {
	.ecj-dialog__panel { width: 70%; min-width: 0; }
}

@media (max-width: 767px) {
	.ecj-dialog__frame { padding: 24px 12px; }
	.ecj-dialog__panel { width: 100%; }
	.ecj-dialog__head { padding: 16px 12px 14px 16px; }
	.ecj-dialog .ecj-job__title { font-size: 20px; }
	.ecj-dialog .ecj-job__meta { flex-direction: column; gap: 2px; }
	.ecj-dialog .ecj-job__meta span + span::before { display: none; }
	.ecj-dialog__scroll { padding: 18px 12px 24px 16px; }
	.ecj-dialog__foot { padding: 12px 16px; }
	.ecj-dialog__apply-btn { width: 100%; }
}

/* ---------- Page d'offre ---------- */

.ecj-single__inner {
	box-sizing: border-box;
	width: 80%;
	max-width: 1080px;
	margin: 0 auto;
	padding-bottom: 60px;
	color: var(--ecj-text);
}

.ecj-job--page,
.ecj-about,
.ecj-single .ecj-apply {
	max-width: 800px;
}

.ecj-back {
	margin: 0 0 24px;
	font-size: 13px;
}

.ecj-back a {
	color: var(--ecj-blue);
	text-decoration: none;
}

.ecj-back a:hover {
	color: var(--ecj-pink);
}

.ecj-back a::before {
	display: inline-block;
	margin: 0 6px 0 0;
	transform: rotate(180deg);
}

.ecj-back--bottom {
	margin-top: 32px;
}

.ecj-about {
	margin-top: 32px;
	padding: 30px;
	background: var(--ecj-bg-soft);
	border-radius: var(--ecj-radius);
}