/* ==========================================================================
   Pages de service (second agent) : SAV, FAQ, Livraison, Recrutement, Emploi, Contact.
   Chargé après projet.css. Composants de ~/build/service.php.
   ========================================================================== */

/* ==========================================================================
   Décors de fond (forme rouge et grise de Notre Histoire, opacité 5 % dans le SVG), derrière le contenu et coupés par
   le bord de l'écran (html { overflow-x: hidden }). Positions de la maquette (frame de 1512 px centrée).
   ========================================================================== */
.pb-fond-deco {
	position: relative;
}

.pb-fond-deco::after {
	content: "";
	position: absolute;
	z-index: -1;
	width: 836px;
	height: 752px;
	background: url("/img/cms/socma/notre-histoire/decor-fond-histoire.svg") center / contain no-repeat;
	pointer-events: none;
}

.pb-fond-deco--droite::after {
	top: -160px;
	left: calc(50% + 197px);
	right: 0;
	width: auto;
	background-size: 836px auto;
	background-position: left top;
}

.pb-fond-deco--faq::after {
	top: 453px;
	left: calc(50% - 682px);
}

.pb-fond-deco--gauche-haut::after {
	top: 13px;
	left: 0;
	width: calc(50% - 39px);
	background-size: 836px auto;
	background-position: right top;
}

.pb-fond-deco--contact::after {
	top: -113px;
	left: 0;
	width: calc(50% - 20px);
	background-size: 836px auto;
	background-position: right top;
}

.pb-fond-deco--recrutement-haut::after {
	top: 26px;
	left: calc(50% - 80px);
	right: 0;
	width: auto;
	background-size: 836px auto;
	background-position: left top;
}

.pb-fond-deco--recrutement-bas::after {
	top: -212px;
	left: 0;
	width: calc(50% - 27px);
	background-size: 836px auto;
	background-position: right top;
}

.pb-fond-deco--emploi-haut::after {
	top: 36px;
	left: calc(50% - 59px);
	right: 0;
	width: auto;
	background-size: 836px auto;
	background-position: left top;
}

.pb-fond-deco--emploi-bas::after {
	top: -17px;
	left: 0;
	width: calc(50% + 19px);
	background-size: 836px auto;
	background-position: right top;
}

.pb-fond-deco--gauche::after {
	top: 60px;
	left: 0;
	width: calc(50% - 24px);
	background-size: 836px auto;
	background-position: right top;
}

@media (max-width: 1024px) {
	.pb-fond-deco::after {
		height: 504px;
		background-size: 560px auto;
	}

	.pb-fond-deco--droite::after,
	.pb-fond-deco--recrutement-haut::after,
	.pb-fond-deco--emploi-haut::after {
		top: -80px;
		left: 45%;
	}

	.pb-fond-deco--gauche::after,
	.pb-fond-deco--gauche-haut::after,
	.pb-fond-deco--contact::after,
	.pb-fond-deco--recrutement-bas::after,
	.pb-fond-deco--emploi-bas::after {
		width: 55%;
	}

	.pb-fond-deco--faq::after {
		top: auto;
		bottom: -240px;
		left: -120px;
	}
}

@media (max-width: 767px) {
	.pb-fond-deco::after {
		height: 342px;
		background-size: 380px auto;
	}
}

/* Groupe insécable (nombre et son unité, « plus de 16 000 »). */
.pb-insecable {
	white-space: nowrap;
}

/* ==========================================================================
   Photo arrondie haut-gauche / bas-droite (photo_coins) : image en cover sur toute la colonne.
   ========================================================================== */
.pb-photo-coins img {
	display: block;
	width: 100%;
	object-fit: cover;
}

/* ==========================================================================
   Liste à pastilles rouges (modes de livraison) : icône blanche dans un carré rouge de 18 px, rayon 4.
   ========================================================================== */
.pb-liste-pastilles .elementor-icon-list-item {
	align-items: flex-start;
}

