@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
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; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

/* Ordre déclarations
  #Positionnement
  #Modèle de boîte
  #Typographie
  #Visuel
  #Divers */
/*Variables*/
/*Font-weight*/
/*Colors*/
@font-face {
  font-family: "Dancing Script";
  src: url("/font/dancing_script/DancingScript-Regular.ttf"); }
@font-face {
  font-family: "Open Sans";
  font-weight: 600;
  src: url("/font/open_sans/OpenSans-SemiBold.ttf"); }
@font-face {
  font-family: "Open Sans";
  font-weight: 800;
  src: url("/font/open_sans/OpenSans-Bold.ttf"); }
@font-face {
  font-family: "Open Sans";
  font-weight: 200;
  src: url("/font/open_sans/OpenSans-Light.ttf"); }
@font-face {
  font-family: "Open Sans";
  font-weight: 400;
  src: url("/font/open_sans/OpenSans-Regular.ttf"); }
/*Mettre la font en local*/
body {
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  line-height: 1.6;
  font-size: 18px;
  color: #333333;
  background-color: white; }

main {
  margin: 2em auto;
  padding: 0 1em;
  max-width: 900px;
  background: #ffffff; }

#main_header, main h1, main h2, main h3 {
  color: #000000; }

main > header > h1,
#main_article > article > header > h1 {
  font-family: "Dancing Script", cursive;
  text-align: center; }

#main_article > article > header > h1 {
  margin-bottom: 0.5em;
  font-size: 3em; }

main > header > h1 {
  margin: 0em auto 0.5em;
  font-size: 3em; }

main > section,
footer > section {
  margin: 5em auto; }

main > section > h1,
main > article > section > h1,
main > section > header > h1 {
  margin-bottom: 1em;
  font-size: 1.2em;
  font-weight: 800; }

main > header > p {
  margin: 1em auto; }

main > footer {
  padding: 2em; }

a {
  color: inherit;
  text-decoration: none; }

textarea {
  font-size: 1em;
  font-family: "Open Sans", sans-serif; }

em {
  font-weight: 800; }

form button {
  font-family: "Open Sans", sans-serif; }

button {
  cursor: pointer; }

main ul {
  margin-left: 1em;
  width: 80%; }

main ul li {
  margin: 0.5em; }

main p {
  max-width: 42em; }

.lien_inline,
#main_article a {
  font-weight: 600;
  box-shadow: 0 2px 0px 0px #FFAB1D; }

.lien_inline:hover,
#main_article a:hover {
  box-shadow: 0 2px 0px 0px #333333; }

.lien_button {
  display: block;
  margin: 2em auto;
  min-width: 9em;
  max-width: 15em;
  font-weight: 600;
  font-size: 1.2em;
  text-align: center;
  color: #000000;
  border-radius: 2em; }

.primary_button {
  background-color: #FFAB1D;
  border: 0px;
  padding: 0.9em 2em 0.8em; }

.primary_button:hover {
  background-color: #FFBB1C; }

.secondary_button {
  border: 2px solid #FFAB1D;
  padding: 0.8em 2em; }

.secondary_button:hover {
  border: 2px solid #FFBB1C;
  background-color: #FFF3DD; }

.cote_cote {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around; }

/* Main Header */
#main_header {
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  margin: auto;
  padding: 0 1em;
  max-width: 950px; }

#subheader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0.5em 0; }

#main_header_wrapper {
  background-color: #FFAB1D; }

#main_header button {
  padding: 0 1em;
  height: 2.5em;
  font-size: 1em;
  background: none;
  border: 1px solid #000000;
  border-radius: 15px; }

#main_header nav ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%; }

#main_header nav li {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 1.5em 0;
  border-bottom: 1px solid #000000;
  text-align: center; }

#main_header nav a {
  display: inline-block;
  padding-bottom: 0.2em;
  margin: auto; }

#main_header nav a:hover {
  box-shadow: 0 2px 0px 0px #333333;
  margin-bottom: -2px; }

#main_header nav ul.hide_menu {
  display: none; }

@media screen and (min-width: 750px) {
  #main_header {
    flex-direction: row; }

  #main_header button {
    display: none; }

  #main_header nav ul.hide_menu {
    display: flex; }

  #main_header nav ul {
    flex-direction: row; }

  #main_header nav li {
    display: flex;
    align-items: center;
    width: auto;
    height: auto;
    padding: 1em;
    border: none; } }
