/*
 Theme Name:   Zoo B Child
 Author:
 Author URI:
 Description:  Zoo B Child
 Template:     zoo-b
*/

:root {
  /*--zb-contain-lg : 94;
  --zb-contain : 80;*/
  --zb-contain-md : 68;
/*  --zb-contain-sm : 46;*/
    --zb-m-1 : 4rem;
    --zb-m-2 : 6rem;
    --zb-m-3 : 7rem;
    --zb-font : "OpenSans";

}
html.noscroll {
  overflow: hidden;
}
body {
  font-family: 'OpenSans', sans-serif;
}

/* Burger */
:root {
  --zb-burger-color: #555;
}

.zb-burger {
  appearance: none;
  position: relative;
  width: 1.3rem;
  height: 1.2rem;
  cursor: pointer;
  margin: 0;
}
.zb-burger:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, var(--zb-burger-color) 0%, var(--zb-burger-color) 10%, transparent 10%, transparent 90%, var(--zb-burger-color) 90%, var(--zb-burger-color) 100%);
  transition: transform .3s, height .3s, top .3s, width .3s;
}
.zb-burger:checked:before {
  font-size: 1.8rem;
  line-height: .7;
  transform: rotate(45deg);
  height: .10rem;
  background: var(--zb-burger-color);
  top: .5rem;
  width: 1.5rem;
  transition: transform .3s, top .3s, width .3s;
}
.zb-burger:after {
  content: "";
  position: absolute;
  width: 100%;
  height: .10rem;
  top: 45%;
  background: var(--zb-burger-color);
  transition: transform .3s, bottom .3s, width .3s;
}
.zb-burger:checked:after {
  overflow: visible;
  transform: rotate(-45deg);
  width: 1.5rem;
  bottom: .6rem;
  top: unset;
}

/* Burger Nav */

.zb-burger + * {
  position: absolute;
  left: -100vw;
  top: 100%;
  height: calc(100vh - var(--zb-header-height));
  background: #fff;
  transition: left .5s ease-out;
}
.zb-burger + *:before {
  content: "";
  position: absolute;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: inherit;
  right: 100%;
}
.zb-burger + *:after {
  content: "";
  position: absolute;
  top: 0;
  right: 100vw;
  opacity: 0;
  width: 200vw;
  height: 100vh;
  background: rgba(0,0,0,.8);
  z-index: -2;
  transition: opacity .5s;
}
.zb-burger:checked + *:after {
  opacity: 1;
  right: 0;
  left: 100%;
}
.zb-burger:checked + * {
  left: 0;
}

/* Burger Nav Submenu */

.zb-burger + * li > :not(a):not(span) {
  position: absolute;
  left: -100vw;
  opacity: 0;
  top: 0;
  height: calc(100vh - var(--zb-header-height));
  background: #fff;
  color: #444;
  transition: left .6s ease-out .4s, opacity .6s ease-out .4s;
  z-index: -1;
  overflow: auto;
}
.zb-burger + * li {
  white-space: nowrap;
}
.zb-burger + * li li {
  position: relative;
}
.zb-burger + * li li > :not(a):not(span) {
  position: static;
  height: inherit;
  opacity: 1;
}
.zb-burger + * li:hover > :not(a):not(span) {
  left: 100%;
  right: unset;
  opacity: 1;
  transition: left .6s ease-out 0s, opacity .6s ease-out 0s;
}

h1 {
    font-family: 'Amatic', cursive;
    font-size: 3.2rem;
    line-height: 1
}
h2, h3 {
  font-family: 'OpenSansCondensed', sans-serif;
}
h2 {
    font-size: 1.5rem;
}
ol, ul {
  list-style-type: none;
}
ol {
  counter-reset: li-count;
}
ol > li {
  counter-increment: li-count;
}
ol > li:before {
  content: counter( li-count) ' ';
  font-weight: bold;
  margin-right: .2rem;
  font-size: 1.7rem;
  font-family: 'Amatic', cursive;
}
ul:not(.naked) > li:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  padding: .15rem;
  background: var(--zb-color-1);
  border-radius: 50%;
  margin-right: .4rem;
}
html figure {
  margin: -4px 0;
}
.radius {
  border-radius: .5rem;
  overflow: hidden;
}
.nowrap {
  white-space: nowrap;
}
.pointer {
  cursor: pointer;
}

/* Hover */

/* - hover : cloud */

