/* ===== Thème Vcraft — style de base (toutes les pages) ===== */
/* ===== Thème Vcraft — mobile d'abord ===== */
/* Polices hébergées sur le site (avant : Google Fonts) – 1.9.0. Licence OFL : assets/fonts/LICENSE-*.txt */
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/figtree-400.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/figtree-500.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/figtree-600.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/figtree-700.woff2') format('woff2'); }
@font-face { font-family: 'Pixelify Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/pixelify-500.woff2') format('woff2'); }
@font-face { font-family: 'Pixelify Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/pixelify-700.woff2') format('woff2'); }

/* Icônes : petit fichier (13 Ko) avec les icônes du site. Une icône absente de ce fichier vient du fichier complet de Bootstrap Icons, téléchargé seulement dans ce cas. */
@font-face { font-family: 'vc-icons'; font-style: normal; font-weight: 400; font-display: block; src: url('../fonts/vc-icons.woff2') format('woff2'); unicode-range: U+F10C, U+F117, U+F128, U+F12B, U+F12F-F130, U+F138-F139, U+F148, U+F179, U+F17D, U+F189-F18A, U+F192-F194, U+F1BE, U+F1C3, U+F1C5, U+F1C7-F1C8, U+F1CA, U+F1DB-F1DC, U+F1E2, U+F1F6, U+F23F, U+F241-F242, U+F244, U+F24A, U+F26A-F26B, U+F26E, U+F272, U+F282, U+F284-F286, U+F28B, U+F290, U+F292-F293, U+F2D4, U+F2EA, U+F300, U+F311, U+F32F, U+F333, U+F33A-F33B, U+F340-F341, U+F344, U+F3E5-F3E6, U+F3ED-F3EF, U+F3FF, U+F407, U+F40D, U+F414-F415, U+F417, U+F423, U+F425, U+F430-F431, U+F437, U+F43E, U+F445, U+F44E, U+F468, U+F46C-F46D, U+F470, U+F479, U+F47B, U+F484, U+F491, U+F495, U+F49B, U+F4CB, U+F4CF-F4D0, U+F4D3, U+F4D6-F4D7, U+F4E1, U+F4E7, U+F4F7, U+F4FA, U+F4FE-F4FF, U+F505, U+F525, U+F52A, U+F52E-F530, U+F537-F538, U+F53F, U+F543, U+F566, U+F580, U+F586, U+F588-F589, U+F5C3, U+F5D4, U+F5DE, U+F5E2, U+F5E6-F5E7, U+F5EA, U+F5EE-F5EF, U+F600, U+F61B, U+F623, U+F62A-F62B, U+F632-F634, U+F636, U+F63B, U+F64D, U+F650, U+F659, U+F673, U+F675, U+F6A6, U+F6CC, U+F6EE, U+F759, U+F769, U+F770, U+F776-F777, U+F77B, U+F7DB, U+F7F6, U+F845, U+F8A8, U+F8C4, U+F8DB, U+F8E0; }
html .bi::before, html [class^="bi-"]::before, html [class*=" bi-"]::before { font-family: 'vc-icons', 'bootstrap-icons' !important; }

:root {
    --vc-bg: #0f1512;
    --vc-surface: #17201b;
    --vc-surface-2: #1d2721;
    --vc-line: #243029;
    --vc-line-2: #3a4a40;
    --vc-text: #eef2ea;
    --vc-muted: #b7c2b9;
    --vc-faint: #8f9c92;
    --vc-gold: #f2b233;
    --vc-dirt: #6d4428;
    --vc-dirt-2: #7a4d2e;
    --vc-grass-dark: #3f8f2a;
    --vc-pixel: 'Pixelify Sans', system-ui, sans-serif;
}

[data-bs-theme=dark] {
    --bs-body-bg: var(--vc-bg);
    --bs-body-bg-rgb: 15, 21, 18;
    --bs-body-color: var(--vc-text);
    --bs-secondary-bg: var(--vc-surface);
    --bs-tertiary-bg: var(--vc-surface-2);
    --bs-border-color: var(--vc-line);
    --bs-secondary-color: var(--vc-muted);
    --bs-emphasis-color: #ffffff;
    --bs-link-color: var(--vc-gold);
    --bs-link-color-rgb: 242, 178, 51;
    --bs-link-hover-color: #ffd27a;
    --bs-link-hover-color-rgb: 255, 210, 122;
    --bs-card-bg: var(--vc-surface);
}

