mv cv in its own section

index.html

@@ -48,6 +48,8 @@
 		<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
 		-->
@@ -94,17 +96,33 @@
 				</p>
 			</header>
 
-			<details class="cv margin_top_big">
+			<div class="mouse"><div class="frames mouse_1 pre"></div></div>
-				<summary>
+			<div class="banner banner_size_3 banner_speed_30 grid_full_width margin_bottom_small" aria-label="banner delimitation in ASCII art"></div>
-					<h2 class="close">
+
-						<span class="fr">voir le CV</span>
+		</section>
-						<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>
+		<!--
-					</h2>
+			CV
-				</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 as pdf</a></span>
 				<h2>
@@ -201,7 +219,7 @@
 						<span class="en">Co-management of volunteers in a refugee camp, UTOPIA 56, Grande-Synthe, France, 2016</span>
 					</li>
 				</ul>
-			</details>
+			</article>
 
 			<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,26 +1,11 @@
-.cv {
-	width: auto;
-	max-width: 900px;
-}
-
 .cv {
 	display: flex;
+	flex-direction: column;
+	width: auto;
+	max-width: 900px;
+	margin-bottom: 100px;
 	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;
@@ -28,17 +13,3 @@
 	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: auto auto 1fr;
+	grid-template-rows: 1fr 1fr auto;
 }
 #hero .subtitle {
 	text-align: center;

styles/sections.css

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