diff --git a/homepage/css/main.css b/homepage/css/main.css
index 4151405..f0a03f3 100755
--- a/homepage/css/main.css
+++ b/homepage/css/main.css
@@ -1,305 +1,867 @@
-/* =========================================================
-   RESET + VARIABLES
-   ========================================================= */
+@charset "UTF-8";
+@import url(font-awesome.min.css);
+@import url(source-sans-pro.css);
+@import url(weather-icons.min.css);
 
-:root {
-  /* Couleurs */
-  --color-bg: #ffffff;
-  --color-text: #797979;
-  --color-dark: #797979;
-  --color-border: #c8cccf;
-  --color-accent: #ff7496;
+/*
+	Identity by HTML5 UP
+	html5up.net | @ajlkn
+	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+*/
 
-  /* Fond décoratif */
-  --overlay-image: url("../images/overlay.png");
-  --overlay-gradient: linear-gradient(
-    60deg,
-    rgba(255, 165, 150, 0.5) 5%,
-    rgba(0, 228, 255, 0.35)
-  );
+/* Reset */
 
-  /* Typo */
-  --font-main: "Source Sans Pro", Helvetica, sans-serif;
-  --font-size-base: 14pt;
-  --font-letter: 0.2em;
+	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
+		margin: 0;
+		padding: 0;
+		border: 0;
+		font-size: 100%;
+		font: inherit;
+		vertical-align: baseline;
+	}
 
-  /* Spacing / Radius */
-  --radius: 4px;
+	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
+		display: block;
+	}
 
-  /* Animation */
-  --transition: 0.25s ease;
-}
+	body {
+		line-height: 1;
+	}
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-bg: #0e1214;
-    --color-text: #dbe2e6;
-    --color-dark: #ffffff;
-    --color-border: #4a5054;
-    --overlay-gradient: linear-gradient(
-      60deg,
-      rgba(255, 165, 150, 0.15) 5%,
-      rgba(0, 228, 255, 0.15)
-    );
-  }
-}
+	ol, ul {
+		list-style: none;
+	}
 
-/* Reset minimaliste modernisé */
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
+	blockquote, q {
+		quotes: none;
+	}
 
-img {
-  max-width: 100%;
-  display: block;
-}
+	blockquote:before, blockquote:after, q:before, q:after {
+		content: '';
+		content: none;
+	}
 
-html, body {
-  height: 100%;
-  scroll-behavior: smooth;
-}
+	table {
+		border-collapse: collapse;
+		border-spacing: 0;
+	}
 
-/* =========================================================
-   BASE
-   ========================================================= */
+	body {
+		-webkit-text-size-adjust: none;
+	}
 
-body {
-  font-family: var(--font-main);
-  font-size: var(--font-size-base);
-  letter-spacing: var(--font-letter);
-  color: var(--color-text);
-  background:
-    var(--overlay-image),
-    var(--overlay-gradient);
-  background-size: 100px 100px, cover;
-  background-repeat: repeat, no-repeat;
-  background-attachment: fixed;
-  line-height: 1.9;
-  text-transform: uppercase;
-  transition: background-color var(--transition), color var(--transition);
-}
+	input {
+		border:none;
+		font-size: 1.85em;
+		letter-spacing: 0.22em;
+		margin: 0 0 0.525em 0;
+		text-align: center;
+	}
 
-a {
-  text-decoration: none;
-  color: inherit;
-  transition: color var(--transition);
-}
+/* Box Model */
 
-a:hover {
-  color: var(--color-accent);
-}
+	*, *:before, *:after {
+		-moz-box-sizing: border-box;
+		-webkit-box-sizing: border-box;
+		box-sizing: border-box;
+	}
 
-/* =========================================================
-   TITRES
-   ========================================================= */
+/* Basic */
 
-h1, h2, h3, h4, h5 {
-  color: var(--color-dark);
-  line-height: 1.4;
-  margin-bottom: 0.6em;
-}
+	@media screen and (max-width: 480px) {
 
-h1 {
-  font-size: 1.9rem;
-}
+		html, body {
+			min-width: 320px;
+		}
 
-h2 { font-size: 1.4rem; }
-h3, h4, h5 { font-size: 1.1rem; }
+	}
 
-/* Mobile */
-@media (max-width: 480px) {
-  h1 { font-size: 1.6rem; }
-}
+	body.is-loading *, body.is-loading *:before, body.is-loading *:after {
+		-moz-animation: none !important;
+		-webkit-animation: none !important;
+		-ms-animation: none !important;
+		animation: none !important;
+		-moz-transition: none !important;
+		-webkit-transition: none !important;
+		-ms-transition: none !important;
+		transition: none !important;
+	}
 
