/* ============================================================================
   Shortcode [emplois] — Liste d'offres d'emploi dépliable (Copelectronic / Mak2com)
   Rendu généré par inc/shortcode-emplois.php — ouverture AU CLIC uniquement.
   À placer dans une section Divi à fond BLEU FONCÉ (var(--bleufonce)).
   ========================================================================= */
.cop-jobs{
	--cj-dark:var(--bleufonce,#16303d);
	--cj-orange:var(--orange,#dc733e);
	--cj-blue:var(--bleuville,#3a7ea0);
	--cj-white:var(--blanc,#ffffff);
	--cj-text:rgba(255,255,255,.82);          /* textes mission / niveau */
	--cj-line:rgba(255,255,255,.16);          /* filets séparateurs */
	--cj-tag-contract-bg:#D9D9D9;             /* badge type de contrat */
	--cj-tag-contract-tx:rgba(0,57,67,0.6);
	--cj-tag-place-bg:#D9D9D9;                /* badge lieu (département) */
	--cj-tag-place-tx:rgba(0,57,67,0.6);
	--cj-title-col:270px;                     /* largeur colonne titre (desktop) */
	--cj-label-col:96px;                      /* largeur colonne badge mission/formation */
	--cj-toggle:44px;
	--cj-pad-x:30px;
	--cj-pad-y:22px;

	width:100%;
}
.cop-jobs *{ box-sizing:border-box; }

/* Compteur [emplois_count] — « N POSTES OUVERTS » (couleur/taille héritées du module Divi) */
.cop-jobs-count{
	font-family:'Anton',Helvetica,Arial,sans-serif;
	font-weight:400;
	text-transform:uppercase;
	letter-spacing:.5px;
	color: #fff;
}

/* Titre de section facultatif (attribut title="…") */
.cop-jobs__heading{
	margin:0 0 22px;
	font-family:'Anton',Helvetica,Arial,sans-serif;
	font-weight:400;
	text-transform:uppercase;
	letter-spacing:1px;
	line-height:1.1;
	color:var(--blanc,#ffffff);
	font-size:clamp(26px,3vw,40px);
}

/* ---- Item ---- */
.cop-jobs__item{ position:relative; border-top:1px solid var(--cj-line); }
.cop-jobs__item:last-child{ border-bottom:1px solid var(--cj-line); }

/* ---- Ligne cliquable : titre | tags | icône ---- */
.cop-jobs__head{
	display:flex;
	align-items:center;
	gap:16px;
	padding:var(--cj-pad-y) var(--cj-pad-x);
	cursor:pointer;
}
.cop-jobs__title{
	flex:0 0 var(--cj-title-col);
	margin:0;
	font-family:'Anton',Helvetica,Arial,sans-serif;
	font-weight:400;
	text-transform:uppercase;
	letter-spacing:.5px;
	line-height:1.05;
	font-size:clamp(20px,1.9vw,28px);
	color:var(--cj-white);
}

/* ---- Badges type de contrat + lieu ---- */
.cop-jobs__tags{ display:flex; flex-wrap:wrap; gap:10px; flex:1 1 auto; min-width:0; }
.cop-jobs__tag{
	font-family:'Anton',Helvetica,Arial,sans-serif;
	display:inline-block;
	padding:6px 12px;
	font-size:16px;
	font-weight:500;
	letter-spacing:.4px;
	text-transform:uppercase;
	white-space:nowrap;
}
.cop-jobs__tag--contract{ background:var(--cj-tag-contract-bg); color:var(--cj-tag-contract-tx); }
.cop-jobs__tag--place{ background:var(--cj-tag-place-bg); color:var(--cj-tag-place-tx); }

/* ---- Bouton icône +/× (cercle en outline) ---- */
.cop-jobs__toggle{
	flex:0 0 var(--cj-toggle);
	width:var(--cj-toggle);
	height:var(--cj-toggle);
	margin-left:auto;
	padding:0;
	border:1.5px solid rgba(255,255,255,.5);
	border-radius:50%;
	background:transparent;
	cursor:pointer;
	transition:border-color .3s ease, background .3s ease;
}
.cop-jobs__item:hover .cop-jobs__toggle{ border-color:var(--cj-white); }
.cop-jobs__icon{
	display:block;
	position:relative;
	width:100%;
	height:100%;
	transition:transform .35s ease;
}
.cop-jobs__icon::before,
.cop-jobs__icon::after{
	content:"";
	position:absolute;
	top:50%; left:50%;
	width:14px; height:2px;
	background:var(--cj-white);
	transform:translate(-50%,-50%);
}
.cop-jobs__icon::after{ transform:translate(-50%,-50%) rotate(90deg); }

/* ---- Panneau dépliable ---- */
.cop-jobs__panel{
	display:grid;
	grid-template-rows:0fr;
	transition:grid-template-rows .4s ease;
}
.cop-jobs__panel-inner{ overflow:hidden; min-height:0; }
.cop-jobs__body{ padding:4px var(--cj-pad-x) 30px; }

.cop-jobs__grid{ display:flex; align-items:flex-end; gap:28px; }
.cop-jobs__lines{ flex:1 1 auto; min-width:0; display:grid; gap:18px; }

.cop-jobs__line{ display:flex; align-items:flex-start; gap:18px; }
.cop-jobs__label{ flex:0 0 var(--cj-label-col); }
.cop-jobs__badge{
	display:inline-block;
	background:var(--cj-orange);
	color:var(--cj-white);
	font-family:'Anton',Helvetica,Arial,sans-serif;
	font-weight:400;
	font-size:13px;
	letter-spacing:.6px;
	text-transform:uppercase;
	padding:4px 10px;
}
.cop-jobs__badge-sub{
	display:block;
	margin-top:4px;
	font-size:11px;
	letter-spacing:.5px;
	text-transform:uppercase;
	color:var(--cj-text);
}
.cop-jobs__text{
	flex:1 1 auto;
	margin:0;
	color:var(--cj-text);
	font-family:'Roboto',Arial,sans-serif;
	font-size:clamp(14px,1vw,16px);
	line-height:1.5;
}

/* ---- Bouton « Postuler » ---- */
.cop-jobs__action{ flex:0 0 auto; }
.cop-jobs__btn{
	display:inline-flex;
	align-items:center;
	gap:14px;
	background:var(--cj-blue);
	color:var(--cj-white);
	text-decoration:none;
	font-family:'Anton',Helvetica,Arial,sans-serif;
	font-weight:400;
	font-size:14px;
	letter-spacing:.6px;
	text-transform:uppercase;
	padding:14px 22px;
	white-space:nowrap;
	transition:background .25s ease, transform .25s ease;
}
.cop-jobs__btn:hover{ background:#2f6a86; }
.cop-jobs__btn-arrow{ font-family:Arial,sans-serif; transition:transform .25s ease; }
.cop-jobs__btn:hover .cop-jobs__btn-arrow{ transform:translateX(4px); }

/* ===== ÉTAT OUVERT (au clic) ===== */
.cop-jobs__item.is-open .cop-jobs__panel{ grid-template-rows:1fr; }
.cop-jobs__item.is-open .cop-jobs__icon{ transform:rotate(45deg); }
.cop-jobs__item.is-open .cop-jobs__toggle{ border-color:var(--cj-white); }

/* ===== FORMULAIRE ===== */
.cop-jobs__form .list-container .listselect-wrap {
	display: flex;
	flex-direction: column !important;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 0.5rem;
}

.cop-jobs__form .nf-field-container .field-wrap {
	height: 70px;
}
.cop-jobs__form .nf-field-container .field-wrap .nf-field-label {
    font-family: Anton;
    font-size: 15px;
    font-style: normal;
    letter-spacing: 0.6px;
}
.cop-jobs__form .nf-field-container .field-wrap .nf-field-label label {
	color: #fff !important;
    font-weight: 200 !important;
	line-height: 24px !important;
}
.cop-jobs__form .nf-field-container .field-wrap .nf-field-element input {
	height: 40px !important;
    font-family: Arial;
    color: #003443;
    border: 0;
}
.cop-jobs__form .nf-field-container .field-wrap .nf-field-element select {
	height: 40px !important;
    font-family: Arial;
    color: #003443;
    border: 0;
}
.cop-jobs__form .nf-field-container .field-wrap .nf-field-element div {
	height: 40px !important;
    font-family: Arial;
    color: #003443;
    border: 0;
}
.cop-jobs__form .checkbox-container .field-wrap {
	margin-left: 0;
    height: 25px;
}
.cop-jobs__form .checkbox-container .field-wrap .nf-field-element{
	height: 0;
}
.cop-jobs__form .capjs-container .capjs-wrap {
	height: fit-content;
    display: block;
}
.cop-jobs__form .capjs-container .capjs-wrap .nf-field-element {
    height: fit-content !important;
}
.cop-jobs__form .file_upload-container .nf-field-element .btn {
	width: 100%;
    background-color: #EB6F2C;
    color: #FFF;
    font-family: Arial;
    font-size: 16px;
    font-style: normal;
    text-transform: uppercase;
    font-weight: 400;
    padding-top: 20px;
    padding-bottom: 20px;
	cursor: pointer;
}
.cop-jobs__form .checkbox-container .checkbox-wrap {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
}
.cop-jobs__form .checkbox-container .checkbox-wrap .nf-field-label {
    flex-basis: fit-content !important;
}
.cop-jobs__form .checkbox-container .checkbox-wrap .nf-field-label label {
	font-family:Arial,sans-serif;
}
.cop-jobs__form .checkbox-container .checkbox-wrap .nf-field-description {
	margin-left: 1rem;
	font-family:Arial,sans-serif;
    color: white;
}
.cop-jobs__form .checkbox-container .checkbox-wrap .nf-field-description p a {
	color: #fff !important;
	font-family:Arial,sans-serif;
}
.cop-jobs__form .nf-fu-progress {
	visibility: hidden;
}
.cop-jobs__form .submit-container .submit-wrap .nf-field-element input {
	font-family:'Anton',Helvetica,Arial,sans-serif;
	background-color: #EB6F2C;
	text-transform: uppercase;
	padding: 0.5rem 1rem;
}

/* ===== RESPONSIVE ===== */
@media (max-width:980px){
	.cop-jobs{ --cj-pad-x:20px; --cj-pad-y:18px; }
	.cop-jobs__head{ flex-wrap:wrap; }
	.cop-jobs__title{ flex:1 1 100%; order:1; }
	.cop-jobs__toggle{ order:2; position:absolute; top:var(--cj-pad-y); right:var(--cj-pad-x); }
	.cop-jobs__tags{ flex:1 1 100%; order:3; }
	.cop-jobs__grid{ flex-direction:column; align-items:stretch; gap:20px; }
	.cop-jobs__action{ align-self:flex-start; }
}
@media (max-width:560px){
	.cop-jobs__line{ flex-direction:column; gap:8px; }
	.cop-jobs__label{ flex:0 0 auto; }
	.cop-jobs__btn{ width:100%; justify-content:center; }
}