@font-face {
    font-family: 'MistralIce';
    src: url('/Font/Mistral.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }

@font-face {
    font-family: 'QualyBold';
    src: url("/Font/QualyBold.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
 }

@font-face {
    font-family: 'CarvingSoft';
    src: url("/Font/CarvingSoft-Regular.otf") format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Styles généraux */
body {
    font-family: 'CarvingSoft', sans-serif;
    margin: 0;
    padding: 0;
    color: white;
    background-color: #121212;
}

/* -------------------- PAGE INDEX -------------------- */

/* Section rocket */
.rocket {
    text-align: center;
    padding: 50px 0px;
    background: url('/Image/FondReve.png') no-repeat center center; /* Image d'arrière-plan */
    background-size: cover; /* Permet à l'image de couvrir toute la section */
    background-attachment: scroll; /* Défilement normal pour un léger effet de parallaxe */
    position: relative;
    min-height: 100vh; /* S'assure que la section a une hauteur minimale */
    z-index: 2;
}

.rocket h1 {
    margin-top: 15vh;
    margin-left: -40vw;
    font-size: 4em;
    line-height: 1.2;
    font-family: 'MistralIce', sans-serif;
    font-weight: normal;
    color: #fff;
    text-shadow: 2px 2px 5px #000;
    text-transform: uppercase; /* Met tout en majuscules */
}


/* Section Infographie et Motion Design */
.design-section {
    background-color: #151319;
    padding: 0 5vw;
    text-align: center;
    z-index: 3;
    display: flex;  
    flex-direction: row;
}

.design-section h2 {
    font-size: 4em;
    color: #a684ff;
    text-transform: uppercase;
    margin-bottom: 20px;
    font-family: 'MistralIce', sans-serif;
    font-weight: normal;
}

.design-content-left {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    width: 60vw
}

.design-content-right {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
}

.design-content-right img {
    width: 30vw;
    border-radius: 50%;
}

.design-content-left p {
    line-height: 1.6;
    font-size: 1em;
    text-align: left;
}

.btn-realisation {
    padding: 2vh 2vw;
    background-color: transparent;
    border: 2px solid #a684ff;
    border-radius: 2em;
    color: #a684ff;
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s;
    font-family: 'MistralIce', sans-serif;
    font-weight: normal;
    font-size: 2em;
    text-transform: uppercase;
    cursor: pointer;
}

.btn-service:hover {
    background-color: #a684ff;
    color: white;
}

/* Section Service */
.services {
    z-index: 3;
    display: flex;
    flex-direction: column; /* Pour empiler les vagues et le contenu */
    align-items: center; /* Centrer horizontalement le contenu */
    padding: 0 2rem; /* Padding pour l'espacement */
    background-color: #151319;
    position: relative; /* Nécessaire pour le positionnement absolu des vagues */
}

.wave-bot, .wave-top {
    width: 100%;
    height: auto;
}

.wave-bot{
    position: absolute;
    top:0;
}

.wave-top{
    position: absolute;
    bottom: -1vh;
}

.service-wrapper {
    display: flex; /* Utiliser flexbox pour les cartes */
    justify-content: space-around; /* Espacement entre les cartes */
    width: 100%; /* Prendre toute la largeur de la section */
    position: relative; /* Pour que le texte soit devant les vagues */
    z-index: 1; /* S'assurer que le contenu est devant les vagues */
    padding: 0 0 10vh 0;
}

.service-card {
    text-align: center;
    padding: 1vh 4vw; /* Garder les proportions */
    border-radius: 0.625rem; /* Garder les bords arrondis */
    width: auto; /* Largeur des cartes */
}

.service-card h3 {
    font-family: 'QualyBold', sans-serif; /* Applique la police ici */
    font-size: 2em; /* Ajuste la taille de la police */
    color: #a684ff;
}

.service-icon {
    width: 8rem; /* Largeur du cercle */
    height: 8rem; /* Hauteur du cercle */
    background-color: #a46df2; /* Couleur de fond */
    border-radius: 50%; /* Forme circulaire */
    margin: 0 auto 1.25rem; /* Espacement entre l'icône et le texte */
}

.service-icon img{
    width:100%;
    height: auto;

}

.service-wrapper p{
    text-align: center;
}

.service-icon {
    position: relative;
    width: 8rem;
    height: 8rem;
    margin: 0 auto;
}

.service-icon img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;  /* Toutes les images prennent la même taille que le conteneur */
    height: auto;
}



/* Image de transition entre les sections */

.transition-image {
    background: url('/Image/JinxRecall.png') no-repeat center center; /* Image d'arrière-plan */
    background-size: 100% auto;
    background-attachment: scroll; /* Défilement normal pour un léger effet de parallaxe */
    position: relative;
    min-height: 160vh; /* S'assure que la section a une hauteur minimale */
    width:100%;
    z-index: 1;
}



/* -------------------- PAGE CONTACT -------------------- */

.IceMountains {
    text-align: center;
    padding: 50px 0px;
    background: url('/Image/IceMountain.png') no-repeat center center; /* Image d'arrière-plan */
    background-size: cover; /* Permet à l'image de couvrir toute la section */
    background-attachment: scroll; /* Défilement normal pour un léger effet de parallaxe */
    position: relative;
    min-height: 100vh; /* S'assure que la section a une hauteur minimale */
    width:100%;
    z-index: 2;
}

.IceMountains h1 {
    position: absolute;
    top: 15vh;
    left: 5vw;
    font-size: 4em;
    line-height: 1.2;
    font-family: 'MistralIce', sans-serif;
    font-weight: normal;
    color: #fff;
    text-shadow: 2px 2px 5px #000;
    text-transform: uppercase; /* Met tout en majuscules */
}

/* Section Contact */

.Contact-section h2{
    font-size: 4.5em;
    color: #a684ff;
    text-transform: uppercase;
    margin: 0 0 1vh 0;
    font-family: 'MistralIce', sans-serif;
    font-weight: normal;
}

.Contact-section h3{
    font-size: 2.5em;
    color: #ffffff;
    text-transform: uppercase;
    margin: 0 0 1vh 0;
    font-family: 'MistralIce', sans-serif;
    font-weight: normal;
}

.Contact-section {
    display: flex;
    flex-direction: column; /* Aligne les enfants verticalement */
    align-items: center; /* Centre les enfants horizontalement */
    justify-content: center; /* Centre les enfants verticalement */
    background-color: #151319;

}

.Contact {
    display: flex; /* Active le flexbox pour les enfants de .Contact */
    flex-direction: row; /* Aligne les enfants horizontalement */
    align-items: center; /* Centre les enfants de .Contact verticalement */
    margin: 0vw 5vw;
}

.Contact img{
    width:35vw;
    height:auto;


}

.Contact .rgpd{
    font-size: 0.7em;
    margin-top: -3vh;
}

.Contact form{
    display: flex; /* Active le flexbox pour les enfants de .Contact */
    flex-direction: column; /* Aligne les enfants horizontalement */
    align-items: center; /* Centre les enfants de .Contact verticalement */
    padding: 1em 0 0 0;
}

.Contact form label{
    margin: 1em 0 0.25em 0;
}

.Contact form input{
    height:3em;
}

.Contact form input, .Contact form textarea{
    width:100%;
}

.Contact form button{
    margin : 2em;
}



/* -------------------- PAGE Realisation -------------------- */

.DragonSleep {
    text-align: center;
    padding: 50px 0px;
    background: url('/Image/DragonSleeping.png') no-repeat center center; /* Image d'arrière-plan */
    background-size: cover; /* Permet à l'image de couvrir toute la section */
    background-attachment: scroll; /* Défilement normal pour un léger effet de parallaxe */
    position: relative;
    min-height: 110vh; /* S'assure que la section a une hauteur minimale */
    width:100%;
    z-index: 2;
}

.DragonSleep h1 {
    margin-top: 12vh;
    margin-left: 45vw;
    font-size: 4em;
    line-height: 1.2;
    font-family: 'MistralIce', sans-serif;
    font-weight: normal;
    color: #ffffff;
    text-shadow: 2px 2px 5px #000000;
    text-transform: uppercase; /* Met tout en majuscules */
}

/* Section Realisation */

.Realisation-section {
    display: flex; /* Met en display flex pour tous les enfants */
    flex-direction: column; /* Aligne les enfants en colonne */
    align-items: center; /* Centre les enfants horizontalement */
    padding: 20px; /* Ajoute un peu d'espace intérieur */
    background-color: #151319;
}

.Realisation-content {
    width: 100%; /* Assure que le contenu prend toute la largeur */
    height:auto;
}

.Realisation-content h2 {
    font-size: 4em; /* Définit la taille de la police */
    color: #ffffff; /* Définit la couleur */
    font-family: 'QualyBold', sans-serif;
    text-align: center; /* Centre le texte */
    margin-bottom: 5vh; /* Ajoute de l'espace en bas */
    text-transform: uppercase; /* Transforme le texte en majuscules */
}

.Realisation-wrapper {
    display: flex; /* Affiche les enfants de Realisation-wrapper côte à côte */
    justify-content: space-around; /* Espace entre les éléments */
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne si nécessaire */
    width: 100%; /* Prend toute la largeur disponible */
}



.Realisation-wrapper div {
    width: 20vw; /* Largeur de chaque div */
    height: 20vw; /* Hauteur de chaque div */
    margin: 2vw; /* Un peu d'espace autour des divs */
    display: flex; /* Utilise Flexbox pour centrer les enfants */
    flex-direction: column; /* Aligne les enfants verticalement */
    align-items: center; /* Centre horizontalement les enfants */
    margin-bottom: 5vh;
    transition: all 0.4s ease-in-out; /* Transition sur toutes les propriétés */

}

.Realisation-wrapper img {
    position:relative;
    width: 15vw; /* Largeur de chaque image */
    height: 15vw; /* Hauteur de chaque image */
    border-radius: 10px; /* Bords arrondis pour les images */
    object-fit: cover; /* Permet de maintenir le ratio de l'image */
    background-color: #a684ff; /* Fond violet */
    border-radius: 15px; /* Bords arrondis */
    padding:2px;
    transition: all 0.4s ease-in-out; /* Transition sur toutes les propriétés */
    z-index: 4;
    min-width: 16vw;
}


.Realisation-wrapper img:hover {
    transform: scale(1.1);
    width: auto; /* Ajuste la largeur automatiquement */
    z-index : 5;
    cursor: pointer;
}

.Realisation-wrapper div p {
    font-size: 1.2em;
}

.RealisationShowreel {
    display: flex;
    flex-direction: column; /* Aligne les enfants en colonne */
    align-items: center; /* Centre horizontalement */
    text-align: center; /* Centre le texte */
}

.RealisationShowreel video{
    max-width: 100%; /* S'assure que la vidéo ne dépasse pas la largeur de son conteneur */
     /* Ajuste la hauteur automatiquement pour maintenir le ratio */
}

.RealisationShowreel h3 {
    margin-bottom: 10vh; /* Ajoute un espace entre le texte et la vidéo */
    font-size: 3em; /* Ajuste la taille du texte selon vos besoins */
    color: #ffffff; /* Couleur du texte */
    font-family: 'QualyBold', sans-serif;
}


/* Pour s'assurer que la vidéo s'adapte correctement */
.RealisationShowreel iframe {
    border: 5px solid #a684ff; /* Bordure de couleur personnalisée */
    position: absolute; /* Positionne la vidéo */
    top: 0;
    left: 0;
    width: 100%; /* Prend toute la largeur */
    height: 100%; /* Prend toute la hauteur */
}


/* MODALE */

.modal {
    display: none; /* Caché par défaut */
    position: fixed; 
    z-index: 1000; 
    left: 0; 
    top: 0; 
    width: 100%; /* Prendre toute la largeur */
    height: 100%; /* Prendre toute la hauteur */
    background-color: rgba(21, 19, 25, 0.90);
}

.modal.show {
    display: flex; /* Afficher la modale */
    opacity: 1; 
    transition: all 0.5s ease-in-out; 
}

.modal-content {
    position: absolute;
    left: 10vw; 
    top: 12vh;
    max-width: 80vw;
    max-height: 85vh;
    background-color: rgba(21, 19, 25, 0.90);
    overflow-y: auto; /* Permet le défilement du contenu */
    padding: 0em; /* Padding en em pour être relatif à la taille du texte */
    box-sizing: border-box;
    border: 2px solid white; 
    border-radius: 1em; 
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease, transform 0.5s ease; /* Ajout de la transition */
    opacity: 0; 
    transform: scale(0); 
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-content p {
    padding: 1vh 1vw;
}




/* Centrer le titre */
.modal-content h3 {
    text-align: center; /* Centrer le titre */
    font-size: 2em; /* Ajuster la taille du titre en em */
    margin-bottom: 1vh; /* Espacement sous le titre en vh */
    font-family: 'QualyBold', sans-serif;
    margin-top: 2vh;
}


/* Bouton de fermeture */
.close {
    color: #ffffff;
    position: absolute; /* Positionne la croix relativement à la modale */
    top: -1vh; /* Ajuste la position par rapport au haut */
    right: 1vw; /* Ajuste la position par rapport à la droite */
    font-size: 3em;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* -------  TILIA ---------- */


/* Limiter la hauteur de la modale pour Tilia */
#tilia .modal-content {
    overflow-y: auto;
    box-sizing: border-box;
    margin : 0vh 0vw;
    padding: 0.2vh 1vw;
}

#tilia h3{
    margin-top: 1vh;
}

/* Alignement de la première section : texte à gauche, image à droite */
#tilia .first-section {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 1vh;
}

#tilia p{
    width:45vw;
    font-size: 1.1em;
}

/* Style de l'image de la première section */
#tilia .first-section img {
    width: 12vw; /* Réduire la largeur en vw */
    height: auto;
}

