/* L'établi COMPACT des trois modules béton armé — poutres, dalles, prédalles (site/web/construire.py ETABLI_COMPACT ;
   docs/site/REFONTE_ETABLI.md ; leurs fragments : api_web/etabli_compact.py, api_web/plaque_compact.py).
   Trois colonnes accrochées au PC : les DONNÉES à gauche (l'arborescence de la note : chaque élément, et sous l'élément
   ouvert ses rubriques), le DESSIN au centre sur fond clair, avec son en-tête technique, les RÉSULTATS à droite (un bloc
   par section). Les colonnes se replient et se redimensionnent. Tout est scopé par body[data-etabli="compact"] : les
   autres modules gardent l'établi d'avant.

   Les teintes : légères, une par rôle — la poutre ouverte (un filet d'accent sur sa gauche), la rubrique ouverte (son
   en-tête grisé), la pièce choisie (le bleu pâle de la sélection), l'état d'une section (l'en-tête de son bloc : vert,
   ambre, rouge, gris). Ni gris foncé, ni bordure épaisse, ni carte dans une carte. */

[hidden] { display: none !important; }

:root {
  --et-ok-bg: #EAF6EE; --et-ok-ink: #1E6B3B; --et-ok-line: #CDE8D6;
  --et-warn-bg: var(--vrf-fond); --et-warn-ink: var(--vrf-encre); --et-warn-line: #F0DCAE;
  --et-nok-bg: #FDEDEE; --et-nok-ink: #A3242F; --et-nok-line: #F4CACE;
  --et-inc-bg: var(--bg-sunken); --et-inc-ink: var(--ink-2); --et-inc-line: var(--line);
  --et-just-bg: #E7F3F3; --et-just-ink: #1D6262;
  --et-pt-bg: #F7F8FC;
}
[data-theme="dark"] {
  --et-ok-bg: #12301F; --et-ok-ink: #8FD3A8; --et-ok-line: #1E4A30;
  --et-warn-line: #5A4416;
  --et-nok-bg: #3B1A1E; --et-nok-ink: #F2A0A8; --et-nok-line: #5C252C;
  --et-just-bg: #0F2F2F; --et-just-ink: #7FD1CF;
  --et-pt-bg: #0F1420;
}

/* les cadres sont pleins (ni verre dépoli ni ombre) à toutes les largeurs */
[data-etabli="compact"] .panel { box-shadow: none; background: var(--panel); -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-etabli="compact"] .phead { height: 40px; padding: 0 6px 0 12px; gap: 2px; }
[data-etabli="compact"] .phead .h3 { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin-right: auto; }
[data-etabli="compact"] .phead #statut { margin-right: 4px; }
.et-hist { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; color: var(--ink-2); flex: none; }
.et-hist:hover:not(:disabled) { background: var(--bg); color: var(--ink); }
.et-hist:disabled { color: var(--ink-4); cursor: default; }
.et-hist svg.i { width: 16px; height: 16px; }

/* ------------------------------------------------------------------ PC (1 200 px et plus) : trois colonnes accrochées */
@media (min-width: 1200px) {
  [data-etabli="compact"] .bench { --pl: var(--pl-r, 340px); --pr: var(--pr-r, 360px); --g: 0px; }
  [data-etabli="compact"] .bench.sans-g { --pl: 44px; }
  [data-etabli="compact"] .bench.sans-d { --pr: 44px; }
  [data-etabli="compact"] .panel { top: 0; bottom: 0; border-radius: 0; border: 0; }
  [data-etabli="compact"] .panel.left { left: 0; border-right: 1px solid var(--line); }
  [data-etabli="compact"] .panel.right { right: 0; border-left: 1px solid var(--line); }
  [data-etabli="compact"] .canvas { padding: 0 var(--pr) 0 var(--pl); }
  [data-etabli="compact"] .bench.sans-g .panel.left, [data-etabli="compact"] .bench.sans-d .panel.right { bottom: 0; }
  /* la poignée : à cheval sur le bord intérieur de chaque colonne (10 px, le trait au milieu) */
  .bench > .et-poignee { position: absolute; top: 0; bottom: 0; width: 10px; z-index: 12; cursor: col-resize; touch-action: none; }
  .bench > .et-poignee[data-poignee="g"] { left: calc(var(--pl) - 5px); }
  .bench > .et-poignee[data-poignee="d"] { right: calc(var(--pr) - 5px); }
  .et-poignee::after { content: ""; position: absolute; top: 0; bottom: 0; left: 4.5px; width: 1px; background: transparent; transition: background .12s; }
  .et-poignee:hover::after, .et-redim .et-poignee::after { background: var(--accent); width: 2px; left: 4px; }
  .bench.sans-g > .et-poignee[data-poignee="g"], .bench.sans-d > .et-poignee[data-poignee="d"], .bench.plein > .et-poignee { display: none; }
  .bench.et-redim, .bench.et-redim * { user-select: none; }
  .bench.et-redim .canvas, .bench.et-redim .panel { transition: none !important; }
}
@media (max-width: 1199px) { .et-poignee { display: none; } }
/* le fil de la note (chantier › dossier) ne s'efface pas devant le champ du nom, là où la barre a la place (1 400 px et
   plus) : c'est le nom qui se coupe. Plus étroit, il se coupe comme ailleurs (sinon il passait sous « Brouillon ») */
