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

@font-face {
   font-family : 'AlteSchwabacher';
 src:url(AlteSchwabacher.ttf);}
 
@font-face {
   font-family : 'Playball-Regular';
 src:url(Playball-Regular.ttf);} 

 html{height:100%;}
 
body{margin:0;
	  padding:0;
	  background:url('../pp6.webp'); 
	  background-size: 100%;
     background-repeat:no-repeat;	  
	}
  
 section{ display:flex;
          margin:0;
	      padding:0;
	     text-align:center;}

#af-ip {text-align:center;
        position:absolute;
		left:50%;transform: translate(-50%, -50%); 
		}
	 
 #ad-ip {color:blue;
         border-radius:15px; 
		 width:220px; 
		 height:25px;
		 font-style: oblique;
		 font-family:Playball-Regular; 
		 text-align:center;
		 background-color:#F1E2BE;
		 font-size:18px;
		 position:absolute;
		 left:50%;
		 transform: translate(-50%, -50%); 
		 top: 220px;
		 }					 

 #div-horloge{text-align:center;
              width:auto;}
	
	#heure {text-align:center;
	     font-size:24px;
		 font-weight: bold;
		 font-style: oblique;
		 font-family:AlteSchwabacher;
		 color:blue;
		 border-radius:15px; 
		 width:95px; 
		 height:30px;
		 background-color: #F1E2BE;
		 top: 85px;
		 position:absolute;
		 left:50%;
		 transform: translate(-50%, -50%); 
		 }	
 
 
 #boutons {position:absolute;
          left:50%;
		  transform: translate(-50%, -50%);
	       top:150px;
		   width:1000px;
		     }
			 

     
   .bouton{background-color: #EFEFEF;
        border: 3px solid #AFA778;
        border-radius: 25px;
        padding: 3px;
        color: #22427C;
	    font-size:27px ;
        font-family:Manuskrip;
	    letter-spacing:4px;
	    font-weight: bold;
	    font-style:oblique;
        text-align: center;
        text-decoration: none;
        cursor: default;
		}
		
	.bouton:hover{background-color: #F0E36B;} 

#bv	{position:absolute;
          left:50%;
		  transform: translate(-50%, -50%);
	       top:320px;
		    }		 

#ken{position:absolute;
          left:50%;
		  transform: translate(-50%, -50%);
	       top:470px;
		  }
#aigle:hover{transform: scale(1.35);}		  
	
#menu-g {z-index: 9999; 
        position: fixed;
        left: -12em;
       top: 300px;
       width: 8em;
       background:url('../plac-a.webp');
       color: gray;
       margin: -3em 0 0 0;
       padding: 0.5em 0.5em 0.5em 2.5em;
       border-top:solid 10px;
       border-bottom:solid 10px;
       border-right:solid 10px;
       border-color:#8EA2C6;
       border-top-right-radius:25px ;
       border-bottom-right-radius:25px;
	   text-align:left;
       }

#lateral-menu-g-input {position: absolute;           /* pour sortir l'élément du flux */
                      right: -999em;
					  }                 /* position hors de la fenêtre */

#lateral-menu-g-label {z-index: 1;                   /* on le met au dessus */
                      position: absolute;           /* pour sortir l'élément du flux, il va bouger */
                      top: .1em;                    /* on décolle légèrement du haut */
                      left: 11.2em;                   /* alignement sur le bord droit du parent */
                      width: 4em;                   /* dimensions respectables */
                      height: 3em;
                    /*-- visuel --*/
                     transition: all .5s;          /* pour animation éventuelle */
                     cursor: pointer;
                    }

#menu-g:hover > #lateral-menu-g-label{transform:rotate(180deg);transition: all 1s;}					   

#lateral-menu-g-label:hover{transform:rotate(180deg);transition: all 1s;}			   

#menu-g:hover {left: 0 }

#menu-g a {position: relative;
          right: 0;
          font-size:22px;
          font-family :Manuskrip;
		  font-weight: bold;
		  font-style: oblique;
          text-decoration:none;
          color:blue;
          text-align:left;
         }

#menu-g a:focus {right: -7em;
                background: #EFEFEF;
               }

#menu-g a {transition: 0.2s }

#menu-g:hover a:focus {right: 0;
                      background: none;
                      }

#menu-g { margin: -3em 0 0 0 }
 
 @supports (transform: translate(0, -50%)){
                                    #menu-g {margin-top: 0;
                                             transform: translate(0, -50%);
                                            }
                                           }
#moto{position:absolute;
	   left:50%;transform: translate(-50%, -50%); 
	   top: 660px;}
	   
#suzu:hover {transform: scale(1.35);}

#scoot{position:absolute;
	   left:50%;transform: translate(-50%, -50%); 
	   top: 860px;}
	  
	   
#mob:hover {transform: scale(1.60);}	   
										   

