/* Pour les titres  */
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:400,700');


* {
    -webkit-print-color-adjust: exact !important;   /* Chrome, Safari */
    color-adjust: exact !important;                 /*Firefox*/
}


.ft1 {
	font-size:1.6em; /* 1.6em; */
    font-weight:500;
    text-decoration: none;
	color: #000;
	text-align:center;
	margin-bottom:0.5em;
}

.ft2 {
color: #000;
display: inline-block;
font-weight: 500;
}

.ft3 {
    font-weight: 600;
	color:#0F798B;
	margin-bottom:10px;
}

.ft4 {
text-decoration: underline;
}


/* btn */

.btn-play-right {
    background: linear-gradient(225deg, #2F8F83 0%, #58BA52 100%);
    color: #FFF;
    border: 0px solid #54B454;
    transition: background .4s, color .4s;
    font-weight: 500;
    width:auto;
    cursor: pointer;
    border-radius: 2px;
    text-decoration: none;
    padding: 0.2em 0.6em;
    outline: 0;
    font-size: 1em;
    text-align: center;
    display: inline-block;
    -webkit-appearance: none;
    -webkit-transition: background 0.3s ease-in-out;
    -moz-transition: background 0.3s ease-in-out;
    transition: background-color 0.3s ease-in-out;
    float:right;
}

.btn-play-right:hover {
    background: #54B454;
    color:#FFF;
    -webkit-transition: background 0.3s ease-in-out;
    -moz-transition: background 0.3s ease-in-out;
    transition: background-color 0.3s ease-in-out;
    box-shadow: 0px 3px 10px  #CCCCCC;
}

.btn-play-right:active {
    -webkit-transition: background 0.3s ease-in-out;
    -moz-transition: background 0.3s ease-in-out;
    transition: background-color 0.3s ease-in-out;
}



div.retoursommaire {
    float: left;
    padding-right: 10px;
}

.btn-print, .btn-send {
    background: linear-gradient(225deg, #2F8F83 0%, #58BA52 100%);
    color: #FFF;
    border: 0px solid #54B454;
    transition: background .4s, color .4s;
    font-weight: 500;
    width:auto;
    cursor: pointer;
    border-radius: 2px;
    text-decoration: none;
    padding: 0.3em 0.5em;
    outline: 0;
    font-size: 1em;
    text-align: center;
    display: inline-block;
    -webkit-appearance: none;
    -webkit-transition: background 0.3s ease-in-out;
    -moz-transition: background 0.3s ease-in-out;
    transition: background-color 0.3s ease-in-out;
}



.btn-print:before  {
	content: "";
    display: block;
    background: url(/images/printer.png) no-repeat;
    width: 20px;
    height: 20px;
    float: left;
    margin: 4px 6px 0 0;
	background-size:100%;
}

.btn-send:before  {
	content: "";
    display: block;
    background: url(/images/email_send.png) no-repeat;
    width: 20px;
    height: 20px;
    float: left;
    margin: 4px 6px 0 0;
	background-size:100%;
}

.btn-print:hover, .btn-send:hover {
 background: #54B454;
  color:#FFF;
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
    box-shadow: 0px 3px 10px  #CCCCCC;
}

.btn-print:active, .btn-send:active {
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
}

/* cartes */
.coeur,
.pique,
.carreau,
.trefle {
	width:30px;
	height:45px;
	background-color:#FFF;
	border: thin  #D8D8D8 solid;
	border-radius:5px;
	box-shadow:-2px 1px 2px #CCC;
	font-size:1.0em; /* 1.2em */
	text-align:center;
	margin-bottom:5px;
	line-height:16px;
	padding:4px;
	color: #000;
	display:inline-block;
	margin-right:-6px;
	font-weight:500;
}
.coeur:after {
	content:"";
	background-size:65%;
	background-image: url(/images/coeur.png);
	background-repeat:no-repeat;
	 display: block;
    width:20px;
    height:25px;
    float: left;
    margin: 1px 0px 0px 3px;
	text-transform:uppercase;
	}
	
	
.pique:after {
	content:"";
	background-size:65%;
	background-image: url(/images/pique.png);
	background-repeat:no-repeat;
	 display: block;
    width:20px;
    height:25px;
    float: left;
    margin: 1px 0px 0px 3px;
	font-weight:700;
	}
	
.trefle:after {
	content:"";
	background-size:65%;
	background-image: url(/images/trefle.png);
	background-repeat:no-repeat;
	 display: block;
    width:20px;
    height:25px;
    float: left;
    margin: 1px 0px 0px 3px;
	}
	
.carreau:after {
	content:"";
	background-size:65%;
	background-image: url(/images/carreau.png);
	background-repeat:no-repeat;
	 display: block;
    width:20px;
    height:25px;
    float: left;
    margin: 1px 0px 0px 3px;
	
	}
/* cartes  Ouest et Est type Q */	
	
.coeur-OE,
.pique-OE,
.carreau-OE,
.trefle-OE {
	width:30px;
	height:45px;
	background-color:#FFF;
	border: thin  #D8D8D8 solid;
	border-radius:5px;
	box-shadow:0px -1px 3px #CCC;
	font-size:1em; /* 1.2em */
	text-align:center;
	line-height:16px;
	padding:2px 4px 0 4px;
	color: #000;
	font-weight:500;
	position: static;
	margin-top:-14px;
	
}


.coeur-OE:after {
	content:"";
	background-size:65%;
	background-image: url(/images/coeur.png);
	background-repeat:no-repeat;
	 display: block;
    width:20px;
    height:25px;
    float: left;
    margin: 0px 0px 0px 3px;
	text-transform:uppercase;
	position: absolute;
}
	
	
.pique-OE:after {
	content:"";
	background-size:65%;
	background-image: url(/images/pique.png);
	background-repeat:no-repeat;
	 display: block;
    width:20px;
    height:25px;
    float: left;
    margin: 0px 0px 0px 3px;
	font-weight:700;
	position: absolute;
}
	
.trefle-OE:after {
	content:"";
	background-size:65%;
	background-image: url(/images/trefle.png);
	background-repeat:no-repeat;
	display: block;
    width:20px;
    height:25px;
    float: left;
    margin: 0px 0px 0px 3px;
	position: absolute;
}
	
.carreau-OE:after {
	content:"";
	background-size:65%;
	background-image: url(/images/carreau.png);
	background-repeat:no-repeat;
	display: block;
    width:20px;
    height:25px;
    float: left;
    margin: 0px 0px 0px 3px;
	position: absolute;
}

/* Main */


.main_S,
.main_N {
	display:block;
}

.main_O,
.main_E {
	display:block;
}
	
/* div */

.fichebloc {
   clear:both;
   margin-left:auto;
   margin-right:auto;
   margin-bottom: 30px;
   width:100%;
   background-color: #FFF;
   border-top: 0px solid yellow;
   box-shadow:1px 8px 20px #CCC;
   border-radius:2px;
}


div.fichebloc li {
	list-style: url(/images/arrow-small.png);
}

div.fichebloc ul {
    text-align: left;
}

/*  Pour les exemples ...*/

div.exemple_decor {
    /*border: 8px solid green;*/
    border: 0px dotted graytext;
    height:auto;
}

	
.exemple_commentaire {
    border-top: 0px dotted gray;
    height:auto;
    text-decoration: none;
	font-family: 'Source Sans Pro';
}

.exemple_commentaire p {
font-family: 'Source Sans Pro';
font-weight: 300;
color: #5d5d5d;
font-size: 16px;
line-height: 1.75em;
text-align:left;
}

.separator {
	height:2px;
	box-shadow: 1px 2px 10px #666666;
	width:auto;
}

.fin-fiche {
    clear: both;
    border-bottom: 0px Dotted  #4CB357;
}

.fin-exemple {
    clear: both;
    border-bottom: 1px Dotted  #4CB357;
	padding-top:3px;
	padding-bottom:3px;
}

/* Tableau encheres */
table.encheres {
  color: #000;
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0.2em 0;
  padding: 0;
  width: 50%;
  table-layout: auto;
  background-color: #FFF;
  border-radius:5px;
  box-shadow: #D0D0D0 1px 3px 2px;
  vertical-align:middle;
  font-family:'Roboto Slab', serif;
}

table.encheres th {
    background-image:url(/images/title-sone.png);
	color:#efe3cd;
	font-size: 1.25em;
    letter-spacing: .02em;
    text-transform: uppercase;
	font-weight: 200;
	/*height:auto;*/
    height: 1em;
    width:110px;
    border-left: 1px solid white;
}

table.encheres tr {
    border-top: solid 0px   #005D28;
    /*background-color:#97b36e;*/
    /*border: 1px solid black;*/
    height: 10px;
    margin: 0 auto;
}

table.encheres .color {
    /*background-color:#7da25e;*/
}

table.encheres th,
table.encheres td {
    text-align:center;
    padding: 0.1em 0.2em;
}

/* cartons encheres */
table.encheres .carton-C,
table.encheres .carton-P,
table.encheres .carton-K,
table.encheres .carton-T,
table.encheres .carton-SA,
table.encheres .carton- {
    width:45px;
	height:30px;
	background-color:#FFF;
	border: thin  #D8D8D8 solid;
	border-radius:5px;
	box-shadow:0px 2px 5px  #1F461F;
	font-size:1.2em; /* 1.2em */
	text-align:center;
	padding:0px 4px 10px 4px;
	color: #000;
	display:inline-block;
    margin-top:5px;
    margin-bottom:5px;
	font-weight:500;

}

table.encheres .carton-SA {
    font-size: 1.0em;
}
table.encheres .carton- {
    font-size: 1.1em;
}


 table.encheres .carton-C:after,
 table.encheres .carton-P:after,
 table.encheres .carton-T:after,
 table.encheres .carton-K:after
 {
     content:"";
     background-size:65%;
     background-repeat:no-repeat;
     display: block;
     width:20px;
     height:25px;
     float: right;
 }

table.encheres .carton-C:after
{
	background-image: url(/images/coeur.png);
    margin: 5px -2px 0px 0px;
	text-transform:uppercase;
}
	
	
table.encheres .carton-P:after {
	background-image: url(/images/pique.png);
    margin:4px -2px 0px 0px;
	font-weight:700;
}
	
table.encheres .carton-T:after {
	background-image: url(/images/trefle.png);
    margin: 5px -5px 0px 0px;
}
	
table.encheres .carton-K:after {
	background-image: url(/images/carreau.png);
    margin: 5px -5px 0px 0px;
}
	
table.encheres .carton-SA:after,
table.encheres .carton-:after
 {
	content:"";
	display: block;
    float: right;
    margin: 0px 0px 0px 0px;
}


/*  exemple-typeQ */

table.exemple-typeQ  {
    text-align: center;
    padding:0;
    border-collapse: separate;
    table-layout: auto;
}

table.exemple-typeQ td {
    padding:0;
}


/*  tapis */


table.tapis  {
    background-color: #FFF;
    text-align: center;
    border: 1px solid #4CB357;
    border-collapse: separate;
    margin: 5% auto 5%;
    padding:8px 5px 5px 2px;
    width: 150px;
    height:150px;
    table-layout: auto;
}

table.tapis  .C,
table.tapis  .P,
table.tapis  .K,
table.tapis  .T,
table.tapis  .SA  {
	width:45px;
	height:30px;
	background-color:#FFF;
	border: thin  #D8D8D8 solid;
	border-radius:5px;
	box-shadow:0px 2px 5px  #1F461F;
	font-size:1.2em;
	text-align:center;
	padding:0px 4px 10px 4px;
	color: #000;
	display:inline-block;
	font-weight:500;
	vertical-align:middle;
    
}
table.tapis .C:after
{
	content:"";
	background-size:65%;
	background-image: url(/images/coeur.png);
	background-repeat:no-repeat;
	 display: block;
    width:20px;
    height:25px;
    float: right;
    margin: 5px -2px 0px 0px;
	text-transform:uppercase;
}
	
	
table.tapis .P:after {
	content:"";
	background-size:65%;
	background-image: url(/images/pique.png);
	background-repeat:no-repeat;
	 display: block;
    width:20px;
    height:25px;
    float: right;
    margin:4px -2px 0px 0px;
	font-weight:700;
    
	}
	
table.tapis .T:after {
	content:"";
	background-size:65%;
	background-image: url(/images/trefle.png);
	background-repeat:no-repeat;
	 display: block;
    width:20px;
    height:25px;
    float: left;
    margin: 4px -2px 0px 0px;
}
	
table.tapis .K:after {
	content:"";
	background-size:65%;
	background-image: url(/images/carreau.png);
	background-repeat:no-repeat;
	 display: block;
    width:20px;
    height:20px;
    float: left;
    margin: 4px -2px 0px 0px;
}
	
table.tapis .SA:after {
	content:"SA";
	color: #0030FF;
	 display: block;
    float: right;
    margin: 0px 0px 0px 0px;
}

/* cartes */

table.tapis .coeur,
table.tapis .pique,
table.tapis .carreau,
table.tapis .trefle {
	width:30px;
	height:45px;
	background-color:#FFF;
	border: thin  #D8D8D8 solid;
	border-radius:5px;
	box-shadow:-2px 1px 2px #CCC;
	font-size:1.2em;
	text-align:center;
	margin-bottom:5px;
	line-height:16px;
	padding:4px;
	color: #000;
	display:inline-block;
	margin-right:-5px;
	font-weight:500;
}

table.tapis .coeur:after {
	content:"";
	background-size:65%;
	background-image: url(/images/coeur.png);
	background-repeat:no-repeat;
	display: block;
    width:20px;
    height:25px;
    float: left;
    margin: 1px 0px 0px 3px;
	text-transform:uppercase;
}
	
	
table.tapis .pique:after {
	content:"";
	background-size:65%;
	background-image: url(/images/pique.png);
	background-repeat:no-repeat;
	display: block;
    width:20px;
    height:25px;
    float: left;
    margin: 1px 0px 0px 3px;
	font-weight:700;
}
	
table.tapis .trefle:after {
	content:"";
	background-size:65%;
	background-image: url(/images/trefle.png);
	background-repeat:no-repeat;
	 display: block;
    width:20px;
    height:25px;
    float: left;
    margin: 1px 0px 0px 3px;
    
}
	
table.tapis .carreau:after {
	content:"";
	background-size:65%;
	background-image: url(/images/carreau.png);
	background-repeat:no-repeat;
	display: block;
    width:20px;
    height:25px;
    float: left;
    margin: 1px 0px 0px 3px;
}
	
table.encheres .vulnerable {
		background-image: url(/images/title-sone-vuln.png);
		z-index:1;
		}

		
.carton-passe {
    color:#060;
    font-size:0.6em;
    padding-bottom: 0.3em;
}

.carton-x, .carton-xx {
    color: #900;
}

@media screen and (max-width: 2580px) {
    .pFT {
        width: 80%;
        margin-left: 10%;
    }

    .fichebloc {
        padding:5%;
    }

		
    .fichetexte {
        border-bottom: 1px solid  #4CB357;
        margin: 0 20px;
        padding: 1.5em 0 2em 0em;
    }

    div.fichebloc ul {
        margin-left: 3em;
    }

    div.exemple_decor {
        width: 60%; /* 44% */
        float: left;
        /* margin: 0px 60px 20px 20px; */
        margin-top: 0px;
        margin-bottom: 20px;
        margin-left: 20%;
        margin-right: 20%;
        
    }

    .exemple_commentaire {
        width: 80%; /* 42% */
        float: left;
        margin: 40px 10px 50px 10px;
    }	

    .btn-print, .btn-send {
        margin:0.3em 0px 1em 0;
        float: right;
    }
}

@media screen and (max-width: 980px) {
		
    .fichebloc {
        padding:2%;
    }

    .pFT {
        width: 96%;
        margin-left: 2%;
    }

    div.exemple_decor {
        width: 60%; /* 47% */
        float: left;
        margin: 0px 40px 20px 20px;
        margin-top: 0px;
        margin-bottom: 20px;
        margin-left: 20%;
        margin-right: 20%;
    }
    .exemple_commentaire {
        margin: 40px 10px 50px 0px;
    }			
}

@media screen and (max-width: 736px) {
    .exemple {
        height:auto; 
        width: 92%;
        float: none;
        margin: 0px 4% 20px 4%;
    }

    .fichetexte {
        border-bottom: 0px solid  #4CB357;
        margin: 0;
        padding: 1.5em 10% 2em 10%;
    }

    div.fichebloc ul {
        margin-left: 20px;
    }

    .fichebloc {
       padding:30px 0px 20px 0px;
    }

    div.exemple_decor {
        width: 100%;
        float: none;
        margin: 0 0 40px 0;
    }

    .exemple_commentaire {
        width: 90%;
        float:none;
        margin: 0px 5% 50px 5%;
    }

    .pFT {
        width: 100%;
        margin-left:0;
    }

    .btn-send {
        margin:0.3em 10px 1em 0;
        float:right;
    }	

    .btn-print {
        display:none;
    }

    .retoursommaire {
        margin:0em 0 1em 10px;
    }
}	


/* Modifs speciales */
/*
@media print {
    table.encheres {
        width: 70%;
        margin-left: 15%;
    }

    table.encheres tr, table.encheres tr.color, table.encheres tbody tr th {
        background-color:#FFF;
        background-image: none;
        color: black;
        border: 2px solid gray;
    }
    
    #page-wrapper, .generalcontent, .box-padding  {
        margin :0 10%;
        padding:0 10%;
    }
}
 */