/* enlève toutes les putain de marges par défaut */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* réserver l'espace de la scrollbar à droite même lorsqu'elle n'est pas utile (permet d'éviter les petits décalages en passant d'une page à l'autre) */
html {
    scrollbar-gutter: stable;
}

header {
    background-color: #bfbfbf;
}

/* le bandeau tout en haut prend toute la largeur et reste pixelisé */
header img {
    display: block;
    width: 100%;
    /* multiple de 20 (la hauteur du bandeau) */
    height: 40px; 
    margin: 0 auto;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* le logo du site prend un tiers de la largeur et reste pixelisé */
header p img {
    width: 33%;
    height: auto;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

nav {
    background-color: #bfbfbf;
    font-family: monospace;
}

.menu_element {
    /* les éléments du menu sont affichés en ligne et bien espacés */
    display:flex;
    flex-direction: row;
    justify-content:space-around;
    
    /* image de fond qui se répète  */
    background-image: url("/images/nav_background.png");
    background-repeat: repeat-x;
    background-position: bottom left;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* cadre autour des éléments du menu */
.encadrer_menu {
    border: 5px solid black;
    padding: 5px;
    background-color: white;
}

/* texte des éléments du menu (NB: il faut rentrer dans "a" pour écraser les paramètres par défaut du navigateur sur les liens) */
.encadrer_menu a {
    text-decoration: none;
    color:black;
}

li {
    margin:1em;
}


/* pavage de fond à gauche et à droite */
.sidebar_left, .sidebar_right {
    min-height: 100%;
    background-image: url("/images/main_background.png");
    background-repeat: repeat;
    background-position: top left;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.content{
    min-height: 100%;
    background-color: #e6e6e6;
}

main {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
}

.pavage {
    background-repeat: repeat;
    width: 100%;
    height: 1280px;   /* 64 * 20 */
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

p {
    margin: 10px;
}

/* image calée à gauche du texte, avec texte qui épouse l'image */
.img_float_left {
    float: left;
    margin-right: 5px;
}

/* pareil à droite */
.img_float_right {
    float: right;
    margin-left: 5px;
}