/* ==========================================================================
   WheatMC — thème Azuriom
   Palette et matières dérivées du logo : or moissonné, terre labourée,
   contour noir épais et biseau de bloc.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Lilita+One&family=Nunito:wght@400;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap');

:root {
    /* Or : repris des lettres du logo */
    --wm-gold: #ffc123;
    --wm-gold-hi: #ffe08a;
    --wm-cream: #fff4d2;
    --wm-amber: #f0900f;
    --wm-amber-dp: #b96407;

    /* Terre : le brun du bandeau de bois sous le logo */
    --wm-soil: #33220f;
    --wm-soil-hi: #48301a;
    --wm-soil-dp: #1e1308;
    --wm-ink: #0d0803;

    /* Culture : le vert des feuilles */
    --wm-crop: #62bb35;
    --wm-crop-dp: #3f8a1f;

    /* Encre lisible sur l'accent, recalculée dans le layout selon la couleur choisie */
    --wm-accent-ink: #0d0803;

    --wm-outline: 3px;
    --wm-lip: 6px;

    --wm-font-display: 'Lilita One', 'Trebuchet MS', sans-serif;
    --wm-font-body: 'Nunito', system-ui, -apple-system, sans-serif;
    --wm-font-data: 'JetBrains Mono', ui-monospace, monospace;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: var(--wm-font-body);
    font-weight: 600;
    color: #f3e6cf;
    background-color: var(--wm-soil-dp);
    /* Terre labourée : deux dégradés croisés très discrets */
    background-image:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .014) 0 2px, transparent 2px 40px),
        repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 2px, transparent 2px 40px),
        radial-gradient(1200px 600px at 50% -200px, rgba(240, 144, 15, .16), transparent 70%);
    background-attachment: fixed;
}

#app {
    flex: 1 0 auto;
}

h1, h2, h3, h4, h5, .wm-display {
    font-family: var(--wm-font-display);
    font-weight: 400;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--wm-cream);
}

h1, h2 {
    /* Le relief du logo, en typographie */
    text-shadow:
        0 2px 0 var(--wm-ink),
        0 4px 0 rgba(0, 0, 0, .45);
}

a {
    color: var(--wm-gold);
    text-decoration: none;
    transition: color .15s ease;
}

a:hover {
    color: var(--wm-gold-hi);
}

::selection {
    background: var(--wm-gold);
    color: var(--wm-accent-ink);
}

:focus-visible {
    outline: 3px solid var(--wm-gold-hi);
    outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Le bloc : élément signature du thème
   Contour noir franc, biseau clair en haut, lèvre pleine en bas.
   -------------------------------------------------------------------------- */

.wm-block,
.card {
    position: relative;
    background: linear-gradient(180deg, var(--wm-soil-hi) 0%, var(--wm-soil) 100%);
    border: var(--wm-outline) solid var(--wm-ink);
    border-radius: 10px;
    color: #f3e6cf;
    box-shadow:
        inset 0 3px 0 rgba(255, 240, 200, .10),
        inset 0 -3px 0 rgba(0, 0, 0, .35),
        0 var(--wm-lip) 0 var(--wm-ink),
        0 12px 24px rgba(0, 0, 0, .40);
}

.card {
    margin-bottom: var(--wm-lip);
}

/* Les alertes gardent leurs couleurs contextuelles, mais prennent le contour */
.alert {
    border: var(--wm-outline) solid var(--wm-ink);
    border-radius: 10px;
    font-weight: 700;
    box-shadow: 0 var(--wm-lip) 0 var(--wm-ink);
    margin-bottom: calc(1rem + var(--wm-lip));
}

.card-header,
.card-footer {
    background: rgba(0, 0, 0, .22);
    border-color: rgba(0, 0, 0, .45);
}

.card-title {
    color: var(--wm-cream);
}

/* Les blocs cliquables s'enfoncent, comme un bloc qu'on pousse */
.wm-block--press {
    transition: transform .1s ease, box-shadow .1s ease;
}

.wm-block--press:hover {
    transform: translateY(-3px);
    box-shadow:
        inset 0 3px 0 rgba(255, 240, 200, .14),
        inset 0 -3px 0 rgba(0, 0, 0, .35),
        0 9px 0 var(--wm-ink),
        0 18px 28px rgba(0, 0, 0, .45);
}

.wm-block--press:active {
    transform: translateY(var(--wm-lip));
    box-shadow:
        inset 0 3px 0 rgba(255, 240, 200, .10),
        inset 0 -3px 0 rgba(0, 0, 0, .35),
        0 0 0 var(--wm-ink);
}

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

/* La couleur de fond reste pilotée par les variables Bootstrap : le sélecteur
   de couleur du panel admin continue donc de fonctionner. On n'ajoute que le
   biseau (dégradé translucide), le contour et la lèvre du bas. */
.btn {
    --bs-btn-border-color: var(--wm-ink);
    --bs-btn-hover-border-color: var(--wm-ink);
    --bs-btn-active-border-color: var(--wm-ink);
    --bs-btn-border-width: var(--wm-outline);
    --bs-btn-border-radius: 9px;

    font-family: var(--wm-font-display);
    font-weight: 400;
    letter-spacing: .05em;
    text-transform: uppercase;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, 0) 48%, rgba(0, 0, 0, .16) 100%);
    box-shadow: 0 4px 0 var(--wm-ink);
    transition: transform .08s ease, box-shadow .08s ease, filter .15s ease;
}

