/*
 * Planimonde, habillage de l'éditeur. Tout passe par des variables : un design (designs.css) ne fait que les
 * redéfinir, et au besoin réarranger les panneaux. Les valeurs ci-dessous sont celles du design « Planimonde ».
 */
:root {
	--fond: #eef2f6; --surface: #ffffff; --surface2: #f3f6f9; --encre: #0d2951; --encre2: #5b6b82; --filet: #d5dde6;
	--accent: #0d2951; --accent-encre: #ffffff; --accent2: #1099b6; --danger: #b3402e;
	--barre-fond: #ffffff; --barre-encre: #0d2951;
	--scene-fond: #e6ebf1; --grille: rgba(13, 41, 81, .08); --grille-forte: rgba(13, 41, 81, .16);
	--pm-papier: #ffffff; --pm-trait: #2b3a4f; --pm-cote: #0f7f98; --pm-elem: #e3e9f0;
	--rayon: 8px; --rayon-btn: 7px; --trait: 1px; --ombre: 0 1px 2px rgba(13, 41, 81, .08), 0 6px 20px rgba(13, 41, 81, .08);
	--police: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --police-titre: var(--police);
	--casse: none; --espacement: 0; --graisse-titre: 650; --marge-panneau: 0px; --rayon-panneau: 0px;
	--ok: #2f7d4f; --alerte: #a8660b; --corps: 14px; --pm-ech: 1;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--fond); color: var(--encre); font: calc(var(--corps) * var(--pm-ech))/1.45 var(--police); overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }
.pm-barre :focus-visible { outline-color: var(--barre-encre); }

/*
 * La place des panneaux tient en trois variables (`--zones`, `--cols`, `--rangs`) : un design, la main gauche, la
 * tablette et le téléphone ne font que les redéfinir. `--g-…` et `--d-…` disent de quel côté est chaque panneau,
 * pour les boutons qui le replient.
 */
.pm-app {
	--l-bibli: calc(206px * var(--pm-ech)); --l-fiche: calc(290px * var(--pm-ech));
	--zones: "barre barre barre barre" "outils bibli scene fiche" "pied pied pied pied"; --cols: auto var(--l-bibli) minmax(0, 1fr) var(--l-fiche); --rangs: auto minmax(0, 1fr) auto;
	--g-bibli: 0; --d-bibli: auto; --g-fiche: auto; --d-fiche: 0;
	display: grid; height: 100dvh; position: relative; grid-template-columns: var(--cols); grid-template-rows: var(--rangs); grid-template-areas: var(--zones);
}
.pm-app.pm-sans-bibli { --l-bibli: 0px; }
.pm-app.pm-sans-fiche { --l-fiche: 0px; }
.pm-sans-bibli .pm-bibli, .pm-sans-fiche .pm-fiche { display: none; }
.pm-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.pm-evite { position: absolute; left: .5rem; top: -4rem; z-index: 80; padding: .55rem .9rem; background: var(--accent); color: var(--accent-encre); border-radius: var(--rayon-btn); font-weight: 700; text-decoration: none; }
.pm-evite:focus { top: .5rem; }
.pm-tel-oui { display: none; }
/* Les menus s'écrivent en toutes lettres, sans icône : une barre de menus calme. Quand la barre déborde, elle se
   resserre par paliers (posés par l'éditeur) : 1. le nom du design s'efface ; 2. les boutons de droite perdent leur
   libellé ; 3. l'état d'enregistrement se réduit à sa pastille ; 4. le logo s'efface ; 5. les menus deviennent des
   icônes ; 6. les flèches des designs et les bascules passent dans le menu « ☰ », qui reste toujours à portée. */
.pm-menu-btn .pm-ic { display: none; }
.pm-barre .pm-menu-btn { padding-inline: .55rem; }
.pm-serre-1 .pm-design-nom, .pm-serre-3 .pm-etat span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.pm-serre-1 .pm-design-nom { min-width: 0; }
.pm-serre-2 .pm-actions-barre .pm-btn span { display: none; }
.pm-serre-3 .pm-barre { gap: .35rem; }
.pm-serre-4 .pm-marque { display: none; }
.pm-serre-5 .pm-menu-btn span { display: none; }
.pm-serre-5 .pm-menu-btn .pm-ic { display: block; }
.pm-serre-6 .pm-barre .pm-designs, .pm-serre-6 .pm-barre .pm-bascules { display: none; }
.pm-barre > [data-action=feuille] { position: sticky; right: 0; background: var(--barre-fond); }

/* ───────────── Barre du haut ───────────── */
.pm-barre { grid-area: barre; display: flex; align-items: center; gap: .6rem; padding: .45rem .8rem; background: var(--barre-fond); color: var(--barre-encre); border-bottom: var(--trait) solid var(--filet); min-width: 0; overflow-x: auto; scrollbar-width: none; }
.pm-barre::-webkit-scrollbar { display: none; }
.pm-marque { display: flex; align-items: center; color: inherit; text-decoration: none; flex: none; }
.pm-logo { height: 30px; width: auto; display: block; }
.pm-nom { flex: 0 1 15rem; min-width: 7rem; padding: .35rem .55rem; border: var(--trait) solid transparent; border-radius: var(--rayon-btn); background: transparent; font-weight: 600; color: inherit; }
.pm-nom:hover, .pm-nom:focus { border-color: var(--filet); background: var(--surface2); color: var(--encre); }
.pm-etat { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; white-space: nowrap; flex: none; max-width: 24rem; overflow: hidden; padding: 3px; }
.pm-etat span { overflow: hidden; text-overflow: ellipsis; }
.pm-etat i { width: 11px; height: 11px; border-radius: 50%; flex: none; border: 1.5px solid currentColor; background: var(--ok); }
/* Pastille verte (à l'abri), ambre (en cours, hors ligne), rouge (échec). La forme le redit pour qui ne voit pas les couleurs : rond, carré, losange ; le cerne garde la pastille lisible sur toutes les barres. */
.pm-etat[data-etat=attente] i, .pm-etat[data-etat=envoi] i, .pm-etat[data-etat=neuf] i, .pm-etat[data-etat=libre] i { background: var(--alerte); }
.pm-etat[data-etat=horsligne] i, .pm-etat[data-etat=conflit] i { background: var(--alerte); border-radius: 0; }
.pm-etat[data-etat=echec] i, .pm-etat[data-etat=plein] i { background: var(--danger); }
.pm-etat[data-etat=echec], .pm-etat[data-etat=plein], .pm-etat[data-etat=conflit] { font-weight: 700; }
.pm-etat[data-etat=echec], .pm-etat[data-etat=horsligne] { cursor: pointer; }
.pm-etat[data-etat=echec] i, .pm-etat[data-etat=plein] i { border-radius: 0; transform: rotate(45deg); }
.pm-groupe { display: flex; align-items: center; gap: .25rem; flex: none; }
.pm-pousse { margin-left: auto; }
@media (min-width: 700px) { .pm-etat.pm-pousse { flex: 1 1 9rem; min-width: 2rem; max-width: none; justify-content: flex-end; } }
.pm-grain { flex: none; height: 30px; padding: 0 .3rem; border: var(--trait) solid var(--filet); border-radius: var(--rayon-btn); background: var(--surface2); color: var(--encre); font: inherit; font-size: .8rem; }
/* La barre du haut : des lots courts, séparés par un filet. */
.pm-barre-lot { padding-right: .55rem; border-right: var(--trait) solid var(--filet); }
.pm-actions-barre { padding-left: .55rem; border-left: var(--trait) solid var(--filet); border-right: 0; padding-right: 0; }
.pm-barre .pm-btn-icone:not([aria-pressed="true"]):not(.primaire), .pm-barre .pm-btn:not(.primaire) { border-color: transparent; background: transparent; color: inherit; }
.pm-barre .pm-btn-icone:not([aria-pressed="true"]):hover, .pm-barre .pm-btn:not(.primaire):hover, .pm-barre .pm-menu-btn[aria-expanded="true"] { background: var(--surface2); color: var(--encre); border-color: var(--filet); }
.pm-designs { padding: 0 .2rem; border-left: var(--trait) solid var(--filet); border-right: var(--trait) solid var(--filet); }
.pm-design-nom { color: inherit; }
.pm-design-nom { min-width: 9.5rem; text-align: center; font-size: .8rem; white-space: nowrap; }
.pm-langue { font-size: .72rem; font-weight: 700; margin-left: .15rem; }

.pm-btn, .pm-btn-icone { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; border: var(--trait) solid var(--filet); border-radius: var(--rayon-btn); background: var(--surface); color: var(--encre); cursor: pointer; white-space: nowrap; text-transform: var(--casse); letter-spacing: var(--espacement); }
.pm-btn { padding: .4rem .75rem; font-weight: 600; min-height: 34px; }
.pm-btn-icone { min-width: 34px; height: 34px; padding: 0 .35rem; }
.pm-btn:hover, .pm-btn-icone:hover { background: var(--surface2); }
.pm-btn:disabled, .pm-btn-icone:disabled { opacity: .38; cursor: default; }
.pm-btn.primaire { background: var(--accent); border-color: var(--accent); color: var(--accent-encre); }
.pm-btn.primaire:hover { filter: brightness(1.12); }
.pm-btn.danger { color: var(--danger); }
.pm-btn-icone[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-encre); }
.pm-ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ───────────── Outils, bibliothèque, fiche ───────────── */
.pm-outils { grid-area: outils; display: flex; flex-direction: column; gap: .3rem; padding: .55rem .45rem; background: var(--surface); border-inline: var(--trait) solid var(--filet); }
.pm-bibli, .pm-fiche { background: var(--surface); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--filet) transparent; padding: .7rem; margin: var(--marge-panneau); border-radius: var(--rayon-panneau); }
.pm-bibli { grid-area: bibli; }
.pm-fiche { grid-area: fiche; }
.pm-bibli input[type=search], .pm-champ input, .pm-champ select, .pm-cotes input, .pm-grille-mesures input { width: 100%; padding: .4rem .55rem; border: var(--trait) solid var(--filet); border-radius: var(--rayon-btn); background: var(--surface2); min-height: 34px; }
.pm-bibli details { margin-top: .6rem; }
.pm-bibli summary, .pm-fiche h3, .pm-modale h3 { cursor: pointer; font: var(--graisse-titre) .78rem/1.3 var(--police-titre); text-transform: uppercase; letter-spacing: .06em; color: var(--encre2); padding: .35rem 0; margin: 0; }
.pm-fiche h3, .pm-modale h3 { cursor: default; margin: 1rem 0 .3rem; }
.pm-tuiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.pm-tuile { display: grid; gap: .25rem; justify-items: center; padding: .45rem .3rem; border: var(--trait) solid var(--filet); border-radius: var(--rayon); background: var(--surface2); cursor: grab; touch-action: none; font-size: .76rem; line-height: 1.2; text-align: center; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.pm-tuile-prise { border-color: var(--accent2); box-shadow: 0 0 0 2px var(--accent2); }
.pm-tuile:hover { border-color: var(--accent2); }
.pm-tuile svg { width: 100%; height: 44px; pointer-events: none; }
.pm-tuile span { pointer-events: none; }

.pm-fiche h2, .pm-modale h2 { font: var(--graisse-titre) 1.05rem/1.25 var(--police-titre); margin: 0 0 .7rem; text-transform: var(--casse); letter-spacing: var(--espacement); }
.pm-champ { display: block; margin: 0 0 .65rem; }
.pm-champ > span { display: block; font-size: .8rem; color: var(--encre2); margin-bottom: .2rem; }
.pm-deux { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.pm-case { display: flex; gap: .5rem; align-items: flex-start; margin: .35rem 0; cursor: pointer; }
.pm-case input { margin-top: .2rem; accent-color: var(--accent2); }
.pm-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.pm-note { font-size: .82rem; color: var(--encre2); margin: .5rem 0; }
.pm-chiffres { display: grid; grid-template-columns: 1fr auto; gap: .2rem .8rem; margin: .3rem 0; }
.pm-chiffres dt { color: var(--encre2); display: flex; align-items: center; gap: .4rem; min-width: 0; }
.pm-chiffres dt i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.pm-chiffres dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; }
.pm-cotes { width: 100%; border-collapse: collapse; }
.pm-cotes th { text-align: left; font-weight: 600; padding-right: .4rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pm-cotes td { padding: .15rem 0; }
.pm-angle { width: 3.2rem; text-align: right; color: var(--encre2); font-variant-numeric: tabular-nums; }
.pm-pastilles { display: flex; flex-wrap: wrap; gap: .35rem; }
.pm-pastilles button { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--filet); cursor: pointer; padding: 0; line-height: 1; }
.pm-pastilles button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--encre); }
.pm-pastilles .pm-sans { background: var(--surface2); color: var(--encre2); }

