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

body {
    height: 100vh;
    overflow-x: hidden;
    /* Sans ca, `data-bs-theme="dark"` peint le body en #212529 : le moindre
       fond d'image pas encore charge / en echec laissait voir ce gris quasi
       noir. Couleur de repli aux tons du site (bleu profond de la scene). */
    background-color: #123a4d;
}

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;
    /* Couleur de repli (bleu ciel/eau) : tant que fond.png charge ou s'il
       echoue, le hero reste dans les tons du site, jamais noir.
       Seul le hero recoit un repli : le haut de fond.png est OPAQUE, donc la
       couleur ne remplit aucune zone de fondu. Les autres fonds (main_bg, bdp,
       bgfooter) ont un HAUT TRANSPARENT volontaire (superposition sur la scene
       du dessous) : y mettre un repli opaque bouchait le fondu et, pour le
       footer, masquait le bas des cartes actus. Leur secours anti-noir est
       assure par le fond du body (#123a4d), derriere tout et sans recouvrement. */
    background: url(./img/fond.png) center/cover #2f9fc4;
    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;
    /* Entree une fois, puis leger flottement continu (invite au clic).
       Le bob est en fin de liste : il pilote transform une fois l'entree finie. */
    animation: hb-entree-bas .35s cubic-bezier(.16, 1, .3, 1) .45s both,
               hb-bob 3.2s ease-in-out 1.1s infinite;
}
@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;
    }
}

/* Reflet qui balaie le texte du bandeau promo.
   La classe .shine est posee dans navbar.blade.php (et le keyframe ci-dessus
   existait deja), mais la regle qui les reliait avait saute lors d'un push :
   le bandeau etait redevenu un texte fixe. Reflet doux (un passage toutes les
   6 s), pas un clignotement. */
.promo-banner .shine {
    display: inline-block;
    background-image: linear-gradient(100deg,
        #fff 0%, #fff 43%, #ffe6a8 50%, #fff 57%, #fff 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: shine-move 6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .promo-banner .shine {
        animation: none;
        -webkit-text-fill-color: #fff;
        color: #fff;
    }
}



/* ------------- 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 {
    /* Pas de repli opaque : le haut de main_bg.png est transparent et se fond
       sur le bas du hero. Secours anti-noir = fond du body. Voir .home-header. */
    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 {
    /* Pas de repli opaque : le haut de bdp.png (24%) est transparent et repose
       sur la terre de main_bg. Secours anti-noir = fond du body. Voir .home-header. */
    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 {
   /* Pas de repli opaque : le haut de bgfooter.png est transparent (silhouette
      qui se pose sur les actus). Un repli le rendait opaque et COUPAIT le bas
      des dernieres cartes actus. Secours anti-noir = fond du body. Voir .home-header. */
   background: url(./img/bgfooter.png) center/cover;
   min-height: 427px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 14px;
   /* Padding haut genereux : le premier ~100px du footer est occupe par la
      silhouette de montagnes de bgfooter.png. Avec 46px, le logo et les deux
      panneaux mordaient dessus alors qu'il restait du vide sous le copyright.
      Le contenu est ainsi centre dans la partie sombre du panneau. */
   padding: 114px 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;
}
/* Logo + reseaux descendus par rapport aux deux panneaux de droite.
   Decalage visuel (translate) et pas une marge : la hauteur du bloc ne bouge
   pas, donc les panneaux et le copyright restent ou ils sont.
   Desktop seulement : en dessous de 768px le footer passe en colonne. */
@media (min-width: 769px) {
    .social {
        transform: translateY(38px);
    }
}
#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 */
/* Panneau du menu : degrade du bleu du theme vers le bleu nuit du footer, pour
   qu'il appartienne au site plutot que d'etre un aplat gris-bleu.
   `height: 100%` et non `100vh` : sur mobile, 100vh inclut la barre d'URL du
   navigateur et le bas du panneau (les reseaux) passait sous elle. */
.mobile-sidebar {
    position: fixed;
    top: 0;
    left: -320px;
    width: min(320px, 84vw);
    height: 100%;
    z-index: 1002;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 14px 20px;
    background: linear-gradient(180deg, #0e4b68 0%, #072a3e 100%);
    border-right: 3px solid rgba(255, 255, 255, .45);
    box-shadow: 6px 0 26px rgba(0, 0, 0, .55);
    transition: left .3s ease;
    overflow-y: auto;
}

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

/* En-tete : le logo du site remplace le libelle « Menu » en Roboto. */
.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 0 0 14px;
    border-bottom: 2px solid rgba(255, 255, 255, .16);
    background: none;
}

.sidebar-logo {
    width: 160px;
    max-width: 64%;
    height: auto;
    display: block;
}

/* Le translateY(-20px) faisait flotter la croix au-dessus de l'en-tete, hors
   de sa zone tactile. Bouton carre arrondi, dans le style des autres controles. */
.sidebar-close {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 42px;
    height: 42px;
    padding: 0 0 4px;
    background: #ffffff0f;
    border: 2px solid rgba(255, 255, 255, .3);
    border-radius: 12px;
    color: #fff;
    font-size: 1.9rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.sidebar-close:hover, .sidebar-close:focus-visible {
    background: #1085b64d;
    border-color: #5fd8ff;
    color: #c9f2ff;
}



.sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sidebar-item {
    border-bottom: none;
}

/* Pastilles : meme langage que les liens du footer (fond creux, contour bleu,
   ombre portee franche), au lieu de lignes de texte separees par des filets. */
.sidebar-link {
    display: block;
    padding: 12px 14px;
    text-align: center;
    color: #fff;
    text-decoration: none;
    font-family: "hybox-game", "Segoe UI", sans-serif;
    font-size: 1.25rem;
    letter-spacing: .5px;
    text-transform: uppercase;
    background: #ffffff0f;
    border: 2px solid #1085b6;
    border-radius: 14px;
    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;
}

.sidebar-link:hover, .sidebar-link:focus-visible {
    background: #1085b64d;
    border-color: #5fd8ff;
    color: #c9f2ff;
    transform: translateY(-2px);
}
.sidebar-link:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0, 0, 0, .35); }

