/*
 * Pilotage (lot PIL) et Ma journée (lot T2, vague 1).
 * Uniquement les jetons d'app.css : palette des graphiques `--graphe-*` (DESIGN-SYSTEM §6), badges
 * `.etiquette--*` (§9.6), cartes à trait `--trait-leger`, indicateur 28 px 600 (§5 « Indicateur »).
 */
.pil {
    display: grid;
    gap: var(--e-4);
    min-width: 0;
}

.pil-entete h1 { margin-bottom: 0; }
.pil-sous-titre { margin: var(--e-1) 0 0; color: var(--encre-douce); font-size: var(--t-sm); }
.pil-note { margin: 0; font-size: var(--t-xs); color: var(--encre-douce); }
.pil-note a, .pil-vide a, .pil-barre a.pil-barre__libelle { color: var(--primaire); }
.pil-barres--empile a.pil-barre__libelle { color: var(--encre); }
.pil-vide { margin: 0; font-size: var(--t-sm); color: var(--encre-douce); }
.pil-alerte { color: var(--danger-texte); font-weight: 500; }

/* Filtres en ligne, soumis à chaque changement (le bouton n'existe que sans script). */
.pil-filtres { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e-3); background: var(--surface); border: 1px solid var(--trait-2); border-radius: var(--rayon-carte); padding: var(--e-3) var(--e-4); }
.pil-champ { display: grid; gap: var(--e-1); min-width: 120px; }
.pil-champ[hidden] { display: none; }
.pil-champ label { font-size: var(--t-xs); color: var(--encre-douce); font-weight: 500; }
.pil-champ select { height: 36px; font-size: var(--t-sm); }
.pil-champ--case { display: flex; align-items: center; gap: var(--e-2); min-width: 0; height: 36px; }
.pil-champ--case input[type='checkbox'] { width: 16px; height: 16px; margin: 0; accent-color: var(--primaire); }
.pil-champ--case label { font-size: var(--t-sm); color: var(--encre); cursor: pointer; }
.pil-filtres__actions { display: flex; align-items: flex-end; }

/* Chiffres clés : blocs de synthèse (§9.13). Cinq colonnes au plus, un seul bloc teinté (le CA réel). */
.pil-chiffres { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
/* Bloc cliquable (chiffre qui mène à l'écran source) : sans soulignement, trait renforcé au survol. */
.bloc--lien { color: inherit; text-decoration: none; transition: border-color var(--duree-rapide) var(--courbe); }
.bloc--lien:hover { border-color: var(--trait); color: inherit; }
.bloc--teinte.bloc--lien:hover { border-color: transparent; background: var(--succes-fond); }
.bloc--lien:focus-visible { outline: 2px solid var(--primaire); outline-offset: 2px; }

/* Grille de panneaux (cartes .bloc) */
.pil-grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--e-3); align-items: stretch; }
/* Dernier panneau en demi-largeur seul sur sa ligne : toute la largeur. */
.pil-grille > .pil-panneau--moitie:last-child:nth-child(odd) { grid-column: span 12; }
.pil-panneau { grid-column: span 4; }
.pil-panneau--large { grid-column: span 8; }
.pil-panneau--moitie { grid-column: span 6; }
.bloc__tete h2 small { margin-left: var(--e-2); font-size: var(--t-xs); font-weight: 400; color: var(--encre-douce); }
/* Corps d'un bloc tableau : contenu au-dessus du tableau, avec le retrait de la carte. */
.pil-corps { display: grid; gap: var(--e-3); padding: var(--e-3) var(--e-carte); min-width: 0; }
.pil-groupe { display: grid; gap: var(--e-3); min-width: 0; }
.bloc--tableau > .pil-vide, .bloc--tableau > .pil-note { padding: 0 var(--e-carte) var(--e-3); }
.pil-note--bloc { padding: var(--e-3) var(--e-carte); border-top: 1px solid var(--trait-2); }
.pil-avancement { display: grid; gap: var(--e-1); margin-top: auto; }
.pil-avancement__libelle { font-size: var(--t-sm); font-weight: 500; color: var(--encre); }

/* Légendes */
.pil-legende { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-3); margin: 0; padding: 0; list-style: none; font-size: var(--t-xs); color: var(--encre-douce); }
.pil-legende li { display: inline-flex; align-items: center; gap: 6px; }
.pil-legende i { display: block; width: 10px; height: 10px; border-radius: 2px; }
.pil-legende a { color: inherit; }

