@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');

@keyframes subtle_hint {
	0% {transform: translateY(-10px) translateX(5px); opacity: 0;}
	100% {transform: translateY(0) translateX(0); opacity: 1;}
}
@keyframes appear_like_stamp {
	0% {transform: scale(0.9); opacity: 0;}
	60% {transform: scale(1.05); opacity: 0.7;}
	100% {transform: scale(1); opacity: 1;}
}
@keyframes appear_mobile_menu {
	0% {transform: scale(0.9) translateX(20px); opacity: 0.5;}
	60% {transform: scale(1.02) translateX(0px); opacity: 0.7;}
	100% {transform: scale(1) translateX(0px); opacity: 1;}
}

* {box-sizing: border-box;}
*:focus {outline: none;}
html {min-height: 100%; font-size: 20px; overflow-x: hidden;}
body {margin: 0; padding: 0; font-family: 'Poppins', sans-serif; color: #253948; background-color: #ffffff;}

a {text-decoration: none; color: #e53a24;}
a:hover {text-decoration: underline;}
a.no-underline:hover {text-decoration: none;}
a.underline {text-decoration: underline;}
a.underline:hover {text-decoration: none;}

b {font-weight: 500;}
b>b {font-weight: 600;}
img {display: block; max-width: 100%;}
form {margin: 0px;}
label {display: inline-block; vertical-align: top; font-size: inherit; font-weight: normal;}
button {cursor: pointer;}


h1, .h1 {line-height: 50px; margin: 20px 0px; padding: 0px 10px; font-size: 44px; font-weight: 500; text-align: center;}
h2, .h2 {line-height: 40px; margin: 20px 0px; font-size: 36px; font-weight: normal; text-align: center;}

.website-wholestatic {display: flex; min-width: 320px; min-height: 100vh; overflow: hidden; flex-direction: column;}
.website-main {flex: 1;}
.relative {position: relative;}


/* COMMON ELEMENTS */
.lazy-loader {min-height: 50px; background-image: url(/files/images/icons/pending-stripes.gif);}
.page-block {padding-top: 50px; padding-bottom: 50px;}
.width-100 {width: 100px;} .width-200 {width: 200px;} .width-300 {width: 300px;} .width-400 {width: 400px;} .width-500 {width: 500px;} .width-600 {width: 600px;}
.mw-100 {max-width: 100px;} .mw-200 {max-width: 200px;} .mw-300 {max-width: 300px;} .mw-400 {max-width: 400px;} .mw-500 {max-width: 500px;} .mw-600 {max-width: 600px;}
.b-1, .bx-1, .br-1 {border-right: 1px solid;} .b-1, .bx-1, .bl-1 {border-left: 1px solid;} .b-1, .by-1, .bt-1 {border-top: 1px solid;} .b-1, .by-1, .bb-1 {border-bottom: 1px solid;}

.color-grey {color: #7993a7;}
.color-grey-light {color: #cfd8df;}
.color-red {color: #e53a24;}
.color-red-light {color: #f4ada4;}
.color-yellow {color: #c9a218;}
.color-yellow-light {color: #f4e3a4;}
.bg-grey {background-color: #dde5eb;}
.bg-grey-light {background-color: #f6f8f9;}

.normal-container-width {width: 1280px; margin-left: auto; margin-right: auto;}
.normal-container-elements p {margin: 10px 0px; text-align: justify;}
.normal-container-block {padding-top: 50px; padding-bottom: 50px;}
.fonts-bold {font-weight: 500;}
.fonts-italic {font-style: italic;}
.fonts-10 {font-size: 10px;}
.fonts-12 {font-size: 12px;}
.fonts-14 {font-size: 14px;}
.fonts-16 {font-size: 16px;}
.fonts-18 {font-size: 18px;}
.fonts-20 {font-size: 20px;}
.fonts-22 {font-size: 22px;}
.fonts-24 {font-size: 24px;}

.external-link {white-space: nowrap;}
.external-link:after {content: "\f08e"; vertical-align: top; margin-left: 3px; font-family: FontAwesome; font-size: 0.7em;}

.soft-label-input {margin-top: 30px;}
.soft-label-input label {position: relative; display: block; width: 100%;}
.soft-label-input input {height: 50px;}
.soft-label-input textarea {min-height: 200px;}
.soft-label-input input, .soft-label-input input:focus, .soft-label-input textarea, .soft-label-input textarea:focus {color: #7993a7;}
.soft-label-input label span {position: absolute; top: 10px; left: 15px; height: 30px; line-height: 30px; color: #7993a7; transition: 0.3s all;}
.soft-label-input label *:focus+span, .soft-label-input label *:not(:placeholder-shown)+span {top: -25px; left: 5px; height: 25px; line-height: 25px; font-size: 12px; color: inherit;}


/* Background ornament */
.bg-ornament-top {position: relative; padding-top: 50px;}
.bg-ornament-top:before {content: ""; position: absolute; left: 0px; right: 0px; top: 0px; height: 50px; background-size: auto 100%; background-position: 50% 0%;}
.bg-ornament-top-center-01:before {background-image: url(/files/images/patterns/pattern-short-01.png); background-repeat: no-repeat;}
.bg-ornament-top-center-02:before {background-image: url(/files/images/patterns/pattern-short-02.png); background-repeat: no-repeat;}
.bg-ornament-top-width-01:before {background-image: url(/files/images/patterns/pattern-long-01.png); background-repeat: repeat-x;}
.bg-ornament-top-width-02:before {background-image: url(/files/images/patterns/pattern-long-02.png); background-repeat: repeat-x;}
.bg-ornament-top-width-03:before {background-image: url(/files/images/patterns/pattern-long-03.png); background-repeat: repeat-x;}
.bg-ornament-top-width-04:before {background-image: url(/files/images/patterns/pattern-long-04.png); background-repeat: repeat-x;}
.bg-ornament-top-width-05:before {background-image: url(/files/images/patterns/pattern-long-05.png); background-repeat: repeat-x;}
.bg-ornament-top-width-06:before {background-image: url(/files/images/patterns/pattern-long-06.png); background-repeat: repeat-x;}
.bg-ornament-top-width-07:before {background-image: url(/files/images/patterns/pattern-long-07.png); background-repeat: repeat-x;}
.bg-ornament-top-width-08:before {background-image: url(/files/images/patterns/pattern-long-08.png); background-repeat: repeat-x;}
.bg-ornament-top-width-09:before {background-image: url(/files/images/patterns/pattern-long-09.png); background-repeat: repeat-x;}
.bg-ornament-top-width-10:before {background-image: url(/files/images/patterns/pattern-long-10.png); background-repeat: repeat-x;}
.bg-ornament-bottom {position: relative; padding-bottom: 50px;}
.bg-ornament-bottom:after {content: ""; position: absolute; left: 0px; right: 0px; bottom: 0px; height: 50px; background-size: auto 100%; background-position: 50% 0%;}
.bg-ornament-bottom-center-01:after {background-image: url(/files/images/patterns/pattern-short-01.png); background-repeat: no-repeat;}
.bg-ornament-bottom-center-02:after {background-image: url(/files/images/patterns/pattern-short-02.png); background-repeat: no-repeat;}
.bg-ornament-bottom-width-01:after {background-image: url(/files/images/patterns/pattern-long-01.png); background-repeat: repeat-x;}
.bg-ornament-bottom-width-02:after {background-image: url(/files/images/patterns/pattern-long-02.png); background-repeat: repeat-x;}
.bg-ornament-bottom-width-03:after {background-image: url(/files/images/patterns/pattern-long-03.png); background-repeat: repeat-x;}
.bg-ornament-bottom-width-04:after {background-image: url(/files/images/patterns/pattern-long-04.png); background-repeat: repeat-x;}
.bg-ornament-bottom-width-05:after {background-image: url(/files/images/patterns/pattern-long-05.png); background-repeat: repeat-x;}
.bg-ornament-bottom-width-06:after {background-image: url(/files/images/patterns/pattern-long-06.png); background-repeat: repeat-x;}
.bg-ornament-bottom-width-07:after {background-image: url(/files/images/patterns/pattern-long-07.png); background-repeat: repeat-x;}
.bg-ornament-bottom-width-08:after {background-image: url(/files/images/patterns/pattern-long-08.png); background-repeat: repeat-x;}
.bg-ornament-bottom-width-09:after {background-image: url(/files/images/patterns/pattern-long-09.png); background-repeat: repeat-x;}
.bg-ornament-bottom-width-10:after {background-image: url(/files/images/patterns/pattern-long-10.png); background-repeat: repeat-x;}


/* HEADER */
.header-top-image {position: relative; height: 0px; padding-bottom: 40%;}
.header-top-image:after {content: ""; position: absolute; left: 0px; right: 0px; bottom: 0px; height: 0px; padding-bottom: 15%; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));}
.header-top-image img {position: absolute; left: -100%; right: -100%; max-width: none; min-width: 100%; min-height: 100%; margin: auto; bottom: 0px;}

.header-menu-container {height: 40px; position: relative;}
.header-menu-wrapper {position: absolute; top: 0px; left: 0px; width: 100%; height: 40px; box-shadow: 0px 0px 8px #000000; background: #1778c8; z-index: 1000;}
.header-menu-wrapper:after {content: ""; position: absolute; left: 0px; right: 0px; top: 0%; height: 5px; background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));}
.header-menu-container.sticked .header-menu-wrapper {position: fixed;}
.header-menu-list {display: flex; height: 40px; margin-top: 0px; margin-bottom: 0px; padding: 0px; justify-content: space-between; align-items: center;}
.header-menu-item {position: relative;}
.header-menu-item a, .header-menu-item span {position: relative; padding: 2px 5px; color: #d5eafa; cursor: pointer; transition: 0.2s all;}
.header-menu-item a:hover, .header-menu-item span:hover {color: #ffffff; text-decoration: none;}
.header-menu-item a:after {content: ""; position: absolute; bottom: 0px; left: 50%; right: 50%; height: 2px; background: #d5eafa; transition: 0.2s all;}
.header-menu-item a:hover:after {left: 0%; right: 0%;}
.header-submenu-list {position: absolute; right: 0px; top: 90%; display: none; min-width: 220px; padding: 5px 10px; border-radius: 3px; box-shadow: 2px 3px 5px #0d4573;
	background: #248ee5; animation: subtle_hint 0.3s ease;
}
.header-submenu-rotate-icon {transition: 0.2s all;}
.header-menu-item:hover .header-submenu-list {display: block;}
.header-menu-item:hover .header-submenu-rotate-icon {transform: rotate(180deg);}
.header-submenu-item {white-space: nowrap;}

.header-mobile-menu-opener {display: none; position: fixed; top: 10px; right: 10px; width: 60px; height: 60px; border: 3px solid; border-radius: 30px; font-size: 30px;
	color: #7993a7; cursor: pointer; background: #f6f8f9; z-index: 2; transition: 0.3s all; animation: appear_like_stamp 0.3s ease;
}
.header-mobile-menu-opener:hover {color: #0d4573;}
.header-mobile-menu-wrapper {position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; background: #cfd8df; z-index: 1; transform-origin: 100% 0%; animation: appear_mobile_menu 0.3s ease;}
.header-mobile-menu-list {max-height: 100%; overflow-x: hidden; overflow-y: auto;}
.header-mobile-menu-item {margin: 10px 0px; padding: 5px 20px; color: #38566D; transition: 0.3s all;}
.header-mobile-menu-item:hover {color: #0d4573;}
.header-mobile-menu-item a {color: inherit;}

/* CONTENT */
.breadcrumbs {padding: 5px 10px; white-space: nowrap; overflow: hidden;}
.breadcrumbs-item {display: inline-block; vertical-align: text-bottom; height: 25px; line-height: 25px; font-size: 16px; color: #acc3d5;}
.breadcrumbs .breadcrumbs-separator {color: #dde5eb;}
.blockquote-block {width: 600px;}
.halfpage-cards {width: 50%;}
.card-part-image {width: 120px;}

/* FOOTER */
.footer-container {padding: 50px 0px 0px 0px;}
.footer-container a {color: inherit;}
.footer-container a.footer-colored-link {color: #f08c7f;}
.footer-content {display: flex; margin-bottom: 50px; justify-content: center; align-items: stretch;}
.footer-content-column {padding: 0px 20px;}
.footer-sign-image {width: 30px; margin: 0px auto;}
.footer-copyright {padding: 10px; text-align: center; font-size: 14px;}

/* PAGES */
.homepage-intro-sign {display: flex; justify-content: space-around; align-items: center;}
.homepage-intro-sign-decoration {width: 300px;}
.homepage-intro-sign-image {width: 250px; margin: auto;}
.homepage-intro-sign-caption {position: absolute; left: 10px; right: 10px; bottom: 0px; text-align: center; color: #c9a218;}
.homepage-cards {width: 25%;}
.homepage-valeurs-left {width: 60%;}
.homepage-valeurs-right {width: 40%;}

.contact-part-left {width: 40%;}
.contact-part-right {width: 60%;}

.articles-list {display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 20px;}