/* =========================================================
   LE LUX — Overrides home v4 sur palette Cappa native
   Charge ce fichier APRÈS plugins.css et style.css de Cappa.
   Palette conservée : noir + accent doré chaud Cappa (swap LuX plus tard).
   ========================================================= */

/* -----------------------------
   00. Variables locales
   ----------------------------- */
:root {
    --lelux-black: #1c1c1e;
    --lelux-ivoire: #faf8f4;
    --lelux-ivoire-soft: #f5f3ef;
    --lelux-gold: #c8aa6e;        /* accent doré Cappa, à remplacer plus tard par #ECB8BE */
    --lelux-text-on-ivoire: #2a2a2b;
    --lelux-text-muted: #8a8a8c;
}

/* -----------------------------
   00bis. Eyebrows globaux — 20px partout sur la home
   ----------------------------- */
.section-subtitle,
.section-subtitle span {
    font-size: 20px !important;
}

/* -----------------------------
   00ter. Titres de section globaux — 36px + Barlow Condensed
   Cibles :
   - .section-title (tous les H2 de section)
   - .news .item .con h5 (titres vignettes Evenements)
   - .chambre-section .chambre-title (titre Chambre Mr R)
   - .blog-section .blog-card-title (titres vignettes Blog)
   - .testimonials-lelux .head-box h4 (titre "Temoignages")
   ----------------------------- */
.section-title {
    font-size: 36px !important;
}
.section-title,
.news .item .con h5,
.news .item .con h5 a,
.chambre-section .chambre-title,
.blog-section .blog-card-title,
.testimonials-lelux .testimonials-box .head-box h4 {
    font-family: 'Barlow Condensed', sans-serif !important;
}

/* -----------------------------
   01. Header — CTA "Devenir membre" en accent
   ----------------------------- */
.navbar-nav .nav-item.cta-membre .nav-link {
    border: 1px solid var(--lelux-gold);
    padding: 8px 18px !important;
    margin-left: 12px;
    transition: all 0.3s ease;
}
.navbar-nav .nav-item.cta-membre .nav-link:hover {
    background: var(--lelux-gold);
    color: var(--lelux-black) !important;
}

/* -----------------------------
   02. Hero — masquer la barre de réservation Cappa (téléphone)
   ----------------------------- */
.kenburns-section .reservation { display: none !important; }

/* Eyebrow du hero — couleur cuivre + 20px */
.kenburns-section .section-subtitle,
.kenburns-section .section-subtitle span {
    color: #aa8453 !important;
    font-size: 20px !important;
}

/* H1 du hero — Barlow Condensed 38px, casse normale */
.kenburns-section h1 {
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: 38px !important;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-transform: none;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 575px) {
    .kenburns-section h1 { font-size: 26px !important; line-height: 1.35; }
    .kenburns-section .section-subtitle,
    .kenburns-section .section-subtitle span { font-size: 16px !important; }
}

/* -----------------------------
   09bis. Témoignages — eyebrow "Elles, ils, en parlent" en 15px
   ----------------------------- */
.testimonials-lelux .testimonials-box .head-box h6 {
    font-size: 15px !important;
}

/* -----------------------------
   03. Trust strip — bandeau 5 piliers (composant ex nihilo)
   ----------------------------- */
