/* MathCalculus design system — generated from design_handoff (tokens + components). Fonts loaded via in . Site layout additions at the bottom. */ /* ============================================================ MathCalculus — Couleurs Thème clair par défaut sur :root ; thème sombre via [data-theme="dark"]. Tous les couples texte/fond documentés passent WCAG AA (la plupart AAA). ============================================================ */ :root { /* ----- Échelle primaire (bleu « confiance ») ----- */ --mc-blue-50: #EFF5FB; --mc-blue-100: #DDE9F6; --mc-blue-200: #BBD3ED; --mc-blue-300: #8FB5DF; --mc-blue-400: #5E92CC; --mc-blue-500: #3D74B5; --mc-blue-600: #28599C; /* primaire — 7.0:1 sur blanc */ --mc-blue-700: #1F4778; /* hover — 9.4:1 sur blanc */ --mc-blue-800: #1A3A61; --mc-blue-900: #142C4A; /* ----- Échelle accent (vert-canard « résultat ») ----- */ --mc-teal-50: #EBF6F4; --mc-teal-100: #D3ECE8; --mc-teal-300: #6FC8BC; --mc-teal-600: #0B7A6B; /* 5.2:1 sur blanc */ --mc-teal-700: #0A6357; /* 7.2:1 sur blanc */ /* ----- Neutres (gris bleutés froids) ----- */ --mc-ink-900: #1A2B3A; /* texte principal — 14.5:1 sur blanc */ --mc-ink-700: #45586B; /* texte secondaire — 7.3:1 */ --mc-ink-500: #576A7D; /* texte atténué — 5.6:1 */ --mc-gray-300: #B9C7D4; --mc-gray-200: #D7E0E9; --mc-gray-100: #EDF2F7; --mc-gray-50: #F4F7FA; --mc-white: #FFFFFF; /* ----- Sémantiques ----- */ --mc-success: #177245; /* 6.0:1 sur blanc */ --mc-success-bg: #E7F4ED; --mc-warning: #8A5A00; /* 5.9:1 sur blanc, 5.4:1 sur son fond */ --mc-warning-bg: #FFF4D6; --mc-error: #B42E2E; /* 6.2:1 sur blanc */ --mc-error-bg: #FBEBEB; --mc-info: var(--mc-blue-600); --mc-info-bg: var(--mc-blue-50); /* ----- Alias sémantiques (à utiliser dans les composants) ----- */ --color-bg: var(--mc-gray-50); --color-surface: var(--mc-white); --color-surface-alt: var(--mc-gray-100); --color-text: var(--mc-ink-900); --color-text-2: var(--mc-ink-700); --color-text-3: var(--mc-ink-500); --color-border: var(--mc-gray-200); --color-border-strong: var(--mc-gray-300); --color-primary: var(--mc-blue-600); --color-primary-hover: var(--mc-blue-700); --color-primary-soft: var(--mc-blue-50); --color-on-primary: var(--mc-white); --color-accent: var(--mc-teal-600); --color-accent-strong: var(--mc-teal-700); --color-accent-soft: var(--mc-teal-50); --color-link: var(--mc-blue-600); --color-focus-ring: var(--mc-blue-500); --color-result-bg: var(--mc-teal-50); --color-result-border: var(--mc-teal-300); --color-result-text: var(--mc-teal-700); --color-ad-bg: var(--mc-gray-100); --color-ad-border: var(--mc-gray-200); --color-ad-label: var(--mc-ink-500); color-scheme: light; } /* ----- Thème sombre ----- */ [data-theme="dark"] { --color-bg: #0E1620; --color-surface: #16202C; --color-surface-alt: #1D2937; --color-text: #E6EDF3; /* 13.9:1 sur surface */ --color-text-2: #A8B8C7; /* 8.1:1 */ --color-text-3: #8295A8; --color-border: #2B3A4A; --color-border-strong: #3C4E61; --color-primary: var(--mc-blue-500); /* boutons — texte blanc 4.8:1 */ --color-primary-hover: var(--mc-blue-400); --color-primary-soft: #1B2C42; --color-on-primary: var(--mc-white); --color-accent: var(--mc-teal-300); --color-accent-strong: var(--mc-teal-300); --color-accent-soft: #142B28; --color-link: var(--mc-blue-300); /* 7.7:1 sur surface */ --color-focus-ring: var(--mc-blue-300); --color-result-bg: #142B28; --color-result-border: #1E4F47; --color-result-text: var(--mc-teal-300); /* 8.4:1 */ --mc-success: #5BC98A; --mc-success-bg: #14291E; --mc-warning: #E5B95C; --mc-warning-bg: #2B2310; --mc-error: #F08A8A; --mc-error-bg: #321A1C; --mc-info: var(--mc-blue-300); --mc-info-bg: #1B2C42; --color-ad-bg: #1D2937; --color-ad-border: #2B3A4A; --color-ad-label: #8295A8; color-scheme: dark; } /* ============================================================ MathCalculus — Typographie Titres : Sora (600/700). Texte : Source Sans 3 (400/600/700). Chiffres : font-variant-numeric tabular-nums sur les résultats. ============================================================ */ :root { --font-display: "Sora", "Avenir Next", "Segoe UI", system-ui, sans-serif; --font-body: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace; /* Échelle (base 16 px, ratio ~1.2 ; mobile-first) */ --text-xs: 0.8125rem; /* 13 px — mentions, label pub */ --text-sm: 0.875rem; /* 14 px — légendes, fil d'ariane */ --text-base: 1rem; /* 16 px — texte courant */ --text-md: 1.125rem; /* 18 px — intro, labels importants */ --text-lg: 1.25rem; /* 20 px — H4 */ --text-xl: 1.5rem; /* 24 px — H3 */ --text-2xl: 1.875rem; /* 30 px — H2 */ --text-3xl: 2.25rem; /* 36 px — H1 mobile */ --text-4xl: 2.75rem; /* 44 px — H1 desktop */ --text-result: 2.25rem; /* chiffre de résultat */ --leading-tight: 1.15; /* grands titres */ --leading-snug: 1.3; /* sous-titres */ --leading-body: 1.6; /* texte courant */ --weight-regular: 400; --weight-semibold: 600; --weight-bold: 700; --tracking-tight: -0.01em; /* titres Sora */ } /* ============================================================ MathCalculus — Espacements, rayons, ombres, grille Base 4 px. Cibles tactiles ≥ 44 px. ============================================================ */ :root { /* Espacements */ --space-1: 0.25rem; /* 4 px */ --space-2: 0.5rem; /* 8 px */ --space-3: 0.75rem; /* 12 px */ --space-4: 1rem; /* 16 px */ --space-5: 1.5rem; /* 24 px */ --space-6: 2rem; /* 32 px */ --space-7: 3rem; /* 48 px */ --space-8: 4rem; /* 64 px */ /* Rayons */ --radius-sm: 6px; /* champs, badges */ --radius-md: 10px; /* boutons, blocs */ --radius-lg: 14px; /* cartes */ --radius-xl: 20px; /* bloc résultat, héros */ --radius-full: 999px; /* pastilles */ /* Ombres (douces, bleutées, jamais dures) */ --shadow-sm: 0 1px 2px rgba(26, 43, 58, 0.06); --shadow-md: 0 2px 8px rgba(26, 43, 58, 0.08); --shadow-lg: 0 8px 24px rgba(26, 43, 58, 0.10); /* Grille et lecture */ --container-max: 1080px; /* largeur max du site */ --content-max: 720px; /* colonne de lecture (FAQ, articles) */ --gutter: var(--space-4); /* 16 px mobile ; 24 px ≥ 768 px via media query */ /* Tactile et focus */ --tap-target: 44px; --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-focus-ring) 35%, transparent); /* Publicité (hauteurs réservées anti-CLS) */ --ad-min-h-mobile: 250px; --ad-min-h-desktop: 90px; } @media (min-width: 768px) { :root { --gutter: var(--space-5); } } /* ============================================================ MathCalculus — Base (reset léger + règles globales) ============================================================ */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-body); color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); color: var(--color-text); margin: 0 0 var(--space-4); text-wrap: balance; } h1 { font-size: var(--text-3xl); } h2 { font-size: var(--text-2xl); } h3 { font-size: var(--text-xl); } h4 { font-size: var(--text-lg); font-weight: var(--weight-semibold); } @media (min-width: 768px) { h1 { font-size: var(--text-4xl); } } p { margin: 0 0 var(--space-4); text-wrap: pretty; } a { color: var(--color-link); text-decoration: underline; text-underline-offset: 2px; } a:hover { color: var(--color-primary-hover); } /* Focus visible — toujours, jamais supprimé */ :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); } ::selection { background: var(--mc-blue-200); color: var(--mc-ink-900); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* ============================================================ MathCalculus — Composants UI (CSS vanilla, piloté par tokens) Préfixe .mc- ; à coller tel quel dans le site statique. ============================================================ */ /* ----- Boutons ----- */ .mc-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--tap-target); padding: 0 var(--space-5); border-radius: var(--radius-md); font: var(--weight-semibold) var(--text-base) var(--font-body); text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out; } .mc-btn--primary { background: var(--color-primary); color: var(--color-on-primary); } .mc-btn--primary:hover { background: var(--color-primary-hover); } .mc-btn--primary:active { background: var(--mc-blue-800); } .mc-btn--secondary { background: var(--color-surface); color: var(--color-primary); border-color: var(--color-border-strong); } .mc-btn--secondary:hover { background: var(--color-primary-soft); border-color: var(--color-primary); } .mc-btn--ghost { background: transparent; color: var(--color-primary); } .mc-btn--ghost:hover { background: var(--color-primary-soft); } .mc-btn:disabled { opacity: 0.5; cursor: not-allowed; } .mc-btn--full { width: 100%; } /* ----- Champs de formulaire ----- */ .mc-field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); } .mc-field__label { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-text); } .mc-field__help { font-size: var(--text-sm); color: var(--color-text-3); } .mc-field__error { font-size: var(--text-sm); color: var(--mc-error); font-weight: var(--weight-semibold); } .mc-input, .mc-select { width: 100%; min-height: var(--tap-target); padding: 0 var(--space-4); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font: var(--weight-regular) var(--text-md) var(--font-body); font-variant-numeric: tabular-nums; transition: border-color 150ms ease-out; } .mc-input:hover, .mc-select:hover { border-color: var(--mc-ink-500); } .mc-input:focus-visible, .mc-select:focus-visible { border-color: var(--color-primary); box-shadow: var(--focus-ring); outline: none; } .mc-input[aria-invalid="true"] { border-color: var(--mc-error); } .mc-input--unit { position: relative; } .mc-input--unit .mc-input { padding-right: var(--space-7); } .mc-input--unit::after { content: attr(data-unit); position: absolute; right: var(--space-4); top: 50%; transform: translateY(-50%); color: var(--color-text-3); font-size: var(--text-md); pointer-events: none; } /* ----- Carte de calculateur ----- */ .mc-calc-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-5); } @media (min-width: 768px) { .mc-calc-card { padding: var(--space-6); } } .mc-calc-card__title { font-size: var(--text-xl); margin-bottom: var(--space-2); } .mc-calc-card__desc { color: var(--color-text-2); margin-bottom: var(--space-5); } .mc-calc-card__note { font-size: var(--text-xs); color: var(--color-text-3); margin: var(--space-4) 0 0; } /* Variante : tuile cliquable (liste des calculateurs) */ a.mc-calc-card { display: block; text-decoration: none; color: inherit; transition: box-shadow 150ms ease-out, border-color 150ms ease-out; } a.mc-calc-card:hover { box-shadow: var(--shadow-lg); border-color: var(--color-border-strong); } /* ----- Bloc de résultat ----- */ .mc-result { background: var(--color-result-bg); border: 1px solid var(--color-result-border); border-radius: var(--radius-xl); padding: var(--space-5); text-align: center; } .mc-result__label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-2); margin: 0 0 var(--space-1); } .mc-result__value { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-result); letter-spacing: var(--tracking-tight); color: var(--color-result-text); font-variant-numeric: tabular-nums; margin: 0; } .mc-result__detail { font-size: var(--text-sm); color: var(--color-text-2); margin: var(--space-2) 0 0; } .mc-result--enter { animation: mc-result-in 200ms ease-out; } @keyframes mc-result-in { from { opacity: 0; transform: translateY(4px); } } /* ----- Tableau comparatif ----- */ .mc-table { width: 100%; border-collapse: collapse; font-size: var(--text-base); } .mc-table caption { text-align: left; font-weight: var(--weight-semibold); padding-bottom: var(--space-3); } .mc-table th { text-align: left; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-2); text-transform: uppercase; letter-spacing: 0.04em; padding: var(--space-3) var(--space-4); border-bottom: 2px solid var(--color-border-strong); } .mc-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); font-variant-numeric: tabular-nums; } .mc-table tbody tr:nth-child(even) { background: var(--color-surface-alt); } .mc-table td.is-num, .mc-table th.is-num { text-align: right; } /* ----- FAQ (accordéon, natif details/summary) ----- */ .mc-faq { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); } .mc-faq details { border-bottom: 1px solid var(--color-border); } .mc-faq details:last-child { border-bottom: none; } .mc-faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--tap-target); padding: var(--space-4) var(--space-5); font-weight: var(--weight-semibold); font-size: var(--text-md); cursor: pointer; list-style: none; } .mc-faq summary::-webkit-details-marker { display: none; } .mc-faq summary::after { content: "+"; font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-primary); transition: transform 150ms ease-out; } .mc-faq details[open] summary::after { transform: rotate(45deg); } .mc-faq .mc-faq__body { padding: 0 var(--space-5) var(--space-4); color: var(--color-text-2); } /* ----- Fil d'ariane ----- */ .mc-breadcrumb { font-size: var(--text-sm); color: var(--color-text-3); } .mc-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; } .mc-breadcrumb li { display: flex; align-items: center; gap: var(--space-2); } .mc-breadcrumb li + li::before { content: "›"; color: var(--color-border-strong); } .mc-breadcrumb a { color: var(--color-text-2); text-decoration: none; } .mc-breadcrumb a:hover { color: var(--color-link); text-decoration: underline; } .mc-breadcrumb [aria-current="page"] { color: var(--color-text); font-weight: var(--weight-semibold); } /* ----- En-tête ----- */ .mc-header { background: var(--color-surface); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 10; } .mc-header__inner { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 60px; } .mc-header__logo { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; } .mc-header__logo img { width: 32px; height: 32px; } .mc-header__logo span { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-lg); color: var(--color-text); letter-spacing: var(--tracking-tight); } .mc-header__logo span b { color: var(--color-primary); } .mc-header__nav { display: flex; gap: var(--space-2); } .mc-header__nav a { display: inline-flex; align-items: center; min-height: var(--tap-target); padding: 0 var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-text-2); text-decoration: none; } .mc-header__nav a:hover { color: var(--color-primary); background: var(--color-primary-soft); } .mc-header__nav a[aria-current="page"] { color: var(--color-primary); } /* ----- Pied de page ----- */ .mc-footer { background: var(--mc-ink-900); color: #B9C7D4; margin-top: var(--space-8); } [data-theme="dark"] .mc-footer { background: var(--color-surface); border-top: 1px solid var(--color-border); } .mc-footer__inner { max-width: var(--container-max); margin: 0 auto; padding: var(--space-7) var(--gutter); display: grid; gap: var(--space-6); grid-template-columns: 1fr; } @media (min-width: 768px) { .mc-footer__inner { grid-template-columns: 2fr 1fr 1fr; } } .mc-footer h4 { color: #FFFFFF; font-size: var(--text-base); margin-bottom: var(--space-3); } .mc-footer a { color: #B9C7D4; text-decoration: none; } .mc-footer a:hover { color: #FFFFFF; text-decoration: underline; } .mc-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); } .mc-footer__legal { font-size: var(--text-xs); color: #8295A8; border-top: 1px solid rgba(255,255,255,0.12); padding-top: var(--space-4); grid-column: 1 / -1; } /* ----- Emplacement publicitaire ----- */ .mc-ad { background: var(--color-ad-bg); border: 1px dashed var(--color-ad-border); border-radius: var(--radius-md); min-height: var(--ad-min-h-mobile); display: flex; flex-direction: column; align-items: center; justify-content: center; margin: var(--space-6) 0; } .mc-ad::before { content: "Publicité"; font-size: var(--text-xs); color: var(--color-ad-label); text-transform: uppercase; letter-spacing: 0.08em; } @media (min-width: 768px) { .mc-ad--banner { min-height: var(--ad-min-h-desktop); } } /* ============================================================ MathCalculus — Mise en page du site (additions) ============================================================ */ .page { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); } .hero { padding: var(--space-6) 0 var(--space-5); } .hero p { max-width: var(--content-max); font-size: var(--text-md); color: var(--color-text-2); margin-bottom: 0; } .layout { display: grid; gap: var(--space-5); align-items: start; } @media (min-width: 900px) { .layout { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } } .grid-2 { display: grid; gap: 0 var(--space-4); } @media (min-width: 600px) { .grid-2 { grid-template-columns: 1fr 1fr; } } .reading { max-width: var(--content-max); } .reading > h2 { margin-top: var(--space-7); } .stack > * + * { margin-top: var(--space-5); } /* Theme toggle button */ .theme-toggle { background: none; border: 1px solid var(--color-border-strong); border-radius: var(--radius-full); min-height: var(--tap-target); padding: 0 var(--space-4); cursor: pointer; font: var(--weight-semibold) var(--text-sm) var(--font-body); color: var(--color-text-2); transition: border-color 150ms ease-out, color 150ms ease-out; } .theme-toggle:hover { border-color: var(--color-primary); color: var(--color-primary); } /* Result breakdown (rows under the headline result) */ .mc-breakdown { list-style: none; margin: var(--space-4) 0 0; padding: var(--space-4) 0 0; border-top: 1px solid var(--color-border); display: grid; gap: var(--space-2); } .mc-breakdown li { display: flex; justify-content: space-between; gap: var(--space-4); font-size: var(--text-base); } .mc-breakdown li span { color: var(--color-text-2); } .mc-breakdown li strong { font-variant-numeric: tabular-nums; color: var(--color-text); } /* Homepage hero + tiles */ .home-hero { background: linear-gradient(160deg, #F4F7FA 0%, #DDE9F6 100%); border-bottom: 1px solid var(--color-border); } [data-theme="dark"] .home-hero { background: linear-gradient(160deg, var(--color-surface) 0%, #1B2C42 100%); } .home-hero__inner { max-width: var(--container-max); margin: 0 auto; padding: var(--space-7) var(--gutter); text-align: center; } .home-hero h1 { margin-bottom: var(--space-3); } .home-hero p { color: var(--color-text-2); font-size: var(--text-md); max-width: 640px; margin: 0 auto; } .cat-title { font-size: var(--text-sm); color: var(--color-text-3); text-transform: uppercase; letter-spacing: 0.05em; margin: var(--space-7) 0 var(--space-4); font-weight: var(--weight-bold); } .hub-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; } @media (min-width: 600px) { .hub-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 900px) { .hub-grid { grid-template-columns: 1fr 1fr 1fr; } } .hub-icon { font-size: 1.6rem; } .hub-card h3 { font-size: var(--text-lg); margin: var(--space-2) 0; } .hub-card p { color: var(--color-text-2); font-size: var(--text-sm); margin: 0 0 var(--space-3); } .hub-cta { color: var(--color-primary); font-weight: var(--weight-semibold); font-size: var(--text-sm); } /* Variant links + popular */ .variant-links, .popular-links, .aside-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); } @media (min-width: 600px) { .variant-links, .popular-links { grid-template-columns: 1fr 1fr; } } .variant-links a, .popular-links a { display: block; padding: var(--space-3) var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: var(--text-sm); text-decoration: none; color: var(--color-text); } .variant-links a:hover, .popular-links a:hover { border-color: var(--color-primary); } .section-title { margin: var(--space-7) 0 var(--space-4); }