* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
html, body {
 overflow-x: hidden;
}
body{
    font-family: Arial, Helvetica, sans-serif;
    margin:0;
  /*font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  padding:2rem;
  display:flex;
  justify-content:center;
  align-items:flex-start;*/
}


/* -------- NAVBAR -------- */
.navbar {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 3rem 5rem;
 max-width: 95%;
}
.navbar-logo {
 width: 5%;
 height: 5%;
}
.navbar-logo img {
 width: 120px;
 height: auto;
}
.menu-icon {
 display: none;
}
.menu-icon img {
 width: 24px;
 height: 24px;
 cursor: pointer;
}

.navbar-list{

    display: flex;
    align-items: center;
    gap: 3rem;
    list-style: none;

}

.navbar-list a{
    
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.3rem;
    text-decoration: none;
    color: #000;
    transition: background-color 0.3s ease;
}
.navbar-list a:hover{ 
    
    color: red;
}


.hero-section{

    display: flex;
    align-items: start;
    justify-content: center;
    gap: 5rem;
    padding-top: 5rem;
   
}
.hero-section-img {
 flex: 0 0 400px;
}
.hero-section-img img {
 width: 400px;
 height: 400px;
 border-radius: 50%;
 object-fit: cover;
}
.description {
 flex: 1;
 max-width: min(68ch, 600px);
 display: flex;
 flex-direction: column;
 gap: 1rem;
}
.description h1 {
 font-size: 4rem;
 font-weight: 700;
 margin-bottom: 20px;
}
.description p{
 
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    color: rgb(80,80,80);
    line-height: 1.6;
     margin-bottom: 5rem;
     width: 100%;
     
     
}
.list-contact {
 display: flex;
 align-items: center;
 gap: 3rem;
 list-style: none;
}
.list-contact a {
 font-size: 1.3rem;
 font-weight: 700;
 text-decoration: none;
 color: #000;
}
.btn {
 padding: 1rem 2.5rem;
 border-radius: 40px;
}
.cv-btn{

    padding:1rem 2.5rem ;
    border-radius: 40px;
    border: 2px solid #000;
    /*background-color: #007BFF;*/
}
.project-btn {
 background-color: #28A745;
}
.contact-btn {
 background-color: #FF6F00;
}

        /*Footer*/
.outline{
    display: flex;
    justify-content: center;
    margin-top: 5rem;
    padding-bottom: 1rem;
}
.line{
    width: 65%;
    border-bottom: 2px solid rgb(217,217,217);
}
.footer-contenair{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9rem;
   /* border-top: 1px solid #000;
    padding-top: 1rem;
   max-width: 1200px; 
    margin: 10rem auto 0 auto; */
}
.footer-contenair p{
    font-size: 1.2rem;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    padding-bottom: 1rem;
}
        /*Section main*/

.hero-section {

    display: flex;
    align-items: start;
    justify-content: center;
    gap: 5rem;
    padding-top: 5rem;
   
}

.hero-section-img {

    flex: 0 0 400px;
}

.hero-section-img img {

    width: 400px;
    height: 400px;
    border-radius: 50%;
    object-fit: cover;
}

