@charset "utf-8";
/* CSS Document */
/* Animation images & texte */
a.ex1,
a.ex2,
a.ex3,
a.ex4 {
    transition:
        transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        filter 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, filter;
}
a.ex1:hover { filter: grayscale(100%); }
a.ex2:hover { filter: sepia(60%); }
a.ex3:hover { filter: invert(75%); }
a.ex4:hover { transform: scale(1.08); }

/* FIN Fade IN */  



/* Texte surligné en jaune */
.surligneur {
    background-color: rgba(255, 235, 59, 0.8);
    color: #111;
    padding: 0 .15em;
    border-radius: 3px;
}
/* FIN - Texte surligné en jaune */
/* Texte flou */
.blurryText {
    display: inline-block;
    filter: blur(3px);
    opacity: 0.7;
    transition:
        filter 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.4s ease;
    will-change: filter;
}

.blurryText:hover {
    filter: blur(0);
    opacity: 1;
}

/* Fade sur image ou texte */
.fade-in-image {
    opacity: 1;
    animation-name: fadeInOpacityimage;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 2s;
}

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

.fade-in-text {
    opacity: 1;
    animation-name: fadeInOpacitytext;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 2s;
}

@keyframes fadeInOpacitytext {
    0% {
        opacity: .25;
    }
    100% {
        opacity: 1;
    }
}

/* FIN - Fade sur image ou texte */

/* Zoom arrière sur image */
.shrink {
    transition:
        transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
}

.shrink:hover {
    transform: scale(0.97);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
/* FIN Zoom arrière sur image */

/*Shrink rotate*/
.shrink_rotate {
    transition:
        transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        filter 0.35s ease;
    transform-origin: center;
    will-change: transform;
}

.shrink_rotate:hover {
    transform: rotate(12deg) scale(0.92);
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.15));
}
/*FIN - Shrink rotate*/

/* Zoom avant sur image */
.zoom {
    transition:
        transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        filter 0.35s ease;
    transform-origin: center;
    will-change: transform;
}

.zoom:hover {
    transform: scale(1.08);
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.15));
}
/* Zoom avant sur image avec ombrage */
.zoom1 {
    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.4s ease;
    will-change: transform;
}

.zoom1:hover {
    transform: scale(1.06) translateY(-6px);
    box-shadow:
        0 10px 15px rgba(0, 0, 0, 0.08),
        0 20px 40px rgba(0, 0, 0, 0.12);
}


/* Flou d'une image */
.blur {
    transition:
        filter 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: filter;
}

.blur:hover {
    filter: blur(2px) saturate(85%);
}
/* FIN - Flou d'une image */

/*Image qui tourne recto/verso*/

.flip-card {
    background-color: #000000;
    width: 300px;
    height: 600px;
    perspective: 1000px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.flip-card-front {
    background-color: #000000;
    color: black;
}

.flip-card-back {
    background-color: #000000;
    color: white;
    transform: rotateY(180deg);
}


/*FIN - Image qui tourne recto/verso*/