-/* =========================================================
-   FORMULAIRES
-   ========================================================= */
+	html {
+		height: 100%;
+	}
 
-input,
-select,
-textarea {
-  width: 100%;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius);
-  background: transparent;
-  padding: 0.7em 1em;
-  color: var(--color-text);
-  outline: none;
-  transition: border-color var(--transition);
-  text-transform: none; /* meilleure lisibilité */
-}
+	body {
+		height: 100%;
+		background-color: #ffffff;
+		background-image: url("../images/overlay.png"), -moz-linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35));
+		background-image: url("../images/overlay.png"), -webkit-linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35));
+		background-image: url("../images/overlay.png"), -ms-linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35));
+		background-image: url("../images/overlay.png"), linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35));
+		background-repeat: repeat,			no-repeat,			no-repeat;
+		background-size: 100px 100px, cover,				cover;
+		background-position: top left,		center center,		bottom center;
+		background-attachment: fixed,			fixed,				fixed;
+	}
 
-input[type="text"],
-select {
-  height: 4em;
-  text-align: center;
-  letter-spacing: 0.22em;
-}
+		body:after {
+			content: '';
+			display: block;
+			position: fixed;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: inherit;
+			opacity: 0;
+			z-index: 1;
+			background-color: #ffffff;
+			background-image: url("../images/overlay.png"), -moz-linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35));
+			background-image: url("../images/overlay.png"), -webkit-linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35));
+			background-image: url("../images/overlay.png"), -ms-linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35));
+			background-image: url("../images/overlay.png"), linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35));
+			background-repeat: repeat,			no-repeat;
+			background-size: 100px 100px, cover;
+			background-position: top left,		center center;
+			-moz-transition: opacity 1.75s ease-out;
+			-webkit-transition: opacity 1.75s ease-out;
+			-ms-transition: opacity 1.75s ease-out;
+			transition: opacity 1.75s ease-out;
+		}
 
-input:focus,
-select:focus,
-textarea:focus {
-  border-color: var(--color-accent);
-}
+		body.is-loading:after {
+			opacity: 1;
+		}
 
-::placeholder {
-  color: #616f77;
-  opacity: 1;
-}
+/* Type */
 
-/* =========================================================
-   BOUTONS
-   ========================================================= */
+	body, input, select, textarea {
+		color: #414f57;
+		font-family: "Source Sans Pro", Helvetica, sans-serif;
+		font-size: 14pt;
+		font-weight: 300;
+		line-height: 2;
+		letter-spacing: 0.2em;
+		text-transform: uppercase;
+	}
 
-button,
-.button,
-input[type="submit"],
-input[type="button"] {
-  display: inline-block;
-  padding: 0.75em 1.5em;
-  background: transparent;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius);
-  color: var(--color-text);
-  cursor: pointer;
-  transition: all var(--transition);
-  text-transform: uppercase;
-}
+		@media screen and (max-width: 1680px) {
 
-button:hover,
-.button:hover,
-input[type="submit"]:hover {
-  border-color: var(--color-accent);
-  color: var(--color-accent);
-}
+			body, input, select, textarea {
+				font-size: 11pt;
+			}
 
-/* =========================================================
-   LISTES D’ICÔNES
-   ========================================================= */
+		}
 
-/* =========================================================
-   LISTES D’ICÔNES (ICÔNES SEULES)
-   ========================================================= */
+		@media screen and (max-width: 480px) {
 
-ul.icons {
-  list-style: none;
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-  gap: 1em;
-  padding: 0;
-  margin: 1.2em 0;
-}
+			body, input, select, textarea {
+				font-size: 10pt;
+				line-height: 1.75;
+			}
 
-ul.icons li {
-  margin: 0;
-}
+		}
 
-ul.icons a {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 3.2em;
-  height: 3.2em;
-  border-radius: 50%;
-  border: 1px solid var(--color-border);
-  color: var(--color-dark);
-  font-size: 1.3rem;
-  transition: all var(--transition);
-  text-decoration: none;
-}
+	a {
+		-moz-transition: color 0.2s ease, border-color 0.2s ease;
+		-webkit-transition: color 0.2s ease, border-color 0.2s ease;
+		-ms-transition: color 0.2s ease, border-color 0.2s ease;
+		transition: color 0.2s ease, border-color 0.2s ease;
+		color: inherit;
+		text-decoration: none;
+	}
 
