@font-face {
    font-family: 'Gotham Book';
    src: url('../font/Gotham_Book_Regular.otf');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Gotham Book';
    src: url('../font/Gotham_Bold.otf');
    font-weight: bold;
}
body {
    color:black;
    font-family:"Gotham Book",'Verdana';
    position:relative;
    height:100vh;
    display:flex;
      flex-direction:column;
}

.primaire {
    color:#0C7088;
}
.blanc {
    background:transparent;
    color:black;
}
h4 {
    text-align:center;
    background-color: #2AB7C9;
    color:white;
    padding:1rem;
}


#lebandeau div.lesonglets span.actif,
.doree {
    background:#F8C700;
    border-color:#F8C700;
    color:white;
}
 
.ennoir {
    color:black;
}
.large {
    padding:0.5em;
}

.larger {
    font-size:larger;
}

.coinrond {
    border-radius:5px;
}

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

#lebandeau .cotenubandeau,
html body main.main div.container {
    max-width:80%;
    margin-top:4em;
}

div.row.lessuggestions {
    justify-content: space-between;
}
div.row.lessuggestions.eleve {
    max-width: 70%;
}
div.row.lessuggestions > div {
    flex-basis: 48%;
}

/*
 * Footer
*/
footer {
    min-height:3em;
      margin-top:auto;
      position:relative;
}

footer div#docs {
    position:absolute;
    right:1em;
    top:0;
    bottom:0;
    display:flex;
}

footer div#docs a {
    margin:auto 1em;
    color:white;

}

/* Flash messages */
.message {
    padding: 1rem;
    margin:1rem auto;
    background: #eff8ff;
    color: #2779bd;
    border-color: #6cb2eb;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    margin-bottom: 2rem;
    text-align:center;
}
.message.hidden {
    display: none;
}
.message.success {
    background: #e3fcec;
    color: #1f9d55;
    border-color: #51d88a;
}
.message.error {
    background: #fcebea;
    color: #cc1f1a;
    border-color: #ef5753;
}

/*
Menu navigation
*/

nav.top-nav  {
    display:flex;
    width:80%;
    align-items:center;
}
nav.top-nav div.top-nav-title {
    flex-basis: 15%;
}
nav.top-nav div {
    display:inline-block;
}

nav.top-nav div a {
    margin:1rem;
}

footer,
#lebandeau {
    background:#2AB7C9;
    color:white;
}


/*
Bandeau
*/
#lebandeau {
    height:7.5em;
    font-weight:bold;
    padding:0 1.8rem;
    padding-top:2rem;
    position:relative;
    flex-shrink:0;
}
#lebandeau .cotenubandeau .titrepage {
    margin-bottom:1em;
    font-size: 2em;
}
#lebandeau .cotenubandeau {
    margin:auto;
    font-weight:bold;
    font-size:larger;
}
nav.top-nav {
    margin:1em auto;
}


/*
La page home
*/

main {
    padding-bottom:1em;
}
main.home h3 {
    font-weight:bold;
    font-size:2.3rem;
    margin-top:1rem;
}


#loginbox {
    margin-top:0;
}
.decale,
main.home .suggestions.content > div {
    margin-left:2em;
}



/*
Photo prof
*/
#leprof div.photo.ronde,
#leprof div.texte.bulle {
    display:inline-block;
    vertical-align:middle;
}
#leprof div.photo.ronde {
    width:92px;
    height:92px;
    border-radius:50%;
    background-size:cover;
    background-position:center;
    margin-right:1em;
}

#leprof div.texte.bulle:before {
      content: "";
      position: absolute;
      right: 100%;
      top: 26px;
      width: 0;
      height: 0;
      border-top: 10px solid transparent;
      border-right: 20px solid #F8C700;
      border-bottom: 10px solid transparent;
}
#leprof div.texte.bulle {
    color:black;
    font-weight:normal;
    max-width:25em;
    padding:0.5em;
    border-radius:10px;
    position:relative;
}

/*
Onglets
*/
#lebandeau div.lesonglets {

    bottom:0;
    overflow:hidden;
    padding-top:0.3em;
}
#lebandeau div.lesonglets span {
    margin-right:2em;
}
#lebandeau div.lesonglets span a {
    color:white;
}
#lebandeau div.lesonglets span.actif {
    border-radius:7px;
    padding:1em;
    padding-top:0.5em;
}
/*
Présentation suggestions
*/

div.leslivres  {
    display:flex;
    flex-wrap:wrap;
}
div.leslivres div.unesuggestion {
    text-align:center;
}
div.leslivres div.unesuggestion {
    margin: 0 2rem;
    margin-left: 0;
    flex-basis:30%;
}
div.leslivres div.extractdifficult span  {
    vertical-align:middle;
    display:inline-block;
    /* line-height:0; */
}
div.leslivres div.extractdifficult span img.lesetoiles {
    max-width:2rem;
}

