diff --git a/outline.txt b/outline.txt
new file mode 100644
index 0000000..84805f3
--- /dev/null
+++ b/outline.txt
@@ -0,0 +1,208 @@
+Fonts: Poppins, Arial Narrow?/Arial?
+Couleurs:
+#394596;  /*Bleu AGECEM*/
+#E5E5E5; /*Gris pâle*/
+#8A8A8A; /*Gris foncé*/
+#FFF; /*Blanc pur*/
+#000; /*Noir pur*/
+
+Couleurs (Light Mode): 
+#394596;  /*Bleu AGECEM*/
+Couleurs (Dark Mode): 
+
+div.wrapper{
+    width: 1420px;
+    margin: 0 auto;
+}
+
+/*tête de page*/
+
+header.entete{
+
+}
+ul.enteteMenu{
+    font-family: Poppins;
+    font-weight: 400; /*regular*/ 
+    font-size: 1.25rem; /*20px*/
+    color: #000;  /*Noir pur*/
+    display: flex;
+    flex-flow: row;
+    justify-content: start;
+    align-items: center;
+}
+li.enteteMenuElement{
+
+}
+li.enteteMenuElement:hover{
+border-bottom: 5px #FF563C solid; /*Orange Highlight*/
+cursor: pointer;
+}
+ul.enteteSousMenu{
+    font-family: Poppins;
+    font-weight: 400; /*regular*/ 
+    font-size: 1.125rem; /*18px*/
+    display: flex;
+    flex-flow: column;
+    justify-content: start;
+    align-items: center;
+}
+li.enteteSousMenuElement{
+    background-color: #D8D8D8 /*gris pâle*/;
+    color: #000;  /*Noir pur*/
+}
+li.enteteSousMenuElement:hover{
+    background-color: #FF563C /*gris pâle*/;
+    color: #FFF;  /*Blanc pur*/
+    cursor: pointer;
+}
+
+---/*page*/---
+/*titres*/
+h1.titre1Page{
+    font-family: Poppins;
+    font-weight: 600; /*semi-bold*/ 
+    font-size: 6rem; /*96px*/
+    color: #394596;  /*Bleu AGECEM*/
+    }
+h2.titre2Page{
+    font-family: Poppins;
+    font-weight: 600; /*semi-bold*/ 
+    font-size: 1.5rem; /*24px*/
+    color: #394596; /*Bleu AGECEM*/   
+    }
+div.h3Background{
+    background-color: #394596;  /*Bleu AGECEM*/
+    width: 100%; /*largeur complète du wrapper*/
+    height: 80px;
+    display: flex;
+    flex-flow: wrap row;
+    align-content: center;
+    justify-content: center;
+    text-align: center
+    }
+h3.h3Page{
+    font-family: Poppins;
+    font-weight: 600; /*semi-bold*/ 
+    font-size: 2.25rem; /*36px*/
+    color: #FFF; /*Blanc pur*/
+    }
+.reglementNom{
+    font-family: Poppins;
+    font-weight: 600; /*semi-bold*/
+    font-size: 3rem; /*48px*/
+    color: #394596; /*Bleu AGECEM*/
+    } 
+.reglementDesc{
+    font-family: Poppins;
+    font-weight: 500; /*medium*/
+    font-size: 1.5rem /*24px*/;
+    color: #394596; /*Bleu AGECEM*/
+    } 
+.politiqueNom{
+    font-family: Poppins;
+    font-weight: 600; /*semi-bold*/
+    font-size: 3rem; /*48px*/
+    color: #394596; /*Bleu AGECEM*/
+    } 
+.politiqueNom{
+    font-family: Poppins;
+    font-weight: 500; /*medium*/
+    font-size: 2.25rem;  /*36px*/
+    color: #394596; /*Bleu AGECEM*/
+    } 
+/*page*/
+
+
+/*article*/
+/*titres*/
+h1.h1Article{
+    font-family: Poppins;
+    font-weight: 600; /*semi-bold*/
+    font-size: 6rem;/*96px*/
+    color: #394596; /*Bleu AGECEM*/
+    }
+
+
+.grilleArticleTitre{
+    font-family: Poppins;
+    font-weight: 600; /*semi-bold*/
+    font-size: 1.5rem /*24px*/;
+    color: #394596; /*Bleu AGECEM*/
+    line-height: 115%;
+}
+.grilleArticleTitre.vacant{
+    font-family: Poppins;
+    font-weight: 600; /*semi-bold*/
+    font-size: 1.5rem /*24px*/;
+    color: #8A8A8A; /*Gris foncé*/
+}
+.grilleArticleSousTitre{
+    font-family: Poppins;
+    font-weight: 400; /*regular*/
+    font-size: 1.125rem /*18px*/;
+    color: #394596; /*Bleu AGECEM*/
+    line-height: 115%;
+}
+.grilleArticleDesc{
+    font-family: Poppins;
+    font-weight: 300; /*light*/
+    font-size: 0.875rem /*14px*/;
+    color: #505050; /*Gris foncé*/
+    line-height: 150%;
+}
+.grilleArticleLien{
+    font-family: Poppins;
+    font-weight: 300; /*light*/
+    font-size: 1.125rem /*18px*/;
+    color: #FF563C; /*Orange Highlight*/
+}
+
+/*FAQ*/
+div.questionEtReponse{
+display: grid;
+}
+
+div.question{
+border-left: 5px #FF563C solid; /*Orange Highlight*/
+background-color: #E5E5E5 /*Gris pâle*/
+}
+p.questionQ{
+    font-family: Poppins;
+    font-weight: 300; /*light*/
+    font-size: 6rem /*96px*/;
+    color: #FF563C; /*Orange Highlight*/
+}
+p.questionTexte{
+    font-family: Poppins;
+    font-weight: 600; /*semi-bold*/
+    font-size: 2.25rem;  /*36px*/
+    color: #000; /*Noir pur*/
+    line-height: 150%;
+}
+
+div.reponse{
+border-left: 5px #8A8A8A solid; /*Gris foncé*/
+background-color: #FFF /*Blanc pur*/
+}
+p.reponseR{
+    font-family: Poppins;
+    font-weight: 300; /*light*/
+    font-size: 6rem /*96px*/;
+    color: #8A8A8A; /*Gris foncé*/
+}
+p.reponseTexte{
+    font-family: Poppins;
+    font-weight: 600; /*semi-bold*/
+    font-size: 2.25rem;  /*36px*/
+    color: #000; /*Noir pur*/
+    line-height: 150%;
+}
+
+/*FAQ*/
+
+
+
+/*pied de page*/
+
+
+
diff --git a/public/css/general.css b/public/css/general.css
index a7d9465..84ffca7 100644
--- a/public/css/general.css
+++ b/public/css/general.css
@@ -2,28 +2,32 @@ h1 {
     text-align: center;
 }
 
