@font-face {
    font-family: "roboto";
    src: url(./font/Roboto-Black.ttf);
}

body {
    height: 100vh;
    overflow-x: hidden;
  
}

html {
    overflow-x: hidden;

}

/* ------------- NAVBAR DESKTOP ------------- */

.promo-banner {
    background: #cd3308;
    font-family: "roboto";
    color: #fff;
    text-align: center;
    font-size: 18px;
    padding: 8px 0 6px 0;
    z-index: 3 !important;
    letter-spacing: 1px;
   
    overflow: hidden;
}
#nuage5 {
    content: url(./img/nuage3.png);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    position: absolute;
    top: -30px;
    left: 0px;
    z-index: 4 !important;
}
#nuage6 {
    content: url(./img/nuage1.png);
    position: absolute;
    top: -70px;
    right: -70px; 
    transform: scale(0.8);
    z-index: 4 !important;
}
.newnav {
    font-family: "roboto";
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #07435c9c;
    list-style: none;
    height: 80px;
    padding: 0 3%;
    position:  relative;
    margin: 15px auto 0px;
    width: 50%;
    border-radius: 10px;
    z-index: 3;
    /* 1er de la cascade d'entree (voir plus bas) */
    animation: hb-entree-haut .35s cubic-bezier(.16, 1, .3, 1) .05s both;
}

.newnav li {
    text-transform: uppercase;
    cursor: pointer;
    font-size:1.5rem; 
    align-items: center;
    align-content: center;
    transform: translateY(1.5px);
}


.newnav .nav-button {
    text-decoration: none;
    color: inherit;
    display: inline-block;
    transition: color .15s ease, transform .15s ease, text-shadow .15s ease;
}
/* Retour au survol : sans lui le menu parait inerte */
.newnav li:not(.boutique) .nav-button:hover {
    color: #7ee3ff;
    transform: translateY(-2px);
    text-shadow: 0 0 12px rgba(126, 227, 255, .75);
}
/* Boutique et avatar sont des images : l'effet est porte par l'image */
.boutique .nav-button img,
.navbar-toggler img {
    transition: transform .15s ease, filter .15s ease;
}
.boutique .nav-button:hover img {
    transform: translateY(-2px) scale(1.05);
    filter: brightness(1.08) drop-shadow(0 5px 8px rgba(0, 0, 0, .35));
}
.navbar-toggler:hover img {
    transform: scale(1.07);
    filter: brightness(1.12);
}

/* Bouton "Vos achats" (shop) injecté dans la navbar : le recentrer proprement */
.newnav .dropdown-item {
    margin: 0 !important;
    align-self: center;
    width: auto;
    white-space: nowrap;
    font-size: 1rem;
    padding: 8px 16px;
}

.boutique {
    transform: translateY(0px) !important;
}
#boutique {
    height:70px;
}

.navbar-toggler {
    position: absolute;
    right: -10%;
    top: 5px;
    color: black;
}

.navbar-toggler-icon {
    height: 70px;
    width: 70px;
    border-radius: 10px;
    border: 4px solid #07435c93;
}   





/* ------------- HEADER ------------- */

/* La scene est dessinee en 1920x1260. Avec une hauteur fixe, `cover` rognait
   les cotes des que l'ecran etait plus etroit que 1920 (maison et drakkar
   coupes, effet "trop zoome"). En liant la hauteur a la largeur on garde le
   ratio de l'image : elle retrecit au lieu d'etre rognee. */
.home-header {
    position: relative;
    background: url(./img/fond.png) center/cover;
    z-index: 0;
    filter: none !important;
    height: min(1260px, 65.63vw);
    text-align: center;
}

/* Proportions d'origine (850x650 pour une scene de 1920) conservees jusqu'a
   1920 puis figees : le logo suit la scene au lieu de grossir relativement. */
.logo {
    margin: 0 auto;
    height: min(650px, 33.85vw);
    width: min(850px, 44.27vw);
    max-width: 100%;
    position: relative;
    z-index: 1;
}

.grolo {
    z-index: 2;
}

.ip {
    background: url(./img/iphaut.png) center/contain no-repeat;
    width: min(468px, 24.38vw, 80vw);
    aspect-ratio: 468 / 77;
    height: auto;
    margin: 0 auto;
    transition: 0.2s ease-in-out;
    cursor: pointer;
}
.ip:hover {
    background-image: url(./img/hoveriphaut.png);
}
#logo {
    z-index: 3;
    max-width: 100%;
    height: auto;
}

#nuage1{
    content: url(./img/nuage1.png);
    opacity: 0.8;
    position: absolute;
    top: 0px;
    left: 80vw;
    transform: scale(0.6);
    animation: nuage1 70s linear infinite;
    z-index: -1;
}

#nuage2{
    content: url(./img/nuage2.png);
    position: absolute;
    top: 0px;
    left:0px;
    transform: scale(1);
    animation: nuage2 70s linear infinite;
    z-index: -1 !important;
}

#nuage3{
    content: url(./img/nuage3.png);
    opacity: 0.8;
    position: absolute;
    top: 0px;
    left: 0px;
    transform: scale(0.6);
    animation: nuage3 70s linear infinite;
    z-index: -1;
}
#nuage4{
    content: url(./img/nuage3.png);
    opacity: 0.8;
    position: absolute;
    top: 0px;
    left: 0px;
    transform: scale(0.6);
    animation: nuage4 90s linear infinite;
    z-index: -1;
}



@keyframes nuage1 {
    0% {
        left: -200px;
        transform: scale(0.3);
        opacity: 0;
        
      }
      50% {
        /* Arrivé au centre, plus gros */
        left: 40vw;
        transform: scale(0.7);
        opacity: 1;
      
      }
      100% {
        left: 70vw; /* sort à droite */
        transform: scale(0.7);
        opacity: 0;
      
      }
    }


@keyframes nuage2 {
    0% {
        left: 80vw;
        transform: scale(1.2);
        opacity: 1;
        z-index: 2;
      }
      80% {
        left: 50vw;
        transform: scale(0.7);
        opacity: 0.5;
        z-index: 1;
      }
      100% {
        left: 20vw;
        transform: scale(0.3);
        opacity: 0;
        z-index: 1;
      }
    }

    @keyframes nuage3 {   
        0% {
        left: 700px;
        transform: scale(0.3);
        opacity: 0;
        
      }
      50% {
        /* Arrivé au centre, plus gros */
        left: 0px;
        top: -50px;
        transform: scale(0.7);
        opacity: 1;
      
      }
      100% {
        left: -300px; /* sort à droite */
        transform: scale(0.7);
        opacity: 0;
        top: -50px;
      
      }
    }

@keyframes nuage4 {
    0% {
        left: -750px;
        transform: scale(1.1);
        opacity: 0;
        top: -50px
      
      }
      65% {
        left: 10vw;
        transform: scale(0.7);
        opacity: 1;
        top: 50px;
       
      }
      100% {
        left: 30vw;
        transform: scale(0.1);
        opacity: 0;
       
      }
}

/* ---------- Cascade d'entree de l'accueil ----------
   Les elements arrivent l'un apres l'autre : navbar, puis logo, puis bouton IP.
   Avant, la navbar (navpop) et le logo demarraient en meme temps et tout
   bougeait d'un bloc. Les animations ne portent que sur opacity/transform :
   navpop animait `width`, ce qui recalculait la mise en page a chaque image.
   Le logo est un WebP deja anime : il ne recoit qu'une entree, jouee une fois,
   et surtout pas de boucle qui se superposerait a sa propre animation. */
@keyframes hb-entree-haut {
    from { opacity: 0; transform: translateY(-24px); }
    to   { opacity: 1; transform: none; }
}

#logo {
    animation: hb-entree-logo .4s cubic-bezier(.16, 1, .3, 1) .22s both;
}
@keyframes hb-entree-logo {
    from { opacity: 0; transform: translateY(26px) scale(.93); }
    to   { opacity: 1; transform: none; }
}

.grolo .copy-ip {
    display: block;
    animation: hb-entree-bas .35s cubic-bezier(.16, 1, .3, 1) .45s both;
}
@keyframes hb-entree-bas {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
}

/* Respect du reglage systeme "reduire les animations" */
@media (prefers-reduced-motion: reduce) {
    .newnav, #logo, .grolo .copy-ip { animation: none; opacity: 1; transform: none; }
}



@keyframes shine-move {
    0% {
        background-position: -120% 0;
    }
    100% {
        background-position: 120% 0;
    }
}



/* ------------- MAIN ------------- */
/* Hauteur pilotee par le contenu : une hauteur fixe laissait la section suivante
   recouvrir les boutons sous 1300px.
   padding-bottom - margin-bottom = 180px de terre visible sous le contenu.
   Les 650px de chevauchement sont necessaires : le haut de bdp.png est
   transparent sur 24% de sa hauteur et doit reposer sur la terre. */
.main-container {
    background: url(./img/main_bg.png) center/cover;
    min-height: 900px;
    padding-bottom: 830px;
    margin-top: -180px; /* Superpose le header */
    position: relative;
    z-index: 1; /* Place derrière le header */
    margin-bottom: -650px;
}

.stats {
    margin: 0 auto;
    width: 50%;
    display: flex;
    justify-content: center;
    padding-top: 320px
}

.spacecard {
 width: 100%;
 display: flex;
 justify-content: space-around;
}

.unique{
background: url(./img/uniques.png);
width: 419px;
height: 483px;
transform: scale(0.85) translateY(-100px);

}
.con{
background: url(./img/connectés.png);
width: 436px;
height: 467px;
transform: scale(0.85) translateY(50px);
}
.record {
background: url(./img/record.png);
width: 438px;
height: 493px;
transform: scale(0.85) translateY(-200px);
}

