/*
 * Hybox - thème Azuriom
 *
 * Polices : Spenbeb Game pour l'habillage (menus, titres, boutons),
 * Baloo 2 pour le texte courant et Roboto Black pour les champs.
 */

/* ==========================================================================
   Polices et variables
   ========================================================================== */

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

@font-face {
    font-family: "hybox-game";
    src: url(./font/SpenbebGame.otf) format("opentype");
    font-display: swap;
}

@font-face {
    font-family: "hybox-texte";
    src: url(./font/Baloo2.ttf) format("truetype");
    font-weight: 500;
    font-display: swap;
}

:root {
    --hb-font-game: "hybox-game", "Segoe UI", sans-serif;
    --hb-font-text: "hybox-texte", "Segoe UI", system-ui, sans-serif;

    --hb-cyan: #00e0ff;
    --hb-cyan-light: #7ee3ff;
    --hb-glass: #07435c9c;
    --hb-panel: #0c3a54e6;
    --hb-brown: #4a2510c9;
    --hb-purple: linear-gradient(180deg, #d888cd, #b04fa0);
}

/* ==========================================================================
   Base
   ========================================================================== */

html {
    overflow-x: hidden;
}

body {
    height: 100vh;
    overflow-x: hidden;
    background-color: #123a4d;
}

h1 {
    text-align: center;
}

.alert {
    padding: 14px 22px;
    border: 3px solid;
    border-radius: 16px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
    color: #fff;
    font-family: var(--hb-font-game);
    font-size: 1.1rem;
    letter-spacing: .3px;
    text-align: center;
}

.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;
}

/* ==========================================================================
   Formulaires
   ========================================================================== */

.mb-3 {
    margin: 5% 0 0 0 !important;
    padding: 0 !important;
    font-size: 1.2rem;
    text-align: center;
}

input {
    background-color: var(--hb-glass) !important;
    border: 2px solid #fff !important;
    border-radius: 30px !important;
    font-family: "roboto" !important;
    text-align: center !important;
}

input:focus {
    border: 2px solid #fff !important;
    outline: none !important;
    box-shadow: none !important;
}

input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}

.form-label {
    font-family: var(--hb-font-game);
    font-size: 1.05rem;
    letter-spacing: .5px;
}

.form-check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: auto;
    margin: 0 auto !important;
    font-family: var(--hb-font-game);
    white-space: nowrap;
}

.form-check label {
    font-family: var(--hb-font-game);
    font-size: 1.2rem;
}

@media (max-width: 1400px) {
    .mb-3 input {
        min-height: 46px !important;
        font-size: 1.15rem !important;
    }

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

@media (max-width: 768px) {
    .form-label {
        font-size: .95rem;
    }

    .form-check {
        width: 100%;
    }
}

/* Bouton « afficher le mot de passe » (ajouté par theme.js) */
.hb-pass {
    position: relative;
    display: block;
}

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

.hb-pass__oeil {
    position: absolute;
    top: 50%;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: #8fb4c6;
    cursor: pointer;
    transform: translateY(-50%);
    transition: color .18s ease, background-color .18s ease, transform .18s ease;
}

.hb-pass__oeil:hover {
    background: #ffffff1a;
    color: var(--hb-cyan-light);
}

.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: var(--hb-cyan-light);
}

.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: var(--hb-cyan-light);
}

/* ==========================================================================
   Bandeau promo
   ========================================================================== */

.promo-banner {
    z-index: 3;
    overflow: hidden;
    padding: 8px 0 6px;
    background: #cd3308;
    color: #fff;
    font-family: var(--hb-font-game);
    font-size: 1.05rem;
    letter-spacing: .5px;
    text-align: center;
}

.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;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: shine-move 6s ease-in-out infinite;
}

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

/* Icebergs de part et d'autre du bandeau */
.nuage-5 {
    position: absolute;
    top: -30px;
    left: 0;
    z-index: 4;
    content: url(./img/nuage3.png);
    transform: scaleX(-1);
}

.nuage-6 {
    position: absolute;
    top: -70px;
    right: -70px;
    z-index: 4;
    content: url(./img/nuage1.png);
    transform: scale(.8);
}

@media (max-width: 1400px) {
    .nuage-5 {
        left: -50px;
        transform: scaleX(-1) scale(.7);
    }

    .nuage-6 {
        right: -100px;
        transform: scale(.6);
    }
}

@media (max-width: 768px) {
    .promo-banner {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 30px;
        padding: 5px 12px;
        font-size: .78rem;
        line-height: 1.3;
        letter-spacing: 0;
    }
}

/* ==========================================================================
   Navigation (ordinateur)
   ========================================================================== */

.newnav {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 50%;
    height: 80px;
    margin: 15px auto 0;
    padding: 0 3%;
    list-style: none;
    background: var(--hb-glass);
    border-radius: 10px;
    font-family: var(--hb-font-game);
    animation: hb-entree-haut .35s cubic-bezier(.16, 1, .3, 1) .05s both;
}

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

.newnav .nav-button {
    display: inline-block;
    color: inherit;
    text-decoration: none;
    transition: color .15s ease, transform .15s ease, text-shadow .15s ease;
}

.newnav li:not(.boutique) .nav-button:hover {
    color: var(--hb-cyan-light);
    text-shadow: 0 0 12px rgba(126, 227, 255, .75);
    transform: translateY(-2px);
}

.newnav .boutique {
    transform: none;
}

.boutique-badge {
    height: 70px;
    animation: hb-bob-tr 2.8s ease-in-out infinite;
}

.boutique .nav-button img,
.navbar-toggler img {
    transition: transform .15s ease, filter .15s ease;
}

.boutique .nav-button:hover img {
    filter: brightness(1.08) drop-shadow(0 5px 8px rgba(0, 0, 0, .35));
    transform: translateY(-2px) scale(1.05);
}

/* Avatar / connexion, à droite de la barre */
.newnav .nav-account {
    position: absolute;
    top: 5px;
    right: -10%;
    font-size: 1rem;
    transform: none;
}

.nav-account .navbar-toggler {
    display: block;
    color: #000;
}

.navbar-toggler:hover img {
    filter: brightness(1.12);
    transform: scale(1.07);
}

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

@media (max-width: 1400px) {
    .newnav {
        height: 55px;
    }

    .boutique-badge {
        height: 48.5px;
    }

    .newnav .nav-account {
        top: 2px;
    }

    .navbar-toggler-icon {
        width: 50px;
        height: 50px;
    }
}

/* ==========================================================================
   Navigation (mobile) et menu latéral
   ========================================================================== */

