:root {
    --header-blue:#0e7490;
    --header-turquoise:#14b8a6;

    --calendar-selected:#0e7490;
    --calendar-range:#99f6e4;

    --calendar-normal:#f0fdfa;
    --calendar-summer:#e0f2fe;

    --calendar-blocked:#9ca3af;
}

/* ------------------------------
   CONTENEUR PRINCIPAL
--------------------------------*/
.airbnb-calendar { 
    max-width: 900px; 
    margin: 20px auto; 
    font-family: Arial, sans-serif; 
}

.calendar-wrapper {
    display: flex;
    gap: 40px;
    justify-content: center;
}

/* ------------------------------
   MOIS
--------------------------------*/
.month {
    width: 350px;
    background:#ffffff;
    border-radius:12px;
    padding:12px;
    box-shadow:0 2px 8px rgba(0,0,0,0.08);
    display:flex;
    flex-direction:column;
}

.month h3 {
    text-align: center;
    margin-bottom: 10px;
    text-transform: capitalize;
}

/* ------------------------------
   JOURS DE LA SEMAINE
--------------------------------*/
.weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-weight: bold;
    margin-bottom: 5px;
}

/* ------------------------------
   GRILLE DES JOURS
--------------------------------*/
.days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px; /* 🟩 léger espace entre les cases pour éviter qu'elles se touchent */
    min-height: 270px;
}

.empty {
    visibility: hidden;
}

/* ------------------------------
   CASE JOUR
--------------------------------*/
.day {
    background:#f5f5f5;
    border-radius:10px; /* 🟩 arrondi plus visible par défaut */
    padding:8px;
    text-align:center;
    cursor:pointer;
    position:relative;
    overflow:hidden;
    font-size:14px;
    font-weight:500;
    border:1px solid rgba(0,0,0,0.05);

    transition:
        background .18s ease,
        transform .12s ease,
        box-shadow .18s ease;
}

.day:hover {
    background:#e8e8e8;
    transform:scale(1.03); /* 🟩 hover plus léger pour limiter le chevauchement */
    z-index:2; /* 🟩 passe au-dessus des voisines sans les écraser */
}

.day .num {
    font-weight:700;
    font-size:15px;
}

/* ------------------------------
   ETATS DES JOURS
--------------------------------*/
.day.past,
.day.disabled {
    opacity:0.35;
    cursor:not-allowed;
}

.day.winter {
    background:#e5e7eb;
    color:#9ca3af;
    cursor:not-allowed;
}

.day.normal {
    background:var(--calendar-normal);
}

.day.summer-week {
    background:var(--calendar-summer);
}

.day.saturday {
    background:#dbeafe;
    font-weight:700;
}

.day.no-checkin {
    cursor:not-allowed;
    opacity:0.7;
}

/* ------------------------------
   RESERVATIONS
--------------------------------*/
.day.blocked {
    background:var(--calendar-blocked);
    color:white;
    cursor:not-allowed;
}

.day.pending {
    background:#99f6e4;
    background-image:repeating-linear-gradient(
        45deg,
        rgba(0,0,0,0.15) 0,
        rgba(0,0,0,0.15) 2px,
        transparent 2px,
        transparent 6px
    );
}

/* ------------------------------
   SELECTION
--------------------------------*/
.day.selected {
    background:var(--calendar-selected);
    color:white;
    transform:scale(1.05); /* 🟩 un peu moins agressif que 1.08 */
    box-shadow:0 3px 10px rgba(0,0,0,0.2);
    z-index:3; /* 🟩 au-dessus de tout pour bien voir les arrondis */
}

.day.in-range {
    background:var(--calendar-range);
    color:#083344;
    border-radius:0; /* 🟩 la plage centrale reste rectangulaire */
}

/* 🟩 on remplace checkin/checkout par start/end pour plus de contrôle */
.day.start {
    border-top-left-radius:14px;
    border-bottom-left-radius:14px; /* 🟩 début de séjour bien arrondi à gauche */
}

.day.end {
    border-top-right-radius:14px;
    border-bottom-right-radius:14px; /* 🟩 fin de séjour bien arrondie à droite */
}

.day.start {
    background-color: var(--calendar-selected) !important;
    color: white !important;
}

.day.end {
    background-color: var(--calendar-selected) !important;
    color: white !important;
}

