/* ══ PRÉSENTATIONS PAR LOT (portefeuille, 2026-10-07), préfixe plo- ═════════════════════════════════════════════════════════
   Shared/PresentationsLot.razor : la fenêtre du lot (modèle, dossiers cochés, progression, bilan). Même famille visuelle que la
   fenêtre des présentations du hub (Shared/MemorandumModal.razor) : en-tête en bandeau, corps qui défile, pied fixe portant l'action.
   Jetons : --tx1, --mut1, --o8, --brand, --brand-strong, --brand-contrast, --surf-1, --surf-2, --st-* (clair et sombre).
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

.plo-fond { position: fixed; inset: 0; z-index: 12060; background: rgba(4, 12, 18, .58); display: flex; align-items: center; justify-content: center; padding: 16px; }
.plo-modal { --plo-a: var(--pal-1, var(--brand, #00b1cf)); --plo-b: var(--pal-6, var(--brand2, var(--brand, #00b1cf)));
             width: min(760px, 100%); max-height: 92vh; max-height: 92svh; display: flex; flex-direction: column; overflow: hidden;
             border: 1px solid var(--o8, rgba(255,255,255,.12)); border-radius: 16px; box-shadow: 0 36px 80px -28px rgba(0,0,0,.7);
             background-color: var(--surf-1, #0e1620); color: var(--tx1, #e9f1f2);
             background-image: radial-gradient(ellipse 85% 75% at 10% -30%, color-mix(in oklab, var(--plo-a) 32%, transparent), transparent 72%); }

.plo-tete { position: relative; flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 12px 14px 11px 20px;
            background: linear-gradient(120deg, color-mix(in oklab, var(--plo-a) 16%, var(--surf-2, #13202b)), color-mix(in oklab, var(--plo-b) 7%, var(--surf-2, #13202b)) 75%);
            border-bottom: 1px solid color-mix(in srgb, var(--brand, #00b1cf) 28%, var(--o8, rgba(255,255,255,.12))); }
.plo-tete::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--plo-a), var(--plo-b)); }
.plo-tete-ic { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--brand-contrast, #04131a);
               background: linear-gradient(135deg, var(--plo-a), var(--plo-b)); }
.plo-tete-ic svg { width: 17px; height: 17px; }
.plo-tete h2 { margin: 0; flex: 0 0 auto; font-size: 1.1rem; font-weight: 800; letter-spacing: -.015em; white-space: nowrap; color: var(--tx1, #e9f1f2); }
.plo-tete-s { margin: 0; flex: 1; min-width: 0; padding-left: 12px; border-left: 1px solid var(--o8, rgba(255,255,255,.14));
              font-size: .8rem; line-height: 1.4; color: var(--mut1, #9fb3ba); }
.plo-x { flex: 0 0 auto; width: 30px; height: 30px; margin-left: auto; border-radius: 9px; display: grid; place-items: center; border: 0; background: transparent;
         color: var(--mut1, #9fb3ba); font-size: 1.3rem; cursor: pointer; }
.plo-x:hover { color: var(--tx1, #e9f1f2); background: color-mix(in srgb, var(--tx1, #e9f1f2) 9%, transparent); }

.plo-corps { flex: 1 1 auto; min-height: 0; padding: 16px 20px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.plo-rang { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: .72rem; font-weight: 750; letter-spacing: .05em;
            text-transform: uppercase; color: var(--mut1, #9fb3ba); }
.plo-rang em { font-style: normal; font-weight: 650; text-transform: none; letter-spacing: 0; margin-left: 6px; }
.plo-rang-actions { display: inline-flex; gap: 12px; text-transform: none; letter-spacing: 0; }
.plo-lien { background: none; border: 0; padding: 0; color: var(--brand, #00b1cf); font: inherit; font-size: .76rem; font-weight: 650; cursor: pointer; }
.plo-lien:hover { text-decoration: underline; }

.plo-avis { padding: 10px 12px; border-radius: 10px; font-size: .8rem; line-height: 1.45;
            background: color-mix(in srgb, var(--brand, #00b1cf) 10%, transparent); border: 1px solid color-mix(in srgb, var(--brand, #00b1cf) 30%, transparent); }

.plo-modeles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.plo-modele { position: relative; display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 11px 12px; border-radius: 12px; cursor: pointer;
              font: inherit; color: var(--tx1, #e9f1f2); background: color-mix(in srgb, var(--tx1, #e9f1f2) 3%, transparent);
              border: 1px solid var(--o8, rgba(255,255,255,.12)); }
.plo-modele strong { font-size: .88rem; font-weight: 750; }
.plo-modele span { font-size: .75rem; line-height: 1.4; color: var(--mut1, #9fb3ba); }
.plo-modele:hover { border-color: color-mix(in srgb, var(--brand, #00b1cf) 45%, var(--o8, rgba(255,255,255,.12))); }
.plo-modele:focus-visible { outline: 2px solid var(--brand, #00b1cf); outline-offset: 2px; }
.plo-modele.choisi { border-color: var(--brand, #00b1cf); box-shadow: 0 0 0 1px var(--brand, #00b1cf) inset; }
.plo-modele select { margin-top: 2px; width: 100%; min-width: 0; padding: 5px 8px; border-radius: 8px; font: inherit; font-size: .78rem;
                     color: var(--tx1, #e9f1f2); background: var(--surf-2, #13202b); border: 1px solid var(--o8, rgba(255,255,255,.14)); }

.plo-dossiers, .plo-suivi { list-style: none; margin: 0; padding: 0; border: 1px solid var(--o8, rgba(255,255,255,.12)); border-radius: 12px; overflow: hidden auto; }
.plo-dossiers { max-height: 300px; }
.plo-suivi { max-height: 260px; }
.plo-dossiers li + li, .plo-suivi li + li { border-top: 1px solid var(--o8, rgba(255,255,255,.08)); }
.plo-dossiers label { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; font-size: .84rem; min-width: 0; }
.plo-dossiers input { flex: 0 0 auto; width: 15px; height: 15px; accent-color: var(--brand, #00b1cf); }
.plo-dossiers li.indispo label { cursor: default; opacity: .62; }
.plo-nom { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.plo-raison { flex: 0 1 auto; min-width: 0; font-size: .75rem; color: var(--mut1, #9fb3ba); text-align: right; }
.plo-suivi li { display: flex; align-items: center; gap: 10px; padding: 7px 12px; font-size: .82rem; }
.plo-suivi li::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 999px; background: var(--mut1, #9fb3ba); }
.plo-suivi li.genere::before { background: var(--st-green, #34d399); }
.plo-suivi li.echec::before { background: var(--st-red, #f0705a); }
.plo-suivi li.echec .plo-raison { color: var(--st-red, #f0705a); }
.plo-suivi li.arrete::before, .plo-suivi li.non-traite::before { background: var(--st-amber, #fbbf24); }

.plo-prog { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 12px;
            background: color-mix(in srgb, var(--brand, #00b1cf) 7%, transparent); border: 1px solid color-mix(in srgb, var(--brand, #00b1cf) 24%, transparent); }
.plo-prog-t { display: flex; align-items: baseline; gap: 10px; min-width: 0; font-size: .95rem; }
.plo-prog-t strong { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.plo-courant { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.plo-barre { height: 6px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--tx1, #e9f1f2) 10%, transparent); }
.plo-barre-rempli { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--plo-a), var(--plo-b)); transition: width .3s ease; }
.plo-etape { font-size: .78rem; color: var(--mut1, #9fb3ba); }

.plo-bilan { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.plo-bilan > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--o8, rgba(255,255,255,.12)); }
.plo-bilan b { font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.plo-bilan span { font-size: .72rem; color: var(--mut1, #9fb3ba); }
.plo-bilan > div.echec b { color: var(--st-red, #f0705a); }

.plo-note { font-size: .76rem; line-height: 1.45; color: var(--mut1, #9fb3ba); }
.plo-msg { font-size: .8rem; line-height: 1.45; color: var(--brand, #00b1cf); }
.plo-msg.erreur { color: var(--st-red, #f0705a); }

.plo-pied { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 20px;
            border-top: 1px solid var(--o8, rgba(255,255,255,.12)); background: color-mix(in oklab, var(--surf-2, #13202b) 96%, var(--plo-a)); }
.plo-pied-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.plo-pied-txt strong { font-size: .88rem; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plo-pied-txt span { font-size: .75rem; line-height: 1.4; color: var(--mut1, #9fb3ba); }
.plo-pied-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.plo-btn { flex: 0 0 auto; padding: 10px 16px; border-radius: 10px; border: 1px solid var(--o8, rgba(255,255,255,.18)); background: transparent;
           color: var(--tx1, #e9f1f2); font: inherit; font-weight: 650; font-size: .85rem; cursor: pointer; }
.plo-btn.primaire { background: linear-gradient(90deg, var(--brand, #00b1cf), color-mix(in oklab, var(--brand, #00b1cf) 70%, var(--plo-b))); border-color: transparent;
                    color: var(--brand-contrast, #04131a); font-weight: 750; }
.plo-btn:not(:disabled):hover { filter: brightness(1.06); }
.plo-btn:disabled { opacity: .55; cursor: default; }

@media (max-width: 640px) {
    .plo-modeles { grid-template-columns: 1fr; }
    .plo-bilan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .plo-tete-s { display: none; }
    .plo-pied { flex-direction: column; align-items: stretch; }
    .plo-pied-actions { justify-content: flex-end; }
}