/* ═══════════════════════════════════════════════════════════════
   Ma ZP — « District de nuit »
   Nuit indigo, lumière de lampadaire (sodium) pour agir,
   bleu gyrophare pour informer. Titres en Bricolage Grotesque,
   texte en Instrument Sans, chiffres tabulaires partout.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --bg: #0C1124;
  --bg-deep: #080C1B;
  --surface: #141B33;
  --surface2: #1C2442;
  --surface3: #243050;
  --line: #29345A;
  --hair: rgba(190, 205, 255, .08);
  --text: #EDF0FA;
  --text2: #C3C9DE;
  --muted: #96A0BF;
  --faint: #67719A;
  --amber: #FFB23F;
  --amber-hi: #FFC970;
  --amber-ink: #241400;
  --amber-bg: rgba(255, 178, 63, .11);
  --amber-line: rgba(255, 178, 63, .40);
  --amber-soft: #E9C894;
  --blue: #63B0FF;
  --blue-soft: #9DCBFF;
  --blue-bg: rgba(99, 176, 255, .10);
  --green: #3DD39A;
  --green-soft: #78E2B8;
  --red: #FF6E6A;
  --red-soft: #FF9E99;
  --red-bg: rgba(255, 110, 106, .10);
  --red-line: rgba(255, 110, 106, .40);
  --nav: rgba(18, 24, 48, .86);
  --paper: #F4EFE3;
  --paper2: #EAE3D2;
  --ink: #1D1A15;
  --ink2: #3A352C;
  --ink3: #5E574A;
  --paper-rule: #CFC5B0;
  --press: #9A2B1F;
  --display: 'Bricolage Grotesque', 'Arial Narrow', system-ui, sans-serif;
  --body: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Instrument Sans', system-ui, sans-serif; /* chiffres : tabulaires, voir body */
  --code: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* codes, chiffrements */
  --serif: 'Fraunces', Georgia, serif;
  --r-lg: 22px;
  --r-md: 14px;
  --r-sm: 10px;
  --lift: 0 1px 0 rgba(255, 255, 255, .04) inset;
  --float: 0 18px 40px -12px rgba(0, 0, 0, .65), 0 2px 8px rgba(0, 0, 0, .3);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--bg-deep); }
html, body { margin: 0; color: var(--text); font-family: var(--body); -webkit-text-size-adjust: 100%; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { min-height: 100vh; min-height: 100dvh; background: var(--bg); }
/* Halo de ville au-dessus de l'écran : un seul dégradé, fixe, très léger */
body::before { content: ''; position: fixed; inset: 0 0 auto; height: 60vh; pointer-events: none; z-index: 0;
  background: radial-gradient(90% 70% at 50% -18%, rgba(98, 88, 220, .20), rgba(98, 88, 220, 0) 70%), radial-gradient(60% 40% at 85% -5%, rgba(255, 178, 63, .07), transparent 70%); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: var(--amber); -webkit-tap-highlight-color: transparent; }
a:hover { color: var(--amber-hi); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
::selection { background: rgba(255, 178, 63, .35); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

#app { max-width: 480px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; position: relative; z-index: 1; }
main.screen { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 20px 16px 110px; }

/* Barre d'onglets : dock flottant */
nav.tabs { position: fixed; bottom: calc(8px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: calc(100% - 16px); max-width: 464px; display: flex;
  background: var(--nav); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--hair); border-radius: 24px; padding: 6px 4px; z-index: 10; box-shadow: var(--float); }
nav.tabs a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; text-decoration: none; color: var(--muted); font-size: 12px; font-weight: 600; min-height: 50px; justify-content: center; position: relative; border-radius: 16px; transition: color .15s; }
nav.tabs a > svg { padding: 3px 12px; box-sizing: content-box; border-radius: 999px; transition: background-color .15s; }
nav.tabs a[aria-current="page"] { color: var(--text); }
nav.tabs a[aria-current="page"] > svg { background: var(--amber-bg); color: var(--amber); }
nav.tabs .dot { position: absolute; top: 4px; right: calc(50% - 17px); width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px var(--surface); }

/* Titres */
.kicker { font-size: 12.5px; color: var(--amber-soft); font-weight: 600; letter-spacing: .1px; }
h1.big { margin: 0; font-family: var(--display); font-weight: 800; font-size: 31px; letter-spacing: -.6px; line-height: 1.02; font-variation-settings: 'opsz' 96; text-wrap: balance; }
h1.brand { margin: 0; font-family: var(--display); font-weight: 800; font-size: 30px; letter-spacing: -1px; color: var(--text); line-height: 1; font-variation-settings: 'opsz' 96; }
h1.brand::after { content: ''; display: inline-block; width: .2em; height: .2em; margin-left: .06em; border-radius: 50%; background: var(--amber); box-shadow: 0 0 12px var(--amber); vertical-align: baseline; }
h2.section { margin: 4px 0 0; font-family: var(--display); font-size: 17px; color: var(--text); font-weight: 700; letter-spacing: -.2px; }
h2.card-title { margin: 0; font-family: var(--display); font-size: 17px; font-weight: 700; letter-spacing: -.2px; }
.sub { margin: 0; font-size: 13px; color: var(--muted); }
.row { display: flex; align-items: center; gap: 8px; }
.between { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.col { display: flex; flex-direction: column; gap: 6px; }
.grow { flex: 1; min-width: 0; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; }
.code { font-family: var(--code); font-weight: 500; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.tiny { font-size: 12px; }
.ok { color: var(--green-soft); }
.bad { color: var(--red-soft); }
.warn { color: var(--amber); }

/* Cartes : une surface principale, des « puits » plus sombres à l'intérieur */
.card { background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0) 120px), var(--surface); border: 1px solid var(--hair); border-radius: var(--r-lg); padding: 16px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--lift); }
.card.tight { padding: 12px 14px; border-radius: 16px; gap: 7px; }
.card.amber { background: linear-gradient(180deg, rgba(255, 178, 63, .09), rgba(255, 178, 63, .04)), var(--surface); border-color: var(--amber-line); }
.card.red { background: linear-gradient(180deg, rgba(255, 110, 106, .10), rgba(255, 110, 106, .04)), var(--surface); border-color: var(--red-line); }
.card.green { background: linear-gradient(180deg, rgba(61, 211, 154, .11), rgba(61, 211, 154, .04)), var(--surface); border-color: rgba(61, 211, 154, .42); }
a.card { text-decoration: none; color: var(--text); }
.pill { font-family: var(--mono); font-size: 12px; font-weight: 600; background: var(--surface2); border: 1px solid var(--hair); border-radius: 999px; padding: 4px 10px; white-space: nowrap; color: var(--text2); }
.pill.amber { background: var(--amber-bg); border-color: var(--amber-line); color: var(--amber); }
.pill.green { background: rgba(61, 211, 154, .12); border-color: rgba(61, 211, 154, .42); color: var(--green-soft); }
.tag { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 9px; }

.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tile { background: var(--bg); border: 1px solid var(--hair); border-radius: var(--r-md); padding: 10px 11px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tile .l { font-size: 12px; color: var(--muted); font-weight: 500; }
.tile .v { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -.4px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tile .s { font-size: 12px; color: var(--muted); }

.gauge { display: flex; flex-direction: column; gap: 5px; }
.gauge .bar { height: 8px; background: var(--bg); border-radius: 999px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--hair); }
.gauge .bar > div { height: 8px; border-radius: 999px; background-image: linear-gradient(90deg, rgba(0, 0, 0, .18), rgba(255, 255, 255, .12)); }

/* Boutons */
.btn { min-height: 48px; border-radius: var(--r-md); border: 1px solid var(--hair); background: var(--surface2); color: var(--text); font-weight: 600; font-size: 14.5px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; box-shadow: var(--lift); transition: background-color .15s, border-color .15s, transform .1s; }
.btn:hover { background: var(--surface3); color: var(--text); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: linear-gradient(180deg, var(--amber-hi), var(--amber)); color: var(--amber-ink); border: none; font-weight: 700; font-size: 16px; box-shadow: 0 1px 0 rgba(255, 255, 255, .45) inset, 0 8px 22px -10px rgba(255, 178, 63, .7); }
.btn.primary:hover { background: linear-gradient(180deg, #FFD488, var(--amber-hi)); color: var(--amber-ink); }
.btn.primary:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.outline { background: var(--amber-bg); border: 1px solid var(--amber-line); color: var(--amber); font-weight: 700; box-shadow: none; }
.btn.outline:hover { background: rgba(255, 178, 63, .18); color: var(--amber-hi); }
.btn.small { min-height: 44px; font-size: 13.5px; border-radius: 12px; padding: 0 12px; }
.btn.block { width: 100%; }
.btn.danger { border-color: var(--red-line); color: var(--red-soft); background: var(--red-bg); }
.helpbtn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--hair); background: var(--surface2); color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1; padding: 0; margin-left: 4px; }
.helpbtn[aria-expanded="true"] { border-color: var(--amber); color: var(--amber); }
.iconbtn { width: 40px; height: 40px; border-radius: 12px; border: none; background: transparent; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; }
.iconbtn:hover { background: var(--surface2); color: var(--text); }
.seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.seg button { min-height: 54px; border-radius: var(--r-md); border: 1px solid var(--hair); background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px; }
.seg button[aria-pressed="true"], .seg button[role="tab"][aria-selected="true"] { border-color: var(--amber-line); background: var(--amber-bg); box-shadow: inset 0 0 0 1px var(--amber-line); }
.seg button[aria-pressed="true"] .t, .seg button[role="tab"][aria-selected="true"] .t { color: var(--amber); }
.seg button .t { font-size: 13.5px; font-weight: 700; }
.seg button .d { font-size: 12px; color: var(--muted); }
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.choices.one { grid-template-columns: 1fr; }
.choice { min-height: 50px; border-radius: var(--r-md); border: 1px solid var(--hair); background: var(--surface2); padding: 8px 12px; font-weight: 600; font-size: 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; box-shadow: var(--lift); }
.choice[aria-pressed="true"] { border-color: var(--amber); background: var(--amber-bg); color: var(--amber-hi); box-shadow: inset 0 0 0 1px var(--amber); }
.choice .s { font-size: 12px; color: var(--muted); font-weight: 500; }

/* Formulaires */
label.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text2); font-weight: 600; }
input.text, select.text { min-height: 48px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bg); color: var(--text); font-size: 16px; padding: 0 14px; width: 100%; transition: border-color .15s, box-shadow .15s; }
input.text:focus, select.text:focus { border-color: var(--amber); outline: none; box-shadow: 0 0 0 3px var(--amber-bg); }
input[type="range"] { width: 100%; margin: 0; accent-color: var(--amber); height: 26px; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { width: 40px; height: 40px; border-radius: 12px; border: 2px solid transparent; }
.swatch[aria-pressed="true"] { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg) inset; }
.swatch:disabled { opacity: .3; cursor: not-allowed; }
.stepper { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; background: var(--bg); border: 1px solid var(--hair); border-radius: 14px; padding: 3px; }
.stepper button { width: 42px; height: 42px; border-radius: 11px; border: none; background: var(--surface2); font-size: 18px; font-weight: 700; color: var(--text); }
.stepper button:hover:not([disabled]) { background: var(--surface3); }
.stepper .n { font-family: var(--display); font-weight: 700; font-size: 17px; min-width: 30px; text-align: center; }

.list-row { display: flex; gap: 10px; align-items: center; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-md); padding: 11px 13px; font-size: 13.5px; text-decoration: none; color: var(--text); }
a.list-row:hover { background: var(--surface2); color: var(--text); }
.bullet { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.badge-num { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; background: var(--amber); color: var(--amber-ink); font-family: var(--mono); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; }

.statement { background: var(--bg); border: 1px solid var(--hair); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.statement .who { font-size: 12px; font-weight: 700; color: var(--amber-soft); }
.statement .what { font-size: 14.5px; line-height: 1.45; }
.codebox { font-family: var(--code); font-size: 17px; letter-spacing: 1px; line-height: 1.6; background: var(--paper); color: var(--ink); border-radius: 12px; padding: 12px 14px; word-spacing: 6px; }
.alphabet { font-family: var(--code); font-size: 12px; color: var(--muted); display: grid; grid-template-columns: repeat(13, 1fr); gap: 2px; text-align: center; }
.alphabet span { background: var(--surface2); border-radius: 5px; padding: 3px 0; }


.toast { position: fixed; left: 50%; top: calc(12px + env(safe-area-inset-top)); transform: translateX(-50%); background: var(--text); color: var(--bg); padding: 11px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; z-index: 70; max-width: 90vw; box-shadow: var(--float); pointer-events: none; animation: toastIn .25s cubic-bezier(.2,.9,.3,1.2); }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, -10px); } }

/* Gazette */
.paper { background: var(--paper); color: var(--ink); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.paper .mast { display: flex; flex-direction: column; align-items: center; gap: 4px; border-bottom: 2px solid var(--ink); padding-bottom: 8px; }
.paper .mast h1 { margin: 0; font-family: var(--serif); font-weight: 800; font-size: 32px; letter-spacing: -.3px; line-height: 1; text-align: center; }
.paper .meta { width: 100%; display: flex; justify-content: space-between; font-family: var(--mono); font-size: 12px; color: var(--ink3); border-top: 1px solid var(--paper-rule); padding-top: 4px; }
.paper .k { font-size: 12px; font-weight: 700; color: var(--press); text-transform: uppercase; letter-spacing: .8px; }
.paper h2 { margin: 0; font-family: var(--serif); font-weight: 800; font-size: 22px; line-height: 1.15; }
.paper h3 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 16px; line-height: 1.2; }
.paper p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink2); }
.paper .rule { height: 1px; background: var(--paper-rule); }
.paper .box { background: var(--paper2); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; }
.paper .rank { display: flex; justify-content: space-between; font-size: 13px; }
.paper .up { color: #2F6B45; }
.paper .down { color: var(--press); }

table.rank { width: 100%; border-collapse: collapse; font-size: 13px; }
table.rank th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 6px 4px; border-bottom: 1px solid var(--line); }
table.rank td { padding: 10px 4px; border-bottom: 1px solid var(--hair); }
table.rank tr.me td { color: var(--amber); font-weight: 700; }
table.rank td.num, table.rank th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }

.center-screen { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 24px 20px; }
.demo-banner { position: relative; z-index: 2; background: rgba(255, 178, 63, .08); border-bottom: 1px solid var(--amber-line); color: var(--amber-soft); font-size: 12px; text-align: center; padding: 7px 12px; }
.divider { display: flex; align-items: center; gap: 10px; color: var(--faint); font-size: 12px; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }

@media (min-width: 520px) {
  #app { border-left: 1px solid var(--hair); border-right: 1px solid var(--hair); }
}

/* Enquête et carnet */
.good { color: var(--green-soft); }
.seg2, .seg4 { display: grid; gap: 4px; background: var(--bg); border: 1px solid var(--hair); border-radius: 16px; padding: 4px; }
.seg2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.seg4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.seg2 button, .seg4 button { min-height: 44px; border: none; border-radius: 12px; background: transparent; color: var(--text2); font: 600 13px var(--body); }
.seg2 button[aria-selected="true"], .seg4 button[aria-selected="true"] { background: var(--surface3); color: var(--text); font-weight: 700; box-shadow: var(--lift), 0 2px 8px rgba(0, 0, 0, .3); }
.mark { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--bg); color: var(--muted); font: 700 18px var(--display); display: inline-flex; align-items: center; justify-content: center; }
.mark.m-x { border-color: var(--red-line); background: rgba(255, 110, 106, .12); color: var(--red-soft); }
.mark.m-q { border-color: var(--amber-line); background: var(--amber-bg); color: var(--amber); }
.mark.m-ok { border-color: rgba(61, 211, 154, .6); background: rgba(61, 211, 154, .14); color: var(--green-soft); }
span.mark { width: 32px; height: 32px; font-size: 15px; }
.notes { min-height: 150px; width: 100%; box-sizing: border-box; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); padding: 12px 14px; font: 500 14px/1.7 var(--code); resize: vertical; }
.notes:focus { outline: 2px solid var(--amber); outline-offset: 1px; }
.sticky-save { position: sticky; bottom: calc(90px + env(safe-area-inset-bottom)); z-index: 5; padding-top: 4px; }
.choice[disabled] { opacity: .55; }
.fipa-grid { display: grid; grid-template-columns: auto repeat(2, minmax(0, 1fr)); gap: 4px; font-size: 12px; }
.fipa-grid > span { background: var(--surface2); border-radius: 8px; padding: 6px 8px; text-align: center; }
.fipa-grid > span.h { background: transparent; color: var(--muted); font-weight: 700; }

/* Guide du joueur */
.gsec { background: var(--surface); border: 1px solid var(--hair); border-radius: 18px; }
.gsec > summary { list-style: none; cursor: pointer; min-height: 52px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; font: 700 17px var(--display); letter-spacing: -.2px; }
.gsec > summary::-webkit-details-marker { display: none; }
.gsec > summary svg { transition: transform .15s; color: var(--muted); }
.gsec[open] > summary svg { transform: rotate(90deg); }
.gsec[open] > summary { border-bottom: 1px solid var(--hair); }
.gbody { padding: 12px 14px 14px; font-size: 14px; line-height: 1.5; color: var(--text2); display: flex; flex-direction: column; gap: 8px; }
.gbody p { margin: 0; }
.gbody h3 { margin: 8px 0 0; font: 700 15px var(--display); color: var(--amber-soft); }
.gbody ul, .gbody ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.gbody strong { color: var(--text); }
.gtable { overflow-x: auto; border: 1px solid var(--hair); border-radius: 12px; }
.gtable table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.gtable th { text-align: left; background: var(--surface2); color: var(--muted); font-weight: 700; padding: 7px 9px; }
.gtable td { padding: 7px 9px; border-top: 1px solid var(--line); vertical-align: top; }
.gnote { background: var(--amber-bg); border: 1px solid var(--amber-line); color: var(--amber-soft); border-radius: 12px; padding: 8px 10px; font-size: 13px; }
.guide input[type="search"] { width: 100%; box-sizing: border-box; }

/* Grades, faillite */
.insigne { color: var(--amber); font-size: 12px; letter-spacing: 1px; }
.paper .insigne { color: #9A6B10; }
.chantier { margin-top: 6px; background: repeating-linear-gradient(-45deg, #F2B544 0 10px, #1D1A15 10px 20px); padding: 3px; border-radius: 4px; }
.chantier strong { font-family: var(--mono); }
.paper .chantier { color: #1D1A15; font: 700 12px var(--body); text-align: center; }
.paper .chantier { background: #F2B544; border: 2px dashed #1D1A15; }

/* Tableau de bord du jour */
.todo { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 16px; background: var(--surface2); border: 1px solid var(--hair); color: var(--text); text-decoration: none; min-height: 52px; box-shadow: var(--lift); transition: background-color .15s; }
.todo:hover { background: var(--surface3); color: var(--text); }
.todo > svg:last-child { color: var(--faint); flex-shrink: 0; }
.todo .box { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--amber-line); background: var(--amber-bg); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.todo.done { background: transparent; box-shadow: none; border-style: dashed; }
.todo.done .box { background: var(--green); border-color: var(--green); color: var(--bg); }
.todo.done span:first-child + span span:first-child { color: var(--text2); }
.delta { font-family: var(--mono); font-size: 12px; font-weight: 700; margin-left: 4px; }
.delta.up { color: var(--green-soft); }
.delta.down { color: var(--red-soft); }
.savebar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(82px + env(safe-area-inset-bottom)); width: calc(100% - 24px); max-width: 456px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 16px; background: rgba(43, 33, 22, .92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--amber-line); border-radius: 20px; z-index: 11; box-shadow: var(--float); }
main.screen { padding-bottom: 160px; }
.tile .s { font-size: 12px; }
.pli { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px; background: transparent; border: none; padding: 0; color: var(--text); }
.pli svg { color: var(--muted); transition: transform .15s; }
.stepper button[disabled] { opacity: .35; }
.segl { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 12px; color: var(--text2); font: 600 14px var(--body); text-decoration: none; }
.segl[aria-selected="true"] { background: var(--surface3); color: var(--text); font-weight: 700; box-shadow: var(--lift), 0 2px 8px rgba(0, 0, 0, .3); }
section.card[data-k] { position: relative; }

/* Quêtes : grille de déduction, roue de décodage, coup de pouce */
.gtab { overflow-x: auto; }
.gtab table { border-collapse: collapse; width: 100%; font-size: 12px; }
.gtab caption { text-align: left; font-weight: 700; font-size: 12.5px; color: var(--text2); padding: 6px 0 4px; }
.gtab th { font-weight: 600; color: var(--text2); padding: 2px 3px; text-align: center; font-size: 12px; line-height: 1.15; }
.gtab th[scope="row"] { text-align: left; white-space: nowrap; }
.gtab td { padding: 2px; }
.gcell { width: 100%; min-width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--hair); background: var(--surface2); color: var(--muted); font-size: 17px; font-weight: 700; padding: 0; }
.gcell.no { color: var(--red); background: var(--red-bg); }
.gcell.yes { color: var(--bg); background: var(--green); border-color: var(--green); }
.roue { display: grid; grid-template-columns: repeat(13, 1fr); gap: 2px; font-family: var(--code); text-align: center; }
.roue span { display: flex; flex-direction: column; background: var(--surface2); border-radius: 4px; padding: 3px 0; font-size: 12px; color: var(--amber); }
.roue b { color: var(--muted); font-weight: 500; font-size: 12px; border-bottom: 1px solid var(--line); margin-bottom: 2px; }
.astuce summary { cursor: pointer; font-size: 13.5px; color: var(--amber); min-height: 32px; display: flex; align-items: center; }

/* Enquête : constatations, suspects et tableau Mobile · Moyen · Occasion */
.piece { display: flex; flex-direction: column; gap: 6px; background: var(--surface2); border: 1px solid var(--hair); border-radius: 14px; padding: 10px 12px; }
.piece p, .constat p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.constat { display: flex; flex-direction: column; gap: 8px; background: var(--bg); border: 1px dashed var(--line); border-radius: 14px; padding: 10px 12px; }
.constat.fait { border-style: solid; border-color: rgba(61, 211, 154, .45); }
.dem { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 46px; width: 100%; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--amber-line); background: transparent; color: var(--text); font: 600 13.5px var(--body); text-align: left; }
.dem .p { font: 600 12px var(--mono); color: var(--amber); flex-shrink: 0; }
.dem[aria-pressed="true"] { background: var(--amber-bg); border-color: var(--amber); }
.dem[aria-pressed="true"] .p { color: var(--green-soft); }
.dem:disabled { opacity: .5; border-color: var(--line); }
.dem:disabled .p { color: var(--muted); }
.dem.compact { flex-direction: column; align-items: flex-start; gap: 2px; padding: 6px 10px; }
.dem-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.suspect { display: flex; flex-direction: column; gap: 8px; background: var(--surface); border: 1px solid var(--hair); border-radius: 18px; padding: 10px 12px; }
.suspect.exclu { opacity: .6; }
.suspect.accuse { border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-bg); }
.suspect-tete { display: flex; gap: 10px; align-items: center; background: none; border: none; color: inherit; padding: 0; text-align: left; min-height: 44px; width: 100%; font: inherit; }
.suspect-tete .nom { font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: -.2px; }
.mmo-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.mmo { display: flex; justify-content: space-between; align-items: center; min-height: 40px; padding: 0 10px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--bg); color: var(--text2); font: 600 12.5px var(--body); }
.mmo .v { font: 700 16px var(--display); }
.mmo.m-ok { border-color: rgba(61, 211, 154, .6); background: rgba(61, 211, 154, .14); color: var(--green-soft); }
.mmo.m-x { border-color: var(--red-line); background: rgba(255, 110, 106, .12); color: var(--red-soft); }

/* Écran de chargement : plein écran fixe (pas de barre de défilement), bloc logo un peu au-dessus
   du centre, silhouette de Mons en bas dont les fenêtres s'allument au fil des étapes. */
.loader { position: fixed; inset: 0; z-index: 50; align-items: center; justify-content: center; text-align: center; gap: 0; overflow: hidden;
  padding: 24px 20px calc(min(51vw, 38vh) + 24px + env(safe-area-inset-bottom)); background: var(--bg); }
.loader > * { position: relative; }
.loader-coeur { display: flex; flex-direction: column; align-items: center; width: 100%; }
.loader-halo { position: absolute; left: 50%; top: 42%; width: 420px; height: 420px; transform: translate(-50%, -58%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(110, 96, 240, .28), rgba(255, 178, 63, .06) 60%, transparent); pointer-events: none; animation: halo 3.2s ease-in-out infinite; }
.lightbar { display: flex; gap: 6px; padding: 5px; border-radius: 999px; background: var(--bg-deep); border: 1px solid var(--hair); margin-bottom: 22px; }
.lightbar span { width: 34px; height: 10px; border-radius: 999px; opacity: .22; }
.lb-blue { background: var(--blue); animation: flashA 1.1s steps(1) infinite; }
.lb-amber { background: var(--amber); animation: flashB 1.1s steps(1) infinite; }
h1.brand-xl { font-size: clamp(72px, 24vw, 112px); letter-spacing: -4px; line-height: .9; }
.loader h1.brand::after { animation: respire 2.6s ease-in-out infinite; transform-origin: 50% 50%; }
.loader-tag { margin: 12px 0 0; font-size: 14px; color: var(--muted); font-weight: 500; }
.loader-bar { position: relative; width: min(220px, 70%); height: 3px; margin-top: 36px; border-radius: 3px; background: var(--line); overflow: hidden; }
.loader-bar span { position: relative; display: block; height: 100%; border-radius: 3px; overflow: hidden;
  background: linear-gradient(90deg, rgba(255, 178, 63, .35), var(--amber)); box-shadow: 0 0 10px rgba(255, 178, 63, .5); transition: width .7s cubic-bezier(.3, .7, .3, 1); }