/* padding: 0 : CE pose un padding-right de 9 px sur l'icône, le picto était collé à gauche et coupé. */
.pb-liste-pastilles .elementor-icon-list-icon {
	padding: 0 !important;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	border-radius: 4px;
	background-color: var(--pb-accent);
	color: #fff;
}

.pb-liste-pastilles .elementor-icon-list-icon svg {
	width: 10px;
	height: auto;
	max-height: 10px;
	fill: currentColor;
}

.pb-liste-pastilles .elementor-icon-list-text {
	padding-inline-start: 9px !important;
}

.pb-liste-pastilles .elementor-icon-list-text strong {
	font-weight: 700;
}

/* ==========================================================================
   Tableau en lignes-cartes (délais de livraison) : une carte blanche par ligne, bordure noire, rayon 10.
   ========================================================================== */
.pb-tableau .pb-tableau-lignes {
	width: 100%;
	margin: 0;
	border: 0;
}

.pb-tableau .pb-tableau-lignes tbody {
	display: flex;
	flex-direction: column;
	gap: 17px;
}

.pb-tableau .pb-tableau-lignes tr {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
	min-height: 71px;
	padding: 12px 30px 12px 28px;
	border: 1px solid #000;
	border-radius: 10px;
	background-color: #fff;
}

.pb-tableau .pb-tableau-lignes :is(th, td) {
	padding: 0;
	border: 0;
	background: none;
	font-family: "Amiko", sans-serif;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
}

.pb-tableau .pb-tableau-lignes th {
	text-align: left;
	color: #000;
}

.pb-tableau .pb-tableau-lignes td {
	text-align: right;
	color: var(--pb-accent);
}

.pb-tableau p:empty {
	display: none;
}

@media (max-width: 767px) {
	.pb-tableau .pb-tableau-lignes tr {
		flex-direction: column;
		align-items: flex-start;
		padding: 16px 20px;
	}

	.pb-tableau .pb-tableau-lignes td {
		text-align: left;
	}
}

/* ==========================================================================
   Carte de France des zones d'intervention (carte_france) : pastilles d'agences et pins posés en % de la carte.
   Desktop : la carte déborde du contenu à gauche (maquette : x = -6 dans la page de 1512 px).
   ========================================================================== */
.pb-carte-france {
	position: relative;
	container-type: inline-size;
	width: 730px;
	max-width: 100%;
	aspect-ratio: 729.7 / 737.6;
}

.pb-carte-france img {
	display: block;
	max-width: none;
}

.pb-carte-france__fond {
	width: 100%;
	height: auto;
}

.pb-carte-france__ad {
	position: absolute;
	left: 67.95%;
	top: 65.16%;
	width: 15.91%;
	height: auto;
}

.pb-carte-france__repere {
	position: absolute;
	z-index: auto;
	width: 3.69%;
	transform: translateX(-50%);
}

.pb-carte-france__pin {
	position: relative;
	z-index: 3;
	width: 100%;
	height: auto;
}

.pb-carte-france__agence {
	position: absolute;
	left: 50%;
	bottom: calc(100% + .55cqi);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: .3em;
	padding: .6em .9em .6em 1em;
	border-radius: 8px;
	background-color: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
	transform: translateX(-50%);
	font-family: "Amiko", sans-serif;
	font-weight: 700;
	font-size: max(.875rem, 1.92cqi);
	line-height: 1;
	white-space: nowrap;
	color: #000;
}

.pb-carte-france__agence img {
	width: 1.1em;
	height: auto;
}

/* Mobile : pastilles proches les unes des autres sur une carte de 350 px, texte gardé à 12 px, picto retiré. */
@media (max-width: 767px) {
	.pb-carte-france__agence {
		padding: .4em .55em;
		border-radius: 6px;
	}

	.pb-carte-france__agence img {
		display: none;
	}
}

@media (min-width: 1025px) {
	.pb-col-carte .pb-carte-france {
		margin-left: calc(-1 * min(69px, max(0px, (100vw - 1386px) / 2 + 6px)));
	}
}

