/* theme/actualites-carte.css — la page /des-actualites (copie de l’aperçu _apercus/flux/04-le-hub/carte.css, intégrée le 30 octobre 2026 ;
   l’aperçu reste le banc d’essai). */
/* ==========================================================================
   le fil — « la carte » du hub (carte.js).

   La carte du tableau (direction 03), dans la grammaire du hub : Söhne pour
   l'interface, Signifier pour les heures en grand et les titres, des filets,
   le noir et le rouge #c00f0f (maintenant, ta visite, la une, le choisi).
   Chaque rubrique garde une couleur, sobre, pour se suivre d'un couloir à
   la frise : l'actualité à l'encre, les cinq autres en tons d'encre de
   couleur, retenus de jour comme de nuit. La couleur ne dit jamais rien
   seule : le couloir est nommé, avec son icône.
   ========================================================================== */

.carte {
    --colonne: 156px;            /* la colonne des noms de couloirs */
    --axe-h: 74px;
    --pied-h: 54px;
    --carte-bande: var(--papier-cote);
    --r-actualite: var(--encre);
    --r-medias: #7a4fa3;
    --r-cinema: #1c7754;
    --r-art: #2c5cbb;
    --r-culture: #965a0e;
    --r-sport: #0d728c;

    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) var(--pied-h);
    overflow: hidden;
    font-variant-numeric: tabular-nums;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-fond="clair"]) .carte {
        --r-medias: #a78bce;
        --r-cinema: #55ab86;
        --r-art: #7d9ce6;
        --r-culture: #cc9145;
        --r-sport: #4ba6be;
    }
}
:root[data-fond="noir"] .carte {
    --r-medias: #a78bce;
    --r-cinema: #55ab86;
    --r-art: #7d9ce6;
    --r-culture: #cc9145;
    --r-sport: #4ba6be;
}

/* Chaque élément d’une rubrique reçoit sa couleur par sa classe. */
.carte .r-actualite { --c: var(--r-actualite); }
.carte .r-medias { --c: var(--r-medias); }
.carte .r-cinema { --c: var(--r-cinema); }
.carte .r-art { --c: var(--r-art); }
.carte .r-culture { --c: var(--r-culture); }
.carte .r-sport { --c: var(--r-sport); }

.carte .carte-defile {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    cursor: grab;
    touch-action: pan-x pan-y;
}
.carte .carte-defile::-webkit-scrollbar { display: none; }
.carte .carte-defile.est-tire { cursor: grabbing; user-select: none; }
.carte .carte-defile.est-tire .marque { pointer-events: none; }
.carte .piste { position: relative; height: 100%; overflow: clip; }

/* --- L’axe des heures, en haut --------------------------------------------- */
.carte .axe { position: absolute; inset: 0 0 auto 0; height: var(--axe-h); border-bottom: 1px solid var(--filet); }
.carte .axe-jour { position: absolute; top: 0; height: 26px; border-left: 1px solid var(--efface); }
.carte .axe-jour-place { height: 100%; overflow: clip; }
.carte .axe-jour span {
    position: sticky; left: calc(var(--colonne) + 14px);
    display: inline-block; padding: 7px 0 0 8px;
    font-size: 13px; font-weight: 500; color: var(--encre); white-space: nowrap;
}
.carte .axe-jour em { font-style: normal; font-weight: 400; color: var(--attenue); margin-left: 6px; }
.carte .axe-moment {
    position: absolute; top: 26px; height: 16px; padding-left: 8px;
    font-size: 11.5px; color: var(--attenue); white-space: nowrap; overflow: hidden;
}
.carte .axe-heure {
    position: absolute; top: 42px; height: 32px; padding: 3px 0 0 5px;
    border-left: 1px solid var(--efface);
    font: 300 25px/1 var(--serif); letter-spacing: -0.03em; color: var(--encre);
    font-variant-numeric: tabular-nums lining-nums; white-space: nowrap;
}
.carte .axe-heure small { font: 400 11px/1 var(--sans); letter-spacing: 0; margin-left: 2px; color: var(--attenue); }
.carte .axe-heure.est-minuit { border-left-color: var(--encre); }
.carte .axe-heure.est-quart { font: 400 11.5px/1 var(--sans); letter-spacing: 0; padding-top: 15px; color: var(--attenue); border-left-color: var(--filet); }

