/* Outils pratiques (/outils-pratiques/) : formulaires, résultats, calendrier annuel.
   S'appuie sur les jetons de satellite.css (--card, --card-2, --hair, --ink,
   --soft, --muted, --gold, --gold-ink, --w) : mêmes cartes, mêmes thèmes. */

.sim-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sim-grid > .span-2 { grid-column: 1 / -1; }
@media (max-width: 900px) { .sim-grid { grid-template-columns: minmax(0, 1fr); } }

.sim-copy { margin: 0 0 14px; color: var(--soft); font-size: .95rem; line-height: 1.6; max-width: 70ch; }
.sim-note { margin: 12px 0 0; color: var(--muted); font-size: .8rem; line-height: 1.5; }

/* Formulaires */
.sim-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.sim-form > *, .sim-details { min-width: 0; }
.sim-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.sim-field { display: grid; gap: 6px; min-width: 0; }
.sim-field > span { color: var(--soft); font-size: .86rem; font-weight: 600; line-height: 1.35; }
.sim-field input, .sim-field select {
  width: 100%; min-width: 0; height: 44px; padding: 0 12px;
  border: 1px solid rgba(var(--w), .18); border-radius: 8px;
  background: var(--card-2); color: var(--ink);
  font: inherit; font-size: 1rem; font-variant-numeric: tabular-nums;
  transition: border-color .2s cubic-bezier(.25, .1, .25, 1);
}
.sim-field input:hover, .sim-field select:hover { border-color: rgba(var(--w), .32); }
.sim-field input::placeholder { color: var(--muted); }
.sim-field input:focus, .sim-field select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212, 160, 23, .22); }
:root[data-theme="light"] .sim-field input:focus, :root[data-theme="light"] .sim-field select:focus { border-color: var(--gold-ink); box-shadow: 0 0 0 3px rgba(141, 123, 34, .18); }
.sim-check { display: flex; align-items: center; gap: 8px; color: var(--soft); font-size: .9rem; }
.sim-check input { width: 18px; height: 18px; accent-color: var(--gold); }

.sim-switch { display: inline-flex; padding: 3px; border: 1px solid rgba(var(--w), .16); border-radius: 9px; background: var(--card-2); }
.sim-switch button {
  min-height: 38px; padding: 0 16px; border: 0; border-radius: 6px;
  background: transparent; color: var(--soft); font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
  transition: background-color .2s cubic-bezier(.25, .1, .25, 1), color .2s cubic-bezier(.25, .1, .25, 1);
}
.sim-switch button:hover:not([aria-pressed="true"]) { color: var(--ink); background: rgba(var(--w), .06); }
.sim-switch button[aria-pressed="true"] { background: var(--ink); color: var(--card); }
.sim-switch button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Résultats */
.sim-result { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 4px; }
.sim-stat { padding: 14px 16px; border: 1px solid var(--hair); border-radius: 10px; background: var(--card-2); min-width: 0; }
.sim-stat-label { display: block; color: var(--muted); font-size: .82rem; font-weight: 600; }
.sim-stat-value { display: block; margin-top: 6px; color: var(--ink); font-size: clamp(1.25rem, 3vw, 1.6rem); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sim-stat.is-main { border-color: var(--gold); background: linear-gradient(180deg, rgba(212, 160, 23, .09), rgba(212, 160, 23, 0) 70%), var(--card-2); }
.sim-stat.is-main .sim-stat-label { color: var(--gold); }
.sim-stat.is-main .sim-stat-value { font-size: clamp(1.45rem, 3.4vw, 1.9rem); }
:root[data-theme="light"] .sim-stat.is-main { border-color: var(--gold-ink); background: linear-gradient(180deg, rgba(141, 123, 34, .08), rgba(141, 123, 34, 0) 70%), var(--card-2); }
:root[data-theme="light"] .sim-stat.is-main .sim-stat-label { color: var(--gold-ink); }
.sim-verdict { padding: 14px 16px; border: 1px solid var(--hair); border-left: 3px solid var(--gold); border-radius: 10px; background: var(--card-2); color: var(--ink); line-height: 1.55; }
.sim-verdict strong { display: block; margin-bottom: 4px; }

/* Tableaux */
/* Ombres de défilement : indiquent qu'un tableau large continue à droite. */
.sim-table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(90deg, var(--wrap-bg, var(--card)) 30%, rgba(0, 0, 0, 0)) left / 32px 100% no-repeat local,
    linear-gradient(270deg, var(--wrap-bg, var(--card)) 30%, rgba(0, 0, 0, 0)) right / 32px 100% no-repeat local,
    linear-gradient(90deg, rgba(var(--w), .16), rgba(0, 0, 0, 0)) left / 12px 100% no-repeat scroll,
    linear-gradient(270deg, rgba(var(--w), .16), rgba(0, 0, 0, 0)) right / 12px 100% no-repeat scroll;
}
.sim-details { --wrap-bg: var(--card-2); }
.sim-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.sim-table th, .sim-table td { padding: 10px 8px; border-bottom: 1px solid var(--hair); text-align: left; vertical-align: top; }
.sim-table th { color: var(--muted); font-size: .8rem; font-weight: 600; }
.sim-table tbody tr { transition: background-color .2s cubic-bezier(.25, .1, .25, 1); }
.sim-table tbody tr:hover td { background: rgba(var(--w), .03); }
.sim-table td.num, .sim-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sim-table tr.is-off td { color: var(--muted); }
.sim-tag { display: inline-block; margin-left: 6px; padding: 2px 7px; border: 1px solid rgba(var(--w), .2); border-radius: 999px; color: var(--soft); font-size: .72rem; font-weight: 600; white-space: nowrap; }
.sim-tag.is-pont { border-color: var(--gold); color: var(--gold); }
:root[data-theme="light"] .sim-tag.is-pont { color: var(--gold-ink); border-color: var(--gold-ink); }

