/* The index (graph/index.html) and its partials (templates/graph/facets/) — D0, 2026-09-23,
 * artifacts/site-structure.html §11.3, §11.8. Loaded by index.html.
 *
 * One block per partial (« Partial <nom> »), the same rule as site.css's components: a
 * partial's look changes in one block, a page never restyles it. Everything reads the tokens
 * of tokens.css; no literal colour, no radius, no shadow (spec-design §1, spec-experience
 * §6.1). tokens.css is loaded AFTER this file: its classes are composed, never redeclared. */

/* ── The index layout (§4.1) ────────────────────────────────────────────────────────────
   The critères column and the panel side by side from `large`; under it the column folds
   above the list (Partial criteres). « Points de départ » under the lead. */
/* E0 #15 (2026-09-30): an index is 86 rem wide, the atlas header's own row (tokens.css « Header
   atlas »), not the reading pages' 72 rem. With the 19 rem critères column beside it, 72 rem left
   the table 739 px: Secteurs' eight columns were 969 px, two of them past the edge at every
   desktop width, and the pivot of E0 #14 indents its first column further. At 86 rem the table
   box is about 960 px from 1376 px up.
   Since 2026-10-02 every atlas page has this row (`--max-width`, tokens.css « Densité », spec-
   design §8.1 decision 16): the rule below says the same thing twice. */
main.index > .mode-lecture > .section-inner {
  max-width: 86rem;
}

.index-corps {
  display: grid;
  grid-template-columns: 19rem minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}

/* The column and the panel are cards (tokens.css .planche-section, decision 8): the column
   is 19 rem so that its 16 rem of content keep their width inside the card's padding. */
.index-corps > .planche-section { margin: 0; }

/* E0 #16 (2026-09-30): one column below 1280, the atlas header's own fold (viewport.css
   `repli-atlas`, tailwind/viewport.json `seuils_atlas`), not below 1024. Between 1024 and 1279
   the 19 rem column left the list 611 to 767 px, and Secteurs' six columns (810 px) lost
   « Concentration » past the edge; folded, the list has the full row (≈ 984 px at 1024). */
@media (max-width: 1279.98px) {
  .index-corps { grid-template-columns: minmax(0, 1fr); }
}

.portes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  align-items: baseline;
  margin: 0 0 var(--sp-8);
  font-size: var(--fs-s);
}

.portes-titre {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ca-gris-fort);
}

/* ── Partial departs (facets/departs.html ; §4.1 revised 2026-10-07) ───────────────────────
   The line of métiers de départ above the critères: a mono title, then four counted links and
   « tous les métiers ▾ ». The one set shows in charcoal with a charcoal rule (colour carries no
   other meaning here, §6.7); the others read as links, in the grey of a secondary word. From
   `large` the line wraps; on compact it is ONE line that scrolls sideways (the chips of the
   list head do the same), each item a 44 px target. `min-width: 0` on the container: in a
   flex column a nowrap line is as wide as its content and would push the page past the edge. */
.departs {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-4);
  margin: 0 0 var(--sp-6);
  min-width: 0;
  font-size: var(--fs-s);
}
.departs-titre {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ca-gris-fort);
}
.departs-liste { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); min-width: 0; }
.depart {
  color: var(--ca-gris-fort);
  text-decoration: none;
  border-bottom: 1px solid var(--ca-filet);
  white-space: nowrap;
}
.depart:hover { color: var(--ca-charbon); }
.depart.est-actif { color: var(--ca-charbon); border-bottom: 2px solid var(--ca-charbon); }
.depart .discret { color: inherit; }

/* ── Partial criteres (facets/criteres.html ; §4.1 ; B10 non revu) ─────────────────────
   The compact fold: the same mechanism as base.html's own nav toggle (viewport.css §8's
   `data-repli`, tokens.css `.ca-nav-bascule`) — the button exists ONLY below 1280 (E0 #16);
   above it, it is never drawn and the panel (repli-atlas est-replie in the markup) is already
   visible without any script running. */
.criteres-bouton {
  display: none;
  width: 100%;
  font-family: var(--font-mono);
  font-size: var(--fs-s);
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--ca-filet);
  background: var(--ca-surface);
  color: var(--ca-charbon);
  cursor: pointer;
  margin: 0 0 var(--sp-3);
}

@media (max-width: 1279.98px) {
  .criteres-bouton { display: block; }
}

