@charset "utf-8";

* {
margin: 0; padding: 0;
overflow-x: hidden;
}
html {
font-size: 100%;
text-size-adjust: none;
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
-moz-text-size-adjust: none;
}
body {
background-color: #D7D9DB;
overflow-x: hidden;
font-family: Arima, system-ui, sans-serif;
font-weight: 200;
}
@font-face {
font-family: Arima;
src: url('../font/Arima-ExtraLight.woff2') format('woff2');
font-weight: 200;
font-display: swap;
}
@font-face {
font-family: Arima;
src: url('../font/Arima-Medium.woff2') format('woff2');
font-weight: 500;
font-display: swap;
}
h1, h2, h3 {
font-size: 1.6rem;
font-weight: 500;
line-height: 1.2;
overflow: hidden;
}
h1 {
text-align: center;
margin: 0 8% 0 8%;
color: #000;
}
h2 {
border-bottom: 1px solid #747474;
text-align: center;
margin: 0 8% 40px 8%;
padding-bottom: 10px;
color: #747474;
}
h3 {
margin: 0 8% 6px 8%;
color: #747474;
}
header, section, nav {
position: relative;
z-index: 100;
background-color: #F7F9FB;
}
aside, article, footer {
position: relative;
z-index: 100;
background-color: #FFF8;
border-top: 1px solid #747474;
border-bottom: 1px solid #747474;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* avertissement */
aside {
min-height: 20vh;
padding: 20px;
line-height: 1.2;
font-weight: 500;
}
/* PUB */
article {
padding: 20px 0 20px 0;
}
p {
margin: 0 8% 60px 8%;
font-size: 1.3rem;
line-height: 1.8;
color: #000;
}
button {
background-color: transparent;
border: none;
cursor: pointer;
}
figcaption {
font-style: italic;
text-align: center;
}
a {
color: #009;
font-weight: 500;
text-decoration: none;
}

.divcover {
position: fixed;
z-index: 10;
inset: 0;
height: 100vh;
}
.imgcover {
width: 100%; height: 100%;
object-fit: cover;
object-position: center center;
}
.divcoververt {
position: fixed;
z-index: 12;
inset: 0;
height: 100vh;
opacity: 0;
animation: fonb 30s linear forwards;
animation-delay: 4s;
}
@keyframes fonb {
  0% {opacity: 0;}
 10% {opacity: 1;}
 90% {opacity: 1;}
100% {opacity: 0;}
}

.divlogo {
position: relative;
z-index: 100;
inset: 0;
height: 100vh;
text-align: center;
align-content: center;
}
.logo {
width: 30%; height: auto;
}
.divtop {
position: fixed;
z-index: 150;
top: 0; left: 0;
width: 100%; height: auto;
padding: 10px 0 5px 10px;
background-color: transparent;
}
.img-icones {
height: 30px; width: auto;
margin: 0 10px 0 10px;
}

/* NE PAS AFFICHER SUR MOBILE ____________ */
@media screen and (max-width: 960px) {
.cache {
display: none;
}
}

/* PHONE PADS VERTIC ____________________ */
@media screen and (orientation: portrait) {
.logo {
width: 70%;
}
}

/* XL ____________________________________ */
@media screen and (min-width: 961px) {
  html {
font-size: 110%;
}
.divlogo {
height: 80vh;
}
h1 {
margin: 0 16% 0 16%;
font-size: 1.8rem;
}
h2 {
margin: 0 16% 40px 16%;
}
h3 {
margin: 0 16% 6px 16%;
}
p {
margin: 0 16% 60px 16%;
}
.divtop {
background-color: #231;
border-bottom: 1px solid #EEE;
}
}

/* XXL ____________________________________ */
@media screen and (min-width: 1441px) {
html {
font-size: 120%;
}
}