/*CSS reset */
/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body
{
  margin:0;
}


body {
  /* 4. Add accessible line-height */
  line-height: 1.3;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;


}

/* 6. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h3, h4, h5, h6 {
  text-wrap: balance;
    margin: 0;
}

/*
  10. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}

/* Fonts */

.roboto-annie {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: italic;
  font-variation-settings:
    "wdth" 100;
}

.padyakke-expanded-one-regular {
  font-family: "Padyakke Expanded One", serif;
  font-weight: 400;
  font-style: normal;
}

h2, h3, h4, p, li, a {
  font-family: "Roboto", sans-serif;
  letter-spacing: 0.03em;
}

p {
  font-weight: 300;
  font-size: 1.2em;
  line-height: 1.2em;
}

li {
  font-weight: 300;
  font-size: 1.2em;
}

h1 {
  font-family: "Padyakke Expanded One";  
  font-size: 4em;
  font-weight: 100;
  line-height: 1em;
}

h2 {
  font-weight: 400;
  font-size: 2em;
}

h3 {
  text-transform: uppercase;
  font-size: 1em;
  font-weight: 900;
  color: #9C7394;
}

h4 {
  font-weight: 300;
  font-style: italic;    
}

h5 {
  display: inline-block;
  margin-top: 0.2em;
  font-size: 1em;
  font-weight: 300;
  font-family: "Roboto";
}



/* Couleurs */
body {
  background-color: #E8E3E0;
}

a:link {
  color: #EA3E7E;    
}

a:hover {
  color: #aa0476;    
}

a:visited {
  color: #A75C2E;
}

/* Naviguation */
.header {
    font-family: "Roboto";
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 4em;
    padding-top: 2em;
}

      .header ul {
        padding: 0;
        margin: 0;
        list-style: none;
      }

.header li {
  display: inline;
  font-weight: 600;
  font-size: 1em;
  padding-right: 2em;
}

.header a:link {
  color: black;
  text-decoration: none;
}

.header a:hover {
  color: #EA3E7E;
  text-decoration: none;
}

.header a:visited {
  color: black;
  text-decoration: none;
}

.header-top {
  
  }  



/* Bouton menu mobile — caché sur desktop */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-family: "Roboto";
  font-weight: 600;
  font-size: 1em;
  cursor: pointer;
  z-index: 200;
}

@media (max-width: 940px) {



  .menu-toggle {
    display: block;
  }

  /* Le header devient une colonne */
  .header {
    flex-direction: column;
    align-items: flex-start;
    margin-left: 2em;
    margin-right: 2em;
  }

  /* Ligne du haut : logo + bouton côte à côte */
  .header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }  

  /* Menu glisse vers le bas, dans le flux normal */
  .menu {
    display: none;
    width: 100%;
    background: #f9f0f4;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.35s ease;
  }

  .menu.ouvert {
    display: block;
    max-height: 500px; /* assez grand pour contenir tous vos liens */
  }

  .menu ul {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem 0;
  }

  .menu li {
    display: block;
    padding-left: 0;
    font-size: 1.4em;
    text-align: center;
  }
}

.menu li.langue a {
  color: #727272;
}

/* Layout header sur le blog */
.blog .header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.blog .header-top {
  display: flex;
  justify-content: center;
  width: 100%;
}


/* intro */
.intro {
    text-align: center;
    padding: 60px 45px;
}

.intro h2 {

  padding-bottom: 22px;
}

.intro input {
  background-color: #9C7394;
  border: none;
  color: #E8E3E0;
  font-family: "Roboto";
  padding: 8px 11px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
}

.intro input:hover {
  background-color: #EA3E7E;
}

