@charset "UTF-8";
/*---------------------------------------*\
		Styles et réglages globaux
\*---------------------------------------*/
:root {
  --white:	#FFFFFF;
  --black:	#000000;
  --grey-dark:	#191919;
  --grey-mid:	#818181;
  --grey-lighter:	#B6B6B6;
  --grey-light:	#E8E8E8;
  --grey:	#383838;
  --red:	#C0172E;
  --green:	#00B360;
  --layout-main--width: 100%;
  --layout-main--max-width: 1200px;
}

/*------------------------------------*\
		Images and SVG dirs
\*------------------------------------*/
/*------------------------------------*\
		Z-indexes
\*------------------------------------*/
/*------------------------------------*\
		Easing
\*------------------------------------*/
/*------------------------------------*\
		Functions
\*------------------------------------*/
/**
 * A function helper to avoid having to type `map-get($layers, ...)`
 * Based on http://css-tricks.com/handling-z-index/
 * @param  {string} $layer The name of the z-index
 * @param  {number} $var   The modifier if needed
 * @return {number}        The corresponding z-index based on the $layers var
 */
/**
 * A function helper to avoid having to type `map-get($font-families, ...)` to output a given font-family
 * @param  {string} $font-family The name of the font-family
 * @return {string}              The corresponding font-family declaration
 */
/**
 * Remove units from the given number
 * @param  {number} $number The number with units
 * @return {number}
 */
/**
 * Create variables for the media queries
 * @param  {string} $breakpoint The breakpoint
 * @param  {string} $type       Type of media query (min or max)
 * @param  {string} $unit       The unit for the media queries (em or px)
 * @return {string}             A media query expression
 */
/**
 * Slightly lighten a color
 * @access public
 * @param {Color} $color - color to tint
 * @param {Number} $percentage - percentage of `$color` in returned color
 * @return {Color}
 */
/**
 * Slightly darken a color
 * @access public
 * @param  {color}  $color       color to shade
 * @param  {number} $percentage  percentage of `$color` in returned color
 * @return {Color}
 */
/**
 * Power function
 * @param  {number} $number Number to apply power
 * @param  {number} $exp    The exponant for the power
 * @return {number}         The powered number
 */
/**
 * Factorial function
 * @param  {number} $number The number to factorize
 * @return {number}         The factorised number
 */
/**
 * Pi reference
 * @return {number} Retrun PI with 11 decimals
 */
/**
 * Convert deg to rad
 * @param  {string} $angle The angle to convert
 * @return {number}        The unitless angle converted to rad
 */
/**
 * Calculate the sinus of an angle
 * @param  {string} $angle The angle to compute
 * @return {number}        The sinus of the given angle
 */
/**
 * Calculate the cosinus of an angle
 * @param  {string} $angle The angle to compute
 * @return {number}        The cosinus of the given angle
 */
/**
 * Calculate the tangent of an angle
 * @param  {string} $angle The angle to compute
 * @return {number}        The tangent of the given angle
 */
/*---------------------------------------*\
		Positions & dispositions
\*---------------------------------------*/
/*---------------------------------------*\
		Typographie
\*---------------------------------------*/
/**
 * Responsive typograhy
 * @author Mike Riethmuller http://codepen.io/MadeByMike/pen/YPJJYv
 * @param  {integer} $min-width: 0            The breakpoint minimum to activate the responsive typography
 * @param  {integer} $max-width: 2560         The breakpoint maximum to activate th responsive typography
 * @param  {integer} $min-font:  12           The minimum font-size for the element
 * @param  {integer} $max-font:  16           The maximum font-size for the element
 * @return {void}
 */
/*---------------------------------------*\
		Triangles
\*---------------------------------------*/
/*---------------------------------------*\
		SVG Responsive
\*---------------------------------------*/
/*
Utilitaire pour le padding hack qui permet d'avoir des fichiers `*.svg` responsive.
Plus d'infos ici : http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/
*/
/*------------------------------------*\
		Animation
\*------------------------------------*/
/*------------------------------------*\
		Gradients
\*------------------------------------*/
/**
 * Mixin printing a linear-gradient
 * as well as a plain color fallback
 * and the `-webkit-` prefixed declaration
 * @param {String | List | Angle} $direction - Linear gradient direction
 * @param {Arglist} $color-stops - List of color-stops composing the gradient
 */
