/* Ossature applicative des simulateurs.
   S'appuie sur les jetons de couleur définis dans style.css. */

:root {
  --nav-largeur: 248px;
  --nav-hauteur-mobile: 64px;
  --seuil-volet: 900px;
  --travail-max: 1440px;
  --rayon: 14px;
}

/* Hauteur réelle du viewport : sur iOS et Android, la barre d'URL fait varier
   100vh au défilement, ce qui décale les éléments fixes. dvh suit la hauteur
   effectivement visible ; vh reste en repli pour les navigateurs anciens. */
html,
body {
  height: 100%;
}

body.app-body {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background: var(--bg);
}

.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ------------------------------------------------------------------ */
/* En-tête mobile                                                      */
/* ------------------------------------------------------------------ */

.app-entete {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  padding-top: max(12px, env(safe-area-inset-top));
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.app-entete .brand {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--primary);
}

.app-entete-liens {
  display: flex;
  gap: 16px;
  font-size: 0.85rem;
  color: var(--muted);
}

.app-entete-liens a:hover {
  color: var(--primary);
}

/* ------------------------------------------------------------------ */
/* Navigation : volet latéral au-dessus du seuil, barre basse en dessous */
/* ------------------------------------------------------------------ */

.app-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  background: var(--panel);
  border-top: 1px solid var(--line);
  /* Zone du geste d'accueil sur iPhone et des barres gestuelles Android :
     sans cette réserve, le dernier onglet passe sous l'indicateur système. */
  padding-bottom: env(safe-area-inset-bottom);
}

.app-nav-groupe {
  display: flex;
  flex: 1;
}

.app-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  /* 44 px est la cible tactile minimale recommandée par Apple comme par
     Google ; on vise plus large pour rester confortable en marchant. */
  min-height: var(--nav-hauteur-mobile);
  padding: 8px 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s ease;
}

.app-nav-item svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-nav-item[aria-current="page"] {
  color: var(--primary);
}

/* Repère de l'onglet actif. En bas d'écran il coiffe l'onglet, dans le volet
   il devient une barre verticale à gauche : même élément, deux orientations. */
.app-nav-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--primary);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.app-nav-item {
  position: relative;
}

.app-nav-item[aria-current="page"]::before {
  opacity: 1;
}

/* Sous le seuil, la barre du bas ne porte que les onglets : la marque est
   dans l'en-tête et les liens secondaires sur la page d'accueil. */
.app-nav-marque,
.app-nav-secondaire {
  display: none;
}

/* ------------------------------------------------------------------ */
/* Zone de travail                                                     */
/* ------------------------------------------------------------------ */

.app-main {
  flex: 1;
  /* Réserve la hauteur de la barre basse pour que le dernier élément de la
     page reste atteignable au défilement. */
  padding-bottom: calc(var(--nav-hauteur-mobile) + env(safe-area-inset-bottom) + 24px);
}

.app-zone {
  width: 100%;
  max-width: var(--travail-max);
  margin: 0 auto;
  padding: 24px 16px 0;
}

.panneau[hidden] {
  display: none;
}

.panneau-entete {
  margin-bottom: 20px;
}