/* Page courante : reprend le cyan du theme, comme l'onglet actif de la navbar */
.sidebar-link--actif {
    background: linear-gradient(180deg, #00e0ff, #0090c0);
    border-color: #fff;
    color: #062a3a;
}
.sidebar-link--actif:hover { color: #062a3a; }

/* Reseaux, colles en bas du panneau (margin-top:auto) comme dans le footer */
.sidebar-social {
    margin-top: auto;
    display: flex;
    justify-content: center;
    gap: 12px;
    padding-top: 16px;
    border-top: 2px solid rgba(255, 255, 255, .16);
}
.sidebar-social a {
    display: inline-flex;
    padding: 4px;
    transition: transform .2s ease;
}
.sidebar-social img {
    display: block;
    width: 42px;
    height: 42px;
}
.sidebar-social a:hover { transform: translateY(-3px) scale(1.08); }

/* 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;

        /* BUG CORRIGE : `z-index: 0` (regle de base) faisait de .home-header un
           CONTEXTE D'EMPILEMENT. La banniere (1001), la barre mobile (1000) et
           le menu (1002) sont dedans : leurs z-index ne valaient donc que face a
           leurs voisins DANS ce contexte, et le contexte entier, a 0, passait
           sous tout element de page a z-index >= 1 (.movecontainer 2, .link 3,
           .home-news 3...). Resultat : des qu'on defilait sur l'accueil en
           mobile, le contenu recouvrait la banniere ET la barre de navigation,
           le menu devenait intappable.
           Le `z-index: 0` n'existe que pour les nuages decoratifs (z-index:-1),
           or ils sont deja `display: none` sous 768px : on peut donc supprimer
           le contexte ici sans rien changer d'autre. Les elements fixes
           remontent alors dans le contexte racine, ou leur 1000+ l'emporte. */
        z-index: auto;
    }
    
    /* 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)
   Refaite d'apres la maquette du 11/08/2025 : grille centree de tuiles
   blanches translucides a tranche violette, posee sur la nappe de lave
   (.header-co--boutique). Pas de colonne laterale : les acces (categories,
   compte, panier) tiennent sur une barre horizontale au-dessus de la grille.
   ========================================================= */
.shop-hb {
    position: relative;
    z-index: 2;
    font-family: "roboto", sans-serif;
    color: #fff;
    padding: 10px 0 40px;
}
.shop-hb a { text-decoration: none; }

/* Le halo cyan du premier jet jurait sur la lave : ombre portee neutre a la
   place, et plaque sombre translucide comme celle de la navbar au-dessus. */
.shop-hb-title {
    text-align: center;
    text-transform: uppercase;
    font-size: 2.4rem;
    letter-spacing: 2px;
    color: #fff;
    text-shadow: 0 3px 0 rgba(0, 0, 0, .45);
    margin: 0 auto 22px;
    padding: 8px 26px;
    width: fit-content;
    max-width: 100%;
    background: #07435c9c;
    border: 3px solid #fff;
    border-radius: 14px;
    overflow-wrap: anywhere;
}

.shop-hb-main { max-width: 100%; }

/* Barre d'acces horizontale (remplace la colonne laterale du premier jet). */
.shop-hb-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 14px;
    max-width: 900px;
    margin: 0 auto 22px;
}
.shop-hb-bar__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.shop-hb-bar form { margin: 0; }

