fixed collection access on mobile

sites/all/themes/custom/edlptheme/assets/styles/app.scss

@@ -156,13 +156,58 @@ header[role="banner"]{
     }
   }
   html.is-mobile &{
-    // outline: 1px solid orange;
+    // outline: 1px solid blue;
     margin-top:4px;
-    li{
-      a{
-        font-size: 0.680em;
-        padding:0; margin:0;
+    width:50px; //height:25px;
+    overflow: visible;
+    $square-size:15px;
+    >h2#block-mainnavigation-menu.visually-hidden{
+      // outline: 1px solid green;
+      right:0;
+      clip: auto;
+      margin:0;
+      text-indent: 100px;
+      cursor: pointer;
+      width:$square-size*2; height:$square-size*2;
+      background-size:$square-size $square-size;
+      background-color: white;
+      background-repeat: repeat;
+      background-image:
+        // hiddings off-square lines
+        linear-gradient(90deg, white 0, white 2px, transparent 2px, transparent),
+        linear-gradient(90deg, transparent 0, transparent $square-size - 2, white $square-size - 2, white),
+        linear-gradient(0deg, white 0, white 2px, transparent 2px, transparent),
+        linear-gradient(0deg, transparent 0, transparent $square-size - 2, white $square-size - 2, white),
+        // drawing the lines
+        linear-gradient(90deg, transparent 0, transparent 2px, red 2px, transparent 3px, transparent),
+        linear-gradient(90deg, transparent 0, transparent $square-size - 3, red $square-size - 3, transparent $square-size - 2, transparent),
+        linear-gradient(0deg, transparent 0, transparent 2px, red 2px, transparent 3px, transparent),
+        linear-gradient(0deg, transparent 0, transparent $square-size - 3, red $square-size - 3, transparent $square-size - 2, transparent);
+    }
+    ul.menu{
+      // outline: 1px solid orange;
+      border-top: 1px solid red;
+      border-bottom: 1px solid red;
+      position:absolute;
+      background-color: white;
+      width:300px;
+      padding: 1em;
+      top:$square-size * 3; left:100px;
+      transition: left 0.2s ease-in-out;
+      li{
+        &:first-of-type{
+          display:block;
+        }
+        a{
+          font-size: 0.680em;
+          padding:0; margin:0;
+        }
       }
+
+    }
+
+    &.visible ul.menu{
+      left:-130px;
     }
   }
 }
@@ -405,6 +450,7 @@ main[role="main"]{
         @include content_courant;
       }
     }
+
   }
 
   article.node--type-evenement{
@@ -533,11 +579,65 @@ main[role="main"]{
     }
   }
 
+  html.is-mobile & .entrees{
+    #collection{
+      margin-top: -80px;
+      margin-bottom: 80px;
+    }
+    h3{
+      @include content_titles;
+      text-align: center;
+      padding-top: 0.5em;
+    }
+    article.node--type-enregistrement{
+      margin:0.7em 0 0 0;
+      h2.node-title{
+        margin: 0;
+      }
+      div.entrees{
+        @include entree-micro-square;
+      }
+      p{margin: 0;}
+    }
+  }
+
   div.taxonomy-term.vocabulary-entrees.home_mobile{
     // &:not(:first-of-type){
     padding-bottom: 1em;
-    border-bottom: 1px solid red;
+    // border-bottom: 1px solid red;
     // }
+    > h2{
+      white-space:nowrap;
+      &:before{
+        content: "";
+        display:inline-block;
+        $sq:10px;
+        width: $sq; height:$sq;
+        border: 1px solid #000;
+        margin-right: 0.5em;
+      }
+      div{display: inline-block;}
+    }
+    &[tid='134']{>h2:before{border-color: var(--e-col-134);}}
+    &[tid='121']{>h2:before{border-color: var(--e-col-121);}}
+    &[tid='125']{>h2:before{border-color: var(--e-col-125);}}
+    &[tid='119']{>h2:before{border-color: var(--e-col-119);}}
+    &[tid='132']{>h2:before{border-color: var(--e-col-132);}}
+    &[tid='122']{>h2:before{border-color: var(--e-col-122);}}
+    &[tid='129']{>h2:before{border-color: var(--e-col-129);}}
+    &[tid='120']{>h2:before{border-color: var(--e-col-120);}}
+    &[tid='130']{>h2:before{border-color: var(--e-col-130);}}
+    &[tid='118']{>h2:before{border-color: var(--e-col-118);}}
+    &[tid='127']{>h2:before{border-color: var(--e-col-127);}}
+    &[tid='133']{>h2:before{border-color: var(--e-col-133);}}
+    &[tid='128']{>h2:before{border-color: var(--e-col-128);}}
+    &[tid='124']{>h2:before{border-color: var(--e-col-124);}}
+    &[tid='116']{>h2:before{border-color: var(--e-col-116);}}
+    &[tid='117']{>h2:before{border-color: var(--e-col-117);}}
+    &[tid='131']{>h2:before{border-color: var(--e-col-131);}}
+    &[tid='126']{>h2:before{border-color: var(--e-col-126);}}
+    &[tid='123']{>h2:before{border-color: var(--e-col-123);}}
+
     .field--name-field-notice, .index{
       >.field__label{
         cursor: pointer;
@@ -668,6 +768,8 @@ main[role="main"]{
     .audiofield label{display: none;}
 
   }
+
+
 }