/* COMMUN
*******************************************************/

:root {
  --color-title: #00324d;
  --color-text: #464646;
}

body.page-template-page-catalogue {
  background-color: #edf2f5;
  font-family: 'Open Sans', sans-serif !important;
  font-weight: normal;
  color: var(--color-text);
}

.page-template-page-catalogue
  .elementor-column-gap-default
  > .elementor-row
  > .elementor-column
  > .elementor-element-populated {
  padding: 0 !important;
}

/* Ancien H1 */
body.page-template-page-catalogue span.qodef-m-title.entry-title {
  font-weight: 600;
  font-size: 52px;
  line-height: 1.115em;
  display: block;
  color: #ffffff;
  margin: 0;
}

/* H1 */
body.page-template-page-catalogue .hm-catalogue-title {
  font-size: 38px;
  line-height: 40px;
  color: var(--color-title);
}
/* Ancien H6 sous titre "catalogue" */
body.page-template-page-catalogue .hm-catalogue-side-title {
  font-size: 14px;
  /* line-height:19px; */
  color: var(--bleu-2);
}

/* H2 */
body.page-template-page-catalogue .hms-card-title {
  font-size: 30px;
  line-height: 40px;
  color: var(--color-title);
}

/* Largeur du contenu globale */
body.page-template-page-catalogue .elementor-section.elementor-section-boxed > .elementor-container,
body.page-template-page-catalogue .qodef-content-grid,
body.page-template-page-catalogue .hms-ariane {
  /* width: 85vw !important; */

  /* ! TODO check max-width */
  /* max-width: 1140px !important; */
  max-width: 1300px !important;
  width: 90vw !important;
}

/* Header Title wrapper + button */

.hm-catalogue-title-wapper {
  display: flex;
  flex-direction: column;
}
@media (min-width: 480px) {
  .hm-catalogue-title-wapper {
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
  }
}
@media (max-width: 479px) {
  .hm-catalogue-title-wapper > div {
    order: 2;
  }
  .hm-catalogue-title-wapper .hms-catalogue-btn-big {
    order: 1;
    margin-bottom: 1.65em;
  }
}

.hm-catalogue-title-wapper .hms-catalogue-btn-big:before,
.hm-catalogue-title-wapper .hms-catalogue-btn-big:after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  right: 1em;
  height: 1px;
  width: 13px;
  background-color: #ffffff;
  transform-origin: right center;
  transition: background-color 0.2s;
}
.hm-catalogue-title-wapper .hms-catalogue-btn-big:before {
  transform: translate(0, -50%) rotate(40deg);
}
.hm-catalogue-title-wapper .hms-catalogue-btn-big:after {
  transform: translate(0, -50%) rotate(-40deg);
}

.hm-catalogue-title-wapper .hms-catalogue-btn-big {
  padding-right: 2.5em;
}
.hm-catalogue-title-wapper .hms-catalogue-icon {
  margin-right: 0.7em;
}

/* Fil d'ariane*/

.hms-ariane {
  margin-left: auto;
  margin-right: auto;
  margin-top: 2em;
  margin-bottom: 2em;
}

.hms-ariane ul {
  list-style: none;
  margin: 0;
  display: flex;
  white-space: nowrap;
  overflow-x: auto;
}

.hms-ariane ul li {
  padding-right: 0.7rem;
  margin-right: 0.7rem;
  padding-bottom: 1em;
}
.hms-ariane ul li a,
.hms-ariane ul li {
  display: inline-block;
  font-size: 14px;
}
.hms-ariane ul li.arian-page-active {
  color: var(--bleu-1);
}
.hms-ariane ul li:first-child a {
  opacity: 0;
  max-width: 15px;
  overflow: hidden;
  white-space: nowrap;
  height: 12px;
}
.hms-ariane ul li:first-child:before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  transform: translate(12px, 1.1px);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' width='48' viewBox='0 0 48 48'%3E%3Cpath transform='rotate(0,24,24) translate(0,4.125) scale(1.5,1.5) ' fill='%238C8C8C' d='M16.200012,6.9000092L27.899994,14.699997 27.899994,26.5 20.200012,26.5 20.200012,18.699997 11.700012,18.699997 11.700012,26.5 4.1000061,26.5 4.1000061,14.699997z M16.200012,0L32,10.800003 32,14.400009 16.200012,3.6000061 0,14.699997 0,11.100006z' /%3E%3C/svg%3E%0A");
}

