/* ---- Insertion graphique DP6 / PCMI6 (PC6) : photomontage du projet dans la photo ---- */
.in-wrap { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(290px, 1fr); gap: 16px; align-items: start; }
.in-bar { display: flex; gap: 10px 16px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.in-bar .pm-toggle { cursor: pointer; }
.in-op input[type=range] { width: 110px; accent-color: var(--blue-600); }
.in-bar .btn { margin-left: auto; }

/* aperçu : la photo et le calque SVG ont exactement la même taille */
.in-stagewrap { background: #1c2536; border-radius: 10px; padding: 6px; text-align: center; line-height: 0; }
.in-stage { position: relative; display: inline-block; max-width: 100%; border-radius: 6px; overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; outline: none; }
.in-stage:focus-visible { box-shadow: 0 0 0 3px var(--blue-400); }
.in-stage.drag { cursor: grabbing; }
.in-photo { display: block; max-width: 100%; max-height: 72vh; width: auto; height: auto; pointer-events: none; -webkit-user-drag: none; }
.in-ov { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }

.in-nudge { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.in-nudge .btn { min-width: 44px; justify-content: center; padding: 7px 10px; }
.in-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; font-size: .8rem; color: var(--ink-soft); }
.in-legend span { display: inline-flex; align-items: center; gap: 6px; }
.in-sw { display: inline-block; width: 22px; height: 0; border-top: 3px dashed; }
.in-sw.cyan { border-color: #0891b2; }
.in-sw.yellow { border-color: #eab308; border-top-style: dotted; }
.in-sw.white { border-color: #94a3b8; }
.in-sw.amber { border-color: #f59e0b; }
.in-hint { margin-top: 6px; font-size: .82rem; color: var(--ink-soft); line-height: 1.45; }
.in-main .notice-banner { margin: 10px 0 0; }

/* réglages de calage */
.in-panel .mp-bubble { margin-bottom: 10px; }
.in-grp { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--blue-700); margin: 14px 0 8px; }
.in-ctl { margin-bottom: 10px; }
.in-ctl label { display: block; font-weight: 700; font-size: .86rem; margin-bottom: 4px; }
.in-unit { font-weight: 400; color: var(--ink-soft); }
.in-ctl-row { display: flex; gap: 10px; align-items: center; }
.in-ctl-row input[type=range] { flex: 1 1 auto; min-width: 0; accent-color: var(--blue-600); height: 28px; }
.in-ctl-row input[type=number] { flex: 0 0 86px; width: 86px; padding: 6px 8px; font-size: .88rem; }
.in-ctl .hint { font-size: .76rem; color: var(--ink-soft); margin-top: 2px; line-height: 1.4; }
.in-panel .btn-row { margin-top: 6px; }
/* .btn impose display:inline-flex : sans cette règle l'attribut hidden resterait sans effet */
.in-wrap [hidden] { display: none !important; }
.in-exd { margin-top: 14px; font-size: .86rem; }
.in-exd summary { cursor: pointer; font-weight: 700; color: var(--blue-700); }
.in-exd .in-ex { margin-top: 10px; }

/* exemples (photo avant, photomontage) */
.in-ex { margin: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; min-width: 0; }
.in-ex img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: #eef2f7; }
.in-ex figcaption { font-size: .8rem; color: var(--ink-soft); padding: 7px 10px; line-height: 1.4; }
.in-ex-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; max-width: 720px; }
.in-steps { margin-top: 4px; }
.in-steps li { align-items: center; }
.in-steps li::before { display: none; }

/* contrôles et planche */
.in-checks li { font-size: .9rem; }
.in-checks a { font-weight: 700; white-space: nowrap; }
.in-actions { margin-bottom: 12px; }
.in-svg svg { max-height: 78vh; }
.in-nav { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .in-wrap { grid-template-columns: 1fr; }
  .in-photo { max-height: 60vh; }
}
@media (max-width: 640px) {
  .in-bar .btn { margin-left: 0; flex: 1 1 100%; }
  .in-ex-pair { grid-template-columns: 1fr; }
  .in-actions .btn { flex: 1 1 100%; }
  .in-nav { width: 100%; }
  .in-nav .btn { flex: 1 1 100%; }
  .in-stagewrap { padding: 3px; }
  .in-nudge .btn { flex: 1 1 20%; min-width: 0; padding: 9px 4px; }
  .in-nudge .in-zoom { flex-basis: 40%; }
}