/* Deuxième section : image à gauche, texte à droite */
#tilia .second-section {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 1vh;
}

#tilia .second-section p{
    text-align: right;
}

/* Style de l'image de la deuxième section */
#tilia .second-section img {
    max-width: 12vw; /* Réduire la largeur en vw */
    height: auto;
}

/* Troisième section : images alignées côte à côte */
#tilia .third-section {
    display: flex;
    justify-content: center; /* Centre les images */
    gap: 0; /* Aucune espace entre les images */
}

#tilia .third-section img {
    width: 7vw; /* Largeur de chaque image */
    height: auto;
    border-radius: 1em;
    margin: 0; /* Retire les marges autour des images */
    padding: 0.5vw; /* Retire tout padding éventuel */
}

/* Pour que le contenu de la modale ne dépasse pas */
#tilia .modal {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
}


#tilia img{
    border-radius: 10px;
}


/* FAN LIVE  */

#fanlive .modal-content {
    padding: 2vw;
}


#fanlive .fanlive-description {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2vh;
}

#fanlive .fanlive-description img {
    width: 15vw; /* Ajuste la taille de l'image */
    height: auto;
    border-radius: 1em;
}

#fanlive .fanlive-videos {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

#fanlive .fanlive-videos video {
    width: 15vw;
    height: auto;
    border-radius: 1em;
}

