/* =========================================================
   CHALET 2000
   Calendrier de réservation V2
   ========================================================= */


/* =========================================================
   VARIABLES
   ========================================================= */

:root {
    --green-dark: #143f33;
    --green: #1d5142;
    --green-medium: #2b6753;
    --green-soft: #dfe9e4;

    --cream: #f6f0e5;
    --cream-light: #fbf8f2;
    --cream-dark: #eadbc4;

    --gold: #c68f3d;
    --gold-light: #dfb66f;
    --gold-dark: #a97124;

    --white: #ffffff;

    --text: #2c4038;
    --text-light: #697870;
    --text-muted: #98a29d;

    --border: rgba(20, 63, 51, 0.13);
    --border-gold: rgba(198, 143, 61, 0.28);

    --available: #3b8e69;
    --available-soft: #e9f4ee;

    --low: #d79635;
    --low-soft: #fff3df;

    --full: #b75c51;
    --full-soft: #f9ebe9;

    --blocked: #747b77;
    --blocked-soft: #eeeeeb;

    --shadow-small:
        0 8px 24px rgba(13, 42, 33, 0.07);

    --shadow:
        0 20px 55px rgba(8, 36, 27, 0.13);

    --shadow-hover:
        0 22px 45px rgba(10, 43, 33, 0.16);
}


/* =========================================================
   RESET
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    margin: 0;

    background:
        linear-gradient(
            rgba(8, 30, 22, 0.64),
            rgba(8, 30, 22, 0.72)
        ),
        url('../../../images/hero-chalet.jpg')
        center / cover fixed no-repeat;

    color: var(--text);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
}

button,
input,
select,
textarea {
    font: inherit;
}


/* =========================================================
   PAGE
   ========================================================= */

.calendar-page {
    width: 100%;
    min-height: 100vh;
    padding: 26px;
}


/* =========================================================
   TOPBAR
   ========================================================= */

.calendar-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    width: min(100%, 1380px);
    margin: 0 auto 22px;
}

.calendar-back {
    display: inline-flex;
    align-items: center;
    gap: 11px;

    min-height: 46px;
    padding: 10px 18px;

    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.91);

    color: var(--green-dark);

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.12);

    font-size: 14px;
    font-weight: 700;
    text-decoration: none;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}

.calendar-back:hover {
    background: var(--white);

    transform: translateY(-2px);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.17);
}

.calendar-back-arrow {
    font-size: 19px;
    line-height: 1;
}

.calendar-brand {
    color: rgba(255, 255, 255, 0.96);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 21px;
    font-weight: 700;
    text-align: right;
}

.calendar-brand span {
    display: block;
    margin-top: 3px;

    color: rgba(255, 255, 255, 0.63);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


/* =========================================================
   CONTENEUR PRINCIPAL
   ========================================================= */

.calendar-main {
    width: min(100%, 1380px);
    margin: 0 auto;
    padding: 54px 58px 44px;

    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 30px;

    background: rgba(248, 245, 238, 0.97);

    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.23);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}


/* =========================================================
   INTRODUCTION
   ========================================================= */

.calendar-intro {
    max-width: 820px;
    margin: 0 auto 52px;

    text-align: center;
}

.calendar-eyebrow {
    margin: 0 0 15px;

    color: var(--gold-dark);

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.calendar-intro h1 {
    margin: 0;

    color: var(--green-dark);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(45px, 6vw, 76px);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.02;
}

.calendar-intro-text {
    max-width: 710px;
    margin: 23px auto 0;

    color: var(--text-light);

    font-size: 16px;
    line-height: 1.8;
}


/* =========================================================
   NAVIGATION DU MOIS
   ========================================================= */

.calendar-month-navigation {
    display: grid;
    grid-template-columns: 60px 1fr 60px;
    align-items: center;
    gap: 25px;

    max-width: 720px;
    margin: 0 auto 28px;
}

.calendar-month-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 56px;
    height: 56px;

    border: 1px solid var(--border-gold);
    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f2e8d9
        );

    color: var(--green-dark);

    box-shadow: var(--shadow-small);

    font-size: 23px;
    font-weight: 400;
    text-decoration: none;

    transition:
        transform 0.25s ease,
        color 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.calendar-month-arrow:last-child {
    justify-self: end;
}