.hms-ariane ul li:not(:last-child):after {
  content: '/';
  display: inline-block;
  transform: translateX(0.7rem);
}

.hms-ariane ul li a {
  color: var(--color-title);
  transition: color 0.2s;
}
.hms-ariane ul li.arian-page-active a,
.hms-ariane ul li a:hover,
.hms-ariane ul li a:focus {
  color: var(--bleu-2);
}

/* Block de titre de la page*/
.hms-title-block {
  margin-bottom: calc(1.65em + 3vh);
}

/* Saut à la ligne dans le titre si désiré avec des span */
.hms-title-block .qodef-m-title span {
  display: block;
}

/* Boutons */
.hms-catalogue-btn {
  position: relative;
  font-family: 'Open Sans', sans-serif !important;
  background-color: var(--bleu-2);
  color: white !important;
  border: none;
  height: 45px;
  line-height: 45px;
  width: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 16px;
  font-weight: normal;
  cursor: pointer;
  transition: all 0.2s;
}
.hms-catalogue-btn-big {
  height: 67px;
  line-height: 67px;
  display: inline-flex;
  width: auto;
  padding: 0 1.3em;
}
.hms-catalogue-btn:hover {
  background-color: var(--bleu-1) !important;
  color: white;
}

/* Icons */
.hms-catalogue-icon:after {
  content: '';
  width: 100%;
  height: 100%;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.hms-catalogue-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  position: relative;
}
.hms-icon-panier:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' width='48' viewBox='0 0 48 48'%3E%3Cg%3E%3Cpath id='path1' transform='rotate(0,24,24) translate(0,2.36999215006547) scale(1.50000053644199,1.50000053644199) ' fill='%23FFFFFF' d='M23.552058,23.451023C25.049071,23.451023 26.247069,24.649021 26.247069,26.145999 26.247069,27.643009 25.049071,28.84 23.552058,28.84 22.055062,28.84 20.858054,27.643009 20.858054,26.145999 20.858054,24.549015 22.055062,23.451023 23.552058,23.451023z M12.775051,23.451023C14.271055,23.451023 15.469055,24.649021 15.469055,26.145999 15.469055,27.643009 14.271055,28.84 12.775051,28.84 11.278039,28.84 10.08004,27.643009 10.08004,26.145999 10.08004,24.549015 11.278039,23.451023 12.775051,23.451023z M10.978051,16.365999L11.278039,18.961 26.147063,18.961 26.945069,16.365999z M10.380043,11.076997L10.679039,13.871004 27.743075,13.871004 28.542071,11.076997z M0.99903309,5.4706106E-10C1.099024,-1.9526442E-07 1.1990302,-1.9526442E-07 1.3980355,0.10000607 6.8870421,2.6940003 9.382041,3.9920047 9.5810462,4.9900213 9.7810431,5.9880071 10.08004,8.4820256 10.08004,8.4820256L30.338079,8.4820256C32.733073,8.4820256,31.835076,10.977022,31.835076,10.977022L28.542071,20.657014C28.542071,20.657014,28.242068,22.054019,26.845063,22.054019L10.380043,22.054019C8.683034,22.054019 8.683034,20.257997 8.683034,20.257997 8.683034,20.257997 6.8870421,7.2850042 6.7870355,6.487 6.6870447,5.6880193 5.6890422,5.1889959 5.6890422,5.1889959L1.3980355,3.1930239C-0.69696855,1.9960022,-0.098975769,-1.9526442E-07,0.99903309,5.4706106E-10z' /%3E%3C/g%3E%3C/svg%3E%0A");
}

/* page introduction texte */
.hms-content-text {
  margin-bottom: calc(1.65em + 3vh);
}
@media (min-width: 768px) {
  .hms-content-text {
    padding-left: 1.65em;
  }
}

.hms-content-text p + p {
  margin-top: calc(1em + 1.5vh);
}

/* Structure de la list des Cards */
.hms-card-list:not(.hms-card-list-categories) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  grid-auto-flow: dense;
  grid-gap: calc(1em + 1.5vw);
}

/* Card */
.hms-card {
  padding: 1vw 1.5em 1.5em;
  background-color: white;
}
@media (min-width: 950px) {
  .hms-card {
    padding: 1vw 5em 5em;
  }
}
.hms-card-title {
  display: flex;
  align-items: flex-start;
}
.hms-card-title a {
  color: var(--color-title);
  display: flex;
  align-items: flex-start;
}
.hms-card-title a:hover {
  color: var(--bleu-1);
}

