@charset "UTF-8";

/*
Theme Name: Huangse V2 
Theme URI: http://jiyong.eu
Author: Jiyong
Author URI: http://jiyong.eu
Description: Design for Ji's folio
*/

/* poppins-regular - latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    src: url('typographie/poppins-v20-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('typographie/poppins-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('typographie/poppins-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('typographie/poppins-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('typographie/poppins-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('typographie/poppins-v20-latin-regular.svg#Poppins') format('svg'); /* Legacy iOS */
  }
  
  /* poppins-italic - latin */
  @font-face {
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 400;
    src: url('typographie/poppins-v20-latin-italic.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('typographie/poppins-v20-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('typographie/poppins-v20-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
         url('typographie/poppins-v20-latin-italic.woff') format('woff'), /* Modern Browsers */
         url('typographie/poppins-v20-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
         url('typographie/poppins-v20-latin-italic.svg#Poppins') format('svg'); /* Legacy iOS */
  }
  
  /* poppins-700 - latin */
  @font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    src: url('typographie/poppins-v20-latin-700.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('typographie/poppins-v20-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('typographie/poppins-v20-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
         url('typographie/poppins-v20-latin-700.woff') format('woff'), /* Modern Browsers */
         url('typographie/poppins-v20-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
         url('typographie/poppins-v20-latin-700.svg#Poppins') format('svg'); /* Legacy iOS */
  }
  
  /* poppins-700italic - latin */
  @font-face {
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 700;
    src: url('typographie/poppins-v20-latin-700italic.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('typographie/poppins-v20-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('typographie/poppins-v20-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
         url('typographie/poppins-v20-latin-700italic.woff') format('woff'), /* Modern Browsers */
         url('typographie/poppins-v20-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
         url('typographie/poppins-v20-latin-700italic.svg#Poppins') format('svg'); /* Legacy iOS */
  }
  
  /* poppins-900 - latin */
  @font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 900;
    src: url('typographie/poppins-v20-latin-900.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('typographie/poppins-v20-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('typographie/poppins-v20-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
         url('typographie/poppins-v20-latin-900.woff') format('woff'), /* Modern Browsers */
         url('typographie/poppins-v20-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
         url('typographie/poppins-v20-latin-900.svg#Poppins') format('svg'); /* Legacy iOS */
  }
  
    /* noto-sans-tc-regular - latin_chinese-traditional */
    @font-face {
    font-family: 'Noto Sans TC';
    font-style: normal;
    font-weight: 400;
    src: url('typographie/noto-sans-tc-v26-latin_chinese-traditional-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
        url('typographie/noto-sans-tc-v26-latin_chinese-traditional-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('typographie/noto-sans-tc-v26-latin_chinese-traditional-regular.woff2') format('woff2'), /* Super Modern Browsers */
        url('typographie/noto-sans-tc-v26-latin_chinese-traditional-regular.woff') format('woff'), /* Modern Browsers */
        url('typographie/noto-sans-tc-v26-latin_chinese-traditional-regular.ttf') format('truetype'), /* Safari, Android, iOS */
        url('typographie/noto-sans-tc-v26-latin_chinese-traditional-regular.svg#NotoSansTC') format('svg'); /* Legacy iOS */
    }

    /* noto-sans-tc-900 - latin_chinese-traditional */
    @font-face {
    font-family: 'Noto Sans TC';
    font-style: normal;
    font-weight: 900;
    src: url('typographie/noto-sans-tc-v26-latin_chinese-traditional-900.eot'); /* IE9 Compat Modes */
    src: local(''),
        url('typographie/noto-sans-tc-v26-latin_chinese-traditional-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('typographie/noto-sans-tc-v26-latin_chinese-traditional-900.woff2') format('woff2'), /* Super Modern Browsers */
        url('typographie/noto-sans-tc-v26-latin_chinese-traditional-900.woff') format('woff'), /* Modern Browsers */
        url('typographie/noto-sans-tc-v26-latin_chinese-traditional-900.ttf') format('truetype'), /* Safari, Android, iOS */
        url('typographie/noto-sans-tc-v26-latin_chinese-traditional-900.svg#NotoSansTC') format('svg'); /* Legacy iOS */
    }
  
    /* noto-serif-regular - latin */
    @font-face {
    font-family: 'Noto Serif';
    font-style: normal;
    font-weight: 400;
    src: url('typographie/noto-serif-v21-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('typographie/noto-serif-v21-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('typographie/noto-serif-v21-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('typographie/noto-serif-v21-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('typographie/noto-serif-v21-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('typographie/noto-serif-v21-latin-regular.svg#NotoSerif') format('svg'); /* Legacy iOS */
  }
  
  /* noto-serif-italic - latin */
  @font-face {
  font-family: 'Noto Serif';
  font-style: italic;
  font-weight: 400;
  src: url('typographie/noto-serif-v21-latin-italic.eot'); /* IE9 Compat Modes */
  src: local(''),
        url('typographie/noto-serif-v21-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('typographie/noto-serif-v21-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
        url('typographie/noto-serif-v21-latin-italic.woff') format('woff'), /* Modern Browsers */
        url('typographie/noto-serif-v21-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
        url('typographie/noto-serif-v21-latin-italic.svg#NotoSerif') format('svg'); /* Legacy iOS */
  }
  
  /* noto-serif-700 - latin */
  @font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 700;
  src: url('typographie/noto-serif-v21-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
        url('typographie/noto-serif-v21-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('typographie/noto-serif-v21-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
        url('typographie/noto-serif-v21-latin-700.woff') format('woff'), /* Modern Browsers */
        url('typographie/noto-serif-v21-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
        url('typographie/noto-serif-v21-latin-700.svg#NotoSerif') format('svg'); /* Legacy iOS */
  }
  
  /* noto-serif-700italic - latin */
  @font-face {
  font-family: 'Noto Serif';
  font-style: italic;
  font-weight: 700;
  src: url('typographie/noto-serif-v21-latin-700italic.eot'); /* IE9 Compat Modes */
  src: local(''),
        url('typographie/noto-serif-v21-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('typographie/noto-serif-v21-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
        url('typographie/noto-serif-v21-latin-700italic.woff') format('woff'), /* Modern Browsers */
        url('typographie/noto-serif-v21-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
        url('typographie/noto-serif-v21-latin-700italic.svg#NotoSerif') format('svg'); /* Legacy iOS */
  }

/*icone */

@font-face {
  font-family: 'jiyong-rounded';
  src:  url('typographie/jiyong-rounded.eot?o72t34');
  src:  url('typographie/jiyong-rounded.eot?o72t34#iefix') format('embedded-opentype'),
    url('typographie/jiyong-rounded.ttf?o72t34') format('truetype'),
    url('typographie/jiyong-rounded.woff?o72t34') format('woff'),
    url('typographie/jiyong-rounded.svg?o72t34#jiyong-rounded') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'jiyong-rounded' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-top::before {
  content: "\e900";
}
.icon-droite::before {
  content: "\e901";
}
.icon-gauche::before {
  content: "\e902";
}
.icon-projets::before {
  content: "\e903";
}
.icon-user::before {
  content: "\e904";
}


:root{
    --font-noto-serif:"Noto Serif", serif;
    --font-poppins:"Poppins", sans-serif;
    --font-chn:"Noto Sans TC", sans-serif;
    --btn-rounded: 2.5rem;

    --shadow-inset:0 0 0.625rem inset rgba(31,36,37,0.5);

    --white-primary:rgb(255,255,255);
    --white-secondary:rgb(31, 36, 37);

      font-size: 100%; /* 1rem = 16px */
      --font-size-xs: 0.75rem;
      --font-size-sm: 0.875rem;
      --font-size-md: 1rem;
      --font-size-lg: 1.25rem; /*20*/
      --font-size-xl: 1.5rem;
      --font-size-xxl: 2rem;

    --oj-primary:#61ADFF;
    --oj-secondary:#00628A;
    --oj-third:#FFF;
    --oj-fourth:rgba(97,173,255,0.20);
    --oj-fifth:#00477B;

    --shove-primary:#1B1E27;
}
  
@media (prefers-color-scheme: dark) {    
    :root{
        --color-primary:#1F2425;
        --color-secondary:#FABF1D;

        --texture-primary:url('images/black-texture.jpg');
        --texture-secondary:url('images/yellow-texture.jpg');

        --primary-gradient: linear-gradient(360deg, rgba(31,36,37,1) 0%, rgba(255,215,106,1) 100%);

        --img-filter:contrast(0.8) grayscale(1);
    }

}
  
@media (prefers-color-scheme: light) {
    :root{
        --color-primary:#FABF1D;
        --color-secondary:#1F2425;
        --texture-primary:url('images/yellow-texture.jpg');
        --texture-secondary:url('images/black-texture.jpg');

        --primary-gradient: linear-gradient(360deg, rgba(31,36,37,1) 0%, rgba(255,215,106,1) 100%);

        --img-filter:grayscale(1);
    }

}

*{
    padding:0;
    margin: 0;
    box-sizing: border-box;
}

html{
    font-size: 16px;
}

body{
    font-size: 100%;
    font-family: Poppins, serif;
}

.chn{
    font-family: 'Noto Sans TC', sans-serif;
}

a{
    text-decoration: none;
}

p a{
    text-decoration: underline;
}

ul{
  list-style: none;
}

li{
  line-height: 1;
}

h2{
    font-size:2.5rem;
    font-weight: bold;
}

h4{
    font-size:1.80rem;
    font-weight: bold;
    margin-bottom: 1rem;
}


/* Défaut */

.background-defaut{
    background-color: var(--color-primary);
    background-image: var(--texture-primary);
    color:var(--color-secondary);
}

/* Boutons */

.btn{
  border-radius: var(--btn-rounded);
  padding: 1rem 1.5rem;
  position: relative;
  display: inline-block;
  overflow: hidden;
  z-index: 3;
}

.btn-primary{
  background: var(--texture-secondary);
  color:var(--color-primary);
}

  .btn-primary::before, .btn-secondary::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 100%;
    left: -50%;
    width: 0;
    margin: auto;
    box-shadow: var(--shadow-inset);
    transition: all 0.2s;
    z-index: -1;
    border-radius: 2.5rem;
  }

  .btn-primary::before{
    background:var(--texture-primary);
  }

  .btn-primary:hover{
    color:var(--color-secondary);
    transition: all 0.2s;
  }

    .btn-primary:hover::before{
      right: 0;
      left: 0;
      width: 100%;
      transition: all 0.2s;
    }

.btn-secondary{
  background: var(--texture-primary);
  color:var(--color-secondary);
    border:1px solid var(--color-secondary)

}

  .btn-secondary::before{
    background:var(--texture-secondary);
  }

  .btn-secondary:hover{
    color:var(--color-primary);
    transition: all 0.2s;
  }


    .btn-secondary:hover::before{
      right: 0;
      left: 0;
      width: 100%;
      transition: all 0.2s;
    }


    .btn-icon-before, .btn-icon-after{
      align-items: center;
      gap: 8px;
      display: flex;
    }

    .btn-icon-before{
      flex-direction: row-reverse;
    }
   
    .btn-icon-after{
      flex-direction: row;
    }

    .btn-icon-before::after, .btn-icon-after::after{
      content: '';
      font-family: 'jiyong-rounded';
      text-align: center;
      font-size: 20px;
      width: 20px;
      height: 20px;
      line-height: 1;
      display: inline-block;
    }

/**/




/* btn icon */

.btn-icon {
  font-family: 'jiyong-rounded';
  position: relative;
  overflow: visible;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 3rem;
  height: 3rem;
  font-size: 1.25rem;
  border-radius: 50%;
  text-decoration: none;
}

.btn-icon::after{
  content:"";
  width: 20px;
  height: 20px;
  display: inline-block;
}

    .btn-icon-label{
      font-family: Poppins, serif;  
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%) translateY(-0.5rem);
      background:var(--color-primary);
      color:var(--color-secondary);
      font-size: 1rem;
      padding: 1rem;
      border-radius: 1rem;
      white-space: nowrap;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s ease, transform 0.2s ease;
      z-index: 10;
    }

    .btn-icon:hover .btn-icon-label, .btn-icon:focus .btn-icon-label{
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(-0.75rem);
    }

/**/

.top .btn-icon::after{
  content: "\e900";
}

.projets .btn-icon::after{
  content: "\e903";
}

/*header*/

header{
  display: flex;
  justify-content: center;
  position:relative;
  margin-top: 80px;
  z-index: 999;
  background: var(--texture-primary);
}

header.scrolled{
  position:fixed;
  top:0px;
  left: 0;
  right: 0;
  z-index: 1000;
  margin-top: 0;
  }

header .content-header{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 1rem 1rem 1.5rem 1rem;
  align-items:end;
}

  .single-portfolio header, .single-labs header{
    background: var(--white-primary);
    color: var(--white-secondary);
  }

    .single-portfolio header a, .single-labs header a{
    color: var(--white-secondary);
    }



/* menu button */

.menu-button{

  height: 50px;
  width: 50px;
  display: flex;
  z-index: 889;
  cursor: pointer;
  position: relative;
  flex-direction: column;
  justify-content: space-evenly;
}

 .menu-button::after, .menu-button::before {
    content:"";
    background: var(--texture-primary);
    display: inline-block;
    width: 100%;
    height: 17%;
    transition: all 0.2s;
  }

  .menu-button-open::before {
    position: absolute;
    transform: rotate(-45deg);
  }

  .menu-button-open::after {
    position: absolute;
    transform: rotate(45deg);
  }

.background-defaut .menu-button{
  background:var(--texture-secondary);
}

  .background-defaut .menu-button::before, .background-defaut .menu-button::after{
    background: var(--texture-primary);
  }

  .is-portfolio .menu-button{
    background:var(--white-secondary);
  }

  .is-portfolio .menu-button::before, .is-portfolio .menu-button::after{
    background: var(--white-primary);
  }

/* Wrapper */

.wrapper{
  width: 100%;
  max-width: 1704px;
  margin:auto;
}


/* Columns */ 

.columns{
  display: flex;
  flex-direction: row-reverse;
  margin: 80px 0;
  justify-content: space-between;
  gap:158px;
}

main{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap:80px;
  justify-content: start;
}


/**/
.message-confidentiel {
  max-width: 556px;
  padding: 2rem;
  margin: auto;
  font-size: 1rem;
  border-radius: var(--btn-rounded);
  background: var(--texture-secondary);
  color:var(--color-primary)
}


/*Logo*/

.logo{
  font-family: var(--font-poppins);
  font-weight: 900;
  text-transform: uppercase;
  display: flex;
  position: relative;
}

  .logo a{  
    color:var(--color-secondary)
  }

  .logo .name{
    font-size: 1rem;
  }

  .logo .type{
    font-size: 4.688rem;
    line-height: 3.5rem;
  }

/* container */

.container{
  display: flex;
 justify-content: center;
}

/* list real */

.list-real{
  width: 100%;
}

  .list-real article{
    height: 305px;
    display: flex;
    border-radius: 0.5rem;
    position: relative;
    overflow: hidden;
    border:var(--color-secondary) 1px solid;
    background: var(--texture-secondary);
    align-items: flex-end;
    box-shadow: 0 0 40px inset rgba(31,36,37,0.5);
  }

    .list-real article a{
      width: 100%;
      height: 100%;
      padding:8px;
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      color:var(--color-primary);
      transition: all 0.3s;
    }

      .list-real article a:hover{
        transition: all 0.3s;
        color:var(--color-secondary);
      }

      .list-real article .infos-article{
        padding:16px;
        position: relative;
        display: flex;
        flex-direction: column;
        gap:4px;
        width: 100%;
        overflow: hidden;
      }


        .list-real article a .infos-article::after{
          content:"";
          display: block;
          width: 1px;
          height: 1px;
          background: var(--texture-primary) center;
          margin: auto;
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
          z-index: -1;
          transition: all 0.5s;
          border-radius: 3rem;
          opacity: 0;
        }


        .list-real article a:hover .infos-article::after{
          content:"";
          display: block;
          width: 100%;
          height: 100%;
          margin: auto;
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
          z-index: -1;
          transition: all 0.5s;
          border-radius:0 0 12px 12px;
          opacity: 1;
        }

    .list-real .post-thematics{
      font-size: 0.813rem;
      gap: 8px;
      display: flex;
      flex-direction: row;
    }

      .list-real h2{
        font-size:1.25rem ;
      }

    .list-real .post-titre{
      font-size: 1.25rem;
    }

    .list-real .thumbnail{
      position: absolute;
      top: 1px;
      bottom: 1px;
      right: 1px;
      left: 1px;
      margin: auto;
      overflow: hidden;
      border-radius: 10px;
      opacity: 0.3;
      z-index:1;
    }

      .list-real .thumbnail img{
        width: 100%;
        height: 100%;
        margin: auto;
        object-fit: cover;
        top: 50%;
        bottom: 50%;
        position: absolute;
        filter: var(--img-filter);
      }
    


/* menu */

.menu-gauche{
  display: flex;
  flex-direction: column;
  width:33%;
  gap:80px;
}

  .menu-gauche ul{
    width: 100%;
    display: flex;
    flex-direction: column;
    border-bottom:1px solid var(--color-secondary);
  }

    .menu-gauche a{
      padding:16px 0;
      color:var(--color-secondary);
      border-top:1px solid var(--color-secondary);
      display: block;
      position: relative;
      overflow: hidden;
      z-index: 1;
    }


    .menu-gauche a::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 100%;
    left: -50%;
    width: 0;
    margin: auto;
    background:var(--texture-secondary);
    transition: all 0.5s;
    z-index: -1;
    border-radius: 0 2.5rem 2.5rem 0 ;
    }

      .menu-gauche a:hover{
        color:var(--color-primary);
        transition: all 0.5s;
        padding-left:16px; 
      }

      .menu-gauche .current-menu-item a{
        color:var(--color-primary);
        background:var(--texture-secondary);
        transition: all 0.5s;
        padding-left:16px; 
      }

        .menu-gauche .current-menu-item a::before{
          display: none;
        }


      .menu-gauche a:hover::before{
        right: -2.5rem;
        left: 0;
        width: calc(100% + 2.5rem);
        transition: all 0.5s;
      }


/**/

.grid-2{
  display: grid;
  grid-template-columns: 1fr; /* 1 colonne par défaut */
  gap: 1rem;
  margin: 0 auto;
  padding: 0;
}
 
/* footer */

footer{
  display: flex;
  position: relative;
  justify-content: center;
}

 footer .footer-content{
    display: flex;
    flex-direction: row;
    padding-top:80px;
    padding-bottom: 80px;
    border-top:1px solid var(--color-secondary);
    justify-content: center;
    gap:80px;
  }

  footer .footer-explain{
    display: flex;
    flex-direction: column;
    gap:40px;
  }

  footer a{
    color:var(--color-secondary);
  }

/* footer link*/
footer .main-menu-list{
  display: flex;
  flex-direction: row;
  gap:16px;
}

/*img privée */
.image-masquee {
    background-color:var(--white-primary);
    color: var(--white-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px dashed var(--white-secondary);
    max-width: 100%;
    aspect-ratio: 4/3;
    break-inside: avoid;
    max-height: 300px;
}

/* works */

.work-description{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap:5rem;
}
  
  hr.separateur{
    width: 100%;
    border:none;
    border-bottom: 1px solid var(--color-primary);
  }

  .work-title{
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .work-description h1{
    font-size: 4rem;
    display: flex;
    align-items: center;
    text-align: center;
    line-height: 5rem;
    font-weight: 600;
  }
      .work-description .work-date{
        display:flex;
        font-size:1.25rem;
      }

      .work-type, .work-tools-list{
        display: flex;
        flex-direction: row;
        gap:1rem;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
      }

      .work-tools-list li{
        word-break: break-all;
      }

    .work-type a, .work-tools-list a{
      color:var(--white-secondary);
    }

    .work-nb-user{
      display: flex;
      flex-direction: row;
      gap:0.5rem;
      align-items: center;
      justify-content: center;
    }

      .work-nb-user::before{
        content: "\e904";
        font-family: 'jiyong-rounded';
        font-size: 1.25rem;
        width: 20px;
        height: 20px;
        line-height: 1;
      }

  
    .main-foliolabs img{
        max-width: 100%;
        height: auto;
    }

  main.main-foliolabs{
    margin:5rem auto;
    gap:5rem;
  }

  /*section*/

  main.main-foliolabs section{
    display: flex;
    flex-direction: column;
    margin:5rem auto;
    gap:5rem;
    width:100%;
  }

  main.main-foliolabs ul.list{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap:1rem;
  }

 main.main-foliolabs ul.list li {
  line-height: 1.5rem;
  margin-left: 1rem;
  list-style: disc;
  }



  .chapo{
  max-width: 558px;
  width: 100%;
  margin:auto
  }

  /**/

  .main-foliolabs article{
    display: flex;
    gap:5rem;
    flex-direction: column;
  }

    /*work texte*/
  .main-foliolabs .little-paragraph{
    width: 100%;
    display: flex;
    flex-direction: column;
  }

    .icon-list, .iconlist {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 1rem;
      padding: 0;
      margin: 0;
      list-style: none;
      justify-content: center;
      align-items: center;
      width: 100%;
    }

    .icon-list li, .iconlist li {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .icon-list img, .iconlist img {
      max-width: 100%;
      max-height: 100%;
      height: auto;
      width: auto;
    }

    .icon-list li img:hover, .iconlist li img:hover {
    transform: scale(1.1);
    }

    .icone260px{
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }

    .icone260px li{
      width: 260px; 
      height: 260px;
    }


    .img-list, .imglist {
      column-count: 2;
      column-gap: 2rem;
    }

/* */

  .content-foliolabs h2 + p,  .content-foliolabs h3 + p{
    margin-top:1rem;
  }

.content-foliolabs h3{
  margin-top: 2rem;
  font-size: 2rem;
  line-height: 1.25;
  display: inline-block;
  width: 100%;
}

.content-foliolabs .center{
  text-align: center;
}

  .content-foliolabs h3 + figure{
    margin: top 1rem;
  }
  

p + *{
  margin-top:1rem;

}

.wrapper + .wrapper{
  margin-top: 2.25rem;
}

/**/

.two-paragraph, .two-paragaph{
  gap: 24px;
  column-count: 2;
}

/* Figure */

figure{
  text-align: center;
  display: flex;
  align-items: center;
  flex-direction: column;
}

figcaption{
  margin-top:1rem;
  font-style: italic;
}

/**/

.button-list{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap:1rem;
  margin:16px 0;
}

.condition{
  font-size: 0.9rem;
  font-style: italic;
}

/* liste mobile */

.mobile-list {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  width: 100%;
  margin:auto
}


 .mobile-list-element {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 1rem;
  }


  .mobile-list-element:nth-of-type(2n) {
    margin-top: 140px;
  }

/* Toggle device sombre / clair */

.commandes-toggle{
    text-align: center;
}

   .commandes-toggle .toggle {
      position: relative;
      display: inline-block;
      width: 60px;
      height: 34px;
    }

    .commandes-toggle .toggle input {
      opacity: 0;
      width: 0;
      height: 0;
    }
    
    .commandes-toggle .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      transition: 0.4s;
      border-radius: 34px;
    }
        .commandes-toggle .slider::before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        transition: 0.4s;
        border-radius: 50%;
        }

            .commandes-toggle input:checked + .slider {
            background-color: #4CAF50;
            }



    .commandes-toggle input:checked + .slider::before {
      transform: translateX(26px);
    }

.interface-switch{
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.interface-images {
  position: relative;
  width: 100%;
  height: 100%;
  margin-bottom: 1rem;
  overflow: hidden;
}

    .interface-device{
        width: 415px;
        height: 843px;
    }

            .interface-img{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                opacity: 0;
                transition: opacity 0.5s ease;
                pointer-events: none;
                border-radius: 10px;
            }

        .interface-img.active {
        opacity: 1;
        pointer-events: auto;
        z-index: 1;
        }


/*navigation articles*/

.nav-articles{
  z-index: 700;
  position: fixed;
  bottom: 2rem;
  left: 0;
  right: 0;
  margin: auto;
  display: flex;
  justify-content: flex-end;
}

.nav-content{
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap:16px;
}


.nav-articles .nav-prev::after{
  content: "\e901";
}

.nav-articles .nav-next::after{
  content: "\e902";
}


/*about*/

.parcours{
  display: flex;
  flex-direction: column;
}

  .parcours li{
    display: flex;
    flex-direction: row;
    gap:1rem;
    padding: 40px 0;
    gap: 1rem;
    border-top:1px solid var(--color-secondary);
  }

    .parcours li > div{
      width: 50%;
    }

.parcours-jobs{
  display: flex;
  flex-direction: column;
  gap:8px;
}
  .parcours .parcours-infos{
    display: flex;
    flex-direction: row;
    gap:16px;
    font-size:1rem ;
  }

  .parcours-society{
    font-weight: bold;
    text-wrap:wrap;
  }

.parcours-content{
  font-size:1rem ;
  line-height:1.2 ;
}

.parcours li.Anecdotique .parcours-jobs{
  order: 2;
}

.parcours li.Anecdotique{
  color:var(--color-primary);
  background: var(--texture-secondary);
  border-top:1px solid var(--color-primary);
  padding:2rem;
}

/* cards */

.cards{
  display: flex;
  flex-direction: column;
}

.cards li{
  padding:2.5rem 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  border-top:1px solid var(--color-secondary);
}

.wrapper-page p{
  font-size:1rem ;
  line-height:1.2 ;
}


/*iframe*/

.content-share li .article-share img, .content-share li .article-share iframe, iframe{
    max-width: 100%;
    width: 100%;
}


/* Expert */


.expert .cover {
  background-color: #290C27;
  border-radius: 16px;
  background-image: url("https://www.jiyong.eu/wp-content/uploads/2025/07/cover-expert.png");
  background-repeat: no-repeat;
  background-position: center;
  max-width: 1640px;
  height: 600px;
  margin: auto;
  background-size: cover;
}

.expert .two-paragaph{
  max-width: 1128px;
  margin: auto;
}

.expert .sombre{
    background: #290C27;
    padding:60px 0;
    border-radius: 32px;
    margin:60px;
    color:#F3F1F7;
}

.expert .sombre .image-masquee{
    background-color:#290C27;
    color:#F3F1F7;
    border:1px dotted #F3F1F7;
}

.expert .two-paragaph .image-masquee{
  max-width: 265px;
}

.expert .iconlist{
  gap:2rem;
  margin:2rem 0;
}

.expert .img-list.illustrations{
  column-count: 2;
  column-gap: 2rem;
  margin:2rem 0;
  max-width: 1640px;
}

.expert .img-list.illustrations li{
  text-align: center;
}


.expert .color-list{
  column-count: 2;
  column-gap: 40px;
  max-width: 880px;
}

.expert .color-list li{
  display: flex;
  flex-direction: column;
  gap:0.1rem;
  flex-wrap: nowrap;
  margin-bottom: 2rem;
  break-inside: avoid;
}

.expert .color-01{
    background:#290C27;
}

.expert .color-02{
    background:#654B9C;
}

.expert .color-03{
    background:#5862E8;
}

.expert .color-04{
    background:#F3F1F7;
}

.expert .color-05{
    background:#948893;
}

/*paper*/

.paper,.paper header,.is-portfolio.paper .link-header{
    background: url('https://www.jiyong.eu/wp-content/uploads/2022/08/background-paper.jpg') center;
    background-position: center;
}

.paper .iconlist{
    padding:40px;
    gap:90px;
}

.paper .iconlist li{
    display: flex;
    max-width:100px;
    text-align: center;
    flex-direction: column;
    gap:8px;
}

.paper li span{
    font-size:0.8rem;
}

/*carton*/

.carton p, .carton a{
    color:var(--white-primary);
}

.carton{
    color:var(--white-primary);
    background-image: url('https://www.jiyong.eu/wp-content/uploads/2020/11/bg_carton.jpg');
    background-position: top;
}

.carton header{
    color:var(--white-primary);
    background-image: url('https://www.jiyong.eu/wp-content/uploads/2020/11/bg_carton.jpg');
    background-position: top;
}

.carton header .name, .carton header .type, .carton.is-portfolio .link-header, .carton .work-description{
    background-image: url('https://www.jiyong.eu/wp-content/uploads/2020/11/bg_carton_light.jpg');
    background-size: cover;
    background-position: center;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

  .carton.is-portfolio .link-header::before{
    background-image: url('https://www.jiyong.eu/wp-content/uploads/2020/11/bg_carton_light.jpg');
  }

  .carton.is-portfolio .link-header:hover {
        background-image: url('https://www.jiyong.eu/wp-content/uploads/2020/11/bg_carton_light.jpg');
        color:var(--white-secondary);
  }

.carton .light{
    background-image: url('https://www.jiyong.eu/wp-content/uploads/2020/11/bg_carton_light.jpg');
    background-position: top;
}

.carton .yellow{
    background-image: url('https://www.jiyong.eu/wp-content/uploads/2020/11/bg_carton_yellow.jpg');
    background-position: top;
}

.carton nav .menu a{
    color:var(--white-primary)
}

/*Neon*/


.neon, .neon header, .neon.is-portfolio .link-header:hover{
    background: #1b1d29;
    color:var(--white-primary);
}

  .neon.is-portfolio .link-header::before {
      background: #1b1d29;

  }

.neon header a{
  color:var(--white-primary);
}


.neon h1, .neon h2, .neon p, .neon a{
    color:var(--white-primary);
}


.neon nav .menu a{
    color:var(--white-primary)
}

/*zzr zhenzhu rounded*/

.zzr section.sombre{
    color: #C7D165;
    margin:80px;
    background: url('https://www.jiyong.eu/wp-content/uploads/2019/01/texture.png') center no-repeat #1A1A17 ;
    background-size: cover;
    padding: 40px;
    border-radius: 16px;
}

.zzr .work-demonstration .little-paragraph.center{
margin:80px auto;
}

.zzr section + section.sombre {
    margin: 0px 60px 80px 60px;
}

.zzr .work-demonstration section.sombre figure img{
    margin: 80px auto;
}

.zzr .work-demonstration figure figcaption{
    font-style: normal;
}

/*cityscan*/


.cityscan .light{
    padding:32px 0;
    background-color: #fff9f4;
}


.cityscan .mapbg .wrapper{
    padding: 32px 16px 0px 16px;
    margin: auto;
}


.cityscan .mobile-list{
  justify-content: center;
}

.cityscan .color-list{
  column-count: 4;
  column-gap: 0;
}

.cityscan .img-list{
  column-count: 2;
  margin: auto;
}

  .cityscan .color-list li{
    height: 166px;
    break-inside: avoid;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: end;
    gap: 0.6rem;
  }

  .cityscan .color-list h4{
    margin-bottom: 0;
    font-size: 1.25rem;
  }

  .cityscan .color-list li span{
    display: block;
    margin-bottom: 0.25rem;
  }


  .cityscan .color-list li.color-01{
  background-color: #E84242;
  height: 498px;
  }

  .cityscan .color-list li.color-02{
      background-color: #C72A2A;
      height: 249px;
      color:#fff;
  }

  .cityscan .color-list li.color-03{
      background-color: #180000;
      height: 249px;
      color:#fff;
  }

  .cityscan .color-list li.color-04{
      background-color: #FFF9F4;
  }

  .cityscan .color-list li.color-05{
      background-color: #B8A2A2;
  }

  .cityscan .color-list li.color-06{
      background-color: #707070;
  }

  .cityscan .color-list li.color-07{
      background-color: #fff;
  }

  .cityscan .color-list li.color-08{
      background-color: #EAEAEA;
  }

  .cityscan .color-list li.color-09{
      background-color: #BDBDBD;
  }
    
.cityscan hr{
    margin: 40px auto;
    border: none;
    border-top:1px solid #EAEAEA;
}



.cityscan .city-01{
    background: url(https://www.jiyong.eu/wp-content/uploads/2022/09/bg-01-city.jpg) no-repeat bottom center;
    background-size: cover;
}

.cityscan .city-02{
    background: url(https://www.jiyong.eu/wp-content/uploads/2022/09/bg-02-city.jpg) no-repeat bottom center;
    background-size: cover;
}

.cityscan .city-03{
    background: url(https://www.jiyong.eu/wp-content/uploads/2022/09/bg-03-city.jpg) no-repeat bottom center;
    background-size: cover;
}

.cityscan-wrapper{
    max-width: 1640px;
    margin: auto;
}

.cityscan-list-mobile{
    gap: 40px 16px;
}

/*logos kinaxia*/

.logos-kinaxia hr{
  max-width: 300px;
  margin: auto;
}

.logos-kinaxia .cover {
  border-radius: 16px;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  max-width: 1640px;
  margin: auto;
}

.logos-kinaxia .atlas .cover{
  background-color: #061625;
}

.logos-kinaxia .gaia .cover{
  background-color: #099B9B;
}

.logos-kinaxia .img-list-2{
  column-count: 2;
  max-width: 880px;
  margin: auto;
}

.logos-kinaxia .img-list{
  column-count: 3;
  max-width: 880px;
  margin: auto;
}

.logos-kinaxia .karto{
  background-color: #290C27;
  color:#fff;
  padding:120px 0px;
}

.logos-kinaxia .kdata{
  background-color: #F3F1F7;
  padding:120px 0px;
}

  .logos-kinaxia .peekr{
    background-color: #290C27;
    padding:120px 0;
    color:#F3F1F7;
  }


/* Shove */

.shove .sombre {
  background-color: var(--shove-primary);
  color: #fff;
  padding: 60px 0px;
}

.shove .main-foliolabs .little-paragraph{
  margin-top:2rem;
  margin-bottom: 2rem;
}

.shove .mobile-list, .shove .img-list{
  max-width: 840px;
  justify-content: center;
  margin:auto;
}

.shove .color-list{
  column-count: 3;
  max-width: 880px;
  margin: auto;
}

.shove .color-list li{
  margin-bottom:1rem;
}

/*outil interne*/

.outil-interne article .little-paragraph{
  margin:0;
}

.outil-interne .img-list.illustrations{
  column-count: 3;
}

.outil-interne .img-list-2{
  column-count: 2;
}

.outil-interne .img-list.illustrations li{
  text-align: center;
}

.outil-interne .icon-list{
  gap:2rem;
}

.outil-interne .sombre, .outil-interne .light {
  position: relative;
  z-index: 2;
  max-width: 1640px;
  margin:auto;
  padding:60px;
  border-radius: var(--btn-rounded);
  width: 100%;
}

.outil-interne .sombre {
  background-color: #2D323E;
   color:#fff;
}

.outil-interne .light {
  background-color: #F3F1F7;
}

.outil-interne .img-list figure, .outil-interne .img-list-2 figure{
  align-items: flex-start;
}

.outil-interne .color-list{
    column-count: 3;
    column-gap:40px;
    margin:2rem 0;
}

.outil-interne .color-list li{
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 2px;
    margin-bottom: 1rem;
}

    .color-list div{
        border-radius: 8px;
        height: 80px;
        width: 100%;
        margin-bottom: 24px;
    }

    .color-list + .color-list{
        margin: 24px auto;
    }

.outil-interne .little-text {
  font-size: 0.75em;
  color: #8F9292;
}

.outil-interne .color-01{
    background: #5862E8 ; /*Royal Blue*/
}

.outil-interne .color-02{
    background: #E6E8FF; /*Lavender*/
}

.outil-interne .color-03{
    background: #3C0089; /*Indigo*/
}

.outil-interne .color-04{
    background: #BE1100 ; /*free speech red*/
}

.outil-interne .color-05{
    background: #28A745; /*Chateau Green*/
}

.outil-interne .color-06{
    background: #FFD500; /*Gold*/
}

    /*lumineux*/

    .outil-interne .color-l01{
        background: #F3F3F3; /*Royal Blue*/
    }

    .outil-interne .color-l02{
        background: #290C27; /*Mardi Gras*/
    }

    .outil-interne .color-l03{
        background: #948893; /*Taupe Grey*/
    }

    .outil-interne .color-l04{
        background: #dddddd; /*Gainsboro*/
    
    }

    .outil-interne .color-l05{
        background: #e9c6c3; /*Dust Storm*/
    }

    .outil-interne .color-l06{
        background: #FFFDF0 ; /*Ivory*/
    }

    .outil-interne .color-l07{
        background: #EEEFFD; /*Leela*/
    }

    /*sombre*/

    .outil-interne .color-s01{
        background: #2d323e; /*Ebony Clay*/
        border:1px solid #16181D;
    }

    .outil-interne .color-s02{
        background: #16181D; /*Black Russian*/
    }

    .outil-interne .color-s03{
        background: #F3F1F7; /*Magnolia*/
    }

    .outil-interne .color-s04{
        background: #252832; /*Midnight Express*/
    
    }

    .outil-interne .color-s05{
        background: #381617 ; /*Rustic Red*/
    }

    .outil-interne .color-s06{
        background: #32332F ; /*Eternity*/
    }

    .outil-interne .color-s07{
        background: #313750 ; /*Bunting*/
    }
    
    
    /*couleur graph*/

    .outil-interne .color-g01{
        background: #94CC29; /*Yellow Green*/
    }

    .outil-interne .color-g02{
        background: #BFDB8A; /*Sulu*/
    }

    .outil-interne .color-g03{
        background: #D5E3BA; /*Gin*/
    }

    .outil-interne .color-g04{
        background: #2191CC; /*Pelorous*/
    
    }

    .outil-interne .color-g05{
        background: #86BEDB; /*Seagull*/
    }

    .outil-interne .color-g06{
        background: #B8D4E3; /*Light Blue*/
    }

    .outil-interne .color-g07{
        background: #EB5473; /*Dark Pink*/
    }

    .outil-interne .color-g08{
        background:#EB9FAF; /*Illusion*/
    }

    .outil-interne .color-g09{
        background:#EAC5CC; /*Chantilly*/
    }

    .outil-interne .color-g10{
        background:#FA9114; /*Carrot Orange*/
    
    }

    .outil-interne .color-g11{
        background:#F2BE7F; /*Corvette*/
    }

    .outil-interne .color-g12{
        background:#EED4B5 ; /*Pink Lady*/
    }


/* OJ */

.objectifjustice .cover {
  background-color: #00477B;
  border-radius: 16px;
  background-image: url("https://www.jiyong.eu/wp-content/uploads/2025/06/cover-oj-02.png");
  background-repeat: no-repeat;
  background-position: left top;
  max-width: 1640px;
  height: 600px;
  margin: auto;
  background-size: cover;
}


.objectifjustice .section-01, .objectifjustice .section-02 {
  border-radius: 16px;
  padding: 80px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1640px;
  margin: auto;
}

.objectifjustice .section-01{
  background-color: var(--oj-fourth);
}

.objectifjustice .section-02{
  background-color: var(--oj-fifth);
  color: var(--oj-third);
}

.objectifjustice .mobile-list{
  max-width: 850px;
}

.objectifjustice .commandes-toggle .slider{
    background-color: var(--oj-primary);
}

.objectifjustice .commandes-toggle input:checked + .slider{
    background-color: var(--oj-secondary);
}

.objectifjustice .thumbnails-list{
  max-width: 1016px;
  column-count: 3;
  margin: auto;
}

.objectifjustice .thumbnails-list li{
  margin-bottom: 2rem;
}


@media screen and (min-width:1704px) {
  .wrapper{
    padding:0 1rem;
  }
  

}

@media screen and (min-width:1128px) {
  
.outil-interne article .wrapper{
    max-width: 1128px;
    margin: auto;
    width: 100%;
  }
  
}


@media screen and (min-width:768px) and (max-width:1704px){
  .wrapper{
    padding:0 1rem;
  }
}


@media screen and (min-width:1080px) {

  /*main-menu*/
  .main-menu ul{
    display: flex;
    flex-direction: row;
    gap:1rem;
  }

    .main-menu ul li a{
      height:62px;
      display: flex;
      align-items: center;
    }

  .menu-button{
    display: none;
  }

  /* même style que bouton btn*/
  .link-header{
    border-radius: var(--btn-rounded);
    padding: 1rem 1.5rem;
    position: relative;
    display: inline-block;
    overflow: hidden;
    z-index: 3;
  }

   .background-defaut .link-header{
      background: var(--texture-primary);
      color:var(--color-secondary)
   }

    .is-portfolio .link-header{
      background: var(--white-primary);
      color:var(--white-secondary)
   }

      .link-header::before{
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 100%;
        left: -50%;
        width: 0;
        margin: auto;
        background:var(--texture-secondary);
        box-shadow: var(--shadow-inset);
        transition: all 0.2s;
        z-index: -1;
        border-radius: 2.5rem;
        }

        
        .background-defaut .link-header::before{
          background:var(--texture-secondary);
          box-shadow: var(--shadow-inset);
        }

        .is-portfolio .link-header::before{
          background:var(--white-secondary);
          box-shadow: var(--shadow-inset);
        }

        .background-defaut .current-menu-item .link-header{
          background: var(--texture-secondary);
          color:var(--color-primary);
        }

        .is-portfolio .current-menu-item .link-header{
          background: var(--white-secondary);
          color:var(--white-primary);
        }

        .current-menu-item .link-header::before{
          display: none;
        }


  .link-header:hover{
    transition: all 0.2s;
  }

      .background-defaut .link-header:hover{
        color:var(--color-primary);
      }

      .is-portfolio .link-header:hover{
        color:var(--white-primary);
      }

  .link-header:hover::before{
      right: 0;
      left: 0;
      width: 100%;
      transition: all 0.2s;
    }



}

@media screen and (max-width:1080px) {

.body-menu-open {
  overflow: hidden;
  height: 100vh;
}

  .main-menu{
    position: fixed;
    left: 0;
    right: 0;
    top:0;
    bottom: 0;
    width: 1px;
    height: 20%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin:auto;
    transition: all 0.3s;
    z-index: 888;
    overflow: hidden;
    border-radius: 40px;
    opacity: 0;
  }

    .background-defaut .main-menu{
      background: var(--texture-secondary);
    }

    .is-portfolio .main-menu{
      background: var(--white-secondary);
    }

    .body-menu-open .main-menu{
      left: 0;
      right: 0;
      top:0;
      bottom: 0;
      border-radius: 0;
      width: 100%;
      height: 100vh;
      opacity: 1;
    }

    .main-menu ul{
      padding: 40px;
    }

    .link-header{
      width: 100%;
      background: none;
      border-radius:0;
      display: flex;
      justify-content: left;
      align-items: center;
      padding:16px 0;
    }

    .background-defaut .link-header{
      color:var(--color-primary);
      border-bottom: 1px solid var(--color-primary);
    }

    .is-portfolio .link-header{
      color:var(--white-primary);
      border-bottom: 1px solid var(--white-primary);
    }

    .current-menu-item .link-header{
        transition: all 0.5s;
        padding-left:16px; 
    }

      .background-defaut .current-menu-item .link-header{
        color:var(--color-primary);
        background:var(--texture-secondary);
      }


      .is-portfolio .current-menu-item .link-header{
        color:var(--white-primary);
        background:var(--white-secondary);
      }
      

/* menu gauche… qui se retrouve au dessus en responsive, tg c'est magique*/

.menu-gauche{
  gap:16px;
}

.parcours li {
  flex-direction: column;
}

.parcours li > div{
  width: 100%;
}

.cards li {
  grid-template-columns: 1fr;
}

.logo .type{
  font-size: 4rem;
}


}

@media screen and (min-width:768px) {

  .grid-2{
    grid-template-columns: 1fr 1fr; /* 2 colonnes à partir de 768px */
  }

  .menu-gauche{
    max-width:414px;
  }
  
  .columns{
      gap:80px;
  }
 
  footer .footer-explain{
    width: 33%;
  }


  /* work */
  .work-description, .chapo, hr.separateur{
    max-width: 558px;
    margin:auto;
  }


  /*work texte*/
  .main-foliolabs .little-paragraph{
    max-width: 558px;
    margin:auto;
  }

 
}

@media screen and (max-width:768px){
  
  .wrapper{
    padding:0 2rem;
  }

  .nav-articles{
    margin:0 2rem;
  }

  .columns{
    flex-direction: column;
  }

  .menu-gauche{
    flex-direction: row;
    width: 100%;
  }

  footer .footer-content{
    flex-direction: column;
  }

  footer .footer-explain{
    width: 100%;
  }

  footer .main-menu-list{
    justify-content: center;
  }

    /* work */
  .work-description, .chapo, hr.separateur{
    margin:auto;
    padding:2rem 0;
  }

    /**/

  .two-paragraph, .two-paragaph, .img-list{
  column-count:1;
  flex-direction: column;
  }

  .outil-interne .color-list{
    column-count: 1;
  }

  .logos-kinaxia .img-list{
    column-count: 1;
    column-gap: 1rem;
  }

  .outil-interne .sombre, .outil-interne .light{
    margin: 0;
    border-radius: 0;
  }

  /*cityscan*/
  .cityscan .color-list{
  column-count: 1;
  column-gap: 0;
}

}

@media screen and (max-width:450px){


    h2 {
        font-size: 2rem;
        font-weight: 700;
        hyphens: auto;
        overflow-wrap: break-word;
        line-break: auto;
    }

    .parcours .parcours-infos{
    flex-direction: column;
    margin-bottom: 2rem;
    }

    .parcours-society{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: wrap;
  }

    .interface-device{
        width: 207px;
        height: 421px;
    }

    .mobile-list, .iconlist, .icon-list{
      flex-direction: column;
    }

    .nav-content a span{
      display: none;
    }

    .nav-content a{
      width:54px ;
    justify-content: center;
    }
   
}

@media screen and (max-width:380px){

  .parcours li{
    padding: 40px 32px;
  }

}