-ul.enteteMenu{
+.header{
+    width: 100%;
+}
+
+.enteteMenu{
     font-family: Poppins;
     font-weight: 400; /*regular*/ 
     font-size: 1.25rem; /*20px*/
     color: #000;  /*Noir pur*/
     display: flex;
     flex-flow: row;
-    justify-content: start;
+    justify-content: space-around;
     align-items: center;
 }
-li.enteteMenuElement:hover{
+.enteteMenuElement:hover{
 border-bottom: 5px #FF563C solid; /*Orange Highlight*/
 cursor: pointer;
 }
 
-h1.titre1Page{
+.titre1Page{
     font-family: Poppins;
     font-weight: 600; /*semi-bold*/ 
     font-size: 6rem; /*96px*/
     color: #394596;  /*Bleu AGECEM*/
     }
-h2.titre2Page{
+.titre2Page{
     font-family: Poppins;
     font-weight: 600; /*semi-bold*/ 
     font-size: 1.5rem; /*24px*/
diff --git a/templates/html/header.gohtml b/templates/html/header.gohtml
index bca02bb..0c938e0 100644
--- a/templates/html/header.gohtml
+++ b/templates/html/header.gohtml
@@ -1,14 +1,15 @@
 {{ define "header-html" }}
 
-<ul class="enteteMenu">
-    <li class="enteteMenuElement"><a href="/">index</a></li>
-    <li class="enteteMenuElement"><a href="/a-propos">À propos</a></li>
-    <li class="enteteMenuElement"><a href="/actualite">Actualité</a></li>
-    <li class="enteteMenuElement"><a href="/vie-etudiante">Vie étudiante</a></li>
-    <li class="enteteMenuElement"><a href="/documentation">Documentation</a></li>
-    <li class="enteteMenuElement"><a href="/formulaires">Formulaires</a></li>
-</ul>
-
+<div class="header">   
+    <ul class="enteteMenu">
+        <li class="enteteMenuElement"><a href="/">index</a></li>
+        <li class="enteteMenuElement"><a href="/a-propos">À propos</a></li>
+        <li class="enteteMenuElement"><a href="/actualite">Actualité</a></li>
+        <li class="enteteMenuElement"><a href="/vie-etudiante">Vie étudiante</a></li>
+        <li class="enteteMenuElement"><a href="/documentation">Documentation</a></li>
+        <li class="enteteMenuElement"><a href="/formulaires">Formulaires</a></li>
+    </ul>
+</div>
 <ul>
     <li><a href="/admin">admin</a></li>
 </ul>