/* Extrait de src/retraite_notionnelle/web/gabarit.py par
   scripts/construire_donnees.py — ne pas modifier ici. */
:root {
  color-scheme: light dark;
  --fond: #fbfaf7;
  --fond-carte: #ffffff;
  --fond-appui: #f2efe9;
  --texte: #1b1a17;
  --texte-doux: #5c574d;
  --trait: #ddd7cb;
  /* Bordure des CHAMPS, distincte du filet décoratif : un contour de champ est
     ce qui dit où l'on peut écrire, et doit donc atteindre 3:1 sur les deux
     fonds qu'il sépare — celui du champ et celui de la carte qui le porte
     (WCAG 2.1, 1.4.11). Le filet `--trait` plafonne à 1,4:1 ; mesuré ici :
     3,38:1 sur le fond, 3,53:1 sur la carte. */
  --trait-champ: #8e887a;
  --accent: #7a2e1e;
  --accent-doux: #f0e2dd;
  --actuel: #03729a;
  --retroactif: #9e4334;
  --prospectif: #817f2a;
  --retroactif-employeur: #86538b;
  --prospectif-employeur: #107550;
  --liberal: #c04a9a;
  --alerte: #8a5a00;
  /* Palette des graphiques : neuf teintes, assez distinctes pour se suivre
     empilées, assez proches pour ne pas jurer avec le reste de la page. */
  --serie-1: #3f5c66;
  --serie-2: #a2472e;
  --serie-3: #6a6a4d;
  --serie-4: #7c5a86;
  --serie-5: #35705f;
  --serie-6: #b07d2b;
  --serie-7: #4a6f9c;
  --serie-8: #8a6552;
  --serie-9: #9a9186;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #16151a;
    --fond-carte: #1e1d23;
    --fond-appui: #26252c;
    --texte: #ece9e3;
    --texte-doux: #a5a099;
    --trait: #35333c;
    --trait-champ: #787581;
    --accent: #e08b6f;
    --accent-doux: #3a2820;
    --actuel: #3d9bc2;
    --retroactif: #cb745f;
    --prospectif: #837118;
    --retroactif-employeur: #a27dc0;
    --prospectif-employeur: #39a48a;
    --liberal: #c86bb0;
    --alerte: #e0b062;
    --serie-1: #8fb2c0;
    --serie-2: #e08b6f;
    --serie-3: #bcbc8e;
    --serie-4: #c39ccd;
    --serie-5: #79bda9;
    --serie-6: #e0b062;
    --serie-7: #8fabd4;
    --serie-8: #c8a08a;
    --serie-9: #b3aca2;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  /* En `rem` et non en pixels : une taille en pixels ignore la préférence de
     taille de police du navigateur, sur laquelle comptent ceux qui l'ont
     agrandie une fois pour toutes. 1,0625rem vaut les 17px d'origine quand la
     préférence n'a pas été touchée. */
  font-size: 1.0625rem;
  line-height: 1.6;
}
main { max-width: 60rem; margin: 0 auto; padding: 0 1.25rem; }
/* Lien d'évitement : premier élément parcouru au clavier, invisible tant qu'il
   n'a pas le focus. Sans lui, atteindre le contenu depuis la barre d'adresse
   impose de traverser les six liens de l'en-tête à chaque page (WCAG 2.4.1). Il
   n'est pas caché par `display:none`, qui le sortirait de l'ordre de tabulation
   : il est simplement remonté hors de l'écran. */
.evitement {
  position: absolute; left: 0.5rem; top: -4rem; z-index: 10;
  background: var(--fond-carte); color: var(--accent);
  border: 1px solid var(--accent); border-radius: 0 0 4px 4px;
  padding: 0.5rem 0.9rem; font-size: 0.92rem; text-decoration: none;
  transition: top 0.15s;
}
.evitement:focus { top: 0; }
/* `<main>` reçoit le focus au changement de page (voir index.html) : sans quoi
   le clavier repartirait du haut du document à chaque calcul. Il ne porte pas
   de contour pour autant — ce n'est pas un élément interactif, et le cerner
   tout entier n'apprendrait rien. */