.btn:hover {
    filter: brightness(1.09);
}

.btn:not(:disabled):active {
    transform: translateY(4px);
    box-shadow: 0 0 0 var(--wm-ink);
}

.btn.btn-secondary {
    --bs-btn-bg: var(--wm-soil-hi);
    --bs-btn-hover-bg: #573a1e;
    --bs-btn-active-bg: var(--wm-soil);
    --bs-btn-color: var(--wm-cream);
    --bs-btn-hover-color: var(--wm-cream);
    --bs-btn-active-color: var(--wm-cream);
}

.btn.btn-success {
    --bs-btn-bg: var(--wm-crop);
    --bs-btn-hover-bg: var(--wm-crop);
    --bs-btn-active-bg: var(--wm-crop-dp);
    --bs-btn-color: #08210a;
    --bs-btn-hover-color: #08210a;
    --bs-btn-active-color: #08210a;
}

.btn-lg {
    --bs-btn-padding-y: .8rem;
    --bs-btn-padding-x: 2rem;
    --bs-btn-font-size: 1.15rem;
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

.wm-navbar {
    background: linear-gradient(180deg, #3b2712 0%, #26190b 100%);
    border-bottom: var(--wm-outline) solid var(--wm-ink);
    box-shadow: 0 4px 0 rgba(0, 0, 0, .35);
}

.wm-navbar--scrolled {
    box-shadow: 0 4px 0 rgba(0, 0, 0, .35), 0 10px 26px rgba(0, 0, 0, .5);
}

.wm-navbar .navbar-brand img {
    height: 58px;
    width: auto;
    filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .5));
    transition: height .18s ease, transform .18s ease;
}

.wm-navbar--scrolled .navbar-brand img {
    height: 42px;
}

.wm-navbar .navbar-brand:hover img {
    transform: rotate(-1.5deg) scale(1.03);
}

.wm-navbar .nav-link {
    font-family: var(--wm-font-display);
    font-size: 1.02rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #e6d5b6;
    padding: .35rem .2rem;
    margin: 0 .75rem;
    border-bottom: 3px solid transparent;
}

.wm-navbar .nav-link:hover,
.wm-navbar .nav-link.active {
    color: var(--wm-gold);
    border-bottom-color: var(--wm-gold);
}

.wm-navbar .dropdown-menu {
    background: var(--wm-soil);
    border: var(--wm-outline) solid var(--wm-ink);
    border-radius: 8px;
    box-shadow: 0 5px 0 var(--wm-ink);
}

.wm-navbar .dropdown-item {
    color: #e6d5b6;
    font-weight: 700;
}

.wm-navbar .dropdown-item:hover {
    background: var(--wm-soil-hi);
    color: var(--wm-gold);
}

.navbar-toggler {
    border: var(--wm-outline) solid var(--wm-ink);
    background: var(--wm-gold);
}

/* Bandeau d'état du serveur */
.wm-statusbar {
    background: linear-gradient(180deg, var(--wm-gold) 0%, var(--wm-amber) 100%);
    border-bottom: var(--wm-outline) solid var(--wm-ink);
    color: var(--wm-accent-ink);
    font-weight: 800;
}

.wm-statusbar a {
    color: var(--wm-accent-ink);
}

.wm-dot {
    display: inline-block;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: var(--wm-crop-dp);
    box-shadow: 0 0 0 3px rgba(63, 138, 31, .35);
}

.wm-dot--off {
    background: #8c2f1c;
    box-shadow: 0 0 0 3px rgba(140, 47, 28, .3);
}

/* --------------------------------------------------------------------------
   Adresse IP copiable
   -------------------------------------------------------------------------- */

.wm-ip {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--wm-font-data);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: .02em;
    color: var(--wm-cream);
    background: linear-gradient(180deg, #1a1108, #120b04);
    border: var(--wm-outline) solid var(--wm-ink);
    border-radius: 9px;
    padding: .6rem 1.1rem;
    cursor: pointer;
    box-shadow: inset 0 3px 0 rgba(255, 255, 255, .06), 0 4px 0 var(--wm-ink);
    transition: transform .08s ease, box-shadow .08s ease;
}

