@charset "UTF-8";
* {
  box-sizing: border-box; }

body {
  font-size: 1.6rem;
  margin: 0;
  font-family: "DM Sans", sans-serif;
  z-index: 1;
  font-size: 13px; }

.filtres {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 2rem; }
  .filtres .inputs-container {
    display: flex;
    gap: 4rem;
    margin-top: 1.5rem;
    align-items: flex-start; }
    .filtres .inputs-container .container_ingredients,
    .filtres .inputs-container .container_appareils,
    .filtres .inputs-container .container_ustensils {
      position: relative;
      width: 180px;
      background-color: white;
      border-radius: 5px;
      /* HEADER */
      /* CONTENU */
      /* ÉTAT ACTIF */ }
      .filtres .inputs-container .container_ingredients .title-img_container,
      .filtres .inputs-container .container_appareils .title-img_container,
      .filtres .inputs-container .container_ustensils .title-img_container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 1rem;
        padding-right: 1rem;
        cursor: pointer; }
        .filtres .inputs-container .container_ingredients .title-img_container .filtre-title,
        .filtres .inputs-container .container_appareils .title-img_container .filtre-title,
        .filtres .inputs-container .container_ustensils .title-img_container .filtre-title {
          font-size: .9rem; }
        .filtres .inputs-container .container_ingredients .title-img_container img,
        .filtres .inputs-container .container_appareils .title-img_container img,
        .filtres .inputs-container .container_ustensils .title-img_container img {
          width: 12px;
          transition: transform .3s ease; }
      .filtres .inputs-container .container_ingredients .filtre-content,
      .filtres .inputs-container .container_appareils .filtre-content,
      .filtres .inputs-container .container_ustensils .filtre-content {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        z-index: 10;
        display: none;
        padding: 0;
        height: auto;
        background-color: white;
        border-radius: 0px 0px 5px 5px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        /* icônes dans l’input */
        /* loupe */
        /* croix */
        /* croix visible quand input rempli */
        /* LISTES */ }
        .filtres .inputs-container .container_ingredients .filtre-content .filtres_input,
        .filtres .inputs-container .container_appareils .filtre-content .filtres_input,
        .filtres .inputs-container .container_ustensils .filtre-content .filtres_input {
          width: 100%;
          padding: .6rem 3.5rem .6rem .6rem;
          border-radius: 4px;
          border: 1px solid #c6c6c6;
          font-size: .85rem;
          outline: none; }
        .filtres .inputs-container .container_ingredients .filtre-content .filtres-img-ing,
        .filtres .inputs-container .container_ingredients .filtre-content .filtres-img-app,
        .filtres .inputs-container .container_ingredients .filtre-content .filtres-img-ust,
        .filtres .inputs-container .container_appareils .filtre-content .filtres-img-ing,
        .filtres .inputs-container .container_appareils .filtre-content .filtres-img-app,
        .filtres .inputs-container .container_appareils .filtre-content .filtres-img-ust,
        .filtres .inputs-container .container_ustensils .filtre-content .filtres-img-ing,
        .filtres .inputs-container .container_ustensils .filtre-content .filtres-img-app,
        .filtres .inputs-container .container_ustensils .filtre-content .filtres-img-ust {
          position: absolute;
          top: 22px;
          width: 14px;
          cursor: pointer; }
        .filtres .inputs-container .container_ingredients .filtre-content img[src*="search"],
        .filtres .inputs-container .container_appareils .filtre-content img[src*="search"],
        .filtres .inputs-container .container_ustensils .filtre-content img[src*="search"] {
          right: 17px; }
        .filtres .inputs-container .container_ingredients .filtre-content img[src*="delete-input"],
        .filtres .inputs-container .container_appareils .filtre-content img[src*="delete-input"],
        .filtres .inputs-container .container_ustensils .filtre-content img[src*="delete-input"] {
          display: none;
          right: 35px;
          opacity: 0;
          pointer-events: none;
          transition: opacity .2s; }
        .filtres .inputs-container .container_ingredients .filtre-content.has-value img[src*="delete-input"],
        .filtres .inputs-container .container_appareils .filtre-content.has-value img[src*="delete-input"],
        .filtres .inputs-container .container_ustensils .filtre-content.has-value img[src*="delete-input"] {
          display: inline-block;
          opacity: 1;
          pointer-events: auto; }
        .filtres .inputs-container .container_ingredients .filtre-content .selection_ingredients,
        .filtres .inputs-container .container_ingredients .filtre-content .selection_appareils,
        .filtres .inputs-container .container_ingredients .filtre-content .selection_ustensils,
        .filtres .inputs-container .container_appareils .filtre-content .selection_ingredients,
        .filtres .inputs-container .container_appareils .filtre-content .selection_appareils,
        .filtres .inputs-container .container_appareils .filtre-content .selection_ustensils,
        .filtres .inputs-container .container_ustensils .filtre-content .selection_ingredients,
        .filtres .inputs-container .container_ustensils .filtre-content .selection_appareils,
        .filtres .inputs-container .container_ustensils .filtre-content .selection_ustensils {
          margin-top: .8rem; }
          .filtres .inputs-container .container_ingredients .filtre-content .selection_ingredients .datalist_filtres,
          .filtres .inputs-container .container_ingredients .filtre-content .selection_appareils .datalist_filtres,
          .filtres .inputs-container .container_ingredients .filtre-content .selection_ustensils .datalist_filtres,
          .filtres .inputs-container .container_appareils .filtre-content .selection_ingredients .datalist_filtres,
          .filtres .inputs-container .container_appareils .filtre-content .selection_appareils .datalist_filtres,
          .filtres .inputs-container .container_appareils .filtre-content .selection_ustensils .datalist_filtres,
          .filtres .inputs-container .container_ustensils .filtre-content .selection_ingredients .datalist_filtres,
          .filtres .inputs-container .container_ustensils .filtre-content .selection_appareils .datalist_filtres,
          .filtres .inputs-container .container_ustensils .filtre-content .selection_ustensils .datalist_filtres {
            display: flex;
            flex-direction: column;
            gap: .4rem;
            list-style: none;
            padding: 0;
            margin: 0;
            max-height: 220px;
            overflow-y: auto; }
            .filtres .inputs-container .container_ingredients .filtre-content .selection_ingredients .datalist_filtres li,
            .filtres .inputs-container .container_ingredients .filtre-content .selection_appareils .datalist_filtres li,
            .filtres .inputs-container .container_ingredients .filtre-content .selection_ustensils .datalist_filtres li,
            .filtres .inputs-container .container_appareils .filtre-content .selection_ingredients .datalist_filtres li,
            .filtres .inputs-container .container_appareils .filtre-content .selection_appareils .datalist_filtres li,
            .filtres .inputs-container .container_appareils .filtre-content .selection_ustensils .datalist_filtres li,
            .filtres .inputs-container .container_ustensils .filtre-content .selection_ingredients .datalist_filtres li,
            .filtres .inputs-container .container_ustensils .filtre-content .selection_appareils .datalist_filtres li,
            .filtres .inputs-container .container_ustensils .filtre-content .selection_ustensils .datalist_filtres li {
              font-size: .8rem;
              cursor: pointer; }
              .filtres .inputs-container .container_ingredients .filtre-content .selection_ingredients .datalist_filtres li:hover,
              .filtres .inputs-container .container_ingredients .filtre-content .selection_appareils .datalist_filtres li:hover,
              .filtres .inputs-container .container_ingredients .filtre-content .selection_ustensils .datalist_filtres li:hover,
              .filtres .inputs-container .container_appareils .filtre-content .selection_ingredients .datalist_filtres li:hover,
              .filtres .inputs-container .container_appareils .filtre-content .selection_appareils .datalist_filtres li:hover,
              .filtres .inputs-container .container_appareils .filtre-content .selection_ustensils .datalist_filtres li:hover,
              .filtres .inputs-container .container_ustensils .filtre-content .selection_ingredients .datalist_filtres li:hover,
              .filtres .inputs-container .container_ustensils .filtre-content .selection_appareils .datalist_filtres li:hover,
              .filtres .inputs-container .container_ustensils .filtre-content .selection_ustensils .datalist_filtres li:hover {
                font-weight: bold; }
      .filtres .inputs-container .container_ingredients.active .filtre-content,
      .filtres .inputs-container .container_appareils.active .filtre-content,
      .filtres .inputs-container .container_ustensils.active .filtre-content {
        display: block;
        height: auto;
        padding: .8rem; }
  .filtres .reste-recette p {
    font-family: "Anton", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: large; }

