body

{  background-color:rgb(246, 210, 52);

	background-image:url("fonds/fond_cartes.png");
	background-repeat: no-repeat;
    background-size: 89%;
    background-position: top right ;
    margin: 0;
    height: 100%;
    width: 100%;}

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




    @keyframes animate {
    from {margin-left: -50%;} 

    10% { margin-left: 57%;}

        40% { margin-left:50%;}}

 


/* BULLE */

     /* @keyframes jump {
        0%   {transform: translate3d(0,0,0) scale3d(1,1,1);}
        40%  {transform: translate3d(0,30%,0) scale3d(.7,1.5,1);}
        100% {transform: translate3d(0,100%,0) scale3d(1.5,.7,1);}
      }
      
 .jump 
 {transform-origin: 50% 50%;
        animation: jump 5s linear alternate infinite; animation-delay: 0;} */



@keyframes bounce{
     from {margin-top: 4%;
            margin-left: 90%;}
           15% {margin-top: 4%;
                margin-left: 58%;}


     19%  {margin-top: -15%;
          margin-left: 58%;}
          29%  {margin-top: 5%;
            margin-left: 58%;}
            33% {margin-top: -17%;
                margin-left: 58%;}
                43%  {margin-top: 5%;
                    margin-left: 58%;}
                    47%  {margin-top: -20%;
                        margin-left: 58%;}
                        57%  {margin-top: 5%;
                            margin-left: 58%;}
                            61%  {margin-top: -27%;
                                margin-left: 58%;}
                                71%  {margin-top: 5%;
                                    margin-left: 58%;}
                                    75%  {margin-top: -37%;
                                        margin-left: 58%;}
                                        85%  {margin-top: 6%;
                                            margin-left: 58%;}
                                            93%  {margin-top: -150%;
                                                margin-left: 58%;}}
    
    



.lien_mortencore {
    margin-left: 58%;
    margin-top: -150%;
    width: 20%;
    position:absolute;
  opacity: 1;
  cursor: url(curseurs/cu_mort.png), auto;


  animation: bounce 15s ease 1;
animation-delay: 9s;}
   
  
    .lien_mortencore:hover{
      opacity: 0.7;}



.header{      
        display: grid; 
        justify-items: start;
        grid-template-columns:2fr 1.5fr;
        grid-template-rows:auto; 
        gap: 0 0;
        margin: 0;
        padding-top:1%;
        padding-left: 12%;
        width : 77%;
                                            

    background-color:rgb(246, 210, 52);}

               

    .flèche_rose{
        width: 33%;
        padding-top: 2%;
        margin: 0;
        padding-bottom: 4.5%;
        cursor: url(curseurs/cu_tour.png), auto;}


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

.voir_no {
    color:rgb(182, 72, 204);                
    font-size: 10px;
    font-weight: bold;
    margin: 0;
    opacity: 0;}

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


.grille_titre {
    display: grid;
	margin: 1% 0 0 18%;                       

    grid-template-columns: 3fr 2.5fr 0.3fr;
    grid-template-rows: auto;
    gap: 0 0;}


.chevalerie {
    padding-left: 4%;
    padding-top: 2%;
    margin:0;
    font-size: 390%;
    font-style: normal;
    font-family: "blackstone_hand","dancingscript", Comic Sans MS, Impact, Arial ;
    font-weight: normal;
    color: #202017;}

    
.etiquette {
    padding:15px;
    margin:0;
    color:rgb(7, 7, 7);             
    font-size: 110%;
    font-weight: normal;
    font-family:"jack","dancingscript",Comic Sans MS, Impact, Arial ;
    background-color: rgb(243, 248, 226); }


.grilleA {
	display: grid;
	margin: 2.5% 15% 0 15%;                       /* MARGIN : top right botom left */

    grid-template-columns: 33% 34% 34%;
    grid-template-rows: auto;
    gap:0 2%;}

.chev1
{width: 70%;
padding-left: 20%;}
.chev15									
{width:90%;}
.chev7 
{width:90%;
padding-top:0;} 

.grilleB {
	display: grid;
	margin: 2% 24% 0 20%;                       /* MARGIN : top right botom left */

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

.chev3 										
{width:80%;}
.chev4										
{width:80%;}
.chev5 										
{width:80%;}
.chev6										
{width:80%;}


.grilleC  {
    display: grid;
    margin: 3% 20% 0 20%;                                   

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


.chev9 {
    width:90%;}


.phrase {

    margin-top:20%;
    margin-left: 2%;
    font-size: 137%;
    font-style: normal;
   font-family: "Cardinal","dancingscript", Comic Sans MS, Impact, Arial ;
    font-weight: bold;
    background-color: rgb(244, 217, 65);
    color: #202017; }

.grilleD {
    display: grid;
    justify-items: center;
	margin: 2% 12% 0 28%;  
    
    

    grid-template-columns: 40% 28% 22%;
    grid-template-rows: auto;
    gap:0% 3%;}


.chev10 {
    width: 95%;
    padding-left: 0;
box-shadow: 5px 5px 5px rgba(102, 29, 7, 0.5);}

.chev11 {
    width: 95%;
    padding-left: 12%;
cursor: url(curseurs/cu_loupe.png), auto;}


.chev11:hover {
-webkit-transform:scale(1.6) ; /* Safari and Chrome */
-moz-transform:scale(1.6);     /* Firefox */
-ms-transform:scale(1.6);      /* IE 9 */
-o-transform:scale(1.6);       /* Opera */
transform:scale(1.6);}

.chev12 {
    height: 68%;}


.grilleE {
    display: grid;
	margin: 3% 0 0 0;   
    width: 100%;                    
                    
    justify-items: center;
    grid-template-columns: 42% 80%;
    grid-template-rows: auto;

background-color: rgb(235, 200, 44);}



.pele_mele {
text-decoration: none;
font-size: 290%;
font-style: italic;
font-family: "Cardinal","dancingscript", Comic Sans MS, Impact, Arial ;
font-weight: bold;
color: #201602;
cursor: url(curseurs/cu_casque.png), auto;}


.pele_mele:hover {
font-style: normal;
font-weight: normal;
text-shadow: 1px 1px #0d0401 ;}

.fenetre {
text-decoration: none;
font-size: 290%;
font-style: italic;
font-family: "Cardinal","dancingscript", Comic Sans MS, Impact, Arial ;
font-weight: bold;
color: #1a200f;
cursor: url(curseurs/cu_casque.png), auto;}


.fenetre:hover {
font-style: normal;
font-weight: normal;
text-shadow: 1px 1px #0d0401 ;}



.grilleF {
    display: grid;
    justify-items: center;
	margin: 3% 16% 50px 20%; 
    gap: 0 4%;                      

    grid-template-columns: 31% 31% 37%;
    grid-template-rows: auto;}


.chev13 {
width: 82%;
padding-left: 7%;}

.chev14 {
width: 84%;
padding-left: 7%;}

.chev2 {
width: 100%;}