/* DossierOntario — feuille de style, d'après la « Charte Dossier ».
   Les jetons viennent de la charte commune (tokens.json, version du 19 septembre 2026).
   Une seule chose change d'une province à l'autre : l'accent. Ici, le rouge du Red
   Ensign, #C8102E (Flag Act, R.S.O. 1990, c. F.20 — code de l'Amirauté T1144).
   Le jaune #FFD24D est commun à toute la famille : c'est lui qui dit « site Dossier ». */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400..900&family=Archivo+Narrow:wght@400..700&display=swap');

:root{
  --ink:#131313; --paper:#F2F0EA; --paper-2:#FDFCF9; --card:#FFFFFF;
  --line:#131313; --line-soft:#E5E2DA; --slate:#555550;
  --sur-clair:#131313; --sur-fonce:#FFFFFF;
  --gold:#C8102E; --gold-soft:#ffd9d6; --gold-bg:#C8102E; --gold-hover:#851420;
  --ink-bg:#131313; --yellow:#FFD24D;
  --green:#1E6A3C; --green-soft:#BFE8CD; --red:#C22B1D; --red-soft:#F6C9C2;
  --erable-rouge:#D52B1E;
  --h-ctrl:36px; --gouttiere:28px; --colonne:1280px;
  --shadow-sm:4px 4px 0 var(--ink); --shadow:6px 6px 0 var(--ink); --shadow-lg:8px 8px 0 var(--ink);
}
/* Le thème sombre est un CHOIX du visiteur, jamais le réglage du système. */
:root[data-theme="dark"]{
  --ink:#F3F1EA; --paper:#1A1815; --paper-2:#221F1A; --card:#272420;
  --line:#F3F1EA; --line-soft:#3D3931; --slate:#A9A498;
  --gold:#f9817f; --gold-soft:#4a1d1d; --gold-bg:#C8102E;
  --ink-bg:#0E0D0B;
  --green:#5FCB8A; --green-soft:#153A22; --red:#FF8172; --red-soft:#411D18;
  --shadow-sm:4px 4px 0 #131313; --shadow:6px 6px 0 #131313; --shadow-lg:8px 8px 0 #131313;
}

*{box-sizing:border-box;}
*{border-radius:0 !important;}
::selection{background:var(--yellow); color:var(--sur-clair);}

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Archivo',system-ui,sans-serif; -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
img{max-width:100%;}

.colonne{max-width:var(--colonne); margin:0 auto; padding:0 var(--gouttiere);}
@media (max-width:640px){ :root{ --gouttiere:18px; } }
/* Le contenu arrive par on.js une fraction de seconde après l'en-tête : sans cette hauteur
   réservée, le pied de page noir remonte sous les onglets le temps d'un éclair. */
body:not(.pret) main.colonne{min-height:100vh;}

/* ---------- En-tête ---------- */
.entete{background:var(--paper); border-bottom:3px solid var(--ink); position:sticky; top:0; z-index:50;}
.entete-rang{
  max-width:var(--colonne); margin:0 auto; padding:12px var(--gouttiere);
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
}
/* Le mot-symbole et la feuille forment un seul bloc à gauche : sans ce groupe, la
   rangée d'en-tête (justify-content:space-between) enverrait la feuille au milieu. */
.marque{display:flex; align-items:center; gap:14px;}
.mot-symbole{
  font-weight:900; font-size:24px; letter-spacing:-0.03em; text-transform:uppercase;
  text-decoration:none; display:inline-flex; align-items:center; gap:0;  /* un seul mot : DossierOntario */
}
.mot-symbole .province{color:var(--gold);}
/* La feuille d'érable mène à DossierCanada. Toutes les 20 s elle bascule SUR ELLE-MÊME
   (rotateY, comme une pièce de monnaie qu'on retourne) et passe du jaune commun au rouge
   du drapeau canadien — exactement le geste de DossierQuébec. Un rotate() tout court la
   ferait pivoter à plat, ce qui n'est pas la même chose. */
.erable{
  color:var(--yellow); display:inline-flex; flex:none; cursor:pointer;
  transition:transform .7s ease-in-out, color .7s ease-in-out; transform-style:preserve-3d;
}
.erable svg{width:26px; height:26px; display:block;}
.erable.est-rouge{color:var(--erable-rouge); transform:rotateY(180deg);}
.erable:hover{transform:scale(1.12);}
.erable.est-rouge:hover{transform:rotateY(180deg) scale(1.12);}
.erable:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}
@media (prefers-reduced-motion:reduce){ .erable{transition:color .3s ease;} }

.controles{display:flex; align-items:center; gap:8px;}
.controles > *{
  height:var(--h-ctrl); border:1px solid var(--line); background:var(--card); color:var(--ink);
  font-family:'Archivo Narrow',sans-serif; font-weight:600; font-size:12px;
  text-transform:uppercase; letter-spacing:.04em; padding:0 14px; cursor:pointer;
}
.controles > *:hover{background:var(--yellow); color:var(--sur-clair);}
.controles > *:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}

/* ---------- Onglets de navigation ---------- */
.onglets{display:flex; gap:8px; flex-wrap:wrap; padding:10px var(--gouttiere); max-width:var(--colonne); margin:0 auto;}
.onglets a{
  font-family:'Archivo Narrow',sans-serif; font-size:13.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; text-decoration:none;
  padding:6px 12px; border:2px solid transparent;
}
.onglets a.actif{color:var(--card); background:var(--ink); border-color:var(--ink);}
:root[data-theme="dark"] .onglets a.actif{color:var(--paper);}
.onglets a:hover:not(.actif){background:var(--yellow); border-color:var(--sur-clair); color:var(--sur-clair);}

/* ---------- Bandes ----------
   Elles traversent l'écran d'un bord à l'autre et donnent son rythme à la page : le
   rouge pour ce que le site promet, le jaune — commun à toute la famille Dossier —
   pour ce qu'il faut savoir avant de lire les chiffres. Elles vivent HORS de la
   colonne, et reprennent une colonne à l'intérieur. */