.section_tags {
  padding: 1rem;
  display: flex; }
  .section_tags-tag {
    display: flex;
    align-items: center;
    border-radius: .3rem;
    padding: 1rem;
    height: 0vh; }
    .section_tags-tag p {
      padding-right: .5rem;
      color: black; }
  .section_tags-delete {
    height: 3vh;
    cursor: pointer; }

div[data-type="ingredients"], div[data-type="appliance"], div[data-type="ustensils"] {
  background-color: #FFD15B;
  margin-right: 1rem; }

.recherche {
  display: flex;
  padding: 1rem 2rem 1rem 1rem; }
  .recherche_input {
    width: 100%;
    height: 5vh;
    border-radius: .3rem 0rem 0rem .3rem;
    border: none;
    padding: 1rem; }
  .recherche_loupe {
    position: absolute;
    width: 2%;
    padding: .5rem;
    background-color: #E7E7E7;
    border-radius: .3rem .3rem .3rem .3rem;
    right: 18%;
    top: 41.8%;
    cursor: pointer;
    filter: invert(100%) sepia(3%) saturate(1%) hue-rotate(20deg) brightness(105%) contrast(100%); }
  .recherche_delete {
    position: absolute;
    right: 20%;
    top: 41%;
    width: 3%;
    padding: .5rem;
    cursor: pointer; }

