*
{
  margin:0 ;
  padding:0 ;
  box-sizing:border-box ;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif ;
}

body
{
  height:100vh ;
  background:var(--COLOR-BG);
  color:var(--COLOR-TEXT) ;
  display:flex ;
  flex-direction:column ;
  font-size:1.25rem ;
}

ccl-navbar
{
  box-shadow:2px 0 2px 2px var(--COLOR-PRIMARY) ;
}

ccl-navbar ccl-button
{
  position:relative ;
  overflow:hidden ;
}
ccl-navbar ccl-button::after
{
  content:'' ;
  background:var(--COLOR-PRIMARY) ;
  position:absolute ;
  bottom:0 ;
  left:0 ;
  width:70% ;
  height:2px ;
  transform:translateX(-100%) ;
  transition:all .5s ;
}
ccl-navbar ccl-button:hover::after,
ccl-navbar ccl-button.active::after
{
  transform:translateX(0) ;
}
ccl-navbar ccl-button.active
{
  color:var(--COLOR-PRIMARY) ;
}

main
{
  flex-grow:1 ;
}
ccl-slideshow
{
  height: 100%;
}
ccl-slide
{
  overflow:hidden ;
}
ccl-slide h1
{
  font-size:2.5rem ;
  width:fit-content ;
}
ccl-slide .wrapper
{
    padding:12px ;
    padding-bottom:0 ;
    width:100% ;
    height:100% ;
    display:flex ;
    flex-direction:column ;
    justify-content:space-between ;
    align-items:center ;
}

.slideButtons
{
  bottom:5px ;
  display:flex ;
  justify-content:space-between ;
  width:fit-content ;
  position:sticky ;
  background-color:var(--COLOR-BG) ;
  border-radius:8px ;
  padding:4px ;
  z-index:9;
}
.slideButtons img
{
  position:absolute ;
  height:80px ;
  transform:rotateZ(136deg) ;
  top:-120px ;
  left:-40px ;
}

.background-icons 
{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events:none ;
  filter:brightness(.7) ; 
  z-index: -1;
}

ccl-slide.active .floating-icon
{
  animation:fall-in var(--DUREE-FALL-IN) ease-out forwards, float 16s ease-in-out infinite ;
  animation-delay: 0s, var(--DUREE-FALL-IN) ;
}
.floating-icon 
{
  position: absolute;
  width:clamp(120px, 10vw, 360px) ;
}

@keyframes fall-in {
  0% {
    transform: translateY(var(--DISTANCE-FALL-IN)) scale(0.7);
    opacity:0;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity:0.7;
  }
}

@keyframes float {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(var(--TRANSLATE-X, 10px), var(--TRANSLATE-Y)) rotate(var(--ROTATE));
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}
.blur {
  filter: blur(15px);
  opacity: 0.5;
}

ccl-slide .wrapper
{
  overflow:hidden auto ;
  scrollbar-width:auto ;
  scrollbar-color:var(--COLOR-BG-LIGHT) var(--COLOR-BG) ;
}
#accueil .mainContent,
#aPropos .mainContent,
#contact .mainContent
{
  display:flex ; 
  width:80% ;
  flex-wrap:wrap ;
  gap:24px ;
  justify-content:center ;
}

#accueil .mainContent .sectionLeft,
#aPropos .mainContent .sectionLeft,
#contact .mainContent .sectionLeft
{
  width:450px ;
  display:flex ;
  flex-direction:column ;
  justify-content:center ;
  gap:24px ;
}

#aPropos .mainContent
{
  align-items:flex-start ;
}
#aPropos .mainContent .sectionRight h1
{
  margin-bottom:8px ;
}
#aPropos .aProposButtons
{
  display:flex ;
  gap:12px ;
}
#accueil .mainContent .sectionLeft b
{
  padding:2px 4px;
  border-radius:4px 0 0 4px ;
  background:linear-gradient(to right, var(--COLOR-PRIMARY), rgba(0, 0, 0, 0)) ;
}

#aPropos .mainContent .sectionRight .competences h2
{
  font-size:1.5rem ;
  width:100% ;
  margin-top:8px ;
}
#accueil .mainContent .sectionRight
{
  --TAILLE-IMAGE-PROFIL:350px ;
  flex-shrink:0 ;
  position:relative ;
  display:flex ;
  gap:25px ;
  margin-bottom:25px ;
}

