@font-face {
    font-family: 'OwnersWide-Regular';
    src: url('ressources/owners/OwnersWide-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OwnersWide-Medium';
    src: url('ressources/owners/OwnersWide-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OwnersXWide-Regular';
    src: url('ressources/owners/OwnersXWide-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'OwnersXWide-Medium';
    src: url('ressources/owners/OwnersXWide-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'OwnersXWide-Bold';
    src: url('ressources/owners/OwnersXWide-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

html, body {
    font-family: 'OwnersWide-Regular' , sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    width: 100%;
    /* max-width: 100vw; */
    background-color: #F9F9F9;
    font-size: 16px;
    letter-spacing: 1px; /* Ajustez la valeur pour augmenter ou diminuer l'espacement */
}

/* Quand le popup est actif, on bloque le scroll */
body.popup-open {
  overflow: hidden;
}

/* Floutage du contenu derrière */
body.popup-open #smooth-content {
  filter: blur(6px);
  pointer-events: none; /* empêche de cliquer sur le fond */
}

.container-fluid{
    --bs-gutter-x:none;
}




.epilogue {
    display: flex;
    flex-direction: column;
    align-items: center;     
    height: auto;            
    padding: 16% 4% 8% 4%;
    /* transform: translateY(18%) ; */
    margin-bottom: 2%;
    position: relative;  
    overflow: hidden;  
    background-color: #2E294E;
}


.epilogue p {
    font-size: 3rem ;
    text-align: center;
    position: relative;
    font-family: 'OwnersXWide-Regular';
    line-height: 1; /* Réduit l'espacement entre les lignes */
    margin-bottom: 6%; 
    color:#D1D3FF;

}

.epilogue span {
    font-size: 6rem ;
    text-transform: uppercase;
    font-family: 'OwnersXWide-Bold';
    margin-top: -14px;
    transition: font-family 0.3s ease; /* transition douce lors du changement de police */

}


.cta-vinyle {
    position: absolute;
    left: 8%; 
    top: 88%;
    width: auto;
    height: 1rem;
    padding: 0.8rem 0.8rem;
    transform: translateY(-50%);
    background-color: #D1D3FF;
    transition: opacity 0.3s ease-in-out;
    opacity: 1; 
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);

}
.cta-vinyle p {
    color: #2E294E;
    font-size: 0.80rem;
    font-family: 'OwnersXWide-Regular';
    line-height: 0.2;
}
/* .cta-arrow {
    position: absolute; // pour sortir de la boîte et pointer vers le vinyle//
    left: 120%;          // centré par rapport au CTA //
    bottom: 120%;        // au-dessus du CTA, ajuster pour pointer le vinyle //
    width: 150px;
    height: auto;
    transform: translateX(-50%);
    animation: bounce 1.2s infinite;
}
 */

.epilogue img.vinyle-img {
    width: 38%;          
    animation: transform 1s ease-out;
    transform: rotate(0deg);  
}

.epilogue img.rotating {
    animation: rotation 10s linear infinite;  /* Applique l'animation lorsque la classe "rotating" est ajoutée */
}



.audio-control {
    display: none; /* Caché par défaut */
    position: fixed;
    bottom: 2vh;
    left: 4vh;
    transition: transform 0.3s ease, opacity 0.3s ease;
    background-color: transparent;
    backdrop-filter: blur(8px);  /* Correction ici : enlever l'espace */
    border-radius: 50%;
    border: solid 2px #909cdb;
    z-index: 1000; /* Assurez-vous qu'il est au-dessus des autres éléments */
    padding: 6px; /* Réduit légèrement le padding */
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
}

.audio-control .arrow-container {
    width: 18px;  /* Taille réduite pour l'icône */
    height: 18px;  /* Assure que la hauteur soit proportionnelle */
}

.arrow-container img {
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease;
    vertical-align: baseline;

}

/* Lorsque l'utilisateur survole le bouton */
.audio-control:hover img {
    transform: scale(1.2); /* Augmente légèrement la taille du SVG au survol */
}






.scroll-cta{
    display: none;
}

@keyframes rotation {
    from {
        transform: rotate(0deg);  /* Point de départ de la rotation */
    }
    to {
        transform: rotate(360deg);  /* Fin de la rotation */
    }
}






/* Portfolio One page Styles */

main{
width: 100vw;
}

/* Section Couverture */

#glass-box{
    margin : 4% 4% 4% 4%;
    background: rgba(249, 249, 249, 0.08);
    backdrop-filter: blur(8px); /* Applique le flou à l'arrière-plan */
    border-radius: 20px; /* Coins arrondis pour un effet plus doux */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); /* Ombre portée pour l'effet flottant */
}

.couverture {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    padding : 6% 4% 2% 4%;
    position: relative;
}

.text-container {
    text-align: right;
    width: 100%;
    padding: 4% 0% 2% 0%; 
}

.name{
    position:absolute;
    top:4%;
    left: 0%;
    text-align: center; 
    z-index: 1; /* Assurer que le titre soit au-dessus des autres éléments */
    display: inline-block;
    width:100% ;
    margin-top: 2.5rem;
}

.name h1 {
    text-align: center; 
    font-family: 'OwnersXWide-Bold';
    font-size: 2.5rem;
    color: #2E294E;
    background-color: #D1D3FF; 
    display: inline-block;
    line-height: 0.1; 
    padding-bottom: 2rem ;
    padding-left: 2%;
    padding-right: 2%;

}

.name h1 span{
    font-family: 'OwnersXWide-Regular';
    font-size: 2.5rem;
    text-transform: uppercase;
}

.intro{
    position: relative;
    overflow: hidden;
    font-family: 'OwnersWide-Regular';
    font-size: 1rem;
    color: #555;    
}

.introduction-container{
    align-items: end;
    width: 100%;
    height: auto;
    height: 1.5rem; /* Ajustez selon votre ligne de texte */
    display: inline-block;
    overflow: hidden;
}

.introduction-container-text {
    display: inline;
    margin: 0;
}

.introduction-container-list {
    display: inline-block;
    text-align: left;
    margin: 0;
    padding: 0;
    list-style: none;
    vertical-align: top;
    animation-name: change;
    animation-duration: 8s;
    animation-iteration-count: infinite;
}

.introduction-container-list__item {
    line-height: 1.5rem;
    margin: 0;
    left: 0;
    width: 100%;
}

/* Keyframes pour les animations */
@keyframes change {
    0%, 12.66%, 100% {
        transform: translate3d(0, 0, 0);
    }
    16.66%, 29.32% {
        transform: translate3d(0, -1.5rem, 0); /* Décale de la hauteur d'une ligne */
    }
    33.32%, 45.98% {
        transform: translate3d(0, -3rem, 0);
    }
    49.98%, 62.64% {
        transform: translate3d(0, -4.5rem, 0);
    }
    66.64%, 79.3% {
        transform: translate3d(0, -3rem, 0);
    }
    83.3%, 95.96% {
        transform: translate3d(0, -1.5rem, 0);
    }
}

p.introduction {
    align-items: end;
    font-family: 'OwnersWide-Regular';
    width: 100%;
    padding-left:8% ;
    margin: 0% 0%;
    font-size: 1rem;
    color: #555;
    word-wrap: break-word;
}

.btn {
    font-family: 'OwnersXWide-Bold';
    color: #F9F9F9;
    background-color: #909cdb;
    border: none;
    margin:2%;
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
    font-weight: bold;
    transition: transform 500ms ease-in-out, background-color 300ms ease, box-shadow 300ms ease;
    border-radius: 8px; 
}

.btn:hover {
    color: #F9F9F9;
    transform: scale(1.1) rotate(2deg); /* Légèrement agrandi et pivoté */
    background-color: #2E294E; 
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.btn:active {
    transform: scale(1) rotate(0deg); /* Retour à la taille initiale sans rotation */
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.image-container {
    display: flex;
    align-items: flex-start; /* Alignement en haut */
    width: 60%;
    height: auto;
    /* padding-left: 3% ; */
    /* padding-right: 3% ; */
}

.image-container img {
    width: 100%;
    height: auto;
    border-radius: 50%;
    object-fit: cover;  /* Assurer que l'image couvre le conteneur sans déformation */
    max-width : 550px; 
}

/* Compétences */

.skills-container {
    display: flex;
    flex-direction: column; /* Organiser le titre et les logos en colonnes */
    align-items: flex-start; /* Aligner les éléments à gauche */
    width: 100%;
    overflow: hidden; /* Cache les logos hors de la zone visible */
}

.skills-container h3{
    font-family: 'OwnersXWide-Medium';
    color:#2E294E;
    text-transform: uppercase; 
    font-size: 1.5rem;
    text-align: left;  /* Assurez-vous que le titre soit aligné à gauche */
    margin-top: 2%;
    margin-bottom: 2%;
    }

.skills-slider {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px; /* Espacement entre les logos */
    animation: scroll 5s linear infinite; /* Animation défilante */

}

.skills-slider img {
    width: 6%;
    height: auto;
    object-fit: contain; /* Assure que les logos ne se déforment pas */
    transition: transform 500ms ease-in-out, background-color 300ms ease, box-shadow 300ms ease;
    animation: fade-in-out; /* Animation de fondu par logo */
}

.skills-slider img:hover {
    transform: scale(1.1); /* Slight zoom on hover */
}

#tooltip {
    z-index: 1000; /* Assurer que l'infobulle est bien au-dessus des autres éléments */
}

/* Animation du défilement horizontal */
@keyframes scroll {
    0% {
        transform: translateX(0%); /* Début hors écran à droite */
    }
    100% {
        transform: translateX(-100%); /* Fin hors écran à gauche */
    }
}

/* Animation du fondu pour chaque logo */
@keyframes fade-in-out {
    0%, 90% { 
        opacity: 0; /* Logos invisibles au début et à la fin */
    }
    10%, 80% { 
        opacity: 1; /* Logos visibles au centre du trajet */
    }
}

/* Pour que l'animation se mette en pause au survol */
.skills-slider:hover {
    animation-play-state: paused;
}

.language-skills{
    width: 100%;
    text-align: center;
}
.language-skills ul {
    margin-top: 4%;
    display: flex;
    justify-content: center; /* Centrer les langues horizontalement */
    align-items: center; /* Centrer les langues verticalement */
    gap: 30px; /* Espacement entre les langues */
    flex-wrap: wrap; /* Retour à la ligne sur petits écrans */
    font-family: 'OwnersWide-Regular';
    font-size: 0.80rem;
    list-style: none; /* Supprime les puces */
    color: #2E294E;
    text-align: center;
}

.language-skills span {
    color: #2E294E;
    font-family: 'OwnersXWide-Medium';
}

.language-skills img{
    width: 20%;
    animation: scale-up 1s ease-in-out infinite ;
    transition: transform 500ms ease-in-out;

}

.language-skills img:hover {
    animation: none; 
    transform: scale(1.2) rotate(5deg); 
}

#tooltip {
    display: none;
    position: absolute;
    background: #2E294E; /* Fond de l'infobulle */
    color: #F9F9F9; /* Couleur du texte */
    padding: 5px 10px; /* Espacement interne */
    border-radius: 5px; /* Coins arrondis */
    font-size: 0.8rem; /* Taille de la police */
    white-space: nowrap; /* Empêche le retour à la ligne */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombre douce */
    pointer-events: none; /* Empêche toute interaction avec l'infobulle */
    z-index: 1; /* Place l'infobulle au-dessus des autres éléments */
    transition: 0.4s ease; /* Animation de transition */
}


@keyframes scale-up {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1); /* Agrandir le bouton */
    }
    100% {
        transform: scale(1); /* Retour à la taille normale */
    }
}