html { scroll-behavior: smooth; }
html, body { min-height: 100%; }

body.vc-body {
    margin: 0;
    background: var(--vc-bg);
    color: var(--vc-text);
    font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.55;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

#app { flex: 1 0 auto; }
a { text-decoration: none; }
img { max-width: 100%; height: auto; }

h1, h2, h3, h4, h5 { color: var(--vc-text); }

.container { padding-left: 16px; padding-right: 16px; }

.vc-skip {
    position: absolute; left: -9999px; top: 8px; z-index: 2000;
    background: var(--vc-grass); color: var(--vc-bg); padding: 8px 14px; border-radius: 6px; font-weight: 700;
}
.vc-skip:focus { left: 8px; }

:focus-visible { outline: 2px solid var(--vc-gold); outline-offset: 2px; }

/* ----- Boutons ----- */
.vc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 18px;
    border-radius: 8px; font-weight: 700; font-size: 15px;
    border: 1px solid transparent; white-space: nowrap;
    transition: filter .15s, background-color .15s, border-color .15s;
}
.vc-btn:hover { filter: brightness(1.08); }
.vc-btn-lg { min-height: 56px; padding: 0 24px; font-size: 17px; }
.vc-btn-primary, .vc-btn-primary:hover, .vc-btn-primary:focus { background: var(--vc-grass); color: var(--vc-bg); }
.vc-btn-gold, .vc-btn-gold:hover, .vc-btn-gold:focus { background: var(--vc-gold); color: #1c1406; }
.vc-btn-ghost, .vc-btn-ghost:hover, .vc-btn-ghost:focus { border-color: var(--vc-line-2); color: var(--vc-text); background: transparent; }
.vc-btn-ghost:hover { background: var(--vc-surface); }
.vc-btn-white, .vc-btn-white:hover, .vc-btn-white:focus { background: #fff; color: #2b3170; }

/* Boutons Bootstrap des autres pages (vote, boutique, profil…) */
.btn-primary {
    --bs-btn-bg: var(--vc-grass); --bs-btn-border-color: var(--vc-grass);
    --bs-btn-color: var(--vc-bg); --bs-btn-hover-color: var(--vc-bg); --bs-btn-active-color: var(--vc-bg);
    --bs-btn-hover-bg: var(--vc-grass); --bs-btn-hover-border-color: var(--vc-grass);
    font-weight: 700;
}
.btn-primary:hover { filter: brightness(1.08); }

/* ----- En-tête ----- */
.vc-header {
    position: sticky; top: 0; z-index: 1030;
    background: rgba(15, 21, 18, .92);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--vc-line);
}
.vc-navbar { padding: 12px 0; }
.vc-brand { display: flex; align-items: center; gap: 10px; margin-right: 0; }
.vc-logo-img {
    width: 36px; height: 36px; flex: none; object-fit: contain;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .45));
}
.vc-brand-name {
    font-family: var(--vc-pixel); font-weight: 700; font-size: 26px; letter-spacing: 1px;
    color: var(--vc-text); text-transform: uppercase;
}
.vc-toggler {
    border: 1px solid var(--vc-line-2); color: var(--vc-text);
    width: 44px; height: 44px; padding: 0; border-radius: 8px; font-size: 26px; line-height: 1;
}
.vc-toggler:focus { box-shadow: none; }

.vc-navbar .nav-link {
    color: var(--vc-muted); font-weight: 600; padding: 12px 4px;
}
.vc-navbar .nav-link:hover, .vc-navbar .nav-link.active, .vc-navbar .nav-link.show { color: var(--vc-text); }
.vc-navbar .dropdown-menu {
    background: var(--vc-surface); border: 1px solid var(--vc-line); border-radius: 10px;
}
.vc-navbar .dropdown-item { color: var(--vc-muted); padding: 10px 16px; }
.vc-navbar .dropdown-item:hover, .vc-navbar .dropdown-item.active { background: var(--vc-surface-2); color: var(--vc-text); }
.vc-user { display: flex; align-items: center; gap: 8px; }

/* Menu ouvert sur téléphone */
.vc-navbar .navbar-collapse { margin-top: 10px; }
.vc-navbar .navbar-collapse .navbar-nav:first-child { border-top: 1px solid var(--vc-line); padding-top: 6px; }
.vc-nav-right { gap: 10px; padding: 12px 0 6px; flex-direction: column; align-items: stretch; }
.vc-nav-right .vc-btn { width: 100%; }