/* .col-md-6 est detourne plus haut par le theme (encart illustre fige a
   472x602, reste d'une ancienne version de l'accueil : plus aucune vue du theme
   ne l'utilise et Rectangleinformation.png n'est reference que la). Le panier,
   lui, s'en sert comme simple colonne Bootstrap (code promo / carte cadeau) et
   heritait donc d'un pave illustre qui recouvrait ses deux formulaires.
   On neutralise le detournement sur la boutique uniquement : la regle globale
   reste en place pour ne rien casser ailleurs (voir SUIVI-PARAMETRAGE). */
.shop-hb .col-md-6 {
    display: block;
    height: auto !important;
    width: auto !important;
    background: none !important;
}

/* Message d'accueil / description de categorie : meme largeur que la grille. */
.shop-hb-intro {
    max-width: 900px;
    margin: 0 auto 22px;
    text-align: center;
}

/* Encarts secondaires (objectif, meilleur acheteur, derniers achats) : sous la
   grille, la maquette ne leur donne pas de place sur les cotes. */
.shop-hb-extras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    max-width: 900px;
    margin: 32px auto 0;
}
.shop-hb-extras .shop-hb-panel { margin-bottom: 0; }

/* 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; }

/* Navigation des categories : en ligne dans la barre. */
.shop-hb-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.shop-hb-nav a {
    display: block;
    padding: 9px 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: translateY(-2px); }
.shop-hb-nav a.active {
    background: linear-gradient(180deg, #d888cd, #b04fa0);
    border-color: #fff;
    color: #fff;
    font-weight: 700;
}
.shop-hb-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px 6px;
    background: #07435c9c;
    border: 2px solid rgba(255, 255, 255, .35);
    border-radius: 12px;
}
.shop-hb-user img { width: 38px; height: 38px; border-radius: 9px; border: 2px solid rgba(255,255,255,.5); }
.shop-hb-user .name { font-weight: 700; line-height: 1.15; }
.shop-hb-user .money { color: #ffd76b; font-size: .95rem; line-height: 1.15; }

/* Grille de packages : 3 colonnes centrees comme la maquette, puis 2 et 1.
   Largeur bornee pour que les tuiles gardent leur taille de maquette sur les
   tres grands ecrans au lieu de s'etirer. */
.shop-hb-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
}
/* Tuile de la maquette : cadre blanc epais, fond blanc translucide (la lave
   transparait), tranche violette dessous qui lui donne son epaisseur.
   Le voile s'allege vers le bas, comme sur la maquette (~85% en haut, ~15% en
   bas). On s'arrete a 50% : la maquette n'a aucun texte dans ses tuiles, nous
   si. A 50% le prix et le nom gardent un contraste de 7:1 sur la lave. */
.shop-hb-card {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg,
                rgba(255, 255, 255, .90) 0%,
                rgba(255, 255, 255, .68) 55%,
                rgba(255, 255, 255, .50) 100%);
    border: 5px solid #fff;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 9px 0 0 #ba5eaa, 0 16px 22px rgba(90, 25, 0, .28);
    transition: transform .18s ease, box-shadow .18s ease;
}
.shop-hb-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 0 0 #ba5eaa, 0 22px 30px rgba(90, 25, 0, .34);
}
/* Les visuels fournis n'ont pas tous le meme cadrage (certains sont en portrait) :
   en "cover" ils seraient rognes n'importe ou, d'ou "contain". Tuile carree
   comme la maquette. */