/* Main footer */
#main_footer > section > h1 {
  margin-bottom: 2em;
  font-size: 1.2em;
  font-weight: 600; }

#main_footer {
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin: auto;
  padding: 1em 1em 2em;
  max-width: 50em;
  color: #ffffff; }

#main_footer_wrapper {
  background-color: #AB3B16; }

#main_footer > h1 {
  margin: 2em auto;
  width: 10em;
  font-size: 1.4em;
  font-weight: 200; }

#main_footer > h1 {
  margin: 1em auto 3em; }

#main_footer h1 span {
  display: flex;
  margin: 0.4em;
  line-height: 1.6; }

#main_footer h1 img {
  margin-left: 0.6em; }

#bottom_footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%; }

#bottom_footer > section {
  max-width: 20em;
  min-width: 40%;
  padding: 0 1em; }

#bottom_footer > section > h1 {
  font-size: 1.2em;
  font-weight: 600; }

#main_footer li {
  margin: 2.5em 0; }

#main_footer li a {
  display: flex;
  align-items: center; }

#bottom_footer a:hover span {
  box-shadow: 0 2px 0px 0px #FFAB1D; }

#main_footer li span {
  margin-left: 0.5em; }

#dernier_article h1 {
  margin-bottom: 2em; }

#dernier_article p {
  padding: 0 2em 2em 0; }

#dernier_article span {
  font-weight: 600; }

#main_footer > section > a {
  margin: 3em auto;
  text-align: center; }

#competition_remuneration {
  display: flex;
  text-align: center; }

#competition_remuneration a {
  margin: auto; }

/* Index */
/* Index Header*/
#index_header {
  margin: 3em 0;
  display: flex;
  flex-direction: column;
  align-items: center; }

@media screen and (min-width: 750px) {
  #index_header {
    margin: 8em 0; } }
#index_header h1 {
  padding: 0 0.2em; }

#index_header h1 img {
  max-width: 100%; }

#index_header h2 {
  font-size: 1.1em;
  text-align: center; }

#index_header span {
  padding: 1em; }

#index_header h2:before,
#index_header h2:after {
  content: "";
  display: inline-block;
  width: 100%;
  margin: 0 0 0.3em;
  border-bottom: 2px solid #FFAB1D; }

/*Maximes*/
#maximes section {
  margin: 4em auto;
  font-size: 1.8em;
  text-align: center;
  max-width: 18em; }

/*Ce que j'aime faire*/
#ce_que_j_aime_faire section {
  margin: 2em auto;
  padding: 0 2em; }

#ce_que_j_aime_faire h2 {
  font-size: 1.4em;
  font-weight: 800;
  margin-bottom: 0.5em; }

#ce_que_j_aime_faire footer {
  padding-top: 2em; }

#ce_que_j_aime_faire footer p {
  margin-bottom: 4em; }

/*Wishlist*/
#wishlist ul {
  margin: 2em;
  font-weight: 600;
  list-style: disc; }

#wishlist li {
  margin: 0.5em 0; }

/* Qui suis-je ? */
#qui_suis_je_header {
  text-align: center; }

#photo_profil {
  margin: 1em 0 1.5em;
  max-width: 12em; }

#qui_suis_je_header p {
  text-align: left; }

/*Passions*/
#passions > section {
  margin-bottom: 4em; }

#passions > section > h1 {
  margin-bottom: 1em;
  font-size: 1.2em;
  font-weight: 600; }

#passions > section > h2 {
  width: 100%;
  font-size: 1.6em;
  font-weight: 600;
  text-align: center; }

#passions article {
  margin: 0em auto;
  display: flex;
  flex-direction: column; }

#passions article h1 {
  margin: 1em 0;
  font-size: 1.1em;
  font-weight: 600; }

a.lien_article_texte {
  margin: 1em 0;
  align-self: flex-end;
  max-width: 100%;
  font-weight: 600; }

#passions article a:hover {
  box-shadow: none; }

a.lien_article_texte:hover {
  box-shadow: 0 2px 0px 0px #FFAB1D; }

/*Rencontres*/
#rencontres h2:before,
#rencontres h2:after {
  content: "";
  display: inline-block;
  width: calc(100% - 1em);
  margin: 0 0.5em 0.3em;
  border-bottom: 4px solid #FFAB1D; }

#rencontres ul,
#hobbies ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 2em; }

#rencontres li,
#hobbies li {
  padding: 1em;
  max-width: 11em;
  margin: auto; }

