/* Site « Stab Méthodes » : ce que le VRAI site ajoute à la charte des maquettes (css/charte.css, copie conforme de
   site/maquettes/charte.css). Les champs sont de vrais champs, les sections se replient, le moteur se charge. */

a { color: inherit; text-decoration: none; }
.brand { padding: 2px 0 12px; }

/* ---------------------------------------------------------------- navigation */
.navitem[data-bientot], .navitem.bientot { opacity: .45; cursor: default; }
.navitem.bientot .tag { margin-left: auto; height: 18px; font-size: 10px; }
.modal[hidden], .toast[hidden] { display: none !important; }
.modal:not([hidden]) { display: grid; }
.show-modules .modpanel { display: flex; }

/* ---------------------------------------------------------------- l'établi : barre du haut */
/* le fil d'Ariane cède la place (un chantier au nom long glissait le nom de la note sous « Brouillon ») */
.top .crumbs { overflow: hidden; flex: 0 1 auto; }
#fil-chantier { min-width: 0; max-width: 24vw; overflow: hidden; text-overflow: ellipsis; }
.crumbs .nomnote { flex: 0 1 260px; width: auto; min-width: 110px; text-overflow: ellipsis; }   /* coupé : « … », pas au milieu d'une lettre */
.crumbs a { display: grid; place-items: center; color: var(--ink-3); }
.crumbs a:hover { color: var(--ink); }
.nomnote { border: 1px solid transparent; border-radius: 6px; background: transparent; font-weight: 650; color: var(--ink); padding: 2px 6px;
  min-width: 120px; width: 260px; outline: 0; }
.nomnote:hover { border-color: var(--line); }
.nomnote:focus { border-color: var(--accent); background: var(--panel); }
/* ---------------------------------------------------------------- l'enregistrement de la note (.et-enr, #et-alerte) */
/* Visible aux TROIS formats : aucune règle ne cache .et-enr, son texte (.et-enr-txt) ni son état (.et-enr-etat), à
   aucune largeur. L'ancien indicateur (.saved .txt) était caché par la charte sous 1 360 px : un échec d'enregistrement
   n'y laissait qu'une coche grise, muette (verifier_site.js, filtre « enregistrement » ; tests/test_site_web.py lit cette
   feuille). Seul le mot « Enregistré · » cède sous 1 100 px (tablette, téléphone) : l'heure et l'icône disent la même
   chose ; un échec, lui, s'écrit en entier dans la barre du haut — au téléphone, sa raison (.et-enr-raison) cède, elle
   seule (voir le bloc du téléphone). */
.et-enr { display: inline-flex; align-items: center; gap: 5px; flex: none; font-size: 12px; line-height: 16px; color: var(--ink-3); white-space: nowrap; }
.et-enr-ic { display: inline-flex; flex: none; }
.et-enr-ic svg.i { width: 15px; height: 15px; }
.et-enr-ic svg.i:not(.et-i-neuf) { display: none; }
.et-enr[data-enr="ok"] .et-enr-ic svg.i, .et-enr[data-enr="echec"] .et-enr-ic svg.i { display: none; }
.et-enr[data-enr="ok"] .et-enr-ic svg.et-i-ok, .et-enr[data-enr="echec"] .et-enr-ic svg.et-i-echec { display: block; }
.et-enr[data-enr="neuf"] .et-enr-ic { color: var(--ink-4); }
.et-enr[data-enr="ok"] .et-enr-ic { color: var(--ok-ink, #15803d); }
/* l'échec : rouge et gras, sur un fond rouge pâle — il ne s'efface pas tant qu'une écriture n'a pas réussi */
.et-enr[data-enr="echec"] { padding: 2px 8px 2px 6px; border-radius: 6px; background: color-mix(in srgb, var(--nok) 10%, transparent); }
.et-enr[data-enr="echec"] .et-enr-ic, .et-enr[data-enr="echec"] .et-enr-txt { color: var(--nok); font-weight: 650; }
/* l'état et la raison prennent la couleur et la taille du texte : la charte peint chaque <span> de l'en-tête du téléphone
   en gris (« .mtop .t span », 0-2-1) — mesuré : « Non enregistré » s'y écrivait en gris sur le fond rouge pâle */
.et-enr .et-enr-txt > .et-enr-etat, .et-enr .et-enr-txt > .et-enr-raison { color: inherit; font-size: inherit; }
/* le message d'un échec (ou d'une mémoire illisible gardée à part) : posé sous la barre du haut, il reste jusqu'à ce
   qu'on le ferme ; « Exporter .stab » y est à portée */
.et-alerte { position: fixed; z-index: 48; top: calc(var(--top-h) + 10px); left: 50%; transform: translateX(-50%); width: min(600px, calc(100vw - 24px));
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border-radius: 12px; background: var(--panel); color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--nok) 50%, var(--line)); box-shadow: var(--shadow-pop); font-size: 12.5px; line-height: 1.45; }
.et-alerte[hidden], .et-alerte [hidden] { display: none !important; }
.et-alerte-ic { display: inline-flex; flex: none; color: var(--nok); }
.et-alerte-ic svg.i { width: 18px; height: 18px; }
.et-alerte-txt { flex: 1; min-width: 0; }
.et-alerte .btn { flex: none; }
.et-alerte.et-info { border-color: var(--accent-line); }
.et-alerte.et-info .et-alerte-ic { color: var(--accent); }
/* l'accueil : la mémoire des notes illisible, ou sa copie gardée à part */
.et-memoire { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: var(--r-lg); background: color-mix(in srgb, var(--nok) 7%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--nok) 40%, var(--line)); color: var(--ink-2); font-size: 12.5px; line-height: 1.5; }
.et-memoire[hidden] { display: none !important; }
.et-memoire b { color: var(--nok); }
.et-mem-l { display: flex; align-items: center; gap: 12px; }
.et-mem-l + .et-mem-l { padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--nok) 20%, var(--line)); }
.et-mem-l p { flex: 1; min-width: 0; }
.et-mem-l .btn { flex: none; }
/* au doigt (tablette, téléphone) : des boutons de 44 px */
@media (pointer: coarse) {
  .et-alerte .btn, .et-mem-l .btn { height: 44px; }
  .et-alerte .btn.icon { width: 44px; }
}
.calcule { font-size: 11.5px; color: var(--ink-3); margin-right: auto; display: inline-flex; align-items: center; gap: 6px; }
.calcule.on::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--accent-line); border-top-color: var(--accent);
  animation: tourne .7s linear infinite; }
