/* ============================================================
   Haven47 — thème Azuriom
   Glassmorphism, fond bleu nuit, accent #4f8cff (cohérent launcher)
   ============================================================ */

:root {
    --h47-accent: #4f8cff;
    --h47-accent-soft: #7fb0ff;
    --h47-accent-deep: #3d7bf0;
    --h47-bg: #0a101e;
    --h47-glass: rgba(255, 255, 255, 0.05);
    --h47-glass-strong: rgba(255, 255, 255, 0.09);
    --h47-border: rgba(255, 255, 255, 0.10);
    --h47-border-hover: rgba(127, 176, 255, 0.45);
    --h47-radius: 1rem;
    --h47-shadow: 0 18px 45px rgba(2, 6, 16, 0.45);
}

html,
body {
    height: 100%;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
}

body {
    background-color: var(--h47-bg);
    background-image:
        radial-gradient(60rem 42rem at 12% -12%, rgba(79, 140, 255, 0.20), transparent 60%),
        radial-gradient(50rem 38rem at 108% 18%, rgba(79, 140, 255, 0.12), transparent 60%),
        radial-gradient(45rem 40rem at 50% 115%, rgba(61, 123, 240, 0.10), transparent 65%);
    background-attachment: fixed;
    color: #e6edf8;
}

a {
    color: var(--h47-accent-soft);
}

a:hover {
    color: #aecdff;
}

::selection {
    background: rgba(79, 140, 255, 0.45);
}

/* ------------------------------------------------------------
   Navbar (verre flottant, se densifie au scroll)
   ------------------------------------------------------------ */

.h47-navbar {
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.h47-navbar.is-scrolled,
.h47-navbar .navbar-collapse.show,
.h47-navbar .navbar-collapse.collapsing {
    background: rgba(10, 16, 30, 0.78);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.h47-navbar.is-scrolled {
    border-bottom-color: var(--h47-border);
    box-shadow: 0 10px 30px rgba(2, 6, 16, 0.35);
}

.h47-brand {
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: linear-gradient(135deg, #eaf2ff 10%, var(--h47-accent-soft) 55%, var(--h47-accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.h47-brand-logo {
    height: 2.25rem;
}

.h47-navbar .nav-link {
    color: rgba(230, 237, 248, 0.78);
    border-radius: 0.6rem;
    padding-left: 0.85rem;
    padding-right: 0.85rem;
    transition: color 0.2s ease, background 0.2s ease;
}

.h47-navbar .nav-link:hover,
.h47-navbar .nav-link:focus {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

.h47-navbar .nav-link.active {
    color: #fff;
    background: rgba(79, 140, 255, 0.16);
}

.h47-nav-cta {
    padding: 0.45rem 1.1rem;
}

.navbar-toggler {
    border-color: var(--h47-border);
}

/* Compense la navbar fixe sur toutes les pages hors accueil */
.h47-page {
    padding-top: 5.5rem;
}

/* Titre de page générique (profil, panier, pages de plugins…) :
   centré avec le trait dégradé, comme les titres de section */
.h47-page > h1 {
    font-weight: 800;
    letter-spacing: 0.02em;
    text-align: center;
    margin-bottom: 2rem;
}

.h47-page > h1::after {
    content: "";
    display: block;
    width: 4rem;
    height: 3px;
    margin: 0.75rem auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--h47-accent-soft), var(--h47-accent));
}

/* ------------------------------------------------------------
   Héro de l'accueil
   ------------------------------------------------------------ */

.h47-hero {
    position: relative;
    min-height: 82vh;
    padding: 7rem 1.5rem 3rem;
    overflow: hidden;
}

/* Image de fond optionnelle (réglage "background" du CMS) + voile bleuté,
   sinon le dégradé du body sert de fond. L'image se fond dans le fond
   sombre aux 2/3 du héro (sous le sous-titre), le bas reste uni. */
.h47-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(10, 16, 30, 0.70) 0%, rgba(10, 16, 30, 0.58) 38%, var(--h47-bg) 68%),
        var(--h47-hero-image, none) center top / cover no-repeat;
    z-index: 0;
}

.h47-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 60rem;
}

.h47-kicker {
    text-transform: uppercase;
    letter-spacing: 0.35em;
    font-size: 0.85rem;
    color: rgba(230, 237, 248, 0.65);
    margin-bottom: 1rem;
}