/* ───────────── Le plan ───────────── */
.pm-scene { grid-area: scene; position: relative; background: var(--scene-fond); overflow: hidden; min-width: 0; min-height: 0; border-inline: var(--trait) solid var(--filet); }
.pm-scene:focus-visible { outline-offset: -3px; }
.pm-scene > svg { -webkit-user-select: none; -webkit-touch-callout: none; }
.pm-scene > svg { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; user-select: none; cursor: default; }
.pm-scene[data-mode=main] > svg, .pm-scene.pm-pan > svg { cursor: grab; }
.pm-scene:is([data-mode=contour], [data-mode=trace], [data-mode=zone], [data-mode=mesure], [data-mode=cote], [data-mode=texte]) > svg { cursor: crosshair; }
.pm-scene[data-mode=choisir] [data-id] { cursor: move; }
.pm-scene [data-cote] { cursor: text; }
.pm-grille { fill: none; stroke: var(--grille); stroke-opacity: .5; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.pm-grille-forte { stroke: var(--grille-forte); }
.pm-sel { fill: none; stroke: var(--pm-choix, var(--accent2)); stroke-width: 1.6px; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; pointer-events: none; }
.pm-poignee { fill: var(--pm-papier); stroke: var(--pm-choix, var(--accent2)); stroke-width: 2px; vector-effect: non-scaling-stroke; cursor: pointer; }
.pm-poignee-plus { fill: var(--pm-choix, var(--accent2)); fill-opacity: .25; stroke-width: 1px; }
.pm-poignee-tour { fill: var(--pm-choix, var(--accent2)); cursor: grab; }
.pm-dessin { fill: var(--pm-choix, var(--accent2)); fill-opacity: .08; stroke: var(--pm-choix, var(--accent2)); stroke-width: 2px; vector-effect: non-scaling-stroke; pointer-events: none; }
.pm-point { fill: var(--pm-choix, var(--accent2)); pointer-events: none; }
.pm-point-fin { fill: var(--pm-papier); stroke: var(--pm-choix, var(--accent2)); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.pm-lettre { fill: var(--pm-choix, var(--accent2)); font-weight: 700; pointer-events: none; }
.pm-verrou .c, .pm-verrou .d { stroke-dasharray: 3 2; }
.pm-saisie { position: absolute; z-index: 5; display: flex; align-items: center; gap: .3rem; }
.pm-saisie .pm-btn { box-shadow: var(--ombre); }
.pm-saisie-signes { display: none; gap: .2rem; }
.pm-saisie-signes button { min-width: 2.4rem; min-height: 2.4rem; border: var(--trait) solid var(--filet); border-radius: var(--rayon-btn); background: var(--surface); font-weight: 700; cursor: pointer; }
.pm-croix { fill: none; }
.pm-saisie input { width: 8.5rem; padding: .35rem .5rem; border: 2px solid var(--accent2); border-radius: var(--rayon-btn); background: var(--surface); box-shadow: var(--ombre); }
.pm-bande { position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 4; display: flex; align-items: center; gap: .4rem; padding: .45rem .6rem; background: var(--surface); border: var(--trait) solid var(--filet); border-radius: calc(var(--rayon) + 4px); box-shadow: var(--ombre); max-width: calc(100% - 1.5rem); overflow-x: auto; }
.pm-bande > span { white-space: nowrap; font-weight: 600; padding: 0 .3rem; min-width: 9rem; text-align: center; }

.pm-pied { grid-area: pied; display: flex; gap: 1.2rem; padding: .3rem .8rem; font-size: .8rem; color: var(--encre2); background: var(--surface); border-top: var(--trait) solid var(--filet); white-space: nowrap; overflow: hidden; }
.pm-pied #pm-aide { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--encre); }
.pm-pied #pm-position { font-variant-numeric: tabular-nums; }

/* ───────────── Modales ───────────── */
.pm-voile { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 1rem; background: rgba(8, 20, 40, .45); }
.pm-modale { display: flex; flex-direction: column; width: min(760px, 100%); max-height: calc(100dvh - 2rem); background: var(--surface); color: var(--encre); border: var(--trait) solid var(--filet); border-radius: calc(var(--rayon) + 4px); box-shadow: var(--ombre); }
.pm-modale > header { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1.1rem .4rem; }
.pm-modale > header h2 { margin: 0; font-size: 1.2rem; }
.pm-modale-corps { padding: .4rem 1.1rem 1rem; overflow-y: auto; }
.pm-modale > footer { display: flex; justify-content: flex-end; gap: .5rem; padding: .7rem 1.1rem; border-top: var(--trait) solid var(--filet); }
.pm-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .5rem; }
.pm-type { display: grid; gap: .2rem; text-align: left; padding: .7rem .8rem; border: var(--trait) solid var(--filet); border-radius: var(--rayon); background: var(--surface2); cursor: pointer; }
.pm-type:hover { border-color: var(--accent2); }
.pm-type span { font-size: .82rem; color: var(--encre2); }
.pm-plans { list-style: none; margin: 0; padding: 0; }
.pm-plans li { display: flex; align-items: center; gap: .5rem; border-bottom: var(--trait) solid var(--filet); }
.pm-plans li.courant b::after { content: " •"; color: var(--accent2); }
.pm-lien { flex: 1; display: grid; text-align: left; padding: .5rem 0; border: 0; background: none; cursor: pointer; }
.pm-lien span { font-size: .82rem; color: var(--encre2); }
.pm-message { padding: .55rem .7rem; border-radius: var(--rayon); background: var(--surface2); border-left: 4px solid var(--filet); font-size: .88rem; margin: .5rem 0; }
.pm-message:empty { display: none; }
.pm-message.ok { border-color: var(--ok); }
.pm-message.alerte { border-color: var(--alerte); }
.pm-message.danger { border-color: var(--danger); }
.pm-mesures { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.1rem; }
.pm-grille-mesures { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .4rem .5rem; }
.pm-grille-mesures label span { display: block; font-size: .8rem; font-weight: 650; }
.pm-coins { display: flex; flex-wrap: wrap; gap: .2rem .9rem; }
.pm-m-apercu { aspect-ratio: 1; background: var(--scene-fond); border-radius: var(--rayon); display: grid; place-items: center; }
.pm-m-apercu svg { width: 100%; height: 100%; }
.pm-m-forme { fill: var(--accent2); fill-opacity: .12; stroke: var(--pm-trait); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.pm-m-ecart-trait { fill: none; stroke: var(--danger); stroke-width: 2.5px; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.pm-m-point { fill: var(--pm-trait); }
.pm-m-lettre { fill: var(--accent2); font-weight: 700; text-anchor: middle; dominant-baseline: central; font-family: var(--police); }
.pm-toast { position: fixed; left: 50%; bottom: 3.2rem; transform: translateX(-50%); z-index: 60; max-width: min(90vw, 34rem); padding: .65rem 1rem; border-radius: var(--rayon); background: var(--encre); color: var(--surface); box-shadow: var(--ombre); text-align: center; }

/* ───────────── Menus, tiroirs, familles de plans ───────────── */
.pm-menu-liste { position: fixed; z-index: 55; display: flex; flex-direction: column; min-width: 15rem; max-width: min(92vw, 24rem); max-height: calc(100dvh - 1rem); padding: .3rem; background: var(--surface); color: var(--encre); border: var(--trait) solid var(--filet); border-radius: var(--rayon); box-shadow: var(--ombre); }
.pm-menu-items { display: grid; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--filet) transparent; min-height: 0; }
.pm-menu-liste button[data-item], .pm-menu-mode { display: flex; align-items: center; gap: .55rem; padding: .45rem .6rem; border: 0; border-radius: var(--rayon-btn); background: none; text-align: left; cursor: pointer; min-height: 34px; }
.pm-menu-liste button[data-item] > span:not(.pm-ic) { flex: 1; min-width: 0; }
.pm-menu-liste button[data-item]:hover, .pm-menu-liste button[data-item]:focus-visible, .pm-menu-mode:hover { background: var(--surface2); }
.pm-menu-liste button[aria-checked="true"] { font-weight: 700; }
.pm-menu-liste button[aria-checked="true"]::after { content: ""; width: .42rem; height: .8rem; margin: 0 .35rem .2rem; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); flex: none; }
.pm-menu-liste .pm-danger { color: var(--danger); }
.pm-menu-liste kbd { font: inherit; font-size: .76rem; color: var(--encre2); border: var(--trait) solid var(--filet); border-radius: 4px; padding: 0 .3rem; white-space: nowrap; }
.pm-menu-liste hr { border: 0; border-top: var(--trait) solid var(--filet); margin: .25rem 0; width: 100%; }
.pm-menu-liste .pm-note { padding: .3rem .6rem; }
.pm-menu-titre { font: var(--graisse-titre) .74rem/1.3 var(--police-titre); text-transform: uppercase; letter-spacing: .06em; color: var(--encre2); margin: .35rem .6rem .15rem; }
.pm-menu-recherche { margin: .15rem .15rem .35rem; padding: .4rem .55rem; border: var(--trait) solid var(--filet); border-radius: var(--rayon-btn); background: var(--surface2); min-height: 34px; }
.pm-menu-mode { justify-content: center; margin-top: .25rem; border-top: var(--trait) solid var(--filet); border-radius: 0 0 var(--rayon-btn) var(--rayon-btn); font-size: .86rem; text-decoration: underline; color: var(--encre); width: 100%; }
.pm-menu-tete { display: flex; align-items: center; gap: .5rem; padding: .2rem .2rem .4rem .5rem; }
.pm-menu-tete h2 { flex: 1; margin: 0; font: var(--graisse-titre) 1.05rem/1.25 var(--police-titre); text-transform: var(--casse); letter-spacing: var(--espacement); }
.pm-menu-libre { padding: .35rem .5rem; }
.pm-menu-libre .pm-designs { border: 0; justify-content: space-between; }
.pm-menu-libre .pm-design-nom { flex: 1; }
.pm-feuille { inset: 0; max-width: none; max-height: none; border: 0; border-radius: 0; padding: max(.4rem, env(safe-area-inset-top)) max(.4rem, env(safe-area-inset-right)) max(.4rem, env(safe-area-inset-bottom)) max(.4rem, env(safe-area-inset-left)); }
.pm-feuille .pm-menu-items { flex: 1; align-content: start; }
.pm-feuille.pm-contexte { inset: auto 0 0 0; max-height: 70dvh; border-top: var(--trait) solid var(--filet); border-radius: calc(var(--rayon) + 6px) calc(var(--rayon) + 6px) 0 0; }
.pm-menu-btn { font-weight: 600; }
.pm-outils { overflow-y: auto; scrollbar-width: none; }
.pm-scene[data-curseur=crosshair] > svg { cursor: crosshair; }
.pm-scene[data-curseur=pointer] > svg { cursor: pointer; }
.pm-tiroir { position: absolute; top: .6rem; right: .6rem; bottom: .6rem; z-index: 6; display: flex; flex-direction: column; width: min(340px, calc(100% - 1.2rem)); background: var(--surface); color: var(--encre); border: var(--trait) solid var(--filet); border-radius: var(--rayon); box-shadow: var(--ombre); }
.pm-tiroir > header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .55rem .7rem; border-bottom: var(--trait) solid var(--filet); }
.pm-tiroir > header h2 { flex: 1; }
.pm-tiroir-prise { display: none; }
.pm-tiroir > header h2 { margin: 0; font: var(--graisse-titre) 1rem/1.25 var(--police-titre); text-transform: var(--casse); letter-spacing: var(--espacement); }
.pm-tiroir-corps { padding: .7rem; overflow-y: auto; flex: 1; }
.pm-tiroir h3 { font: var(--graisse-titre) .78rem/1.3 var(--police-titre); text-transform: uppercase; letter-spacing: .06em; color: var(--encre2); margin: 1rem 0 .3rem; }
.pm-tiroir .pm-champ input, .pm-tiroir .pm-champ select, .pm-modale .pm-champ input, .pm-modale .pm-champ select, .pm-modale .pm-champ textarea, .pm-tiroir .pm-champ textarea, .pm-fiche .pm-champ textarea { width: 100%; padding: .4rem .55rem; border: var(--trait) solid var(--filet); border-radius: var(--rayon-btn); background: var(--surface2); }
.pm-familles { display: flex; flex-wrap: wrap; gap: .3rem; margin: .6rem 0; }
.pm-familles button { padding: .3rem .7rem; border: var(--trait) solid var(--filet); border-radius: 99px; background: var(--surface2); cursor: pointer; font-size: .85rem; }
.pm-familles button[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-encre); }
#pm-type-recherche { width: 100%; padding: .45rem .6rem; border: var(--trait) solid var(--filet); border-radius: var(--rayon-btn); background: var(--surface2); }

