Adaptations pour mobiles

style.less

@@ -6,9 +6,6 @@ main {
   grid-auto-flow: dense;
   max-width: 100%;
   grid-row-gap: 80px;
-  @media (max-width: 500px) {
-    grid-template-columns: 1fr;
-  }
 }
 
 .nomElementDossier {
@@ -20,7 +17,58 @@ main {
   max-width: 100%;
 }
 
+footer {
+  color: grey;
+  font-size: 18px;
+  transition: color 0.3s;
+  
+  & a:link {
+    color: grey;
+    text-decoration: underline;
+    transition: color 0.3s;
+    font-size: 20px;
+  }
+
+  &:hover, &:hover a:link {
+    color: white;
+  }
+}
 
+.presentation {
+  text-align: justify;
+  margin-bottom: 50px;
+  margin-left: 15%;
+  margin-right: 15%;
+  font-family: Ubuntu, sans-serif;
+
+  @media (max-width: 1300px) {
+    margin-left: 8%;
+    margin-right: 8%;
+  }
+
+  @media (max-width: 500px) {
+    margin-left: 6%;
+    margin-right: 6%;
+  }
+
+}
+
+blockquote {
+  background-color: #4d4e52;
+  padding: 30px;
+  border-radius: 20px;
+  @media (max-width: 500px) {
+    padding: 25px;
+  }
+}
+.contPremiereImage {
+  text-align: center;
+  margin-bottom: 15px;
+}
+.premiereImage {
+  border: 2px white solid;
+  border-radius: 8px;
+}
 
 
 html {
@@ -30,8 +78,8 @@ html {
 }
 
 .dossier img {
-    border: 2px white solid;
-    border-radius: 8px;
+  border: 2px white solid;
+  border-radius: 8px;
 }
 
 .element a {
@@ -42,16 +90,16 @@ html {
 
 body {
   font-family: sans-serif;
-
+  font-size: 26px;
+  line-height: 1.3;
 }
 
 h6 a, h5 a, h4 a, h3 a, h2 a, h1 a {
   font-family: Times New Roman;
-    text-decoration: none;
+  text-decoration: none;
 }
 
 a {
-
   color: white;
 }
 
@@ -82,27 +130,31 @@ header {
   text-align: center;
 }
 
-
 @media (max-width: 1700px) {
 
   main {
     grid-template-columns: 1fr 1fr 1fr;
-
   }
 
-
-
 }
 
-
 @media (max-width: 1300px) {
 
   main {
     grid-template-columns: 1fr 1fr;
+  }
 
+  h1 {
+    font-size: 100px;
   }
 
+}
 
+@media (max-width: 1000px) {
+
+  h1 {
+    font-size: 80px;
+  }
 
 }
 
@@ -136,8 +188,6 @@ header {
 
   h1 {
     font-size: 60px;
-
-
   }
 
   h2 {