.mobile-navbar {
    position: fixed;
    top: 40px;
    right: 0;
    left: 0;
    z-index: 1000;
    display: none;
    width: 90%;
    height: 70px;
    margin: 0 auto;
    padding: 0 20px;
    background: var(--hb-glass);
    border-radius: 10px;
    backdrop-filter: blur(10px);
}

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

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

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

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

.mobile-toggle.is-active .hamburger-bar:nth-child(2) {
    opacity: 0;
}

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

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

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

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

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

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

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

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

.mobile-sidebar {
    position: fixed;
    top: 0;
    left: -320px;
    z-index: 1002;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: min(320px, 84vw);
    height: 100%;
    padding: 16px 14px 20px;
    overflow-y: auto;
    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;
}

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

.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);
}

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

.sidebar-close {
    display: flex;
    flex: 0 0 auto;
    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 {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-link {
    display: block;
    padding: 12px 14px;
    background: #ffffff0f;
    border: 2px solid #1085b6;
    border-radius: 14px;
    box-shadow: 0 3px 0 rgba(0, 0, 0, .35);
    color: #fff;
    font-family: var(--hb-font-game);
    font-size: 1.25rem;
    letter-spacing: .5px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    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 {
    box-shadow: 0 1px 0 rgba(0, 0, 0, .35);
    transform: translateY(1px);
}

.sidebar-link--actif {
    background: linear-gradient(180deg, var(--hb-cyan), #0090c0);
    border-color: #fff;
    color: #062a3a;
}

.sidebar-link--actif:hover {
    color: #062a3a;
}

.sidebar-social {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: auto 0 0;
    padding: 16px 0 0;
    list-style: none;
    border-top: 2px solid rgba(255, 255, 255, .16);
}

.sidebar-social li {
    display: flex;
}

.sidebar-social a {
    display: inline-flex;
    padding: 4px;
    transition: transform .2s ease;
}

.sidebar-social a:hover {
    transform: translateY(-3px) scale(1.08);
}

.sidebar-social img {
    display: block;
    width: 42px;
    height: 42px;
}

.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1001;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}

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

@media (max-width: 768px) {
    .desktop-nav {
        display: none;
    }

    .mobile-navbar {
        display: block;
    }
}

/* ==========================================================================
   Accueil : scène d'en-tête
   ========================================================================== */

/* La scène est dessinée en 1920x1260 : la hauteur suit la largeur pour
   qu'elle rétrécisse au lieu d'être rognée. */
.home-header {
    position: relative;
    z-index: 0;
    height: min(1260px, 65.63vw);
    background: url(./img/fond.png) center / cover #2f9fc4;
    text-align: center;
}

.logo {
    position: relative;
    z-index: 1;
    width: min(850px, 44.27vw);
    max-width: 100%;
    height: min(650px, 33.85vw);
    margin: 0 auto;
}

.home-logo {
    z-index: 3;
    max-width: 100%;
    height: auto;
    animation: hb-entree-logo .4s cubic-bezier(.16, 1, .3, 1) .22s both;
}

.ip {
    width: min(468px, 24.38vw, 80vw);
    height: auto;
    aspect-ratio: 468 / 77;
    margin: 0 auto;
    background: url(./img/iphaut.png) center / contain no-repeat;
    cursor: pointer;
    transition: .2s ease-in-out;
}

.ip:hover {
    background-image: url(./img/hoveriphaut.png);
}

.grolo .copy-ip {
    display: block;
    animation: hb-entree-bas .35s cubic-bezier(.16, 1, .3, 1) .45s both,
               hb-bob 3.2s ease-in-out 1.1s infinite;
}

/* Icebergs qui dérivent derrière le logo */
.nuage-1,
.nuage-2,
.nuage-3,
.nuage-4 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.nuage-1 {
    left: 80vw;
    content: url(./img/nuage1.png);
    opacity: .8;
    transform: scale(.6);
    animation: nuage1 70s linear infinite;
}

.nuage-2 {
    content: url(./img/nuage2.png);
    transform: scale(1);
    animation: nuage2 70s linear infinite;
}

.nuage-3 {
    content: url(./img/nuage3.png);
    opacity: .8;
    transform: scale(.6);
    animation: nuage3 70s linear infinite;
}

.nuage-4 {
    content: url(./img/nuage3.png);
    opacity: .8;
    transform: scale(.6);
    animation: nuage4 90s linear infinite;
}

@keyframes nuage1 {
    0% {
        left: -200px;
        transform: scale(.3);
        opacity: 0;
    }
    50% {
        left: 40vw;
        transform: scale(.7);
        opacity: 1;
    }
    100% {
        left: 70vw;
        transform: scale(.7);
        opacity: 0;
    }
}

@keyframes nuage2 {
    0% {
        left: 80vw;
        transform: scale(1.2);
        opacity: 1;
        z-index: 2;
    }
    80% {
        left: 50vw;
        transform: scale(.7);
        opacity: .5;
        z-index: 1;
    }
    100% {
        left: 20vw;
        transform: scale(.3);
        opacity: 0;
        z-index: 1;
    }
}

@keyframes nuage3 {
    0% {
        left: 700px;
        transform: scale(.3);
        opacity: 0;
    }
    50% {
        left: 0;
        top: -50px;
        transform: scale(.7);
        opacity: 1;
    }
    100% {
        left: -300px;
        transform: scale(.7);
        opacity: 0;
        top: -50px;
    }
}

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

/* Entrée en cascade : navbar, logo puis bouton IP */
@keyframes hb-entree-haut {
    from { opacity: 0; transform: translateY(-24px); }
    to   { opacity: 1; transform: none; }
}

@keyframes hb-entree-logo {
    from { opacity: 0; transform: translateY(26px) scale(.93); }
    to   { opacity: 1; transform: none; }
}

@keyframes hb-entree-bas {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
}

@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; }
}

@media (max-width: 1400px) {
    .home-header {
        height: 100vh;
    }

    .logo {
        width: 650px;
        height: 500px;
    }

    .ip {
        width: 234px;
        height: 38.5px;
        transform: translateY(-30px);
    }
}

@media (max-width: 768px) {
    /* Pas de contexte d'empilement ici : la barre et le menu, qui sont
       dedans, doivent passer au-dessus du reste de la page. */
    .home-header {
        z-index: auto;
        height: 56vh;
        padding-top: 120px;
    }

    .logo {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 5% auto 0 auto;
        text-align: center;
    }

    .nuage {
        display: none;
    }
}

/* ==========================================================================
   Accueil : statistiques
   ========================================================================== */

.main-container {
    position: relative;
    z-index: 1;
    min-height: 900px;
    margin-top: -180px;
    margin-bottom: -650px;
    padding-bottom: 830px;
    background: url(./img/main_bg.png) center / cover;
}

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

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

.unique,
.con,
.record {
    position: relative;
    transition: translate .18s ease, filter .18s ease;
}

.unique:hover,
.con:hover,
.record:hover {
    filter: brightness(1.05) drop-shadow(0 8px 12px rgba(0, 0, 0, .28));
    translate: 0 -6px;
}

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

.con {
    width: 436px;
    height: 467px;
    background: url(./img/connectes.png);
    transform: scale(.85) translateY(50px);
}

.record {
    width: 438px;
    height: 493px;
    background: url(./img/record.png);
    transform: scale(.85) translateY(-200px);
}

.spacecard .stat-num {
    position: absolute;
    top: 53%;
    left: 50%;
    z-index: 2;
    color: #fff;
    font-family: var(--hb-font-game);
    font-size: 2.8rem;
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 3px 0 rgba(0, 0, 0, .35), 0 0 10px rgba(0, 0, 0, .4);
    pointer-events: none;
    transform: translate(-50%, -50%);
}

@media (max-width: 1400px) {
    .stats {
        padding-top: 420px;
        transform: scale(.75);
    }

    .spacecard {
        justify-content: center;
    }

    .unique {
        margin: 0 -8% 0 -5%;
        transform: scale(.6) translateY(-150px);
    }

    .con {
        margin: 0 -8% 0 0;
        transform: scale(.6) translateY(-50px);
    }

    .record {
        margin: 0 -8% 0 0;
        transform: scale(.6) translateY(-250px);
    }
}

@media (max-width: 768px) {
    .main-container {
        min-height: auto;
        margin-top: -40px;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 40px;
    }

    .stats {
        width: 70%;
        padding-top: 90px;
    }

    .spacecard {
        flex-direction: column;
        align-items: center;
        gap: 0;
        margin-top: -10px;
    }

    .unique,
    .con,
    .record {
        height: auto;
        margin: 0;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        transform: none;
    }

    .unique {
        width: min(419px, 46vw);
        aspect-ratio: 419 / 483;
    }

    .con {
        width: min(436px, 47vw);
        aspect-ratio: 436 / 467;
    }

    .record {
        width: min(438px, 47vw);
        aspect-ratio: 438 / 493;
    }
}

/* ==========================================================================
   Accueil : nous rejoindre
   ========================================================================== */

.join {
    display: flex;
    justify-content: center;
    width: 50%;
    margin: 240px auto 0;
}

.tuto {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 36px;
    max-width: 1300px;
    margin: 0 auto;
    padding: 50px 24px 0;
}

.tuto-multijoueurs {
    width: min(400px, 29vw);
    height: auto;
}

.tuto-addserver {
    width: min(350px, 26vw);
    height: auto;
}

.ip2 {
    width: min(370px, 27vw);
    height: auto;
    aspect-ratio: 468 / 77;
    margin: 0 auto;
    background: url(./img/iphaut.png) center / contain no-repeat;
    cursor: pointer;
    transition: .2s ease-in-out;
}

.ip2:hover {
    background-image: url(./img/hoveriphaut.png);
}

/* Le padding agrandit la zone tactile du badge sans toucher au visuel */
.copy-ip {
    position: relative;
    display: block;
    padding: 7px 0;
}

.copy-ip::after {
    content: "Copié !";
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 6px 22px;
    background: #1c7a34;
    border: 3px solid #fff;
    border-radius: 14px;
    color: #fff;
    font-family: var(--hb-font-game);
    font-size: 1.4rem;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(.8);
    transition: .18s ease;
}

.copy-ip--done::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.tuto .copy-ip {
    animation: hb-bob 3.2s ease-in-out infinite;
}

.link {
    position: relative;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 70px;
    width: 70%;
    max-width: 100%;
    margin: 60px auto 0;
}

.help-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 100%;
}

