/*animation du site --------https://youtu.be/v5NJMH7NzD8?si=K5LucSZKE-TBNxsF---------------------------*/

@keyframes logo-jingle {
  0%   { font-size: 3rem; transform: translateY(40vh); }
  25%  { font-size: 3rem; transform: translateY(40vh); }
  35%  { font-size: 2rem; transform: translateY(0); }
  45%  { font-size: 2rem; transform: translateY(0); }
  55%  { font-size: 2rem; transform: translateY(0); }
  65%  { font-size: 2rem; transform: translateY(0); }
  75%  { font-size: 2rem; transform: translateY(0); }
  100% { font-size: 2rem; transform: translateY(0); }
}
@keyframes logo-jingle-mobile {
  0%   { font-size: 3rem; transform: translateX(-50%) translateY(40vh); }
  25%  { font-size: 3rem; transform: translateX(-50%) translateY(40vh); }
  35%  { font-size: 1.2rem; transform: translateX(-50%) translateY(0); }
  100% { font-size: 1.2rem; transform: translateX(-50%) translateY(0); }
}

@keyframes apparition {
  from { opacity: 0; }
  to   { opacity: 1; }
}



/*typographies-----------------------------------------------------------------------------------------*/

@font-face {
    font-family: "billa mont";
    src: url(assets/fonts/BillaMount-Regular.woff);
}
@font-face {
    font-family: "bros";
    src: url(assets/fonts/ZTBrosOskon90s-ExtraLight.woff);
}

h1{
    font-family: "billa mont";
    font-size: 2rem;
    white-space: nowrap;
    color: #cedbfe;
    flex: 1; 
    text-align: center; 
    display: inline-block; 
    animation: logo-jingle 5s ease-in-out forwards;
    transform-origin: center;
    visibility: visible;
    z-index: -1;
    position: relative;
    pointer-events: none;

}

h2{
    font-family: "billa mont";
    color: #A4B4BE;
    display: flex;
    justify-content: center;
    align-items: center;
}
h3{
    font-family: "billa mont";
    font-size: 200%;
    color:#cedbfe;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 45%;
    margin-bottom: 15%;
    position: relative;
}




h4{
    font-family: "billa mont";
    font-size: 200%;
    color:#cedbfe;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20%;
    margin-bottom: -20%;
    position: relative;
}




a{
    font-family: "bros";
    color: #cedbfe;
    font-size: larger;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    text-decoration: none;
    animation: apparition 4s ease-in-out forwards;
}
p{
    font-family: "bros";
    font-size: medium;
}

#section2 p{
    color: #ca9baa;
}
#section3 p{
    color: #e495ae;
}
#section4 p{
    color: #e495ae;
}
#section5 p{
    color: #ba5b79;
}
#section6 p{
    color: #b45e79;
}

.présentation{
    font-family: "bros";
    font-size: larger;
    color:#000;
    display: flex;
    justify-content: center;
    align-items:center;
    flex-direction: column;
}
.boiteTitre {
    display: flex;
    justify-content: space-around;
    width: 160px;
    z-index: 2;
    position: relative;
}

.boiteTitre :hover {
    color: #ca9baa;
    cursor: url(assets/img/curseursite2.png), default;
}



/*banderole ------- claude code ---------------------------------------------------------------------------*/

.banderole {
    color: #ca9baa;
    font-family: "bros";
    font-size: 23px;
    overflow: hidden;
    margin-top: -10%;
    margin-bottom: 10%;
    white-space: nowrap;
    pointer-events: none;
}

.banderole-track {
    display: inline-flex;
    animation: defilement 14s linear infinite;
}

.banderole-track span {
    white-space: nowrap;
    flex-shrink: 0;
}

@keyframes defilement {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/*design site----------------------------------------------------------------------------------------------*/
header{
    display :flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    flex-direction: row;
    margin-bottom: 10%;
}
body{
    background: linear-gradient(to bottom, #000, #b7d1e1);
    min-height: 100vh;
    cursor: url(assets/img/curseursite.png), default;
}

body > * {
    position: relative;
    z-index: 1;
}

body.loaded {
  visibility: visible;
}

/* Grain */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.15; /* intensité du grain */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
}

/* Vignette sur les côtés */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(
        ellipse 110% 200% at center,
        transparent 5%,
        rgba(0, 0, 0, 0.6) 100%
    );
}



