/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   FEC NON CHARGÉ : LA FENÊTRE (Shared/FecErreurModal.razor) — préfixe `fecerr-`, 2026-09-18.
   Elle remplace le bandeau d'erreur que personne ne voyait : rendu APRÈS `.fec-loader` (position fixed,
   fond opaque, plein écran), il peignait dessous. La fenêtre vit, comme celle de l'anonymiseur, sous
   `.fec-content` : son empilement se règle dans entry.css (`.fec-loader:has(.fecerr-back)`), sans quoi
   elle passerait sous le hub et sous les boutons flottants.
   Jetons repris de tokens.css ; les deux encres d'état sont redéclarées ici dans les DEUX thèmes (même
   raison que dans anonymiser.css : les `--color-*` sémantiques n'existent qu'en sombre).
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */
.fecerr-back {
    --fecerr-warn: #F0C26B;
    --fecerr-warn-bg: color-mix(in srgb, #E9B872 14%, transparent);
    --fecerr-warn-bd: color-mix(in srgb, #E9B872 40%, transparent);
    --fecerr-ok: #5DCAA5;
    position: fixed; inset: 0; z-index: 5200; display: flex; align-items: center; justify-content: center;
    padding: 24px 16px; background: rgba(4, 12, 18, .66); animation: fecerr-in .16s ease-out;
    /*  Le hub masque l'accueil en thème clair (`visibility: hidden` sur `.fec-content`) : la fenêtre, qui y
        vit, doit se rendre visible elle-même quand on l'ouvre depuis le bandeau du hub (« Voir pourquoi »). */
    visibility: visible;
}
html[data-theme="light"] .fecerr-back {
    --fecerr-warn: #7a4e00;
    --fecerr-warn-bg: color-mix(in srgb, #E9B872 26%, transparent);
    --fecerr-warn-bd: color-mix(in srgb, #C98A1E 45%, transparent);
    --fecerr-ok: #0b6b4f;
    background: rgba(28, 42, 52, .46);
}
@keyframes fecerr-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fecerr-back { animation: none; } }

/*  Les pastilles flottantes (copilote, piles de boutons) passent au-dessus de 5200 ou tomberaient sur le
    texte de la fenêtre : on les retire le temps qu'elle est ouverte, comme pour l'Analyste IA. */
body:has(.fecerr-back) .cop-fab,
body:has(.fecerr-back) .fab-stack-r,
body:has(.fecerr-back) .fab-stack-l { display: none; }

.fecerr-box {
    display: flex; flex-direction: column; width: min(640px, 100%); max-height: 100%; min-height: 0;
    border-radius: 16px; border: 1px solid var(--o12); background: var(--surf-1, #06141d);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .46); overflow: hidden; outline: none; color: var(--tx2, #c8d3da);
    font-family: var(--font-family);
}

.fecerr-hd { flex: 0 0 auto; display: flex; align-items: flex-start; gap: 12px; padding: 16px 16px 12px; border-bottom: 1px solid var(--o12); }
.fecerr-ic {
    flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
    color: var(--fecerr-warn); background: var(--fecerr-warn-bg); border: 1px solid var(--fecerr-warn-bd);
}
.fecerr-hd-x { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.fecerr-t { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 700; color: var(--tx1); }
.fecerr-f { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--color-text-muted); overflow-wrap: anywhere; }
.fecerr-x {
    flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center;
    border: 1px solid var(--o12); border-radius: 8px; background: var(--o4); color: var(--color-text-secondary); cursor: pointer;
}
.fecerr-x:hover { color: var(--tx1); border-color: var(--brand-strong); }

/*  Le corps défile, l'en-tête et le pied restent : sur téléphone, la croix et la phrase de confiance
    ne doivent pas partir avec le défilement. */
.fecerr-bd { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.fecerr-partiel { margin: 0; font-size: 13px; font-weight: 600; color: var(--tx1); }
.fecerr-expl { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--tx2, #c8d3da); }

.fecerr-liste { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.fecerr-liste li { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; font-size: 12px; padding: 6px 9px; border-radius: 8px; background: var(--o4); }
.fecerr-liste-n { color: var(--tx1); font-weight: 600; overflow-wrap: anywhere; }
.fecerr-liste-m { color: var(--color-text-muted); }

.fecerr-quoi { padding: 10px 12px; border-radius: 10px; background: var(--o4); border: 1px solid var(--o8, var(--o12)); }
.fecerr-quoi-t { font-size: 12px; font-weight: 700; color: var(--tx1); margin-bottom: 4px; }
.fecerr-quoi ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.fecerr-quoi li { font-size: 12.5px; line-height: 1.5; }

.fecerr-actions, .fecerr-nous-a { display: flex; flex-wrap: wrap; gap: 8px; }
.fecerr-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 8px 15px;
    border-radius: 10px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.fecerr-btn-1 { border: 1px solid transparent; background: var(--brand); color: var(--brand-contrast, #06141a); }
.fecerr-btn-1:hover { filter: brightness(1.07); }
.fecerr-btn-2 { border: 1px solid var(--o12); background: var(--o4); color: var(--tx1); }
.fecerr-btn-2:hover { border-color: var(--brand-strong); }
.fecerr-btn:focus-visible, .fecerr-x:focus-visible, .fecerr-lien:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.fecerr-nous { display: flex; flex-direction: column; gap: 9px; padding-top: 12px; border-top: 1px solid var(--o12); }
.fecerr-nous-t { margin: 0; font-size: 14px; font-weight: 700; color: var(--tx1); }
.fecerr-nous-p, .fecerr-aide, .fecerr-adresse { margin: 0; font-size: 12.5px; line-height: 1.55; }
.fecerr-aide { font-size: 11.5px; color: var(--color-text-muted); }
.fecerr-lien {
    padding: 0; border: 0; background: none; font: inherit; font-size: 12.5px; color: var(--brand-strong, var(--brand));
    text-decoration: underline; text-underline-offset: 2px; cursor: pointer; text-align: left;
}
.fecerr-ok { margin-left: 6px; font-size: 12px; font-weight: 600; color: var(--fecerr-ok); }

.fecerr-diag { display: flex; flex-direction: column; gap: 5px; }
.fecerr-diag-t { font-size: 12px; font-weight: 700; color: var(--tx1); }
.fecerr-diag-t small { font-weight: 500; color: var(--color-text-muted); }
.fecerr-diag-pre {
    margin: 0; max-height: 200px; overflow: auto; padding: 10px 11px; border-radius: 9px; border: 1px solid var(--o12);
    background: var(--o4); font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: 11px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--tx2, #c8d3da);
}

.fecerr-ft {
    flex: 0 0 auto; display: flex; align-items: center; gap: 7px; padding: 10px 16px; border-top: 1px solid var(--o12);
    font-size: 12px; color: var(--color-text-muted);
}
.fecerr-ft .iku-ico { flex: 0 0 auto; color: var(--fecerr-ok); }

/*  Téléphone : carte à petites marges, qui prend la hauteur disponible (jamais en vh : la barre du
    navigateur la couperait) ; les boutons passent pleine largeur pour rester faciles à toucher. */
@media (max-width: 640px) {
    .fecerr-back { padding: 10px; }
    .fecerr-box { width: 100%; max-height: 100%; border-radius: 14px; }
    .fecerr-hd { padding: 14px 12px 10px; }
    .fecerr-bd { padding: 12px; }
    .fecerr-actions .fecerr-btn, .fecerr-nous-a .fecerr-btn { flex: 1 1 100%; }
    .fecerr-t { font-size: 16px; }
    .fecerr-ft { padding: 9px 12px; }
}

/* ── LE BANDEAU DU HUB : « 1 fichier sur 3 n'a pas été pris en compte » ─────────────────────────────
   Il reprend `.resume-banner.warn` (style du composant FecLoader) ; seul le nom de fichier, long, doit
   pouvoir se couper. */
.fecerr-bandeau .resume-banner-txt { overflow-wrap: anywhere; }