/* Couleurs des séries (jetons --graphe-*) : remplissage SVG et pastilles de légende. */
.pil-serie--compta { fill: var(--graphe-1); background: var(--graphe-1); }
.pil-serie--social { fill: var(--graphe-2); background: var(--graphe-2); }
.pil-serie--juridique { fill: var(--graphe-3); background: var(--graphe-3); }
.pil-serie--assistances { fill: var(--graphe-menthe); background: var(--graphe-menthe); }
.pil-serie--autre, .pil-serie--prevu { fill: var(--graphe-4); background: var(--graphe-4); }
/* Budgets : gain bleu, dans le budget vert forêt, dépassement léger or (remplissage), critique rouge. */
/* Sens (§6) : budget tenu en vert, alerte en ambre, dépassement en rouge ; un gain en indigo. */
.pil-alerte--gain { fill: var(--graphe-1); background: var(--graphe-1); }
.pil-alerte--dans_le_budget { fill: var(--graphe-ok); background: var(--graphe-ok); }
.pil-alerte--depassement_leger { fill: var(--graphe-alerte); background: var(--graphe-alerte); }
.pil-alerte--depassement_critique { fill: var(--graphe-depasse); background: var(--graphe-depasse); }

/* Graphiques SVG */
.pil-graphique { display: block; width: 100%; height: auto; }
.pil-axe { stroke: var(--trait-2); stroke-width: 1; }
.pil-texte { fill: var(--encre-douce); font-size: 11px; font-family: inherit; }
.pil-repartition { display: block; width: 100%; height: 14px; border-radius: var(--rayon-xs); overflow: hidden; }

/* Barres horizontales : libellé, piste SVG, valeur */
.pil-barres { display: grid; gap: var(--e-2); margin: 0; padding: 0; list-style: none; }
.pil-barre { display: grid; grid-template-columns: 110px minmax(0, 1fr) 64px; gap: var(--e-2); align-items: center; font-size: var(--t-sm); }
.pil-barres--large .pil-barre { grid-template-columns: minmax(120px, 200px) minmax(0, 1fr) 40px; }
.pil-barre__libelle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pil-barre__valeur { text-align: right; color: var(--encre-douce); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Pipeline commercial : libellé complet et valeur sur la première ligne, piste pleine largeur dessous. */
.pil-barres--empile { gap: var(--e-3); }
.pil-barres--empile .pil-barre { grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-1) var(--e-3); align-items: baseline; }
.pil-barres--empile .pil-barre__libelle { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; color: var(--encre); text-decoration: none; }
.pil-barres--empile a.pil-barre__libelle:hover { text-decoration: underline; }
.pil-barres--empile .pil-barre__libelle { grid-column: 1; grid-row: 1; }
.pil-barres--empile .pil-barre__valeur { grid-column: 2; grid-row: 1; }
.pil-barres--empile .pil-piste { grid-column: 1 / -1; grid-row: 2; }
.pil-piste { display: block; width: 100%; height: 10px; border-radius: var(--rayon-xs); overflow: hidden; }
.pil-piste__fond { fill: var(--surface-4); }

/* Tableaux compacts */
.pil-defile { overflow-x: auto; }
.pil-tableau { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.pil-tableau th { text-align: left; font-weight: 500; font-size: var(--t-xs); color: var(--encre-douce); background: var(--surface-4); padding: 6px 10px; }
.pil-tableau tbody th { background: none; color: var(--encre); font-size: var(--t-sm); }
.pil-tableau td, .pil-tableau tbody th { padding: 6px 10px; border-top: 1px solid var(--trait-2); }
.pil-tableau tr:hover td { background: var(--surface-2); }
.pil-tableau a { text-decoration: none; }
.pil-tableau a:hover { text-decoration: underline; }

.pil-liste-alertes { display: grid; gap: var(--e-1); margin: 0; padding: 0; list-style: none; font-size: var(--t-sm); }
.pil-valeurs summary { cursor: pointer; font-size: var(--t-xs); color: var(--primaire); }
.pil-valeurs[open] summary { margin-bottom: var(--e-2); }

/* ---------- Ma journée (lot T2) ---------- */

/* Bande Pilotage (lot MJ). */


/* Ma journée : aperçu en blocs de chiffres, puis listes dans des cartes .bloc. */
/* Cartes de même hauteur sur une rangée (stretch) ; le lien de tête ne passe pas sous le titre. */
.mj-listes { align-items: stretch; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.mj-listes .bloc__tete { flex-wrap: nowrap; align-items: baseline; }
.mj-listes .bloc__tete > h2 { min-width: 0; }
.mj-listes .bloc__tete > .mj-voir-tout { flex: none; white-space: nowrap; }
.mj-listes .bloc__tete .compteur { margin-left: 6px; }
.mj-listes .liste-simple { gap: 0; }
.mj-listes .liste-simple > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--e-2); padding: var(--e-2) 0; border-top: 1px solid var(--trait-2); }
.mj-listes .liste-simple > li:first-child { border-top: 0; padding-top: 0; }
.mj-listes .liste-simple > li > a { flex: 1 1 60%; min-width: 0; color: var(--encre); text-decoration: none; }
.mj-listes .liste-simple > li > a:hover { color: var(--primaire); text-decoration: underline; }
.mj-listes .liste-simple > li > a .code { color: var(--primaire); margin-right: 2px; }
.mj-listes .liste-simple > li > .aide { margin-left: auto; text-align: right; font-variant-numeric: tabular-nums; }
.mj-corps { display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; }
.mj-corps > .aide, .mj-corps > .vide { margin: 0; }
/* Compteur des cartes-listes (recettes DS-B N°2 et N°3, a1) : même chiffre que l'aperçu, collé au titre. */
.mj-listes .mj-chiffre { flex: none; margin: 0; }
.mj-listes .bloc__tete + .mj-chiffre { margin-top: calc(-1 * var(--e-2)); }
/* Recette DS-B N°4 (a1) : les cartes d'une rangée partagent les lignes titre / chiffre / corps,
   pour que les gros chiffres restent alignés quand un titre passe sur deux lignes. */
