/* ============================================================
   Le Kastelet — Design system « cabaret chic »
   Rouge rideau, doré, crème — élégant, théâtral, lisible.
   ============================================================ */

:root {
    /* Palette */
    --kst-noir:        #1b1114;   /* fond sombre (hero, footer) */
    --kst-noir-2:      #241820;   /* variation panneaux sombres */
    --kst-rideau:      #8f1d2c;   /* rouge rideau — CTA, accents */
    --kst-rideau-dark: #6e1420;   /* hover */
    --kst-rideau-soft: #b23a49;   /* accents secondaires */
    --kst-or:          #c9a35a;   /* doré — filets, badges, détails */
    --kst-or-clair:    #e6cf9a;   /* doré clair sur fond sombre */
    --kst-creme:       #f6eedd;   /* fonds de sections chaudes */
    --kst-papier:      #fdfaf2;   /* fond de page */
    --kst-encre:       #2b2124;   /* texte principal */
    --kst-muted:       #7d6d68;   /* texte secondaire */
    --kst-bordure:     #dcc9a8;   /* bordures chaudes */
    --kst-shadow:      0 14px 34px rgba(27, 17, 20, .12);

    /* Typo */
    --kst-font-display: 'Playfair Display', Georgia, serif;
    --kst-font-body:    'Inter', -apple-system, sans-serif;
}

/* ── Base ── */
* { box-sizing: border-box; }
body {
    margin: 0;
    background: var(--kst-papier);
    color: var(--kst-encre);
    font-family: var(--kst-font-body);
    font-size: 1rem;
    line-height: 1.65;
}
h1, h2, h3, .kst-display {
    font-family: var(--kst-font-display);
    font-weight: 700;
    line-height: 1.2;
    color: var(--kst-encre);
}
a { color: var(--kst-rideau); }
img { max-width: 100%; }

/* ── Filet doré décoratif ── */
.kst-filet {
    display: flex; align-items: center; gap: .8rem;
    color: var(--kst-or); font-size: .8rem; letter-spacing: .35em;
    text-transform: uppercase; font-weight: 600;
}
.kst-filet::before, .kst-filet.center::after {
    content: ''; height: 1px; width: 48px; background: var(--kst-or);
}
.kst-filet.center { justify-content: center; }