/* Popup styling */
#popuplangue {
    display: none;
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30%;
    padding: 20px;
    background: rgba(249, 249, 249, 0.50);
    backdrop-filter: blur(8px); 
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    border-radius: 10px;
    visibility: hidden;
    opacity: 0;
    z-index: 1000;
    transition: 0.3s;
    flex-direction: column; /* Aligne les éléments verticalement */
    justify-content: center; /* Centre la vidéo verticalement */
    align-items: center; /* Centre la vidéo horizontalement */
    text-align: center; /* Centrer le texte comme le bouton */
}

#popuplangue.active {
    display: block;
    visibility: visible;
    opacity: 1;
    top: 45%;
    transition: 0.3s;

}

/* Bouton de fermeture */
button.close-popup {
    display: block;
    margin: 10px auto 0;
    padding: 10px 20px;
    background-color: #909cdb;
    border: none;
    color: white;
    font-size: 1rem;
    border-radius: 5px;
    cursor: pointer;
}

button.close-popup:hover {
    background-color: #2E294E;
}









/* Section Highlight */
.highlight {
    position:relative;
    display: block;
    text-align: center;
    background-color: #2E294E;
    padding: 2% 4%;
    padding-bottom: 18%;
    color: #F9F9F9;
    overflow: hidden;
    width: 100%;
    height: auto;
    z-index: 5;
}

