footer{

  background: #444;
  width: 100%;
}


/* ____ Prev Next  __________________________________*/
    footer {
      background: #444;
      width: 100%;
      padding: 1rem 0;
      color: white;
    }

    footer .grid_6 {
      display: grid;
      grid-template-columns: auto 1fr auto;
      grid-template-areas: "previous breadcrumbs next";
      align-items: center;
      gap: 1rem;
      max-width: 100%;
      padding: 0 1rem;
    }

    .previous {
      grid-area: previous;
    }

    .next {
      grid-area: next;
    }


















        /*glissement basé sur la hauteur réelle*/
    .toggleContent {
      overflow: hidden;
      height: 0;
      transition: height 0.4s ease;
    }










/* Breadcrumbs */
 .breadcrumbs {
      grid-area: breadcrumbs;
      display: flex;
      justify-content: center;
      flex: 1;
      min-width: 0;
      overflow-x: auto;
    }

    .previous > a,
    .next > a {
      display: inline-block;
      padding: 0.5rem 1rem;
      background-color: #555;
      box-shadow: inset 1px 1px 2px #1b1b1b, -1px -1px 2px #6d6d6d;
      border-radius: 10px;
      color: white;
      text-decoration: none;
      white-space: nowrap;
            font-weight: bold;
    }

    .cont_principal {
      padding: 0.5rem;
      border-radius: 8px;
      min-width: max-content;
    }

    .cont_breadcrumbs_1 {
      display: flex;
      justify-content: center;
    }

    #breadcrumbList {
      display: flex;
      padding: 0;
      margin: 0;
      list-style: none;
      position: relative;
      transition: all 0.5s ease;
      cursor: pointer;
    }

    #breadcrumbList > li {
      position: relative;
      float: left;
      width: 100px;

      box-shadow: inset 1px 1px 2px #1b1b1b, -1px -1px 2px #6d6d6d;
      text-align: center;
      margin-left: -70px;

      border-radius: 10px;
      padding: 0.5rem 1rem;
      transition: all 0.4s ease;
      z-index: 1;
      background-color: #555555;
    }

    #breadcrumbList > li:first-child {
      margin-left: 0;
    }

    #breadcrumbList > li > a {
      display: block;
      color: white;
      text-decoration: none;
      font-weight: bold;
      padding: 0 10px;
    }

    #breadcrumbList > li:hover {
      background: #ffecb3;
      box-shadow:
        inset 4px 4px 8px #c7b299,
        inset -4px -4px 8px #fff1d6;
      transform: scale(1.05);
    }

    #breadcrumbList:hover > li {
      margin-left: 0;
      z-index: auto;
    }

    #breadcrumbList li.active {
      background: #4fc3f7;
      color: white;
      box-shadow:
        inset 2px 2px 5px #3ab0e2,
        inset -2px -2px 5px #6fdcff;
    }

    #breadcrumbList li.active > a {
      color: white;
      text-shadow: 1px 1px 0 #333;
    }

    #breadcrumbList li.active::after {
      content: "✨";
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 0.8em;
    }

    @media (max-width: 768px) {
      footer .grid_6 {
        width: 200px;
        grid-template-columns: 1fr;
        grid-template-areas:
          "breadcrumbs"
          "previous"
          "next";
        text-align: center;
        justify-items: center;
      }

      .previous,
      .next {
        margin-top: 0.5rem;
      }

      .breadcrumbs {
        justify-content: flex-start;
        display: none;
      }

      #breadcrumbList > li {
        margin-left: 0 !important;
      }

      #breadcrumbList:hover > li {
        margin-left: 0;
      }

      .myBtn{
        padding: 0px;
        right: 100px;
      }
}