/*******************************
CSS COMMUN
*******************************/
html {
  font-size: 22px;
  background-color: rgb(255, 255, 255);
}

html {
  scroll-behavior: smooth;
}

img {
  pointer-events: none;
}

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

@font-face {
  src: url(../fonts/Inter-VariableFont_slnt\,wght.ttf);
  font-family: "Inter";
}

body {
  font-family: "Inter", Arial, Helvetica, sans-serif;
  line-height: auto;
}

h1 {
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-size: 1rem;
  line-height: 150%;
  font-weight: 400;
  text-align: left;
}

h2 {
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-size: 1rem;
  line-height: 130%;
  font-weight: 500;
  text-align: left;
}

h3 {
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-size: 1rem;
  line-height: 150%;
  font-weight: 400;
  text-align: left;
}


p {
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-size: 1rem;
  line-height: 200%;
  font-weight: 400;
  margin: auto;
  text-align: left;
}

legend {
  font-size: 16px;
  font-family: "Inter", Arial, Helvetica, sans-serif;
  line-height: 150%;
  font-weight: 300;
  text-align: left;
}

b {
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-weight: 500;
}

strong {
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-weight: 500;
}

a {
  text-decoration: none;
  font-size: 1rem;
  font-weight: 400;
  color: rgb(21, 1, 1);
}




/* Affichage Display desktop*/
.desktop-line-break {
  display: inline;
}

/* Affichage Mobile desktop*/
.tablet-line-break {
  display: none;
}

/* Affichage Mobile desktop*/
.mobile-line-break {
  display: none;
}


/*******************************
Transition pages
*******************************/
.transition {
  animation: slide-up 0.1s step-end;
  padding-top: 120px;
}

@keyframes slide-up {
  0% {
    transform: translateY(100%);
  }

  100% {
    transform: translateY(0);
  }
}


/*******************************
Transition sticky nav
*******************************/
.navbar {
  top: 0;
  transition: top 0.6s;
}



/*******************************
Header
*******************************/
header {
  position: fixed;
  z-index: 7;
  top: 0;
  width: 100%;
  height: 3rem;
  background-color: rgba(255, 255, 255, 0.942);
}


svg :hover {
  color: rgb(120, 120, 120);
  transition: .3s ease;
}

li :hover {
  color: rgb(120, 120, 120);
  transition: .3s ease;
}

footer {
  margin-left: 15%;
  justify-content: left;
  margin-top: 160px;
  margin-bottom: 100px;
}



/*******************************
Burger
*******************************/
.nav {
  display: flex;
  margin: auto;
  margin-top: 20px;
  max-width: 70%;
  justify-content: space-between;
  color: #040000;
  align-items: center;
}

.menu {
  margin-left: 0%;
  position: absolute;
  top: 0;
  margin-top: 3rem;
  left: 0;
  flex-direction: column;
  width: 100%;
  justify-content: center;
  align-items: center;
}

#menu-toggle {
  display: none;
}

.menu-button,
.menu-button::before,
.menu-button::after {
  display: block;
  background-color: #0c0101;
  position: absolute;
  height: 2px;
  width: 30px;
  transition: transform 400ms cubic-bezier(0.10, 1, 0.10, 1);
  border-radius: 2px;
}

.menu-button::before {
  content: '';
  margin-top: -8px;
}

.menu-button::after {
  content: '';
  margin-top: 8px;
}

#menu-toggle:checked+.menu-button-container .menu-button::before {
  margin-top: 0px;
  transform: rotate(45deg);
}

#menu-toggle:checked+.menu-button-container .menu-button {
  background: rgba(255, 255, 255, 0);
}

#menu-toggle:checked+.menu-button-container .menu-button::after {
  margin-top: 0px;
  transform: rotate(-45deg);
}

.menu-button-container {
  display: none;
  height: 30px;
  width: 30px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}


#menu-toggle~.menu li {
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
}

#menu-toggle:checked~.menu li {
  height: 120px;
  padding-top: 30px;
  transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
}

