:root { --vert: #008751; --vert-fonce: #006a40; --jaune: #fcd116; --rouge: #e8112d; --encre: #1a2b23; --encre-douce: #4a5d53; --fond: #f4f7f5; --carte: #ffffff; --bordure: #dfe7e2; --rayon: 12px; --ombre: 0 1px 3px rgba(26, 43, 35, 0.08), 0 4px 16px rgba(26, 43, 35, 0.06); --champ-fond: #ffffff; --onglet-inactif: #e9efeb; --texte-attenue: #a9b8b0; --alerte-fond: #fdf3e0; --alerte-bordure: #f0d9a8; --retenue: #e8112d; --accent-lisible: var(--vert-fonce); color-scheme: light dark; } @media (prefers-color-scheme: dark) { :root { --encre: #e6efe9; --encre-douce: #9cb2a6; --fond: #0e1a14; --carte: #17261d; --bordure: #2b4033; --ombre: 0 1px 3px rgba(0, 0, 0, 0.45), 0 4px 16px rgba(0, 0, 0, 0.3); --champ-fond: #0f1d15; --onglet-inactif: #122019; --texte-attenue: #5c7268; --alerte-fond: #322a10; --alerte-bordure: #5c4d1a; --retenue: #ff8080; --accent-lisible: #45cf95; } } /* Le toggle de thème du viewer claude.ai (data-theme sur ) prime sur la préférence système, dans les deux sens. */ :root[data-theme="dark"] { --encre: #e6efe9; --encre-douce: #9cb2a6; --fond: #0e1a14; --carte: #17261d; --bordure: #2b4033; --ombre: 0 1px 3px rgba(0, 0, 0, 0.45), 0 4px 16px rgba(0, 0, 0, 0.3); --champ-fond: #0f1d15; --onglet-inactif: #122019; --texte-attenue: #5c7268; --alerte-fond: #322a10; --alerte-bordure: #5c4d1a; --retenue: #ff8080; --accent-lisible: #45cf95; } :root[data-theme="light"] { --encre: #1a2b23; --encre-douce: #4a5d53; --fond: #f4f7f5; --carte: #ffffff; --bordure: #dfe7e2; --ombre: 0 1px 3px rgba(26, 43, 35, 0.08), 0 4px 16px rgba(26, 43, 35, 0.06); --champ-fond: #ffffff; --onglet-inactif: #e9efeb; --texte-attenue: #a9b8b0; --alerte-fond: #fdf3e0; --alerte-bordure: #f0d9a8; --retenue: #e8112d; --accent-lisible: var(--vert-fonce); } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: var(--fond); color: var(--encre); line-height: 1.55; } .conteneur { max-width: 980px; margin: 0 auto; padding: 0 1.25rem; } .entete { background: linear-gradient(135deg, var(--vert-fonce), var(--vert)); color: #fff; padding: 2.25rem 0 2rem; border-bottom: 4px solid var(--jaune); } .entete-contenu { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .entete h1 { margin: 0 0 0.35rem; font-size: 1.6rem; display: flex; align-items: center; gap: 0.6rem; } .bascule-theme { flex: none; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.85rem; margin-top: 0.15rem; font: inherit; font-size: 0.85rem; font-weight: 600; color: #fff; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background 0.15s ease; } .bascule-theme:hover { background: rgba(255, 255, 255, 0.24); } .bascule-theme:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .bascule-icone { font-size: 1rem; line-height: 1; } @media (max-width: 520px) { .bascule-texte { display: none; } .bascule-theme { padding: 0.5rem; } } .drapeau { display: inline-block; width: 30px; height: 20px; border-radius: 3px; flex: none; background: linear-gradient(to bottom, var(--jaune) 50%, var(--rouge) 50%); position: relative; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4); } .drapeau::before { content: ""; position: absolute; inset: 0; width: 40%; background: var(--vert); } .sous-titre { margin: 0; opacity: 0.9; font-size: 0.95rem; } .onglets { display: flex; gap: 0.5rem; margin-top: -1.45rem; position: relative; z-index: 1; } .onglet { border: 1px solid var(--bordure); border-bottom: none; background: var(--onglet-inactif); color: var(--encre-douce); font: inherit; font-weight: 600; font-size: 0.95rem; padding: 0.55rem 1.2rem 0.65rem; border-radius: 10px 10px 0 0; cursor: pointer; } .onglet.actif { background: var(--carte); color: var(--accent-lisible); box-shadow: 0 -2px 0 var(--vert) inset; } .onglet:focus-visible { outline: 2px solid var(--vert); outline-offset: -2px; } .carte { background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 1.25rem 1.5rem; } .formulaire { border-top-left-radius: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; } .options-employeur { grid-column: 1 / -1; } .options-employeur summary { cursor: pointer; font-weight: 600; color: var(--accent-lisible); margin-bottom: 0.5rem; } .options-employeur[open] { border-top: 1px dashed var(--bordure); padding-top: 0.75rem; } .champ label { display: block; font-weight: 600; margin-bottom: 0.35rem; font-size: 0.95rem; } .champ-case label { font-weight: 500; } .saisie-montant { display: flex; align-items: stretch; } .saisie-montant input { flex: 1; min-width: 0; font-size: 1.15rem; padding: 0.55rem 0.75rem; border: 1px solid var(--bordure); border-right: none; border-radius: 8px 0 0 8px; font-variant-numeric: tabular-nums; background: var(--champ-fond); color: var(--encre); } .saisie-montant input:focus, select:focus { outline: 2px solid var(--vert); outline-offset: -1px; } .unite { display: flex; align-items: center; padding: 0 0.75rem; background: var(--fond); border: 1px solid var(--bordure); border-radius: 0 8px 8px 0; color: var(--encre-douce); font-weight: 600; font-size: 0.9rem; } select { width: 100%; padding: 0.5rem 0.6rem; border: 1px solid var(--bordure); border-radius: 8px; font-size: 0.95rem; background: var(--champ-fond); color: var(--encre); } .aide { margin: 0.3rem 0 0; font-size: 0.8rem; color: var(--encre-douce); } .alerte { margin: 1rem 0 0; padding: 0.75rem 1rem; background: var(--alerte-fond); border: 1px solid var(--alerte-bordure); border-left: 4px solid var(--jaune); border-radius: 8px; font-size: 0.95rem; } .resultats { margin-top: 1.5rem; } .tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; } .tuile { background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.25rem; } .tuile-libelle { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--encre-douce); font-weight: 600; } .tuile-valeur { font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .tuile-nette { background: var(--vert); border-color: var(--vert-fonce); } .tuile-detail { font-size: 0.78rem; color: var(--encre-douce); font-variant-numeric: tabular-nums; } .tuile-nette .tuile-detail { color: rgba(255, 255, 255, 0.8); } .tuile-nette .tuile-libelle { color: rgba(255, 255, 255, 0.85); } .tuile-nette .tuile-valeur { color: #fff; } .explication-flux { margin: 1rem 0 0; padding: 0.85rem 1.1rem; background: var(--carte); border: 1px solid var(--bordure); border-left: 4px solid var(--vert); border-radius: 8px; box-shadow: var(--ombre); font-size: 0.92rem; color: var(--encre); } .grille-details { margin-top: 1.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1rem; align-items: start; } .carte h2 { margin: 0 0 0.75rem; font-size: 1.05rem; display: flex; align-items: center; gap: 0.5rem; } .badge { font-size: 0.7rem; font-weight: 600; background: var(--fond); border: 1px solid var(--bordure); border-radius: 999px; padding: 0.1rem 0.6rem; color: var(--encre-douce); } .tableau { width: 100%; border-collapse: collapse; font-size: 0.92rem; } .tableau td, .tableau th { padding: 0.45rem 0.25rem; border-bottom: 1px solid var(--bordure); text-align: left; } .tableau th { color: var(--encre-douce); font-size: 0.8rem; } .tableau .montant { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .tableau .retenue { color: var(--retenue); } .ligne-totale td { font-weight: 700; border-bottom: none; border-top: 2px solid var(--encre); } .tranche-vide td { color: var(--texte-attenue); } .notes { margin-top: 1.5rem; } .notes ol { margin: 0; padding-left: 1.25rem; } .notes li { margin-bottom: 0.4rem; } .faq { margin-top: 1.5rem; } .faq-item { border-bottom: 1px solid var(--bordure); padding: 0.35rem 0; } .faq-item:last-child { border-bottom: none; } .faq-item summary { cursor: pointer; font-weight: 600; font-size: 0.98rem; padding: 0.5rem 0; list-style: none; display: flex; align-items: center; gap: 0.5rem; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::before { content: "+"; color: var(--accent-lisible); font-weight: 700; font-size: 1.15rem; line-height: 1; flex: none; width: 1rem; text-align: center; } .faq-item[open] summary::before { content: "−"; } .faq-item summary:focus-visible { outline: 2px solid var(--vert); outline-offset: 2px; border-radius: 4px; } .faq-item p { margin: 0 0 0.6rem 1.5rem; font-size: 0.9rem; color: var(--encre-douce); } .liste-notes { margin: 0; padding-left: 1.1rem; font-size: 0.88rem; } .liste-notes li { margin-bottom: 0.5rem; } .avertissement { margin: 0.9rem 0 0; font-size: 0.82rem; color: var(--encre-douce); border-top: 1px dashed var(--bordure); padding-top: 0.75rem; } .pied { margin-top: 2.5rem; padding: 1.25rem 0; border-top: 1px solid var(--bordure); color: var(--encre-douce); font-size: 0.85rem; text-align: center; } @media (max-width: 640px) { .formulaire { grid-template-columns: 1fr; } .entete h1 { font-size: 1.3rem; } }