@media screen and (min-width: 601px) {
  #header .normal .right #navigator .item.ishome {
    pointer-events: none;
  }
}

/***** service_show_little *****/
#service_show_little .body {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--espace) var(--espace) 0;
}

#service_show_little .body .item {
  transition: all var(--transition-ease);
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: var(--color-000);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  border-radius: var(--radius-050);
  padding: 20px;
  overflow: hidden;
}

#service_show_little .body .item.on {
  padding: var(--espace);
}

#service_show_little .body .item:nth-child(1) {
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("../../img/photography_003.jpg");
}

#service_show_little .body .item:nth-child(2) {
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("../../img/informatic_002.jpg");
}

#service_show_little .body .item:nth-child(3) {
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("../../img/comunitymanagement_004.jpg");
}

#service_show_little .body .item:nth-child(4) {
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("../../img/seller_002.jpg");
}

#service_show_little .body .item > * {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  border-radius: var(--radius-050);
}

@media screen and (max-width: 600px)  {
  #service_show_little .body {
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
  }
  
  #service_show_little .body::-webkit-scrollbar {
    display: none;
  }
  
  #service_show_little .body .item {
    scroll-snap-align: center;
    scroll-snap-stop: always;
    min-width: 90%;
    height: 300pt;
  }
}

@media screen and (min-width: 601px) {
  #service_show_little .body .item {
    flex: 1;
    height: 350pt;
  }

  #service_show_little .body .item:hover {
    flex: 1.5;
  }

  #service_show_little .body .item.on {
    flex: 20;
  }
}

/***** MORE *****/
#service_show_little .body .item .name .in {
  display: flex;
  align-items: center;
  gap: var(--espace);
}

#service_show_little .body .item .name .in .repere {
  min-width: 6pt;
  min-height: 6pt;
  border-radius: 50%;
  border: 1px solid var(--color-000);
}

#service_show_little .body .item .content {
  padding: 0;
  display: grid;
  align-content: flex-end;
}

#service_show_little .body .item .content .title {
  font-family: "yoga";
}

#service_show_little .body .item .content .text {
  margin: var(--espace) 0 15px;
}

#service_show_little .body .item .content .btn {
  background: var(--color-000);
  color: var(--color-950);
  border: 1px solid var(--color-000) !important;
  font-family: "medium";
}

#service_show_little .body .item .content .barre {
  background: #FFFFFF50;
  height: 1pt;
  margin: var(--espace) 0 0;
}

#service_show_little .body .item .content .barre span {
  display: block;
  width: 0%;
  height: 100%;
  background: var(--color-000);
  transition: all var(--transition-ease);
}

@media screen and (max-width: 600px) {
  #service_show_little .body .item .name .in .is_language {
    order: 2;
  }
  
  #service_show_little .body .item .name .in .repere {
    order: 1;
  }

  #service_show_little .body .item .content .title {
    font-size: var(--font-size-400);
  }
  
  #service_show_little .body .item .more {
    display: none;
  }
}

@media screen and (min-width: 601px) {
  #service_show_little .body .item .name {
    border-radius: 0;
    transform-origin: right center;
    transform: rotateZ(-90deg);
    transition: all var(--transition-ease);
    width: 0;
    height: max-content;
    white-space: nowrap;
    position: absolute;
    left: auto;
    right: 50%;
    display: flex;
    align-items: flex-start;
  }
  
  #service_show_little .body .item .name .in {
    position: absolute;
    left: auto;
    right: 50%;
    margin: -5pt 0 0;
  }
  
  #service_show_little .body .item.on .name {
    margin: 0 0 0 auto;
    transform: rotate(0);
    position: relative;
    left: 0;
    right: 0;
  }
  
  #service_show_little .body .item .content {
    overflow: hidden;
    transition: all var(--transition-ease);
    opacity: 0;
    padding-left: 20%;
    padding-right: 15%;
  }
  
  #service_show_little .body .item.on .content {
    opacity: 1;
  }

  #service_show_little .body .item .content .title {
    font-size: calc(var(--font-size-400) * 2);
  }
  
  #service_show_little .body .item .more {
    width: calc(var(--size-icon) * 2);
    height: calc(var(--size-icon) * 2);
    border: 1px solid var(--color-000);
    border-radius: 50%;
    display: grid;
    place-items: center;
    position: absolute;
    bottom: 0;
    margin: 0 auto;
    transition: all var(--transition-ease)
  }
  
  #service_show_little .body .item.on .more {
    opacity: 0;
  }
  
  #service_show_little .body .item .more svg {
    stroke: var(--color-000);
  }
  
  #service_show_little .body .item:hover .more {
    background: var(--color-000);
  }
  
  #service_show_little .body .item:hover .more svg {
    stroke: var(--color-950);
  }
}