.trust-strip {
    background: var(--lelux-black);
    border-top: 1px solid rgba(200, 170, 110, 0.25);
    border-bottom: 1px solid rgba(200, 170, 110, 0.25);
    padding: 28px 0;
    text-align: center;
}
.trust-strip .pillars {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px 28px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.trust-strip .pillars li {
    color: #d8d8d8;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 300;
    font-size: 14px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
}
.trust-strip .pillars li + li::before {
    content: "·";
    color: var(--lelux-gold);
    margin-right: 28px;
    font-size: 18px;
}
@media (max-width: 575px) {
    .trust-strip .pillars { gap: 8px 16px; }
    .trust-strip .pillars li { font-size: 12px; letter-spacing: 0.22em; }
    .trust-strip .pillars li + li::before { margin-right: 16px; }
}

/* -----------------------------
   04. Évènements — vignettes 4:5 (override news Cappa)
   ----------------------------- */
.events-section .item .position-re {
    aspect-ratio: 4 / 5;
    overflow: hidden;
}
.events-section .item .position-re img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Jour de la semaine ajoute en haut de la balise date */
.events-section .item .date a em.weekday {
    font-family: 'Barlow Condensed', sans-serif;
    display: block;
    font-size: 11px;
    line-height: 1.2;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-style: normal;
    color: inherit;
}
.events-section .events-cta {
    text-align: center;
    margin-top: 40px;
}
.events-section .events-intro {
    font-size: 17px;
}
/* Eyebrow "Nos prochains évènements" — 20px */
.events-section .section-subtitle,
.events-section .section-subtitle span {
    font-size: 20px !important;
}

/* -----------------------------
   05. Custom event — bandeau dramatique (recyclage Promo Video)
   ----------------------------- */
.custom-event {
    min-height: 480px;
    display: flex;
    align-items: center;
}
.custom-event .section-title { margin-bottom: 30px; }
/* Eyebrow "Votre fantasme, notre terrain de jeu" — couleur cuivre */
.custom-event .section-subtitle,
.custom-event .section-subtitle span {
    color: #aa8453 !important;
}

/* -----------------------------
   06. Philosophie — une seule photo (Mr R)
   ----------------------------- */
.philosophie-section .philosophie-photo {
    max-width: 480px;
    margin-left: auto;     /* aligne la photo a droite sur desktop */
    margin-right: 0;
}
.philosophie-section .philosophie-photo img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}
.philosophie-section p {
    font-size: 16px;
}
@media (max-width: 767px) {
    .philosophie-section .philosophie-photo {
        max-width: 100%;
        margin: 30px auto 0 auto;  /* recentre sous le texte sur mobile */
    }
}

/* -----------------------------
   07. Bandeau panoramique défilant — composant ex nihilo
   ----------------------------- */
.pano-strip {
    background: var(--lelux-black);
    overflow: hidden;
    padding: 120px 0;
    position: relative;
}
/* Espace entre l'en-tete (eyebrow + H2) et la bande horizontale */
.pano-strip .container + .pano-track {
    margin-top: 60px;
}
.pano-strip .pano-track {
    display: flex;
    width: max-content;
    animation: panoScroll 50s linear infinite;
    gap: 14px;
}
.pano-strip .pano-track:hover {
    animation-play-state: paused;
}
.pano-strip .pano-item {
    flex: 0 0 220px;
    height: 220px;
    overflow: hidden;
    position: relative;
}
.pano-strip .pano-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(0.92);
    transition: filter 0.3s ease;
}
.pano-strip .pano-item:hover img {
    filter: brightness(1);
}
.pano-strip .pano-cta {
    text-align: center;
    margin-top: 24px;
}
.pano-strip .pano-cta a {
    color: var(--lelux-gold);
    font-family: 'Barlow Condensed', sans-serif;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    font-size: 13px;
    text-decoration: none;
    border-bottom: 1px solid rgba(200, 170, 110, 0.4);
    padding-bottom: 4px;
    transition: border-color 0.3s ease;
}
.pano-strip .pano-cta a:hover {
    border-bottom-color: var(--lelux-gold);
}
@keyframes panoScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - 7px)); }
}
@media (max-width: 575px) {
    .pano-strip .pano-item { flex: 0 0 160px; height: 160px; }
}

/* -----------------------------
   08. Chambre Mr R — split aere image/texte (refonte v11)
   Layout calque sur la capture restaurant/spa :
   - image avec marges externes (pas de fond perdu)
   - texte respirant a droite avec bouton plein dore
   - hauteur naturelle (pas de min-height force)
   ----------------------------- */
