/**
 * Détail d'une offre d'emploi — Partego.
 *
 * Parti pris : une FICHE DE POSTE éditoriale, pas un tableau de bord.
 * Le lecteur est une personne en recherche d'emploi, souvent en parcours
 * d'insertion, souvent sur mobile. Elle veut savoir en dix secondes si elle
 * peut postuler. D'où des bandes continues, une hiérarchie typographique
 * franche, et des filets à la place des cadres.
 *
 * Charte reprise du site, rien d'inventé :
 *   Bauhaus Std Medium ....... la police des titres du site, celle du logo
 *   #157dbc / #0d4f78 ........ le bleu Partego et sa version profonde
 *   #e32523 .................. le rouge de la flèche du logo
 *   #f6efe4 .................. sable, l'accent CHAUD qui manquait au couple
 *                              bleu/rouge. Une association d'insertion doit
 *                              accueillir, pas ressembler à un guichet.
 *
 * Signature : la flèche du « o » de partego. Elle marque ce qui est
 * indispensable, ouvre les sections, et passe en filigrane sur le sable.
 */

/* La police des titres du site ------------------------------------------
   `Bauhaus Std Medium` n'est déclarée nulle part dans une feuille de style :
   Elementor Pro l'écrit EN LIGNE, et seulement sur les pages dont un widget
   l'utilise. Une page d'offre n'en est pas une, la famille n'y existait donc
   pas et tous les titres tombaient sur `Century Gothic`, sans la moindre
   erreur nulle part. Repéré par Thomas dans le panneau de polices du
   navigateur le 11/09/2026, alors que le CSS, lui, était juste.

   Mêmes fichiers et même nom de famille que la déclaration d'Elementor : si
   les deux se retrouvent sur une page, elles sont identiques. Le chemin part
   de la racine du site, il ne dépend pas de l'emplacement du plugin. */
@font-face {
	font-family: "Bauhaus Std Medium";
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url("/wp-content/uploads/2019/07/Bauhaus-Std-Medium-1.otf") format("opentype"),
	     url("/wp-content/uploads/2019/07/Bauhaus-Std-Medium.otf") format("opentype");
}

/* Les jetons vivent sur TOUTES les racines utiles : le bandeau d'essentiel est
   rendu par un autre hook que la fiche, et le gabarit natif de WP Job Manager
   (titre, métadonnées, bloc de candidature) est hors des deux. Vécu : bande
   marine devenue transparente, texte blanc sur blanc, invisible. */
body.single-job_listing,
.partego-fiche,
.partego-essentiel {
	--pt-bleu: #157dbc;
	--pt-marine: #0d3a5c;
	--pt-profond: #0a2c46;
	--pt-rouge: #e32523;
	--pt-sable: #f6efe4;
	--pt-sable-fonce: #e8dcc8;
	--pt-encre: #333;
	--pt-gris: #6b7480;
	--pt-filet: rgba(13, 58, 92, .14);
	--pt-titres: "Bauhaus Std Medium", "Century Gothic", sans-serif;
	--pt-corps: "Roboto", -apple-system, "Segoe UI", sans-serif;
	/* Les titres du site sont en Bauhaus Std Medium graisse 300 : la fonte
	   n'a qu'une graisse, et c'est celle-là que le site demande partout.
	   Relevé sur le H1 du site le 11/09/2026. */
	--pt-titres-graisse: 300;

}

.partego-fiche {
	margin: 40px 0 0;
	font-family: var(--pt-corps);
	color: var(--pt-encre);
	font-size: 16px;
	line-height: 1.65;
}

/* Logo de la structure -------------------------------------------------
   Quatre enseignes, le même logo à la couleur près : c'est lui qui dit qui
   recrute. Il se cale à droite de la ligne de faits, sans cadre ni ombre,
   posé sur le blanc de la page comme sur le reste du site. */

.partego-logo {
	float: right;
	width: auto;
	max-width: 40%;
	height: auto;
	max-height: 76px;
	margin: 0 0 18px 28px;
}

/* Le bandeau marine reprend toute la largeur sous le logo. */
.partego-essentiel {
	clear: both;
}

/* Bandeau d'essentiel ------------------------------------------------
   Ce qu'on regarde avant de lire quoi que ce soit. Une bande pleine, pas
   des pastilles éparpillées : on lit une ligne, pas un nuage. */

.partego-essentiel {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 44px;
	padding: 0;
	list-style: none;
	background: var(--pt-marine);
	color: #fff;
	overflow: hidden;
}

.partego-essentiel__item {
	flex: 1 1 0;
	min-width: 168px;
	padding: 20px 24px;
	border-left: 1px solid rgba(255, 255, 255, .16);
}

