/* LE PLAN COTÉ, moteur commun (assets/js/plan-cote.js) : Mon projet (3B) et Mon salon (10A), 01/10. */
.pcote { margin: 0 0 1.2rem; }
.pcote__papier {
  position: relative; border: 1.5px solid var(--anthracite); border-radius: 4px; background-color: #fbfaf6;
  background-image: linear-gradient(rgba(37, 39, 43, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(37, 39, 43, 0.06) 1px, transparent 1px);
  background-size: 24px 24px; padding: 0.6rem 0.6rem 0.4rem; touch-action: pan-y;
}
.pcote__dessin { display: block; width: 100%; height: auto; overflow: visible; }
.pcote__mur { fill: none; stroke: var(--anthracite); stroke-width: 7; stroke-linecap: square; }
.pcote__zone { fill: rgba(214, 166, 43, 0.1); stroke: var(--moutarde); stroke-width: 1.4; stroke-dasharray: 6 5; }
.pcote__canape { fill: rgba(37, 39, 43, 0.82); transition: x 0.5s, width 0.5s, height 0.5s, opacity 0.3s; }
.pcote__canape--non { fill: rgba(155, 59, 50, 0.78); }
.pcote__c line { stroke: var(--bleu); stroke-width: 1.3; }
.pcote__c--larg line { stroke-dasharray: 4 3; }
.pcote__t { font: 600 13px var(--sans); fill: var(--feutre); }
.pcote__v { display: none; font: 600 26px var(--sans); fill: var(--bleu); paint-order: stroke; stroke: #fbfaf6; stroke-width: 6px; }
.pcote--vide .pcote__mur { stroke: #b9b6ad; stroke-dasharray: 10 8; }

.pcote__cote {
  position: absolute; z-index: 2; transform: translate(-50%, -50%); display: flex; align-items: baseline; gap: 0.15rem;
  background: #fbfaf6; border: 1.5px solid var(--bleu); border-radius: 9px; padding: 0.1rem 0.45rem 0.1rem 0.55rem; box-shadow: 0 6px 18px rgba(37, 39, 43, 0.12);
}
.pcote__cote[hidden] { display: none; }
.pcote__cote label { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 0.2rem; white-space: nowrap; font: 600 0.62rem/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--bleu); }
.pcote__cote input { width: 4.2rem; min-height: 40px; padding: 0; border: 0; background: none; text-align: right; font: 500 1.45rem/1 var(--serif); font-variant-numeric: tabular-nums; color: var(--anthracite); -moz-appearance: textfield; appearance: textfield; }
.pcote__cote input::-webkit-outer-spin-button, .pcote__cote input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pcote__cote input::placeholder { color: #c3bfb4; }
.pcote__cote input:focus { outline: none; }
.pcote__cote:focus-within { border-color: var(--anthracite); box-shadow: 0 0 0 3px var(--moutarde); }
.pcote__u { font: 500 0.78rem var(--sans); color: var(--feutre); }
.pcote__pas { display: none; }
.pcote__cote--lecture .pcote__pas { visibility: hidden; }
.pcote__cote .aide-i { position: absolute; top: 50%; right: -1.55rem; margin: 0; transform: translateY(-50%) scale(0.85); }

.pcote__poignee {
  position: absolute; z-index: 3; width: 44px; height: 44px; transform: translate(-50%, -50%); border-radius: 50%; cursor: grab; touch-action: none;
  display: grid; place-items: center;
}
.pcote__poignee::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--moutarde); border: 2px solid var(--anthracite); box-shadow: 0 2px 8px rgba(37, 39, 43, 0.25); transition: transform 0.2s; }
.pcote__poignee:hover::before, .pcote--tire .pcote__poignee::before { transform: scale(1.2); }
.pcote__poignee:focus-visible { outline: 3px solid var(--moutarde); outline-offset: 0; }
.pcote--tire, .pcote--tire * { cursor: grabbing; user-select: none; }

.pcote__legende { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; margin-top: 0.5rem; font: 400 var(--t-xs)/1.4 var(--sans); color: var(--feutre); }
.pcote__legende i { display: inline-block; width: 0.8rem; height: 0.8rem; margin-right: 0.35rem; vertical-align: -1px; border-radius: 2px; }
.pcote__l-zone { background: rgba(214, 166, 43, 0.25); border: 1px dashed var(--moutarde); }
.pcote__l-canape { background: var(--anthracite); }
.pcote__l-canape--non { background: var(--rouge-non); }
.pcote__nom { color: var(--anthracite); font-weight: 600; }

/* Phones: the drawing on its own (values written on its lines, two handles to drag), the four fields under it. */
@media (max-width: 640px) {
  .pcote { margin-inline: calc(-1 * var(--gutter)); }
  .pcote__papier { display: grid; grid-template-columns: 1fr; gap: 1.1rem 0.6rem; border-width: 1.5px 0; border-radius: 0; padding: 0.3rem var(--gutter) 0.9rem; }
  .pcote__dessin { grid-column: 1 / -1; }
  .pcote__v { display: block; }
  .pcote__t { font-size: 20px; }
  .pcote__c line { stroke-width: 2; }
  .pcote__cote { position: relative; left: auto !important; top: auto !important; transform: none; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto 2.6rem; align-items: center; gap: 0.2rem; padding: 1.15rem 0.35rem 0.25rem; border-radius: 12px; }
  .pcote__pas { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 1px solid var(--trait); border-radius: 50%; background: var(--blanc); font: 500 1.3rem/1 var(--sans); color: var(--anthracite); cursor: pointer; touch-action: manipulation; }
  .pcote__cote label { left: 0.6rem; top: 0.45rem; bottom: auto; transform: none; margin: 0; font-size: 0.6rem; }
  .pcote__cote input { width: 100%; min-height: 44px; font-size: 1.5rem; text-align: center; }
.pcote__cote .aide-i { top: 0.2rem; right: 3.3rem; transform: scale(0.8); }
  .pcote__legende { padding-inline: var(--gutter); }
}
@media (prefers-reduced-motion: reduce) {
  .pcote__canape, .pcote__poignee::before { transition: none; }
}