.single-emploi {
--sadpad-accent: #0aa8a5;
--sadpad-accent-fonce: #078e8b;
--sadpad-accent-clair: rgba(10, 168, 165, 0.09);
--sadpad-accent-moyen: rgba(10, 168, 165, 0.16);
--sadpad-bordure: #e6e6ec;
--sadpad-texte-clair: #6b6b78;
--sadpad-rayon: 10px;
} .emploi-hero {
padding: 28px 0 24px;
border-bottom: 1px solid var(--sadpad-bordure);
}
.emploi-hero__badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 14px;
}
.emploi-badge {
padding: 4px 12px;
border-radius: 999px;
background: var(--sadpad-accent-clair);
color: var(--sadpad-accent);
font-size: 0.78em;
font-weight: 700;
line-height: 1.6;
text-decoration: none;
}
.emploi-badge--contrat {
background: var(--sadpad-accent-moyen);
}
.emploi-badge--structure,
.emploi-badge--alternance {
background: transparent;
border: 1px solid var(--sadpad-accent-moyen);
}
a.emploi-badge:hover,
a.emploi-badge:focus {
background: var(--sadpad-accent);
color: #fff;
}
.emploi-hero h1 {
margin: 0 0 8px;
line-height: 1.25;
}
.emploi-hero__entreprise {
margin: 0 0 10px;
font-size: 1.05em;
font-weight: 700;
color: var(--sadpad-accent);
}
.emploi-hero__meta {
display: flex;
flex-wrap: wrap;
gap: 6px 18px;
margin: 0;
font-size: 0.9em;
color: var(--sadpad-texte-clair);
} .emploi-colonnes {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 36px;
align-items: start;
padding: 32px 0;
}
.emploi-principal > * + * {
margin-top: 32px;
} .emploi-reperes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
margin: 26px 0 0;
padding: 0;
list-style: none;
background: #f7f8fb;
border-radius: 14px;
overflow: hidden;
}
.emploi-repere {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
margin: 0;
padding: 22px 16px 20px;
text-align: center; box-shadow: inset 1px 0 0 rgba(10, 30, 60, 0.07);
}
.emploi-repere:first-child {
box-shadow: none;
}
.emploi-repere__icone {
display: flex;
align-items: center;
justify-content: center;
height: 30px;
color: var(--sadpad-accent);
}
.emploi-repere small {
font-size: 0.85em;
color: var(--sadpad-texte-clair);
line-height: 1.3;
}
.emploi-repere strong {
font-size: 0.98em;
line-height: 1.35;
} .emploi-description h2,
.emploi-competences h2,
.emploi-postuler h2,
.emploi-similaires h2 {
margin: 0 0 14px;
font-family: raleway;
font-size: 24px !important;
font-weight: bold;
}
.emploi-description p {
line-height: 1.65;
}
.emploi-competences ul {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 8px 20px;
margin: 0;
padding: 0;
list-style: none;
}
.emploi-competences li {
position: relative;
margin: 0;
padding-left: 22px;
line-height: 1.5;
}
.emploi-competences li::before {
content: "";
position: absolute;
top: 0.55em;
left: 4px;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--sadpad-accent);
} .emploi-postuler {
margin: 0 0 32px;
padding: 28px;
background: var(--sadpad-accent-clair);
border-radius: var(--sadpad-rayon);
}
.emploi-btn {
display: inline-block;
padding: 12px 30px;
border: 0;
border-radius: 999px;
background: var(--sadpad-accent);
color: #fff;
font-weight: 700;
text-decoration: none;
}
.emploi-btn:hover,
.emploi-btn:focus {
background: var(--sadpad-accent-fonce);
color: #fff;
}
.emploi-btn--secondaire {
background: #fff;
box-shadow: inset 0 0 0 1px var(--sadpad-accent);
color: var(--sadpad-accent-fonce);
}
.emploi-postuler__boutons {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin: 0;
}
.emploi-postuler__mention {
margin: 10px 0 0;
font-size: 0.85em;
color: var(--sadpad-texte-clair);
} .emploi-candidature {
position: relative;
margin: 28px 0 0;
padding: 24px 0 0;
border-top: 1px solid var(--sadpad-accent-moyen);
scroll-margin-top: 90px;
}
.emploi-candidature h3 {
margin: 0 0 14px;
font-family: raleway;
font-size: 20px;
font-weight: bold;
}
.emploi-candidature form {
max-width: 640px;
}
.emploi-candidature form p {
margin: 0 0 18px;
}
.emploi-candidature label {
display: block;
margin-bottom: 5px;
font-weight: 600;
}
.emploi-candidature input[type="email"],
.emploi-candidature input[type="file"],
.emploi-candidature textarea {
width: 100%;
max-width: 100%;
padding: 9px 12px;
border: 1px solid var(--sadpad-bordure);
border-radius: 6px;
background: #fff;
font: inherit;
}
.emploi-candidature input:focus,
.emploi-candidature textarea:focus {
outline: 2px solid var(--sadpad-accent);
outline-offset: 1px;
}
.emploi-candidature__aide {
display: block;
margin-top: 4px;
font-size: 0.85em;
color: var(--sadpad-texte-clair);
}
.emploi-candidature form .emploi-candidature__actions {
margin-bottom: 0;
}
.emploi-candidature .emploi-btn {
cursor: pointer;
}
.emploi-candidature__piege {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.emploi-candidature__message {
margin: 0 0 20px;
padding: 12px 16px;
border: 1px solid;
border-radius: var(--sadpad-rayon);
font-weight: 600;
}
.emploi-candidature__message--succes {
background: var(--sadpad-accent-clair);
border-color: var(--sadpad-accent-moyen);
color: #1c7c4a;
}
.emploi-candidature__message--erreur {
background: rgba(179, 38, 30, 0.07);
border-color: rgba(179, 38, 30, 0.22);
color: #b3261e;
} .emploi-lateral > * + * {
margin-top: 20px;
}
.emploi-encart {
padding: 22px;
border: 1px solid var(--sadpad-bordure);
border-radius: var(--sadpad-rayon);
background: #fff;
}
.emploi-encart h3 {
margin: 0 0 14px;
font-size: 1.02em;
}
.emploi-encart--cta {
background: var(--sadpad-accent-clair);
border-color: var(--sadpad-accent-moyen);
text-align: center;
}
.emploi-encart--source {
font-size: 0.9em;
color: var(--sadpad-texte-clair);
}
.emploi-encart--source p {
margin: 0;
line-height: 1.55;
}
.emploi-fiche {
margin: 0;
}
.emploi-fiche dt {
margin: 0;
font-size: 0.78em;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--sadpad-texte-clair);
}
.emploi-fiche dd {
margin: 3px 0 14px;
line-height: 1.45;
}
.emploi-fiche dd:last-child {
margin-bottom: 0;
} .emploi-recruteur {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px 24px;
margin: 0 0 36px;
padding: 24px 28px;
border: 1px solid var(--sadpad-accent-moyen);
border-radius: var(--sadpad-rayon);
background: var(--sadpad-accent-clair);
}
.emploi-recruteur__texte {
margin: 0;
font-family: raleway;
font-size: 22px;
font-weight: bold;
line-height: 1.3;
} .emploi-similaires {
padding: 8px 0 40px;
} @media (max-width: 900px) {
.emploi-colonnes {
grid-template-columns: minmax(0, 1fr);
gap: 28px;
}
}