@supports (grid-template-rows: subgrid) {
    .mj-listes > .bloc { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: var(--e-3); align-content: start; }
}

/* Relances : une ligne compacte, badge à gauche, « Vu » en bouton à coche à droite. */
.notifications .liste-simple.mj-relances > li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--e-2); flex-wrap: nowrap; }
.notifications .liste-simple.mj-relances > li > a { overflow-wrap: anywhere; }
.notifications .liste-simple.mj-relances > li > .en-ligne { margin: 0; }
.mj-vu {
    display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px;
    border: 1px solid var(--trait); border-radius: var(--rayon-champ); background: var(--surface);
    color: var(--encre); font: 500 var(--t-xs)/1 var(--police); cursor: pointer;
    transition: background-color var(--duree-rapide) var(--courbe), border-color var(--duree-rapide) var(--courbe);
}
.mj-vu:hover { background: var(--succes-fond); border-color: var(--succes-trait); color: var(--succes-texte); }
.mj-vu:focus-visible { outline: 2px solid var(--primaire); outline-offset: 2px; }

/* Cartes-listes : 8 éléments, puis « Voir tout ». */
.mj-suite { margin-top: var(--e-2); border-top: 1px solid var(--trait-2); padding-top: var(--e-2); }
.mj-suite > summary { cursor: pointer; font-size: var(--t-sm); font-weight: 500; color: var(--primaire); }
.mj-suite > summary:hover { color: var(--primaire-survol); text-decoration: underline; }
.mj-suite[open] > summary { margin-bottom: var(--e-2); }

/* Semaine de temps : colonnes égales en nombre variable (week-end vide masqué sous 480 px). */
.temps-semaine.mj-semaine { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }

@media (max-width: 1000px) {
    .pil-panneau, .pil-panneau--large, .pil-panneau--moitie { grid-column: span 12; }
}
@media (max-width: 480px) {
    .pil-champ { min-width: calc(50% - var(--e-3)); flex: 1 1 calc(50% - var(--e-3)); }
    .pil-champ select { width: 100%; }
    .pil-barre { grid-template-columns: 72px minmax(0, 1fr) 56px; }
    .pil-barres--large .pil-barre { grid-template-columns: 120px minmax(0, 1fr) 32px; }
    .pil-barres--empile .pil-barre { grid-template-columns: minmax(0, 1fr) auto; }
    /* Graphiques lisibles sur téléphone : largeur minimale, défilement dans le panneau, avec une ombre
       au bord qui reste à découvrir (elle disparaît quand on arrive au bout). */
    .pil-graphique { min-width: 520px; }
    .pil-defile {
        background:
            linear-gradient(to right, var(--surface) 30%, transparent) left center / 24px 100% no-repeat local,
            linear-gradient(to left, var(--surface) 30%, transparent) right center / 24px 100% no-repeat local,
            radial-gradient(farthest-side at 0 50%, var(--trait), transparent) left center / 10px 100% no-repeat scroll,
            radial-gradient(farthest-side at 100% 50%, var(--trait), transparent) right center / 10px 100% no-repeat scroll;
    }
    .mj-semaine__repos:not(.temps-semaine__aujourdhui) { display: none; }
    /* Relances : badge au-dessus du message, « Vu » à droite sur les deux lignes. */
    .notifications .liste-simple.mj-relances > li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
    .notifications .liste-simple.mj-relances > li > .etiquette { justify-self: start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
    .notifications .liste-simple.mj-relances > li > .en-ligne { grid-column: 2; grid-row: 1 / span 2; }
}