@media (max-width: 1024px) {
	.pb-carte-france {
		width: 620px;
		margin-inline: auto;
	}
}

/* ==========================================================================
   Liste des agences (miniature « Carte agence (liste) ») : pin rouge devant le nom, adresse, ligne vide, horaires.
   Les agences n'ont pas de page : le lien étiré de la carte (logia_blog) est retiré.
   ========================================================================== */
.pb-liste-agences .logia-blog-card-link {
	display: none;
}

.pb-liste-agences .logia-blog-widget-grid {
	gap: 25px;
}

.pb-agence-nom .logia-blog-title {
	position: relative;
	margin: 0;
	padding-inline-start: 17.4px;
	font-family: "Amiko", sans-serif;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.25;
	text-transform: none;
	color: var(--pb-accent);
}

.pb-agence-nom .logia-blog-title::before {
	content: "";
	position: absolute;
	left: 0;
	top: .1em;
	width: 12.4px;
	height: 16.4px;
	background-color: currentColor;
	-webkit-mask: url("/img/cms/socma/commun/footer-icone-adresse.svg") center / contain no-repeat;
	mask: url("/img/cms/socma/commun/footer-icone-adresse.svg") center / contain no-repeat;
}

.pb-agence-adresse,
.pb-agence-horaires {
	padding-inline-start: 17.4px;
}

.pb-agence-adresse p,
.pb-agence-horaires p {
	margin: 0;
	font-family: "Amiko", sans-serif;
	font-size: 1rem;
	line-height: 1.25;
	color: #000;
}

.pb-agence-horaires {
	margin-top: 10px;
}

/* ==========================================================================
   Page FAQ : onglets de thèmes à gauche (accordéon logia_blog, onglets par catégorie). Même taille de police actif et
   repos (pas de décalage des voisins) ; onglets de repos en rouge plein (la maquette les estompe à 50 %, illisible).
   ========================================================================== */
.pb-faq-onglets .logia-blog-accordion--tabs {
	align-items: start;
}

.pb-faq-onglets .logia-blog-accordion .logia-blog-accordion__tab {
	display: flex;
	align-items: center;
	min-height: 71px;
	padding: 12px 20px 12px 28px;
	border: 1px solid rgba(64, 64, 63, .5);
	border-radius: 10px;
	background-color: #fff;
	color: var(--pb-accent);
	font-family: "Oxanium", sans-serif;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.25;
}

.pb-faq-onglets .logia-blog-accordion .logia-blog-accordion__tab:is(:hover, :focus-visible) {
	border-color: var(--pb-accent);
}

/* Survol d'un onglet de repos : fond rouge très léger en plus de la bordure (la bordure seule se voyait à peine). */
.pb-faq-onglets .logia-blog-accordion .logia-blog-accordion__tab:not(.is-active):is(:hover, :focus-visible) {
	background-color: rgba(234, 35, 40, .06);
}

.pb-faq-onglets .logia-blog-accordion .logia-blog-accordion__tab.is-active {
	border-color: var(--pb-gris-fonce);
	background-color: var(--pb-accent);
	color: var(--pb-gris-clair);
}

@media (max-width: 767px) {
	.pb-faq-onglets .logia-blog-accordion--tabs {
		row-gap: 24px;
	}

	.pb-faq-onglets .logia-blog-accordion__tabs {
		gap: 8px;
		margin-inline: -20px;
		padding: 0 20px 4px;
		scroll-padding-inline: 20px;
		-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
		mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
	}

	.pb-faq-onglets .logia-blog-accordion .logia-blog-accordion__tab {
		min-height: 44px;
		padding: 10px 18px;
		border-radius: 100px;
		font-size: 1rem;
	}
}

/* Tablette : la colonne d'onglets serait trop étroite (libellés sur 2 lignes, accordéon écrasé) : pastilles au-dessus
   de l'accordéon (logia-blog.css ne le fait que sous 768 px). */
