Push avant modif DIV INFO

public/styles/layout/container.css

@@ -1,11 +1,10 @@
 .container {
-  position: fixed;      
+  position: relative;      
   top: 0;
   left: 0;
   right: 0;
-  background-color: #121212; 
+  /* height: 10000px; */
   padding: 1em;
-  box-shadow: 0 2px 5px rgba(0,0,0,0.5);
   z-index: 1000;        
   display: flex;
   flex-direction: column;

public/styles/layout/ctr-infos.css

@@ -1,5 +1,5 @@
 #downloadStatus {
-    min-height: 1.5em;  /* pour garder la place même vide */
+    min-height: 1.5em;  
     font-weight: bold;
     text-align: center;
     color: #007bff;

public/styles/layout/form.css

@@ -41,4 +41,33 @@ form#downloadForm {
   max-width: 600px;
   width: 100%;
   justify-content: center;
-}
+}
+
+.checkbox-inline {
+  display: flex;
+  align-items: center;
+  align-self: center;
+  gap: 0.5em;
+}
+
+#UrlInput {
+  padding: 0.75em 1em;
+  border-color: #ccc;
+  box-shadow: none;
+  border-radius: 8px;
+  font-size: 1rem;
+  transition: border-color 0.3s ease, box-shadow 0.3s ease;
+  background-color: #f9f9f9;
+  color: #333;
+}
+
+#UrlInput:focus {
+  border-color: #0056b3;
+  box-shadow: 0 0 5px rgba(0,123,255,0.4);
+  outline: none;
+  background-color: #fff;
+}
+
+#UrlInput::placeholder {
+  color: #aaa;
+}

public/styles/layout/header.css

@@ -0,0 +1,11 @@
+header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;  
+    margin-bottom: 2vw;
+}
+
+
+header h1{
+    margin-bottom: 0.2vw;
+}

public/styles/layout/videoinfo.css

@@ -0,0 +1,81 @@
+#videoInfo {
+  margin-top: 20px;
+  max-width: 600px;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 1.5em 2em;
+  background-color: #fff;
+  border-radius: 12px;
+  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
+  color: #222;
+  font-size: 1rem;
+  line-height: 1.5;
+  opacity: 0;
+  max-height: 0;
+  overflow: hidden;
+  transition: opacity 0.5s ease, max-height 0.5s ease;
+  user-select: text;
+  word-wrap: break-word;
+}
+
+#videoInfo.visible {
+  opacity: 1;
+  max-height: 1500px; 
+  overflow: visible;
+}
+
+#videoInfo h3 {
+  font-size: 1.8rem;
+  margin-bottom: 0.6em;
+  color: #007bff;
+  font-weight: 700;
+  word-break: break-word;
+}
+
+#videoInfo img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 10px;
+  margin-bottom: 1em;
+  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+#videoInfo ul {
+  list-style: none;
+  padding-left: 0;
+}
+
+#videoInfo ul li {
+  margin-bottom: 0.5em;
+  font-weight: 500;
+  color: #444;
+}
+
+#videoInfo ul li strong {
+  color: #000;
+}
+
+#videoInfo ul li a {
+  color: #007bff;
+  text-decoration: none;
+}
+
+#videoInfo ul li a:hover,
+#videoInfo ul li a:focus {
+  text-decoration: underline;
+}
+
+/* Responsive */
+@media (max-width: 480px) {
+  #videoInfo {
+    padding: 1em;
+    font-size: 0.9rem;
+  }
+
+  #videoInfo h3 {
+    font-size: 1.4rem;
+  }
+}