@import url('https://fonts.googleapis.com/css2?family=Arima:wght@100..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
  --title: #383D38;
  --text: #6F7370;
}

html{
     margin:0;
     padding:0;
     box-sizing: border-box;
     width:100%;
     height: 100%;
     overflow: auto;
     scroll-behavior: smooth;
}
 body{
     margin:0;
     padding:0;
     width:100%;
     font-family: "Arima", system-ui;
     font-optical-sizing: auto;
     font-weight: 300;
     font-style: normal;
     color:var(--text);
     display:flex;
     flex-direction: column;
     align-items: center;
}
 body *{
     box-sizing: border-box;
} 
 .loader {
     visibility:visible;
     position: fixed;
     left: 50%;
     top: 50%;
     z-index: 1000;
     width: 45px;
     height: 40px;
     background: linear-gradient(#0000 calc(1*100%/6),#85E0A3 0 calc(3*100%/6),#0000 0), linear-gradient(#0000 calc(2*100%/6),#85E0A3 0 calc(4*100%/6),#0000 0), linear-gradient(#0000 calc(3*100%/6),#85E0A3 0 calc(5*100%/6),#0000 0);
     background-size: 10px 400%;
     background-repeat: no-repeat;
     animation: matrix 1s infinite linear;
}
 @keyframes matrix {
     0% {
         background-position: 0% 100%, 50% 100%, 100% 100% 
    }
     100% {
         background-position: 0% 0%, 50% 0%, 100% 0% 
    }
}
*:focus:not(:focus-visible) { 
    outline: none; 
}
img, svg {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none; /* clé pour iOS */
  outline: none;
}
a:focus img { 
    outline: none; 
}
 p{
     font-family: 'Inter';
     color:var(--text);
}
 hr{
     width:50%;
     max-width:400px;
     color:#85E0A3;
     border:1px solid #85E0A3;
}
/* HEADER */
 h1{
     font-family: "Arima";
     font-weight: 350;
     font-size: 96px;
     text-align: center;
     line-height: 5rem;
     color:var(--title);
}
 #hello{
     font-size: 64px;
}
 h2{
     font-family: "Arima";
     font-weight: 200;
     font-size: 36px;
     text-align: left;
     line-height: 5rem;
     color:var(--title);
}
 h3{
     font-family: "Arima";
     font-weight: 600;
     font-size: 24px;
     text-align: left;
     margin:0;
     color:var(--title);
}
 header{
     visibility:hidden;
     Width:100%;
     display:flex;
     flex-direction: column;
     align-items: center;
     background-image:url(img/bluur.svg);
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
}
 header *{
     z-index: 2;
}
 #plain-text>canvas{
     width:100% !important;
     height:100vh !important;
     opacity:0.8;
     z-index: 1;
     position:absolute;
     display: flex;
     flex-direction: column;
     top:20vh;
     margin:0;
     padding:0;
     justify-content: center;
     align-items: center;
     pointer-events: none;
}
 #plain-text>#canvasHead{
     margin-top:-150px;
     width:500px !important;
     opacity:1;
     z-index: 2;
     position:static;
     padding:0;
     justify-content: center;
     align-items: center;
     pointer-events:all;
     height:auto !important;
     filter: brightness(1.75);
     filter: saturate(90%);
}
 header>img{
     margin-top:-150px;
}
 .button{
     width:fit-content;
     padding :0 32px;
     display:flex;
     justify-content: center;
     align-items: center;
     border-radius: 24px;
     gap:16px;
     margin-top:24px;
     transition: all 0.1s ease;
     min-width: 256px;
     -webkit-tap-highlight-color: transparent;
     -webkit-focus-ring-color: transparent;
     outline: none;
}
 .button:hover{
     cursor: crosshair;
}
 .button>p{
     font-family: 'Inter';
     font-weight: 500;
     text-align: center;
     line-height: 24px;
}
 .secondary{
     background-color: #2B302B;
     color: #2B302B;
}
 .secondary>p{
     color: white;
}
 .secondary svg path{
     fill:white;
}
 .secondary:hover{
     box-shadow: inset -3.5px 0 0 #2B302B,inset 0 -3.5px 0 #2B302B,inset 3.5px 0 0 #2B302B,inset 0 3.5px 0 #2B302B;
     background-color: white;
     gap:30px;
}
 .secondary:hover p{
     color :#2B302B;
}
 .secondary:hover svg path{
     fill :#2B302B;
}
 .primary{
     background-color: #B9F8BF;
}
 .primary>p{
     color:#2B302B;
}
 .primary svg path{
     fill:#2B302B;
}
 .primary:hover{
     box-shadow: inset -3.5px 0 0 #44834A,inset 0 -3.5px 0 #44834A,inset 3.5px 0 0 #44834A,inset 0 3.5px 0 #44834A;
     background-color: white;
     gap:30px;
}
 .primary:hover p{
     color :#44834A;
}
 .primary:hover svg path{
     fill :#44834A;
}
 #filter{
     display:flex;
     flex-direction: row;
     flex-wrap: wrap;
     width:100%;
     gap:32px;
     height:fit-content;
     min-height:96px;
     padding:0px 0px 32px 0px;
}
 #filter .button{
     min-width:200px;
     margin-top:0;
}
 .tertiary{
     background-color: white;
     box-shadow: inset -2px 0 0 #B9F8BF,inset 0 -2px 0 #B9F8BF,inset 2px 0 0 #B9F8BF,inset 0 2px 0 #B9F8BF;
     color:#2B302B;
}
 .tertiary:hover{
     box-shadow: inset -3.5px 0 0 #2B302B,inset 0 -3.5px 0 #2B302B,inset 3.5px 0 0 #2B302B,inset 0 3.5px 0 #2B302B;
     background-color: white;
}
 .tertiary>p{
     color:#2B302B;
}
/* NAV BAR */
 a{
     text-decoration: none;
     font-family: 'Inter';
     color:white;
     font-weight: 400;
     text-align: center;
     line-height: 24px;
     display: flex;
     justify-content: center;
     align-items: center;
}
 nav>a{
     color:rgba(255,255,255,0.5) 
}
 nav>a:hover{
     color:rgba(255, 255, 255, 0.75) 
}
 .hidden-elements{
     display:none;
}
 .sentinel, .sentinel2 {
     height: 1px;
}
 nav{
     visibility:hidden;
     top: 64px;
     z-index: 1000;
     position:sticky;
     padding:64px;
     background: #2B302B;
     transition: all 0.3s ease;
     padding:16px 24px;
     display:flex;
     justify-content: space-around;
     gap:16px;
     width:fit-content;
     border-radius: 24px;
}
 #nav-travaux{
     display:flex;
     justify-content: center;
     gap:16px;
     transition: all 0.1s ease;
}
 #nav-travaux:hover{
     gap:30px;
}
 #nav-travaux p{
     color:rgba(255,255,255,0.5);
     font-family: 'Inter';
     color:white;
     font-weight: 400;
     text-align: center;
     line-height: 24px;
     padding:0;
     margin:0;
}
/* MENU TOGGLE */

