body {
    margin: 20px 10px !important;
	background-color: #e3e7ed;
	font-family:  -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  }

.h1, h1 {
    font-size: 2.1875rem;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-bottom: .5rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--text-color-dark);
}

#header
{
 vertical-align: middle;
 text-align:center;
 }
 
.jumbotron
 {
 background-image: linear-gradient(to top,#e3e7ed,#c5f2b3 100%)!important ;
 padding:10px !important;
 -moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
margin-bottom:20px !important;
 }

#header
 {
	 width:100%;
 }
#menu
 {
 background-color: #dcf4d2 ;
 padding: 10px;
 display:block;
 border-radius:10px;
 }
 
 #contenu
 {
 background-color: #ffff ;
 border-radius:10px;

 }
 
 #logo-container {
float:right;
display:block;
 max-width:300px;
 margin-right:50px;
 }
 #logo-container  img{

 max-width:250px;
 }

@media (min-width: 1024px)
.main-header {
    padding-right: 10px;
}
.main-header {
    display: flex;
    justify-content: space-between;
}

.main-header {
    grid-area: header;
}

@media (min-width: 1024px)
.content-wrapper {
    grid-template-columns: 10px auto 10px;
}
.content-wrapper {
    display: grid;
    grid-auto-rows: max-content;
    grid-column-gap: 0;
    grid-row-gap: 0;
    grid-template-areas: "sidebar-resizer-handler content content-resizer-handler";
    grid-template-columns: 0 auto 0;
    margin-top: -14px;
}
.content-wrapper {
    grid-area: content-wrapper;
}
 @media (min-width: 1024px)
.main-sidebar {
    height: unset;
    padding: 0;
    position: static;
    z-index: 1039;
    width: auto;
}
.main-sidebar {
    background: var(--body-bg);
    height: 100vh;
    left: calc(-40px - var(--sidebar-max-width));
    overflow-x: hidden;
    overflow-y: auto;
    padding: 15px 20px;
    position: fixed;
    top: 0;
    transition: left .3s;
    z-index: 1041;
    width: calc(40px + var(--sidebar-max-width));
}
.main-sidebar {
    grid-area: sidebar;
}
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
    display: block;
}
*, :after, :before {
    box-sizing: border-box;
}
user agent stylesheet
aside {
    display: block;
}
body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: unset;
}
body {
    margin: 0;
    font-family: var(--font-family-base);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.5;
    color: #4c5367;
    text-align: left;
    background-color: #e3e7ed;
}

html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

@media (min-width: 1024px)
.wrapper {
    grid-template-columns: fit-content(var(--sidebar-max-width)) auto;
    grid-column-gap: 15px;
    grid-template-areas:
        "header header"
        "sidebar content-wrapper";
    margin-left: auto;
    margin-right: auto;
    width: calc(100% - 40px);
}
.wrapper {
    display: grid;
    grid-row-gap: 20px;
    grid-template-areas:
        "header"
		"aside"
        "content-wrapper";
    margin: 20px 15px;
}
*, :after, :before {
    box-sizing: border-box;
}
*, :after, :before {
    box-sizing: border-box;
}