@media (min-width: 768px) and (max-width: 1024px) {
	.pb-faq-onglets .logia-blog-accordion--tabs {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 24px;
	}

	/* Navigation principale de la page : les 5 thèmes visibles d'un coup (2 rangées), le défilement reste en mobile. */
	.pb-faq-onglets .logia-blog-accordion__tabs {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 8px;
	}

	.pb-faq-onglets .logia-blog-accordion__tabs::-webkit-scrollbar {
		display: none;
	}

	.pb-faq-onglets .logia-blog-accordion .logia-blog-accordion__tab {
		flex: 0 0 auto;
		width: auto;
		min-height: 44px;
		padding: 10px 18px;
		border-radius: 100px;
		white-space: nowrap;
		scroll-snap-align: start;
	}
}

/* ==========================================================================
   Étapes numérotées reliées par une frise verticale (etapes(), page SAV) : pastille rouge 23 px (coins haut-gauche et
   bas-droite arrondis), trait #40403F à 25 % qui relie les pastilles jusqu'au bas du bloc.
   ========================================================================== */
.pb-etapes-widget .pb-etapes {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 33px;
	margin: 0;
	padding: 0 0 0 33px;
	list-style: none;
	counter-reset: pb-etape;
}

.pb-etapes::before {
	content: "";
	position: absolute;
	left: 11px;
	top: 12px;
	bottom: 0;
	width: 2px;
	background-color: rgba(64, 64, 63, .25);
}

.pb-etapes li {
	position: relative;
	counter-increment: pb-etape;
}

.pb-etapes li::before {
	content: counter(pb-etape) ".";
	position: absolute;
	left: -33px;
	top: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 23px;
	height: 23px;
	border-radius: 5.75px 0;
	background-color: var(--pb-accent);
	color: #fff;
	font-family: "Oxanium", sans-serif;
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1;
}

.pb-etapes h3 {
	margin: 0 0 5px;
	font-family: "Oxanium", sans-serif;
	font-size: 2.0625rem;
	font-weight: 700;
	line-height: 1.375;
	letter-spacing: -.02em;
	text-transform: none;
	color: var(--pb-gris-fonce);
}

.pb-etapes p {
	max-width: 697px;
	margin: 0;
	font-size: 1rem;
	line-height: 1.3;
}

@media (max-width: 767px) {
	.pb-etapes {
		gap: 24px;
	}

	.pb-etapes h3 {
		font-size: 1.625rem;
	}

	.pb-etapes li::before {
		top: 6px;
	}
}

/* Photo de l'intro SAV : cadrage de la maquette (homme de face à gauche). */
.pb-photo-sav img {
	object-position: 59% 50%;
}

/* Cartes d'infos (cartes_infos(), SAV) : pictos monochromes en rouge (currentColor) à tous les paliers. */
.pb-cartes-infos .elementor-icon,
.pb-cartes-infos .elementor-icon svg {
	color: var(--pb-accent);
	fill: currentColor;
}

@media (max-width: 1024px) {
	.pb-cartes-infos.pb-scroll-tablette > .elementor-container > .elementor-row > .elementor-column > .elementor-column-wrap {
		height: 100%;
		padding: 0;
	}

	.pb-cartes-infos .elementor-widget-icon-box,
	.pb-cartes-infos .elementor-widget-icon-box > .elementor-widget-container {
		height: 100%;
	}
}

/* ==========================================================================
   Formulaires des pages de service (formulaire()) : champs blancs à bordure grise, coin décoratif de 24 px sur le
   premier champ (haut-gauche) et sur le message (bas-gauche), bouton d'envoi arrondi en bas (maquette Contact).
   Libellés flottants et champ fichier : socle.
   ========================================================================== */
.pb-formulaire {
	--pb-form-etiquette-gauche: 8px;
	--pb-form-demi-gouttiere: 6px;
	--pb-form-rayon-fichier: 0 0 24px 24px;
}

