/* ==========================================

   BARRE DE NAVIGATION (Style "La Vallée")

   ========================================== */


body {
    overflow-y: scroll; /* Force la barre de défilement à être toujours là */
}

.main-header {
    background: #1a1c24;
    color: #ffffff;
    padding: 25px 0 15px 0;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    position: relative;
    z-index: 10;
    width: 100%; /* S'assure qu'il prend toute la largeur */
    box-sizing: border-box; /* Important pour que le padding n'ajoute pas de largeur */
}



.header-container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px;

}



/* Zone Logo + Titre principal */

.logo-zone {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    margin-bottom: 5px;

}



/* Le carré de ton logo */

.placeholder-logo {

    width: 50px;

    height: 50px;

    background: #5865F2; /* Bleu Discord de base */

    border-radius: 8px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.8rem;

}



.site-title {

    font-size: 2.8rem;

    font-weight: 800;

    letter-spacing: -1px;

    color: #ffffff;

}



/* ==========================================

   SÉPARATEUR ANIMÉ (Style Dull-Dog-37)

   ========================================== */

.header-line-container {

    padding: 10px 0;

    max-width: 90%;

    margin: 10px auto;

}



.animated-line {

    height: 4px;

    width: 100%;

    background: linear-gradient(

        90deg,

        #5865F2 0%,    /* Bleu Discord */

        #8a2be2 25%,   /* Violet magique */

        #da70d6 50%,   /* Rose légende */

        #8a2be2 75%,   /* Violet magique */

        #5865F2 100%   /* Retour au Bleu Discord */

    );

    background-size: 200% auto;

    border-radius: 10px;

    animation: shimmerEffect 3s linear infinite;

}



@keyframes shimmerEffect {

    0% { background-position: 0% center; }

    100% { background-position: 200% center; }

}



/* ==========================================

   BOUTONS DE NAVIGATION (Style Silent-Lizard-44)

   ========================================== */

.main-nav {

    display: flex;

    justify-content: center;

    gap: 20px;

    padding: 15px 0;

    flex-wrap: wrap;

    align-items: center;

}



.nav-btn-magical {

    position: relative;

    padding: 12px 35px;

    background: #12141c;

    font-size: 17px;

    font-weight: 500;

    color: rgba(255, 255, 255, 0.8) !important;

    border: 3px solid #5865F2;

    border-radius: 8px;

    box-shadow: 0 0 0 transparent;

    transition: all 0.3s ease-in-out;

    cursor: pointer;

    text-decoration: none !important;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    overflow: hidden; 

    height: 45px;

    box-sizing: border-box;

}



.nav-btn-magical svg {

    width: 100%;

    height: 100%;

    display: block;

}



/* Étoiles magiques de la navigation */

