/* Calculateur de capacité d'emprunt (/outils/capacite-emprunt/) : charte journal du site (serif des titres, Libre
   Franklin, chiffres en Barlow étroit), compacte. Les pages journal sont claires ; celle-ci suit aussi le mode sombre du
   système (demande d'Henri du 12/10/2026 : « clair/sombre »), y compris le bandeau et le pied, sur CETTE page seulement. */
.page-calcul {
  --ce-fond: #FFFFFF; --ce-surface: #F7F8FA; --ce-champ: #FFFFFF; --ce-encre: #2A303C; --ce-encre-2: #464F5F; --ce-encre-3: #6B7486;
  --ce-filet: #E2E4E9; --ce-filet-fort: #C9CDD5; --ce-accent: #026B9C; --ce-alerte: #B42318; --ce-alerte-fond: #FDF1EF; --ce-note-fond: #F3F6F9;
}
@media (prefers-color-scheme: dark) {
  .page-calcul {
    --ce-fond: #121417; --ce-surface: #1A1D22; --ce-champ: #0F1114; --ce-encre: #E8EAEE; --ce-encre-2: #C3C8D1; --ce-encre-3: #8D95A3;
    --ce-filet: #2A2F37; --ce-filet-fort: #3A404A; --ce-accent: #5DB3DD; --ce-alerte: #FF8A7A; --ce-alerte-fond: #2A1714; --ce-note-fond: #182029;
    --j-1: #E8EAEE; --j-2: #C3C8D1; --j-3: #AEB4BF; --j-4: #8D95A3; --j-filet: #2A2F37; --j-sea: #5DB3DD;
    --fond: #121417; --surface: #1A1D22; --encre: #E8EAEE; --encre-2: #C3C8D1; --encre-3: #8D95A3; --filet: #2A2F37;
    background: var(--ce-fond); color: var(--ce-encre-2); color-scheme: dark;
  }
  .page-calcul .bandeau { background: #121417; border-bottom-color: #2A2F37; }
  .page-calcul .bandeau .bandeau-marque, .page-calcul .bandeau .bandeau-rubriques a { color: #E8EAEE; }
  .page-calcul .bandeau .bandeau-rubriques a:not([aria-current]) { color: #AEB4BF; }
  .page-calcul .bandeau-rubriques { border-top-color: #2A2F37; }
  .page-calcul .bandeau-marque img { filter: invert(1); }
  .page-calcul .bandeau-cherche input { background: #1A1D22; border-color: #2A2F37; color: #E8EAEE; }
  .page-calcul .bandeau .bandeau-carte { background: #E8EAEE; color: #121417; }
  .page-calcul .pied { border-top-color: #2A2F37; color: #8D95A3; }
  .page-calcul .pied a, .page-calcul .fil a { color: #AEB4BF; }
  .page-calcul .suggestions { background: #1A1D22; color: #E8EAEE; }
}
.page-calcul { background: var(--ce-fond); }
.ce { max-width: 1080px; }
.ce-entete { margin-top: 28px; }
.ce-entete h1 { margin: 0 0 10px; font-size: clamp(1.75rem, 3.2vw, 2.375rem); line-height: 1.15; }
.ce-entete .chapo { max-width: 720px; margin: 0; }

/* les taux du moment */
.ce .ce-taux { margin-top: 28px; padding-top: 14px; border-top: 2px solid var(--ce-encre); }
.ce-taux h2 { margin: 0 0 12px; font: 600 .8125rem/1.2 var(--j-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--ce-encre-3); }
.ce-taux-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.ce-taux-grille > div { padding: 0 16px; border-left: 1px solid var(--ce-filet); }
.ce-taux-grille > div:first-child { padding-left: 0; border-left: 0; }
.ce-taux-grille p { margin: 0; }
.ce-t-lib { font: 500 .8125rem/1.3 var(--j-sans); color: var(--ce-encre-2); }
.ce-t-val { font: 600 1.875rem/1.2 var(--j-etroit); color: var(--ce-encre); margin: 4px 0 2px !important; font-variant-numeric: tabular-nums; }
.ce-t-note { font: 400 .75rem/1.4 var(--j-sans); color: var(--ce-encre-3); }
.ce-maj { margin: 12px 0 0; font: 400 .8125rem/1.5 var(--j-sans); color: var(--ce-encre-3); }
.ce-maj strong { color: var(--ce-alerte); font-weight: 600; }

/* l'outil */
.ce .ce-outil { margin-top: 32px; }
.ce-modes { display: inline-flex; padding: 3px; border-radius: 9px; background: var(--ce-surface); border: 1px solid var(--ce-filet); }
.ce-modes button { min-height: 36px; padding: 0 16px; border: 0; border-radius: 7px; background: none; color: var(--ce-encre-2); font: 500 .875rem var(--j-sans); cursor: pointer; }
.ce-modes button[aria-selected="true"] { background: var(--ce-champ); color: var(--ce-encre); font-weight: 600; box-shadow: 0 1px 2px rgba(15, 20, 30, .12), 0 0 0 1px var(--ce-filet); }
.ce-modes button:focus-visible, .ce button:focus-visible, .ce input:focus-visible, .ce select:focus-visible { outline: 2px solid var(--ce-accent); outline-offset: 2px; }
.ce-panneau { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; margin-top: 18px; }
.ce-cote { position: sticky; top: 112px; max-height: calc(100vh - 124px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; border-radius: 12px; }

.ce-form fieldset { margin: 0 0 22px; padding: 0; border: 0; }
.ce-form legend { padding: 0; margin: 0 0 10px; font: 700 1.0625rem/1.3 var(--j-serif); color: var(--ce-encre); }
.ce-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.ce-grille + .ce-grille { margin-top: 12px; }
.ce-champ { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ce-lib { font: 500 .8125rem/1.3 var(--j-sans); color: var(--ce-encre-2); }
.ce-saisie { display: flex; align-items: center; height: 40px; border: 1px solid var(--ce-filet-fort); border-radius: 7px; background: var(--ce-champ); overflow: hidden; }
.ce-saisie:focus-within { border-color: var(--ce-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ce-accent) 18%, transparent); }
.ce-saisie input, .ce-saisie select { flex: 1; min-width: 0; height: 100%; padding: 0 10px; border: 0; background: none; color: var(--ce-encre); font: 500 1rem var(--j-sans); font-variant-numeric: tabular-nums; }
.ce-saisie input:focus, .ce-saisie select:focus { outline: none; }
.ce-saisie select { appearance: auto; cursor: pointer; }
.ce-saisie select:disabled { color: var(--ce-encre-3); cursor: not-allowed; }
.ce-unite { padding: 0 10px 0 4px; font: 400 .8125rem var(--j-sans); color: var(--ce-encre-3); white-space: nowrap; }
.ce-aide { font: 400 .75rem/1.4 var(--j-sans); color: var(--ce-encre-3); }
.ce-case { flex-direction: row; align-items: center; gap: 8px; align-self: start; margin-top: 22px; min-height: 40px; font: 400 .875rem/1.35 var(--j-sans); color: var(--ce-encre-2); }
.ce-case input { width: 18px; height: 18px; flex: none; accent-color: var(--ce-encre); }
.ce-puces { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 0; }
.ce-puce { min-height: 30px; padding: 0 10px; border: 1px solid var(--ce-filet-fort); border-radius: 15px; background: var(--ce-champ); color: var(--ce-encre-2); font: 500 .8125rem var(--j-sans); cursor: pointer; font-variant-numeric: tabular-nums; }
.ce-puce:hover { border-color: var(--ce-encre-3); color: var(--ce-encre); }
.ce-lignes { display: flex; flex-direction: column; gap: 8px; }
.ce-ligne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 200px) 36px; align-items: center; gap: 8px 12px; }
.ce-retirer { width: 36px; height: 36px; border: 0; border-radius: 7px; background: none; color: var(--ce-encre-3); font-size: 1.25rem; line-height: 1; cursor: pointer; }
.ce-retirer:hover { background: var(--ce-surface); color: var(--ce-encre); }
.ce-ajouts { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 6px; }
.ce-ajout { min-height: 34px; padding: 0 12px; border: 1px dashed var(--ce-filet-fort); border-radius: 7px; background: none; color: var(--ce-encre); font: 500 .8125rem var(--j-sans); cursor: pointer; }
.ce-ajout:hover { border-style: solid; background: var(--ce-surface); }
.ce .ce-note { margin: 4px 0 0; font: 400 .8125rem/1.5 var(--j-sans); color: var(--ce-encre-3); }

/* objet du prêt : quatre choix en segments (des boutons radio) */
.ce-segments { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 3px; gap: 3px; border-radius: 9px; background: var(--ce-surface); border: 1px solid var(--ce-filet); }
.ce-segments label { position: relative; display: flex; }
.ce-segments input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ce-segments span { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 38px; padding: 4px 8px; border-radius: 7px; text-align: center; font: 500 .8125rem/1.25 var(--j-sans); color: var(--ce-encre-2); }
.ce-segments input:checked + span { background: var(--ce-champ); color: var(--ce-encre); font-weight: 600; box-shadow: 0 1px 2px rgba(15, 20, 30, .12), 0 0 0 1px var(--ce-filet); }
.ce-segments input:focus-visible + span { outline: 2px solid var(--ce-accent); outline-offset: 1px; }
.ce-objet .ce-note { min-height: 1.5em; }

/* les trois blocs : revenus, loyers perçus, crédits en cours, chacun avec son total */
.ce-form .ce-bloc { padding: 12px 14px 10px; border: 1px solid var(--ce-filet); border-radius: 10px; }
.ce-form .ce-bloc legend { float: left; width: 100%; margin-bottom: 10px; }
.ce-bloc > :not(legend) { clear: both; }
.ce-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 4px 0 0; padding-top: 8px; border-top: 1px solid var(--ce-filet); font: 400 .8125rem var(--j-sans); color: var(--ce-encre-3); }
.ce-total strong { font: 600 1.0625rem var(--j-etroit); color: var(--ce-encre); font-variant-numeric: tabular-nums; }
.ce-ligne-age { grid-template-columns: minmax(0, 1fr) minmax(0, 170px) 92px 36px; }
.ce-type select { padding-right: 4px; font-size: .875rem; color: var(--ce-encre); }
.ce-lignes:empty { display: none; }

/* le résultat */
.ce-resultat { padding: 18px 18px 14px; border: 1px solid var(--ce-filet); border-radius: 12px; background: var(--ce-surface); }
.ce-resultat p { margin: 0; }
.ce-sur { font: 500 .8125rem var(--j-sans); color: var(--ce-encre-3); }
.ce-capital { font: 600 2.5rem/1.1 var(--j-etroit); color: var(--ce-encre); font-variant-numeric: tabular-nums; margin: 2px 0 4px !important; }
.ce-sous { min-height: 1.4em; font: 400 .8125rem/1.45 var(--j-sans); color: var(--ce-encre-2); }
.ce-chiffres { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 14px 0 0; border-top: 1px solid var(--ce-filet); }
.ce-chiffres div { padding: 9px 0; border-bottom: 1px solid var(--ce-filet); }
.ce-chiffres div:nth-child(odd) { padding-right: 10px; }
.ce-chiffres div:nth-child(even) { padding-left: 10px; border-left: 1px solid var(--ce-filet); }
.ce-chiffres dt { font: 400 .75rem/1.3 var(--j-sans); color: var(--ce-encre-3); }
.ce-chiffres dd { margin: 2px 0 0; font: 600 1.0625rem/1.25 var(--j-etroit); color: var(--ce-encre); font-variant-numeric: tabular-nums; }
.ce-chiffres dd[data-etat="alerte"] { color: var(--ce-alerte); }
.ce-alertes { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.ce-alertes:empty { display: none; }
.ce-alerte { padding: 8px 10px; border-radius: 7px; font: 400 .8125rem/1.45 var(--j-sans); }
.ce-alerte.ce-erreur { background: var(--ce-alerte-fond); color: var(--ce-alerte); }
.ce-alerte.ce-note { background: var(--ce-note-fond); color: var(--ce-encre-2); }
.ce-projet { margin-top: 16px; }
.ce-projet .ce-chiffres { margin-top: 6px; }
.ce-resultat .ce-projet-titre { margin: 12px 0 0; font: 600 .8125rem/1.3 var(--j-sans); color: var(--ce-encre); }
.ce-methodes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.ce-methodes > div { padding: 10px; border: 1px solid var(--ce-filet); border-radius: 8px; background: var(--ce-champ); }
.ce-methodes > div:first-child { border-color: var(--ce-encre-3); }
.ce-resultat .ce-m-lib { font: 500 .75rem/1.3 var(--j-sans); color: var(--ce-encre-3); }
.ce-resultat .ce-m-val { margin: 2px 0 4px; font: 600 1.25rem/1.2 var(--j-etroit); color: var(--ce-encre); font-variant-numeric: tabular-nums; }
.ce-resultat .ce-m-note { font: 400 .75rem/1.4 var(--j-sans); color: var(--ce-encre-3); }
.ce-avert { margin-top: 10px !important; font: 400 .75rem var(--j-sans); color: var(--ce-encre-3); }

/* le texte */
.ce .ce-texte { margin-top: 48px; max-width: 720px; }
.ce-texte h2 { font-size: 1.375rem; margin: 32px 0 8px; }
.ce-formule { padding: 10px 14px; border-left: 2px solid var(--ce-encre); background: var(--ce-surface); font: 500 .875rem/1.6 var(--j-sans); color: var(--ce-encre) !important; }
.ce-sources { padding-left: 18px; font: 400 .875rem/1.5 var(--j-sans); }
.ce-sources li { margin: 0 0 6px; }
.ce-mention { font: 400 .875rem/1.55 var(--j-sans); }
.outils-liste { padding: 0; list-style: none; }
.outils-liste li { padding: 14px 0; border-bottom: 1px solid var(--filet, #E2E4E9); }

/* la barre du téléphone : le résultat en bas d'écran tant que le cadre du résultat n'est pas visible */
.ce-barre { display: none; }
@media (max-width: 899px) {
  .ce-panneau { grid-template-columns: 1fr; gap: 20px; }
  .ce-cote { position: static; max-height: none; overflow: visible; }
  .ce-taux-grille { grid-template-columns: 1fr 1fr; gap: 14px 0; }
  .ce-taux-grille > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .ce-barre:not([hidden]) { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--ce-fond); border-top: 1px solid var(--ce-filet); box-shadow: 0 -6px 16px rgba(15, 20, 30, .08); font: 500 .8125rem var(--j-sans); color: var(--ce-encre-3); }
  .ce-barre strong { font: 600 1.25rem var(--j-etroit); color: var(--ce-encre); }
  .ce-barre a { margin-left: auto; min-height: 36px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 7px; background: var(--ce-encre); color: var(--ce-fond); text-decoration: none; font-weight: 600; }
}
@media (max-width: 560px) {
  .ce-case { margin-top: 0; }
  .ce-grille { grid-template-columns: 1fr; }
  .ce-ligne { grid-template-columns: minmax(0, 1fr) 36px; }
  .ce-ligne .ce-lib, .ce-ligne > .ce-type { grid-column: 1 / -1; }
  .ce-ligne-age { grid-template-columns: minmax(0, 1fr) 92px 36px; }
  .ce-segments { grid-template-columns: 1fr 1fr; }
  .ce-form .ce-bloc { padding: 10px 12px 8px; }
  .ce-capital { font-size: 2.125rem; }
  .ce-modes { display: flex; }
  .ce-modes button { flex: 1; }
}