@charset "UTF-8";
#catalogue {
  display: flex;
  flex-direction: column;
  position: relative;
}

.chapeau.fond-sombre {
  padding-bottom: 90px;
}
.chapeau.fond-sombre p {
  margin-bottom: 24px;
}

.barre-filtre-besoin {
  display: none;
  position: relative;
  top: -66px;
  margin-bottom: -66px;
  margin-left: 24px;
  margin-right: 24px;
}
@media (min-width: 992px) {
  .barre-filtre-besoin {
    display: block;
  }
}
@media (min-width: 1280px) {
  .barre-filtre-besoin {
    margin-left: var(--gouttiere);
    margin-right: var(--gouttiere);
  }
}

.choix-filtre-besoin {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
@media (min-width: 992px) {
  .choix-filtre-besoin {
    flex-direction: row;
    gap: 0;
  }
}
.choix-filtre-besoin label {
  border: 1px solid var(--border-default-grey);
  border-radius: 8px;
  text-transform: uppercase;
  padding: 0 8px;
  display: flex;
  align-items: center;
  cursor: pointer;
  background: white;
}
.choix-filtre-besoin label:hover {
  background: var(--controle-segmente-fond-hover);
}
.choix-filtre-besoin label:active {
  background: var(--controle-segmente-fond-clique);
}
@media (min-width: 767px) {
  .choix-filtre-besoin label {
    padding-top: 16px;
    padding-bottom: 16px;
  }
}
@media (min-width: 992px) {
  .choix-filtre-besoin label {
    border-radius: 0;
    border-right-style: none;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    font-weight: bold;
  }
  .choix-filtre-besoin label:first-of-type {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
  }
  .choix-filtre-besoin label:last-of-type {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-right: 1px solid var(--border-default-grey);
  }
}
@media (min-width: 992px) and (min-width: 992px) {
  .choix-filtre-besoin label span {
    width: 200px;
    margin-bottom: 8px;
  }
}
.choix-filtre-besoin label.actif {
  background: #fff7db;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25) inset;
}
.choix-filtre-besoin label img {
  width: 48px;
  height: 48px;
}
@media (min-width: 992px) {
  .choix-filtre-besoin label img {
    width: 56px;
    height: 56px;
    margin-bottom: 8px;
  }
}
.choix-filtre-besoin label input {
  appearance: none;
  width: 1px;
}

.barre-filtres {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.barre-filtres fieldset {
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.barre-filtres fieldset label .libelle img {
  width: 24px;
  height: 24px;
  filter: brightness(0) saturate(100%);
}
.barre-filtres fieldset label .compte {
  margin-left: auto;
  color: #939699;
  font-size: 0.75rem;
  line-height: 1rem;
}
.barre-filtres fieldset fieldset {
  box-sizing: border-box;
  padding: 0 0 0 16px;
  border: none;
  margin: 0;
}

.contenu-catalogue {
  padding: 32px var(--gouttiere) 80px;
}

.barre-recherche-mobile .contenu-section {
  padding: 32px var(--gouttiere) 0;
  box-sizing: border-box;
}
@media (min-width: 992px) {
  .barre-recherche-mobile {
    display: none;
  }
}

.grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(282px, 1fr));
  width: 100%;
  box-sizing: border-box;
  column-gap: 24px;
  align-content: flex-start;
}
.grille .sommaire-deplie {
  /*
  Lorsqu’il y a des lignes implicites générées par l’auto-fill du repeat, il n’est pas possible
  d’utiliser la ligne -1 comme ligne de fin pour réaliser un span sur toute la hauteur des lignes.
  Mettre 100 lignes (valeur très arbitraire mais suffisante pour le moment) permet de résoudre ce
  problème.
  Cependant, il y a un problème induit puisque cela génère virtuellement  100 lignes. En soit, cela
  ne pose pas de souci puisque les lignes ont une hauteur nulle. Mais les gap restent entre les lignes
  et créent un espace blanc non désiré. C’est pour cette raison qu’on utilise ici un column-gap entre
  les colonnes et un margin-bottom sur les cartes à la place d’un simple gap: 24px.
  */
  grid-row: 1/100;
}
.grille .carte {
  margin-bottom: 24px;
}
.grille .aucun-resultat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  grid-column: 1/-1;
  grid-row: 1/-1;
  text-align: center;
}
@media (min-width: 992px) {
  .grille .aucun-resultat {
    padding-top: 40px;
    grid-column-start: 2;
  }
}
.grille .aucun-resultat h1 {
  font-size: 1.8rem;
  line-height: 2rem;
}
.grille .aucun-resultat img {
  height: 250px;
}
.grille .aucun-resultat .bouton {
  width: fit-content;
  padding: 10px 24px;
}

.sommaire-replie .choix-filtre-besoin {
  margin: 24px 0;
}

.sommaire-deplie {
  display: none;
}
@media (min-width: 992px) {
  .sommaire-deplie {
    display: flex;
    flex-direction: column;
  }
}
.sommaire-deplie .entete-filtres {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.sommaire-deplie .entete-filtres img {
  width: 16px;
  height: 16px;
}
@media (min-width: 992px) {
  .sommaire-deplie .entete-filtres .chevron {
    display: none;
  }
}

.carte.service.lien-externe-produit > * {
  pointer-events: none;
}

.encart.fond-clair {
  background: white;
}
.encart.fond-clair h1 {
  margin-bottom: 48px;
}
@media (min-width: 992px) {
  .encart.fond-clair {
    padding: 72px var(--gouttiere);
  }
}
.encart.fond-clair .carte.parcours {
  box-shadow: 0 6px 18px 0 rgba(0, 0, 18, 0.16);
}

/*# sourceMappingURL=catalogue.css.map */