/* ================================================================
   style.css — Viewing Room
   Base : foires/assets/style.css
   Ajouts : toggle langue, bio artiste, formulaire lightbox,
            badge vues multiples, navigation vues
   ================================================================ */

:root {
    --c-fond:        #f7f7f5;
    --c-surface:     #ffffff;
    --c-texte:       #1a1a1a;
    --c-texte-doux:  #888888;
    --c-bordure:     #e0e0e0;
    --c-accent:      #b08d6a;

    --ombre-vignette: 0 2px 12px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.06);
    --ombre-hover:    0 6px 28px rgba(0,0,0,0.16), 0 2px 6px rgba(0,0,0,0.08);

    --fonte-titre:   'Georgia', 'Times New Roman', serif;
    --fonte-corps:   'Helvetica Neue', Arial, sans-serif;

    --rayon:         2px;
    --transition:    0.25s ease;
    --gap:           1.5rem;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }

body {
    background:  var(--c-fond);
    color:       var(--c-texte);
    font-family: var(--fonte-corps);
}

img { display: block; max-width: 100%; height: auto; }
a { text-decoration: none; }


/* ----------------------------------------------------------------
   HERO
---------------------------------------------------------------- */
.vr-hero {
    position:            relative;
    width:               100%;
    height:              clamp(280px, 45vh, 520px);
    background-color:    #1a1a1a;
    background-size:     cover;
    background-position: center;
    background-repeat:   no-repeat;
    display:             flex;
    flex-direction:      column;
    justify-content:     space-between;
}

.vr-hero-overlay {
    position:        absolute;
    inset:           0;
    background:      linear-gradient(
                         to bottom,
                         rgba(0,0,0,0.45) 0%,
                         rgba(0,0,0,0.10) 40%,
                         rgba(0,0,0,0.55) 100%
                     );
    display:         flex;
    flex-direction:  column;
    justify-content: space-between;
    padding:         2rem 2.5rem;
}

/* Logo + toggle langue en haut */
.vr-hero-top {
    display:     flex;
    align-items: flex-start;
    justify-content: space-between;
}

.vr-hero-logo img {
    height:  64px;
    width:   auto;
    filter:  brightness(0) invert(1);
    opacity: 0.92;
}

/* Toggle FR / EN */
.vr-lang-toggle {
    display:         inline-block;
    font-family:     var(--fonte-corps);
    font-size:       0.68rem;
    font-weight:     normal;
    letter-spacing:  0.2em;
    text-transform:  uppercase;
    color:           rgba(255,255,255,0.75);
    border:          1px solid rgba(255,255,255,0.35);
    padding:         0.3rem 0.7rem;
    border-radius:   1px;
    transition:      all var(--transition);
    cursor:          pointer;
    align-self:      flex-start;
}

.vr-lang-toggle:hover {
    color:            #fff;
    border-color:     rgba(255,255,255,0.8);
    background-color: rgba(255,255,255,0.1);
}

/* Bloc infos bas du hero */
.vr-hero-infos {
    display:        flex;
    flex-direction: column;
    gap:            0.5rem;
}

.vr-titre {
    font-family:    var(--fonte-titre);
    font-size:      clamp(1.6rem, 4vw, 3rem);
    font-weight:    normal;
    letter-spacing: 0.06em;
    color:          #ffffff;
    line-height:    1.15;
}

.vr-periode {
    display:        flex;
    align-items:    center;
    gap:            0.6rem;
    color:          rgba(255,255,255,0.85);
    font-size:      clamp(0.8rem, 1.4vw, 1rem);
    letter-spacing: 0.03em;
}

.vr-sous-titre {
    color:          rgba(255,255,255,0.85);
    font-family:    var(--fonte-titre);
    font-style:     italic;
    font-size:      clamp(1rem, 2vw, 1.4rem);
    font-weight:    normal;
    letter-spacing: 0.04em;
    margin-top:     0.3rem;
}