.shop-hb-card__img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    padding: 14px 14px 6px;
    background: none;
    filter: drop-shadow(0 6px 7px rgba(90, 25, 0, .28));
    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; align-items: center; gap: 8px; padding: 0 14px 14px; flex: 1; }
.shop-hb-card__name {
    font-size: 1.15rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #47143f;
    text-align: center;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
/* Plus de hauteur reservee sur le nom : les tuiles d'une meme ligne ont deja la
   meme hauteur (grille), et .shop-hb-card__desc porte le flex:1 qui pousse prix
   et bouton en bas. La reserve ne faisait qu'allonger les tuiles. */
/* Brun fonce : la description est en petit corps, et le bas de la tuile laisse
   passer la lave (voile a 50%). Un brun plus clair n'y tenait pas le 4.5:1. */
.shop-hb-card__desc { font-size: .9rem; color: #4a2015; text-align: center; 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. Pastille pleine
   a la place, dans le violet de la tranche des tuiles. */
.shop-hb-card__price {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 1.25rem;
    letter-spacing: .5px;
    color: #fff;
    background: linear-gradient(180deg, #d888cd, #b04fa0);
    border: 2px solid #fff;
    border-radius: 14px;
    padding: 5px 16px;
    box-shadow: 0 3px 0 rgba(88, 20, 76, .45);
    text-shadow: 0 2px 0 rgba(88, 20, 76, .45);
}
.shop-hb-card__price del {
    color: #ffffffb3;
    font-size: .9rem;
    margin-right: 2px;
}

/* Boutons boutique (immunisés du .btn-primary transparent global).
   Violet : c'est l'accent de la maquette (tranche des tuiles) et celui de
   « Nous soutenir » dans le footer, qui pointe deja vers la boutique. Le cyan
   du theme jurait sur l'orange de la lave. */
.shop-hb-btn {
    display: inline-block;
    text-align: center;
    cursor: pointer;
    padding: 10px 18px !important;
    background: linear-gradient(180deg, #d888cd, #b04fa0) !important;
    color: #fff !important;
    border: 2px solid #fff !important;
    border-radius: 12px !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 2px 0 rgba(88, 20, 76, .45);
    box-shadow: 0 4px 0 #8a2f78, 0 6px 12px rgba(90, 25, 0, .35) !important;
    transition: .15s ease;
}
.shop-hb-btn:hover { filter: brightness(1.08); transform: translateY(-2px); color: #fff !important; }
.shop-hb-btn:active { transform: translateY(1px); box-shadow: 0 2px 0 #8a2f78 !important; }
.shop-hb-btn--ghost {
    background: #07435c9c !important;
    color: #fff !important;
    box-shadow: none !important;
    text-shadow: none;
}
.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); }

/* La grille passe a 2 colonnes. On les garde jusqu'en 360px : verifie, une
   tuile de ~165px accueille encore nom, prix et bouton, et la page reste deux
   fois moins longue qu'en colonne unique (3680px -> ~1900px en 390). */
@media (max-width: 760px) {
    .shop-hb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .shop-hb-title { font-size: 1.9rem; }
}
@media (max-width: 480px) {
    .shop-hb-grid { gap: 12px; }
    .shop-hb-card { border-width: 4px; border-radius: 18px; }
    .shop-hb-card__img { padding: 10px 10px 4px; }
    .shop-hb-card__body { gap: 6px; padding: 0 8px 10px; }
    .shop-hb-card__name { font-size: 1rem; }
    .shop-hb-card__desc { font-size: .8rem; }
    .shop-hb-card__price { font-size: 1.05rem; padding: 4px 12px; }
    .shop-hb-btn { padding: 9px 10px !important; font-size: .9rem; letter-spacing: .5px; }
}

/* Modale package boutique */
.shop-hb-modal { background: #0c3a54; border: 2px solid rgba(255,255,255,.55); border-radius: 16px; color: #fff; }
/* Le titre reutilise .shop-hb-card__name, dont la couleur est prevue pour le
   fond clair des tuiles : sur le fond sombre de la modale il etait illisible. */
.shop-hb-modal .shop-hb-card__name { 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;
}

/* ---------- Page boutique ---------- */
/* Meme mecanique que la page vote : la boutique pose son propre fond, d'apres
   la maquette du 11/08/2025 (nappe de lave, brume grise en haut derriere la
   navbar et en bas pour le raccord avec la silhouette du footer). La couleur de
   repli evite de retomber sur le bleu glace du theme si l'image ne charge pas. */
.header-co--boutique {
    background: url(./img/boutique-bg.webp) center top/cover no-repeat, #f2861c !important;
    min-height: 0;
    padding-bottom: 270px;
}

/* Raccord avec le footer. La brume du bas n'est PAS peinte dans l'image : en
   `cover`, une page courte (panier vide, profil) rogne l'image par le bas et la
   brume disparaissait, la lave heurtant alors la silhouette du footer.
   Degrade a hauteur fixe : le raccord est identique quelle que soit la longueur
   de la page.
   Il descend jusqu'au bas du header (le footer le chevauche de 205px et son
   image est transparente au-dessus des montagnes) et sature avant leurs cimes :
   la silhouette sort de la brume au lieu d'etre posee sur la lave vive. */
.header-co--boutique::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 380px;
    background: linear-gradient(rgba(83, 91, 86, 0) 0%, rgba(83, 91, 86, 1) 60%, rgba(83, 91, 86, 1) 100%);
    pointer-events: none;
    z-index: 0;
}

/* Les « nuages » decoratifs sont des icebergs (DA glace du reste du site) :
   au-dessus d'une nappe de lave ils n'ont aucun sens. #nuage5/6 encadrent le
   bandeau promo, #nuage1-4 derivent sur l'accueil. */
.header-co--boutique #nuage1,
.header-co--boutique #nuage2,
.header-co--boutique #nuage3,
.header-co--boutique #nuage4,
.header-co--boutique #nuage5,
.header-co--boutique #nuage6 {
    display: none !important;
}

/* La navbar garde le bleu du theme, contrairement a la page vote qui la passe en
   brun : elle se pose ici sur la brume grise du haut, pas sur l'orange vif, et
   n'y tourne donc pas au gris-vert. Mesure faite sur la maquette : son fond y
   est a rgb(48,82,92), le bleu du theme rend rgb(58,80,83) au meme endroit.

   Les panneaux, eux, sont plus bas sur la lave vive : la, le bleu tournait
   vraiment au vert sale. On les passe dans la palette de la page (brun chaud). */
.header-co--boutique .shop-hb-title,
.header-co--boutique .shop-hb-panel,
.header-co--boutique .shop-hb-nav a,
.header-co--boutique .shop-hb-user,
.header-co--boutique .shop-hb-btn--ghost {
    background: #4a2510c9 !important;
}
.header-co--boutique .shop-hb-empty {
    background: #4a2510c9;
}

/* 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 */
/* Le badge IP est une image large et plate : sur telephone il ne faisait que
   30px de haut, trop peu pour le doigt. Le padding agrandit la zone tactile
   sans toucher au visuel (l'image garde sa taille). */
.copy-ip { position: relative; display: block; padding: 7px 0; }
.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); }
/* Bouton « Lien » decale vers la gauche sous sa bulle (la bulle, elle, ne
   bouge pas). margin-right plutot que transform : le centrage flex tient
   compte des marges, et le translateY du survol reste disponible.
   Desktop seulement : sur mobile le bouton reste centre sous sa bulle. */
@media (min-width: 769px) {
    .game-btn--lien { margin-right: 80px; }
}
.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; }
/* Le total etait cyan avec un halo cyan : sur la lave (page chaude) il jurait,
   et le halo brouillait les chiffres. Or (contraste sur le brun du panneau). */
