body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    font-family: 'Raleway', sans-serif;
}

/* Personnalisation de la barre de défilement */
::-webkit-scrollbar {
    width: 10px; /* Largeur de la scrollbar */
}

/* Fond de la scrollbar */
::-webkit-scrollbar-track {
    background: #1e1e1e; /* Par défaut sombre */
}

/* Curseur de la scrollbar */
::-webkit-scrollbar-thumb {
    background: #555; /* Gris moyen */
    border-radius: 5px;
}

/* Effet au survol */
::-webkit-scrollbar-thumb:hover {
    background: #777;
}

/* Adapte la couleur selon le mode du navigateur */
@media (prefers-color-scheme: light) {
    ::-webkit-scrollbar-track {
        background: #f0f0f0; /* Clair */
    }
    
    ::-webkit-scrollbar-thumb {
        background: #bbb; /* Clair */
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #999;
    }
}


/* Fond sombre avec des nuances subtiles + animation fluide */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
      circle at center,
      rgb(0, 0, 0) 20%,
      rgba(20, 10, 55, 1) 40%,
      rgba(10, 5, 30, 1) 80%,
      rgba(0, 0, 0, 1) 100%
    );
    background-size: 100% 100%; /* Agrandit mais garde le centre bien en place */
    background-position: center; /* Assure le centrage initial */
    animation: organicBackground 2s infinite alternate ease-in-out;
    z-index: -3;
  }
  
  /* Animation du fond */
  @keyframes organicBackground {
    0% {
      background-position: center 50%;
    }
    50% {
      background-position: 40% 60%;
    }
    100% {
      background-position: 60% 40%;
    }
  }
  
/* Appliquer l'image vectorielle seulement sur index.html */
body.home::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('images/vectors.png') center/cover no-repeat;
    opacity: 1;
    z-index: -2;
}

  
  /* Animation GIF de bruit en overlay (fichier local) */
  html::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('images/402107790_STATIC_NOISE_400.gif') repeat;
    background-size: clamp(10rem, 10vw, 20rem) clamp(10rem, 10vw, 20rem); /* S'adapte au viewport */
    opacity: 0.08; /* Effet subtil */
    pointer-events: none;
    z-index: -1; /* Derrière tout */
  }
  
  /* Animation organique du background */
  @keyframes organicBackground {
    0% {
      background-position: 0% 0%;
    }
    100% {
      background-position: 10% 10%;
    }
  }
  

  

.center-home {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 999;
}

.logo {
    width: 60vw;
    max-width: 400px;
}

.contact-info {
    user-select: text; /* Permet de sélectionner le texte */
    -webkit-user-select: text;
    margin-top: 20px;
}

.contact-info a {
    color: white;
    text-decoration: none;
    cursor: pointer;
    pointer-events: auto; /* ✅ Active les interactions */
}

.contact-info a:hover {
    text-decoration: underline;
}

.contact-info span {
    display: inline-block;
    user-select: text; /* Rend le texte copiable */
    -webkit-user-select: text;
}


.separator {
    width: 8px;
    height: 8px;
    background-color: #00ff00;
    border-radius: 50%;
}
.arrows {
    position: fixed;
    width: 100%;
    height: 100%;
}

.arrow-wrapper {
    position: absolute;
    width: 100%;
    height: 40px;
    background-color: #7E45FF; /* Vert fluo */
    transition: background-color 0.5s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    opacity: 1; /* Toujours visible */
}

.arrow-wrapper:hover {
    background-color: #ffffff; /* Vert légèrement plus foncé au survol */
}

.arrow {
    color: rgb(255, 255, 255); /* Garde le texte noir pour le contraste */
    font-size: 18px;
    font-weight: 700; /* Met un peu plus en gras pour la lisibilité */
    text-transform: uppercase;
    transition: color 0.3s ease, font-weight 0.3s ease;
}


/* Orientation verticale pour Webdesign */
.left .vertical {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* Orientation verticale pour Cinema */
.right .vertical {
    writing-mode: vertical-rl;
    transform: rotate(0deg);
}

/* Enlever soulignement et couleur des liens */
.arrow-wrapper {
    text-decoration: none; /* Supprime le soulignement */
    color: inherit; /* Garde la couleur du texte originale */
    display: flex; /* Assure que le lien prend toute la zone cliquable */
}

/* Ajuster le style au survol */
.arrow-wrapper:hover .arrow {
    color: #7E45FF; /* Même effet que l'ancien */
    font-weight: 700;
}

/* Positionnement des barres */


.left {
    top: 0;
    left: 0;
    width: 40px;
    height: 100%;
}

.right {
    top: 0;
    right: 0;
    width: 40px;
    height: 100%;
}

.up {
    top: 0;
    left: 0;
    height: 40px;
    pointer-events: all;
}

.down {
    bottom: 0;
    left: 0;
    height: 40px;
}


.section {
    position: relative; /* Permet le scroll */
    width: 100vw;
    min-height: 100vh; /* Garantit une hauteur minimum */
    height: auto; /* S'ajuste au contenu */
    overflow-y: auto; /* Active le scroll vertical */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Centre le contenu verticalement */
}

.section-content {
    width: 90%;
    max-width: 1680px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}


.section img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
        margin-bottom: 20px; /* ✅ Ajoute un espace de 20px entre chaque image */
    }

    .section-content img:last-of-type {
        margin-bottom: 200px; /* ✅ Ajuste l’espace sous la dernière image */
    }
    

/* ✅ Garde le bouton HOME toujours visible */
.home-button {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background-color: #7E45FF;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-family: 'Raleway', sans-serif;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    color: white;
    transition: background 0.3s ease, color 0.3s ease;
    text-decoration: none;
}

/* 🖱 Effet au survol */
.home-button:hover {
    background-color: white;
    color: #7E45FF;
}




#branding {
    background-color: #000000;
    transform: translateY(-100vh);
}

#webdesign {
    background-color: #000000;
    transform: translateX(-100vw);
}

#cinema {
    background-color: #000000;
    transform: translateX(100vw);
}

#illustration {
    background-color: #000000;
    transform: translateY(100vh);
}




/* Style de la barre pour le bouton HOME */
/* Supprimer le soulignement et le style de lien */
.home-button {
    text-decoration: none; /* ❌ Supprime le soulignement */
    color: white; /* ✅ Garde la couleur du texte */
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 40px;
    background-color: #7E45FF;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease;
    border: none; /* ✅ Supprime toute bordure */
    outline: none; /* ✅ Supprime l’effet focus */
}

/* Effet au survol */
.home-button:hover {
    background-color: white;
    color: #7E45FF;
}

/* Supprimer le soulignement au focus */
.home-button:focus, 
.home-button:active {
    outline: none;
    text-decoration: none;
}


/* Pour centrer le texte dans la barre */
.home-button span {
    position: relative;
}




/* Aligner les images en haut et à gauche au début */


.text-content {
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    max-width: 800px;
}

h1 {
    font-family: 'Aalto Display', sans-serif; /* ✅ Applique Aalto Display */
    letter-spacing: 2px;
    font-size: 110px;
    font-weight: normal;
    color: #7E45FF;
    margin-bottom: 1px;
}

p {
    font-size: 20px;
    font-weight: 300;
    color: rgb(255, 255, 255);
    margin-bottom: 60px;

}






/* FONT*/
@font-face {
    font-family: 'Aalto Display';
    src: url('./fonts/Aalto-Display-Personal-use.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}