:root {
    --font-heading: "League Spartan", "Spartan", sans-serif;
    --font-body: "Poppins", sans-serif;

    --bs-font-sans-serif: var(--font-body);
    --bs-body-font-family: var(--font-body);

    --brand-blue: #17182b;
    --brand-blue-rgb: 23, 24, 43;

    --brand-yellow: #fdc100;
    --brand-yellow-rgb: 253, 193, 0;

    --brand-white: #ffffff;
    --brand-white-rgb: 255, 255, 255;

    --brand-black: #000000;
    --brand-black-rgb: 0, 0, 0;

    --brand-grey: #b2b2b2;
    --brand-grey-rgb: 178, 178, 178;

    --brand-yellow-soft: #e6b800;
    --brand-yellow-soft-rgb: 230, 184, 0;

    --brand-yellow-contrast: var(--brand-blue);

    --brand-warm-grey: #d8d1b8;
    --brand-warm-grey-rgb: 216, 209, 184;

    --bs-body-font-weight: 400 !important;

    --bs-secondary-rgb: 249,249,249;
}

/* Light mode */
[data-bs-theme=light] {

    --bs-primary: var(--brand-blue) !important;
    --bs-primary-rgb: var(--brand-blue-rgb) !important;

    --bs-link-color: var(--brand-blue) !important;
    --bs-link-hover-color: var(--brand-yellow) !important;

    --bs-link-color-rgb: var(--brand-blue-rgb) !important;
    --bs-link-hover-color-rgb: var(--brand-yellow-rgb);

    --bs-nav-pills-link-active-bg: var(--brand-blue) !important;

    --brand-primary-contrast: var(--brand-white);

    --bs-grad-primary-start: var(--brand-blue);
    --bs-grad-primary-end: var(--brand-black);

    --bs-grad-secondary-start: rgba(var(--brand-yellow-rgb), 0.18);
    --bs-grad-secondary-center: rgba(var(--brand-grey-rgb), 0.15);
    --bs-grad-secondary-end: rgba(var(--brand-blue-rgb), 0.10);

    --bs-secondary-color: #6c707a;
    --bs-tertiary-color: #8a8d96;
    --bs-emphasis-color: var(--brand-blue);

    --brand-button-bg: var(--brand-blue);
    --brand-button-color: var(--brand-white);

    --brand-button-hover-bg: var(--brand-yellow);
    --brand-button-hover-color: var(--brand-blue);
}

/* Dark mode */
[data-bs-theme=dark] {
    --brand-yellow-soft: #e6b800;
    --bs-primary: var(--brand-yellow) !important;
    --bs-primary-rgb: var(--brand-yellow-rgb) !important;

    --bs-link-color: var(--brand-yellow) !important;
    --bs-link-hover-color: var(--brand-yellow-soft) !important;

    --bs-link-color-rgb: var(--brand-yellow-rgb) !important;
    --bs-link-hover-color-rgb: var(--brand-yellow-soft-rgb);

    --bs-nav-pills-link-active-bg: var(--brand-yellow) !important;

    --brand-primary-contrast: var(--brand-blue);

    --bs-body-color: #f9f9f9 !important;

    --bs-grad-primary-start: var(--brand-yellow);
    --bs-grad-primary-end: var(--brand-yellow-soft);

    --bs-grad-secondary-start: rgba(var(--brand-yellow-rgb), 0.16);
    --bs-grad-secondary-center: rgba(var(--brand-warm-grey-rgb), 0.08);
    --bs-grad-secondary-end: rgba(var(--brand-grey-rgb), 0.12);

    --brand-button-bg: var(--brand-yellow);
    --brand-button-color: var(--brand-blue);

    --brand-button-hover-bg: var(--brand-yellow-soft);
    --brand-button-hover-color: var(--brand-blue);
}


/* Texte courant */
body {
    font-family: var(--font-body);
    font-weight: var(--bs-body-font-weight);
}

/* Le thème force cette classe en Inter avec !important */
.font-base {
    font-family: var(--font-body) !important;
}

/* Titres */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6,
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
    font-family: var(--font-heading);
    line-height: 1;
}

/* Le thème force cette classe en Poppins avec !important */
.font-heading {
    font-family: var(--font-heading) !important;
}

/* ================================
   Gradients
================================ */
.heading-color strong {
    color: var(--bs-primary) !important;
}

.bg-primary-grad {
    background: linear-gradient(
            180deg,
            var(--bs-grad-primary-start) 0%,
            var(--bs-grad-primary-end) 100%
    );
}

.bg-secondary-grad {
    background: linear-gradient(
            90deg,
            var(--bs-grad-secondary-start) 0%,
            var(--bs-grad-secondary-center) 51%,
            var(--bs-grad-secondary-end) 100%
    );
}

