:root {
    --primary-background: #F7F3EB;
    --surface-card: #FFFFFF;
    --header-footer-background: #173C32;
    --accent-terracotta: #B85C38;
    --accent-terracotta-hover: #9E4C2D;
    --text-main-graphite: #252525;
    --text-secondary-muted: #5A605B;
    --text-light-on-dark: #FFFFFF;
    --text-light-muted-on-dark: #CBD5D1;
    --border-subtle: #E4DDD3;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--primary-background);
    color: var(--text-main-graphite);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Playfair Display', serif;
    margin-top: 0;
    font-weight: 700;
    line-height: 1.2;
}

h1 {
    font-size: clamp(2.25rem, 5vw, 3.75rem);
}

h2 {
    font-size: clamp(1.85rem, 4vw, 2.75rem);
}

h3 {
    font-size: clamp(1.35rem, 2.5vw, 1.75rem);
}

h4 {
    font-size: 1.25rem;
}

p {
    margin-top: 0;
    margin-bottom: 1rem;
}

p:last-child {
    margin-bottom: 0;
}

a,
a:hover,
a:focus {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

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

:focus-visible {
    outline: 2px solid var(--accent-terracotta);
    outline-offset: 2px;
}

@media (max-width: 768px) {
    h1 {
        font-size: clamp(1.85rem, 7vw, 2.4rem);
        word-wrap: break-word;
    }

    h2 {
        font-size: clamp(1.5rem, 6vw, 2rem);
        word-wrap: break-word;
    }

    h3 {
        font-size: 1.25rem;
        word-wrap: break-word;
    }

    h4,
    h5,
    h6 {
        font-size: 1.1rem;
        word-wrap: break-word;
    }

    a[href^="mailto:"],
    a[href^="tel:"],
    .break-word-mobile {
        word-break: break-all;
        font-size: 0.95rem;
    }

    .legal-content-wrapper {
        padding-top: 2rem !important;
    }
}

/* ===== header ===== */
.js-mobile-menu.open {
    max-height: 360px !important;
}

/* ===== hero ===== */
#hero {
    overflow: hidden;
    width: 100%;
    position: relative;
}

#hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== about ===== */
#a-propos {
    overflow: hidden;
}

#a-propos img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== program ===== */
#programme {
    overflow: hidden;
    width: 100%;
}

#programme article img {
    transition: transform 0.4s ease;
}

#programme article:hover img {
    transform: scale(1.03);
}

/* ===== tickets ===== */
#billetterie {
    hyphens: auto;
    word-break: break-word;
}

/* ===== courts ===== */
#courts {
    overflow: hidden;
}

.js-modal-dialog:not(.hidden) {
    display: flex;
    animation: courtsFadeIn 0.25s ease-out;
}

@keyframes courtsFadeIn {
    from {
        opacity: 0;
        transform: scale(0.98);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===== visiting_guide ===== */
#visite {
    hyphens: auto;
}

#visite .js-guide-modal.hidden {
    display: none;
}

#visite .js-guide-modal:not(.hidden) {
    display: flex;
}

/* ===== gallery ===== */
#galerie {
    overflow: hidden;
}

#galerie .js-gallery-item {
    transition: box-shadow .3s ease, transform .3s ease;
}

#galerie .js-gallery-item:hover {
    box-shadow: 0 10px 25px -5px rgba(23, 60, 50, .12);
    transform: translateY(-2px);
}

/* ===== why_visit ===== */
#pourquoi-venir {
    hyphens: auto;
}

#pourquoi-venir .js-card {
    transform: translateY(0);
}

#pourquoi-venir .js-card:hover {
    transform: translateY(-4px);
}

/* ===== faq ===== */
#faq {
    hyphens: auto;
}

#faq .js-faq-item.active {
    border-color: #B85C38;
    box-shadow: 0 4px 12px rgba(184, 92, 56, 0.08);
}

#faq .js-faq-item.active .js-faq-icon {
    transform: rotate(180deg);
    color: #B85C38;
}

/* ===== footer ===== */
#footer {
    overflow: hidden;
    background-color: #173C32;
    color: #CBD5D1;
}

#footer h3 {
    hyphens: auto;
    line-height: 1.2;
}

#footer a {
    hyphens: auto;
}

#footer iframe {
    filter: brightness(0.9) contrast(1.1);
}