body
{
    margin: 0;
	background-image:url("fonds/fond_bosquet.png");
    background-color:rgb(191, 35, 7);
	background-repeat: no-repeat;
    background-size: 100%;
    background-position: top center;
  background-attachment: fixed;}


@font-face 
    {font-family: "dancingscript";      
    src: url("police/dancingscript.ttf") format("truetype");
    src: url("police/dancingscript.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: "varius";
     src: url("police/Varius.ttf") format("truetype");
     src: url("police/Varius.otf") format("opentype");}
     @font-face 
    {font-family: "bolton";
     src: url("police/bolton.ttf") format("truetype");
     src: url("police/bolton.otf") format("opentype");}
    




    @keyframes slidein {
      from {margin-right: 110%;
        width: 100%;}
      to {margin-right: 0%;
        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;}}

@keyframes rotate {
        0% {-webkit-transform: rotate3d(0, 0, 1, 0deg);
          transform: rotate3d(0, 0, 1, 0deg);}
        25% {-webkit-transform: rotate3d(0, 0, 1, 90deg);
          transform: rotate3d(0, 0, 1, 90deg);}
        50% { -webkit-transform: rotate3d(0, 0, 1, 180deg);
          transform: rotate3d(0, 0, 1, 180deg);}
        75% {-webkit-transform: rotate3d(0, 0, 1, 270deg);
          transform: rotate3d(0, 0, 1, 270deg);}
        100% {-webkit-transform: rotate3d(0, 0, 1, 360deg);
          transform: rotate3d(0, 0, 1, 360deg);}}
      

.voir div {
    border: 0px dotted rgb(236, 205, 239);}

.voir_no {
     color:rgb(158, 237, 126);              
    font-size: 10px;
    font-weight: bold;
    margin: 0;
  opacity: 0;}


  .étiquette {
    padding:0.5%;
    margin:0;
    color:rgb(7, 7, 7);              
    font-size: 130%;
    font-weight: bold;
    font-family:"dancingscript","Cardinal",Comic Sans MS, Impact, Arial ;
    background-image:url("img_plan/bande.png");}



  .header {
      display: grid; 
      grid-template-columns: 1fr 1fr;
      grid-template-rows:auto;
      gap:  0 60%;
          
      width: 99%;
      padding-top: 1.5%;                                      
      height: auto;}
     
     
.flèche{
  padding: 2%;
  padding-left: 20%;
  width: 85%;
  margin: 0;
  cursor: url(curseurs/cu_lune.png), auto;}
   
.flèche_cas {
  padding: 0;
  padding-left: 20%;
  width: 60%;
  margin: 0;
  cursor: url(curseurs/cu_lune.png), auto;}

 

    .grille_AA {
        display: grid;
        margin: 6% 35% 0 35%;                                                     
        justify-items: center;
        grid-template-columns: 1fr;
        grid-template-rows: auto;}  


    .bos6 {
    width:100%;}
    

.grilleA {
display: grid;
margin: 7% 10% 0 10%;                                                  
justify-items: center;  
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
gap:0 0;}  


    .bos1  {
      width:100%;}
     .bos1:hover{
        -webkit-animation: rotate 2s normal linear ;
        animation: rotate 2s normal linear ;}
        
  .bos7 {
    width:100%;}


    .grilleB {
      display: grid;
      justify-items: center; 
      margin: 6% 18% 0 18%;    
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto;
    gap: 8% 7%;}

   .bos20 {
  width:100%;}
  .bos16 {
    width:100%;}
    .bos21 {
      width:100%;}
      .bos22 {
        width:96%;}

    .bos22:hover {
        cursor: url(curseurs/cu_trou.png), auto;}


    
     
 .grilleC {
        display: grid;
        margin: 22% 2% 0 49%;                                                  
        justify-items: center;  
        grid-template-columns: 9% 10%;
        grid-template-rows: auto;
        gap: 0 30%;}  
        
    .bos9 {
      width:100%;
      margin:0;
    }




    .étiquette_myopie {
      width: 100%;
      padding:0.5;
      margin:0;
      color:rgb(7, 7, 7);              
      font-size: 0.1%;
      font-weight: bold;
      font-family:"dancingscript","Cardinal",Comic Sans MS, Impact, Arial ;
      background-image:url("img_plan/bande.png");}


.loupe {
    width:100%;;
    margin:0;
    padding-left: 0;}
 .loupe:hover{ 
    cursor: url(curseurs/cu_loupe.png), auto;
    -webkit-transform:scale(5); 
    -moz-transform:scale(5);     
    -ms-transform:scale(5);      
    -o-transform:scale(5);       
    transform:scale(5);}

   


.myopie {
padding: 0.8%;
font-size: 38%;
font-weight: bold;
font-family: "jack","dancingscript","Cardinal",Comic Sans MS, Impact, Arial ;
color: rgb(0, 0, 0);
background-color: rgb(178, 242, 165);}


.myopie:hover{  
cursor: url(curseurs/cu_loupe.png), auto;
font-style: normal;
-webkit-transform:scale(3.4) ; /* Safari and Chrome */
-moz-transform:scale(3.4);     /* Firefox */
-ms-transform:scale(3.4);      /* IE 9 */
-o-transform:scale(3.4);       /* Opera */
transform:scale(3.4);}



    
    .grilleD {
      display: grid;
      margin: 15% 11% 0 11%;  
      justify-items: center;  
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto;
      gap: 0 11%;}

  
.bos18 {   
    width: 100%;}

    .bos3 {
      width: 100%;}


      .grilleE {
        display: grid;
        margin: 8% 9% 0 9%;  
        justify-items: center;  
        grid-template-columns: 1fr 0.8fr 1fr;
        grid-template-rows: auto;
        gap: 0 6%;}
  
    
  .bos11 {   
      width: 100%;}

      
  .bos10 {   
    width: 100%;}
  
      .bos5 {
        width: 100%;}
     

     
.grille_lien {
        display: grid;
        margin: 8% 0% 60px 5%;  
        justify-items: center;  
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        gap: 0 35%;}

  
  .impasse {
    padding-top: 0%;
    padding-bottom:9%;
      margin:0;
      color:rgb(251, 247, 247);              
      font-size: 160%;
      font-weight: normal;
      font-family:"bolton","Varius","Cardinal",Comic Sans MS, Impact, Arial ;
    }

    .oiseau {
      padding-top: 0%;
      padding-bottom:4%;
        margin:0;
        color:rgb(251, 247, 247);              
        font-size: 170%;
        font-weight: normal;
        font-family:"bolton","Varius","Cardinal",Comic Sans MS, Impact, Arial ;
      }

      .impasse:hover {

color: rgba(65, 78, 90, 0);
background-image: url(img_p/bos/fleche_mur.png);
background-size: 100%;
background-repeat:no-repeat;

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


        animation: fadeIn ease 2s;
-webkit-animation: fadeIn ease 2s;
-moz-animation: fadeIn ease 2s;
-o-animation: fadeIn ease 2s;
-ms-animation: fadeIn ease 2s;}


.oiseau:hover {

  color: rgba(65, 78, 90, 0);
  background-image: url(img_p/bos/fleche_ois.png);
  background-size: 100%;
  background-repeat:no-repeat;

  cursor: url(curseurs/cu_oiseau.png), auto;
  
  
          animation: fadeIn ease 2s;
  -webkit-animation: fadeIn ease 2s;
  -moz-animation: fadeIn ease 2s;
  -o-animation: fadeIn ease 2s;
  -ms-animation: fadeIn ease 2s;}