html {
width: 100%;
height: 100%}
body {
margin: 0px;
padding: 0px;
line-height: 1.25em;
min-width: 100%;
min-height: 100%;
width: 100%;
overflow-x: hidden;
word-wrap: break-word}
section, footer { width: 100%}
section { min-height: 1px}
footer { padding: 1em 0 }
article { width: auto}
h1 { font-size: 1.4em}
section h1{
padding: 0.3em 0.2em 0.2em;
margin: 0 0 2em;
line-height: 1em;
text-align: center;
text-transform: uppercase}
h2 { font-size: 1.1em}
section h2 {
padding: 0 2em 0.2em;
line-height: 1em;
text-transform: uppercase}
h1, h2 { margin: 0 0 1em}
h3, h4, h5, h6 { font-size: 1em}
section h3 {
margin: 0 0 1em;
padding: 0 1em}
h1, h2, h3, h4, h5, h6 { line-height: 1.1em}
p {
display: block;
margin: 0 0 1em;
text-indent: 0}
ol { counter-reset: ol_list}
ol > li {
position: relative;
padding-left: 2em}
section ol:not(.slides):not(.align_center) > li:before {
counter-increment: ol_list;
content: counter(ol_list) ".";
position: absolute;
left: 0}
#main ul:not(.slides):not(.flex-direction-nav):not(.align_center):not(.slider-pagi) {
margin: 0 auto 2em;
width: 85%}
#main ul:not(.slides):not(.flex-direction-nav):not(.align_center):not(.slider-pagi) > li {
margin: 0.5em 0 ;
padding: 0 0 0 2em;
position: relative}
#main ul:not(.slides):not(.flex-direction-nav):not(.align_center):not(.slider-pagi) > li:before {
content: '•';
position: absolute;
left: 0;
top: 45%;
line-height: 0.3em}
#main ul:not(.slides):not(.flex-direction-nav) > li { margin: 0.5em 0 }
a {
text-decoration: none;
border-bottom: 1px dashed;
transition: all 0.3s linear}
a:hover {
border-bottom: 1px solid;
transition: all 0.3s linear}
*.no_border,
*.no_border:hover { border: none !important}
section *:first-child { margin-top: 0 !important}
section *:last-child,
.container_flex.medium:nth-last-child(2) { margin-bottom: 0 !important}
img {
border: none;
max-width: 100%;
max-height: 100%}
img.mini_logo {
max-height: 1em;
vertical-align: middle}
img.icon {
max-height: 1.5em;
vertical-align: bottom}
figure img { display: block}
sup {
vertical-align: super;
font-size: 0.6em}
.inline_block { display: inline-block}
.flex { display: flex}
.flex.wrap { flex-wrap: wrap}
.flex.no_wrap { flex-wrap: nowrap}
.flex.content_center { justify-content: center}
.flex.content_around { justify-content: space-around}
.flex.content_between { justify-content: space-between}
@media (max-width: 1024px) {
.flex.content_between { justify-content: center}
}
.flex.content_start { justify-content: flex-start}
.flex.content_end { justify-content: flex-end}
.flex.items_center { align-items: center}
.flex.items_start { align-items: flex-start}
.flex.items_stretch { align-items: stretch}
.flex.items_end { align-items: flex-end}
.flex > .container_flex.xxxlarge { width: 100%}
.flex > .container_flex.xxlarge { width: 88%}
.flex > .container_flex.xlarge { width: calc(6.91 * (86% / 7))}
.flex > .container_flex.large { width: 74%}
.flex > .container_flex.xmedium { width: 60%}
.flex > .container_flex.medium {
width: 49%;
margin: 0 1%}
.flex > .container_flex.smedium { width: 40%}
.container_flex.medium:nth-child(2n-1),
.container_flex.smedium:nth-child(2n-1) { margin-left: 0}
.container_flex.medium:nth-child(2n),
.container_flex.smedium:nth-child(2n) { margin-right: 0}
.container_flex.xlarge + .container_flex:not(.xxsmall):not(.xsmall),
.container_flex.medium:nth-child(n+3),
.container_flex.smedium:nth-child(n+3),
.flex > .container_flex.small:nth-child(n+4) { margin-top: 2em}
.flex > .container_flex.small {
width: 32%;
margin: 0 1%}
.flex > .container_flex.small:nth-child(3n+1) { margin-left: 0}
.flex > .container_flex.small:nth-child(3n) { margin-right: 0}
.flex > .container_flex.xsmall {
width: 23.5%;
margin: 0 1%}
.flex > .container_flex.xsmall:nth-child(4n+1) { margin-left: 0}
.flex > .container_flex.xsmall:nth-child(4n) { margin-right: 0}
.flex > .container_flex.xsmall:nth-child(n+5) { margin-top: 2em}
.flex > .container_flex.xxsmall {
width: 15%;
margin: 0 1%}
.flex > .container_flex.xxsmall:nth-child(n+7) { margin-top: 2em}
.flex > .container_flex.xxsmall:nth-child(6n+1) { margin-left: 0}
.flex > .container_flex.xxsmall:nth-child(6n) { margin-right: 0}
.flex > .container_flex.s_xxsmall { width: calc(100% / 7)}
@media (max-width: 1024px) {
.flex > .container_flex.xmedium,
.flex > .container_flex.medium ,
.flex > .container_flex.smedium,
.flex > .container_flex.small,
.flex > .container_flex.xsmall{
width: 48% !important;
margin: 0 1%}
.flex.content_between > .container_flex.large,
.flex.content_between > .container_flex.xmedium,
.flex.content_between > .container_flex.medium ,
.flex.content_between > .container_flex.smedium,
.flex.content_between > .container_flex.small,
.flex.content_between > .container_flex.xsmall { margin: 0 2%}
.flex > .container_flex.s_xxsmall {
width: auto !important;
margin: 0 1%}
.flex > .container_flex.small:nth-child(3n+1),
.flex > .container_flex.xsmall:nth-child(4n+1),
.flex > .container_flex.xxsmall:nth-child(6n+1) { margin-left: 1%}
.flex > .container_flex.small:nth-child(3n),
.flex > .container_flex.xsmall:nth-child(4n),
.flex > .container_flex.xxsmall:nth-child(6n) { margin-right: 1%}
.flex > .container_flex.xlarge:nth-child(2n-1),
.flex > .container_flex.large:nth-child(2n-1),
.flex > .container_flex.xmedium:nth-child(2n-1),
.flex > .container_flex.medium:nth-child(2n-1) ,
.flex > .container_flex.smedium:nth-child(2n-1) ,
.flex > .container_flex.small:nth-child(2n-1),
.flex > .container_flex.xsmall:nth-child(2n-1),
.flex > .container_flex.s_xxsmall:nth-child(2n-1) { margin-left: 0}
.flex > .container_flex.xlarge:nth-child(2n),
.flex > .container_flex.large:nth-child(2n),
.flex > .container_flex.xmedium:nth-child(2n),
.flex > .container_flex.medium:nth-child(2n),
.flex > .container_flex.smedium:nth-child(2n),
.flex > .container_flex.small:nth-child(2n),
.flex > .container_flex.xsmall:nth-child(2n),
.flex > .container_flex.s_xxsmall:nth-child(2n) { margin-right: 0}
.flex > .container_flex.xlarge:nth-child(n+3),
.flex > .container_flex.large:nth-child(n+3),
.flex > .container_flex.xmedium:nth-child(n+3),
.flex > .container_flex.medium:nth-child(n+3),
.flex > .container_flex.smedium:nth-child(n+3),
.flex > .container_flex.small:nth-child(n+3),
.flex > .container_flex.xsmall:nth-child(n+3),
.flex > .container_flex.xxsmall:nth-child(n+4),
.flex > .container_flex.s_xxsmall:nth-child(n+3) { margin-top: 4em}
.flex > .container_flex.xxsmall {
width: 30%;
margin: 0 1%}
.flex > .container_flex.xxsmall:nth-child(3n+1) { margin-left: 0}
.flex > .container_flex.xxsmall:nth-child(3n) { margin-right: 0}
.flex > .container_flex.xlarge > .container_flex,
.flex > .container_flex.large > .container_flex,
.flex > .container_flex.xmedium > .container_flex,
.flex > .container_flex.medium > .container_flex,
.flex > .container_flex.smedium > .container_flex,
.flex > .container_flex.small > .container_flex,
.flex > .container_flex.xsmall > .container_flex,
.flex > .container_flex.s_xxsmall > .container_flex {
width: 100% !important;
margin: 0 0 2em !important}
}
@media (max-width: 768px) {
.flex > .container_flex.xlarge,
.flex > .container_flex.large,
.flex > .container_flex.slarge,
.flex > .container_flex.xmedium,
.flex > .container_flex.medium ,
.flex > .container_flex.smedium,
.flex > .container_flex.small,
.flex > .container_flex.xsmall,
.flex > .container_flex.xxsmall {
width: 100% !important;
margin: 0 0 4em !important}
.flex > .container_flex.xlarge:last-child,
.flex > .container_flex.large:last-child,
.flex > .container_flex.slarge:last-child,
.flex > .container_flex.xmedium:last-child,
.flex > .container_flex.medium:last-child ,
.flex > .container_flex.smedium:last-child,
.flex > .container_flex.small:last-child,
.flex > .container_flex.xsmall:last-child,
.flex > .container_flex.xxsmall:last-child { margin-bottom: 0 !important}
.flex > .container_flex.s_xxsmall {
width: 30%;
margin: 0 1%}
.flex > .container_flex.s_xxsmall:nth-child(3n+1) { margin-left: 0}
.flex > .container_flex.s_xxsmall:nth-child(3n) { margin-right: 0}
.flex > .container_flex.s_xxsmall:nth-child(n+4) { margin-top: 2em}
}
@media screen and (max-width: 480px) {
.flex > .container_flex.xxsmall {
width: 100%;
margin: 2em 0 0}
.flex > .container_flex.s_xxsmall {
width: 48%;
margin: 0 1%}
.flex > .container_flex.s_xxsmall:nth-child(3n+1) { margin-left: 1%}
.flex > .container_flex.s_xxsmall:nth-child(3n) { margin-right: 1%}
.flex > .container_flex.s_xxsmall:nth-child(2n+1) { margin-left: 0}
.flex > .container_flex.s_xxsmall:nth-child(2n) { margin-right: 0}
.flex > .container_flex.s_xxsmall:nth-child(n+3) { margin-top: 2em}
}
@media screen and (max-width: 360px) {
.flex > .container_flex.s_xxsmall {
width: 100%;
margin: 2em 0 0}
}
.container_flex.xxxsmall { width: 10%}
.container_flex.xxxxsmall { width: 5%}
.flex.content_center > * { margin: 0 1%}
.flex.content_center > *:first-child { margin-left: 0}
.flex.content_center > *:last-child { margin-right: 0}
.flex > .container_flex:first-child { margin-left: 0}
.flex > .container_flex:last-child { margin-right: 0}
.flex > .container_flex.xxxlarge {
margin-left: 0;
margin-right: 0}
.container_flex.order_1 { order: 1}
.container_flex.order_2 { order: 2}
.container_flex.order_3 { order: 3}
.container_flex.order_4 { order: 4}
.container_flex.order_5 { order: 5}
.container_flex.order_6 { order: 6}
.container_flex.order_7 { order: 7}
.container_flex.order_8 { order: 8}
.container_flex.order_9 { order: 9}
.container_flex.order_10 { order: 10}
.master { min-height: calc(100vh - 5em)}
.master + .center{
max-width: 100%;
padding: 0;
margin: 0 auto !important}
@media screen and (max-height: 480px), screen and (max-width: 768px) {
.master + .center {
margin-left: 0 !important;
margin-right: 0 !important}
}
.full_height { min-height: 100vh}
.align_left { text-align: left}
.align_center { text-align: center}
.align_right { text-align: right}
.align_justify { text-align: justify}
.relative { position: relative}
.absolute { position: absolute}
.uppercase { text-transform: uppercase}
.lowercase { text-transform: lowercase}
.font_small { font-size: 0.8em}
.font_large { font-size: 1.3em}
.indent { text-indent: 1em}
.clear { clear: both}
.help { cursor: help}
em, i, .italic { font-style: italic}
i.icon {
font-style: normal;
opacity: 1}
i.icon:before { padding-right: 6px}
i.icon:after { padding-left: 6px}
i.icon.only:before , i.icon.only:after { padding: 0}
svg.icon.before { margin-right: 0.5em}
svg.icon.after { margin-left: 0.5em}
strong, b { font-weight: bold}
u { text-decoration: underline}
blockquote {
text-align: left;
text-indent: 0;
width: 100%;
margin: 0 auto 2em;
font-size: 1em;
line-height: 1.3em;
position: relative}
blockquote:before,
blockquote:after {
display:inline-block;
width: 0.7em;
height: 0.7em}
blockquote:before {
content: url('data:image/svg+xml; utf8, ');
margin-right: 0.5em;
position: relative;
top: -0.5em;
line-height: 0}
blockquote:after {
content: url('data:image/svg+xml; utf8, ');
margin-left: 0.5em;
position: relative;
bottom: -0.5em;
line-height: 0}
@media screen and (max-width: 768px) {
blockquote { padding: 0 1.5em}
blockquote:before {
margin-right: 0;
position: absolute;
top: 50%;
bottom: auto;
left: 0;
transform: translateY(-50%)}
blockquote:after {
margin-left: 0;
position: absolute;
top: 50%;
bottom: auto;
right: 0;
transform: translateY(-50%)}
}
fieldset { margin: 0 0 2em}
fieldset.align_center { width: 100%}
fieldset label > i:before { vertical-align: inherit !important}
legend {
text-transform: uppercase;
font-size: 1.2em;
margin: 0 0 1em;
padding: 0 0 0.5em;
width: 100%}
fieldset > .flex { margin: 1em 0 0}
fieldset > .flex + div { margin-top: 1em}
label, input, textarea, select, option, .chk_box { width: 48%}
.captcha svg { margin: 0 0.25em !important}
.file_input { width: calc(48% + 2px)}
.chk_box { min-height: 2em}
input, textarea, select, option {
border: 1px solid transparent;
padding: 0.2em 0;
border-radius: 1px;
text-align: center;
position: relative;
font-size: 1em;
width: 100%;
transition: all 0.3s ease-in}
input:focus, textarea:focus { transition: all 0.3s ease-in}
textarea {
min-height: 6em;
resize: vertical}
form .flex.content_end > .button { margin: 0 0.5em}
form .flex.content_end > .button:first-child { margin-left: 0}
form .flex.content_end > .button:last-child { margin-right: 0}
label sup {
vertical-align: super;
font-size: 0.7em;
padding-left: 0.3em;
white-space: nowrap}
input:focus + .i-form:after {
content: '\f104';
font-size: 1.3em;
position: absolute;
left: 100%;
padding: 0 !important}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
font-size: 0.7em;
font-style: italic}
fieldset.captcha > p {
font-size: 0.7em;
margin: 1em 0}
label.captcha { text-align: right}
label em {
font-weight: bold;
font-size: 1.2em}
input.captcha {
width: 24%;
vertical-align: top}
.file-button {
position: relative;
cursor: pointer;
margin: 0 0 1em}
.input-file {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
border: 0;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
font-size: 0}
span .i-file:before { content: '\f1c5'}
input[type=number] { -moz-appearance: textfield}
input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button,
input::-webkit-calendar-picker-indicator{ -webkit-appearance: none}
input::-webkit-calendar-picker-indicator:hover { background: none}
input::-o-inner-spin-button,
input::-o-outer-spin-button,
input::-o-calendar-picker-indicator { -o-appearance: none}
input::-o-calendar-picker-indicator:hover { background: none}
.img_input {
vertical-align: top;
float: right;
margin: 0 3% 2em 0;
position: relative}
.img_input a {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center}
[type="checkbox"] { border: none}
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
position: absolute;
top: 50%;
left: 0;
width: 0 !important;
opacity: 0;
z-index: -2;
border: none;
height: 0}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
display: flex;
justify-content: start;
position: relative;
padding-left: 0;
margin: 0 auto;
cursor: pointer;
width: auto}
[type="checkbox"] + label > span {
display: inline-block;
text-transform: uppercase}
[type="checkbox"] + label.toggle > span {
display: flex;
align-items: center;
justify-content: space-between}
[type="checkbox"]:not(:checked) + label > span.on,
[type="checkbox"]:checked + label > span.off {
max-height: 0;
max-width: 0;
overflow: hidden}
[type="checkbox"] + label > span > svg.icon { vertical-align: middle}
[type="checkbox"] + label > span.off > svg.icon .fa-secondary { opacity: 0.6}
[type="checkbox"] + label > span.on > svg.icon .fa-secondary { fill: #fafafa}
[type="checkbox"] + label > span.on {
font-weight: bold;
color: #a1c587;
position: relative}
[type="checkbox"] + label.disabled > span.on {
font-weight: bold;
color: inherit}
[type="checkbox"] + label > span.off { font-weight: bold}
.file_button {
display: inline-block;
position: relative;
line-height: 1.2em;
margin: 0;
padding: 0.1em 0.4em;
font-size: 1em;
cursor: pointer;
width: 100%;
transition: 0.3s all linear}
.file-button:hover { transition: 0.3s all linear}
.container_file_button .file_button { width: 40%}
.input_file {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
border: 0;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
font-size: 0}
input:-moz-read-only{
opacity: 0.5;
cursor: not-allowed}
input:read-only,
input.disabled {
opacity: 0.5;
cursor: not-allowed}
select + svg {
position: absolute;
top: 0;
left: calc(100% - 2em);
right: 0;
display: block;
pointer-events: none;
font-size: 0.8em;
transition: all 0.3s linear;
height: 100% !important;
width: 2em !important;
border-radius: 999px;
padding: 0.4em}
form + p {
margin-top: 1em;
font-size: 0.8em}
form > fieldset > p { margin: 0 0 1em}
form > fieldset > p:last-child { margin: 0}
.required,
.required:focus{
background: #ff8a8a;
border-color: #d63030}
#erreur-champs {
color: #860000;
background: #ff8a8a;
text-align: center;
padding: 0.2em 4em 0.2em 0.5%;
margin: 0.5em 0;
font-weight: bold;
position: relative}
.bloc-info:last-child { margin-bottom: 1em !important}
.bloc-info {
margin: 0 auto 1em !important;
min-height: 3.5em;
display: flex;
justify-content: space-around;
align-items: center;
position: relative;
box-shadow: 0 0 3px #333;
border-radius: 1px}
.close-info {
position: absolute;
right: 0.2em;
top: 0;
cursor: pointer;
font-size: 0.8em}
.bloc-info.success {
background: #d3ffc5;
border-color: #d3ffc5;
color: #176100;
padding: 0.5em 0}
.bloc-info.unsuccess {
background: #ff8a8a;
border-color: #ff8a8a;
color: #860000;
padding: 0.5em 0}
.bloc-info.warning {
background: #ffe6b9;
border-color: #ffe6b9;
color: orange;
padding: 0.5em 0}
.bloc-info p {
margin: 0 10%;
width: 50%;
text-align: left;
font-weight: bold;
position: relative;}
.bloc-info.success p { width: 80%}
.bloc-info p > .absolute {
font-size: 2em;
display: block;
top: calc(50% - 0.65em);
left: -30%}
.bloc-info.success p > .absolute { left: -10%}
.bloc-info.success a { color: #176100}
.bloc-info.success > .close-info { display: none}
.button,
a.button {
display: inline-block;
font-size: 1em;
font-weight: normal;
cursor: pointer;
margin: 0;
width: 30%;
text-align: center;
padding: 0.2em;
border-style: solid;
transition: 0.3s all linear}
.button:hover,
a.button:hover { transition: 0.3s all linear}
.button_back,
a.button_back { transition: 0.3s all linear}
.button_back:hover,
a.button_back:hover { transition: 0.3s all linear}
.button.empty {
background: none;
cursor: default;
border: 1px dashed transparent}
.ariane_current,
.button.current,
.button.current:hover { cursor: default}
.block {
padding: 0.5em;
box-sizing: border-box;
border-radius: 2px}
#button_open,
#button_close {
display: none;
cursor: pointer}
#change-langue {
border: 1px solid #eee;
color: #bbbb;
max-width: 4.5em;
cursor: pointer}
#cookie-note {
position: fixed;
left: 0;
right: 0;
bottom: 0;
box-shadow: 0px -10px 20px rgba(0,0,0,0.2);
background: #1d1d1a;
z-index: 9999;
font-size: 0.8em;
padding: 0.5em;
text-align: center;
color: #fafafa;
opacity: 1}
#cookie-note a {
display: inline-block;
color: #1d1d1a;
background: #fff;
cursor: pointer;
text-align: center;
padding: 0.2em;
border-style: solid;
margin: 0;
font-weight: normal}
#cookie-note svg {
vertical-align: middle;
position: relative;
top: -0.15em;
fill: #1d1d1a}
.agence-awe {
font-family: 'Familjen Grotesk', cursive;
text-transform: uppercase}