.description {
    flex: 1;
    /* prend l'espace restant */
    max-width: min(68ch, 600px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.description h1 {

    font-family: Arial, Helvetica, sans-serif;
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.description p {

    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    color: rgb(80, 80, 80);
    line-height: 1.6;
    margin-bottom: 3rem;
    width: 100%;


}

.list-contact {

    display: flex;
    align-items: center;
    gap: 3rem;
    list-style: none;
}

.list-contact a {

    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    text-decoration: none;
    color: #000;
}

.btn {

    padding: 1rem 2.5rem;
    border-radius: 40px;
}

.cv-btn {

    padding: 1rem 2.5rem;
    border-radius: 40px;
    border: 2px solid #000;
    /*background-color: #007BFF;*/
}

.project-btn {

    background-color: #28A745;
}

.contact-btn {

    background-color: #FF6F00;
}

/*section-projects*/
.project-section {
    padding: 2rem 10%;
    /* réduit le padding vertical */
}



.hms,
.mobile-bank {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.hms-des h2 {
    font-size: 1.5rem;

}

.hms-des p,
.mobile-bank-des p {
    font-size: 1.2rem;
    padding: 2rem 0;
    color: rgb(64, 64, 64);
    line-height: 1.7;
    max-width: 600px;
    margin-bottom: 1rem;
    text-align: justify;
}

.project-section a {
    color: #000;
    transition: background-color 0.3s ease;
    text-decoration: none;
    text-decoration: none;
}

.project-section a:hover {
    color: red;
}

.hms-img,
.mobile-bank-img {
    display: flex;
    justify-content: flex-end;
    align-items: center;


}

.hms-img img,
.mobile-bank-img img {
    max-width: 80%;
    height: auto;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;

}

/*contact-section*/
.contact-section {
 display: flex;
 justify-content: center;
 align-items: flex-start;
 gap: 4rem;
 max-width: 1200px;
 margin: 0 auto;
 padding: 2rem 1rem;
 flex-wrap: wrap;
}
.contact-info {
 flex: 1 1 300px;
 max-width: 400px;
}
.contact-info h2 {
 font-size: 1.7rem;
 margin-bottom: 1.5rem;
}
.contact-info p {
 font-size: 1rem;
 line-height: 1.6;
 margin-bottom: 1rem;
}
.contact-info strong {
 font-size: 1.2rem;
 display: block;
 margin-top: 1rem;
}
.form-contact {
 flex: 1 1 400px;
 max-width: 600px;
 width: 100%;
 display: flex;
 flex-direction: column;
 gap: 1rem;
}
.name-label,
.message-title {
 display: flex;
 gap: 1rem;
 flex-wrap: wrap;
}
.firstname, .lastname,
.mail-label, .subject-label,
.mesaage-label {
 display: flex;
 flex-direction: column;
 flex: 1;
 gap: 0.5rem;
}
.name-label input,
.mail-label input,
.subject-label input,
.message-title input,
.mesaage-label textarea {
 width: 100%;
 padding: 0.6rem;
 border: 1px solid #ccc;
 border-radius: 4px;
 font-size: 1rem;
}
.mesaage-label textarea {
 min-height: 150px;
 resize: vertical;
}
.btn-envoyer {
 display: flex;
 justify-content: center;
}
.btn-envoyer button {
 font-weight: 700;
 padding: 1rem 2rem;
 border: none;
 background: #FF6F00;
 border-radius: 50px;
 cursor: pointer;
 transition: background-color 0.3s ease;
}
.btn-envoyer button:hover {
 background-color: #E65100;
}


/* -------- FOOTER -------- */
.outline {
 display: flex;
 justify-content: center;
 margin-top: 5rem;
 padding-bottom: 1rem;
}
.line {
 width: 90vw;
 border-bottom: 2px solid rgb(217, 217, 217);
}

.footer-contenair {
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    gap: 9rem;
  
   
}
.footer-contenair p {
 font-size: 1.2rem;
 font-weight: 700;
 padding-bottom: 1rem;
}

/*resume*/

.container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 2rem;
}


/* ====== Hero ====== */



.hero{
  display:flex;
  gap:var(--gap);
  align-items:center;
  margin-bottom:1rem;
}

.hero-info h1{
  margin:0;
  font-size:1.6rem;
  letter-spacing:0.2px;
}
.hero-info .subtitle{
  margin:6px 0 0;
  color:var(--muted);
  font-weight:600;
}
.hero-info .location{
  margin:8px 0 0;
  color:var(--muted);
  font-size:0.9rem;
}

.summary{
  margin:0 0 1rem 0;
}
.summary h2{
  font-size:1.05rem;
  margin:0 0 8px 0;
}

.grid{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:1rem;
  align-items:start;
}

.card{
  background:var(--card);
  border-radius:var(--radius);
  padding:1rem;
  box-shadow:0 6px 18px rgba(9,20,40,0.05);
}
.card h3{
  margin:0 0 .6rem 0;
  font-size:0.98rem;
  color:var(--text);
}

.skills{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.card ul{padding-left:1rem;margin:0}

.job{margin-bottom:.9rem}
.job h4{margin:0;font-size:0.98rem}
.job time{display:block;font-size:0.85rem;color:var(--muted);margin-bottom:.3rem}


.quick-contact ul{
    list-style: none;
  background:transparent;
  border:1px solid var(--accent);
  padding:8px 10px;
  border-radius:10px;
  text-decoration:none;
  color:var(--accent);
  font-weight:600;
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #fff;
}


.quick-contact a {
  text-decoration: none;
  display: inline-block;
  padding: 0.6rem 1rem;
  border-radius: 0.5rem;
  
  font-weight: 600;
}
.retour{
    background: #f3f4f6;
    color: #374151;
}
.retour:hover{
    background: #e5e7eb;
}
.download{
     background-color: #2563eb;
     color: #fff;
}
.download:hover {
  background: #1e40af;
}
/*responsive sur la page projects*/

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

    .navbar {
        padding: 1rem;
    }

    .navbar-logo img {
        width: 70px;
    }

    .navbar-list {
        display: none;
        position: absolute;
    }

    #menu:checked~.navbar-list {
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* centrer verticalement */
        align-items: center;
        /* centrer horizontalement */

        position: fixed;
        /* sortir du flux et recouvrir */
        top: 2;
        left: 0;
        width: 100vw;
        /* toute la largeur de l’écran */
        height: 100vh;
        /* toute la hauteur de l’écran */

        background-color: #fff;
        text-align: center;
        padding: 2rem;
        z-index: 999;
        /* pour passer au-dessus des autres éléments */
    }

    .menu-icon {
        display: block;
    }

    .project-section {
        padding: 2rem 5%;
    }

    .projet-titre {
        text-align: center;
        margin-bottom: 2rem;
    }

    .hms,
    .mobile-bank {
        grid-template-columns: 1fr;
    }

    .hms-img img,
    .mobile-bank-img img {
        max-width: 100%;
    }

    .hms-des h2,
    .mobile-bank-des h2 {
        font-size: 1.2rem;
    }

    .hms-des p,
    .mobile-bank-des p {
        font-size: 1rem;
        line-height: 1.5;
    }

    .hms-img,
    .mobile-bank-img {
        justify-content: center;
    }

    .hms-des h2,
    .mobile-bank-des h2 {
        order: 1;
    }

    .hms-img,
    .mobile-bank-img {
        order: 2;
    }

    .hms-des p,
    .mobile-bank-des p {
        order: 3;
    }

    /*rendre le container flex sur mobile pour que order fonctionne */

    .hms,
    .mobile-bank {
        display: flex;
        flex-direction: column;
    }

    .footer-contenair {
        flex-direction: column;
        gap: 2rem;
    }

    .footer-contenair p {
        text-align: center;
        font-size: 1rem;
    }
}

@media only screen and (min-width:768px) and (max-width:1023px) {
@media only screen and (min-width:768px) and (max-width:1023px) {
  .navbar{
    padding: 3rem 1rem;
    max-width: 100%;
  }

  .project-section {
    padding: 2rem 5%;
}

    .projet-titre {
        text-align: start;
        margin: 4rem 0;
    }

    .hms-des h2,
    .mobile-bank-des h2 {
        font-size: 1rem;
    }

    .hms-des p,
    .mobile-bank-des p {
        font-size: 1rem;
    }

    .hms-img img,
    .mobile-bank-img img {
        max-width: 100%;
    }

    .hms,
    .mobile-bank {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .footer-contenair span {
        font-size: 0.8rem;
}
.footer-contenair{
    flex-direction: row;
    gap: 2rem;
}
.footer-contenair p {
    text-align: start;
    font-size: 0.8rem;
    }
}
.copyright{
   margin-bottom: 2rem;
}
}

/*380px screen*/


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


 /* Section contact */
 .contact-section {
   gap: 1rem;
   align-items: center;
 }


 .form-contact {
   padding: 0.5rem;
   width: 100%;
 }


  .name-label {
   flex-direction: row;
   gap: 0.5rem;
   width: 100%;
 }
.message-title{
   flex-direction: row;
   gap: 0.5rem;
   width: 100%;
}
 .name-label input {
   width: 11rem;
 }


 /* Menu responsive */
 #menu:checked ~ .navbar-list {
   width: 100%;
 }


 /* Footer */
 .footer-contenair {
   gap: 1rem;
 }
 .footer-contenair p {
       font-size: 0.9rem;
   }
   .footer-contenair span{
  
   font-size: 0.8rem;


   }
   .copyright {
   font-size: 0.8rem;
}
}


/*400px screen*/

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

 /* Section contact */
 .contact-section {
   gap: 1rem;
   align-items: center;
 }


 .form-contact {
  
   padding: 0.5rem;


 }


 /* Inputs prénom + nom en colonne */
 .name-label {
   flex-direction: row;
   align-items: center;
   gap: 1rem;
   width: 100%;
 }




 /* Menu responsive */
 #menu:checked ~ .navbar-list {
   width: 100%; /* évite le scroll horizontal de 100vw */
 }


 /* Footer */
 .footer-contenair {
   gap: 1rem;
 }
}