.shop-hb-total { text-align: right; color: #ffd76b; font-size: 1.35rem; font-weight: 800; text-shadow: 0 2px 0 rgba(0,0,0,.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; }

/* 40px : en dessous, la cible est trop petite au doigt (34px auparavant). */
.hb-pass__oeil {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    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 : sous 900px le logo passe au-dessus des deux panneaux (empilement de
   .elements-footer), mais les panneaux « Nous soutenir » et « Nous contacter »
   restent COTE A COTE, jusqu'au plus petit ecran. */
@media (max-width: 900px) {
    .elements-footer {
        flex-direction: column;
        align-items: center;
        gap: 18px;
    }
    .contact {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        gap: 12px;
        width: 100%;
    }
    /* Largeur egale et partagee : la regle de base fige les panneaux a 285px
       (soit 582px a deux, plus large que l'ecran). `flex: 1 1 0` les repartit,
       `min-width: 0` autorise la reduction sous leur contenu, et le plafond
       garde la paire compacte sur une tablette. */
    .soutenir, .contact-us {
        width: auto;
        flex: 1 1 0;
        min-width: 0;
        max-width: 285px;
        margin: 0;
    }
    /* .soutenir portait une marge basse de 20px (heritee de l'empilement) qui
       desalignait le bas des deux panneaux maintenant qu'ils sont voisins. */
    .soutenir { margin-bottom: 0; }
}

/* Deux panneaux cote a cote sur un telephone : le titre « Nous contacter » ne
   tient plus sur une ligne a 1.2rem dans ~160px. On reduit titres et liens
   plutot que de laisser le titre passer sur deux lignes (les deux panneaux
   n'auraient alors plus la meme hauteur de bandeau). */
@media (max-width: 520px) {
    /* Taille fluide plutot qu'un palier fixe : « Nous contacter » est le plus
       long des deux et passait sur 2 lignes en 360px (bandeaux de 150 et 165px
       de haut, donc desalignes). Le clamp le garde sur une ligne jusqu'en bas
       de gamme, et le plafond evite qu'il grossisse au-dela du reglage 768px. */
    .footer-titre {
        font-size: clamp(.75rem, 3.4vw, .95rem) !important;
        letter-spacing: 0 !important;
        padding: 10px 4px 8px !important;
        margin-bottom: 8px !important;
    }
    .contact p { font-size: .9rem !important; }
    .contact { gap: 8px !important; }
}

/* 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; }
}

/* Petits telephones (<=389px, ex. iPhone SE / Galaxy S8 a 360px) : la bulle
   « Installer Minecraft ? » est en `white-space: nowrap` et mesure 388px : elle
   depassait des DEUX cotes de l'ecran et son texte etait rogne. Elle tient en
   une ligne des 390px, on ne reduit donc qu'en dessous. */
@media (max-width: 389px) {
    .help-bubble {
        font-size: 1.2rem !important;
        padding: 10px 16px !important;
    }
}

/* =========================================================
   ACCUEIL - petites animations (2026-07-23, demande client :
   rendre la page un peu plus vivante). Amplitudes faibles ;
   tout est coupe si "reduire les animations" est actif. Aucune
   n'utilise transform sur un element deja positionne en transform,
   ni ne recouvre un effet de survol existant.
   ========================================================= */
@keyframes hb-bob      { 0%, 100% { transform: translateY(0); }  50% { transform: translateY(-4px); } }
@keyframes hb-bob-tr   { 0%, 100% { translate: 0 0; }            50% { translate: 0 -3px; } }

/* Badge PLAY.HYBOX.FR de la section "nous rejoindre" : flottement doux.
   (Le badge du hero est traite plus haut, enchaine apres son entree.) */
.tuto .copy-ip { animation: hb-bob 3.2s ease-in-out infinite; }

/* Bulles "Texture pack ?" / "Installer Minecraft ?" : bob decale entre les deux. */
.help-bubble { animation: hb-bob 3.6s ease-in-out infinite; }
.link .help-group:nth-child(2) .help-bubble { animation-delay: .9s; }

/* Bouton Boutique de la navbar : flottement continu via `translate`
   (propriete independante de `transform`) pour ne pas ecraser le survol. */
#boutique { animation: hb-bob-tr 2.8s ease-in-out infinite; }

/* Encarts de stats : leger soulevement au survol. `translate` s'ajoute au
   `transform` de positionnement (scale + translateY) sans le remplacer. */
.unique, .con, .record { transition: translate .18s ease, filter .18s ease; }
.unique:hover, .con:hover, .record:hover {
    translate: 0 -6px;
    filter: brightness(1.05) drop-shadow(0 8px 12px rgba(0, 0, 0, .28));
}

@media (prefers-reduced-motion: reduce) {
    .tuto .copy-ip, .help-bubble, #boutique { animation: none; }
    .unique, .con, .record { transition: none; }
    .unique:hover, .con:hover, .record:hover { translate: none; filter: none; }
}