From f8952225d69e70aa348c175b99453687ff10bcc7 Mon Sep 17 00:00:00 2001
From: Evarin <champrobin@hotmail.com>
Date: Sun, 28 Jan 2018 19:09:56 +0100
Subject: [PATCH] Apparence et Responsiveness

---
 gestioncof/cms/static/cofcms/css/screen.css   | 297 ++++++++++++++----
 .../cms/static/cofcms/images/minimenu.svg     |  11 +
 .../cms/static/cofcms/sass/_colors.scss       |  16 +-
 .../cms/static/cofcms/sass/_responsive.scss   | 124 ++++++++
 gestioncof/cms/static/cofcms/sass/screen.scss |  84 +++--
 gestioncof/cms/templates/cofcms/base.html     |   3 +-
 .../cms/templates/cofcms/base_aside.html      |   7 +-
 .../templates/cofcms/cof_actu_index_page.html |   1 +
 .../cms/templates/cofcms/cof_actu_page.html   |   2 +-
 .../templates/cofcms/cof_directory_page.html  |   2 +-
 gestioncof/cms/templates/cofcms/cof_page.html |   4 +-
 .../cms/templates/cofcms/cof_root_page.html   |   1 +
 12 files changed, 453 insertions(+), 99 deletions(-)
 create mode 100644 gestioncof/cms/static/cofcms/images/minimenu.svg
 create mode 100644 gestioncof/cms/static/cofcms/sass/_responsive.scss

diff --git a/gestioncof/cms/static/cofcms/css/screen.css b/gestioncof/cms/static/cofcms/css/screen.css
index 965206c3..0f82ce97 100644
--- a/gestioncof/cms/static/cofcms/css/screen.css
+++ b/gestioncof/cms/static/cofcms/css/screen.css
@@ -75,19 +75,19 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
 
 /* line 16, ../sass/screen.scss */
 body {
-  background: #f5ffd2;
+  background: #fefefe;
   font: 17px "Source Sans Pro", "sans-serif";
 }
 
 /* line 21, ../sass/screen.scss */
 header {
-  background: #400530;
+  background: #5B0012;
 }
 
 /* line 25, ../sass/screen.scss */
 h1, h2 {
-  font-family: "Carter One";
-  color: #2c3900;
+  font-family: "Carter One", "serif";
+  color: #90001C;
 }
 
 /* line 30, ../sass/screen.scss */