.menu>li {
  margin: 0 0rem;
  overflow: hidden;
  display: block;
  /* block Rend le lien cliquable sur toute la zone */
  justify-content: left;
  width: 100%;
  color: rgb(1, 0, 0);
  background-color: rgb(255, 255, 255);
}


.menu>li a {
  padding-top: 20px;
  padding-bottom: 30px;
  display: block;
  /* Block Rend le lien cliquable sur toute la zone */
  margin-left: 15%;
  font-size: 20px;
}


/* opacité burger arriere plan */
.overlay-burger {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.11);
  /* Couleur d'arrière-plan semi-transparente */
  z-index: 1;
  animation: fadeIn 2s ease forwards;
}

.menu.open+#overlay-burger {
  display: block;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/*******************************
Body
*******************************/


/*******************************
HOME VIGNETTES
*******************************/
.portfolio {
  display: flex;
  max-width: 70%;
  margin: auto;
}


/* affichage par colone */
.masonry {
  margin: auto;
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  column-gap: 60px;
}

.item {
  break-before: column;
  /* Passe à la colonne suivante avant cet élément */
}


.overlay-image {
  max-width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
  margin-bottom: 60px;
}

.overlay-image .image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay-image .overlay {
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #000000;
  line-height: 110%;
  text-align: left;
  opacity: 0;
  background-color: rgba(247, 247, 247, 0.906);
  transition: opacity 0.4s ease-in, transform 0.3s ease-out;
}

.overlay-image:hover .overlay {
  opacity: 1;
}


/*******************************
FOOTER
*******************************/
.footer {
  display: flex;
  align-content: start;
}

.footer h1 {
  margin-top: 1px;
}

.footer p {
  font-weight: 300;
  margin-top: 1px;
  font-size: 18px;
}


#svg-footer {
  margin-top: 9px;
  height: 20px;
  width: auto;
}

.slach p {
  font-size: 18px;
  padding-left: 8px;
  padding-right: 8px;
}

.social-link img {
  margin-top: 6px;
  width: 24px;
  margin-left: 20px;
  padding-right: 0px;
  height: auto;
}

footer div legend {
  margin-top: 10px;

}



/*******************************
PAGES BOOK
*******************************/

.container-book {
  max-width: 70%;
  margin: 0 auto;
}

.container-book img {
  display: flex;
  margin: auto;
  padding: 0;
  width: 100%;
  height: auto;
  padding-bottom: 20px;
}


/*******************************
CAROUSSEL BOOK
*******************************/

.carousel img {
  width: 100%;
  flex: 0 0 100%;
  height: auto;
}

.carousel-container {
  position: relative;
  max-width: 70%;
  margin: auto;
  overflow: hidden;
}

.carousel {
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: 100%;
  /* Ajuste selon le nombre d'images */
}

.carousel img {
  width: 100%;
  height: auto;
}



.indicators {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

.indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.26);
  cursor: pointer;
}

.indicator.active {
  background-color: #0b0b0c;
}


.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(114, 114, 114, 0.26);
  color: white;
  border: none;
  width: 36px;
  /* largeur fixe */
  height: 36px;
  /* hauteur fixe */
  padding: 0;
  /* pas de padding pour ne pas modifier la taille */
  cursor: pointer;
  border-radius: 50%;
  /* bord arrondi pour un cercle parfait */
}

.arrow:hover {
  background-color: rgba(30, 30, 30, 0.26);
}

.arrow-left {
  left: 20px;
}

.arrow-right {
  right: 20px;
}

.radius-top {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.radius-bottom {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}



.marging-top {
  margin-top: 260px;
}


video {
  display: flex;
  margin: auto;
  padding: 0;
  width: 100%;
  height: auto;
  padding-bottom: 20px;
}

#vœux {
  width: 70%;
  margin-bottom: 20px;
}


.text-center {
  padding-top: 50px;
  justify-content: space-around;
  max-width: 100%;
  display: flex;
}

/*TEXTES PROJETS*/
.project {
  margin-left: 15%;
  max-width: 90%;
}

