*, ::before, ::after{
    box-sizing: border-box;
    margin:0;
    padding:0;   
}
:root{
    --colFond:lightgrey;
    --colHead:beige;
    --colButHover:white;
    --colButActive:salmon;
    --colButtTitre:grey;
    --colTextTitre:white;
    --margBotGeneral:3px;
    --textButSize:.9em;
    --textCardSize:2em;
    --symbCardSize:2em;
    --symbAaa:1.2em;
    --bordTransp:transparent;
    --textButSizeLien:.8em;
    --varColorGreen:hwb(120 42% 24%);
    --varColorOrange:hsl(49, 40%, 64%);
#header{
    display: none;
}
}
body{
    background-color:var(--colFond);
    font-size: 1em;
}
.bigcontainer{
    width: 100%;
    max-width: 660px;
    /* min-width: 600px; */
    /* padding: 0.3em 0.5em; */
}
.bigcontainerliste{
    display: flex;
    width: 100%;
    max-width: 660px;
    min-width: 600px;
    /* padding: 0.3em 0.5em; */
    padding: auto;
    align-content: center;
}
.container-12{
    /* margin:auto; */
    margin-top: 5px;
    display: grid;
    flex-flow: row nowrap;
    grid-template-columns: repeat(12,1fr);
    justify-content: space-between;
   }
.header{
    background-color: var(--colHead);
    line-height: 2em;
    margin-bottom: var(--margBotGeneral);
}
h1{
        display: none;
}

.header a{
    color:black;
    text-decoration: none;
}
.corpus{  
    margin-top: 0.3em;
}
.container-12.footer{
    display: grid;    
    grid-template-columns: repeat(3,1fr);
    padding: 5px;
    margin: 0px;
    
}
.footer{
    padding: 0.5em;
    background-color: orange;
    text-align: center;
    line-height: 1.5em;
    border-style: none;
    cursor: not-allowed;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
#nav1,#nav2,#nav3,#nav4{
    grid-column: span 3;
    text-align: center;    
}
#titre{
    text-align: center;
    line-height: 4em;
   grid-row-start:2 ;
   grid-row-end: 3;
   grid-column-start: 1;
   grid-column-end: 13;
}
#side-left{
    margin-top: 60px;
    margin-bottom: 100px;
    background-color: brown;
    border-radius: 60px;
    color:azure;
    margin-right: 5px;
    padding: 30px;
    grid-row-start:3 ;
    grid-row-end: 4;
    grid-column-start: 1;
    grid-column-end: 4;
    -webkit-border-radius: 60px;   
    -ms-border-radius: 60px;
    -o-border-radius: 60px;
}
#article{
    font-size:var(--textButSize);
    text-align: justify;
    padding: 20px 0 40px 30px;
    grid-row-start:3 ;
    grid-row-end: 4;
    grid-column-start: 5;
    grid-column-end: 12;
}
#lien1,#lien2,#lien3{
    display: none;
    /*border:1px solid;*/
    font-size: var(--textButSizelien);
}
#mod-footer{
    display:none;   
    /* height:1.3em; */
}
#fin{   
    /* display: none; */
    grid-column: span 12;
}
/* #fin:hover{
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
} */
#art-inside{
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
img{
    padding-right: 40px;
}
p{
    padding: 10px;
}
.score{
    padding:0em;
}
p.pcard-r{
    color:red;   
    display: inline-block;
    line-height: 0px;
    font-size: var(--textCardSize);
}
p.pcard-b{
    color:black;    
    display: inline-block;
    line-height: 0px;
    font-size: var(--textCardSize);
}
.btn-attk{   
    margin:auto;
    display: grid;
    grid-template-columns: repeat(12,1fr);
    gap:3px;
    justify-content: stretch;
    
}
#modalStart{
    margin:auto;
    display: none;
    /*display: grid;*/
    height: 3em;
    width:100%;
    padding-top: 0.5em;
    font-size: 1.2em;
    gap:3px;
    justify-content: stretch;
    border-radius: .5em ;
    -webkit-border-radius: .5em ;
    -moz-border-radius: .5em ;
    -ms-border-radius: .5em ;
    -o-border-radius: .5em ;
}
#modPartie,#modPartie1,#modPartie2,#modPartie3{
    display: none;
}
#modList{
    width:auto;
    display:none;
}
.couleurs{
    background-color: var(--colTextTitre);
    /*font-size: var(--textCardSize);
    font-size: var(--symbAaa);
    font-size: 1.8em;
    border: 1px solid;*/
}
.preneur, .appele{
    grid-column: span 2;
}
.btn-contrat{    
    margin:auto;
    margin-bottom: var(--margBotGeneral);
    display: grid;
    grid-template-columns: repeat(8,1fr);
    gap:3px;
    justify-content:stretch;
}
.btn-bouts{    
    margin:auto;
    display: grid;
    grid-template-columns: repeat(12,1fr);
    gap:3px;
    justify-content: center;
    font-weight: bold;
}
.couleurs{
    border-radius: 0.2em;
    border:1px solid grey;
    font-size:var(--textCardSize);
    text-align: center;
   
    margin-bottom: var(--margBotGeneral);
    -webkit-border-radius: 0.2em;    
    -ms-border-radius: 0.2em;
    -o-border-radius: 0.2em;
}
.points{
    background:hsla(115, 10%, 59%, 0.849) ;
    grid-column: span 2;
    border-radius: 0.5em;
    border:0px solid grey;
    font-size:var(--textButSize);
    text-align: center;
    -webkit-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    -ms-border-radius: 0.5em;
    -o-border-radius: 0.5em;
}
#couleur1,#couleur3{                                        /*   fond "texte" boutons COEUR et CARREAU    */
    color:red;
}
#attak0,#attak1,#attak2,#attak3,#attak4,#attak5,
#parten0,#parten1,#parten2,#parten3,#parten4,#parten5,
#contrat1,#contrat2,#contrat3,#contrat4,#contrat5,#contrat6,#contrat7,
#bouts1,#bouts2,#bouts3,#bouts4,#pts{
    background-color: var(--colHead);
    border-radius: 0.6em;
    line-height: 2em;
    font-size:var(--textButSize);    
    margin-bottom: var(--margBotGeneral);
    -webkit-border-radius: 0.6em;    
    -ms-border-radius: 0.6em;
    -o-border-radius: 0.6em;
}
#bouts1,#bouts2,#bouts3,#bouts4{
    border-radius:50%;
    line-height: 3em;
    margin-bottom: var(--margBotGeneral);
}
#attak0,#parten0,#bouts0{
    background-color: var(--colButtTitre);    
    color:var(--colTextTitre);
    padding-left: 5px;
    text-align: left;   
   }
