/* =========================================================
   CHALET 2000 — SITE PUBLIC V2
   ========================================================= */

:root {
    --green-dark: #173f33;
    --green: #235744;
    --green-light: #3f8065;

    --wood-dark: #6f3f1f;
    --wood: #9a602f;
    --wood-light: #c58b52;

    --beige: #f4efe5;
    --beige-light: #fbf8f1;
    --beige-dark: #e4dac8;

    --white: #ffffff;
    --black: #15221d;
    --text: #32443d;
    --text-light: #6c7b74;

    --gold: #c69752;

    --border: rgba(23, 63, 51, 0.14);
    --shadow: 0 18px 45px rgba(24, 52, 42, 0.12);

    --container: 1180px;
    --header-height: 84px;

    --radius-small: 12px;
    --radius: 22px;
    --radius-large: 34px;
}

/* =========================================================
   RÉINITIALISATION
   ========================================================= */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    min-width: 320px;
    background: var(--beige-light);
    color: var(--text);
    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
}

body.menu-open {
    overflow: hidden;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

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

button {
    color: inherit;
}

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

/* =========================================================
   STRUCTURE GÉNÉRALE
   ========================================================= */

.section {
    padding: 110px 0;
}

.section-container {
    width: min(calc(100% - 40px), var(--container));
    margin: 0 auto;
}

.section-eyebrow {
    margin-bottom: 14px;
    color: var(--gold);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 50px;
}

.section-heading h2,
.experience-content h2,
.faq-introduction h2,
.final-booking-content h2 {
    color: var(--green-dark);
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size: clamp(38px, 5vw, 66px);
    font-weight: 500;
    line-height: 1.04;
}

.section-heading > div {
    max-width: 720px;
}

.section-heading-centered {
    display: block;
    max-width: 760px;
    margin: 0 auto 58px;
    text-align: center;
}

.section-heading-centered p:last-child {
    max-width: 650px;
    margin: 22px auto 0;
    color: var(--text-light);
    font-size: 18px;
}

/* =========================================================
   BOUTONS
   ========================================================= */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 15px 26px;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.01em;
    transition:
        transform 0.2s ease,
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.button:hover {
    transform: translateY(-2px);
}

.button-primary {
    background: var(--green-dark);
    color: var(--white);
    box-shadow: 0 12px 28px rgba(23, 63, 51, 0.28);
}

.button-primary:hover {
    background: var(--green);
    box-shadow: 0 16px 34px rgba(23, 63, 51, 0.35);
}

.button-secondary {
    border-color: rgba(255, 255, 255, 0.48);
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
    backdrop-filter: blur(8px);
}

.button-secondary:hover {
    background: var(--white);
    color: var(--green-dark);
}

.button-light {
    background: var(--white);
    color: var(--green-dark);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.button-light:hover {
    background: var(--beige);
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--green-dark);
    font-weight: 800;
}

.text-link span {
    transition: transform 0.2s ease;
}

.text-link:hover span {
    transform: translateX(5px);
}

/* =========================================================
   EN-TÊTE
   ========================================================= */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: var(--header-height);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(16, 40, 32, 0.18);
    backdrop-filter: blur(10px);
    transition:
        background 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.site-header.is-scrolled {
    border-bottom-color: var(--border);
    background: rgba(251, 248, 241, 0.96);
    box-shadow: 0 10px 30px rgba(23, 63, 51, 0.08);
}

.site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(calc(100% - 40px), var(--container));
    height: 100%;
    margin: 0 auto;
}

.site-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--white);
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size: 22px;
    font-weight: 700;
}

.site-header.is-scrolled .site-logo {
    color: var(--green-dark);
}

.site-logo img {
    width: 70px;
    height: 70px;
    border: 2px solid rgba(255, 255, 255, 0.65);
    border-radius: 50%;
    object-fit: cover;
}

.site-header.is-scrolled .site-logo img {
    border-color: var(--beige-dark);
}

.site-navigation {
    display: flex;
    align-items: center;
    gap: 28px;
}

.site-navigation a,
.site-navigation .navigation-menu-link {
    position: relative;
    color: var(--white);
    font-size: 14px;
    font-weight: 700;
}

.site-header.is-scrolled .site-navigation a,
.site-header.is-scrolled .site-navigation .navigation-menu-link {
    color: var(--green-dark);
}

.site-navigation a:not(.navigation-booking-button)::after {
    position: absolute;
    right: 0;
    bottom: -7px;
    left: 0;
    height: 2px;
    border-radius: 99px;
    background: currentColor;
    content: "";
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.2s ease;
}

.site-navigation a:hover::after {
    transform: scaleX(1);
}

.navigation-booking-button {
    padding: 11px 20px;
    border-radius: 999px;
    background: var(--white);
    color: var(--green-dark) !important;
}

.site-header.is-scrolled .navigation-booking-button {
    background: var(--green-dark);
    color: var(--white) !important;
}

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.mobile-menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    margin: 0 auto;
    border-radius: 99px;
    background: var(--white);
    transition:
        transform 0.2s ease,
        opacity 0.2s ease,
        background 0.2s ease;
}

.site-header.is-scrolled .mobile-menu-toggle span {
    background: var(--green-dark);
}

/* =========================================================
   HERO
   ========================================================= */

.hero-section {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100vh;
    padding: calc(var(--header-height) + 80px) 20px 100px;
    overflow: hidden;
    background:
        linear-gradient(
            90deg,
            rgba(12, 36, 28, 0.78) 0%,
            rgba(12, 36, 28, 0.48) 48%,
            rgba(12, 36, 28, 0.2) 100%
        ),
        url("../../images/hero-chalet.jpg") center / cover no-repeat;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 75% 35%,
            rgba(255, 255, 255, 0.08),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            rgba(8, 25, 19, 0.08),
            rgba(8, 25, 19, 0.4)
        );
}

.hero-content {
    position: relative;
    z-index: 2;
    width: min(100%, var(--container));
    margin: 0 auto;
}

.hero-eyebrow {
    margin-bottom: 20px;
    color: #e4c08b;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.hero-content h1 {
    max-width: 790px;
    color: var(--white);
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size: clamp(68px, 11vw, 150px);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 0.82;
    text-shadow: 0 14px 40px rgba(0, 0, 0, 0.28);
}

.hero-description {
    max-width: 590px;
    margin-top: 38px;
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(18px, 2vw, 23px);
    line-height: 1.55;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 38px;
}

.hero-scroll {
    position: absolute;
    bottom: 28px;
    left: 50%;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    transform: translateX(-50%);
}

.hero-scroll-arrow {
    font-size: 22px;
    animation: heroArrow 1.6s ease-in-out infinite;
}

@keyframes heroArrow {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(7px);
    }
}

/* =========================================================
   EXPÉRIENCE
   ========================================================= */

.experience-section {
    background: var(--beige-light);
}

.experience-grid {
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    gap: 85px;
    align-items: center;
}

.experience-content {
    max-width: 530px;
}

.experience-content h2 {
    margin-bottom: 28px;
}

.section-introduction {
    margin-bottom: 22px;
    color: var(--green-dark);
    font-size: 21px;
    font-weight: 700;
}

.experience-content p:not(.section-eyebrow) {
    margin-bottom: 20px;
}

.experience-content .text-link {
    margin-top: 14px;
}

.experience-image {
    position: relative;
}

.experience-image::before {
    position: absolute;
    top: -24px;
    right: -24px;
    bottom: 32px;
    left: 36px;
    z-index: 0;
    border: 1px solid var(--gold);
    border-radius: var(--radius-large);
    content: "";
}

.experience-image img {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 570px;
    border-radius: var(--radius-large);
    object-fit: cover;
    box-shadow: var(--shadow);
}

.experience-image-label {
    position: absolute;
    right: -26px;
    bottom: 46px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    min-width: 150px;
    padding: 22px 24px;
    border-radius: var(--radius);
    background: var(--green-dark);
    color: var(--white);
    box-shadow: 0 16px 38px rgba(23, 63, 51, 0.3);
}

.experience-image-label strong {
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size: 38px;
    line-height: 1;
}

.experience-image-label span {
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 14px;
}

/* =========================================================
   PROGRAMME
   ========================================================= */

.programme-section {
    background: var(--green-dark);
    color: rgba(255, 255, 255, 0.82);
}

.programme-section .section-eyebrow {
    color: #e2bd87;
}

.programme-section .section-heading h2 {
    color: var(--white);
}

.programme-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.programme-card {
    position: relative;
    min-height: 390px;
    padding: 40px 34px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: var(--radius);
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.08),
            rgba(255, 255, 255, 0.02)
        );
    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease;
}

.programme-card:hover {
    border-color: rgba(226, 189, 135, 0.56);
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.12),
            rgba(255, 255, 255, 0.04)
        );
    transform: translateY(-8px);
}

.programme-number {
    position: absolute;
    top: 22px;
    right: 25px;
    color: rgba(255, 255, 255, 0.12);
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size: 72px;
    line-height: 1;
}

.programme-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    margin-bottom: 54px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.1);
    font-size: 31px;
}

.programme-card h3 {
    margin-bottom: 17px;
    color: var(--white);
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size: 29px;
    font-weight: 500;
}

.programme-card p {
    color: rgba(255, 255, 255, 0.72);
}

/* =========================================================
   BANDEAU PHOTO
   ========================================================= */

.highlight-section {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 650px;
    padding: 110px 0;
    background:
        url("../../images/terrasse-nuit.jpg")
        center 58% / cover no-repeat;
}

.highlight-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(12, 35, 27, 0.85),
            rgba(12, 35, 27, 0.24)
        );
}

.highlight-content {
    position: relative;
    z-index: 2;
}

.highlight-content > p {
    margin-bottom: 18px;
    color: #e3bd86;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.highlight-content h2 {
    max-width: 760px;
    margin-bottom: 34px;
    color: var(--white);
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size: clamp(45px, 7vw, 84px);
    font-weight: 500;
    line-height: 1.03;
}

/* =========================================================
   DISPONIBILITÉS
   ========================================================= */

.availability-section {
    background: var(--beige);
}

.availability-grid {
    display: grid;
    gap: 15px;
}

.availability-card {
    display: grid;
    grid-template-columns: minmax(260px, 1.4fr) 1fr auto;
    gap: 28px;
    align-items: center;
    padding: 22px 26px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--white);
    box-shadow: 0 8px 24px rgba(23, 63, 51, 0.06);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.availability-card:hover {
    border-color: rgba(23, 63, 51, 0.28);
    box-shadow: 0 14px 34px rgba(23, 63, 51, 0.1);
    transform: translateY(-2px);
}

.availability-card.is-full {
    opacity: 0.7;
}

.availability-date {
    display: flex;
    align-items: center;
    gap: 18px;
}

.availability-day {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 66px;
    width: 66px;
    height: 66px;
    border-radius: 16px;
    background: var(--beige);
    color: var(--green-dark);
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size: 30px;
    font-weight: 700;
}

.availability-date > span:last-child {
    color: var(--green-dark);
    font-size: 17px;
    font-weight: 800;
}

.availability-status {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.availability-status small {
    color: var(--text-light);
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.status-badge::before {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    content: "";
}

.status-available {
    background: #e8f8ef;
    color: #187744;
}

.status-available::before {
    background: #23b462;
}

.status-full {
    background: #f9e6e3;
    color: #a43a31;
}

.status-full::before {
    background: #dd5145;
}

.availability-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    padding: 12px 19px;
    border-radius: 999px;
    background: var(--green-dark);
    color: var(--white);
    font-weight: 800;
    transition:
        transform 0.2s ease,
        background 0.2s ease;
}

.availability-button:hover {
    background: var(--green);
    transform: translateY(-2px);
}

.availability-disabled {
    min-width: 120px;
    padding: 12px 19px;
    color: var(--text-light);
    font-weight: 700;
    text-align: center;
}

.availability-empty {
    max-width: 720px;
    margin: 0 auto;
    padding: 55px 35px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--white);
    text-align: center;
    box-shadow: var(--shadow);
}

.availability-empty-icon {
    margin-bottom: 18px;
    font-size: 48px;
}

.availability-empty h3 {
    margin-bottom: 12px;
    color: var(--green-dark);
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size: 30px;
}

.availability-empty p {
    margin-bottom: 26px;
    color: var(--text-light);
}

/* =========================================================
   INFORMATIONS
   ========================================================= */

.information-section {
    padding-top: 85px;
    padding-bottom: 85px;
    background: var(--beige-light);
}

.information-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.information-card {
    padding: 34px 30px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--white);
}

.information-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 24px;
    border-radius: 16px;
    background: var(--beige);
    font-size: 27px;
}

.information-card h3 {
    margin-bottom: 12px;
    color: var(--green-dark);
    font-size: 20px;
}

.information-card p {
    color: var(--text-light);
}

/* =========================================================
   FAQ
   ========================================================= */

.faq-section {
    background: var(--white);
}

.faq-layout {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 90px;
    align-items: start;
}

.faq-introduction {
    position: sticky;
    top: 130px;
}

.faq-introduction h2 {
    margin-bottom: 24px;
}

.faq-introduction > p:not(.section-eyebrow) {
    max-width: 390px;
    margin-bottom: 24px;
    color: var(--text-light);
}

.faq-list {
    border-top: 1px solid var(--border);
}

.faq-item {
    border-bottom: 1px solid var(--border);
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    padding: 25px 0;
    border: 0;
    background: transparent;
    color: var(--green-dark);
    cursor: pointer;
    font-size: 18px;
    font-weight: 800;
    text-align: left;
}

.faq-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 50%;
    font-size: 22px;
    font-weight: 400;
    transition:
        transform 0.2s ease,
        background 0.2s ease,
        color 0.2s ease;
}

.faq-question[aria-expanded="true"] .faq-plus {
    background: var(--green-dark);
    color: var(--white);
    transform: rotate(45deg);
}

.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 0.28s ease;
}

.faq-item.is-open .faq-answer {
    grid-template-rows: 1fr;
}

.faq-answer p {
    min-height: 0;
    padding: 0 56px 0 0;
    color: var(--text-light);
}

.faq-item.is-open .faq-answer p {
    padding-bottom: 25px;
}

/* =========================================================
   APPEL À RÉSERVATION
   ========================================================= */