/* --- Les couloirs : une heure sur deux en bande, le rail de chaque rubrique -- */
.carte .couloirs { position: absolute; top: var(--axe-h); bottom: 0; left: 0; right: 0; background-repeat: repeat-x; }
.carte .couloir { position: absolute; left: 0; right: 0; border-bottom: 1px solid var(--filet); }
.carte .couloir-rail {
    position: absolute; height: 1.5px; margin-top: -0.75px;
    background: color-mix(in srgb, var(--c) 30%, var(--papier));
}
.carte .couloir.est-replie .couloir-rail { opacity: .6; }
.carte .minuit { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid var(--efface); }

/* --- Les noms des couloirs, collés à gauche ----------------------------------- */
.carte .noms { position: absolute; inset: var(--axe-h) 0 0 0; pointer-events: none; z-index: 4; }
.carte .nom-couloir { position: absolute; left: 0; right: 0; }
.carte .nom-couloir .nom {
    position: sticky; left: 0;
    width: var(--colonne); height: 100%;
    padding: 11px 10px 0 18px;
    background: var(--papier);
    border-right: 1px solid var(--filet);
    pointer-events: auto;
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
}
.carte .nom::after, .carte .coin span::after {
    content: ""; position: absolute; top: 0; bottom: 0; right: -21px; width: 20px;
    background: linear-gradient(90deg, var(--papier), color-mix(in srgb, var(--papier) 0%, transparent));
    pointer-events: none;
}
.carte .nom button {
    display: inline-flex; align-items: center; gap: 7px; max-width: 100%;
    padding: 0; border: 0; background: none; cursor: pointer;
    font-size: 14.5px; color: var(--encre); text-align: left; white-space: nowrap;
}
.carte .nom button span { overflow: hidden; text-overflow: ellipsis; }
.carte .nom button:hover span { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--efface); }
.carte .nom button[aria-pressed="true"] span { font-weight: 500; }
.carte .nom .ri { flex: none; width: 16px; height: 16px; stroke-width: 1.55; color: var(--c); }
.carte .nom-nb { font-size: 12px; color: var(--attenue); white-space: nowrap; padding-left: 23px; }
.carte .nom-nouveaux { color: var(--rouge); }
.carte .nom-couloir.est-replie .nom { padding-top: 0; justify-content: center; }
.carte .nom-couloir.est-replie .nom button { font-size: 12.5px; color: var(--attenue); }
.carte .nom-couloir.est-replie .nom .ri { width: 14px; height: 14px; }
.carte .nom-couloir.est-replie .nom-nb { display: none; }
.carte .coin { position: absolute; top: 0; left: 0; z-index: 4; height: var(--axe-h); width: 100%; pointer-events: none; }
.carte .coin span {
    position: sticky; left: 0; display: block;
    width: var(--colonne); height: 100%;
    padding: 46px 10px 0 18px;
    font-size: 11.5px; color: var(--attenue);
    background: var(--papier); border-right: 1px solid var(--filet);
}

