/* Pages de la bibliothèque : options d'installation, commandes à copier. S'appuie sur project.css. */
.hero .ctas { margin-top: 4px; }

/* Une façon d'installer */
.option {
  display: grid; gap: 12px; padding: 22px 20px 20px; margin-top: 10px;
  background: var(--ink-raise); border: 3px solid var(--outline); box-shadow: 5px 5px 0 var(--outline);
}
.option-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.option-head h3 { margin: 0; font-size: 1.15rem; }
.option .num {
  width: 34px; height: 34px; display: grid; place-items: center; flex: none;
  background: var(--terra); border: 3px solid var(--outline); box-shadow: 3px 3px 0 var(--outline);
  font-size: 1.2rem; line-height: 1; transform: rotate(-4deg);
}
.tag { font-size: .8rem; font-weight: 700; padding: 4px 8px; border: 2px solid var(--outline); background: var(--ok); color: var(--outline); }
.small { font-size: .93rem; }
.steps { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; color: var(--sand-dim); }
.steps li::marker { color: var(--terra); font-weight: 700; }
.steps strong { color: var(--sand); }
.os { font-size: .85rem; font-weight: 700; color: var(--terra-soft); margin-bottom: -6px; }

/* Commande à copier */
.cmd code, code.inline { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.cmd {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 10px 10px 10px 16px; background: var(--ink-deep); border: 3px solid var(--outline);
}
.cmd code { font-size: .92rem; color: var(--sand); overflow-wrap: anywhere; }
.cmd:not(.prompt) code::before { content: "> "; color: var(--terra); font-weight: 700; }
.cmd.prompt code { font-family: var(--f-body); font-style: italic; line-height: 1.5; }
code.inline { font-size: .9em; color: var(--sand); background: var(--ink-deep); padding: 1px 6px; border: 1px solid var(--line); }
.copy {
  font: 700 .85rem/1 var(--f-body); color: var(--sand); cursor: pointer;
  padding: 8px 12px; background: var(--ink-raise); border: 2px solid var(--outline); box-shadow: 3px 3px 0 var(--outline);
  transition: transform .15s ease, box-shadow .15s ease, background .2s;
}
.copy:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--outline); }
.copy.done { background: var(--ok); color: var(--outline); }

@media (max-width: 560px) {
  .cmd { grid-template-columns: minmax(0, 1fr); }
  .copy { justify-self: start; }
}