@media (min-width: 992px) {
    .vc-navbar { padding: 18px 0; }
    .vc-navbar .navbar-collapse { margin-top: 0; }
    .vc-navbar .navbar-collapse .navbar-nav:first-child { border-top: 0; padding-top: 0; gap: 22px; }
    .vc-navbar .nav-link { padding: 8px 0; }
    .vc-nav-right { flex-direction: row; align-items: center; padding: 0; }
    .vc-nav-right .vc-btn { width: auto; }
}

/* ----- Accueil : haut de page ----- */
.vc-hero { padding: 40px 0 44px; }
.vc-hero-grid { display: grid; gap: 32px; }
.vc-hero-text { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

.vc-pill {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 6px 12px; border: 1px solid var(--vc-line-2); border-radius: 999px;
    font-size: 14px; font-weight: 600; color: var(--vc-muted);
}
.vc-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--vc-grass); box-shadow: 0 0 0 3px rgba(95,191,63,.2); }
.vc-dot-off { background: #d9534f; box-shadow: 0 0 0 3px rgba(217,83,79,.2); }
.vc-pill-sep { color: var(--vc-faint); }

.vc-title {
    margin: 0; font-family: var(--vc-pixel); font-weight: 700;
    font-size: clamp(40px, 11vw, 76px); line-height: 1.02; overflow-wrap: anywhere;
}
.vc-lead { margin: 0; font-size: 18px; color: var(--vc-muted); max-width: 560px; }

.vc-ip { display: flex; flex-direction: column; gap: 10px; }
.vc-ip-box {
    min-height: 56px; display: flex; align-items: center; gap: 12px; padding: 0 18px;
    background: var(--vc-surface); border: 1px solid #2c3a31; border-radius: 8px; min-width: 0;
}
.vc-ip-label { font-size: 13px; font-weight: 600; color: var(--vc-faint); text-transform: uppercase; letter-spacing: 1px; }
.vc-ip-value { font-family: var(--vc-pixel); font-size: 22px; color: var(--vc-text); overflow-wrap: anywhere; }
.vc-hint { margin: 0; font-size: 15px; color: var(--vc-faint); }

.vc-hero-media { min-width: 0; }
.vc-hero-media img {
    display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
    border-radius: 12px; border: 1px solid var(--vc-line);
}

/* Paysage en pixels quand aucune image n'est mise */
.vc-scene {
    position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden;
    border-radius: 12px; border: 1px solid var(--vc-line);
    background: linear-gradient(#2d6f9e 0%, #6fb3dc 70%, #a7d6ef 100%);
}
.vc-sun { position: absolute; top: 14%; right: 14%; width: 12%; aspect-ratio: 1; background: #ffe68a; box-shadow: 0 0 0 8px rgba(255,230,138,.25); }
.vc-cloud { position: absolute; height: 7%; background: #fff; opacity: .92; }
.vc-cloud::after { content: ''; position: absolute; left: 20%; top: -100%; width: 45%; height: 100%; background: inherit; }
.vc-cloud-1 { top: 22%; left: 10%; width: 26%; }
.vc-cloud-2 { top: 38%; left: 48%; width: 18%; }
.vc-hills {
    position: absolute; left: 0; right: 0; bottom: 0; height: 38%;
    background:
        linear-gradient(var(--vc-grass) 0 18%, transparent 18%),
        repeating-linear-gradient(90deg, var(--vc-dirt) 0 8%, var(--vc-dirt-2) 8% 12%);
    clip-path: polygon(0 30%, 12% 30%, 12% 12%, 30% 12%, 30% 0, 44% 0, 44% 22%, 62% 22%, 62% 6%, 80% 6%, 80% 26%, 100% 26%, 100% 100%, 0 100%);
}

/* Bande herbe / terre */
.vc-grass {
    height: 40px;
    background:
        linear-gradient(var(--vc-grass) 0 12px, transparent 12px),
        repeating-linear-gradient(90deg, var(--vc-dirt) 0 40px, var(--vc-dirt-2) 40px 56px);
    position: relative;
}
.vc-grass::before {
    content: ''; position: absolute; left: 0; right: 0; top: 12px; height: 6px;
    background: repeating-linear-gradient(90deg, var(--vc-grass) 0 16px, transparent 16px 40px);
}

/* Chiffres */
.vc-stats { background: var(--vc-dirt); padding: 28px 0; }
.vc-stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
.vc-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vc-stat-value { font-family: var(--vc-pixel); font-size: 34px; line-height: 1.1; color: #fff4e6; }
.vc-stat-label { font-size: 14px; font-weight: 600; color: #f3dcc2; }

/* Bande par groupes de 4 (plus de 4 lignes) */
.vc-stats-pages { display: grid; }
.vc-stats-page {
    grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .6s ease, transform .6s ease, visibility 0s linear .6s;
}
.vc-stats-page.is-active {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .6s ease .15s, transform .6s ease .15s, visibility 0s;
}
.vc-stats-page .vc-stat-value { font-size: clamp(24px, 3.2vw, 38px); overflow-wrap: anywhere; }
@media (min-width: 768px) {
    .vc-stats-grid.vc-stats-page { grid-template-columns: repeat(var(--vc-cols, 4), minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
    .vc-stats-page, .vc-stats-page.is-active { transition: none; transform: none; }
}

/* Diaporama du haut */
.vc-slides {
    position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden;
    border-radius: 12px; border: 1px solid var(--vc-line); background: var(--vc-surface);
}
.vc-hero-media .vc-slides img.vc-slide {
    position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto;
    object-fit: cover; border: 0; border-radius: 0;
    opacity: 0; transition: opacity .9s ease;
}
.vc-hero-media .vc-slides img.vc-slide.is-active { opacity: 1; }
.vc-slides-dots {
    position: absolute; left: 0; right: 0; bottom: 12px;
    display: flex; justify-content: center; gap: 8px;
}
.vc-slides-dot {
    width: 12px; height: 12px; padding: 0; border: 2px solid #fff; border-radius: 0;
    background: rgba(0, 0, 0, .35); cursor: pointer;
}
.vc-slides-dot.is-active { background: #fff; }
@media (prefers-reduced-motion: reduce) {
    .vc-hero-media .vc-slides img.vc-slide { transition: none; }
}

/* Sections */
.vc-home { padding-top: 8px; padding-bottom: 64px; }
.vc-section { margin-top: 56px; }
.vc-eyebrow {
    display: block; font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    color: var(--vc-gold); margin-bottom: 8px;
}
.vc-h2 { margin: 0 0 28px; font-family: var(--vc-pixel); font-weight: 700; font-size: clamp(30px, 7.5vw, 52px); line-height: 1.08; }
.vc-h3 { margin: 0 0 10px; font-family: var(--vc-pixel); font-weight: 700; font-size: clamp(28px, 6.5vw, 38px); line-height: 1.1; }

.vc-card {
    background: var(--vc-surface); border: 1px solid var(--vc-line); border-radius: 12px; padding: 24px;
}
.vc-message { margin-top: 32px; }

.vc-features { display: grid; grid-template-columns: 1fr; gap: 16px; }
.vc-feature i { font-size: 28px; color: var(--vc-gold); }
.vc-feature h3 { margin: 12px 0 8px; font-size: 20px; font-weight: 700; }
.vc-feature p { margin: 0; color: var(--vc-muted); }

.vc-join { padding: 28px 22px; }
.vc-join .vc-h2 { margin-bottom: 20px; }
.vc-join-grid { display: grid; gap: 24px; }
.vc-join h3 { font-size: 20px; font-weight: 700; margin: 0 0 12px; display: flex; gap: 10px; align-items: center; }
.vc-join ol { margin: 0; padding-left: 22px; color: var(--vc-muted); font-size: 17px; }
.vc-join li + li { margin-top: 8px; }
.vc-join strong { color: var(--vc-text); overflow-wrap: anywhere; }

.vc-duo { display: grid; gap: 16px; }
.vc-duo .vc-card { display: flex; flex-direction: column; gap: 6px; padding: 28px 24px; }
.vc-duo p { color: var(--vc-muted); margin: 0 0 18px; }
.vc-duo .vc-btn { align-self: flex-start; }
.vc-vote { background: #2a2210; border-color: #4d3d16; }
.vc-vote .vc-h3 { color: #fff4e6; }
.vc-vote p { color: #e7d6b4; }

.vc-posts { display: grid; gap: 16px; }
.vc-post { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.vc-post img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.vc-post-body { padding: 20px 22px 22px; }
.vc-post-date { margin: 0 0 6px; font-size: 13px; color: var(--vc-faint); }
.vc-post h3 { font-size: 20px; font-weight: 700; margin: 0 0 8px; }
.vc-post h3 a { color: var(--vc-text); }
.vc-post p { color: var(--vc-muted); }
.vc-link { font-weight: 700; }

.vc-discord {
    background: #2b3170; border-radius: 16px; padding: 28px 22px;
    display: flex; flex-direction: column; gap: 18px;
}
.vc-discord .vc-h3 { color: #fff; }
.vc-discord p { margin: 0; color: #d9dcff; font-size: 17px; }
.vc-discord .vc-btn { min-height: 52px; font-size: 16px; white-space: normal; text-align: center; }

/* Pied de page */
.vc-footer { border-top: 1px solid var(--vc-line); padding: 28px 0; color: var(--vc-faint); font-size: 14px; flex-shrink: 0; }
.vc-footer-inner { display: flex; flex-direction: column; gap: 14px; }
.vc-footer p { margin: 0; }
.vc-footer-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.vc-footer-links a { color: var(--vc-muted); padding: 6px 0; }
.vc-footer-links a:hover { color: var(--vc-text); }

/* Autres pages du site */
.vc-page { padding-top: 32px; padding-bottom: 56px; }
.card { --bs-card-bg: var(--vc-surface); --bs-card-border-color: var(--vc-line); border-radius: 12px; }
.table { --bs-table-bg: transparent; }
.form-control, .form-select { background-color: var(--vc-surface-2); border-color: var(--vc-line-2); }
.table-responsive, .card-body { overflow-wrap: anywhere; }

/* ----- Tablette ----- */
@media (min-width: 576px) {
    .vc-ip { flex-direction: row; align-items: stretch; }
    .vc-ip-box { flex: 1 1 auto; }
    .vc-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vc-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
    .vc-hero { padding: 64px 0; }
    .vc-stats { padding: 36px 0; }
    .vc-stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .vc-stat-value { font-size: 40px; }
    .vc-join { padding: 48px; }
    .vc-join-grid, .vc-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vc-discord { flex-direction: row; align-items: center; justify-content: space-between; padding: 44px 48px; }
    .vc-discord .vc-btn { white-space: nowrap; }
    .vc-footer-inner { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
    .vc-footer-credit { flex-basis: 100%; }
}

/* ----- Ordinateur ----- */
@media (min-width: 992px) {
    .vc-hero { padding: 88px 0 80px; }
    .vc-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; }
    .vc-ip { max-width: 560px; }
    .vc-ip-box { flex: 0 1 auto; }
    .vc-lead { font-size: 20px; }
    .vc-features { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
    .vc-card { padding: 32px; }
    .vc-posts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .vc-section { margin-top: 96px; }
    .vc-join { padding: 64px; }
    .vc-duo .vc-card { padding: 44px; }
    .vc-grass { height: 48px; }
}

.vc-card.vc-post { padding: 0; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}


/* Pied de page : liens légaux (tout petit) */
.vc-footer-small { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--vc-faint); }
.vc-footer-small a { color: var(--vc-faint); text-decoration: underline; text-underline-offset: 2px; }
.vc-footer-small a:hover { color: var(--vc-text); }

/* Pages légales (mini, utilisé aussi par le panier boutique) */
.vc-legal { display: flex; flex-direction: column; gap: 16px; max-width: 860px; }
.vc-legal-small { margin: 0; font-size: 12px; color: var(--vc-faint); line-height: 1.4; }
.vc-legal-small a { color: var(--vc-faint); text-decoration: underline; }

/* En-têtes de page génériques (utilisés par Votes, Classements, Wiki, pages légales) */
.vc-p-head { margin: 8px 0 28px; }

/* Page 404 (1.9.0) */
.vc-404 { text-align: center; padding: 32px 0 48px; }
.vc-404 .vc-p-lead { margin: 0 auto; max-width: 520px; }
.vc-404-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 24px 0 32px; }
.vc-404-join { color: var(--vc-muted); margin: 0 0 12px; }
.vc-404 .vc-ip { margin: 0 auto; max-width: 520px; justify-content: center; }
.vc-404 .vc-hint { margin-top: 10px; }
.vc-p-head .vc-h2 { margin-bottom: 12px; }
.vc-p-lead { margin: 0; color: var(--vc-muted); font-size: 18px; max-width: 640px; }
.vc-p-section { margin-top: 36px; }
.vc-p-title { font-size: 20px; font-weight: 700; margin: 0 0 14px; }