/* --- Les articles : un trait, un point ou un titre selon l’échelle ------------- */
.carte .marques { position: absolute; inset: var(--axe-h) 0 0 0; z-index: 2; }
.carte .marque { position: absolute; display: block; text-decoration: none; color: var(--encre); }
.carte .m-trait { background-color: var(--c); border-radius: 1px; }
.carte a.m-trait:visited { background-color: color-mix(in srgb, var(--c) 34%, var(--papier)); }
.carte .m-point { border-radius: 50%; background-color: var(--c); border: 2px solid var(--c); }
.carte a.m-point:visited { background-color: color-mix(in srgb, var(--c) 34%, var(--papier)); border-color: color-mix(in srgb, var(--c) 34%, var(--papier)); }
/* Un sujet repris par plusieurs rédactions : un rond creux, comme une correspondance. */
.carte .m-point.m-sujet { background-color: var(--papier); border-width: 2.5px; }
.carte a.m-point.m-sujet:visited { background-color: var(--papier); }
.carte .m-trait.m-sujet { box-shadow: 0 0 0 1px var(--papier); }
.carte .m-titre {
    display: flex; align-items: baseline; gap: 6px;
    padding: 0 6px 0 7px;
    border-left: 2.5px solid var(--c);
    background: var(--papier);
    font: 400 14px/20px var(--serif); letter-spacing: -0.005em;
    white-space: nowrap; overflow: hidden;
}
.carte .m-titre .h { flex: none; font: 400 11px/20px var(--sans); color: var(--attenue); }
.carte .m-titre .t { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.carte .m-titre .n { flex: none; font: 400 11px/20px var(--sans); color: var(--attenue); }
.carte a.m-titre:visited { color: var(--attenue); }
.carte .m-titre:hover .t { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--efface); }
/* La une : le rouge du hub. */
.carte .m-une.m-point, .carte .m-une.m-trait { outline: 2px solid var(--rouge); outline-offset: 2px; }
.carte .m-une.m-titre { box-shadow: inset 0 -2px 0 var(--rouge); }
.carte .marque.est-eteint { opacity: .12; pointer-events: none; }
.carte .marque.est-trouve { outline: 1.5px solid var(--encre); outline-offset: 2px; z-index: 2; }
.carte .m-titre.est-trouve { outline-offset: 0; }
.carte .marque.est-choisi { outline: 2.5px solid var(--encre); outline-offset: 3px; z-index: 3; }
.carte .m-titre.est-choisi { outline-offset: 0; background: var(--survol); }
.carte .marque:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 3px; z-index: 3; border-radius: 50%; }
.carte .m-titre:focus-visible, .carte .m-trait:focus-visible { border-radius: 0; }
.carte .m-pont::after { content: ""; position: absolute; width: 5px; height: 5px; right: -5px; top: -5px; background: var(--encre); }
.carte .m-titre.m-pont::after { right: 3px; top: 3px; }
/* Arrivé en direct, pas encore entré dans la liste : un anneau rouge. */
.carte .marque.est-arrivee:not(.est-eteint) { box-shadow: 0 0 0 2px var(--papier), 0 0 0 3.5px var(--rouge); z-index: 2; }
.carte .m-titre.est-arrivee:not(.est-eteint) { box-shadow: inset 0 -2px 0 var(--rouge); }

.carte .manchette {
    position: absolute; height: 19px; padding: 0 5px;
    font: 400 13.5px/19px var(--serif); letter-spacing: -0.005em; color: var(--encre);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
    background: color-mix(in srgb, var(--papier) 88%, transparent);
}
.carte .manchette:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--efface); }
.carte .manchette .une-mark { font: 500 11px/19px var(--sans); color: var(--rouge); margin-right: 5px; }
.carte .manchette.est-eteint { opacity: .13; pointer-events: none; }
.carte .attache { position: absolute; width: 1px; background: color-mix(in srgb, var(--c) 34%, var(--papier)); pointer-events: none; z-index: 0; }
.carte .m-point, .carte .m-trait { z-index: 1; }
.carte .attache.est-eteint { opacity: .13; }

.carte .debord {
    position: absolute; height: 16px; padding: 0 4px 0 5px;
    border: 0; border-left: 2px solid var(--c); background: none;
    font-size: 11.5px; line-height: 16px; color: var(--attenue);
    cursor: zoom-in; white-space: nowrap;
}
.carte .debord:hover { color: var(--encre); background: var(--survol); }
.carte .debord.est-eteint { opacity: .2; }
.carte .debord.est-choisi { outline: 2px solid var(--encre); outline-offset: 2px; color: var(--encre); }

/* --- Les repères : maintenant, ta dernière visite, l’article choisi ------------ */
.carte .reperes { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.carte .maintenant { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--encre); }
.carte .maintenant-mot {
    position: absolute; top: 5px; white-space: nowrap;
    font-size: 12px; font-weight: 500; line-height: 1;
    padding: 5px 10px 5px; border-radius: 999px;
    background: var(--encre); color: var(--papier);
}
.carte .visite-bande { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--rouge) 4.5%, transparent); }
.carte .visite { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1.5px dashed var(--rouge); }
.carte .visite-mot {
    position: absolute; top: 27px; white-space: nowrap;
    font-size: 11.5px; color: var(--rouge); background: var(--papier); padding: 0 5px;
}
.carte .visite-mot .exemple { color: var(--rouge); border-color: currentColor; opacity: .8; font-size: 10px; }
.carte .reticule { position: absolute; top: var(--axe-h); bottom: 0; width: 1px; background: var(--encre); opacity: .5; }
.carte .reticule-heure {
    position: absolute; top: 46px; transform: translateX(-50%);
    padding: 4px 8px; border-radius: 999px;
    background: var(--encre); color: var(--papier);
    font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap;
}
.carte .fil-point {
    position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
    border-radius: 50%; border: 2px solid var(--encre); background: var(--papier);
}
.carte .fil-ligne { position: absolute; height: 0; border-top: 1.5px solid var(--encre); opacity: .65; }