-ul.icons a:hover {
-  border-color: var(--color-accent);
-  color: var(--color-accent);
-  transform: scale(1.1);
-}
+		a:before {
+			-moz-transition: color 0.2s ease, text-shadow 0.2s ease;
+			-webkit-transition: color 0.2s ease, text-shadow 0.2s ease;
+			-ms-transition: color 0.2s ease, text-shadow 0.2s ease;
+			transition: color 0.2s ease, text-shadow 0.2s ease;
+		}
 
-/* Mobile */
-@media (max-width: 480px) {
-  ul.icons a {
-    width: 2.6em;
-    height: 2.6em;
-    font-size: 1.1rem;
-  }
-}
+		a:hover {
+			color: #ff7496;
+		}
 
-/* =========================================================
-   LAYOUT : WRAPPER
-   ========================================================= */
+	strong, b {
+		color: #313f47;
+	}
 
-#wrapper {
-  min-height: 100%;
-  padding: 2em;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  perspective: 1000px;
-}
+	em, i {
+		font-style: italic;
+	}
 
-@media (max-width: 360px) {
-  #wrapper { padding: 1em; }
-}
+	p {
+		margin: 0 0 1.5em 0;
+	}
 
-/* =========================================================
-   MAIN CARD
-   ========================================================= */
+	h1, h2, h3, h4, h5, h6 {
+		color: #313f47;
+		line-height: 1.5;
+		margin: 0 0 0.75em 0;
+	}
 
-#main {
-  background: var(--color-bg);
-  border-radius: var(--radius);
-  padding: 2.5em;
-  max-width: 600px;
-  width: 100%;
-  text-align: center;
-  opacity: 0.97;
-  transition: opacity 0.6s ease, transform 0.6s ease;
-}
+		h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
+			color: inherit;
+			text-decoration: none;
+		}
 
-#main .avatar img {
-  margin: 0 auto 1.2em;
-  border-radius: 50%;
-  box-shadow: 0 0 0 0.25em var(--color-bg);
-}
+	h1 {
+		font-size: 1.85em;
+		letter-spacing: 0.22em;
+		margin: 0 0 0.525em 0;
+	}
 
-/* Animation au chargement */
-body.is-loading #main {
-  opacity: 0;
-  transform: translateY(20px);
-}
+	h2 {
+		font-size: 1.25em;
+	}
 
-/* Mobile */
-@media (max-width: 480px) {
-  #main {
-    padding: 2em;
-  }
-}
+	h3 {
+		font-size: 1em;
+	}
 
-/* =========================================================
-   FOOTER
-   ========================================================= */
+	h4 {
+		font-size: 1em;
+	}
 
-#footer {
-  width: 100%;
-  text-align: center;
-  margin-top: 2em;
-  opacity: 0.8;
-}
+	h5 {
+		font-size: 1em;
+	}
 
-#footer .copyleft {
-  font-size: 0.75rem;
-  list-style: none;
-  display: flex;
-  gap: 1em;
-  justify-content: center;
-}
+	h6 {
+		font-size: 1em;
+	}
 