.bande{border-top:3px solid var(--ink); border-bottom:3px solid var(--ink); padding:46px 0 50px; margin:0 0 28px;}
.bande .colonne{display:flex; gap:18px; align-items:flex-start;}
.bande .marqueur{font-size:26px; line-height:1.1; flex:none;}
.bande .titre-bande{
  margin:0 0 6px; font-weight:900; font-size:clamp(20px,2.6vw,30px);
  text-transform:uppercase; letter-spacing:-0.01em; line-height:1.05;
}
.bande-mission{
  background:var(--gold-bg); color:var(--sur-fonce);
  --ink:var(--sur-fonce); --slate:#f3dcdc; --line:var(--sur-fonce);
}
.bande-alerte{padding:22px 0;
  
  background:var(--yellow); color:var(--sur-clair);
  --ink:#131313; --paper:#FFD24D; --card:#FFD24D; --slate:#3a3a36; --line:#131313; --gold:#851420;
}
.bande p{margin:0; font-size:16px; line-height:1.5;}
.bande p + p{margin-top:8px;}

/* ---------- Titres ---------- */
.titre-une{
  margin:34px 0 10px; font-weight:900; text-transform:uppercase; letter-spacing:-0.02em;
  line-height:.92; font-size:clamp(40px,7vw,92px);
}
.titre-une span{display:block;}
.titre-contour{color:transparent; -webkit-text-stroke:3px var(--ink);}
.titre-accent{color:var(--gold);}
.titre-vue{
  margin:30px 0 8px; font-weight:900; text-transform:uppercase; letter-spacing:-0.02em;
  line-height:.94; font-size:clamp(30px,4.6vw,56px);
}
.chapo{font-size:17px; line-height:1.5; max-width:680px; margin:10px 0 20px;}
.courant{font-size:15.5px; line-height:1.55;}
.legende, .meta{
  font-family:'Archivo Narrow',sans-serif; font-weight:600; font-size:11.5px;
  text-transform:uppercase; letter-spacing:.06em; color:var(--slate);
}

/* ---------- Bande de chiffres ---------- */
.chiffres{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin:20px 0 30px;}
.chiffre{border:3px solid var(--ink); background:var(--card); padding:14px 16px; box-shadow:var(--shadow-sm);}
.chiffre b{display:block; font-weight:900; font-size:clamp(28px,4vw,44px); line-height:1; letter-spacing:-.02em;}
.chiffre span{display:block; margin-top:6px; font-family:'Archivo Narrow',sans-serif; font-weight:700;
  font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--slate);}

/* ---------- Cartes ---------- */
.grille{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:18px;}
.carte{
  border:3px solid var(--ink); background:var(--card); padding:16px 18px;
  box-shadow:var(--shadow); display:flex; flex-direction:column; gap:10px;
}
.carte:hover{background:var(--paper-2);}
.carte-titre{font-weight:800; font-size:18px; line-height:1.25; margin:0;}
.carte-titre a{text-decoration:none;}
.carte-titre a:hover{color:var(--gold);}
.numero{
  display:inline-block; background:var(--gold-bg); color:var(--sur-fonce);
  font-weight:900; font-size:13px; padding:4px 10px; letter-spacing:.02em;
}

/* ---------- Pastilles ---------- */
.pastille{
  display:inline-flex; align-items:center; gap:6px; border:2px solid var(--line);
  padding:3px 9px; font-family:'Archivo Narrow',sans-serif; font-weight:700;
  font-size:11px; text-transform:uppercase; letter-spacing:.05em; background:var(--card);
}
.pastille-sanctionne{background:var(--green-soft); border-color:var(--green); color:var(--ink);}
.pastille-encours{background:var(--gold-soft); border-color:var(--gold); color:var(--ink);}
.pastille-arrete{background:var(--red-soft); border-color:var(--red); color:var(--ink);}
.pastille-parti{color:var(--sur-fonce); border-color:var(--sur-clair);}

/* ---------- Étapes ---------- */
.etapes{display:flex; flex-wrap:wrap; gap:6px; margin:6px 0;}
.etape{
  flex:1 1 90px; border:2px solid var(--line); background:var(--card); padding:6px 8px;
  font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:10.5px;
  text-transform:uppercase; letter-spacing:.04em; text-align:center; color:var(--slate);
}
.etape.franchie{background:var(--gold-bg); border-color:var(--gold-bg); color:var(--sur-fonce);}

/* ---------- Le pli d'une carte de projet ----------
   Même mécanique que .projet-comite : le marqueur du navigateur est remplacé par un + qui
   devient −, pour que l'état se lise sans couleur ni animation. */
.projet-detail{border-top:2px solid var(--line-soft); padding-top:10px; margin-top:2px;}
.projet-detail > summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px;
  font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:12px;
  text-transform:uppercase; letter-spacing:.06em; color:var(--slate);
}
.projet-detail > summary::-webkit-details-marker{display:none;}
.projet-detail > summary::before{
  content:'+'; font-weight:900; font-size:15px; line-height:1; color:var(--gold);
}
.projet-detail[open] > summary::before{content:'−';}
.projet-detail > summary:hover{color:var(--ink);}
/* ---------- La carte d'un projet : pleine largeur, comme sur DossierQuébec ----------
   En grille de trois, une carte ouverte devenait un couloir de 400 px de texte à côté de deux
   cartes vides. Une carte par ligne ; ouverte, le texte à gauche, l'état et la sortie à droite. */
.liste-projets{display:flex; flex-direction:column; gap:18px;}
.carte-projet{padding:18px 22px; gap:14px;}
.carte-projet:hover{background:var(--card);}
.projet-tete{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:16px; align-items:start;}
.projet-tete .numero{font-size:14px; padding:7px 12px; white-space:nowrap;}
.projet-tete-texte{display:flex; flex-direction:column; gap:5px; min-width:0;}
.carte-projet .carte-titre{font-size:20px;}
.projet-pastilles{display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end;}
.carte-projet{cursor:pointer;}
/* Les étapes en petites pastilles, comme sur DQ : passées pleines, actuelle en jaune, suivantes
   en creux. Cinq barres rouges pleine largeur se lisaient comme une alerte, pas comme un chemin. */