.page-content {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.page-content.visible {
  opacity: 1;
}


#section1{
    min-height: 100vh;
    background-image:url(assets/img/lace.jpg);
    background-repeat:no-repeat;  
    background-position: center; 
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: 100vh;
    margin-top: -25%;
    position: relative;
    pointer-events: none;
}

#section1::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 500px; 
    height: 500px;
    background-image: url(assets/img/designcontour.png);
    background-size: contain;
    background-repeat: no-repeat;
    transition: 1s;
}

#section1::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 500px;
    height: 500px;
    background-image: url(assets/img/designcontour.png);
    background-size: contain;
    background-repeat: no-repeat;
    transform: translateY(-50%) scaleX(-1);
    transition: 1s;   
}

/* étoiles scroll ------- claude code ------------*/
:root {
    --rotate-star: 0deg;
}

h3:before {
    content: "";
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    width: 200px; 
    height: 300px;
    background-image: url(assets/img/etoile.png);
    background-size: contain;
    background-repeat: no-repeat;
    transform: translateY(-50%) rotate(var(--rotate-star));
    transition: none;
}

h3::after {
    content: "";
    position: absolute;
    right: 30px;
    top: 50%;
    width: 200px;
    height: 300px;
    background-image: url(assets/img/etoile.png);
    background-size: contain;
    background-repeat: no-repeat;
    transform: translateY(-50%) scaleX(-1);
    transform: translateY(-50%) scaleX(-1) rotate(var(--rotate-star));
    transition: none;
}

h4:before {
    content: "";
    position: absolute;
    left: 200px;
    top: 50%;
    transform: translateY(-50%);
    width: 200px; 
    height: 300px;
    background-image: url(assets/img/fleursfond.png);
    background-size: contain;
    background-repeat: no-repeat;
    transform: translateY(-50%) rotate(var(--rotate-star));
    transition: none;
}

h4::after {
    content: "";
    position: absolute;
    right: 200px;
    top: 50%;
    width: 200px;
    height: 300px;
    background-image: url(assets/img/fleursfond.png);
    background-size: contain;
    background-repeat: no-repeat;
    transform: translateY(-50%) scaleX(-1);
    transform: translateY(-50%) scaleX(-1) rotate(var(--rotate-star));
    transition: none;
}



/*3D carousel-----------------------*/
* {
    --ang: 0;
}

.spinner {
    transform-style: preserve-3d;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: rotateY(calc(var(--ang) * 1deg)) translateY(-12px);
    transition: all .5s ease-in-out;
}
.holder{
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 700px;
    perspective-origin: center;
    margin-top: 10%;
}



.panel{
    border-radius: 5px;
    width: 145px;
    height: 150px;
    position: absolute;
    background-size: cover;
    background-position: 50% 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10%;
}


.pagination{
    height: 44px;
    margin-top: 100px;
    text-align: center;
}
.pagination button{
    padding: 0;
    border: none;
    cursor: pointer;
    width: 44px;
    color: #000;
    background: #ca9baa;
    height: 44px;
    margin: 0 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    border-radius: 100%;
    transition: all .2s ease-in-out;
}

.pagination button:hover {
    background: #cedbfe;
    cursor: url(assets/img/curseursite2.png), default;
}
.pagination button:active {
    background: #cedbfe
}


@keyframes spin{
    0%{
        transform: rotateY(0deg);
    }
    50%{
    }
    100%{
        transform: rotateY(360deg);
    }
}

.fade{
    background: #0006;
    background: linear-gradient(90deg, rgba(0,0,0,0)0%,
    rgba(0,0,0,0.4) 30%, rgba(0,0,0,0.4) 70%, rgba(0,0,0,0)100%);
    width: 860px;
    height: 200px;
    position: absolute;
    transform: rotateY(calc(var(--ang)* -1deg)) translateZ(110px);
    transition: all .5s ease-in-out;
}
.a{
    background-image: url(assets/img/clement.jpg);
}
.b{
    background-image: url(assets/img/aylal.jpg);
}
.c{
    background-image: url(assets/img/fashionweek2.jpg);
}
.d{
    background-image: url(assets/img/flouana.jpg);
}
.e{
    background-image: url(assets/img/jambesvio.jpg);
}
.f{
    background-image: url(assets/img/fashionweek3.jpg);
}
.g{
    background-image: url(assets/img/fashionweek1.jpg);
}
.h{
    background-image: url(assets/img/piedsana.jpg);
}
.i{
    background-image: url(assets/img/lilymode.jpg);
} 
.j{
    background-image: url(assets/img/porteana.jpg);
}
.k{
    background-image: url(assets/img/rougeamy.jpg);
}
.l{
    background-image: url(assets/img/mimiface.jpg);
}
.m{
    background-image: url(assets/img/roxane.jpg);
}
.n{                    
    background-image: url(assets/img/rougelily.jpg);
}
.o{
    background-image: url(assets/img/vic&lily.jpg);
}
.p{
    background-image: url(assets/img/vio.jpg);
}

