
/* ─── Variables (identiques à l'archive) ──────────────────── */
body.single-tableau {
    --couleur-fond       : #f7f4ef;
    --couleur-texte      : #1a1a1a;
    --couleur-meta       : #7a6f62;
    --couleur-separateur : #d6cfc4;
    --couleur-survol     : #3b2e20;
    --ombre              : 0 2px 12px rgba(0, 0, 0, 0.08);

    background-color : var(--couleur-fond);
    color            : var(--couleur-texte);
    min-height       : 100vh;
    font-family      : 'Georgia', 'Times New Roman', serif;
}

div.single-tableau {
    padding : 4rem 2rem 6rem;
}

/* ─── Lien retour ─────────────────────────────────────────── */
.single-tableau__retour {
    max-width   : 1100px;
    margin      : 0 auto 2.5rem;
}

.single-tableau__retour a {
    font-size       : 0.82rem;
    font-family     : 'Arial', sans-serif;
    letter-spacing  : 0.08em;
    text-transform  : uppercase;
    color           : var(--couleur-meta);
    text-decoration : none;
    transition      : color 0.2s ease;
}

.single-tableau__retour a:hover {
    color : var(--couleur-survol);
}

/* ─── Layout 2 colonnes ───────────────────────────────────── */
.single-tableau__inner {
    display     : flex;
    gap         : 4rem;
    align-items : flex-start;
    max-width   : 1100px;
    margin      : 0 auto;
}

/* ─── Image ───────────────────────────────────────────────── */
.single-tableau__image-wrap {
    flex     : 0 0 55%;
    position : sticky;
    top      : 2rem;
}

.single-tableau__image {
    width         : 100%;
    height        : auto;
    display       : block;
    box-shadow    : var(--ombre);
    border-radius : 2px;
}

.single-tableau__credit {
    font-size      : 0.72rem;
    font-family    : 'Arial', sans-serif;
    color          : var(--couleur-meta);
    margin-top     : 0.6rem;
    letter-spacing : 0.03em;
}

/* ─── Infos ───────────────────────────────────────────────── */
.single-tableau__infos {
    flex    : 1;
    padding : 0.5rem 0;
}

.single-tableau__titre {
    font-size      : clamp(1.4rem, 2.5vw, 2rem);
    font-weight    : 400;
    line-height    : 1.3;
    margin         : 0 0 0.4rem;
    letter-spacing : 0.02em;
}

.single-tableau__sous-titre {
    font-size   : 0.95rem;
    color       : var(--couleur-meta);
    font-style  : italic;
    margin      : 0 0 1.2rem;
}

.single-tableau__separateur {
    width      : 40px;
    height     : 1px;
    background : var(--couleur-meta);
    margin     : 1.4rem 0;
}

/* ─── Métadonnées ─────────────────────────────────────────── */
.single-tableau__meta {
    margin  : 0 0 2rem;
    padding : 0;
}

.single-tableau__meta-ligne {
    display       : flex;
    gap           : 1rem;
    padding       : 0.6rem 0;
    border-bottom : 1px solid var(--couleur-separateur);
    align-items   : baseline;
}

.single-tableau__meta-ligne dt {
    font-size      : 0.72rem;
    font-family    : 'Arial', sans-serif;
    text-transform : uppercase;
    letter-spacing : 0.1em;
    color          : var(--couleur-meta);
    flex           : 0 0 90px;
}

.single-tableau__meta-ligne dd {
    font-size : 0.9rem;
    margin    : 0;
    color     : var(--couleur-texte);
}

/* ─── Citation ────────────────────────────────────────────── */
.single-tableau__citation {
    margin          : 2rem 0 0;
    padding         : 1.2rem 1.4rem;
    border-left     : 2px solid var(--couleur-meta);
    background      : rgba(255,255,255,0.6);
    border-radius   : 0 2px 2px 0;
}

.single-tableau__citation p {
    font-size   : 1rem;
    font-style  : italic;
    line-height : 1.7;
    margin      : 0 0 0.6rem;
    color       : var(--couleur-texte);
}

.single-tableau__citation footer {
    font-size      : 0.78rem;
    font-family    : 'Arial', sans-serif;
    color          : var(--couleur-meta);
    letter-spacing : 0.04em;
}

/* ─── Responsive ──────────────────────────────────────────── */
@media (max-width: 800px) {
    .single-tableau__inner {
        flex-direction : column;
        gap            : 2rem;
    }

    .single-tableau__image-wrap {
        flex     : none;
        width    : 100%;
        position : static;
    }
}
