/* CSS Document */

:root {
    --c1: #F2EBE5;
    --c2: #647295;
    --c3: #9F496E;
    --c4: #2B262D;
}

html {
    margin: 0;
    padding:0;
    font-size:16px;
    font-family: 'Noto Serif', serif;
}

/* ------------------ STRUCTURE ----------------------*/
body {
    margin:0;
    padding:0;
    display: flex;
    height: 100vh;
    flex-grow:1;
    flex-direction: column;
}

nav {
    position: absolute;
    top:0;
    left:0;
    padding:0;
    margin:0;
    width: 250px;
    height: calc(100vh - 24px);
    font-family: 'Noto Sans', sans-serif;
    font-size: 0.8em;
    background-color: var(--c4);
    color:white;
}

main {
    margin:0 0 0 250px;
    height: calc(100vh - 24px);
    padding:0 2em 2em 2em;
    overflow-y: auto;
}

/* ------------------ MENU ----------------------*/

nav h1 {
    line-height: 1em;
    font-size:1.6em;
    text-align: center;
    padding:0.5em 0 0.3em 0;
    width: fit-content;
    margin: 0 auto;
    padding:0.5em;
    background-color: var(--c2);
}

nav hr {
    border: none;
    background: url('menu_ligne.png') no-repeat center;
    height:22px;
}
nav .hr {
    text-align: center;
    margin: 2em 0
}

nav h2 {
    font-size: 1.3em;
    margin:1em 0.5em 0.5em 0.5em;
    color:var(--c1);
}
nav h3 {
    font-size: 0.9em;
    margin:0.8em 0.5em 0.5em 2em;
    color: white;
}

nav h3::before {
    content: "•  "
}

nav a {
    text-decoration: none;
    color: white;
}
nav a:hover{
    color:var(--c3);
}

/* ------------------ CONTENU PRINCIPAL ----------------------*/

main h2 {
    font-family: 'Tomorrow', sans-serif;
    font-size: 3.4em;
    text-align: center;
    margin:0.5em 0.3em 0 0.3em;
    color:var(--c1);
    text-shadow: 0.03em 0.03em 0.06em var(--c4);
}

main h3 {
    font-family: 'Tomorrow', sans-serif;
    font-size: 2.8em;
    text-align: center;
    margin:0.2em 0.3em 0.5em 0.03em;
    color:var(--c3);
    text-shadow: 0.03em 0.03em 0.06em var(--c4);
}
main h4 {
    font-family: 'Tomorrow', sans-serif;
    font-size: 2.2em;
    margin:1em 0 0.06em 0;
    color:var(--c2);
    text-shadow: 0.03em 0.03em 0.06em var(--c4);
}
main h5 {
    font-size: 1.4em;
    font-family: 'Tomorrow', sans-serif;
    font-style: italic;
    color:var(--c2);
    margin:0.5em 0.03em 0.03em 0;
}
main h6 {
    font-size: 100%;
    font-family: 'Noto Sans', sans-serif;
    margin:0.5em 0.03em 0.03em 2em;
}

h4.autre {
    margin-top :1.4em;
    font-style: italic
}
main p {
    margin: 0.6em 0.2em 0.2em 0.6em;
}
main p.p4 {
    margin: 0.3em 0.2em 0.2em 3em;
}
main ul {
    margin: 0 0.2em 0.4em 1.4em;
    list-style-position: outside;
}
main li {
    margin-left: 0em
}
ul.param {
    list-style-type: "•  ";
}
ul.return {
    list-style-type: "⮩  ";
}
ul.autre {
    list-style-type: "-  ";
}

.exemple::before {
    content : "🔎 ";
    font-style: normal;
}

main figure {
    text-align: center;
    font-size: 0.9em;
    font-style: italic;
}
main figure img {
    max-width: 100%;
}

main pre {
    margin-left: 1em;
}

main .puce {
    border: .2em solid #6ab0de; border-radius:1em;
    padding:0 0.35em; background-color: #e7f2fa;
    font-family: monospace;
    font-weight: bold;
}

main .decale1 {
    margin-left: 2em
}
main .decale2 {
    margin-left: 4em
}

main a {
    font-family: 'Noto Sans', sans-serif;
    text-decoration: none;
    font-weight: bold;
    color:var(--c2);
}
main a:hover {
   color:var(--c3);
}

/* ------------------ PIED de PAGE ----------------------*/
footer {
    font-size: 0.8em;
    height: 24px;
    padding: 0.2em 0 0 0;
    margin: 0;
    background-color: var(--c1);
    text-align: center;
}
footer a {
    text-decoration: none;
}