merge common.css

core/layout/common.css

@@ -29,7 +29,7 @@ body {
 }
 
 
-@media (min-width: 769px) {
+@media screen and (min-width: 769px) {
 	body {
 		/*margin:0px 10px;*/
 		margin: 0;
@@ -41,7 +41,7 @@ body {
 /**
 * Petits écrans inférieurs à 768px de largeur, on supprime les marges
 */
-@media (max-width: 768px) {
+@media screen and (max-width: 768px) {
 	body {
 		margin: 0px;
 	}
@@ -65,7 +65,7 @@ body {
 
 
 
-@media (max-width: 768px) {
+@media screen and (max-width: 768px) {
 	.siteContainer {
 		display: flex;
 		flex-direction: column;
@@ -237,12 +237,12 @@ td>.col12 {
 }
 
 /* Tableau sur les écrans de petites tailles */
-@media (max-width: 768px) {
+@media screen and (max-width: 768px) {
 	.table thead {
 		font-size: 0.8em;
 	}
 }
-@media (max-width: 668px) {
+@media screen and (max-width: 668px) {
 	.table thead {
 		display:none;
 	}
@@ -408,7 +408,7 @@ td>.col12 {
 	background-color: rgba(255, 255, 255, 1);
 }
 
-@media (min-width: 769px) {
+@media screen and (min-width: 769px) {
 	#bar #barLeft {
 		float: left;
 	}
@@ -419,7 +419,7 @@ td>.col12 {
 	}
 }
 
-@media (max-width: 768px) {
+@media screen and (max-width: 768px) {
 	#bar {
 		text-align: center;
 		padding: 0 1;
@@ -455,7 +455,7 @@ td>.col12 {
 	overflow: hidden;
 }
 /* Dans theme.css
-@media (min-width:768px) {
+@media screen and (min-width:768px) {
 	#site {
 		margin: 20px auto;
 	}
@@ -464,7 +464,7 @@ td>.col12 {
 
 /* Bannière */
 
-@media (min-width:768px) {
+@media screen and (min-width:768px) {
 	body>header {
 		margin: 0;
 		/*-10px;*/
@@ -598,13 +598,13 @@ nav::before {
 	display: flex;
 }
 
-@media (min-width: 769px) {
+@media screen and (min-width: 769px) {
 	nav #menu {
 		display: block;
 	}
 }
 
-@media (max-width: 768px) {
+@media screen and (max-width: 768px) {
 	body>nav {
 		margin: 0;
 	}
@@ -691,41 +691,66 @@ li .menuSideChild {
 
 /* Container des drapeaux */
 
-#i18nContainer {
-	z-index: 100;
+
+#i18nContainerNav, #i18nContainerSite {
 	position: relative ;
 	float: right;
-	width: auto;
-	height: auto;
-	margin-top: -25px;
 }
 
-#i18nContainer ul {
+#i18nContainerNav ul, #i18nContainerSite ul {
 	list-style: none;
 }
 
-#i18nContainer li {
+#i18nContainerNav li, #i18nContainerSite li {
 	display: inline-block;
 	position: relative;
 }
 
-#i18nContainer img {
-	width: 80%;
+#i18nFlag {
+	width: 70%;
+}
+
+#i18nFlagSelected {
+	width: 100%;
 }
 
 
+/*
+* Position du bloc dans le site sur les petits écrans
+*/
 
-
-#i18nContainer img {
-	margin: 2px;
+#i18nContainerNav {
+	display: block;
+}
+#i18nContainerSite {
+	display: none;
 }
 
+@media screen and (max-width:1024px){
+	#i18nContainerNav {
+	  display: none;
+	}
+	#i18nContainerSite {
+	  display: block;
+	  margin-top: -10px;
+	}
 
+	#i18nFlag {
+		width: 100%;
+		padding: 5px;
+	}
+	
+	#i18nFlagSelected {
+		width: 130%;
+		padding:  5px;
+	}
+	
+  }
 
 
 
 /* Corps */
-@media (min-width:768px) {
+@media screen and (min-width:768px) {
 	section {
 		padding: 20px;
 	}
@@ -822,7 +847,7 @@ footer #footerbody>div {
 }
 
 /* Conserve le pied de page sur une ligne */
-@media (max-width: 768px) {
+@media screen and (max-width: 768px) {
 	body>footer {
 		margin: 0;
 	}
@@ -1031,6 +1056,7 @@ footer #footerSocials .zwiico-github:hover {
 	user-select: none;
 }
 
+
 /* Lightbox */
 .lightbox {
 	background: #FFF;
@@ -1209,7 +1235,7 @@ label {
 }
 
 /* Empêche le débordement et les sauts de ligne */
-.inputFileManagerWrapper, .inputDateManagerWrapper {
+.inputFileManagerWrapper, .inputDateManagerWrapper  {
 	display: inline;
 }
 
@@ -1367,7 +1393,7 @@ input[type='checkbox']:disabled+label:before {
 	display: inline-block;
 }
 
-@media (min-width: 769px) {
+@media screen and (min-width: 769px) {
 	.col1 {
 		width: 8.33333333%;
 	}
@@ -1556,7 +1582,7 @@ th.col12 {
 }
 
 /* Tableau sur les écrans de très petites tailles */
-@media (max-width: 480px){
+@media screen and (max-width: 480px){
     .table tr{
     display: block;
     margin-bottom: 10px;
@@ -1710,3 +1736,7 @@ th.col12 {
   border-radius: 5px;
   z-index: 30;
 }
+
+.helpDisplayButton {
+    cursor: pointer;
+}