#service_show_little .buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espace);
  margin: var(--espace) var(--espace) 0;
  transition: all var(--transition-ease);
}

#service_show_little .buttons .button {
  border: 1px solid var(--color-950);
  width: calc(var(--size-icon) * 2);
  height: calc(var(--size-icon) * 2);
  border-radius: 50%;
  display: grid;
  place-items: center;
}

#service_show_little .buttons .button svg {
  stroke: var(--color-950);
}

/***** avantgout *****/
#avantgout {
  padding: calc(var(--espace) * 3) 0;
}

#avantgout .title, #avantgout .text {
  transform: translateY(-50px);
  opacity: 0;
  transition: all var(--transition-ease-1);
}

#avantgout .title.on, #avantgout .text.on {
  transform: translateY(0);
  opacity: 1;
}

#avantgout .title {
  font-family: "yoga";
  margin: 0 0 var(--espace);
}

@media screen and (max-width: 600px) {
  #avantgout {
    padding-left: var(--espace);
    padding-right: var(--espace);
  }

  #avantgout .title {
    font-size: calc(var(--font-size-400) * 1.2);
  }
}

@media screen and (min-width: 601px) {
  #avantgout {
    padding-left: 20%;
    padding-right: 15%;
  }

  #avantgout .title {
    font-size: calc(var(--font-size-400) * 2);
  }
}

/***** showhow *****/
#showhow {
  padding: 0 0 calc(var(--espace) * 3);
}

#showhow .imge {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url("../../img/000.png");
  border-bottom: 1px solid var(--color-050);
  border-radius: 0 0 50% 50%;
  margin: 0 auto;
  transform: translateY(50px);
  opacity: 0;
  transition: all var(--transition-ease-1);
}

#showhow .imge.on {
  transform: translate(0);
  opacity: 1;
}

#showhow .text {
  text-align: center;
  margin: var(--espace) auto 0;
  transform: translateY(50px);
  opacity: 0;
  transition: all var(--transition-ease-1);
  text-align: center;
}

#showhow .text.on {
  transform: translate(0);
  opacity: 1;
}

@media screen and (max-width: 600px) {
  #showhow {
    padding-left: var(--espace);
    padding-right: var(--espace);
  }

  #showhow .imge {
    width: 200pt;
    height: 200pt;
  }
}

@media screen and (min-width: 601px) {
  #showhow .imge {
    width: 400pt;
    height: 400pt;
  }
}

/***** PUPSPART *****/
#pupspart {
  background: var(--color-050);
  padding: calc(var(--espace) * 3) 0;
}

#pupspart .name {
  font-family: "bold";
}

#pupspart .title {
  font-size: var(--font-size-400);
  padding: 0 var(--espace);
  margin: calc(var(--espace) * 1) 0 calc(var(--espace) * 2);
  font-family: "yoga";
}

#pupspart .bodyslider {
  display: flex;
  align-items: center;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: 10px;
}

#pupspart .bodyslider::-webkit-scrollbar {
  display: none;
}

