:root {
   --bg_base : #839192;
   --dore : #EDBB99;
}

html { 
    font-size: 62.5%;
    font-family: Roboto; 
    font-style: normal; 
    font-weight: normal; 
    line-height: normal; 
    border: none;
    margin: 0;
}

body { 
    background-color: var(--bg_base);
    color: white;  
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    font-size: 2rem;
}

.CENTRE {
    margin: auto;
    text-align: center;
}

.GARDE {
    height: 100%;
    width: 100%;    
}

.HEADER {
    width: 100%;
    height: 10%;  
    display: flex;    
}  

.DORE {
    color: var(--dore);
}

.BOITES {    
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 100%;
}

.BOITE {
    display: block;
    padding-top: 1em;
    padding-bottom: 1em;
    border: 2px;
    border-radius: 20px;
    width: 15em;
    box-shadow: 0.5em -3px 0 0 black inset;
    text-align: center;
    align-items: center;
    color: black;
}

.BIEN {
    display: block;
    margin: 0 auto;
    padding-top: 1em;
    padding-bottom: 1em;
    border: 2px;
    border-radius: 20px;
    width: 40em;
    text-align: center;
    align-items: center;
    background-color: #CECECE;
    color: black;
}
.BIEN img {
    width: 50%;
}

.CRITERES {
    display: flex;
    justify-content: center;
}

.IDENTIFIANTS {
    display: flex;
    justify-content: center;
}

.TBS {    
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 100%;
}

.TBG {
    display: block;
    padding-top: 1em;
    padding-bottom: 1em;
    border: 2px;
    border-radius: 20px;
    width: 40em;
    box-shadow: 0.5em -3px 0 0 black inset;
    text-align: center;
    align-items: center;
    color: black;
}
.TBG table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid purple;
    color: black;
}

.TBD {
    display: block;
    padding-top: 1em;
    padding-bottom: 1em;
    border: 2px;
    border-radius: 20px;
    width: 40em;
    box-shadow: 0.5em -3px 0 0 black inset;
    text-align: center;
    align-items: center;
    color: black;
}
.TBD table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid purple;
    color: black;
}

.TBM {
    display: block;
    margin: 0 auto;
    padding-top: 1em;
    padding-bottom: 1em;
    border: 2px;
    border-radius: 20px;
    width: 30em;
    text-align: center;
    align-items: center;
    background-color: #CECECE;
    color: black;
}
.TBM table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid purple;
    color: black;
}
.TBM img {
    width: 50%;
}

.QUITTANCE {
    margin-left: 1em;
    color: black;
}


.PIECES {    
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 100%;
}

.PIECES_G {
    display: block;
    padding-top: 1em;
    padding-bottom: 1em;
    border: 2px;
    width: 15%;
    text-align: center;
    align-items: center;
    color: black;
}
.PIECES_G table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid purple;
    color: black;
}

.PIECES_D {
    display: block;
    padding-top: 1em;
    padding-bottom: 1em;
    border: 2px;
    width: 85%;
    text-align: center;
    align-items: center;
    color: black;
}
.PIECES_D table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid purple;
    color: black;
}

@media screen {
.QUITTANCE {
    width: 30%;
}
}

#QUITTANCE_TITRE {
    font-size:1em;
    text-align: center;
}
#QUITTANCE_ADRESSES {
    font-size: 0.8em;
    padding-top: 1em;
}
#QUITTANCE_TEXTE {
    font-size:0.7em;
    justify-content:  flex-end;
    padding-top: 2em;
}
#QUITTANCE_DETAIL {    
    width: 100%;
    font-size:0.8em;
    padding-top: 2em;
}
#QUITTANCE_DATE {    
    font-size:0.8em;
    padding-top: 1em;
}
#QUITTANCE_SIGNATURE {   
    padding-top: 1em;    
    font-size: 1.5em;    
}

