/*  ═══════════════════════════════════════════════════════════════════════════════════════════════
    DÉLAIS DE PAIEMENT PROJETÉS (2026-10-11, F10) : le composant DelaisProjetes (préfixe `dlp-`), dans l'onglet Activité de la vue
    Croissance (réglable) et sous le pont de trésorerie du cockpit (compact).

    Rien n'invente de couleur : jetons communs (--tx1, --tx2, --mut1, --o4…--o14, --brand), redéfinis par le thème clair, le Mat et
    le Papier. Le tableau des douze mois défile DANS son cadre sur un téléphone (jamais la page).
    ⚠️ Toute modification ici doit bumper le `?v=` de delais-projetes.css dans index.html.
    ═══════════════════════════════════════════════════════════════════════════════════════════════ */

.dlp { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin-top: 10px; padding: 10px 12px; border-radius: 9px;
    background: color-mix(in srgb, var(--brand) 5%, transparent); border: 1px solid var(--o10); }
.dlp.is-compact { margin-top: 8px; padding: 8px 10px; }
.dlp-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.dlp-t { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--tx2); }
.dlp-t .iku-ico { color: var(--an-teal, var(--brand)); }
.dlp-m { font-size: 11.5px; font-weight: 700; color: var(--an-teal, var(--brand)); white-space: nowrap; }

/* Le réglage du dossier : deux boutons, l'actif plein. */
.dlp-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 9px; background: var(--o5); border: 1px solid var(--o10); }
.dlp-seg-b { padding: 4px 11px; border: 0; border-radius: 7px; background: none; color: var(--tx2);
    font: 600 11.5px var(--font-family); cursor: pointer; white-space: nowrap; transition: background .12s, color .12s; }
.dlp-seg-b:hover:not(.on):not(:disabled) { background: var(--o10); }
.dlp-seg-b.on { background: var(--brand); color: var(--sa100, #fff); }
.dlp-seg-b:disabled { cursor: progress; opacity: .7; }
.dlp-seg-b:focus-visible { outline: 2px solid color-mix(in srgb, var(--brand) 60%, transparent); outline-offset: 1px; }

.dlp-note, .dlp-pied { margin: 0; font-size: 11px; line-height: 1.45; color: var(--color-text-muted, var(--mut1)); }
.dlp-pied { font-size: 10.5px; }

/* Le tableau : une ligne par poste ; en saisonnier, douze colonnes dont le fond monte avec le délai du mois. */
.dlp-tab-w { overflow-x: auto; max-width: 100%; }
.dlp-tab { width: 100%; border-collapse: separate; border-spacing: 2px; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--tx2); }
.dlp-tab th { font-weight: 600; color: var(--color-text-muted, var(--mut1)); text-align: center; padding: 2px 3px; }
.dlp-tab .dlp-p { text-align: left; white-space: nowrap; color: var(--tx2); padding-right: 8px; }
.dlp-tab .dlp-r { text-align: right; white-space: nowrap; font-weight: 700; color: var(--tx1, var(--tx2)); padding-left: 6px; }
/* Saisonniers : une ligne de libellé (poste, délai récent) au-dessus des douze mois du poste. */
/*  Recette UX 2026-10-11 : 256 px (et non 300) : dans le volet du pilotage (269 px utiles), décembre sortait du cadre, sans barre
    visible. Douze colonnes de 19 px tiennent trois chiffres en 10,5 px ; en dessous, le cadre défile toujours. */
.dlp-tab.is-mois { table-layout: fixed; min-width: 256px; }
.dlp-tab.is-mois .dlp-c { font-size: 10.5px; padding: 3px 1px; }
.dlp-tab.is-mois thead th { padding: 0 0 2px; }
.dlp-lib th { text-align: left !important; padding: 6px 2px 1px !important; color: var(--tx2) !important; font-weight: 600; white-space: nowrap; }
.dlp-lib th small { margin-left: 8px; font-size: 10.5px; font-weight: 700; color: var(--an-teal, var(--brand)); }
.dlp-c { position: relative; min-width: 26px; padding: 3px 2px; text-align: center; border-radius: 4px; z-index: 0;
    background: var(--o4); }
.dlp-c::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--h, 0) * 100%); border-radius: 4px;
    background: color-mix(in srgb, var(--brand) 26%, transparent); z-index: -1; }
.dlp-c.is-repli { color: var(--color-text-muted, var(--mut1)); font-style: italic; }
.dlp-c.is-repli::before { background: var(--o10); }

.dlp-plier { align-self: flex-start; padding: 2px 0; border: 0; background: none; color: var(--an-teal, var(--brand));
    font: 600 11px var(--font-family); cursor: pointer; }
.dlp-plier:hover { text-decoration: underline; }
.dlp-plier:focus-visible { outline: 2px solid color-mix(in srgb, var(--brand) 60%, transparent); outline-offset: 2px; border-radius: 3px; }