/* ───────────── Impression à l'échelle ───────────── */
#pm-impression { display: none; }
@media print {
	@page { margin: 10mm; }
	html, body { height: auto; overflow: visible; background: #fff; }
	.pm-app, .pm-voile, .pm-toast, .pm-menu-liste, .pm-volant, .pm-bulle { display: none !important; }
	#pm-impression { display: block; color: #111; font: 10pt/1.4 system-ui, sans-serif; --pm-mur: #3b4650; --pm-papier: #fff; --pm-trait: #2b3a4f; --pm-cote: #0f5f78; --pm-elem: #e6eaef; }
	#pm-impression header { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1pt solid #111; margin-bottom: 3mm; }
	#pm-impression h1 { font-size: 14pt; margin: 0; }
	#pm-impression header p { margin: 0; }
	#pm-impression svg { display: block; max-width: none; }
	.pm-i-barre { display: flex; align-items: center; gap: 3mm; margin: 3mm 0; font-size: 8pt; }
	.pm-i-barre i { display: block; height: 2mm; border: .6pt solid #111; border-top: 0; }
	#pm-impression table { border-collapse: collapse; margin-top: 3mm; font-size: 9pt; }
	#pm-impression th, #pm-impression td { border: .5pt solid #888; padding: 1mm 2.5mm; text-align: left; }
	#pm-impression footer { margin-top: 4mm; font-size: 7.5pt; color: #555; }
}

/* ───────────── Avis, boutons du tracé, panneaux repliables ───────────── */
.pm-avis-pile { position: absolute; top: .6rem; left: 50%; transform: translateX(-50%); z-index: 7; display: grid; gap: .4rem; width: min(36rem, calc(100% - 1.2rem)); pointer-events: none; }
.pm-avis { pointer-events: auto; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; padding: .55rem .6rem .55rem .8rem; background: var(--surface); color: var(--encre); border: var(--trait) solid var(--filet); border-left: 5px solid var(--accent2); border-radius: var(--rayon); box-shadow: var(--ombre); }
.pm-avis p { flex: 1 1 14rem; margin: 0; }
.pm-avis-actions { display: flex; flex-wrap: wrap; gap: .35rem; }
.pm-avis-alerte { border-left-color: var(--danger); }
.pm-dessin-actions { position: absolute; left: 50%; bottom: .8rem; transform: translateX(-50%); z-index: 4; display: flex; gap: .4rem; max-width: calc(100% - 1rem); }
.pm-dessin-actions .pm-btn { box-shadow: var(--ombre); }
.pm-repli { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; display: grid; place-items: center; width: 20px; height: 54px; padding: 0; border: var(--trait) solid var(--filet); border-radius: var(--rayon-btn); background: var(--surface); color: var(--encre); cursor: pointer; }
.pm-repli .pm-ic { width: 13px; height: 13px; }
.pm-repli:hover { background: var(--surface2); }
.pm-repli-bibli { left: var(--g-bibli); right: var(--d-bibli); }
.pm-repli-fiche { left: var(--g-fiche); right: var(--d-fiche); }
.pm-repli[aria-expanded="false"] { background: var(--accent); color: var(--accent-encre); border-color: var(--accent); }
.pm-poignee-bas { display: none; }
.pm-quoi { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; padding: 0; margin-left: .2rem; border: var(--trait) solid var(--encre2); border-radius: 50%; background: var(--surface); color: var(--encre); font-size: .74rem; font-weight: 700; line-height: 1; cursor: pointer; vertical-align: middle; }
.pm-quoi:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-encre); }

