/* ─────────────────────────────────────────────────────────────────────────
   maquette.css : le dessin de la maquette 3D (SVG isométrique de public/js/maquette-batiment.js), seul.
   Variables --mq-* (clair et sombre) et couleurs des activités, faces, toits, vitres, décor, étiquettes, activités,
   « + », parcelles, rose des vents, ville autour, animations du décor, et les cartes de chiffres (.atelier__chiffre)
   que l'aperçu de « Mes bâtiments » affiche sous la maquette.

   Sortie de atelier-batiment.css au lot 2 d'optimisation du 19/10/2026 : le logo d'un bâtiment (notices,
   classement : public/js/batiment-logo.js) et les vignettes de « Mes bâtiments » chargeaient les 141 Ko de
   l'atelier pour ces seules règles, et l'injection tardive de la feuille recalculait le style de toute la page
   (+340 ms mesurés au chargement d'une notice). Les règles sont recopiées telles quelles, dans leur ordre
   d'origine ; les pages de l'atelier chargent cette feuille juste avant atelier-batiment.css, qui ne les répète
   pas. Ce qui ne sert qu'à l'atelier (cases et zones tracées, deux vues, schéma, panneaux) y reste.
   ───────────────────────────────────────────────────────────────────────── */

.atelier__chiffre {
    padding: 0.65rem 0.75rem;
    border-radius: var(--radius);
    background: var(--panneau-fond);
    box-shadow: var(--panneau-ombre);
}
.atelier__chiffre dt {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.atelier__chiffre dt .material-symbols-outlined {
    font-size: 16px;
    color: var(--primary);
}
.atelier__chiffre dd {
    margin: 0.2rem 0 0;
    color: var(--ink);
    font-size: 1.05rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.atelier__chiffre--manque dd {
    color: var(--warning-color, #b45309);
    font-size: 0.9rem;
    font-weight: 600;
}
.atelier__chiffre--change {
    animation: atelier-chiffre 0.9s ease;
}
@keyframes atelier-chiffre {
    0% { transform: translateY(6px); box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 50%, transparent); }
    40% { transform: translateY(-2px); box-shadow: 0 0 0 5px color-mix(in srgb, var(--primary) 18%, transparent); }
    100% { transform: none; }
}

/* Les mêmes couleurs servent au terrain vierge (création), au plan de site (public/css/plan-site.css) et à l'aperçu de la liste (liste-apercu.js). */
.atelier, .terrain, .plan-site, .ville__apercu--liste, .ville--plate, .ville__vignette, .batiment-logo {
    --mq-ciel: #eef4ff;
    --mq-ciel-bas: #f8fbff;
    --mq-ciel-haut: rgba(41, 87, 255, 0.10);
    --mq-sol: #e6edf7;
    --mq-sol-trame: rgba(41, 87, 255, 0.10);
    --mq-rue: #cfd6e2;
    --mq-ombre: rgba(15, 23, 42, 0.12);
    --mq-trait: rgba(15, 23, 42, 0.18);
    --mq-vitre: #b9d3fb;
    --mq-vitre-reflet: #e8f1ff;
    --mq-vitre-allumee: #ffe59a;
    --mq-porte: var(--primary);
    --mq-auvent: var(--accent);
    --mq-tiers: #c9cfd8;
    --mq-tiers-trait: #9aa3b1;
    --mq-texte: #0f172a;
    --mq-etiquette: #ffffff;
    --mq-arbre: #34b37a;
    --mq-arbre-clair: #5fd39b;
    --mq-grue: #f5b301;
    --mq-nuage: #ffffff;
    --mq-soleil: #ffd36b;
    /* Matière par défaut (structure non renseignée) : un bleu « plan ». */
    --mq-dessus: #f3f6ff;
    --mq-gauche: #dfe7fb;
    --mq-droite: #c5d2f5;
    --mq-bandeau: #aebfee;
}

.mq-svg { overflow: visible; }
.mq--beton { --mq-dessus: #eef1f5; --mq-gauche: #d3d9e1; --mq-droite: #b9c1cc; --mq-bandeau: #a3acb9; }
.mq--bois { --mq-dessus: #f3dfc4; --mq-gauche: #dcb27e; --mq-droite: #c4935b; --mq-bandeau: #a8743d; }
.mq--metal { --mq-dessus: #e3e9f1; --mq-gauche: #a9b8c9; --mq-droite: #8b9db2; --mq-bandeau: #6f8197; }
.mq--maconnerie { --mq-dessus: #f5e6d6; --mq-gauche: #e2bfa0; --mq-droite: #cc9d7a; --mq-bandeau: #b07f5c; }

.mq-gauche, .mq-droite, .mq-dessus { stroke: var(--mq-trait); stroke-width: 0.8; stroke-linejoin: round; }
.mq-dessus { fill: var(--mq-dessus); }
.mq-gauche { fill: var(--mq-gauche); }
.mq-droite { fill: var(--mq-droite); }
.mq-bandeau { fill: var(--mq-bandeau); }
.mq-vitre { fill: var(--mq-vitre); stroke: rgba(15, 23, 42, 0.12); stroke-width: 0.6; }
.mq-vitre--rideau { fill: var(--mq-vitre); opacity: 0.9; }
.mq-vitre--allumee { animation: mq-lumiere 6s ease-in-out infinite; }
.mq-porte { fill: var(--mq-porte); }
.mq-auvent { fill: var(--mq-auvent); }
.mq-enseigne circle { fill: var(--mq-porte); stroke: #fff; stroke-width: 2; }
.mq-enseigne-icone {
    fill: #fff;
    font-family: 'Material Symbols Outlined';
    font-feature-settings: 'liga';
}
.mq-enseigne-type { fill: var(--mq-texte); font-size: 13px; font-weight: 800; }
/* Une icône de la base absente du sous-ensemble de la police (material-symbols.css) : la police complète, qui ne se télécharge que là. */
.mq-enseigne-icone.material-symbols-outlined--libre { font-family: 'Material Symbols Complet'; }

.mq-acrotere .mq-dessus, .mq-acrotere .mq-gauche, .mq-acrotere .mq-droite { fill: var(--mq-bandeau); }
.mq-edicule .mq-dessus { fill: var(--mq-dessus); }
.mq-toit-pan { fill: #c2603f; stroke: rgba(0, 0, 0, 0.15); }
.mq-toit-pan--arriere { fill: #a64e31; }
.mq-toit-pignon { fill: var(--mq-droite); stroke: var(--mq-trait); }
.mq-toit--bac .mq-toit-pan { fill: #7d8ea3; }
.mq-toit--bac .mq-toit-pan--arriere { fill: #66778c; }
.mq-toit--membrane .mq-toit-pan { fill: #f1f3f6; }
.mq-toit--membrane .mq-toit-pan--arriere { fill: #d8dde4; }

.mq-sol-dalle { fill: var(--mq-sol); }
.mq-rue { fill: var(--mq-rue); }
.mq-sol-trame { fill: none; stroke: var(--mq-sol-trame); stroke-width: 1; }
.mq-ombre { fill: var(--mq-ombre); filter: blur(6px); }
/* Sous-sols : une coupe dans la terre, sous le rez-de-chaussée (couleur de terre, trait de niveau en tirets). */
.mq-sous-sol .mq-gauche, .mq-sous-sol .mq-droite, .mq-sous-sol .mq-dessus {
    stroke: #8b6f47;
    stroke-dasharray: 4 3;
    stroke-width: 1;
}
.mq-sous-sol .mq-gauche { fill: #cdb48e; }
.mq-sous-sol .mq-droite { fill: #b39770; }
.mq-sous-sol .mq-dessus { fill: #d9c4a2; }
html[data-theme="dark"] .mq-sous-sol .mq-gauche { fill: #6b5537; }
html[data-theme="dark"] .mq-sous-sol .mq-droite { fill: #5a472d; }
.mq-terrain-niveau { stroke: #8b6f47; stroke-width: 2; fill: none; }

.mq-tiers .mq-dessus, .mq-tiers .mq-gauche, .mq-tiers .mq-droite {
    fill: var(--mq-tiers);
    stroke: var(--mq-tiers-trait);
    stroke-dasharray: 5 3;
}
.mq-tiers .mq-gauche { fill: color-mix(in srgb, var(--mq-tiers) 85%, #000); }
.mq-tiers .mq-droite { fill: color-mix(in srgb, var(--mq-tiers) 75%, #000); }

/* Ce que les réponses d'un tiers changent à l'image (02/11/2026) : le passage de l'intercommunication (une pastille ronde pleine à anneau clair, qui ne se
   confond ni avec « Entrée », verte, ni avec les effectifs, en gélule), la corniche d'une façade superposée (teinte du bandeau de la
   maquette, trait net, la même sur le tiers et sur le bâtiment), le lit des locaux à sommeil. Variables de la maquette : mode sombre compris. */
.mq-pastille-icone rect { stroke-dasharray: none; }
.mq-etiquette.mq-etiquette--passage rect { fill: var(--primary); stroke: var(--mq-etiquette); stroke-width: 2.5; stroke-dasharray: none; }
.mq-etiquette.mq-etiquette--passage .mq-etiquette-icone { fill: #fff; }
.mq-deport .mq-dessus, .mq-deport .mq-gauche, .mq-deport .mq-droite {
    fill: var(--mq-bandeau);
    stroke: var(--mq-texte);
    stroke-width: 1.6;
    stroke-dasharray: none;
}

.mq-cote line { stroke: var(--primary); stroke-width: 1.2; }
.mq-cote--sol line { stroke-dasharray: 4 3; }

.mq-etiquette rect { fill: var(--mq-etiquette); stroke: var(--border-color); filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.12)); }
.mq-etiquette text { fill: var(--mq-texte); font-size: 14px; font-weight: 600; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; }
.mq-etiquette--cote rect { fill: var(--primary); stroke: none; }
.mq-etiquette--cote text { fill: #fff; font-weight: 700; }
.mq-etiquette--tiers rect { stroke: var(--mq-tiers-trait); stroke-dasharray: 3 2; }
.mq-etiquette--discrete text { fill: var(--muted); }

.mq-personne circle, .mq-personne path { fill: var(--mq-texte); opacity: 0.75; }
.mq-personne--b circle, .mq-personne--b path { fill: var(--primary); }
.mq-personne { animation: mq-marche 7s ease-in-out infinite; }

.mq-arbre-tronc { fill: #8a5a35; }
.mq-arbre-feuillage { fill: var(--mq-arbre); }
.mq-arbre-feuillage--clair { fill: var(--mq-arbre-clair); }
.mq-arbre { transform-box: fill-box; }

.mq-grue-mat, .mq-grue-socle, .mq-grue-cabine { fill: var(--mq-grue); }
.mq-grue-socle { fill: #6b7280; }
.mq-grue-contrepoids { fill: #6b7280; }
.mq-grue-treillis { stroke: #b07d00; stroke-width: 1; fill: none; }
.mq-grue-cable { stroke: #374151; stroke-width: 1.2; }
.mq-grue-charge { fill: var(--mq-bandeau); stroke: rgba(0, 0, 0, 0.2); }
.mq-grue-fleche { animation: mq-grue 14s ease-in-out infinite; }
.mq-grue-crochet { animation: mq-crochet 3.5s ease-in-out infinite; }
.mq-barriere rect { fill: var(--teinte-ambre); }
.mq-barriere-lisse { fill: none; stroke: var(--teinte-ambre); stroke-width: 2; stroke-dasharray: 6 4; }

/* Mesure du cadrage (maquette-batiment.js, cadrer()) : sans animation, pour lire les vraies positions. */
.mq-mesure * { animation: none !important; }

/* Construction : chaque niveau descend se poser sur le précédent, le toit vient en dernier. */
.mq-niveau, .mq-toit { transform-box: view-box; }
.mq-entre { animation: mq-entre 0.7s cubic-bezier(.2, .9, .3, 1.25) both; }
.mq-pose { animation: mq-pose 0.7s cubic-bezier(.2, .9, .3, 1.2) both; }

@keyframes mq-entre {
    0% { opacity: 0; transform: translateY(-60px); }
    70% { opacity: 1; }
    100% { opacity: 1; transform: none; }
}
@keyframes mq-pose {
    0% { opacity: 0; transform: translateY(-34px); }
    100% { opacity: 1; transform: none; }
}
@keyframes mq-lumiere {
    0%, 55%, 100% { fill: var(--mq-vitre); }
    65%, 90% { fill: var(--mq-vitre-allumee); }
}
@keyframes mq-marche {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(14px); }
}
@keyframes mq-grue {
    0%, 100% { transform: rotate(0deg) scaleX(1); }
    50% { transform: rotate(0deg) scaleX(-1); }
}
@keyframes mq-crochet {
    0%, 100% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg); }
}

html[data-theme="dark"] .atelier,
html[data-theme="dark"] .terrain,
html[data-theme="dark"] .plan-site,
html[data-theme="dark"] .ville__apercu--liste,
html[data-theme="dark"] .ville--plate,
html[data-theme="dark"] .ville__vignette,
html[data-theme="dark"] .batiment-logo {
    --mq-ciel: #0d1530;
    --mq-ciel-bas: #111a36;
    --mq-ciel-haut: rgba(59, 130, 246, 0.20);
    --mq-sol: #18223f;
    --mq-sol-trame: rgba(148, 163, 184, 0.10);
    --mq-rue: #252f4f;
    --mq-ombre: rgba(0, 0, 0, 0.35);
    --mq-trait: rgba(0, 0, 0, 0.35);
    --mq-vitre: #34507f;
    --mq-vitre-allumee: #ffd166;
    --mq-porte: #3b82f6;
    --mq-tiers: #3a4560;
    --mq-tiers-trait: #64708a;
    --mq-texte: #f1f5f9;
    --mq-etiquette: #1b2544;
    --mq-nuage: #2a3557;
    --mq-soleil: #e2e8f0;
}
html[data-theme="dark"] .mq-vitre--allumee { animation-duration: 4s; }

/* Mesuré le 17/10/2026 : une seule animation en boucle (silhouettes, fenêtres, grue, nuage, feu) suffit à redessiner l'image en
   continu, environ 13 % de processeur au repos. Ces boucles sont arrêtées partout, quel que soit le bouton « Animation »
   (public/css/sobriete.css) ; les signaux d'action (« + », sélection, onglet à compléter) restent. */

.atelier, .terrain, .plan-site {
    /* Six couleurs d'activité, une par établissement du tableau des effectifs. */
    --mq-act-0: var(--teinte-bleu);
    --mq-act-1: #10b981;
    --mq-act-2: var(--teinte-ambre);
    --mq-act-3: #ec4899;
    --mq-act-4: #8b5cf6;
    --mq-act-5: #06b6d4;
    --ressort: cubic-bezier(.2, .9, .3, 1.25);
    --glisse: cubic-bezier(.22, 1, .36, 1);
}


/* ── Activités : une bande de couleur par activité, sur la façade de son niveau ── */
.mq-activite--c0 { --mq-act: var(--mq-act-0); }
.mq-activite--c1 { --mq-act: var(--mq-act-1); }
.mq-activite--c2 { --mq-act: var(--mq-act-2); }
.mq-activite--c3 { --mq-act: var(--mq-act-3); }
.mq-activite--c4 { --mq-act: var(--mq-act-4); }
.mq-activite--c5 { --mq-act: var(--mq-act-5); }
.mq-activite {
    animation: mq-peint 0.55s var(--glisse) both;
}
.mq-activite-face {
    fill: var(--mq-act, var(--primary));
    fill-opacity: 0.13;
    stroke: var(--mq-act, var(--primary));
    stroke-opacity: 0;
    stroke-width: 1.6;
    transition: fill-opacity 0.25s ease, stroke-opacity 0.25s ease;
}
.mq-activite-lisere { fill: var(--mq-act, var(--primary)); }
.mq-activite-pastille rect { fill: var(--mq-act, var(--primary)); filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.25)); }
.mq-activite-pastille text { fill: #fff; font-size: 10px; font-weight: 800; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; pointer-events: none; }
.mq-activite--vide .mq-activite-face {
    fill: var(--primary);
    fill-opacity: 0;
    stroke: var(--primary);
    stroke-dasharray: 5 4;
}
@keyframes mq-peint {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ── Tout ce qui se clique dans le dessin ── */
.mq-actionnable { cursor: pointer; outline: none; }
.mq-actionnable:hover .mq-activite-face,
.mq-actionnable:focus-visible .mq-activite-face,
.mq-selection .mq-activite-face {
    fill-opacity: 0.38;
    stroke-opacity: 0.95;
}
.mq-activite--vide.mq-actionnable:hover .mq-activite-face,
.mq-activite--vide.mq-actionnable:focus-visible .mq-activite-face {
    fill-opacity: 0.08;
    stroke-opacity: 0.8;
}
.mq-tiers.mq-actionnable { transition: filter 0.25s ease; }
.mq-tiers.mq-actionnable:hover,
.mq-tiers.mq-actionnable:focus-visible,
.mq-tiers.mq-selection {
    filter: drop-shadow(0 0 0.5px var(--primary)) drop-shadow(0 6px 14px color-mix(in srgb, var(--primary) 35%, transparent)) brightness(1.06);
}
.mq-etiquette.mq-actionnable rect { transition: stroke 0.2s ease, fill 0.2s ease; }
.mq-etiquette.mq-actionnable:hover rect,
.mq-etiquette.mq-actionnable:focus-visible rect { stroke: var(--primary); stroke-dasharray: none; }

/* ── Les « + » ── */
.mq-plus { cursor: pointer; outline: none; }
.mq-plus-corps {
    transform-box: fill-box;
    transform-origin: center;
    animation: mq-plus-arrive 0.6s var(--ressort) both;
    transition: transform 0.25s var(--ressort);
}
.mq-plus-fond { fill: var(--primary); stroke: #fff; stroke-width: 2.5; filter: drop-shadow(0 3px 6px rgba(41, 87, 255, 0.35)); }
.mq-plus-signe { stroke: #fff; stroke-width: 2.4; stroke-linecap: round; fill: none; }
.mq-plus-onde {
    fill: none;
    stroke: var(--primary);
    stroke-width: 2;
    transform-box: fill-box;
    transform-origin: center;
    animation: mq-onde 2.8s ease-out infinite;
}
.mq-plus:hover .mq-plus-corps,
.mq-plus:focus-visible .mq-plus-corps,
.mq-parcelle:hover .mq-plus-corps,
.mq-parcelle:focus-visible .mq-plus-corps { transform: scale(1.22) rotate(90deg); }
.mq-plus:focus-visible .mq-plus-fond,
.mq-parcelle:focus-visible .mq-plus-fond { stroke: var(--mq-texte); }
@keyframes mq-plus-arrive {
    from { opacity: 0; transform: scale(0.2); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes mq-onde {
    0% { opacity: 0.55; transform: scale(1); }
    70%, 100% { opacity: 0; transform: scale(2.1); }
}

/* Parcelle libre pour un tiers : un terrain en pointillé qui attend. */
.mq-parcelle { cursor: pointer; outline: none; }
.mq-parcelle-sol {
    fill: color-mix(in srgb, var(--primary) 5%, transparent);
    stroke: var(--primary);
    stroke-opacity: 0.45;
    stroke-width: 1.4;
    stroke-dasharray: 7 5;
    animation: mq-fourmis 18s linear infinite;
    transition: fill 0.25s ease, stroke-opacity 0.25s ease;
}
.mq-parcelle:hover .mq-parcelle-sol,
.mq-parcelle:focus-visible .mq-parcelle-sol { fill: color-mix(in srgb, var(--primary) 12%, transparent); stroke-opacity: 0.9; }
.mq-parcelle-texte { fill: var(--primary); font-size: 12px; font-weight: 700; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; }
@keyframes mq-fourmis {
    to { stroke-dashoffset: -240; }
}

/* ── Sélection : une activité ou un niveau décrits par les cartes du bas (maquette-batiment.js, .mq-choisi) ── */
.mq-niveau.mq-actionnable > .mq-gauche,
.mq-niveau.mq-actionnable > .mq-droite { transition: filter 0.2s ease; }
.mq-niveau.mq-actionnable:hover > .mq-gauche,
.mq-niveau.mq-actionnable:hover > .mq-droite { filter: brightness(1.06); }
.mq-niveau.mq-choisi > .mq-gauche,
.mq-niveau.mq-choisi > .mq-droite,
.mq-niveau.mq-choisi > .mq-dessus {
    stroke: var(--primary);
    stroke-width: 2.2;
    stroke-opacity: 1;
}
.mq-activite.mq-choisi .mq-activite-face {
    fill-opacity: 0.55;
    stroke: var(--primary);
    stroke-width: 2.5;
    stroke-opacity: 1;
}
.mq-activite.mq-choisi { animation: mq-choisi 0.5s var(--ressort, ease) both; }
@keyframes mq-choisi { 40% { transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) {
    .mq-activite.mq-choisi, .atelier__portee--choisie > span:nth-child(2) { animation: none; }
}

/* Rose des vents et tiers que l'on glisse (maquette-batiment.js) */
.mq-rose-disque { fill: var(--mq-etiquette, #fff); fill-opacity: 0.75; stroke: var(--mq-tiers-trait, #94a3b8); stroke-width: 1; }
.mq-rose-nord { fill: #ef4444; }
.mq-rose-sud { fill: var(--mq-tiers-trait, #94a3b8); }
.mq-rose-lettre { font-size: 11px; font-weight: 700; fill: var(--mq-texte, #334155); pointer-events: none; }
.mq-rose-lettre--nord { fill: #ef4444; }
.mq-rose { cursor: pointer; transition: transform 0.2s ease; }
.mq-rose:hover .mq-rose-disque { fill-opacity: 1; }
.mq-famille--commerce { --ville-accent: var(--teinte-ambre); }
.mq-famille--restauration { --ville-accent: #ef4444; }
.mq-famille--hebergement { --ville-accent: #8b5cf6; }
.mq-famille--sante { --ville-accent: #14b8a6; }
.mq-famille--enseignement { --ville-accent: #eab308; }
.mq-famille--bureaux { --ville-accent: var(--teinte-bleu); }
.mq-famille--culture { --ville-accent: #ec4899; }
.mq-famille--culte { --ville-accent: #a16207; }
.mq-famille--sport { --ville-accent: var(--teinte-vert-vif); }
.mq-famille--parking { --ville-accent: #64748b; }
.mq-famille--transport { --ville-accent: #0ea5e9; }
.mq-famille--habitation { --ville-accent: #b45309; }
.mq-famille--industrie { --ville-accent: #475569; }
.mq-famille--site, .mq-famille--groupement, .mq-famille--autre { --ville-accent: var(--primary); }
.mq-famille .mq-enseigne circle, .mq-famille .mq-auvent { fill: var(--ville-accent, var(--mq-porte)); }
.mq-decor-auvent { fill: var(--ville-accent, var(--mq-auvent)); stroke: rgba(15, 23, 42, 0.25); stroke-width: 0.6; }
.mq-decor-croix-fond { fill: #ffffff; stroke: rgba(15, 23, 42, 0.2); stroke-width: 0.6; }
.mq-decor-croix { fill: #ef4444; }
.mq-decor-cheminee .mq-dessus, .mq-decor-cheminee .mq-gauche, .mq-decor-cheminee .mq-droite { fill: #9aa3b1; }
.mq-decor-mat { stroke: #64748b; stroke-width: 1.4; }
.mq-decor-drapeau { fill: var(--ville-accent, var(--primary)); }
.mq-decor-colonne .mq-dessus, .mq-decor-colonne .mq-gauche, .mq-decor-colonne .mq-droite { fill: #f8fafc; }
.mq-socle .mq-dessus { fill: color-mix(in srgb, var(--mq-dessus) 85%, var(--mq-bandeau)); }

/* L'effectif de chaque niveau, au bord de sa façade. */
.mq-etiquette--effectif rect { fill: var(--primary); stroke: none; }
.mq-etiquette--effectif text { fill: #fff; font-weight: 700; }
.mq-etiquette .mq-etiquette-icone { font-family: 'Material Symbols Outlined'; font-feature-settings: 'liga'; font-size: 16px !important; font-weight: 400 !important; }
.mq-etiquette--tiers .mq-etiquette-icone { fill: var(--mq-tiers-accent, var(--mq-texte)); }
.mq-tiers--habitation { --mq-tiers: #e8c9a6; --mq-tiers-trait: #b98a5b; --mq-tiers-accent: #b45309; }
.mq-tiers--erp { --mq-tiers: #c7d6f5; --mq-tiers-trait: #7f9bd6; --mq-tiers-accent: var(--teinte-bleu); }
.mq-tiers--parking { --mq-tiers: #d5d9e0; --mq-tiers-trait: #8b94a3; --mq-tiers-accent: #475569; }
.mq-tiers--travail { --mq-tiers: #c4ccd6; --mq-tiers-trait: #7b8796; --mq-tiers-accent: #334155; }
.mq-tiers--erp .mq-decor-auvent { fill: #7f9bd6; }
html[data-theme="dark"] .mq-tiers--habitation { --mq-tiers: #6b4f34; --mq-tiers-trait: #a07850; }
html[data-theme="dark"] .mq-tiers--erp { --mq-tiers: #34497a; --mq-tiers-trait: #6d86c2; }
.mq-famille--igh { --ville-accent: #0f766e; }
.mq-famille--icpe { --ville-accent: #dc2626; }
.mq-decor-balcon { fill: color-mix(in srgb, var(--mq-dessus, #e2e8f0) 70%, #64748b); stroke: rgba(15, 23, 42, 0.25); stroke-width: 0.5; }
.mq-decor-garde-corps { fill: rgba(148, 163, 184, 0.35); stroke: #64748b; stroke-width: 0.8; }
.mq-decor-haie .mq-dessus { fill: #4ade80; }
.mq-decor-haie .mq-gauche, .mq-decor-haie .mq-droite { fill: var(--teinte-vert); }
.mq-decor-feu { fill: #ef4444; animation: mq-feu 1.6s ease-in-out infinite; }
@keyframes mq-feu { 50% { opacity: 0.25; } }
.mq-decor-quai { fill: #94a3b8; stroke: #475569; stroke-width: 0.8; }
.mq-decor-quai-lame { stroke: #64748b; stroke-width: 0.8; fill: none; }
.mq-decor-citerne rect, .mq-decor-citerne ellipse { fill: #e2e8f0; stroke: #94a3b8; stroke-width: 1; }
.mq-decor-citerne rect { stroke-width: 0; }
.mq-decor-citerne-pied { fill: rgba(15, 23, 42, 0.12) !important; stroke: none !important; }
.mq-decor-danger { fill: #facc15; stroke: #dc2626; stroke-width: 1.6; }
.mq-parcelle--complet { display: none; }
@media (prefers-reduced-motion: reduce) { .mq-decor-feu { animation: none; }
}
.mq-etiquette--entree { cursor: grab; }
.mq-etiquette--entree rect { fill: var(--teinte-vert); stroke: none; }
.mq-etiquette--entree text { fill: #fff; font-weight: 700; }
/* La surface d'une activité, sur sa bande de façade. */
.mq-surface rect { fill: #ffffff; stroke: rgba(15, 23, 42, 0.25); stroke-width: 0.8; }
.mq-surface text { fill: #0f172a; font-size: 10.5px; font-weight: 700; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; }
.mq-surface--manque rect { fill: #fef3c7; stroke: #d97706; stroke-dasharray: 2 1.5; }
.mq-surface--manque text { fill: #92400e; }
.mq-surface.mq-actionnable { cursor: pointer; }
/* Locaux à risques en blocs sur la façade (maquette-batiment.js, blocsLocaux, 17/10/2026) : la paire « avertissement » du livre de marque. */
.mq-local-face { fill: var(--warning-highlighted, #ff9800); stroke: var(--warning-color, #856404); stroke-width: 1.3; }
.mq-local text { fill: #3d1f00; font-size: 9px; font-weight: 800; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; pointer-events: none; }
.mq-local--niveau .mq-local-face { stroke-dasharray: 3 2; stroke-width: 1.6; }
.mq-local--reste text { font-size: 8px; }
.mq-local--etroit text { font-size: 7px; }
/* Le triangle d'alerte posé sur le bloc d'un local (plus de « + » ni de clic sur un local depuis le 01/11/2026). */
.mq-plus-badge path:first-child { fill: #fff; stroke: var(--warning-color, #b45309); stroke-width: 1.4; stroke-linejoin: round; }
.mq-plus-badge-signe { stroke: var(--warning-color, #b45309); stroke-width: 1.6; stroke-linecap: round; fill: none; }
.mq-etiquette--locaux rect { fill: var(--warning-bg-color, #fff3cd); stroke: var(--warning-color, #856404); stroke-width: 1; }
.mq-etiquette--locaux text { fill: var(--warning-color, #856404); font-weight: 700; }
.mq-surface.mq-actionnable:hover rect, .mq-surface.mq-actionnable:focus-visible rect { stroke: var(--primary); stroke-width: 1.6; }
.mq-etiquette--sous-sol rect { fill: #8b6f47; stroke: none; }
.mq-etiquette--sous-sol text { fill: #fff; font-weight: 700; }
.mq-ville-herbe { fill: #dff3e4; }
.mq-ville-boulevard { fill: var(--mq-rue, #cbd5e1); }
.mq-ville-marquage { fill: none; stroke: #ffffff; stroke-width: 1.6; stroke-dasharray: 10 12; opacity: 0.8; }
html[data-theme="dark"] .mq-ville-herbe { fill: #17312a; }
html[data-theme="dark"] .mq-ville-marquage { stroke: rgba(255, 255, 255, 0.35); }
/* Les « + » de niveau, à la limite : grisés, leur infobulle dit pourquoi (3D et schéma ; le clic ouvre la fenêtre qui l'explique). */
.mq-plus--grise { opacity: 0.4; cursor: not-allowed; filter: grayscale(1); }
.mq-plus--grise .mq-plus-corps { animation: none; }

/* ═══ Dégagements et pastilles de la fiche sur la 3D (public/js/maquette-batiment.js, dessinerDegagements, 19/10/2026) ═══
   Un affichage de la fiche, sobre : les cages d'escalier et d'ascenseur posées sur la façade de droite, la mezzanine en
   demi-plancher, les équipements en pastilles rondes avec une icône. Rien ne bouge (animation éteinte : rien à arrêter). */
.mq-cage-face { fill: color-mix(in srgb, var(--mq-dessus, #f3f6ff) 70%, #94a3b8); stroke: #64748b; stroke-width: 1; }
.mq-cage--ouverte .mq-cage-face { fill: color-mix(in srgb, var(--mq-dessus, #f3f6ff) 88%, #94a3b8); stroke-dasharray: 4 3; }
.mq-cage--encloisonnee .mq-cage-face { fill: #cbd5e1; stroke: #334155; stroke-width: 1.4; }
.mq-cage--ascenseur .mq-cage-face { fill: color-mix(in srgb, var(--primary) 16%, #e2e8f0); stroke: color-mix(in srgb, var(--primary) 70%, #334155); }
.mq-cage--elevateur .mq-cage-face { fill: color-mix(in srgb, var(--accent, #10c2a6) 14%, #f1f5f9); stroke: color-mix(in srgb, var(--accent, #10c2a6) 70%, #334155); stroke-dasharray: 4 3; }
.mq-cage-edicule .mq-dessus, .mq-cage-edicule .mq-gauche, .mq-cage-edicule .mq-droite { fill: #cbd5e1; stroke: #64748b; stroke-width: 0.8; }
.mq-cage-edicule .mq-droite { fill: #94a3b8; }
.mq-cage-volee { fill: none; stroke: #334155; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.mq-cage-rail { fill: none; stroke: color-mix(in srgb, var(--primary) 60%, #334155); stroke-width: 1.2; }
.mq-cage-cabine { fill: var(--primary); opacity: 0.85; }
.mq-cage-fleche { fill: color-mix(in srgb, var(--primary) 80%, #0f172a); }
.mq-cage-nacelle { fill: color-mix(in srgb, var(--accent, #10c2a6) 70%, #0f172a); }
.mq-cage-garde-corps { fill: none; stroke: color-mix(in srgb, var(--accent, #10c2a6) 70%, #0f172a); stroke-width: 1.2; }
.mq-cage-signe { fill: color-mix(in srgb, var(--accent, #10c2a6) 70%, #0f172a); font-family: 'Material Symbols Outlined'; font-feature-settings: 'liga'; pointer-events: none; }
.mq-mezzanine-volume { fill: color-mix(in srgb, var(--primary) 18%, transparent); stroke: color-mix(in srgb, var(--primary) 60%, transparent); stroke-width: 1; stroke-dasharray: 3 2; }
.mq-mezzanine-plancher { fill: #334155; }
.mq-mezzanine-garde-corps { fill: none; stroke: #475569; stroke-width: 1.2; stroke-dasharray: 3 2; }
html[data-theme="dark"] .mq-cage-face { fill: #334155; stroke: #94a3b8; }
html[data-theme="dark"] .mq-cage--ouverte .mq-cage-face { fill: #273449; }
html[data-theme="dark"] .mq-cage--encloisonnee .mq-cage-face { fill: #475569; stroke: #e2e8f0; }
html[data-theme="dark"] .mq-cage--ascenseur .mq-cage-face { fill: color-mix(in srgb, var(--primary) 26%, #1e293b); stroke: #93c5fd; }
html[data-theme="dark"] .mq-cage--elevateur .mq-cage-face { fill: color-mix(in srgb, var(--accent, #10c2a6) 20%, #1e293b); stroke: #5eead4; }
html[data-theme="dark"] .mq-cage-volee { stroke: #e2e8f0; }
html[data-theme="dark"] .mq-cage-fleche { fill: #bfdbfe; }
html[data-theme="dark"] :is(.mq-cage-nacelle, .mq-cage-signe) { fill: #5eead4; }
html[data-theme="dark"] .mq-cage-garde-corps { stroke: #5eead4; }
html[data-theme="dark"] .mq-cage-edicule :is(.mq-dessus, .mq-gauche) { fill: #475569; stroke: #94a3b8; }
html[data-theme="dark"] .mq-cage-edicule .mq-droite { fill: #334155; }
html[data-theme="dark"] .mq-mezzanine-plancher { fill: #cbd5e1; }
html[data-theme="dark"] .mq-mezzanine-garde-corps { stroke: #cbd5e1; }

/* Les pastilles : un rond blanc cerclé, l'icône en couleur ; un « +N » quand la rangée est pleine. */
.mq-equip { outline: none; }
.mq-equip-fond { fill: var(--surface, #fff); stroke: #475569; stroke-width: 1.4; filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.25)); }
.mq-equip-icone { fill: #334155; font-family: 'Material Symbols Outlined'; font-feature-settings: 'liga'; pointer-events: none; }
.mq-equip-nombre { fill: #334155; font-weight: 800; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; pointer-events: none; }
.mq-equip--toit .mq-equip-fond { stroke: #0e7490; }
.mq-equip--toit .mq-equip-icone { fill: #0e7490; }
.mq-equip--facade .mq-equip-fond { stroke: var(--warning-color, #b45309); }
.mq-equip--facade .mq-equip-icone { fill: var(--warning-color, #b45309); }
.mq-equip--secours .mq-equip-fond { stroke: var(--danger-color, #dc2626); }
.mq-equip--secours .mq-equip-icone { fill: var(--danger-color, #dc2626); }
.mq-equip--lien { cursor: pointer; }
:is(.mq-equip, .mq-cage, .mq-mezzanine, .mq-entree-acces)[data-legende]:focus { outline: none; }
.mq-equip:is(:hover, :focus-visible) .mq-equip-fond { stroke: var(--primary); stroke-width: 2.6; }
:is(.mq-cage, .mq-mezzanine, .mq-entree-acces):focus-visible :is(.mq-cage-face, .mq-mezzanine-volume, .mq-entree-rampe, .mq-entree-creux) { stroke: var(--primary); stroke-width: 2.4; }
:is(.mq-cage, .mq-mezzanine, .mq-entree-acces).mq-equip--lien { cursor: pointer; }
html[data-theme="dark"] .mq-equip-fond { fill: #1b2544; stroke: #cbd5e1; }
html[data-theme="dark"] :is(.mq-equip-icone, .mq-equip-nombre) { fill: #e2e8f0; }
html[data-theme="dark"] .mq-equip--toit .mq-equip-fond { stroke: #67e8f9; }
html[data-theme="dark"] .mq-equip--toit .mq-equip-icone { fill: #67e8f9; }
html[data-theme="dark"] .mq-equip--facade .mq-equip-fond { stroke: #fbbf24; }
html[data-theme="dark"] .mq-equip--facade .mq-equip-icone { fill: #fbbf24; }
html[data-theme="dark"] .mq-equip--secours .mq-equip-fond { stroke: #f87171; }
html[data-theme="dark"] .mq-equip--secours .mq-equip-icone { fill: #f87171; }

/* La bulle de légende (survol, focus clavier) : texte foncé sur fond clair, inversé en sombre ; jamais de clic. */
.mq-equip-bulle { pointer-events: none; }
.mq-equip-bulle rect { fill: #0f172a; opacity: 0.92; }
.mq-equip-bulle text { fill: #fff; font-size: 13px; font-weight: 600; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; }
html[data-theme="dark"] .mq-equip-bulle rect { fill: #e2e8f0; }
html[data-theme="dark"] .mq-equip-bulle text { fill: #0f172a; }

/* L'accès à la porte (maquette-batiment.js, dessinerAccesEntree) : marches et palier en pierre claire, la rampe en bleu discret
   (pointillés pour une rampe amovible), une courette sombre pour une entrée en sous-sol. */
.mq-entree-marche > .mq-dessus, .mq-entree-palier > .mq-dessus { fill: #f1f5f9; }
.mq-entree-marche > .mq-gauche, .mq-entree-palier > .mq-gauche { fill: #94a3b8; }
.mq-entree-marche > .mq-droite, .mq-entree-palier > .mq-droite { fill: #64748b; }
.mq-entree-rampe { fill: color-mix(in srgb, var(--primary) 22%, #f1f5f9); stroke: color-mix(in srgb, var(--primary) 70%, #334155); stroke-width: 1; }
.mq-entree-rampe-flanc { fill: #94a3b8; stroke: #64748b; stroke-width: 0.6; }
.mq-entree-main-courante { fill: none; stroke: var(--primary); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mq-entree-acces--amovible .mq-entree-rampe { fill: color-mix(in srgb, var(--primary) 10%, #f8fafc); stroke-dasharray: 4 3; }
.mq-entree-acces--amovible .mq-entree-main-courante { stroke-dasharray: 4 3; }
.mq-entree-creux { fill: #475569; stroke: #334155; stroke-width: 0.8; }
.mq-entree-marche-trait { fill: none; stroke: #cbd5e1; stroke-width: 1.2; }
html[data-theme="dark"] :is(.mq-entree-marche, .mq-entree-palier) > .mq-dessus { fill: #64748b; }
html[data-theme="dark"] :is(.mq-entree-marche, .mq-entree-palier) > .mq-gauche { fill: #475569; }
html[data-theme="dark"] :is(.mq-entree-marche, .mq-entree-palier) > .mq-droite { fill: #334155; }
html[data-theme="dark"] .mq-entree-rampe { fill: color-mix(in srgb, var(--primary) 30%, #1e293b); stroke: #93c5fd; }
html[data-theme="dark"] .mq-entree-rampe-flanc { fill: #334155; stroke: #475569; }
html[data-theme="dark"] .mq-entree-main-courante { stroke: #93c5fd; }
html[data-theme="dark"] .mq-entree-creux { fill: #0b1220; stroke: #475569; }
html[data-theme="dark"] .mq-entree-marche-trait { stroke: #64748b; }

/* Rotation adaptative (26/10/2026, public/js/maquette-batiment.js, activerVuesFixes) : sur un téléphone où la
   rotation à deux doigts s'est mesurée trop saccadée, ces boutons remplacent le geste. Posés dans la scène (pas
   dans le dessin lui-même), au même niveau que la barre d'orientation. */
.mq-vues-fixes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
    margin-top: 0.5rem;
}
.mq-vues-fixes__bouton {
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--panneau-fond);
    color: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}
.mq-vues-fixes__bouton:hover, .mq-vues-fixes__bouton:focus-visible {
    border-color: var(--primary);
    color: var(--primary);
}