/* ============================================================================
   JARVICE mobile - COUCHE ETATS VIDES ET SORTIES D OUTILS
   (chargee APRES style.css et lisibilite.css ; aucune couleur nouvelle).

   - .carte.vide : icone discrete, titre 16 px, conseil 15 px, bouton 44 px
     (helper etatVide() d app.js, repris par la vue Projets).
   - .resultat   : resultat d outil de 20 cles ou moins, une ligne cle/valeur
                   (cle en 13 px, valeur en 15 px).
   - pre.sortie  : texte brut ou gros objet, 12 px, retour a la ligne force.
   ========================================================================== */

.carte.vide {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 22px 18px 20px; text-align: center;
  color: var(--muted);
}
.carte.vide + .carte, .carte + .carte.vide { margin-top: 8px; }
/* un etat vide pose dans une carte existante (#a-etat, #b-etat...) ne double pas le cadre */
.carte > .carte.vide {
  border: none; background: transparent; backdrop-filter: none; padding: 14px 4px 10px;
}
.vide-icone {
  position: relative; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--bord); background: color-mix(in srgb, var(--accent) 6%, transparent);
  flex: none;
}
.vide-icone::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px;
  margin: -1px 0 0 -7px; border-radius: 1px; background: var(--muted-2);
}
.vide-titre { font-size: var(--m-lecture); font-weight: 500; line-height: 1.35; color: var(--texte); }
.vide-conseil { font-size: var(--m-base); line-height: 1.5; color: var(--muted); max-width: 30em; }
.carte.vide .mini { flex: none; min-width: 168px; min-height: 44px; margin-top: 6px; }

/* --- resultats d outils --------------------------------------------------- */
.resultat {
  background: var(--fond); border: 1px solid var(--bord); border-radius: 6px; padding: 4px 12px;
  user-select: text;
}
.resultat .row { font-family: var(--font); padding: 8px 0; }
.resultat .row span { font-size: var(--m-petit); color: var(--muted-2); }
.resultat .row b { font-size: var(--m-base); font-weight: 400; color: var(--texte); }
.carte > .resultat { border: none; padding: 0; background: transparent; }

pre.sortie, .sortie-zone pre {
  font-size: var(--m-micro); white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
}
.sortie-zone.ko .resultat .row b, .sortie-zone.ko pre.sortie { color: var(--danger); }
.sortie-zone > pre.sortie { max-height: 260px; }