/* DossierVilleDeLaval — feuille de style commune à toutes les pages (reprise de * DossierVilleDeLongueuil, elle-même reprise de Québec et de Montréal ; les blocs propres à * Laval sont à la fin, sous « LAVAL »). * * DEUX THÈMES, via l'attribut data-theme sur : "clair" (défaut) et "sombre". * Le thème est posé avant le premier rendu par un petit script en de chaque page : * choix explicite mémorisé d'abord, préférence du système ensuite. La bascule (icône de * lune / soleil) vit dans la barre de navigation. * * Les couleurs de pastilles thématiques sont ici et NON dans les données : changer une * teinte ne doit pas obliger à relancer un scraper. Même règle pour la carte des districts : * la couleur d'un parti est décidée ici, pas dans data/districts.json. */ /* ============================================================ THÈME CLAIR (défaut) ============================================================ */ :root, :root[data-theme="clair"] { --fond: #FFFFFF; --fond-2: #F4F6F8; --carte: #FFFFFF; --encre: #16191D; --doux: #5B6570; --ligne: #DDE2E7; --ligne-forte: #C2CAD2; --accent: #0B8A4B; --accent-fond: #E6F6EC; --accent-encre: #076338; --vedette: #F5B301; --pour: #0B8A4B; --contre: #D23B2C; --contre-fond: #FDECEA; --entete-fond: #FFFFFF; --entete-encre: #16191D; --entete-doux: #5B6570; --entete-ligne: #DDE2E7; --rayon: 6px; --ombre: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 12px rgba(16, 24, 40, .05); --ombre-forte: 0 2px 4px rgba(16, 24, 40, .08), 0 10px 24px rgba(16, 24, 40, .09); --bordure-carte: 1px solid var(--ligne); /* Le vert est réservé à l'accent du site (liens, boutons, résumés IA). Aucun sujet ne le reprend, sauf Environnement où le vert veut dire quelque chose — et il ne compte que 16 décisions, donc la confusion reste rare. Trois familles assumées plutôt que quinze teintes qu'on ne distinguerait pas : l'administratif en ardoise, l'argent et la propriété en chaud, le reste distinct. */ --t-urbanisme: #7C3AED; /* violet */ --t-subventions: #DB2777; /* rose — surtout PAS le vert d'accent */ --t-transport: #1D4ED8; /* bleu */ --t-contrats: #EA580C; /* orange */ --t-securite: #DC2626; /* rouge */ --t-loisirs: #0891B2; /* cyan */ --t-culture: #A21CAF; /* fuchsia */ --t-economie: #4338CA; /* indigo */ --t-rh: #65A30D; /* lime */ --t-environnement: #059669; /* émeraude */ --t-finances: #CA8A04; /* or \ */ --t-immobilier: #92400E; /* brun / famille « argent et propriété » */ --t-procedure: #64748B; /* ardoise \ */ --t-travaux: #0369A1; /* bleu acier (Martin, 11 nov. 2026 : le gris était laid) */ --t-administration: #94A3B8; /* ardoise claire / */ --t-honneurs: #9F1239; /* lie-de-vin — les motions cérémonielles */ --t-social: #0D9488; /* sarcelle — logement et services sociaux */ } /* ============================================================ THÈME SOMBRE ============================================================ */ :root[data-theme="sombre"] { --fond: #101419; --fond-2: #161B22; --carte: #1A2029; --encre: #E9EDF2; --doux: #96A1AE; --ligne: #2A323C; --ligne-forte: #3A4450; --accent: #3DDC84; --accent-fond: #163326; --accent-encre: #7EF0AC; --vedette: #FFCF4D; --pour: #3DDC84; --contre: #FF6B5B; --contre-fond: #3A1F1C; --entete-fond: #0B0E12; --entete-encre: #F2F5F8; --entete-doux: #8E9AA8; --entete-ligne: #242C35; --rayon: 6px; --ombre: 0 1px 2px rgba(0, 0, 0, .5); --ombre-forte: 0 6px 22px rgba(0, 0, 0, .55); --bordure-carte: 1px solid var(--ligne); --t-urbanisme: #A78BFA; --t-subventions: #F472B6; /* rose — le vert néon reste l'accent du site */ --t-transport: #60A5FA; --t-contrats: #FB923C; --t-securite: #FB7185; --t-loisirs: #22D3EE; --t-culture: #E879F9; --t-economie: #818CF8; --t-rh: #A3E635; --t-environnement: #2DD4BF; --t-finances: #FBBF24; --t-immobilier: #D9A066; --t-procedure: #8B96A3; --t-travaux: #38BDF8; --t-administration: #B0BCC9; --t-honneurs: #FDA4AF; --t-social: #5EEAD4; } :root[data-theme="sombre"] .puce.theme { color: #101419; } :root[data-theme="sombre"] .elu img { filter: brightness(.92); } /* ============================================================ BASE ============================================================ */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--fond); color: var(--encre); font-family: 'Archivo', system-ui, -apple-system, sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } ::selection { background: var(--accent); color: #fff; } .contenu { max-width: 1120px; margin: 0 auto; padding: 0 26px 90px; } /* ---------- EN-TÊTE ---------- */ header { background: var(--entete-fond); border-bottom: 1px solid var(--entete-ligne); } .titre-ligne { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 26px 0 2px; } .titre-ligne a { text-decoration: none; color: inherit; } h1, .logo-titre { font-size: 27px; margin: 0; font-weight: 800; letter-spacing: -0.025em; color: var(--entete-encre); } .marque { color: var(--accent); } /* Étiquette « Prototype » à côté du logo — à retirer le jour où le site est considéré comme définitif. */ .prototype { display: inline-block; align-self: center; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #16191D; background: var(--vedette); padding: 3px 9px; border-radius: 999px; line-height: 1.5; } .sous-titre { color: var(--entete-doux); margin: 6px 0 18px; font-size: 14.5px; max-width: 66ch; } nav { display: flex; gap: 3px; flex-wrap: wrap; } nav a { font-size: 14px; font-weight: 600; text-decoration: none; color: var(--entete-doux); padding: 9px 14px; border-radius: var(--rayon) var(--rayon) 0 0; border-bottom: 3px solid transparent; } nav a:hover { color: var(--entete-encre); } nav a[aria-current="page"] { color: var(--entete-encre); border-bottom-color: var(--accent); font-weight: 700; } /* Les outils à droite du menu : Mes dossiers et Abonnement (ajoutés par /commun/abonnes.js), la taille du texte et le thème. Toujours groupés, pour qu'ils passent ensemble à la ligne. */ nav .outils { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } nav .outils .taille-texte { margin-left: 0; } /* Le menu sur deux lignes centrées, à toutes les largeurs : les onglets, puis les outils. */ nav { justify-content: center; } nav .outils { flex-basis: 100%; justify-content: center; margin-left: 0; padding: 4px 0 10px; } /* Cellulaire : l'en-tête ne doit pas repousser le contenu d'un écran entier. Le sous-titre ne reste que sur l'accueil, les onglets se resserrent, et les outils prennent leur ligne. */ @media (max-width: 620px) { .titre-ligne { padding-top: 16px; gap: 14px 8px; } h1, .logo-titre { font-size: 21px; } .titre-ligne > a:first-child::after { margin-left: 8px; font-size: 21px; } body:not([data-page="accueil"]) .sous-titre { display: none; } body:not([data-page="accueil"]) .titre-ligne { padding-bottom: 10px; } nav { gap: 0; } nav a { padding: 8px 9px; font-size: 13.5px; } .contenu { padding-left: 18px; padding-right: 18px; } nav .outils { flex-basis: 100%; flex-wrap: nowrap; justify-content: center; gap: 6px; padding: 6px 0 10px; } nav .outils .bascule-theme { width: 34px; height: 34px; } nav .outils .ab-lien-abonnement { padding: 5px 2px; } #texte-pct { display: none; } /* Rien ne dépasse de l'écran. Garde-fou hérité des autres volets, où un menu déroulant aux options très longues et une pastille d'instance qui refusait de se couper élargissaient la page, qui se mettait à glisser de côté. À Laval les options sont courtes, mais une pastille de district (« 13 – L'Abord-à-Plouffe ») ou un montant double suffiraient à rejouer la même scène. */ select { max-width: 100%; } .puce { max-width: 100%; white-space: normal; } } /* ---------- TITRES ---------- */ /* h1.page : le titre de chaque page intérieure depuis le 27 sept. 2026 (le logo n'est plus un

). */ h2.page, h1.page { font-size: 30px; margin: 36px 0 8px; font-weight: 800; letter-spacing: -0.028em; line-height: 1.15; } h2.section { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--doux); font-weight: 700; margin: 34px 0 12px; } p.chapeau { color: var(--doux); margin: 0 0 6px; max-width: none; font-size: 15.5px; } /* pleine largeur, comme Lévis (Martin, 9 nov. 2026) */ /* ---------- AVIS ---------- */ .avis { background: var(--accent-fond); border: 1px solid transparent; border-left: 4px solid var(--accent); border-radius: var(--rayon); padding: 14px 18px; margin: 22px 0; font-size: 14.5px; color: var(--encre); } .avis strong { color: var(--accent-encre); font-weight: 700; } :root[data-theme="sombre"] .avis strong { color: var(--accent); } /* ---------- OUTILS ---------- */ .barre-outils { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin: 24px 0 10px; } input[type="search"], select { font: inherit; font-size: 14.5px; padding: 9px 13px; border: 1px solid var(--ligne-forte); background: var(--carte); color: var(--encre); border-radius: var(--rayon); /* Un select prend par défaut la largeur de sa plus longue option, et sur les autres volets une option à rallonge suffisait à faire déborder l'écran. À Laval, les sujets restent courts (« Travaux et infrastructures (294) »), mais un thème ajouté plus tard rejouerait la scène. Le menu déroulant, lui, s'ouvre à sa vraie largeur : on ne perd rien à borner la boîte fermée. */ max-width: 100%; text-overflow: ellipsis; } input[type="search"]:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } input[type="search"] { flex: 1 1 260px; min-width: 200px; } /* display:flex l'emporte sur le display:none que le navigateur donne à [hidden] : sans cette ligne, masquer la case avec l'attribut hidden n'a aucun effet. */ .case[hidden] { display: none; } .case { font-size: 14px; color: var(--doux); display: flex; align-items: center; gap: 7px; white-space: nowrap; border: 1px solid var(--ligne-forte); background: var(--carte); padding: 8px 13px; border-radius: var(--rayon); } .bouton-lien { font: inherit; font-size: 14px; font-weight: 600; background: var(--carte); color: var(--accent); border: 1px solid var(--ligne-forte); border-radius: var(--rayon); padding: 9px 15px; cursor: pointer; } .bouton-lien:hover { border-color: var(--accent); background: var(--accent-fond); } .compte { color: var(--doux); font-size: 13.5px; margin: 8px 0 18px; } /* ---------- FICHES ---------- */ .carte { background: var(--carte); border: var(--bordure-carte); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 16px 18px; margin-bottom: 12px; } .meta { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; font-size: 12.5px; color: var(--doux); margin-bottom: 9px; } .puce { font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em; padding: 3px 9px; border-radius: 100px; background: var(--fond-2); color: var(--doux); white-space: nowrap; /* « Direction de la culture_des sports… » ne tient pas sur un téléphone, et les soulignés empêchent toute coupure naturelle : sur petit écran la pastille passe à la ligne. */ max-width: 100%; overflow-wrap: anywhere; } @media (max-width: 700px) { .puce { white-space: normal; } } .puce.num { font-family: ui-monospace, Consolas, monospace; font-size: 11px; background: var(--fond-2); color: var(--encre); } .puce.theme { color: #fff; font-weight: 700; } .puce.montant { background: var(--accent-fond); color: var(--accent-encre); font-weight: 700; } :root[data-theme="sombre"] .puce.montant { color: var(--accent); } .puce.procedural { background: var(--fond-2); color: var(--doux); } .puce.neuf { background: var(--vedette); color: #16191D; font-weight: 700; } .puce.genre-decision { background: var(--accent); color: #fff; font-weight: 700; } .puce.genre-vote { background: var(--t-transport); color: #fff; font-weight: 700; } .puce.reconstituee { background: var(--vedette); color: #16191D; font-weight: 700; } /* Les 15 sujets — la couleur vit ici, pas dans les données. */ .t-procedure { background: var(--t-procedure); } .t-urbanisme { background: var(--t-urbanisme); } .t-transport { background: var(--t-transport); } .t-immobilier { background: var(--t-immobilier); } .t-subventions { background: var(--t-subventions); } .t-contrats { background: var(--t-contrats); } .t-finances { background: var(--t-finances); } .t-rh { background: var(--t-rh); } .t-environnement { background: var(--t-environnement); } .t-culture { background: var(--t-culture); } .t-loisirs { background: var(--t-loisirs); } .t-securite { background: var(--t-securite); } .t-economie { background: var(--t-economie); } .t-travaux { background: var(--t-travaux); } .t-administration { background: var(--t-administration); } .t-honneurs { background: var(--t-honneurs); } .t-social { background: var(--t-social); } .objet { margin: 0 0 8px; font-size: 16px; line-height: 1.5; font-weight: 500; } a { color: var(--accent); text-underline-offset: 2px; } a:hover { color: var(--accent-encre); } :root[data-theme="sombre"] a:hover { color: var(--accent-encre); } .lien-pdf { font-size: 13.5px; font-weight: 600; } /* ---------- FICHES REPLIABLES ---------- */ .pliante > summary { cursor: pointer; list-style: none; display: block; position: relative; padding-right: 30px; } .pliante > summary::-webkit-details-marker { display: none; } .pliante > summary::after { content: '+'; position: absolute; right: 2px; top: -2px; font-size: 21px; font-weight: 400; line-height: 1; color: var(--doux); } .pliante[open] > summary::after { content: '\2212'; } .pliante:hover { box-shadow: var(--ombre-forte); } .pliante > summary:hover .objet { color: var(--accent); } .pliante > summary .objet { margin-bottom: 0; } .pliante > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--rayon); } .pliante > .corps { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--ligne); } /* ---------- VOTES ---------- */ .resultat { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 100px; } .r-majorite, .r-unanimite { background: var(--accent-fond); color: var(--accent-encre); } :root[data-theme="sombre"] .r-majorite, :root[data-theme="sombre"] .r-unanimite { color: var(--accent); } .r-division, .r-rejetee { background: var(--contre-fond); color: var(--contre); } .colonnes-vote { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 4px; } @media (max-width: 620px) { .colonnes-vote { grid-template-columns: 1fr; } } .colonne-vote { background: var(--fond-2); border-radius: var(--rayon); padding: 12px 14px; } .colonne-vote h4 { margin: 0 0 9px; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; } .colonne-vote.pour h4 { color: var(--pour); } .colonne-vote.contre h4 { color: var(--contre); } .noms { display: flex; gap: 6px; flex-wrap: wrap; } .nom { font-size: 13px; padding: 3px 10px; border-radius: 100px; background: var(--carte); border: 1px solid var(--ligne); } .colonne-vote.contre .nom { background: var(--contre-fond); border-color: transparent; color: var(--contre); } .vide { color: var(--doux); font-size: 13px; font-style: italic; } .drapeau { background: var(--contre-fond); border-left: 4px solid var(--contre); border-radius: var(--rayon); padding: 10px 14px; margin-top: 12px; font-size: 13.5px; color: var(--encre); } /* Un drapeau porte parfois plusieurs réserves (les anomalies du jeu des présences) : une liste, et non une phrase à rallonge. */ .drapeau ul { margin: 6px 0 0; padding-left: 20px; } .drapeau li { margin-bottom: 4px; } details { margin-top: 10px; font-size: 13.5px; } details summary { cursor: pointer; color: var(--doux); } details p { background: var(--fond-2); border-radius: var(--rayon); padding: 12px 14px; color: var(--encre); margin: 8px 0 0; } /* ---------- RÉSUMÉS IA ---------- */ .resume { background: var(--accent-fond); border-radius: var(--rayon); padding: 13px 16px; margin: 0 0 12px; } .resume-entete { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--accent-encre); font-weight: 700; margin-bottom: 9px; } :root[data-theme="sombre"] .resume-entete { color: var(--accent); } .resume ul { margin: 0; padding-left: 19px; } /* Un résumé peut contenir un « mot » sans espace ni trait d'union où couper : « ruelle Cardenon (Cardinal/Briand/Denonville/Hadley) » élargissait la page à 381 px sur un téléphone, et toute la page glissait de côté (Montréal, 19 sept. 2026). On coupe au besoin, n’importe où. */ .resume li { margin-bottom: 6px; font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; } .resume li:last-child { margin-bottom: 0; } /* ---------- ÉLUS ---------- */ .grille-elus { display: grid; grid-template-columns: repeat(auto-fill, minmax(275px, 1fr)); gap: 12px; } .elu { display: flex; gap: 14px; } .elu img { width: 62px; height: 86px; object-fit: cover; border-radius: var(--rayon); background: var(--fond-2); flex: none; } .elu h3 { margin: 0 0 3px; font-size: 17px; font-weight: 700; letter-spacing: -0.015em; } .elu .district { font-size: 13.5px; color: var(--doux); margin: 0 0 8px; } .elu.choisi { box-shadow: 0 0 0 2px var(--accent), var(--ombre-forte); } /* ---------- TABLEAUX ---------- */ table { border-collapse: collapse; width: 100%; font-size: 14.5px; background: var(--carte); border: var(--bordure-carte); border-radius: var(--rayon); overflow: hidden; } th, td { text-align: left; padding: 10px 13px; border-bottom: 1px solid var(--ligne); } tr:last-child td { border-bottom: none; } th { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--doux); font-weight: 700; background: var(--fond-2); } td.n { font-variant-numeric: tabular-nums; text-align: right; width: 1%; white-space: nowrap; font-weight: 700; } /* ---------- PROSE ---------- */ .prose { max-width: 74ch; } .prose h2, .prose h3 { margin: 32px 0 8px; font-size: 19px; font-weight: 700; letter-spacing: -0.015em; } .prose li { margin-bottom: 6px; } /* `overflow-wrap: anywhere` : l'adresse du stockage de la Ville (vdldocgreffecmspc01sa.blob.core.windows.net) est un seul mot de 48 caractères. Sur un écran de 375 px, elle sortait du cadre et faisait glisser la page de côté. */ code { font-family: ui-monospace, Consolas, monospace; font-size: 13px; background: var(--fond-2); padding: 2px 6px; border-radius: 4px; overflow-wrap: anywhere; } .plus { display: block; width: 100%; padding: 13px; margin-top: 6px; font: inherit; font-size: 14.5px; font-weight: 600; background: var(--carte); border: 1px solid var(--ligne-forte); border-radius: var(--rayon); cursor: pointer; color: var(--accent); } .plus:hover { background: var(--accent-fond); border-color: var(--accent); } /* ---------- ACCUEIL ---------- */ .chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 26px 0 12px; } .chiffre { background: var(--carte); border: var(--bordure-carte); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 20px 22px; text-decoration: none; color: inherit; display: block; border-top: 4px solid var(--accent); } .chiffre:nth-child(2) { border-top-color: var(--t-transport); } .chiffre:nth-child(3) { border-top-color: var(--t-urbanisme); } .chiffre:nth-child(4) { border-top-color: var(--t-contrats); } .chiffre:hover { box-shadow: var(--ombre-forte); } .chiffre .n { font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; } .chiffre .quoi { font-size: 13.5px; color: var(--doux); margin-top: 8px; line-height: 1.4; } .cartes-liens { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 12px; } .lien-section { background: var(--carte); border: var(--bordure-carte); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 20px 22px; text-decoration: none; display: block; color: inherit; } .lien-section:hover { box-shadow: var(--ombre-forte); } .lien-section h3 { margin: 0 0 6px; font-size: 18px; font-weight: 700; letter-spacing: -0.015em; color: var(--accent); } .lien-section p { margin: 0; font-size: 14.5px; color: var(--doux); } footer { border-top: 1px solid var(--ligne); margin-top: 52px; padding: 22px 0 0; font-size: 13.5px; color: var(--doux); } footer a { color: var(--doux); } /* ---------- CARTE DES DISTRICTS ---------- */ .zone-carte { background: var(--carte); border: var(--bordure-carte); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 14px; margin-top: 10px; } .zone-carte svg { display: block; width: 100%; height: auto; } .zone-carte .district { stroke: var(--carte); stroke-width: 1.4; cursor: pointer; transition: opacity .12s; opacity: .9; } .zone-carte .district:hover, .zone-carte .district:focus { opacity: 1; stroke: var(--encre); stroke-width: 2.6; outline: none; } .zone-carte .district.choisi { opacity: 1; stroke: var(--encre); stroke-width: 3.2; } .legende { display: flex; gap: 15px; flex-wrap: wrap; margin: 14px 0 0; font-size: 13px; color: var(--doux); } .cle-legende { display: flex; align-items: center; gap: 7px; } .cle-legende i { width: 13px; height: 13px; border-radius: 3px; display: inline-block; } .colonnes-carte { display: grid; grid-template-columns: 1fr 320px; gap: 18px; align-items: start; } @media (max-width: 860px) { .colonnes-carte { grid-template-columns: 1fr; } } /* ---------- BASCULE DE THÈME ---------- */ /* L'icône est dessinée en CSS plutôt qu'en SVG : une lune, c'est un disque avec un second disque de la couleur du fond décalé par-dessus. Zéro requête, zéro balise. */ .bascule-theme { align-self: center; width: 38px; height: 38px; flex: none; cursor: pointer; background: transparent; border: 1px solid transparent; border-radius: 100px; position: relative; } .bascule-theme:hover { border-color: var(--ligne-forte); background: var(--fond-2); } .bascule-theme:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Thème clair : on montre la lune, parce qu'elle dit où l'on va. */ .bascule-theme::before { content: ''; position: absolute; inset: 0; margin: auto; width: 17px; height: 17px; border-radius: 100px; background: var(--entete-doux); } .bascule-theme::after { content: ''; position: absolute; inset: 0; margin: auto; width: 15px; height: 15px; border-radius: 100px; background: var(--entete-fond); transform: translate(5px, -4px); } .bascule-theme:hover::after { background: var(--fond-2); } /* Thème sombre : un soleil — le disque seul, avec des rayons. */ :root[data-theme="sombre"] .bascule-theme::before { width: 14px; height: 14px; background: var(--vedette); box-shadow: 0 -9px 0 -5.5px var(--vedette), 0 9px 0 -5.5px var(--vedette), -9px 0 0 -5.5px var(--vedette), 9px 0 0 -5.5px var(--vedette), 6.4px -6.4px 0 -5.5px var(--vedette), -6.4px 6.4px 0 -5.5px var(--vedette), 6.4px 6.4px 0 -5.5px var(--vedette), -6.4px -6.4px 0 -5.5px var(--vedette); } :root[data-theme="sombre"] .bascule-theme::after { display: none; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } /* Un tableau replié : il doit porter la même ombre et le même cadre qu'une fiche, mais son contenu déborde en largeur sur petit écran — d'où le défilement horizontal interne plutôt qu'une page qui se met à glisser latéralement. */ .bloc-tableau > .corps { overflow-x: auto; } .bloc-tableau table { min-width: 460px; } /* Décompte d'un vote : deux jetons accolés, l'information la plus utile de l'en-tête. */ .decompte { display: inline-flex; border-radius: 100px; overflow: hidden; font-size: 11.5px; font-weight: 700; } .decompte > span { padding: 3px 9px; } .d-pour { background: var(--accent-fond); color: var(--accent-encre); } .d-contre { background: var(--contre-fond); color: var(--contre); } :root[data-theme="sombre"] .d-pour { color: var(--accent); } /* ---------- SÉANCES ---------- */ /* Une séance est un
: au chargement on ne voit que les en-têtes, c'est-à-dire l'agenda de la Ville. L'en-tête reste collant pendant qu'on parcourt les décisions. */ .seance { margin-bottom: 10px; } .seance-entete { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; cursor: pointer; list-style: none; position: relative; padding: 12px 34px 12px 16px; background: var(--carte); border: var(--bordure-carte); border-radius: var(--rayon); box-shadow: var(--ombre); } .seance-entete::-webkit-details-marker { display: none; } .seance-entete::after { content: '+'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 21px; font-weight: 400; line-height: 1; color: var(--doux); } .seance[open] > .seance-entete::after { content: '\2212'; } .seance[open] > .seance-entete { position: sticky; top: 0; z-index: 2; border-radius: var(--rayon) var(--rayon) 0 0; border-bottom-color: var(--accent); } .seance-entete:hover { border-color: var(--accent); } .seance-entete:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .seance-entete h3 { margin: 0; font-size: 16.5px; font-weight: 700; letter-spacing: -0.015em; } .seance-date { font-size: 14px; color: var(--doux); } .seance-corps { padding: 12px 0 18px 16px; border-left: 2px solid var(--ligne); margin-left: 10px; } /* ---------- LEXIQUE ---------- */ /* Une liste de définitions, rien de plus : pas de carte, pas d'ombre, pas de dépliage. Ce qui sépare les entrées, c'est un filet et de l'air. */ .entree-lexique { padding: 0 0 20px; margin-bottom: 20px; border-bottom: 1px solid var(--ligne); } .entree-lexique:last-child { border-bottom: 0; } .entree-lexique .terme { margin: 0 0 4px; font-size: 18px; font-weight: 700; letter-spacing: -0.015em; } .entree-lexique .alias { margin: 0 0 6px; font-size: 13.5px; color: var(--doux); } .entree-lexique .definition { margin: 0; font-size: 16px; line-height: 1.6; max-width: 68ch; } .entree-lexique .remarque { margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--doux); max-width: 68ch; } /* Une couleur par catégorie du lexique, empruntée au nuancier des sujets — donc déjà ajustée au thème clair comme au sombre, sans une teinte écrite en dur. */ .cat-documents { --cat: var(--t-transport); } .cat-instances { --cat: var(--t-economie); } .cat-vote { --cat: var(--t-subventions); } .cat-urbanisme { --cat: var(--t-urbanisme); } .cat-argent { --cat: var(--t-finances); } h2.section[class*="cat-"] { color: var(--cat); border-bottom: 2px solid var(--cat); padding-bottom: 7px; margin-bottom: 20px; } .bloc-lexique { border-left: 3px solid var(--cat); padding-left: 18px; } .bloc-lexique .terme { color: var(--cat); } .bloc-lexique .entree-lexique:last-child { padding-bottom: 4px; } /* ---------- TAILLE DU TEXTE ---------- */ .taille-texte { margin-left: auto; align-self: center; display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--ligne-forte); border-radius: 100px; padding: 2px; background: var(--carte); } .taille-texte button { font: inherit; font-size: 13px; font-weight: 700; line-height: 1; width: 32px; height: 28px; border: 0; border-radius: 100px; background: transparent; color: var(--entete-encre); cursor: pointer; } .taille-texte button:hover:not(:disabled) { background: var(--fond-2); } .taille-texte button:disabled { color: var(--ligne-forte); cursor: default; } .taille-texte button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } #texte-pct { min-width: 42px; text-align: center; font-size: 12px; font-weight: 600; color: var(--entete-doux); font-variant-numeric: tabular-nums; } /* Un rôle publié par la Ville fait parfois une ligne entière (« Président du comité exécutif »), et rien n'empêche la Ville d'en écrire un plus long. Une pastille qui refuse de se couper élargit la fiche à sa propre largeur, et tous les titres sortent du cadre. Dans une fiche d'élu, les pastilles se coupent, et la colonne de texte peut rétrécir. */ .elu > div { min-width: 0; flex: 1 1 auto; } .elu .puce, .elu .meta { white-space: normal; } .elu .meta { flex-wrap: wrap; } .elu h3, .elu .district { overflow-wrap: anywhere; } /* ---------- LEXIQUE : catégories dépliantes ---------- */ /* Le titre de catégorie est le bouton : details/summary natifs, donc clavier et lecteur d'écran sans JavaScript. Le chevron dit l'état ; le compte dit ce qu'on va trouver. */ .lexique-cat > summary { list-style: none; cursor: pointer; } .lexique-cat > summary::-webkit-details-marker { display: none; } .lexique-cat > summary h2.section { display: flex; align-items: center; gap: 10px; color: var(--cat); border-bottom: 2px solid var(--cat); padding-bottom: 7px; margin-bottom: 0; } .lexique-cat > summary h2.section::before { content: ""; flex: none; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; margin-right: 2px; } .lexique-cat[open] > summary h2.section::before { transform: rotate(45deg); } .lexique-cat > summary:hover h2.section, .lexique-cat > summary:focus-visible h2.section { color: var(--encre); border-bottom-color: var(--encre); } .lexique-cat > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; } .lexique-cat .compte-cat { margin-left: auto; font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--doux); } .lexique-cat .bloc-lexique { margin-top: 18px; margin-bottom: 8px; } @media (prefers-reduced-motion: reduce) { .lexique-cat > summary h2.section::before { transition: none; } } /* ---------- raccourcis de page (Conseil) ---------- */ .raccourcis { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 14px; } .raccourcis a { font-size: 13px; font-weight: 600; text-decoration: none; color: var(--doux); border: 1px solid var(--ligne); border-radius: 999px; padding: 4px 12px; background: var(--carte); } .raccourcis a:hover { color: var(--encre); border-color: var(--ligne-forte); } h2.page[id], h1.page[id] { scroll-margin-top: 16px; } /* ---------- retour en haut ---------- */ .haut { position: fixed; right: 18px; bottom: 18px; z-index: 20; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--ligne-forte); background: var(--carte); color: var(--encre); font-size: 20px; line-height: 1; cursor: pointer; box-shadow: var(--ombre-forte); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .18s, transform .18s; } .haut.visible { opacity: 1; transform: none; pointer-events: auto; } .haut:hover { border-color: var(--accent); color: var(--accent); } /* La légende qui explique l'absence de résumés : elle suit la ligne de comptage, donc elle se serre contre elle plutôt que de flotter comme un avis ordinaire. */ .avis.legende-resume { margin: 4px 0 20px; font-size: 13.5px; line-height: 1.55; } /* ============================================================ LAVAL ============================================================ */ /* ---------- portrait d'un membre du conseil ---------- */ /* laval.ca refuse les robots, et il peut aussi refuser de servir la photo à un site tiers : derrière l'image, un rond aux initiales de la personne prend le relais. Quand l'image échoue à charger, app.js pose la classe « sans-photo » et l'image disparaît ; les initiales étaient déjà là, il n'y a donc jamais de cadre vide. */ .portrait { position: relative; flex: none; width: 62px; height: 86px; border-radius: var(--rayon); background: var(--fond-2); overflow: hidden; } .portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; } .portrait.sans-photo img { display: none; } .portrait .initiales { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; letter-spacing: .02em; color: var(--doux); } /* Le numéro de district avant le nom, comme la Ville l'écrit (« 05 – Marigot »). */ .elu .district .numero-district { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; color: var(--encre); } .elu .coordonnees { margin: 6px 0 0; font-size: 13.5px; line-height: 1.7; } .elu .coordonnees a { overflow-wrap: anywhere; } /* ---------- districts et montant d'une décision ---------- */ /* Les districts touchés et le montant viennent de l'ordre du jour du conseil, pas du procès-verbal : ils ne sont là que pour le conseil municipal. Le district a sa pastille, sobre ; le montant reprend la pastille « montant » des résumés. */ .puce.district { background: var(--fond-2); color: var(--encre); font-weight: 600; } .puce.district::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--t-urbanisme); margin-right: 6px; vertical-align: 1px; } .puce.document { background: var(--fond-2); color: var(--doux); font-style: italic; font-weight: 600; } /* Proposée par / appuyée par, certificat de trésorerie, chapitre : de petites lignes de faits, toutes de la même couleur douce, sous le résumé. */ .faits { margin: 0 0 8px; font-size: 13.5px; color: var(--doux); line-height: 1.6; } .faits + .faits { margin-top: -4px; } .liens-pdf { margin: 8px 0 0; display: flex; gap: 6px 16px; flex-wrap: wrap; } /* ---------- carte des districts, par parti ---------- */ /* Teintes neutres, volontairement éloignées des couleurs des partis : la carte dit qui siège où, pas pour qui voter. Un parti absent du tableau reçoit une teinte de réserve. */ .legende .cle-legende .n { color: var(--doux); font-weight: 400; } .zone-carte .district.vacant { fill: var(--ligne-forte); } .zone-carte .etiquette-district { font-size: 22px; font-weight: 700; fill: var(--encre); pointer-events: none; paint-order: stroke; stroke: var(--carte); stroke-width: 5px; stroke-linejoin: round; } /* ---------- présences ---------- */ /* Un décompte, jamais un pourcentage ni une comparaison : la Ville publie présent/absent séance par séance, on redonne ces deux nombres et rien d'autre. */ .presences { display: inline-flex; gap: 0; border-radius: 100px; overflow: hidden; font-size: 11.5px; font-weight: 700; margin-top: 4px; } .presences > span { padding: 3px 9px; } .presences .p-present { background: var(--accent-fond); color: var(--accent-encre); } .presences .p-absent { background: var(--fond-2); color: var(--doux); } :root[data-theme="sombre"] .presences .p-present { color: var(--accent); } /* ---------- lexique : catégories ---------- */ /* Les clés de catégorie sont celles de lib/lexique.js. Une catégorie qui n'a pas sa ligne ici reçoit la couleur de réserve (ardoise) plutôt qu'aucune. */ .lexique-cat { --cat: var(--t-procedure); } .cat-seances { --cat: var(--t-economie); } .cat-comite { --cat: var(--t-social); } .cat-districts { --cat: var(--t-loisirs); } .cat-reglements { --cat: var(--t-urbanisme); } /* L'exemple réel qui ancre une définition dans un document de la Ville. */ .entree-lexique .exemple { margin: 8px 0 0; font-size: 13.5px; color: var(--doux); } .entree-lexique .exemple a { font-weight: 600; } /* ---------- filtre venu de l'adresse (district) ---------- */ .filtre-actif { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13.5px; background: var(--accent-fond); color: var(--accent-encre); border-radius: 100px; padding: 5px 12px; } :root[data-theme="sombre"] .filtre-actif { color: var(--accent); } /* ---------- état des données (Sources) ---------- */ /* Le tableau d'état a quatre colonnes dont deux horodatages complets : il ne descend pas sous ~500 px. Sans ce défilement interne, la page entière se mettait à glisser latéralement sur un écran de 375 px (mesuré : scrollWidth 500 pour clientWidth 363). Même choix que le tableau des votes contre : le bloc défile, pas la page. */ #etat-donnees, #etat-archive { overflow-x: auto; } #etat-donnees table, #etat-archive table { min-width: 460px; } .prose table td { vertical-align: top; } .prose .etat-note { font-size: 13.5px; color: var(--doux); margin: 8px 0 0; } /* Une ligne en haut de chaque fiche pour suivre la liste : claire en thème sombre, noire en thème clair (Martin, 9 nov. 2026). */ :root[data-theme="sombre"] .carte { border-top: 2px solid rgba(255, 255, 255, .55); } :root:not([data-theme="sombre"]) .carte { border-top: 2px solid rgba(0, 0, 0, .55); } /* Bande du commanditaire sur l'accueil (6 nov. 2026). */ .commandite { margin: 26px 0 32px; max-width: none; border-left-width: 4px; } .commandite p { margin: 0; font-size: 17px; } .commandite a { font-weight: 700; } .commandite .commandite-note { margin-top: 8px; font-size: 13px; opacity: .8; } .commandite .commandite-note a { font-weight: 400; } .commandite { display: flex; gap: 18px; align-items: flex-start; } .commandite-logo { flex: none; line-height: 0; } .commandite-logo img { width: 64px; height: 64px; } .commandite-texte p { font-size: 15px; } .commandite-texte p + p { margin-top: 6px; } .commandite .commandite-titre { font-size: 17px; } /* Un peu plus gros (Martin, 6 nov. 2026). */ .commandite { gap: 22px; padding: 20px 24px; align-items: center; } .commandite-logo img { width: 96px; height: 96px; } .commandite-texte p { font-size: 16.5px; } .commandite .commandite-titre { font-size: 20px; } .commandite .commandite-note { font-size: 14px; } .commandite-liste { margin: 8px 0 4px; padding-left: 20px; font-size: 16px; line-height: 1.5; } .commandite-liste li + li { margin-top: 2px; } /* Mobile (8 nov. 2026) : logo au-dessus du texte, sinon il mange un tiers de la largeur. */ @media (max-width: 600px) { .commandite { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; } .commandite-logo img { width: 56px; height: 56px; } .commandite .commandite-titre { font-size: 18px; } .commandite-texte p, .commandite-liste { font-size: 15px; } } /* ============================================================ REPRIS DU VOLET LÉVIS (11 nov. 2026) ============================================================ */ /* Lien sortant dans la navigation : même rangée, mais on dit qu'on quitte le site. */ nav a.externe { color: var(--entete-doux); font-weight: 500; } nav a.externe span[aria-hidden] { font-size: 12px; margin-left: 2px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Lien « Une réalisation de » DAFR Solution au pied de page. */ footer a.lien-dafr { color: inherit; } /* Partager, au bas de chaque décision dépliée qui a un résumé. */ .fiche-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ligne, rgba(127,127,127,.2)); } .fiche-actions-titre { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; opacity: .75; } .fiche-bouton { font: inherit; font-size: 13px; padding: 5px 11px; border: 1px solid var(--ligne, rgba(127,127,127,.35)); border-radius: 6px; background: transparent; color: inherit; cursor: pointer; text-decoration: none; } .fiche-bouton:hover { border-color: currentColor; } /* « Sans résumé » : replié en bas de chaque séance. */ .seance-procedure { margin-top: 10px; border: 1px dashed currentColor; border-radius: 8px; padding: 8px 12px; opacity: .85; } .seance-procedure > summary { cursor: pointer; font-weight: 600; font-size: 14px; } .seance-procedure[open] > summary { margin-bottom: 8px; } /* « Avec résumé seulement » en vert, la couleur des résumés IA. */ label.case:has(#filtre-resume) { color: #fff; background: #0B8A4B; border: 2px solid #0B8A4B; border-radius: 6px; padding: 6px 10px; font-weight: 700; cursor: pointer; } label.case:has(#filtre-resume) input { accent-color: #fff; } /* Remerciement du commanditaire, avant les séances. */ .merci-commanditaire { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; margin: 0 0 18px; padding: 14px 18px; border: 2px dashed currentColor; border-radius: 8px; text-align: center; font-size: 15px; line-height: 1.45; } .merci-commanditaire p { margin: 0; } .merci-commanditaire a { font-weight: 700; } .merci-commanditaire img { display: block; width: 96px; height: 96px; background: #fff; padding: 6px; border-radius: 4px; } /* Bouton « Tout ouvrir » dans l'en-tête de chaque séance. */ .bouton-tout-ouvrir { margin-left: auto; font: inherit; font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 6px; border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; } .bouton-tout-ouvrir:hover { background: rgba(127, 127, 127, .15); }