/* ══ ONGLET « OBJECTIF » DU VOLET DU PILOTAGE (2026-10-26), préfixe obj- ═══════════════════════════════════════════════════════
   Shared/ObjectifVolet.razor : « Atteindre un objectif » (solveur, trois plans) et « Qu'est-ce qui me casse ? » (stress inverse).
   • Le volet est étroit : tout s'empile verticalement, jamais de colonne côte à côte au-delà de deux valeurs courtes.
   • Jetons de l'app : --o*, --tx*, --mut*, --brand, --st-red (défavorable), --st-amber (à surveiller), --st-green (favorable). Ils
     changent avec le thème : rien n'est écrit en dur, sauf les replis.
   • Étiquettes à l'encre du texte ; la couleur porte le sens (rupture, crédible, tendu), jamais seule : un mot l'accompagne.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

.obj { --obj-neg: var(--st-red, #f87171); --obj-warn: var(--st-amber, #fbbf24); --obj-pos: var(--st-green, #34d399);
       display: flex; flex-direction: column; gap: 12px; padding: 2px 0 14px; font-family: var(--font-family); color: var(--tx1); min-width: 0; }
.obj > * { flex-shrink: 0; min-width: 0; }
/* Le volet mesure de 260 à 900 px : l'onglet se met en page selon SA largeur (requêtes de conteneur, plus bas). */
.obj { container-type: inline-size; container-name: volet-objectif; }

/* ── Le sélecteur des deux outils ── */
.obj-seg { display: flex; gap: 4px; padding: 3px; border-radius: 10px; background: var(--o5); border: 1px solid var(--o8); }
.obj-seg-b {
    flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
    padding: 7px 8px; border-radius: 8px; border: 0; background: transparent; color: var(--mut1);
    font: inherit; font-size: 12px; font-weight: 700; line-height: 1.2; text-align: center;
}
.obj-seg-b svg { width: 14px; height: 14px; flex: 0 0 auto; }
.obj-seg-b:hover { color: var(--tx1); }
.obj-seg-b.on { background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--tx8, var(--tx1)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 45%, transparent); }
.obj-seg-b:focus-visible, .obj-past:focus-visible, .obj-btn:focus-visible, .obj-chip:focus-visible, .obj-opt:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.obj-depart { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 11.5px; color: var(--mut1); line-height: 1.4; }
.obj-depart > span:first-of-type { color: var(--tx2, var(--tx1)); font-weight: 600; overflow-wrap: anywhere; }
.obj-depart-h { padding: 1px 7px; border-radius: 999px; background: var(--o6); white-space: nowrap; }

/* ── Blocs, libellés, pastilles ── */
.obj-bloc { display: flex; flex-direction: column; gap: 8px; padding: 11px 12px; border-radius: 12px; background: var(--o3); border: 1px solid var(--o6); }
.obj-lbl { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--mut1); }
.obj-lbl-sep { margin-top: 4px; }
.obj-pastilles { display: flex; flex-wrap: wrap; gap: 6px; }
.obj-past {
    display: inline-flex; align-items: center; gap: 5px; max-width: 100%; cursor: pointer; padding: 5px 10px; border-radius: 999px;
    border: 1px solid var(--o12, var(--o10)); background: var(--o4); color: var(--tx2, var(--tx1));
    font: inherit; font-size: 11.5px; font-weight: 600; line-height: 1.3; text-align: left;
}
.obj-past svg { flex: 0 0 auto; }
.obj-past b { font-weight: 800; color: var(--tx1); white-space: nowrap; }
.obj-past:hover { border-color: color-mix(in srgb, var(--brand) 50%, transparent); }
.obj-past.on, .obj-past.ouvert { border-color: color-mix(in srgb, var(--brand) 55%, transparent); background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--tx1); }
.obj-past-plus { border-style: dashed; color: var(--mut1); }

