/* Polices livrées avec l'app (hors ligne, licence SIL OFL 1.1 : fonts/OFL-*.txt) */
@font-face {
  font-family: "Archivo"; font-style: normal; font-display: swap;
  font-weight: 100 900; font-stretch: 62% 125%;
  src: url(fonts/archivo-latin-wdth-normal.woff2) format("woff2-variations"), url(fonts/archivo-latin-wdth-normal.woff2) format("woff2");
}
@font-face {
  font-family: "Big Shoulders Stencil"; font-style: normal; font-display: swap;
  font-weight: 100 900;
  src: url(fonts/big-shoulders-stencil-latin-wght-normal.woff2) format("woff2-variations"), url(fonts/big-shoulders-stencil-latin-wght-normal.woff2) format("woff2");
}

/* ==== Tokens — direction « gaffer & flight-case » ====
   Interface noir mat chaud (gaffer), surfaces de flight-case, un seul jaune SuperLoc rationné à trois usages :
   état actif / sélection, numéros de source, bouton « Envoyer à SuperLoc ». Rouge Tally = danger seulement. */
:root {
  /* Couleurs nommées */
  --gaffer: #1B1915;        /* fond de l'interface : barres, panneaux */
  --flight: #292620;        /* surfaces élevées : champs, boutons, survol */
  --flight-2: #332F28;      /* appui (pressé), ligne ouverte */
  --rivet: #3D3931;         /* bordures */
  --rivet-2: #5A554B;       /* bordure au survol */
  --craie: #ABA597;         /* texte secondaire, libellés, unités (7,2:1 sur Gaffer) */
  --lin-doux: #D6D1C7;      /* texte tertiaire clair */
  --lin: #F3F1EC;           /* texte principal sur sombre (15,6:1) */
  --jaune: #FFC801;         /* SuperLoc : actif / sélection, numéros, Envoyer à SuperLoc */
  --sur-jaune: #1B1915;     /* texte posé sur le jaune */
  --tally: #D9381E;         /* danger : bordures, fonds (supprimer, surcharge) */
  --tally-texte: #FF6B5A;   /* danger en texte sur sombre (6,6:1) */
  --etat-ok: #7BC67E;       /* à toi, branché, dans le champ */
  --etat-attention: #FF9F43;/* à louer, charge élevée */
  --etat-info: #8FB0EA;     /* image présente */
  --voile: rgba(27, 25, 21, 0.86);   /* fond translucide (messages, boussole) */
  --voile-modal: rgba(20, 18, 15, 0.72);
  /* Plan (rendu du dessin) — hiérarchie d'un plan de feu (USITT) : l'encre noire aux projecteurs, à leur numéro et
     au grip ; l'architecture en gris béton derrière ; le mobilier encore plus discret. Le mode Plateau redéfinit tout plus bas. */
  --pl-sol: #EDEDEA;        /* fond du plan : papier technique neutre */
  --pl-encre: #141414;      /* projecteurs, cadres, grip, caméra, numéros, noms (s'inverse en mode Plateau) */
  --encre-fixe: #141414;    /* encre qui ne s'inverse jamais : chiffres sur le jaune */
  --pl-mur: #8A867E;        /* murs : contour béton fin (l'épaisseur reste à l'échelle) */
  --pl-mur-ame: #D9D6CF;    /* murs : aplat clair entre les deux contours */
  --pl-archi: #5E5A52;      /* portes, fenêtres, formes : plus clair que les sources, plus net que les murs */
  --pl-meuble: #9C978D;     /* mobilier : trait le plus discret du plan */
  --pl-meuble-texte: #7E796F;
  --pl-cote: #6F6B63;       /* cotes : plus légères que les noms des sources */
  --pl-detail: #5C574E;     /* 2e ligne des étiquettes : modeleur, température, girafe */
  --pl-trait: #5C574E;      /* annotations, notes */
  --pl-gris: #8C877D;       /* rayons bloqués, liens d'étiquette */
  --pl-halo: var(--pl-sol); /* détourage des textes du plan */
  --pl-ouverture: #F2EFE9;  /* (ancien nom) découpe des portes et fenêtres : suit maintenant --pl-sol */
  --pl-corps: #FFFFFF;      /* intérieur des symboles */
  --pl-sel: var(--pl-encre);/* sélection sur le plan : trait encre + poignées jaunes */
  --pl-soleil: #E0A800;
  --pl-etq: "Archivo", var(--sans);   /* étiquettes du plan : Archivo semi-étroit, chiffres tabulaires */
  --vignette: #EDEDEA;      /* fond des vignettes de la palette (ne change pas en mode Plateau) */
  /* Typographie : 7 crans d'interface + un titrage */
  --sans: "Archivo", -apple-system, "Segoe UI", system-ui, Roboto, sans-serif;
  --mono: var(--sans);      /* plus de police mono dans l'interface : chiffres tabulaires */
  --plan-mono: var(--pl-etq);   /* étiquettes du plan : passées en Archivo (passage « rendu du plan ») */
  --titre: "Big Shoulders Stencil", "Archivo", Impact, sans-serif;
  --t-1: 11px; --t-2: 12px; --t-3: 13px; --t-4: 15px; --t-5: 18px; --t-6: 24px; --t-7: 36px;
  --t-titre: clamp(44px, 10vw, 64px);
  /* Espacements (base 4) */
  --e-1: 2px; --e0: 4px; --e1: 8px; --e2: 12px; --e3: 16px; --e4: 24px; --e5: 32px;
  /* Rayons, selon la hiérarchie */
  --r-tag: 3px; --r-ctl: 6px; --r-pan: 10px; --r-sheet: 16px;
  /* Élévation : deux niveaux, ombre teintée chaude, lumière du haut */
  --ombre-1: inset 0 1px 0 rgba(255, 250, 235, 0.05), 0 6px 16px rgba(12, 10, 6, 0.28);
  --ombre-2: inset 0 1px 0 rgba(255, 250, 235, 0.06), 0 18px 44px rgba(12, 10, 6, 0.45);
  /* Empilement (ordre d'origine conservé) */
  --z-hud: 5; --z-plan-ui: 7; --z-palette: 8; --z-vue: 15; --z-panneau: 16; --z-panneau-haut: 17; --z-feuille: 18;
  --z-menu: 20; --z-toast: 26; --z-popover: 27; --z-modal: 30; --z-plein-ecran: 50; --z-visionneuse: 60;
  /* Mouvement */
  --d-court: 120ms; --d-panneau: 180ms; --ease-sortie: cubic-bezier(.2, .8, .2, 1);
  /* Cible tactile */
  --cible: 44px;
  /* Barres */
  --bar-h: 56px;
  --status-h: 44px;
  /* Anciens noms, gardés comme alias (le JS et les vieux styles s'y réfèrent peut-être) */
  --noir: var(--gaffer); --gris: var(--flight); --gris2: var(--rivet); --clair: var(--lin);
  --papier: var(--pl-sol); --rouge: var(--tally); --encre: var(--pl-trait);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--gaffer); color: var(--lin);
  font-family: var(--sans); font-size: var(--t-4); line-height: 1.3;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
button, input, select, textarea { font-family: inherit; }

/* ==== États communs : appui, focus clavier, désactivé, mouvement réduit ==== */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--jaune); outline-offset: 2px; box-shadow: 0 0 0 4px var(--gaffer); }
/* champs de saisie : anneau lin (le curseur clignote déjà) — le jaune reste à ce qu'on active */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus-visible, textarea:focus-visible { outline: 2px solid var(--lin); outline-offset: 0; box-shadow: none; }
select:focus-visible { outline-offset: 1px; }
button:disabled, .mini:disabled { opacity: 0.4; cursor: default; }
.tool, .icon, .mini, .menu-item, .pal-row, .chip, .acc-btn, .acc-seg, .li-famille, .li-hit, .li-alt-toggle, .pal-hp-toggle, .pal-fav, .setup-bar button, .cel-puce, .so-m, .so-c, .acc-recent, .pj-ouvrir, .calques .row, .exp-opt {
  transition: background-color var(--d-court) ease-out, border-color var(--d-court) ease-out, color var(--d-court) ease-out, transform var(--d-court) ease-out;
}
.tool:active, .icon:active, .mini:active, .chip:active, .acc-btn:active, .acc-seg:active, .setup-bar button:active, .li-famille:active, .cel-puce:active, .so-m:active, .so-c:active { transform: translateY(1px); }
.tool:disabled:active, .icon:disabled:active, .mini:disabled:active { transform: none; }
/* Libellé visible sous / à côté d'une icône (prêt pour le passage UX) */
.btn-label { font: 500 var(--t-1)/1 var(--sans); font-stretch: 88%; color: inherit; white-space: nowrap; letter-spacing: 0.01em; }
.tool.has-label, .icon.has-label { flex-direction: column; gap: 3px; width: auto; min-width: var(--cible); padding: 0 var(--e0); }
.tool.has-label svg, .icon.has-label svg { width: 20px; height: 20px; }
/* Icônes SVG maison : un seul trait (1,75), extrémités arrondies — y compris les icônes existantes d'index.html */
.ico { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.tool svg[stroke], .tool svg [stroke], .icon svg [stroke], .mini svg [stroke], .rv-btn svg [stroke] { stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.tool svg [stroke-dasharray], .mini svg [stroke-dasharray] { stroke-linecap: butt; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; scroll-behavior: auto !important; }
}

body {
  display: grid;
  grid-template-rows: var(--bar-h) 1fr var(--status-h);
  height: 100dvh;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

.bar {
  display: flex; align-items: center; gap: var(--e2); overflow: hidden; min-width: 0;
  padding: 0 var(--e2); background: var(--gaffer); color: var(--lin);
  user-select: none; -webkit-user-select: none;
}

#topbar { border-bottom: 1px solid var(--rivet); }

.brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex-shrink: 1; }
.logo {
  background: var(--jaune); display: inline-flex; align-items: center;
  padding: 3px 8px; border-radius: var(--r-tag); flex-shrink: 0; line-height: 0;
}
.logo img { height: 24px; width: auto; display: block; }
.fov, .fov-line { pointer-events: none; }
.title {
  background: none; border: none; color: var(--lin);
  font: inherit; font-weight: 600; font-size: var(--t-4);
  padding: 8px 6px; min-height: var(--cible); cursor: text;
  max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border-radius: var(--r-ctl);
}
.title-input {
  font: 600 var(--t-4) var(--sans); color: var(--lin); background: var(--flight); border: 1px solid var(--rivet-2);
  border-radius: var(--r-ctl); padding: 6px 8px; min-height: 40px; width: 34vw; max-width: 320px;
}
.title-input[hidden] { display: none; }
.title-input:focus { border-color: var(--lin); }
.menu-item.armed { color: var(--tally-texte); }

.tools { display: flex; gap: var(--e0); margin: 0 auto; }
.tool, .icon {
  width: var(--cible); height: var(--cible); border: none; border-radius: var(--r-ctl);
  background: none; color: var(--lin); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
}
.tool svg, .icon svg { width: 22px; height: 22px; }
/* outil actif : le jaune, plus un repère de forme (filet bas) lisible en plein soleil */
.tool.active { background: var(--jaune); color: var(--sur-jaune); box-shadow: inset 0 -3px 0 rgba(27, 25, 21, 0.55); }
#btnVerrou.on { background: var(--lin); color: var(--gaffer); }
.tool.verrou { opacity: 0.35; }
#layer-decor.verrou .wall { cursor: not-allowed; }
.icon:disabled { opacity: 0.3; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .title:hover { background: var(--flight); }
  .tool:hover:not(.active):not(:disabled), .icon:hover:not(:disabled) { background: var(--flight); }
}

.actions { display: flex; align-items: center; gap: var(--e0); }

.switch {
  display: inline-flex; align-items: center; gap: var(--e1);
  min-height: var(--cible); padding: 0 var(--e1); cursor: pointer; border-radius: var(--r-ctl);
}
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track {
  width: 40px; height: 22px; border-radius: 11px; background: var(--rivet);
  position: relative; transition: background-color var(--d-court) ease-out;
}
.switch .knob {
  position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--lin); transition: transform var(--d-panneau) var(--ease-sortie);
}
.switch input:checked + .track { background: var(--jaune); }
.switch input:checked + .track .knob { transform: translateX(18px); background: var(--sur-jaune); }
.switch .lbl { font-size: var(--t-3); min-width: 56px; }
.switch input:focus-visible + .track { outline: 2px solid var(--jaune); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .switch:hover { background: var(--flight); } }

#stage {
  position: relative; overflow: hidden; background: var(--pl-sol);
  touch-action: none;
}
#canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; touch-action: none; cursor: crosshair;
}
#canvas.tool-select { cursor: default; }
#canvas.tool-hand { cursor: grab; }
#canvas.panning { cursor: grabbing; }

.floating {
  position: absolute; display: none;
  font: 600 var(--t-4) var(--sans); color: var(--gaffer);
  background: #FFFFFF; border: 2px solid var(--gaffer); border-radius: var(--r-ctl);
  padding: 8px 10px; min-height: var(--cible); width: 96px; text-align: center;
  box-shadow: var(--ombre-1);
  z-index: var(--z-hud);
}
.floating.show { display: block; }
.floating:focus { border-color: var(--gaffer); }
.floating:focus-visible { outline: 3px solid var(--jaune); outline-offset: 0; box-shadow: var(--ombre-1); }
#lenInput.wide { width: 140px; }
#textInput { width: 220px; text-align: left; font-family: var(--sans); font-weight: 500; }

.hint {
  position: absolute; z-index: var(--z-toast); left: 50%; bottom: 14px; transform: translateX(-50%);
  background: var(--voile); color: var(--lin); box-shadow: var(--ombre-1);
  font-size: var(--t-3); padding: 8px 14px; border-radius: var(--r-pan);
  pointer-events: none; opacity: 0; transition: opacity var(--d-panneau) ease-out;
  max-width: 90vw; text-align: center; text-wrap: balance;
}
.hint.show { opacity: 1; }

