/* ==========================================================================
   « des correspondances » (theme/page-correspondances.php, correspondances.js)
   — un tableau et une capture de film accrochés côte à côte, à la même
   hauteur, comme dans la salle de « des tableaux » : son papier grainé, ses
   polices (PP Eiko pour les titres et les libellés, en Black minuscule ;
   PP Neue Montreal pour les textes), ses cartels à filets fins et sa nuit,
   que style.css partage avec cette page (body.tpl-page-correspondances).
   Sous le diptyque, ce qui se répond (la couleur, la composition, les lieux
   et les objets), puis toutes les correspondances.
   Feuille liée par la page seule.
   ========================================================================== */
body.tpl-page-correspondances {
    /* Les couleurs et les polices de la salle (style.css, « des tableaux ») :
       la nuit les change pour les deux pages à la fois. */
    --co-fond: var(--tb-fond);
    --co-encre: var(--tb-encre);
    --co-pale: rgba(0, 0, 0, .55);
    --co-filet: var(--tb-filet);
    --co-filet-fort: var(--tb-filet-fort);
    --co-carte: var(--tb-carte);
    --co-survol: var(--tb-survol);
    --co-eiko: var(--tb-eiko);
    --co-sans: var(--tb-sans);
    --co-marge: 1.1rem;
    --co-ecart: 2.2rem;             /* entre le tableau et la capture */
    --co-entete: 3rem;
}
body.tpl-page-correspondances {
    line-height: 1.35;
    overflow-x: hidden;
}
.co-cache {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* --- L'en-tête, celui de « des tableaux » --------------------------------- */
.co-entete {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    height: var(--co-entete);
    padding: 0 var(--co-marge);
    border-bottom: 1px solid var(--co-filet);
}
.co-entete-nom {
    margin: 0;
    font-family: var(--co-eiko);
    font-weight: 400;
    font-size: 1.25rem;
    letter-spacing: -0.03em;
    white-space: nowrap;
}
.co-entete-nav { display: flex; gap: 1.1rem; font-size: .8rem; }
.co-entete-nav a { text-decoration: none; opacity: .55; transition: opacity .15s; }
.co-entete-nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.co-maison { margin-left: auto; font-size: .8rem; text-decoration: none; white-space: nowrap; }
.co-maison:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Sur téléphone, la fleur du favicon remplace « éclectique magazine » (comme dans « des tableaux »). */
.co-fleur { display: none; line-height: 0; padding: .3rem; margin-right: -.3rem; }
.co-fleur img { width: 1.6rem; height: 1.6rem; }
.co-fleur:active img { transform: scale(.9); }

/* --- L'introduction --------------------------------------------------------------- */
.co-intro {
    max-width: 44rem;
    margin: 0 auto;
    padding: 1.6rem var(--co-marge) 0;
    text-align: center;
}
.co-intro-texte {
    margin: 0;
    font-weight: 400;
    font-size: .95rem;
    line-height: 1.45;
    letter-spacing: -0.015em;
    text-wrap: pretty;
}
.co-intro-texte a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.co-intro-texte a:hover { text-decoration: none; }
/* --- La correspondance --------------------------------------------------------------- */
.co-jour { padding: 1.4rem var(--co-marge) 0; }
.co-surtitre {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .2rem .8rem;
    margin: 0 0 .8rem;
    font-size: .78rem;
    font-weight: 400;
    text-align: center;
}
.co-surtitre-num {
    font-family: var(--co-eiko);
    font-weight: 900;
    letter-spacing: -0.01em;
    text-decoration: none;
}
.co-surtitre-num:hover { text-decoration: underline; text-underline-offset: 3px; }
.co-surtitre-vues { opacity: .55; }
.co-phrase {
    max-width: 44rem;
    margin: 0 auto 1.1rem;
    font-family: var(--co-eiko);
    font-weight: 400;
    font-size: clamp(1.35rem, 2.1vw, 1.9rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
    text-align: center;
    text-wrap: balance;
}
/* Les commandes : la précédente, une autre. */
.co-commandes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem 1rem;
    margin: 0 0 1.1rem;
}
.co-pas {
    font: inherit;
    letter-spacing: inherit;
    font-size: .85rem;
    color: var(--co-encre);
    background: none;
    border: 0;
    padding: .35rem 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.co-pas:hover { text-decoration: none; }
.co-pas:disabled { opacity: .3; cursor: default; text-decoration: none; }
.co-pas--autre {
    font-family: var(--co-eiko);
    font-size: 1.15rem;
    letter-spacing: -0.02em;
}
/* Le diptyque : les deux images à la même hauteur --h, calculée sur la place
   disponible et les proportions des deux images (--ar1, --ar2 : largeur sur
   hauteur, bandes noires des captures retirées). */
.co-diptyque {
    --h: min(54vh, 34rem, calc((100vw - 2 * var(--co-marge) - var(--co-ecart)) / (var(--ar1) + var(--ar2))));   /* sans JavaScript ; correspondances.js le précise */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: var(--co-ecart);
    margin: 0;
}
.co-diptyque[hidden] { display: none; }
.co-oeuvre {
    display: table;                  /* le cartel prend la largeur de l'image */
    margin: 0;
    min-width: 13rem;
}
.co-oeuvre > figcaption { display: table-caption; caption-side: bottom; }
.co-cadre {
    position: relative;
    display: block;
    height: var(--h);
    width: calc(var(--h) * var(--ar));
    margin: 0 auto;
    overflow: hidden;
    background: var(--co-survol);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 22px 50px rgba(0, 0, 0, .16);
}
/* L'image remplit son cadre ; pour une capture à bandes noires, elle déborde
   d'autant que les bandes, que le cadre cache (--cx, --cy, --cw, --ch : la
   partie utile, en fractions de l'image). */
.co-cadre img {
    position: absolute;
    left: calc(-100% * var(--cx, 0) / var(--cw, 1));
    top: calc(-100% * var(--cy, 0) / var(--ch, 1));
    width: calc(100% / var(--cw, 1));
    height: calc(100% / var(--ch, 1));
    max-width: none;
    display: block;
}
.co-recadre { position: relative; display: block; overflow: hidden; }
.co-recadre img {
    position: absolute;
    left: calc(-100% * var(--cx, 0) / var(--cw, 1));
    top: calc(-100% * var(--cy, 0) / var(--ch, 1));
    width: calc(100% / var(--cw, 1));
    height: calc(100% / var(--ch, 1));
    max-width: none;
    display: block;
}
.co-grille-calque {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(7, 1fr);
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}
.co-grille-calque span { outline: 1px solid rgba(255, 255, 255, .22); }
.co-diptyque.est-calque .co-grille-calque { opacity: .88; }

/* Le cartel, à filets fins (celui de « des tableaux », en plus petit). */
.co-cartel { padding-top: 1rem; }
.co-cartel-titre {
    margin: 0 0 .55rem;
    font-family: var(--co-eiko);
    font-weight: 400;
    font-size: 1.3rem;
    line-height: 1.02;
    letter-spacing: -0.03em;
    text-wrap: balance;
}
.co-cartel-titre a { text-decoration: none; }
.co-cartel-titre a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.co-credits { margin: 0; border-top: 1px solid var(--co-encre); }
.co-credits > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: .26rem 0 .22rem;
    border-bottom: 1px solid var(--co-encre);
}
.co-credits dt {
    flex: none;
    font-family: var(--co-eiko);
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: -0.01em;
    text-transform: lowercase;
}
.co-credits dd { margin: 0; text-align: right; font-size: .76rem; line-height: 1.3; }
.co-credits a { text-decoration: underline; text-underline-offset: 3px; }
.co-credits a:hover { text-decoration: none; }
.co-cartel-voir { margin: .55rem 0 0; font-size: .74rem; }
.co-cartel-voir a { text-decoration: underline; text-underline-offset: 3px; }
.co-cartel-voir a:hover { text-decoration: none; }

/* --- Ce qui se répond : trois colonnes à filets ---------------------------- */
.co-raisons {
    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr;
    gap: 0 2.2rem;
    max-width: 68rem;
    margin: 2.6rem auto 0;
    padding: 0;
    border-top: 1px solid var(--co-encre);
}
.co-raison { padding: .8rem 0 1.2rem; min-width: 0; }
.co-raison-tete {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .6rem;
    margin: 0 0 .7rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--co-filet);
}
.co-raison-tete h2 {
    margin: 0;
    font-family: var(--co-eiko);
    font-weight: 900;
    font-size: .95rem;
    letter-spacing: -0.01em;
    text-transform: lowercase;
}
.co-raison-marque { font-size: .7rem; font-weight: 400; white-space: nowrap; }
.co-raison:not(.est-montree) .co-raison-tete h2 { opacity: .45; }
.co-raison:not(.est-montree) .co-raison-marque { opacity: .55; }
.co-raison-texte { margin: .7rem 0 0; font-size: .76rem; font-weight: 400; line-height: 1.4; }
.co-raison-texte strong { font-weight: 500; }
.co-chiffre { white-space: nowrap; }