#fanlive .fanlive-videos p {
    text-align: center;
    font-size: 1em;
    width: 40vw;
}


/* ARCANE  - WHAT COULD HAVE BEEN */


#arcane .arcane-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 1vh 1vw;
}

#arcane .arcane-text {
    width: 30vw; /* Largeur du texte */
    font-size: 1em;
    color: #fff;
}

#arcane video {
    width: 40vw; /* Largeur de la vidéo */
    height: auto;
    border-radius: 1em;
}

/* Mission Locale */

#missionlocale .missionlocale-content {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 4vh 2vw;
}

#missionlocale img {
    width: auto; /* Largeur de l'image */
    height: 60vh; /* Hauteur de l'image en fonction de la taille de la page */
    object-fit: cover;
    border-radius: 1em;
}

#missionlocale .missionlocale-text {
    width: 40vw; /* Largeur de la section texte */
    color: #fff;
}

#missionlocale p {
    font-size: 1em;
    line-height: 1.5em;
    margin-bottom: 2vh;
}




/*    YCH FURRY   */


.ych-container {
    display: flex;
    justify-content: space-between; /* Espace entre les colonnes */
    align-items: center; /* Centrer verticalement les colonnes */
    max-width: 80vw; /* Limite de largeur du conteneur */
    margin: 0 auto; /* Centre le conteneur */
}

