/* ══ ÉTATS INDISPONIBLES (2026-10-11, U3) ═══════════════════════════════════════════════════════════════════════════════════════
   Shared/EtatIndisponible.razor (préfixe eti-) : ce qu'une vue ne peut pas montrer, dit d'UNE seule façon : l'icône, un titre
   court, la raison en clair, puis le geste qui débloque (Recharger le FEC, Charger un exercice de plus, Le lire en Current
   trading, le verrou d'actualisation existant en variante « action »).
   • .eti-plein    à la place d'une vue ou d'une carte : centré, cadre pointillé (la grammaire des anciens aex-empty / io-vide) ;
   • .eti-compact  dans une tuile, un bandeau ou une barre : en ligne, icône, texte, geste à droite (sous le texte au téléphone) ;
   • .eti-cellule  dans une case de tableau ou une tuile chiffrée : le mot court souligné en pointillé, la raison en infobulle.
   Moderne (défaut), Mat et Papier (fin de fichier), clair et sombre, Compact, téléphone (≤ 640 px), animations réduites.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

.eti { box-sizing: border-box; min-width: 0; font-family: var(--font-family); color: var(--tx2, #c2cdd6); }
.eti-ic {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 40px; height: 40px; border-radius: 12px;
    color: var(--brand-strong, var(--brand, #00B1CF)); background: color-mix(in srgb, var(--brand, #00B1CF) 12%, transparent);
}
/*  Les hôtes taillent parfois leurs icônes (.fct-fec .iku-ico à 12 px, .aex-empty…) : celle de l'état garde sa taille. */
.eti .eti-ic .iku-ico { width: 19px; height: 19px; margin: 0; vertical-align: 0; color: inherit; }
.eti-txt { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.eti .eti-t { margin: 0; font-size: 14.5px; font-weight: 750; line-height: 1.3; color: var(--tx1, #e8eef2); }
.eti .eti-r { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--tx2, #c2cdd6); max-width: 62ch; overflow-wrap: anywhere; }
.eti-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.eti-act:empty { display: none; }

/*  Le geste : la même allure que le geste « offert » du verrou (actualisation.css), pour qu'un déblocage se reconnaisse partout. */
.eti-btn {
    display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 7px 13px; border-radius: 10px;
    font: inherit; font-size: 12.5px; font-weight: 700; line-height: 1.2; cursor: pointer; white-space: nowrap;
    color: var(--brand-strong, var(--brand, #00B1CF));
    background: color-mix(in srgb, var(--brand, #00B1CF) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand, #00B1CF) 48%, transparent);
    transition: background .12s, border-color .12s;
}
.eti-btn:hover { background: color-mix(in srgb, var(--brand, #00B1CF) 18%, transparent); border-color: var(--brand, #00B1CF); }
.eti-btn:focus-visible, .eti-cellule:focus-visible { outline: 2px solid var(--brand, #00B1CF); outline-offset: 2px; }
.eti-btn.is-second { color: var(--tx2, #c2cdd6); background: transparent; border-color: var(--o12, rgba(255,255,255,.12)); }
.eti-btn .iku-ico { flex: 0 0 auto; }
.eti-act .actu-verrou { gap: 0; }
/*  Le verrou posé en geste (variante « action ») : en second, à l'allure du geste de l'état ; l'appel principal reste celui du
    bandeau de la vue, quand elle en a un (une seule action pleine à l'écran). */
.eti-act .actu-verrou-btn {
    min-height: 34px; padding: 7px 13px; font-size: 12.5px;
    color: var(--brand-strong, var(--brand, #00B1CF));
    background: color-mix(in srgb, var(--brand, #00B1CF) 10%, transparent);
    border-color: color-mix(in srgb, var(--brand, #00B1CF) 48%, transparent);
}
.eti-act .actu-verrou-btn:hover:not(:disabled) { filter: none; background: color-mix(in srgb, var(--brand, #00B1CF) 18%, transparent); border-color: var(--brand, #00B1CF); }

/* ── Plein : à la place d'une vue ── */
.eti-plein {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
    width: 100%; padding: 28px 22px; border: 1px dashed var(--o12, rgba(255,255,255,.14)); border-radius: 12px;
}
.eti-plein .eti-txt { align-items: center; }
.eti-plein .eti-act { justify-content: center; margin-top: 2px; }
/*  Les vues du carrousel (IntentPopup) : au tiers haut de la fenêtre, comme l'ancien io-vide. */
.intent-popup-view-wrapper > .eti-plein { max-width: 580px; margin: 12vh auto 0; }
/*  Le panneau de la dynamique du portefeuille en grand écran : au centre de la place qu'il prend. */
.dyc-corps > .eti-plein { max-width: 620px; margin: 8vh auto; }

/* ── Compact : une tuile, un bandeau, une barre ── */
.eti-compact {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; width: 100%;
    padding: 10px 14px; border-radius: 11px;
    background: var(--o4, rgba(255,255,255,.04)); border: 1px solid var(--o10, rgba(255,255,255,.1));
}
.eti-compact .eti-ic { width: 32px; height: 32px; border-radius: 10px; }
.eti-compact .eti-ic .iku-ico { width: 16px; height: 16px; }
.eti-compact .eti-txt { flex: 1 1 260px; gap: 2px; }
.eti-compact .eti-t { font-size: 13px; }
.eti-compact .eti-r { font-size: 12px; max-width: 86ch; }
.eti-compact .eti-act { flex: 0 0 auto; margin-left: auto; }
/*  Dans un emplacement de graphique (pilotage) : le cadre de l'hôte centre l'état, sans s'étirer d'un bord à l'autre. */
.pdv-empty > .eti-compact { max-width: 520px; text-align: left; }
.fct-fec > .eti-compact { margin: 2px 0; }
.fch.fch-auto { display: block; }
.pcl-indispo { margin-bottom: 2px; }

/* ── Cellule : une case de tableau, une tuile chiffrée ── */
.eti-cellule {
    display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: baseline;
    font-size: 11.5px; font-weight: 600; line-height: 1.3; white-space: nowrap; cursor: help;
    color: var(--mut2, #b6c4cc); border-bottom: 1px dotted currentColor;
}
.fch-tuile-auto .eti-cellule { font-size: 12px; font-weight: 700; color: var(--mut1, #8aa0ad); }
.fch-tuile-auto { cursor: default; }
.tcl-hero-value .eti-cellule { font-size: 15px; font-weight: 700; }

/* ── Thème clair ── */
html[data-theme="light"] .eti { color: #3d5260; }
html[data-theme="light"] .eti .eti-t { color: #10212b; }
html[data-theme="light"] .eti .eti-r { color: #3d5260; }
html[data-theme="light"] .eti-plein { border-color: rgba(15, 38, 56, .2); }
html[data-theme="light"] .eti-compact { background: rgba(15, 38, 56, .03); border-color: rgba(15, 38, 56, .13); }
html[data-theme="light"] .eti-btn.is-second { color: #2c3e4a; border-color: rgba(15, 38, 56, .2); }
html[data-theme="light"] .eti-cellule { color: #4f6472; }
html[data-theme="light"] .fch-tuile-auto .eti-cellule { color: #4f6472; }

/* ── Densité Compact ── */
html[data-density="compact"] .eti-plein { gap: 8px; padding: 20px 16px; }
html[data-density="compact"] .eti-plein .eti-ic { width: 34px; height: 34px; }
html[data-density="compact"] .eti-compact { gap: 8px 10px; padding: 7px 11px; }
html[data-density="compact"] .eti-compact .eti-ic { width: 26px; height: 26px; border-radius: 8px; }
html[data-density="compact"] .eti-btn { min-height: 28px; padding: 5px 11px; font-size: 12px; }

/* ── Téléphone ── */
@media (max-width: 640px) {
    .eti-plein { padding: 22px 16px; }
    .intent-popup-view-wrapper > .eti-plein { margin-top: 6vh; }
    .eti-compact .eti-txt { flex-basis: calc(100% - 50px); }
    .eti-compact .eti-act { margin-left: 44px; }
    .eti-btn { white-space: normal; text-align: left; }
}

/* ── Mat : surfaces pleines, filets du style ── */
html[data-style="mat"] .eti-compact { background: var(--mt-carte) !important; border-color: var(--mt-trait) !important; box-shadow: none !important; }
html[data-style="mat"] .eti-plein { border-color: var(--mt-trait) !important; }
html[data-style="mat"] .eti-btn.is-second { border-color: var(--mt-trait) !important; }

/* ── Papier : angles droits, titres à empattements ── */
html[data-papier] .eti-compact, html[data-papier] .eti-plein { border-radius: 4px !important; }
html[data-papier] :is(.eti-ic, .eti-btn) { border-radius: 4px !important; }
html[data-papier] .eti .eti-t { font-family: var(--pp-serif); font-weight: 700; }

/* ── Animations réduites ── */
html[data-motion="reduites"] .eti-btn { transition: none; }
@media (prefers-reduced-motion: reduce) { .eti-btn { transition: none; } }