@media screen and (max-width: 1200px) {
	html, body, input, select, textarea {
		font-size: 1em;
	}
	header #menu-haut a {
		margin-top: 3.5em;
	}
	header #menu-haut #applications::after {
		top: 3.5em;
	}
	.tooltiptext {    
		width: 13.5em;
    	transform: translateY(-36%) translateX(-113%);
	}
}

@media screen and (max-width: 950px) {
	header > section, 
	footer > section,
	main > section,
	main #retour,
	main > fieldset,
	main > form > fieldset,
	main > form > section {
	    width: 90%;
	    box-sizing: border-box;
	}
}

@media screen and (max-width: 768px) {
	header section {
	    width: 95%;
		height: 85px;
	    margin-right: 0;
	}
	header #logo img {
		width: 70px;
		margin-top: 1.5em;
	}
	header h1 {
    	bottom: 0.3em;
	}
	header #menu-haut a {
	    margin-top: 2.2em;
	}
	header #menu-haut #applications {
    	top: -3.6em;
	}
	form input[type=text],
    form input[type=password],
    form input[type=email],
    form input[type=number],
    form input[type=date] {
	   	width: 100%;
	}
	main > section {
		padding-left: 1.5em;
		padding-right: 1.5em;
		box-sizing: border-box;
	}
	main > fieldset,
	main > form > fieldset {
		padding: 1em 2.2em 2.2em;
	}
	main form p.field {
		position: relative;
		margin-bottom: 0;
		padding-right: 2.1em;
		text-align: inherit;
		margin-top: 0.7em;
	}
	main form p.field label {
		width: 100%;
		padding-bottom: 0.5em;
		text-align:left;
	}
	main form p.field span {
		margin-left: 0;
	}
	main form p.field a.aide {
		position: absolute;
	    right: -0.5em;
		bottom: 0;
		margin-right: 0;
	}
	main form p.field input ~ a {
		position: static;
		display: block;
		margin-top: 0.2em;
	}
	main form p.field ~ p.field-erreur {
	    margin-left: 0; 
		margin-top: 0.5em;
		width: 100%;   
	}
}

@media screen and (max-width: 570px) {
	header section {
		height: 69px;
	}
	header h1 {
		position: relative;
		bottom: 0.6em;
		font-size: 1.3em;
	}
	header #logo img {
	    margin-top: 1em;
	}
	header #menu-haut li {
    	padding: 0.5em 0.8em;
    	font-size: 0.69em;
    	letter-spacing: 0.1em;
	}
	header #menu-haut #applications::after {
	    top: 3em;
	    right: 0.5em;
	}
}

@media screen and (max-width: 420px) {
	.tooltiptext {
		width: 13em;
		transform: translateY(-36%) translateX(-114%);
	}
}

@media screen and (max-width: 428px) {
	header section {
		height: auto;
	}
	#logo-titre {
		display: flex;
		flex-direction: column;
	}
	#titre {
		margin-top: 0.5em;
		left: 0em !important;
	}
}

@media screen and (max-width: 400px) {
	html, body, input, select, textarea, option {
		font-size: 0.94em;
	}
	header #logo img {
		margin-top: 1.1em;
	}
	header #menu-haut li {
    	padding: 1.1em 0.8em;
	}
	header #menu-haut a {
	    margin-top: 2.1em;
	}
	header #menu-haut #applications {
	    top: -3.4em;
	}
	header #menu-haut #applications::after {
	    top: 3.3em;
	    right: 0.4em;
	}
}

@media screen and (max-width: 350px) {
	header section {
    	padding-right: 5.8em;
	    text-align: center;
    }
	header #logo img {        
		width: 60px;
	    margin-top: 0.7em;
	}
	header h1 {
	    display: block !important;
	    margin-top: 0.5em;
		font-size: 1.15em;
	}
}