.highlight-title {
    text-align: left;
    font-family: 'OwnersXWide-Medium';
    color: #F9F9F9;
    font-size: 2rem;
    margin-bottom: 2%;
}

.highlight-description{
    display: flex;
    flex-direction: column;
    align-items: center; /* Centre horizontalement */
    width: 100%;
    padding: 2% 4%;
    line-height: 1.8;
}
    
.highlight-description p{
    text-align: center;
    width: 80%;
    flex-wrap: wrap; /* Retour à la ligne sur petits écrans */
    font-family: 'OwnersWide-Regular';
    font-size: 0.80rem;
}

.highlight-slider {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;}

/* Flèches de navigation */
.arrow-main {
    position: absolute;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    top: 30%;
    transform: translateY(-50%);
    z-index: 10;
    border-radius: 50%;
    background: rgba(249, 249, 249, 0.08); /* Opacité augmentée au hover */
    transition: background 0.3s ease, opacity 0.3s ease;
}

.arrow-main:hover {
    background: rgba(249, 249, 249, 0.18); /* Opacité augmentée au hover */
}

.arrow-prev {
    left: 2vh;
    transform: scaleX(-1);
}

.arrow-next {
    right: 2vh;
}

.arrow-span {
    display: flex;
    position: absolute;
    width: 20px;
    height: 20px;
    z-index: 9;
}

