@view-transition {
  navigation: auto;
}

html {
  scroll-behavior: smooth;
}

body {
  position: relative;
}

/* brush */
.fr-brush {
  background-color: transparent;
  border-image-outset: 25 0 0 0;
  border-image-repeat: stretch stretch;
  border-image-slice: 27 27 48 27;
  border-image-source: url('/_ui/artwork/background/brush.svg');
  border-image-width: 0 6% 24% 6%;
  border-style: solid;
  font-weight: 600;
  line-height: 1;
  margin-inline-start: .5rem;
}

/* user menu */
.fr-header .fr-user {
  --rows: 8;
  position: relative;

  .fr-user__details {
    padding: 1rem;
    text-align: start;

    p {
      max-width: 14rem;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: block;
      overflow: hidden;
    }
  }

  .fr-user__btn {
    margin-block-end: 0;

    &::after {
      display: inline-block;
      vertical-align: calc((.75em - var(--icon-size)) * .5);
      background-color: currentcolor;
      width: var(--icon-size);
      height: var(--icon-size);
      mask-size: 100% 100%;
      mask-image: url('/_ui/icons/system/arrow-down-s-line.svg');
      --icon-size: 1rem;
      content: "";
      margin-inline-start: auto;
      transition: transform 0.3s;
      flex: 0 0 auto;

      @media (min-width: 62em) {
        margin-inline-start: 0.25rem;
        margin-inline-end: -0.25rem;
      }
    }

    &[aria-expanded="true"]::after {
      transform: rotate(-180deg);
    }
  }

  .fr-menu {
    /* @media (width >= 62em) {
      margin: -.25rem -1rem 0;
    } */

    .fr-menu__list {
      width: auto;
      min-width: 16rem;
      display: grid;
      grid-template-rows: repeat(var(--rows), auto);
      grid-auto-flow: column;

      .fr-nav__link {
        border-top: 1px solid var(--border-default-grey);
        gap: .5rem;
        justify-content: flex-start;

        &::before {
          --icon-size: 1.125rem;
        }
      }

      li:last-of-type {
        padding: .625rem;

        .fr-btn {
          width: 100%;
          margin-block-end: 0;
          margin-inline: auto;
          justify-content: center !important;
        }
      }
    }
  }
}

/* content */

.content-header {
  position: relative;

  &:after {
    z-index: 100;
    content: '';
    position: absolute;
    top: 100%;
    left: 1rem;
    width: 6.25rem;
    height: 0.25rem;
    background-color: var(--text-action-high-blue-france);

    @media (min-width: 62em) {
      left: 1.5rem;
    }

    @media (min-width: 78em) {
      left: calc((100% - 75rem) / 2);
    }
  }
}

.content-page {
  position: relative;
}

@media (min-width: 48em) {
  .fr-sidemenu {
    padding-right: 0;
  }

  .fr-sidemenu .fr-sidemenu__inner {
    padding-block-start: 1.5rem;
  }
}

.page-header {

  @media (min-width: 48em) {
    margin-left: -100px;
    padding-left: 100px;
  }

  @media (max-width: 62em) {
    margin: 0 -1rem;
    padding: 0 1rem;
  }

  .summary {
    --offset-top: 0px;
    height: calc(100% - var(--offset-top));
    left: calc(66.66667% + .75rem);
    margin-left: -.75rem;
    padding-left: .75rem;
    position: absolute;

    .fr-summary {
      background-color: var(--background-default-grey);
      display: block;
      filter: drop-shadow(var(--overlap-shadow));
      z-index:1;

      &.fr-sidemenu--sticky-full-height {
        height: max-content;
        max-height: 100vh;
        overflow-y: auto;
      }
    }
  }
}

/* tabs */
.fr-tabs__list > li {
  list-style: none;

  & > .fr-link {
    align-items: center;
    display: inline-flex;
    flex-direction: row;
    margin: 0 .25rem 0 .75rem;
    overflow: visible;
    padding-top: .5rem;
    /* padding-inline: .25rem; */
    position: relative;
    white-space: nowrap;
    width: fit-content;
    z-index: 1;
  }
}

/* summary */
.fr-summary.fr-sidemenu--sticky-full-height {
  background-color: var(--background-default-grey);
  filter: drop-shadow(var(--overlap-shadow));
  z-index: 1;
  height: max-content;
}

.fr-block-sticky {
  height: 94%;

  .fr-sidemenu {
    position: sticky;
    top: 1.825rem;
    overflow-y: auto;
    max-height: 94vh;
  }
}

/* modal */
@media (min-width: 48em) {
  .fr-modal--right {
    --padding-size: 2rem;
    /* --max-width: attr(data-width rem, 31.25rem); */ /* ne fonctionne pas dans firefox esr */
    height: 100% !important;
    display: flex !important;
    padding-bottom: 0 !important;

    .fr-container {
      max-height: 100vh;
      height: 100vh;
    }

    .fr-modal__body {
      position: fixed !important;
      right: 0;
      height: 100vh;
      max-height: 100vh !important;
      top: 0;
      width: 100%;
      max-width: var(--max-width, 31.25rem);
      position: relative;
      overflow: auto;
    }

    .submit-wrapper {
      margin-top: .5rem;
      max-width: var(--max-width, 31.25rem);
    }
  }
}