.calendar-month-arrow:hover {
    border-color: var(--green-dark);

    background: var(--green-dark);
    color: var(--white);

    box-shadow:
        0 12px 26px rgba(20, 63, 51, 0.18);

    transform: translateY(-3px);
}

.calendar-month-title {
    min-width: 0;
    text-align: center;
}

.calendar-month-label {
    display: block;
    margin-bottom: 6px;

    color: var(--gold-dark);

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.calendar-month-title h2 {
    margin: 0;

    color: var(--green-dark);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(29px, 4vw, 43px);
    font-weight: 500;
    text-transform: capitalize;
}


/* =========================================================
   RÉSUMÉ DU MOIS
   ========================================================= */

.calendar-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;

    margin: 0 auto 28px;
}

.calendar-summary-item {
    display: flex;
    align-items: baseline;
    gap: 8px;

    color: var(--text-light);

    font-size: 13px;
}

.calendar-summary-item strong {
    color: var(--green-dark);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 23px;
    font-weight: 500;
}

.calendar-summary-separator {
    width: 1px;
    height: 26px;

    background: var(--border);
}


/* =========================================================
   LÉGENDE
   ========================================================= */

.calendar-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px 26px;

    margin: 0 0 27px;
    padding: 17px 22px;

    border: 1px solid var(--border);
    border-radius: 16px;

    background: rgba(255, 255, 255, 0.55);
}

.calendar-legend-item {
    display: flex;
    align-items: center;
    gap: 9px;

    color: var(--text-light);

    font-size: 12px;
    font-weight: 700;
}

.calendar-status-dot {
    display: block;

    width: 9px;
    height: 9px;

    border-radius: 50%;
}

.calendar-status-dot.status-available {
    background: var(--available);

    box-shadow:
        0 0 0 4px rgba(59, 142, 105, 0.11);
}

.calendar-status-dot.status-low {
    background: var(--low);

    box-shadow:
        0 0 0 4px rgba(215, 150, 53, 0.11);
}

.calendar-status-dot.status-full {
    background: var(--full);

    box-shadow:
        0 0 0 4px rgba(183, 92, 81, 0.11);
}

.calendar-status-dot.status-blocked {
    background: var(--blocked);

    box-shadow:
        0 0 0 4px rgba(116, 123, 119, 0.11);
}


/* =========================================================
   WRAPPER DU CALENDRIER
   ========================================================= */

.calendar-wrapper {
    position: relative;

    width: 100%;

    overflow: hidden;

    border: 1px solid rgba(20,63,51,.18);
    border-radius: 24px;

    background:#dde3dd;

    box-shadow:
        0 18px 42px rgba(20, 63, 51, 0.07);
}


/* =========================================================
   JOURS DE LA SEMAINE
   ========================================================= */

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));

    border-bottom: 1px solid var(--border);

    background:
        linear-gradient(
            180deg,
            #d4ddd7,
            #ccd6d0
        );
}

.calendar-weekday {
    padding: 18px 10px;

    color: var(--green-dark);

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-align: center;
    text-transform: uppercase;
}

.calendar-weekday:not(:last-child) {
    border-right: 1px solid var(--border);
}


/* =========================================================
   GRILLE
   ========================================================= */

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


/* =========================================================
   CELLULE STANDARD
   ========================================================= */

.calendar-day {
    position: relative;

    min-width: 0;
    min-height: 162px;
    padding: 16px 0;

    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);

    background:#fcfcf9;

    color: var(--text);

    text-decoration: none;

    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        border-color 0.28s ease,
        background 0.28s ease;

    isolation: isolate;
}