.ych-videos-column {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centre horizontalement les vidéos */
    gap: 1vw; /* Espacement entre les vidéos */
    margin: 0 0.5vw
}

.ych-videos-column video {
    width: auto; /* Prend la largeur du conteneur */
    height: 28vh; /* Hauteur fixe pour les vidéos */
}

/* Style pour les colonnes */
.ych-videos-column:nth-child(1) video {
    margin: auto; /* Centre la vidéo dans la première colonne */
}


.ych-videos-column:nth-child(3) {
    width: 30vw; /* Largeur du texte */
    text-align: center; /* Centrer le texte */
}



.ych-videos-column:nth-child(5) video {
    margin: auto; /* Centre la vidéo dans la dernière colonne */
}

.ych-text {
    width: 30vw; /* Largeur du texte */
    text-align: center; /* Centrer le texte */
    font-size: 1em;
    color: #fff;
}





/* THEATRE LE VIEUX SAGE */

#theatre .modal-content {
    padding: 0 1vw 1vh 1vw; /* Espacement au bas de la modale */
    margin: 1vh 1vw 1vh 1vw; /* Espacement au bas de la modale */
}

.theatre-top {
    display: flex;
    align-items: center; /* Centre les éléments verticalement */
    justify-content: center; /* Centre les éléments horizontalement */
    gap: 1em; /* Espace entre les éléments */
    margin-bottom: 1em; /* Espacement sous la section supérieure */
}

