/* ══════════════════════════════════════════════════════ style.css — Calculateur circulaires - Mode clair / sombre automatique (prefers-color-scheme) - Bascule manuelle via data-theme="light"|"dark" sur - Variables de thème surchargées par chaque HTML : --accent-light, --accent-dark, --highlight-light, --highlight-dark, --badge-bg-light, --badge-bg-dark, --badge-txt-light, --badge-txt-dark, --badge-border-light, --badge-border-dark, --unit-color-light, --unit-color-dark ══════════════════════════════════════════════════════ */ /* ════════════════════════════════════════ THÈME CLAIR (défaut) ════════════════════════════════════════ */ :root { /* Couleurs thématiques — surchargées par chaque page */ --accent-light: #2d6a9f; --accent-dark: #5b9fd4; --highlight-light: #e8f2fa; --highlight-dark: #1a2e40; --badge-bg-light: #e8f2fa; --badge-bg-dark: #1a2e40; --badge-txt-light: #1a4a7a; --badge-txt-dark: #7ec8f5; --badge-border-light: #b5d4f4; --badge-border-dark: #2d5a7a; --unit-color-light: #7ec8f5; --unit-color-dark: #7ec8f5; /* Tokens résolus — utilisés dans tout le CSS */ --accent: var(--accent-light); --ink: #1a1a2e; --paper: #f5f0e8; --card-bg: #ffffff; --muted: #7a7a8a; --line: #d5cfc3; --highlight: var(--highlight-light); --green: #2d7a5a; --badge-bg: var(--badge-bg-light); --badge-txt: var(--badge-txt-light); --badge-border: var(--badge-border-light); --unit-color: var(--unit-color-light); --shadow: var(--line); --grid-color: rgba(0,0,0,.04); --grid-color2: rgba(0,0,0,.025); --result-bg: var(--accent); } /* ════════════════════════════════════════ THÈME SOMBRE - automatique si le système est en dark - ou forcé via html[data-theme="dark"] ════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --accent: var(--accent-dark); --ink: #e8e4dc; --paper: #141418; --card-bg: #1e1e24; --muted: #8a8a9a; --line: #2e2e38; --highlight: var(--highlight-dark); --green: #4aaa7a; --badge-bg: var(--badge-bg-dark); --badge-txt: var(--badge-txt-dark); --badge-border: var(--badge-border-dark); --unit-color: var(--unit-color-dark); --shadow: rgba(0,0,0,.4); --grid-color: rgba(255,255,255,.03); --grid-color2: rgba(255,255,255,.015); } } /* Forçage manuel dark */ html[data-theme="dark"] { --accent: var(--accent-dark); --ink: #e8e4dc; --paper: #141418; --card-bg: #1e1e24; --muted: #8a8a9a; --line: #2e2e38; --highlight: var(--highlight-dark); --green: #4aaa7a; --badge-bg: var(--badge-bg-dark); --badge-txt: var(--badge-txt-dark); --badge-border: var(--badge-border-dark); --unit-color: var(--unit-color-dark); --shadow: rgba(0,0,0,.4); --grid-color: rgba(255,255,255,.03); --grid-color2: rgba(255,255,255,.015); } /* Forçage manuel light */ html[data-theme="light"] { --accent: var(--accent-light); --ink: #1a1a2e; --paper: #f5f0e8; --card-bg: #ffffff; --muted: #7a7a8a; --line: #d5cfc3; --highlight: var(--highlight-light); --green: #2d7a5a; --badge-bg: var(--badge-bg-light); --badge-txt: var(--badge-txt-light); --badge-border: var(--badge-border-light); --unit-color: var(--unit-color-light); --shadow: var(--line); --grid-color: rgba(0,0,0,.04); --grid-color2: rgba(0,0,0,.025); } /* ════════════════════════════════════════ RESET ════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ════════════════════════════════════════ BODY ════════════════════════════════════════ */ body { font-family: 'DM Sans', sans-serif; background: var(--paper); color: var(--ink); min-height: 100vh; padding: 48px 20px 80px; position: relative; transition: background .25s, color .25s; } body::before { content: ''; position: fixed; inset: 0; background: repeating-linear-gradient(0deg, transparent 27px, var(--grid-color) 27px, var(--grid-color) 28px), repeating-linear-gradient(90deg, transparent 27px, var(--grid-color2) 27px, var(--grid-color2) 28px); pointer-events: none; z-index: 0; transition: background .25s; } /* ════════════════════════════════════════ TOGGLE MODE SOMBRE ════════════════════════════════════════ */ .theme-toggle { position: fixed; top: 16px; right: 20px; z-index: 100; display: flex; align-items: center; gap: 8px; background: var(--card-bg); border: 1px solid var(--line); border-radius: 20px; padding: 6px 12px; cursor: pointer; font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 500; color: var(--muted); box-shadow: 2px 2px 0 var(--shadow); transition: background .25s, color .2s, border-color .25s; user-select: none; } .theme-toggle:hover { color: var(--accent); border-color: var(--accent); } .theme-toggle .icon-sun, .theme-toggle .icon-moon { font-size: 14px; line-height: 1; transition: opacity .2s; } /* En mode clair : montrer soleil, cacher lune */ .theme-toggle .icon-sun { opacity: 1; } .theme-toggle .icon-moon { opacity: 0; position: absolute; } html[data-theme="dark"] .theme-toggle .icon-sun { opacity: 0; position: absolute; } html[data-theme="dark"] .theme-toggle .icon-moon { opacity: 1; position: static; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .icon-sun { opacity: 0; position: absolute; } :root:not([data-theme="light"]) .theme-toggle .icon-moon { opacity: 1; position: static; } } /* ════════════════════════════════════════ CONTENEUR ════════════════════════════════════════ */ .container { max-width: 760px; margin: 0 auto; position: relative; z-index: 1; } /* ════════════════════════════════════════ HEADER ════════════════════════════════════════ */ header { text-align: center; margin-bottom: 40px; } .stamp { display: inline-block; border: 3px double var(--accent); padding: 5px 16px; font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; opacity: 0; animation: fadeUp .5s ease .05s forwards; } h1 { font-family: 'DM Serif Display', serif; font-size: clamp(1.9rem, 5vw, 3rem); line-height: 1.1; margin-bottom: 10px; opacity: 0; animation: fadeUp .5s ease .15s forwards; } h1 em { font-style: italic; color: var(--accent); } .type-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--badge-bg); color: var(--badge-txt); border: 1px solid var(--badge-border); border-radius: 20px; padding: 5px 14px; font-size: 12px; font-weight: 600; letter-spacing: .04em; margin-bottom: 6px; transition: background .25s, color .25s, border-color .25s; opacity: 0; animation: fadeUp .5s ease .2s forwards; } .type-badge::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } .subtitle { font-size: 13px; color: var(--muted); letter-spacing: .04em; opacity: 0; animation: fadeUp .5s ease .25s forwards; } .switch-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 12px; color: var(--muted); text-decoration: none; border-bottom: 1px dashed var(--line); padding-bottom: 1px; transition: color .2s, border-color .2s; opacity: 0; animation: fadeUp .5s ease .3s forwards; } .switch-link:hover { color: var(--accent); border-color: var(--accent); } /* ════════════════════════════════════════ CARD ════════════════════════════════════════ */ .card { background: var(--card-bg); border: 1px solid var(--line); border-radius: 4px; padding: 28px 32px; margin-bottom: 20px; box-shadow: 4px 4px 0 var(--shadow); transition: background .25s, border-color .25s, box-shadow .25s; opacity: 0; animation: fadeUp .5s ease .35s forwards; } .field label { display: block; font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } .field input[type="number"] { width: 100%; padding: 14px 18px; font-family: 'DM Sans', sans-serif; font-size: 22px; font-weight: 500; border: 2px solid var(--line); border-radius: 2px; background: var(--paper); color: var(--ink); outline: none; transition: border-color .2s, background .25s, color .25s; } .field input[type="number"]:focus { border-color: var(--accent); } /* ════════════════════════════════════════ RÉSULTAT ════════════════════════════════════════ */ .result-box { background: var(--accent); color: white; border-radius: 2px; padding: 28px 32px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; transition: background .25s; opacity: 0; animation: fadeUp .5s ease .45s forwards; } .result-label { font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 8px; } #resultAmount { font-family: 'DM Serif Display', serif; font-size: 3.4rem; line-height: 1; } #resultAmount span { font-size: 1.5rem; opacity: .6; margin-left: 4px; } #resultAmount .loading { font-size: 1.2rem; opacity: .4; font-family: 'DM Sans', sans-serif; } .result-details { text-align: right; min-width: 220px; } .result-details p { font-size: 13px; color: rgba(255,255,255,.6); line-height: 1.9; } .result-details strong { color: rgba(255,255,255,.95); } .result-details .unit-price { font-family: 'DM Serif Display', serif; font-size: 1.1rem; color: var(--unit-color) !important; } .result-details .error { color: #f5a0a0 !important; } /* ════════════════════════════════════════ SECTION TITLE ════════════════════════════════════════ */ .section-title { font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 12px; margin: 28px 0 16px; opacity: 0; animation: fadeUp .5s ease .55s forwards; } .section-title::after { content: ''; flex: 1; height: 1px; background: var(--line); } /* ════════════════════════════════════════ TABLEAU ════════════════════════════════════════ */ .table-wrap { background: var(--card-bg); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; overflow-x: auto; box-shadow: 4px 4px 0 var(--shadow); transition: background .25s, border-color .25s, box-shadow .25s; opacity: 0; animation: fadeUp .5s ease .6s forwards; } table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 480px; } thead tr { background: var(--accent); color: white; transition: background .25s; } thead th { padding: 12px 16px; text-align: left; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; } thead th:not(:first-child) { text-align: right; } tbody tr { border-bottom: 1px solid var(--line); transition: background .12s; } tbody tr:last-child { border-bottom: none; } tbody tr:hover { background: var(--highlight); } tbody tr.active-row { background: var(--highlight); border-left: 3px solid var(--accent); } tbody tr.active-row td:first-child { font-weight: 700; color: var(--accent); } td { padding: 11px 16px; color: var(--muted); transition: color .25s; } td:first-child { font-weight: 600; color: var(--ink); } td:not(:first-child) { text-align: right; } .price-total { font-family: 'DM Serif Display', serif; font-size: 15px; color: var(--accent) !important; } .price-unit { font-size: 12px; color: var(--green) !important; } /* ════════════════════════════════════════ FOOTNOTE ════════════════════════════════════════ */ .footnote { margin-top: 20px; font-size: 11px; color: var(--muted); text-align: center; line-height: 1.7; opacity: 0; animation: fadeUp .4s ease .8s forwards; } /* ════════════════════════════════════════ ANIMATIONS ════════════════════════════════════════ */ @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes countUp { from { opacity: .2; } to { opacity: 1; } } .amount-change { animation: countUp .2s ease forwards; } /* ════════════════════════════════════════ RESPONSIVE ════════════════════════════════════════ */ @media (max-width: 520px) { .result-box { flex-direction: column; } .result-details { text-align: left; min-width: 0; } #resultAmount { font-size: 2.6rem; } .theme-toggle span.label { display: none; } }