* {
margin: 0;
padding: 0;
overflow-x: hidden;
}
html {
font-size: 100%;
text-size-adjust: none;
-webkit-text-size-adjust: none;
}
@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-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
body {
background-color: lavender;
font-family: Arima, system-ui, sans-serif;
font-weight: 200;
color: #000;
}
h1, h2, h3 {
font-family: Arima, serif;
font-size: 1.8rem;
line-height: 1.2;
font-weight: 400;
text-wrap: balance;
margin: 0 50px 0 50px;
}
h1 {
color: #000;
padding-bottom: 10px;
}
h2 {
text-align: center;
color: #6832B2;
padding-bottom: 40px;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 10px;
}
h3 {
color: #777;
padding-bottom: 10px;
}
header, section, nav, aside, footer {
position: relative;
z-index: 100;
width: 100vw;
}
header, section, nav {
background-color: #F1F1FE;
padding: 30px 0 120px 0;
}
aside, footer {
background-color: #fff8;
padding: 30px 0 0 0;
backdrop-filter: blur(10px);
font-family: Arima, system-ui, sans-serif;
font-weight: 400;
}
p {
margin: 0 50px 0 50px;
font-size: 1.3rem;
line-height: 1.8;
}
a {
color: #009;
font-weight: 400;
text-decoration: none;
}
figcaption {
color: #000;
}

/* MESSAGE BACK */
.message {
position: absolute;
z-index: 1;
top: 30px; width: 100vw;
text-align: center;
font-weight: 400;
}
.divwarning {
padding: 20px;
font-family: Arima, system-ui, sans-serif;
font-weight: 400;
color: #000;
}

.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 16s linear infinite;
}
@keyframes fonb {
  0% {opacity: 0;}
 20% {opacity: 0;}
 25% {opacity: 1;}
 75% {opacity: 1;}
 80% {opacity: 0;}
100% {opacity: 0;}
}

.divlogo {
position: relative;
z-index: 100;
inset: 0;
min-height: 100vh;
text-align: center;
align-content: center;
}
.logo {
width: 30%; 
height: auto;
}

.divtop {
position: fixed;
z-index: 150;
top: 10px; left: 0;
}
.img-icones {
height: 30px; width: auto;
margin: 6px 10px 0 10px;
}
.adroite {
position: absolute;
z-index: 151;
top: 10px; right: 0;
}
.darkmodeactif {
visibility: hidden;
}


/* MEDIA================================== */

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

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

/* XL ____________________________________ */
@media screen and (min-width: 961px) {
html {
font-size: 110%;
}
h2, h3, p {
margin: 0 16% 0 16%;
}
.divwarning {
padding: 50px;
line-height: 1.1;
}
}

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




/* ================= */

/* DARK MODE ------------------------- */
@media (prefers-color-scheme: dark) {
body {
color: #FFF;
}
header, section, nav {
background-color: #212220;
}
h2 {
color: #99F;
}
h3 {
color: #BBB;
}
a {
color: #07F;
}
.darkmodeactif {
    visibility: visible;
}
}