.hover\:cloud {
  --img-cta-size: 1.6rem;
  cursor: pointer;
  position: relative;
  overflow: hidden;
/*  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'  viewBox='0 0 384 512'%3E%3C!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M169.4 470.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 370.8 224 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 306.7L54.6 265.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z'/%3E%3C/svg%3E") 15 15, pointer;*/
}
.hover\:cloud:hover {
  border-bottom-right-radius: 0 !important;
}
.hover\:cloud:before {
  content: "\2304";
  pointer-events: none;
  font-size: var(--img-cta-size);
  font-family: sans-serif;
  position: absolute;
  background: #fff;
  padding: var(--img-cta-size);
  width: var(--img-cta-size);
  height: calc(var(--img-cta-size) * 1.1);
  border-radius: 50%;
  right: calc(var(--img-cta-size) * -3);
  bottom: calc(var(--img-cta-size) * -3);
  animation-name: arrow-move;
  animation-duration: 3.5s;
  animation-iteration-count: infinite;
  z-index: 2;
  transition: bottom .3s ease-out, right .3s ease-out;
}
.hover\:cloud:after {
  content: "";
  position: absolute;
  pointer-events: none;
  width: calc(var(--img-cta-size) * 2);
  height: calc(var(--img-cta-size) * 2);
  bottom: calc(var(--img-cta-size) * -3);
  right: calc(var(--img-cta-size) * -3);
  background: #fff;
  border-radius: 50%;
  z-index: 1;
  transition: bottom .3s ease-out, right .3s ease-out;
}
.seo-link:hover .hover\:cloud:before, .hover\:cloud:hover:before {
  right: calc(var(--img-cta-size) * -.7);
  bottom: calc(var(--img-cta-size) * -1.1);
}
.seo-link:hover .hover\:cloud:after, .hover\:cloud:hover:after {
  bottom: calc(var(--img-cta-size) * -.8);
  right: calc(var(--img-cta-size) * .8);
}
@keyframes arrow-move {
  0% { line-height: 0; }
  40% { line-height: 0; }
  45% { line-height: .2; }
  50% { line-height: 0; }
  55% { line-height: .2; }
  65% { line-height: 0; }
  70% { line-height: 0; }
  75% { line-height: .2; }
  80% { line-height: 0; }
  85% { line-height: .2; }
  90% { line-height: 0; }
  100% { line-height: 0; }
}

/* - hover : tips */

.hover\:tips {
  transition: padding .3s, margin .3s, font-size .3s, box-shadow .3s;
}
.hover\:tips:hover {
  box-shadow: 0px 0px .3rem #ddd;
  padding: .5rem .4rem;
  margin: .3rem 0;
  border-radius: .3rem;
  font-size: .97rem;
}
.hover\:tips:hover svg, .hover\:tips svg + svg {
  display: none;
}
.hover\:tips:hover svg + svg {
  display: inherit;
}

/* Icons */

.line-through {
  position: relative;
}
.line-through:after {
  content: '';
  position: absolute;
  width: 130%;
  height: 1px;
  background: #666;
  text-align: center;
  left: -18%;
  top: 35%;
  border-radius: 2px;
  overflow: hidden;
  transform: rotateZ(45deg);
}

/* Cards */

/* - card : recettes */

.recettes-card {
  min-width: 15rem;
  cursor: pointer;
  border-radius: .5rem;
  transition: box-shadow .1s;
}
.recettes-card:hover {
  box-shadow: 0 .4rem .7rem #ccc;
}
.recettes-card picture {
  transition: border-radius .3s;
}
.recettes-card:hover picture {
  border-bottom-left-radius: 0;
}
/*.recettes-card picture > img {
  transition: transform .3s;
}
.recettes-card:hover picture > img {
  transform: scale(1.1);
}*/
.recettes-card h3 {
  font-size: 1.50rem;
  transition: font-size .1s;
}
.recettes-card:hover h3 {
  font-size: 1.52rem;
}
.recettes-card .hover\:cloud {
  --img-cta-size: 1.2rem;
}

.filter\:janvier [data-month]:not([data-month*='janvier']) {
  display: none;
}
.filter\:fevrier [data-month]:not([data-month*='fevrier']) {
  display: none;
}
.filter\:mars [data-month]:not([data-month*='mars']) {
  display: none;
}
.filter\:avril [data-month]:not([data-month*='avril']) {
  display: none;
}
.filter\:mai [data-month]:not([data-month*='mai']) {
  display: none;
}
.filter\:juin [data-month]:not([data-month*='juin']) {
  display: none;
}
.filter\:juillet [data-month]:not([data-month*='juillet']) {
  display: none;
}
.filter\:aout [data-month]:not([data-month*='aout']) {
  display: none;
}
.filter\:septembre [data-month]:not([data-month*='septembre']) {
  display: none;
}
.filter\:octobre [data-month]:not([data-month*='octobre']) {
  display: none;
}
.filter\:novembre [data-month]:not([data-month*='novembre']) {
  display: none;
}
.filter\:decembre [data-month]:not([data-month*='decembre']) {
  display: none;
}
.filter\:all [data-month] {
  display: initial;
}

/* Other */

#zb-ajax-posts-box {
  min-height: auto;
}
.sticky {
  position: sticky;
  top: var(--zb-header-height);
}

#zb-banner {
  border-bottom-right-radius: .4rem;
  border-bottom-left-radius: .4rem;
  overflow: hidden;
}


.w-16:not(.group) {
  width: calc(16.666% - var(--zb-flex-space) );
}
.seasonal-badge {
  position: absolute;
  background: white;
  padding: 2px 8px 2px 3px;
  border-radius: 0.7rem;
  margin: .5rem .4rem;
  font-size: .75rem;
  z-index: 1;
}


/* Print */


html .print-recipe {
  margin: 0;
  margin-left: auto;
  display: block;
  fill: #444;
}
html .print-recipe:hover {
  fill: #222;
}
html .print-recipe + * {
  margin-top: 0;
}
@media print {
  :root {
    --zb-m-1: 2rem;
    --zb-m-2: 3rem;
    --zb-m-3: 4rem;
    --zb-flex-space: .8%;
  }

  #season-board hr {
    margin: 1rem 0 2rem  0 !important;
  }

  @page {
    margin: 0 0 20px 0;
/*    padding: 40px 0 20px 0;*/
  }
  body {
    margin: 40px 0 0 0
  }

  body > footer:first-of-type,
  body > header:first-of-type, 
  .print\:hide {
    display: none !important;
  }
  .print\:break-page {
    break-after: page;
  }
  body > header:first-of-type.fixed + main {
    padding: 0;
  }
  .print\:w-100 {
    width: 100% !important;
  }
}