/* ══════════════════════════════════════════════════════════════════════════
   LE SOCLE DES PAGES REFAITES

   Les index /villes et /comparatifs portaient chacun leur copie des mêmes
   jetons, du même héros, de la même plaque de clôture. Trois pages de plus
   auraient fait cinq copies. Tout ce qui se répète vit donc ici, préfixé
   `pg-`, et chaque page ne garde dans sa feuille que ce qui lui est propre.

   Deux règles qui ont coûté cher ailleurs, et qui sont tenues ici :

   · Aucun gradient décoratif. Les seuls dégradés autorisés sont de matière —
     même teinte neutre, moins de 5 % d'écart de luminance, sur la face d'une
     surface — et il n'y en a aucun dans ce fichier : que du relief.

   · L'encre discrète n'est pas `var(--text-muted)`. Le jeton global vaut
     #616671, qui ne mesure que 4,46:1 sur le creux #DCE3EE — juste sous le
     seuil. `--pg-ink3` vaut #565B66, qui passe partout (5,27:1 sur le creux,
     6,04:1 sur la carte).

   ── LES COULEURS DE LA MARQUE, ET POURQUOI ELLES ÉTAIENT PARTIES ─────────
   Le rose #FF91E4 mesure 1,64:1 sur le sol et le bleu #068FFF 2,67:1 : ni
   l'un ni l'autre ne peut porter du texte, même en grand. La première version
   de ce socle a donc plongé les deux vers des encres très sombres, et la page
   est devenue grise. C'était un excès : entre l'accent pur, illisible, et
   l'encre presque noire, il y a toute une plage qui reste franchement rose et
   franchement bleue.

     grand texte (seuil 3:1)   --pg-bleu-t #0B7ACC (3,65 sol) · --pg-rose-t #C9479F (3,49 sol)
     texte courant (4,5:1)     --pg-bleu-i #0A6FBF (4,88 carte) · --pg-rose-i #BE3A93 (4,68 carte)
     fond creusé, petit texte  --pg-bleu-s #0A5A9E · --pg-rose-s #A8317F

   Et surtout : l'accent PUR revient là où il est chez lui — en APLAT. Une
   plaque rose #FF91E4 portant l'encre #16181F mesure 8,8:1, le bleu 5,39, le
   vert 8,74. C'est là que la marque doit se voir, pas dans la couleur des
   paragraphes.
   ══════════════════════════════════════════════════════════════════════════ */