.wm-ip:hover {
    color: var(--wm-gold);
}

.wm-ip:active {
    transform: translateY(4px);
    box-shadow: inset 0 3px 0 rgba(255, 255, 255, .06), 0 0 0 var(--wm-ink);
}

.wm-ip .bi {
    color: var(--wm-gold);
}

/* --------------------------------------------------------------------------
   Bannière d'accueil
   -------------------------------------------------------------------------- */

.wm-hero {
    position: relative;
    overflow: hidden;
    padding: 4.5rem 0 13rem;
    background:
        radial-gradient(900px 420px at 50% 12%, rgba(255, 193, 35, .22), transparent 68%),
        linear-gradient(180deg, #4a3118 0%, #2c1d0e 62%, var(--wm-soil-dp) 100%);
    border-bottom: var(--wm-outline) solid var(--wm-ink);
}

.wm-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: .30;
    filter: saturate(.75);
}

.wm-hero__inner {
    position: relative;
    z-index: 3;
}

.wm-hero__logo {
    max-width: min(620px, 84vw);
    width: 100%;
    filter: drop-shadow(0 10px 0 rgba(0, 0, 0, .35)) drop-shadow(0 20px 30px rgba(0, 0, 0, .5));
}

.wm-hero__title {
    font-size: clamp(2rem, 5.2vw, 3.4rem);
    line-height: 1.05;
    margin-top: 1.6rem;
}

.wm-hero__subtitle {
    max-width: 46ch;
    margin: 1rem auto 0;
    color: #dcc9a5;
    font-weight: 600;
    font-size: 1.06rem;
    text-transform: none;
}

/* Le champ de blé : deux nappes qui ondulent à des rythmes différents */
.wm-field {
    position: absolute;
    left: -6%;
    right: -6%;
    bottom: -2px;
    z-index: 2;
    pointer-events: none;
    background-repeat: repeat-x;
    transform-origin: bottom center;
}

.wm-field--back {
    height: 190px;
    background-image: url('../img/wheat-back.svg');
    background-size: 260px 190px;
    opacity: .55;
    animation: wm-gust 9s ease-in-out infinite;
}

.wm-field--front {
    height: 150px;
    background-image: url('../img/wheat-front.svg');
    background-size: 330px 150px;
    opacity: .9;
    animation: wm-gust 6.2s ease-in-out infinite reverse;
}

@keyframes wm-gust {
    0%, 100% { transform: skewX(0deg) translateX(0); }
    35% { transform: skewX(-1.6deg) translateX(6px); }
    70% { transform: skewX(1.1deg) translateX(-4px); }
}

/* Ligne de terre sous le champ */
.wm-hero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 26px;
    z-index: 3;
    background: linear-gradient(180deg, #3b2712, var(--wm-soil-dp));
    border-top: var(--wm-outline) solid var(--wm-ink);
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.wm-section {
    padding: 3.5rem 0;
}

.wm-section__title {
    font-size: clamp(1.6rem, 3.4vw, 2.3rem);
    margin-bottom: .35rem;
}

/* Un épi stylisé en guise de filet, plutôt qu'un trait neutre */
.wm-rule {
    display: block;
    width: 120px;
    height: 8px;
    margin: 0 auto 2rem;
    border-radius: 4px;
    background:
        repeating-linear-gradient(90deg, var(--wm-gold) 0 12px, transparent 12px 20px),
        var(--wm-soil-hi);
    border: 2px solid var(--wm-ink);
}

.wm-eyebrow {
    display: inline-block;
    font-family: var(--wm-font-data);
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--wm-gold);
}

/* Blocs de gameplay */
.wm-feature {
    height: 100%;
    padding: 1.6rem 1.4rem;
    text-align: center;
}

.wm-feature__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: .9rem;
    font-size: 1.8rem;
    color: var(--wm-accent-ink);
    background: linear-gradient(180deg, var(--wm-gold-hi), var(--wm-amber));
    border: var(--wm-outline) solid var(--wm-ink);
    border-radius: 12px;
    box-shadow: inset 0 3px 0 rgba(255, 255, 255, .4), 0 4px 0 var(--wm-ink);
}

.wm-feature h3 {
    font-size: 1.25rem;
    margin-bottom: .5rem;
}

.wm-feature p {
    color: #cbb896;
    font-size: .96rem;
    margin: 0;
}

/* Serveurs */
.wm-server {
    padding: 1.4rem;
    text-align: center;
}