/* The group: a <details> fold (B10, spec-design §8.1 decision 10). Every group open made the
   Entreprises panel 3 490 px tall at 1440 (Analyse the same, Liquidations 2 310, Opérations
   2 020, Fonds 1 953): a quarter of it on a 900 px screen, « Réinitialiser » at the foot of the
   scroll. The title is the fold's <summary>, with a rule under it (a section title's rule, in
   the column's scale), the ▸ / ▾ of §6.13 and, when folded or open, the count of its active
   critères in mono (criteres.js keeps it in step). The marker is drawn here, not the browser's,
   so it sits at the same place in every engine. */
.criteres-groupe {
  border: 0;
  margin: 0 0 var(--sp-4);
  padding: 0;
  /* Zero here, and on the form that holds the column: a wide option label must not widen the
     column past its 16 rem and push the counts under the table's first column (measured
     2026-09-23 at 1 440, when the group was a <fieldset>, whose min-inline-size is min-content). */
  min-width: 0;
}

.criteres-groupe-titre {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: 0 0 var(--sp-1);
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-s);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--ca-filet);
  cursor: pointer;
  list-style: none;
}

.criteres-groupe-titre::-webkit-details-marker { display: none; }
.criteres-groupe-titre::before { content: "▸"; color: var(--ca-gris-fort); }
.criteres-groupe[open] > .criteres-groupe-titre::before { content: "▾"; }

.criteres-groupe-compte { color: var(--ca-gris-fort); letter-spacing: 0; }

.index-criteres { min-width: 0; }

.criteres-facette { margin: 0 0 var(--sp-3); min-width: 0; }
.criteres-facette > .ca-action { margin-top: var(--sp-2); }

/* A group's switch (facets/criteres.html, « Nomenclature NAF · Métiers »): the `.vues` pair of
   site.css, which is `display: flex` and so would beat the `hidden` the markup carries until
   criteres.js runs. One line each in the 16 rem column: at the pair's own padding « Nomenclature
   NAF » wrapped to two (measured 2026-10-12 at 1 440), so the pad narrows and each half takes
   the width of its label. */
.criteres-bascule { margin: 0 0 var(--sp-3); }
.criteres-bascule[hidden] { display: none; }
.criteres-bascule .vue { flex: 1 1 auto; padding-inline: var(--sp-2); white-space: nowrap; }

/* A facet in full screen (facets/facet.html `plein_ecran`, criteres.js `pleinEcran`): the NAF
   tree, whose sous-classes kept their first word in the column (user 2026-10-12). The frame of
   the graph's full screen (site.css `.graphe--plein-ecran .graphe-cadre`): fixed, a margin of
   the page around it, the field and the selection on top, the tree taking the rest and
   scrolling alone, the labels whole (they wrap rather than end in « … »). The page under it
   does not scroll. The read is kept to 72 rem, the reading width: a 120-character label on a
   1 920 px line puts its count a screen away. */
/* « Tout cocher » / « Tout décocher » under a Secteur tree's field (facets/facet.html): the two
   mono links of « Tout déplier » (`.arbre-tout`, below), on one line. */
.criteres-tout { display: flex; gap: var(--sp-3); margin: var(--sp-1) 0 var(--sp-2); }
.criteres-tout[hidden] { display: none; }
@media (max-width: 1023.98px) {
  .criteres-tout .arbre-tout { min-height: 44px; }   /* the touch floor (spec-design §2.4) */
}
.criteres-plein-tete { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
/* `hidden` on a facet's button (« Quitter le plein écran » out of full screen, « Toute la
   nomenclature ▾ » once the tree is in): the `display` of `.ca-action` (tokens.css) beats the
   attribute, and on compact the second stayed under a loaded tree. */
.criteres-facette .ca-action[hidden] { display: none; }
.criteres-facette--plein-ecran {
  position: fixed;
  inset: var(--sp-4);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: 0 auto;
  max-width: 72rem;
  background: var(--ca-surface);
  border: 1px solid var(--ca-filet);
  padding: var(--sp-4);
  /* The page dimmed around it: undimmed, its columns showed through the margin and the tree
     read as one more panel among them (screenshot 2026-10-12 at 1 440). A shadow, not a
     backdrop element: nothing to create, and no click to catch (Escape and the button close). */
  box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--ca-charbon) 45%, transparent);
}
.criteres-facette--plein-ecran > * { margin: 0; }
.criteres-facette .criteres-plein-tete .groupe-titre { margin-bottom: 0; }
.criteres-facette.criteres-facette--plein-ecran .ds-tree {
  display: block;            /* the compact type-ahead hides the tree until two letters */
  flex: 1 1 0;
  min-height: 0;
  max-height: none;
}
.criteres-facette--plein-ecran .ds-tree .nt { white-space: normal; overflow: visible; }
.criteres-plein-ecran-ouvert body { overflow: hidden; }
@media (max-width: 767.98px) {
  .criteres-facette--plein-ecran { inset: 0; border: 0; padding: var(--sp-3); }
}

