@font-face {
    font-family: josephine_bold;
    src: url(JosefinSans-Bold.ttf);
    font-display: swap;
}

@font-face {
    font-family: josephine;
    src: url(JosefinSans-Regular.ttf);
    font-display: swap;
}
*,
*::before,
*::after {box-sizing: border-box;}
html{background-color: #0D0D0D;color:#f0f8ff;font-family: josephine; overflow-x: hidden;scroll-behavior: smooth;}
html{width: auto;height: 100%;}
h1, h2, h3{font-family: josephine_bold;}
h2{text-transform: uppercase;font-size: 2rem;}

/* NAVIGATION BURGER___________ */
header {position: fixed;top: 0;width: 100%;backdrop-filter: blur(5px);color: #f0f8ff;padding: 1rem;display: flex;justify-content: space-between;align-items: center;z-index: 1000;}
/*burger */
.burger {cursor: pointer;width: 40px;height: 30px;display: flex;flex-direction: column;justify-content: space-between; z-index: 1001;}
.burger span {height: 4px;background: #f0f8ff;border-radius: 2px;width: 100%;transition: transform 0.4s ease, opacity 0.3s ease;transform-origin: center;}
/* animation croix */
.burger.active span:nth-child(1) {transform: rotate(45deg) translate(6px, 6px);}
.burger.active span:nth-child(2) {opacity: 0;}
.burger.active span:nth-child(3) {transform: rotate(-45deg) translate(6px, -6px);}
/* menu overlay */
.menu-overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100vh;background: #0D0D0D;display: flex;flex-direction: column;align-items: center;justify-content: center;transition: opacity 0.3s ease, visibility 0.3s ease;opacity: 0; visibility: hidden;z-index: 999;}
.menu-overlay.active {opacity: 1;visibility: visible;}
.menu-overlay a {color: #f0f8ff;font-size: 2rem;margin: 1rem 0;text-decoration: none;transition: color 0.2s ease;}
.menu-overlay a:hover {color: #3366FF;}
/* logo */
header img {width: 10%;height: auto;}

/*PRINCIPALE TITRE____________   */
.principale {display: flex;justify-content: center;align-items: center;height: 100vh;}
.int-header {position: relative;display: inline-block;  max-width: 100%;text-align: center;padding: 0 20px;}
.elea {text-transform: uppercase;margin: 0;padding: 0;display: flex;font-size: 1.5rem;}
.portfolio {letter-spacing: 5px;font-size: 5rem;margin: 0;padding: 0;line-height: 1;word-wrap: break-word;overflow-wrap: break-word;}
.principal-btn {position: absolute;right: 0;padding: 8px 16px;background-color: #f0f8ff;border: none;border-radius: 6px;font-size: 14px;cursor: pointer;transition: background-color 0.3s ease;}
.principal-btn:hover {background-color: #3366FF;}

/*A PROPOS DE MOI_______*/
#infographie {  scroll-margin-top: 80px;
}
.apropos{padding-bottom:200px;}
.apropos h2{display: flex;justify-content: center;}
.apropos .int_apropos{display: flex; justify-content: center; align-items: center;flex-direction:row-reverse;gap:30px;}
.apropos .reseaux{display: flex;flex-direction: column;gap:30px;}

.img-hover1 {width: 50px;height: 50px;background-image: url('img/behance.webp');background-size: cover;transition: background-image 0.3s ease;}
.img-hover1:hover {background-image: url('img/behance_hover.webp');cursor: pointer;}

.img-hover2 {width: 50px;height: 50px;background-image: url('img/insta.webp');background-size: cover;transition: background-image 0.3s ease;}
.img-hover2:hover {background-image: url('img/insta_hover.webp');cursor: pointer;}

.apropos .p{width: 600px;height: auto;line-height: 30px;}

/*COMPETENCES__________*/
.competences {display: flex;flex-direction: column;align-items: center;padding-bottom:200px;}
.competences div{display: flex; gap:30px;}
.btn{padding: 16px 32px;background-color: #f0f8ff;border: none;border-radius: 6px;font-size: 14px;cursor: pointer;transition: background-color 0.3s ease;}
.btn:hover{background-color: #3366FF;}
.btn:disabled {background-color: #aaa;cursor: not-allowed;opacity: 0.6;}
.btn:disabled:hover {background-color: #aaa;cursor: not-allowed;opacity: 0.6;}

/*CONTACT __________ */
.contact-form {max-width: 600px;margin: auto;display: flex;flex-direction: column;gap: 1rem;font-family: sans-serif; }
.contact h2{display: flex;justify-content: center;}
.contact-form label {font-weight: bold;}
.contact-form input,
.contact-form select,
.contact-form textarea {padding: 0.7rem;border: 1px solid #f0f8ff;border-radius: 8px;font-size: 1rem;}
.contact-form button {background-color: #0D0D0D;color: #f0f8ff;padding: 0.8rem;border: none;border-radius: 8px;cursor: pointer;transition: 0.3s;}
.contact-form button:hover {background-color: #3366FF;}

/*PAGE INFOGRAPHISME*/
.savoir {display: flex;align-items: center;flex-direction: column;padding-bottom: 200px;text-align: center;}
.knowledges {display: flex;flex-direction: row;align-items: center;justify-content: center;flex-wrap: wrap;gap: 20px;}
.knowledges .elements {display: flex;align-items: center;justify-content: center;padding: 30px;flex-direction: column-reverse;}
.knowledges .elements img {width: 100%;height: auto;}
.projects {display: flex;flex-direction: row;justify-content: center;align-items: center;flex-wrap: wrap;gap: 20px;margin: 20px 0;}
.projects a img, .projects img {width: 300px; height: 200px;border-radius: 8px;transition: transform 0.3s ease;}
.projects a img:hover, .projects img:hover {transform: scale(1.05);cursor: pointer;}


/*FOOTER*/
footer{display: flex; justify-content: center;padding-top: 60px;}


@media screen and (max-width: 768px) {
  /* Header */
  header {padding: 0.5rem 1rem;}
  header img {width: 35%;}
  /* Menu Overlay */
  .menu-overlay a {font-size: 1.5rem;margin:15px 0 15px 0 ;}

  /* Principale */
  .elea {justify-content: center;padding-bottom:10px;}
  .principal-btn {position: static;margin-top: 20px;}
  /* À propos */
  .apropos .int_apropos {flex-direction:column-reverse;text-align: center;gap: 20px;}
  
  .apropos .reseaux {flex-direction: row;justify-content: center;gap: 20px;}
  .img-hover2:hover {background-image: url('img/insta.webp');}
  .img-hover1:hover {background-image: url('img/behance.webp');}
  .apropos .p {width: auto;padding: 0 1rem;font-size: 1.2rem;}
  .apropos img {width: 50%;height: auto;}

  /* Compétences */
  .competences div {flex-direction: column;align-items: center;}
  .competences .btn {width: 100%;text-align: center;}

  /* Contact */
  .contact-form {width: 90%;padding: 0 1rem;}

  /* Projets */
  .projects a img, .projects img {width: 90%;}
}