.elementor-6 .elementor-element.elementor-element-6df57ae{--display:flex;--margin-top:-18px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-6 .elementor-element.elementor-element-90e14bc.elementor-element{--align-self:center;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-6 .elementor-element.elementor-element-ee1ab00{margin:2px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:100;}.elementor-6 .elementor-element.elementor-element-ee1ab00 img{width:40px;}.elementor-6 .elementor-element.elementor-element-7d3c1ad{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:100px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-6 .elementor-element.elementor-element-d9e4a9d{--display:flex;}.elementor-6 .elementor-element.elementor-element-0df3dd0 img{width:70%;height:467px;border-radius:25px 25px 25px 25px;}.elementor-6 .elementor-element.elementor-element-d320598{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6 .elementor-element.elementor-element-5ac6cde{--display:flex;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-6 .elementor-element.elementor-element-15c32de .elementor-heading-title{font-family:"Satisfy", Sans-serif;font-weight:600;color:var( --e-global-color-astglobalcolor2 );}.elementor-6 .elementor-element.elementor-element-a97d67e{--display:flex;}.elementor-6 .elementor-element.elementor-element-b40b7aa{text-align:center;}.elementor-6 .elementor-element.elementor-element-b40b7aa .elementor-heading-title{font-family:"Satisfy", Sans-serif;font-weight:600;color:var( --e-global-color-astglobalcolor2 );}.elementor-6 .elementor-element.elementor-element-e00fbb1{margin:15px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-6 .elementor-element.elementor-element-e67ed76{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-6 .elementor-element.elementor-element-e12de68{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-6 .elementor-element.elementor-element-25d1462{--display:grid;--e-con-grid-template-columns:repeat(3, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;--justify-items:center;}.elementor-6 .elementor-element.elementor-element-25d1462.e-con{--align-self:center;}.elementor-6 .elementor-element.elementor-element-4cf803a{--display:flex;--min-height:300px;border-style:solid;--border-style:solid;border-width:0px 0px 0px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:0px;--border-left-width:0px;--border-radius:20px 20px 20px 20px;box-shadow:-2px 0px 6px 2px rgba(0, 0, 0, 0.25);}.elementor-6 .elementor-element.elementor-element-4cf803a:not(.elementor-motion-effects-element-type-background), .elementor-6 .elementor-element.elementor-element-4cf803a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-6 .elementor-element.elementor-element-65b22c8{--display:flex;--min-height:70px;--margin-top:15px;--margin-bottom:0px;--margin-left:20px;--margin-right:0px;}.elementor-6 .elementor-element.elementor-element-acdcdcb{--display:flex;--margin-top:-84px;--margin-bottom:0px;--margin-left:90px;--margin-right:0px;}.elementor-6 .elementor-element.elementor-element-cfd12d1 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-weight:600;-webkit-text-stroke-color:#000;stroke:#000;color:#000000;}.elementor-6 .elementor-element.elementor-element-cfd12d1 .elementor-heading-title a:hover, .elementor-6 .elementor-element.elementor-element-cfd12d1 .elementor-heading-title a:focus{color:var( --e-global-color-astglobalcolor2 );}.elementor-6 .elementor-element.elementor-element-cfd12d1 .elementor-heading-title a{transition-duration:0s;}.elementor-6 .elementor-element.elementor-element-9e42cc7{margin:-20px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:2;}.elementor-6 .elementor-element.elementor-element-1ec63bb{margin:-21px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 10px;z-index:1;}.elementor-6 .elementor-element.elementor-element-d634275{--display:flex;--min-height:90px;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-progress .elementor-title{color:var( --e-global-color-primary );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-progress .elementor-progress-wrapper .elementor-progress-bar{background-color:var( --e-global-color-primary );}.elementor-6 .elementor-element.elementor-element-4de0440 .elementor-progress-wrapper .elementor-progress-bar{background-color:#F47C0F;}.elementor-6 .elementor-element.elementor-element-4de0440 .elementor-progress-bar{height:30px;line-height:30px;}.elementor-6 .elementor-element.elementor-element-4de0440 .elementor-progress-wrapper{border-radius:15px;overflow:hidden;}.elementor-6 .elementor-element.elementor-element-aac8868{--display:flex;--min-height:300px;border-style:solid;--border-style:solid;border-width:0px 0px 0px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:0px;--border-left-width:0px;--border-radius:20px 20px 20px 20px;box-shadow:-2px 0px 6px 2px rgba(0, 0, 0, 0.25);}.elementor-6 .elementor-element.elementor-element-aac8868:not(.elementor-motion-effects-element-type-background), .elementor-6 .elementor-element.elementor-element-aac8868 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-6 .elementor-element.elementor-element-0f5c38e{--display:flex;--min-height:70px;--margin-top:15px;--margin-bottom:0px;--margin-left:20px;--margin-right:0px;}.elementor-6 .elementor-element.elementor-element-e547e87{--display:flex;--margin-top:-84px;--margin-bottom:0px;--margin-left:90px;--margin-right:0px;}.elementor-6 .elementor-element.elementor-element-e547e87.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-6 .elementor-element.elementor-element-84b2d25 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-weight:600;color:var( --e-global-color-astglobalcolor2 );}.elementor-6 .elementor-element.elementor-element-84b2d25 .elementor-heading-title a:hover, .elementor-6 .elementor-element.elementor-element-84b2d25 .elementor-heading-title a:focus{color:var( --e-global-color-astglobalcolor2 );}.elementor-6 .elementor-element.elementor-element-84b2d25 .elementor-heading-title a{transition-duration:0s;}.elementor-6 .elementor-element.elementor-element-68ec103{margin:-20px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:2;}.elementor-6 .elementor-element.elementor-element-993a012{margin:-21px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 10px;z-index:1;}.elementor-6 .elementor-element.elementor-element-d296159{--display:flex;--min-height:125px;}.elementor-6 .elementor-element.elementor-element-9c9354a .elementor-progress-wrapper .elementor-progress-bar{background-color:#FACC15;}.elementor-6 .elementor-element.elementor-element-9c9354a .elementor-progress-bar{height:30px;line-height:30px;}.elementor-6 .elementor-element.elementor-element-9c9354a .elementor-progress-wrapper{border-radius:15px;overflow:hidden;}.elementor-6 .elementor-element.elementor-element-013fe65{--display:flex;--min-height:300px;border-style:solid;--border-style:solid;border-width:0px 0px 0px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:0px;--border-left-width:0px;--border-radius:20px 20px 20px 20px;box-shadow:-2px 0px 6px 2px rgba(0, 0, 0, 0.25);}.elementor-6 .elementor-element.elementor-element-013fe65:not(.elementor-motion-effects-element-type-background), .elementor-6 .elementor-element.elementor-element-013fe65 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-6 .elementor-element.elementor-element-68f3428{--display:flex;--min-height:70px;--margin-top:15px;--margin-bottom:0px;--margin-left:20px;--margin-right:0px;}.elementor-6 .elementor-element.elementor-element-ea60404{--display:flex;--margin-top:-84px;--margin-bottom:0px;--margin-left:90px;--margin-right:0px;}.elementor-6 .elementor-element.elementor-element-9586276 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-weight:600;color:var( --e-global-color-astglobalcolor2 );}.elementor-6 .elementor-element.elementor-element-9586276 .elementor-heading-title a:hover, .elementor-6 .elementor-element.elementor-element-9586276 .elementor-heading-title a:focus{color:var( --e-global-color-astglobalcolor2 );}.elementor-6 .elementor-element.elementor-element-9586276 .elementor-heading-title a{transition-duration:0s;}.elementor-6 .elementor-element.elementor-element-d05d445{margin:-20px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:2;}.elementor-6 .elementor-element.elementor-element-67de167{margin:-21px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 10px;z-index:1;}.elementor-6 .elementor-element.elementor-element-147e05e{--display:flex;--min-height:125px;}.elementor-6 .elementor-element.elementor-element-46efc16 .elementor-progress-wrapper .elementor-progress-bar{background-color:#3B82F6;}.elementor-6 .elementor-element.elementor-element-46efc16 .elementor-progress-bar{height:30px;line-height:30px;}.elementor-6 .elementor-element.elementor-element-46efc16 .elementor-progress-wrapper{border-radius:15px;overflow:hidden;}.elementor-6 .elementor-element.elementor-element-2637413{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:150px;--margin-right:0px;}.elementor-6 .elementor-element.elementor-element-2637413.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-6 .elementor-element.elementor-element-3887efb{--display:flex;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-6 .elementor-element.elementor-element-d9e4a9d{--width:50%;}.elementor-6 .elementor-element.elementor-element-d320598{--width:39%;}.elementor-6 .elementor-element.elementor-element-e12de68{--width:50%;}.elementor-6 .elementor-element.elementor-element-25d1462{--content-width:1600px;}.elementor-6 .elementor-element.elementor-element-4cf803a{--width:300px;}.elementor-6 .elementor-element.elementor-element-65b22c8{--width:70px;}.elementor-6 .elementor-element.elementor-element-acdcdcb{--width:150px;}.elementor-6 .elementor-element.elementor-element-d634275{--width:100%;}.elementor-6 .elementor-element.elementor-element-aac8868{--width:300px;}.elementor-6 .elementor-element.elementor-element-0f5c38e{--width:70px;}.elementor-6 .elementor-element.elementor-element-e547e87{--width:170px;}.elementor-6 .elementor-element.elementor-element-013fe65{--width:300px;}.elementor-6 .elementor-element.elementor-element-68f3428{--width:70px;}.elementor-6 .elementor-element.elementor-element-ea60404{--width:150px;}.elementor-6 .elementor-element.elementor-element-2637413{--width:93.472%;}}@media(max-width:1024px){.elementor-6 .elementor-element.elementor-element-25d1462{--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(2, 1fr);--grid-auto-flow:column;--justify-items:center;}}@media(max-width:767px){.elementor-6 .elementor-element.elementor-element-25d1462{--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-6 .elementor-element.elementor-element-65b22c8{--width:70px;--margin-top:0px;--margin-bottom:0px;--margin-left:10px;--margin-right:0px;}.elementor-6 .elementor-element.elementor-element-acdcdcb{--margin-top:-80px;--margin-bottom:0px;--margin-left:80px;--margin-right:0px;}.elementor-6 .elementor-element.elementor-element-0f5c38e{--width:70px;--margin-top:0px;--margin-bottom:0px;--margin-left:10px;--margin-right:0px;}.elementor-6 .elementor-element.elementor-element-e547e87{--margin-top:-80px;--margin-bottom:0px;--margin-left:80px;--margin-right:0px;}.elementor-6 .elementor-element.elementor-element-68f3428{--width:70px;--margin-top:0px;--margin-bottom:0px;--margin-left:10px;--margin-right:0px;}.elementor-6 .elementor-element.elementor-element-ea60404{--margin-top:-80px;--margin-bottom:0px;--margin-left:80px;--margin-right:0px;}}/* Start custom CSS for html, class: .elementor-element-90e14bc */.navbar-container {
  position: fixed;
  display: flex;
  background-color: #F47C0F;
  width: 300px;
  height: 50px;
  left: 50%;
  top: 15px;
  transform: translateX(-50%);
  align-items: center;
  justify-self: center;
  justify-content: space-around;
  border-radius: 10px;
  box-shadow: 0 8px 25px rgba(244, 124, 15, 0.4);
  transition: all 0.5s;
  z-index: 20;
}

.navbar-container:hover {
  width: 380px;
  transition: all 0.5s;
}

.icon {
  font-size: 20px;
}

.pages-navbar {
  outline: 0 !important;
  border: 0 !important;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: all ease-in-out 0.3s;
  cursor: pointer;
  text-decoration: none !important;
}

.pages-navbar:hover {
  transform: translateY(-3px);
  text-decoration: none;
  color: #FFF;
}

@media (max-width: 767px) {
  .navbar-container {
    top: 80px;
    left: 20px;
    right: 20px;
    width: auto;
    transform: none;
  }

  .navbar-container:hover {
    width: auto;
  }

  .pages-navbar {
    width: auto;
    padding: 0 10px;
  }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ee1ab00 */.logo-svg {
  position: fixed;
  top: 15px;
  left: 20px;
  z-index: 21;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-b7f2785 */body {
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 15px;
}


.mes-projets h2, .mes-projets1 h2{
    font-weight: 900;
    font-size: 60px;
}


[class*="projet-"] {
    position: relative;
    height: 300px;
    border-radius: 25px;
    overflow: hidden;
    background-color: #ffffff; 
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #eee;
}

.projet-1 img {
    max-width: 50%; 
    max-height: 50%;
    width: auto;
    height: auto;
    object-fit: contain; 
}

.content h3 {
    color:#6EC1E4;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px); 
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}
[class*="projet-"]:hover .overlay {
    opacity: 1;
}



.button-project {
    border-radius: 20px;
    transition: filter 0.3s ease-in-out;
    padding: 10px;
    background-color: #F47C0F;
}

.button-project:hover {
    filter: brightness(1.2)
}
.content {
    color: white;
    text-align: center;
    padding: 20px;
    width: 80%; 
}

.mes-projets {
    display: grid;
    grid-template-columns: 60% 40%;
    gap: 15px;
    
}

.projet-1 {
    grid-column: 1/2;
    grid-row: 1;
   
   background-image:
    url('https://jblot.wp.normandiewebschool.education/wp-content/uploads/2026/01/Capture-decran-2026-01-22-155159.png');
  background-size: cover;
    
}






[class*="projet"] img{
    border-radius:20px;

}
.projet-2  {
    grid-column: 2/3;
    grid-row: 1;
     background-image:
    url('https://jblot.wp.normandiewebschool.education/wp-content/uploads/2026/01/Capture-decran-2026-01-15-112229.jpg');
  background-size: cover;
}

.projet-3{
    grid-column: 1/2;
}

.projet-4 {
    grid-column: 2/3;
    width: 500px;
}




@media screen and (max-width: 992px) {
    .mes-projets {
        grid-template-columns: 1fr 1fr; 
    }

    .mes-projets h2, .mes-projets1 h2 {
        font-size: 45px; 
    }
}

@media screen and (max-width: 768px) {
    .mes-projets {
        display: flex; 
        flex-direction: column;
        gap: 20px;
    }

    [class*="projet-"] {
        width: 100% !important; 
        height: 250px; 
    }

    .mes-projets h2, .mes-projets1 h2 {
        font-size: 35px;
        text-align: center;
    }

   
    .content h3 {
        font-size: 1.2rem;
    }
    
    .content p {
        font-size: 0.9rem;
    }
}

@media screen and (max-width: 480px) {
    body {
        margin-left: 5px;
        margin-right: 5px;
    }

    [class*="projet-"] {
        height: 200px; 
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-e00fbb1 */body {
    margin-left: 10px;
    margin-right: 10px;
}


[class*="projet-"] {
    position: relative;
    height: 300px;
    border-radius: 25px;
    overflow: hidden;
    background-color: #ffffff; 
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #eee;
    width: 100%;
}

.projet-1 img {
    max-width: 50%; 
    max-height: 50%;
    width: auto;
    height: auto;
    object-fit: contain; 
}

.content h3 {
    color:#F47C0F;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px); 
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}
[class*="projet-"]:hover .overlay {
    opacity: 1;
}


.button-project {
    border-radius: 20px;
    transition: filter 0.3s ease-in-out;
    background-color: rgba(244, 124, 15, 0.8);
    text-decoration: none !important; 
    color: white;
}

.button-project:hover {
    filter: brightness(1.2)
}
.content {
    color: white;
    text-align: center;
    padding: 20px;
    width: 80%; 
}

.mes-projets1 {
    display: grid;
    grid-template-columns: 40% 60%;
    grid-template-rows: 300px 300px;
    gap: 15px;
    
}



.projet-1 {
    grid-column: 1/2;
    grid-row: 1;
    
}


[class*="projet"] img{
    border-radius:20px;

}
.projet-2  {
    grid-column: 2/3;
    grid-row: 1;
}

.projet-3{
    grid-column: 1/2;
    background-image:
  
    url('https://jblot.wp.normandiewebschool.education/wp-content/uploads/2026/01/Capture-decran-2026-01-20-105626.png');
  background-size: cover;
  background-position: center;
}

.projet-4 {
    grid-column: 2/3;
  background-size: cover;
  background-position: center;
    
}

.projet-5 {
    grid-column: 1/3;;
}


@media screen and (max-width: 992px) {
    .mes-projets1 {
        grid-template-columns: 1fr 1fr; 
    }
}

@media screen and (max-width: 768px) {
    .mes-projets1 {
        display: flex;
        flex-direction: column; 
    }

    .projet-3, .projet-4, .projet-5 {
        width: 100% !important;
        height: 250px; 
    }
    
    .mes-projets1 h2 {
        font-size: 40px;
    }
    .overlay {
        background: rgba(0, 0, 0, 0.6);
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e12de68 */:root {
    --button-color: #F47C0F;
    --border-color: #4DABFF;
    --main-font: 'Inter', system-ui, -apple-system, sans-serif;
}

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

html, body {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    max-width: 100%;
    min-height: 100%;
    padding: 20px;
}

body {

    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: block; 
    background-color: #f8f9fa;

}

main {
    display: flex;
    flex-direction: column;
    align-content: flex-end;

}



.button {
    font-family: var(--main-font);
    position: fixed;
    cursor: pointer;
    z-index: 10;
    color: #E0F2FE;
    display: flex;
    background-color: var(--button-color);
    border: 3px solid var(--border-color);
    border-radius: 50px;
    height: 60px;
    width: 60px;
    bottom: 30px;
    left: 30px;
    align-items: center;
    justify-content: center;
    animation: rebond 1s infinite alternate ease-in-out;
    transition: filter 0.2s ease-in-out;
}

.button:hover {
    filter: brightness(1.2);

}

@keyframes rebond {
    from {transform: scale(1);}
    to {transform: scale(1.1);}
}

.grid-overlay {
    
    position: fixed;
    top: 0;
    z-index: 21;
    left: 0;
    width: 100vw;
    height: 100vh;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(3, 100px);
    gap: 15px;
    justify-content: center;
    align-content: center;
    align-items: center;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;                 
    transform: scale(0.9);  
    transition: all 0.4s ease-in-out;
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px); 
    background-color: rgba(255, 255, 255, 0.1);
}

.icon {
    background-color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    width: 100px;
    height: 100px;
    opacity: 1;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); ;
    display: flex;
    justify-content: center;
    transform: translateY(20px);
    align-items: center;
    border-radius: 15px;
    font-family: var(--main-font);
    pointer-events: auto;
    transition: all 0.4s ease;
    cursor: pointer;
    transition-delay: 0s;
    
}


#container-github {
    display: grid ;
    grid-template-columns: 1fr;
    position: relative;


}

.close-input{
    position: absolute;
    z-index: 12;
    background-color: #ff4d4d; 
    border-color: #ff4d4d;
    color: white;
    font-size: 1rem; 
    font-weight: bold;
    cursor: pointer;
    width: 15px;
    height: 15px;
    top: -10px;
    margin-left: 100px; 
    border-radius: 50%;
    transition: transform 0.5s ease, background-color 0.3s ease;
    display: flex;
    opacity: 0;
    visibility: hidden;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-align: center;
    line-height: 0; 
    padding: 0 0 5px 0;    
    transform-origin: center;
    
}

.close-input::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
}
.close-input span{
    margin-top: 2px;
}

[id^="container-"] {
    display: grid;
    position: relative;
    grid-column: auto; 
    grid-row: auto;
}

[id^="container-"]:hover .close-input {
    opacity: 1;
    visibility: visible;
}


[id^="container-"] > * {
    grid-column: 1;
    grid-row: 1;
}
[id^="container-"]:hover .icon {
    transform: scale(1.1);
    transition: all 0.2s ease-in-out;
}

#container-instagram:hover .icon.instagram { background-color: #E4405F; fill: #fff; }
#container-github:hover .icon.github { background-color: #181717; fill: #fff; }
#container-ytb:hover .icon.ytb { background-color: #FF0000; fill: #fff; }
#container-linkedin:hover .icon.linkedin { background-color: #0077B5; fill: #fff; }
#container-discord:hover .icon.discord { background-color: #5865F2; fill: #fff; }
#container-dribbble:hover .icon.dribbble { background-color: #EA4C89; fill: #fff; }
#container-twitch:hover .icon.twitch { background-color: #9146FF; fill: #fff; }
#container-x:hover .icon.x { background-color: #000000; fill: #fff; }

.icon.close-btn {
    background-color: #ff4d4d; 
    border-color: #ff4d4d;
    color: white;
    font-size: 2rem; 
    font-weight: bold;
    cursor: pointer;
    width: 70px;
    height: 70px;
    margin: auto;
    border-radius: 50%;
    transition: transform 0.5s ease, background-color 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 0; 
    padding: 0 0 5px 0;    
    transform-origin: center;
}

.open-input {
    display: flex;
    align-items: center;
    justify-content: center; 
    width: 100%; 
    border-radius: 15px; 
    color: #f57e0f;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    background-color: rgba(255, 255, 255, 0.3); 
    border: 2px dashed #f57e0f; 
    z-index: 5;

}

.icon.close-btn:hover {
    background-color: #ff1a1a;
    transform: rotate(90deg);
     
}

.checkbox-icon {
    visibility: hidden;
    opacity: 0;
}

.checkbox-icon:checked ~ .icon {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: scale(0.5) translateY(20px) !important;
    transition: all 0.3s ease;
    pointer-events: none;
}

.checkbox-icon:checked ~ .close-input {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: scale(0); 
    transition: all 0.3s ease;
}

.checkbox-icon:checked ~ .open-input {
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(1); 
    transition: all 0.5s ease;
}

.grid-checkbox:checked ~ .grid-overlay .icon {
    opacity: 1;
    transform: translateY(0);
}

.grid-checkbox:checked ~ .grid-overlay {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    pointer-events: auto;
    transition: all 0.4s ease;
}
.grid-checkbox:checked ~ .button {
    opacity: 0;
    visibility: hidden;
    transition: filter 0.2s ease-in-out, opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
}
.grid-checkbox {
    display: none;
    cursor: pointer;
}

.grid-checkbox:checked ~ .grid-overlay .icon:nth-child(1) { transition: opacity 0.4s 0.1s, transform 0.4s 0.1s, background-color 0.4s; }
.grid-checkbox:checked ~ .grid-overlay .icon:nth-child(2) { transition: opacity 0.4s 0.15s, transform 0.4s 0.15s, background-color 0.4s; }
.grid-checkbox:checked ~ .grid-overlay .icon:nth-child(3) { transition: opacity 0.4s 0.2s, transform 0.4s 0.2s, background-color 0.4s; }
.grid-checkbox:checked ~ .grid-overlay .icon:nth-child(4) { transition: opacity 0.4s 0.25s, transform 0.4s 0.25s, background-color 0.4s; }
.grid-checkbox:checked ~ .grid-overlay .icon:nth-child(5) { transition: opacity 0.4s 0s, transform 0.4s 0s, background-color 0.4s; } /* Croix */
.grid-checkbox:checked ~ .grid-overlay .icon:nth-child(6) { transition: opacity 0.4s 0.3s, transform 0.4s 0.3s, background-color 0.4s; }
.grid-checkbox:checked ~ .grid-overlay .icon:nth-child(7) { transition: opacity 0.4s 0.35s, transform 0.4s 0.35s, background-color 0.4s; }
.grid-checkbox:checked ~ .grid-overlay .icon:nth-child(8) { transition: opacity 0.4s 0.4s, transform 0.4s 0.4s, background-color 0.4s; }
.grid-checkbox:checked ~ .grid-overlay .icon:nth-child(9) { transition: opacity 0.4s 0.45s, transform 0.4s 0.45s, background-color 0.4s; }

.icon:hover {
    transition: all 0.2s 0s !important;
}

.icon.close-btn:hover {
    background-color: #ff1a1a !important;
    transform: translateY(0) rotate(90deg) !important;
    transition: transform 0.3s ease 0s;
}

.social-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2; 
}

.checkbox-icon:checked ~ .social-link {
    display: none;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-9e42cc7 */.soulign {
    width: 80px;
    height: 3px;
    background-color: #000;
    z-index: 2;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-1ec63bb */.soulign-hover {
    width: 80px;
    height: 3px;
    z-index: 1;
    background-color: #F54927;
    border-radius: 15px;
    filter: blur(2px);
    opacity: 0;
    transition: all 0.3s ease-in-out;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-acdcdcb */.text-html {
    transition: hover 0.5s ease-in-out;
}

.text-html:hover .soulign-hover {
    opacity: 1;
}/* End custom CSS */
/* Start custom CSS for progress, class: .elementor-element-4de0440 */.container-html .elementor-progress-bar {
  width: 0 !important;
  transition: width 0.4s ease-in-out;
}


.container-html:hover .elementor-progress-bar {
  width: 90% !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4cf803a */.container-html{
    transition: all 0.5s ease-in-out;
}

.container-html:hover {
    transform: scale(1.05);
    
}
.container-html:hover .soulign-hover {
    opacity: 1;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-68ec103 */.soulign {
    width: 80px;
    height: 3px;
    background-color: #000;
    z-index: 2;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-993a012 */.soulign-js {
    width: 80px;
    height: 3px;
    z-index: 1;
    background-color: #FFFF00;
    border-radius: 15px;
    filter: blur(2px);
    opacity: 0;
    transition: all 0.3s ease-in-out;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e547e87 */.text-html {
    transition: hover 0.5s ease-in-out;
}

.text-html:hover .soulign-hover {
    opacity: 1;
}/* End custom CSS */
/* Start custom CSS for progress, class: .elementor-element-9c9354a */.container-js .elementor-progress-bar {
  width: 0 !important;
  transition: width 0.4s ease-in-out;
}
.container-js:hover .elementor-progress-bar {
  width: 40% !important;        /* niveau JS */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-aac8868 */.container-js{
    transition: all 0.5s ease-in-out;
}

.container-js:hover {
    transform: scale(1.05);
    
}
.container-js:hover .soulign-js {
    opacity: 1;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d05d445 */.soulign {
    width: 80px;
    height: 3px;
    background-color: #000;
    z-index: 2;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-67de167 */.soulign-css {
    width: 80px;
    height: 3px;
    z-index: 1;
    background-color: #0277BD;
    border-radius: 15px;
    filter: blur(2px);
    opacity: 0;
    transition: all 0.3s ease-in-out;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ea60404 */.text-html {
    transition: hover 0.5s ease-in-out;
}

.text-html:hover .soulign-hover {
    opacity: 1;
}/* End custom CSS */
/* Start custom CSS for progress, class: .elementor-element-46efc16 */.container-css .elementor-progress-bar {
  width: 0 !important;
  transition: width 0.4s ease-in-out;
}
.container-css:hover .elementor-progress-bar {
  width: 90% !important;        /* niveau CSS */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-013fe65 */.container-css{
    transition: all 0.5s ease-in-out;
}

.container-css:hover {
    transform: scale(1.05);
    
}
.container-css:hover .soulign-css {
    opacity: 1;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-1b9b21f */.marquee {

  width: 80%;

  overflow: hidden; 

  white-space: nowrap;

  position: relative;

  background: #FFF9F2;

  padding: 20px 0;

}





.marquee::before, .marquee::after {

  content: "";

  position: absolute;

  top: 0;

  width: 100px;

  height: 100%;

  z-index: 2;

}

.marquee::before { left: 0;}

.marquee::after { right: 0;}



.marquee-content {

  display: flex;

  width: max-content;

  animation: scroll 20s linear infinite;

}



.icon-item {

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 0 40px; /* Espacement entre les icônes */

}



.icon-item svg {

  width: 40px;

  height: 40px;

  transition: transform 0.3s ease;

}



/* Pause l'animation au survol de la souris */

.marquee:hover .marquee-content {

  animation-play-state: paused;

}



/* L'animation qui crée la boucle */

@keyframes scroll {

  0% {

    transform: translateX(0);

  }

  100% {

    transform: translateX(-50%); /* On s'arrête à la moitié car la liste est doublée */

  }

}

@media screen and (max-width: 768px) {
  .marquee {
    opacity: 0;
  }
}/* End custom CSS */