/* ® */
.hms-card-title span {
  font-size: 14px;
  transform: translateY(-5px);
}

/* Image */
.hms-card figure {
  margin-top: calc(1em + 1.5vw) !important;
  position: relative;
}
.hms-card figure img {
  width: 100%;
}

.qodef-h2 a:hover,
h2 a:hover {
  color: var(--bleu-2);
}

/* Items list rest */
.hms-items-list {
  list-style: none;
  margin: 0;
  margin-top: calc(1em + 1vw);
}

/* CATEGORIES
*******************************************************/
.hms-card-list.hms-card-list-categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  grid-auto-flow: dense;
  grid-gap: 1.5em;
}
@media (min-width: 600px) {
  .hms-card-list.hms-card-list-categories {
    grid-template-columns: 1fr 1fr;
  }
}

/* Liste des catégories*/
.hms-cat-list li:not(:last-child) {
  margin-bottom: 0.3rem;
}

.hms-cat-list li {
  position: relative;
  padding-left: 0;
  transition: padding-left 0.2s;
}
.hms-cat-list li:before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 10px;
  height: 10px;
  content: '';
  display: block;
  transform: translate(0, -50%) scalex(0);
  transform-origin: left center;
  background-color: var(--bleu-2);
  transition: transform 0.2s;
}
.hms-cat-list li:hover {
  padding-left: 1em;
}
.hms-cat-list li:hover:before {
  transform: translate(0, -50%) scalex(1);
}

.hms-cat-list li:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  content: '';
  display: block;
  background-color: #ccd7dd;
}
.hms-cat-list li a {
  display: block;
  padding: 0.6rem 1.3em 0.8rem;
  position: relative;
  color: var(--color-text);
  transition: color 0.2s;
}

.hms-cat-list li a:before,
.hms-cat-list li a:after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  right: 0.6em;
  height: 1px;
  width: 13px;
  background-color: #bababa;
  transform: translate(0, -50%) rotate(0deg);
  transform-origin: right center;
  transition: background-color 0.2s;
}
.hms-cat-list li a:before {
  transform: translate(0, -50%) rotate(40deg);
}
.hms-cat-list li a:after {
  transform: translate(0, -50%) rotate(-40deg);
}

.hms-cat-list li a:hover {
  color: var(--bleu-2);
}
.hms-cat-list li a:hover:before,
.hms-cat-list li a:hover:after {
  background-color: var(--bleu-2);
}

/* MODELES
*******************************************************/
.hms-card-list-modeles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-auto-flow: dense;
  grid-gap: calc(1em + 1.5vw);
}
@media (min-width: 600px) {
  .hms-card-list-modeles {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  }
}

.hms-modeles-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  grid-auto-flow: dense;
  grid-gap: 1rem 0.75rem;
}

.hms-modeles-list li a {
  border: 1px solid #bababa;
  text-align: center;
  font-size: 15px;
  display: block;
  padding: 10px 0;
  color: var(--color-title);
  transition: all 0.2s;
}
.hms-modeles-list li a:hover {
  background-color: var(--bleu-2);
  color: white;
  border-color: transparent;
}

/* REFERENCES
*******************************************************/
.hms-horizontal-list {
  background-color: white;
  padding: 2em;
  margin-bottom: 1em;
}
.hms-horizontal-list > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.hms-horizontal-list > div > * {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 150px;
  margin: 5px;
}
/* Tables */
.hms-tables {
  background: white;
  padding: calc(1em + 1.5vw);
}

.hms-tables .hms-card-title {
  margin: 0 0 1.65em 0;
  flex-direction: column;
}

.hms-tables .hms-card-title span {
  display: block;
}

.hms-tables .hms-catalogue-btn-big {
  margin-bottom: 2em;
}
.hms-tables .hms-catalogue-btn-big .hms-catalogue-icon {
  margin-left: 1em;
}

/* Tablettes & mobiles */
.hms-references-header > *,
.hms-reference > * {
  display: block;
}

/* Remplace le header de la table avec les pseudos sur les mobiles */
.ref-ref:before,
.ref-des:before,
.ref-qte:before {
  content: attr(data-title-mobile) ':';
  font-size: 11px;
  display: block;
  width: 100%;
  font-weight: normal;
  opacity: 0.7;
  text-transform: none;
}

