/*
Mini site 'B�chamel' par Web intelligencia. Tous droits r�serv�s.
http://www.webintelligencia.com
*/

/* ************************************ */
/*            Style Global              */
/* ************************************ */

* {
  margin: 0;
  padding: 0;
  word-wrap: break-word;
  word-break: break-word;
}
html {
  font: normal 0.8rem "trebuchet ms", arial, sans-serif;
  background: #ffc33f url(../img/bechamel.jpg) fixed;
  color: #555;
}
body {
  background: transparent url(../img/bechamel-recette.png) repeat;
  padding: 1rem;
  margin: 2rem auto;
  max-width: 1200px;
  display: flex;
  flex-flow: column nowrap;
  align-items: stretch;
  align-content: center;
}
main {
  background: #fff;
  border: 1px solid #e7e7e7;
  display: flex;
  flex-flow: row nowrap;
}
p {
  line-height: 1.5em;
  font-size: 107%;
  margin: 0.5rem 0;
  white-space: pre-line;
}
img {
  border: 0;
  margin: 1rem;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font: normal 250% "Boogaloo", arial, sans-serif;
  color: #444;
}
h2 {
  font: normal 190% "Boogaloo", arial, sans-serif;
  color: #df5701;
}
h3 {
  font-size: 175%;
  color: #444;
  margin: 1rem 0;
}

.recette-avec-bechamel {
  font-size: 140%;
  color: #444;
}
h4,
h5,
h6 {
  font: normal 100% arial, sans-serif;
  color: #df5701;
  line-height: 1em;
  margin: 0.5rem 0;
}
h5,
h6 {
  font: italic 95% arial, sans-serif;
  color: #888;
}
h6 {
  color: #362c20;
}
a,
a:hover {
  outline: none;
  text-decoration: none;
  color: #ac0001;
}
a:hover {
  text-decoration: underline;
}
a > img {
  width: 100%;
}

ul li {
  list-style-type: none;
  background: url(../img/bechamel-facile.png) no-repeat;
  padding: 0 1rem;
  margin: 1rem;
  line-height: 1.5em;
  font-size: 100%;
}
ol {
  padding: 0 1rem;
}
ol li {
  margin: 1rem;
  line-height: 1.5em;
}
/* ************************************ */
/*            Style Header              */
/* ************************************ */
header {
  display: flex;
  flex-flow: column;
  flex: 1 1 auto;
}
#top-header {
  display: flex;
  flex-flow: row wrap;
  background: transparent;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}
#top-header h1 {
  font: normal 550% "Boogaloo", arial, sans-serif;
  color: #555;
  z-index: 2;
  position: absolute;
}
#top-header h1 a {
  color: #ac0001;
  text-decoration: none;
}
#top-header h1 a:hover {
  color: #555;
  text-decoration: none;
}

#logo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#logo img {
  position: relative;
  z-index: 1;
  margin: -1rem;
  right: 1rem;
}
.slogan {
  margin: 1rem;
  text-align: center;
  font: 250% "Nothing You Could Do", arial;
  color: #111;
}
#menubar {
  display: flex;
  flex-flow: row nowrap;
  justify-content: end;
  align-items: end;
}
ul#menu {
  display: flex;
  flex-flow: row nowrap;
  justify-content: end;
  align-items: end;
}

ul#menu li {
  padding: 0.5rem 1rem;
  list-style: none;
  text-align: center;
  margin: 0;
  background: none;
  line-height: initial;
}
ul#menu li.current {
  background: #fff;
  border: 1px solid #ddd;
  border-bottom: 0;
}
ul#menu li a {
  font: normal 170% "Boogaloo", sans-serif;
  text-decoration: none;
  color: #444;
}
ul#menu li.current a {
  color: #df5701;
}
ul#menu li a:hover {
  color: #df5701;
}

/* ************************************ */
/*            Style Sidebar              */
/* ************************************ */

#sidebar {
  flex-grow: 1;
  display: flex;
  flex-flow: column nowrap;
  width: 30%;
}
#sidebar h3 {
  margin: 0;
}
#sidebar > .box {
  display: flex;
  flex-flow: column;
  background: #fbfbfb;
  border: 1px solid #eee;
  margin: 2rem;
  padding: 1rem 3rem;
  gap: 1rem;
  align-items: stretch;
}
#sidebar > .box > .title {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  position: relative;
  justify-content: start;
}
#sidebar > .box > .title > img {
  position: absolute;
  left: -5rem;
  top: -3.5rem;
}