.partego-essentiel__item:first-child {
	border-left: 0;
}

.partego-essentiel__label {
	display: block;
	margin-bottom: 2px;
	font-size: 12.5px;
	line-height: 1.3;
	letter-spacing: .02em;
	color: rgba(255, 255, 255, .62);
}

.partego-essentiel__valeur {
	display: block;
	font-family: var(--pt-titres);
	font-weight: var(--pt-titres-graisse);
	font-size: 19px;
	line-height: 1.25;
	color: #fff;
}

.partego-essentiel__item--paye {
	background: var(--pt-rouge);
	border-left-color: var(--pt-rouge);
}

.partego-essentiel__item--paye .partego-essentiel__label {
	color: rgba(255, 255, 255, .78);
}

/* Sections ------------------------------------------------------------
   Elles se touchent. Aucune ne flotte, aucune n'a de bordure : ce sont des
   bandes de lecture, pas des cartes posées sur un fond. */

.partego-sec {
	position: relative;
	padding: 44px 0 40px;
}

.partego-sec + .partego-sec {
	border-top: 1px solid var(--pt-filet);
}

.partego-sec--chaud {
	position: relative;
	margin-top: 0;
	padding: 44px 32px 58px;
	background: var(--pt-sable);
	border-top: 0;
	/* La flèche signature déborde volontairement : c'est la bande qui la
	   coupe, sinon elle bave sur le blanc de la page. */
	overflow: hidden;
}

/* Signature : la flèche du logo, très grande et coupée par le bord droit.
   Deux essais écartés avant celle-ci, et c'est le même défaut les deux fois :
   une flèche entière posée dans l'angle se lit comme un bouton « suivant »,
   et une trame répétée traverse le texte. Débordante, elle redevient un fond. */
.partego-sec--chaud::after {
	content: "";
	position: absolute;
	right: -46px;
	bottom: -104px;
	width: 260px;
	height: 260px;
	background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 12h17M12.5 5.5L19 12l-6.5 6.5' fill='none' stroke='%230d3a5c' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	opacity: .075;
	pointer-events: none;
}

.partego-sec > * {
	position: relative;
	z-index: 1;
}

/* Titres --------------------------------------------------------------
   Le mot porteur passe en rouge, comme la flèche du logo. Pas de filet
   décoratif sous le titre. */

.partego-sec__titre {
	margin: 0 0 24px;
	font-family: var(--pt-titres);
	font-size: 29px;
	font-weight: var(--pt-titres-graisse);
	line-height: 1.2;
	color: var(--pt-bleu);
}

.partego-sec__titre em {
	font-style: normal;
	color: var(--pt-rouge);
}

.partego-sec__titre + .partego-sec__chapo {
	margin-top: -16px;
}

.partego-sec__chapo {
	max-width: 56ch;
	margin: 0 0 26px;
	font-size: 15.5px;
	color: var(--pt-gris);
}

/* Colonnes asymétriques : jamais deux colonnes égales, qui font grille. */

.partego-colonnes {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
	gap: 30px 52px;
	align-items: start;
}

.partego-colonnes--conditions {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}



.partego-groupe + .partego-groupe {
	margin-top: 26px;
}

.partego-groupe__titre {
	margin: 0 0 10px;
	font-family: var(--pt-titres);
	font-size: 16px;
	font-weight: var(--pt-titres-graisse);
	line-height: 1.3;
	color: var(--pt-bleu);
}

/* Listes : des filets, jamais de puces géométriques. ------------------ */

.partego-items {
	margin: 0;
	padding: 0;
	list-style: none;
}

.partego-items li {
	padding: 9px 0;
	border-bottom: 1px solid var(--pt-filet);
}

.partego-items li:first-child {
	padding-top: 0;
}

.partego-items li:last-child {
	border-bottom: 0;
}

/* Un indispensable se signale par la flèche du logo et un mot, pas par
   une pastille de couleur. */
.partego-items--cle li {
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-weight: 500;
	color: var(--pt-marine);
}

.partego-items--cle .partego-fleche {
	flex: none;
	width: 17px;
	height: 17px;
	transform: translateY(3px);
	color: var(--pt-rouge);
}

/* Paires libellé / valeur --------------------------------------------- */

.partego-paires {
	margin: 0;
}

.partego-paires > div {
	padding: 10px 0;
	border-bottom: 1px solid var(--pt-filet);
}

.partego-paires > div:first-child {
	padding-top: 0;
}

.partego-paires > div:last-child {
	border-bottom: 0;
}

.partego-paires dt {
	margin: 0 0 1px;
	font-size: 13px;
	color: var(--pt-gris);
}