/* ── Partial facet (facets/facet.html ; the eight types) ───────────────────────────────
   The option row of a checkbox / périmètre facet (the map frame is no facet row any more): label text left, count right. */
.criteres-option {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-size: var(--fs-s);
  padding: var(--sp-1) 0;
}

.criteres-option > span:first-of-type { min-width: 0; }
.criteres-option-compte { margin-left: auto; flex-shrink: 0; padding-left: var(--sp-2); }

/* A long list of options scrolls inside the column rather than pushing the list three
   screens down (97 métiers on the Fonds index). */
.criteres-liste {
  max-height: 16rem;
  overflow-y: auto;
}

/* The text facet: label above the field, a mono input, a rule for « Département » / « Code postal ». */
.criteres-texte label,
.criteres-lieu label {
  display: block;
  font-size: var(--fs-s);
  margin-bottom: var(--sp-1);
}

.criteres-texte input[type="text"],
.criteres-facette input[type="search"] {
  width: 100%;
  font-family: var(--font-mono);
  font-size: var(--fs-s);
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--ca-filet);
  margin-bottom: var(--sp-2);
}

/* The rayon facet: the fonds cell's slider (fonds.css « .fonds-rayon ») in a column — the
   label above, the slider and its value in mono on one line, the help under it in gris fort
   (§6.11). Charcoal thumb: yellow is for the one primary action (§6.3). Faded while disabled
   (no code postal yet), so the reader sees it waits on the field above. */