.phead .calcule + .pcoll { margin-left: 0; }
@keyframes tourne { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- les champs */
/* la valeur saisie s'écrit à l'encre, même quand l'étiquette qui l'entoure est grise (.trio label) */
.field input, .field select { color: var(--ink); }
.field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.field.erreur { border-color: var(--nok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nok) 18%, transparent); }
.field.locked svg.i { width: 13px; height: 13px; color: var(--ink-4); flex: none; }
.field.select { position: relative; padding-right: 26px; }
.field.select select { appearance: none; -webkit-appearance: none; border: 0; outline: 0; background: transparent; width: 100%; height: 100%;
  font-weight: 500; font-size: 13px; cursor: pointer; text-overflow: ellipsis; }
.field.select svg.i { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.field.select select option { color: var(--ink); background: var(--panel); }
.row > label .aide { display: inline-grid; cursor: help; }
.field.area { height: auto; padding: 6px 8px; align-items: stretch; }
.field.area textarea { border: 0; outline: 0; background: transparent; width: 100%; resize: vertical; color: var(--ink);
  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
label.fichier { width: max-content; }
.case { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; padding: 2px 0; }
.case input { width: 15px; height: 15px; accent-color: var(--accent); flex: none; }
/* l'état VERROUILLÉ des briques (desactive=True) se voit : la charte n'en avait que pour un champ, et un segment
   désactivé ressemblait trait pour trait à un segment actif (les couleurs de .seg button passent devant le grisé du
   navigateur) ; la valeur retenue reste lisible */
.seg.locked { background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); }
.seg.locked button { cursor: not-allowed; }
.seg.locked button:not(.on) { color: var(--ink-4); }
.seg.locked button.on { color: var(--ink-2); background: var(--panel-2); box-shadow: 0 0 0 1px var(--line-strong); }
.case:has(> input:disabled) { color: var(--ink-3); cursor: not-allowed; }
.field.locked textarea { color: var(--ink-2); }
.rows .seg.full button { height: 28px; }
/* importer la météo du lieu (commun.bouton_meteo) : un bouton sur toute la largeur du cadre ; pendant la récupération, il le
   dit (« Récupération de la météo… », l'icône tourne) ; grisé quand la récupération est impossible (le message dessous) */
.meteo-bt { padding: 4px 0 2px; }
.btn.meteo { width: 100%; justify-content: center; height: 34px; color: var(--accent-hover); border-color: var(--accent-line); background: var(--accent-soft); box-shadow: none; }
.btn.meteo:hover:not(:disabled) { background: color-mix(in srgb, var(--accent-soft) 70%, var(--accent-line)); }
[data-theme="dark"] .btn.meteo { color: var(--accent); }
.btn.meteo.sm { height: 30px; background: var(--panel); color: var(--ink-2); border-color: var(--line-strong); }
.btn.meteo:disabled { cursor: not-allowed; }
.btn.meteo.attente { cursor: progress; opacity: .85; }
.btn.meteo.attente svg.i { animation: tourne 1.2s linear infinite; }
.btn.meteo > span { overflow: hidden; text-overflow: ellipsis; }
.msg { font-size: 12px; color: var(--ink-2); padding: 8px 16px; border-top: 1px solid var(--line); line-height: 1.4; }
.msg.grave { color: var(--nok); font-weight: 600; }

/* les sections repliables : le résumé quand elles sont fermées */
.sec:not(.open) > .rows { display: none; }
.sec.open > .sechd .sum { visibility: hidden; }
.sec:not(.open) > .sechd svg.i { transform: rotate(-90deg); }
.sechd { user-select: none; }

/* les éléments de la note (plusieurs garde-corps, plusieurs poutres) */
.elements { padding: 8px 8px 10px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 1px; }
.elements .nl-h { display: flex; align-items: center; padding: 2px 8px 6px; }
.elements .nl-h .kicker { margin-right: auto; }
.elements .ni .x { display: none; color: var(--ink-3); width: 22px; height: 22px; border-radius: 6px; place-items: center; }
.elements .ni:hover .x { display: grid; }
.elements .ni .x:hover { background: var(--bg-sunken); color: var(--ink); }
.elements .ni .x svg.i { width: 13px; height: 13px; }
.nl-add { display: flex; align-items: center; gap: 6px; padding: 6px 8px; font-size: 12.5px; font-weight: 600; color: var(--accent-hover); cursor: pointer; border-radius: 8px; }
.nl-add:hover { background: var(--accent-soft); }
.nl-add svg.i { width: 14px; height: 14px; }

/* ---------------------------------------------------------------- le résultat, les volets */
.resultat { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.attente { padding: 18px 16px; color: var(--ink-3); font-size: 12.5px; }
.pk-vide { padding: 16px; color: var(--ink-3); font-size: 12.5px; }
.picker .filters:empty { display: none; }   /* les armatures n'ont pas de familles à filtrer : pas de bande vide */
.fchip { font-family: inherit; }
.el { transition: background .12s; }
.el:hover { background: var(--bg); }
.el.gov:hover { background: var(--accent-soft); }
/* le nom de la vérification et la pièce : si les deux ne tiennent pas sur une ligne, la pièce passe dessous, à droite,
   entière (« RHS 50×25×2,… » cachait l'épaisseur des lisses d'un garde-corps, au PC) */
.el .l1 { flex-wrap: wrap; row-gap: 3px; }

/* ---------------------------------------------------------------- le démarrage du moteur */
.demarrage { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.demarrage[hidden] { display: none; }
.demarrage .carte { width: 360px; background: var(--panel); border: 1px solid var(--frame); border-radius: 16px; box-shadow: var(--shadow-pop);
  padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 8px; }
.demarrage .logo { width: 34px; height: 34px; margin-bottom: 4px; }
.demarrage b { font-size: 14px; }
.demarrage span { color: var(--ink-2); font-size: 12.5px; }
.demarrage small { color: var(--ink-3); font-size: 11.5px; }
.demarrage .barre { height: 4px; border-radius: 4px; background: var(--bg-sunken); overflow: hidden; margin: 4px 0; }
.demarrage .barre i { display: block; height: 100%; width: 35%; border-radius: 4px; background: var(--accent); animation: glisse 1.3s ease-in-out infinite; }
.demarrage.erreur .barre { display: none; }
.demarrage.erreur span { color: var(--nok); white-space: pre-wrap; }
@keyframes glisse { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 50; background: var(--ink); color: var(--panel); padding: 9px 14px;
  border-radius: 10px; font-size: 12.5px; font-weight: 600; box-shadow: var(--shadow-pop); max-width: 560px; }
.toast.erreur { background: var(--nok); color: #fff; }

/* ---------------------------------------------------------------- l'accueil */
.page.accueil { grid-template-columns: minmax(0, 1fr) 320px; }
.accueil .col { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.accueil .hello { display: flex; align-items: center; gap: 16px; }
.accueil .hello p { margin-top: 4px; }
.accueil .famille { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.accueil .tile .nm { display: block; flex: 1; font-size: 13px; font-weight: 650; color: var(--ink); line-height: 1.3; }
/* la BIBLIOTHÈQUE d'une famille (docs/site/BIBLIOTHEQUES.md § 2.1, révision du 09/11/2026, demande de l'ingénieur) : une
   carte ÉTROITE et HAUTE, à GAUCHE du bloc de sa famille, distincte d'une tuile de calcul au premier regard (contour et teinte
   de l'accent, l'icône d'un livre). Le bloc .tiles.fam-b est la grille des tuiles de la charte (mêmes colonnes que les
   familles sans bibliothèque : une source) ; la carte en prend la PREMIÈRE colonne, les modules les SUIVANTES, dans leur
   propre grille (.fam-b > .tiles, en sous-grille : les bords de leurs tuiles tombent sur les lignes des autres familles, dont
   la première colonne est sous la carte — un seul rythme vertical pour toute la section). Aucun module ne passe sous la
   carte : leur grille ne commence qu'à la deuxième colonne, quel que soit leur nombre. La carte ne se mesure pas
   (container-type: size) : la hauteur de la rangée est celle du bloc des modules, la carte la prend (plancher : deux rangées
   de tuiles, 2 × 56 + 8 px) ; et sa mise en page suit la hauteur reçue (requête de conteneur) : deux rangées (PC large, quatre
   colonnes) → les rubriques sur deux colonnes ; trois rangées (tablette, petit PC) → une seule colonne. */
.accueil .fam-b > .tiles { grid-column: 2 / -1; grid-template-columns: subgrid; }
/* (relecture du 09/11/2026) une famille de PEU de modules (une seule rangée, plus basse que le plancher de la carte) : ses
   tuiles gardent la hauteur d'une tuile, en haut du bloc — sans cela, la rangée unique s'étirait à 120 px */
.accueil .fam-b > .tiles { align-content: start; }
.accueil .tile.biblio { container: bib / size; min-height: 120px; padding: 0; align-items: stretch; border-color: var(--accent-line);
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent-soft) 75%, var(--panel)), var(--panel) 85%); }
.accueil .tile.biblio:hover { border-color: var(--accent); }
.accueil .tile.biblio .bib-c { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; min-width: 0; }
.accueil .tile.biblio .bib-h { display: flex; align-items: center; gap: 10px; min-width: 0; }
.accueil .tile.biblio .modic { background: var(--accent); color: var(--on-accent); }
.accueil .tile.biblio .nm { flex: 1; min-width: 0; color: var(--accent-hover); font-size: 14px; font-weight: 700; line-height: 1.25; }
.accueil .tile.biblio .nm span { display: block; color: inherit; font-size: inherit; line-height: inherit; }
.accueil .tile.biblio .nm .bib-k { font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.accueil .tile.biblio .bib-r { list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: repeat(3, auto);
  grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px 10px; }
.accueil .tile.biblio .bib-r li { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; line-height: 16px; color: var(--ink-2); white-space: nowrap; }
.accueil .tile.biblio .bib-r li span { display: inline; font-size: inherit; line-height: inherit; color: inherit; }
.accueil .tile.biblio .bib-r svg.i { flex: none; width: 13px; height: 13px; color: var(--accent-hover); opacity: .75; }
@container bib (min-height: 150px) {
  .accueil .tile.biblio .bib-c { gap: 12px; padding: 14px; }
  .accueil .tile.biblio .bib-r { grid-template-rows: none; grid-auto-flow: row; gap: 5px; }
}
.accueil .tile.bientot { opacity: .62; box-shadow: none; }
.accueil .tile.bientot:hover { border-color: var(--line); box-shadow: none; }
.accueil .tile .tag { flex: none; display: inline-flex; font-size: 10px; height: 18px; }
/* « Reprendre » : des cartes basses, la vignette à gauche. Les grandes cartes de la maquette (vignette de 150 px au-dessus
   du nom) prenaient la moitié de l'écran pour six notes ; une ligne de 70 px dit la même chose (nom, module, lieu, date,
   taux) et laisse les modules à portée. Mesuré par verifier_site.js (« Reprendre » compacte). */
.accueil .resume { margin-bottom: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.accueil .rcard { cursor: pointer; flex-direction: row; align-items: stretch; height: 70px; }
.accueil .rcard:hover { border-color: var(--accent-line); box-shadow: var(--shadow-2); }
.accueil .rcard .thumb { flex: none; width: 84px; height: auto; padding: 6px; border-bottom: 0; border-right: 1px solid var(--line); }
.accueil .rcard .thumb svg { width: 100% !important; height: 100% !important; }
.accueil .rcard .body { flex: 1; min-width: 0; padding: 8px 10px 8px 12px; gap: 2px; justify-content: center; }
.accueil .rcard .t { font-size: 13px; line-height: 1.3; }
.accueil .rcard .m { font-size: 11.5px; line-height: 1.35; gap: 4px; }
.accueil .rcard .ou { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.accueil .rcard .m .chip { margin-left: auto; height: 18px; font-size: 10.5px; min-width: 0; padding: 0 6px; }
.accueil .rcard .supp { margin-left: 4px; color: var(--ink-4); display: grid; }
.accueil .rcard .supp:hover { color: var(--nok); }
.vide { padding: 22px; border: 1px dashed var(--line-strong); border-radius: var(--r-lg); color: var(--ink-3); text-align: center; grid-column: 1 / -1; }
.vide b { color: var(--ink-2); display: block; margin-bottom: 4px; }
.chantier { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.chantier:first-child { border-top: 0; }
.chantier .t { flex: 1; min-width: 0; }
.chantier .t b { display: block; font-weight: 650; }
.chantier .t span { color: var(--ink-3); font-size: 12px; }
.chantier .nb { font-weight: 650; color: var(--ink-2); white-space: nowrap; }
.note-locale { display: flex; flex-direction: column; gap: 8px; }
.note-locale p { color: var(--ink-2); font-size: 12.5px; line-height: 1.5; }
.mrow3 input { height: 34px; border: 1px solid var(--line-strong); border-radius: 8px; padding: 0 10px; background: var(--panel); outline: 0; }
.mrow3 input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.btn:disabled { opacity: .5; cursor: default; }

/* ---------------------------------------------------------------- impression : le dessin et le résultat */
@page { size: A4 landscape; margin: 9mm; }
@media print {
  .nav, .modpanel, .top .btn, .top label.btn, .pcoll, .ctool, .panel.left, .demarrage, #volets, .toast, .top .et-enr, .et-alerte { display: none !important; }
  body, .main { background: #fff; }
  .app.rail { grid-template-columns: 1fr; }
  .top { height: auto; padding: 0 0 6px; border: 0; }
  /* le dessin et le résultat côte à côte, sur une page */
  .bench { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 8px; height: auto; overflow: visible; }
  .canvas, .panel.right { position: static; width: auto !important; box-shadow: none; inset: auto; }
  .canvas { display: block; padding: 0; background: none; }
  .stage { display: block; padding: 0; }
  .sheet { break-inside: avoid; height: auto; box-shadow: none; }
  .sheet .draw { display: block; padding: 4px 10px 8px; }
  .sheet .draw svg { width: 100% !important; height: auto !important; max-height: 150mm; }
  .pbody { overflow: visible; }
  .el { padding-top: 6px; padding-bottom: 7px; }
}

/* ---------------------------------------------------------------- la poutre : sections, lits, étriers */
.secard .sh2 .indice { min-width: 22px; height: 22px; padding: 0 5px; }
.secard .sh2 .pct { margin-left: auto; }
.secard .sh2 .moins { margin-left: 4px; }
.lit { grid-template-columns: 46px minmax(0, 1fr) minmax(0, 1fr) 24px; }
.lit .field { height: 32px; }
.moins { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; color: var(--ink-3); }
.moins:hover { background: var(--bg-sunken); color: var(--nok); }
.moins svg.i { width: 13px; height: 13px; }
button.addrow { justify-content: flex-start; width: max-content; }

/* ================================================================ les trois formats de l'établi
   Une seule page ; seule la disposition change (js/etabli.js ne connaît que les onglets du téléphone) :
   - PC, 1 200 px et plus : les cadres flottants de la maquette (charte) ;
   - tablette, 701 à 1 199 px : la toile en haut sur toute la largeur, les deux cadres dessous (portrait) ; en paysage,
     la toile à droite sur toute la hauteur, les données au-dessus du résultat à gauche. Les cadres flottants y
     écrasaient la toile (62 px à 820 px de large, 450 px à 1 180) ; la barre du haut ne se replie en icônes que
     jusqu'à 1 100 px ;
   - téléphone, 700 px et moins : l'en-tête, les onglets et la barre du bas de la maquette (.mtop, .mtabs, .mbar). */

/* ---------------------------------------------------------------- partout : un champ de TEXTE n'a pas de chiffres tabulaires */
/* la charte les donne à tous les champs ; le trait d'union d'Inter y prend la largeur d'un chiffre (10,4 px au lieu de
   7,4 en 16 px) et un nom s'écrivait « Garde - corps 1 » */
.field.text input, .field.area textarea { font-variant-numeric: normal; }

/* ---------------------------------------------------------------- partout : les lettres grecques gardent leur casse */
.gr { text-transform: none; }
.sheet .stitle b { text-transform: uppercase; }

/* ---------------------------------------------------------------- la feuille : titre, légende, phrase, cartouche */
/* la légende de CHAQUE vue se lit en entier (la charte la cachait sous 1 360 px, et la première vue la remplaçait par
   la phrase) : elle passe à la ligne plutôt que d'être coupée */
.sheet { container: feuille / inline-size; }
.sheet .stitle { flex-wrap: wrap; row-gap: 2px; white-space: normal; }
.sheet .stitle b { flex: none; }
.sheet .stitle .leg, .sheet .stitle .scale { display: inline-block; }
.sheet .stitle .leg { flex: 1 1 14em; min-width: 0; overflow: visible; text-overflow: clip; white-space: normal; line-height: 1.35; color: #5B6575; }
.sheet .sphrase { padding: 3px 16px 0; font-size: 11.5px; line-height: 1.4; color: #4A5568; }
.sansvue { padding: 40px 18px; color: var(--ink-3); font-size: 13px; text-align: center; }
.bench.sans-vue .zoom { display: none; }
/* le cartouche : le nom de la note cède la place (points de suspension), jamais l'indice ni la date ; il ne
   s'efface plus jusqu'à zéro (à 1 024 px, « Note » et « Chantier » se chevauchaient) */
.cart > div { flex: none; }
.cart > div:first-child { flex: 1 1 0; min-width: 6em; }
.cart > div:nth-child(2) { flex: 0 1 auto; min-width: 4.5em; max-width: 34%; }
.cart > div > span, .cart > div > b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart .mark span { white-space: nowrap; }
@container feuille (max-width: 640px) { .cart > div { padding: 6px 9px; } .cart .mark span { display: none; } }
@container feuille (max-width: 440px) { .cart .ind { display: none; } }

/* le contenu de la vue : un dessin se centre ; un BLOC (un tableau) remplit la vue, son contenu en haut à gauche, et
   défile dedans — centré, il sortait de la feuille par la gauche au téléphone. « stretch » et non « start » : un
   module qui place son tableau en position absolue (inset) le verrait sinon réduit à sa hauteur propre, et sa zone
   qui défile à zéro (le tableau des armatures disparaissait en tablette) */
.sheet .draw { overflow: hidden; }
.sheet .draw > :not(svg) { justify-self: stretch; align-self: stretch; min-width: 0; max-width: 100%; overflow: auto; }
@media (min-width: 701px) {
  .sheet .draw { grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
  .sheet .draw > :not(svg) { max-height: 100%; }
}

/* ---------------------------------------------------------------- le zoom et le plein écran de la toile */
/* la barre de la toile : les vues au milieu, le zoom à droite ; trop de vues pour la largeur, elles défilent (sept
   vues de soudures poussaient le zoom sous le cadre du résultat, à 1 180 px) */
.ctool { grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(max-content, 1fr); }
.ctool > .seg { min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.ctool > .seg::-webkit-scrollbar { display: none; }
.ctool > .seg button { flex: none; }
.ctool > .seg.defile { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.ctool .zoom { display: flex; }
.zoom button { width: 30px; height: 28px; }
.zoom button:hover { background: var(--bg); color: var(--ink); }
.zoom .zpct { width: auto; min-width: 50px; padding: 0 6px; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.zoom svg.i { width: 16px; height: 16px; }
.zoom .zplein svg.i + svg.i, .bench.plein .zoom .zplein svg.i:first-child { display: none; }
.bench.plein .zoom .zplein svg.i + svg.i { display: block; }
.zoom.sans-zoom [data-zoom] { display: none; }
.sheet .draw.dessin { touch-action: pan-x pan-y; }
.sheet .draw.zoome { touch-action: none; cursor: grab; }
.sheet .draw.zoome:active { cursor: grabbing; }
/* plein écran : la toile couvre la fenêtre (le menu du navigateur reste ; le mode existe aussi au téléphone) */
.bench.plein .canvas { position: fixed; inset: 0; z-index: 45; display: flex !important; flex-direction: column; padding: 0 12px;
  background: var(--bg); }
.bench.plein .ctool { padding-top: 10px; }
.bench.plein .stage { flex: 1; min-height: 0; padding: 10px 0 12px; }
.bench.plein .sheet { height: 100%; min-height: 0; }
html.plein-ecran, html.plein-ecran body { overflow: hidden; }

/* une ligne de segments : à côté du libellé s'ils tiennent, sinon sur leur propre ligne, sur toute la largeur
   (« Platine · Latérale · Soudé · Scellé », « Directionnelle · Simplifiée » ne tenaient pas dans les 178 px du cadre
   de 304 px, sous 1 360 px) */
.row.full:has(> .seg.full) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.row.full:has(> .seg.full) > label { flex: 0 0 84px; }
.row.full:has(> .seg.full) > .seg.full { flex: 1 1 auto; min-width: 0; }
/* un libellé long passe à la ligne plutôt que d'être coupé (« sur la main courante » dans le cadre de 304 px, sous
   1 360 px) */
.row > label { white-space: normal; line-height: 1.3; }
.row > label > span:not(.sym):not(.aide) { overflow: visible; text-overflow: clip; min-width: 0; }
.row > label > .aide { flex: none; }
/* DEUX champs sur une ligne (commun.ligne2 : béton et acier, b et h…) : libellé court, champ, libellé court, champ ;
   les explications au survol de l'icône ⓘ du libellé */
.row2 { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 0 8px; }
.row2 > label { color: var(--ink-2); font-size: 12.5px; display: flex; align-items: center; gap: 4px; min-width: 0; white-space: nowrap; }
.row2 > label .aide { display: inline-grid; flex: none; cursor: help; }
.row2 > label svg.i { width: 13px; height: 13px; color: var(--ink-4); }
.row2 > .field, .row2 > .seg { min-width: 0; }
.row2 > .dl-ro { justify-self: end; font-weight: 600; font-variant-numeric: tabular-nums; }
/* la bulle d'une aide ⓘ ouverte d'un appui (js/etabli.js) : au doigt, le survol qui montre « title » n'existe pas */
.aide-bulle { position: fixed; z-index: 60; max-width: min(300px, calc(100vw - 16px)); padding: 8px 10px; border-radius: 8px;
  background: var(--ink); color: var(--panel); font-size: 12.5px; font-weight: 400; line-height: 1.4; white-space: normal;
  box-shadow: var(--shadow-pop); }
.aide-bulle[hidden] { display: none; }

/* ---------------------------------------------------------------- le résultat, la liste des éléments */
/* la grande pastille du verdict garde sa largeur : une comparaison longue la comprimait et coupait « η » */
.verdict .chip.xl { flex-shrink: 0; }
.verdict .gov { overflow-wrap: anywhere; }
/* « Dans cette note » : le NOM se coupe (points de suspension), les dimensions qui le suivent restent lisibles */
.ni .t { display: flex; align-items: baseline; gap: .3em; }
.ni .t > .nom { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-weight: 600; }
.ni .t > span:not(.nom) { flex: 0 0 auto; min-width: 0; max-width: calc(100% - 2.8em); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* au toucher, pas de survol : la croix de l'élément ouvert reste visible */
@media (hover: none) { .elements .ni.on .x { display: grid; } }

/* « À VÉRIFIER » (niveau « v ») : conforme au calcul, une disposition constructive reste à vérifier — en ambre, jamais dans
   le vert foncé des taux de 95 à 100 % (commun.STATUTS) */
:root { --vrf: #B86E00; --vrf-fond: #FFF2D6; --vrf-encre: #8A5A00; }
[data-theme="dark"] { --vrf: #E0A33C; --vrf-fond: #3A2C10; --vrf-encre: #F2C46B; }
.status.v, .chip.v { background: var(--vrf); color: #fff; }
.pct.v, .el .l2 .pct.v { color: var(--vrf); }

/* ---------------------------------------------------------------- le téléphone : rien de ces barres ailleurs */
.mmenu[hidden], .mchip[hidden] { display: none !important; }
.mmenu { display: none; }

/* ================================================================ tablette : 701 à 1 199 px */
/* la barre du haut, jusqu'à 1 100 px */
@media (min-width: 701px) and (max-width: 1199px) {
  /* « Reprendre » : deux cartes par ligne, le nom garde sa place à côté de la vignette */
  .accueil .resume { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 701px) and (max-width: 1100px) {
  /* la barre du haut garde ses icônes ; les noms des boutons passent au survol (title) */
  .top { gap: 8px; padding: 0 12px 0 16px; }
  .top .btn .lbl { display: none; }
  .top .btn, .top label.btn { width: 36px; height: 34px; padding: 0; justify-content: center; }
  #fil-chantier { max-width: 20vw; }
  .top .tag { flex: none; }
  /* l'enregistrement en court : « ✓ 17:08 » (le mot « Enregistré » au survol) ; un échec s'écrit toujours en entier */
  .et-enr-mot:not(:empty) { display: none; }
}
@media (min-width: 701px) and (max-width: 1199px) {
  /* portrait : la toile en haut, sur toute la largeur ; les données et le résultat côte à côte dessous */
  .bench { --g: 10px; display: grid; gap: var(--g); padding: var(--g); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 11fr) minmax(0, 9fr); grid-template-areas: "toile toile" "donnees resultat"; }
  #volets { display: contents; }
  .bench > .canvas { grid-area: toile; position: relative; inset: auto; padding: 0; min-height: 0; background: none; }
  .bench > .canvas .ctool { padding-top: 0; }
  .bench > .canvas .stage { padding: 8px 0 0; }
  .bench > .panel { position: relative; inset: auto; width: auto; min-width: 0; min-height: 0; }
  .bench > .panel.left { grid-area: donnees; }
  .bench > .panel.right { grid-area: resultat; }
  /* un cadre replié laisse sa largeur à l'autre ; les deux repliés, la toile prend la hauteur */
  .bench.sans-g { grid-template-columns: auto minmax(0, 1fr); }
  .bench.sans-d { grid-template-columns: minmax(0, 1fr) auto; }
  .bench.sans-g.sans-d { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .bench.sans-g .panel.left, .bench.sans-d .panel.right { align-self: start; }
  .bench.sans-g.sans-d .panel.right { justify-self: end; }
  /* les volets : le sélecteur à côté de sa ligne, par-dessus les données ; la fenêtre de calcul sur tout l'établi */
  .flyout { left: var(--g); right: auto; }
  .flyout.calcul { right: var(--g); width: auto; top: var(--g); max-height: calc(100% - 2 * var(--g)); }
  .ck-body { max-height: calc(100vh - var(--top-h) - 150px); }
  .zoom button { width: 36px; height: 32px; }
  /* le pied du résultat tient sur une ligne quand le cadre est large (paysage) : une ligne de résultat de plus */
  .pfoot { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 10px 16px; }
  .pfoot .mass { flex: 0 1 auto; gap: 12px; }
  .pfoot .legend { margin-left: auto; }

  /* l'accueil : la colonne des chantiers passe sous les modules */
  .page.accueil { grid-template-columns: minmax(0, 1fr); }
  .accueil .side { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
/* paysage (1 024 × 768, 1 180 × 820) : la toile à droite sur toute la hauteur, les données au-dessus du résultat à gauche (la
   toile sous les données lui laissait 220 px de haut : un texte de dalle de 6 px) */
@media (min-width: 701px) and (max-width: 1199px) and (orientation: landscape) {
  .bench { grid-template-columns: 318px minmax(0, 1fr); grid-template-rows: minmax(0, 11fr) minmax(0, 9fr);
    grid-template-areas: "donnees toile" "resultat toile"; }
  .bench.sans-g { grid-template-columns: 318px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .bench.sans-d { grid-template-columns: 318px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .bench.sans-g.sans-d { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .bench.sans-g.sans-d .panel.right { justify-self: start; }
  /* le sélecteur s'ouvre à droite du résultat, sur la toile */
  .flyout { left: calc(318px + 2 * var(--g)); }
}

/* ================================================================ téléphone : 700 px et moins */
@media (max-width: 700px) {
  /* l'en-tête : retour, nom de la note (on le change en le touchant), taux, menu des actions */
  .mtop { gap: 4px; padding: 0 4px; }
  .mtop .btn.icon { width: 44px; height: 44px; flex: none; }
  .mtop .btn.icon svg.i { width: 20px; height: 20px; }
  .mtop .t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .mtop .nomnote { width: 100%; min-width: 0; height: 26px; padding: 0 4px; margin-left: -4px; font-size: 16px; font-weight: 700;
    text-overflow: ellipsis; }
  /* la 2ᵉ ligne : l'état de l'enregistrement (le même indicateur que la barre du PC), puis le fil, qui cède le premier.
     Elle tient ENTRE le retour et la pastille de la note : un échec y écrit « Non enregistré » seul, en rouge (B.3 :
     « point rouge et texte rouge ») ; sa raison (« : stockage plein ») n'y tenait pas — mesuré à 390 px, plancher, pastille
     « À compléter » de 93 px : le texte entier passait SOUS la pastille — elle reste dans le message, le title et le
     menu ⋯ (.et-mi-enr). Et l'indicateur ne sort jamais de sa colonne : au pire (une pastille plus large encore, un
     écran plus étroit), son texte se termine par « … », jamais sous la pastille (verifier_site.js, « enregistrement »). */
  .mtop .et-l2 { display: flex; align-items: center; gap: 5px; min-width: 0; height: 16px; }
  .mtop .et-l2 .et-enr { flex: 0 1 auto; min-width: 0; max-width: 100%; gap: 4px; font-size: 12px; }
  .mtop .et-l2 .et-enr-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .mtop .et-enr-raison { display: none; }
  .et-enr-mot:not(:empty) { display: none; }
  .mtop .et-l2 .et-enr-ic svg.i { width: 13px; height: 13px; }
  .mtop .et-l2 .et-enr[data-enr="echec"] { padding: 0 4px 0 3px; border-radius: 4px; }
  .mtop #fil-m { flex: 1 1 0; min-width: 0; font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mtop .calcule { margin: 0; flex: none; }
  .mtop .mchip { flex: none; height: 36px; min-width: 50px; padding: 0 9px; border: 0; font-size: 13px; font-family: inherit; cursor: pointer; }
  .mmenu { position: fixed; top: 52px; right: 8px; z-index: 30; display: flex; flex-direction: column; width: min(300px, calc(100vw - 16px));
    padding: 6px; background: var(--panel); border: 1px solid var(--frame); border-radius: 14px; box-shadow: var(--shadow-pop); }
  .mmenu .mi { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 0 12px; border-radius: 10px;
    font-size: 15px; font-weight: 550; color: var(--ink); text-align: left; cursor: pointer; }
  .mmenu .mi:hover, .mmenu .mi:active { background: var(--bg); }
  .mmenu .mi svg.i { width: 19px; height: 19px; color: var(--ink-2); }
  .mmenu .mi .tag { margin-left: auto; }
  .mmenu .mi[aria-disabled="true"] { color: var(--ink-3); }
  /* l'échec d'enregistrement en entier, en tête du menu ; le toucher rouvre son message */
  .mmenu .et-mi-enr { margin-bottom: 4px; color: var(--nok); font-weight: 650; background: color-mix(in srgb, var(--nok) 8%, transparent); }
  .mmenu .et-mi-enr svg.i { color: var(--nok); }
  .mmenu .et-mi-enr[hidden] { display: none; }
  /* les onglets, puis la barre du bas */
  .mtabs { padding: 8px 12px; }
  .mtabs .seg button { height: 40px; font-size: 14.5px; }
  .mbar { padding-left: 12px; padding-right: 12px; }
  .mbar .btn { height: 46px; gap: 8px; }
  .mbar .btn[aria-disabled="true"] { opacity: .55; }
  .toast { bottom: calc(80px + env(safe-area-inset-bottom)); max-width: calc(100vw - 24px); }
  .et-alerte { top: 118px; flex-wrap: wrap; padding: 10px; }
  .et-alerte-txt { flex: 1 1 calc(100% - 80px); }
  .et-alerte .btn { height: 44px; }
  .et-alerte .et-alerte-stab { flex: 1 1 auto; justify-content: center; }
  .et-alerte .btn.icon { width: 44px; }
  .et-mem-l { flex-direction: column; align-items: stretch; gap: 8px; }
  .et-mem-l .btn { height: 44px; justify-content: center; }
  .demarrage { position: fixed; z-index: 35; }
  .demarrage .carte { width: min(360px, calc(100vw - 32px)); }
  .modpanel { left: 0; width: min(320px, 88vw); z-index: 32; }
  html.volet-ouvert, html.volet-ouvert body { overflow: hidden; }

  /* la toile : les vues défilent de côté, le zoom reste à droite */
  .ctool { overflow: visible; -webkit-mask-image: none; mask-image: none; gap: 8px; }
  .ctool > .seg { flex: 1 1 auto; }
  .ctool > .seg button { flex: none; height: 36px; padding: 0 12px; font-size: 13px; }
  .ctool .zoom { flex: none; }
  .zoom button { width: 38px; height: 36px; }
  .zoom .zpct { min-width: 50px; }
  .sheet .sphrase { padding: 3px 14px 0; }

  /* les champs en 16 px au moins : sous cette taille, iOS agrandit la page au toucher d'un champ (la règle passe
     devant les feuilles des modules, qui écrivent leurs champs en 12,5 px) */
  .bench input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .bench select, .bench textarea,
  .mtop input, .modal input { font-size: 16px !important; }
  /* des cibles que le doigt touche sans viser : 40 px et plus */
  #donnees .field:not(.area) { height: 42px; }
  .rows .seg.full button, .seg.full button { height: 38px; }
  .btn.meteo { height: 42px; font-size: 14px; }
  .btn.meteo.sm { height: 38px; font-size: 13px; }
  .ni { height: 46px; }
  .elements .ni .x { width: 36px; height: 36px; }
  .nl-add { min-height: 42px; }
  .sechd { min-height: 50px; }
  .case { min-height: 40px; }
  .case input { width: 20px; height: 20px; }
  .addrow { min-height: 40px; }
  .moins { width: 36px; height: 36px; }
  .prof { height: 36px; }
  .pk-row { height: 46px; }
  .fchip { height: 36px; padding: 0 13px; font-size: 13px; }
  .flyout .fl-h .pcoll { width: 40px; height: 40px; }

  /* l'accueil : une colonne ; le bouton « Nouvelle note » garde son nom, sur toute la largeur */
  .page.accueil { grid-template-columns: minmax(0, 1fr); }
  /* « Reprendre » : deux cartes l'une sous l'autre, les suivantes au glissé */
  .accueil .resume { grid-template-columns: none; grid-template-rows: repeat(2, auto); grid-auto-columns: 86%; gap: 8px; }
  .accueil .rcard { height: 62px; }
  .accueil .rcard .thumb { width: 70px; padding: 5px; }
  .accueil .resume:has(.vide) { grid-template-rows: none; grid-auto-columns: 100%; }
  .accueil .hello .btn.big { width: 100%; height: 46px; padding: 0 16px; justify-content: center; font-size: 14.5px; }
  .accueil .hello .btn.big svg.i { width: 18px; height: 18px; }
  .accueil .famille { margin-bottom: 4px; }
  .accueil .tile { min-height: 52px; }
  /* la bibliothèque en tête de la liste de sa famille, pleine largeur : la carte et les modules forment UNE liste (le cadre
     de la charte sur .fam-b, aucun sur la grille des modules) ; la carte se mesure de nouveau (son contenu fait sa hauteur),
     l'icône à gauche, le titre sur une ligne, les rubriques à la suite, séparées par « · » */
  .accueil .fam-b > .tiles { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); border: 0; border-radius: 0; box-shadow: none; background: none; }
  .accueil .fam-b > .tiles > .tile:first-child { border-top: 1px solid var(--line); }
  .accueil .tile.biblio { container-type: normal; min-height: 52px; }
  .accueil .tile.biblio .bib-c { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1px 10px; padding: 11px 14px; }
  .accueil .tile.biblio .bib-h { display: contents; }
  .accueil .tile.biblio .modic { grid-row: 1 / span 2; }
  .accueil .tile.biblio .nm span { display: inline; }
  .accueil .tile.biblio .nm .bib-k { font-size: inherit; font-weight: inherit; color: inherit; }
  .accueil .tile.biblio .bib-r { display: block; font-size: 12px; line-height: 1.35; color: var(--ink-3); }
  .accueil .tile.biblio .bib-r li { display: inline; font-size: inherit; line-height: inherit; color: inherit; white-space: normal; }
  .accueil .tile.biblio .bib-r li + li::before { content: " · "; }
  .accueil .tile.biblio .bib-r svg.i { display: none; }
  .mhead .btn.icon { width: 44px; height: 44px; }
  .mnav a[aria-disabled="true"] { opacity: .45; }
  /* « Nouvelle note » : une colonne, des champs et des boutons à la taille du doigt */
  .modal { padding: 10px; align-items: end; }
  .mcard { max-height: calc(100svh - 20px); }
  .mrow3 { grid-template-columns: minmax(0, 1fr); }
  .mrow3 input { height: 44px; }
  .mgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mopt { min-height: 46px; }
  .mcard .mf .btn { height: 44px; }
}