/* ── Espace client — feuille partagée par /connexion et /compte ───────────────────── Portage de la maquette « Espace client v2 » (projet Claude Design) dans le système « Estampes » de la vitrine. Trois écarts assumés par rapport au fichier de maquette : — les polices sont AUTO-HÉBERGÉES, pas chargées chez Google. La page reste sans aucune requête externe, ce que le garde-fou de déploiement et la CSP exigent ; — les couleurs passent par les jetons de la vitrine plutôt que par des valeurs écrites en clair, pour que les deux moitiés du site vieillissent ensemble ; — les gravures de portail sont des JPEG opaques traités par --plate-filter, et non des PNG à alpha composés en mix-blend-mode. Même raison que presse-atelier.jpg : une trame fine sature la couche alpha et pèse cinq fois plus (5,7 Mo -> 815 Ko). Contrairement à index.html, monolithique, ces deux pages partagent ce fichier : trois exemplaires des mêmes jetons auraient divergé au premier réglage. Une requête de plus, autorisée par `style-src 'self'`. */ /* ── Polices ──────────────────────────────────────────────────────────────────────── */ @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/instrumentsans-var.woff2') format('woff2'); } /* ── Titres : Doyle Medium Italic ──────────────────────────────────────────────────── Remplace Niconne depuis le 2026-08-10, pour que l'espace client porte la même face de titre que la home — Niconne n'y est plus déclarée du tout. Seule l'ITALIQUE est employée, comme sur la home : les règles de titre demandent donc `font-style: italic` en plus de la famille. La romaine est déclarée pour que la famille soit complète, mais aucun sélecteur ne l'appelle : elle n'est pas téléchargée. Les corps ont été relevés de 15 % en même temps — ils étaient calibrés pour une anglaise, qui rend petit pour son corps ; Doyle y paraissait timide. ⚠️ Fonte SOUS LICENCE (Sharp Type). Voir la section « Polices » du README. */ @font-face { font-family: 'Doyle Medium'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/doyle-medium.woff2') format('woff2'); } @font-face { font-family: 'Doyle Medium'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/doyle-medium-italic.woff2') format('woff2'); } /* ── Jetons ───────────────────────────────────────────────────────────────────────── */ :root { --idc-font-body: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --idc-font-script: 'Doyle Medium', Georgia, serif; --idc-or: #c6aa60; --idc-or-filet: rgba(198, 170, 96, .55); } :root, [data-theme="nuit"] { --bg: linear-gradient(160deg, #070b18 0%, #0d1430 55%, #080c1c 100%); --plate-filter: invert(1) grayscale(1) contrast(1.15) brightness(.95) sepia(.75) saturate(1.7) hue-rotate(-12deg); --text: #f4f0e8; --text-muted: rgba(244,240,232,.78); --line: rgba(244,240,232,.28); --line-faint: rgba(244,240,232,.12); --surface: rgba(244,240,232,.05); --surface-2: rgba(244,240,232,.028); --header-bg: rgba(7,11,24,.86); --cta-bg: #c6aa60; --cta-text: #1a1a2d; --lien: #a9b8ee; /* Ocre et carmin : les deux encres d'alerte. Elles n'existaient pas dans la vitrine (l'accent rouge y est décoratif) — voir le brief design, §1. */ --ocre: #e3b23c; --ocre-encre: #f0d9a0; --carmin: #e0705a; --carmin-encre: #f3b8ac; /* Le volet gauche de la connexion : un papier un ton au-dessus du fond. */ --volet: rgba(244,240,232,.04); --cadre-or: #8a7440; /* Repris à l'identique de la home : le menu du compte est le MÊME composant des deux côtés, et il ne peut l'être que si sa pastille l'est aussi. ⚠️ Ce n'est pas --cta-bg : de nuit le bouton est or et l'avatar crème. */ --avatar-bg: #f4f0e8; --avatar-glyph: #0b1024; /* Bordure des COMMANDES : --line, mesuré en tant que tel, tombe à 2,34:1 en nuit et 1,59:1 en jour, sous les 3:1 de SC 1.4.11. Un jeton séparé plutôt que de relever --line, qui sert aussi de filet décoratif partout. */ --line-ui: rgba(244,240,232,.36); } [data-theme="jour"] { --bg: linear-gradient(160deg, #faf7f0 0%, #efe8d9 55%, #f4f0e8 100%); --plate-filter: none; --text: #1a1a2d; --text-muted: rgba(26,26,45,.66); --line: rgba(26,26,45,.22); --line-faint: rgba(26,26,45,.10); --surface: rgba(26,26,45,.045); --surface-2: rgba(26,26,45,.025); --header-bg: rgba(250,247,240,.88); --cta-bg: #1a1a2d; --cta-text: #f4f0e8; --lien: #303e75; --ocre: #7a5304; --ocre-encre: #7a5304; --carmin: #b14434; --carmin-encre: #b14434; /* Blanc pur, et non le crème de la page : le volet devient une feuille posée sur le papier. C'est aussi le fond que `multiply` retire le mieux — les gravures de portail sont des JPEG à fond blanc, la fusion les découpe ici sans le moindre reste. */ --volet: #fff; --cadre-or: #a8894a; --avatar-bg: #1a1a2d; --avatar-glyph: #f4f0e8; --line-ui: rgba(26,26,45,.48); } /* ── Base ─────────────────────────────────────────────────────────────────────────── */ * { box-sizing: border-box; } /* ⚠️ Sans cette ligne, tout élément que le script masque par `hidden` mais dont le CSS fixe un `display` reste VISIBLE — l'attribut ne pose qu'un `display:none` de feuille par défaut, que la moindre règle bat. Constaté aussitôt : le bandeau de paiement s'affichait sur l'écran nominal. */ [hidden] { display: none !important; } html, body { margin: 0; padding: 0; background: #070b18; } html[data-theme="jour"], [data-theme="jour"] body { background: #faf7f0; } body { min-height: 100vh; min-height: 100dvh; background: var(--bg); background-attachment: fixed; font-family: var(--idc-font-body); color: var(--text); } a { color: var(--lien); } /* Anneau à deux tons — même correctif que la home, pour le même défaut : l'or seul tombait à 2,11:1 sur le papier et 2,25:1 sur le volet blanc, contre 3:1 exigés (SC 1.4.11). Le trait porteur suit le thème, l'or reste en halo. */ :where(a, button, input, select, summary):focus-visible { outline: 2px solid var(--text); outline-offset: 3px; box-shadow: 0 0 0 4px var(--idc-or); } /* Étiquette : petites capitales espacées. Le motif de libellé de toute la vitrine. */ .etiq { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); } /* ── En-tête ──────────────────────────────────────────────────────────────────────── */ .tete { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px max(4vw, 24px); border-bottom: 1px solid var(--line-faint); background: var(--header-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); position: sticky; top: 0; z-index: 5; } /* Le pictogramme d'étiquette précède le nom, comme sur la home. Il y était absent : les deux moitiés du site n'avaient pas la même marque. Ici la marque est un LIEN vers l'accueil (sur la home, elle ne mène nulle part puisqu'on y est déjà) — c'est la seule différence, et elle est voulue. */ .marque { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; color: var(--text); text-decoration: none; } .marque svg { display: block; flex: none; fill: currentColor; } .marque span { color: var(--text-muted); } /* ── Menu du compte ────────────────────────────────────────────────────────────────── Porté de la home, classes comprises : c'est le même composant, pas une imitation. Un