@font-face {
    font-family: Roboto;
    src: url('../fonts/Roboto/Roboto-Light.ttf');
    font-weight: normal;
}

@font-face {
    font-family: Roboto;
    src: url('../fonts/Roboto/Roboto-Regular.ttf');
    font-weight: bold;
}

@font-face {
    font-family: charter;
    src: url('../fonts/charter/ttf/Charter-Regular.ttf');
    font-weight: normal;
}

@font-face {
    font-family: charter;
    src: url('../fonts/charter/ttf/Charter-Bold.ttf');
    font-weight: bold;
}

@font-face {
    font-family: charter;
    src: url('../fonts/charter/ttf/Charter-Italic.ttf');
    font-style: italic;
}

html {
    font-family: charter;
    color:#111;
    font-weight: normal;
}

body {
    margin:0;
    counter-reset: question;
    counter-reset: exercice;
}

#pre-index {
    position: relative;
    display: block;
    width: 540px;
    margin:auto;
    margin-top:50px;
    transition: all 1s;
}

h1, h2, h3 {
    font-weight: 300;
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 1.7rem;
}

h3 {
    font-size: 1.4rem;
}

h4 {
    font-size: 1.1em;
}

p {
    text-align: justify;
    line-height: 1.5em;
}

div.multicols {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

div.multicols > div {
    margin: 0px 10px;
    margin-bottom: 20px;
    overflow-x: scroll;
}

div.multicols > div.fullw {
    flex:1;
}

div.multicols > div > p {
    width: 100%;
}

div.multicols > div > p > canvas {
    border: 0px solid green;
}

span.remarque {
    font-weight: bold;
    color:red;
    font-size: 0.9em;
}

header {
    width: 100%;
    position: fixed;
    top:0px;
    border-bottom: 1px solid #ccc;
    background: #fff;
    z-index: 100;
}

nav {
    display: flex;
    width: 80%;
    max-width: 1024px;
    margin:auto;
    min-height: 60px;
    line-height: 60px;
    overflow-y: hidden;
}

nav > div#titre-page {
    width: 200px;
    text-align: left;
    font-size: 1.3em;
}

nav > div#menu {
    flex:1;
    display: flex;
    justify-content:flex-end;
}

nav > div#menu > ul {
    margin:0;
}

nav > div#menu > ul > li {
    display: inline;
    margin-left:45px;
}

nav > div#menu > ul#icone-menu {
    display: none;
}

nav a {
    display: inline-block;
    text-decoration: none;
    color:#222;
    transition: color 0.2s ease;
    position: relative;
}

nav a:hover {
    color:blue;
}

nav i.fa {
    font-size: 0.9em;
}

div#contenu {
    width: 1024px;
    margin:auto;
    margin-top: 100px;
}

div#contenu li {
    line-height: 2;
}

/* Cours */

h2.cours {
    border-bottom: 1px solid #444;
    padding-bottom: 10px;
    width: 80%;
}

div.sommaire-cours {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
}

div.sommaire-cours > div {
    flex:1;
    margin-bottom: 20px;
}

div.sommaire-cours a {
    color:blue;
    text-decoration: none;
}

div.sommaire-cours ol > li {
    position: relative;
}

div.sommaire-cours ol > li.none {
    color:#777;
    cursor:not-allowed;
}

div.sommaire-cours ol > li::after {
    font-size: 20px;
    margin-left: 5px;
    font-family: "Font Awesome 6 Free";
}

div.sommaire-cours ol > li.pdf::after {
    content:'\f1c1';
    color: #cc0000;
}

div.sommaire-cours ol > li.html::after {
    content:'\f1c9';
    color: gray;
}

h3 i {
    font-size: 0.9em;
    width: 35px;
    text-align: center;
}

/* Contenu des cours */

div#contenu-cours h2 {
    border-width: 1px;
    border-bottom-style: solid;
    border-top-style: solid;
    border-image: linear-gradient(to right, #99f, #fff) 1 space;
    padding:8px;
}

div#contenu-cours {
    font-size: 1.1em;
}

div.exercice > p, div.exercice > ul {
    font-size: 1em !important;
}

div#contenu-cours li {
    line-height: 1.5em;
    margin-bottom: 10px;
    text-align: justify;
}

div#contenu-cours py {
    background-color: #f3f3f3;
    font-family: monospace;
    padding:3px 5px;
    font-style: normal;
}

div#contenu-cours p.image-centre {
    text-align: center;
    font-style: italic;
    font-size: 1em;
    width: 80%;
    margin:40px auto;
}

div#contenu-cours p.image-centre img {
    max-width: 80%;
    max-height: 40vh;
    margin-bottom: 20px;
}

div#contenu-cours pre {
    position: relative;
}

div#contenu-cours pre > span { /* Bouton de copie */
    position: absolute;
    top:10px;
    right:10px;
    color:#777;
    cursor: pointer;
    padding:8px;
    height: 20px;
    width: 20px;
    text-align: center;
    border-radius: 20px;
    transition: all 0.4s;
}

div#contenu-cours pre > span:hover {
    background-color: #eaeaea;
}

div#contenu-cours code {
    font-size: 1.1em;
    font-style: normal;
}

div#contenu-cours ol ::marker {
    font-weight: bold;
}

div.remarque, div.info, div.question, div.exercice, div.q {
    box-shadow: 3px 3px 5px #ccc;
    padding:10px 20px;
    border-radius: 4px;
    border-width: 0px;
    border-left-width: 4px;
    border-style: solid;
    position: relative;
    padding-right:100px;
    font-style: italic;
    margin-bottom: 30px;
    line-height: 1.5em;
}