#pupspart .bodyslider .slide {
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  align-items: flex-end;
  position: relative;
}

@media screen and (max-width: 600px) {
  #pupspart {
    padding-left: var(--espace);
    padding-right: var(--espace);
  }

  #pupspart .bodyslider {
    padding: 2px;
  }

  #pupspart .bodyslider .slide {
    min-width: 100%;
    height: 360pt;
  }
}

@media screen and (min-width: 601px) {
  #pupspart {
    padding-left: 25%;
  }
  
  #pupspart .bodyslider .slide {
    min-width: 220pt;
    height: 300pt;
    position: relative;
  }
}

#pupspart .bodyslider .slide, #pupspart .bodyslider .slide .part {
  border-radius: var(--radius-100);
}

#pupspart .bodyslider .slide .part {
  position: absolute;
  bottom: 0;
  transition: all var(--transition-ease);
  color: var(--color-950);
}

#pupspart .bodyslider .slide .part.p1 {
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 80pt;
  z-index: 1;
  margin: 0 var(--espace) var(--espace);
  border-radius: var(--radius-050);
}

#pupspart .bodyslider .slide:nth-child(1) .part.p1 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("../../img/home_001.jpg");
}

#pupspart .bodyslider .slide:nth-child(2) .part.p1 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("../../img/home_000.jpg");
}

#pupspart .bodyslider .slide:nth-child(3) .part.p1 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("../../img/home_002.webp");
}

#pupspart .bodyslider .slide:nth-child(4) .part.p1 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("../../img/home_003.webp");
}

#pupspart .bodyslider .slide:nth-child(5) .part.p1 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("../../img/home_004.webp");
}

#pupspart .bodyslider .slide .part.p2 .monrzs {
  display: flex;
  align-items: center;
  position: absolute;
  left: var(--espace);
  bottom: var(--espace);
  gap: 10px;
  color: var(--color-000);
  transition: all var(--transition-ease);
  opacity: 0;
  color: var(--color-000);
  font-family: "medium";
}

#pupspart .bodyslider .slide .part.p2 {
  top: 0;
  z-index: 2;
  padding: var(--espace);
  border: 1px solid var(--color-700);
}

#pupspart .bodyslider .slide .part.p2 .appearance {
  background: var(--color-300);
  width: calc(var(--size-icon) * 3);
  height: calc(var(--size-icon) * 3);
  border-radius: var(--radius-050);
  display: grid;
  place-content: center;
  transition: all var(--transition-ease);
  border: 1px solid var(--color-050);
}

#pupspart .bodyslider .slide .part.p2 .titleon {
  font-size: var(--font-size-300);
  margin: 10px 0 var(--espace);
  font-family: "yoga";
}

@media screen and (max-width: 600px) {
  #pupspart .bodyslider .slide.on .part {
    color: var(--color-000);
  }

  #pupspart .bodyslider .slide.on .part.p1 {
    height: 100%;
    margin: 0;
    border-radius: var(--radius-100);
  }

  #pupspart .bodyslider .slide.on .part.p2 .monrzs {
    opacity: 1;
  }

  #pupspart .bodyslider .slide.on .part.p2 {
    border: transparent;
  }

  #pupspart .bodyslider .slide.on .part.p2 .appearance {
    border: 1px solid var(--color-000);
    background: transparent;
  }

  #pupspart .bodyslider .slide.on .part.p2 .appearance svg {
    stroke: var(--color-000);
  }
}

@media screen and (min-width: 601px) {
  #pupspart .bodyslider {
    padding-right: var(--espace);
    padding-left: var(--espace);
    border-left: 1px solid var(--color-100);
  }

  #pupspart .bodyslider .slide:hover .part {
    color: var(--color-000);
  }

  #pupspart .bodyslider .slide:hover .part.p1 {
    height: 100%;
    margin: 0;
    border-radius: var(--radius-100);
  }

  #pupspart .bodyslider .slide:hover .part.p2 .monrzs {
    opacity: 1;
  }

  #pupspart .bodyslider .slide:hover .part.p2 {
    border: transparent;
  }

  #pupspart .bodyslider .slide:hover .part.p2 .appearance {
    border: 1px solid var(--color-000);
    background: transparent;
  }

  #pupspart .bodyslider .slide:hover .part.p2 .appearance svg {
    stroke: var(--color-000);
  }
}