/* ── La cible de l'objectif ── */
.obj-cible { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.obj-cible-mois { flex: 1 1 110px; min-width: 0; }
.obj-cible-l { flex: 1 1 150px; font-size: 12.5px; font-weight: 600; }
.obj-cible-op { font-size: 15px; font-weight: 800; color: var(--mut1); }
.obj-cible-v { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12.5px; color: var(--mut1); }
.obj .obj-num { width: 116px; }
.obj .obj-num.obj-num-k { width: 96px; }
.obj-unite { font-size: 12px; font-weight: 600; color: var(--mut1); white-space: nowrap; }
.obj input.obj-num { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; padding-right: 8px; }
.obj-rel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.obj-actuel { margin: 0; font-size: 11.5px; color: var(--mut1); line-height: 1.45; }
.obj-rel .obj-actuel { flex: 1 1 auto; white-space: nowrap; }
.obj-rel-chips { display: inline-flex; gap: 6px; flex: 0 0 auto; margin-left: auto; }
.obj-chip {
    cursor: pointer; padding: 3px 8px; border-radius: 7px; border: 1px solid var(--o10); background: transparent; color: var(--tx2, var(--tx1));
    font: inherit; font-size: 11px; font-weight: 700;
}
.obj-chip:hover { background: var(--o6); }
.obj-chip.on { border-color: color-mix(in srgb, var(--brand) 55%, transparent); background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--tx1); }
.obj-actuel b { font-weight: 700; }
/* 26/10 : ce que fait l'outil, en tête de chaque mode. */
.obj-intro { display: flex; align-items: flex-start; gap: 8px; padding: 9px 11px; border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--brand) 24%, transparent); background: color-mix(in srgb, var(--brand) 7%, transparent); }
.obj-intro > .iku-ico { flex: none; margin-top: 2px; color: var(--brand); }
.obj-intro p { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--tx2, var(--tx1)); }
.obj-actuel b.pos { color: var(--st-green, #34d399); }
.obj-actuel b.neg { color: var(--st-red, #f87171); }

/* 26/10 : le champ du seuil, d'un bloc, au gabarit de la liste du mois (hauteur, cadre, fond) : « ≥ » et « k€ » DANS le cadre. */
.obj-champ { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; height: 36px; box-sizing: border-box; padding: 0 11px;
    flex: 0 0 auto; border-radius: 9px; border: 1px solid var(--o12); background: var(--o4); cursor: text;
    transition: border-color .14s, box-shadow .14s; }
.obj-champ:hover { border-color: var(--o18, var(--o12)); }
.obj-champ:focus-within { border-color: color-mix(in srgb, var(--brand) 70%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.obj-champ-op { font-size: 14px; font-weight: 800; color: var(--mut1); }
.obj-champ-u { font-size: 12px; font-weight: 700; color: var(--mut1); white-space: nowrap; }
.obj-champ .num-stepper { flex: 0 0 auto; }
.obj .obj-champ input.obj-champ-in { width: 6.5ch; height: 34px; padding: 0; margin: 0; border: 0; outline: none; box-shadow: none; background: transparent;
    text-align: right; color: var(--tx1); font: inherit; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ── L'éditeur d'une pastille ── */
.obj-edit { display: flex; flex-direction: column; gap: 7px; padding: 10px; border-radius: 10px; background: var(--o4); border: 1px solid color-mix(in srgb, var(--brand) 28%, transparent); }
.obj-edit-t { font-size: 12.5px; font-weight: 800; }
.obj-edit-p { margin: 0; font-size: 11.5px; color: var(--mut1); line-height: 1.45; }
.obj-edit-r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.obj-edit-l, .obj-edit-u { font-size: 12px; color: var(--mut1); }
.obj-edit-a { display: flex; flex-wrap: wrap; gap: 6px; }
.obj-opt {
    display: flex; align-items: center; gap: 6px; width: 100%; cursor: pointer; padding: 7px 10px; border-radius: 8px;
    border: 1px solid var(--o8); background: transparent; color: var(--tx2, var(--tx1)); font: inherit; font-size: 12px; text-align: left;
}
.obj-opt:hover { background: var(--o6); }
.obj-opt.on { border-color: color-mix(in srgb, var(--brand) 55%, transparent); background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--tx1); font-weight: 700; }
.obj-seuil { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.obj-seuil-l { font-size: 12px; font-weight: 700; }
.obj-seuil-n { flex: 1 0 100%; font-size: 11px; color: var(--mut1); }

/* ── Boutons ── */
.obj-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; padding: 8px 12px; border-radius: 9px;
    border: 1px solid color-mix(in srgb, var(--brand) 50%, transparent); background: color-mix(in srgb, var(--brand) 16%, transparent);
    color: var(--tx1); font: inherit; font-size: 12.5px; font-weight: 700; line-height: 1.2;
}
.obj-btn svg { width: 14px; height: 14px; flex: 0 0 auto; }
.obj-btn:hover { background: color-mix(in srgb, var(--brand) 24%, transparent); }
.obj-btn:disabled { opacity: .5; cursor: not-allowed; }
.obj-btn-sec { border-color: var(--o12, var(--o10)); background: transparent; color: var(--tx2, var(--tx1)); }
.obj-btn-sec:hover { background: var(--o6); }
.obj-go { width: 100%; padding: 10px 12px; font-size: 13px; }
.obj-note { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--mut1); }
.obj-pied { margin: 0; display: flex; align-items: flex-start; gap: 6px; font-size: 11px; color: var(--mut1); line-height: 1.45; }
.obj-pied svg { flex: 0 0 auto; margin-top: 2px; }

/* ── Progression ── */
.obj-prog { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; background: var(--o4); }
.obj-prog-t { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; }
.obj-barre { height: 6px; border-radius: 999px; background: var(--o8); overflow: hidden; }
.obj-barre > span { display: block; height: 100%; border-radius: inherit; background: var(--brand); transition: width .25s ease; }
.obj-prog .obj-btn { align-self: flex-start; }
.obj-spin { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--o12, var(--o10)); border-top-color: var(--brand); animation: objTourne .8s linear infinite; flex: 0 0 auto; }
@keyframes objTourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .obj-spin { animation: none; } .obj-barre > span { transition: none; } }

/* ── Les plans ── */
.obj-plans { display: flex; flex-direction: column; gap: 10px; }
.obj-plan { display: flex; flex-direction: column; gap: 9px; padding: 12px; border-radius: 12px; background: var(--o3); border: 1px solid var(--o8); }
.obj-plan-credible { border-color: color-mix(in srgb, var(--obj-pos) 35%, var(--o8)); }
.obj-plan-tendu { border-color: color-mix(in srgb, var(--obj-warn) 40%, var(--o8)); }
.obj-plan-impossible { opacity: .92; }
.obj-plan-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.obj-plan-n { font-size: 13.5px; font-weight: 800; }
.obj-badge { flex: 0 0 auto; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .02em; }
.obj-badge-credible { color: var(--obj-pos); background: color-mix(in srgb, var(--obj-pos) 14%, transparent); }
.obj-badge-tendu { color: var(--obj-warn); background: color-mix(in srgb, var(--obj-warn) 14%, transparent); }
.obj-badge-impossible { color: var(--mut1); background: var(--o6); }
html[data-theme="light"] .obj-badge-credible { color: color-mix(in srgb, var(--obj-pos) 70%, #000); }
html[data-theme="light"] .obj-badge-tendu { color: color-mix(in srgb, var(--obj-warn) 60%, #000); }
.obj-plan-p { margin: 0; font-size: 12px; color: var(--mut1); line-height: 1.45; }
.obj-plan-l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.obj-plan-l li { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; padding: 3px 0; border-bottom: 1px dashed var(--o8); }
.obj-plan-l li:last-child { border-bottom: 0; }
.obj-plan-l li > span { flex: 1 1 auto; min-width: 0; color: var(--tx2, var(--tx1)); }
.obj-plan-l li > b { font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.obj-tendu { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--obj-warn); }
html[data-theme="light"] .obj-tendu { color: color-mix(in srgb, var(--obj-warn) 60%, #000); }
.obj-plan-k { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.obj-plan-k > div { display: flex; flex-direction: column; gap: 1px; padding: 7px 9px; border-radius: 9px; background: var(--o4); min-width: 0; }
.obj-plan-k small { font-size: 10.5px; color: var(--mut1); line-height: 1.3; }
.obj-plan-k b { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.obj-plan-k em { font-style: normal; font-size: 10.5px; color: var(--mut1); }
.obj-plan-go { width: 100%; }
/* 26/10 : nommer le scénario avant de le créer : le champ prend la place du bouton, « Créer » et × à côté, à la même hauteur. */
.obj-nom { display: flex; align-items: center; gap: 6px; width: 100%; }
.obj-nom .obj-nom-champ { flex: 1 1 auto; min-width: 0; margin-left: 0; }
.obj .obj-nom input.obj-nom-in { flex: 1 1 auto; min-width: 0; width: auto; height: 34px; padding: 0; margin: 0; border: 0; outline: none; box-shadow: none;
    background: transparent; color: var(--tx1); font: inherit; font-size: 13px; font-weight: 700; }
.obj-nom .obj-btn { flex: 0 0 auto; height: 36px; box-sizing: border-box; }
.obj-nom .obj-nom-x { padding: 8px 10px; }

/* ── Le stress inverse : levier par levier ── */
.obj-tab { display: flex; flex-direction: column; border-radius: 12px; background: var(--o3); border: 1px solid var(--o6); overflow: hidden; }
.obj-tab-h { display: flex; justify-content: space-between; gap: 8px; padding: 7px 12px; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--mut1); border-bottom: 1px solid var(--o6); }
.obj-row { display: flex; flex-direction: column; gap: 5px; padding: 9px 12px; border-bottom: 1px solid var(--o6); }
.obj-row:last-child { border-bottom: 0; }
.obj-row-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.obj-row-n { font-size: 12.5px; font-weight: 700; min-width: 0; }
.obj-row-v { font-size: 12.5px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.obj-row-v.neg, .obj-neg { color: var(--obj-neg); }
.obj-row-v.pos, .obj-pos { color: var(--obj-pos); }
.obj-warn { color: var(--obj-warn); }
.obj-row-v.mut { color: var(--mut1); font-weight: 600; }
html[data-theme="light"] .obj-row-v.pos, html[data-theme="light"] .obj-pos { color: color-mix(in srgb, var(--obj-pos) 70%, #000); }
html[data-theme="light"] .obj-warn { color: color-mix(in srgb, var(--obj-warn) 60%, #000); }
html[data-theme="light"] .obj-row-v.neg, html[data-theme="light"] .obj-neg { color: color-mix(in srgb, var(--obj-neg) 80%, #000); }
.obj-row-s { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; font-size: 11px; color: var(--mut1); }
.obj-row-d { font-weight: 700; }
.obj-combi-d { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 0 10px; }
/* Un levier et sa valeur ne se séparent jamais d'une ligne à l'autre. */
.obj-combi-i { white-space: nowrap; }

/* La barre de distance : le choc nécessaire, et le repère du pire historique (un trait). */
.obj-dist { position: relative; height: 8px; border-radius: 999px; background: var(--o8); }
.obj-dist-f { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: var(--obj-pos); }
.obj-dist-neg .obj-dist-f { background: var(--obj-neg); }
.obj-dist-warn .obj-dist-f { background: var(--obj-warn); }
.obj-dist-f.obj-dist-loin { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--obj-pos) 55%, transparent) 0 5px, color-mix(in srgb, var(--obj-pos) 25%, transparent) 5px 10px); }
.obj-dist-rep { position: absolute; top: -3px; bottom: -3px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--tx1); box-shadow: 0 0 0 1px var(--o12, var(--o10)); }

/* ── Le verdict ── */
.obj-verdict { display: flex; align-items: flex-start; gap: 8px; padding: 11px 12px; border-radius: 12px; font-size: 12.5px; font-weight: 600; line-height: 1.45; }
.obj-verdict svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; }
.obj-v-fragile { background: color-mix(in srgb, var(--obj-neg) 13%, transparent); border: 1px solid color-mix(in srgb, var(--obj-neg) 35%, transparent); }
.obj-v-fragile svg { color: var(--obj-neg); }
.obj-v-surveiller { background: color-mix(in srgb, var(--obj-warn) 13%, transparent); border: 1px solid color-mix(in srgb, var(--obj-warn) 38%, transparent); }
.obj-v-surveiller svg { color: var(--obj-warn); }
.obj-v-confortable { background: color-mix(in srgb, var(--obj-pos) 12%, transparent); border: 1px solid color-mix(in srgb, var(--obj-pos) 32%, transparent); }
.obj-v-confortable svg { color: var(--obj-pos); }

/* ── Le verrou (formule sous Pilotage) et les cas sans calcul ── */
.obj-verrou { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 9px; padding: 22px 14px; border-radius: 14px; background: var(--o3); border: 1px dashed var(--o12, var(--o10)); }
.obj-verrou-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: var(--tx8, var(--brand)); background: color-mix(in srgb, var(--brand) 15%, transparent); }
.obj-verrou-ic svg { width: 19px; height: 19px; }
.obj-verrou-t { font-size: 14px; font-weight: 800; }
.obj-verrou-p { margin: 0; font-size: 12px; color: var(--mut1); line-height: 1.5; }
.obj-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--mut1); background: var(--o6); }

/* Le cadenas de l'onglet du volet. */
.pilot-tab .pilot-tab-lock { opacity: .75; margin-left: 1px; }
/* Trois onglets dans l'en-tête du volet (Hypothèses, Repères, Objectif) : « Épingler » passe en icône seule, les onglets se serrent
   et ne débordent jamais sur leurs voisins (FinTreePopup : classe a-trois-onglets). */
.side-modebar.a-trois-onglets .side-modebar-pin { width: 26px; padding: 0; justify-content: center; }
.side-modebar.a-trois-onglets .side-modebar-pin-lbl { display: none; }
.side-modebar.a-trois-onglets .pilot-tabs { gap: 4px; container-type: inline-size; container-name: onglets-volet; }
.side-modebar.a-trois-onglets .pilot-tab { flex: 1 1 auto; min-width: 0; padding: 6px 6px; gap: 4px; line-height: 1.2; white-space: nowrap; }
.side-modebar.a-trois-onglets .pilot-tab-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Le nombre d'hypothèses actives : une pastille, plus « (3) » qui passait à la ligne. */
.pilot-tab .pilot-tab-n {
    flex: 0 0 auto; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; display: inline-grid; place-items: center;
    font-size: 10px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums;
    color: var(--tx1); background: color-mix(in srgb, var(--brand) 26%, transparent);
}
/* Place trop juste pour trois libellés (volet épinglé étroit) : icône seule, le nom passe dans l'infobulle (data-tip, aria-label). */
/* Entre les deux, seul l'onglet ouvert garde son libellé (volet épinglé de 320 px). */
@container onglets-volet (max-width: 270px) {
    .pilot-tab:not(.on) .pilot-tab-l { display: none; }
    .pilot-tab:not(.on) { flex: 0 0 auto; padding: 6px 8px; }
    .pilot-tab { gap: 3px; }
}
@container onglets-volet (max-width: 190px) {
    .pilot-tab .pilot-tab-l { display: none; }
    .pilot-tab.on { flex: 1 1 auto; }
}

/* ── Volet étroit (épinglé à 260-340 px) : le sélecteur des deux outils s'empile, chaque bouton sur une ligne. ── */
@container volet-objectif (max-width: 340px) {
    .obj-seg { flex-direction: column; }
    .obj-seg-b { justify-content: flex-start; padding: 7px 10px; }
}

/* ── 26/10 (Arthur : « corrige ux ici ») : volet LARGE (épinglé sous le tableau, 760 px et plus). Le corps du mode passe sur deux
   colonnes : les blocs de saisie côte à côte (objectif | contraintes ; rupture | …), le bouton, la progression et les résultats en
   pleine largeur ; la note et le point de départ restent au-dessus, la note limitée à une ligne lisible. ── */
.obj-corps { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.obj-corps > * { flex-shrink: 0; min-width: 0; }
@container volet-objectif (min-width: 760px) {
    .obj-corps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 12px 14px; }
    .obj-corps > :not(.obj-bloc) { grid-column: 1 / -1; }
    .obj-corps > .obj-go { justify-self: start; min-width: 320px; }
    .obj-intro p { max-width: 980px; }
}