.join {
    width: 50%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    margin-top: 240px;
}
/* Les 3 etapes pour rejoindre : regroupees, alignees, jamais collees aux bords */
.tuto {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 36px;
    max-width: 1300px;
    margin: 0 auto;
    padding: 50px 24px 0;
    flex-wrap: wrap;
}
#addserver {
    width: min(350px, 26vw);
    height: auto;
    transform: none;
}

#multijoueurs {
    width: min(400px, 29vw);
    height: auto;
    transform: none;
}

.ip2 {
    background: url(./img/iphaut.png) center/contain no-repeat;
    width: min(370px, 27vw);
    aspect-ratio: 468 / 77;
    height: auto;
    margin: 0 auto;
    transition: 0.2s ease-in-out;
    cursor: pointer;
}
.ip2:hover {
    background-image: url(./img/hoveriphaut.png);
}
.movecontainer {
    background: url(./img/bdp.png) center top/100% 100% !important;
    min-height: 620px;
    padding: 175px 20px 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: -110px;
    z-index: 2;
    position: relative;
}



/* ------------- ARTICLE CONTAINER------------- */

.row.gy-3 {
    all: unset !important;
    display: flex !important;
    align-content: center !important;
    align-items: center !important;
    justify-content: space-around !important;
    margin: 0 5% !important;
    margin-top: 500px !important;
}
.col-md-6 { /* Hauteur fixe pour toutes les colonnes */
    display: flex;
    flex-direction: column; 
    height: 602px !important;
    width: 472px !important;
    background: url(./img/Rectangleinformation.png) center/cover !important;
}


.col-md-6 img {
    width: 100%;
    height: 200px; /* Hauteur fixe pour les images */
    object-fit: cover; /* Garde les proportions de l'image */
    object-position: center;
    border-radius: 25px; /* Border radius uniquement en haut */
    transition: transform 0.4s ease-in-out;
}
.card.mb-4 {
    border: none;
   border-radius: 15px !important;
   margin-top: 110px;
   width: 101%;
   transform: translateX(-2px);
   height: 483px;
   background: none !important;
 
}
.card.mb-4 a:first-child {
    border-radius: 20px 20px 0 0 !important;
}

.card.mb-4:hover img {
    transform: scale(1.1);
    border-radius: 25px;
}
.col-md-6 a{
    margin-top: 0 !important;
    color: whitesmoke;
    text-decoration: none;
    font-family: "Roboto";
    text-transform: uppercase;
    overflow: hidden;
  
}
.card-body {
    padding: 8%;
    text-align: center;
}
.card-body h3 {
    transform: translateY(-315px);
    color: rgb(7, 66, 121);
}
.text-end a {
    transition: 0.3s ease-in-out;
}
.text-end a:hover {
 color: whitesmoke;
 transform: scale(1.1);
}

/* Page container */

.img-fluid.rounded.mb-3 {
 max-height: 300px;
}


/* ------------- LOGIN / REGISTER / PROFILE ------------- */
/* fondcon.png fait 1920x1347 (ratio 70.16vw). Avec un min-height fixe, `cover`
   rognait la scene des que l'ecran etait plus etroit que 1920, et laissait
   jusqu'a 995px de vide sous les pages courtes. En liant la hauteur a la
   largeur, la scene retrecit au lieu d'etre rognee. */
.header-co {
    background: url(./img/fondcon.png) center/cover, #197299 center top repeat-y !important;
    min-height: min(1347px, 70.16vw);
    margin-bottom: -205px;
    position: relative;
    padding-bottom: 12%;
}
/* Carte connexion / inscription.
   Le padding bas est reduit (le haut doit rester : il laisse passer le bandeau
   CONNEXION de l'image de fond). La carte tient ainsi sans reduction sur la
   plupart des ecrans ; auth-fit.js ne fait que rattraper les ecrans tres courts. */
.card-con{
 background: url(./img/connexcontainer.png) center/contain no-repeat;
 justify-content: center;
 margin: 3% auto 0;
 transform: translateX(10px);
 width: 60%;
 padding: 8% 15% 3%;
}
.card-body-logreg {
    padding: 4% !important;
}

/* Champs de la carte : creux, contour franc, et etat focus visible */
.card-con .form-control {
    background-color: #072f45e6 !important;
    border: 3px solid rgba(255, 255, 255, .92) !important;
    border-radius: 24px !important;
    color: #fff !important;
    font-family: "roboto" !important;
    font-size: 1.05rem !important;
    padding: 11px 22px !important;
    box-shadow: inset 0 3px 9px rgba(0, 0, 0, .45) !important;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.card-con .form-control::placeholder { color: #8fb4c6 !important; }
.card-con .form-control:focus {
    border-color: #7ee3ff !important;
    box-shadow: inset 0 3px 9px rgba(0, 0, 0, .45),
                0 0 0 4px rgba(126, 227, 255, .28) !important;
}
.mb-3 {
        text-align: center;
        font-size: 1.2rem;
        padding: 0 !important;
        margin: 5% 0 0 0 !important;
    }
input {
    background-color: #07435c9c !important;
    border: 2px solid white !important;
    border-radius: 30px !important;
    text-align: center !important;
    font-family: "roboto" !important;
}
input:focus {
    background-color: #07435c9c !important;
    border: 2px solid white !important;
    outline: none !important;
    box-shadow: none !important;
}
 input:active {
    background-color: #07435c9c !important;
}
input:focus {
    background-color: #07435c9c !important;
    outline: none !important;
    box-shadow: none !important;
}
.row.gy-3.mb-3 {
    all: unset !important;
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin: 4% 4% 0 !important;
}

.col-md-7 {
   width: auto;
}

.col-md-7 a {
    text-decoration: none !important;
    color: white !important;
    margin-top: 2px;
    display: inline-block;
    padding: 8px 10px;
    transition: color .15s ease;
}
.col-md-7 a:hover {
    color: #7ee3ff !important;
    text-decoration: underline !important;
}
/* Case a cocher : 18px est trop petit pour un doigt */
.card-con .form-check-input {
    width: 24px !important;
    height: 24px !important;
    margin-top: 0 !important;
    cursor: pointer;
}
.card-con .form-check-label { cursor: pointer; padding: 6px 4px; }
#checksouv {
   margin: 0 !important;
}
/* Largeur libre : 200px suffisait en Roboto mais la police du jeu est plus
   large et le libelle passait sur deux lignes. */
.form-check {
    margin: 0 auto !important;
    width: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}
.form-check label {
    font-size: 1.2rem !important;
}
.form-label {
        font-family: "roboto";
    
    }
.btn-primary, .btn-secondary {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    position: relative !important;
}
#hinscrire {
    width: 80%;
 margin: 0 auto !important;
}
#seconnecter {
    width: 90%;
}

.card-con.reg {
    background: url(./img/incripcontainer.png) center/cover no-repeat !important;
    background-size: contain !important;
    padding: 8% 13% !important;
    transform: translateX(17px) !important;
}
#sinscrirereg {
    margin-top: 12%;
}

.card-template {
    background-color: #07435c9c !important;
    width: 50% !important;
    margin: 10% auto 0!important;
    padding: 3% !important;
    border-radius: 40px;
    border: 10px solid white !important;
    text-align: center;
}

.card-template h3 {
    font-family: "roboto";
    font-size: 1.5rem;
 
    padding: 3%;;
}

#templatebtn {
    font-family: "roboto" !important;
    font-size: 1.2rem !important;
    color: white !important;
    border: 1px solid white !important;
    width: 20%;
    margin: 3% auto 0 !important;
    transition: 0.5s;
    z-index: 10 !important;
}

#templatebtn:hover {
    transform: scale(1.1);
    z-index: 10 !important;
}

/* Profile page */


.container.content {
    margin-top: 50px;
}
.container.content .card.mb-4 {
   border: 5px solid white;
}

.card.mb-4 h1 {
    padding: 1% !important;
    border: 6px solid white;
    border-radius: 0 0 10px 10px;
    width: 25%;
    margin: -5px auto 0;
    text-transform: uppercase;
    text-align: center;
    color: white;
}

.col-lx-10 {
    text-align: center;
}

.col-lx-10 h2 {
    display: inline-block; /* Fait que le H2 s'adapte à la largeur du texte */
    width: fit-content; /* Alternative pour s'adapter au contenu */
    margin: 0 auto; /* Centre le H2 */
    border-bottom: 1px solid white;
    padding-bottom: 5px;
    margin-bottom: 10px;

}


.dropdown-item {
    text-align: center;
    font-family: "roboto";
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    width: 200px;
    padding: 10px 20px;
    background-color: #740707;
    border: 2px solid rgb(41, 4, 4);
    border-radius: 5px;
    margin-bottom: 10%;

}

.row.gy-4 {
    display: flex;
    justify-content: space-around !important;
}
.col-md-8 {
    max-width: 30%;
    max-height: 500px; /* Hauteur fixe pour toutes les colonnes */
    display: flex;
    flex-direction: column;
    background: #07435c9c;
    border: 5px solid whitesmoke;
    border-radius: 30px;
    min-width: 500px;
    text-align: center;
    box-shadow: 0px 0px 9px 8px #07435c9c !important
}

.btn.btn-primary {
    color: whitesmoke;
    margin-top: 20px !important;
    font-size: 1.3rem;
    border-radius: 30px !important;
    padding: 3% !important;
    border: 5px solid whitesmoke !important;
 
    transition: 0.3s ease-in-out;
}
.btn.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 1px 4.5px 8px 4px  #07435c9c!important;
}

