diff --git a/index.html b/index.html
index a92286f..7b05ceb 100644
--- a/index.html
+++ b/index.html
@@ -49,41 +49,40 @@
 		<!--
 			TITLE AREA
 		-->
-<div id="title_area" class="section">
-	<h1 class="visually-hidden">hugo lamy - programmeur informatique</h1>
-	<div id="name" style="gap:10px 30px;" data-flex="horizontal center wrap">
-<pre aria-hidden="true">
+<section id="title_area" class="section">
+	<h1 title="hugo lamy" id="name" class="title" data-flex="horizontal center wrap">
+<p aria-hidden="true" class="pre">
          
                 
            
                
       
-</pre>
-<pre aria-hidden="true">
+</p>
+<p aria-hidden="true" class="pre">
                
               
              
                  
              
-</pre>
-	</div>
-	<div id="title" style="gap:10px 30px;" data-flex="horizontal center wrap">
-<pre aria-hidden="true">
+</p>
+	</h1>
+	<h1 title="programmeur informatique" id="title" class="title" data-flex="horizontal center wrap">
+<p aria-hidden="true" class="pre">
                          
                                          
                            
                                              
                                 
-</pre>
-<pre aria-hidden="true">
+</p>
+<p aria-hidden="true" class="pre">
                          
                                                  
                                        
                                                   
                                  
-</pre>
-	</div>
-</div>
+</p>
+	</h1>
+</section>
 		<!--
 			END TITLE AREA
 		-->
@@ -100,15 +99,15 @@
 			PROJECTS
 		-->
 		<section id="projects" data-flex="vertical stretch" class="section">
-			<div role="heading" aria-level="1" title="projets" data-flex="horizontal parent center wrap">
-<pre aria-hidden="true">
+			<h1 title="projets" data-flex="horizontal parent center wrap">
+<p aria-hidden="true" class="pre">
          
                                 
                      
                                  
                      
-</pre>
-			</div>
+</p>
+			</h1>
 			<h2 data-flex="center">projets réalisés</h2>
 			<figure class="project" id="ljdp" data-flex="vertical parent center stretch">
 				<figcaption class="project_description" data-flex="vertical left">
@@ -142,15 +141,15 @@
 			CV
 		-->
 		<section id="cv" data-flex="vertical parent stretch" class="section">
-			<div role="heading" aria-level="1" title="cv" id="cv_ascii" data-flex="horizontal center wrap">
-<pre aria-hidden="true">
+			<h1 title="cv" id="cv_ascii" data-flex="horizontal center wrap">
+<p aria-hidden="true" class="pre">
      
         
         
         
       
-</pre>
-			</div>
+</p>
+			</h1>
 			<h2 id="cv_download" data-flex="center"><a href="downloads/hugo_lamy_2023_cv.pdf" target="_blank" rel="noopener noreferrer" title="link to a pdf version of this section CV">version pdf</a></h2>
 			<details>
 				<summary>
diff --git a/styles/elements/title.css b/styles/elements/title.css
index e8fd81d..7e8a0c9 100644
--- a/styles/elements/title.css
+++ b/styles/elements/title.css
@@ -5,4 +5,7 @@
 #title {	
 	margin:30px 0px 20px 0px;
 }
+.title {
+	gap:10px 30px;
+}
 
diff --git a/styles/text.css b/styles/text.css
index 2336d38..0f53291 100644
--- a/styles/text.css
+++ b/styles/text.css
@@ -57,7 +57,10 @@ h4 { margin: 20px 0px; font-size: 1.5rem; }
 h5 { margin: 10px 0px; font-size: 1.25rem; }
 h6 { margin: 10px 0px; font-size: 1.0rem; }
 
-pre {
+p.pre {
+	white-space: pre;
+}
+p.pre, pre {
 	line-height: 0.8;
 	font-size: min(2.1vw, 1.0rem);
 }