div.remarque::after, div.info::after, div.question::after, div.exercice::after, div.q::after {
    position: absolute;
    right: 10px;
    top:calc(50% - 25px);
    height: 50px;
    width: 50px;
    line-height: 50px;
    font-family: "Font Awesome\ 6 Free";
    font-weight: 900;
    font-style: normal;
    padding:0px;
    font-size: 30px;
    text-align: center;
}

div.remarque {
    border-color: #fdbf5a;
    background-color: #fff2dd;
}

div.remarque::after {
    content: '\f06a';
    color:#fdbf5a;
}

div.info {
    border-color: #3999db;
    background-color: #d9ecf6;
}

div.info::after {
    content: '\f05a';
    color:#3999db;
}

div.q {
    border-color: #43b874;
    background-color: #daffe9;
}

div.q::after {
    content: '\f059';
    color:#43b874;
}

div.question {
    border-color: #43b874;
    background-color: #daffe9;
    counter-increment: question;
}

div.question::before {
    content: "Question " counter(question) ". ";
    font-weight: bold;
}

div.question::after {
    content: '\f303';
    color:#43b874;
}

div.exercice {
    border-color: #afafaf;
    background-color: #eee;
    font-weight: bold;
}

div.exercice::before {
    content: "Exercice " counter(exercice) ". ";
    counter-increment: exercice;
    font-weight: bold;
    font-size: 1.2em;
}

div.exercice::after {
    content: '\f85e';
    color:#555;
}

div.reponse {
    border:0px dashed #777;
    margin-bottom: 30px;
}

div.reponse > p.bouton-reponse {
    text-align: center;
    margin:5px;
}

div.reponse > p.bouton-reponse > span {
    cursor: pointer;
    background-color: #eee;
    padding:10px 20px;
    border-radius: 3px;
    box-shadow: 3px 3px 3px #aaa;
}

div.reponse > div.contenu-reponse {
    display: none;
    border-width: 3px;
    border-style: double;
    border-color: transparent;
    padding:10px 20px;
}

div.reponse.visible > div.contenu-reponse {
    border-color: #aaa;
    display: block;
    margin-top:30px;
}

div.boutons-cours {
    text-align: center;
    margin-top:50px;
}

div.boutons-cours a {
    background-color: #eee;
    padding:10px 20px;
    border-radius: 3px;
    box-shadow: 3px 3px 3px #aaa;
    color:inherit;
    text-decoration: none;
    margin:0px 10px;
}

div.boutons-cours a.precedent::before {
    content:"\f04a";
    font-family: "Font Awesome\ 6 Free";
    font-weight: 900;
    margin-right:10px;
}

div.boutons-cours a.sommaire::before {
    content:"\f015";
    font-family: "Font Awesome\ 6 Free";
    font-weight: 900;
    margin-right:10px;
}

div.boutons-cours a.suivant::after {
    content:"\f04e";
    font-family: "Font Awesome\ 6 Free";
    font-weight: 900;
    margin-left:10px;
}

/* Arbres */

table.centre {
    margin:auto;
}

table.arbre-binaire thead {
    background-color: #ccf;
}

table.arbre-binaire tr:nth-child(even) {
    background-color: #eef;
}

table.arbre-binaire td {
    text-align: center;
}

/* Connexion */

form#formulaire-connexion p {
    text-align: center;
}

form#formulaire-connexion p.erreur {
    color:red;
    font-weight: bold;
}

form#formulaire-connexion input {
    padding:10px;
    border-radius: 3px;
    border:1px solid #ccc;
    width:250px;
    transition: all 0.2s;
}

form#formulaire-connexion input[type=submit] {
    max-width: 150px;
    cursor:pointer;
    background: linear-gradient(#eee, #ddd);
    border: 1px solid #ccc;
    padding:8px 20px;
    margin-top:20px;
    box-shadow: 1px 1px 4px #aaa;
    font-weight: bold;
    color:#555;
}

/* Élève */

div.box-eleve {
    background: rgba(0,0,255,0.02);
    border:1px solid #eee;
    border-radius: 10px;
    padding:20px 50px;
    padding-top:10px;
}

div.box-eleve h3 {
    font-weight: bold;
    font-size: 1.2rem;
}

div.infos-eleve {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

div.infos-eleve p:first-child {
    text-align: left;
}

div.infos-eleve p:last-child {
    text-align: right;
}

div.infos-eleve span {
    font-style: italic;
}

div#deconnexion {
    text-align: center;
}

div#deconnexion a i {
    padding-right:5px;
}

/* Footer */

footer {
    height: 100px;
}

/*

----------
Responsive
----------

*/

@media screen and (max-width: 1200px) {

    #pre-index {
        font-size: 0.7em;
        width:380px;
    }

    nav > div#menu > ul#liens-menu {
        display: none;
        position: absolute;
        top:61px;
        left:0px;
        width: 100%;
        padding:0;
        background-color: #fff;
        border-bottom: 1px solid #ccc;
    }

    nav > div#menu > ul#liens-menu.visible {
        display: block;
    }

    nav > div#menu > ul#liens-menu li {
        display: block;
        text-align: right;
        padding-right: 10%;
    }

    nav > div#menu > ul#liens-menu > li > a {
        width: 100%;
    }

    nav > div#menu > ul#icone-menu {
        display: inline-block;
    }

    nav > div#menu > ul#icone-menu i {
        font-size: 1.5em;
    }

    div.sommaire-cours {
        flex-direction: column;
    }

    div.sommaire-cours > div {
        margin-bottom: 0px;
    }

    div#contenu {
        width: 90%;
    }

    div.multicols {
        flex-direction: column;
    }
}