.criteres-rayon label {
  display: block;
  font-size: var(--fs-s);
  margin-bottom: var(--sp-1);
}
.criteres-rayon-champ {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.criteres-rayon input[type="range"] {
  flex: 1 1 auto;
  min-width: 0;
  accent-color: var(--ca-charbon);
}
.criteres-rayon input[type="range"]:disabled { opacity: .4; }
.criteres-rayon output {
  flex: 0 0 auto;
  min-width: 6ch;
  text-align: right;
  font-size: var(--fs-s);
}
.criteres-rayon-aide {
  font-size: var(--fs-xs);
  color: var(--ca-gris-fort);
  margin: var(--sp-1) 0 0;
}

/* The suggestions of a texte facet (« Comparables de … »): a list under the field, a rule,
   no shadow; the active row is the surface-2 band. */
.criteres-texte,
.criteres-lieu { position: relative; }
.criteres-suggestions {
  position: absolute;
  left: 0; right: 0;
  z-index: 20;
  margin-top: -1px;
  border: 1px solid var(--ca-filet);
  background: var(--ca-surface);
  font-size: var(--fs-xs);
}
.criteres-suggestion {
  display: block;
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: 0;
  background: none;
  text-align: left;
  color: var(--ca-charbon);
  cursor: pointer;
  font: inherit;
}
.criteres-suggestion:hover, .criteres-suggestion.est-active { background: var(--ca-surface-2); }
.criteres-suggestion .discret { display: block; }
/* The « Où » field's suggestion: the place left, its count right (the option row's own layout). */
.criteres-lieu .criteres-suggestion { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.criteres-lieu .criteres-suggestion .discret { display: inline; flex-shrink: 0; }
/* The chosen places under the field: the chip row of the métier list's own selection. */
.criteres-lieu .chips[hidden] { display: none; }
.criteres-lieu button.chip { cursor: pointer; }

/* The range facet's histogram. `--h` is the bar's value on a 0–40 scale, drawn as a share of
   the box. `--ca-gris` is reserved to « a fill on pure white »: this is that one case. The
   selected band is drawn as two rules, not a third colour — the dialect has no fill for
   « this is the chosen range », only lines (§6.1). */
.criteres-histogramme {
  position: relative;
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  gap: 1px;
  /* 56 px (decision 10, Q24): six of them at 150 px took about 900 px of the 3 490 of the
     Entreprises panel. Still readable at the column's 259 px (seven to twelve bars): it is the
     shape of the distribution that helps the reader before typing a threshold. */
  height: 3.5rem;
  margin: var(--sp-2) 0;
  border-bottom: 1px solid var(--ca-filet);
}

.criteres-histo-barre {
  flex: 1 1 0;
  min-width: 2px;
  /* `--h` tops out at 40 (the templates scale each series to it): 2.5 % of the box per unit
     puts the tallest bar at the full height, whatever that height is. */
  height: calc(var(--h) * 2.5%);
  background: var(--ca-gris);
}

.criteres-histo-bande {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--de);
  width: calc(var(--a) - var(--de));
  border-left: 1px solid var(--ca-charbon);
  border-right: 1px solid var(--ca-charbon);
}

.criteres-plage {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  font-size: var(--fs-s);
  margin: 0;
}

.criteres-plage label {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex: 1 1 0;
  min-width: 0;
}

.criteres-plage input {
  width: 100%;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  border: 1px solid var(--ca-filet);
  padding: var(--sp-1) var(--sp-2);
}

/* The selection under a tree's search field: the chips of facet.html; `hidden` must win over
   the flex display `.chips` carries. */
.criteres-facette .chips[hidden] { display: none; }

/* A removable line (« boulangerie × »): the chip is a button when criteres.js draws it. */
.criteres-facette button.chip { cursor: pointer; }

/* Type-ahead on compact (decision 10, Q25): the métier list is a 352 px box that scrolls inside
   a scrolling page, so a thumb that lands on it stops the page and eight 44 px rows show eight
   métiers of 119. Under 768 px the list stays hidden until the reader has typed two letters
   (criteres.js sets `.est-ouvert`): the reader who knows the trade types it. From 768 px the
   box stays, where a wheel or a pointer reads it. The data and the form field do not change. */
@media (max-width: 767.98px) {
  .criteres-facette--typeahead .ds-tree { display: none; }
  .criteres-facette--typeahead.est-ouvert .ds-tree { display: block; max-height: 16rem; }
}

/* ── Partial tree_metier (facets/tree_metier.html) ────────────────────────────────────────────
   The short node classes of the live tree (facets.css), copied so that the new pages never
   load that file: .nb branch, .ns its head, .nk the children, .nf a leaf, .nc the chevron,
   .nl the label row, .nt the text, .nn the count. min-width: 0 all along the flex chain:
   without it `min-width: auto` keeps the longest label from shrinking and it imposes its
   width on the whole grid (1 045 px on a 390 screen, measured before the fix). */
/* The tree scrolls inside the column (119 métiers, 13 régions with their départements): a
   list three screens long would push the rows off the page. */
.criteres-facette .ds-tree { max-height: 22rem; overflow-y: auto; }

.ds-tree summary::-webkit-details-marker { display: none; }
.ds-tree .ns { list-style: none; }
.ds-tree, .ds-tree .nk { min-width: 0; }

.ds-tree .ns, .ds-tree .nf {
  display: flex; align-items: center; gap: .25rem; min-width: 0;
  padding: .2rem .25rem;
}
.ds-tree .ns { cursor: pointer; }
.ds-tree .ns:hover, .ds-tree .nf:hover { background: var(--ca-surface-2); }

.ds-tree .nc {
  flex-shrink: 0; user-select: none; color: var(--ca-gris-fort);
  font-size: .75rem; transition: transform .12s ease;
}
.ds-tree .np { color: transparent; }        /* a leaf: the chevron keeps its place */
.ds-tree details[open] > .ns > .nc { transform: rotate(90deg); }
.ds-tree .nk {
  margin-left: .6rem; padding-left: .45rem;
  border-left: 1px solid var(--ca-filet);
}
.ds-tree .nl {
  display: flex; align-items: center; gap: .5rem; min-width: 0;
  flex: 1 1 auto; cursor: pointer;
}
.ds-tree .nl input { flex-shrink: 0; }
.ds-tree .nt {
  min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: var(--fs-s); color: var(--ca-gris-fort);
}
/* B17 Q48: a facet count is a number, so mono 11 (it was sans 11 px: 25 on compact, 325 at
   1 440). */
.ds-tree .nn {
  flex-shrink: 0; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ca-gris-fort);
  font-variant-numeric: tabular-nums;
}
.ds-tree .hidden { display: none; }

/* The tree is the most handled control of the site: its rows measured 20 to 26 px. The ROW
   grows, not the font (spec §2.4): the 44 px rules are in « The touch floor » at the foot. */

/* ── Partial liste_head (facets/liste_head.html; §4.1; decision 11 of 2026-09-29, B9 Q7) ──
   From `large`: one row for the count, the sort control, the active chips and the vue control
   (the two `.liste-tete-ligne` groups melt into it with `display: contents`). On compact it is
   THREE LINES: count + sort, the chips on one line that scrolls sideways, vue control +
   « Suivre cette recherche ». Measured before, at 390 px: 191 px with no chip and 308 px with
   two (each extra criterion added about 50 px), a third of the screen before any data; now
   about 150 px whatever the number of criteria. */
.liste-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-3);
}

.liste-tete-ligne { display: contents; }

