/* ==========================================================================
   « au musée » — le cartel au mur (theme/musee-cartel.js).
   D'après l'aperçu 21 (_apercus/musee/21-cartel-au-clic/, version « au mur »).
   Dans le monde de « des tableaux » : les variables --tb-* de theme/musee.css,
   PP Eiko et PP Neue Montreal, les crédits à filets fins (.tb-credits,
   .cartel-texte…), « au cinéma » (.tb-cinema-bloc) et le partage (.tb-partage)
   de theme/style.css.
   ========================================================================== */

/* --- Le petit cartel, à l'échelle (12 × 8 cm) : du papier, trois lignes qu'on ne lit pas d'ici --- */
.mc-plaque {
    position: absolute;
    z-index: 1;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14%;
    padding: 0 13%;
    background: #FBFAF6;
    box-shadow: 0 0 0 .5px rgba(0, 0, 0, .16), 0 1px 1.5px rgba(0, 0, 0, .2);
    cursor: pointer;
    transition: opacity .2s ease .12s, box-shadow .15s;
}
.mc-plaque i { display: block; height: 1px; min-height: 1px; background: rgba(0, 0, 0, .5); }
.mc-plaque i:nth-child(1) { width: 80%; }
.mc-plaque i:nth-child(2) { width: 100%; opacity: .7; }
.mc-plaque i:nth-child(3) { width: 55%; opacity: .5; }
.mu-oeuvre:hover .mc-plaque { box-shadow: 0 0 0 1px var(--mur-encre, #111), 0 1px 1.5px rgba(0, 0, 0, .2); }
html[data-nuit] .mc-plaque { background: #E4DDD0; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .4), 0 0 10px rgba(255, 234, 199, .18); }
.mc-choisie .mc-plaque { opacity: 0; transition: opacity .12s ease; }

/* L'œuvre : un clic ouvre son cartel ; le cartel ouvert, elle se zoome. */
.mu-paroi .mu-oeuvre-lien { cursor: pointer; }
.mu-paroi .mc-choisie .mu-oeuvre-lien { cursor: zoom-in; transition: transform .2s cubic-bezier(.2, .8, .2, 1); }
.mu-travee .mc-choisie .mu-cartel { border-top-width: 3px; padding-top: calc(.3rem - 2px); }
/* Au téléphone, deux doigts sur l'œuvre ou son cartel : le geste est pour le musée, pas pour la page. */
.mu-travees .mc-choisie, .mc-enveloppe { touch-action: pan-x pan-y; }

/* --- Le grand cartel : le même papier, posé sur le mur, à hauteur des yeux ------------------- */
.mc-cartel {
    --tb-encre: #141414;
    --tb-fond: #FBFAF6;
    --tb-filet: rgba(0, 0, 0, .15);
    --tb-filet-fort: rgba(0, 0, 0, .26);
    box-sizing: border-box;
    font-family: var(--tb-sans);
    font-weight: 500;
    font-size: 15px;
    letter-spacing: -0.025em;
    color: #141414;
    text-align: left;
    cursor: auto;
}
.mc-mur {
    position: absolute;
    z-index: 3;
    padding: .95rem 1.1rem 1rem;
    background: #FBFAF6;
    border-radius: 1px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .14), 0 12px 30px rgba(0, 0, 0, .18);
}
html[data-nuit] .mc-mur {
    --tb-fond: #EBE6DC;
    background: #EBE6DC;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .3), 0 14px 36px rgba(0, 0, 0, .6), 0 0 80px rgba(255, 234, 199, .12);
}
/* Le papier reste clair la nuit : l'écran d'« au cinéma » ne s'y allume pas. */
html[data-nuit] .mc-cartel .ci-icone .ci-lumiere { opacity: 0; }
html[data-nuit] .mc-cartel .tb-cinema-bloc-image { box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 10px 24px rgba(0, 0, 0, .12); }
.mc-titre:focus { outline: none; }
.mc-titre:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.mc-credits dd { overflow-wrap: anywhere; }
.mc-cartel .cartel-texte > :last-child { margin-bottom: 0; }
.mc-cartel .cartel-texte a { text-decoration: underline; text-underline-offset: 3px; }
.mc-cartel .cartel-liens .sep, .mc-chemins .sep { opacity: .5; }
.mc-mur .tb-titre { margin: 0 4.8rem .7rem 0; font-size: 1.62rem; }
.mc-mur:not(.mc-tel) .tb-credits { columns: 2; column-gap: 1.2rem; }
.mc-mur:not(.mc-tel) .tb-credits > div { break-inside: avoid; -webkit-column-break-inside: avoid; }
.mc-mur .tb-credits dt, .mc-mur .tb-credits dd { font-size: .75rem; }
.mc-mur .mc-droite { margin-top: .95rem; }
.mc-mur .cartel-texte { font-size: .78rem; }
.mc-mur .tb-cinema-bloc { margin-top: .95rem; }
.mc-mur .tb-cinema-bloc-image { height: 4.6rem; width: calc(4.6rem * var(--ar, 2.39)); }
.mc-mur .tb-cinema-bloc-phrase { font-size: .84rem; }
.mc-mur .tb-cinema-bloc-voir { font-size: .76rem; }
.mc-mur .mc-chemins { margin-top: .85rem; }
.mc-mur .tb-partage { margin-top: .75rem; font-size: .74rem; }

/* Refermer : en haut à droite, discret. */
.mc-fermer {
    position: absolute;
    right: .7rem;
    top: .7rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    padding: .25rem 0 .25rem .5rem;
    font: inherit;
    font-size: .72rem;
    letter-spacing: -0.01em;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
    opacity: .55;
    transition: opacity .15s;
}
.mc-fermer:hover { opacity: 1; }
.mc-fermer:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; opacity: 1; }
.mc-fermer svg { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; }

/* S'approcher : le second geste, en pastille ; puis le lieu et la page. */
.mc-chemins { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: .95rem 0 0; font-size: .8rem; }
.mc-approcher, .mc-approcher:visited {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    padding: .34rem .85rem .34rem .65rem;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid var(--tb-encre);
    border-radius: 999px;
    transition: background-color .15s, color .15s;
}
.mc-approcher svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; }
.mc-approcher:hover { background: var(--tb-encre); color: var(--tb-fond); }
.mc-approcher:focus-visible { outline: 1px solid var(--tb-encre); outline-offset: 2px; }
.mc-autres a { text-decoration: underline; text-underline-offset: 3px; }
.mc-autres a:hover { text-decoration: none; }

