@charset "UTF-8";
/*------------------------------------*\
    VARS.SCSS
\*------------------------------------*/
/**
 * Any variables you find set in inuit.css’ `_vars.scss` that you do not wish to
 * keep, simply redefine here. This means that if inuit.css, for example, sets
 * your `$base-font-size` at 16px and you wish it to be 14px, simply redeclare
 * that variable in this file. inuit.css ignores its own variables in favour of
 * using your own, so you can completely modify how inuit.css works without ever
 * having to alter the framework itself.
 */
/*------------------------------------*\
    $OBJECTS-AND-ABSTRACTIONS
\*------------------------------------*/
/**
 * All of inuit.css’ objects and abstractions are initially turned off by
 * default. This means that you start any project with as little as possible,
 * and introducing objects and abstractions is as simple as switching the
 * following variables to `true`.
 */
/*------------------------------------*\
    $OVERRIDES
\*------------------------------------*/
/**
 * Place any variables that should override inuit.css’ defaults here.
 */
/*------------------------------------*\
    $CUSTOM
\*------------------------------------*/
/**
 * Place any of your own variables that sit on top of inuit.css here.
 */
/*------------------------------------*\
    $DEFAULTS
\*------------------------------------*/
/**
 * inuit.css’ default variables. Redefine these in your `_vars.scss` file (found
 * in the inuit.css-web-template) to override them.
 */
/*------------------------------------*\
    $DEBUG
\*------------------------------------*/
/**
 * Debug mode will visually highlight any potential markup/accessibility quirks
 * in the browser. Set to `true` or `false`.
 */
/*------------------------------------*\
    $BORDER-BOX
\*------------------------------------*/
/**
 * Do you want all elements to adopt `box-sizing:border-box;` as per
 * paulirish.com/2012/box-sizing-border-box-ftw ?
 */
/*------------------------------------*\
    $BASE
\*------------------------------------*/
/**
 * Base stuff
 */
/**
 * Base font-family.
 */
/**
 * Default colour for objects’ borders etc.
 */
/*------------------------------------*\
    $RESPONSIVE
\*------------------------------------*/
/**
 * Responsiveness?
 */
/**
 * Responsiveness for widescreen/high resolution desktop monitors and beyond?
 * Note: `$responsive` variable above must be set to true before enabling this.
 */
/**
 * Responsive push and pull produce a LOT of code, only turn them on if you
 * definitely need them.
 */
/**
 * Note: `$push` variable above must be set to true before enabling these.
 */
/**
 * Note: `$pull` variable above must be set to true before enabling these.
 */
/**
 * Tell inuit.css when breakpoints start.
 */
/*------------------------------------*\
    $FONT-SIZES
\*------------------------------------*/
/**
 * Font-sizes (in pixels). Refer to relevant sections for their implementations.
 */
/*------------------------------------*\
    $QUOTES
\*------------------------------------*/
/**
 * English quote marks?
 */
/**
 * If you want English quotes then please do not edit these; they’re only here
 * because Sass needs them.
 */
/**
 * If you need non-English quotes, please alter the following values accordingly:
 */
/*------------------------------------*\
    $BRAND
\*------------------------------------*/
/**
 * Brand stuff
 */
/**
 * How big would you like round corners to be by default?
 */
/*------------------------------------*\
    $OBJECTS AND ABSTRACTIONS
\*------------------------------------*/
/**
 * Which objects and abstractions would you like to use?
 */
/*------------------------------------*\
    $FRAMEWORK
\*------------------------------------*/
/**
 * inuit.css will work these next ones out for use within the framework.
 *
 * Assign our `$base-line-height` to a new spacing var for more transparency.
 */
/*------------------------------------*\
    $MIXINS
\*------------------------------------*/
/**
 * Create a fully formed type style (sizing and vertical rhythm) by passing in a
 * single value, e.g.:
 *
   `@include font-size(10px);`
 *
 * Thanks to @redclov3r for the `line-height` Sass:
 * twitter.com/redclov3r/status/250301539321798657
 */
/**
 * Style any number of headings in one fell swoop, e.g.:
 *
   .foo{
       @include headings(1, 3){
           color:#BADA55;
       }
    }
 *
 * With thanks to @lar_zzz, @paranoida, @rowanmanning and ultimately
 * @thierrylemoulec for refining and improving my initial mixin.
 */
/**
 * Create vendor-prefixed CSS in one go, e.g.
 *
   `@include vendor(border-radius, 4px);`
 *
 */