#contrat0,#bouts0{
    background-color: var(--colButtTitre);
    color:var(--colTextTitre);   
    border-radius:0.6em;
    line-height: 2em;
    font-size:var(--textButSize);
    padding-left: 5px;
    text-align: left;
    margin-bottom: var(--margBotGeneral);
    -webkit-border-radius:0.6em;
}
#contrat0{
    color:var(--colTextTitre);   
}
#bouts0{
    grid-column: span 2;
}
#togglePoints{
    font-size:0.9em;
    font-weight:700;
}
#attak1:hover,#attak2:hover,#attak3:hover,#attak4:hover,#attak5:hover,
#parten1:hover,#parten2:hover,#parten3:hover,#parten4:hover,#parten5:hover,
#contrat1:hover,#contrat2:hover,#contrat3:hover,#contrat4:hover,#contrat5:hover,#contrat6:hover,#contrat7:hover{
    cursor:pointer;
    background-color: var(--colButHover);
    border-color: transparent;
}
#bouts1:hover,#bouts2:hover,#bouts3:hover,#bouts4:hover{
    cursor:pointer;
    background-color: var(--colButHover);
    border-color: transparent;
}
#couleur1:hover,#couleur2:hover,#couleur3:hover,#couleur4:hover{
    cursor:pointer;
    background-color: var(--colButHover);
    border: 1px solid;
}
#bouts1:active,#bouts2:active,#bouts3:active,#bouts4:active{
    cursor:pointer;
    background-color: var(--colButActive); 
    border-color: transparent;
}
#couleur1:active,#couleur2:active,#couleur3:active,#couleur4:active{
    font-size: var(--textCardSize);
    border: 1px solid;
}