-#footer .copyleft span {
-  display: inline-block;
-  transform: rotate(180deg);
-}
+	@media screen and (max-width: 480px) {
+
+		h1 {
+			font-size: 1.65em;
+		}
+
+	}
+
+	sub {
+		font-size: 0.8em;
+		position: relative;
+		top: 0.5em;
+	}
+
+	sup {
+		font-size: 0.8em;
+		position: relative;
+		top: -0.5em;
+	}
+
+	hr {
+		border: 0;
+		border-bottom: solid 1px #c8cccf;
+		margin: 3em 0;
+	}
+
+/* Form */
+
+	form {
+		margin: 0 0 1.5em 0;
+	}
+
+		form > .field {
+			margin: 0 0 1.5em 0;
+		}
+
+			form > .field > :last-child {
+				margin-bottom: 0;
+			}
+
+	label {
+		color: #313f47;
+		display: block;
+		font-size: 0.9em;
+		margin: 0 0 0.75em 0;
+	}
+
+	input[type="text"],
+	input[type="password"],
+	input[type="email"],
+	input[type="tel"],
+	select,
+	textarea {
+		-moz-appearance: none;
+		-webkit-appearance: none;
+		-ms-appearance: none;
+		appearance: none;
+		border-radius: 4px;
+		border: solid 1px #c8cccf;
+		color: inherit;
+		display: block;
+		outline: 0;
+		padding: 0 1em;
+		text-decoration: none;
+		width: 100%;
+	}
+
+		input[type="text"]:invalid,
+		input[type="password"]:invalid,
+		input[type="email"]:invalid,
+		input[type="tel"]:invalid,
+		select:invalid,
+		textarea:invalid {
+			box-shadow: none;
+		}
+
+		input[type="text"]:focus,
+		input[type="password"]:focus,
+		input[type="email"]:focus,
+		input[type="tel"]:focus,
+		select:focus,
+		textarea:focus {
+			border-color: #ff7496;
+		}
+
+	.select-wrapper {
+		text-decoration: none;
+		display: block;
+		position: relative;
+	}
+
+		.select-wrapper:before {
+			content: "";
+			-moz-osx-font-smoothing: grayscale;
+			-webkit-font-smoothing: antialiased;
+			font-family: FontAwesome;
+			font-style: normal;
+			font-weight: normal;
+			text-transform: none !important;
+		}
+
+		.select-wrapper:before {
+			color: #c8cccf;
+			display: block;
+			height: 2.75em;
+			line-height: 2.75em;
+			pointer-events: none;
+			position: absolute;
+			right: 0;
+			text-align: center;
+			top: 0;
+			width: 2.75em;
+		}
+
+		.select-wrapper select::-ms-expand {
+			display: none;
+		}
+
+	input[type="text"],
+	input[type="password"],
+	input[type="email"],
+	select {
+		height: 2.75em;
+	}
+
+	textarea {
+		padding: 0.75em 1em;
+	}
+
+	input[type="checkbox"],
+	input[type="radio"] {
+		-moz-appearance: none;
+		-webkit-appearance: none;
+		-ms-appearance: none;
+		appearance: none;
+		display: block;
+		float: left;
+		margin-right: -2em;
+		opacity: 0;
+		width: 1em;
+		z-index: -1;
+	}
+
+		input[type="checkbox"] + label,
+		input[type="radio"] + label {
+			text-decoration: none;
+			color: #414f57;
+			cursor: pointer;
+			display: inline-block;
+			font-size: 1em;
+			font-weight: 300;
+			padding-left: 2.4em;
+			padding-right: 0.75em;
+			position: relative;
+		}
+
+			input[type="checkbox"] + label:before,
+			input[type="radio"] + label:before {
+				-moz-osx-font-smoothing: grayscale;
+				-webkit-font-smoothing: antialiased;
+				font-family: FontAwesome;
+				font-style: normal;
+				font-weight: normal;
+				text-transform: none !important;
+			}
+
+			input[type="checkbox"] + label:before,
+			input[type="radio"] + label:before {
+				border-radius: 4px;
+				border: solid 1px #c8cccf;
+				content: '';
+				display: inline-block;
+				height: 1.65em;
+				left: 0;
+				line-height: 1.58125em;
+				position: absolute;
+				text-align: center;
+				top: 0.15em;
+				width: 1.65em;
+			}
+
+		input[type="checkbox"]:checked + label:before,
+		input[type="radio"]:checked + label:before {
+			color: #ff7496;
+			content: '\f00c';
+		}
+
+		input[type="checkbox"]:focus + label:before,
+		input[type="radio"]:focus + label:before {
+			border-color: #ff7496;
+		}
+
+	input[type="checkbox"] + label:before {
+		border-radius: 4px;
+	}
+
+	input[type="radio"] + label:before {
+		border-radius: 100%;
+	}
+
+	::-webkit-input-placeholder {
+		color: #616f77 !important;
+		opacity: 1.0;
+	}
+
+	:-moz-placeholder {
+		color: #616f77 !important;
+		opacity: 1.0;
+	}
+
+	::-moz-placeholder {
+		color: #616f77 !important;
+		opacity: 1.0;
+	}
+
+	:-ms-input-placeholder {
+		color: #616f77 !important;
+		opacity: 1.0;
+	}
+
+	.formerize-placeholder {
+		color: #616f77 !important;
+		opacity: 1.0;
+	}
+
+/* Icon */
+
+	.icon {
+		text-decoration: none;
+		position: relative;
+		border-bottom: none;
+	}
+
+		.icon:before {
+			-moz-osx-font-smoothing: grayscale;
+			-webkit-font-smoothing: antialiased;
+			font-family: FontAwesome;
+			font-style: normal;
+			font-weight: normal;
+			text-transform: none !important;
+		}
+
+		.icon > .label {
+			display: none;
+		}
+
+/* List */
+
+	ol {
+		list-style: decimal;
+		margin: 0 0 1.5em 0;
+		padding-left: 1.25em;
+	}
+
+		ol li {
+			padding-left: 0.25em;
+		}
+
+	ul {
+		list-style: disc;
+		margin: 0 0 1.5em 0;
+		padding-left: 1em;
+	}
+
+		ul li {
+			padding-left: 0.5em;
+		}
+
+		ul.alt {
+			list-style: none;
+			padding-left: 0;
+		}
+
+			ul.alt li {
+				border-top: solid 1px #c8cccf;
+				padding: 0.5em 0;
+			}
+
+				ul.alt li:first-child {
+					border-top: 0;
+					padding-top: 0;
+				}
+
+		ul.icons {
+			cursor: default;
+			list-style: none;
+			padding-left: 0;
+			margin-top: -0.675em;
+		}
+
+			ul.icons li {
+				display: inline-block;
+				padding: 0.675em 0.5em;
+			}
+
+				ul.icons li a {
+					text-decoration: none;
+					position: relative;
+					display: block;
+					width: 3.75em;
+					height: 3.75em;
+					border-radius: 100%;
+					border: solid 1px #c8cccf;
+					line-height: 3.75em;
+					overflow: hidden;
+					text-align: center;
+					text-indent: 3.75em;
+					white-space: nowrap;
+				}
+
+					ul.icons li a:before {
+						-moz-osx-font-smoothing: grayscale;
+						-webkit-font-smoothing: antialiased;
+						font-family: FontAwesome;
+						font-style: normal;
+						font-weight: normal;
+						text-transform: none !important;
+					}
+
+					ul.icons li a:before {
+						color: #ffffff;
+						text-shadow: 1.25px 0px 0px #c8cccf, -1.25px 0px 0px #c8cccf, 0px 1.25px 0px #c8cccf, 0px -1.25px 0px #c8cccf;
+					}
+
+					ul.icons li a:hover:before {
+						text-shadow: 1.25px 0px 0px #ff7496, -1.25px 0px 0px #ff7496, 0px 1.25px 0px #ff7496, 0px -1.25px 0px #ff7496;
+					}
+
+					ul.icons li a:before {
+						position: absolute;
+						top: 0;
+						left: 0;
+						width: inherit;
+						height: inherit;
+						font-size: 1.85rem;
+						line-height: inherit;
+						text-align: center;
+						text-indent: 0;
+					}
+
+					ul.icons li a:hover {
+						border-color: #ff7496;
+					}
+
+			@media screen and (max-width: 480px) {
+
+				ul.icons li a:before {
+					font-size: 1rem;
+				}
+
+			}
+
+		ul.actions {
+			cursor: default;
+			list-style: none;
+			padding-left: 0;
+		}
+
+			ul.actions li {
+				display: inline-block;
+				padding: 0 0.75em 0 0;
+				vertical-align: middle;
+			}
+
+				ul.actions li:last-child {
+					padding-right: 0;
+				}
+
+	dl {
+		margin: 0 0 1.5em 0;
+	}
+
+		dl dt {
+			display: block;
+			margin: 0 0 0.75em 0;
+		}
+
+		dl dd {
+			margin-left: 1.5em;
+		}
+
+/* Button */
+
+	input[type="submit"],
+	input[type="reset"],
+	input[type="button"],
+	button,
+	.button {
+		-moz-appearance: none;
+		-webkit-appearance: none;
+		-ms-appearance: none;
+		appearance: none;
+		-moz-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
+		-webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
+		-ms-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
+		transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
+		display: inline-block;
+		height: 2.75em;
+		line-height: 2.75em;
+		padding: 0 1.5em;
+		background-color: transparent;
+		border-radius: 4px;
+		border: solid 1px #c8cccf;
+		color: #414f57 !important;
+		cursor: pointer;
+		text-align: center;
+		text-decoration: none;
+		white-space: nowrap;
+	}
+
+		input[type="submit"]:hover,
+		input[type="reset"]:hover,
+		input[type="button"]:hover,
+		button:hover,
+		.button:hover {
+			border-color: #ff7496;
+			color: #ff7496 !important;
+		}
+
+		input[type="submit"].icon,
+		input[type="reset"].icon,
+		input[type="button"].icon,
+		button.icon,
+		.button.icon {
+			padding-left: 1.35em;
+		}
+
+			input[type="submit"].icon:before,
+			input[type="reset"].icon:before,
+			input[type="button"].icon:before,
+			button.icon:before,
+			.button.icon:before {
+				margin-right: 0.5em;
+			}
+
+		input[type="submit"].fit,
+		input[type="reset"].fit,
+		input[type="button"].fit,
+		button.fit,
+		.button.fit {
+			display: block;
+			width: 100%;
+			margin: 0 0 0.75em 0;
+		}
+
+		input[type="submit"].small,
+		input[type="reset"].small,
+		input[type="button"].small,
+		button.small,
+		.button.small {
+			font-size: 0.8em;
+		}
+
+		input[type="submit"].big,
+		input[type="reset"].big,
+		input[type="button"].big,
+		button.big,
+		.button.big {
+			font-size: 1.35em;
+		}
+
+		input[type="submit"].disabled, input[type="submit"]:disabled,
+		input[type="reset"].disabled,
+		input[type="reset"]:disabled,
+		input[type="button"].disabled,
+		input[type="button"]:disabled,
+		button.disabled,
+		button:disabled,
+		.button.disabled,
+		.button:disabled {
+			-moz-pointer-events: none;
+			-webkit-pointer-events: none;
+			-ms-pointer-events: none;
+			pointer-events: none;
+			opacity: 0.5;
+		}
+
+/* Main */
+
+	#main {
+		position: relative;
+		max-width: 100%;
+		min-width: 30em;
+		padding: 2em ;
+		background: #ffffff;
+		border-radius: 4px;
+		cursor: default;
+		opacity: 0.95;
+		text-align: center;
+		-moz-transform-origin: 50% 50%;
+		-webkit-transform-origin: 50% 50%;
+		-ms-transform-origin: 50% 50%;
+		transform-origin: 50% 50%;
+		-moz-transform: rotateX(0deg);
+		-webkit-transform: rotateX(0deg);
+		-ms-transform: rotateX(0deg);
+		transform: rotateX(0deg);
+		-moz-transition: opacity 1s ease, -moz-transform 1s ease;
+		-webkit-transition: opacity 1s ease, -webkit-transform 1s ease;
+		-ms-transition: opacity 1s ease, -ms-transform 1s ease;
+		transition: opacity 1s ease, transform 1s ease;
+	}
+
+		#main .avatar {
+			display: block;
+			margin-bottom: 1.5em;
+		}
+
+			#main .avatar img {
+				display: block;
+				margin: 10px auto 0 auto;
+				border-radius: 100%;
+				box-shadow: 0 0 0 1.5em #ffffff;
+			}
+
+			#main .avatar:before {
+				display: block;
+				position: absolute;
+				top: 50%;
+				left: -3em;
+				width: calc(100% + 6em);
+				height: 1px;
+				z-index: -1;
+				background: #c8cccf;
+			}
+
+		@media screen and (max-width: 480px) {
+
+			#main {
+				min-width: 0;
+				width: 100%;
+				padding: 4em 2em 2.5em 2em ;
+			}
+
+				#main .avatar:before {
+					left: -2em;
+					width: calc(100% + 4em);
+				}
+
+		}
+
+		body.is-loading #main {
+			opacity: 0;
+			-moz-transform: rotateX(15deg);
+			-webkit-transform: rotateX(15deg);
+			-ms-transform: rotateX(15deg);
+			transform: rotateX(15deg);
+		}
+
+/* Footer */
+
+	#footer {
+		-moz-align-self: -moz-flex-end;
+		-webkit-align-self: -webkit-flex-end;
+		-ms-align-self: -ms-flex-end;
+		align-self: flex-end;
+		width: 100%;
+		padding: 1.5em 0 0 0;
+		cursor: default;
+		text-align: center;
+	}
+
+		#footer .copyleft {
+			margin: 0;
+			padding: 0;
+			font-size: 0.9em;
+			list-style: none;
+		}
+
+			#footer .copyleft li {
+				display: inline-block;
+				margin: 0 0 0 0.45em;
+				padding: 0 0 0 0.85em;
+				border-left: solid 1px rgba(255, 255, 255, 0.5);
+				line-height: 1;
+			}
+
+				#footer .copyleft li:first-child {
+					border-left: 0;
+				}
+
+				#footer .copyleft li:first-child span{
+					transform: rotate(180deg);
+					display:inline-block;
+				}
+
+/* Wrapper */
+
+	#wrapper {
+		display: -moz-flex;
+		display: -webkit-flex;
+		display: -ms-flex;
+		display: flex;
+		-moz-align-items: center;
+		-webkit-align-items: center;
+		-ms-align-items: center;
+		align-items: center;
+		-moz-justify-content: space-between;
+		-webkit-justify-content: space-between;
+		-ms-justify-content: space-between;
+		justify-content: space-between;
+		-moz-flex-direction: column;
+		-webkit-flex-direction: column;
+		-ms-flex-direction: column;
+		flex-direction: column;
+		-moz-perspective: 1000px;
+		-webkit-perspective: 1000px;
+		-ms-perspective: 1000px;
+		perspective: 1000px;
+		position: relative;
+		min-height: 100%;
+		padding: 1.5em;
+		z-index: 2;
+	}
+
+		#wrapper > * {
+			z-index: 1;
+		}
+
+		#wrapper:before {
+			content: '';
+			display: block;
+		}
+
+		@media screen and (max-width: 360px) {
+
+			#wrapper {
+				padding: 0.75em;
+			}
+
+		}
+
+		body.is-ie #wrapper {
+			height: 100%;
+		}
diff --git a/index.html b/index.html
index 30d12e0..28d75fd 100755
--- a/index.html
+++ b/index.html
@@ -1,116 +1,77 @@
-<!DOCTYPE html>
+<!DOCTYPE HTML>
+<!--
+   Identity by HTML5 UP
+   html5up.net | @ajlkn
+   Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+   -->
 <html lang="fr">
