body
{
	background-image:url("fonds/fond_pele-mele.png");
    background-color: black;
	background-repeat: repeat;
    background-size: 101%;
    background-position: top center;
}


@font-face 
    {font-family: "dancingscript";      
    src: url("police/dancingscript.ttf") format("truetype");
    src: url("police/dancingscript.otf") format("opentype")}


    

@keyframes swing {
    0% { transform: rotate(8deg); }
    50% {transform: rotate (0deg)}
    100% { transform: rotate(-7deg); }}




.header{ 
    display: grid; 
    justify-items: start;
    grid-template-columns: 1.9fr 1.8fr 1fr;
    grid-template-rows: auto;
        
    padding-top: 1%;
    margin:0;
    width: 100%;                                      
    height: auto;}



.flèche{
 padding-top: 15%;
 padding-left: 7%;
 padding-bottom: 5%;
width: 93%;
margin: 0;
cursor: url(curseurs/cu_casque.png), auto;}

.flèche2{
padding-top: 3%;
padding-left: 35%;
width: 58%;
margin: 0;
cursor: url(curseurs/cu_moulin.png), auto;}
    

.voir div {
    border: 2px dotted rgb(177, 52, 182);}
    

.voir_no {
    color:rgb(247, 246, 199);                          
    font-size: 10px;
    font-weight: bold;
    margin: 0;
opacity: 0;}

    .numero   {                                 
        margin: 0;
        padding-bottom: 1.5% ;
        color: rgb(223, 223, 243);
        font-size: 115%;
        font-weight: bold;
        font-family: "dancingscript",Comic Sans MS, Impact, Arial ;
        text-align: center;}


.grilleA {
    display: grid;
    margin: 5% 10% 50px 14%;                                  
    justify-items: center;
    align-items: center;

    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    gap: 3% 0;}

.pele1
{width: 90%;
padding-top:0;

    animation: swing ease-in-out 4s infinite alternate ;            
    transform-origin: top center; }

.pele2
{width: 70%;
    padding-left: 15%;}
.pele3
{width: 70%;
    padding-left: 14%;}

.pele5
{width: 70%;
    padding-left: 15%;}

    
.pele6
{width: 70%;
    padding-left: 17%;}

.pele8
{width: 95%;
    padding-left: 7%;}

.pele9
{width: 90%;
box-shadow: 4px 4px 10px rgba(204, 214, 230, 0.7);}

.pele11
{width: 95%;}


.pele12
{width: 70%;
    padding-left: 14%;}

.pele14
{width:70%;
    padding-left: 14%;
    box-shadow: 2px 2px 5px rgba(135, 176, 238, 0.2);}
.pele16
{width: 70%;
    padding-left: 14%;}
.pele18
{width: 70%;
    padding-left: 14%;}

   .pele20
   {
    width: 95%;
    box-shadow: 5px 5px 10px rgba(135, 176, 238, 0.7);}
   .pele21
   {width: 70%;
    padding-left: 14%;}

    /* animation: swing ease-in-out 5s infinite alternate ;            
    transform-origin: top center;                              

    box-shadow: 5px 5px 10px rgba(141, 171, 218, 0.7);} */

   .pele22
   {width: 70%;}
   .pele23
   {width: 70%;
    padding-left: 14%;
    animation: swing ease-in-out 4s infinite alternate ;            
    transform-origin: top center;}
    
   .pele24
   {width: 65%;
    padding-left: 14%;}
.pele26
{width: 70%;
    padding-left: 14%;}
.pele27
{width: 95%;
    padding-left: 1%;}


.plan {
width: 47%;
padding-top: 8%;
opacity: 0.7;
padding-left: 40%;

cursor: url(curseurs/cu_bougie.png), auto;}


.plan:hover {
opacity: 1;
-webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;}