.vr-label {
    color:          rgba(255,255,255,0.55);
    font-size:      clamp(0.65rem, 1vw, 0.78rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}


/* ----------------------------------------------------------------
   SECTIONS GÉNÉRALES
---------------------------------------------------------------- */
.vr-section {
    max-width: 1440px;
    margin:    0 auto;
    padding:   3rem 2.5rem;
}

.vr-section + .vr-section {
    border-top: 1px solid var(--c-bordure);
}

.vr-section--full {
    max-width: none;
    padding:   3rem 2.5rem;
    border-top: 1px solid var(--c-bordure);
}


/* ----------------------------------------------------------------
   ARTISTES (hero section — noms + liens)
---------------------------------------------------------------- */
.vr-artistes {
    text-align: center;
}

.vr-artistes--1 span {
    display:        block;
    font-family:    var(--fonte-titre);
    font-size:      clamp(2rem, 5vw, 4rem);
    font-weight:    normal;
    letter-spacing: 0.15em;
    color:          var(--c-texte);
}

.vr-artistes--2 {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             2rem;
}

.vr-artistes--2 span {
    font-family:    var(--fonte-titre);
    font-size:      clamp(1.5rem, 3.5vw, 2.8rem);
    font-weight:    normal;
    letter-spacing: 0.12em;
}

.artistes-sep {
    display:     block;
    width:       1px;
    height:      2.5em;
    background:  var(--c-bordure);
    flex-shrink: 0;
}

.vr-artistes--multi {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: center;
    gap:             0.5rem 2.5rem;
}

.vr-artistes--multi span {
    font-family:    var(--fonte-titre);
    font-size:      clamp(1rem, 2.2vw, 1.7rem);
    font-weight:    normal;
    letter-spacing: 0.1em;
}

.vr-artiste-bloc {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            0.5rem;
}

.vr-artiste-liens {
    display:     flex;
    align-items: baseline;
    font-size:   0.75rem;
    font-family: var(--fonte-corps);
}

.vr-artiste-lien {
    color:          var(--c-texte-doux);
    letter-spacing: 0.03em;
    transition:     color var(--transition);
}

.vr-artiste-lien:hover { color: var(--c-texte); }

.vr-artiste-lien + .vr-artiste-lien::before {
    content: '\00a0|\00a0';
    color:   var(--c-texte-doux);
    opacity: 0.4;
}


/* ----------------------------------------------------------------
   BIOGRAPHIE ARTISTE (section dédiée)
---------------------------------------------------------------- */
.vr-bio-section {
    border-top: 1px solid var(--c-bordure);
}

.vr-bio-grid {
    display:   grid;
    grid-template-columns: 280px 1fr;
    gap:       3rem;
    align-items: start;
}

.vr-bio-image {
    width:       100%;
    aspect-ratio: 3/4;
    object-fit:  cover;
}

.vr-bio-caption {
    font-size:   0.72rem;
    color:       var(--c-texte-doux);
    font-style:  italic;
    margin-top:  0.5rem;
    text-align:  center;
}

.vr-bio-nom {
    font-family:    var(--fonte-titre);
    font-size:      clamp(1.2rem, 2.5vw, 2rem);
    font-weight:    normal;
    letter-spacing: 0.1em;
    margin-bottom:  1.5rem;
}

.vr-bio-texte {
    font-size:   0.9rem;
    line-height: 1.8;
    color:       #3a3a38;
}

.vr-bio-texte p + p { margin-top: 1em; }

.vr-bio-lien {
    margin-top:  1.2rem;
    font-size:   0.78rem;
}

.vr-bio-lien a {
    color:          var(--c-texte-doux);
    border-bottom:  1px solid var(--c-bordure);
    letter-spacing: 0.03em;
    transition:     color var(--transition), border-color var(--transition);
}

.vr-bio-lien a:hover {
    color:        var(--c-texte);
    border-color: var(--c-texte);
}


/* ----------------------------------------------------------------
   TITRE DE SECTION (œuvres, texte expo…)
---------------------------------------------------------------- */
.vr-section-titre {
    font-family:    var(--fonte-titre);
    font-size:      clamp(0.85rem, 1.5vw, 1.1rem);
    font-weight:    normal;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color:          var(--c-texte-doux);
    margin-bottom:  2rem;
}

.vr-artiste-solo-nom {
    font-family:    var(--fonte-titre);
    font-size:      clamp(1rem, 2vw, 1.4rem);
    font-weight:    normal;
    letter-spacing: 0.15em;
    color:          var(--c-texte);
    margin-bottom:  2rem;
}


/* ----------------------------------------------------------------
   MASONRY ŒUVRES
---------------------------------------------------------------- */
.oeuvres-masonry {
    columns:    4 220px;
    column-gap: var(--gap);
}

.oeuvre-vignette {
    break-inside:  avoid;
    margin-bottom: var(--gap);
    cursor:        pointer;
    position:      relative;
    display:       block;
}

.oeuvre-vignette img {
    width:         100%;
    display:       block;
    border-radius: var(--rayon);
    box-shadow:    var(--ombre-vignette);
    transition:    box-shadow var(--transition), transform var(--transition);
}

.oeuvre-vignette:hover img {
    box-shadow: var(--ombre-hover);
    transform:  translateY(-2px);
}

.oeuvre-vignette-artiste {
    display:        block;
    padding:        0.4rem 0.2rem 0;
    font-size:      0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:          var(--c-texte);
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
}

.oeuvre-vignette-titre {
    padding:       0.4rem 0.2rem;
    font-size:     0.75rem;
    color:         var(--c-texte-doux);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    display:       block;
}

/* Badge vues multiples */
.vignette-vues-badge {
    position:       absolute;
    top:            0.5rem;
    right:          0.5rem;
    background:     rgba(0,0,0,0.55);
    color:          #fff;
    font-size:      0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding:        0.2rem 0.45rem;
    border-radius:  1px;
    backdrop-filter: blur(2px);
    pointer-events: none;
}


/* ----------------------------------------------------------------
   VUES D'EXPOSITION — pleine largeur avec légende
---------------------------------------------------------------- */
.vr-vue-exposition {
    position:   relative;
    width:      100%;
    line-height: 0; /* supprimer l'espace sous l'image */
}

.vr-vue-exposition img {
    width:       100%;
    max-height:  85vh;
    object-fit:  cover;
    object-position: center;
    display:     block;
}

.vr-vue-exposition__legende {
    position:        absolute;
    bottom:          0;
    left:            0;
    right:           0;
    padding:         0.8rem 1.5rem;
    background:      linear-gradient( to top, rgba(0,0,0,0.55) 0%, transparent 100% );
    font-size:       0.72rem;
    letter-spacing:  0.06em;
    color:           rgba(255,255,255,0.75);
    font-style:      italic;
    line-height:     1.4;
}


/* ----------------------------------------------------------------
.vr-contenu {
    max-width:   680px;
    margin:      0 auto;
    font-size:   0.95rem;
    line-height: 1.75;
    color:       var(--c-texte);
}

.vr-contenu p   { margin-bottom: 1em; }
.vr-contenu a   { color: var(--c-texte); border-bottom: 1px solid var(--c-bordure); }
.vr-contenu a:hover { border-color: var(--c-texte); }


/* ----------------------------------------------------------------
   LIGHTBOX
---------------------------------------------------------------- */
.lb-overlay {
    display:         none;
    position:        fixed;
    inset:           0;
    background:      #ffffff;
    z-index:         1000;
    align-items:     center;
    justify-content: center;
    padding:         3vw;
}

.lb-overlay.lb-visible { display: flex; }

.lb-scene {
    display:     flex;
    align-items: flex-end;
    gap:         2.5rem;
    max-width:   100%;
    max-height:  100%;
}

.lb-image-wrap {
    flex:            1 1 auto;
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-width:       0;
}

.lb-image-wrap img {
    max-width:     100%;
    max-height:    calc(100vh - 10vw);
    width:         auto;
    height:        auto;
    object-fit:    contain;
    box-shadow:    0 8px 40px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.08);
    border-radius: 1px;
    transition:    opacity 0.2s ease;
}