.h47-wordmark {
    font-size: clamp(3rem, 10vw, 6.5rem);
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.05;
    background: linear-gradient(135deg, #eef4ff 0%, var(--h47-accent-soft) 45%, var(--h47-accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 12px 40px rgba(79, 140, 255, 0.35));
    margin-bottom: 1rem;
}

@media (max-width: 575.98px) {
    .h47-wordmark {
        font-size: clamp(2.2rem, 11vw, 3.6rem);
        letter-spacing: 0.02em;
    }
}

.h47-subtitle {
    font-size: 1.15rem;
    color: rgba(230, 237, 248, 0.75);
    margin-bottom: 1.75rem;
}

.h47-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    justify-content: center;
    margin-top: 1.75rem;
}

.h47-scroll-cue {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    color: rgba(230, 237, 248, 0.55);
    font-size: 1.5rem;
    animation: h47-bounce 2.2s infinite;
}

.h47-scroll-cue:hover {
    color: #fff;
}

@keyframes h47-bounce {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, 8px); }
}

/* Pastille de statut serveur */
.h47-status {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 1.2rem;
    border-radius: 999px;
    background: var(--h47-glass);
    border: 1px solid var(--h47-border);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    font-weight: 600;
}

.h47-status-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: #6c757d;
}

.h47-status.is-online .h47-status-dot {
    background: #3ddc84;
    box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.6);
    animation: h47-pulse 2s infinite;
}

.h47-status.is-offline .h47-status-dot {
    background: #ff5d6c;
}

@keyframes h47-pulse {
    0% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.55); }
    70% { box-shadow: 0 0 0 10px rgba(61, 220, 132, 0); }
    100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); }
}

/* ------------------------------------------------------------
   Boutons
   ------------------------------------------------------------ */

.btn {
    border-radius: 0.75rem;
    font-weight: 600;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.btn:active {
    transform: translateY(1px);
}

.btn-primary {
    --bs-btn-bg: var(--h47-accent);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: var(--h47-accent-deep);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: var(--h47-accent-deep);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-bg: rgba(79, 140, 255, 0.45);
    --bs-btn-disabled-border-color: transparent;
    background-image: linear-gradient(135deg, #5e97ff 0%, var(--h47-accent-deep) 100%);
    box-shadow: 0 10px 28px rgba(79, 140, 255, 0.35);
}

.btn-primary:hover,
.btn-primary:focus {
    transform: translateY(-1px);
    box-shadow: 0 14px 34px rgba(79, 140, 255, 0.45);
}

.btn-glass {
    color: #e6edf8;
    background: var(--h47-glass);
    border: 1px solid var(--h47-border);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.btn-glass:hover,
.btn-glass:focus {
    color: #fff;
    background: var(--h47-glass-strong);
    border-color: var(--h47-border-hover);
    transform: translateY(-1px);
}

.btn-glass.is-copied,
.h47-btn-play.is-copied {
    border-color: rgba(61, 220, 132, 0.6);
    box-shadow: 0 10px 28px rgba(61, 220, 132, 0.25);
}

/* ------------------------------------------------------------
   Cartes (verre) — couvre aussi les pages du core (profil, boutique…)
   ------------------------------------------------------------ */

.card {
    --bs-card-bg: transparent;
    background: var(--h47-glass);
    border: 1px solid var(--h47-border);
    border-radius: var(--h47-radius);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: var(--h47-shadow);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.card .card-header {
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid var(--h47-border);
    border-radius: var(--h47-radius) var(--h47-radius) 0 0 !important;
}

.card .card-footer {
    background: rgba(255, 255, 255, 0.03);
    border-top: 1px solid var(--h47-border);
}

.card-img-top {
    border-radius: calc(var(--h47-radius) - 1px) calc(var(--h47-radius) - 1px) 0 0;
    object-fit: cover;
}

.post-preview:hover,
.h47-server-card:hover {
    transform: translateY(-4px);
    border-color: var(--h47-border-hover);
    box-shadow: 0 22px 55px rgba(2, 6, 16, 0.55), 0 0 0 1px rgba(79, 140, 255, 0.15);
}

.post-preview .card-title a {
    color: #eef4ff;
}

.post-preview .card-title a:hover {
    color: var(--h47-accent-soft);
}

.h47-section-title {
    font-weight: 800;
    letter-spacing: 0.02em;
    margin-bottom: 1.75rem;
}

.h47-section-title::after {
    content: "";
    display: block;
    width: 4rem;
    height: 3px;
    margin: 0.75rem auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--h47-accent-soft), var(--h47-accent));
}

.h47-badge-offline {
    background: rgba(255, 93, 108, 0.15);
    color: #ff8d99;
    border: 1px solid rgba(255, 93, 108, 0.35);
}

/* ------------------------------------------------------------
   Composants Bootstrap (formulaires, dropdowns, alertes…)
   ------------------------------------------------------------ */

.form-control,
.form-select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--h47-border);
    border-radius: 0.65rem;
    color: #e6edf8;
}

