/* 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 */ color-scheme: dark; } /* Thèmes : couleurs, police des titres, bandeau et logo */ /* BBPC (thème par défaut) : les quatre couleurs des instruments du groupe (rouge, jaune, bleu clair, bleu) sur un fond indigo presque noir. Il a quelques touches de plus que les autres : halos colorés dans le fond, en-tête en dégradé et cartes avec un peu de profondeur. */ [data-theme="bbpc"] { --bg: #0F1020; --card: #1A1B33; --card2: #15162B; --head: #0A0A17; --head-text: #F4F1FF; --head-muted: #B8B9E0; --border: #2E3060; --text: #F4F2FF; --muted: #B7B8DD; --acc: #3A6FF7; --acc-fill: #D62839; --acc-text: #FF6B78; --acc2: #FFC93C; --on-acc2: #0F1020; --acc2-text: #7FD8FF; --yes: #2E7D32; --no: #C62828; --alert-bg: #2A1426; --hatch: #2E3A7A; --font-titre: "Russo One", "Arial Black", sans-serif; --titre-poids: 400; --titre-echelle: .8; --stripe: repeating-linear-gradient(90deg, #E63946 0 28px, #0A0A17 28px 31px, #FFC93C 31px 45px, #0A0A17 45px 48px, #6FD3FF 48px 62px, #0A0A17 62px 65px, #3A6FF7 65px 93px, #0A0A17 93px 96px); --logo: linear-gradient(120deg, #FF4D5E 0%, #FFC93C 35%, #6FD3FF 65%, #3A6FF7 100%); --head-fond: linear-gradient(135deg, #0A0A17 0%, #141233 60%, #1B1030 100%); --deco-fond: radial-gradient(60% 40% at 0% 0%, rgba(230, 57, 70, .12), transparent 70%), radial-gradient(50% 35% at 100% 15%, rgba(58, 111, 247, .14), transparent 70%), radial-gradient(55% 35% at 15% 85%, rgba(111, 211, 255, .08), transparent 70%), radial-gradient(55% 40% at 100% 100%, rgba(255, 201, 60, .07), transparent 70%); --card-ombre: 0 0 0 1px rgba(111, 211, 255, .06), 0 10px 24px rgba(0, 0, 0, .35); } [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; --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; --acc: #C8201F; --acc-fill: #B01C1B; --acc-text: #FF6A5E; --acc2: #F2B233; --on-acc2: #111111; --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 : bleu skate-punk, inspiré de Millencolin (Life on a Plate) */ [data-theme="punk"] { --bg: #0B1330; --card: #14204A; --card2: #101A3D; --head: #070D22; --head-text: #EAF2FF; --head-muted: #A9BCE6; --border: #26386E; --text: #EEF4FF; --muted: #A9BCE6; --acc: #2F7BFF; --acc-fill: #1F5FD6; --acc-text: #7FB2FF; --acc2: #FFD23F; --on-acc2: #0B1330; --yes: #2E7D32; --no: #C62828; --alert-bg: #2A1030; --hatch: #2A3A66; --font-titre: "Permanent Marker", "Comic Sans MS", cursive; --titre-poids: 400; --titre-echelle: .85; --stripe: repeating-linear-gradient(45deg, #2F7BFF 0 12px, #070D22 12px 24px, #FFD23F 24px 36px, #070D22 36px 48px); --logo: linear-gradient(135deg, #7FB2FF, #2F7BFF 60%, #FFD23F); } [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; --yes: #2F6B34; --no: #A30F0F; --alert-bg: #2A0A0A; --hatch: #3A3A3A; --font-titre: "Metal Mania", Impact, serif; --titre-poids: 400; --titre-echelle: .95; --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); } /* Angine de Poitrine : noir et blanc, à pois, comme leurs costumes */ [data-theme="angine"] { --bg: #000000; --card: #141414; --card2: #0C0C0C; --head: #000000; --head-text: #FFFFFF; --head-muted: #BDBDBD; --border: #5A5A5A; --text: #FFFFFF; --muted: #BDBDBD; --acc: #FFFFFF; --acc-fill: #F2F2F2; --on-acc: #000000; --acc-text: #FFFFFF; --acc2: #8C8C8C; --on-acc2: #000000; --acc2-text: #FFFFFF; --yes: #2E7D32; --no: #C62828; --alert-bg: #262626; --hatch: #555555; --font-titre: "Rubik Mono One", "Arial Black", sans-serif; --titre-poids: 400; --titre-echelle: .75; --stripe: radial-gradient(circle, #FFFFFF 0 3px, transparent 3.5px) 0 50% / 12px 10px repeat-x, #000000; --logo: #FFFFFF; } [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; --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; --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, #9E2B25 41px 56px, #170E0B 56px 59px); --logo: linear-gradient(135deg, #E0A526, #D2691E 55%, #9E2B25); } [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: #BFE0FF; --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"] { --bg: #F6F8EF; --card: #FFFFFF; --card2: #EEF2E4; --head: #2F5D3A; --head-text: #FFFFFF; --head-muted: #D5E8CF; --border: #CFD8C0; --text: #1E2A1E; --muted: #4F5E4C; --acc: #E07AA0; --acc-fill: #B83B6B; --acc-text: #A8325F; --acc2: #B9E4A0; --on-acc2: #10210E; --acc2-text: #3F7A2A; --yes: #2E7D4F; --no: #B3262E; --alert-bg: #FCE4EC; --hatch: #D9DECF; --cal-bord: #CFD8C0; --font-titre: "Baloo 2", "Arial Rounded MT Bold", sans-serif; --titre-echelle: .9; --stripe: repeating-linear-gradient(90deg, #E07AA0 0 24px, #FFFFFF 24px 28px, #B9E4A0 28px 40px, #FFFFFF 40px 44px); --logo: linear-gradient(135deg, #F7B7CF, #B9E4A0); 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; } *, *::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: 6px; } .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