.voirplus {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #82b2c2;
    position: relative;
    width: 100%;
    margin-bottom: 3em;

}

 .voirplus:before {
  content: "";
  position: absolute;
  display: block;
  height: 10px;
  transform: scaleY(-1);
  top: -10px;
  left: 0;
  right: 0;
  background: linear-gradient( 45deg, transparent 33.333%, #82b2c2 33.333%, #82b2c2 66.667%, transparent 66.667%), linear-gradient( -45deg, transparent 33.333%, #82b2c2 33.333%, #82b2c2 66.667%, transparent 66.667%);
  background-size: 28px 60px;
  background-position: 30px 12px;
}


.voirplus:after {
  content: "";
  position: absolute;
  display: block;
  height: 10px;
  bottom: -10px;
  left: 0;
  right: 0;
  background: linear-gradient( 45deg, transparent 33.333%, #82b2c2 33.333%, #82b2c2 66.667%, transparent 66.667%), linear-gradient( -45deg, transparent 33.333%, #82b2c2 33.333%, #82b2c2 66.667%, transparent 66.667%);
  background-size: 28px 60px;
  background-position: 30px 12px;
}

.voirplus input {
  background-color: #000000;
  border: none;
  color: #E8E3E0;
  font-family: "Roboto";
  padding: 8px 11px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
}

.voirplus input:hover {
  background-color: #EA3E7E;
}


.texte-voirplus {
  display: inline;
  padding-top: 5em;
  padding-bottom: 5em;
}


.oeil-animation {
  width: 214px;
  height: 214px;
  background-image: url('/assets/voir-plus.png');
  background-repeat: no-repeat;
  animation: oeil-steps-desktop 1s steps(3) infinite;
  margin-right: 5em;
}

@keyframes oeil-steps-desktop {
  from { background-position: 0 0; }
  to   { background-position: 0 -642px; } /* 214px × 3 frames */
}

/* Mobile */
@media (max-width: 768px) {
  .oeil-animation {
    background-image: url('/assets/voir-plus-petit.png');
    width: 100px;
    height: 100px;
    margin-right: 2em;
    margin-top: 2em;
    animation-name: oeil-steps-mobile; /* ← on change juste le nom */
  }
}

@keyframes oeil-steps-mobile {
  from { background-position: 0 0; }
  to   { background-position: 0 -300px; } /* 100px × 3 frames */
}
@keyframes oeil-steps {
  from { background-position: 0 0; }
  to   { background-position: 0 -642px; } /* hauteur totale du sprite */
}

/* Popup infolettre */
/* Cache le popup par défaut */
.popup-overlay {
  display: none;
  position: fixed;
  inset: 0; /* couvre tout l'écran */
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

/* Quand le popup est actif */
.popup-overlay.actif {
  display: flex;
}

/* La boîte blanche au centre */
.popup-contenu {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  max-width: 400px;
  width: 90%;
  position: relative;
    display: block;
  text-align: center;
  font-family: "Roboto";
}

.popup-contenu input[type="submit"] {
  background-color: #9C7394;
  border: none;
  color: #E8E3E0;
  font-family: "Roboto";
  padding: 8px 11px;
  margin-top: 10px;
}

.popup-contenu input[type="submit"]:hover {
  background-color: #EA3E7E;
}


/* Bouton X pour fermer */
.popup-fermer {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
}

/* Inscription infolettre */




/* Portfolio */

#portfolio {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;

}

#portfolio-home {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-bottom: 6em;

}

#portfolio img {
    max-height: 540px;
}

.piece-home {
    display: flex;
    justify-content: center;
    padding-bottom: 3em;
    padding-top: 3em;
}

.piece-img-home {
    display: flex;
    justify-content: space-between;
    padding-right: 2em;
}


.piece-text {
  max-width: 35%;
  padding-top: 2em;
  padding-left: 1em;
  margin-right: 2em;
}


.piece-text ul {
  margin-left: -38px;
  padding-top: 1.5em;
}
.piece-img-home img{
  max-width: 400px; 
}

.piece-text li {
  border-bottom: solid 1px #acacac;
  padding-bottom: 8px;
  margin-bottom: 1em;
  list-style: none;
}

.piece h3{
  border-top: solid 1px #acacac;
  margin-top: 1em;
  padding-bottom: 0.7em;
}

.piece h5 span {
    text-transform: uppercase;
    font-size: 1em;
    font-weight: 900;
    color: #9C7394;
}

.piece {
  padding-top: 1.5em;
  margin-bottom: 4em;
  margin-right: 1em;
  margin-left: 1em;

}



@media (max-width: 900px) {

.piece-home {
        flex-direction: column;
        align-items: center;  
}  

  .piece-img-home {
        padding-right: 0;
        flex-direction: column;
        align-items: center;
}
.piece-text {
  max-width: 80%;
}

#portfolio-home {
  display:flex;
  justify-content: center;
  max-width: 100%;
  padding-bottom: 2em;
}

.piece-img-home img{
  max-width: 100%; 
}

.piece {
  padding-top: 2em;
  margin-bottom: 1.5em;
  margin-right: 1em;
  margin-left: 1em;

}

  .blog .header {
    flex-direction: column;
    align-items: flex-start;
    margin-left: 2em;
    margin-right: 2em;
  }

  .blog .header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }


}








.piece-img {
  position: relative;
  overflow: hidden;
  z-index: 999;    
}



.piece-hover {
  position: absolute;
  z-index: 1;
  @media(pointer: coarse) {
      animation: image-steps 3s steps(1, end) infinite ; 
  }
}

.piece-img:hover .piece-hover  {
  animation: image-steps 3s steps(1, end) infinite ; 
}




@keyframes image-steps {
      0% {
        top:0%; /* Starting position */
      }
      25% {
        top:-100%; /* First step */
      }
      50% {
        top:-200%; /* Second step */
      }
      75% {
        top:-300%; /* Third step */
      }
      100% {
        top:100%; /* Final position */
      
    } 
}

/* Services */

.services {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    padding: 50px 45px;
}

.services img {
  max-height: 400px;
}

.services h1 {
  padding-bottom: 0.5em;
}

#services-text {
  max-width: 400px;
}