+   <head>
+      <title>A la maison</title>
+      <meta charset="utf-8" />
+      <meta name="Description" content="A personnal homepage">
+      <meta name="viewport" content="width=device-width, initial-scale=1" />
+      <link rel="stylesheet" href="homepage/css/main.css" />
 
-<head>
-    <meta charset="utf-8" />
-    <title>Alamaison</title>
-    <meta name="description" content="Une page d’accueil personnelle proposant divers services libres." />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+      <noscript>
+         <link rel="stylesheet" href="homepage/css/noscript.css" />
+      </noscript>
+   </head>
+   <body class="is-loading">
+      <!-- Wrapper -->
+      <div id="wrapper">
+         <!-- Main -->
 
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.12/css/weather-icons.min.css" />
-
-    <!-- Styles locaux -->
-    <link rel="stylesheet" href="homepage/css/main.css" />
-    <noscript><link rel="stylesheet" href="homepage/css/noscript.css" /></noscript>
-</head>
-
-<body class="is-loading">
-    <div id="wrapper">
-
-        <!-- Contenu principal -->
-        <main id="main">
+         <section id="main">
             <header>
-
-                <!-- Informations météo & horloge -->
-                <div class="meta-info">
-                    <a href="https://openweathermap.org/city/3021372" target="_blank" rel="noopener noreferrer">
-                        <span id="icon" aria-hidden="true"></span>
-                        <span id="city"></span>
+                <div>
+                    <a href="https://openweathermap.org/city/3021372">
+                       <span id="icon" class=""></span>
+                       <span id="city"></span>
                     </a>