/* Lignes de facture TGC */
.sim-lines { display: grid; gap: 10px; }
.sim-line { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .9fr) 40px; gap: 8px; align-items: end; }
.sim-line .sim-field > span { font-size: .8rem; }
.sim-icon-btn {
  width: 40px; height: 44px; display: grid; place-items: center; padding: 0;
  border: 1px solid rgba(var(--w), .16); border-radius: 8px; background: transparent; color: var(--soft); cursor: pointer;
}
.sim-icon-btn:hover { background: rgba(var(--w), .07); }
.sim-icon-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (max-width: 560px) {
  .sim-line { grid-template-columns: 1fr 1fr 40px; }
  .sim-line .sim-field:first-child { grid-column: 1 / -1; }
}

/* Calendrier annuel (12 mois) */
.sim-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 14px; color: var(--soft); font-size: .84rem; }
.sim-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sim-legend i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.sim-year { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1000px) { .sim-year { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .sim-year { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .sim-year { grid-template-columns: 1fr; } }
.sim-month { min-width: 0; }
.sim-month h3 { margin: 0 0 6px; color: var(--ink); font-size: .86rem; font-weight: 700; text-transform: capitalize; }
.sim-month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; font-size: .72rem; font-variant-numeric: tabular-nums; }
.sim-month-grid b { color: var(--muted); font-weight: 600; text-align: center; padding: 2px 0; }
.sim-day { text-align: center; padding: 4px 0; border-radius: 4px; color: var(--soft); }
.sim-day.is-we { color: var(--muted); }
.sim-day.is-vac, .sim-legend i.is-vac { background: rgba(var(--w), .1); }
.sim-day.is-ferie, .sim-legend i.is-ferie { background: var(--ink); color: var(--card); font-weight: 800; }
.sim-day.is-pont, .sim-legend i.is-pont { box-shadow: inset 0 0 0 1.5px var(--gold); }
:root[data-theme="light"] .sim-day.is-pont, :root[data-theme="light"] .sim-legend i.is-pont { box-shadow: inset 0 0 0 1.5px var(--gold-ink); }
/* Mercredi pédagogique : point sous le numéro */
.sim-day.is-mped { position: relative; color: var(--ink); font-weight: 700; }
.sim-day.is-mped::after { content: ""; position: absolute; left: 50%; bottom: 1px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; }
.sim-legend i.is-mped { position: relative; border: 1px solid rgba(var(--w), .2); }
.sim-legend i.is-mped::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: var(--ink); }
.sim-legend [hidden] { display: none !important; }
.sim-stack { display: grid; gap: 16px; align-content: start; min-width: 0; }
.sim-stack > [hidden] { display: none !important; }
#mped-panel .sim-row { margin: 0 0 12px; }
#mped-panel .sim-actions { margin-top: 14px; }

.sim-years-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.sim-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Cartes de la page liste */
.sim-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 720px) { .sim-cards { grid-template-columns: 1fr; } }
.sim-card { display: grid; gap: 10px; align-content: start; padding: 22px 24px; color: inherit; text-decoration: none; transition: border-color .2s cubic-bezier(.25, .1, .25, 1), background-color .2s cubic-bezier(.25, .1, .25, 1); }
.sim-card:hover { border-color: rgba(var(--w), .3); background: var(--card-2); }
.sim-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sim-card-key { display: grid; justify-items: end; text-align: right; min-width: 0; }
.sim-card-key small { color: var(--muted); font-size: .74rem; }
.sim-card-key b { color: var(--ink); font-size: .95rem; font-variant-numeric: tabular-nums; }
.sim-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.sim-card-icon { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--hair); border-radius: 9px; background: rgba(var(--w), .07); color: var(--ink); }
.sim-card-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sim-card h2 { margin: 0; font-size: 1.15rem; letter-spacing: -.01em; color: var(--ink); }
.sim-card p { margin: 0; color: var(--soft); font-size: .92rem; line-height: 1.55; }
.sim-card .sim-card-more { margin-top: 4px; color: var(--ink); font-size: .86rem; font-weight: 600; }
.sim-card .sim-card-more span { display: inline-block; transition: transform .2s cubic-bezier(.25, .1, .25, 1); }
.sim-card:hover .sim-card-more span { transform: translateX(3px); }
.sim-card:hover .sim-card-more { color: var(--gold); }
:root[data-theme="light"] .sim-card:hover .sim-card-more { color: var(--gold-ink); }

