/* Outil · Sauvegardes (Backups), id sauvegardes : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : sv-
   À gauche : la règle 3-2-1-1-0 en grands chiffres (allumés quand c'est bon), tes copies rangées « Ici » et « Ailleurs »
   (tuiles : support, débranchée, vérifiée ; deux zones de hauteur fixe), le conseil pour ce qui manque (2 lignes fixes).
   À droite : Ajouter une copie (un support), puis tes copies (zone fixe qui défile) : lieu, débranchée, vérifiée, retirer. */
.sv .outil-fixe { align-items: stretch; }
.sv-regle { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.sv-chiffre { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 4px 12px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--filet-doux); transition: background .3s var(--courbe); }
.sv-chiffre b { font: 700 40px/1 var(--display); letter-spacing: -.03em; color: rgba(242, 240, 235, .22); transition: color .3s var(--courbe); }
.sv-chiffre span { font: 500 10px/1.2 var(--mono); letter-spacing: .04em; color: var(--texte2); text-align: center; height: 2.4em; }
.sv-chiffre[data-ok="1"] { background: rgba(255, 140, 90, .08); }
.sv-chiffre[data-ok="1"] b { color: var(--peche); }
.sv-lieux { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sv-lieu { display: flex; flex-direction: column; padding: 2px 12px 12px; border-radius: 14px; background: rgba(0, 0, 0, .2); box-shadow: inset 0 0 0 1px var(--filet-doux); }
.sv-tuiles { height: 196px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.sv-tuile { flex: none; display: flex; flex-direction: column; gap: 3px; padding: 9px 12px; border-radius: 10px; background: rgba(242, 240, 235, .06); box-shadow: inset 3px 0 0 rgba(242, 240, 235, .2); }
.sv-tuile.sv-ok { box-shadow: inset 3px 0 0 var(--peche); }
.sv-tuile b { font: 600 13.5px/1.2 var(--corps); color: var(--papier); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-tuile span { font: 500 10.5px/1.2 var(--mono); color: var(--texte2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-conseil { margin: 0; height: 3lh; font: 400 14.5px/1.5 var(--corps); color: var(--peche); overflow: hidden; }
.sv-conseil.sv-tout { color: var(--papier); }

.sv-liste { height: 340px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 6px; }
.sv-ligne { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto 28px; grid-template-areas: "nom seg x" "b1 b2 b2"; gap: 8px 10px; align-items: center; padding: 10px 6px 10px 14px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--filet-doux); }
.sv-nom { grid-area: nom; font: 500 14px/1.2 var(--corps); color: var(--papier); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-seg { grid-area: seg; }
.sv-seg button { padding: 6px 12px; }
.sv-seg button:disabled { opacity: .3; }
.sv-bascule { justify-self: start; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 8px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--filet); color: var(--texte2); font: 500 11px/1 var(--mono); letter-spacing: .04em; }
.sv-bascule:nth-of-type(1) { grid-area: b1; }
.sv-bascule:nth-of-type(2) { grid-area: b2; }
.sv-bascule svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sv-bascule[aria-pressed="true"] { color: var(--noir); background: var(--papier); box-shadow: none; }
.sv-bascule:disabled { opacity: .45; cursor: default; }
.sv-retirer { grid-area: x; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none; display: grid; place-items: center; cursor: pointer; color: var(--texte2); }
.sv-retirer svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.sv-retirer:hover { color: var(--papier); }
.sv-vide { margin: 40px 0; text-align: center; font: var(--valeur); letter-spacing: .06em; color: var(--texte2); }
@media (max-width: 559px) { .sv-chiffre b { font-size: 30px; } .sv-chiffre span { font-size: 9px; } .sv-tuiles { height: 160px; } }