.lb-image-wrap img.lb-loading { opacity: 0.4; }

/* Navigation vues multiples — dans le cartel, en haut */
.lb-vues-nav {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             0.6rem;
    padding-bottom:  0.9rem;
    margin-bottom:   0.9rem;
    border-bottom:   1px solid #d4cfc8;
}

.lb-vue-btn {
    background:  none;
    border:      1px solid var(--c-bordure);
    color:       var(--c-texte-doux);
    width:       28px;
    height:      28px;
    display:     flex;
    align-items: center;
    justify-content: center;
    cursor:      pointer;
    font-size:   0.85rem;
    border-radius: 1px;
    transition:  all var(--transition);
}

.lb-vue-btn:hover:not(:disabled) {
    border-color: var(--c-texte);
    color:        var(--c-texte);
}

.lb-vue-btn:disabled {
    opacity: 0.3;
    cursor:  not-allowed;
}

.lb-vue-counter {
    font-size:      0.68rem;
    color:          var(--c-texte-doux);
    letter-spacing: 0.08em;
    min-width:      2.5em;
    text-align:     center;
}

/* Cartel */
.lb-cartel {
    flex:          0 0 auto;
    width:         200px;
    background:    #faf8f4;
    border:        1px solid #d4cfc8;
    box-shadow:    2px 3px 10px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.06);
    padding:       1.1rem 1.2rem 1rem;
    border-radius: 1px;
    display:       flex;
    flex-direction: column;
    gap:           0;
}