.help-bubble {
    position: relative;
    padding: 12px 26px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 6px 0 rgba(0, 0, 0, .18);
    color: #4a3524;
    font-family: var(--hb-font-game);
    font-size: 1.5rem;
    letter-spacing: .5px;
    text-transform: uppercase;
    white-space: nowrap;
    animation: hb-bob 3.6s ease-in-out infinite;
}

.help-bubble::after {
    content: "";
    position: absolute;
    bottom: -12px;
    left: 34px;
    border: 12px solid transparent;
    border-top-color: #fff;
    border-bottom: 0;
}

.link .help-group:nth-child(2) .help-bubble {
    animation-delay: .9s;
}

/* Boutons Lien / Java / Bedrock : le libellé est dans l'image */
.game-btn-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
}

.game-btn {
    display: block;
    background: center / contain no-repeat;
    text-decoration: none;
    transition: transform .15s ease;
}

.game-btn:hover {
    transform: translateY(-3px);
}

.game-btn:active {
    transform: translateY(2px);
}

.game-btn span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.game-btn--lien,
.game-btn--java {
    width: min(199px, 42vw);
    aspect-ratio: 199 / 84;
}

.game-btn--bedrock {
    width: min(275px, 46vw);
    aspect-ratio: 275 / 83;
}

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

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

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

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

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

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

@media (min-width: 769px) {
    .game-btn--lien {
        margin-right: 80px;
    }
}

@media (max-width: 1400px) {
    .join {
        margin-top: 150px;
        transform: scale(.75);
    }
}

@media (max-width: 768px) {
    .rejoindre {
        margin-top: 20px;
    }

    .join {
        width: 52%;
        margin-top: 0;
    }

    .tuto {
        flex-direction: column;
        gap: 10px;
        padding-top: 14px;
    }

    .tuto-multijoueurs {
        width: min(400px, 52vw);
    }

    .tuto-addserver {
        width: min(350px, 46vw);
    }

    .ip2 {
        width: min(370px, 50vw);
    }

    .link {
        gap: 22px;
        margin: 20px auto 0;
    }
}

@media (max-width: 389px) {
    .help-bubble {
        padding: 10px 16px;
        font-size: 1.2rem;
    }
}

/* ==========================================================================
   Accueil : nouveautés
   ========================================================================== */

.movecontainer {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    min-height: 620px;
    margin-bottom: -110px;
    padding: 175px 20px 80px;
    background: url(./img/bdp.png) center top / 100% 100%;
}

.home-news {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    max-width: 820px;
    margin: 0 auto;
    padding: 0 16px;
}

.home-news-item {
    display: flex;
    flex-direction: column;
    width: auto;
    max-width: 100%;
}

/* Nombre impair : le dernier article prend toute la largeur */
.home-news-item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.home-news-item__title {
    position: relative;
    z-index: 2;
    display: inline-block;
    margin: 0 auto 16px;
    padding: 11px 24px;
    background: #0c3a54f2;
    border: 2px solid rgba(255, 255, 255, .6);
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
    color: #fff;
    font-family: var(--hb-font-game);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .5px;
    text-align: center;
    text-shadow: 0 0 10px rgba(0, 224, 255, .55);
    text-transform: uppercase;
}

