@media (max-width:1920px) and (min-width: 1026px){

body {
	font-family:Sans-serif;
	font-size:100%;
	background:#ccc;
}
a {
	color:#369;
}
p.mention {
	margin: 1em;
	color:#40A497;
	clear:both;
	padding-top:2em;
}
h1 {
	padding:0;
	color:#fff;
	text-shadow:1px 1px 1px #aaa;
	margin-bottom:0;
	margin:1em;
}
h2 {
	background:#29BAA7;
	color:#fff;
	margin:0;
	padding:4px;
}
#menu ul, #menu li {
	list-style-type:none;
	margin:0;
	padding:0;
}
#menu li {
	float:left;
	width:20%;
	text-align:center;
}
#menu a {
	display:block;
	background:#6DBA29;
	color:#fff;
	border-bottom:1px;
	text-decoration:none;
	line-height:200%;
	padding:0 2em;
}
#menu a:hover {
	background:#222;
}

/* Disposition par d�faut */
#principale, #annexe {
    flex: 1;
	float:left;
	background:#fff;
	min-height:300px;
	overflow:auto;
	width:100%;
	clear:both;
}
#annexe {
    flex: 1;
	background:#eee;
}
#menu {
	width:100%;
	overflow:auto;
}

#container{
    display: flex;
}
}

@media (max-width:1026px) and (min-width: 644px){

    body {
        font-family:Sans-serif;
        font-size:100%;
        background:#ccc;
    }
    a {
        color:#369;
    }
    p.mention {
        margin: 1em;
        color:#40A497;
        clear:both;
        padding-top:2em;
    }
    h1 {
        padding:0;
        color:#fff;
        text-shadow:1px 1px 1px #aaa;
        margin-bottom:0;
        margin:1em;
    }
    h2 {
        background:#29BAA7;
        color:#fff;
        margin:0;
        padding:4px;
    }
    #menu ul, #menu li {
        list-style-type:none;
        margin:0;
        padding:0;
    }
    #menu li {
        float:left;
        width:20%;
        text-align:center;
    }
    #menu a {
        display:block;
        background:#6DBA29;
        color:#fff;
        border-bottom:1px;
        text-decoration:none;
        line-height:200%;
        padding:0 2em;
    }
    #menu a:hover {
        background:#222;
    }
    
    /* Disposition par d�faut */
    #principale, #annexe {
        float:left;
        background:#fff;
        min-height:300px;
        overflow:auto;
        width:100%;
        clear:both;
    }
    #annexe {
        background:#eee;
    }
    #menu {
        width:100%;
        overflow:auto;
    }
    }
    
@media (max-width:644px) and (min-width: 0px){

        body {
            font-family:Sans-serif;
            font-size:100%;
            background: white;
        }
        a {
            color:#369;
        }
        p.mention {
            margin: 1em;
            color:#40A497;
            clear:both;
            padding-top:2em;
        }
        h1 {
            padding:0;
            color:#fff;
            text-shadow:1px 1px 1px #aaa;
            margin-bottom:0;
            margin:1em;
        }
        h2 {
            background:#29BAA7;
            color:#fff;
            margin:0;
            padding:4px;
        }
        #menu ul, #menu li {
            list-style-type:none;
            margin:0;
            padding:0;
        }
        #menu li {
            float:left;
            width:100%;
            text-align:center;
        }
        #menu a {
            display:block;
            background:#6DBA29;
            color:#fff;
            border-bottom:1px;
            text-decoration:none;
            line-height:200%;
            padding:0 2em;
        }
        #menu a:hover {
            background:#222;
        }
        
        /* Disposition par d�faut */
        #principale, #annexe {
            float:left;
            background:#fff;
            min-height:300px;
            overflow:auto;
            width:100%;
            clear:both;
        }
        #annexe {
            background:#eee;
        }
        #menu {
            width:100%;
            overflow:auto;
        }

        }