.hms-reference .ref-des {
  font-weight: 600;
}

.hms-reference .ref-ref a,
.hms-reference .ref-des a {
  color: var(--color-text);
}
.hms-reference .ref-ref a:hover,
.hms-reference .ref-des a:hover {
  color: var(--bleu-2);
}

.ref-action {
  display: flex;
  justify-content: space-between;
}

/* Icon Panier */
button.hms-catalogue-btn .hms-icon-panier {
  margin-left: 6px;
}

/* Table desktop */
@media (min-width: 950px) {
  .hms-references-header > * {
    padding: 1rem;
    text-align: center;
    background-color: #f2f2f2;
  }
  .hms-references-header,
  .hms-reference {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #ccd7dd;
  }
  .hms-references-header > *,
  .hms-reference > * {
    padding: 0 calc(5px + 1vw);
    margin: 0 1px;
    height: 55px;
    line-height: 55px;
    display: flex;
    overflow: hidden;
    white-space: nowrap;
    align-items: center;
  }
  .ref-action {
    padding: 0;
    width: 220px;
  }
  .ref-action a,
  .ref-action button {
    width: 100px;
  }
  .ref-action a {
    margin-right: 1em;
  }
  .hms-references-header .ref-des {
    max-width: calc(100% - 10px - 15% - 320px);
  }
  .ref-des {
    flex-grow: 1;
  }
  .ref-ref {
    width: 15%;
  }
  .ref-qte {
    width: 100px;
    justify-content: end;
  }

  .ref-ref:before,
  .ref-des:before,
  .ref-qte:before {
    display: none;
  }
}

/* Table Tablette */
@media (max-width: 949px) {
  .hms-references-header {
    display: none;
  }
  .hms-reference {
    display: grid;
    grid-auto-flow: dense;
    grid-gap: 1vw;
    margin-bottom: 3em;
    padding-bottom: 2em;
    border-bottom: 1.5em solid #edf2f5;
  }
  .hms-reference:last-child {
    border-bottom: none;
  }
  .ref-des {
    grid-column: span 2;
    order: 1;
    padding-left: 0.3em;
    text-transform: uppercase;
  }
  .ref-ref {
    order: 2;
    padding-left: 0.3em;
  }
  .ref-qte {
    order: 3;
    padding-left: 0.3em;
  }
  .ref-action {
    grid-column: span 2;
    order: 4;
  }
  .ref-action a,
  .ref-action button {
    width: calc(50% - 0.5em);
  }
}

/* Tables tablettes & mobiles */
@media (min-width: 680px) and (max-width: 949px) {
  .hms-reference {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
}
@media (min-width: 481px) and (max-width: 679px) {
  .hms-reference {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

/* PRODUITS
*******************************************************/
.hms-produits {
  background: white;
  padding: calc(1em + 5vw);
}
.hms-produit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: calc(1em + 5vw);
  align-items: center;
}
.hms-produit-content {
  order: 2;
}
.hms-produit-content header {
  border-bottom: 1px solid #f2f2f2;
  margin-bottom: 2em;
  padding-bottom: 1.5em;
}
.hms-produit-content h2 {
  font-size: 26px;
  line-height: 40px;
  color: var(--color-text);
  margin-bottom: 0;
}
.hms-produit-details {
  list-style: none;
  margin: 0;
}
.hms-produit-details li {
  margin-bottom: 1em;
}
.hms-produit-details span {
  display: inline-block;
}
.hms-detail-title {
  background-color: #f2f2f2;
  padding: 0.6em 1em;
  margin-right: 1em;
}
h3.hms-detail-content,
h2.hms-detail-content {
  font-size: 16px;
  line-height: 1.625em;
  display: inline-block;
}
.hms-produit figure {
  order: 1;
  position: relative;
}
.hms-produit-content .hms-catalogue-btn {
  max-width: 250px;
  margin-top: 3.5em;
}
.hms-produit-content .hms-catalogue-icon {
  margin-left: 5px;
}

/* Watermark / Image Info */
.hms-product-img-info {
  position: absolute;
  bottom: 1em;
  right: 1em;
  color: white;
  mix-blend-mode: difference;
  font-size: 12px;
}

/* Footer */

.page-template-page-catalogue #qodef-page-footer{
margin-top:3em;
}