.carte-projet .etapes{flex-wrap:wrap; margin:0;}
.carte-projet .etape{flex:0 0 auto; border-color:var(--line); padding:6px 11px; font-size:11px; color:var(--slate);}
.carte-projet .etape.franchie{color:var(--sur-fonce);}
.carte-projet .etape.courante{background:var(--yellow); border-color:var(--line); color:#131313;}
.carte-projet .projet-detail{border-top:2px dashed var(--line); padding-top:12px;}
.carte-projet .projet-detail > summary{color:var(--gold);}
.carte-projet .sous-titre{color:var(--gold); font-weight:800; font-size:13px; letter-spacing:.05em;}
.projet-detail-corps{
  display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:30px; padding-top:16px;
}
.projet-texte{display:flex; flex-direction:column; gap:12px; min-width:0; max-width:760px;}
.zone-resume{display:flex; flex-direction:column; gap:10px;}
.zone-resume:empty{display:none;}
.projet-cote{display:flex; flex-direction:column; gap:12px;}
.boite-activite{
  border:3px solid var(--ink); background:var(--paper-2); padding:12px 14px;
  display:flex; flex-direction:column; gap:5px; font-size:15px;
}
.boite-activite span{font-size:13px; color:var(--slate); line-height:1.4;}
.projet-cote .bouton-source{align-self:stretch; text-align:center;}
@media (max-width:760px){
  .carte-projet{padding:16px;}
  .projet-tete{grid-template-columns:auto minmax(0,1fr);}
  .projet-pastilles{grid-column:1 / -1; justify-content:flex-start;}
  .projet-detail-corps{grid-template-columns:1fr; gap:18px;}
}
/* Des puces qui se lisent d'un trait, comme sur DQ : plus grandes, plus serrées. */
.resume{margin:0; padding-left:22px; display:flex; flex-direction:column; gap:3px;}
.resume li{font-size:16.5px; line-height:1.35; color:var(--ink);}
.resume li::marker{color:var(--ink);}
/* L'avertissement colle au résumé qu'il concerne, pas à la note officielle en dessous. */
.avis-ia{margin-top:-4px; text-transform:none; letter-spacing:0; font-style:italic;}
.sous-titre{
  margin:0; font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:11px;
  text-transform:uppercase; letter-spacing:.07em; color:var(--slate);
}
/* La sortie vers le texte officiel : c'est le geste qu'on veut voir sur une carte ouverte,
   pas un lien de bas de page. Même bouton plein que sur DossierQuébec. */
.bouton-source{
  align-self:flex-start; display:inline-block; background:var(--gold-bg); color:var(--sur-fonce);
  border:3px solid var(--ink); box-shadow:var(--shadow); padding:11px 16px; text-decoration:none;
  font-family:'Archivo Narrow',sans-serif; font-weight:800; font-size:12px;
  text-transform:uppercase; letter-spacing:.06em;
}
.bouton-source:hover{background:var(--gold); color:var(--sur-fonce);}

/* ---------- Tableaux (votes) ---------- */
.tableau{width:100%; border-collapse:collapse; border:3px solid var(--ink); background:var(--card);}
.tableau th, .tableau td{border:1px solid var(--line-soft); padding:8px 10px; text-align:left; font-size:14px;}
.tableau th{
  font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:11.5px;
  text-transform:uppercase; letter-spacing:.06em; background:var(--paper-2);
}
.tableau tr:hover td{background:var(--yellow); color:var(--sur-clair);}
.pour{color:var(--green); font-weight:800;}
.contre{color:var(--red); font-weight:800;}

/* ---------- Encadré d'explication ---------- */
.encadre{border:2px solid var(--line); background:var(--paper-2); padding:12px 14px; margin:16px 0; font-size:14.5px; line-height:1.5;}
.encadre b{font-weight:800;}

/* ---------- Boutons et liens ---------- */
.bouton{
  display:inline-block; border:3px solid var(--ink); background:var(--gold-bg); color:var(--sur-fonce);
  font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:12.5px; text-transform:uppercase;
  letter-spacing:.05em; padding:9px 16px; text-decoration:none; box-shadow:var(--shadow-sm); cursor:pointer;
}
.bouton:hover{background:var(--yellow); color:var(--sur-clair);}
.lien-source{color:var(--gold); text-decoration:underline; text-underline-offset:3px; font-weight:600;}
/* Une adresse de courriel garde sa casse : les étiquettes sont en capitales, pas les adresses. */
.legende a[href^="mailto:"]{text-transform:none; letter-spacing:0;}

/* ---------- Recherche et filtres ---------- */
.barre-filtres{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:18px 0;}
.champ{
  border:3px solid var(--ink); background:var(--card); color:var(--ink); padding:9px 12px;
  font-family:'Archivo',sans-serif; font-size:15px; min-width:240px; box-shadow:var(--shadow-sm);
}
.champ:focus{outline:3px solid var(--yellow); outline-offset:2px;}
.filtre{
  border:2px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer;
  font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:11.5px;
  text-transform:uppercase; letter-spacing:.05em; padding:7px 12px;
}
.filtre:hover{background:var(--yellow); color:var(--sur-clair);}
.filtre.actif{background:var(--ink-bg); color:var(--yellow); border-color:var(--ink-bg);}
/* « Recent activity » est un MODE, pas un filtre : il se distingue et se combine avec eux. */
.filtre-mode{border-color:var(--gold); color:var(--gold);}
.filtre-mode.actif{background:var(--yellow); color:#131313; border-color:var(--line);}
.date-activite{color:var(--ink); font-weight:800;}

/* ---------- Pied de page ---------- */
.pied{border-top:3px solid var(--ink); margin-top:44px; padding:26px 0 40px; background:var(--card);}
.pied p{margin:6px 0; font-size:13.5px; line-height:1.55; color:var(--slate);}
.pied .non-officiel{font-family:'Archivo Narrow',sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--ink); font-size:12px;}

@media (prefers-reduced-motion:reduce){ *{transition:none !important; animation:none !important;} }

/* ---------- Têtes de groupe dans les longues listes ----------
   191 projets de loi ou 115 votes d'affilée, c'est une coulée : l'œil n'a nulle part où
   se poser. Chaque groupe porte donc son titre et son compte, souligné du jaune commun. */
.titre-groupe{
  margin:32px 0 14px; padding-bottom:6px; border-bottom:3px solid var(--yellow);
  font-weight:900; font-size:clamp(18px,2.2vw,24px); text-transform:uppercase; letter-spacing:-0.01em;
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
}
.titre-groupe .compte{
  font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:12px;
  letter-spacing:.06em; color:var(--slate);
}
.titre-groupe:first-child{margin-top:8px;}

/* Raccourcis vers les groupes d'une page (le lexique) */
.raccourcis{display:flex; gap:8px; flex-wrap:wrap; margin:18px 0 6px;}
.raccourcis a{
  border:2px solid var(--line); background:var(--card); color:var(--ink); text-decoration:none;
  font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:11.5px;
  text-transform:uppercase; letter-spacing:.05em; padding:7px 12px;
}
.raccourcis a:hover{background:var(--yellow); color:var(--sur-clair);}

/* Les portes d'entrée de l'accueil : une carte par section du site */
.portes{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin:24px 0 8px;}
.porte{
  border:3px solid var(--ink); background:var(--card); box-shadow:var(--shadow-sm);
  padding:14px 16px; text-decoration:none; display:block;
}
.porte:hover{background:var(--yellow); color:var(--sur-clair);}
.porte b{display:block; font-weight:900; font-size:17px; text-transform:uppercase; letter-spacing:-0.01em;}
.porte span{
  display:block; margin-top:5px; font-family:'Archivo Narrow',sans-serif; font-weight:600;
  font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--slate);
}
.porte:hover span{color:var(--sur-clair);}