/* le header */
header {
  height: 60vh; }
  header #header_image-container {
    background-image: url("../../img/header-bg.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    height: 60vh;
    width: 100%; }
    header #header_image-container .logo-header {
      padding: 2rem;
      width: 20%; }
    header #header_image-container h1 {
      font-family: "Anton", sans-serif;
      font-weight: 400;
      font-style: normal;
      text-align: center;
      color: #FFD15B;
      font-size: 3rem; }
    header #header_image-container .recherche {
      width: 70%;
      margin-left: auto;
      margin-right: auto; }

main {
  padding-right: 2rem;
  padding-left: 2rem;
  background-color: #E7E7E7; }

.selection_ingredients .datalist_ingredients {
  padding: 1rem; }

.recettes {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap; }
  .recettes_recette {
    width: 31%;
    height: 100vh;
    margin: 1rem 1rem 1rem 0rem;
    background-color: white;
    overflow: auto;
    border-radius: 1rem;
    cursor: pointer; }
    .recettes_recette-illustration {
      height: 40%; }
      .recettes_recette-illustration img {
        width: 100%;
        height: 100%;
        object-fit: cover; }
      .recettes_recette-illustration span {
        position: relative;
        padding: .5rem;
        bottom: 90%;
        border-radius: 1rem;
        background-color: #FFD15B;
        color: black;
        left: 80%; }
    .recettes_recette-description {
      padding: 1.5rem; }
      .recettes_recette-description .container {
        display: flex;
        justify-content: space-between; }
        .recettes_recette-description .container h2 {
          margin: 0;
          font-family: "Anton", sans-serif;
          font-weight: 400;
          font-style: normal; }
        .recettes_recette-description .container_temps {
          align-items: center;
          display: flex; }
          .recettes_recette-description .container_temps-img {
            height: 2vh;
            margin-right: .5rem; }
      .recettes_recette-description .ingredients_etapes {
        margin-top: 1rem; }
        .recettes_recette-description .ingredients_etapes-ingredients {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          grid-gap: 20px; }
          .recettes_recette-description .ingredients_etapes-ingredients p {
            margin: 0; }
    .recettes_recette h3 {
      color: gray; }

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