#accueil .mainContent .sectionRight img.profil
{
  width:var(--TAILLE-IMAGE-PROFIL) ;
  border-radius:18px ;
  position:relative ;
  z-index:2 ;
  transition:all .4s ;
}
#accueil .mainContent .sectionRight .imgBorder
{
  background:var(--COLOR-BG) ;
  border:4px solid var(--COLOR-PRIMARY) ;
  z-index:1 ;
  height:100% ;
  width:var(--TAILLE-IMAGE-PROFIL) ;
  position:absolute ;
  top:15px ;
  left:15px ;
  border-radius:18px ;
  transition:all .4s ;
}

#accueil .mainContent .sectionRight .links
{
  height:100% ;
  display:flex ;
  flex-direction:column ;
  justify-content:center ;
  gap:8px ; 
}

#aPropos .competences
{
  display:flex ;
  flex-wrap:wrap ;
  gap:18px ;
}

#aPropos .competence
{
  width:fit-content ;
  text-align:center ;
  position:relative ;
}
#aPropos .competence img
{
  width:40px ;
  height:40px ;
  transform:scale(1.17) ;
  transition:transform .4s ;
}
#aPropos .competence .label
{
  font-size:.9rem ;
  position:absolute ;
  left:50% ;
  bottom:-15px ;
  opacity:0 ;
  transition:all .4s ;
  transform:translateX(-50%) ;
  overflow:hidden ;
}
#aPropos .competence .label:after
{
  content:'' ;
  transform:translateX(-100%) ;
  background:var(--COLOR-PRIMARY) ;
  width:70% ;
  height:3px ;
  display:block ;
  transition:all .4s ;
}

ccl-slide h1:after
{
  content:'' ;
  background:linear-gradient(to right, var(--COLOR-PRIMARY), rgba(0, 0, 0, 0)) ;
  width:70% ;
  height:3px ;
  display:block ;
}

#aPropos .competence:hover img
{
  transform:translateY(-0.5rem) ;
}
#aPropos .competence:hover .label
{
  opacity:1 ;
  transform:translateX(-50%) translateY(-0.7rem) ;
}
#aPropos .competence:hover .label:after
{
  transform:translateX(0) ;
}

#projets .mainContent
{
  --TAILLE-CARTE-PROJET:330px ;
  width:100% ;
  display:grid ;
  justify-items:center ;
  gap:40px 15px ;
  margin-top:35px ;
  margin-bottom:15px ;
  grid-template-columns: repeat(auto-fit, minmax(var(--TAILLE-CARTE-PROJET), 1fr));
}
#projets .mainContent .carteProjet
{
  background:var(--COLOR-BG-DARK) ;
  width:var(--TAILLE-CARTE-PROJET) ;
  border-radius:8px ;
  position:relative ;
  display:flex ;
  flex-direction:column ;
  transition:all .3s ;
  box-shadow:4px 4px 0 0 var(--COLOR-PRIMARY) ;
}
#projets .mainContent .carteProjet:hover
{
  box-shadow:4px 4px 0 0 var(--COLOR-PRIMARY) ;
}
#projets .mainContent .carteProjet.enCours:after
{
  content:'Projet en cours...' ;
  font-size:.9rem ;
  position:absolute ;
  top:0 ;
  left:50% ;
  transform:translate(-50%, -100%) ;
  background:var(--COLOR-BG-DARK) ;
  padding:4px 8px ;
  border-radius:8px 8px 0 0 ;
}

#projets .mainContent .carteProjet .carteHeader img.capture
{
  width:calc(100% - 8px) ;
  border-radius:4px ;
  margin:4px ;
}
#projets .mainContent .carteProjet .carteHeader .title
{
  display:flex ;
  justify-content:space-between ;
  align-items:center ;
  margin:8px 15px ;
}
#projets .mainContent .carteProjet .carteHeader img.logo
{
  max-height:50px ;
  border-radius:8px ;
}
#projets .mainContent .carteProjet .carteHeader .listeTechnos
{
  display:flex ;
  flex-wrap:wrap ;
  margin:8px 15px ;
  gap:5px ;
}
#projets .mainContent .carteProjet .carteHeader .listeTechnos .techno
{
    height:20px ;
    flex-shrink:0 ;
    font-weight:700 ;
    padding:2px 6px ;
    border-radius:10px ;
    color:black ;
    font-size:.9rem ;
    line-height:.9rem ;
}
#projets .mainContent .carteProjet .carteBody
{
  flex-grow:1 ;
  display:flex ;
  flex-direction:column ;
  justify-content:space-between ;
}
#projets .mainContent .carteProjet .carteBody .description
{
  margin:8px 15px ;
  font-size:.9rem ;
}