/*430-768px screen*/


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




.contact-info{
   padding: 1rem;
}


.contact-info h2{
   font-size: 1.4rem;
}
.contact-info p {
 
   column-count: 0;
}
.contact-info strong {
   font-size: 1.2rem;
}
.contact-section {
   flex-direction: column;
   align-items: start;
   gap: 1rem;
}
.form-contact {
  
  
   margin:0 auto;
 }


.footer-contenair{
flex-direction: column;
 gap: 3rem;
}
.footer-contenair p{
   text-align: center;
   font-size: 1.2rem;
}
}


/*768px screen*/


@media only screen and (width:768px) {
 .contact-section {
   flex-direction: row;
   align-items: flex-start;
   gap: 2rem;
   margin-top: clamp(2rem, 6vw, 7rem);
   flex-wrap: nowrap;


   }
.contact-info {
       margin-bottom: 5rem;
      
   }
 .contact-info h2 {
     
       margin-bottom: 3rem;
   }
.contact-info p {
  
   column-count: 1;
   column-gap: 0rem;


 
}
.footer-contenair{
     
    display: flex;
       /* flex-direction: column; */
       justify-content: center;
       align-items: center;
       gap: 1rem;
   }
.footer-contenair p{
   text-align: start;
   font-size: 1rem;
}
.footer-contenair {
   flex-direction: row;
}
.footer-contenair span{
   font-size: 0.8rem;
}
.copyright{
   font-size: 0.8rem;
}
}