/* (si tu utilises encore checkin/checkout quelque part, tu peux les mapper sur start/end) */
.day.checkin { border-radius:14px 0 0 14px; }
.day.checkout { border-radius:0 14px 14px 0; }

/* ------------------------------
   SEMAINE ÉTÉ (SAMEDI → SAMEDI)
--------------------------------*/
.day.summer-start {
    border-top-left-radius:10px;
    border-bottom-left-radius:10px;
    font-weight:700;
}

.day.summer-end {
    border-top-right-radius:10px;
    border-bottom-right-radius:10px;
}

/* ------------------------------
   PRIX SEMAINE
--------------------------------*/
.week-price {
    display:block;
    font-size:10px;
    font-weight:600;
    color:#0e7490;
    margin-top:2px;
}

/* ------------------------------
   NAVIGATION
--------------------------------*/
.calendar-nav {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    margin-bottom:15px;
}

#cal-label {
    font-size:22px;
    font-weight:700;
    color:#0e7490;
    text-transform:capitalize;
}

#cal-prev,
#cal-next {
    background:none;
    border:none;
    font-size:26px;
    cursor:pointer;
    color:#0e7490;
    padding:4px 10px;
    transition:0.2s;
}

#cal-prev:hover,
#cal-next:hover {
    color:#14b8a6;
    transform:scale(1.2);
}

/* ------------------------------
   MESSAGE D’ERREUR
--------------------------------*/
#calendar-message {
    margin-top:15px;
    padding:10px;
    text-align:center;
    color:#b91c1c;
    font-size:14px;
    font-weight:600;
    background:#fee2e2;
    border-radius:8px;
    display:none;
    max-width:400px;
    margin-left:auto;
    margin-right:auto;
}

/* ------------------------------
   LÉGENDE — version améliorée
--------------------------------*/
.calendar-legend {
    margin-top: 18px;
    text-align: center;
    font-size: 15px;
    display: flex;
    justify-content: center;
    gap: 25px;
}

.legend {
    display: inline-block;
    width: 15px;          /* carré plus grand */
    height: 15px;
    border-radius: 4px;   /* léger arrondi premium */
    border: 2px solid #000; /* bordure noire visible */
    margin-right: 8px;
    vertical-align: middle;
}

