:root {
    /* Palette inspirée du terrain et du cuir : vert infield, terre battue, blanc craie */
    --cb-vert-fonce: #1c3d2e;
    --cb-vert: #2f5d45;
    --cb-terre: #b5622f;
    --cb-terre-clair: #e8a668;
    --cb-craie: #f7f4ec;
    --cb-encre: #22281f;
    --cb-rouge-laçage: #a5372a;

    --bs-body-font-family: 'Space Grotesk', system-ui, sans-serif;
    --bs-body-bg: var(--cb-craie);
    --bs-body-color: var(--cb-encre);
}

@font-face {
    font-family: 'Space Grotesk';
    src: local('Space Grotesk');
}

body {
    background-color: var(--cb-craie);
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(28, 61, 46, 0.05) 40px);
}

.cb-navbar {
    background-color: var(--cb-vert-fonce);
    border-bottom: 4px solid var(--cb-terre);
}

.cb-navbar .navbar-brand {
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--cb-craie) !important;
}

.cb-navbar .navbar-brand .cb-brand-accent {
    color: var(--cb-terre-clair);
}

.cb-hero {
    background: linear-gradient(135deg, var(--cb-vert-fonce) 0%, var(--cb-vert) 100%);
    color: var(--cb-craie);
    border-bottom: 6px solid var(--cb-terre);
    position: relative;
    overflow: hidden;
}

.cb-hero::after {
    content: "";
    position: absolute;
    right: -60px;
    bottom: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, transparent 40%, var(--cb-craie) 41%, var(--cb-craie) 43%, transparent 44%),
        radial-gradient(circle, var(--cb-terre-clair) 0%, transparent 70%);
    opacity: 0.25;
}

.cb-card {
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 10px 30px rgba(28, 40, 31, 0.08);
}

.cb-card .card-header {
    background-color: var(--cb-vert-fonce);
    color: var(--cb-craie);
    border-radius: 0.75rem 0.75rem 0 0 !important;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.cb-step-indicator {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.85rem;
    color: var(--cb-vert-fonce);
}

.cb-step-indicator .cb-step {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    opacity: 0.45;
}

.cb-step-indicator .cb-step.active {
    opacity: 1;
    font-weight: 600;
}

.cb-step-indicator .cb-step .cb-step-dot {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background-color: var(--cb-vert-fonce);
    color: var(--cb-craie);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
}

.cb-step-indicator .cb-step:not(.active) .cb-step-dot {
    background-color: #cfd9d1;
    color: var(--cb-vert-fonce);
}

.btn-cb-primary {
    background-color: var(--cb-terre);
    border-color: var(--cb-terre);
    color: var(--cb-craie);
    font-weight: 600;
}

.btn-cb-primary:hover, .btn-cb-primary:focus {
    background-color: var(--cb-rouge-laçage);
    border-color: var(--cb-rouge-laçage);
    color: var(--cb-craie);
}

.btn-cb-outline {
    border-color: var(--cb-vert-fonce);
    color: var(--cb-vert-fonce);
    font-weight: 600;
}

.btn-cb-outline:hover {
    background-color: var(--cb-vert-fonce);
    color: var(--cb-craie);
}

.cb-badge-nouvelle {
    background-color: var(--cb-terre);
}

.cb-badge-renouvellement {
    background-color: var(--cb-vert);
}

.cb-licence-input {
    font-family: 'Courier New', monospace;
    letter-spacing: 0.08em;
    font-size: 1.1rem;
}

.cb-footer {
    color: var(--cb-vert-fonce);
    opacity: 0.7;
    font-size: 0.85rem;
}

.cb-stat-card {
    border-radius: 0.75rem;
    background: var(--cb-vert-fonce);
    color: var(--cb-craie);
    padding: 1.25rem;
}

.cb-stat-card .cb-stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--cb-terre-clair);
}