/* Te Moni — pages indexables (/salaire). Complément de public/commun.css.

   commun.css porte tout le dessin, repris du calculateur qui fait foi. Ce fichier n'ajoute
   que deux choses : ce qui n'existe que sur ces pages — fil d'Ariane, listes de liens,
   tableaux qui défilent — et les corrections que leur balisage impose. Rien ici ne doit
   redéfinir une couleur, une police ou un espacement partagé : cela recréerait la
   divergence que la fusion vient de supprimer, et src/test.ts le refuse.

   L'ordre compte : cette feuille est chargée après commun.css, ses règles gagnent donc à
   spécificité égale. */

/* ── corrections imposées par le balisage ────────────────────────
   Sur le calculateur, la marque est un <span> : on est déjà chez soi. Ici c'est un lien de
   retour, et les règles de navigation de commun.css, écrites pour des liens ordinaires,
   le repeignaient en gris et le faisaient disparaître sous 600 px. */
/* `.nav a.marque` et non `a.marque` : la règle de commun.css qu'il s'agit de contrer est
   `.nav a:not(.bouton)`, dont la spécificité (0,2,1) l'emportait sur (0,1,1) — la marque
   restait grise et en 14,5 px. À spécificité égale, cette feuille étant chargée après,
   c'est elle qui gagne. */
.nav a.marque{color:var(--encre);text-decoration:none;font-size:17px}
@media (max-width:600px){ .nav a.marque{display:inline-block} }

/* Le bouton du hero est un <a> isolé, hors du conteneur flex de la barre de navigation :
   sans `inline-block`, ses marges verticales déborderaient de la ligne. */
.bouton{display:inline-block}

/* Le chapô de ces pages est un paragraphe, pas la ligne à icône du calculateur. */
.indice{max-width:64ch;text-wrap:pretty}

/* Les grilles indiciaires défilent horizontalement dans `.defiler` : leurs cellules ne
   doivent pas se replier, sauf la première colonne, qui porte le libellé de l'échelon. */
.defiler th,.defiler td{white-space:nowrap}
.defiler th:first-child,.defiler td:first-child{white-space:normal}
@media (max-width:560px){ .defiler table{min-width:420px} }

/* ── propre aux pages de contenu ─────────────────────────────── */

a:focus-visible,summary:focus-visible{outline:2px solid var(--lagon);outline-offset:3px}

section[id]{scroll-margin-top:76px}

/* Quand le bandeau de péremption s'affiche, l'en-tête grandit — d'une hauteur qui dépend du
   repli du texte, donc impossible à écrire en dur. Le calculateur la mesure en JavaScript ;
   ces pages n'exécutent rien, et se lisent de toute façon en défilant. On renonce donc à
   l'écran plein plutôt que de pousser les montants sous la ligne de flottaison — c'est le
   défaut qu'un « moins 64 px » écrit en dur produisait ici dès l'apparition du bandeau. */
.bandeau + main .hero{min-height:auto}

/* ── fil d'Ariane ────────────────────────────────────────── */
.fil{margin:0 0 26px}

.fil ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;
  font-size:13.5px;color:var(--encre2)}

.fil li+li::before{content:"›";margin-right:8px;color:var(--bord)}

.fil a{color:var(--encre2);text-decoration:none}

.fil a:hover{color:var(--lagon)}

/* L'équivalent statique d'un « mot » du calculateur : même pastille verte, sans chevron
   ni curseur, parce qu'il n'y a rien à ouvrir sur une page de contenu. */
.valeur{display:inline-block;font:inherit;letter-spacing:inherit;color:var(--lagon-fonce);
  border-bottom:2px solid var(--lagon);border-radius:4px 4px 0 0;
  background:var(--puce);margin:0 .04em;padding:.02em .3em;
  /* Comme la pastille du calculateur : bornée pour que la virgule qui suit reste collée,
     et en bloc en ligne pour qu'un nom long se replie dans la pastille au lieu de la
     couper en deux avec un soulignement en morceaux. */
  max-width:calc(100% - 1em)}

.action{margin:28px 0 0}

summary .compte{font:400 13.5px/1.4 var(--sans);color:var(--encre2)}

.corps p:last-child{margin-bottom:0}

/* ── tableaux ────────────────────────────────────────────── */
.defiler{overflow-x:auto;-webkit-overflow-scrolling:touch}

td.net{color:var(--lagon);font-weight:600}

td.indice{font-family:var(--mono);font-size:12.5px}

/* ── listes de liens ─────────────────────────────────────── */
.grille-liens{list-style:none;margin:0;padding:0;display:grid;gap:1px;
  background:var(--bord);border:1px solid var(--bord);border-radius:10px;overflow:hidden}

.grille-liens li{background:var(--fond);padding:15px 17px;font-size:15px}

.grille-liens a{text-decoration:none;font-weight:500}

.grille-liens a:hover{text-decoration:underline;text-underline-offset:3px}

.grille-liens .n{display:block;margin-top:3px;font-size:13px;color:var(--encre2)}

.apres{margin:26px 0 0;font-size:14.5px;color:var(--encre2)}