@media only screen and (width:1024px) {
    .navbar-logo img {
        width: 80px;
    }

    .projet-titre {
        padding-bottom: 3rem;
    }

    .hms-des p,
    .mobile-bank-des p {
        font-size: 1rem;
    }

    .hms-img img,
    .mobile-bank-img img {
        max-width: 90%;
    }

    .footer-contenair {
        gap: 2rem;
    }

    .footer-contenair p {
        font-size: 1rem;
    }
}


/*index style*/
/*800-990px screen*/

@media only screen and (min-width:769px) and (max-width:1023px) {
  .navbar{
    padding: 3rem 1rem;
  }
     .contact-section {
       flex-direction: row;
       align-items: flex-start;
       gap: 2rem;
       margin-top: clamp(2rem, 6vw, 7rem);
        margin: 0 auto;
        width: 764px;
        flex-direction: row;
        align-items: flex-start;
        gap: 2rem;
        margin-top: clamp(2rem, 6vw, 7rem);

   }
.contact-info {
       margin-bottom: 5rem;
      
   }
 .contact-info h2 {
     
       margin-bottom: 3rem;
   }
.contact-info p {
  
   column-count: 1;
   column-gap: 0rem;


 
}
.footer-contenair{
   gap: 1.7rem;
}
.footer-contenair p{
   text-align: start;
   font-size: 1rem;
}
.footer-contenair {
   flex-direction: row;
}
.footer-contenair span{
   font-size: 0.8rem;
}
.copyright{
   font-size: 0.8rem;
}


}


/*1024px screen*/


@media only screen and (min-width:1024px) and (max-width:1200px){
  .navbar{
    padding: 3rem 2rem;
    max-width: 100%;
  }
  .contact-section{
    width: 800px;
  }
   .contact-info p {
   column-count: 1;


}


.footer-contenair {


   gap: 3rem;
}
}


/*1440px screen*/


@media only screen and (width:1440px) {
    .contact-info p {
   column-count: 1;


}


.footer-contenair {


   gap: 3rem;
}
}



@media only screen and (width:1024px) {
.navbar-logo img{
    width: 80px;
}
.projet-titre{
    padding-bottom: 3rem;
}
.hms-des p, 
.mobile-bank-des p{
    font-size: 1rem;
} 
 .hms-img img,
  .mobile-bank-img img{
    max-width: 90%;
  }

 .footer-contenair{
    gap: 2rem;
 }

.footer-contenair p {
    font-size: 1rem;
}
}




/*index style*/
/*800-990px screen*/

@media only screen and (min-width:769px) and (max-width:1023px) {
  .navbar{
    padding: 3rem 1rem;
  }
     .contact-section {
       flex-direction: row;
       align-items: flex-start;
       gap: 2rem;
       margin-top: clamp(2rem, 6vw, 7rem);
        margin: 0 auto;
        width: 764px;
        flex-direction: row;
        align-items: flex-start;
        gap: 2rem;
        margin-top: clamp(2rem, 6vw, 7rem);

   }
.contact-info {
       margin-bottom: 5rem;
      
   }
 .contact-info h2 {
     
       margin-bottom: 3rem;
   }
.contact-info p {
  
   column-count: 1;
   column-gap: 0rem;


 
}
.footer-contenair{
   gap: 1.7rem;
}
.footer-contenair p{
   text-align: start;
   font-size: 1rem;
}
.footer-contenair {
   flex-direction: row;
}
.footer-contenair span{
   font-size: 0.8rem;
}
.copyright{
   font-size: 0.8rem;
}


}


