@charset "utf-8";

html {
font-size: 100%;
text-size-adjust: none;
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
-moz-text-size-adjust: none;
}
@font-face {
font-family: Arima;
src: url('../font/Arima-Light.woff2') format('woff2');
font-weight: 300;
font-display: swap;
}
body {
background-color: #D7D9DB;
overflow-x: hidden;
font-family: Arima, system-ui, sans-serif;
font-weight: 300;
}
* {
margin: 0; padding: 0;
overflow-x: hidden;
}
h1, h2, h3 {
font-size: 1.4rem;
line-height: 1.2;
color: #747474;
overflow: hidden;
}
h1 {
text-align: center;
-webkit-text-stroke: 1px #000;
-webkit-text-fill-color: #747474;
margin: 0 8% 20px 8%;
}
h2 {
border-bottom: 1px solid #747474;
text-align: center;
margin: 0 8% 40px 8%;
}
h3 {
margin: 0 8% 6px 8%;
}
.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;
min-height: 100vh;
text-align: center;
align-content: center;
}
.logo {
width: 25%; height: auto;
}
.petitlogo {
width: 240px; height: auto;
}
article {
position: relative;
z-index: 100;
margin: 20px;
padding: 10px;
background-color: #FFF8;
border: 1px solid #747474;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);

font-size: 1rem;
font-weight: bold;
line-height: 1.2;
color: #000;
}
.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) {
h1 {
font-size: 1.8rem;
}
h2 {
font-size: 1.8rem;
margin: 0 16% 40px 16%;
}
h3 {
font-size: 1.8rem;
margin: 0 16% 6px 16%;
}
.divtop {
background-color: #231;
border-bottom: 1px solid #EEE;
}
}

/* XXL ____________________________________ */
@media screen and (min-width: 1441px) {
h1, h2, h3 {
font-size: 2.2rem;
}
}