#lesfiltres div.input.select label[for="bylevel-facile"],
div.leslivres div.extractdifficult.green {
    color:green;
}
#lesfiltres div.input.select label[for="bylevel-difficile"],
#lesfiltres div.input.select label[for="bylevel-expert"],
div.leslivres div.extractdifficult.red {
    color:red;
}
#lesfiltres div.input.select label[for="bylevel-moyen"],
#lesfiltres div.input.select label[for="bylevel-intermédiaire"],
div.leslivres div.extractdifficult.orange {
    color:orange;
}

#lesfiltres div.input.select label[for="bylevel-facile"] input {
    border-color: green;
}

#lesresultats div.niveau h5.Facile,
#lesfiltres div.input.select label[for="bylevel-facile"] input:checked {
  background: green;
}
#lesfiltres div.input.select label[for="bylevel-difficile"] input,
#lesfiltres div.input.select label[for="bylevel-expert"] input {
    border-color: red;
}
#lesresultats div.niveau h5.Difficile,
#lesresultats div.niveau h5.Expert,
#lesfiltres div.input.select label[for="bylevel-difficile"] input:checked,
#lesfiltres div.input.select label[for="bylevel-expert"] input:checked {
  background: red;
}
#lesfiltres div.input.select label[for="bylevel-moyen"] input,
#lesfiltres div.input.select label[for="bylevel-intermédiaire"] input {
    border-color: orange;
}
#lesresultats div.niveau h5.Moyen,
#lesresultats div.niveau h5.Intermediaire,
#lesfiltres div.input.select label[for="bylevel-moyen"] input:checked,
#lesfiltres div.input.select label[for="bylevel-intermédiaire"] input:checked {
  background: orange;
}


div.leslivres div.unesuggestion div {
    margin:0 auto;
}
div.leslivres div.unesuggestion div.couverture  {
    position:relative;
}
div.leslivres div.unesuggestion div.couverture img.couverture {
    height:250px;
}
div.leslivres div.unesuggestion div.couverture img.drapeau {
    position:absolute;
    right:0;
    top:-0.5em;
}

div.leslivres div.unesuggestion div.titre {
    font-weight:bold;
    max-width:12em;
    font-size: x-small;
}

/*
Historique
*/

div.historique div.leshistoriques .date {
    font-weight:bold;
    margin-bottom:2rem;
}

div.historique hr {
    border-color:#2AB7C9;
}
div.historique div.unadvice {
    font-weight:bold;
    margin-bottom:2rem;
}
/*
Le conseil
*/

div.sidebarright {
    float:right;
    max-width:25%;
}
#leconseil {
    padding:1em;
    border-radius:10px;
}

#leconseil div.legende {
    font-weight:bold;
    font-size:small;
    margin-bottom:0.5em;
}

#leconseil div.leconseil {
    font-weight:bold;
    font-size:normal;
}

.historique #leconseil {
    margin-bottom:2rem;
}
.historique #leconseil div.legende {
    font-size:initial;
}

/*
Le sous-menu
*/
ul.submenu {
    background:#2AB7C9;
    padding:1em;
    margin-top:1em;
    color:white;
    list-style: none;
}
ul.submenu li {
    background:white;
    position:relative;
    padding:0.5em;
    font-size:small;
    margin:0.5em auto;
    text-align:left;
}

ul.submenu li img {
    max-height:2em;
    width:auto;
    margin-right:0.5em;
}

ul.submenu li:after {
    content:"";
    position:absolute;
    right:0.1em;
    top:1.3rem;
    height:1.3rem;
    width:1.3rem;
    bottom:0;
    color:#2AB7C9;
    font-size:x-large;
    background:url('../img/chevron_bleu.svg') no-repeat;
    background-size:contain;

}
ul.submenu li img ,
ul.submenu li a {
    vertical-align:middle;

}
ul.submenu li a {
    color:#2AB7C9;
    display:block;
}


#lespinner  {
    display:none;
}
#lespinner.message {
    margin:0 auto;
}
#boutonfini {
    position:fixed;
    left:1em;
}
.invisible {
    display:none;
}
/*
    Les statistiques
*/
div.stats  {
    margin:2em auto;
    padding:0 3px;
    padding-bottom:3px;
}
div.stats div.lesstats {
    padding-top:2em;
    background:white;
}
div.stats div.entete a,
div.stats div.entete {
    color:black;
    padding:1em 0;
}
div.stats div.entete span {
    padding:1em;
}

div.stats div.entete {
    display:flex;
    padding:2px 0;
    align-items:center;
}