.text-primary-grad {
    background: linear-gradient(
            90deg,
            var(--bs-grad-primary-start) 0%,
            var(--bs-grad-primary-end) 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* button gradient */
.btn-primary-grad {
    color: var(--brand-primary-contrast);
    background: linear-gradient(
            to right,
            var(--bs-grad-primary-end) 0%,
            var(--bs-grad-primary-start) 51%,
            var(--bs-grad-primary-end) 100%
    );
    background-size: 200% auto;
    border: 0;
}

.btn-primary-grad:active,
.btn-primary-grad:focus,
.btn-primary-grad:hover,
.btn-primary-grad:focus-visible {
    color: var(--brand-primary-contrast);
    background-position: right center;
}

/* Gradient link button */
.link-primary-grad {
    background: linear-gradient(
            90deg,
            var(--bs-grad-primary-start) 0%,
            var(--bs-grad-primary-end) 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.link-primary-grad.active,
.link-primary-grad:active,
.link-primary-grad:focus,
.link-primary-grad:hover {
    background: linear-gradient(
            280deg,
            var(--bs-grad-primary-start) 0%,
            var(--bs-grad-primary-end) 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.link-primary-grad > .bi {
    background: linear-gradient(
            180deg,
            var(--bs-grad-primary-start) 0%,
            var(--bs-grad-primary-end) 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
}


/* ================================
   Navigation
================================ */

.nav-pills-secondary .nav-link.active .price-text,
.nav-pills-secondary .nav-link:hover .price-text {
    background: linear-gradient(
            90deg,
            var(--bs-grad-primary-start) 0%,
            var(--bs-grad-primary-end) 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* CSS for overriding primary colors */
.navbar {
    --bs-navbar-hover-color: var(--bs-primary);
    --bs-navbar-active-color: var(--bs-primary);
}

.navbar-dark {
    --bs-navbar-hover-color: var(--bs-primary) !important;
    --bs-navbar-active-color: var(--bs-primary) !important;
}

.nav {
    --bs-nav-link-hover-color: var(--bs-primary);
}

.dropdown-menu {
    --bs-dropdown-link-hover-color: var(--bs-primary) !important;
    --bs-dropdown-link-active-color: var(--bs-primary) !important;
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--bs-primary);
}


/* ================================
   Buttons
================================ */

.btn-primary {
    --bs-btn-color: var(--brand-button-color);
    --bs-btn-bg: var(--brand-button-bg);
    --bs-btn-border-color: var(--brand-button-bg);

    --bs-btn-hover-color: var(--brand-button-hover-color);
    --bs-btn-hover-bg: var(--brand-button-hover-bg);
    --bs-btn-hover-border-color: var(--brand-button-hover-bg);

    --bs-btn-active-color: var(--brand-button-hover-color);
    --bs-btn-active-bg: var(--brand-button-hover-bg);
    --bs-btn-active-border-color: var(--brand-button-hover-bg);

    --bs-btn-disabled-color: var(--brand-button-color);
    --bs-btn-disabled-bg: var(--brand-button-bg);
    --bs-btn-disabled-border-color: var(--brand-button-bg);
}

.btn-link {
    --bs-btn-color: var(--bs-primary);
    --bs-link-color: var(--bs-primary);
    --bs-btn-hover-color: var(--bs-link-hover-color);
    --bs-btn-active-color: var(--bs-link-hover-color);
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);

    --bs-btn-hover-color: var(--brand-primary-contrast);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);

    --bs-btn-active-color: var(--brand-primary-contrast);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);

    --bs-btn-disabled-color: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-primary-soft {
    color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), 0.1);
}

.btn-primary-soft.active,
.btn-primary-soft:focus,
.btn-primary-soft:hover {
    color: var(--brand-primary-contrast);
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

.btn-primary-shadow {
    color: var(--brand-button-color);
    background-color: var(--brand-button-bg);
    box-shadow: 0 0 0 10px rgba(var(--bs-primary-rgb), 0.35);
}

.btn-primary-shadow:hover,
.btn-primary-shadow:focus,
.btn-primary-shadow.active {
    color: var(--brand-button-hover-color);
    background-color: var(--brand-button-hover-bg);
    box-shadow: 0 0 0 10px rgba(var(--bs-primary-rgb), 0.35);
}


/* ================================
   Utilities
================================ */
.text-yellow {
    color: var(--brand-yellow);
}

.fill-primary {
    fill: var(--bs-primary) !important;
}

.text-bg-primary {
    color: var(--brand-primary-contrast) !important;
    background-color: rgba(var(--bs-primary-rgb), 1) !important;
}

.page-item.active .page-link,
.page-link:hover,
.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}


/* ================================
   SVG inline colors
================================ */

/* #17182b encodé en data URI = %2317182b */
/* #fdc100 encodé en data URI = %23fdc100 */
/* #ffffff encodé en data URI = %23ffffff */

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2317182b'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2317182b'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
}

.accordion.accordion-step-border .accordion-button[aria-expanded="true"] {
    color: var(--bs-primary);
}

.accordion.accordion-step-border .accordion-button[aria-expanded="true"] .accordion-step-number {
    background-color: var(--bs-primary);
    color: var(--brand-primary-contrast);
}

@media (min-width: 360px) {
    .heroFigcaption {
        margin-top: 30px;
        width: 230px;
    }

    .heroFigcaption p {
        font-size: 1.2em;
    }
}

@media (min-width: 430px) {
    .heroFigcaption {
        margin-top: 30px;
        width: auto;
    }
}

@media (min-width: 576px) {
    .heroFigcaption {
        margin-top: -30px;
    }

    .heroFigcaption p {
        font-size: 1.4em;
    }
}

@media (min-width: 992px) {
    .heroFigcaption {
        display: none;
    }
}

@media (min-width: 1140px) {
    .heroFigcaption {
        display: block;
    }

    .heroFigcaption p {
        font-size: 1em;
    }
}

@media (min-width: 1400px) {
    .heroFigcaption {

    }

    .heroFigcaption p {
        font-size: 1.2em;
    }
}