/**
 * Styles unifiés pour les pages single des CPT membres (place, artist, …).
 * Inspirés de la maquette graphiste (Le Grand Raccard, Eskal).
 *
 * Palette :
 *   --eks-accent      : #b85c2c  (terra-cotta, accent principal)
 *   --eks-accent-deep : #8c3a2e  (rouge brique, titres + CTA)
 *   --eks-beige       : #f5e8d0  (sections / cards info)
 *   --eks-beige-soft  : #faf3e6
 *   --eks-text        : #2b2b2b
 *   --eks-muted       : #6a6a6a
 *   --eks-line        : #e5dccb
 */

:root {
    --eks-accent: #b85c2c;
    --eks-accent-deep: #8c3a2e;
    --eks-beige: #f5e8d0;
    --eks-beige-soft: #faf3e6;
    --eks-text: #2b2b2b;
    --eks-muted: #6a6a6a;
    --eks-line: #e5dccb;
}

/* ---------- Container & sections ---------- */

.eks-cpt-container {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 32px;
    padding-right: 32px;
    box-sizing: border-box;
}

.eks-cpt-section {
    padding: 56px 0;
}
.eks-cpt-section--beige        { background: var(--eks-beige-soft); }
.eks-cpt-section--accent       { background: var(--eks-accent-deep); color: #fff; }
.eks-cpt-section--gallery-strip { padding-top: 36px; padding-bottom: 12px; background: #fff; }

.eks-cpt-section__title {
    margin: 0 0 32px 0;
    color: var(--eks-accent-deep);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.2;
}
.eks-cpt-section__title--light { color: #fff; }

/* ---------- HEADER : voile dégradé subtil derrière le logo en haut à gauche
   Garantit la lisibilité du logo (et son contour) sur n'importe quel fond
   image. Pseudo-élément posé sur le <header> du theme. Pas une card —
   juste un fondu vers noir doux qui s'estompe rapidement vers le centre. */

/* Voile blanc translucide + blur derrière le logo Eksperiens/Festival.
   Le logo est bi-tonal (noir + turquoise + gris) — aucun fond image ne peut
   accommoder les 3 teintes simultanément. On uniformise le fond par un voile
   blanc mid + blur pour donner un contraste correct au noir, et on renforce
   les éléments clairs du logo via un drop-shadow sombre côté CSS. */
.eks-site-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 34%;
    max-width: 440px;
    height: 40%;
    max-height: 240px;
    background: radial-gradient(ellipse at top left,
        rgba(245, 245, 245, 0.55) 0%,
        rgba(245, 245, 245, 0.30) 35%,
        rgba(245, 245, 245, 0.10) 60%,
        rgba(245, 245, 245, 0) 80%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 38;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse at top left, #000 0%, #000 40%, transparent 80%);
            mask-image: radial-gradient(ellipse at top left, #000 0%, #000 40%, transparent 80%);
}

/* Halo cumulé sombre+clair sur le logo lui-même : les éléments noirs gagnent
   un léger halo blanc (visibles sur fond sombre), les éléments clairs gagnent
   un léger halo sombre (visibles sur fond clair). Compromis "marche partout"
   en attendant un logo monochrome dédié du graphiste. */
.eks-site-header .logo img,
.eks-site-header .logo svg {
    filter:
        drop-shadow(0 0 1px rgba(255, 255, 255, 0.6))
        drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
}

/* ---------- HEADER TITLE (single CPT membres) ----------
   Texte simple sur le hero (pas de card). Catégorie en blanc petit-caps,
   titre en grand terra-cotta. Marche en mobile car pas de container fixe. */

.eks-cpt-header-title {
    /* .page-title-container parent gère déjà le positionnement. On override
       le rendu standard du h1 en un bloc plus riche. */
    color: #fff;
}
.eks-cpt-header-title__category {
    margin: 0 0 8px;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #fff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7), 0 1px 1px rgba(0, 0, 0, 0.5);
}
.eks-cpt-header-title__main {
    margin: 0;
    font-size: clamp(1.9rem, 4.2vw, 3.4rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.015em;
    line-height: 1.05;
    color: var(--eks-accent, #b85c2c);
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.7), 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* ---------- INFO CARD (en tête de l'article, sous le hero) ----------
   Remplace l'ancien glassmorphism qui était dans le header. Placée dans
   le contenu, on garde l'aspect glass mais sur fond contenu — fonctionne
   nickel en mobile (pas posée sur l'image, pas de souci de positionnement). */

/* Carte glassmorphism en tête de contenu : domain + excerpt à gauche, photo
   principale à droite. Sur fond blanc, le backdrop-filter ne fait pas
   grand-chose seul — on simule le glass avec un gradient warm, une border
   claire semi-transparente et une ombre douce profonde. */

.eks-info-card {
    position: relative;
    margin: 0 0 40px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(255, 252, 247, 0.92) 0%, rgba(245, 232, 208, 0.55) 100%);
    backdrop-filter: blur(10px) saturate(110%);
    -webkit-backdrop-filter: blur(10px) saturate(110%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 12px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7) inset,
        0 8px 28px rgba(140, 58, 46, 0.08),
        0 2px 6px rgba(0, 0, 0, 0.04);
}
.eks-info-card--with-media {
    grid-template-columns: minmax(0, 1fr) minmax(0, 38%);
}
/* Fil accent en haut */
.eks-info-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--eks-accent, #b85c2c) 0%, transparent 70%);
    z-index: 1;
}

.eks-info-card__body {
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
.eks-info-card__media {
    position: relative;
    min-height: 220px;
    background: #efe7d7;
}
.eks-info-card__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.eks-info-card__domain {
    margin: 0;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--eks-accent-deep, #8c3a2e);
}

.eks-info-card__lead {
    font-size: 1.08rem;
    line-height: 1.6;
    color: var(--eks-text, #2b2b2b);
    font-weight: 400;
}
.eks-info-card__lead > p { margin: 0 0 0.7em; }
.eks-info-card__lead > p:last-child { margin-bottom: 0; }
.eks-info-card__lead span[id^="isPasted"] { display: contents; }

@media (max-width: 900px) {
    .eks-info-card--with-media { grid-template-columns: 1fr; }
    .eks-info-card__media { aspect-ratio: 16 / 9; min-height: 0; }
}
@media (max-width: 768px) {
    .eks-info-card { border-radius: 10px; margin-bottom: 28px; }
    .eks-info-card__body { padding: 22px 22px; }
    .eks-info-card__lead { font-size: 1rem; }
}

/* ---------- KICKER + LEAD (intro de l'article) ---------- */
.eks-cpt-content__kicker {
    margin: 0 0 12px;
    color: var(--eks-accent);
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 700;
}
.eks-cpt-content__lead {
    margin: 0 0 24px;
    color: var(--eks-text);
    font-size: 1.18rem;
    line-height: 1.55;
    font-weight: 500;
    font-style: italic;
}

/* ---------- GALLERY STRIP : 1 grande + 4 petites ---------- */

.eks-cpt-strip {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 8px;
    height: clamp(280px, 42vw, 460px);
}
.eks-cpt-strip__item {
    position: relative;
    overflow: hidden;
    background: #efefef;
    cursor: zoom-in;
    border-radius: 2px;
    display: block;
}
.eks-cpt-strip__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 320ms ease;
}
.eks-cpt-strip__item:hover img { transform: scale(1.04); }
.eks-cpt-strip__item--main {
    grid-row: 1 / span 2;
    grid-column: 1;
}
.eks-cpt-strip__more {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    pointer-events: none;
}

/* ---------- LAYOUT 2-col : contenu + sidebar sticky ---------- */

.eks-cpt-body {
    background: #fff;
    padding: 48px 0 72px;
}
/* Layout 2-col content + sidebar, à l'intérieur du container Tailwind du
   theme (.container mx-auto px-6 lg:px-12). Pas de max-width ni padding ici
   — c'est le parent qui gère. */
.eks-cpt-body__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 48px;
    align-items: start;
    margin-top: 32px;
}
/* Pas de sidebar → contenu pleine largeur (suit le container parent). */
.eks-cpt-body__layout--no-sidebar {
    grid-template-columns: minmax(0, 1fr);
}
@media (max-width: 1024px) {
    .eks-cpt-body__layout {
        grid-template-columns: 1fr;
    }
}
.eks-cpt-content {
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--eks-text);
}
.eks-cpt-content h2,
.eks-cpt-content h3 {
    color: var(--eks-accent-deep);
    margin-top: 1.8em;
    margin-bottom: 0.6em;
}
.eks-cpt-content h2:first-child,
.eks-cpt-content h3:first-child { margin-top: 0; }
.eks-cpt-content p { margin: 0 0 1.1em; }
.eks-cpt-content a { color: var(--eks-accent-deep); }

/* ---------- SIDEBAR ÉDITORIAL ---------- */

.eks-cpt-sidebar {
    position: sticky;
    top: 88px;
    padding: 28px 30px 24px;
    /* Glassmorphism subtil warm white : on voit doucement le fond mais le
       contenu reste très lisible. Pas de couleur saturée, pas de border
       épaisse, pas de shadow lourd — esprit "info panel" magazine d'art. */
    background: rgba(255, 250, 244, 0.66);
    backdrop-filter: blur(10px) saturate(105%);
    -webkit-backdrop-filter: blur(10px) saturate(105%);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

/* ---------- META BLOCK (générique) ---------- */
.eks-meta-block {
    padding: 22px 0;
    border-top: 1px solid rgba(186, 116, 72, 0.18);
}
.eks-meta-block:first-child {
    padding-top: 0;
    border-top: 0;
}
.eks-meta-block:last-child {
    padding-bottom: 0;
}
.eks-meta-block__title {
    margin: 0 0 14px 0;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--eks-accent-deep);
    letter-spacing: 0.005em;
}

/* Liste générique label/value (contact) */
.eks-meta-list {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.eks-meta-list__row {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.eks-meta-list__label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--eks-muted);
    font-weight: 600;
}
.eks-meta-list__value {
    margin: 0;
    font-size: .96rem;
    color: var(--eks-text);
    word-break: break-word;
    line-height: 1.4;
}
.eks-meta-list__value a {
    color: var(--eks-text);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 140ms, color 140ms;
}
.eks-meta-list__value a:hover {
    color: var(--eks-accent-deep);
    border-bottom-color: var(--eks-accent);
}

/* ---------- SOCIAL ICONS (vrais logos brand) ---------- */
.eks-socials {
    list-style: none;
    margin: 16px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid rgba(186, 116, 72, 0.15);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.eks-socials li { margin: 0; padding: 0; }
.eks-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    color: var(--eks-accent-deep);
    text-decoration: none;
    transition: background 160ms, color 160ms, transform 160ms;
}
.eks-social:hover {
    transform: translateY(-1px);
    background: var(--eks-accent-deep);
    color: #fff;
}
/* Couleurs brand au hover (optionnel) */
.eks-social--facebook:hover  { background: #1877f2; }
.eks-social--instagram:hover { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.eks-social--twitter:hover   { background: #000; }
.eks-social--linkedin:hover  { background: #0a66c2; }
.eks-social--youtube:hover   { background: #ff0000; }
.eks-social--vimeo:hover     { background: #1ab7ea; }

/* ---------- HORAIRES (table mergée) ---------- */
.eks-hours-table {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.eks-hours-table__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: .92rem;
}
.eks-hours-table__days {
    font-weight: 600;
    color: var(--eks-text);
    margin: 0;
    flex-shrink: 0;
}
.eks-hours-table__times {
    margin: 0;
    color: var(--eks-text);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.eks-hours-table__row.is-closed .eks-hours-table__days,
.eks-hours-table__row.is-closed .eks-hours-table__times {
    color: var(--eks-muted);
}
.eks-hours-table__closed {
    font-style: italic;
    color: var(--eks-muted);
    font-size: .9em;
}

/* ---------- ADDRESS + MAP ---------- */
.eks-cpt-address__text {
    font-style: normal;
    font-size: .95rem;
    line-height: 1.55;
    margin: 0 0 14px;
    color: var(--eks-text);
}
.eks-cpt-address__map {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    background: #e9e2d4;
    aspect-ratio: 4 / 3;
}
.eks-cpt-address__map iframe { width: 100%; height: 100%; border: 0; }

/* ---------- AMBASSADOR BADGE ---------- */
.eks-cpt-ambassador-badge {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    text-align: center;
    padding: 14px 18px;
    background: rgba(140, 58, 46, 0.08);
    border: 1px solid rgba(140, 58, 46, 0.2);
    border-radius: 6px;
    color: var(--eks-accent-deep);
}
.eks-cpt-ambassador-badge__label {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 700;
}
.eks-cpt-ambassador-badge__since {
    font-size: .76rem;
    color: var(--eks-muted);
    font-style: italic;
}

/* ---------- DOCUMENTS ---------- */
.eks-cpt-documents__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.eks-cpt-documents__list li { padding: 0; }
.eks-cpt-documents__list a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--eks-text);
    text-decoration: none;
    font-size: .92rem;
    padding: 8px 0;
    border-bottom: 1px solid rgba(186, 116, 72, 0.1);
    transition: color 140ms;
}
.eks-cpt-documents__list li:last-child a { border-bottom: 0; }
.eks-cpt-documents__list a::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14 2 14 8 20 8' fill='none' stroke='white' stroke-width='1.5'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14 2 14 8 20 8' fill='none' stroke='white' stroke-width='1.5'/></svg>") center/contain no-repeat;
    flex-shrink: 0;
    color: var(--eks-accent);
}
.eks-cpt-documents__list a:hover { color: var(--eks-accent-deep); }

/* ---------- FEATURES (facilities / accessibility) — refonte sobre ---------- */

/* Le bloc Features dans le contenu principal (pas dans la sidebar) garde un
   look "magazine" : grille sobre, icônes accent terra-cotta, pas de cards
   individuelles, juste un titre serif + un grid d'items. */
.eks-cpt-features {
    margin: 32px 0 0;
    padding: 0;
    background: none !important; /* override hérité .eks-cpt-card */
    border: 0;
    border-radius: 0;
}
.eks-cpt-features .eks-cpt-card__title,
.eks-cpt-features .eks-meta-block__title {
    margin: 0 0 18px;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--eks-accent-deep);
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(186, 116, 72, 0.2);
}
.eks-cpt-features__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px 28px;
}
.eks-cpt-feature {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0;
    background: none;
    border-radius: 0;
}
.eks-cpt-feature__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--eks-accent);
    flex-shrink: 0;
    background: rgba(186, 116, 72, 0.08);
    border-radius: 50%;
}
.eks-cpt-feature__icon svg {
    width: 20px;
    height: 20px;
}
.eks-cpt-feature__label {
    font-size: .95rem;
    color: var(--eks-text);
    font-weight: 500;
    line-height: 1.3;
}

/* ---------- ACTIVITIES ---------- */

.eks-cpt-activities {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}
.eks-cpt-activity {
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.eks-cpt-activity__thumb {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #f0f0f0;
}
.eks-cpt-activity__thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.eks-cpt-activity__body { padding: 18px 20px; }
.eks-cpt-activity__title {
    margin: 0 0 6px;
    color: var(--eks-accent-deep);
    font-size: 1.05rem;
    font-weight: 700;
}
.eks-cpt-activity__meta {
    margin: 0 0 8px;
    color: var(--eks-muted);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.eks-cpt-activity__desc {
    margin: 0;
    color: var(--eks-text);
    line-height: 1.55;
    font-size: .92rem;
}

/* ---------- SPECIAL OFFERS ---------- */

.eks-cpt-offers {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
}
.eks-cpt-offer {
    background: rgba(255,255,255,.07);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 6px;
    padding: 22px 24px;
}
.eks-cpt-offer__title {
    margin: 0 0 8px;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
}
.eks-cpt-offer__discount {
    margin: 0 0 8px;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--eks-beige);
}
.eks-cpt-offer__conditions {
    margin: 0 0 10px;
    font-size: .9rem;
    color: rgba(255,255,255,.85);
    line-height: 1.5;
}
.eks-cpt-offer__until {
    margin: 0;
    font-size: .78rem;
    opacity: .75;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ---------- VIDEO / VIRTUAL TOUR ---------- */

.eks-cpt-video {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 6px;
    overflow: hidden;
    background: #1c1816;
    max-width: 1024px;
    margin: 0 auto;
}
.eks-cpt-video iframe { width: 100%; height: 100%; border: 0; }

/* ---------- RESPONSIVE ---------- */

@media (max-width: 1024px) {
    .eks-cpt-body__inner {
        grid-template-columns: 1fr;
    }
    .eks-cpt-sidebar {
        position: static;
        order: -1; /* sidebar avant le contenu sur tablette/mobile */
    }
}

@media (max-width: 768px) {
    .eks-cpt-container,
    .eks-cpt-hero__inner,
    .eks-cpt-body__inner { padding-left: 18px; padding-right: 18px; }
    .eks-cpt-section { padding: 36px 0; }
    .eks-cpt-strip {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        height: clamp(360px, 90vw, 480px);
    }
    .eks-cpt-strip__item--main {
        grid-row: 1 / span 1;
        grid-column: 1 / span 2;
    }
}