/*
Chaque septième cellule termine une ligne.
*/

.calendar-day:nth-child(7n) {
    border-right: 0;
}

/*
La dernière semaine ne nécessite pas de bordure inférieure.
*/

.calendar-day:nth-last-child(-n + 7) {
    border-bottom: 0;
}


/* =========================================================
   NUMÉRO DU JOUR
   ========================================================= */

.calendar-day-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 27px;
    height: 27px;

    color: var(--green-dark);

    font-size: 18px;
    font-weight: 700;
    opacity: 0.9;
}

.calendar-day-number-muted {
    color: rgba(105, 120, 112, 0.35);
}

.calendar-day-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}


/* =========================================================
   JOUR HORS DU MOIS
   ========================================================= */

.calendar-day.is-outside-month {
    background: rgba(232, 230, 224, 0.28);
}

.calendar-day.is-outside-month::after {
    position: absolute;
    inset: 0;

    background:
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 12px,
            rgba(20, 63, 51, 0.012) 12px,
            rgba(20, 63, 51, 0.012) 13px
        );

    content: "";

    pointer-events: none;
}


/* =========================================================
   AUJOURD'HUI
   ========================================================= */

.calendar-day.is-today:not(.has-event)
.calendar-day-number {
    border-radius: 50%;

    background: var(--green-dark);
    color: var(--white);
}

.calendar-today-label {
    color: var(--gold-dark);

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


/* =========================================================
   SOIRÉES
   ========================================================= */

.calendar-day.has-event {
    z-index: 1;

    display: flex;
    flex-direction: column;

    padding: 13px;

    background: var(--white);
}

.calendar-day.has-event::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;

    height: 4px;

    content: "";
}

.calendar-event {
    display: flex;
    flex: 1;
    flex-direction: column;

    margin-top: 13px;
}