.liste-tete-tri select {
  min-height: 1.5rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  border: 1px solid var(--ca-filet);
  background: var(--ca-surface);
  color: var(--ca-charbon);
  padding: var(--sp-1) var(--sp-2);
  margin-left: var(--sp-1);
}

.liste-tete-actifs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  min-width: 0;
}

/* Pushed to the row's end only once the row has the width to have an « end ». */
@media (min-width: 768px) {
  .liste-tete-suivre { margin-left: auto; }
}

/* An active critère as a chip with ×: the group's name in small before the value (« OÙ
   Gironde »), since two chips may carry the same word for two different grains. */
.critere-actif {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .15rem .3rem .15rem .5rem;
  border: 1px solid var(--ca-filet); background: var(--ca-surface-2);
  font-size: var(--fs-s); color: var(--ca-charbon); text-decoration: none;
}
.critere-actif:hover { border-color: var(--ca-charbon); }

.critere-actif-groupe {
  font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: .06em; color: var(--ca-gris-fort);
}

.critere-actif-croix {
  font-size: 1rem; line-height: 1; color: var(--ca-gris-fort);
  padding: 0 .15rem; border: 0; background: none; cursor: pointer; text-decoration: none;
  /* A 24 px hit area on large (spec-design §2.4, decision 11): the × was 15 px wide. */
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.5rem; min-height: 1.5rem;
}
.critere-actif:hover .critere-actif-croix { background: var(--ca-charbon); color: var(--ca-surface); }

/* The list head's door (Panel.porte: Entreprises' « Ces 216 entreprises en chiffres › », Fonds'
   « les sociétés qui les exploitent › »): mono like the sort control, pushed to the row's own end
   (harmless if `.liste-tete-suivre` already claimed the free space — it then simply follows it).
   Its look (user 2026-10-14): the bare link was « not very visible », then a 2 px bright yellow
   frame (the one of « Ma veille ») « still not visible enough »: `--ca-jaune` is 1.1:1 on white.
   So the door is a CHARBON fill with the bright yellow as its text: the strongest contrast the
   light page holds, and yellow on dark is « ici » (§6.2). It is not a filled yellow control, so
   §6.3 (« nothing on an index ») still holds; the user chose this over a yellow fill, which would
   have needed a §6.3 revision. The hover is the halo of the nav CTA. */
.liste-tete-porte {
  font-family: var(--font-mono); font-size: var(--fs-xs); margin-left: auto;
  /* A 44 px tap target (spec-design §2.4, the ratchet's CIBLE_MIN): the link is one line of
     small mono text, 17 px tall on its own, and the list head gives it no clickable parent. */
  display: inline-flex; align-items: center; min-height: 2.75rem;
  padding: 0 var(--sp-3);
  border: 1px solid var(--ca-charbon);
  background: var(--ca-charbon);
  color: var(--ca-jaune);
  font-weight: 700;          /* user 2026-10-14: the mono xs reads thin in yellow on charbon */
  text-decoration: none;
}
.liste-tete-porte:hover,
.liste-tete-porte:focus-visible {
  background: var(--ca-noir);
  color: var(--ca-jaune);
  box-shadow: 0 0 12px var(--ca-moutarde-glow);
  text-decoration: none;
}

/* ── Partial rows (facets/rows.html ; §4.2 ; B9 non revu) ──────────────────────────────
   The table is tokens.css's .table-donnees; here the sub-line of a name cell, the Secteurs
   row indented by its own depth (`--profondeur`, the same per-level amount the tree gives
   `.nk`, so the row previews the tree), the star. */
/* B17 Q48: the grey line under a name (« Livraison et coursier · 53.10Z ») is a sentence-like
   sub-line in the sans face, so it takes the sans floor, 13 px (it was sans 11 px, 31 rows on
   the first page of Entreprises). The list grows by a few pixels a row. */
/* ONE LINE PER ROW from 768 px, where the row is a table row (spec-design §8.1 decision 18,
   2026-10-02): the sub-line follows the name on its line, after a « · », and the year follows
   its amount. The name and the amount are one line each when their words fit; a row is still
   two lines wherever ANOTHER cell wraps (« 10 000 salariés et plus », « Marseille · Bouches-
   du-Rhône »): measured the same day, Fonds went from 2 170 to 1 894 px at 1440 px and
   Entreprises did not move. A real one-line row needs shorter words in those columns, which is
   a decision on each index's columns (spec-experience §4.2), not a rule of this sheet. Nothing
   is cut and no width is forced: the table keeps its automatic layout. (Tried and dropped the
   same day: the name cell cut with « … » at `width: 100%; max-width: 0` took the width of
   every other column, « Effectif » on three lines.) Under 768 px the row is the card of
   viewport.css, unchanged. */
