/* ════════════════════════════════════════════════════════════ DECISIO.BE — calculateur.css Habillage commun des pages de calculateur. Ces règles vivaient en ligne dans le de chaque calculateur, recopiées à l'identique quatre fois. La page des frais d'achat les lit ici. Les quatre pages plus anciennes gardent leur bloc en ligne pour l'instant : les migrer demande de vérifier chacune, et ce n'est pas l'objet de cette page-ci. ════════════════════════════════════════════════════════════ */ .calc-wrap { background: var(--black); color: white; border-radius: 20px; padding: 28px; margin: 24px 0 28px; } .calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; } /* Trois blocs de saisie tiennent mal sur deux colonnes : le troisième se retrouve seul, avec un vide à sa droite. */ .calc-grid.cols-3 { grid-template-columns: repeat(3, 1fr); gap: 18px 24px; } @media (max-width: 980px) { .calc-grid.cols-3 { grid-template-columns: 1fr 1fr; } } @media (max-width: 740px) { .calc-grid, .calc-grid.cols-3 { grid-template-columns: 1fr; } } .calc-group h4 { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--accent); text-transform: uppercase; letter-spacing: 1.5px; margin: 0 0 12px; } .calc-field { margin-bottom: 12px; } .calc-field label { display: block; font-size: 12px; color: rgba(255,255,255,0.55); margin-bottom: 4px; } .calc-field input, .calc-field select { width: 100%; background: #1a1a1a; border: 1.5px solid #2a2a2a; color: white; padding: 10px 12px; border-radius: 10px; font-size: 14px; font-family: inherit; outline: none; } .calc-field input:focus, .calc-field select:focus { border-color: var(--accent); } .calc-field .hint { font-size: 11px; color: rgba(255,255,255,0.35); margin-top: 2px; } .calc-check { display: flex; align-items: center; gap: 10px; font-size: 13px; cursor: pointer; padding: 6px 0; user-select: none; } .calc-check input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border: 1.5px solid #3a3a3a; background: #1a1a1a; border-radius: 5px; cursor: pointer; position: relative; flex-shrink: 0; margin: 0; transition: all 0.15s ease; } .calc-check input[type="checkbox"]:hover { border-color: var(--accent); } .calc-check input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); } .calc-check input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); } .calc-check input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .calc-results { background: var(--cream); color: var(--black); border-radius: 20px; padding: 28px; margin-bottom: 28px; } .calc-results h3 { font-family: var(--font-display); font-weight: 800; font-size: 20px; margin: 0 0 16px; } .kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; } @media (max-width: 740px) { .kpi-grid { grid-template-columns: 1fr 1fr; } } .kpi { background: white; border: 1.5px solid var(--black); border-radius: 14px; padding: 16px; } .kpi-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); margin-bottom: 6px; } .kpi-value { font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1.1; } .kpi-hint { font-size: 11px; color: var(--muted); margin-top: 4px; } .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; font-size: 14px; padding: 18px 20px; background: white; border-radius: 12px; border: 1px solid #e5e5e5; } @media (max-width: 740px) { .detail-grid { grid-template-columns: 1fr; } } .detail-grid .row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed #eee; } .detail-grid .row strong { font-weight: 700; } .verdict-box { margin-top: 18px; padding: 14px 18px; background: #1a1a1a; color: white; border-radius: 12px; font-size: 15px; font-weight: 600; } .chart-box { background: white; border-radius: 16px; padding: 20px; margin-top: 20px; } .chart-box h3 { font-family: var(--font-display); font-weight: 700; font-size: 16px; margin: 0 0 12px; } .waterfall-svg { width: 100%; height: auto; display: block; } /* ── Avis sur la quotité ───────────────────────────────────── Un signal, pas un verdict : la quotité empruntée change ce que la banque exige, et l'acheteur mérite de le voir avant d'entrer dans l'agence. Trois niveaux, lisibles sans la couleur seule (le texte dit déjà ce que la teinte suggère). */ .avis-box { margin: 14px 0 0; padding: 12px 16px; border-radius: 12px; border-left: 4px solid var(--muted, #767676); background: white; font-size: 14px; line-height: 1.5; } .avis-box[data-niveau="ok"] { border-left-color: #1a7f3c; background: #f2fbf5; } .avis-box[data-niveau="attention"] { border-left-color: #b26a00; background: #fff8ec; } .avis-box[data-niveau="alerte"] { border-left-color: #c73d24; background: #fdf1ee; } /* La ligne correspondant à la durée choisie, dans le tableau des durées : c'est celle que le lecteur vient de paramétrer. */ .calc-table tr.ligne-active td { background: #fff6e5; font-weight: 700; }