/* ── Boutons ── */
.btn-kst {
    display: inline-block; padding: .7rem 1.6rem;
    background: var(--kst-rideau); color: #fff !important;
    border: none; border-radius: 4px;
    font-weight: 600; font-size: .95rem; text-decoration: none;
    transition: background .15s ease, transform .15s ease;
}
.btn-kst:hover { background: var(--kst-rideau-dark); transform: translateY(-1px); }
.btn-kst-or {
    display: inline-block; padding: .7rem 1.6rem;
    background: transparent; color: var(--kst-or-clair) !important;
    border: 1px solid var(--kst-or); border-radius: 4px;
    font-weight: 600; font-size: .95rem; text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.btn-kst-or:hover { background: var(--kst-or); color: var(--kst-noir) !important; }
.btn-kst-outline {
    display: inline-block; padding: .7rem 1.6rem;
    background: transparent; color: var(--kst-encre) !important;
    border: 1px solid var(--kst-bordure); border-radius: 4px;
    font-weight: 600; font-size: .95rem; text-decoration: none;
    transition: border-color .15s ease;
}
.btn-kst-outline:hover { border-color: var(--kst-rideau); color: var(--kst-rideau) !important; }

/* ── Navbar ── */
.kst-nav {
    background: var(--kst-noir);
    border-bottom: 1px solid rgba(201, 163, 90, .35);
}
.kst-nav .navbar-brand img { height: 52px; }
.kst-nav .nav-link {
    color: #efe6d4 !important; font-weight: 500; font-size: .95rem;
    letter-spacing: .02em; margin: 0 .35rem;
}
.kst-nav .nav-link:hover, .kst-nav .nav-link.active { color: var(--kst-or-clair) !important; }
.kst-nav .btn-kst { padding: .45rem 1.1rem; font-size: .88rem; }

/* ── Hero ── */
.kst-hero {
    position: relative; color: #fff;
    background: var(--kst-noir);
    overflow: hidden;
}
.kst-hero .hero-bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: .42; filter: saturate(.9);
}
.kst-hero .hero-veil {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(27,17,20,.5) 0%, rgba(27,17,20,.82) 100%);
}
.kst-hero .hero-inner { position: relative; padding-top: 6.5rem; padding-bottom: 5.5rem; }
.kst-hero h1 { color: #fff; font-size: clamp(2.1rem, 4.5vw, 3.4rem); }
.kst-hero h1 em { font-style: normal; color: var(--kst-or-clair); }
.kst-hero .lead-kst { color: #e8ddca; font-size: 1.12rem; max-width: 620px; }

/* ── Sections ── */
.kst-section { padding: 4.2rem 0; }
.kst-section.creme { background: var(--kst-creme); }
.kst-section.sombre { background: var(--kst-noir); color: #efe6d4; }
.kst-section.sombre h2 { color: #fff; }
.kst-section h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: .4rem; }
.kst-sub { color: var(--kst-muted); max-width: 640px; }
.kst-section.sombre .kst-sub { color: #cbbba5; }

/* ── Cards usage / salle ── */
.kst-card {
    background: #fff; border: 1px solid var(--kst-bordure);
    border-radius: 10px; overflow: hidden; height: 100%;
    box-shadow: var(--kst-shadow);
    display: flex; flex-direction: column;
}
.kst-card .card-img { height: 210px; background-size: cover; background-position: center; }
.kst-card .card-bd { padding: 1.3rem 1.4rem; flex: 1; display: flex; flex-direction: column; }
.kst-card h3 { font-size: 1.25rem; margin: 0 0 .5rem; }
.kst-card p { color: var(--kst-muted); font-size: .93rem; margin: 0 0 1rem; }
.kst-card .card-cta { margin-top: auto; }

/* Usage tuile (sans photo) */
.kst-usage {
    background: #fff; border: 1px solid var(--kst-bordure); border-radius: 10px;
    padding: 1.5rem 1.4rem; height: 100%;
    transition: transform .15s ease, box-shadow .15s ease;
}
.kst-usage:hover { transform: translateY(-3px); box-shadow: var(--kst-shadow); }
.kst-usage .usage-ico {
    width: 46px; height: 46px; border-radius: 8px;
    background: var(--kst-rideau); color: var(--kst-or-clair);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; margin-bottom: .9rem;
}
.kst-usage h3 { font-size: 1.08rem; margin: 0 0 .4rem; }
.kst-usage p { color: var(--kst-muted); font-size: .88rem; margin: 0; }
.kst-usage a { text-decoration: none; color: inherit; }

/* ── Chiffres clés ── */
.kst-chiffre { text-align: center; }
.kst-chiffre b {
    display: block; font-family: var(--kst-font-display);
    font-size: 2.2rem; color: var(--kst-or);
}
.kst-chiffre span { color: inherit; opacity: .8; font-size: .88rem; }
@media (max-width: 575px) {
    .kst-chiffre b { font-size: 1.6rem; }
    .kst-chiffre span { font-size: .74rem; }
    .kst-hero .hero-inner { padding-top: 4.5rem; padding-bottom: 3.8rem; }
}

/* ── Agenda ── */
.kst-event {
    display: flex; gap: 1.1rem; align-items: center;
    background: #fff; border: 1px solid var(--kst-bordure);
    border-radius: 10px; padding: 1rem 1.2rem;
}
.kst-event .event-date {
    flex-shrink: 0; width: 64px; text-align: center;
    background: var(--kst-noir); color: var(--kst-or-clair);
    border-radius: 8px; padding: .5rem 0; line-height: 1.15;
}
.kst-event .event-date b { display: block; font-size: 1.35rem; font-family: var(--kst-font-display); }
.kst-event .event-date small { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }
.kst-event h3 { font-size: 1.05rem; margin: 0; }
.kst-event .event-salle { color: var(--kst-muted); font-size: .85rem; }

/* ── FAQ (accordéon) ── */
.kst-faq-cat {
    font-size: 1.35rem !important;
    margin: 2rem 0 .9rem;
    padding-left: .9rem;
    border-left: 3px solid var(--kst-or);
}
.kst-faq-cat:first-of-type { margin-top: 0; }
.kst-faq .accordion-item {
    background: #fff;
    border: 1px solid var(--kst-bordure);
    border-radius: 10px !important;
    margin-bottom: .7rem;
    overflow: hidden;
}
.kst-faq .accordion-header { margin: 0; }
.kst-faq .accordion-button {
    font-family: var(--kst-font-display);
    font-weight: 700; font-size: 1.05rem;
    color: var(--kst-encre); background: #fff;
    padding: 1rem 1.2rem; box-shadow: none;
}
.kst-faq .accordion-button:not(.collapsed) {
    color: var(--kst-rideau);
    background: var(--kst-creme);
    box-shadow: none;
}
.kst-faq .accordion-button:focus {
    box-shadow: 0 0 0 .18rem rgba(201, 163, 90, .35);
    border-color: var(--kst-bordure);
}
.kst-faq .accordion-button::after {
    filter: sepia(1) saturate(2) hue-rotate(320deg);
}
.kst-faq .accordion-body {
    padding: .2rem 1.2rem 1.2rem;
    color: var(--kst-muted); font-size: .95rem;
}
.kst-faq .accordion-body p:last-child { margin-bottom: 0; }
.kst-faq .accordion-body a { color: var(--kst-rideau); }

/* ── Footer ── */
.kst-footer {
    background: var(--kst-noir); color: #cbbba5;
    padding: 3rem 0 2rem; margin-top: 0;
    border-top: 2px solid var(--kst-or);
    font-size: .9rem;
}
.kst-footer h4 {
    color: var(--kst-or-clair); font-family: var(--kst-font-display);
    font-size: 1.05rem; margin-bottom: .8rem;
}
.kst-footer a { color: #e8ddca; text-decoration: none; }
.kst-footer a:hover { color: var(--kst-or-clair); }
.kst-footer .footer-bas {
    border-top: 1px solid rgba(201,163,90,.25);
    margin-top: 2rem; padding-top: 1.2rem;
    font-size: .8rem; color: #9d8b80;
}

/* Menu mobile : la nav est sticky-top ; sans plafond de hauteur, un menu long
   dépasse le bas de l'écran et n'est PAS scrollable (c'est la page qui défile
   derrière — bug constaté puis corrigé sur mariska.fr le 19/08/2026).
   Préventif ici : le menu Kastelet est court aujourd'hui, aucun effet visible. */
@media (max-width:991.98px){
  .kst-nav .navbar-collapse{max-height:calc(100vh - 72px);max-height:calc(100dvh - 72px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
  .kst-nav .navbar-collapse .navbar-nav{padding-bottom:.75rem;}
}