.home-news-card {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 16px 16px 10px;
    overflow: hidden;
    background: #0c3a54f0;
    border: 2px solid rgba(255, 255, 255, .5);
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .42);
    text-decoration: none;
    transition: transform .28s cubic-bezier(.2, .7, .3, 1), box-shadow .28s ease, border-color .28s ease;
}

.home-news-card:hover {
    border-color: var(--hb-cyan);
    box-shadow: 0 16px 36px rgba(0, 0, 0, .5), 0 0 24px rgba(0, 224, 255, .35);
    transform: translateY(-8px);
}

.home-news-card::after {
    content: "Lire la suite →";
    display: block;
    margin: 12px 2px 8px;
    color: var(--hb-cyan);
    font-family: var(--hb-font-game);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .4px;
    transition: color .2s ease, transform .2s ease;
}

.home-news-card:hover::after {
    color: #00b3d8;
    transform: translateX(3px);
}

.home-news-card__img {
    display: block;
    width: 100%;
    height: 188px;
    margin-bottom: 15px;
    object-fit: cover;
    border-radius: 13px;
    transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}

.home-news-card:hover .home-news-card__img {
    transform: scale(1.06);
}

.home-news-card__img--ph {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #1c6f97, #0e3b57);
    color: rgba(255, 255, 255, .55);
    font-size: 2.4rem;
}

.home-news-card__excerpt {
    flex: 1;
    margin: 0 3px;
    color: #cfeefb;
    font-family: var(--hb-font-text);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .movecontainer {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 24px;
        padding-bottom: 44px;
    }

    .home-news {
        gap: 12px;
        max-width: 100%;
        padding: 0 12px;
    }

    .home-news-item__title {
        margin: 0 auto 8px;
        padding: 7px 8px;
        font-size: .66rem;
        letter-spacing: .3px;
    }

    .home-news-card {
        padding: 9px 9px 6px;
        border-radius: 14px;
    }

    .home-news-card::after {
        margin: 8px 2px 4px;
        font-size: .66rem;
    }

    .home-news-card__img {
        height: 84px;
        margin-bottom: 8px;
        border-radius: 9px;
    }

    .home-news-card__img--ph {
        font-size: 1.5rem;
    }

    .home-news-card__excerpt {
        font-size: .72rem;
        line-height: 1.4;
    }
}

/* ==========================================================================
   Pages intérieures
   ========================================================================== */

/* Le footer remonte de 205px sur le bas de la page. */
.header-co {
    position: relative;
    min-height: min(1347px, 70.16vw);
    margin-bottom: -205px;
    padding-bottom: 12%;
    background: url(./img/fondcon.png) center / cover, #197299 center top repeat-y;
}

.header-co--vote {
    min-height: 0;
    padding-bottom: 270px;
    background: url(./img/vote-bg.png) center top / cover no-repeat, #c9764a;
}

.header-co--boutique {
    min-height: 0;
    padding-bottom: 270px;
    background: url(./img/boutique-bg.webp) center top / cover no-repeat, #f2861c;
}

/* Brume de raccord avec la silhouette du footer, à hauteur fixe pour que
   les pages courtes gardent le même raccord. */
.header-co--boutique::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 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;
}

.header-co--compact {
    min-height: 0;
    padding-bottom: 260px;
}

.container.content {
    margin-top: 50px;
}

@media (max-width: 1400px) {
    .container.content {
        padding-top: 20px;
    }
}

@media (max-width: 768px) {
    .header-co {
        min-height: 650px;
        padding-bottom: 260px;
    }

    .header-co--compact {
        min-height: 0;
    }

    .container.content {
        padding-top: 120px;
    }
}

/* ==========================================================================
   Connexion et inscription
   ========================================================================== */

/* Carte dessinée par le graphiste : le titre est dans l'image de fond. */
.card-con {
    width: 60%;
    margin: 3% auto 0;
    padding: 8% 15% 3%;
    background: url(./img/connexcontainer.png) center / contain no-repeat;
    transform: translateX(10px);
}

.card-con--register {
    padding: 8% 13%;
    background-image: url(./img/incripcontainer.png);
    transform: translateX(17px);
}

.card-body-logreg {
    padding: 4%;
}

