/* =====================================================================
   ADM-05 — SAUVEGARDE ET RESTAURATION (/admin/sauvegardes).

   Sa propre feuille, son propre <link> dans App.razor, après modele-erp.css :
   la règle du dépôt est qu'un écran ne s'ajoute plus à la queue du gabarit,
   où chaque branche entrait en conflit avec toutes les autres sur la
   dernière ligne du fichier et sur la clé de cache partagée (CLAUDE.md).

   AUCUNE COULEUR EN DUR : tout passe par les jetons --et-*. Une pastille
   d'échec qui porterait son rouge à elle survivrait au changement de charte
   et jurerait avec le reste, sans que personne sache où la corriger.
   ===================================================================== */

/* --- Bandeau « indisponible » : une base d'avant db/1442 --------------- */
.svg-indispo {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 14px 16px; margin-bottom: 16px;
    background: var(--et-neutre-bg); border: 1px solid var(--et-hairline);
    color: var(--et-ink); font-size: 13px;
}
.svg-indispo > i { font-size: 18px; color: var(--et-muted); flex-shrink: 0; }

/* --- L'opération en cours : elle passe avant tout le reste ------------- */
/* Une copie de quatre minutes ressemble à une panne si rien ne bouge à
   l'écran ; l'étape en cours est ce qui la distingue d'un blocage. */
.svg-travail {
    padding: 12px 16px; margin-bottom: 16px;
    background: var(--et-surface); border: 1px solid var(--et-hairline);
    border-left: 4px solid var(--et-form-blue);
}
.svg-travail-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.svg-travail-lbl { font-weight: 600; color: var(--et-ink); font-size: 13px; }
.svg-travail-pct { font-family: var(--et-font-mono); font-size: 13px; color: var(--et-form-blue); }
.svg-jauge { height: 6px; margin: 8px 0 6px; background: var(--et-neutre-bg); }
.svg-jauge-part { height: 100%; background: var(--et-form-blue); transition: width .3s ease; }
.svg-travail-etape { font-size: 12.5px; color: var(--et-muted); }

/* --- L'alerte : elle nomme la CAUSE, pas l'état ------------------------ */
.svg-alerte {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 11px 14px; margin-bottom: 16px;
    background: var(--et-avertissement-bg); color: var(--et-avertissement-ink);
    font-size: 13px;
}
.svg-alerte > i { font-size: 16px; flex-shrink: 0; }
.svg-alerte .small { color: var(--et-ink); font-size: 12.5px; }

/* --- Bande de faits saillants ----------------------------------------- */
.svg-faits {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1px; margin-bottom: 16px;
    background: var(--et-hairline); border: 1px solid var(--et-hairline);
}
.svg-fait { padding: 10px 14px; background: var(--et-surface); min-width: 0; }
.svg-fait-cle {
    font-family: var(--et-font-mono); font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .06em; color: var(--et-muted);
}
.svg-fait-val { font-family: var(--et-font-mono); font-size: 18px; font-weight: 700; margin-top: 2px; }
.svg-fait-note { font-size: 11.5px; color: var(--et-muted); margin-top: 1px; }

/* --- Pastilles d'état -------------------------------------------------- */
.svg-pastille {
    display: inline-flex; align-items: center; padding: 2px 7px;
    font-size: 12px; font-weight: 600; white-space: nowrap;
    background: var(--et-neutre-bg); color: var(--et-muted);
}
.svg-pastille.est-ok        { background: var(--et-succes-bg);        color: var(--et-succes-ink); }
.svg-pastille.est-danger    { background: var(--et-danger-badge-bg);  color: var(--et-danger-ink); }
.svg-pastille.est-attention { background: var(--et-avertissement-bg); color: var(--et-avertissement-ink); }
.svg-pastille.est-cours     { background: var(--et-info-bg);          color: var(--et-form-blue); }

/* --- Notes et traces --------------------------------------------------- */
.svg-note {
    display: flex; gap: 8px; align-items: flex-start;
    margin-top: 12px; padding: 9px 11px;
    background: var(--et-info-bg); border: 1px solid var(--et-info-bord);
    color: var(--et-ink); font-size: 12.5px; line-height: 1.45;
}
.svg-note > i { flex-shrink: 0; color: var(--et-form-blue); }
.svg-trace { margin-top: 10px; font-size: 12px; color: var(--et-muted); }

/* --- La confirmation de restauration ----------------------------------- */
/* Le seul geste du produit qui détruise des écritures déjà validées : la
   modale doit le dire avec le poids visuel qui va avec, sans quoi elle se
   confirme comme n'importe quelle boîte de dialogue. */