.arrow-span::before,
.arrow-span::after {
    content: "";
    width: 10px;
    height: 2px;
    position: absolute;
    left: 50%;
    top: 50%;
    background:#909cdb;
    margin: -1px 0 0 -5px;
    transform-origin: 9px 50%;
}

.arrow-span::before {
    transform: rotate(-40deg);
}

.arrow-span::after {
    transform: rotate(40deg);
}

.arrow-main::before {
    content: "";
    position: absolute;
    top: -1px;
    width: inherit;
    height: inherit;

}

svg.arrow-svg {
    width: inherit;
    height: inherit; 
    color: #909cdb;
    
    stroke-dashoffset: 126;
    stroke-dasharray: 126 126 0;
    transform: rotate(0);

}

/* Animation des flèches */
.arrow-main.animate svg.arrow-svg {
    animation: strok 0.6s ease forwards 0.5s;
}

.arrow-main.animate .arrow-span {
    animation: arrow 1.2s ease forwards;
}

.arrow-main.animate .arrow-span::before {
    animation: arrowUp 1.2s ease forwards;
}

.arrow-main.animate .arrow-span::after {
    animation: arrowDown 1.2s ease forwards;
}

@keyframes strok {
    50% {
        transform: rotate(-180deg);
        stroke-dashoffset: 0;
    }
    50.1% {
        transform: rotate(-360deg);
        stroke-dashoffset: 0;
    }
    100% {
        transform: rotate(-180deg);
        stroke-dashoffset: 126;
    }
}

