1 files changed, 66 insertions, 13 deletions

diff --git a/public/discographie.css b/public/discographie.css
index f2e9a5b..b4c3d51 100644
--- a/public/discographie.css
+++ b/public/discographie.css
@@ -14,6 +14,8 @@ aside
     font-family: 'Monospace';
     /*margin-right: 10px;*/
     /*position: absolute;*/
+    position: relative;
+    bottom: 30px;
 }
 
 aside div
@@ -29,7 +31,9 @@ aside div
     font-weight: bold;
     /*text-decoration: underline;*/
     /*border: 1px red solid;*/
-    margin: 13px 0 0 0;
+    margin: 0px;
+    /*position: relative;
+    bottom: 45px;*/
 }
 
 #chronologie
@@ -41,6 +45,7 @@ aside div
     z-index: 1; /* placer le menu déroulant au dessus */
     /*background-color: #9fa8d0;*/
     background-color: #a4afd4;
+    border: 2px #3d4c9d solid;
 }
 
 #chronologie p
@@ -90,7 +95,7 @@ section
 
 h3
 {
-    margin-top: 45px;
+    /*margin-top: 45px;*/
 }
 
 form p
@@ -115,12 +120,24 @@ input
     border: 4px black groove;
 }
 
+#articles
+{
+    display: flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
+    align-items: flex-end;
+}
+
 article
 {
         margin: 5px 0px;
-    width: 45%;
+    width: 32%;
     /*min-width: 300px;*/
 }
+.articleAvecEditeur
+{
+    width: 100%;
+}
 
 .vignette
 {
@@ -148,7 +165,11 @@ a
     /*border: 2px white solid;*/
 }
 
-article a:hover
+.articleSansEditeur a
+{
+    border: 2px white solid;
+}
+.articleSansEditeur a:hover
 {
         border: 2px blue solid;
 }
@@ -158,6 +179,24 @@ a:hover figure figcaption
         text-decoration: underline;
 }
 
+.articleSansEditeur p
+{
+    /*border: 1px black solid;*/
+    text-align: center;
+    margin-top: 0px;
+}
+
+.articleSansEditeur img
+{
+    vertical-align: middle;
+}
+
+/* image dans le formulaire */
+.imageFormulaire
+{
+    float: right;
+    max-width: 25%;
+}
 
 /* page dédiée à un album */
 #albumHTML
@@ -181,8 +220,8 @@ a:hover figure figcaption
 
     #contenu
     {
-        position: relative;
-        bottom: 35px;
+        /*position: relative;*/
+        /*bottom: 35px;*/
     }
 
     #albumHTML
@@ -204,8 +243,8 @@ a:hover figure figcaption
 
     #contenu
     {
-        position: relative;
-        bottom: 24px;
+        /*position: relative;
+        bottom: 24px;*/
     }
 
     #albumHTML
@@ -213,6 +252,10 @@ a:hover figure figcaption
         /* annuler le positionnement du contenu */
         margin-top: 42px;
     }
+    article
+    {
+        width: 40%;
+    }
 }
 
 @media screen and (max-width: 479px)
@@ -235,22 +278,28 @@ a:hover figure figcaption
         width: 320px;
     }
 
-    #chronologie
+    #bouton_chronologie
     {
-        display: flex;
+        width: 130px;
+        font-size: initial; /* 150% est plus petit que "normal" */
+        padding-top: 5px;
+    }
 
+    #chronologie
+    {
+        /*display: flex;*/
     }
 
     #chronologie p
     {
-        max-width: 80px;
-        margin: 2px;
+        /*max-width: 80px;*/
+        margin: 5px;
     }
 
     #contenu
     {
         /*position: relative;*/
-        bottom: 15px;
+       /* bottom: 15px;*/
     }
 
     #albumHTML
@@ -258,4 +307,8 @@ a:hover figure figcaption
         /* annuler le positionnement du contenu */
         margin-top: 32px;
     }
+    article
+    {
+        width: 48%;
+    }
 }