/* --------------------------------------------------------------------------
   L'accueil, la nuit — la Lune, la Grande Ourse, les étoiles filantes
   (theme/accueil-nuit.js). Feuille liée par home.php seulement ; les couleurs
   de la nuit (--paper, --ink, --link, --muted) sont posées dans home.php même,
   pour qu'aucun blanc ne passe avant le chargement de cette feuille.
   -------------------------------------------------------------------------- */

/* Ce que le thème colore en dur : le survol des deux pastilles (fond --ink,
   devenu clair) et le logo are.na, une image noire. */
:root[data-nuit] .site-cv a:hover { background: rgb(85, 186, 101); color: var(--paper); }
:root[data-nuit] .site-mail .mail-copy:hover { background: #9D9DCC; color: var(--paper); }
:root[data-nuit] .site-footer .arena-logo { filter: invert(1); }

/* Le texte passe devant les étoiles : une ombre noire, invisible sur le noir,
   l'en détache quand une étoile tombe derrière une lettre. */
:root[data-nuit] .site-title,
:root[data-nuit] .index a,
:root[data-nuit] .ciel-legende {
    text-shadow: 0 0 3px #000, 0 0 9px #000;
}

/* --- La Lune, en haut à droite, à hauteur du titre --- */
.lune-bouton {
    position: absolute;
    top: 1.75rem;
    right: 1.15rem;
    width: 2.6rem;
    height: 2.6rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;
    transition: transform .2s ease;
}
.lune-bouton:hover { transform: scale(1.08); }
.lune-bouton:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.lune-dessin { display: block; width: 100%; height: 100%; }
@media (max-width: 640px) {
    .lune-bouton { top: 1.6rem; right: .9rem; width: 2.3rem; height: 2.3rem; }
}

/* --- L'heure de Paris, à gauche de la Lune, sur la ligne de base du titre ;
   les secondes en petit (accueil-nuit.js). --- */
.horloge {
    position: absolute;
    top: 2.745rem;
    right: 4.45rem;                     /* la Lune (1,15 rem + 2,6 rem) et un écart */
    font-size: 1.05rem;
    line-height: 1;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.horloge-s { font-size: .7em; margin-left: .3em; opacity: .7; position: relative; top: -.42em; }
:root[data-nuit] .horloge { text-shadow: 0 0 3px #000, 0 0 9px #000; }
@media (max-width: 640px) {
    .horloge { top: 2.49rem; right: 3.75rem; font-size: .95rem; }
}
/* Sur les plus petits écrans, les secondes cèdent la place au titre. */
@media (max-width: 369px) {
    .horloge-s { display: none; }
}

/* --- La ligne du ciel, sous le titre : la nuit seulement --- */
.ciel-legende {
    margin: -0.55rem 0 1.4rem;
    max-width: 36rem;
    color: var(--muted);
    font-style: italic;
    font-size: 1rem;
}
:root:not([data-nuit]) .ciel-legende,
.ciel-legende:empty { display: none; }

/* --- Les toiles (la lumière de la Lune, le vol des filantes) : fixes, sous
   le texte ; elles s'allument en fondu. --- */
.ciel-toile {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1s ease;
}
:root[data-nuit] .ciel-toile { opacity: 1; }

/* --- La Grande Ourse : la carte, et les rubriques posées sur leurs étoiles
   (accueil-nuit.js règle --dx, --dy et --echelle ; la formation et le
   retour sont des animations Web, d'où aucune transition ici). --- */
.index a { transform-origin: 0 50%; }
:root[data-nuit] .index.en-ourse a {
    transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(var(--echelle, 1));
}
/* La nuit, la liste attend d'être posée sur ses étoiles (home.php, accueil-nuit.js). */
:root[data-nuit].ciel-attente .index { visibility: hidden; }

.ourse {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
    overflow: visible;
    opacity: 0;
    transition: opacity .5s ease;
}
:root[data-nuit] .ourse { opacity: 1; }
.ourse-trait {
    stroke: rgba(242, 242, 247, .38);
    stroke-width: 1;
    stroke-dasharray: var(--long);
    stroke-dashoffset: 0;
}
.ourse-garde { stroke: rgba(242, 242, 247, .22); stroke-width: 1; stroke-dasharray: 2 6; }
.ourse-nom {
    font: italic 12px "Times New Roman", Times, serif;
    fill: rgba(242, 242, 247, .5);
    /* Un contour noir sous les lettres : les traits qui passent derrière s'effacent. */
    paint-order: stroke;
    stroke: #000;
    stroke-width: 3px;
    stroke-linejoin: round;
}
.ourse-halo, .ourse-etoile { transform-box: fill-box; transform-origin: center; }

/* --- La bascule à la main : un fondu, le temps du passage seulement --- */
:root.en-bascule body,
:root.en-bascule a,
:root.en-bascule button,
:root.en-bascule .site-cv a,
:root.en-bascule .site-footer {
    transition: background-color .6s ease, color .6s ease, border-color .6s ease;
}

@media (prefers-reduced-motion: reduce) {
    .ciel-toile, .ourse, .lune-bouton { transition: none; }
    :root.en-bascule * { transition: none !important; }
}

/* --------------------------------------------------------------------------
   « des correspondances » sur l'accueil (accueil-correspondances.js, et le
   trait de la nuit dans accueil-nuit.js).
   -------------------------------------------------------------------------- */

/* --- Le jour : l'accolade, de « des films » à « des tableaux », dans la marge,
   et « des correspondances » écrit le long, de bas en haut (comme le lien de
   marge et le dos des livres). Elle s'allume au survol de l'un des deux
   titres, ou d'elle-même. --- */
.accolade {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    color: var(--muted);
}
.accolade-trace { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.accolade-repos { fill: none; stroke: currentColor; stroke-width: 1; stroke-opacity: .5; }
.accolade-allume {
    fill: none;
    stroke: var(--link);
    stroke-width: 1.2;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset .5s cubic-bezier(.5, 0, .2, 1);
}
.accolade-texte {
    position: absolute;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font: italic 12px/1 var(--serif);
    color: var(--muted);
    text-decoration: none;
    white-space: nowrap;
    transition: color .25s ease;
}
.accolade-texte:hover { text-decoration: underline; text-underline-offset: 2px; }
:root:is(:has(.index a[href$="/des-films"]:hover), :has(.index a[href$="/des-tableaux"]:hover),
         :has(.index a[href$="/des-films"]:focus-visible), :has(.index a[href$="/des-tableaux"]:focus-visible),
         :has(.accolade-texte:hover), :has(.survol-paire:hover)) .accolade-allume { stroke-dashoffset: 0; }
:root:is(:has(.index a[href$="/des-films"]:hover), :has(.index a[href$="/des-tableaux"]:hover),
         :has(.index a[href$="/des-films"]:focus-visible), :has(.index a[href$="/des-tableaux"]:focus-visible),
         :has(.accolade-texte:hover), :has(.survol-paire:hover)) .accolade-texte { color: var(--link); }
@media (max-width: 640px) { .accolade-texte { font-size: 11px; } }
:root[data-nuit] .accolade { display: none; }

/* --- Au survol : une paire tirée au hasard, le tableau et la capture (sans
   ses bandes noires : --cx … --ch), à droite de l'accolade ; un clic l'ouvre. --- */
.survol-paire {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.survol-paire.est-ouvert {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .18s ease, transform .18s ease, visibility 0s;
}
.survol-paire img { display: block; max-width: none; object-fit: cover; box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 12px 28px rgba(0, 0, 0, .14); }
.survol-capture { position: relative; display: block; overflow: hidden; background: #111; box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 12px 28px rgba(0, 0, 0, .14); }
.survol-capture 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));
    box-shadow: none;
}
:root[data-nuit] .survol-paire { display: none; }

/* --- La nuit : le trait de l'étoile de « des films » à celle de « des
   tableaux », en pointillé, et « des correspondances » écrit le long, un
   lien posé au-dessus de la page. --- */
.ourse-corde { fill: none; stroke: rgba(242, 242, 247, .34); stroke-width: 1; stroke-dasharray: 2 5; }
.corde-calque {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: visible;
    pointer-events: none;
    z-index: 1;
    display: none;
}
:root[data-nuit] .corde-calque { display: block; }
:root[data-nuit].ciel-attente .corde-calque { visibility: hidden; }
.corde-texte {
    font: italic 12px "Times New Roman", Times, serif;
    fill: var(--link);
    paint-order: stroke;
    stroke: #000;
    stroke-width: 3px;
    stroke-linejoin: round;
}
.corde-lien { pointer-events: auto; cursor: pointer; }
.corde-lien:hover .corde-texte, .corde-lien:focus-visible .corde-texte { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
    .accolade-allume, .accolade-texte, .survol-paire, .survol-paire.est-ouvert { transition: none; }
}