.s4-cpt-page-header {
position: relative;
background-color: #2c2c2c;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.s4-cpt-single .s4-cpt-page-header {
margin-bottom: max(3vw,30px);
}
.s4-cpt-page-header__overlay {
position: absolute;
inset: 0;
z-index: 0;
}
.s4-cpt-page-header__inner {
position: relative;
z-index: 1;
max-width: 1200px;
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
}
.s4-cpt-page-header__title {
margin: 0;
font-size: 2.5rem;
font-weight: 700;
line-height: 1.2;
color: inherit;
}
.s4-cpt-page-header__term {
margin: 0.25rem 0 0;
font-size: 1.25rem;
font-weight: 400;
opacity: 0.85;
color: inherit;
}
.s4-cpt-page-header__subtitle {
margin: 0.5rem 0 0;
font-size: 1.0625rem;
font-weight: 400;
opacity: 0.8;
color: inherit;
}
.s4-cpt-page-header__breadcrumbs {
margin-bottom: 0.75rem;
font-size: 0.875rem;
opacity: 0.85;
color: inherit;
}
.s4-cpt-page-header__breadcrumbs a {
color: inherit;
opacity: 0.8;
}
@media (max-width: 767px) {
.s4-cpt-page-header__title {
font-size: 1.75rem;
}
.s4-cpt-page-header__term {
font-size: 1rem;
}
}.s4-cpt-grid {
list-style: none;
margin: 30px 0;
position: relative;
transition: filter 0.3s ease;
gap: 30px 0;
}
.s4-cpt-grid--loading {
filter: blur(2px);
pointer-events: none;
}
.s4-cpt-grid__item {
padding: 0;
box-sizing: border-box;
} .s4-cpt-taxonomy-nav {
padding: 1rem 0;
}
.s4-cpt-taxonomy-nav ul {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0;
padding: 0;
}
.s4-cpt-taxonomy-nav a {
display: inline-block;
padding: 6px 16px;
text-decoration: none;
background: #f0f0f0;
border-radius: 100px;
font-size: 0.875rem;
color: #333;
transition: background-color 0.2s ease, color 0.2s ease;
}
.s4-cpt-taxonomy-nav a:hover,
.s4-cpt-taxonomy-nav a.active {
background: #333;
color: #fff;
} .s4-cpt-search {
padding: 1rem 0;
}
.s4-cpt-search__input {
width: 100%;
max-width: 480px;
padding: 10px 16px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 0.9375rem;
outline: none;
transition: border-color 0.2s;
}
.s4-cpt-search__input:focus {
border-color: #333;
}
.s4-cpt-search--loading {
filter: blur(2px);
pointer-events: none;
transition: filter 0.3s ease;
}
.s4-cpt-search--hidden {
display: none !important;
}
.s4-cpt-search-no-results {
text-align: center;
padding: 2rem 0;
color: #888;
font-size: 1rem;
}
.s4-cpt-search-loading-overlay {
display: none;
justify-content: center;
align-items: center;
padding: 2rem 0;
}
.s4-cpt-search-loading-overlay--active {
display: flex;
} .s4-cpt-no-results {
text-align: center;
padding: 3rem 0;
color: #888;
font-size: 1rem;
} .s4-cpt-loadmore-sentinel {
width: 100%;
min-height: 1px;
display: flex;
justify-content: center;
padding: 1rem 0;
position: relative;
}
.s4-cpt-loadmore-overlay {
display: none;
position: absolute;
bottom: 100%;
left: 0;
right: 0;
height: 120px;
justify-content: center;
align-items: center;
pointer-events: none;
z-index: 10;
}
.s4-cpt-loadmore-overlay--active {
display: flex;
}
.s4-cpt-loadmore-loader {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding: 1rem 0;
}
.s4-cpt-spinner {
display: inline-block;
width: 36px;
height: 36px;
border: 3px solid rgba(0, 0, 0, 0.1);
border-top-color: currentColor;
border-radius: 50%;
animation: s4-cpt-spin 0.6s linear infinite;
}
@keyframes s4-cpt-spin {
to {
transform: rotate(360deg);
}
} .s4-cpt-recrutement-filters {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: flex-end;
padding: 1rem 0;
}
.s4-cpt-recrutement-filters__field {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 160px;
flex: 1;
max-width: 260px;
}
.s4-cpt-recrutement-filters__label {
font-size: 0.8125rem;
font-weight: 600;
color: #333;
}
.s4-cpt-recrutement-filters__select {
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 0.875rem;
background: #fff;
cursor: pointer;
}
.s4-cpt-recrutement-filters__reset {
padding: 8px 16px;
border: 1px solid #ddd;
border-radius: 6px;
background: #f5f5f5;
font-size: 0.875rem;
cursor: pointer;
transition: background 0.2s;
align-self: flex-end;
}
.s4-cpt-recrutement-filters__reset:hover {
background: #e0e0e0;
}.s4-cpt-card {
position: relative;
overflow: hidden;
background: #fff;
border-radius: 8px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
transition: box-shadow 0.25s ease, transform 0.25s ease;
height: 100%;
display: flex;
flex-direction: column;
}
.s4-cpt-card:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
} .s4-cpt-card--no-shadow {
box-shadow: none;
}
.s4-cpt-card--no-shadow:hover {
box-shadow: none;
} .s4-cpt-card--no-radius {
border-radius: 0;
}
.s4-cpt-card__link {
display: flex;
flex-direction: column;
height: 100%;
text-decoration: none;
color: inherit;
}
.s4-cpt-card__thumbnail {
position: relative;
overflow: hidden;
aspect-ratio: 16 / 10;
flex-shrink: 0;
} .s4-cpt-grid__item--full .s4-cpt-card:not(.s4-cpt-card--overlay) .s4-cpt-card__thumbnail {
aspect-ratio: 5;
}
.s4-cpt-card__thumbnail img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.35s ease;
}
.s4-cpt-card:hover .s4-cpt-card__thumbnail img {
transform: scale(1.05);
}
.s4-cpt-card__body {
padding: 1rem 1.25rem;
flex: 1;
display: flex;
flex-direction: column;
}
.s4-cpt-card__title {
margin: 0 0 0.5rem;
font-size: 1.125rem;
font-weight: 600;
line-height: 1.3;
}
.s4-cpt-card__date {
display: block;
font-size: 0.8125rem;
color: #888;
margin-bottom: 0.5rem;
}
.s4-cpt-card__excerpt {
margin: 0 0 0.75rem;
font-size: 0.9375rem;
line-height: 1.5;
color: #555;
flex: 1;
}
.s4-cpt-card__terms {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: auto;
padding-top: 0.5rem;
}
.s4-cpt-card__term {
display: inline-block;
font-size: 0.75rem;
padding: 2px 10px;
background: #f0f0f0;
border-radius: 100px;
color: #555;
}
.s4-cpt-card__acf {
display: flex;
gap: 4px;
font-size: 0.875rem;
margin-bottom: 0.25rem;
}
.s4-cpt-card__acf-label {
font-weight: 600;
} .s4-cpt-card--overlay {
min-height: 280px;
}
.s4-cpt-card--overlay .s4-cpt-card__link {
position: relative;
height: 100%;
}
.s4-cpt-card--overlay .s4-cpt-card__thumbnail {
position: absolute;
inset: 0;
aspect-ratio: auto;
}
.s4-cpt-card--overlay .s4-cpt-card__thumbnail::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 60%, transparent 100%);
z-index: 1;
transition: background 0.3s ease;
}
.s4-cpt-card--overlay:hover .s4-cpt-card__thumbnail::after {
background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
}
.s4-cpt-card--overlay .s4-cpt-card__body {
position: relative;
z-index: 2;
margin-top: auto;
color: #fff;
padding: 1.25rem;
}
.s4-cpt-card--overlay .s4-cpt-card__title {
color: #fff;
}
.s4-cpt-card--overlay .s4-cpt-card__date {
color: rgba(255, 255, 255, 0.8);
}
.s4-cpt-card--overlay .s4-cpt-card__excerpt {
color: rgba(255, 255, 255, 0.85);
}
.s4-cpt-card--overlay .s4-cpt-card__term {
background: rgba(255, 255, 255, 0.2);
color: #fff;
} .elementor-widget .s4-cpt-card {
max-width: 500px;
height: auto;
}