/* Les Bulles · la carte du quartier. Concept KOSMO Studio. */

.quartier-svg { display: block; width: 100%; height: 100%; overflow: hidden; --nuit: 0; }
.q-etoiles circle { fill: #FFFFFF; }
.q-etoiles { transition: opacity 1.2s; }
.q-reflets polyline { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 1.3; stroke-linecap: round; animation: q-miroite 6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1s); }
@keyframes q-miroite { 0%, 100% { opacity: .15; } 50% { opacity: .75; } }
.q-rails polyline { fill: none; stroke: #8E887E; stroke-width: .9; }
.q-marquage polyline { fill: none; stroke: rgba(255, 255, 255, .8); stroke-width: 1; }
.q-ombres polygon { fill: #1C1F3D; }
.q-halo-cabinet { fill: #FF5B1F; opacity: .16; transform-box: fill-box; transform-origin: center; animation: q-halo 3.2s ease-in-out infinite; }
@keyframes q-halo { 0%, 100% { opacity: .1; transform: scale(.9); } 50% { opacity: .24; transform: scale(1.06); } }
.q-vitre { fill: #2F4058; opacity: calc(.34 + var(--nuit) * .44); }
.q-vitre-on { fill: #FFD27A; opacity: calc(.3 + var(--nuit) * .7); }
.q-sombre .q-vitre-on { filter: drop-shadow(0 0 2.5px rgba(255, 196, 102, .85)); }
.q-tronc { stroke: #6E5A46; stroke-width: 1.6; stroke-linecap: round; }
.q-cabinet-vitrine { fill: #9EC3E0; opacity: .9; }
.q-sombre .q-cabinet-vitrine { fill: #FFE2A8; }
.q-cabinet-porte { fill: #2B2D33; }
.q-cabinet-auvent, .q-cabinet-bandeau { fill: #FF5B1F; }
.q-cabinet-rampe { fill: #F4F1EA; stroke: #FF5B1F; stroke-width: .9; }
.q-enseigne-tige { stroke: #111214; stroke-width: 1.2; }
.q-enseigne { stroke: rgba(17, 18, 20, .4); stroke-width: .6; }
.q-enseigne-hublot { fill: #FFFFFF; }
.q-gare-vitre { fill: #A6C4DD; opacity: .85; }
.q-sombre .q-gare-vitre { fill: #FFE7B5; }
.q-fontaine { fill: #CCC5B8; }
.q-fontaine-eau { fill: #98C1E5; }
.q-lampe-pied { stroke: #45464D; stroke-width: 1; }
.q-lampe-tete { fill: #FFE7B3; }
.q-lampe-halo { opacity: calc(var(--nuit) * .95); }
.q-panneau line { stroke: #4C4D52; stroke-width: 1.2; }
.q-panneau rect { fill: #1F4FD8; }
.q-panneau text { fill: #FFFFFF; font: 700 11px "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif; }
.q-tram-bout, .q-tram-flanc { fill: #F3F5F7; stroke: rgba(17, 18, 20, .18); stroke-width: .5; }
.q-tram-toit { fill: #D9DEE5; }
.q-tram-vitres { fill: #2B3D54; }
.q-sombre .q-tram-vitres { fill: #FFE0A0; }
.q-tram-bande { fill: #2E9C55; }
.q-cable-fil { fill: none; stroke: #26272C; stroke-width: 1.1; }
.q-sombre .q-cable-fil, .q-sombre .q-bulle-tige { stroke: #B9C2D6; }
.q-bulle-tige { stroke: #26272C; stroke-width: 1; }
.q-bulle-sphere { stroke: rgba(17, 18, 20, .5); stroke-width: .8; }
.q-bulle-hublot { fill: none; stroke: rgba(17, 18, 20, .35); stroke-width: .8; }
.q-bulle-lumiere { fill: #FFD58A; opacity: calc(var(--nuit) * .9); }
.q-passant { fill: #111214; }
.q-sombre .q-passant { fill: #F2E9D6; }
.q-trajet { fill: none; stroke: #12803A; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: .1 7; opacity: 0; transition: opacity .5s; }
.trajet-visible .q-trajet { opacity: 1; animation: q-marche 1.4s linear infinite; }
@keyframes q-marche { to { stroke-dashoffset: -14.2; } }

.q-repere { cursor: pointer; outline: none; transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
.q-repere-ombre { fill: rgba(17, 18, 20, .28); }
.q-repere-epingle { stroke: #FFFFFF; stroke-width: 2; transition: transform .35s cubic-bezier(.22, 1, .36, 1); transform-box: fill-box; transform-origin: 50% 100%; }
.q-repere-coeur { fill: #FFFFFF; }
.q-repere-onde { fill: none; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: q-onde 2.4s ease-out infinite; }
@keyframes q-onde { 0% { transform: scale(.4); opacity: .7; } 100% { transform: scale(1.9); opacity: 0; } }
.ton-orange .q-repere-epingle { fill: #FF5B1F; } .ton-orange .q-repere-onde { stroke: #FF5B1F; }
.ton-vert .q-repere-epingle { fill: #12803A; } .ton-vert .q-repere-onde { stroke: #12803A; }
.ton-bleu .q-repere-epingle { fill: #1F4FD8; } .ton-bleu .q-repere-onde { stroke: #1F4FD8; }
.ton-noir .q-repere-epingle { fill: #111214; } .ton-noir .q-repere-onde { stroke: #111214; }
.q-repere:hover .q-repere-epingle, .q-repere[aria-expanded="true"] .q-repere-epingle { transform: scale(1.18); }
.q-repere:focus-visible .q-repere-epingle { stroke: #1F4FD8; stroke-width: 3.5; }
.q-repere.estompe { opacity: .35; }
.q-repere.actif .q-repere-epingle { transform: scale(1.28); }

.q-etiquette { font-family: "Familjen Grotesk", "Atkinson Hyperlegible Next", system-ui, sans-serif; font-weight: 600; font-size: calc(13px * var(--q-u, 1)); fill: #111214; letter-spacing: -.01em; paint-order: stroke; stroke: rgba(255, 255, 255, .86); stroke-width: calc(3.5px * var(--q-u, 1)); stroke-linejoin: round; pointer-events: none; }
.q-etiquette.eau { fill: #35588C; font-style: italic; font-size: calc(14px * var(--q-u, 1)); }
.q-etiquette.fort { font-size: calc(15px * var(--q-u, 1)); font-weight: 700; }
.q-etiquette.petit { font-size: calc(11.5px * var(--q-u, 1)); font-weight: 600; }
.q-etiquette.tram { fill: #1E6B3A; font-size: calc(12px * var(--q-u, 1)); font-weight: 700; }
.q-sombre .q-etiquette { fill: #F3F0E8; stroke: rgba(10, 16, 34, .8); }
.q-sombre .q-etiquette.eau { fill: #A9C3EA; }
.q-sombre .q-etiquette.tram { fill: #8FE0AA; }
html[lang="ar"] .q-etiquette { font-family: "Readex Pro", system-ui, sans-serif; }

.sans-tram .q-tram, .sans-tram .q-rails, .sans-tram [data-repere="tram"] { display: none; }
.sans-voiture .q-panneau, .sans-voiture [data-repere="parking"] { display: none; }
.sans-velo [data-repere="velo"] { display: none; }
.sans-accessible [data-repere="entree"] { display: none; }

/* Ouverture : le quartier se construit */
.q-monte .q-batiment { transform: scaleY(0); }
.q-monte .q-cable, .q-monte .q-reperes, .q-monte .q-etiquettes, .q-monte .q-vie, .q-monte .q-tram { opacity: 0; }
.q-pret .q-batiment { transition: transform .95s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--d, 0) * 1s); }
.q-pret .q-cable, .q-pret .q-reperes, .q-pret .q-etiquettes, .q-pret .q-vie, .q-pret .q-tram { transition: opacity .8s ease 1.15s; }

@media (prefers-reduced-motion: reduce) {
  .q-reflets polyline, .q-repere-onde, .trajet-visible .q-trajet, .q-halo-cabinet { animation: none; }
  .q-monte .q-batiment { transform: none; }
}