@media (min-width: 768px) {
  .table-cartes--fiche td.cellule-titre /* The `action` cell (« Retirer » of an account's liste, 2026-10-09): the row's last column,
   on the right edge like a plate line's door (`.ligne-cote`), never wrapped under the word. */
.cellule-action { text-align: right; white-space: nowrap; }

.cellule-sous { display: inline; }
  .table-cartes--fiche td.cellule-titre .cellule-sous::before { content: " · "; }
  .table-cartes--fiche td.num br { display: none; }
  .table-cartes--fiche td.num .discret { margin-left: var(--sp-1); font-size: var(--fs-xs); }
  /* A floor, never a width: the columns of the set critères (graph.core.index, 2026-10-05) can
     make a table wider than its panel, which then scrolls sideways (tokens.css), and the
     automatic layout took the width from the name first. Measured that day at 1 440 px, six
     critères set on Entreprises: the name at 121 px and five lines a row. 12rem sits under the
     narrowest name of the four indexes at rest (194 px, Entreprises at 820 px); scoped all the
     same to a table that HAS a critère column (`th.col-critere`, facets/rows.html), because a
     min-width moves the automatic layout even where it does not bind: unscoped, Liquidations
     at rest grew from 1 348 to 1 601 px at 1 440 px. */
  .table-cartes--fiche:has(th.col-critere) td.cellule-titre { min-width: 12rem; }
}

.cellule-sous {
  display: block;
  font-size: var(--fs-s);
}

.rows-arbre { padding-left: calc(var(--profondeur, 0) * 1rem); }

/* « repris en 2025 » under a name (Entreprises, P2.1): a second sub-line, the sub-line's size. */
.cellule-note {
  display: block;
  font-size: var(--fs-s);
}

/* The unfold of a row on its établissements in the selected place (Entreprises, P2.1): a
   `<details>` closed on load, its summary « 6 établissements ici ▾ » under the name, the lines
   one under the other. The ▾ turns ▴ when open (§6.13). On compact each line and the summary
   are 44 px targets (the lines are links to the plate's « Établissements », a new tab). */
.depliage { margin-top: var(--sp-1); }
.depliage > summary {
  display: inline-block;
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-s);
}
.depliage > summary::-webkit-details-marker { display: none; }
.depliage > summary::after { content: "▾"; margin-left: var(--sp-1); }
.depliage[open] > summary::after { content: "▴"; }
.depliage-lignes {
  list-style: none;
  margin: var(--sp-1) 0 0;
  padding: 0;
  font-size: var(--fs-s);
}
.depliage-lignes li { padding: var(--sp-1) 0; }
@media (max-width: 767.98px) {
  .depliage > summary { display: inline-flex; align-items: center; min-height: 44px; }
  .depliage-lignes li { display: flex; align-items: center; flex-wrap: wrap; gap: 0 var(--sp-1); min-height: 44px; }
  .depliage-lignes li a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ── Partial arbre (facets/arbre_outils.html + the tree cell of facets/rows.html; E0 #14) ────
   The Secteurs pivot: a view toggle above the list head, and a table whose first column is a
   FOLDING tree. Markup and script: rows.html header, static/graph/js/arbre.js. The toggle reuses
   `.vues` / `.vue` (site.css), so only what is new lives here. */
.arbre-outils {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  margin: 0 0 var(--sp-3);
}
/* A link where the Liste · Carte control has a button: no underline, centred label. */
.arbre-choix { display: inline-flex; align-items: center; text-decoration: none; }
.arbre-plier { display: inline-flex; gap: var(--sp-3); }
.arbre-plier[hidden] { display: none; }
.arbre-tout {
  border: 0; background: none; cursor: pointer; padding: 0;
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ca-lien);
}
.arbre-tout:hover { text-decoration: underline; }
/* The filter field: the header's search bar, drawn again (tokens.css + site.css « Champ de
   recherche du header »): a frame on white, 2.25 rem tall, the muted « filtrer › » prompt, and
   the frame, not the input, carries the focus. Its frame is the bright yellow (user 2026-10-14),
   3 px because `--ca-jaune` is 1.1:1 on white: 1 px vanishes, 2 px read pale (screenshot); a yellow rule,
   not a fill, so it stays inside §6.2 and leaves the one filled control to « Suivre » (§6.3). The
   focus adds the halo of the nav CTA's hover (site.css `.cta-link`). A first try, a 4 px yellow
   rule at the left of a charbon frame, was refused the same day. It takes the room the toggle
   and the fold controls leave. */
.arbre-filtre {
  flex: 1 1 16rem;
  max-width: 28rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  height: 2.25rem;
  padding: 0 var(--sp-3);
  border: 3px solid var(--ca-jaune);
  background: var(--ca-blanc);
  font-family: var(--font-mono);
  cursor: text;
}
.arbre-filtre:focus-within { box-shadow: 0 0 12px var(--ca-moutarde-glow); }
.arbre-filtre-invite { font-size: var(--fs-s); color: var(--ca-text-muted); line-height: 1; white-space: nowrap; }
.arbre-filtre input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--ca-charbon);
  font-family: inherit;
  font-size: var(--fs-s);
  line-height: 1;
  -webkit-appearance: none;
  appearance: none;
}
.arbre-filtre input:focus-visible { outline: none; }
.arbre-filtre input::placeholder { color: var(--ca-text-muted-light); }
/* Chromium's native clear cross is blue, off the palette; the header removes it too. */
.arbre-filtre input::-webkit-search-decoration,
.arbre-filtre input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.arbre-filtre[hidden], .arbre-aucun[hidden] { display: none; }
.arbre-aucun { flex-basis: 100%; margin: 0; color: var(--ca-gris-fort); }

