improved responsive

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

@@ -4,9 +4,9 @@
  * Author: Bachir Soussi Chiadmi
  */
 /* between 0 & 640px */
-/* between 640px & 1000px */
-/* between 1001px & 1025px */
-/* between 1026px & 1920px */
+/* between 640px & 1024px */
+/* between 1025px & 1366px */
+/* between 1367px & 1920px */
 /* between 1920px & infinity */
 body {
   font-size: 16px;
@@ -51,17 +51,15 @@ input {
   background-position: center top;
   background-size: contain;
   max-height: 200px; }
-  @media only screen and (min-width: 62.5625em) {
-    #header {
-      position: fixed; } }
-  @media only screen and (min-width: 62.5625em) {
+  @media only screen and (min-width: 85.4375em) {
     #header {
+      position: fixed;
       max-height: 400px; } }
   #header hgroup.logo {
     width: 95%;
     margin: 0 auto;
     padding: 1em 0 0; }
-    @media only screen and (min-width: 62.5625em) {
+    @media only screen and (min-width: 64.0625em) {
       #header hgroup.logo {
         max-width: 1000px; } }
   #header h1 {
@@ -76,7 +74,7 @@ input {
     text-indent: -2000px;
     overflow: hidden;
     margin: 0; }
-    @media only screen and (min-width: 62.5625em) {
+    @media only screen and (min-width: 85.4375em) {
       #header h1 a {
         height: 320px; } }
   #header h2 {
@@ -84,17 +82,17 @@ input {
     color: #20c498;
     font-size: 1em;
     font-weight: 500; }
-    @media only screen and (min-width: 62.5625em) {
+    @media only screen and (min-width: 85.4375em) {
       #header h2 {
         font-size: 2em; } }
 
 #main {
   width: 95%;
   margin: 0 auto; }
-  @media only screen and (min-width: 62.5625em) {
+  @media only screen and (min-width: 85.4375em) {
     #main {
       padding-top: 400px; } }
-  @media only screen and (min-width: 62.5625em) {
+  @media only screen and (min-width: 64.0625em) {
     #main {
       max-width: 1000px; } }
 
@@ -104,11 +102,15 @@ input {
     display: inline; }
   #node-63 .content p {
     margin: 0;
-    font-size: 1.3em;
-    line-height: 1.3;
+    font-size: 1em;
+    line-height: 1.2;
     font-weight: 400; }
     #node-63 .content p em {
       font-weight: 500; }
+    @media only screen and (min-width: 64.0625em) {
+      #node-63 .content p {
+        font-size: 1.3em;
+        line-height: 1.3; } }
   #node-63 ul.links {
     text-align: right;
     margin: 0;
@@ -125,7 +127,7 @@ input {
 #thematique-anchor-links {
   display: none;
   padding: 2em 0 4em; }
-  @media only screen and (min-width: 62.5625em) {
+  @media only screen and (min-width: 85.4375em) {
     #thematique-anchor-links {
       display: block; } }
   #thematique-anchor-links ul {
@@ -196,8 +198,12 @@ input {
             cursor: default; }
 
 .node-thematique {
+  margin-top: 2em;
   margin-bottom: 7em;
   position: relative; }
