:root {
  --light-blue-color: #9cdcfe;
  --blue-color: #569cd6;
  --orange-color: #ce9178;
  --green-color: #4ec9b0;
  --comment-green-color: #6a9955;
  --light-green-color: #b5cea8;
  --purple-color: #c586c0;
  --yellow-color: #dcdcaa;
}
.c-lb{
  color: var(--light-blue-color);
}
.c-b{
  color: var(--blue-color);
}
.c-o{
  color: var(--orange-color);
}
.c-g{
  color: var(--green-color);
}
.c-lg{
  color: var(--light-green-color);
}
.c-p{
  color: var(--purple-color);
}
.c-y{
  color: var(--yellow-color);
}
.c-cg{
  color: var(--comment-green-color);
}

@font-face{
  font-family: "roboto";
  src: url('../fonts/roboto-regular.ttf') format('truetype');
}

@font-face{
  font-family: "georgia";
  src: url('../fonts/georgia.ttf') format('truetype');
}

@font-face{
  font-family: "codesource";
  src: url('../fonts/Sourcecodepro-regular.ttf') format('truetype');
}
@keyframes border{
0% {
  border-radius: 66% 34% 36% 64% / 30% 28% 72% 70%;
}
33% {
  border-radius: 30% 70% 53% 47% / 30% 28% 72% 70%;
}
66% {
  border-radius: 36% 64% 59% 41% / 76% 49% 51% 24%;
}
100% {
  border-radius: 66% 34% 36% 64% / 30% 28% 72% 70%;
}
}

@keyframes rotate{
  0% {
    border-radius: 66% 34% 36% 64% / 30% 28% 72% 70%;
  }
  33% {
    border-radius: 30% 70% 53% 47% / 30% 28% 72% 70%;
  }
  66% {
    border-radius: 36% 64% 59% 41% / 76% 49% 51% 24%;
  }
  100% {
    border-radius: 66% 34% 36% 64% / 30% 28% 72% 70%;
  } 
}

@keyframes zoomIn{
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0%);
  }
  }

.zoomin{
  animation: zoomIn 1s forwards;
}

@keyframes zoomOut{
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(100%);
  }
  }

.zoomout{
  animation: zoomOut 1s forwards;
}


.georgia{
  font-family: "georgia";
}

.texte-standard, li{
font-size: 16px;
line-height: 1.9;
font-weight: 400;
list-style-type:none;
}

h1{
  line-height: 1.9;
}

h2{
  text-transform: uppercase;
  margin-top: 0px;
  margin-bottom: 80px;
  padding-bottom: 0;
  text-align: center;
}

h3{
  text-transform: uppercase;
  margin-top: 0px;
  margin-bottom: 50px;
  padding-bottom: 0;
}

h5{
  font-size: 1rem;
}

html{
  box-sizing: border-box;
}

body{
  font-family: "roboto", "georgia";
  margin: 0;
}

main{
  color: #0f1821;
}


.navbar-nav{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 3rem;
}

.nav-link{
  font-size: 16px;
  margin: 1rem 1rem 2rem 2rem;
}

section > * {
  max-width: 1140px;
  margin: auto;
}

.projets, .presentation, .competences, .langages, .contact {
  padding-top: 62px;
  padding-bottom: 180px;
}
.presentation{
  padding-top: 260px;
}

.relative{
  position: relative;
}

.nav{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #002fa7;
  height: 100px;
}

.logo_antoine{
  width: 80px;
  height: 80px;
padding-left: 2rem;
}

.logo_404{
  display: flex;
  justify-content: center;
  width: 250px;
  margin: auto;
}
  
.navbar-nav{
  display: flex;
  gap: 1rem;
}

.nav-item {
  list-style-type: none;
}

.nav-item a{
  text-decoration: none;
  color: white;
}


.img-antoinaute, .img-photo-antoine{
  width: auto;
  height: 600px;
  margin: auto;
  background-color: #9cbbf9;
  animation: border 15s linear infinite;
}

.img-antoinaute{
  margin-right: 2rem;
}