#pupspart .buttons {
  display: flex;
  align-items: center;
  gap: var(--espace);
  margin: var(--espace) 0 var(--espace) 0;
  transition: all var(--transition-ease);
}

#pupspart .buttons .button {
  border: 1px solid var(--color-100);
  width: calc(var(--size-icon) * 2);
  height: calc(var(--size-icon) * 2);
  border-radius: 50%;
  display: grid;
  place-items: center;
}

#pupspart .buttons .button svg {
  stroke: var(--color-100);
}

/***** SOMEDETAILS *****/
#somedetails {
  margin: calc(var(--espace) * 3.4) 0 0;
  padding: calc(var(--espace) * 5) var(--espace);
  background: var(--color-950);
  color: var(--color-000);
}

#somedetails .part.p1 {
  display: grid;
  gap: var(--espace);
}

#somedetails .part.p1 .name {
  font-family: "medium";
}

#somedetails .part.p1 .title {
  font-size: var(--font-size-400);
  font-family: "yoga";
}

#somedetails .part.p2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--espace) * 2);
}

#somedetails .part.p2 .subpart .name {
  margin: 3px 0 0;
}

#somedetails .part.p3 {
  display: none;
}

@media screen and (max-width: 600px) {
  #somedetails .part.p2 {
    margin: calc(var(--espace) * 2) 0 0;
  }

  #somedetails .part.p2 .subpart .chiffre {
    font-size: calc(var(--font-size-400) * 1.5);
  }
  
  #somedetails .part.p3 {
    margin: var(--espace) 0 0;
  }
}

@media screen and (min-width: 601px) {
  #somedetails {
    display: grid;
    grid-template-columns: 40% 60%;
    align-items: flex-start;
  }
  
  #somedetails .part.p1, #somedetails .part.p2 {
    margin: 0 calc(var(--espace) * 5);
  }
  
  #somedetails .part.p1 {
    width: 100%;
  }

  #somedetails .part.p1 .title {
    font-size: calc(var(--font-size-400) * 1.2);
  }
  
  #somedetails .part.p2 {
    padding: var(--espace) 0 0;
    border-top: 1px solid var(--color-800);
  }
  
  #somedetails .part.p2 .subpart .chiffre {
    font-size: calc(var(--font-size-400) * 2.5);
  }

  #somedetails .part.p3 {
    grid-column: span 2;
  }
}

#lettercontacts {
  padding: calc(var(--espace) * 3) 0;
  background: var(--color-950);
}

#lettercontacts .partcontacts {
  border-radius: var(--radius-100);
}

#lettercontacts .partcontacts.format {
  background: var(--color-000);
  padding: calc(var(--espace) * 2);
}

#lettercontacts .partcontacts.imge {
  display: grid;
  align-content: flex-end;
}

#lettercontacts .partcontacts.imge .details {
  color: var(--color-000);
  padding: var(--espace);
  font-size: var(--font-size-300);
}

@media screen and (max-width: 600px) {
  #lettercontacts {
    padding-left: var(--espace);
    padding-right: var(--espace);
  }

  #lettercontacts .partcontacts.imge {
    margin: 0 0 var(--espace);
  }

  #lettercontacts .partcontacts.imge .details {
    padding-left: 0;
  }
}

@media screen and (min-width: 601px) {
  #lettercontacts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--espace);
    padding-left: calc(var(--espace) * 4);
    padding-right: calc(var(--espace) * 4);
  }

  #lettercontacts .partcontacts.imge {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../../img/contacts_000.jpg");
  }
}