.card-con .form-control {
    padding: 11px 22px;
    background-color: #072f45e6 !important;
    border: 3px solid rgba(255, 255, 255, .92) !important;
    border-radius: 24px !important;
    box-shadow: inset 0 3px 9px rgba(0, 0, 0, .45) !important;
    color: #fff;
    font-family: var(--hb-font-game) !important;
    font-size: 1.05rem !important;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.card-con .form-control::placeholder {
    color: #8fb4c6;
}

.card-con .form-control:focus {
    border-color: var(--hb-cyan-light) !important;
    box-shadow: inset 0 3px 9px rgba(0, 0, 0, .45), 0 0 0 4px rgba(126, 227, 255, .28) !important;
}

.card-con .form-check-input {
    width: 24px;
    height: 24px;
    margin-top: 0;
    cursor: pointer;
}

.card-con .form-check-label {
    padding: 6px 4px;
    cursor: pointer;
}

/* Ligne « Se souvenir de moi / Oublié ? » */
.auth-options {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin: 4% 4% 0;
}

.auth-options > div {
    flex-shrink: 0;
    max-width: 100%;
    padding: 0 12px;
}

.auth-options__forgot {
    margin-top: 16px;
}

.auth-options__forgot a {
    display: inline-block;
    margin-top: 2px;
    padding: 8px 10px;
    color: #fff;
    font-family: var(--hb-font-game);
    text-decoration: none;
    transition: color .15s ease;
}

.auth-options__forgot a:hover {
    color: var(--hb-cyan-light);
    text-decoration: underline;
}

/* Boutons-images (Se connecter / S'inscrire) */
.auth-btn {
    position: relative;
    display: block;
    margin: 10px 0 0;
    padding: 0;
    background: none;
    border: 0;
    font-size: 1.3rem;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.auth-btn img {
    transition: transform .18s ease, filter .18s ease;
    will-change: transform;
}

.auth-btn:hover img {
    filter: brightness(1.1) drop-shadow(0 6px 10px rgba(0, 0, 0, .45));
    transform: translateY(-3px) scale(1.04);
}

.auth-btn:active img {
    filter: brightness(.95);
    transform: translateY(1px) scale(.99);
}

.auth-btn--login img {
    width: 90%;
}

.auth-btn--register,
.auth-btn--link {
    width: 80%;
    margin: 0 auto;
}

.auth-btn--register img {
    margin-top: 12%;
}

.auth-btn--link {
    font-size: 1rem;
}

/* Écrans peu hauts : on resserre la carte, theme.js ajuste ensuite le zoom */
@media (min-width: 769px) and (max-height: 900px) {
    .card-con {
        margin-top: 2%;
    }
}

@media (min-width: 769px) and (max-height: 860px) {
    .card-con {
        margin-top: 1%;
        padding-top: 7%;
        padding-bottom: 2%;
    }
}

@media (min-width: 769px) and (max-height: 760px) {
    .card-con {
        margin-top: 0;
        padding-top: 6%;
        padding-bottom: 1%;
    }
}

/* En portrait, l'image de la carte est trop large : la carte devient un
   panneau classique et le titre passe en texte. */
@media (max-width: 768px) {
    .card-con {
        width: 100%;
        max-width: 460px;
        margin: 16px auto 0;
        padding: 20px 18px 24px;
        background: #0c3a54f2;
        border: 3px solid rgba(255, 255, 255, .5);
        border-radius: 24px;
        box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
        transform: none;
    }

    .card-con--register {
        padding: 8% 10%;
    }

    .card-con::before {
        content: "CONNEXION";
        display: block;
        margin-bottom: 16px;
        color: #bcdcea;
        font-family: var(--hb-font-game);
        font-size: 1.7rem;
        letter-spacing: 1px;
        text-align: center;
    }

    .card-con--register::before {
        content: "INSCRIPTION";
    }

    .card-body-logreg {
        padding-top: 0;
    }

    .auth-options {
        flex-direction: column;
        justify-content: center;
        gap: 14px;
        margin: 6% 0 2%;
    }
}

@media (max-height: 860px) {
    .card-con--register {
        padding-top: 6%;
        padding-bottom: 2%;
    }
}

@media (max-height: 760px) {
    .card-con--register {
        padding-top: 5%;
        padding-bottom: 1%;
    }
}

/* Mot de passe oublié */
.card-template {
    width: 50%;
    margin: 10% auto 0;
    padding: 3%;
    background-color: var(--hb-glass);
    border: 10px solid #fff;
    border-radius: 40px;
    text-align: center;
}

.card-template h3 {
    padding: 3%;
    font-family: var(--hb-font-game);
    font-size: 1.5rem;
}

.card-template__btn {
    position: relative;
    z-index: 10;
    width: 20%;
    margin: 3% auto 0;
    padding: 3%;
    overflow: hidden;
    background: none;
    border: 1px solid #fff;
    border-radius: 30px;
    color: #fff;
    font-family: var(--hb-font-game);
    font-size: 1.2rem;
    cursor: pointer;
    transition: .5s;
}

.card-template__btn:hover {
    box-shadow: 1px 4.5px 8px 4px var(--hb-glass);
    transform: scale(1.1);
}

/* Autres pages du compte (A2F, vérification, réinitialisation) */
.auth-hb__note {
    margin-bottom: 12px;
    color: #cfeefb;
    font-family: var(--hb-font-text);
    text-align: center;
}

.auth-hb__lien {
    margin: 14px 0 0;
    text-align: center;
}

.auth-hb__lien a {
    color: var(--hb-cyan-light);
    font-family: var(--hb-font-game);
    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;
}

/* ==========================================================================
   Panneaux et boutons (boutique, profil, article...)
   ========================================================================== */

.shop-hb {
    position: relative;
    z-index: 2;
    padding: 10px 0 40px;
    color: #fff;
    font-family: var(--hb-font-text);
}

.shop-hb p,
.shop-hb li,
.shop-hb label {
    font-family: var(--hb-font-text);
}

.shop-hb a {
    text-decoration: none;
}

.shop-hb h5 {
    margin-bottom: 12px;
    color: #fff;
    font-weight: 700;
}

.shop-hb-title {
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 22px;
    padding: 8px 26px;
    background: var(--hb-glass);
    border: 3px solid #fff;
    border-radius: 14px;
    color: #fff;
    font-family: var(--hb-font-game);
    font-size: 2.4rem;
    letter-spacing: 2px;
    text-align: center;
    text-shadow: 0 3px 0 rgba(0, 0, 0, .45);
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

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

.shop-hb-main--form-sm {
    max-width: 460px;
}

.shop-hb-main--form {
    max-width: 520px;
}

.shop-hb-main--form-lg {
    max-width: 560px;
}

.shop-hb-main--message {
    max-width: 600px;
}

.shop-hb-main--article {
    max-width: 860px;
}

.shop-hb-main--wide {
    max-width: 900px;
}

.shop-hb-main--table {
    max-width: 1000px;
}

.shop-hb-panel {
    margin-bottom: 22px;
    padding: 18px 20px;
    background: var(--hb-panel);
    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);
}

.shop-hb-panel h2,
.shop-hb-panel h3 {
    color: #fff;
}

.shop-hb-empty {
    padding: 26px;
    background: var(--hb-panel);
    border: 2px dashed rgba(255, 255, 255, .4);
    border-radius: 14px;
    color: #cfeefb;
    text-align: center;
}

.shop-hb-btn {
    display: inline-block;
    padding: 10px 18px !important;
    background: var(--hb-purple) !important;
    border: 2px solid #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 0 #8a2f78, 0 6px 12px rgba(90, 25, 0, .35) !important;
    color: #fff !important;
    font-family: var(--hb-font-game);
    font-weight: 700;
    letter-spacing: 1px;
    text-align: center;
    text-shadow: 0 2px 0 rgba(88, 20, 76, .45);
    text-transform: uppercase;
    cursor: pointer;
    transition: .15s ease;
}

.shop-hb-btn:hover {
    color: #fff !important;
    filter: brightness(1.08);
    transform: translateY(-2px);
}

.shop-hb-btn:active {
    box-shadow: 0 2px 0 #8a2f78 !important;
    transform: translateY(1px);
}

.shop-hb-btn--ghost {
    background: var(--hb-glass) !important;
    box-shadow: none !important;
    color: #fff !important;
    text-shadow: none;
}

.shop-hb-btn--danger {
    background: linear-gradient(180deg, #ff6b6b, #c0392b) !important;
    box-shadow: 0 4px 0 #8e2418, 0 6px 12px rgba(0, 0, 0, .3) !important;
    color: #fff !important;
}

.shop-hb-btn--danger:hover {
    color: #fff !important;
}

.shop-hb-btn--sm {
    padding: 7px 13px !important;
    border-radius: 10px !important;
    font-size: .85rem !important;
}

.shop-hb-btn--block {
    display: block;
    width: 100%;
}

.shop-hb-separator {
    margin: 20px 0;
    border-color: rgba(255, 255, 255, .15);
}

.shop-hb-progress {
    height: 16px;
    overflow: hidden;
    background: #07435c;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 10px;
}

.shop-hb-progress > div {
    height: 100%;
    background: linear-gradient(90deg, var(--hb-cyan), #0090c0);
}

.shop-hb-table {
    width: 100%;
    border-collapse: collapse;
    color: #eaffff;
}

.shop-hb-table th,
.shop-hb-table td {
    padding: 11px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .15);
    text-align: left;
}

.shop-hb-table td {
    font-family: var(--hb-font-text);
    font-size: 1rem;
}

.shop-hb-table thead th {
    color: var(--hb-cyan);
    font-family: var(--hb-font-game);
    font-size: .95rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.shop-hb-table tbody tr:last-child th,
.shop-hb-table tbody tr:last-child td {
    border-bottom: none;
}

.shop-hb-table .form-control {
    max-width: 90px;
    margin: 0 auto;
}

/* Champs des panneaux */
.shop-hb .mb-3 {
    margin: 0 0 14px 0 !important;
    text-align: left;
}

.shop-hb .form-label {
    display: block;
    margin-bottom: 6px;
    text-align: left;
}

.shop-hb .form-control {
    width: 100%;
    padding: 10px 18px;
    background: #072f45e6 !important;
    border: 3px solid rgba(255, 255, 255, .85) !important;
    border-radius: 18px !important;
    box-shadow: inset 0 3px 9px rgba(0, 0, 0, .45);
    color: #fff !important;
    text-align: center;
    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: var(--hb-cyan-light) !important;
    box-shadow: inset 0 3px 9px rgba(0, 0, 0, .45), 0 0 0 4px rgba(126, 227, 255, .28) !important;
}

.shop-hb textarea.form-control {
    min-height: 110px;
    padding: 12px;
    text-align: left;
}

.shop-hb .input-group {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.shop-hb .input-group .form-control {
    flex: 1;
}

/* Modales (achat, confirmation) */
.shop-hb-modal {
    background: #0c3a54;
    border: 2px solid rgba(255, 255, 255, .55);
    border-radius: 16px;
    color: #fff;
}

.shop-hb-modal .modal-header,
.shop-hb-modal .modal-footer {
    border-color: rgba(255, 255, 255, .2);
}

.shop-hb-modal .modal-body {
    color: #eaffff;
}

.shop-hb-modal label {
    color: #cfeefb;
}

/* ==========================================================================
   Boutique
   ========================================================================== */

.shop-hb-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 14px;
    max-width: 900px;
    margin: 0 auto 22px;
}

.shop-hb-bar__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.shop-hb-bar form {
    margin: 0;
}

.shop-hb-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.shop-hb-nav a {
    display: block;
    padding: 9px 16px;
    background: var(--hb-glass);
    border: 2px solid rgba(255, 255, 255, .35);
    border-radius: 12px;
    color: #eaffff;
    font-family: var(--hb-font-game);
    font-size: 1.05rem;
    transition: .18s ease;
}

.shop-hb-nav a:hover {
    background: #0a5a7d;
    transform: translateY(-2px);
}

.shop-hb-nav a.active {
    background: var(--hb-purple);
    border-color: #fff;
    color: #fff;
    font-weight: 700;
}

.shop-hb-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px 6px;
    background: var(--hb-glass);
    border: 2px solid rgba(255, 255, 255, .35);
    border-radius: 12px;
}

.shop-hb-user img {
    width: 38px;
    height: 38px;
    border: 2px solid rgba(255, 255, 255, .5);
    border-radius: 9px;
}

.shop-hb-user .name {
    font-weight: 700;
    line-height: 1.15;
}

.shop-hb-user .money {
    color: #ffd76b;
    font-size: .95rem;
    line-height: 1.15;
}

.shop-hb-recent {
    margin-bottom: 10px;
}

.shop-hb-intro {
    max-width: 900px;
    margin: 0 auto 22px;
    text-align: center;
}

.shop-hb-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
}

/* Tuile : cadre blanc, voile translucide et tranche violette */
.shop-hb-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .68) 55%, rgba(255, 255, 255, .5) 100%);
    border: 5px solid #fff;
    border-radius: 22px;
    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 {
    box-shadow: 0 14px 0 0 #ba5eaa, 0 22px 30px rgba(90, 25, 0, .34);
    transform: translateY(-5px);
}