@keyframes arrow {
    0%, 100% {
        transform: translateX(0);
        opacity: 1;
    }
    23% {
        transform: translateX(17px);
        opacity: 1;
    }
    24%, 80% {
        transform: translateX(-22px);
        opacity: 0;
    }
    81% {
        opacity: 1;
        transform: translateX(-22px);
    }
}

@keyframes arrowUp {
    0%, 100% {
        transform: rotate(-40deg) scaleX(1);
    }
    20%, 80% {
        transform: rotate(0) scaleX(0.1);
    }
}

@keyframes arrowDown {
    0%, 100% {
        transform: rotate(40deg) scaleX(1);
    }
    20%, 80% {
        transform: rotate(0) scaleX(0.1);
    }
}


  


.slides {
    display: flex;
    overflow: hidden;
    width: 100%;
    justify-content: center;
    position: relative;
    padding : 2% 4% 2% 4%;

}

.slide {
    display: none;
    flex-direction: row;
    animation: fadeIn 1s ease-in-out;
}

.slide.active {
    display: flex;
}


.photo-container  {
    display: flex;
    align-items: center; /* Alignement en haut */
    justify-content: start;
    height: auto;
    margin-left:2%;

}


.photo-container img {
    width: 400px;
    height: 400px;
    border-radius: 50%;
    object-fit: cover;  /* Assurer que l'image couvre le conteneur sans déformation */
    max-width : 550px;
}


.content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;   
    color: #F9F9F9;
    width: 70%;
    max-height: 450px ;
    margin-left: 4% ;
}

.content h3 {
    font-family: 'OwnersXWide-Medium';
    text-align: center;
    font-size: 1.4rem;
    margin-bottom: 1rem;
    text-transform: uppercase; 
    padding : 2% 4% 4% 4%;
}

.content p{
    font-family: 'OwnersWide-Regular';
    text-align: left;
    font-size: 0.80rem;
    margin-bottom: 1rem;
    width: 100%;
    word-wrap: break-word;
    padding-right:10% ;
    width: 100%;

}

.content .btn-en-savoir-plus {
    text-align: center;
    align-self: center; /* Centre le bouton horizontalement */
    text-decoration: none;

    font-family: 'OwnersXWide-Bold';
    color: #2E294E;
    background-color: #F9F9F9;
    border: none;
    margin:2%;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 500ms ease-in-out, background-color 300ms ease, box-shadow 300ms ease;
    border-radius: 8px;  /* Ajout d'un border-radius pour des coins arrondis */
}

