/*
*
*   Fiducial - Y-Proximité
*   --
*   ROOT /
*   Theme 021 - Vesta
*   --
*   Author: Y-Proximite - Claire O'Dea
*
*/

/**
* #.# Fonts
*/

@import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600, 700&display=swap);

/**
* #.# Variables CSS
*/

:root {    
  
  /** Color **/

  --body-color: #212121;
  --body-alt-color: #ffffff;
  --primary-color: #f89d1c;
  --header-menu-color: #ffffff;
  --slider-color: #ffffff;
  --bloc-identite-entreprise-color: #ffffff;
  --footer-color: #ffffff;

  /** Background colors **/
  --body-bg: #ffffff;
  --body-secondary-bg: #f2f2f2;
  --header-menu-bg: #212121; 
  --bloc-identite-entreprise-bg: #000000; 
  --hp-bloc-qualifications-et-partenaires-bg: #f89d1c; 
  --hp-bloc-qualifications-et-partenaires-bg-img: url(/media/original/slider-theme-2-247358.jpg); 
  --footer-bg: #000000; 

  /** Font **/

  --global-font-family: Open Sans,sans-serif;
  --global-font-size: 1rem;
  --global-font-weight: 400;

  --title-font-family: Open Sans,sans-serif;
  --title-font-size: 23px;
  --title-font-weight: 700;
  --title-font-txt-transform: uppercase;
  
  --menu-font-size: 0.875rem;
  --menu-font-txt-transform: uppercase;
  --menu-font-weight: 700;

  --slider-font-align: center;
  --slider-font-size: 1.563rem;
  --slider-font-weight: 700;
}

.yp-container--slider .slider .yp-slider__img {
	object-fit: contain !important;
}

.produit {
  background-color: #fff;
  padding: 4rem 0;
}

.produit .yp-articles-list {
  margin: 0 auto;
  max-width: 900px;
}
.produit .yp-articles-list .yp-articles-list__item {
  background-color: #f7f7f7;
  margin-bottom: 3rem;
  position: relative;
}

.produit .yp-articles-list .yp-articles-list__thumb {
  height: 300px;
  position: relative;
}

.produit .yp-articles-list .yp-articles-list__body {
  display: flex;
  flex-direction: column;
  padding: 1.5rem 3rem .5rem 1.5rem;
}

.produit .yp-articles-list .yp-articles-list__body-title {
  font-size: 1.375rem;
  min-height: 3rem;
}

.produit .yp-articles-list .yp-articles-list__body-title-link {
    color: #000;
}

@media (min-width: 768px) {
  .produit .yp-articles-list .yp-articles-list__item {
    display: flex;
  }

  .produit .yp-articles-list .yp-articles-list__thumb {
    height: auto;
    max-width: 425px;
    width: 30%;
  }

  .produit .yp-articles-list .yp-articles-list__body {
    flex: 1;
  }
}