#sidebar > .box > ul {
  list-style-type: "-";
}

#sidebar > .box > ul > li {
  margin: 1rem 0;
}

#sidebar > .box > ul > li::marker {
  font-size: 140%;
}
.recette-bechamel {
  z-index: 0;
  vertical-align: middle;
}

/* ************************************ */
/*            Style Contenu              */
/* ************************************ */

#content {
  flex-grow: 3;
  text-align: left;
  display: flex;
  flex-flow: column nowrap;
}
#content > section {
  margin: 0.5rem 2rem;
}

#content .table {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-end;
}

#content .table > * {
  flex: 1 1 30%;
}
#content .table > .item {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: end;
  padding: 1rem;
}

.recette {
  display: flex;
  flex-flow: column nowrap;
  background: #fbfbfb;
  border: 1px solid #eee;
  padding: 1rem;
  margin: 1rem;
}
.recette .title {
  line-height: 1.5em;
  font-size: 115%;
  font-weight: bold;
}

/* ************************************ */
/*            Style Fotter              */
/* ************************************ */

footer {
  font: normal 150% "Boogaloo", arial, sans-serif;
  text-align: center;
  color: #555;
  margin: 1rem;
}

footer ul {
  list-style: none;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
footer li {
  list-style: none;
  background: none;
  padding: 0;
  margin: 0;
  line-height: initial;
}
footer li:not(:last-child)::after {
  content: "|";
  margin: 0 0.5rem;
}

footer a {
  color: #555;
  text-decoration: none;
}
footer a:hover {
  color: #ac0001;
  text-decoration: none;
}

/* ************************************ */
/*            Style Formulaire              */
/* ************************************ */

form {
  display: flex;
  flex-flow: column;
}

form .submit {
  border: 0;
  width: auto;
  cursor: pointer;
  color: #ac0001;
  border: 1px solid #ddd;
  background: #fbfbfb;
  font: normal 140% "Boogaloo", sans-serif;
  padding: 1rem;
  align-self: flex-end;
}
form > * {
  margin: 1rem;
}

form input,
form textarea {
  min-width: 0;
  width: 100%;
  flex: 1 1 auto;
  font: 100% "trebuchet ms", arial;
  background: #fff;
  color: #000000;
  padding: 1rem;
  border: 1px solid #eee;
}
.cadre-form {
  background-color: #fbfbfb;
  border: 1px solid #eeeeee;
  padding: 1rem;
}
section.input {
  display: flex;
  flex-flow: row wrap;
  margin: 1rem;
}
section.input > * {
  margin: 0 0.5rem;
}
fieldset {
  display: flex;
  flex-flow: column;
}

/* ************************************ */
/*            Style Divers              */
/* ************************************ */

.img-aside {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
}
.img-aside > *:not(img) {
  flex: 1 1 40%;
}
.img-aside > img {
  max-width: 25rem;
  width: 100%;
  min-height: 0;
  flex: 0 1 auto;
}

/* ************************************ */
/*            Style Erreurs              */
/* ************************************ */

.error {
  border: 1px solid #ff950b;
  border-radius: 1rem;
  padding: 2rem;
  text-align: center;
}
.error button {
  border: 1px solid black;
  margin: 1rem;
  padding: 1rem;
  border-radius: 0.5rem;
  background-color: #fee96a;
  cursor: pointer;
}
.error button:hover {
  background-color: #e8c501;
}

.pothoney,
.pothoney * {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  width: 0;
  z-index: -1;
}

/* ************************************ */
/*            Style réseaux              */
/* ************************************ */

.fb-page,
.fb-page span,
.fb-page span iframe[style] {
  width: 100% !important; /* !important needed because facebook inserts style directly in HTML so this overrides it*/
}

.twitter-timeline,
.twitter-timeline iframe,
#twitter-widget-0 {
  width: 100% !important; /* !important needed because facebook inserts style directly in HTML so this overrides it*/
}

.twitter-btn {
  display: flex;
  flex-flow: column;
  align-items: flex-end;
  align-self: flex-end;
}

/* ************************************ */
/*            Media queries              */
/* ************************************ */

@media only screen and (max-width: 1150px) {
  body {
    margin: 1rem;
  }
  main {
    flex-flow: row wrap;
  }
  #sidebar > .box {
    margin: 1rem;
  }
  footer ul {
    flex-flow: column nowrap;
    font-size: 85%;
  }
  footer li:not(:last-child)::after {
    content: "";
    margin: 0;
  }
}