AAAAAAAAAh cancel last commit

README.md

@@ -25,27 +25,12 @@ Version : Février 2024
   </div>
   <div>
     <h3>Mon projet</h3>
-    <span class="projetAnnee">2024</span>
     <p>La desciption</p>
     <a href="#" class="bouton" target="_blank">Voir le projet</a>
   </div>
 </div>
 ```
 
-### **Structure html des projets vidéo verticaux**
-
-```html
-<div class="projetVertical">
-  <img src="./images/" alt="" />
-  <div>
-    <h3>XXXXXXXX</h3>
-    <p>XXXXXXXXXXX</p>
-    <a href="XXXXXXXXXXX" class="bouton btInvert" target="_blank">Voir la vidéo</a>
-  </div>
-</div>
-```
-
-
 ### **Structure html des photos**
 
 ```html
@@ -56,7 +41,6 @@ Version : Février 2024
 ```
 
 ### **A ajouter dans les iframe Youtube**
-
 ```
 ?showinfo=0&color=white&rel=0
 ```

style.css

@@ -12,7 +12,6 @@ html {
 
 :root {
   --largeur_page: 70vw;
-  --hauteur_header: 80px;
   --color-gray-1: #252627;
   --color-gray-1-hover: #3b3b3b;
 }
@@ -118,10 +117,10 @@ header {
   display: flex;
   align-items: center;
   justify-content: center;
-  height: var(--hauteur_header);
+  height: 80px;
   width: 100%;
   background-color: white;
-  /* padding: 20px 0; */
+  padding: 20px 0;
   z-index: 5;
   box-shadow: 0px 5px 10px 0px rgba(64, 64, 64, 0.51);
 }
@@ -295,7 +294,7 @@ main section {
 }
 
 main section:first-child {
-  padding-top: calc(var(--hauteur_header) + 15px);
+  padding-top: 95px;
 }
 
 /*********************************************************/
@@ -383,98 +382,6 @@ video:fullscreen {
   width: 30%;
 }
 
-/********************** VIDEO **********************/
-.contenuSectionProjetsVertical {
-  width: 100%;
-  position: relative;
-}
-
-.gallerieVertical-container {
-  overflow: hidden;
-  position: relative;
-}
-
-.gallerieVertical-item {
-  /* display: inline-block; */
-  white-space: nowrap;
-  transition: transform 200ms ease-in-out;
-  font-size: 0;
-}
-
-.projetVertical {
-  display: inline-block;
-  position: relative;
-  /* height: 100%; */
-  /* max-width: 300px; */
-  /* width: calc(100% / 4 - 5px); */
-  width: calc((100% - 5px * 3) / 4);
-  aspect-ratio: 9/16;
-  /* font-size: 1rem; */
-}
-
-.projetVertical:not(:last-child) {
-  margin-right: 5px;
-}
-
-.projetVertical img {
-  height: 100%;
-  width: 100%;
-  object-fit: cover;
-}
-
-.projetVertical div {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  /* background-color: rgba(0, 0, 0, 0.8); */
-  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgb(0, 0, 0));
-  opacity: 0;
-  transition: opacity 150ms ease-in-out;
-  color: white;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  /* align-items: center; */
-  /* text-align: center; */
-  white-space: normal;
-  overflow: hidden;
-  /* white-space: nowrap; */
-  text-overflow: ellipsis;
-  /* text-transform: capitalize; */
-  padding: 15px;
-  font-size: 1rem;
-}
-
-.projetVertical div:hover {
-  opacity: 1;
-}
-
-.contenuSectionProjetsVertical .gallerie_nav {
-  --taille-Bouton: 50px;
-  width: var(--taille-Bouton);
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  cursor: pointer;
-  user-select: none;
-  background-color: var(--color-gray-1);
-  border-radius: 100px;
-}
-.contenuSectionProjetsVertical .gallerie_nav:hover {
-  background-color: var(--color-gray-1-hover);
-}
-.contenuSectionProjetsVertical .nav_back {
-  /* left: -25px; */
-  left: calc(var(--taille-Bouton) / 2 * -1);
-  transform: rotate(-90deg) translateX(+50%);
-}
-.contenuSectionProjetsVertical .nav_next {
-  /* right: -25px; */
-  right: calc(var(--taille-Bouton) / 2 * -1);
-  transform: rotate(90deg) translateX(-50%);
-}
 
 /*********************************************************/
 /*                       GALLERIE                        */
@@ -717,7 +624,7 @@ footer p {
 
 @media screen and (max-width: 1250px) {
   :root {
-    --largeur_page: calc(95vw - 30px);
+    --largeur_page: 95vw;
   }
 }
 
@@ -817,10 +724,6 @@ footer p {
   .projet3d .gallerie video {
     width: 100%;
   }
-
-  .projetVertical {
-    width: calc((100% - 5px * 2) / 3);
-  }
 }
 
 @media screen and (max-width: 500px) {
@@ -835,7 +738,6 @@ footer p {
 @media screen and (max-width: 430px) {
   :root {
     --largeur_page: 90vw;
-    --hauteur_header: 60px;
   }
   #a-propos {
     width: 100%;
@@ -847,16 +749,6 @@ footer p {
   h3 {
     font-size: 1.3rem;
   }
-
-  .projetVertical {
-    width: 85%;
-  }
-  .contenuSectionProjetsVertical .gallerie_nav {
-    display: none !important;
-  }
-  .projetVertical div {
-    opacity: 1;
-  }
 }
 @media screen and (max-width: 350px) {
   .contenuSectionApropos div:first-child {