#travaux-button{
    visibility: hidden;
}

#mobile-nav{
     visibility:hidden;
     top: 32px;
     right: 32px;
     z-index: 1000;
     position:fixed;
     padding:64px;
     background: #2B302B;
     transition: all 0.3s ease;
     padding:16px 16px 7px 16px;
     display:none;
     flex-direction: column;
     justify-content: start;
     gap:8px;
     width:fit-content;
     border-radius: 24px;
     align-items:end;
     -webkit-tap-highlight-color: transparent;
     -webkit-focus-ring-color: transparent;
     outline: none;
}
.hamburger {
width:fit-content;
  cursor: pointer;
}

.hamburger input {
  display: none;
}

.hamburger svg {
  /* The size of the SVG defines the overall size */
  height: 2em;
  /* Define the transition for transforming the SVG */
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.line {
  fill: none;
  stroke: white;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
  /* Define the transition for transforming the Stroke */
  transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
              stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.line-top-bottom {
  stroke-dasharray: 12 63;
}

.hamburger input:checked + svg {
  transform: rotate(-45deg);
}

.hamburger input:checked + svg .line-top-bottom {
  stroke-dasharray: 20 300;
  stroke-dashoffset: -32.42;
}
/* CONTENT */
 #content{
     visibility:hidden;
     width:70%;
     display:flex;
     flex-direction:column;
     padding:64px 0px;
     gap:200px;
}
 .wrapper {
     width: 100%;
     gap:48px;
     display: flex;
     flex-wrap: wrap;
}
 .wrapper>div {
     flex:1;
}
 .section>.wrapper{
     margin-bottom:48px;
}
 .g-bloc{
     flex: 1;
     padding:32px;
     height:450px;
     background-color: #FBFBFB;
     display:flex;
     flex-direction: column;
     border-radius: 32px;
     overflow: hidden;
     gap:32px;
}
 .g-bloc>img{
     width: 100%;
     object-fit: cover;
     flex-grow: 1;
     flex-shrink: 1;
     flex-basis: 0;
     min-height: 0;
     max-height: 70%;
}
.g-bloc>canvas{
     width: 100%;
     object-fit: cover;
     flex-grow: 1;
     flex-shrink: 1;
     flex-basis: 0;
     height:auto;
     max-height: 70%;
}
 .g-bloc>div{
     flex-shrink: 0;
     display:flex;
     flex-direction: column;
     justify-content:start;
}
 .v-bloc{
     background-color: #B9F8BF;
}
 .no-bloc{
     flex: 1;
     height:450px;
     display:flex;
     flex-direction: column;
     overflow: hidden;
     gap:32px;
}
 .no-bloc>img{
     border-radius: 16px;
     width: 100%;
     object-fit: cover;
     flex-grow: 1;
     flex-shrink: 1;
     flex-basis: 0;
     min-height: 0;
     max-height: 70%;
}
 .no-bloc>div{
     flex-shrink: 0;
     display:flex;
     flex-direction: column;
     justify-content:start;
}
/*FIGMA LOGO*/
 #figma{
     flex: 1.5;
     height:132px;
     border-radius: 32px;
     display:flex;
     align-items: center;
     justify-content: center;
     background-color:#1E1E1E;
}
 .no-bloc>.row{
     flex-direction: row;
     gap:32px;
}
/* SLIDER */
 @-webkit-keyframes scroll {
     0% {
         transform: translateX(0);
    }
     100% {
         transform: translateX(calc(-116px * 11));
    }
}
 @keyframes scroll {
     0% {
         transform: translateX(0);
    }
     100% {
         transform: translateX(calc(-116px * 11));
    }
}
 @-webkit-keyframes scroll2 {
     0% {
         transform: translateX(0);
    }
     100% {
         transform: translateX(calc(-116px * 6));
    }
}
 @keyframes scroll2 {
     0% {
         transform: translateX(0);
    }
     100% {
         transform: translateX(calc(-116px * 6));
    }
}
 .slider {
     flex: 2;
     background: #F5F5F5;
     height: 132px;
     margin: auto;
     overflow: hidden;
     position: relative;
     width: 100%;
     padding:16px;
     border-radius: 32px;
}
 .slider::before, .slider::after, .slider2::after, .slider::before{
     background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
     content: "";
     height: 132px;
     position: absolute;
     width: 100px;
     z-index: 2;
}
 .slider::after {
     right: 0;
     top: 0;
     transform: rotateZ(180deg);
}
 .slider::before {
     left: 0;
     top: 0;
}
 .slider .slide-track {
     -webkit-animation: scroll 30s linear infinite;
     animation: scroll 30s linear infinite;
     display: flex;
     gap:16px;
     width: calc(116px * 22);
}
 .slider2 .slide-track {
     -webkit-animation: scroll2 40s linear infinite;
     animation: scroll2 40s linear infinite;
     display: flex;
     gap:16px;
     width: calc(116px * 12);
}
 .slide {
     display:flex;
     align-items: center;
     justify-content: center;
     min-height: 100px;
     width: 100px;
     background-color: white;
     border-radius: 16px;
}
 .slide p{
     color:#939393;
     font-family: 'Inter';
     font-size: 24px;
     font-weight: 600;
}
/* PROJET */
 .p-bloc{
     flex: 1;
     padding:8px;
     height:450px;
     background-color: #F5F5F5;
     display:flex;
     flex-direction: column;
     border-radius: 32px;
     overflow: hidden;
     gap:32px;
}
 .p-bloc>img{
     width: 100%;
     object-fit: cover;
     border-radius: 24px;
     flex-grow: 1;
     flex-shrink: 1;
     flex-basis: 0;
     min-height: 0;
}
 .p-bloc>iframe{
     width: 100%;
     height:400px;
}
 iframe .watermark{
     display:none;
}
/* EXPERIENCE */
 #exp{
     display:flex;
     flex:2;
     flex-direction: column;
     gap:32px;
}
 .head-travaux{
     position:sticky;
     top: 150px;
     z-index: 999;
     display:flex;
     align-items: center;
     justify-content: center;
}
 .head-travaux>canvas{
     width:300px !important;
     height:auto !important;
}
 .e-bloc{
     flex: 2;
     padding:32px;
     height:fit-content;
     background-color: #FBFBFB;
     display:flex;
     flex-direction: row;
     align-items: start;
     border-radius: 32px;
     overflow: hidden;
     gap:32px;
}
 .e-bloc>img{
     width: 64px;
     object-fit:contain;
     flex-grow: 1;
     flex-shrink: 1;
     flex-basis: 0;
     min-height: 0;
     max-height: 70%;
}
 .e-bloc>.date{
     width: 64px;
     object-fit:contain;
     font-family: 'Inter';
     color:#85E0A3;
     font-weight: 500;
     font-size: 20px;
     flex-grow: 1;
     flex-shrink: 1;
     flex-basis: 0;
     min-height: 0;
     max-height: 70%;
}
 .e-bloc>div{
     width:100%;
     display:flex;
     flex-direction: column;
     justify-content:start;
}
/* TRAVAUX LIST */
 .travaux {
     width:100%;
     display: grid;
     grid-gap: 32px;
     grid-template-columns: repeat(4, 1fr);
     grid-auto-rows: 200px;
     grid-auto-flow: dense;
}
 .normal{
     grid-column: span 1;
     grid-row: span 1;
     height:100%;
}
 .travaux .wide {
     grid-column: span 2;
     height:100%;
}
 .travaux .extrawide {
     grid-column: span 3;
     grid-row: span 2;
     height:100%;
}
 .travaux .tall {
     grid-column: span 1;
     grid-row: span 2;
     height:100%;
}
 .travaux .big {
     grid-column: span 2;
     grid-row: span 2;
     height:100%;
}
 .travaux > div{
     width:100%;
     height:100%;
     -moz-transition: all 0.5s ease;
     -ms-transition: all 0.5s ease;
     -o-transition: all 0.5s ease;
     transition: all 0.5s ease;
     -webkit-transform:scale(1.00);
}
 .p-bloc>a{
     position: absolute;
     width:100%;
     height:100%;
}
 .travaux > div:hover {
     -moz-transition: all 0.5s ease;
     -ms-transition: all 0.5s ease;
     -o-transition: all 0.5s ease;
     transition: all 0.5s ease;
     -webkit-transform:scale(1.05);
     cursor: crosshair;
}
/* MODAL */
 .modal {
     position: fixed;
     z-index: 2000;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     display: none;
     align-items: center;
     justify-content: center;
     background-color: rgba(0, 0, 0, 0.25);
}
 .modal-container {
     max-height: 90vh;
     max-width: 600px;
     margin-left: auto;
     margin-right: auto;
     background-color: #fff;
     border-radius: 16px;
     overflow: hidden;
     display: flex;
     flex-direction: column;
     box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.25);
}
 .modal-container-header {
    visibility: visible;
     padding: 16px 32px;
     border-bottom: 1px solid #ddd;
     display: flex;
     gap:32px;
     background-image: none;
     align-items: center;
     flex-direction: row;
     justify-content: space-between;
}
 .modal-container-title svg {
     width: 32px;
     height: 32px;
     color: #750550;
}
 .modal-container-body {
     padding: 24px 32px 51px;
     overflow-y: auto;
}
 .modal-container-body img{
     width:100%;
     height:auto !important;
}
 .modal-container-body a{
     color:#44834A;
     cursor: crosshair;
     justify-content: start;
}
 .modal-container-body .p-bloc{
     height:fit-content;
}
 .rtf h1, .rtf h2, .rtf h3, .rtf h4, .rtf h5, .rtf h6 {
     font-weight: 700;
}
 .rtf h1 {
     font-size: 1.5rem;
     line-height: 1.125;
}
 .rtf h2 {
     font-size: 1.25rem;
     line-height: 1.25;
}
 .rtf h3 {
     font-size: 1rem;
     line-height: 1.5;
}
 .rtf > * + * {
     margin-top: 1em;
}
 .rtf > * + :is(h1, h2, h3) {
     margin-top: 2em;
}
 .rtf > :is(h1, h2, h3) + * {
     margin-top: 0.75em;
}
 .rtf ul, .rtf ol {
     margin-left: 20px;
     list-style-position: inside;
}
 .rtf ol {
     list-style: numeric;
}
 .rtf ul {
     list-style: disc;
}
 .rtf li {
     margin-top:16px;
}
 .modal-container-footer {
     height:1px;
     display: flex;
     align-items: center;
     justify-content: flex-end;
     border-top: 1px solid #ddd;
     gap: 12px;
     position: relative;
}
 .modal-container-footer:after {
     content: "";
     display: block;
     position: absolute;
     top: -51px;
     left: 24px;
     right: 24px;
     height: 50px;
     flex-shrink: 0;
     background-image: linear-gradient(to top, rgba(255, 255, 255, 0.75), transparent);
     pointer-events: none;
}
 .icon-button {
     padding: 0;
     border: 0;
     background-color: transparent;
     width: 40px;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
     line-height: 1;
     cursor: pointer;
     border-radius: 8px;
     transition: 0.15s ease;
}
 .icon-button svg {
     width: 24px;
     height: 24px;
}
 .icon-button:hover, .icon-button:focus {
     background-color: #dfdad7;
}
 #logiciels{
     padding:16px 0px;
     display:flex;
     gap:16px;
     flex:wrap;
     width:100%;
     align-items: center;
}
 #logiciels img{
     width:32px;
     height:32px;
}
/* WIDE */
@media screen and (min-width:1700px){
    .g-bloc{
        align-items:center;
    }
    .g-bloc>canvas{
     width: 550px;
     object-fit: cover;
     flex-grow: 0;
     flex-shrink: 1;
     
     height:auto;
     max-height: 70%;
    }
}
@media screen and (min-width:1300px){
header{
     background-position: bottom;
}
}
/* MOBILE */
 @media screen and (max-width: 900px) {
     #content{
         width:100%;
         display:flex;
         flex-direction:column;
         padding:128px 20vw;
         gap:200px;
    }
     .head-travaux{
         display:none;
    }
     .travaux {
         display:flex;
         flex-direction: column;
         grid-template-columns: 1fr;
    }
     .wrapper {
         width:100%;
         display:flex;
         flex-direction:column;
         flex-wrap: nowrap;
    }
     .g-bloc>img{
         flex:none;
    }
     .no-bloc>img{
         flex:none;
    }
     .p-bloc>img{
         flex:none;
    }
     #filter{
         gap:16px;
    }
     #filter::-webkit-scrollbar {
         display: none;
    }
     #filter .button{
         min-width:100px;
    }
}

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

    nav{
        display:none;
    }
    #mobile-nav{
     display:flex;
    }
    #travaux-button{
        visibility: visible;
    }
     #content{
         padding:192px 32px;
    }
     h1{
         font-size: 48px;
         line-height: 3.5rem;
    }
     h2{
         font-size: 32px;
    }
     #hello{
         font-size: 36px;
    }
     header{
         padding:128px 32px 0px 32px;
    }
     #invertedcolumn{
         flex-direction: column-reverse;
    }
     #bluur{
         padding: inherit;
         position:absolute;
         z-index:-100;
         width:170vw;
         top:-10%;
         pointer-events: none;
         object-fit: cover;
    }
     #plain-text>#canvasHead{
         margin-top:-120px;
         width:400px !important;
         max-width:100% !important;
         height:auto !important;
    }
     .e-bloc{
         flex-direction: column;
         gap:16px;
    }
     .e-bloc>img {
         width: 64px;
         height:64px;
         object-fit:unset;
         flex-grow: unset;
         flex-shrink: unset;
         flex-basis: unset;
         min-height: none;
         max-height: none;
    }
     .modal-container {
         width: 90%;
    }
    .e-bloc>.date{
    height:fit-content;
    object-fit:unset;
    flex-grow: unset;
    flex-shrink: unset;
    flex-basis: unset;
    min-height: none;
    max-height: none;
}
}