.pg {
  --pg-carte: #F5F8FC;
  --pg-creux: #DCE3EE;
  --pg-plaque: #DDE4EF;
  --pg-ink: var(--text-primary, #33363D);
  --pg-ink2: var(--text-secondary, #5A5F6B);
  --pg-ink3: #565B66;
  /* Les accents purs, pour les aplats uniquement. */
  --pg-rose: #FF91E4;
  --pg-bleu: #068FFF;
  --pg-vert: #00D084;
  --pg-orange: #FF6B2B;
  /* Les titres : seuil 3:1, on reste vif. */
  --pg-bleu-t: #0B7ACC;
  --pg-rose-t: #C9479F;
  /* Le texte courant : seuil 4,5:1. */
  --pg-bleu-i: #0A6FBF;
  --pg-rose-i: #BE3A93;
  --pg-vert-i: #0A6A4A;
  --pg-orange-i: #9A4415;
  /* Sur un fond creusé, il faut descendre d'un cran. */
  --pg-bleu-s: #0A5A9E;
  --pg-rose-s: #A8317F;
  --pg-trait: rgba(163, 177, 198, 0.40);
  --pg-porte: 0 14px 34px -14px rgba(80, 100, 130, 0.24);
  --pg-porte-h: 0 22px 46px -16px rgba(80, 100, 130, 0.34);
  --pg-creuse: inset 3px 3px 8px rgba(120, 136, 160, .42), inset -3px -3px 8px rgba(255, 255, 255, .7);
  --pg-rayon: 20px;
  --pg-ease: cubic-bezier(.22, 1, .36, 1);
  font-family: var(--font-montserrat, system-ui), sans-serif;
  color: var(--pg-ink);
  padding: calc(var(--nav-h, 64px) + 34px) 0 92px;
}
.pg-in { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.pg-in--etroit { max-width: 860px; }

/* ── Le fil d'Ariane ── */
.pg-fil { display: flex; gap: 9px; font-size: 12.5px; color: var(--pg-ink3); margin: 0 0 26px; }
.pg-fil a { color: var(--pg-ink2); text-decoration: none; }
.pg-fil a:hover { color: var(--pg-ink); }

/* ── Le héros ── */
.pg-heros { max-width: 46rem; margin: 0 0 clamp(40px, 5vw, 60px); }
.pg-heros--centre { max-width: 52rem; margin-left: auto; margin-right: auto; text-align: center; }
/* Les surtitres vivent sur le SOL (#E3E8EF), pas sur une carte : à 11,5 px
   ils relèvent du texte courant, seuil 4,5:1. Le rose de texte n'y monte qu'à
   4,05 et le bleu à 4,22 — il faut descendre d'un cran. Ce sont les gros
   titres qui portent les teintes vives, et eux n'ont que 3:1 à tenir. */
.pg-sur { font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--pg-rose-s); margin: 0 0 14px; }
.pg-h1 { font-size: clamp(32px, 4.6vw, 56px); font-weight: 800; letter-spacing: -.032em;
  line-height: 1.06; margin: 0 0 20px; text-wrap: balance; }
.pg-h1 em { font-style: normal; color: var(--pg-bleu-t); }
.pg-h1 i { font-style: normal; color: var(--pg-rose-t); }
.pg-chapo { font-size: clamp(15.5px, 1.5vw, 18px); line-height: 1.62; color: var(--pg-ink2); margin: 0; }
.pg-heros--centre .pg-chapo { margin-left: auto; margin-right: auto; }

/* ── Les titres de section ── */
.pg-sec { margin-top: clamp(52px, 6.5vw, 86px); }
/* Le surtitre de section porte le bleu, celui du héros le rose : l'œil sait
   où il est dans la page sans lire. */
.pg-sur2 { font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--pg-bleu-s); margin: 0 0 10px; }
.pg-h2 em { font-style: normal; color: var(--pg-bleu-t); }
.pg-h2 i { font-style: normal; color: var(--pg-rose-t); }
.pg-h2 { font-size: clamp(24px, 3vw, 36px); font-weight: 800; letter-spacing: -.028em;
  line-height: 1.12; margin: 0 0 12px; text-wrap: balance; }
.pg-intro { font-size: 15px; line-height: 1.62; color: var(--pg-ink2); margin: 0 0 26px; max-width: 66ch; }

/* ── Les touches ──────────────────────────────────────────────────────────
   Un bouton ne se souligne jamais : le socle l'impose globalement, mais on
   le répète ici pour que la règle voyage avec le composant. */
.pg-b1, .pg-b2 {
  display: inline-flex; align-items: center; gap: 9px; padding: 14px 24px;
  border-radius: 14px; font-size: 14.5px; font-weight: 700; letter-spacing: -.012em;
  text-decoration: none; border: 0; cursor: pointer; font-family: inherit;
  transition: transform .26s var(--pg-ease), box-shadow .26s var(--pg-ease), background .22s var(--pg-ease);
}
.pg-b1 { background: #FF91E4; color: #16181F;
  box-shadow: 0 12px 30px rgba(255, 145, 228, .26), 0 2px 6px rgba(0, 0, 0, .14); }
.pg-b1:hover { background: #FFA6EA; transform: translateY(-2px); }
.pg-b1:active { background: #F07FD2; transform: translateY(0);
  box-shadow: inset 3px 4px 9px rgba(120, 40, 95, .45), inset -2px -2px 6px rgba(255, 255, 255, .3); }
.pg-b2 { background: var(--pg-carte); color: var(--pg-ink); box-shadow: var(--pg-porte); }
.pg-b2:hover { transform: translateY(-2px); box-shadow: var(--pg-porte-h); }
.pg-b1 svg, .pg-b2 svg { width: 15px; height: 15px; flex: 0 0 auto; }
.pg-actes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.pg-heros--centre .pg-actes { justify-content: center; }

/* ── La carte ── */
.pg-carte { position: relative; display: flex; flex-direction: column;
  padding: 24px 22px; border-radius: var(--pg-rayon);
  background: var(--pg-carte); box-shadow: var(--pg-porte); overflow: hidden; }
a.pg-carte { text-decoration: none; color: inherit;
  transition: transform .26s var(--pg-ease), box-shadow .26s var(--pg-ease); }
a.pg-carte:hover { transform: translateY(-3px); box-shadow: var(--pg-porte-h); }
a.pg-carte:focus-visible { outline: 2px solid var(--pg-bleu-i); outline-offset: 3px; }
.pg-carte b, .pg-carte-p b { color: var(--pg-ink); font-weight: 700; }
.pg-carte-t { font-size: 17.5px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; }
.pg-carte-p { font-size: 14px; line-height: 1.6; color: var(--pg-ink2); margin: 0; }

/* ── La pastille d'icône ──────────────────────────────────────────────────
   Teinte pâle, encre foncée. L'accent pur ne tient pas les 3:1 exigés d'un
   objet graphique sur une surface claire : rose 1,89 · vert 1,90 ·
   orange 2,67 · bleu 3,09 sur la carte. Les encres montent au-dessus de 5. */
.pg-pastille { display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; margin: 0 0 16px; border-radius: 16px;
  background: var(--pg-teinte, var(--pg-creux)); color: var(--pg-encre, var(--pg-bleu-i));
  transition: transform .26s var(--pg-ease); }
.pg-pastille svg { width: 26px; height: 26px; display: block; }
a.pg-carte:hover .pg-pastille { transform: translateY(-2px) rotate(-2deg); }
.pg--bleu   { --pg-teinte: #D4E9FC; --pg-encre: var(--pg-bleu-s);   --pg-lisere: var(--pg-bleu); }
.pg--vert   { --pg-teinte: #D3F2EB; --pg-encre: var(--pg-vert-i);   --pg-lisere: var(--pg-vert); }
.pg--rose   { --pg-teinte: #F6EAF9; --pg-encre: var(--pg-rose-s);   --pg-lisere: var(--pg-rose); }
.pg--orange { --pg-teinte: #F6E4DF; --pg-encre: var(--pg-orange-i); --pg-lisere: var(--pg-orange); }
.pg-carte--lisere::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--pg-lisere, transparent); }

/* ── Le bandeau de repères, creusé dans la page ── */
.pg-reperes { display: grid; grid-template-columns: repeat(var(--pg-cols, 4), 1fr); gap: 4px;
  background: var(--pg-creux); box-shadow: var(--pg-creuse); border-radius: var(--pg-rayon);
  padding: 22px 18px; }
.pg-repere { display: flex; flex-direction: column; gap: 5px; align-items: center;
  text-align: center; padding: 4px 8px; }
.pg-repere + .pg-repere { border-left: 1px solid var(--pg-trait); }
.pg-repere-v { font-size: clamp(21px, 2.6vw, 30px); font-weight: 800; letter-spacing: -.028em;
  color: var(--pg-ink); font-variant-numeric: tabular-nums; }
.pg-repere-l { font-size: 12.5px; line-height: 1.4; color: var(--pg-ink3); }

/* ── La plaque de clôture ── */
.pg-cadre { margin: clamp(52px, 6.5vw, 86px) 0 0; padding: clamp(26px, 3.4vw, 40px);
  background: var(--pg-plaque); box-shadow: var(--pg-creuse); border-radius: 26px; }
.pg-cadre-t { font-size: clamp(20px, 2.3vw, 28px); font-weight: 800; letter-spacing: -.024em;
  margin: 0 0 12px; text-wrap: balance; }
.pg-cadre-p { font-size: 15px; line-height: 1.65; color: var(--pg-ink2); margin: 0; max-width: 64ch; }

/* ── Les pages voisines ── */
.pg-voisines { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; }
.pg-voisines a { padding: 10px 18px; border-radius: 100px; background: var(--pg-carte);
  box-shadow: var(--pg-porte); color: var(--pg-ink2); font-size: 13px; font-weight: 700;
  text-decoration: none; transition: transform .22s var(--pg-ease), color .22s var(--pg-ease); }
.pg-voisines a:hover { transform: translateY(-2px); color: var(--pg-ink); }

/* ── Les grilles ──────────────────────────────────────────────────────────
   Aucune carte seule sur son rang : à nombre connu on écrit le nombre de
   colonnes, jamais un `auto-fit` qui laisse le navigateur décider et finit
   par isoler la dernière. */
.pg-g2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.pg-g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pg-g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

@media (max-width: 1000px) {
  .pg-g4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .pg-g3 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .pg-g3 { grid-template-columns: 1fr; }
  .pg-reperes { grid-template-columns: repeat(2, 1fr); gap: 16px 4px; }
  .pg-repere:nth-child(3) { border-left: 0; }
}
@media (max-width: 560px) {
  .pg-g2, .pg-g4 { grid-template-columns: 1fr; }
  .pg-reperes { grid-template-columns: 1fr; gap: 18px; padding: 20px 16px; }
  .pg-repere + .pg-repere { border-left: 0; border-top: 1px solid var(--pg-trait); padding-top: 16px; }
  .pg-actes .pg-b1, .pg-actes .pg-b2 { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .pg-b1, .pg-b2, a.pg-carte, .pg-pastille, .pg-voisines a { transition: none; }
  .pg-b1:hover, .pg-b2:hover, a.pg-carte:hover, .pg-voisines a:hover { transform: none; }
  a.pg-carte:hover .pg-pastille { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   LES COMPOSANTS QUI NE SONT PAS DES CARTES

   Reproche fondé : une page faite de grilles de trois puis de quatre cartes
   se lit comme un tableau de bord, pas comme un discours. Ce qui suit donne
   de quoi rompre le rythme — un aplat de marque pleine page, un flux relié,
   des rangs asymétriques, une bande de pastilles.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── L'aplat de marque ────────────────────────────────────────────────────
   Un bloc plein, dans la couleur pure, avec l'encre sombre : rose 8,8:1,
   bleu 5,39:1, vert 8,74:1. C'est ici que la marque se voit — pas dans la
   couleur des paragraphes. */
.pg-aplat {
  position: relative; overflow: hidden;
  margin: clamp(52px, 6.5vw, 86px) 0 0;
  padding: clamp(30px, 4vw, 52px);
  border-radius: 28px;
  background: var(--pg-fond, var(--pg-rose));
  color: #16181F;
  box-shadow: 0 24px 60px -24px rgba(80, 100, 130, .5);
}
.pg-aplat--rose { --pg-fond: var(--pg-rose); }
.pg-aplat--bleu { --pg-fond: var(--pg-bleu); }
.pg-aplat--vert { --pg-fond: var(--pg-vert); }
.pg-aplat-sur { font-size: 11.5px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; margin: 0 0 12px; opacity: .72; }
.pg-aplat-t { font-size: clamp(24px, 3.2vw, 40px); font-weight: 800; letter-spacing: -.03em;
  line-height: 1.08; margin: 0 0 14px; text-wrap: balance; }
.pg-aplat-p { font-size: clamp(15px, 1.5vw, 17px); line-height: 1.62; margin: 0; max-width: 60ch; }
/* Sur l'aplat, la touche s'inverse : encre pleine, texte clair. C'est le seul
   endroit où le noir devient le bouton. */
.pg-aplat .pg-b1 { background: #16181F; color: #FFFFFF; box-shadow: 0 10px 26px rgba(0, 0, 0, .28); }
.pg-aplat .pg-b1:hover { background: #24272F; }
.pg-aplat .pg-b2 { background: rgba(255, 255, 255, .92); color: #16181F; box-shadow: none; }
/* Un semis de points, pas un dégradé : les deux arrêts sont à 1,6 et 1,7 px,
   donc chaque point est un disque plein et il n'y a aucune transition. C'est
   la technique déjà employée par `.dots-bg` sur l'accueil — ne pas la
   « corriger » en croyant voir un dégradé. */
.pg-aplat::after {
  content: ''; position: absolute; right: -40px; bottom: -60px;
  width: 280px; height: 280px; pointer-events: none; opacity: .18;
  background-image: radial-gradient(circle, #16181F 1.6px, transparent 1.7px);
  background-size: 16px 16px;
}

/* ── Le flux relié ────────────────────────────────────────────────────────
   Des étapes tenues par une vraie ligne, pas trois cartes posées côte à côte.
   Le trait passe DERRIÈRE les pastilles et s'arrête au dernier point. */
.pg-flux { position: relative; display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
.pg-flux::before {
  content: ''; position: absolute; left: 25px; top: 26px; bottom: 26px; width: 3px;
  background: var(--pg-trait); border-radius: 3px;
}
.pg-flux li { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 20px; align-items: start; }
.pg-flux-p {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 16px;
  background: var(--pg-fond, var(--pg-bleu)); color: #16181F;
  font-size: 19px; font-weight: 800; line-height: 1;
  box-shadow: 0 10px 24px -10px rgba(80, 100, 130, .55);
}
.pg-flux-t { font-size: 17.5px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; }
.pg-flux-d { font-size: 14.5px; line-height: 1.62; color: var(--pg-ink2); margin: 0; max-width: 62ch; }
.pg-flux-d b { color: var(--pg-ink); font-weight: 700; }

@media (min-width: 861px) {
  /* En large, le flux devient horizontal et la ligne traverse la page. */
  .pg-flux { grid-template-columns: repeat(3, 1fr); gap: 26px; }
  .pg-flux::before { left: 26px; right: 26px; top: 26px; bottom: auto; width: auto; height: 3px; }
  .pg-flux li { grid-template-columns: 1fr; gap: 16px; }
}

/* ── Les rangs asymétriques ───────────────────────────────────────────────
   Un visuel d'un côté, le texte de l'autre, et on alterne d'un rang au
   suivant. Rien à voir avec une grille : chaque rang se lit comme une scène. */
.pg-bascule { display: grid; gap: clamp(30px, 4vw, 58px); }
.pg-bascule > * {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 3vw, 44px); align-items: center;
}
.pg-bascule > *:nth-child(even) > *:first-child { order: 2; }
.pg-bascule-t { font-size: clamp(20px, 2.4vw, 28px); font-weight: 800; letter-spacing: -.026em;
  line-height: 1.14; margin: 0 0 10px; text-wrap: balance; }
.pg-bascule-p { font-size: 15px; line-height: 1.64; color: var(--pg-ink2); margin: 0; }
.pg-bascule-p b { color: var(--pg-ink); font-weight: 700; }
.pg-visuel {
  border-radius: 24px; overflow: hidden; line-height: 0;
  background: var(--pg-teinte, var(--pg-creux));
  box-shadow: var(--pg-creuse);
}
.pg-visuel svg { display: block; width: 100%; height: auto; }

/* ── La bande de pastilles ────────────────────────────────────────────────
   Une ligne de faits, chacun dans sa gélule colorée. Remplace avantageusement
   un bandeau de compteurs quand les valeurs ne sont pas des nombres. */
.pg-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pg-chips li {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 18px 10px 14px; border-radius: 100px;
  background: var(--pg-carte); box-shadow: var(--pg-porte);
  font-size: 13.5px; font-weight: 700; color: var(--pg-ink);
}
/* Les icônes des pastilles portent une seule encre, pas la palette : six
   points de six couleurs sur une même ligne, c'était un sapin. */
.pg-chips svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--pg-bleu-s); }
.pg-chips .pg-puce { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
  background: var(--pg-lisere, var(--pg-bleu)); }

@media (max-width: 860px) {
  .pg-bascule > * { grid-template-columns: 1fr; }
  .pg-bascule > *:nth-child(even) > *:first-child { order: 0; }
}

/* ── Les entrées au défilement ────────────────────────────────────────────
   Le socle du site gère `reveal` : une seule classe déclenche, la direction
   est un modificateur posé À CÔTÉ (`class="reveal reveal-left"`), et le
   masquage n'existe que sous `html.js-anime`. On ne redéfinit rien ici, on
   se contente d'un décalage en cascade pour les listes.
   Le masquage est gaté sur `.reveal` ET sur `js-anime`, pas seulement sur
   `js-anime` : l'observateur ne pose `visible` que sur les éléments qui
   portent `reveal`, donc un flux écrit sans cette classe restait masqué pour
   toujours. La première utilisation du composant, sur la page API, est
   tombée dans le piège — le rail se dessinait, les étapes jamais. Ainsi
   écrit, un flux sans `reveal` s'affiche simplement d'emblée. */
html.js-anime .pg-flux.reveal.visible li { transition: opacity .6s var(--pg-ease), transform .6s var(--pg-ease); }
html.js-anime .pg-flux.reveal:not(.visible) li { opacity: 0; transform: translateY(14px); }
html.js-anime .pg-flux.reveal.visible li:nth-child(1) { transition-delay: 0s; }
html.js-anime .pg-flux.reveal.visible li:nth-child(2) { transition-delay: .09s; }
html.js-anime .pg-flux.reveal.visible li:nth-child(3) { transition-delay: .18s; }
html.js-anime .pg-flux.reveal.visible li:nth-child(4) { transition-delay: .27s; }
html.js-anime .pg-flux.reveal.visible li { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.js-anime .pg-flux li,
  html.js-anime .pg-flux.reveal:not(.visible) li { transition: none; opacity: 1; transform: none; }
}


/* ── La liste à pointillés ────────────────────────────────────────────────
   Une tuile d'icône à gauche, le texte à droite, un filet POINTILLÉ entre
   chaque ligne. C'est le composant retenu contre les grilles de cartes : il
   se lit de haut en bas, il ne laisse jamais une carte seule sur son rang, et
   il encaisse trois entrées comme sept sans changer de mise en page. */
.pg-liste { margin: 0; padding: 0; list-style: none; }
.pg-liste li {
  display: grid; grid-template-columns: 62px 1fr; gap: 22px; align-items: start;
  padding: 26px 0; border-bottom: 1.5px dashed var(--pg-trait);
}
.pg-liste li:first-child { border-top: 1.5px dashed var(--pg-trait); }
.pg-tuile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 62px; height: 62px; border-radius: 16px;
  background: var(--pg-carte); box-shadow: var(--pg-porte);
  color: var(--pg-ink);
  transition: transform .26s var(--pg-ease), color .26s var(--pg-ease);
}
.pg-tuile svg { width: 26px; height: 26px; display: block; }
.pg-tuile--num { font-size: 22px; font-weight: 800; line-height: 1; }
.pg-liste li:hover .pg-tuile { transform: translateY(-2px); color: var(--pg-bleu-i); }
.pg-liste-t { font-size: 18px; font-weight: 800; letter-spacing: -.02em; margin: 6px 0; }
.pg-liste-t a { color: inherit; text-decoration: none; }
.pg-liste-t a:hover { color: var(--pg-bleu-i); }
.pg-liste-d { font-size: 14.5px; line-height: 1.62; color: var(--pg-ink2); margin: 0; max-width: 66ch; }
.pg-liste-d b { color: var(--pg-ink); font-weight: 700; }
/* Sur le sol, le bleu de texte tombe à 4,22:1 : on descend d'un cran. */
.pg-liste-d a { color: var(--pg-bleu-s); text-underline-offset: 2px; }
.pg-liste--compacte li { padding: 20px 0; }
.pg-liste--compacte .pg-liste-t { margin-top: 10px; }

@media (max-width: 620px) {
  .pg-liste li { grid-template-columns: 50px 1fr; gap: 16px; }
  .pg-tuile { width: 50px; height: 50px; border-radius: 14px; }
  .pg-tuile svg { width: 22px; height: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .pg-tuile { transition: none; }
  .pg-liste li:hover .pg-tuile { transform: none; }
}