.partego-paires dd {
	margin: 0;
	font-size: 16px;
	color: var(--pt-marine);
}

/* Rémunération : le chiffre est l'argument, il se lit de loin. -------- */

.partego-paye {
	margin: 0 0 24px;
}

.partego-paye__montant {
	display: block;
	font-family: var(--pt-titres);
	font-size: 31px;
	line-height: 1.15;
	color: var(--pt-marine);
}

.partego-paye__periode {
	color: var(--pt-rouge);
}

.partego-paye__complement {
	display: block;
	margin-top: 6px;
	max-width: 46ch;
	font-size: 14.5px;
	color: var(--pt-gris);
}

/* Contact : l'humain, en fin de fiche. -------------------------------- */

.partego-contact {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px 30px;
	padding: 28px 32px;
	background: var(--pt-profond);
	color: #fff;
}

.partego-contact__intro {
	flex: 1 1 260px;
	margin: 0;
	font-size: 15px;
	color: rgba(255, 255, 255, .72);
}

.partego-contact__nom {
	display: block;
	margin-bottom: 2px;
	font-family: var(--pt-titres);
	font-weight: var(--pt-titres-graisse);
	font-size: 21px;
	line-height: 1.25;
	color: #fff;
}

.partego-contact__enseigne {
	display: block;
	font-size: 13px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .6);
}

.partego-contact__tel {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px 12px 22px;
	font-family: var(--pt-titres);
	font-weight: var(--pt-titres-graisse);
	font-size: 21px;
	line-height: 1;
	text-decoration: none;
	color: #fff;
	background: var(--pt-rouge);
	border-radius: 999px;
	transition: background .18s ease;
}

.partego-contact__tel:hover,
.partego-contact__tel:focus-visible {
	color: #fff;
	background: #c41d1b;
}

/* La pastille du bouton maison. */
.partego-contact__tel .partego-pastille {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	color: var(--pt-rouge);
	background: #fff;
	border-radius: 50%;
}

.partego-contact__tel .partego-pastille svg {
	width: 16px;
	height: 16px;
}

/* Renvoi France Travail ----------------------------------------------- */

.partego-source {
	margin: 18px 0 0;
	font-size: 13.5px;
	color: var(--pt-gris);
}

.partego-source a {
	color: var(--pt-bleu);
	text-underline-offset: 3px;
}

/* Logo d'entreprise de WP Job Manager ---------------------------------
   L'employeur est toujours une structure du groupe et les champs
   entreprise sont retirés du back-office : le gabarit ne sert donc que
   l'image de remplacement du plugin. */
.job_listings img.company_logo,
.single_job_listing img.company_logo {
	display: none;
}

/* Reprise du gabarit natif de WP Job Manager --------------------------
   Le plugin ne rend que les blocs `.partego-*`. Le titre, la ligne de
   métadonnées et le bloc de candidature viennent du gabarit du plugin, et
   restaient habillés par le thème enfant de juin 2026 : bandeau en dégradé
   pleine largeur, pastilles arrondies bleu pâle, carte blanche ombrée autour
   du bouton. Trois tics de la liste noire, et ils n'apparaissaient pas dans
   l'aperçu, celui-ci étant rendu hors du site donc sans le CSS du thème.

   Tout est borné à la page d'UNE offre : la liste garde ses badges de
   couleur par type de contrat, qui y sont utiles pour balayer. */

body.single-job_listing .page-header {
	width: auto;
	max-width: 860px;
	margin: 0 auto;
	padding: 56px 20px 0;
	background: none;
	text-align: left;
}

body.single-job_listing .page-header h1.entry-title {
	max-width: none;
	margin: 0;
	font-family: var(--pt-titres);
	font-size: 35px;
	font-weight: var(--pt-titres-graisse);
	line-height: 35px;
	color: var(--pt-bleu);
}

/* La ligne de métadonnées redevient une ligne : type de contrat, lieu et date
   se lisent d'un trait sous le titre, sans pastille. Le `!important` n'est pas
   un caprice, les règles `.job-type` du thème enfant en portent. */
body.single-job_listing .single_job_listing ul.job-listing-meta {
	gap: 4px 20px;
	margin: 14px 0 28px;
}

body.single-job_listing .single_job_listing ul.job-listing-meta li,
body.single-job_listing .single_job_listing ul.job-listing-meta li.job-type {
	padding: 0 !important;
	background: none !important;
	border: 0;
	border-radius: 0;
	font-family: inherit;
	font-size: 14px !important;
	font-weight: 400;
	line-height: 1.5;
	color: var(--pt-gris) !important;
}