.form-control:focus,
.form-select:focus {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--h47-accent);
    box-shadow: 0 0 0 0.25rem rgba(79, 140, 255, 0.20);
    color: #fff;
}

.form-control::placeholder {
    color: rgba(230, 237, 248, 0.4);
}

.dropdown-menu {
    background: rgba(13, 20, 36, 0.92);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border: 1px solid var(--h47-border);
    border-radius: 0.85rem;
    box-shadow: var(--h47-shadow);
    overflow: hidden;
}

.dropdown-item {
    color: rgba(230, 237, 248, 0.85);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: rgba(79, 140, 255, 0.14);
    color: #fff;
}

.dropdown-item.active {
    background: var(--h47-accent);
}

.alert {
    border-radius: 0.85rem;
    border: 1px solid var(--h47-border);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.progress {
    height: 0.55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.progress-bar {
    border-radius: 999px;
    background: linear-gradient(90deg, var(--h47-accent-soft), var(--h47-accent-deep));
}

.pagination {
    --bs-pagination-bg: var(--h47-glass);
    --bs-pagination-border-color: var(--h47-border);
    --bs-pagination-color: #e6edf8;
    --bs-pagination-hover-bg: var(--h47-glass-strong);
    --bs-pagination-hover-color: #fff;
    --bs-pagination-hover-border-color: var(--h47-border-hover);
    --bs-pagination-focus-bg: var(--h47-glass-strong);
    --bs-pagination-focus-color: #fff;
    --bs-pagination-active-bg: var(--h47-accent);
    --bs-pagination-active-border-color: var(--h47-accent);
    --bs-pagination-disabled-bg: rgba(255, 255, 255, 0.02);
    --bs-pagination-disabled-border-color: var(--h47-border);
}

.list-group {
    border-radius: var(--h47-radius);
}

.list-group-item {
    background: var(--h47-glass);
    border-color: var(--h47-border);
    color: rgba(230, 237, 248, 0.85);
    transition: background 0.2s ease, color 0.2s ease;
}

.list-group-item:hover,
.list-group-item:focus {
    background: var(--h47-glass-strong);
    color: #fff;
}

.list-group-item.active {
    background: linear-gradient(135deg, #5e97ff 0%, var(--h47-accent-deep) 100%);
    border-color: transparent;
    color: #fff;
}

/* Cartes d'articles de la boutique */
.h47-package .card-img-top {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.h47-package:hover {
    transform: translateY(-4px);
    border-color: var(--h47-border-hover);
    box-shadow: 0 22px 55px rgba(2, 6, 16, 0.55), 0 0 0 1px rgba(79, 140, 255, 0.15);
}

.h47-package-price {
    font-size: 1.2rem;
    font-weight: 800;
    background: linear-gradient(135deg, #eef4ff 0%, var(--h47-accent-soft) 80%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.h47-package-price del {
    -webkit-text-fill-color: rgba(230, 237, 248, 0.45);
}

.modal-content {
    background: rgba(13, 20, 36, 0.95);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid var(--h47-border);
    border-radius: var(--h47-radius);
}

.table {
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--h47-border);
}

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */

.h47-footer {
    background: rgba(8, 13, 24, 0.65);
    border-top: 1px solid var(--h47-border);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

.h47-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    margin: 0 0.3rem;
    border-radius: 50%;
    color: #fff;
    background: var(--h47-glass);
    border: 1px solid var(--h47-border);
    transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
}

.h47-social:hover {
    color: #fff;
    transform: translateY(-2px);
    background: var(--h47-social-color, var(--h47-accent));
    border-color: transparent;
}

/* ------------------------------------------------------------
   Stats du héro (en ligne / inscrits / votes)
   ------------------------------------------------------------ */

.h47-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 2.5rem;
}

.h47-stat {
    min-width: 10rem;
    padding: 1rem 1.5rem;
    border-radius: var(--h47-radius);
    background: var(--h47-glass);
    border: 1px solid var(--h47-border);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.h47-stat-value {
    display: block;
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1.1;
    background: linear-gradient(135deg, #eef4ff 0%, var(--h47-accent-soft) 70%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.h47-stat-label {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(230, 237, 248, 0.6);
}

/* ------------------------------------------------------------
   Top vote du mois
   ------------------------------------------------------------ */

.h47-vote-card {
    position: relative;
    overflow: visible;
}

.h47-vote-pos {
    position: absolute;
    top: -0.7rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.15rem 0.7rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
    color: #0a101e;
    background: var(--h47-accent-soft);
    box-shadow: 0 6px 18px rgba(2, 6, 16, 0.4);
}

.h47-vote-card.is-1 { border-color: rgba(255, 205, 86, 0.55); }
.h47-vote-card.is-1 .h47-vote-pos { background: linear-gradient(135deg, #ffe29a, #f5b942); }
.h47-vote-card.is-1:hover { box-shadow: 0 22px 55px rgba(2, 6, 16, 0.55), 0 0 0 1px rgba(255, 205, 86, 0.25); }

.h47-vote-card.is-2 { border-color: rgba(205, 215, 230, 0.5); }
.h47-vote-card.is-2 .h47-vote-pos { background: linear-gradient(135deg, #f0f4fa, #b9c4d4); }

.h47-vote-card.is-3 { border-color: rgba(222, 152, 105, 0.5); }
.h47-vote-card.is-3 .h47-vote-pos { background: linear-gradient(135deg, #ecb088, #c97e4f); }

.h47-vote-avatar {
    width: 4rem;
    height: 4rem;
    margin: 0.75rem auto 0.75rem;
    display: block;
    border-radius: 0.75rem;
    image-rendering: pixelated;
    border: 1px solid var(--h47-border);
}

.h47-vote-count {
    background: rgba(79, 140, 255, 0.16);
    color: var(--h47-accent-soft);
    border: 1px solid rgba(79, 140, 255, 0.35);
}

/* ------------------------------------------------------------
   Cartes de présentation (équipe / roleplay / monde)
   ------------------------------------------------------------ */

.h47-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 1rem;
    border-radius: 1rem;
    font-size: 1.5rem;
    color: #fff;
    background: linear-gradient(135deg, #5e97ff 0%, var(--h47-accent-deep) 100%);
    box-shadow: 0 10px 28px rgba(79, 140, 255, 0.35);
}

.h47-text-accent {
    color: var(--h47-accent);
}

.h47-feature:hover {
    transform: translateY(-4px);
    border-color: var(--h47-border-hover);
}

/* ------------------------------------------------------------
   Article à la une + bandeau d'appel à l'action
   ------------------------------------------------------------ */

.h47-featured-img {
    width: 100%;
    height: 100%;
    min-height: 14rem;
    object-fit: cover;
    border-radius: calc(var(--h47-radius) - 1px) 0 0 calc(var(--h47-radius) - 1px);
}

@media (max-width: 767.98px) {
    .h47-featured-img {
        border-radius: calc(var(--h47-radius) - 1px) calc(var(--h47-radius) - 1px) 0 0;
    }
}

.h47-author-avatar {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.4rem;
    image-rendering: pixelated;
}

.h47-cta {
    background:
        radial-gradient(28rem 14rem at 50% 120%, rgba(79, 140, 255, 0.22), transparent 70%),
        var(--h47-glass);
    border-color: rgba(79, 140, 255, 0.28);
}

.h47-cta-title {
    font-weight: 800;
    background: linear-gradient(135deg, #eef4ff 0%, var(--h47-accent-soft) 80%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ------------------------------------------------------------
   Page profil
   ------------------------------------------------------------ */

.h47-profile-avatar {
    border: 1px solid var(--h47-border);
    background: rgba(255, 255, 255, 0.04);
    padding: 0.4rem;
    image-rendering: pixelated;
}

/* ------------------------------------------------------------
   Page staff (plugin Staff modifié)
   ------------------------------------------------------------ */

.h47-staff-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 6.5rem;
    height: 6.5rem;
    object-fit: cover;
    border-radius: 0.9rem;
    image-rendering: pixelated;
    border: 1px solid var(--h47-border);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(230, 237, 248, 0.4);
}

.h47-staff-card:hover {
    transform: translateY(-4px);
    border-color: var(--h47-border-hover);
}

/* ------------------------------------------------------------
   Classement de vote (page /vote, décoré par theme.js)
   ------------------------------------------------------------ */

.h47-rank-row > * {
    vertical-align: middle;
}

.h47-rank-avatar {
    width: 1.75rem;
    height: 1.75rem;
    margin-right: 0.65rem;
    border-radius: 0.45rem;
    image-rendering: pixelated;
    border: 1px solid var(--h47-border);
}

.h47-rank-medal {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 800;
    color: #0a101e;
    background: rgba(230, 237, 248, 0.85);
    box-shadow: 0 4px 14px rgba(2, 6, 16, 0.35);
}

.h47-rank-1 { --bs-table-bg: rgba(255, 205, 86, 0.08); }
.h47-rank-1 .h47-rank-medal { background: linear-gradient(135deg, #ffe29a, #f5b942); }

.h47-rank-2 { --bs-table-bg: rgba(205, 215, 230, 0.07); }
.h47-rank-2 .h47-rank-medal { background: linear-gradient(135deg, #f0f4fa, #b9c4d4); }

.h47-rank-3 { --bs-table-bg: rgba(222, 152, 105, 0.08); }
.h47-rank-3 .h47-rank-medal { background: linear-gradient(135deg, #ecb088, #c97e4f); }

/* ------------------------------------------------------------
   Pages de contenu (lore, règlement, factions…)
   ------------------------------------------------------------ */

.h47-page-title {
    font-weight: 900;
    text-align: center;
    letter-spacing: 0.02em;
    background: linear-gradient(135deg, #eef4ff 0%, var(--h47-accent-soft) 55%, var(--h47-accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 0.5rem;
}

.h47-doc-lead {
    text-align: center;
    color: rgba(230, 237, 248, 0.7);
    margin-bottom: 2.5rem;
}

.h47-doc-h {
    font-weight: 800;
    margin: 2.75rem 0 1rem;
    padding-left: 0.85rem;
    border-left: 4px solid var(--h47-accent);
}

/* ------------------------------------------------------------
   Modal Discord
   ------------------------------------------------------------ */

.h47-discord-widget {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 0.85rem;
}

/* ------------------------------------------------------------
   Avatars Minecraft dans les pages (ex. page staff) :
   le markup leur impose height:180px + object-fit-cover, ce qui
   étire les têtes en bandeau → on les ramène en carré centré
   ------------------------------------------------------------ */

.card .card-img-top[src*="mc-heads.net"],
.card .card-img-top[src*="crafatar.com"],
.card .card-img-top[src*="minotar.net"] {
    width: 6.5rem !important;
    height: 6.5rem !important;
    object-fit: contain;
    margin: 1.5rem auto 0;
    border-radius: 0.9rem;
    image-rendering: pixelated;
    border: 1px solid var(--h47-border);
    background: rgba(255, 255, 255, 0.04);
}

.card:has(> .card-img-top[src*="mc-heads.net"]),
.card:has(> .card-img-top[src*="crafatar.com"]),
.card:has(> .card-img-top[src*="minotar.net"]) {
    text-align: center;
}

.card:has(> .card-img-top[src*="mc-heads.net"]) .card-body .d-flex,
.card:has(> .card-img-top[src*="crafatar.com"]) .card-body .d-flex,
.card:has(> .card-img-top[src*="minotar.net"]) .card-body .d-flex {
    justify-content: center !important;
}

.card:has(> .card-img-top[src*="mc-heads.net"]) .card-body,
.card:has(> .card-img-top[src*="crafatar.com"]) .card-body,
.card:has(> .card-img-top[src*="minotar.net"]) .card-body {
    text-align: center !important;
}

/* ------------------------------------------------------------
   Apparition au scroll (progressive enhancement, JS requis)
   ------------------------------------------------------------ */

.h47-reveal {
    opacity: 1;
    transform: none;
}

body.h47-js .h47-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

body.h47-js .h47-reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    body.h47-js .h47-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .h47-scroll-cue,
    .h47-status.is-online .h47-status-dot {
        animation: none;
    }
}