/* Atelier VSI appliquée à l'IA : risques puis URS, par groupe.
   Complète assets/styles.css, qui reste la base commune des pages d'atelier. */

:root {
  --accent: #4169E1;
  --accent-soft: #E6ECFB;
  --accent-ink: #2F52BF;

  --g1: #4169E1;
  --g2: #FF9141;
  --g3: #4FAF2B;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --accent: #7D9BF0; --accent-soft: #1A2342; --accent-ink: #A9BCF5; }
}

[data-g="1"] { --gc: var(--g1); }
[data-g="2"] { --gc: var(--g2); }
[data-g="3"] { --gc: var(--g3); }

.logo.rond { border-radius: 50%; }

/* ---------- choix du groupe ---------- */
.groupbar { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 16px; }
.gb-lbl { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.gsel {
  display: flex; flex-wrap: wrap; border: 1px solid var(--line-strong);
  border-radius: var(--r-m); overflow: hidden; background: var(--surface);
}
.gsel button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--ink-soft);
  padding: 9px 16px; display: flex; align-items: center; gap: 8px;
}
.gsel button + button { border-left: 1px solid var(--line); }
.gsel button i { width: 12px; height: 12px; border-radius: 50%; background: var(--gc); }
.gsel button:hover { background: var(--surface-2); color: var(--ink); }
.gsel button[aria-checked="true"] { color: var(--ink); font-weight: 600; background: color-mix(in srgb, var(--gc, var(--ink-faint)) 18%, var(--surface)); box-shadow: inset 0 -3px 0 var(--gc, var(--ink-soft)); }
.gsel button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.groupbar.attente .gsel { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* ---------- formulaires ---------- */
.band-hint { margin: 0; font-size: 12.5px; color: var(--ink-faint); }
.idnext { margin-left: auto; font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--gc, var(--ink-faint)); }
.cnt { font-size: 10px; letter-spacing: .04em; color: var(--ink-faint); text-transform: none; }

form.vform { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.vform > .field { grid-column: 1; }
.vform > .field.side { grid-column: 2; grid-row: 1 / span 3; }
#formU { grid-template-rows: auto 1fr auto; }
#formU > .field.side { grid-row: 1 / span 2; }
@media (max-width: 820px) {
  form.vform { grid-template-columns: 1fr; }
  .vform > .field.side { grid-column: 1; grid-row: auto; }
}
.vform textarea { min-height: 76px; }

.vband { display: flex; flex-direction: column; gap: 7px; }
.vband > label {
  display: grid; grid-template-columns: auto 1fr; gap: 9px; align-items: start; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--line-strong);
  border-radius: var(--r-s); padding: 7px 10px 8px;
}
.vband.compact > label { padding: 5px 10px 6px; }
.vband > label:hover, .vband > label:has(input:checked) { background: var(--accent-soft); }
.vband > label:has(input:checked) { border-color: var(--accent); }
.vband > label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
.vband input { margin: 3px 0 0; width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.vband b { font-family: var(--mono); font-size: 11px; font-weight: 600; margin-right: 7px; }
.vband em { font-style: normal; font-size: 13px; font-weight: 600; }
.vband span.h { display: block; font-size: 11.5px; line-height: 1.35; color: var(--ink-faint); margin-top: 2px; }

.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chips > label {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 12px; font-size: 13px;
}
.chips > label:hover, .chips > label:has(input:checked) { background: var(--accent-soft); }
.chips > label:has(input:checked) { border-color: var(--accent); font-weight: 600; }
.chips input { margin: 0; width: 14px; height: 14px; accent-color: var(--accent); cursor: pointer; }

.field.bad .vband, .field.bad .chips { outline: 1px solid var(--z-red); outline-offset: 3px; border-radius: var(--r-s); }

/* ---------- murs en colonnes ---------- */
.cols { display: grid; gap: 14px; align-items: start; }
.cols-r { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cols-u { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
@media (max-width: 1000px) { .cols-r { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .cols-r { grid-template-columns: 1fr; } }

.col {
  background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--ink-soft);
  border-radius: var(--r-m); padding: 11px 11px 13px; min-width: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.col-head { display: flex; align-items: baseline; gap: 8px; }
.col-head h3 { font-size: 15px; }
.col-head .eyebrow { margin-left: auto; }
.col-notes { display: flex; flex-direction: column; gap: 10px; }
.col-notes:empty::after { content: attr(data-vide); font-size: 12.5px; color: var(--ink-faint); padding: 4px 2px; }

/* ---------- post-it colorés par groupe ---------- */
.pit {
  background: color-mix(in srgb, var(--gc) 13%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--gc) 35%, transparent);
  border-left: 5px solid var(--gc); border-radius: 2px;
  padding: 9px 11px 10px; box-shadow: var(--shadow); position: relative;
  display: flex; flex-direction: column; gap: 5px;
}
.pit.pop { animation: pop .25s ease-out; }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.03); } 100% { transform: scale(1); } }
.pit .title { font-family: var(--serif); font-size: 15px; font-weight: 600; line-height: 1.25; padding-right: 20px; }
.pit .txt { font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; padding-right: 14px; }
.pit .crit { font-size: 12px; line-height: 1.4; color: var(--ink-soft); overflow-wrap: anywhere; }
.pit .crit b { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--ink-faint); margin-right: 5px; }
.pit .foot { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 2px; }
.pit .uid { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--gc); filter: brightness(.8); }
.gchip {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; font-weight: 600;
  padding: 2px 6px; border-radius: 2px; color: #fff; background: var(--gc);
}
.ichip {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em;
  padding: 2px 6px; border-radius: 2px; border: 1px solid var(--line-strong); color: var(--ink-soft);
  background: var(--surface);
}
.pit .kill {
  position: absolute; top: 5px; right: 5px; width: 20px; height: 20px;
  border: 0; border-radius: 2px; background: transparent; color: var(--ink-faint);
  font-size: 18px; line-height: 1; cursor: pointer; opacity: 0;
}
.pit:hover .kill, .pit .kill:focus-visible { opacity: 1; }
.pit .kill:hover { background: var(--z-red-bg); color: var(--z-red); }