.calendar-event-status {
    display: flex;
    align-items: center;
    gap: 7px;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.calendar-event-dot {
    flex: 0 0 auto;

    width: 7px;
    height: 7px;

    border-radius: 50%;
}

.calendar-event-places {
    display: block;

    margin-top: 11px;

    color: var(--green-dark);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(16px, 1.5vw, 21px);
    font-weight: 500;
    line-height: 1.15;
}

.calendar-event-places span {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 11px;
    font-weight: 700;
}

.calendar-event-action {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: auto;
    padding-top: 13px;

    border-top: 1px solid rgba(20, 63, 51, 0.08);

    color: var(--green-dark);

    font-size: 11px;
    font-weight: 800;

    transition:
        color 0.25s ease,
        padding-left 0.25s ease;
}

.calendar-event-action > span {
    font-size: 16px;

    transition: transform 0.25s ease;
}


/* =========================================================
   DISPONIBLE
   ========================================================= */

.calendar-day.is-disponible {
    background:
        linear-gradient(
            150deg,
            #ffffff 0%,
            #f1f7f3 100%
        );
}

.calendar-day.is-disponible::before {
    background: var(--available);
}

.calendar-day.is-disponible .calendar-event-dot {
    background: var(--available);

    box-shadow:
        0 0 0 4px rgba(59, 142, 105, 0.1);
}

.calendar-day.is-disponible .calendar-event-status {
    color: #39795c;
}


/* =========================================================
   PRESQUE COMPLET
   ========================================================= */

.calendar-day.is-presque-complet {
    background:
        linear-gradient(
            150deg,
            #ffffff 0%,
            #fff6e8 100%
        );
}

.calendar-day.is-presque-complet::before {
    background: var(--low);
}

.calendar-day.is-presque-complet .calendar-event-dot {
    background: var(--low);

    box-shadow:
        0 0 0 4px rgba(215, 150, 53, 0.1);
}

.calendar-day.is-presque-complet
.calendar-event-status {
    color: #a96e18;
}

.calendar-day.is-presque-complet
.calendar-event-places {
    color: #986217;
}


/* =========================================================
   COMPLET
   ========================================================= */

.calendar-day.is-complet {
    background:
        linear-gradient(
            150deg,
            #fffafa,
            var(--full-soft)
        );
}

.calendar-day.is-complet::before {
    background: var(--full);
}

.calendar-day.is-complet .calendar-event-dot {
    background: var(--full);
}

.calendar-day.is-complet
.calendar-event-status {
    color: var(--full);
}

.calendar-event-unavailable {
    margin-top: 12px;

    color: var(--text-light);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 18px;
    font-weight: 500;
}


/* =========================================================
   BLOQUÉ
   ========================================================= */

.calendar-day.is-bloque {
    background:
        linear-gradient(
            150deg,
            #f6f6f4,
            var(--blocked-soft)
        );
}

.calendar-day.is-bloque::before {
    background: var(--blocked);
}

.calendar-day.is-bloque .calendar-event-dot {
    background: var(--blocked);
}

.calendar-day.is-bloque
.calendar-event-status {
    color: var(--blocked);
}


/* =========================================================
   SURVOL DES SOIRÉES CLIQUABLES
   ========================================================= */

a.calendar-day.has-event:hover {
    z-index: 5;

    border-color:
        rgba(198, 143, 61, 0.55);

    background: #fffdf9;

    box-shadow:
        0 18px 38px rgba(20, 63, 51, 0.17),
        0 0 0 2px rgba(198, 143, 61, 0.11);

    transform:
        translateY(-5px)
        scale(1.015);
}

a.calendar-day.has-event:hover
.calendar-event-action {
    color: var(--gold-dark);
}

a.calendar-day.has-event:hover
.calendar-event-action > span {
    transform: translateX(4px);
}

a.calendar-day.has-event:active {
    transform:
        translateY(-1px)
        scale(0.995);
}


/* =========================================================
   MOIS SANS SOIRÉE
   ========================================================= */

.calendar-empty {
    max-width: 720px;
    margin: 38px auto 0;
    padding: 28px;

    border: 1px solid var(--border);
    border-radius: 20px;

    background: rgba(255, 255, 255, 0.64);

    text-align: center;
}

.calendar-empty-line {
    display: block;

    width: 45px;
    height: 2px;

    margin: 0 auto 18px;

    background: var(--gold);
}

.calendar-empty h3 {
    margin: 0 0 10px;

    color: var(--green-dark);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 25px;
    font-weight: 500;
}

.calendar-empty p {
    max-width: 580px;
    margin: auto;

    color: var(--text-light);

    font-size: 14px;
    line-height: 1.7;
}


/* =========================================================
   LISTE D'ATTENTE
   ========================================================= */

.calendar-waitlist {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 20px;
    align-items: center;

    max-width: 900px;
    margin: 42px auto 0;
    padding: 25px 29px;

    border: 1px solid rgba(198, 143, 61, 0.3);
    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #fffaf2,
            #f3e7d5
        );

    box-shadow:
        0 13px 32px rgba(20, 63, 51, 0.07);
}

.calendar-waitlist-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 50px;
    height: 50px;

    border-radius: 50%;

    background: var(--gold);

    color: var(--white);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 23px;
    font-weight: 700;

    box-shadow:
        0 9px 22px rgba(198, 143, 61, 0.23);
}

.calendar-waitlist-content h3 {
    margin: 0 0 7px;

    color: var(--green-dark);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 19px;
    font-weight: 500;
    line-height: 1.3;
}

.calendar-waitlist-content p {
    margin: 0;

    color: var(--text-light);

    font-size: 13px;
    line-height: 1.65;
}

.calendar-waitlist-content strong {
    color: var(--green-dark);
}


/* =========================================================
   PIED DE PAGE
   ========================================================= */

.calendar-footer {
    padding-top: 35px;

    text-align: center;
}

