/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
:root {
  --space-sm: 10px;
  --space-md: 15px;
  --space-lg: 23px;
}
.lay-content .clients p {
  display: none;
}
@media screen and (min-width: 601px) {
  /* .thead, */
  ._S_body {
    font-size: 1.2vw;
    margin: 0;
  }
  .px-md {
    padding-left: 3%;
    padding-right: 3%;
  }
  .table {
    padding: 0;
  }
}
.hidden {
  display: none;
}

.table {
  width: 100%;
  table-layout: fixed;
  padding: var(--space-md) 0;
}
.table p {
  display: none;
}
.thead {
  display: none;
  margin: 0;
}

.thead .th {
  cursor: pointer;
  text-align: left;
  font-weight: initial;
  padding-right: 1em;
}
.thead .th:last-child {
  padding-right: 0;
}
.tr.t-project-row {
  /* min-height: 1.6vw; */
  height: auto;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}

/*
  GRID SYST
*/
.table .tr {
  /* display: grid; */
  /* grid-template-columns: repeat(12, 1fr); */
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  box-sizing: border-box;
  /* border-top: 0 solid black; */
  /* min-height: 1.6vw;
  min-height: 1.6em;
  height: auto; */
  /* padding: 0.5em 0; */
  border-top: 1px solid black;
}
.thead .tr {
  /* min-height: 2.6em; */
}

@media screen and (min-width: 601px) {
  .table .tr {
    flex-direction: row;
    /* padding: 0; */
    border-top: unset;
    /* min-height: 1.6vw; */
  }
  .thead {
    display: block;
  }

  .td-year {
    width: 7% !important;
    flex-basis: 7% !important;
  }
  .td-client {
    width: 30% !important;
    flex-basis: 30% !important;
  }
  .td-projet {
    width: 37% !important;
    flex-basis: 37% !important;
    width: 43% !important;
    flex-basis: 43% !important;
  }
  .td-mission {
    width: 20% !important;
    flex-basis: 20% !important;
  }
}
@media screen and (max-width: 601px) {
  #clients-index {
    padding-top: 0;
  }
  .tbody .tr:first-child {
    border: none;
  }
  .tr.t-project-row {
    padding: 1rem 0;
  }
  .td-year,
  .td-client,
  .td-projet,
  .td-mission {
    width: 100% !important;
  }
}
.tr.has-images .td {
  cursor: s-resize;
}
.tr.is-active {
  color: #808080;
}
.tr.is-active:hover {
  background-color: white;
  color: #808080;
}
.tr p {
  display: none;
}
.td-images {
  display: none;
}
.th,
.td {
  vertical-align: top;
  padding-right: var(--space-md);
  flex-shrink: 0;
  flex-grow: 0;
  box-sizing: border-box;
}
.td-mission {
  padding-right: 0;
}
.th:not(.td-images) {
  display: flex;
  justify-content: space-between;
}
.th:hover {
  color: black;
}
.th:hover svg path {
  fill: black;
}
.th svg {
  height: 10px;
  width: 5px;
}

.td-projet,
.td-client {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  position: relative;
}

.inner {
  position: relative;
  overflow: hidden;
}

.tr.is-hover .td-client::before,
.tr.is-hover .td-client::after,
.tr.is-hover .td-projet::before,
.tr.is-hover .td-projet::after {
  content: "";
  width: 2em;
  height: 100%;
  position: absolute;
  top: 0;
  background: linear-gradient(
    90deg,
    rgba(245, 245, 245, 1),
    rgba(245, 245, 245, 0)
  );
  z-index: 10;
}
.tr.is-hover .td-client::after,
.tr.is-hover .td-projet::after {
  right: 1em;
  transform: rotate(180deg);
}

.marquee {
  animation: marquee 20s linear;
}

.clients .detail {
  position: relative;
  width: 100%;
  padding: 1rem 0;
  padding: 1rem 0;
}
.clients .detail .images {
  display: flex;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.clients .detail .images::-webkit-scrollbar {
  display: none;
}

.clients .detail .close {
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
}

.clients .detail img {
  margin-right: 1rem;
  margin-right: 1rem;
  max-height: 300px;
}
.clients .detail img:last-child {
  margin-right: 0;
}

.ico-sort::after {
  /*content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='10' viewBox='0 0 5.2 10'%3E%3Ctitle%3EFichier 1%3C/title%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Cg id='Calque_1-2' data-name='Calque 1'%3E%3Cpath d='M2.6,1.6,4.4,3.4l.8-.8L2.6,0,0,2.6l.8.8Zm0,6.8L.8,6.7,0,7.4,2.6,10,5.1,7.4l-.8-.7Z' fill='%23bfbfbf'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");*/
  /* content: url("data:image/svg+xml,%3Csvg width='9' height='7' viewBox='0 0 9 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.52116 0.96521L4.33366 4.14577L1.14616 0.96521L0.166992 1.94438L4.33366 6.11104L8.50033 1.94438L7.52116 0.96521Z' fill='%23a0a0a0'/%3E%3C/svg%3E%0A");
  width: 5px;
  height: 10px; */
}

.hide-scroll-bar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.hide-scroll-bar::-webkit-scrollbar {
  display: none;
}

@keyframes marquee {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-100%);
  }
}