/* ---------- La bande de mission, en entier ----------
   D'après le composant « Bandes » de la charte : un sur-titre, un énoncé en gros
   caractères dont la chute est surlignée de jaune, puis deux encadrés qui disent
   honnêtement ce que fait la source officielle et ce que ce site essaie d'ajouter.
   La charte signale que son sur-titre est codé en dur à #A9C6FF, un peu sous le seuil
   de contraste : ici il est en crème plein, donc lisible. */
/* Ces trois règles sont écrites « .bande .x » et non « .x » : la règle générale
   « .bande p » porte une classe ET un élément, donc elle l'emporte sur une classe seule.
   Écrit « .enonce », l'énoncé héritait de 16px au lieu de ses 34 — invisible dans le CSS,
   flagrant à l'écran. Les valeurs sont celles de DossierQuébec. */
.bande .sur-titre{
  font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:14px;
  text-transform:uppercase; letter-spacing:.1em; margin:0 0 18px; color:var(--sur-fonce);
}
.bande .enonce{
  margin:0 0 34px; font-weight:800; font-size:clamp(22px,2.8vw,34px); line-height:1.3;
  text-transform:uppercase; letter-spacing:-0.015em; max-width:860px;
}
/* box-decoration-break : sans lui, un surlignage qui passe à la ligne perd son fond
   sur le second morceau. */