tbody                   { }
tbody.rose              { background: #FFFFCC; color:black; }
tbody.bleuclair         { background: #CCFFFF; }
tbody.silver            { background: #DDDDDD; color:black; }

table, input, button, header, select, textarea  { font-size: 0.8em; }  

th      { padding: 1px; border-collapse: collapse; text-align: center;}
.th     { text-align: left; }
td      { padding: 1px; border-collapse: collapse; }
.td_sb  { padding: 1em; border-style:none; }
.tdL    { text-align: left; }
.tdR    { text-align: right; }
.tdC    { text-align: center; }

.w25    { width: 25%; } 
.w30    { width: 30%; } 
.w50    { width: 50%; } 
.w75    { width: 75%; } 
.w80    { width: 80%; } 
.w90    { width: 90%; } 
.w100   { width: 100%; } 

.size_70        { font-size: 70%; }
.size_80        { font-size: 80%; }
.size_medium    { font-size: medium; }
.size_small     { font-size: small; }
.size_xsmall    { font-size: x-small; }
.size_smaller   { font-size: smaller; }

p       { margin-left: 2%; margin-right: 2%; }    

a       { text-decoration:none; color:white; }      

input { 
    background: white;
    border-width: 1px;
    border-color: black;
    padding-top: 1px; 
    border-radius: 5px;
    color: var(--bg_base);
}
input:focus {
    color: #000000;
}
input::placeholder {
    color: var(--bg_base); 
    opacity: 1;
}

.bouton {
  box-shadow: 0.2em -3px 0 0 black inset;
  background-color: white;
  border: 1px;
  border-radius: 20px;
  min-width: 7em;
  height: 1.5em;
  color: var(--bg_base);
  text-align: center;
  display: inline-block;
  font-size: 1em;
  padding-top: 1px;
}
.bouton:hover { 
  background-color: #C2A485;
}
.bouton:active { 
  background-color: #C2A485;
}
                        
button {
  box-shadow: 0.5em -3px 0 0 black inset;
  background-color: #F39C12;
  border: 2px;
  border-radius: 20px;
  min-width: 10em;
  color: white;
  text-align: center;
  display: inline-block;
  font-size: 1.5em;
}
button:hover { 
  background-color: #C2A485;
}
button:active { 
  background-color: #C2A485;
}

textarea {
    border:2px solid #2196F3;
    color: var(--bg_base);
    }
textarea::placeholder {
    color: var(--bg_base);
}

.PAGE {
    position: relative;
    width: 100%;    
    height: 100%;
    margin: 0;     
    padding: 0;
    border: none;
    top: 0;
    left: 0;
    font-size: 1em;
}

    
.TITRE {
    position: relative;
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 2em; 
    line-height: 1.2em; 
    font-weight: bold;
    color: var(--bg_base);
    background-color: white; 
    background-position: center;
    background-size: contain;
    text-align: center;
    display: inline;
}

.CONTACT {
    position: relative;
    height: 100%;
    background: #FFFFFF;
    background-size: cover;  
    color: var(--bg_base);
}
.CONTACT_ADRESSE {
    position: absolute;
    top: 15%;
    left: 2%;
    font-size: 1.2em;   
    color: var(--bg_base);
}
.CONTACT_ADRESSE table{
    color: var(--bg_base);
    font-size: 1.1em; 
}
.CONTACT_ADRESSE a{
    color: var(--bg_base);
    font-size: 1.1em; 
}

.CONTACT_CARTE{
    position: absolute;
    top: 45%;
    left : 2%;   
}
.CONTACT_CARTE img {
    width: 150%;
}
.CONTACT_MSG {
    position: absolute;
    top: 15%;
    font-size: 1.2em;
    left: 50%;
    padding: 5px;
}

.Profil {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: left; 
    padding: 5px;
}

footer {     
    color: white;    
    vertical-align: central;    
    padding: 0;
}

#MENTIONS_LEGALES { 
    padding: 5px;
    float: left; 
}
#MENTIONS_LEGALES a {
    color: white;
}

ul#LIENS_RS { 
}
ul#LIENS_RS li {
    display: inline;
    list-style: none;    
    margin-left: 2em;
}
ul#LIENS_RS li a:hover img {
    transform: scale(1.1) rotate(3deg) translateX(2px);   
}
ul#LIENS_RS li img {
    border-radius: 10px;    
}

.GRANDS_PARENTS {    
    display: flex;
    flex-direction: row;
    justify-content: space-around;    
}
.GRAND_PARENT {    
    height : 8em; 
    padding-top: 1em;
    border: 2px;
    border-radius: 20px;
    width: 17em;
    box-shadow: 0.5em -3px 0 0 white inset;
    font-size: 1rem;
    padding-left: 1em;
}
.PARENTS {    
    display: flex;
    justify-content: space-around;
}
.PARENT {
    height : 7em; 
    padding-top: 1em;
    border: 2px;
    border-radius: 20px;
    width: 20em;
    box-shadow: 0.5em -3px 0 0 grey inset;
    font-size: 1.5rem;
    padding-left: 1em;
    margin-top: 1em;    
}
.SUJET {    
    display: flex;
    justify-content: space-around;
}
.SUJE {
    height : 7em; 
    padding-top: 1em;
    border: 2px;
    border-radius: 20px;
    width: 45em;
    box-shadow: 0.5em -3px 0 0 pink inset;
    font-size: 2rem;
    padding-left: 1em;
    margin-top: 1em;    
}
.FAMILLES {    
    display: flex;
    justify-content: space-around;
}
.FAMILLE {
    height : 25em; 
    padding-top: 1em;
    border: 2px;
    border-radius: 20px;
    width: 30em;
    box-shadow: 0.5em -3px 0 0 silver inset;
    font-size: 1.5rem;
    padding-left: 1em;
    margin-top: 1em;    
}
.FAMILLET {
    border: solid 1px;
    border-color: white;
    border-collapse: collapse;
    padding: 3px;
}
.FAMILLETG {
    border: solid 1px;
    border-color: white;
    border-collapse: collapse;    
}