#rencontres img,
#hobbies img {
  max-width: 100%; }

/* Ce que je fais */
.liste_projets {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 100%;
  margin: 1em 0; }

/* Vignette projet */
.vignette_projet {
  max-width: 22em;
  margin: 1em; }

.vignette_projet article {
  border-bottom: 2px solid #FFAB1D; }

.vignette_projet figure {
  background: #FFAB1D;
  border: 1px solid #e2e0e0; }

.vignette_projet img {
  display: block;
  width: 100%;
  overflow: hidden; }

.vignette_projet img:hover {
  opacity: 0.8; }

figure span::before {
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s; }

figure:hover span::before {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }

.vignette_projet h1, .vignette_sketchnote h1 {
  margin: 0.5em auto;
  width: 100%;
  font-weight: 600; }

.vignette_projet a:hover {
  box-shadow: 0 2px 0px 0px #FFAB1D; }

.vignette_projet h2 {
  margin: 0.5em auto;
  font-size: 0.9em; }

/* Projet */
main#main_projet {
  max-width: 750px; }

#main_projet h2 {
  margin: 1em auto 0;
  text-align: center;
  font-weight: 600; }

#main_projet h3 {
  text-align: center; }

#main_projet > header > p {
  margin-top: 2em; }

#main_projet section {
  margin-top: 3em; }

#main_projet p {
  margin: 2em auto; }

#main_projet ul {
  list-style: disc; }

#main_projet section > h1 {
  margin-top: 3em; }

#main_projet figure {
  margin: 2em 0 4em;
  text-align: center; }

#main_projet figure img {
  max-width: 100%;
  border: 1px solid #e2e0e0; }

#main_projet figcaption {
  margin: 0.5em 0 2em;
  font-weight: 600; }

#main_projet .lien_button {
  margin: 3em auto 4em; }

/* Sketchnotes */
ul#sketchnote_list {
  width: 100%;
  list-style: none; }

/*Me contacter*/
#main_me_contacter form {
  width: 20em; }

#main_me_contacter form p {
  margin-bottom: 2em; }

#main_me_contacter form label {
  display: block;
  margin-bottom: 0.5em;
  font-weight: 600; }

#main_me_contacter form input {
  display: block;
  margin-bottom: 3em;
  padding: 0 0.5em;
  width: 90%;
  height: 2em;
  font-size: 1em; }

#main_me_contacter form textarea {
  display: block;
  margin-bottom: 3em;
  padding: 0.2em 0.5em;
  width: 100%;
  height: 15em; }

#reseaux_sociaux ul {
  margin-top: 2em;
  margin-left: 0;
  width: 100%; }

#reseaux_sociaux li {
  margin: 2em 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center; }

#reseaux_sociaux ul span {
  margin: 0 0.5em;
  font-weight: 600; }

/* Article */
main#main_article {
  max-width: 750px; }

#main_article > article > header > h2 {
  text-align: center; }

#main_article h2 {
  margin: 3em auto 2em;
  font-size: 1.25em;
  font-weight: 800; }

#main_article h3 {
  margin: 1em auto 0.5em;
  font-size: 1.1em;
  font-weight: 800; }

#main_article h4 {
  margin: 1em auto 0.5em;
  font-weight: 800; }

#main_article header p {
  margin: 2em 3em 0;
  font-style: italic; }

#main_article section {
  margin-top: 3em; }

#main_article article {
  margin-bottom: 2em; }

#main_article p {
  margin: 0 auto 2em; }

#main_article ul {
  margin: 2em 2em 3em;
  list-style: disc; }

#main_article section > h1 {
  font-size: 1.4em;
  margin-top: 3.5em; }

#main_article time,
#main_article .licence {
  display: block;
  margin-top: 4.5em;
  margin-left: 2em;
  font-size: 0.8em; }

#main_article time span {
  font-weight: 600; }

#main_article figure {
  margin: 2em 0 4em;
  text-align: center; }

#main_article figure img {
  max-width: 100%;
  border: 1px solid #e2e0e0; }

#main_article figcaption {
  margin: 0.5em 0 2em;
  font-weight: 600; }

/* Blog */
.blog_post {
  margin: 2em auto;
  display: flex;
  flex-direction: column; }

.blog_post h1 {
  margin: 0.5em auto;
  width: 100%;
  font-size: 1.4em;
  font-weight: 800; }

#main_blog hr {
  border: 0;
  height: 1px;
  background: #FFAB1D; }