/* Couleurs */
.legend.free { background:#e6fffb; }
.legend.pending { background:#67e8f9; }
.legend.reserved { background:#bfbfc4; }
.legend.promo {
    background-color: #ffcc80;
    border: 2px solid #e6a65c;
}



/* ----------------------------- */
/* JOURS PROMOTIONNELS (ORANGE) */
/* ----------------------------- */
.day.promo {
    background-color: #ffcc80 !important; /* ORANGE CLAIR PREMIUM */
    color: #000 !important;
    border-radius: 6px;
    border: 1px solid #e6a65c !important; /* bordure douce */
}

.day.promo.selected {
    background-color: #4a90e2 !important;
    color: #fff !important;
}

.day.promo.in-range {
    background-color: #b2f0e3 !important;
    color: #000 !important;
}

/* ----------------------------- */
/* JOURS RÉSERVÉS (gris)         */
/* ----------------------------- */
.day.reserved,
.day.blocked,
.day.pending {
    background-color: #cfcfcf !important;
    color: #000 !important;
    border-radius: 6px;
}

/* ----------------------------- */
/* JOURS PROMO (orange clair)    */
/* ----------------------------- */
.day.promo {
    background-color: #ffb347 !important; /* ORANGE CLAIR */
    color: #000 !important;
    border-radius: 6px;
    border: 1px solid #e6a65c !important;
}

/* ----------------------------- */
/* JOURS SÉLECTIONNÉS (bleu)     */
/* ----------------------------- */
.day.selected {
    background-color: #4a90e2 !important;
    color: #fff !important;
    border-radius: 6px;
}

/* ----------------------------- */
/* JOURS DANS LA PLAGE (turquoise) */
/* ----------------------------- */
.day.in-range {
    background-color: #b2f0e3 !important;
    color: #000 !important;
    border-radius: 6px;
}

/* ----------------------------- */
/* COMBINAISONS                  */
/* ----------------------------- */

/* Promo + sélection = bleu */
.day.promo.selected {
    background-color: #4a90e2 !important;
    color: #fff !important;
}

/* Promo + in-range = turquoise */
.day.promo.in-range {
    background-color: #b2f0e3 !important;
    color: #000 !important;
}

/* Empêche le flash/clignotement lors du clic sur un jour promo */
.day.promo:active {
    background-color: #ffb347 !important;
    color: #000 !important;
}
.day.promo.selected:active {
    background-color: #4a90e2 !important;
    color: #fff !important;
}
.day.promo.in-range:active {
    background-color: #b2f0e3 !important;
    color: #000 !important;
}

/* ============================================================
   PATCH FINAL — PRIORITÉ MAXIMALE
   Garantit que start/end restent BLEUS même si in-range ou promo
============================================================ */

/* Début du séjour — BLEU */
.day.start {
    background-color: var(--calendar-selected) !important;
    color: #fff !important;
    border-top-left-radius: 14px !important;
    border-bottom-left-radius: 14px !important;
}

/* Fin du séjour — BLEU */
.day.end {
    background-color: var(--calendar-selected) !important;
    color: #fff !important;
    border-top-right-radius: 14px !important;
    border-bottom-right-radius: 14px !important;
}

/* Plage — TURQUOISE */
.day.in-range {
    background-color: var(--calendar-range) !important;
    color: #083344 !important;
    border-radius: 0 !important;
}

/* Sélection générale (clic) — BLEU */
.day.selected {
    background-color: var(--calendar-selected) !important;
    color: #fff !important;
}

/* Promo + sélection = BLEU */
.day.promo.start,
.day.promo.end,
.day.promo.selected {
    background-color: var(--calendar-selected) !important;
    color: #fff !important;
}

/* Promo + in-range = TURQUOISE */
.day.promo.in-range {
    background-color: var(--calendar-range) !important;
    color: #083344 !important;
}

.summary-card .cta-info {
    font-size: 13px;   /* au lieu de ~16-18 */
    font-weight: 500;
    margin: 8px 0;
    text-align: center;
    color: #555;
}

.cta-info {
    font-size: 12.5px;
    opacity: 0.8;
}

.day.start {
    background: #0ea5e9 !important; /* bleu foncé */
    color: white;
    border-radius: 8px;
}

.day.selected {
    background: #0ea5e9 !important;
    color: white;
}

.day.end {
    background: #0ea5e9;
    color: white;
}

.day.start {
    background: var(--primary);
    color: white;
}

.day.active {
    box-shadow: 0 0 0 2px #fff inset;
}

.whatsapp-btn-premium.active {
    animation: pulse 1s infinite;
}

.summary-card {
    transition: box-shadow 0.3s ease;
}

.summary-card.highlight {
    box-shadow: 0 0 0 3px #0ea5e9, 0 10px 30px rgba(14,165,233,0.25);
}

.calendar-info {
    font-size: 12px;
    margin-top: 8px;
    opacity: 0.75;
    text-align: center;
    line-height: 1.4;
}

/* ------------------------------
   CALENDRIER AIRBNB-LIKE
--------------------------------*/
.airbnb-calendar {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.calendar-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.calendar-nav #cal-label {
    font-weight: 600;
}

.btn-small {
    padding: 6px 10px;
    font-size: 0.85rem;
}

.calendar-month {
    background: #fff;
    padding: 12px;
    border-radius: var(--radius);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    width: 300px;
}

.calendar-month h4 {
    text-align: center;
    margin-bottom: 10px;
    text-transform: capitalize;
}

/* --- CORRECTION ICI --- */
.weekdays, .calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 6px;
    font-size: 0.8rem;
    color: var(--muted);
    text-align: center;
}

/* --- CORRECTION ICI --- */
.days, .calendar-grid {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 6px;
}

/* --- CORRECTION ICI --- */
.day, .calendar-day, .empty {
    padding: 8px;
    text-align: center;
    border-radius: 8px;
    font-size: 0.9rem;
    background: #f8fafc;
    min-height: 40px;
    box-sizing: border-box;
    cursor: pointer;
}

.day:hover {
    background: #e0f2fe;
}

.day.disabled {
    color: #ccc;
    cursor: not-allowed;
}

.day.reserved {
    background: #ffe5e5;
    color: #b91c1c;
    border: 1px solid #e11d48;
    cursor: not-allowed;
}

.day.summer-blocked {
    background: #e5e7eb;
    color: #9ca3af;
}

.day.saturday-blocked {
    background: #ffe5e5;
    color: #b91c1c;
    border: 1px solid #e11d48;
    cursor: not-allowed;
}

.day.selected {
    background: var(--primary);
    color: white;
}

.day.range {
    background: var(--range);
    color: #0f172a;
}

#cal-label {
    font-size: 22px;     /* 🔥 plus gros */
    font-weight: 800;    /* bien visible */
    color: #0e7490;
    text-align: center;
}

.calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#cal-label {
    flex: 1;             /* 🔥 prend l’espace */
}