.shop-hb-card--centre {
    text-align: center;
}

.shop-hb-card__img {
    width: 100%;
    aspect-ratio: 4 / 3;
    padding: 14px 14px 6px;
    object-fit: contain;
    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: 1;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0 14px 14px;
}

.shop-hb-card__name {
    color: #47143f;
    font-family: var(--hb-font-game);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: .5px;
    text-align: center;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.shop-hb-modal .shop-hb-card__name {
    color: #fff;
}

.shop-hb-card__desc {
    flex: 1;
    color: #4a2015;
    font-family: var(--hb-font-text);
    font-size: .9rem;
    text-align: center;
}

.shop-hb-card__price {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 16px;
    background: var(--hb-purple);
    border: 2px solid #fff;
    border-radius: 14px;
    box-shadow: 0 3px 0 rgba(88, 20, 76, .45);
    color: #fff;
    font-family: var(--hb-font-game);
    font-size: 1.25rem;
    letter-spacing: .5px;
    text-shadow: 0 2px 0 rgba(88, 20, 76, .45);
}

.shop-hb-card__price del {
    margin-right: 2px;
    color: #ffffffb3;
    font-size: .9rem;
}

.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;
}

/* Panier */
.shop-hb-codes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.shop-hb-total {
    margin: 14px 0;
    color: #ffd76b;
    font-size: 1.35rem;
    font-weight: 800;
    text-align: right;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .4);
}

.shop-hb-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
}

.shop-hb-actions--end {
    justify-content: flex-end;
}

.shop-hb-actions .form-control {
    max-width: 240px;
}

/* Fond de lave : les panneaux passent au brun pour ne pas virer au vert. */
.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,
.header-co--boutique .shop-hb-empty {
    background: var(--hb-brown) !important;
}

.header-co--boutique .nuage {
    display: none;
}

@media (max-width: 760px) {
    .shop-hb-title {
        font-size: 1.9rem;
    }

    .shop-hb-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}

@media (max-width: 576px) {
    .shop-hb-codes {
        grid-template-columns: minmax(0, 1fr);
    }
}

@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 {
        padding: 4px 12px;
        font-size: 1.05rem;
    }

    .shop-hb-btn {
        padding: 9px 10px !important;
        font-size: .9rem;
        letter-spacing: .5px;
    }

    .shop-hb-btn--sm {
        padding: 7px 13px !important;
    }
}

/* ==========================================================================
   Vote
   ========================================================================== */

.header-co--vote .newnav {
    background: #4a2510ab;
}

.header-co--vote .navbar-toggler-icon {
    border-color: #4a2510ab;
}

