/* ═══════════════════════════════════════════════════════════════════════ NICOLETTA ELECTRICITE — feuille de styles Contrat : DESIGN.md. Thème CLAIR. Motif signature : la ligne de crête. Les 3 palettes de la Phase 1bis vivent en variables : changer de direction = changer `data-dir` sur , rien d'autre. ═══════════════════════════════════════════════════════════════════════ */ /* ── Palette — direction C « Poste avancé », choisie par Mourad le 2026-08-05. Les directions A et B sont écartées et ne reviennent pas (DESIGN.md §9). ── */ :root { --ink: #0F2438; /* bleu nuit alpin : titres, header, bandeaux d aplat */ --ink-soft: #173953; /* survol des aplats ink */ --accent: #B87333; /* cuivre — GRAPHIQUE seulement : crête, filets, survols */ --accent-txt: #8F5722; /* cuivre assombri — TEXTE de petit corps (eyebrow, liens) : le cuivre clair ne passe pas AA sous 18 px */ --accent-d: #9C5F27; --accent-ink: #C9853F; /* cuivre ÉCLAIRCI — texte de petit corps sur fond --ink. Symétrique de --accent-txt : sur fond sombre il faut monter, pas descendre. --accent brut n'y donne que 4,16 (AA exige 4,5 sous 18 px) ; celui-ci donne 5,2. */ --paper: #F5F7F9; --card: #FFFFFF; --line: #D8DFE6; --muted: #5A6B7B; } :root { --fs-display: clamp(38px, 5.4vw, 84px); --fs-h2: clamp(28px, 3.2vw, 46px); --fs-h3: clamp(20px, 1.8vw, 26px); --fs-lead: clamp(18px, 1.5vw, 21px); --radius: 4px; --radius-ui: 8px; --gap: clamp(16px, 3vw, 32px); --maxw: 1240px; --pad: clamp(16px, 4vw, 40px); --sec: clamp(48px, 6vw, 96px); } /* ── Base ─────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: 'Work Sans', system-ui, -apple-system, sans-serif; font-size: 17px; line-height: 1.62; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; } img, svg { max-width: 100%; display: block; } img { height: auto; } a { color: inherit; } /* Work Sans est chargée en 400/500/600 : sans cette règle, un / de texte courant demande 700, que le navigateur SYNTHÉTISE (faux gras baveux). 600 est déjà la graisse d'emphase du site — même rendu, zéro octet en plus. */ b, strong { font-weight: 600; } h1, h2, h3, h4 { font-family: 'Schibsted Grotesk', system-ui, sans-serif; margin: 0; letter-spacing: -.02em; text-wrap: balance; line-height: 1.08; } p { margin: 0; text-wrap: pretty; } ul, ol { margin: 0; padding: 0; } .tnum { font-feature-settings: 'tnum'; } .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); } .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; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } /* ⛔ Pas de left:-9999px : ça crée un débordement horizontal réel, que le sweep du harnais mesure. Masquage par clip, qui n'occupe aucune place. */ .skip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .skip:focus { position: fixed; left: 0; top: 0; z-index: 200; width: auto; height: auto; clip: auto; clip-path: none; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 0 0 var(--radius-ui) 0; } /* ── Boutons ──────────────────────────────────────────────────────────── */ .btn { /* ⛔ font-family: un