.loader-bar span::after { content: ''; position: absolute; inset: 0; width: 60%; background: linear-gradient(90deg, transparent, rgba(255, 240, 210, .75), transparent); animation: sweep 1.6s ease-in-out infinite; }
.loader-msg { margin: 14px 0 0; font-size: 14px; color: var(--text); font-weight: 500; min-height: 1.4em; }
.loader-ville { position: absolute; left: 0; right: 0; bottom: env(safe-area-inset-bottom); width: 100%; height: min(51vw, 38vh); overflow: visible; pointer-events: none; display: block; }
.loader::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: env(safe-area-inset-bottom); background: #070A17; }
.lv-loin { fill: #161D3C; }
.lv-mi { fill: #111834; }
.lv-pres { fill: #070A17; }
.lv-horloge { fill: var(--amber-soft); opacity: .55; filter: drop-shadow(0 0 3px rgba(255, 178, 63, .9)); }
.lv-fen { fill: var(--amber); opacity: .07; transition: opacity .9s ease, fill .9s ease; }
.lv-fen.on { opacity: .9; fill: var(--amber-hi); filter: drop-shadow(0 0 2.5px rgba(255, 178, 63, .85)); }
/* Sortie : le logo remonte vers l'en-tête, la ville descend, l'écran s'efface sur le jeu déjà affiché */
.loader-sortie { z-index: 9999; pointer-events: none; animation: ld-fondu .6s ease .12s both; }
.loader-sortie .loader-coeur { animation: ld-monte .6s cubic-bezier(.5, 0, .2, 1) both; }
.loader-sortie .loader-ville { animation: ld-descend .55s ease-in both; }
.loader-sortie .loader-halo { animation: none; }
@keyframes ld-fondu { to { opacity: 0; } }
@keyframes ld-monte { to { transform: translateY(-34vh) scale(.42); opacity: 0; } }
@keyframes ld-descend { to { transform: translateY(40%); } }
@keyframes respire { 0%, 100% { transform: scale(1); box-shadow: 0 0 8px var(--amber); } 50% { transform: scale(1.18); box-shadow: 0 0 22px 2px var(--amber); } }
@keyframes sweep { from { transform: translateX(-110%); } to { transform: translateX(260%); } }
@keyframes halo { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@keyframes flashA { 0%, 20% { opacity: 1; box-shadow: 0 0 14px var(--blue); } 10%, 30%, 100% { opacity: .22; box-shadow: none; } }
@keyframes flashB { 0%, 60%, 100% { opacity: .22; box-shadow: none; } 50%, 70% { opacity: 1; box-shadow: 0 0 14px var(--amber); } }
@media (prefers-reduced-motion: reduce) {
  .loader-halo, .lb-blue, .lb-amber, .loader-bar span::after, .loader h1.brand::after { animation: none; }
  .lightbar span { opacity: .8; }
  .loader-sortie .loader-coeur, .loader-sortie .loader-ville { animation: none; }
}

/* Bouton d'aide « ? » et fenêtre d'aide rapide */
.help { width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--hair); background: var(--surface2); color: var(--muted);
  font: 700 12px/1 var(--body); display: inline-flex; align-items: center; justify-content: center; padding: 0; position: relative; }
.help::after { content: ''; position: absolute; inset: -12px; } /* zone de toucher élargie */
.help:hover { color: var(--amber); border-color: var(--amber-line); }
.aide-wrap { position: fixed; inset: 0; z-index: 40; background: rgba(6, 9, 22, .72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: flex; justify-content: center; align-items: flex-start;
  padding: calc(16px + env(safe-area-inset-top)) 16px 16px; overflow-y: auto; animation: aideFond .15s ease-out; }
.aide { width: 100%; max-width: 440px; gap: 10px; border-color: var(--hair); background: var(--surface); box-shadow: var(--float); animation: aideDescend .2s ease-out; }
.aide-titre { margin: 0; font-family: var(--display); font-size: 24px; font-weight: 800; letter-spacing: -.5px; color: var(--text); line-height: 1.05; }
.aide-intro { margin: 0; font-size: 14px; line-height: 1.45; }
.aide-liste { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; font-size: 13px; line-height: 1.4; color: var(--text2, var(--text)); }
.aide-liste strong { color: var(--text); }
.aide-sens { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font-size: 13px; line-height: 1.4; padding: 10px 12px; border-radius: 12px; background: var(--bg); }
.aide-sens .up, .aide-sens .down { font-family: var(--mono); font-size: 12px; font-weight: 700; white-space: nowrap; padding-top: 2px; }
.aide-sens .up { color: var(--green-soft); }
.aide-sens .down { color: var(--red-soft); }
.aide-tour { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--hair); }
.aide-tour .kicker { margin-bottom: 4px; }
.aide-l { gap: 10px; padding: 3px 0; border-top: 1px solid var(--hair); line-height: 1.35; }
.aide-l:first-of-type { border-top: 0; }
.aide-l > span:last-child { flex-shrink: 0; text-align: right; }
.aide-sous { padding-left: 12px; margin: 0 0 2px; border-left: 2px solid var(--line); }
.aide-sous .aide-l { font-size: 12px; color: var(--text2, var(--text)); }
.aide-hier { padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px dashed var(--line); }
.aide-det summary { cursor: pointer; color: var(--blue-soft); padding: 4px 0; }
.ipz-table .help { margin-left: 4px; vertical-align: middle; }
.aide-conseil { margin: 0; font-size: 13px; color: var(--amber-soft); }
@keyframes aideFond { from { opacity: 0; } }
@keyframes aideDescend { from { opacity: 0; transform: translateY(-12px); } }
@media (prefers-reduced-motion: reduce) { .aide-wrap, .aide { animation: none; } }

/* Trois boutons de même taille (HP : Rapport, Gazette, Classement) */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.trio .btn { flex-direction: column; gap: 5px; min-height: 70px; padding: 8px 4px; font-size: 13px; text-align: center; border-radius: 18px; }
.trio .btn svg { color: var(--amber); }

/* Onglets de classement */
.segn { display: grid; gap: 4px; background: var(--bg); border: 1px solid var(--hair); border-radius: 16px; padding: 4px; }
.segn button { min-height: 44px; min-width: 0; border: none; border-radius: 12px; background: transparent; color: var(--text2); font: 600 13px var(--body); padding: 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.segn button[aria-selected="true"] { background: var(--surface3); color: var(--text); font-weight: 700; box-shadow: var(--lift), 0 2px 8px rgba(0, 0, 0, .3); }

/* Lien de retour vers l'HP : grand et facile à toucher */
.backlink { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px 0 10px; margin-left: -4px;
  border-radius: 999px; border: 1px solid var(--hair); background: var(--surface); color: var(--text); font-weight: 600; font-size: 14px; text-decoration: none; }
.backlink svg { color: var(--amber); }
.backlink:hover { border-color: var(--amber-line); color: var(--text); }

/* Onglets Radio / Diplomatie toujours visibles en haut de l'écran */
.onglets-flottants { position: sticky; top: 0; z-index: 12; margin: -18px -16px 0; padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: rgba(12, 17, 36, .82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--hair); }
.onglets-flottants .seg2 { box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.segl { position: relative; gap: 6px; }
.pastille { width: 8px; height: 8px; border-radius: 50%; background: var(--red); display: inline-block; flex-shrink: 0; }

/* Onglets à trois (Radio / Privé / Diplomatie) */
.seg3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; background: var(--bg); border: 1px solid var(--hair); border-radius: 16px; padding: 4px; }
.onglets-flottants .seg3 { box-shadow: 0 6px 18px rgba(0,0,0,.35); }

/* Messages privés */
.bulle { max-width: 85%; align-self: flex-start; display: flex; flex-direction: column; gap: 4px; padding: 10px 13px; border-radius: 18px 18px 18px 6px; background: var(--surface2); border: 1px solid var(--hair); }
.bulle.moi { align-self: flex-end; border-radius: 18px 18px 6px 18px; background: var(--amber-bg); border-color: var(--amber-line); }
.bulle.moi .tiny { text-align: right; }
.compteur { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--red); color: #fff; font: 700 12px/22px var(--body); text-align: center; flex-shrink: 0; }

/* Appel à renfort */
.renfort-ctrl { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 14px; background: var(--bg); border: 1px solid var(--hair); }

/* Carte */
.plan-cadre { position: relative; background: #11172C; border: 1px solid var(--hair); border-radius: var(--r-lg); padding: 4px; overflow: hidden; }
.plan-zoom { display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: rgba(12, 17, 36, .82); border: 1px solid var(--hair); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.plan-zoom button { min-height: 32px; padding: 0 10px; border: none; border-radius: 9px; background: transparent; color: var(--text2); font: 600 12px var(--body); }
.plan-zoom button[aria-pressed="true"] { background: var(--amber); color: var(--amber-ink); }

/* Barre du bas à 7 onglets : l'Enquête au centre, en bouton rond surélevé */
nav.tabs a { font-size: 12px; min-width: 0; }
nav.tabs a span:not(.rond):not(.dot) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
nav.tabs a.centre { color: var(--amber); }
nav.tabs a.centre .rond { width: 54px; height: 54px; margin-top: -30px; border-radius: 19px; background: linear-gradient(160deg, var(--amber-hi), var(--amber) 60%, #F09A1E); color: var(--amber-ink);
  display: flex; align-items: center; justify-content: center; transform: rotate(-6deg); box-shadow: 0 0 0 4px var(--bg), 0 1px 0 rgba(255,255,255,.5) inset, 0 10px 24px -6px rgba(255, 178, 63, .55); }
nav.tabs a.centre .rond svg { transform: rotate(6deg); }
nav.tabs a.centre[aria-current="page"] .rond { transform: rotate(0); box-shadow: 0 0 0 4px var(--bg), 0 0 0 7px var(--amber-line), 0 10px 24px -6px rgba(255, 178, 63, .7); }
nav.tabs a.centre[aria-current="page"] .rond svg { transform: none; }
nav.tabs a.centre .dot { top: -26px; right: calc(50% - 28px); }

/* Sections repliables */
details.repli { padding: 0; gap: 0; display: block; }
details.repli > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 14px 16px; min-height: 56px; }
details.repli > summary::-webkit-details-marker { display: none; }
details.repli > summary > svg:last-child { transition: transform .15s; color: var(--muted); }
details.repli[open] > summary > svg:last-child { transform: rotate(90deg); }
details.repli > :not(summary) { margin: 0 16px 14px; }
details.repli > ul.aide-liste { margin-left: 34px; }
details.repli > summary { font-size: 14px; }

/* Tuile Budget cliquable */
.tile-btn { font: inherit; color: inherit; text-align: left; cursor: pointer; border: 1px solid var(--amber-line); }
.tile-btn:hover { border-color: var(--amber); }
/* Détail du budget */
.compta-t { margin: 8px 0 0; font-size: 13px; font-weight: 700; color: var(--amber-soft); }
.compta .mono { white-space: nowrap; }
.compta { font-size: 13px; padding: 3px 0; border-bottom: 1px dashed var(--line); gap: 12px; }
.compta.total { border-bottom: none; border-top: 1px solid var(--line); font-weight: 700; padding-top: 6px; }
/* Logistique */
.bat { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; border-radius: 14px; background: var(--bg); border: 1px solid var(--hair); }
.niv { display: inline-flex; gap: 3px; }
.niv i { width: 12px; height: 6px; border-radius: 3px; background: var(--line); }
.niv i.on { background: var(--amber); }

/* Énigmes : documents (photos, plans, échantillons d'écriture) et fiche horaire */
.figs { display: flex; flex-direction: column; gap: 10px; }
.figs.deux { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fig { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.fig-range { flex: 1; min-height: 120px; display: grid; place-items: center; border: 1px dashed var(--line); border-radius: 12px; font-size: 12px; color: var(--text2); text-align: center; padding: 8px; }
.fig figcaption { font-size: 12px; font-weight: 700; color: var(--amber-soft); }
table.horaire { width: 100%; border-collapse: collapse; font-size: 13px; }
table.horaire th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 4px; border-bottom: 1px solid var(--line); }
table.horaire td { padding: 5px 4px; border-bottom: 1px solid var(--line); }

/* Enquête : synthèse, filtres, carte du jour */
.recit > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; color: var(--amber-soft); font-weight: 600; }
.recit > summary::-webkit-details-marker { display: none; }
.recit[open] > summary svg { transform: rotate(90deg); }
.rebonds-anciens > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 10px 14px; border: 1px solid var(--amber-line, rgba(255,178,63,.35)); border-radius: 14px; color: var(--amber-soft); font-weight: 600; }
.rebonds-anciens > summary::-webkit-details-marker { display: none; }
.rebonds-anciens > summary svg { margin-left: auto; transition: transform .15s; }
.rebonds-anciens[open] > summary svg { transform: rotate(90deg); }
.aujourdhui { border-color: var(--amber-line); }
.lien { background: none; border: none; padding: 0; color: var(--amber); text-decoration: underline; font: inherit; cursor: pointer; }
.chip { min-height: 34px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--hair); background: var(--surface2); color: var(--text2); font: 600 12.5px var(--body); }
.chip.on { background: var(--amber-bg); border-color: var(--amber); color: var(--amber); }
.onglets-enq button { font-size: 12px; }
.synthese { display: flex; flex-direction: column; gap: 4px; background: var(--surface); border: 1px solid var(--hair); border-radius: 18px; padding: 8px; }
.syn-l { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 4px; align-items: center; }
.syn-h span { font-size: 12px; color: var(--muted); font-weight: 600; text-align: center; }
.syn-h span:first-child { text-align: left; padding-left: 4px; }
.syn-nom { font-weight: 700; font-size: 14px; padding-left: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.syn-nom .cel { font-style: normal; color: var(--green-soft); font-size: 11px; vertical-align: middle; }
.syn-c { min-height: 38px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--bg); color: var(--muted); font: 700 16px var(--display); }
.syn-c.m-ok { border-color: rgba(61, 211, 154, .6); background: rgba(61, 211, 154, .14); color: var(--green-soft); }
.syn-c.m-x { border-color: var(--red-line); background: rgba(255, 110, 106, .12); color: var(--red-soft); }
.syn-l.exclu .syn-nom { color: var(--muted); text-decoration: line-through; }
.syn-l.complet .syn-nom { color: var(--green-soft); }
.onglets-enq button { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; padding: 2px; }
.onglets-enq button small { font: 600 11.5px var(--mono); opacity: .75; }

/* Grande décision : tuiles */
.dchoix { padding: 10px 12px; border-radius: 14px; background: var(--amber-bg); border: 1px solid var(--amber-line); }
.dgrille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dgrille.trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dtuile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 80px; padding: 11px; border-radius: 16px; border: 1px solid var(--hair); background: var(--surface2); box-shadow: var(--lift); color: var(--text); text-align: left; font: inherit; position: relative; }
.dtuile .t { font-weight: 700; font-size: 13.5px; line-height: 1.2; }
.dtuile .d { font-size: 12px; color: var(--muted); line-height: 1.3; }
.dtuile .c { margin-top: auto; font: 700 12px var(--mono); color: var(--amber); }
.dtuile[aria-pressed="true"] { border-color: var(--amber); background: var(--amber-bg); box-shadow: inset 0 0 0 1px var(--amber); }
.dtuile[aria-pressed="true"]::after { content: '✓'; position: absolute; top: 8px; right: 10px; color: var(--amber); font-weight: 700; }
.dtuile:disabled { opacity: .45; }
.dtuile:disabled .c { color: var(--muted); }
.dtuile.tard { border-style: dashed; border-color: var(--red-line); }
.dtuile.tard .d { color: var(--red-soft); }

/* Énigmes : 4 onglets (dont le dossier noir) */
.seg.quatre { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.seg.quatre button .t { font-size: 12px; }
.seg.cinq { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.seg.cinq button { padding-left: 4px; padding-right: 4px; }
.seg.cinq button .t { font-size: 12px; white-space: nowrap; }
.seg.cinq button .d { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
/* 5 onglets sur téléphone : chaque case reste dans sa colonne (texte coupé par « … » au lieu de déborder sur la voisine). */
.seg.cinq button { min-width: 0; overflow: hidden; }
.seg.cinq button .t, .seg.cinq button .d { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.seg.cinq button.noir .t { white-space: normal; line-height: 1.15; text-align: center; }
.palier-enig { display: grid; gap: 4px; margin: -4px 2px 0; color: var(--text2); }
.palier-barre { height: 4px; border-radius: 3px; background: var(--line, rgba(255,255,255,.08)); overflow: hidden; }
.palier-barre i { display: block; height: 100%; background: var(--amber, #E6C36A); border-radius: 3px; }
.seg button.noir { background: #1A0F10; border-color: #4A2220; }
.seg button.noir .t { color: #F59A92; }
.seg button.noir[aria-pressed="true"], .seg button.noir[aria-selected="true"] { border: 1.5px solid #E0625A; background: #2A1414; }
.mode-noir .statement, .mode-noir .card.tight { border-color: #3A2222; }

/* Anti-copie des énigmes (le brouillon et la saisie restent utilisables) */
.sans-copie { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.sans-copie input, .sans-copie textarea { -webkit-user-select: text; user-select: text; }
.troll { position: fixed; inset: 0; z-index: 60; background: rgba(6, 9, 22, .9); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; text-align: center; animation: aideFond .15s ease-out; }
.troll svg { animation: trollRebond .6s ease-out; }
.troll p { margin: 0; max-width: 320px; font-size: 17px; font-weight: 600; color: var(--text); line-height: 1.4; }
@keyframes trollRebond { 0% { transform: scale(.3) rotate(-20deg); } 70% { transform: scale(1.1) rotate(6deg); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .troll svg { animation: none; } }

/* Invitation */
.partage { display: flex; flex-direction: column; gap: 8px; }
.lien-invit { font-size: 12px; padding: 9px 11px; border-radius: 12px; background: var(--bg); border: 1px solid var(--hair); color: var(--text2); overflow-wrap: anywhere; }

/* Gazette : mise en page de journal */
.journal { gap: 14px; padding: 18px 16px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.journal .mast { border-bottom: 3px double var(--ink); padding-bottom: 10px; gap: 6px; }
.journal .mast .meta { border-top: none; border-bottom: 1px solid var(--paper-rule); padding: 0 0 4px; }
.journal .mast h1 { font-size: 36px; letter-spacing: -.5px; }
.journal .devise { font-family: var(--serif); font-style: italic; font-size: 12px; color: var(--ink3); text-align: center; }
.journal .une h2 { font-size: 26px; line-height: 1.1; margin: 2px 0 6px; }
.journal .lettrine::first-letter { float: left; font-family: var(--serif); font-weight: 800; font-size: 44px; line-height: .85; padding: 4px 6px 0 0; color: var(--press); }
.journal .lettrine { font-size: 14px; }
.journal .lettrine.sans::first-letter { float: none; font: inherit; padding: 0; color: inherit; }
.journal .rule.double { height: 3px; background: none; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.journal .colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.journal .colonnes > section { display: flex; flex-direction: column; gap: 3px; }
.journal .colonnes > section:nth-child(odd) { padding-right: 8px; border-right: 1px solid var(--paper-rule); }
.journal .breve p { font-size: 12px; }
.journal .tribunal { background: #1D1A15; color: #F4EFE3; border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; border: 3px double #C9B68F; }
.journal .tribunal .k { color: #F2B544; }
.journal .tribunal h3 { color: #F4EFE3; font-size: 18px; }
.journal .tribunal p { color: #D9D0BE; }
.journal .tribunal .peine { font-family: var(--serif); font-style: italic; color: #F2B544; font-size: 14px; }
.journal .etoile { color: var(--press); }
.journal .echos p, .journal .betisier p { font-size: 12px; line-height: 1.4; }
.journal .betisier p { font-style: italic; }
.journal .box.sombre { background: #1D1A15; color: #F4EFE3; }
.journal .rapport-g summary { list-style: none; cursor: pointer; }
.journal .rapport-g summary::-webkit-details-marker { display: none; }
.journal .rapport-g summary .k::after { content: ' ▾'; }
.journal .colophon { text-align: center; font-family: var(--serif); font-style: italic; font-size: 12px; color: var(--ink3); margin: 0; }

/* Équipe et trophées */
.membre > * { min-width: 0; }
.membre { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: 16px; background: var(--bg); border: 1px solid var(--hair); }
.avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font: 700 14px var(--body); color: var(--bg); }
.surnom { font-family: var(--serif); font-style: italic; font-weight: 600; color: var(--amber); }
.xp { display: block; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; margin-top: 2px; }
.xp i { display: block; height: 100%; border-radius: 3px; }
.trophees { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.trophee { display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; border-radius: 14px; border: 1px dashed var(--line); color: var(--faint); }
.trophee .n { font-weight: 700; font-size: 12.5px; color: var(--muted); }
.trophee .d { font-size: 12px; line-height: 1.3; }
.trophee.on { border: 1px solid var(--amber-line); background: var(--amber-bg); color: var(--amber); }
.trophee.on .n { color: var(--text); }
.trophee.on .d { color: var(--text2); }
.trophee .d.gagne { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; color: var(--amber); font-weight: 600; }

/* Où sont mes agents ? */
.vent { gap: 2px; padding: 10px 12px; border-radius: 14px; background: var(--bg); border: 1px solid var(--hair); }
.vent-l { min-height: 30px; gap: 8px; }
.vent-l.tot { border-top: 1px solid var(--line); padding-top: 4px; margin-top: 2px; }
.vent-l.ok .mono { color: var(--green-soft); }
.vent-l.warn .mono { color: var(--amber); }
.vent-l.bad .mono { color: var(--red-soft); }

/* Roues de décodage à mot-clé : une couleur par roue */
.roue-c0 { color: var(--amber); }
.roue-c1 { color: var(--blue); }
.roue-c2 { color: var(--green); }
.roue-c3 { color: #F08BB4; }
.roue-lecture { font-family: var(--code); font-size: 16px; letter-spacing: 1px; line-height: 1.6; word-spacing: 6px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-weight: 600; }
.ddetail { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 14px; background: var(--bg); border: 1px solid var(--amber-line, var(--line)); }
.man-regles { font-size: 13px; line-height: 1.45; color: var(--text2); padding: 10px 12px; border-radius: 14px; background: var(--bg); border: 1px solid var(--hair); }
.pill.red { background: var(--red-bg); border-color: var(--red-line); color: var(--red-soft); }

/* Bloc visé par un lien (ex. #hp-fipa) : bref surlignage. */
.surligne > * { animation: surligne 1.8s ease-out; }
@keyframes surligne { 0%, 40% { box-shadow: 0 0 0 3px var(--amber); } 100% { box-shadow: 0 0 0 0 transparent; } }
#hp-fipa { scroll-margin-top: 16px; }

.ipz-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ipz-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 2px 4px; }
.ipz-table td { padding: 3px 4px; border-top: 1px solid var(--line); }
.ipz-table th:not(:first-child), .ipz-table td:not(:first-child) { text-align: right; }

.surligne-bloc { animation: surligne 1.8s ease-out; }

details.journal { border-top: 1px solid var(--line); }
details.journal > summary { list-style: none; cursor: pointer; display: flex; justify-content: flex-start; align-items: center; gap: 8px; min-height: 40px; }
details.journal > summary::-webkit-details-marker { display: none; }
details.journal > summary::after { content: '›'; color: var(--muted); margin-left: 6px; transition: transform .15s; }
details.journal[open] > summary::after { transform: rotate(90deg); }
details.journal .j-l { padding: 3px 0 3px 10px; gap: 10px; }
details.journal > summary > span:last-of-type { margin-left: auto; }
details.journal { padding: 0 !important; margin: 0 !important; background: none !important; border-radius: 0 !important; box-shadow: none !important; }
details.journal > summary { padding: 6px 2px !important; min-height: 38px; }

/* Carte : mes quartiers */
.qrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid var(--hair); }
.qrow:first-child { border-top: 0; }
.qrow.sel { background: rgba(255,255,255,.04); margin: 0 -12px; padding: 8px 12px; border-radius: 14px; box-shadow: inset 3px 0 0 var(--amber); }
.qnom { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.qnom:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 6px; }
.qtitre { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qinfo { display: flex; align-items: center; gap: 6px; font-size: 12px; white-space: nowrap; min-width: 0; }
.qsoir { font-size: 12px; color: var(--text2); white-space: nowrap; }
#mes-quartiers, .plan-cadre { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.qbar { width: 44px; height: 6px; border-radius: 3px; background: var(--surface2); overflow: hidden; flex-shrink: 0; }
.qbar span { display: block; height: 100%; border-radius: 3px; }
.qrow .stepper { gap: 4px; }
.qrow .stepper button { width: 36px; height: 36px; border-radius: 10px; }
.qrow .stepper .n { min-width: 20px; }

/* Zones de toucher (téléphone) : au moins ~40 px, sans changer l'apparence. */
.helpbtn, .iconbtn { flex-shrink: 0; }
.lien { position: relative; }
.lien::after { content: ''; position: absolute; inset: -10px -4px; }
main > a.small, main > a.tiny { padding: 12px 0; }

/* Enquête : voisinage (Recherche) */
.voisinage { display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; border-radius: 14px; background: rgba(99, 176, 255, .08); border: 1px solid rgba(99, 176, 255, .25); }

/* ───── Visite guidée ───── */
.tuto { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.tuto-bloc { position: absolute; inset: 0; pointer-events: auto; }
.tuto.centre .tuto-bloc { background: rgba(6, 9, 22, .74); }
.tuto-spot { position: absolute; border-radius: 18px; border: 2px solid var(--amber); box-shadow: 0 0 0 9999px rgba(6, 9, 22, .72), 0 0 22px rgba(255, 178, 63, .45); pointer-events: none; transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease; }
.tuto-bulle { position: absolute; left: 50%; transform: translateX(-50%); width: calc(100% - 24px); max-width: 440px; pointer-events: auto; gap: 8px; border-color: var(--amber-line); background: var(--surface); box-shadow: var(--float); max-height: 62vh; overflow-y: auto; }
.tuto-bulle.bas { bottom: calc(84px + env(safe-area-inset-bottom)); }
.tuto-bulle.haut { top: calc(12px + env(safe-area-inset-top)); }
.tuto.centre .tuto-bulle { top: 50%; transform: translate(-50%, -50%); }
.tuto-titre { margin: 0; font-family: var(--display); font-weight: 800; font-size: 25px; line-height: 1.05; letter-spacing: -.5px; }
.tuto-texte p { margin: 0 0 6px; font-size: 14.5px; line-height: 1.45; color: var(--text2); }
.tuto-texte p:last-child { margin-bottom: 0; }
.tuto-texte strong { color: var(--text); }
.tuto-note { font-size: 13px !important; color: var(--muted) !important; }
.tuto-liste { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: 14.5px; line-height: 1.4; color: var(--text2); }
.tuto-prog { height: 5px; background: var(--bg); border-radius: 2px; overflow: hidden; }
.tuto-prog span { display: block; height: 100%; background: var(--amber); border-radius: 2px; transition: width .25s ease; }
.tuto-geste { display: flex; gap: 10px; align-items: flex-start; background: var(--amber-bg); border: 1px solid var(--amber-line); border-radius: 14px; padding: 10px 12px; font-size: 14px; line-height: 1.4; }
.tuto-geste.ok { background: rgba(61, 211, 154, .12); border-color: rgba(61, 211, 154, .45); }
.tuto-coche { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; background: var(--amber); color: var(--amber-ink); }
.tuto-geste.ok .tuto-coche { background: var(--green); color: var(--bg); }
.tuto-nav { display: flex; justify-content: space-between; gap: 8px; }
.tuto-nav .btn { min-height: 44px; }
.tuto-x { background: none; border: 0; color: var(--muted); font-size: 13px; font-weight: 600; padding: 6px 2px; min-height: 32px; text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .tuto-spot, .tuto-prog span { transition: none; } }

/* HP : carte « Mon hôtel de police » (illustration, bâtiments, parc automobile) */
.hp-logis .scene-hp { display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--hair); }
.hp-logis .bats, .bats.hp-logis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hp-logis .bat { gap: 6px; padding: 10px; }
.hp-logis .niv i { width: 10px; height: 5px; }
.hp-logis .btn.agr { color: var(--amber); background: var(--amber-bg); border-color: var(--amber-line); min-height: 38px; }
.hp-logis .btn.small { min-height: 38px; font-size: 12.5px; white-space: nowrap; padding: 0 6px; }
.linkbtn { background: none; border: 0; padding: 0; cursor: pointer; color: inherit; }
.hp-logis .kicker { white-space: nowrap; }
.parc-etat { height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.parc-etat span { display: block; height: 100%; }
.parc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.veh { background: var(--bg); border: 1px solid var(--hair); border-radius: 12px; padding: 8px 8px 7px; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; color: var(--text); font: inherit; text-align: left; cursor: pointer; text-decoration: none; }
.veh:hover { border-color: var(--line); }
.veh .veh-img { width: 100% !important; max-width: 100%; height: auto !important; aspect-ratio: 2 / 1; object-fit: contain; object-position: center bottom; margin: 0 0 2px; }
.dtuile .t .veh-img { display: block; margin: 0 0 4px; }
.veh-img.atelier { opacity: .45; filter: grayscale(.6); }
.veh .n { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.veh .s { font-size: 12px; color: var(--muted); display: flex; gap: 4px; align-items: center; white-space: nowrap; }
.veh .s i { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.veh .veh-u { display: block; width: 100%; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; margin-top: 2px; }
.veh .veh-u b { display: block; height: 3px; }
.veh.cabosse { background: var(--amber-bg); box-shadow: inset 0 0 0 1px var(--amber-line); }
.veh.cabosse.prevu { background: var(--blue-bg); box-shadow: inset 0 0 0 1px rgba(99, 176, 255, .45); }
.veh.atelier { background: var(--red-bg); box-shadow: inset 0 0 0 1px var(--red-line); }
.veh.libre { background: transparent; border: 1px dashed var(--line); align-items: center; justify-content: center; color: var(--faint); }
.hp-logis .chips { display: flex; gap: 6px; flex-wrap: wrap; }
.hp-logis .chip { min-height: 0; padding: 4px 10px; font-weight: 500; font-size: 12px; background: var(--surface2); border: 0; display: inline-flex; align-items: center; text-decoration: none; }
.hp-logis .chip.add { background: transparent; border: 1px dashed var(--line); color: var(--faint); }
@keyframes hp-balise { 0%, 60% { opacity: 1; } 80% { opacity: .25; } }
.hp-balise { animation: hp-balise 2.4s infinite; }
/* Manoir hanté : lettres de l'enseigne néon qui grésillent puis s'éteignent quelques secondes. */
@keyframes neon-panne { 0%, 52% { fill-opacity: 1; stroke-opacity: 1; } 53% { fill-opacity: .15; stroke-opacity: .15; } 54% { fill-opacity: 1; stroke-opacity: 1; } 56% { fill-opacity: .1; stroke-opacity: .1; } 57% { fill-opacity: .9; stroke-opacity: .9; } 59%, 78% { fill-opacity: .08; stroke-opacity: .08; } 79% { fill-opacity: .7; stroke-opacity: .7; } 80% { fill-opacity: .1; stroke-opacity: .1; } 82%, 100% { fill-opacity: 1; stroke-opacity: 1; } }
@keyframes neon-gresille { 0%, 88% { fill-opacity: 1; stroke-opacity: 1; } 89% { fill-opacity: .2; stroke-opacity: .2; } 90% { fill-opacity: 1; stroke-opacity: 1; } 92% { fill-opacity: .3; stroke-opacity: .3; } 93%, 100% { fill-opacity: 1; stroke-opacity: 1; } }
.neon-panne.n0 { animation: neon-panne 9s infinite 1.5s; }
.neon-panne.n1 { animation: neon-gresille 4.3s infinite .4s; }
@media (prefers-reduced-motion: reduce) { .hp-balise, .neon-panne { animation: none; } }
.scene-btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; font: inherit; }
.scene-btn .scene-hp { display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--hair); }
.scene-leg { display: flex; margin-top: 6px; align-items: center; gap: 6px; justify-content: flex-end; font-size: 12px; color: var(--text2); }
.scene-leg > span:first-child { margin-right: auto; color: var(--muted); }
.scene-leg > svg { color: var(--muted); }
.scene-pastille { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-line); padding: 1px 7px; border-radius: 999px; font-weight: 600; }
.scene-btn:hover .scene-hp { border-color: var(--amber-line); }
/* HP : menu de la roue, et Salle des ventes / Mon équipe côte à côte */
.roue { position: relative; width: 36px; height: 36px; color: var(--muted); }
.roue[aria-expanded="true"] { color: var(--amber); }
.roue-pastille { position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.menu-hp { padding: 6px; gap: 4px; }
.menu-hp .list-row { width: 100%; font: inherit; color: var(--text); text-align: left; cursor: pointer; display: flex; gap: 10px; align-items: center; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.duo:has(details[open]) { grid-template-columns: 1fr; }
.duo > details.repli > summary { padding: 12px; min-height: 0; gap: 8px; align-items: flex-start; }
.duo:not(:has(details[open])) > details.repli > summary > svg:last-child { display: none; }
.duo:not(:has(details[open])) > details.repli > summary .tiny { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Personnalisation du commissariat et vue des voisins */
.scene-voisin svg { display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--hair); }
.decor-btn { min-height: 40px; gap: 8px; justify-content: center; }
.decor-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.decor-opt { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 10px; min-height: 44px; border-radius: 12px; border: 1px solid var(--hair); background: var(--surface2); color: var(--text); font: 600 12.5px var(--body); cursor: pointer; text-align: left; }
.decor-opt.on { border-color: var(--amber); background: var(--amber-bg); color: var(--amber); }
.decor-opt.verrou { opacity: .55; }
.decor-opt .cond { width: 100%; font-weight: 400; font-size: 12px; color: var(--muted); display: inline-flex; gap: 4px; align-items: center; }
.decor-opt .pastille { width: 12px; height: 12px; border-radius: 4px; border: 1px solid rgba(255,255,255,.25); }
.voir-hp { color: var(--text); text-decoration: underline dotted; text-underline-offset: 3px; font-weight: inherit; }
.vitrine { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
.vitrine-item { flex: 0 0 72%; max-width: 280px; scroll-snap-align: start; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; color: var(--text); font: inherit; display: flex; flex-direction: column; gap: 5px; }
.vitrine-item svg.scene-hp { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); }
.vitrine-item:hover svg.scene-hp { border-color: var(--amber-line); }
.vitrine-nom { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.vitrine-nom i { width: 8px; height: 8px; border-radius: 50%; }
/* Roulette Early bird */
.roue-wrap { position: relative; width: min(100%, 280px); margin: 0 auto; }
.roue-svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 16px rgba(0,0,0,.45)); }
.roue-fleche { position: absolute; top: -6px; left: 50%; width: 28px; transform: translateX(-50%); }
.roue-wrap.fini { width: min(60%, 160px); transition: width .4s; }
.roulette .leg { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; }
.vitrine-item { flex-basis: 80%; max-width: 320px; background: var(--surface); border: 1px solid var(--hair); border-radius: 18px; padding: 6px; gap: 0; }
.vitrine-item svg.scene-hp { border: 0; border-radius: 13px; }
.vitrine-item:hover { border-color: var(--amber-line); }
.vitrine-info { display: flex; flex-direction: column; gap: 3px; padding: 8px 6px 4px; min-width: 0; }
.vitrine-info .vitrine-nom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Animation de 20:00 : les combis sortent en patrouille, gyrophares allumés, puis reviennent */
.hp-gyro { opacity: 0; }
.anim-soir .hp-vehicules { animation: hp-sortie 6s ease-in-out .6s both; }
.anim-soir .hp-gyro { animation: hp-gyro .4s linear .6s 14; }
@keyframes hp-sortie { 0%, 12% { transform: translateX(0); } 38% { transform: translateX(-420px); } 38.1%, 55% { transform: translateX(420px); } 100% { transform: translateX(0); } }
@keyframes hp-gyro { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .15; } }
@media (prefers-reduced-motion: reduce) { .anim-soir .hp-vehicules, .anim-soir .hp-gyro { animation: none; } }

/* Zone de non-droit */
.nd-barre { position: relative; flex: 1; height: 8px; border-radius: 999px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--hair); overflow: hidden; }
.nd-barre > span:first-child { display: block; height: 100%; border-radius: 4px; }
.nd-seuil { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,.35); }
.nd-sect.sel { border-color: var(--amber-line); box-shadow: inset 3px 0 0 var(--amber); }
.nd-liste { padding: 2px 12px; gap: 0; }
.nd-liste .nd-sect { border-bottom: 1px solid var(--hair); }
.nd-liste .nd-sect:last-child { border-bottom: 0; }
.nd-liste .nd-sect.sel { box-shadow: none; border-color: var(--line); }
.nd-row { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 6px 0; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
.nd-row .nd-barre { flex: 0 0 64px; }
.nd-nom { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nd-titre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nd-sect.sel .nd-nom { color: var(--amber); }
.nd-chiffre { width: 22px; text-align: right; }
.nd-agents { font-family: var(--mono); font-size: 12px; font-weight: 700; min-width: 22px; height: 22px; border-radius: 11px; background: var(--amber); color: var(--amber-ink); display: inline-flex; align-items: center; justify-content: center; }
.nd-etat { font-size: 12px; white-space: nowrap; max-width: 80px; overflow: hidden; text-overflow: ellipsis; }
.nd-etat.ok { color: var(--green-soft); }
.nd-moi { font-size: 11.5px; font-weight: 700; color: var(--amber); border: 1px solid var(--amber-line); border-radius: 6px; padding: 0 4px; vertical-align: 1px; }
.nd-detail { display: flex; flex-direction: column; padding: 0 0 10px; }
.nd-agents.vide { background: transparent; }

/* Incidents du jour et mini-jeux */
.inc-row { display: flex; gap: 10px; align-items: center; background: var(--surface2); border: 1px solid var(--hair); border-radius: 16px; padding: 10px 11px; font-size: 13px; }
.inc-row.inc-ouvert { background: var(--amber-bg); border-color: var(--amber-line); }
.inc-row.inc-urgence { background: var(--red-bg); border-color: var(--red-line); }
.inc-urgence .inc-ico { background: rgba(255, 110, 106, .16); }
.inc-row.inc-attente { background: transparent; border-style: dashed; }
.inc-ico { flex-shrink: 0; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--bg); color: var(--muted); }
.inc-ouvert .inc-ico { color: var(--amber); background: rgba(255, 178, 63, .14); animation: inc-pulse 1.6s ease-in-out infinite; }
.inc-ico.ok { color: var(--green); background: rgba(61, 211, 154, .14); }
.inc-ico.bad { color: var(--red); background: var(--red-bg); }
@keyframes inc-pulse { 50% { box-shadow: 0 0 0 6px rgba(255, 178, 63, .12); } }
.mj-wrap { position: fixed; inset: 0; z-index: 60; background: var(--bg-deep); padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); }
.mj-wrap { display: flex; flex-direction: column; }
.mj-wrap iframe { display: block; width: 100%; flex: 1; min-height: 0; border: 0; }
.mj-barre { flex: none; display: flex; align-items: center; gap: 12px; padding: 6px 12px; background: var(--bg-deep); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.mj-retour { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px 0 8px; border: 1px solid rgba(244, 246, 255, .22); border-radius: 999px; background: rgba(255, 255, 255, .05); color: rgba(244, 246, 255, .85); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; transition: transform .1s, background .15s, border-color .15s; }
.mj-retour:hover { background: rgba(255, 255, 255, .1); border-color: rgba(244, 246, 255, .4); color: #fff; }
.mj-retour:active { transform: scale(.97); }
.mj-retour:focus-visible { outline: 3px solid var(--amber-hi); outline-offset: 3px; }
.mj-retour svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mj-nom { flex: 1; min-width: 0; text-align: right; color: rgba(244, 246, 255, .6); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.mj-ouvert { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .inc-ouvert .inc-ico { animation: none; } }

/* ───── Le ciel du district (HP et accueil) ─────
   Trois ciels superposés : jour, crépuscule (--crep) et nuit (--nuit), réglés sur l'heure réelle. */
.soir-ciel { position: relative; overflow: hidden; height: 132px;
  background: linear-gradient(180deg, #2C58B0 0%, #5E8DDB 62%, #A9C4EE 100%); }
.soir-ciel::before, .soir-ciel::after { content: ''; position: absolute; inset: 0; }
.soir-ciel::before { opacity: var(--crep, 0); background: linear-gradient(180deg, #232766 0%, #6A3F86 55%, #F08A4B 100%); }
.soir-ciel::after { opacity: var(--nuit, 1);
  background: radial-gradient(1px 1px at 12% 22%, #fff, transparent), radial-gradient(1px 1px at 33% 12%, rgba(255,255,255,.8), transparent),
    radial-gradient(1.4px 1.4px at 58% 30%, #fff, transparent), radial-gradient(1px 1px at 74% 14%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 88% 34%, #fff, transparent), radial-gradient(1px 1px at 46% 44%, rgba(255,255,255,.6), transparent),
    linear-gradient(180deg, #070B21 0%, #161A47 70%, #2B2365 100%); }
.soir-astre { position: absolute; z-index: 1; right: 22%; top: calc(18px + var(--crep, 0) * 46px); width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #FFF6D8, #FFD27A 70%); box-shadow: 0 0 40px 8px rgba(255, 210, 122, .45); opacity: calc(1 - var(--nuit, 1)); }
.soir-ciel .skyline { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; width: 100%; height: 64px; display: block; }
.soir-ciel .sk-win { opacity: calc(.06 + var(--nuit, 1) * .5 + var(--crep, 0) * .2); }

.card.soir { padding: 0; gap: 0; overflow: hidden; border-color: rgba(190, 205, 255, .12); }
.card.soir .soir-ciel { height: 148px; }
.card.soir .skyline { height: 44px; }
.soir-tete { position: relative; z-index: 3; margin-top: -148px; height: 104px; padding: 13px 16px 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; align-items: end; color: #fff; }
.soir-situ { position: relative; z-index: 3; margin: 44px 0 0; display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px 0; }
.soir-situ + .soir-etat { margin-top: 0; }
.soir-situ .pill { text-decoration: none; font-size: 12.5px; }
.soir-l { grid-column: 1 / -1; align-self: start; font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .85); text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.soir-cd { grid-column: 1; font-family: var(--display); font-weight: 800; font-size: clamp(44px, 14.5vw, 54px); line-height: .86; letter-spacing: -1.5px; white-space: nowrap; font-variant-numeric: tabular-nums; font-variation-settings: 'opsz' 96; text-shadow: 0 2px 18px rgba(5, 8, 25, .6); }
.soir-prog { grid-column: 2; align-self: end; display: flex; gap: 4px; padding: 0 0 8px; }
.soir-prog i { width: 14px; height: 6px; border-radius: 3px; background: rgba(8, 11, 30, .35); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45); }
@media (max-width: 380px) { .soir-prog { gap: 3px; } .soir-prog i { width: 9px; } }
.soir-prog i.on { background: var(--green); box-shadow: 0 0 10px rgba(61, 211, 154, .6); }
.soir-etat { position: relative; z-index: 3; margin: 44px 0 0; display: flex; align-items: center; gap: 8px; padding: 10px 16px 0; font-size: 13.5px; font-weight: 700; color: var(--amber-hi); }
.soir-etat::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.soir-etat.ok { color: var(--green-soft); padding-bottom: 14px; }
.soir-todo { padding: 12px; }

/* Accueil (connexion) */
.accueil { justify-content: flex-start; padding-top: 0; gap: 18px; }
.accueil-ciel { margin: 0 -20px; height: 34vh; min-height: 210px; max-height: 300px; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
.accueil-ciel .skyline { height: 96px; }
.accueil-titre { gap: 8px; margin-top: -28px; position: relative; z-index: 2; }
.accueil h1.brand { font-size: clamp(60px, 19vw, 84px); letter-spacing: -3px; }
.accueil-devise { margin: 0; font-family: var(--display); font-weight: 700; font-size: 21px; line-height: 1.15; letter-spacing: -.3px; color: var(--text); max-width: 22ch; }

/* ───── Énigme « Le cadenas » : cadenas à molettes ───── */
.cad-form { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 6px; }
.cad-form .btn { align-self: stretch; }
.cad-aide { margin: 0; text-align: center; }
.cad { --cad-h: 46px; position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 0; }
.cad-anse { position: relative; z-index: 0; width: 46%; min-width: 120px; max-width: 170px; height: auto; margin-bottom: -26px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .45)); transform-origin: 82% 100%; }
.cad-corps { position: relative; z-index: 1; padding: 20px 16px 12px; border-radius: 26px 26px 36px 36px;
  background: linear-gradient(165deg, #F8DC95 0%, #E2AE4B 28%, #B9842A 62%, #D8A447 84%, #F1CB78 100%);
  box-shadow: inset 0 2px 0 rgba(255, 246, 214, .8), inset 0 -4px 10px rgba(96, 58, 6, .55), inset 0 0 0 1px rgba(120, 76, 10, .5), 0 18px 34px -12px rgba(0, 0, 0, .7), 0 3px 8px rgba(0, 0, 0, .35);
  display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cad-corps::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .25;
  background: repeating-linear-gradient(100deg, rgba(255, 255, 255, .0) 0 3px, rgba(255, 255, 255, .5) 3px 4px, rgba(90, 55, 5, .0) 4px 7px); mix-blend-mode: overlay; }
.cad-vis { position: absolute; top: 9px; left: 12px; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFF1C9, #A8771F 70%); box-shadow: inset 0 0 0 1px rgba(90, 55, 5, .6); }
.cad-vis::after { content: ''; position: absolute; left: 1.5px; right: 1.5px; top: 4px; height: 1px; background: rgba(90, 55, 5, .8); transform: rotate(35deg); }
.cad-vis.d { left: auto; right: 12px; }
.cad-fenetre { position: relative; display: flex; gap: 6px; padding: 2px 8px; border-radius: 16px; background: #12141C;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 240, 200, .6); }
.cad-col { display: flex; flex-direction: column; align-items: center; }
.cad-pas { width: 50px; height: 30px; padding: 0; border: 0; background: none; color: #8E95AE; display: grid; place-items: center; border-radius: 8px; touch-action: manipulation; }
.cad-pas:hover { color: var(--amber-hi); }
.cad-pas svg { width: 14px; height: 9px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cad-roue { position: relative; width: 50px; height: calc(var(--cad-h) * 3); overflow: hidden; border-radius: 10px; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none;
  background: linear-gradient(90deg, #15171F 0%, #343A4D 22%, #4E566F 50%, #343A4D 78%, #15171F 100%); }
.cad-roue:active { cursor: grabbing; }
.cad-roue::before { content: ''; position: absolute; z-index: 2; left: 0; right: 0; top: var(--cad-h); height: var(--cad-h); pointer-events: none;
  border-top: 1.5px solid rgba(255, 178, 63, .55); border-bottom: 1.5px solid rgba(255, 178, 63, .55); background: rgba(255, 220, 150, .06); }
.cad-roue::after { content: ''; position: absolute; z-index: 1; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 6, 10, .92) 0%, rgba(5, 6, 10, .25) 30%, transparent 40%, transparent 60%, rgba(5, 6, 10, .25) 70%, rgba(5, 6, 10, .92) 100%); }
.cad-roue:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.cad-bande { transition: transform .24s cubic-bezier(.3, 1.35, .5, 1); will-change: transform; }
.cad-bande span { display: block; height: var(--cad-h); line-height: var(--cad-h); text-align: center; font-family: var(--display); font-weight: 800; font-size: 31px; color: #F4F1E8;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 255, 255, .15); font-variant-numeric: tabular-nums; }
.cad-marque { position: relative; font: 700 11px var(--body); letter-spacing: 2.5px; color: rgba(84, 52, 4, .75); text-shadow: 0 1px 0 rgba(255, 238, 190, .7); }
/* Après la réponse */
.cad-form.fini .cad-roue { height: var(--cad-h); cursor: default; }
.cad-form.fini .cad-roue::before { top: 0; border: 0; }
.cad-form.fini .cad-roue::after { background: linear-gradient(180deg, rgba(5, 6, 10, .55), transparent 30%, transparent 70%, rgba(5, 6, 10, .55)); }
.cad-form.fini .cad-fenetre { padding: 8px; }
.cad.ouvert .cad-anse { animation: cadOuvre .7s cubic-bezier(.3, 1.5, .5, 1) .15s both; }
.cad.ouvert .cad-roue::before { background: rgba(61, 211, 154, .14); }
.cad.bloque .cad-corps { animation: cadSecoue .5s ease-in-out .15s; }
.cad.bloque .cad-roue::before { background: rgba(255, 110, 106, .16); }
@keyframes cadOuvre { 0% { transform: none; } 55% { transform: translateY(-30px); } 100% { transform: translateY(-24px) rotate(-14deg); } }
@keyframes cadSecoue { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
@media (prefers-reduced-motion: reduce) {
  .cad-bande { transition: none; }
  .cad.ouvert .cad-anse { animation: none; transform: translateY(-24px) rotate(-14deg); }
  .cad.bloque .cad-corps { animation: none; }
}
/* Les essais du carnet */
.cad-essais { gap: 6px; }
.cad-essai { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 14px; background: var(--bg); border: 1px solid var(--hair); }
.cad-mini { display: flex; gap: 3px; flex-shrink: 0; }
.cad-mini b { width: 25px; height: 32px; border-radius: 6px; display: grid; place-items: center; font: 800 18px var(--display); color: #F4F1E8;
  background: linear-gradient(90deg, #15171F, #3E455B 50%, #15171F); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6); }
.cad-past { display: flex; gap: 4px; }
.cad-past i { width: 10px; height: 10px; border-radius: 50%; }
.cad-past i.b { background: var(--green); box-shadow: 0 0 6px rgba(61, 211, 154, .5); }
.cad-past i.m { background: var(--amber); }
.cad-past i.z { border: 1.5px solid var(--faint); }

/* ───── Énigmes visuelles ───── */
.av { display: inline-grid; place-items: center; flex-shrink: 0; border-radius: 50%; background: color-mix(in srgb, var(--av) 22%, var(--surface2)); color: var(--av); font-family: var(--display); font-weight: 800; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--av) 55%, transparent); }

/* Chronologie : ligne du temps */
.chr { display: flex; flex-direction: column; gap: 8px; }
.chr-bout { font-size: 12px; font-weight: 700; color: var(--amber-soft); padding-left: 44px; }
.chr-bout.fin { color: var(--muted); }
.chr-liste { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.chr-liste::before { content: ''; position: absolute; left: 15px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--amber), var(--line)); }
.chr-carte { position: relative; display: grid; grid-template-columns: 32px auto 1fr auto auto; align-items: center; gap: 10px; padding: 0; touch-action: auto; }
.chr-carte > :not(.chr-n) { position: relative; }
.chr-n { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 2px solid var(--amber-line); color: var(--amber); font: 800 14px var(--display); z-index: 1; }
.chr-carte::after { content: ''; position: absolute; z-index: 0; left: 42px; right: 0; top: 0; bottom: 0; border-radius: 14px; background: var(--surface2); border: 1px solid var(--hair); box-shadow: var(--lift); }
.chr-lettre, .chr-txt, .chr-fl, .chr-poignee { z-index: 1; }
.chr-lettre { margin-left: 10px; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--amber-bg); color: var(--amber); font: 800 14px var(--display); }
.chr-txt { padding: 12px 0; font-size: 14px; line-height: 1.35; }
.chr-fl { display: flex; flex-direction: column; }
.chr-fl button { width: 32px; height: 22px; border: 0; background: none; color: var(--muted); padding: 0; display: grid; place-items: center; }
.chr-fl button:hover { color: var(--amber); }
.chr-fl svg, .pl-x svg { width: 12px; height: 8px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chr-poignee { width: 30px; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: grab; touch-action: none; margin-right: 6px; }
.chr-poignee i { width: 14px; height: 2px; border-radius: 1px; background: var(--faint); }
.chr-carte.drag { z-index: 5; }
.chr-carte.drag::after { background: var(--surface3); border-color: var(--amber-line); box-shadow: var(--float); }
.chr-carte.drag .chr-poignee { cursor: grabbing; }
.chr-carte.bouge::after { animation: chrFlash .5s ease-out; }
@keyframes chrFlash { 0% { border-color: var(--amber); } }

/* Disque de décodage */
.dq-wrap { display: grid; place-items: center; }
.dq-boite { position: relative; width: min(100%, 260px); }
.dq { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; }
/* Zone de prise : l'anneau intérieur (rayon 107/150), le moyeu (74/150) laissé au défilement */
.dq-prise { position: absolute; left: 50%; top: 50%; width: 71.3%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; touch-action: none; cursor: grab; }
.dq-prise:active { cursor: grabbing; }
.dq-libre { position: absolute; left: 50%; top: 50%; width: 49.3%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; }
.dq-rappel { text-align: center; position: sticky; top: 8px; z-index: 2; }
.dq-ext { fill: #E9DFC6; stroke: #9C8A5F; stroke-width: 2; }
.dq-traits line { stroke: #B9A87E; stroke-width: 1; }
.dq-code { font: 800 15px var(--display); fill: #2A2214; }
.dq-int { transition: transform .25s cubic-bezier(.3, 1.3, .5, 1); }
.dq-int-fond { fill: #1C2442; stroke: currentColor; stroke-width: 2; }
.dq-clair { font: 700 14px var(--display); fill: currentColor; }
.dq-moyeu { fill: var(--bg); stroke: var(--hair); }
.dq-repere { fill: currentColor; }
.dq-k { font: 800 34px var(--display); fill: var(--text); }
.dq-ks { font: 600 12px var(--body); fill: var(--muted); }
.dq-carte { color: var(--amber); }
.dq-carte .tiny, .dq-carte h2, .dq-carte .roue-lecture { color: var(--text); }
.dq-carte .tiny.muted { color: var(--muted); }
.dq-carte [role="tab"] { font-size: 12.5px; }
@media (prefers-reduced-motion: reduce) { .dq-int { transition: none; } }

/* La plaque : plaques belges */
.pl-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 8px; }
.pl-item { position: relative; }
.pl { width: 100%; display: flex; align-items: stretch; padding: 0; border-radius: 7px; overflow: hidden; background: #FBFBF7; border: 2px solid #B4141E; box-shadow: 0 2px 0 rgba(0, 0, 0, .25), 0 6px 14px -6px rgba(0, 0, 0, .6); min-height: 46px; transition: transform .12s, box-shadow .12s; }
.pl:hover { transform: translateY(-1px); }
.pl-eu { flex: 0 0 22px; background: #0A3A9E; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; font: 700 12px var(--body); }
.pl-eu svg { width: 14px; height: 14px; fill: #F7D117; }
.pl-txt { flex: 1; display: grid; place-items: center; font: 700 clamp(17px, 5.2vw, 21px) 'Barlow Condensed', var(--display); letter-spacing: .5px; color: #B4141E; white-space: nowrap; padding: 0 4px; }
.pl[aria-pressed="true"] { outline: 3px solid var(--amber); outline-offset: 3px; }
.pl:disabled { opacity: 1; cursor: default; }
.pl-x { position: absolute; top: -8px; right: -6px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface3); color: var(--muted); display: grid; place-items: center; padding: 0; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
.pl-x::after { content: ''; position: absolute; inset: -8px; }
.pl-x svg { width: 10px; height: 10px; }
.pl-item.raye .pl { opacity: .35; filter: grayscale(.8); }
.pl-item.raye .pl-txt { text-decoration: line-through 2.5px #1D1A15; }
.pl-item.raye .pl-x { background: var(--red); color: #fff; border-color: transparent; }

/* Témoignages */
.tem-liste { gap: 8px; }
.tem { display: flex; gap: 10px; align-items: flex-start; }
.tem-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tem-nom { font-size: 12px; font-weight: 700; color: var(--muted); }
.tem-bulle { margin: 0; padding: 10px 12px; border-radius: 4px 16px 16px 16px; background: var(--surface2); border: 1px solid var(--hair); font-size: 14.5px; line-height: 1.45; }
.tem-marque { align-self: center; flex-shrink: 0; min-width: 76px; min-height: 34px; padding: 0 10px; border-radius: 999px; border: 1px dashed var(--line); background: transparent; color: var(--muted); font: 600 12px var(--body); }
.tem-v .tem-marque { border: 1px solid rgba(61, 211, 154, .5); background: rgba(61, 211, 154, .12); color: var(--green-soft); }
.tem-m .tem-marque { border: 1px solid var(--red-line); background: var(--red-bg); color: var(--red-soft); }
.tem-m .tem-bulle { border-color: var(--red-line); }
.tem-v .tem-bulle { border-color: rgba(61, 211, 154, .4); }

/* Photos et plan : on touche directement l'image */
.fig.tactile svg { cursor: pointer; }
/* Les deux photos : tirages de caméra pincés sur une chemise cartonnée */
.fig:has(.ph-photo) { position: relative; margin-top: 21px; padding: 12px 7px 9px; border-radius: 0 9px 7px 7px;
  background: linear-gradient(170deg, #EBDDBA 0%, #E1CEA2 55%, #D5BE8C 100%); box-shadow: inset 0 1px 0 rgba(255, 252, 240, .55), inset 0 -1px 0 rgba(90, 65, 25, .18), 0 1px 0 rgba(90, 65, 25, .25), 0 10px 18px -12px rgba(40, 25, 5, .7); }
.fig:has(.ph-photo) figcaption { position: absolute; left: 0; top: -19px; height: 20px; display: flex; align-items: center; padding: 0 14px 0 9px; max-width: 74%;
  background: linear-gradient(#EFE2C2, #EBDDBA); border-radius: 7px 9px 0 0; clip-path: polygon(0 100%, 0 30%, 4px 0, calc(100% - 9px) 0, 100% 100%);
  color: #4A3A20; font: 600 11px var(--mono); letter-spacing: .2px; box-shadow: inset 0 1px 0 rgba(255, 252, 240, .6); }
.fig .ph-photo { border: 4px solid #FBF9F3; border-bottom-width: 7px; border-radius: 1.5px; box-sizing: border-box; transform: rotate(-.6deg);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 7px 14px -7px rgba(40, 25, 5, .75); }
.figs.cote .fig:has(.ph-photo) + .fig .ph-photo { transform: rotate(.5deg); }
.fig:has(.ph-photo)::after { content: ''; position: absolute; top: -9px; right: 13%; width: 44px; height: 38px; pointer-events: none; z-index: 2;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 34'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%235a5f67'/%3E%3Cstop offset='.28' stop-color='%2326292e'/%3E%3Cstop offset='1' stop-color='%2308090b'/%3E%3C/linearGradient%3E%3ClinearGradient id='w' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%236f757d'/%3E%3Cstop offset='.45' stop-color='%23f4f6f8'/%3E%3Cstop offset='1' stop-color='%237b8189'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M12.5 18 C11 10 11.5 5 14 3.2 C16.5 1.6 23.5 1.6 26 3.2 C28.5 5 29 10 27.5 18' fill='none' stroke='%231b1d20' stroke-opacity='.35' stroke-width='2.6' stroke-linecap='round' transform='translate(.8 1)'/%3E%3Cpath d='M12.5 18 C11 10 11.5 5 14 3.2 C16.5 1.6 23.5 1.6 26 3.2 C28.5 5 29 10 27.5 18' fill='none' stroke='url(%23w)' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M8 16.5 H32 L35 31 Q20 33.6 5 31 Z' fill='url(%23b)'/%3E%3Cpath d='M8.6 17.3 H31.4' stroke='%23a9aeb5' stroke-width='.9' stroke-opacity='.75'/%3E%3Cpath d='M6.4 29.6 Q20 31.8 33.6 29.6' stroke='%23fff' stroke-opacity='.12' stroke-width='.8' fill='none'/%3E%3Ccircle cx='12.6' cy='17.6' r='1.5' fill='url(%23w)'/%3E%3Ccircle cx='27.4' cy='17.6' r='1.5' fill='url(%23w)'/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 2px 1.5px rgba(0, 0, 0, .45)); }
.ph-hit { fill: transparent; stroke: transparent; stroke-width: 2.5; cursor: pointer; }
.ph-hit:hover { fill: rgba(255, 178, 63, .12); }
.ph-hit[data-sel] { fill: rgba(255, 178, 63, .2); stroke: #FFB23F; }
.fi-x { fill: transparent; cursor: pointer; }
.fi-x:hover { fill: rgba(99, 176, 255, .15); }
.fi-trace { stroke: #63B0FF; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 7; pointer-events: none; }
.fi-lieu { cursor: pointer; }
.fi-lieu[data-sel] { stroke: #fff; stroke-width: 3; r: 9; }
/* Filature : plan papier */
.fi-plan.fi-papier { max-width: 560px; margin: 0 auto; border-radius: 3px; box-shadow: 0 1px 0 rgba(60, 40, 15, .25), 0 10px 22px -10px rgba(40, 25, 5, .55); overflow: visible; }
.fi-papier .fi-nom { font: 700 12.5px Caveat, 'Segoe Print', cursive; fill: #2B2015; paint-order: stroke; stroke: #F1E7CF; stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.fi-papier .fi-lieu { fill: url(#fiPinO); stroke: #5A2E08; stroke-width: .7; }
.fi-papier .fi-lieu[data-sel] { fill: url(#fiPinR); stroke: #4E0C06; stroke-width: .9; r: 7; }
.fi-papier .fi-trace { stroke: #B3261E; stroke-width: 2.6; stroke-dasharray: 5 3.5; opacity: .9; }
.fi-papier .fi-x:hover { fill: rgba(179, 38, 30, .1); }
.fi-etape { display: flex; flex-direction: column; gap: 2px; padding: 8px 11px; border-radius: 10px; background: #FFF3D6; border: 1px solid #E8C77E; border-left: 4px solid #D98A1F; color: #2B2015; }
.fi-etape-n { font: 700 11px var(--mono); letter-spacing: .3px; text-transform: uppercase; color: #9A5B0C; }
.fi-etape-t { font-weight: 700; font-size: 15px; line-height: 1.3; }
.fi-etape-s { font-size: 12.5px; color: #6B5A43; }
.fe-rebours { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 8px 11px; border-radius: 10px; background: #FFE1DF; border: 1px solid #F0A9A4; border-left: 4px solid #D9473F; color: #2B2015; font-size: 13.5px; line-height: 1.35; }
.fe-rebours strong { font: 800 12px var(--mono); letter-spacing: .5px; text-transform: uppercase; color: #B0302A; }
.fi-ind { padding: 3px 6px; margin: 0 -6px !important; border-radius: 6px; transition: background .15s, opacity .15s; }
.fi-ind.fait { opacity: .45; text-decoration: line-through; text-decoration-color: rgba(43, 32, 21, .35); }
.fi-ind.encours { background: #FFE7B0; box-shadow: inset 3px 0 0 #D98A1F; font-weight: 700; color: #2B2015; }
.mode-noir .fi-ind.encours { background: rgba(217, 138, 31, .22); color: #FFE3B0; box-shadow: inset 3px 0 0 #E8A13A; }
.mode-noir .fi-ind.fait { text-decoration-color: rgba(255, 240, 220, .4); }
.fi-outils { gap: 6px; align-items: center; }
.fi-outils .btn { min-height: 38px; }

/* Le butin : étiquettes de scellés */
.bt { display: flex; flex-direction: column; gap: 10px; }
.bt-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bt-tag { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 12px 12px; border-radius: 6px 6px 16px 16px; background: #EFE6CF; color: #2A2214; box-shadow: 0 2px 0 rgba(0, 0, 0, .25), 0 10px 18px -10px rgba(0, 0, 0, .7); clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%, 0 14px); }
.bt-trou { position: absolute; top: 7px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6); }
.bt-ico svg { width: 34px; height: 34px; fill: none; stroke: #5A4A2A; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bt-nom { font: 800 16px var(--display); line-height: 1.1; }
.bt-num { font-size: 12px; color: #7A6A48; font-weight: 600; }
.bt-val { margin-top: 4px; display: flex; align-items: center; gap: 4px; width: 100%; border-top: 1px dashed #B8A57C; padding-top: 6px; font: 700 15px var(--display); }
.bt-val input { width: 100%; min-width: 0; height: 44px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .6); padding: 0 8px; font: 700 28px/1 'Caveat', var(--display); color: #1F3C8A; text-align: center; }
.bt-val input::placeholder { font: 700 22px var(--display); color: #A8987A; }
.bt-val input:focus { outline: 2px solid #B4141E; }
.bt-tag.cible { background: #FFE3A3; box-shadow: 0 0 0 3px var(--amber), 0 10px 22px -8px rgba(255, 178, 63, .6); }
.bt-tag.cible .bt-num { color: #A3290F; }
.bt-tag.cible .bt-val input { background: #fff; }

/* Les horaires : ligne de bus */
.hb-num { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #E2001A; color: #fff; font: 800 22px var(--display); box-shadow: 0 4px 12px -4px rgba(226, 0, 26, .6); }
.hb-departs { display: flex; flex-wrap: wrap; gap: 6px; }
.hb-departs span { padding: 4px 9px; border-radius: 8px; background: var(--bg); border: 1px solid var(--hair); font-weight: 700; font-size: 13px; }
.hb-arrets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; position: relative; }
.hb-arrets::before { content: ''; position: absolute; left: 7px; top: 12px; bottom: 12px; width: 4px; border-radius: 2px; background: #E2001A; }
.hb-arrets li { display: flex; align-items: center; gap: 12px; min-height: 34px; font-size: 14px; }
.hb-pt { position: relative; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); border: 4px solid #E2001A; flex-shrink: 0; }
.hb-min { font-weight: 700; color: var(--text2); font-size: 13px; }
.hb-trajets { gap: 8px; }
.hb-trajet { display: flex; flex-direction: column; gap: 8px; width: 100%; text-align: left; padding: 12px; border-radius: 16px; border: 1px solid var(--hair); background: var(--surface2); color: var(--text); box-shadow: var(--lift); }
.hb-trajet[aria-pressed="true"] { border-color: var(--amber); background: var(--amber-bg); box-shadow: inset 0 0 0 1px var(--amber); }
.hb-trajet:disabled { opacity: 1; cursor: default; }
.hb-quote { font-size: 13.5px; line-height: 1.4; color: var(--text2); }
.hb-mini { display: flex; align-items: center; padding: 0 2px; }
.hb-mini i { flex: 1; height: 4px; background: var(--line); position: relative; }
.hb-mini i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--surface3); }
.hb-mini i.in, .hb-mini i.ds { background: #E2001A; }
.hb-mini i.mt { background: linear-gradient(90deg, var(--line) 50%, #E2001A 50%); }
.hb-mini i.ds { background: linear-gradient(90deg, #E2001A 50%, var(--line) 50%); }
.hb-mini i.mt::after, .hb-mini i.ds::after { width: 12px; height: 12px; margin: -6px 0 0 -6px; background: #fff; border: 3px solid #E2001A; }
.hb-resume { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); }

/* Enquête de voisinage : icônes de la grille */
.gico { width: 20px; height: 20px; fill: none; stroke: var(--amber-soft); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; display: block; margin: 0 auto 2px; }
.gtab th[scope="row"] .gico { margin: 0; }
.gtab th[scope="col"] > span { display: block; }

/* Expertise d'écriture */
.ec-lettre { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 6px); z-index: 6; padding: 8px 10px; border-radius: 16px; background: #2a1517; border: 1px solid var(--red-line); box-shadow: 0 10px 24px rgba(0,0,0,.55); margin: 0; }
.ec-lettre figcaption { color: var(--red-soft); margin-bottom: 4px; }
.ec-lettre figcaption .tiny { color: var(--muted); font-weight: 500; }
.ec-liste { gap: 10px; }
.ec-ech { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 16px; background: var(--surface2); border: 1px solid var(--hair); transition: opacity .15s; }
.ec-ech.sel { border-color: var(--amber); background: var(--amber-bg); }
.ec-ech.ecarte { opacity: .45; }
.ec-ech.ecarte svg { filter: grayscale(1); }
.ec-pick { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 0; border: 0; background: none; color: var(--text); text-align: left; }
.ec-pick:disabled { cursor: default; }
.ec-x { position: absolute; top: 8px; right: 10px; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--hair); background: var(--bg); color: var(--muted); font: 600 12px var(--body); }
.ec-x[aria-pressed="true"] { color: var(--text); border-color: var(--line); }
.figs.deux { display: flex; flex-direction: column; }
.figs.cote { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start; }
.figs.cote figcaption { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ───── Ordinateur : écran large, souris ─────
   Sur téléphone et tablette rien ne change. Sur PC, l'HP passe sur deux colonnes
   et les autres écrans s'élargissent (texte un peu plus grand, plus d'air). */
@media (min-width: 1000px) and (hover: hover) and (pointer: fine) {
  #app { max-width: 1120px; border: 0; }
  main.screen { width: 100%; max-width: 780px; margin: 0 auto; box-sizing: border-box; padding: 28px 28px 120px; gap: 16px; font-size: 15px; }
  /* HP : deux colonnes qui se lisent de haut en bas (la colonne de gauche d'abord). */
  main.screen.hp { max-width: 1120px; display: block; columns: 2; column-gap: 22px; }
  main.screen.hp > * { break-inside: avoid; margin: 0 0 16px; }
  main.screen.hp > header, main.screen.hp > nav.menu-hp { column-span: all; }
  main.screen.hp > header { margin-bottom: 20px; }
  /* Énigmes et plan : on garde des proportions de téléphone confortables, sans tout agrandir. */
  main.screen.quete { max-width: 680px; }
  .plan-cadre { width: 100%; max-width: min(100%, calc(100vh - 230px)); margin: 0 auto; }
  .small { font-size: 14px; }
  .tiny { font-size: 12.5px; }
  nav.tabs { max-width: 620px; bottom: 14px; }
  nav.tabs a { font-size: 12px; }
  .savebar { max-width: 600px; bottom: 98px; }
  .aide { max-width: 560px; }
  .tuto-bulle { max-width: 480px; }
  /* Mini-jeux : au format téléphone, centrés, plutôt qu'étirés sur tout l'écran. */
  .mj-wrap { align-items: center; justify-content: center; gap: 12px; background: rgba(5, 8, 20, .82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .mj-barre { width: min(480px, 100%); background: none; border: none; padding: 0; }
  .mj-wrap iframe { flex: none; width: min(480px, 100%); height: min(940px, calc(100% - 72px)); border-radius: 22px; box-shadow: var(--float); background: var(--bg-deep); }
}

/* Invitation à installer l'appli (écran d'accueil) — js/ui/installer.js */
.inst-barre { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(82px + env(safe-area-inset-bottom)); width: calc(100% - 24px); max-width: 456px; z-index: 12; display: flex; align-items: center; gap: 12px; padding: 10px 8px 10px 10px; background: rgba(20, 27, 51, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--amber-line); border-radius: 18px; box-shadow: var(--float); animation: instIn .35s cubic-bezier(.2,.9,.3,1.15); }
body:not(:has(nav.tabs)) .inst-barre { bottom: calc(16px + env(safe-area-inset-bottom)); }
body:has(.savebar, .mj-wrap, .aide-wrap, .tuto, .troll) .inst-barre { display: none; }
.inst-icone { width: 40px; height: 40px; border-radius: 10px; flex: none; }
.inst-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: 13px; line-height: 1.3; color: var(--muted); }
.inst-texte > b { color: var(--text); font-size: 14px; }
.inst-texte b b, .inst-texte span b { color: var(--text); }
.inst-etapes { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
.inst-etape { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 6px; border-radius: 8px; background: var(--surface2); border: 1px solid var(--hair); color: var(--text); font-weight: 600; font-size: 12.5px; white-space: nowrap; }
.inst-etape svg { color: var(--blue); }
.inst-etape i { font-style: normal; color: var(--muted); font-weight: 500; }
.inst-fleche { color: var(--amber); font-weight: 700; }
.inst-ok { flex: none; }
.inst-x { flex: none; width: 36px; height: 36px; border: none; background: none; color: var(--faint); font-size: 16px; border-radius: 10px; cursor: pointer; align-self: flex-start; }
.inst-x:hover { color: var(--text); background: var(--surface2); }
@keyframes instIn { from { opacity: 0; transform: translate(-50%, 14px); } }

/* Message codé : lettre illisible (tache d'encre). Même largeur qu'une lettre. */
.trou { display: inline-block; width: 0.62em; height: 1.05em; vertical-align: -0.2em; margin: 0 0.5px; border-radius: 45% 55% 50% 40%;
  background: radial-gradient(ellipse at 40% 45%, rgba(40,32,24,.85) 0 38%, rgba(40,32,24,.45) 55%, transparent 72%),
    radial-gradient(circle at 70% 70%, rgba(40,32,24,.5) 0 22%, transparent 40%); }
.roue-lecture .trou { background: radial-gradient(ellipse at 40% 45%, currentColor 0 36%, transparent 70%); opacity: .55; }

/* Hôtel de police : niveau actuel / niveau suivant, annexes avec leur effet. */
.hp-logis .bat-niv { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; border-radius: 10px; background: var(--surface2); }
.hp-logis .bat-niv.suiv { background: transparent; border: 1px dashed var(--line); }
.hp-logis .annexes { display: grid; grid-template-columns: 1fr; gap: 6px; }
@media (min-width: 560px) { .hp-logis .annexes { grid-template-columns: 1fr 1fr; } }
.hp-logis .annexe { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 12px; border: 1px dashed var(--line); }
.hp-logis .annexe.faite { border: 1px solid var(--green-line, var(--hair)); background: var(--bg); }
.hp-logis .annexes-plus { display: flex; flex-direction: column; gap: 6px; }
.hp-logis .annexes-plus > summary { cursor: pointer; color: var(--text2); font-weight: 600; padding: 4px 0; }
.hp-logis .annexes-plus[open] > summary { margin-bottom: 6px; }
.hp-logis .annexes-plus > a { display: block; margin-top: 6px; }
/* HP : trois cartes repliées (salle des ventes, équipe, trophées) — la 3e prend toute la largeur. */
.duo > :nth-child(3):last-child { grid-column: 1 / -1; }
@media (min-width: 720px) { .duo:has(> :nth-child(3)):not(:has(details[open])) { grid-template-columns: 1fr 1fr 1fr; } .duo:not(:has(details[open])) > :nth-child(3):last-child { grid-column: auto; } }
/* Ordres : dossiers locaux sous la ligne Recherche. */
.dos-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; margin: 2px 0 6px; flex-wrap: wrap; }
.dossiers { display: flex; flex-direction: column; gap: 8px; margin: 0 0 6px; padding: 10px 12px; border-radius: 14px; background: var(--bg); border: 1px solid var(--hair); }
.dos { display: flex; flex-direction: column; gap: 4px; }
.dos-t { font-size: 13px; font-weight: 600; min-width: 0; display: flex; gap: 6px; align-items: baseline; }
.dos-age { font-size: 12px; font-weight: 700; color: var(--muted); background: var(--surface2); border-radius: 6px; padding: 1px 5px; flex-shrink: 0; }
.dos.warn .dos-age { color: var(--amber); background: var(--amber-bg); }
.dos.bad .dos-age { color: var(--red-soft); background: var(--red-bg); }
.dos-f { font-size: 12px; font-weight: 700; white-space: nowrap; color: var(--muted); }
.dos-bar { position: relative; height: 6px; border-radius: 999px; background: var(--surface2); overflow: hidden; display: flex; }
.dos-bar i { display: block; height: 100%; }
.dos-bar .deja { background: var(--faint); }
.dos-bar .soir { background: var(--blue); }
/* Ordres : mon équipe et la mission du jour. */
.membre-o { display: flex; align-items: center; gap: 10px; }
.membre-o .avatar { flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #0B1220; font-weight: 700; }
.mission-dest { display: flex; flex-direction: column; gap: 6px; padding-left: 40px; }
.mission-dest .choice { text-align: left; align-items: flex-start; min-height: 0; padding: 8px 10px; }

/* ───── Ordres (affichage retravaillé) ───── */
.statut-ordres { flex-shrink: 0; margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--amber); background: var(--amber-bg); border: 1px solid var(--amber-line); border-radius: 999px; padding: 5px 10px; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.statut-ordres.ok { color: var(--green); background: rgba(61, 211, 154, .10); border-color: rgba(61, 211, 154, .40); }
.card.affect { gap: 0; padding-bottom: 12px; }
.lien-statut { background: none; border: 0; padding: 4px 0; color: inherit; font: inherit; cursor: pointer; text-align: right; }
.affect .svc { display: flex; flex-direction: column; border-bottom: 1px solid var(--hair); }
.affect .svc-l { display: flex; align-items: center; gap: 10px; min-height: 58px; }
.affect .svc-c { width: 4px; align-self: stretch; margin: 11px 0; border-radius: 2px; flex-shrink: 0; }
.affect .svc-t { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.affect .svc-n { font-size: 15px; font-weight: 700; }
.affect .svc-niv { font-size: 12px; font-weight: 500; color: var(--faint); white-space: nowrap; }
.affect .svc-r { font-size: 12px; }
.affect .svc-plus { padding-left: 14px; display: block; }
.affect .svc-plus:empty { display: none; }
.affect .svc-plus .dossiers { margin-bottom: 6px; }
.affect .helpbtn { width: 28px; height: 28px; margin: 0; background: transparent; border-color: var(--line); }
.affect .stepper button { width: 38px; height: 38px; font-size: 18px; }
.affect .stepper .n { min-width: 30px; text-align: center; font-size: 17px; font-weight: 700; }
.affect .svc.svc-res { border-bottom: 0; }
.seg.creux { gap: 4px; background: var(--bg-deep); border-radius: 14px; padding: 4px; }
.seg.creux button { min-height: 52px; border: 0; background: transparent; border-radius: 11px; }
.seg.creux button[aria-pressed="true"] { background: var(--amber-bg); box-shadow: inset 0 0 0 1.5px var(--amber); }
.seg.creux button[aria-pressed="true"] .d { color: var(--amber-soft); }
.card.plis { gap: 0; padding: 2px 16px; }
.plis .pli-l + .pli-l { border-top: 1px solid var(--hair); }
.plis .pli { min-height: 62px; width: 100%; gap: 10px; }
.plis .pli-chip { flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--amber); background: var(--amber-bg); border-radius: 999px; padding: 4px 9px; }
.plis .pli-c { padding: 2px 0 14px; display: flex; flex-direction: column; gap: 8px; }
.savebar.calme { background: rgba(28, 36, 66, .94); border-color: var(--line); }
.seg.creux button { height: auto; padding: 8px 4px; }
.seg.creux button .d { white-space: normal; line-height: 1.25; text-align: center; overflow: visible; }

/* ───── HP : carte « Ma zone » ───── */
.card.mazone { gap: 14px; }
.mz-tete { display: flex; align-items: stretch; gap: 12px; }
.mz-coul { width: 8px; min-height: 46px; border-radius: 4px; flex-shrink: 0; }
.mz-id { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.mz-sur { font-size: 12.5px; font-weight: 600; color: var(--muted); font-family: var(--body); }
.mz-nomrow { display: flex; align-items: center; gap: 4px; min-width: 0; }
.mz-nom { margin: 0; font-family: var(--display); font-size: clamp(24px, 7.4vw, 30px); font-weight: 800; line-height: 1.05; letter-spacing: -.6px; min-width: 0; overflow-wrap: break-word; hyphens: manual; }
.mz-crayon { width: 32px; height: 32px; flex-shrink: 0; color: var(--faint); }
.mz-scene { position: relative; }
.mz-ipz { position: absolute; top: 8px; right: 8px; display: flex; align-items: center; gap: 6px; padding: 5px 8px 5px 10px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(10, 14, 30, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--text); cursor: pointer; font: inherit; text-align: left; box-shadow: 0 8px 22px rgba(0, 0, 0, .35); }
.mz-ipz-l { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--amber-soft); }
.mz-ipz-v { font-family: var(--display); font-size: 20px; font-weight: 800; line-height: 1; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.mz-ipz-m { display: none; }
.pdelta { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 7px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pdelta.up { color: var(--green-soft); background: rgba(61, 211, 154, .14); }
.pdelta.down { color: var(--red-soft); background: var(--red-bg); }
.mz-tiles .tile { padding: 10px; }
.mz-tiles .tile .v { font-size: clamp(19px, 5.6vw, 22px); }
.mz-tiles .tile .s { font-size: clamp(10px, 3vw, 11.5px); white-space: normal; }
.cadrans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cadran { display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--bg); border: 1px solid var(--hair); border-radius: 18px; padding: 10px 8px 12px; min-width: 0; text-align: center; }
.cad-svg { width: 78px; height: 66px; flex-shrink: 0; overflow: visible; }
.cad-v { font-family: var(--display); font-size: 22px; font-weight: 800; fill: var(--text); }
.cad-txt { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; width: 100%; }
.cad-l { background: none; border: 0; padding: 0; color: var(--text); font: 700 13.5px var(--body); text-align: center; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; line-height: 1.15; }
.cad-q { width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--line); color: var(--muted); font-size: 11px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cad-d { min-height: 18px; display: flex; align-items: center; }
.cad-s { font-size: 12px; color: var(--muted); line-height: 1.25; }
.cad-d .pdelta { font-size: 12px; }
.cad-s b { font-weight: 700; }
.dos-f.ok { color: var(--green); }
.dos-f.bad { color: var(--red-soft); }
/* Échelle du bonus des figures selon leurs surnoms. */
.echelle { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; margin: 2px 0; }
.ech-p { font-size: 12px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--surface2); color: var(--faint); font-variant-numeric: tabular-nums; }
.ech-p.passe { color: var(--muted); }
.ech-p.on { background: rgba(61, 211, 154, .16); color: var(--green); box-shadow: inset 0 0 0 1px rgba(61, 211, 154, .45); }
.ech-f { color: var(--faint); font-size: 12px; }
.membre-ech { display: flex; flex-direction: column; gap: 2px; padding-left: 40px; }
.membre.membre-v { flex-direction: column; align-items: stretch; gap: 6px; }
.membre-v .membre-h { display: flex; align-items: center; gap: 12px; }
.membre-v .xp { width: 100%; }
/* Ordres : ligne de service compacte, détail repliable identique pour chaque service. */
.affect .svc-tog { background: none; border: 0; padding: 6px 0; margin: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.affect .svc-n { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.affect .svc-niv { font-size: 12px; }
.affect .svc-chev { color: var(--faint); align-self: center; transition: transform .15s; flex-shrink: 0; }
.affect .svc-r { display: block; line-height: 1.35; }
.affect .stepper button { width: 36px; height: 36px; }
.affect .stepper .n { min-width: 28px; }
.affect .svc-det { margin: 0 0 10px 14px; padding: 10px 12px; border-radius: 14px; background: var(--bg); border: 1px solid var(--hair); display: flex; flex-direction: column; gap: 8px; }
.affect .svc-det .dossiers { padding: 0; border: 0; background: none; margin: 0; }
.affect .svc.ouvert .svc-chev { color: var(--amber); }
.affect .svc-res .svc-r { white-space: normal; }

/* ───── Le Directeur : ciel du jour, signes et dilemmes ───── */
.pill.blue { background: rgba(90, 160, 240, .12); border-color: rgba(90, 160, 240, .42); color: var(--blue-soft); }
.pill.violet { background: rgba(168, 130, 255, .13); border-color: rgba(168, 130, 255, .45); color: #C9B5FF; }
.ciel-pill { cursor: pointer; font-family: var(--mono); }
.ciel-p-calme { background: rgba(255, 210, 122, .14); border-color: rgba(255, 210, 122, .45); color: #FFD27A; }
.ciel-p-montee { background: rgba(170, 182, 200, .16); border-color: rgba(170, 182, 200, .45); color: #D3DCE8; }
.ciel-p-orage { background: rgba(240, 90, 90, .16); border-color: rgba(240, 90, 90, .5); color: #FF9C9C; }
.ciel-p-eclaircie { background: rgba(61, 211, 154, .12); border-color: rgba(61, 211, 154, .42); color: var(--green-soft); }

.meteo { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ciel-montee .soir-astre { opacity: calc((1 - var(--nuit, 1)) * .45); }
.ciel-orage .soir-astre { opacity: 0; }
.ciel-orage::before, .ciel-orage::after { filter: saturate(.35) brightness(.7); }
.ciel-orage { background: linear-gradient(180deg, #2B3446 0%, #4A5568 62%, #6B7689 100%); }
.m-nuage { position: absolute; height: 22px; border-radius: 999px; background: rgba(220, 228, 240, .82); box-shadow: 14px -8px 0 2px rgba(220, 228, 240, .82), 30px 0 0 0 rgba(220, 228, 240, .82); animation: m-derive 38s linear infinite; }
.ciel-orage .m-nuage { background: rgba(70, 78, 98, .92); box-shadow: 14px -8px 0 2px rgba(70, 78, 98, .92), 30px 0 0 0 rgba(70, 78, 98, .92); }
.ciel-eclaircie .m-nuage { background: rgba(240, 244, 250, .7); box-shadow: 14px -8px 0 2px rgba(240, 244, 250, .7), 30px 0 0 0 rgba(240, 244, 250, .7); }
.m-nuage.n0 { top: 16px; left: 8%; width: 48px; animation-duration: 46s; }
.m-nuage.n1 { top: 34px; left: 46%; width: 62px; animation-duration: 58s; animation-delay: -20s; }
.m-nuage.n2 { top: 10px; left: 70%; width: 40px; animation-duration: 40s; animation-delay: -8s; }
.m-nuage.n3 { top: 46px; left: 22%; width: 56px; animation-duration: 52s; animation-delay: -30s; }
@keyframes m-derive { from { transform: translateX(-30px); } 50% { transform: translateX(30px); } to { transform: translateX(-30px); } }
.m-pluie { position: absolute; inset: 40px 0 0; background: repeating-linear-gradient(105deg, transparent 0 9px, rgba(190, 210, 240, .35) 9px 10px); background-size: 40px 40px; animation: m-pluie .5s linear infinite; }
@keyframes m-pluie { from { background-position: 0 0; } to { background-position: -10px 40px; } }
.m-eclair { position: absolute; top: 30px; left: 62%; width: 14px; height: 44px; background: #FFF3B0; clip-path: polygon(40% 0, 100% 0, 60% 42%, 95% 42%, 15% 100%, 38% 52%, 0 52%); opacity: 0; filter: drop-shadow(0 0 8px #FFE680); animation: m-eclair 5.5s infinite; }
@keyframes m-eclair { 0%, 88%, 100% { opacity: 0; } 89%, 92% { opacity: 1; } 90% { opacity: .2; } }
.m-arc { position: absolute; left: 50%; top: 30px; width: 190px; height: 190px; margin-left: -40px; border-radius: 50%; opacity: .5;
  background: radial-gradient(circle, transparent 58%, rgba(255, 80, 80, .7) 59%, rgba(255, 180, 60, .7) 62%, rgba(255, 240, 90, .7) 65%, rgba(90, 210, 120, .7) 68%, rgba(80, 150, 255, .7) 71%, rgba(150, 100, 240, .7) 74%, transparent 75%); }
@media (prefers-reduced-motion: reduce) { .m-nuage, .m-pluie, .m-eclair { animation: none; } .m-eclair { opacity: .8; } }

.card.dilemme { gap: 10px; border-color: rgba(168, 130, 255, .45); background: linear-gradient(180deg, rgba(168, 130, 255, .1), transparent 70%), var(--surface); }
.card.dilemme .kicker { color: #C9B5FF; }
.dil-q { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.35; }
.dil-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 360px) { .dil-choix { grid-template-columns: 1fr; } }
.dil-btn { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--hair); background: var(--surface2); color: var(--text); cursor: pointer; font: inherit; }
.dil-btn .t { font-weight: 700; font-size: 14px; }
.dil-btn .s { font-size: 12px; color: var(--text2); line-height: 1.3; }
.dil-btn[aria-pressed="true"] { border-color: #A882FF; background: rgba(168, 130, 255, .16); box-shadow: 0 0 0 3px rgba(168, 130, 255, .2); }
.soir-situ .pill { white-space: normal; max-width: 100%; }
/* Conseil des chefs : crise du district */
.card.crise { gap: 10px; border-color: rgba(255, 178, 63, .45); background: linear-gradient(180deg, rgba(255, 178, 63, .1), transparent 70%), var(--surface); }
.crise-plans { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 760px) { .crise-plans { grid-template-columns: repeat(3, 1fr); } }
.crise-k { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; background: var(--amber); color: #0C1124; font-weight: 800; font-size: 13px; margin-right: 4px; }
.card.crise .dil-btn[aria-pressed="true"] { border-color: var(--amber); background: var(--amber-bg); box-shadow: 0 0 0 3px rgba(255, 178, 63, .2); }
/* La relève : suspect en fuite pris en charge par une zone voisine */
.card.releve { gap: 10px; border-color: rgba(99, 176, 255, .45); background: linear-gradient(180deg, rgba(99, 176, 255, .1), transparent 70%), var(--surface); }
.card.releve .kicker { color: var(--blue-soft, #9DCBFF); }
.rel-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 360px) { .rel-choix { grid-template-columns: 1fr; } }
.card.releve .dil-btn[aria-pressed="true"] { border-color: #63B0FF; background: rgba(99, 176, 255, .16); box-shadow: 0 0 0 3px rgba(99, 176, 255, .2); }

/* Zone de non-droit : qui y va ce soir (Terrain) et bouton Rejoindre (Radio) */
.nd-cesoir { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--amber-line); border-radius: 14px; background: var(--amber-bg); }
.nd-cesoir.vide { border-style: dashed; background: transparent; }
.nd-cs-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 0; background: none; border: 0; border-top: 1px solid var(--hair); color: inherit; font: inherit; cursor: pointer; }
.nd-cesoir .kicker + .nd-cs-row, .nd-cs-t + .nd-cs-row { border-top: 0; }
.nd-cs-t { display: block; margin-top: 8px; font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--text2); }
.nd-quis { display: flex; flex-wrap: wrap; gap: 4px; }
.nd-qui { --c: #9FB0C0; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; line-height: 1; padding: 4px 7px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 14%, transparent); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.nd-qui b { font-family: var(--mono); }
.nd-qui.moi { --c: var(--amber); color: var(--amber); font-weight: 700; }
.nd-rej { color: var(--amber); font-weight: 700; }
.nd-radio { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--amber-line); }

/* Quiz express (alternative aux énigmes du jour) */
.alt-c { align-items: flex-start; text-align: left; padding: 10px 14px; min-height: 64px; }
.alt-c > span:first-child { font-size: 15.5px; }
.alt-c .s { font-size: 12.5px; line-height: 1.35; }
.qz { gap: 12px; }
.qz-q { margin: 0; font-size: 19px; line-height: 1.3; font-family: var(--display, inherit); }
.qz-pts { display: flex; gap: 5px; }
.qz-pt { width: 10px; height: 10px; border-radius: 50%; background: var(--surface2); border: 1px solid var(--hair); }
.qz-pt.cur { border-color: var(--amber); background: var(--amber-bg); }
.qz-pt.ok { background: var(--green); border-color: var(--green); }
.qz-pt.ko { background: var(--red); border-color: var(--red); }
.qz-temps { height: 8px; border-radius: 99px; background: var(--surface2); overflow: hidden; }
.qz-temps i { display: block; height: 100%; background: linear-gradient(90deg, var(--red), var(--amber) 35%, var(--green)); transform-origin: left center; animation-name: qz-vide; animation-timing-function: linear; animation-fill-mode: forwards; }
@keyframes qz-vide { to { transform: scaleX(0); } }
.qz-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qz-c { min-height: 64px; border-radius: var(--r-md); border: 1px solid var(--hair); background: var(--surface2); color: inherit; font: inherit; font-weight: 600; font-size: 14.5px; line-height: 1.25; padding: 8px 10px; box-shadow: var(--lift); cursor: pointer; transition: transform .08s; }
.qz-c:active:not([disabled]) { transform: scale(.97); }
.qz-c.bon { background: rgba(61, 211, 154, .16); border-color: var(--green); color: var(--green-soft); }
.qz-c.faux { background: rgba(255, 110, 106, .15); border-color: var(--red); color: var(--red-soft); }
.qz-c.eteint { opacity: .45; }
.qz-c[disabled] { cursor: default; }
@media (prefers-reduced-motion: reduce) { .qz-temps i { animation-name: none; } }

/* Tableau des arrestations : avis de recherche tamponnés « ARRÊTÉ » (mise à prix). */
.affiches { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 14px; background: #8A6440 radial-gradient(circle at 20% 30%, rgba(255,255,255,.08) 0 1px, transparent 1.5px) 0 0 / 9px 9px; box-shadow: inset 0 0 0 4px #5A3E26, inset 0 2px 10px rgba(0,0,0,.45); }
.affiches-t { font: 700 12px var(--f-body, system-ui); letter-spacing: .12em; text-transform: uppercase; color: #F4E6CF; text-shadow: 0 1px 0 rgba(0,0,0,.5); }
.affiches-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px 10px; }
.affiche { position: relative; margin: 0; padding: 12px 8px 8px; display: flex; flex-direction: column; align-items: center; gap: 3px; background: #F4EFE3; color: #1D1A15; transform: rotate(var(--rot, 0deg)); box-shadow: 0 6px 12px rgba(0,0,0,.4); overflow: hidden; }
.affiche-pin { position: absolute; top: 4px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FF8A84, #B0242A); box-shadow: 0 1px 2px rgba(0,0,0,.5); }
.affiche-h { font: 800 11.5px "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: .14em; text-transform: uppercase; border-top: 1.5px solid #1D1A15; border-bottom: 1.5px solid #1D1A15; padding: 1px 4px; margin-top: 4px; }
.affiche-photo { width: 76px; border: 2px solid #1D1A15; line-height: 0; filter: grayscale(.55) sepia(.25) contrast(1.05); }
.affiche-face { display: block; width: 100%; height: auto; }
.affiche-nom { font: 800 13px "Barlow Condensed", "Arial Narrow", sans-serif; text-transform: uppercase; letter-spacing: .04em; text-align: center; line-height: 1.1; }
.affiche-aff { font-size: 12px; font-style: italic; text-align: center; line-height: 1.25; color: #4A4136; }
.affiche-pied { font-size: 11px; color: #6A5F52; text-align: center; }
.affiche-tampon { position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%) rotate(-18deg); padding: 2px 8px; border: 3px solid #C8202A; border-radius: 4px; color: #C8202A; font: 900 19px "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: .1em; text-transform: uppercase; opacity: .86; mix-blend-mode: multiply; pointer-events: none; }
/* Jauge des skins cliquable (incidents du jour). */
.jauge-btn { width: 100%; border: 0; background: transparent; color: inherit; font: inherit; padding: 6px 0 0; cursor: pointer; text-align: left; gap: 8px; }
.jauge-btn:hover .muted, .jauge-btn:focus-visible .muted { color: var(--amber); }
/* Zone de non-droit : ce que rapporte un secteur. */
.nd-gains { border: 1px solid var(--hair); border-radius: 10px; padding: 6px 10px; background: var(--surface2); }
.nd-gains summary { cursor: pointer; font-weight: 600; }
.nd-gains .g { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin-top: 6px; }
/* Classements « La course » : un couloir par zone, barre à sa couleur, composition de l'IPZ dessous. */
.crs-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.crs-tabs::-webkit-scrollbar { display: none; }
.crs-tabs button { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 8px 12px; min-height: 38px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--text2); font: 700 13px var(--body); cursor: pointer; }
.crs-tabs button i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.crs-tabs button[aria-selected="true"] { background: var(--c); border-color: var(--c); color: #0C1124; }
.crs-tabs button[aria-selected="true"] i { background: #0C1124; }
.crs { display: grid; grid-template-columns: 24px 1fr; gap: 8px; align-items: start; }
.crs-r { font: 800 15px var(--body); color: var(--muted); text-align: center; line-height: 38px; }
.crs.me .crs-r { color: var(--amber); }
.crs-col { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.crs-piste { position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: pointer; height: 38px; border-radius: 10px; background: repeating-linear-gradient(90deg, var(--surface2) 0 calc(10% - 1px), var(--hair) calc(10% - 1px) 10%); overflow: hidden; }
.crs.me .crs-piste { box-shadow: 0 0 0 1.5px var(--amber); }
.crs-barre { position: absolute; inset: 0 auto 0 0; border-radius: 10px; }
.crs-lbl { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 10px; color: #fff; font: 700 13px var(--body); text-shadow: 0 1px 2px rgba(0,0,0,.55); white-space: nowrap; }
.crs-nom { overflow: hidden; text-overflow: ellipsis; }
.crs-v { font: 800 15px var(--display, inherit); }
.crs.nc { opacity: .55; }
.crs-compo { display: flex; gap: 1px; height: 6px; border-radius: 3px; overflow: hidden; min-width: 30px; }
.crs-compo i { display: block; height: 100%; }
.crs-leg { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 2px; }
.crs-leg span { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text2); }
.crs-leg i { width: 9px; height: 9px; border-radius: 2px; }
/* Entraînement : tuiles des énigmes et des mini-jeux (au lieu d'un menu déroulant). */
.tr-grp { font: 700 12px var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.tr-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.tr-tuile { --c: var(--amber); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 92px; padding: 10px 6px; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 16%, var(--surface2)), var(--surface2)); color: var(--text); font: 600 12.5px var(--body); text-align: center; cursor: pointer; }
.tr-tuile:hover, .tr-tuile:focus-visible { border-color: var(--c); }
.tr-tuile.petite { min-height: 74px; }
.tr-tuile[aria-pressed="true"] { border-color: var(--amber); background: var(--amber-bg); box-shadow: 0 0 0 1px var(--amber) inset; }
.tr-ico { font-size: 24px; line-height: 1; }
.tr-nom { line-height: 1.2; }
.tr-s { font-size: 12px; color: var(--muted); }
.tr-entete { width: 100%; border: 0; background: transparent; color: inherit; padding: 0; cursor: pointer; text-align: left; }

/* ───── Pactes (onglet de la Carte) ───── */
.seg3.deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pacte-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--surface3); flex-shrink: 0; }
.pacte-ligne { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pacte-ligne strong { overflow-wrap: anywhere; }
.puce { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }
.jours { display: flex; gap: 3px; }
.jours i { width: 6px; height: 6px; border-radius: 50%; background: var(--surface3); }
.jours i.f { background: var(--green); }
hr.sep { border: 0; border-top: 1px solid var(--hair); margin: 2px 0; width: 100%; }
.zchips { display: flex; flex-wrap: wrap; gap: 6px; }
.zchip { display: inline-flex; align-items: center; gap: 2px; min-height: 36px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--hair); background: var(--surface2); color: var(--text2); font: 600 12.5px var(--body); cursor: pointer; }
.zchip[aria-pressed="true"] { border-color: var(--amber); background: var(--amber-bg); color: var(--amber-hi); }
.zchip[disabled] { opacity: .45; cursor: default; }
.choice.pacte-choix { flex-direction: row; align-items: flex-start; justify-content: flex-start; gap: 10px; text-align: left; min-height: 0; padding: 10px; }
.pacte-form { border-top: 1px solid var(--hair); padding-top: 10px; }
.defi-score { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; text-align: center; }
.defi-score strong { font-family: var(--display); font-size: 30px; font-weight: 800; line-height: 1; }
/* Demi-pièce : un morceau de PV déchiré, papier clair comme les pièces de l'enquête. */
.demi-piece { position: relative; display: flex; flex-direction: column; gap: 4px; background: var(--paper); color: var(--ink); border-radius: 4px; padding: 12px 14px; box-shadow: 0 6px 14px rgba(0, 0, 0, .35); }
.demi-piece .small { color: var(--ink2); }
.demi-piece.haut { padding-bottom: 18px; clip-path: polygon(0 0, 100% 0, 100% 88%, 94% 96%, 86% 89%, 77% 98%, 68% 90%, 58% 97%, 48% 89%, 38% 98%, 28% 90%, 18% 97%, 9% 89%, 0 96%); }
.demi-piece.bas { padding-top: 18px; clip-path: polygon(0 4%, 9% 11%, 18% 3%, 28% 10%, 38% 2%, 48% 11%, 58% 3%, 68% 10%, 77% 2%, 86% 11%, 94% 4%, 100% 12%, 100% 100%, 0 100%); }

/* Qui y va ce soir : version allégée (une ligne par secteur, pions ronds aux couleurs des zones). */
.nd-cs-row { gap: 8px; padding: 7px 0; }
.nd-cs-ico { font-size: 15px; width: 20px; text-align: center; flex-shrink: 0; }
.nd-pions { display: inline-flex; align-items: center; }
.nd-pion { --c: #9FB0C0; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; margin-left: -5px; font: 800 11px var(--body); color: #0C1124; background: var(--c); border: 2px solid var(--surface, #141B33); }
.nd-pion:first-child { margin-left: 0; }
.nd-pion.moi { width: auto; padding: 0 6px; border-radius: 999px; font-size: 11.5px; }
.nd-pion.plus { background: var(--surface3); color: var(--text2); }
/* Défi d'endurance : nominette du recordman sur les tuiles d'entraînement */
.nominette { display: inline-flex; align-items: center; gap: 3px; margin-top: 4px; padding: 2px 7px; border-radius: 6px; font: 700 12px var(--body); color: #241400; background: linear-gradient(180deg, #FFD27A, #E8A93A); box-shadow: inset 0 -1px 0 rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.15); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nominette.moi { background: linear-gradient(180deg, #8EF0C6, #3DD39A); color: #06281B; }
.nominette.vide { background: none; box-shadow: none; color: var(--faint); font-weight: 600; padding: 2px 0; }

/* ─────────── Dossier clos (débrief d'affaire) ─────────── */
.db-lien { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid #A9824A; background: linear-gradient(180deg, #E2C48E, #D2AE72); color: #2B2014; cursor: pointer; font: inherit; box-shadow: 0 2px 0 #8C6A38; }
.db-lien:active { transform: translateY(1px); box-shadow: 0 1px 0 #8C6A38; }
.db-lien-ico { font-size: 24px; line-height: 1; }
.db-lien-t { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.25; }
.db-lien-t span { font-size: 12px; color: #5A4528; }
.db-lien.compact { padding: 8px 10px; }
.db-lien.compact .db-lien-ico { font-size: 20px; }
.paper .db-lien { margin-top: 4px; }

.db-ecran { gap: 14px; }
.db-chemise { position: relative; padding: 26px 8px 8px; border-radius: 6px 16px 16px 16px; background: #C9A26A linear-gradient(160deg, rgba(255,255,255,.12), rgba(0,0,0,.08)); box-shadow: var(--float), inset 0 0 0 1px rgba(0,0,0,.18); }
.db-onglet { position: absolute; top: -14px; left: 0; padding: 6px 16px 10px; border-radius: 10px 10px 0 0; background: #C9A26A; color: #3D2C15; font: 800 12px var(--display); letter-spacing: .14em; text-transform: uppercase; }
.db-feuille { background: var(--paper); color: var(--ink); border-radius: 4px 10px 10px 10px; padding: 16px 14px 14px; display: flex; flex-direction: column; gap: 18px; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.db-k { font-size: 12px; font-weight: 700; color: var(--press); text-transform: uppercase; letter-spacing: .8px; }
.db-tete { position: relative; display: flex; flex-direction: column; gap: 6px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.db-tete h1 { margin: 0; font-family: var(--serif); font-weight: 800; font-size: 26px; line-height: 1.05; padding-right: 92px; }
.db-tampon { position: absolute; top: 4px; right: -2px; max-width: 108px; text-align: center; transform: rotate(9deg); padding: 4px 8px; border: 3px solid currentColor; border-radius: 6px; font: 800 13px var(--display); text-transform: uppercase; letter-spacing: .08em; line-height: 1.05; opacity: .88; mix-blend-mode: multiply; animation: dbTampon .45s cubic-bezier(.2,1.4,.4,1) both; }
.db-tampon.vert { color: #23744A; } .db-tampon.ambre { color: #B0650F; } .db-tampon.rouge { color: #B0281F; }
@keyframes dbTampon { from { transform: rotate(9deg) scale(1.9); opacity: 0; } to { transform: rotate(9deg) scale(1); opacity: .88; } }
.db-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 4px; }
.db-stats span { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 6px 2px; background: var(--paper2); border-radius: 8px; font-size: 12px; color: var(--ink3); text-align: center; line-height: 1.15; }
.db-stats b { font: 800 22px var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }

.db-auteur { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: start; }
.db-photo { border: 3px solid var(--ink); background: #fff; line-height: 0; transform: rotate(-2deg); box-shadow: 2px 3px 0 rgba(0,0,0,.18); }
.db-face { display: block; width: 100%; height: auto; }
.db-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.db-id h2 { margin: 0; font-family: var(--serif); font-weight: 800; font-size: 21px; line-height: 1.1; }
.db-role { font-size: 12px; color: var(--ink3); font-style: italic; }
.db-id p, .db-moi p { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--ink2); }

.db-sec { display: flex; flex-direction: column; gap: 8px; }
.db-h { margin: 0; font-family: var(--serif); font-weight: 700; font-size: 17px; line-height: 1.2; border-bottom: 1px solid var(--paper-rule); padding-bottom: 4px; }
.db-aide { margin: 0; font-size: 12px; line-height: 1.4; color: var(--ink3); }
.db-cles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.db-cles.quatre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.db-cle { background: #fff; border: 1px solid var(--paper-rule); border-left: 4px solid #2F6B45; border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.db-cle > summary, div.db-cle { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; list-style: none; cursor: pointer; }
div.db-cle { cursor: default; }
.db-cle > summary::-webkit-details-marker { display: none; }
.db-cle.vide { border-left-color: #B9AE98; background: #F7F3EA; }
.db-cle.vide .db-cle-t { color: var(--ink3); }
.db-cle-h { display: flex; align-items: center; gap: 6px; }
.db-cle-ico { font-size: 16px; line-height: 1; }
.db-cle-r { font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--ink3); }
.db-cle-t { font-size: 13px; font-weight: 600; line-height: 1.25; }
.db-cle-q { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.db-cle-x { margin: 0; padding: 0 10px 10px; font-size: 12.5px; line-height: 1.45; color: var(--ink2); }
.db-cle[open] { box-shadow: 0 3px 10px rgba(0,0,0,.12); }
.db-j { font: 700 12px var(--display); color: #fff; background: var(--ink); border-radius: 5px; padding: 1px 5px; }
.db-zone { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ink2); background: var(--paper2); border-radius: 999px; padding: 1px 7px 1px 4px; white-space: nowrap; }
.db-zone i { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.2); }
.db-zone.moi { background: #FFE2A8; }
.db-tag { font-size: 12px; color: var(--ink3); font-style: italic; }
.db-tag.vide { color: #9A8E78; }
.db-mobile { margin: 0; font-family: var(--serif); font-size: 17px; font-style: italic; color: var(--ink); }

.db-moi { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 12px; background: #E3ECF7; border: 1px solid #B7C9E2; }
.db-moi .db-k { color: #1F5A9A; }
.db-jauge { display: flex; gap: 6px; }
.db-jauge i { flex: 1; height: 10px; border-radius: 999px; background: #C3CFDF; }
.db-jauge i.ok { background: #2F6B45; }
.db-manque { color: #7A2A20 !important; }
.db-chiffres { display: flex; gap: 14px; font-size: 12px; color: var(--ink3); }
.db-chiffres b { font: 800 16px var(--display); color: var(--ink); margin-right: 3px; }

.db-pistes { display: flex; flex-direction: column; gap: 8px; }
.db-piste { display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: start; padding: 8px; border-radius: 10px; background: var(--paper2); }
.db-piste.theatre { box-shadow: inset 0 0 0 2px #B0650F; }
.db-mini { border: 2px solid var(--ink3); line-height: 0; background: #fff; filter: grayscale(.35); }
.db-pi { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.db-pn { font-weight: 700; font-size: 14px; line-height: 1.2; }
.db-pn small { font-weight: 400; font-style: italic; color: var(--ink3); font-size: 12px; }
.db-pe { font-size: 12px; color: var(--ink2); line-height: 1.3; }
.db-faux { font-size: 12px; font-weight: 700; color: #B0281F; }

.db-zones { display: flex; flex-direction: column; gap: 6px; }
.db-zr { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 12px; padding: 3px 4px; border-radius: 6px; }
.db-zr.moi { background: #FFF1D2; }
.db-zn { display: flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.db-zn i { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.db-zb { display: flex; height: 10px; border-radius: 999px; background: var(--paper2); overflow: hidden; }
.db-zb b { background: #D98A1C; } .db-zb s { background: #4C86C8; text-decoration: none; }
.db-zi { display: flex; gap: 4px; align-items: center; min-width: 54px; justify-content: flex-end; }
.db-zi > span:not(.db-don) { font-size: 13px; }
.db-zi > span[title="Fausse accusation"] { color: #B0281F; font-weight: 800; }
.db-don { font-size: 12px; font-weight: 700; color: #1F5A9A; }
.db-leg { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 2px 0 0; font-size: 12px; color: var(--ink3); }
.db-leg span { display: inline-flex; align-items: center; gap: 4px; }
.db-leg b { width: 10px; height: 8px; border-radius: 3px; } .db-leg b.amb { background: #D98A1C; } .db-leg b.bleu { background: #4C86C8; }

.db-chrono { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; position: relative; }
.db-chrono::before { content: ''; position: absolute; left: 19px; top: 8px; bottom: 8px; width: 2px; background: var(--paper-rule); }
.db-chrono li { display: grid; grid-template-columns: 40px 1fr; gap: 8px; padding: 4px 0; position: relative; }
.db-cj { justify-self: center; z-index: 1; font: 800 12px var(--display); background: var(--ink); color: var(--paper); border-radius: 999px; padding: 3px 7px; height: fit-content; }
.db-chrono li.fin .db-cj { background: var(--press); }
.db-ce { margin: 0 0 3px; font-size: 12.5px; line-height: 1.35; color: var(--ink2); }
.db-ce.faux { color: #B0281F; } .db-ce.decouverte, .db-ce.fin { font-weight: 700; color: var(--ink); }
.db-par { font-size: 12px; color: var(--ink3); white-space: nowrap; }
.db-pied { margin: 0; font-size: 12px; color: var(--ink3); text-align: center; font-style: italic; }
@media (min-width: 720px) {
  .db-chemise { padding: 30px 14px 14px; }
  .db-feuille { padding: 22px 24px 20px; }
  .db-auteur { grid-template-columns: 124px 1fr; }
  .db-cles.quatre { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .db-tampon { animation: none; } }
.tile .v.v-euros, .mz-tiles .tile .v.v-euros { font-size: clamp(15px, 4.4vw, 19px); letter-spacing: -.6px; }

/* Prime du Challenge (semaine) */
.tr-sem { font: 600 11.5px var(--body); color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-sem.moi { color: var(--green-soft); }
.prime-chal { display: block; border-radius: 14px; border: 1px solid rgba(255, 194, 77, .38); background: linear-gradient(100deg, rgba(255, 194, 77, .17), rgba(255, 194, 77, .04)); }
.prime-b { list-style: none; display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; }
.prime-b::-webkit-details-marker { display: none; }
.prime-m { font: 800 18px var(--display, var(--body)); color: #FFC24D; white-space: nowrap; }
.prime-x { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.3; color: #e7dcc2; }
.prime-x b, .prime-x strong { color: #fff; }
.prime-q { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid rgba(255, 194, 77, .6); color: #FFC24D; font-weight: 700; font-size: 12px; }
.prime-chal[open] .prime-q { background: rgba(255, 194, 77, .2); color: #fff; }
.prime-c { display: flex; flex-direction: column; gap: 6px; padding: 0 12px 12px; }
/* Challenge : une ligne illustrée par mini-jeu (image du jeu, record, ton niveau) */
.lgn-l { display: grid; gap: 8px; }
.lgn { --c: var(--amber); position: relative; display: grid; grid-template-columns: 96px 1fr auto; gap: 11px; align-items: center; width: 100%; padding: 6px; border-radius: 15px; border: 1px solid var(--line); background: var(--surface2); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: transform .12s, border-color .15s; }
.lgn:active { transform: scale(.98); }
.lgn:hover, .lgn:focus-visible { border-color: var(--c); }
.lgn img { width: 96px; height: 72px; border-radius: 10px; object-fit: cover; display: block; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.lgn-t { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.lgn-n { font: 800 15px var(--display, var(--body)); line-height: 1.1; }
.lgn-sv { font-size: 12px; font-weight: 600; color: var(--c); margin: 2px 0 5px; }
.lgn-t .nominette { margin: 0; }
.lgn-moi { text-align: right; padding-right: 6px; }
.lgn-moi b { display: block; font: 800 20px var(--display, var(--body)); }
.lgn-moi span { font-size: 12px; color: var(--muted); }
.lgn-moi.top b { color: var(--green-soft, #3DD39A); }
.aff-prime { position: absolute; z-index: 1; top: -5px; left: -5px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 800 12px var(--body); color: #3a2500; background: linear-gradient(180deg, #FFE08A, #E3A12E); box-shadow: 0 0 10px rgba(255, 194, 77, .6); }
.prime-t { font: 700 13.5px var(--body); color: #FFD27A; }
.prime-l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.prime-l li { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.prime-l li span:last-child { font-weight: 600; text-align: right; }
.prime-d summary { cursor: pointer; }
.prime-d[open] .prime-l { margin-top: 4px; }

/* Skins d'octobre 2026 : petites animations de la scène du commissariat */
@keyframes hp-bulles { 0% { transform: translateY(6px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-10px); opacity: 0; } }
.hp-bulles { animation: hp-bulles 3.6s linear infinite; }
@keyframes hp-flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.hp-flotte { animation: hp-flotte 2.2s ease-in-out infinite; }
@keyframes hp-pivote { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
.hp-pivote { animation: hp-pivote 6s ease-in-out infinite; }
@keyframes hp-manivelle { 0% { transform: scaleX(1); } 50% { transform: scaleX(-1); } 100% { transform: scaleX(1); } }
.hp-manivelle { animation: hp-manivelle 4s ease-in-out infinite; }
@keyframes hp-volant { 0%, 80% { transform: rotate(0); } 92%, 100% { transform: rotate(90deg); } }
.hp-volant { animation: hp-volant 7s ease-in-out infinite; }
@keyframes hp-clignote { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.hp-clignote { animation: hp-clignote 3s ease-in-out infinite; }
@keyframes hp-fumee { 0% { transform: translate(0, 0) scale(.6); opacity: .8; } 100% { transform: translate(4px, -10px) scale(1.4); opacity: 0; } }
.hp-fumee { animation: hp-fumee 2.8s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: reduce) { .hp-bulles, .hp-flotte, .hp-pivote, .hp-manivelle, .hp-volant, .hp-clignote, .hp-fumee { animation: none; } }

/* Bilan de saison : une de Gazette en tête, imprévus à remettre en état ou à accepter */
.card.bilan { display: flex; flex-direction: column; gap: 12px; }
.bil-une { background: var(--paper); color: var(--ink); border-radius: 14px; padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.bil-ed { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--press); font-weight: 700; border-bottom: 1px solid var(--paper-rule); padding-bottom: 5px; }
.bil-titre { font-family: var(--serif); font-size: 22px; line-height: 1.15; margin: 0; color: var(--ink); text-wrap: balance; }
.bil-chapo { margin: 0; font-size: 14px; color: var(--ink2); }
.bil-jauge { position: relative; height: 10px; border-radius: 5px; background: var(--paper2); border: 1px solid var(--paper-rule); margin-top: 4px; }
.bil-jauge i { position: absolute; inset: 0 auto 0 0; background: var(--ink); border-radius: 5px; }
.bil-jauge b { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--press); }
.bil-cas { display: grid; grid-template-columns: 44px 1fr; gap: 10px; padding: 12px; border-radius: 14px; background: var(--surface2); border: 1px solid var(--hair); }
.bil-cas > .rel-choix, .bil-cas > p { grid-column: 1 / -1; }
.bil-cas.paye { border-color: rgba(61, 211, 154, .5); }
.bil-cas.accepte { opacity: .8; }
.bil-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--amber-bg); color: var(--amber); display: grid; place-items: center; }
.bil-ic svg { width: 26px; height: 26px; }
.bil-eff { align-self: start; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--red-bg); color: var(--red-soft); width: fit-content; }
.bil-cas.paye .bil-eff { background: rgba(61, 211, 154, .12); color: var(--green-soft); }
.card.bilan .dil-btn[aria-pressed="true"] { border-color: var(--amber); background: var(--amber-bg); box-shadow: 0 0 0 3px rgba(255, 178, 63, .2); }
.card.bilan .dil-btn:disabled { opacity: .45; cursor: not-allowed; }

/* ───── Formes d'énigmes ───── */
.forme-nom { align-self: flex-start; font: 600 12px var(--body); color: var(--amber-soft); background: var(--amber-bg); border: 1px solid var(--amber-line); border-radius: 999px; padding: 2px 10px; }

/* Digicode : boîtier métal brossé, touches inox, poudre sur les touches usées */
.dg-form { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 4px; }
.dg { width: min(260px, 100%); padding: 16px 16px 18px; border-radius: 18px; background: linear-gradient(160deg, #4A5268, #2B3144 55%, #20253A); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -2px 0 rgba(0, 0, 0, .35), 0 10px 22px rgba(0, 0, 0, .45); display: flex; flex-direction: column; gap: 14px; }
.dg-tete { display: flex; align-items: center; gap: 10px; }
.dg-led { width: 10px; height: 10px; border-radius: 50%; background: #5B1E1E; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5); flex-shrink: 0; }
.dg.ouvert .dg-led { background: #3DD39A; box-shadow: 0 0 10px #3DD39A; }
.dg.refuse .dg-led { background: #FF4D47; box-shadow: 0 0 10px #FF4D47; }
.dg-ecran { flex: 1; display: flex; justify-content: center; gap: 6px; padding: 8px 10px; border-radius: 8px; background: #0E1A12; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .7); }
.dg-c { width: 22px; height: 30px; display: grid; place-items: center; border-bottom: 2px solid rgba(120, 226, 150, .25); font: 600 22px var(--code); color: #8FF0A4; text-shadow: 0 0 6px rgba(143, 240, 164, .55); }
.dg-c.plein { border-bottom-color: rgba(120, 226, 150, .55); }
.dg.refuse .dg-c { color: #FF9E99; text-shadow: 0 0 6px rgba(255, 110, 106, .5); }
.dg-touches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dg-t { position: relative; height: 52px; border: 0; border-radius: 12px; font: 700 21px var(--display); color: #2A2F3E; cursor: pointer; touch-action: manipulation;
  background: radial-gradient(circle at 35% 30%, #F4F6FA, #C9CFDB 70%, #A9B0BF); box-shadow: 0 3px 0 #6E7587, 0 5px 8px rgba(0, 0, 0, .35); transition: transform .06s, box-shadow .06s; }
.dg-t:active, .dg-t.appui { transform: translateY(2px); box-shadow: 0 1px 0 #6E7587, 0 2px 4px rgba(0, 0, 0, .35); }
.dg-t.use i { position: absolute; inset: 7px 9px; border-radius: 50%; pointer-events: none; opacity: .75;
  background: radial-gradient(ellipse at 45% 50%, rgba(70, 60, 50, .55), rgba(70, 60, 50, .28) 45%, transparent 70%),
              repeating-radial-gradient(ellipse at 50% 55%, transparent 0 2px, rgba(60, 50, 40, .18) 2px 3px); }
.dg-t.eff { color: #8A2A25; font-size: 17px; }
.dg-t.ok { color: #fff; background: radial-gradient(circle at 35% 30%, #6FE3AE, #2FA875 70%); box-shadow: 0 3px 0 #1D6B4A, 0 5px 8px rgba(0, 0, 0, .35); }
.dg-t:disabled { cursor: default; }
.dg-form.fini .dg { opacity: .95; }

/* La caisse : la liasse saisie */
.ca-liasse { display: flex; align-items: baseline; justify-content: center; gap: 8px; font-size: 14px; color: var(--text2); }
.ca-n { font: 700 26px var(--display); color: var(--text); }
.ca-sep { color: var(--faint); }
.ca-coupures { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ca-b { font: 700 13px var(--display); padding: 6px 10px; border-radius: 5px; color: #1D1A15; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35), 0 2px 4px rgba(0, 0, 0, .3); }
.ca-5 { background: #B9B3A8; } .ca-10 { background: #E39A8F; } .ca-20 { background: #8FB5E3; } .ca-50 { background: #E8B76C; } .ca-100 { background: #8FD3A0; }

/* Journal des badges */
table.horaire.bd tr.bd-arch td { color: var(--amber-hi); font-weight: 600; }

/* Entraînement aux énigmes : liste illustrée et barre de l'énigme choisie */
.vig { width: 96px; height: 72px; border-radius: 10px; display: block; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); flex-shrink: 0; }
.vig-ico { display: grid; place-items: center; font-size: 30px; background: var(--surface3); }
.lgn-en .lgn-sv { margin: 2px 0 2px; }
.lgn-f { font-size: 12px; color: var(--muted); line-height: 1.3; }
.tr-barre .vig { width: 64px; height: 48px; border-radius: 8px; }
.tr-retour { flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--text2); display: grid; place-items: center; transform: scaleX(-1); cursor: pointer; }
.tr-retour:hover { border-color: var(--c); color: var(--text); }
.tr-titre { font: 800 16px var(--display); line-height: 1.15; }
.tr-lbl { font-size: 13px; font-weight: 600; }
.seg3 { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 4px; background: var(--bg); border: 1px solid var(--hair); border-radius: 16px; padding: 4px; }
.seg3 button { min-height: 44px; min-width: 0; border: none; border-radius: 12px; background: transparent; color: var(--text2); font: 600 13px var(--body); padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg3 button[aria-selected="true"] { background: var(--surface3); color: var(--text); font-weight: 700; box-shadow: var(--lift), 0 2px 8px rgba(0, 0, 0, .3); }

/* HP allégée */
.hp.compacte .todo { min-height: 46px; padding: 8px 12px; }
.hp.compacte .todo .tiny { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soir-faits { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--green-soft); padding: 2px 4px 0; line-height: 1.3; }
.soir-faits svg { flex-shrink: 0; }
.hp.compacte .cadrans { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.hp.compacte .cadran { padding: 6px 2px 8px; border-radius: 14px; gap: 0; }
.hp.compacte .cad-svg { width: 58px; height: 48px; }
.hp.compacte .cad-v { font-size: 21px; }
.hp.compacte .cad-txt { gap: 2px; }
.hp.compacte .cad-l { font-size: 12px; }
.hp.compacte .cad-q { display: none; }
.hp.compacte .cad-d { min-height: 15px; }
.hp.compacte .cad-d .pdelta { font-size: 11.5px; }
.hp.compacte .cad-s { font-size: 11.5px; line-height: 1.2; }
.nuit-plus summary, .alertes-plus summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--blue-soft); list-style: none; }
.nuit-plus summary::-webkit-details-marker, .alertes-plus summary::-webkit-details-marker { display: none; }
.nuit-plus summary::after, .alertes-plus summary::after { content: ' ›'; }
.nuit-plus[open] summary::after, .alertes-plus[open] summary::after { content: ' ⌄'; }
.alertes-plus summary { padding: 4px 2px; color: var(--muted); }
/* Allégée : ventes, équipe et trophées sur une seule ligne de trois tuiles (une seule ligne de résumé) */
.hp.compacte .duo:not(:has(details[open])) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hp.compacte .duo:not(:has(details[open])) > :nth-child(3):last-child { grid-column: auto; }
.hp.compacte .duo:not(:has(details[open])) > details.repli > summary { padding: 10px 8px; flex-direction: column; gap: 4px; }
.hp.compacte .duo:not(:has(details[open])) > details.repli > summary .tiny { -webkit-line-clamp: 1; font-size: 12px; }
.hp.compacte .cad-s { white-space: normal; font-size: 11px; text-wrap: balance; overflow-wrap: anywhere; max-width: 100%; }
/* Cadrans : rien ne déborde de la case, même avec une grande taille de texte sur le téléphone */
.hp.compacte .cadran { overflow: hidden; }
.hp.compacte .cad-l { font-size: clamp(9.5px, 2.85vw, 11.5px); letter-spacing: -.01em; max-width: 100%; }
.hp.compacte .cad-s b { white-space: nowrap; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--blue-soft); font: inherit; text-decoration: underline; cursor: pointer; }
.inc-row.inc-actu { border-color: rgba(255, 178, 62, .45); }

/* Enquête (liste) : appui fédéral sur une ligne, pastilles d'état */
.enq-ligne { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.enq-ligne .chip { min-height: 30px; padding: 0 11px; }
.enq-pastilles .pill { white-space: normal; }

/* Rapport de la nuit : une ligne par fait, icône du service et liseré de ton */
.faits { display: flex; flex-direction: column; gap: 4px; }
.fait { display: flex; gap: 9px; align-items: flex-start; padding: 6px 9px; border-radius: 10px; background: var(--surface2); border-left: 3px solid var(--hair); line-height: 1.4; }
.fait.bon { border-left-color: var(--green, #3DD39A); }
.fait.mauvais { border-left-color: var(--red-soft, #FF7A7A); }
.fait.alerte { background: var(--red-bg); }
.fait-i { font-size: 15px; line-height: 1.25; flex-shrink: 0; width: 18px; text-align: center; }
.fait strong { color: var(--text); }
details.formule > summary { cursor: pointer; list-style: none; }
details.formule > summary::-webkit-details-marker { display: none; }
details.formule[open] > summary { margin-bottom: 4px; }

/* Terrain : la carte choisit le secteur ; le reste se replie */
.nd-autres > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 10px 14px; border: 1px solid var(--hair); border-radius: 14px; color: var(--text2); font-weight: 600; }
.nd-autres > summary::-webkit-details-marker { display: none; }
.nd-autres > summary svg { margin-left: auto; transition: transform .15s; }
.nd-autres[open] > summary svg { transform: rotate(90deg); }
.nd-fiche { border-color: var(--amber-line); }

/* Tuiles illustrées de l'HP */
.vign { display: block; flex-shrink: 0; width: 64px; line-height: 0; }
.vign-svg { width: 100%; height: auto; display: block; }
.duo:not(:has(details[open])) > details.repli > summary { flex-direction: column; align-items: stretch; }
.duo:not(:has(details[open])) > details.repli > summary .vign { width: 100%; }
.duo > details.repli[open] > summary .vign { width: 56px; }

/* Profil : carte de joueur */
.profil-carte { gap: 12px; overflow: hidden; }
.pc-scene { margin: -16px -16px 0; line-height: 0; border-bottom: 3px solid var(--zc); }
.pc-scene svg { width: 100%; height: auto; display: block; }
.pc-id { display: flex; align-items: center; gap: 12px; }
.pc-insigne { flex-shrink: 0; line-height: 0; }
.pc-ecu { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--zc) 22%, transparent); border: 1px solid var(--zc); color: var(--zc); }
.pc-pseudo { font-family: var(--display, inherit); font-size: 24px; font-weight: 800; line-height: 1.05; }
.pc-grade { display: flex; flex-direction: column; gap: 6px; }
.pc-barre { display: block; height: 8px; border-radius: 99px; background: var(--surface2); overflow: hidden; }
.pc-barre > span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--amber), #FFD27A); }
.pc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pc-stat { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 9px 4px; border-radius: 12px; background: var(--surface2); }
.pc-stat .v { font-family: var(--mono); font-size: 19px; font-weight: 700; }
.pc-stat .v small { font-size: 12px; color: var(--muted); }
.pc-stat .l { font-size: 12px; color: var(--text2); }
.pc-titres { display: flex; flex-wrap: wrap; gap: 6px; }
.pc-plaque { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 6px; font-size: 12px; font-weight: 700; color: #2A1E08; background: linear-gradient(180deg, #FFD98A, #E6A93A); box-shadow: inset 0 -2px 0 rgba(0,0,0,.18); }
.pc-plaque small { font-weight: 600; opacity: .75; }
.pc-plaque.argent { background: linear-gradient(180deg, #E8ECF5, #AEB7CC); }
.pc-affiches { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.pc-affiche { flex-shrink: 0; width: 54px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 3px 6px; background: #EFE3C4; color: #3B2F1C; border-radius: 3px; font-size: 12px; font-weight: 700; transform: rotate(-2deg); }
.pc-affiche:nth-child(even) { transform: rotate(2deg); }
.pc-affiche b { display: block; width: 100%; text-align: center; background: #B5342C; color: #EFE3C4; font-size: 11px; letter-spacing: .04em; }
@media (min-width: 720px) { .pc-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* Énigmes : changer / autre façon, sur une ligne */
.quete-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: -4px; }
.quete-actions .chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }

/* PC : navigation en barre latérale à gauche (plus de dock qui flotte par-dessus le contenu) */
@media (min-width: 1000px) and (hover: hover) and (pointer: fine) {
  #app { max-width: 1228px; padding-left: 108px; box-sizing: border-box; }
  main.screen { padding-bottom: 48px; }
  nav.tabs { top: 50%; bottom: auto; left: max(12px, calc(50% - 614px + 8px)); transform: translateY(-50%); width: 84px; max-width: none; flex-direction: column; gap: 4px; padding: 10px 6px; border-radius: 26px; }
  nav.tabs a { flex: none; min-height: 58px; padding: 6px 0; font-size: 12px; }
  nav.tabs a.centre .rond { margin-top: 0; width: 52px; height: 52px; }
  nav.tabs a.centre .dot { top: 2px; right: 6px; }
  nav.tabs .dot { right: 14px; }
  /* La barre de validation suit le contenu (juste sous l'écran) au lieu de rester collée au bas d'un grand écran ;
     sur un écran long, elle reste accrochée en bas de la fenêtre pendant le défilement. */
  body:has(.savebar) main.screen { flex: none; padding-bottom: 20px; }
  .savebar { position: sticky; left: auto; transform: none; bottom: 20px; margin: 4px auto 28px; width: calc(100% - 56px); max-width: 600px; }
  .inst-barre { bottom: 20px; margin-left: 54px; }
}
/* Tuiles Agents / Budget / Véhicules : le texte se replie au lieu de déborder sur petit écran */
.tile { min-width: 0; overflow: hidden; }
.tile .s, .tile .l { min-width: 0; }

/* Ordres : remplissage des services (une case par agent dont le service a besoin) */
.barre-aff { display: flex; gap: 2px; margin: 2px 0 2px; }
.barre-aff i { flex: 1; height: 9px; border-radius: 3px; min-width: 3px; }
.barre-aff i.libre { border: 1.5px dashed var(--faint); box-sizing: border-box; }
.legende-cases { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.legende-cases > span { display: inline-flex; align-items: center; gap: 5px; }
.cases-l { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 0 9px 14px; }
.cases { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; min-width: 0; }
.case { width: 22px; height: 22px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
.case.pleine { background: var(--c); }
.case.plus { border: 1.5px solid var(--c); opacity: .6; }
.case.vide { border: 1.5px dashed var(--faint); opacity: .85; }
.case.mini { width: 12px; height: 12px; border-radius: 4px; }
.case.mini.plus { background: var(--c); }
.svc-badge { font-family: var(--body); font-size: 12px; padding: 3px 9px; flex-shrink: 0; }
.svc.svc-manque { background: linear-gradient(90deg, var(--red-bg), transparent 70%); border-radius: 12px; }

/* Plan du district / Conseil des chefs : replié sur une ligne quand rien n'est à décider */
details.crise-pli { display: block; }
details.crise-pli > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; }
details.crise-pli > summary::-webkit-details-marker { display: none; }
details.crise-pli > summary > svg:last-child { color: var(--muted); transition: transform .15s; flex-shrink: 0; }
details.crise-pli[open] > summary > svg:last-child { transform: rotate(90deg); }
details.crise-pli[open] > summary { margin-bottom: 10px; }
details.crise-pli .crise-k, .crise-ligne .crise-k { flex-shrink: 0; margin-right: 0; width: 28px; height: 28px; font-size: 15px; }
.crise-ligne { display: flex; flex-direction: row; align-items: center; gap: 10px; width: 100%; font: inherit; color: inherit; cursor: pointer; }
.crise-ligne > svg:last-child { color: var(--muted); flex-shrink: 0; }

/* Radio : deux fréquences */
.frequences { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.freq { position: relative; display: flex; align-items: center; gap: 9px; padding: 10px 10px; border-radius: 16px; border: 1px solid var(--hair); background: var(--surface); color: var(--text2); text-align: left; font: inherit; cursor: pointer; min-height: 58px; }
.freq.on { border-color: var(--amber); background: var(--amber-bg); color: var(--text); box-shadow: 0 0 0 3px rgba(255, 178, 63, .14); }
.freq.ops.on { border-color: var(--red-line); background: var(--red-bg); box-shadow: 0 0 0 3px rgba(255, 110, 106, .14); }
.freq-n { flex-shrink: 0; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #0A0F1F; border: 1px solid var(--line); font: 800 13px var(--display); color: var(--amber); letter-spacing: .5px; text-shadow: 0 0 8px rgba(255, 178, 63, .55); }
.freq.ops .freq-n { color: var(--red-soft); text-shadow: 0 0 8px rgba(255, 110, 106, .55); }
.freq-t { font-weight: 700; font-size: 13.5px; line-height: 1.15; }
.freq-s { font-size: 12px; color: var(--muted); line-height: 1.2; }
.freq .compteur { position: absolute; top: -6px; right: -4px; }

/* Ordres : situation du jour et opération repliées une fois les ordres validés */
details.pli-ordres { display: block; }
details.pli-ordres > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; }
details.pli-ordres > summary::-webkit-details-marker { display: none; }
details.pli-ordres > summary > svg:last-child { color: var(--muted); flex-shrink: 0; transition: transform .15s; }
details.pli-ordres[open] > summary > svg:last-child { transform: rotate(90deg); }
details.pli-ordres[open] > summary { margin-bottom: 10px; }
details.pli-ordres[open] .pli-resume, details.pli-ordres[open] .pli-resume-s { display: none; }
.pli-resume { font-weight: 700; font-size: 14.5px; line-height: 1.3; }
.case.mission { border: 1.5px solid var(--c); background: repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 3px, transparent 3px 6px); opacity: .75; }
/* Fréquences dans l'en-tête fixe de la Radio : plus compactes */
.onglets-flottants .frequences { margin-top: 8px; }
.onglets-flottants .freq { min-height: 46px; padding: 6px 8px; border-radius: 14px; }
.onglets-flottants .freq-n { width: 30px; height: 30px; font-size: 12px; }
.onglets-flottants .freq-s { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
/* Cases : groupe « au service » et groupes de mission côte à côte */
.cases { gap: 10px 12px; }
.grp { display: inline-flex; flex-direction: column; gap: 3px; }
.grp-l { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.grp-c { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.grp.mission { padding-left: 10px; border-left: 1px dashed var(--line); }
.grp.mission .grp-l { color: var(--amber-soft); }

/* Comparatif des modèles de véhicules */
.cmp-modeles summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; }
.cmp-modeles summary::-webkit-details-marker { display: none; }
.cmp-modeles[open] summary svg:last-child { transform: rotate(180deg); }
.cmp-scroll { margin: 6px 0 4px; }
.cmp-table { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; }
.cmp-table th, .cmp-table td { padding: 4px 2px; text-align: center; border-bottom: 1px solid rgba(255,255,255,.06); overflow-wrap: anywhere; }
.cmp-table thead th:first-child { width: 24%; }
.cmp-table thead th { font-size: 12px; font-weight: 600; color: var(--muted); vertical-align: bottom; }
.cmp-table thead th span { display: block; margin-top: 2px; }
.cmp-table tbody th { text-align: left; font-weight: 500; color: var(--text2); font-size: 12px; }
.cmp-table td { font-variant-numeric: tabular-nums; }
.cmp-table td.ok { color: var(--green); font-weight: 700; }
.cmp-table td.role { font-family: inherit; font-size: 12px; color: var(--text2); line-height: 1.25; }

/* ───── Chef de corps (saison 2) ───── */
.chef-portrait { position: relative; display: inline-block; width: var(--t); height: var(--t); flex-shrink: 0; border-radius: 22%; overflow: hidden; box-shadow: 0 0 0 2px var(--zc, var(--amber)); background: #1B2436; }
.chef-portrait img, .chef-portrait svg { width: 100%; height: 100%; }
.chef-galons { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: 9px; line-height: 12px; color: #FFD98A; background: rgba(10,14,24,.72); letter-spacing: 1px; }
.chef-grille { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 420px) { .chef-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.chef-choix { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 3px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface2); color: var(--text2); cursor: pointer; }
.chef-choix img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: #1B2436; }
.chef-choix[aria-pressed="true"] { border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber); color: var(--text); }
.chef-fiche { gap: 10px; }
.chef-toile { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; }
.repli-mini summary { cursor: pointer; }
.chef-choix-svg svg { width: 100%; height: auto; border-radius: 8px; }
.chef-grille { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 420px) { .chef-grille { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; } }
/* Vente aux enchères des saisies (saison 2) */
.vente-lot { gap: 8px; }
.vente-lot.gros { border-color: var(--amber-line); }
.vente-ico { font-size: 30px; line-height: 1; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--surface2); flex-shrink: 0; }
.hp-chef { display: flex; flex-direction: column; align-items: center; gap: 1px; background: none; border: 0; color: var(--text2); padding: 0; cursor: pointer; }
.bureau-scene > svg { display: block; width: 100%; height: auto; }
.chef-nuit { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 16px; border: 1px solid var(--amber-line); background: linear-gradient(135deg, rgba(255, 197, 107, .10), transparent 60%), var(--surface); color: var(--text); cursor: pointer; width: 100%; }
.chef-insigne { display: inline-block; width: 20px; height: 20px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 217, 138, .6), 0 0 10px rgba(255, 217, 138, .8); margin-right: 6px; vertical-align: -5px; }
/* Fiche du chef (remplace le bureau illustré) */
.chef-hero { gap: 10px; border-color: color-mix(in srgb, var(--zc) 45%, var(--line)); background: linear-gradient(160deg, color-mix(in srgb, var(--zc) 14%, transparent), transparent 55%), var(--surface); }
.chef-sig { align-self: flex-start; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #2A1E08; background: linear-gradient(180deg, #FFD98A, #E6A93A); }
.chef-comp { display: flex; gap: 12px; align-items: center; width: 100%; padding: 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface2); color: var(--text); text-align: left; cursor: pointer; }
.chef-comp.ouvert { border-color: var(--c); }
.chef-comp-ico { width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center; border-radius: 11px; font-size: 20px; background: color-mix(in srgb, var(--c) 22%, transparent); }
.chef-niv { font-family: var(--mono); font-size: 26px; font-weight: 700; color: var(--c); min-width: 34px; text-align: right; }
.chef-barre { display: block; height: 7px; border-radius: 4px; background: var(--line); overflow: hidden; }
.chef-barre > span { display: block; height: 100%; border-radius: 4px; background: var(--c, var(--amber)); }
.chef-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.chef-slot { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 14px; border: 1.5px dashed var(--line); text-align: center; min-height: 96px; justify-content: center; }
.chef-slot.on { border: 1.5px solid var(--c); background: color-mix(in srgb, var(--c) 10%, transparent); justify-content: flex-start; }
.chef-slot img { width: 48px; height: 48px; }
.chef-slot.actif img { filter: drop-shadow(0 0 8px #FFD98A); animation: chefPulse 1.6s ease-in-out infinite; }
@keyframes chefPulse { 50% { transform: scale(1.08); } }
.chef-grille-tal { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; justify-items: center; }
.chef-gt-h { font-size: 18px; }
.chef-gt { position: relative; width: 100%; max-width: 56px; aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.chef-gt img { width: 100%; height: 100%; }
.chef-gt.verr img { filter: grayscale(1) brightness(.55); }
.chef-gt.on { box-shadow: 0 0 0 2.5px var(--amber); }
.chef-gt-n { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--mono); font-weight: 700; font-size: 15px; color: #fff; text-shadow: 0 1px 3px #000; }
.chef-reseau { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.chef-pers { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.chef-pers img { width: 100%; max-width: 72px; aspect-ratio: 1; object-fit: cover; border-radius: 14px; border: 2px solid var(--line); }
.chef-pers.ok img { border-color: #3DD39A; } .chef-pers.ko img { border-color: #E1453A; }
.chef-humeur { font-size: 12px; font-weight: 700; color: var(--text2); } .chef-pers.ok .chef-humeur { color: #3DD39A; } .chef-pers.ko .chef-humeur { color: #F2766B; }
.chef-etat { display: flex; gap: 10px; align-items: center; }
.chef-rang { width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; font-family: var(--mono); font-weight: 700; background: var(--surface2); border: 2px solid var(--line); }
.chef-rang small { font-size: 9px; } .chef-rang.or { border-color: #E6B84A; color: #E6B84A; } .chef-rang.ar { border-color: #C9CED8; } .chef-rang.br { border-color: #C98A54; }
.chef-slot .tiny.muted { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.chip-chef { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; margin-top: 3px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); white-space: nowrap; }
.dil-chef { border-color: var(--amber-line) !important; }
.chef-pers.choisi img { box-shadow: 0 0 0 3px var(--amber); }
.chef-pers[disabled] { opacity: .55; cursor: default !important; }
.chef-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chef-chip { padding: 7px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface2); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; }
.chef-chip[aria-pressed="true"] { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 18%, transparent); }

/* ───── La semaine du chef : objectifs, duel, adjoint, honneurs ───── */
.chef-portrait[class*="cadre-"] { box-shadow: 0 0 0 2px var(--zc, var(--amber)), 0 0 0 4px var(--cadre); }
.chef-portrait.cadre-diamant { box-shadow: 0 0 0 2px var(--zc, var(--amber)), 0 0 0 4px var(--cadre), 0 0 12px 2px rgba(143, 227, 255, .55); }
.chef-portrait.adj { box-shadow: 0 0 0 2px var(--line); }
.chef-ruban { position: absolute; top: 1px; right: 1px; font-size: calc(var(--t) * .26); line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)); }
.semaine summary { cursor: pointer; }
.obj { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--surface2); border-left: 3px solid var(--c); }
.obj.fait { opacity: .75; }
.obj .chef-barre > span { background: var(--c); }
.obj-ico { font-size: 20px; width: 26px; text-align: center; flex-shrink: 0; }
.duel { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface2); color: var(--text); cursor: pointer; }
.duel-face { display: flex; gap: 10px; align-items: center; }
.duel-barre { display: flex; height: 9px; border-radius: 5px; overflow: hidden; background: var(--line); gap: 2px; }
.duel-barre > span { display: block; height: 100%; }
.adj-carte { border-color: var(--line); background: linear-gradient(135deg, rgba(90, 176, 240, .08), transparent 60%), var(--surface); }
.adj-journal { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.adj-journal th { text-align: left; font-weight: 600; color: var(--muted); font-size: 12px; padding: 2px 4px; }
.adj-journal td { padding: 3px 4px; border-top: 1px solid var(--line); }
.rubans { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.ruban { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface2); color: var(--text); text-align: left; opacity: .5; }
.ruban .ruban-ico { font-size: 22px; filter: grayscale(1); }
.ruban.gagne { opacity: 1; cursor: pointer; border-color: var(--amber-line); }
.ruban.gagne .ruban-ico { filter: none; }
.ruban.choisi { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 16%, var(--surface2)); }

/* ═══════════════════════════════════════════════════════════════
   HP saison 2 (v3) : le commissariat en héros, une seule grosse action,
   « Aujourd'hui » en lignes qui se déplient, raccourcis au choix.
   ═══════════════════════════════════════════════════════════════ */
.hp.v3 { gap: 14px; }
.hp-hero { position: relative; margin: -20px -16px 0; height: 300px; overflow: hidden; background: var(--bg-deep); }
.hp-hero::before, .hp-hero::after { content: ''; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
.hp-hero::before { top: 0; height: 96px; background: linear-gradient(180deg, rgba(8, 12, 27, .72), rgba(8, 12, 27, 0)); }
.hp-hero::after { bottom: 0; height: 56px; background: linear-gradient(0deg, var(--bg), rgba(12, 17, 36, 0)); }
.hp-scene { position: absolute; inset: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; }
.hp-scene::-webkit-scrollbar { display: none; }
.hp-scene .scene-btn { width: max-content; height: 100%; }
.hp-scene .scene-btn .scene-hp { height: 300px; width: calc(300px * var(--ratio, 1.714)); max-width: none; border: 0; border-radius: 0; }
.hp-scene .scene-btn:hover .scene-hp { border: 0; }
.hp-scene .scene-leg { display: none; }
.hp-hud { position: absolute; z-index: 2; top: 12px; left: 12px; right: 12px; display: flex; align-items: center; gap: 10px; }
.hud-chef { position: relative; flex-shrink: 0; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: rgba(12, 17, 36, .6); display: grid; place-items: center; cursor: pointer; color: var(--amber); text-decoration: none; }
.hud-anneau { position: absolute; inset: 0; width: 52px; height: 52px; }
.hud-chef .chef-portrait { --t: 40px !important; width: 40px; height: 40px; border-radius: 50%; box-shadow: none; }
.hud-ecu { display: grid; place-items: center; }
.hud-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; text-shadow: 0 1px 6px rgba(0, 0, 0, .75); }
.hud-nom { font: 800 22px/1.05 var(--display); letter-spacing: -.4px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-sous { font-size: 12.5px; color: var(--amber-soft); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-ipz { flex-shrink: 0; min-height: 44px; display: flex; align-items: center; gap: 5px; padding: 0 10px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(12, 17, 36, .74); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--text); font: inherit; cursor: pointer; text-decoration: none; }
.hud-ipz-l { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--blue-soft); }
.hud-ipz-v { font: 800 21px/1 var(--display); }
.hud-ipz .pdelta { padding: 1px 5px; font-size: 11px; }
.hud-rang { margin-left: 2px; padding-left: 8px; border-left: 1px solid rgba(255, 255, 255, .18); font-size: 12.5px; font-weight: 700; color: var(--amber-soft); }
.hud-btn, .hud-btn.roue { position: relative; flex-shrink: 0; width: 44px; height: 44px; grid-template-columns: 1fr; gap: 0; padding: 0; font: inherit; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); background: rgba(12, 17, 36, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; display: grid; place-items: center; cursor: pointer; }
.hud-btn:hover { background: rgba(12, 17, 36, .85); }
.hud-btn.roue[aria-expanded="true"] { color: var(--amber); border-color: var(--amber-line); }
.hud-bas { position: absolute; z-index: 2; right: 12px; bottom: 14px; display: flex; gap: 8px; }
@media (max-width: 380px) { .hud-nom { font-size: 19px; } .hud-ipz { padding: 0 8px; gap: 4px; } .hud-ipz-v { font-size: 19px; } .hud-ipz .pdelta, .hud-rang { display: none; } }

/* Bulle de l'adjoint : la nuit en une phrase, sur papier, jusqu'à « Compris » */
.hp-bulle { position: relative; z-index: 3; display: flex; gap: 10px; align-items: flex-start; }
.hp-bulle > .chef-portrait, .bn-ico { flex-shrink: 0; margin-top: 2px; box-shadow: 0 0 0 2px var(--paper), 0 6px 14px rgba(0, 0, 0, .5); }
.bn-ico { width: 40px; height: 40px; border-radius: 50%; background: var(--surface2); color: var(--amber); display: grid; place-items: center; }
.bn-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 4px 16px 16px 16px; background: var(--paper); color: var(--ink); box-shadow: var(--float); }
.bn-qui { font-size: 12px; font-weight: 700; color: var(--ink3); }
.bn-t { margin: 0; font-size: 14px; line-height: 1.4; }
.bn-refus { color: var(--press); font-weight: 700; }
.bn-ps { display: flex; flex-wrap: wrap; gap: 4px; }
.bn-p { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(29, 26, 21, .07); white-space: nowrap; }
.bn-p.up { color: #1C6644; }
.bn-p.down { color: #93261B; }
.bn-act { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.bn-l { min-height: 36px; padding: 0; border: 0; background: none; color: var(--press); font: 700 13px var(--body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; display: inline-flex; align-items: center; }
.bn-l:hover { color: var(--ink); }
.bn-ok { margin-left: auto; min-height: 36px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--ink); color: var(--paper); font: 700 13px var(--body); cursor: pointer; }
.bn-ok:focus-visible, .bn-l:focus-visible { outline-color: var(--press); }

/* Avant 20:00 : situation, une icône par étape, un gros bouton */
.hp-soir { gap: 12px; }
.hs-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.hp-soir .soir-situ { position: static; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.hs-pips { display: flex; flex-wrap: wrap; gap: 6px; }
.hs-pip { min-height: 36px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px 0 10px; border-radius: 18px; border: 1.5px solid var(--line); background: var(--surface2); color: var(--text); font: 600 13px var(--body); text-decoration: none; white-space: nowrap; }
.hs-pip svg { flex-shrink: 0; color: var(--text2); }
.hs-pip:hover { border-color: var(--amber-line); color: var(--text); }
.hs-pip.suiv { border-color: var(--amber); background: var(--amber-bg); color: var(--amber-hi); }
.hs-pip.suiv svg { color: var(--amber); }
.hs-pip.ok { border-color: rgba(61, 211, 154, .5); background: rgba(61, 211, 154, .10); color: var(--green-soft); }
.hs-pip.ok svg { color: var(--green); stroke-width: 2.6; }
.hs-cta { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 68px; padding: 8px 14px; border-radius: 18px; border-bottom: 4px solid #B9740E; background: linear-gradient(180deg, var(--amber-hi), var(--amber)); color: var(--amber-ink); text-align: center; text-decoration: none; box-shadow: 0 10px 24px -10px rgba(255, 178, 63, .7); transition: transform .08s, border-bottom-width .08s; }
.hs-cta:hover { color: var(--amber-ink); background: linear-gradient(180deg, #FFD488, var(--amber-hi)); }
.hs-cta:active { transform: translateY(2px); border-bottom-width: 2px; }
.hs-cta-t { font: 800 19px/1.15 var(--display); letter-spacing: -.2px; }
.hs-cd { color: var(--text); font-weight: 800; font-variant-numeric: tabular-nums; }
.hs-cta-t svg { vertical-align: -3px; }
.hs-cta-s { font-size: 12.5px; font-weight: 600; color: rgba(36, 20, 0, .78); }
.hs-cta #countdown { font-variant-numeric: tabular-nums; font-weight: 800; }
.hs-cta.fini { border: 1px solid rgba(61, 211, 154, .45); background: rgba(61, 211, 154, .10); color: var(--green-soft); box-shadow: none; }
.hs-cta.fini .hs-cta-s { color: var(--text2); }
.hs-liste > summary { list-style: none; display: flex; align-items: center; gap: 6px; min-height: 40px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text2); }
.hs-liste > summary::-webkit-details-marker { display: none; }
.hs-liste > summary svg { margin-left: auto; color: var(--muted); transition: transform .15s; }
.hs-liste[open] > summary { margin-bottom: 8px; }
.hs-liste[open] > summary svg { transform: rotate(90deg); }
/* « Avant 20:00 » replié quand tout est fait */
.hp-soir-fini { gap: 8px; padding-top: 12px; padding-bottom: 6px; }
.hs-fini > summary { gap: 10px; color: var(--green-soft); }
.hs-mini { display: flex; gap: 4px; flex-shrink: 0; }
.hs-mini i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(61, 211, 154, .14); border: 1px solid rgba(61, 211, 154, .45); color: var(--green-soft); }
.hs-mini button { width: 26px; height: 26px; padding: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(61, 211, 154, .14); border: 1px solid rgba(61, 211, 154, .45); color: var(--green-soft); cursor: pointer; }
.ord-pips-fini { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ord-pips-fini .ord-reste.ok { color: var(--green-soft); font-weight: 600; font-size: 13px; }
.ord-pips-fini .ord-reste.ok svg { vertical-align: -2px; }
.hs-mini button span { font-size: 13px; line-height: 1; filter: saturate(.85); }
.pli-ok { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: rgba(61, 211, 154, .14); border: 1px solid rgba(61, 211, 154, .45); color: var(--green-soft); }
.hs-mini i svg, .hs-mini button svg { margin: 0 !important; color: inherit !important; transform: none !important; }
.hs-fini-t { display: flex; flex-direction: column; gap: 0; font-size: 14px; font-weight: 700; line-height: 1.2; min-width: 0; }
.hs-fini-t svg { display: none; }
.hs-fini-t small { font-size: 11.5px; font-weight: 500; color: var(--muted); }

/* Ma zone : quatre jauges rondes, puis agents, budget, véhicules */
.hp-zone { gap: 10px; padding: 12px 10px; }
.hz-ronds { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.hp-rond { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 2px 0; border: 0; border-radius: 12px; background: none; color: var(--text); font: inherit; cursor: pointer; }
.hp-rond:hover { background: var(--surface2); }
.hp-rond svg { width: 54px; height: 54px; }
.hp-rond text { font: 800 16px var(--display); fill: var(--text); }
.hr-l { font-size: 12px; font-weight: 600; text-decoration: underline dotted var(--faint); text-underline-offset: 3px; }
.hr-d { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.hr-d.up { color: var(--green-soft); }
.hr-d.down { color: var(--red-soft); }
.hz-stats { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 10px; padding: 8px 4px 0; border-top: 1px solid var(--hair); font-size: 13px; color: var(--text2); }
.hz-s { display: inline-flex; align-items: center; height: 36px; padding: 0; border: 0; background: none; color: inherit; font: inherit; white-space: nowrap; }
button.hz-s { cursor: pointer; text-decoration: underline dotted var(--faint); text-underline-offset: 4px; }
button.hz-s:hover { color: var(--text); }
.hz-s b { color: var(--text); font-weight: 700; }
.hz-s b + span.ok, .hz-s b + span.bad { margin-left: 5px; }

/* Aujourd'hui : une ligne par sujet */
.hp-ajd, .hp-ajd-l, .ajd-inc { display: flex; flex-direction: column; gap: 8px; }
.ajd { border: 1px solid var(--hair); border-radius: 16px; background: var(--surface); }
.ajd > summary { list-style: none; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 12px; cursor: pointer; }
.ajd > summary::-webkit-details-marker { display: none; }
.ajd > summary:hover { background: rgba(255, 255, 255, .02); border-radius: 16px; }
.ajd-ico { flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; background: var(--surface2); display: grid; place-items: center; font-size: 20px; line-height: 1; overflow: hidden; }
.ajd-ico img { width: 100%; height: 100%; object-fit: cover; }
.ajd-ico .chef-portrait { --t: 40px !important; width: 40px; height: 40px; box-shadow: none; }
.ajd-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ajd-txt b { font-size: 14.5px; font-weight: 700; line-height: 1.25; }
.ajd-txt span { font-size: 12.5px; line-height: 1.3; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ajd-chev { flex-shrink: 0; color: var(--faint); display: grid; transition: transform .15s; }
.ajd[open] > summary .ajd-chev { transform: rotate(90deg); }
.ajd-badge { flex-shrink: 0; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--amber); color: var(--amber-ink); font: 800 12px var(--body); display: grid; place-items: center; }
.ajd-badge.ok { background: var(--green); color: var(--bg); }
.ajd-corps { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 10px; }
.ajd-corps > .card, .ajd-corps > section, .ajd-corps > div > .card { padding: 0; border: 0; background: none; box-shadow: none; }
.ajd.rouge { border-color: var(--red-line); background: var(--red-bg); }
.ajd-alerte { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 12px; border: 1px solid var(--hair); border-radius: 16px; background: var(--surface); color: var(--text); text-decoration: none; }
.ajd-alerte:hover { background: var(--surface2); color: var(--text); }
.ajd-alerte.red { border-color: var(--red-line); background: var(--red-bg); }
.ajd-point { flex-shrink: 0; width: 10px; height: 10px; margin: 0 15px; border-radius: 50%; background: var(--blue); }
.ajd-alerte.red .ajd-point { background: var(--red); box-shadow: 0 0 10px var(--red); }
.ajd-alerte.amber .ajd-point { background: var(--amber); }
.hp-ajd > details.card.repli { padding: 0; border-radius: 16px; }
.hp-ajd > details.card.repli > summary { min-height: 60px; padding: 10px 12px; }
.hp-ajd > details.card.repli > :not(summary) { margin: 0 12px 12px; }
.hp-ajd > .chef-nuit, .hp-ajd > .crise-ligne { border-radius: 16px; }
.ajd-corps .adj-carte .chef-portrait.adj, .ajd-corps .adj-carte .kicker { display: none; }
.hp-ajd > details.crise-pli { padding: 0; border-radius: 16px; }
.hp-ajd > details.crise-pli > summary { min-height: 60px; padding: 10px 12px; }
.hp-ajd > details.crise-pli > div { margin: 0 12px 12px; }
.hp-ajd > details.semaine > summary::before { content: '🎯'; flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; background: var(--surface2); display: grid; place-items: center; font-size: 20px; }
.ajd-plus > summary { list-style: none; min-height: 44px; display: grid; place-items: center; border: 1px dashed var(--line); border-radius: 14px; color: var(--text2); font-size: 13px; font-weight: 600; cursor: pointer; }
.ajd-plus > summary::-webkit-details-marker { display: none; }
.ajd-plus[open] > summary { margin-bottom: 8px; }
.hp-jauge { width: 100%; min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 4px; border: 0; background: none; color: var(--muted); font: 600 13px var(--body); cursor: pointer; }
.hp-jauge:hover { color: var(--text2); }
.hp-jauge > svg { color: var(--amber); }
.hp-jauge-barre { flex: 1; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.hp-jauge-barre i { display: block; height: 100%; background: var(--amber); }
.hp-jauge b { color: var(--text); font-weight: 700; }

/* Mes raccourcis : 4 tuiles illustrées, au choix du joueur */
.hp-racc { display: flex; flex-direction: column; gap: 10px; }
.hp-racc .btn.small { min-height: 36px; }
.hp-tuiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.hp-tuile { min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 3px; padding: 0; border: 0; background: none; color: var(--text); font: inherit; text-align: center; text-decoration: none; cursor: pointer; }
.hp-tuile:hover { color: var(--text); }
.ht-v { position: relative; display: block; line-height: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--hair); transition: border-color .15s, transform .1s; }
.ht-v .vign-svg { width: 100%; height: auto; }
.hp-tuile:hover .ht-v { border-color: var(--amber-line); }
.hp-tuile:active .ht-v { transform: scale(.97); }
.hp-tuile.ouvert .ht-v { border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber-line); }
.hp-tuile.off { opacity: .5; }
.ht-n { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ht-s { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ht-coche { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; background: rgba(12, 17, 36, .6); color: var(--amber-ink); display: grid; place-items: center; line-height: 0; }
.ht-coche.on { border-color: var(--amber); background: var(--amber); }
.hp-cols, .hp-col { display: flex; flex-direction: column; gap: 14px; }

@media (prefers-reduced-motion: reduce) { .hs-cta, .ht-v, .ajd-chev { transition: none; } }

/* PC : le commissariat en haut à gauche, la journée à droite */
@media (min-width: 1000px) and (hover: hover) and (pointer: fine) {
  main.screen.hp.v3 { max-width: 1160px; display: grid; grid-auto-flow: row dense; columns: auto; grid-template-columns: minmax(0, 470px) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: 24px; row-gap: 0; align-items: start; }
  main.screen.hp.v3 > * { margin: 0 0 16px; }
  .hp.v3 > .menu-hp { grid-column: 1 / -1; grid-row: 1; }
  .hp.v3 > .chef-creation { grid-column: 1 / -1; grid-row: 2; }
  .hp.v3 .hp-cols { display: contents; }
  .hp.v3 .hp-hero { grid-column: 1; grid-row: 3; margin: 0 0 16px; height: auto; border-radius: 24px; border: 1px solid var(--hair); }
  .hp.v3 .hp-scene { position: relative; overflow: hidden; }
  .hp.v3 .hp-scene .scene-btn { width: 100%; height: auto; }
  .hp.v3 .hp-scene .scene-btn .scene-hp { width: 100%; height: auto; }
  .hp.v3 .hp-col:first-child { grid-column: 1; grid-row: 4; }
  .hp.v3 .hp-col:last-child { grid-column: 2; grid-row: 3 / span 2; }
  .hp.v3 .hp-bulle { margin-top: 0; }
  .hp-tuiles { gap: 12px; }
}
.prev-pq > summary { list-style: none; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; width: max-content; min-height: 24px; }
.prev-pq > summary::-webkit-details-marker { display: none; }
.chef-accueil { gap: 16px; }
.ca-tete { display: flex; flex-direction: column; gap: 4px; }
.chef-accueil .chef-creation { border-color: var(--amber-line); }
.chef-accueil .chef-creation > .kicker:first-child, .chef-accueil .chef-creation > p:nth-child(2) { display: none; }

/* ═══════════════════════════════════════════════════════════════
   Carte saison 2 : trois calques, la carte en grand, puis des lignes.
   ═══════════════════════════════════════════════════════════════ */
.carte-v3 { gap: 12px; }
.cv-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 2px; }
.cv-tete h1 { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-tete .small { white-space: nowrap; }
.cv-calques { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 16px; background: var(--bg-deep); border: 1px solid var(--hair); }
.cv-calques button { position: relative; min-height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; border: 0; border-radius: 12px; background: none; color: var(--text2); font: 600 14px var(--body); cursor: pointer; }
.cv-calques button small { font-size: 11px; color: var(--muted); font-weight: 600; }
.cv-calques button[aria-selected="true"] { background: var(--surface3); color: var(--text); box-shadow: var(--lift), 0 2px 10px rgba(0, 0, 0, .35); }
.cv-calques button[aria-selected="true"]::after { content: ''; position: absolute; left: 30%; right: 30%; bottom: 4px; height: 3px; border-radius: 2px; background: var(--amber); }
.cv-badge { position: absolute; top: 4px; right: 8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff; font: 800 11px var(--body); font-style: normal; display: grid; place-items: center; box-sizing: border-box; }
.cv-carte { position: relative; margin: 0 -16px; background: #070B19; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); line-height: 0; }
.cv-carte > svg { border-radius: 0 !important; }
.cv-leg { position: absolute; right: 10px; bottom: 10px; line-height: 1.3; }
.cv-leg > summary { list-style: none; cursor: pointer; min-height: 32px; padding: 0 12px; display: grid; place-items: center; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(10, 15, 34, .82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--text2); font: 600 12px var(--body); }
.cv-leg > summary::-webkit-details-marker { display: none; }
.cv-leg[open] > summary { color: var(--amber); }
.cv-leg-l { position: absolute; right: 0; bottom: 38px; width: 220px; display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(10, 15, 34, .94); font-size: 12px; color: var(--text2); box-shadow: var(--float); }
.cv-leg-l span { display: inline-flex; align-items: center; gap: 5px; }
.cv-leg-l i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.cv-leg-l i.pointille { border: 1.5px dashed var(--muted); background: none; }
.cv-leg-l i.hach { border-radius: 2px; background: repeating-linear-gradient(45deg, #3A1416 0 2px, #B3363A 2px 4px); }
.cv-corps { display: flex; flex-direction: column; gap: 12px; }
.cv-calques.deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cv-carte > svg.iso { width: 100%; height: auto; -webkit-tap-highlight-color: transparent; }
.cv-pactes { position: absolute; top: 10px; right: 12px; display: inline-flex; align-items: center; gap: 6px; line-height: 1; min-height: 36px; padding: 0 12px; border-radius: 999px; background: rgba(10, 15, 34, .86); border: 1px solid rgba(255, 255, 255, .16); color: var(--text); font: 700 13px var(--body); text-decoration: none; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cv-pactes:hover { border-color: var(--amber-line); }
/* Bouton de cadrage de la carte (zoom non-droit ↔ tout le district), en haut à gauche, même allure que « Pactes ». */
.cv-vue { position: absolute; top: 10px; left: 12px; display: inline-flex; align-items: center; gap: 6px; line-height: 1; min-height: 36px; padding: 0 12px; border-radius: 999px; background: rgba(10, 15, 34, .86); border: 1px solid rgba(255, 255, 255, .16); color: var(--text); font: 600 13px var(--body); cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cv-vue:hover { border-color: var(--amber-line); }
.cv-vue:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.cv-vue[aria-pressed="true"] { border-color: var(--amber-line); color: var(--amber-soft, #FFC970); }
.cv-pactes:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.cv-pactes small { font-size: 11px; color: var(--muted); font-weight: 700; }
.cv-pactes i { font-style: normal; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--amber); color: var(--amber-ink); font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.cv-pactes.alerte { border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-bg), 0 6px 16px -6px rgba(0, 0, 0, .6); }
.pacte-voisin { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--amber-bg); border: 1px solid var(--amber-line); color: var(--text); text-decoration: none; }
.cv-astuce { position: absolute; left: 12px; bottom: 10px; line-height: 1.3; padding: 5px 10px; border-radius: 999px; background: rgba(10, 15, 34, .82); border: 1px solid rgba(255, 255, 255, .14); color: var(--text2); font: 600 12px var(--body); pointer-events: none; }
.cv-fiche { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--amber-line, rgba(255, 178, 63, .45)); box-shadow: var(--lift); }
.cv-fiche-t { display: flex; align-items: center; gap: 12px; }
.cv-fiche-t .cv-nom { font: 700 16px var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-pastille { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; color: #0B1124; font: 800 15px var(--display); }
.cv-fiche-p { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* Mes quartiers, plus aérés : une carte par quartier dans la liste */
.carte-v3 #mes-quartiers > .card.tight { padding: 0; background: none; border: 0; box-shadow: none; display: flex; flex-direction: column; gap: 8px; }
.carte-v3 .qrow { padding: 10px 12px; border: 1px solid var(--hair); border-radius: 16px; background: var(--surface); }
.carte-v3 .qrow:first-child { border-top: 1px solid var(--hair); }
.carte-v3 .qrow.sel { margin: 0; padding: 10px 12px; border-color: var(--amber-line); box-shadow: inset 3px 0 0 var(--amber); }
.carte-v3 .qtitre { font-size: 15px; }
.carte-v3 .qbar { width: 64px; }
@media (min-width: 1000px) and (hover: hover) and (pointer: fine) {
  main.screen.carte-v3 { max-width: 1160px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: 24px; align-items: start; }
  .carte-v3 > .onglets-flottants, .carte-v3 > .cv-tete, .carte-v3 > .cv-calques { grid-column: 1 / -1; }
  .carte-v3 > .cv-carte { grid-column: 1; margin: 0; border-radius: 20px; overflow: hidden; border: 1px solid var(--hair); position: sticky; top: 80px; }
  .carte-v3 > .cv-corps { grid-column: 2; }
  .carte-v3 > .cv-calques { max-width: 520px; }
}
/* Carte sur grand écran PC : toute la largeur disponible. La maquette occupe la colonne de gauche sur toute la hauteur
   de la fenêtre (elle suit le défilement) ; titre, boutons et fiches passent dans la colonne de droite, à largeur de
   lecture. La barre d'onglets se décale pour ne pas mordre sur la carte. */
@media (min-width: 1280px) and (hover: hover) and (pointer: fine) {
  body:has(main.carte-v3) { --cv-l: min(1680px, calc(100vw - 220px)); }
  body:has(main.carte-v3) #app { max-width: var(--cv-l); }
  body:has(main.carte-v3) nav.tabs { left: max(12px, calc(50% - var(--cv-l) / 2 - 96px)); }
  main.screen.carte-v3 { max-width: var(--cv-l); padding-top: 20px; grid-template-columns: minmax(0, 1fr) clamp(360px, 30vw, 500px); grid-template-rows: auto auto 1fr; column-gap: 28px; row-gap: 14px; }
  .carte-v3 > .cv-tete, .carte-v3 > .cv-calques { grid-column: 2; max-width: none; }
  .carte-v3 > .cv-carte { grid-column: 1; grid-row: 1 / span 3; top: 20px; display: flex; justify-content: center;
    background: radial-gradient(ellipse at 50% 40%, #121A3A, #05081A 75%); }
  .carte-v3 > .cv-carte > svg.iso { width: 100%; height: auto; max-height: calc(100vh - 48px); }
  .carte-v3 > .cv-corps { grid-column: 2; grid-row: 3; }
  /* « Valider » sous la colonne de droite, là où l'on vient de toucher + / −, et toujours visible en bas de la fenêtre. */
  body:has(main.carte-v3) .savebar { width: clamp(360px, 30vw, 500px); max-width: none; margin: 4px 28px 28px auto; }
}

/* Onglet Chef (saison 2) */
.chef-onglet { gap: 14px; }
.chef-jour { gap: 10px; }
.chef-jour > .col > .col:first-of-type { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px !important; }
.chef-jour .choice[data-action="chef-agenda"] { min-height: 56px; padding: 8px 10px; }
.chef-jour .choice[data-action="chef-agenda"] .tiny { display: none; }
.chef-jour .choice[data-action="chef-agenda"][aria-pressed="false"] .s { display: none; }
.chef-jour .choice[data-action="chef-agenda"][aria-pressed="true"] { grid-column: 1 / -1; }
.chef-onglet .chef-hero .pc-stats { margin-top: 2px; }
.retour-carte { align-self: flex-start; color: var(--amber); font-weight: 600; text-decoration: none; padding: 6px 0; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cv-meter { position: relative; height: 4px; border-radius: 2px; background: var(--bg-deep); }
.cv-meter span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; }
.cv-meter i { position: absolute; top: -3px; width: 0; height: 10px; border-left: 2px solid; transform: translateX(-1px); }
.cv-cases { display: flex; gap: 6px; }
.cv-case { width: 44px; height: 34px; border-radius: 9px; border: 1px dashed var(--line); background: var(--bg-deep); color: #DDE3F2; display: grid; place-items: center; cursor: pointer; padding: 0; }
.cv-case.on { border: 1px solid rgba(99, 176, 255, .7); background: rgba(99, 176, 255, .12); }
.cv-case.trop:not(.on) { border-color: rgba(224, 98, 90, .5); }
.cv-case.trop.on { border-color: var(--red); background: rgba(224, 98, 90, .12); }
.cv-case[disabled] { opacity: .3; cursor: default; }
.cv-liste { display: flex; flex-direction: column; }
.cv-ql { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 64px; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px; border: 0; border-bottom: 1px solid var(--hair); background: none; color: var(--text); font: 500 14px var(--body); text-align: left; cursor: pointer; }
.cv-ql:last-child { border-bottom: 0; }
.cv-ql-d { width: 10px; height: 10px; border-radius: 50%; }
.cv-ql-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-ql-p { display: inline-flex; align-items: center; gap: 3px; color: #9CC8FF; font-size: 12px; }
.cv-ql-t { text-align: right; font-size: 12px; white-space: nowrap; }
.cv-ql-t b { font: 700 14px var(--display); }
.cv-ql[aria-pressed="true"] { background: rgba(255, 178, 63, .08); box-shadow: inset 3px 0 0 var(--amber); }

/* ═══ Radio Delta — saison 2 : F1 messagerie, F2 tableau des appels ═══ */
.rv { gap: 12px; }
.rv-tete { position: sticky; top: 0; z-index: 12; margin: -18px -16px 0; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; display: flex; flex-direction: column; gap: 10px;
  background: rgba(12, 17, 36, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--hair); }
.rv-titre { margin: 0; font: 800 26px/1 var(--display); letter-spacing: -.5px; }
.rv-seg { display: flex; gap: 6px; }
.rv-seg a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); color: var(--text2); font-size: 13px; font-weight: 600; text-decoration: none; }
.rv-seg a[aria-current] { background: var(--surface3); border-color: transparent; color: var(--text); }
.rv-freqs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rv-freq { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 9px 12px; min-height: 52px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
.rv-freq.on { border: 1.5px solid var(--amber); background: var(--amber-bg); }
.rv-freq.ops.on { border-color: var(--red); background: var(--red-bg); }
.rv-k { display: flex; align-items: center; gap: 6px; font: 600 11px var(--code); letter-spacing: .8px; color: var(--amber-soft); }
.rv-freq.ops .rv-k { color: var(--red-soft); }
.rv-led { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex-shrink: 0; }
.rv-freq.on .rv-led { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
.rv-freq.ops.on .rv-led, .rv-led.vive { background: var(--red); box-shadow: 0 0 6px var(--red); }
.rv-ft { font-weight: 700; font-size: 15px; }

/* F1 : bulles */
.rv-fil { display: flex; flex-direction: column; gap: 4px; }
.rv-jour { align-self: center; font-size: 11.5px; font-weight: 600; color: var(--faint); padding: 8px 0 4px; }
.rv-jour::first-letter { text-transform: uppercase; }
.rv-l { display: flex; gap: 8px; align-items: flex-end; }
.rv-l.deb { margin-top: 8px; }
.rv-col { display: flex; flex-direction: column; gap: 3px; max-width: 82%; min-width: 0; }
.rv-qui { font-size: 12px; color: var(--muted); padding-left: 4px; }
.rv-av { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; overflow: hidden; display: inline-flex; }
.rv-av .chef-portrait { border-radius: 50%; }
.rv-av.vide { visibility: hidden; }
.rv-ini { align-items: center; justify-content: center; background: var(--zc); color: var(--bg); font-weight: 700; font-size: 13px; }
.rv-b { padding: 8px 12px; border-radius: 18px 18px 18px 6px; background: var(--surface2); font-size: 14.5px; line-height: 1.4; overflow-wrap: anywhere; }
.rv-b time { font-size: 10.5px; color: var(--faint); margin-left: 6px; white-space: nowrap; }
.rv-b.moi { align-self: flex-end; max-width: 78%; border-radius: 18px 18px 6px 18px; background: var(--amber); color: var(--amber-ink); }
.rv-b.moi.deb { margin-top: 8px; }
.rv-b.moi time { color: #6b4a10; }

/* F2 : tableau des appels */
.rv-cd { font-size: 12.5px; color: var(--amber-hi); font-family: var(--code); }
.rv-appel { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.rv-appel.mien { border-color: var(--amber-line); }
.rv-a-tete { display: flex; gap: 10px; align-items: center; }
.rv-a-t { font-weight: 700; font-size: 15px; }
.rv-ico { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; }
.rv-ico.rouge { background: var(--red-bg); color: var(--red-soft); }
.rv-ico.ambre { background: var(--amber-bg); color: var(--amber-hi); }
.rv-cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; }
.rv-case { height: 34px; border-radius: 8px; display: grid; place-items: center; font-size: 11px; font-weight: 600; }
.rv-case.pleine { font-family: var(--code); color: var(--zc); border: 1px solid var(--zc); background: color-mix(in srgb, var(--zc) 16%, transparent); }
.rv-case.toi { background: var(--amber); color: var(--amber-ink); }
.rv-case.vide { border: 1.5px dashed var(--line); color: var(--faint); }
.rv-case.vide:first-of-type, .rv-case.toi + .rv-case.vide { border-color: var(--amber-line); color: var(--amber-soft); }
.rv-a-pied { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rv-emprise { height: 10px; border-radius: 5px; background: var(--surface3); overflow: hidden; display: flex; }
.rv-emprise span { background: var(--red); }
.rv-emprise span.perdu { background: repeating-linear-gradient(90deg, rgba(255, 110, 106, .45) 0 6px, rgba(255, 110, 106, .2) 6px 9px); }
.rv-complet { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--hair); color: var(--muted); font-size: 13px; text-decoration: none; }
.rv-complet svg { color: var(--green); flex-shrink: 0; }
a.rv-complet svg { color: var(--amber); }
.rv-vide { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: 14px; border: 1px dashed var(--line); text-align: center; }
.rv-echanges { border-radius: 14px; border: 1px solid var(--hair); background: var(--bg-deep); overflow: hidden; }
.rv-ech-t { width: 100%; display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 10px 12px; min-height: 44px; background: none; border: 0; color: var(--text2); font: inherit; font-size: 12.5px; cursor: pointer; }
.rv-ech-d { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-mc { display: grid; grid-template-columns: 42px 3px 1fr; column-gap: 10px; padding: 9px 12px; border-top: 1px solid var(--hair); }
.rv-mc time { font: 500 11.5px var(--code); color: var(--muted); padding-top: 1px; }
.rv-trait { border-radius: 2px; }
.rv-mc.moi { background: rgba(255, 178, 63, .05); }
.rv-mc.auto .rv-mc-t { color: var(--text2); }
.rv-mc-q { font-size: 12px; font-weight: 700; }
.rv-mc-t { font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }

/* Saisie */
.rv-bas { position: sticky; bottom: 96px; display: flex; flex-direction: column; gap: 8px; padding-top: 8px; background: linear-gradient(180deg, rgba(12, 17, 36, 0), var(--bg) 24%); }
.rv-rapides { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.rv-rapides button { flex-shrink: 0; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.rv-form { display: flex; gap: 8px; }
body:has(.savebar) .rv-bas { bottom: 150px; }
body:has(.savebar) main.rv { padding-bottom: 220px; }

/* Zone de non-droit, saison 2 : rôles (repérage, descente, bouclage) */
.nd-role { display: flex; flex-direction: column; gap: 6px; padding: 9px 10px; border: 1px solid var(--hair); border-radius: 12px; background: var(--bg); }
.nd-role.alerte { border-color: var(--red-line); }
.nd-role-ico { font-size: 19px; width: 24px; text-align: center; }
.nd-cases { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 22px; }
.nd-case { width: 20px; height: 20px; border-radius: 6px; box-sizing: border-box; }
.nd-case.pleine { background: var(--c); }
.nd-case.pleine.moi { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--amber); }
.nd-case.vide { border: 1.5px dashed var(--faint); }
.nd-cases .tiny { margin-left: 4px; font-weight: 700; }
.nd-faille { display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; border-radius: 12px; border: 1.5px dashed var(--line); }
.nd-faille.connue { border: 1px solid rgba(99,176,255,.35); background: var(--blue-bg); }
.pill.nd-rep { background: var(--blue-bg); border-color: rgba(99,176,255,.4); color: var(--blue-soft); }
.nd-prev { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; padding: 9px 11px; border-radius: 12px; background: var(--surface2); font-size: 13px; }
.nd-prev dt { color: var(--muted); font-size: 12px; } .nd-prev dd { margin: 0; font-weight: 600; }
/* ───────── Saison 2 : énigmes en « dossier ouvert » ───────── */
.quete.v2 { gap: 12px; }
/* Route du bonus */
.rb { display: flex; flex-direction: column; gap: 8px; }
.rb-l { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); }
.rb-l > span:first-child { font-weight: 700; color: var(--text2); white-space: nowrap; }
.rb-l > span:first-child.ok { color: var(--green); }
.rb-l > span:last-child { white-space: nowrap; }
.rb-barre { flex: 1; height: 6px; border-radius: 3px; background: var(--surface3); position: relative; }
.rb-barre i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--green); transition: width .4s; }
.rb-barre u { position: absolute; top: -3px; width: 2px; height: 12px; margin-left: -1px; border-radius: 1px; background: var(--muted); }
.rb-bonus { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 12px; background: rgba(61, 211, 154, .10); border: 1px solid rgba(61, 211, 154, .35); }
/* Onglets du classeur */
.classeur { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; align-items: end; margin-bottom: -12px; position: relative; z-index: 1; }
.ong { border: 1px solid var(--line); border-bottom: 0; border-radius: 11px 11px 0 0; background: var(--surface2); padding: 7px 6px 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; text-align: left; color: var(--text2); cursor: pointer; font: inherit; }
.ong .t { display: flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; }
.ong .d { font-size: 10.5px; color: var(--muted); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ong[aria-selected="true"] { background: var(--paper); border-color: var(--paper); color: var(--ink); padding-bottom: 14px; }
.ong[aria-selected="true"] .d { color: var(--ink3); }
.ong.noir { background: #1D1216; border-color: #4A2326; color: #F59A92; }
.ong.noir[aria-selected="true"] { background: #160D10; border-color: #5A2A2D; }
.ong .pt { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex-shrink: 0; }
.ong .pt.ok { background: var(--green); }
.ong .pt.ko { background: var(--red); }
.ong .pt.al { background: var(--blue); }
.ong:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.classeur:not(:has(+ .feuille)) { margin-bottom: 0; }
/* La feuille : le papier redéfinit les couleurs, les objets (plans, disques, claviers) gardent les leurs. */
.feuille { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px 14px 16px; border-radius: 4px 14px 16px 16px; background: var(--paper); color: var(--ink);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 18px 30px -20px rgba(0, 0, 0, .9);
  --text: #1D1A15; --text2: #3A352C; --muted: #6A6253; --faint: #8C846F; --surface: #FBF8F0; --surface2: #F2ECDD; --surface3: #E4DBC6; --bg: #EAE3D2;
  --line: #CFC5B0; --hair: rgba(29, 26, 21, .14); --amber: #C77A0A; --amber-hi: #E09224; --amber-soft: #8A5A12; --amber-bg: rgba(199, 122, 10, .13); --amber-line: rgba(160, 100, 10, .45);
  --blue: #1E66B8; --blue-soft: #1E5FA8; --blue-bg: rgba(30, 102, 184, .10); --green: #1F8A5E; --green-soft: #1F7A55; --red: #B8352C; --red-soft: #A3322A; --red-bg: rgba(184, 53, 44, .10); --red-line: rgba(184, 53, 44, .4);
  --lift: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 1px 2px rgba(29, 26, 21, .08); }
.feuille .btn.primary { color: #FFF8EC; }
.feuille .card { background: var(--surface); box-shadow: 0 1px 2px rgba(29, 26, 21, .08); }
.feuille .codebox { background: #FBF8F0; border: 1px solid var(--line); }
.feuille.noir { background: #140D10; border: 1px solid #4A2326; color: var(--text); box-shadow: 0 18px 30px -20px rgba(0, 0, 0, .9);
  --text: #EDF0FA; --text2: #C3C9DE; --muted: #96A0BF; --faint: #67719A; --surface: #1C1216; --surface2: #24171C; --surface3: #2E1D23; --bg: #0F0A0C; --line: #4A2326; --hair: rgba(255, 180, 170, .1);
  --amber: #FFB23F; --amber-hi: #FFC970; --amber-soft: #E9C894; --amber-bg: rgba(255, 178, 63, .11); --amber-line: rgba(255, 178, 63, .40); --blue: #63B0FF; --blue-soft: #9DCBFF; --blue-bg: rgba(99, 176, 255, .10);
  --green: #3DD39A; --green-soft: #78E2B8; --red: #FF6E6A; --red-soft: #FF9E99; --red-bg: rgba(255, 110, 106, .10); --red-line: rgba(255, 110, 106, .40); --lift: 0 1px 2px rgba(0, 0, 0, .3); }
.feuille.noir .fe-ref { color: #C98A84; }
.feuille.noir .btn.primary { color: var(--amber-ink); }
.feuille.noir .forme-nom { background: var(--amber-bg); border-color: var(--amber-line); color: var(--amber-soft); }
.fe-tete { display: flex; gap: 10px; align-items: flex-start; }
.fe-ref { font: 600 10.5px var(--code); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.fe-tete h1.big { font-size: 28px; color: var(--text); }
.fe-chips { gap: 6px; flex-wrap: wrap; }
.feuille .forme-nom { background: #F6DFB5; border-color: #E2B866; color: #6B4508; }
.fe-niv { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 99px; border: 1px solid var(--line); color: var(--text2); background: rgba(29, 26, 21, .04); white-space: nowrap; }
.fe-niv.hc { background: #2A1414; border-color: #6B2E2A; color: #F59A92; }
.fe-contexte { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--text2); }
.fe-alerte { margin: 0; color: var(--red-soft); }
.fe-enq { margin: 0; color: var(--amber-soft); }
.fe-rep { gap: 10px; padding-top: 4px; border-top: 1px dashed var(--line); }
.fe-tampon { position: absolute; right: 16px; top: 78px; z-index: 2; transform: rotate(-10deg); border: 3px solid currentColor; border-radius: 7px; padding: 2px 10px; font: 800 17px var(--display); letter-spacing: .16em; text-transform: uppercase; opacity: .85; pointer-events: none; animation: tampon .35s cubic-bezier(.2, 1.6, .4, 1) both; }
.fe-tampon.ok { color: #1F7A55; }
.fe-tampon.ko { color: #A3322A; }
.feuille.noir .fe-tampon.ok { color: #3DD39A; }
.feuille.noir .fe-tampon.ko { color: #FF6E6A; }
@keyframes tampon { from { transform: rotate(-10deg) scale(1.8); opacity: 0; } to { transform: rotate(-10deg) scale(1); opacity: .85; } }
@media (prefers-reduced-motion: reduce) { .fe-tampon { animation: none; } }
/* Menu ⋯ */
.fe-menu { position: relative; flex-shrink: 0; }
.fe-menu > summary { list-style: none; }
.fe-menu > summary::-webkit-details-marker { display: none; }
.fe-ico { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; border: 1px solid var(--line); background: rgba(29, 26, 21, .04); color: var(--text2); font-weight: 800; cursor: pointer; }
.fe-menu[open] > .fe-ico { background: var(--surface3); }
.fe-ico.fe-ico-txt { width: auto; height: 36px; padding: 0 11px; gap: 6px; display: inline-flex; align-items: center; font: 700 13px var(--body); color: var(--ink, var(--text)); white-space: nowrap; border-color: color-mix(in srgb, var(--ink, #1D1A15) 22%, transparent); background: rgba(255, 249, 235, .7); box-shadow: 0 1px 0 rgba(29, 26, 21, .08); }
.fe-ico-txt .fe-ico-v { font-size: 10px; opacity: .6; transition: transform .15s; }
.fe-menu[open] .fe-ico-v { transform: rotate(180deg); }
@media (max-width: 360px) { .fe-ico.fe-ico-txt { padding: 0 9px; font-size: 12px; } }
.fe-menu-l { position: absolute; right: 0; top: 42px; z-index: 5; width: 250px; display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: 14px; background: #141B33; border: 1px solid #29345A; box-shadow: 0 16px 34px -10px rgba(0, 0, 0, .8); color: #EDF0FA; }
.fe-menu-l > button, .fe-menu-l > a, .fe-astuce > summary { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; border-radius: 10px; border: 0; background: none; color: #EDF0FA; font: 600 14px var(--body); text-align: left; text-decoration: none; cursor: pointer; }
.fe-menu-l > button:hover, .fe-menu-l > a:hover, .fe-astuce > summary:hover { background: #1C2442; }
.fe-menu-l small { display: block; font-weight: 500; font-size: 12px; color: #96A0BF; }
.fe-menu-l svg { flex-shrink: 0; margin-top: 2px; }
.fe-astuce > summary { list-style: none; }
.fe-astuce > summary::-webkit-details-marker { display: none; }
.fe-astuce p { margin: 0 10px 8px; color: #C3C9DE; }
/* Barre de réponse collée en bas, avec le carnet */
.repbar-q { position: sticky; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 8; display: flex; gap: 8px; align-items: center; margin: -2px -6px 0; padding: 10px 6px 6px; background: linear-gradient(to bottom, rgba(12, 17, 36, 0), var(--bg) 26%); }
.repbar-v { flex: 1; min-width: 0; min-height: 48px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.repbar-v small { font-weight: 500; font-size: 14px; opacity: .8; overflow: hidden; text-overflow: ellipsis; }
.repbar-f { flex: 1; min-width: 0; display: flex; gap: 8px; }
.repbar-f .text { min-width: 0; }
.repbar-i { flex: 1; min-height: 48px; display: grid; place-items: center; border-radius: var(--r-md); border: 1px dashed var(--line); color: var(--muted); font-size: 13.5px; font-weight: 600; text-align: center; padding: 0 10px; }
.carnet-q { flex-shrink: 0; }
.carnet-q > summary { list-style: none; }
.carnet-q > summary::-webkit-details-marker { display: none; }
.carnet-b { position: relative; width: 48px; height: 48px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--paper); color: var(--ink); font-size: 19px; cursor: pointer; box-shadow: 0 -2px 0 var(--paper2) inset, 0 6px 16px -8px rgba(0, 0, 0, .7); }
.carnet-b.plein::after { content: ''; position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 2px var(--paper); }
.carnet-q[open] > .carnet-b { background: var(--amber); }
.carnet-p { position: absolute; left: 6px; right: 6px; bottom: calc(100% + 4px); display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 -10px 40px -10px rgba(0, 0, 0, .8); }
:root { --carnet-h: clamp(64px, calc(var(--vvh, 100vh) * .22), 170px); }
.carnet-p .notes { min-height: 0; height: var(--carnet-h); resize: none; }
/* Carnet ouvert : plus de barre d'onglets par-dessus, et une marge sous l'énoncé pour pouvoir tout relire au-dessus du carnet. */
@media (max-width: 999px), (hover: none) {
  body.carnet-ouvert nav.tabs { display: none; }
  body.carnet-ouvert .repbar-q { bottom: calc(6px + env(safe-area-inset-bottom)); }
  body.carnet-ouvert main.quete { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
}
body.carnet-ouvert .repbar-q { margin-top: calc(var(--carnet-h) + 64px); }
/* Feuille du bonus */
.bs-voile { position: fixed; inset: 0; z-index: 30; background: rgba(5, 8, 18, .62); animation: bsVoile .2s both; }
.bs { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 31; width: 100%; max-width: 520px; box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; padding: 10px 16px calc(18px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; background: var(--surface); border: 1px solid var(--line); border-bottom: 0; box-shadow: 0 -20px 50px -10px rgba(0, 0, 0, .8); animation: bsMonte .3s cubic-bezier(.2, .9, .3, 1.05) both; }
.bs-poignee { width: 42px; height: 4px; border-radius: 2px; background: var(--line); align-self: center; }
.bs-titre { margin: 0; font: 800 22px var(--display); letter-spacing: -.4px; }
.bs-prime { display: flex; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 12px; background: var(--amber-bg); border: 1px solid var(--amber-line); }
.bs-prime > span:first-child { font-size: 22px; }
@keyframes bsMonte { from { transform: translate(-50%, 100%); } to { transform: translate(-50%, 0); } }
@keyframes bsVoile { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bs, .bs-voile { animation: none; } }
@media (min-width: 1000px) and (hover: hover) and (pointer: fine) {
  .repbar-q { bottom: 16px; }
  .bs { bottom: 24px; border-radius: 24px; border-bottom: 1px solid var(--line); }
}
.repbar-v:disabled { opacity: 1; background: var(--surface2); color: var(--muted); border: 1px solid var(--line); box-shadow: none; font-weight: 600; font-size: 15px; }


/* ───── Onglet Chef v2 : prise de fonctions, agenda en tuiles, parapheur ───── */
.co .card-title { font-size: 17px; }
.co-hero { gap: 12px; }
.co-hero-l { display: flex; gap: 12px; align-items: center; color: var(--text); text-decoration: none; }
.co-hero-l .co-chev { margin-left: auto; color: var(--muted); }
.co-nom { font-family: var(--display); font-weight: 800; font-size: 20px; line-height: 1.1; }
.co-comps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.co-cp { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px 7px; border-radius: 12px; background: var(--surface2); }
.co-cp .i { font-size: 15px; line-height: 1; } .co-cp .n { font-weight: 800; font-size: 17px; line-height: 1; color: var(--c); }
.co-cp .b { width: 78%; height: 4px; border-radius: 3px; background: var(--line); overflow: hidden; } .co-cp .b i { display: block; height: 100%; background: var(--c); }
.co-cp .l { font-size: 10px; color: var(--muted); font-weight: 600; }
.co-pas-l { display: flex; }
.co-pas { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; text-align: center; min-width: 0; }
.co-pas::before { content: ''; position: absolute; top: 15px; left: -50%; right: 50%; height: 2px; background: var(--line); }
.co-pas:first-child::before { display: none; }
.co-pas.fait::before, .co-pas.auj::before { background: var(--amber); }
.co-pas .o { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; background: var(--surface2); border: 2px solid var(--line); position: relative; z-index: 1; }
.co-pas.fait .o { background: var(--amber); border-color: var(--amber); color: var(--amber-ink); font-weight: 800; font-size: 14px; }
.co-pas.auj .o { border-color: var(--amber); box-shadow: 0 0 0 4px var(--amber-bg); }
.co-pas .lb { font-size: 10.5px; font-weight: 700; color: var(--faint); line-height: 1.2; }
.co-pas.fait .lb { color: var(--muted); } .co-pas.auj .lb { color: var(--amber); }
.co-teaser { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--bg); border: 1px dashed var(--line); font-size: 12.5px; color: var(--text2); }
.co-neuf { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: var(--amber); color: var(--amber-ink); flex-shrink: 0; }
.co-new { border-color: var(--amber-line); box-shadow: 0 0 0 1px var(--amber-line), 0 10px 30px -14px rgba(255, 178, 63, .35); }
.co-statut { display: flex; justify-content: center; }
.co-cc { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent); white-space: nowrap; }
.co-lieux { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.co-lieu { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px 9px; border-radius: 14px; background: var(--surface2); border: 1.5px solid transparent; color: var(--text); font: inherit; text-align: center; min-height: 92px; cursor: pointer; }
.co-lieu .ico { font-size: 26px; line-height: 1; margin-top: 2px; }
.co-lieu .n { font-size: 12.5px; font-weight: 700; line-height: 1.15; }
.co-lieu .c { font-size: 10px; font-weight: 700; color: var(--c); }
.co-lieu[aria-pressed="true"] { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 13%, var(--surface2)); }
.co-lieu.verr { opacity: .42; cursor: default; } .co-lieu.verr .c { color: var(--faint); }
.co-pion { position: absolute; top: -9px; right: -6px; }
.co-pion .chef-portrait { border-radius: 50%; box-shadow: 0 0 0 2px var(--amber), 0 4px 10px rgba(0, 0, 0, .5); }
.co-effet { padding: 9px 11px; border-radius: 12px; background: var(--bg); font-size: 13px; color: var(--text2); display: flex; gap: 8px; align-items: flex-start; line-height: 1.4; }
.co-effet b { color: var(--text); }
.co-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.co-pile { position: relative; padding-top: 8px; overflow-x: clip; }
.co-derriere { position: absolute; left: 10px; right: 10px; top: 0; height: 40px; border-radius: 6px; background: var(--paper2); opacity: .45; transform: rotate(-1.2deg); }
.co-feuille { position: relative; background: var(--paper); color: var(--ink); border-radius: 6px; padding: 14px 14px 12px; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .7); background-image: repeating-linear-gradient(transparent 0 25px, rgba(150, 130, 100, .13) 25px 26px); transition: transform .32s, opacity .32s; overflow: hidden; }
.co-feuille.sort { transform: translateX(110%) rotate(8deg); opacity: 0; }
.co-ent { display: flex; gap: 10px; align-items: center; border-bottom: 1.5px solid var(--paper-rule); padding-bottom: 9px; margin-bottom: 9px; }
.co-ent img, .co-ent .av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.co-ent .av { display: grid; place-items: center; background: #3B4A6B; color: #fff; font-weight: 800; font-size: 14px; }
.co-ent .de { display: block; font-size: 11px; color: var(--ink3); font-weight: 600; }
.co-ent .objet { display: block; font-family: var(--display); font-weight: 800; font-size: 15.5px; line-height: 1.15; color: var(--ink); }
.co-suite { font-size: 11px; font-weight: 800; color: var(--press); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 4px; }
.co-txt { font-family: var(--serif); font-size: 14.5px; line-height: 1.45; color: var(--ink2); margin: 0 0 11px; }
.co-reps { display: flex; flex-direction: column; gap: 7px; }
.co-opt { text-align: left; display: flex; flex-direction: column; gap: 3px; padding: 9px 11px; border-radius: 9px; border: 1.5px solid var(--paper-rule); background: rgba(255, 255, 255, .55); color: var(--ink); font: inherit; cursor: pointer; }
.co-opt .l { font-weight: 800; font-size: 14px; display: flex; justify-content: space-between; gap: 6px; align-items: center; }
.co-opt .s { font-size: 12.5px; color: var(--ink3); }
.co-opt .co-cc { background: rgba(0, 0, 0, .06); filter: brightness(.8); }
.co-opt[aria-pressed="true"] { border-color: var(--ink); background: #fff; }
.co-tampon { position: absolute; right: 12px; top: 44px; font-family: var(--code); font-weight: 700; font-size: 19px; letter-spacing: 2px; padding: 3px 9px; border: 3px solid currentColor; border-radius: 6px; transform: rotate(-12deg); opacity: .82; pointer-events: none; mix-blend-mode: multiply; }
.co-tampon.vert { color: #1F7A4D; } .co-tampon.rouge { color: var(--press); }
.co-tampon.anim { animation: coTamp .28s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes coTamp { from { transform: rotate(-12deg) scale(2.2); opacity: 0; } to { transform: rotate(-12deg) scale(1); opacity: .82; } }
.co-signes { display: flex; gap: 6px; flex-wrap: wrap; }
.co-mini { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 3px 9px 3px 3px; border-radius: 999px; border: 0; background: var(--surface2); color: var(--text); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-mini .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.co-mini .m { display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; margin-left: 2px; color: var(--amber); font-weight: 700; }
.co-valide { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(29,26,21,.3); }
.co-valide .tiny { flex: 1 1 160px; color: inherit; opacity: .8; }
.co-mini .p { width: 20px; height: 20px; flex-shrink: 0; border-radius: 4px; background: var(--paper); color: var(--press); font-size: 11px; display: grid; place-items: center; font-weight: 900; }
.co-fin { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 16px 10px; border-radius: 14px; background: var(--bg); border: 1px dashed var(--line); }
.co-slots { display: grid; gap: 8px; }
.co-slot { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 6px; border-radius: 14px; border: 1.5px dashed var(--line); background: none; color: var(--text); font: inherit; text-align: center; min-height: 100px; justify-content: center; }
.co-slot img { width: 44px; height: 44px; }
.co-slot.on { border-style: solid; border-color: var(--c); background: color-mix(in srgb, var(--c) 10%, transparent); cursor: pointer; }
.co-slot.offre { border-color: var(--amber); }
.co-slot .n { font-size: 12px; font-weight: 700; line-height: 1.15; } .co-slot .s { font-size: 10.5px; color: var(--muted); line-height: 1.25; }
.co-talent { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--amber-line); background: var(--amber-bg); color: var(--text); font: inherit; cursor: pointer; }
.co-talent img { width: 34px; height: 34px; flex-shrink: 0; }
.co-talent[disabled] { opacity: .5; cursor: default; border-color: var(--line); background: var(--surface2); }
.co-fronts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.co-front { display: flex; flex-direction: column; gap: 3px; padding: 9px; border-radius: 12px; background: var(--surface2); border: 1.5px solid transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.co-front .n { font-weight: 700; font-size: 13px; } .co-front .s { font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.co-front[aria-pressed="true"] { border-color: var(--red); background: color-mix(in srgb, var(--red) 12%, var(--surface2)); }
.co-front[data-v=""][aria-pressed="true"] { border-color: var(--line); background: var(--surface3); }
.co-risque { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.co-risque .j { flex: 1; height: 8px; border-radius: 5px; background: var(--line); overflow: hidden; } .co-risque .j i { display: block; height: 100%; background: linear-gradient(90deg, var(--amber), var(--red)); }
.co-est { display: flex; gap: 2px; justify-content: center; } .co-est i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); } .co-est i.p { background: var(--green); } .co-est i.m { background: var(--red); }
@media (min-width: 900px) { .co-lieux { grid-template-columns: repeat(6, minmax(0, 1fr)); } .co-fronts { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* ───────── Saison 2 : Ordres en feuille de service ───────── */
.ord-fiche { gap: 12px; }
.pv2 { display: flex; flex-direction: column; gap: 8px; }
.pv2-t { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pv2-k { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pv2-v { font: 800 24px/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -.3px; }
.pv2-v small { font-size: 13px; font-weight: 700; }
.pv2-j { position: relative; height: 10px; border-radius: 5px; background: var(--surface3); }
.pv2-j i { position: absolute; top: 0; bottom: 0; border-radius: 5px; background: var(--green); box-shadow: 0 0 10px rgba(61,211,154,.5); }
.pv2-j u { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--text2); text-decoration: none; }
.ord-pips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ord-pips .hs-pip { cursor: pointer; font-size: 12.5px; min-height: 34px; padding: 0 10px 0 8px; }
.ord-reste { flex-basis: 100%; font-size: 12.5px; color: var(--muted); }
.ord-reste small { font-size: 11.5px; color: var(--amber-soft); }
.doctrine .doc-long { display: none; }
.doctrine .doc-l { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -12px; padding: 2px 12px 4px; }
.doctrine .doc-l::-webkit-scrollbar { display: none; }
.doctrine .doc-l > .choice { flex: 0 0 78%; max-width: 280px; scroll-snap-align: start; }
@media (min-width: 1000px) and (hover: hover) and (pointer: fine) { .doctrine .doc-l { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); overflow: visible; margin: 0; padding: 0; } .doctrine .doc-l > .choice { max-width: none; } }

/* ───────── Saison 2 : rapport de la nuit en un coup d'œil ───────── */
.rap2 { gap: 10px; }
.rap2-ipz { display: flex; align-items: baseline; gap: 10px; }
.rap2-k { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--blue-soft); }
.rap2-v { font: 800 38px/1 var(--display); letter-spacing: -.8px; font-variant-numeric: tabular-nums; }
.rap2-d { font-size: 15px; font-weight: 700; }
.rap2-compo { display: flex; gap: 2px; height: 14px; border-radius: 7px; overflow: hidden; }
.rap2-compo i { display: block; min-width: 4px; }
.rap2-leg { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--muted); }
.rap2-leg i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.rap2-leg b { color: var(--text2); font-variant-numeric: tabular-nums; }
.rap2-t { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-top: 4px; }
.rap2-pli { border-top: 1px solid var(--hair); }
.rap2-pli > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 44px; cursor: pointer; font-weight: 600; font-size: 14px; }
.rap2-pli > summary::-webkit-details-marker { display: none; }
.rap2-pli > summary svg { color: var(--muted); transition: transform .15s; }
.rap2-pli[open] > summary svg { transform: rotate(90deg); }
.rap2-pli[open] > summary { margin-bottom: 6px; }

/* ───────── Saison 2 : le privé, troisième fréquence de la Radio ───────── */
.rv-freqs.trois { grid-template-columns: 1fr 1fr .8fr; }
.rv-freq.prive { text-decoration: none; color: inherit; }
.rv-conv-t { display: flex; flex-direction: column; gap: 6px; }
.rv-c { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.rv-c:hover { border-color: var(--amber-line); }
.rv-c-d { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-inv { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--amber-line); background: var(--amber-bg); color: var(--text); text-decoration: none; }
a.rv-inv { flex-direction: row; align-items: center; justify-content: space-between; }
.rv-inv.fait { border-color: var(--line); background: var(--surface); }
@media (max-width: 360px) { .rv-freqs.trois .rv-k { font-size: 9px; } }
main.rv:has(#prive-list), main.rv:has(.rv-fil) { min-height: calc(100dvh - 60px); }
main.rv #prive-list, main.rv .rv-fil { flex: 1; }

/* ───────── Saison 2 : pactes en contrats ───────── */
.typ2 { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.typ2 .pacte-ico { flex-shrink: 0; }
.typ2 .btn { flex-shrink: 0; }
.contrat2 { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 6px 14px 14px 14px; background: var(--paper); color: var(--ink); box-shadow: 0 12px 24px -16px #000; }
.contrat2-sceau { position: absolute; right: 12px; top: 10px; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #E9615A, #A3221A); color: #FFD9D4; display: grid; place-items: center; font-size: 14px; box-shadow: 0 2px 4px rgba(0,0,0,.3); }
.contrat2-k { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }
.contrat2-t { font: 800 17px var(--display); padding-right: 40px; }
.contrat2-e { font-size: 13px; color: #3A352C; }
.contrat2 .jours i { background: #DDD3BD; } .contrat2 .jours i.f { background: #1F3F8A; }
.contrat2-sig { display: flex; justify-content: space-between; gap: 10px; margin-top: 4px; padding-top: 6px; border-top: 1px dashed var(--paper-rule); font: 700 20px/1 'Caveat', cursive; color: #1F3F8A; }
.tuiles2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.tuile2[open] { grid-column: 1 / -1; }
.tuile2 > summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.tuile2 > summary::-webkit-details-marker { display: none; }
.tuile2 > summary svg { color: var(--muted); transition: transform .15s; flex-shrink: 0; }
.tuile2[open] > summary svg { transform: rotate(90deg); }
.tuile2[open] > summary { margin-bottom: 8px; }
.tuile2-i { font-size: 20px; }
.tuile2 > .card, .tuile2 > section.card { background: transparent; border: 0; padding: 0; box-shadow: none; }
.tuile2 .card-title { display: none; }

/* ───────── Saison 2 : Mon hôtel de police en chantier ───────── */
.logis2 .chantier { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; background: var(--surface2); }
.chantier-niv { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.chantier-niv i { height: 26px; border-radius: 7px; background: var(--surface3); display: grid; place-items: center; font: 800 12px var(--display); font-style: normal; color: var(--muted); }
.chantier-niv i.ok { background: var(--blue); color: #0C1124; }
.chantier-niv i.prochain { background: transparent; border: 2px dashed var(--amber-line); color: var(--amber); }
.chantier-niv i.prochain.prevu { border-style: solid; border-color: var(--amber); background: var(--amber-bg); }
.logis2-k { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.annexes2 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.annexe2 { position: relative; aspect-ratio: 1; border-radius: 12px; border: 1px solid var(--line); background: var(--surface2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 22px; cursor: pointer; color: var(--text); padding: 4px; }
.annexe2 small { font-size: 10.5px; color: var(--muted); font-weight: 600; }
.annexe2.faite { border-color: var(--green); background: rgba(61,211,154,.12); }
.annexe2.prevue { border-color: var(--amber); background: var(--amber-bg); }
.annexe2.demolie { border-color: var(--red); border-style: dashed; background: var(--red-bg); opacity: .8; }
.annexe2.sel { box-shadow: 0 0 0 2px var(--amber); }
.annexe2 i { position: absolute; top: 4px; right: 5px; font-size: 10px; font-style: normal; color: var(--green); font-weight: 800; }
.annexe2-fiche { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--amber-line); }

/* ───────── Saison 2 : carte de service et parties ───────── */
.carte-service { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 20px; color: var(--text);
  background: linear-gradient(135deg, color-mix(in srgb, var(--zc) 30%, #16224A), #111A3A 62%); border: 1px solid color-mix(in srgb, var(--zc) 45%, var(--line)); box-shadow: 0 18px 34px -22px #000; }
.carte-service::after { content: ''; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; border: 18px solid rgba(255,255,255,.05); pointer-events: none; }
.cs-k { font: 600 10.5px var(--code); letter-spacing: .1em; text-transform: uppercase; color: rgba(237,240,250,.6); }
.cs-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cs-stats .pc-stat { background: rgba(8,12,27,.45); border-radius: 12px; padding: 8px 4px; }
.cs-plus { font-size: 12.5px; color: rgba(237,240,250,.7); }
.partie2 { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--zc); }
.partie2.ici { border-color: var(--amber-line); border-left-color: var(--zc); }
.tuile2-l { display: flex; flex-direction: row; align-items: center; gap: 8px; text-decoration: none; color: var(--text); }
.tuile2-l .tuile2-i { color: var(--amber); font-weight: 800; }

/* Ordres saison 2 : services sur une ligne, « Ce soir aussi » en tuiles */
.affect .svc2 { display: flex; flex-direction: column; gap: 2px; padding: 8px 0 8px 10px; border-bottom: 1px solid var(--hair); border-left: 3px solid var(--c); margin-left: -2px; }
.affect .svc2:last-of-type { border-bottom: 0; }
.svc2-l { display: flex; align-items: center; gap: 8px; }
.svc2-n { flex: 0 0 auto; width: 92px; display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 4px 0; border: 0; background: none; color: var(--text); font: 700 14.5px var(--body); text-align: left; cursor: pointer; }
.svc2-n small { font-size: 11px; font-weight: 700; }
.svc2-cases { flex: 1; min-width: 0; gap: 3px !important; }
.svc2-cases .case { width: 16px; height: 16px; border-radius: 5px; }
.svc2-cases .case svg { width: 11px; height: 11px; }
.affect .svc2 .stepper button { width: 34px; height: 34px; font-size: 17px; }
.affect .svc2 .stepper .n { min-width: 24px; font-size: 16px; }
.svc2-s { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; min-height: 22px; }
.svc2-s .svc-r { color: var(--text2); min-width: 0; }
.svc2-s .svc-badge { font-size: 11px; padding: 2px 8px; }
.affect .svc2.svc-manque { background: linear-gradient(90deg, var(--red-bg), transparent 70%); }
.affect .svc2 .svc-det { margin: 6px 0 4px; }
.ord-tuiles { display: flex; flex-direction: column; gap: 8px; }
.ord-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.ord-grille.impair > .ord-tuile:last-child { grid-column: 1 / -1; }
.ord-tuile { position: relative; display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 10px 12px 10px 10px; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(135deg, color-mix(in srgb, var(--t) 9%, var(--surface)), var(--surface) 60%); min-width: 0; color: var(--text); text-align: left; font: inherit; cursor: pointer; overflow: hidden; transition: border-color .15s, transform .1s; }
.ord-tuile::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--t); opacity: .85; }
.ord-tuile:hover { border-color: color-mix(in srgb, var(--t) 55%, var(--line)); }
.ord-tuile:active { transform: scale(.985); }
.ord-tuile:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.ord-tuile.on { border-color: var(--t); background: color-mix(in srgb, var(--t) 14%, var(--surface)); }
.ord-tuile.alerte { border-color: var(--amber-line); }
.ord-t-i { flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: var(--t); background: color-mix(in srgb, var(--t) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t) 28%, transparent); }
.ord-t-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ord-t-n { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.ord-t-n > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ord-t-r { font-size: 13.5px; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ord-tuile.vide .ord-t-r { color: var(--faint); font-weight: 500; }
.ord-tuile.vide .ord-t-i { filter: saturate(.35); opacity: .75; }
.ord-tuile.alerte { border-color: var(--amber-line); background: linear-gradient(135deg, var(--amber-bg), var(--surface) 70%); }
.ord-tuile.alerte .ord-t-r { color: var(--amber-hi); }
.ord-t-i { position: relative; }
.ord-tuile.alerte .ord-t-i::after { content: ''; position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 2px var(--surface), 0 0 10px var(--amber); }
.ord-ouvert { gap: 10px; border-color: color-mix(in srgb, var(--t, var(--amber)) 45%, var(--line)); scroll-margin-top: 16px; }
@media (min-width: 1000px) and (hover: hover) and (pointer: fine) { .ord-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ord-grille.impair > .ord-tuile:last-child { grid-column: auto; } }

/* ——— Gazette saison 2 : cartes à toucher (« stories ») ——— */
main.screen.gzs { height: 100dvh; box-sizing: border-box; padding: 10px 12px 100px; gap: 8px; overflow: hidden; }
.gzs-haut { display: flex; align-items: center; gap: 8px; }
.gzs-barres { flex: 1; display: flex; gap: 4px; }
.gzs-barres button { flex: 1; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; }
.gzs-barres i { display: block; width: 100%; height: 4px; border-radius: 4px; background: var(--line); transition: background .2s; }
.gzs-barres button.vu i { background: var(--amber); }
.gzs-barres button[aria-selected="true"] i { background: var(--text); }
.gzs-barres button:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 4px; }
.gzs-num { color: var(--muted); white-space: nowrap; }
.gzs-pile { position: relative; flex: 1; min-height: 0; }
.gzs-carte { position: absolute; inset: 0; display: none; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; border-radius: 18px; cursor: pointer; -webkit-user-select: none; user-select: none;
  background-color: var(--paper); background-image: radial-gradient(rgba(120,100,60,.08) 1px, transparent 1.4px); background-size: 5px 5px; color: var(--ink); box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.gzs-carte.on { display: flex; animation: gzsEntre .28s cubic-bezier(.2,.8,.3,1); }
.gzs-carte.on.arr { animation-name: gzsRevient; }
@keyframes gzsEntre { from { opacity: 0; transform: translateX(26px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes gzsRevient { from { opacity: 0; transform: translateX(-26px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .gzs-carte.on { animation: none; } }
.gzs-tete { display: flex; justify-content: space-between; gap: 10px; padding: 12px 16px 8px; font: 700 11px var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); border-bottom: 3px double var(--ink); margin: 0 12px; padding-inline: 4px; }
.gzs-tete span:first-child { font-family: var(--serif); font-size: 15px; letter-spacing: -.2px; text-transform: none; color: var(--ink); font-weight: 800; }
.gzs-img { display: block; width: calc(100% - 24px); margin: 12px 12px 0; aspect-ratio: 16 / 10; max-height: 34dvh; object-fit: cover; border: 1px solid rgba(0,0,0,.35); filter: sepia(.15); }
.gzs-scene { margin: 12px 12px 0; border-radius: 6px; overflow: hidden; max-height: 30dvh; display: flex; align-items: flex-end; }
.gzs-scene svg { display: block; width: 100%; height: auto; }
.gzs-corps { padding: 12px 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.gzs-carte .sur { font: 800 11px var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--press); }
.gzs-carte h2 { margin: 0; font-family: var(--serif); font-weight: 800; font-size: clamp(24px, 7vw, 30px); line-height: 1.04; letter-spacing: -.4px; text-wrap: balance; }
.gzs-carte p { margin: 0; font-family: var(--serif); font-size: 15.5px; line-height: 1.45; color: var(--ink2); }
.gzs-carte p.chapo { font-size: 17px; font-style: italic; }
.gzs-carte .gris { color: var(--ink3); }
.gzs-liste { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; font-family: var(--serif); font-size: 16px; line-height: 1.3; }
.gzs-fait strong, .gzs-art > strong { display: block; font-family: var(--serif); font-size: 18px; line-height: 1.2; color: var(--ink); }
.gzs-fait p { margin-top: 3px; font-size: 14.5px; }
.gzs-art { border-top: 1px solid var(--ink); padding-top: 8px; display: flex; flex-direction: column; gap: 3px; }
.gzs-plus { border-top: 1px solid var(--ink); padding-top: 8px; display: flex; flex-direction: column; gap: 10px; }
.gzs-plus summary { font: 700 13.5px var(--body); color: var(--ink3); cursor: pointer; }
.gzs-ipz { display: flex; align-items: flex-end; gap: 14px; }
.gzs-ipz .v { font-family: var(--serif); font-size: 58px; font-weight: 900; line-height: .9; font-variant-numeric: tabular-nums; }
.gzs-ipz .l { font: 600 14px/1.4 var(--body); color: var(--ink3); }
.gzs-carte .up { color: #18794E; } .gzs-carte .down { color: #B3261E; }
.gzs-cites { border-top: 1px solid var(--ink); padding-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.gzs-cites p { font-style: italic; }
.gzs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 10px; border: 2px solid var(--ink); background: var(--ink); color: var(--paper); font: 700 14.5px var(--body); text-decoration: none; cursor: pointer; }
.gzs-btn.ghost { background: transparent; color: var(--ink); }
.gzs-btn:disabled { opacity: .4; cursor: default; }
.gzs-btn:focus-visible { outline: 3px solid var(--press); outline-offset: 2px; }
.gzs-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.gzs-dossier { background-color: #EDE5D2; }
.gzs-enq-t { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: center; }
.gzs-carte .pola { background: #fff; padding: 4px 4px 14px; box-shadow: 0 2px 6px rgba(0,0,0,.25); transform: rotate(-3deg); }
.gzs-carte .pola svg { display: block; width: 100%; height: auto; }
.gzs-finmot { font-style: italic; border-left: 3px solid var(--press); padding-left: 10px; }
.gzs-nouvelle { border: 2px solid var(--ink); padding: 8px 10px; background: rgba(255,255,255,.45); }
.gzs-palmares { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.gzs-palmares li { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid var(--paper-rule); padding-top: 6px; font: 14px var(--body); color: var(--ink2); }
.gzs-palmares b { color: var(--ink); text-align: right; }
.gzs-honneur { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; font-family: var(--serif); font-size: 15px; line-height: 1.35; color: var(--ink2); }
.gzs-honneur li { border-top: 1px dotted rgba(29,26,21,.4); padding-top: 6px; }
.gzs-honneur li.moi { background: rgba(255,178,63,.18); padding: 6px 8px; border-radius: 6px; border-top: 0; }
.gzs-honneur strong { color: var(--ink); }
.gzs-toi { font: 800 10.5px var(--body); text-transform: uppercase; letter-spacing: .1em; background: var(--ink); color: var(--paper); padding: 1px 6px; border-radius: 4px; }
.gzs-annonces { display: flex; flex-direction: column; }
.gzs-annonces p { font-family: 'Special Elite', 'Courier New', monospace; font-size: 15px; line-height: 1.35; padding: 8px 0; border-bottom: 1px dotted rgba(29,26,21,.45); color: var(--ink); }
.gzs-sommaire { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 2px; font-family: var(--serif); font-size: 17px; }
.gzs-sommaire button { all: unset; cursor: pointer; padding: 5px 0; display: block; }
.gzs-sommaire button:hover, .gzs-sommaire button:focus-visible { color: var(--press); text-decoration: underline; }
.gzs-extra { border-top: 1px solid var(--ink); padding-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.gzs-extra p { font: 14px var(--body); }
.gzs-carte .db-lien { text-align: left; }
.gzs-bas { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gzs-fl { width: 44px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.gzs-fl:disabled { opacity: .35; cursor: default; }
@media (min-width: 1000px) and (hover: hover) and (pointer: fine) {
  main.screen.gzs { max-width: 560px; padding: 20px 28px 32px; }
}
.gzs-jauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 6px; }
.gzs-jauges div { border: 1px solid var(--paper-rule); background: rgba(255,255,255,.45); border-radius: 8px; padding: 6px 8px; display: flex; flex-direction: column; font: 12px var(--body); color: var(--ink3); }
.gzs-jauges b { font: 800 17px var(--body); color: var(--ink); font-variant-numeric: tabular-nums; }
.gzs-jauges i { font-style: normal; font-weight: 700; font-size: 12.5px; }
.gzs-surnoms li { font-family: var(--body); font-size: 14px; }

/* Zones fondatrices (saison 1) : cadre de la photo de promo dans l'onglet Chef, photo en grand, annonce. */
.co-hero.fd { position: relative; }
.co-hero.fd .co-hero-l { padding-right: 60px; }
.fd-cadre { position: absolute; top: 12px; right: 10px; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; border: 0; background: none; padding: 0; cursor: pointer; }
.fd-cadre .f { display: block; width: 52px; height: 40px; padding: 3px; border-radius: 3px; background: linear-gradient(135deg, #F3D58C, #B98A3E 55%, #7E5520); box-shadow: 0 6px 14px -4px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.25); transform: rotate(-5deg); transition: transform .2s; box-sizing: border-box; }
.fd-cadre:hover .f, .fd-cadre:focus-visible .f { transform: rotate(0) scale(1.06); }
.fd-cadre .f > span { display: block; width: 100%; height: 100%; background: #EFE6D0; padding: 2px; box-sizing: border-box; }
.fd-cadre .f svg { display: block; width: 100%; height: 100%; }
.fd-cadre .l { font-size: 9.5px; font-weight: 700; color: var(--amber-soft); letter-spacing: .03em; }
.fd-photo { position: relative; background: #EFE6D0; padding: 10px 10px 34px; border-radius: 3px; box-shadow: 0 14px 30px -10px rgba(0,0,0,.8); transform: rotate(-1.2deg); }
.fd-photo svg { display: block; width: 100%; height: auto; }
.fd-photo .leg { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-family: 'Special Elite', var(--code); font-size: 14px; color: #3A2C1A; }
.fd-noms { display: flex; flex-wrap: wrap; gap: 6px; }
.fd-noms span { padding: 4px 10px; border-radius: 999px; background: var(--surface2); font-size: 12.5px; font-weight: 600; }
.fd-noms span.moi { background: var(--amber-bg); color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber-line); }
.fd-annonce { align-items: center; text-align: center; border-color: var(--amber-line); }
.fd-annonce .fd-plaque { width: 64px; height: 76px; }

/* Confirmation avant une confrontation ou une accusation */
.cf-wrap { position: fixed; inset: 0; background: rgba(5,8,12,.75); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 90; overflow-y: auto; }
.cf { max-width: 400px; width: 100%; gap: 10px; border-color: var(--red-line, rgba(255,107,107,.45)); }
.cf-t { margin: 0; font: 800 21px/1.15 var(--display); }
.cf-p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text2); }
.cf-p strong { color: var(--text); }
.cf-p.ok { color: var(--green-soft); }
.cf-l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cf-l li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--bg); font-size: 13.5px; font-weight: 600; }
.cf-l em { font-style: normal; font-size: 11.5px; font-weight: 700; white-space: nowrap; padding: 2px 8px; border-radius: 999px; }
.cf-l em.moi { color: var(--green-soft); background: rgba(61,211,154,.12); }
.cf-l em { flex-shrink: 0; }
.cf-l li > span { min-width: 0; }
.cf-l em.pub { color: var(--amber-soft); background: rgba(255,178,63,.12); }
.cf-l em.long { flex-shrink: 1; white-space: normal; text-align: right; }
.cf-alerte { margin: 0; padding: 9px 11px; border-radius: 12px; font-size: 13.5px; line-height: 1.4; color: #FFD0D0; background: rgba(255,107,107,.12); border: 1px solid rgba(255,107,107,.4); }

.pli-ligne { display: flex; align-items: center; gap: 10px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.pli-ligne > svg:last-child { color: var(--muted); flex-shrink: 0; }

/* Jauges de l'Intervention (flagrant délit, saisie) sous le service, dans les ordres */
.jg-inter { display: flex; flex-direction: column; gap: 3px; padding: 2px 0 4px 0; }
.jg-i { display: grid; grid-template-columns: minmax(8.5em, max-content) 1fr 2.6em; white-space: nowrap; padding-right: 6px; align-items: center; gap: 8px; font-size: 11px; color: var(--text2); text-decoration: none; }
.jg-b { display: block; height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.jg-b b { display: block; height: 100%; border-radius: 3px; background: var(--c, var(--amber)); }
.jg-v { text-align: right; font-variant-numeric: tabular-nums; }
.jg-d > summary { list-style: none; cursor: pointer; }
.jg-d > summary::-webkit-details-marker { display: none; }
.jg-x { margin: 3px 0 4px; font-size: 11.5px; line-height: 1.4; color: var(--text2); }
.jg-x a { color: var(--amber); margin-left: 4px; }
.jg-d.jg-doc .jg-n { color: var(--amber-soft, #FFC873); font-weight: 600; }
.jg-d.jg-doc .jg-b b { background: linear-gradient(90deg, var(--amber, #FFB23F), #FFD27A); }
.jg-solo { padding: 4px 2px 8px; }

/* ───── Non-droit profond : réseau du Parrain, lieutenants, scène du soir, confiance des habitants ───── */
.ml-pt { position: relative; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 35%, #3A3240, #1A1620 70%); border: 2px solid #E0625A; }
.ml-pt svg, .ml-pt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ml-pt.boss { width: 52px; height: 52px; border-color: #F3C84B; }
.ml-pt.garde { border-color: var(--blue); }
.ml-pt.garde::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 6px, rgba(157, 203, 255, .7) 6px 8px); }
.ml-pt.tombe { border-color: var(--green); filter: grayscale(.85); opacity: .8; }
.ml-pt.enfui { border-style: dashed; opacity: .6; }
.ml-reseau { padding: 12px; border-color: rgba(243, 200, 75, .3); }
.ml-reseau > summary { list-style: none; cursor: pointer; }
.ml-reseau > summary::-webkit-details-marker { display: none; }
.ml-boss { font-family: var(--display); font-weight: 800; font-size: 18px; color: #F3C84B; letter-spacing: -.2px; line-height: 1.1; }
.ml-reseau .pill.amber { color: var(--amber); border-color: var(--amber-line); background: var(--amber-bg); }
.ml-dossier { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.ml-dossier span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 10px; border: 1px dashed var(--line); color: var(--faint); min-width: 0; }
.ml-dossier span b { font-size: 15px; line-height: 1; }
.ml-dossier span i { font-style: normal; font-size: 9.5px; line-height: 1.1; text-align: center; overflow-wrap: anywhere; }
.ml-dossier span.ok { border-style: solid; border-color: rgba(243, 200, 75, .6); background: rgba(243, 200, 75, .09); color: #F3C84B; }
.ml-lts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 6px; }
.ml-lt { display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: 0; padding: 2px; color: inherit; font: inherit; cursor: pointer; min-width: 0; text-align: center; }
.ml-lt .n { font-size: 11.5px; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.ml-lt .e { font-size: 10px; color: var(--muted); line-height: 1.15; overflow-wrap: anywhere; }
.ml-lt.tombe .n { color: var(--green-soft); }
.ml-lt.garde .n { color: var(--blue-soft); }
.ml-ltl { padding: 8px 10px; border-radius: 12px; background: var(--surface2); border: 1px solid var(--hair); }
.ml-ltl .ml-pt { width: 34px; height: 34px; }
.ml-scene { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(255, 122, 42, .55); background: linear-gradient(160deg, rgba(255, 122, 42, .12), transparent 70%); }
.ml-scene.ok { border-color: rgba(61, 211, 154, .5); }
.ml-scene-ico { font-size: 22px; line-height: 1; }
.ml-scene-t { color: #FF9A3C; }
.ml-conf { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(61, 211, 154, .35); background: var(--green-bg, rgba(61, 211, 154, .08)); }
.ml-jauge { position: relative; height: 8px; border-radius: 999px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--hair); overflow: hidden; }
.ml-jauge > span { display: block; height: 100%; border-radius: 999px; background: var(--green); }
.ml-jauge > i { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--bg); }
.ml-scene-plus summary { cursor: pointer; color: var(--muted); }
.ml-ltl { padding: 6px 10px; }

.ml-chip { display: block; padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(255, 122, 42, .5); color: #FF9A3C; font-size: 12.5px; font-weight: 600; text-decoration: none; }
.ml-scene.hp { border: 0; background: none; padding: 0; }

.ml-carre { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--amber-line); background: var(--amber-bg); }
.ml-tac { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; width: 100%; }
.ml-tac-t { font-weight: 700; font-size: 14px; }
/* Boutique de PS (Mon commissariat) */
.bq { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 14px; background: linear-gradient(160deg, rgba(242, 140, 40, .14), rgba(107, 63, 160, .14)); border: 1px solid rgba(242, 140, 40, .35); }
.bq-tete { align-items: baseline; }
.bq-titre { font-weight: 800; font-size: 14px; }
.bq-solde { font: 700 12px var(--mono); color: var(--amber); background: rgba(255, 178, 63, .12); border: 1px solid rgba(255, 178, 63, .35); padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.bq-carte { display: flex; flex-direction: column; gap: 8px; border-radius: 12px; overflow: hidden; background: var(--surface2, #161E3C); border: 1px solid var(--line); }
.bq-carte.a { border-color: var(--green); }
.bq-apercu svg { display: block; width: 100%; height: auto; }
.bq-corps { gap: 4px; padding: 0 10px 10px; }
.bq-nom { font-size: 16px; }
.bq-limite { font: 700 11px var(--mono); color: #F2A64A; white-space: nowrap; }
.bq-act { gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.bq-ok { font-size: 12px; font-weight: 700; color: var(--green); }
/* Manoir hanté */
.mn-bougie, .mn-halo { animation: mnBougie 2.6s ease-in-out infinite; }
@keyframes mnBougie { 0%, 100% { opacity: 1; } 18% { opacity: .82; } 22% { opacity: .96; } 47% { opacity: .78; } 52% { opacity: 1; } 76% { opacity: .88; } }
.mn-fantome { animation: mnFantome 9s ease-in-out infinite; }
@keyframes mnFantome { 0% { transform: translate(0, 0); opacity: .9; } 25% { transform: translate(-28px, -6px); opacity: .55; } 50% { transform: translate(-46px, 2px); opacity: .95; } 75% { transform: translate(-18px, -9px); opacity: .5; } 100% { transform: translate(0, 0); opacity: .9; } }
.mn-chauve { animation: mnBat 7s linear infinite; }
.mn-c2 { animation-duration: 9.5s; animation-direction: reverse; }
@keyframes mnBat { 0% { transform: translate(0, 0) scaleY(1); } 10% { transform: translate(12px, -5px) scaleY(.6); } 20% { transform: translate(24px, 0) scaleY(1); } 35% { transform: translate(36px, 6px) scaleY(.6); } 50% { transform: translate(28px, 12px) scaleY(1); } 65% { transform: translate(12px, 8px) scaleY(.6); } 80% { transform: translate(-6px, 4px) scaleY(1); } 100% { transform: translate(0, 0) scaleY(1); } }
.mn-chauve, .mn-fantome { transform-box: fill-box; transform-origin: center; }
.mn-brume { animation: mnBrume 12s ease-in-out infinite alternate; }
@keyframes mnBrume { from { transform: translateX(-8px); } to { transform: translateX(10px); } }
.mn-bulles circle { animation: mnBulle 2.1s ease-in infinite; transform-box: fill-box; }
@keyframes mnBulle { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: .9; } 100% { transform: translateY(-9px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mn-bougie, .mn-halo, .mn-fantome, .mn-chauve, .mn-brume, .mn-bulles circle { animation: none; } }
.mn-ailes > :nth-child(1) { animation: mnAileA .36s steps(1) infinite; }
.mn-ailes > :nth-child(2) { animation: mnAileB .36s steps(1) infinite; }
@keyframes mnAileA { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes mnAileB { 0% { opacity: 0; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mn-ailes > :nth-child(1) { animation: none; } .mn-ailes > :nth-child(2) { animation: none; opacity: 0; } }
.bq-carte.vedette { position: relative; border-color: rgba(242, 140, 40, .6); box-shadow: 0 8px 22px -12px rgba(242, 140, 40, .6); }
.bq-promo { position: absolute; top: 8px; left: 8px; z-index: 1; font: 800 11.5px var(--body); color: #2B1300; background: linear-gradient(90deg, #FFB347, #F28C28); padding: 3px 9px; border-radius: 99px; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.bq-act s, .bq-ligne s { opacity: .6; font-weight: 500; }
.bq-cat { border-radius: 12px; background: var(--surface2, #161E3C); border: 1px solid var(--line); }
.bq-cat > summary { cursor: pointer; padding: 10px 12px; font-weight: 700; font-size: 13.5px; list-style: none; }
.bq-cat > summary::after { content: ' ▾'; opacity: .6; }
.bq-cat[open] > summary::after { content: ' ▴'; }
.bq-groupe { display: flex; flex-direction: column; gap: 6px; padding: 4px 10px 10px; }
.bq-ligne { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--line); }
.bq-ligne.a { opacity: .6; }
.bq-droite { gap: 6px; align-items: flex-end; flex-shrink: 0; }
.bq-apercu.petit { margin-top: 6px; border-radius: 8px; overflow: hidden; }
button.ajd-alerte { width: 100%; text-align: left; font: inherit; cursor: pointer; }
/* Ta semaine de chef : objectif dépliable (comment le remplir, et où aller) */
.obj-pli > summary { list-style: none; cursor: pointer; }
.obj-pli > summary::-webkit-details-marker { display: none; }
.obj-q { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--muted, #9FB0C8); flex-shrink: 0; }
.obj-pli[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.obj-pli[open] .obj-q { background: var(--c); color: #0E1524; border-color: var(--c); }
.obj-aide { display: flex; flex-direction: column; gap: 8px; padding: 8px 10px 10px 46px; background: var(--surface2); border-left: 3px solid var(--c); border-radius: 0 0 12px 12px; margin-top: -1px; }
.obj-go { align-self: flex-start; }

/* Carte, vue district : sur téléphone la maquette est réduite, les noms de zones et pseudos grossissent pour rester lisibles. */
@media (max-width: 700px) { .iso-dz-i { transform: scale(1.9); } }
/* Gazette : une sortie claire à tout moment (avant, une flèche « ‹ » en haut à gauche qu'on prenait pour « carte précédente ») */
.gzs-fermer { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--text); font-size: 12.5px; font-weight: 700; text-decoration: none; background: var(--surface2); }
.gzs-fermer:hover { border-color: var(--amber-line, var(--line)); }

/* ───── « Le Quartier » : plateau 3 × 3 du non-droit ───── */
.cv-carte.cv-plateau { line-height: 1.35; background: none; border: 0; box-shadow: none; padding: 50px 12px 4px; height: auto; aspect-ratio: auto; overflow: visible; }
.qz { display: flex; flex-direction: column; gap: 8px; min-width: 0; width: 100%; }
.qz-haut { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.qz-progres { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text2); font-weight: 600; }
.qz-progres i { width: 12px; height: 12px; border-radius: 4px; background: var(--surface3); display: inline-block; }
.qz-progres i.on { background: var(--blue); }
.qz-annonce { font-size: 13px; padding: 8px 10px; border-radius: 12px; background: var(--red-bg); color: #FFC9C6; border: 1px solid var(--red-line); }
.qz-annonce b { color: var(--text); }
.qz-parrain { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text2); }
.qz-parrain .qz-pt { border: 1.5px solid #D9B44A; }
.iso .qz-pulse rect { animation: halo 1.6s ease-in-out infinite; }
.qz-plateau { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; width: 100%; max-width: 640px; margin: 0 auto; aspect-ratio: 1; }
.qz-tuile { position: relative; border-radius: 15px; overflow: hidden; border: 2px solid transparent; cursor: pointer; display: flex; flex-direction: column; padding: 7px; gap: 4px; text-align: left; min-width: 0; color: var(--text); font: inherit; background: #2A121C; }
.qz-tuile.tenu { background: linear-gradient(180deg, #3A1620, #1E0C14); border-color: rgba(255,110,106,.35); }
.qz-tuile.repris { background: linear-gradient(180deg, #17305A, #0D1A33); border-color: rgba(99,176,255,.5); }
.qz-tuile.qg { background: linear-gradient(180deg, #2E1030, #170818); border-color: rgba(183,156,255,.45); }
.qz-tuile.loin { filter: saturate(.6); }
.qz-tuile.parrain, .qz-tuile.vide { cursor: default; background: linear-gradient(180deg, #1A1B2E, #10111F); border-color: #232745; align-items: center; justify-content: center; text-align: center; }
.qz-tuile.parrain.tombe { filter: grayscale(1); opacity: .7; }
.qz-tuile.sel { border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-bg); }
.qz-tuile:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.qz-nom { font: 800 clamp(11px, 2.4vw, 15px)/1.1 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 26px; max-width: 100%; }
.qz-tuile.parrain .qz-nom { padding: 0; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.qz-pt { position: relative; display: inline-block; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; background: #20294D; flex: none; }
.qz-pt svg, .qz-pt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.qz-lt { position: absolute; top: 5px; right: 5px; }
.qz-lt .qz-pt { border: 1.5px solid var(--red); }
.qz-tuile.parrain .qz-pt { width: clamp(36px, 9vw, 56px); height: clamp(36px, 9vw, 56px); border: 2px solid #D9B44A; }
.qz-p-nom { font: 700 12px var(--body); }
.qz-p-dos { font-size: 10.5px; color: var(--muted); }
.qz-bars { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.qz-bar { width: clamp(11px, 2.5vw, 18px); height: clamp(10px, 2.1vw, 14px); border-radius: 3px; background: linear-gradient(180deg, #C97A4A, #8E4A2A); box-shadow: inset 0 -2px 0 rgba(0,0,0,.3); position: relative; }
.qz-bar.cassee { background: #3A2A30; box-shadow: none; opacity: .55; }
.qz-bar.cassee::before { content: '✕'; position: absolute; inset: 0; display: grid; place-items: center; font: 800 9px var(--body); color: var(--green); }
.qz-bar.cachee { background: transparent; border: 1.5px dashed #B79CFF; box-shadow: none; display: grid; place-items: center; font: 800 9px var(--body); color: #B79CFF; }
.qz-bar.revelee { background: linear-gradient(180deg, #9A7AE0, #5E46A8); }
.qz-nb { font: 800 clamp(13px, 3vw, 18px) var(--display); font-variant-numeric: tabular-nums; }
.qz-sur { font-size: 11px; color: var(--muted); }
.qz-pions { display: flex; flex-wrap: wrap; gap: 1px; margin-top: auto; min-height: 20px; }
.qz-mini { width: clamp(14px, 3.2vw, 22px); height: clamp(17px, 3.8vw, 26px); }
.qz-mini svg { width: 100%; height: 100%; display: block; }
.qz-mini.moi svg { filter: drop-shadow(0 0 3px rgba(255,178,63,.8)); }
.qz-etat { font: 700 clamp(9px, 2vw, 12px)/1.2 var(--body); padding: 3px 6px; border-radius: 7px; align-self: flex-start; max-width: 100%; background: rgba(8,12,27,.9); border: 1px solid currentColor; }
.qz-etat.v { color: var(--green); } .qz-etat.a { color: var(--amber-hi); } .qz-etat.r { color: #FFB3B0; } .qz-etat.b { color: #A9D3FF; } .qz-etat.g { color: var(--muted); }
.qz-menace { position: absolute; top: 34px; right: 5px; font: 800 clamp(10px, 2.2vw, 13px) var(--body); padding: 2px 7px; border-radius: 999px; background: #4A121A; color: #FFC9C6; border: 1.5px solid var(--red); box-shadow: 0 0 12px rgba(255,110,106,.5); animation: halo 1.6s ease-in-out infinite; white-space: nowrap; }
.qz-menace.renfort { background: #3A2A10; color: var(--amber-hi); border-color: var(--amber); box-shadow: none; animation: none; }
.qz-tuile.repris .qz-menace { top: 6px; }
.qz-cadenas { position: absolute; inset: 0; display: grid; place-items: center; font-size: 24px; opacity: .45; pointer-events: none; }
.qz-moi { padding: 10px 12px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); }
.qz-fiche { display: flex; flex-direction: column; gap: 8px; }
.qz-f-tete { display: flex; gap: 10px; align-items: center; }
.qz-f-tete h3 { margin: 0; font: 800 18px var(--display); }
.qz-f-tete .qz-pt { width: 42px; height: 42px; border: 2px solid var(--red); }
.qz-f-ico { font-size: 28px; }
.qz-compte { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 12px; background: var(--bg); font-size: 14px; color: var(--text2); }
.qz-compte b { color: var(--text); font: 800 19px var(--display); font-variant-numeric: tabular-nums; }
.qz-compte .ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; font-size: 15px; }
.qz-compte .ic.rd { background: var(--red-bg); } .qz-compte .ic.vi { background: rgba(183,156,255,.16); } .qz-compte .ic.bl { background: var(--blue-bg); }
.qz-msg { font-size: 14px; padding: 9px 11px; border-radius: 12px; }
.qz-msg b { color: var(--text); }
.qz-msg.v { background: var(--green-bg, rgba(61,211,154,.12)); color: #BDF1DB; border: 1px solid rgba(61,211,154,.35); }
.qz-msg.a { background: var(--amber-bg); color: var(--amber-hi); border: 1px solid var(--amber-line); }
.qz-msg.r { background: var(--red-bg); color: #FFC9C6; border: 1px solid var(--red-line); }
.qz-msg.g { background: var(--surface2); color: var(--text2); }
.qz-qui { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12.5px; color: var(--text2); }
.qz-qui span { display: inline-flex; align-items: center; gap: 5px; }
.qz-qui i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.qz-steps { display: flex; flex-direction: column; gap: 6px; }
.qz-step { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 4px; border-radius: 14px; background: var(--surface2); border: 1px solid var(--line); }
.qz-step-ic svg { width: 32px; height: 38px; display: block; }
.qz-step-t { display: flex; flex-direction: column; line-height: 1.2; flex: 1; min-width: 0; }
.qz-step-t b { font: 700 14px var(--body); }
.qz-step-t span { font-size: 11.5px; color: var(--muted); }
.qz-step-n { display: inline-flex; align-items: center; gap: 6px; }
.qz-step-n b { min-width: 18px; text-align: center; font: 800 17px var(--display); font-variant-numeric: tabular-nums; }
.qz-step-n .btn { min-width: 36px; min-height: 36px; }
.qz-regles summary { cursor: pointer; color: var(--text2); }
.qz-regles p { margin: 6px 0 0; color: var(--text2); }
@media (min-width: 1280px) and (hover: hover) and (pointer: fine) {
  body:has(main.carte-v3) .cv-carte.cv-plateau .qz-plateau { max-width: min(640px, calc(100vh - 150px)); }
}

/* ───── Onglet Chef v3 (audit du 13 octobre 2026) : profil de zone et cartes repliées ───── */
.pz { border-top: 1px solid var(--hair); margin: 0 -16px -16px; padding: 0 16px; }
.pz-l { width: 100%; display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 11px 0 13px; text-align: left; color: var(--text); font: inherit; cursor: pointer; }
.pz-mini { width: 34px; height: 34px; flex-shrink: 0; }
.pz-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pz-t .k { font-size: 11px; color: var(--muted); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.pz-t b { font-size: 14.5px; }
.pz-x { font-family: var(--display); font-weight: 800; font-size: 16px; color: var(--amber-hi, #FFC970); white-space: nowrap; }
.pz-chev { color: var(--muted); font-size: 18px; transition: transform .2s; }
.pz[data-open="true"] .pz-chev { transform: rotate(90deg); }
.pz-corps { display: flex; flex-direction: column; gap: 10px; padding-bottom: 16px; }
.pz-radar { display: block; width: 100%; max-width: 340px; height: auto; margin: 0 auto; }
.pz-titre { align-self: flex-start; background: var(--amber); color: var(--amber-ink); font-weight: 800; font-size: 12.5px; border-radius: 999px; padding: 3px 11px; }
.pz-titre.gris { background: var(--surface3); color: var(--text); }
.pz-phrase { font-size: 13px; color: var(--text2); }
.pz-svc { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; border-top: 1px solid var(--hair); }
.pz-l1 { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; font-weight: 600; }
.pz-l1 b { font-family: var(--display); font-size: 15px; }
.pz-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 7px; }
.pz-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.pz-c { font-size: 11.5px; border-radius: 7px; padding: 1px 7px; background: var(--surface2); color: var(--text2); border: 1px solid var(--hair); white-space: nowrap; }
.pz-c.up { color: var(--green); border-color: rgba(61, 211, 154, .3); }
.pz-c.dn { color: var(--red); border-color: rgba(255, 110, 106, .3); }
.pz-c.vide { color: var(--faint); border-style: dashed; }
.pz-note { font-size: 11.5px; color: var(--faint); }
details.co-pli > summary { gap: 12px; }
.co-pli-ico { font-size: 22px; line-height: 1; width: 28px; text-align: center; flex-shrink: 0; }
.co-pli-t { font-family: var(--display); font-weight: 800; font-size: 16px; line-height: 1.15; }
.co-pli-s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
details.co-pli[open] .co-pli-s { white-space: normal; }
.co-pli-ok { color: var(--green); display: inline-flex; }
details.co-pli > .co-pli-corps { gap: 12px; }
.pz-eff { font-size: 11.5px; color: var(--blue-soft, #9DCBFF); }

/* Ordres en parties numérotées (oct. 2026) : un en-tête toujours visible avec son résumé, le détail à la demande. */
.op-part { padding: 0; gap: 0; overflow: hidden; }
.op-part.am { border-color: var(--amber-line); }
.op-h { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; text-align: left; color: var(--text); background: none; border: 0; border-radius: 0; min-height: 0; box-shadow: none; }
.op-h > svg { flex-shrink: 0; color: var(--muted); transition: transform .2s; }
.op-part.ouvert .op-h > svg { transform: rotate(90deg); }
.op-n { width: 24px; height: 24px; border-radius: 99px; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--surface3); color: var(--text2); flex-shrink: 0; }
.op-part.am .op-n { background: var(--amber); color: var(--amber-ink); }
.op-part.ok .op-n { background: var(--green); color: #062417; }
.op-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.op-t b { font-size: 15px; }
.op-t span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-c { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 8px; }

/* HP tableau de bord (oct. 2026) : carte des ordres du soir, incidents, trois cartes à chiffre. */
.hp-ordres { gap: 10px; border-color: var(--amber-line); background: linear-gradient(160deg, rgba(255,178,63,.14), rgba(255,178,63,.03)); }
.hp-ordres.fini { border-color: rgba(61,211,154,.4); background: linear-gradient(160deg, rgba(61,211,154,.10), rgba(61,211,154,.02)); }
.ho-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ho-tete > b { font-family: var(--display); font-size: 19px; }
.ho-pips { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
.ho-pip { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; color: var(--muted); text-decoration: none; }
.ho-pip i { width: 34px; height: 34px; border-radius: 99px; display: grid; place-items: center; background: var(--surface2); border: 2px solid var(--line); color: var(--text2); }
.ho-pip.af { color: var(--amber); }
.ho-pip.af i { border-color: var(--amber); background: var(--amber-bg); color: var(--amber); }
.ho-pip.ok i { border-color: var(--green); background: rgba(61,211,154,.15); color: var(--green); }
.ho-bas { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ho-prev { display: flex; flex-direction: column; line-height: 1.15; flex: 1; min-width: 90px; }
.ho-prev b { font-size: 15px; }
.ho-bas .btn { flex-shrink: 0; }
.ho-autres { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--amber-hi); text-decoration: none; padding-top: 2px; border-top: 1px solid var(--hair); padding-top: 8px; }
.ho-autres svg { margin-left: auto; flex-shrink: 0; }
.hp-inc .inc-ouvert:first-child { padding-block: 12px; border-color: rgba(255,110,106,.5); background: linear-gradient(150deg, rgba(255,110,106,.14), rgba(255,110,106,.03)); }
.hp-vie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hp-vie-t { position: relative; display: flex; flex-direction: column; gap: 1px; padding: 10px; border-radius: 16px; background: var(--surface); border: 1px solid var(--hair); text-decoration: none; color: var(--text); min-width: 0; }
.hp-vie-t .ic { font-size: 19px; line-height: 1; margin-bottom: 4px; }
.hp-vie-t b { font-family: var(--display); font-size: 19px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-vie-t span:last-child { font-size: 11.5px; color: var(--muted); line-height: 1.25; }
.hp-vie-t.am { border-color: var(--amber-line); }
.hp-vie-t.am::after { content: ""; position: absolute; top: 10px; right: 10px; width: 9px; height: 9px; border-radius: 9px; background: var(--amber); box-shadow: 0 0 0 3px rgba(255,178,63,.2); }
.hp-hero { height: 236px; }
.hud-bas { left: 12px; align-items: center; }
.hud-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-right: auto; min-width: 0; }
.hud-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 9px; border-radius: 99px; border: 1px solid rgba(255,255,255,.16); background: rgba(12,17,36,.78); color: var(--text); font: 600 12px/1 var(--body); white-space: nowrap; backdrop-filter: blur(6px); }
.hud-chip b { font-weight: 800; }
a.hud-chip { text-decoration: none; }
.hud-chip.am { border-color: var(--amber-line); color: var(--amber-hi); }
.hud-bas .hud-btn { width: 38px; height: 38px; }
.hp-zone { padding-block: 10px; }
.ho-sit .soir-situ { margin: 0; }
.hp-inc:not(.tous) .ajd-inc > .inc-row:nth-child(n+2) { display: none; }
.hp-inc-plus { width: 100%; margin-top: 6px; padding: 8px; border-radius: 12px; border: 1px dashed var(--line); background: none; color: var(--text2); font: 600 13px var(--body); }
.hp-hero { height: 222px; }
.hp-zone .hp-rond svg { width: 48px; height: 48px; }
.hp-ordres { padding: 12px 14px; gap: 8px; }
.ho-pip i { width: 30px; height: 30px; }
.ho-autres { padding-top: 6px; font-size: 12.5px; }
.hp.v3 .hp-col { gap: 10px; }
/* ═══════════════════════════════════════════════════════════════
   Non-droit, refonte du 13 octobre : la carte en grand, le tiroir du secteur
   qui mord dessus (un verdict, trois rôles côte à côte), le détail replié.
   ═══════════════════════════════════════════════════════════════ */
/* Téléphone et tablette : la maquette recadrée au centre, ~45 % de l'écran. */
@media (max-width: 999px), (hover: none), (pointer: coarse) {
  .carte-v3.cv-nd > .cv-carte > svg.iso { height: clamp(300px, 46vh, 440px); }
  .carte-v3.cv-nd .cv-corps > .nd-v4:first-child > .ndt:first-child { margin-top: -30px; position: relative; z-index: 2; box-shadow: 0 -10px 24px -10px rgba(0, 0, 0, .7), var(--lift); }
}
.ndt { display: flex; flex-direction: column; border-radius: 20px; background: var(--surface); border: 1px solid var(--amber-line); }
.ndt-tete { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-rows: auto auto; align-items: center; column-gap: 8px; width: 100%; padding: 6px 14px 10px; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ndt-poignee { grid-column: 1 / -1; justify-self: center; width: 38px; height: 4px; border-radius: 2px; background: var(--line); margin-bottom: 8px; }
.ndt-titre { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ndt-nom { font: 700 19px/1.15 var(--display); color: var(--amber); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ndt-sous { font-size: 12.5px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ndt-chev { display: grid; place-items: center; color: var(--muted); transform: rotate(90deg); transition: transform .15s; }
.ndt.replie .ndt-chev { transform: rotate(-90deg); }
.ndt.replie .ndt-tete { padding-bottom: 8px; }
.ndt-tete:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; border-radius: 20px; }
.ndt-corps { display: flex; flex-direction: column; gap: 10px; padding: 0 12px 12px; }
.ndt-jauge { display: flex; align-items: center; gap: 10px; }
.ndt-j { position: relative; flex: 1; height: 10px; border-radius: 999px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--hair); overflow: hidden; }
.ndt-j-av { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: color-mix(in srgb, var(--red) 32%, transparent); }
.ndt-j-ap { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--red); }
.ndt-j-ap.monte { background: var(--amber); }
.ndt-j-seuil { position: absolute; top: -2px; bottom: -2px; width: 2px; background: rgba(255, 255, 255, .45); }
.ndt-j-n { font: 500 13px var(--mono); color: var(--text2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ndt-j-n b { color: var(--text); font-weight: 700; }
.ndt-j-n b.good { color: var(--green-soft); } .ndt-j-n b.bad { color: var(--red-soft); }
.ndt-qui { display: flex; align-items: center; gap: 8px; min-height: 22px; font-size: 12.5px; color: var(--text2); }
.ndt-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ndt-roles.deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ndt-roles.un { grid-template-columns: 1fr; }
.ndt-roles.un .ndt-role { flex-direction: row; justify-content: space-between; }
.ndt-role { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 9px 6px 8px; border-radius: 14px; background: var(--bg); border: 1px solid var(--hair); text-align: center; }
.ndt-role.bad { border-color: var(--red-line); }
.ndt-role.ok { border-color: color-mix(in srgb, var(--green) 45%, transparent); }
.ndt-r-tete { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; text-align: left; }
.ndt-r-tete b { font-size: 13px; line-height: 1.15; }
.ndt-r-ico { font-size: 17px; flex-shrink: 0; }
.ndt-r-svc { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ndt-step { gap: 2px; padding: 2px; border-radius: 12px; }
.ndt-step button { width: 32px; height: 32px; border-radius: 9px; font-size: 16px; }
.ndt-step .n { min-width: 20px; font-size: 16px; }
.ndt-role .nd-cases { justify-content: center; gap: 3px; min-height: 12px; }
.ndt-role .nd-case { width: 11px; height: 11px; border-radius: 3px; }
.ndt-role .nd-case.pleine.moi { box-shadow: 0 0 0 1.5px var(--bg), 0 0 0 2.5px var(--amber); }
.ndt-r-etat { font-size: 11.5px; font-weight: 700; color: var(--muted); line-height: 1.2; }
.ndt-role.ok .ndt-r-etat { color: var(--green-soft); } .ndt-role.bad .ndt-r-etat { color: var(--red-soft); } .ndt-role.warn .ndt-r-etat { color: var(--amber); }
.ndt-verdict { margin: 0; padding: 10px 12px; border-radius: 12px; font-size: 14px; line-height: 1.4; text-align: center; border: 1px solid var(--hair); background: var(--surface2); color: var(--text); }
.ndt-verdict.ok { background: color-mix(in srgb, var(--green) 16%, transparent); border-color: color-mix(in srgb, var(--green) 45%, transparent); color: var(--green-soft); }
.ndt-verdict.warn { background: var(--amber-bg); border-color: var(--amber-line); }
.ndt-verdict.bad { background: var(--red-bg); border-color: var(--red-line); }
.ndt-verdict b { color: inherit; }
.ndt-verdict.warn b { color: var(--amber); } .ndt-verdict.bad b { color: var(--red-soft); }
.ndt-note { margin: 0; font-size: 12.5px; line-height: 1.4; }
.ndt-radio { margin: 0; font-size: 12.5px; text-align: center; }
.ndt-det { border-top: 1px solid var(--hair); padding-top: 8px; }
.ndt-det > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; font-size: 13px; font-weight: 600; color: var(--text2); }
.ndt-det > summary::-webkit-details-marker { display: none; }
.ndt-det > summary::after { content: '›'; font-size: 16px; transition: transform .15s; }
.ndt-det[open] > summary::after { transform: rotate(90deg); }
.ndt-det-c { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.ndt-aide { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text2); }
.ndt-aide b { color: var(--text); }
.ndt-astuce { margin: 0; text-align: center; font-size: 13px; color: var(--text2); padding: 10px; border: 1px dashed var(--line); border-radius: 14px; }
.cv-lien-dist { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--hair); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
.cv-lien-dist > span:first-child { font-size: 18px; }
.cv-lien-dist b { font-size: 14px; }
.cv-lien-dist .col > span { font-size: 12px; color: var(--muted); }
.cv-lien-dist i { font-style: normal; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--red); color: #fff; font: 800 11px var(--body); display: grid; place-items: center; }
.cv-lien-dist.alerte { border-color: var(--red-line); }
.cv-lien-dist:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .ndt-chev, .ndt-det > summary::after { transition: none; } }

/* Quiz express : bandeau en haut des énigmes du jour, ligne de classement sous le résultat. */
.qz-bandeau { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 14px; border: 1.5px solid #2EC4D6; background: color-mix(in srgb, #2EC4D6 10%, var(--surface)); color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.qz-bandeau:active { transform: scale(0.99); }
.qz-b-ico { font-size: 22px; line-height: 1; }
.qz-b-t { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.qz-b-t b { font-size: 14px; }
.qz-b-t span { font-size: 12px; color: var(--text2); }
.qz-b-go { flex: 0 0 auto; padding: 7px 14px; border-radius: 999px; background: #2EC4D6; color: #0C1124; font-weight: 800; font-size: 13px; }
.qz-rang { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; padding: 8px 0 0; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--text); font: inherit; font-size: 13px; cursor: pointer; text-align: left; }

/* ——— iPhone (jeu installé sur l'écran d'accueil) : la barre d'état (heure, réseau, batterie) est
   transparente et passe par-dessus la page. Tout ce qui est en haut de l'écran descend de sa hauteur
   (--sat vaut 0 ailleurs : rien ne change sur Android, dans Safari ni sur PC). ——— */
:root { --sat: env(safe-area-inset-top, 0px); }
@media not all and (min-width: 1000px) and (hover: hover) and (pointer: fine) {
  main.screen { padding-top: calc(20px + var(--sat)); }
  main.screen.gzs { padding-top: calc(10px + var(--sat)); }
  .hp-hero { margin-top: calc(-20px - var(--sat)); height: calc(222px + var(--sat)); }
  .hp-hud { top: calc(12px + var(--sat)); }
  .onglets-flottants, .rv-tete { margin-top: calc(-18px - var(--sat)); }
}

/* ───── Coup de filet ───── */
main.screen.fi { max-width: 640px; margin: 0 auto; }
.fi-tete { display: flex; gap: 12px; align-items: flex-start; }
.fi-t-ico { flex: none; width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; font-size: 30px; background: var(--amber-bg); border: 1px solid var(--amber-line); }
.fi-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.fi-tags > span { font-size: 12px; padding: 3px 8px; border-radius: 999px; background: var(--surface2); border: 1px solid var(--hair); color: var(--text2); }
.fi-tags > span.ok { color: var(--green-soft); } .fi-tags > span.warn { color: var(--amber); } .fi-tags > span.bad { color: var(--red-soft); }
.fi-chaine { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; counter-reset: fi; }
.fi-chaine li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11.5px; color: var(--faint); text-align: center; }
.fi-chaine li span { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; background: var(--surface2); border: 1px solid var(--line); filter: grayscale(.8); opacity: .6; }
.fi-chaine li:not(:last-child)::after { content: ''; position: absolute; top: 18px; left: calc(50% + 22px); right: calc(-50% + 22px); height: 2px; background: var(--line); }
.fi-chaine li.fait { color: var(--green-soft); } .fi-chaine li.fait span { filter: none; opacity: 1; border-color: rgba(61, 211, 154, .5); background: rgba(61, 211, 154, .12); }
.fi-chaine li.cour { color: var(--amber); font-weight: 700; } .fi-chaine li.cour span { filter: none; opacity: 1; border-color: var(--amber); background: var(--amber-bg); animation: fiPouls 1.6s ease-in-out infinite; }
@keyframes fiPouls { 50% { box-shadow: 0 0 0 6px rgba(255, 178, 63, .15); } }
.fi-jauges { display: grid; gap: 10px; }
.fi-j { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; }
.fi-jl { font-size: 13px; font-weight: 600; }
.fi-js { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
.fi-pips { display: flex; gap: 4px; }
.fi-pips i { width: 14px; height: 14px; border-radius: 50%; background: var(--surface3); border: 1px solid var(--line); }
.fi-pips.rens i.on { background: var(--blue); border-color: var(--blue); box-shadow: 0 0 8px rgba(99, 176, 255, .5); }
.fi-pips.alerte i { border-radius: 4px; } .fi-pips.alerte i.on { background: var(--red); border-color: var(--red); }
.fi-pips.gav i { border-radius: 3px; width: 12px; height: 16px; } .fi-pips.gav i.on { background: var(--amber); border-color: var(--amber); }
.fi-barre { position: relative; width: 132px; height: 10px; border-radius: 5px; background: var(--surface3); overflow: hidden; }
.fi-barre b { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--amber), var(--green)); border-radius: 5px; transition: width .5s; }
.fi-barre s { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(45deg, transparent 0 3px, rgba(0, 0, 0, .35) 3px 6px); }
.fi-barre .fi-seuil { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--text2); opacity: .5; }
.fi-cours { border-color: var(--amber-line); }
.fi-cd { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.fi-cd b { font: 800 34px var(--display); letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.fi-cd span { color: var(--muted); font-size: 13px; }
.fi-prog { height: 8px; border-radius: 4px; background: var(--surface3); overflow: hidden; }
.fi-prog b { display: block; height: 100%; background: var(--amber); border-radius: 4px; }
.fi-choix { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 16px; background: var(--surface2); border: 1px solid var(--hair); }
.fi-choix.off { opacity: .55; }
.fi-ch-h { display: flex; gap: 10px; align-items: flex-start; }
.fi-ch-ico { font-size: 22px; line-height: 1; }
.fi-ch-t { display: flex; flex-direction: column; gap: 2px; } .fi-ch-t span { font-size: 12.5px; color: var(--muted); }
.fi-durees { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.fi-duree { font: 700 14px var(--body, inherit); padding: 8px 0; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text2); cursor: pointer; }
.fi-duree[aria-checked="true"] { border-color: var(--amber); background: var(--amber-bg); color: var(--amber); }
.fi-cible { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 18px; background: var(--surface); border: 1px solid var(--hair); }
.fi-c-ico { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 26px; background: var(--surface2); }
.fi-c-t { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.fi-journal ul { margin: 0 0 10px; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 13px; }

/* Onglet Brigade : figures et galons (oct. 2026) */
.fig-brigade .fig-h { display: flex; gap: 10px; align-items: center; background: none; border: 0; padding: 0; width: 100%; cursor: pointer; color: inherit; font: inherit; }
.fig-brigade .avatar { flex: none; }
.pastille-galon { flex: none; background: var(--amber); color: var(--amber-ink); border-radius: 999px; padding: 2px 9px; font-size: 12px; font-weight: 800; }
.galons-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.galon { text-align: left; border: 1px solid var(--hair); border-top: 3px solid var(--k); background: var(--surface); border-radius: var(--r-md); padding: 8px; display: flex; flex-direction: column; gap: 3px; color: inherit; font: inherit; cursor: pointer; min-height: 96px; }
.galon .galon-k { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--k); }
.galon b { font-size: 13.5px; line-height: 1.2; }
.galon span:last-child { font-size: 12px; color: var(--muted); line-height: 1.3; }
.galon.pris { border-color: var(--k); background: color-mix(in srgb, var(--k) 14%, var(--surface)); }
.galon.ecarte { opacity: .38; }
.galon[disabled]:not(.pris):not(.ecarte) { opacity: .5; cursor: default; }

/* Brigade › Matériel (magasin et armurerie) */
.mat-banner { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--line, rgba(255,255,255,.1)); }
.mat-banner > img { display: block; width: 100%; aspect-ratio: 1024 / 572; object-fit: cover; }
.mat-etat { position: absolute; left: 6px; right: 6px; bottom: 6px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.mat-etat div { background: rgba(10, 15, 32, .82); backdrop-filter: blur(4px); border-radius: 9px; padding: 4px 3px; text-align: center; font-size: .66rem; color: var(--text2, #96A0BF); line-height: 1.15; }
.mat-etat b { display: block; font-size: .98rem; color: var(--text, #fff); font-variant-numeric: tabular-nums; }
.mat-bloc { gap: 8px; }
.mat-bloc.alerte { border-color: rgba(255, 107, 107, .55); }
.mat-tete { display: flex; gap: 10px; align-items: center; }
.mat-ico { width: 52px; height: 52px; border-radius: 12px; background: #1A243F; flex: none; display: block; object-fit: cover; }
.mat-ico.s { width: 40px; height: 40px; border-radius: 10px; }
.mat-item { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: start; padding-top: 8px; border-top: 1px solid var(--line, rgba(255,255,255,.08)); }
.mat-item > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mat-gilets { display: grid; grid-template-columns: repeat(auto-fill, minmax(30px, 1fr)); gap: 4px; }
.mg { position: relative; aspect-ratio: 1; border-radius: 8px; background: #1A243F; border: 2px solid transparent; overflow: hidden; }
.mg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mg.ok { border-color: rgba(61, 211, 154, .7); }
.mg.aj { border-color: #9C8CFF; }
.mg.per { border-color: var(--amber, #FFB23F); }
.mg.per::after { content: ""; position: absolute; right: 2px; top: 2px; width: 7px; height: 7px; border-radius: 50%; background: var(--amber, #FFB23F); box-shadow: 0 0 0 2px #1A243F; }
.mg.sans { border: 2px dashed rgba(255, 107, 107, .75); background: transparent; }
.mg.sans img { filter: grayscale(1) brightness(.5); opacity: .45; }
.mat-leg { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .72rem; color: var(--text2, #96A0BF); }
.mat-leg span::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; border: 2px solid; }
.mat-leg .ok::before { border-color: rgba(61, 211, 154, .8); }
.mat-leg .per::before { border-color: var(--amber, #FFB23F); }
.mat-leg .sans::before { border: 2px dashed rgba(255, 107, 107, .8); }
.mat-leg .aj::before { border-color: #9C8CFF; }
.mat-jauge { display: grid; grid-template-columns: 96px minmax(0, 1fr) 30px; gap: 8px; align-items: center; font-size: .8rem; }
.mat-jauge .barre { height: 8px; border-radius: 5px; background: rgba(255,255,255,.08); overflow: hidden; }
.mat-jauge .barre i { display: block; height: 100%; border-radius: 5px; }
.mat-jauge b { text-align: right; font-variant-numeric: tabular-nums; }
.mat-step { display: flex; align-items: center; gap: 8px; font-size: .82rem; }
.mat-marche { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; background: rgba(255,255,255,.04); border-radius: 10px; padding: 7px 8px; }
.btn.on { border-color: var(--amber, #FFB23F); color: var(--amber, #FFB23F); }
.mat-gamme { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.mat-gamme button { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 9px; padding: 5px 6px; text-align: left; color: inherit; font: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 1px; }
.mat-gamme button b { font-size: .76rem; }
.mat-gamme button span { font-size: .66rem; color: var(--text2, #96A0BF); line-height: 1.25; }
.mat-gamme button.on { border-color: var(--amber, #FFB23F); background: rgba(255, 178, 63, .1); }
.mat-fonction { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.08); }
.mat-fig { width: 32px; height: 32px; border-radius: 50%; border: 2px solid transparent; background: var(--c); color: #0C1124; font-weight: 800; font-size: .72rem; cursor: pointer; opacity: .45; }
.mat-fig.on { opacity: 1; border-color: #fff; }
/* Pions des Ordres : équipement visible */
.case.sg { outline: 2px dashed rgba(255, 107, 107, .9); outline-offset: 1px; }
.case.sa { filter: grayscale(1); opacity: .6; }
.case { position: relative; }
.case.tz::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 7px; height: 7px; border-radius: 2px; background: #FFD23F; box-shadow: 0 0 0 1.5px #0C1124; }
.case.mini { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c, #FF6E6A); vertical-align: -1px; margin: 0 2px; }
.mat-legende { display: block; grid-column: 1 / -1; margin-top: 2px; }
/* Ordres : un petit agent par personne au service (images Gemini, img/agents), avec son équipement */
.svc2-esp { flex: 1; }
.ag-cases { display: flex; flex-direction: column; gap: 4px; margin: 2px 0 4px; }
.ag-l { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.ag-bande { display: flex; flex-wrap: wrap; gap: 5px; align-items: flex-end; }
.ag-p { position: relative; width: 30px; height: 42px; border-radius: 8px; background: #1A243F; border: 2px solid var(--c); flex: none; box-sizing: border-box; }
.ag-p img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; display: block; }
.ag-p.m img { transform: scaleX(-1); }
.ag-p.plus { opacity: .55; }
.ag-p.sg { border-color: var(--red, #FF6B6B); }
.ag-p.sa img { filter: grayscale(1) brightness(.75); }
.ag-p.mission { opacity: .45; border-style: dashed; }
.ag-p.vide { background: transparent; border: 2px dashed var(--faint, #4A5580); }
.ag-sep { width: 1px; align-self: stretch; background: var(--line); margin: 0 3px; }
.ag-b { position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; font-size: 10px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--bg, #0C1124); line-height: 1; }
.ag-b.r { background: var(--red, #FF6B6B); color: #fff; }
.ag-b.g { background: #8A93B5; color: #0C1124; font-size: 8px; }
.ag-b.y { background: #FFD23F; color: #0C1124; }
.ag-b.v { background: #7BD88F; color: #0C1124; }
.ag-resume { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-top: 2px; }
.ag-chip { font-size: 11.5px; border-radius: 7px; padding: 1px 7px; background: rgba(255,255,255,.06); color: var(--text2); }
.ag-chip b { color: var(--text); }
.ag-chip.mal { color: var(--red, #FF6B6B); }
.ag-lien { font-size: 11.5px; color: var(--amber, #FFB23F); text-decoration: none; margin-left: auto; }
.svc2-cases.ag-cases { flex: none; width: 100%; margin-left: 0; padding-left: 0; justify-content: flex-start; align-items: flex-start; }
.ag-cases .ag-bande { justify-content: flex-start; }

/* Brigade › Matériel, version compacte (oct. 2026) : état en tuiles d'images, détail dans un tiroir. */
.mt-banniere { position: relative; height: 112px; border-radius: 16px; overflow: hidden; background: var(--surface) center 42% / cover no-repeat; border: 1px solid var(--line); display: flex; align-items: flex-end; }
.mt-banniere::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 17, 36, .05), rgba(12, 17, 36, .88)); }
.mt-alertes { position: relative; display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; }
.mt-chip { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 999px; font: 600 12.5px var(--body); border: 1px solid; background: rgba(10, 13, 28, .78); cursor: pointer; }
.mt-chip.r { color: var(--red); border-color: rgba(255, 110, 106, .55); }
.mt-chip.a { color: var(--amber); border-color: var(--amber-line); }
.mt-chip.ok { color: var(--green); border-color: rgba(61, 211, 154, .45); cursor: default; }
.mt-panier { display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 14px; border-radius: 14px; background: var(--amber-bg); border: 1px solid var(--amber-line); }
.mt-panier > .col { flex: 1; }
.mt-ellipse { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-h { margin: 2px 2px -4px; font: 600 12px var(--display); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.mt-etat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mt-arm { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.mt-tuile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); color: var(--text); font: inherit; text-align: center; cursor: pointer; min-width: 0; }
.mt-tuile:hover, .mt-tuile:focus-visible { border-color: var(--amber-line); outline: none; }
.mt-tuile img { width: 64px; height: 64px; object-fit: contain; border-radius: 10px; }
.mt-arm .mt-tuile img { width: 50px; height: 50px; }
.mt-tuile > b { font: 800 20px/1 var(--display); font-variant-numeric: tabular-nums; }
.mt-arm .mt-tuile > b { font-size: 17px; }
.mt-tuile.mal { border-color: rgba(255, 110, 106, .55); }
.mt-tuile.mal > b { color: var(--red); }
.mt-tuile.moyen > b { color: var(--amber); }
.mt-tuile.petit { padding: 6px 4px 8px; }
.mt-tuile.petit img { width: 40px; height: 40px; }
.mt-tuile.choisi { border-color: var(--amber); background: var(--amber-bg); }
.mt-tuile:disabled { opacity: .45; cursor: default; }
.mt-l { font-size: 11.5px; color: var(--muted); line-height: 1.2; }
.mt-jauge { display: block; width: 100%; height: 5px; border-radius: 3px; background: var(--surface3); overflow: hidden; }
.mt-jauge i { display: block; height: 100%; border-radius: 3px; }
.mt-duo { display: grid; grid-template-columns: auto 1fr; gap: 3px 5px; align-items: center; width: 100%; font-size: 10px; color: var(--muted); text-align: left; }
.mt-pts { display: flex; gap: 3px; justify-content: center; }
.mt-pts i { width: 6px; height: 6px; border-radius: 50%; background: var(--surface3); }
.mt-pts i.on { background: var(--amber); }
.mt-past { position: absolute; top: 5px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; font: 700 11.5px/20px var(--body); box-sizing: border-box; }
.mt-past.r { right: 5px; background: var(--red); color: #2A0606; }
.mt-past.c { left: 5px; background: var(--amber); color: var(--amber-ink); }
.mt-lignes { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.mt-ligne { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 12px; gap: 10px; align-items: center; padding: 9px 12px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--text); font: 600 14px var(--body); text-align: left; cursor: pointer; }
.mt-ligne:first-child { border-top: 0; }
.mt-ligne:hover { background: var(--surface2); }
.mt-ligne img, .mt-ic { width: 40px; height: 40px; border-radius: 10px; object-fit: contain; }
.mt-ic { display: grid; place-items: center; background: var(--surface2); color: var(--blue); font-size: 18px; }
.mt-ligne .tiny { font-weight: 400; }
.mt-badge { font-size: 12px; font-weight: 600; color: var(--amber); }
.mt-chev { color: var(--faint); font-size: 18px; }
.mt-bs { max-height: 86vh; overflow-y: auto; }
.mt-fixe { animation: none !important; }
.mt-tete { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.mt-tete img { width: 64px; height: 64px; object-fit: contain; border-radius: 14px; background: var(--surface2); }
.mt-fermer { background: none; border: 0; color: var(--muted); font-size: 26px; line-height: 1; padding: 4px 6px; cursor: pointer; }
.mt-info { margin: 0; display: flex; gap: 8px; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.mt-info::before { content: "i"; flex: none; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; border: 1px solid var(--faint); display: grid; place-items: center; font: italic 700 10px/1 var(--body); }
.mt-choix { display: flex; flex-direction: column; gap: 6px; }
.mt-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; border-radius: 12px; background: var(--bg); }
.mt-seg button { border: 1px solid transparent; background: none; color: var(--text2); border-radius: 9px; padding: 7px 4px; font: 600 13px/1.15 var(--body); cursor: pointer; }
.mt-seg button small { display: block; font-weight: 400; font-size: 11px; color: var(--muted); }
.mt-seg button.on { background: var(--amber-bg); border-color: var(--amber-line); color: var(--amber); }
.mt-pas { display: flex; align-items: center; gap: 12px; }
.mt-pas > button { width: 40px; height: 40px; flex: none; border-radius: 12px; border: 1px solid var(--line); background: var(--surface2); color: var(--text); font-size: 20px; cursor: pointer; }
.mt-pas > button:disabled { opacity: .35; cursor: default; }
.mt-pas > b { font: 800 22px var(--display); min-width: 26px; text-align: center; }
.mt-action { display: flex; align-items: center; gap: 10px; }
.mt-prix { flex: 1; font: 800 20px var(--display); }
.mt-prix small { display: block; font: 400 11.5px var(--body); color: var(--muted); }
.mt-rang { display: flex; align-items: center; gap: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.mt-rang > img { width: 44px; height: 44px; flex: none; object-fit: contain; border-radius: 10px; }
.mt-seg button:focus-visible, .mt-pas > button:focus-visible, .mt-ligne:focus-visible, .mt-chip:focus-visible, .mt-fermer:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* Brigade › Équipe illustrée (oct. 2026) : appel du jour en scène, approches en tuiles, figures en rangée + tiroir. */
.ap { border-radius: 18px; overflow: hidden; background: var(--surface); border: 1px solid var(--amber-line); }
.ap-scene { position: relative; aspect-ratio: 16 / 8; background: var(--surface2) center / cover no-repeat; display: flex; align-items: flex-end; }
.ap-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 17, 36, 0) 30%, rgba(12, 17, 36, .95)); }
.ap-scene > div { position: relative; z-index: 1; padding: 12px 14px; display: grid; gap: 5px; }
.ap-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.ap-tag { font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: rgba(10, 13, 28, .78); border: 1px solid var(--line); color: var(--text2); }
.ap-tag.a { color: var(--amber); border-color: var(--amber-line); }
.ap-titre { margin: 0; font: 800 19px/1.15 var(--display); text-wrap: balance; }
.ap-corps { padding: 12px; display: grid; gap: 10px; }
.ap-choix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ap-op { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; align-items: center; text-align: left; padding: 9px 8px 8px; border-radius: 14px; background: var(--surface2); border: 1px solid var(--line); color: var(--text); font: inherit; cursor: pointer; }
.ap-op > img { width: 44px; height: 44px; object-fit: contain; border-radius: 8px; }
.ap-op-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ap-k { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--blue); }
.ap-op.plus .ap-k { color: var(--amber); }
.ap-op b { font-size: 13px; line-height: 1.2; }
.ap-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 2px; }
.ap-risque { display: inline-flex; gap: 2px; }
.ap-risque i { width: 7px; height: 7px; border-radius: 2px; background: var(--surface3); }
.ap-gain { font-size: 11px; font-weight: 600; color: var(--green); }
.ap-op.on { border-color: var(--amber); background: var(--amber-bg); }
.ap-op:focus-visible, .ap-lien:focus-visible, .fg:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.ap-badge { position: absolute; top: -8px; right: 8px; display: inline-flex; gap: 4px; align-items: center; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--amber); color: var(--amber-ink); }
.ap-badge img { width: 14px; height: 14px; }
.ap-consigne { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--text2); }
.ap-consigne > img { width: 28px; height: 28px; flex: none; }
.ap-lien { background: none; border: 0; padding: 0; color: var(--blue); font: inherit; font-size: 12.5px; cursor: pointer; text-align: left; }
.ap-hier { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.ap-hier-t { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--muted); }
.ap-barre { display: flex; height: 26px; gap: 2px; border-radius: 8px; overflow: hidden; }
.ap-barre div { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 12px; font-weight: 700; min-width: 34px; }
.ap-barre img { width: 18px; height: 18px; }
.ap-liste { display: grid; gap: 2px; font-size: 12.5px; color: var(--text2); }
.fg-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.fg { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 2px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); color: var(--text); font: inherit; cursor: pointer; min-width: 0; }
.fg.on { border-color: var(--c); }
.fg-av { width: 52px; height: 52px; border-radius: 50%; border: 3px solid var(--c); background: var(--surface2); overflow: hidden; display: grid; place-items: end center; flex: none; }
.fg-av img { width: 58px; height: 58px; object-fit: cover; object-position: top; margin-bottom: -6px; }
.fg-av.grand { width: 64px; height: 64px; }
.fg-av.grand img { width: 70px; height: 70px; }
.fg > b { font-size: 11.5px; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fg > small { font-size: 10px; color: var(--muted); }
.fg-pts { display: flex; gap: 2px; }
.fg-pts i { width: 6px; height: 6px; border-radius: 50%; background: var(--c); opacity: .85; }
.fg-et { font-size: 10px; color: var(--amber); letter-spacing: 1px; }
.fg-gal { position: absolute; top: -6px; right: -2px; font-size: 10.5px; font-weight: 800; padding: 1px 6px; border-radius: 999px; background: var(--amber); color: var(--amber-ink); }
.fg-bs { max-height: 86vh; overflow-y: auto; }
.fg-bs.fixe, .bs.fixe { animation: none; }
.fg-tete { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.fg-nom { font: 800 18px/1.15 var(--display); }
.fg-fermer { background: none; border: 0; color: var(--muted); font-size: 26px; line-height: 1; padding: 4px 6px; cursor: pointer; }

/* Onglet Chef illustré (oct. 2026) : bureau en bandeau, étapes du soir, tuiles en images, fiche en grille. */
.co-hero { background: linear-gradient(90deg, rgba(12, 17, 36, .93) 35%, rgba(12, 17, 36, .45)), var(--surface) url(../img/chef/bureau.webp) center 30% / cover no-repeat; }
.co-lieu .ico img { width: 52px; height: 52px; object-fit: contain; border-radius: 10px; display: block; }
.co-lieu { min-height: 0; }
.co-effet .co-effet-img { width: 28px; height: 28px; border-radius: 6px; flex: none; }
.co-front { align-items: center; text-align: center; }
.co-front > img { width: 48px; height: 48px; object-fit: contain; border-radius: 10px; }
.co-front[aria-pressed="true"] { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 13%, var(--surface2)); }
.co-front[data-v=""][aria-pressed="true"] { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 13%, var(--surface2)); }
.co-soir { display: grid; gap: 6px; }
.co-etape { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); color: var(--text); font: 600 11.5px var(--body); cursor: pointer; text-align: center; min-width: 0; }
.co-etape > img { width: 34px; height: 34px; object-fit: cover; border-radius: 8px; }
.co-etape small { font-size: 10.5px; color: var(--amber); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-etape.ok { border-color: rgba(61, 211, 154, .4); }
.co-etape.ok small { color: var(--green); }
.co-etape:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.chef-onglet .hp-ajd { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.chef-onglet .hp-ajd > h2 { grid-column: 1 / -1; }
.chef-onglet .hp-ajd > details { margin: 0; }
.chef-onglet .hp-ajd > details[open] { grid-column: 1 / -1; }
.obj-anneaux { display: flex; gap: 4px; margin-left: auto; margin-right: 6px; flex: none; }
.obj-anneau { width: 34px; height: 34px; border-radius: 50%; background: conic-gradient(var(--c) var(--p), var(--surface3) 0); display: grid; place-items: center; }
.obj-anneau span { width: 26px; height: 26px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font: 800 9.5px var(--body); }