body
{
    background-color: black;
	background-image:url("fonds/fond_peinture2.png");
	background-repeat: no-repeat;
    margin:0;
    background-size: 90%;
    background-position: top center;
    position: absolute;
    height: 100%;
    width: 100%;}



@keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}}
 @-moz-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}}
@-webkit-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}}
  @-o-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}}
  @-ms-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}}


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

    
    header {
        display: grid; 
        justify-items: start;
        margin : 2% 5% 0 2%;
        grid-template-columns: 1.2fr 1fr 1fr;
        grid-template-rows:auto;
        gap:  6%;
            
        width: 100%;}
       
       
        .flèche{
            padding-top: 1%;
            padding-left: 0;
            
            width: 87%;
            margin: 0;
            cursor: url(curseurs/cu_tour.png), auto;}



.etiquette {
    margin-top: 9%;
    padding: 10px;
    color:rgb(7, 7, 7);              
    font-size: 150%;
    font-weight: bold;
    font-family:"dancingscript","Cardinal",Comic Sans MS, Impact, Arial ;
    background-image:url("img_plan/bande.png");}


    .numero   {                                 /*  Numérote les cartes */
        margin: 0;
        padding-bottom : 1%;
        color: rgb(224, 227, 244);
        font-size: 115%;
        font-weight: bold;
        text-align: center; 
        font-family: "dancingscript",Comic Sans MS, Impact, Arial ;}
    


.plan
{width: 30%;
    opacity: 0.7;
    padding-left: 32%;
    padding-top: 10%;

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;}



.voir div {
	border: 2px dotted white;}


.voir_no {
    color:rgb(207, 236, 74);                        
    font-size: 10px;
    font-weight: bold;
    margin: 0;
opacity: 0;}


.grilleA {
	display: grid;
	margin: 3% 7% 0 15%;
    justify-items: center;

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


.telescopiste  {
    padding-top :15%;                                         
    padding-left: 4%;
    padding-right: 4%;
    color: rgb(199, 213, 245);
    text-shadow: 2px 2px rgb(20, 40, 172);
    font-size: 120%;
    font-family: "jack","dancing script",Impact, Arial;
    font-weight:lighter;}

.spray7  												 
{width: 95%;
}                             
.spray10												
{width: 70%;
    padding-left: 7%;
}


.grilleB {
display: grid;
margin: 4% 10% 20px 10%;

grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
gap:3% 1%;
justify-items: center;}


    

.spray3  												 
{width:100%;
    }
    .spray4												 
{width: 80%;
    }
.spray5 												 
{width: 100%;
padding-bottom: 20%;
    }
.spray5:hover {
    -webkit-transform: rotateZ(-25deg);
    -ms-transform: rotateZ(-25deg);
    transform: rotateZ(-25deg);}


.spray8													
{width: 80%;
    }
.spray11
{width: 80%;
}



.spray17
{width: 80%;
}
.spray18
{padding-left: 0%;
width:100%;

}
.spray19
{width: 95%;
padding-left: 0%;
    }

    

    .grille_lien {
        display: grid;
        margin: 3% 10% 0 10%;
        
        grid-template-columns: 1fr 2fr 1fr;
        grid-template-rows: auto;
        justify-items: center;
        gap:0 5%;}


        
.spray1  												 
{width: 80%;
padding-left: 10%;}
        

.bosquet{      
    font-size: 180%;  
    padding-left: 5%;                                                       
    color: rgba(8, 8, 8, 0);
    font-family: "bolton","dancingscript", Impact, Arial ;   
    font-weight: normal;
    text-align: center;
    cursor: url(curseurs/cu_lune.png), auto;
    
    background-image:url("img_p/arbre_blanc2.png");
    background-repeat: no-repeat;
    background-size:60%;}
    
    /* Pas de soulignement sur tous les liens de la page (:link) */
    a:link {
    text-decoration: none;}
    
    
    .bosquet:hover {
    color:rgb(220, 230, 227);
    font-style: normal;
    background-size:0%;
    
    animation: fadeIn ease 1s;
        -webkit-animation: fadeIn ease 1s;
        -moz-animation: fadeIn ease 1s;
        -o-animation: fadeIn ease 1s;
        -ms-animation: fadeIn ease 1s;}
    
    
        .cascade{      
            font-size: 175%;                                                         /*  texte invisible car noir */
            color: rgba(8, 8, 8, 0);
            font-family: "bolton","dancingscript",Comic Sans MS, Impact, Arial ;   
            font-weight: normal;
            text-align: center;
            cursor: url(curseurs/cu_lune.png), auto;
            
            background-image:url("img_p/cascade2.png");
            background-repeat: no-repeat;
            background-size:65%;}
    
    
            .cascade:hover {
                color:rgb(220, 230, 227);
                font-style: normal;
                background-size:0%;
                animation: fadeIn ease 1s;
        -webkit-animation: fadeIn ease 1s;
        -moz-animation: fadeIn ease 1s;
        -o-animation: fadeIn ease 1s;
        -ms-animation: fadeIn ease 1s;}


    .grilleC {
        display: grid;
        margin: 4% 4% 100px 4%;
        
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto;
        gap:8% 0%;
        }

.spray6  												 
{width:80%;
    padding-left: 10%;
    }
    
.spray20
{width: 85%;
    padding-left: 12%;
    }

.spray16
{width: 80%;
    padding-left: 12%
    
}

.spray2													
{width: 58%;
    padding-left: 20%;
    }
    

.spray15
{width: 60%;
    padding-left: 20%;
   
}
.spray17
{width: 60%;
    padding-left: 20%;
}