@charset "UTF-8";/* fonts.css a41c4f2371b507dc, site.css 08cdd260295f3683 (xxh3) : écrite par outils/minifier_css.php, ne pas retoucher */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300 800;
font-display: swap;
src: url('/assets/fonts/opensans-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300 800;
font-display: swap;
src: url('/assets/fonts/opensans-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 300 800;
font-display: swap;
src: url('/assets/fonts/opensans-italic-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 300 800;
font-display: swap;
src: url('/assets/fonts/opensans-italic-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Dosis';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/assets/fonts/dosis-400-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Dosis';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/assets/fonts/dosis-400-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
U+FEFF, U+FFFD;
}
:root {
color-scheme: only light;
--navy: #283851;
--ink: #000000;
--white: #ffffff;
--grey-bg: #f4f4f4;
--head-deep: #1d2939;
--mobile-bar: #111111;
--mobile-link: #666666;
--drawer-bg: #f7f7f7;
--veil-slide: rgba(40, 56, 81, 0.5);
--veil-bandeau: rgba(40, 56, 81, 0.7);
--veil-menu: rgba(0, 0, 0, 0.83);
--box-shadow: 0 12px 18px -6px rgba(0, 0, 0, 0.3);
--toggle-border: #d9d9d9;
--text-shadow: 0 0 0.3em #000;
--sans: "Open Sans", Arial, Helvetica, sans-serif;
--dosis: "Dosis", "Trebuchet MS", Arial, sans-serif;
--row: 1080px;
--gutter: 5.5%;
--transition: 0.3s ease;
--btn-transition: 0.2s;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
margin: 0;
background: var(--white);
color: var(--ink);
font-family: var(--sans);
font-size: 14px;
line-height: 1.7em;
font-weight: 400;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding-bottom: 10px;
color: var(--navy);
font-family: var(--sans);
font-weight: 600;
line-height: 1em;
text-wrap: pretty;
}
h1 {
font-size: 32px;
}
h2 {
font-size: 26px;
}
h3 {
font-size: 22px;
}
h4 {
font-size: 18px;
}
p {
margin: 0;
padding-bottom: 1em;
}
p:last-child {
padding-bottom: 0;
}
a {
color: var(--ink);
text-decoration: none;
transition: color var(--transition), opacity var(--transition);
}
a:hover {
color: var(--navy);
}
img {
max-width: 100%;
height: auto;
border: 0;
vertical-align: middle;
}
picture {
display: contents;
}
ul,
ol {
margin: 0 0 1em;
padding-left: 1em;
}
strong,
b {
font-weight: 700;
}
button {
font: inherit;
color: inherit;
padding: 0;
}
:focus-visible {
outline: 2px solid var(--white);
outline-offset: 2px;
box-shadow: 0 0 0 4px var(--navy);
border-radius: 1px;
}
.section :focus-visible,
.prose :focus-visible,
.sitemap :focus-visible,
.legal :focus-visible,
.gallery :focus-visible,
.mobile-panel :focus-visible,
.masthead__mobile :focus-visible {
outline-color: var(--navy);
box-shadow: 0 0 0 4px var(--white);
}
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 200;
padding: 12px 20px;
background: var(--white);
color: var(--navy);
font-weight: 700;
}
.skip-link:focus {
left: 0;
z-index: 10001;
}
[hidden] {
display: none !important;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.section {
position: relative;
padding: 4% 0;
background: var(--white);
}
.section > .row {
padding: 2% 0;
}
@media (min-width: 1350px) {
.section {
padding: 54px 0;
}
.section > .row {
padding: 27px 0;
}
}
.section--gris {
background: var(--grey-bg);
}
.row {
width: 80%;
max-width: var(--row);
margin: 0 auto;
position: relative;
}
.row--wide {
max-width: none;
}
.cols {
display: flex;
flex-wrap: wrap;
}
.cols > * {
margin-right: var(--gutter);
}
.cols > *:last-child {
margin-right: 0;
}
.cols--2 > * {
width: 47.25%;
}
.cols--3 > * {
width: 29.6667%;
}
.bg-photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
@media (max-width: 980px) {
.section {
padding: 50px 0;
}
.section > .row {
padding: 30px 0;
}
.cols > *,
.cols--2 > *,
.cols--3 > * {
width: 100%;
margin-right: 0;
margin-bottom: 30px;
}
.cols > *:last-child {
margin-bottom: 0;
}
}
.topbar {
background: var(--navy);
color: var(--white);
}
.topbar__inner {
padding: 8px 50px 4px;
}
.topbar__info {
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: 14px;
margin: 0 0 30px;
padding: 0;
color: var(--white);
line-height: 23.8px;
}
@media (max-width: 389px) {
.topbar__info {
column-gap: 10px;
}
}
.topbar__item {
display: inline-flex;
align-items: center;
white-space: nowrap;
}
.topbar__icon {
flex: 0 0 auto;
fill: currentColor;
color: var(--white);
}
.topbar__item--tel .topbar__icon {
width: 16px;
height: 16px;
margin: 0 1px 0 -1px;
}
.topbar__item--email .topbar__icon {
width: 17px;
height: 17px;
margin-right: 3px;
}
.topbar .reveal,
.topbar a {
color: var(--white);
}
.topbar a:hover,
.topbar .reveal:hover {
color: rgba(255, 255, 255, 0.7);
}
.masthead,
.sticky-header {
--head-text: #dfe5ee;
--head-muted: #c7d0dc;
--head-icon: #8fbbd9;
--head-accent: #6fb3dc;
--head-line: #8795ab;
--head-cta-hover: #e6edf5;
--head-max: 1680px;
--head-pad: 40px;
}
.masthead {
position: relative;
z-index: 50;
background: var(--white);
}
.masthead__wrap {
width: 100%;
max-width: var(--head-max);
margin: 0 auto;
padding: 0 var(--head-pad);
}
.masthead__top {
background: var(--head-deep);
color: var(--head-muted);
font-size: 13px;
line-height: 20px;
}
.masthead__top-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 7px 24px;
min-height: 40px;
padding-top: 7px;
padding-bottom: 7px;
}
.masthead__address {
display: flex;
align-items: center;
min-width: 0;
margin: 0;
padding: 0;
list-style: none;
line-height: 20px;
white-space: nowrap;
}
.masthead__item {
position: relative;
display: flex;
align-items: center;
gap: 7px;
}
.masthead__item + .masthead__item {
margin-left: 37px;
}
.masthead__item + .masthead__item::before {
content: "";
position: absolute;
left: -19px;
top: 50%;
width: 1px;
height: 16px;
margin-top: -8px;
background: rgba(255, 255, 255, 0.18);
}
.masthead__icon {
width: 14px;
height: 14px;
flex: 0 0 14px;
fill: var(--head-icon);
}
.masthead__slot .reveal {
display: inline-flex;
align-items: center;
justify-content: center;
height: 26px;
padding: 0 10px;
border: 1px solid var(--head-line);
border-radius: 13px;
background: transparent;
color: var(--white);
font-size: 13px;
line-height: 1;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
transition: border-color 0.2s ease, background-color 0.2s ease;
}
.masthead__slot .reveal:hover {
color: var(--white);
opacity: 1;
text-decoration: none;
border-color: var(--white);
background: rgba(255, 255, 255, 0.08);
}
.masthead__slot .reveal[data-state="done"] {
cursor: pointer;
}
.masthead__slot--tel .reveal {
min-width: 114px;
}
.masthead__slot--email .reveal {
min-width: 146px;
}
.masthead__support {
display: inline-flex;
flex: none;
align-items: center;
margin-left: auto;
gap: 7px;
height: 26px;
padding: 0 11px 0 10px;
border: 1px solid var(--head-line);
border-radius: 13px;
background: transparent;
color: var(--white);
font-size: 13px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
text-decoration: none;
transition: border-color 0.2s ease, background-color 0.2s ease;
}
.masthead__support:hover {
color: var(--white);
text-decoration: none;
border-color: var(--white);
background: rgba(255, 255, 255, 0.08);
}
.masthead__main {
background: var(--navy);
}
.masthead__main-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
height: 88px;
}
.masthead__logo {
--logo-h: 72px;
display: flex;
align-items: center;
flex: 0 0 auto;
line-height: 0;
}
.masthead__logo img {
position: relative;
top: calc(var(--logo-h) * -0.098);
display: block;
width: auto;
max-width: none;
height: var(--logo-h);
margin-left: calc(var(--logo-h) * -0.196);
mix-blend-mode: lighten;
}
@media (forced-colors: active) {
.masthead__logo img {
mix-blend-mode: normal;
}
}
.nav {
flex: 1 1 auto;
min-width: 0;
}
.nav__list {
display: flex;
align-items: center;
justify-content: flex-end;
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}
.nav__item {
position: relative;
margin: 0;
}
.nav__link {
position: relative;
display: inline-flex;
align-items: center;
padding: 12px 13px;
color: var(--head-text);
font-size: 13px;
font-weight: 600;
line-height: 16px;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
transition: color 0.2s ease;
}
.nav__link::after {
content: "";
position: absolute;
left: 13px;
right: 13px;
bottom: 5px;
height: 2px;
background: transparent;
transition: background-color 0.2s ease;
}
.nav__link:hover {
color: var(--white);
}
.nav__link:hover::after {
background: rgba(255, 255, 255, 0.45);
}
.nav__link[aria-current="page"] {
color: var(--white);
}
.nav__link[aria-current="page"]::after {
background: var(--head-accent);
}
.nav__item--cta {
margin-left: 12px;
}
.nav__cta {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 5px 18px;
border-radius: 3px;
background: var(--white);
color: var(--navy);
text-align: center;
white-space: nowrap;
transition: background-color 0.2s ease, color 0.2s ease;
}
.nav__cta:hover {
color: var(--navy);
background: var(--head-cta-hover);
}
.nav__cta-main {
font-size: 13px;
font-weight: 700;
line-height: 17px;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.nav__cta-detail {
font-size: 11.5px;
font-weight: 400;
line-height: 16px;
}
.nav__cta[aria-current="page"],
.nav__cta[aria-current="page"]:hover {
color: var(--white);
background: transparent;
box-shadow: inset 0 0 0 1px var(--white);
}
.sticky-header__main {
display: none;
}
@media (min-width: 981px) {
.sticky-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99999;
background: var(--navy);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s ease;
pointer-events: none;
}
.sticky-header[data-shown="true"] {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.sticky-header .topbar {
display: none;
}
.sticky-header__main {
display: block;
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.12);
}
.sticky-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
height: 64px;
}
.sticky-header .masthead__logo {
--logo-h: 54px;
}
.sticky-header .nav__link {
padding-top: 10px;
padding-bottom: 10px;
}
.sticky-header .nav__link::after {
bottom: 4px;
}
.sticky-header .nav__cta {
min-height: 42px;
padding-top: 3px;
padding-bottom: 3px;
}
.sticky-header .nav__cta-main {
line-height: 16px;
}
.sticky-header .nav__cta-detail {
line-height: 15px;
}
.masthead :focus-visible,
.sticky-header :focus-visible {
outline: 2px solid var(--white);
outline-offset: 2px;
box-shadow: 0 0 0 4px var(--head-deep);
}
.masthead__mobile {
display: none;
}
}
@media (min-width: 981px) and (max-width: 1279px) {
.masthead,
.sticky-header {
--head-pad: 28px;
}
.masthead__main-inner,
.sticky-header__inner {
gap: 24px;
}
.masthead .masthead__logo {
--logo-h: 64px;
}
.nav__link {
padding-left: 10px;
padding-right: 10px;
letter-spacing: 0.04em;
}
.nav__link::after {
left: 10px;
right: 10px;
}
.nav__item--cta {
margin-left: 10px;
}
}
@media (min-width: 981px) and (max-width: 1199px) {
.masthead,
.sticky-header {
--head-pad: 20px;
}
.masthead__top,
.masthead__address .reveal,
.masthead__support {
font-size: 12px;
}
.masthead__address .masthead__slot--tel .reveal {
min-width: 106px;
}
.masthead__address .masthead__slot--email .reveal {
min-width: 136px;
}
.masthead__main-inner,
.sticky-header__inner {
gap: 16px;
}
.masthead .masthead__logo {
--logo-h: 56px;
}
.nav__link {
padding-left: 8px;
padding-right: 8px;
font-size: 12px;
letter-spacing: 0.03em;
}
.nav__link::after {
left: 8px;
right: 8px;
}
.nav__item--cta {
margin-left: 8px;
}
.nav__cta {
padding-left: 12px;
padding-right: 12px;
}
.nav__cta-main {
font-size: 12px;
letter-spacing: 0.04em;
}
}
.masthead__mobile {
padding: 5px 0 0;
background: var(--white);
}
.masthead__mobile-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 30px 5.5%;
width: 80%;
margin: 0 auto;
}
.masthead__mobile-col {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
}
.masthead__mobile-logo {
display: block;
width: 30%;
margin: 0 auto;
line-height: 0;
}
.masthead__mobile-logo img {
display: block;
width: 100%;
height: auto;
}
.blurb {
display: flex;
align-items: flex-start;
margin: 0;
padding: 0;
color: var(--ink);
font-size: 16px;
line-height: 23.8px;
}
.blurb__icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 32px;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--navy);
color: var(--white);
}
.blurb__icon svg {
width: 16px;
height: 16px;
fill: currentColor;
}
.blurb__icon--tel svg {
width: 17px;
height: 17px;
}
.blurb__icon--pin svg {
width: 17px;
height: 17px;
}
.blurb__text {
min-width: 0;
padding-left: 15px;
}
@media (max-width: 479px) {
.masthead__mobile-row {
grid-template-columns: minmax(0, 1fr);
}
}
.footer__main {
background: var(--navy);
color: var(--white);
padding: 10px 0;
}
.footer__main > .row {
padding: 2% 0;
}
@media (min-width: 1350px) {
.footer__main > .row {
padding: 27px 0;
}
}
.footer a,
.footer .reveal {
color: var(--white);
}
.footer a:hover,
.footer .reveal:hover {
color: rgba(255, 255, 255, 0.7);
}
.footer__cols {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
}
.footer__col {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
}
.footer h2 {
margin: 0 0 19px;
padding-bottom: 0;
color: var(--white);
font-size: 22px;
font-weight: 600;
font-style: italic;
line-height: 23.8px;
}
.footer h2::after {
content: "";
display: block;
width: 9%;
height: 4px;
margin-top: 19px;
background: var(--white);
}
.footer__text {
margin: 0 0 9px;
padding: 0;
font-size: 18px;
font-weight: 600;
font-style: italic;
line-height: 23.8px;
}
.footer__noscript {
padding: 0 0 9px;
font-size: 14px;
font-weight: 400;
font-style: normal;
line-height: 23.8px;
}
.footer__fallback {
margin: 0 0 9px;
padding: 0;
list-style: none;
font-size: 18px;
font-weight: 600;
font-style: italic;
}
.footer__bar {
background: var(--ink);
color: var(--white);
}
.footer__bar > .row {
padding: 2% 0;
}
@media (min-width: 1350px) {
.footer__bar > .row {
padding: 27px 0;
}
}
.footer__bar-inner {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
column-gap: 30px;
align-items: start;
}
.footer__legal {
margin: 0;
padding: 0;
font-size: 14px;
line-height: 23.8px;
}
.footer__legal a {
font-weight: 700;
}
.footer__boutiques {
margin: 0;
padding: 0;
color: #bfbfbf;
font-size: 14px;
line-height: 23.8px;
text-align: right;
white-space: nowrap;
}
.footer__boutiques a {
font-weight: 400;
text-decoration: underline;
text-decoration-color: rgba(255, 255, 255, 0.5);
text-underline-offset: 3px;
}
.footer__boutiques a:hover {
text-decoration-color: currentColor;
}
@media (max-width: 980px) {
.footer__main > .row,
.footer__bar > .row {
padding: 30px 0;
}
.footer__cols {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.footer__col:not(:last-child) {
padding-bottom: 25px;
}
.footer__bar-inner {
grid-template-columns: minmax(0, 1fr);
}
.footer__boutiques {
margin-top: 10px;
text-align: left;
white-space: normal;
}
}
@media (max-width: 479px) {
.footer__cols {
grid-template-columns: minmax(0, 1fr);
}
}
.prose {
color: var(--ink);
font-size: 15px;
line-height: 1.8em;
}
.prose a {
text-decoration: underline;
text-underline-offset: 3px;
}
.prose ul {
padding-left: 1.2em;
}
.block-image .row {
padding-bottom: 27px;
}
.block-image img {
display: block;
width: 100%;
height: auto;
}
.page-title {
padding-bottom: 0;
}
.page-title > .row {
display: flow-root;
padding-bottom: 0;
}
.page-title__heading {
margin-bottom: 2.75%;
}
.page-title + .section,
.page-title + .section > .row {
padding-top: 0;
}
.page-title--filet > .row {
padding-bottom: 2%;
}
@media (min-width: 1350px) {
.page-title--filet > .row {
padding-bottom: 27px;
}
}
.page-title__rule {
display: block;
width: 6%;
height: 23px;
border-top: 2px solid var(--navy);
}
@media (max-width: 980px) {
.page-title__heading {
margin-bottom: 30px;
}
.page-title--filet > .row {
padding-bottom: 30px;
}
}
.hero {
position: relative;
isolation: isolate;
overflow: hidden;
background: var(--navy);
}
.hero__container {
position: relative;
z-index: 1;
display: flex;
width: 88%;
margin: 0 auto;
}
.hero__media {
flex: 0 0 20%;
width: 20%;
align-self: center;
}
.hero__media img {
display: block;
width: 100%;
height: auto;
}
.hero__body {
flex: 0 0 47.25%;
width: 47.25%;
margin-left: auto;
padding: 16% 0;
}
.hero__title {
margin: 0;
padding: 0 0 10px;
color: var(--white);
font-size: 46px;
font-weight: 600;
line-height: 46px;
text-shadow:
-1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000,
-1px 0 0 #000, 1px 0 0 #000,
-1px 1px 0 #000, 0 1px 0 #000, 1px 1px 0 #000,
var(--text-shadow);
}
.hero__actions {
margin-top: 20px;
}
.hero__actions .btn {
vertical-align: top;
}
@media (max-width: 980px) {
.hero {
display: none;
}
}
.media-text__cols {
align-items: flex-start;
}
.media-text__media img {
display: block;
width: 100%;
height: auto;
}
.media-text__heading {
font-size: 32px;
}
.media-text__heading,
.services__title,
.service-item__title,
.colonnes .prose h2,
.colonnes .prose h3,
.colonnes .prose h4 {
text-wrap: wrap;
}
.media-text__body > * + * {
margin-top: 5.82%;
}
.media-text__actions .btn {
font-size: 18px;
vertical-align: top;
}
.media-text--suite {
padding-bottom: 0;
}
@media (max-width: 980px) {
.media-text__body > * + * {
margin-top: 30px;
}
}
.chiffres {
padding-top: 30px;
}
.chiffres > .row {
padding: 0;
}
.chiffres__list {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: var(--gutter);
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
.chiffres__item {
display: flex;
flex-direction: column;
align-items: center;
padding: 15px;
}
.chiffres__item--nombre {
padding: 15px 30px 30px;
}
.chiffres__nombre {
display: block;
margin-bottom: 20px;
color: var(--navy);
font-size: 52px;
font-weight: 400;
line-height: 72px;
}
.chiffres__icone {
flex: none;
width: 60px;
height: 60px;
margin-bottom: 30px;
fill: var(--navy);
color: var(--navy);
}
.chiffres__label {
display: block;
padding-bottom: 10px;
color: var(--ink);
font-size: 16px;
font-weight: 400;
line-height: 16px;
}
@media (max-width: 980px) {
.chiffres__list {
grid-template-columns: 1fr;
row-gap: 30px;
}
}
.bandeau {
isolation: isolate;
overflow: hidden;
background: var(--navy);
}
.bandeau > .row {
z-index: 1;
}
.bandeau__panel {
padding: 40px 60px;
border-radius: 25px;
background: var(--veil-bandeau);
color: var(--white);
text-align: center;
}
.bandeau__text {
font-size: 18px;
line-height: 23.8px;
}
.bandeau__actions {
padding-top: 20px;
}
.bandeau__actions .btn {
vertical-align: top;
}
@media (min-width: 981px) {
.bandeau--parallaxe .bandeau__photo {
top: calc(50% - 50vh);
bottom: auto;
height: 100vh;
object-position: 50% 0;
}
}
@media (max-width: 980px) {
.bandeau__panel {
padding: 40px;
}
.bandeau--parallaxe .bandeau__photo {
object-position: 50% 0;
}
}
.services {
padding-top: 24px;
}
.services__title {
padding: 0;
font-size: 26px;
line-height: 23.8px;
text-align: center;
}
.section > .services__cards {
padding-bottom: 2px;
}
.services__list {
display: flex;
margin: 0;
padding: 0;
list-style: none;
}
.services__cell {
display: flex;
flex: 0 0 15.6%;
width: 15.6%;
margin-right: var(--gutter);
transition: transform var(--transition);
}
.services__cell:last-child {
margin-right: 0;
}
@media (hover: hover) {
.services__cell:hover {
transform: scale(1.1);
}
}
.services__cell:has(.service-item:focus-visible) {
transform: scale(1.1);
}
.service-item {
display: flex;
flex-direction: column;
width: 100%;
color: var(--ink);
scroll-margin-block: 24px;
}
.service-item:hover {
color: var(--ink);
}
.service-item__media {
display: block;
margin-bottom: 30px;
line-height: 0;
text-align: center;
}
.service-item__media img {
border-radius: 10px;
aspect-ratio: 3 / 2;
object-fit: cover;
}
.service-item__title {
padding: 0 0 10px;
color: var(--navy);
font-size: 18px;
font-weight: 400;
line-height: 18px;
text-align: center;
}
.service-item__text {
display: block;
font-size: 14px;
line-height: 23.8px;
text-align: left;
}
@media (max-width: 980px) {
.services__list {
flex-direction: column;
}
.services__cell {
flex: none;
width: 100%;
margin: 0 0 30px;
}
.services__cell:last-child {
margin-bottom: 0;
}
}
.colonnes__col > * + * {
margin-top: 5.82%;
}
.cols--3 > .colonnes__col > * + * {
margin-top: 9.27%;
}
.colonnes .prose p:last-of-type {
padding-bottom: 0;
}
.colonnes .prose ul {
margin: 0;
padding: 0 0 1em 1em;
line-height: 26px;
}
.colonnes .accordeon__corps ul {
padding-bottom: 23px;
}
.colonnes .prose .apres-ligne-blanche {
margin-top: 42px;
}
.cols--3 .prose h2 {
font-size: 23px;
}
.colonnes__media img {
display: block;
width: 35%;
height: auto;
}
.separateur {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 41px;
pointer-events: none;
}
.accordeon__item {
padding: 20px;
border: 1px solid var(--toggle-border);
background: var(--grey-bg);
box-shadow: var(--box-shadow);
}
.accordeon__item[open] {
background: var(--white);
}
.accordeon__item + .accordeon__item {
margin-top: 5.82%;
}
.cols--3 .accordeon__item + .accordeon__item {
margin-top: 9.27%;
}
.accordeon__titre {
position: relative;
display: block;
padding-right: 50px;
color: var(--navy);
font-size: 26px;
font-weight: 600;
line-height: 26px;
list-style: none;
cursor: pointer;
}
.accordeon__titre::-webkit-details-marker {
display: none;
}
.accordeon__item--titre-noir:not([open]) .accordeon__titre {
color: var(--ink);
}
.accordeon__icone {
position: absolute;
top: 50%;
right: 0;
width: 16px;
height: 16px;
margin-top: -8px;
fill: var(--navy);
}
.accordeon__item[open] .accordeon__icone {
display: none;
}
.accordeon__corps {
padding-top: 20px;
}
@media (max-width: 980px) {
.colonnes__col > * + *,
.cols--3 > .colonnes__col > * + * {
margin-top: 30px;
}
.accordeon__item + .accordeon__item,
.cols--3 .accordeon__item + .accordeon__item {
margin-top: 10px;
}
}
.gallery {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
column-gap: 5.5%;
margin-bottom: -5.5%;
}
.gallery--paginee {
margin-bottom: 0;
}
.gallery__item {
position: relative;
display: block;
width: 20.875%;
margin-bottom: 5.5%;
line-height: 0;
overflow: hidden;
}
.gallery__item img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
}
@media (min-width: 480px) {
.gallery__item--v100x71 img {
aspect-ratio: 100 / 71;
}
.gallery__item--v16x9 img {
aspect-ratio: 16 / 9;
}
}
@media (max-width: 479px) {
.gallery__item--p16x9 img {
aspect-ratio: 16 / 9;
}
.gallery__item--p3x2 img {
aspect-ratio: 3 / 2;
}
.gallery__item--p1x1 img {
aspect-ratio: 1 / 1;
}
.gallery__item--p480x719 img {
aspect-ratio: 480 / 719;
}
}
.gallery__voile {
position: absolute;
inset: 0;
background: var(--navy);
color: var(--white);
opacity: 0;
pointer-events: none;
transition: opacity var(--transition);
}
.gallery__voile svg {
position: absolute;
top: 50%;
left: 50%;
width: 32px;
height: 32px;
transform: translate(-50%, -50%);
}
@media (hover: hover) {
.gallery__item:hover .gallery__voile {
opacity: 1;
}
}
@media (max-width: 980px) {
.gallery {
margin-bottom: 0;
}
.gallery__item {
width: 29.666%;
margin-bottom: 7.5%;
}
}
@media (max-width: 767px) {
.gallery__item {
width: 47.25%;
margin-bottom: 9.5%;
}
}
@media (max-width: 479px) {
.gallery__item {
width: 100%;
margin-bottom: 11.5%;
}
}
.gallery-pager {
border-top: 1px solid #e2e2e2;
}
.gallery-pager ul {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
margin: 0;
padding: 0 0 26px;
list-style: none;
font-size: 14px;
line-height: 26px;
}
.gallery-pager li {
padding: 10px;
}
.gallery-pager button {
position: relative;
display: inline-block;
padding: 0;
border: 0;
background: none;
color: var(--navy);
font-size: 16px;
font-weight: 400;
line-height: 16px;
cursor: pointer;
}
.gallery-pager button::after {
content: "";
position: absolute;
inset: -10px;
}
.gallery-pager [aria-current="page"] {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.lightbox {
border: 0;
padding: 0;
max-width: 100vw;
max-height: 100vh;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.92);
}
.lightbox::backdrop {
background: rgba(0, 0, 0, 0.92);
}
.lightbox__figure {
margin: 0;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 18px;
padding: 40px 60px;
}
.lightbox__figure img {
max-width: 100%;
max-height: calc(100vh - 140px);
width: auto;
object-fit: contain;
}
.lightbox__figure figcaption {
color: var(--white);
font-size: 14px;
text-align: center;
}
.lightbox__close,
.lightbox__prev,
.lightbox__next {
position: absolute;
background: none;
border: 0;
color: var(--white);
cursor: pointer;
padding: 12px;
line-height: 0;
}
.lightbox__close {
top: 12px;
right: 16px;
}
.lightbox__prev {
left: 8px;
top: 50%;
transform: translateY(-50%);
}
.lightbox__next {
right: 8px;
top: 50%;
transform: translateY(-50%);
}
.lightbox svg {
width: 26px;
height: 26px;
fill: currentColor;
}
@media (max-width: 767px) {
.lightbox__figure {
padding: 60px 16px 30px;
}
.lightbox__prev,
.lightbox__next {
background: rgba(0, 0, 0, 0.6);
border-radius: 4px;
}
}
.sitemap-section {
padding: 4% 0;
background: var(--grey-bg);
}
.sitemap-section > .row {
padding: 2% 0;
}
@media (min-width: 1350px) {
.sitemap-section {
padding: 54px 0;
}
.sitemap-section > .row {
padding: 27px 0;
}
}
.sitemap__title {
margin-bottom: 2.75%;
}
.sitemap h2 {
color: var(--ink);
font-size: 26px;
font-weight: 400;
line-height: 26px;
}
.sitemap ul {
margin: 0;
padding: 0 0 23px 1em;
list-style: disc;
color: var(--navy);
font-size: 15px;
line-height: 26px;
}
.sitemap a {
color: var(--navy);
}
@media (max-width: 980px) {
.sitemap-section {
padding: 50px 0;
}
.sitemap-section > .row {
padding: 30px 0;
}
.sitemap__title {
margin-bottom: 30px;
}
}
.legal-section {
background: var(--grey-bg);
}
.legal > h1 {
margin-bottom: 2.75%;
}
.legal h1,
.legal h2,
.legal h3,
.legal h4 {
text-wrap: wrap;
}
.legal h2,
.legal h3,
.legal h4 {
padding: 0 0 10px;
color: var(--ink);
font-weight: 400;
}
.legal ul {
margin: 0 0 15px;
padding-left: 1em;
}
.legal li {
line-height: 26px;
}
.legal__strong {
font-weight: 700;
}
.legal a {
word-break: break-word;
}
@media (max-width: 980px) {
.legal > h1 {
margin-bottom: 30px;
}
}
.legal .table-scroll {
overflow-x: auto;
margin: 0 0 1.4em;
background:
linear-gradient(to right, var(--grey-bg) 30%, rgba(244, 244, 244, 0)) left center / 40px 100% no-repeat local,
linear-gradient(to left, var(--grey-bg) 30%, rgba(244, 244, 244, 0)) right center / 40px 100% no-repeat local,
radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) left center / 14px 100% no-repeat scroll,
radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) right center / 14px 100% no-repeat scroll;
}
.legal table {
width: 100%;
border-collapse: collapse;
min-width: 560px;
font-size: 13px;
}
.legal table td,
.legal table th {
padding: 6px;
border: 1px solid var(--ink);
line-height: 1.5;
text-align: left;
vertical-align: top;
}
.cta {
color: var(--white);
}
.cta__panel {
padding: 40px 60px;
border-radius: 25px;
background: var(--navy);
text-align: center;
}
.cta h2 {
color: var(--white);
font-size: 26px;
line-height: 26px;
}
.cta__text {
font-size: 18px;
line-height: 23.8px;
}
.cta__actions {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
margin-top: 20px;
}
.cta__link {
margin: 0;
padding: 0;
font-size: 15px;
line-height: 27px;
}
.cta__link a,
.cta__link a:hover {
display: inline-block;
color: var(--white);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
}
.cta__link a:hover {
text-decoration-thickness: 2px;
}
@media (max-width: 980px) {
.cta__panel {
padding: 40px;
}
}
.cta__panel :focus-visible,
.bandeau__panel :focus-visible {
outline-color: var(--white);
box-shadow: 0 0 0 4px var(--navy);
}
@media (max-width: 479px) {
.cta__panel {
padding: 40px 24px;
}
}
.page-title + .coordonnees > .row {
padding-top: 0;
padding-bottom: 0;
}
.coordonnees__grille {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--gutter);
}
.coordonnees__col {
color: var(--navy);
font-size: 16px;
font-weight: 600;
line-height: 1.8em;
}
.coordonnees__titre {
padding-bottom: 0;
color: inherit;
font-size: 16px;
font-weight: 600;
line-height: 1.8em;
text-transform: uppercase;
}
.coordonnees__fiche {
font-style: normal;
}
.coordonnees__col p {
padding-bottom: 0;
}
.coordonnees__lien {
display: inline-block;
color: inherit;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 4px;
white-space: nowrap;
}
.coordonnees__lien:hover {
color: inherit;
text-decoration-thickness: 2px;
}
@media (max-width: 767px), (any-pointer: coarse) {
.coordonnees__lien {
padding: 8px 0;
}
}
@media (max-width: 980px) {
.coordonnees__grille {
grid-template-columns: 1fr;
row-gap: 30px;
}
}
.reveal {
display: inline;
padding: 0;
background: none;
border: 0;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
transition: opacity var(--transition);
}
.reveal:hover {
opacity: 0.75;
text-decoration: underline;
}
.reveal[data-state="loading"] {
opacity: 0.6;
cursor: progress;
}
.reveal[data-state="done"] {
cursor: default;
text-decoration: none;
}
.reveal[data-state="done"]:hover {
opacity: 1;
}
.reveal-echec {
position: fixed;
left: 16px;
right: 16px;
bottom: 16px;
z-index: 9995;
display: flex;
align-items: center;
gap: 14px;
max-width: 560px;
margin: 0 auto;
padding: 12px 12px 12px 18px;
background: var(--navy);
border: 2px solid var(--white);
border-radius: 3px;
box-shadow: var(--box-shadow);
color: var(--white);
font-family: var(--sans);
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 1.6;
text-align: left;
text-transform: none;
letter-spacing: normal;
white-space: normal;
}
.reveal-echec__texte {
flex: 1 1 auto;
}
.reveal-echec a,
.reveal-echec a:hover {
color: var(--white);
text-decoration: underline;
}
.reveal-echec__fermer {
flex: none;
min-height: 32px;
padding: 0 12px;
border: 1px solid var(--white);
border-radius: 3px;
background: transparent;
color: var(--white);
font-size: 14px;
line-height: 30px;
cursor: pointer;
}
.reveal-echec__fermer:hover {
background: rgba(255, 255, 255, 0.15);
}
.reveal-echec :focus-visible {
outline: 2px solid var(--white);
outline-offset: 2px;
box-shadow: none;
}
.btn {
display: inline-block;
padding: 0.3em 1em;
border: 2px solid currentColor;
border-radius: 3px;
background: transparent;
color: var(--ink);
font-family: var(--sans);
font-size: 20px;
font-weight: 400;
line-height: 1.7em;
text-align: center;
cursor: pointer;
transition: all var(--btn-transition);
}
.btn:hover {
background: rgba(0, 0, 0, 0.05);
}
.btn--light {
color: var(--white);
}
.btn--light:hover {
background: rgba(255, 255, 255, 0.2);
color: var(--white);
}
.btn--veil {
background: var(--veil-slide);
}
.btn--veil:hover {
background: rgba(40, 56, 81, 0.75);
}
.bandeau__actions .btn--light:hover {
background: rgba(40, 56, 81, 0.25);
}
.btn--navy-text {
color: var(--navy);
}
.btn--navy-text:hover {
color: var(--navy);
}
.error-page {
text-align: center;
}
.error-page h1 {
padding-bottom: 18px;
}
.error-page p {
max-width: 52ch;
margin: 0 auto;
padding-bottom: 1.4em;
}
.error-page__actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
justify-content: center;
padding-top: 10px;
}
.btn--navy {
background: var(--navy);
border-color: var(--navy);
color: var(--white);
}
.btn--navy:hover {
background: var(--navy);
color: var(--white);
}
@media (min-width: 981px) {
html {
scroll-padding-top: 64px;
}
}
.mobile-bar {
display: none;
position: sticky;
top: 0;
z-index: 10000;
height: 50px;
background: var(--mobile-bar);
}
.mobile-bar__inner {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.mobile-bar__title {
color: var(--white);
font-family: var(--dosis);
font-size: 20px;
font-weight: 700;
line-height: 50px;
}
.mobile-bar__title:hover {
color: var(--white);
}
.mobile-bar__toggle {
position: absolute;
left: 0;
top: 0;
width: 51px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: 0;
cursor: pointer;
color: var(--white);
}
.mobile-bar__toggle svg {
width: 28px;
height: 28px;
fill: currentColor;
}
.mobile-panel {
position: fixed;
top: 0;
left: 0;
z-index: 10010;
width: 270px;
max-width: 85vw;
height: 100%;
padding: 55px 0 120px;
background: var(--drawer-bg);
overflow-y: auto;
transform: translateX(-100%);
transition: transform var(--transition);
visibility: hidden;
}
.mobile-panel[data-open="true"] {
transform: translateX(0);
visibility: visible;
}
.mobile-panel__close {
position: absolute;
top: 0;
right: 3.5px;
width: 44px;
height: 44px;
display: flex;
align-items: flex-start;
justify-content: flex-end;
background: none;
border: 0;
color: var(--mobile-link);
cursor: pointer;
}
.mobile-panel__close:focus-visible {
outline-offset: -2px;
box-shadow: inset 0 0 0 6px var(--white);
}
.mobile-panel__close svg {
width: 36px;
height: 36px;
margin-top: -4px;
fill: currentColor;
}
.mobile-panel ul {
margin: 0;
padding: 0;
list-style: none;
}
.mobile-panel a {
display: block;
padding: 10px 20px;
color: var(--mobile-link);
font-family: var(--dosis);
font-size: 14px;
font-weight: 500;
line-height: 1.5em;
}
.mobile-panel a:hover {
background: var(--mobile-link);
color: var(--white);
}
.mobile-overlay {
position: fixed;
inset: 0;
z-index: 10005;
background: var(--veil-menu);
opacity: 0;
transition: opacity var(--transition);
border: 0;
padding: 0;
cursor: pointer;
}
.mobile-overlay[data-open="true"] {
opacity: 1;
}
body[data-menu-open="true"] {
overflow: hidden;
}
@media (min-width: 981px) {
.mobile-panel,
.mobile-overlay {
display: none;
}
}
.mobile-call {
display: none;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 9990;
}
.mobile-call .reveal {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
min-height: 50px;
padding: 6px 14px;
background: var(--ink);
border: 2px solid var(--white);
border-radius: 3px;
color: var(--white);
font-family: var(--sans);
font-size: 20px;
font-weight: 400;
line-height: 34px;
text-transform: uppercase;
text-decoration: none;
}
.mobile-call .reveal:hover {
opacity: 1;
text-decoration: none;
}
.mobile-call .reveal svg {
width: 22px;
height: 22px;
flex: 0 0 22px;
fill: currentColor;
color: var(--white);
}
@media (max-width: 980px) {
.masthead__top,
.masthead__main {
display: none;
}
.mobile-bar {
display: block;
}
html {
scroll-padding-top: 50px;
}
}
@media (max-width: 767px) {
.mobile-call {
display: block;
}
html[data-call-bar] {
scroll-padding-bottom: 50px;
}
html[data-call-bar] .footer__bar {
padding-bottom: 50px;
}
html[data-call-bar] .reveal-echec {
bottom: 66px;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
@media print {
.sticky-header,
.masthead,
.mobile-bar,
.mobile-panel,
.mobile-overlay,
.mobile-call,
.lightbox,
.reveal-echec {
display: none !important;
}
body {
color: #000;
background: #fff;
padding-bottom: 0;
}
a {
text-decoration: underline;
}
}