/* La couleur : les deux palettes face à face, reliées couleur à couleur. */
.co-palettes { display: block; width: 100%; height: auto; overflow: visible; }
.co-palettes text { font-family: var(--co-sans); font-size: 9.5px; fill: currentColor; letter-spacing: 0; }
.co-palettes .co-lien { fill: none; stroke: currentColor; }

/* La composition : les deux grilles de luminance, 12 × 7. */
.co-mosaiques { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.co-mosaique { margin: 0; }
.co-mosaique-cases {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    aspect-ratio: 12 / 7;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}
.co-mosaique figcaption { margin-top: .3rem; font-size: .68rem; font-weight: 400; opacity: .7; }
.co-bouton {
    font: inherit;
    letter-spacing: inherit;
    font-size: .74rem;
    color: var(--co-encre);
    background: none;
    border: 1px solid var(--co-filet-fort);
    border-radius: 2px;
    padding: .3rem .6rem;
    margin-top: .7rem;
    cursor: pointer;
}
.co-bouton:hover { background: var(--co-survol); }
.co-bouton[aria-pressed="true"] { background: var(--co-encre); color: var(--co-fond); border-color: var(--co-encre); }

/* Les objets : les mots communs aux deux fiches. */
.co-mots { list-style: none; margin: 0; padding: 0; }
.co-mots li { padding: .32rem 0 .3rem; border-bottom: 1px solid var(--co-filet); font-size: .76rem; font-weight: 400; }
.co-mots li:first-child { padding-top: 0; }
.co-mot { display: block; font-family: var(--co-eiko); font-size: 1rem; font-weight: 400; letter-spacing: -0.02em; margin-bottom: .1rem; }
.co-mots-cote { opacity: .7; }
.co-mots-vide { margin: 0; font-size: .76rem; font-weight: 400; opacity: .6; }

/* --- Toutes les correspondances ----------------------------------------------- */
.co-toutes { padding: 3.4rem var(--co-marge) 6rem; }
.co-toutes-tete {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .4rem 1.4rem;
    max-width: 82rem;
    margin: 0 auto .9rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--co-encre);
}
.co-toutes-tete h2 {
    margin: 0;
    font-family: var(--co-eiko);
    font-weight: 400;
    font-size: clamp(1.6rem, 2.6vw, 2.3rem);
    letter-spacing: -0.035em;
    line-height: 1;
}
.co-toutes-intro { margin: 0; flex: 1 1 18rem; font-size: .76rem; font-weight: 400; opacity: .7; }
/* Ranger et filtrer : deux rangées de pastilles, libellées en Eiko Black. */
.co-outils { display: flex; flex-wrap: wrap; gap: .6rem 2rem; max-width: 82rem; margin: 0 auto 1.5rem; }
.co-outil { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.co-outil-lib {
    margin-right: .3rem;
    font-family: var(--co-eiko);
    font-weight: 900;
    font-size: .8rem;
    letter-spacing: -0.01em;
    text-transform: lowercase;
}
.co-outil button {
    font: inherit;
    letter-spacing: inherit;
    font-size: .8rem;
    color: var(--co-encre);
    background: none;
    border: 1px solid var(--co-filet-fort);
    border-radius: 2px;
    padding: .3rem .6rem;
    cursor: pointer;
}
.co-outil button:hover { background: var(--co-survol); }
.co-outil button[aria-pressed="true"] { background: var(--co-encre); color: var(--co-fond); border-color: var(--co-encre); }
.co-outil .co-nb { opacity: .55; font-weight: 400; margin-left: .25rem; }
.co-archive { max-width: 82rem; margin: 0 auto; }
/* Par peintre, par film : les groupes coulent en colonnes, comme un index ; dans
   chaque groupe, ses paires l'une sous l'autre. */
.co-archive.est-groupee { columns: 17.5rem; column-gap: 1.6rem; }
.co-archive.est-groupee .co-groupe { break-inside: avoid; margin: 0 0 2.2rem; }
.co-archive.est-groupee .co-grille { grid-template-columns: 1fr; gap: 1.4rem; }
.co-archive.est-par-peintre .co-petit-artiste { display: none; }
.co-groupe { margin: 0 0 2.2rem; }
.co-groupe[hidden] { display: none; }
.co-groupe-tete {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 1rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid var(--co-filet);
    font-weight: 400;
}
.co-groupe-nom { font-family: var(--co-eiko); font-size: 1.3rem; letter-spacing: -0.02em; line-height: 1.1; }
.co-groupe-nb { font-size: .76rem; opacity: .6; white-space: nowrap; }
.co-grille {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
    gap: 1.8rem 1.6rem;
    margin: 0;
    padding: 0;
}
.co-grille li[hidden] { display: none; }
.co-petit { display: block; text-decoration: none; }
.co-petit-images { display: flex; gap: .45rem; height: 7.6rem; align-items: stretch; }
.co-petit-cadre {
    position: relative;
    flex: var(--ar) 1 0;
    min-width: 0;
    overflow: hidden;
    background: var(--co-survol);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 8px 18px rgba(0, 0, 0, .1);
}
.co-petit-cadre img {
    position: absolute;
    left: calc(-100% * var(--cx, 0) / var(--cw, 1));
    top: calc(-100% * var(--cy, 0) / var(--ch, 1));
    width: calc(100% / var(--cw, 1));
    height: calc(100% / var(--ch, 1));
    object-fit: cover;
    display: block;
}
.co-petit-legende { display: block; margin-top: .55rem; font-size: .74rem; font-weight: 400; line-height: 1.3; }
.co-petit-num { display: block; font-family: var(--co-eiko); font-weight: 900; font-size: .74rem; letter-spacing: -0.01em; margin-bottom: .15rem; }
.co-petit-etat { font-family: var(--co-sans); font-weight: 400; opacity: .6; }
.co-petit-titres { display: block; }
.co-petit-titres i { font-style: italic; }
.co-petit-raisons { display: block; margin-top: .2rem; opacity: .55; }
.co-petit:hover .co-petit-titres { text-decoration: underline; text-underline-offset: 3px; }
.co-petit[aria-current="true"] .co-petit-images { outline: 1px solid var(--co-encre); outline-offset: 4px; }
.co-vide { max-width: 82rem; margin: 1rem auto 0; font-size: .8rem; opacity: .6; }

.co-pied { max-width: 82rem; margin: 3rem auto 0; padding-top: .7rem; border-top: 1px solid var(--co-filet); font-size: .72rem; font-weight: 400; opacity: .7; }


/* --- Téléphone : le tableau, puis la capture, chacun avec son cartel ----------- */
@media (max-width: 760px) {
    body.tpl-page-correspondances { --co-marge: 1rem; }
    .co-entete { gap: .9rem; }
    .co-entete-nav, .co-maison { display: none; }
    .co-fleur { display: block; }
    .co-nuit + .co-maison + .co-fleur { margin-left: .2rem; }
    .co-intro { padding-top: 1.2rem; text-align: left; }
    .co-intro-texte { font-size: .92rem; }
    .co-jour { padding-top: 1.1rem; }
    .co-phrase { font-size: 1.32rem; margin-bottom: 1rem; }
    .co-commandes { flex-wrap: wrap; }
    .co-diptyque { flex-direction: column; align-items: stretch; gap: 1.8rem; }
    .co-oeuvre { display: block; min-width: 0; }
    .co-oeuvre > figcaption { display: block; }
    .co-cadre {
        width: min(100%, calc(60vh * var(--ar)));
        width: min(100%, calc(60svh * var(--ar)));
        height: auto;
        aspect-ratio: var(--ar);
    }
    .co-cartel-titre { font-size: 1.45rem; }
    .co-credits dt, .co-credits dd { font-size: .82rem; }
    .co-raisons { grid-template-columns: 1fr; margin-top: 2rem; }
    .co-raison { padding-bottom: .6rem; }
    .co-grille { grid-template-columns: 1fr; gap: 1.6rem; }
    .co-petit-images { height: 6.6rem; }
    .co-toutes { padding-top: 2.4rem; }
    .co-outils { gap: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
}
/* --- La nuit : celle de « des tableaux », la salle s'éteint, les œuvres restent
   éclairées. Le choix est partagé avec la salle (localStorage « tableaux-nuit »),
   sinon le réglage du système ; posé avant l'affichage (index.html). */
html[data-nuit] body.tpl-page-correspondances { --co-pale: rgba(239, 234, 225, .55); }
html[data-nuit] .co-cadre {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 24px 60px rgba(0, 0, 0, .65), 0 0 110px rgba(255, 234, 199, .10);
}
html[data-nuit] .co-petit-cadre { box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 10px 24px rgba(0, 0, 0, .5); }

/* La lampe de tableau de l'en-tête (le dessin de « des tableaux ») : éteinte le
   jour, elle projette son faisceau la nuit. */
.co-nuit {
    font: inherit;
    color: var(--co-encre);
    background: none;
    border: 0;
    padding: .2rem .1rem;
    margin-left: auto;
    cursor: pointer;
    opacity: .55;
    transition: opacity .15s;
    display: inline-flex;
    align-items: center;
}
.co-nuit:hover { opacity: 1; }
.co-nuit + .co-maison { margin-left: 1.2rem; }
.co-lampe { display: block; overflow: visible; width: 27px; height: 25px; }
.co-lampe-bras, .co-lampe-capot { stroke: currentColor; fill: none; opacity: .6; }
.co-lampe-cadre { stroke: currentColor; fill: none; opacity: .38; }
.co-lampe-toile { fill: currentColor; opacity: .12; transition: opacity .45s ease; }
.co-lampe-faisceau { opacity: 0; transition: opacity .45s ease; }
html[data-nuit] .co-lampe-faisceau { opacity: .75; }
html[data-nuit] .co-lampe-toile { opacity: .32; }
@media (prefers-reduced-motion: reduce) {
    .co-lampe-toile, .co-lampe-faisceau { transition: none; }
}

/* --- Le partage de la paire : la rangée de « des tableaux » (style.css,
   .tb-partage), centrée sous les deux cartels. --------------------------------- */
.co-partage { justify-content: center; margin: 1.6rem 0 0; }

/* --- Sans JavaScript : la liste des paires, chacune vers son adresse ------ */
.co-liste-simple { margin: 0; padding-left: 1.4rem; font-size: .85rem; line-height: 1.5; }
.co-liste-simple a { text-decoration: underline; text-underline-offset: 3px; }