/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Navigation de section dans l'entête (Projets · Fournisseurs · Rapports).
   CSS isolé (scoped) — ne touche pas app.css. Couleurs via tokens d'app.css. */
.section-nav[b-zk8jw23tzd] {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: center;
}

.section-link[b-zk8jw23tzd] {
    padding: 7px 14px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    transition: background-color var(--transition), color var(--transition);
}

.section-link:hover[b-zk8jw23tzd] {
    color: var(--text-primary);
    background: var(--bg-glass);
}

.section-link.is-active[b-zk8jw23tzd] {
    color: var(--accent);
    background: var(--accent-soft);
}

@media (max-width: 640px) {
    .section-link[b-zk8jw23tzd] { padding: 6px 10px; font-size: 13px; }
}
/* /Components/Layout/PersonnificationSelecteur.razor.rz.scp.css */
/* Sélecteur « voir en tant que » de la barre d'app (patron visuel repris de Chronos). */
.personnification[b-hxuhq5u28w] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.personnification-select[b-hxuhq5u28w] {
    height: 32px;
    width: auto;
    max-width: 180px;
    padding: 4px 28px 4px 8px; /* la place du chevron du <select>, comme dans Chronos */
    font-size: 12.5px;
}

/* Personnification EN COURS : le sélecteur passe à l'accent — « ceci n'est pas ma vue »
   doit se voir d'un coup d'œil, pas se déduire. */
.personnification.est-active .personnification-select[b-hxuhq5u28w] {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}

.personnification-badge[b-hxuhq5u28w] {
    display: inline-block;
    font-weight: 700;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: var(--radius-full);
    white-space: nowrap;
    color: var(--accent);
    background: var(--accent-soft);
}
/* /Components/Pages/CompteDoubleAuthentification.razor.rz.scp.css */
/* Le code QR : un carré blanc à marge calme, même en thème sombre — un lecteur lit mal un code
   inversé. Taille bornée : lisible par un téléphone tenu à 30 cm, sans dévorer la page. */
.qr-double-auth[b-66grhs1ejx] {
    width: min(240px, 100%);
    margin: 12px 0 16px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.qr-double-auth[b-66grhs1ejx]  svg {
    display: block;
    width: 100%;
    height: auto;
}

.cle-manuelle[b-66grhs1ejx] {
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    word-break: break-word;
}

/* Deux colonnes de codes : ils se recopient ou s'impriment d'un coup d'œil. */
.codes-secours[b-66grhs1ejx] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 24px;
    margin: 12px 0;
    padding-left: 1.4em;
    font-size: 1.05rem;
}
/* /Components/Pages/ForgeApprobation.razor.rz.scp.css */
/* ── Deux colonnes : les demandes prêtes | le panneau de version ──────────────── */
.appro[b-2uc7le212m] {
    display: grid;
    grid-template-columns: 1fr 348px;
    gap: 24px;
    align-items: start;
}
@media (max-width: 940px) {
    .appro[b-2uc7le212m] { grid-template-columns: 1fr; }
}