.pb-formulaire .elementor-field-group:not(.elementor-field-type-upload) .elementor-field-textual {
	min-height: 48px;
	padding: 12px 16px;
	border: 1px solid rgba(64, 64, 63, .5);
	border-radius: 0;
	background-color: #fff;
	font-family: "Oxanium", sans-serif;
	font-size: 1rem;
	color: #000;
	transition: border-color .2s ease;
}

.pb-formulaire .elementor-field-textual::placeholder {
	color: rgba(0, 0, 0, .55);
	opacity: 1;
}

.pb-formulaire .elementor-field-textual:focus {
	border-color: var(--pb-accent);
	outline: 0;
}

.pb-formulaire .elementor-field-group:first-child .elementor-field-textual {
	border-top-left-radius: 24px;
}

/* Pas de poignée de redimensionnement : elle se poserait sur le coin arrondi de la maquette. */
.pb-formulaire .elementor-field-type-textarea textarea {
	border-bottom-left-radius: 24px !important;
	resize: none;
}

/* Photos à coins arrondis pleine largeur en tablette (cadre bien plus large que haut) : cadrage remonté pour garder les
   visages (groupes de personnes photographiés en pied). */
@media (max-width: 1024px) {
	.pb-photo-coins img {
		object-position: 50% 20%;
	}
}

/* Candidature spontanée (Recrutement) : coin arrondi du message en bas à droite (maquette 10) ; en bas à gauche sur la
   fiche d'une offre (maquette 11) et le contact. */
.pb-formulaire--candidature:not(.pb-formulaire--offre) .elementor-field-type-textarea textarea {
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 24px !important;
}

/* Libellés flottants en Oxanium, comme le texte saisi (maquettes 10, 11, 15). */
.pb-formulaire .elementor-field-group:has(.elementor-field-textual) > .elementor-field-label {
	font-family: "Oxanium", sans-serif;
}

/* Case RGPD : texte courant à 1rem (règle de l'agence), noir comme les paragraphes ; lien en rouge foncé du Kit
   (#EA2328 sur #F4F4F4 : 3,9:1). */
.pb-formulaire .elementor-field-type-acceptance a {
	color: var(--pb-accent-survol);
}

.pb-formulaire .elementor-field-type-acceptance a:is(:hover, :focus-visible) {
	color: var(--pb-accent);
}

.pb-formulaire .elementor-field-type-acceptance,
.pb-formulaire .elementor-field-type-acceptance label {
	color: #000;
	font-size: 1rem;
	line-height: 1.4;
}

.pb-formulaire .e-form__buttons .elementor-button {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 12px 20px;
	border: 1px solid var(--pb-accent);
	border-radius: 0 0 24px 24px;
	background-color: var(--pb-accent);
	color: #fff;
	font-family: "Oxanium", sans-serif;
	font-size: 1rem;
	font-weight: 700;
	text-transform: none;
	transition: background-color .3s ease, color .3s ease, transform .25s ease, box-shadow .25s ease;
}

.pb-formulaire .e-form__buttons .elementor-button:is(:hover, :focus-visible) {
	background-color: #fff;
	color: var(--pb-accent);
	transform: translateY(-2px);
	box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .35);
}

.pb-formulaire .e-form__buttons .elementor-button-icon :is(svg, i) {
	width: 16px;
	height: auto;
	font-size: 1rem;
	fill: currentColor;
}

@media (prefers-reduced-motion: reduce) {
	.pb-formulaire .e-form__buttons .elementor-button:is(:hover, :focus-visible) {
		transform: none;
	}
}

/* Coordonnées de la page Contact : liens tel: et mailto:, pictos rouges. */
.pb-coordonnees .elementor-icon-list-icon {
	color: var(--pb-accent);
}

.pb-coordonnees .elementor-icon-list-icon svg {
	width: 19px;
	height: auto;
	fill: currentColor;
}

/* ==========================================================================
   Onglets d'agences (onglets_agences(), page Contact) : pastilles centrées avec le S de Socma, carte Google Maps en
   dessous (coins haut-gauche et bas-droite arrondis). Les pastilles restent en ligne en mobile (pas d'accordéon).
   ========================================================================== */
