/* Accueil — style commun des widgets « atelier » (js/widgets-atelier.js).

   Ce n'est pas la feuille d'UN widget : c'est le vocabulaire partagé par
   ceux qui manipulent du texte ou des fichiers — zone de saisie, barre de
   boutons, bandeau d'état. Chaque widget garde ensuite sa propre feuille
   pour ce qui lui est propre.

   Tout reprend le verre du reste de l'interface plutôt que d'inventer une
   autre matière : ces cartes vivent au milieu des autres. */

/* ---------- Zone de saisie ---------------------------------------------
   Elle occupe la place disponible et n'impose pas sa hauteur : dans une
   carte de 150 px de corps, c'est la carte qui commande. */
.atl__saisie {
  width: 100%; flex: 1 1 auto; min-height: 0; resize: none;
  padding: 9px 11px; border-radius: var(--r-md);
  background: var(--glass-inner); border: 1px solid var(--glass-inner-border);
  color: var(--text-2); font: 400 12.5px/1.55 var(--mono);
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .22) transparent;
}
.atl__saisie:focus { outline: none; border-color: rgba(var(--accent-rgb), .5);
  background: rgba(var(--accent-rgb), .06); }
.atl__saisie::placeholder { color: var(--text-6); }

/* ---------- Barre de boutons -------------------------------------------
   Elle passe à la ligne plutôt que de déborder : une carte étroite garde
   ses boutons, quitte à les empiler. */
.atl__barre { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: none; }
/* Pousse ce qui suit à droite. Classe propre à l'atelier : `.card__spacer`
   du socle disparaît dans les cartes étroites, ce qui casserait la barre. */
.atl__vide { flex: 1 1 auto; }

.atl__b {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 30px; padding: 0 11px; flex: none;
  border-radius: var(--r-md);
  background: var(--glass-inner); border: 1px solid var(--glass-inner-border);
  color: var(--text-2); font: 400 11.5px var(--sans); cursor: pointer;
  transition: background .14s ease-out, color .14s ease-out;
}
.atl__b:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); color: var(--text-strong); }
.atl__b .ico { font-size: 14px; flex: none; }
.atl__b--principal { background: rgba(var(--accent-rgb), .22); border-color: rgba(var(--accent-rgb), .45); color: var(--accent-soft); }
.atl__b--principal:hover { background: rgba(var(--accent-rgb), .3); color: var(--accent-soft); }
.atl__b--danger:hover { background: rgba(248, 113, 113, .16); border-color: rgba(248, 113, 113, .3); color: var(--danger); }
.atl__b--mini { height: 24px; padding: 0 8px; font-size: 11px; gap: 5px; }
.atl__b--mini .ico { font-size: 12px; }
.atl__b[disabled] { opacity: .4; pointer-events: none; }

/* Carte étroite : les libellés s'effacent, les icônes restent — même leçon
   que les deux widgets déjà livrés, et infobulle pour retrouver le mot. */
.atl--serre .atl__b { padding: 0 9px; }
.atl--serre .atl__b span { display: none; }

/* ---------- Bandeau d'état ----------------------------------------------
   Six états, six couleurs, une seule forme : l'utilisateur apprend le
   gabarit une fois et le relit partout. */
.atl__etat {
  display: flex; align-items: center; gap: 8px; flex: none;
  padding: 7px 10px; border-radius: var(--r-md);
  font: 400 11.5px/1.4 var(--sans); color: var(--text-3);
  background: var(--glass-inner); border: 1px solid var(--glass-inner-border);
}
.atl__etat .ico { font-size: 14px; flex: none; }
.atl__etat-txt { flex: 1 1 auto; min-width: 0; }
.atl__etat--attente { color: var(--text-2); }
.atl__etat--attente .ico { animation: atl-pulse 1.4s ease-in-out infinite; }
.atl__etat--ok { color: var(--success); background: rgba(74, 222, 128, .1); border-color: rgba(74, 222, 128, .24); }
.atl__etat--degrade { color: var(--warning); background: rgba(251, 191, 36, .1); border-color: rgba(251, 191, 36, .24); }
.atl__etat--erreur { color: var(--danger); background: rgba(248, 113, 113, .1); border-color: rgba(248, 113, 113, .26); }
.atl__etat--indisponible { color: var(--text-5); border-style: dashed; }

@keyframes atl-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .atl__etat--attente .ico { animation: none; opacity: .8; }
}