+  @media only screen and (min-width: 85.4375em) {
+    .node-thematique {
+      margin-top: 0; } }
   .node-thematique::before {
     position: absolute;
     content: " ";
@@ -209,7 +215,7 @@ input {
     height: 100%;
     top: 0;
     left: 0; }
-    @media only screen and (min-width: 62.5625em) {
+    @media only screen and (min-width: 85.4375em) {
       .node-thematique::before {
         background-size: contain;
         width: 110%;
@@ -298,19 +304,24 @@ input {
   .node-thematique.node-26 .field-name-body .summary {
     border-left-color: #8800aa; }
   .node-thematique > h2 {
-    font-size: 4em;
+    font-size: 3em;
     font-weight: 400;
     line-height: 0.9;
     text-indent: -0.09em;
     position: relative;
     margin: 0;
-    padding: 0 2em 0 0; }
-    @media only screen and (min-width: 62.5625em) {
+    padding: 0 1em 0 0; }
+    @media only screen and (min-width: 85.4375em) {
       .node-thematique > h2 {
+        padding: 0 2em 0 0;
+        font-size: 4em;
         padding: 0; } }
     .node-thematique > h2 span.target {
       position: absolute;
-      top: -170px; }
+      top: -120px; }
+      @media only screen and (min-width: 85.4375em) {
+        .node-thematique > h2 span.target {
+          top: -170px; } }
     .node-thematique > h2 span.date {
       font-size: 0.3em;
       font-weight: 600;
@@ -322,7 +333,7 @@ input {
       letter-spacing: normal; }
     .node-thematique .content article.main {
       overflow: hidden; }
-      @media only screen and (min-width: 62.5625em) {
+      @media only screen and (min-width: 64.0625em) {
         .node-thematique .content article.main {
           display: inline-block;
           vertical-align: top;
@@ -337,15 +348,18 @@ input {
           transition: background-color 0.5 ease-in-out;
           border-left-style: solid;
           border-left-width: 0; }
-          @media only screen and (min-width: 62.5625em) {
+          @media only screen and (min-width: 64.0625em) {
             .node-thematique .content article.main .field-name-body .summary {
               height: 7em;
               overflow: hidden; } }
           .node-thematique .content article.main .field-name-body .summary p {
             font-size: 1.05em;
-            padding: 0.5em 1.2em 0.5em;
+            padding: 0.5em 0;
             margin: 0;
             font-weight: 500; }
+            @media only screen and (min-width: 64.0625em) {
+              .node-thematique .content article.main .field-name-body .summary p {
+                padding: 0.5em 1.2em 0.5em; } }
         .node-thematique .content article.main .field-name-body .value {
           display: none;
           position: absolute;
@@ -354,7 +368,7 @@ input {
           transition: height 0.5s ease-in-out;
           background-color: #fff;
           overflow: hidden; }
-          @media only screen and (min-width: 62.5625em) {
+          @media only screen and (min-width: 85.4375em) {
             .node-thematique .content article.main .field-name-body .value {
               display: block; } }
           .node-thematique .content article.main .field-name-body .value p {
@@ -363,7 +377,7 @@ input {
             line-height: 1.3;
             margin: 0;
             background-color: #fff; }
-        @media only screen and (min-width: 62.5625em) {
+        @media only screen and (min-width: 64.0625em) {
           .node-thematique .content article.main .field-name-body:hover .value {
             height: 700px; } }
       .node-thematique .content article.main .group-video {
@@ -384,12 +398,18 @@ input {
           width: 100%;
           height: 100%; }
           .node-thematique .content article.main .group-video .group-description .field-name-field-ecouter {
-            font-size: 1em;
+            font-size: 0.7em;
+            background-color: rgba(255, 255, 255, 0.9);
             font-weight: 600;
             padding: 0.2em 0.4em;
-            background-color: rgba(255, 255, 255, 0.9);
             display: inline-block;
-            margin: 15px; }
+            margin: 5px; }
+            @media only screen and (min-width: 64.0625em) {
+              .node-thematique .content article.main .group-video .group-description .field-name-field-ecouter {
+                font-size: 1em; } }
+            @media only screen and (min-width: 64.0625em) {
+              .node-thematique .content article.main .group-video .group-description .field-name-field-ecouter {
+                margin: 15px; } }
           .node-thematique .content article.main .group-video .group-description .field-name-field-description {
             position: absolute;
             top: 0;
@@ -406,23 +426,40 @@ input {
               font-weight: 500;
               font-size: 2em;
               margin: 0; }
-        .node-thematique .content article.main .group-video:hover .group-description .field-name-field-description {
-          opacity: 1; }
+        @media only screen and (min-width: 64.0625em) {
+          .node-thematique .content article.main .group-video:hover .group-description .field-name-field-description {
+            opacity: 1; } }
     .node-thematique .content aside.right {
       margin-top: 1.2em; }
-      @media only screen and (min-width: 62.5625em) {
+      @media only screen and (min-width: 64.0625em) {
         .node-thematique .content aside.right {
           display: inline-block;
           vertical-align: top;
           width: 30.5%;
           margin-top: 0; } }
-      @media only screen and (min-width: 62.5625em) {
+      @media only screen and (min-width: 64.0625em) {
         .node-thematique .content aside.right .field-name-field-eclairages {
           padding-left: 1em; } }
-      .node-thematique .content aside.right .field-name-field-eclairages .field-item:not(:last-child) {
-        padding-bottom: 1.2em; }
+      .node-thematique .content aside.right .field-name-field-eclairages .field-items {
+        display: -ms-flexbox;
+        display: flex;
+        -ms-flex-flow: row wrap;
+        flex-flow: row wrap;
+        -ms-flex-pack: start;
+        justify-content: flex-start; }
+        @media only screen and (min-width: 64.0625em) {
+          .node-thematique .content aside.right .field-name-field-eclairages .field-items {
+            display: block; } }
+        .node-thematique .content aside.right .field-name-field-eclairages .field-items > .field-item {
+          display: block;
+          background-color: #fff;
+          width: 33%; }
+          @media only screen and (min-width: 64.0625em) {
+            .node-thematique .content aside.right .field-name-field-eclairages .field-items > .field-item {
+              width: auto; }
+              .node-thematique .content aside.right .field-name-field-eclairages .field-items > .field-item:not(:last-child) {
+                padding-bottom: 1.2em; } }
       .node-thematique .content aside.right .node-documentair {
-        min-height: 150px;
         background-color: #fff; }
         .node-thematique .content aside.right .node-documentair .content {
           position: relative; }
@@ -437,15 +474,21 @@ input {
             left: 0;
             width: 90%;
             height: 80%;
-            margin: 15px; }
+            margin: 5px; }
+            @media only screen and (min-width: 64.0625em) {
+              .node-thematique .content aside.right .node-documentair .content .group-txt {
+                margin: 15px; } }
             .node-thematique .content aside.right .node-documentair .content .group-txt .field-name-field-doc {
-              font-size: 1em;
+              font-size: 0.7em;
+              background-color: rgba(255, 255, 255, 0.9);
               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; }
+              @media only screen and (min-width: 64.0625em) {
+                .node-thematique .content aside.right .node-documentair .content .group-txt .field-name-field-doc {
+                  font-size: 1em; } }
             .node-thematique .content aside.right .node-documentair .content .group-txt .field-name-title-field {
               position: absolute;
               z-index: -1;
@@ -464,10 +507,11 @@ input {
           .node-thematique .content aside.right .node-documentair .content .group-video a {
             display: block;
             line-height: 0; }
-        .node-thematique .content aside.right .node-documentair:not(.en_attente):hover .group-txt .field-name-field-doc {
-          background-color: transparent; }
-        .node-thematique .content aside.right .node-documentair:not(.en_attente):hover .group-txt .field-name-title-field {
-          opacity: 1; }
+        @media only screen and (min-width: 64.0625em) {
+          .node-thematique .content aside.right .node-documentair:not(.en_attente):hover .group-txt .field-name-field-doc {
+            background-color: transparent; }
+          .node-thematique .content aside.right .node-documentair:not(.en_attente):hover .group-txt .field-name-title-field {
+            opacity: 1; } }
         .node-thematique .content aside.right .node-documentair.en_attente > .content {
           position: relative; }
           .node-thematique .content aside.right .node-documentair.en_attente > .content::before {
@@ -482,86 +526,101 @@ input {
             opacity: 0.8; }
     .node-thematique .content aside.bottom {
       padding-top: 1.2em; }
-      @media only screen and (min-width: 62.5625em) {
+      @media only screen and (min-width: 64.0625em) {
         .node-thematique .content aside.bottom {
           padding-top: 0.6em; } }
       .node-thematique .content aside.bottom .field-name-field-episodes .field-label {
-        font-size: 1em;
+        font-size: 0.7em;
+        background-color: rgba(255, 255, 255, 0.9);
         font-weight: 600;
         padding: 0.2em 0.4em;
-        background-color: rgba(255, 255, 255, 0.9);
         display: inline-block;
         margin-bottom: 0.3em; }
-      @media only screen and (min-width: 62.5625em) {
-        .node-thematique .content aside.bottom .field-name-field-episodes > .field-items {
-          display: -ms-flexbox;
-          display: flex;
-          -ms-flex-flow: row nowrap;
-          flex-flow: row nowrap;
-          -ms-flex-pack: justify;
-          justify-content: space-between; } }
-      .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item {
-        display: block;
-        background-color: #fff; }
-        @media only screen and (min-width: 62.5625em) {
-          .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item {
-            width: 19%; } }
-        .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content {
-          position: relative; }
-          .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content .group-txt {
-            cursor: pointer;
-            pointer-events: none;
-            box-sizing: border-box;
-            position: absolute;
-            z-index: 2;
-            overflow: hidden;
-            top: 0;
-            left: 0;
-            width: 90%;
-            height: 80%;
-            margin: 5%;
-            padding: 5%;
-            background-color: rgba(255, 255, 255, 0.9);
-            opacity: 1;
-            transition: opacity,background-color 0.3s ease-in-out;
-            z-index: 11; }
-            .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: 300;
-              line-height: 1;
-              font-style: italic;
-              text-align: center; }
-          .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content .group-video img {
-            width: 100%;
-            height: auto; }
-          .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content .group-video a {
-            display: block;
-            line-height: 0; }
-        .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode:not(.en_attente):hover .content .group-txt {
-          opacity: 0.9;
-          background-color: rgba(255, 255, 255, 0.3); }
-          .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode:not(.en_attente):hover .content .group-txt .field-name-title-field {
-            font-weight: 500; }
-        .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode.en_attente > .content {
-          position: relative; }
-          .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode.en_attente > .content::before {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            content: " ";
-            z-index: 10;
-            background-color: #fff;
-            opacity: 0.8; }
-          .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode.en_attente > .content .field-name-title-field {
-            font-size: 3em; }
-            .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode.en_attente > .content .field-name-title-field span.date {
+        @media only screen and (min-width: 64.0625em) {
+          .node-thematique .content aside.bottom .field-name-field-episodes .field-label {
+            font-size: 1em; } }
+      .node-thematique .content aside.bottom .field-name-field-episodes > .field-items {
+        display: -ms-flexbox;
+        display: flex;
+        -ms-flex-flow: row wrap;
+        flex-flow: row wrap;
+        -ms-flex-pack: start;
+        justify-content: flex-start; }
+        @media only screen and (min-width: 64.0625em) {
+          .node-thematique .content aside.bottom .field-name-field-episodes > .field-items {
+            -ms-flex-flow: row nowrap;
+            flex-flow: row nowrap;
+            -ms-flex-pack: justify;
+            justify-content: space-between; } }
+        .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item {
+          display: block;
+          background-color: #fff;
+          width: 50%; }
+          @media only screen and (min-width: 64.0625em) {
+            .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item {
+              width: 19%; } }
+          .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content {
+            position: relative; }
+            .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content .group-txt {
+              cursor: pointer;
+              pointer-events: none;
+              box-sizing: border-box;
+              position: absolute;
+              z-index: 2;
+              overflow: hidden;
+              top: 0;
+              left: 0;
+              width: 90%;
+              height: 80%;
+              margin: 5%;
+              padding: 5%;
+              background-color: rgba(255, 255, 255, 0.9);
+              opacity: 1;
+              transition: opacity,background-color 0.3s ease-in-out;
+              z-index: 11; }
+              .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content .group-txt .field-name-title-field {
+                font-size: 3em;
+                font-weight: 300;
+                line-height: 1;
+                font-style: italic;
+                text-align: center; }
+                @media only screen and (min-width: 64.0625em) {
+                  .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; } }
+            .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content .group-video img {
+              width: 100%;
+              height: auto; }
+            .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content .group-video a {
               display: block;
-              font-size: 0.3em;
-              font-weight: 500;
-              font-style: normal;
-              padding-top: 0.3em; }
+              line-height: 0; }
+          .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode:not(.en_attente):hover .content .group-txt {
+            opacity: 0.9;
+            background-color: rgba(255, 255, 255, 0.3); }
+            .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode:not(.en_attente):hover .content .group-txt .field-name-title-field {
+              font-weight: 500; }
+          .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode.en_attente > .content {
+            position: relative; }
+            .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode.en_attente > .content::before {
+              position: absolute;
+              top: 0;
+              left: 0;
+              width: 100%;
+              height: 100%;
+              content: " ";
+              z-index: 10;
+              background-color: #fff;
+              opacity: 0.8; }
+            .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode.en_attente > .content .field-name-title-field {
+              font-size: 2em; }
+              @media only screen and (min-width: 64.0625em) {
+                .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode.en_attente > .content .field-name-title-field {
+                  font-size: 3em; } }
+              .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode.en_attente > .content .field-name-title-field span.date {
+                display: block;
+                font-size: 0.3em;
+                font-weight: 500;
+                font-style: normal;
+                padding-top: 0.3em; }
 
 #DOMWindow .embedded-video, #DOMWindow .player, #DOMWindow iframe {
   width: 100%;

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

@@ -20,12 +20,13 @@
  @function em-calc($px-value, $rem-base: 16) {
    $value: $px-value / $rem-base;
    @return $value * 1em;
+  // @return $px-value * 1px;
  }
 
  $small-range: (0, em-calc(640)); /* between 0 & 640px */
- $medium-range: (em-calc(641), em-calc(1000)); /* between 640px & 1000px */
- $large-range: (em-calc(1001), em-calc(1025)); /* between 1001px & 1025px */
- $xlarge-range: (em-calc(1026), em-calc(1920)); /* between 1026px & 1920px */
+ $medium-range: (em-calc(641), em-calc(1024)); /* between 640px & 1024px */
+ $large-range: (em-calc(1025), em-calc(1366)); /* between 1025px & 1366px */
+ $xlarge-range: (em-calc(1367), em-calc(1920)); /* between 1367px & 1920px */
  $xxlarge-range: (em-calc(1921), 99999999px); /* between 1920px & infinity */
 
  $screen: 'only screen';
@@ -74,7 +75,6 @@ input{font-family: Arial, "MS Trebuchet", sans-serif; font-size:0.8em;}
 $vert 	: #20c498;
 $bleu 	: #1f04a1;
 // $rouge	: #fb3f08;
-
 $coul0	: #2f82ff;
 $coul1	: #ff0000;
 $coul2	: #88aa00;
@@ -82,8 +82,6 @@ $coul3	: #ff6600;
 $coul4	: #ff2ad4;
 $coul5	: #8800aa;
 
-
-
 /** layout */
 .footer-block .region, .header-block{ display:inline-block; vertical-align: top;}
 
@@ -104,9 +102,6 @@ $header_height_small:200px;
 $header_height_large:400px;
 
 #header{
-	@media #{$large-up} {
-		position: fixed;
-	}
 	width:100%;
 	z-index: 20;
 	background-color: transparentize(#fff, 0.05);
@@ -116,12 +111,11 @@ $header_height_large:400px;
 	background-size: contain;
 
 	max-height: $header_height_small;
-	@media #{$large-up} {
+	@media #{$xlarge-up} {
+		position: fixed;
 		max-height: $header_height_large;
 	}
 
-	// box-shadow: 0 3px 3px transparentize(#fff, 0.05);
-
 	hgroup.logo{
 		@include main_centred();
 		padding: 1em 0 0;
@@ -130,7 +124,7 @@ $header_height_large:400px;
 	h1 a{
 		display:block;
 		height:$header_height_small*0.6;
-		@media #{$large-up} {
+		@media #{$xlarge-up} {
 			height: $header_height_large*0.8;
 		}
 		// transition: height 0.1s ease-in-out;
@@ -147,7 +141,7 @@ $header_height_large:400px;
 		color:$vert;
 		font-size: 1em;
     font-weight: 500;
-		@media #{$large-up} {
+		@media #{$xlarge-up} {
 			font-size: 2em;
 		}
 	}
@@ -155,7 +149,7 @@ $header_height_large:400px;
 
 #main{
 	// padding-top: $header_height_small;
-	@media #{$large-up} {
+	@media #{$xlarge-up} {
 		padding-top: $header_height_large;
 	}
 
@@ -174,12 +168,16 @@ $header_height_large:400px;
 		p{
       // text-align: center;
       margin:0;
-      font-size: 1.3em;
-      line-height: 1.3;
+      font-size: 1em;
+      line-height: 1.2;
       font-weight: 400;
       em{
         font-weight: 500;
       }
+      @media #{$large-up} {
+        font-size: 1.3em;
+        line-height: 1.3;
+      }
     }
 	}
 	ul.links{
@@ -196,7 +194,7 @@ $header_height_large:400px;
 
 #thematique-anchor-links{
 	display:none;
-	@media #{$large-up} {
+	@media #{$xlarge-up} {
 		display:block;
 	}
 
@@ -294,17 +292,24 @@ $header_height_large:400px;
 // }
 
 @mixin vidlabel(){
-	font-size: 1em;
-	font-weight: 600;
-	padding:0.2em 0.4em;
-	background-color: rgba(255,255,255,0.9);
-	display: inline-block;
+	font-size: 0.7em;
+  background-color: rgba(255,255,255,0.9);
+  font-weight: 600;
+  padding:0.2em 0.4em;
+  display: inline-block;
+  @media #{$large-up} {
+  	font-size: 1em;
+  }
 }
 
 // thematique
 .node-thematique{
 	// min-height:766px;
+  margin-top: 2em;
 	margin-bottom: 7em;
+  @media #{$xlarge-up} {
+    margin-top: 0;
+  }
 	position: relative;
 
 	&::before{
@@ -317,7 +322,7 @@ $header_height_large:400px;
 
 		width:100%; height:100%;
 		top:0; left:0;
-		@media #{$large-up} {
+		@media #{$xlarge-up} {
 			background-size: contain;
 			width:110%; height:110%;
 			top:-5%; left:-5%;
@@ -343,24 +348,6 @@ $header_height_large:400px;
     .field-name-body .summary{
       border-left-color: $coul;
     }
-    // article.main{
-    //   .field-name-body{
-    //     .summary{background-color: $coul;}
-    //   }
-    // }
-
-		// &.en_attente::before{background-image: $sb_bg;}
-		// &.en_attente{
-		// 	>h2,
-		// 	.group-video .field-name-field-description h3,
-		// 	.group-description .field-name-field-ecouter,
-		// 	.node-documentair .field-name-field-doc,
-		// 	.node-documentair .field-name-title-field,
-		// 	.field-name-field-episodes .field-label,
-		// 	.node-episode .field-name-title-field{
-		// 		color: #aaa;//lighten(desaturate($coul, 40%), 20%);
-		// 	}
-		// }
 	}
 
 	&.node-32{
@@ -418,21 +405,24 @@ $header_height_large:400px;
   }
 
 	>h2{
-		font-size: 4em;
+		font-size: 3em;
 		font-weight: 400;
     line-height: 0.9;
     text-indent: -0.09em;
-		// padding-left: 0.18em;
 		position:relative;
 		margin:0;
-		padding: 0 2em 0 0;
-    // @include white_shadow;
-		@media #{$large-up} {
+    padding: 0 1em 0 0;
+		@media #{$xlarge-up} {
+      padding: 0 2em 0 0;
+      font-size: 4em;
 			padding:0;
 		}
 		span.target{
-			position: absolute;
-			top:-170px;
+      position: absolute;
+      top:-120px;
+      @media #{$xlarge-up} {
+	      top:-170px;
+      }
 		}
     span.date{
       font-size: 0.3em;
@@ -478,17 +468,19 @@ $header_height_large:400px;
 					}
 					p{
 						font-size: 1.05em;
-						padding:0.5em 1.2em 0.5em;
+						padding:0.5em 0;
             margin: 0;
 						font-weight: 500;
-            // @include white_shadow;
+            @media #{$large-up} {
+              padding:0.5em 1.2em 0.5em;
+            }
 					}
           border-left-style:solid;
           border-left-width: 0;
         }
 				.value{
 					display:none;
-					@media #{$large-up} {
+					@media #{$xlarge-up} {
 						display: block;
 					}
 					position:absolute;
@@ -528,9 +520,10 @@ $header_height_large:400px;
 
 					.field-name-field-ecouter{
 						@include vidlabel();
-
-						margin:15px;
-						// transition: background-color 0.3s ease-in-out;
+            margin:5px;
+            @media #{$large-up} {
+						  margin:15px;
+            }
 					}
 					.field-name-field-description{
 						position: absolute;
@@ -548,13 +541,15 @@ $header_height_large:400px;
 						}
 					}
 				}
-				&:hover .group-description{
-					// 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;}
-				}
+        @media #{$large-up} {
+  				&:hover .group-description{
+  					// 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;}
+  				}
+        }
 			}
 		}
 
@@ -573,15 +568,33 @@ $header_height_large:400px;
 				margin-top: 0;
 			}
 			.field-name-field-eclairages{
-				@media #{$large-up} {
-					padding-left:1em;
-				}
-				.field-item:not(:last-child){
-					padding-bottom: $gouttiere;
-				}
+        @media #{$large-up} {
+          padding-left:1em;
+        }
+        .field-items{
+          display: flex;
+          flex-flow: row wrap;
+          justify-content: flex-start;
+          @media #{$large-up} {
+            display: block;
+          }
+          &>.field-item{
+            display: block;
+            background-color: #fff;
+            width:33%;
+            @media #{$large-up} {
+              width:auto;
+              &:not(:last-child){
+      					padding-bottom: $gouttiere;
+      				}
+            }
+          }
+
+        }
+
 			}
 			.node-documentair{
-				min-height: 150px;
+				// min-height: 150px;
 				background-color: #fff;
 				.content{
 					position: relative;
@@ -590,7 +603,10 @@ $header_height_large:400px;
 						box-sizing: border-box;
 						position:absolute; z-index: 2; overflow: hidden;
 						top:0; left:0; width:90%; height:80%;
-						margin:15px;
+            margin:5px;
+            @media #{$large-up} {
+						  margin:15px;
+            }
 						// opacity: 0;
 						.field-name-field-doc{
 							@include vidlabel;
@@ -611,10 +627,12 @@ $header_height_large:400px;
 					.group-video img{ width:100%; height:auto;}
 					.group-video a{ display: block; line-height: 0;}
 				}
-				&:not(.en_attente):hover .group-txt{
-					.field-name-field-doc{background-color: transparent;}
-					.field-name-title-field{opacity: 1;}
-				}
+        @media #{$large-up} {
+  				&:not(.en_attente):hover .group-txt{
+  					.field-name-field-doc{background-color: transparent;}
+  					.field-name-title-field{opacity: 1;}
+  				}
+        }
 
 				&.en_attente>.content{
 					position: relative;
@@ -650,14 +668,17 @@ $header_height_large:400px;
 					margin-bottom: 0.3em;
 				}
 				&>.field-items{
+          display: flex;
+          flex-flow: row wrap;
+          justify-content: flex-start;
 					@media #{$large-up} {
-				    display: flex;
-				    flex-flow: row nowrap;
-				    justify-content: space-between;
+            flex-flow: row nowrap;
+            justify-content: space-between;
 					}
 					&>.field-item{
 						display: block;
 						background-color: #fff;
+            width:50%;
 						@media #{$large-up} {
 							width:19%;
 						}
@@ -675,11 +696,14 @@ $header_height_large:400px;
 									transition:opacity,background-color 0.3s ease-in-out;
                   z-index: 11;
 									.field-name-title-field{
-										font-size: 4em;
+										font-size: 3em;
 										font-weight: 300;
                     line-height: 1;
 										font-style: italic;
 										text-align: center;
+                    @media #{$large-up} {
+                      font-size: 4em;
+                    }
 									}
 								}
 								.group-video img{ width:100%; height:auto;}
@@ -706,7 +730,10 @@ $header_height_large:400px;
 									opacity: 0.8;
 								}
                 .field-name-title-field{
-                  font-size: 3em;
+                  font-size: 2em;
+                  @media #{$large-up} {
+                    font-size: 3em;
+                  }
                   span.date{
                     display: block;
                     font-size: 0.3em;