/* Boutons de la carte connexion / inscription : ce sont des images qui portent
   deja leur contour. La boite reste totalement neutre (sans cadre ni ombre, qui
   dessineraient un rectangle derriere l'image) et l'effet de survol est porte
   par l'image elle-meme. */
.card-con .btn.btn-primary,
.card-con .btn.btn-secondary {
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-top: 10px !important;
    background: none !important;
    box-shadow: none !important;
    transform: none !important;
    /* .btn-primary force overflow:hidden : l'image agrandie au survol serait
       rognee net par la boite. */
    overflow: visible !important;
}
.card-con .btn:hover,
.card-con .btn:focus,
.card-con .btn:active {
    box-shadow: none !important;
    background: none !important;
    border: none !important;
    outline: none !important;
    transform: none !important;
}
.card-con .btn img {
    transition: transform .18s ease, filter .18s ease;
    will-change: transform;
}
.card-con .btn:hover img {
    transform: translateY(-3px) scale(1.04);
    filter: brightness(1.1) drop-shadow(0 6px 10px rgba(0, 0, 0, .45));
}
.card-con .btn:active img {
    transform: translateY(1px) scale(.99);
    filter: brightness(.95);
}

/* ------------- FOOTER ------------- */
.footer {
   background: url(./img/bgfooter.png) center/cover;
   min-height: 427px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 14px;
   padding: 46px 20px 22px;
   z-index: 3;
   margin-top: auto;
   position: relative;
}
.elements-footer {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    position: relative;
    bottom: 0;
    flex-wrap: wrap;
    gap: 24px;
}
.social {
    display: flex;
    align-items: center;
    flex-direction: column;
}
#hyboxx {
    margin-bottom: 1%;
    width: 80%;
} 
.social ul {
 display: flex;
 justify-content: space-between;
 list-style: none;
 padding: 10px 40px;
 width: 70%;
 background-color: #02121878;
 border-radius: 30px;
 margin-top: 3%;
}
.contact {
    display: flex;
    text-align: center;
    justify-content: space-between;
    gap: 20px;
}
.contact p {
    font-family: "roboto";
    font-size: 1.5rem;
    text-transform: uppercase;
    margin: 0;
}
/* Sans padding bas, le dernier lien collait au bord du panneau.
   Pas de padding lateral : il desalignerait le badge, qui doit couvrir
   toute la largeur du panneau. */
/* Largeur fixe : les deux panneaux etaient cales sur celle de leur image de
   titre (285px). En texte, chacun se dimensionnerait sur son libelle et la
   paire deviendrait dissymetrique. */
.soutenir, .contact-us {
    width: 285px;
    background: #02121878;
    border-radius: 10px;
    padding-bottom: 14px;
    text-align: center;
}




/* ------------- NAVBAR MOBILE ------------- */
.mobile-navbar {
    display: none;
    position: fixed;
    width: 90%;
    border-radius: 10px;
    margin: 0 auto;
    top: 40px; 
    left: 0;
    right: 0;
    background: #07435c9c;
    height: 70px;
    z-index: 1000;
    padding: 0 20px;
    backdrop-filter: blur(10px);
}

.mobile-navbar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    max-width: 100%;
}

/* Bouton hamburger mobile */
.mobile-toggle {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    padding: 8px;
    z-index: 1001;
}

.hamburger-bar {
    width: 25px;
    height: 3px;
    background-color: white;
    margin: 3px 0;
    transition: 0.3s;
    border-radius: 2px;
}

/* Animation du bouton hamburger */
.mobile-toggle.is-active .hamburger-bar:nth-child(2) {
    opacity: 0;
}

.mobile-toggle.is-active .hamburger-bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.mobile-toggle.is-active .hamburger-bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

.mobile-boutique {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mobile-boutique-link {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-boutique-icon {
    height: 50px;
    width: auto;
    transition: transform 0.3s ease;
}

.mobile-boutique-icon:hover {
    transform: scale(1.1);
}

.mobile-profile {
    display: flex;
    align-items: center;
}

.mobile-profile-link {
    display: block;
}

.mobile-profile-avatar {
    height: 50px;
    width: 50px;
    border-radius: 10px;
    border: 3px solid #07435c93;
    transition: transform 0.3s ease;
}

.mobile-profile-avatar:hover {
    transform: scale(1.1);
}

/* Menu latéral mobile */
.mobile-sidebar {
    position: fixed;
    left: -300px;
    width: 300px;
    background: #07435c;
    z-index: 1002;
    transition: left 0.3s ease;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
    overflow-y: auto;
    top:0px;
    height: 100vh;
}

.mobile-sidebar.active {
    left: 0;
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 2px solid #07435c93;
    background: #07435c9c;
}

.sidebar-header h3 {
    color: white;
    font-family: "roboto";
    font-size: 1.5rem;
    margin: 0;
    text-transform: uppercase;
}

.sidebar-close {
    background: none;
    border: none;
    transform: translateY(-20px);
    color: white;
    font-size: 3rem;
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    transition: background-color 0.3s ease;
 
}



.sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-item {
    border-bottom: 1px solid #07435c93;
}

.sidebar-link {
    display: block;
    padding: 20px;
    color: white;
    text-decoration: none;
    font-family: "roboto";
    font-size: 1.2rem;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
}

.sidebar-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #00e0ff;
}

/* Overlay pour fermer le menu */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
}




/* ---------- BOUTIQUE ---------- */

#shop {
    display: flex !important;
    align-content: center !important;
    justify-content: center;
    transform: translateX(-10%);
}
h1 {
    text-align: center;

}
.card-body.pb-1 {
    display: none !important;
}
.col-12 .card {
    display: none !important;
}
.card.h-100 {
    background: transparent !important;
    border: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
}

.col-lg-9 .row.gy-4 .col-md-4 {
    background: none !important;
}

.h-100 .card-body{
    transform: translateY(-130px);
    margin-bottom: -130px;
}
.card-subtitle.mb-3 {
    margin-bottom: 30px !important;
}


/* ********** Ecran 13 pouces ********** */
@media (max-width: 1400px) {
    #nuage5 {
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1) scale(0.7);
        left:-50px;
    }
    #nuage6 {
        transform: scale(0.6);
        right: -100px;
    
    }
    .newnav {
        height: 55px;
    }
    #boutique {
        height: 48.5px;
    }
    .newnav li {
        font-size: 1.2rem;
    }
    .navbar-toggler {
        top: 2px;
    }
    .navbar-toggler-icon {
        height: 50px;
        width: 50px;
    }


    .home-header {
        height:  100vh;
    }
    .logo {
        height: 500px;
        width: 650px;
    }
   
    .ip {
        transform:translateY(-30px);
        width: 234px;
        height: 38.5px;   
    }
    .ip:hover {
     background: url(./img/hoveriphaut.png)center/cover;
     width: 234px;
        height: 38.5px; 
    }
    .home-header {
        height:  100vh;
    }
    /* min-height retire : la regle de base est desormais proportionnelle a la
       largeur, elle s'adapte deja sous 1400px. */

    .stats {
        transform: scale(0.75);
        padding-top: 420px;
    }

    .spacecard{
        justify-content: center;
    }
    .unique{
    transform: scale(0.6) translateY(-150px);
    margin: 0 -8% 0 -5%;
    }
    .con{
    transform: scale(0.6) translateY(-50px);
     margin: 0 -8% 0 0;
    }
    .record {
    transform: scale(0.6) translateY(-250px);;
     margin: 0 -8% 0 0;
    } 

    .join {
        transform: scale(0.75);
        margin-top:150px ;
    }
    /* .tuto se dimensionne en vw : pas de scale ici, il se cumulerait */
    .movecontainer {
        height: auto;
        background-position: top center !important;
    }
    .row.gy-3 {
        display: flex !important;
        flex-wrap: wrap !important;
        display: flex;
        gap: 8px; /* Espacement entre les box (réduis cette valeur) */
        justify-content: flex-start; /* Alignement à gauche (par défaut) */
        align-items: center; /* Alignement vertical (optionnel) */
        flex-wrap: wrap;
        margin-top: 250px !important; /* Permet le retour à la ligne si nécessaire */
    }

    .col-md-6 {
        transform: scale(0.6);
        margin: -100px -100px 0 -100px;
    }
    .container.content {
        padding-top: 20px !important;
    }
    .mb-3 input{
        min-height: 46px !important;
        font-size: 1.15rem !important;
    }

    .form-check input{
        min-height: unset !important;
    }

    .card-body h3{
        font-size: 1.3rem !important;
    }


    /* NB : le footer ne passe plus en colonne des 1400px (cela cassait la mise
       en page sur les portables 13"/~1280px, panneaux empiles et vides sur les
       cotes). L'empilement est reporte a <=900px (bloc plus bas dans le fichier). */
}





