/* ========================================================================== QUANTUM EXCELLIUM — qe-frame.css v2 · « Cadre Versailles » (calques universels) -------------------------------------------------------------------------- Propriétaire UNIQUE du cadre, pour TOUT le site : pages FR/EN, page d'accueil racine, démos et les trois catalogues. Chaque famille de pages charge ce fichier puis son « adaptateur » de mise en page : · site-frame.css — colonne de navigation, page, barre et menu mobiles · demo-frame.css — démos (bandeau supérieur collant) · règles ajoutées en fin des feuilles propres aux catalogues Les sélecteurs (html:root::before, :root body::after, …) ont une spécificité supérieure à toute règle de cadre résiduelle ; l'ordre de chargement est indifférent. PRINCIPE Un cadre doré fixe, OPAQUE, à bande velours intérieure. Le contenu défile dans la fenêtre du cadre et se coupe net au bord du velours : aucun filet, aucun ornement ne passe jamais sur le texte. La colonne de navigation, la barre mobile et le menu mobile vivent à l'intérieur de la fenêtre. PROFIL DE LA MOULURE (de l'extérieur vers l'intérieur, bureau) 2 px filet clair (--qe-fillet) 1 px filet d'ombre (--qe-hair) 15 px corps or antique (--qe-body) avec rang de perles entre deux gorges 1 px filet clair (--qe-fillet2) 9 px velours (--qe-sight) zone de coupe du contenu = 28 px (--qe-frame), cartouches d'angle 56 px (--qe-corner) Tout se règle dans :root ci-dessous ; le reste en découle. ========================================================================== */ :root{ --qe-fillet:2px; --qe-hair:1px; --qe-body:15px; --qe-fillet2:1px; --qe-sight:9px; --qe-corner:56px; --qe-perle:10px; /* axe du rang de perles, depuis le bord de l'écran */ --qe-perle-pitch:5px; --qe-perle-r:1.1px; --qe-groove-a:6px; /* gorges sombres de part et d'autre des perles */ --qe-groove-b:13px; --qe-gold-hi:#f7e7b3; --qe-gold:#d6ae56; --qe-gold-mid:#b48b3b; --qe-bronze:#8d641f; --qe-bronze-deep:#4a3310; --qe-shadow:#2b1d07; --qe-velvet:#050505; --qe-sight-line:rgba(214,174,86,.22); --qe-moulding:calc(var(--qe-fillet) + var(--qe-hair) + var(--qe-body) + var(--qe-fillet2)); --qe-frame:calc(var(--qe-moulding) + var(--qe-sight)); } /* ---------- Calque A : corps de la moulure (or antique, éclairé du haut) ---------- */ html:root::before{ content:"" !important; display:block !important; position:fixed; inset:0 !important; z-index:100001; pointer-events:none; opacity:1 !important; border:0 !important; box-shadow:none !important; background: linear-gradient(180deg,var(--qe-bronze-deep) 0,var(--qe-gold) 30%,var(--qe-gold-hi) 46%,var(--qe-gold-mid) 72%,var(--qe-bronze-deep) 100%) top / 100% var(--qe-moulding) no-repeat, linear-gradient(0deg,var(--qe-bronze-deep) 0,var(--qe-bronze) 30%,var(--qe-gold-mid) 46%,var(--qe-bronze) 72%,var(--qe-shadow) 100%) bottom / 100% var(--qe-moulding) no-repeat, linear-gradient(90deg,var(--qe-bronze-deep) 0,var(--qe-gold-mid) 30%,var(--qe-gold) 46%,var(--qe-bronze) 72%,var(--qe-bronze-deep) 100%) left / var(--qe-moulding) 100% no-repeat, linear-gradient(270deg,var(--qe-bronze-deep) 0,var(--qe-gold-mid) 30%,var(--qe-gold) 46%,var(--qe-bronze) 72%,var(--qe-bronze-deep) 100%) right / var(--qe-moulding) 100% no-repeat !important; background-size:100% var(--qe-moulding),100% var(--qe-moulding),var(--qe-moulding) 100%,var(--qe-moulding) 100% !important; outline:var(--qe-hair) solid var(--qe-shadow); outline-offset:calc(-1 * (var(--qe-fillet) + var(--qe-hair))); } /* ---------- Calque B : filets clairs, gorges et rang de perles ---------- */ html:root::after{ content:"" !important; display:block !important; position:fixed; inset:0 !important; z-index:100002; pointer-events:none; opacity:1 !important; border:calc(var(--qe-fillet) + var(--qe-hair) + var(--qe-body)) solid transparent !important; outline:var(--qe-fillet) solid var(--qe-gold-hi); outline-offset:calc(-1 * var(--qe-fillet)); box-shadow:inset 0 0 0 var(--qe-fillet2) var(--qe-gold-hi) !important; background: linear-gradient(var(--qe-shadow),var(--qe-shadow)) 0 var(--qe-groove-a) / 100% 1px no-repeat, linear-gradient(var(--qe-shadow),var(--qe-shadow)) 0 var(--qe-groove-b) / 100% 1px no-repeat, linear-gradient(var(--qe-shadow),var(--qe-shadow)) 0 calc(100% - var(--qe-groove-a)) / 100% 1px no-repeat, linear-gradient(var(--qe-shadow),var(--qe-shadow)) 0 calc(100% - var(--qe-groove-b)) / 100% 1px no-repeat, linear-gradient(var(--qe-shadow),var(--qe-shadow)) var(--qe-groove-a) 0 / 1px 100% no-repeat, linear-gradient(var(--qe-shadow),var(--qe-shadow)) var(--qe-groove-b) 0 / 1px 100% no-repeat, linear-gradient(var(--qe-shadow),var(--qe-shadow)) calc(100% - var(--qe-groove-a)) 0 / 1px 100% no-repeat, linear-gradient(var(--qe-shadow),var(--qe-shadow)) calc(100% - var(--qe-groove-b)) 0 / 1px 100% no-repeat, radial-gradient(circle,var(--qe-gold-hi) 0 var(--qe-perle-r),var(--qe-shadow) calc(var(--qe-perle-r) + .6px),transparent calc(var(--qe-perle-r) + 1.3px)) 0 calc(var(--qe-perle) - var(--qe-perle-pitch) / 2) / var(--qe-perle-pitch) var(--qe-perle-pitch) repeat-x, radial-gradient(circle,var(--qe-gold-hi) 0 var(--qe-perle-r),var(--qe-shadow) calc(var(--qe-perle-r) + .6px),transparent calc(var(--qe-perle-r) + 1.3px)) 0 calc(100% - var(--qe-perle) + var(--qe-perle-pitch) / 2) / var(--qe-perle-pitch) var(--qe-perle-pitch) repeat-x, radial-gradient(circle,var(--qe-gold-hi) 0 var(--qe-perle-r),var(--qe-shadow) calc(var(--qe-perle-r) + .6px),transparent calc(var(--qe-perle-r) + 1.3px)) calc(var(--qe-perle) - var(--qe-perle-pitch) / 2) 0 / var(--qe-perle-pitch) var(--qe-perle-pitch) repeat-y, radial-gradient(circle,var(--qe-gold-hi) 0 var(--qe-perle-r),var(--qe-shadow) calc(var(--qe-perle-r) + .6px),transparent calc(var(--qe-perle-r) + 1.3px)) calc(100% - var(--qe-perle) + var(--qe-perle-pitch) / 2) 0 / var(--qe-perle-pitch) var(--qe-perle-pitch) repeat-y !important; background-origin:border-box !important; background-clip:border-box !important; } /* ---------- Calque C : bande velours (zone de coupe du contenu) ---------- */ :root body::before{ content:"" !important; display:block !important; position:fixed; inset:var(--qe-moulding) !important; z-index:100003; pointer-events:none; opacity:1 !important; background:none !important; border:var(--qe-sight) solid var(--qe-velvet) !important; box-shadow:inset 0 0 0 1px var(--qe-sight-line) !important; } /* ---------- Calque D : cartouches d'angle (coquille et feuilles d'acanthe) ---------- */ :root body::after{ content:"" !important; display:block !important; position:fixed; inset:0 !important; z-index:100004; pointer-events:none; opacity:1 !important; border:0 !important; box-shadow:none !important; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Cdefs%3E%3ClinearGradient id=%22g%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23f6e3a6%22/%3E%3Cstop offset=%22.5%22 stop-color=%22%23cfa54d%22/%3E%3Cstop offset=%221%22 stop-color=%22%237a561a%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22h%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23fff2c6%22/%3E%3Cstop offset=%221%22 stop-color=%22%23c9a24b%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform=%22translate(0 0)%22%3E%3Cpath d=%22M0 0H60C60 15 53 29 42 42C29 53 15 60 0 60Z%22 fill=%22url(%23g)%22 stroke=%22%233a2a0e%22 stroke-width=%222%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M0 0L42 42M0 0L54 27M0 0L27 54M0 0L59 10M0 0L10 59%22 stroke=%22%235a3f12%22 stroke-width=%221.7%22 opacity=%22.9%22/%3E%3Cpath d=%22M60 0C60 15 53 29 42 42C29 53 15 60 0 60%22 fill=%22none%22 stroke=%22%23fff3c8%22 stroke-width=%221.5%22 opacity=%22.75%22/%3E%3Cpath d=%22M60 0C72 0 82 4 90 12C86 15 81 14 77 10C75 16 70 19 64 17C66 13 64 8 58 6Z%22 fill=%22url(%23h)%22 stroke=%22%233a2a0e%22 stroke-width=%221.5%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M0 60C0 72 4 82 12 90C15 86 14 81 10 77C16 75 19 70 17 64C13 66 8 64 6 58Z%22 fill=%22url(%23h)%22 stroke=%22%233a2a0e%22 stroke-width=%221.5%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M42 42C52 43 62 51 70 70C62 63 55 63 51 70C47 61 43 55 36 50C40 48 43 45 42 42Z%22 fill=%22url(%23g)%22 stroke=%22%233a2a0e%22 stroke-width=%221.5%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M44 46L63 63%22 stroke=%22%235a3f12%22 stroke-width=%221.5%22 opacity=%22.9%22/%3E%3Ccircle cx=%228%22 cy=%228%22 r=%224.5%22 fill=%22url(%23h)%22 stroke=%22%233a2a0e%22 stroke-width=%221.3%22/%3E%3C/g%3E%3C/svg%3E") left top no-repeat, url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Cdefs%3E%3ClinearGradient id=%22g%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23f6e3a6%22/%3E%3Cstop offset=%22.5%22 stop-color=%22%23cfa54d%22/%3E%3Cstop offset=%221%22 stop-color=%22%237a561a%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22h%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23fff2c6%22/%3E%3Cstop offset=%221%22 stop-color=%22%23c9a24b%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform=%22translate(100 0) scale(-1 1)%22%3E%3Cpath d=%22M0 0H60C60 15 53 29 42 42C29 53 15 60 0 60Z%22 fill=%22url(%23g)%22 stroke=%22%233a2a0e%22 stroke-width=%222%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M0 0L42 42M0 0L54 27M0 0L27 54M0 0L59 10M0 0L10 59%22 stroke=%22%235a3f12%22 stroke-width=%221.7%22 opacity=%22.9%22/%3E%3Cpath d=%22M60 0C60 15 53 29 42 42C29 53 15 60 0 60%22 fill=%22none%22 stroke=%22%23fff3c8%22 stroke-width=%221.5%22 opacity=%22.75%22/%3E%3Cpath d=%22M60 0C72 0 82 4 90 12C86 15 81 14 77 10C75 16 70 19 64 17C66 13 64 8 58 6Z%22 fill=%22url(%23h)%22 stroke=%22%233a2a0e%22 stroke-width=%221.5%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M0 60C0 72 4 82 12 90C15 86 14 81 10 77C16 75 19 70 17 64C13 66 8 64 6 58Z%22 fill=%22url(%23h)%22 stroke=%22%233a2a0e%22 stroke-width=%221.5%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M42 42C52 43 62 51 70 70C62 63 55 63 51 70C47 61 43 55 36 50C40 48 43 45 42 42Z%22 fill=%22url(%23g)%22 stroke=%22%233a2a0e%22 stroke-width=%221.5%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M44 46L63 63%22 stroke=%22%235a3f12%22 stroke-width=%221.5%22 opacity=%22.9%22/%3E%3Ccircle cx=%228%22 cy=%228%22 r=%224.5%22 fill=%22url(%23h)%22 stroke=%22%233a2a0e%22 stroke-width=%221.3%22/%3E%3C/g%3E%3C/svg%3E") right top no-repeat, url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Cdefs%3E%3ClinearGradient id=%22g%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23f6e3a6%22/%3E%3Cstop offset=%22.5%22 stop-color=%22%23cfa54d%22/%3E%3Cstop offset=%221%22 stop-color=%22%237a561a%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22h%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23fff2c6%22/%3E%3Cstop offset=%221%22 stop-color=%22%23c9a24b%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform=%22translate(0 100) scale(1 -1)%22%3E%3Cpath d=%22M0 0H60C60 15 53 29 42 42C29 53 15 60 0 60Z%22 fill=%22url(%23g)%22 stroke=%22%233a2a0e%22 stroke-width=%222%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M0 0L42 42M0 0L54 27M0 0L27 54M0 0L59 10M0 0L10 59%22 stroke=%22%235a3f12%22 stroke-width=%221.7%22 opacity=%22.9%22/%3E%3Cpath d=%22M60 0C60 15 53 29 42 42C29 53 15 60 0 60%22 fill=%22none%22 stroke=%22%23fff3c8%22 stroke-width=%221.5%22 opacity=%22.75%22/%3E%3Cpath d=%22M60 0C72 0 82 4 90 12C86 15 81 14 77 10C75 16 70 19 64 17C66 13 64 8 58 6Z%22 fill=%22url(%23h)%22 stroke=%22%233a2a0e%22 stroke-width=%221.5%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M0 60C0 72 4 82 12 90C15 86 14 81 10 77C16 75 19 70 17 64C13 66 8 64 6 58Z%22 fill=%22url(%23h)%22 stroke=%22%233a2a0e%22 stroke-width=%221.5%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M42 42C52 43 62 51 70 70C62 63 55 63 51 70C47 61 43 55 36 50C40 48 43 45 42 42Z%22 fill=%22url(%23g)%22 stroke=%22%233a2a0e%22 stroke-width=%221.5%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M44 46L63 63%22 stroke=%22%235a3f12%22 stroke-width=%221.5%22 opacity=%22.9%22/%3E%3Ccircle cx=%228%22 cy=%228%22 r=%224.5%22 fill=%22url(%23h)%22 stroke=%22%233a2a0e%22 stroke-width=%221.3%22/%3E%3C/g%3E%3C/svg%3E") left bottom no-repeat, url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Cdefs%3E%3ClinearGradient id=%22g%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23f6e3a6%22/%3E%3Cstop offset=%22.5%22 stop-color=%22%23cfa54d%22/%3E%3Cstop offset=%221%22 stop-color=%22%237a561a%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22h%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23fff2c6%22/%3E%3Cstop offset=%221%22 stop-color=%22%23c9a24b%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform=%22translate(100 100) scale(-1 -1)%22%3E%3Cpath d=%22M0 0H60C60 15 53 29 42 42C29 53 15 60 0 60Z%22 fill=%22url(%23g)%22 stroke=%22%233a2a0e%22 stroke-width=%222%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M0 0L42 42M0 0L54 27M0 0L27 54M0 0L59 10M0 0L10 59%22 stroke=%22%235a3f12%22 stroke-width=%221.7%22 opacity=%22.9%22/%3E%3Cpath d=%22M60 0C60 15 53 29 42 42C29 53 15 60 0 60%22 fill=%22none%22 stroke=%22%23fff3c8%22 stroke-width=%221.5%22 opacity=%22.75%22/%3E%3Cpath d=%22M60 0C72 0 82 4 90 12C86 15 81 14 77 10C75 16 70 19 64 17C66 13 64 8 58 6Z%22 fill=%22url(%23h)%22 stroke=%22%233a2a0e%22 stroke-width=%221.5%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M0 60C0 72 4 82 12 90C15 86 14 81 10 77C16 75 19 70 17 64C13 66 8 64 6 58Z%22 fill=%22url(%23h)%22 stroke=%22%233a2a0e%22 stroke-width=%221.5%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M42 42C52 43 62 51 70 70C62 63 55 63 51 70C47 61 43 55 36 50C40 48 43 45 42 42Z%22 fill=%22url(%23g)%22 stroke=%22%233a2a0e%22 stroke-width=%221.5%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M44 46L63 63%22 stroke=%22%235a3f12%22 stroke-width=%221.5%22 opacity=%22.9%22/%3E%3Ccircle cx=%228%22 cy=%228%22 r=%224.5%22 fill=%22url(%23h)%22 stroke=%22%233a2a0e%22 stroke-width=%221.3%22/%3E%3C/g%3E%3C/svg%3E") right bottom no-repeat !important; background-size:var(--qe-corner) var(--qe-corner) !important; } html:root{ scroll-padding-top:calc(var(--qe-frame) + 12px); scrollbar-width:thin; scrollbar-color:var(--qe-bronze) var(--qe-velvet); } html:root::-webkit-scrollbar{width:10px;height:10px} html:root::-webkit-scrollbar-track{background:var(--qe-velvet)} html:root::-webkit-scrollbar-thumb{background:var(--qe-bronze);border-radius:6px;border:2px solid var(--qe-velvet)} @media (max-width:1180px) and (min-width:941px){ :root{--qe-corner:50px} } @media (max-width:940px){ :root{ --qe-fillet:1px;--qe-hair:1px;--qe-body:9px;--qe-fillet2:1px;--qe-sight:6px; --qe-corner:34px;--qe-perle:6px;--qe-perle-pitch:4px;--qe-perle-r:.9px;--qe-groove-a:3px;--qe-groove-b:9px; } } @media (max-width:600px){ :root{--qe-body:8px;--qe-sight:5px;--qe-corner:30px;--qe-groove-b:8px} } @media print{ html:root::before,html:root::after,:root body::before,:root body::after{display:none !important} }