main:focus { outline: none; }

header.bandeau {
  border-bottom: 1px solid var(--trait);
  background: var(--fond-carte);
  padding: 1.25rem 0 1rem;
  margin-bottom: 2rem;
}
header.bandeau .interieur {
  max-width: 60rem; margin: 0 auto; padding: 0 1.25rem;
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem;
  align-items: baseline; justify-content: space-between;
}
header.bandeau h1 { font-size: 1.2rem; margin: 0; letter-spacing: 0.01em; }
header.bandeau h1 a { color: inherit; text-decoration: none; }
nav a {
  color: var(--texte-doux); text-decoration: none;
  margin-left: 1.1rem; font-size: 0.92rem;
  border-bottom: 1px solid transparent;
}
nav a:hover, nav a[aria-current="page"] {
  color: var(--accent); border-bottom-color: var(--accent);
}
h2 { font-size: 1.35rem; margin: 2.5rem 0 0.75rem; font-weight: 600; }
h3 { font-size: 1.05rem; margin: 1.75rem 0 0.5rem; font-weight: 600; }
p { margin: 0.7rem 0; }
a { color: var(--accent); }
.chapeau { font-size: 1.08rem; color: var(--texte-doux); max-width: 44rem; }
.carte {
  background: var(--fond-carte); border: 1px solid var(--trait);
  border-radius: 6px; padding: 1.25rem 1.4rem; margin: 1.5rem 0;
}
.note {
  border-left: 3px solid var(--accent); background: var(--accent-doux);
  padding: 0.85rem 1.1rem; margin: 1.5rem 0; font-size: 0.95rem;
  border-radius: 0 4px 4px 0;
}
.note.avertissement { border-left-color: var(--alerte); }
.discret { color: var(--texte-doux); font-size: 0.9rem; }
/* Un champ des mentions légales que l'éditeur n'a pas encore renseigné. Il est
   marqué, et non masqué : un trou visible se comble, un trou discret reste. */
.a-completer {
  font-style: normal; color: var(--alerte);
  border-bottom: 1px dashed currentColor;
}
form .grille {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem 1.5rem;
}
/* Les aides de saisie n'ont pas toutes la même longueur : celle qui passe à la
   ligne décalait son champ d'un cran vers le bas, et les champs d'une même
   rangée ne s'alignaient plus. Chaque cellule devient une colonne dont le
   libellé absorbe la hauteur en trop ; les champs se posent alors sur la même
   ligne, quelle que soit l'aide au-dessus. */
form .grille > div { display: flex; flex-direction: column; }
form .grille > div > label { flex: 1 0 auto; }
label { display: block; font-size: 0.88rem; color: var(--texte-doux); margin-bottom: 0.25rem; }
/* Pas d'`opacity` ici : à 0,8 sur `--texte-doux`, l'aide tombait à 4,23:1 sur
   le fond clair, sous le plancher de 4,5:1 des textes courants (WCAG 1.4.3).
   La couleur pleine la remonte à 6,88:1, et la taille suffit à la distinguer du
   libellé. */
label .aide { display: block; font-size: 0.8rem; }
input, select {
  width: 100%; padding: 0.45rem 0.6rem; font: inherit; font-size: 0.95rem;
  color: var(--texte); background: var(--fond); border: 1px solid var(--trait-champ);
  border-radius: 4px;
}
/* Un seul indicateur de focus pour tout ce qui se parcourt au clavier — champs,
   liens, bouton, dépliants, tableaux défilants. Le contour du navigateur varie
   d'un moteur à l'autre et disparaît sur fond sombre ; celui-ci est posé et
   mesuré : `--accent` tient 8,99:1 sur le fond clair, 7,00:1 sur le sombre. */
:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px;
}
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
button {
  font: inherit; font-size: 0.98rem; padding: 0.55rem 1.4rem; cursor: pointer;
  color: var(--fond-carte); background: var(--accent);
  border: 1px solid var(--accent); border-radius: 4px;
}
button:hover { opacity: 0.9; }
/* Les métiers de la carrière : une boîte par métier, la dernière en pointillé
   parce qu'elle n'en décrit encore aucun — c'est celle qui sert à en ajouter. */
