reverse last commit to have the cv as a details on top hero section again

index.html

@@ -48,8 +48,6 @@
 		<div id="top_banner" class="banner banner_size_0 banner_speed_50 banner_reverse grid_full_width" aria-label="banner delimitation in ASCII art"></div>
 
 
-
-
 		<!--
 			HERO SECTION
 		-->
@@ -96,35 +94,19 @@
 				</p>
 			</header>
 
-			<div class="mouse"><div class="frames mouse_1 pre"></div></div>
+			<details class="cv margin_top_big">
-			<div class="banner banner_size_3 banner_speed_30 grid_full_width margin_bottom_small" aria-label="banner delimitation in ASCII art"></div>
+				<summary>
-
+					<h2 class="close">
-		</section>
+						<span class="fr">voir le CV</span>
-
+						<span class="en">see the CV</span>
-
+					</h2>
-
+					<h2 class="open">
-
+						<span class="fr">cacher le CV</span>
-		<!--
+						<span class="en">hide the CV</span>
-			CV
+					</h2>
-		-->
+				</summary>
-		<section class="section" id="cv">
-
-			<header>
-				<h1 aria-label="cv" id="cv" class="title">
-<span aria-hidden="true" class="pre">
-     
-        
-        
-        
-      
-</span>
-					</h1>
-				</h1>
-			</header>
-
-			<article class="cv margin_top_big">
 				<span class="fr"><a class="cv_download margin_bottom_big" href="docs/hugo_lamy_cv_2024_fr.pdf" target="_blank" rel="noopener noreferrer" title="link to a pdf version of this section CV">télécharger en pdf</a></span>
-				<span class="en"><a class="cv_download margin_bottom_big" href="docs/hugo_lamy_cv_2024_en.pdf" target="_blank" rel="noopener noreferrer" title="link to a pdf version of this section CV">download in pdf</a></span>
+				<span class="en"><a class="cv_download margin_bottom_big" href="docs/hugo_lamy_cv_2024_en.pdf" target="_blank" rel="noopener noreferrer" title="link to a pdf version of this section CV">download as pdf</a></span>
 				<h2>
 					<span class="fr">COMPÉTENCES</span>
 					<span class="en">SKILLS</span>
@@ -219,7 +201,7 @@
 						<span class="en">Co-management of volunteers in a refugee camp, UTOPIA 56, Grande-Synthe, France, 2016</span>
 					</li>
 				</ul>
-			</article>
+			</details>
 
 			<div class="mouse"><div class="frames mouse_1 pre"></div></div>
 			<div class="banner banner_size_3 banner_speed_30 grid_full_width margin_bottom_small" aria-label="banner delimitation in ASCII art"></div>

styles/elements/cv.css

@@ -1,11 +1,26 @@
 .cv {
-	display: flex;
-	flex-direction: column;
 	width: auto;
 	max-width: 900px;
-	margin-bottom: 100px;
+}
+
+.cv {
+	display: flex;
 	text-align: left;
 }
+.cv summary {
+	position: relative;
+	list-style-position: outside;
+	list-style-type: "▸ ";
+	font-size: 1.8rem;
+	margin: auto;
+	width: fit-content;
+}
+.cv summary .open {
+	display: none;
+}
+.cv summary .close {
+	display: inline;
+}
 
 .cv .cv_download {
 	display: inline-block;
@@ -13,3 +28,17 @@
 	margin-top: 30px;
 	text-align: center;
 }
+
+.cv[open] summary {
+	list-style-type: "▾ ";
+}
+.cv[open] summary .open {
+	display: inline;
+}
+.cv[open] summary .close {
+	display: none;
+}
+
+.cv > *:last-child {
+	margin-bottom: 100px;
+}

styles/elements/hero.css

@@ -8,7 +8,7 @@
 	*
 	grid-template-rows: 1fr auto 1fr;
 	*/
-	grid-template-rows: 1fr 1fr auto;
+	grid-template-rows: auto auto 1fr;
 }
 #hero .subtitle {
 	text-align: center;

styles/sections.css

@@ -1,6 +1,5 @@
 section {
 	display: grid;
-	position: relative;
 	margin: 0px;
 	width: 100vw;
 	grid-template-columns: auto auto auto;