/* Atelier OWASP LLM · styles du jeu de reliage (repris du parcours simulation
   d'attaque), scopés sous .atelier-owasp pour ne pas déteindre sur le reste du site. */
.atelier-owasp {
  --ink: #17211f; --muted: #63716d; --line: #dce4e1;
  --surface: #fff; --brand: #173e36; --accent: #caef73;
  font-family: Inter, 'Outfit', ui-sans-serif, system-ui, sans-serif;
  color: var(--ink);
}

.atelier-owasp .llm-workshop { margin-top: 8px; padding: 20px 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: 0 5px 24px rgb(18 48 41 / 5%); }
.atelier-owasp .llm-workshop__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; }
.atelier-owasp .llm-workshop__heading h2 { margin: 0; font-size: clamp(23px, 2.4vw, 31px); letter-spacing: -.035em; }
.atelier-owasp .llm-workshop__heading > p { max-width: 490px; margin: 3px 0 0; color: #465852; font-size: 12px; line-height: 1.45; }
.atelier-owasp .llm-board { position: relative; display: grid; margin-top: 15px; gap: 16px; grid-template-columns: minmax(0, 1fr) minmax(360px, .45fr); }
.atelier-owasp .llm-lines { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.atelier-owasp .llm-lines line, .atelier-owasp .llm-lines path { fill: none; stroke: #6f9b38; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .78; }
.atelier-owasp .llm-board h3 { margin: 0 0 7px; color: var(--brand); font-size: 13px; }
.atelier-owasp .llm-examples, .atelier-owasp .llm-risks { min-width: 0; }
.atelier-owasp #llm-example-list, .atelier-owasp #llm-risk-list { display: grid; gap: 6px; }
.atelier-owasp #llm-example-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.atelier-owasp .llm-example, .atelier-owasp .llm-risk { position: relative; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfc; }
.atelier-owasp .llm-example { z-index: 2; display: flex; min-width: 0; min-height: 57px; padding: 7px 10px; flex-direction: column; justify-content: space-between; }
.atelier-owasp .llm-example:active { cursor: grabbing; }
.atelier-owasp .llm-example.is-matched { border-color: #9bbf58; background: #f3f8e9; }
.atelier-owasp .llm-example.is-selected { border-color: var(--brand); outline: 3px solid rgb(202 239 115 / 55%); }
.atelier-owasp .llm-example:focus-within { border-color: var(--brand); }
.atelier-owasp .llm-example__select { width: 100%; padding: 0; border: 0; color: inherit; background: transparent; cursor: pointer; text-align: left; }
.atelier-owasp .llm-example__select:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.atelier-owasp .llm-example p { margin: 0; color: #314a43; font-size: 10.5px; line-height: 1.32; }
.atelier-owasp .llm-example__footer { display: flex; min-width: 0; margin-top: 4px; align-items: center; justify-content: space-between; gap: 8px; }
.atelier-owasp .llm-example__answer { display: block; overflow: hidden; color: var(--muted); font-size: 9px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.atelier-owasp .llm-example.is-matched .llm-example__answer { color: #426118; }
.atelier-owasp .llm-risk { z-index: 2; min-height: 50px; padding: 8px 10px; cursor: pointer; }
.atelier-owasp .llm-risk.is-over { border-color: var(--brand); background: #edf6d9; }
.atelier-owasp .llm-risk__summary { display: grid; min-width: 0; min-height: 32px; padding-right: 29px; align-items: center; gap: 7px; grid-template-columns: 43px minmax(0, 1fr) auto; }
.atelier-owasp .llm-risk strong { color: var(--brand); font-size: 10px; }
.atelier-owasp .llm-risk h4 { min-width: 0; margin: 0; overflow: hidden; color: var(--ink); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.atelier-owasp .llm-risk__info { position: absolute; top: 13px; right: 10px; display: grid; width: 21px; height: 21px; padding: 0; place-items: center; border: 1px solid #9bb5aa; border-radius: 50%; color: var(--brand); background: white; cursor: pointer; font-size: 11px; font-weight: 850; }
.atelier-owasp .llm-risk__info:hover, .atelier-owasp .llm-risk__info:focus-visible { color: white; background: var(--brand); }
.atelier-owasp .llm-risk__count { color: var(--muted); font-size: 8.5px; white-space: nowrap; }
.atelier-owasp .llm-risk__detail { margin-top: 7px; padding: 8px 3px 2px; border-top: 1px solid #d5e1dc; cursor: default; }
.atelier-owasp .llm-risk__detail[hidden] { display: none; }
.atelier-owasp .llm-risk__detail p { margin: 0; color: #40534d; font-size: 10px; line-height: 1.4; }
.atelier-owasp .llm-risk__detail p + p { margin-top: 5px; color: #5c6e68; }
.atelier-owasp .llm-score { margin: 0; color: var(--brand); font-size: 11px; font-weight: 800; }
.atelier-owasp .llm-actions { display: flex; align-items: center; gap: 16px; }
.atelier-owasp .llm-actions > button { margin-top: 14px; padding: 7px 11px; border: 1px solid var(--brand); border-radius: 9px; color: white; background: var(--brand); cursor: pointer; font-size: 10px; font-weight: 800; }
.atelier-owasp .llm-actions > button:hover, .atelier-owasp .llm-actions > button:focus-visible { color: var(--brand); background: var(--accent); }

@media (max-width: 800px) {
  .atelier-owasp .llm-board { grid-template-columns: 1fr; }
  .atelier-owasp .llm-lines { display: none; }
}
@media (max-width: 620px) {
  .atelier-owasp .llm-workshop__heading { flex-direction: column; }
  .atelier-owasp #llm-example-list { grid-template-columns: 1fr; }
  .atelier-owasp .llm-actions { align-items: flex-start; flex-direction: column; gap: 0; }
}