.calendar-footer-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 45px;
    padding: 10px 18px;

    border-bottom: 1px solid rgba(20, 63, 51, 0.24);

    color: var(--green-dark);

    font-size: 13px;
    font-weight: 700;
    text-decoration: none;

    transition:
        color 0.2s ease,
        border-color 0.2s ease;
}

.calendar-footer-link:hover {
    border-color: var(--gold);

    color: var(--gold-dark);
}


/* =========================================================
   ANIMATION D'ARRIVÉE
   ========================================================= */

@keyframes calendarReveal {

    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

.calendar-main {
    animation:
        calendarReveal
        0.65s
        cubic-bezier(0.2, 0.7, 0.2, 1)
        both;
}


/* =========================================================
   TABLETTES
   ========================================================= */

@media (max-width: 1050px) {

    .calendar-main {
        padding:
            45px
            32px
            38px;
    }

    .calendar-day {
        min-height: 145px;
        padding: 12px;
    }

    .calendar-day.has-event {
        padding: 11px;
    }

    .calendar-event-places {
        font-size: 17px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

    body {
        background-attachment: scroll;
    }

    .calendar-page {
        padding: 12px;
    }

    .calendar-topbar {
        margin-bottom: 12px;
    }

    .calendar-brand {
        font-size: 17px;
    }

    .calendar-brand span {
        display: none;
    }

    .calendar-back {
        min-height: 42px;
        padding: 9px 14px;

        font-size: 12px;
    }

    .calendar-main {
        padding:
            35px
            16px
            27px;

        border-radius: 23px;
    }

    .calendar-intro {
        margin-bottom: 37px;
    }

    .calendar-intro h1 {
        font-size: clamp(38px, 12vw, 53px);
    }

    .calendar-intro-text {
        margin-top: 18px;

        font-size: 14px;
        line-height: 1.7;
    }


    /* Navigation mois */

    .calendar-month-navigation {
        grid-template-columns: 48px 1fr 48px;
        gap: 9px;

        margin-bottom: 22px;
    }

    .calendar-month-arrow {
        width: 46px;
        height: 46px;

        font-size: 19px;
    }

    .calendar-month-title h2 {
        font-size: 27px;
    }

    .calendar-month-label {
        font-size: 8px;
    }


    /* Résumé */

    .calendar-summary {
        gap: 16px;

        margin-bottom: 22px;
    }

    .calendar-summary-item {
        display: block;

        font-size: 10px;
        text-align: center;
    }

    .calendar-summary-item strong {
        display: block;

        margin-bottom: 2px;

        font-size: 20px;
    }


    /* Légende */

    .calendar-legend {
        justify-content: flex-start;

        gap: 11px 18px;

        padding: 14px 15px;

        overflow: hidden;
    }

    .calendar-legend-item {
        font-size: 10px;
    }


    /*
    |--------------------------------------------------------------------------
    | Calendrier mobile
    |--------------------------------------------------------------------------
    |
    | On conserve les sept colonnes.
    | Le calendrier devient scrollable horizontalement.
    |
    */

    .calendar-wrapper {
        overflow-x: auto;

        border-radius: 18px;

        -webkit-overflow-scrolling: touch;

        scrollbar-width: thin;
        scrollbar-color:
            rgba(20, 63, 51, 0.25)
            transparent;
    }

    .calendar-weekdays,
    .calendar-grid {
        min-width: 805px;
    }

    .calendar-weekday {
        padding: 14px 8px;

        font-size: 9px;
    }

    .calendar-day {
        min-height: 137px;
    }

    .calendar-day-number {
        font-size: 12px;
    }

    .calendar-event {
        margin-top: 8px;
    }

    .calendar-event-status {
        font-size: 8px;
    }

    .calendar-event-places {
        margin-top: 9px;

        font-size: 15px;
    }

    .calendar-event-places span {
        font-size: 9px;
    }

    .calendar-event-action {
        padding-top: 10px;

        font-size: 9px;
    }

    /*
    On neutralise le grossissement au survol sur écran tactile.
    */

    a.calendar-day.has-event:hover {
        transform: none;
    }


    /* Liste attente */

    .calendar-waitlist {
        grid-template-columns: 1fr;

        margin-top: 30px;
        padding: 22px 18px;

        text-align: center;
    }

    .calendar-waitlist-number {
        margin: auto;
    }

    .calendar-waitlist-content h3 {
        font-size: 18px;
    }

}


/* =========================================================
   TRÈS PETITS ÉCRANS
   ========================================================= */

@media (max-width: 430px) {

    .calendar-brand {
        display: none;
    }

    .calendar-topbar {
        justify-content: flex-start;
    }

    .calendar-intro h1 {
        font-size: 40px;
    }

    .calendar-summary {
        align-items: stretch;
    }

    .calendar-summary-separator {
        height: auto;
    }

}


/* =========================================================
   ACCESSIBILITÉ / RÉDUCTION DES ANIMATIONS
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

}

/* =========================================================
   FINITIONS CALENDRIER V2
   ========================================================= */

/* Partie haute plus compacte */

.calendar-main {
    padding-top: 42px;
}

.calendar-intro {
    margin-bottom: 38px;
}

.calendar-intro h1 {
    font-size: clamp(44px, 5.5vw, 68px);
}

.calendar-intro-text {
    max-width: 680px;
    margin-top: 18px;
}

.calendar-month-navigation {
    margin-bottom: 20px;
}

.calendar-summary {
    margin-bottom: 20px;
}

.calendar-legend {
    margin-bottom: 24px;
}


/* Mois plus affirmé */

.calendar-month-title h2 {
    font-size: clamp(32px, 4vw, 46px);
}

.calendar-month-arrow {
    width: 60px;
    height: 60px;
}


/* Jours sans soirée : beaucoup plus discrets */

.calendar-day:not(.has-event) {
    background: rgba(255, 255, 255, 0.22);
}

.calendar-day:not(.has-event) .calendar-day-number {
    color: rgba(20, 63, 51, 0.58);
}

.calendar-day.is-outside-month .calendar-day-number {
    color: rgba(20, 63, 51, 0.18);
}


/* Cases légèrement moins hautes */

.calendar-day {
    min-height: 145px;
}


/* Soirées disponibles : un peu plus présentes */

.calendar-day.has-event {
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.calendar-day.is-disponible {
    background:
        linear-gradient(
            150deg,
            #ffffff 0%,
            #eef7f2 100%
        );
}

.calendar-day.is-presque-complet {
    background:
        linear-gradient(
            150deg,
            #ffffff 0%,
            #fff1dc 100%
        );
}


/* Jour de la soirée un peu plus visible */

.calendar-day.has-event .calendar-day-number {
    font-size: 16px;
}


/* Texte "Réserver" plus premium */

.calendar-event-action {
    color: var(--green-dark);
    letter-spacing: 0.02em;
}

a.calendar-day.has-event:hover .calendar-event-action {
    color: var(--gold-dark);
}


/* Liste d'attente un peu plus légère */

.calendar-waitlist {
    margin-top: 34px;
    padding: 22px 26px;
}


/* Footer */

.calendar-footer {
    padding-top: 28px;
}

/* =========================================================
   CALENDRIER V2 — PROFONDEUR + FORMAT COMPACT
   ========================================================= */

/*
|--------------------------------------------------------------------------
| Bloc calendrier complet
|--------------------------------------------------------------------------
*/

.calendar-wrapper {
    overflow-x: auto;
    overflow-y: hidden;

    border: 1px solid rgba(20, 63, 51,.18);
    border-radius: 24px;

    background:#dde3dd;

    box-shadow:
        0 35px 70px rgba(20, 63, 51,.18),
        0 10px 22px rgba(20, 63, 51,.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);

    -webkit-overflow-scrolling: touch;
}

.calendar-scroll {
    position: relative;
}

.calendar-scroll::before,
.calendar-scroll::after {
    content: "";

    position: absolute;
    top: 0;
    bottom: 0;

    width: 28px;

    pointer-events: none;

    z-index: 20;

}

.calendar-scroll::before {
    left: 0;

    background: linear-gradient(
        to right,
        #dde3dd,
        rgba(221,227,221,0)
    );
}

.calendar-scroll::after {
    right: 0;

    background: linear-gradient(
        to left,
        #dde3dd,
        rgba(221,227,221,0)
    );
}

@media (min-width: 701px) {

    .calendar-scroll::before,
    .calendar-scroll::after {
        display: none;
    }

}

/*
|--------------------------------------------------------------------------
| Bandeau LUN / MAR / MER...
|--------------------------------------------------------------------------
*/

.calendar-weekdays {
    background:
        linear-gradient(
            180deg,
            #dce5e0 0%,
            #d3ddd8 100%
        );

    border-bottom: 1px solid rgba(20, 63, 51, 0.16);
}

.calendar-weekday {
    padding: 16px 10px;

    color: #143f33;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.15em;
}


/*
|--------------------------------------------------------------------------
| Grille
|--------------------------------------------------------------------------
*/

.calendar-grid {
    background: #d9dfda;
}


/*
|--------------------------------------------------------------------------
| Cases normales — beaucoup moins hautes
|--------------------------------------------------------------------------
*/

.calendar-day {
    min-height: 118px;
    padding: 13px 14px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.88),
            rgba(247,246,242,.94)
        );

    border-right: 1px solid rgba(20, 63, 51,.13);
    border-bottom: 1px solid rgba(20, 63, 51,.13);
}


/*
|--------------------------------------------------------------------------
| Jours sans soirée
|--------------------------------------------------------------------------
*/

.calendar-day:not(.has-event) {
    background:
        linear-gradient(
            145deg,
            #f7f7f3 0%,
            #f1f2ee 100%
        );
}

.calendar-day:not(.has-event)
.calendar-day-number {
    color: rgba(20, 63, 51, 0.68);
}


/*
|--------------------------------------------------------------------------
| Jours du mois précédent / suivant
|--------------------------------------------------------------------------
*/

.calendar-day.is-outside-month {
    background:
        linear-gradient(
            145deg,
            #f0f1ed,
            #e9ebe7
        );
}

.calendar-day.is-outside-month
.calendar-day-number {
    color: rgba(20, 63, 51, 0.22);
}


/*
|--------------------------------------------------------------------------
| Cases contenant une soirée
|--------------------------------------------------------------------------
*/

.calendar-day.has-event {
    min-height: 118px;
    padding: 12px 14px;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.75);
}


