/* 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); }
.saved svg.i { color: var(--ok-ink, #15803d); }
.saved.attente svg.i { color: var(--ink-4); }
.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; }
.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, .saved { 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; }

/* ---------------------------------------------------------------- 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; } }

/* ---------------------------------------------------------------- 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; }
}
@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; }
  .mtop #fil-m { 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 .mm-h { padding: 6px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
  .mmenu .mm-h .saved .txt { display: inline; }
  .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); }
  /* 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); }
  .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; }
  .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; }
}