.metiers { display: grid; gap: 0.9rem; margin: 0.9rem 0 0; }
.metier {
  border: 1px solid var(--trait); border-radius: 4px; padding: 0.9rem 1rem;
  /* `<fieldset>` porte des marges et un padding propres à chaque navigateur. */
  margin: 0; min-width: 0;
}
.metier.facultatif { border-style: dashed; }
/* Le rang du métier est la LÉGENDE du groupe : « Revenu brut mensuel » est le
   même libellé dans les deux blocs, et seule cette légende dit lequel on
   remplit — à l'œil comme à l'oreille (WCAG 3.3.2). */
.metier > .rang {
  margin: 0; padding: 0 0.35rem; font-size: 0.78rem; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--texte-doux);
}
details { margin-top: 1.25rem; }
summary { cursor: pointer; color: var(--texte-doux); font-size: 0.92rem; }
summary:hover { color: var(--accent); }
details > .grille { margin-top: 1rem; }
/* Un tableau plus large que l'écran défile horizontalement. La zone qui défile
   doit pouvoir recevoir le focus, sinon elle est inatteignable au clavier chez
   les moteurs qui ne rendent pas focusables les boîtes défilantes (WCAG 2.1.1)
   : le HTML lui donne `tabindex="0"`, et le style rend ce focus visible. */
.defilant { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
/* Le titre du tableau, énoncé par les synthèses vocales avant son contenu et
   lu à l'écran comme l'intitulé de la grille. */
caption {
  caption-side: top; text-align: left; font-size: 0.88rem;
  color: var(--texte-doux); padding: 0 0 0.5rem;
}
tbody th { font-weight: 600; }
th, td { text-align: right; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--trait); }
th:first-child, td:first-child { text-align: left; }
thead th { font-size: 0.82rem; color: var(--texte-doux); font-weight: 600; }
tbody tr:last-child td { border-bottom: none; }
td.nombre, th.nombre { font-variant-numeric: tabular-nums; }
.scenario { margin: 1.4rem 0; }
/* Le bloc des montants passe sous l'intitulé D'UN SEUL TENANT quand la place
   manque : c'est l'entête qui se replie, pas le montant. Depuis que les sommes
   portent les centimes, un intitulé sur deux lignes ne laissait plus la largeur
   des deux colonnes, et la seconde tombait seule sous la première — alors que
   les deux chiffres doivent justement rester côte à côte. */
.scenario .entete { display: flex; justify-content: space-between; gap: 0.2rem 1rem;
                    align-items: baseline; flex-wrap: wrap; }
.scenario .titre { flex: 1 1 14rem; }
.scenario .titre { font-weight: 600; }
/* Deux montants par scénario, côte à côte : le pouvoir d'achat d'aujourd'hui,
   mis en avant, et la somme nominale du mois du départ, en retrait. Ils
   partagent la même ligne de base pour se lire comme un seul chiffre donné en
   deux unités, et non comme deux résultats concurrents. */
.scenario .montant { display: flex; justify-content: flex-end; align-items: baseline;
                     gap: 1.1rem; flex-wrap: nowrap; margin-left: auto;
                     font-variant-numeric: tabular-nums; }
.scenario .chiffre { display: flex; flex-direction: column; align-items: flex-end;
                     white-space: nowrap; }
