:root {
--base-gutter: 1.618rem;
--base-lineheight: 1.618;
--base-margin: 1.618em;
--base-primary-font-family: 'DM Sans', sans-serif;
--base-secondary-font-family: 'DM Sans', sans-serif;
--white-background: #F8FAFB;
--header-background-single: #E7EAED;
--input: #9d9b9b;
--input-focused: #222222;
--input-dialog: #9d9b9b;
--light-gray: #e7e9ec;
--dark-blue: #19284a;
--dark-blue-glare: #4E608A;
--dark-pink-peaks: #c7538b;
--pink-peaks: #f063a7;
--pink-peaks-light: #FBE3EF;
--yellow-peaks: #f2e058;
--medium-gray: #dadce1;
--dark-gray: #414b62;
--black: black;
--red: red;
--green: green;
--blue: blue;
--pink: pink;
--purple: purple;
--orange: orange;
--white: white;
--light-blue: #4FC0EF;
--hd: 1700px;
--xxl: 1400px;
--xl: 1200px;
--lg: 991px;
--md: 768px;
--sm: 576px;
--jaune: #F2E058;
--rose: #F063A7;
--bleu-fonce: #19284A;
--gris-clair: #E7E9EC;
--gris-moyen: #DADCE1;
--bleu-clair: #86C6ED;
--body-color: #212519;
--size-step-9: clamp(2.625rem, -0.7643rem + 16.9463vi, 15.25rem);
--size-step-8: clamp(2.3125rem, 0.1313rem + 10.906vi, 10.4375rem);
--size-step-7: clamp(2.0625rem, 1.0055rem + 5.2852vw, 6rem);
--size-step-6: clamp(1.8125rem, 1.0742rem + 3.6913vi, 4.5625rem);
--size-step-5: clamp(1.6875rem, 1.2177rem + 2.349vi, 3.4375rem);
--size-step-4: clamp(1.5625rem, 1.2773rem + 1.4262vi, 2.625rem);
--size-step-3: clamp(1.4375rem, 1.2865rem + 0.755vi, 2rem);
--size-step-2: clamp(1.3125rem, 1.1951rem + 0.5872vi, 1.75rem);
--size-step-1: clamp(1.1875rem, 1.1036rem + 0.4195vi, 1.5rem);
--size-step-0: clamp(1.0625rem, 0.9954rem + 0.3356vi, 1.3125rem);
--size-step--1: clamp(1rem, 0.9664rem + 0.1678vi, 1.125rem);
--size-step--2: clamp(0.875rem, 0.8414rem + 0.1678vi, 1rem);
--size-step--3: clamp(0.8125rem, 0.7957rem + 0.0839vi, 0.875rem);
--size-step--4: clamp(0.625rem, 0.7043rem + -0.0839vi, 0.6875rem);
} html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
list-style-type: none;
padding: 0;
border: 0;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html,
body {
margin: 0;
font-size: 16px;
font-weight: 400;
line-height: 1.4;
color: var(--body-color);
text-align: left;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
@media (width > 1200px) {
font-size: 18px;
}
}
img {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
} body {
font-family: var(--base-primary-font-family);
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
p {
line-height: var(--base-lineheight);
margin: 0 0 1.4em 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
text-wrap: pretty;
font-family: var(--base-secondary-font-family);
margin: 0 0 var(--base-margin) 0;
}
button, h1, h2, h3, h4, input, label {
line-height: 1.1
}
h1 {
font-size: var(--size-step-5);
font-weight: 700;
margin: 0 0 var(--base-margin) 0; }
h1 {
font-size: var(--size-step-5);
}
h2 {
font-size: var(--size-step-4);
}
h3 {
font-size: var(--size-step-3)
}
h4, h5, h6 {
font-size: var(--size-step-2);
}  .container {
width: 100%; margin-inline: auto;
padding-inline: var(--base-gutter);  max-width: 1600px;
}
.container--fullbleed {
padding-inline: 0;
} .navbar {
position: sticky;
align-items: center;
justify-content: center;
top: 0;
left: 0;
width: 100%;
height: 70px;
background-color: var(--pink-peaks);
z-index: 1000;
box-shadow: 0 0 3px rgba(0, 0, 0, .5);
}
.navbar__nav {
height: 100%;
}
.navbar__container {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 100%;
margin: 0 auto;
}
.navbar__logo img {
height: auto;
width: 87px;
vertical-align: middle;
}
.navbar__button {
order: 2;
}
.navbar__menu {
flex-grow: 1;
display: flex;
justify-content: center;
margin: 0 2rem;
}
.navbar__menu-list>div>ul {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 120em;
gap: var(--base-gutter);
list-style: none;
padding: 0;
margin: 0;
}
.navbar__menu-list li {
display: block;
}
.navbar__menu-list a {
display: block;
position: relative;
text-decoration: none;
color: var(--white);
font-size: 1rem;
padding: 0.5rem 0;
transition: color 0.2s;
text-align: center;
text-shadow: 0 0 1px black;
}
.navbar__menu-list a::after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 1px;
bottom: 0.2rem;
left: 0;
background-color: var(--white);
background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.6) 100%);
transition: transform 0.2s ease-out;
}
.navbar__menu-list a:hover::after,
.navbar__menu-list a:focus::after {
transform: scaleX(1);
}
.navbar__button a {
background-color: var(--dark-blue);
color: var(--white);
padding: 0.5rem 1rem;
border-radius: 20px;
text-decoration: none;
font-size: 1rem;
}
.navbar__checkbox {
display: none;
}
.navbar__hamburger {
display: none;
cursor: pointer;
width: 35px;
height: 30px;
flex-direction: column;
justify-content: space-between;
}
.navbar__hamburger span {
display: block;
height: 4px;
width: 100%;
background: var(--white);
transition: all 0.3s ease-in-out;
}
@media screen and (max-width: 1024px) {
.navbar {
display: block;
}
.navbar__button {
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 2;
}
.navbar__menu-list>div>ul {
display: flex;
flex-direction: column;
align-items: center;
gap: calc(var(--base-margin) / 2);
font-size: 1.2rem;
list-style: none;
padding: 0;
margin: 0;
}
.navbar__menu-list li {
display: block;
width: 100%;
text-align: center;
flex: none;
}
.navbar__menu-list a {
display: inline-block;
text-decoration: none;
color: var(--dark-blue);
font-weight: bold;
font-size: 1.5rem;
}
.navbar__menu {
display: flex;
flex-direction: column;
align-items: center;
justify-content: start;
position: fixed;
top: 70px;
left: 100%;
width: 100%;
height: calc(100vh - 70px);
background-color: var(--light-gray);
background-image: url(//carriere.peaks.fr/wp-content/themes/peaks-carriere/img/header-background.jpg);
background-size: cover;
background-position: center 15em;
background-repeat: no-repeat;
transition: left 0.2s ease-in-out;
z-index: 999;
margin: 0;
padding-top: var(--base-margin)
}
.navbar__hamburger {
position: absolute;
right: 15px;
top: 7px;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: space-around;
z-index: 1000;
cursor: pointer;
}
.navbar__hamburger span {
height: 4px;
background: var(--white);
border-radius: 0.2em;
transition: all 0.3s ease-in-out;
}
.navbar:has(#menu-toggle:checked) .navbar__menu,
.navbar:has(li > a:focus) .navbar__menu {
left: 0;
}
.navbar:has(#menu-toggle:checked) .navbar__hamburger span:nth-child(1),
.navbar:has(li > a:focus) .navbar__hamburger span:nth-child(1) {
transform: rotate(45deg) translate(8px, 8px);
}
.navbar:has(#menu-toggle:checked) .navbar__hamburger span:nth-child(2),
.navbar:has(li > a:focus) .navbar__hamburger span:nth-child(2) {
opacity: 0;
}
.navbar:has(#menu-toggle:checked) .navbar__hamburger span:nth-child(3),
.navbar:has(li > a:focus) .navbar__hamburger span:nth-child(3) {
transform: rotate(-45deg) translate(8px, -8px);
}
} .footer {
background-color: var(--dark-blue);
padding-top: var(--base-margin);
}
.footer__container {
display: grid;
grid-template-columns: 1fr;
grid-auto-flow: dense;
gap: var(--base-gutter);
@media screen and (width >=991px) {
grid-template-columns: repeat(3, 1fr);
}
@media screen and (min-width: 768px) and (max-width: 990px) {
grid-template-columns: repeat(2, 1fr);
.footer__column:nth-child(1) {
grid-column: 1 / -1;
}
}
}
.footer__first-column {
@media screen and (min-width: 768px) and (max-width: 990px) {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--base-gutter);
}
}
.footer__column {
color: var(--light-gray);
font-size: 0.8rem;
}
.footer__peaks-logo {
width: 200px;
height: 118px;
max-width: 200px;
margin-bottom: var(--base-margin);
}
.footer__social-link {
margin-bottom: 0.8rem;
}
.footer__social-link-img {
margin-right: 0.8rem;
border-radius: 0;
width: 2em;
height: 2em;
vertical-align: middle;
}
.footer__column-title {
font-weight: 700;
font-size: 1rem;
margin-top: 0;
margin-bottom: calc(var(--base-margin) / 2);
color: var(--light-gray);
}
.footer__column-text {
color: var(--light-gray);
margin-bottom: 1rem;
}
.footer_google_captcha {
font-size: 0.7rem;
color: var(--medium-gray);
}
.footer .footer__google_captcha-link {
color: var(--dark-pink-peaks);
}
.footer__banner {
font-size: 0.7rem;
background-color: var(--dark-gray);
}
.footer__banner-legal-mentions {
display: flex;
flex-direction: row;
justify-content: space-around;
margin: 0;
padding: 1em 0;
color: var(--light-gray);
}
.footer a {
color: var(--light-gray);
}
.footer a:hover {
color: var(--pink-peaks);
}
.sr-only {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.results_message {
background-color: var(--pink-peaks);
border-radius: 1em;
padding: var(--base-margin);
margin: var(--base-margin) 0;
}
.results_message__title,
.results_message__text {
text-align: center;
margin: 0 auto;
color: var(--white);
} label,
input:not([type="submit"]),
textarea,
select {
font-size: 16px;
}
label::placeholder,
input:not([type="submit"])::placeholder,
textarea::placeholder,
select::placeholder {
color: color-mix(in srgb, currentColor 70%, transparent);
}
label:focus-visible,
input:not([type="submit"]):focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: none;
}
button {
border: none;
background-color: transparent;
}
label {
margin: 10px;
}
.row_1 {
margin-bottom: 1.5rem;
}
input:not([type="submit"]),
textarea,
select {
color: var(--input-focused);
border: 1.5px solid var(--input);
background-color: var(--white-background);
border-radius: 0.5em;
padding: 0.8rem;
outline: none;
font-size: 14px;
}
input:not([type="submit"]):focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: none;
}
input:not([type="submit"]),
input:not([type="checkbox"]),
select {
height: 50px;
width: 100%;
}
input[type="checkbox"] {
height: 15px;
width: 15px;
margin: 0;
}
input[type="checkbox"]:focus-visible {
outline: none;
}
input[type="submit"] {
width: fit-content;
margin-bottom: 0;
}
select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url(//carriere.peaks.fr/wp-content/themes/peaks-carriere/img/arrow-down-grey.svg);
background-repeat: no-repeat;
background-position-x: calc(100% - 1rem);
background-position-y: 50%;
}
.contact__files-container {
display: flex;
overflow: hidden;
border-radius: 0.5rem;
background-color: var(--gris-clair);
padding: 6px;
@media screen and (max-width: --var(--md)) {
flex-direction: column;
}
}
.input-file-container--active {
border: 0;
}
.input-file-container--active:after {
opacity: 0;
}
.letter-container,
.other-container {
opacity: 0;
display: none;
}
.contact__file {
background-color: inherit;
margin: 6px;
cursor: pointer;
border: 1px solid var(--pink-peaks);
background-color: rgb(var(--pink-peaks), 0.2);
transition-duration: 0.8s;
border-radius: 59px;
height: 34px;
width: calc(100% / 3) !important;
overflow: hidden;
position: relative;
@media screen and (max-width: 767px) {
width: calc(100% - 12px) !important;
}
}
.contact__file input {
width: 153%;
height: calc(100% + 132px);
opacity: 0;
cursor: pointer;
z-index: 1;
left: -109px;
position: relative;
}
.contact__file:after {
content: url(//carriere.peaks.fr/wp-content/themes/peaks-carriere/img/charge.svg);
position: absolute;
z-index: 0;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
cursor: pointer;
}
.contact__file:hover {
background-color: rgb(var(--pink-peaks), 0.6);
}
.contact__file:hover:after {
content: url(//carriere.peaks.fr/wp-content/themes/peaks-carriere/img/charge-white.svg);
}
.contact__file-name {
position: absolute;
bottom: 6px;
left: 9px;
color: var(--bleu-fonce);
font-size: 12px;
width: 100px;
overflow: hidden;
}
.contact__file-btn-cross {
position: absolute;
top: 11px;
right: 8px;
cursor: pointer;
width: 12px !important;
height: 12px;
background: url(//carriere.peaks.fr/wp-content/themes/peaks-carriere/img/btn-cross-charge.svg) center center no-repeat;
@media screen and (max-width: 767px) {
width: 12px !important;
}
}
.cross-btn {
z-index: 10;
display: none;
}
.btn-container {
margin-top: 30px;
}
textarea {
width: 100%;
} .processus-card {
background-color: var(--dark-blue);
}
.processus-card__wrapper {
position: relative;
@media screen and (width >=768px) {
margin-left: 50%;
}
}
.processus-card__wrapper::after {
content: "";
display: none;
z-index: 2;
@media screen and (min-width: 768px) {
display: block;
background-image: url(//carriere.peaks.fr/wp-content/themes/peaks-carriere/img/processus-recrutement.png);
background-size: cover;
background-position: center;
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100%;
margin-left: -100%;
}
}
.processus-card__spacing {
padding: var(--base-gutter);
}
.processus-card__content {
color: var(--light-blue);
}
.processus-card__header {
display: flex;
align-items: center;
gap: var(--base-gutter);
margin-bottom: var(--base-margin);
}
.processus-card__title {
color: var(--light-blue);
font-weight: 400;
margin: 0;
}
.processus-card__list {
list-style-type: decimal;
padding: 0 0 0 var(--base-margin);
}
.processus-card__listitem {
list-style-type: inherit;
margin-bottom: var(--base-margin);
}
.processus-card__title {
font-size: clamp(1.875rem, 1vw + 1rem, 2.5rem);
font-weight: 400;
}
.processus-card__title strong {
font-weight: 700;
} .button {
font-size: 1rem;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
cursor: pointer;
z-index: 1;
user-select: none;
font-weight: 500;
}
.button:hover,
.button:active {
text-decoration: none;
}
.button--rose {
color: var(--white);
background-color: var(--pink-peaks);
text-shadow: 0 0 1px black;
}
.button--blanc {
color: var(--dark-blue);
background-color: var(--white);
}
.button--transparent {
color: var(--pink-peaks);
background-color: transparent;
box-shadow: none;
}
.button--icon {
display: flex;
align-items: center;
justify-content: center;
}
.button--icon img {
margin-left: 1em;
}
.button--animated {
transition: transform 0.2s ease-out, box-shadow 0.3s ease-out;
}
.button--animated:hover {
transition: all 0.2s ease-out;
transform: translateY(-3px);
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
}
.button--animated img {
transition: transform 0.2s ease-in-out;
}
.button--animated:hover img {
transform: translateX(5px);
}
.button--animated:active {
transform: translateY(1px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.card__wrapper {
display: flex;
justify-content: flex-end;
} .dialog__container,
.dialog__overlay {
position: fixed;
inset: 0;
}
html.a11y-dialog-open,
body.a11y-dialog-open {
overflow: hidden;
}
.dialog__overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(5px);
z-index: 9998;
animation: fade-in-dialog 200ms both;
}
.dialog__container {
z-index: 9998;
display: flex;
}
.dialog__container[aria-hidden='true'] {
display: none;
}
.dialog__content {
margin: auto;
position: relative;
background-color: white;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: stretch;
height: 90vh;
overflow: none;
border: none;
border-radius: 10px;
background: var(--light-gray);
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
z-index: 9999;
}
.dialog__content-inner {
position: absolute;
top: 1rem;
right: 1rem;
bottom: 1rem;
left: 1rem;
overflow-y: auto;
border: none;
border-radius: 10px;
background: var(--white);
-webkit-overflow-scrolling: touch;
z-index: 9999;
padding: var(--base-gutter);
}
.dialog__close {
position: absolute;
top: 1em;
right: 1em;
border: 0;
padding: 0.25em;
background-color: transparent;
font-size: 2em;
width: 2em;
height: 2em;
text-align: center;
cursor: pointer;
transition: 0.15s;
border-radius: 50%;
z-index: 10000;
}
.dialog__close:hover {
background-color: rgb(50 50 0 / 0.15);
}
@keyframes fade-in-dialog {
from {
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.dialog-overlay,
.dialog-content {
animation: none;
}
}
.first-title {
display: flex;
justify-content: space-between;
}
.form__group {
display: flex;
flex-wrap: wrap;
gap: var(--base-gutter);
margin-bottom: var(--base-margin);
}
.form__field {
flex: 1;
display: flex;
flex-direction: column;
min-width: 280px;
}
.form__label {
font-weight: bold;
color: var(--dark-blue);
margin-bottom: 0.5rem;
font-size: 1rem;
}
.form__input,
.form__select,
.form__textarea {
width: 100%;
padding: 0.8rem;
border: 2px solid var(--input-dialog);
border-radius: 6px;
font-size: 1rem;
background: var(--white-background);
transition: border 0.2s ease-in-out;
}
.form__input:focus,
.form__select:focus,
.form__textarea:focus {
border-color: var(--pink-peaks);
outline: none;
}
.form__input::placeholder,
.form__textarea::placeholder {
color: var(--medium-gray);
font-size: 0.9rem;
}
.form__textarea {
resize: vertical;
min-height: 15.5rem;
}
.file-upload {
border: 2px solid var(--input-dialog);
border-radius: 10px;
background-color: var(--white-background);
padding: 1.5rem;
position: relative;
width: 100%;
min-height: 15.5rem;
max-width: 500px;
}
.form__label {
font-weight: bold;
color: var(--dark-gray);
margin-bottom: 0.5rem;
font-size: 1rem;
display: inline-block;
}
.file-upload__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
}
.file-upload__text {
margin: 0;
font-size: 0.8rem;
}
.file-upload__max {
font-size: 0.65rem;
font-weight: 600;
color: var(--dark-gray);
margin: 0;
}
.file-upload__link {
color: var(--dark-blue);
font-weight: 700;
text-decoration: none;
cursor: pointer;
}
.file-upload__link:hover {
text-decoration: underline;
}
.file-upload__dropzone {
border: 2px dashed var(--input);
padding: 20px;
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: var(--white);
}
.file-upload__dropzone.dragover {
border-color: var(--dark-blue);
background-color: var(--light-gray);
}
.file-upload__icon {
width: 50px;
height: auto;
margin: 10px 0;
}
.file-upload__dropzone-text {
font-size: 1rem;
font-weight: 600;
color: var(--dark-gray);
margin: 0;
}
.file-upload__formats {
font-size: 0.75rem;
color: var(--dark-gray);
margin: 0;
}
.file-upload__input {
display: none !important;
}
.form__checkbox {
display: flex;
align-items: center;
gap: 0.5rem;
}
.form__checkbox input {
width: 16px;
height: 16px;
border: 2px solid var(--dark-blue);
border-radius: 4px;
cursor: pointer;
}
.form__submit {
width: 100%;
background: var(--pink-peaks);
color: var(--white);
font-weight: bold;
font-size: 1.2rem;
padding: 1rem;
border: none;
border-radius: 8px;
cursor: pointer;
text-align: center;
transition: background-color 0.3s ease-in-out;
}
.form__submit:hover {
background: var(--dark-pink-peaks);
}
.file-upload__status {
margin-top: 1rem;
}
.file-upload__filename ul {
margin: 0.5rem 0 0;
padding-left: 1.5rem;
list-style: none;
}
.file-upload__filename li {
margin-bottom: 0.3rem;
}
.file-remove-btn {
margin-left: 0.5rem;
cursor: pointer;
background: none;
border: none;
font-weight: bold;
}
.file-remove-btn:hover {
color: var(--pink-peaks);
background-color: rgb(50 50 0 / 0.15);
}
.file-upload__status {
align-items: center;
justify-content: space-between;
}
@media screen and (max-width: 768px) {
.form__group {
flex-direction: column;
}
.form__submit {
font-size: 1rem;
padding: 0.8rem;
}
}
@keyframes d-open {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes d-close {
from {
opacity: 1;
}
to {
opacity: 0;
}
} lite-youtube {
background-color: #000;
position: relative;
display: block;
contain: content;
background-position: center center;
background-size: cover;
cursor: pointer;
max-width: 720px;
border-radius: 1rem;
} lite-youtube::before {
content: attr(data-title);
display: block;
position: absolute;
top: 0; background-image: linear-gradient(180deg, rgb(0 0 0 / 67%) 0%, rgb(0 0 0 / 54%) 14%, rgb(0 0 0 / 15%) 54%, rgb(0 0 0 / 5%) 72%, rgb(0 0 0 / 0%) 94%);
height: 99px;
width: 100%;
font-family: "YouTube Noto", Roboto, Arial, Helvetica, sans-serif;
color: hsl(0deg 0% 93.33%);
text-shadow: 0 0 2px rgba(0, 0, 0, .5);
font-size: 18px;
padding: 25px 20px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
box-sizing: border-box;
}
lite-youtube:hover::before {
color: white;
} lite-youtube::after {
content: "";
display: block;
padding-bottom: calc(100% / (16 / 9));
}
lite-youtube>iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border: 0;
border-radius: 1rem;
} lite-youtube>.lyt-playbtn {
display: block; width: 100%;
height: 100%; background: no-repeat center/68px 48px; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48"><path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z" fill="red"/><path d="M45 24 27 14v20" fill="white"/></svg>');
position: absolute;
cursor: pointer;
z-index: 1;
filter: grayscale(100%);
transition: filter .1s cubic-bezier(0, 0, 0.2, 1);
border: 0;
}
lite-youtube:hover>.lyt-playbtn,
lite-youtube .lyt-playbtn:focus {
filter: none;
} lite-youtube.lyt-activated {
cursor: unset;
}
lite-youtube.lyt-activated::before,
lite-youtube.lyt-activated>.lyt-playbtn {
opacity: 0;
pointer-events: none;
}
.lyt-visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
} .theme--blue {
background-color: var(--dark-blue);
color: var(--white);
}
.theme--white {
background-color: var(--white);
color: var(--dark-blue);
}
.theme--pink {
background-color: var(--pink-peaks);
color: var(--white);
}
.theme--yellow {
background-color: var(--yellow-peaks);
color: var(--dark-blue);
}
.text--white {
color: var(--white);
}
.text--dark-blue {
color: var(--dark-blue);
}
.text--pink,
.text--pink a {
color: var(--pink-peaks);
}
.leading-none {
line-height: 1;
}
.leading-tight {
line-height: 1.25;
}
.leading-normal {
line-height: 1.5;
}
.leading-relaxed {
line-height: 1.625;
}
.leading-loose {
line-height: 1.8;
}
.align-right {
text-align: right;
}
.align-center {
text-align: center;
} .no-margin {
margin: 0;
}
.no-padding {
padding: 0;
}
.no-border {
border: none;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
white-space: nowrap;
clip-path: inset(100%);
clip: rect(0 0 0 0);
overflow: hidden;
}.wpcf7 .screen-reader-response {
position: absolute;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
word-wrap: normal !important;
}
.wpcf7 form .wpcf7-response-output {
margin: 2em 0.5em 1em;
padding: 0.2em 1em;
border: 2px solid #00a0d2; }
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
display: none;
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: #46b450; }
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
border-color: #dc3232; }
.wpcf7 form.spam .wpcf7-response-output {
border-color: #f56e28; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
border-color: #ffb900; }
.wpcf7-form-control-wrap {
position: relative;
}
.wpcf7-not-valid-tip {
color: #dc3232; font-size: 1em;
font-weight: normal;
display: block;
}
.use-floating-validation-tip .wpcf7-not-valid-tip {
position: relative;
top: -2ex;
left: 1em;
z-index: 100;
border: 1px solid #dc3232;
background: #fff;
padding: .2em .8em;
width: 24em;
}
.wpcf7-list-item {
display: inline-block;
margin: 0 0 0 1em;
}
.wpcf7-list-item-label::before,
.wpcf7-list-item-label::after {
content: " ";
}
.wpcf7-spinner {
visibility: hidden;
display: inline-block;
background-color: #23282d; opacity: 0.75;
width: 24px;
height: 24px;
border: none;
border-radius: 100%;
padding: 0;
margin: 0 24px;
position: relative;
}
form.submitting .wpcf7-spinner {
visibility: visible;
}
.wpcf7-spinner::before {
content: '';
position: absolute;
background-color: #fbfbfc; top: 4px;
left: 4px;
width: 6px;
height: 6px;
border: none;
border-radius: 100%;
transform-origin: 8px 8px;
animation-name: spin;
animation-duration: 1000ms;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@media (prefers-reduced-motion: reduce) {
.wpcf7-spinner::before {
animation-name: blink;
animation-duration: 2000ms;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes blink {
from {
opacity: 0;
}
50% {
opacity: 1;
}
to {
opacity: 0;
}
}
.wpcf7 input[type="file"] {
cursor: pointer;
}
.wpcf7 input[type="file"]:disabled {
cursor: default;
}
.wpcf7 .wpcf7-submit:disabled {
cursor: not-allowed;
}
.wpcf7 input[type="url"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
direction: ltr;
}
.wpcf7-reflection > output {
display: list-item;
list-style: none;
}
.wpcf7-reflection > output[hidden] {
display: none;
}.header {
background-color: var(--dark-blue);
text-align: left;
}
.header__container {
padding: 2rem var(--base-gutter);
}
.header__label {
color: var(--pink-peaks);
margin-bottom: 0.2em;
text-transform: uppercase;
font-weight: normal;
}
.header__title {
color: var(--light-gray);
font-weight: 400;
margin-bottom: 0;
font-size: clamp(1.875rem, 1vw + 1rem, 2.5rem);
} .candidature-card {
background-color: var(--dark-blue);
}
.candidature-card__title {
font-size: clamp(1.875rem, 1vw + 1rem, 2.5rem);
font-weight: 400;
}
.candidature-card__title strong {
font-weight: 700;
}
.candidature-card__wrapper {
position: relative;
@media screen and (width >=768px) {
margin-right: 50%;
}
}
.candidature-card__content {
width: 100%;
@media screen and (width >=768px) {
width: 100%;
}
}
.candidature-card__spacing {
padding: var(--base-gutter);
}
.candidature-card__wrapper::after {
content: "";
display: none;
@media screen and (width >=768px) {
display: block;
background-image: url(//carriere.peaks.fr/wp-content/themes/peaks-carriere/img/boxe-pink.jpg);
background-size: cover;
background-position: center;
position: absolute;
top: 0;
bottom: 0;
left: 100%;
width: 100%;
}
}
.candidature-card__wrapper::before {
content: "";
display: none;
z-index: 1;
@media screen and (width >=768px) {
display: block;
background-image: url(//carriere.peaks.fr/wp-content/themes/peaks-carriere/img/sign-peaks.svg);
background-size: contain;
background-repeat: no-repeat;
position: absolute;
top: -1px;
right: 0;
bottom: 0;
width: 8em;
height: 8em;
margin-right: -100%;
}
}
.candidature-card__header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.candidature-card__title {
color: var(--pink-peaks);
font-weight: 400;
margin: 0;
}
.candidature-card__text {
color: var(--pink-peaks);
} .filter {
display: grid;
grid-template-columns: 1fr;
gap: var(--base-gutter);
@media (width >=768px) and (width < 991px) {
grid-template-columns: repeat(2, 1fr);
>*:last-child {
grid-column: 1 / -1;
}
}
@media (width >=991px) {
grid-template-columns: repeat(3, 1fr);
>*:last-child {
grid-column: auto;
}
}
}
.filter__field {
position: relative;
display: flex;
align-items: center;
}
.filter__text:focus {
border-color: var(--dark-blue);
background-color: white;
}
.filter__image {
position: absolute;
left: 0.5rem;
}
.filter__text {
padding-left: 2rem !important;
} .offers-container {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: var(--base-gutter);
margin: var(--base-margin) 0;
grid-auto-flow: dense;
@media (width >=768px) {
grid-template-columns: repeat(2, 1fr);
}
@media (width >=991px) {
grid-template-columns: repeat(3, 1fr);
}
@media (width >=1600px) {
grid-template-columns: repeat(4, 1fr);
}
}
.offer {
overflow: hidden;
height: 280px;
position: relative;
border-radius: 1em;
background-image: url(//carriere.peaks.fr/wp-content/themes/peaks-carriere/img/background-card-pink-380.jpg);
background-color: var(--pink-peaks);
background-size: cover;
background-position: center;
padding: var(--base-margin);
transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
@media (width >=768px) {
height: 410px;
background-position: top;
}
}
.offer--systeme,
.offer--business,
.offer--chefdeprojet,
.offer--data,
.offer--uncategorized {
background-image: url(//carriere.peaks.fr/wp-content/themes/peaks-carriere/img/background-card-blue-380.png);
background-color: var(--dark-blue);
}
.offer:hover {
transition: all 0.2s ease-out;
transform: translateY(-10px) scale(1.05);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}
.offer:active {
transform: translateY(1px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.offer a:hover,
.offer a:active {
text-decoration: none;
}
.offer__wrapper {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.offer__readmore {
position: absolute;
right: 0;
left: 0;
bottom: 0;
}
.offer__readmore-wrapper {
flex-grow: 1;
position: relative;
}
.offer__experience {
display: inline-block;
background-color: var(--pink-peaks-light);
color: var(--pink-peaks);
font-size: 0.8em;
font-weight: bold;
padding: 6px 12px;
border-radius: 1rem;
text-transform: none;
width: fit-content;
}
.offer__details-list li {
color: var(--white);
line-height: 2em;
font-weight: 300;
padding-left: 1.5rem;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
background-repeat: no-repeat;
background-position: left center;
}
.offer__details-list li img {
margin: 0 0.3em 0.3em 0
}
.offer__details-list li:nth-of-type(1) {
background-image: url(//carriere.peaks.fr/wp-content/themes/peaks-carriere/img/contrat.svg);
}
.offer__details-list li:nth-of-type(2) {
background-image: url(//carriere.peaks.fr/wp-content/themes/peaks-carriere/img/location.svg);
}
.offer__title {
color: var(--white);
font-size: clamp(1.25rem, 1.125rem + 0.5vw, 1.5rem);
font-weight: 700;
line-height: 1.2;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
margin: 0 0 var(--base-margin) 0;
@media (width >=768px) {
min-height: 3.6em;
}
} .video-carousel {
background-color: var(--pink-peaks);
padding: var(--base-margin) 0;
position: relative;
}
.video-carousel__title {
margin-bottom: calc(var(--base-margin) / 2);
text-align: center;
color: var(--white);
font-weight: 400;
line-height: 1.2;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.video-carousel__title strong {
font-weight: 800;
}
.video-carousel__wrapper {
align-items: center;
width: 100%;
--slide-spacing: 1rem;
--slide-size: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.video-carousel__viewport {
overflow: hidden;
}
.video-carousel__container {
display: flex;
touch-action: pan-y pinch-zoom;
margin-left: calc(var(--slide-spacing) * -1);
}
.video-carousel__slide {
flex: 0 0 var(--slide-size);
padding-left: var(--slide-spacing);
}
@media (min-width: 750px) {
.video-carousel__wrapper {
--slide-size: calc(100% / 2);
--slide-spacing: 1.6rem;
}
}
@media (min-width: 1200px) {
.video-carousel__wrapper {
--slide-size: calc(100% / 3);
--slide-spacing: 2rem;
}
}
.video-carousel__slide iframe {
display: block;
width: 100%;
max-width: 560px;
border-radius: 1em;
margin: 0 auto;
}
.video-carousel__caption {
text-align: center;
color: var(--white);
font-size: 1rem;
margin-top: 10px;
text-shadow: 0 0 1px black;
}
.video-carousel__button {
background: none;
border: none;
width: 3.6rem;
height: 3.6rem;
color: var(--white);
transform: translateY(-35px);
display: flex;
align-items: center;
justify-content: center;
pointer-events: all;
transition: opacity 0.3s ease-in-out;
cursor: pointer;
}
.video-carousel__button svg {
width: 2rem;
height: 2rem;
}
@media screen and (max-width: 1105px) {
.video-carousel__button {
width: 2.5rem;
height: 2.5rem;
}
.video-carousel__button svg {
width: 1.5rem;
height: 1.5rem;
}
}
.video-carousel__button:disabled {
opacity: 0.5;
}
.video-carousel__dots {
display: flex;
justify-content: center;
align-items: center;
margin-top: 1rem;
}
.video-carousel__dot {
width: 1rem;
height: 1rem;
margin: 0 5px;
border-radius: 50%;
cursor: pointer;
}