.chambre-section.bg-darkblack {
    background: #0d0d0e !important;  /* legerement plus sombre que --lelux-black pour contraster avec le bloc image */
}
.chambre-section .chambre-img {
    overflow: hidden;
    line-height: 0;
}
.chambre-section .chambre-img img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.chambre-section .chambre-img a:hover img {
    transform: scale(1.04);
}
.chambre-section .chambre-content {
    padding: 0 30px;
}
.chambre-section .chambre-content .section-subtitle {
    color: var(--lelux-gold);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 400;
    margin-bottom: 18px;
}
.chambre-section .chambre-title {
    font-family: 'Gilda Display', serif;
    font-size: 36px;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 24px;
}
.chambre-section .chambre-content p {
    color: #c8c8c8;
    font-size: 16px;
    line-height: 1.85;
    margin-bottom: 0;
}
/* Bouton plein dore (style "LEARN MORE" de la capture) */
.butn-gold {
    display: inline-block;
}
.butn-gold a {
    display: inline-block;
    background: var(--lelux-gold);
    color: #1c1c1e;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 14px 32px;
    border: 1px solid var(--lelux-gold);
    transition: all 0.3s ease;
}
.butn-gold a:hover {
    background: transparent;
    color: var(--lelux-gold);
}
@media (max-width: 991px) {
    .chambre-section .chambre-content { padding: 30px 0 0 0; }
    .chambre-section .chambre-title { font-size: 32px; }
}

/* -----------------------------
   08bis. L'eau a la bouche — carousel articles blog
   Inspire de Cappa "Rooms & Suites" : vignette horizontale 16:10
   avec eyebrow type / titre / extrait en overlay sur le bas de l'image.
   ----------------------------- */
.blog-section.bg-darkblack {
    background: #222 !important;
}
.blog-section .blog-intro {
    color: #b8b8b8;
    font-size: 17px;
    line-height: 1.7;
    margin-top: 10px;
}
.blog-section .blog-carousel {
    position: relative;
}
.blog-section .blog-carousel .owl-stage-outer {
    overflow: hidden;
}
/* Carte article */
.blog-section .blog-card {
    margin: 0 12px;
}
.blog-section .blog-card-link {
    display: block;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}
/* Image 16:10 avec zoom au hover */
.blog-section .blog-card-img {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #1a1a1c;
}
.blog-section .blog-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s ease, filter 0.5s ease;
    filter: brightness(0.78);
}
.blog-section .blog-card-link:hover .blog-card-img img {
    transform: scale(1.05);
    filter: brightness(0.65);
}
/* Overlay texte en degrade sur la moitie basse de l'image */
.blog-section .blog-card-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 32px 32px 28px 32px;
    background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.7) 50%, rgba(0,0,0,0) 100%);
    color: #fff;
    transform: translateY(48px);
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.blog-section .blog-card-link:hover .blog-card-overlay {
    transform: translateY(0);
}
.blog-section .blog-card-kind {
    display: inline-block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--lelux-gold);
    border: 1px solid rgba(200, 170, 110, 0.6);
    padding: 4px 12px;
    margin-bottom: 14px;
}
.blog-section .blog-card-title {
    font-family: 'Gilda Display', serif;
    font-size: 26px;
    color: #fff;
    margin: 0 0 10px 0;
    line-height: 1.25;
    position: relative;
    padding-bottom: 12px;
}
/* Trait dore qui s'allonge sous le titre au hover */
.blog-section .blog-card-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 30px;
    background: var(--lelux-gold);
    transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.blog-section .blog-card-link:hover .blog-card-title::after {
    width: 100%;
}
.blog-section .blog-card-excerpt {
    color: #d0d0d0;
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 12px 0;
    /* Limite a 2 lignes max pour un rendu propre */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Cache au repos, revele au hover (avec leger delai) */
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
}
.blog-section .blog-card-link:hover .blog-card-excerpt {
    opacity: 1;
    transform: translateY(0);
}
.blog-section .blog-card-cta {
    display: inline-block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--lelux-gold);
    /* Cache au repos, revele au hover (avec delai un peu plus long) */
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s, letter-spacing 0.3s ease;
}
.blog-section .blog-card-link:hover .blog-card-cta {
    opacity: 1;
    transform: translateY(0);
    letter-spacing: 0.3em;
}
/* Fleches de navigation Owl — positionnees en bas, encadrant le CTA "Tous les articles".
   Toujours visibles, en flux normal (pas en absolute).
   Cercles outline blancs, style coherent avec le reste de la home. */
