/* ═══════════════════════════════════════════════════════════════════════════ SOCLE DES PAGES SATELLITES — finavim.ch confidentialite.html · confirmation.html · desinscription.html Ces trois pages portaient chacune une copie du même bloc de 85 lignes. Elles partagent désormais ce fichier : le socle n'existe qu'une fois, et une correction de contraste ou de cible ne s'applique plus à un tiers du site par oubli. index.html garde sa feuille en ligne — page unique de 100 Ko, aucune duplication à résoudre. Les valeurs ci-dessous sont celles d'index.html (:114-158, :186, :326) : toute divergence ici est un bug, pas une variante. Contrepartie de l'externalisation : les deux fontes seraient découvertes un aller-retour trop tard. Chaque page les précharge donc dans son . ═══════════════════════════════════════════════════════════════════════════ */ @font-face { font-family: "Inter Tight"; src: url("fonts/inter-tight-latin.woff2") format("woff2"); font-style: normal; font-weight: 400 700; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono-latin.woff2") format("woff2"); font-style: normal; font-weight: 400 500; font-display: swap; } :root { --bg: oklch(0.985 0.003 90); --fg: #1a2444; --fg-2: oklch(0.42 0.05 255); --fg-3: oklch(0.50 0.03 255); --fg-hover: oklch(0.40 0.07 255); --rule: oklch(0.90 0.006 90); --field-border: oklch(0.65 0.006 90); --accent: oklch(0.42 0.14 262); --accent-2: oklch(0.55 0.10 250); /* Les paires « plein / texte » d'index.html:144-148. Le suffixe -text n'est pas cosmétique : le vert plein mesure 4,0:1 en petit corps sur crème, le rouge plein 4,3:1. Les remplissages prennent la valeur nue, tout ce qui porte des lettres prend la variante -text. */ --pos: oklch(0.58 0.13 162); --pos-text: oklch(0.53 0.13 162); --neg: oklch(0.56 0.18 25); --neg-text: oklch(0.50 0.18 25); --font-sans: "Inter Tight", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; /* mêmes valeurs que index.html : le sigle et le filet de pied se calent exactement sur la colonne des sections de la landing page. */ --max: 1240px; --pad: clamp(20px, 4vw, 56px); /* Mesure de lecture. Attention au piège de l'unité : `ch` vaut la chasse du zéro, plus large que le caractère moyen d'Inter Tight — 68ch rendaient 87 caractères par ligne, mesurés. 54ch en rendent 69, dans la fourchette de 45 à 75, et à 15 comme à 16 px. */ --measure: 54ch; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-sans); background: var(--bg); color: var(--fg); font-feature-settings: "ss01", "cv11"; letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; } /* ───────── ÉTATS CLAVIER / APPUI — index.html:186 ───────── Global, et non par composant : la page de confidentialité n'avait aucune règle de focus, donc l'anneau de marque disparaissait en quittant l'accueil. */ :focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; } /* ───────── LIENS ───────── Les liens en ligne dans une phrase sont exemptés du critère de cible WCAG 2.5.8, mais 18 px restent difficiles à viser au pouce. Le padding vertical n'affecte pas la hauteur de ligne d'un élément en ligne : la zone cliquable passe à 24 px sans qu'un seul pixel ne bouge. */ a { color: inherit; text-decoration: underline; text-underline-offset: 3px; padding-block: 3px; } @media (hover: hover) { a:hover { text-decoration-thickness: 2px; } } /* ───────── GABARIT ───────── .wrap porte la colonne ; header, main et footer sont de vrais repères de navigation. Ils étaient auparavant avalés par un
unique, et les points d'entrée `banner` / `contentinfo` disparaissaient dès qu'on quittait index.html. */ .wrap { max-width: var(--max); margin: 0 auto; padding: 40px var(--pad) 80px; } .page-head { margin-bottom: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } /* Language selector styles are shared in assets/language-switcher.css. */ .back { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.02em; text-decoration: none; padding-block: 9px; /* 26 px de sigle + 18 = cible de 44 px */ transition: opacity .15s ease; } .back .logo-mark { width: 26px; height: 26px; background: var(--fg); color: var(--bg); display: grid; place-items: center; border-radius: 5px; font-weight: 700; font-size: 0.6875rem; letter-spacing: -0.02em; } @media (hover: hover) { .back:hover { opacity: 0.72; } } .back:active { transform: translateY(1px); } .lbl { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); display: block; margin: 0 0 16px; } h1 { margin: 0 0 16px; font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1.05; letter-spacing: -0.035em; font-weight: 500; text-wrap: balance; max-width: 18ch; } p, li { font-size: 0.9375rem; line-height: 1.6; color: var(--fg-2); margin: 0 0 12px; max-width: var(--measure); text-wrap: pretty; } /* ───────── PIED ───────── Le filet se cale sur la mesure et non sur les 1240 px du conteneur : sous une colonne de 500 px, un trait de 1135 px ne lit pas comme la limite basse de la page, il lit comme un trait égaré. Le sigle, lui, garde le bord gauche de la colonne d'index.html — c'est cet alignement-là qui se voit. */ .page-foot { margin-top: 48px; max-width: var(--measure); } .rule { border: none; border-top: 1px solid var(--rule); margin: 0; } .foot { font-family: var(--font-mono); font-size: 0.75rem; line-height: 2.1; /* laisse la place aux cibles quand le pied passe à deux lignes */ color: var(--fg-3); margin: 20px 0 0; max-width: none; } .foot a { padding: 8px 3px; margin: 0 -3px; } @media (hover: hover) { .foot a:hover { color: var(--fg); text-decoration-thickness: 1px; } } /* ───────── BOUTON PLEIN — index.html:326 ───────── Réservé aux actions sûres : retour au site, rejoindre la liste. Le navy plein signifie « oui, continuez » sur toute la surface du produit. */ .cta { display: inline-flex; align-items: center; min-height: 44px; margin-top: 20px; background: var(--fg); color: var(--bg); padding: 12px 22px; border-radius: 10px; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; transition: background .15s ease; } @media (hover: hover) { .cta:hover { background: var(--fg-hover); } } .cta:active { transform: translateY(1px); } /* ───────── MARQUE DE SUCCÈS ───────── Tracée, et non le caractère U+2713 : le sous-ensemble embarqué est `inter-tight-latin`, où ce point de code n'existe pas. Il retombait sur la police système — Segoe UI Symbol sous Windows, émoji couleur sur certains Android. Le glyphe du moment de succès était un repli. */ .tick { /* viewBox serré sur le tracé : dans un carré, la coche n'occupait que la moitié de sa hauteur et lisait deux tailles en dessous des capitales. L'épaisseur de trait est calée sur le fût d'Inter Tight en graisse 500. */ width: 0.72em; height: auto; color: var(--pos-text); margin-right: 0.22em; flex: none; } [hidden] { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }