/* Garde-robe — Journal (htdocs/assets/garderobe/journal.css), lot D. Cahier des charges § 8.5.
   Racine .ec-journal (conteneur : la mise en page suit SA largeur, pas celle de la fenêtre).
   Mobile : cases de 47,9 × 60 avec la capsule de tenue ; dès 560 px de Journal (bureau) : cases de 96 avec
   deux mini-vignettes ; dès 1100 px : la colonne du jour (400) à droite de la grille (640).
   Aucune position fixe ici : le conteneur (container-type) serait leur bloc conteneur. Les barres de
   la sélection sont collantes. Couleurs : jetons seulement. */

.ec-journal { container-type: inline-size; padding-bottom: 8px; }
.jr { position: relative; }
.jr-principal { min-width: 0; }

/* ---------------- En-tête ---------------- */
.ec-journal .jr-annee { color: var(--gr-texte-3); }
.ec-journal .jr-fleches { display: flex; flex: none; margin-right: -10px; align-self: center; }
.ec-journal .jr-compacte .g-barre-droite { margin-right: -10px; }
.jr.vide .jr-fleches, .jr.vide .jr-compacte .g-barre-droite { display: none; }
.ec-journal .jr-outils { margin: 16px var(--gr-marge) 16px; }
.ec-journal .jr-vue { min-width: 200px; }

/* ---------------- Mois ---------------- */
.ec-journal .jr-mois { margin: 0 var(--gr-marge); }
.ec-journal .jr-initiales { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); height: 20px; align-items: center; text-align: center; color: var(--gr-texte-3); }
.ec-journal .jr-grille { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: 60px; }
.ec-journal .jr-case {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0;
    padding: 5px 0 0; margin: 0; border: 0; background: none; color: var(--gr-texte); border-radius: var(--r-ctrl);
    cursor: pointer; touch-action: manipulation; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
    transition: transform var(--d-instant) var(--c-standard), background-color var(--d-court);
}
.ec-journal .jr-case:active, .ec-journal .jr-case.appui { transform: scale(.94); }
.ec-journal .jr-case:focus-visible { outline: 2px solid var(--gr-focus); outline-offset: -2px; border-radius: var(--r-ctrl); }
.ec-journal .jr-case:disabled { cursor: default; transform: none; }
.ec-journal .jr-num {
    width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center;
    font: 500 15px/1 var(--gr-sans); font-variant-numeric: tabular-nums;
}
.ec-journal .aujourdhui > .jr-num { background: var(--gr-texte); color: var(--gr-inverse); font-weight: 600; }
.ec-journal .futur > .jr-num, .ec-journal .avant > .jr-num { opacity: .4; }
/* Le jour ouvert dans la colonne (bureau large) : un anneau, distinct du disque d'aujourd'hui. */
.ec-journal .ouvert > .jr-num { box-shadow: 0 0 0 2px var(--gr-fond), 0 0 0 3.5px var(--gr-texte); }
.ec-journal .jr-sans-capsule { height: 16px; }
.ec-journal .jr-squelette { cursor: default; }
.ec-journal .jr-sq-num { width: 26px; height: 26px; border-radius: 50%; }
.ec-journal .jr-sq-cap { width: 24px; height: 16px; }
/* Le chargement a échoué sans rien à montrer : la ligne d'erreur et « Réessayer » (comme Pièces). */
.ec-journal .jr-erreur { margin: 24px var(--gr-marge); display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.ec-journal .jr-erreur-texte { margin: 0; display: flex; gap: 8px; align-items: flex-start; color: var(--gr-danger); font: 500 15px/21px var(--gr-sans); overflow-wrap: anywhere; }
.ec-journal .jr-erreur-texte > .g-ic { flex: none; margin-top: 1px; }
/* Une barre « de mémoire » (par groupe ; la capsule entière l'est aussi avec .memoire). */
.ec-journal .g-capsule > i.memoire { opacity: .55; }
/* Une pièce jetée depuis reste dans le Journal telle qu'on la portait (pas de gris de rebut). */
.ec-journal .g-vg { filter: none; opacity: 1; }
.ec-journal .jr-memoire { outline: 1.5px dashed var(--gr-texte-2); outline-offset: 1px; }
.ec-journal .jr-vgs { display: none; gap: 4px; --vg: 32px; }
.ec-journal .jr-vgs .g-emplacement { --vg: 32px; background: none; }
.ec-journal .jr-autre {
    width: var(--vg, 32px); aspect-ratio: 1; flex: none; display: grid; place-items: center; border-radius: var(--r-tirage);
    background: var(--gr-puits); color: var(--gr-texte-3);
}
@media (hover: hover) {
    .ec-journal .jr-case:hover { background: var(--gr-survol); }
    .ec-journal .futur:hover { background: none; }
}

/* Sélection multiple : les jours choisis sur fond « pressé », coche encre ; les autres en retrait. */
.ec-journal .jr-case[aria-pressed="true"] { background: var(--gr-presse); }
.ec-journal .hors-choix { opacity: .45; }
.ec-journal .jr-coche {
    position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%;
    background: var(--gr-texte); color: var(--gr-inverse); display: grid; place-items: center; box-shadow: 0 0 0 2px var(--gr-fond);
}
.ec-journal .jr-coche .g-ic { width: 12px; height: 12px; stroke-width: 2; }
.ec-journal .jr-selbar {
    position: sticky; top: 0; z-index: 21; display: flex; align-items: center; gap: 8px; height: 52px; margin-bottom: -52px;
    padding: 0 var(--gr-marge) 0 calc(var(--gr-marge) - 12px); border-bottom: 1px solid var(--gr-ligne);
}
.ec-journal .jr-selbar-titre { font: 600 17px/22px var(--gr-sans); font-variant-numeric: tabular-nums; }
.ec-journal .jr-selbar-aide { margin-left: auto; color: var(--gr-texte-2); white-space: nowrap; }
.jr.en-selection .jr-compacte { display: none; }
.ec-journal .jr-selactions {
    position: sticky; bottom: calc(50px + env(safe-area-inset-bottom)); z-index: 21; display: flex; gap: 8px; margin-top: 16px;
    padding: 8px var(--gr-marge); border-top: 1px solid var(--gr-ligne);
}
.ec-journal .jr-selactions > .g-bouton {
    flex: 1 1 0; min-width: 0; height: 56px; flex-direction: column; gap: 2px; padding: 0 4px; border-radius: var(--r-ctrl);
    font: 600 13px/16px var(--gr-sans); white-space: normal; text-align: center;
}

/* ---------------- Bilan du mois ---------------- */
.ec-journal .jr-bilan { margin: 24px var(--gr-marge) 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.ec-journal .jr-bilan:empty { display: none; }
.ec-journal .jr-bilan > .t-chapo { margin: 0; }

/* ---------------- Vue « Jours » ---------------- */
.ec-journal .jr-intertitre {
    position: sticky; top: 44px; z-index: 2; margin: 0; padding: 16px var(--gr-marge) 8px; background: var(--gr-fond);
}
.ec-journal .jr-l-mois + .jr-l-mois { margin-top: 8px; }
.ec-journal .jr-liste { list-style: none; margin: 0; padding: 0; }
.ec-journal .jr-rangee {
    position: relative; display: grid; grid-template-columns: 44px auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
    min-height: 72px; padding: 8px var(--gr-marge); color: var(--gr-texte); text-decoration: none;
    -webkit-touch-callout: none; touch-action: manipulation;
}
.ec-journal .jr-liste > li + li > .jr-rangee::before {
    content: ''; position: absolute; top: 0; right: 0; left: calc(var(--gr-marge) + 56px); border-top: 1px solid var(--gr-ligne);
}
.ec-journal .jr-rangee:active { background: var(--gr-presse); }
.ec-journal .jr-rangee:focus-visible { outline: 2px solid var(--gr-focus); outline-offset: -2px; border-radius: var(--r-ctrl); }
@media (hover: hover) { .ec-journal .jr-rangee:hover { background: var(--gr-survol); } }
.ec-journal .jr-r-date { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ec-journal .jr-r-num { font: 400 28px/1 var(--gr-serif); }
.ec-journal .jr-r-date > .t-surtitre { color: var(--gr-texte-2); }
.ec-journal .aujourdhui .jr-r-num { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.ec-journal .jr-r-vgs { display: flex; align-items: center; gap: 4px; min-width: 100px; --vg: 48px; }
.ec-journal .jr-r-vgs .g-emplacement { --vg: 48px; background: none; }
.ec-journal .jr-r-vgs .jr-autre { --vg: 48px; }
.ec-journal .jr-petite { --vg: 32px; }
.ec-journal .jr-r-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ec-journal .jr-r-noms { font: 500 15px/20px var(--gr-sans); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ec-journal .jr-r-noms.muet { color: var(--gr-texte-3); }
.ec-journal .jr-r-manque { font: 500 13px/18px var(--gr-sans); color: var(--gr-texte-2); }
.ec-journal .jr-r-note { font-size: 17px; line-height: 22px; color: var(--gr-texte-2);
                         display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ec-journal .jr-r-remplir { display: inline-flex; align-items: center; gap: 2px; color: var(--gr-accent); font: 600 13px/16px var(--gr-sans); white-space: nowrap; }
.ec-journal .jr-plus { margin: 24px var(--gr-marge) 0; }

/* ---------------- Le jour : feuille (mobile) et colonne (bureau large) ---------------- */
.jr-feuille .g-feuille-pied { flex-direction: column; }
.jr-feuille .g-feuille-pied > .g-bouton { flex: 0 0 auto; }
.jr-feuille .jr-jour, .jr-colonne .jr-j { --vg: 64px; }
.jr-jour .jr-j-titre, .jr-j .jr-j-titre, .jr-ed .jr-ed-titre { margin: 0 var(--gr-marge); overflow-wrap: anywhere; }
.jr-jour .jr-j-releve, .jr-j .jr-j-releve {
    margin: 8px var(--gr-marge) 0; display: flex; align-items: center; gap: 6px; font: 500 13px/18px var(--gr-sans); color: var(--gr-texte-2);
}
.jr-j-releve.ok { color: var(--gr-ok); }
.jr-j-releve.trou { color: var(--gr-accent); }
.jr-jour .jr-j-pieces, .jr-j .jr-j-pieces { list-style: none; margin: 16px var(--gr-marge) 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.jr-jour .jr-j-piece, .jr-j .jr-j-piece {
    display: flex; align-items: center; gap: 12px; min-height: 64px; color: var(--gr-texte); text-decoration: none; border-radius: var(--r-tirage);
}
.jr-jour .jr-autre, .jr-j .jr-autre {
    width: 64px; aspect-ratio: 1; flex: none; display: grid; place-items: center; border-radius: var(--r-tirage);
    background: var(--gr-puits); color: var(--gr-texte-3);
}
.jr-j-piece .g-vg { filter: none; opacity: 1; }
.jr-j-piece .jr-j-nom { display: flex; flex-direction: column; min-width: 0; font: 600 15px/20px var(--gr-sans); }
.jr-j-nom > small { display: inline-flex; align-items: baseline; gap: 4px; font: 500 13px/18px var(--gr-sans); color: var(--gr-texte-2); font-variant-numeric: tabular-nums; }
.jr-j-nom .g-ic { align-self: center; }
.jr-jour .jr-j-note, .jr-j .jr-j-note { margin: 16px var(--gr-marge) 0; }
.jr-jour .jr-j-liens, .jr-j .jr-j-liens, .jr-ed .jr-j-liens { margin: 12px calc(var(--gr-marge) - 12px) 0; display: flex; flex-wrap: wrap; gap: 0 4px; }
.jr-j-liens:empty { display: none; }
.jr-j-liens > .g-bouton { gap: 6px; font: 500 15px/1 var(--gr-sans); color: var(--gr-texte-2); }
.jr-ed .jr-editeur { margin-top: 12px; }
/* « Ce jour-là » : les événements datés du jour (jets, rachats, usures, rebuts), liens vers la fiche, 13/500 texte-2 ;
   chaque lien est une cible de 44 de haut. */
.jr-ce-jour { margin: 16px var(--gr-marge) 0; }
.jr-ce-jour[hidden], .jr-ce-jour:empty { display: none; }
.jr-ce-jour .jr-ev-titre { margin: 0; color: var(--gr-texte-2); }
.jr-ce-jour .jr-ev-liste { list-style: none; margin: 4px 0 0; padding: 0; }
.jr-ce-jour .jr-ev {
    display: flex; align-items: center; min-height: 44px; font: 500 13px/18px var(--gr-sans); color: var(--gr-texte-2);
    text-decoration: underline; text-decoration-color: var(--gr-ligne-forte); text-underline-offset: 3px;
    overflow-wrap: anywhere; border-radius: var(--r-tirage);
}
@media (hover: hover) { .jr-ce-jour .jr-ev:hover { color: var(--gr-texte); text-decoration-color: currentColor; } }

/* Colonne du jour (bureau, Journal ≥ 1100 px) : masquée en dessous. */
.ec-journal .jr-colonne { display: none; }

/* ---------------- Bureau : la largeur du Journal décide ---------------- */
@container (min-width: 560px) {
    .ec-journal .jr-mois { max-width: 640px; }
    .ec-journal .jr-grille { grid-auto-rows: 96px; gap: 4px; }
    .ec-journal .jr-case { padding-top: 10px; gap: 10px; }
    .ec-journal .jr-vgs { display: flex; }
    .ec-journal .a-vgs > .g-capsule { display: none; }
    .ec-journal .jr-selactions { bottom: 16px; }
    .ec-journal .jr-selactions > .g-bouton { flex-direction: row; height: 48px; gap: 8px; font-size: 15px; }
    .ec-journal .jr-intertitre { top: 0; }
}
@container (min-width: 1100px) {
    .ec-journal .jr { display: grid; grid-template-columns: minmax(0, 640px) 400px; gap: 0 40px; align-items: start; padding-right: var(--gr-marge); }
    .ec-journal .jr-colonne {
        display: block; position: sticky; top: calc(var(--g-haut, 0px) + 24px); margin-top: 24px;
        max-height: calc(100dvh - var(--g-haut, 0px) - 48px); overflow-y: auto; overscroll-behavior: contain;
        padding: 20px 0 16px; border-radius: var(--r-ctrl); background: var(--gr-surface); --gr-marge: 20px;
    }
    .ec-journal .jr-j-surtitre, .ec-journal .jr-ed-surtitre { margin: 0 var(--gr-marge) 8px; color: var(--gr-texte-2); }
    .ec-journal .jr-j-pied { display: flex; flex-direction: column; gap: 8px; margin: 20px var(--gr-marge) 0; }
}

/* ---------------- Feuille « Comme le… » (source de la sélection multiple) ---------------- */
.jr-sources .jr-source-vgs { display: flex; flex: none; gap: 4px; --vg: 32px; }
.jr-sources .g-emplacement { --vg: 32px; background: none; }