/**
 * Create CSS keyframe animations for all vendors in one go, e.g.:
 *
   .foo{
       @include vendor(animation, shrink 3s);
   }

   @include keyframe(shrink){
       from{
           font-size:5em;
       }
   }
 *
 * Courtesy of @integralist: twitter.com/integralist/status/260484115315437569
 */
/**
 * Force overly long spans of text to truncate, e.g.:
 *
   `@include truncate(100%);`
 *
 * Where `$truncation-boundary` is a united measurement.
 */
/**
 * CSS arrows!!! But... before you read on, you might want to grab a coffee...
 *
 * This mixin creates a CSS arrow on a given element. We can have the arrow
 * appear in one of 12 locations, thus:
 *
 *       01    02    03
 *    +------------------+
 * 12 |                  | 04
 *    |                  |
 * 11 |                  | 05
 *    |                  |
 * 10 |                  | 06
 *    +------------------+
 *       09    08    07
 *
 * You pass this position in along with a desired arrow color and optional
 * border color, for example:
 *
 * `@include arrow(top, left, red)`
 *
 * for just a single, red arrow, or:
 *
 * `@include arrow(bottom, center, red, black)`
 *
 * which will create a red triangle with a black border which sits at the bottom
 * center of the element. Call the mixin thus:
 *
   .foo{
       background-color:#BADA55;
       border:1px solid #ACE;
       @include arrow(top, left, #BADA55, #ACE);
   }
 *
 */
/**
 * Media query mixin.
 *
 * It’s not great practice to define solid breakpoints up-front, preferring to
 * modify your design when it needs it, rather than assuming you’ll want a
 * change at ‘mobile’. However, as inuit.css is required to take a hands off
 * approach to design decisions, this is the closest we can get to baked-in
 * responsiveness. It’s flexible enough to allow you to set your own breakpoints
 * but solid enough to be frameworkified.
 *
 * We define some broad breakpoints in our vars file that are picked up here
 * for use in a simple media query mixin. Our options are:
 *
 * palm
 * lap
 * lap-and-up
 * portable
 * desk
 * desk-wide
 *
 * Not using a media query will, naturally, serve styles to all devices.
 *
 * `@include media-query(palm){ [styles here] }`
 *
 * We work out your end points for you:
 */
/**
 * Applique une font-size en REM avec fallback en pixels
 * @param {px} $size - font-size voulue
 * @param {px} $base-size (15px) - font-size dans html
 *
 * @example scss
 *  @include font-size(20px);
 *  // affiche :
 *  font-size: 20px;
 *  font-size: 1.33333rem;
 *
 *  @include font-size(20px, 20px);
 *  // affiche :
 *  font-size: 20px;
 *  font-size: 1rem;
 *
 */
/**
 * Applique une line-height en REM avec fallback en pixels
 * @param {px} $size - font-size voulue
 * @param {px} $base-size (15px) - font-size dans html
 *
 * @example scss
 *  @include line-height(20px);
 *  // affiche :
 *  line-height: 20px;
 *  line-height: 1.33333rem;
 *
 *  @include line-height(20px, 20px);
 *  // affiche :
 *  line-height: 20px;
 *  line-height: 1rem;
 *
 */
/**
 * Renvoie une taille en REM
 * @param {px} $size - font-size voulue
 * @param {px} $base-size (15px) - font-size dans html
 *
 * @example scss
 * px2rem(20px); // renvoie 1.33333rem;
 * px2rem(20px, 20px); // renvoie 1rem;
 *
 */
/**
 * Ajoute des propriétés de clearfix
 *
 * @example scss
 * include clearfix;
 */
/**
 * Englobe le content dans une media-query
 */
/**
* @description Output spacing ( padding and margin ) rules
*
* @param String $property
* @param String $value
*/
.u-margin {
  margin: 20px !important;
}

.u-margin-top {
  margin-top: 20px !important;
}

.u-margin-top-0 {
  margin-top: 0 !important;
}

.u-margin-top-10px {
  margin-top: 10px !important;
}

.u-margin-bottom {
  margin-bottom: 20px !important;
}

.u-margin-bottom-10px {
  margin-bottom: 10px !important;
}

.u-padding-top {
  padding-top: 20px !important;
}

.u-padding-top-0 {
  padding-top: 0 !important;
}

.u-padding-right {
  padding-right: 20px !important;
}

.u-padding-bottom {
  padding-bottom: 20px !important;
}

.u-padding-bottom-0 {
  padding-bottom: 0 !important;
}