/* ───────────── Fiche : champs pensés pour le doigt, bilan, avis ───────────── */
.pm-fiche-section { display: contents; }
.pm-pasapas { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; border: var(--trait) solid var(--filet); border-radius: var(--rayon-btn); overflow: hidden; background: var(--surface2); }
.pm-pasapas button { min-height: 34px; border: 0; background: var(--surface); color: var(--encre); font-size: 1.25rem; line-height: 1; cursor: pointer; }
.pm-pasapas button:hover { background: var(--surface2); }
.pm-champ .pm-pasapas input { min-width: 0; border: 0; border-radius: 0; text-align: center; font-weight: 650; padding: 0; appearance: textfield; -moz-appearance: textfield; }
.pm-pasapas input::-webkit-outer-spin-button, .pm-pasapas input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pm-champ-bouton .pm-btn { width: 100%; }
.pm-formes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; }
.pm-formes button { display: grid; gap: .1rem; justify-items: center; padding: .3rem .15rem; min-height: 52px; border: var(--trait) solid var(--filet); border-radius: var(--rayon); background: var(--surface2); color: var(--encre); font-size: .74rem; line-height: 1.15; cursor: pointer; overflow: hidden; }
.pm-formes button[aria-pressed="true"] { border-color: var(--encre); box-shadow: inset 0 0 0 1px var(--encre); font-weight: 700; background: var(--surface); }
.pm-formes svg { width: 100%; height: 16px; }
.pm-pastilles input[type=color] { width: 34px; height: 26px; padding: 1px; border: var(--trait) solid var(--filet); border-radius: var(--rayon-btn); background: var(--surface); cursor: pointer; }
.pm-rangee { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0 0 .5rem; }
.pm-propose { margin: -.2rem 0 .65rem; }
.pm-propose .pm-btn { white-space: normal; text-align: left; justify-content: flex-start; font-weight: 500; font-size: .86rem; }
.pm-avis-champ { margin: -.2rem 0 .65rem; font-size: .82rem; color: var(--encre2); }
.pm-avis-champ:empty { display: none; }
.pm-bilan { display: flex; flex-wrap: wrap; gap: .2rem 1rem; margin: .9rem 0 .2rem; padding: .5rem 0; border-top: var(--trait) solid var(--filet); border-bottom: var(--trait) solid var(--filet); color: var(--encre2); font-size: .86rem; }
.pm-bilan b { font: var(--graisse-titre) 1.25rem/1 var(--police-titre); color: var(--encre); margin-right: .15rem; font-variant-numeric: tabular-nums; }