.FRAMES {    
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

.FRAME {
    display: block;
    padding-top: 1em;
    padding-bottom: 1em;
    text-align: center;
    align-items: center;
    color: black;
}

.BINGO_td { 
    padding: 3px; 
    border-width: 1px; 
    border-style: solid; 
    border-color: black; 
}

.BINGO_LOGO {
    position: absolute;  
    top: 0%;
    left: 1%;
    width: 12%;
    height: 12%;
    background-image: url(Boutons/joa_logo.png); 
    background-repeat: no-repeat;  
    background-size: contain;
}

.BINGO_TITRE {
    position: absolute;
    top: 3%;
    left: 10%;
    font-size: 3rem; 
    font-weight: bold;
    text-align: center;
    justify-content:  center;
}

.BINGO_LOT {
    position: absolute;
    top: 1%;
    left: 30%;
    font-size: 6rem; 
    font-weight: bold;
    text-align: center;
    justify-content:  center;
}

.BINGO_LIBTIT {
    position: absolute;
    top: 1%;
    left: 80%;
    font-size: 6rem; 
    font-weight: bold;
    text-align: center;
    justify-content:  center;
    animation-name: clignoter;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}
@keyframes clignoter {
    from {background-color: red;}
    to {background-color: yellow;}
}

.BINGO_TABLE {
    position: absolute;
    top: 12%;
    left: 1%;
    width: 70%;
    font-size: 8rem; 
    font-weight: bold;
    text-align: center;
    justify-content:  center;
}
.BINGO_TABLE table {
    width: 100%;
    text-align: center;
    color: black;
    border: solid 1px;
    border-collapse: collapse;
}

#BINGO_CHIFFRE {
    border: 1px solid;
    position: absolute;
    top: 12%;
    left: 72%;
    width: 26%;
    text-align: center;
    justify-content:  center;
    font-size: 30rem; 
    display: block;
}

#BINGO_COMMANDE {
    border: 1px solid;
    position: absolute;
    top: 55%;
    left: 72%;
    width: 26%;
    text-align: center;
    justify-content:  center;
    font-size: 2rem; 
    display: block;
}

#BINGO_NUMEROS {
    border: 1px solid;
    position: absolute;
    top: 65%;
    left: 72%;
    width: 26%;
    text-align: center;
    justify-content:  center;
}

#ADIV_1 {
    position: relative;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;    
    display:  inline;
}

#ADIV_2 {
    position: relative;
    top: 0%;
    left: 0%;
    width: 100%;
    align-items: center;
    align-content: center;
    display: block;
}

a span                  
{ 
    position:absolute;    
    margin-top:23px;
    margin-left:-35px;
    color:#FFFFFF;
    background:rgba(0,0,0,.9);
    padding:15px;
    border-radius:3px;
    box-shadow:0 0 2px rgba(0,0,0,.5);
    transform:scale(0) rotate(-12deg);
    transition:all .25s;
    opacity:0;
}
a:hover span, a:focus span
{
    position:absolute;    
    margin-top:23px;
    margin-left:-35px;
    color:#0000FF;
    background:#E8ECEC;
    padding:15px;
    border-radius:3px;
    box-shadow:0 0 2px rgba(0,0,0,.5);
    transform: scale(1);
    transform: rotate(0);
    opacity:1;
}

.ZONE 
{
    height: auto;
    justify-content: space-around;    
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#GAUCHE
{
    position: absolute;
    overflow: scroll;
}

#DROITE
{
    position: fixed;
    overflow: auto;
}

.BOS {    
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 100%;
}

.BO {
    display: block;
    padding-top: 1em;
    padding-bottom: 1em;
    text-align: center;
    align-items: center;
    color: black;
}