/*------------------------------------*\
		Positionnement & Display
\*------------------------------------*/
.u-db {
  display: block !important;
}

.u-dn {
  display: none !important;
}

.u-dt {
  display: table !important;
}

.u-dtc {
  display: table-cell !important;
}

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

.u-di {
  display: inline !important;
}

.u-dh {
  display: inherit !important;
}

.u-df {
  display: flex !important;
}

.u-cf:after {
  content: "";
  clear: both;
  display: block;
}

@media (min-width: 0em) {
  .u-db--xxs {
    display: block !important;
  }

  .u-dn--xxs {
    display: none !important;
  }

  .u-dt--xxs {
    display: table !important;
  }

  .u-dtc--xxs {
    display: table-cell !important;
  }

  .u-dib--xxs {
    display: inline-block !important;
  }

  .u-di--xxs {
    display: inline !important;
  }

  .u-dh--xxs {
    display: inherit !important;
  }

  .u-df--xxs {
    display: flex !important;
  }

  .u-cf--xxs:after {
    content: "";
    clear: both;
    display: block;
  }
}
@media (min-width: 30em) {
  .u-db--xs {
    display: block !important;
  }

  .u-dn--xs {
    display: none !important;
  }

  .u-dt--xs {
    display: table !important;
  }

  .u-dtc--xs {
    display: table-cell !important;
  }

  .u-dib--xs {
    display: inline-block !important;
  }

  .u-di--xs {
    display: inline !important;
  }

  .u-dh--xs {
    display: inherit !important;
  }

  .u-df--xs {
    display: flex !important;
  }

  .u-cf--xs:after {
    content: "";
    clear: both;
    display: block;
  }
}
@media (min-width: 48em) {
  .u-db--s {
    display: block !important;
  }

  .u-dn--s {
    display: none !important;
  }

  .u-dt--s {
    display: table !important;
  }

  .u-dtc--s {
    display: table-cell !important;
  }

  .u-dib--s {
    display: inline-block !important;
  }

  .u-di--s {
    display: inline !important;
  }

  .u-dh--s {
    display: inherit !important;
  }

  .u-df--s {
    display: flex !important;
  }

  .u-cf--s:after {
    content: "";
    clear: both;
    display: block;
  }
}
@media (min-width: 62em) {
  .u-db--m {
    display: block !important;
  }

  .u-dn--m {
    display: none !important;
  }

  .u-dt--m {
    display: table !important;
  }

  .u-dtc--m {
    display: table-cell !important;
  }

  .u-dib--m {
    display: inline-block !important;
  }

  .u-di--m {
    display: inline !important;
  }

  .u-dh--m {
    display: inherit !important;
  }

  .u-df--m {
    display: flex !important;
  }

  .u-cf--m:after {
    content: "";
    clear: both;
    display: block;
  }
}
@media (min-width: 80em) {
  .u-db--l {
    display: block !important;
  }

  .u-dn--l {
    display: none !important;
  }

  .u-dt--l {
    display: table !important;
  }

  .u-dtc--l {
    display: table-cell !important;
  }

  .u-dib--l {
    display: inline-block !important;
  }

  .u-di--l {
    display: inline !important;
  }

  .u-dh--l {
    display: inherit !important;
  }

  .u-df--l {
    display: flex !important;
  }

  .u-cf--l:after {
    content: "";
    clear: both;
    display: block;
  }
}
@media (min-width: 90em) {
  .u-db--xl {
    display: block !important;
  }

  .u-dn--xl {
    display: none !important;
  }

  .u-dt--xl {
    display: table !important;
  }

  .u-dtc--xl {
    display: table-cell !important;
  }

  .u-dib--xl {
    display: inline-block !important;
  }

  .u-di--xl {
    display: inline !important;
  }

  .u-dh--xl {
    display: inherit !important;
  }

  .u-df--xl {
    display: flex !important;
  }

  .u-cf--xl:after {
    content: "";
    clear: both;
    display: block;
  }
}
@media (min-width: 120em) {
  .u-db--xxl {
    display: block !important;
  }

  .u-dn--xxl {
    display: none !important;
  }

  .u-dt--xxl {
    display: table !important;
  }

  .u-dtc--xxl {
    display: table-cell !important;
  }

  .u-dib--xxl {
    display: inline-block !important;
  }

  .u-di--xxl {
    display: inline !important;
  }

  .u-dh--xxl {
    display: inherit !important;
  }

  .u-df--xxl {
    display: flex !important;
  }

  .u-cf--xxl:after {
    content: "";
    clear: both;
    display: block;
  }
}
@media print {
  .u-dn--print {
    display: none;
  }
}