.content .btn-en-savoir-plus:hover {
    color: #F9F9F9;
    transform: scale(1.1) rotate(-2deg); /* Légèrement agrandi et pivoté */
    background-color: #909cdb; 
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.content .btn-en-savoir-plus:active {
    transform: scale(1) rotate(0deg); /* Retour à la taille initiale sans rotation */
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.pagination {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    padding: 0% 4% 2% 4%;
}

.dot {
    width: 10px;
    height: 10px;
    background-color: transparent; /* Fond transparent */
    border: 1px solid #F9F9F9; /* Bordure blanche */
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.dot.active {
    background-color: #F9F9F9; /* Le cercle plein pour l'élément actif */
    transform: scale(1.2); /* Zoom léger pour mettre en évidence */}

 .dot:hover {
     transform: scale(1.1); /* Effet léger au survol */
     background-color: rgba(249, 249, 249, 0.18); /* Le cercle plein pour l'élément actif */

 }

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





/* PELE MELE */

.pele-mele{
    position: relative;
    width: 100%; 
    height: 800px;
    padding: 2% 0%;
    z-index: 10;
    margin-top: -18%; /* Pour que la section empiète sur la partie highlight */
    overflow: hidden;
}


.pele-mele h2{
    font-family: 'OwnersXWide-Medium';
    color: #2E294E;
    font-size: 2rem;
    margin-bottom: 40px;
    display: none;
}



/* Ligne de transition */
.photo-transition {
    position: absolute;
    top: 10%;
    display: flex;
    align-items: center;

}

.photo-transition img {
    width: 250px;
    height: auto;
    object-fit: contain;    /* ou "cover" si tu veux remplir sans déformer */
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 0;

}



.photo-random {
    position: absolute;
    top: 50%; /* Centré verticalement par rapport au parent */
    left: 50%; /* Centré horizontalement par rapport au parent */
    transform: translate(-50%, -50%); /* Centrage parfait */
    width: 100vw;
    height: 100%;  
    min-height: 300px;
    object-fit: cover; /* Assure que l'image garde son ratio d'aspect */

    overflow: visible;
    z-index: 2;

}

.photo-random img {
    cursor: grab; /* Le curseur devient une main*/
    position: absolute;
    width: 18%; 
    height: auto; 
    min-height: 200px;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 3;
}

.photo-random img:hover {
    transform: scale(1.3); 
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.photo-random img:active {
    cursor: grabbing; /* Lorsque l'image est en train de se déplacer */
}


/* Bouton centré (derrière les photos) */
.pele-mele .btn {
    position: absolute;
    top:50%;
    left: 50%; /* Centré horizontalement */
    transform: translate(-50%, -50%);
    border: none;
    margin:0;
    cursor: pointer;
    transition: transform 500ms ease-in-out, background-color 300ms ease, box-shadow 300ms ease;
    transform-origin: center center; 
    z-index: 1; /* Sous les photos */
    pointer-events: none; /* Initialement non cliquable */
}

/* Quand le bouton est visible, il devient cliquable */
.pele-mele .btn.visible {
    pointer-events:visible; /* Le bouton devient cliquable */
}


.pele-mele .btn:hover {
    transform: translate(-50%, -50%) scale(1.1); /* Applique le scale sans déplacer le bouton */
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.pele-mele .btn:active {
    transform: translate(-50%, -50%) scale(1); /* Applique le scale sans déplacer le bouton */
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}


.cta-pele-mele {
    position: absolute;
    right: 8%; 
    top: 88%;
    width: auto;
    height: 1rem;
    padding: 0.8rem 0.8rem;
    transform: translateY(-50%);
    background-color: #D1D3FF;
    transition: opacity 0.3s ease-in-out;
    opacity: 1; 
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);

}
.cta-pele-mele p {
    color: #2E294E;
    font-size: 0.80rem;
    font-family: 'OwnersXWide-Regular';
    line-height: 0.2;

}








/* videogaphy */
.videography {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 2% 4%;
    width: 100%;
    height: auto;
    position: relative;
    background-color: #F9F9F9;
    z-index: 1;
}

.videography h2{
    justify-content: end;
    font-family: 'OwnersXWide-Medium';
    color: #2E294E;
    font-size: 2rem;
    margin-bottom: 40px;
    text-transform: uppercase;
    text-align: right;
}

.videography  iframe {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}




/* Footer */
#footer {
    background: rgba(249, 249, 249, 0.75);
    box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.25);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    width: 100%;
}
#footer .container{
    margin-left: auto;
    margin-left: auto;

}
.footer-icon {
  width:40%; /* Ajuste la taille des icônes */
}

.footer-credits {
  font-family: 'OwnersWide-Regular';
  font-size: 0.6rem;
  color: #2E294E;
  margin: 0;
}





@media (max-width: 768px) {


    html, body {
        font-family: 'OwnersWide-Regular' , sans-serif;
        margin: 0;
        padding: 0;
        background-color: #F9F9F9;
        font-size: 10px;
        letter-spacing: 1px; /* Ajustez la valeur pour augmenter ou diminuer l'espacement */
    }




    .cta-vinyle, .audio-control, audio .vinyleMusic{
        display: none;
    }

    .epilogue p {
        font-size: 2rem;  
        margin: 5% 0%;  
    }

    .epilogue span {
        font-size: 4rem;  
    }

    /* Ajuster l'image du vinyle pour le mobile */
    .epilogue img {
        width: 60%;  
        padding: 8% 0% ;
    }
    .epilogue {
        padding: 0 4%; /* Réduit l'espace interne sur les côtés */
        height: 100vh; /* L'épilogue doit prendre toute la hauteur de l'écran */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center; /* Centrer tout le contenu verticalement */
        overflow: hidden;
    }



/* Call to Action Scroll */
.scroll-cta {
    display: block;
    position: absolute;
    bottom: 8%; /* Place l'élément à 10% du bas de l'épilogue */
    transform: translateX(-50%); /* Centrer horizontalement */
    text-align: center;
    opacity: 1;
    transition: opacity 0.3s ease;
    margin:0;
    animation: textAnimation 1.5s ease-in-out infinite, scrollAnimation 1.5s ease-in-out infinite; /* Animation pour texte + flèche */

}

.scroll-cta p {
word-break: keep-all;
font-size: 1rem;
color: #D1D3FF; /* Couleur du texte */
font-family: 'OwnersXWide-Regular';
}

/* Animation de la flèche qui incite à défiler */
.scroll-cta img {
    width: 20%;
    padding: 0;
    animation: scrollAnimation 1.5s ease-in-out infinite;
}

/* Animation de la flèche pour attirer l'attention */
@keyframes scrollAnimation {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(10px);
    }
    100% {
        transform: translateY(0);
    }
}

/* Animation pour le texte */
@keyframes textAnimation {
    0% {
        opacity: 0;  /* Le texte est invisible au début */
        transform: translateY(10px); /* Déplace le texte légèrement vers le bas */
    }
    50% {
        opacity: 1; /* Le texte devient visible */
        transform: translateY(0); /* Le texte revient à sa position initiale */
    }
    100% {
        opacity: 0; /* Le texte disparaît à nouveau */
        transform: translateY(-10px); /* Déplace le texte légèrement vers le haut */
    }
}


        /* Couverture: Utilisation de flex-direction en colonne pour empiler les éléments */
    .couverture {
        flex-direction: column; /* Aligne les éléments en colonne sur mobile */
        padding: 8%; /* Ajuste les marges internes pour plus de confort */
    }

    /* Section text-container : alignement des éléments en colonne */
    .text-container {
        text-align: left; 
        width: 100%; 
        padding: 2rem 0; 
    }

    /* Titre principal : Ajuster la taille de la police et la mise en forme */
    .name h1, .name h1 span {
        font-size: 4vw; /* Réduit la taille du texte proportionnellement sur les petits écrans */
        padding-left: 0; 
        padding-right: 0; 
        margin-bottom: 8%; 
  }

    /* La présentation (intro) : Mise en forme plus simple */
    .intro {
        font-size: 0.8rem; /* Réduit la taille du texte */
        margin-bottom: 1rem; /* Marge pour éviter que le texte soit collé aux éléments suivants */
    }

    /* Texte d'introduction : Réduit la taille de la police et ajuste le padding */
    p.introduction {
        padding-left: 0;
        font-size: 1rem;
        margin: 2% 0;
    }


/* Texte d'introduction-container : Il doit être positionné au-dessus */
.introduction-container {
    display: flex;
    line-height: 1.2rem;
    height: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    align-items: start;
    overflow: hidden;

}

/* Texte spécifique à .introduction-container-text */
.introduction-container-text {
    font-size: 1rem;
    margin-bottom: 1rem;
    text-align: left; /* Ajout pour s'assurer que le texte reste à gauche */

}

.introduction-container-list {
    padding-left: 1rem; /* Ajout de marge à gauche pour un meilleur alignement de la liste */
    list-style-position: inside; /* Assure que les puces sont à l'intérieur du conteneur */
line-height: 1.2;
}


    /* Le bouton pour télécharger le CV : Agrandissement pour mieux s'adapter à l'écran */
    .btn {
        margin-left:auto;
        margin-right:auto;
        font-size: 1rem;
        padding: 0.8rem 1.5rem;
        width: auto; /* Le bouton prend toute la largeur disponible */
        margin-top: 2%;
    }

    /* Image : Adaptation de l'image pour qu'elle prenne une taille appropriée */
    .image-container {
     display: none;
    }

    /* Section compétences : Modification de la mise en forme */
    .skills-container {
        display: block; /* Affichage en bloc pour que les éléments soient empilés */
        width: 100%;
        padding: 2% 0;
    }

    .skills-container h3 {
        font-size: 1.3rem; /* Taille de police ajustée pour le titre */
        text-align: center; /* Centrer le titre */
    }

    .skills-slider img {
        width: 18%; /* Redimensionner les logos pour qu'ils soient visibles */
        height: auto;
    }

    /* Langue compétences : Alignement et espacement */
    .language-skills ul {
        flex-direction: row; /* Affiche les éléments en colonne */
        gap: 18px; /* Espacement entre les éléments */
        margin: 2% 0%; /* Espace au-dessus */
    }

    .language-skills li {
        text-align: center; /* Centre le texte des éléments */
    }

    .language-skills img {
        width: 18%; /* Ajuste la taille des icônes */
    }

    #popuplangue {
        width: 100%;
    }


