/* Concepteur d'espace — plan 2D (Phase 11).
   Le SVG a un viewBox exprimé en centimètres : cette feuille ne fixe QUE des
   tailles d'affichage, jamais une échelle métier. */
.plan-page{max-width:1280px;margin:0 auto;padding:18px 16px 120px}
.plan-top,.plan-hero,.plan-outils,.plan-vue-outils,.plan-top-right,.plan-modes{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.plan-top{justify-content:space-between;margin-bottom:14px}
.plan-top-right{gap:12px}
.plan-maj{font-size:.8rem;color:var(--ink-soft)}
.plan-hero{justify-content:space-between;padding:18px 20px;border-radius:var(--radius-md,18px);background:var(--card,#fff);border:1px solid var(--border);margin-bottom:14px}
.plan-hero h1{margin:2px 0}
.plan-piece{margin-bottom:12px}
.plan-grid-2,.plan-grid-3{display:grid;gap:10px}
.plan-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.plan-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.plan-piece input,.plan-inspecteur-form input,.plan-inspecteur-form select{width:100%;min-height:44px}
.plan-piece label,.plan-inspecteur-form label,.plan-snap{display:block;font-size:.75rem;color:var(--ink-soft);margin-bottom:4px}
.plan-outils,.plan-vue-outils{padding:10px;border-radius:var(--radius-sm,10px);background:var(--offwhite);border:1px solid var(--border);margin-bottom:10px}
.plan-outils .btn,.plan-vue-outils .btn{min-height:40px}
.plan-sep{width:1px;align-self:stretch;background:var(--border)}
.plan-snap{display:inline-flex;align-items:center;gap:6px;margin:0}
.plan-snap select{min-height:40px}
.plan-alertes{list-style:none;padding:10px 14px;margin:0 0 10px;border-radius:var(--radius-sm,10px);background:#fdf3e7;border:1px solid var(--warning,#B5824A);color:#7a5220;font-size:.85rem}
.plan-help{font-size:.8rem;color:var(--ink-soft)}
.plan-clavier{margin-top:12px}
.plan-empty{color:var(--ink-soft);font-size:.9rem}

/* Une colonne par défaut : la coquille de l'app plafonne à 900px, donc même
   sur un grand écran le concepteur dispose rarement de deux colonnes utiles.
   L'inspecteur passe sous le plan plutôt que de l'écraser. */
.plan-scene{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start}
.plan-canvas{background:var(--card,#fff);border:1px solid var(--border);border-radius:var(--radius-md,18px);padding:10px;overflow:hidden}
.plan-svg{display:block;width:100%;height:min(58vh,560px);touch-action:none;user-select:none}
@media(min-width:1100px){.plan-svg{height:min(66vh,660px)}}
.plan-panneau{background:var(--card,#fff);border:1px solid var(--border);border-radius:var(--radius-md,18px);padding:14px}
.plan-panneau h2{font-size:.95rem;margin:14px 0 8px}
.plan-panneau h2:first-child{margin-top:0}
.plan-panneau h3{font-size:.82rem;margin:14px 0 6px;color:var(--ink-soft)}
.plan-inspecteur-type{margin:0 0 8px;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--accent-dark)}
.plan-inspecteur-form{display:grid;gap:10px}
.plan-danger{color:var(--danger);min-height:44px}
.plan-liste{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.plan-liste li{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:8px;border-radius:10px;background:var(--offwhite)}
.plan-liste li.is-selected{outline:2px solid var(--accent)}
.plan-liste-btn{flex:1;text-align:left;background:none;border:0;cursor:pointer;min-height:44px;display:grid;gap:2px;color:var(--ink);font:inherit}
.plan-liste-btn span{font-size:.74rem;color:var(--ink-soft)}
.plan-liste .link-btn{min-height:44px}
.plan-chips{display:flex;flex-wrap:wrap;gap:6px}
.plan-chips .chip{min-height:36px;cursor:pointer}

/* --- Dessin ------------------------------------------------------------- */
.plan-sol{fill:var(--offwhite,#fff8f2)}
.plan-grille-rect{pointer-events:none}
#plan-grille path{stroke:rgba(124,108,88,.28)}
.plan-mur{stroke:var(--charcoal,#2A2E24);stroke-linecap:square}
.plan-cote-piece,.plan-cote{fill:var(--ink-soft)}
.plan-el rect{fill:rgba(196,113,74,.14);stroke:var(--accent,#C4714A);stroke-width:1.5;vector-effect:non-scaling-stroke;cursor:move}
.plan-el-label{fill:var(--ink);pointer-events:none}
.plan-annotation{fill:var(--ink)}
.plan-el-zone rect{fill:rgba(107,112,82,.12);stroke:var(--olive,#6B7052);stroke-dasharray:6 4}
.plan-el-contenant rect{fill:rgba(107,112,82,.22);stroke:var(--olive-deep,#454A34)}
.plan-el-mur rect{fill:var(--charcoal,#2A2E24);stroke:var(--charcoal,#2A2E24)}
.plan-el-porte rect,.plan-el-fenetre rect{fill:#fff;stroke:var(--accent-dark,#9A4A28)}
.plan-porte-arc{fill:none;stroke:var(--accent-dark,#9A4A28);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:4 3}
.plan-fenetre-trait{stroke:var(--accent-dark,#9A4A28);stroke-width:2;vector-effect:non-scaling-stroke}
.plan-el.is-selected rect{stroke-width:3;fill:rgba(196,113,74,.28)}
.plan-el:focus-visible{outline:none}
.plan-el:focus-visible rect{stroke:var(--accent-dark);stroke-width:4}

/* Pas de variante deux colonnes : la coquille de l'application plafonne à
   900px quelle que soit la taille de l'écran, une colonne de plan de ~280px
   serait donc inutilisable — en 2D comme en 3D. Sur grand écran, c'est la
   HAUTEUR du plan qui augmente, pas le nombre de colonnes. */
@media(max-width:700px){
  .plan-page{padding-inline:10px}
  .plan-grid-3,.plan-grid-2{grid-template-columns:1fr 1fr}
  .plan-hero{align-items:flex-start;flex-direction:column;gap:6px}
  .plan-svg{height:46vh}
  /* Sur mobile l'inspecteur devient une feuille basse : le plan reste visible
     au-dessus, la sidebar ne l'écrase pas. */
  .plan-panneau{position:sticky;bottom:0;max-height:46vh;overflow:auto;box-shadow:var(--shadow-md)}
  .plan-outils,.plan-vue-outils{overflow-x:auto;flex-wrap:nowrap}
  .plan-outils .btn,.plan-vue-outils .btn{white-space:nowrap}
}

/* --- Aperçu 3D (Phase 12) ------------------------------------------------
   Le canvas WebGL est dimensionné par son hôte (ResizeObserver côté renderer) :
   aucune taille en pixels n'est écrite en JS, et rien ne déborde du cadre. */
.plan-canvas-3d{background:var(--card,#fff);border:1px solid var(--border);border-radius:var(--radius-md,18px);padding:10px;overflow:hidden;display:grid}
.plan-3d-hote{width:100%;height:min(58vh,560px);border-radius:12px;overflow:hidden;background:var(--bg)}
.plan-3d-hote canvas{display:block;width:100%;height:100%}
.plan-3d-message{align-self:center;text-align:center;padding:40px 16px;min-height:min(40vh,320px);display:grid;place-items:center}
.plan-3d-selection{padding:10px;border-radius:12px;background:var(--offwhite);margin-bottom:6px}
.plan-3d-selection .mes-ligne{display:flex;justify-content:space-between;gap:12px;margin:0 0 4px;font-size:.82rem}
.plan-hypotheses{list-style:none;padding:10px 14px;margin:0 0 10px;border-radius:var(--radius-sm,10px);background:var(--offwhite);border:1px solid var(--border);color:var(--ink-soft);font-size:.8rem}
.plan-hypotheses-titre{font-weight:500;color:var(--ink)}
@media(min-width:1100px){.plan-3d-hote{height:min(66vh,660px)}}
@media(max-width:700px){
  .plan-3d-hote{height:46vh}
  .plan-3d-selection .mes-ligne{flex-direction:column;gap:2px}
}

/* Le bloc « Pièce » est un <details> : ouvert sur grand écran, replié sur
   mobile pour que le plan (2D ou 3D) reste atteignable sans défiler. */
.plan-piece summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:8px}
.plan-piece summary::marker{color:var(--accent)}