/* ============================================================================ BarHunt — direction artistique « affiche sérigraphiée sur sous-bock ». Le site n'est pas un guide qui note des bars, c'est un carnet à cocher : la feuille imite une affiche imprimée en deux encres sur du carton de sous-bock. · deux encres seulement, et leur sémantique est fixe — le VERMILLON est la voix du site (progression, paliers, ce que l'utilisateur a fait), le VERT BOUTEILLE porte les données rapportées (les bars tels qu'OpenStreetMap les décrit, que le site ne juge pas) ; · aucun arrondi, des filets épais, des ombres portées dures et jamais floutées : une ombre floue est une lumière, une ombre dure est un décalage de passe d'impression ; · un grain fixe en surimpression sur toute la page ; · le titrage en Archivo Black capitales, le texte courant en Archivo. Deux thèmes : carton (clair) et encre (sombre). Le choix système fait foi, le bouton de la barre du haut le surcharge (data-theme sur ). Sommaire 1. Jetons 7. Composants du produit 2. Base 8. Cartons, panneaux, pages de texte 3. Barre du haut 9. Comptes et authentification 4. Boutons et formulaires 10. Pied de page 5. Bandeaux de message 11. Mobile 6. Accueil 12. Mouvement réduit ============================================================================ */ /* --- Fontes auto-hébergées (la CSP interdit les CDN de fontes) ------------ */ @font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/archivo-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/archivo-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Archivo Black"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/archivo-black-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Archivo Black"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/archivo-black-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ============================================================================ 1. Jetons ============================================================================ */ :root { /* --- Carton et encres --- */ --paper: #EDE3CE; --paper-sunk: #E0D4B9; /* aplat en creux : panneaux, cartons de section */ --paper-deep: #D2C2A0; /* filets secondaires, séparateurs internes */ --ink: #17130D; --ink-soft: #5C5340; --red: #C6431C; /* la voix du site : progression, paliers, actions */ --red-wash: rgba(198, 67, 28, .12); --blue: #1F5E4A; /* les données rapportées : ce qu'OSM décrit */ --blue-wash: rgba(31, 94, 74, .12); --on-red: #F7F1E4; /* texte posé sur un aplat vermillon */ /* Les deux aplats appellent le même texte : en clair les deux encres sont sombres, en sombre les deux sont claires. Un seul jeton suffirait, mais deux noms disent l'intention à la lecture d'une règle isolée. */ --on-blue: #F7F1E4; /* Multiply en clair, screen en sombre : dans les deux cas le grain et les aplats se comportent comme une encre posée sur le carton. */ --overprint: multiply; --grain: .4; color-scheme: light; /* --- Titrage et texte --- */ --display: "Archivo Black", "Haettenschweiler", "Impact", "Arial Narrow Bold", sans-serif; --body: "Archivo", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif; --mono: "Consolas", ui-monospace, "SF Mono", Menlo, monospace; /* Approche du titrage : Archivo Black est un gras large, il ne demande pas l'ouverture d'un condensé — mais elle reste inversement proportionnelle au corps, les fûts se collent d'autant plus que la taille baisse. */ --track-xl: .004em; /* 3 rem et plus */ --track-l: .014em; /* 2 à 3 rem */ --track-m: .024em; /* 1,2 à 2 rem */ --track-s: .04em; /* titrage en petit corps */ --track-caps: .14em; /* capitales d'étiquette, corps < 1 rem */ /* --- Trait et ombre --- */ --rail: 3px; /* épaisseur du filet courant */ --rail-thick: 6px; /* bandeau de section, bord de tuile */ --drop: 5px 5px 0 var(--ink); /* ombre portée dure, jamais floutée */ --drop-sm: 3px 3px 0 var(--ink); /* --- Alias littéraux --- Le style de carte (public/map/style.json, étape 7) et tout script qui colore un rendu lisent ces variables via getComputedStyle().getPropertyValue(), qui ne résout PAS var(). Elles doivent donc rester des valeurs littérales, redéfinies à l'identique dans chaque thème. Ce ne sont pas des doublons : ce sont les seules entrées lisibles depuis JavaScript. --line n'habille rien ici, c'est la grille des rendus, plus douce que le filet d'encre. */ --bg: #EDE3CE; --panel: #E0D4B9; --line: #C2AF8C; --text: #17130D; --muted: #5C5340; --accent: #C6431C; --accent2: #1F5E4A; } /* Thème encre : préférence système… */ @media (prefers-color-scheme: dark) { :root { --paper: #16130D; --paper-sunk: #211B12; --paper-deep: #3A3122; --ink: #F0E8D6; --ink-soft: #9C917A; --red: #FF6A3D; --red-wash: rgba(255, 106, 61, .14); --blue: #6FC9A3; --blue-wash: rgba(111, 201, 163, .14); --on-red: #16130D; --on-blue: #16130D; --overprint: screen; --grain: .3; color-scheme: dark; --bg: #16130D; --panel: #211B12; --line: #3A3122; --text: #F0E8D6; --muted: #9C917A; --accent: #FF6A3D; --accent2: #6FC9A3; } } /* …puis choix explicite du lecteur, qui doit l'emporter dans les deux sens. */ :root[data-theme="dark"] { --paper: #16130D; --paper-sunk: #211B12; --paper-deep: #3A3122; --ink: #F0E8D6; --ink-soft: #9C917A; --red: #FF6A3D; --red-wash: rgba(255, 106, 61, .14); --blue: #6FC9A3; --blue-wash: rgba(111, 201, 163, .14); --on-red: #16130D; --on-blue: #16130D; --overprint: screen; --grain: .3; color-scheme: dark; --bg: #16130D; --panel: #211B12; --line: #3A3122; --text: #F0E8D6; --muted: #9C917A; --accent: #FF6A3D; --accent2: #6FC9A3; } :root[data-theme="light"] { --paper: #EDE3CE; --paper-sunk: #E0D4B9; --paper-deep: #D2C2A0; --ink: #17130D; --ink-soft: #5C5340; --red: #C6431C; --red-wash: rgba(198, 67, 28, .12); --blue: #1F5E4A; --blue-wash: rgba(31, 94, 74, .12); --on-red: #F7F1E4; --on-blue: #F7F1E4; --overprint: multiply; --grain: .4; color-scheme: light; --bg: #EDE3CE; --panel: #E0D4B9; --line: #C2AF8C; --text: #17130D; --muted: #5C5340; --accent: #C6431C; --accent2: #1F5E4A; } /* ============================================================================ 2. Base Contrastes (WCAG AA) : sur les deux thèmes, --ink et --ink-soft passent le 4.5:1 du texte courant. Le vermillon sur carton clair plafonne à 3.9:1 : il est réservé au titrage, aux aplats et aux filets, jamais à du texte courant en petit corps — d'où les liens de contenu en encre soulignée de vermillon plutôt qu'en vermillon plein. ============================================================================ */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--body); font-size: 1rem; background: var(--paper); color: var(--ink); line-height: 1.55; overflow-x: hidden; -webkit-font-smoothing: antialiased; } /* Grain de sérigraphie : une seule couche fixe, en surimpression sur toute la page (tiroir et bandeaux compris : c'est la feuille entière qui est imprimée). z-index sous les 1000 du tiroir de carte, au-dessus de tout le reste. */ body::after { content: ""; position: fixed; inset: 0; z-index: 900; pointer-events: none; opacity: var(--grain); mix-blend-mode: var(--overprint); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); } a { color: inherit; text-decoration: none; } ::selection { background: var(--red); color: var(--on-red); } :focus-visible { outline: var(--rail) solid var(--red); outline-offset: 2px; } h1, h2, h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; text-wrap: balance; line-height: 1.02; } h1 { font-size: 2.4rem; letter-spacing: var(--track-l); } h2 { font-size: 1.5rem; letter-spacing: var(--track-m); } h3 { font-size: 1.15rem; letter-spacing: var(--track-m); } strong { font-weight: 700; } em { font-style: italic; } /* Les chiffres s'alignent partout où ils se comparent d'une ligne à l'autre. */ .stats strong, .progress-value, .tally-value, .bar-row-state, .rating { font-variant-numeric: tabular-nums; } .container { max-width: 900px; margin: 0 auto; padding: 2.5rem 1.5rem 3rem; } /* Titre de section posé sous un filet épais : le bandeau est la structure de l'affiche, il découpe la page en placards successifs. */ .container > h1, .container > h2 { margin: 2.6rem 0 1.1rem; padding-top: .9rem; border-top: var(--rail-thick) solid var(--ink); } .container > h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); } .container > h1:first-child, .container > h2:first-child { margin-top: 0; } /* Lien dans un bloc de texte : encre soulignée de vermillon. Le soulignement porte la couleur, le texte garde son contraste. Le :not(.btn) n'est pas une précaution de style mais une nécessité : ce sélecteur descendant l'emporte sur .btn, et un bouton posé dans un paragraphe y perdrait son ombre dure. */ .container p a:not(.btn), .page a:not(.btn), .notice a:not(.btn), .info a:not(.btn), .drawer-body a:not(.btn), .account-row a:not(.btn) { font-weight: 700; box-shadow: inset 0 -.14em 0 var(--red); } .container p a:not(.btn):hover, .page a:not(.btn):hover, .notice a:not(.btn):hover, .info a:not(.btn):hover, .drawer-body a:not(.btn):hover, .account-row a:not(.btn):hover { background: var(--red-wash); } /* Masquage visuel sans retrait du flux d'accessibilité (cases à cocher, étiquettes de notation) : le lecteur d'écran lit, l'œil ne voit rien. */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ============================================================================ 3. Barre du haut ============================================================================ */ .topbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .85rem clamp(1rem, 4vw, 1.75rem); background: var(--paper); border-bottom: var(--rail) solid var(--ink); position: relative; z-index: 160; } .logo { font-family: var(--display); font-size: 1.35rem; text-transform: uppercase; letter-spacing: var(--track-m); } .logo span { color: var(--red); } .topbar-brand { display: flex; align-items: center; gap: 1.75rem; } .topbar-actions { display: flex; align-items: center; gap: .5rem; } .topbar nav { display: flex; align-items: center; gap: 1.25rem; } .topbar nav a { display: inline-block; padding: .3rem 0; font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-caps); } .nav-link { color: var(--ink); } /* Soulignement d'encre au survol, tiré depuis la gauche. */ .topbar nav a.nav-link { background-image: linear-gradient(var(--red), var(--red)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 var(--rail); transition: background-size .18s steps(4); } .topbar nav a.nav-link:hover { background-size: 100% var(--rail); } .topbar nav .inline { display: inline-block; } .topbar-actions .inline { display: inline-flex; } /* Les liens de compte vivent hors du