.svg-avert {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 11px 14px; margin-bottom: 14px;
    background: var(--et-danger-badge-bg); color: var(--et-danger-ink);
    font-size: 13px; line-height: 1.45;
}
.svg-avert > i { font-size: 17px; flex-shrink: 0; }

.svg-consequences { list-style: none; margin: 0 0 14px; padding: 0; }
.svg-consequences li {
    display: flex; gap: 9px; align-items: flex-start;
    padding: 5px 0; font-size: 12.5px; color: var(--et-ink); line-height: 1.4;
}
.svg-consequences li > i { flex-shrink: 0; margin-top: 1px; }
.svg-consequences li.est-ok > i        { color: var(--et-succes-ink); }
.svg-consequences li.est-danger > i    { color: var(--et-danger-ink); }
.svg-consequences li.est-attention > i { color: var(--et-avertissement-ink); }
.svg-consequences li.est-neutre > i    { color: var(--et-muted); }

/* --- Deux formes reprises au gabarit le 2026-09-08 --------------------- */
/*
   DEUX CLASSES DE CET ÉCRAN N'EXISTAIENT DANS AUCUNE FEUILLE, relevé en
   portant la console d'administration au gabarit. C'est le pire cas du
   dépôt : le balisage est juste, la cascade ne trouve rien à appliquer, et
   rien ne le signale — l'écran a seulement l'air mal aligné.

     · « mx-onglets » enveloppait trois « mx-onglet ». Le conteneur n'existait
       pas, et l'onglet, lui, existe mais c'est celui d'un RAIL VERTICAL
       (width: 100 %, filet d'accent à gauche, §4 de modele-erp.css) : les
       trois boutons se rendaient l'un SOUS l'autre, pleine largeur. La page
       emploie désormais .mx-seg, le commutateur HORIZONTAL du gabarit, qui
       est ce que ces trois-là sont.
     · « mx-form-pied » fermait le formulaire du plan. Le bouton
       « Enregistrer le plan » se posait donc au fil du texte, aligné à
       gauche, quand la charte veut les actions en bas à DROITE. Il prend la
       classe ci-dessous.

   Elles restent ici et non dans le gabarit parce qu'UN SEUL écran les
   emploie : la règle du dépôt ne fait remonter une classe qu'à partir de
   deux, jamais dans l'autre sens.
*/

/* La rangée de vues : elle prend sa place dans le flux, avec l'écart que le
   gabarit met entre deux blocs. .mx-seg est `inline-flex; flex: none` — posé
   seul dans un conteneur en bloc, il n'a ni marge ni retour à la ligne. */
.svg-vues { margin: 0 0 16px; }

/* Les actions de fin de formulaire, à droite. `justify-content: flex-end`
   plutôt qu'une marge automatique : il n'y a qu'un bouton, et une marge
   automatique sur un enfant unique demande que le parent soit déjà en flex —
   c'est-à-dire la règle qui manquait. */
.svg-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 12px;
    margin-top: 4px;
    border-top: 1px solid var(--et-hairline);
}

/* --- Responsive : la règle du dépôt, paliers 560 / 720 / 1024 ---------- */
/* Géométrie seulement, aucune couleur (docs/conventions-responsive.md). */
@media (max-width: 1024px) {
    /* La cible tactile ne descend jamais sous 44 px, et ne rétrécit jamais. */
    .svg-consequences li { padding: 7px 0; }
    /* Le segmenté suit la règle tactile, comme .tbl-etats au lot 02 : ses
       boutons portent un libellé, donc un minimum et non une hauteur ferme. */
    .svg-vues > button { min-height: 44px; }
}
@media (max-width: 720px) {
    .svg-faits { grid-template-columns: repeat(2, 1fr); }
    .svg-travail-tete { flex-wrap: wrap; }
}
@media (max-width: 560px) {
    .svg-faits { grid-template-columns: 1fr; }
    .svg-indispo, .svg-alerte, .svg-avert { padding: 10px 12px; }
    /* « Plan de sauvegarde » ne tient plus à côté des deux autres : le
       segmenté s'étire et ses trois boutons se partagent la largeur, plutôt
       que de déborder de l'écran. */
    .svg-vues { display: flex; }
    .svg-vues > button { flex: 1; padding: 0 6px; }
    /* Le bouton d'enregistrement prend la largeur : à 560 px, un bouton
       poussé à droite laisse une cible étroite au bord de l'écran. */
    .svg-form-actions > .mx-btn { flex: 1; }
}