/* ═══════════════════════════════════════════════════════════════════════════
   soma-briques.css — LES SIX BRIQUES DU RESPONSIVE (09/10/2026, HANDOFF (360) partie 2).
   Maquette-loi : mockups/responsive-V2.html (direction A « Le fil » + le panneau du haut de B, décidé par Cowork
   sous délégation de Maxime — cerveau/GRAMMAIRE-MOBILE.md § Direction).
   Les six briques : EN-TÊTE (.bq-hd) · CHIFFRES (.bq-kp) · ONGLETS (.bq-chips) · LIGNE (.bq-ln) · GESTE (.bq-now)
   · VOIX (.bq-now.bq-voix) ; et leurs outils : le conteneur (.bq-scr), le bandeau (.bq-bs), le lien vers ce qui est
   « à un toucher » (.bq-lien), le grand livre (.bq-gl).
   Elles ne vivent que dans les écrans que js/mobile-shell.js compose sous 1024 px : le bureau ne les porte jamais.
   Elles s'élargissent seules : @container scr (2 → 3 → 6 chiffres, la ligne en colonnes dès 700 px de conteneur).
   Règles : var(--) seulement, aucun @media, zéro emoji, cibles de 44 px, textes de 12 px au moins.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── le conteneur : c'est sa largeur, pas celle de l'écran, qui décide ── */