@@ -102,7 +102,7 @@ h2 {
 
 /* line 38, ../sass/screen.scss */
 a {
-  color: #3cb3a6;
+  color: #CC9500;
   text-decoration: none;
   font-weight: bold;
 }
@@ -115,7 +115,7 @@ h2 a {
 
 /* line 50, ../sass/screen.scss */
 header a {
-  color: #f5ffd2;
+  color: #fefefe;
 }
 /* line 53, ../sass/screen.scss */
 header section {
@@ -128,7 +128,7 @@ header section {
 header section.bottom-menu {
   justify-content: space-around;
   text-align: center;
-  background: #5a004f;
+  background: #90001C;
 }
 /* line 65, ../sass/screen.scss */
 header h1 {
@@ -150,7 +150,7 @@ header nav ul li > * {
 }
 /* line 78, ../sass/screen.scss */
 header nav ul li > *:hover {
-  background: #11010d;
+  background: #280008;
 }
 
 /* line 87, ../sass/screen.scss */
@@ -185,151 +185,184 @@ article:last-child {
   position: absolute;
   top: 30px;
   height: 100%;
-  width: 250px;
+  width: 25%;
+  left: 6px;
 }
-/* line 114, ../sass/screen.scss */
+/* line 115, ../sass/screen.scss */
 .container .aside-wrap .aside {
-  color: #fff;
+  color: #222;
   position: fixed;
   position: sticky;
   top: 5px;
   width: 100%;
-  background: #5a004f;
+  background: #FFC500;
   padding: 15px;
-  box-shadow: -4px 4px 1px rgba(0, 0, 0, 0.3);
+  box-shadow: -4px 4px 1px rgba(153, 118, 0, 0.3);
 }
-/* line 124, ../sass/screen.scss */
+/* line 125, ../sass/screen.scss */
 .container .aside-wrap .aside h2 {
   color: #fff;
 }
-/* line 128, ../sass/screen.scss */
+/* line 129, ../sass/screen.scss */
 .container .aside-wrap .aside .calendar {
   margin: 0 auto;
   display: block;
 }
-/* line 135, ../sass/screen.scss */
-.container .content {
-  max-width: 700px;
-  margin-left: auto;
-  margin-right: 0;
+/* line 134, ../sass/screen.scss */
+.container .aside-wrap .aside a {
+  color: #997000;
 }
 /* line 140, ../sass/screen.scss */
+.container .content {
+  max-width: 900px;
+  margin-left: auto;
+  margin-right: 6px;
+}
+/* line 145, ../sass/screen.scss */
 .container .content .intro {
-  border-bottom: 3px solid #a3d200;
-  margin: 20px -10px;
+  border-bottom: 3px solid #7f7f7f;
+  margin: 20px 0;
   margin-top: 5px;
   padding: 15px 5px;
 }
-/* line 150, ../sass/screen.scss */
+/* line 154, ../sass/screen.scss */
 .container .content section article {
   background: #fff;
-  padding: 30px;
-  box-shadow: -4px 4px 1px rgba(0, 0, 0, 0.3);
+  padding: 20px 30px;
+  box-shadow: -4px 4px 1px rgba(153, 118, 0, 0.3);
+  border: 1px solid rgba(153, 118, 0, 0.1);
+  border-radius: 2px;
 }
-/* line 154, ../sass/screen.scss */
+/* line 160, ../sass/screen.scss */
 .container .content section article a {
-  color: #3cb3a6;
+  color: #CC9500;
 }
-/* line 159, ../sass/screen.scss */
+/* line 165, ../sass/screen.scss */
 .container .content section article + h2 {
   margin-top: 15px;
 }
-/* line 163, ../sass/screen.scss */
+/* line 169, ../sass/screen.scss */
 .container .content section article + article {
   margin-top: 25px;
 }
-/* line 168, ../sass/screen.scss */
+/* line 173, ../sass/screen.scss */
+.container .content section .image {
+  margin: 15px 0;
+  text-align: center;
+  padding: 20px;
+}
+/* line 178, ../sass/screen.scss */
+.container .content section .image img {
+  max-width: 100%;
+  height: auto;
+  box-shadow: -7px 7px 1px rgba(153, 118, 0, 0.2);
+}
+/* line 186, ../sass/screen.scss */
 .container .content section.directory article.entry {
   width: 80%;
   max-width: 600px;
   max-height: 100%;
   position: relative;
-  padding-right: 120px;
+  margin-left: 6%;
 }
-/* line 175, ../sass/screen.scss */
+/* line 193, ../sass/screen.scss */
 .container .content section.directory article.entry .entry-image {
   display: block;
-  position: absolute;
+  float: right;
   width: 150px;
   background: #fff;
-  box-shadow: -4px 4px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: -4px 4px 1px rgba(153, 118, 0, 0.2);
+  border-right: 1px solid rgba(153, 118, 0, 0.2);
+  border-top: 1px solid rgba(153, 118, 0, 0.2);
   padding: 1px;
   overflow: hidden;
-  right: 100px;
-  transform: translateX(90%);
-  top: -15px;
+  margin-left: 10px;
+  margin-bottom: 10px;
+  transform: translateX(10px);
 }
-/* line 187, ../sass/screen.scss */
+/* line 207, ../sass/screen.scss */
 .container .content section.directory article.entry .entry-image img {
   width: auto;
   height: auto;
   max-width: 100%;
   max-height: 100%;
 }
-/* line 197, ../sass/screen.scss */
+/* line 215, ../sass/screen.scss */
+.container .content section.directory article.entry ul.links {
+  margin-top: 10px;
+  border-top: 1px solid #90001C;
+  padding-top: 10px;
+}
+/* line 223, ../sass/screen.scss */
 .container .content section.actuhome {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
   align-items: top;
 }
-/* line 203, ../sass/screen.scss */
+/* line 229, ../sass/screen.scss */
 .container .content section.actuhome article + article {
   margin: 0;
 }
-/* line 207, ../sass/screen.scss */
+/* line 233, ../sass/screen.scss */
 .container .content section.actuhome article.actu {
   position: relative;
   background: none;
   box-shadow: none;
+  border: none;
   max-width: 400px;
   min-width: 300px;
   flex: 1;
 }
-/* line 215, ../sass/screen.scss */
+/* line 242, ../sass/screen.scss */
 .container .content section.actuhome article.actu .actu-header {
   position: relative;
-  box-shadow: -4px 5px 1px rgba(0, 0, 0, 0.3);
+  box-shadow: -4px 5px 1px rgba(153, 118, 0, 0.3);
+  border-right: 1px solid rgba(153, 118, 0, 0.2);
+  border-top: 1px solid rgba(153, 118, 0, 0.2);
   min-height: 180px;
   padding: 0;
   margin: 0;
   overflow: hidden;
   background-size: cover;
   background-position: center center;
+  background-repeat: no-repeat;
 }
-/* line 225, ../sass/screen.scss */
+/* line 255, ../sass/screen.scss */
 .container .content section.actuhome article.actu .actu-header h2 {
   position: absolute;
   width: 100%;
   bottom: 0;
   left: 0;
   padding: 5px;
-  text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
+  text-shadow: 0 0 5px rgba(153, 118, 0, 0.8);
   background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
 }
-/* line 233, ../sass/screen.scss */
+/* line 263, ../sass/screen.scss */
 .container .content section.actuhome article.actu .actu-header h2 a {
   color: #fff;
 }
-/* line 239, ../sass/screen.scss */
+/* line 269, ../sass/screen.scss */
 .container .content section.actuhome article.actu .actu-misc {
   background: white;
-  box-shadow: -2px 2px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: -2px 2px 1px rgba(153, 118, 0, 0.2);
+  border: 1px solid rgba(153, 118, 0, 0.2);
+  border-radius: 2px;
   margin: 0 10px;
   padding: 15px;
   padding-top: 5px;
 }
-/* line 246, ../sass/screen.scss */
+/* line 278, ../sass/screen.scss */
 .container .content section.actuhome article.actu .actu-misc .actu-minical {
   display: block;
 }
-/* line 249, ../sass/screen.scss */
+/* line 281, ../sass/screen.scss */
 .container .content section.actuhome article.actu .actu-misc .actu-dates {
   display: block;
   text-align: right;
   font-size: 0.9em;
 }
-/* line 256, ../sass/screen.scss */
+/* line 288, ../sass/screen.scss */
 .container .content section.actuhome article.actu .actu-overlay {
   display: block;
   background: none;
@@ -341,66 +374,202 @@ article:last-child {
   z-index: 5;
   opacity: 0;
 }
-/* line 272, ../sass/screen.scss */
+/* line 304, ../sass/screen.scss */
 .container .content section.actulist article.actu {
   display: flex;
   width: 100%;
   padding: 0;
 }
-/* line 277, ../sass/screen.scss */
+/* line 309, ../sass/screen.scss */
 .container .content section.actulist article.actu .actu-image {
   width: 30%;
   max-width: 200px;
   background-size: cover;
   background-position: center center;
 }
-/* line 283, ../sass/screen.scss */
+/* line 315, ../sass/screen.scss */
 .container .content section.actulist article.actu .actu-infos {
   padding: 15px;
   flex: 1;
 }
-/* line 287, ../sass/screen.scss */
+/* line 319, ../sass/screen.scss */
 .container .content section.actulist article.actu .actu-infos .actu-dates {
   font-weight: bold;
   font-size: 0.9em;
 }
+/* line 329, ../sass/screen.scss */
+.container .aside-wrap + .content {
+  max-width: 70%;
+}
 
-/* line 299, ../sass/screen.scss */
+/* line 335, ../sass/screen.scss */
 .calendar td, .calendar th {
   text-align: center;
   vertical-align: center;
   border: 2px solid transparent;
   padding: 1px;
 }
-/* line 306, ../sass/screen.scss */
+/* line 342, ../sass/screen.scss */
 .calendar th {
   font-weight: bold;
 }
-/* line 310, ../sass/screen.scss */
+/* line 346, ../sass/screen.scss */
 .calendar td {
   font-size: 0.8em;
   width: 25px;
   height: 30px;
 }
-/* line 315, ../sass/screen.scss */
+/* line 351, ../sass/screen.scss */
 .calendar td.out {
   opacity: 0.3;
 }
-/* line 318, ../sass/screen.scss */
+/* line 354, ../sass/screen.scss */
 .calendar td.today {
   border-bottom-color: #000;
 }
-/* line 321, ../sass/screen.scss */
+/* line 357, ../sass/screen.scss */
 .calendar td:nth-child(7) {
   background: rgba(0, 0, 0, 0.3);
 }
-/* line 324, ../sass/screen.scss */
+/* line 360, ../sass/screen.scss */
 .calendar td:nth-child(6) {
   background: rgba(0, 0, 0, 0.2);
 }
-/* line 327, ../sass/screen.scss */
+/* line 363, ../sass/screen.scss */
 .calendar td.hasevent {
   font-weight: bold;
-  color: #3cb3a6;
+  color: #997000;
   font-size: 1em;
 }
+
+/* line 1, ../sass/_responsive.scss */
+header .minimenu {
+  display: none;
+}
+
+@media only screen and (max-width: 600px) {
+  /* line 6, ../sass/_responsive.scss */
+  header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 10;
+    width: 100%;
+    max-height: 100vh;
+    height: 60px;
+    overflow: hidden;
+  }
+  /* line 16, ../sass/_responsive.scss */
+  header .minimenu {
+    display: block;
+    position: absolute;
+    right: 3px;
+    top: 3px;
+  }
+  /* line 23, ../sass/_responsive.scss */
+  header section {
+    display: block;
+  }
+  /* line 25, ../sass/_responsive.scss */
+  header section nav {
+    display: none;
+  }
+
+  /* line 31, ../sass/_responsive.scss */
+  header.expanded {
+    overflow: auto;
+    height: auto;
+  }
+  /* line 35, ../sass/_responsive.scss */
+  header.expanded nav {
+    display: block;
+    text-align: center;
+  }
+  /* line 38, ../sass/_responsive.scss */
+  header.expanded nav ul {
+    flex-wrap: wrap;
+    justify-content: right;
+  }
+  /* line 41, ../sass/_responsive.scss */
+  header.expanded nav ul li > * {
+    padding: 18px;
+  }
+
+  /* line 48, ../sass/_responsive.scss */
+  .container {
+    margin-top: 65px;
+  }
+  /* line 51, ../sass/_responsive.scss */
+  .container .content {
+    max-width: unset;
+    margin: 6px;
+  }
+  /* line 56, ../sass/_responsive.scss */
+  .container .content section article {
+    padding: 10px;
+  }
+  /* line 60, ../sass/_responsive.scss */
+  .container .content section .image {
+    padding: 0;
+    margin: 10px -6px;
+  }
+  /* line 65, ../sass/_responsive.scss */
+  .container .content section.directory article.entry {
+    width: 100%;
+    margin-left: 0;
+  }
+  /* line 72, ../sass/_responsive.scss */
+  .container .aside-wrap + .content {
+    max-width: unset;
+    margin-top: 120px;
+  }
+  /* line 77, ../sass/_responsive.scss */
+  .container .aside-wrap {
+    z-index: 3;
+    top: 60px;
+    position: fixed;
+    width: 100%;
+    margin: 0;
+    height: auto;
+    left: 0;
+  }
+  /* line 86, ../sass/_responsive.scss */
+  .container .aside-wrap .aside {
+    margin: 0;
+    padding: 0;
+    top: 0;
+    position: absolute;
+  }
+  /* line 92, ../sass/_responsive.scss */
+  .container .aside-wrap .aside > h2 {
+    position: relative;
+    cursor: pointer;
+    padding: 5px 10px;
+  }
+  /* line 96, ../sass/_responsive.scss */
+  .container .aside-wrap .aside > h2:after {
+    content: "v";
+    font-family: "Source Sans Pro", "sans-serif";
+    font-weight: bold;
+    color: #CC9500;
+    position: absolute;
+    right: 10px;
+  }
+  /* line 106, ../sass/_responsive.scss */
+  .container .aside-wrap .aside:not(.expanded) .aside-content {
+    display: none;
+  }
+  /* line 111, ../sass/_responsive.scss */
+  .container .aside-wrap .aside ul {
+    text-align: center;
+  }
+  /* line 113, ../sass/_responsive.scss */
+  .container .aside-wrap .aside ul li {
+    display: inline-block;
+  }
+  /* line 115, ../sass/_responsive.scss */
+  .container .aside-wrap .aside ul li > * {
+    display: block;
+    padding: 15px;
+  }
+}
diff --git a/gestioncof/cms/static/cofcms/images/minimenu.svg b/gestioncof/cms/static/cofcms/images/minimenu.svg
new file mode 100644
index 00000000..46a31695
--- /dev/null
+++ b/gestioncof/cms/static/cofcms/images/minimenu.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
+<path fill="none" stroke="#FFFFFF" stroke-width="2" d="M47.062,41.393c0,3.131-2.538,5.669-5.669,5.669H8.608  c-3.131,0-5.669-2.538-5.669-5.669V8.608c0-3.131,2.538-5.669,5.669-5.669h32.785c3.131,0,5.669,2.538,5.669,5.669V41.393z"/>
+<g>
+	<line fill="none" stroke="#FFFFFF" stroke-width="3" x1="10.826" y1="15" x2="40.241" y2="15"/>
+	<line fill="none" stroke="#FFFFFF" stroke-width="3" x1="10.826" y1="25" x2="40.241" y2="25"/>
+	<line fill="none" stroke="#FFFFFF" stroke-width="3" x1="10.826" y1="35" x2="40.241" y2="35"/>
+</g>
+</svg>
\ No newline at end of file
diff --git a/gestioncof/cms/static/cofcms/sass/_colors.scss b/gestioncof/cms/static/cofcms/sass/_colors.scss
index bd93019b..2d295b98 100644
--- a/gestioncof/cms/static/cofcms/sass/_colors.scss
+++ b/gestioncof/cms/static/cofcms/sass/_colors.scss
@@ -1,7 +1,11 @@
-$fond: #f5ffd2;
-$bandeau: #400530;
-$sousbandeau: #5a004f;
-$aside: $sousbandeau;
-$titre: darken($fond, 80%);
-$lien: #3cb3a6;
+$fond: #fefefe;
+$bandeau: #5B0012;
+$sousbandeau: #90001C;
+$aside: #FFC500;
+$titre: $sousbandeau;
+$lien: #CC9500;
 $headerlien: $fond;
+$ombres: darken($aside, 20%);
+
+$bodyfont: "Source Sans Pro", "sans-serif";
+$headfont: "Carter One", "serif";
diff --git a/gestioncof/cms/static/cofcms/sass/_responsive.scss b/gestioncof/cms/static/cofcms/sass/_responsive.scss
new file mode 100644
index 00000000..26e835fd
--- /dev/null
+++ b/gestioncof/cms/static/cofcms/sass/_responsive.scss
@@ -0,0 +1,124 @@
+header .minimenu {
+    display: none;
+}
+
+@media only screen and (max-width: 600px) {
+    header {
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: 10;
+        width: 100%;
+        max-height: 100vh;
+        height: 60px;
+        overflow: hidden;
+        
+        .minimenu {
+            display: block;
+            position: absolute;
+            right: 3px;
+            top: 3px;
+        }
+        
+        section {
+            display: block;
+            nav {
+                display: none;
+            }
+        }
+    }
+
+    header.expanded {
+        overflow: auto;
+        height: auto;
+        
+        nav {
+            display: block;
+            text-align: center;
+            ul {
+                flex-wrap: wrap;
+                justify-content: right;
+                li > * {
+                    padding: 18px;
+                }
+            }
+        }
+    }
+    
+    .container {
+        margin-top: 65px;
+        
+        .content {
+            max-width: unset;
+            margin: 6px;
+
+            section {
+                article {
+                    padding: 10px;
+                }
+                
+                .image {
+                    padding: 0;
+                    margin: 10px -6px;
+                }
+                
+                &.directory article.entry {
+                    width: 100%;
+                    margin-left: 0;
+                }
+            }
+        }
+
+        .aside-wrap + .content {
+            max-width: unset;
+            margin-top: 120px;
+        }
+        
+        .aside-wrap {
+            z-index: 3;
+            top: 60px;
+            position: fixed;
+            width: 100%;
+            margin: 0;
+            height: auto;
+            left: 0;
+
+            .aside {
+                margin: 0;
+                padding: 0;
+                top: 0;
+                position: absolute;
+                
+                & > h2 {
+                    position: relative;
+                    cursor: pointer;
+                    padding: 5px 10px;
+                    &:after {
+                        content: "v";
+                        font-family: $bodyfont;
+                        font-weight: bold;
+                        color: $lien;
+                        position: absolute;
+                        right: 10px;
+                    }
+                }
+                &:not(.expanded) {
+                    .aside-content {
+                        display: none;
+                    }
+                }
+
+                ul {
+                    text-align: center;
+                    li {
+                        display: inline-block;
+                        & > * {
+                            display: block;
+                            padding: 15px;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/gestioncof/cms/static/cofcms/sass/screen.scss b/gestioncof/cms/static/cofcms/sass/screen.scss
index 7a69cf5b..a389822b 100644
--- a/gestioncof/cms/static/cofcms/sass/screen.scss
+++ b/gestioncof/cms/static/cofcms/sass/screen.scss
@@ -15,7 +15,7 @@
 
 body {
     background: $fond;
-    font: 17px "Source Sans Pro", "sans-serif";
+    font: 17px $bodyfont;
 }
 
 header {
@@ -23,7 +23,7 @@ header {
 }
 
 h1, h2 {
-    font-family: "Carter One";
+    font-family: $headfont;
     color: $titre;
 }
 
@@ -109,17 +109,18 @@ article {
         position: absolute;
         top: 30px;
         height: 100%;
-        width: 250px;
+        width: 25%;
+        left: 6px;
         
         .aside {
-            color: #fff;
+            color: #222;
             position: fixed;
             position: sticky;
             top: 5px;
             width: 100%;
             background: $aside;
             padding: 15px;
-            box-shadow: -4px 4px 1px rgba(#000, 0.3);
+            box-shadow: -4px 4px 1px rgba($ombres, 0.3);
 
             h2 {
                 color: #fff;
@@ -129,28 +130,33 @@ article {
                 margin: 0 auto;
                 display: block;
             }
+
+            a {
+                color: darken($lien, 10%);
+            }
         }
     }
-    
+
     .content {
-        max-width: 700px;
+        max-width: 900px;
         margin-left: auto;
-        margin-right: 0;
+        margin-right: 6px;
 
         .intro {
             border-bottom: 3px solid darken($fond, 50%);
-            margin: 20px -10px;
+            margin: 20px 0;
             margin-top: 5px;
             padding: 15px 5px;
-            
         }
         
         
         section {
             article {
                 background: #fff;
-                padding: 30px;
-                box-shadow: -4px 4px 1px rgba(#000, 0.3);
+                padding: 20px 30px;;
+                box-shadow: -4px 4px 1px rgba($ombres, 0.3);
+                border: 1px solid rgba($ombres, 0.1);
+                border-radius: 2px;
                 a {
                     color: $lien;
                 }
@@ -164,25 +170,39 @@ article {
                 margin-top: 25px;
             }
 
+            .image {
+                margin: 15px 0;
+                text-align: center;
+                padding: 20px;
+                
+                img {
+                    max-width: 100%;
+                    height: auto;
+                    box-shadow: -7px 7px 1px rgba($ombres, 0.2);
+                }
+            }
+
             &.directory {
                 article.entry {
                     width: 80%;
                     max-width: 600px;
                     max-height: 100%;
                     position: relative;
-                    padding-right: 120px;
-
+                    margin-left: 6%;
+                    
                     .entry-image {
                         display: block;
-                        position: absolute;
+                        float: right;
                         width: 150px;
                         background: #fff;
-                        box-shadow: -4px 4px 1px rgba(#000, 0.2);
+                        box-shadow: -4px 4px 1px rgba($ombres, 0.2);
+                        border-right: 1px solid rgba($ombres, 0.2);
+                        border-top: 1px solid rgba($ombres, 0.2);
                         padding: 1px;
                         overflow: hidden;
-                        right: 100px;
-                        transform: translateX(90%);
-                        top: -15px;
+                        margin-left: 10px;
+                        margin-bottom: 10px;
+                        transform: translateX(10px);
                         
                         img {
                             width: auto;
@@ -191,6 +211,12 @@ article {
                             max-height: 100%;
                         }
                     }
+
+                    ul.links {
+                        margin-top: 10px;
+                        border-top: 1px solid $sousbandeau;
+                        padding-top: 10px;
+                    }
                 }
             }
 
@@ -208,19 +234,23 @@ article {
                     position: relative;
                     background: none;
                     box-shadow: none;
+                    border: none;
                     max-width: 400px;
                     min-width: 300px;
                     flex: 1;
                     
                     .actu-header {
                         position: relative;
-                        box-shadow: -4px 5px 1px rgba(#000, 0.3);
+                        box-shadow: -4px 5px 1px rgba($ombres, 0.3);
+                        border-right: 1px solid rgba($ombres, 0.2);
+                        border-top: 1px solid rgba($ombres, 0.2);
                         min-height: 180px;
                         padding: 0;
                         margin: 0;
                         overflow: hidden;
                         background-size: cover;
                         background-position: center center;
+                        background-repeat: no-repeat;
                         
                         h2 {
                             position: absolute;
@@ -228,7 +258,7 @@ article {
                             bottom: 0;
                             left: 0;
                             padding: 5px;
-                            text-shadow: 0 0 5px rgba(#000, 0.8);
+                            text-shadow: 0 0 5px rgba($ombres, 0.8);
                             background: linear-gradient(to top, rgba(#000, 0.7), rgba(#000, 0));
                             a {
                                 color: #fff;
@@ -238,7 +268,9 @@ article {
 
                     .actu-misc {
                         background: lighten($fond, 15%);
-                        box-shadow: -2px 2px 1px rgba(#000, 0.2);
+                        box-shadow: -2px 2px 1px rgba($ombres, 0.2);
+                        border: 1px solid rgba($ombres, 0.2);
+                        border-radius: 2px;
                         margin: 0 10px;
                         padding: 15px;
                         padding-top: 5px;
@@ -293,6 +325,10 @@ article {
             }
         }
     }
+
+    .aside-wrap + .content {
+        max-width: 70%;
+    }
 }
 
 .calendar {
@@ -326,8 +362,10 @@ article {
         }
         &.hasevent {
             font-weight: bold;
-            color: $lien;
+            color: darken($lien, 10%);
             font-size: 1em;
         }
     }
 }
+
+@import "_responsive";
diff --git a/gestioncof/cms/templates/cofcms/base.html b/gestioncof/cms/templates/cofcms/base.html
index 05119dbd..056e37ec 100644
--- a/gestioncof/cms/templates/cofcms/base.html
+++ b/gestioncof/cms/templates/cofcms/base.html
@@ -10,9 +10,10 @@
     </head>
 
     <body>
-        <header>
+        <header id="header">
             <section class="top-menu">
                 <h1 class="cof"><a href="/">COF</a></h1>
+                <a class="minimenu" href="javascript:void(0)" onclick="document.getElementById('header').classList.toggle('expanded');"><img src="{% static "cofcms/images/minimenu.svg" %}"></a>
                 <nav>
                     {% flat_menu "cof-nav-ext" template="cofcms/base_nav.html" %}
                 </nav>
diff --git a/gestioncof/cms/templates/cofcms/base_aside.html b/gestioncof/cms/templates/cofcms/base_aside.html
index 49404432..f27d9a06 100644
--- a/gestioncof/cms/templates/cofcms/base_aside.html
+++ b/gestioncof/cms/templates/cofcms/base_aside.html
@@ -2,8 +2,11 @@
 
 {% block superaside %}
     <div class="aside-wrap">
-        <div class="aside">
-            {% block aside %}{% endblock %}
+        <div class="aside" id="aside">
+            <h2 onclick="document.getElementById('aside').classList.toggle('expanded')">{% block aside_title %}{% endblock %}</h2>
+            <div class="aside-content">
+                {% block aside %}{% endblock %}
+            </div>
         </div>
     </div>
 {% endblock %}
diff --git a/gestioncof/cms/templates/cofcms/cof_actu_index_page.html b/gestioncof/cms/templates/cofcms/cof_actu_index_page.html
index ae1a6f8a..fc21dec8 100644
--- a/gestioncof/cms/templates/cofcms/cof_actu_index_page.html
+++ b/gestioncof/cms/templates/cofcms/cof_actu_index_page.html
@@ -1,6 +1,7 @@
 {% extends "cofcms/base_aside.html" %}
 {% load wagtailimages_tags cofcms_tags wagtailcore_tags %}
 
+{% block aside_title %}Calendrier{% endblock %}
 {% block aside %}
     {% calendar %}
 {% endblock %}
diff --git a/gestioncof/cms/templates/cofcms/cof_actu_page.html b/gestioncof/cms/templates/cofcms/cof_actu_page.html
index 3640ece8..7774d07a 100644
--- a/gestioncof/cms/templates/cofcms/cof_actu_page.html
+++ b/gestioncof/cms/templates/cofcms/cof_actu_page.html
@@ -9,7 +9,7 @@
     </section>
 
     <section class="pagecontent">
-        {% image page.image width-700 %}
+        <div class="image">{% image page.image width-700 %}</div>
         <article>
             {{ page.body|safe }}
         </article>
diff --git a/gestioncof/cms/templates/cofcms/cof_directory_page.html b/gestioncof/cms/templates/cofcms/cof_directory_page.html
index 0c0b84da..6ac5491b 100644
--- a/gestioncof/cms/templates/cofcms/cof_directory_page.html
+++ b/gestioncof/cms/templates/cofcms/cof_directory_page.html
@@ -6,8 +6,8 @@
     <script src="{% static "js/jquery.min.js" %}"></script>
     <script src="{% static "cofcms/js/script.js" %}"></script>
 {% endblock %}
+{% block aside_title %}Accès rapide{% endblock %}
 {% block aside %}
-    <h2>Accès rapide</h2>
     <ul>
         {% for entry in page.entries %}
             <li><a href="#{{ entry.slug }}">{{ entry.title }}</a></li>
diff --git a/gestioncof/cms/templates/cofcms/cof_page.html b/gestioncof/cms/templates/cofcms/cof_page.html
index d6e64e56..812ab746 100644
--- a/gestioncof/cms/templates/cofcms/cof_page.html
+++ b/gestioncof/cms/templates/cofcms/cof_page.html
@@ -16,7 +16,9 @@
                     {{ block.value|safe }}
                 </article>
             {% else %}{% if block.block_type == "image" %}
-                {% image block.value width-400 %}
+                <div class="image">
+                    {% image block.value width-800 %}
+                </div>
             {% endif %}{% endif %}{% endif %}
         {% endfor %}
     </section>
diff --git a/gestioncof/cms/templates/cofcms/cof_root_page.html b/gestioncof/cms/templates/cofcms/cof_root_page.html
index 75acc2fa..ec61aa43 100644
--- a/gestioncof/cms/templates/cofcms/cof_root_page.html
+++ b/gestioncof/cms/templates/cofcms/cof_root_page.html
@@ -1,6 +1,7 @@
 {% extends "cofcms/base_aside.html" %}
 {% load static cofcms_tags wagtailimages_tags i18n wagtailcore_tags %}
 
+{% block aside_title %}Agenda{% endblock %}
 {% block aside %}
     {% calendar %}
 {% endblock %}