.final-booking-section {
    padding: 85px 0;
    background:
        linear-gradient(
            125deg,
            var(--green-dark),
            #2a654f
        );
}

.final-booking-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.final-booking-content .section-eyebrow {
    color: #e3bd86;
}

.final-booking-content h2 {
    max-width: 750px;
    color: var(--white);
}

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

.site-footer {
    background: #102d24;
    color: rgba(255, 255, 255, 0.74);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 0.8fr 1fr;
    gap: 70px;
    padding-top: 70px;
    padding-bottom: 65px;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 17px;
}

.footer-brand img {
    width: 70px;
    height: 70px;
    border: 2px solid rgba(255, 255, 255, 0.26);
    border-radius: 50%;
    object-fit: cover;
}

.footer-brand div {
    display: flex;
    flex-direction: column;
}

.footer-brand strong {
    color: var(--white);
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size: 26px;
}

.footer-brand span {
    color: rgba(255, 255, 255, 0.56);
}

.footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.footer-column h3 {
    margin-bottom: 8px;
    color: var(--white);
    font-size: 15px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.footer-column a:hover {
    color: var(--white);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom .section-container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding-top: 22px;
    padding-bottom: 22px;
    color: rgba(255, 255, 255, 0.46);
    font-size: 13px;
}

/* =========================================================
   ANIMATIONS AU DÉFILEMENT
   ========================================================= */

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity 0.75s ease,
        transform 0.75s ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

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

@media (max-width: 1050px) {
    .site-navigation {
        gap: 18px;
    }

    .site-navigation a {
        font-size: 13px;
    }

    .experience-grid {
        gap: 50px;
    }

    .programme-card {
        padding: 35px 25px;
    }

    .faq-layout {
        gap: 55px;
    }
}

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

@media (max-width: 850px) {
    :root {
        --header-height: 72px;
    }

    .section {
        padding: 80px 0;
    }

    .mobile-menu-toggle {
        display: flex;
        z-index: 1002;
    }

    .site-navigation {
        position: fixed;
        z-index: 1001;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 26px;
        padding: 100px 30px 50px;
        background: rgba(16, 45, 36, 0.98);
        opacity: 0;
        pointer-events: none;
        transform: translateY(-12px);
        transition:
            opacity 0.2s ease,
            transform 0.2s ease;
    }

    .site-navigation.is-open {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    .site-navigation a,
    .site-header.is-scrolled .site-navigation a {
        color: var(--white);
        font-size: 21px;
    }

    .navigation-booking-button,
    .site-header.is-scrolled .navigation-booking-button {
        margin-top: 8px;
        padding: 14px 28px;
        background: var(--white);
        color: var(--green-dark) !important;
    }

    .mobile-menu-toggle.is-open span {
        background: var(--white);
    }

    .mobile-menu-toggle.is-open span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .mobile-menu-toggle.is-open span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-toggle.is-open span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .hero-section {
        min-height: 850px;
        padding-bottom: 90px;
        background-position: center;
    }

    .hero-content h1 {
        font-size: clamp(61px, 18vw, 105px);
    }

    .hero-description {
        max-width: 480px;
    }

    .experience-grid,
    .faq-layout {
        grid-template-columns: 1fr;
    }

    .experience-grid {
        gap: 60px;
    }

    .experience-content {
        max-width: none;
    }

    .experience-image img {
        min-height: 470px;
    }

    .experience-image-label {
        right: 20px;
        bottom: -25px;
    }

    .programme-grid,
    .information-grid {
        grid-template-columns: 1fr;
    }

    .programme-card {
        min-height: auto;
    }

    .programme-icon {
        margin-bottom: 35px;
    }

    .section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 20px;
    }

    .availability-card {
        grid-template-columns: 1fr auto;
    }

    .availability-status {
        grid-column: 1;
    }

    .availability-button,
    .availability-disabled {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .faq-introduction {
        position: static;
    }

    .final-booking-content {
        align-items: flex-start;
        flex-direction: column;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    .section-container,
    .site-header-inner {
        width: min(calc(100% - 28px), var(--container));
    }

    .site-logo span {
        font-size: 19px;
    }

    .site-logo img {
        width: 46px;
        height: 46px;
    }

    .hero-section {
        min-height: 780px;
        padding-right: 14px;
        padding-left: 14px;
    }

    .hero-eyebrow {
        font-size: 11px;
    }

    .hero-content h1 {
        font-size: clamp(55px, 20vw, 86px);
    }

    .hero-description {
        margin-top: 28px;
        font-size: 17px;
    }

    .hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .hero-actions .button {
        width: 100%;
    }

    .section-heading h2,
    .experience-content h2,
    .faq-introduction h2,
    .final-booking-content h2 {
        font-size: 40px;
    }

    .experience-image::before {
        display: none;
    }

    .experience-image img {
        min-height: 390px;
        border-radius: 22px;
    }

    .experience-image-label {
        right: 14px;
        bottom: -26px;
        min-width: 130px;
    }

    .programme-card {
        padding: 32px 25px;
    }

    .highlight-section {
        min-height: 560px;
    }

    .highlight-content h2 {
        font-size: 48px;
    }

    .availability-card {
        display: flex;
        align-items: stretch;
        flex-direction: column;
        gap: 16px;
        padding: 20px;
    }

    .availability-button,
    .availability-disabled {
        width: 100%;
    }

    .availability-status {
        align-items: flex-start;
    }

    .availability-date {
        align-items: flex-start;
    }

    .availability-day {
        flex-basis: 58px;
        width: 58px;
        height: 58px;
        font-size: 26px;
    }

    .information-card {
        padding: 28px 24px;
    }

    .faq-question {
        font-size: 16px;
    }

    .faq-answer p {
        padding-right: 0;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .footer-brand {
        grid-column: auto;
    }

    .footer-bottom .section-container {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }
}

/* =========================================================
   HERO V2 — CHALET 2000
   ========================================================= */

.hero-section {
    isolation: isolate;
    background: #173f33;
}

/* Photo animée en arrière-plan */
.hero-section::before {
    position: absolute;
    inset: -4%;
    z-index: -3;
    background:
        url("../../../images/hero-chalet.jpg")
        center 52% / cover no-repeat;
    content: "";
    transform: scale(1.07);
    animation: heroPhotoEntrance 10s ease-out forwards;
    will-change: transform;
}

/* Dégradé améliorant la lisibilité */
.hero-section::after {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(
            90deg,
            rgba(8, 31, 23, 0.88) 0%,
            rgba(8, 31, 23, 0.66) 43%,
            rgba(8, 31, 23, 0.22) 75%,
            rgba(8, 31, 23, 0.10) 100%
        ),
        linear-gradient(
            180deg,
            rgba(5, 20, 15, 0.18) 0%,
            rgba(5, 20, 15, 0.06) 55%,
            rgba(5, 20, 15, 0.58) 100%
        );
    content: "";
}

.hero-overlay {
    z-index: -1;
    background:
        radial-gradient(
            circle at 72% 35%,
            rgba(255, 195, 112, 0.12),
            transparent 36%
        );
}

/* Positionnement légèrement plus haut */
.hero-content {
    transform: translateY(-16px);
}

/* Apparition du contenu */
.hero-eyebrow {
    animation: heroTextEntrance 0.8s ease-out both;
}

.hero-content h1 {
    animation: heroTextEntrance 0.9s 0.12s ease-out both;
}

.hero-description {
    animation: heroTextEntrance 0.9s 0.24s ease-out both;
}

.hero-actions {
    animation: heroTextEntrance 0.9s 0.36s ease-out both;
}

/* Bouton principal plus premium */
.hero-actions .button-primary {
    background:
        linear-gradient(
            135deg,
            #c79650,
            #a96f32
        );
    color: #ffffff;
    box-shadow:
        0 14px 34px rgba(90, 48, 18, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.hero-actions .button-primary:hover {
    background:
        linear-gradient(
            135deg,
            #d5a764,
            #b67c3b
        );
    box-shadow:
        0 18px 42px rgba(90, 48, 18, 0.44),
        inset 0 1px 0 rgba(255, 255, 255, 0.30);
    transform: translateY(-3px) scale(1.015);
}

/* Bouton réserver du menu */
.navigation-booking-button {
    background:
        linear-gradient(
            135deg,
            #c79650,
            #a96f32
        ) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(83, 46, 19, 0.22);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;
}

.navigation-booking-button:hover {
    filter: brightness(1.08);
    box-shadow: 0 12px 28px rgba(83, 46, 19, 0.32);
    transform: translateY(-2px);
}

/* Logo légèrement agrandi */
.site-logo img {
    width: 60px;
    height: 60px;
}

/* Neige décorative */
.hero-snow {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.snowflake {
    position: absolute;
    top: -20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.75);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.35);
    animation-name: snowFall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* Fondu vers la section suivante */
.hero-section .hero-bottom-fade {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    z-index: 2;
    height: 50px;
    background:
        linear-gradient(
            to bottom,
            transparent,
            var(--beige-light)
        );
    pointer-events: none;
}

@keyframes heroPhotoEntrance {
    from {
        transform: scale(1.13);
    }

    to {
        transform: scale(1.03);
    }
}

@keyframes heroTextEntrance {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

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

@keyframes snowFall {
    0% {
        opacity: 0;
        transform: translate3d(0, -20px, 0);
    }

    12% {
        opacity: 0.75;
    }

    85% {
        opacity: 0.55;
    }

    100% {
        opacity: 0;
        transform: translate3d(55px, 105vh, 0);
    }
}

@media (max-width: 850px) {
    .hero-section::before {
        background-position: 58% center;
    }

    .hero-content {
        transform: translateY(-8px);
    }

    .site-logo img {
        width: 50px;
        height: 50px;
    }
}

/* Respecte les réglages d’accessibilité */
@media (prefers-reduced-motion: reduce) {
    .hero-section::before,
    .hero-eyebrow,
    .hero-content h1,
    .hero-description,
    .hero-actions,
    .snowflake {
        animation: none !important;
    }
}

/* =========================================================
   EXPÉRIENCE V2
   ========================================================= */

.experience-section {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 95% 10%,
            rgba(198, 151, 82, 0.12),
            transparent 25%
        ),
        var(--beige-light);
}

.experience-section::before {
    position: absolute;
    top: 120px;
    left: -130px;
    width: 340px;
    height: 340px;
    border: 1px solid rgba(198, 151, 82, 0.18);
    border-radius: 50%;
    content: "";
}

.experience-heading {
    width: 100%;
    margin-bottom: 70px;
}

.experience-heading > div {
    width: 100%;
}

.experience-heading h2 {
    width: 100%;
    max-width: none;
    margin: 0;

    color: var(--green-dark);

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

    font-size: clamp(48px, 5.5vw, 78px);
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 1.03;
}

.experience-showcase {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 90px;
    align-items: center;
}

.experience-main-image {
    position: relative;
}

.experience-main-image::before {
    position: absolute;
    top: -24px;
    right: 34px;
    bottom: 30px;
    left: -24px;
    z-index: 0;
    border: 1px solid rgba(198, 151, 82, 0.7);
    border-radius: 32px;
    content: "";
}

.experience-main-image img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 630px;
    border-radius: 32px;
    object-fit: cover;
    box-shadow: 0 25px 60px rgba(22, 52, 42, 0.16);
}

.experience-altitude {
    position: absolute;
    right: -34px;
    bottom: 48px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    min-width: 190px;
    padding: 25px 28px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 22px;
    background:
        linear-gradient(
            145deg,
            rgba(24, 63, 50, 0.96),
            rgba(35, 87, 68, 0.96)
        );
    color: #fff;
    box-shadow: 0 18px 42px rgba(23, 63, 51, 0.3);
}

.experience-altitude strong {
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size: 40px;
    font-weight: 500;
    line-height: 1;
}

.experience-altitude span {
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 13px;
}

.experience-details {
    padding-left: 5px;
}

.experience-intro {
    margin-bottom: 34px;
    color: var(--green-dark);
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size: 30px;
    line-height: 1.25;
}

.experience-benefits {
    display: grid;
    gap: 8px;
}

.experience-benefit {
    display: grid;
    grid-template-columns: 62px 1fr;
    gap: 18px;
    padding: 20px 0;
    border-bottom: 1px solid var(--border);
    transition:
    transform .35s ease,
    box-shadow .35s ease,
    background .35s ease;
}

.experience-benefit:first-child {
    border-top: 1px solid var(--border);
}

.experience-benefit-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: var(--beige);
    font-size: 25px;
    transition:
        transform 0.25s ease,
        background 0.25s ease;
}

.experience-benefit:hover
.experience-benefit-icon {
    background: #eadbc4;
    transform: translateY(-5px) rotate(-2deg);
}

.experience-benefit-number{
    transition:.35s;
    color:#c69752
}

.experience-benefit h3 {
    margin-bottom: 5px;
    color:#c69752;
    font-size: 18px;
    transition: 0.35s;
}

.experience-benefit p {
    color: var(--text-light);
    font-size: 15px;
    line-height: 1.55;
}

.experience-booking-button {
    margin-top: 34px;
}

/* Grand panorama */

.experience-panorama {
    position: relative;
    min-height: 500px;
    margin-top: 110px;
    overflow: hidden;
    border-radius: 32px;
    box-shadow: 0 24px 60px rgba(22, 52, 42, 0.16);
}

.experience-panorama img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 58%;
    transition: transform 1.2s ease;
}

.experience-panorama:hover img {
    transform: scale(1.035);
}

.experience-panorama-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(8, 28, 21, 0.78),
            rgba(8, 28, 21, 0.18) 70%
        ),
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(8, 28, 21, 0.4)
        );
}

.experience-panorama-content {
    position: absolute;
    bottom: 55px;
    left: 55px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    max-width: 600px;
    color: #fff;
}

.experience-panorama-content span {
    margin-bottom: 15px;
    color: #e9c68f;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.experience-panorama-content strong {
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size: clamp(38px, 5vw, 66px);
    font-weight: 500;
    line-height: 1.04;
}

/* Ajustements du Hero */

.hero-content h1 {
    font-size: clamp(64px, 10vw, 136px);
}

.hero-description {
    font-size: clamp(19px, 2vw, 24px);
}

.hero-actions .button {
    min-height: 60px;
    padding-right: 30px;
    padding-left: 30px;
    font-size: 16px;
}