.bq-scr { container: scr / inline-size; padding: 14px 0 28px; color: var(--text); font: 400 15px/1.5 var(--font); }
.bq-scr * { box-sizing: border-box; }
.bq-eb { display: block; font: 600 12px/1.25 var(--font-eb); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

/* ── 1 · EN-TÊTE ── */
.bq-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.bq-hd h1 { font: 900 26px/1.08 var(--font); letter-spacing: -.025em; margin: 4px 0 2px; color: var(--text); }
.bq-hd h1::before { content: ""; display: block; width: 26px; height: 3px; background: var(--green); margin-bottom: 10px; border-radius: 2px; }
.bq-hd .bq-sub { font-size: 13.5px; color: var(--muted); margin: 0; }

/* ── les boutons des briques ── */
.bq-btn { min-height: 44px; min-width: 44px; padding: 0 16px; border-radius: var(--soma-r-md); font: 700 14px var(--font); border: 1px solid var(--line2); background: var(--white); color: var(--text); display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; cursor: pointer; }
.bq-btn.bq-pri { background: var(--green); border-color: var(--green); color: var(--white); }
.bq-btn:disabled { color: var(--muted2); cursor: default; }
.bq-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* ── 5 · GESTE — le seul panneau sombre de l'écran : le geste en tête ── */
.bq-now { background: var(--ink); color: var(--white); border-radius: var(--soma-r-input); padding: 15px 16px; border-left: 3px solid var(--green); margin-top: 14px; }
.bq-now .bq-eb { color: var(--green); }
.bq-now h4 { font: 900 19px/1.2 var(--font); margin: 7px 0 2px; letter-spacing: -.01em; color: var(--white); }
.bq-now p { margin: 0; font-size: 13.5px; color: var(--muted2); line-height: 1.4; }
.bq-now .bq-qui { font-size: 12px; color: var(--muted2); margin-top: 6px; }
.bq-now .bq-acts { display: flex; gap: 8px; margin-top: 12px; }
.bq-now .bq-acts .bq-pri { flex: 1; }
.bq-now .bq-acts .bq-gh { background: transparent; border-color: var(--muted); color: var(--white); min-width: 44px; padding: 0 12px; }
.bq-now .bq-more { display: flex; justify-content: space-between; align-items: center; width: 100%; border: none; border-top: 1px solid var(--text2); background: none; margin-top: 12px; min-height: 44px; padding: 0; font: 700 13px var(--font); color: var(--muted2); cursor: pointer; text-align: left; }

/* ── 6 · VOIX — quand il n'y a pas de geste : la phrase de SOMA ── */
.bq-now.bq-voix .bq-v { font: italic 400 16.5px/1.38 var(--font-serif); color: var(--white); margin-top: 6px; }
.bq-now.bq-voix .bq-v em { font-style: italic; color: var(--muted2); }

/* ── le bandeau de section ── */
.bq-bs { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; border-bottom: 1px solid var(--line2); padding: 22px 0 8px; }
.bq-bs .bq-r { font: 700 13px var(--font); color: var(--muted); white-space: nowrap; }

/* ── 2 · CHIFFRES — deux par deux, trois dès 560 px, six dès 980 px ── */
.bq-kp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
.bq-kp .bq-k { padding: 11px 0 10px; border-bottom: 1px solid var(--line); min-width: 0; }
.bq-kp button.bq-k { display: flex; flex-direction: column; justify-content: flex-start; width: 100%; background: none; border-top: none; border-left: none; border-right: none; text-align: left; font: inherit; color: inherit; cursor: pointer; min-height: 44px; }
.bq-kp .bq-k .bq-eb { min-height: 2.5em; }
.bq-kp .bq-n { font: 900 24px/1.1 var(--font); font-variant-numeric: tabular-nums; margin-top: 3px; letter-spacing: -.01em; color: var(--text); }
.bq-kp .bq-n.bq-o { color: var(--ocre); }
.bq-kp .bq-n.bq-z { color: var(--muted2); }
.bq-kp .bq-s { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
@container scr (min-width: 560px) { .bq-kp { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container scr (min-width: 980px) { .bq-kp { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* ── 3 · ONGLETS — ils glissent, ils ne se coupent jamais, ils ne passent jamais sur deux lignes ── */
.bq-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 14px 0 0; padding: 0 0 2px; }
.bq-chips::-webkit-scrollbar { display: none; }
.bq-chip { flex: 0 0 auto; min-height: 44px; padding: 0 14px; border-radius: var(--radius-pill); background: var(--grey); border: none; display: inline-flex; align-items: center; gap: 7px; font: 700 13.5px var(--font); color: var(--text2); white-space: nowrap; cursor: pointer; }
.bq-chip.bq-on { background: var(--ink); color: var(--white); }
.bq-chip .bq-c { font: 900 12px var(--font); background: var(--line); color: var(--text2); border-radius: var(--radius-pill); padding: 2px 8px; }
.bq-chip.bq-on .bq-c { background: var(--text2); color: var(--white); }

/* ── 4 · LIGNE — deux étages au téléphone, des colonnes dès 700 px de conteneur ── */
.bq-ln { display: grid; grid-template-columns: 4px minmax(0, 1fr) auto; grid-template-areas: "bar t v" "bar m m" "bar x x"; column-gap: 12px; row-gap: 3px; padding: 13px 0; border-bottom: 1px solid var(--line); width: 100%; background: none; border-top: none; border-left: none; border-right: none; text-align: left; font: inherit; color: inherit; }
button.bq-ln, a.bq-ln { cursor: pointer; min-height: 44px; }
.bq-ln .bq-bar { grid-area: bar; border-radius: 2px; background: var(--line); align-self: stretch; }
.bq-ln .bq-bar.bq-r { background: var(--red); }
.bq-ln .bq-bar.bq-o { background: var(--ocre); }
.bq-ln .bq-bar.bq-g { background: var(--green); }
.bq-ln .bq-t { grid-area: t; font: 700 15px/1.28 var(--font); color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.bq-ln .bq-m { grid-area: m; font-size: 12.5px; line-height: 1.42; color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
.bq-ln .bq-m b { color: var(--text2); }
.bq-ln .bq-v { grid-area: v; text-align: right; font: 900 17px/1.1 var(--font); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text); }
.bq-ln .bq-v small { display: block; font: 400 12px/1.3 var(--font); color: var(--muted); margin-top: 2px; white-space: normal; }
.bq-ln .bq-v.bq-z { color: var(--muted2); }
.bq-ln .bq-x { grid-area: x; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.bq-st-r { color: var(--red); font-weight: 700; }
.bq-st-o { color: var(--ocre); font-weight: 700; }
.bq-tag { font: 700 12px var(--font); padding: 3px 9px; border-radius: var(--radius-pill); background: var(--grey); color: var(--muted); }
.bq-tag.bq-up { background: var(--green-soft); color: var(--green-dark); }
@container scr (min-width: 700px) {
  .bq-ln { grid-template-columns: 4px minmax(0, 2.1fr) minmax(0, 2fr) 140px; grid-template-areas: "bar t m v" "bar x x x"; align-items: center; padding: 11px 0; }
  .bq-ln .bq-x { margin-top: 2px; }
}

/* ── la fiche : son titre, la flèche du juge, le contact à un pouce ── */
.bq-fi-h { font: 900 22px/1.15 var(--font); letter-spacing: -.02em; margin: 8px 0 4px; color: var(--text); }
.bq-sub { font-size: 13.5px; color: var(--muted); margin: 0; }
.bq-fl { font-size: 13px; }
.bq-fl.bq-dn { color: var(--red); }
.bq-ct { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.bq-pp { width: 40px; height: 40px; border-radius: 50%; background: var(--ocre); color: var(--white); font: 900 13px/40px var(--font); text-align: center; flex: 0 0 40px; }
.bq-qui-ct { flex: 1; min-width: 0; font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.bq-nom { display: block; min-height: 44px; padding: 0; border: none; background: none; font: 900 14.5px var(--font); color: var(--text); text-align: left; cursor: pointer; }
.bq-btn.bq-rond { padding: 0 12px; border-radius: var(--radius-pill); background: var(--green-soft); border-color: var(--green-soft); color: var(--green-dark); }

/* ── le grand livre : un chiffre, sa base, sa jauge ── */
.bq-gl { padding: 12px 0; border-bottom: 1px solid var(--line); }
.bq-gl .bq-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.bq-gl .bq-n { font: 900 26px var(--font); font-variant-numeric: tabular-nums; color: var(--text); }
.bq-gl .bq-s { font-size: 12.5px; color: var(--muted); }

/* ── le lien vers ce qui est « à un toucher » (data-ouvre) ── */
.bq-lien { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px; padding: 0; border: none; border-bottom: 1px solid var(--line); background: none; font: 700 13.5px var(--font); color: var(--green-dark); text-align: left; cursor: pointer; }
.bq-lien:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.bq-lgd { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); padding-top: 12px; }
.bq-lgd i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; background: var(--ocre); }
.bq-lgd i.bq-r { background: var(--red); }
.bq-lgd i.bq-z { background: var(--muted2); }
div.bq-ln[role="button"] { cursor: pointer; }
.bq-ln .bq-x .bq-btn { min-height: 44px; padding: 0 14px; }
.bq-acts { display: flex; gap: 8px; margin-top: 12px; }
.bq-pied { font-size: 12.5px; color: var(--muted); padding: 12px 0; }
.bq-vide { font: italic 400 14px/1.45 var(--font-serif); color: var(--muted); padding: 12px 0; border-bottom: 1px solid var(--line); }

/* ── deux volets au Duo ouvert (liste | détail) : la coquille large les pose, la brique les remplit ── */
.bq-volets { display: flex; min-height: 0; gap: 0; }
.bq-volets > .bq-scr { min-width: 0; }
.bq-volets > .bq-scr:first-child { flex: 0 0 370px; max-width: 46%; padding-right: 16px; border-right: 1px solid var(--line); }
.bq-volets > .bq-scr:last-child { flex: 1 1 auto; padding-left: 16px; }

/* ── ce que la composition remplace : la source reste dans la page (lue par le gardien), invisible ── */
.bq-source { display: none !important; }