/* Disponible */

.calendar-day.is-disponible {
    background:
        linear-gradient(
            145deg,
            #f9fffb 0%,
            #eaf5ef 100%
        );
}


/* Dernières places */

.calendar-day.is-presque-complet {
    background:
        linear-gradient(
            145deg,
            #fffdf8 0%,
            #fff0dc 100%
        );
}


/* Complet */

.calendar-day.is-complet {
    background:
        linear-gradient(
            145deg,
            #faf7f5,
            #f2e5e2
        );
}


/* Indisponible */

.calendar-day.is-bloque {
    background:
        linear-gradient(
            145deg,
            #f3f3ef,
            #e7e8e3
        );
}


/*
|--------------------------------------------------------------------------
| Contenu des soirées plus compact
|--------------------------------------------------------------------------
*/

.calendar-event {
    margin-top: 7px;
}

.calendar-event-status {
    font-size: 9px;
}

.calendar-event-places {
    margin-top: 8px;

    font-size: 19px;
    line-height: 1.05;
}

.calendar-event-action {
    margin-top: auto;
    padding-top: 8px;

    font-size: 10px;
}


/*
|--------------------------------------------------------------------------
| Date
|--------------------------------------------------------------------------
*/

.calendar-day-number {
    min-width: auto;
    height: auto;

    font-size: 13px;
}

