/************ Formulaire ************/
#form_lexique {
    position:fixed;
    right:0;
    top:40vh;
    -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
    -moz-box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    margin-right:-172px;
    transition: margin-right 0.2s;
    z-index: 999999;
}
#form_lexique.deplie {
     margin-right:0;
 }
#form_lexique #content_lexique {
    position:relative;
    padding-left:42px;
}
#form_lexique header {
    position:absolute;
    left: 42px;
    top: 88px;
    background:#E83966;
    color:#fff;
    text-transform: uppercase;
    text-align: center;
    padding:15px 10px 10px 10px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    transform : rotate(-90deg);
    transform-origin: bottom left;
    width:130px;
    height:42px;
    cursor:pointer;
}
#form_lexique main {
    background:#fff;
    text-align: center;
    padding:15px;
    height:130px;
    width:172px;
}
#form_lexique main input {
    border:none;
    border-bottom:2px solid #aaa;
    margin-top:10px;
    padding:0 0 3px 0;
}
#form_lexique main button {
    margin-top:20px;
}
#form_lexique #lexique_wait,
#form_lexique #lexique_ok {
    display:none;
    position: absolute;
    right: 10px;
    bottom: 25px;
}
#form_lexique #lexique_ok {
    color:#00A06E;
}

/************ Liste ************/
#lexique_liste{
    border-spacing : 0;
    border-collapse : collapse;
    padding:0;
    margin:30px 0;
}
#lexique_liste td,
#lexique_liste th{
    padding:5px;
    text-align:center;
}
#lexique_liste th{
    text-transform: uppercase;
    font-size: 12px;
    padding:10px;
}
#lexique_liste td{
    border-bottom:1px solid #1C1C1B;
}
#lexique_liste td.mot{
    padding:5px 0;
    text-align:left;
    min-width:150px;
    font-weight: bold;
}
@media screen and (max-width:1300px) {
    #lexique_liste td.mot{
        min-width:auto;
    }
    #lexique_liste th{
        padding:10px 5px;
    }
    #lexique_liste td,
    #lexique_liste th{
        padding:5px 3px;
    }
}

#lexique_liste .close {
    display:inline-block;
    color:red;
    font-weight: bold;
    cursor:pointer;
    margin-right:7px;
}


#lexique_liste .bw_definition,
#lexique_liste .bw_traduction {
    display:inline-block;
    width:19px;
    height:19px;
    background-size:19px 19px;
    cursor:pointer;
}
#lexique_liste .bw_definition {
    background: url('../img/definition.svg') no-repeat center center;
}
#lexique_liste .bw_traduction {
    background: url('../img/traduction.svg') no-repeat center center;
}

/************ Liste des thématiques ************/
#thematiques {
    display:flex;
    flex-wrap: wrap;
}
#thematiques .thematique{
    display:block;
    margin:20px;
    width:450px;
    max-width: 100%;
    background-size: cover;
    background-position: center;
    text-align:center;
    padding:60px 10px;
    position: relative;
}
#thematiques .thematique .title {
    display:block;
    color:#fff;
    text-transform: uppercase;
    font-size: 1.3em;
    font-weight:bold;
    padding-bottom:15px;
    z-index: 2;
    position: relative;
}
#thematiques .thematique .button {
    color:#000;
    background-color: #fff;
    z-index: 2;
    position: relative;
}
#thematiques .thematique .overlay {
  background-color: #000;
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.4;
  z-index: 1;
  left: 0;
  top:0;
}
#copy {
  display: none; 
}