.header-co--vote .mobile-navbar,
.header-co--vote .mobile-navbar-container {
    background: #4a2510d9;
}

.vote-hb {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px 16px 0;
}

.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;
}

.vote-hb-form .form-control {
    padding: 12px 22px !important;
    background: #4a2510e8 !important;
    border: 3px solid #ffdfb5 !important;
    border-radius: 26px !important;
    box-shadow: inset 0 4px 10px rgba(0, 0, 0, .55) !important;
    color: #fff !important;
    font-family: var(--hb-font-game) !important;
    font-size: 1.25rem !important;
    text-align: center !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 {
    background: #572c13f2 !important;
    border-color: #ffb347 !important;
    box-shadow: inset 0 4px 10px rgba(0, 0, 0, .55), 0 0 0 4px rgba(255, 179, 71, .35) !important;
}

.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;
}

.vote-hb-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 30px;
    background: linear-gradient(180deg, #ff9d3c, #e9701a);
    border: 4px solid #fff;
    border-radius: 18px;
    box-shadow: 0 6px 0 #8a4a22, 0 10px 16px rgba(0, 0, 0, .3);
    color: #fff !important;
    font-family: var(--hb-font-game);
    font-size: 1.35rem;
    text-decoration: none;
    cursor: pointer;
    transition: .15s ease;
}

.vote-hb-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-3px);
}

.vote-hb-btn:active {
    box-shadow: 0 2px 0 #8a4a22;
    transform: translateY(3px);
}

.vote-hb-btn .vote-timer {
    padding: 2px 8px;
    background: #00000038;
    border-radius: 8px;
    font-size: .85rem;
}

.vote-hb-btn .vote-timer:empty {
    display: none;
}

.vote-hb-note {
    margin: 14px 0 0;
    color: #fff;
    font-family: var(--hb-font-text);
    font-size: 1.15rem;
    text-align: center;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .35);
}

.vote-hb-empty {
    padding: 20px 26px;
    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;
    box-shadow: inset 0 2px 12px rgba(0, 0, 0, .35);
    color: #f6e7d4;
    font-family: var(--hb-font-text);
    font-size: 1.05rem;
    letter-spacing: .3px;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

.vote-hb-goal {
    max-width: 620px;
    margin: 0 auto 34px;
}

/* Classement : colonnes calées sur les proportions de vote-ligne.png */
.vote-hb-board {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    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;
    border-radius: 20px;
    opacity: .5;
    pointer-events: none;
}

.vote-hb-board > * {
    position: relative;
}

.vote-hb-head,
.vote-hb-row {
    display: grid;
    grid-template-columns: 7.366% 27.832% 27.728% 37.074%;
    align-items: center;
}

.vote-hb-head {
    padding: 4px 0 2px;
}

.vote-hb-row {
    min-height: 58px;
    aspect-ratio: 1439 / 106;
    background: url(./img/vote-ligne.png) center / 100% 100% no-repeat;
}

.vote-hb-cell {
    padding: 0 10px;
    overflow: hidden;
    color: #fff;
    font-family: var(--hb-font-game);
    font-size: clamp(.85rem, 1.5vw, 1.25rem);
    text-align: center;
    text-overflow: ellipsis;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .4);
    white-space: nowrap;
}

.vote-hb-cell--rank {
    padding: 0 2px;
}

.vote-hb-cell--reward {
    color: #ffe9a8;
}

.vote-hb-head .vote-hb-cell {
    padding: 0 8px;
    color: #fff5e2;
    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);
    text-transform: uppercase;
}

/* Voile de chargement pendant un vote */
#vote-card .spinner-parent {
    display: none;
}

#vote-card.voting .spinner-parent {
    position: absolute;
    inset: -8px -14px -20px;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(60, 28, 10, .55);
    border-radius: 24px;
    backdrop-filter: blur(3px);
}

#vote-card .spinner-border {
    width: 2.6rem;
    height: 2.6rem;
    border-width: .3em;
    color: #ffb347 !important;
}

@media (max-width: 700px) {
    .vote-hb-board {
        padding: 12px 8px 16px;
    }

    .vote-hb-row {
        aspect-ratio: auto;
        padding: 10px 0;
    }

    .vote-hb-cell {
        padding: 0 3px;
        font-size: .78rem;
        letter-spacing: 0;
    }

    .vote-hb-head .vote-hb-cell {
        padding: 0 2px;
        font-size: .68rem;
    }
}

/* ==========================================================================
   Profil
   ========================================================================== */

.profil-hb__tete {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 26px;
}

.profil-hb__avatar {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    align-items: center;
    gap: 10px;
}

.profil-hb__avatar img {
    width: 128px;
    height: 128px;
    border: 3px solid rgba(255, 255, 255, .6);
    border-radius: 18px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
    image-rendering: pixelated;
}

.profil-hb__role {
    padding: 5px 14px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-radius: 12px;
    font-family: var(--hb-font-game);
    font-size: .95rem;
    white-space: nowrap;
}

.profil-hb__infos {
    flex: 1 1 320px;
    min-width: 0;
}

.profil-hb__pseudo {
    margin: 0 0 14px;
    color: #fff;
    font-family: var(--hb-font-game);
    font-size: 2rem;
    text-align: left;
    text-shadow: 0 3px 0 rgba(0, 0, 0, .35);
    word-break: break-word;
}

.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 {
    flex-shrink: 0;
    color: var(--hb-cyan-light);
    font-family: var(--hb-font-game);
    font-weight: normal;
    letter-spacing: .3px;
}

.profil-hb__liste dd {
    min-width: 0;
    margin: 0;
    color: #eaffff;
    font-family: var(--hb-font-text);
    text-align: right;
    word-break: break-all;
}

.profil-hb__uuid {
    font-size: .82rem;
    opacity: .75;
}

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

.profil-hb__actions form {
    margin: 0;
}

.profil-hb__grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    align-items: start;
    gap: 20px;
}

.profil-hb__grille .shop-hb-panel {
    margin-bottom: 0;
}

.profil-hb__grille .mb-3 {
    margin: 0 0 14px 0 !important;
    text-align: left;
}

.profil-hb .form-label,
.profil-hb__grille .form-label {
    display: block;
    text-align: left;
}

.profil-hb__note {
    margin-bottom: 10px;
    color: #cfeefb;
}

.profil-hb__aide {
    display: block;
    margin-top: 6px;
    color: #8fb4c6;
    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;
}

@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;
    }
}

/* ==========================================================================
   Articles
   ========================================================================== */

.post-hb-back {
    margin-bottom: 18px;
}

.post-hb-img {
    display: block;
    width: 100%;
    max-height: 380px;
    margin-bottom: 22px;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .35);
}