.pele-mele{
    margin-top: -22%; /* Pour que la section empiète sur la partie highlight */
 height: 400px;
}

    .pele-mele .photo-random, .btn, .cta-pele-mele {
        display : none;
    }



  /*   #cursor{
        display :none;
    } */
    /* Section principale */
    .highlight {
        padding: 8% 2%;
    }

    .highlight-title {
        font-size: 1.8rem;
        text-align: center; /* Centrer le titre */
    }

    .highlight-description p {
        font-size: 0.9rem; /* Réduire la taille du texte */
        width: 100%; /* Utiliser toute la largeur disponible */
    }

    /* Slider */
    .highlight-slider {
        flex-direction: column; /* Afficher les éléments en colonne */
    }

    .slides {
        flex-direction: column;
        align-items: center; /* Centre les slides */
    }

    .slide {
        flex-direction: column; /* Réorganise en colonne pour les petits écrans */
        align-items: center;
        padding: 2%; /* Espacement autour des slides */
    }

    .photo-container {
        width: 80%; /* Réduit la largeur de l'image pour les petits écrans */
    }

    .photo-container img {
        width: 100%; /* L'image prend toute la largeur du conteneur */
        height: auto; /* Maintient le ratio de l'image */
    }

    .content {
        width: 100%; /* Utilise toute la largeur pour le contenu */
        margin: 2% 0; /* Réduit les marges */
        padding: 0; /* Supprime les marges internes inutiles */
    }

    .content h3 {
        font-size: 1.2rem; /* Réduit la taille des titres */
        text-align: center;
        margin-bottom: 1rem;
    }

    .content p {
        font-size: 0.85rem; /* Réduit la taille du texte descriptif */
        margin: 2% 4%; /* Espacement des paragraphes */
    }

    .content button {
        font-size: 0.9rem; /* Taille réduite du bouton */
        padding: 1rem 1.2rem;
    }

    /* Pagination */
    .pagination {
        gap: 0.3rem; /* Réduit l'espacement entre les points */
    }

    .dot {
        width: 8px; /* Réduit la taille des points */
        height: 8px;
    }
}