.pb-onglets-agences .elementor-tabs-wrapper {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 15px;
}

.pb-onglets-agences .elementor-tab-mobile-title {
	display: none !important;
}

.pb-onglets-agences .elementor-tab-desktop-title {
	display: inline-flex !important;
	align-items: center;
	min-height: 36px;
	padding: 8px 14px 8px 12px;
	border: 0 !important;
	border-radius: 8px;
	background-color: #fff;
	color: #000;
	font-family: "Amiko", sans-serif;
	font-size: .875rem;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease;
}

.pb-onglets-agences .elementor-tab-desktop-title::before,
.pb-onglets-agences .elementor-tab-desktop-title::after {
	display: none !important;
}

.pb-onglets-agences .pb-onglet-agence::before {
	content: "";
	display: inline-block;
	width: 15px;
	height: 13px;
	margin-inline-end: 5px;
	vertical-align: -2px;
	background: url("/img/cms/socma/contact/agence-onglet-icone.svg") center / contain no-repeat;
}

.pb-onglets-agences .elementor-tab-desktop-title:is(:hover, :focus-visible) {
	color: var(--pb-accent);
}

.pb-onglets-agences .elementor-tab-desktop-title.elementor-active {
	background-color: var(--pb-accent);
	color: #fff;
}

.pb-onglets-agences .elementor-tab-desktop-title.elementor-active .pb-onglet-agence::before {
	background-image: url("/img/cms/socma/contact/agence-onglet-icone-actif.svg");
}

.pb-onglets-agences .elementor-tabs-content-wrapper {
	margin-top: 33px;
	border: 0 !important;
}

.pb-onglets-agences .elementor-tab-content {
	padding: 0 !important;
	border: 0 !important;
}

.pb-onglets-agences .pb-carte-google {
	display: block;
	width: 100%;
	height: 428px;
	border: 0;
	border-radius: 30px 0;
}

@media (max-width: 1024px) {
	.pb-onglets-agences .pb-carte-google {
		height: 380px;
	}
}

@media (max-width: 767px) {
	/* Les 3 pastilles ne tiennent pas sur 350 px : une ligne qui défile de côté (comme les onglets de la FAQ). */
	.pb-onglets-agences .elementor-tabs-wrapper {
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 8px;
		margin-inline: -20px;
		padding: 0 20px 4px;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
		mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
	}

	.pb-onglets-agences .elementor-tabs-wrapper::-webkit-scrollbar {
		display: none;
	}

	.pb-onglets-agences .elementor-tab-desktop-title {
		flex: 0 0 auto;
		white-space: nowrap;
	}

	.pb-onglets-agences .elementor-tabs-content-wrapper {
		margin-top: 24px;
	}

	.pb-onglets-agences .pb-carte-google {
		height: 320px;
		border-radius: 20px 0;
	}
}

/* ==========================================================================
   Pages du module logia_blog (listing et fiche des offres d'emploi) : rendues dans la mise en page du thème classic
   (conteneur de 1440 px). Le modèle s'étend sur toute la largeur, comme les pages CMS (classe pb-pleine-largeur sur la
   1re section ; pb-sans-titre-theme masque le fil d'Ariane du thème, socle).
   ========================================================================== */
#wrapper:has(.pb-pleine-largeur) {
	padding-top: 0;
}

#wrapper:has(.pb-pleine-largeur) > .container {
	width: 100%;
	max-width: none;
	padding-inline: 0;
}

#wrapper:has(.pb-pleine-largeur) > .container > .row {
	margin-inline: 0;
}

#wrapper:has(.pb-pleine-largeur) #content-wrapper {
	padding-inline: 0;
}

#wrapper:has(.pb-pleine-largeur) #main .page-footer {
	display: none;
}

/* ==========================================================================
   Offres d'emploi : ligne de la liste (miniature « Ligne offre d'emploi »), méta (valise + contrat, épingle + lieu),
   bouton « Voir l'offre » (widget Lire la suite de logia_blog, stylé comme les boutons rouges du site).
   ========================================================================== */
