/* ══ ÉTAPES D'ATTENTE (2026-10-11, temps d'attente ressenti) ═══════════════════════════════════════════════════════════════════
   Shared/EtapesAttente.razor (préfixe ea-) : une attente longue dite d'UNE seule façon : des étapes nommées, faites (coche),
   en cours (anneau qui tourne, libellé en gras), à venir (cercle vide), et le détail de l'étape en cours sous la rangée.
   Pas de chatoiement ni de barre qui avance seule : ce qui bouge, c'est l'anneau de l'étape en cours, une animation de
   transformation que le compositeur fait tourner même quand le calcul tient le fil (la page ne paraît pas morte).
   • .ea-chargeur  sous le titre de l'écran de chargement (dépôt d'un FEC, démonstration) ;
   • .ea-centre    centré, dans le panneau de restauration d'une sauvegarde ;
   • .ea-ligne     au pied d'une fenêtre (présentations PowerPoint).
   Moderne (défaut), Mat et Papier (fin de fichier), clair et sombre (jetons), Compact, téléphone (≤ 640 px), animations réduites.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

.ea {
    --ea-accent: var(--mud-palette-tertiary, var(--brand, #00B1CF));
    display: flex; flex-direction: column; gap: 5px; min-width: 0;
    font-family: var(--font-family); color: var(--sl1, #9fb0bb);
}
.ea-rangee {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0;
    margin: 0; padding: 0; list-style: none; font-size: 12.5px; line-height: 1.3;
}
.ea-etape { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--sl1, #9fb0bb); font-weight: 500; }
/*  Le filet entre deux étapes : la rangée se lit comme un chemin. */
.ea-etape + .ea-etape::before {
    content: ""; display: inline-block; width: 16px; height: 1px; margin: 0 8px 0 4px;
    background: var(--o16, rgba(255,255,255,.16));
}
.ea-marque {
    position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box;
    border: 1.5px solid var(--o22, rgba(255,255,255,.22));
}
.ea-fait .ea-marque { border-color: transparent; color: var(--ea-accent); background: color-mix(in srgb, var(--ea-accent) 18%, transparent); }
.ea-encours .ea-marque {
    border: 2px solid color-mix(in srgb, var(--ea-accent) 22%, transparent); border-top-color: var(--ea-accent);
    animation: ea-tourne .9s linear infinite;
}
.ea-encours .ea-lib { color: var(--tx1, #e8eef2); font-weight: 700; }
.ea-fait .ea-lib { color: var(--tx2, #c2cdd6); }
@keyframes ea-tourne { to { transform: rotate(360deg); } }

.ea .ea-detail {
    margin: 0; min-height: 1.35em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 12px; line-height: 1.35; color: var(--sl1, #9fb0bb); font-variant-numeric: tabular-nums;
}
/*  Annonce des lecteurs d'écran (l'étape en cours), hors de la vue. */
.ea-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Variantes d'emplacement ── */
.ea-chargeur { margin-top: 4px; }
.ea-centre { align-items: center; text-align: center; }
.ea-centre .ea-rangee { justify-content: center; }
.ea-ligne .ea-rangee { font-size: 12px; }

/* ── Thème clair ── */
html[data-theme="light"] .ea-marque { border-color: rgba(15, 38, 56, .28); }
html[data-theme="light"] .ea-fait .ea-marque { border-color: transparent; }
html[data-theme="light"] .ea-encours .ea-marque { border-color: color-mix(in srgb, var(--ea-accent) 25%, transparent); border-top-color: var(--ea-accent); }
html[data-theme="light"] .ea-etape + .ea-etape::before { background: rgba(15, 38, 56, .18); }

/* ── Densité Compact ── */
html[data-density="compact"] .ea-rangee { font-size: 12px; }
html[data-density="compact"] .ea .ea-detail { font-size: 11.5px; }
html[data-density="compact"] .ea-etape + .ea-etape::before { width: 10px; margin: 0 6px 0 3px; }

/* ── Téléphone : la rangée tient sur une ligne ; les étapes faites et à venir gardent leur marque, l'étape en cours son nom ── */
@media (max-width: 640px) {
    .ea-fait .ea-lib, .ea-avenir .ea-lib { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .ea-etape + .ea-etape::before { width: 8px; margin: 0 5px 0 2px; }
}

/* ── Mat : filets du style ── */
html[data-style="mat"] .ea-marque { border-color: var(--mt-trait); }
html[data-style="mat"] .ea-fait .ea-marque { border-color: transparent; }
html[data-style="mat"] .ea-encours .ea-marque { border-color: color-mix(in srgb, var(--ea-accent) 22%, transparent); border-top-color: var(--ea-accent); }
html[data-style="mat"] .ea-etape + .ea-etape::before { background: var(--mt-trait); }

/* ── Papier : marques carrées, comme ses angles droits ── */
html[data-papier] .ea-fait .ea-marque, html[data-papier] .ea-avenir .ea-marque { border-radius: 3px; }

/* ── Animations réduites : l'anneau ne tourne plus ; plein, il marque l'étape en cours (son libellé est en gras) ── */
html[data-motion="reduites"] .ea-encours .ea-marque { animation: none !important; border-color: var(--ea-accent); background: color-mix(in srgb, var(--ea-accent) 30%, transparent); }
@media (prefers-reduced-motion: reduce) {
    .ea-encours .ea-marque { animation: none; border-color: var(--ea-accent); background: color-mix(in srgb, var(--ea-accent) 30%, transparent); }
}

/* ── Liste (16/10, ouverture d'un groupe : six étapes et les sociétés) ── les étapes l'une sous l'autre, le bloc centré et le
   texte aligné à gauche ; les sous-étapes (sociétés) sous leur étape, en retrait. Remplace la rangée qui courait sur toute la
   largeur de l'écran. */
.ea-liste .ea-rangee { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 11px; font-size: 14px; text-align: left; }
.ea-centre.ea-liste .ea-rangee { justify-content: flex-start; }
.ea-liste .ea-etape { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 11px; align-items: center; }
.ea-liste .ea-etape + .ea-etape::before { display: none; }
.ea-liste .ea-marque { width: 16px; height: 16px; }
.ea-liste .ea-sous {
    grid-column: 2; list-style: none; margin: 8px 0 2px; padding: 0 0 0 12px; display: flex; flex-direction: column; gap: 7px;
    font-size: 13px; border-left: 1px solid var(--o16, rgba(255,255,255,.16));
}
.ea-liste .ea-sous .ea-etape { grid-template-columns: 13px minmax(0, 1fr); column-gap: 9px; }
.ea-liste .ea-sous .ea-marque { width: 13px; height: 13px; }
.ea-liste .ea-sous .ea-encours .ea-lib { font-weight: 600; }
html[data-theme="light"] .ea-liste .ea-sous { border-left-color: rgba(15, 38, 56, .18); }
html[data-style="mat"] .ea-liste .ea-sous { border-left-color: var(--mt-trait); }
/*  Téléphone : la liste garde tous ses libellés (la règle de la rangée les masque). */
@media (max-width: 640px) {
    .ea-liste .ea-fait .ea-lib, .ea-liste .ea-avenir .ea-lib { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
    .ea-liste .ea-rangee { font-size: 13.5px; }
}
/*  L'hôte de l'ouverture d'un groupe : la liste tient dans une colonne lisible, la barre en dessous à la même largeur. */
.fec-reload.is-groupe .ea-liste { width: min(440px, 100%); margin: 6px auto 4px; }
.fec-reload.is-groupe .ea-liste .ea-rangee { width: 100%; }
.fec-reload.is-groupe .fec-reload-bar { width: min(440px, 100%); max-width: none; }
/*  Les sous-étapes vivent DANS l'étape en cours : ses règles (anneau qui tourne, gras) ne doivent pas descendre sur elles. */
.ea-liste .ea-sous .ea-fait .ea-marque, .ea-liste .ea-sous .ea-avenir .ea-marque { animation: none; transform: none; }
.ea-liste .ea-sous .ea-fait .ea-marque { border: 0; color: var(--ea-accent); background: color-mix(in srgb, var(--ea-accent) 18%, transparent); }
.ea-liste .ea-sous .ea-avenir .ea-marque { border: 1.5px solid var(--o22, rgba(255,255,255,.22)); background: none; }
html[data-theme="light"] .ea-liste .ea-sous .ea-avenir .ea-marque { border-color: rgba(15, 38, 56, .28); }
.ea-liste .ea-sous .ea-fait .ea-lib { color: var(--tx2, #c2cdd6); font-weight: 500; }
.ea-liste .ea-sous .ea-avenir .ea-lib { color: var(--sl1, #9fb0bb); font-weight: 500; }