-
-                    <span class="fa fa-clock-o" aria-hidden="true"></span>
+                    <span class="fa fa-clock-o"></span>
                     <span id="js-clock"></span>
                 </div>
-
-                <div class="weather-details">
-                    <span class="wi wi-thermometer" aria-hidden="true"></span>
+                <div>
+                    <span class="wi wi-thermometer"></span>
                     <span id="temp"></span>
-
-                    <span class="wi wi-humidity" aria-hidden="true"></span>
+                    <span class="wi wi-humidity"></span>
                     <span id="humidity"></span>
-
-                    <span class="wi wi-barometer" aria-hidden="true"></span>
+                    <span class="wi wi-barometer"></span>
                     <span id="pressure"></span>
                 </div>
 
-                <!-- Avatar -->
-                <span class="avatar">
-            <img src="homepage/images/avatar.png" alt="Avatar du site" />
-          </span>
-
-                <!-- Titre -->
-                <h1>A LA MAISON</h1>
-                <p>Hébergement de services libres</p>
-
-                <!-- Barre de recherche Startpage -->
-                <form action="https://www.startpage.com/sp/search" method="post" target="_blank">
-                    <input id="search" type="text" name="query" placeholder="RECHERCHE" autocomplete="off" autofocus />
-                </form>
+               <span class="avatar"><img src="homepage/images/avatar.png" alt="" /></span>
+            <h1>A la maison</h1>
+            <p>Hébergement de services libres</p>
+            <form action="https://www.startpage.com/sp/search"  target="_blank" method="post">
+              <input type="text" placeholder="Recherche" name="query" autofocus>
+            </form>
             </header>
