@font-face {
  font-family: "DomBold";
  font-weight: normal;
  font-style: normal;
  src: local("DomBold"), url("tt0769m_.ttf") format("truetype");
}

@font-face {
  font-family: "Square721";
  font-weight: normal;
  font-style: normal;
  src: local("Square721"), url("TT0246M_.TTF") format("truetype");
}

html {
  scroll-behavior: smooth;
}

a:link, a:visited {
  text-decoration: none;
  color:black;
}

a:hover {
background-color: #f90;
}


body {
color: black;
background-color: #000;
font-family: Verdana;
font-size: 1.5vh; 
margin:0;
text-align:center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}

.fond::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('EC5.png');
    background-size: cover;
    opacity:0.4;
    z-index: -100; /* Assurez-vous qu'il est derrière le texte */
    animation: masquer 8s; 
}

.fond_page {
  background-image: url('EC5.png');
}



@keyframes masquer {
    0% {opacity:1;}
    100% {opacity:0.4;}
}


.titre {
  position:fixed;
  width: 100vw;
  height:10vh;
  top:0px;
  background-color: #fff;
  z-index:100;
}

.bandeau {
background-color: #000;
border-top: 3px solid #000;
color:#fff;
text-align:right;
padding-right:20px;
}


#titreprincipal {
font-size: 6vh;
color:#fff;
font-family: "Square721";
margin-top:15vh;
padding:20px; 
}

#sstitreprincipal1 {
font-size: 4vh;
width:100vw;
color:#fff;
animation: showup 6s; 
padding:20px; 
}

#sstitreprincipal2 {
font-size: 4vh;
width:100vw;
color:#fff;
animation: reveal 6s;
padding:20px; 
}

#sstitreprincipal3 {
font-size: 4vh;
margin-top:10vh;

color:#fff;
animation: entrer 6s;
background-color:#fff;
}

@keyframes showup {
    0% {opacity:0;}
    60% {opacity:1;}       
    100% {opacity:1;}
}

@keyframes reveal {
    0% {opacity:0;}
    20% {opacity:0;}
    100% {opacity:1;}
}

@keyframes entrer {
    0% {opacity:0;}
    40% {opacity:0;}
    100% {opacity:1;}
}



h1 {
font-size: 3vh;
color:#000;
font-family: "Square721"; 
/* text-shadow: 5px 5px 10px #ff0; */
}


h2 {
text-align:center;
font-family: "Square721";
font-size: 2vh;
/* text-transform: uppercase; */ 
}

h2::before {
background-image: url("triangle.png");
background-size: 1.5vh 1.5vh;
display: inline-block;
width: 1.5vh; 
height: 1.5vh;
margin-right: 5px;
content:"";
}


h3 {
font-size: 2vh;
font-family: "Verdana";
color: #a50;
}

.puce::before {
background-image: url("puce.png");
background-size: 1vh 1vh;
display: inline-block;
width: 1vh; 
height: 1vh;
margin-right: 5px;
content:"";
}

.rectangle {
font-size: 2vh;
font-family: "Square721";
text-transform: uppercase; 
border: solid 2px #000;
width:50%;
margin:auto;
}


.page {
width:100vw;
height:100%;
display:flex;
flex-wrap: wrap;
justify-content: center;
margin-top:10vh;
}



.definition {
background-color: #fff;
color:#000;
font-size: 1.5vh;
width:100vw;
/* border-radius: 3px; */
padding:20px;
/* box-shadow: 0 0px 20px 0 black; */
text-align:left;
}


.rubrique {
color:#000;
font-size: 1.5vh;
width:100vw;
/* border-radius: 3px; */
padding:20px;
/* box-shadow: 0 0px 20px 0 black; */
text-align:left;
}



.bas {
background: linear-gradient(#000, 1%, #fff);
color:#000;
font-size: 1.5vh;
width:100vw;
padding:10px;
margin-top:50px;
text-align:left;
}


.ancre {
padding:6vh;
}

.theme {   
color:#000;
font-size: 1.5vh;
width:400px;
min-height:100px;
/* margin:3vh 10px; */
opacity:1;
}

@media only screen and (max-width: 800px) {
  .theme {
  width:95vw;
  }
}



.info {
background-color: #ddd;
text-align:left;
font-size: 1.8vh;
border: 2px #f90 solid;
width:90%;
margin:10px 10px;
padding:5px;
}


.theme_bandeau {
width:95%;
text-align:center;
height:2.5vh;
border-radius: 5px 5px 0 0; 
font-family: "Square721";
font-size: 2vh;
font-weight:bold;
text-transform: uppercase;  
border-bottom:2px solid #f90;
background-color: #ddd;
}


.theme_bandeau p::before {
background-image: url("triangle.png");
background-size: 1.5vh 1.5vh;
display: inline-block;
width: 1.5vh; 
height: 1.5vh;
margin-right: 5px;
content:"";
}   



.theme_bandeau img {
height:2.5vh;
float:right;
padding-right:10px;
cursor:pointer;
}

.theme_contenu {
background-color: #fff;
width:95%;
display:flex;
text-align:left;
align-items:left;
flex-direction:column;
border-radius: 0px 0px 20px 10px;
padding-bottom:2vh;
}

.theme_contenu p {
color:black;
margin-bottom:-1.5vh;
padding:5px 15px;
}

.theme_contenu p img {
height:2vh;
}


.cadre {
background-color: #fff;
color:#000;
font-size: 1.5vh;
/*min-width:300px;*/
max-width:600px;
min-height:200px;
border-radius: 0px 20px 0px 0px;
margin:2vh 2vw;
/* box-shadow: 0 0px 20px 0 black; */
opacity:1;

}

.cadre_contenu {
width:95%;
padding:0 10px 20px 10px;
text-align:left;
}


.fiches {
border-collapse: separate;
border-spacing: 0px 5px;
}

.fiches td {
text-align: left;
vertical-align: middle;
border-style: solid;
border-width: 1px 0px 1px 0px;
background-color: rgb(255,255,255,0.9);
}

.fiches tr {
height:15vh;
}

.articles {
border-collapse: separate;
border-spacing: 0px 10px;
}

.articles td {
text-align: left;
vertical-align: middle;
border-style: solid;
border-width: 1px 0px 1px 0px;
background-color: rgb(255,255,255,0.9);
}

.articles tr {
height:5vh;
}








#menu {
  position:fixed;
  width: 50vw;
  top:10px;
}

#menu-icon {
/*position:absolute;*/
text-align:left;
cursor:pointer;
}

#menu-icon img {
	height: 30px;
}

nav a {
    text-transform: uppercase;
    font: 2vh;
		text-align: left;
    border:1px solid #f90;
    height:2vh;
		padding: 5px 10px;
		margin: 0;
    display:none;
    background-color:#fff;
    text-decoration: none;
    font-weight: bold;
    opacity:1;
	}


nav:hover a {	
    display:list-item; 
	}