.blog-section .owl-theme .owl-nav {
    /* Fleches en flux normal : on enleve le positionnement absolute */
    position: static;
    margin: 0;
    text-align: center;
    width: auto;
    transform: none;
    z-index: auto;
    pointer-events: auto;
}
/* Positionnement structurel : fleches en flux normal autour du CTA */
.blog-section .owl-theme .owl-prev,
.blog-section .owl-theme .owl-next {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    opacity: 1 !important;
}
/* Couleur : on cible le chemin DOM reel apres deplacement JS
   (le bouton n'est plus enfant de .owl-theme apres reorganisation) */
.blog-section .blog-cta-row .blog-nav-slot .owl-prev,
.blog-section .blog-cta-row .blog-nav-slot .owl-next {
    color: #fff !important;
    background: transparent !important;
    border: none !important;
}
.blog-section .blog-cta-row .blog-nav-slot .owl-prev:hover,
.blog-section .blog-cta-row .blog-nav-slot .owl-next:hover {
    color: var(--lelux-gold) !important;
    background: transparent !important;
}
/* Cibler aussi le span enfant qui porte l'icone Themify */
.blog-section .blog-cta-row .blog-nav-slot .owl-prev > span,
.blog-section .blog-cta-row .blog-nav-slot .owl-next > span {
    color: inherit !important;
}
.blog-section .owl-theme .owl-prev > span,
.blog-section .owl-theme .owl-next > span {
    line-height: 1;
}
/* Bloc bas : fleches + CTA "Tous les articles" alignes horizontalement */
.blog-section .blog-cta-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    margin-top: 50px;
    flex-wrap: wrap;
}
/* CTA bas de section */
.blog-section .blog-cta {
    text-align: center;
    margin-top: 40px;
}
@media (max-width: 767px) {
    .blog-section .blog-card-overlay { padding: 22px 20px 20px 20px; }
    .blog-section .blog-card-title { font-size: 22px; }
    .blog-section .blog-card-excerpt { font-size: 13px; }
}

/* -----------------------------
   09. Témoignages — slider multi-items (override testimonials)
   On garde le slider Cappa mais sans note 5 étoiles, sans avatar,
   et on autorise plusieurs témoignages visibles sur desktop.
   ----------------------------- */
.testimonials-lelux .testimonials-box .head-box h6 {
    color: var(--lelux-gold);
    letter-spacing: 0.25em;
}
.testimonials-lelux .testimonials-box .head-box h4 {
    font-style: italic;
}
.testimonials-lelux .item p {
    font-size: 17px;
    line-height: 1.75;
    font-style: italic;
}
.testimonials-lelux .item .info {
    margin-top: 20px;
    text-align: center;
}
.testimonials-lelux .item .info .author-name {
    color: var(--lelux-gold);
    font-family: 'Gilda Display', serif;
    font-size: 18px;
    letter-spacing: 0.05em;
}
.testimonials-lelux .item .info .author-meta {
    color: #b0b0b0;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-top: 4px;
    display: block;
}

/* -----------------------------
   10. Devenir membre — split ivoire inversé (composant ex nihilo)
   ----------------------------- */
.devenir-membre-section {
    background: #dadada;
    border-top: 1px solid rgba(200, 170, 110, 0.4);
    border-bottom: 1px solid rgba(200, 170, 110, 0.4);
    padding: 90px 0;
    color: var(--lelux-text-on-ivoire);
}
.devenir-membre-section .section-subtitle {
    color: var(--lelux-gold) !important;
    letter-spacing: 0.3em;
}
.devenir-membre-section .section-title,
.devenir-membre-section h2,
.devenir-membre-section h4 {
    color: var(--lelux-text-on-ivoire) !important;
}
.devenir-membre-section p {
    color: #555 !important;
    font-size: 17px;
    line-height: 1.8;
}
.devenir-membre-section .butn-dark a,
.devenir-membre-section .butn-light a {
    background: var(--lelux-text-on-ivoire);
    color: var(--lelux-ivoire) !important;
    border: 1px solid var(--lelux-text-on-ivoire);
}
.devenir-membre-section .butn-dark a:hover {
    background: transparent;
    color: var(--lelux-text-on-ivoire) !important;
}
.devenir-membre-section .secondary-line {
    color: var(--lelux-text-muted);
    font-style: italic;
    margin-top: 20px;
    font-size: 14px;
}
.devenir-membre-section .photo-noble img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