@media only screen and (min-width: 990px) {
  .u-padding-top\@desk {
    padding-top: 20px !important;
  }
}
@media only screen and (min-width: 990px) {
  .u-padding-bottom\@desk {
    padding-bottom: 20px !important;
  }
}
/**
 * Renvoie une chaine avec unité, en nombre sans son unité
 * @param {string} $number - chaine
 *
 * @example scss
 * strip-units(20px); // renvoie 20;
 * strip-units(1.5em); // renvoie 1.5;
 */
.u-clear:after {
  content: "";
  display: table;
  clear: both;
}

.u-float-left {
  float: left;
}
.u-float-right {
  float: right;
}

.u-relative {
  position: relative;
}

.u-table {
  display: table;
}

.u-cell {
  display: table-cell;
  vertical-align: middle;
}

.u-hidden {
  display: none;
}

.u-align-center {
  text-align: center !important;
}
.u-align-left {
  text-align: left !important;
}

.u-upper {
  text-transform: uppercase;
}

.u-break-word {
  word-break: break-word;
}

.u-padding {
  padding: 20px;
}

.u-border {
  border: 1px solid #3e3e41;
}

.u-spacer {
  display: block;
  height: 20px;
}

.u-block {
  display: block !important;
}

.u-iblock {
  display: inline-block;
}

.u-regular {
  font-weight: 400 !important;
}

.u-bold {
  font-weight: 700 !important;
}

.u-color-gold {
  color: #bca351 !important;
}

.u-color-orange {
  color: #e94e1b !important;
}

.u-fill-gold {
  fill: #bca351 !important;
}

.u-regular {
  font-weight: 400 !important;
}

.u-w-5 {
  width: 5% !important;
}

.u-w-10 {
  width: 10% !important;
}

.u-w-15 {
  width: 15% !important;
}

.u-w-20 {
  width: 20% !important;
}

.u-w-25 {
  width: 25% !important;
}

.u-w-30 {
  width: 30% !important;
}

.u-w-35 {
  width: 35% !important;
}

.u-w-40 {
  width: 40% !important;
}

.u-w-45 {
  width: 45% !important;
}

.u-w-50 {
  width: 50% !important;
}

.u-w-55 {
  width: 55% !important;
}

.u-w-60 {
  width: 60% !important;
}

.u-w-65 {
  width: 65% !important;
}

.u-w-70 {
  width: 70% !important;
}

.u-w-75 {
  width: 75% !important;
}

.u-w-80 {
  width: 80% !important;
}

.u-w-85 {
  width: 85% !important;
}

.u-w-90 {
  width: 90% !important;
}

.u-w-95 {
  width: 95% !important;
}

.u-w-100 {
  width: 100% !important;
}

.u-email-obfuscate:before {
  content: attr(data-website) "@" attr(data-user);
  unicode-bidi: bidi-override;
  direction: rtl;
}

/**
 * @deprecated
 */
html {
  font-size: 9pt;
}

.recipe-cta {
  display: none;
}

a[href^="#"]:after,
a[href^="javascript"]:after {
  content: "";
}

abbr[title]:after {
  content: " (" attr(title) ")";
}

@page {
  margin: 2cm 1.5cm;
}
.fullscreen, .header__modal, .modal, .search {
  display: none;
}

.recipe-intro__ctas {
  display: none;
}

.section__content {
  max-width: 100%;
}

.follow {
  display: none;
}

.recipe-header__pap {
  display: none;
}

a::after {
  display: none;
}

.pied {
  display: none;
}

.header__zone--menu,
.header__sidebar {
  display: none;
}

.header__zone--logo {
  text-align: center;
  border-bottom: 1px solid #dadada;
}

.hide-on-print {
  display: none;
}

.display-on-print {
  display: block;
}

.mod-cta {
  display: none;
}

.onglets {
  display: none;
}

.ctas {
  display: none;
}

.recipe-steps__step-media {
  display: none;
}

.recipe-intro__tags {
  display: none;
}

.recipe-ingredients:after {
  content: "";
  display: table;
  clear: both;
}
.recipe-ingredients .recipe-ingredients__items-step {
  float: left;
  width: 33.333%;
}
.recipe-ingredients .recipe-ingredients__label.button-simple {
  display: none;
}

.recipe-header, .recipe-intro {
  width: 50%;
}

.recipe-header__media {
  position: absolute;
  top: 17px;
  right: 12px;
  width: 45%;
}

.recipe-header__ribbon {
  display: none;
}

[class*="pull--"] {
  position: static;
}

.recipe-comments-title, .comment-form, .comments {
  display: none;
}

.pedia-header__media:after {
  display: none;
}

.pedia-header__body .ctas {
  display: none;
}

.card-part .deco {
  display: none;
}
.card-part .card-part__body {
  display: block;
}

.place-addresses {
  padding-top: 10px;
}