/* FR_SITE_SIDEBAR_V1:START */

:root{
  --fr-site-sidebar-width:220px;
}

.fr-site-layout{
  display:grid;
  grid-template-columns:
    var(--fr-site-sidebar-width)
    minmax(0,1fr);

  width:100%;
  min-height:100vh;

  align-items:start;
}

.fr-site-sidebar{
  position:sticky;
  top:0;

  align-self:start;

  width:
    var(--fr-site-sidebar-width);

  height:100vh;

  overflow-y:auto;

  padding:
    18px 10px
    32px;

  background:
    linear-gradient(
      180deg,
      rgba(7,10,23,.99),
      rgba(3,5,13,.995)
    );

  border-right:
    1px solid
    rgba(65,91,180,.28);

  scrollbar-width:none;

  z-index:100;
}

.fr-site-sidebar::-webkit-scrollbar{
  display:none;
}

.fr-site-sidebar-brand{
  display:block;

  margin:
    0 10px
    22px;

  color:#fff;

  font-family:
    Arial,
    sans-serif;

  font-size:
    1.02rem;

  font-weight:950;

  letter-spacing:
    -.055em;

  text-decoration:none;

  white-space:nowrap;
}

.fr-site-sidebar-brand span:nth-child(1){
  color:#fff;
}

.fr-site-sidebar-brand span:nth-child(2){
  color:#2563eb;
}

.fr-site-sidebar-brand span:nth-child(3){
  color:#ef233c;
}

.fr-site-sidebar-nav{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.fr-site-sidebar-nav > a,
.fr-site-category-links a{
  display:block;

  width:100%;

  padding:
    9px 10px;

  border:
    1px solid
    transparent;

  border-radius:
    9px;

  color:
    #d7deea;

  font-family:
    Arial,
    sans-serif;

  font-size:
    .79rem;

  font-weight:
    850;

  line-height:
    1.18;

  text-decoration:none;

  transition:
    background .15s ease,
    color .15s ease,
    border-color .15s ease;
}

.fr-site-sidebar-nav > a:hover,
.fr-site-category-links a:hover{
  background:
    rgba(255,255,255,.055);

  color:#fff;
}

.fr-site-sidebar-nav > a.active,
.fr-site-category-links a.active{
  background:
    rgba(239,31,48,.10);

  border-color:
    rgba(239,31,48,.30);

  color:#fff;
}

.fr-site-favorites-link{
  color:
    #ffbd55 !important;
}

.fr-site-sidebar-label{
  margin:
    18px 10px
    7px;

  color:
    rgba(255,255,255,.43);

  font-family:
    Arial,
    sans-serif;

  font-size:
    .65rem;

  font-weight:
    900;

  letter-spacing:
    .12em;

  line-height:1.2;
}

.fr-site-category-links{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.fr-site-more-categories{
  margin-top:7px;
}

.fr-site-more-categories summary{
  display:block;

  width:100%;

  padding:
    9px 10px;

  cursor:pointer;

  list-style:none;

  border:
    1px solid
    rgba(255,255,255,.075);

  border-radius:
    9px;

  background:
    rgba(255,255,255,.025);

  color:
    #e7eaf0;

  font-family:
    Arial,
    sans-serif;

  font-size:
    .78rem;

  font-weight:
    900;

  user-select:none;
}

.fr-site-more-categories summary::-webkit-details-marker{
  display:none;
}

.fr-site-more-categories summary::before{
  content:"▾ ";
  color:#ffd166;
}

.fr-site-more-categories[open] summary::before{
  content:"▴ ";
}

.fr-site-category-links-more{
  margin-top:5px;

  padding-left:7px;

  border-left:
    1px solid
    rgba(255,209,102,.14);
}

.fr-site-content{
  min-width:0;
  width:100%;
}


/*
 * Existing page templates have their own
 * widths/paddings. This wrapper only gives
 * them the sidebar column.
 */
.fr-site-content > .page,
.fr-site-content > .wrap,
.fr-site-content > .fav-shell{
  max-width:none;
}


/* MOBILE:
 * Keep the site's current page layout dominant.
 * Sidebar becomes a navigation block AFTER content,
 * matching the existing France homepage behavior.
 */
@media(max-width:980px){

  .fr-site-layout{
    display:flex;
    flex-direction:column;
  }

  .fr-site-content{
    order:1;
  }

  .fr-site-sidebar{
    order:2;

    position:relative;

    width:100%;
    height:auto;

    overflow:visible;

    border-right:0;

    border-top:
      1px solid
      rgba(255,255,255,.08);

    margin-top:24px;
  }

  .fr-site-sidebar-nav{
    display:grid;
    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:5px;
  }

  .fr-site-sidebar-label,
  .fr-site-category-links,
  .fr-site-more-categories{
    grid-column:
      1 / -1;
  }

  .fr-site-category-links{
    display:grid;
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}


@media(max-width:560px){

  .fr-site-sidebar{
    padding-bottom:80px;
  }

}

/* FR_SITE_SIDEBAR_V1:END */