#ima,#titre, #menucomplet{
  width: 60vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
    cursor:pointer;
    opacity: 0;
    transition: all 3s;
}
#ima.visible, #titre.visible, #menucomplet.visible, #info.visible{
    opacity: 1;
}

#menucomplet #info {
    transition-delay: 3s;
}

#info {
    opacity: 0;
    transition: all 3s;
}

body{
    margin:0;
    height:100vh;
  text-decoration: none;

    display:flex;
    justify-content:center;
    align-items:center;
    font-family: 'regular';
}

@font-face {
  font-family: 'regular';
  src: url('font/adelphe.ttf');
}



/* .boite{
    position:relative;
    width:60vw;
} */

#fond{
    width:100%;
    display:block;
}


.boite img{
    width:100%;
    display:block;
}

.menu{
    display:flex;
    flex-direction:column;
    gap:5px;
    position: relative;
    top: 9.5em;
    display:flex;
    align-items:center;
}

.menu a{
    text-decoration:none;
    cursor:pointer;
}

.menu a:hover{
    color: #d20101;
}

.contenu{
    position:absolute;
    top:6em;
    left:2em;
  text-decoration: none;
    width:260px;
    color:white;
  font-size: 1.2rem;
  line-height: 2.3rem;

    display:none;
}

.contenu.active{
    display:block;
    
}

.contenu a:hover{
    color: #d20101;
}










.logo {
    position: absolute;
    width: 4em;
    bottom: 40px;
    left: 5em;
}

.propos {
    position: absolute;
    bottom: 25px;
    right: 5em;
    color: #d20101;
}

.sources {
    position: absolute;
    bottom: 25px;
    right: 5em;
    color: #d20101;
}



.ligne1{
    color: #001664;
    font-family: 'bold';
    margin-left:0px;
    font-size: 1.2rem;
    transform:rotate(-2deg);
        border: 3px solid #001664;
        background-color: white;

      padding: 10px 20px;
  border-radius: 60% 40% 60% 45% / 55% 60% 40% 45%;

}



@font-face {
  font-family: 'bold';
  src: url('font/bold.ttf');
}

.ligne2{
    position: relative;
    margin-left:20px;
        font-size: 1rem;
    transform:rotate(-5deg);
        color: #001664;
        
}

.ligne3{
    margin-left:40px;
    transform:rotate(-1deg);
}



.ligne4{
    position: absolute;
text-decoration: none;
color: #001664;
    margin-left:0px;
    transform:rotate(-2deg);
}

.ligne5{
    
text-decoration: none;
color: #001664;
    margin-left:20px;
    transform:rotate(1deg);
}

.ligne6{
    position: absolute;
text-decoration: none;
color: #001664;
    margin-left:40px;
    transform:rotate(-1deg);
}


.ligne7{
    position: absolute;
text-decoration: none;
color: #001664;
    margin-left:0px;
    transform:rotate(-2deg);
}

.ligne8{
    
text-decoration: none;
color: #001664;
    margin-left:20px;
    transform:rotate(1deg);
}

.ligne9{
    
text-decoration: none;
color: #001664;
    margin-left:40px;
    transform:rotate(-1deg);
}

.ligne10{
position: absolute;
text-decoration: none;
color: #001664;
    margin-left:20px;
    transform:rotate(1deg);
}

.ligne11{

text-decoration: none;
color: #001664;
    margin-left:40px;
    transform:rotate(-1deg);
}

.ligne12{
    position: absolute;
text-decoration: none;
color: #001664;
    margin-left:20px;
    transform:rotate(1deg);
}