.bande .enonce .surlignage{
  background:var(--yellow); color:var(--sur-clair); padding:0 8px;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.comparaison{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px;}
.encadre-mission{border:3px solid var(--sur-fonce); padding:18px 22px;}
.encadre-mission.nous{border-color:var(--yellow);}
.encadre-mission h3{
  margin:0 0 12px; font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:11.5px;
  text-transform:uppercase; letter-spacing:.1em; color:var(--sur-fonce);
}
.encadre-mission.nous h3{color:var(--yellow);}
.encadre-mission ul{margin:0; padding-left:18px;}
.encadre-mission li{font-size:14px; line-height:1.7; margin:6px 0;}
.bande-mission .colonne{display:block;}
/* En bas de page, la bande de mission colle au pied : pas de marge sous elle. */
.bande-mission{margin:36px 0 0;}

/* ---------- Pied de page ----------
   La charte note que celui de DossierQuébec utilise « ink » comme fond : en thème
   sombre, ink devient crème et le texte tombe à 1,8:1. On prend donc « ink-bg », qui
   reste noir dans les deux thèmes — et on écrit dessus en « paper », qui reste clair. */
.pied{
  border-top:3px solid var(--ink); margin-top:44px; padding:26px 0 34px;
  background:var(--ink-bg); color:#B8B4AA;
}
.pied-nav{display:flex; flex-wrap:wrap; gap:10px 22px; margin-bottom:18px;}
.pied-nav a{
  font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:13px;
  text-transform:uppercase; letter-spacing:.06em; color:#F2F0EA; text-decoration:none;
}
.pied-nav a:hover{color:var(--yellow);}
.pied-bas{
  display:flex; flex-wrap:wrap; gap:12px 24px; justify-content:space-between;
  align-items:baseline; border-top:1px solid #3D3931; padding-top:16px;
}
.pied-bas p{margin:0; font-family:'Archivo Narrow',sans-serif; font-size:13px;
  text-transform:uppercase; letter-spacing:.05em; color:#B8B4AA;}
.pied-liens{display:flex; flex-wrap:wrap; gap:18px;}
.pied-liens a{
  font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:13px;
  text-transform:uppercase; letter-spacing:.06em; color:#F2F0EA; text-decoration:none;
}
.pied-liens a:hover{color:var(--yellow);}
.pied .non-officiel{color:#F2F0EA;}

/* ---------- La carte d'un vote ----------
   Reprise de DossierQuébec, à une différence près : l'Ontario ne publie ni abstentions
   ni absences. Il n'y a donc que deux camps, et la carte ne montre pas une colonne vide
   qui laisserait croire à une donnée manquante. */
.vote-entete{
  display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap; cursor:pointer;
  list-style:none;
}
.vote-entete::-webkit-details-marker{display:none;}
.vote-entete .carte-titre{flex:1 1 260px; margin:0;}
.vote-comptes{
  font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:11.5px;
  text-transform:uppercase; letter-spacing:.06em; color:var(--slate); white-space:nowrap;
}
.vote-comptes b{font-family:'Archivo',sans-serif; font-weight:900; font-size:20px; letter-spacing:-.02em;}
.pastille-adopte{background:var(--green-soft); border-color:var(--green); color:var(--ink);}
.pastille-rejete{background:var(--red-soft); border-color:var(--red); color:var(--ink);}

.barre-proportion{display:flex; height:14px; border:2px solid var(--line); margin:12px 0 4px;}
.barre-proportion span{display:block;}
.barre-proportion .part-pour{background:var(--green);}
.barre-proportion .part-contre{background:var(--red);}

.partis{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin:14px 0;}
.parti-boite{border:2px solid var(--line); background:var(--card);}
.parti-boite h4{
  margin:0; padding:6px 10px; color:var(--sur-fonce);
  font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:11.5px;
  text-transform:uppercase; letter-spacing:.06em;
}
.parti-boite dl{margin:0; padding:8px 10px; display:grid; grid-template-columns:1fr auto; gap:2px 8px;}
.parti-boite dt{font-family:'Archivo Narrow',sans-serif; font-weight:600; font-size:11px;
  text-transform:uppercase; letter-spacing:.05em; color:var(--slate);}
.parti-boite dd{margin:0; font-weight:800; font-size:13px; text-align:right;}

.colonnes-votants{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px;}
.colonne-votants{border:2px solid var(--line); background:var(--card);}
.colonne-votants h4{
  margin:0; padding:7px 12px; color:var(--sur-fonce);
  font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:11.5px;
  text-transform:uppercase; letter-spacing:.06em;
}
.colonne-votants .tete-pour{background:var(--green);}
.colonne-votants .tete-contre{background:var(--red);}
.colonne-votants ul{margin:0; padding:10px 12px; list-style:none; max-height:280px; overflow:auto;}
.colonne-votants li{display:flex; align-items:center; gap:8px; font-size:14px; padding:2px 0;}
.puce-parti{width:11px; height:11px; flex:none; border:1px solid var(--line);}
.note-vote{margin:14px 0 10px;}
.bouton-jaune{background:var(--yellow); color:var(--sur-clair); border-color:var(--sur-clair);}
.bouton-jaune:hover{background:var(--ink-bg); color:var(--yellow);}

/* Listes sobres à l'intérieur d'une carte (activité d'un comité, transcriptions) */
.liste-sobre{margin:0 0 12px; padding:0; list-style:none;}
.liste-sobre li{padding:6px 0; border-bottom:1px solid var(--line-soft); font-size:14.5px; line-height:1.4;}
.liste-sobre li:last-child{border-bottom:0;}
.liste-sobre .legende{display:block; margin-top:2px;}

/* ---------- Un comité ----------
   Un bloc pleine largeur par comité, et non trois colonnes de cartes : chaque comité a
   un mandat à lire, une composition et des travaux. Empilés en trois cartes étroites,
   les trois se lisaient mal. */
.comite{border:3px solid var(--ink); background:var(--card); box-shadow:var(--shadow); padding:18px 20px; margin:0 0 20px; cursor:pointer;}
/* Le comité est replié : même pli que la carte d'un projet de loi. */
.comite-pli{border-top:2px dashed var(--line); padding-top:12px; margin-top:12px;}
.comite-pli > summary{color:var(--gold);}
.comite-pli-corps{display:flex; flex-direction:column; gap:16px; padding-top:14px; cursor:auto;}
.comite-entete{display:flex; gap:10px 18px; align-items:baseline; flex-wrap:wrap; margin-bottom:10px;}
.comite-nom{margin:0; font-weight:900; font-size:clamp(17px,2vw,22px); letter-spacing:-.01em; line-height:1.15;}
.comite-colonnes{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px;}
.comite-soustitre{
  margin:0 0 8px; font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:11.5px;
  text-transform:uppercase; letter-spacing:.07em; color:var(--slate);
  border-bottom:2px solid var(--line-soft); padding-bottom:5px;
}
.liste-membres{margin:0 0 8px; padding:0; list-style:none;}
.liste-membres li{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:14px; padding:3px 0;}
.liste-membres a{text-decoration:none;}
.liste-membres a:hover{color:var(--gold);}

/* Un projet de loi étudié en comité se déplie sur ses journées */
.projet-comite{border-bottom:1px solid var(--line-soft); padding:8px 0;}
.projet-comite:last-child{border-bottom:0;}
.projet-comite > summary{
  cursor:pointer; list-style:none; display:flex; gap:8px; align-items:baseline; flex-wrap:wrap;
  font-size:14.5px; line-height:1.35;
}
.projet-comite > summary::-webkit-details-marker{display:none;}
.projet-comite > summary::before{
  content:'+'; font-family:'Archivo Narrow',sans-serif; font-weight:700; color:var(--gold); flex:none;
}
.projet-comite[open] > summary::before{content:'−';}
.projet-comite > summary:hover{color:var(--gold);}
.projet-comite .projet-titre{flex:1 1 180px; font-weight:600;}
.journees{margin-top:8px; padding-left:18px;}
.journees li{display:flex; gap:8px; flex-wrap:wrap; align-items:baseline;}

/* Le bloc d'explication d'un groupe du lexique : plus long qu'une fiche, et mis en avant.
   Certaines choses — le rôle d'un comité — ne tiennent pas en trois lignes. */
.explication{
  border:3px solid var(--ink); background:var(--card); box-shadow:var(--shadow-sm);
  padding:16px 20px; margin:0 0 18px;
}
.explication p{margin:0 0 12px; font-size:15.5px; line-height:1.6; max-width:78ch;}
.explication p:last-child{margin-bottom:0;}
.explication b{font-weight:800;}
.explication .legende{border-top:2px solid var(--line-soft); padding-top:10px; margin-top:14px;}

/* ---------- Challenger et partager (page des projets de loi) ----------
   Mêmes gestes et même allure que sur DossierQuébec : un bouton plein pour le geste, trois
   petits carrés pour le partage, et le compteur en pastille noire et jaune dans la tête. */
.pastille-defi{background:#131313; border-color:#131313; color:var(--yellow);}
.defi{display:flex; flex-direction:column; gap:8px; border-top:2px dashed var(--line-soft); padding-top:12px;}
.defi-indice{text-transform:none; letter-spacing:0; line-height:1.4;}
.bouton-defi{
  background:var(--card); color:var(--ink); border:3px solid var(--line); box-shadow:var(--shadow);
  padding:10px 14px; cursor:pointer; font-family:'Archivo Narrow',sans-serif; font-weight:800;
  font-size:12.5px; text-transform:uppercase; letter-spacing:.06em;
}
.bouton-defi:hover{background:var(--yellow); color:#131313;}
.bouton-defi.actif{background:var(--yellow); color:#131313;}
.bouton-defi:disabled{opacity:.6; cursor:wait;}
.lien-mini{
  background:none; border:0; padding:0; cursor:pointer; color:var(--gold); font:inherit;
  text-decoration:underline; text-underline-offset:2px;
}
.partage{display:flex; align-items:center; justify-content:flex-end; gap:8px;}
.bouton-partage{
  width:36px; height:32px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--card); color:var(--ink); border:2px solid var(--line); cursor:pointer;
  font-weight:800; font-size:12px;
}
.bouton-partage:hover{background:var(--yellow); color:#131313;}

/* La fenêtre de connexion : un courriel, un lien, pas de mot de passe. */
.dialogue{border:3px solid var(--line); box-shadow:var(--shadow); background:var(--card); color:var(--ink); padding:0; max-width:460px; width:calc(100% - 32px);}
.dialogue::backdrop{background:rgba(19,19,19,.55);}
.dialogue-corps{display:flex; flex-direction:column; gap:12px; padding:22px;}
.dialogue-boutons{display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap;}

/* ---------- La bande des projets challengés (accueil) ----------
   Même bande jaune que DossierQuébec : grand titre, trois cartes blanches à ombre dure. */
.bande-defis{background:var(--yellow); color:#131313; border-top:3px solid #131313; border-bottom:3px solid #131313; padding:46px 0 50px;}
.defis-titre{margin:0; font-weight:900; font-size:clamp(26px,3.6vw,42px); line-height:1.05; text-transform:uppercase; letter-spacing:-.01em;}
.defis-sous{margin:8px 0 22px; font-size:14px; font-weight:600;}
.defis-plus{margin:0 0 18px; background:#FFFFFF; color:#131313; border-color:#131313;}
.defis-grille{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px;}
.defi-carte{
  background:#FFFFFF; color:#131313; border:3px solid #131313; box-shadow:6px 6px 0 #131313;
  padding:18px 20px; display:flex; flex-direction:column; gap:10px; cursor:pointer;
}
.defi-carte-tete{display:flex; justify-content:space-between; align-items:center; gap:10px;}
.defi-numero{font-weight:900; color:#C8102E; font-size:15px;}
.defi-carte-titre{margin:0; font-weight:700; font-size:17px; line-height:1.3; flex:1;}
.defi-etape{
  margin:0; padding-top:10px; border-top:2px solid #131313; font-family:'Archivo Narrow',sans-serif;
  font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:#555550;
}
.defi-carte .bouton-defi{background:#FFFFFF; color:#131313; border-color:#131313;}
.defi-carte .bouton-defi.actif{background:#131313; color:var(--yellow);}
.defi-carte .bouton-partage{background:#FFFFFF; color:#131313; border-color:#131313;}
.partage-gauche{justify-content:flex-start;}
.defis-vide{background:#FFFFFF; border:2px dashed #131313; padding:22px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px;}
.defis-vide .bouton-defi{text-decoration:none; background:#FFFFFF; color:#131313; border-color:#131313;}
@media (max-width:900px){ .defis-grille{grid-template-columns:1fr;} }
/* « .bande .colonne » est en flex (l'icône à côté du texte de l'alerte) : la bande des
   projets challengés s'empile, titre au-dessus des cartes. Même spécificité, écrite après. */
.bande-defis .colonne{display:block;}
.bande-defis{margin:0;}

/* Les projets récemment actifs, sous la bande jaune de l'accueil (mêmes cartes que /bills). */
.recents-accueil{display:flex; flex-direction:column; gap:12px; padding-top:40px; padding-bottom:44px;}
.recents-accueil .titre-groupe{margin:0;}
.recents-indice{margin:-4px 0 6px; text-transform:none; letter-spacing:0;}
.recents-accueil > .lien-source{align-self:flex-start; margin-top:6px;}

/* « What's new » et « Petitions », côte à côte sous les projets récents (comme DQ). */
.accueil-deux{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:44px; padding-top:30px; padding-bottom:54px;}
.accueil-deux section{display:flex; flex-direction:column; gap:12px; min-width:0;}
.grand-titre{margin:0; font-weight:900; font-size:clamp(28px,3.4vw,44px); line-height:1.02; text-transform:uppercase; letter-spacing:-.01em;}
.sous-grand-titre{margin:-4px 0 6px; text-transform:none; letter-spacing:0;}
.encadre-neuf{border:3px solid var(--line); padding:14px 16px; background:var(--card); font-size:14px; line-height:1.55; color:var(--slate);}
.jour-neuf{border-left:4px solid var(--gold); padding:2px 0 2px 16px; display:flex; flex-direction:column; gap:6px;}
.date-neuf{margin:0; font-family:'Archivo Narrow',sans-serif; font-weight:800; font-size:12.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--gold);}
.liste-neuf, .liste-petitions{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}
.liste-neuf li{font-size:15px; line-height:1.45;}
.liste-neuf a:not(.lien-source){color:var(--ink); font-weight:700; text-decoration:none;}
.liste-neuf a:not(.lien-source):hover{color:var(--gold);}
.petitions-chiffres{margin:0; font-weight:800; font-size:15px;}
.liste-petitions li{display:flex; flex-direction:column; gap:2px; padding-bottom:8px; border-bottom:1px solid var(--line-soft); font-size:15px;}
.liste-petitions .legende{text-transform:none; letter-spacing:0;}
.petitions .bouton-source{margin-top:6px;}
.petitions > .lien-source{align-self:flex-start;}
@media (max-width:900px){ .accueil-deux{grid-template-columns:1fr;} }

/* La carte d'un·e député·e, sur le plan des cartes de ministres de DQ : parti, NOM, rôle en
   couleur, puis trois faits alignés et le courriel en pied. */
.carte-depute{gap:8px; padding:16px 18px;}
.depute-tete{display:flex; justify-content:space-between; align-items:center;}
.depute-nom{margin:4px 0 0; font-weight:900; font-size:17px; line-height:1.2; text-transform:uppercase; letter-spacing:.01em;}
.depute-nom a{color:var(--ink); text-decoration:none;}
.depute-nom a:hover{color:var(--gold);}
.depute-role{margin:0; font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:12px; line-height:1.35; text-transform:uppercase; letter-spacing:.04em; color:var(--gold);}
.depute-adjoint{color:var(--slate); text-transform:none; letter-spacing:0; font-style:italic; font-size:13px;}
.depute-faits{margin:auto 0 0; padding-top:12px; display:flex; flex-direction:column; gap:5px;}
.depute-faits div{display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line-soft); padding-bottom:4px;}
.depute-faits dt{font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--slate);}
.depute-faits dd{margin:0; font-weight:700; font-size:13.5px; text-align:right;}
.depute-courriel{font-size:12px; color:var(--gold); text-decoration:underline; text-underline-offset:2px; word-break:break-all;}
.tete-section{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; margin:34px 0 16px;}

/* Une section repliable derrière son grand titre (le Conseil des ministres). */
.section-pli > summary{cursor:pointer; list-style:none; border:3px solid var(--line); box-shadow:var(--shadow); background:var(--card); padding:14px 18px; margin:34px 0 16px; align-items:center;}
.section-pli > summary::-webkit-details-marker{display:none;}
.section-pli > summary .grand-titre::before{content:'+ '; color:var(--gold);}
.section-pli[open] > summary .grand-titre::before{content:'− ';}
.section-pli > summary:hover{background:var(--yellow); color:#131313;}
.section-pli > summary:hover .legende{color:#131313;}
.titre-partis{margin-top:40px;}
.section-pli + .section-pli > summary{margin-top:14px;}
/* Les boutons de partis : un cran sous les deux grands groupes, sur une seule ligne. */
.pli-parti > summary{padding:10px 16px;}
.pli-parti .grand-titre{font-size:clamp(18px,2.2vw,26px);}

/* La flèche « haut de page » (toutes les pages), le même carré jaune que DQ. */
.haut-de-page{
  position:fixed; right:22px; bottom:22px; z-index:50; width:46px; height:46px;
  background:var(--yellow); color:#131313; border:3px solid #131313; box-shadow:4px 4px 0 #131313;
  font-size:22px; font-weight:900; line-height:1; cursor:pointer;
}
.haut-de-page:hover{transform:translate(-1px,-1px); box-shadow:5px 5px 0 #131313;}
.haut-de-page[hidden]{display:none;}
@media (max-width:600px){ .haut-de-page{right:14px; bottom:14px; width:42px; height:42px;} }

/* ---------- Présence aux votes (comme DQ) ---------- */
.taux{display:inline-block; border:2px solid var(--ink); padding:1px 8px; font-weight:800; font-size:13px; background:var(--card); color:var(--ink); white-space:nowrap;}
.taux-vert{background:#1E7B45; color:#fff;}
.taux-jaune{background:#FFD24A; color:#131313;}
.taux-detail{font-size:12px; color:var(--slate);}
.presence p{margin:8px 0; line-height:1.55;}
.presence-titre{margin:0 0 10px; font-family:'Archivo Narrow',sans-serif; text-transform:uppercase; letter-spacing:.03em; font-size:17px;}
.presence-barre{position:relative; height:14px; max-width:640px; border:2px solid var(--ink); background:var(--card); margin:30px 0 4px;}
.presence-barre span{position:absolute; top:0; bottom:0;}
.presence-barre .zone-jaune{background:#FFD24A; border-left:2px solid var(--ink);}
.presence-barre .zone-vert{background:#1E7B45; border-left:2px solid var(--ink);}
.presence-barre .repere-mediane{top:-22px; bottom:auto; transform:translateX(-50%); font-size:12px; font-weight:800; white-space:nowrap;}
.presence-bornes{display:flex; justify-content:space-between; max-width:644px; font-size:12px; font-weight:700; color:var(--slate);}
.presence-note{font-size:13px; color:var(--slate); border-top:1px solid var(--line-soft); padding-top:10px;}

/* Contrôles de l'en-tête, comme DQ : A− 100 % A+ dans une seule boîte, lune ou soleil pour le thème. */
.controles > .groupe-taille{display:flex; align-items:center; gap:2px; padding:0 4px; cursor:default; border-width:2px;}
.controles > .groupe-taille:hover{background:var(--card); color:var(--ink);}
.groupe-taille button{border:0; background:none; color:inherit; font:inherit; font-weight:800; font-size:13px; padding:0 10px; height:100%; cursor:pointer;}
.groupe-taille button:hover{background:var(--yellow); color:var(--sur-clair);}
.niveau-taille{font-size:11px; font-weight:700; color:var(--gold); min-width:36px; text-align:center;}
.controles > .bouton-theme{width:var(--h-ctrl); padding:0; display:grid; place-items:center; border-width:2px;}
.bouton-theme svg{width:18px; height:18px;}
.bouton-theme .icone-soleil{display:none;}
:root[data-theme="dark"] .bouton-theme .icone-lune{display:none;}
:root[data-theme="dark"] .bouton-theme .icone-soleil{display:block;}
.controles > [data-action="langue"]{border-width:2px; font-weight:800;}
.actions-petitions{display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px; margin-top:18px;}
.actions-petitions .bouton-source{margin:0;}
.actions-petitions .lien-source{font-size:14px; font-weight:700; margin:0;}
.plus-projets{display:block; width:100%; margin:14px 0 8px; padding:12px; font-size:14px; font-weight:800; border:3px solid var(--ink); background:var(--card); box-shadow:4px 4px 0 var(--ink); cursor:pointer;}
.plus-projets:hover{background:var(--yellow); color:var(--sur-clair);}
/* Lois omnibus : la pastille, l'avis, et une tête par annexe dans le résumé. */
.pastille-omnibus{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.avis-omnibus{border-left:4px solid var(--gold); padding:6px 10px; margin:0 0 12px; font-size:14px; line-height:1.5; background:var(--paper-2);}
.annexe-titre{margin:16px 0 4px; font-size:15px; line-height:1.35;}
.annexe-titre span{display:inline-block; font-family:'Archivo Narrow',sans-serif; text-transform:uppercase; letter-spacing:.04em; font-size:11px; background:var(--gold); color:#fff; padding:2px 6px; margin-right:6px; vertical-align:2px;}
/* Une seule rangée : marque, onglets, contrôles. Sous ~1100 px, les onglets passent
   dessous, sur toute la largeur. */
.entete-rang > .onglets{padding:0; margin:0 auto 0 4px; max-width:none; flex:0 1 auto; gap:2px; flex-wrap:nowrap;}
.entete-rang > .onglets a{padding:6px 9px; white-space:nowrap;}
@media (max-width:1100px){ .entete-rang > .onglets{order:3; flex-basis:100%; margin:0; flex-wrap:wrap;} }

/* ---------- Lexique en couleur ----------
   Une teinte par groupe, prise dans la palette du site (rouge de l'Ontario, jaune commun,
   noir) — jamais une couleur de parti. --t : la teinte ; --t-txt : le texte posé dessus ;
   --t-pale : le fond clair de l'explication. */
.teinte-0{--t:#C8102E; --t-txt:#fff; --t-pale:#fde8e6;}
.teinte-1{--t:#FFD24D; --t-txt:#131313; --t-pale:#fff6d6;}
.teinte-2{--t:#131313; --t-txt:#fff; --t-pale:#ecebe6;}
.teinte-3{--t:#851420; --t-txt:#fff; --t-pale:#f6e3e3;}
.teinte-4{--t:#E8A200; --t-txt:#131313; --t-pale:#fdf0cf;}
:root[data-theme="dark"] .groupe-lex, :root[data-theme="dark"] .raccourcis a{--t-pale:var(--paper-2);}
:root[data-theme="dark"] .teinte-2{--t:#F3F1EA; --t-txt:#131313;}

.raccourcis a[class^="teinte-"]{border-left:8px solid var(--t);}
.raccourcis a b{display:inline-grid; place-items:center; width:20px; height:20px; margin-right:4px;
  background:var(--t); color:var(--t-txt); font-size:11px;}

.groupe-lex{margin:34px 0 10px;}
.titre-lex{display:flex; align-items:center; gap:14px; margin:0 0 14px; padding:12px 16px;
  background:var(--t); color:var(--t-txt); border:3px solid var(--ink); box-shadow:5px 5px 0 var(--ink);
  font-size:26px; font-weight:900; text-transform:uppercase; letter-spacing:-.01em; line-height:1.1;}
.titre-lex .compte{margin-left:auto; font-size:13px; font-weight:800; background:var(--card); color:var(--ink);
  border:2px solid var(--ink); padding:2px 9px;}
.num-lex{flex:none; display:grid; place-items:center; width:40px; height:40px; background:var(--card); color:var(--ink);
  border:3px solid var(--ink); font-size:20px;}
.groupe-lex .explication{background:var(--t-pale); border-left:8px solid var(--t);}
.carte-lex{border-top:8px solid var(--t);}
.carte-lex .carte-titre{display:inline; background:linear-gradient(transparent 60%, color-mix(in srgb, var(--t) 35%, transparent) 60%);}

/* Pied de page : Facebook, code source, « Construit avec Claude et moi » */
.pied-liens{align-items:center;}
.lien-icone{display:inline-flex; align-items:center; gap:6px;}
.lien-icone svg{width:15px; height:15px;}
.pied-claude{font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:13px; text-transform:uppercase;
  letter-spacing:.06em; color:#B8B4AA;}
.pied-liens a.pied-etmoi{margin-left:4px; color:var(--yellow); font-size:inherit;}
.pied-etmoi:hover{text-decoration:underline;}

.journal{list-style:none; margin:0; padding:0;}
.journal li{padding:7px 0; border-bottom:1px solid var(--line-soft); font-size:14px; line-height:1.5;}
.journal time{display:inline-block; min-width:118px; font-family:'Archivo Narrow',sans-serif; font-weight:700;
  font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--gold);}

/* ---------- « et moi » : le bloc du créateur, recopié de DQ (commun/dq.css, .createur) ---------- */
.createur{max-width:760px; background:var(--card); border:1.5px solid var(--line); box-shadow:6px 6px 0 var(--ink); padding:22px 26px; margin:0 0 36px;}
.createur-tete{display:flex; align-items:center; gap:24px;}
.createur-mot{margin:20px 0 0;}
.createur-mot p{font-size:15.5px; line-height:1.65; color:var(--ink); margin:0 0 11px; max-width:62ch;}
.createur-mot p:last-child{margin-bottom:0;}
.createur-lead{font-weight:700; border-left:5px solid var(--yellow); padding-left:12px;}
.createur-photo{flex:none; width:120px; height:120px; border-radius:50% !important; object-fit:cover; border:2px solid var(--line); background:var(--paper-2);}
.createur-bulle{position:relative; display:flex; flex-direction:column; gap:3px; min-width:0;
  background:var(--paper-2); border:1.5px solid var(--line); padding:14px 20px 15px; font-size:14px; line-height:1.45; color:var(--ink);}
.createur-bulle::before, .createur-bulle::after{content:''; position:absolute; top:50%; border-style:solid; border-color:transparent;}
.createur-bulle::before{left:-13px; margin-top:-12px; border-width:12px 13px 12px 0; border-right-color:var(--line);}
.createur-bulle::after{left:-10px; margin-top:-10px; border-width:10px 11px 10px 0; border-right-color:var(--paper-2);}
.createur-nom{font-family:'Archivo',sans-serif; font-weight:600; font-size:21px; line-height:1.2; margin-top:2px;}
.createur-nom::after{content:''; display:block; width:120px; max-width:100%; height:3px; margin:7px 0 4px; background:#A9782E;}
@media (max-width:560px){
  .createur{padding:16px;}
  .createur-tete{gap:18px;}
  .createur-mot p{font-size:15px;}
  .createur-photo{width:84px; height:84px;}
  .createur-bulle{padding:11px 14px 12px; font-size:13.5px;}
  .createur-nom{font-size:18px;}
}