diff --git a/public/assets/images/devise.svg b/public/assets/images/devise.svg
new file mode 100644
index 0000000..77d9df4
--- /dev/null
+++ b/public/assets/images/devise.svg
@@ -0,0 +1,5 @@
+
\ No newline at end of file
diff --git a/public/assets/images/logo-eidas.png b/public/assets/images/logo-eidas.png
new file mode 100644
index 0000000..f985fd4
Binary files /dev/null and b/public/assets/images/logo-eidas.png differ
diff --git a/public/assets/images/marianne.svg b/public/assets/images/marianne.svg
new file mode 100644
index 0000000..6f2760e
--- /dev/null
+++ b/public/assets/images/marianne.svg
@@ -0,0 +1,6 @@
+
\ No newline at end of file
diff --git a/public/assets/styles/commun.css b/public/assets/styles/commun.css
index 57368ab..1756367 100644
--- a/public/assets/styles/commun.css
+++ b/public/assets/styles/commun.css
@@ -1,3 +1,99 @@
+html {
+ height: 100%;
+}
+
body {
+ display: flex;
+ flex-direction: column;
+
+ height: 100%;
+ margin: 0;
font-family: 'Marianne';
}
+
+header, main, footer {
+ padding: 2em;
+}
+
+header, footer .logos {
+ display: flex;
+ align-items: center;
+ column-gap: 1.2em;
+}
+
+header {
+ box-shadow: 0px 3px 10px #bbb;
+}
+
+main {
+ flex-grow: 1;
+ margin: 3em 0 5em;
+}
+
+footer {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ border-top: 2px solid #02b
+}
+
+footer ul {
+ display: flex;
+ column-gap: 3em;
+ font-size: 0.6em;
+}
+
+footer li {
+ list-style-type: none;
+}
+
+footer a {
+ text-decoration: none;
+ font-weight: bold;
+ color: black;
+}
+
+.bloc-eidas a {
+ display: flex;
+ align-items: center;
+ column-gap: .2em;
+
+ text-decoration: none;
+}
+
+.devise, .logo-eidas, .marianne {
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+
+.marianne {
+ height: .75em;
+
+ background-image: url(/statique/assets/images/marianne.svg);
+}
+
+.republique-francaise {
+ padding: .1em 0;
+ font-size: .7em;
+ font-weight: bold;
+ line-height: 1em;
+}
+
+.devise {
+ height: 1.25em;
+
+ background-image: url(/statique/assets/images/devise.svg);
+}
+
+.logo-eidas {
+ width: 2.5em;
+ height: 2.5em;
+ background-image: url(/statique/assets/images/logo-eidas.png);
+}
+
+.titre-eidas {
+ color: #779;
+ font-size: .7em;
+ font-weight: bold;
+}
diff --git a/src/vues/base.pug b/src/vues/base.pug
index 4b90d6a..3eaecb6 100644
--- a/src/vues/base.pug
+++ b/src/vues/base.pug
@@ -1,4 +1,5 @@
doctype html
+
html(lang = 'fr', xml:lang = 'fr', xmlns = 'http://www.w3.org/1999/xhtml')
head
meta(charset='UTF-8')
@@ -8,4 +9,32 @@ html(lang = 'fr', xml:lang = 'fr', xmlns = 'http://www.w3.org/1999/xhtml')
link(rel='stylesheet', href='/statique/assets/styles/fontes.css')
block styles
- block page
+ body
+ header
+ .bloc-marque
+ .marianne
+ .republique-francaise RÉPUBLIQUE
FRANÇAISE
+ .devise
+ .bloc-eidas
+ a(href='https://eidas.ec.europa.eu/', target='_blank')
+ .logo-eidas
+ .titre-eidas European
digital ID
+
+ main
+ block page
+
+ footer
+ .logos
+ .bloc-marque
+ .marianne
+ .republique-francaise RÉPUBLIQUE
FRANÇAISE
+ .devise
+ .bloc-eidas
+ a(href='https://eidas.ec.europa.eu/', target='_blank')
+ .logo-eidas
+ .titre-eidas European
digital ID
+ ul
+ li: a(href='https://agentconnect.gouv.fr', target='_blank') agentconnect.gouv.fr
+ li: a(href='https://gouvernement.fr', target='_blank') gouvernement.fr
+ li: a(href='https://service-public.fr', target='_blank') service-public.fr
+ li: a(href='https://data.gouv.fr', target='_blank') data.gouv.fr