/*1024px screen*/


@media only screen and (min-width:1024px) and (max-width:1200px){
  .navbar{
    padding: 3rem 2rem;
    max-width: 100%;
  }
  .contact-section{
    width: 800px;
  }
   .contact-info p {
   column-count: 1;


}


.footer-contenair {


   gap: 3rem;
}
}


/*1440px screen*/


@media only screen and (width:1440px) {
    .contact-info p {
   column-count: 1;


}


.footer-contenair {


   gap: 3rem;
}
}



@media only screen and (width:1024px) {
.navbar-logo img{
   width: 80px;
}
.projet-titre{
   padding-bottom: 3rem;
}
.hms-des p,
.mobile-bank-des p{
   font-size: 1rem;
}
.hms-img img,
 .mobile-bank-img img{
   max-width: 90%;
 }


.footer-contenair{
   gap: 2rem;
}


.footer-contenair p {
   font-size: 1rem;
}
}




/*index style*/
/*800-990px screen*/



/*responsive acceuil*/


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


.navbar-logo img{
   width: 60px;
}


/*ici je cache la liste*/


.navbar-list{
   display: none;
   position: absolute;
}

    .navbar-list {
        display: none;
        position: absolute;
    }

/*ici ces sont les propriete qui vont s'appliquer une fois clique sur le menu burge*/


#menu:checked ~.navbar-list{


    display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;    
   position: fixed;
   top: 1;
   left: 0;
   width: 100vw; 
   height: 100vh;
    background-color: #fff;
   text-align: center;
   padding: 2rem;
   z-index: 999;


}


/*affiche le menu burge*/


.menu-icon{
   display: block;
}
.hero-section{
    flex-direction: column;
    align-items: center;
}
.hero-section-img {
   flex: 0 0 300px;
}
.hero-section-img img{
   width: 300px;
   height: 300px;
}
.description{
   max-width: min(80ch, 710px);
}
.description h1{
   text-align: center;
   font-size: 3rem;
}
.description p{
    padding: 1rem;
    text-align: justify;
    font-size: 1rem;
    line-height: 1.5;
}
.list-contact{
   justify-content: center;
   gap: 2rem;
}
.list-contact a{
   font-size: 1rem;
}
.btn {
   padding: 1rem 1rem;
  
}
.outline {
   margin-top: 1rem;
}
.footer-contenair {
   display: flex;
 
   justify-content: center;
   align-items: center;
   gap: 1rem;
}
.footer-contenair p {
   font-size: 1rem;
   text-align: center;
}
}

@media only screen and (min-width: 900px) and (max-width:1022px){
    .hero-section-img {
    flex: 0 0 310px;
}
.hero-section-img img {
    width: 300px;
    height: 300px;
}
.hero-section {
   
    gap: 1rem;
   
}
.list-contact {

    gap: 1rem;
    
}
.list-contact a {
       font-size: 1.2rem;
}
 .btn {
        padding: 1rem 3rem;
    }
    .footer-contenair{
      gap: 2rem;
    }
    .copyright{
         margin-bottom: 2rem;
    }
}
@media only screen and (min-width:1000px) and (max-width:1023px){
    .hero-section-img {
    flex: 0 0 320px;
}
    .hero-section-img img {
        width: 300px;
        height: 300px;
    }
        .hero-section {
        flex-direction: row;
        gap: 1rem;
    }
        .outline {
        margin-top: 5rem;
    }
    .footer-contenair {
    gap: 3rem;
}
}
@media only screen and (min-width:1024px) and (max-width:1440px){

.navbar-logo img {
   width: 90px;
}
.hero-section{
   gap: 2rem;


}
.hero-section-img {
   flex: 0 0 300px;
}
.hero-section-img img{
    width: 300px;
   height: 300px;
}
.description{
   max-width: min(68ch, 550px);
}
.description h1 {
   font-size: 3rem;
}
.list-contact{
       gap: 3rem;
}
.footer-contenair{
   gap: 3rem;
}
.footer-contenair p {
   font-size: 1rem;
}
}

/*resume responsive*/

@media (max-width:880px){
  body{padding:1rem}
  .grid{grid-template-columns: 1fr; }
  .hero{align-items:flex-start}
  .avatar{width:80px;height:80px}
  .quick-contact{margin-left:auto}
  .container{padding: 0;}
}

@media print{
  body{background:white;color:black;padding:0}
  .quick-contact, .avatar {display:none}
  .container{max-width:100%;padding:0}
  .card{box-shadow:none;border:1px solid #ddd}
}