/* Atelier : section d'outil interactive, calquee sur la section .tool-guide. */

.tool-atelier {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.5rem 1rem;
  line-height: 1.6;
  color: inherit;
}

.tool-atelier[hidden] { display: none; }

.tool-atelier h2 { font-size: 1.5rem; margin: 0 0 0.75rem; }

.tool-atelier h3 { font-size: 1.2rem; margin: 1.5rem 0 0.5rem; }

.tool-atelier p { margin: 0.5rem 0; }

/* Carte d'un exemple de l'atelier. */
.atelier-exemple {
  max-width: 100%;
  border: 1px solid #dddddd;
  border-radius: 4px;
  padding: 0.75rem 1rem;
  margin: 0.75rem 0;
  box-sizing: border-box;
}

/* Sortie : bloc monospace clair, lignes repliees et defilement possible. */
.atelier-sortie {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
  background: #f5f5f5;
  border: 1px solid #dddddd;
  border-radius: 4px;
  padding: 0.6rem 0.75rem;
  margin: 0.5rem 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9rem;
  line-height: 1.5;
  box-sizing: border-box;
}

.atelier-sortie code { font-family: inherit; }

/* Boutons de l'atelier. */
.atelier-essayer,
.atelier-indisponible {
  display: inline-block;
  max-width: 100%;
  padding: 0.4rem 0.9rem;
  font: inherit;
  color: inherit;
  border: 1px solid #bbbbbb;
  border-radius: 4px;
  box-sizing: border-box;
}

.atelier-essayer { background: #ffffff; cursor: pointer; }

.atelier-essayer:hover { background: #ececec; }

.atelier-essayer:focus-visible {
  outline: 2px solid #1a73e8;
  outline-offset: 2px;
}

/* Action indisponible : bouton attenue. */
.atelier-indisponible { background: #f0f0f0; opacity: 0.55; cursor: not-allowed; }

/* Repere discret d'enregistrement. */
.atelier-enregistre {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border: 1px dotted #999999;
  border-radius: 3px;
  font-size: 0.8rem;
  color: inherit;
  opacity: 0.8;
}

/* Tableau de l'atelier. */
.tool-atelier table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  margin: 0.75rem 0;
}

.tool-atelier th,
.tool-atelier td {
  border: 1px solid #dddddd;
  padding: 0.4rem 0.6rem;
  text-align: left;
  vertical-align: top;
  overflow-wrap: break-word;
}

.tool-atelier caption {
  caption-side: top;
  font-weight: 700;
  text-align: left;
  padding: 0 0 0.4rem;
}

/* Mobile : la table defile au lieu de deborder. */
@media (max-width: 640px) {
  .tool-atelier { padding: 1rem 0.75rem; }

  .tool-atelier table {
    display: block;
    overflow-x: auto;
  }
}

/* Mode sombre, sur le modele de tool-guide.css. */
@media (prefers-color-scheme: dark) {
  .atelier-exemple,
  .atelier-enregistre,
  .atelier-sortie,
  .tool-atelier th,
  .tool-atelier td {
    border-color: #3a3a3a;
  }

  .atelier-sortie { background: #1e1e1e; }
  .atelier-essayer { background: #2a2a2a; border-color: #555555; }
  .atelier-essayer:hover { background: #333333; }
  .atelier-essayer:focus-visible { outline-color: #8ab4f8; }
  .atelier-indisponible { background: #1e1e1e; border-color: #3a3a3a; }
}