/*------------------------------------*\
		Typographie
\*------------------------------------*/
.u-tac {
  text-align: center !important;
}

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

.u-tar {
  text-align: right !important;
}

@media (min-width: 0em) {
  .u-tac--xxs {
    text-align: center !important;
  }

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

  .u-tar--xxs {
    text-align: right !important;
  }
}
@media (min-width: 30em) {
  .u-tac--xs {
    text-align: center !important;
  }

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

  .u-tar--xs {
    text-align: right !important;
  }
}
@media (min-width: 48em) {
  .u-tac--s {
    text-align: center !important;
  }

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

  .u-tar--s {
    text-align: right !important;
  }
}
@media (min-width: 62em) {
  .u-tac--m {
    text-align: center !important;
  }

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

  .u-tar--m {
    text-align: right !important;
  }
}
@media (min-width: 80em) {
  .u-tac--l {
    text-align: center !important;
  }

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

  .u-tar--l {
    text-align: right !important;
  }
}
@media (min-width: 90em) {
  .u-tac--xl {
    text-align: center !important;
  }

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

  .u-tar--xl {
    text-align: right !important;
  }
}
@media (min-width: 120em) {
  .u-tac--xxl {
    text-align: center !important;
  }

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

  .u-tar--xxl {
    text-align: right !important;
  }
}
/*------------------------------------*\
		Accessibilité
\*------------------------------------*/
/**
 * A class to hide labels and stuff
 * for accessibility
 * @author Facebook Accessibility Team
 * @source https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */
.u-accessible-item {
  position: absolute;
  width: 1px;
  height: 1px;
  white-space: nowrap;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

.site-logo {
  width: 166px;
  height: 32px;
  background: transparent url(/themes/custom/defil/images/logo_defil.png) center center no-repeat;
  background-size: contain;
}

@media (min-width: 62em) {
  .main-nav {
    background: none;
    color: var(--grey-dark);
  }
}
.main-nav .menu li:before {
  display: none;
}
.main-nav .menu li:hover a, .main-nav .menu li.menu-item--active-trail a {
  color: var(--red);
}

/*------------------------------------*\
		Footer
\*------------------------------------*/
.main-footer {
  background: var(--red);
}
.path-configurateur .main-footer {
  display: none;
}
@media (min-width: 62em) {
  .path-configurateur .main-footer {
    display: block;
  }
}
.main-footer .site-logo {
  width: 70px;
  background: none;
  filter: none;
}
.main-footer .menu--footer .menu li ul {
  color: var(--white);
}
.main-footer .closure .menu li {
  color: var(--white);
}

.funnel__breadcrumb {
  --width-logo: 180px;
  max-width: calc(var(--layout-main--max-width) * .5 - var(--width-logo));
  width: calc(var(--layout-main--width) * .5 - var(--width-logo));
}

.product__teaser--info .product--price {
  font-size: 1.75em;
}
.product__teaser--info .product--price label {
  font-size: 0.6em;
}
.product__teaser--info .product--price label:last-child {
  margin-right: 0;
}

.field--name-field-project-select {
  height: 2.5em;
}

/*# sourceMappingURL=/themes/custom/defil/dist/styles.css.map */