.project p {
  font-size: 18px;
  font-weight: 300;
}

.project a {
  font-size: 18px;
  font-weight: 300;
}

.project h1 {
  font-size: 18px;
}

#about {
  font-size: 18px;
}

.project div {
  margin-top: 30px;
  margin-bottom: 30px;
}



.container-book video::-webkit-media-controls {
  display: none;
}

.container-book video::-webkit-media-controls-play-button {
  display: none;
}

.container-book video::-webkit-media-controls-mute-button {
  display: none;
}

.container-book video::-webkit-media-controls-fullscreen-button {
  display: none;
}



/*******************************
FLECHES NAVGATION
*******************************/
.nav-bas {
  display: flex;
  margin-top: 140px;
  margin-left: 15%;
  max-width: 90%;
}

.nav-bas svg {
  margin-right: 100px;
}

/* hover fleche top */
.rounded-div {
  width: 60px;
  height: 60px;
  margin-right: 100px;
  background-color: transparent;
  border-radius: 50%;
  transition: background-color 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
}

.svg-link:hover .rounded-div {
  background-color: rgb(237, 237, 237);
}


.left img {
  margin-left: -8px;
  width: 30px;
  height: auto;
}

.center img {
  margin-left: 0px;
  height: 30px;
  width: auto;
}

.right img {
  margin-left: 6px;
  width: 30px;
  height: auto;
}