.lb-cartel-artiste {
    font-size:      0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color:          #999;
    margin-bottom:  0.4rem;
}

.lb-cartel-titre {
    font-family:   var(--fonte-titre);
    font-size:     0.9rem;
    font-weight:   normal;
    color:         #1a1a1a;
    margin-bottom: 0.8rem;
    line-height:   1.35;
}

.lb-cartel-meta {
    list-style:     none;
    display:        flex;
    flex-direction: column;
    gap:            0.3rem;
    margin-bottom:  1rem;
}

.lb-cartel-meta li {
    font-size:   0.78rem;
    color:       #555;
    line-height: 1.3;
}

/* Formulaire Se renseigner */
.lb-inquire {
    border-top:  1px solid #d4cfc8;
    padding-top: 0.9rem;
    margin-top:  auto;
}

.lb-inquire-label {
    display:        block;
    font-size:      0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color:          var(--c-accent);
    margin-bottom:  0.6rem;
}

/* Input + bouton sur la même ligne */
.lb-inquire-row {
    display:   flex;
    gap:       0;
    margin-bottom: 0.4rem;
}

.lb-inquire-input {
    flex:         1 1 auto;
    min-width:    0;
    border:       1px solid var(--c-bordure);
    border-right: none;
    background:   #fff;
    font-family:  var(--fonte-corps);
    font-size:    0.8rem;
    padding:      0.5rem 0.6rem;
    outline:      none;
    border-radius: 1px 0 0 1px;
    transition:   border-color var(--transition);
    color:        var(--c-texte);
}

.lb-inquire-input:focus { border-color: var(--c-accent); }
.lb-inquire-input::placeholder { color: #bbb; }

/* Bouton enveloppe carré */
.lb-inquire-btn {
    flex-shrink:   0;
    width:         34px;
    background:    var(--c-texte);
    border:        1px solid var(--c-texte);
    color:         #fff;
    display:       flex;
    align-items:   center;
    justify-content: center;
    cursor:        pointer;
    border-radius: 0 1px 1px 0;
    transition:    background var(--transition), border-color var(--transition);
}

.lb-inquire-btn:hover { background: #444; border-color: #444; }

.lb-inquire-msg {
    font-size:   0.72rem;
    min-height:  1.1em;
    color:       var(--c-texte-doux);
    text-align:  center;
}

.lb-inquire-msg.is-success { color: #4a8a4a; }
.lb-inquire-msg.is-error   { color: #b03030; }

/* Bouton fermer */
.lb-fermer {
    position:   absolute;
    top:        1.2rem;
    right:      1.4rem;
    background: none;
    border:     none;
    font-size:  1.3rem;
    color:      #aaa;
    cursor:     pointer;
    padding:    0.2rem 0.4rem;
    transition: color var(--transition);
    z-index:    10;
}

.lb-fermer:hover { color: #1a1a1a; }


/* ----------------------------------------------------------------
   RESPONSIVE
---------------------------------------------------------------- */
@media (max-width: 700px) {
    .lb-scene {
        flex-direction: column;
        align-items:    center;
        overflow-y:     auto;
        gap:            1.5rem;
    }

    .lb-cartel        { width: 90%; }
    .lb-image-wrap img { max-height: 55vh; }

    .vr-artistes--2 {
        flex-direction: column;
        gap:            1rem;
    }

    .artistes-sep { width: 3em; height: 1px; }

    .vr-bio-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .vr-bio-image { aspect-ratio: 4/3; }
}

@media (max-width: 600px) {
    .vr-section      { padding: var(--gap); }
    .vr-section--full { padding: var(--gap); }
    .vr-hero-overlay { padding: 1.2rem; }
    .oeuvres-masonry { columns: 2 140px; }
}