.fr-modal--right {
  .fr-modal__footer {
    z-index: 4;
    margin-top: 0 !important;
  }

  .fr-col-12 {
    position: relative;
    overflow: hidden;
  }

  .submit-wrapper {
    background-color: #fff;
    /* position: fixed; */
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    padding-left: var(--padding-size);
    padding-right: var(--padding-size);
    z-index: 100000;

    button {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .search-fieldset {
    padding: 0.75rem 2.5rem;
  }
}

.fr-modal--filter {
  .fr-fieldset__element {
    margin-block-end: 0;
  }

  .fr-checkbox-group {
    border-top: 1px solid var(--border-default-grey);

    .fr-label {
      padding-block: .75rem;

      &::before {
        top: 1rem;
        width: 1rem;
        height: 1rem;
      }
    }
  }
}

/* button */
.fr-btn--xs.fr-btn--icon-right[class*=" fr-icon-"],
.fr-btn--xs.fr-btn--icon-right[class^=fr-icon-] {
  max-height: none;
  max-width: 100%;
  overflow: initial;

  &:after {
    --icon-size: 1rem;
    content: '';
    margin-left: .5rem;
    margin-right: -.125rem;
  }
}

.fr-btn--xs {
  /* box-shadow: none; */
  font-size: .75rem;
  line-height: 1.25rem;
  min-height: 1.125rem;
  padding: 0 .375rem 0 .425rem;
}

/* to-top */
.to-top {
	position: absolute;
  top: 120vh;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 999;

  a {
    position: sticky;
    top: 90vh;
    border-radius: 50%;
  }
}

/* tom-select */
.ts-wrapper.single .ts-control,
.ts-wrapper.single.input-active .ts-control {
  background-color: transparent;
  background-image: none;
  border: 0;
  box-shadow: none;
  padding-left: 0;
}

.ts-control > input,
.ts-control > .item {
  margin-top: -.375rem !important;
  padding: 0;
  font-size: 1rem;
}

.has-items .ts-control > input {
  margin-top: -.375rem !important;
}

/* table des matières */
.tdm {
  margin: 1rem .75rem 1.5rem;
  padding: 0;
  border-block-start: 0;

  ul {
    margin: 0;
    padding-inline-start: 1.25rem;
    border-inline-start: 2px solid var(--border-color);
  }

  li[role="treeitem"] {
    list-style: none;

    &[aria-expanded="false"] {
      > .tdm__articles,
      > [role="group"] {
        display: none;
      }
      > button::before {
        transform: rotate(-90deg);
      }
    }

    &[aria-expanded="true"] {
      > .tdm__articles {
        display: flex;
      }
      > [role="group"] {
        display: block;
      }
    }

    &[aria-level="1"] {
      --border-color: var(--border-open-red-marianne);

      > button {
        color: var(--text-action-high-red-marianne);
        font-size: 1.5rem;
        font-weight: 400;
      }
    }

    &[aria-level="2"] {
      --border-color: var(--border-open-blue-france);

      > button {
        color: var(--text-action-high-blue-ecume);
        font-size: 1.4rem;
        font-weight: 500;
      }
    }

    &[aria-level="3"] {

      > button {
        color: var(--text-action-high-blue-ecume);
        font-size: 1.3rem;
        font-weight: 400;
      }
    }

    &[aria-level="4"] {
      --border-color: var(--border-disabled-grey);

      > button {
        font-weight: 600;
      }
    }

    &[aria-level="5"] {

      > button {
        font-weight: 500;
      }
    }
  }

  button {
    --icon-size: 1.25rem;
    --active-tint: transparent;
    --hover-tint: transparent;
    margin-inline-start: -.825rem;
    text-align: start;

    &::before {
      height: var(--icon-size);
      width: var(--icon-size);
      background-color: currentColor;
      content: '';
      display: inline-block;
      mask-image: url('/_ui/icons/system/arrow-down-s-fill.svg');
      mask-size: 100% 100%;
      transition: transform .3s;
      vertical-align: middle;
    }
  }

  .tdm__articles {
    padding: .5rem 1rem .75rem;
    align-items: center;
    border-inline-start: 2px solid var(--border-color);
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
  }
}

/* jo */
.jo {
  h2 {
    color: var(--blue-ecume-main-400);
    font-size: 1.625rem;
    font-weight: 500;
    text-transform: uppercase;
  }
  h3 {
    color: var(--red-marianne-main-472);
    font-size: 1.285rem;
    font-weight: 400;
    margin-left: .625rem;
    margin-bottom: .5rem;
  }
  h4 {
    color: var(--blue-ecume-main-400);
    font-size: 1.125rem;
    font-weight: 400;
    margin-left: 1.5rem;
  }
  p {
    border-left: 2px solid var(--grey-950-125);
    margin-left: 1.5rem;
    padding-left: 2.5rem;
    padding-block: .5rem;
    position: relative;
    line-height: 1.2em;

    &::before {
      color: var(--red-marianne-main-472);
      content: attr(data-sequence) '.';
      display: inline-flex;
      position: absolute;
      /* left: 1rem; */
      right: calc(100% - 2.5rem);
      margin-right: .25rem;
    }

    /* a {
      line-height: 1.2em;
    } */
  }
}