* {
margin: 0;
padding: 0;
overflow-x: hidden;
}
html {
font-size: 100%;
text-size-adjust: none;
-webkit-text-size-adjust: none;
}
@font-face {
font-family: Andreas-Regular;
src: url('../font/Andreas-Regular.woff2') format('woff2');
font-weight: 500;
font-display: swap;
}
body {
background-color: lavender;
font-family: system-ui, sans-serif;
font-weight: 300;
color: 111;
}
h1, h2, h3 {
font-family: Andreas-Regular, 'Bodoni 72', 'Bodoni 72 Oldstyle', 'Bodoni MT', 'Noto Serif Display', serif;
font-size: 1.8rem;
line-height: 1.1;
font-weight: normal;
text-wrap: balance;
}
h1 {
margin: 10px 50px 0 50px;
color: #000;
font-weight: bold;
}
h2 {
border-bottom: 1px solid #aaa;
text-align: center;
margin: 10px 50px 40px 50px;
padding-bottom: 10px;
color: #6832B2;
}
h3 {
margin: 10px 50px 6px 50px;
color: #777;
}
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: #DDFA;
padding: 30px 0 0 0;
backdrop-filter: blur(10px);
}
p {
margin: 0 50px 0 50px;
font-size: 1.2rem;
line-height: 1.8;
font-stretch: condensed;
}
a {
color: #009;
font-weight: 400;
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 20s linear infinite;
}
@keyframes fonb {
  0% {opacity: 0;}
 50% {opacity: 0;}
 55% {opacity: 1;}
 95% {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 8px 0;
background-color: transparent;
}
.img-icones {
height: 30px; width: auto;
margin: 0 10px 0 10px;
}
.adroite {
position: absolute;
right: 10px;
}
.divwarning {
padding: 20px 20px 0 20px;
line-height: 1.1;
text-wrap: balance;
}
.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: 80%;
}
}

/* XL ____________________________________ */
@media screen and (min-width: 961px) {
html {
font-size: 110%;
}
body {
font-weight: 200;
}
h2 {
margin: 0 16% 40px 16%;
}
h3 {
margin: 0 16% 6px 16%;
}
p {
margin: 0 16% 0 16%;
}
.divtop {
background-color: #231;
border-bottom: 1px solid #EEE;
}
}

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

/* DARK MODE ------------------------- */
@media (prefers-color-scheme: dark) {
body {
color: #FFF;
}
header, section, nav {
background-color: #212220;
}
aside, footer {
background-color: #04aB;
background-blend-mode: multiply;
}
h2 {
color: #99F;
}
h3 {
color: #BBB;
}
p {
font-stretch: normal;
}
a {
color: #07F;
}
.darkmodeactif {
    visibility: visible;
}
}