/* WP Job Manager pose une icône de sa fonte devant le lieu et la date. La
   ligne se lit mieux sans : trois faits courts n'ont pas besoin d'étiquettes
   graphiques pour se distinguer. */
body.single-job_listing .single_job_listing ul.job-listing-meta li.date-posted::before,
body.single-job_listing .single_job_listing ul.job-listing-meta li.location::before {
	display: none;
}

body.single-job_listing .single_job_listing ul.job-listing-meta li.location a {
	color: var(--pt-gris);
	text-decoration: none;
}

body.single-job_listing .single_job_listing ul.job-listing-meta li.partego-meta strong {
	color: var(--pt-gris);
	font-weight: 400;
}

/* Candidature : plus de carte autour du bouton. Une barre pleine largeur,
   qu'on ne peut pas rater et qui n'a pas l'air d'un widget posé sur la page. */
body.single-job_listing .single_job_listing .job_application {
	margin-top: 40px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	text-align: left;
}

body.single-job_listing .single_job_listing .application_button {
	display: block;
	width: 100%;
	padding: 17px 24px;
	background: var(--pt-bleu) !important;
	color: #fff !important;
	border: 0;
	border-radius: 32px;
	box-shadow: none;
	font-family: var(--pt-titres);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.3;
	text-align: center;
	transition: background .15s;
}

body.single-job_listing .single_job_listing .application_button:hover,
body.single-job_listing .single_job_listing .application_button:focus {
	background: var(--pt-marine) !important;
	transform: none;
	box-shadow: none;
}

/* Le thème souligne tous les liens du contenu, avec une spécificité plus
   forte que la classe seule : la pastille de téléphone en héritait un
   soulignement. Invisible sur l'aperçu, qui n'a pas le CSS du thème. */
body.single-job_listing .partego-contact__tel,
body.single-job_listing .partego-contact__tel:hover,
body.single-job_listing .partego-contact__tel:focus {
	text-decoration: none;
}

body.single-job_listing .single_job_listing .application_details {
	margin-top: 28px;
	text-align: left;
}

/* Le formulaire suit le même registre : filets plutôt que cadres arrondis,
   et le même bouton que celui qui l'a ouvert. */
body.single-job_listing .job-manager-application-form label {
	font-family: inherit;
	font-weight: 600;
	color: var(--pt-marine);
}

body.single-job_listing .job-manager-application-form .input-text,
body.single-job_listing .job-manager-application-form textarea {
	border: 1px solid var(--pt-filet);
	border-radius: 4px;
	background: #fff;
}

body.single-job_listing .job-manager-application-form .input-text:focus,
body.single-job_listing .job-manager-application-form textarea:focus {
	border-color: var(--pt-bleu);
}

body.single-job_listing .job-manager-application-form input[type="submit"] {
	width: 100%;
	padding: 15px 24px;
	background: var(--pt-bleu);
	border-radius: 32px;
	box-shadow: none;
	font-family: var(--pt-titres);
	font-size: 17px;
	font-weight: 400;
}

body.single-job_listing .job-manager-application-form input[type="submit"]:hover {
	background: var(--pt-marine);
	transform: none;
	box-shadow: none;
}

/* Mobile --------------------------------------------------------------- */

@media (max-width: 782px) {
	.partego-essentiel__item {
		flex: 1 1 50%;
		min-width: 0;
		border-top: 1px solid rgba(255, 255, 255, .16);
	}

	.partego-essentiel__item:nth-child(-n+2) {
		border-top: 0;
	}

	.partego-essentiel__item:nth-child(odd) {
		border-left: 0;
	}

	.partego-colonnes,
	.partego-colonnes--conditions {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.partego-sec__titre {
		font-size: 24px;
	}

	.partego-sec--chaud {
		padding: 36px 20px 32px;
	}

	/* Sur un écran étroit, la bande n'a plus d'angle libre : la signature
	   croiserait le texte. Elle se retire. */
	.partego-sec--chaud::after {
		display: none;
	}

	.partego-contact {
		padding: 24px 20px;
	}

	body.single-job_listing .page-header {
		padding: 34px 18px 0;
	}

	body.single-job_listing .page-header h1.entry-title {
		font-size: 28px;
		line-height: 30px;
	}

	body.single-job_listing .single_job_listing ul.job-listing-meta {
		margin: 12px 0 24px;
	}

	/* Sur un écran étroit, le logo n'a pas de place à côté de la ligne de
	   faits : il la précède, et il rétrécit. */
	.partego-logo {
		float: none;
		display: block;
		max-width: 210px;
		max-height: 46px;
		margin: 0 0 14px;
	}
}