.theatre-top img {
    width: auto; /* Limite la largeur des images */
    height: 35vh; /* Garde les proportions */
    border-radius: 0.5em; /* Arrondir les bords des images */
}

.theatre-text {
    width: 30vw; /* Ajuste la largeur du texte */
    text-align: center; /* Centre le texte */
    font-size: 1em;
    color: #fff;
}

.theatre-bottom {
    display: flex;
    justify-content: space-around; /* Espace autour des images */
    width: 100%; /* Prend toute la largeur du conteneur */
    margin-bottom: 1vh;
}

.theatre-bottom img {
    width: auto; /* Limite la largeur des images */
    height: 35vh; /* Garde les proportions */
    border-radius: 0.5em; /* Arrondir les bords des images */
    padding: 0.2vh 0.2vw;
}



/* SLEEPY */

#sleepy .modal-content {
    padding: 0 1vw 1vh 1vw; /* Espacement au bas de la modale */
    margin: 1vh 1vw 1vh 1vw; /* Espacement au bas de la modale */
}

.sleepy-section {
    display: flex;
    align-items: center; /* Centre les éléments verticalement */
    justify-content: space-around; /* Espace autour des éléments */
    width: 100%; /* Prend toute la largeur du conteneur */
    padding-bottom: 2vh; /* Espacement sous la section */
}

.sleepy-section video {
    width : 22vw;
    height: auto; /* Garde les proportions */
    border-radius: 0.5em; /* Arrondir les bords des vidéos */
}

.sleepy-text {
    width: 50vw; /* Ajuste la largeur du texte */
    text-align: center; /* Centre le texte */
    font-size: 1em;
    color: #fff;
}

.sleepy-bottom {
    display: flex;
    justify-content: space-around; /* Espace autour des éléments */
    width: 100%; /* Prend toute la largeur du conteneur */
}

.sleepy-bottom img {
    width: 25vw; /* Limite la largeur de l'image */
    height: auto; /* Garde les proportions */
    border-radius: 0.5em; /* Arrondir les bords de l'image */
}

.sleepy-bottom video {
    width: 25vw; /* Limite la largeur des vidéos */
    height: auto; /* Garde les proportions */
}

/* Powtow */

#powtow .modal-content {
    padding: 0 1vw 1vh 1vw; /* Espacement au bas de la modale */
    margin: 1vh 1vw 1vh 1vw; /* Espacement au bas de la modale */
}