.calendar-day.has-event
.calendar-day-number {
    font-size: 17px;
}


/*
|--------------------------------------------------------------------------
| Hover soirée
|--------------------------------------------------------------------------
*/

a.calendar-day.has-event:hover {
    z-index: 10;

    border-color: rgba(198, 143, 61, 0.55);

    box-shadow:
        0 18px 35px rgba(20, 63, 51,.16),
        0 0 0 2px rgba(198, 143, 61, 0.11);

    transform:
        translateY(-4px)
        scale(1.01);
}


/*
|--------------------------------------------------------------------------
| Liste d'attente rapprochée
|--------------------------------------------------------------------------
*/

.calendar-waitlist {
    margin-top: 30px;
}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 760px) {

    .calendar-weekdays,
    .calendar-grid {
        min-width: 760px;
    }

    .calendar-day {
        min-height: 112px;
    }

    .calendar-day.has-event {
        min-height: 112px;
    }

}

/* Carte soirée détachée dans la cellule */

.calendar-day.has-event {
    position: relative;
}

.calendar-day-top {
    position: relative;
    z-index: 2;
}

.calendar-event {
    margin-top: 12px;
    padding: 16px;

    border-radius: 14px;

    box-shadow:
        0 14px 30px rgba(22,52,42,.08),
        0 2px 8px rgba(22,52,42,.05);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

a.calendar-day.has-event:hover .calendar-event {
    transform: translateY(-4px);

    box-shadow:
        0 24px 45px rgba(20,63,51,.18);
}

/* =========================================================
   CALENDRIER - SOIRÉES DE FÊTES
========================================================= */

.calendar-day.is-festive {
    position: relative;

    overflow: hidden;

    border-color: rgba(224, 166, 83, .65);

    background:
        linear-gradient(
            145deg,
            #123f34 0%,
            #174f40 100%
        );

    box-shadow:
        0 10px 25px rgba(18, 63, 52, .18),
        inset 0 0 0 1px rgba(224, 166, 83, .12);
}


/* Liseré doré */

.calendar-day.is-festive::before {
    content: "";

    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;

    height: 3px;

    border-radius: 0 0 4px 4px;

    background: #e0a653;
}


/* Numéro du jour */

.calendar-day.is-festive .calendar-day-number {
    color: #f7f4ec;
}


/* Nom de la soirée */

.calendar-festive-label {
    margin-bottom: 10px;
}

.calendar-festive-eyebrow {
    display: block;

    margin-bottom: 3px;

    color: #e0a653;

    font-size: 9px;
    font-weight: 700;

    line-height: 1.2;

    text-transform: uppercase;
    letter-spacing: .10em;
}

.calendar-festive-label strong {
    display: block;

    color: #f7f4ec;

    font-size: 14px;
    font-weight: 700;

    line-height: 1.25;
}


/* Disponibilité */

.calendar-day.is-festive .calendar-event-status {
    color: rgba(247, 244, 236, .78);
}

.calendar-day.is-festive .calendar-event-places {
    color: #f7f4ec;
}

.calendar-day.is-festive .calendar-event-places span {
    color: rgba(247, 244, 236, .72);
}


/* Bouton Réserver */

.calendar-day.is-festive .calendar-event-action {
    color: #e0a653;
}


/* Hover */

@media (hover: hover) {

    a.calendar-day.is-festive:hover {
        transform: translateY(-4px);

        border-color: #e0a653;

        box-shadow:
            0 16px 32px rgba(18, 63, 52, .26),
            inset 0 0 0 1px rgba(224, 166, 83, .20);
    }

}
.calendar-day {
    scroll-margin-top: 120px;
}