/*******************************
MEDIA QUERIES Tablette
*******************************/


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


  /*******************************
CSS COMMUN
*******************************/

  html {
    font-size: 18px;
    background-color: rgb(255, 255, 255);
  }

  html {
    scroll-behavior: smooth;
  }

  img {
    pointer-events: none;
  }

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

  @font-face {
    src: url(../fonts/Inter-VariableFont_slnt\,wght.ttf);
    font-family: "Inter";
  }

  body {
    font-family: "Inter", Arial, Helvetica, sans-serif;
    line-height: auto;
  }

  h1 {
    font-family: "Inter", Arial, Helvetica, sans-serif;
    font-size: 1rem;
    line-height: 150%;
    font-weight: 400;
    text-align: left;
  }

  h2 {
    font-family: "Inter", Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 130%;
    font-weight: 500;
    text-align: left;
  }

  h3 {
    font-family: "Inter", Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 150%;
    font-weight: 400;
    text-align: left;
  }


  p {
    font-family: "Inter", Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 170%;
    font-weight: 400;
    margin: auto;
    text-align: left;
  }

  legend {
    font-size: 12px;
    font-family: "Inter", Arial, Helvetica, sans-serif;
    line-height: 150%;
    font-weight: 300;
    text-align: left;
  }

  b {
    font-family: "Inter", Arial, Helvetica, sans-serif;
    font-weight: 500;
  }

  strong {
    font-family: "Inter", Arial, Helvetica, sans-serif;
    font-weight: 500;
  }

  a {
    text-decoration: none;
    font-size: 20px;
    font-weight: 400;
    color: rgb(21, 1, 1);
  }




  /* Affichage Display desktop*/
  .desktop-line-break {
    display: none;
  }

  /* Affichage Mobile desktop*/
  .tablet-line-break {
    display: inline;
  }

  /* Affichage Mobile desktop*/
  .mobile-line-break {
    display: none;
  }



  /*******************************
Transition pages
*******************************/
  .transition {

    padding-top: 90px;

    animation: slide-up 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  @keyframes slide-up {
    0% {
      transform: translateY(100%);
    }

    100% {
      transform: translateY(0);
    }
  }


  /*******************************
Header
*******************************/
  header {
    position: fixed;
    z-index: 7;
    top: 0;
    width: 100%;
    height: 3rem;
    background-color: rgb(255, 255, 255);
  }


  footer {
    margin-left: 5%;
    justify-content: left;
    margin-top: 60px;
    margin-bottom: 120px;
  }





  /*******************************
Burger
*******************************/
  .nav {
    display: flex;
    margin: auto;
    margin-top: 20px;
    max-width: 90%;
    justify-content: space-between;
    color: #040000;
    align-items: center;
  }

  .menu {
    margin-left: 0%;
    position: absolute;
    top: 0;
    margin-top: 3rem;
    left: 0;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
  }

  #menu-toggle {
    display: none;
  }

  .menu-button,
  .menu-button::before,
  .menu-button::after {
    display: block;
    background-color: #0c0101;
    position: absolute;
    height: 2px;
    width: 30px;
    transition: transform 400ms cubic-bezier(0.10, 1, 0.10, 1);
    border-radius: 2px;
  }

  .menu-button::before {
    content: '';
    margin-top: -8px;
  }

  .menu-button::after {
    content: '';
    margin-top: 8px;
  }

  #menu-toggle:checked+.menu-button-container .menu-button::before {
    margin-top: 0px;
    transform: rotate(45deg);
  }

  #menu-toggle:checked+.menu-button-container .menu-button {
    background: rgba(255, 255, 255, 0);
  }

  #menu-toggle:checked+.menu-button-container .menu-button::after {
    margin-top: 0px;
    transform: rotate(-45deg);
  }

  .menu-button-container {
    display: none;
    height: 30px;
    width: 30px;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .menu>li {
    margin: 0 1rem;
    overflow: hidden;
  }

  #menu-toggle~.menu li {
    margin-left: 0;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  #menu-toggle:checked~.menu li {
    height: 140px;
    padding-top: 30px;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  .menu>li {
    font-size: 15px;
    display: block;
    justify-content: left;
    padding: 0.6em 0;
    width: 100%;
    color: rgb(1, 0, 0);
    background-color: rgb(255, 255, 255);
  }

  .menu>li a {
    padding-top: 30px;
    padding-bottom: 30px;
    display: block;
    margin-left: 5%;
    font-size: 20px;
  }


  /* opacité burger arriere plan */
  .overlay-burger {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.283);
    /* Couleur d'arrière-plan semi-transparente */
    z-index: 1;
    animation: fadeIn 1s ease forwards;
  }

  .menu.open+#overlay-burger {
    display: block;
  }

  @keyframes fadeIn {
    0% {
      opacity: 0;
      transform: translateY(-10px);
    }

    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }



  /*******************************
Body
*******************************/


  /*******************************
HOME VIGNETTES
*******************************/
  .portfolio {
    margin-top: 0;
    display: flex;
    max-width: 90%;
    margin: auto;
  }

  /* affichage par colone */
  .masonry {
    margin: auto;
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    column-gap: 14px;
  }

  /* affichage par colone */


  .overlay {
    display: none;
  }

  .overlay-image {
    max-width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    margin-bottom: 14px;
  }

  .overlay-image .image {
    display: block;
    width: 100%;
    height: 100%;
  }



  /*******************************
FOOTER
*******************************/
  .footer {
    display: flex;
    flex-direction: column;
    align-content: start;
  }

  .footer h1 {
    margin-top: 0px;
    font-size: 16px;

  }

  .footer p {
    font-weight: 300;
    margin-top: 4px;
    font-size: 16px;
  }


  #svg-footer {
    margin-top: 10px;
    height: 16px;
    width: auto;
  }

  .slach p {
    font-size: 22px;
    padding-left: 0px;
    padding-right: 0px;
  }

  .social-link img {
    margin-top: 22px;
    width: 50px;
    height: auto;
    margin-left: 0px;
    padding-right: 24px;
  }

  footer div legend {
    margin-top: 20px;

  }



  /*******************************
PAGES BOOK
*******************************/

  .container-book {
    max-width: 90%;
    margin: 0 auto;
  }

  .container-book img {
    display: flex;
    margin: auto;
    padding: 0;
    max-width: 100%;
    height: auto;
    padding-bottom: 20px;
  }


  /*******************************
CAROUSSEL BOOK
*******************************/

  .carousel img {
    width: 100%;
    flex: 0 0 100%;
    height: auto;
  }

  .carousel-container {
    position: relative;
    max-width: 90%;
    margin: auto;
    overflow: hidden;
  }

  .carousel {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%;
    /* Ajuste selon le nombre d'images */
  }

  .carousel img {
    width: 100%;
    height: auto;
  }

  .arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(114, 114, 114, 0.26);
    color: white;
    border: none;
    width: 40px;
    /* largeur fixe */
    height: 40px;
    /* hauteur fixe */
    padding: 0;
    /* pas de padding pour ne pas modifier la taille */
    cursor: pointer;
    border-radius: 50%;
    /* bord arrondi pour un cercle parfait */
  }

  .arrow:hover {
    background-color: rgba(30, 30, 30, 0.26);
  }

  .arrow-left {
    left: 10px;
  }

  .arrow-right {
    right: 10px;
  }


  .radius-top {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
  }

  .radius-bottom {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
  }



  .marging-top {
    margin-top: 100px;
  }

  #vœux {
    width: 100%;
    margin-bottom: 20px;
  }

  .text-center {
    padding-top: 50px;
    justify-content: space-around;
    max-width: 100%;
    display: flex;
  }

  /*TEXTES PROJETS*/
  .project {
    margin-left: 5%;
    max-width: 90%;
  }

  .project p {
    font-size: 16px;
    font-weight: 300;
  }

  .project a {
    font-size: 18px;
    font-weight: 300;
  }

  .project h1 {
    font-size: 30px;
  }

  #about {
    font-size: 16px;
  }


  .project div {
    margin-top: 30px;
    margin-bottom: 30px;
  }



  /*fleche > top*/
  .nav-bas {
    display: flex;
    margin-top: 90px;
    margin-left: 5%;
    max-width: 90%;
  }

  .nav-bas svg {
    margin-right: 100px;
  }



  /*******************************
FLECHES NAVGATION
*******************************/

  .rounded-div {
    width: 60px;
    height: 60px;
    margin-right: 100px;
    background-color: transparent;
    border-radius: 50%;
    transition: background-color 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .svg-link:hover .rounded-div {
    background-color: rgb(255, 255, 255);
  }

  .left img {
    margin-left: 0px;
    width: 28px;
    height: auto;
  }

  .center img {
    height: 28px;
    width: auto;
    margin-left: 0px;
    margin-left: 0px;
  }

  .right img {
    margin-left: 0px;
    margin-left: 0px;
    width: 28px;
    height: auto;
  }
}