#services-text ul {
  margin-left: -38px;
}

#services-text li {
  border-bottom: solid 1px #acacac;
  padding-bottom: 8px;
  margin-bottom: 1em;
  list-style: none;
}

/* Bibliographie */

.biblio {
  background-color: #E8928C;
  padding: 50px 45px;
  color: #E8E3E0;
  position: relative;
}

.biblio li {
  list-style: none;
  margin-left: -38px;
  border-bottom: solid 1px #E8E3E0;
  padding-bottom: 8px;
  margin-bottom: 1em;
}

.biblio span {
  font-weight: 300;
  font-style: italic;
  text-transform: none;
  padding-left: 0.3em;
}

.biblio h1 {
  padding-bottom: 0.5em;
}


/* Footer */

.footer {
    text-align: right;
    background-color: #FFEC8E;
    padding: 50px 50px;
    position: relative;
}

/* REUNIR LES DEUX EVENTUELLEMENT */

 .footer:before {
  content: "";
  position: absolute;
  display: block;
  height: 10px;
  transform: scaleY(-1);
  top: -10px;
  left: 0;
  right: 0;
  background: linear-gradient( 45deg, transparent 33.333%, #FFEC8E 33.333%, #FFEC8E 66.667%, transparent 66.667%), linear-gradient( -45deg, transparent 33.333%, #FFEC8E 33.333%, #FFEC8E 66.667%, transparent 66.667%);
  background-size: 28px 60px;
  background-position: 30px 12px;
}


.footer:after {
  content: "";
  position: absolute;
  display: block;
  height: 10px;
  bottom: -10px;
  left: 0;
  right: 0;
  background: linear-gradient( 45deg, transparent 33.333%, #FFEC8E 33.333%, #FFEC8E 66.667%, transparent 66.667%), linear-gradient( -45deg, transparent 33.333%, #FFEC8E 33.333%, #FFEC8E 66.667%, transparent 66.667%);
  background-size: 28px 60px;
  background-position: 30px 12px;
}

/* A propos */

#presentation {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    padding: 50px 45px;
}

#presentation-texte {
  max-width: 600px;
}

#presentation-texte li {
  list-style: none;
  margin-left: -38px;
  border-bottom: solid 1px #E8E3E0;
  padding-bottom: 8px;
  margin-bottom: 1em;
}

/* Blog */

.blog .header,
.blog  {
  max-width: 800px;
  margin: 0 auto;
}

.apercu-texte h1{
  padding-top: 0.5em;
}


.blog ul {
  list-style-type: none;
  padding: 0;
}

.post {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;

}

.blog-img {
  padding: 35px ;
}

.blog-text {
  max-width: 650px;
}

article {
  padding-bottom: 46px;
}

article img {
  padding-right: 2em;
}

.meta-info img {
  padding-bottom: 2em;
}

.meta-info {
  display: flex;
  padding-top: 3em;
}


.flow {
  padding-left: 200px;
}

.post-title {
  border-bottom: solid 1px #acacac;
  border-top: solid 1px #acacac; ;
  padding-bottom: -13px;
  padding-top: 12px;
}


.apercu {
  display: flex;
  justify-content: space-around;
  border-top: solid 1px #acacac;
  padding-bottom: 2em;
  padding-top: 2em;

}

.apercu img {
  padding-right: 1em;
}


.breadcrumbs {
  padding-bottom: 1em;
}

.breadcrumbs a.current {
  text-decoration: none;
}

@media (max-width: 900px) {
  .blog {
    margin: 1.5em;
  }

}

/* Copyright */

#copyright {
  padding: 30px 30px;
  text-align: center;
}

#copyright p {
  font-size: 0.8em;
}




/* Motion */

body {
    animation: fadeIn 3s;
  -webkit-animation: fadeIn 3s;
  -moz-animation: fadeIn 3s;
  -o-animation: fadeIn 3s;
  -ms-animation: fadeIn 3s;
}


/* Fade in */

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-moz-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-webkit-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-o-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-ms-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}


/* Responsive */

@media (max-width: 900px) {
      /* Styles applied when viewport width is 600px or less */


      h1 {
        font-size: 2.2em;
      }

      .piece {
          padding: 15px 5px;
      }


      #presentation {
        padding: 0px;
      }

      #presentation-texte {
        padding: 45px 25px 25px 25px;

      }

      .apercu {
        display: block;

      }
      .meta-info {
        display:inline-block;
}

      .flow {
        padding-left: 0px;

      }

      .header {
        display: flex;
        justify-content: center;
        align-items: center;
        padding-left: 0em;
        padding-right: 0em;
        padding-top: 2em;        
      }



      .logo {
        padding-left: 0px;
      }

        .logo img {
        width: 190px; /* ajustez selon vos besoins */
        height: auto; /* garde les proportions */
      }

      .header li {
        padding: 0;
        padding-right: 4px;
        margin: 0;
        list-style: none;
      }

      

    }