/* --- L’info-bulle --------------------------------------------------------------- */
.carte .bulle {
    position: absolute; z-index: 10; max-width: 340px;
    padding: 9px 12px 11px; border-radius: 8px;
    background: var(--encre); color: var(--papier);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
    pointer-events: none;
}
.carte .bulle[hidden] { display: none; }
.carte .bulle-meta { display: flex; gap: 6px; align-items: center; font-size: 12px; opacity: .78; margin-bottom: 4px; }
.carte .bulle-meta .ri { width: 14px; height: 14px; stroke-width: 1.6; }
.carte .bulle-titre { font: 400 16px/1.25 var(--serif); letter-spacing: -0.008em; }
.carte .bulle-plus { font-size: 12px; opacity: .78; margin-top: 5px; }
.carte .bulle-une { opacity: 1; }

/* --- Les nouvelles arrivées en direct ------------------------------------------ */
.carte .carte-nouvelles {
    position: absolute; z-index: 6; top: calc(var(--axe-h) + 8px); left: calc(50% + var(--colonne) / 2);
    transform: translateX(-50%);
}

/* --- Le pied : l’échelle, la frise des quatre jours, maintenant --------------- */
.carte .carte-pied {
    position: relative; z-index: 5;
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px;
    padding: 0 16px 0 18px;
    border-top: 1px solid var(--filet); background: var(--papier);
}
.carte .carte-pied .segments button { padding: 4px 10px; }
.carte .frise { position: relative; height: 38px; cursor: pointer; touch-action: none; }
.carte .frise canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.carte .frise-fenetre {
    position: absolute; top: -3px; bottom: -3px; border-radius: 3px;
    border: 1.5px solid var(--encre);
    background: color-mix(in srgb, var(--encre) 5%, transparent);
    pointer-events: none;
}
.carte .frise:focus-visible { outline-offset: 5px; }
.carte .vers-maintenant {
    padding: 5px 11px; border: 1px solid var(--efface); border-radius: 999px;
    background: none; cursor: pointer; font-size: 12.5px; color: var(--encre); white-space: nowrap;
}
.carte .vers-maintenant:hover { border-color: var(--encre); }
.carte .vers-maintenant[disabled] { color: var(--attenue); border-color: var(--filet); cursor: default; }

/* --- Téléphone et tablette en portrait ------------------------------------------ */
@media (max-width: 959px) {
    .carte {
        --colonne: 106px;
        --axe-h: 66px;
        --pied-h: 52px;
        flex: none;
        height: max(460px, calc(100svh - var(--haut-barre-app) - 8px));
        border-bottom: 1px solid var(--filet);
    }
    .carte .nom-couloir .nom { padding: 8px 6px 0 14px; gap: 1px; }
    .carte .nom button { font-size: 12.5px; gap: 5px; }
    .carte .nom .ri { width: 14px; height: 14px; }
    .carte .nom-mot { display: none; }
    .carte .nom-nb { font-size: 11px; padding-left: 19px; }
    .carte .nom-nouveaux { display: none; }
    .carte .coin span { font-size: 0; padding-left: 14px; }
    .carte .axe-heure { top: 36px; font-size: 22px; height: 30px; }
    .carte .axe-moment { top: 22px; font-size: 11px; }
    .carte .axe-jour { height: 22px; }
    .carte .axe-jour span { padding-top: 5px; font-size: 12px; left: calc(var(--colonne) + 8px); }
    .carte .visite-mot { top: 22px; font-size: 11px; }
    .carte .reticule-heure { top: 40px; font-size: 11.5px; }
    .carte .maintenant-mot { font-size: 11.5px; padding: 4px 8px; }
    .carte .carte-pied { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 0 12px 0 14px; }
    .carte .carte-pied .frise { display: none; }
    .carte .carte-pied .segments button { padding: 6px 10px; font-size: 13px; }
}

@media (hover: none) {
    .carte .carte-defile { cursor: auto; }
}