.post-hb-content {
    color: #e6f4fb;
    font-family: var(--hb-font-text);
    font-size: 1.05rem;
    line-height: 1.65;
}

.post-hb-content p,
.post-hb-content li {
    font-family: var(--hb-font-text);
}

.post-hb-content a {
    color: var(--hb-cyan);
}

.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;
}

.post-hb-meta {
    margin-bottom: 0;
    color: #bcdcea;
}

.post-hb-comment__avatar {
    height: 56px;
    border: 2px solid rgba(255, 255, 255, .4);
}

.post-hb-comment__date {
    margin-bottom: 0;
    color: #8fb4c6;
    font-size: .85rem;
}

.post-hb-label {
    color: #cfeefb;
}

/* Liste des articles */
.news-hb {
    max-width: 820px;
    margin: 0 auto;
}

.news-hb .home-news {
    padding: 0;
}

.news-hb-search {
    max-width: 420px;
    margin: 0 auto 28px;
}

/* ==========================================================================
   Pages d'erreur
   ========================================================================== */

.error-hb {
    max-width: 620px;
    margin: 40px auto;
    padding: 40px 32px;
    background: #0c3a54f0;
    border: 3px solid rgba(255, 255, 255, .5);
    border-radius: 24px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
    text-align: center;
}

.error-hb__code {
    color: var(--hb-cyan);
    font-family: var(--hb-font-game);
    font-size: 5rem;
    line-height: 1;
    text-shadow: 0 4px 0 rgba(0, 0, 0, .35);
}

.error-hb__title {
    margin: 10px 0 6px;
    color: #fff;
    font-family: var(--hb-font-game);
    font-size: 1.8rem;
}

.error-hb__msg {
    margin-bottom: 24px;
    color: #cfeefb;
    font-family: var(--hb-font-text);
}

/* ==========================================================================
   Pied de page
   ========================================================================== */

/* Le haut de bgfooter.png (~100px) est occupé par la silhouette des
   montagnes : le contenu commence en dessous. */
.footer {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    min-height: 427px;
    margin-top: auto;
    padding: 114px 20px 22px;
    background: url(./img/bgfooter.png) center / cover;
}

.footer a {
    color: inherit;
    text-decoration: none;
    transition: color .2s ease, transform .2s ease;
}

.elements-footer {
    position: relative;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-start;
    gap: 24px;
}

.social {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-logo {
    width: 80%;
    margin-bottom: 1%;
}

.social ul {
    display: flex;
    justify-content: space-between;
    width: 70%;
    margin-top: 3%;
    padding: 10px 40px;
    list-style: none;
    background-color: #02121878;
    border-radius: 30px;
}

.footer .social ul a {
    display: inline-flex;
    padding: 6px;
    transition: transform .2s ease;
}

.footer .social ul a:hover {
    transform: translateY(-3px) scale(1.1);
}

.contact {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    text-align: center;
}

.contact p {
    margin: 0;
    font-family: "roboto";
    font-size: 1.5rem;
    text-transform: uppercase;
}

.soutenir,
.contact-us {
    width: 285px;
    padding-bottom: 14px;
    background: #02121878;
    border-radius: 10px;
    text-align: center;
}

.footer-titre {
    margin: 0 0 20px;
    padding: 14px 10px 12px;
    border-radius: 10px 10px 0 0;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2);
    color: #fff;
    font-family: var(--hb-font-game);
    font-size: 1.5rem;
    line-height: 1;
    letter-spacing: 1px;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .5);
    text-transform: uppercase;
}

.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;
}

.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;
}

/* Liens en pastilles, à la couleur du bandeau de leur panneau */
.footer .soutenir p a,
.footer .contact-us p a {
    display: block;
    width: 84%;
    margin: 0 auto;
    padding: 10px 12px;
    background: #ffffff0f;
    border: 2px solid;
    border-radius: 14px;
    box-shadow: 0 3px 0 rgba(0, 0, 0, .35);
    font-family: var(--hb-font-game);
    font-size: 1.5rem;
    line-height: 20px;
    letter-spacing: .5px;
    transition: background-color .18s ease, border-color .18s ease, transform .18s ease, color .18s ease;
}

.footer .soutenir p a {
    border-color: #9e12bc;
}

.footer .contact-us p a {
    border-color: #1085b6;
}

.footer .soutenir p a:hover {
    background: #9e12bc4d;
    border-color: #e05cff;
    color: #f7c9ff !important;
    transform: translateY(-2px);
}

.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 {
    box-shadow: 0 1px 0 rgba(0, 0, 0, .35);
    transform: translateY(1px);
}

.footer-copyright {
    position: static;
    z-index: 4;
    margin: 6px 0 0;
    color: #cfe6f0;
    font-family: var(--hb-font-text);
    font-size: .95rem;
    letter-spacing: .3px;
    text-align: center;
}

/* Logo et réseaux un peu plus bas que les deux panneaux */
@media (min-width: 769px) {
    .social {
        transform: translateY(38px);
    }
}

/* Sous 900px le logo passe au-dessus, les deux panneaux restent côte à côte */
@media (max-width: 900px) {
    .elements-footer {
        flex-direction: column;
        align-items: center;
        gap: 18px;
    }

    .contact {
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        gap: 12px;
        width: 100%;
    }

    .soutenir,
    .contact-us {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        max-width: 285px;
        margin: 0;
    }
}

@media (max-width: 768px) {
    .footer {
        min-height: auto;
        padding: 26px 16px 16px;
    }

    .elements-footer {
        gap: 14px;
        margin-bottom: 12px;
    }

    .footer-logo {
        width: 52%;
    }

    .social ul {
        gap: 20px;
        width: 90%;
    }

    .contact p {
        font-size: 1rem;
    }

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

    .footer .soutenir p a,
    .footer .contact-us p a {
        font-size: 1.15rem;
    }
}

/* Deux panneaux sur un téléphone : titres réduits pour tenir sur une ligne */
@media (max-width: 520px) {
    .contact {
        gap: 8px;
    }

    .contact p {
        font-size: .9rem;
    }

    .footer-titre {
        margin-bottom: 8px;
        padding: 10px 4px 8px;
        font-size: clamp(.75rem, 3.4vw, .95rem);
        letter-spacing: 0;
    }
}

/* ==========================================================================
   Animations réduites
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .newnav,
    .home-logo,
    .grolo .copy-ip {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .promo-banner .shine {
        color: #fff;
        -webkit-text-fill-color: #fff;
        animation: none;
    }

    .tuto .copy-ip,
    .help-bubble,
    .boutique-badge {
        animation: none;
    }

    .unique,
    .con,
    .record,
    .hb-pass__i,
    .hb-pass__oeil {
        transition: none;
    }

    .unique:hover,
    .con:hover,
    .record:hover {
        filter: none;
        translate: none;
    }
}