/* Fichier produit par le build (scripts/build/styles.mjs) à partir de styles/atelier/*.css : c'est là qu'il faut modifier. */
/* ================================================================
   L'atelier (/atelier/, voir assets/atelier.js) : relier un appareil pour synchroniser le carnet du jardinier.
   Un seul bloc visible à la fois, selon data-etat.
   ================================================================ */
.atelier { max-width: 36rem; font-size: 17px; line-height: 1.6; color: var(--soft); animation: fade 1s var(--ease) 0.5s both; }
.atelier [data-quand] { display: none; margin: 0 0 14px; }
.atelier[data-etat="attente"] [data-quand~="attente"], .atelier[data-etat="connexion"] [data-quand~="connexion"],
.atelier[data-etat="deconnecte"] [data-quand~="deconnecte"], .atelier[data-etat="relie"] [data-quand~="relie"],
.atelier[data-etat="refuse"] [data-quand~="refuse"], .atelier[data-etat="horsligne"] [data-quand~="horsligne"],
.atelier[data-etat="indisponible"] [data-quand~="indisponible"], .atelier[data-etat="echec"] [data-quand~="echec"] { display: block; }
.atelier p { margin: 0 0 10px; text-wrap: pretty; }
.atelier__etat { font-family: var(--serif); font-weight: 300; font-style: italic; font-size: 24px; line-height: 1.3; color: var(--ink); }
.atelier__detail { font-size: 14px; color: var(--muted); }
.atelier__geste {
  display: inline-flex; align-items: center; min-height: 44px; margin: 0 12px 0 0; padding: 0; border: 0; background: none;
  font-family: var(--engraved); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 6px; cursor: pointer;
}
.atelier__geste:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
.atelier summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; }
.atelier ol { margin: 6px 0 14px; padding-left: 1.3em; font-size: 15px; }
.atelier li { margin-bottom: 6px; }
.atelier li::marker { color: var(--accent); }
.atelier__regles:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.atelier__regles { margin: 0; padding: 14px 16px; overflow-x: auto; border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.55; color: var(--ink); white-space: pre; user-select: all; }