.appro-lab[b-2uc7le212m] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 12px;
}
.appro-compte[b-2uc7le212m] {
    margin-left: auto;
    letter-spacing: 0;
    text-transform: none;
    font-size: 12px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* ── Une carte par demande : on choisit un CHANGEMENT, pas une ligne de tableau ── */
.cand[b-2uc7le212m] { display: flex; flex-direction: column; gap: 12px; }

.pr[b-2uc7le212m] {
    position: relative;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.pr:hover[b-2uc7le212m] { border-color: var(--text-muted); }
.pr.est-choisie[b-2uc7le212m] {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.pr.est-bloquee[b-2uc7le212m] { opacity: .55; }

/* Toute la carte est la cible du clic — pas une case à cocher de 16 px. */
.pr-clic[b-2uc7le212m] {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 15px;
    width: 100%;
    padding: 17px 19px;
    background: none;
    border: 0;
    border-radius: var(--radius-md);
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.pr-clic:disabled[b-2uc7le212m] { cursor: not-allowed; }
.pr-clic:focus-visible[b-2uc7le212m] {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.pr-case[b-2uc7le212m] {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    border: 1.5px solid var(--border);
    border-radius: 6px;
    background: var(--bg-secondary);
    display: grid;
    place-items: center;
    color: #fff;
    transition: background var(--transition), border-color var(--transition);
}
.pr-case svg[b-2uc7le212m] { opacity: 0; transition: opacity var(--transition); }
.pr.est-choisie .pr-case[b-2uc7le212m] { background: var(--accent); border-color: var(--accent); }
.pr.est-choisie .pr-case svg[b-2uc7le212m] { opacity: 1; }

.pr-corps[b-2uc7le212m] { display: block; min-width: 0; }
.pr-titre[b-2uc7le212m] { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.4; }

.pr-marques[b-2uc7le212m] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 9px;
}

/* Deux identifiants, deux poids : la DEMANDE est ce dont l'humain parle et ce que le rail
   affiche ; la PR est de la mécanique interne. Les rendre identiques les rend confusants. */
.pr-ref-demande[b-2uc7le212m] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.pr-ref-pr[b-2uc7le212m] {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* Un feu vert se lit à la couleur, pas au libellé. */
.chk[b-2uc7le212m] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-muted);
}
.chk[b-2uc7le212m]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}
.chk.est-ok[b-2uc7le212m] { color: var(--status-success); }
.chk.est-attente[b-2uc7le212m] { color: var(--text-muted); }

.pr-detail[b-2uc7le212m] {
    display: block;
    font-size: 12.5px;
    color: var(--text-muted);
    margin-top: 8px;
}

/* ── La preuve, sous la carte ──────────────────────────────────────────────────
   Hors du bouton de sélection : cliquer « Essayer » ne doit pas cocher la demande. */
.pr-preuve[b-2uc7le212m] {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    margin: 0 19px 17px 54px;
    padding-top: 15px;
    border-top: 1px solid var(--border-subtle);
}

.pr-vignette[b-2uc7le212m] {
    width: 168px;
    max-width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    display: block;
    background: var(--bg-secondary);
}

.pr-preuve-actions[b-2uc7le212m] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* Le geste que l'écran veut encourager : essayer avant d'approuver. */
.pr-essayer[b-2uc7le212m] {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    padding: 7px 14px;
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    transition: background var(--transition);
}
.pr-essayer:hover[b-2uc7le212m] { background: var(--accent-soft); }
.pr-essayer:focus-visible[b-2uc7le212m] { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }

.pr-lien-sec[b-2uc7le212m] { font-size: 12.5px; color: var(--text-muted); text-decoration: none; }
.pr-lien-sec:hover[b-2uc7le212m] { color: var(--text-primary); }

@media (max-width: 620px) {
    .pr-preuve[b-2uc7le212m] { margin-left: 19px; }
}

.pr-lien[b-2uc7le212m] {
    position: absolute;
    top: 15px;
    right: 18px;
    font-size: 12.5px;
    color: var(--text-secondary);
    text-decoration: none;
}
.pr-lien:hover[b-2uc7le212m] { color: var(--accent); }

/* ── Panneau de version ───────────────────────────────────────────────────────── */
.appro-cote[b-2uc7le212m] { position: sticky; top: 18px; }

.appro-proprio[b-2uc7le212m] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    margin-bottom: 18px;
    border-radius: var(--radius-md);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 12.5px;
    font-weight: 600;
}

.appro-somme[b-2uc7le212m] { list-style: none; margin: 0 0 18px; padding: 0; }
.appro-somme li[b-2uc7le212m] {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 13px;
}
.appro-somme li span[b-2uc7le212m] { color: var(--text-muted); }
.appro-somme li b[b-2uc7le212m] { font-weight: 600; font-variant-numeric: tabular-nums; }

/* « brouillon — relis et ajuste » : dire que le texte vient d'ailleurs, sans le crier. */
.appro-etat[b-2uc7le212m] {
    margin-left: 8px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: 999px;
    padding: 2px 8px;
}
/* /Components/Pages/ForgeDemande.razor.rz.scp.css */
/* ── Onglets (Nouvelle demande / Historique) ──────────────────────────────────── */
.onglets[b-581wgoro3w] {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 18px;
}
.onglet[b-581wgoro3w] {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 9px 14px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
}
.onglet:hover[b-581wgoro3w] { color: var(--text-primary); }
.onglet.is-active[b-581wgoro3w] { color: var(--accent); border-bottom-color: var(--accent); }

/* Le formulaire et son écran de confirmation : Components/Shared/ForgeFormulaire.razor.css. */
/* /Components/Pages/ForgeDossier.razor.rz.scp.css */
/* ── Fiche d'en-tête : faits clés de la demande sur une ligne ─────────────────── */
.fiche[b-iclwec3v8j] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    align-items: center;
}
.fiche-item[b-iclwec3v8j] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
}
.fiche-item > span:first-child[b-iclwec3v8j] { color: var(--text-muted); font-size: 12.5px; }

/* ── Deux colonnes : chronologie | verdicts (empilées en étroit) ──────────────── */
.deux-colonnes[b-iclwec3v8j] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    align-items: start;
}
@media (max-width: 980px) {
    .deux-colonnes[b-iclwec3v8j] { grid-template-columns: 1fr; }
}

/* ── Chronologie ──────────────────────────────────────────────────────────────────
   L'écran qui PROUVE que le système fonctionne — donc celui qui mérite le plus de
   soin. Chaque intervenant a une identité visible : on voit d'un coup ce qu'une
   machine a fait et ce qu'un humain a décidé. ─────────────────────────────────── */
.chrono[b-iclwec3v8j] {
    list-style: none;
    margin: 0;
    padding: 0;
}
.chrono-item[b-iclwec3v8j] {
    display: flex;
    gap: 16px;
    position: relative;
    padding-bottom: 20px;
}
.chrono-item:not(:last-child)[b-iclwec3v8j]::before {
    content: "";
    position: absolute;
    left: 13.5px;
    top: 32px;
    bottom: 0;
    width: 1px;
    background: var(--border);
}
.chrono-point[b-iclwec3v8j] {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 600;
    background: var(--machine-soft);
    color: var(--text-muted);
    border: 1px solid transparent;
    z-index: 1;
}
/* Le vert ne marque que ce qui est acquis ou décidé par un humain — jamais le travail
   courant d'un agent. Même convention que le rail de /forge/suivi. */
.chrono-item.est-ok .chrono-point[b-iclwec3v8j] {
    color: var(--accent);
    background: var(--accent-soft);
}
.chrono-item.est-echec .chrono-point[b-iclwec3v8j] {
    color: var(--status-danger);
    background: rgba(239, 68, 68, 0.12);
}
.chrono-item.est-attention .chrono-point[b-iclwec3v8j] {
    color: var(--status-warning);
    background: rgba(245, 158, 11, 0.14);
}
.chrono-meta[b-iclwec3v8j] {
    display: flex;
    gap: 10px;
    align-items: baseline;
    flex-wrap: wrap;
    font-size: 12.5px;
}
.chrono-meta > span[b-iclwec3v8j] { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.chrono-meta > span:first-child[b-iclwec3v8j] { color: var(--text-primary); font-size: 13.5px; font-weight: 600; }
.chrono-texte[b-iclwec3v8j] { font-size: 13.5px; color: var(--text-secondary); margin-top: 3px; max-width: 76ch; }

/* ── Galerie avant/après : la preuve visuelle du verdict ─────────────────────── */
.galerie[b-iclwec3v8j] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 12px 0;
}
.galerie figure[b-iclwec3v8j] { margin: 0; }
.galerie img[b-iclwec3v8j] {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    display: block;
}
.galerie figcaption[b-iclwec3v8j] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: center;
    margin-top: 6px;
}