#cal-label {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 1px;
}

/* =========================
   INFOS SOUS LÉGENDE
========================= */

.calendar-card .calendar-info {
     font-size: 16px;   /* 🔥 parfait équilibre */
    margin-top: 8px;
    opacity: 0.8;
    text-align: center;
    line-height: 1.4;
    width: 100%;
}

.calendar-legend {
    font-size: 18px;
    font-weight: 600;   /* 🔥 légèrement plus gras */
    opacity: 0.9;       /* un peu plus visible */
}

/* =========================
   TITRES CALENDRIER FIX
========================= */

.calendar-card h3,
#cal-label {
    color: #0e7490 !important;   /* 🔥 même couleur que ton site */
    font-size: 26px !important;
    font-weight: 800;
}

.calendar-card h3 {
    font-size: 24px !important;
}

#cal-label {
    font-size: 24px !important;
}

/* =========================
   TITRES MOIS CALENDRIER
========================= */

.month h3 {
    color: #0e7490 !important;
    font-size: 20px !important;
    font-weight: 700;
    text-align: center;
    margin-bottom: 10px;
}

/* =========================
   FLÈCHES NAV CALENDRIER
========================= */

.calendar-nav button {
    display: flex;              /* 🔥 clé */
    align-items: center;        /* centre vertical */
    justify-content: center;    /* centre horizontal */

    width: 36px;
    height: 36px;

    border-radius: 50%;
    border: none;

    background: #0e7490;   /* 🔥 couleur principale */
    color: white;
    border: none;

    font-size: 18px;
    font-weight: bold;

    cursor: pointer;

    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
}

.calendar-nav button {
    line-height: 1;  /* 🔥 évite décalage */
    padding: 0;      /* 🔥 évite décalage */
}

/* HOVER */
.calendar-nav button:hover {
    transform: scale(1.1);
    background: #14b8a6;   /* 🔥 couleur plus claire */
    transform: scale(1.1);
    color: white;
}

/* CLICK */
.calendar-nav button:active {
    transform: scale(0.95);
}

.calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.calendar-nav button {
    background: linear-gradient(135deg, #0e7490, #14b8a6);
    color: white;
}

@media (max-width: 768px) {

    .day {
        min-height: 48px;
        font-size: 14px;
    }

    .days {
        gap: 8px;
    }

    .month {
        padding: 10px;
    }

    .weekdays {
        font-size: 13px;
    }
}

.airbnb-calendar {
    touch-action: pan-y;
}

@media (max-width: 768px) {

    .day.reserved,
    .day.blocked {
        background: #ccc !important;
        color: #666 !important;
        opacity: 0.6;
    }

}

@media (max-width: 768px) {

    .days .day.blocked,
    .days .day.reserved {
        background: #ccc !important;
        opacity: 0.6;
    }

}

.day {
    aspect-ratio: 1 / 1;
}

.day {
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.day.selected,
.day.in-range {
    background: #d1fae5; /* vert très clair */
    color: #065f46;
}

.day.start,
.day.end {
    background: #10b981; /* vert principal */
    color: white;
    border: 2px solid #059669;
}

.day.in-range {
    background: #ecfdf5;
}

.day.start {
    border-radius: 50% 0 0 50%;
}

.day.end {
    border-radius: 0 50% 50% 0;
}

.day.blocked {
    background: repeating-linear-gradient(
        45deg,
        #e5e7eb,
        #e5e7eb 5px,
        #f3f4f6 5px,
        #f3f4f6 10px
    );
    color: #9ca3af;
}

.day {
    border-radius: 8px;
    transition: all 0.2s ease;
}

@media (max-width: 520px) {

    .calendar-wrapper {
        width: 100%;
    }

    .days {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
    }

    .day {
        aspect-ratio: 1 / 1;
        min-height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

}

.map-actions {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.map-btn {
    display: block;
    padding: 12px;
    text-align: center;
    background: #f1f1f1;
    border-radius: 8px;
    font-weight: 600;
}