/* Un cartel plus long que sa place : il défile, son bas s'estompe tant qu'il en reste. */
.mc-mur:not(.mc-tel) { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.mc-mur::-webkit-scrollbar { display: none; }
.mc-cartel.est-coupe {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2.4rem), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 2.4rem), transparent);
}

/* Il s'agrandit depuis le petit cartel, et s'y replie. */
.mc-cartel.est-anime { transition: transform .52s cubic-bezier(.2, .8, .2, 1), opacity .3s ease; }
.mc-mur.est-replie { transition: transform .46s cubic-bezier(.4, 0, .2, 1), opacity .25s ease .2s; }

/* La salle s'écarte : les œuvres, les pans, les baies glissent ; la peinture du mur s'allonge
   (seulement le temps du mouvement, html.mc-glisse). */
html.mc-glisse .mu-paroi > :not(.mu-visiteur):not(.mc-cartel) {
    transition: transform .52s cubic-bezier(.2, .8, .2, 1), width .52s cubic-bezier(.2, .8, .2, 1);
}
/* Le cartel ouvert dit tout : le bandeau s'efface. */
.mu-bandeau { transition: opacity .25s ease; }
html.mc-ouvert .mu-bandeau { opacity: 0; visibility: hidden; }

/* --- Téléphone : le cartel s'ouvre sous la travée, son bec sous le petit cartel ----------------- */
.mc-enveloppe { position: relative; padding-top: 10px; }
.mc-enveloppe.est-anime { overflow: hidden; transition: height .52s cubic-bezier(.2, .8, .2, 1); }
.mc-enveloppe.est-replie { transition: height .42s cubic-bezier(.4, 0, .2, 1); }
.mc-tel { position: relative; margin: 0 0 1.4rem; padding: 1rem 1rem 1.1rem; }
.mc-tel .mc-corps { display: block; }
.mc-tel .tb-titre { margin: 0 5rem .8rem 0; font-size: clamp(1.7rem, 7.5vw, 2.2rem); }
.mc-tel .tb-credits { columns: 1; }
.mc-tel .tb-credits dt, .mc-tel .tb-credits dd { font-size: .85rem; }
.mc-tel .mc-droite { margin-top: 1rem; }
.mc-tel .cartel-texte { font-size: .88rem; }
.mc-tel .tb-cinema-bloc-image { height: 4.4rem; width: calc(4.4rem * var(--ar, 2.39)); }
.mc-bec {
    position: absolute;
    top: -8px;
    width: 16px;
    height: 8px;
    margin-left: -8px;
    background: inherit;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* --- Moins d'animations : tout apparaît et disparaît sans mouvement ----------------------------- */
@media (prefers-reduced-motion: reduce) {
    .mc-cartel.est-anime, .mc-enveloppe.est-anime, .mc-plaque, .mu-bandeau,
    .mu-paroi .mc-choisie .mu-oeuvre-lien,
    html.mc-glisse .mu-paroi > * { transition: none !important; }
}