.site-header {
    background: rgba(13, 40, 31, 0.42);
}

/* Responsive */

@media (max-width: 950px) {
    .experience-heading,
    .experience-showcase {
        grid-template-columns: 1fr;
    }

    .experience-heading {
        gap: 25px;
        margin-bottom: 55px;
    }

    .experience-heading-text {
        max-width: 680px;
    }

    .experience-showcase {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 90px;
}

    .experience-details {
    order: 1;
}

.experience-main-image {
    order: 2;
}

    .experience-altitude {
        right: 20px;
    }
}

@media (max-width: 600px) {
    .experience-heading h2 {
        font-size: 42px;
    }

    .experience-main-image::before {
        display: none;
    }

    .experience-main-image img {
        height: 430px;
        border-radius: 22px;
    }

    .experience-altitude {
        right: 14px;
        bottom: -28px;
        min-width: 150px;
        padding: 20px;
    }

    .experience-altitude strong {
        font-size: 32px;
    }

    .experience-details {
        padding-top: 20px;
    }

    .experience-intro {
        font-size: 25px;
    }

    .experience-benefit {
        grid-template-columns: 52px 1fr;
        gap: 14px;
    }

    .experience-benefit-icon {
        width: 48px;
        height: 48px;
        font-size: 22px;
    }

    .experience-panorama {
        min-height: 480px;
        margin-top: 75px;
        border-radius: 22px;
    }

    .experience-panorama-content {
        right: 24px;
        bottom: 30px;
        left: 24px;
    }

    .experience-panorama-content strong {
        font-size: 39px;
    }
}

/* Inversion définitive : texte à gauche, photo à droite */
@media (min-width: 951px) {
    .experience-showcase {
        grid-template-columns: 0.8fr 1.2fr !important;
        gap: 90px !important;
    }

    .experience-showcase .experience-details {
        grid-column: 1 !important;
        grid-row: 1 !important;
        order: 1 !important;
        padding-left: 0 !important;
    }

    .experience-showcase .experience-main-image {
        grid-column: 2 !important;
        grid-row: 1 !important;
        order: 2 !important;
    }
}

/* =========================================================
   DÉROULEMENT — STICKY SCROLL
   ========================================================= */

.timeline-section {
    position: relative;
    background: #102d24;
}

.timeline-scroll-area {
    position: relative;
    min-height: 600vh;
}

.timeline-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 720px;
    overflow: hidden;
    color: #fff;
}

.timeline-background {
    position: absolute;
    inset: 0;
}

.timeline-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 55%;
    transform: scale(1.03);
}

.timeline-background-overlay{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(8,30,22,.62) 0%,
            rgba(8,30,22,.42) 35%,
            rgba(8,30,22,.18) 70%,
            rgba(8,30,22,.05) 100%
        );
}

.timeline-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 100px;
    align-items: center;
    height: 100%;
    padding-top: 110px;
    padding-bottom: 80px;
}

.timeline-introduction {
    max-width: 490px;
}

.timeline-introduction .section-eyebrow {
    color: #e4bd84;
}

.timeline-introduction h2 {
    color: #fff;
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size: clamp(44px, 6vw, 76px);
    font-weight: 500;
    line-height: 1.02;
}

.timeline-introduction > p:not(.section-eyebrow) {
    margin-top: 24px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 18px;
    line-height: 1.7;
}

.timeline-progress {
    position: relative;
    width: 100%;
    max-width: 310px;
    height: 3px;
    margin-top: 38px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
}

.timeline-progress-line {
    position: absolute;
    inset: 0;
}

.timeline-progress-value {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 16.666%;
    border-radius: inherit;
    background:
        linear-gradient(
            90deg,
            #c79650,
            #edc68b
        );
    transition: width 0.5s ease;
}

.timeline-steps {
    position: relative;
    height: 430px;
}

.timeline-step {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    max-width: 610px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(-50% + 45px));
    transition:
        opacity 0.5s ease,
        transform 0.6s ease;
}

.timeline-step.is-active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%);
}

.timeline-step-time {
    display: inline-flex;
    margin-bottom: 22px;
    color: #edc68b;
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size: 24px;
    font-weight: 700;
}

.timeline-step-content {
    display: grid;
    grid-template-columns: 86px 1fr;
    gap: 28px;
    align-items: start;
}

.timeline-step-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.1);
    font-size: 34px;
    backdrop-filter: blur(10px);
}

.timeline-step h3 {
    margin-bottom: 14px;
    color: #fff;
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size: clamp(36px, 4vw, 58px);
    font-weight: 500;
    line-height: 1.05;
}

.timeline-step p {
    max-width: 500px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 18px;
    line-height: 1.7;
}

.timeline-scroll-triggers {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-rows: repeat(6, 1fr);
    pointer-events: none;
}

.timeline-scroll-triggers span {
    display: block;
    min-height: 100vh;
}

.timeline-scroll-hint {
    position: absolute;
    bottom: 28px;
    left: 50%;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    transform: translateX(-50%);
}

.timeline-scroll-hint span:last-child {
    font-size: 20px;
    animation: timelineArrow 1.5s ease-in-out infinite;
}

@keyframes timelineArrow {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(7px);
    }
}

@media (max-width: 900px) {
    .timeline-scroll-area {
        position: relative;
        min-height: auto;
    }

    .timeline-sticky {
        position: relative;
        height: auto;
        min-height: auto;
        overflow: visible;
    }

    .timeline-layout {
        grid-template-columns: 1fr;
        gap: 60px;
        height: auto;
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .timeline-steps {
        display: grid;
        gap: 30px;
        height: auto;
    }

    .timeline-step {
        position: relative;
        top: auto;
        left: auto;
        max-width: none;
        padding: 28px;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 24px;
        background: rgba(8, 30, 22, 0.56);
        opacity: 1;
        pointer-events: auto;
        transform: none;
        backdrop-filter: blur(8px);
    }

    .timeline-scroll-triggers,
    .timeline-scroll-hint,
    .timeline-progress {
        display: none;
    }
}

@media (max-width: 600px) {
    .timeline-layout {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .timeline-introduction h2 {
        font-size: 43px;
    }

    .timeline-step-content {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .timeline-step-icon {
        width: 64px;
        height: 64px;
    }

    .timeline-step h3 {
        font-size: 36px;
    }
}

/* Déroulement sans icônes */
.timeline-step-content {
    display: block !important;
}

.timeline-step-icon {
    display: none !important;
}

.timeline-step h3,
.timeline-step p {
    max-width: 560px;
}

/* =========================================================
   CHOIX DU MOIS
   ========================================================= */

.month-selection-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}

.month-selection-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 190px;
    padding: 28px 24px;
    overflow: hidden;
    border: 1px solid rgba(184, 128, 55, 0.38);
    border-radius: 22px;
    background:  linear-gradient(
        145deg,
        #f7efe2 0%,
        #eadbc4 100%
    );
    box-shadow:
    0 14px 30px rgba(53, 72, 63, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease,
        color 0.25s ease;
}

.month-selection-card::before {
    position: absolute;
    inset: auto -35px -55px auto;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(198, 151, 82, 0.1);
    content: "";
    transition: transform 0.35s ease;
}

.month-selection-card:hover {
    border-color: rgba(198, 151, 82, 0.65);
    background: var(--green-dark);
    color: var(--white);
    box-shadow: 0 18px 42px rgba(23, 63, 51, 0.18);
    transform: translateY(-7px);
}

.month-selection-card:hover::before {
    transform: scale(1.25);
}

.month-selection-name {
    position: relative;
    z-index: 2;
    color: var(--green-dark);
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size: 27px;
    font-weight: 500;
    line-height: 1.1;
}

.month-selection-year {
    position: relative;
    z-index: 2;
    margin-top: 8px;
    color: var(--text-light);
    font-size: 14px;
    font-weight: 700;
}

.month-selection-arrow {
    position: relative;
    z-index: 2;
    margin-top: auto;
    color: var(--gold);
    font-size: 27px;
    transition: transform 0.25s ease;
}

.month-selection-card:hover .month-selection-name,
.month-selection-card:hover .month-selection-year {
    color: var(--white);
}

.month-selection-card:hover .month-selection-arrow {
    transform: translateX(7px);
}

@media (max-width: 1000px) {
    .month-selection-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 650px) {
    .month-selection-grid {
        grid-template-columns: 1fr 1fr;
    }

    .month-selection-card {
        min-height: 150px;
        padding: 23px 20px;
    }

    .month-selection-name {
        font-size: 23px;
    }
}

@media (max-width: 420px) {
    .month-selection-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   HERO — VERSION PREMIUM
   ========================================================= */

.hero-eyebrow {
    max-width: 620px;
    color: #d6ad6b;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: 1.6;
    text-transform: uppercase;
}

.hero-introduction {
    max-width: 620px;
    margin-top: 25px;
}

.hero-introduction > strong {
    display: block;
    margin-bottom: 14px;

    color: #ffffff;

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

    font-size: clamp(20px, 2vw, 27px);
    font-weight: 400;
    line-height: 1.35;
}

.hero-description {
    max-width: 570px;
    line-height: 1.75;
}

.hero-signature {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;

    margin-top: 32px;

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

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

.hero-signature i {
    display: block;

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: #d6ad6b;
}

/* =========================================================
   EXPERIENCE — VERSION ÉPURÉE
   ========================================================= */

.experience-benefits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 0 34px;

    margin-top: 28px;
}

.experience-benefit {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 18px;

    padding: 28px 0;

    border-top:
        1px solid rgba(23, 63, 51, 0.14);
}

.experience-benefit-icon {
    display: none;
}

.experience-benefit-number {
    padding-top: 5px;

    color: #b7833b;

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

.experience-benefit h3 {
    margin: 0 0 11px;

    color: #173f33;

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

    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
}

.experience-benefit p {
    margin: 0;

    color: #68756f;

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

@media (max-width: 800px) {

    .experience-benefits {
        grid-template-columns: 1fr;
    }

    .hero-signature {
        gap: 10px;
    }

    .hero-signature span {
        font-size: 10px;
    }

}

@keyframes heroReveal {

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

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

}

.hero-content > * {
    opacity: 0;

    animation:
        heroReveal
        0.9s
        cubic-bezier(0.2, 0.7, 0.2, 1)
        forwards;
}

.hero-content > *:nth-child(1) {
    animation-delay: 0.15s;
}

.hero-content > *:nth-child(2) {
    animation-delay: 0.3s;
}

.hero-content > *:nth-child(3) {
    animation-delay: 0.45s;
}

.hero-content > *:nth-child(4) {
    animation-delay: 0.6s;
}

.hero-content > *:nth-child(5) {
    animation-delay: 0.75s;
}

.experience-benefit {
    transition:
        transform 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}

.experience-benefit-number,
.experience-benefit h3 {
    transition: color 0.3s ease;
}

.experience-benefit:hover {
    transform: translateY(-5px);
}

.experience-benefit:hover .experience-benefit-number,
.experience-benefit:hover h3 {
    color: var(--gold);
}

/*======================================================
GALERIE
======================================================*/

.gallery-section{

    background:#F8F5EF;

}

.gallery-heading{

    text-align:center;

    margin-bottom:70px;

}

.gallery-heading h2{

    margin-top:12px;

    margin-bottom:20px;

}

.gallery-heading p{

    max-width:620px;

    margin:auto;

}

.gallery-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    grid-auto-rows:240px;

    gap:18px;

}

.gallery-large{

    grid-row:span 2;

}

.gallery-item{

    overflow:hidden;

    border-radius:24px;

    cursor:pointer;

}

.gallery-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:
        transform .5s ease,
        filter .5s ease;

}

.gallery-item:hover img{

    transform:translate(-4px);

}

.gallery-footer{

    margin-top:45px;

    text-align:center;

}

.gallery-button{

    padding:16px 34px;

    border:none;

    border-radius:999px;

    background:var(--green-dark);

    color:white;

    cursor:pointer;

    transition:.3s;

}

.gallery-button:hover{

    transform:translateY(-3px);

}

@media(max-width:900px){

.gallery-grid{

grid-template-columns:1fr;

grid-auto-rows:260px;

}

.gallery-large{

grid-row:auto;

}

}

/* ==========================
   LIGHTBOX
========================== */

.lightbox{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.96);

    backdrop-filter:blur(10px);

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:99999;

}

.lightbox.open{

    opacity:1;

    visibility:visible;

}

.lightbox img{

    max-width:90vw;
    max-height:88vh;

    border-radius:18px;

    box-shadow:0 25px 80px rgba(0,0,0,.45);

    opacity:0;

    transform:scale(.92);

    transition:

        opacity .35s ease,

        transform .35s ease;

}

.lightbox.open img{

    opacity:1;

    transform:scale(1);

}

.lightbox-close{

    position:absolute;

    top:30px;

    right:40px;

    font-size:48px;

    color:white;

    cursor:pointer;

}

.lightbox-prev,

.lightbox-next{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:64px;

    height:64px;

    border:1px solid rgba(255,255,255,.15);

    border-radius:50%;

    background:rgba(255,255,255,.08);

    color:white;

    font-size:28px;

    cursor:pointer;

    backdrop-filter:blur(12px);

    transition:.25s;

}

.lightbox-prev:hover,

.lightbox-next:hover{

    background:rgba(255,255,255,.18);

    transform:translateY(-50%) scale(1.05);

}

.lightbox-prev{

    left:40px;

}

.lightbox-next{

    right:40px;

}

.lightbox-counter{

    position:absolute;

    bottom:28px;

    color:white;

    font-size:16px;

    letter-spacing:.05em;

}

@media (max-width: 768px) {

    .lightbox-prev,
    .lightbox-next {

        display: none;

    }

}

@media (max-width: 768px) {

    .lightbox img {

        max-width: 96vw;
        max-height: 82vh;
        border-radius: 14px;

    }

    .lightbox-close {

        top: 20px;
        right: 20px;
        font-size: 34px;

    }

    .lightbox-counter {

        bottom: 20px;
        font-size: 14px;

    }

}

/* =========================================================
   HERO — VERSION RÉSERVATION
   ========================================================= */

.hero-content{
    position: relative;
    z-index: 5;

    width: min(760px, 100%);
    max-width: 760px;

    margin-left: 0;
    margin-right: auto;
}

/* Petit texte supérieur */

.hero-eyebrow {
    margin: 0 0 18px;

    color: #e8bd79;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.20em;
    text-transform: uppercase;
}

/* Titre principal */

.hero-title {
    max-width: 850px;
    margin: 0;

    color: #ffffff;

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

    font-size: clamp(58px, 7vw, 104px);
    font-weight: 500;
    letter-spacing: -0.045em;
    line-height: 0.95;
}

/* Deuxième ligne du titre */

.hero-title span {
    display: block;

    margin-top: 8px;

    font-size: 0.68em;
    letter-spacing: -0.035em;
    line-height: 1.05;
}

/* Description */

.hero-description {
    max-width: 700px;

    margin: 30px 0 0;

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

    font-size: 18px;
    line-height: 1.75;

    text-shadow:
        0 1px 12px rgba(0, 0, 0, 0.18);
}

/* Actions */

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 34px;
}

/* Base boutons */

.hero-actions .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 58px;

    padding: 0 28px;

    border-radius: 999px;

    font-size: 15px;
    font-weight: 800;
    text-decoration: none;

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

/* Bouton principal */

.hero-actions .button-primary {
    border: 1px solid #c68f3d;

    background:
        linear-gradient(
            145deg,
            #d49a48,
            #bb7d2c
        );

    color: #ffffff;

    box-shadow:
        0 14px 32px rgba(154, 99, 28, 0.28);
}

.hero-actions .button-primary:hover {
    transform: translateY(-3px);

    box-shadow:
        0 18px 38px rgba(154, 99, 28, 0.36);
}

/* Bouton secondaire */

.hero-actions .button-secondary {
    border: 1px solid rgba(255, 255, 255, 0.55);

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

    color: #ffffff;

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

.hero-actions .button-secondary:hover {
    border-color: #ffffff;

    background: #ffffff;

    color: #173f33;

    transform: translateY(-3px);
}

/* Signature */

.hero-signature {
    position: relative;

    margin: 30px 0 0;
    padding-left: 42px;

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

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

    font-size: 15px;
    font-style: italic;
    line-height: 1.5;
}

.hero-signature::before {
    position: absolute;
    top: 50%;
    left: 0;

    width: 28px;
    height: 1px;

    background: rgba(232, 189, 121, 0.75);

    content: "";
}

.mobile-menu-toggle {
    display: none;
}

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

@media (max-width: 850px) {

    .hero-content {
        position: relative;
        z-index: 5;

        width: min(760px, 100%);
        max-width: 760px;

        margin-left: 0;
        margin-right: auto;
    }

    .hero-eyebrow {
        margin-bottom: 15px;

        font-size: 10px;
        letter-spacing: 0.16em;
    }

    .hero-title {
        font-size: clamp(46px, 13vw, 68px);
        line-height: 0.98;
    }

    .hero-title span {
        margin-top: 10px;

        font-size: 0.66em;
        line-height: 1.08;
    }

    .hero-description {
        max-width: 100%;

        margin-top: 22px;

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

    .hero-actions {
        flex-direction: column;

        margin-top: 28px;
    }

    .hero-actions .button {
        width: 100%;
        min-height: 54px;
    }

    .hero-signature {
        margin-top: 24px;

        font-size: 14px;
    }

}

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

@media (max-width: 480px) {

    .hero-title {
        font-size: 44px;
    }

    .hero-description {
        font-size: 15px;
    }

}

/* =======================================================
   PRIVATISATION
======================================================= */

.privatisation {
    padding: 140px 0;
    background: #fbf8f2;
}

.privatisation-grid {

    display: grid;

    grid-template-columns: 470px 1fr;

    grid-template-areas:
        "image content"
        "details details"
        "footer footer";

    gap: 55px 70px;

    align-items: start;
}

/* ---------------- PHOTO ---------------- */

.privatisation-image {

    grid-area: image;

    position: relative;

    height: 620px;

    border-radius: 34px;

    overflow: hidden;

    box-shadow:
        0 30px 70px rgba(18,45,37,.16);
}

.privatisation-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;
}

.privatisation-image-badge{

    position:absolute;

    left:28px;
    bottom:28px;

    padding:18px 22px;

    border-radius:18px;

    background:rgba(255,255,255,.92);

    backdrop-filter:blur(10px);
}

.privatisation-image-badge span{

    display:block;

    color:#c58a2c;

    font-size:13px;

    letter-spacing:.15em;

    text-transform:uppercase;

    margin-bottom:4px;
}

.privatisation-image-badge strong{

    font-size:24px;

    color:#143b33;
}

/* ---------------- TEXTE ---------------- */

.privatisation-content{

    grid-area:content;

    display:flex;

    flex-direction:column;

    justify-content:center;
}

.privatisation-content h2{

    margin:10px 0 24px;

    font-size:76px;

    line-height:.95;
}

.privatisation-content h2 span{

    color:#c58a2c;
}

.privatisation-intro{

    max-width:760px;

    font-size:23px;

    line-height:1.55;

    color:#163d35;

    margin-bottom:24px;
}

.privatisation-text{

    max-width:760px;

    font-size:19px;

    line-height:1.8;

    color:#5d6b66;

    margin-bottom:34px;
}

/* ---------------- TYPES ---------------- */

.privatisation-types{

    display:flex;

    flex-wrap:wrap;

    gap:14px;
}

.privatisation-types span{

    padding:14px 22px;

    border-radius:999px;

    border:1px solid rgba(197,138,44,.25);

    background:#ffffff;

    color:#143b33;

    font-weight:600;

    transition:.25s;
}

.privatisation-types span:hover{

    transform:translateY(-2px);

    border-color:#c58a2c;

    box-shadow:0 10px 24px rgba(0,0,0,.08);
}

/* ---------------- 3 BLOCS ---------------- */

.privatisation-details{

    grid-area:details;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:24px;
}

.privatisation-info-item{

    padding:34px;

    border-radius:24px;

    background:white;

    border:1px solid rgba(197,138,44,.18);

    box-shadow:
        0 15px 35px rgba(18,45,37,.07);

    text-align:center;
}

.privatisation-info-item strong{

    display:block;

    margin-bottom:12px;

    font-size:23px;

    color:#143b33;
}

.privatisation-info-item span{

    display:block;

    line-height:1.7;

    color:#5d6b66;
}

/* ---------------- FOOTER ---------------- */

.privatisation-footer{

    grid-area:footer;

    text-align:center;

    max-width:900px;

    margin:auto;
}

.privatisation-footer p{

    font-size:18px;

    line-height:1.8;

    color:#5d6b66;

    margin-bottom:30px;
}

.privatisation-button{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:18px 36px;

    border-radius:999px;

    background:#143b33;

    color:white;

    font-weight:700;

    text-decoration:none;

    transition:.25s;
}

.privatisation-button:hover{

    background:#c58a2c;

    transform:translateY(-3px);
}

/* ---------------- MOBILE ---------------- */

@media (max-width:1100px){

    .privatisation-grid{

        grid-template-columns:1fr;

        grid-template-areas:
            "image"
            "content"
            "details"
            "footer";
    }

    .privatisation-image{

        max-width:620px;

        width:100%;

        margin:auto;

        height:520px;
    }

    .privatisation-details{

        grid-template-columns:1fr;
    }

    .privatisation-content{

        text-align:center;
    }

    .privatisation-content h2{

        font-size:58px;
    }

    .privatisation-intro,
    .privatisation-text{

        max-width:100%;
    }

    .privatisation-types{

        justify-content:center;
    }
}

/* =========================================================
   MODALE CONTACT PRIVATISATION
========================================================= */

.contact-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .3s ease,
        visibility .3s ease;
}

.contact-modal.is-open {
    opacity: 1;
    visibility: visible;
}

.contact-modal-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(6, 24, 19, .82);

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

.contact-modal-panel {
    position: relative;
    z-index: 2;

    width: min(100%, 860px);
    max-height: 90vh;

    overflow-y: auto;

    padding: 46px;

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            #fbf8f2,
            #f3ede3
        );

    box-shadow:
        0 35px 100px rgba(0,0,0,.35);

    transform: translateY(18px) scale(.97);

    transition: transform .3s ease;
}