#menu-d {z-index: 9999; 
       position: fixed;
       right: -12em;
       top: 300px;
        width: 8em;
       background:url('../plac-a.webp');
       color: gray;
       margin: -3em 0 0 0;
       padding: 0.5em 0.5em 0.5em 2.5em;
       border-top:solid 10px;
       border-bottom:solid 10px;
       border-left:solid 10px;
       border-color:#8EA2C6;
       border-top-left-radius:25px ;
       border-bottom-left-radius:25px;
       }

#lateral-menu-d-input {position: absolute;           /* pour sortir l'élément du flux */
                     right: -999em;
					 }                 /* position hors de la fenêtre */

#lateral-menu-d-label {/*-- positions et dimensions --*/
                     z-index: 1;                   /* on le met au dessus */
                     position: absolute;           /* pour sortir l'élément du flux, il va bouger */
                     top: .1em;                    /* on décolle légèrement du haut */
                     right: 11.2em;                   /* alignement sur le bord droit du parent */
                     width: 4em;                   /* dimensions respectables */
                     height: 3em;
                     /*-- visuel --*/
                     transition: all .5s;          /* pour animation éventuelle */
                     cursor: pointer;
                    }

#lateral-menu-d-label:hover{transform:rotate(180deg); transition: all 1s;}			   

#menu-d:hover > #lateral-menu-d-label{transform:rotate(180deg);transition: all 1s;}

#menu-d:hover { right: 0 }

#menu-d a {position: relative;
         left: 0;
         font-size:22px;
         font-family :Manuskrip;
		 font-weight: bold;
		 font-style: oblique;
         text-decoration:none;
         color:blue;
         text-align:left;
        }

#menu-d a:focus {left: -7em;
                background: #EFEFEF;
              }

#menu-d a { transition: 0.2s }

#menu-d:hover a:focus {left: 0;
                     background: none;
                    }

#menu-d { margin: -3em 0 0 0 }

@supports (transform: translate(0, -50%)) {
                                      #menu-d {text-align:left;
                                             margin-top: 0;
                                             transform: translate(0, -50%);
                                            }
                                           }

.menu-deroulant {background-color: transparent; 
                 color: white;
                 font-size: 20px;
                 font-family : 'Manuskrip';
				 position:absolute;
                 left:200px;
                 top:800px;
		  		  }

.boud-1{height:80px;
		  width:80px;
		  left:200px;
          top:800px;
		}

.boud-1:hover {transform:rotate(-50deg);}
/* On positionne (en relatif) le conteneur du menu déroulant 
  pour pouvoir positionner le contenu de la liste juste 
  en dessous du span */
.menu-deroulant {position: absolute;
                 display: inline-block;
                 background-color: transparent;
                 }

/* Contenu déroulant (caché par défaut) 
   et positionné par rapport au conteneur */
.menu-deroulant div {display: none; /* caché */
                     position: absolute;
                     width:120px;
                     background:url('../citron.webp');
                    left:-30px;
					top:80px;
                    z-index: 1; /* en avant */
	                border: 5px solid #AFA778;
                    border-radius: 35px;
                    }

/* Les liens du menu déroulant */
div div a {color:blue;
           line-height:25px;
           text-decoration: none; /* on enlève le surlignement */
           display: block; /* on les affiche */
          }

/* Au survol du menu, on affiche le contenu déroulant (qui était caché) */
.menu-deroulant:hover div {display: block;}

/* style du bouton */
.menu-deroulant-1 {background-color: transparent; 
                   color: white;
                   font-size: 20px;
                   font-family : 'Manuskrip';
				   position:absolute;
                   right:200px;
                   top:800px;
		          }
				  
.boud-2 {height:80px;
		width:80px;
		right:200px;
        top:800px;
		}

.boud-2:hover {transform:rotate(50deg);}		

.menu-deroulant-1 {position: absolute;
                  display: inline-block;
                  background-color: transparent;
                 }

.menu-deroulant-1 div {display: none; /* caché */
                       position: absolute;
                       width:120px;
	                   top:80px;		 
	                   right:-30px;		 
                       background:url('../citron.webp');
                       z-index: 1; /* en avant */
	                   border: 5px solid #AFA778;
                       border-radius: 35px;
                      }

div div a {color: blue;
           line-height:25px;
           text-decoration: none; 
           display: block; 
           }

.menu-deroulant-1:hover div {display: block;}

#insc{ position:absolute;
	   left:50%;transform: translate(-50%, -50%); 
	   top: 1060px;
	   }

p { position:absolute;
	            left:50%;transform: translate(-50%, -50%); 
		        top: 1160px;
				}		
     footer {font-size:24px;font-weight: bold;font-style:oblique;font-family:Playball-Regular;
	         color:#E5D012;
	         position:absolute;
	         left:50%;transform: translate(-50%, -50%); 
		     top: 1280px;
	         white-space:nowrap;
	         }