#header{
 position: fixed;
  top: 0;
  z-index: 3;
  width: 100%;
  transition: transform 0.3s ease;
  transform: translateY(0);
}

#header.hidden-header{
  transform: translateY(-150%);
}



.header-main{
  position: relative;
  width: 100%;
}

.footer-main{
  background-color: #002FA7;
  display: flex;
  justify-content: space-between;
  align-items: center;
}




.footer-main div{
  margin: 0;
  padding: 1rem 2rem 1rem 2rem;
}

.footer-main div a{
 color: #ebf0ff;
}

.logo-footer a img{
  width: 80px;
  height: 80px;
}

.logo-lkdn a img{
  width: 30px;
  height: 30px;
}



.contact{
  background-color: #ebf0ff;
}

.div-presentation {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
}

.presentation{
  background-color: #ebf0ff;
}

.langages {
  display: flex;
  flex-direction: column;
  margin: auto;
  background-color: #ebf0ff;
}

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

.presentation-img, .presentation-text {
  padding: 0rem 1rem;
}

.competences_content{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
}

.competences_content p{
padding: 0rem 2rem;
margin: 0;
}

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

.blocs_liste{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
}
.blocs_liste :nth-child(1){
 justify-content: center;
 flex-grow: 1;
}
.blocs_liste :nth-child(2){
 flex-grow: 1;
}
.blocs_liste :nth-child(3){
flex-grow: 1;
justify-content: center;
}

.bloc_liste{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  margin: 1rem;
  background-color: #ebf0ff;
  border-radius: 8px;
}

.bloc_liste ul{
  padding: 0;
  margin: 0;
 }

.bloc_liste ul li{
 padding: .5rem 0rem;
}

.halfbloc{
display: flex;
flex-direction: column;
align-items: center;
min-width: 120px;
}





.logos_langages{
display: flex;
}

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

.logo_titre_langages img{
width: 50px;
height: 50px;
display: block;
margin: auto;

}



.competences{
  background-color: #9cbbf9;
}

