/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   components/_materiaux.css — le fichier des motifs des matériaux (décision du pilote du 18/10/2026)

   Deux usages, une seule palette (les variables --matiere-*, base/_variables.css en clair, mode_sombre.css en sombre) :
     1. les dessins des tuiles carrées de la carte « Matériaux » (public/js/materiaux-parcours.js, dessinMotif) : chaque forme
        d'un dessin porte une classe .mt-<teinte> (remplissage) ou .mt-t-<teinte> (trait) ;
     2. l'aspect du bâtiment en 3D (public/js/maquette-batiment.js : aspectFacade, cadreMenuiserie, toitMatiere ; ville.js) :
        .mq-facade--<aspect> repeint les murs (l'emporte sur la matière de la structure, .mq--bois…, atelier-batiment.css),
        .mq-menuiserie--<cadre> colore les cadres des fenêtres, .mq-toit-teinte--<teinte> le toit.
   Aucune couleur écrite en dur ici : tout passe par les variables. Aucune animation.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Les dessins des tuiles ─── */
.mt-joint { fill: var(--matiere-joint); }
.mt-ciel { fill: var(--matiere-ciel); }
.mt-beton { fill: var(--matiere-beton); }
.mt-beton-clair { fill: var(--matiere-beton-clair); }
.mt-beton-fonce { fill: var(--matiere-beton-fonce); }
.mt-cellulaire { fill: var(--matiere-cellulaire); }
.mt-parpaing { fill: var(--matiere-parpaing); }
.mt-brique { fill: var(--matiere-brique); }
.mt-brique-fonce { fill: var(--matiere-brique-fonce); }
.mt-pierre { fill: var(--matiere-pierre); }
.mt-pierre-fonce { fill: var(--matiere-pierre-fonce); }
.mt-bois { fill: var(--matiere-bois); }
.mt-bois-clair { fill: var(--matiere-bois-clair); }
.mt-bois-fonce { fill: var(--matiere-bois-fonce); }
.mt-acier { fill: var(--matiere-acier); }
.mt-acier-clair { fill: var(--matiere-acier-clair); }
.mt-acier-fonce { fill: var(--matiere-acier-fonce); }
.mt-verre { fill: var(--matiere-verre); }
.mt-verre-clair { fill: var(--matiere-verre-clair); }
.mt-verre-cadre { fill: var(--matiere-verre-cadre); }
.mt-enduit { fill: var(--matiere-enduit); }
.mt-enduit-fonce { fill: var(--matiere-enduit-fonce); }
.mt-vegetal { fill: var(--matiere-vegetal); }
.mt-vegetal-clair { fill: var(--matiere-vegetal-clair); }
.mt-vegetal-fonce { fill: var(--matiere-vegetal-fonce); }
.mt-terre-cuite { fill: var(--matiere-terre-cuite); }
.mt-terre-cuite-fonce { fill: var(--matiere-terre-cuite-fonce); }
.mt-fibres { fill: var(--matiere-fibres); }
.mt-fibres-fonce { fill: var(--matiere-fibres-fonce); }
.mt-composite { fill: var(--matiere-composite); }
.mt-composite-fonce { fill: var(--matiere-composite-fonce); }
.mt-textile { fill: var(--matiere-textile); }
.mt-textile-trait { fill: var(--matiere-textile-trait); }
.mt-polycarbonate { fill: var(--matiere-polycarbonate); }
.mt-polycarbonate-trait { fill: var(--matiere-polycarbonate-trait); }
.mt-tuile { fill: var(--matiere-tuile); }
.mt-tuile-fonce { fill: var(--matiere-tuile-fonce); }
.mt-ardoise { fill: var(--matiere-ardoise); }
.mt-ardoise-fonce { fill: var(--matiere-ardoise-fonce); }
.mt-shingle { fill: var(--matiere-shingle); }
.mt-shingle-fonce { fill: var(--matiere-shingle-fonce); }
.mt-zinc { fill: var(--matiere-zinc); }
.mt-zinc-fonce { fill: var(--matiere-zinc-fonce); }
.mt-bitume { fill: var(--matiere-bitume); }
.mt-bitume-clair { fill: var(--matiere-bitume-clair); }
.mt-membrane { fill: var(--matiere-membrane); }
.mt-membrane-fonce { fill: var(--matiere-membrane-fonce); }
.mt-dalle { fill: var(--matiere-dalle); }
.mt-dalle-fonce { fill: var(--matiere-dalle-fonce); }
.mt-cadre-pvc { fill: var(--matiere-cadre-pvc); }
.mt-cadre-alu { fill: var(--matiere-cadre-alu); }
.mt-cadre-bois { fill: var(--matiere-cadre-bois); }
.mt-cadre-acier { fill: var(--matiere-cadre-acier); }
.mt-t-trait { fill: none; stroke: var(--matiere-trait); }
.mt-t-joint { fill: none; stroke: var(--matiere-joint); }
.mt-t-ciel { fill: none; stroke: var(--matiere-ciel); }
.mt-t-beton { fill: none; stroke: var(--matiere-beton); }
.mt-t-beton-clair { fill: none; stroke: var(--matiere-beton-clair); }
.mt-t-beton-fonce { fill: none; stroke: var(--matiere-beton-fonce); }
.mt-t-cellulaire { fill: none; stroke: var(--matiere-cellulaire); }
.mt-t-parpaing { fill: none; stroke: var(--matiere-parpaing); }
.mt-t-brique { fill: none; stroke: var(--matiere-brique); }
.mt-t-brique-fonce { fill: none; stroke: var(--matiere-brique-fonce); }
.mt-t-pierre { fill: none; stroke: var(--matiere-pierre); }
.mt-t-pierre-fonce { fill: none; stroke: var(--matiere-pierre-fonce); }
.mt-t-bois { fill: none; stroke: var(--matiere-bois); }
.mt-t-bois-clair { fill: none; stroke: var(--matiere-bois-clair); }
.mt-t-bois-fonce { fill: none; stroke: var(--matiere-bois-fonce); }
.mt-t-acier { fill: none; stroke: var(--matiere-acier); }
.mt-t-acier-clair { fill: none; stroke: var(--matiere-acier-clair); }
.mt-t-acier-fonce { fill: none; stroke: var(--matiere-acier-fonce); }
.mt-t-verre { fill: none; stroke: var(--matiere-verre); }
.mt-t-verre-clair { fill: none; stroke: var(--matiere-verre-clair); }
.mt-t-verre-cadre { fill: none; stroke: var(--matiere-verre-cadre); }
.mt-t-enduit { fill: none; stroke: var(--matiere-enduit); }
.mt-t-enduit-fonce { fill: none; stroke: var(--matiere-enduit-fonce); }
.mt-t-vegetal { fill: none; stroke: var(--matiere-vegetal); }
.mt-t-vegetal-clair { fill: none; stroke: var(--matiere-vegetal-clair); }
.mt-t-vegetal-fonce { fill: none; stroke: var(--matiere-vegetal-fonce); }
.mt-t-terre-cuite { fill: none; stroke: var(--matiere-terre-cuite); }
.mt-t-terre-cuite-fonce { fill: none; stroke: var(--matiere-terre-cuite-fonce); }
.mt-t-fibres { fill: none; stroke: var(--matiere-fibres); }
.mt-t-fibres-fonce { fill: none; stroke: var(--matiere-fibres-fonce); }
.mt-t-composite { fill: none; stroke: var(--matiere-composite); }
.mt-t-composite-fonce { fill: none; stroke: var(--matiere-composite-fonce); }
.mt-t-textile { fill: none; stroke: var(--matiere-textile); }
.mt-t-textile-trait { fill: none; stroke: var(--matiere-textile-trait); }
.mt-t-polycarbonate { fill: none; stroke: var(--matiere-polycarbonate); }
.mt-t-polycarbonate-trait { fill: none; stroke: var(--matiere-polycarbonate-trait); }
.mt-t-tuile { fill: none; stroke: var(--matiere-tuile); }
.mt-t-tuile-fonce { fill: none; stroke: var(--matiere-tuile-fonce); }
.mt-t-ardoise { fill: none; stroke: var(--matiere-ardoise); }
.mt-t-ardoise-fonce { fill: none; stroke: var(--matiere-ardoise-fonce); }
.mt-t-shingle { fill: none; stroke: var(--matiere-shingle); }
.mt-t-shingle-fonce { fill: none; stroke: var(--matiere-shingle-fonce); }
.mt-t-zinc { fill: none; stroke: var(--matiere-zinc); }
.mt-t-zinc-fonce { fill: none; stroke: var(--matiere-zinc-fonce); }
.mt-t-bitume { fill: none; stroke: var(--matiere-bitume); }
.mt-t-bitume-clair { fill: none; stroke: var(--matiere-bitume-clair); }
.mt-t-membrane { fill: none; stroke: var(--matiere-membrane); }
.mt-t-membrane-fonce { fill: none; stroke: var(--matiere-membrane-fonce); }
.mt-t-dalle { fill: none; stroke: var(--matiere-dalle); }
.mt-t-dalle-fonce { fill: none; stroke: var(--matiere-dalle-fonce); }
.mt-t-cadre-pvc { fill: none; stroke: var(--matiere-cadre-pvc); }
.mt-t-cadre-alu { fill: none; stroke: var(--matiere-cadre-alu); }
.mt-t-cadre-bois { fill: none; stroke: var(--matiere-cadre-bois); }
.mt-t-cadre-acier { fill: none; stroke: var(--matiere-cadre-acier); }
.mt-reflet { fill: var(--matiere-verre-clair); opacity: 0.55; }
.mt-voile { fill: var(--matiere-verre-clair); opacity: 0.5; }

/* ─── 2. L'aspect du bâtiment en 3D ─── */
/* Les murs (faces gauche et droite, bandeau de plancher) prennent la teinte de la façade ; le dessus (terrasse, planchers) reste
   celui de la structure. Deux classes pour l'emporter sur .mq--bois / .mq--metal… quel que soit l'ordre des feuilles. */
.mq-facade.mq-facade--lourde { --mq-gauche: var(--matiere-beton-clair); --mq-droite: var(--matiere-beton); --mq-bandeau: var(--matiere-beton-fonce); }
.mq-facade.mq-facade--rideau { --mq-gauche: var(--matiere-verre-clair); --mq-droite: var(--matiere-verre); --mq-bandeau: var(--matiere-verre-cadre); }
.mq-facade.mq-facade--enduit { --mq-gauche: var(--matiere-enduit); --mq-droite: var(--matiere-enduit-fonce); --mq-bandeau: var(--matiere-enduit-fonce); }
.mq-facade.mq-facade--bois { --mq-gauche: var(--matiere-bois); --mq-droite: var(--matiere-bois-fonce); --mq-bandeau: var(--matiere-bois-fonce); --mq-revetement: var(--matiere-bois-fonce); }
.mq-facade.mq-facade--metal { --mq-gauche: var(--matiere-acier-clair); --mq-droite: var(--matiere-acier); --mq-bandeau: var(--matiere-acier-fonce); --mq-revetement: var(--matiere-acier-fonce); }
.mq-facade.mq-facade--terre-cuite { --mq-gauche: var(--matiere-terre-cuite); --mq-droite: var(--matiere-terre-cuite-fonce); --mq-bandeau: var(--matiere-terre-cuite-fonce); --mq-revetement: var(--matiere-joint); }
.mq-facade.mq-facade--panneaux { --mq-gauche: var(--matiere-fibres); --mq-droite: var(--matiere-fibres-fonce); --mq-bandeau: var(--matiere-fibres-fonce); --mq-revetement: var(--matiere-composite-fonce); }
.mq-facade.mq-facade--polycarbonate { --mq-gauche: var(--matiere-polycarbonate); --mq-droite: var(--matiere-polycarbonate-trait); --mq-bandeau: var(--matiere-polycarbonate-trait); --mq-revetement: var(--matiere-polycarbonate-trait); }
.mq-facade.mq-facade--vegetal { --mq-gauche: var(--matiere-vegetal); --mq-droite: var(--matiere-vegetal-fonce); --mq-bandeau: var(--matiere-vegetal-fonce); }
.mq-facade.mq-facade--textile { --mq-gauche: var(--matiere-textile); --mq-droite: var(--matiere-textile-trait); --mq-bandeau: var(--matiere-textile-trait); }
/* Le parement (lames, nervures, rangs, joints, canaux), un tracé par face, sous les fenêtres. */
.mq-revetement { fill: none; stroke: var(--mq-revetement, var(--matiere-trait)); stroke-width: 0.7; stroke-linecap: round; opacity: 0.85; pointer-events: none; }
.mq-revetement--nervures { stroke-width: 0.9; }

/* Les cadres des fenêtres. */
.mq-menuiserie .mq-vitre { stroke-width: 1.6; }
.mq-menuiserie--pvc .mq-vitre { stroke: var(--matiere-cadre-pvc); }
.mq-menuiserie--alu .mq-vitre { stroke: var(--matiere-cadre-alu); }
.mq-menuiserie--bois .mq-vitre { stroke: var(--matiere-cadre-bois); }
.mq-menuiserie--acier .mq-vitre { stroke: var(--matiere-cadre-acier); }
.mq-menuiserie--mixte .mq-vitre { stroke: color-mix(in srgb, var(--matiere-cadre-bois) 55%, var(--matiere-cadre-alu)); }

/* Le toit : les pans d'un toit en pente, la surface d'une terrasse. */
.mq-toit-surface { stroke: var(--mq-trait); stroke-width: 0.5; }
.mq-toit.mq-toit-teinte--tuiles .mq-toit-pan { fill: var(--matiere-tuile); }
.mq-toit.mq-toit-teinte--tuiles .mq-toit-pan--arriere { fill: var(--matiere-tuile-fonce); }
.mq-toit.mq-toit-teinte--ardoises .mq-toit-pan { fill: var(--matiere-ardoise); }
.mq-toit.mq-toit-teinte--ardoises .mq-toit-pan--arriere { fill: var(--matiere-ardoise-fonce); }
.mq-toit.mq-toit-teinte--shingle .mq-toit-pan { fill: var(--matiere-shingle); }
.mq-toit.mq-toit-teinte--shingle .mq-toit-pan--arriere { fill: var(--matiere-shingle-fonce); }
.mq-toit.mq-toit-teinte--bac .mq-toit-pan { fill: var(--matiere-acier); }
.mq-toit.mq-toit-teinte--bac .mq-toit-pan--arriere { fill: var(--matiere-acier-fonce); }
.mq-toit.mq-toit-teinte--zinc .mq-toit-pan { fill: var(--matiere-zinc); }
.mq-toit.mq-toit-teinte--zinc .mq-toit-pan--arriere { fill: var(--matiere-zinc-fonce); }
.mq-toit.mq-toit-teinte--fibres .mq-toit-pan { fill: var(--matiere-fibres); }
.mq-toit.mq-toit-teinte--fibres .mq-toit-pan--arriere { fill: var(--matiere-fibres-fonce); }
.mq-toit.mq-toit-teinte--textile .mq-toit-pan { fill: var(--matiere-textile); }
.mq-toit.mq-toit-teinte--textile .mq-toit-pan--arriere { fill: var(--matiere-textile-trait); }
.mq-toit-teinte--vegetal .mq-toit-surface { fill: var(--matiere-vegetal); }
.mq-toit-teinte--dalles .mq-toit-surface { fill: var(--matiere-dalle); }
.mq-toit-teinte--bitume .mq-toit-surface { fill: var(--matiere-bitume); }
.mq-toit-teinte--membrane .mq-toit-surface { fill: var(--matiere-membrane); }