#projets .mainContent .carteProjet .carteBody .links
{
  display:flex ;
  flex-direction:row-reverse ;
  justify-content:space-between ;
  padding:10px 15px ;
}

.react
{
  background:rgb(170, 233, 234) ;
}
.typescript
{
  background:rgb(170, 189, 234) ;
}
.mongodb
{
  background:rgb(191, 170, 234) ;
}
.fullstack
{
  background:rgb(227, 170, 234) ;
}
.figma
{
  background:rgb(234, 170, 196) ;
}
.designsystem
{
  background:rgb(234, 170, 170) ;
}
.js
{
  background:rgb(234, 225, 170) ;
}
.css
{
  background:rgb(207, 234, 170) ;
}
.html
{
  background:rgb(170, 234, 170) ;
}
.php
{
  background:rgb(170, 233, 234) ;
}
.sql
{
  background:rgb(170, 189, 234) ;
}
.api
{
  background:rgb(170, 189, 234) ;
}
.threejs
{
  background:rgb(170, 189, 234) ;
}

#contact .carteContact
{
  display:flex ;
  align-items:center ;
  gap:8px ;
}
#contact ccl-input
{
  font-size:1rem ;
}
#contact .carteContact i
{
  display:flex ;
  align-items:center ;
  justify-content:center ;
  background:var(--COLOR-PRIMARY) ;
  height:40px ;
  aspect-ratio:1 ;
  border-radius:8px ;
  transition:all .3s ;
}
#contact form
{
  margin-top:24px ;
  display:flex ;
  flex-direction:column ;
  align-items:end ;
  gap:12px ;
}
#contact form > ccl-input,
#contact form div.infoContact
{
  width:100% ;
}
#contact .infoContact
{
  display:flex ;
  gap:12px ;

}
#contact .links
{
  display:flex ;
  gap:8px ; 
}
#contact .infoContact ccl-input
{
  flex-grow:1 ;
}
#contact .carteContact .content
{
  font-size:.9rem ;
  color:var(--COLOR-TEXT-LIGHT) ;
}

#formation .carteFormation
{
  background:var(--COLOR-BG-DARK) ;
  padding:12px ;
  border-radius:8px ;
  max-width:700px ;
  font-size:.9rem ; 
  box-shadow:0 0 0 0 var(--COLOR-PRIMARY) ;
  transition:all .3s ;
}

#formation .carteFormation:hover
{
  box-shadow:4px 4px 0 0 var(--COLOR-PRIMARY) ;
}
#formation .carteFormation .header
{
  display:flex ;
  justify-content:space-between ;
  flex-wrap:wrap ;
  gap:12px ;
}
#formation h1
{
  margin-top:36px ; 
}

#formation .experienceContent, 
#formation .formationContent
{
  display:flex ;
  flex-direction:column ;
  gap:24px ;
}
#formation .carteFormation .ecole
{
  color:var(--COLOR-PRIMARY) ;
  font-weight:bold ;
}

#formation .carteFormation .duree
{
  background:var(--COLOR-PRIMARY) ;
  font-weight:bold ;
  height:fit-content ;
  width:fit-content ;
  padding:6px 10px ;
  border-radius:18px ;
}
#formation .carteFormation .description
{
  margin:20px 0 ;
  color:var(--COLOR-TEXT-LIGHT) ;
}

#formation .carteFormation .listeTechnoFormation
{
  height:fit-content ;
  margin:15px 0 5px 0;
  display:flex ;
  gap:5px ;
  flex-wrap:wrap ;
}
#formation .carteFormation .listeTechnoFormation .techno
{
  border:2px solid var(--COLOR-BORDER) ;
  color:var(--COLOR-TEXT-LIGHT) ;
  background:transparent ;
  padding:4px 12px ;
  border-radius:15px ;
}

@media (max-width: 600px) {
  body {
    font-size:.9rem ;
  }
  ccl-slide h1
  {
    font-size:2rem ;
  }
  #accueil .mainContent .sectionRight
  {
    --TAILLE-IMAGE-PROFIL:250px ;
  }
  #contact .carteContact:first-child i
  {
    border-radius:8px 8px 0 0 ;
  }
  #contact .carteContact i
  {
    border-radius:0 ;
  }
  #contact .carteContact:last-child i
  {
    border-radius:0 0 8px 8px ;
  }
}