/*BM-PARCHEMIN — le parchemin est le defaut ; le fond sombre reste disponible, au choix du lecteur et non de son systeme. Les valeurs du theme sombre sont celles d'avant, a l'identique. */ :root{ color-scheme: light; --bg:#f3ece0;--card:#fffdf7;--ink:#2b2620;--muted:#6b6252;--line:#e0d5bd;--gold:#6f5210/*BM-OR-LISIBLE*/;--goldsoft:#f4ead2;--shadow:0 1px 2px rgba(60,45,20,.06),0 8px 26px rgba(60,45,20,.09);--c-000:#d8ccb2;--c-100e09:#f0e8d9;--c-12100b:#f3ece0;--c-171410:#efe7d8;--c-191409:#f6efe1;--c-1a1509:#e9dfc9;--c-1a160e:#f7f1e5;--c-1a1712:#1a1712;--c-1b160f:#fffdf7;--c-1b1710:#fffdf7;--c-1f1a10:#fffdf7;--c-211b12:#fffdf7;--c-221d13:#f6eeda;--c-221d15:#f7f1e5;--c-241d10:#ece2cd;--c-241f16:#f2ead9;--c-2a2418:#e6dcc6;--c-3a3325:#e0d5bd;--c-4a3f22:#d9cba8;--c-4d9fff:#2f5d8a;--c-6f6552:#8a8071;--c-6f6857:#8a8071;--c-7fce9f:#2c6b57;--c-8a8271:#7d735f;--c-8f8674:#7d735f;--c-9ec2e6:#2f5d8a;--c-a99e8a:#7d735f;--c-b8892b:#b0842a;--c-b9ae97:#3a342b;--c-c9a55a:#a07a24;--c-cbb88a:#6b5a33;--c-d4af5a:#a07a24;--c-e08a76:#a3402d;--c-e0b455:#9a7420;--c-e7d9b4:#2b2620;--c-efe7d6:#2b2620;--c-ff8a8a:#a3402d; } html[data-theme="sombre"]{ color-scheme: dark; --bg:#12100b;--card:#1b160f;--ink:#e7d9b4;--muted:#a99e8a;--line:#3a3325;--gold:#e0b455;--goldsoft:#3a3014;--shadow:0 1px 2px rgba(0,0,0,.3),0 8px 26px rgba(0,0,0,.45);--c-000:#000;--c-100e09:#100e09;--c-12100b:#12100b;--c-171410:#171410;--c-191409:#191409;--c-1a1509:#1a1509;--c-1a160e:#1a160e;--c-1a1712:#1a1712;--c-1b160f:#1b160f;--c-1b1710:#1b1710;--c-1f1a10:#1f1a10;--c-211b12:#211b12;--c-221d13:#221d13;--c-221d15:#221d15;--c-241d10:#241d10;--c-241f16:#241f16;--c-2a2418:#2a2418;--c-3a3325:#3a3325;--c-4a3f22:#4a3f22;--c-4d9fff:#4d9fff;--c-6f6552:#6f6552;--c-6f6857:#6f6857;--c-7fce9f:#7fce9f;--c-8a8271:#8a8271;--c-8f8674:#8f8674;--c-9ec2e6:#9ec2e6;--c-a99e8a:#a99e8a;--c-b8892b:#b8892b;--c-b9ae97:#b9ae97;--c-c9a55a:#c9a55a;--c-cbb88a:#cbb88a;--c-d4af5a:#d4af5a;--c-e08a76:#e08a76;--c-e0b455:#e0b455;--c-e7d9b4:#e7d9b4;--c-efe7d6:#efe7d6;--c-ff8a8a:#ff8a8a; } .bm-theme{font:inherit;font-size:15px;line-height:1;cursor:pointer; border:1px solid var(--c-3a3325);background:var(--c-1a160e);color:var(--c-e0b455); padding:8px 12px;border-radius:999px;} .bm-theme:hover{border-color:var(--c-b8892b);} *{box-sizing:border-box;} html,body{margin:0;height:100%;background:var(--c-12100b); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:var(--c-e7d9b4);-webkit-tap-highlight-color:transparent;} #topbar{position:fixed;top:0;left:0;right:0;height:50px;z-index:99999; display:none;align-items:center;justify-content:space-between;gap:8px; padding:0 12px;padding-top:env(safe-area-inset-top);background:var(--c-171410);border-bottom:1px solid var(--c-000);} #topbar.show{display:flex;} #topbar .home-btn{font:inherit;font-size:14px;font-weight:700;cursor:pointer;flex:none; border:1px solid var(--c-3a3325);background:var(--c-221d15);color:var(--c-cbb88a);padding:7px 13px;border-radius:999px; display:flex;align-items:center;gap:7px;transition:.15s;white-space:nowrap;} #topbar .home-btn:hover{border-color:var(--c-b8892b);color:var(--c-e0b455);} .switchN{display:flex;gap:6px;overflow:auto;} .switchN button{font:inherit;font-size:13px;font-weight:700;cursor:pointer;flex:none; border:1px solid var(--c-3a3325);background:var(--c-221d15);color:var(--c-cbb88a);padding:7px 11px;border-radius:999px; display:flex;align-items:center;gap:6px;transition:.15s;white-space:nowrap;} .switchN button:hover{border-color:var(--c-b8892b);} .switchN button.active{background:var(--c-b8892b);color:var(--c-1a1712);border-color:var(--c-b8892b);} /*BM-HAUT-PARENT*/:root{--bm-haut:50px}html.bmHautParti{--bm-haut:0px}#topbar{transition:transform .22s ease}html.bmHautParti #topbar{transform:translateY(-100%);pointer-events:none}@media (prefers-reduced-motion:reduce){#topbar{transition:none}} .frm{position:fixed;left:0;right:0;width:100%;border:0;background:var(--c-12100b); top:calc(var(--bm-haut) + env(safe-area-inset-top)); height:calc(100vh - var(--bm-haut) - env(safe-area-inset-top)); height:calc(100dvh - var(--bm-haut) - env(safe-area-inset-top));} .frm.hide{display:none;} /* Dans un bloc d'etude, le glissement du haut vers le bas ne doit pas recharger la page (geste "tirer pour rafraichir"). */ html.inblock,html.inblock body{overscroll-behavior-y:none;overscroll-behavior-x:auto;} #home{position:fixed;inset:0;z-index:50000;overflow:auto;-webkit-overflow-scrolling:touch; background:radial-gradient(1200px 600px at 50% -10%, var(--c-241d10) 0%, rgba(36,29,16,0) 60%), radial-gradient(900px 500px at 50% 120%, var(--c-1a1509) 0%, rgba(26,21,9,0) 55%),var(--c-100e09); transition:opacity .35s ease;} .home-inner{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center; padding:calc(env(safe-area-inset-top) + 34px) 20px calc(env(safe-area-inset-bottom) + 34px);} #home.hide{opacity:0;pointer-events:none;} /*BM-FOND-ARCADE*/ /* L ARCADE DU BETH MIDRASH, ET LE LIVRE DANS SON CADRE. Yossef : « je veux que le texte soit lisible dans tout le bloc et uniquement le contour de la grande fenetre tu affiches l arriere plan ». C est la plus simple des cinq solutions essayees, et la seule qui ne touche A RIEN a l interieur des cadres. Le bloc d etude garde son fond opaque, sa mise en page, ses cartes, ses colonnes : la lisibilite est celle d avant, au pixel pres. Mesure qui l a impose : dans les deux Talmuds, 15 % SEULEMENT du texte repose sur un fond opaque — c est la tsourat ha-daf, des colonnes posees a meme la page. Rendre le cadre transparent y aurait mis 85 % du texte de la Guemara directement sur le motif. DEUX declarations, et c est tout : 1. le motif est le fond de BODY — il ne part donc plus avec l accueil. C etait le defaut : l arcade etait le fond de #home, et #home.hide passe l opacite a 0 quand un livre s ouvre. 2. la grande fenetre est ecartee des bords de 40 px (10 sur telephone). Pourquoi BODY et non un calque en position:fixed : #home defile (overflow:auto + -webkit-overflow-scrolling:touch) et sur Safari iOS ses descendants position:fixed sont emportes avec le contenu — c est le defaut corrige le meme jour sur le cadenas de l admin. Le fond d un element, lui, est peint sur sa boite de rembourrage et ne bouge pas. body fait la hauteur de la fenetre : le motif est cale en bas de l ecran et y reste. Poids : le dessin est en data: dans le CSS, 14 ko une fois compresse pour les deux themes, et AUCUNE requete reseau. */ body{ background: /* le voile : couleur de la page en haut, mince en bas. Il n existe pas d opacity par calque en CSS — c est par ce voile qu on dose la force du motif, et le theme clair en demande un peu plus. */ linear-gradient(180deg, var(--bm-arc-h) 0%, var(--bm-arc-h) 12%, var(--bm-arc-b) 52%, var(--bm-arc-b) 100%), var(--bm-arc) repeat-x bottom, var(--c-100e09); background-size:auto,auto 780px,auto; } /* L ACCUEIL GARDE UN FOND OPAQUE, ET CE N EST PAS NEGOCIABLE. Premiere tentative : j avais mis #home en `transparent`, en me disant qu il couvrirait sinon le motif de body. Resultat immediat, et Yossef l a vu avant moi : le contenu du cadre du TANAKH apparaissait par-dessus l accueil — « Etude du Tanakh », les selecteurs LIVRE / PARACHA / CHAPITRE, tout, en surimpression sur les rubriques. La raison est ecrite noir sur blanc quatre lignes plus haut dans ce meme fichier, et je l ai quand meme oubliee : fT est LE SEUL cadre qui ne porte pas `hide` au demarrage. Il n est pas cache, il est cache DERRIERE l accueil. Un accueil transparent le laisse passer. Donc #home porte le motif LUI AUSSI, avec exactement les memes calques. Un seul des deux est visible a la fois — #home.hide passe l opacite a 0 quand un livre s ouvre — et l accueil reste opaque en toutes circonstances. */ #home{ background: radial-gradient(1200px 600px at 50% -10%, var(--c-241d10) 0%, rgba(36,29,16,0) 60%), linear-gradient(180deg, var(--bm-arc-h) 0%, var(--bm-arc-h) 12%, var(--bm-arc-b) 52%, var(--bm-arc-b) 100%), var(--bm-arc) repeat-x bottom, var(--c-100e09); background-size:auto,auto,auto 780px,auto; } /* LA GRANDE FENETRE, ecartee des bords. Son fond reste OPAQUE. ATTENTION — une iframe est un element REMPLACE. Avec `top` et `bottom` poses et `height:auto`, Chromium lui donne sa hauteur INTRINSEQUE de 150 px et ignore `bottom` : mesure faite, la fenetre s est effondree en une vignette de 340x150 en haut a gauche. D ou la hauteur explicite en calc(). */ /*BM-HAUT-PARENT*/ /* Les 40 px sont l arcade, pas de la place perdue : ils restent. */ .frm{ left:40px; right:auto; width:calc(100% - 80px); top:calc(var(--bm-haut) + env(safe-area-inset-top) + 40px); height:calc(100vh - var(--bm-haut) - env(safe-area-inset-top) - 80px); height:calc(100dvh - var(--bm-haut) - env(safe-area-inset-top) - 80px); border-radius:18px; overflow:hidden; box-shadow:0 0 0 1px rgba(0,0,0,.16), 0 10px 34px rgba(30,22,8,.20); } html[data-theme="sombre"] .frm{ box-shadow:0 0 0 1px rgba(0,0,0,.55), 0 10px 34px rgba(0,0,0,.5); } @media (max-width:700px){ .frm{ left:10px; width:calc(100% - 20px); top:calc(50px + env(safe-area-inset-top) + 10px); height:calc(100vh - 50px - env(safe-area-inset-top) - 20px); height:calc(100dvh - 50px - env(safe-area-inset-top) - 20px); border-radius:14px; } /* LE TELEPHONE N EST PAS UN PETIT GRAND ECRAN. A 780 px de haut, la tuile couvrait 92 pour cent d un ecran de 844, et a 390 px de large on ne voyait qu UNE ARCHE ET DEMIE, agrandie : ce n etait plus un mur au fond d une piece, c etait du papier peint colle sur le texte. Yossef : « la photo de fond sur smartphone rend tres moche ». On recule le mur — moitie moins haut, donc deux fois plus d arches et un motif deux fois plus fin — et on epaissit le voile, parce qu un petit ecran n a pas de marge ou le motif puisse respirer loin du texte. */ body{ background-size:auto,auto 380px,auto; } #home{ background-size:auto,auto,auto 380px,auto; } :root,html[data-theme="clair"]{ --bm-arc-b:rgba(243,236,224,.62); } html[data-theme="sombre"]{ --bm-arc-b:rgba(16,14,9,.55); } } /* LE THEME CLAIR N A PLUS DE MOTIF, ET C EST UNE MESURE QUI L A DECIDE. Releve du 30 aout sur les pixels reels de l accueil, apres avoir deja fonce l or et le gris. Seuil lisible pour du petit texte : 4,5. nom de rayon intertitre petite glose avec le motif 2,94 3,29 2,33 + un voile de .55 4,52 4,89 3,82 sans le motif 5,65 5,97 4,94 Le motif n est pas uniforme : au-dessus d un pilier sombre, meme un or fonce tombe sous le seuil. Un voile plus epais rattrape les titres mais pas la petite glose, et il efface le dessin de toute facon. En SOMBRE, rien de tout cela : le contraste y va de 5,7 a 10,3, et l arcade est belle. Yossef, le 30 aout : « la garder en sombre, l enlever en clair ». Le dessin clair n est donc meme plus embarque — autant de data: en moins dans la page. */ :root{ --bm-arc:none; --bm-arc-h:var(--c-100e09); --bm-arc-b:var(--c-100e09); } html[data-theme="clair"]{ --bm-arc:none; --bm-arc-h:var(--c-100e09); --bm-arc-b:var(--c-100e09); } /* Le voile est un degrade : sans motif dessous il resterait un leger dedoublement de teinte. On coupe les calques d image en clair, et la page devient exactement la couleur qu elle annonce. */ html:not([data-theme="sombre"]) body, html:not([data-theme="sombre"]) #home{ background-image:none; } html[data-theme="sombre"]{ --bm-arc:none; --bm-arc-h:var(--c-100e09); --bm-arc-b:var(--c-100e09); } .brand{text-align:center;margin-bottom:26px;} .brand .he{font-family:'Frank Ruhl Libre',"Times New Roman",serif;direction:rtl; font-size:38px;font-weight:700;color:var(--c-e0b455);letter-spacing:1px;text-shadow:0 2px 24px rgba(224,180,85,.18);} .brand .fr{font-size:15px;color:var(--c-a99e8a);margin:6px 0 0;letter-spacing:.5px;font-weight:400;line-height:1.45;} .brand .rule{width:70px;height:2px;margin:14px auto 0;border-radius:2px; background:linear-gradient(90deg,rgba(224,180,85,0),var(--c-b8892b),rgba(224,180,85,0));} .cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;width:100%;max-width:1000px;} .card{cursor:pointer;border:1px solid var(--c-3a3325);border-radius:18px; background:linear-gradient(180deg,var(--c-211b12),var(--c-191409));padding:22px 16px 18px;text-align:center; position:relative;overflow:hidden;transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; box-shadow:0 1px 2px rgba(0,0,0,.4),0 12px 34px rgba(0,0,0,.32);} .card:hover,.card:focus-visible{transform:translateY(-4px);border-color:var(--c-b8892b); box-shadow:0 1px 2px rgba(0,0,0,.4),0 18px 44px rgba(0,0,0,.5);outline:none;} .card:active{transform:translateY(-1px);} .card .ic{font-size:36px;line-height:1;filter:drop-shadow(0 4px 12px rgba(0,0,0,.4));} .card .he{font-family:'Frank Ruhl Libre',"Times New Roman",serif;direction:rtl; font-size:22px;font-weight:700;color:var(--c-e0b455);margin-top:8px;} .card .name{font-size:16px;font-weight:700;color:var(--c-efe7d6);margin-top:6px;} .card .desc{font-size:12px;color:var(--c-a99e8a);margin-top:6px;line-height:1.45;} .card .go{display:inline-block;margin-top:12px;font-size:12.5px;font-weight:700; color:var(--c-1a1712);background:var(--c-b8892b);border-radius:999px;padding:6px 16px;transition:background .18s;} .card:hover .go{background:var(--c-e0b455);} .tip{margin-top:22px;font-size:12px;color:var(--c-6f6552);text-align:center;} @media (max-width:900px){ .cards{grid-template-columns:repeat(2,minmax(0,1fr));max-width:560px;} } @media (max-width:600px){ .cards{grid-template-columns:1fr;max-width:420px;} .brand .he{font-size:31px;} .switchN button .lbl{display:none;} } #adminLink,#infoLink{display:block;margin:14px auto 0;background:none;border:0;color:var(--c-6f6552);font:inherit;font-size:12px;cursor:pointer;opacity:.7;} .copyr{margin-top:12px;font-size:11px;color:var(--c-6f6552);opacity:.75;text-align:center;letter-spacing:.3px;} .lib-intro{max-width:680px;margin:2px auto 0;text-align:center;color:var(--c-a99e8a);font-size:13.5px;line-height:1.6;font-weight:400;} .lib-intro b{color:var(--c-cbb88a);font-weight:600;} .contact{text-align:center;margin-top:14px;} .contact a,.contact button{color:var(--c-e0b455);font-size:13px;font-weight:600;text-decoration:none;border:1px solid var(--c-4a3f22);border-radius:999px;padding:7px 16px;display:inline-block;transition:.15s;background:none;cursor:pointer;font-family:inherit;} .contact a:hover,.contact button:hover{background:var(--c-b8892b);color:var(--c-1a1712);border-color:var(--c-b8892b);} #adminLink:hover,#infoLink:hover{color:var(--c-b8892b);opacity:1;text-decoration:underline;} /*BM-ADMIN-COIN*/ /* En bas a DROITE : le bas au centre est pris par les messages passagers (left:50%;bottom:22px), et le haut par la barre. */ html #adminLink{position:fixed;inset:auto 0 0 auto;margin:0; right:calc(10px + env(safe-area-inset-right,0px)); bottom:calc(10px + env(safe-area-inset-bottom,0px)); z-index:70000;display:flex;align-items:center;justify-content:center; width:18px;height:18px;border-radius:50%;font-size:11px;line-height:1; opacity:.16;border:1px solid transparent;background:none; text-decoration:none;transition:opacity .15s,background .15s,border-color .15s;} /* Discret ne veut pas dire introuvable : au survol, il redevient un bouton — fond, cadre, pleine opacite. */ html #adminLink:hover,html #adminLink:focus-visible{opacity:1; background:var(--c-241d10,rgba(0,0,0,.25)); border-color:var(--c-3a3325,rgba(212,175,90,.35));text-decoration:none;} /* Le doigt est moins precis que la souris, mais Yossef veut un symbole minuscule sur TOUS les appareils. On agrandit donc la zone touchable sans agrandir le symbole : un pseudo-element transparent de 36px autour. Petit a l oeil, trouvable au pouce. */ html #adminLink::after{content:'';position:absolute;inset:-9px;} /*BM-ADMIN-PIED*/ /*BM-ADMIN-PIED — le bouton n est plus enfant de #home : il n herite donc plus de #home.hide{opacity:0;pointer-events:none}, qui le cachait pendant l etude. On le dit ici. `inblock` est pose et retire au meme instant que `hide` (open_ et ouvrir l ajoutent, goHome le retire) : la visibilite est identique a ce qu elle etait. */ html.inblock #adminLink{display:none;} /*BM-ADMIN-DISCRET — le cadenas flottant ne s affiche plus du tout. Il etait en bas a droite, 18 px, avec un halo TOUCHABLE de 36 px : sur telephone, pile la ou le pouce se repose et ou le navigateur montre l indicateur de defilement. L element reste dans la page pour que openAdmin() et le dialogue gardent exactement le meme chemin. */ html #adminLink{display:none !important;} /*BM-ADMIN-DISCRET — la ligne de copyright ne se selectionne plus : sans cela, le double-clic surligne le texte avant d ouvrir. Rien d autre ne change — ni couleur, ni curseur, ni soulignement. */ .copyr{-webkit-user-select:none;user-select:none;} /*BM-ADMIN-HAUT*/ #admin,#info{position:fixed;inset:0;z-index:100000;display:none;align-items:center;justify-content:center;background:rgba(8,7,4,.85);padding:20px;} #admin.show,#info.show{display:flex;} .admin-box{background:var(--c-1b160f);border:1px solid var(--c-3a3325);border-radius:18px;max-width:580px;width:100%;max-height:86vh;overflow:auto;padding:22px 22px 26px;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.6);} .admin-box h2{color:var(--c-e0b455);margin:0 0 14px;font-size:20px;} .admin-box h3{color:var(--c-e0b455);margin:18px 0 8px;font-size:15px;} .admin-x{position:absolute;top:12px;right:14px;background:none;border:0;color:var(--c-a99e8a);font-size:20px;cursor:pointer;} .admin-box input{font:inherit;font-size:16px;padding:9px 12px;border-radius:9px;border:1px solid var(--c-3a3325);background:var(--c-221d15);color:var(--c-e7d9b4);width:100%;margin:6px 0;} .admin-box button.go{background:var(--c-b8892b);color:var(--c-1a1712);border:0;font-weight:700;padding:9px 18px;border-radius:9px;cursor:pointer;font:inherit;} #adminErr{color:var(--c-e08a76);font-size:13px;margin-top:6px;min-height:16px;} .stat{font-size:14px;color:var(--c-cbb88a);margin:4px 0;} .stat b{color:var(--c-e0b455);font-size:20px;margin-right:6px;} .admin-note{font-size:12px;color:var(--c-a99e8a);background:var(--c-241d10);border:1px solid var(--c-3a3325);border-radius:10px;padding:10px 12px;margin:12px 0;line-height:1.5;} .alist{max-height:40vh;overflow:auto;border-top:1px solid var(--c-3a3325);margin-top:6px;} .arow{display:flex;justify-content:space-between;gap:10px;padding:7px 2px;border-bottom:1px solid var(--c-2a2418);font-size:13px;color:var(--c-e7d9b4);} .arow .ad{color:var(--c-a99e8a);font-size:12px;white-space:nowrap;} .admin-none{color:var(--c-a99e8a);font-style:italic;font-size:13px;padding:10px 0;} /*BM-PASSAGES-TIROIR — le journal des passages, en tiroir. La fleche est dessinee ici et non heritee de : le triangle natif change de forme et de taille selon le navigateur, et il est illisible sur iOS. */ .bmv-det{border:1px solid var(--c-3a3325);border-radius:10px;margin:18px 0 4px;background:var(--c-241d10);} .bmv-det>summary{cursor:pointer;list-style:none;padding:10px 12px;font-size:13px;font-weight:700;color:var(--c-e0b455);display:flex;align-items:center;gap:8px;} .bmv-det>summary::-webkit-details-marker{display:none;} .bmv-det>summary::before{content:'\25B8';color:var(--c-a99e8a);font-weight:400;transition:transform .15s;display:inline-block;} .bmv-det[open]>summary::before{transform:rotate(90deg);} .bmv-det>summary .bmv-dn{color:var(--c-a99e8a);font-weight:400;font-size:12px;} .bmv-det .bmv-dc{padding:0 12px 10px;} .bmv-det .bmv-dc .alist{max-height:60vh;} /*BM-VISITES — le panneau des visites. Les trois couleurs d etat sont des valeurs fixes et non des variables de theme : du texte sombre doit rester lisible dessus dans les deux themes, ce que des couleurs qui basculent ne garantissent pas. */ .bmv-phrase{font-size:15px;color:var(--c-e7d9b4);margin:2px 0 4px;line-height:1.6;} .bmv-phrase b{color:var(--c-e0b455);font-weight:700;} .bmv-depuis{font-size:12.5px;color:var(--c-a99e8a);margin:0 0 8px;line-height:1.8;} .bmv-gris{color:var(--c-8f8674);} .bmv-sep{color:var(--c-3a3325);} .bmv-liste{border-top:1px solid var(--c-3a3325);} .bmv-l{display:grid;grid-template-columns:minmax(0,auto) minmax(26px,1fr) auto; gap:9px;align-items:center;padding:6px 2px; border-bottom:1px solid var(--c-2a2418);font-size:13px;} .bmv-p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--c-e7d9b4);} .bmv-j{height:9px;border-radius:5px;background:var(--c-241f16);overflow:hidden;} .bmv-j i{display:block;height:100%;border-radius:5px;} .bmv-j-nm{background:repeating-linear-gradient(90deg,var(--c-3a3325) 0 3px,transparent 3px 7px);} .bmv-f{color:var(--c-a99e8a);font-size:12px;white-space:nowrap;text-align:right;} .bmv-f b{color:var(--c-cbb88a);font-weight:600;} .bmv-f em{color:var(--c-8f8674);font-style:italic;} .bmv-barre{display:flex;height:22px;border-radius:6px;overflow:hidden; margin:8px 0 7px;border:1px solid var(--c-3a3325);} .bmv-barre span{display:flex;align-items:center;justify-content:center; font-size:11px;font-weight:700;color:#1a1712;overflow:hidden;} .bmv-leg{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--c-a99e8a);} .bmv-leg i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px;} /*BM-ETUDE-PARJOUR — la grille jour x bibliotheque. Aucune couleur neuve : les six pas sont l or du panneau pose en transparence sur son fond, et le contraste du texte a ete mesure sur chacun (voir l en-tete du correctif). */ /* Le pied du tableau etait CACHE par la barre de defilement : sur macOS elle se pose PAR-DESSUS le contenu, et le total tombait dessous. Yossef, le 31 aout : « le total en bas est cache par les totaux ». Une bande sous le tableau lui laisse la place. */ .bmv-tw{overflow-x:auto;border:1px solid var(--c-3a3325);border-radius:10px; margin:6px 0 4px;padding-bottom:12px;} table.bmv-t{border-collapse:collapse;width:100%;font-size:12.5px; font-variant-numeric:tabular-nums;} .bmv-t th,.bmv-t td{padding:6px 9px;text-align:right;white-space:nowrap; border-bottom:1px solid var(--c-3a3325);} .bmv-t thead th{font-size:10px;letter-spacing:.05em;text-transform:uppercase; color:var(--c-8f8674);font-weight:700;vertical-align:bottom;} .bmv-t th.g,.bmv-t td.g{text-align:left;} /*BM-COLONNE-FIGEE*/ /* Dix-huit colonnes ne tiennent pas dans un ecran : le tableau defile de cote, et la date doit rester visible — sans elle, un chiffre au bout de la ligne n appartient plus a aucun jour. NE COLLENT QUE DES CELLULES LARGES D UNE COLONNE. La rangee du mois porte un colspan de trois, la rangee de detail un colspan complet : collees, elles recouvraient leurs voisines des le premier glissement. Elles sont donc explicitement decollees, et toute cellule a colspan avec elles. Le fond est OPAQUE : c est lui qui cache ce qui passe dessous. La couture a droite (box-shadow) donne un bord au lieu d une superposition. */ .bmv-t thead th:first-child, .bmv-t tbody tr.bmv-tj > td:first-child, .bmv-t tfoot td:first-child{position:sticky;inset-inline-start:0;z-index:2; background:var(--c-1b160f,#fffdf7);box-shadow:1px 0 0 var(--c-3a3325);} .bmv-t thead th:first-child{z-index:3;} /* Decollees, sans exception : elles s etendent sur plusieurs colonnes. */ .bmv-t tr.bmv-tm > td, .bmv-t tr.bmv-td > td, .bmv-t td[colspan]{position:static;box-shadow:none;} /* MEME LARGEUR EN HAUT ET EN BAS. L en-tete « Jour » etait plus etroit que la cellule du jour : la couture de la colonne figee devenait dentelee au defilement, et c est justement le bord qui doit rassurer. */ .bmv-t thead th:first-child, .bmv-t tbody tr.bmv-tj > td:first-child, .bmv-t tfoot td:first-child{min-width:148px;} /*BM-LOG-PAR-MOIS*/ .bmv-t tr.bmv-mfe{display:none;} .bmv-t tr.bmv-tm{cursor:pointer;} .bmv-t tr.bmv-tm td{background:rgba(224,180,85,.07); border-top:1px solid rgba(224,180,85,.22); font-size:12px;letter-spacing:.06em;text-transform:uppercase; color:var(--c-e0b455);padding-top:9px;padding-bottom:9px;} .bmv-t tr.bmv-tm:hover td{background:rgba(224,180,85,.13);} .bmv-t tr.bmv-tm:focus-visible{outline:2px solid var(--c-e0b455);outline-offset:-2px;} .bmv-t tr.bmv-tm .bmv-pm{display:inline-block;width:15px;font-weight:700; font-size:13px;text-transform:none;opacity:.85;} .bmv-t tr.bmv-tj{cursor:pointer;} .bmv-t tr.bmv-tj:hover td{background:rgba(224,180,85,.05);} .bmv-t tr.bmv-tj:focus-visible{outline:2px solid var(--c-e0b455);outline-offset:-2px;} .bmv-t td.bmv-tn{font-weight:700;color:var(--c-e7d9b4);} .bmv-t .bmv-fl{display:inline-block;width:6px;height:6px;margin-right:6px; border-right:1.5px solid var(--c-8f8674);border-bottom:1.5px solid var(--c-8f8674); transform:rotate(-45deg);} .bmv-t tr.ouv .bmv-fl{transform:rotate(45deg);} .bmv-t tr.ouv td{background:rgba(224,180,85,.04);} .bmv-t td.bmv-c{text-align:center;color:var(--c-e7d9b4);} .bmv-t td.bmv-c[data-n="1"]{background:rgba(224,180,85,.08);} .bmv-t td.bmv-c[data-n="2"]{background:rgba(224,180,85,.16);} .bmv-t td.bmv-c[data-n="3"]{background:rgba(224,180,85,.28);} .bmv-t td.bmv-c[data-n="4"]{background:rgba(224,180,85,.42);} .bmv-t td.bmv-c[data-n="5"]{background:rgba(224,180,85,.60);color:#1a1509;} .bmv-t td.bmv-c[data-n="6"]{background:rgba(224,180,85,.82);color:#1a1509;} /*BM-CHIFFRES-TOUS-JOURS*/ /* Le temps de CHAQUE journee, pas seulement celle qu on a ouverte. Cette regle valait « display:none » : les jours passes n avaient que leur couleur, et l historique paraissait perdu alors qu il etait dans la page. Les sous-totaux des intertitres de mois etaient masques par la meme regle, `bmv-tm` ne recevant jamais `.ouv`. */ .bmv-t .bmv-v{display:inline;} .bmv-t tr.bmv-td td{text-align:left;white-space:normal;line-height:1.6; background:var(--c-241d10);color:var(--c-a99e8a);padding:9px 12px;} .bmv-t tr.bmv-td b{color:var(--c-e7d9b4);} .bmv-t .bmv-lb{font-size:10px;letter-spacing:.05em;text-transform:uppercase; color:var(--c-8f8674);font-weight:700;margin-right:7px;} .bmv-t tfoot td{font-weight:700;color:var(--c-e7d9b4);border-bottom:0; border-top:1px solid var(--c-3a3325);} .bmv-gr{display:inline-flex;border:1px solid var(--c-3a3325);border-radius:8px; overflow:hidden;margin:0 0 6px;} .bmv-gr button{font:inherit;font-size:11.5px;padding:4px 11px;cursor:pointer; background:transparent;color:var(--c-a99e8a);border:0; border-right:1px solid var(--c-3a3325);} .bmv-gr button:last-child{border-right:0;} .bmv-gr button[aria-pressed="true"]{background:var(--c-e0b455);color:#1a1509;font-weight:700;} .bmv-gr button:focus-visible{outline:2px solid var(--c-e0b455);outline-offset:-2px;} .bmv-ech{display:flex;align-items:center;gap:7px;font-size:11px; color:var(--c-8f8674);margin:2px 0 8px;} .bmv-ech i{display:inline-block;width:22px;height:9px;border-radius:2px;} .bmv-h{display:grid;grid-template-columns:98px minmax(26px,1fr) auto;gap:9px; align-items:center;font-size:12.5px;padding:4px 0;} .bmv-hl{color:var(--c-a99e8a);white-space:nowrap;} .bmv-hb{height:11px;background:var(--c-241f16);border-radius:5px;overflow:hidden;} .bmv-hb i{display:block;height:100%;border-radius:5px;background:var(--c-b8892b);} .bmv-hn{color:var(--c-cbb88a);font-size:12px;white-space:nowrap;} .bmv-une{font-size:13.5px;color:var(--c-cbb88a);margin:6px 0;line-height:1.9;} .bmv-une b{color:var(--c-e0b455);font-weight:600;} /* Dix langues ne tiennent plus sur une rangee de drapeaux dans la barre du haut (a sept elle debordait deja sur telephone) : un bouton qui montre la langue courante, et un menu qui s'ouvre au clic. */ .langpick{position:relative;flex:none;} #topbar #langBtn{white-space:nowrap;} #langMenu{display:none;position:absolute;top:calc(100% + 6px);inset-inline-start:0;z-index:100000; background:var(--c-171410);border:1px solid var(--c-3a3325);border-radius:12px;padding:6px;min-width:176px; box-shadow:0 12px 34px rgba(0,0,0,.6);max-height:70vh;overflow:auto;} #langMenu.show{display:block;} #langMenu button{display:flex;align-items:center;gap:9px;width:100%;text-align:start; font:inherit;font-size:13.5px;background:none;border:0;color:var(--c-cbb88a);cursor:pointer; padding:8px 10px;border-radius:8px;white-space:nowrap;} #langMenu button:hover{background:var(--c-241f16);color:var(--c-e0b455);} #langMenu button.active{color:var(--c-e0b455);font-weight:700;}