/* Font pour le body */
body {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    margin: 0;
    padding: 0;
}

/* Font pour les titres h1 à h6 */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    margin: 0 0 1rem 0;
    line-height: 1.2;
    color: #111;
}

/* Exemple tailles titres */
h1 {
    font-size: 3rem;
}

h2 {
    font-size: 2.5rem;
}

h3 {
    font-size: 2rem;
}

h4 {
    font-size: 1.75rem;
}

h5 {
    font-size: 1.5rem;
}

h6 {
    font-size: 1.25rem;
}

/* Navbar style */
.navbar-brand {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
}

.nav-link {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}

:root {
    --bs-border-raduis: 2px;
}

.gradient-custom-2 {
    /* fallback for old browsers */
    background: #fccb90;

    /* Chrome 10-25, Safari 5.1-6 */
    background: -webkit-linear-gradient(to right, #ee7724, #d8363a, #dd3675, #b44593);

    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background: linear-gradient(to right, #ee7724, #d8363a, #dd3675, #b44593);
}

@media (min-width: 768px) {
    .gradient-form {
        height: 100vh !important;
    }
}

@media (min-width: 769px) {
    .gradient-custom-2 {
        border-top-right-radius: .3rem;
        border-bottom-right-radius: .3rem;
    }
}

/* Variables pour changer la couleur de base facilement */
:root {
    --nav-dark: #344a1c; /* teinte plus foncée */
    --nav-base: #598030; /* couleur fournie */
    --nav-light: #8ec058; /* teinte plus claire */
    --nav-text: rgba(255, 255, 255, 0.95);
}

/* Navbar personnalisée */
.navbar-gradient {
    background: linear-gradient(90deg, var(--nav-dark) 0%, var(--nav-base) 50%, var(--nav-light) 100%);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
}

.navbar-gradient .navbar-brand,
.navbar-gradient .nav-link {
    color: var(--nav-text);
}

.navbar-gradient .nav-link:hover,
.navbar-gradient .nav-link:focus {
    color: #fff;
}

/* Toggler (hamburger) styling pour contraste sur fond sombre */
.navbar-gradient .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.18);
}

.navbar-gradient .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Optionnel : style pour le bouton CTA dans la navbar */
.btn-navbar-cta {
    background: rgba(255, 255, 255, 0.12);
    color: var(--nav-text);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.btn-navbar-cta:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}


.btn-cta {
    background-color: #598030; /* couleur principale */
    color: #fff;
    border: none;
    transition: all 0.3s ease-in-out;
    border-radius: 30px;
    padding: 10px;
}

.btn-cta:hover,
.btn-cta:focus {
    background-color: #d8a043; /* couleur hover */
    color: #fff;
}

.form-control {
    border-radius: 30px;
    padding: 10px 20px;
}

.form-select {
    border-radius: 30px;
    padding: 10px 20px;
}

.alert {
    border-radius: 30px;
}

a {
    color: #d8a043;
}

.dropdown-item.active, .dropdown-item:active {
    background-color: #598030;
    color: #fff;
}

.dropdown-item:hover {
    background-color: #d8a043;
    color: #fff;
}

.font-body {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
}