.powtow-section {
    display: flex;
    align-items: center; /* Centre les éléments verticalement */
    justify-content: space-around; /* Espace autour des éléments */
    width: 100%; /* Prend toute la largeur du conteneur */
    padding-bottom: 2vh; /* Espacement sous la section */
}

.powtow-section img {
    width: 22vw; /* Ajuste la largeur des images */
    height: auto; /* Garde les proportions */
    border-radius: 0.5em; /* Arrondir les bords des images */
}

.powtow-text {
    width: 50vw; /* Ajuste la largeur du texte */
    text-align: center; /* Centre le texte */
    font-size: 1em;
    color: #fff;
}

.powtow-bottom {
    display: flex;
    justify-content: space-around; /* Espace autour des éléments */
    width: 100%; /* Prend toute la largeur du conteneur */
}

.powtow-bottom img {
    width: 30vw; /* Limite la largeur de l'image */
    height: auto; /* Garde les proportions */
    border-radius: 0.5em; /* Arrondir les bords de l'image */
}



/* ----- ANIMATION APPARITION ----- */



/* -----------------------  ANIMATION POUR INDEX   ----------------------   */ 

/* Animation pour Animation 3D */

@keyframes animation-3d-animation {
    0% { transform: rotateZ(0); opacity: 0; }
    100% { transform: rotateZ(360deg); opacity: 1; }
}

.service-icon.animation-3d img {
    opacity: 0;
    transform: rotateZ(0);
}

.service-icon.animation-3d.animate img {
    animation: animation-3d-animation 2s ease-out forwards;
}

/* Animation pour Logo Infographie */