/* ********** mobile ********** */
@media (max-width: 768px) {
    #nuage5 {
        display: none;
    }
    #nuage6 {
        display: none;
    }
    .desktop-nav {
        display: none !important;
    }
    
    .mobile-navbar {
        display: block;
    }
    
    /* Promo banner fixe sur mobile */
    .promo-banner {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1001;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8rem;
    }
    
    .home-header {
        padding-top: 120px; /* 40px promo banner + 70px navbar mobile */
        height: 70vh !important;
    }
    
    /* width:140% + max-width:400px depassaient de l'ecran et le logo etait rogne
       sur les cotes : on le borne a la largeur disponible. */
    .logo {
        margin: 5% auto 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        text-align: center !important;
    }
    #logo {
        max-width: 100% !important;
    }
  
    /* margin-bottom: -205px fait remonter le footer sur le header. En mobile
       celui-ci est bien plus court : sans reserve en bas, le footer recouvre
       la carte. Le padding compense ce chevauchement. */
    .header-co {
        min-height: 650px !important;
        padding-bottom: 260px !important;
    }

    .container.content {
        padding-top: 120px !important;
    }
    .stats {
        width: 75%;
        padding-top: 420px;
    }
    /* transform: scale() reduisait le visuel mais pas la boite : les encarts
       gardaient des largeurs de 419/436/438px, donc trois centres differents
       dans un ecran de 390 -> ils etaient desalignes, et il fallait des marges
       negatives pour rattraper les vides. Ici on redimensionne pour de vrai. */
    .spacecard {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        height: auto;
    }
    .unique, .con, .record {
        transform: none;
        margin: 0;
        height: auto;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
    .unique { width: min(419px, 62vw); aspect-ratio: 419 / 483; }
    .con    { width: min(436px, 64vw); aspect-ratio: 436 / 467; }
    .record { width: min(438px, 64vw); aspect-ratio: 438 / 493; }
    /* 850px de marge ne servaient qu'a rattraper le debordement des encarts
       de statistiques, qui gardaient leur taille malgre le scale(0.4). */
    .rejoindre {
        margin-top: 40px;
    }
    .join {
        width: 70%;
    }
    /* Les 3 etapes s'empilent sur mobile et peuvent donc etre plus larges */
    .tuto {
        flex-direction: column;
        gap: 18px;
        padding-top: 30px;
    }
    #multijoueurs {
        width: min(400px, 62vw);
    }
    #addserver {
        width: min(350px, 55vw);
    }
    .ip2 {
        width: min(370px, 58vw);
    }
    /* En portrait la carte est bien plus haute que l'image de fond (ratio 1.23) :
       avec `contain` l'image se centre au milieu pendant que le formulaire part
       du haut, et le contenu sort du cadre. On reconstruit donc le panneau en
       CSS, dans le meme style que les autres pages, et le titre passe en texte. */
    .card-con, .card-con.reg {
        width: 100% !important;
        max-width: 460px;
        margin: 16px auto 0 !important;
        padding: 20px 18px 24px !important;
        transform: none !important;
        background: #0c3a54f2 !important;
        border: 3px solid rgba(255, 255, 255, .5);
        border-radius: 24px;
        box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
        zoom: 1 !important;
    }
    .card-con::before {
        content: "CONNEXION";
        display: block;
        font-family: "hybox-game", "Segoe UI", sans-serif;
        font-size: 1.7rem;
        letter-spacing: 1px;
        color: #bcdcea;
        text-align: center;
        margin-bottom: 16px;
    }
    .card-con.reg::before { content: "INSCRIPTION"; }
     .movecontainer {
        height: auto !important;
    }
    .row.gy-3 {
        margin: 0px !important;
        padding: 200px 0 100px  !important;
        display: flex !important;
        flex-direction: column !important;
       
      
    }
    .col-md-6 {
        transform: none;
        width: 173px !important;
        height: 221px !important;
        padding: 0 !important;
        margin: 50px 0 0 0!important;
    
        
    }
    .card.mb-4 {
        margin-top: 30px !important;
        border-radius:0 !important;
        justify-content: center !important;
    }
     .card.mb-4 a {
        display: flex !important;
        justify-content: center;
     }
    .card.mb-4 a:first-child{
        border-radius:5px 5px 0 0 !important;
    }
    .card-img-top {
        height: 70px !important;
        width: 95% !important;
        transform: translateX(1.5px); 
        border-radius: 0 !important;
        margin: 20px auto 0 auto;
    }

    .text-end .btn.btn-primary {
        border: 3px solid white !important;
        font-size: 0.8rem !important;
        margin: 0 !important;
        transform: translateY(10px);
    }
    .card-body h3 {
        transform: translateY(0px);
        font-size: 0.9rem !important;
        z-index: 50 !important;
        color: rgb(7, 66, 121);
        position: relative;
    }
    .card-body-logreg {
        padding-top: 0 !important;
    }

    .col-md-7 {
        width: unset !important;
    }
    .form-check {
        width: 100%;
    }

    .card-con.reg {
        padding: 8% 10% !important;
    }
  
   
    .col-md-8 {
        min-width: 350px;
        border: 2px solid white;
    }
    

    .card-body a{
        font-size: 0.4rem !important;
    }
    /* bottom: -70px descendait le bloc sans reserver l'espace correspondant :
       le copyright, lui, restait a sa place et se retrouvait recouvert. */
    .elements-footer {
        bottom: 0;
        margin-bottom: 12px;
    }

    .social ul {
        gap: 20px;
        width: 90%;
    }
    /* display:block cassait le centrage des panneaux (25px vers la gauche) :
       la mise en page en colonne centree est definie plus haut. */

    .soutenir {
        margin-bottom: 20px;
        padding-bottom: 10px;

    }
    .footer-titre {
        margin-bottom: 10px;
        font-size: 1.2rem;
        padding: 11px 8px 9px;
    }
    .contact p {
        font-size: 1rem;
    }

    .contact-us {
      
        padding-bottom: 10px;
    }


@media (min-width: 769px) {
    .mobile-navbar {
        display: none;
    }
    
    .desktop-nav {
        display: flex !important;
    }

    }
}
/* =========================================================
   BOUTIQUE HYBOX (scope .shop-hb) — premier jet
   ========================================================= */
.shop-hb {
    position: relative;
    z-index: 2;
    font-family: "roboto", sans-serif;
    color: #fff;
    padding: 10px 0 40px;
}
.shop-hb a { text-decoration: none; }

.shop-hb-title {
    text-align: center;
    text-transform: uppercase;
    font-size: 2.4rem;
    letter-spacing: 2px;
    color: #fff;
    text-shadow: 0 0 12px rgba(0, 224, 255, .8), 0 3px 0 rgba(0,0,0,.35);
    margin: 0 auto 26px;
    padding: 8px 26px;
    width: fit-content;
    background: #07435c9c;
    border: 3px solid #fff;
    border-radius: 14px;
}