@media (min-width: 1400px) { [data-etabli="compact"] #fil-chantier { flex: none; } }

/* ------------------------------------------------------------------ la toile : fond clair, la feuille sans cadre */
[data-etabli="compact"] .canvas { background: var(--paper); }
[data-etabli="compact"] .ctool { padding: 6px 10px 0; }
[data-etabli="compact"] .ctool .seg { box-shadow: none; border: 1px solid var(--line); }
/* le zoom : discret — il se montre au survol de la toile (au doigt : après un appui, et toujours un peu) ; « ajuster »
   est une icône (un pourcentage laissait croire à une échelle d'impression) */
[data-etabli="compact"] .ctool .zoom { box-shadow: none; border-color: transparent; background: transparent; opacity: 0; transition: opacity .18s ease, border-color .18s, background .18s; }
[data-etabli="compact"] .canvas:hover .ctool .zoom, [data-etabli="compact"] .ctool .zoom:focus-within,
[data-etabli="compact"] .bench.et-zoom-vu .ctool .zoom, [data-etabli="compact"] .bench.plein .ctool .zoom { opacity: 1; border-color: var(--line); background: var(--panel); }
@media (hover: none) { [data-etabli="compact"] .ctool .zoom { opacity: .7; } }
[data-etabli="compact"] .zoom .zpct { min-width: 0; width: 30px; padding: 0; }
[data-etabli="compact"] .zoom .zpct .v { display: none; }
[data-etabli="compact"] .stage { padding: 4px 6px 6px; }
[data-etabli="compact"] .sheet { border: 0; border-radius: 0; box-shadow: none; background: var(--paper); }
[data-etabli="compact"] .sheet .draw { padding: 2px 10px 6px; }
[data-etabli="compact"] .cart { border-top-color: #EEF0F3; }
[data-etabli="compact"] .bench.plein .canvas { padding: 0 12px; }

/* l'EN-TÊTE technique de la vue : trois lignes à gauche (la section et ses matériaux ; les aciers ; les étriers), la
   bande compacte des efforts à droite — sur la feuille, qui reste claire (couleurs fixes, comme le cartouche) */
[data-etabli="compact"] .sheet .stitle.et-stitle { display: block; padding: 10px 14px 0; white-space: normal; }
.et-ent { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; }
.et-ent-t { min-width: 0; flex: 1 1 260px; display: flex; flex-direction: column; gap: 2px; }
/* la 1ʳᵉ ligne coule comme du texte : trop longue (une prédalle au téléphone), elle passe à la ligne entre deux mots,
   jamais devant le « · » qui sépare le titre de la suite */
.sheet .et-ent-t .l1 { display: block; font-size: 13px; color: #0D1525; }
.sheet .et-ent-t .l1 b { font-size: 12.5px; letter-spacing: .06em; font-weight: 700; text-transform: uppercase; }
.sheet .et-ent-t .l1 span { display: inline; margin-left: 6px; font-size: 12.5px; color: #4A5568; overflow: visible; font-weight: 500; white-space: normal; }
.sheet .et-ent-t .l2, .sheet .et-ent-t .l3 { font-size: 12px; line-height: 1.35; color: #4A5568; font-variant-numeric: tabular-nums; }
.sheet .et-ent-t .l3 { color: #6B7480; }
/* (dalles, prédalles) la légende du dessin, sous les aciers : ce qu'on y lit */
.sheet .et-ent-t .lg { font-size: 11px; line-height: 1.35; color: #8B95A7; }
/* la bande passe à la ligne quand la place manque (les cinq efforts d'une dalle au téléphone) : chaque case porte ses
   filets gauche et haut, ceux de la première colonne et de la première rangée sont rognés par le cadre */
.et-eff { flex: 0 1 auto; max-width: 100%; display: flex; flex-wrap: wrap; align-items: stretch; border: 1px solid #E5E8ED; border-radius: 8px; background: #FAFBFC; overflow: hidden; }
.sheet .et-eff span { display: flex; align-items: baseline; gap: 3px; padding: 4px 10px; font-size: 11.5px; color: #6B7480; overflow: visible; white-space: nowrap;
  border-left: 1px solid #E5E8ED; border-top: 1px solid #E5E8ED; margin: -1px 0 0 -1px; }
.et-eff i { font-style: italic; font-family: "Times New Roman", Georgia, serif; font-size: 13px; color: #1B2230; }
.et-eff sub { font-size: 9px; color: #4A5568; margin-right: 4px; }
.sheet .et-eff b { font-size: 12.5px; font-weight: 650; color: #0D1525; font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none; }
.et-eff small { font-size: 10.5px; color: #8B95A7; }

/* le dessin : les pièces qu'on choisit, et la pièce choisie */
[data-etabli="compact"] .coupe-ba .pc[data-sel] { cursor: pointer; }
@media (hover: hover) {
  [data-etabli="compact"] .coupe-ba .pc[data-sel]:hover > circle { fill: #3C4A63; }
  [data-etabli="compact"] .coupe-ba .pc.cadre[data-sel]:hover .st.b { stroke: #2B3A55; }
  [data-etabli="compact"] .coupe-ba .pc[data-sel]:hover text.an { fill: var(--accent); }
}
[data-etabli="compact"] .coupe-ba .pc.et-sel > circle { fill: #2B4BCF; }
[data-etabli="compact"] .coupe-ba .pc.et-sel polyline { stroke: #2B4BCF; }
[data-etabli="compact"] .coupe-ba .pc.et-sel text { fill: #2B4BCF; }
[data-etabli="compact"] .coupe-ba .pc.cadre.et-sel .st.b { stroke: #2B4BCF; }
[data-etabli="compact"] .coupe-ba .pc.cadre.et-sel .st.a { stroke: #DCE3FF; }
[data-etabli="compact"] .coupe-ba .pc.cadre.et-sel line { stroke: #2B4BCF; }
[data-etabli="compact"] .coupe-ba .pc.beton.et-sel rect.bord { stroke: #2B4BCF; }
/* les poignées du cadre choisi : on les glisse d'une barre à l'autre (js/compact.js) */
[data-etabli="compact"] .coupe-ba .pc.cadre.et-sel .poignees { visibility: visible; }
[data-etabli="compact"] .coupe-ba .poignee { cursor: ew-resize; touch-action: none; }
[data-etabli="compact"] .coupe-ba .poignee:hover .o, [data-etabli="compact"] .coupe-ba .et-glisse .poignee .o { fill: #EEF1FE; }
[data-etabli="compact"] .coupe-ba .pc.lit > circle.et-visee { fill: #2B4BCF; }
/* les dessins des dalles et des prédalles (api_web/dessin_dalle.py, dessin_predalle.py) : chaque couche (ses points dans
   une coupe, ses traits dans l'autre et dans le plan), le béton, les sollicitations */
[data-etabli="compact"] .draw > svg:not(.coupe-ba) .pc[data-sel] { cursor: pointer; }
@media (hover: hover) {
  [data-etabli="compact"] .draw > svg:not(.coupe-ba) .pc.couche[data-sel]:hover > circle { fill: #3C4A63; }
  [data-etabli="compact"] .draw > svg:not(.coupe-ba) .pc.couche[data-sel]:hover > line { stroke: #3C4A63; }
}
[data-etabli="compact"] .draw > svg:not(.coupe-ba) .pc.couche.et-sel > circle { fill: #2B4BCF; }
[data-etabli="compact"] .draw > svg:not(.coupe-ba) .pc.couche.et-sel > line { stroke: #2B4BCF; }
[data-etabli="compact"] .draw > svg:not(.coupe-ba) .pc.beton.et-sel > line { stroke: #2B4BCF; }
[data-etabli="compact"] .draw > svg:not(.coupe-ba) .pc.beton.et-sel > rect:first-child { fill: #E3E9FB; }
[data-etabli="compact"] .draw > svg:not(.coupe-ba) .pc.efforts.et-sel text { fill: #2B4BCF; }

/* ------------------------------------------------------------------ les données : l'arborescence */
[data-etabli="compact"] #donnees { padding-bottom: 24px; }
.et-arbre { display: flex; flex-direction: column; }
.et-arbre-h { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line); }
.et-arbre-h .n { min-width: 18px; height: 16px; padding: 0 4px; border-radius: 8px; display: grid; place-items: center; background: var(--bg-sunken); color: var(--ink-2); letter-spacing: 0; }
.et-pt { border-bottom: 1px solid var(--line); }
.et-pt.on { position: relative; background: var(--et-pt-bg); }
/* le filet de la poutre ouverte, sur toute sa hauteur (ses rubriques comprises) : la hiérarchie de l'arborescence */
.et-pt.on::before { content: ""; position: absolute; z-index: 2; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); pointer-events: none; }
.et-pt-l { position: relative; display: flex; align-items: center; min-height: 40px; padding: 0 6px 0 4px; }
.et-pt-t { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 4px; height: 40px; padding: 0 4px; text-align: left; border-radius: 7px; color: var(--ink); }
.et-pt-t svg.i { flex: none; width: 15px; height: 15px; color: var(--ink-3); transition: transform .15s ease; }
.et-pt-t.on svg.i { transform: rotate(90deg); color: var(--accent); }
.et-pt.on.replie .et-pt-t svg.i { transform: none; }
.et-pt-t .t { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.et-pt-t .nom { font-size: 13px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.et-pt-t .dim { flex: none; font-size: 12px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.et-pt:not(.on) .et-pt-t:hover { background: var(--bg); }
.et-pt.on .et-pt-t .nom { color: var(--ink); }
/* l'élément OUVERT : le chevron seul (replier, déplier), puis le NOM en champ, à l'allure du titre — un cadre au
   survol, au focus (le champ « Nom » des rubriques n'existe plus) */
.et-pt-t.et-pt-chev { flex: none; width: 28px; justify-content: center; padding: 0; }
.et-pt-n { flex: 1 1 auto; display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.et-pt-nom { flex: 0 1 auto; min-width: 4ch; max-width: 100%; height: 28px; padding: 0 6px; margin-left: -2px; border: 1px solid transparent;
  border-radius: 6px; background: transparent; font: inherit; font-size: 13px; font-weight: 650; color: var(--ink); text-overflow: ellipsis; }
.et-pt-nom:hover { border-color: var(--line-strong); background: var(--panel); }
.et-pt-nom:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; background: var(--panel); }
.et-pt-n .dim { flex: none; font-size: 12px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.et-pt-corps { padding: 0 0 4px; }
.et-pt.on.replie .et-pt-corps { display: none; }
.et-pt-add { display: flex; align-items: center; gap: 6px; height: 36px; margin: 6px 10px 2px; padding: 0 10px; border-radius: 8px; font-size: 12px; font-weight: 600;
  color: var(--ink-2); border: 1px dashed var(--line-strong); }
.et-pt-add:hover { color: var(--accent-hover); border-color: var(--accent-line); background: var(--accent-soft); }
.et-pt-add svg.i { width: 14px; height: 14px; }

/* la colonne de gauche COMPACTE (la dalle, la poutre ; docs/site/DALLES_FUSION.md § 1 ; etabli_compact.arbre_compact) :
   ni titre « Données », ni arborescence. La LIGNE de l'élément ouvert (.et-elsel) est posée par js/etabli.js dans
   l'en-tête du panneau (l'emplacement .et-elt, construire.compact), à côté d'« Annuler » et « Rétablir » : le NOM en champ
   à l'allure d'un titre (un clic, et on le renomme), la liste des éléments (un menu : ouvrir, ajouter), copier,
   supprimer. Les rubriques commencent juste dessous. */
[data-etabli="compact"] .phead .et-elt { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; margin-left: -7px; }
.et-elsel { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 1px; }
.et-elt-nom { flex: 0 1 auto; min-width: 4ch; max-width: 100%; height: 28px; padding: 0 6px; border: 1px solid transparent; border-radius: 6px;
  background: transparent; font: inherit; font-size: 13.5px; font-weight: 700; letter-spacing: -.005em; color: var(--ink); text-overflow: ellipsis; }
.et-elt-nom:hover { border-color: var(--line-strong); background: var(--panel); }
.et-elt-nom:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; background: var(--panel); }
/* verrouillé : le nom se lit, un cadenas devant */
.et-elt-nom.lu { display: inline-flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; white-space: nowrap; line-height: 28px; }
.et-elt-nom.lu:hover { border-color: transparent; background: transparent; }
.et-elt-nom.lu > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.et-elt-nom.lu svg.i { flex: none; width: 13px; height: 13px; color: var(--ink-3); }
/* la liste des éléments : un chevron (et leur nombre, dès deux) ; le menu s'ouvre sous lui, vers la droite */
.et-elt-liste .et-mn-b { width: auto; min-width: 28px; padding: 0 4px; display: inline-flex; align-items: center; gap: 2px; }
.et-elt-liste .et-mn-b .n { font-size: 11px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.et-elt-liste .et-mn-l { left: 0; right: auto; min-width: 236px; max-width: min(320px, calc(100vw - 24px)); }
.et-elt-i .ic { flex: none; width: 15px; }
.et-elt-i .nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 650; }
.et-elt-i .dim { flex: none; font-size: 12px; font-weight: 450; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.et-elt-i.on svg.i { color: var(--accent); }
/* copier, supprimer : deux icônes ; supprimer est éteint quand l'élément est seul */
.et-elt-b { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; color: var(--ink-3); }
.et-elt-b:hover:not(:disabled) { background: var(--bg); color: var(--ink); }
.et-elt-b.danger:hover:not(:disabled) { color: var(--nok); }
.et-elt-b:disabled { opacity: .35; cursor: default; }
.et-elt-b svg.i { width: 15px; height: 15px; }

/* le menu ⋯ d'une poutre, d'une section : discret, ses actions dans une liste */
.et-mn { position: relative; flex: none; }
.et-mn-b { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; color: var(--ink-3); }
.et-mn-b:hover, .et-mn-b[aria-expanded="true"] { background: var(--bg); color: var(--ink); }
.et-mn-b svg.i { width: 16px; height: 16px; }
@media (hover: hover) { .et-pt:not(.on) .et-pt-l:not(:hover) .et-mn-b:not([aria-expanded="true"]) { opacity: 0; } }
.et-mn-l { position: absolute; z-index: 30; top: calc(100% + 2px); right: 0; min-width: 196px; padding: 4px; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-2); }
.et-mn-l.haut { top: auto; bottom: calc(100% + 2px); }
.et-mn-l button { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border-radius: 7px; font-size: 12.5px; font-weight: 550; color: var(--ink); text-align: left; white-space: nowrap; }
.et-mn-l button svg.i { width: 15px; height: 15px; color: var(--ink-3); }
.et-mn-l button:hover:not(:disabled), .et-mn-l button:focus-visible { background: var(--bg); }
.et-mn-l button.danger { color: var(--nok); }
.et-mn-l button.danger svg.i { color: var(--nok); }
.et-mn-l button:disabled { color: var(--ink-4); cursor: default; }
.et-mn-l button:disabled svg.i { color: var(--ink-4); }

/* les rubriques de la poutre ouverte : un accordéon sobre (une ouverte par défaut, plusieurs si on le veut) */
[data-etabli="compact"] #donnees .sec { border-bottom: 0; border-top: 1px solid var(--line); }
[data-etabli="compact"] #donnees .sechd { padding: 0 10px 0 12px; height: 38px; gap: 9px; }
[data-etabli="compact"] #donnees .sechd .n { width: 18px; height: 18px; border-radius: 5px; font-size: 10.5px; }
[data-etabli="compact"] #donnees .sechd .tt { font-size: 12.5px; }
[data-etabli="compact"] #donnees .sechd .sum { font-size: 11.5px; }
[data-etabli="compact"] #donnees .sec.open > .sechd { background: color-mix(in srgb, var(--panel) 40%, var(--et-pt-bg)); }
[data-etabli="compact"] #donnees .sechd:hover { background: color-mix(in srgb, var(--bg) 60%, transparent); }
[data-etabli="compact"] #donnees .sec > .rows { padding: 6px 12px 12px; gap: 6px; background: var(--panel); }
[data-etabli="compact"] #donnees .sec[data-secondaire] .sechd .tt { color: var(--ink-2); }
/* un segment dont les libellés ne tiennent pas sur la largeur de la colonne (« Prédalle + béton coulé en place », type
   de dalle) passe à la ligne DANS son bouton plutôt que de déborder : mesuré le 09/11/2026 (capture site_dalle.png),
   le second segment sortait du panneau à 340 px, et le choisir faisait défiler la colonne de côté */
[data-etabli="compact"] #donnees .rows .seg.full { max-width: 100%; }
[data-etabli="compact"] #donnees .rows .seg.full button { min-width: 0; white-space: normal; height: auto; min-height: 28px; line-height: 1.2; padding: 3px 8px; }
/* le TYPE de dalle (« Dalle CSP · Prédalle + dalle CSP ») : chaque segment à la largeur de son texte — une ligne chacun */
[data-etabli="compact"] #donnees .rows .seg.full:has(> button[data-chemin="type"]) button { flex: 1 1 auto; }
.et-r3 { display: none; } .et-r3.on { display: inline; }

/* une PIÈCE réglable (un lit, un cadre, les latérales, une section) : la ligne courte, et son détail quand elle est choisie */
.et-piece { position: relative; border-radius: 8px; transition: background .12s; }
.et-piece.et-cible { background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent-line); }
.et-piece .et-l1 { display: flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 2px 0 4px; }
.et-piece .et-l1 > .field { flex: 0 0 50px; min-width: 0; height: 28px; }
.et-piece .et-l1 > .field.select { flex: 0 0 74px; }
.et-tag { flex: none; min-width: 28px; height: 22px; padding: 0 5px; border-radius: 6px; display: grid; place-items: center; font-size: 11px;
  font-weight: 700; letter-spacing: .02em; color: var(--ink-2); background: var(--bg-sunken); cursor: pointer; font-variant-numeric: tabular-nums; }
.et-tag.c { color: #3E4C66; }
.et-tag.l { font-size: 9.5px; letter-spacing: .04em; }
[data-theme="dark"] .et-tag.c { color: var(--ink-2); }
.et-piece.et-cible .et-tag { background: var(--accent); color: var(--on-accent); }
.et-as { flex: 1 1 auto; min-width: 0; text-align: right; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.et-txt { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.et-dep { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; color: var(--ink-3); }
.et-dep:hover { background: var(--bg); color: var(--ink); }
.et-dep svg.i { width: 15px; height: 15px; transition: transform .15s ease; }
.et-piece.et-cible:not(.et-replie) .et-dep svg.i { transform: rotate(180deg); }
.et-piece .et-det { display: none; flex-direction: column; gap: 6px; padding: 2px 8px 10px 38px; }
.et-piece.et-cible:not(.et-replie) .et-det { display: flex; }
.et-piece .et-det .row { min-height: 30px; }
.et-piece .et-det .row > .field { height: 30px; }
/* la pastille d'une ligne repliée qui porte un défaut (le détail dit lequel) */
.et-pt-e { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-4); }
.et-pt-e.r { background: var(--nok); } .et-pt-e.v { background: var(--vrf); } .et-pt-e.p { background: #3BA55C; } .et-pt-e.j { background: #2C8A8A; }
.et-info { padding: 0; font-size: 11.5px; }

/* les groupes de la rubrique Armatures : Inférieures, Supérieures, Étriers, Latérales */
.et-grp { display: flex; flex-direction: column; gap: 2px; }
.et-grp + .et-grp { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.et-gh { display: flex; align-items: center; gap: 8px; min-height: 28px; padding: 0 2px 0 4px; }
.et-gh .t { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.et-req { margin-left: auto; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.et-req b { color: var(--ink); font-weight: 650; }
.et-prop { flex: none; width: 26px; height: 24px; display: grid; place-items: center; border-radius: 7px; color: var(--accent-hover); }
.et-prop:hover { background: var(--accent-soft); }
.et-prop svg.i { width: 14px; height: 14px; }
.et-pied { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 2px 0 0; }
.et-pied-a { margin-left: auto; font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.et-add { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border-radius: 7px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.et-add:hover { background: var(--accent-soft); color: var(--accent-hover); }
.et-add svg.i { width: 13px; height: 13px; }
.et-ret { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px; margin-top: 2px; border-radius: 7px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.et-ret:hover { background: color-mix(in srgb, var(--nok) 9%, transparent); color: var(--nok); }
.et-ret svg.i { width: 13px; height: 13px; }
/* un axe ou un centre de gravité SAISI (dalles, prédalles) : le champ et « ↺ », qui le rend à l'automatique */
.et-auto { display: flex; align-items: center; gap: 4px; min-width: 0; }
.et-auto > .field { flex: 1 1 auto; min-width: 0; }
.et-raz { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; color: var(--ink-3); }
.et-raz:hover { background: var(--accent-soft); color: var(--accent-hover); }
.et-raz svg.i { width: 14px; height: 14px; }
.et-arm { display: none; flex-direction: column; gap: 4px; }
.et-arm.on { display: flex; }
.et-secsel { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; }
.et-secsel > span { font-size: 11.5px; color: var(--ink-3); }
.et-secsel .seg { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.et-secsel .seg button { flex: none; min-width: 36px; }

/* la répartition d'un lit : trois modes, un pictogramme chacun ; ce que fait le mode, en une ligne */
.et-rep button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 6px; }
.et-pic { width: 22px; height: 12px; flex: none; color: var(--ink-3); }
.et-rep button.on .et-pic { color: var(--accent); }
.et-rep-a { margin-top: -2px; }
/* les espacements libres contrôlés d'un lit, et les observations d'un cadre */
.et-esp { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-2); line-height: 1.35; font-variant-numeric: tabular-nums; }
.et-esp b { font-weight: 650; color: var(--ink); }
.et-esp-t { margin-left: auto; flex: none; font-size: 10.5px; font-weight: 650; }
.et-esp.p .et-esp-t { color: var(--et-ok-ink); } .et-esp.v .et-esp-t { color: var(--et-warn-ink); } .et-esp.r .et-esp-t { color: var(--et-nok-ink); } .et-esp.j .et-esp-t { color: var(--et-just-ink); }
.et-esp.r { color: var(--et-nok-ink); }
/* les barres qu'un cadre entoure : les barres du lit 1, la plage éclairée */
.et-plage { display: flex; flex-direction: column; gap: 5px; }
.et-plage > label { color: var(--ink-2); font-size: 12px; display: flex; align-items: center; gap: 6px; }
.et-plage > label svg.i { width: 13px; height: 13px; color: var(--ink-4); }
.et-barres { display: flex; flex-wrap: wrap; gap: 3px; }
.et-barres .b { width: 28px; height: 26px; border-radius: 6px; font-size: 11.5px; font-weight: 650; color: var(--ink-3); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-strong); font-variant-numeric: tabular-nums; }
.et-barres .b.on { color: var(--accent-hover); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.et-barres .b.bout { color: var(--on-accent); background: var(--accent); box-shadow: none; }
.et-barres .b:hover:not(.bout) { box-shadow: inset 0 0 0 1px var(--accent); }
.et-large { align-self: flex-start; height: 26px; padding: 0 9px; border-radius: 7px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
.et-large.on { color: var(--accent-hover); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); cursor: default; }
/* une section (rubrique 2) : choisir, nommer, ses trois efforts */
.et-secs { display: flex; flex-direction: column; gap: 6px; }
.et-sec { padding: 6px 8px 8px; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--line); }
.et-sec.et-courante { box-shadow: inset 0 0 0 1px var(--accent-line); background: color-mix(in srgb, var(--accent-soft) 45%, var(--panel)); }
.et-sec.et-cible { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.et-sec-h { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.et-sec-h .field.text { flex: 1 1 auto; min-width: 0; height: 28px; }
.et-sec-pick { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; }
.et-sec-pick .o { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-strong); background: var(--panel); }
.et-sec-pick.on .o { box-shadow: inset 0 0 0 4px var(--accent); }
.et-sec-pick:hover .o { box-shadow: inset 0 0 0 1.5px var(--accent); }
.et-sec-pick.on:hover .o { box-shadow: inset 0 0 0 4px var(--accent); }
.et-avert { padding: 7px 9px; border-radius: 8px; font-size: 11.5px; line-height: 1.4; color: var(--et-nok-ink); background: var(--et-nok-bg); }
.et-meth { flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.et-meth > b { font-size: 12.5px; }
.et-meth > .hint { flex-basis: 100%; }
.et-plat { display: flex; flex-direction: column; gap: 6px; }

/* les dalles et les prédalles (api_web/plaque_compact.py) : une section, ses quatre moments (X / Y × inf. / sup.) et V */
.et-mom { display: grid; grid-template-columns: 16px minmax(0, 1fr) minmax(0, 1fr); gap: 4px 6px; align-items: center; }
.et-mom .h { font-size: 10.5px; font-weight: 600; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.et-mom .d { font-size: 11.5px; font-weight: 700; color: var(--ink-2); text-align: center; }
.et-mom .vh { font-size: 11px; color: var(--ink-3); padding-left: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.et-mom > .field { height: 28px; min-width: 0; }
/* une couche : son repère, son type, puis le treillis — ou le Ø et l'espacement (le nombre et le Ø) */
.et-piece .et-l1 > .et-ty { flex: 0 0 88px; min-width: 0; }
.et-piece .et-l1 > .et-tr { flex: 1 1 auto; min-width: 0; }
.et-piece .et-l1 > .et-dia { flex: 0 0 64px; min-width: 0; }
.et-piece .et-l1 > .et-e { flex: 1 1 60px; min-width: 52px; }
.et-piece .et-l1 > div > .field { height: 28px; width: 100%; min-width: 0; }
/* la nappe de la direction principale */
.et-princ { flex: none; height: 16px; padding: 0 5px; border-radius: 5px; display: grid; place-items: center; font-size: 10px; font-weight: 700;
  letter-spacing: .03em; color: var(--accent-hover); background: var(--accent-soft); }

/* ------------------------------------------------------------------ les résultats : la poutre, puis un bloc par section */
[data-etabli="compact"] #resultat > .pbody { padding: 0 0 12px; }
.et-rp { display: flex; flex-direction: column; gap: 1px; padding: 11px 14px 9px; }
.et-rp b { font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.et-rp span { font-size: 12px; color: var(--ink-3); }
.et-blocs { display: flex; flex-direction: column; gap: 10px; padding: 0 10px; }
.et-bloc { border: 1px solid var(--et-inc-line); border-radius: 10px; overflow: hidden; background: var(--panel); }
.et-bloc-h { display: flex; align-items: center; gap: 2px; min-height: 38px; padding: 0 4px 0 2px; background: var(--et-inc-bg); color: var(--et-inc-ink); }
.et-bloc-t { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 6px; text-align: left; color: inherit; }
.et-bloc-t svg.i { flex: none; width: 15px; height: 15px; transition: transform .15s ease; opacity: .8; }
.et-bloc.replie .et-bloc-t svg.i { transform: rotate(-90deg); }
.et-bloc-t .n { font-size: 11.5px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.et-bloc-t .e { margin-left: auto; flex: none; font-size: 12px; font-weight: 650; white-space: nowrap; }
.et-tout { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; color: inherit; opacity: .75; }
.et-tout:hover { opacity: 1; background: color-mix(in srgb, currentColor 10%, transparent); }
.et-tout svg.i { width: 15px; height: 15px; }
.et-bloc.ok { border-color: var(--et-ok-line); } .et-bloc.ok .et-bloc-h { background: var(--et-ok-bg); color: var(--et-ok-ink); }
.et-bloc.warn { border-color: var(--et-warn-line); } .et-bloc.warn .et-bloc-h { background: var(--et-warn-bg); color: var(--et-warn-ink); }
.et-bloc.nok { border-color: var(--et-nok-line); } .et-bloc.nok .et-bloc-h { background: var(--et-nok-bg); color: var(--et-nok-ink); }
.et-bloc.replie .et-bloc-c { display: none; }
.et-bloc-ef { padding: 7px 12px 5px; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.et-bloc .els { display: flex; flex-direction: column; }
/* les avertissements d'une section, sous ses vérifications (dalles, prédalles) */
.et-bloc-c > .msg { margin: 0 10px 10px; }
/* une vérification : deux lignes (le nom, la pièce, le taux ; la valeur et sa limite, une jauge fine) */
.et-bloc .el.vc { padding: 7px 12px 8px; gap: 3px; border-bottom: 0; border-top: 1px solid var(--line); }
.el.vc.fixe { cursor: default; }
/* la 1ʳᵉ ligne ne passe JAMAIS à la ligne (site.css le permet aux autres résultats) : la pièce se coupe (…), le taux reste */
.el.vc .l1 { gap: 8px; min-height: 22px; flex-wrap: nowrap; }
.el.vc .l1 b { font-size: 12.5px; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.el.vc .l1 .prof { margin-left: 0; margin-right: 0; min-width: 0; flex: 0 1 auto; font-size: 11.5px; }
.el.vc .l1 .pct { flex: none; min-width: 40px; text-align: right; font-size: 12.5px; font-weight: 650; color: var(--ink); }
.el.vc .l1 .pct.f { color: var(--att); } .el.vc .l1 .pct.v { color: var(--vrf); } .el.vc .l1 .pct.r { color: var(--nok); }
.el.vc .l2 { gap: 10px; }
.el.vc .l2 .cmp { flex: 1 1 auto; min-width: 0; font-size: 11.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.el.vc .l2 .bar { flex: 0 0 36px; height: 3px; }
.et-mot { flex: none; font-size: 11px; font-weight: 650; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.et-mot.p { color: var(--et-ok-ink); background: var(--et-ok-bg); }
.et-mot.v { color: var(--et-warn-ink); background: var(--et-warn-bg); }
.et-mot.r { color: var(--et-nok-ink); background: var(--et-nok-bg); }
.et-mot.j { color: var(--et-just-ink); background: var(--et-just-bg); }
.et-mot.c { color: var(--ink-3); background: var(--bg-sunken); }
/* les dispositions constructives : la ligne, puis la LISTE DE CONTRÔLE dépliée au clic */
.el.vc.et-dispo .l2 svg.i { flex: none; width: 14px; height: 14px; color: var(--ink-3); transition: transform .15s ease; }
.el.vc.et-dispo.ouvert .l2 svg.i { transform: rotate(180deg); }
.el.vc.et-dispo.ouvert { background: var(--panel-2); }
.el.vc.et-dispo .l2 .cmp { white-space: normal; }
.et-obs-l { display: none; flex-direction: column; padding: 2px 8px 8px; background: var(--panel-2); }
.et-obs-l.ouvert { display: flex; }
.et-obs-g { display: flex; align-items: center; gap: 6px; padding: 8px 6px 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.et-obs-g span { min-width: 16px; height: 15px; padding: 0 4px; border-radius: 8px; display: grid; place-items: center; background: var(--bg-sunken); color: var(--ink-2); letter-spacing: 0; font-size: 10px; }
.et-obs-g.r { color: var(--et-nok-ink); } .et-obs-g.v { color: var(--et-warn-ink); } .et-obs-g.j { color: var(--et-just-ink); }
.et-obs { display: flex; align-items: flex-start; gap: 8px; padding: 7px 6px; border-radius: 7px; cursor: pointer; }
.et-obs + .et-obs { box-shadow: 0 -1px 0 var(--line); }
/* une observation conforme : une ligne, en retrait (rien à faire) */
.et-obs.p { padding: 4px 6px; }
.et-obs.p .o1 { font-size: 11.5px; color: var(--ink-2); }
.et-obs.p > .et-pt-e { margin-top: 4px; }
.et-obs:hover { background: var(--panel); }
.et-obs.et-cible { background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent-line); }
.et-obs > .et-pt-e { margin-top: 5px; }
.et-obs .ob { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.et-obs .o1 { display: flex; align-items: baseline; gap: 8px; font-size: 12px; color: var(--ink); line-height: 1.35; }
.et-obs .o1 .t { flex: 1 1 auto; min-width: 0; }
.et-obs .o1 .v { flex: none; font-size: 11.5px; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.et-obs.r .o1 .v { color: var(--et-nok-ink); font-weight: 650; }
.et-obs .o2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 8px; }
.et-obs .o-a { font-size: 11.5px; color: var(--ink-2); line-height: 1.35; }
.et-obs .o-r { font-size: 11px; color: var(--ink-3); line-height: 1.35; }
.et-obs .o3 { display: flex; gap: 6px; }
.et-just { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 7px; font-size: 11.5px; font-weight: 600;
  color: var(--et-warn-ink); background: var(--panel); box-shadow: inset 0 0 0 1px var(--et-warn-line); }
.et-just:hover { background: var(--et-warn-bg); }
.et-just svg.i { width: 13px; height: 13px; }
.et-just.et-dej { color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-strong); }
.et-just.et-dej:hover { color: var(--ink); background: var(--bg); }
.et-obs.et-jouv .o3 { display: none; }
.et-jf { display: flex; flex-direction: column; gap: 6px; margin-top: 3px; cursor: default; }
.et-jf label { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--ink-2); font-weight: 600; }
.et-jf label i { font-weight: 450; color: var(--ink-3); }
.et-jf textarea { width: 100%; min-height: 52px; resize: vertical; border: 1px solid var(--line-strong); border-radius: 8px; padding: 6px 8px; font: inherit;
  font-size: 12.5px; font-weight: 450; color: var(--ink); background: var(--panel); }
.et-jf textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.et-jf-b { display: flex; gap: 6px; }
.ck-crit { display: flex; flex-direction: column; gap: 3px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-2); }
.ck-crit b { color: var(--ink); font-weight: 650; margin-right: 6px; }

/* ------------------------------------------------------------------ « Enregistrer comme note… » */
.et-ranger { flex: none; }
/* la barre du haut gagne ce bouton : « Ouvrir » (un fichier .stab, rare) passe en icône, le fil de la note garde sa place */
@media (max-width: 1599px) { [data-etabli="compact"] .top label.btn[for="ouvrir"] .lbl { display: none; } }
.et-rangement { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(13, 21, 37, .32); }
.et-rg-carte { width: min(420px, calc(100vw - 32px)); background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-2);
  padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.et-rg-h { display: flex; align-items: center; }
.et-rg-h b { margin-right: auto; font-size: 15px; }
.et-rg-l { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
.et-rg-l .field-in { height: 34px; border: 1px solid var(--line-strong); border-radius: 8px; padding: 0 10px; font: inherit; font-weight: 500;
  color: var(--ink); background: var(--panel); }
.et-rg-l .field-in:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.et-rg-aide { font-size: 11.5px; color: var(--ink-3); margin: 0; }
.et-rg-b { display: flex; justify-content: flex-end; gap: 8px; }

/* ------------------------------------------------------------------ tablette (701 à 1 199 px) : la grille de l'établi */
@media (min-width: 701px) and (max-width: 1199px) {
  [data-etabli="compact"] .bench > .panel { border: 1px solid var(--line); border-radius: 12px; }
  [data-etabli="compact"] .bench > .canvas { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
  [data-etabli="compact"] .et-tag, [data-etabli="compact"] .et-dep, [data-etabli="compact"] .et-hist, [data-etabli="compact"] .et-mn-b,
  [data-etabli="compact"] .et-prop, [data-etabli="compact"] .et-tout, [data-etabli="compact"] .et-raz { min-height: 32px; min-width: 32px; }
  [data-etabli="compact"] .et-piece .et-l1 { min-height: 40px; }
  [data-etabli="compact"] .et-barres .b { width: 34px; height: 32px; }
  [data-etabli="compact"] .et-add, [data-etabli="compact"] .et-ret, [data-etabli="compact"] .et-large, [data-etabli="compact"] .et-just { height: 32px; }
  [data-etabli="compact"] .et-sec-pick { width: 32px; height: 32px; }
  [data-etabli="compact"] .et-pt-t.et-pt-chev { width: 32px; }
  [data-etabli="compact"] .et-pt-nom { height: 32px; }
  [data-etabli="compact"] .et-elt-nom { height: 32px; }
  [data-etabli="compact"] .et-elt-b, [data-etabli="compact"] .et-elt-liste .et-mn-b { min-width: 32px; height: 32px; }
}
@media (min-width: 701px) and (max-width: 1199px) and (orientation: landscape) {
  [data-etabli="compact"] .bench:not(.sans-g):not(.sans-d) { grid-template-columns: 340px minmax(0, 1fr); grid-template-rows: minmax(0, 3fr) minmax(0, 2fr); }
  [data-etabli="compact"] .flyout { left: calc(340px + 2 * var(--g)); }
}

/* ------------------------------------------------------------------ téléphone : les onglets Données · Dessin · Résultat */
@media (max-width: 700px) {
  [data-etabli="compact"] .et-ranger .lbl { display: none; }
  [data-etabli="compact"] .et-pt-l, [data-etabli="compact"] .et-pt-t { min-height: 46px; height: auto; }
  /* le chevron et le NOM de l'élément ouvert, au doigt (le nom s'écrit en 16 px : .bench input, site.css) */
  [data-etabli="compact"] .et-pt-t.et-pt-chev { width: 40px; }
  [data-etabli="compact"] .et-pt-nom { height: 40px; min-width: 48px; }
  /* la ligne de l'élément, au doigt : le nom (16 px, .bench input de site.css), la liste, copier, supprimer à 40 px */
  [data-etabli="compact"] .et-elt-nom { height: 40px; min-width: 48px; }
  [data-etabli="compact"] .et-elt-b, [data-etabli="compact"] .et-elt-liste .et-mn-b { min-width: 40px; height: 40px; }
  [data-etabli="compact"] .et-elt-i .dim { font-size: 13px; }
  [data-etabli="compact"] .et-piece .et-l1 { min-height: 46px; }
  [data-etabli="compact"] .et-piece .et-l1 > .field { height: 36px; flex-basis: 58px; }
  [data-etabli="compact"] .et-piece .et-l1 > .field.select { flex-basis: 84px; }
  [data-etabli="compact"] .et-piece .et-l1 > div > .field, [data-etabli="compact"] .et-mom > .field { height: 36px; }
  [data-etabli="compact"] .et-piece .et-l1 > .et-ty { flex-basis: 92px; }
  [data-etabli="compact"] .et-tag { min-width: 40px; height: 36px; }
  [data-etabli="compact"] .et-dep, [data-etabli="compact"] .et-hist, [data-etabli="compact"] .et-mn-b, [data-etabli="compact"] .et-prop, [data-etabli="compact"] .et-tout,
  [data-etabli="compact"] .et-raz { width: 40px; height: 40px; }
  [data-etabli="compact"] .et-mn-b { opacity: 1 !important; }
  [data-etabli="compact"] .et-mn-l button { height: 44px; font-size: 14px; }
  [data-etabli="compact"] .et-add, [data-etabli="compact"] .et-ret, [data-etabli="compact"] .et-large, [data-etabli="compact"] .et-just,
  [data-etabli="compact"] .et-pt-add { height: 40px; font-size: 13px; }
  [data-etabli="compact"] .et-barres { gap: 5px; }
  [data-etabli="compact"] .et-barres .b { width: 40px; height: 40px; font-size: 13px; }
  [data-etabli="compact"] .et-sec-pick { width: 40px; height: 40px; }
  [data-etabli="compact"] .et-sec-h .field.text { height: 36px; }
  [data-etabli="compact"] #donnees .sechd { height: 46px; }
  [data-etabli="compact"] #donnees .rows .seg.full button { min-height: 38px; }
  [data-etabli="compact"] .et-piece .et-det { padding-left: 8px; }
  [data-etabli="compact"] .panel .phead .pcoll { display: none; }
  /* « Annuler » et « Rétablir » restent à portée au téléphone : l'en-tête des données s'affiche (la charte le cache) */
  [data-etabli="compact"] .panel.left .phead { display: flex; height: 44px; }
  [data-etabli="compact"] .et-bloc-t, [data-etabli="compact"] .et-bloc-h { min-height: 46px; height: auto; }
  [data-etabli="compact"] .et-bloc .el.vc { padding: 10px 14px; }
  [data-etabli="compact"] .el.vc .l2 .cmp { white-space: normal; }
  [data-etabli="compact"] .et-obs { padding: 10px 6px; }
  [data-etabli="compact"] .et-jf textarea { font-size: 16px; }
  [data-etabli="compact"] .et-eff span { padding: 4px 8px; }
  /* au doigt, 36 px au moins : l'onglet d'une section au nom d'une lettre (« A »), le bouton « ajuster » */
  [data-etabli="compact"] .ctool .seg button { min-width: 36px; }
  [data-etabli="compact"] .zoom .zpct { width: 36px; }
}

/* ------------------------------------------------------------------ les JUSTIFICATIONS de la bibliothèque (api_web/fiches.py) */
/* à gauche, sous l'arborescence : une ligne par fiche (titre, valeur), son menu ⋯ ; un clic ouvre la vue au centre */
.et-fiches { border-top: 1px solid var(--line); margin-top: 6px; }
.et-fi { display: flex; align-items: center; min-height: 40px; padding: 0 6px 0 8px; border-bottom: 1px solid var(--line); }
.et-fi-t { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 6px; text-align: left; border-radius: 7px; color: var(--ink); }
.et-fi-t:hover { background: var(--bg); }
.et-fi-t svg.i { flex: none; width: 15px; height: 15px; color: var(--accent); }
.et-fi-t .t { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.et-fi-t .nom { font-size: 12.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.et-fi-t .dim { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.et-fi-t .dim sub { font-size: 8.5px; }
@media (hover: hover) { .et-fi:not(:hover) .et-mn-b:not([aria-expanded="true"]) { opacity: 0; } }
/* au centre, la vue « Justification » : la fiche est un bloc (pas un dessin), qui défile si elle est longue */
[data-etabli="compact"] .sheet .draw.bloc { overflow: auto; place-items: start center; }
.et-fiche { width: 100%; max-width: 980px; margin: 0 auto; padding: 10px 14px 14px; font-size: 12.5px; color: var(--ink); display: flex; flex-direction: column; gap: 10px; }
.et-fiche-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.et-fiche-ht { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.et-fiche-ht .k { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.et-fiche-ht b { font-size: 15px; }
.et-fiche-ht .ph { font-size: 12px; color: var(--ink-2); line-height: 1.35; }
.et-fiche-v { flex: none; text-align: right; }
.et-fiche-v b { display: block; font-size: 26px; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.et-fiche-v b small { font-size: 13px; color: var(--ink-3); margin-left: 4px; font-weight: 600; letter-spacing: 0; }
.et-fiche-v span { font-size: 12.5px; font-weight: 650; color: var(--ink-2); }
.et-fiche-t { width: 100%; border-collapse: collapse; font-size: 12px; }
.et-fiche-t td { padding: 5px 8px 5px 0; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.35; }
.et-fiche-t td.s { font-weight: 650; white-space: nowrap; width: 84px; }
.et-fiche-t td.s sub { font-size: 9px; }
.et-fiche-t td.nm { color: var(--ink-2); width: 30%; }
.et-fiche-t td.n { text-align: right; font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
.et-fiche-t td.n .u { color: var(--ink-3); font-weight: 500; font-size: 11px; }
.et-fiche-t td.rg { color: var(--ink-3); font-size: 11px; padding-left: 10px; }
.et-fiche-t tr.maj td { background: var(--accent-soft); color: var(--ink); }
.et-fiche-t tr.maj td.nm { color: var(--accent-hover); font-weight: 650; }
.et-fiche-av { display: flex; gap: 7px; align-items: flex-start; padding: 6px 10px; border-radius: 8px; font-size: 12px; line-height: 1.4;
  color: var(--vrf-encre, #8A5A00); background: var(--vrf-fond, #FFF2D6); }
.et-fiche-av svg.i { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.et-fiche-x .k { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; margin-bottom: 4px; }
.et-fiche-xc { overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.et-fiche-xt { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12px; font-variant-numeric: tabular-nums; }
.et-fiche-xt th, .et-fiche-xt td { height: 30px; padding: 0 8px; white-space: nowrap; border-bottom: 1px solid var(--line); text-align: right; }
.et-fiche-xt thead th { background: var(--panel-2); color: var(--ink-2); font-weight: 650; font-size: 11.5px; }
.et-fiche-xt thead th sub { font-size: 8.5px; }
.et-fiche-xt th.nm { text-align: left; font-weight: 700; }
.et-fiche-xt tbody tr.on th.nm { color: var(--accent-hover); box-shadow: inset 3px 0 0 var(--accent); }
.et-fiche-xt td.col, .et-fiche-xt tr.on td { background: color-mix(in srgb, var(--accent-soft) 70%, var(--panel)); }
.et-fiche-xt td.cur { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-soft); font-weight: 750; }
.et-fiche-x .src, .et-fiche-s .src { display: inline-flex; gap: 5px; align-items: flex-start; font-size: 11px; color: var(--ink-3); line-height: 1.4; margin-top: 4px; }
.et-fiche-x .src svg.i, .et-fiche-s svg.i { width: 12px; height: 12px; flex: none; margin-top: 2px; }
.et-fiche-p { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 11px; color: var(--ink-3); }
.et-fiche-s { display: flex; flex-wrap: wrap; gap: 3px 14px; }
@media (max-width: 700px) {
  [data-etabli="compact"] .et-fi, [data-etabli="compact"] .et-fi-t { min-height: 46px; height: auto; }
  .et-fiche-h { flex-direction: column; gap: 6px; }
  .et-fiche-v { text-align: left; }
}

/* ------------------------------------------------------------------ nappes de dalle (api_web/dalle_nappes.py, DALLES_FUSION § 3) */
/* Rubrique « Armatures » d'une dalle : la nappe inférieure, puis la supérieure. Chaque nappe : son titre, les segments du
   mode (Treillis soudé · Barres · Treillis + renforts), le réglage du treillis (un sélecteur, l'orientation des porteurs,
   la ligne « X : Ø10 e 100 · Y : … »), l'avertissement d'une nappe incohérente ; puis le détail de chaque direction
   (.et-grp, inchangé). Une valeur qui se LIT (.et-lu) prend la place du champ qu'elle remplace. */
.et-nap { display: flex; flex-direction: column; gap: 4px; }
.et-nap + .et-nap { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line-strong); }
.et-nap-h { display: flex; align-items: center; gap: 8px; min-height: 26px; padding: 0 2px 0 4px; }
.et-nap-h .t { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink); }
.et-nap > .seg.full button { font-size: 11.5px; padding: 0 6px; }
.et-nap > .row2 { margin-top: 2px; }
.et-nap > .row2 > .field.select { min-width: 0; }
.et-nap > .row2 > .seg button { padding: 0 8px; }
.et-nap-xy { padding: 0 4px 2px; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.et-nap-avert { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.et-nap-avert > span { flex: 1 1 160px; min-width: 0; }
.et-nap-btn { flex: none; height: 26px; padding: 0 9px; border-radius: 7px; font-size: 11.5px; font-weight: 650; color: var(--et-nok-ink);
  background: var(--panel); box-shadow: inset 0 0 0 1px var(--et-nok-line); }
.et-nap-btn:hover { background: var(--et-nok-line); }
.et-nap > .et-grp + .et-grp { margin-top: 4px; padding-top: 4px; }
/* une valeur lue dans la ligne d'une couche (le type et la désignation de la base d'un treillis : réglés par la nappe) */
.et-lu { display: inline-flex; align-items: center; height: 28px; max-width: 100%; padding: 0 4px; font-size: 12px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.et-piece .et-l1 > .et-ty > .et-lu { color: var(--ink-3); }
.et-piece .et-det .row .et-lu { height: 30px; justify-self: end; font-weight: 600; }
@media (min-width: 701px) and (max-width: 1199px) {
  [data-etabli="compact"] .et-nap-btn { height: 32px; }
}
@media (max-width: 700px) {
  [data-etabli="compact"] .et-nap-h { min-height: 36px; }
  [data-etabli="compact"] .et-nap > .seg.full button, [data-etabli="compact"] .et-nap > .row2 > .seg button { height: 36px; font-size: 12.5px; }
  [data-etabli="compact"] .et-nap-btn { height: 40px; font-size: 13px; }
  [data-etabli="compact"] .et-lu { height: 36px; font-size: 13px; }
}