/*******************************
MEDIA QUERIES Mobile
*******************************/

/*******************************
CSS COMMUN
*******************************/

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

  /*******************************
CSS COMMUN
*******************************/

  html {
    font-size: 20px;
    background-color: rgb(255, 255, 255);
  }

  html {
    scroll-behavior: smooth;
  }

  img {
    pointer-events: none;
  }

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

  @font-face {
    src: url(../fonts/Inter-VariableFont_slnt\,wght.ttf);
    font-family: "Inter";
  }

  body {
    font-family: "Inter", Arial, Helvetica, sans-serif;
    line-height: auto;
  }

  h1 {
    font-family: "Inter", Arial, Helvetica, sans-serif;
    font-size: 1rem;
    line-height: 150%;
    font-weight: 400;
    text-align: left;
  }

  h2 {
    font-family: "Inter", Arial, Helvetica, sans-serif;
    font-size: 1rem;
    line-height: 130%;
    font-weight: 500;
    text-align: left;
  }

  h3 {
    font-family: "Inter", Arial, Helvetica, sans-serif;
    font-size: 1rem;
    line-height: 150%;
    font-weight: 400;
    text-align: left;
  }


  p {
    font-family: "Inter", Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 160%;
    font-weight: 400;
    margin: auto;
    text-align: left;
  }

  legend {
    font-size: 13px;
    font-family: "Inter", Arial, Helvetica, sans-serif;
    line-height: 150%;
    font-weight: 300;
    text-align: left;
  }

  b {
    font-family: "Inter", Arial, Helvetica, sans-serif;
    font-weight: 500;
  }

  strong {
    font-family: "Inter", Arial, Helvetica, sans-serif;
    font-weight: 500;
  }

  a {
    text-decoration: none;
    font-size: 1rem;
    font-weight: 400;
    color: rgb(21, 1, 1);
  }




  /* Affichage Display desktop*/
  .desktop-line-break {
    display: none;
  }

  /* Affichage Mobile desktop*/
  .tablet-line-break {
    display: none;
  }

  /* Affichage Mobile desktop*/
  .mobile-line-break {
    display: inline;
  }


  /*******************************
Transition pages
*******************************/
  .transition {

    padding-top: 90px;

    animation: slide-up 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  @keyframes slide-up {
    0% {
      transform: translateY(100%);
    }

    100% {
      transform: translateY(0);
    }
  }




  /*******************************
Header
*******************************/
  header {
    position: fixed;
    z-index: 7;
    top: 0;
    width: 100%;
    height: 3rem;
    background-color: rgb(255, 255, 255);
  }


  footer {
    margin-left: 5%;
    justify-content: left;
    margin-top: 60px;
    margin-bottom: 120px;
  }




  /*******************************
Burger
*******************************/
  .nav {
    display: flex;
    margin: auto;
    margin-top: 20px;
    max-width: 90%;
    justify-content: space-between;
    color: #040000;
    align-items: center;
  }

  .menu {
    margin-left: 0%;
    position: absolute;
    top: 0;
    margin-top: 3rem;
    left: 0;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
  }

  #menu-toggle {
    display: none;
  }

  .menu-button,
  .menu-button::before,
  .menu-button::after {
    display: block;
    background-color: #0c0101;
    position: absolute;
    height: 2px;
    width: 24px;
    transition: transform 400ms cubic-bezier(0.10, 1, 0.10, 1);
    border-radius: 2px;
  }

  .menu-button::before {
    content: '';
    margin-top: -8px;
  }

  .menu-button::after {
    content: '';
    margin-top: 8px;
  }

  #menu-toggle:checked+.menu-button-container .menu-button::before {
    margin-top: 0px;
    transform: rotate(45deg);
  }

  #menu-toggle:checked+.menu-button-container .menu-button {
    background: rgba(255, 255, 255, 0);
  }

  #menu-toggle:checked+.menu-button-container .menu-button::after {
    margin-top: 0px;
    transform: rotate(-45deg);
  }

  .menu-button-container {
    display: none;
    height: 24px;
    width: 24px;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .menu>li {
    margin: 0 1rem;
    overflow: hidden;
  }

  #menu-toggle~.menu li {
    margin-left: 0;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  #menu-toggle:checked~.menu li {
    height: 120px;
    padding-top: 20px;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  .menu>li {
    font-size: 16px;
    display: block;
    justify-content: left;
    padding: 0.6em 0;
    width: 100%;
    color: rgb(1, 0, 0);
    background-color: rgb(255, 255, 255);
  }

  .menu>li a {
    padding-top: 30px;
    padding-bottom: 40px;
    display: block;
    margin-left: 5%;
    font-size: 18px;
  }


  /* opacité burger arriere plan */
  .overlay-burger {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.283);
    /* Couleur d'arrière-plan semi-transparente */
    z-index: 1;
    animation: fadeIn 1s ease forwards;
  }

  .menu.open+#overlay-burger {
    display: block;
  }

  @keyframes fadeIn {
    0% {
      opacity: 0;
      transform: translateY(-10px);
    }

    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /*******************************
Body
*******************************/


  main {
    margin-top: 100px;
    max-width: 100%;
    margin: auto;
  }

  article {
    margin: auto;
    display: inherit;
  }

  #photo {
    max-width: 100%;
  }

  .flex-wrap {
    max-width: 100%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }




  /*******************************
Home vignettes
*******************************/
  .portfolio {
    display: flex;
    max-width: 90%;
    margin: auto;
  }

  /* affichage par colone */
  .masonry {
    width: 100%;
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
  }

  .item {
    break-before: auto;
  }


  .overlay {
    display: none;
  }

  /* effet grossissement image home*/
  .overlay-image {
    margin-bottom: 20px;
    width: 100%;
    position: relative;
    overflow: hidden;
  }

  .overlay-image .image {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.5s ease-in-out, filter 0.4s ease-in-out;
  }

  .overlay-image.active .image {
    transform: scale(1.05);
    /* Ajustez la valeur pour le grossissement souhaité */
  }


  /*******************************
FOOTER
*******************************/
  .footer {
    display: flex;
    flex-direction: column;
    align-content: start;
  }

  .footer h1 {
    font-size: 18px;
    margin-top: 0px;
  }

  .footer p {
    font-weight: 400;
    margin-top: 0ch;
    font-size: 17px;
  }

  #svg-footer {
    margin-top: 5px;
    height: 19px;
    width: auto;
  }

  .slach p {
    font-size: 18px;
    padding-left: 0px;
    padding-right: 0px;
  }

  .social-link img {
    margin-top: 20px;
    width: 50px;
    height: auto;
    margin-left: 0px;
    padding-right: 24px;
  }

  footer div legend {
    margin-top: 8px;

  }



  /*******************************
PAGES BOOK
*******************************/

  .container-book {
    max-width: 90%;
    margin: 0 auto;
  }

  .container-book img {
    display: flex;
    margin: auto;
    padding: 0;
    max-width: 100%;
    height: auto;
    padding-bottom: 20px;
  }



  /*******************************
CAROUSSEL BOOK
*******************************/

  .carousel img {
    width: 100%;
    flex: 0 0 100%;
    height: auto;
  }

  .carousel-container {
    position: relative;
    max-width: 90%;
    margin: auto;
    overflow: hidden;
  }

  .carousel {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%;
    /* Ajuste selon le nombre d'images */
  }

  .carousel img {
    width: 100%;
    height: auto;
  }
  
  .indicators {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
  }
  
  .indicator {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.243);
    cursor: pointer;
  }
  
  .indicator.active {
    background-color: #0b0b0c;
  }
  .arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(114, 114, 114, 0.26);
    color: white;
    border: none;
    width: 24px;
    /* largeur fixe */
    height: 24px;
    /* hauteur fixe */
    padding: 0;
    /* pas de padding pour ne pas modifier la taille */
    cursor: pointer;
    border-radius: 50%;
    /* bord arrondi pour un cercle parfait */
  }

  .arrow:hover {
    background-color: rgba(30, 30, 30, 0.26);
  }

  .arrow-left {
    left: 6px;
  }

  .arrow-right {
    right: 6px;
  }


  .marging-top {
    margin-top: 50px;
  }


  #vœux {
    width: 100%;
    margin-bottom: 20px;
  }

  .text-center {
    padding-top: 50px;
    justify-content: space-around;
    max-width: 100%;
    display: flex;
  }

  /*TEXTES PROJETS*/
  .project {
    margin-left: 5%;
    max-width: 90%;
  }

  .project p {
    font-size: 16px;
    font-weight: 300;
  }

  .project a {
    font-size: 16px;
    font-weight: 300;
  }

  .project h1 {
    font-size: 24px;
  }

  #about {
    font-size: 16px;
  }

  .project div {
    margin-top: 20px;
    margin-bottom: 20px;
  }




  /*******************************
FLECHES NAVGATION
*******************************/
  .nav-bas {
    display: flex;
    justify-content: center;
    margin: auto;
    margin-top: 80px;
    margin-left: 0%;
    max-width: 100%;
  }

  .nav-bas svg {
    margin-right: 00px;
  }

  /* hover fleche top */
  .rounded-div {
    width: 30px;
    height: 30px;
    margin-right: 40px;
    margin-left: 40px;
    background-color: transparent;
    border-radius: 50%;
    transition: background-color 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
  }



  .left img {
    margin-left: 0px;
    width: 24px;
    height: auto;
  }

  .center img {
    height: 24px;
    width: auto;
    margin-left: 0px;
    margin-left: 0px;
  }

  .right img {
    margin-left: 0px;
    margin-left: 0px;
    width: 24px;
    height: auto;
  }




}