.pb-liste-offres .logia-blog-widget-grid {
	gap: 13px;
}

.pb-ligne-offre {
	min-height: 113px;
	border: 1px solid #000;
	border-radius: 10px;
	background-color: #fff;
	transition: box-shadow .25s ease;
}

.pb-liste-offres .logia-blog-widget-card:hover .pb-ligne-offre {
	box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .25);
}

.pb-ligne-offre-titre .logia-blog-title {
	margin: 0 0 14px;
	font-family: "Amiko", sans-serif;
	font-size: 1.5625rem;
	font-weight: 600;
	line-height: 1.1;
	text-transform: none;
	color: #000;
}

.pb-liste-offres .logia-blog-widget-card:hover .pb-ligne-offre-titre .logia-blog-title {
	color: var(--pb-accent);
}

.pb-offre-meta :is(span, p, div) {
	margin: 0;
	font-family: "Oxanium", sans-serif;
	font-size: 1rem;
	line-height: 1.25;
	color: #000;
}

.pb-offre-contrat .elementor-widget-container::before,
.pb-offre-lieu .elementor-widget-container::before {
	content: "";
	display: inline-block;
	margin-inline-end: 10px;
	vertical-align: -2px;
	background-color: var(--pb-accent);
}

.pb-offre-contrat .elementor-widget-container::before {
	width: 16px;
	height: 14.3px;
	-webkit-mask: url("/img/cms/socma/recrutement/icone-offre-valise.svg") center / contain no-repeat;
	mask: url("/img/cms/socma/recrutement/icone-offre-valise.svg") center / contain no-repeat;
}

.pb-offre-lieu {
	margin-inline-start: 31px;
}

.pb-offre-lieu .elementor-widget-container::before {
	width: 16px;
	height: 16.4px;
	-webkit-mask: url("/img/cms/socma/commun/footer-icone-adresse.svg") center / contain no-repeat;
	mask: url("/img/cms/socma/commun/footer-icone-adresse.svg") center / contain no-repeat;
}

.pb-ligne-offre-bouton .logia-blog-read-more {
	padding: 12px 20px !important;
	display: inline-flex !important;
	align-items: center;
	min-height: 48px;
	padding: 12px 20px;
	border: 1px solid var(--pb-accent) !important;
	border-radius: 300px !important;
	background-color: var(--pb-accent) !important;
	color: #fff !important;
	font-family: "Oxanium", sans-serif;
	font-size: .875rem;
	font-weight: 700;
	white-space: nowrap;
	transition: background-color .3s ease, color .3s ease, transform .25s ease, box-shadow .25s ease !important;
}

.pb-ligne-offre-bouton .logia-blog-read-more:is(:hover, :focus-visible),
.pb-liste-offres .logia-blog-widget-card:hover .pb-ligne-offre-bouton .logia-blog-read-more {
	background-color: #fff !important;
	color: var(--pb-accent) !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .35);
}

@media (max-width: 1024px) {
	.pb-ligne-offre-titre .logia-blog-title {
		font-size: 1.375rem;
	}
}

@media (max-width: 767px) {
	.pb-ligne-offre-titre .logia-blog-title {
		font-size: 1.25rem;
	}

	.pb-ligne-offre-action {
		margin-top: 16px;
	}

	.pb-ligne-offre-bouton .logia-blog-read-more-wrapper {
		text-align: left !important;
	}

	.pb-offre-lieu {
		margin-inline-start: 0;
		width: 100%;
		margin-top: 6px;
	}
}

/* ==========================================================================
   Fiche d'une offre : fil d'Ariane (Recrutement › titre), titre centré, intertitres, listes à puces cibles rouges.
   Un bloc dont le champ est vide est masqué avec son intertitre.
   ========================================================================== */
.pb-ariane > .elementor-container > .elementor-row > .elementor-column > .elementor-column-wrap > .elementor-widget-wrap {
	align-items: center;
	gap: 6px;
}

