@page {
  size: A4;
  @footnote {
    float: bottom;
  }
}
@page:left{
  @bottom-left {
    content: "Page " counter(page) " sur " counter(pages);
  }
}
@page :top {
  margin-top: 0;
}

footer.footnote { float: footnote; }

body {
  background: #fff;
  color: #000;
  font-family: 'nunitoregular';
  -webkit-print-color-adjust: exact;
  font-size: 12.5pt;
}

@font-face {
    font-family: 'nunitoextralight';
    src: url('font/nunito-extralight-webfont.woff2') format('woff2'),
         url('font/nunito-extralight-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'nunitoregular';
    src: url('font/nunito-regular-webfont.woff2') format('woff2'),
         url('font/nunito-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'nunitoextrabold';
    src: url('font/nunito-extrabold-webfont.woff2') format('woff2'),
         url('font/nunito-extrabold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




.width {
  width: 19cm;
  margin: 30pt auto;
}

#qrcode {
  float: right;
}


h1 {
  font-family: 'nunitoextrabold';
  text-align: center;
  font-size: 26pt;
  margin: 10pt 0;
  padding: 5pt;
  font-weight: normal;
}
h2 {
  font-size: 11pt;
  text-align: center;
  font-weight: normal;
  margin: 2pt 0 15pt 0;
}
h2 i {
  color: #888;
  text-decoration: underline;
}

/* Bouton imprimer */
#imprimer {
  text-decoration: none;
}
.bouton-imprimer {
  background: #eee url(img/bouton-imprimer.png) no-repeat center;
  position: fixed;
  left: 0;
  height: 80px;
  width: 100px;
  border-top: 2px solid #ddd;
  border-right: 2px solid #ddd;
  border-radius: 0 4px 0px 0;
  font-size: 14px;
}
.bouton-imprimer:hover {
  background-color: #ddd;
}

.bouton-imprimer span {
  font-size: 18px;
  display: block;
  background: #5E889E;
  width: 100px;
  text-align: center;
  margin-top: 80px;
  border-right: 2px solid #ddd;
  border-bottom: 2px solid #ddd;
  border-radius: 0 0px 4px 0;
  letter-spacing: 0.5pt;
}
.bouton-imprimer span {
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  text-shadow: 1px 1px 0px rgba(0,0,0,0.5);
}

.semange {
  margin: 10pt;
  color: #45619D;
  text-align: center;
}
.semange span {
  background: url(img/noir.gif);
  border: 2pt solid #000;
  padding: 3pt 16pt;
  margin: 5pt;
  font-weight: bolder;
  color: #fff;
  border-radius: 100pt;
}

.info-recette {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font-size:  12pt;
  text-align: center;
  margin: 10pt 0;
  padding:  2pt 8pt;
  white-space: nowrap;
  background: #eee;
  box-sizing: border-box;
  border-radius: 100pt;
  border: 2pt solid #ddd;
}
.info-recette span {
  white-space: nowrap;
  line-height: 20pt;
}

.info-recette .icon {
  margin: 0 10pt 0 3pt;
}
.info-recette .icon img {
  vertical-align: bottom;
  margin: 0 3pt 0 2pt;
}

.nb-personnes {
  font-family: 'nunitoextrabold';
  font-size:  26px;
  line-height: 36px;
}

.img-recette {
  float: right;
  transform: rotate(4deg);
  margin: 30pt 30pt 0 0;
}

.img-recette img {
  height: 6cm;
  border-radius: 6pt;
  border: 4px solid #ddd;
}

.intro-recette,
.conclusion-recette {
  font-family: 'nunitoextralight';
  margin: 5pt 0;
  color: #666;
  padding: 5pt 0pt;
  font-size: 11pt;
  text-align: justify;
}
.intro-recette a,
.conclusion-recette a {
  color: #666;
  text-decoration: none;
  border-bottom: 1px dotted #ddd;
}
.intro-recette p,
.conclusion-recette p {
  margin: 0 0 4px 0;
  padding: 0;
}


#ingredients .title,
#prepa .title {
  font-family: 'nunitoextrabold';
  font-size: 22pt;
  margin: 0;
  padding: 0;
}
#ingredients .title {
  margin: 0 0 20px 0;
}
#ingredients .sous-titre,
#prepa .sous-titre {
  font-size: 16pt;
  font-weight: bold;
  text-decoration: underline;
  margin: 10px 0 0 0;
}
#ingredients .sous-titre:empty,
#prepa .sous-titre:empty {
  display: none;
}
#ingredients {
  margin: 20pt 0;
  line-height: 24pt;
}

#ingredients li {
  line-height: 24pt;
  list-style-type: square;
}

.cadre:empty {
  display: none;
}

.liste-preparation {
  line-height: 20pt;
}


footer {
  text-align: center;
  font-size: 10pt;
}

.clear {
  clear: both;
}

/* */
.print-remove:hover {
  background: red;
  cursor: not-allowed;
  color: #fff;
}

.print-remove:hover:after {
  content:'Cliquer pour supprimer';
  display: block;
  position: absolute;
  background: #000;
  color: #fff;
  padding: 4px 20px;
  border-radius: 4px;
  font-style: normal;
}