.status {
  border-top: 1px solid var(--rivet); font-size: var(--t-3);
  justify-content: space-between;
}
.s-left { color: var(--craie); flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-mid { display: flex; align-items: center; gap: 10px; flex: 0 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
#statusbar.has-sel .s-left { flex-basis: 40px; }
.s-mid::-webkit-scrollbar { display: none; }
.s-right { display: flex; align-items: center; gap: 10px; color: var(--craie); white-space: nowrap; flex-shrink: 0; }

.sel { display: inline-flex; align-items: center; gap: 6px; }
.sel[hidden] { display: none; }
.sel label { font-family: var(--sans); color: var(--craie); }
#selLen, #selRayon {
  width: 76px; min-height: 34px; font: 600 var(--t-3) var(--sans); text-align: right;
  background: var(--flight); color: var(--lin); border: 1px solid var(--rivet); border-radius: var(--r-ctl); padding: 4px 8px;
}
#selLen:focus, #selRayon:focus { border-color: var(--lin); }

.mini {
  min-height: 34px; padding: 0 12px; border-radius: var(--r-ctl); border: 1px solid var(--rivet);
  background: var(--flight); color: var(--lin); font: 500 var(--t-3) var(--sans); cursor: pointer;
}
.mini:active:not(:disabled) { background: var(--flight-2); }
@media (hover: hover) and (pointer: fine) { .mini:hover:not(:disabled) { border-color: var(--rivet-2); background: var(--flight-2); } }
#btnDelete { border-color: var(--tally); color: var(--tally-texte); }
.mini .ico { width: 18px; height: 18px; vertical-align: middle; }

.menu {
  position: absolute; top: calc(var(--bar-h) + env(safe-area-inset-top) + 4px); right: 8px;
  background: var(--gaffer); border: 1px solid var(--rivet); border-radius: var(--r-pan);
  padding: 6px; min-width: 260px; z-index: var(--z-menu);
  box-shadow: var(--ombre-2);
}
.menu[hidden] { display: none; }
.menu { max-height: calc(100dvh - var(--bar-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 12px); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.menu-item, a.menu-item { text-decoration: none; }
.menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: var(--cible); padding: 0 12px; border: none; border-radius: var(--r-ctl);
  background: none; color: var(--lin); font: inherit; text-align: left; cursor: pointer;
}
.menu-item:active { background: var(--flight-2); }
.menu-item:focus-visible { outline-offset: -2px; box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .menu-item:hover { background: var(--flight); } .calques .row:hover { background: var(--flight); } }
/* cases à cocher : lin (une liste de cases jaunes noierait le seul accent) ; les interrupteurs et curseurs gardent le jaune */
.menu-item.check input, .calques .row input { width: 22px; height: 22px; accent-color: var(--lin); flex-shrink: 0; margin: 0; }
.menu-item.version { color: var(--craie); font-size: var(--t-2); cursor: default; }
.menu-item.version:hover, .menu-item.version:active { background: none; }
/* b21 : cagnotte libre — bouton flottant discret (un peu effacé tant qu'on ne le survole pas) et sa petite carte */
.icon.flottant.cagnotte { opacity: 0.72; }
.icon.flottant.cagnotte:hover, .icon.flottant.cagnotte[aria-expanded="true"] { opacity: 1; }
.icon.flottant[hidden] { display: none; }
.cagnotte-pop { position: absolute; right: calc(var(--cible) + 12px); top: 0; width: min(300px, calc(100vw - 96px)); padding: 14px; border: 1px solid var(--rivet); border-radius: var(--r-pan, 12px); background: var(--voile); color: var(--lin); box-shadow: var(--ombre-1); }
.cagnotte-pop[hidden] { display: none; }
.cagnotte-pop .cg-titre { margin: 0 0 6px; font-weight: 650; }
.cg-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; flex-wrap: wrap; }
.cg-actions a.mini { text-decoration: none; display: inline-flex; align-items: center; }
.menu-item.calques { flex-direction: column; align-items: stretch; gap: 0; padding: 4px 0; cursor: default; }
.menu-item.calques:hover, .menu-item.calques:active { background: none; }
.calques .row {
  display: flex; align-items: center; gap: 10px; min-height: var(--cible); padding: 0 12px; border-radius: var(--r-ctl); cursor: pointer;
}
.calques .head { padding: 4px 12px; font-size: var(--t-2); color: var(--craie); }
.menu-sep { height: 1px; background: var(--rivet); margin: 6px 4px; }

/* Éléments du plan */
.wall { stroke: var(--pl-mur); stroke-linecap: butt; fill: none; }
.wall-ame { stroke: var(--pl-mur-ame); stroke-linecap: butt; fill: none; pointer-events: none; }
.wall.selected { stroke: var(--encre-fixe); }
.wall-ame.selected { stroke: var(--jaune); }
/* Chaque calque donne sa couleur d'encre aux traits « par défaut » (currentColor) ; une couleur choisie à la main reste écrite */
#world { color: var(--pl-encre); }
#layer-mobilier { color: var(--pl-meuble); }
#layer-formes, #layer-ouvertures { color: var(--pl-archi); }
.ouv-cut { fill: var(--pl-sol); }
#world .corps { fill: var(--pl-corps); }
#world .perso-meche { stroke: var(--pl-corps); }   /* v0.3 : mèches de la femme — blanc sur le papier, sombre en mode Plateau (cheveux clairs) */
.wall-hit { stroke: transparent; fill: none; stroke-linecap: square; pointer-events: stroke; }
.draft-line { stroke: var(--jaune); stroke-width: 3; fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 8 6; }
.draft-preview { stroke: var(--jaune); stroke-opacity: 0.35; fill: none; stroke-linecap: square; }
.dim {
  font-family: var(--pl-etq); font-weight: 500; font-size: 11px; font-stretch: 87.5%; fill: var(--pl-cote); font-variant-numeric: tabular-nums;
  paint-order: stroke; stroke: var(--pl-halo); stroke-width: 3.5px; stroke-linejoin: round;
  pointer-events: none;
}
.dim.live { font-size: 15px; font-weight: 600; fill: var(--pl-encre); }
.dim.typed { fill: var(--pl-encre); stroke: var(--jaune); }
.snap-ring { fill: none; stroke: var(--jaune); stroke-width: 3; }
.snap-dot { fill: var(--jaune); }
/* Sélection : poignées jaunes cerclées d'encre (le jaune = ce qu'on manipule ; le rouge reste au danger) */
.handle { fill: var(--jaune); stroke: var(--pl-sel); stroke-width: 2.5; }
.handle-hit { fill: transparent; }
.coin-lbl { font-family: var(--sans); color: var(--lin); white-space: nowrap; }
.coin-ring { fill: rgba(255, 200, 1, 0.22); stroke: var(--pl-sel); stroke-width: 2.5; }
.dim.coin-r { fill: var(--pl-encre); }
.ink { fill: var(--pl-trait); fill-opacity: 0.92; stroke: none; }
.note { font-family: var(--sans); font-weight: 500; fill: var(--pl-trait); }

@media (max-width: 720px) {
  :root { --status-h: 56px; }
  .switch { display: none; }               /* propre / détaillé : dans le menu, calque Annotations */
  .title { max-width: 32vw; font-size: var(--t-4); }
  #statusMeasure { display: none; }         /* le total s'affiche dans la palette et le menu */
  #statusbar .tools[hidden] { display: none; }
  #statusbar.has-sel #btnFit { display: none; }
  .s-right #statusZoom { display: none; }
  .s-left { display: none; }
  .s-mid { flex-grow: 1; justify-content: center; }
  /* Sur téléphone, les outils passent en bas, sous le pouce (déplacés par app.js) */
  #statusbar .tools { margin: 0; gap: 2px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  #statusbar .tools::-webkit-scrollbar { display: none; }
  #statusbar .tool { width: 44px; height: 44px; flex-shrink: 0; }
  .sel label { display: none; }
  #selLen, #selRayon { width: 64px; }
  /* Objet sélectionné : la barre s'agrandit sur deux ou trois lignes au lieu de défiler à l'aveugle */
  body { grid-template-rows: var(--bar-h) 1fr auto; }
  #statusbar { min-height: var(--status-h); }
  #statusbar.has-sel { padding: 6px 8px; }
  #statusbar.has-sel .s-mid { overflow: visible; flex-wrap: wrap; justify-content: center; }
  #statusbar.has-sel .sel { flex-wrap: wrap; justify-content: center; row-gap: 6px; column-gap: 6px; }
  #statusbar.has-sel .swatches { order: 20; }
  #statusbar.has-sel #btnColTarget { order: 19; }
  #statusbar.has-sel #btnRotL, #statusbar.has-sel #btnRotR, #statusbar.has-sel #btnDup, #statusbar.has-sel #btnDeleteObj { order: 30; }
}

/* Catalogue */
.palette {
  position: absolute; left: 8px; top: 8px; bottom: 8px; width: min(380px, calc(100vw - 16px));
  background: var(--gaffer); color: var(--lin); border: 1px solid var(--rivet); border-radius: var(--r-pan);
  display: flex; flex-direction: column; z-index: var(--z-palette); box-shadow: var(--ombre-2);
}
.palette[hidden] { display: none; }
.pal-head { display: flex; align-items: center; gap: 6px; padding: 8px; border-bottom: 1px solid var(--rivet); }
#palSearch {
  flex-grow: 1; min-width: 0; width: 0; min-height: var(--cible); font: 500 var(--t-4) var(--sans); color: var(--lin);
  background: var(--flight); border: 1px solid var(--rivet); border-radius: var(--r-ctl); padding: 6px 10px;
}
#palSearch:focus { border-color: var(--lin); }
#palSearch::placeholder, #listeSearch::placeholder, #pkRecherche::placeholder, .acc-titre::placeholder { color: var(--craie); opacity: 0.85; }
.pal-list { flex-grow: 1; overflow-y: auto; padding: 4px; -webkit-overflow-scrolling: touch; }
/* en-têtes de rubrique : casse normale, pas de capitales espacées */
.pal-cat { font: 600 var(--t-3) var(--sans); color: var(--craie); padding: 12px 10px 4px; }
.pal-row {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 5px 8px;
  background: none; border: none; border-radius: var(--r-ctl); color: var(--lin); font: inherit; text-align: left; cursor: pointer;
}
.pal-row:active { background: var(--flight-2); }
.pal-row:focus-visible { outline-offset: -2px; box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .pal-row:hover { background: var(--flight); } }
.pal-sym { width: 40px; height: 40px; flex-shrink: 0; background: var(--vignette); border-radius: var(--r-ctl); display: flex; align-items: center; justify-content: center; }
.pal-sym svg { width: 34px; height: 34px; }
.pal-txt { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pal-nom { font-size: var(--t-4); font-weight: 500; line-height: 1.25; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }   /* nom complet sur deux lignes plutôt que coupé */
.pal-meta { font: 400 var(--t-2) var(--sans); color: var(--craie); }
/* prix : information, pas un appel — en clair, chiffres tabulaires (le jaune est réservé) */
.pal-prix { font: 600 var(--t-3) var(--sans); color: var(--lin); flex-shrink: 0; }
.pal-prix.na { color: var(--craie); font-weight: 400; }
.pal-foot { padding: 8px 12px; font-size: var(--t-2); color: var(--craie); border-top: 1px solid var(--rivet); display: flex; flex-direction: column; gap: 2px; }
.pal-total { font: 600 var(--t-3) var(--sans); color: var(--lin); }
.pal-total:empty { display: none; }
.obj-name { font: 600 var(--t-3) var(--sans); max-width: 26vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#btnDeleteObj { border-color: var(--tally); color: var(--tally-texte); }
.mini.del { display: inline-flex; align-items: center; gap: 6px; }
.mini.del svg { width: 18px; height: 18px; }

/* Objets sur le plan */
.obj-sym path, .obj-sym rect { vector-effect: non-scaling-stroke; }
/* Faisceau : couleur et opacité portées par les attributs de chaque anneau (jamais en CSS, qui l'emporterait sur l'attribut) */
.beam { stroke: none; pointer-events: none; }
/* Bord du faisceau : un trait net, ambre foncé (la teinte du faisceau assombrie), plein ≥ 50 % d'intensité, pointillé en dessous.
   Il porte la forme du cône à l'impression en noir et blanc ; le voile reste pour la douceur. */
.beam-edge { fill: none; pointer-events: none; stroke-linecap: butt; }
[data-rendu="ambiance"] .beam-edge { display: none; }
.frame-diff { stroke-linecap: butt; }
.frame-neg { stroke-linecap: butt; }
/* Sélection : double anneau — encre épaisse dessous, jaune dessus : lisible sur le papier, sur un faisceau jaune et sur le sol sombre */
.obj-ring-fond { fill: none; stroke: var(--encre-fixe); stroke-width: 5; stroke-opacity: 0.9; pointer-events: none; }
.obj-ring { fill: none; stroke: var(--jaune); stroke-width: 2.5; pointer-events: none; }
.obj-ring-fond.multi { stroke-width: 4; }
.obj-ring.multi { stroke-width: 2; stroke-dasharray: 6 4; }
.rot-handle { fill: var(--jaune); stroke: var(--encre-fixe); stroke-width: 2.5; }
.rot-line { stroke: var(--encre-fixe); stroke-width: 1.5; stroke-dasharray: 3 3; }
/* Étiquettes : numéro (pastille) > nom court > détails. Archivo semi-étroit, chiffres tabulaires, taille écran fixe */
/* (longhands et pas le raccourci « font: … var() » suivi de font-stretch : Chrome sérialise alors la règle vide, et le PDF perdait la police) */
.obj-label { font-family: var(--pl-etq); font-weight: 600; font-size: 12px; font-stretch: 87.5%; font-variant-numeric: tabular-nums; fill: var(--pl-encre); paint-order: stroke; stroke: var(--pl-halo); stroke-width: 3.5px; stroke-linejoin: round; pointer-events: none; }
.obj-label .lbl-det { font-size: 10.5px; font-weight: 500; fill: var(--pl-detail); }

@media (max-width: 720px) {
  .palette { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 52%; border-radius: var(--r-sheet) var(--r-sheet) 0 0; border-bottom: none; }
  .obj-name { max-width: 22vw; }
}

/* Barre objet : modeleur, nom, longueur, couleurs */
.mini.txt { font: 500 var(--t-3) var(--sans); width: 110px; }
.mini.txt.num { width: 64px; text-align: right; }
.mini.txt:focus, select.mini:focus { border-color: var(--lin); }
select.mini { appearance: none; -webkit-appearance: none; padding-right: 26px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ABA597' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E"); background-position: right 6px center; background-size: 16px 16px; background-repeat: no-repeat; }
.mini[hidden] { display: none; }
.swatches { display: inline-flex; gap: 4px; align-items: center; }
.swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; box-shadow: 0 0 0 1px rgba(255,255,255,0.15) inset; transition: transform var(--d-court) ease-out; }
.swatch.on { border-color: var(--jaune); transform: scale(1.12); }
.size-handle { fill: var(--jaune); stroke: var(--pl-sel); stroke-width: 2; }
.obj-label.forme-label { font-weight: 500; font-size: 11px; fill: var(--pl-meuble-texte); }
/* Palette : puces de modeleurs */
.pal-row { cursor: pointer; }
.pal-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 2px 10px 2px 4px; border-radius: var(--r-ctl); border: 1px solid var(--rivet); background: var(--flight); color: var(--lin); font: 500 var(--t-2) var(--sans); cursor: pointer; }
.chip svg { width: 26px; height: 26px; background: var(--vignette); border-radius: var(--r-tag); }
.chip.def { border-color: var(--lin-doux); }
.chip:active { background: var(--flight-2); }
@media (hover: hover) and (pointer: fine) { .chip:hover { border-color: var(--rivet-2); background: var(--flight-2); } }
@media (max-width: 720px) {
  .mini.txt { width: 84px; }
  .swatch { width: 20px; height: 20px; }
  .swatches { gap: 3px; }
  /* barre de sélection : défile horizontalement plutôt que de couper le bouton Supprimer */
  .s-mid { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; justify-content: flex-start; padding: 0 2px; }
  .s-mid::-webkit-scrollbar { display: none; }
  .sel > * { flex-shrink: 0; }
  #objName { display: none; }
  .mini.del span { display: none; }
  .mini.del { padding: 0 8px; }
  .mini.txt { width: 76px; }
  #btnRotL, #btnRotR { padding: 0 9px; }
}

/* v0.2 — deux palettes, grille, cible couleur */
/* Chevron SVG (remplace les ▾ ▴ ▸ en caractères) : dessiné par masque, couleur = currentColor */
.pal-row.has-modifs .pal-nom::after, .li-chev, .pal-hp-toggle > span:first-child, .tl-reduire {
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
}
.pal-row.has-modifs .pal-nom::after { content: ''; display: inline-block; width: 16px; height: 16px; margin-left: 4px; vertical-align: -3px; background: var(--craie); -webkit-mask: var(--chev) center / contain no-repeat; mask: var(--chev) center / contain no-repeat; transition: transform var(--d-panneau) var(--ease-sortie); }
.pal-row.open { background: var(--flight); }
.pal-row.open .pal-nom::after { transform: rotate(180deg); }
/* bouton bascule activé : fond relevé + filet jaune (état actif), le texte reste lisible */
.mini.on { background: var(--flight-2); color: var(--lin); border-color: var(--rivet-2); box-shadow: inset 0 -2px 0 var(--jaune); }
.mini.tgt { padding: 0 8px; }
.mini.tgt.on { color: var(--lin); }
/* action principale d'une fenêtre : pleine, en lin (le plein jaune est réservé à « Envoyer à SuperLoc ») */
.btn-primaire, .exp-actions .mini.on, #fdChoisir, #fdAppliquer, #ptGo, #pkOk, #cvAjouter {
  background: var(--lin); color: var(--gaffer); border-color: var(--lin); box-shadow: none; font-weight: 600;
}
@media (hover: hover) and (pointer: fine) { .btn-primaire:hover, .exp-actions .mini.on:hover, #fdChoisir:hover, #fdAppliquer:hover, #ptGo:hover, #pkOk:hover, #cvAjouter:hover { background: #FFFFFF; border-color: #FFFFFF; } }
#listeEnvoyer { background: var(--jaune); color: var(--sur-jaune); border-color: var(--jaune); box-shadow: none; font-weight: 600; }
@media (hover: hover) and (pointer: fine) { #listeEnvoyer:hover { background: #FFD43A; border-color: #FFD43A; } }

/* Menu Lumière : marques */
.pal-initiale { font: 800 var(--t-3) var(--sans); font-stretch: 88%; color: var(--gaffer); letter-spacing: 0.02em; }
.pal-retour .pal-initiale, .pal-pack-edit .pal-initiale { font-size: 0; color: var(--gaffer); }
.pal-retour .pal-initiale::before, .pal-pack-edit .pal-initiale::before { content: ''; width: 22px; height: 22px; background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.pal-retour .pal-initiale { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E"); }
.pal-pack-edit .pal-initiale { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l3.5-.8L19 7.7a1.5 1.5 0 000-2.1l-.6-.6a1.5 1.5 0 00-2.1 0L4.8 16.5z'/%3E%3C/svg%3E"); }
.sw-sep { width: 1px; height: 18px; background: var(--rivet); margin: 0 3px; }
.ink-line { stroke-opacity: 0.92; }
.dim.trait { fill: var(--pl-trait); font-weight: 500; }
@media (max-width: 720px) { .mini.del span, #btnDup span { display: none; } #btnDup, #btnDupWall { padding: 0 8px; } }

/* Barre de sélection dense (iPad paysage) : Dupliquer en icône, pastilles plus petites */
#btnDup, #btnDupWall { display: inline-flex; align-items: center; gap: 6px; }
#btnDup svg, #btnDupWall svg { width: 18px; height: 18px; }
@media (max-width: 1280px) {
  #btnDup span, #btnDupWall span { display: none; }
  #btnDup, #btnDupWall { padding: 0 8px; }
  .swatch { width: 20px; height: 20px; }
  .swatches { gap: 3px; }
}

/* Liste matériel */
.liste { position: absolute; inset: 0; top: calc(var(--bar-h) + env(safe-area-inset-top)); bottom: 0; background: var(--gaffer); color: var(--lin); z-index: var(--z-vue); display: flex; flex-direction: column; }
.liste[hidden] { display: none; }
.li-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--rivet); flex-wrap: wrap; }
.li-titre { display: flex; flex-direction: column; min-width: 0; }
.li-sup { font: 500 var(--t-3) var(--sans); color: var(--craie); }
.li-titre strong { font-size: var(--t-5); font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.li-scroll { flex-grow: 1; overflow-y: auto; padding: 8px 16px 24px; -webkit-overflow-scrolling: touch; }
.li-sec { margin: 12px 0 18px; }
.li-sec h3 { font: 600 var(--t-4) var(--sans); margin: 8px 0 2px; }
.li-hint { color: var(--craie); font-size: var(--t-2); margin: 0 0 8px; }
.li-grp { font: 600 var(--t-3) var(--sans); color: var(--craie); padding: 14px 0 4px; }
.li-row { display: grid; grid-template-columns: 52px 1fr auto 76px auto; gap: 10px; align-items: center; min-height: var(--cible); padding: 4px 8px; border-radius: var(--r-ctl); border-bottom: 1px solid rgba(243, 241, 236, 0.06); }
.li-row.li-row-r { grid-template-columns: 52px minmax(0, 1fr) minmax(110px, 220px) auto 76px 36px; }
.li-rem { min-width: 0; width: 100%; height: 34px; padding: 0 10px; font: 400 var(--t-3) var(--sans); background: transparent; border: 1px dashed var(--rivet); border-radius: var(--r-ctl); color: var(--lin); }
.li-rem:focus, .li-rem:not(:placeholder-shown) { border-style: solid; background: var(--flight); }
.li-rem::placeholder { color: var(--craie); opacity: 0.85; }   /* ≥ 4,5:1 */
.li-ou { white-space: normal; }
.li-portee { flex-wrap: wrap; max-width: 100%; }
.li-tab:first-child { font-weight: 700; }
@media (hover: hover) and (pointer: fine) { .li-row:hover { background: var(--flight); } .li-hit:hover { background: var(--flight); } }
.li-code { font: 500 var(--t-2) var(--sans); color: var(--craie); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums slashed-zero; }
.li-nom { min-width: 0; font-size: var(--t-4); }
.li-badge { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: var(--r-tag); border: 1px solid var(--rivet); font: 500 var(--t-1) var(--sans); color: var(--craie); vertical-align: middle; }
.li-badge.on { border-color: var(--lin-doux); color: var(--lin); }
.li-alerte { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: var(--r-tag); background: var(--tally); color: #FFFFFF; font: 600 var(--t-1) var(--sans); vertical-align: middle; }
.li-q { display: inline-flex; align-items: center; gap: 2px; }
.li-q .mini { min-width: 34px; padding: 0 8px; }
.li-qte { width: 52px; text-align: center; }
.li-fixe { font: 600 var(--t-4) var(--sans); padding: 0 8px; }
.li-prix { font: 600 var(--t-3) var(--sans); color: var(--lin); text-align: right; white-space: nowrap; }
.li-del { padding: 0 8px; }
.li-del svg { width: 16px; height: 16px; }
.li-vide { color: var(--craie); font-size: var(--t-3); padding: 8px; }
#listeSearch { width: 100%; min-height: var(--cible); font: 500 var(--t-4) var(--sans); color: var(--lin); background: var(--flight); border: 1px solid var(--rivet); border-radius: var(--r-ctl); padding: 6px 12px; }
#listeSearch:focus { border-color: var(--lin); }
#listeResults { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.li-hit { display: grid; grid-template-columns: 52px 1fr auto 70px; gap: 10px; align-items: center; min-height: var(--cible); padding: 4px 8px; border: none; border-radius: var(--r-ctl); background: none; color: var(--lin); font: inherit; text-align: left; cursor: pointer; }
.li-hit:active { background: var(--flight-2); }
.li-meta { font: 400 var(--t-2) var(--sans); color: var(--craie); }
.li-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--rivet); font: 650 var(--t-4) var(--sans); color: var(--lin); flex-wrap: wrap; }
.li-note { font: 400 var(--t-1) var(--sans); color: var(--craie); }
.li-export { width: 100%; font: var(--t-2) var(--plan-mono); background: var(--flight); color: var(--lin); border: 1px solid var(--rivet); border-radius: var(--r-ctl); padding: 8px; margin-top: 12px; }
.li-export[hidden] { display: none; }
#listeFlash { bottom: 64px; }
#btnListe.active { background: var(--jaune); color: var(--sur-jaune); }
@media (max-width: 720px) {
  .li-row { grid-template-columns: 1fr auto; grid-template-areas: "nom prix" "code q"; row-gap: 4px; }
  .li-code { grid-area: code; } .li-nom { grid-area: nom; } .li-q { grid-area: q; justify-self: end; } .li-prix { grid-area: prix; } .li-del { grid-area: q; justify-self: start; margin-left: 140px; }
  .li-row.li-row-r { grid-template-columns: 1fr auto 36px; grid-template-areas: "nom nom prix" "rem rem rem" "code q del"; }
  .li-row-r .li-rem { grid-area: rem; }
  .li-row-r > .li-del, .li-row-r > span:last-child:not(.li-prix) { grid-area: del; justify-self: end; margin-left: 0; }
  .li-hit { grid-template-columns: 1fr auto; }
  .li-hit .li-code, .li-hit .li-meta { display: none; }
}

.li-zero .li-nom, .li-zero .li-code { color: var(--craie); }
.li-alt-toggle { display: flex; align-items: center; gap: 8px; width: 100%; min-height: var(--cible); padding: 0 8px; margin: 2px 0 6px; border: 1px dashed var(--rivet); border-radius: var(--r-ctl); background: none; color: var(--craie); font: 500 var(--t-3) var(--sans); cursor: pointer; text-align: left; }
@media (hover: hover) and (pointer: fine) { .li-alt-toggle:hover { border-color: var(--rivet-2); color: var(--lin); } }
.li-chev { display: inline-block; width: 16px; height: 16px; flex-shrink: 0; font-size: 0; background: currentColor; -webkit-mask: var(--chev) center / contain no-repeat; mask: var(--chev) center / contain no-repeat; transform: rotate(-90deg); transition: transform var(--d-panneau) var(--ease-sortie); }
.li-alt-toggle[aria-expanded="true"] .li-chev { transform: none; }
.li-familles { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 8px; }
/* filtres : actif = plein lin (pas de jaune sur un filtre) */
.li-famille { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--rivet); border-radius: var(--r-ctl); background: none; color: var(--lin-doux); font: 500 var(--t-3) var(--sans); cursor: pointer; }
.li-famille span { font: 600 var(--t-1) var(--sans); color: var(--craie); }
@media (hover: hover) and (pointer: fine) { .li-famille:hover { border-color: var(--rivet-2); } }
.li-famille.on { border-color: var(--lin); color: var(--gaffer); background: var(--lin); }
.li-famille.on span { color: var(--gaffer); }
.li-alt { opacity: 0.85; }
.li-sub { font: 600 var(--t-2) var(--sans); color: var(--lin-doux); padding: 8px 8px 2px; }
.li-filtre { width: 100%; min-height: var(--cible); font: 500 var(--t-4) var(--sans); color: var(--lin); background: var(--flight); border: 1px solid var(--rivet); border-radius: var(--r-ctl); padding: 4px 12px; margin: 0 0 4px; }
.li-filtre:focus { border-color: var(--lin); }
.li-row .li-badge[title] { cursor: help; }

.obj-ring.multi { stroke-dasharray: 4 3; stroke-width: 1.5; }
.marquee { fill: var(--jaune); fill-opacity: 0.1; stroke: var(--pl-sel); stroke-width: 1.5; stroke-dasharray: 5 4; }
/* Téléphone : 9 outils de 36 px tiennent en 390 px ; la Main disparaît (le doigt sur le vide déplace déjà le plan) et « Ajuster » passe dans le menu */
@media (max-width: 720px) { #statusbar .tool { width: 36px; height: 44px; } #statusbar .tool[data-tool="hand"] { display: none; } #statusbar #btnFit { display: none; } .s-right { gap: 0; } }
.sel-x { color: var(--craie); }
.sel-x[hidden] { display: none; }
#selW, #selH { width: 58px; }

/* Projet et scènes */
select.mini.scene { max-width: 30vw; min-height: 34px; font-weight: 600; }
select.mini.scene[hidden] { display: none; }
body.scenes .title { max-width: 22vw; min-width: 72px; }
@media (max-width: 1280px) { body.scenes .switch .lbl { display: none; } }   /* iPad paysage : les libellés des interrupteurs cèdent la place au sélecteur de scène */
@media (max-width: 720px) { body.scenes .title { display: none; } select.mini.scene { max-width: 44vw; } }
.accueil { position: absolute; inset: 0; z-index: var(--z-modal); background: var(--voile-modal); display: flex; align-items: center; justify-content: center; padding: 16px; }
.accueil[hidden] { display: none; }
.acc-card { background: var(--gaffer); color: var(--lin); border: 1px solid var(--rivet); border-radius: var(--r-sheet); padding: 24px 24px 18px; width: min(580px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; box-shadow: var(--ombre-2); display: flex; flex-direction: column; gap: 10px; }
.acc-card .logo { align-self: flex-start; }
.acc-sous { margin: 6px 0 0; font: 500 var(--t-3) var(--sans); color: var(--craie); }
.acc-card h2 { margin: 0 0 4px; font-size: var(--t-6); font-weight: 650; line-height: 1.15; letter-spacing: -0.01em; }
/* Le seul moment typographique fort de l'app : le titrage au pochoir des flight-cases */
#accueil .acc-card { gap: 12px; }
#accueil .acc-card > *, #exportDlg .acc-card > *, #aideDlg .acc-card > * { flex-shrink: 0; }   /* la carte défile, ses blocs ne s'écrasent pas */
#accueil h2.acc-nom { margin: 14px 0 0; font: 800 var(--t-titre)/0.9 "Archivo", sans-serif; font-stretch: 90%; letter-spacing: -0.03em; color: var(--lin); }
/* Le « t » de plateau est la marque au sol (adhésif jaune en T), posée sur la ligne de base */
#accueil h2.acc-nom { display: flex; align-items: baseline; }
#accueil h2.acc-nom .acc-t { display: inline-block; position: relative; top: 0.0757em; margin: 0 -0.012em 0 0.004em; }
#accueil h2.acc-nom .acc-t svg { display: block; width: 0.6507em; height: 0.7567em; }
#accueil .acc-by { margin: 6px 0 0; font: 600 0.82rem/1.2 var(--ui, "Archivo"), sans-serif; letter-spacing: 0.04em; color: var(--lin); opacity: 0.62; }
#accueil .acc-sous { margin: 0 0 8px; }
.acc-lbl { margin: 6px 0 -4px; font: 600 var(--t-3) var(--sans); color: var(--craie); }
.acc-titre { width: 100%; min-height: var(--cible); font: 500 var(--t-4) var(--sans); color: var(--lin); background: var(--flight); border: 1px solid var(--rivet); border-radius: var(--r-ctl); padding: 6px 12px; }
.acc-titre:focus { border-color: var(--lin); }
.acc-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.acc-btn { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; text-align: left; padding: 14px; min-height: 88px; border: 1px solid var(--rivet); border-radius: var(--r-pan); background: var(--flight); color: var(--lin); font: inherit; cursor: pointer; }
.acc-btn strong { font-size: var(--t-4); font-weight: 650; }
.acc-btn span { font-size: var(--t-2); color: var(--craie); line-height: 1.4; }
.acc-btn:active { background: var(--flight-2); }
@media (hover: hover) and (pointer: fine) { .acc-btn:hover { border-color: var(--rivet-2); background: var(--flight-2); } }
/* « Plan simple » : le départ le plus courant, en action principale */
#accSimple { background: var(--lin); border-color: var(--lin); color: var(--gaffer); }
#accSimple span { color: #57524A; }
@media (hover: hover) and (pointer: fine) { #accSimple:hover { background: #FFFFFF; border-color: #FFFFFF; } }
.acc-note { margin: 2px 0 0; font-size: var(--t-2); color: var(--craie); line-height: 1.4; }
.acc-cat { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--rivet); border-radius: var(--r-pan); overflow: hidden; }
.acc-seg { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left; padding: 12px; min-height: var(--cible); border: none; background: var(--flight); color: var(--craie); font: inherit; cursor: pointer; }
.acc-seg + .acc-seg { border-left: 1px solid var(--rivet); }
.acc-seg strong { font-size: var(--t-4); font-weight: 650; color: var(--lin); }
.acc-seg span { font-size: var(--t-2); line-height: 1.4; }
@media (hover: hover) and (pointer: fine) { .acc-seg:not(.on):hover { background: var(--flight-2); } }
.acc-seg.on { background: var(--jaune); color: #4A3B00; }
.acc-seg.on strong { color: var(--sur-jaune); }
.acc-seg:focus-visible { outline: 2px solid var(--lin); outline-offset: -4px; box-shadow: none; }
@media (max-width: 480px) { .acc-choix { grid-template-columns: 1fr; } .acc-btn { min-height: 0; } }
.menu-item .m-alt { color: var(--craie); font-size: var(--t-2); margin-left: auto; }
.menu-item strong { font-weight: 600; }
.li-portee { display: inline-flex; gap: 4px; margin-top: 4px; }
.li-portee[hidden] { display: none; }
.li-portee .mini { min-height: 32px; padding: 0 10px; font-size: var(--t-2); }
.li-row.li-ro .li-q { font: 600 var(--t-4) var(--sans); justify-content: center; min-width: 40px; }

/* Export PDF */
.exp-opts { display: flex; flex-direction: column; gap: 4px; }
.exp-opt { display: flex; align-items: center; gap: 10px; min-height: var(--cible); padding: 0 8px; border-radius: var(--r-ctl); cursor: pointer; font-size: var(--t-4); line-height: 1.3; }
@media (hover: hover) and (pointer: fine) { .exp-opt:hover { background: var(--flight); } }
.exp-opt input { width: 22px; height: 22px; accent-color: var(--lin); flex-shrink: 0; margin: 0; }
.exp-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.exp-actions .mini { min-height: var(--cible); padding: 0 16px; }

/* Liste : durée de location et dégressif */
.li-duree { display: flex; align-items: center; gap: 6px; }
.li-lbl { font: 400 var(--t-2) var(--sans); color: var(--craie); }
.li-duree .mini { min-height: 34px; min-width: 34px; padding: 0 10px; font-size: var(--t-4); line-height: 1; }
#joursVal {
  width: 42px; min-height: 34px; text-align: center; font: 600 var(--t-4) var(--sans);
  background: var(--flight); color: var(--lin); border: 1px solid var(--rivet); border-radius: var(--r-ctl); padding: 2px 4px;
}
#joursVal:focus { border-color: var(--lin); }
.li-coef { font: 600 var(--t-2) var(--sans); color: var(--craie); min-width: 34px; }

/* Fiche d'un projecteur */
.fiche {
  position: absolute; right: 12px; top: calc(var(--bar-h) + env(safe-area-inset-top) + 12px); width: 300px;
  background: var(--gaffer); color: var(--lin); border: 1px solid var(--rivet); border-radius: var(--r-pan);
  z-index: var(--z-panneau); box-shadow: var(--ombre-2);
}
.fiche[hidden] { display: none; }
.fi-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 6px 14px; border-bottom: 1px solid var(--rivet); }
.fi-head strong { font-size: var(--t-4); font-weight: 650; }
.fi-corps { padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.fi-champ { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: var(--t-3); color: var(--craie); }
.fi-champ.col { flex-direction: column; align-items: stretch; gap: 4px; }
.fi-unite { display: inline-flex; align-items: center; gap: 5px; font: 400 var(--t-2) var(--sans); color: var(--craie); }
.fi-champ input, .fi-champ textarea {
  min-height: 40px; width: 104px; font: 600 var(--t-4) var(--sans); color: var(--lin);
  background: var(--flight); border: 1px solid var(--rivet); border-radius: var(--r-ctl); padding: 4px 8px;
}
.fi-champ input::placeholder, .fi-champ textarea::placeholder { color: var(--craie); opacity: 0.85; font-weight: 400; }
.fi-champ input#fiGel { width: 150px; font: 500 var(--t-3) var(--sans); }
.fi-champ textarea { width: 100%; font: 500 var(--t-3) var(--sans); resize: vertical; }
.fi-champ input:focus, .fi-champ textarea:focus { border-color: var(--lin); }
.fi-conso { margin: 2px 0 0; font: 400 var(--t-2) var(--sans); color: var(--craie); line-height: 1.45; }
.obj-num { font-family: var(--pl-etq); font-weight: 700; font-size: 12.5px; font-stretch: 87.5%; font-variant-numeric: tabular-nums; fill: var(--encre-fixe); stroke: none; pointer-events: none; }
.num-pastille { fill: var(--jaune); stroke: var(--encre-fixe); stroke-width: 1.5; }
.obj-fiche { font-family: var(--pl-etq); font-weight: 500; font-size: 10px; font-stretch: 87.5%; font-variant-numeric: tabular-nums; fill: var(--pl-detail); paint-order: stroke; stroke: var(--pl-halo); stroke-width: 3.5px; stroke-linejoin: round; pointer-events: none; }
@media (max-width: 720px) {
  .fiche { right: 8px; left: 8px; width: auto; }
}

/* Relevé en réalité augmentée : l'écran se pose par-dessus l'image de la caméra */
.releve { position: fixed; inset: 0; z-index: var(--z-plein-ecran); background: transparent; color: #fff; font-family: var(--sans); -webkit-user-select: none; user-select: none; }
.releve[hidden] { display: none; }
.rv-haut { position: absolute; left: 0; right: 0; top: 0; padding: calc(env(safe-area-inset-top) + 14px) 16px 12px; background: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0)); }
.rv-consigne { margin: 0; font-size: var(--t-4); line-height: 1.35; max-width: calc(100% - 150px); text-shadow: 0 1px 3px rgba(0,0,0,0.6); }
.rv-mesure { margin: 6px 0 0; font: 700 var(--t-7) var(--sans); color: var(--jaune); text-shadow: 0 1px 4px rgba(0,0,0,0.7); min-height: 1em; max-width: calc(100% - 150px); }
.rv-mesure.petit { font-size: var(--t-5); }
.rv-scene { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rv-l { stroke: var(--jaune); stroke-width: 4; stroke-linecap: round; }
.rv-l-vise { stroke: #fff; stroke-width: 3; stroke-dasharray: 10 8; stroke-linecap: round; }
.rv-pt { fill: var(--jaune); stroke: var(--encre-fixe); stroke-width: 2; }
.rv-n { font: 700 var(--t-4) var(--sans); fill: #fff; paint-order: stroke; stroke: var(--encre-fixe); stroke-width: 4px; }
.rv-viseur { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border: 3px solid rgba(255,255,255,0.45); border-radius: 50%; pointer-events: none; }
.rv-viseur span { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: rgba(255,255,255,0.45); }
.rv-viseur.ok { border-color: var(--jaune); }
.rv-viseur.ok span { background: var(--jaune); }
.rv-carte { position: absolute; right: 12px; top: calc(env(safe-area-inset-top) + 12px); width: 140px; height: 140px; background: var(--voile); border: 1px solid rgba(255,255,255,0.25); border-radius: 10px; }
.rv-c { stroke: var(--jaune); stroke-width: 2.5; stroke-linecap: round; }
.rv-c-vise { stroke: #fff; stroke-width: 1.5; stroke-dasharray: 4 3; }
.rv-c-pt { fill: var(--jaune); }
.rv-carte-vide { font: 500 var(--t-2) var(--sans); fill: rgba(255,255,255,0.5); text-anchor: middle; }
.rv-bas { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: nowrap; gap: 6px; align-items: center; justify-content: center; padding: 14px 8px calc(env(safe-area-inset-bottom) + 18px); background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.7)); }
.rv-btn { flex: 0 0 auto; min-height: 52px; min-width: 52px; padding: 0 12px; border-radius: 26px; border: 1px solid rgba(255,255,255,0.35); background: var(--voile); color: #fff; font: 600 var(--t-4) var(--sans); display: inline-flex; align-items: center; justify-content: center; }
.rv-btn svg { width: 24px; height: 24px; }
.rv-icone { width: 52px; padding: 0; }
.rv-btn:disabled { opacity: 0.35; }
.rv-coin { min-width: 92px; min-height: 64px; border-radius: 32px; background: var(--jaune); color: var(--sur-jaune); border-color: var(--jaune); font-size: var(--t-5); font-weight: 700; }
.rv-ok { border-color: var(--lin); color: var(--lin); }
.rv-quitter { min-width: 52px; padding: 0; }

/* Catalogue : favoris et hors parc */
/* Favori : étoile SVG (le caractère ★/☆ écrit par le JS est masqué), contour au repos, pleine quand épinglée */
.pal-fav { flex-shrink: 0; width: 40px; height: var(--cible); border: none; background: none; color: var(--craie); font-size: 0; line-height: 1; cursor: pointer; border-radius: var(--r-ctl); padding: 0; align-self: center;
  display: inline-flex; align-items: center; justify-content: center;
  --etoile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l2.6 5.4 5.9.8-4.3 4.1 1 5.8L12 16.8l-5.2 2.8 1-5.8-4.3-4.1 5.9-.8z'/%3E%3C/svg%3E");
  --etoile-pleine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='1.75' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l2.6 5.4 5.9.8-4.3 4.1 1 5.8L12 16.8l-5.2 2.8 1-5.8-4.3-4.1 5.9-.8z'/%3E%3C/svg%3E"); }
.pal-fav::before { content: ''; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--etoile) center / contain no-repeat; mask: var(--etoile) center / contain no-repeat; }
.pal-fav.on { color: var(--lin); }
.pal-fav.on::before { -webkit-mask-image: var(--etoile-pleine); mask-image: var(--etoile-pleine); }
@media (hover: hover) and (pointer: fine) { .pal-fav:hover { color: var(--lin); background: var(--flight); } }
.pal-cat.pal-favs { color: var(--lin-doux); }
.pal-row.hors-parc .pal-nom { color: var(--lin-doux); }
.pal-row.hors-parc .pal-prix { font-size: var(--t-1); color: var(--craie); white-space: nowrap; }
.pal-cat.hp { color: var(--craie); }
.pal-hp-toggle { display: flex; align-items: center; gap: 8px; width: 100%; min-height: var(--cible); margin-top: 8px; padding: 0 12px; border: 1px dashed var(--rivet); border-radius: var(--r-ctl); background: none; color: var(--lin); font: 500 var(--t-3) var(--sans); cursor: pointer; text-align: left; }
.pal-hp-toggle > span:first-child { display: inline-block; width: 16px; height: 16px; flex-shrink: 0; font-size: 0; background: var(--craie); -webkit-mask: var(--chev) center / contain no-repeat; mask: var(--chev) center / contain no-repeat; transform: rotate(-90deg); transition: transform var(--d-panneau) var(--ease-sortie); }
.pal-hp-toggle[aria-expanded="true"] > span:first-child { transform: none; }
@media (hover: hover) and (pointer: fine) { .pal-hp-toggle:hover { border-color: var(--rivet-2); } }
.pal-hp-note { margin: 6px 12px 2px; font-size: var(--t-2); color: var(--craie); line-height: 1.4; }
.pal-row.pal-hp .pal-initiale { background: none; border: 1px dashed var(--rivet); }
.li-hp { font-size: var(--t-1); color: var(--craie); white-space: nowrap; }
body.cat-ouvert #liste .li-prix, body.cat-ouvert #liste .li-duree, body.cat-ouvert #liste .li-note { visibility: hidden; }
.exp-opt[hidden] { display: none; }

/* Cellule */
.obj-label.cel-val { font-size: 13px; font-weight: 700; fill: var(--encre-fixe); paint-order: stroke; stroke: var(--jaune); stroke-width: 5px; stroke-linejoin: round; }
.cel-rayon { stroke: var(--jaune); stroke-opacity: 0.85; stroke-linecap: round; pointer-events: none; }
.cel-rayon.bloque { stroke: var(--pl-gris); stroke-dasharray: 4 4; stroke-width: 1.5; }
.cel-dist { font: 700 12px var(--plan-mono); fill: var(--encre-fixe); paint-order: stroke; stroke: var(--jaune); stroke-width: 5px; stroke-linejoin: round; pointer-events: none; }
.cel-dist.bloque { fill: #F2EFE9; stroke: var(--pl-gris); }
/* Panneau de la cellule : compact, jamais plus d'un tiers de l'écran */
.cellule {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--status-reel, var(--status-h, 52px)) + env(safe-area-inset-bottom) + 8px);
  width: min(620px, calc(100% - 16px)); max-height: 33vh; overflow-y: auto;
  background: var(--gaffer); color: var(--lin); border: 1px solid var(--rivet); border-radius: var(--r-pan); z-index: var(--z-panneau); box-shadow: var(--ombre-2);
  padding: 6px 10px 8px; display: flex; flex-direction: column; gap: 6px;
}
.cellule[hidden] { display: none; }
.ce-haut { display: flex; align-items: center; gap: 10px; }
.ce-haut strong { font: 700 var(--t-6) var(--sans); font-stretch: 90%; color: var(--lin); letter-spacing: -0.01em; }
.ce-haut span { font: 500 var(--t-2) var(--sans); color: var(--lin-doux); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ce-haut .icon { width: 40px; height: 40px; flex-shrink: 0; }
.ce-reglages { display: flex; gap: 6px; flex-wrap: wrap; }
.ce-reglages select, .ce-h input {
  min-height: 36px; font: 600 var(--t-3) var(--sans); color: var(--lin); background: var(--flight);
  border: 1px solid var(--rivet); border-radius: var(--r-ctl); padding: 0 6px;
}
.ce-reglages select:focus, .ce-h input:focus { border-color: var(--lin); }
.ce-h { display: inline-flex; align-items: center; gap: 4px; font: 500 var(--t-2) var(--sans); color: var(--craie); }
.ce-h input { width: 52px; text-align: right; }
.ce-sources { display: flex; flex-wrap: wrap; gap: 6px; }
.cel-puce { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px 0 6px; border: 1px solid var(--rivet); border-radius: var(--r-ctl);
  background: none; color: var(--craie); font: 500 var(--t-2) var(--sans); cursor: pointer; }
.cel-puce i { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: var(--r-tag); border: 1.5px solid var(--rivet-2); font-style: normal; font-size: var(--t-2); color: var(--sur-jaune); }
.cel-puce b { font: 700 var(--t-2) var(--sans); }
.cel-puce span { font: 500 var(--t-1) var(--sans); }
.cel-puce.on { color: var(--lin); border-color: var(--rivet-2); }
.cel-puce.on i { background: var(--jaune); border-color: var(--jaune); }
.cel-puce.on b { color: var(--jaune); }   /* numéro de source */
.cel-puce.bloque span { color: var(--craie); font-style: italic; }
.cel-note { font-size: var(--t-2); color: var(--craie); align-self: center; }
@media (min-width: 900px) { .cellule { left: auto; right: 12px; transform: none; width: 480px; } }

/* ---- Soleil : panneau en haut (un tiers d'écran au plus), boussole, taches au sol */
.soleil-pan {
  position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--bar-h) + env(safe-area-inset-top) + 8px);
  width: min(620px, calc(100% - 16px)); max-height: 33vh; overflow-y: auto; z-index: var(--z-panneau-haut);
  background: var(--gaffer); color: var(--lin); border: 1px solid var(--rivet); border-radius: var(--r-pan); box-shadow: var(--ombre-2);
  padding: 6px 10px 8px; display: flex; flex-direction: column; gap: 6px;
}
.soleil-pan[hidden] { display: none; }
.so-haut { display: flex; align-items: center; gap: 10px; }
.so-haut strong { font: 700 var(--t-6) var(--sans); font-stretch: 90%; color: var(--lin); letter-spacing: -0.01em; }
.so-haut span { font: 500 var(--t-2) var(--sans); color: var(--lin-doux); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.so-haut .icon { width: 40px; height: 40px; flex-shrink: 0; }
.so-actif { min-width: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; }
.so-actif svg { width: 20px; height: 20px; }
.so-actif.on { background: var(--jaune); color: var(--sur-jaune); border-color: var(--jaune); box-shadow: none; }
/* curseur de l'heure : piste fine, pouce de 28 px (attrapable au doigt) */
.soleil-pan > *, .cellule > * { flex-shrink: 0; }   /* le panneau défile ; ses lignes ne s'écrasent pas */
#soMin { width: 100%; height: var(--cible); margin: 0; accent-color: var(--jaune); -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; }
#soMin::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--rivet); }
#soMin::-moz-range-track { height: 6px; border-radius: 3px; background: var(--rivet); }
#soMin::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: 50%; background: var(--jaune); border: 3px solid var(--gaffer); box-shadow: 0 0 0 1px var(--rivet-2); }
#soMin::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--jaune); border: 3px solid var(--gaffer); }
#soMin:focus-visible { box-shadow: none; outline-offset: 0; }
.so-ligne { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.so-ligne input[type="date"], .so-nord input, .so-lieu input {
  min-height: 36px; font: 600 var(--t-3) var(--sans); color: var(--lin); background: var(--flight); border: 1px solid var(--rivet); border-radius: var(--r-ctl); padding: 0 6px; color-scheme: dark;
}
.so-nord { display: inline-flex; align-items: center; gap: 4px; font: 500 var(--t-2) var(--sans); color: var(--craie); }
.so-nord input { width: 44px; text-align: right; }
.so-lieu { display: inline-flex; align-items: center; gap: 4px; }
.so-lieu input { width: 64px; text-align: right; }
.so-meteo { display: inline-flex; border: 1px solid var(--rivet); border-radius: var(--r-ctl); overflow: hidden; }
.so-m { min-height: 36px; padding: 0 10px; border: none; background: none; color: var(--craie); font: 500 var(--t-2) var(--sans); cursor: pointer; }
.so-m + .so-m { border-left: 1px solid var(--rivet); }
.so-m.on { background: var(--jaune); color: var(--sur-jaune); font-weight: 600; }
.so-jour { font: 500 var(--t-1) var(--sans); color: var(--craie); }
.boussole { position: absolute; right: 12px; top: calc(var(--bar-h) + env(safe-area-inset-top) + 10px); z-index: var(--z-plan-ui); display: flex; flex-direction: column; align-items: center; gap: 0;
  width: 64px; padding: 4px 0 6px; border: 1px solid var(--rivet); border-radius: var(--r-pan); background: var(--voile); color: var(--lin); cursor: pointer; box-shadow: var(--ombre-1); }
.boussole[hidden] { display: none; }
.boussole svg { width: 52px; height: 52px; }
.boussole span { font: 600 var(--t-1) var(--sans); }
.bo-cercle { fill: none; stroke: var(--rivet-2); stroke-width: 1.5; }
.bo-nord { fill: var(--lin); }
.bo-n { fill: var(--lin); font: 700 8px var(--sans); }
.bo-soleil { fill: var(--jaune); stroke: var(--encre-fixe); stroke-width: 1; }
.bo-soleil.couche { fill: var(--rivet-2); }
.tache-soleil { fill: #FFD23F; fill-opacity: 0.42; stroke: var(--pl-soleil); stroke-width: 1.2px; stroke-dasharray: 5 3; vector-effect: non-scaling-stroke; }
.cel-soleil { stroke: var(--pl-soleil); stroke-width: 3; stroke-linecap: round; }
.cel-soleil.bloque { stroke: var(--pl-gris); stroke-dasharray: 4 4; stroke-width: 2; }
.cel-dist.soleil { fill: var(--encre-fixe); }
.cel-puce.soleil b { font-size: var(--t-4); }
.sel-h { display: inline-flex; align-items: center; gap: 3px; font: 500 var(--t-2) var(--sans); color: var(--craie); }
.sel-h input { width: 46px; }
.sel-h[hidden] { display: none; }
@media (min-width: 900px) { .soleil-pan { left: auto; right: 90px; transform: none; width: 520px; } }

/* ---- Mes projets */
.pj-card { max-height: calc(100dvh - 32px); display: flex; flex-direction: column; gap: 10px; }
.pj-haut { display: flex; align-items: center; justify-content: space-between; }
.pj-haut h2 { margin: 0; }
.pj-liste { overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 6px; min-height: 60px; }
.pj-row { display: flex; align-items: center; gap: 4px; border: 1px solid var(--rivet); border-radius: var(--r-pan); padding: 2px 4px 2px 0; }
.pj-row.courant { border-color: var(--jaune); }
.pj-ouvrir { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; background: none; border: none; color: var(--lin); text-align: left; cursor: pointer; font: inherit; border-radius: var(--r-ctl); }
.pj-ouvrir strong { font-size: var(--t-4); font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-ouvrir span { font-size: var(--t-2); color: var(--craie); }
.pj-row .icon { width: var(--cible); height: var(--cible); flex-shrink: 0; }
.pj-sup.armed { color: var(--tally-texte); background: rgba(217, 56, 30, 0.16); border-radius: var(--r-ctl); }
.acc-bas { display: flex; gap: 8px; justify-content: space-between; }
.acc-bas [hidden] { display: none; }

.so-orient { row-gap: 4px; }
.so-lbl { font: 500 var(--t-2) var(--sans); color: var(--craie); width: 100%; }
.so-card { display: inline-flex; border: 1px solid var(--rivet); border-radius: var(--r-ctl); overflow: hidden; }
.so-c { min-height: 36px; min-width: 36px; padding: 0 4px; border: none; background: none; color: var(--lin-doux); font: 600 var(--t-2) var(--sans); cursor: pointer; }
.so-c + .so-c { border-left: 1px solid var(--rivet); }
.so-c.on { background: var(--jaune); color: var(--sur-jaune); }
.boussole { touch-action: none; }

.menu-item.opa { gap: 10px; cursor: default; }
.menu-item.opa:hover, .menu-item.opa:active { background: none; }
.menu-item.opa input { flex: 1; accent-color: var(--jaune); min-width: 100px; height: var(--cible); margin: 0; }
.menu-item.opa span:last-child { font: 600 var(--t-2) var(--sans); color: var(--craie); min-width: 44px; text-align: right; }

.fi-dmx .fi-unite input { width: 44px; }
.fi-dmx .mini { margin-left: 4px; }

#selFocaleLibre { width: 72px; }
.pj-copie { font-style: normal; font-size: var(--t-1); color: var(--etat-attention); }
.pj-copie.ok { color: var(--etat-ok); }
#pjNote strong { color: var(--lin); }
/* Liste : ce qui part dans le PDF (catégories) */
.li-pdf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0 4px; padding: 8px 0 10px; border-bottom: 1px solid rgba(243, 241, 236, 0.08); }
.li-pdf-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.li-pdf-cat { min-height: 32px; padding: 0 10px; font-size: var(--t-2); color: var(--craie); text-decoration: line-through; }
.li-pdf-cat.on { color: var(--lin); text-decoration: none; box-shadow: none; border-color: var(--lin-doux); background: var(--flight); }   /* filtre : pas de jaune */
.exp-sous { display: flex; flex-direction: column; gap: 6px; padding: 0 8px 8px 40px; }
.exp-sous[hidden] { display: none; }
.exp-sous .li-pdf-cat { color: var(--craie); }
.exp-sous .li-pdf-cat.on { color: var(--lin); }
/* Étiquette déplacée à la main loin de son symbole : un trait fin la relie */
.obj-trait-etq { stroke: var(--pl-gris); stroke-width: 1; stroke-dasharray: 3 2; pointer-events: none; }
/* Champ d'angle à côté des boutons de rotation */
#selRot { width: 46px; text-align: center; }
/* Aide des raccourcis clavier */
.aide-card { width: min(760px, 100%); }
.aide-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 28px; }
@media (max-width: 720px) { .aide-cols { grid-template-columns: 1fr; } }
dl.aide { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; align-items: baseline; font-size: var(--t-3); }
dl.aide dt { white-space: nowrap; color: var(--craie); }
dl.aide dd { margin: 0; }
kbd { display: inline-block; min-width: 20px; padding: 1px 5px; border: 1px solid var(--rivet); border-bottom-width: 2px; border-radius: var(--r-tag); font: 600 var(--t-1) var(--sans); color: var(--lin); text-align: center; background: rgba(243, 241, 236, 0.04); }
.menu-item.clavier kbd { margin-left: 6px; }
@media (hover: none) { .menu-item.clavier { display: none; } }
/* Panneau Pied et grip */
.pied-pan { width: 330px; }
.pp-sel { min-height: 40px; width: 100%; font: 500 var(--t-3) var(--sans); color: var(--lin); background: var(--flight); border: 1px solid var(--rivet); border-radius: var(--r-ctl); padding: 4px 8px; }
.pp-grip { display: flex; flex-direction: column; gap: 4px; }
.pp-ligne { display: flex; align-items: center; gap: 8px; color: var(--lin); font-size: var(--t-3); }
.pp-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-ligne .li-q { display: inline-flex; align-items: center; gap: 4px; }
.pp-ligne .mini { min-height: 34px; min-width: 34px; padding: 0 9px; }
.pp-n { min-width: 18px; text-align: center; font: 600 var(--t-3) var(--sans); }
@media (max-width: 720px) { .pied-pan { right: 8px; left: 8px; width: auto; } }
/* Barre de sélection sur ordinateur : Dupliquer / Supprimer en icônes seules quand la place manque */
@media (min-width: 721px) and (max-width: 1500px) { #btnDup span, #btnDeleteObj span { display: none; } }
/* Intensité : bouton de la barre et curseur */
#btnInt { min-width: 64px; font-variant-numeric: tabular-nums; }
#btnInt.off { color: var(--craie); border-style: dashed; }
.int-pan { position: fixed; z-index: var(--z-modal); width: 300px; max-width: calc(100vw - 16px); padding: 12px 14px; background: var(--gaffer); color: var(--lin); border: 1px solid var(--rivet); border-radius: var(--r-pan); box-shadow: var(--ombre-2); display: flex; flex-direction: column; gap: 10px; }
.int-pan[hidden] { display: none; }
.int-haut { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.int-haut strong { font: 700 var(--t-5) var(--sans); }
.int-haut span { font-size: var(--t-2); color: var(--craie); }
#intRange { width: 100%; height: var(--cible); margin: 0; accent-color: var(--jaune); }
.int-crans { display: flex; gap: 6px; flex-wrap: wrap; }
.int-crans .mini { flex: 1; min-height: 40px; padding: 0 6px; font-size: var(--t-2); }
@media (min-width: 721px) and (max-width: 1500px) { #statusbar .swatch { width: 18px; height: 18px; } #statusbar .swatches { gap: 2px; } #statusbar .sel { column-gap: 5px; } }
/* v0.2.58 — mouvements de caméra et de comédiens */
.kf, .kf-rot, .kf-pivot { cursor: grab; }
.kf-lbl { font: 700 11px var(--plan-mono); pointer-events: none; }
.kf-h { font: 600 11px var(--plan-mono); fill: var(--pl-encre); paint-order: stroke; stroke: var(--pl-halo); stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
.kf-bloc { display: inline-flex; align-items: center; gap: 5px; padding-left: 6px; border-left: 1px solid var(--rivet); }
.kf-bloc[hidden], .kf-hh[hidden] { display: none; }
.kf-nom { font: 700 var(--t-3) var(--sans); min-width: 14px; text-align: center; }
.kf-hh { display: inline-flex; align-items: center; gap: 3px; font-size: var(--t-2); }
#kfH { width: 50px; }
#btnPos, #kfDel, #selMvt { white-space: nowrap; }
@media (min-width: 721px) and (max-width: 1500px) { #btnPos span, #kfDel span { display: none; } #kfDel { min-width: 36px; font-weight: 700; } #selMvt { max-width: 118px; } #btnPos { min-width: 36px; font-weight: 700; } }
#statusbar.kf-on #selFocale, #statusbar.kf-on #selFocaleLibre, #statusbar.kf-on #selCapteur, #statusbar.kf-on #btnChamp, #statusbar.kf-on #btnNomAff, #statusbar.kf-on #btnEtqAuto, #statusbar.kf-on #selColors, #statusbar.kf-on #btnColTarget, #statusbar.kf-on #btnPied { display: none; }
.timeline { position: fixed; z-index: var(--z-menu); left: 50%; transform: translateX(-50%); width: calc(100vw - 16px); max-width: 620px; padding: 8px 12px; background: var(--gaffer); color: var(--lin); border: 1px solid var(--rivet); border-radius: var(--r-pan); box-shadow: var(--ombre-2); display: flex; flex-direction: column; gap: 6px; }
.timeline[hidden] { display: none; }
.tl-haut { display: flex; align-items: center; gap: 10px; }
/* lecture / pause : le JS écrit ▶ ou ❚❚, remplacés par des icônes SVG selon l'aria-label */
.tl-play { flex: none; width: var(--cible); height: var(--cible); border-radius: 50%; border: 0; background: var(--lin); color: var(--gaffer); font-size: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l10.5-6.5z' fill='black' stroke='black' stroke-width='1.75' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.tl-play[aria-label="Mettre en pause"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6.5' y='5.5' width='3.5' height='13' rx='1' fill='black'/%3E%3Crect x='14' y='5.5' width='3.5' height='13' rx='1' fill='black'/%3E%3C/svg%3E"); }
.tl-play::before { content: ''; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
#tlRange { flex: 1; min-width: 60px; height: var(--cible); margin: 0; accent-color: var(--jaune); }
.tl-t { font: 700 var(--t-3) var(--sans); min-width: 44px; text-align: right; }
.tl-d { font-size: var(--t-2); color: var(--craie); white-space: nowrap; }
#tlDuree { width: 40px; }
.tl-mesures { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--t-2); color: var(--lin-doux); }
.tl-mesures:empty { display: none; }
.tl-mes b { color: var(--lin); margin-right: 4px; }
.tl-mes i { font-style: normal; font-weight: 700; }
.tl-mes i.ok { color: var(--etat-ok); }
.tl-mes i.hors { color: var(--tally-texte); }
/* v0.2.59 — rail Cine Factory, rythme des positions */
.kf-h.serre { fill: var(--tally); }
.kf-t { font: 600 10.5px var(--plan-mono); fill: var(--pl-encre); paint-order: stroke; stroke: var(--pl-halo); stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
.kf-t.fixe { fill: #B8860B; font-weight: 700; }
.kf-tt { display: inline-flex; align-items: center; gap: 3px; font-size: var(--t-2); white-space: nowrap; }
.kf-tt[hidden] { display: none; }
#kfT, #kfArret { width: 44px; }
.tl-piste { position: relative; flex: 1; min-width: 60px; display: flex; flex-direction: column; }
.tl-piste #tlRange { width: 100%; }
.tl-reps { position: relative; height: 15px; margin: -4px 8px 0; }
.tl-reps[hidden] { display: none; }
.tl-rep { position: absolute; top: 0; transform: translateX(-50%); font: 700 var(--t-1) var(--sans); color: var(--craie); }
.tl-rep.on { color: var(--jaune); }
.tl-tenue { position: absolute; top: -3px; height: 3px; border-radius: 2px; background: var(--jaune); opacity: 0.6; }
@media (min-width: 721px) and (max-width: 1100px) { #statusbar.kf-on #btnDup, #statusbar.kf-on #btnRotL, #statusbar.kf-on #btnRotR, #statusbar.kf-on #selRot { display: none; } }
/* v0.2.60 — travelling circulaire */
.rail-circ { display: inline-flex; align-items: center; gap: 4px; }
.rail-circ[hidden], #statusbar.kf-on .rail-circ { display: none; }
#selRailD { max-width: 100px; } #selRailA { max-width: 104px; }
#btnChamp, #btnNomAff { white-space: nowrap; }
@media (min-width: 721px) and (max-width: 1500px) { #statusbar.circ-on #selColors, #statusbar.circ-on #btnColTarget, #statusbar.circ-on #selCapteur { display: none; } }
/* v0.2.61 — verrous, retour aux réglages de la caméra */
#kfDel { display: none; }
.kf-cam { white-space: nowrap; }
.mini.lock { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; padding: 0 8px; }
.mini.lock[hidden] { display: none; }
.mini.lock svg { width: 18px; height: 18px; }
.lock-badge rect { fill: var(--jaune); stroke: var(--encre-fixe); stroke-width: 1.5; }
.lock-badge path { fill: none; stroke: var(--encre-fixe); stroke-width: 1.6; }
.calques .row .cq-lock { margin-left: auto; width: 40px; height: 36px; border-radius: var(--r-ctl); border: 1px solid transparent; background: none; color: var(--craie); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.calques .row .cq-lock svg { width: 18px; height: 18px; }
.calques .row .cq-lock.on { color: var(--lin); border-color: var(--rivet-2); background: var(--flight-2); box-shadow: inset 0 -2px 0 var(--jaune); }
.calques .row .cq-opa { margin-left: auto; min-width: 52px; height: 36px; padding: 0 6px; border-radius: var(--r-ctl); border: 1px solid var(--rivet); background: none; color: var(--craie); font: 600 var(--t-2) var(--sans); cursor: pointer; }
.calques .row .cq-opa.on { color: var(--lin); border-color: var(--rivet-2); background: var(--flight-2); box-shadow: inset 0 -2px 0 var(--jaune); }
.calques .row .cq-opa + .cq-lock { margin-left: 6px; }
.calques .row .cq-vide { display: inline-block; width: 40px; height: 36px; margin-left: 6px; flex-shrink: 0; }
@media (min-width: 721px) and (max-width: 1500px) { #selModif { max-width: 118px; } #statusbar .swatch { width: 16px; height: 16px; } .mini.lock { min-width: 32px; padding: 0 5px; } }
@media (min-width: 721px) { #statusbar:has(#statusObj:not([hidden])) #statusZoom { display: none; } }
@media (min-width: 721px) and (max-width: 1500px) { #statusbar:has(#statusObj:not([hidden])) #btnFit { display: none; } }
/* v0.2.62 — lecteur des mouvements réductible */
/* réduire / agrandir : le JS écrit ▾ ou ▴ ; chevron SVG, retourné quand le lecteur est réduit */
.tl-reduire { flex: none; width: 40px; height: 40px; border-radius: var(--r-ctl); border: 1px solid var(--rivet); background: none; color: var(--lin); font-size: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.tl-reduire::before { content: ''; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--chev) center / contain no-repeat; mask: var(--chev) center / contain no-repeat; transition: transform var(--d-panneau) var(--ease-sortie); }
.timeline.reduit .tl-reduire::before { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) { .tl-reduire:hover { border-color: var(--rivet-2); } }
.timeline.reduit { left: auto; right: 12px; transform: none; width: auto; padding: 6px 8px; }
.timeline.reduit .tl-piste, .timeline.reduit .tl-d, .timeline.reduit .tl-mesures { display: none; }
.timeline.reduit .tl-play { width: 40px; height: 40px; }
/* v0.2.63 — revue : lecteur collé à la barre réelle, messages au-dessus du lecteur, tactile, tablette */
.timeline { bottom: calc(var(--status-reel, 52px) + 8px); }
body:has(#timeline:not([hidden]):not(.reduit)) .hint { bottom: 96px; }
#selRot { min-width: 52px; }
.fi-dmx .fi-unite { flex-wrap: wrap; row-gap: 6px; }

/* Tablette (iPad portrait et paysage) : la barre du haut ne déborde plus, la barre de sélection passe sur deux lignes
   au lieu de cacher Dupliquer / Supprimer / Cadenas dans un défilement invisible */
@media (min-width: 721px) and (max-width: 1100px) {
  .logo { display: none; }
  .actions { flex-shrink: 0; }
  .switch { display: none; }               /* faisceaux et détaillé : dans le menu (Calques) */
  #topbar .tools { gap: 2px; }
  #topbar .tool { width: 40px; height: 44px; }
  .title { max-width: 22vw; }
}
@media (min-width: 721px) and (max-width: 1180px) {
  body { grid-template-rows: var(--bar-h) 1fr auto; }
  #statusbar { min-height: var(--status-h); }
  #statusbar:has(#statusObj:not([hidden])) { padding: 6px 10px; }
  #statusbar:has(#statusObj:not([hidden])) .s-left { display: none; }
  #statusbar:has(#statusObj:not([hidden])) .s-mid { overflow: visible; flex: 1 1 auto; flex-wrap: wrap; justify-content: center; }
  #statusbar:has(#statusObj:not([hidden])) .sel { flex-wrap: wrap; justify-content: center; row-gap: 6px; }
}
/* v0.2.64 — menu en sections : en-têtes en casse normale (plus de capitales espacées) */
.menu-item[hidden] { display: none; }
.menu-head, .calques .head { padding: 14px 12px 4px; font: 600 var(--t-3) var(--sans); color: var(--craie); border-top: 1px solid var(--rivet); margin-top: 4px; }
.menu > .menu-head:first-child { border-top: none; margin-top: 0; padding-top: 6px; }
.menu-item .m-kbd { margin-left: auto; font: 500 var(--t-1) var(--sans); color: var(--craie); border: 1px solid var(--rivet); border-radius: var(--r-tag); padding: 1px 5px; }
@media (hover: none) { .menu-item .m-kbd { display: none; } }
.menu { width: min(400px, calc(100vw - 16px)); }
.menu-item.check { padding-top: 6px; padding-bottom: 6px; line-height: 1.3; }

/* v0.2.65 — couleur des sources : mode HSI (sources couleur), dimmer (tungstène) */
.fi-mode { display: inline-flex; gap: 4px; }
.fi-mode .mini { min-width: 52px; }
.fi-hsi { display: flex; flex-direction: column; gap: 8px; }
.fi-hsi[hidden], .fi-champ[hidden] { display: none; }
.fi-champ input.fi-curseur { width: 110px; min-height: 28px; padding: 0; border: 0; border-radius: 6px; height: 12px; -webkit-appearance: none; appearance: none; background: var(--flight); }
.fi-champ input.fi-hue { background: linear-gradient(90deg, #f00 0%, #ff0 16.7%, #0f0 33.3%, #0ff 50%, #00f 66.7%, #f0f 83.3%, #f00 100%); }
.fi-champ input.fi-sat { background: linear-gradient(90deg, #7FB0EC, var(--sat-plein, #00f)); }
.fi-curseur::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--lin); border: 2px solid var(--gaffer); box-shadow: 0 0 0 1px var(--rivet); }
.fi-curseur::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--lin); border: 2px solid var(--gaffer); }
.fi-champ input.fi-n { width: 48px; text-align: right; }
.fi-champ input.fi-case { width: 22px; min-height: 22px; height: 22px; accent-color: var(--lin); }
.gir-handle { fill: var(--jaune); stroke: var(--pl-sel); stroke-width: 2; }
.kf-h.alerte { fill: var(--tally); }

/* v0.2.66 — setups : onglets en haut à gauche du plan */
.setup-bar { position: absolute; z-index: var(--z-plan-ui); left: 10px; top: 10px; display: flex; gap: 4px; padding: 4px; background: var(--voile); border-radius: var(--r-pan); box-shadow: var(--ombre-1); max-width: calc(100% - 20px); overflow-x: auto; scrollbar-width: none; }
.setup-bar::-webkit-scrollbar { display: none; }
.setup-bar button { flex: none; min-height: 36px; padding: 0 12px; border-radius: var(--r-ctl); border: 1px solid transparent; background: transparent; color: var(--lin-doux); font: 600 var(--t-3) var(--sans); cursor: pointer; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .setup-bar button:not(.on):hover { background: var(--flight); } }
.setup-bar .sb-tab.on { background: var(--jaune); color: var(--sur-jaune); }
.setup-bar .sb-car { margin-left: 5px; font-size: var(--t-1); }
.setup-bar .sb-plus { color: var(--lin-doux); border-color: var(--rivet); }
.setup-bar.seul .sb-tab { color: var(--lin-doux); background: transparent; border-color: var(--rivet); cursor: default; }
.setup-bar button:focus-visible { outline: 2px solid var(--jaune); outline-offset: 1px; box-shadow: none; }
.sb-menu { position: absolute; z-index: var(--z-popover); width: 240px; padding: 10px; display: flex; flex-direction: column; gap: 8px; background: var(--gaffer); color: var(--lin); border: 1px solid var(--rivet); border-radius: var(--r-pan); box-shadow: var(--ombre-2); }
.sb-menu[hidden] { display: none; }
.sb-lbl { font-size: var(--t-2); color: var(--craie); }
.sb-ligne { display: flex; gap: 6px; }
.sb-ligne .mini.txt { flex: 1; width: auto; min-width: 0; }
.sb-menu .del.armed { border-color: var(--tally); color: var(--tally-texte); background: rgba(217, 56, 30, 0.16); }
.sb-note { margin: 0; font-size: var(--t-1); color: var(--craie); line-height: 1.4; }
.exp-parpage { display: inline-flex; gap: 6px; margin-left: 6px; }
.pal-fav-vide { margin: 2px 14px 10px; font-size: var(--t-2); color: var(--craie); line-height: 1.4; }

/* v0.2.68 — Mon matériel */
.acc-cat { grid-template-columns: repeat(3, 1fr); }
.acc-seg em { font-style: normal; font-size: var(--t-1); color: var(--lin-doux); line-height: 1.35; }
.acc-seg em:empty { display: none; }
@media (max-width: 720px) { .acc-cat { grid-template-columns: 1fr; } .acc-seg + .acc-seg { border-left: none; border-top: 1px solid var(--rivet); } }
.pack-pan { z-index: var(--z-feuille); }
.pk-intro { margin: 10px 16px 0; font-size: var(--t-3); color: var(--craie); line-height: 1.45; max-width: 760px; }
.pk-barre { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--rivet); }
.pk-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
#pkRecherche { flex: 1; min-width: 200px; min-height: 40px; }
.pk-import { display: inline-flex; align-items: center; cursor: pointer; }
.pk-grp { margin: 18px 0 6px; font: 600 var(--t-3) var(--sans); color: var(--craie); }
.pk-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid rgba(243, 241, 236, 0.06); }
.pk-row.on .pk-nom { color: var(--lin); font-weight: 600; }
.pk-nom { font-size: var(--t-4); }
.pk-meta { display: block; font: 400 var(--t-1) var(--sans); color: var(--craie); margin-top: 2px; }
.pk-q { display: inline-flex; align-items: center; gap: 4px; }
.pk-q .mini { min-width: 34px; }
.pk-q input { width: 46px; text-align: center; }
.pk-vide { padding: 20px 0; color: var(--craie); font-size: var(--t-3); }
.pk-plus { margin: 10px 0; color: var(--craie); font-size: var(--t-2); }
.pal-prix.pk { color: var(--etat-ok); }
.li-louer { color: var(--etat-attention); font: 600 var(--t-2) var(--sans); white-space: nowrap; }
.li-amoi { color: var(--etat-ok); font: 600 var(--t-2) var(--sans); white-space: nowrap; }
.li-alouer { margin-top: 18px; padding: 12px; border: 1px solid var(--etat-attention); border-radius: var(--r-pan); }
.li-alouer h3 { margin: 0 0 6px; }
.li-alouer .li-hint { margin: 0 0 8px; }
.li-alouer-l { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: var(--t-3); }
.li-alouer-act { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
a.mini { display: inline-flex; align-items: center; text-decoration: none; }
#pkRecherche { background: var(--flight); color: var(--lin); border: 1px solid var(--rivet); border-radius: var(--r-ctl); padding: 0 10px; font: 500 var(--t-4) var(--sans); }
#pkRecherche:focus { border-color: var(--lin); }
.li-alouer { margin-top: 10px; margin-bottom: 8px; }
.acc-seg.on em { color: #4A3B00; font-weight: 600; }

/* v0.2.71 — module électricité (masqué tant qu'il n'est pas activé dans le menu) */
body:not(.elec) .elec-seul { display: none !important; }
.elec-pan { width: 360px; max-height: calc(100% - var(--bar-h) - 90px); overflow-y: auto; }
.el-corps { gap: 10px; }
.el-alerte { margin: 0; padding: 6px 8px; border-radius: var(--r-ctl); font-size: var(--t-2); line-height: 1.4; background: rgba(217, 56, 30, 0.18); color: var(--tally-texte); }
.el-alerte.orange { background: rgba(255, 159, 67, 0.16); color: var(--etat-attention); }
.el-src { border: 1px solid var(--rivet); border-radius: var(--r-ctl); padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.el-src-t { display: flex; justify-content: space-between; gap: 8px; font-size: var(--t-3); color: var(--lin); }
.el-src-t b { font-weight: 600; }
.el-jauge { height: 6px; border-radius: 3px; background: var(--flight); overflow: hidden; }
.el-jauge i { display: block; height: 100%; background: var(--etat-ok); }
.el-jauge.orange i { background: var(--etat-attention); } .el-jauge.rouge i { background: var(--tally); }
.el-ph { display: flex; gap: 6px; font: 400 var(--t-1) var(--sans); color: var(--craie); }
.el-l { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; padding: 5px 0 5px 10px; border-top: 1px solid rgba(243, 241, 236, 0.06); font-size: var(--t-2); color: var(--lin-doux); }
.el-l .el-meta { grid-column: 1 / -1; font: 400 var(--t-1) var(--sans); color: var(--craie); }
.el-l .el-act { display: inline-flex; gap: 4px; }
.el-l .el-act .mini { min-height: 30px; padding: 0 8px; font-size: var(--t-1); }
.el-l.n2 { padding-left: 22px; } .el-l.n3 { padding-left: 34px; }
.el-l .rouge { color: var(--tally-texte); } .el-l .orange { color: var(--etat-attention); }
.el-tot { font: 400 var(--t-2) var(--sans); color: var(--lin-doux); line-height: 1.5; }
.cable { fill: none; stroke-width: 0.045; stroke-linecap: round; stroke-linejoin: round; }
.cable.surcharge { stroke-dasharray: 0.18 0.08; }
.cable-lbl { font: 600 10px var(--plan-mono); paint-order: stroke; stroke: var(--pl-halo); stroke-width: 3.5px; stroke-linejoin: round; pointer-events: none; }
.cable-depart { fill: none; stroke: #E07B00; stroke-width: 3; stroke-dasharray: 5 4; }
.cable.air { stroke-dasharray: 0.12 0.1; stroke-width: 0.035; }
.via-h { fill: #FFFFFF; stroke: #E07B00; stroke-width: 2.5; cursor: grab; }
.via-hit { fill: transparent; }
.el-murs { display: flex; align-items: center; gap: 8px; font-size: var(--t-2); color: var(--lin-doux); }
.el-murs input { flex: 1; accent-color: var(--jaune); }
.el-passe { display: block; font-size: var(--t-1); color: var(--craie); margin-top: 2px; }
.el-src .el-murs { margin: 6px 0 2px; }
.el-l .el-act .el-hair { width: 46px; padding: 0 4px; text-align: center; }
/* ==== Mode Plateau (« Rendu ambiance ») : sol sombre, lumière en couleur réelle ====
   Tout le plan lit ses couleurs dans les variables --pl-* ; le mode Plateau les redéfinit ici, en un seul endroit
   (sur le SVG pour le plan et l'export, sur body pour le fond de la scène). */
body.ambiance, [data-rendu="ambiance"] {
  --pl-sol: #1A1917;        /* = fond de l'export PDF en mode plateau (écrit par app.js) */
  --pl-halo: #1A1917;
  --pl-encre: #E8E3DA;      /* symboles en négatif : traits clairs */
  --pl-corps: #2E2B27;      /* intérieur des symboles */
  --pl-mur: #6E6A62;        /* architecture atténuée : la lumière passe devant */
  --pl-mur-ame: #2A2723;
  --pl-archi: #B9B3A8;      /* portes, fenêtres, formes */
  --pl-meuble: #A9A398;     /* mobilier lisible sur le sol sombre (le canapé ne disparaît plus) */
  --pl-meuble-texte: #A9A398;
  --pl-cote: #B3AEA4;
  --pl-detail: #CFC9BE;
  --pl-trait: #CFC9BE;      /* notes, annotations */
  --pl-gris: #77726A;
  --pl-sel: #E8E3DA;
}
[data-rendu="ambiance"] .beam { mix-blend-mode: screen; }
/* Plus de sélecteurs sur des couleurs écrites en dur : le dessin écrit « currentColor » pour l'encre par défaut, la classe
   .corps pour l'intérieur des symboles et .ouv-cut pour la découpe des ouvertures ; tout suit les variables ci-dessus.
   Une couleur choisie à la main (canapé rouge, cadre bleu) reste écrite et n'est pas touchée. */

/* v0.2.76 — patch DMX */
.fi-select { max-width: 210px; min-height: 40px; font: 500 var(--t-3) var(--sans); background: var(--flight); color: var(--lin); border: 1px solid var(--rivet); border-radius: var(--r-ctl); padding: 5px 6px; }
.fi-select:focus { border-color: var(--lin); }
@media (min-width: 900px) { .patch-pan { right: auto; left: 12px; } }
.pt-auto { display: flex; flex-direction: column; gap: 8px; padding-bottom: 10px; margin-bottom: 8px; border-bottom: 1px solid var(--rivet); }
.pt-auto #ptU { width: 52px; }
.pt-auto #ptGo { align-self: flex-start; }
.pt-r { display: grid; grid-template-columns: 70px 1fr; column-gap: 8px; padding: 6px 4px; border-top: 1px solid rgba(243, 241, 236, 0.06); border-radius: var(--r-tag); cursor: pointer; font-size: var(--t-3); color: var(--lin); }
.pt-r:active { background: var(--flight-2); }
@media (hover: hover) and (pointer: fine) { .pt-r:hover { background: var(--flight); } }
.pt-r .pt-adr { font: 600 var(--t-3) var(--sans); color: var(--lin); grid-row: span 2; font-variant-numeric: tabular-nums slashed-zero; }
.el-tot .pt-r { grid-template-columns: 1fr; }
.pt-r .pt-mode { color: var(--craie); font-size: var(--t-2); }
.pt-r.conflit .pt-adr, .pt-r.conflit .pt-mode { color: var(--tally-texte); }

/* v0.2.77 — plan de fond, images des cadres */
@media (min-width: 900px) { .fond-pan { right: auto; left: 12px; } }
.fd-etape { margin: 0; padding: 8px 10px; border-radius: var(--r-ctl); background: var(--flight); border-left: 3px solid var(--lin-doux); color: var(--lin); font-size: var(--t-3); line-height: 1.4; }
.fd-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.fd-dist { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--t-3); color: var(--craie); }
.fd-dist #fdDist { width: 64px; }
#fdRot { width: 120px; } #fdOpa { width: 140px; }
.fd-v { min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; color: var(--lin); font-size: var(--t-2); }
body.fond-edit #canvas { cursor: crosshair; }
[data-rendu="ambiance"] #layer-fond .fond-img { filter: invert(1) hue-rotate(180deg); }
#layer-fond, #layer-cadres .cadre-lien { pointer-events: none; }
.cadre-leg { font-family: var(--sans); font-weight: 600; fill: var(--pl-encre); paint-order: stroke; stroke: #FFFFFF; stroke-width: 0.03px; }
[data-rendu="ambiance"] .cadre-leg { stroke: var(--pl-halo); }
.cadre-vue { position: fixed; inset: 0; z-index: var(--z-visionneuse); background: var(--voile-modal); display: flex; align-items: center; justify-content: center; padding: 16px; }
.cadre-vue[hidden] { display: none; }
.cv-boite { background: var(--gaffer); color: var(--lin); border: 1px solid var(--rivet); border-radius: var(--r-pan); width: min(920px, 100%); max-height: 100%; display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--ombre-2); }
.cv-img { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background: #100F0C; }
.cv-img img { max-width: 100%; max-height: calc(100vh - 170px); object-fit: contain; display: block; }
.cv-barre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--rivet); }
.cv-taille { display: flex; align-items: center; gap: 8px; font-size: var(--t-3); color: var(--craie); margin-right: auto; }
/* v0.2.78 — une image par position */
.cv-pos { display: flex; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--rivet); flex-wrap: wrap; }
.cv-pos .mini { min-width: 40px; font-weight: 700; }
.cv-pos .mini.a-img:not(.on) { border-color: var(--etat-info); color: var(--etat-info); }
.cv-vide { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 60px 20px; color: var(--craie); }
.cv-vide[hidden], #cvImg[hidden] { display: none; }

/* v0.2.79 — barre du haut : le titre du projet ne se réduit plus à une lettre ; les interrupteurs perdent leur libellé
   avant lui. Téléphone : la barre de sélection ne déborde plus de l'écran. */
.title { min-width: 96px; }
@media (min-width: 721px) and (max-width: 1400px) { .switch .lbl { min-width: 0; font-size: var(--t-2); } .switch { padding-left: 4px; padding-right: 4px; } header .tool { width: 40px; } }
@media (max-width: 720px) {
  #statusbar.has-sel .sel { max-width: 100%; }
  #statusbar.has-sel #selModif { max-width: 44vw; }
  #statusbar.has-sel .swatches { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; padding: 2px 0; }
  #statusbar.has-sel .swatches::-webkit-scrollbar { display: none; }
  #statusbar.has-sel .swatch { flex-shrink: 0; }
}
@media (max-width: 720px) { .title { min-width: 0; } }
.tache-soleil.diffuse { fill-opacity: 0.22; stroke: none; filter: blur(6px); }
.lueur-soleil { fill: #FFD23F; stroke: none; }
#selVitreND, #selVitreGel { max-width: 104px; } #selVitreDiff { max-width: 130px; } #selRideau { max-width: 140px; }

/* v0.2.80 — couleur : un bouton, le nuancier en surimpression */
.btn-couleur { display: inline-flex; align-items: center; gap: 6px; }
.btn-couleur .dot { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255,255,255,0.35) inset; display: inline-block; }
#statusbar { position: relative; }
.pop-couleur { position: fixed; bottom: calc(var(--status-h, 56px) + env(safe-area-inset-bottom) + 10px); left: 50%; transform: translateX(-50%); z-index: var(--z-modal); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center;
  background: var(--gaffer); border: 1px solid var(--rivet); border-radius: var(--r-pan); padding: 10px 12px; box-shadow: var(--ombre-2); max-width: min(560px, calc(100vw - 24px)); }
.pop-couleur[hidden] { display: none; }
.pop-couleur .swatches { flex-wrap: wrap; gap: 8px !important; justify-content: center; overflow: visible !important; max-width: none !important; }
.pop-couleur .swatch { width: 30px !important; height: 30px !important; min-width: 30px; }
#statusbar.kf-on #btnCouleur, #statusbar.kf-on #popCouleur { display: none; }

#btnDerriere, #btnDevant { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
#btnDerriere[hidden], #btnDevant[hidden] { display: none; }
#btnDerriere svg, #btnDevant svg { width: 24px; height: 18px; }
#btnRotL, #btnRotR, #btnRailSens, #soNordM, #soNordP, #fdRotM, #fdRotP { display: inline-flex; align-items: center; justify-content: center; padding: 0 9px; }
#btnRotL[hidden], #btnRotR[hidden], #btnRailSens[hidden], #soNordM[hidden], #soNordP[hidden], #fdRotM[hidden], #fdRotP[hidden] { display: none; }
.acc-recents { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.acc-recents[hidden] { display: none; }
.acc-recent { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; min-height: var(--cible); text-align: left; background: var(--flight); color: var(--lin); border: 1px solid var(--rivet); border-radius: var(--r-ctl); padding: 10px 12px; cursor: pointer; font: inherit; }
.acc-recent:active { background: var(--flight-2); }
@media (hover: hover) and (pointer: fine) { .acc-recent:hover { border-color: var(--rivet-2); background: var(--flight-2); } }
.acc-recent strong { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-recent span { color: var(--craie); font-size: var(--t-2); white-space: nowrap; }
.acc-bas { display: flex; gap: 8px; flex-wrap: wrap; }

/* Export PDF : ordre des images des cadres */
.exp-ordre { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; }
.exp-ord-l { display: flex; align-items: center; gap: 8px; min-height: var(--cible); }
.exp-ord-n { width: 22px; height: 22px; border-radius: var(--r-tag); background: var(--flight-2); color: var(--lin); font-weight: 700; font-size: var(--t-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.exp-ord-img { width: 64px; height: 36px; object-fit: cover; border-radius: var(--r-tag); background: var(--flight); flex-shrink: 0; display: block; }
.exp-ord-t { flex: 1; min-width: 0; font-size: var(--t-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-ord-t small { display: block; color: var(--craie); font-size: var(--t-1); }
.exp-ord-b { min-width: 36px; min-height: 36px; padding: 0; }
.exp-ord-b:disabled { opacity: 0.3; }

/* Menu : les quatre cases « Noms sur le plan » */
.menu-item.noms-head { min-height: 32px; padding-top: 6px; color: var(--craie); font-size: var(--t-3); cursor: default; }
.menu-item.check.sous { padding-left: 22px; }

/* ==== Doigt (iPad, téléphone) : toute cible de l'interface fait au moins 44 px ====
   En fin de feuille exprès : ces règles doivent l'emporter sur les tailles « souris » définies plus haut. */
@media (pointer: coarse) {
  #statusbar .swatch { min-width: 30px; min-height: 30px; }
  .mini, select.mini.scene, .li-portee .mini, .li-duree .mini, .pp-ligne .mini, .int-crans .mini, .el-l .el-act .mini, .li-pdf-cat,
  #selLen, #selRayon, .chip, .setup-bar button, .cel-puce, .so-m, .so-c, .li-famille, #joursVal, .exp-ord-b,
  .fi-champ input:not(.fi-curseur):not(.fi-case), .fi-select, .pp-sel, .ce-reglages select, .ce-h input,
  .so-ligne input[type="date"], .so-nord input, .so-lieu input, .li-rem, #pkRecherche { min-height: var(--cible); }
  .li-rem { height: var(--cible); }
  .mini.lock, #btnRotL, #btnRotR, #btnDup, #btnDupWall, #btnDeleteObj, #btnDelete, .li-del, .li-q .mini, .li-duree .mini, .pp-ligne .mini, .pk-q .mini,
  .so-c, .exp-ord-b, #btnPos, #kfDel, #btnRailSens, #soNordM, #soNordP, #fdRotM, #fdRotP, #soActif, #soIci, .setup-bar .sb-plus, #joursVal { min-width: var(--cible); }
  .calques .row .cq-lock, .calques .row .cq-vide { width: var(--cible); height: var(--cible); }
  .calques .row .cq-opa { height: var(--cible); min-width: 56px; }
  .tl-reduire, .ce-haut .icon, .so-haut .icon, .pal-fav { width: var(--cible); height: var(--cible); }
  .pop-couleur .swatch { width: 40px !important; height: 40px !important; min-width: 40px; }
  .pop-couleur .swatches { gap: 10px !important; }
  .fi-champ input.fi-case { width: 28px; height: 28px; min-height: 28px; }
}

/* ==== v0.2.95 — passage UX : en-tête lisible sur iPad, libellés, aide tactile, plan vide, glisser-déposer ====
   En fin de feuille exprès (après le bloc « doigt ») : ces règles remplacent les arrangements précédents de l'en-tête. */

/* -- En-tête : libellés courts sous les icônes quand il y a la place (ordinateur, iPad paysage et portrait) -- */
#topbar .btn-label { display: none; }
@media (min-width: 721px) {
  #topbar .tool, #topbar .actions > .icon { flex-direction: column; gap: 2px; width: auto; min-width: var(--cible); height: 50px; padding: 0 3px; }
  #topbar .tool svg, #topbar .actions > .icon svg { width: 20px; height: 20px; flex-shrink: 0; }
  #topbar .btn-label { display: block; font: 500 10.5px/1 var(--sans); font-stretch: 84%; letter-spacing: 0; color: inherit; opacity: 0.86; }
  #topbar .tool.active .btn-label { opacity: 1; }
  #topbar .icon:disabled .btn-label { opacity: 1; }
  #topbar .tools { gap: 1px; }
  /* interrupteurs : libellé sous le curseur, comme les outils — et toujours là, même en mode scènes */
  #topbar .switch { flex-direction: column; justify-content: center; gap: 3px; padding: 0 4px; height: 50px; display: inline-flex; }
  #topbar .switch .lbl, body.scenes #topbar .switch .lbl { display: block; min-width: 0; font: 500 10.5px/1 var(--sans); font-stretch: 84%; color: var(--lin); opacity: 0.86; }
  #topbar .switch .track { width: 34px; height: 20px; }
  #topbar .switch .knob { width: 14px; height: 14px; }
  #topbar .switch input:checked + .track .knob { transform: translateX(14px); }
  .bar { gap: var(--e1); }
  .title { min-width: 72px; }
}
/* Sur tablette, la Main n'a pas d'utilité au doigt (glisser sur le vide déplace déjà la vue) : sa place va aux libellés */
@media (min-width: 721px) and (pointer: coarse) { #topbar .tool[data-tool="hand"] { display: none; } }
/* iPad paysage : le logo cède la place aux libellés */
@media (min-width: 721px) and (max-width: 1280px) { #topbar .logo { display: none; } }
/* iPad portrait (et fenêtres étroites) : deux rangées — titre et actions en haut, outils avec libellés en dessous */
@media (min-width: 721px) and (max-width: 1100px) {
  :root { --bar-h: 108px; }
  #topbar { flex-wrap: wrap; align-content: center; row-gap: 2px; padding-top: 3px; padding-bottom: 3px; }
  #topbar .brand { order: 1; flex: 1 1 auto; }
  #topbar .actions { order: 2; margin-left: auto; }
  #topbar .tools { order: 3; flex: 1 0 100%; justify-content: center; margin: 0; gap: 4px; }
  #topbar .switch { display: inline-flex; }
  .title { max-width: 40vw; }
  #topbar .tool { min-width: 46px; }
}

/* -- Sélecteur de scène : dans la barre des setups, sur le plan (il ne passe plus sous les outils) -- */
.setup-bar .sb-tabs { display: flex; gap: 4px; }
.setup-bar .sb-scene { flex: none; min-height: 36px; max-width: 40vw; padding: 0 28px 0 12px; border-radius: var(--r-ctl); border: 1px solid var(--rivet-2); background: var(--flight); color: var(--lin); font: 700 var(--t-3) var(--sans); cursor: pointer;
  appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F3F1EC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E"); background-position: right 7px center; background-size: 16px 16px; background-repeat: no-repeat; text-overflow: ellipsis; }
.setup-bar .sb-scene[hidden] { display: none; }
.setup-bar .sb-scene:focus-visible { outline: 2px solid var(--jaune); outline-offset: 1px; }
@media (pointer: coarse) { .setup-bar .sb-scene { min-height: var(--cible); } }
body.scenes .title { max-width: 34vw; }
@media (max-width: 720px) { body.scenes .title { display: block; max-width: 34vw; } }

/* -- Barre de sélection : une seule ligne ; si tout ne tient pas, elle défile de côté (un fondu l'annonce),
      le nom reste à gauche et « Supprimer » à droite -- */
@media (max-width: 1180px) {
  #statusbar:has(#statusObj:not([hidden])) .s-mid, #statusbar.has-sel .s-mid { overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; justify-content: flex-start; flex: 1 1 auto; min-width: 0; overscroll-behavior-x: contain; touch-action: pan-x; }
  #statusbar:has(#statusObj:not([hidden])) .sel, #statusbar.has-sel .sel { flex-wrap: nowrap; justify-content: flex-start; flex-shrink: 0; }
  #statusbar.has-sel .sel > *, #statusbar:has(#statusObj:not([hidden])) .sel > * { flex-shrink: 0; order: 0; }
  #statusObj { padding-right: 2px; }
  #statusObj #objName { position: sticky; left: 0; z-index: 1; background: var(--gaffer); padding-right: 6px; box-shadow: 8px 0 8px -6px var(--gaffer); }
  #statusObj #btnDeleteObj, #statusSel #btnDelete { position: sticky; right: 0; z-index: 1; box-shadow: -10px 0 10px -2px var(--gaffer); background: var(--gaffer); }
  #statusbar.has-sel { padding: 0 8px; }
  #statusbar:has(#statusObj:not([hidden])) { padding-top: 0; padding-bottom: 0; }
  #statusbar.has-sel .swatches { max-width: none; }
}
@media (max-width: 720px) { .obj-name { max-width: 30vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }

/* -- Boutons flottants sur le plan : « Tout voir » et l'aide « ? », toujours à portée de doigt -- */
.plan-flottants { position: absolute; right: 12px; bottom: 12px; z-index: var(--z-plan-ui); display: flex; flex-direction: column; gap: 8px; }
.icon.flottant { width: var(--cible); height: var(--cible); border-radius: 50%; background: var(--voile); color: var(--lin); box-shadow: var(--ombre-1); border: 1px solid var(--rivet); }
.icon.flottant .ico { width: 22px; height: 22px; }
.icon.flottant:active { background: var(--flight-2); }
@media (hover: hover) and (pointer: fine) { .icon.flottant:hover { background: var(--flight); } }
/* « Tout voir » flottant seulement là où celui de la barre du bas n'est pas visible (téléphone, ou pendant une sélection) */
@media (min-width: 1501px) { #btnVoirTout { display: none; } }
@media (min-width: 721px) and (max-width: 1500px) { body:not(:has(#statusObj:not([hidden]))) #btnVoirTout { display: none; } }
body:has(#timeline:not([hidden]):not(.reduit)) .plan-flottants { bottom: 96px; }

/* -- Plan vide : la consigne de départ -- */
.plan-vide { position: absolute; z-index: var(--z-plan-ui); left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(460px, calc(100% - 32px));
  background: var(--gaffer); color: var(--lin); border: 1px solid var(--rivet); border-radius: var(--r-pan); box-shadow: var(--ombre-2); padding: 16px; pointer-events: none; }
.plan-vide[hidden] { display: none; }
.plan-vide button { pointer-events: auto; }
.pv-titre { margin: 0 0 10px; font: 700 var(--t-5) var(--sans); }
.pv-choix { display: flex; flex-direction: column; gap: 8px; }
.pv-btn { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px; text-align: left; background: var(--flight); color: var(--lin); border: 1px solid var(--rivet); border-radius: var(--r-ctl); font: inherit; cursor: pointer; }
.pv-btn .ico { width: 24px; height: 24px; }
.pv-btn strong { display: block; font-weight: 600; font-size: var(--t-4); }
.pv-btn em { display: block; font-style: normal; color: var(--craie); font-size: var(--t-2); margin-top: 2px; }
.pv-btn:active { background: var(--flight-2); }
@media (hover: hover) and (pointer: fine) { .pv-btn:hover { border-color: var(--rivet-2); background: var(--flight-2); } }
#pvPiece { border-color: var(--lin-doux); }
.pv-modeles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pv-modeles[hidden] { display: none; }
.pv-note { margin: 12px 0 0; color: var(--craie); font-size: var(--t-2); }
.pv-ico { display: inline-block; min-width: 18px; padding: 0 4px; border: 1px solid var(--rivet); border-radius: var(--r-tag); text-align: center; font-weight: 600; color: var(--lin-doux); }
@media (max-width: 720px) { .plan-vide { top: 46%; padding: 12px; } .pv-btn { min-height: 50px; } }

/* -- Bulle de l'appui long -- */
.bulle { position: fixed; z-index: var(--z-visionneuse); max-width: min(320px, calc(100vw - 16px)); padding: 7px 11px; background: var(--lin); color: var(--gaffer); border-radius: var(--r-ctl); font: 500 var(--t-3)/1.3 var(--sans); box-shadow: var(--ombre-1); pointer-events: none; }
.bulle[hidden] { display: none; }

/* -- Message avec bouton (« Annuler » après une suppression) -- */
.hint.avec-action.show { pointer-events: auto; display: inline-flex; align-items: center; gap: 10px; padding-right: 6px; }
.hint-action { min-height: 36px; padding: 0 12px; border: 1px solid var(--lin-doux); border-radius: var(--r-ctl); background: transparent; color: var(--lin); font: 600 var(--t-3) var(--sans); cursor: pointer; }
.hint-action:active { background: var(--flight-2); }
@media (pointer: coarse) { .hint-action { min-height: var(--cible); } }

/* -- Glisser-déposer depuis la palette -- */
.pal-list { touch-action: pan-y; }
.pal-row.glisse, .chip.glisse { opacity: 0.45; }
.pal-fantome { position: fixed; left: 0; top: 0; z-index: var(--z-visionneuse); width: 60px; height: 60px; border-radius: var(--r-ctl); background: var(--vignette); border: 2px dashed var(--rivet-2); box-shadow: var(--ombre-2); pointer-events: none; opacity: 0.75; }
.pal-fantome.ok { border: 2px solid var(--jaune); opacity: 1; }
.pal-fantome svg { width: 100%; height: 100%; }
/* mur qui reçoit une porte ou une fenêtre */
.mur-cible { stroke: var(--jaune); stroke-linecap: round; fill: none; opacity: 0.85; animation: murCible 1.3s ease-out forwards; pointer-events: none; }
@keyframes murCible { 0% { opacity: 0.95; } 70% { opacity: 0.6; } 100% { opacity: 0; } }

/* -- Palette : rien trouvé -- */
.pal-vide { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 8px; }
.pal-vide-t { margin: 0; font-weight: 600; }
.pal-vide-n { margin: 4px 0 0; color: var(--craie); font-size: var(--t-2); }
.pal-ailleurs, .pal-effacer { justify-content: flex-start; text-align: left; }
.pal-stock { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 4px 4px 8px; border: 1px solid var(--rivet); border-radius: var(--r-ctl); }
.pal-stock .pal-nom { font-size: var(--t-3); }

/* -- Menu : sections repliables -- */
button.menu-head { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: var(--cible); background: none; border-left: none; border-right: none; border-bottom: none; text-align: left; cursor: pointer; padding: 10px 12px 4px; }
button.menu-head::after { content: ''; width: 16px; height: 16px; flex-shrink: 0; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--d-panneau) var(--ease-sortie); }
button.menu-head[aria-expanded="false"]::after { transform: rotate(-90deg); }
button.menu-head:focus-visible { outline: 2px solid var(--jaune); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { button.menu-head:hover { color: var(--lin); } }
.menu-sec[hidden] { display: none; }
.menu .m-note { color: var(--craie); font-size: var(--t-2); }
.menu-item.m-module > span { display: flex; flex-direction: column; gap: 1px; }
.menu-choix { display: flex; flex-direction: column; padding-left: 14px; border-left: 2px solid var(--rivet); margin: 0 0 4px 12px; }
.menu-choix[hidden] { display: none; }
.menu-choix .menu-item { flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; padding-top: 6px; padding-bottom: 6px; }

/* -- Aide : gestes puis clavier -- */
.aide-h { margin: 14px 0 6px; font: 600 var(--t-4) var(--sans); color: var(--lin); }
.aide-gestes dt { font-weight: 600; color: var(--lin); white-space: nowrap; }
@media (hover: none) and (pointer: coarse) and (max-width: 1100px) { .aide-clavier { display: none; } }
.aide-card { max-height: calc(100dvh - 32px); overflow-y: auto; }

/* -- Icônes à la place des glyphes que le JS écrivait (⇄, ‹, ›, ★) -- */
.mini.bascule::after { content: ''; display: inline-block; width: 15px; height: 15px; margin-left: 6px; vertical-align: -2px; background: currentColor; opacity: 0.75;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h15M15.5 4.5L19 8l-3.5 3.5M20 16H5M8.5 12.5L5 16l3.5 3.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h15M15.5 4.5L19 8l-3.5 3.5M20 16H5M8.5 12.5L5 16l3.5 3.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.mini.retour::before { content: ''; display: inline-block; width: 15px; height: 15px; margin-right: 4px; vertical-align: -2px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
.pal-prix.pal-chev::before { content: ''; display: inline-block; width: 18px; height: 18px; background: var(--craie);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
.pal-cat.pal-favs::before { content: ''; display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='1.75' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l2.6 5.4 5.9.8-4.3 4.1 1 5.8L12 16.8l-5.2 2.8 1-5.8-4.3-4.1 5.9-.8z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='1.75' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l2.6 5.4 5.9.8-4.3 4.1 1 5.8L12 16.8l-5.2 2.8 1-5.8-4.3-4.1 5.9-.8z'/%3E%3C/svg%3E") center / contain no-repeat; }
/* Liste matériel en « Client SuperLoc » : plus de colonne de codes Rentman (v0.2.95) */
body:not(.cat-ouvert) .li-row { grid-template-columns: 0 1fr auto 76px auto; }
body:not(.cat-ouvert) .li-row.li-row-r { grid-template-columns: 0 minmax(0, 1fr) minmax(110px, 220px) auto 76px 36px; }
body:not(.cat-ouvert) .li-hit { grid-template-columns: 0 1fr auto 70px; }
body:not(.cat-ouvert) .li-row > .li-code, body:not(.cat-ouvert) .li-hit > .li-code { margin-left: -10px; }
@media (max-width: 720px) { body:not(.cat-ouvert) .li-row { grid-template-columns: 1fr auto; } body:not(.cat-ouvert) .li-row.li-row-r { grid-template-columns: 1fr auto 36px; } body:not(.cat-ouvert) .li-hit { grid-template-columns: 1fr auto; } body:not(.cat-ouvert) .li-row > .li-code { margin-left: 0; } }
/* Fiche production (mail à SuperLoc) et import en double */
.pr-card, .im-card { width: min(480px, 100%); }
.pr-champ { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; font-size: var(--t-2); color: var(--craie); }
.pr-champ input { min-height: var(--cible); font: 500 var(--t-4) var(--sans); color: var(--lin); background: var(--flight); border: 1px solid var(--rivet); border-radius: var(--r-ctl); padding: 0 12px; }
.pr-champ input:focus { border-color: var(--lin); }
.im-actions { flex-wrap: wrap; }
.exp-vide { color: var(--etat-attention); }
.exp-vide[hidden] { display: none; }
#statusbar .btn-label { display: none; }   /* téléphone : les outils passent en bas, sans libellé (appui long = bulle) */

/* v0.3 — options : vues, partage, lecture seule, mesure */
/* -- Vue : bouton en tête de la barre des setups, sur le plan -- */
.setup-bar .sb-vue { display: inline-flex; align-items: center; gap: 6px; color: var(--lin); background: var(--flight); border-color: var(--rivet-2); }
.setup-bar .sb-vue .ico { width: 18px; height: 18px; }
.setup-bar .sb-vue .sb-vue-lbl { color: var(--craie); font-weight: 500; }
.setup-bar .sb-vue strong { font-weight: 700; }
.setup-bar .sb-vue .sb-car { margin-left: 0; font-size: var(--t-1); color: var(--craie); }
.setup-bar .sb-vue.on { box-shadow: inset 0 -2px 0 var(--jaune); }
@media (max-width: 720px) { .setup-bar .sb-vue .sb-vue-lbl { display: none; } }
.vue-pop { width: 290px; max-width: calc(100% - 16px); padding: var(--e0); gap: var(--e-1); }
.vue-choix { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--e-1); min-height: var(--cible); padding: 6px 10px 6px 12px; border: 0; border-radius: var(--r-ctl); background: transparent; color: var(--lin); text-align: left; font: inherit; cursor: pointer; }
.vue-choix strong { font: 600 var(--t-4) var(--sans); }
.vue-choix span { font-size: var(--t-2); color: var(--craie); line-height: 1.3; }
.vue-choix.on { background: var(--flight-2); box-shadow: inset 3px 0 0 var(--jaune); }
.vue-choix:active { background: var(--flight-2); }
@media (hover: hover) and (pointer: fine) { .vue-choix:not(.on):hover { background: var(--flight); } }
/* fenêtre d'export et de partage : rangée de choix (vue du plan, portée du lien) */
.exp-vue { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 0 8px 4px; }
.exp-vue[hidden] { display: none; }
.exp-vue .exp-parpage { margin-left: 0; flex-wrap: wrap; }
.exp-vue-note { margin: 0; flex-basis: 100%; }

/* -- Partage : lien et QR code -- */
.pa-card, .re-card { width: min(520px, 100%); }
.pa-qr { display: flex; flex-direction: column; align-items: center; gap: var(--e1); padding: var(--e2); border-radius: var(--r-pan); background: var(--flight); }
.pa-qr[hidden] { display: none; }
.pa-qr canvas { display: block; border-radius: var(--r-tag); image-rendering: pixelated; }
.pa-qr .acc-note { text-align: center; }
.pa-info { margin: 0; font-size: var(--t-3); color: var(--lin-doux); }
.pa-alerte { color: var(--etat-attention); }
.pa-alerte[hidden] { display: none; }
.pa-lien { width: 100%; min-height: var(--cible); padding: 0 12px; font: 500 var(--t-2) var(--sans); color: var(--lin-doux); background: var(--flight); border: 1px solid var(--rivet); border-radius: var(--r-ctl); text-overflow: ellipsis; }
.pa-actions, .re-actions { flex-wrap: wrap; }
.pa-actions .mini[hidden], .re-actions .mini[hidden] { display: none; }
/* b20 : un plan reçu devient une scène d'un projet */
.re-scene { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rivet); }
.re-scene[hidden] { display: none; }
.re-scene select { flex: 1; min-width: 180px; padding: 8px; border: 1px solid var(--rivet); border-radius: 8px; background: var(--flight); color: var(--lin); font: inherit; }
.re-scene .acc-note { flex-basis: 100%; }

/* -- Lecture seule : bandeau discret dans la barre du haut, outils d'édition masqués -- */
.lecture-bandeau { display: flex; align-items: center; justify-content: center; gap: var(--e1); flex: 1 1 auto; min-width: 0; }
.lecture-bandeau[hidden] { display: none; }
.lb-txt { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 10px; border: 1px solid var(--rivet-2); border-radius: var(--r-ctl); color: var(--lin); font: 600 var(--t-3) var(--sans); white-space: nowrap; box-shadow: inset 0 -2px 0 var(--jaune); }
.lb-txt .ico { width: 18px; height: 18px; }
.lecture-bandeau .mini { white-space: nowrap; }
.lecture-bandeau .mini[hidden] { display: none; }
@media (max-width: 720px) {   /* téléphone : l'œil seul dit « lecture seule », le titre garde sa place */
  .lb-mot, .lb-long { display: none; }
  .lb-txt { padding: 0 8px; border: 0; }
  .lecture-bandeau { flex: 0 0 auto; gap: var(--e0); }
  body.lecture #topbar .logo { display: none; }
}
body.lecture #statusHint { visibility: hidden; }   /* les consignes d'édition ne servent à rien en lecture seule */
.cp-titre { margin: var(--e0) var(--e1) var(--e0); font-size: var(--t-2); color: var(--craie); }
#mPartager, #mLecture { flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; padding-top: 6px; padding-bottom: 6px; }
@media (pointer: coarse) { .lb-txt { min-height: var(--cible); } }
@media (min-width: 721px) and (max-width: 1100px) {   /* iPad portrait : sans les outils, une seule rangée suffit */
  body.lecture { --bar-h: 56px; }
  body.lecture #topbar { flex-wrap: nowrap; }
  body.lecture #topbar .lecture-bandeau { order: 2; }
  body.lecture #topbar .actions { order: 3; margin-left: 0; }
}
body.lecture .tools, body.lecture #btnUndo, body.lecture #btnRedo, body.lecture #planVide, body.lecture .setup-bar .sb-plus, body.lecture #sbMenu, body.lecture #palette,
body.lecture #statusSel, body.lecture #statusCoin, body.lecture #statusObj > :not(#objName):not(#btnFiche),
body.lecture :is(#mNew, #mProjets, #mImport, #mEnregistrer, #mSceneAdd, #mSceneChoix, #mFond, #mReleve, #mCatalogue, #mPack, #mSoleil),
body.lecture #mCalques .cq-lock, body.lecture #mCalques .cq-vide, body.lecture .pt-auto, body.lecture #listeReset, body.lecture #liste .li-sec:has(#listeSearch),
body.lecture #cadreVue .cv-barre, body.lecture #cvAjouter { display: none !important; }
body.lecture #btnTitle { pointer-events: none; }
/* panneaux : on lit, on ne règle pas (les boutons Fermer restent) */
body.lecture :is(#fiche, #cellule, #piedPan, #intPan, #patchPan, #elecPan, #fondPan, #soleil) :is(input, select, textarea, button:not(.icon)),
body.lecture #listeBody :is(input, select, textarea, .li-plus, .li-moins, .li-del), body.lecture .li-duree :is(button, input), body.lecture #listePdfCats .mini {
  pointer-events: none; opacity: 0.6;
}

/* -- Règle de mesure -- */
#btnMesure.on { color: var(--jaune); border-color: var(--jaune); background: var(--flight-2); }
.mesure-calque { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: var(--z-hud); pointer-events: none; overflow: visible; }
.me-ligne { stroke: var(--pl-encre); stroke-width: 2; stroke-dasharray: 7 5; stroke-linecap: round; }
.me-ligne.temp { stroke-dasharray: none; }
.me-pt { fill: var(--jaune); stroke: var(--encre-fixe); stroke-width: 2; }
.me-pt.depart { r: 8px; }
.me-etq { font: 700 var(--t-3) var(--sans); fill: var(--pl-encre); paint-order: stroke; stroke: var(--pl-halo); stroke-width: 5px; stroke-linejoin: round; }
.mesure-pan { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: var(--z-plan-ui); width: min(600px, calc(100% - 136px)); display: flex; align-items: center; gap: var(--e2); padding: var(--e1) var(--e1) var(--e1) 14px; background: var(--voile); color: var(--lin); border: 1px solid var(--rivet); border-radius: var(--r-pan); box-shadow: var(--ombre-1); }
.mesure-pan[hidden] { display: none; }
.me-txt { flex: 1; min-width: 0; margin: 0; font-size: var(--t-3); line-height: 1.35; }
.me-btns { display: flex; gap: 6px; flex-shrink: 0; }
.me-btns .mini[hidden] { display: none; }
@media (max-width: 720px) { .mesure-pan { left: 12px; transform: none; width: calc(100% - 80px); flex-wrap: wrap; } .me-btns { width: 100%; justify-content: flex-end; } }
body:has(#mesurePan:not([hidden])) .hint { bottom: 96px; }
@media (max-width: 720px) { body:has(#mesurePan:not([hidden])) .hint { bottom: 132px; } }

/* ==== v0.3 — retours de Flo (1) : barre plus grande sur ordinateur, menu Construction, objets passés sous un meuble ==== */
/* Ordinateur (souris, écran ≥ 1101 px) : la barre du haut reprend de l'ampleur — icônes 24 px, libellés 12 px, boutons ≥ 52 px.
   iPad (doigt) et téléphone ne sont pas concernés : ils gardent leurs réglages (pointer: coarse). */
@media (min-width: 1101px) and (hover: hover) and (pointer: fine) {
  :root { --bar-h: 66px; }
  #topbar .tools { gap: 2px; }
  #topbar .tool, #topbar .actions > .icon { height: 58px; min-width: 52px; padding: 0 6px; gap: 4px; }
  #topbar .tool svg, #topbar .actions > .icon svg { width: 24px; height: 24px; }
  #topbar .btn-label { font: 500 var(--t-2)/1 var(--sans); font-stretch: 90%; opacity: 0.9; }
  #topbar .switch { height: 58px; gap: 5px; padding: 0 6px; }
  #topbar .switch .lbl, body.scenes #topbar .switch .lbl { font: 500 var(--t-2)/1 var(--sans); font-stretch: 90%; }
  #topbar .switch .track { width: 40px; height: 22px; }
  #topbar .switch .knob { width: 16px; height: 16px; }
  #topbar .switch input:checked + .track .knob { transform: translateX(18px); }
  .title { font-size: var(--t-5); }
}
/* fenêtre d'ordinateur entre 1101 et 1340 px : on resserre un peu pour que tout tienne (logo déjà masqué jusqu'à 1280) */
@media (min-width: 1101px) and (max-width: 1340px) and (hover: hover) and (pointer: fine) {
  #topbar .tool, #topbar .actions > .icon { min-width: 48px; padding: 0 4px; }
  #topbar .tools { gap: 1px; }
  .title { max-width: 16vw; }
}
@media (min-width: 1101px) and (max-width: 1280px) and (hover: hover) and (pointer: fine) { body.elec #topbar .btn-label { font-stretch: 80%; } body.elec #topbar .tool { min-width: 44px; padding: 0 3px; } }

/* Menu Construction : les outils Mur et Pièce en tête, comme des lignes de catalogue */
.pal-row.pal-outil .pal-sym svg { color: var(--encre-fixe); }
.pal-row.pal-outil.on { background: var(--flight-2); box-shadow: inset 3px 0 0 var(--jaune); }
.pal-row.pal-off { opacity: 0.45; }
.pal-nom kbd { font: 600 var(--t-1)/1 var(--sans); padding: 2px 5px; margin-left: 6px; border: 1px solid var(--rivet-2); border-radius: var(--r-tag); color: var(--craie); vertical-align: 1px; }
@media (pointer: coarse) { .pal-nom kbd { display: none; } }
.pal-row.pal-double .pal-sym svg { color: var(--encre-fixe); }

/* Objets passés sous un meuble : dessinés dans le calque Mobilier avec l'encre de leur calque ; le meuble au-dessus reçoit un aplat
   couleur du sol (il les cache, vu de dessus) */
#layer-mobilier .sous-objet { color: var(--pl-encre); }
.masque-sol { fill: var(--pl-sol); stroke: none; }

/* v0.3 — scènes et setups au même endroit, en haut à gauche (retour de Valentin Davre) */
/* -- la scène dans la barre : un bouton qui ouvre le panneau « Scènes » (avant : une liste déroulante) -- */
.setup-bar .sb-scene { display: inline-flex; align-items: center; gap: 6px; padding: 0 8px 0 12px; background-image: none; text-align: left; }
.setup-bar .sb-scene .sb-scene-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.setup-bar .sb-scene .sb-chev { flex: none; width: 16px; height: 16px; color: var(--craie); }
.setup-bar .sb-scene[aria-expanded="true"] { background: var(--flight-2); border-color: var(--rivet-2); }
@media (max-width: 720px) { .setup-bar .sb-scene { max-width: 36vw; } }
/* -- onglets des setups : on les glisse pour changer l'ordre -- */
.setup-bar .sb-tab { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.setup-bar .sb-tab.souleve { position: relative; z-index: 2; box-shadow: var(--ombre-2), 0 0 0 1px var(--jaune); cursor: grabbing; }
.sb-tabs.en-tri .sb-tab:not(.souleve) { transition: transform var(--d-court) var(--ease-sortie); }
/* -- menu du setup : nom, dupliquer, ordre, supprimer -- */
.sb-actions { align-items: center; }
.sb-dup { display: inline-flex; align-items: center; gap: 6px; flex: 1 1 auto; }
.sb-dup svg, .sb-fl svg, .sb-menu .mini.del svg { width: 18px; height: 18px; flex: none; }
.sb-ordre { display: inline-flex; gap: 6px; }
.sb-ordre[hidden], .sb-ajscene[hidden] { display: none; }
.sb-fl { width: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.sb-fl:disabled { opacity: 0.35; cursor: default; }
.sb-menu .mini.del { justify-content: flex-start; }
.sb-ajscene { display: flex; flex-direction: column; gap: var(--e-1); padding-top: var(--e1); border-top: 1px solid var(--rivet); }
.sb-ajscene > .mini { align-self: flex-start; }
@media (max-width: 720px) { .sb-menu .mini.del span { display: inline; } .sb-menu .mini.del { padding: 0 12px; } }
@media (pointer: coarse) { .sb-menu .mini { min-height: var(--cible); } .sb-fl { width: var(--cible); } }
/* -- panneau « Scènes » -- */
.sc-pop { width: 360px; max-width: calc(100% - 16px); padding: var(--e1); gap: var(--e1); overflow: hidden; }
.sc-titre { margin: 2px 6px 0; }
.sc-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; min-height: 0; flex: 0 1 auto; overflow-y: auto; overscroll-behavior: contain; }
.sc-ligne { position: relative; display: flex; align-items: center; gap: 2px; min-height: 52px; padding: 0 2px; border-radius: var(--r-ctl); background: var(--gaffer); }
.sc-ligne.on { background: var(--flight-2); box-shadow: inset 3px 0 0 var(--jaune); }
.sc-liste.en-tri .sc-ligne:not(.souleve) { transition: transform var(--d-court) var(--ease-sortie); }
.sc-ligne.souleve { z-index: 2; background: var(--flight); box-shadow: var(--ombre-2), inset 0 0 0 1px var(--jaune); }
.sc-poignee { flex: none; width: 36px; height: var(--cible); padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--r-ctl); background: none; color: var(--craie); cursor: grab; touch-action: none; }
.sc-poignee svg { width: 20px; height: 20px; }
.sc-poignee:disabled { opacity: 0.3; cursor: default; }
.sc-ligne.souleve .sc-poignee { color: var(--jaune); cursor: grabbing; }
.sc-choisir { flex: 1 1 auto; min-width: 0; min-height: var(--cible); padding: 4px 6px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; border: 0; border-radius: var(--r-ctl); background: none; color: var(--lin); font: inherit; text-align: left; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.sc-nom { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 var(--t-4) var(--sans); }
.sc-ligne.on .sc-nom { font-weight: 700; }
.sc-info { font-size: var(--t-2); color: var(--craie); }
.sc-ligne .sc-champ { flex: 1 1 auto; min-width: 0; width: auto; min-height: 40px; font-size: var(--t-4); }
.sc-ligne .icon { flex: none; width: 40px; height: var(--cible); color: var(--lin-doux); }
.sc-ligne .icon svg { width: 19px; height: 19px; }
.sc-ligne.edition .sc-dup, .sc-ligne.edition .sc-del { display: none; }
.sc-ligne .icon:active:not(:disabled), .sc-choisir:active { background: var(--flight); }
.sc-choisir:focus-visible, .sc-poignee:focus-visible, .sc-ligne .icon:focus-visible { outline: 2px solid var(--jaune); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) {
  .sc-choisir:hover, .sc-poignee:hover:not(:disabled), .sc-ligne .icon:hover:not(:disabled) { background: var(--flight); }
  .sc-ligne .sc-del:hover:not(:disabled) { color: var(--tally-texte); }
}
@media (pointer: coarse) { .sc-poignee, .sc-ligne .icon { width: var(--cible); } }
.sc-pied { display: flex; flex-direction: column; gap: var(--e0); padding-top: var(--e1); border-top: 1px solid var(--rivet); }
.sc-pied[hidden], .sc-choix[hidden], .sc-pop .sb-note[hidden] { display: none; }
.sc-nouvelle { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; }
.sc-nouvelle svg { width: 18px; height: 18px; }
@media (pointer: coarse) { .sc-nouvelle { min-height: var(--cible); } }
.sc-choix { display: flex; flex-direction: column; gap: var(--e-1); }
.sc-pop .sb-note { margin: 0 6px 2px; }
@media (prefers-reduced-motion: reduce) { .sc-liste.en-tri .sc-ligne, .sb-tabs.en-tri .sb-tab { transition: none !important; } }
/* « Vue » reste collé à gauche quand la barre défile (téléphone) */
.setup-bar .sb-vue { position: sticky; left: 0; z-index: 3; box-shadow: -5px 0 0 0 var(--gaffer); }
.setup-bar .sb-vue.on { box-shadow: inset 0 -2px 0 var(--jaune), -5px 0 0 0 var(--gaffer); }
.sc-ligne .sc-ok { color: var(--jaune); }
@media (max-width: 720px) {   /* téléphone : la barre tient sur la largeur avec deux ou trois setups */
  .setup-bar:not(.seul) .sb-tab .sb-pre { display: none; }   /* un seul setup : « Setup A » reste écrit en entier */
  .setup-bar .sb-tab { min-width: var(--cible); padding: 0 10px; }
  .setup-bar .sb-scene { max-width: 30vw; padding: 0 6px 0 10px; }
  .setup-bar .sb-vue { padding: 0 8px; }
}

/* v0.3.0-b8 — téléphone : le nuancier en surimpression passait sur une seule ligne de 700 px (la règle de la barre
   « nowrap, défilement » l'emportait), les pastilles sortaient de l'écran des deux côtés. Il revient à la ligne :
   températures de couleur sur la première, couleurs vives en dessous. */
@media (max-width: 720px) {
  #statusbar .pop-couleur .swatches, #statusbar.has-sel .pop-couleur .swatches { flex-wrap: wrap !important; overflow: visible !important; max-width: 100% !important; justify-content: center; }
  #statusbar .pop-couleur { width: calc(100vw - 24px); box-sizing: border-box; }
  #statusbar .pop-couleur .swatches { width: 100%; }
  #statusbar .pop-couleur .sw-sep { flex-basis: 100%; width: auto; height: 0; margin: 0; background: none; }
}

/* v0.3.0-b10 — couteaux des projecteurs à découpe : deux lames carrées au bord du faisceau */
.cut-handle { fill: var(--lin, #F3F1EC); stroke: var(--encre-fixe); stroke-width: 2.5; cursor: grab; }
.cut-line { stroke: var(--encre-fixe); stroke-width: 1.2; stroke-dasharray: 2 4; opacity: 0.7; }

/* v0.3.0-b11 — compte en ligne */
.cp-card { max-width: 460px; }
.cp-google { min-height: 48px; display: flex; justify-content: center; align-items: center; margin: 6px 0; }
.cp-err { color: #F0A090; }
.menu-item.cp-info { cursor: default; font-weight: 600; }
/* v0.3.0-b17 — synchro par code */
.cp-ou { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; color: var(--craie); font-size: var(--t-2); }
.cp-ou::before, .cp-ou::after { content: ''; flex: 1; height: 1px; background: var(--rivet); }
.cp-code-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 480px) { .cp-code-btns { grid-template-columns: 1fr; } }
.cp-mots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 8px 0; }
.cp-mots span { padding: 10px 6px; border: 1px solid var(--rivet); border-radius: 8px; background: var(--flight); text-align: center; font-size: var(--t-4); font-weight: 650; letter-spacing: 0.01em; user-select: all; }
.cp-mots span i { display: block; font-style: normal; font-size: 11px; font-weight: 500; color: var(--craie); }
.cp-actions { display: flex; gap: 8px; margin-bottom: 6px; }
.cp-qr { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 8px 0; }
.cp-qr canvas { border-radius: 8px; }
.cp-alerte { color: var(--jaune); }
.cp-coche { display: flex; align-items: center; gap: 8px; margin: 10px 0; font-size: var(--t-3); cursor: pointer; }
.cp-coche input { width: 20px; height: 20px; accent-color: var(--jaune); }
.cp-champ { width: 100%; box-sizing: border-box; margin: 6px 0; padding: 10px; border: 1px solid var(--rivet); border-radius: 8px; background: var(--flight); color: var(--lin); font: inherit; font-size: 16px; }
.cp-go { min-height: 0; margin-top: 8px; width: 100%; align-items: center; }
.cp-go:disabled { opacity: 0.45; cursor: default; }
.cp-retour { margin-top: 10px; }
#compteDlg [hidden] { display: none !important; }   /* .acc-btn, .cp-qr, .cp-coche ont un display à eux */
.menu-item.danger { color: #F0A090; }
.menu-item.danger.armed { background: rgba(240, 120, 100, 0.18); }
.menu-head[hidden], .menu-sec[hidden], .menu-item[hidden] { display: none; }

/* b22 : statistiques anonymes — le message de première ouverture et son réglage dans le menu Aide */
#mStatsLbl[hidden] { display: none !important; }
.stats-carte { position: fixed; left: 12px; bottom: 12px; z-index: 60; width: min(340px, calc(100vw - 24px)); padding: 14px; border: 1px solid var(--rivet); border-radius: var(--r-pan, 12px); background: var(--voile); color: var(--lin); box-shadow: var(--ombre-1); font-size: 0.9rem; }
.stats-carte .st-titre { margin: 0 0 6px; font-weight: 650; }
.stats-carte .st-txt { margin: 0 0 8px; line-height: 1.4; }
.stats-carte .st-det { margin: 0 0 10px; font-size: 0.82rem; opacity: 0.85; }
.stats-carte .st-det summary { cursor: pointer; }
.stats-carte .st-det p { margin: 6px 0 0; line-height: 1.4; }
.stats-carte .st-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* b24 : onglets du menu Lumière (Marques · LED · Tungstène · HMI · Flash), sous les favoris ; hauteur d'accroche en plafond */
.pal-onglets { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 10px 4px; }
.pal-onglet { flex: 0 0 auto; font: 600 var(--t-3) var(--sans); color: var(--lin); background: transparent; border: 1px solid var(--rivet); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.pal-onglet .pal-onglet-n { opacity: 0.55; font-weight: 500; margin-left: 2px; }
.pal-onglet.on { background: var(--jaune); border-color: var(--jaune); color: #1B1915; }
.pal-onglet.on .pal-onglet-n { opacity: 0.7; }
.h-plafond { display: inline-flex; align-items: center; gap: 4px; }
.h-plafond[hidden] { display: none; }
.h-plafond input { width: 3.6em; font: inherit; color: inherit; background: transparent; border: 1px solid var(--rivet); border-radius: 6px; padding: 2px 4px; text-align: right; }

/* b27 (retour de Flo) : de la place dans la barre d'un objet — Derrière / Devant en icônes seules, et plus de phrase d'aide à gauche
   quand un objet est sélectionné (elle reste quand rien n'est sélectionné) */
#btnDerriere, #btnDevant { padding-left: 8px; padding-right: 8px; }
#statusbar:has(#statusObj:not([hidden])) .s-left { display: none; }

/* b30 — Découpage : la liste des plans de la scène, à droite du plan */
.decoupage {
  position: absolute; right: 8px; top: 8px; bottom: 8px; width: min(360px, calc(100vw - 16px));
  background: var(--gaffer); color: var(--lin); border: 1px solid var(--rivet); border-radius: var(--r-pan);
  display: flex; flex-direction: column; z-index: var(--z-palette); box-shadow: var(--ombre-2);
}
.decoupage[hidden] { display: none; }
.dc-head { display: flex; align-items: center; gap: 4px; padding: 8px 6px 8px 14px; border-bottom: 1px solid var(--rivet); }
.dc-titres { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dc-titres strong { font: 650 var(--t-4) var(--sans); }
.dc-titres span { font-size: var(--t-2); color: var(--craie); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-liste { flex: 1; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 6px; -webkit-overflow-scrolling: touch; }
.dc-vide { margin: 0; padding: 4px 16px 12px; font-size: var(--t-2); color: var(--craie); line-height: 1.45; }
.dc-vide[hidden] { display: none; }
.dc-plan { border: 1px solid var(--rivet); border-radius: var(--r-ctl); background: var(--flight); }
.dc-plan.on { border-color: var(--jaune); box-shadow: inset 3px 0 0 var(--jaune); }
.dc-carte { display: flex; gap: 10px; width: 100%; padding: 6px; background: none; border: 0; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.dc-vign { flex: 0 0 96px; height: 54px; border-radius: 4px; overflow: hidden; background: var(--vignette); }
.dc-vign svg, .dc-vign img { width: 100%; height: 100%; display: block; object-fit: cover; }
.dc-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dc-l1 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dc-l1 b { font: 650 var(--t-3) var(--sans); }
.dc-setup, .dc-cam { font-style: normal; font-size: var(--t-1); padding: 1px 6px; border-radius: 9px; border: 1px solid var(--rivet-2); color: var(--craie); }
.dc-l2 { font-size: var(--t-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-l3 { font-size: var(--t-1); color: var(--craie); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-bouge { margin: 0 8px 8px; font-size: var(--t-1); color: var(--craie); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dc-form { display: flex; flex-wrap: wrap; gap: 6px 8px; padding: 2px 8px 8px; border-top: 1px solid var(--rivet); padding-top: 8px; }
.dc-ch { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-1); color: var(--craie); }
.dc-ch .mini.txt { min-width: 0; }
.dc-num .mini { width: 54px; } .dc-dur .mini { width: 48px; }
.dc-val, .dc-suj { flex: 1 1 140px; } .dc-val .mini, .dc-suj .mini { flex: 1; width: auto; }
.dc-note-in { width: 100%; min-height: 44px; resize: vertical; font: 500 var(--t-2) var(--sans); padding: 6px 8px; }
.dc-cadre { margin: 0; width: 100%; font-size: var(--t-1); color: var(--craie); }
.dc-cadre b { color: var(--lin); }
.dc-actions { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.dc-pied { padding: 8px; border-top: 1px solid var(--rivet); }
.dc-pied #dcNouveau { width: 100%; justify-content: center; display: inline-flex; align-items: center; gap: 6px; }
.dc-pied #dcNouveau svg { width: 16px; height: 16px; }
.dc-pied small { color: var(--craie); font-weight: 500; }
.dc-pied #dcNouveau[hidden] { display: none; }
/* sur le plan : les autres plans en pâle */
.dc-fantome { pointer-events: none; opacity: 0.55; }
.dc-fantome.autre-setup { opacity: 0.35; }
.dc-fantome polyline { fill: none; stroke: #4F78A8; stroke-width: 1.5; stroke-dasharray: 5 4; }
.dc-fantome circle { fill: #FFFFFF; stroke: #4F78A8; stroke-width: 2; }
.dc-fantome rect { fill: #4F78A8; }
.dc-fantome text { fill: #FFFFFF; font: 650 11px var(--sans, sans-serif); }
.dc-mesure { pointer-events: none; }
.dc-mesure line { stroke: #D9381E; stroke-width: 1.2; stroke-dasharray: 2 4; }
.dc-mesure text { fill: #D9381E; font: 650 11.5px var(--sans, sans-serif); paint-order: stroke; stroke: #FFFFFF; stroke-width: 3px; }
/* le petit tuto */
.dt-card { width: min(520px, 100%); }
.dt-nouveau { margin: 0; align-self: flex-start; font: 700 var(--t-1) var(--sans); color: var(--sur-jaune, #1B1915); background: var(--jaune); padding: 2px 8px; border-radius: 9px; }
.dt-intro { margin: 0; color: var(--craie); font-size: var(--t-3); }
.dt-etapes { margin: 4px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: var(--t-3); line-height: 1.45; }
.dt-note { margin: 2px 0 0; font-size: var(--t-2); color: var(--craie); }
.dt-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.dt-btns #dtOuvrir { background: var(--lin); color: var(--gaffer); border-color: var(--lin); box-shadow: none; font-weight: 600; }
@media (max-width: 700px) { .decoupage { top: auto; height: 58%; left: 8px; width: auto; } }
.dc-form .dc-note-in { flex: 1 1 100%; width: 100%; }
#btnAjPlan { white-space: nowrap; }
/* b31 — Copier vers… : aussi vers les autres scènes */
.copie-pop { max-height: min(60vh, 520px); overflow-y: auto; }
.copie-pop .cp-sous { margin-top: var(--e2, 8px); border-top: 1px solid var(--rivet); padding-top: 8px; }

/* b32 — Timeline en pistes : une ligne par élément qui bouge, un bloc par tronçon */
.timeline { max-width: 940px; }
.timeline.reduit .tl-pistes, .timeline.reduit .tl-edit, .timeline.reduit .tl-choix { display: none; }
.tl-pistes { display: flex; flex-direction: column; gap: 4px; max-height: 34vh; overflow-y: auto; overscroll-behavior: contain; }
.tl-pistes:empty { display: none; }
.tl-row { display: flex; align-items: stretch; gap: 8px; min-height: 40px; }
.tl-row.tl-regle { min-height: 18px; }
.tl-nom { flex: 0 0 92px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.tl-nom b { font: 700 var(--t-2) var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-nom small { font-size: var(--t-1); color: var(--craie); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-bar { position: relative; flex: 1; min-width: 0; margin: 0 12px; cursor: pointer; touch-action: none; }
.tl-regle .tl-bar { height: 18px; }
.tl-tick { position: absolute; top: 0; bottom: -4px; border-left: 1px solid var(--rivet); }
.tl-tick span { position: absolute; left: 3px; top: 1px; font: 500 var(--t-1) var(--sans); color: var(--craie); white-space: nowrap; }
.tl-seg { position: absolute; top: 3px; bottom: 3px; border-radius: 7px; border: 1.5px solid #5B7FA6; background: #2E3A4E; color: var(--lin); padding: 0 8px; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; cursor: pointer; font: inherit; min-width: 4px; }
.tl-row.perso .tl-seg { border-color: #B5574A; background: #4A2B27; }
.tl-seg b { font: 700 var(--t-1) var(--sans); white-space: nowrap; }
.tl-seg small { font-size: 10.5px; color: var(--craie); white-space: nowrap; }
.tl-seg.fixe b::after { content: ' •'; color: var(--jaune); }
.tl-seg.vite { border-color: #E07B1F; background: #4F3418; }
.tl-seg.vite small { color: #F0A25A; }
.tl-seg.on { border-color: var(--jaune); box-shadow: 0 0 0 1px var(--jaune); }
.tl-arret { position: absolute; top: 3px; bottom: 3px; border-radius: 7px; border: 1px solid #6B6352; background: repeating-linear-gradient(45deg, #3A352C 0 5px, #4A4436 5px 9px); font: 600 10.5px var(--sans); color: var(--lin); display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; pointer-events: none; }
.tl-attente { position: absolute; left: 0; top: 50%; height: 0; border-top: 1px dashed var(--rivet-2); font-size: 10px; color: var(--craie); pointer-events: none; }
.tl-pos { position: absolute; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: #3D5F96; border: 2px solid var(--gaffer); color: #fff; font: 700 10.5px/16px var(--sans); text-align: center; pointer-events: none; z-index: 2; }
.tl-row.perso .tl-pos { background: #B5392B; }
.tl-pos.depart { pointer-events: auto; cursor: ew-resize; }
.tl-bord { position: absolute; top: -2px; bottom: -2px; width: 14px; margin-left: -7px; cursor: ew-resize; z-index: 3; }
.tl-bord::after { content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 4px; border-radius: 2px; background: var(--jaune); opacity: 0; transition: opacity 0.12s; }
.tl-row:hover .tl-bord::after, .tl-seg.on + .tl-bord::after { opacity: 1; }
@media (hover: none) { .tl-bord::after { opacity: 0.55; } }
.tl-cur { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--jaune); pointer-events: none; z-index: 4; }
.tl-regle .tl-cur { display: none; }
.tl-choix { flex: 0 1 auto; max-width: 140px; }
.tl-choix[hidden] { display: none; }
.tl-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 6px 8px; border: 1px solid var(--rivet); border-radius: var(--r-ctl); background: var(--flight); font-size: var(--t-2); }
.tl-edit[hidden] { display: none; }
.tle-nom { font-weight: 700; }
.tle-ch { display: inline-flex; align-items: center; gap: 4px; color: var(--craie); }
.tle-ch .mini.txt { width: 54px; }
.tle-l { color: var(--craie); }
.tle-grp { display: inline-flex; align-items: center; gap: 4px; color: var(--craie); }
.tle-vite { color: #F0A25A; font-weight: 600; }
.kf-t.vite { fill: #D96A0B; font-weight: 700; }
@media (max-width: 699px) {   /* téléphone : une piste à la fois, compacte */
  .tl-pistes { max-height: 96px; }
  .tl-row { min-height: 34px; gap: 4px; }
  .tl-nom { flex-basis: 0; display: none; }
  .tl-bar { margin: 0 10px; }
  .tl-seg small { display: none; }
  .tl-edit { gap: 4px 8px; padding: 5px 6px; }
  .tl-edit .tle-l { display: none; }
}
@media (max-width: 699px) {
  .tl-edit .tle-nom { flex-basis: 100%; font-size: var(--t-1); }
  .tl-edit .tle-ch .mini.txt { width: 46px; }
  .tl-edit .mini { padding-left: 7px; padding-right: 7px; }
  .timeline .tl-mesures { font-size: var(--t-1); }
}

/* b33 — glissières de la barre du bas (hauteur, rotation) et saisie de l'intensité */
.reglette { position: fixed; z-index: var(--z-modal); display: flex; align-items: center; gap: 10px; width: 260px; max-width: calc(100vw - 16px); padding: 10px 12px; background: var(--gaffer); color: var(--lin); border: 1px solid var(--rivet); border-radius: var(--r-pan); box-shadow: var(--ombre-2); }
.reglette[hidden] { display: none; }
.reglette input[type=range] { flex: 1; min-width: 0; accent-color: var(--jaune); }
#rgVal { flex: none; min-width: 58px; text-align: right; font: 700 var(--t-3) var(--sans); }
.int-saisie { display: inline-flex; align-items: center; gap: 4px; font: 700 var(--t-4) var(--sans); }
.int-saisie .mini.txt { width: 56px; font-weight: 700; }

/* b35 — téléphone étroit : le titre du projet ne passe plus sous « Annuler » (le logo cède sa place) */
@media (max-width: 479px) {
  #topbar .logo { display: none; }
  #topbar .brand { flex: 1 1 auto; min-width: 0; }
  #topbar #btnTitle { display: block; min-width: 0; max-width: 100%; flex: 1 1 auto; text-align: left; padding-left: 4px; }
  #topbar .actions { flex: none; }
  .title-input { min-width: 0; width: 100%; }
}
/* la barre d'un objet défile : un chevron annonce la suite, à gauche de « Supprimer » */
#statusbar.suite-a-droite #statusObj #btnDeleteObj::before { content: '›'; position: absolute; left: -20px; top: 50%; transform: translateY(-52%); font: 700 22px/1 var(--sans); color: var(--jaune); pointer-events: none; }
#statusObj #btnDeleteObj { overflow: visible; }

/* b35 — fenêtre Caméra : panneau à droite (grand écran), feuille à onglets en bas (téléphone) */
.cam-pan {
  position: absolute; right: 8px; top: 8px; bottom: 8px; width: min(340px, calc(100vw - 16px)); z-index: var(--z-panneau);
  background: var(--gaffer); color: var(--lin); border: 1px solid var(--rivet); border-radius: var(--r-pan); box-shadow: var(--ombre-2);
  display: flex; flex-direction: column;
}
.cam-pan[hidden] { display: none; }
.cp-head { display: flex; align-items: center; gap: 6px; padding: 8px 6px 6px 14px; }
.cp-tit { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cp-tit h2 { margin: 0; font: 650 var(--t-4) var(--sans); }
.cp-resume { font-size: var(--t-2); color: var(--craie); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-tabs { display: flex; gap: 2px; padding: 0 8px; border-bottom: 1px solid var(--rivet); }
.cp-tab { flex: 1; min-height: 36px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--craie); font: 600 var(--t-2) var(--sans); cursor: pointer; }
.cp-tab.on { color: var(--lin); border-bottom-color: var(--jaune); }
.cp-corps { flex: 1; overflow-y: auto; padding: 10px 12px 14px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.cp-l { display: flex; flex-direction: column; gap: 4px; font-size: var(--t-2); color: var(--craie); }
.cp-l select, .cp-l input.txt { width: 100%; min-height: 36px; }
.cp-l.cp-zoom, .cp-l.cp-libre { flex-direction: row; align-items: center; gap: 8px; }
.cp-l.cp-zoom input[type=range] { flex: 1; accent-color: var(--jaune); }
.cp-l input.num { width: 72px; flex: none; }
.cp-t { margin: 4px 0 0; font: 650 var(--t-2) var(--sans); color: var(--craie); text-transform: uppercase; letter-spacing: .04em; }
.cp-note { margin: 0; font-size: var(--t-2); color: var(--craie); line-height: 1.4; }
.cp-info { margin: 0; font-size: var(--t-2); color: var(--lin); line-height: 1.4; }
.cp-series { display: flex; flex-direction: column; gap: 4px; }
.cp-serie { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; padding: 7px 10px; text-align: left; background: var(--flight); color: inherit; border: 1px solid var(--rivet); border-radius: var(--r-ctl); cursor: pointer; font: inherit; }
.cp-serie b { font: 600 var(--t-3) var(--sans); }
.cp-serie span { font-size: var(--t-1, 11px); color: var(--craie); }
.cp-serie.on { border-color: var(--jaune); box-shadow: inset 3px 0 0 var(--jaune); }
.cp-serie.off { opacity: .45; cursor: not-allowed; }
.cp-puces { display: flex; flex-wrap: wrap; gap: 4px; }
.cp-puces .cp-f { min-width: 44px; }
.cp-mach { display: flex; align-items: center; gap: 8px; font-size: var(--t-3); min-height: 32px; }
.cp-mach span { margin-left: auto; color: var(--craie); font-size: var(--t-2); }
.cp-btns { display: flex; flex-wrap: wrap; gap: 6px; }
#btnCamRegl { font-weight: 650; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) {
  .cam-pan { position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 56vh; border-radius: var(--r-pan) var(--r-pan) 0 0; z-index: var(--z-feuille); padding-bottom: env(safe-area-inset-bottom); }
  .cp-head { padding-top: 6px; }
  body.avec-cam-pan #timeline { display: none; }   /* la feuille Caméra prend le bas : la timeline revient à la fermeture */
}
/* b36 : la ligne Bras (girafes, déports, menace arms) passe à la ligne quand le catalogue est large */
.fi-mode.fi-wrap { display: inline-flex; flex-wrap: wrap; gap: 4px; max-width: 100%; }

/* b38 : export vidéo */
.tl-video { flex: none; min-height: 32px; padding: 0 10px; font-weight: 700; letter-spacing: .02em; }
.vid-barre { height: 8px; border-radius: 4px; background: var(--rivet); overflow: hidden; }
.vid-barre span { display: block; height: 100%; width: 0; background: var(--jaune, #FFC801); transition: width .15s linear; }