/* The disclosure: one glyph from the state, so the markup never repeats it. A 1.5 rem hit area
   on large (the same floor as the star and the chip ×), 44 px on compact (below). The blank
   keeps a leaf's label on the same left edge as its siblings' labels. */
.arbre-bouton,
.arbre-vide {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; margin-right: var(--sp-1);
  vertical-align: middle; flex: 0 0 auto;
}
.arbre-bouton {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-size: 1rem; line-height: 1; color: var(--ca-gris-fort);
}
.arbre-bouton::before { content: "▸"; }
.arbre-bouton[aria-expanded="true"]::before { content: "▾"; }
.arbre-bouton:hover { color: var(--ca-charbon); }

/* The NAF code before its label, as INSEE writes it: mono, grey, so the label stays the word. */
.arbre-code {
  font-family: var(--font-mono); font-size: var(--fs-s); color: var(--ca-gris-fort);
  margin-right: var(--sp-2);
}

/* A folded row is a `hidden` <tr>. On compact the row is a flex card (viewport.css §4), whose
   `display: flex` would otherwise beat the attribute's UA `display: none`. */
.table-donnees tbody tr[hidden] { display: none; }

/* HANGING INDENT of a tree label: a label that wraps returns under its first letter, not under
   the disclosure. `--arbre-pas` is what the disclosure (or a leaf's blank) occupies, added to the
   depth's indent as padding and taken back from the first line as a negative text-indent. Only
   on a real tree row (`--noeud`): the staff tables' arbre cells have no disclosure. */
.rows-arbre--noeud {
  --arbre-pas: calc(1.5rem + var(--sp-1));
  padding-left: calc(var(--profondeur, 0) * 1rem + var(--arbre-pas));
  text-indent: calc(-1 * var(--arbre-pas));
}
/* The text-indent is inherited by the glyph box of the button; it must not shift the ▸. */
.arbre-bouton, .arbre-vide { text-indent: 0; }
/* …and by the row's link, which is an inline-flex box on compact (viewport.css §4, the 44 px
   floor): its own text would start 28 px left of it, under the disclosure. On a wide screen the
   link is inline and the property does not apply to it, so this is safe at every tier. */
.rows-arbre--noeud a { text-indent: 0; }

/* The indent survives on the compact card, whose cells are `padding: 0` (a rule of higher
   specificity than `.rows-arbre` above). Tree levels are the only place a card needs it. */
.table-cartes--fiche td.rows-arbre { padding-left: calc(var(--profondeur, 0) * 1rem); }
.table-cartes--fiche td.rows-arbre--noeud { padding-left: calc(var(--profondeur, 0) * 1rem + var(--arbre-pas)); }

/* --ca-gris-fort, not --ca-gris: the star sits on the grey ground of an index and on a
   hovered row (--ca-surface-2), where #767676 falls to 4.17:1 (measured 2026-09-23). */
.suivi-etoile {
  border: 0; background: none; cursor: pointer; padding: 0 .2rem 0 0;
  font-size: 1rem; line-height: 1; color: var(--ca-gris-fort);
  text-decoration: none; vertical-align: baseline;
  /* The glyph is 17 x 16 px: a 24 px hit area on large (decision 11), 44 px on compact below. */
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.5rem; min-height: 1.5rem;
}
.suivi-etoile:hover, .suivi-etoile.est-actif { color: var(--ca-lien); }

/* ── Partial panel (facets/panel.html) ─────────────────────────────────────────────────
   The region every live/ replaces: dimmed while a refresh is in flight, so the page never
   jumps on a click. */