/* ── Verdicts du testeur : une carte par itération, la plus récente en haut ───── */
.verdict[b-iclwec3v8j] {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0;
    margin-bottom: 12px;
    overflow: hidden;
}
.verdict.est-ok[b-iclwec3v8j] { border-color: var(--accent); }
.verdict.est-echec[b-iclwec3v8j] { border-color: rgba(245, 158, 11, 0.5); }

.verdict-tete[b-iclwec3v8j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 11px 14px;
    background: var(--bg-glass);
    border-bottom: 1px solid var(--border-subtle);
    font-size: 13px;
    font-weight: 600;
}
.verdict.est-ok .verdict-tete[b-iclwec3v8j] { background: var(--accent-soft); color: var(--accent); }

.verdict-date[b-iclwec3v8j] {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.verdict-resume[b-iclwec3v8j] { margin: 0; padding: 12px 14px 4px; font-size: 13.5px; color: var(--text-secondary); }

.verdict-tests[b-iclwec3v8j] {
    list-style: none;
    margin: 0;
    padding: 8px 14px 12px;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.verdict-tests li[b-iclwec3v8j] {
    display: grid;
    grid-template-columns: 15px 1fr;
    gap: 9px;
    align-items: start;
    color: var(--text-secondary);
}
.test-marque[b-iclwec3v8j] { flex: none; font-weight: 700; line-height: 1.5; }
.test-ok .test-marque[b-iclwec3v8j] { color: var(--status-success); }
.test-echec .test-marque[b-iclwec3v8j] { color: var(--status-danger); }
.verdict-tests em[b-iclwec3v8j] { color: var(--text-muted); font-style: normal; }
/* /Components/Pages/ForgeSuivi.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════════
   LE RAIL — chaque demande occupe l'étape où elle se trouve.

   Règle de couleur qui porte tout l'écran : --accent ne sert QU'À signaler qu'un
   humain est requis ; --machine (gris neutre) porte tout ce que les agents font
   seuls. Ne pas introduire d'accent ailleurs ici, ça détruirait la convention.
   ═══════════════════════════════════════════════════════════════════════════════ */

.rail-cadre[b-2ctg0sy5i7] {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

/* ── En-tête : un seul chiffre mis en avant, celui qui demande une action ─────── */
.rail-tete[b-2ctg0sy5i7] {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-subtle);
}
.rail-titre[b-2ctg0sy5i7] { font-size: 15px; font-weight: 600; margin: 0; }
.rail-sous[b-2ctg0sy5i7] {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}

.rail-action[b-2ctg0sy5i7] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    padding: 8px 14px;
    border-radius: var(--radius-full, 999px);
    background: var(--accent-soft);
    color: var(--accent);
    transition: background var(--transition);
}
.rail-action:hover[b-2ctg0sy5i7] { background: var(--accent-glow); }
.rail-action-n[b-2ctg0sy5i7] { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.rail-action-t[b-2ctg0sy5i7] { font-size: 13px; font-weight: 600; }

/* ── Les colonnes ─────────────────────────────────────────────────────────────── */
.rail-defile[b-2ctg0sy5i7] { overflow-x: auto; }

.rail-bande[b-2ctg0sy5i7],
.rail[b-2ctg0sy5i7] {
    display: grid;
    grid-template-columns: repeat(7, minmax(178px, 1fr));
    min-width: 1180px;
}

/* La bande qui dit QUI travaille — c'est l'information principale du rail. */
.rail-bande[b-2ctg0sy5i7] { padding: 14px 0 2px; }
.bande-seg[b-2ctg0sy5i7] {
    margin: 0 6px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bande-machine[b-2ctg0sy5i7] { grid-column: 2 / 5; background: var(--machine-soft); color: var(--text-muted); }
.bande-humain[b-2ctg0sy5i7]  { grid-column: 5 / 7; background: var(--accent-soft);  color: var(--accent); }

.col[b-2ctg0sy5i7] { padding: 14px 6px 20px; min-width: 0; }
.col + .col[b-2ctg0sy5i7] { border-left: 1px solid var(--border-subtle); }

.col-tete[b-2ctg0sy5i7] { display: flex; align-items: center; gap: 7px; padding: 0 8px 12px; }
.col-nom[b-2ctg0sy5i7] { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.col.est-humain .col-nom[b-2ctg0sy5i7] { color: var(--accent); }
.col-compte[b-2ctg0sy5i7] {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    border-radius: 999px;
    padding: 1px 8px;
}
.col.est-humain .col-compte[b-2ctg0sy5i7] { background: var(--accent-soft); color: var(--accent); }

.pastille[b-2ctg0sy5i7] { width: 6px; height: 6px; border-radius: 50%; flex: none; display: inline-block; }
.pastille.est-machine[b-2ctg0sy5i7] { background: var(--machine); }
.pastille.est-humain[b-2ctg0sy5i7]  { background: var(--accent); }
.pastille.est-livree[b-2ctg0sy5i7]  { background: var(--status-success); }
.pastille.est-attente[b-2ctg0sy5i7] { background: transparent; border: 1px solid var(--text-muted); }

/* Le pouls ne bat que là où quelque chose tourne VRAIMENT (colonne non vide). */
@media (prefers-reduced-motion: no-preference) {
    .col.est-actif .pastille.est-machine[b-2ctg0sy5i7] { animation: forge-pouls-b-2ctg0sy5i7 2s ease-in-out infinite; }
}
@keyframes forge-pouls-b-2ctg0sy5i7 {
    0%, 100% { opacity: 1; }
    50%      { opacity: .35; }
}

.col-pile[b-2ctg0sy5i7] { display: flex; flex-direction: column; gap: 8px; padding: 0 6px; }
.col-vide[b-2ctg0sy5i7] {
    padding: 14px 10px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    font-size: 11.5px;
    color: var(--text-muted);
    text-align: center;
}

/* ── La carte demande ─────────────────────────────────────────────────────────── */
.dm[b-2ctg0sy5i7] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.dm:hover[b-2ctg0sy5i7] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    border-color: var(--text-muted);
}
.dm:focus-visible[b-2ctg0sy5i7] { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); border-color: var(--accent); }
.dm.est-humain[b-2ctg0sy5i7] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.dm-haut[b-2ctg0sy5i7] { display: flex; align-items: center; gap: 8px; }
.dm-ref[b-2ctg0sy5i7] {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.dm-age[b-2ctg0sy5i7] {
    margin-left: auto;
    font-size: 10.5px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.dm-titre[b-2ctg0sy5i7] { font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--text-primary); }
.dm-bas[b-2ctg0sy5i7] { display: flex; align-items: center; gap: 8px; }
.dm-qui[b-2ctg0sy5i7] {
    font-size: 11px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* La boucle de corrections : un fait du système, pas un entier dans une cellule. */
.dm-boucle[b-2ctg0sy5i7] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    background: var(--machine-soft);
    border-radius: 999px;
    padding: 2px 8px 2px 6px;
    flex: none;
}

/* ── Légende ──────────────────────────────────────────────────────────────────── */
.rail-pied[b-2ctg0sy5i7] {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 13px 20px;
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-glass);
    font-size: 12px;
    color: var(--text-muted);
}
.legende[b-2ctg0sy5i7] { display: inline-flex; align-items: center; gap: 7px; }

/* ── Promotion depuis le rail ──────────────────────────────────────────────────
   Le bouton vit SOUS la carte, hors du lien : cliquer « Promouvoir » ne doit pas
   ouvrir le dossier. */
.dm-promouvoir[b-2ctg0sy5i7] {
    width: 100%;
    margin-top: -2px;
    padding: 7px 10px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition);
}
.dm-promouvoir:hover[b-2ctg0sy5i7] { background: var(--accent-glow); }
.dm-promouvoir:focus-visible[b-2ctg0sy5i7] { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }

.promo[b-2ctg0sy5i7] { margin-top: 16px; border-color: var(--accent); }
.promo-tete[b-2ctg0sy5i7] { display: flex; align-items: flex-start; gap: 12px; }
.promo-titre[b-2ctg0sy5i7] { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.012em; }
.promo-fermer[b-2ctg0sy5i7] {
    margin-left: auto;
    background: none;
    border: 0;
    font-size: 22px;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 4px;
}
.promo-fermer:hover[b-2ctg0sy5i7] { color: var(--text-primary); }
.promo-quoi[b-2ctg0sy5i7] { margin: 6px 0 18px; font-size: 14px; color: var(--text-secondary); max-width: 74ch; }
/* /Components/Pages/ForgeVersions.razor.rz.scp.css */
.versions[b-872ltj9fy2] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.version-tete[b-872ltj9fy2] {
    display: flex;
    align-items: center;
    gap: 13px;
    flex-wrap: wrap;
}

/* La version la plus récente porte l'accent plein ; les précédentes s'effacent.
   Une liste où tout a le même poids ne dit pas où on en est. */
.version-tag[b-872ltj9fy2] {
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    border-radius: 999px;
    padding: 4px 12px;
}
.versions > li:first-child .version-tag[b-872ltj9fy2] {
    color: #fff;
    background: var(--accent);
}

.version-nom[b-872ltj9fy2] {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.012em;
}

.version-date[b-872ltj9fy2] {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}

/* Le rédacteur n'est pas passé : à dire, pas à taire. */
.version-brute[b-872ltj9fy2] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--status-warning);
    background: rgba(245, 158, 11, 0.14);
    border-radius: 999px;
    padding: 3px 9px;
}

