/* ==========================================================================
   Breadcrumb Styles
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. Base styles for both mobile & desktop
   - Common properties: layout, spacing, list reset
   ---------------------------------------------------------------------------- */
   .breadcrumb-mobile,
   .breadcrumb-desktop {
     display: flex;
     align-items: center;
     list-style: none;
     padding: 0;
     margin: 1rem 0;
   }
   
   /* ----------------------------------------------------------------------------
      2. Mobile-specific breadcrumb
      - Always visible below desktop breakpoint
      ---------------------------------------------------------------------------- */
   .breadcrumb-mobile {
     /* nothing to override here, base covers layout */
   }
   
   .breadcrumb-mobile li {
     margin-right: 0.4rem;
   }
   
   /* Pills for links/buttons/spans */
   .breadcrumb-mobile li > a,
   .breadcrumb-mobile li > button,
   .breadcrumb-mobile li > span {
     background: #fff;
     padding: 0.3rem 0.8rem;
     border-radius: 999px;
     text-decoration: none;
     color: #555;
     font-weight: 500;
     border: none;       /* only buttons really need this */
     cursor: pointer;     /* only buttons really need this */
   }
   
   /* Dropdown menu inside mobile breadcrumb */
   .breadcrumb-mobile .dropdown .dropdown-menu {
     display: none;
     position: absolute;
     background: #fff;
     box-shadow: 0 2px 6px rgba(0,0,0,0.1);
     border-radius: 4px;
     margin-top: 0.4rem;
     padding: 0.5rem 0;
   }
   
   /* Show dropdown when expanded */
   .breadcrumb-mobile .dropdown button[aria-expanded="true"] + .dropdown-menu {
     display: block;
   }
   
   /* Last item ellipsis for overflow */
   .breadcrumb-mobile li:last-child {
     display: inline-block;     /* for text-overflow to work */
     max-width: 12ch;           /* adjust as needed (~12 characters) */
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     cursor: help;              /* hint that there's more text */
   }
   
   /* ----------------------------------------------------------------------------
      3. Desktop-specific breadcrumb
      - Hidden by default, shown at desktop viewport
      ---------------------------------------------------------------------------- */
   .breadcrumb-desktop {
     display: none;
   }
   
   .breadcrumb-desktop li {
     display: inline-flex;
     align-items: center;
     margin-right: 0.4rem;
   }
   
   /* Pills for desktop links/spans */
   .breadcrumb-desktop li > a,
   .breadcrumb-desktop li > span {
     padding: 0.3rem 0.8rem;
     text-decoration: none;
     color: #555;
     font-weight: 500;
     display: inline-block;    /* ensures transform works on hover */
   }
   
   /* Hover state on desktop links */
   .breadcrumb-desktop li > a:hover {
     background: #e0e0e0;
     transform: translateX(2px);
   }
   
   .breadcrumb-desktop [aria-current="page"] > span {
    color: #555;                   /* même couleur que les autres liens */
    border-bottom: 2px solid #8c7c6b;  /* trait souligné en couleur marque */
    padding-bottom: calc(0.3rem - 2px); /* compense la bordure pour garder la hauteur */
  }
  .breadcrumb-mobile li[aria-current="page"] {
    display: inline-block;                /* pour que border-bottom ne prenne que la largeur du texte */
    border-bottom: 2px solid #8c7c6b;      /* trait souligné */
    color: #555;                           /* même couleur que les liens inactifs */
    cursor: default;                       /* pas cliquable */
  }
   
   /* Separator styling (if you inject separators via CSS or markup) */
   .breadcrumb-desktop .separator {
     margin-right: 0.4rem;
   }
   
   /* ----------------------------------------------------------------------------
      4. Responsive switch
      - Toggle visibility based on viewport width
      ---------------------------------------------------------------------------- */
   @media (min-width: 1024px) {
     .breadcrumb-mobile {
       display: none;
     }
     .breadcrumb-desktop {
       display: flex;
     }
   }
   
   /* ----------------------------------------------------------------------------
      5. Utility / wrapper spacing
      - Add top padding to the breadcrumb wrapper if needed
      ---------------------------------------------------------------------------- */
   .fil-d-ariane {
     /* Fil d’Ariane = breadcrumb in French */
     padding-top: 2rem;
   }