/* Sommaire « Sur cette page » */
.sim-toc { display: flex; gap: 8px; margin: 0 0 16px; padding: 2px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.sim-toc::-webkit-scrollbar { display: none; }
.sim-toc a {
  flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px;
  border: 1px solid var(--hair); border-radius: 999px; background: var(--card);
  color: var(--soft); font-size: .86rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: border-color .2s cubic-bezier(.25, .1, .25, 1), color .2s cubic-bezier(.25, .1, .25, 1);
}
.sim-toc a:hover { border-color: rgba(var(--w), .32); color: var(--ink); }
.sim-toc a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
main.fiche section[id] { scroll-margin-top: 84px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Page liste : preuves et chiffres du moment */
.sim-proofs { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 4px 0 16px; padding: 0; list-style: none; }
.sim-proofs li { display: inline-flex; align-items: center; gap: 7px; color: var(--soft); font-size: .88rem; }
.sim-proofs svg { width: 16px; height: 16px; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:root[data-theme="light"] .sim-proofs svg { stroke: var(--gold-ink); }
.hero-meta a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.sim-kv-links .kv-row { color: inherit; text-decoration: none; border-radius: 6px; transition: background-color .2s cubic-bezier(.25, .1, .25, 1); }
.sim-kv-links .kv-row:hover { background: rgba(var(--w), .04); }
.sim-kv-links .kv-row:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.sim-kv-links .kv-label { white-space: normal; }
.sim-essentiel a { color: var(--soft); font-size: .86em; white-space: nowrap; }
.sim-cards + .panel { margin-top: 16px; }

/* En-tête : respiration entre le texte, les actions et la date */
.page-hero .panel-copy + .hero-meta, .page-hero .panel-copy + .hero-actions { margin-top: 16px; }

/* Mobile : une colonne pour les champs, le résultat principal en pleine largeur */
@media (max-width: 560px) {
  .sim-row { grid-template-columns: minmax(0, 1fr); }
  .sim-switch { display: flex; width: 100%; }
  .sim-switch button { flex: 1 1 0; min-height: 40px; padding: 0 10px; }
  .sim-result { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sim-result > .sim-stat.is-main { grid-column: 1 / -1; }
  .sim-stat { padding: 12px 14px; }
  .sim-card { padding: 20px; }
  .sim-switch button { font-size: .84rem; line-height: 1.2; }
  .sim-table th:first-child, .sim-table td:first-child { min-width: 7.5rem; }
}

/* Impression : uniquement le calendrier annuel, en clair. */
@media print {
  .nav, .menu-overlay, .official-footer, .skip-link, .no-print, .page-hero .hero-actions { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  main.fiche { width: 100% !important; padding: 0 !important; }
  .panel { border: 0 !important; background: #fff !important; }
  .print-only-year .panel:not(.sim-print) { display: none !important; }
  .sim-print { break-inside: avoid; }
  .sim-month h3, .sim-day, .sim-month-grid b, .sim-legend { color: #000 !important; }
  .sim-day.is-vac, .sim-legend i.is-vac { background: #ddd !important; }
  .sim-day.is-ferie, .sim-legend i.is-ferie { background: #000 !important; color: #fff !important; }
  .sim-day.is-pont, .sim-legend i.is-pont { box-shadow: inset 0 0 0 1.5px #000 !important; }
  .sim-legend i.is-mped::after { background: #000 !important; }
  .sim-year { grid-template-columns: repeat(4, 1fr) !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Un bloc masqué reste masqué, même s'il porte une classe en display:grid. */
.sim-form [hidden], #vacances-panel[hidden] { display: none !important; }
/* Bouton d'année sélectionné. */
.sim-years-nav .btn-ghost[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--card); }

/* Détails repliables (cotisations, autres résultats) */
.sim-details { margin-top: 14px; border: 1px solid var(--hair); border-radius: 10px; background: var(--card-2); }
.sim-details > summary { padding: 12px 14px; color: var(--ink); font-weight: 600; cursor: pointer; }
.sim-details > .sim-table-wrap { padding: 0 14px 10px; }
#nom-result .sim-table-wrap, #paie-alert .sim-verdict, #nom-result .sim-verdict + .sim-table-wrap { margin-top: 12px; }
#paie-alert:not(:empty) { display: grid; gap: 10px; }

/* Recherche de nom : champ + bouton sur une ligne */
.sim-row-search { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.sim-submit { height: 44px; padding: 0 20px; }
@media (max-width: 480px) { .sim-row-search { grid-template-columns: 1fr; } .sim-submit { width: 100%; justify-content: center; } }

/* Une liste déroulante aux libellés longs (indices du BTP) ne doit pas élargir la page. */
body[data-page-type="simulateur"] main.fiche { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) { body[data-page-type="simulateur"] .grid-hero { grid-template-columns: minmax(0, 1fr); } }
.sim-field select { text-overflow: ellipsis; }
.sim-essentiel { margin: 0; padding-left: 1.1rem; display: grid; gap: 8px; color: var(--soft); line-height: 1.55; }
.sim-essentiel li::marker { color: var(--muted); }

/* Salaires : barre de distribution, courbe, grille de branche */
.sal-dist { margin-top: 14px; }
.sal-dist:empty { display: none; }
.sal-track { position: relative; height: 10px; margin: 30px 10px 34px; border-radius: 999px; background: rgba(var(--w), .1); }
.sal-band { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: rgba(var(--w), .22); }
.sal-tick { position: absolute; top: -4px; width: 2px; height: 18px; margin-left: -1px; background: var(--muted); }
.sal-tick.is-med { background: var(--ink); }
.sal-tick b, .sal-tick em { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: .7rem; line-height: 1; color: var(--muted); font-style: normal; }
.sal-tick b { top: 22px; font-weight: 700; color: var(--soft); }
.sal-tick em { top: 34px; }
.sal-you { position: absolute; top: -6px; width: 14px; height: 22px; margin-left: -7px; border-radius: 4px; background: var(--gold); box-shadow: 0 0 0 2px var(--card); }
.sal-you b { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); font-size: .74rem; font-weight: 800; color: var(--ink); white-space: nowrap; }
.sal-h3 { margin: 22px 0 8px; font-size: 1rem; font-weight: 700; color: var(--ink); }
.sal-def { display: block; margin-top: 2px; color: var(--muted); font-size: .78rem; font-weight: 400; line-height: 1.4; }
.sal-grille { margin-top: 16px; }
.sal-chart { margin: 0; }
.sal-chart svg { display: block; width: 100%; height: auto; }
.sal-chart .sal-grid { stroke: rgba(var(--w), .1); stroke-width: 1; }
.sal-chart .sal-axis { fill: var(--muted); font-size: 14px; }
.sal-chart .sal-end { fill: var(--soft); font-size: 15px; font-weight: 700; }
.sal-chart polyline { stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.sal-chart circle { stroke: var(--card); stroke-width: 2; }
.sal-s1 { --s: #3987e5; }
.sal-s2 { --s: #d95926; }
.sal-s3 { --s: #199e70; }
:root[data-theme="light"] .sal-s1 { --s: #2a78d6; }
:root[data-theme="light"] .sal-s2 { --s: #eb6834; }
:root[data-theme="light"] .sal-s3 { --s: #1baf7a; }
.sal-chart g polyline { stroke: var(--s); }
.sal-chart g circle { fill: var(--s); }
.sal-chart figcaption { margin-top: 8px; color: var(--muted); font-size: .8rem; }
.sal-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 0; padding: 0; list-style: none; color: var(--soft); font-size: .82rem; }
.sal-legend i { display: inline-block; width: 14px; height: 3px; margin-right: 6px; vertical-align: middle; border-radius: 2px; background: var(--s); }
.sal-grille td.num { white-space: nowrap; }
@media (max-width: 640px) {
  .sal-def { display: none; }
  .sal-tick.is-minor b, .sal-tick.is-minor em { display: none; }
}
.sim-table tr.is-current td { background: rgba(var(--w), .08); font-weight: 700; }
#fp-verdict .sim-verdict, #sal-fonction-publique .sim-details { margin-top: 12px; }
#carrieres .sim-details + .sim-details { margin-top: 10px; }

/* Tableaux dans une demi-colonne : un peu plus serrés pour tenir sans défilement. */
@media (min-width: 901px) {
  .sim-grid .sim-table { font-size: .84rem; }
  .sim-grid .sim-table th, .sim-grid .sim-table td { padding: 9px 5px; }
  .sim-grid .sim-table td:first-child { white-space: nowrap; }
}
/* Page liste : sur écran étroit, les cartes portent déjà les chiffres du moment. */
@media (max-width: 900px) { .sim-hide-narrow { display: none; } }