-
-            <!-- Liens vers les services -->
-            <footer class="services">
-                <nav aria-label="Services auto-hébergés">
-                    <ul class="icons">
-                        <li>
-                            <a href="https://cloud.alamaison.me/" target="_blank" rel="noopener noreferrer" class="fa fa-folder" aria-label="Fichiers"></a>
-                        </li>
-                        <li>
-                            <a href="https://photos.alamaison.me/" target="_blank" rel="noopener noreferrer" class="fa fa-camera" aria-label="Photos"></a>
-                        </li>
-                        <li>
-                            <a href="https://courriel.alamaison.me/" target="_blank" rel="noopener noreferrer" class="fa fa-envelope" aria-label="Courriels"></a>
-                        </li>
-                        <li>
-                            <a href="https://alamaison.me/logiciels/" target="_blank" rel="noopener noreferrer" class="fa fa-desktop" aria-label="Logiciels"></a>
-                        </li>
-                    </ul>
-                </nav>
-
-                <p>Et bien d'autres</p>
-
-                <nav aria-label="Services externes libres">
-                    <ul class="icons">
-                        <li>
-                            <a href="https://valhalla.openstreetmap.de/" target="_blank" rel="noopener noreferrer" class="fa fa-map-signs" aria-label="Cartes"></a>
-                        </li>
-                        <li>
-                            <a href="https://trans.zillyhuhn.com/" target="_blank" rel="noopener noreferrer" class="fa fa-language" aria-label="Traduction"></a>
-                        </li>
-                        <li>
-                            <a href="https://languagetool.org/fr/" target="_blank" rel="noopener noreferrer" class="fa fa-sort-alpha-asc" aria-label="Correction"></a>
-                        </li>
-                        <li>
-                            <a href="https://www.placedeslibraires.fr/" target="_blank" rel="noopener noreferrer" class="fa fa-book" aria-label="Livres"></a>
-                        </li>
-                    </ul>
-                </nav>
+            <footer>
+               <ul class="icons">
+                  <li><a href="https://cloud.alamaison.me/" target="_blank" rel="noreferrer" class="fa-folder">Fichiers</a></li>
+                  <li><a href="https://photos.famillepinte.fr/" target="_blank" rel="noreferrer" class="fa-camera">Photos</a></li>
+                  <li><a href="https://courriel.alamaison.me/" target="_blank" rel="noreferrer" class="fa-envelope">Courriels</a></li>
+                  <li><a href="https://famillepinte.fr/logiciels/" target="_blank" rel="noreferrer" class="fa-desktop ">Logiciels</a></li>
+               </ul>
+               <p>Et bien d'autres</p>
+               <ul class="icons">
+                  <li><a href="https://valhalla.openstreetmap.de/" target="_blank" rel="noreferrer" class="fa-map-signs">Cartes</a></li>
+                  <li><a href="https://trans.zillyhuhn.com/" target="_blank" rel="noreferrer" class="fa-language ">Traduction</a></li>
+                  <li><a href="https://languagetool.org/fr/" target="_blank" rel="noreferrer" class="fa-sort-alpha-asc">Correction</a></li>
+                  <li><a href="https://www.placedeslibraires.fr/" target="_blank" rel="noreferrer" class="fa-book ">Livres</a></li>
+               </ul>
             </footer>
-        </main>
-
-        <!-- Footer global -->
-        <footer id="footer">
+         </section>
+         <!-- Footer -->
+         <footer id="footer">
             <ul class="copyleft">
-                <li><span>&copy;</span> A LA MAISON</li>
-                <li>Inspiré par : <a href="https://chatons.org" target="_blank" rel="noopener noreferrer">les chatons</a></li>
+               <li><span>&copy;</span>A la maison</li>
+               <li>Inspiré par : <a href="https://chatons.org">les chatons</a></li>
             </ul>
-        </footer>
+         </footer>
+      </div>
+      <script src="homepage/js/script.js"></script>
+   </body>
+</html>
 
-    </div>
-
-    <!-- Scripts -->
-    <script src="homepage/js/script.js"></script>
-</body>
-
-</html>
\ No newline at end of file