/* ============================================================================ ADDIQT — le site. Jetons, thème, remise à zéro. ============================================================================ Repris de `web/tokens.css`, le fichier du logiciel : mêmes noms, mêmes valeurs. Un jeton qui n'existe pas est jeté EN SILENCE par le navigateur (`var(--separateur)` quand il s'appelle `--separator` ne produit ni erreur ni avertissement), donc on ne renomme rien en passant du logiciel au site. AUCUNE CLASSE ici, et c'est volontaire : le site est écrit en styles en ligne. Ce fichier ne porte que ce qui ne peut pas l'être — la police, les jetons, le thème, la remise à zéro. AUCUNE DÉPENDANCE DISTANTE : la police est dans le dossier. ========================================================================== */ @font-face { font-family: "Inter"; src: url("fonts/InterVariable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } :root, [data-theme="clair"] { --accent: #0BB414; --accent-hover: #0AA312; --accent-active: #099310; /* Sur blanc, #0BB414 ne donne que 3,4:1 : suffisant pour un aplat avec du blanc dessus, insuffisant pour du texte vert. Cette variante passe AA (4,9:1) et sert PARTOUT où le vert devient du texte. */ --accent-text: #078A0E; --accent-soft: #E8F7E9; --accent-border: #BCE7BF; --accent-doux: color-mix(in srgb, #0BB414 12%, transparent); --bg: #F2F2F7; --surface: #FFFFFF; --surface-2: #F2F2F7; --surface-3: #E9E9EF; --label: rgba(0, 0, 0, 1); --label-2: rgba(60, 60, 67, 0.60); --label-3: rgba(60, 60, 67, 0.30); --separator: rgba(60, 60, 67, 0.29); --trait: rgba(60, 60, 67, 0.12); --fill-3: rgba(118, 118, 128, 0.12); --fill-4: rgba(116, 116, 128, 0.08); --legal-encre: rgba(60, 60, 67, 0.42); --legal-trait: rgba(60, 60, 67, 0.09); --danger: #D70015; --danger-soft: #FDECEE; --danger-border: #F5C2C7; /* Presque pas d'ombre : la profondeur vient du contraste des fonds. Les opacités plafonnent à 8 %. */ --elev: 0 1px 2px rgba(0, 0, 0, .05), 0 2px 6px rgba(0, 0, 0, .05), 0 6px 12px rgba(0, 0, 0, .05); --elev-carte: 0 1px 3px rgba(0, 0, 0, .04), 0 8px 28px rgba(0, 0, 0, .06); } /* Le fond sombre n'est PAS un noir absolu : `#000` place les cartes au même niveau que le fond, et la page devient une masse uniforme où l'on ne distingue plus ce qui est posé sur quoi. */ @media (prefers-color-scheme: dark) { /* Borne sur `:not([data-theme="clair"])`, et ce n'est pas un detail : sans elle, ce bloc a la MEME specificite que celui du haut et le suit dans le fichier, donc il gagne. Le bouton « passer en clair » ne faisait rien. */ :root:not([data-theme="clair"]) { --accent-text: #2BE838; --accent-soft: #102A13; --accent-border: #1D4A21; --accent-doux: color-mix(in srgb, #0BB414 18%, transparent); --bg: #16161A; --surface: #212126; --surface-2: #2E2E34; --surface-3: #3C3C43; --label: rgba(255, 255, 255, 1); --label-2: rgba(235, 235, 245, 0.60); --label-3: rgba(235, 235, 245, 0.30); --separator: rgba(84, 84, 88, 0.60); --trait: rgba(235, 235, 245, 0.14); --fill-3: rgba(235, 235, 245, 0.10); --fill-4: rgba(235, 235, 245, 0.06); --legal-encre: rgba(235, 235, 245, 0.34); --legal-trait: rgba(235, 235, 245, 0.08); --danger: #FF453A; --danger-soft: #2A1114; --danger-border: #5A1F26; /* En sombre, une ombre noire sur fond sombre ne fait rien : on la remplace par une bordure claire à très faible opacité. */ --elev: 0 0 0 1px rgba(255, 255, 255, .08), 0 4px 16px rgba(0, 0, 0, .4); --elev-carte: 0 0 0 1px rgba(255, 255, 255, .08), 0 12px 32px rgba(0, 0, 0, .5); } } html[data-theme="sombre"] { --accent-text: #2BE838; --accent-soft: #102A13; --accent-border: #1D4A21; --accent-doux: color-mix(in srgb, #0BB414 18%, transparent); --bg: #16161A; --surface: #212126; --surface-2: #2E2E34; --surface-3: #3C3C43; --label: rgba(255, 255, 255, 1); --label-2: rgba(235, 235, 245, 0.60); --label-3: rgba(235, 235, 245, 0.30); --separator: rgba(84, 84, 88, 0.60); --trait: rgba(235, 235, 245, 0.14); --fill-3: rgba(235, 235, 245, 0.10); --fill-4: rgba(235, 235, 245, 0.06); --legal-encre: rgba(235, 235, 245, 0.34); --legal-trait: rgba(235, 235, 245, 0.08); --danger: #FF453A; --danger-soft: #2A1114; --danger-border: #5A1F26; --elev: 0 0 0 1px rgba(255, 255, 255, .08), 0 4px 16px rgba(0, 0, 0, .4); --elev-carte: 0 0 0 1px rgba(255, 255, 255, .08), 0 12px 32px rgba(0, 0, 0, .5); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); } body { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* ss01 : le « a » et le « g » à étage unique, ce qui rapproche Inter de la forme des lettres de San Francisco. calt : ponctuation contextuelle. */ font-feature-settings: "calt" 1, "ss01" 1; font-optical-sizing: auto; color: var(--label); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; text-wrap: pretty; } a { color: var(--accent-text); text-decoration: none; } a:hover { color: var(--accent-hover); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* La convention française sépare les milliers par une espace insécable. Celle du navigateur est très fine : on garde le bon caractère et on élargit l'espace. */ [data-mille] { word-spacing: 0.16em; } /* Les pages légales s'impriment : quelqu'un qui conteste un prélèvement imprime les CGV. Les liens sont dépliés en toutes lettres, parce qu'un lien bleu sur du papier ne mène nulle part. */ @media print { html, body { background: #fff; color: #000; } [style*="--legal-encre"], main { color: #000 !important; } [data-noprint] { display: none !important; } a { color: #000; text-decoration: underline; } a[href^="http"]::after, a[href^="mailto"]::after { content: " (" attr(href) ")"; font-size: 11px; word-break: break-all; } h1, h2, h3 { page-break-after: avoid; } section { page-break-inside: avoid; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ---- LES PAGES LEGALES N'ONT AUCUNE COULEUR ------------------------------ */ [data-legal] a, [data-legal] a:visited { color: inherit; text-decoration: underline; text-decoration-color: var(--legal-trait); text-underline-offset: 2px; } [data-legal] a:hover { color: var(--label); text-decoration-color: currentColor; }