.projets_layout{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.projets{
background-color: #9cbbf9;
}

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

.svg-header{
    position: absolute;
    top: 94px;
    width: 100%;
}

.svg-footer{
  position: absolute;
  top: 6px;
  width: 100%;
  transform: translateY(-100%);
}

.cls-header {
  fill: #002fa7;
  stroke-width: 0px;
}

.svg {
  position: absolute;
  bottom: -6px;
  width: 100%;
}

.cls-1 {
  fill: #9cbbf9;
  stroke-width: 0px;

}

.cls-2 {
  fill: #ebf0ff;
  stroke-width: 0px;
}

.cards{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 1rem;
}

.card{
  position: relative;
  z-index: 1;
  width: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

.card-content{
  display: flex;
 flex-direction: column;
  align-items: center;
  padding-top: 315px;
  position: absolute;
  top: 0px;
  left: 50%;
  /* transform: translateY(-50%); */
  transform: translateX(-50%);
  background: #fcfdff;
  width: 230px;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 7px 10px 6px -8px #0f182190;
}

.card a img{
  width: 100%;
  position: relative;
  z-index: 2;
  margin-bottom: 110px;
}

.card-wave{
  position: absolute;
  top: -70px;
  left: -100px;
  width: 400px;
  height: 400px;
  background: #002fa7;
  z-index: 1;
  animation: rotate 15s linear infinite;
}


.card-title{
  margin: 1rem 0 1rem 0;
  height: 32px;
  position: relative;
  z-index: 2;
  color:#fcfdff;
  background: #002fa7;
  text-align: center;
  max-width: 230px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-desc{
  display: flex;
  align-items: center;
  margin: 0;
  height: 100px;
  padding: 0rem 1rem;
  position: relative;
  z-index: 2;
  color:#0f1821;
}


.form{
  display: flex;
  flex-direction: column;
  width: 500px;
}

.form-button button{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 40px;
  background-color: #002FA7;
  color:#ebf0ff;
  font-size: 16px;
  border: solid 2px #002fa7;
  border-radius: 8px;
}

.form-button button:hover{
  background-color: #ebf0ff;
  color: #002FA7;
  cursor: pointer;
}

.form-button{
  display: flex;
  justify-content: center;
  padding-top: 1rem;
}

.form-group{
  display: flex;
  flex-direction: column;
  padding-bottom: 1rem;
}

.form-group input{
  display: flex;
  flex-grow: 1;
  height: 30px;
  border: solid 2px #002fa7;
  border-radius: 8px;
  background-color: #fcfdff;
}

.form-group textarea{
  display: flex;
  flex-grow: 1;
  height: 120px;
  border: solid 2px #002fa7;
  border-radius: 8px;
  background-color: #fcfdff;
}

.message-erreur{
  display: flex;
  background-color: #b61616;
  color: #ebf0ff;
}

.lien-mentions-legales{
cursor: pointer;
}

.bg-mentions-legales{
  position: fixed;
  inset: 0;
  background: #002fa790;
  z-index: 5;
  overflow: hidden; /* Empêcher le scroll */
  max-width: none;
  transform: translateY(100%);
}

.croix-mentions-legales {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 6;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.croix-mentions-legales svg{
  fill: #fcfdff;
  width: 16px;
  height: 16px;
}

.content-mentions-legales {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fcfdff;
  padding: 20px;
  border-radius: 8px;
  z-index: 6; /* Plus élevé que le fond */
  width:70%;
  height: 80%;
  max-width: 90%;
  max-height: 90%;
  overflow-y: auto;
}

.background-section-ged a {
  text-decoration: none;
}

.link-6xpos {
  color: #cb214a;
  font-weight: 600;
  cursor: pointer;
}

.logos-ged, .image-ged{
  width: 90%;
  max-width: 600px;
  margin-bottom: 50px;
}

.hero-slider {
  height: 400px; /* Hauteur plein écran comme sur le site de référence */
  max-width: 1140px;
  margin-bottom: 70px;
}

.splide__slide {
  margin: 0;
  padding: 2px;
  background-color: #cb214a;
}

.splide__slide img {
  width: 100%;
  height: 100%;
}


/*
===================================================================================================================
Responsive
===================================================================================================================
*/

@media screen and (max-width: 1340px) {
  .projets, .presentation, .competences, .langages, .contact {
    padding-top: 62px;
    padding-bottom: 142px;
  }
  .presentation{
    padding-top: 242px;
  }
}

@media screen and (max-width: 1240px) {
  .projets, .presentation, .competences, .langages, .contact {
    padding-top: 62px;
    padding-bottom: 137px;
  }
  .presentation{
    padding-top: 237px;
  }
}

@media screen and (max-width: 1140px) {
.projets, .presentation, .competences, .langages, .contact {
  padding-top: 62px;
  padding-bottom: 133px;
}
.presentation{
  padding-top: 233px;
}
.img-antoinaute, .img-photo-antoine{
  height: 500px;
}

.svg-header{
  top: 100px;
}


}

@media screen and (max-width: 1040px) {
  .projets, .presentation, .competences, .langages, .contact {
    padding-top: 62px;
    padding-bottom: 128px;
  }
  .presentation{
    padding-top: 228px;
  }
}


@media screen and (max-width: 940px) {
  .projets, .presentation, .competences, .langages, .contact {
    padding-top: 62px;
    padding-bottom: 124px;
  }
  .presentation{
    padding-top: 224px;
  }

  .img-antoinaute, .img-photo-antoine{
    height: 400px;
  }

  .texte-standard, li{
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
    list-style-type:none;
    }

    .nav-link{
      font-size: 16px;
      margin: 1rem .5rem 2rem 1rem;
    }
}

@media screen and (max-width: 840px) {
  .projets, .presentation, .competences, .langages, .contact {
    padding-top: 62px;
    padding-bottom: 119px;
  }
  .presentation{
    padding-top: 219px;
  }

  .texte-standard, li{
    font-size: 14px;
    }

  h1, h2{
  font-size: 18px;
  }

  
  .img-antoinaute{
    height: 300px;
  }

  .content-mentions-legales{
    font-size: 14px;
  }
}

@media screen and (max-width: 750px) {
  .projets, .presentation, .competences, .langages, .contact {
    padding-top: 62px;
    padding-bottom: 115px;
  }
  .presentation{
    padding-top: 215px;
  }

  .nav-link{
    font-size: 16px;
    margin: 1rem .25rem 2rem .25rem;
  }
  

  .navbar-nav{
    display: flex;
    gap: .5rem;
  }

  .presentation {
    flex-direction: column;
  }

  .presentation-text{
    width: 80%;
  }

  .blocs_liste{
    flex-direction: column;
  }

  .logos_langages{
    flex-direction: column;
    padding: 1rem 0 2rem 0;
  }

  .halfbloc{
    flex-direction: row;
  }

  .logo_titre_langages{
    padding: .5rem;
  }

  .div-presentation{
    flex-direction: column;
  }

  .competences_content{
    flex-direction: column;
  }

  .competences_content p{
    padding: 1rem;
  }

  .img-antoinaute{
    margin: 0;
  }
}

@media screen and (max-width: 640px) {
  .projets, .presentation, .competences, .langages, .contact {
    padding-top: 62px;
    padding-bottom: 110px;
  }
  .presentation{
    padding-top: 306px;
  }

  .nav{
    height: auto;
    justify-content: center;
  }

  .navbar-nav{
    flex-direction: column;
  }

  .logo_antoine{
    display: none;
  }

  .svg-header{
    top: 190px;
}

  h2{
    display: flex;
    flex-direction: column;
  }

  .form{
    width: 400px;
  }

  .logo-footer a img{
    width: 50px;
    height: 50px;
  }



}

@media screen and (max-width: 540px) {
  .projets, .presentation, .competences, .langages, .contact {
    padding-top: 62px;
    padding-bottom: 105px;
  }
  .presentation{
    padding-top: 301px;
  }

  .form{
    width: 300px;
  }
}

@media screen and (max-width: 440px) {
  .projets, .presentation, .competences, .langages, .contact {
    padding-top: 62px;
    padding-bottom: 100px;
  }
  .presentation{
    padding-top: 296px;
  }

  .img-antoinaute, .img-photo-antoine{
    height: 280px;
  }

  .halfbloc{
    flex-direction: column;
  }

  .logos_langages{
    flex-direction: row;
  }

  .footer-main div{
    padding: 1rem;
  }

  .logo-footer a img{
    width: 40px;
    height: 40px;
  }

  .croix-mentions-legales {
    top: 8px;
    right: 8px;
  }
}

@media screen and (max-width: 340px) {
  .projets, .presentation, .competences, .langages, .contact {
    padding-top: 62px;
    padding-bottom: 96px;
  }
  .presentation{
    padding-top: 292px;
  }
}





/* ================= METEO =============== */



.background-section {
  padding-top: 250px;
  background: #9cbbf9;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto;
  font-family: 'roboto', sans-serif;
  color: #0f1821;
  min-height: calc(100vh - 116px - 250px);
}

.background-section-ged {
  padding-top: 250px;
  background: #ebf0ff;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto;
  font-family: 'roboto', sans-serif;
  color: #0f1821;
  min-height: calc(100vh - 116px - 250px);
}

.background-section div {
  width: auto;
}

.div_jour h2{
  display: flex;
  justify-content: center;
  margin: 2rem;
}

.div_jour{
  margin-bottom: 120px;
}
.meteo-buttons{
  display: flex;
}

.meteo-button {
  display: inline-block;
  line-height: 38px;
  text-align: center;
  margin: .5rem;
  padding: 0;
  background-color: #002fa7;
  color: #ebf0ff;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  min-width: 150px;
  transition: background-color 0.3s ease;
}

.meteo-buttons-group1 .meteo-buttons-group2{
  display: flex;
}

.meteo-button:hover {
  background-color: #ebf0ff;
  color: #002fa7;
  border-radius: 8px;
  cursor: pointer;
}

.meteo-hidden {
  display: none;
}

.titres-colonnes{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 38px;
  background-color: #ebf0ff;
  border: solid 3px #9cbbf9;
  padding: 0px 50px 0px 50px;
  font-weight: 700;
}

.div-heures{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 38px;
  background-color: #ebf0ff;
  border: solid 3px #9cbbf9;
  padding: 0px 50px 0px 50px;
}

.div-heures :nth-child(1), .titres-colonnes :nth-child(1){
  min-width: 80px;
  flex-shrink: 1;
  margin: 0;
  padding: 0;
}

.div-heures :nth-child(2), .titres-colonnes :nth-child(2){
  min-width: 70px;
  flex-shrink: 1;
  margin: 0;
  padding: 0;
}

.div-heures :nth-child(4), .titres-colonnes :nth-child(4){
  flex-shrink: 1;
  min-width: 180px;
  margin: 0;
  padding: 0;
}

.titres-colonnes :nth-child(3){
  margin: 0px 30px 0px 20px;
  padding: 0;
}

.div-heures img{
  height: 28px;
  width: auto;
  margin: 0px 30px 0px 20px;
  padding: 0;
}

.element-formulaire label, .element-formulaire-commune label {
  display: flex;
  justify-content: center;
}

.element-formulaire select, .element-formulaire-commune select {
  display: flex;
  margin: auto;
  padding: .5rem 1rem;
  margin-bottom: 1rem;
  justify-content: center;
  background: #fcfdff;
  border: solid 2px #002fa7;
  border-radius: 8px;
}

.geolocalisation-btn {
  background-color: #002fa7;
  color:#fcfdff;
  margin: 1rem 1rem 120px 1rem;
  padding: .5rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: background-color 0.3s ease;
}

.geolocalisation-btn:hover {
  background-color: #fcfdff;
  color:#002fa7;
  margin-top: 1rem;
  padding: .5rem 1rem;
  border-radius: 8px;
  cursor: pointer;
}



@media (max-width: 860px) {
  .meteo-buttons{
      display: flex;
      flex-direction: column;
      align-items: center;
  }
  .meteo-hidden {
    display: none;
  }
}

@media (max-width: 640px) {
.background-section {
  min-height: calc(100vh - 86px - 250px);
}
}

@media (max-width: 540px) {
  .meteo-buttons-group1, .meteo-buttons-group2{
      display: flex;
      flex-direction: column;
      align-items: center;
  }

  .div-heures :nth-child(4), .titres-colonnes :nth-child(4){
     display: none;
  }

.titres-colonnes :nth-child(3){
  margin: 0px 0px 0px 0px;
  padding: 0;
}

.div-heures img{
  height: 28px;
  width: auto;
  margin: 0px 0px 0px 0px;
  padding: 0;
}
}

@media (max-width: 440px) {
  .background-section {
    min-height: calc(100vh - 76px - 250px);
  }
  }



  /* ============================ CITATIONS ======================== */

  .description-projet{
    max-width: 900px;
    width: 70%;
  }

  .description-meteo, .description-ged{
    max-width: 900px;
    width: 70%;
    margin-top: 0px;
    margin-bottom: 70px;
  }

  .images-projet{
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 900px;
    width: 70%;
    margin-bottom: 120px;
    margin-top: 2rem;
  }

  .images-projet img{
    margin: .5rem;
    max-width: 80%;
    width: auto;
    height: auto;
    
  }


  .code-container{
    background-color: #1f1f1f;
    margin-bottom: 70px;
  }

  .code-content{
    color:#d4d4d4;
    padding: 1rem;
    max-width: 100%;
    font-size: 0.8rem;
    max-width: 900px;
    font-family: "codesource", sans-serif;
  }

  @media (max-width: 860px) {
    .code-content {
      font-size: 0.6rem;
      padding: .5rem;
    }
  }
  @media (max-width: 374px) {
    .code-content {
      font-size: 0.5rem;
      padding: .5rem;
    }
  }