/* ---- Design tokens ---------------------------------------------------- */
:root{
/* Palette DSDC Montréal (référence Notion) : crème + accents terreux, tout cerné de noir */
--ink:#000000; --muted:#000000; --rule:#000000;
--cream:#F2EEE4; --paper:#fff;
--sand:#D7B063; --orange:#D97A22; --red:#C43E42; --olive:#6C6F3F; --teal:#46747F;
--nav-h:60px; --logo-h:78px;
/* Type: Inter (web font, loaded in each page ) with system + Helvetica fallbacks */
--font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,'Helvetica Neue',Arial,sans-serif;
}
/* Standard logo: add class="logo" to any logo ![]()
. Width scales to keep aspect ratio.
--logo-h is the default height; because logos have different shapes, a wide logo and a
near-square logo look unbalanced at the same height. Override per logo for optical balance,
e.g. ![]()
. */
.logo{height:var(--logo-h);width:auto;max-width:100%;display:block;}
/* Corrections optiques par logo (auparavant en style="" dans index.html). */
.logo-nudge{transform:translateY(14px);}
.logo-tdq{transform:scale(2);transform-origin:left top;}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{font-family:var(--font-sans);color:var(--ink);background:var(--cream);overflow:hidden;}
.app{display:flex;flex-direction:column;height:100vh;width:100vw;}
/* ---- Top navigation --------------------------------------------------- */
.nav{display:flex;align-items:center;gap:30px;height:var(--nav-h);flex:0 0 auto;padding:0 26px;background:var(--cream);border-bottom:1.5px solid var(--ink);min-width:0;}
.brand{display:flex;align-items:center;gap:11px;font-weight:700;font-size:20px;letter-spacing:-.01em;white-space:nowrap;cursor:pointer;}
.brand:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:6px;}
.brand img{width:30px;height:30px;display:block;}
.nav-items{display:flex;gap:4px;min-width:0;}
.nav-item{appearance:none;border:0;background:transparent;font:inherit;font-size:15px;font-weight:600;color:var(--ink);padding:7px 14px;border-radius:8px;cursor:pointer;transition:background 120ms ease;white-space:nowrap;}
/* hover + current page share the destination page's colour tint.
Each button carries its own --accent (set below); one rule covers all. */
.nav-item:hover,.nav-item[aria-current="page"]{background:color-mix(in srgb,var(--accent) 10%,transparent);}
.nav-item:focus-visible{outline:2px solid var(--ink);outline-offset:1px;}
/* ---- Synchro (nav, discret) + crayons d'édition vers Google Sheets ---- */
.nav-sync{margin-left:auto;display:inline-flex;align-items:center;padding:6px;border-radius:8px;color:var(--muted);opacity:.55;transition:opacity 120ms ease,color 120ms ease;}
.nav-sync:hover,.nav-sync:focus-visible{opacity:1;color:var(--ink);}
.edit-pencil{display:inline-flex;align-items:center;vertical-align:middle;margin-left:8px;color:var(--muted);opacity:.45;transition:opacity 120ms ease,color 120ms ease;}
.edit-pencil:hover,.edit-pencil:focus-visible{opacity:1;color:var(--accent,var(--ink));}
/* single source of truth: each view AND its nav button share one --accent */
#nav-sante,#view-sante{--accent:#1f5fa8;}
#nav-ville,#view-ville{--accent:#d60303;}
#nav-tdq,#view-tdq{--accent:#2e7d32;}
#nav-conc,#view-conc{--accent:#6C6F3F;} /* olive */
#nav-cadre,#view-cadre{--accent:#46747F;} /* teal */
#nav-indic,#view-indic{--accent:#D97A22;} /* orange */
#nav-ressources,#view-ressources{--accent:#46747F;} /* teal */
#nav-reco,#view-reco{--accent:#C43E42;} /* rouge */
#nav-cartes,#view-cartes{--accent:#1f5fa8;}
#nav-gloss,#view-gloss{--accent:#000000;}
#view-deputes{--accent:#095797;} /* bleu Assemblée nationale ; chaque tracé porte ensuite son --accent de parti */
/* ---- View container --------------------------------------------------- */
.views{flex:1;min-height:0;position:relative;}
/* each view derives its page tint (--bg) from its own --accent: one colour to change */
.view{position:absolute;inset:0;display:none;--accent:#000000;--bg:var(--cream);}
.view.active{display:flex;}
/* ---- Two-pane layout (map + side panel) ------------------------------- */
.wrap{display:flex;height:100%;width:100%;background:var(--bg);}
.map-side{flex:0 0 66.666%;display:flex;flex-direction:column;min-width:0;border-right:1.5px solid var(--ink);background:var(--bg);}
.map-head{padding:18px 26px 2px;display:flex;align-items:center;gap:18px;}
.map-head h1{margin:0;font-size:46px;font-weight:700;letter-spacing:-.015em;}
/* titres longs (ex. l'outil d'appréciation) : on réduit plutôt que de déborder */
.map-head h1.t-long{font-size:clamp(22px,2.1vw,30px);line-height:1.12;}
/* Circonscriptions: the source PNG (1200x577) is mostly empty margin — the artwork
only occupies x 341-849, y 9-572. We crop those margins away in CSS (clip-path +
matching negative margins) rather than re-cutting the file, because the file is
re-downloaded from Notion by sync/builders/assets.py and any edit would be lost.
Cropped, the logo is a 92x83px block held entirely inside the head, so it can no
longer reach down into the map and collide with the legend.
--an-h is the VISIBLE height; --anf/--anw are the full uncropped box it implies. */
#view-deputes .map-head{height:98px;box-sizing:border-box;align-items:flex-start;overflow:hidden;padding:6px 26px 0;}
#view-deputes .map-head .logo{
--an-h:92px; /* 6px padding + 92px = the 98px head exactly, so nothing spills out */
--anf:calc(var(--an-h) / 0.9775); /* full height = visible / (1 - top% - bottom%) */
--anw:calc(var(--anf) * 2.0798); /* full width = full height * 1200/577 */
position:relative;z-index:2;
height:var(--anf);width:auto;max-width:none;
clip-path:inset(1.56% 29.17% 0.69% 28.42%);
margin:calc(var(--anf) * -0.0156) calc(var(--anw) * -0.2917)
calc(var(--anf) * -0.0069) calc(var(--anw) * -0.2842);
}
/* Legend overlays the top-left of the map so it no longer consumes vertical space.
This keeps every map view exactly the same size regardless of how many legend rows it has. */
.legend{position:absolute;top:25%;left:38px;transform:translateY(-50%);z-index:2;display:flex;flex-direction:column;gap:6px;font-size:13px;line-height:1.4;background:#fff;padding:10px 13px;border:1.5px solid var(--ink);border-radius:6px;box-shadow:0 1px 5px rgba(0,0,0,.08);pointer-events:none;}
.legend .sw{display:inline-block;width:16px;height:16px;margin-right:9px;border:1.5px solid var(--ink);border-radius:2px;vertical-align:-3px;}
/* opacity lives on the fill (color-mix), never the element, so the ink border stays solid */
.legend .sw.mid{background:color-mix(in srgb,var(--accent) 55%,transparent);}
.legend .sw.low{background:color-mix(in srgb,var(--accent) 20%,transparent);}
.map-stage{flex:1;position:relative;min-height:0;padding:0 10px 34px;}
svg{width:100%;height:100%;display:block;}
/* map regions: selected = full opacity */
.arr{fill:var(--accent);fill-opacity:.55;stroke:var(--ink);stroke-width:3;stroke-linejoin:round;stroke-linecap:round;cursor:pointer;transition:fill-opacity 140ms ease;}
.arr:hover{fill-opacity:.82;}
.arr.active{fill-opacity:1;}
.arr:focus{outline:none;} .arr:focus-visible{stroke-width:5;}
.suburb{fill:var(--accent);fill-opacity:.20;stroke:var(--ink);stroke-width:3;stroke-linejoin:round;stroke-linecap:round;cursor:pointer;transition:fill-opacity 140ms ease;}
.suburb:hover{fill-opacity:.42;}
.suburb.active{fill-opacity:.62;}
.suburb:focus{outline:none;} .suburb:focus-visible{stroke-width:5;}
/* Tables de quartier: secteurs sans table (faible opacité, inertes) + contour côte */
.tdq-notable{fill:var(--accent);fill-opacity:.20;stroke:none;pointer-events:none;}
.tdq-outline{fill:none;stroke:var(--ink);stroke-width:3;stroke-linejoin:round;stroke-linecap:round;pointer-events:none;}
/* ---- Side panel ------------------------------------------------------- */
/* Taille de texte de base commune à TOUS les panneaux de droite (Santé Québec,
Ville, Tables de quartier, Circonscriptions, Indicateurs) : 13.5px / 1.5.
Les règles ci-dessous n'ajustent que les titres et cas particuliers. */
.panel{flex:1 1 33.333%;background:var(--bg);overflow-y:auto;padding:26px 30px 36px;min-width:0;font-size:13.5px;line-height:1.5;}
.panel h2{margin:0 0 4px;font-size:23px;font-weight:700;letter-spacing:-.01em;}
.panel .intro{margin:0 0 14px;font-size:13.5px;line-height:1.55;color:var(--muted);}
/* Taille de texte des panneaux de droite : plancher à 12px, homogène d'un onglet à l'autre */
.panel .items li{font-size:13.5px;}
.panel .rule{height:1.5px;margin:14px 0;border:0;background:var(--ink);}
.block{margin:0 0 18px;}
.block-title{margin:0;font-size:15px;font-weight:700;line-height:1.3;}
.items{list-style:none;margin:8px 0 0;padding:0;}
.items li{position:relative;padding:3px 0 3px 18px;font-size:13.5px;line-height:1.5;}
.items li::before{content:"";position:absolute;left:2px;top:10px;width:6px;height:6px;border-radius:50%;background:var(--accent);}
/* Tables de quartier : organismes cliquables (puces déjà vertes via --accent du view). */
#tdq-panel .items a.tdq-org{color:inherit;text-decoration:none;cursor:pointer;transition:color 120ms ease;}
#tdq-panel .items a.tdq-org:hover,#tdq-panel .items a.tdq-org:focus-visible{color:var(--accent);text-decoration:underline;}
/* Députés : fiche du panneau (nom en évidence, parti avec pastille de couleur) */
#deputes-panel .depute-nom{margin:0 0 4px;font-size:23px;font-weight:700;letter-spacing:-.01em;}
.party-dot{display:inline-block;width:11px;height:11px;margin-right:8px;border-radius:50%;border:1.5px solid var(--ink);vertical-align:-1px;}
/* Party tallies already carry a coloured .party-dot — suppress the generic accent
bullet so each row shows one dot, not two. */
#deputes-panel .depute-counts li{padding-left:0;}
#deputes-panel .depute-counts li::before{content:none;}
#deputes-panel .items a.tdq-org{color:inherit;text-decoration:none;cursor:pointer;transition:color 120ms ease;}
#deputes-panel .items a.tdq-org:hover,#deputes-panel .items a.tdq-org:focus-visible{color:var(--accent);text-decoration:underline;}
/* Circonscriptions : aucune surcharge de .arr — la carte reprend exactement le
comportement des Tables de quartier (fill-opacity .55 / .82 au survol / 1 à la
sélection, contour d'épaisseur constante). */
/* deux puces colorées au parti, sous le nom du député ou de la députée */
#deputes-panel .depute-bullets{margin-top:10px;}
#deputes-panel .depute-bullets li{font-size:14px;padding-left:20px;}
#deputes-panel .depute-bullets li::before{width:8px;height:8px;top:8px;border:1.5px solid var(--ink);}
/* ---- Full-width views (glossary, stubs) ------------------------------- */
@media (max-width:820px){
.views{overflow:auto;} .view.active{position:static;}
.wrap{flex-direction:column;overflow:auto;} body{overflow:auto;}
/* Hauteur fixe de 62vh : une fois la légende repassée dans le flux (voir plus
bas), il ne restait que ~100px pour la carte. On laisse la colonne se
dimensionner à son contenu et on garantit un minimum à la scène. */
.map-side{flex:none;height:auto;border-right:0;border-bottom:1.5px solid var(--ink);}
.map-stage{min-height:46vh;}
.panel{flex:none;}
/* La barre de nav mesurait 1075px en dur : sous 820px elle poussait toute la
page de côté (704px de défilement horizontal à 375px) et un seul onglet
sur sept restait atteignable. Elle défile désormais horizontalement,
seule, sans entraîner le reste de la page. */
.app{width:100%;}
.nav{gap:14px;padding:0 14px;overflow:hidden;}
.nav-items{flex:1 1 auto;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-snap-type:x proximity;}
.nav-items::-webkit-scrollbar{display:none;}
.brand{flex:0 0 auto;font-size:17px;}
.nav-sync{flex:0 0 auto;margin-left:0;}
/* Cibles tactiles : 44px minimum (WCAG 2.1 AA, 2.5.5). */
.nav-item{min-height:44px;padding:10px 14px;scroll-snap-align:start;}
.nav-sync{min-width:44px;min-height:44px;justify-content:center;}
.map-pick,.indic-tab,.dim-switch button{min-height:44px;}
/* La légende, en position absolue, recouvrait la quasi-totalité de la carte
une fois celle-ci réduite (351x154px à 375px). Même traitement que
.soc-map-legend reçoit déjà plus bas. */
.legend{position:static;transform:none;margin:0 0 8px;}
}
/* ---- Glossaire : acronymes.html (synchronisée) en iframe ---- */
.gloss-frame{flex:1;width:100%;height:100%;border:0;display:block;}
/* ---- « Cartes » : un onglet, sélecteur de carte en eyebrow au-dessus du titre ---- */
#view-cartes{flex-direction:column;}
.map-views{flex:1;min-height:0;position:relative;}
.map-eyebrow{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:14px 26px 0;}
.map-pick{appearance:none;background:transparent;border:1.5px solid transparent;border-radius:7px;font:inherit;font-size:12.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--muted);padding:4px 10px;cursor:pointer;transition:color 120ms ease,border-color 120ms ease,background 120ms ease;}
.map-pick:hover{color:var(--ink);}
.map-pick[aria-current="page"]{border-color:var(--ink);color:var(--ink);}
.map-pick:focus-visible{outline:2px solid var(--ink);outline-offset:1px;}
/* the full-width stub view (Tables de quartier) keeps the eyebrow flush with its padding */
.full .map-eyebrow{padding:0 0 6px;}
/* ---- Shared map search: compact, pinned to the top-right of the eyebrow ---- */
.map-search{position:relative;margin-left:auto;}
/* même gabarit que la boîte de recherche de Concertations (.conc-search input) */
.map-search input{width:230px;max-width:46vw;padding:7px 12px;border:1.5px solid var(--ink);border-radius:8px;font:inherit;font-size:10.5pt;color:var(--ink);background:#fff;outline:none;transition:border-color 120ms ease;}
.map-search input:focus{border-color:var(--accent);}
.map-results{position:absolute;top:40px;right:0;left:auto;width:320px;max-width:78vw;background:#fff;border:1px solid var(--rule);border-radius:8px;max-height:320px;overflow-y:auto;display:none;z-index:30;box-shadow:0 8px 20px rgba(0,0,0,.10);}
.map-results.open{display:block;}
.map-results .mr-item{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 13px;font-size:13px;cursor:pointer;border-bottom:1px solid var(--rule);}
.map-results .mr-item:last-child{border-bottom:none;}
.map-results .mr-item:hover{background:color-mix(in srgb,var(--accent) 12%,transparent);}
.map-results .mr-item.mr-none{color:var(--muted);cursor:default;}
.map-results .mr-item.mr-none:hover{background:transparent;}
.map-results .mr-g{flex:0 1 auto;font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45%;text-align:right;}
/* ---- Indicateurs : choroplèthe par territoire de table de quartier ---- */
/* Les couleurs de classe sont posées en fill inline par indicateurs.js ;
on neutralise donc l'opacité générique des .arr pour garder des teintes franches. */
#view-indic .arr{fill-opacity:.92;}
#view-indic .arr:hover{fill-opacity:1;}
#view-indic .arr.active{fill-opacity:1;stroke-width:5;}
#view-indic .arr.nodata{fill:var(--cream);cursor:default;}
#view-indic .tdq-notable{fill:#e7e1d3;fill-opacity:.6;}
/* légende : swatches colorés en inline, on retire la teinte accent générique */
.indic-legend .sw{background:#fff;}
/* barres de distribution par quintile dans le panneau */
.iq-title{margin:16px 0 6px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;}
.iq-row{display:flex;align-items:center;gap:8px;font-size:13px;margin:3px 0;}
.iq-row .lab{flex:0 0 26px;color:var(--muted);font-weight:600;}
.iq-bar{flex:1;height:13px;background:#e7e1d3;border:1px solid var(--ink);border-radius:3px;overflow:hidden;}
.iq-bar span{display:block;height:100%;}
.iq-val{flex:0 0 46px;text-align:right;font-weight:600;font-variant-numeric:tabular-nums;}
.iq-note{margin-top:14px;font-size:12px;line-height:1.5;color:var(--muted);}
/* rangée de contrôles sous le titre : découpage (SQ/VdM/TQ) puis dimension */
.indic-controls{display:flex;align-items:center;gap:12px;padding:8px 26px 0;flex-wrap:wrap;}
/* barre coulissante entre la carte et le panneau d'information */
.split-handle{flex:0 0 9px;margin:0 -5px 0 -4px;cursor:col-resize;background:transparent;position:relative;z-index:5;touch-action:none;}
.split-handle::after{content:"";position:absolute;inset:0 3px;border-radius:3px;background:transparent;transition:background 120ms ease;}
.split-handle:hover::after,.split-handle.dragging::after{background:color-mix(in srgb,var(--accent) 45%,transparent);}
@media (max-width:820px){.split-handle{display:none;}}
/* Variante « grille » : poignée superposée au filet des mises en page en grille
(Concertations, Cadre). Positionnée en absolu par app.js, elle flotte au-dessus
du filet existant sans réserver d'espace — donc aucun décalage visuel. */
.split-handle--overlay{position:fixed;width:12px;margin:0 0 0 -6px;flex:none;cursor:col-resize;z-index:20;touch-action:none;background:transparent;}
.split-handle--overlay::after{content:"";position:absolute;inset:0 4px;border-radius:3px;background:transparent;transition:background 120ms ease;}
.split-handle--overlay:hover::after,.split-handle--overlay.dragging::after{background:color-mix(in srgb,var(--accent) 45%,transparent);}
@media (max-width:900px){.split-handle--overlay{display:none;}}
/* sélecteur de dimension (Matérielle / Sociale) dans l'en-tête de carte */
.dim-switch{display:inline-flex;border:1.5px solid var(--ink);border-radius:8px;overflow:hidden;}
.dim-switch:empty{display:none;}
.dim-switch button{appearance:none;border:0;background:#fff;font:inherit;font-size:12.5px;font-weight:700;padding:6px 15px;cursor:pointer;color:var(--muted);transition:background 120ms ease,color 120ms ease;}
.dim-switch button+button{border-left:1.5px solid var(--ink);}
.dim-switch button:hover{color:var(--ink);}
.dim-switch button[aria-current="true"]{background:var(--ink);color:var(--paper);}
/* Onglet teinte (--dim-c) : texte NOIR. Le blanc sur orange #D97A22 ne donnait que
3,11:1, sous le seuil AA de 4,5:1 pour ce corps de 12,5px. Noir sur orange : 6,8:1. */
.dim-switch button[aria-current="true"].dim-tinted{background:var(--dim-c);color:var(--ink);}
.dim-switch button:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;}
/* mini-graphique d'évolution (panneau Indicateurs) */
.trend-svg{width:100%;height:auto;display:block;margin:2px 0 4px;}
.trend-svg text{font-family:var(--font-sans);}
.trend-svg .tc-val{font-size:10px;font-weight:700;}
.trend-svg .tc-lab{font-size:10.5px;font-weight:700;}
.trend-svg .tc-axis{font-size:10px;fill:var(--muted);}
.trend-svg .tc-ref{font-size:9.5px;fill:var(--ink);}
/* en-tête de fiche sans boîtes : valeur en évidence dans la phrase */
.indic-lead{margin:12px 0 2px;font-size:13.5px;line-height:1.55;color:var(--ink);}
.indic-lead .indic-big{font-size:24px;font-weight:700;letter-spacing:-.01em;line-height:1;vertical-align:-1px;margin-right:2px;}
.indic-lead .indic-ref{color:var(--muted);white-space:nowrap;}
/* menu déroulant d'indicateurs */
.indic-select{appearance:none;-webkit-appearance:none;border:1.5px solid var(--ink);border-radius:8px;background:#fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23212121' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;font:inherit;font-size:13px;font-weight:700;color:var(--ink);padding:6px 34px 6px 13px;cursor:pointer;max-width:100%;}
.indic-select:focus-visible{outline:2px solid var(--ink);outline-offset:1px;}
.dim-switch button[disabled]{color:var(--rule);cursor:not-allowed;background:#fff;}
.dim-switch button[disabled]:hover{color:var(--rule);}
/* scène graphique (indicateurs régionaux : le graphique remplace la carte) */
.indic-graph{position:absolute;inset:0 10px 34px;display:flex;align-items:center;justify-content:center;overflow:auto;}
.indic-graph[hidden]{display:none;}
.indic-graph>svg.big-line{width:min(100%,820px);height:auto;max-height:100%;}
.big-line text{font-family:var(--font-sans);}
.big-line .bl-val{font-size:15px;font-weight:700;}
.big-line .bl-lab{font-size:16px;font-weight:700;}
.big-line .bl-axis{font-size:14px;fill:var(--muted);}
.big-line .bl-ref{font-size:12px;fill:var(--ink);}
.big-line .bl-note{font-size:12.5px;fill:var(--muted);}
/* mosaïque IEMV : contours de territoires cliquables au-dessus des AD */
.indic-overlay{fill:#000;fill-opacity:0;stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round;cursor:pointer;transition:fill-opacity 140ms ease;}
.indic-overlay:hover{fill-opacity:.10;}
.indic-overlay.active{stroke-width:5;fill-opacity:0;}
.indic-overlay:focus{outline:none;} .indic-overlay:focus-visible{stroke-width:5;}
/* étiquettes longues dans les rangées de barres */
.iq-row .lab.lab-wide{flex:0 0 168px;font-weight:600;color:var(--ink);font-size:12px;line-height:1.25;}
/* grille des 12 résultats transitoires */
/* Organisme atteint via la recherche : surlignage temporaire dans le panneau TDQ */
.member-hit{animation:member-hit 2.4s ease;border-radius:4px;}
@keyframes member-hit{
0%,55%{background:color-mix(in srgb,var(--accent) 24%,transparent);}
100%{background:transparent;}
}
/* ---- Indicateurs : bascule d'indicateur (Défavorisation, Participation) ---- */
.indic-optswitch{flex-wrap:wrap;}
/* Défavorisation : panneau « les 4 indicateurs » */
.dv4{margin:4px 0 6px;}
.dv4-row{display:flex;align-items:center;gap:9px;padding:5px 0;border-bottom:1px solid var(--ink);}
.dv4-row:last-child{border-bottom:0;}
.dv4-sw{flex:0 0 auto;width:13px;height:13px;border:1.5px solid var(--ink);border-radius:3px;}
.dv4-lab{flex:1;font-size:13px;line-height:1.3;}
.dv4-val{flex:0 0 auto;font-weight:700;font-variant-numeric:tabular-nums;font-size:14px;}
/* Équité : boîte-sélecteur verticale « comme la légende » (7 options),
superposée en haut à droite de la carte pour ne pas réduire sa taille. */
.map-stage .indic-boxselect{position:absolute;top:16px;right:16px;z-index:3;max-width:236px;box-shadow:0 1px 6px rgba(0,0,0,.12);}
.indic-boxselect{display:flex;flex-direction:column;gap:2px;border:1.5px solid var(--ink);border-radius:8px;padding:7px;background:var(--paper);}
.indic-boxselect .bs-title{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;padding:2px 8px 6px;}
.indic-boxselect button{appearance:none;display:flex;align-items:center;gap:9px;text-align:left;font:inherit;font-size:12.5px;
font-weight:700;color:var(--ink);background:transparent;border:0;border-radius:6px;padding:6px 10px;cursor:pointer;transition:background 120ms ease;}
.indic-boxselect button .bs-sw{width:13px;height:13px;border:1.5px solid var(--ink);border-radius:3px;background:var(--paper);flex:0 0 auto;}
.indic-boxselect button:hover{background:color-mix(in srgb,#46747F 12%,transparent);}
.indic-boxselect button[aria-current="true"]{background:#46747F;color:#fff;}
.indic-boxselect button[aria-current="true"] .bs-sw{background:#fff;}
.iq-row.iq-on{background:color-mix(in srgb,#46747F 12%,transparent);border-radius:4px;}
/* Pages défilantes (Social, Alimentaire) rendues dans la zone graphique */
.indic-graph.indic-page{display:block;align-items:stretch;justify-content:flex-start;padding:0;}
/* alignées sur le bord gauche (sous le grand titre), pas centrées */
.soc-page{max-width:760px;margin:0;padding:6px 8px 40px 16px;}
.soc-hero{padding:8px 0 22px;border-bottom:2px solid var(--ink);margin-bottom:8px;}
.soc-hero h2{margin:0;font-size:clamp(26px,4vw,40px);font-weight:800;letter-spacing:-.02em;line-height:1.05;}
.soc-sec{display:grid;grid-template-columns:120px 1fr;gap:22px;align-items:start;padding:26px 0;border-bottom:1.5px solid var(--ink);}
.soc-sec:last-child{border-bottom:0;}
.soc-num{font-size:44px;font-weight:800;letter-spacing:-.03em;line-height:1;}
.soc-body h3{margin:0 0 8px;font-size:19px;font-weight:800;line-height:1.15;}
.soc-body p{margin:0 0 12px;font-size:14.5px;line-height:1.55;}
.soc-chart{margin:8px 0 10px;}
.soc-src{font-size:11.5px;line-height:1.5;}
.soc-src a{color:var(--ink);}
@media (max-width:640px){.soc-sec{grid-template-columns:1fr;gap:8px;}}
/* ---- Indicateurs : onglet « Outil » (12 RT en vertical, vert + jaune) ---- */
.outil-page{max-width:720px;margin:0;padding:6px 8px 44px 16px;}
.outil-fn{margin:0 0 22px;}
.outil-fn:first-child h3{margin-top:4px;}
.outil-fn h3{margin:16px 0 2px;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--olive);}
.outil-fdescr{margin:0 0 12px;font-size:13px;line-height:1.45;}
.rt-block{margin:0 0 14px;}
.rt-green{border:1.5px solid var(--ink);border-radius:10px 10px 0 0;background:color-mix(in srgb,var(--olive) 22%,var(--paper));padding:13px 15px;}
.rt-block:has(.rt-yellow) .rt-green{border-bottom:0;}
.rt-block:not(:has(.rt-yellow)) .rt-green{border-radius:10px;}
.rt-green .rt-n{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.05em;border:1.5px solid var(--ink);border-radius:999px;padding:2px 9px;background:var(--paper);margin-bottom:7px;}
.rt-green .rt-t{margin:0 0 5px;font-size:15.5px;font-weight:800;line-height:1.2;}
.rt-green .rt-d{margin:0;font-size:13px;line-height:1.5;}
.rt-yellow{border:1.5px solid var(--ink);border-top:1.5px dashed var(--ink);border-radius:0 0 10px 10px;background:color-mix(in srgb,var(--sand) 34%,var(--paper));padding:11px 15px;}
.rt-yellow .rt-rev{display:inline-block;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;border:1.5px solid var(--ink);border-radius:999px;padding:2px 8px;background:var(--sand);margin-bottom:6px;}
.rt-yellow p{margin:0;font-size:12.5px;line-height:1.5;}
/* ---- Participation : barres de comparaison entre paliers ---- */
.part-compare{margin:8px 0 14px;}
.pc-row{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--ink);}
.pc-row:last-child{border-bottom:0;}
.pc-lab{flex:0 0 46%;font-size:13px;line-height:1.3;}
.pc-bar{flex:1;height:16px;background:#e7e1d3;border:1.5px solid var(--ink);border-radius:4px;overflow:hidden;}
.pc-bar span{display:block;height:100%;}
.pc-val{flex:0 0 auto;font-weight:700;font-variant-numeric:tabular-nums;font-size:14px;}
@media (max-width:640px){.pc-lab{flex-basis:38%;}}
/* ---- Social : barres empilées de satisfaction ---- */
.sat-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:6px 0 14px;font-size:12px;}
.sat-legend span{display:inline-flex;align-items:center;gap:6px;}
.sat-sw{width:13px;height:13px;border:1.5px solid var(--ink);border-radius:3px;flex:0 0 auto;}
.sat-row{display:flex;align-items:center;gap:10px;margin:6px 0;}
.sat-lab{flex:0 0 132px;font-size:12.5px;line-height:1.2;}
.sat-stack{position:relative;flex:1;display:flex;height:22px;border:1.5px solid var(--ink);border-radius:5px;overflow:hidden;}
.sat-seg{display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;color:#fff;min-width:0;overflow:hidden;}
.sat-seg:nth-child(2){color:#000;}
/* repère pointillé : valeur de référence montréalaise sur une barre de territoire */
.sat-mark{position:absolute;top:-2px;bottom:-2px;width:0;border-left:2px dashed var(--ink);pointer-events:none;}
.sat-mark-key{display:inline-block;width:0;height:11px;border-left:2px dashed var(--ink);vertical-align:-2px;margin-right:7px;}
@media (max-width:640px){.sat-lab{flex-basis:92px;}}
/* ---- Social : carte RTS (occupe la scène, comme les autres cartes) ---- */
.soc-map-wrap{position:relative;width:100%;height:100%;}
.soc-map{width:100%;height:100%;display:block;}
.soc-rts{stroke:var(--ink);stroke-width:3;stroke-linejoin:round;cursor:pointer;transition:filter 140ms ease;}
.soc-rts:hover{filter:brightness(1.08);}
.soc-rts.active{stroke-width:6;}
.soc-rts:focus{outline:none;}
.soc-rts:focus-visible{stroke-width:6;stroke-dasharray:9 5;}
/* légende : même boîte que celle des autres cartes */
.soc-map-legend{position:absolute;top:25%;left:38px;transform:translateY(-50%);z-index:2;display:flex;flex-direction:column;gap:6px;font-size:13px;line-height:1.4;background:#fff;padding:10px 13px;border:1.5px solid var(--ink);border-radius:6px;box-shadow:0 1px 5px rgba(0,0,0,.08);pointer-events:none;}
.soc-map-legend .sml-t{font-weight:700;}
.soc-map-legend .sml-n{color:var(--muted);font-size:12px;}
.soc-map-legend .sw{display:inline-block;width:16px;height:16px;margin-right:9px;border:1.5px solid var(--ink);border-radius:2px;vertical-align:-3px;}
/* barres empilées dans le panneau étroit */
.panel .sat-lab{flex:0 0 92px;font-size:11.5px;}
.panel .sat-row{gap:8px;}
.panel .sat-stack{height:20px;}
.panel .sat-legend{font-size:11.5px;gap:5px 12px;}
@media (max-width:640px){.soc-map-legend{position:static;transform:none;margin-bottom:8px;}}
/* ---- Pages défilantes : révélation au défilement + emphase Alimentaire ---- */
.soc-sec.reveal{opacity:0;transform:translateY(20px);transition:opacity .55s ease,transform .55s ease;}
.soc-sec.reveal.reveal-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.soc-sec.reveal{opacity:1;transform:none;transition:none;}}
.alim-big .alim-figure{font-size:clamp(56px,8vw,92px);font-weight:800;letter-spacing:-.04em;line-height:.9;}
.alim-big .soc-body h3{font-size:22px;}