/* Mise en page — Deux colonnes ——————————————————————— */

/* Grille de contenu générique à deux colonnes */
.two-col {
  display: grid;
  gap: var(--space-8);

  @media (width > 720px) {
    grid-template-columns: 1fr 1fr;
  }
}

.layout-2-col {
  display: grid;
  /*gap: var(--space-8);*/

  .sidebar,
  .main-content {
    background-color: var(--color-clear-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-border);
  }

  /* Mobile : sidebar transparente et sans ombre (la nav fixe a son propre fond) */
  .sidebar {
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
  }
}

/* Desktop */
@media (width > 720px) {
  .layout-2-col {
    gap: var(--space-8);
    grid-template-columns: minmax(240px, 1fr) 4fr;
    grid-template-areas: "sidebar main-content";

    .sidebar {
      background-color: var(--color-clear-bg);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-border);
    }

    .sidebar__inner {
      position: sticky;
      top: var(--space-8);
    }
  }

  /* Sidebar repliée : colonne étroite */
  .layout-2-col:has(.sidebar--collapsed) {
    grid-template-columns: auto 1fr;
  }
}

/* Titre du contenu principal (pages hors accueil) */
.main-content:not(.home) {
  .section-title {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    font-family: var(--ff-headings);
    font-weight: 500;
    font-size: 0.875rem;
    letter-spacing: 0.025rem;
    line-height: 1.35;
    margin-block: 1.25rem;
    padding-inline: var(--space-20);
    text-transform: uppercase;

    &::before {
      background-color: var(--color-accent);
      border-radius: 50%;
      content: "";
      display: inline-block;
      flex-shrink: 0;
      height: 9px;
      margin-inline-end: 0.4rem;
      width: 9px;
    }
    
    a {
      margin-inline-end: var(--space-4);
      text-decoration-thickness: 1px;
      text-underline-offset: 3px;
    }

    strong {
      margin-inline: var(--space-4);
    }
  }
}

/* Fil d'Ariane — séparateur chevron identique à .breadcrumb-nav
   (centre d'aide) pour la cohérence graphique. Ici les items sont des <li>. */
.breadcrumb {
  gap: var(--space-24);

  & > li:not(:last-child) {
    position: relative;
  }

  & > li:not(:last-child)::after {
    background-color: color-mix(in srgb, var(--color-body-text) 50%, transparent);
    bottom: 0;
    content: "";
    height: var(--space-16);
    margin-block: auto;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M5.5 3.5 10.5 8 5.5 12.5' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    position: absolute;
    right: calc(-1 * var(--space-20));
    top: 0;
    width: var(--space-16);
  }
}

/* Section du tableau de bord */
.dashboard-section {
  margin-block-end: var(--space-32);
  margin-inline: var(--space-8);
  
  &.single-demand {
    margin-block-end: var(--space-4);
    
    &:last-child {
      margin-block-end: var(--space-8);
    }
    
    }

  .section-heading {
    align-items: baseline;
    display: flex;
    justify-content: space-between;
  }

  .section-heading__title {
    font-size: var(--fs-small);
    font-weight: 600;
    margin-block: var(--space-12);
    margin-inline: var(--space-12);
    
    & + .flex-group {
      margin-inline-end: var(--space-12);
    }
  }

  .button-group {
    display: flex;
    gap: var(--space-8);
    margin-inline-end: var(--space-12);
  }

  .layout-toggle {
    display: none;
    gap: var(--space-8);
    margin-inline-end: var(--space-12);

    .layout-toggle__btn {
      aspect-ratio: 1;
      background: none;
      border: none;
      border-radius: var(--radius-sm);
      cursor: pointer;
      display: flex;
      padding: 0;
      transition: background-color 0.2s ease;

      &:hover,
      &:active,
      &:focus,
      &.active {
        background-color: var(--color-surface-lighter);
        box-shadow: inset 0 0 0.25rem rgba(0, 0, 0, 0.1);
      }
    }
  }
  
  &.single-demand {

    .section-heading {
      padding-inline-end: var(--space-12);
    }

    .section-heading__title {
      font-size: var(--fs-body);
      font-weight: 600;

      span {
        font-weight: 600;
      }
    }

    /* Chevron + animation */
    .details-chevron {
      flex-shrink: 0;
      transition: transform 0.2s ease;
    }

    details[open] .details-chevron {
      transform: rotate(180deg);
    }

    details[open] > :not(summary) {
      animation: details-expand 0.2s ease;
    }
  }
}

@keyframes details-expand {
  from {
    opacity: 0;
    transform: translateY(-0.375rem);
  }
}

@media (width > 720px) {
  .dashboard-section .layout-toggle {
    align-self: end;
    display: flex;
    margin-block-end: var(--space-12);
  }
}

.request-details-page {
  .single-demand {
    
    .section-heading {
      padding-block: var(--space-16) 0;
    }

    .section-heading__title {
      font-size: var(--fs-small);
      font-weight: 600;
      margin-block-end: var(--space-8);
    }
  }
  
  .alert + .two-col {
    margin-block-start: var(--space-20);
  }
  
  details {
    border-bottom: 1px solid var(--color-border-light);
    
    &[open] {
      border-bottom: none;
    }
  }
}