imporved css

sites/all/themes/figureslibres/clameurs/css/dist/styles.css

@@ -160,16 +160,6 @@ input {
             background-image: url(../../images/menu-fond-theme-5-flat-nb.jpg);
             cursor: default; }
 
-html,
-body,
-#container,
-#main,
-#main > .region,
-#block-system-main,
-#block-system-main > .content,
-.node-thematique {
-  overflow-x: visible; }
-
 .node-thematique {
   min-height: 766px;
   margin-bottom: 10em;
@@ -364,35 +354,37 @@ body,
         .node-thematique .content article.main .group-video .group-description {
           cursor: pointer;
           pointer-events: none;
-          box-sizing: border-box;
           position: absolute;
           z-index: 2;
           top: 0;
           left: 0;
-          width: 90%;
-          height: 80%;
-          margin: 5%;
-          padding: 5%;
-          background-color: rgba(255, 255, 255, 0);
-          transition: background-color 0.3s ease-in-out; }
+          width: 100%;
+          height: 100%; }
           .node-thematique .content article.main .group-video .group-description .field-name-field-ecouter {
             font-size: 1em;
-            font-weight: 500;
+            font-weight: 600;
+            padding: 0.2em 0.4em;
             background-color: rgba(255, 255, 255, 0.9);
-            transition: background-color 0.3s ease-in-out;
-            display: inline-block; }
+            display: inline-block;
+            margin: 15px; }
           .node-thematique .content article.main .group-video .group-description .field-name-field-description {
+            position: absolute;
+            top: 0;
+            left: 0;
+            box-sizing: border-box;
+            width: 80%;
+            height: 70%;
+            margin: 10%;
+            padding: 5%;
             opacity: 0;
+            background-color: rgba(255, 255, 255, 0.9);
             transition: opacity 0.3s ease-in-out; }
             .node-thematique .content article.main .group-video .group-description .field-name-field-description h3 {
               font-weight: 500;
-              font-size: 2em; }
-        .node-thematique .content article.main .group-video:hover .group-description {
-          background-color: rgba(255, 255, 255, 0.9); }
-          .node-thematique .content article.main .group-video:hover .group-description .field-name-field-ecouter {
-            background-color: rgba(255, 255, 255, 0); }
-          .node-thematique .content article.main .group-video:hover .group-description .field-name-field-description {
-            opacity: 1; }
+              font-size: 2em;
+              margin: 0; }
+        .node-thematique .content article.main .group-video:hover .group-description .field-name-field-description {
+          opacity: 1; }
     .node-thematique .content aside.right {
       display: inline-block;
       vertical-align: top;
@@ -419,12 +411,12 @@ body,
             height: 80%;
             margin: 5%; }
             .node-thematique .content aside.right .node-documentair .content .group-txt .field-name-field-doc {
-              display: inline-block;
-              z-index: 5;
               font-size: 1em;
-              font-weight: 500;
-              padding: 7px;
+              font-weight: 600;
+              padding: 0.2em 0.4em;
               background-color: rgba(255, 255, 255, 0.9);
+              display: inline-block;
+              z-index: 5;
               transition: background-color 0.3s ease-in-out; }
             .node-thematique .content aside.right .node-documentair .content .group-txt .field-name-title-field {
               position: absolute;
@@ -460,11 +452,11 @@ body,
     .node-thematique .content aside.bottom {
       padding-top: 0.6em; }
       .node-thematique .content aside.bottom .field-name-field-episodes .field-label {
-        font-size: 1.3em;
-        font-weight: 400;
-        background-color: #fff;
+        font-size: 1em;
+        font-weight: 600;
+        padding: 0.2em 0.4em;
+        background-color: rgba(255, 255, 255, 0.9);
         display: inline-block;
-        padding: 0.2em 0.4em 0;
         margin-bottom: 0.3em; }
       .node-thematique .content aside.bottom .field-name-field-episodes > .field-items {
         display: -ms-flexbox;
@@ -497,7 +489,7 @@ body,
               transition: opacity,background-color 0.3s ease-in-out; }
               .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content .group-txt .field-name-title-field {
                 font-size: 4em;
-                font-weight: 700;
+                font-weight: 800;
                 font-style: italic;
                 text-align: center; }
             .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content .group-video a {

sites/all/themes/figureslibres/clameurs/css/styles.scss

@@ -196,20 +196,26 @@ $header_height:400px;
 	}
 
 }