@keyframes infographie-part1-animation {
    0% { transform: translateX(-50px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

@keyframes infographie-part2-animation {
    0% { transform: translateX(50px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

.service-icon.infographie .part1 {
    opacity: 0;
    transform: translateX(-50px);
}

.service-icon.infographie.animate .part1 {
    animation: infographie-part1-animation 1s ease-out forwards;
}

.service-icon.infographie .part2 {
    opacity: 0;
    transform: translateX(50px);
}

.service-icon.infographie.animate .part2 {
    animation: infographie-part2-animation 1s ease-out forwards;
    animation-delay: 0.7s;
}

/* Animation pour Motion Design */

/* Animation pour LogoMotionDesign */
@keyframes motion-design-part1-animation {
    0% { transform: translateY(10px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

.service-icon.motion-design .part1 {
    opacity: 0;
    transform: translateY(10px);
}

.service-icon.motion-design.animate .part1 {
    animation: motion-design-part1-animation 0.2s ease-out forwards;
    animation-delay: 0.2s;
}


@keyframes motion-design-part2-animation {
    0% { transform: translateY(10px);  opacity: 0; }
    100% {transform: translateY(0px); opacity: 1; }
}

.service-icon.motion-design .part2 {
    opacity: 0;
    transform: translateY(10px);
}

.service-icon.motion-design.animate .part2 {
    animation: motion-design-part2-animation 0.2s ease-out forwards;
    animation-delay: 0.4s;
}

@keyframes motion-design-part3-animation {
    0% { transform: translateY(10px);  opacity: 0; }
    100% {transform: translateY(0px); opacity: 1; }
}

.service-icon.motion-design .part3 {
    opacity: 0;
    transform: translateY(10px);
}

.service-icon.motion-design.animate .part3 {
    animation: motion-design-part3-animation 0.2s ease-out forwards;
    animation-delay: 0.6s;
}


@keyframes motion-design-part4-animation {
    0% { transform: translateX(-10px);  opacity: 0; }
    100% {transform: translateX(0px); opacity: 1; }
}


.service-icon.motion-design .part4 {
    opacity: 0;
    transform: translateX(10px);
}

.service-icon.motion-design.animate .part4 {
    animation: motion-design-part4-animation 0.2s ease-out forwards;
    animation-delay: 0.8s;
}


@keyframes motion-design-part5-animation {
    0% { transform: translateX(-10px);  opacity: 0; }
    100% {transform: translateX(0px); opacity: 1; }
}

.service-icon.motion-design .part5 {
    opacity: 0;
    transform: translateX(10px);
}

.service-icon.motion-design.animate .part5 {
    animation: motion-design-part5-animation 0.2s ease-out forwards;
    animation-delay: 1s;
}

@keyframes motion-design-part6-animation {
    0% { transform: translateY(-10px);  opacity: 0; }
    100% {transform: translateX(0px); opacity: 1; }
}

.service-icon.motion-design .part6 {
    opacity: 0;
    transform: translateY(10px);
}

.service-icon.motion-design.animate .part6 {
    animation: motion-design-part6-animation 0.2s ease-out forwards;
    animation-delay: 1.2s;
}

@keyframes motion-design-part7-animation {
    0% { transform: translateY(-10px);  opacity: 0; }
    100% {transform: translateY(0px); opacity: 1; }
}

.service-icon.motion-design .part7 {
    opacity: 0;
    transform: translateY(10px);
}

.service-icon.motion-design.animate .part7 {
    animation: motion-design-part7-animation 0.2s ease-out forwards;
    animation-delay: 1.4s;
}

@keyframes motion-design-part8-animation {
    0% { transform: translateY(-10px);  opacity: 0; }
    100% {transform: translateY(0px); opacity: 1; }
}

.service-icon.motion-design .part8 {
    opacity: 0;
    transform: translateY(10px);
}

.service-icon.motion-design.animate .part8 {
    animation: motion-design-part8-animation 0.2s ease-out forwards;
    animation-delay: 1.6s;
}


/* Animation pour faire apparaître le texte */
@keyframes fade-in-up {
    0% {
        opacity: 0;
        transform: translateY(-20px); /* Déplacement initial vers le bas */
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* Position finale */
    }
}

/* Classe pour appliquer l'animation au texte */
.text-to-animate {
    opacity: 0; /* Initialement caché */
    animation: fade-in-up 1.5s ease forwards; /* Appliquer l'animation */
}


/* Animation pour Design Section */ 

/* Animation pour le titre (h2) */
@keyframes slide-in-left {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Classe pour le titre */
#HideTitle {
    opacity: 0; /* Initialement caché */
}

@keyframes slide-up {
    0% {
        opacity: 0; 
        transform: translateY(50px); /* Déplacement initial depuis le bas */
    }
    100% {
        opacity: 1; 
        transform: translateY(0); /* Position finale */
    }
}

/* Ajoutez une classe pour appliquer l'animation */
.slide-up {
    animation: slide-up 1.5s ease-out forwards; /* Durée et type d'animation */
    
}



/* ANIMATION POUR REALISATION */

.Realisation-wrapper .Tilia, .FanLive, .Arcane, .Sleepy, .MissionLocale, .ychFur, .Theatre, .Powtow {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

  
.Realisation-wrapper .visible {
opacity: 1;
transform: translateX(0);
}
  

.RealisationShowreel {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.RealisationShowreel.visible {
    opacity: 1;
    transform: translateX(0);
}




/* ------  RESPONSIVE  -----  */ 



@media (max-width: 1000px) { /* Ajuste la largeur maximale si besoin */
    /* Cible les enfants de .design-section */
    .design-section {
        display: flex;
        flex-direction: column;
        align-items: center; /* Centrer le contenu si nécessaire */
    }

    .design-content-left,
    .design-content-right {
        width: 100%; /* Prendre toute la largeur */
        margin: 10px 0; /* Espacement entre les éléments */
        text-align: center; /* Centrer le texte pour les petits écrans */
    }

    /* Cible les enfants de .service-wrapper */
    .service-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .service-card {
        width: 100%;
        margin: 10px 0; /* Espacement entre les cartes */
    }

    /* Centrer le h1 dans .rocket-content */
    .rocket-content, .DragonSleep {
        display: flex;
        justify-content: center; /* Centre horizontalement */
        align-items: center; /* Centre verticalement */
        height: 100vh; /* Assure que la section prend toute la hauteur de la vue */
        text-align: center; /* Centre le texte lui-même */
    }
    
    .rocket-content h1, .DragonSleep h1, .IceMountains h1 {
        margin : auto;
        font-size: 7vw;
    }

    .Realisation-wrapper div {
        width: 40vw; /* Largeur de chaque div */
        height: 40vw; /* Hauteur de chaque div */
   
    }

    .Realisation-wrapper img {
        position:relative;
        width: 35vw; /* Largeur de chaque image */
        height: 35vw; /* Hauteur de chaque image */
        border-radius: 10px; /* Bords arrondis pour les images */
        object-fit: cover; /* Permet de maintenir le ratio de l'image */
        background-color: #a684ff; /* Fond violet */
        border-radius: 15px; /* Bords arrondis */

    }

    .Realisation-wrapper div p{
        font-size: 1em;
    }

    .Realisation-content h2, .RealisationShowreel h3, .design-section h2, .Contact-section h3{
        font-size: 2em;
    }

    .RealisationShowreel video{
        max-width: 90%;
        border-radius: 1em;
    }

    .Contact{
        flex-direction: column;
    }

    .Contact img, .design-content-right img{
        width:55vw;
    }
    
    .ych-videos-column video{
        height:15vh;
    }

    .theatre-bottom img{
        height:20vh;
    }

    .transition-image{
        min-height: 0vh;
        background-size: auto;


    }


    .modal-content {
        display: flex;
        flex-direction: column; /* Aligne les enfants en colonne */
        align-items: center; /* Centre horizontalement */
        justify-content: flex-start; /* Aligne les enfants en haut */
        padding: 10px; /* Ajoute un peu d'espace */
        overflow-y: auto; /* Permet le défilement vertical */
        height: 90vh; /* S'assure que la hauteur est limitée à l'écran */
        width: 90%; /* Ajuste la largeur */
        left: 5vw; /* Centré horizontalement */
        top: 5vh; /* Centré verticalement */
    }

    .modal-content h3, .modal-content p, .modal-content img, .modal-content video {
        margin-bottom: 1em; /* Ajoute un espacement entre les éléments */
        width: 100%; /* Prend toute la largeur pour les petits écrans */
        text-align: center; /* Centre le texte */
    }

    .modal-content img, .modal-content video {
        height: auto; /* Conserve le ratio des images/vidéos */
        max-width: 100%; /* Ne dépasse pas la largeur disponible */
    }

    #tilia .first-section, #tilia .second-section{
        flex-direction: column;

    }

    #tilia .first-section p, #tilia .second-section p{
        width:85%;
        text-align:center;
        
    }

    #tilia .first-section img, #tilia .second-section img{
        width:55%;
        max-width:55%;
        
    }

    #tilia .third-section img{
        width:20%;
    }

    #fanlive .fanlive-description, .fanlive-videos{
        flex-direction: column;
    }

    .fanlive-videos,#fanlive .fanlive-videos p{
        width:90%;
    }

    #fanlive .fanlive-description img, #fanlive .fanlive-videos video{
        width:70%;
    }

    #arcane .arcane-content{
        flex-direction: column;
    }

    #arcane .arcane-content p,#arcane .arcane-content video {
        width:80%;
    }

    #sleepy, #sleepy .sleepy-section, #sleepy .sleepy-bottom{
        flex-direction: column;
    }

    #sleepy .sleepy-section video, #sleepy .sleepy-section .sleepy-text, .sleepy-bottom video, .sleepy-bottom img{
        width:80%;
        margin:auto;
    }

    #missionlocale .modal-content .missionlocale-content{
        flex-direction: column;
    }

    #missionlocale .modal-content .missionlocale-content .missionlocale-text{
        width:80%;
    }

    #missionlocale img{
        width:90%;
        height:auto;
    }

    .ych-container{
        flex-direction: column;
    }

    .ych-videos-column{
        flex-direction: row;
    }

    .ych-videos-column video{
        width:50%;
    }

    .ych-text{
        width:80%;
    }

    .theatre-top{
        flex-direction: column;
    }

    .theatre-top img,.theatre-bottom img{
        width:45%;
    }

    .theatre-text{
        width:80%;
    }

    .theatre-bottom{
        flex-wrap: wrap;
    }

    .powtow-section{
        flex-direction: column;
    }

    .powtow-bottom{
        flex-wrap: wrap;
    }

    .powtow-section .powtow-text{
        width:80%;
    }
}