.scenario .chiffre .somme { line-height: 1.2; }
.scenario .chiffre .unite { font-size: 0.78rem; color: var(--texte-doux); }
.scenario .principal .somme { font-size: 1.45rem; font-weight: 600; }
.scenario .depart { padding-left: 1.1rem; border-left: 1px solid var(--trait); }
.scenario .depart .somme { font-size: 1.05rem; color: var(--texte-doux); }
.scenario .montant .annuel { color: var(--texte-doux); font-size: 0.85rem; }
.barre { height: 12px; background: var(--fond-appui); border-radius: 6px; margin-top: 0.4rem; }
.barre > span { display: block; height: 100%; border-radius: 6px; }
.barre.actuel > span { background: var(--actuel); }
.barre.retroactif > span { background: var(--retroactif); }
.barre.prospectif > span { background: var(--prospectif); }
.barre.retroactif-employeur > span { background: var(--retroactif-employeur); }
.barre.prospectif-employeur > span { background: var(--prospectif-employeur); }
.barre.liberal > span { background: var(--liberal); }
.scenario .glose { font-size: 0.88rem; color: var(--texte-doux); margin-top: 0.35rem; }
.fiches { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; }
.fiche .valeur { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.fiche .etiquette { font-size: 0.82rem; color: var(--texte-doux); }
.etiquette-fiabilite {
  display: inline-block; font-size: 0.78rem; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 0.15rem 0.5rem; border-radius: 3px;
  background: var(--fond-appui); color: var(--texte-doux);
}
/* Graphiques : du SVG écrit à la main, dont seules les couleurs et les tailles
   de texte sont ici. Le tracé lui-même est dans `graphique()`. */
.graphique { margin: 1.3rem 0 1.7rem; }
.graphique svg { display: block; width: 100%; height: auto; overflow: visible; }
.graphique .grille { stroke: var(--trait); stroke-width: 1; }
.graphique .axe { stroke: var(--texte-doux); stroke-width: 1; }
.graphique .repere {
  stroke: var(--texte-doux); stroke-width: 1; stroke-dasharray: 3 3;
}
.graphique .courbe {
  fill: none; stroke-width: 2.5;
  stroke-linejoin: round; stroke-linecap: round;
}
.graphique .bande { stroke: none; }
.graphique .graduation {
  fill: var(--texte-doux); font-family: inherit; font-size: 12px;
  font-variant-numeric: tabular-nums;
}
/* Le tableau des points du graphique. Il se range juste sous son tracé, et non
   à la distance qui sépare deux paragraphes : c'est la même figure, dite
   autrement. Déplié, il est borné en hauteur — cent onze lignes avalent un
   écran entier —, et ses en-têtes de colonne restent visibles pendant qu'on le
   parcourt : sans cela, la colonne lue se perd dès la dixième ligne. */
.donnees-graphique { margin: -1.4rem 0 1.7rem; }
.donnees-graphique .defilant { max-height: 24rem; overflow-y: auto; }
.donnees-graphique table { font-size: 0.88rem; }
/* Lignes serrées : à l'interligne des autres tableaux, huit années tenaient
   dans la boîte, sur soixante-six. Le double y tient maintenant, ce qui est la
   différence entre consulter une série et la faire défiler. */
.donnees-graphique th, .donnees-graphique td { padding: 0.22rem 0.6rem; }
.donnees-graphique thead th {
  position: sticky; top: 0; background: var(--fond);
  box-shadow: inset 0 -1px 0 var(--trait);
}
.donnees-graphique caption { padding-bottom: 0.35rem; }
ul.legende {
  list-style: none; margin: 0.6rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; font-size: 0.86rem;
}
ul.legende li { display: flex; align-items: baseline; gap: 0.4rem; }
.pastille {
  display: inline-block; flex: none;
  width: 0.7rem; height: 0.7rem; border-radius: 2px;
}
/* Ce qu'un tableau ne peut pas porter dans ses cellules sans devenir illisible
   — la phrase qui explique une ligne. Elle était autrefois dans un attribut
   `title`, c'est-à-dire nulle part pour qui n'a pas de souris. */
dl.gloses { margin: 0.8rem 0 0; font-size: 0.9rem; }
dl.gloses dt { font-weight: 600; margin-top: 0.7rem; }
dl.gloses dd { margin: 0.15rem 0 0; padding: 0; color: var(--texte-doux); }
ul.serree { margin: 0.5rem 0; padding-left: 1.2rem; }
ul.serree li { margin: 0.3rem 0; }
footer {
  /* Hors de <main>, le pied porte lui-même la boîte que <main> lui prêtait.
     Le filet doit s'aligner sur le texte : la largeur est donc celle de la
     *zone de contenu* de <main> — 60rem moins ses deux marges intérieures —
     et le padding horizontal reste nul, sans quoi le filet déborderait. */
  width: calc(100% - 2.5rem); max-width: 57.5rem;
  margin: 3rem auto 0; padding: 1.25rem 0 5rem;
  border-top: 1px solid var(--trait);
  font-size: 0.88rem; color: var(--texte-doux);
}
.erreur {
  border-left: 3px solid var(--retroactif); background: var(--fond-appui);
  padding: 0.85rem 1.1rem; margin: 1.5rem 0;
}
pre.json {
  background: var(--fond-appui); border: 1px solid var(--trait); border-radius: 4px;
  padding: 0.9rem 1.1rem; overflow-x: auto; max-height: 26rem; overflow-y: auto;
  font-size: 0.82rem; line-height: 1.45;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.chargement { text-align: center; padding: 4rem 1rem; color: var(--texte-doux); }
.chargement .jauge {
  height: 6px; width: min(24rem, 80%); margin: 1.5rem auto 0;
  background: var(--fond-appui); border-radius: 3px; overflow: hidden;
}
.chargement .jauge > span {
  display: block; height: 100%; width: 30%; background: var(--accent);
  animation: glisse 1.4s ease-in-out infinite;
}
@keyframes glisse {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(333%); }
}
body.calcul-en-cours main { opacity: 0.45; transition: opacity 0.2s; }

/* Téléphone : le montant passe sous l'intitulé du scénario plutôt que de se
   serrer contre lui, et la page respire un peu moins large. */
@media (max-width: 34rem) {
  body { font-size: 1rem; }
  main { padding: 0 1rem; }
  footer { width: calc(100% - 2rem); padding: 1.25rem 0 4rem; }
  .carte { padding: 1rem 1.1rem; }
  header.bandeau .interieur { gap: 0.4rem 1rem; }
  nav a { margin: 0 1.1rem 0 0; }
  .scenario .entete { flex-direction: column; gap: 0.15rem; }
  /* Le montant passe sous l'intitulé : les deux chiffres s'alignent alors sur
     le bord gauche, comme lui, et restent l'un à côté de l'autre. */
  .scenario .montant { justify-content: flex-start; gap: 0.9rem; }
  .scenario .chiffre { align-items: flex-start; }
  .scenario .depart { padding-left: 0.9rem; }
  .fiches { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
  form .grille { gap: 0.9rem; }
  /* Le SVG se réduit avec la page : ses textes, exprimés en unités du viewBox,
     se réduiraient d'autant et deviendraient illisibles. On les grossit donc
     dans le repère pour qu'ils gardent leur taille à l'écran. */
  .graphique .graduation { font-size: 20px; }
}

/* Écran très étroit : les deux chiffres ne tiennent plus l'un à côté de
   l'autre et passent l'un sous l'autre. Le trait qui les sépare n'a alors plus
   rien à séparer, et pendrait dans le vide. */
@media (max-width: 22rem) {
  /* Les deux chiffres ne tiennent plus l'un à côté de l'autre : ils passent
     l'un sous l'autre, et le trait qui les sépare n'a plus rien à séparer. */
  .scenario .montant { flex-wrap: wrap; }
  .scenario .depart { padding-left: 0; border-left: none; }
}

/* Mouvement réduit : la jauge d'attente glisse sans fin, et une animation qui
   ne s'arrête jamais déclenche nausées et migraines chez qui y est sensible
   (WCAG 2.2.2 et 2.3.3). Le système le signale ; on l'écoute. La jauge reste,
   immobile et pleine : elle dit encore « ça travaille », sans bouger. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .chargement .jauge > span { width: 100%; }
}

/* Impression : le lecteur qui imprime une simulation veut les chiffres. La
   navigation ne s'y suit pas, et une zone qui défile ne défile plus — le
   tableau qu'elle contient serait coupé à la largeur de la page. Le formulaire,
   lui, reste : ses champs portent les valeurs saisies, et sont la seule trace
   imprimée de ce qui a été simulé. Les adresses des liens externes sont
   dépliées, faute de quoi une page imprimée renvoie à des liens qu'on ne peut
   pas suivre. */
@media print {
  header.bandeau nav, .evitement { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .defilant { overflow: visible; }
  .carte, .note, table, .graphique, .scenario { break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}