@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css?family=Noto+Sans|Noto+Serif|Merriweather');

@font-face {
    font-family: 'Calibri';
    src: url('/commun/police/calibri/Calibri-Italic.eot');
    src: local('Calibri Italic'), local('Calibri-Italic'),
        url('/commun/police/calibri/Calibri-Italic.eot?#iefix') format('embedded-opentype'),
        url('/commun/police/calibri/Calibri-Italic.woff2') format('woff2'),
        url('/commun/police/calibri/Calibri-Italic.woff') format('woff'),
        url('/commun/police/calibri/Calibri-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Calibri';
    src: url('/commun/police/calibri/Calibri-Bold.eot');
    src: local('Calibri Bold'), local('Calibri-Bold'),
        url('/commun/police/calibri/Calibri-Bold.eot?#iefix') format('embedded-opentype'),
        url('/commun/police/calibri/Calibri-Bold.woff2') format('woff2'),
        url('/commun/police/calibri/Calibri-Bold.woff') format('woff'),
        url('/commun/police/calibri/Calibri-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Calibri';
    src: url('/commun/police/calibri/Calibri.eot');
    src: local('Calibri'),
        url('/commun/police/calibri/Calibri.eot?#iefix') format('embedded-opentype'),
        url('/commun/police/calibri/Calibri.woff2') format('woff2'),
        url('/commun/police/calibri/Calibri.woff') format('woff'),
        url('/commun/police/calibri/Calibri.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Calibri';
    src: url('/commun/police/calibri/Calibri-BoldItalic.eot');
    src: local('Calibri Bold Italic'), local('Calibri-BoldItalic'),
        url('/commun/police/calibri/Calibri-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('/commun/police/calibri/Calibri-BoldItalic.woff2') format('woff2'),
        url('/commun/police/calibri/Calibri-BoldItalic.woff') format('woff'),
        url('/commun/police/calibri/Calibri-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

/* GENERAL */
#histoire {
    display: none;
}


/* --------------- STRUCTURE ---------------------*/
html {
    margin: 0;
}

nav::-webkit-scrollbar {
    width: 0;
}
/* scrollbar styling standard version */

body {
    height: 100vh;
    width: 100vw;
    margin:0;
    display: grid;
    grid-template-columns: 280px auto;
    grid-template-rows: 1fr auto;
    background-color: #333;
    transition: 0.5s;
}

nav {
    width:280px;
    scrollbar-width: 0;
    padding: 0;
    overflow-y: auto;
}

main {
    padding: 0 1em 2em 1em;
    font-family: 'Noto Serif', serif;
    background-color: #fff;
    overflow-y: auto;
}

#btnMenu {
    position: fixed;
    left: 280px;
    top: 0;
    width: 50px;
    height: 50px;
    background-color: #666;
    color: white;
    font-size: 32px;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
    transition: 0.5s;
    z-index: 10;
}

#zone_icones_entete {
    display:flex;
    flex-direction: row;
    justify-content:flex-end;
    align-items:flex-start;
    margin-top:0.5em;
}

#zone_icones_entete input {
    width:2rem;
    margin-right:0.5em;
    opacity: 0.1;
}

#zone_icones_entete #btnPrint {
    display: block;
    width:190px;
    height:66px;
    background-image: url('/commun_pagedjs/imprimer.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #f0f0f0;
    border-radius: 6px;
    box-shadow: 2px 2px 4px #666;
}

/* ---------- MISES EN FORME COMMUNES A TOUTES LES PAGES (main) ------------*/

main h1, h2, h3, h4, h5 {
    font-family: 'Merriweather', sans-serif;
    margin: 0;
}

main h1 {
    padding: 20px 0 10px 0;
}

main code {
    font-size: 1.1em;
}

main pre[class*="language-"] {
    margin-left: 20px;
}

abbr {
    text-decoration: #999 underline;
    cursor: default;
}

button {
    cursor: pointer;
}

main fieldset {
    margin: 2em 2em;
    background-color: #fcfcfc;
    border:0.15em solid black;
    border-radius: 0.5em;
}

main fieldset legend + div {
    display: none;
}

main fieldset legend {
    border: solid black 1px;
    border-radius: 0.3em;
    background-color: #f0f0f0;
    text-align: center;
    padding: 0 0.5em;
    cursor: pointer;
    font-weight: bold;
}

main fieldset h4 {
    font-size: 1.1em;
    margin: 1em 0 0.4em 0.5em;
}

main fieldset.aide {
    border: #999 1px solid;
}

main fieldset.aide legend {
    font-size: 0.9em;
    text-align: left;
    padding: 0.1em 0.3em;
    border-color: #999;
    color:#333;
}

main fieldset.aide legend::before {
    content: '💡 '
}


main fieldset.admin {
    background-color: #ff000010;
    border: none;
    padding:none;
}
/* ------------------ MISE EN FORME DU MENU (nav) ----------------------*/

nav {
    font-family: 'Noto Sans', sans-serif;
    background-color: #333;
    color:#ccc;
}

nav h1 {
    font-size:1.8em;
    font-weight: bold;
    text-align: center;
    text-shadow: 2px 2px 4px black;
    margin: 0;
    padding: 0;
}

nav hr {
    margin: 20px auto;
    width:30%;
    box-shadow: 2px 2px 4px black;
}

nav h2 {
    font-size:1.05em;
    font-weight: bold;
    margin: 0;
    padding: 4px;
}

nav div {
    padding: 0 0 3px 0;
    margin: 0;
}
nav a {
    text-decoration: none;
    color: #ccc;
}
nav a:hover{
    color:#069;
}

nav a.memo_python {
    background-image: url('/sites/memos_python/commun/python.svg');
    background-repeat: no-repeat;
    background-size: 18px;
    padding-left: 22px;
}

nav a.memo_outils {
    background-image: url('/sites/outils/commun/outils.png');
    background-repeat: no-repeat;
    background-size: 18px;
    padding-left: 22px;
}

nav a.memo_architecture {
    background-image: url('/sites/architecture/commun/cpu.png');
    background-repeat: no-repeat;
    background-size: 18px;
    padding-left: 22px;
}

nav a.memo_sql {
    background-image: url('/sites/memos_sql/commun/sql.png');
    background-repeat: no-repeat;
    background-size: 18px;
    padding-left: 22px;
}

nav ul {
    list-style: none;
    display:none;
    padding: 0;
    margin: 2px 0 8px 4px;
}

nav li {
    font-size: 0.9em;
    padding: 2px 2px 2px 4px;
    margin:1px 0 0 12px;
    border-radius: 6px 0 0 6px;
}

nav code {
    font-size: 1.2em;
}

/* -------------- PIED DE PAGE ----------------- */
footer {
    position:relative;
    display: grid;
    margin: 0;
    grid-column: 1 / span 2;
    align-self: center;
    text-align: center;
    min-height: 2rem;
}

footer div {
    margin:0;
    align-self: center;
}

#histoire {
    background-color: #DDD;
}

#citation {
    background-color: #ccc;
}

footer button {
    position: absolute;
    right:2px;
    top: 2px;
}

/* -------------- POUR L'IMPRESSION ----------------- */