.version-notes[b-872ltj9fy2] {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.62;
    color: var(--text-secondary);
    max-width: 78ch;
    white-space: pre-line;
}

.version-demandes[b-872ltj9fy2] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--text-muted);
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-subtle);
}
.version-demandes .chip[b-872ltj9fy2] {
    font-variant-numeric: tabular-nums;
    background: var(--bg-tertiary);
    border-radius: 999px;
    padding: 4px 11px;
    color: var(--text-secondary);
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ── Tableau de bord de flotte ───────────────────────────────── */
.flotte[b-ydabd8zl20] { margin-top: 1.5rem; }

.flotte-tete[b-ydabd8zl20] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.flotte-titre-bloc[b-ydabd8zl20] { max-width: 60ch; }

.pastille-live[b-ydabd8zl20] {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--accent);
    margin-right: 0.4rem;
    box-shadow: 0 0 0 0 var(--accent);
    animation: pouls-b-ydabd8zl20 1.8s infinite;
}

@keyframes pouls-b-ydabd8zl20 {
    0%   { box-shadow: 0 0 0 0 var(--accent-soft); }
    70%  { box-shadow: 0 0 0 0.5rem transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

.flotte-kpi[b-ydabd8zl20] { display: flex; gap: 1.25rem; }

.kpi[b-ydabd8zl20] { text-align: right; line-height: 1.1; }
.kpi b[b-ydabd8zl20] { display: block; font-size: 1.5rem; }
.kpi span[b-ydabd8zl20] { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.7; }
.kpi-alerte b[b-ydabd8zl20] { color: #b91c1c; }

.flotte-liste[b-ydabd8zl20] {
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.chariot[b-ydabd8zl20] {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1.4fr;
    align-items: center;
    gap: 1rem;
    padding: 0.7rem 0.9rem;
    border-radius: 10px;
    border: 1px solid var(--accent-soft);
    border-left: 4px solid var(--accent);
    background: var(--surface);
}

.etat-entretien[b-ydabd8zl20] { border-left-color: #d97706; }
.etat-mobile[b-ydabd8zl20]    { border-left-color: #1d4ed8; }
.etat-alerte[b-ydabd8zl20]    { border-left-color: #b91c1c; }

.chariot-id b[b-ydabd8zl20] { display: block; }
.chariot-id span[b-ydabd8zl20] { font-size: 0.8rem; opacity: 0.7; }

.util-barre[b-ydabd8zl20] {
    height: 0.45rem;
    border-radius: 999px;
    background: var(--accent-soft);
    overflow: hidden;
    margin-bottom: 0.3rem;
}
.util-barre span[b-ydabd8zl20] { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.chariot-util small[b-ydabd8zl20] { font-size: 0.75rem; opacity: 0.8; }

.chariot-etat[b-ydabd8zl20] { text-align: right; }
.etat-badge[b-ydabd8zl20] {
    display: inline-block;
    font-size: 0.74rem;
    font-weight: 700;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    color: var(--accent);
    background: var(--accent-soft);
}
.chariot-etat small[b-ydabd8zl20] { display: block; font-size: 0.74rem; opacity: 0.75; margin-top: 0.2rem; }

.etat-entretien .etat-badge[b-ydabd8zl20] { color: #b45309; background: #fef3c7; }
.etat-mobile    .etat-badge[b-ydabd8zl20] { color: #1d4ed8; background: #dbeafe; }
.etat-alerte    .etat-badge[b-ydabd8zl20] { color: #b91c1c; background: #fee2e2; }

.flotte-note[b-ydabd8zl20] { margin: 1rem 0 0; font-size: 0.78rem; opacity: 0.65; }

@media (max-width: 640px) {
    .chariot[b-ydabd8zl20] { grid-template-columns: 1fr; gap: 0.5rem; }
    .chariot-etat[b-ydabd8zl20] { text-align: left; }
    .flotte-kpi[b-ydabd8zl20] { width: 100%; justify-content: flex-start; }
    .kpi[b-ydabd8zl20] { text-align: left; }
}

/* ── Tuiles 3D / calculateur / site ──────────────────────────── */
.accueil-grille[b-ydabd8zl20] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.vitrine[b-ydabd8zl20] { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; }
.vitrine-entete[b-ydabd8zl20] { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }

.vitrine-tag[b-ydabd8zl20] {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--accent); background: var(--accent-soft); padding: 0.25rem 0.6rem; border-radius: 999px;
    display: inline-flex; align-items: center;
}

.vitrine-titre[b-ydabd8zl20] { margin: 0; font-size: 1.15rem; }
.vitrine-texte[b-ydabd8zl20] { margin: 0; line-height: 1.55; max-width: 60ch; }

.vitrine-cadre[b-ydabd8zl20] {
    width: 100%; height: 340px; border-radius: 12px; overflow: hidden;
    background: var(--surface); border: 1px solid var(--accent-soft);
}
.vitrine-cadre-haut[b-ydabd8zl20] { height: 480px; }
.vitrine-iframe[b-ydabd8zl20] { width: 100%; height: 100%; border: 0; display: block; }

.vitrine-site[b-ydabd8zl20] { margin-top: 1.25rem; max-width: 680px; }
/* /Components/Pages/Journal.razor.rz.scp.css */
/* Journal des changements — la mise en forme sert UNE idée : replié, l'écran doit se lire
   d'un balayage vertical ; c'est la synthèse qui porte, tout le reste s'efface. */

.jrn-outils[b-xj29p0s1j4] { display: flex; gap: 10px; align-items: center; }
.jrn-rech[b-xj29p0s1j4] { min-width: 220px; }

.jrn-compte[b-xj29p0s1j4] {
    font-size: 12.5px;
    color: var(--text-muted);
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.jrn-mois[b-xj29p0s1j4] { display: flex; flex-direction: column; gap: 10px; }

.jrn-mois-titre[b-xj29p0s1j4] {
    margin: 8px 0 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.jrn-liste[b-xj29p0s1j4] { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.jrn-entree[b-xj29p0s1j4] { padding: 0; transition: var(--transition); }
.jrn-entree:hover[b-xj29p0s1j4] { border-color: var(--text-muted); }

/* La synthèse EST la ligne cliquable : toute la largeur, pas juste le triangle. */
/* ⚠️ PAS de display:flex ici. La synthèse contient du `code` injecté : en flex, CHAQUE
   nœud devient un élément flex et le texte se disloque autour du chiffon de code. Le texte
   doit rester en flux INLINE — le chevron est donc positionné en absolu, pas empilé. */
.jrn-entree summary[b-xj29p0s1j4] {
    cursor: pointer;
    position: relative;
    padding: 14px 18px 14px 40px;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--text-primary);
    list-style: none;
}
.jrn-entree summary[b-xj29p0s1j4]::-webkit-details-marker { display: none; }

/* Chevron maison : tourne à l'ouverture. Le marqueur natif n'est pas stylable partout. */
.jrn-entree summary[b-xj29p0s1j4]::before {
    content: "\203A";
    position: absolute;
    left: 20px;
    top: 15px;
    font-size: 17px;
    line-height: 1;
    color: var(--text-muted);
    transition: transform 0.15s ease;
}
.jrn-entree details[open] summary[b-xj29p0s1j4]::before { transform: rotate(90deg); }

.jrn-entree summary:hover[b-xj29p0s1j4] { background: var(--bg-tertiary); }
.jrn-entree details[open] summary[b-xj29p0s1j4] { font-weight: 600; }

.jrn-meta[b-xj29p0s1j4] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 0 18px 0 40px;
    font-size: 12px;
    color: var(--text-muted);
}
.jrn-date[b-xj29p0s1j4] { font-variant-numeric: tabular-nums; }
.jrn-auteur[b-xj29p0s1j4]::before { content: "· "; }

/* La couleur des catégories vient du nuancier `.tag.cat-color-N` d'app.css (PR 57), déjà
   décliné clair/sombre — on ne redéfinit RIEN ici, sinon les deux nuanciers divergent.
   La correspondance catégorie → teinte vit dans EntreeJournal.CategorieCss. */

/* Numéro et catégorie dans la ligne repliée : des éléments INLINE (voir l'avertissement
   flex ci-dessus), calés sur la ligne de texte. */
.jrn-num[b-xj29p0s1j4] {
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    margin-right: 8px;
}
.jrn-cat[b-xj29p0s1j4] {
    margin-right: 10px;
    vertical-align: 1px;
}
/* La graisse à l'ouverture s'applique à la synthèse, pas aux repères. */
.jrn-entree details[open] summary .jrn-num[b-xj29p0s1j4] { font-weight: 400; }

/* Filtres rapides : les puces de catégorie portent leur vraie couleur — le filtre sert
   aussi de légende du nuancier. Éteint = assourdi, allumé = plein + liseré. */
.jrn-filtres[b-xj29p0s1j4] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.jrn-filtres-nom[b-xj29p0s1j4] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    min-width: 72px;
}
.jrn-filtre[b-xj29p0s1j4] {
    cursor: pointer;
    border: 1px solid transparent;
    opacity: 0.55;
    transition: var(--transition);
    font: inherit;
    font-size: 12px;
}
.jrn-filtre:hover[b-xj29p0s1j4] { opacity: 1; }
.jrn-filtre-actif[b-xj29p0s1j4] { opacity: 1; border-color: currentColor; }
.jrn-filtre-n[b-xj29p0s1j4] { opacity: 0.7; font-variant-numeric: tabular-nums; }

.jrn-detail[b-xj29p0s1j4] {
    margin: 10px 0 0;
    padding: 0 18px 16px 40px;
    display: grid;
    gap: 7px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-secondary);
    list-style: none;
}
.jrn-detail li[b-xj29p0s1j4] { position: relative; padding-left: 14px; }
.jrn-detail li[b-xj29p0s1j4]::before {
    content: "";
    position: absolute;
    left: 0; top: 9px;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--border);
}

/* Captures d'écran : bordées et bornées — une capture illustre, elle n'envahit pas. */
.jrn-captures[b-xj29p0s1j4] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 18px 16px 40px;
}
.jrn-capture[b-xj29p0s1j4] { margin: 0; }
.jrn-capture img[b-xj29p0s1j4] {
    display: block;
    max-width: min(420px, 100%);
    max-height: 320px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.jrn-alerte[b-xj29p0s1j4] {
    padding: 11px 15px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--status-warning);
    color: var(--status-warning);
    font-size: 13px;
}

@media (max-width: 640px) {
    .jrn-outils[b-xj29p0s1j4] { width: 100%; }
    .jrn-rech[b-xj29p0s1j4] { flex: 1; min-width: 0; }
    .jrn-meta[b-xj29p0s1j4], .jrn-detail[b-xj29p0s1j4] { padding-left: 18px; }
    .jrn-captures[b-xj29p0s1j4] { padding-left: 18px; }
    .jrn-filtres-nom[b-xj29p0s1j4] { min-width: 100%; }
}

/* `code` et `**gras**` arrivent par MarkupString : ces éléments n'existent pas dans le .razor,
   donc ils NE PORTENT PAS l'attribut de portée. ::deep est obligatoire ici — sans lui la règle
   ne s'applique à rien, en silence. */
.jrn-entree[b-xj29p0s1j4]  code {
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
    font-size: 0.88em;
    padding: 1px 5px;
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
    color: var(--text-primary);
}
.jrn-entree[b-xj29p0s1j4]  strong { color: var(--text-primary); font-weight: 650; }
/* /Components/Shared/ForgeFormulaire.razor.rz.scp.css */
/* ── Formulaire de demande Forge (page /forge et panneau du bouton flottant) ─────
   La demande à gauche (grande, c'est l'essentiel), le cadre à droite (choix compacts).
   En dessous de 980 px — et toujours dans le panneau (.ff-compact) — une seule colonne. */

.ff-erreurs[b-35vlme2kph] { margin-bottom: 16px; }

/* ── Que veux-tu faire ? — le choix d'action, en haut, avant tout le reste ────── */
.ff-choix[b-35vlme2kph] { margin-bottom: 18px; }
.ff-choix-titre[b-35vlme2kph] { font-size: 16px; margin-bottom: 10px; }
.ff-tuiles[b-35vlme2kph] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}
/* Paliers fixes plutôt qu'auto-fit : jamais une tuile seule sur sa ligne quand on peut l'éviter. */
@media (max-width: 1180px) { .ff-tuiles[b-35vlme2kph] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .ff-tuiles[b-35vlme2kph] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ff-compact .ff-tuiles[b-35vlme2kph] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ff-tuile[b-35vlme2kph] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    text-align: left;
    font: inherit;
    color: var(--text-primary);
    background: var(--bg-elevated);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}
.ff-tuile:hover[b-35vlme2kph] { border-color: var(--accent); }
.ff-tuile:focus-visible[b-35vlme2kph] { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ff-tuile.is-on[b-35vlme2kph] { border-color: var(--accent); background: var(--accent-soft); }
/* Une fois choisie, les autres s'effacent un peu — elles restent cliquables pour changer d'avis. */
.ff-tuile.is-off[b-35vlme2kph] { opacity: 0.6; }
.ff-tuile.is-off:hover[b-35vlme2kph] { opacity: 1; }
.ff-tuile-icone[b-35vlme2kph] {
    flex: none;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-soft);
}
.ff-tuile.is-on .ff-tuile-icone[b-35vlme2kph] { color: var(--bg-elevated); background: var(--accent); }
.ff-tuile-texte[b-35vlme2kph] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ff-tuile-titre[b-35vlme2kph] { font-size: 14px; font-weight: 600; }
.ff-tuile-aide[b-35vlme2kph] { font-size: 12px; color: var(--text-muted); line-height: 1.35; }
.ff-facultatif[b-35vlme2kph] { font-size: 12px; font-weight: 400; color: var(--text-muted); }

/* « Nouveau module » : un choix DÉLIBÉRÉ, sur sa propre ligne, séparé des demandes ordinaires par
   un trait, et une tuile en pointillé qui ne se confond pas avec les cinq autres. Seuls ceux qui
   ont forge.module la voient. */
.ff-tuiles-module[b-35vlme2kph] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}
/* « Lexique » partage cette ligne : deux tuiles côte à côte quand la place le permet. */
.ff-tuiles-module.ff-deux[b-35vlme2kph] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .ff-tuiles-module.ff-deux[b-35vlme2kph] { grid-template-columns: minmax(0, 1fr); } }
.ff-compact .ff-tuiles-module.ff-deux[b-35vlme2kph] { grid-template-columns: minmax(0, 1fr); }
.ff-tuile-module[b-35vlme2kph] { border-style: dashed; }
.ff-tuile-module.is-on[b-35vlme2kph] { border-style: solid; }
.ff-nom-module[b-35vlme2kph] { width: 100%; }
.ff-terme-lexique[b-35vlme2kph] { width: 100%; max-width: 320px; }

.ff-grille[b-35vlme2kph] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 18px;
    align-items: start;
}
.ff-compact .ff-grille[b-35vlme2kph] { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 980px) {
    .ff-grille[b-35vlme2kph] { grid-template-columns: minmax(0, 1fr); }
}

/* Le cadre reste en vue pendant qu'on écrit une longue demande. */
.ff-cadre[b-35vlme2kph] { position: sticky; top: 16px; }
.ff-compact .ff-cadre[b-35vlme2kph] { position: static; }

.ff-label[b-35vlme2kph] {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.ff-label-ligne[b-35vlme2kph] { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ff-compte[b-35vlme2kph] { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ff-aide[b-35vlme2kph] { font-size: 12px; color: var(--text-muted); margin: 0 0 8px; }
.ff-preselection strong[b-35vlme2kph] { font-weight: 500; color: var(--text-secondary); }

/* Les zones de texte : grandes, redimensionnables, et qui grandissent avec le contenu là où le
   navigateur le permet (field-sizing). */
.ff-texte[b-35vlme2kph] {
    resize: vertical;
    min-height: 96px;
    line-height: 1.55;
    margin-bottom: 18px;
    field-sizing: content;
}
.ff-texte-grand[b-35vlme2kph] { min-height: 200px; font-size: 15px; }
.ff-compact .ff-texte-grand[b-35vlme2kph] { min-height: 150px; }

/* ── Captures d'écran ────────────────────────────────────────────────────────── */
.ff-captures[b-35vlme2kph] { margin-bottom: 18px; }

.ff-depot[b-35vlme2kph] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1.5px dashed var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.ff-depot:hover[b-35vlme2kph],
.ff-depot:focus-within[b-35vlme2kph] { border-color: var(--accent); color: var(--text-primary); background: var(--accent-soft); }
.ff-depot.is-busy[b-35vlme2kph] { cursor: progress; opacity: 0.7; }
.ff-depot.is-full[b-35vlme2kph] { cursor: default; opacity: 0.65; }
.ff-depot svg[b-35vlme2kph] { flex: none; color: var(--accent); }

/* Le vrai champ fichier couvre toute la zone, invisible : clic ET glisser-déposer natifs. */
.ff-depot[b-35vlme2kph]  input[type=file] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: inherit;
}

.ff-message[b-35vlme2kph] { margin-top: 6px; }

.ff-vignettes[b-35vlme2kph] {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}
.ff-vignettes-recap[b-35vlme2kph] { margin: 14px 0 4px; }

.ff-vignette[b-35vlme2kph] {
    position: relative;
    aspect-ratio: 3 / 2;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg-elevated);
}
.ff-vignette img[b-35vlme2kph] { width: 100%; height: 100%; object-fit: cover; display: block; }
.ff-vignette-vide[b-35vlme2kph] {
    display: flex; align-items: center; justify-content: center; height: 100%;
    padding: 6px; font-size: 11px; color: var(--text-muted); text-align: center; word-break: break-all;
}

.ff-retirer[b-35vlme2kph] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}
.ff-retirer:hover[b-35vlme2kph] { background: var(--danger, #c0392b); }

/* ── Le cadre ────────────────────────────────────────────────────────────────── */
.ff-bloc[b-35vlme2kph] { margin-bottom: 16px; }
.ff-espace[b-35vlme2kph] { height: 8px; }
.ff-actions[b-35vlme2kph] { margin-top: 4px; justify-content: flex-end; }

.seg[b-35vlme2kph] { display: flex; flex-wrap: wrap; gap: 6px; }
.seg-colonne[b-35vlme2kph] { flex-direction: column; align-items: stretch; }
.seg-colonne .chip-toggle[b-35vlme2kph] { text-align: left; }

/* ── Écran de confirmation ───────────────────────────────────────────────────── */
.recap-phrase[b-35vlme2kph] {
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin-bottom: 18px;
}

.recap-list[b-35vlme2kph] { list-style: none; padding: 0; margin: 0; }

.recap-list li[b-35vlme2kph] {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border-subtle);
}
.ff-compact .recap-list li[b-35vlme2kph] { grid-template-columns: 1fr; gap: 2px; }

.recap-list li span[b-35vlme2kph] { color: var(--text-secondary); font-size: 13px; }
.recap-list li strong[b-35vlme2kph] { color: var(--text-primary); font-weight: 500; }
.ff-multiligne[b-35vlme2kph] { white-space: pre-wrap; }

/* Diagnostic : ce que l'app joint d'office (la photo) et le message d'erreur reçu de la page. */
.ff-photo[b-35vlme2kph] { margin-bottom: 18px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--accent-soft); }
.ff-photo .ff-aide[b-35vlme2kph] { margin-bottom: 0; }
.ff-erreur-jointe[b-35vlme2kph] { margin-top: 10px; font-size: 12.5px; }
.ff-erreur-jointe summary[b-35vlme2kph] { cursor: pointer; font-weight: 600; color: var(--text-secondary); }
.ff-erreur-jointe code[b-35vlme2kph] { display: block; margin-top: 6px; white-space: pre-wrap; word-break: break-word; max-height: 180px; overflow: auto; }

/* Le courriel de suivi, lu du compte (non modifiable ici). */
.ff-suivi[b-35vlme2kph] { margin: 0 0 4px; font-size: 14px; color: var(--text-primary); word-break: break-all; }
.ff-conseil-etat[b-35vlme2kph] { margin: -6px 0 14px; }

/* ── « Cody a relu » ───────────────────────────────────────────────────────────
   Un panneau de CONSEIL, pas une alerte : il ne doit ni bloquer, ni crier. D'où le
   ton neutre plutôt qu'un bandeau d'erreur — celui qui trouve toujours quelque chose
   à redire finit par être ignoré. */
.conseil[b-35vlme2kph] {
    margin-bottom: 26px;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-glass);
}
.conseil-titre[b-35vlme2kph] {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 14px;
    color: var(--text-primary);
}
.conseil-bloc[b-35vlme2kph] { margin-bottom: 16px; }
.conseil-bloc:last-of-type[b-35vlme2kph] { margin-bottom: 0; }
.conseil-lab[b-35vlme2kph] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 7px;
}
.conseil-liste[b-35vlme2kph] {
    margin: 0;
    padding-left: 18px;
    font-size: 13.5px;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.conseil-repro[b-35vlme2kph] {
    margin: 0 0 11px;
    padding: 11px 13px;
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-primary);
}
.conseil-pied[b-35vlme2kph] {
    margin: 16px 0 0;
    padding-top: 13px;
    border-top: 1px solid var(--border-subtle);
    font-size: 12.5px;
    color: var(--text-muted);
}
.conseil-attente[b-35vlme2kph] {
    margin-bottom: 26px;
    font-size: 13px;
    color: var(--text-muted);
}
/* /Components/Shared/ForgeLanceur.razor.rz.scp.css */
/* ── Bouton Forge flottant : petit, discret, toujours en bas à gauche ─────────── */
.fl-bouton[b-gjbk4ffjyu] {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 900;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--accent);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    opacity: 0.75;
    transition: opacity 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.fl-bouton:hover[b-gjbk4ffjyu],
.fl-bouton:focus-visible[b-gjbk4ffjyu],
.fl-bouton.is-open[b-gjbk4ffjyu] { opacity: 1; border-color: var(--accent); transform: scale(1.06); }

/* ── Panneau à gauche ────────────────────────────────────────────────────────── */
.fl-voile[b-gjbk4ffjyu] {
    position: fixed;
    inset: 0;
    z-index: 950;
    background: rgba(0, 0, 0, 0.28);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.fl-voile.is-open[b-gjbk4ffjyu] { opacity: 1; pointer-events: auto; }

.fl-panneau[b-gjbk4ffjyu] {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 960;
    width: min(480px, 100vw);
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    border-right: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    transform: translateX(-102%);
    visibility: hidden;
    transition: transform 0.22s ease, visibility 0s linear 0.22s;
}
.fl-panneau.is-open[b-gjbk4ffjyu] { transform: none; visibility: visible; transition: transform 0.22s ease; }

.fl-tete[b-gjbk4ffjyu] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}
.fl-tete > div:first-child[b-gjbk4ffjyu] { flex: 1; min-width: 0; }
.fl-titre[b-gjbk4ffjyu] { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.fl-sous-titre[b-gjbk4ffjyu] { font-size: 12px; color: var(--text-muted); }
.fl-grand[b-gjbk4ffjyu] { font-size: 12px; white-space: nowrap; }

.fl-corps[b-gjbk4ffjyu] { flex: 1; overflow-y: auto; padding: 14px 16px 24px; }

@media print {
    .fl-bouton[b-gjbk4ffjyu], .fl-voile[b-gjbk4ffjyu], .fl-panneau[b-gjbk4ffjyu] { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
    .fl-panneau[b-gjbk4ffjyu], .fl-voile[b-gjbk4ffjyu], .fl-bouton[b-gjbk4ffjyu] { transition: none; }
}
/* /Components/Shared/ForgeSousNav.razor.rz.scp.css */
/* Sous-navigation de l'atelier Forge — même langage visuel que les onglets du formulaire. */
.forge-nav[b-1cqho588h5] {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 26px;
    flex-wrap: wrap;
}
.forge-nav-lien[b-1cqho588h5] {
    border-bottom: 2px solid transparent;
    padding: 10px 15px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--transition), border-color var(--transition);
}
.forge-nav-lien:hover[b-1cqho588h5] { color: var(--text-primary); }
.forge-nav-lien.is-active[b-1cqho588h5] { color: var(--accent); border-bottom-color: var(--accent); }
.forge-nav-lien:focus-visible[b-1cqho588h5] {
    outline: none;
    border-radius: var(--radius-sm);
    box-shadow: 0 0 0 3px var(--accent-soft);
}