/* ─── Variables (identiques aux tableaux) ──────────────────── */
body.single-carte-postale {
    --couleur-fond       : #f7f4ef;
    --couleur-texte      : #1a1a1a;
    --couleur-meta       : #72685c; /* contraste ≥ 4,5:1 sur #f0ece3 */
    --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-carte {
    padding : 2rem 2rem 6rem; /* même hauteur de départ que les autres pages */
}

/* ─── Lien retour ─────────────────────────────────────────── */
.single-carte__retour {
    max-width   : 1100px;
    margin      : 0 auto 2.5rem;
}

.single-carte__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-carte__retour a:hover {
    color : var(--couleur-survol);
}

/* ─── Layout 2 colonnes ───────────────────────────────────── */
.single-carte__inner {
    display     : flex;
    gap         : 4rem;
    align-items : flex-start;
    max-width   : 1100px;
    margin      : 0 auto;
}

/* ─── Zone visuels ────────────────────────────────────────── */
.single-carte__visuels {
    flex     : 0 0 52%;
    position : sticky;
    top      : 2rem;
}

/* ─── Flip ────────────────────────────────────────────────── */
.single-carte__flip-wrap {
    perspective : 1200px;
}

.single-carte__flip {
    position        : relative;
    transform-style : preserve-3d;
    transition      : transform 0.7s ease;
    aspect-ratio    : 4 / 3;
    border-radius   : 2px;
    box-shadow      : var(--ombre);
}

.single-carte__flip-wrap.has-verso:hover .single-carte__flip {
    transform : rotateY(180deg);
}

/* ─── Recto & Verso ───────────────────────────────────────── */
.single-carte__recto,
.single-carte__verso {
    position                  : absolute;
    inset                     : 0;
    backface-visibility       : hidden;
    -webkit-backface-visibility: hidden;
    overflow                  : hidden;
    border-radius             : 2px;
}

.single-carte__verso {
    transform : rotateY(180deg);
}

.single-carte__image {
    width      : 100%;
    height     : 100%;
    object-fit : cover;
    display    : block;
}

.single-carte__placeholder {
    width      : 100%;
    height     : 100%;
    background : var(--couleur-separateur);
}

/* ─── Label face ──────────────────────────────────────────── */
.single-carte__face-label {
    position       : absolute;
    bottom         : 0.6rem;
    right          : 0.8rem;
    font-size      : 0.7rem;
    font-family    : 'Arial', sans-serif;
    text-transform : uppercase;
    letter-spacing : 0.1em;
    color          : #fff;
    background     : rgba(0, 0, 0, 0.35);
    padding        : 0.2rem 0.5rem;
    border-radius  : 1px;
}

/* ─── Hint survol ─────────────────────────────────────────── */
.single-carte__hint {
    font-size      : 0.75rem;
    font-family    : 'Arial', sans-serif;
    color          : var(--couleur-meta);
    letter-spacing : 0.04em;
    text-align     : center;
    margin-top     : 0.7rem;
    font-style     : italic;
}

/* ─── Infos ───────────────────────────────────────────────── */
.single-carte__infos {
    flex    : 1;
    padding : 0.5rem 0;
}

.single-carte__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-carte__sous-titre {
    font-size  : 0.95rem;
    color      : var(--couleur-meta);
    font-style : italic;
    margin     : 0 0 1.2rem;
}

.single-carte__separateur {
    width      : 40px;
    height     : 1px;
    background : var(--couleur-meta);
    margin     : 1.4rem 0;
}

/* ─── Métadonnées ─────────────────────────────────────────── */
.single-carte__meta {
    margin  : 0 0 2rem;
    padding : 0;
}

.single-carte__meta-ligne {
    display       : flex;
    gap           : 1rem;
    padding       : 0.6rem 0;
    border-bottom : 1px solid var(--couleur-separateur);
    align-items   : baseline;
}

.single-carte__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-carte__meta-ligne dd {
    font-size : 0.9rem;
    margin    : 0;
    color     : var(--couleur-texte);
}

/* ─── Citation ────────────────────────────────────────────── */
.single-carte__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-carte__citation p {
    font-size   : 1rem;
    font-style  : italic;
    line-height : 1.7;
    margin      : 0 0 0.6rem;
    color       : var(--couleur-texte);
}

.single-carte__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-carte__inner {
        flex-direction : column;
        gap            : 2rem;
    }

    .single-carte__visuels {
        flex     : none;
        width    : 100%;
        position : static;
    }
}