/*projets graphiques------------------------*/

.projets-wrapper {
    position: relative;
}

.projets-wrapper::after {
    content: "";
    position: absolute;
    right: -250px;
    bottom: 400px;       
    width: 3000px;     
    height: 1750px;    
    background-image: url(assets/img/pointillesfond.png);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain;
    pointer-events: none;
    z-index: 0;
    opacity: 0.2;     
}


section{
    padding: 10%;
    margin-bottom: -45%;
}


#section2{
    min-height: 100vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 10%;
}

#section3{
    min-height: 100vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 5%;
}

#section4{
    min-height: 100vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 5%;
}

#section5{
    min-height: 100vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 5%;
}

#section6{
    min-height: 100vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 5%;
}





.cartes{
    width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    animation: apparition-bottom 2s ease-out forwards;
    position: relative;
    z-index: 1;
}

img {
  width: 250px;
  border-radius: 9px;
}

.cartes img { cursor: pointer; transition: transform 1s; ;}
.cartes img:hover { transform: scale(2); cursor: url(assets/img/curseursite2.png), default; }


/* ── Carousel overlay ─-------src : claude code--------─ */
#carousel-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

#carousel-overlay.open {
  display: flex;
}

#carousel-modal {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

#c-img {
  max-width: 80vw;
  max-height: 85vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  display: block;
}

#c-caption {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-style: italic;
  font-size: 14px;
  background: rgba(0,0,0,0.4);
  padding: 4px 14px;
  border-radius: 20px;
  white-space: nowrap;
}

/* Flèches */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #ca9baa;
  border: none;
  color: #000;
  font-size: 28px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  z-index: 10;
}

.carousel-arrow:hover {
  background: #cedbfe;
  cursor: url(assets/img/curseursite2.png), default;
}

#arrow-prev { left: 24px; }
#arrow-next { right: 24px; }

/* Bouton fermer */
#carousel-close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: #ca9baa;
  border: none;
  color: #000;
  font-size: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

#carousel-close:hover {
  background: #cedbfe;
  cursor: url(assets/img/curseursite2.png), default;
}

/* Miniatures supprimées */
.carousel-thumbs { display: none; }
.carousel-nav { display: none; }




footer{
    color: #fff;
    text-align: center;
    padding: 20px 0;
    font-family: "bros";
    margin-top: 40%;
}
footer p {
  margin: 0;
  line-height: 1.4;
}

.contact{
    font-family: "bros";
    font-size: smaller;
    color: #b45e79;
}

/*adaptation pour mobile----------------------*/

@media (max-width:800px) {
    header {
        position: relative;
        height: 100px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0 15px;
        box-sizing: border-box;
        width: 100%;
  }

  .boiteTitre {
    width: auto;
    flex-shrink: 0;
  }


    h1 {
    font-size: 0.8rem;
    white-space: nowrap;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    animation: logo-jingle-mobile 5s ease-in-out forwards;
    white-space: nowrap;
    z-index: -1;
  }

  header {
    flex-direction: row;
  }
  #section1{
    margin-top: -45%;
  }

  

  #section1::before{
    background-image: none;
  }
  #section1::after{
    background-image: none;
  }



  h3::before{
    left : -100px;
    z-index: -1;
  }
    
  h3::after{
    right : -100px;
    z-index: -1;
 }


 h4::before{
    left : -100px;
    z-index: -1;
  }
    
  h4::after{
    right : -100px;
    z-index: -1;
 }

  .holder{
    margin-top: 50%;
  }
  .pagination{
    margin-bottom: 50%;
  }

     section{
        flex-direction: column;
    }
    .cartes{
        margin-bottom: 25%;
    }

    #section2{
        margin-top: 30%;
    }


    .projets-wrapper::after {
        right: -250px;
        bottom: 500px;       
        width: 1500px;     
        height: 950px;
           
    }
}