.panel { transition: opacity .12s ease; }
.panel.est-occupe { opacity: .45; pointer-events: none; }

/* ── Partial population (facets/population.html ; /analyse/) ───────────────────────────
   The population selector: the vue control's shape, as links. */
.population {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 0 var(--sp-6);
}

.population-choix {
  font-family: var(--font-mono);
  font-size: var(--fs-s);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--ca-filet);
  color: var(--ca-gris-fort);
  text-decoration: none;
}

.population-choix + .population-choix { border-left: none; }

.population-choix.est-active {
  border-color: var(--ca-charbon);
  color: var(--ca-charbon);
}

/* ── The touch floor of the partials (spec-design §2.4: 44 px) ─────────────────────────
   The SURFACE grows, never the type: the fold button and the fold titles of the groups, the
   option rows, the tree's search field and its rows, the range fields, the sort control, the
   × of a chip, the star, a population link.
   Measured 2026-09-29 on the tablet tier (820 px): the fold button 35 px tall, an option row
   20 px with a 13 px box, the tree search field 27 px. The floor was written for compact only
   (< 768); it now holds up to 1023 px, the header's fold before decision 10, where the reader
   still touches. On a pointer device the density stays the desktop's (`pointer: fine` keeps
   the 20 px rows), so a narrow desktop window does not balloon. */
@media (max-width: 767.98px), (max-width: 1023.98px) and (pointer: coarse) {
  .criteres-bouton,
  .liste-tete-tri select,
  .liste-tete-suivre,
  .porte,
  .population-choix { display: inline-flex; align-items: center; min-height: 44px; }
  /* a row's link on the compact card moved to viewport.css §4 (this file is loaded by the
     indexes only; the cells of a plate carry the same cards) */
  .critere-actif-croix,
  .suivi-etoile {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px;
  }
  .critere-actif { padding-right: 0; min-height: 44px; flex: 0 0 auto; }
  /* The tree's disclosure and the fold-all controls (Partial arbre). */
  /* A 44 px target that occupies a 1.5 rem slot: the negative margins give back what the box
     adds, so a card's indent and height stay those of the large tier (a leaf's blank is not
     touched, it stays 1.5 rem). */
  .arbre-bouton { width: 44px; height: 44px; margin: -10px calc(-10px + var(--sp-1)) -10px -10px; }
  .arbre-tout, .arbre-filtre { min-height: 44px; }
}

@media (max-width: 767.98px) {
  /* The list head in three lines (Q7): each group is a line; the chips scroll sideways on
     theirs instead of wrapping to a fourth and a fifth. */
  /* nowrap: in a wrapping column the line is as wide as its widest content (the chips, 445 px),
     so `stretch` would stretch every group to it and push the sort and « Suivre » off the card. */
  .liste-tete { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: var(--sp-2); }
  .liste-tete-ligne {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2) var(--sp-3);
  }
  .liste-tete-actifs { flex-wrap: nowrap; overflow-x: auto; }
}

/* The fold button only exists under 1024 px (`.criteres-bouton`, above): its floor holds on the
   whole band, pointer or not. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .criteres-bouton { min-height: 44px; }
}

@media (max-width: 767.98px) {
  /* The métiers de départ: one line that scrolls sideways, each item 44 px tall. */
  .departs { flex-wrap: nowrap; flex-direction: column; align-items: stretch; gap: var(--sp-1); }
  .departs-liste { flex-wrap: nowrap; overflow-x: auto; gap: var(--sp-4); }
  .depart { display: inline-flex; align-items: center; min-height: 44px; flex: 0 0 auto; }
}

@media (max-width: 767.98px), (max-width: 1023.98px) and (pointer: coarse) {
  /* The « Où » suggestions and the window chips of the Événement critères: 44 px targets. */
  .criteres-lieu input[type="search"] { min-height: 44px; }
  .criteres-lieu .criteres-suggestion { min-height: 44px; align-items: center; }
  .criteres-facette .chip { display: inline-flex; align-items: center; min-height: 44px; }
  .criteres-groupe-titre { min-height: 44px; align-items: center; }
  .criteres-option { min-height: 44px; align-items: center; }
  .criteres-option input { width: 18px; height: 18px; flex-shrink: 0; }
  .criteres-facette input[type="search"],
  .criteres-texte input[type="text"],
  .criteres-plage input { min-height: 44px; }
  .criteres-rayon input[type="range"] { min-height: 44px; }
  .ds-tree .ns, .ds-tree .nf, .ds-tree .nl { min-height: 44px; }
  .ds-tree .nl input { width: 18px; height: 18px; }
}