.shop-hb-layout {
    display: flex;
    gap: 26px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.shop-hb-main { flex: 1 1 640px; min-width: 0; }
.shop-hb-side { flex: 0 0 260px; max-width: 100%; }

/* Panneau translucide générique */
.shop-hb-panel {
    background: #0c3a54e6;
    border: 2px solid rgba(255, 255, 255, .55);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35), inset 0 0 24px rgba(0, 224, 255, .08);
    padding: 18px 20px;
    margin-bottom: 22px;
}
.shop-hb-panel h2, .shop-hb-panel h3 { color: #fff; }

/* Sidebar */
.shop-hb-nav { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.shop-hb-nav a {
    display: block;
    padding: 11px 16px;
    color: #eaffff;
    background: #07435c9c;
    border: 2px solid rgba(255, 255, 255, .35);
    border-radius: 12px;
    font-size: 1.05rem;
    transition: .18s ease;
}
.shop-hb-nav a:hover { background: #0a5a7d; transform: translateX(3px); }
.shop-hb-nav a.active {
    background: linear-gradient(180deg, #00e0ff, #0090c0);
    border-color: #fff;
    color: #062a3a;
    font-weight: 700;
}
.shop-hb-user { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.shop-hb-user img { width: 46px; height: 46px; border-radius: 10px; border: 2px solid rgba(255,255,255,.5); }
.shop-hb-user .name { font-weight: 700; }
.shop-hb-user .money { color: #00e0ff; font-size: .95rem; }

/* Grille de packages */
.shop-hb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 20px;
}
.shop-hb-card {
    display: flex;
    flex-direction: column;
    background: #0c3a54e6;
    border: 2px solid rgba(255, 255, 255, .55);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .4);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.shop-hb-card:hover {
    transform: translateY(-6px);
    border-color: #00e0ff;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .5), 0 0 22px rgba(0, 224, 255, .35);
}
/* Les visuels fournis n'ont pas tous le meme cadrage (certains sont en portrait) :
   en "cover" ils seraient rognes n'importe ou. "contain" sur un fond dedie. */
.shop-hb-card__img {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: contain;
    padding: 14px;
    background: radial-gradient(circle at 50% 45%, #12587d 0%, #0a2c40 70%);
    border-bottom: 2px solid rgba(255, 255, 255, .22);
    transition: transform .25s ease;
}
.shop-hb-card:hover .shop-hb-card__img { transform: scale(1.06); }
.shop-hb-card__body { display: flex; flex-direction: column; gap: 8px; padding: 16px; flex: 1; }
.shop-hb-card__name {
    font-size: 1.15rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #fff;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
/* Deux lignes reservees pour que descriptions et prix restent alignes d'une
   carte a l'autre. Reserve inutile sur les tuiles de categorie, qui n'ont
   qu'un titre : elle y creerait un vide. */
.shop-hb-card--produit .shop-hb-card__name { min-height: 2.5em; }
.shop-hb-card__desc { font-size: .9rem; color: #cfeefb; flex: 1; }
/* Le prix etait cyan avec un halo cyan : le halo bavait sur le texte et le
   rendait flou, surtout avec la police du jeu qui est epaisse. Fond contraste
   + contour sombre a la place. */
.shop-hb-card__price {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 1.25rem;
    letter-spacing: .5px;
    color: #08222f;
    background: linear-gradient(180deg, #6ff0ff, #00c8ee);
    border: 2px solid #eafcff;
    border-radius: 14px;
    padding: 5px 16px;
    box-shadow: 0 3px 0 rgba(0, 0, 0, .35);
    text-shadow: none;
}
.shop-hb-card__price del {
    color: #08222f99;
    font-size: .9rem;
    margin-right: 2px;
    text-shadow: none;
}

/* Boutons boutique (immunisés du .btn-primary transparent global) */
.shop-hb-btn {
    display: inline-block;
    text-align: center;
    cursor: pointer;
    padding: 10px 18px !important;
    background: linear-gradient(180deg, #00e0ff, #0090c0) !important;
    color: #062a3a !important;
    border: 2px solid #fff !important;
    border-radius: 12px !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 0 #05688a, 0 6px 12px rgba(0,0,0,.35) !important;
    transition: .15s ease;
}
.shop-hb-btn:hover { filter: brightness(1.08); transform: translateY(-2px); color: #062a3a !important; }
.shop-hb-btn:active { transform: translateY(1px); box-shadow: 0 2px 0 #05688a !important; }
.shop-hb-btn--ghost {
    background: #07435c9c !important;
    color: #fff !important;
    box-shadow: none !important;
}
.shop-hb-btn--block { display: block; width: 100%; }

.shop-hb-empty {
    background: #0c3a54e6;
    border: 2px dashed rgba(255,255,255,.4);
    border-radius: 14px;
    padding: 26px;
    text-align: center;
    color: #cfeefb;
}
.shop-hb-progress { height: 16px; background: #07435c; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255,255,255,.3); }
.shop-hb-progress > div { height: 100%; background: linear-gradient(90deg, #00e0ff, #0090c0); }

@media (max-width: 991px) {
    .shop-hb-side { flex-basis: 100%; order: 2; }
    .shop-hb-main { order: 1; }
}

/* Modale package boutique */
.shop-hb-modal { background: #0c3a54; border: 2px solid rgba(255,255,255,.55); border-radius: 16px; color: #fff; }
.shop-hb-modal .modal-header, .shop-hb-modal .modal-footer { border-color: rgba(255,255,255,.2); }
.shop-hb-modal .modal-body { color: #eaffff; }
.shop-hb-modal label { color: #cfeefb; }

/* ===== NOUS REJOINDRE : texture pack / installer minecraft ===== */
.link {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 70px;
    width: 70%;
    max-width: 100%;
    margin: 60px auto 0;
    flex-wrap: wrap;
    position: relative;
    z-index: 3;
}
.help-group { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 100%; }
.help-bubble {
    position: relative;
    background: #fff;
    color: #17384a;
    font-family: "roboto";
    text-transform: uppercase;
    font-size: 1.3rem;
    letter-spacing: 1px;
    padding: 14px 28px;
    border-radius: 18px;
    box-shadow: 0 6px 0 rgba(0, 0, 0, .18);
    white-space: nowrap;
}
.help-bubble::after {
    content: "";
    position: absolute;
    bottom: -12px;
    left: 34px;
    border: 12px solid transparent;
    border-top-color: #fff;
    border-bottom: 0;
}
/* ---------- Page vote ---------- */
/* Le padding compense le footer qui remonte de 205px */
.header-co--vote {
    background: url(./img/vote-bg.png) center top/cover no-repeat, #c9764a !important;
    min-height: 0;
    padding-bottom: 270px;
}
/* Pages a contenu court (mot de passe, verification, A2F) : le min-height de
   1347px de .header-co laissait ~800px de vide sous le formulaire.
   Hauteur pilotee par le contenu ; le padding compense le footer qui remonte
   de 205px. */
.header-co--compact {
    min-height: 0 !important;
    padding-bottom: 260px !important;
}

/* La navbar est en bleu translucide : sur l'orange de cette page elle virait au
   gris-vert. On la passe en brun, dans la palette de la page. */
.header-co--vote .newnav {
    background: #4a2510ab;
}
.header-co--vote .navbar-toggler-icon {
    border-color: #4a2510ab;
}
.header-co--vote .mobile-navbar-container,
.header-co--vote .mobile-navbar {
    background: #4a2510d9;
}
.vote-hb { max-width: 1000px; margin: 0 auto; padding: 20px 16px 0; }

/* width:fit-content : le voile de chargement est en inset:0 sur cette boite.
   En pleine largeur (1000px) il debordait largement des boutons. */
.vote-hb-sites {
    position: relative;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 42px;
    text-align: center;
}
.vote-hb-sitelist { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.vote-hb-form { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 380px; margin: 0 auto; }
/* Le champ doit suivre la palette de la page (rocheuse) et non le bleu de la
   regle `input` globale, qui donnait un gris-vert terne sur l'orange.
   !important necessaire : cette regle globale en abuse. */
.vote-hb-form .form-control {
    background: #4a2510e8 !important;
    border: 3px solid #ffdfb5 !important;
    border-radius: 26px !important;
    color: #fff !important;
    font-family: "hybox-game", "Segoe UI", sans-serif !important;
    font-size: 1.25rem !important;
    text-align: center !important;
    padding: 12px 22px !important;
    box-shadow: inset 0 4px 10px rgba(0, 0, 0, .55) !important;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.vote-hb-form .form-control::placeholder {
    color: #c99a6d !important;
    opacity: 1;
}
.vote-hb-form .form-control:hover {
    background: #572c13e8 !important;
}
.vote-hb-form .form-control:focus {
    border-color: #ffb347 !important;
    background: #572c13f2 !important;
    box-shadow: inset 0 4px 10px rgba(0, 0, 0, .55),
                0 0 0 4px rgba(255, 179, 71, .35) !important;
}

.vote-hb-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: "hybox-game", "Segoe UI", sans-serif;
    font-size: 1.35rem;
    color: #fff !important;
    text-decoration: none;
    background: linear-gradient(180deg, #ff9d3c, #e9701a);
    padding: 12px 30px;
    border: 4px solid #fff;
    border-radius: 18px;
    box-shadow: 0 6px 0 #8a4a22, 0 10px 16px rgba(0, 0, 0, .3);
    cursor: pointer;
    transition: .15s ease;
}
.vote-hb-btn:hover { transform: translateY(-3px); filter: brightness(1.08); }
.vote-hb-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #8a4a22; }
.vote-hb-btn .vote-timer:empty { display: none; }
.vote-hb-btn .vote-timer {
    background: #00000038;
    border-radius: 8px;
    padding: 2px 8px;
    font-size: .85rem;
}

.vote-hb-note {
    font-family: "hybox-game", "Segoe UI", sans-serif;
    font-size: 1.15rem;
    color: #fff;
    text-align: center;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .35);
    margin: 14px 0 0;
}
.vote-hb-empty {
    font-size: 1.05rem;
    color: #f6e7d4;
    background: linear-gradient(180deg, rgba(58, 32, 18, .5), rgba(36, 19, 10, .62));
    border: 2px solid rgba(255, 196, 130, .32);
    border-radius: 16px;
    padding: 20px 26px;
    text-align: center;
    letter-spacing: .3px;
    box-shadow: inset 0 2px 12px rgba(0, 0, 0, .35);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
.vote-hb-goal { max-width: 620px; margin: 0 auto 34px; }

/* Colonnes calees sur les proportions de vote-ligne.png.
   Le fond est l'asset fond_tableau.png fourni avec la maquette : sans lui les
   libelles de l'en-tete flottaient directement sur la roche. */
.vote-hb-board {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    padding: 16px 18px 22px;
}
.vote-hb-board::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url(./img/vote-fond-tableau.png) center/100% 100% no-repeat;
    opacity: .5;
    border-radius: 20px;
    pointer-events: none;
}
.vote-hb-board > * { position: relative; }

/* En-tete du classement : memes colonnes que les lignes */
.vote-hb-head {
    display: grid;
    grid-template-columns: 7.366% 27.832% 27.728% 37.074%;
    align-items: center;
    padding: 4px 0 2px;
}
.vote-hb-head .vote-hb-cell {
    font-family: "hybox-game", "Segoe UI", sans-serif;
    color: #fff5e2;
    text-transform: uppercase;
    text-align: center;
    font-size: clamp(.8rem, 1.3vw, 1.15rem);
    letter-spacing: .5px;
    text-shadow: 0 2px 0 rgba(90, 40, 10, .85), 0 0 10px rgba(0, 0, 0, .5);
    padding: 0 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vote-hb-row {
    display: grid;
    grid-template-columns: 7.366% 27.832% 27.728% 37.074%;
    align-items: center;
    background: url(./img/vote-ligne.png) center/100% 100% no-repeat;
    aspect-ratio: 1439 / 106;
    min-height: 58px;
}
.vote-hb-cell {
    font-family: "hybox-game", "Segoe UI", sans-serif;
    color: #fff;
    text-align: center;
    font-size: clamp(.85rem, 1.5vw, 1.25rem);
    text-shadow: 0 2px 0 rgba(0, 0, 0, .4);
    padding: 0 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Colonne etroite : padding minimal pour ne pas tronquer le chiffre */
.vote-hb-cell--rank { padding: 0 2px; }
.vote-hb-cell--reward { color: #ffe9a8; }

#vote-card .spinner-parent { display: none; }
#vote-card.voting .spinner-parent {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    inset: 0;
    background: rgba(0, 0, 0, .35);
    border-radius: 16px;
    z-index: 10;
}

@media (max-width: 700px) {
    .vote-hb-row { aspect-ratio: auto; padding: 10px 0; }
    /* Les colonnes sont calees sur l'asset et ne peuvent pas s'elargir : on
       recupere de la place sur le padding pour moins tronquer les pseudos. */
    .vote-hb-cell { font-size: .78rem; padding: 0 3px; letter-spacing: 0; }
    .vote-hb-head .vote-hb-cell { font-size: .68rem; padding: 0 2px; }
    .vote-hb-board { padding: 12px 8px 16px; }
}

/* Pages d'erreur (404, 403, 500...) */
.error-hb {
    max-width: 620px;
    margin: 40px auto;
    padding: 40px 32px;
    text-align: center;
    background: #0c3a54f0;
    border: 3px solid rgba(255, 255, 255, .5);
    border-radius: 24px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
}
.error-hb__code {
    font-family: "hybox-game", "Segoe UI", sans-serif;
    font-size: 5rem;
    line-height: 1;
    color: #00e0ff;
    text-shadow: 0 4px 0 rgba(0, 0, 0, .35);
}
.error-hb__title {
    font-family: "hybox-game", "Segoe UI", sans-serif;
    font-size: 1.8rem;
    color: #fff;
    margin: 10px 0 6px;
}
.error-hb__msg { color: #cfeefb; margin-bottom: 24px; }


/* Retour visuel a la copie de l'IP */
.copy-ip { position: relative; display: block; }
.copy-ip::after {
    content: "Copié !";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.8);
    background: #1c7a34;
    color: #fff;
    font-family: "hybox-game", "Segoe UI", sans-serif;
    font-size: 1.4rem;
    padding: 6px 22px;
    border-radius: 14px;
    border: 3px solid #fff;
    pointer-events: none;
    opacity: 0;
    transition: .18s ease;
}
.copy-ip--done::after { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* Boutons Lien / Java / Bedrock (normal + hover) */
.game-btn-row { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.game-btn {
    display: block;
    background: center / contain no-repeat;
    text-decoration: none;
    transition: transform .15s ease;
}
/* Libelle dans l'asset : conserve pour l'accessibilite */
.game-btn span {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.game-btn:hover { transform: translateY(-3px); }
.game-btn:active { transform: translateY(2px); }

/* aspect-ratio : les boutons retrecissent sans se deformer sur petit ecran */
.game-btn--lien, .game-btn--java { width: min(199px, 42vw); aspect-ratio: 199 / 84; }
.game-btn--bedrock { width: min(275px, 46vw); aspect-ratio: 275 / 83; }

.game-btn--lien { background-image: url(./img/lien.png); }
.game-btn--lien:hover { background-image: url(./img/lien-h.png); }
.game-btn--java { background-image: url(./img/java.png); }
.game-btn--java:hover { background-image: url(./img/java-h.png); }
.game-btn--bedrock { background-image: url(./img/bedrock.png); }
.game-btn--bedrock:hover { background-image: url(./img/bedrock-h.png); }

/* Tableaux boutique/vote */
.shop-hb-table { width: 100%; border-collapse: collapse; color: #eaffff; }
.shop-hb-table th, .shop-hb-table td { padding: 11px 12px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.15); }
.shop-hb-table thead th { color: #00e0ff; text-transform: uppercase; font-size: .88rem; letter-spacing: 1px; }
.shop-hb-table tbody tr:last-child th, .shop-hb-table tbody tr:last-child td { border-bottom: none; }
/* Champs boutique / article : creux + focus visible, comme la carte connexion */
.shop-hb .form-control {
    background: #072f45e6 !important;
    border: 3px solid rgba(255, 255, 255, .85) !important;
    color: #fff !important;
    border-radius: 18px !important;
    text-align: center;
    padding: 10px 18px;
    box-shadow: inset 0 3px 9px rgba(0, 0, 0, .45);
    transition: border-color .18s ease, box-shadow .18s ease;
}
.shop-hb .form-control::placeholder { color: #8fb4c6 !important; opacity: 1; }
.shop-hb .form-control:focus {
    border-color: #7ee3ff !important;
    box-shadow: inset 0 3px 9px rgba(0, 0, 0, .45),
                0 0 0 4px rgba(126, 227, 255, .28) !important;
}
.shop-hb-votesites { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.shop-hb-voteform { max-width: 380px; margin: 0 auto; }

/* Nouveautés (accueil) */
.home-news {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    max-width: 820px;
    margin: 0 auto;
    padding: 0 16px;
    position: relative;
    z-index: 3;
}
.home-news-item {
    display: flex;
    flex-direction: column;
    width: auto;
    max-width: 100%;
}
/* Nombre impair : le dernier bloc, seul sur sa ligne, occupe toute la largeur. */
.home-news-item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}
.home-news-item__title {
    display: inline-block;
    color: #ffffff;
    background: #0c3a54f2;
    border: 2px solid rgba(255, 255, 255, .6);
    border-radius: 12px;
    padding: 11px 24px;
    font-family: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: .96rem;
    letter-spacing: 1px;
    margin: 0 auto 16px;
    text-align: center;
    text-shadow: 0 0 10px rgba(0, 224, 255, .55);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
    position: relative;
    z-index: 2;
}
.home-news-card {
    display: flex;
    flex-direction: column;
    flex: 1;
    background: #0c3a54f0;
    border: 2px solid rgba(255, 255, 255, .5);
    border-radius: 20px;
    padding: 16px 16px 10px;
    text-decoration: none;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .42);
    transition: transform .28s cubic-bezier(.2, .7, .3, 1), box-shadow .28s ease, border-color .28s ease;
}
.home-news-card:hover {
    transform: translateY(-8px);
    border-color: #00e0ff;
    box-shadow: 0 16px 36px rgba(0, 0, 0, .5), 0 0 24px rgba(0, 224, 255, .35);
}
.home-news-card__img {
    width: 100%;
    height: 188px;
    object-fit: cover;
    border-radius: 13px;
    display: block;
    margin-bottom: 15px;
    box-shadow: inset 0 0 0 1px rgba(11, 42, 66, .06);
    transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}
.home-news-card:hover .home-news-card__img { transform: scale(1.06); }
.home-news-card__excerpt {
    color: #cfeefb;
    font-size: .93rem;
    line-height: 1.65;
    margin: 0 3px;
    font-family: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
    font-weight: 400;
    flex: 1;
}
.home-news-card__img { box-shadow: none; }
.home-news-card::after {
    content: 'Lire la suite →';
    display: block;
    margin: 12px 2px 8px;
    color: #00e0ff;
    font-family: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .4px;
    transition: color .2s ease, transform .2s ease;
}
.home-news-card:hover::after { color: #00b3d8; transform: translateX(3px); }
.home-news-card__img--ph {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #1c6f97, #0e3b57);
    color: rgba(255, 255, 255, .55); font-size: 2.4rem;
}

/* Liens footer cliquables.
   display:inline-block + padding : sans ca la zone cliquable ne fait que la
   hauteur du texte (15px), invisable au doigt. */
.footer a { color: inherit; text-decoration: none; transition: color .2s ease, transform .2s ease; }
/* Boutons cadres : en texte nu ils flottaient dans le panneau. Chacun reprend
   la teinte de son badge (magenta pour soutenir, bleu pour contacter).
   Largeur calee sur celle du badge, qui couvre tout le panneau : des boutons
   plus etroits deséquilibraient le bloc. */
.footer .soutenir p a, .footer .contact-us p a {
    display: block;
    width: 84%;
    margin: 0 auto;
    padding: 10px 12px;
    line-height: 20px;
    border: 2px solid;
    border-radius: 14px;
    background: #ffffff0f;
    box-shadow: 0 3px 0 rgba(0, 0, 0, .35);
    transition: background-color .18s ease, border-color .18s ease,
                transform .18s ease, color .18s ease;
}
.footer .soutenir p a { border-color: #9e12bc; }
.footer .soutenir p a:hover {
    background: #9e12bc4d;
    border-color: #e05cff;
    color: #f7c9ff !important;
    transform: translateY(-2px);
}
.footer .contact-us p a { border-color: #1085b6; }
.footer .contact-us p a:hover {
    background: #1085b64d;
    border-color: #5fd8ff;
    color: #c9f2ff !important;
    transform: translateY(-2px);
}
.footer .soutenir p a:active, .footer .contact-us p a:active {
    transform: translateY(1px);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}
.footer .social ul a { display: inline-flex; padding: 6px; transition: transform .2s ease; }
.footer .social ul a:hover { transform: translateY(-3px) scale(1.1); }
.footer .soutenir p, .footer .contact-us p { margin-bottom: 9px; }
.footer .soutenir p:last-of-type, .footer .contact-us p:last-of-type { margin-bottom: 0; }

/* Les deux intitules du pied de page etaient des images figees dans une police
   generique, alors que le reste des visuels utilise celle du jeu. Refaits en
   texte : la police suit le theme et le libelle reste modifiable. */
.footer-titre {
    margin: 0 0 20px;
    padding: 14px 10px 12px;
    border-radius: 10px 10px 0 0;
    font-size: 1.5rem;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .5);
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2);
}
.soutenir .footer-titre {
    background: linear-gradient(180deg, #cf49ec, #9e12bc);
    border-bottom: 2px solid #e05cff;
}
.contact-us .footer-titre {
    background: linear-gradient(180deg, #2ec2f5, #1085b6);
    border-bottom: 2px solid #5fd8ff;
}

/* Copyright footer */
.footer-copyright {
    position: static;
    text-align: center;
    color: #cfe6f0;
    font-size: .85rem;
    font-family: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
    letter-spacing: .3px;
    margin: 6px 0 0;
    z-index: 4;
}

/* Chiffres des statistiques (dans le panneau bois) */
.unique, .con, .record { position: relative; }
.spacecard .stat-num {
    position: absolute;
    left: 50%;
    top: 53%;
    transform: translate(-50%, -50%);
    font-family: "roboto";
    font-weight: 900;
    font-size: 2.8rem;
    color: #fff;
    text-shadow: 0 3px 0 rgba(0,0,0,.35), 0 0 10px rgba(0,0,0,.4);
    z-index: 2;
    pointer-events: none;
    line-height: 1;
}

/* Boutique — variantes boutons + panier */
.shop-hb-btn--danger { background: linear-gradient(180deg, #ff6b6b, #c0392b) !important; color: #fff !important; box-shadow: 0 4px 0 #8e2418, 0 6px 12px rgba(0,0,0,.3) !important; }
.shop-hb-btn--danger:hover { color: #fff !important; }
.shop-hb-btn--sm { padding: 7px 13px !important; font-size: .85rem !important; border-radius: 10px !important; }
.shop-hb h5 { color: #fff; font-weight: 700; margin-bottom: 12px; }
.shop-hb .input-group { display: flex; gap: 8px; align-items: stretch; }
.shop-hb .input-group .form-control { flex: 1; }
.shop-hb-total { text-align: right; color: #00e0ff; font-size: 1.35rem; font-weight: 800; text-shadow: 0 0 10px rgba(0,224,255,.4); margin: 14px 0; }
.shop-hb-table .form-control { max-width: 90px; margin: 0 auto; }
.shop-hb-actions { display: flex; align-items: center; gap: 12px; margin-top: 18px; }

/* Page article (post) */
.post-hb-img { width: 100%; max-height: 380px; object-fit: cover; border-radius: 18px; margin-bottom: 22px; box-shadow: 0 14px 30px rgba(0,0,0,.35); display: block; }
.post-hb-content { color: #e6f4fb; line-height: 1.7; font-family: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif; }
.post-hb-content a { color: #00e0ff; }
.post-hb-content h1, .post-hb-content h2, .post-hb-content h3, .post-hb-content strong { color: #fff; }
.post-hb-content img { max-width: 100%; border-radius: 10px; }
.shop-hb .form-control { width: 100%; }
.shop-hb textarea.form-control { min-height: 110px; padding: 12px; text-align: left; }

/* Spenbeb Game : police des assets */
@font-face {
    font-family: "hybox-game";
    src: url(./font/SpenbebGame.otf) format("opentype");
    font-display: swap;
}
.help-bubble {
    font-family: "hybox-game", "Segoe UI", sans-serif !important;
    font-size: 1.5rem !important;
    letter-spacing: .5px;
    color: #4a3524;
    padding: 12px 26px !important;
}

/* Ecrans peu hauts (portables 900 / 768 / 720) : la carte connexion-inscription
   doit rester entierement visible. `zoom` reduit la carte ET sa boite, donc la
   page ne deborde pas ; les proportions du visuel sont conservees. */
/* Le zoom exact est calcule au chargement (auth-fit.js) : la taille naturelle de
   la carte depend a la fois de la largeur et de la hauteur dispo, des paliers
   CSS fixes ne peuvent pas couvrir toutes les resolutions.
   Le padding vertical, lui, ne se reduit pas avec le zoom (il est en % de la
   largeur du parent) : sur un ecran court on l'allege pour laisser au zoom de
   quoi travailler. */
@media (max-height: 900px) {
    .card-con { margin-top: 2%; }
}
@media (max-height: 860px) {
    .card-con { margin-top: 1%; padding-top: 7%; padding-bottom: 2%; }
    .card-con.reg { padding-top: 6% !important; padding-bottom: 2% !important; }
}
@media (max-height: 760px) {
    .card-con { margin-top: 0; padding-top: 6%; padding-bottom: 1%; }
    .card-con.reg { padding-top: 5% !important; padding-bottom: 1% !important; }
}

/* ---------- Police du jeu sur toute l'interface ----------
   Spenbeb Game est une police d'affichage : parfaite pour les titres, boutons,
   menus et libelles, mais illisible sur un paragraphe. Elle est donc posee sur
   l'habillage, et le texte long (articles, extraits, tableaux de donnees) garde
   une police lisible. */
.newnav,
.newnav li,
.promo-banner,
.sidebar-link,
.sidebar-header h3,
.dropdown-item,
.footer .soutenir p a,
.footer .contact-us p a,
.footer-titre,
.footer-copyright,
.form-label,
.form-check,
.form-check label,
.spacecard .stat-num,
.card-con .form-control,
.card-template h3,
#templatebtn,
.shop-hb-title,
.shop-hb-card__name,
.shop-hb-card__price,
.shop-hb-btn,
.shop-hb-nav a,
.shop-hb-table thead th,
.home-news-item__title,
.home-news-card::after,
.col-md-7 a,
.vote-hb-btn {
    font-family: "hybox-game", "Segoe UI", sans-serif !important;
}

/* La police est plus large et plus haute que Roboto : sans reglage le menu
   deborde et les capitales se touchent. */
.newnav li { font-size: 1.3rem; letter-spacing: .5px; }
.promo-banner { font-size: 1.05rem; letter-spacing: .5px; }
.form-label { font-size: 1.05rem; letter-spacing: .5px; }
.form-check label { font-size: 1.05rem; }
/* Le badge au-dessus a des capitales de ~43px : a 1.05rem les boutons faisaient
   3,6 fois plus petit. 1.5rem garde la hierarchie sans casser l'harmonie. */
.footer .soutenir p a, .footer .contact-us p a { font-size: 1.5rem; letter-spacing: .5px; }
.footer-copyright { font-size: .95rem; letter-spacing: .3px; }
.home-news-item__title { font-size: 1.05rem; letter-spacing: .5px; }
.shop-hb-table thead th { font-size: .95rem; }

/* Texte courant : Baloo 2, meme famille arrondie que Spenbeb Game mais lisible
   en petit. Licence SIL Open Font — libre en usage commercial. */
@font-face {
    font-family: "hybox-texte";
    src: url(./font/Baloo2.ttf) format("truetype");
    font-weight: 500;
    font-display: swap;
}

.shop-hb,
.shop-hb p,
.shop-hb li,
.shop-hb label,
.post-hb-content,
.post-hb-content p,
.post-hb-content li,
.home-news-card__excerpt,
.shop-hb-table td,
.shop-hb-card__desc,
.vote-hb-note,
.vote-hb-empty,
.error-hb__msg,
.footer-copyright {
    font-family: "hybox-texte", "Segoe UI", system-ui, sans-serif !important;
}

/* Baloo 2 a un oeil plus petit que Segoe UI : on remonte legerement la taille */
.home-news-card__excerpt { font-size: 1rem; line-height: 1.5; }
.post-hb-content { font-size: 1.05rem; line-height: 1.65; }
.shop-hb-table td { font-size: 1rem; }

/* ---------- Ajustements mobiles poses apres le bloc police ----------
   Le bloc police plus haut fixe des tailles pour le desktop ; comme il vient
   apres les media queries d'origine, il les ecrasait. Ces regles remettent les
   tailles mobiles. */
@media (max-width: 768px) {
    /* Le bandeau est fixe et son texte est libre (regle dans l'admin) : il doit
       pouvoir passer sur deux lignes plutot que d'etre coupe. */
    .promo-banner {
        height: auto;
        min-height: 30px;
        padding: 5px 12px;
        font-size: .78rem;
        line-height: 1.3;
        letter-spacing: 0;
    }
    .newnav li { font-size: 1.05rem; }
    .footer .soutenir p a, .footer .contact-us p a { font-size: 1.15rem; }
    .form-label { font-size: .95rem; }
    .form-check label { font-size: .95rem; }
}

/* ---------- Messages (succes / erreur / info) ----------
   Le theme n'en avait aucun : les messages du vote et de la boutique
   s'affichaient avec le style Bootstrap brut. */
.alert {
    font-family: "hybox-game", "Segoe UI", sans-serif;
    font-size: 1.1rem;
    letter-spacing: .3px;
    text-align: center;
    border: 3px solid;
    border-radius: 16px;
    padding: 14px 22px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
    color: #fff;
}
.alert-success { background: #1c7a34e6; border-color: #8dffab; }
.alert-danger, .alert-error { background: #a51f2de6; border-color: #ff96a1; }
.alert-warning { background: #a86a12e6; border-color: #ffd77a; }
.alert-info, .alert-primary { background: #0c5a7ae6; border-color: #8ae7ff; }
.alert a { color: #fff; text-decoration: underline; }

/* Voile de chargement du vote : un rectangle noir sur la roche orange faisait
   tache. Teinte chaude + flou, et une pastille lisible autour du spinner. */
/* Les boutons portent `box-shadow: 0 6px 0` + un flou de 16px : leur ombre
   depasse sous leur boite. En restant a inset:0 le voile s'arretait au-dessus
   et laissait le relief dehors. */
#vote-card.voting .spinner-parent {
    inset: -8px -14px -20px;
    background: rgba(60, 28, 10, .55);
    backdrop-filter: blur(3px);
    border-radius: 24px;
}
#vote-card .spinner-border {
    width: 2.6rem;
    height: 2.6rem;
    border-width: .3em;
    color: #ffb347 !important;
}

/* ---------- Page profil ----------
   La vue etait celle du coeur, non thematisee : les regles globales du theme
   (centrage, tailles) la cassaient — puces vides, texte illisible. */
.profil-hb__tete {
    display: flex;
    gap: 26px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.profil-hb__avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.profil-hb__avatar img {
    width: 128px;
    height: 128px;
    border-radius: 18px;
    border: 3px solid rgba(255, 255, 255, .6);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
    image-rendering: pixelated;
}
.profil-hb__role {
    font-family: "hybox-game", "Segoe UI", sans-serif;
    font-size: .95rem;
    padding: 5px 14px;
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, .45);
    white-space: nowrap;
}
.profil-hb__infos { flex: 1 1 320px; min-width: 0; }
.profil-hb__pseudo {
    font-family: "hybox-game", "Segoe UI", sans-serif;
    font-size: 2rem;
    color: #fff;
    text-shadow: 0 3px 0 rgba(0, 0, 0, .35);
    margin: 0 0 14px;
    text-align: left;
    word-break: break-word;
}

/* Liste en paires libelle / valeur : l'original etait un <ul> dont les puces
   restaient a gauche pendant que le texte partait au centre. */
.profil-hb__liste { margin: 0 0 18px; }
.profil-hb__liste > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.profil-hb__liste > div:last-child { border-bottom: none; }
.profil-hb__liste dt {
    font-family: "hybox-game", "Segoe UI", sans-serif;
    color: #7ee3ff;
    font-weight: normal;
    letter-spacing: .3px;
    flex-shrink: 0;
}
.profil-hb__liste dd {
    font-family: "hybox-texte", "Segoe UI", sans-serif;
    color: #eaffff;
    margin: 0;
    text-align: right;
    min-width: 0;
    word-break: break-all;
}
.profil-hb__uuid { font-size: .82rem; opacity: .75; }

.profil-hb__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.profil-hb__actions form { margin: 0; }

.profil-hb__grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    align-items: start;
}
.profil-hb__grille .shop-hb-panel { margin-bottom: 0; }
.profil-hb__note { color: #cfeefb; margin-bottom: 10px; }
.profil-hb__aide { color: #8fb4c6; display: block; margin-top: 6px; font-size: .82rem; }

.profil-hb__zone-rouge {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .15);
    text-align: center;
}

/* Les libelles de formulaire sont alignes a gauche ici, pas centres */
.profil-hb__grille .form-label,
.profil-hb .form-label { text-align: left; display: block; }
.profil-hb__grille .mb-3 { text-align: left; margin: 0 0 14px 0 !important; }

@media (max-width: 620px) {
    .profil-hb__tete { flex-direction: column; align-items: center; }
    .profil-hb__pseudo { text-align: center; }
    .profil-hb__actions { justify-content: center; }
    .profil-hb__liste > div { flex-direction: column; gap: 2px; }
    .profil-hb__liste dd { text-align: left; }
}


/* Pages d'authentification secondaires (confirmation, reinitialisation,
   verification, A2F) : elles utilisaient la carte Bootstrap brute. */
.auth-hb__note {
    font-family: "hybox-texte", "Segoe UI", sans-serif;
    color: #cfeefb;
    margin-bottom: 12px;
    text-align: center;
}
.auth-hb__lien { margin: 14px 0 0; text-align: center; }
.auth-hb__lien a {
    font-family: "hybox-game", "Segoe UI", sans-serif;
    color: #7ee3ff;
    text-decoration: none;
    transition: color .15s ease;
}
.auth-hb__lien a:hover { color: #bff2ff; text-decoration: underline; }
.auth-hb__code {
    font-size: 1.6rem !important;
    letter-spacing: 8px !important;
    text-align: center !important;
}
.shop-hb .mb-3 { text-align: left; margin: 0 0 14px 0 !important; }
.shop-hb .form-label { text-align: left; display: block; margin-bottom: 6px; }

/* ---------- Bouton "afficher le mot de passe" ----------
   Le natif d'Edge (::-ms-reveal) n'est pas stylable et Chrome/Firefox n'en ont
   pas : on le masque et on pose le notre, identique partout. */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}

.hb-pass { position: relative; display: block; }
.hb-pass .form-control { padding-right: 52px !important; }

.hb-pass__oeil {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #8fb4c6;
    cursor: pointer;
    transition: color .18s ease, background-color .18s ease, transform .18s ease;
}
.hb-pass__oeil:hover { color: #7ee3ff; background: #ffffff1a; }
.hb-pass__oeil:active { transform: translateY(-50%) scale(.9); }
.hb-pass__oeil:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(126, 227, 255, .45);
    color: #7ee3ff;
}

/* Les deux icones sont superposees : l'une sort, l'autre entre. */
.hb-pass__i {
    position: absolute;
    font-size: 1.05rem;
    line-height: 1;
    transition: opacity .2s ease, transform .2s ease;
}
.hb-pass__i--on  { opacity: 0; transform: scale(.6) rotate(-12deg); }
.hb-pass__i--off { opacity: 1; transform: scale(1) rotate(0); }
.hb-pass--visible .hb-pass__i--on  { opacity: 1; transform: scale(1) rotate(0); }
.hb-pass--visible .hb-pass__i--off { opacity: 0; transform: scale(.6) rotate(12deg); }
.hb-pass--visible .hb-pass__oeil { color: #7ee3ff; }

/* Sur la page vote la palette est chaude */
.vote-hb-form .hb-pass__oeil { color: #c99a6d; }
.vote-hb-form .hb-pass__oeil:hover,
.vote-hb-form .hb-pass--visible .hb-pass__oeil { color: #ffb347; }

@media (prefers-reduced-motion: reduce) {
    .hb-pass__i, .hb-pass__oeil { transition: none; }
}

/* La ligne "Se souvenir / Oublié?" tient sur une seule ligne en desktop, mais
   sur le panneau mobile etroit les deux libelles se chevauchent : on repasse
   en colonne centree (ciblage haute specificite pour battre la regle de base). */
@media (max-width: 768px) {
    .card-body-logreg .row.gy-3.mb-3 {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 14px !important;
        margin: 6% 0 2% !important;
        padding: 0 !important;
    }
}

/* =========================================================================
   ACCUEIL MOBILE - compactage
   Le design desktop empile de grands px fixes (padding-bottom 830px,
   stats padding-top 420px, cartes stats 419x483...) qui restent enormes en
   mobile et rendent la page interminable. On ramene tout a l'echelle mobile.
   Bloc en fin de fichier = priorite sur les regles precedentes.
   ========================================================================= */
@media (max-width: 768px) {
    .main-container {
        min-height: auto !important;
        padding-top: 0 !important;
        padding-bottom: 40px !important;
        margin-top: -40px !important;
        margin-bottom: 0 !important;
    }
    .stats {
        padding-top: 90px !important;
        width: 70% !important;
    }
    .spacecard {
        gap: 2px !important;
        margin-top: -10px !important;
    }
    .rejoindre {
        margin-top: 20px !important;
    }
    .movecontainer {
        margin-top: 0 !important;
        margin-bottom: 0 !important; /* annule le -110px desktop qui faisait passer le logo footer sur les news */
        padding-top: 24px !important;
        padding-bottom: 44px !important;
    }

    /* News : grille 2 colonnes compacte (cartes courtes) */
    .home-news {
        gap: 12px !important;
        max-width: 100% !important;
        padding: 0 12px !important;
    }
    .home-news-item__title {
        font-size: .66rem !important;
        letter-spacing: .3px !important;
        padding: 7px 8px !important;
        margin: 0 auto 8px !important;
    }
    .home-news-card {
        padding: 9px 9px 6px !important;
        border-radius: 14px !important;
    }
    .home-news-card__img {
        height: 84px !important;
        margin-bottom: 8px !important;
        border-radius: 9px !important;
    }
    .home-news-card__img--ph { font-size: 1.5rem !important; }
    .home-news-card__excerpt {
        font-size: .72rem !important;
        line-height: 1.4 !important;
    }
    .home-news-card::after {
        font-size: .66rem !important;
        margin: 8px 2px 4px !important;
    }
}

/* ACCUEIL MOBILE - passe 2 : reduction des sections encore trop hautes
   (heros, cartes de stats, section "nous rejoindre", footer). */
@media (max-width: 768px) {
    .home-header { height: 56vh !important; }

    /* Cartes de stats plus compactes (etaient a 62-64vw) */
    .spacecard { gap: 0 !important; }
    .unique { width: min(419px, 46vw) !important; }
    .con    { width: min(436px, 47vw) !important; }
    .record { width: min(438px, 47vw) !important; }

    /* Section "Nous rejoindre" : visuels et espacements resserres */
    .join { width: 52% !important; margin-top: 0 !important; }
    .link { margin: 20px auto 0 !important; gap: 22px !important; }
    .tuto { gap: 10px !important; padding-top: 14px !important; }
    #multijoueurs { width: min(400px, 52vw) !important; }
    #addserver    { width: min(350px, 46vw) !important; }
    .ip2          { width: min(370px, 50vw) !important; }

    /* Footer compacte */
    .footer { min-height: auto !important; padding: 26px 16px 16px !important; }
    #hyboxx { width: 52% !important; }
    .elements-footer { gap: 14px !important; }
}

/* Footer : empilement vertical reserve aux petits ecrans (<=900px).
   Au-dessus (portables 13" ~1280px inclus) il reste horizontal. */
@media (max-width: 900px) {
    .elements-footer {
        flex-direction: column;
        align-items: center;
        gap: 18px;
    }
    .contact {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        width: 100%;
    }
    .soutenir, .contact-us { width: min(300px, 88vw); margin: 0; }
}

/* Mobile : les nuages decoratifs du logo (#nuage1-4) etaient positionnes hors
   cadre (ex. #nuage3 a left:719px) et creaient un debordement horizontal de
   ~400px. On les masque en mobile (nuage5/6 le sont deja). */
@media (max-width: 768px) {
    #nuage1, #nuage2, #nuage3, #nuage4 { display: none !important; }
}