.contact-modal.is-open .contact-modal-panel {
    transform: translateY(0) scale(1);
}

.contact-modal-close {
    position: absolute;
    top: 18px;
    right: 22px;

    width: 44px;
    height: 44px;

    border: 0;
    border-radius: 50%;

    background: rgba(20,63,51,.08);

    color: #143f33;

    font-size: 30px;
    line-height: 1;

    cursor: pointer;
}

.contact-modal-eyebrow {
    margin: 0 0 10px;

    color: #c58a2c;

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

.contact-modal-panel h2 {
    margin: 0;

    color: #143f33;

    font-family: Georgia, serif;

    font-size: 48px;
    font-weight: 500;
    line-height: 1.05;
}

.contact-modal-intro {
    max-width: 680px;

    margin: 18px 0 30px;

    color: #65736d;

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

.contact-modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 18px;
}

.contact-modal-card {
    display: flex;
    flex-direction: column;

    padding: 22px;

    border: 1px solid rgba(197,138,44,.20);
    border-radius: 18px;

    background: white;

    color: #143f33;

    text-decoration: none;

    box-shadow:
        0 10px 26px rgba(18,45,37,.06);

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

.contact-modal-card:hover {
    transform: translateY(-3px);

    box-shadow:
        0 18px 35px rgba(18,45,37,.12);
}

.contact-modal-label {
    color: #c58a2c;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.contact-modal-card strong {
    margin-top: 8px;

    font-size: 18px;
}

.contact-modal-card small {
    margin-top: 6px;

    color: #6a7771;

    font-size: 13px;
}

.contact-modal-access {
    margin-top: 28px;
    padding: 26px;

    border-radius: 20px;

    background: #143f33;

    color: white;
}

.contact-modal-access h3 {
    margin: 8px 0 22px;

    font-family: Georgia, serif;
    font-size: 24px;
    font-weight: 500;
}

.contact-modal-route {
    display: grid;
    gap: 16px;
}

.contact-route-step {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 14px;
    align-items: start;
}

.contact-route-step > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border-radius: 50%;

    background: #c58a2c;

    color: white;

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

.contact-route-step strong {
    font-size: 15px;
}

.contact-route-step p {
    margin: 4px 0 0;

    color: rgba(255,255,255,.72);

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

.contact-modal-note {
    margin-top: 22px;
    padding: 18px 20px;

    border: 1px solid rgba(197,138,44,.25);
    border-radius: 16px;

    background: #fff8ed;
}

.contact-modal-note strong {
    color: #143f33;
}

.contact-modal-note p {
    margin: 5px 0 0;

    color: #65736d;

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

.contact-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;

    margin-top: 28px;
}

.contact-modal-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 52px;
    padding: 0 24px;

    border: 1px solid #143f33;
    border-radius: 999px;

    color: #143f33;

    font-weight: 700;
    text-decoration: none;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}

.contact-modal-action:hover {
    transform: translateY(-2px);
}

.contact-modal-action-primary {
    background: #143f33;
    color: white;
}

.contact-modal-action-primary:hover {
    background: #c58a2c;
    border-color: #c58a2c;
}

body.contact-modal-open {
    overflow: hidden;
}

@media (max-width: 700px) {

    .contact-modal {
        padding: 12px;
    }

    .contact-modal-panel {
        padding: 34px 18px 24px;

        border-radius: 22px;
    }

    .contact-modal-panel h2 {
        font-size: 36px;
    }

    .contact-modal-grid {
        grid-template-columns: 1fr;
    }

    .contact-modal-actions {
        flex-direction: column;
    }

    .contact-modal-action {
        width: 100%;
    }

}

/* Finitions modale contact */

.contact-modal-panel {
    max-height: 86vh;
    padding-top: 40px;
    padding-bottom: 28px;
}

.contact-modal-intro {
    margin-bottom: 24px;
}

.contact-modal-access {
    margin-top: 22px;
    padding: 22px 26px;
}

.contact-modal-access h3 {
    margin-bottom: 16px;
}

.contact-modal-route {
    gap: 12px;
}

.contact-route-step p {
    margin-top: 2px;
}

.contact-modal-note {
    margin-top: 18px;
}

.contact-modal-actions {
    margin-top: 20px;
}

/* =========================================================
   RESPONSIVE MOBILE - FINITIONS
========================================================= */

@media (max-width: 700px) {

    /* -----------------------------------------------------
       HERO
    ----------------------------------------------------- */

    .hero-section {
        min-height: 86vh;
    }

    .hero-content {
        padding-top: 34px;
        padding-bottom: 48px;
    }

    .hero-content h1 {
        font-size: clamp(52px, 15vw, 66px);
        line-height: 0.94;
    }

    .hero-description {
        font-size: 16px;
        line-height: 1.55;
    }

    .hero-actions {
        gap: 12px;
    }

    .hero-actions .button,
    .hero-primary-button,
    .hero-secondary-button {
        min-height: 52px;
        padding: 14px 22px;
    }

    .hero-signature {
        margin-top: 22px;
        font-size: 15px;
        line-height: 1.35;
    }


    /* -----------------------------------------------------
       ESPACEMENT GLOBAL DES SECTIONS
    ----------------------------------------------------- */

    .section {
        padding-top: 76px;
        padding-bottom: 76px;
    }

    .section-container {
        width: calc(100% - 36px);
    }

    .section-eyebrow {
        margin-bottom: 14px;
    }


    /* -----------------------------------------------------
       EXPERIENCE
    ----------------------------------------------------- */

    .experience-heading {
        margin-bottom: 42px;
    }

    .experience-heading h2 {
        font-size: 46px;
        line-height: 1.02;
    }

    .experience-intro {
        font-size: 26px;
        line-height: 1.25;
    }

    .experience-benefit {
        padding: 16px 0;
    }

    .experience-panorama {
        margin-top: 64px;
        min-height: 360px;
    }


    /* -----------------------------------------------------
       GALERIE
    ----------------------------------------------------- */

    .gallery-section {
        padding-top: 30px;
        padding-bottom: 76px;
    }

    .gallery-section .section-container{
        gap:1.5rem;
    }

    .gallery-heading {
        margin-bottom: 42px;
    }

    .gallery-grid {
        gap: 1rem;
    }

    .gallery-item {
        border-radius: 24px;
        margin-bottom: 0;
    }

    .gallery-item:nth-child(n+6) {
        display: none;
    }

    .gallery-footer{
        margin-top:1rem;
    }

    .gallery-more {
        margin-top: 32px;
    }


    /* -----------------------------------------------------
       DEROULEMENT
    ----------------------------------------------------- */

    .timeline-section {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .timeline-section::before,
    .timeline-section::after {
        display: none !important;
    }

    .timeline-divider{
        display:none;
    }
    .timeline-heading h2 {
        font-size: 44px;
        line-height: 1.02;
    }

    .timeline-step {
        padding: 30px 26px;
        min-height: auto;
    }

    .timeline-step-time {
        margin-bottom: 20px;
    }

    .timeline-step h3 {
        margin-bottom: 14px;
        font-size: 31px;
        line-height: 1.1;
    }

    .timeline-step p {
        line-height: 1.6;
    }


    /* -----------------------------------------------------
       PRIVATISATION
    ----------------------------------------------------- */

    .privatisation-section {
        padding-top: 78px;
        padding-bottom: 78px;
    }

    .privatisation-grid {
        gap: 40px;
    }

    .privatisation-image {
        height: auto;
        aspect-ratio: 0.92;
    }

    .privatisation-content h2 {
        font-size: 46px;
        line-height: 1;
    }

    .privatisation-intro {
        font-size: 19px;
        line-height: 1.55;
    }

    .privatisation-text {
        font-size: 16px;
        line-height: 1.65;
    }

    .privatisation-types {
        gap: 10px;
        margin: 24px 0;
    }

    .privatisation-types span {
        padding: 11px 16px;
        font-size: 14px;
    }

    .privatisation-details {
        gap: 18px;
    }

    .privatisation-info-item {
        padding: 26px 20px;
    }

    .privatisation-footer {
        margin-top: 4px;
    }


    /* -----------------------------------------------------
       DISPONIBILITES / MOIS
    ----------------------------------------------------- */

    .availability-section {
        padding-top: 78px;
        padding-bottom: 78px;
    }

    .availability-heading {
        margin-bottom: 38px;
    }

    .availability-heading h2 {
        font-size: 43px;
        line-height: 1.06;
    }

    .availability-card {
        min-height: 154px;
        padding: 24px 20px;
    }

    .availability-grid {
        gap: 16px;
    }


    /* -----------------------------------------------------
       INFORMATIONS PRATIQUES
    ----------------------------------------------------- */

    .information-section {
        padding-top: 78px;
        padding-bottom: 78px;
    }

    .information-card {
        padding: 26px 22px;
    }


    /* -----------------------------------------------------
       FAQ
    ----------------------------------------------------- */

    .faq-section {
        padding-top: 78px;
        padding-bottom: 78px;
    }

    .faq-introduction h2 {
        font-size: 43px;
        line-height: 1.04;
    }

    .faq-question {
        min-height: 72px;
    }

    .faq-question-icon {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
    }


    /* -----------------------------------------------------
       CTA FINAL
    ----------------------------------------------------- */

    .final-booking-section {
        padding-top: 74px;
        padding-bottom: 74px;
    }

    .final-booking-content h2 {
        font-size: 43px;
        line-height: 1.02;
    }


    /* -----------------------------------------------------
       FOOTER
    ----------------------------------------------------- */

    .site-footer {
        padding-top: 54px;
        padding-bottom: 44px;
    }

}

/* =========================================================
   TIMELINE MOBILE
   Supprime uniquement la hauteur artificielle du sticky
========================================================= */

@media (max-width: 900px) {

    /*
    |------------------------------------------------------
    | Désactivation du système de scroll desktop
    |------------------------------------------------------
    */

    .timeline-scroll-triggers {
        display: none;
    }

    /*
    |------------------------------------------------------
    | La timeline reprend sa hauteur naturelle
    |------------------------------------------------------
    */

    .timeline-section {
        height: auto;
        min-height: auto;
    }

    .timeline-sticky {
        position: relative;
        top: auto;

        height: auto;
        min-height: auto;
    }

    /*
    |------------------------------------------------------
    | L'image reste simplement derrière le contenu
    |------------------------------------------------------
    */

    .timeline-background {
        position: absolute;
        inset: 0;
    }

    .timeline-background img {
        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: 56% 44%;
        margin-top: -10px;
    }

    /*
    |------------------------------------------------------
    | Indication "faire défiler" inutile sur mobile
    |------------------------------------------------------
    */

    .timeline-scroll-hint {
        display: none;
    }

}

    @media (max-width: 900px) {

        .timeline-section {
            padding-bottom: 0;
        }

        .privatisation-section {
                margin-top: 0;
            }

        }

@media (max-width: 700px) {

    .hero-section {
        min-height: 88vh;
    }

    .hero-content {
        padding-top: 28px;
        padding-bottom: 34px;
        transform: translateY(-80px);
    }

    .hero-content h1 {
        font-size: clamp(50px, 14vw, 62px);
        line-height: 0.94;
        margin-bottom: 18px;
    }

    .hero-description {
        margin-bottom: 24px;
        font-size: 15px;
        line-height: 1.55;
    }

    .hero-actions {
        gap: 11px;
    }

    .hero-actions a,
    .hero-actions button {
        min-height: 50px;
        padding: 13px 20px;
    }

    .hero-signature {
        margin-top: 20px;
        font-size: 14px;
        line-height: 1.35;
    }

    .hero-scroll-indicator {
        bottom: 16px;
    }
}

@media (max-width: 700px) {

    .experience-section {
        padding-top: 62px;
        padding-bottom: 62px;
    }

    .experience-heading {
        margin-bottom: 30px;
    }

    .experience-heading h2 {
        font-size: 42px;
        line-height: 1.02;
    }

    .experience-intro {
        max-width: 100%;
        font-size: 24px;
        line-height: 1.22;
    }

    .experience-benefits {
        gap: 0;
    }

    .experience-benefit {
        grid-template-columns: 38px 1fr;
        gap: 14px;

        padding: 22px 0;
    }

    .experience-benefit-number {
        font-size: 12px;
    }

    .experience-benefit h3 {
        margin-bottom: 8px;

        font-size: 24px;
        line-height: 1.08;
    }

    .experience-benefit p {
        max-width: none;

        font-size: 15px;
        line-height: 1.55;
    }

    .experience-panorama {
        margin-top: 44px;
    }

}

/* =========================================================
   EXPERIENCE - RESPONSIVE MOBILE FINAL
   ========================================================= */

@media (max-width: 700px) {

    /* -----------------------------------------------------
       SECTION
    ----------------------------------------------------- */

    .experience-section {
        padding-top: 58px;
        padding-bottom: 62px;
        overflow: hidden;
    }

    .experience-section .section-container {
        width: calc(100% - 32px);
        max-width: none;
        margin: 0 auto;
    }


    /* -----------------------------------------------------
       TITRE
    ----------------------------------------------------- */

    .experience-heading {
        width: 100%;
        max-width: none;
        margin-bottom: 26px;
    }

    .experience-heading > div {
        width: 100%;
    }

    .experience-heading .section-eyebrow {
        margin-bottom: 14px;

        font-size: 11px;
        letter-spacing: 0.20em;
    }

    .experience-heading h2 {
        width: 100%;
        max-width: none;

        margin: 0;

        font-size: 40px;
        line-height: 1.02;

        text-wrap: balance;
    }


    /* -----------------------------------------------------
       SHOWCASE
       On transforme la zone en grille mobile
    ----------------------------------------------------- */

    .experience-showcase {
        display: grid !important;

        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto auto auto !important;

        width: 100% !important;
        max-width: none !important;

        gap: 0 !important;
    }


    /* -----------------------------------------------------
       DETAILS
       Ses enfants participent directement à la grille
    ----------------------------------------------------- */

    .experience-details {
        display: contents !important;
    }


    /* -----------------------------------------------------
       1 - TEXTE D'INTRODUCTION
    ----------------------------------------------------- */

    .experience-intro {
        grid-column: 1 !important;
        grid-row: 1 !important;

        width: 100% !important;
        max-width: none !important;

        margin: 0 0 28px !important;

        font-size: 23px;
        line-height: 1.25;
    }


    /* -----------------------------------------------------
       2 - IMAGE PRINCIPALE
    ----------------------------------------------------- */

    .experience-main-image {
        grid-column: 1 !important;
        grid-row: 2 !important;

        position: relative !important;

        width: 100% !important;
        max-width: none !important;

        height: 250px !important;

        margin: 0 0 30px !important;

        border-radius: 22px !important;

        overflow: hidden !important;
    }

    .experience-main-image img {
        display: block !important;

        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;
        object-position: center !important;

        border-radius: 22px !important;
    }

    /* Le cartouche 2 000 m n'est pas utile sur téléphone */

    .experience-altitude {
        display: none !important;
    }


    /* -----------------------------------------------------
       3 - LES 4 POINTS
    ----------------------------------------------------- */

    .experience-benefits {
        grid-column: 1 !important;
        grid-row: 3 !important;

        display: block !important;

        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
    }


    /* -----------------------------------------------------
       UNE LIGNE
    ----------------------------------------------------- */

    .experience-benefit {
        display: grid !important;

        grid-template-columns:
            36px
            minmax(0, 1fr) !important;

        gap: 0 16px !important;

        width: 100% !important;
        max-width: none !important;

        padding: 24px 0 !important;

        border-top:
            1px solid
            rgba(23, 63, 51, 0.14) !important;
    }

    .experience-benefit:first-child {
        padding-top: 0 !important;

        border-top: 0 !important;
    }


    /* -----------------------------------------------------
       NUMERO
    ----------------------------------------------------- */

    .experience-benefit-number {
        grid-column: 1 !important;

        padding-top: 4px !important;

        color: #c68f3d;

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

        letter-spacing: 0.16em;
    }


    /* -----------------------------------------------------
       CONTENU TEXTE
    ----------------------------------------------------- */

    .experience-benefit > div {
        grid-column: 2 !important;

        width: 100% !important;
        min-width: 0 !important;
    }

    .experience-benefit h3 {
        width: 100% !important;
        max-width: none !important;

        margin: 0 0 8px !important;

        font-size: 23px !important;
        line-height: 1.08 !important;
    }

    .experience-benefit p {
        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;

        font-size: 15px !important;
        line-height: 1.55 !important;
    }


    /* -----------------------------------------------------
       4 - BOUTON
       Il arrive après les 4 points
    ----------------------------------------------------- */

    .experience-booking-button {
        grid-column: 1 !important;
        grid-row: 4 !important;

        display: flex !important;

        width: fit-content !important;
        min-width: 190px;

        justify-content: center;
        align-items: center;

        margin: 28px auto 0 !important;

        padding: 14px 24px !important;

        order: initial !important;
    }


    /* -----------------------------------------------------
       PANORAMA EN FIN DE SECTION
    ----------------------------------------------------- */

    .experience-panorama {
        margin-top: 54px;
    }
}

@media (max-width: 900px) {

    /* =====================================================
       TIMELINE MOBILE - POSITIONNEMENT
    ===================================================== */

    .timeline-section {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .timeline-scroll-area {
        min-height: auto !important;
    }

    .timeline-sticky {
        position: relative !important;
        top: auto !important;

        height: auto !important;
        min-height: auto !important;
    }


    /* -----------------------------------------------------
       TITRE
    ----------------------------------------------------- */

    .timeline-layout {
        padding-top: 42px !important;
    }

    .timeline-heading {
        margin-top: 30px !important;
        margin-bottom: 10px !important;
    }

    .timeline-heading h2 {
        margin-bottom: 0 !important;
    }


    /* -----------------------------------------------------
       CARTES
    ----------------------------------------------------- */

    .timeline-steps,
    .timeline-cards {
        position: relative !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 28px !important;

        width: 100% !important;

        margin-top: 0 !important;
        padding-bottom: 28px !important;
    }

    .timeline-step,
    .timeline-card {
        position: relative !important;

        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;

        transform: none !important;

        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
    }


    /* -----------------------------------------------------
       PREMIERE CARTE
       Evite le chevauchement avec le titre
    ----------------------------------------------------- */

    .timeline-step:first-child,
    .timeline-card:first-child {
        margin-top: 16px !important;
    }


    /* -----------------------------------------------------
       IMAGE DE FOND
    ----------------------------------------------------- */

    .timeline-background {
        position: absolute !important;
        inset: 0 !important;
    }

    .timeline-background img {
        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;

        /*
        On décale la photo pour afficher davantage
        les montagnes situées à droite.
        */
        object-position: 56% center !important;
    }


    /* -----------------------------------------------------
       FIN DE TIMELINE
    ----------------------------------------------------- */

    .timeline-scroll-hint,
    .timeline-scroll-triggers {
        display: none !important;
    }

    .timeline-layout {
        padding-bottom: 26px !important;
    }

}

@media (max-width: 900px) {

    .timeline-step,
    .timeline-card {
        opacity: 0;
        transform: translateY(32px) !important;

        transition:
            opacity 0.7s ease,
            transform 0.7s ease;
    }

    .timeline-step.is-visible,
    .timeline-card.is-visible {
        opacity: 1;
        transform: translateY(0) !important;
    }

}

@media (max-width: 900px) {

    /* =====================================================
       FIN DU DEROULEMENT
       Supprime la barre verte avant Privatisation
    ===================================================== */

    .timeline-layout {
        padding-bottom: 0 !important;
    }

    .timeline-sticky,
    .timeline-scroll-area,
    .timeline-section {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }


    /* =====================================================
       TRANSITION GALERIE -> DEROULEMENT
    ===================================================== */

    .gallery-section {
        padding-bottom: 28px !important;
    }

    .gallery-footer {
        margin-bottom: 0 !important;
    }

    .timeline-section {
        position: relative;

        margin-top: 20px !important;
        padding-top: 40px !important;
    }

    /*
       Fondu clair au début de l'image du déroulement
       pour éviter la coupure brutale blanc -> bleu
    */

    .timeline-scroll-area::before {
        content: "";

        position: absolute;
        z-index: 8;

        top: -60px;
        left: 0;
        right: 0;

        height: 130px;

        background:
            linear-gradient(
                to bottom,
                #f8f4ec 0%,
                #f8f4ec 35%,
                rgba(248,244,236,.98) 55%,
                rgba(248,244,236,.90) 70%,
                rgba(248,244,236,.45) 88%,
                rgba(248,244,236,0) 100%
            );

        pointer-events: none;
    }

    .timeline-introduction {
        transform: translateY(50px) !important;
    }

}

/* =====================================================
   PRIVATISATION - MOBILE
===================================================== */

@media (max-width:900px){

    /* Section plus compacte */
    .privatisation-section{
        padding-top: 2rem;
        padding-bottom: 2.5rem;
    }

    /* Image */
    .privatisation-hero,
    .privatisation-image{
        margin-top: 20px;
        margin-bottom: 40px;
    }

    /* Intro */
    .privatisation-introduction{
        margin-bottom: 40px;
    }

    .privatisation-introduction .section-eyebrow{
        margin-bottom: .6rem;
    }

    .privatisation-introduction h2{
        margin-bottom: 1.25rem;
    }

    .privatisation-introduction p{
        margin-bottom: 1.6rem;
        line-height: 1.7;
    }

    /* Badges */

    .privatisation-tags{
        gap: .65rem;
        margin-top: 1.5rem;
        margin-bottom: 2rem;
    }

    .privatisation-tag{
        padding: .65rem 1.15rem;
        font-size: .92rem;
    }

    /* Cartes */

    .privatisation-features{
        gap: 1.2rem;
        margin-bottom: 2rem;
    }

    .privatisation-feature{

        transition:.35s ease;

        padding: 2rem 1.5rem;

        min-height: auto;

        border-radius: 28px;
    }

    .privatisation-feature:active{

        transform: scale(.98);
    }

    .privatisation-feature h3{

        margin-bottom: .8rem;
    }

    .privatisation-feature p{

        line-height: 1.65;
    }

    /* Texte avant bouton */

    .privatisation-note{

        margin-top: 1.8rem;
        margin-bottom: 1.5rem;

        line-height: 1.75;
    }

    /* Bouton */

    .privatisation-button{

        margin-top: 0;
        margin-bottom: 2.25rem;
    }

    /* Fin de section */

    .privatisation-section{

        padding-bottom: 1.5rem !important;
    }

    .availability-section{
        padding-top: 2.25rem !important;
    }


}

@media (max-width: 900px){

    /* =====================================================
       DISPONIBILITES - MOBILE
    ===================================================== */

    .availability-section{
        padding-top: 3rem !important;
        padding-bottom: 2.5rem !important;
    }

    .availability-heading{
        margin-bottom: 2.25rem !important;
    }

    .availability-heading .section-eyebrow{
        margin-bottom: .7rem !important;
    }

    .availability-heading h2{
        margin-bottom: 1rem !important;

        font-size: 40px;
        line-height: 1.03;
    }

    .availability-heading p{
        margin-bottom: 0 !important;

        line-height: 1.6;
    }


    /* -----------------------------------------------------
       GRILLE DES MOIS
    ----------------------------------------------------- */

    .availability-grid{
        gap: 1rem !important;
    }

    .availability-card{
        min-height: 140px !important;

        padding: 1.35rem 1.2rem !important;

        border-radius: 22px !important;
    }

    .availability-card h3{
        margin-bottom: .35rem !important;
    }

    .availability-card p{
        margin-bottom: 1rem !important;
    }


    /* -----------------------------------------------------
       FIN DE SECTION
    ----------------------------------------------------- */

    .availability-section{
        margin-bottom: 0 !important;
    }


    /* -----------------------------------------------------
       INFORMATIONS PRATIQUES JUSTE APRES
    ----------------------------------------------------- */

    .information-section{
        padding-top: 2.25rem !important;
    }

}

@media (max-width: 900px){

    /* =====================================================
       INFORMATIONS PRATIQUES - MOBILE
    ===================================================== */

    .information-section{
        padding-top: 2rem !important;
        padding-bottom: 2.5rem !important;
    }

    .information-grid{
        gap: 1rem !important;
    }

    .information-card{
        padding: 1.5rem 1.35rem !important;

        min-height: auto !important;

        border-radius: 22px !important;
    }

    .information-card-icon{
        margin-bottom: 1rem !important;
    }

    .information-card h3{
        margin-bottom: .7rem !important;

        font-size: 21px !important;
        line-height: 1.2 !important;
    }

    .information-card p{
        margin: 0 !important;

        font-size: 15px !important;
        line-height: 1.6 !important;
    }


    /* =====================================================
       TRANSITION INFORMATIONS -> FAQ
    ===================================================== */

    .faq-section{
        padding-top: 2.75rem !important;
    }

}

@media (max-width: 900px){

    .faq-section{
        padding-bottom: 3rem !important;
    }

    .faq-introduction{
        margin-bottom: 1.75rem !important;
    }

    .faq-introduction .section-eyebrow{
        margin-bottom: .7rem !important;
    }

    .faq-introduction h2{
        margin-bottom: 1rem !important;

        font-size: 40px !important;
        line-height: 1.03 !important;
    }

    .faq-list{
        gap: 0 !important;
    }

    .faq-item{
        padding: 0 !important;
    }

    .faq-question{
        min-height: 70px !important;

        padding: 1rem 0 !important;
    }

    .faq-question-text{
        padding-right: 1rem !important;

        font-size: 16px !important;
        line-height: 1.35 !important;
    }

    .faq-question-icon{
        width: 42px !important;
        height: 42px !important;

        flex: 0 0 42px !important;
    }

}

@media (max-width: 900px){

    /* =====================================================
       FAQ + INFORMATIONS : BLOC UNIQUE
    ===================================================== */

    .faq-section{
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .faq-introduction{
        margin-bottom: 0 !important;
    }

    .faq-introduction h2{
        margin-bottom: 0 !important;
    }


    /* -----------------------------------------------------
       CARTES
    ----------------------------------------------------- */

    .faq-section .information-grid{
        display: grid;
        grid-template-columns: 1fr;

        gap: 0.2rem;

        margin-bottom: 0;
    }

    .faq-section .information-card{
        padding: 1.5rem 1.35rem;

        min-height: auto;

        border-radius: 22px;
    }

    .faq-section .information-card h3{
        margin-bottom: .7rem;

        font-size: 21px;
        line-height: 1.2;
    }

    .faq-section .information-card p{
        margin: 0;

        font-size: 15px;
        line-height: 1.6;
    }


    /* -----------------------------------------------------
       QUESTIONS
    ----------------------------------------------------- */

    .faq-list{
        margin-top: 0 !important;
    }


    /* -----------------------------------------------------
       CONTACT EN BAS
    ----------------------------------------------------- */

    .faq-contact{
        margin-top: -30px;
        padding-top: 1.75rem;

        border-top:
            1px solid
            rgba(23,63,51,.12);
    }

    .faq-contact p{
        margin: 0 0 1rem;

        font-size: 15px;
        line-height: 1.6;
    }

    .faq-contact a{
        display: inline-flex;
        align-items: center;

        gap: .75rem;

        font-weight: 700;
        text-decoration: none;
    }

}

@media (max-width: 900px){

    /* =====================================================
       CTA FINAL
    ===================================================== */

    .final-booking-section{
        padding: 2.75rem 0 2.5rem !important;
    }

    .final-booking-content{
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        gap: 1.5rem;
    }

    .final-booking-content > div{
        width: 100%;
    }

    .final-booking-content .section-eyebrow{
        margin-bottom: .7rem;
    }

    .final-booking-content h2{
        margin: 0;

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

    .final-booking-content .button-light{
        margin-top: .25rem;

        padding: 14px 22px;

        min-height: 50px;
    }


    /* =====================================================
       FOOTER
    ===================================================== */

    .site-footer{
        padding-top: 0 !important;
    }

    .footer-grid{
        display: grid;
        grid-template-columns: 1fr;

        gap: 2rem;

        padding-top: 2.4rem;
        padding-bottom: 2rem;
    }


    /* -----------------------------------------------------
       MARQUE
    ----------------------------------------------------- */

    .footer-brand{
        display: flex;
        align-items: center;

        gap: 1rem;
    }

    .footer-brand img{
        width: 62px;
        height: 62px;

        object-fit: cover;
        border-radius: 50%;
    }

    .footer-brand strong{
        display: block;

        margin-bottom: .25rem;

        font-size: 28px;
        line-height: 1;
    }

    .footer-brand span{
        font-size: 15px;
        line-height: 1.4;
    }


    /* -----------------------------------------------------
       COLONNES
    ----------------------------------------------------- */

    .footer-column{
        display: flex;
        flex-direction: column;

        gap: .7rem;
    }

    .footer-column h3{
        margin: 0 0 .35rem;

        font-size: 14px;
        letter-spacing: .12em;
    }

    .footer-column a,
    .footer-column span{
        font-size: 15px;
        line-height: 1.45;
    }


    /* -----------------------------------------------------
       BAS DU FOOTER
    ----------------------------------------------------- */

    .footer-bottom{
        margin-top: 0;

        padding: 1.25rem 0 1.5rem;
    }

    .footer-bottom .section-container{
        display: flex;
        flex-direction: column;

        gap: .45rem;
    }

    .footer-bottom span{
        font-size: 13px;
        line-height: 1.4;
    }

}


/* =========================================================
   HEADER / MENU MOBILE — CONSOLIDATION FINALE
   HTML actuel :
   .mobile-menu-toggle#mobile-menu-button
   #site-navigation
   ========================================================= */

.mobile-menu-toggle {
    display: none;
}

@media (max-width: 850px) {

    .mobile-menu-toggle {
        display: flex;
        z-index: 1002;
    }

    .mobile-menu-toggle span {
        display: block;
        width: 24px;
        height: 2px;
        margin: 0 auto;
        border-radius: 99px;
        background: var(--white);
        transition:
            transform 0.2s ease,
            opacity 0.2s ease,
            background 0.2s ease;
    }

    .site-header.is-scrolled .mobile-menu-toggle span {
        background: var(--green-dark);
    }

    .mobile-menu-toggle.is-open span {
        background: var(--white);
    }

    .mobile-menu-toggle.is-open span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .mobile-menu-toggle.is-open span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-toggle.is-open span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
}

/* =========================================================
   MENU MOBILE - CORRECTION FINALE
========================================================= */

@media (max-width: 850px) {

    .site-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;

        z-index: 9999;
    }

    .site-header-inner {
        position: relative;

        display: flex;
        align-items: center;
        justify-content: space-between;

        width: 100%;
    }

    .site-navigation {
        position: fixed !important;

        top: 70px !important;
        left: 30% !important;
        right: 0 !important;

        height: calc(100vh - 55px) !important;
        overflow-y: auto !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;

        padding: 30px 10px 275px !important;

        background: #123f34 !important;

        transform: translateY(-12px) !important;

        opacity: 0 !important;
        visibility: hidden !important;

        pointer-events: none !important;

        box-shadow:
            0 18px 35px rgba(0, 0, 0, .2) !important;
    }

    .site-navigation.is-open {
        transform: translateY(0) !important;

        opacity: 1 !important;
        visibility: visible !important;

        pointer-events: auto !important;
    }

    .site-navigation a,
    .site-navigation .navigation-menu-link {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 15px 0 !important;

        color: #fff !important;

        font-size: 16px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;

        text-align: left !important;
        text-decoration: none !important;

        border: 0 !important;
        border-bottom:
            1px solid rgba(255,255,255,.12) !important;

        background: transparent !important;
    }

    .site-navigation .navigation-booking-button {
        margin-top: 14px !important;

        padding: 14px 20px !important;

        border: 0 !important;
        border-radius: 999px !important;

        background: #cf8e31 !important;

        text-align: center !important;
    }

    .mobile-menu-toggle {
        position: relative;

        z-index: 10002;
    }

}

/* =========================================================
   BOUTONS EXPERIENCE
========================================================= */

.experience-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 28px;
}

.experience-actions .button {
    margin: 0;
}

.button-secondary {
    background: transparent;
    color: #164c3e;
    border: 1.5px solid #164c3e;
    cursor: pointer;
}

.button-secondary:hover {
    background: #164c3e;
    color: #fff;
}


/* Mobile */

@media (max-width: 768px) {

    .experience-actions {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .experience-actions .button {
        width: 100%;
        max-width: 260px;
        text-align: center;
        justify-content: center;
    }

}

/* =========================================================
   MODALE - MENU ET TARIFS
========================================================= */

.menu-modal {
    position: fixed;
    inset: 0;
    z-index: 20000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 30px;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity .25s ease,
        visibility .25s ease;
}

.menu-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* Fond */

.menu-modal-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(7, 25, 21, .72);
    backdrop-filter: blur(5px);
}


/* Fenêtre */

.menu-modal-dialog {
    position: relative;
    z-index: 1;

    width: min(100%, 1050px);
    max-height: calc(100vh - 60px);

    overflow-y: auto;

    padding: 55px;

    background: #f7f4ec;

    border-radius: 24px;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, .35);
}

/* =========================================================
   HEADER STICKY DE LA MODALE
========================================================= */

.menu-modal-header {
    position: sticky;
    top: 0;
    z-index: 50;

    margin: -55px -55px 28px;
    padding: 55px 85px 22px 55px;

    background: #f7f4ec;

    border-bottom: 1px solid rgba(18, 63, 52, .08);
}


/* Croix */

.menu-modal-close {
    position: absolute;

    top: 18px;
    right: 20px;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: #123f34;
    color: #fff;

    font-size: 28px;
    line-height: 1;

    cursor: pointer;
}


/* Petit titre */

.menu-modal-eyebrow {
    display: block;

    margin-bottom: 7px;

    color: #c78b36;

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

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


/* Titre */

.menu-modal-header h2 {
    margin: 0;

    color: #123f34;

    font-size: clamp(34px, 5vw, 52px);
    line-height: 1.05;
}

/* Encadrés */

.menu-modal-info,
.menu-modal-note {
    padding: 26px 30px;

    border: 1px solid rgba(18, 63, 52, .15);
    border-radius: 16px;

    background: #fff;
}

.menu-modal-info {
    margin-bottom: 45px;
}

.menu-modal-note {
    margin-top: 40px;
}

.menu-modal-box-title {
    display: block;

    margin-bottom: 12px;

    color: #123f34;

    font-size: 18px;
}

.menu-modal-info p,
.menu-modal-note p {
    margin-top: 0;

    line-height: 1.7;
}

.menu-modal-info ul {
    margin: 18px 0 0;
    padding-left: 22px;
}

.menu-modal-info li {
    margin-bottom: 10px;

    line-height: 1.55;
}


/* Titre des formules */

.menu-modal-section-heading {
    margin-bottom: 22px;
}

.menu-modal-section-heading span {
    color: #c78b36;

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

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

.menu-modal-section-heading h3 {
    margin: 5px 0 0;

    color: #123f34;

    font-size: 28px;
}


/* Cartes */

.menu-modal-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 18px;
}

.menu-modal-card {
    display: flex;
    flex-direction: column;

    padding: 26px;

    border-radius: 18px;

    background: #fff;

    box-shadow:
        0 8px 25px rgba(18, 63, 52, .08);
}

.menu-modal-card-heading h4 {
    margin: 0 0 8px;

    color: #123f34;

    font-size: 23px;
}

.menu-modal-card-heading p {
    min-height: 48px;

    margin: 0 0 22px;

    color: #555;

    line-height: 1.5;
}


/* Prix */

.menu-modal-prices {
    margin-bottom: 22px;

    border-top: 1px solid #e6e1d7;
    border-bottom: 1px solid #e6e1d7;
}

.menu-modal-prices > div {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 12px 0;
}

.menu-modal-prices > div + div {
    border-top: 1px solid #eee9df;
}

.menu-modal-prices span {
    color: #555;
}

.menu-modal-prices strong {
    color: #123f34;

    font-size: 20px;
}


/* Plats */

.menu-modal-dishes-title {
    display: block;

    margin-bottom: 10px;

    color: #123f34;

    font-weight: 700;
}

/* Liste des plats */

.menu-modal-dish-list {
    margin: 0;
    padding-left: 20px;
}

.menu-modal-dish-list li {
    margin-bottom: 18px;
    padding-left: 2px;

    line-height: 1.4;
}

.menu-modal-dish-list li:last-child {
    margin-bottom: 0;
}


/* Intitulé du plat */

.menu-modal-dish-name {
    display: block;

    margin-bottom: 3px;

    color: #123f34;

    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
}


/* Description */

.menu-modal-dish-description {
    display: block;

    color: #555;

    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
}


/* Minimum */

.menu-modal-minimum {
    margin-top: auto;
    padding: 11px 14px;

    border-radius: 10px;

    background: rgba(199, 139, 54, .12);
    color: #76501d;

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

    text-align: center;
}


/* Bas */

.menu-modal-footer {
    display: flex;
    justify-content: center;

    margin-top: 35px;
}

.menu-modal-booking {
    min-width: 220px;

    text-align: center;
}


/* Empêche la page derrière de défiler */

body.menu-modal-open {
    overflow: hidden;
}


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

@media (max-width: 850px) {

    .menu-modal {
        align-items: flex-end;

        padding: 0;
    }

    .menu-modal-dialog {
        width: 100%;
        max-height: calc(100dvh - 25px);

        padding: 38px 20px 30px;

        border-radius: 24px 24px 0 0;
    }

    .menu-modal-close {
    top: 15px;
    right: 15px;

    width: 38px;
    height: 38px;

    font-size: 25px;
}

.menu-modal-header {
    top: -38px;

    margin:
        -38px -20px 28px;

    padding:
        38px 60px 16px 20px;
}

.menu-modal-header h2 {
    font-size: 36px;
}

    .menu-modal-info,
    .menu-modal-note {
        padding: 20px;
    }

    .menu-modal-pricing-grid {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .menu-modal-card-heading p {
        min-height: 0;
    }

    .menu-modal-booking {
        width: 100%;
    }

}

.vegetarian-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 18px;
    height: 18px;

    margin-left: 5px;

    vertical-align: -3px;
}

.vegetarian-icon svg {
    width: 100%;
    height: 100%;

    fill: none;
    stroke: #4f7d50;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.vegetarian-legend {
    display: flex;
    align-items: center;
    gap: 6px;

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

    border-top: 1px solid #eee9df;

    color: #66736d;

    font-size: 12px;
    font-style: italic;
}

/* =========================================================
   DETAILS RACLETTE / FONDUE
========================================================= */

.menu-modal-speciality {
    margin-bottom: 20px;
}

.menu-modal-speciality > p:first-child {
    margin: 0;

    color: #333;

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

.menu-modal-footnote {
    margin: 12px 0 0;

    color: #6c6c6c;

    font-size: 12px;
    line-height: 1.45;

    font-style: italic;
}


/* =========================================================
   MENU ENFANT
========================================================= */

.menu-modal-kids-card {
    margin-top: 22px;
    padding: 30px;

    border-radius: 18px;

    background: #fff;

    box-shadow:
        0 8px 25px rgba(18, 63, 52, .08);
}

.menu-modal-kids-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 25px;

    padding-bottom: 22px;
    margin-bottom: 24px;

    border-bottom: 1px solid #e6e1d7;
}

.menu-modal-kids-eyebrow {
    display: block;

    margin-bottom: 5px;

    color: #c78b36;

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

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

.menu-modal-kids-header h4 {
    margin: 0;

    color: #123f34;

    font-size: 25px;
}

.menu-modal-kids-price {
    flex-shrink: 0;

    text-align: right;
}

.menu-modal-kids-price span {
    display: block;

    margin-bottom: 3px;

    color: #666;

    font-size: 12px;
}

.menu-modal-kids-price strong {
    color: #123f34;

    font-size: 25px;
}


/* Choix enfant */

.menu-modal-kids-option {
    padding: 18px 0;

    border-bottom: 1px solid #eee9df;
}

.menu-modal-kids-option h5 {
    margin: 0 0 12px;

    color: #123f34;

    font-size: 17px;
}

.menu-modal-kids-option p {
    margin: 0;

    color: #555;

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


/* Ce qui est compris */

.menu-modal-kids-included {
    margin-top: 24px;
    padding: 18px 20px;

    border-radius: 12px;

    background: #f7f1e7;
}

.menu-modal-kids-included > strong {
    display: block;

    margin-bottom: 9px;

    color: #123f34;

    font-size: 15px;
}

.menu-modal-kids-included p {
    margin: 0 0 8px;

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

.menu-modal-kids-included p:last-child {
    margin-bottom: 0;
}


/* Mobile */

@media (max-width: 850px) {

    .menu-modal-kids-card {
        padding: 22px 20px;
    }

    .menu-modal-kids-header {
        gap: 15px;
    }

    .menu-modal-kids-header h4 {
        font-size: 21px;
    }

    .menu-modal-kids-price strong {
        font-size: 22px;
    }

}

/* =========================================================
   PRODUCTEURS LOCAUX
========================================================= */

.producers-section {
    background: #f7f4ec;
}

.producers-heading {
    max-width: 760px;
    margin-bottom: 45px;
}

.producers-heading h2 {
    margin: 8px 0 18px;

    color: #123f34;

    font-size: clamp(34px, 5vw, 58px);
    line-height: 1.05;
}

.producers-intro {
    max-width: 650px;

    margin: 0;

    color: #555;

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


/* Cartes */

.producers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 18px;
}

.producer-card {
    position: relative;
    overflow: hidden;

    min-height: 280px;

    padding: 30px;

    border: 1px solid rgba(18, 63, 52, .08);
    border-radius: 18px;

    background: linear-gradient(
        145deg,
        #ffffff 0%,
        #fbfaf6 100%
    );

    box-shadow:
        0 8px 25px rgba(18, 63, 52, .07);
}

/* Une carte sur deux légèrement différente */

.producer-card:nth-child(even) {
    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f2f6f2 100%
        );
}

.producer-card:nth-child(even)::before {
    background: #123f34;
}

.producer-type {
    display: block;

    margin-bottom: 7px;

    color: #c78b36;

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

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

.producer-card h3 {
    margin: 0 0 5px;

    color: #123f34;

    font-size: 22px;
}

.producer-location {
    margin: 0 0 18px !important;

    color: #777 !important;

    font-size: 13px !important;
}

.producer-card p {
    margin: 0;

    color: #555;

    font-size: 15px;
    line-height: 1.6;
}


/* Message final */

.producers-message {
    position: relative;
    overflow: hidden;

    display: block;

    margin-top: 28px;
    padding: 30px 28px;

    border: 0;
    border-radius: 18px;

    background: #123f34;

    box-shadow:
        0 12px 30px rgba(18, 63, 52, .16);
}

.producers-message::after {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    right: -60px;
    bottom: -80px;

    border: 1px solid rgba(208, 191, 191, 0.1);
    border-radius: 50%;
}

.producers-message span {
    display: block;

    margin-bottom: 12px;

    color: #e0a653;

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

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

.producers-message p {
    position: relative;
    z-index: 1;

    max-width: 700px;

    margin: 0;

    color: #f7f4ec;

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

/* =========================================================
   PRODUCTEURS - MOBILE
========================================================= */

@media (max-width: 850px) {

    .producers-heading {
        margin-bottom: 30px;
    }

    .producers-heading h2 {
        font-size: 34px;
    }

    .producers-intro {
        font-size: 16px;
    }

    .producers-grid {
        grid-template-columns: 1fr;

        gap: 14px;
    }

    .producer-card {
        min-height: 0;

        padding: 24px 22px;
    }

    .producer-number {
        margin-bottom: 25px;
    }

    .producers-message {
    margin-top: 22px;
    padding: 26px 22px;
}

    .producers-message p {
    font-size: 15px;
    line-height: 1.65;
}

}

/* =========================================================
   MENU & TARIFS - NAVIGATION DESKTOP
========================================================= */

.navigation-menu-link {
    appearance: none;
    -webkit-appearance: none;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;

    color: inherit;
    font: inherit;
    font-weight: 600;
    line-height: inherit;

    text-decoration: none;

    cursor: pointer;
}

.navigation-menu-link:hover {
    color: inherit;
    background: transparent;
}

/* =========================================================
   CARTES MENU & TARIFS - DESKTOP
========================================================= */

@media (min-width: 851px) {

   @media (min-width: 851px) {

    .menu-modal-pricing-grid {
        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 20px !important;

        align-items: start !important;
    }

    .menu-modal-pricing-grid > :first-child {
        grid-column: 1 / -1 !important;
    }

    .menu-modal-pricing-grid > * {
        height: auto !important;
        min-height: 0 !important;
        align-self: start !important;
    }

} 

    .menu-modal-pricing-card {
        height: auto;
        min-height: 0;
        align-self: start;
    }

}

@media (min-width: 851px) {

    .menu-modal-dialog {
        padding-top: 0 !important;
    }

    .menu-modal-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 100 !important;

        margin:
            0
            -55px
            28px
            -55px !important;

        padding:
            38px
            85px
            24px
            55px !important;

        background: #f7f4ec !important;

        border-bottom:
            1px solid rgba(18, 63, 52, .10);

        box-shadow:
            0 8px 18px rgba(18, 63, 52, .05);
    }

    .menu-modal-close {
        top: 50% !important;
        right: 28px !important;

        transform: translateY(-50%) !important;
    }

}

/* =========================================================
   MENUS DE FÊTES - DEPUIS MENU & TARIFS
========================================================= */

.menu-modal-festive {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    margin-top: 24px;
    padding: 25px 28px;

    border: 1px solid rgba(199, 139, 54, .28);
    border-radius: 16px;

    background: #f2eadc;
}

.menu-modal-festive-text {
    max-width: 620px;
}

.menu-modal-festive-eyebrow {
    display: block;

    margin-bottom: 6px;

    color: #c78b36;

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

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

.menu-modal-festive-text > strong {
    display: block;

    margin-bottom: 6px;

    color: #123f34;

    font-size: 18px;
}

.menu-modal-festive-text p {
    margin: 0;

    color: #555;

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

.menu-modal-festive .button {
    flex: 0 0 auto;
    margin: 0;
}

@media (max-width: 850px) {

    .menu-modal-festive {
        flex-direction: column;
        align-items: stretch;

        gap: 18px;

        padding: 22px 20px;
    }

    .menu-modal-festive .button {
        width: 100%;
        text-align: center;
    }

}

/* =========================================================
   MODALE - CHOIX MENUS DE FÊTES
========================================================= */

.festive-menu-modal {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    z-index: 999999 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 100% !important;

    padding: 20px;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transition:
        opacity .22s ease,
        visibility .22s ease;
}


.festive-menu-modal.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.festive-menu-backdrop {
    position: absolute !important;
    inset: 0 !important;

    z-index: 1 !important;

    background: rgba(7, 25, 21, .76) !important;
    backdrop-filter: blur(5px);
}


.festive-menu-dialog {
    position: relative !important;

    z-index: 2 !important;

    display: block !important;

    width: min(100%, 760px) !important;

    padding: 42px;

    border-radius: 22px;

    background: #f7f4ec !important;

    opacity: 1 !important;
    visibility: visible !important;

    box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}

.festive-menu-close {
    position: absolute;
    top: 18px;
    right: 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    padding: 0;
    border: 0;
    border-radius: 50%;

    background: #123f34;
    color: #fff;

    font-size: 26px;
    line-height: 1;

    cursor: pointer;
}

.festive-menu-eyebrow {
    display: block;

    margin-bottom: 7px;

    color: #c78b36;

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

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

.festive-menu-dialog h2 {
    margin: 0 55px 12px 0;

    color: #123f34;

    font-size: 36px;
    line-height: 1.1;
}

.festive-menu-intro {
    max-width: 540px;

    margin: 0 0 28px;

    color: #5d625f;

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


/* Choix */

.festive-menu-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.festive-menu-choice {
    position: relative;

    min-height: 180px;

    padding: 27px;

    border: 1px solid rgba(199, 139, 54, .25);
    border-radius: 17px;

    background: #fff;

    font-family: inherit;
    text-align: left;

    cursor: pointer;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.festive-menu-choice:hover {
    transform: translateY(-3px);

    border-color: #c78b36;

    box-shadow:
        0 12px 28px rgba(18, 63, 52, .10);
}

.festive-menu-date {
    display: block;

    margin-bottom: 14px;

    color: #c78b36;

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

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

.festive-menu-choice strong {
    display: block;

    margin-bottom: 25px;

    color: #123f34;

    font-size: 24px;
    line-height: 1.2;
}

.festive-menu-link {
    color: #123f34;

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


/* Mobile */

@media (max-width: 850px) {

    .festive-menu-modal {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    .festive-menu-dialog {
        width: 100% !important;
        max-height: calc(100dvh - 25px);
        overflow-y: auto;

        padding: 34px 22px 26px;

        border-radius: 24px 24px 0 0;
    }

    .festive-menu-dialog h2 {
        font-size: 29px;
    }

    .festive-menu-grid {
        grid-template-columns: 1fr;
    }

    .festive-menu-choice {
        min-height: 145px;
    }
}

/* =========================================================
   MODALES - MENUS NOËL / NOUVEL AN
========================================================= */

.holiday-menu-modal {
    position: fixed;
    inset: 0;
    z-index: 1000000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 25px;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity .22s ease,
        visibility .22s ease;
}

.holiday-menu-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.holiday-menu-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(7, 25, 21, .80);
    backdrop-filter: blur(6px);
}

.holiday-menu-dialog {
    position: relative;
    z-index: 2;

    width: min(100%, 880px);
    max-height: calc(100vh - 50px);
    overflow-y: auto;

    padding: 45px 48px 38px;

    border-radius: 22px;

    background: #f7f4ec;

    box-shadow: 0 30px 90px rgba(0, 0, 0, .38);
}

.holiday-menu-close {
    position: absolute;
    top: 20px;
    right: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    padding: 0;
    border: 0;
    border-radius: 50%;

    background: #123f34;
    color: #fff;

    font-size: 27px;
    line-height: 1;

    cursor: pointer;
}


/* EN-TÊTE */

.holiday-menu-header {
    padding-right: 55px;
    margin-bottom: 34px;
}

.holiday-menu-date {
    display: block;

    margin-bottom: 8px;

    color: #c78b36;

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

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

.holiday-menu-header h2 {
    margin: 0 0 5px;

    color: #123f34;

    font-size: 38px;
    line-height: 1.1;
}

.holiday-menu-subtitle {
    color: #747872;

    font-size: 14px;
    font-style: italic;
}


/* CONTENU */

.holiday-menu-section {
    padding: 25px 0;

    border-top: 1px solid rgba(18, 63, 52, .12);
}

.holiday-menu-section-title {
    display: block;

    margin-bottom: 18px;

    color: #c78b36;

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

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

.holiday-menu-dishes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 15px;
}

.holiday-menu-dish {
    padding: 18px;

    border: 1px solid #e7e1d7;
    border-radius: 13px;

    background: #fff;
}

.holiday-menu-dish strong {
    display: block;

    margin-bottom: 7px;

    color: #123f34;

    font-size: 15px;
    line-height: 1.35;
}

.holiday-menu-dish > span:not(.holiday-menu-vegetarian) {
    display: block;

    color: #626762;

    font-size: 12px;
    line-height: 1.5;
}

.holiday-menu-vegetarian {
    display: inline-block;

    margin-top: 10px;

    color: #4f7d50;

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

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


/* APÉRITIF / FIN */

.holiday-menu-simple {
    display: flex;
    flex-wrap: wrap;

    gap: 8px 22px;
}

.holiday-menu-simple strong,
.holiday-menu-simple span {
    color: #123f34;

    font-size: 14px;
}

.holiday-menu-ending {
    padding-bottom: 8px;
}


/* BOUTON */

.holiday-menu-footer {
    margin-top: 28px;

    text-align: center;
}

.holiday-menu-footer .button {
    display: inline-flex;
}


/* BLOQUER LA PAGE DERRIÈRE */

body.holiday-menu-modal-open {
    overflow: hidden;
}


/* MOBILE */

@media (max-width: 850px) {

    .holiday-menu-modal {
        align-items: flex-end;
        padding: 0;
    }

    .holiday-menu-dialog {
        width: 100%;
        max-height: calc(100dvh - 20px);

        padding: 35px 20px 28px;

        border-radius: 24px 24px 0 0;
    }

    .holiday-menu-header {
        margin-bottom: 25px;
    }

    .holiday-menu-header h2 {
        font-size: 30px;
    }

    .holiday-menu-dishes {
        grid-template-columns: 1fr;
    }

    .holiday-menu-dish {
        padding: 16px;
    }

    .holiday-menu-footer .button {
        width: 100%;
        justify-content: center;
    }

.holiday-menu-dish {
    min-height: 135px;
    padding: 23px 20px 21px;
}

.holiday-menu-dish::before {
    left: 20px;
    right: 20px;
}

.holiday-menu-desserts .holiday-menu-dishes {
    grid-template-columns: 1fr;
}

}

/* =========================================================
   MENUS DE FÊTES - TITRES CENTRÉS
========================================================= */

.holiday-menu-header {
    padding-right: 0;
    text-align: center;
}

.holiday-menu-date {
    text-align: center;
}

.holiday-menu-header h2 {
    text-align: center;
}

.holiday-menu-subtitle {
    display: block;
    text-align: center;
}


/* Titres Apéritif / Entrée / Plat / Pour terminer */

.holiday-menu-section-title {
    display: block;
    width: 100%;

    margin-bottom: 22px;

    text-align: center;
}

.holiday-menu-simple {
    justify-content: center;
    text-align: center;
}

/* =========================================================
   MENUS DE FÊTES - CARTES ENTRÉES / PLATS
========================================================= */

.holiday-menu-dish {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 165px;

    padding: 26px 24px 24px;

    overflow: hidden;

    border: 1px solid rgba(199, 139, 54, .30);
    border-radius: 15px;

    background: #123f34;

    text-align: center;

    box-shadow:
        0 10px 24px rgba(18, 63, 52, .18),
        0 3px 7px rgba(18, 63, 52, .10);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}


/* Liseré ocre */

.holiday-menu-dish::before {
    content: "";

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

    height: 3px;

    border-radius: 0 0 3px 3px;

    background: #e0a653;
}


/* Nom de l'entrée / du plat */

.holiday-menu-dish strong {
    display: block;

    margin: 4px 0 10px;

    color: #f7f4ec;

    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;

    text-align: center;
}


/* Description */

.holiday-menu-dish > span:not(.holiday-menu-vegetarian) {
    display: block;

    color: rgba(247, 244, 236, .82);

    font-size: 13px;
    line-height: 1.55;

    text-align: center;
}


/* Mention végétarienne */

.holiday-menu-dish .holiday-menu-vegetarian {
    display: block;

    margin-top: 12px;

    color: #e0a653;

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

    text-transform: uppercase;
    letter-spacing: .07em;

    text-align: center;
}


/* Relief au survol sur ordinateur */

@media (hover: hover) {

    .holiday-menu-dish:hover {
        transform: translateY(-4px);

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

        box-shadow:
            0 16px 34px rgba(18, 63, 52, .24),
            0 5px 12px rgba(18, 63, 52, .12);
    }

}

/* =========================================================
   MENUS DE FÊTES - DESSERTS CENTRÉS
========================================================= */

.holiday-menu-section:has(
    .holiday-menu-section-title:first-child
) .holiday-menu-dishes {
    justify-content: center;
}

/* Desserts : 2 cartes centrées */

.holiday-menu-desserts .holiday-menu-dishes {
    grid-template-columns: repeat(2, minmax(0, 270px));
    justify-content: center;
}

/* =========================================================
   MENUS DE FÊTES - HABILLAGE PHOTO
========================================================= */

/* Base commune */

.holiday-menu-dialog {
    position: relative;
    isolation: isolate;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    max-height: calc(100vh - 50px) !important;

    background-color: #123f34;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    border: 1px solid rgba(255, 255, 255, .65);
}


/* =========================================================
   NOËL
   Remplacer "nom-photo.jpg" par le vrai nom du fichier
========================================================= */

.holiday-menu-christmas .holiday-menu-dialog {
    background-image:
        linear-gradient(
            rgba(7, 31, 26, .42),
            rgba(7, 31, 26, .52)
        ),
        url("/images/noel.jpg") !important;

    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}


.holiday-menu-newyear .holiday-menu-dialog {
    background-image:
        linear-gradient(
            rgba(7, 31, 26, .50),
            rgba(7, 31, 26, .60)
        ),
        url("/images/nouvel-an.jpg") !important;

    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}


/* =========================================================
   NOUVEL AN
   Remplacer "nom-photo.jpg" par le vrai nom du fichier
========================================================= */

.holiday-menu-newyear .holiday-menu-dialog {
    background-image:
        linear-gradient(
            rgba(8, 37, 30, .54),
            rgba(8, 37, 30, .66)
        ),
        url("/images/nouvel-an.jpg") !important;
}


/* =========================================================
   EFFET FENÊTRE ENNEIGÉE
========================================================= */

.holiday-menu-dialog {
    position: relative !important;
    isolation: isolate;

    border: 1px solid rgba(255, 255, 255, .75);

    box-shadow:
        0 30px 80px rgba(0, 0, 0, .38),
        inset 0 0 45px rgba(255, 255, 255, .18);
}

/* =========================================================
   MENUS DE FÊTES - GIVRE FIXE
========================================================= */

.holiday-menu-dialog {
    position: relative !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    max-height: calc(100dvh - 50px) !important;
}

/* Le contenu doit rester devant le fondu */

.holiday-menu-dialog > * {
    position: relative;
    z-index: 2;
}


/* =========================================================
   TITRES
========================================================= */

/*
   IMPORTANT :
   remplace 'TA_POLICE_HERO' par le font-family exact
   utilisé par "Soirée en dameuse" sur le hero.
*/

.holiday-menu-header h2,
.holiday-menu-section-title {
    font-family: Georgia, "Times New Roman", serif;
}


/* Menu de Noël / Menu du Nouvel An */

.holiday-menu-header h2 {
    color: #f7f4ec;

    font-size: 44px;
    font-weight: 400;

    text-shadow:
        0 2px 12px rgba(0, 0, 0, .35);
}


/* Date */

.holiday-menu-date {
    color: #e0a653;

    text-shadow:
        0 1px 6px rgba(0, 0, 0, .30);
}


/* Saveurs d'altitude */

.holiday-menu-subtitle {
    color: rgba(247, 244, 236, .88);

    text-shadow:
        0 1px 6px rgba(0, 0, 0, .35);
}


/* Apéritif / Entrée / Plat / Dessert / Pour terminer */

.holiday-menu-section-title {
    color: #e0a653;

    font-size: 22px;
    font-weight: 400;

    letter-spacing: .06em;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, .45);
}


/* =========================================================
   SÉPARATEURS
========================================================= */

.holiday-menu-section {
    border-top-color: rgba(247, 244, 236, .25);
}


/* =========================================================
   APÉRITIF / POUR TERMINER
========================================================= */

.holiday-menu-simple strong,
.holiday-menu-simple span {
    color: #f7f4ec;

    text-shadow:
        0 1px 5px rgba(0, 0, 0, .40);
}


/* =========================================================
   CARTES ENTRÉES / PLATS / DESSERTS
========================================================= */

.holiday-menu-dish {
    position: relative;

    background: rgba(18, 63, 52, .58);

    border: 1px solid rgba(224, 166, 83, .90);

    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .20),
        inset 0 0 0 1px rgba(255, 255, 255, .04);
}


/* On enlève l'ancien trait doré supérieur,
   puisque toute la carte possède maintenant son liseré */

.holiday-menu-dish::before {
    display: none;
}


/* Titres des plats */

.holiday-menu-dish strong {
    color: #f7f4ec;

    text-shadow:
        0 1px 5px rgba(0, 0, 0, .35);
}


/* Descriptions */

.holiday-menu-dish > span:not(.holiday-menu-vegetarian) {
    color: rgba(247, 244, 236, .86);

    text-shadow:
        0 1px 4px rgba(0, 0, 0, .30);
}


/* Végétarien */

.holiday-menu-dish .holiday-menu-vegetarian {
    color: #e0a653;
}


/* Survol */

@media (hover: hover) {

    .holiday-menu-dish:hover {
        transform: translateY(-4px);

        background: rgba(18, 63, 52, .72);

        border-color: #e0a653;

        box-shadow:
            0 16px 36px rgba(0, 0, 0, .28),
            0 0 0 1px rgba(224, 166, 83, .15);
    }

}


/* =========================================================
   BOUTON DE FERMETURE
========================================================= */

.holiday-menu-close {
    z-index: 10;

    border: 1px solid rgba(224, 166, 83, .55);

    background: rgba(18, 63, 52, .88);

    backdrop-filter: blur(5px);
}


/* =========================================================
   BOUTON RÉSERVER
========================================================= */

.holiday-menu-footer .button {
    border: 1px solid rgba(224, 166, 83, .65);

    background: rgba(18, 63, 52, .92);

    color: #f7f4ec;

    backdrop-filter: blur(5px);

    box-shadow:
        0 10px 25px rgba(0, 0, 0, .22);
}


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

@media (max-width: 850px) {

    .holiday-menu-dialog {
        background-position: center;
    }

    .holiday-menu-header h2 {
        font-size: 36px;
    }

    .holiday-menu-section-title {
        font-size: 19px;
    }

    .holiday-menu-dialog::before {
        box-shadow:
            inset 18px 0 28px rgba(255,255,255,.42),
            inset -18px 0 28px rgba(255,255,255,.42),
            inset 0 18px 28px rgba(255,255,255,.28),
            inset 0 -18px 28px rgba(255,255,255,.28);
    }

    .holiday-menu-dish {
        background: rgba(18, 63, 52, .66);
    }

}

/* =========================================================
   MENUS DE FÊTES - BORDS ENNEIGÉS
========================================================= */

.holiday-menu-dialog {
    border-radius: 22px;

    box-shadow:
        inset 22px 0 30px rgba(255,255,255,.42),
        inset -22px 0 30px rgba(255,255,255,.42),
        inset 0 10px 20px rgba(255,255,255,.24),
        inset 0 -10px 20px rgba(255,255,255,.24),
        0 30px 80px rgba(0,0,0,.38);
}


/* On neutralise les anciens pseudo-éléments */

.holiday-menu-dialog::before,
.holiday-menu-dialog::after {
    display: none !important;
}

/* Sélecteur de langue */

.site-language-selector {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.site-language-selector select {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    color: inherit;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 8px;
    padding: 9px 12px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    outline-offset: 3px;
}

.site-language-selector option {
    color: #222;
    background: #fff;
}

@media (max-width: 768px) {
    .site-language-selector select {
        padding: 7px 9px;
        font-size: 11px;
    }
}