+//
+// html,
+// body,
+// #container,
+// #main,
+// #main>.region,
+// #block-system-main,
+// #block-system-main>.content,
+// .node-thematique{
+// 	overflow-x: visible;
+// }
 
-html,
-body,
-#container,
-#main,
-#main>.region,
-#block-system-main,
-#block-system-main>.content,
-.node-thematique{
-	overflow-x: visible;
+@mixin vidlabel(){
+	font-size: 1em;
+	font-weight: 600;
+	padding:0.2em 0.4em;
+	background-color: rgba(255,255,255,0.9);
+	display: inline-block;
 }
 
-
-
 // thematique
 .node-thematique{
 	min-height:766px;
@@ -359,35 +365,37 @@ body,
 				.field-name-field-emvideo a{ display: block; line-height: 0;}
 				.group-description{
 					cursor: pointer; pointer-events: none;
-					box-sizing: border-box;
 					position:absolute; z-index: 2;
 					top:0; left: 0;
-					width:90%;
-					height:80%;
-					margin:5%;
-					padding:5%;
-					background-color: rgba(255,255,255,0);
-					transition: background-color 0.3s ease-in-out;
+					width:100%; height:100%;
+
 					.field-name-field-ecouter{
-						font-size: 1em;
-						font-weight: 500;
-						background-color: rgba(255,255,255,0.9);
-						transition: background-color 0.3s ease-in-out;
-						display: inline-block;
+						@include vidlabel();
+
+						margin:15px;
+						// transition: background-color 0.3s ease-in-out;
 					}
 					.field-name-field-description{
+						position: absolute;
+						top:0; left:0;
+						box-sizing: border-box;
+						width:80%;
+						height:70%;
+						margin:10%;
+						padding:5%;
 						opacity: 0;
+						background-color: rgba(255,255,255,0.9);
 						transition: opacity 0.3s ease-in-out;
 						h3{
-							font-weight: 500; font-size: 2em
+							font-weight: 500; font-size: 2em; margin:0;
 						}
 					}
 				}
 				&:hover .group-description{
-					background-color: rgba(255,255,255,0.9);
-					.field-name-field-ecouter{
-						background-color: rgba(255,255,255,0);
-					}
+					// background-color: rgba(255,255,255,0.9);
+					// .field-name-field-ecouter{
+					// 	background-color: rgba(255,255,255,0);
+					// }
 					.field-name-field-description{opacity:1;}
 				}
 			}
@@ -421,12 +429,8 @@ body,
 						margin:5%;
 						// opacity: 0;
 						.field-name-field-doc{
-							display: inline-block;
+							@include vidlabel;
 							z-index:5;
-							font-size: 1em;
-							font-weight: 500;
-							padding: 7px;
-							background-color: rgba(255, 255, 255, 0.9);
 							transition:background-color 0.3s ease-in-out;
 						}
 						.field-name-title-field{
@@ -474,11 +478,7 @@ body,
 				// letter-spacing: -0.25em;
 
 				.field-label{
-					font-size: 1.3em;
-					font-weight: 400;
-					background-color: #fff;
-					display: inline-block;
-					padding:0.2em 0.4em 0;
+					@include vidlabel;
 					margin-bottom: 0.3em;
 				}
 				&>.field-items{
@@ -507,7 +507,7 @@ body,
 									transition:opacity,background-color 0.3s ease-in-out;
 									.field-name-title-field{
 										font-size: 4em;
-										font-weight: 700;
+										font-weight: 800;
 										font-style: italic;
 										text-align: center;
 									}