@charset "UTF-8";
/* CSS Document */

:root {
    --xxs : 10px;
    --xs : 20px;
    --s : 25px;
    --m: 50px;
    --xm : 75px;
    --l : 100px;
    --xl: 150px;
    --xxl : 200px;
}

* {
    box-sizing: border-box;
}

html {
	padding:0;
    margin:0;
    scroll-behavior: smooth;
}

body {
	padding:0;
	margin:0;
	font-size: 14px;
	line-height: normal;
	font-family: "Open Sans";
	font-weight: 400;
}

section,
header,
nav,
article,
aside,
footer,
figure
{
	padding:0;
	margin:0;
	display:block;
}

img {
	user-select: none;
	outline:none;
	line-height:0;
	font-size:0;
}

input:autofill {
    background-image: none;
    background-color: unset;
}

figure {
	font-size: 0px;
	line-height: 0px;
	display: block;
	margin: 0px;
	padding: 0px;
}

figure > img {
	display:block;
	width:100%;
	height:auto;
}

a {
	outline:none;
}

h1,h2,h3,h4,h5,h6 {
	display:block;
	padding:0;
	margin:0;
	font-weight:normal;
}


.hidden-l {
	display:none;
}


.txt-z {
	line-height:0;
	font-size:0;
}

.v-top {
	vertical-align:top;
}
.v-middle {
	vertical-align:middle;
}
.v-bottom {
	vertical-align: bottom;
}