div.stats div.entete span.actif {
    background:white;
}
div.stats div.entete span.noted.actif {
    flex:1;
    border-top-right-radius:7px;
}
div.stats div.entete span.actif:first-child {
    border-top-left-radius:7px;
}
div.stats div.lesstats * {
    color:black;
}
div.lesstats div.unesuggestion {
    margin: 0 auto;
    flex-basis:18%;
}
div.lesstats div.unesuggestion div.couverture img.couverture {
    height:150px;
}

div.stats div.entete .spinner {
    margin-left:1em;
    padding:0.5em !important;
    border-width:5px !important;

}

/*
Lecture d'un livre
*/
.lecture {
    height:100vh;
}

div.content div.lelivre  {
    margin:0 auto;
    max-width:1024px;
}
div.content div.lelivre div.leslivres {
    margin:auto;
}
div.content div.lelivre div.leslivres div.unesuggestion {
    flex-basis:unset;
}

div.container div.felicitations,
div.content div.lelivre div.menuright {
    background:#2AB7C9;
}

div.container div.felicitations {
    margin:2em;
    color:white;
}

div.container div.felicitations div.bouton {
    padding:2em;
}

div.container div.felicitations div.bouton a {
    font-size: x-large;
    border-radius: 40px;
    padding: 0.5em 2.5em;
}


div.content div.lelivre div.menuright {
    margin:0 2em;
    display:flex;
    flex:1;
    align-items:center;
    padding-right:1em;
}


div.content div.lelivre div.menuright div.symbole {
    flex-basis:28%;
    margin:0 2em;
    color:white;
    font-weight:bold;
    font-size:1.1em;
}
div.content div.lelivre div.menuright .submenu {
    flex:1;
    margin:0 auto;
    padding:0 1em;
}
div.content div.lelivre div.menuright .submenu li a {
    font-size:1.5rem;
}

div.content div.lelivre div.menuright ul.submenu li:after {
    background-image:url('../img/chevron_jaune.svg');
    top:1rem;
    height:2rem;
    width:2rem;

}

div.content div.lelivre div.menuright div.symbole div {
    margin:1em;
}

#overlaylecture {
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    display:none;
    right:0;
    background:rgba(0,0,0,0.5);
    z-index:8000;
}
#closelecture {
   float:right;
    z-index:8010;
}
#fenetrelecture {
    position:absolute;
    top:1em;
    right:12%;
    left:15%;
    z-index:8005;
}

/*
 * Les avis
 *
*/
#noteconteneur  {
    text-align:center;
    margin:3rem auto;
}
#noteconteneur input[type="radio"]:not(.visible) {
    display:none;
}

#noteconteneur #lesnotes {
    display:flex;
    justify-content:center;
}

#noteconteneur #lesnotes label img {
    display:inline-block;
}
#noteconteneur #lesnotes label {
    margin:0 1em;
}

#noteconteneur #reccomend label,
#noteconteneur #reccomend input{
    display:inline-block;

}
#noteconteneur.advanced #lesnotes div#lanote label {
    display:inline-block;
}
#noteconteneur.advanced div#lesnotes div.advice img {
    max-width:200px;
    max-height:200px;
}

#monfeedback {
    max-height:450px;
    max-width:450px;
    margin:0;
}
div.lelivre div {
    text-align:center;
    position:relative;
}
div.lelivre div.monavis {
    top:-4em;
}

div.extract.content div.lelivre h2 {
    margin-bottom:0;
}

/*
 * Contact
*/
#contact {
    width:80%;
    margin:1em auto;
}
#contact textarea {
    width:auto;
    height:auto;
}
#contact input {
    max-width:65%;
}

/*
Layout anti-petits écrans
*
*/
#toosmall {
    display:none;
}
@media (max-width:880px) {
    #toosmall {
        display:block;
        position:fixed;
        top:0;
        bottom:0;
        left:0;
        right:0;
        color:white;
        background:rgba(0,0,0,0.8);
        z-index:100;
    }
    #toosmall div {
        position:absolute;
        top:25%;
        right:10%;
        left:10%;
        border:2px solid white;
        padding:1em;
    }
}
/*
Partie Admin
*/

div.table-responsive.upsidedown {
    transform:rotateX(180deg);
    overflow-x:auto;
}

div.table-responsive.upsidedown table {
    transform:rotateX(180deg);
}

div.table-responsive table td.actions div.sslabel {
    display:table-cell;
    border-left:1px dashed gray;
    border-right:1px dashed gray;
}
div.table-responsive table td.actions div.sslabel span {
    display:inline-block;
    vertical-align:middle;
}


span.cercleplein {
	font-size: x-large;
}


div.descriptionpage {
	font-size: small;
}

#lesresultats div.category h4,
div.lessuggestions.row h4 {
	text-align: left;
	font-weight: bold;
    max-width: 20rem;
}

.doree,
#lesresultats div.category h4,
div.lessuggestions.row h4,
#lesresultats div.niveau h5 {
    border-radius: 10px;
}