/* -----------------------------
   11. Footer — 5 colonnes + bandeau bas 6 pages techniques
   ----------------------------- */
.footer-lelux .footer-column h3.footer-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    letter-spacing: 0.25em;
    color: var(--lelux-gold);
    margin-bottom: 22px;
}
.footer-lelux .footer-column ul.footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-lelux .footer-column ul.footer-list li {
    margin-bottom: 8px;
}
.footer-lelux .footer-column ul.footer-list a {
    color: #b8b8b8;
    font-size: 14px;
    text-decoration: none;
    transition: color 0.3s ease;
}
.footer-lelux .footer-column ul.footer-list a:hover {
    color: var(--lelux-gold);
}
.footer-lelux .footer-tagline {
    color: #b8b8b8;
    font-size: 14px;
    margin-top: 12px;
    line-height: 1.6;
    font-style: italic;
}
.footer-lelux .footer-social {
    margin-top: 18px;
    display: flex;
    gap: 12px;
}
.footer-lelux .footer-social a {
    color: #b8b8b8;
    font-size: 18px;
    transition: color 0.3s ease;
}
.footer-lelux .footer-social a:hover {
    color: var(--lelux-gold);
}
.footer-lelux .footer-language-switch {
    margin-top: 18px;
    color: #b8b8b8;
    font-size: 13px;
}
.footer-lelux .footer-language-switch a {
    color: #b8b8b8;
    text-decoration: none;
}
.footer-lelux .footer-language-switch a.active {
    color: var(--lelux-gold);
}
.footer-lelux .footer-legal-bar {
    background: #0d0d0e;
    padding: 18px 0;
    border-top: 1px solid rgba(200, 170, 110, 0.15);
}
.footer-lelux .footer-legal-bar .legal-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: center;
    font-size: 12px;
    color: var(--lelux-text-muted);
}
.footer-lelux .footer-legal-bar .legal-list a {
    color: var(--lelux-text-muted);
    text-decoration: none;
}
.footer-lelux .footer-legal-bar .legal-list a:hover {
    color: var(--lelux-gold);
}
.footer-lelux .footer-mentions {
    text-align: center;
    color: var(--lelux-text-muted);
    font-size: 11px;
    margin-top: 10px;
    letter-spacing: 0.05em;
}

/* -----------------------------
   12. Overlay vérification d'âge — composant ex nihilo
   ----------------------------- */
#age-gate-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(0, 0, 0, 0.97);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(8px);
}
#age-gate-overlay.hidden { display: none; }
#age-gate-overlay .age-gate-box {
    max-width: 480px;
    width: 100%;
    background: var(--lelux-black);
    border: 1px solid var(--lelux-gold);
    padding: 50px 40px;
    text-align: center;
    color: #fff;
}
#age-gate-overlay .age-gate-eyebrow {
    color: var(--lelux-gold);
    letter-spacing: 0.3em;
    font-size: 12px;
    text-transform: uppercase;
    font-family: 'Barlow Condensed', sans-serif;
    margin-bottom: 20px;
}
#age-gate-overlay h2 {
    font-family: 'Gilda Display', serif;
    font-size: 28px;
    color: #fff;
    margin-bottom: 14px;
    line-height: 1.3;
}
#age-gate-overlay p {
    color: #b8b8b8;
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 30px;
}
#age-gate-overlay .age-gate-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
#age-gate-overlay button {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    padding: 14px 28px;
    border: 1px solid var(--lelux-gold);
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 140px;
}
#age-gate-overlay button.primary {
    background: var(--lelux-gold);
    color: var(--lelux-black);
}
#age-gate-overlay button.primary:hover {
    background: transparent;
    color: var(--lelux-gold);
}
#age-gate-overlay button.secondary:hover {
    background: var(--lelux-gold);
    color: var(--lelux-black);
}
#age-gate-overlay .age-gate-legal {
    color: #666;
    font-size: 11px;
    margin-top: 24px;
    line-height: 1.6;
}