@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap');

:root {
    --color-site-1: #0088CC;
    --color-site-2: #0E0E0F;
    --green-btn: #85B919;
    --orange-btn: #FB5B32;
    --red-btn: #E40624;
    --gold-btn: #B47A1F;
    --text-color: #626568;
    --bg-color: #F7F8F9;

    --font: "Geist", sans-serif;

    --border-radius: 16px;

}

body {
    font-family: var(--font);
    background-color: #fff;
    color: var(--text-color);
    font-size: 14px;
}

section {
    padding: 3rem 0;
}

a {
    color: var(--text-color);
    text-decoration: none;
}

img {
    object-fit: cover;
}



/* --- LUXURY MONO PRO STYLE --- */

.daterangepicker {
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 20px !important; /* Bordures très arrondies pour le container */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    padding: 20px !important;
    width: auto !important;
}

/* --- CALENDRIER --- */
.daterangepicker .calendar-table {
    padding: 0 !important;
}

/* Mois / Année */
.daterangepicker th.month {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--red-btn) !important;
    padding-bottom: 15px !important;
}

/* Jours de la semaine (Lu, Ma...) */
.daterangepicker thead tr:last-child th {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #a1a1aa !important; /* Gris neutre pro */
    text-transform: uppercase;
    padding-bottom: 10px !important;
}

/* --- LES DATES (CERLES) --- */
.daterangepicker td {
    width: 40px !important;
    height: 36px !important;

    font-size: 13px !important;
    font-weight: 500 !important;
    color: #3f3f46 !important;
    border: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Hover : Cercle Noir */
.daterangepicker td.available:hover {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-radius: 50% !important;
}

/* Dates désactivées */
.daterangepicker td.off,
.daterangepicker td.disabled {
    color: #e4e4e7 !important;
}

/* --- LE RANGE (L'INTERVALLE) --- */

/* Zone entre les dates (Gris très léger) */
.daterangepicker td.in-range {
    background-color: #f4f4f5 !important;
    color: #000000 !important;
    border-radius: 0 !important;
}

/* Date de début et de fin (Cercle Noir Plein) */
.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    font-weight: 700 !important;
    position: relative;
    z-index: 1;
}

/* --- FOOTER & BOUTONS --- */
.daterangepicker .drp-buttons {
    border-top: 1px solid #f4f4f5 !important;
    padding: 15px 0 0 0 !important;
    margin-top: 10px !important;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Texte de sélection en bas */
.daterangepicker .drp-selected {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #71717a !important;
}

/* Bouton Valider (Noir Arrondi) */
.daterangepicker .applyBtn {
    background-color: var(--red-btn) !important;
    border: none !important;
    color: #ffffff !important;
    padding: 8px 18px !important;
    border-radius: 50px !important; /* Forme pilule */
    font-size: 12px !important;
    font-weight: 600 !important;
    margin-left: 10px !important;
}

/* Bouton Annuler (Discret) */
.daterangepicker .cancelBtn {
    background-color: transparent !important;
    color: #71717a !important;
    border: 1px solid #e4e4e7 !important;
    padding: 8px 18px !important;
    border-radius: 50px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

.daterangepicker .cancelBtn:hover {
    background-color: #fafafa !important;
    color: #000 !important;
}

/* Flèches de navigation (Chevron look) */
.daterangepicker .calendar-table .next span,
.daterangepicker .calendar-table .prev span {
    border-color: #000000 !important;
    border-width: 0 2px 2px 0 !important;
}