/*
 * « La rue en coupe » [uv_rue], en tête du guide des classes : d'après la maquette de l'équipe (piste B, ouverture),
 * dans la charte du site (DM Sans, arrondis de 4 px, or #C19B2B pour la pièce mise en avant). Tout est préfixé .uvrue.
 */
.uvrue{--ink:#0F1E2E;--ink2:#4A5A6B;--ink3:#5A6875;--bleu:#136FB0;--bleu-h:#0F5C93;--bleu-clair:#7CC4EE;--navy9:#0F3557;--nuit:#0B2942;--soft2:#F7F9FB;--filet:#DDE3E9;--or:#C19B2B;--ok:#14603E;
	--a15-fond:#E3F2FC;--a15-txt:#0B4F80;--b125-fond:#BFE0F5;--b125-txt:#0B3F66;--c250-fond:#136FB0;--c250-txt:#fff;--d400-fond:#0F4F85;--d400-txt:#fff;--e600-fond:#0F3557;--e600-txt:#fff;--f900-fond:#0B1E33;--f900-txt:#fff;
	--f:"UVFP DM Sans","DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--m:"UVFP JetBrains Mono","JetBrains Mono",ui-monospace,Menlo,monospace;--ease:cubic-bezier(.2,.7,.2,1);--gout:40px;
	position:relative;display:block;overflow-x:clip;background:linear-gradient(180deg,var(--soft2) 0,#fff 360px);color:var(--ink);font-family:var(--f);font-size:16px;line-height:1.5;font-optical-sizing:none;-webkit-font-smoothing:antialiased;text-align:left}
.uvrue *,.uvrue *::before,.uvrue *::after{box-sizing:border-box}
.uvrue h1,.uvrue h3,.uvrue p,.uvrue ol,.uvrue figure{margin:0;padding:0}
.uvrue ol{list-style:none}
.uvrue a{color:inherit;text-decoration:none;box-shadow:none}
body .uvrue a,body .uvrue button,body .uvrue input{font-family:inherit}
.uvrue button{text-transform:none;letter-spacing:normal;box-shadow:none;cursor:pointer}
.uvrue .rb-i{width:16px;height:16px;flex:none}
.uvrue .rb-defs{position:absolute;width:0;height:0;overflow:hidden}
.uvrue .rb-c{width:100%;max-width:calc(1440px + 2 * var(--gout));margin-inline:auto;padding-inline:var(--gout)}

/* le trait du dessin reste le même à toutes les échelles */
.uvrue .rb-sc,.uvrue .rb-sc *{vector-effect:non-scaling-stroke}
.uvrue .rb-z{transition:opacity .35s var(--ease)}

/* en-tête : fil d'Ariane, titre, chapeau, ligne d'information de l'endroit survolé */
.uvrue .rb-ciel{position:relative;z-index:2;padding-top:28px}
.uvrue .rb-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:14px;font-size:13px;color:var(--ink3)}
.uvrue .rb-crumbs a:hover{color:var(--bleu)}
.uvrue .rb-crumbs .rb-i{width:14px;height:14px}
.uvrue .rb-h1{margin-top:10px;font-family:var(--f);font-size:clamp(38px,3.9vw,56px);font-weight:650;line-height:1.02;letter-spacing:-.035em;color:var(--nuit);text-transform:none;text-wrap:balance}
.uvrue .rb-h1 em{font-style:normal;color:var(--bleu)}
.uvrue .rb-chapeau{max-width:62ch;margin-top:14px;font-size:17px;line-height:1.5;color:var(--ink2)}
.uvrue .rb-fente{position:relative;min-height:22px;margin-top:8px}
.uvrue .rb-info{position:absolute;inset:0 0 auto;font-size:15px;line-height:1.45;color:var(--ink);opacity:0;transition:opacity .2s;pointer-events:none}
.uvrue .rb-info b{color:var(--nuit)}
.uvrue .rb-fente.is-info .rb-info{opacity:1}

.uvrue .rb-badge{display:inline-block;padding:1px 6px;border-radius:2px;font-family:var(--m);font-size:12px;font-weight:600;line-height:1.5;vertical-align:1px}
.uvrue .rb-badge[data-cl="A15"]{background:var(--a15-fond);color:var(--a15-txt)}
.uvrue .rb-badge[data-cl="B125"]{background:var(--b125-fond);color:var(--b125-txt)}
.uvrue .rb-badge[data-cl="C250"]{background:var(--c250-fond);color:var(--c250-txt)}
.uvrue .rb-badge[data-cl="D400"]{background:var(--d400-fond);color:var(--d400-txt)}
.uvrue .rb-badge[data-cl="E600"]{background:var(--e600-fond);color:var(--e600-txt)}
.uvrue .rb-badge[data-cl="F900"]{background:var(--f900-fond);color:var(--f900-txt)}

/* la rue en coupe */
.uvrue .rb-une__scene{position:relative;margin-top:2px}
.uvrue .rb-pano__defile{position:relative}
.uvrue .rb-pano__svg{display:block;width:100%;max-width:1840px;height:auto;margin-inline:auto;overflow:visible}
.uvrue .rb-pano__svg use{pointer-events:none}
.uvrue .rb-titres{pointer-events:none}
.uvrue .rb-titres g{transition:opacity .3s var(--ease)}
.uvrue .rb-t{font-family:var(--f);font-size:34px;font-weight:600;fill:var(--nuit);letter-spacing:-.6px}
.uvrue .rb-t-n{font-family:var(--m);font-size:20px;font-weight:600;fill:var(--bleu);letter-spacing:2px}
.uvrue .rb-sc-leg{font-family:var(--m);font-size:var(--rb-leg,17px);fill:var(--ink2);stroke:none;letter-spacing:.3px}
.uvrue .rb-sc-leg--m{font-size:var(--rb-leg-m,14px);fill:var(--ink3);letter-spacing:1.5px;text-transform:uppercase}
.uvrue .rb-ruban rect{stroke:#fff;stroke-width:3;transition:opacity .3s}
.uvrue .rb-ruban text{font-family:var(--f);font-size:22px;font-weight:500;pointer-events:none;transition:opacity .3s}
.uvrue .rb-ruban .rb-r-c{font-weight:700}
.uvrue .rb-ruban rect[data-cl="A15"]{fill:var(--a15-fond)}.uvrue .rb-ruban text[data-cl="A15"]{fill:var(--a15-txt)}
.uvrue .rb-ruban rect[data-cl="B125"]{fill:var(--b125-fond)}.uvrue .rb-ruban text[data-cl="B125"]{fill:var(--b125-txt)}
.uvrue .rb-ruban rect[data-cl="C250"]{fill:var(--c250-fond)}.uvrue .rb-ruban text[data-cl="C250"]{fill:var(--c250-txt)}
.uvrue .rb-ruban rect[data-cl="D400"]{fill:var(--d400-fond)}.uvrue .rb-ruban text[data-cl="D400"]{fill:var(--d400-txt)}
.uvrue .rb-ruban rect[data-cl="E600"]{fill:var(--e600-fond)}.uvrue .rb-ruban text[data-cl="E600"]{fill:var(--e600-txt)}
.uvrue .rb-ruban rect[data-cl="F900"]{fill:var(--f900-fond)}.uvrue .rb-ruban text[data-cl="F900"]{fill:var(--f900-txt)}
.uvrue .rb-hits rect{fill:transparent;cursor:pointer}
.uvrue .rb-hits a:focus{outline:0}
.uvrue .rb-hits a:focus-visible rect{stroke:var(--bleu);stroke-width:4;stroke-dasharray:14 8;vector-effect:non-scaling-stroke}

/* un endroit en avant : les autres (dessin, titre, ruban) s'estompent, ses pièces passent en or */
.uvrue [data-actif]{--o-jardin:.2;--o-garage:.2;--o-trottoir:.2;--o-bordure:.2;--o-chaussee:.2;--o-industrie:.2}
.uvrue [data-actif="jardin"]{--o-jardin:1}.uvrue [data-actif="garage"]{--o-garage:1}.uvrue [data-actif="trottoir"]{--o-trottoir:1}
.uvrue [data-actif="bordure"]{--o-bordure:1}.uvrue [data-actif="chaussee"]{--o-chaussee:1}.uvrue [data-actif="industrie"]{--o-industrie:1}
.uvrue [data-actif] .rb-titres g{opacity:.2}
.uvrue [data-actif="jardin"] .rb-titres [data-z="jardin"],.uvrue [data-actif="garage"] .rb-titres [data-z="garage"],.uvrue [data-actif="trottoir"] .rb-titres [data-z="trottoir"],
.uvrue [data-actif="bordure"] .rb-titres [data-z="bordure"],.uvrue [data-actif="chaussee"] .rb-titres [data-z="chaussee"],.uvrue [data-actif="industrie"] .rb-titres [data-z="industrie"]{opacity:1}
.uvrue [data-actif] .rb-ruban rect,.uvrue [data-actif] .rb-ruban text{opacity:.3}
.uvrue [data-actif="jardin"] .rb-ruban [data-cl="A15"],.uvrue [data-actif="trottoir"] .rb-ruban [data-cl="B125"],.uvrue [data-actif="garage"] .rb-ruban [data-cl="C250"],
.uvrue [data-actif="bordure"] .rb-ruban [data-cl="C250"],.uvrue [data-actif="chaussee"] .rb-ruban [data-cl="D400"],.uvrue [data-actif="industrie"] .rb-ruban [data-cl="E600"],.uvrue [data-actif="industrie"] .rb-ruban [data-cl="F900"]{opacity:1}
.uvrue [data-actif="jardin"],.uvrue [data-or~="jardin"]{--f-jardin:var(--or);--g-jardin:drop-shadow(0 0 4px rgba(193,155,43,.9))}
.uvrue [data-actif="garage"],.uvrue [data-or~="garage"]{--f-garage:var(--or);--g-garage:drop-shadow(0 0 4px rgba(193,155,43,.9))}
.uvrue [data-actif="trottoir"],.uvrue [data-or~="trottoir"]{--f-trottoir:var(--or);--g-trottoir:drop-shadow(0 0 4px rgba(193,155,43,.9))}
.uvrue [data-actif="bordure"],.uvrue [data-or~="bordure"]{--f-bordure:var(--or);--g-bordure:drop-shadow(0 0 4px rgba(193,155,43,.9))}
.uvrue [data-actif="chaussee"],.uvrue [data-or~="chaussee"]{--f-chaussee:var(--or);--g-chaussee:drop-shadow(0 0 4px rgba(193,155,43,.9))}
.uvrue [data-actif="industrie"],.uvrue [data-or~="industrie"]{--f-industrie:var(--or);--g-industrie:drop-shadow(0 0 4px rgba(193,155,43,.9))}

/* sous la rue : une pièce par endroit, reliée par un filet à sa place dans le sol */
.uvrue .rb-sous{position:relative;z-index:2;margin-top:14px}
.uvrue .rb-sous__titre{display:none;font-size:15px;color:var(--ink2)}
.uvrue .rb-sous.is-res .rb-sous__titre{display:block}
.uvrue .rb-sous__titre b{color:var(--nuit)}
.uvrue .rb-sous__titre a{color:var(--bleu);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.uvrue .rb-sous__liste{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px;margin-top:4px;padding-bottom:44px}
.uvrue .rb-sous__liste.is-res{grid-template-columns:repeat(4,minmax(0,1fr))}
.uvrue .rb-sous__liste .rb-o__img{aspect-ratio:1/.5}
.uvrue .rb-sous__liste.is-res .rb-o__img{aspect-ratio:1/.62}
.uvrue .rb-sous__liste .rb-o__nom{margin-top:4px;font-size:17px}
.uvrue .rb-sous__liste .rb-o__pied{margin-top:4px}
.uvrue .rb-fils{position:absolute;inset:0;z-index:1;width:100%;height:100%;overflow:visible;pointer-events:none}
.uvrue .rb-fil{fill:none;stroke:var(--or);stroke-width:1.2;stroke-dasharray:3 4;opacity:.55;transition:opacity .25s,stroke-width .25s}
.uvrue .rb-fil.is-vu{opacity:1;stroke-width:1.8;stroke-dasharray:none}
.uvrue .rb-fil-pt{fill:var(--or);opacity:.8}
.uvrue .rb-fils.is-cache{display:none}

/* une pièce posée, sans carte */
.uvrue .rb-o{position:relative;display:flex;flex-direction:column;min-width:0;margin:0;transition:opacity .3s var(--ease)}
.uvrue .rb-o.is-pale{opacity:.32}
.uvrue .rb-o__img{position:relative;display:block;width:100%;max-width:300px;aspect-ratio:1/.62;background:radial-gradient(closest-side,#fff 62%,rgba(255,255,255,0))}
.uvrue .rb-o__img::after{content:"";position:absolute;left:24%;right:24%;bottom:6%;z-index:0;height:10%;border-radius:50%;background:radial-gradient(closest-side,rgba(15,53,87,.16),rgba(15,53,87,0))}
.uvrue .rb-o__img img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .45s var(--ease)}
.uvrue .rb-o:hover .rb-o__img img{transform:translateY(-4px) rotate(-1.5deg)}
.uvrue .rb-o__k{position:absolute;top:0;left:0;z-index:2;font-family:var(--m);font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--bleu)}
.uvrue .rb-o__nom{margin-top:8px;font-family:var(--f);font-size:17px;font-weight:600;line-height:1.2;letter-spacing:-.01em;color:var(--nuit);text-transform:none}
.uvrue .rb-o__nom a:hover{color:var(--bleu)}
.uvrue .rb-o__cotes{max-width:100%;margin-top:4px;overflow:hidden;font-family:var(--m);font-size:12px;line-height:1.4;color:var(--ink3);white-space:nowrap;text-overflow:ellipsis}
.uvrue .rb-o__note{max-width:28ch;margin-top:6px;font-size:13px;line-height:1.4;color:var(--ink2)}
.uvrue .rb-o__pied{display:flex;align-items:center;gap:10px;margin-top:8px}
.uvrue .rb-px{font-size:17px;font-weight:700;color:var(--ink);white-space:nowrap}
.uvrue .rb-px small{display:block;margin-top:1px;font-size:12px;font-weight:500;color:var(--ink3)}
.uvrue .rb-o__add,.uvrue .rb-o__voir{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:0;height:34px;min-width:34px;padding:0 9px;border:1px solid var(--navy9);border-radius:999px;background:#fff;color:var(--navy9);font-size:13px;font-weight:700;line-height:1;white-space:nowrap;transition:background .15s,color .15s,gap .22s}
.uvrue .rb-o__voir{padding:0 12px}
.uvrue .rb-o__add span{max-width:0;overflow:hidden;transition:max-width .22s var(--ease)}
.uvrue .rb-o:hover .rb-o__add span,.uvrue .rb-o:focus-within .rb-o__add span,.uvrue .rb-o__add.added span{max-width:80px}
.uvrue .rb-o:hover .rb-o__add,.uvrue .rb-o:focus-within .rb-o__add,.uvrue .rb-o__add.added{gap:6px}
.uvrue .rb-o__add:hover,.uvrue .rb-o__voir:hover{background:var(--navy9);color:#fff}
.uvrue .rb-o__add.added,.uvrue .rb-o__add.uvfp-ajoute{background:var(--ok);border-color:var(--ok);color:#fff}
.uvrue .rb-o__add.loading{opacity:.6}
.uvrue .rb-o__add::before{content:"";position:absolute;inset:-6px}
.uvrue a.added_to_cart{display:none}

@media (max-width:1099px){
	.uvrue .rb-pano__defile{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
	.uvrue .rb-pano__defile::-webkit-scrollbar{display:none}
	.uvrue .rb-pano__svg{width:1400px;max-width:none}
	.uvrue .rb-t-n{font-size:22px}
	.uvrue .rb-ruban text{font-size:23px}
	.uvrue .rb-sous__liste{display:flex;gap:16px;margin-inline:calc(-1 * var(--gout));padding:4px var(--gout) 32px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gout);scrollbar-width:none}
	.uvrue .rb-sous__liste::-webkit-scrollbar{display:none}
	.uvrue .rb-sous__liste .rb-o{flex:0 0 200px;scroll-snap-align:start}
	.uvrue .rb-sous__liste.is-res .rb-o{flex-basis:230px}
	.uvrue .rb-fils{display:none}
}

@media (max-width:767px){
	.uvrue{--gout:16px;background:linear-gradient(180deg,var(--soft2) 0,#fff 260px)}
	.uvrue .rb-ciel{padding-top:18px}
	.uvrue .rb-h1{font-size:40px;line-height:1.02}
	.uvrue .rb-chapeau{font-size:15px}
	.uvrue .rb-une__scene{margin-top:18px}
	.uvrue .rb-pano__svg{width:1180px}
	.uvrue .rb-t-n{font-size:25px}
	.uvrue .rb-ruban text{font-size:26px}
	.uvrue .rb-sous{margin-top:10px}
	.uvrue .rb-sous__liste .rb-o{flex-basis:188px}
	.uvrue .rb-o__add{height:40px;min-width:40px;padding:0}
	.uvrue .rb-o__add span,.uvrue .rb-o:hover .rb-o__add span,.uvrue .rb-o:focus-within .rb-o__add span{max-width:0}
	.uvrue .rb-o:hover .rb-o__add,.uvrue .rb-o:focus-within .rb-o__add{gap:0}
}
@media (prefers-reduced-motion:reduce){
	.uvrue *,.uvrue *::before,.uvrue *::after{transition:none!important;animation:none!important}
}