/* Granvo · Maquette 2D « Le quartier » — styles génériques v1.1 (2026-10-10 : fiche seulement si un lieu est choisi ; mention OSM dans le coin du plan ; source au pied de page)
   Aucune donnée d'immeuble ici : la section est produite par ops/tooling/immeuble/maquette_quartier.js à partir de la config
   de l'immeuble (clients/<slug>/quartier.json) ; le comportement est dans immeuble/quartier.js.
   Couleurs : variables de la page (--water, --cream, --brick…) avec repli ; trois jetons propres au plan (--park, --park-d,
   --water-2) que la page peut définir dans :root. Mobile d'abord. Aucun texte affiché sous 11 px. */
.qm-sec{
  --qm-park:var(--park,#D6DCC6);--qm-park-d:var(--park-d,#5F6E4C);--qm-water:var(--water,#24404C);--qm-water-2:var(--water-2,#2F5463);
  --qm-brick:var(--brick,#A9492A);--qm-brick-d:var(--brick-d,#8A3A20);--qm-ink:var(--ink,#171614);--qm-ink-2:var(--ink-2,#2B2925);
  --qm-cream:var(--cream,#F4F0E8);--qm-line:var(--line,#DCD3C4);--qm-acc:#F0B79F;
  --qm-sans:var(--sans,system-ui,-apple-system,'Segoe UI',sans-serif);--qm-serif:var(--serif,Georgia,'Times New Roman',serif);
  position:relative;background:var(--qm-water);color:#fff;overflow:visible
}
.qm-sec :focus-visible{outline:2px solid var(--qm-acc);outline-offset:3px}
:where(.qm-ov,.qm-cars) button{-webkit-appearance:none;appearance:none;background:none;border:0;margin:0;font:inherit;color:inherit;text-align:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.qm-src{margin:6px 0 0;padding:0 20px;font:400 12px/1.45 var(--qm-sans);color:rgba(255,255,255,.72)}
.qm-sprite{position:absolute;width:0;height:0;overflow:hidden}
.qm-sec .ic{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ---------- figure : barre auto, plan, fiche, légende ---------- */
.qm{position:relative;margin:28px -20px 0}
.qm-map{position:relative;width:100%;aspect-ratio:1;background:var(--qm-cream);overflow:hidden;container-type:inline-size;-webkit-tap-highlight-color:transparent}
.qm-svg{position:absolute;inset:0;width:100%;height:100%;display:block}

/* couches du plan (unités : mètres) */
.qm-svg .l{fill:var(--qm-cream)}
.qm-svg .g,.qm-svg .zf,.qm-svg .i{fill:var(--qm-park)}
.qm-svg .w{fill:var(--qm-water)}
.qm-svg .rp{fill:var(--qm-water-2)}
.qm-svg .b{fill:var(--qm-line)}
.qm-svg .p,.qm-svg .rs,.qm-svg .rr,.qm-svg .rb,.qm-svg .t{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round}
.qm-svg .p{stroke-width:1.6}
.qm-svg .rs{stroke-width:4}
.qm-svg .rr{stroke-width:7}
.qm-svg .rb{stroke-width:10}
.qm-svg .t{stroke:var(--qm-park-d);stroke-width:3.2}
.qm-svg .zo{fill:none;stroke:var(--qm-park-d);stroke-opacity:.45;stroke-width:1px;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.qm-svg .zo.on{stroke:var(--qm-brick);stroke-opacity:1;stroke-width:2px;stroke-dasharray:none}
.qm-svg .halo{fill:rgba(169,73,42,.12)}
.qm-svg .me-om{fill:rgba(23,22,20,.22)}
.qm-svg .me-s{fill:var(--qm-brick-d);stroke:rgba(244,240,232,.5);stroke-width:.7px;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.qm-svg .me{fill:var(--qm-brick);stroke:var(--qm-brick-d);stroke-width:1px;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.qm-svg .qm-rt{fill:none;stroke:var(--qm-brick);stroke-width:3.5px;stroke-dasharray:0 8;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;transition:opacity .2s}
.qm-svg .qm-rt.on{stroke-width:4.5px}
.qm.has-sel .qm-svg .qm-rt:not(.on){opacity:.22}
.qm-svg .qm-mk{fill:none;stroke:#fff;stroke-width:14;stroke-linecap:butt;stroke-linejoin:round}

/* calque HTML : seuls les lieux réagissent au pointeur ; le reste laisse passer le toucher vers le fond du plan */
.qm-ov{position:absolute;inset:0;pointer-events:none}
.qm-ov [data-place]{pointer-events:auto;cursor:pointer}
.qm-n{position:absolute;left:8px;top:8px;width:28px;height:28px;border-radius:50%;background:rgba(244,240,232,.92);box-shadow:0 0 0 1px var(--qm-line);display:grid;place-items:center}
.qm-n svg{width:14px;height:14px;fill:var(--qm-ink)}

/* épingle : cible de 44 px (remplissage transparent), disque de 30 px, capsule du temps ; le nom court paraît dès 560 px de plan */
.qm-pin{position:absolute;display:flex;align-items:center;padding:7px;transform:translate(-22px,-50%);font:600 12px/1 var(--qm-sans);color:var(--qm-brick-d);white-space:nowrap}
.qm-pin i{flex:none;width:30px;height:30px;border-radius:50%;background:#fff;box-shadow:0 0 0 1.5px var(--qm-brick),0 2px 6px rgba(23,22,20,.18);display:grid;place-items:center;position:relative;z-index:1;color:var(--qm-brick);transition:background .15s,box-shadow .15s}
.qm-pin .ic{width:17px;height:17px}
.qm-pin b{display:flex;align-items:center;gap:3px;background:#fff;border-radius:999px;padding:5px 9px 5px 19px;margin-left:-15px;box-shadow:0 1px 4px rgba(23,22,20,.15);font-weight:600}
.qm-pin em{font-style:normal;font-weight:500;color:var(--qm-ink);display:none}
.qm-pin .qm-ar{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:none}
.qm-pin.s-w{flex-direction:row-reverse;transform:translate(calc(-100% + 22px),-50%)}
.qm-pin.s-w b{padding:5px 19px 5px 9px;margin:0 -15px 0 0}
.qm-pin.s-s,.qm-pin.s-n{flex-direction:column;transform:translate(-50%,-22px)}
.qm-pin.s-s b{margin:-6px 0 0;padding:7px 9px 5px}
.qm-pin.s-n{flex-direction:column-reverse;transform:translate(-50%,calc(-100% + 22px))}
.qm-pin.s-n b{margin:0 0 -6px;padding:5px 9px 7px}
/* flèche au bord : le disque reste dans le plan, au point où le trajet en sort */
.qm-pin.qm-edge.b-n{transform:translate(-22px,0)}
.qm-pin.qm-edge.b-s{transform:translate(-22px,-100%)}
.qm-pin.qm-edge.b-w{transform:translate(0,-50%)}
.qm-pin.qm-edge.b-e{transform:translate(-100%,-50%)}
.qm-pin.on i{background:var(--qm-brick);color:#fff}
.qm-pin.on b{background:var(--qm-brick);color:#fff}
.qm-pin.on em{color:#fff}
.qm.has-sel .qm-pin:not(.on) i{box-shadow:0 0 0 1.5px var(--qm-line),0 2px 6px rgba(23,22,20,.18)}

/* étiquettes : rues (ink-2, halo crème), eau (Cormorant italique crème), immeuble, zone (cliquable) */
.qm-lbl{position:absolute;transform:translate(-50%,-50%) rotate(var(--r,0deg));white-space:nowrap;font:500 11px/1.1 var(--qm-sans);letter-spacing:.04em;color:var(--qm-ink-2);text-shadow:0 0 2px var(--qm-cream),0 0 3px var(--qm-cream),0 0 4px var(--qm-cream),0 0 5px var(--qm-cream)}
.qm-lbl.eau{font:500 15px/1.1 var(--qm-serif);letter-spacing:.02em;color:var(--qm-cream);text-shadow:0 0 3px var(--qm-water),0 0 6px var(--qm-water)}
.qm-me{position:absolute;transform:translate(0,-100%);font:700 14px/1 var(--qm-sans);color:var(--qm-ink);background:#fff;padding:6px 9px 6px 8px;border-left:3px solid var(--qm-brick);border-radius:4px;box-shadow:0 2px 6px rgba(23,22,20,.18);white-space:nowrap}
.qm-zone{position:absolute;width:max-content;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 4px;text-align:center}
.qm-zone span{display:block;max-width:130px;max-width:41cqw;font:500 15px/1.05 var(--qm-serif);color:var(--qm-ink-2);text-wrap:balance;text-shadow:0 0 2px var(--qm-park),0 0 4px var(--qm-park)}
.qm-zone.on span{text-decoration:underline;text-decoration-color:var(--qm-brick);text-decoration-thickness:2px;text-underline-offset:3px}

/* étiquette marquée « masquer_sous_px » dans la config : cachée sur un plan plus étroit */
@container (width < 400px){.qm-lbl.m400{display:none}}
@container (width < 560px){.qm-lbl.m560{display:none}}
@container (min-width:560px){
  .qm-pin em{display:inline}
  .qm-pin em::after{content:' ·'}
  .qm-pin.s-s{flex-direction:column-reverse;transform:translate(-50%,calc(-100% + 22px))}
  .qm-pin.s-s b{margin:0 0 -6px;padding:5px 9px 7px}
  .qm-lbl.eau{font-size:17px}
  .qm-zone span{font-size:17px;max-width:36cqw}
}

/* barre « en auto » : ouest à gauche (chevron ‹), est à droite (chevron ›), pas à l'échelle.
   Téléphone : une ligne par destination, alignée de son côté ; dès 560 px, deux colonnes ouest | est. */
.qm-cars{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;background:rgba(255,255,255,.14)}
.qm-cw,.qm-ce{display:grid;gap:1px;align-content:stretch}
.qm-cw:empty,.qm-ce:empty{display:none}
.qm-car{display:flex;align-items:center;gap:7px;min-height:44px;padding:7px 14px;background:var(--qm-ink);color:#fff;font:600 12px/1.3 var(--qm-sans)}
.qm-car.e{justify-content:flex-end;text-align:right}
.qm-car .ar{width:14px;height:14px;flex:none;fill:none;stroke:var(--qm-acc);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.qm-car .ic{width:16px;height:16px;flex:none}
.qm-ct{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px;min-width:0}
.qm-car.e .qm-ct{justify-content:flex-end}
.qm-ct b{font-weight:600}
.qm-ct span{font-weight:500;color:var(--qm-acc);white-space:nowrap}
.qm-car.on{background:var(--qm-brick-d)}
.qm-car.on .qm-ct span{color:#fff}

/* fiche du lieu choisi */
.qm-card{background:var(--qm-ink);color:#fff;min-height:96px;padding:14px 20px 16px;font-size:13px;line-height:1.45;scroll-margin-top:calc(var(--nav-h,64px) + 48px)}
.qm-card>[hidden],.qm-card>[data-place][hidden]{display:none}
.qm-card>[data-place]{display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:10px;align-items:start}
.qm-card .ic{width:20px;height:20px;color:var(--qm-acc);margin-top:1px}
.qm-card p{margin:0}
.qm-card b{font-size:14px;font-weight:600}
.qm-card .v{color:var(--qm-acc);font-size:13px;white-space:nowrap}
.qm-card .d{grid-column:2;color:rgba(255,255,255,.85);margin-top:4px}
.qm-hint{color:rgba(255,255,255,.85)}
.no-js .qm-card{display:none}

/* légende et attribution */
.qm-leg{display:flex;flex-wrap:wrap;align-items:center;column-gap:18px;padding:4px 20px 0;font-size:.82rem;line-height:1.3;color:rgba(255,255,255,.85)}
.qm-lg{display:inline-flex;align-items:center;gap:8px;min-height:32px}
.qm-lg-p{width:26px;height:8px;fill:none;stroke:var(--qm-acc);stroke-width:3.5;stroke-dasharray:0 7;stroke-linecap:round}
.qm-lg-a{width:12px;height:12px;fill:none;stroke:var(--qm-acc);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.qm-osm{display:inline-flex;align-items:center;min-height:44px;margin-left:auto;color:rgba(255,255,255,.85);font-size:.75rem;text-decoration:underline;text-underline-offset:2px}
.qm-osm:hover{color:#fff}

/* liste : le chemin unique au clavier et au lecteur d'écran */
/* petit téléphone : la valeur passe sous le nom ; l'icône couvre les deux lignes */
@media(max-width:399px){
}

/* tracé à l'entrée à l'écran (ajouté par quartier.js ; jamais en mouvement réduit ni sans JS) */
/* état de départ sans transition ; les transitions ne portent que sur l'état « is-drawn » (aucune animation à rebours) */
.qm-anim .qm-mk{stroke-dasharray:1 1;stroke-dashoffset:1}
.qm-anim.is-drawn .qm-mk{stroke-dashoffset:0;transition:stroke-dashoffset var(--qw,600ms) cubic-bezier(.2,.7,.2,1) var(--ql,0ms)}
.qm-anim .qm-pin>*{opacity:0;transform:scale(.85)}
.qm-anim.is-drawn .qm-pin>*{opacity:1;transform:none;transition:opacity .2s ease-out var(--qd,0ms),transform .2s ease-out var(--qd,0ms)}
.qm-anim .qm-cars{opacity:0;transform:translateY(-8px)}
.qm-anim.is-drawn .qm-cars{opacity:1;transform:none;transition:opacity .3s ease-out var(--qc,0ms),transform .3s ease-out var(--qc,0ms)}

/* ---------- mise en page ---------- */
@media(min-width:560px){
  .qm{margin:32px auto 0;max-width:640px}
  .qm-cars{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
  .qm-ct{flex-direction:column;align-items:flex-start;row-gap:2px}
  .qm-car.e .qm-ct{align-items:flex-end}
  .qm-cars{border-radius:14px 14px 0 0;overflow:hidden}
  .qm-map:first-child{border-radius:14px 14px 0 0}
  .qm-card{border-radius:0 0 14px 14px}
  .qm-leg{padding:6px 4px 0}
  .qm-src{padding:0 4px}
}
@media(min-width:560px) and (max-width:1023px){
}
@media(min-width:1024px){
  .qm-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"txt fig";column-gap:56px;align-items:start}
  .qm-txt{grid-area:txt}
  .qm{grid-area:fig;width:100%;max-width:600px;margin:0 0 0 auto}
}
@media(min-width:1024px) and (min-height:820px){
  .qm{position:sticky;top:calc(var(--nav-h,64px) + 40px)}
}
@media(prefers-reduced-motion:reduce){
  .qm-pin i,.qm-car,.qm-svg .qm-rt{transition:none}
}

/* ---------- v1.1 (Ced, 2026-10-10) ---------- */
.qm:not(.has-sel) .qm-card{display:none}
.qm-card{min-height:0}
.qm-map .qm-osm{position:absolute;right:6px;top:6px;z-index:3;min-height:0;margin:0;padding:3px 7px;border-radius:6px;background:rgba(244,240,232,.86);color:#2B2925;font:500 11px/1.2 var(--qm-sans);text-decoration:none}
.qm-map .qm-osm:hover{text-decoration:underline}
.qm-map .qm-osm::after{content:"";position:absolute;inset:-6px -6px -12px -12px}
.ft .qm-src{padding:0;font:inherit;color:inherit}

/* maquette illustrée de la propriété (maquette_quartier.js, config « maquette ») : taille fixe à l'écran, au-dessus de l'entrée */
.qm-mq{position:absolute;width:64px;transform:translate(-50%,-82%);pointer-events:none;filter:drop-shadow(0 2px 3px rgba(23,22,20,.25))}
.qm-mq svg{display:block;width:100%;height:auto}
.qm-mq-immeuble{width:68px}
@media(min-width:760px){.qm-mq{width:78px}.qm-mq-immeuble{width:84px}}
.qm-me.qm-me-mq{margin:-30px 0 0 30px}
@media(min-width:760px){.qm-me.qm-me-mq{margin:-38px 0 0 38px}}
.qm-mq-condos{width:70px}
@media(min-width:760px){.qm-mq-condos{width:86px}}