.star-1, .star-2, .star-3, .star-4, .star-5, .star-6 {

    position: absolute;

    filter: drop-shadow(0 0 0 #fffdef);

    z-index: 1;

    opacity: 0;

    transition: all 0.4s ease;

}



.star-1 { top: 20%; left: 20%; width: 25px; }

.star-2 { top: 45%; left: 45%; width: 15px; }

.star-3 { top: 40%; left: 40%; width: 5px; }

.star-4 { top: 20%; left: 40%; width: 8px; }

.star-5 { top: 25%; left: 45%; width: 15px; }

.star-6 { bottom: 20%; right: 20%; width: 10px; }



.nav-btn-magical:hover .star-1 { transform: translate(-20px, -20px) rotate(-45deg); opacity: 1; filter: drop-shadow(0 0 8px #fffdef); }

.nav-btn-magical:hover .star-2 { transform: translate(25px, 25px) rotate(45deg); opacity: 1; filter: drop-shadow(0 0 8px #fffdef); }

.nav-btn-magical:hover .star-3 { transform: translate(-15px, 20px) rotate(30deg); opacity: 1; filter: drop-shadow(0 0 8px #fffdef); }

.nav-btn-magical:hover .star-4 { transform: translate(20px, -15px) rotate(-30deg); opacity: 1; filter: drop-shadow(0 0 8px #fffdef); }

.nav-btn-magical:hover .star-5 { transform: translate(25px, -20px) rotate(20deg); opacity: 1; filter: drop-shadow(0 0 8px #fffdef); }

.nav-btn-magical:hover .star-6 { transform: translate(-25px, 25px) rotate(-20deg); opacity: 1; filter: drop-shadow(0 0 8px #fffdef); }



.nav-btn-magical:hover {

    overflow: visible;

    color: #ffffff !important;

    border-color: #8a2be2;

    box-shadow: 0 0 20px rgba(138, 43, 226, 0.6);

}



.fil0 {

    fill: #fffdef;

}



/* ==========================================

   BOUTON DISCORD PREMIUM (Sécurisé pour staff.php)

   ========================================== */

.discord-btn-premium {

    max-width: 320px;

    display: inline-flex !important;

    overflow: hidden;

    position: relative;

    padding: 0.875rem 72px 0.875rem 1.75rem !important;

    background-color: #5865F2 !important;

    background-image: linear-gradient(to top right, rgb(46, 56, 175), rgb(82, 93, 218)) !important;

    color: #ffffff !important;

    font-size: 15px !important;

    line-height: 1.25rem !important;

    font-weight: 700 !important;

    text-align: center;

    text-transform: uppercase;

    vertical-align: middle;

    align-items: center;

    border-radius: 0.5rem;

    gap: 0.75rem;

    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

    border: none !important;

    text-decoration: none !important; /* Corrige le soulignement violet indésirable */

    transition: all .4s ease;

    box-sizing: border-box;

    cursor: pointer;

}



.discord-btn-premium span.icon-container {

    background-color: rgb(82, 93, 218) !important;

    display: grid !important;

    position: absolute !important;

    right: 0 !important;

    top: 0 !important;

    bottom: 0 !important;

    place-items: center;

    width: 3rem;

    height: 100% !important;

}



.discord-btn-premium span.icon-container svg {

    width: 1.5rem !important;

    height: 1.5rem !important;

    fill: #ffffff !important;

}



.discord-btn-premium:hover {

    color: #ffffff !important;

    transform: translateY(-2px);

    box-shadow: 0 5px 25px rgba(88, 101, 242, 0.5) !important;

}



/* ==========================================

   STRUCTURE DE PAGE & ACCUEIL

   ========================================== */




body { 
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; 
    background: #12141c;
    color: #fff; 
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    
    /* AJOUTE CES DEUX LIGNES POUR RÉGLER LE DÉCALAGE */
    overflow-y: scroll; /* Force l'affichage de la barre de défilement partout */
    margin-left: calc(100vw - 100%); /* Force le centrage parfait */
}


.hero-section {

    min-height: calc(100vh - 180px);

    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(18, 20, 28, 1)), url('fond.png') no-repeat center center fixed;

    background-size: cover;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    padding: 40px 20px;

    box-sizing: border-box;

}



.hero-content {

    max-width: 800px;

    display: flex;

    flex-direction: column;

    align-items: center;

}



.hero-content h1 {

    font-size: 3.5rem;

    text-shadow: 0 4px 15px rgba(0,0,0,0.8);

    margin-bottom: 20px;

    letter-spacing: 2px;

}



.server-description {

    font-size: 1.25rem;

    line-height: 1.6;

    color: #e3e5e8;

    text-shadow: 0 2px 8px rgba(0,0,0,0.9);

    margin-bottom: 0px; 

    background: rgba(0, 0, 0, 0.4);

    padding: 25px;

    border-radius: 12px;

    backdrop-filter: blur(4px);

    border: 1px solid rgba(255, 255, 255, 0.05);

}



/* ==========================================

   BOUTON DISCORD PROJECTEUR ANIMÉ (Page d'accueil)

   ========================================== */

.light-button-container {

    display: flex;

    justify-content: center;

    width: 100%;

    margin-top: 35px;

}



.light-button {

    display: inline-block;

}



.light-button a.bt {

    position: relative;

    height: 160px;

    display: flex;

    align-items: flex-end;

    text-decoration: none;

    cursor: pointer;

}



.light-button a.bt .button-holder {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    height: 85px;

    width: 85px;

    background-color: #1a1c24;

    border-radius: 8px;

    color: rgba(255, 255, 255, 0.5);

    font-weight: 700;

    font-size: 12px;

    transition: 300ms;

    outline: rgba(255, 255, 255, 0.1) 2px solid;

    outline-offset: 0px;

}



.light-button a.bt .button-holder svg {

    height: 35px;

    margin-bottom: 4px;

    fill: rgba(255, 255, 255, 0.5);

    transition: 300ms;

}



.light-button a.bt .light-holder {

    position: absolute;

    top: 0;

    height: 160px;

    width: 85px;

    display: flex;

    flex-direction: column;

    align-items: center;

}



.light-button a.bt .light-holder .dot {

    position: absolute;

    top: 0;

    width: 8px;

    height: 8px;

    background-color: #5865F2;

    border-radius: 50%;

    z-index: 2;

    box-shadow: 0 0 10px #5865F2;

}



.light-button a.bt .light-holder .light {

    position: absolute;

    top: 0;

    width: 140px;

    height: 100px;

    clip-path: polygon(50% 0%, 15% 100%, 85% 100%);

    background: transparent;

    transition: 300ms;

    pointer-events: none;

}



.light-button a.bt:hover .button-holder svg {

    fill: #ffffff;

}



.light-button a.bt:hover .button-holder {

    color: #ffffff;

    outline: #5865F2 2px solid;

    outline-offset: 4px;

    box-shadow: 0 0 20px rgba(88, 101, 242, 0.4);

}



.light-button a.bt:hover .light-holder .light {

    background: linear-gradient(

        180deg,

        rgba(88, 101, 242, 0.35) 0%,

        rgba(88, 101, 242, 0.05) 60%,

        rgba(255, 255, 255, 0) 100%

    );

}



/* Container principal pour centrer la box */

.network-container {

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 60px 20px;

}


/* ==========================================
   SECTION RÉSEAUX (Style Fixe - Non Responsive)
   ========================================== */

.reseaux-container {
    display: flex;
    justify-content: center;
    padding: 60px 20px;
    width: 100%;
}

.box-ensemble {
    background: #232428;
    padding: 35px;
    border-radius: 12px;
    /* CORRECTION ICI */
    width: 90%;          /* S'adapte à la largeur du parent */
    max-width: 600px;    /* Ne dépasse jamais 600px */
    margin: 0 auto;      /* Centre la boîte */
    box-sizing: border-box;
    border: 1px solid #313338;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.box-ensemble h2 {
    color: #ffffff;
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 2px solid #313338;
    font-size: 1.6rem;
}

.vertical-links {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.invite-discord, .invite-disboard {
    display: block;
    padding: 20px;
    text-decoration: none;
    color: #b9bbbe;
    background: #2b2d31;
    border-radius: 8px;
    border-left: 6px solid #5865F2;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    line-height: 1.5;
}

.invite-discord strong, .invite-disboard strong {
    color: #ffffff;
    display: block;
    margin-bottom: 8px;
    font-size: 1.1rem;
}

.invite-discord { border-left-color: #5865F2; }
.invite-disboard { border-left-color: #ff5e5e; }

.invite-discord:hover {
    background: #35373c;
    border-left-color: #7289da;
    box-shadow: 0 4px 15px rgba(88, 101, 242, 0.2);
    transform: scale(1.01); /* Légère animation fixe */
}

.invite-disboard:hover {
    background: #35373c;
    border-left-color: #ff8080;
    box-shadow: 0 4px 15px rgba(255, 94, 94, 0.2);
    transform: scale(1.01);
}

/* Style pour les icônes */
.link-content {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.icon-img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

/* ==========================================
   RÉGLAGES RESPONSIVE (Mobile, Tablette, Desktop)
   ========================================== */

/* 1. Ajustements pour les écrans de taille moyenne (Tablettes) */
@media (max-width: 900px) {
    .site-title { font-size: 2rem; }
    .hero-content h1 { font-size: 2.5rem; }
}

/* 2. Ajustements pour les mobiles (Smartphones) */
@media (max-width: 600px) {
    /* Header compact */
    .logo-zone { gap: 10px; }
    .placeholder-logo { width: 40px; height: 40px; font-size: 1.4rem; }
    .site-title { font-size: 1.6rem; }
    
    /* Navigation : les boutons prennent la largeur */
    .main-nav { gap: 10px; padding: 10px; }
    .nav-btn-magical { 
        padding: 8px 15px; 
        font-size: 14px; 
        height: 40px; 
        min-width: 100px; /* Moins large sur mobile */
    }

    /* Conteneur Réseaux : on retire la largeur fixe */
    .box-ensemble {
        width: 95%; /* Prend presque toute la largeur de l'écran */
        padding: 20px;
        box-sizing: border-box;
    }

    /* Hero section */
    .hero-content h1 { font-size: 1.8rem; }
    .server-description { font-size: 1rem; padding: 15px; }
}