/* Vantage RP — Actions V2. Simple et lisible : un bandeau si rien n'est possible, des cartes claires
   (icône, nom, état en clair, objets requis ✓/✗), une fiche avec un seul bouton. Règles : DESIGN.md. */

/* Couleur d'accent par catégorie */
[data-c] { --c: #A78BFA; }
[data-c="red"] { --c: #FF5A4F; }
[data-c="amber"] { --c: #F5A524; }
[data-c="green"] { --c: #2FD3A6; }
[data-c="blue"] { --c: #5AC8FA; }

.act { width: 100%; max-width: 72rem; margin: 0 auto; padding: 1.5rem var(--gutter) calc(5rem + env(safe-area-inset-bottom, 0px)); }
.act-head .h1 { font-size: 2.5rem; }
.act-sub { margin-top: .5rem; max-width: 36rem; font-size: 1.0625rem; line-height: 1.47; color: var(--text-2); }

/* ── Bandeau : la seule explication quand aucune action n'est possible ── */
.act-banner { --b: var(--violet-hi); display: flex; align-items: flex-start; gap: .875rem; margin-top: 1.5rem; padding: 1rem 1.125rem; border-radius: var(--r-card); background: var(--tile); box-shadow: inset 3px 0 0 var(--b); }
.act-banner[data-r="POLICE_BLOCKED"] { --b: #5AC8FA; }
.act-banner[data-r="RESTRAINED_HANDCUFFED"] { --b: var(--amber); }
.act-banner[data-r="RESTRAINED_COMA"] { --b: var(--red); }
.ab-ico { flex: none; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 50%; color: var(--b); background: color-mix(in srgb, var(--b) 16%, transparent); }
.ab-ico svg { width: 1.125rem; height: 1.125rem; }
.act-banner b { display: block; font-size: 1rem; font-weight: 600; }
.act-banner b + span { display: block; margin-top: .125rem; font-size: .9375rem; line-height: 1.45; color: var(--text-2); }

/* ── Filtres : catégories + « seulement ce que je peux lancer » ── */
.act-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 1.75rem 0 2rem; }
.act-cats { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.act-cats::-webkit-scrollbar { display: none; }
.act-cats button { flex: none; white-space: nowrap; }
.act-ready { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0 1rem; border-radius: var(--pill); font-size: .9375rem; font-weight: 500; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line); transition: background-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms var(--ease-out); }
.act-ready i { position: relative; width: 1.125rem; height: 1.125rem; border-radius: .3125rem; box-shadow: inset 0 0 0 1.5px var(--muted); transition: background-color 160ms ease, box-shadow 160ms ease; }
.act-ready[aria-pressed="true"] { color: var(--text); background: rgba(139,92,246,.14); box-shadow: inset 0 0 0 1px rgba(139,92,246,.45); }
.act-ready[aria-pressed="true"] i { background: var(--violet); box-shadow: none; }
.act-ready[aria-pressed="true"] i::after { content: ''; position: absolute; left: .375rem; top: .1875rem; width: .3125rem; height: .5625rem; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.act-ready:active { transform: scale(.97); }

/* ── Sections ── */
.a-sec + .a-sec { margin-top: 2.75rem; }
.a-head { display: flex; align-items: center; gap: .75rem; }
.a-head .h4 { display: inline-flex; align-items: center; gap: .625rem; }
.a-head .h4::before { content: ''; width: .25rem; height: 1.125rem; border-radius: 2px; background: var(--c); box-shadow: 0 0 .75rem color-mix(in srgb, var(--c) 60%, transparent); }
.a-desc { margin-top: .25rem; font-size: .9375rem; color: var(--muted); }
.a-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: .75rem; margin-top: 1rem; }

/* ── Carte d'une action ── */
.a-card { position: relative; display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) auto; grid-template-areas: "ico txt chev" "ico reqs chev"; column-gap: .875rem; row-gap: .5rem; align-items: center; padding: 1rem 1rem 1rem 1rem; border-radius: var(--r-card); text-align: left; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)), var(--tile); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px rgba(255,255,255,.05); transition: transform 160ms var(--ease-out), box-shadow 160ms ease, background-color 160ms ease; }
.a-card:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .a-card:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent); } }
.a-ico { grid-area: ico; align-self: start; width: 3.25rem; height: 3.25rem; display: grid; place-items: center; border-radius: .875rem; font-size: 1.625rem; line-height: 1; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c) 26%, transparent), transparent 72%), #17161B; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 28%, transparent); }
.a-txt { grid-area: txt; display: flex; flex-direction: column; gap: .1875rem; min-width: 0; }
.a-t { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.012em; line-height: 1.25; }
.a-s { display: inline-flex; align-items: center; gap: .4375rem; font-size: .875rem; line-height: 1.35; color: var(--muted); }
.a-s::before { content: ''; flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; opacity: .9; }
.a-card[data-state="ready"] .a-s { color: var(--green); }
.a-card[data-state="missing"] .a-s { color: #FF8A80; }
.a-card[data-state="wait"] .a-s, .a-card[data-state="busy"] .a-s { color: var(--amber); }
.a-card[data-state="wait"] .a-s { font-variant-numeric: tabular-nums; }
.a-card[data-state="blocked"] .a-ico, .a-card[data-state="soon"] .a-ico { filter: grayscale(.85); opacity: .6; }
.a-card[data-state="soon"] .a-t { color: var(--text-2); }
.a-card[data-state="ready"] { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px rgba(48,209,88,.28); }
.a-reqs { grid-area: reqs; display: flex; flex-wrap: wrap; gap: .375rem; }
.rq { position: relative; width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border-radius: 50%; background: #1C1B20; }
.rq img { width: 72%; height: 72%; object-fit: contain; }
.rq i { width: .375rem; height: .375rem; border-radius: 50%; background: currentColor; }
.rq.ok { box-shadow: inset 0 0 0 1.5px rgba(48,209,88,.7); color: var(--green); }
.rq.no { box-shadow: inset 0 0 0 1.5px rgba(255,69,58,.75); color: var(--red); }
.rq.no img { filter: grayscale(.6); opacity: .7; }
.a-chev { grid-area: chev; width: .5rem; height: .5rem; margin-right: .25rem; border: solid var(--muted); border-width: 0 2px 2px 0; transform: rotate(-45deg); opacity: .7; }

/* ── Fiche ── */
.d-ico.a-big { font-size: 2.25rem; line-height: 1; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c) 30%, transparent), transparent 72%), #17161B; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 32%, transparent); }
.d-top .caption { display: block; text-transform: uppercase; letter-spacing: .06em; font-size: .6875rem; font-weight: 600; }
.a-status { --s: var(--muted); margin-top: 1.25rem; padding: .875rem 1rem; border-radius: var(--r-card); background: var(--tile); box-shadow: inset 3px 0 0 var(--s); }
.a-status.ok { --s: var(--green); } .a-status.no { --s: var(--red); } .a-status.wait { --s: var(--amber); }
.a-status b { display: block; font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.a-status.ok b { color: var(--green); } .a-status.no b { color: #FF8A80; } .a-status.wait b { color: var(--amber); }
.a-status span { display: block; margin-top: .25rem; font-size: .875rem; line-height: 1.45; color: var(--text-2); }
.a-status a { color: var(--violet-hi); white-space: nowrap; }
.dlg-in .group .row { padding: .875rem 1rem; min-height: 3rem; }
/* Le bouton « Démarrer » reste visible en bas de la fiche, même quand la liste des gains est longue */
.a-cta { position: sticky; bottom: -1.75rem; z-index: 1; margin: 1.5rem -1.75rem -1.75rem; padding: 1rem 1.75rem 1.75rem; background: linear-gradient(180deg, rgba(22,21,25,0), #161519 1.25rem); }
.dlg-in .group .row .t { font-size: .9375rem; font-weight: 500; }
.row .end.ac-green { color: var(--green); }
.row .end.ac-red { color: #FF8A80; }
.row .ico .noimg, .rq .noimg { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; opacity: .8; }

/* ── Téléphone ── */
@media (max-width: 734px) {
  .act { padding-top: 1rem; }
  .act-head .h1 { font-size: 2rem; }
  .act-sub { font-size: .9375rem; }
  .act-bar { gap: .5rem; margin: 1.25rem 0 1.5rem; }
  .act-cats { width: 100%; }
  /* Trop d'onglets pour la largeur : fondu à droite pour montrer qu'on peut faire défiler */
  .act-cats.more { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent); }
  .act-ready { width: 100%; justify-content: center; }
  .a-grid { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .a-card { padding: .875rem; column-gap: .75rem; }
  .a-sec + .a-sec { margin-top: 2rem; }
  .a-cta { bottom: calc(-1.5rem - env(safe-area-inset-bottom, 0px)); margin: 1.25rem -1.25rem calc(-1.5rem - env(safe-area-inset-bottom, 0px)); padding: 1rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .a-card, .act-ready { transition: none; }
  .a-card:active, .act-ready:active { transform: none; }
}