.preneur, .appele, .contrat, .bouts, .couleurs{
    border-color: transparent;
}

.liste{
    display:inline-block;
    border-color: transparent;
    border-radius: .5em;
    font-weight:normal;
    font-size: var(--textButSize);
    width: 6em;
    height: 4em;
    padding:0;
    margin: 0.3em;
    -webkit-border-radius: .5em;    
    -ms-border-radius: .5em;
    -o-border-radius: .5em;
}
.liste-12{       
    margin:auto;
    display: flex;
    }
#tablePartie,#tableScore,#tablePoints{
display: none;
width: auto;
cursor: pointer;
}
/* #tableScore{
    display: none;
    width: auto;   
    cursor:pointer;
}
#tablePoints{
    display: none;
    width: auto;   
    cursor:pointer;
} */
table{
    background-color:var(--colHead);
    border-collapse: collapse;
}   
td{
    padding: 5px;
    text-align: center;
}

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  calculette xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  */
.calculette {  
    display: none;
    position: fixed;
    z-index: 1;
    left: 100px;
    top: 0px;
    overflow: auto;
    background-color: #4b3a66; 
    border-radius: 7px;
    -webkit-border-radius: 7px;    
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
}
.ecran{
    display: grid;
    grid-row: span 3;
    background-color: lightblue;
    font-size:1em;
    font-weight: 900;
    color:rgb(0, 0, 0);
    text-align: right;
    height: 60px;
    padding-left: 90px;
    padding-top: 20px;
    padding-right: 5px;
    margin:10px 15px 5px 15px;
    text-align: center;
    border:1px solid;
    border-radius:7px ;
}
  .toggle-preneur-defense{
    display: grid;
    grid-row: span 3;
    background-color: #8c819e;
    height: 40px;
    padding: 7px;
    margin:5px 15px 5px 15px;
    text-align: center;
    border:1px solid;
    border-radius:7px;
    -webkit-border-radius:7px;    
    -ms-border-radius:7px;
    -o-border-radius:7px;
}
    

.clavier {
    display: grid;
    grid-template-columns: repeat(3,40px);
    grid-template-rows:repeat(4,40px);
    background-color: #4b3a66;
    margin-top: 5px;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #888;
    border-radius:5px ;
    -webkit-border-radius:5px ;    
    -ms-border-radius:5px ;
    -o-border-radius:5px ;
    grid-gap: 5px;    
  }
.touche{
    background-color: rgb(83, 83, 71);
    color:var(--colButHover);
    display: grid;
    justify-content: center;
    align-content: center;
    width:100%;
    padding: 7px;
    border: 1px solid;
    border-radius: 5px;
    -webkit-border-radius: 5px;    
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
.touche:hover,.toggle-preneur-defense:hover{
    background-color: #888;
    cursor: pointer;
    transform: translateY(1px);
    -webkit-transform: translateY(1px);
    -moz-transform: translateY(1px);
    -ms-transform: translateY(1px);
    -o-transform: translateY(1px);
}
.touche:active,.toggle-preneur-defense:active{
  background-color: #6b6b6b;
  cursor: pointer;
  transform: translateY(2px);
  -webkit-transform: translateY(2px);
  -moz-transform: translateY(2px);
  -ms-transform: translateY(2px);
  -o-transform: translateY(2px);
}
  #corr{
    background-color: orange;
    font-size: var(--textButSize);
    font-weight: 200;
  }
  #enter{
    background-color: green;
    font-size: var(--textButSize);
    font-weight: 200;
  }
/*-------------------------------------------------------------*/
.active{
    background-color: rgb(112, 85, 85);
    color:yellow;
   
}
.hoover{
    cursor: pointer;
    background-color: white;
    color:red;
    transform: translate(3px);
    -webkit-transform: translate(3px);
    -moz-transform: translate(3px);
    -ms-transform: translate(3px);
    -o-transform: translate(3px);
}