.wm-server .progress {
    height: 16px;
    background: #150d05;
    border: 2px solid var(--wm-ink);
    border-radius: 8px;
    overflow: hidden;
}

.wm-server .progress-bar {
    background: linear-gradient(180deg, var(--wm-gold-hi), var(--wm-amber));
}

.wm-slots {
    font-family: var(--wm-font-data);
    font-size: .9rem;
    color: #cbb896;
}

/* Actualités */
.wm-post {
    display: block;
    height: 100%;
    overflow: hidden;
    color: inherit;
}

.wm-post__media {
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    background-color: var(--wm-soil-dp);
    border-bottom: var(--wm-outline) solid var(--wm-ink);
}

.wm-post__body {
    padding: 1.15rem 1.25rem 1.4rem;
}

.wm-post__meta {
    font-family: var(--wm-font-data);
    font-size: .76rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--wm-gold);
}

.wm-post h3 {
    font-size: 1.2rem;
    margin: .35rem 0 .5rem;
    color: var(--wm-cream);
}

.wm-post p {
    color: #c5b191;
    font-size: .94rem;
    margin: 0;
}

/* Bandeau d'appel (boutique, vote) */
.wm-band {
    padding: 1.5rem 1.75rem;
    background: linear-gradient(180deg, var(--wm-gold) 0%, var(--wm-amber) 100%);
    color: var(--wm-accent-ink);
}

.wm-band h3 {
    color: var(--wm-accent-ink);
    text-shadow: none;
    margin: 0;
}

.wm-band p {
    margin: .2rem 0 0;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   Contenu interne (pages, articles, plugins)
   -------------------------------------------------------------------------- */

.content {
    padding-top: 2.5rem;
    padding-bottom: 3.5rem;
}

.page-header {
    margin-bottom: 1.75rem;
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: #ecdcc0;
    border-color: rgba(0, 0, 0, .4);
}

.form-control,
.form-select {
    background: #170f07;
    border: 2px solid var(--wm-ink);
    border-radius: 8px;
    color: var(--wm-cream);
    font-weight: 600;
}

.form-control:focus,
.form-select:focus {
    background: #170f07;
    color: var(--wm-cream);
    border-color: var(--wm-gold);
    box-shadow: 0 0 0 .2rem rgba(255, 193, 35, .28);
}

.badge {
    border: 2px solid var(--wm-ink);
    border-radius: 6px;
    font-family: var(--wm-font-display);
    letter-spacing: .04em;
}

.pagination .page-link {
    background: var(--wm-soil);
    border: 2px solid var(--wm-ink);
    color: var(--wm-cream);
    font-weight: 800;
}

.pagination .page-item.active .page-link {
    background: var(--wm-gold);
    color: var(--wm-accent-ink);
}

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */

.wm-footer {
    position: relative;
    margin-top: auto;
    padding: 3.5rem 0 1.75rem;
    background: linear-gradient(180deg, #26190b 0%, #150d05 100%);
    border-top: var(--wm-outline) solid var(--wm-ink);
    color: #c5b191;
}

.wm-footer h4 {
    font-size: 1.1rem;
    color: var(--wm-gold);
    margin-bottom: .9rem;
}

.wm-footer a {
    color: #d8c5a2;
    font-weight: 700;
}

.wm-footer a:hover {
    color: var(--wm-gold);
}

.wm-footer__logo {
    max-width: 190px;
    margin-bottom: 1rem;
}

.wm-social {
    font-size: 1.5rem;
}

.wm-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin: 0 .3rem .5rem 0;
    color: var(--wm-cream);
    background: var(--wm-soil-hi);
    border: var(--wm-outline) solid var(--wm-ink);
    border-radius: 10px;
    box-shadow: 0 4px 0 var(--wm-ink);
    transition: transform .08s ease, box-shadow .08s ease, color .15s ease;
}

.wm-social a:hover {
    color: var(--wm-gold);
}

.wm-social a:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 var(--wm-ink);
}

.wm-footer__legal {
    border-top: 2px solid rgba(255, 255, 255, .07);
    margin-top: 2.25rem;
    padding-top: 1.25rem;
    font-size: .86rem;
}

/* --------------------------------------------------------------------------
   Adaptations
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
    :root {
        --wm-lip: 5px;
    }

    .wm-hero {
        padding: 2.5rem 0 8.5rem;
    }

    .wm-field--back { height: 130px; background-size: 190px 130px; }
    .wm-field--front { height: 104px; background-size: 230px 104px; }

    .wm-navbar .navbar-brand img { height: 44px; }
    .wm-navbar .nav-link { margin: 0; padding: .5rem 0; }

    .wm-ip { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }

    .wm-field {
        transform: none !important;
    }
}