/* QG Bobons Pas Chers : feuille de style. Toutes les couleurs passent par des variables, redéfinies par [data-theme] sur . Seule la police des titres change selon le thème ; le texte reste en Atkinson Hyperlegible Next. Chaque thème garde un contraste d'au moins 4,5:1 (vérifié paire par paire). */ /* Variables communes (valeurs par défaut, calculées à partir des couleurs du thème) */ :root { --font-texte: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace; --fs: 18px; --stage: 2.2rem; --r: 14px; --on-acc: #FFFFFF; /* texte sur --acc-fill */ --acc2-text: var(--acc2); /* ambre utilisé comme texte sur fond ou carte */ --head-muted: var(--muted); /* texte secondaire dans l'en-tête */ --alert-bg: #3A1D12; --hatch: #4A4038; /* hachures des vacances */ --cal-bord: transparent; /* contour des cases du calendrier */ --titre-poids: 800; --titre-echelle: 1; /* réduit les polices de titres plus larges */ --logo: var(--acc2); /* couleur (ou dégradé) du logo */ --head-fond: var(--head); /* fond de l'en-tête (couleur ou dégradé) */ --deco-fond: none; /* décor du fond de page (halos du thème BBPC) */ --card-ombre: none; /* profondeur des cartes */ /* Couleurs des jours au calendrier (et des talons de billets) : par défaut, show = accent plein, pratique = accent 2 */ --cal-show: var(--acc-fill); --on-cal-show: var(--on-acc); --cal-pratique: var(--acc2); --on-cal-pratique: var(--on-acc2); --head-accent: var(--acc2); /* accent dans l'en-tête (« Salut … », flèche Retour) */ --peut: #4A64A8; /* « Peut-être » et statuts en suspens (bleu ardoise, le même partout) */ color-scheme: dark; } /* Thèmes : couleurs, police des titres, bandeau et logo */ /* BBPC (thème par défaut) : surtout noir et gris métallique, avec 3 couleurs par écran : rouge (boutons, shows au calendrier), bleu (sélections), bleu clair (titres de sections, pratiques) ; gris argent pour « Salut … ». Pas de jaune (jamais de jaune et de rouge dans un même écran). En plus des autres thèmes : en-tête au fini de métal brossé, logo chromé, cartes avec profondeur. */ [data-theme="bbpc"] { --bg: #0B0B0B; --card: #181818; --card2: #121212; --head: #000000; --head-text: #F2F2F2; --head-muted: #B5B5B5; --border: #3A3D40; --text: #F2F2F2; --muted: #B5B5B5; --acc: #8A8F94; --acc-fill: #C8202E; --acc-text: #8FB5FF; --acc2: #4D84FF; --on-acc2: #0B0B0B; --acc2-text: #7FD8FF; --cal-show: #C8202E; --on-cal-show: #FFFFFF; --cal-pratique: #6FD3FF; --on-cal-pratique: #0B0B0B; --head-accent: #C9CDD2; --yes: #2E7D32; --no: #C62828; --alert-bg: #2A1214; --hatch: #3A3D40; --font-titre: "Russo One", "Arial Black", sans-serif; --titre-poids: 400; --titre-echelle: .8; /* Bandeau : gris métallique et noir, avec de petites touches rouge, bleu clair et bleu */ --stripe: repeating-linear-gradient(90deg, #6E7378 0 40px, #000 40px 43px, #B9BEC3 43px 70px, #000 70px 73px, #C8202E 73px 79px, #000 79px 81px, #6FD3FF 81px 87px, #000 87px 89px, #3A6FF7 89px 95px, #000 95px 98px); /* Logo chromé */ --logo: linear-gradient(180deg, #FFFFFF 0%, #C9CDD2 38%, #7D8288 52%, #E4E7EB 66%, #9EA3A8 100%); /* En-tête : métal brossé foncé */ --head-fond: repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px), linear-gradient(180deg, #1E1E1E 0%, #050505 100%); --card-ombre: inset 0 1px 0 rgba(255, 255, 255, .05), 0 8px 20px rgba(0, 0, 0, .55); } [data-theme="folk"] { --bg: #1C1815; --card: #2A241F; --card2: #231E1A; --head: #14110F; --head-text: #F1E8D8; --border: #3D342C; --text: #F1E8D8; --muted: #B9AD9A; --acc: #C0562A; --acc-fill: #A8441F; --acc-text: #E07A45; --acc2: #D9A441; --on-acc2: #1C1815; --acc2-text: #8FBF7F; /* 3e couleur : vert forêt clair (titres) */ --yes: #4A7043; --no: #A8441F; --font-titre: "Big Shoulders Display", "Arial Narrow", sans-serif; --stripe: repeating-linear-gradient(90deg, #C0562A 0 30px, #14110F 30px 33px, #D9A441 33px 39px, #14110F 39px 42px); --logo: linear-gradient(135deg, #D9A441, #E07A45); } [data-theme="rock"] { --bg: #111111; --card: #1D1D1D; --card2: #181818; --head: #000000; --head-text: #F5F5F5; --head-muted: #B8B8B8; --border: #3A3A3A; --text: #F5F5F5; --muted: #B3B3B3; /* Rouge, noir et gris argent (pas de jaune avec le rouge) */ --acc: #C8201F; --acc-fill: #B01C1B; --acc-text: #FF6A5E; --acc2: #D9D9D9; --on-acc2: #111111; --acc2-text: #5AA9FF; /* 3e couleur : bleu électrique (titres) */ --yes: #2E7D32; --no: #B01C1B; --alert-bg: #3A1212; --hatch: #444444; --font-titre: "Anton", Impact, sans-serif; --titre-poids: 400; --stripe: repeating-linear-gradient(90deg, #C8201F 0 30px, #000 30px 33px, #F5F5F5 33px 37px, #000 37px 40px); --logo: linear-gradient(135deg, #FF6A5E, #C8201F); } /* Punk Rock (id « punk ») : affiche punk, au moins 10 couleurs : noir, blanc, gris, rouge punk, orange, vert lime, vert néon, cyan, bleu vif, bleu, mauve, rose. Rose mauve : shows et boutons · vert lime : pratiques et sélections · vert néon : « Salut … » bleu vif : titres de sections · rose mauve : cartes mises en avant et liens · mauve foncé : vacances, alertes. Pas de jaune (jamais de jaune et de rouge dans un même écran). Police d'affiche Staatliches, lisible. */ [data-theme="punk"] { --bg: #0E0E0E; --card: #1B1B1B; --card2: #151515; --head: #000000; --head-text: #FFFFFF; --head-muted: #BDBDBD; --border: #3A3A3A; --text: #F7F7F7; --muted: #BDBDBD; --acc: #D63AF9; --acc-fill: #B620E0; --acc-text: #F07BFF; --acc2: #B6FF00; --on-acc2: #0E0E0E; --acc2-text: #3FA9FF; --head-accent: #7CFF3A; --yes: #2E7D32; --no: #C62828; --alert-bg: #2A1238; --hatch: #4A2A5E; --font-titre: "Staatliches", Impact, sans-serif; --titre-poids: 400; --titre-echelle: .95; /* Bandeau : damier noir et blanc, et en dessous une fine bande aux couleurs vives */ --stripe: linear-gradient(90deg, #E3122B 0 14.3%, #FF7A00 0 28.6%, #B6FF00 0 42.9%, #7CFF3A 0 57.2%, #3FA9FF 0 71.5%, #1E6BFF 0 85.8%, #D63AF9 0) 0 100% / 100% 3px no-repeat, repeating-conic-gradient(#FFFFFF 0 25%, #000000 0 50%) 0 0 / 7px 7px; /* Logo : une couleur par mot (BOBONS bleu pâle, PA$ vert, CHERS mauve), image produite par scripts/generer-logo-punk.ps1 ; changer ?v= si l'image change (cache 4 h) */ --logo: url("logo-punk.png?v=3") center / contain no-repeat; /* En-tête noir, avec des lueurs rouge, rose mauve et bleu vif dans les coins */ --head-fond: radial-gradient(80% 140% at 100% 0%, rgba(227, 18, 43, .30), transparent 60%), radial-gradient(70% 160% at 0% 100%, rgba(214, 58, 249, .28), transparent 60%), radial-gradient(60% 120% at 55% 120%, rgba(30, 107, 255, .22), transparent 60%), #000000; } [data-theme="punk"] .progres span { background: linear-gradient(90deg, #E3122B, #D63AF9, #3FA9FF); } [data-theme="metal"] { --bg: #0A0A0A; --card: #161616; --card2: #111111; --head: #000000; --head-text: #E6E6E6; --head-muted: #A8A8A8; --border: #2E2E2E; --text: #E6E6E6; --muted: #A8A8A8; --acc: #A30F0F; --acc-fill: #A30F0F; --acc-text: #E85555; --acc2: #C0C0C0; --on-acc2: #0A0A0A; --acc2-text: #7FA7C9; /* 3e couleur : bleu acier (titres) */ --yes: #2F6B34; --no: #A30F0F; --alert-bg: #2A0A0A; --hatch: #3A3A3A; --font-titre: "Rubik Glitch", "Rubik", Impact, sans-serif; --titre-poids: 400; --titre-echelle: .92; /* massive et cassée, style industriel (choix du groupe) */ --stripe: repeating-linear-gradient(90deg, #A30F0F 0 22px, #000 22px 26px, #8A8A8A 26px 30px, #000 30px 34px); --logo: linear-gradient(180deg, #F2F2F2, #8A8A8A 55%, #D0D0D0); } /* Metal à la black metal : titres gothiques en majuscules et minuscules (en majuscules seulement, la gothique devient illisible), avec une lueur blanche froide, « givrée ». */ /* Angine (Rubik Mono One) : le « À » majuscule de la police est mal dessiné (on dirait « Ä »), mais ses minuscules sont dessinées en capitales avec les bons accents : on envoie donc les titres en minuscules. */ [data-theme="angine"] :is(.top h1, .big-title, .prochain-titre, .sec-title, .sheet h3, .talon b) { text-transform: lowercase; } [data-theme="metal"] :is(.top h1, .big-title, .prochain-titre, .sec-title, .sheet h3, .talon b) { text-transform: none; letter-spacing: .01em; text-shadow: 0 0 6px rgba(200, 220, 255, .35); } /* Angine de Poitrine : noir et blanc à pois, comme leurs costumes, avec une touche d'or. Petits pois blancs dans l’en-tête ; bandeau or avec des triangles noirs. */ [data-theme="angine"] { --bg: #000000; --card: #141414; --card2: #0C0C0C; --head: #000000; --head-text: #FFFFFF; --head-muted: #BDBDBD; --border: #5A5A5A; --text: #FFFFFF; --muted: #BDBDBD; --acc: #D4AF37; --acc-fill: #F2F2F2; --on-acc: #000000; --acc-text: #FFFFFF; --acc2: #D4AF37; --on-acc2: #000000; --acc2-text: #D4AF37; --yes: #2E7D32; --no: #C62828; --alert-bg: #262626; --hatch: #555555; --font-titre: "Rubik Mono One", "Arial Black", sans-serif; --titre-poids: 400; --titre-echelle: .75; /* Bandeau or avec de petits triangles noirs détachés, pointe vers le haut : 8 px de large, 7 px de haut, centrés dans la ligne, 8 px d'or entre chacun */ --stripe: conic-gradient(from 150deg at 50% 0%, #000000 0 60deg, transparent 0) 0 1.5px / 16px 7px repeat-x, #D4AF37; --logo: linear-gradient(135deg, #FFFFFF 0%, #F3E3A0 45%, #D4AF37 100%); /* Petits pois blancs (légèrement pâlis) en quinconce : une deuxième grille décalée d'une demi-case */ --head-fond: radial-gradient(circle, rgba(255, 255, 255, .8) 0 1px, transparent 1.4px) 0 0 / 16px 16px, radial-gradient(circle, rgba(255, 255, 255, .8) 0 1px, transparent 1.4px) 8px 8px / 16px 16px, #000000; } /* Textes de l'en-tête bien nets par-dessus les petits points */ [data-theme="angine"] .top h1, [data-theme="angine"] .top .sub, [data-theme="angine"] .top .hello { text-shadow: 0 0 3px #000, 0 0 6px #000; } [data-theme="armee"] { --bg: #1E2116; --card: #2A2E1F; --card2: #24281A; --head: #15170F; --head-text: #E8E4D0; --head-muted: #B5B09A; --border: #3D4230; --text: #ECE8D4; --muted: #B5B09A; --acc: #6B7B3A; --acc-fill: #556B2F; --acc-text: #A9BF6A; --acc2: #C8B560; --on-acc2: #1E2116; --acc2-text: #D4945A; /* 3e couleur : brun orangé (titres) */ --yes: #4A7043; --no: #8B2E1F; --alert-bg: #3A2A16; --hatch: #4A4F3A; --font-titre: "Black Ops One", Impact, sans-serif; --titre-poids: 400; --titre-echelle: .8; --stripe: repeating-linear-gradient(90deg, #556B2F 0 26px, #3B3F26 26px 40px, #8A7B4A 40px 54px, #2A2E1F 54px 64px); --logo: linear-gradient(135deg, #C8B560, #8A9A4A); } [data-theme="automne"] { --bg: #1F1410; --card: #2E1E17; --card2: #271912; --head: #170E0B; --head-text: #F5E6D3; --head-muted: #C9B09A; --border: #4A3226; --text: #F5E6D3; --muted: #C9B09A; --acc: #D2691E; --acc-fill: #A0461A; --acc-text: #F08A4B; --acc2: #E0A526; --on-acc2: #1F1410; --acc2-text: #9BB46A; /* 3e couleur : vert olive (titres) */ --yes: #4F7233; --no: #9E2B25; --alert-bg: #3A1D12; --hatch: #4A3A30; --font-titre: "Alfa Slab One", Rockwell, serif; --titre-poids: 400; --titre-echelle: .8; --stripe: repeating-linear-gradient(90deg, #D2691E 0 26px, #170E0B 26px 29px, #E0A526 29px 38px, #170E0B 38px 41px, #7A4A2A 41px 56px, #170E0B 56px 59px); --logo: linear-gradient(135deg, #E0A526, #D2691E 55%, #7A4A2A); } [data-theme="hiver"] { --bg: #0F1A26; --card: #182838; --card2: #132131; --head: #0A121B; --head-text: #EAF4FF; --head-muted: #A9C1D9; --border: #2A3F55; --text: #EAF4FF; --muted: #A9C1D9; --acc: #5FA8D3; --acc-fill: #2B6C99; --acc-text: #8CC8F0; --acc2: #DDEFFF; --on-acc2: #0F1A26; --acc2-text: #B9A6FF; /* 3e couleur : lilas (titres) */ --yes: #3E7D5A; --no: #B03A48; --alert-bg: #3A1D2A; --hatch: #34495E; --font-titre: "Fredoka", "Arial Rounded MT Bold", sans-serif; --titre-poids: 700; --titre-echelle: .85; --stripe: repeating-linear-gradient(90deg, #5FA8D3 0 24px, #0A121B 24px 27px, #FFFFFF 27px 33px, #0A121B 33px 36px); --logo: linear-gradient(180deg, #FFFFFF, #8CC8F0); } /* Printemps et été : thèmes clairs (l'en-tête et les onglets restent foncés) */ [data-theme="printemps"] { /* Printemps urbain (pas « champêtre ») : fond sauge, en-tête vert très foncé, corail vif, menthe, bleu électrique */ --bg: #D9E3DE; --card: #EEF3F0; --card2: #E0E8E4; --head: #12332E; --head-text: #FFFFFF; --head-muted: #BFD9D0; --border: #BDCBC4; --text: #101A16; --muted: #3F4F49; --acc: #FF4F7B; --acc-fill: #D6245A; --acc-text: #C21E50; --acc2: #7CE0B0; --on-acc2: #0B2A1F; --acc2-text: #1D4ED8; /* 3e couleur : bleu électrique (titres) */ --yes: #2E7D4F; --no: #B3262E; --alert-bg: #F7DCE3; --hatch: #C9D5CF; --cal-bord: #BDCBC4; --font-titre: "Outfit", "Segoe UI", sans-serif; --titre-poids: 800; --titre-echelle: .95; --stripe: linear-gradient(90deg, #FF4F7B, #7CE0B0 50%, #1D4ED8); --logo: linear-gradient(135deg, #FF8FAB, #7CE0B0); color-scheme: light; } [data-theme="ete"] { --bg: #FFF8E7; --card: #FFFFFF; --card2: #FFF1CC; --head: #0B6E79; --head-text: #FFFFFF; --head-muted: #CDEFF2; --border: #F0DDA8; --text: #2B2118; --muted: #6A5A45; --acc: #F28C28; --acc-fill: #C2410C; --acc-text: #B23A0A; --acc2: #FFE27A; --on-acc2: #2B2118; --acc2-text: #0B6E79; --yes: #2E7D4F; --no: #B3262E; --alert-bg: #FDE3D8; --hatch: #EAD9A8; --cal-bord: #F0DDA8; --font-titre: "Bungee", Impact, sans-serif; --titre-poids: 400; --titre-echelle: .72; --stripe: repeating-linear-gradient(90deg, #F28C28 0 24px, #0B6E79 24px 28px, #FFE27A 28px 40px, #0B6E79 40px 44px); --logo: linear-gradient(135deg, #FFE27A, #F28C28); color-scheme: light; } html { font-size: var(--fs); -webkit-text-size-adjust: 100%; } html.big { --fs: 22px; } html.petit { --fs: 16px; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--bg); background-image: var(--deco-fond); background-attachment: fixed; color: var(--text); font-family: var(--font-texte); line-height: 1.45; } body.staged { overflow: hidden; } h1, h2, h3, p { margin: 0; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } a { color: var(--acc-text); } :focus-visible { outline: 3px solid var(--acc2); outline-offset: 2px; } [hidden] { display: none !important; } .ico { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* ---------- En-tête ---------- */ /* La barre du haut a TOUJOURS la même hauteur, sur tous les écrans et même en A+ : hauteur fixe en px, titre et sous-titre sur une seule ligne chacun (« … » si trop long). */ .top { background: var(--head-fond); color: var(--head-text); padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px; position: relative; } .top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px; background: var(--stripe); } .top-in { max-width: 44rem; margin: 0 auto; display: flex; gap: 12px; align-items: center; height: 96px; } .titre-bloc { display: grid; gap: 4px; } .titre-ligne { display: flex; align-items: center; gap: 4px; min-width: 0; } .top h1 { min-width: 0; font-family: var(--font-titre); font-weight: var(--titre-poids); text-transform: uppercase; font-size: calc(clamp(24px, 7.2vw, 40px) * var(--titre-echelle)); line-height: 1.15; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .top .sub { color: var(--head-muted); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Coin droit de l'en-tête : logo aux couleurs du thème, puis choix du thème et A+ */ .top-aside { flex: none; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 4px; height: 96px; } .outils { display: flex; gap: 5px; } .theme-btn { position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 44px; background: transparent; padding: 0; border: 2px solid var(--border); border-radius: 10px; color: var(--head-text); } .theme-btn .ico { width: 24px; height: 24px; } /* Le vrai