.pb-ariane-lien .elementor-heading-title,
.pb-ariane-courant .logia-blog-title {
	margin: 0;
	font-family: "Amiko", sans-serif;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.3;
	text-transform: none;
}

.pb-ariane-lien .elementor-heading-title a {
	color: var(--pb-gris-fonce);
	transition: color .2s ease;
}

.pb-ariane-lien .elementor-heading-title a:is(:hover, :focus-visible) {
	color: var(--pb-accent);
}

.pb-ariane-courant .logia-blog-title {
	color: var(--pb-accent);
}

/* Chevron entre les niveaux : celui des liens (.pb-ariane-lien ::after, editorial.css), commun aux fils d'Ariane du blog. */

.pb-offre-titre .logia-blog-title {
	max-width: 952px;
	margin: 0 auto;
	font-family: "Oxanium", sans-serif;
	font-size: 3.125rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -1px;
	text-align: center;
	text-transform: none;
	color: #000;
}


.pb-offre-meta-ligne {
	margin-top: 10px;
}

@media (max-width: 1024px) {
	.pb-offre-titre .logia-blog-title {
		font-size: 2.5rem;
	}
}

@media (max-width: 767px) {
	.pb-offre-titre .logia-blog-title {
		font-size: 2rem;
	}

	.pb-offre-meta-ligne .pb-offre-lieu {
		text-align: center;
	}
}

.pb-offre-intertitre .elementor-heading-title {
	font-size: 2.5rem;
	line-height: 1;
	letter-spacing: -.8px;
}

@media (max-width: 767px) {
	.pb-offre-intertitre .elementor-heading-title {
		font-size: 1.75rem;
	}
}

.pb-offre-texte,
.pb-offre-texte p,
.pb-offre-texte li {
	font-family: "Amiko", sans-serif;
	font-size: 1rem;
	line-height: 1.3;
	color: #000;
}

.pb-offre-texte p {
	margin: 0 0 1.3em;
}

.pb-offre-texte p:last-child {
	margin-bottom: 0;
}

.pb-offre-liste ul {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pb-offre-liste ul + ul {
	margin-top: 20px;
}

.pb-offre-liste li {
	position: relative;
	padding-inline-start: 17px;
}

.pb-offre-liste li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .25em;
	width: 12px;
	height: 12px;
	background-color: var(--pb-accent);
	-webkit-mask: url("/img/cms/socma/emploi/puce-liste-cible.svg") center / contain no-repeat;
	mask: url("/img/cms/socma/emploi/puce-liste-cible.svg") center / contain no-repeat;
}

/* Creative Elements ne rend pas un widget sans contenu : le bloc ne garde alors que son intertitre. */
.pb-offre-bloc:not(:has(.pb-offre-texte)) {
	display: none;
}

/* Formulaire de candidature : champs sur fond de page dans le panneau blanc (Recrutement), bouton fichier gris foncé. */
.pb-formulaire--gris .elementor-field-group:not(.elementor-field-type-upload) .elementor-field-textual {
	background-color: var(--pb-fond);
}

.pb-formulaire--candidature {
	--pb-form-accent-fichier: var(--pb-gris-fonce);
}

.pb-formulaire--candidature .elementor-field-type-upload {
	--pb-form-accent: var(--pb-gris-fonce);
	--pb-form-accent-survol: #000;
}

/* H1 d'une page sans bandeau (Contact) au style des titres de section (H2 du Kit, 50/55, 40 et 32 px), à tous les
   paliers ; body : plus fort que l'interligne des H1 du Kit (projet.css). */
body .pb-titre-h2 h1.elementor-heading-title {
	font-size: 3.125rem;
	line-height: 1.1;
	letter-spacing: -1px;
}

@media (max-width: 1024px) {
	body .pb-titre-h2 h1.elementor-heading-title {
		font-size: 2.5rem;
	}
}

@media (max-width: 767px) {
	body .pb-titre-h2 h1.elementor-heading-title {
		font-size: 2rem;
	}
}