/* ---------- onglet 3 : maîtrise des données ---------- */
.vband.grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.vband.grille > label { padding: 6px 10px 7px; align-items: center; }
#formD { grid-template-rows: auto 1fr auto; }
#formD > .field.side { grid-row: 1 / span 2; }

.wall-tip { margin: -6px 0 12px; font-size: 12.5px; color: var(--ink-faint); }
.cols-d { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .cols-d { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .cols-d { grid-template-columns: 1fr; } }
.cols-d .col { min-height: 150px; }
.cols .col { transition: background .12s, border-color .12s; }
.cols .col.cible { background: var(--accent-soft); border-color: var(--accent); }

.pit-d { cursor: pointer; }
.pit-d:hover { box-shadow: 0 0 0 1px var(--gc), var(--shadow); }
.pit-d:focus-visible { outline: 2px solid var(--gc); outline-offset: 2px; }
.pit-d.drag { opacity: .4; }
.pit-d .kill { opacity: 1; color: #9A9A9A; }
.pit-d .kill:hover { color: var(--z-red); }

.pit.edit { gap: 7px; }
.pit.edit input[type="text"], .pit.edit textarea, .pit.edit select {
  font-size: 13px; padding: 6px 8px; background: var(--surface);
}
.pit.edit input[type="text"] { font-family: var(--serif); font-weight: 600; font-size: 14.5px; }
.pit.edit textarea { min-height: 64px; }
.pit.edit .bad { border-color: var(--z-red); }
.e-actions { display: flex; justify-content: flex-end; gap: 7px; }
.e-actions .btn { padding: 6px 12px; font-size: 13px; }

/* ---------- onglet 4 : monitoring ---------- */
.rappel {
  background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--r-s); padding: 10px 14px 11px; margin-bottom: 14px;
}
.rappel-lbl { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.rappel ol { list-style: none; margin: 7px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.rappel li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: baseline; font-size: 14px; line-height: 1.4; }
.rappel li b { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--accent-ink); }
#formM { grid-template-rows: auto 1fr auto; }
#formM > .field.side { grid-row: 1 / span 2; }
.cols-m { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 820px) { .cols-m { grid-template-columns: 1fr; } }
.cols-m .col { min-height: 180px; }
.switch { flex-wrap: wrap; }

/* ---------- onglet 1 sans cible de l'impact ---------- */
#formR { grid-template-rows: auto 1fr auto; }
#formR > .field.side { grid-row: 1 / span 2; }
.pit.edit textarea[data-champ] { font-family: var(--sans); }