.panneau-entete h1 {
  margin: 4px 0 6px;
  font-size: clamp(1.5rem, 4vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.panneau-entete p {
  margin: 0;
  max-width: 60ch;
  color: var(--muted);
  font-size: 0.95rem;
}

/* ------------------------------------------------------------------ */
/* Carte de saisie                                                     */
/* ------------------------------------------------------------------ */

.carte {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--rayon);
  padding: 20px;
  box-shadow: var(--shadow);
}

.carte + .carte {
  margin-top: 20px;
}

.grille-champs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.champ {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.champ label {
  font-size: 0.9rem;
  font-weight: 600;
}

.champ input,
.champ select {
  width: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.85rem 0.9rem;
  /* 16 px exactement : en dessous, Safari iOS zoome automatiquement sur le
     champ à la mise au point et casse la mise en page. Ne pas réduire. */
  font-size: 16px;
  font-family: inherit;
  color: var(--text);
  min-height: 48px;
}

.champ input:focus,
.champ select:focus {
  border-color: rgba(22, 59, 90, 0.45);
}

.aide {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--muted);
}

.bouton-principal {
  width: 100%;
  min-height: 50px;
  padding: 0.85rem 1.4rem;
  border: 0;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.bouton-principal:hover:not(:disabled) {
  background: var(--primary-strong);
}

.bouton-principal:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* ------------------------------------------------------------------ */
/* Résultats                                                           */
/* ------------------------------------------------------------------ */

.message {
  margin-top: 18px;
  padding: 13px 15px;
  border-radius: 10px;
  font-size: 0.92rem;
}

.message.error {
  background: #fdeceb;
  color: var(--error);
  border: 1px solid #f5c6c2;
}

.grille-resultats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.resultat-tuile {
  background: var(--panel-alt);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
}

.resultat-tuile span {
  display: block;
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 4px;
}

.resultat-tuile strong {
  font-size: clamp(1.25rem, 5vw, 1.6rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.resultat-tuile.majeure {
  background: var(--primary);
  border-color: var(--primary);
}

.resultat-tuile.majeure span {
  color: rgba(255, 255, 255, 0.75);
}

.resultat-tuile.majeure strong {
  color: #fff;
}

.avertissement {
  margin: 18px 0 0;
  padding-top: 15px;
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--muted);
}

.avertissement a {
  color: var(--primary);
  text-decoration: underline;
}

/* ------------------------------------------------------------------ */
/* Tablette : les champs et les résultats passent sur deux colonnes    */
/* ------------------------------------------------------------------ */

@media (min-width: 600px) {
  .app-zone {
    padding: 28px 24px 0;
  }

  .carte {
    padding: 26px;
  }

  .grille-champs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .champ-pleine-largeur {
    grid-column: 1 / -1;
  }

  .champ-actions {
    align-items: flex-start;
    padding-top: 6px;
    margin-top: 4px;
    border-top: 1px solid var(--line);
  }

  .champ-actions .bouton-principal {
    width: auto;
    min-width: 220px;
    margin-top: 14px;
  }

  .grille-resultats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------------ */
/* À partir de 900 px : la barre basse devient un volet latéral        */
/* ------------------------------------------------------------------ */

@media (min-width: 900px) {
  .app {
    flex-direction: row;
  }

  .app-entete {
    display: none;
  }

  .app-nav {
    position: sticky;
    top: 0;
    bottom: auto;
    left: auto;
    right: auto;
    flex-direction: column;
    align-self: flex-start;
    width: var(--nav-largeur);
    flex: 0 0 var(--nav-largeur);
    height: 100vh;
    height: 100dvh;
    padding: 24px 14px;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
    border-top: 0;
    border-right: 1px solid var(--line);
  }

  .app-nav-marque {
    display: block;
    padding: 0 12px 22px;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary);
  }

  .app-nav-groupe {
    flex-direction: column;
    flex: 0 0 auto;
    gap: 4px;
  }

  .app-nav-item {
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    min-height: 46px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.95rem;
    text-align: left;
  }

  .app-nav-item:hover:not([aria-current="page"]) {
    background: var(--panel-alt);
    color: var(--text);
  }

  .app-nav-item[aria-current="page"] {
    background: var(--accent);
  }

  /* La barre de l'onglet actif bascule à la verticale, sur le bord gauche. */
  .app-nav-item::before {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 3px;
    height: 22px;
    border-radius: 0 3px 3px 0;
  }

  .app-nav-secondaire {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    font-size: 0.85rem;
  }

  .app-nav-secondaire a {
    padding: 8px 12px;
    border-radius: 8px;
    color: var(--muted);
  }

  .app-nav-secondaire a:hover {
    background: var(--panel-alt);
    color: var(--text);
  }

  .app-main {
    flex: 1;
    min-width: 0;
    padding-bottom: 40px;
  }

  .app-zone {
    padding: 40px 40px 0;
  }
}

/* ------------------------------------------------------------------ */
/* Grand écran : on élargit sans laisser les lignes s'étirer           */
/* ------------------------------------------------------------------ */

@media (min-width: 1280px) {
  .grille-champs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .app-zone {
    padding: 48px 56px 0;
  }
}

/* Sur un 4K, le volet grandit un peu et la zone de travail reste centrée :
   sans plafond, les formulaires s'étireraient sur 3 000 px et deviendraient
   illisibles. */
@media (min-width: 1900px) {
  :root {
    --nav-largeur: 288px;
    --travail-max: 1680px;
  }

  .app-zone {
    padding: 56px 64px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------------------------ */
/* Bascule segmentée : choix du sens de calcul, granularité du tableau */
/* ------------------------------------------------------------------ */

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.bascule-mode {
  margin: 0 0 22px;
  padding: 0;
  border: 0;
}

.bascule-mode legend {
  padding: 0 0 9px;
  font-size: 0.9rem;
  font-weight: 600;
}

.segments {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

/* Le bouton radio reste dans le flux — donc focusable et lisible par les
   technologies d'assistance — mais devient invisible : c'est son étiquette
   qui porte l'apparence. `display:none` le retirerait de la navigation. */
.segments input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segments label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
  min-height: 52px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.segments label small {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--muted);
}

.segments label:hover {
  border-color: rgba(22, 59, 90, 0.35);
}

.segments input:checked + label {
  border-color: var(--primary);
  background: var(--accent);
}

.segments input:focus-visible + label {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

.bascule-compacte {
  margin: 0;
  flex: 0 0 auto;
}

.bascule-compacte .segments label {
  min-height: 42px;
  padding: 8px 16px;
  text-align: center;
  font-size: 0.88rem;
}

/* ------------------------------------------------------------------ */
/* En-tête de bloc                                                     */
/* ------------------------------------------------------------------ */

.bloc-entete {
  margin-bottom: 16px;
}

.bloc-entete h2 {
  margin: 0 0 4px;
  font-size: 1.1rem;
}

.bloc-entete-ligne {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ------------------------------------------------------------------ */
/* Graphique                                                           */
/* ------------------------------------------------------------------ */

.legende {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
  color: var(--muted);
}

.legende li {
  display: flex;
  align-items: center;
  gap: 7px;
}

.pastille {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: 0 0 auto;
}

.graphique-enveloppe {
  position: relative;
}

.graphique {
  width: 100%;
}

.graphique svg {
  display: block;
}

.zone-survol {
  cursor: crosshair;
}

.infobulle {
  position: absolute;
  top: 8px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 170px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.14);
  font-size: 0.82rem;
  /* L'infobulle suit le pointeur : si elle captait les événements, elle
     s'interposerait entre le curseur et le graphique et clignoterait. */
  pointer-events: none;
}

.infobulle strong {
  font-size: 0.88rem;
  margin-bottom: 2px;
}

.infobulle span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
}

.infobulle b {
  margin-left: auto;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.infobulle-total {
  margin-top: 3px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}

/* ------------------------------------------------------------------ */
/* Tableau d'amortissement                                             */
/* ------------------------------------------------------------------ */

/* Le tableau défile dans son propre cadre : sur un téléphone, six colonnes
   de montants ne tiennent pas en 390 px, et laisser la page entière défiler
   horizontalement casserait toute la mise en page. */
.tableau-defilant {
  max-height: 460px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  -webkit-overflow-scrolling: touch;
}

.tableau-amortissement {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tableau-amortissement thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 11px 14px;
  background: var(--panel-alt);
  border-bottom: 1px solid var(--line);
  text-align: right;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
}

.tableau-amortissement thead th:first-child {
  text-align: left;
}

.tableau-amortissement tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  padding: 9px 14px;
  background: var(--panel);
  text-align: left;
  font-weight: 600;
}

.tableau-amortissement td {
  padding: 9px 14px;
  text-align: right;
}

.tableau-amortissement tbody tr:nth-child(even) th,
.tableau-amortissement tbody tr:nth-child(even) td {
  background: #fafbfc;
}

.tableau-amortissement tbody tr:hover th,
.tableau-amortissement tbody tr:hover td {
  background: var(--accent);
}

/* Lignes de sous-total d'un bulletin de paie (brut du mois, total des
   cotisations, net à payer). Le fond alterné et le survol ne doivent pas les
   effacer, d'où le `!important` : ce sont les seules lignes que l'œil doit
   retrouver sans lire. */
.tableau-amortissement tbody tr.ligne-total th,
.tableau-amortissement tbody tr.ligne-total td {
  background: var(--panel-alt) !important;
  font-weight: 700;
  border-top: 1px solid var(--line);
}

@media (min-width: 600px) {
  .grille-resultats-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bloc-entete-ligne {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
}

@media (min-width: 1100px) {
  .grille-resultats-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------------ */
/* Calendrier des mois (simulateur de fiche de paie)                   */
/* ------------------------------------------------------------------ */

/* Le libellé du groupe de cases n'est pas un <label> : il ne désigne aucun
   champ unique. On lui rend l'apparence d'un label sans en usurper le rôle,
   la <legend> du fieldset assurant l'étiquetage réel pour l'accessibilité. */
.pseudo-label {
  font-size: 0.9rem;
  font-weight: 600;
}

.calendrier {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Même parti que .segments : la case reste focusable, l'étiquette porte
   l'apparence. */
.calendrier input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.calendrier label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  font-size: 0.88rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.calendrier label:hover {
  border-color: rgba(22, 59, 90, 0.35);
}

.calendrier input:checked + label {
  border-color: var(--primary);
  background: var(--accent);
}

.calendrier input:focus-visible + label {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

/* Le sélecteur de mois affiché ne doit pas s'étirer sur toute la largeur de
   la carte : au-delà d'une certaine taille, un menu déroulant très large est
   plus difficile à viser qu'un menu court. */
.champ-mois-bulletin {
  margin: 18px 0 4px;
  max-width: 260px;
}

@media (min-width: 600px) {
  .calendrier {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .calendrier {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------------ */
/* Calendrier ISO                                                      */
/* ------------------------------------------------------------------ */

/* Champ année encadré de deux boutons : passer d'une année à l'autre est le
   geste le plus fréquent, il doit se faire d'un clic sans viser le clavier. */
.champ-incremental {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.champ-incremental input {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.bouton-incrementer {
  flex: 0 0 48px;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.bouton-incrementer:hover {
  border-color: rgba(22, 59, 90, 0.35);
  background: var(--accent);
}

.bouton-incrementer:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

.case-a-cocher {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  font-weight: 500;
  cursor: pointer;
}

.case-a-cocher input {
  width: 20px;
  height: 20px;
  min-height: 0;
  flex: 0 0 20px;
  accent-color: var(--primary);
  cursor: pointer;
}

.bouton-telecharger {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: auto;
  flex: 0 0 auto;
  white-space: nowrap;
}

.bouton-telecharger svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tableau-calendrier {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tableau-calendrier thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 10px 8px;
  background: var(--panel-alt);
  border-bottom: 1px solid var(--line);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
}

/* La colonne des numéros de semaine reste visible quand la grille défile
   horizontalement : sans elle, on ne sait plus quelle ligne on lit. */
.tableau-calendrier tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  padding: 7px 12px;
  background: var(--panel-alt);
  border-right: 1px solid var(--line);
  text-align: left;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--primary);
}

.tableau-calendrier td {
  padding: 7px 8px;
  text-align: center;
  border: 1px solid #eef1f4;
}

.tableau-calendrier .jour-week-end {
  background: #eef1f4;
  color: var(--muted);
}

.tableau-calendrier .jour-ferie {
  background: #fbe3d3;
  color: #8a4419;
  font-weight: 700;
}

/* Un jour appartenant à une autre année civile est atténué, pas masqué : il
   fait partie de la semaine ISO et doit rester lisible. */
.tableau-calendrier .jour-hors-annee {
  color: #9aa7b4;
  font-style: italic;
}

.tableau-calendrier .jour-aujourdhui {
  outline: 2px solid #c0392b;
  outline-offset: -2px;
  font-weight: 700;
}

.legende-calendrier {
  margin-bottom: 16px;
}

.pastille-ferie { background: #fbe3d3; border: 1px solid #d8a883; }
.pastille-week-end { background: #eef1f4; border: 1px solid var(--line); }
.pastille-hors-annee { background: #fff; border: 1px dashed #9aa7b4; }
.pastille-aujourdhui { background: #fff; border: 2px solid #c0392b; }

/* Un férié tombant un week-end ne libère aucune journée : la ligne est
   atténuée pour que le décompte utile saute aux yeux. */
.tableau-amortissement tbody tr.ferie-week-end th,
.tableau-amortissement tbody tr.ferie-week-end td {
  color: var(--muted);
  font-style: italic;
}

@media (min-width: 700px) {
  .tableau-calendrier {
    font-size: 0.88rem;
  }

  .tableau-calendrier td {
    padding: 8px 10px;
  }
}

/* Plusieurs cases à cocher dans un même champ : les serrer un peu pour
   qu'elles se lisent comme un groupe et non comme deux champs distincts. */
.champ .case-a-cocher + .case-a-cocher {
  margin-top: -6px;
}

/* Âges des enfants gardés : une colonne par enfant, sur une seule rangée tant
   que la place le permet. */
.grille-ages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 4px;
}

.champ-age {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.champ-age label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
}

.sous-titre-bloc {
  margin: 26px 0 12px;
  font-size: 1rem;
}

.sous-titre-premier {
  margin-top: 0;
}

/* Le tableau de trésorerie n'a pas d'en-tête : ses deux lignes se lisent comme
   un relevé bancaire, pas comme un tableau de données. */
#garde-table-tresorerie td:last-child,
#garde-table-tresorerie th:last-child {
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ */
/* Liens vers les sources officielles                                  */
/* ------------------------------------------------------------------ */

/* Ces liens ne sont pas décoratifs : ils crédibilisent le simulateur en
   montrant sur quoi il s'appuie, et un lien sortant vers un site faisant
   autorité est l'un des rares signaux de qualité qu'un moteur de recherche
   sait lire. Ils sont donc écrits en dur dans la page, jamais injectés par
   script : un robot d'indexation doit les voir sans exécuter de JavaScript. */
.carte-liens {
  margin-top: 4px;
}

.titre-liens {
  margin: 0 0 6px;
  font-size: 1.05rem;
}

.liste-liens {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.liste-liens a {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.liste-liens a:hover {
  border-color: rgba(22, 59, 90, 0.35);
  background: var(--accent);
}

.liste-liens a:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

.lien-source {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--primary);
}

/* La flèche signale un départ vers un autre site. Ajoutée en CSS et non dans
   le texte : elle ne doit pas être lue par une synthèse vocale, le `rel` et
   la cible du lien portent déjà l'information. */
.lien-libelle::after {
  content: " ↗";
  color: var(--muted);
}

.lien-libelle {
  font-size: 0.88rem;
  line-height: 1.4;
}

@media (min-width: 700px) {
  .liste-liens {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Reprises des classes d'espacement : la page des simulateurs charge les deux
   feuilles, mais les déclarer ici évite toute dépendance à l'ordre de
   chargement. */
.espace-s { margin-top: 10px; }
.espace-m { margin-top: 14px; }
.espace-l { margin-top: 22px; }

/* Depuis le découpage en pages réelles, les onglets sont des liens et non plus
   des boutons : il faut leur retirer le soulignement que le navigateur ajoute
   d'office. Le reste du style vaut pour les deux, `aria-current` désignant
   l'onglet actif dans les deux cas. */
a.app-nav-item {
  text-decoration: none;
}

/* ------------------------------------------------------------------ */
/* Maillage interne entre simulateurs                                  */
/* ------------------------------------------------------------------ */

/* Chaque page pointe vers les quatre autres. Ce n'est pas seulement du
   confort de navigation : un moteur de recherche suit des liens, et c'est ce
   maillage qui lui fait découvrir puis relier les cinq pages entre elles. */
.maillage {
  padding: 26px 0 34px;
  border-top: 1px solid var(--line);
  background: var(--panel-alt);
}

.maillage h2 {
  margin: 0 0 12px;
  font-size: 0.92rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}

.maillage ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.maillage a {
  display: inline-block;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  text-decoration: none;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 600;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.maillage a:hover {
  border-color: rgba(22, 59, 90, 0.35);
  background: var(--accent);
}

.maillage a:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}