/* ───────────── Sur le plan : prises des poignées, mesures de l'objet choisi, cadre de sélection, zoom, aides ───────────── */
.pm-prise-poignee { fill: transparent; cursor: pointer; }
.pm-prise-poignee.pm-poignee-tour { cursor: grab; }
.pm-tige { stroke-dasharray: none; }
.pm-cote-sel { fill: var(--pm-choix, var(--accent2)); font-weight: 700; pointer-events: none; font-variant-numeric: tabular-nums; }
.pm-lasso { fill: var(--pm-choix, var(--accent2)); fill-opacity: .1; stroke: var(--pm-choix, var(--accent2)); stroke-width: 1.5px; vector-effect: non-scaling-stroke; pointer-events: none; }
.pm-scene.pm-cible { outline: 3px solid var(--accent2); outline-offset: -3px; }
.pm-fantome { position: fixed; left: 0; top: 0; z-index: 95; display: grid; place-items: center; width: 72px; height: 72px; padding: 8px; border: 2px solid var(--accent2); border-radius: var(--rayon); background: var(--surface); box-shadow: var(--ombre); pointer-events: none; }
.pm-fantome svg { width: 100%; height: 52px; }
.pm-info { position: absolute; left: 30px; bottom: 10px; z-index: 4; max-width: calc(100% - 13rem); margin: 0; padding: .3em .7em; border-radius: var(--rayon); background: var(--encre); color: var(--surface); font-size: .85rem; pointer-events: none; font-variant-numeric: tabular-nums; }
.pm-vide { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; width: min(26rem, calc(100% - 3rem)); margin: 0; padding: .9rem 1.1rem; border: var(--trait) dashed var(--encre2); border-radius: var(--rayon); background: var(--surface); color: var(--encre); text-align: center; pointer-events: none; }
.pm-zoom { position: absolute; right: 30px; bottom: 10px; z-index: 4; display: flex; gap: 1px; border: var(--trait) solid var(--filet); border-radius: var(--rayon-btn); overflow: hidden; background: var(--filet); box-shadow: var(--ombre); }
.pm-zoom button { display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 .35rem; border: 0; background: var(--surface); color: var(--encre); cursor: pointer; font-size: .8rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pm-zoom button:hover { background: var(--surface2); }
.pm-zoom-echelle { min-width: 4.2rem; }
[data-pm-main=gauche] .pm-zoom { right: auto; left: 30px; }
[data-pm-main=gauche] .pm-info { left: auto; right: 30px; }

/* ───────────── Main gauche (ordinateur) : panneaux et outils changent de côté ───────────── */
@media (min-width: 1101px) {
	[data-pm-main=gauche] .pm-app { --zones: "barre barre barre barre" "fiche scene bibli outils" "pied pied pied pied"; --cols: var(--l-fiche) minmax(0, 1fr) var(--l-bibli) auto; --g-bibli: auto; --d-bibli: 0; --g-fiche: 0; --d-fiche: auto; }
}
[data-pm-main=gauche] .pm-tiroir { right: auto; left: .6rem; }

/* ───────────── Tablette (700 à 1100 px) : outils en colonne, un seul panneau à deux onglets, repliable ───────────── */
@media (min-width: 700px) and (max-width: 1100px) and (min-height: 481px), (min-width: 961px) and (max-width: 1100px) {
	.pm-app { --l-bibli: calc(236px * var(--pm-ech)); --zones: "barre barre barre" "outils poignee scene" "outils bas scene" "pied pied pied"; --cols: auto var(--l-bibli) minmax(0, 1fr); --rangs: auto auto minmax(0, 1fr) auto; }
	[data-pm-main=gauche] .pm-app { --zones: "barre barre barre" "scene poignee outils" "scene bas outils" "pied pied pied"; --cols: minmax(0, 1fr) var(--l-bibli) auto; --g-bibli: auto; --d-bibli: 0; }
	.pm-bibli, .pm-fiche { grid-area: bas; margin: 0; border-radius: 0; }
	.pm-onglet-bibli .pm-fiche, .pm-onglet-fiche .pm-bibli { display: none; }
	.pm-sans-fiche.pm-onglet-fiche .pm-fiche { display: block; }
	.pm-sans-bibli .pm-bibli, .pm-sans-bibli .pm-fiche, .pm-sans-bibli.pm-onglet-fiche .pm-fiche, .pm-sans-bibli .pm-poignee-bas { display: none; }
	.pm-poignee-bas { grid-area: poignee; display: block; background: var(--surface); color: var(--encre); border-bottom: var(--trait) solid var(--filet); }
	.pm-prise, .pm-resume { display: none; }
	.pm-onglets { display: grid; grid-template-columns: 1fr 1fr; }
	.pm-onglets button { min-height: 40px; padding: 0 .3rem; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none; font-weight: 600; cursor: pointer; overflow: hidden; text-overflow: ellipsis; }
	.pm-onglets button[aria-selected="true"] { border-bottom-color: var(--accent2); }
	.pm-repli-fiche { display: none; }
	.pm-tuiles { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
	.pm-mesures { grid-template-columns: 1fr; }
	.pm-pied #pm-position, .pm-pied #pm-echelle { display: none; }
}

/* ───────────── Téléphone (moins de 700 px, ou tenu en travers) : le plan d'abord ───────────── */
@media (max-width: 699px), (max-width: 960px) and (max-height: 480px) {
	html, body { overscroll-behavior: none; }
	/* De haut en bas : barre réduite, plan, aide de l'outil, poignée, tiroir (bibliothèque ou propriétés), outils. */
	.pm-app { --zones: "barre" "scene" "pied" "poignee" "bas" "outils"; --cols: minmax(0, 1fr); --rangs: auto minmax(0, 1fr) auto auto 0px auto; }
	/* À mi-hauteur, le plan garde toujours au moins la moitié de l'écran. */
	.pm-app.pm-bas-mi { --rangs: auto minmax(50%, 1fr) auto auto minmax(0, 46dvh) auto; }
	.pm-app.pm-bas-plein { --rangs: auto 0px auto auto minmax(0, 1fr) auto; }
	.pm-app.pm-bas-glisse { --rangs: auto minmax(0, 1fr) auto auto var(--pm-h-bas, 0px) auto; }
	.pm-tel-non { display: none !important; }
	.pm-tel-oui { display: inline-flex; }
	.pm-repli { display: none; }
	.pm-barre { gap: .35rem; padding: max(.3rem, env(safe-area-inset-top)) max(.5rem, env(safe-area-inset-right)) .3rem max(.5rem, env(safe-area-inset-left)); }
	.pm-nom { flex: 1 1 auto; min-width: 0; }
	.pm-etat { flex: none; }
	.pm-etat span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	[data-pm-main=gauche] .pm-barre [data-action=feuille] { order: -1; }
	.pm-outils { flex-direction: row; overflow-x: auto; overflow-y: hidden; gap: .35rem; padding: .3rem max(.5rem, env(safe-area-inset-right)) max(.3rem, env(safe-area-inset-bottom)) max(.5rem, env(safe-area-inset-left)); border-inline: 0; border-bottom: 0; border-top: var(--trait) solid var(--filet); }
	.pm-outils > * { flex: none; }
	[data-pm-main=gauche] .pm-outils { flex-direction: row-reverse; }
	.pm-scene { border-inline: 0; margin: 0; border-radius: 0; }
	.pm-bas-plein .pm-scene { visibility: hidden; }
	.pm-bibli, .pm-fiche { grid-area: bas; margin: 0; border: 0; border-radius: 0; box-shadow: none; padding: .6rem max(.7rem, env(safe-area-inset-right)) .8rem max(.7rem, env(safe-area-inset-left)); overscroll-behavior: contain; }
	.pm-sans-bibli.pm-onglet-bibli .pm-bibli, .pm-sans-fiche.pm-onglet-fiche .pm-fiche { display: block; }
	.pm-onglet-bibli .pm-fiche, .pm-onglet-fiche .pm-bibli, .pm-bas-ferme:not(.pm-bas-glisse) .pm-bibli, .pm-bas-ferme:not(.pm-bas-glisse) .pm-fiche { display: none; }
	.pm-poignee-bas { grid-area: poignee; display: flex; align-items: stretch; gap: .3rem; position: relative; min-height: 50px; padding: 6px max(.4rem, env(safe-area-inset-right)) 0 max(.4rem, env(safe-area-inset-left)); background: var(--surface); color: var(--encre); border-top: var(--trait) solid var(--filet); touch-action: none; user-select: none; -webkit-user-select: none; }
	.pm-poignee-bas::before { content: ""; position: absolute; top: 4px; left: 50%; width: 44px; height: 4px; margin-left: -22px; border-radius: 4px; background: var(--encre2); }
	[data-pm-main=gauche] .pm-poignee-bas { flex-direction: row-reverse; }
	.pm-onglets { display: flex; gap: .2rem; }
	.pm-onglets button { min-height: 44px; padding: 0 .7rem; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none; font-weight: 600; cursor: pointer; }
	.pm-onglets button[aria-selected="true"] { border-bottom-color: var(--accent2); }
	.pm-resume { flex: 1; min-width: 0; align-self: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; color: var(--encre2); text-align: right; }
	.pm-prise { flex: none; display: grid; place-items: center; width: 48px; border: 0; background: none; cursor: pointer; }
	.pm-prise i { width: 12px; height: 12px; border: solid currentColor; border-width: 2px 0 0 2px; transform: translateY(3px) rotate(45deg); }
	.pm-bas-plein .pm-prise i { transform: translateY(-3px) rotate(225deg); }
	.pm-pied { grid-area: pied; padding: .3rem .7rem; white-space: normal; }
	.pm-pied #pm-position, .pm-pied #pm-echelle { display: none; }
	.pm-pied:has(#pm-aide:empty), .pm-bas-plein .pm-pied { display: none; }
	.pm-pied #pm-aide { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
	/* Cibles tactiles de 44 px ; champs à 16 px pour que le téléphone ne zoome pas dessus. */
	.pm-btn { min-height: 44px; }
	.pm-btn-icone { min-width: 44px; height: 44px; }
	input, select, textarea { font-size: 16px; }
	.pm-bibli input[type=search], .pm-champ input, .pm-champ select, .pm-cotes input, .pm-grille-mesures input, #pm-type-recherche, .pm-menu-recherche { min-height: 44px; }
	.pm-case { min-height: 44px; align-items: center; margin: 0; }
	.pm-case input { margin-top: 0; width: 20px; height: 20px; flex: none; }
	.pm-pastilles { gap: .6rem; }
	.pm-pastilles button { width: 34px; height: 34px; }
	.pm-menu-liste button[data-item], .pm-menu-mode { min-height: 46px; }
	.pm-bibli summary { padding: .8rem 0; }
	.pm-tuiles { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
	.pm-tuile { min-height: 76px; }
	.pm-lien { min-height: 44px; }
	.pm-quoi { width: 1.75rem; height: 1.75rem; }
	/* Modales en plein écran. */
	.pm-voile { padding: 0; }
	.pm-modale { width: 100%; height: 100dvh; max-height: none; border: 0; border-radius: 0; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
	.pm-modale-corps { flex: 1; }
	.pm-modale > footer { flex-wrap: wrap; }
	.pm-modale > footer .pm-btn { flex: 1 1 auto; }
	.pm-mesures, .pm-types { grid-template-columns: 1fr; }
	/* Les tiroirs des modules deviennent des feuilles qui montent du bas. */
	.pm-tiroir, [data-pm-main=gauche] .pm-tiroir { position: fixed; inset: auto 0 0 0; width: auto; max-height: 52dvh; z-index: 40; border-radius: calc(var(--rayon) + 6px) calc(var(--rayon) + 6px) 0 0; border-width: var(--trait) 0 0; padding-bottom: env(safe-area-inset-bottom); }
	.pm-tiroir.pm-tiroir-plein { top: 0; max-height: none; border-radius: 0; padding-top: env(safe-area-inset-top); }
	.pm-tiroir-prise { display: block; position: absolute; top: 0; left: 50%; width: 72px; height: 20px; margin-left: -36px; border: 0; background: none; cursor: pointer; }
	.pm-tiroir-prise::before { content: ""; position: absolute; top: 6px; left: 14px; right: 14px; height: 4px; border-radius: 4px; background: var(--encre2); }
	.pm-tiroir > header { position: relative; padding-top: 1rem; }
	/* La saisie d'une longueur se pose en haut de l'écran, là où le clavier ne la cache pas. */
	.pm-saisie { position: fixed; z-index: 45; left: max(.5rem, env(safe-area-inset-left)) !important; right: max(.5rem, env(safe-area-inset-right)); top: calc(env(safe-area-inset-top) + 3.7rem) !important; padding: .4rem; flex-wrap: wrap; background: var(--surface); border: var(--trait) solid var(--filet); border-radius: var(--rayon); box-shadow: var(--ombre); }
	.pm-saisie input { flex: 1 1 8rem; width: auto; min-height: 44px; font-size: 18px; }
	.pm-saisie .pm-btn { box-shadow: none; }
	.pm-saisie-pi .pm-saisie-signes { display: flex; }
	.pm-toast { bottom: calc(env(safe-area-inset-bottom) + 7.5rem); }
	.pm-zoom { display: none; }
	.pm-info, [data-pm-main=gauche] .pm-info { left: .5rem; right: auto; bottom: 3.6rem; max-width: calc(100% - 1rem); }
	.pm-pasapas { grid-template-columns: 48px minmax(0, 1fr) 48px; }
	.pm-pasapas button { min-height: 44px; }
	.pm-formes button { min-height: 60px; }
	.pm-pastilles input[type=color] { width: 44px; height: 34px; }
	.pm-barre-lot { border-right: 0; padding-right: 0; }
	.pm-avis-pile { top: .4rem; }
	.pm-dessin-actions, .pm-bande { bottom: .5rem; }
}

/* Téléphone tenu en travers : outils en colonne, tiroir sur le côté. */
@media (max-width: 960px) and (max-height: 480px) and (orientation: landscape) {
	.pm-app, .pm-app.pm-bas-mi, .pm-app.pm-bas-plein, .pm-app.pm-bas-glisse { --l-tiroir: 50px; --zones: "barre barre barre" "outils scene poignee" "outils scene bas"; --cols: auto minmax(0, 1fr) var(--l-tiroir); --rangs: auto auto minmax(0, 1fr); }
	[data-pm-main=gauche] .pm-app { --zones: "barre barre barre" "poignee scene outils" "bas scene outils"; --cols: var(--l-tiroir) minmax(0, 1fr) auto; }
	.pm-app.pm-bas-mi { --l-tiroir: min(46vw, 340px); }
	.pm-app.pm-bas-plein { --l-tiroir: calc(100vw - 62px); }
	.pm-outils, [data-pm-main=gauche] .pm-outils { flex-direction: column; overflow-x: hidden; overflow-y: auto; border-top: 0; border-inline: var(--trait) solid var(--filet); padding: .3rem .3rem max(.3rem, env(safe-area-inset-bottom)) max(.3rem, env(safe-area-inset-left)); }
	.pm-poignee-bas { border-top: 0; border-inline: var(--trait) solid var(--filet); padding-top: 0; }
	.pm-poignee-bas::before { display: none; }
	.pm-bas-ferme .pm-onglets, .pm-bas-ferme .pm-resume { display: none; }
	.pm-bibli, .pm-fiche { border-inline: var(--trait) solid var(--filet); }
	.pm-prise i { transform: translateX(3px) rotate(-45deg); }
	.pm-bas-plein .pm-prise i { transform: translateX(-3px) rotate(135deg); }
	[data-pm-main=gauche] .pm-prise i { transform: translateX(-3px) rotate(135deg); }
	[data-pm-main=gauche] .pm-bas-plein .pm-prise i { transform: translateX(3px) rotate(-45deg); }
	.pm-pied { display: none; }
	.pm-bas-plein .pm-scene { visibility: visible; }
	.pm-tiroir, [data-pm-main=gauche] .pm-tiroir { inset: 0 0 0 auto; width: min(60vw, 360px); max-height: none; border-radius: 0; border-width: 0 0 0 var(--trait); }
	.pm-tiroir-prise { display: none; }
}

/* ───────────── Écrans tactiles, quelle que soit leur largeur ───────────── */
@media (pointer: coarse) {
	.pm-pasapas { grid-template-columns: 46px minmax(0, 1fr) 46px; }
	.pm-pasapas button, .pm-zoom button { min-height: 44px; height: 44px; min-width: 44px; }
	.pm-btn { min-height: 44px; }
	.pm-btn-icone { min-width: 44px; height: 44px; }
	.pm-bibli input[type=search], .pm-champ input, .pm-champ select, .pm-cotes input, .pm-menu-recherche { min-height: 44px; }
	.pm-menu-liste button[data-item], .pm-menu-mode { min-height: 44px; }
	.pm-case { min-height: 44px; align-items: center; }
	.pm-pastilles button { width: 32px; height: 32px; }
	.pm-repli { width: 30px; height: 64px; }
	.pm-saisie-pi .pm-saisie-signes { display: flex; }
}
/* Une tuile se fait défiler au doigt ; on la prend en la tenant, ou en partant de côté. */
@media (any-pointer: coarse) { .pm-tuile { touch-action: pan-y; } }

/* ───────────── Taille du texte de l'interface ───────────── */
html[data-pm-texte=grand] { font-size: 112.5%; --pm-ech: 1.125; }
html[data-pm-texte=tres] { font-size: 131.25%; --pm-ech: 1.3125; }
html[data-pm-texte] .pm-ic { width: calc(18px * var(--pm-ech)); height: calc(18px * var(--pm-ech)); }
html[data-pm-texte] .pm-btn { min-height: calc(34px * var(--pm-ech)); }
html[data-pm-texte] .pm-btn-icone { min-width: calc(34px * var(--pm-ech)); height: calc(34px * var(--pm-ech)); }
html[data-pm-texte] .pm-logo { height: calc(30px * var(--pm-ech)); }

/* ───────────── Contraste élevé : textes et traits renforcés, focus très visible, quel que soit le design ───────────── */
html[data-pm-contraste=eleve] { --encre2: var(--encre); --filet: var(--encre); --trait: 2px; --grille: color-mix(in srgb, var(--pm-trait) 22%, transparent); --grille-forte: color-mix(in srgb, var(--pm-trait) 48%, transparent); --ombre: 0 0 0 2px var(--encre); }
html[data-pm-contraste=eleve] :focus-visible { outline: 3px solid var(--encre); outline-offset: 2px; box-shadow: 0 0 0 6px var(--surface), 0 0 0 8px var(--encre); }
html[data-pm-contraste=eleve] .pm-barre :focus-visible { outline-color: var(--barre-encre); box-shadow: 0 0 0 6px var(--barre-fond), 0 0 0 8px var(--barre-encre); }
html[data-pm-contraste=eleve] .pm-scene:focus-visible { outline-width: 4px; box-shadow: none; }
html[data-pm-contraste=eleve] .pm-btn, html[data-pm-contraste=eleve] .pm-btn-icone { font-weight: 700; }
html[data-pm-contraste=eleve] .pm-btn:disabled, html[data-pm-contraste=eleve] .pm-btn-icone:disabled { opacity: .6; text-decoration: line-through; }
html[data-pm-contraste=eleve] .pm-btn-icone[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--accent-encre); }
html[data-pm-contraste=eleve] .pm-menu-liste button[data-item]:hover, html[data-pm-contraste=eleve] .pm-menu-liste button[data-item]:focus-visible { background: var(--encre); color: var(--surface); box-shadow: none; }
html[data-pm-contraste=eleve] .pm-menu-liste button[data-item]:hover kbd, html[data-pm-contraste=eleve] .pm-menu-liste button[data-item]:focus-visible kbd { color: inherit; border-color: currentColor; }
html[data-pm-contraste=eleve] a { text-decoration: underline; }
html[data-pm-contraste=eleve] ::placeholder { color: var(--encre); opacity: .85; }
html[data-pm-contraste=eleve] .pm-sel { stroke: var(--pm-trait); stroke-width: 3px; }
html[data-pm-contraste=eleve] .pm-poignee { stroke: var(--pm-trait); stroke-width: 3px; fill: var(--pm-papier); }
html[data-pm-contraste=eleve] .pm-dessin { stroke: var(--pm-trait); stroke-width: 3px; }
html[data-pm-contraste=eleve] .pm-elem .c { stroke-width: 2.2px; }
html[data-pm-contraste=eleve] .pm-elem .d, html[data-pm-contraste=eleve] .pm-elem .t { stroke-width: 1.6px; }
html[data-pm-contraste=eleve] .pm-txt { font-weight: 700; }
html[data-pm-contraste=eleve] .pm-cote, html[data-pm-contraste=eleve] .pm-lettre { fill: var(--pm-trait); }
html[data-pm-contraste=eleve] .pm-tuile:hover, html[data-pm-contraste=eleve] .pm-type:hover { border-color: var(--encre); outline: 2px solid var(--encre); }
html[data-pm-contraste=eleve] .pm-onglets button[aria-selected="true"] { border-bottom-color: var(--encre); }
html[data-pm-contraste=eleve] .pm-poignee-bas::before, html[data-pm-contraste=eleve] .pm-tiroir-prise::before { background: var(--encre); }
@media (forced-colors: active) { .pm-btn-icone[aria-pressed="true"] { outline: 2px solid Highlight; } .pm-etat i { forced-color-adjust: none; } }

/* ───────────── Mouvement réduit ───────────── */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}