.overflow {
	overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.full-height {
	height:100%;
}
.fh {
	height: 100vh;
}

.flex-col {
    display: flex;
    flex-direction: column;
}
.flex-row {
    display: flex;
    flex-direction: row;
}
.flex-row-reverse {
    display: flex;
    flex-direction: row-reverse;
}
.flex-center {
    align-items: center;
    justify-content: center;
}
.flex-v-center {
    align-items: center;
}


.flex-grow {
    flex-grow: 1;
    flex-shrink: 1;
}
.flex-nogrow {
    flex-grow: 0;
    flex-shrink: 0;
}

.flex-wrap {
    flex-wrap: wrap;
}
.flex-nowrap {
    flex-wrap: nowrap;
}

.clear {
	display:block;
	clear:both;
	line-height:0;
	font-size:0;
	height:0;
	margin:0;
	padding:0;
}

/* ========================================= COMMONS ============================== */

.wrapper-trace {
    display: block;
    position: fixed;
    top: 20px;
    left: 20px;
    
    z-index: 99999;
    width: calc(100% - 40px);
    height: 0;
    overflow: visible;
}
.wrapper-trace .trace {
    background-color: dodgerblue ;
    color: #FFF;
    animation-name: fadeinfadeout;
    animation-fill-mode:both;
    animation-duration:7s;  
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 10px;
    font-size: 14px;
    
    padding: 7px 15px;
    border-radius: 4px;
    margin-bottom: 10px;
}
.wrapper-trace .trace.alert {
    background-color: orangered;
    color: #FFF;
}
.wrapper-trace .trace.success {
    background-color: yellowgreen;
    color: #FFF;
}

@keyframes fadeinfadeout {
    0% {
        opacity: 0;
        visibility: hidden;
    }
    10% {
        opacity: 1;
        visibility: visible;
        height: auto;
        margin-bottom: 10px;
        padding: 7px 15px;
    }
    90% {
        opacity: 1;
        visibility: visible;
        height: auto;
        margin-bottom: 10px;
        padding: 7px 15px;
    }
    100% {
        opacity: 0;
        visibility: hidden;
        height: 0;
        margin-bottom: 0;
        padding: 0;
    }
}


.table {
	/*border-collapse: separate; border-spacing: 5px;*/
    border-collapse: collapse; 
    border-spacing: 0;
	width:100%;
}
.table th, td {
	padding: 5px;
	vertical-align: top;
}

.txt-center {
	text-align: center;
}
.txt-left {
	text-align: left;
}
.txt-right {
	text-align: right;
}
.txt-justify {
	text-align: justify;
}

.left {
	float:left;
}

.right {
	float:right;
}
.hide {
	display:none;
}
.bloc {
	display: block;
}
.ib {
	display: inline-block;
}

.margin-auto {
	margin-right: auto;
	margin-left: auto;
}

.overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

.radius {
	border-radius: 0px;
}

.transition {
	transition: all 0.2s ease-in-out;
}
.transition.fast {
	transition: all 0.1s ease-in-out;
}
.transition.slow {
	transition: all 0.5s ease-in-out;
}

.relative {
	position:relative;
}

.bg-cover {
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center center;
}
.bg-cover.top-left {
	background-position:left top;
}
.bg-cover.top-center {
	background-position:center top;
}
.bg-cover.top-right {
	background-position:right top;
}

.bg-cover.middle-left {
	background-position:left center;
}
.bg-cover.middle-center {
	background-position:center center;
}
.bg-cover.middle-right {
	background-position:right center;
}

.bg-cover.bottom-left {
	background-position:left bottom;
}
.bg-cover.bottom-center {
	background-position:center bottom;
}
.bg-cover.bottom-right {
	background-position:right bottom;
}



.bg-contain {
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center center;
}

.link {
	display:inline-block;
	text-decoration:none;
	line-height: normal;
	font-size: 12px;
	font-weight: 400;
	padding: 10px 17px;
	letter-spacing: 1px;
	cursor: pointer;
}

.border {
	border:solid 1px;
}

.link.rounded {
    border-radius: 30px;
    padding-left: 20px;
    padding-right: 20px;
}

/* ========================================= COLORS ============================== */

.bg-noir-10 {
	background-color:rgba(0,0,0,0.1);
}
.bg-noir-20 {
	background-color:rgba(0,0,0,0.2);
}
.bg-noir-30 {
	background-color:rgba(0,0,0,0.3);
}
.bg-noir-40 {
	background-color:rgba(0,0,0,0.4);
}
.bg-noir-50 {
	background-color:rgba(0,0,0,0.5);
}
.bg-noir-60 {
	background-color:rgba(0,0,0,0.6);
}
.bg-noir-70 {
	background-color:rgba(0,0,0,0.7);
}
.bg-noir-80 {
	background-color:rgba(0,0,0,0.8);
}
.bg-noir-90 {
	background-color:rgba(0,0,0,0.9);
}


.bg-noir {
	background-color:#000;
}
.bg-blanc {
	background-color:#FFF;
}
.bg-rouge {
    background-color:#C00;
}
.bg-orange {
    background-color: orange;
}


.b-noir {
	border-color:#000;
}
.b-blanc {
	border-color:#FFF;
}

.f-noir {
	color:#000;
}
.f-blanc {
	color:#FFF;
}



.page {
    width: 100%;
    max-width:1020px;    
    position: relative;
}
.page.xxxl {
	max-width:1800px;
}

.page.xxl {
	max-width:1600px;
}
.page.xl {
	max-width:1440px;
}
.page.l {
	max-width:1200px;
}
.page.m {
	max-width:900px;
}
.page.s {
	max-width:800px;
}
.page.xs {
	max-width: 700px;
}
.page.xxs {
	max-width: 600px;
}
.page.xxxs {
	max-width: 500px;
}

.page.xxxxs {
	max-width: 400px;
}


.col-100-l {
	width:100%;
}
.col-90-l {
	width:90%;
}
.col-80-l {
	width:80%;
}
.col-70-l {
	width:70%;
}
.col-60-l {
	width:60%;
}
.col-50-l {
	width:50%;
}
.col-40-l {
	width:40%;
}
.col-30-l {
	width:30%;
}
.col-20-l {
	width:20%;
}
.col-10-l {
	width:10%;
}

.col-33-l {
	width:33.333333%;
}
.col-66-l {
	width:66.666666%;
}

.col-25-l {
	width:25%;
}
.col-75-l {
	width:75%;
}



.padd-xxs {
	padding: var(--xxs);
}
.padd-l-xxs {
	padding-left: var(--xxs);
}
.padd-r-xxs {
	padding-right: var(--xxs);
}
.padd-t-xxs {
	padding-top: var(--xxs);
}
.padd-b-xxs {
	padding-bottom: var(--xxs);
}
.padd-h-xxs {
	padding-left: var(--xxs);
	padding-right: var(--xxs);
}
.padd-v-xxs {
	padding-top: var(--xxs);
	padding-bottom: var(--xxs);
}



.padd-xs {
	padding: var(--xs);
}
.padd-l-xs {
	padding-left: var(--xs);
}
.padd-r-xs {
	padding-right: var(--xs);
}
.padd-t-xs {
	padding-top: var(--xs);
}
.padd-b-xs {
	padding-bottom: var(--xs);
}
.padd-h-xs {
	padding-left: var(--xs);
	padding-right: var(--xs);
}
.padd-v-xs {
	padding-top: var(--xs);
	padding-bottom: var(--xs);
}


.padd-s {
	padding: var(--s);
}
.padd-l-s {
	padding-left: var(--s);
}
.padd-r-s {
	padding-right: var(--s);
}
.padd-t-s {
	padding-top: var(--s);
}
.padd-b-s {
	padding-bottom: var(--s);
}
.padd-h-s {
	padding-left: var(--s);
	padding-right: var(--s);
}
.padd-v-s {
	padding-top: var(--s);
	padding-bottom: var(--s);
}


.padd-m {
	padding: var(--m);
}
.padd-l-m {
	padding-left: var(--m);
}
.padd-r-m {
	padding-right: var(--m);
}
.padd-t-m {
	padding-top: var(--m);
}
.padd-b-m {
	padding-bottom: var(--m);
}
.padd-h-m {
	padding-left: var(--m);
	padding-right: var(--m);
}
.padd-v-m {
	padding-top: var(--m);
	padding-bottom: var(--m);
}

.padd-xm {
	padding: var(--xm);
}
.padd-l-xm {
	padding-left: var(--xm);
}
.padd-r-xm {
	padding-right: var(--xm);
}
.padd-t-xm {
	padding-top: var(--xm);
}
.padd-b-xm {
	padding-bottom: var(--xm);
}
.padd-h-xm {
	padding-left: var(--xm);
	padding-right: var(--xm);
}
.padd-v-xm {
	padding-top: var(--xm);
	padding-bottom: var(--xm);
}

.padd-l {
	padding: var(--l);
}
.padd-l-l {
	padding-left: var(--l);
}
.padd-r-l {
	padding-right: var(--l);
}
.padd-t-l {
	padding-top: var(--l);
}
.padd-b-l {
	padding-bottom: var(--l);
}
.padd-h-l {
	padding-left: var(--l);
	padding-right: var(--l);
}
.padd-v-l {
	padding-top: var(--l);
	padding-bottom: var(--l);
}


.padd-xl {
	padding: var(--xl);
}
.padd-l-xl {
	padding-left: var(--xl);
}
.padd-r-xl {
	padding-right: var(--xl);
}
.padd-t-xl {
	padding-top: var(--xl);
}
.padd-b-xl {
	padding-bottom: var(--xl);
}
.padd-h-xl {
	padding-left: var(--xl);
	padding-right: var(--xl);
}
.padd-v-xl {
	padding-top: var(--xl);
	padding-bottom: var(--xl);
}

.padd-xxl {
	padding: var(--xxl);
}
.padd-l-xxl {
	padding-left: var(--xxl);
}
.padd-r-xxl {
	padding-right: var(--xxl);
}
.padd-t-xxl {
	padding-top: var(--xxl);
}
.padd-b-xxl {
	padding-bottom: var(--xxl);
}
.padd-h-xxl {
	padding-left: var(--xxl);
	padding-right: var(--xxl);
}
.padd-v-xxl {
	padding-top: var(--xxl);
	padding-bottom: var(--xxl);
}


.wrapper-v-center {
	display: flex;
    align-items: center;
    justify-content: center;
}


.gap-xxs {
    gap: var(--xxs);
}
.gap-h-xxs {
    column-gap: var(--xxs);
}

.gap-xs {
    gap: 20px;
}
.gap-h-xs {
    column-gap: var(--xs);
}

.gap-s {
    gap: var(--s);
}
.gap-h-s {
    column-gap: var(--s);
}

.gap-m {
    gap: var(--m);
}
.gap-h-m {
    column-gap: var(--m);
}

.gap-xm {
    gap: var(--xm);
}
.gap-h-xm {
    column-gap: var(--xm);
}

.gap-l {
    gap: var(--l);
}
.gap-h-l {
    column-gap: var(--l);
}

.gap-xl {
    gap: var(--xl);
}
.gap-h-xl {
    column-gap: var(--xl);
}

.page.flex {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    
}

.page.flex > * {
    flex-shrink:0;
    flex-grow: 0;
}
.flex .autogrow {
    flex-shrink:1;
    flex-grow: 1;
}

.flex.nowrap {
    flex-wrap: nowrap;
}


.grecaptcha-badge {
    display: none;
}