/* WikiCollect : thème « Art déco sobre » (clair « Ivoire/Sauge » ou sombre « Nuit », selon le système ou le choix du visiteur). Principes : un seul accent (le laiton), des filets d'un pixel, des angles en gradins, de la symétrie, aucun dégradé décoratif. La couleur de rareté vient des classes .r1 … .r7 (jetons --r1 … --r7), pas du --c posé autrefois par le PHP. La maquette vivante est design/art-deco.html. */ /* Jost (licence SIL OFL 1.1, voir fonts/OFL.txt) : police variable hébergée ici, sans appel à un service externe. */ @font-face { font-family: "Jost"; font-style: normal; font-weight: 200 500; font-display: block; src: url("fonts/jost-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: "Jost"; font-style: normal; font-weight: 200 500; font-display: block; src: url("fonts/jost-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; } /* >>> POLICES DES CARTES À THÈME >>> */ /* Playfair, Caveat, EB Garamond italique, Space Grotesk, Cinzel, Josefin et Sora sont des polices VARIABLES : un seul fichier par famille, déclaré avec sa plage de graisses (auparavant, le même fichier sous plusieurs noms, téléchargé une fois par graisse employée). Pixelify Sans et Barlow Condensed 900 droit n'étaient employés nulle part. */ @font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("fonts/playfair-400-italic.woff2") format("woff2"); } @font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 500 900; font-display: swap; src: url("fonts/playfair-700-normal.woff2") format("woff2"); } @font-face { font-family: "Caveat"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("fonts/caveat-500-normal.woff2") format("woff2"); } @font-face { font-family: "Special Elite"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/special-elite-400-normal.woff2") format("woff2"); } @font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("fonts/eb-garamond-500-italic.woff2") format("woff2"); } @font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/eb-garamond-400-normal.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/plex-mono-400-normal.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/plex-mono-500-normal.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/plex-mono-600-normal.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/plex-mono-700-normal.woff2") format("woff2"); } @font-face { font-family: "Barlow Condensed"; font-style: italic; font-weight: 900; font-display: swap; src: url("fonts/barlow-condensed-900-italic.woff2") format("woff2"); } @font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/barlow-condensed-600-normal.woff2") format("woff2"); } @font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/barlow-condensed-700-normal.woff2") format("woff2"); } @font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/barlow-condensed-800-normal.woff2") format("woff2"); } @font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("fonts/space-grotesk-700-normal.woff2") format("woff2"); } @font-face { font-family: "Cinzel"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("fonts/cinzel-500-normal.woff2") format("woff2"); } @font-face { font-family: "Josefin Sans"; font-style: normal; font-weight: 400 700; font-display: block; src: url("fonts/josefin-400-normal.woff2") format("woff2"); } @font-face { font-family: "UnifrakturCook"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/unifraktur-700-normal.woff2") format("woff2"); } @font-face { font-family: "Bangers"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/bangers-400-normal.woff2") format("woff2"); } @font-face { font-family: "Dela Gothic One"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/dela-gothic-400-normal.woff2") format("woff2"); } @font-face { font-family: "Sora"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/sora-400-normal.woff2") format("woff2"); } /* <<< POLICES DES CARTES À THÈME <<< */ /* ---------- Jetons ---------- */ :root { color-scheme: light; --font: "Jost", "Futura", "Century Gothic", "Trebuchet MS", system-ui, sans-serif; /* Ivoire (clair) */ --bg: #e1e9d8; /* sauge */ --surface: #ecf1e4; --card: #fafaf0; /* ivoire chaud */ --tint: rgba(35, 121, 90, .18); /* halo émeraude en haut de page */ --band: rgba(35, 121, 90, .09); /* bandeaux (chiffres, pied de page) */ --top-bg: rgba(225, 233, 216, .72); /* en-tête translucide */ --overlay: rgba(236, 241, 228, .82); /* voile derrière une fenêtre modale */ --text: #17201a; --muted: #4f5d55; --line: rgba(23, 32, 26, .14); /* filet neutre */ --brass: #9d7b2a; /* laiton : filets et ornements */ --brass-line: rgba(157, 123, 42, .5); --brass-ink: #765a18; /* laiton lisible en texte et en aplat de bouton */ --on-brass: #fbf8ee; --track: rgba(23, 32, 26, .08); --err-ink: #b8453f; /* texte d'erreur (≥ 4,5:1 sur les surfaces claires) */ /* Pierres : une couleur de rareté par joyau */ --r1: #646b75; /* pierre */ --r2: #23795a; /* émeraude */ --r3: #2f5f9e; /* saphir */ --r4: #6d4aa3; /* améthyste */ --r5: #a37a12; /* or */ --r6: #a8322e; /* rubis */ --r7: #8f4a86; /* opale (le cadre est irisé, voir .r7) */ --max: 1600px; --ease: cubic-bezier(.2, .8, .2, 1); /* L'éventail (dessiné par Claude Design : design/eventail.svg et design/eventail-cercle.svg, métadonnées retirées) : 7 arcs, 25 rayons de longueurs variées terminés par une perle, deux faisceaux imbriqués ; --wheel en est la roue complète. Pour le modifier : retoucher les fichiers de design/ et recopier ici leurs . */ --fan: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20800%20400%27%3E%3Cpath%20d%3D%27M10%20400A390%20390%200%200%201%20790%20400M80%20400A320%20320%200%200%201%20720%20400M150%20400A250%20250%200%200%201%20650%20400M220%20400A180%20180%200%200%201%20580%20400M290%20400A110%20110%200%200%201%20510%20400M344%20400A56%2056%200%200%201%20456%20400M386.6%20400A13.4%2013.4%200%200%201%20413.4%20400M413.4%20400L790%20400M509.1%20385.6L682.6%20362.8M412.9%20396.5L742.9%20308.1M501.6%20357.9L598.6%20317.7M411.6%20393.3L737.7%20205M487.3%20333L570.6%20269.1M409.5%20390.5L651%20149M467%20312.7L573.5%20173.9M406.7%20388.4L595%2062.3M442.1%20298.4L509.1%20136.7M403.5%20387.1L491.9%2057.1M414.4%20290.9L428.1%20186.8M400%20386.6L400%2010M385.6%20290.9L371.9%20186.8M396.5%20387.1L308.1%2057.1M357.9%20298.4L290.9%20136.7M393.3%20388.4L205%2062.3M333%20312.7L226.5%20173.9M390.5%20390.5L149%20149M312.7%20333L229.4%20269.1M388.4%20393.3L62.3%20205M298.4%20357.9L201.4%20317.7M387.1%20396.5L57.1%20308.1M290.9%20385.6L117.4%20362.8M386.6%20400L10%20400%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.4%27%20vector-effect%3D%27non-scaling-stroke%27%2F%3E%3Cpath%20d%3D%27M395.5%20400A4.5%204.5%200%200%201%20404.5%20400ZM680.4%20362.8a2.2%202.2%200%201%200%204.4%200a2.2%202.2%200%201%200-4.4%200M740.7%20308.1a2.2%202.2%200%201%200%204.4%200a2.2%202.2%200%201%200-4.4%200M596.4%20317.7a2.2%202.2%200%201%200%204.4%200a2.2%202.2%200%201%200-4.4%200M568.4%20269.1a2.2%202.2%200%201%200%204.4%200a2.2%202.2%200%201%200-4.4%200M648.8%20149a2.2%202.2%200%201%200%204.4%200a2.2%202.2%200%201%200-4.4%200M571.3%20173.9a2.2%202.2%200%201%200%204.4%200a2.2%202.2%200%201%200-4.4%200M506.9%20136.7a2.2%202.2%200%201%200%204.4%200a2.2%202.2%200%201%200-4.4%200M489.7%2057.1a2.2%202.2%200%201%200%204.4%200a2.2%202.2%200%201%200-4.4%200M425.9%20186.8a2.2%202.2%200%201%200%204.4%200a2.2%202.2%200%201%200-4.4%200M369.7%20186.8a2.2%202.2%200%201%200%204.4%200a2.2%202.2%200%201%200-4.4%200M305.9%2057.1a2.2%202.2%200%201%200%204.4%200a2.2%202.2%200%201%200-4.4%200M288.7%20136.7a2.2%202.2%200%201%200%204.4%200a2.2%202.2%200%201%200-4.4%200M224.3%20173.9a2.2%202.2%200%201%200%204.4%200a2.2%202.2%200%201%200-4.4%200M146.8%20149a2.2%202.2%200%201%200%204.4%200a2.2%202.2%200%201%200-4.4%200M227.2%20269.1a2.2%202.2%200%201%200%204.4%200a2.2%202.2%200%201%200-4.4%200M199.2%20317.7a2.2%202.2%200%201%200%204.4%200a2.2%202.2%200%201%200-4.4%200M54.9%20308.1a2.2%202.2%200%201%200%204.4%200a2.2%202.2%200%201%200-4.4%200M115.2%20362.8a2.2%202.2%200%201%200%204.4%200a2.2%202.2%200%201%200-4.4%200%27%2F%3E%3C%2Fsvg%3E"); --wheel: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20800%20800%27%3E%3Cpath%20d%3D%27M10%20400a390%20390%200%201%201%20780%200a390%20390%200%201%201%20-780%200M80%20400a320%20320%200%201%201%20640%200a320%20320%200%201%201%20-640%200M150%20400a250%20250%200%201%201%20500%200a250%20250%200%201%201%20-500%200M220%20400a180%20180%200%201%201%20360%200a180%20180%200%201%201%20-360%200M290%20400a110%20110%200%201%201%20220%200a110%20110%200%201%201%20-220%200M344%20400a56%2056%200%201%201%20112%200a56%2056%200%201%201%20-112%200M386.6%20400a13.4%2013.4%200%201%201%2026.8%200a13.4%2013.4%200%201%201%20-26.8%200M413.4%20400L790%20400M509.1%20385.6L682.6%20362.8M412.9%20396.5L742.9%20308.1M501.6%20357.9L598.6%20317.7M411.6%20393.3L737.7%20205M487.3%20333L570.6%20269.1M409.5%20390.5L651%20149M467%20312.7L573.5%20173.9M406.7%20388.4L595%2062.3M442.1%20298.4L509.1%20136.7M403.5%20387.1L491.9%2057.1M414.4%20290.9L428.1%20186.8M400%20386.6L400%2010M385.6%20290.9L371.9%20186.8M396.5%20387.1L308.1%2057.1M357.9%20298.4L290.9%20136.7M393.3%20388.4L205%2062.3M333%20312.7L226.5%20173.9M390.5%20390.5L149%20149M312.7%20333L229.4%20269.1M388.4%20393.3L62.3%20205M298.4%20357.9L201.4%20317.7M387.1%20396.5L57.1%20308.1M290.9%20385.6L117.4%20362.8M386.6%20400L10%20400M290.9%20414.4L117.4%20437.2M387.1%20403.5L57.1%20491.9M298.4%20442.1L201.4%20482.3M388.4%20406.7L62.3%20595M312.7%20467L229.4%20530.9M390.5%20409.5L149%20651M333%20487.3L226.5%20626.1M393.3%20411.6L205%20737.7M357.9%20501.6L290.9%20663.3M396.5%20412.9L308.1%20742.9M385.6%20509.1L371.9%20613.2M400%20413.4L400%20790M414.4%20509.1L428.1%20613.2M403.5%20412.9L491.9%20742.9M442.1%20501.6L509.1%20663.3M406.7%20411.6L595%20737.7M467%20487.3L573.5%20626.1M409.5%20409.5L651%20651M487.3%20467L570.6%20530.9M411.6%20406.7L737.7%20595M501.6%20442.1L598.6%20482.3M412.9%20403.5L742.9%20491.9M509.1%20414.4L682.6%20437.2%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.4%27%20vector-effect%3D%27non-scaling-stroke%27%2F%3E%3Cpath%20d%3D%27M395.5%20400a4.5%204.5%200%201%201%209%200a4.5%204.5%200%201%201%20-9%200ZM680.4%20362.8a2.2%202.2%200%201%200%204.4%200a2.2%202.2%200%201%200-4.4%200M740.7%20308.1a2.2%202.2%200%201%200%204.4%200a2.2%202.2%200%201%200-4.4%200M596.4%20317.7a2.2%202.2%200%201%200%204.4%200a2.2%202.2%200%201%200-4.4%200M568.4%20269.1a2.2%202.2%200%201%200%204.4%200a2.2%202.2%200%201%200-4.4%200M648.8%20149a2.2%202.2%200%201%200%204.4%200a2.2%202.2%200%201%200-4.4%200M571.3%20173.9a2.2%202.2%200%201%200%204.4%200a2.2%202.2%200%201%200-4.4%200M506.9%20136.7a2.2%202.2%200%201%200%204.4%200a2.2%202.2%200%201%200-4.4%200M489.7%2057.1a2.2%202.2%200%201%200%204.4%200a2.2%202.2%200%201%200-4.4%200M425.9%20186.8a2.2%202.2%200%201%200%204.4%200a2.2%202.2%200%201%200-4.4%200M369.7%20186.8a2.2%202.2%200%201%200%204.4%200a2.2%202.2%200%201%200-4.4%200M305.9%2057.1a2.2%202.2%200%201%200%204.4%200a2.2%202.2%200%201%200-4.4%200M288.7%20136.7a2.2%202.2%200%201%200%204.4%200a2.2%202.2%200%201%200-4.4%200M224.3%20173.9a2.2%202.2%200%201%200%204.4%200a2.2%202.2%200%201%200-4.4%200M146.8%20149a2.2%202.2%200%201%200%204.4%200a2.2%202.2%200%201%200-4.4%200M227.2%20269.1a2.2%202.2%200%201%200%204.4%200a2.2%202.2%200%201%200-4.4%200M199.2%20317.7a2.2%202.2%200%201%200%204.4%200a2.2%202.2%200%201%200-4.4%200M54.9%20308.1a2.2%202.2%200%201%200%204.4%200a2.2%202.2%200%201%200-4.4%200M115.2%20362.8a2.2%202.2%200%201%200%204.4%200a2.2%202.2%200%201%200-4.4%200M115.2%20437.2a2.2%202.2%200%201%200%204.4%200a2.2%202.2%200%201%200-4.4%200M54.9%20491.9a2.2%202.2%200%201%200%204.4%200a2.2%202.2%200%201%200-4.4%200M199.2%20482.3a2.2%202.2%200%201%200%204.4%200a2.2%202.2%200%201%200-4.4%200M227.2%20530.9a2.2%202.2%200%201%200%204.4%200a2.2%202.2%200%201%200-4.4%200M146.8%20651a2.2%202.2%200%201%200%204.4%200a2.2%202.2%200%201%200-4.4%200M224.3%20626.1a2.2%202.2%200%201%200%204.4%200a2.2%202.2%200%201%200-4.4%200M288.7%20663.3a2.2%202.2%200%201%200%204.4%200a2.2%202.2%200%201%200-4.4%200M305.9%20742.9a2.2%202.2%200%201%200%204.4%200a2.2%202.2%200%201%200-4.4%200M369.7%20613.2a2.2%202.2%200%201%200%204.4%200a2.2%202.2%200%201%200-4.4%200M425.9%20613.2a2.2%202.2%200%201%200%204.4%200a2.2%202.2%200%201%200-4.4%200M489.7%20742.9a2.2%202.2%200%201%200%204.4%200a2.2%202.2%200%201%200-4.4%200M506.9%20663.3a2.2%202.2%200%201%200%204.4%200a2.2%202.2%200%201%200-4.4%200M571.3%20626.1a2.2%202.2%200%201%200%204.4%200a2.2%202.2%200%201%200-4.4%200M648.8%20651a2.2%202.2%200%201%200%204.4%200a2.2%202.2%200%201%200-4.4%200M568.4%20530.9a2.2%202.2%200%201%200%204.4%200a2.2%202.2%200%201%200-4.4%200M596.4%20482.3a2.2%202.2%200%201%200%204.4%200a2.2%202.2%200%201%200-4.4%200M740.7%20491.9a2.2%202.2%200%201%200%204.4%200a2.2%202.2%200%201%200-4.4%200M680.4%20437.2a2.2%202.2%200%201%200%204.4%200a2.2%202.2%200%201%200-4.4%200%27%2F%3E%3C%2Fsvg%3E"); } /* Nuit (sombre) : le thème par défaut, TOUJOURS, quel que soit le réglage du système. Le clair ne s'applique que si le visiteur l'a choisi (data-theme="light", posé par le script de head.php d'après localStorage). */ :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0a110f; --surface: #0f1815; --card: #111d19; --tint: rgba(47, 143, 109, .18); --band: rgba(47, 143, 109, .07); --top-bg: rgba(10, 17, 15, .48); --overlay: rgba(3, 7, 6, .78); --text: #ece7db; --muted: #9a9686; --line: rgba(236, 231, 219, .12); --brass: #c9a45c; --brass-line: rgba(201, 164, 92, .38); --brass-ink: #d3b06a; --on-brass: #14110a; --track: rgba(236, 231, 219, .09); --err-ink: #d5544f; --r1: #8d939c; --r2: #3fae86; --r3: #5b93d6; --r4: #9b7bd0; --r5: #d9ae4a; --r6: #d5544f; --r7: #c78fc0; } .r1 { --rc: var(--r1); } .r2 { --rc: var(--r2); } .r3 { --rc: var(--r3); } .r4 { --rc: var(--r4); } .r5 { --rc: var(--r5); } .r6 { --rc: var(--r6); } .r7 { --rc: var(--r7); } /* ---------- Angles en gradins (deux marches de --s) ---------- */ .btn, .acct-pill, .rc-btn, .sel-bar::before, .sel-bar::after, .card-face, .card-face::before, .fa .card-img, .card.r5::after, .card.r6::after, .card.r7::before { clip-path: polygon( 0 calc(var(--s) * 2), var(--s) calc(var(--s) * 2), var(--s) var(--s), calc(var(--s) * 2) var(--s), calc(var(--s) * 2) 0, calc(100% - var(--s) * 2) 0, calc(100% - var(--s) * 2) var(--s), calc(100% - var(--s)) var(--s), calc(100% - var(--s)) calc(var(--s) * 2), 100% calc(var(--s) * 2), 100% calc(100% - var(--s) * 2), calc(100% - var(--s)) calc(100% - var(--s) * 2), calc(100% - var(--s)) calc(100% - var(--s)), calc(100% - var(--s) * 2) calc(100% - var(--s)), calc(100% - var(--s) * 2) 100%, calc(var(--s) * 2) 100%, calc(var(--s) * 2) calc(100% - var(--s)), var(--s) calc(100% - var(--s)), var(--s) calc(100% - var(--s) * 2), 0 calc(100% - var(--s) * 2)); } /* ---------- Base ---------- */ * { box-sizing: border-box; } /* overflow-x: clip sur : c'est lui (et non plus ) qui est reporté sur la fenêtre, si bien que celui de rogne vraiment son contenu (les décors qui dépassent, comme la roue de l'accueil) : aucun défilement horizontal, même sur iOS. scroll-padding-top : une ancre (index.php#open-pack…) ne passe pas sous l'en-tête collant (76 px). */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; overflow-x: clip; } body { margin: 0; overflow-x: clip; background: radial-gradient(75% 100% at 50% 0, var(--tint), transparent) center top / 100% 900px no-repeat, var(--bg); color: var(--text); font: 400 16px/1.6 var(--font); -webkit-font-smoothing: antialiased; font-variant-numeric: lining-nums; } a { color: inherit; text-decoration-color: var(--brass-line); text-underline-offset: 4px; } a:hover { text-decoration-color: var(--brass); } :focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; } /* env(safe-area-inset-*) : encoches des iPhone en paysage (viewport-fit=cover dans head.php), 0 ailleurs */ .wrap { width: min(var(--max), 100% - clamp(40px, 8vw, 160px) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)); margin-inline: auto; } /* Filet orné : ——— ◆ ——— */ .rule { display: flex; align-items: center; gap: 14px; color: var(--brass); } .rule::before, .rule::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--brass-line)); } .rule::after { transform: scaleX(-1); } .rule i { width: 7px; height: 7px; rotate: 45deg; border: 1px solid currentColor; flex: none; } /* ---------- En-tête : marque au centre, axe de symétrie ---------- */ .top { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--brass-line); background: var(--top-bg); -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15); } .top::after { content: ""; position: absolute; inset: auto 0 -5px; height: 1px; background: var(--line); } .top-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 76px; } .top-nav { grid-column: 2; display: flex; gap: clamp(20px, 2.4vw, 36px); } /* Menu du haut : chaque lien a la largeur de son nom, et c'est l'espace entre les noms (.top-nav gap) qui est régulier. */ .top-nav .nav-link::after { left: 0; right: 0; } /* Lien de navigation : icône au-dessus, libellé en dessous (repris à l'identique dans la barre mobile .bottom-nav). */ .nav-link { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 2px 10px; font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--muted); transition: color .4s ease; } .nav-link .ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s ease; } .nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--brass); opacity: 0; transition: opacity .4s ease; } .nav-link:hover, .nav-link:focus-visible { color: var(--text); } .nav-link:hover::after, .nav-link:focus-visible::after { opacity: 1; } .top-end { grid-column: 3; display: flex; justify-content: flex-end; align-items: center; gap: 14px; } .brand { grid-column: 1; justify-self: start; display: inline-flex; align-items: center; gap: 14px; font-weight: 500; font-size: 19px; letter-spacing: .3em; text-transform: uppercase; text-decoration: none; } .brand b { font-weight: 300; } .brand .mark { margin: 0 3px 0 5px; } .mark { position: relative; display: inline-block; width: 22px; height: 22px; rotate: 45deg; border: 1px solid var(--brass); flex: none; } .mark::before { content: ""; position: absolute; inset: 4px; border: 1px solid var(--brass); } .mark::after { content: ""; position: absolute; inset: 9px; background: var(--brass); } /* Losange (pas un carré) comme le reste des accents du thème (.mark, .dm…) : le bouton entier tourne à 45°, l'icône tourne en sens inverse pour rester bien droite. */ .theme { transition: color .3s ease, box-shadow .3s ease; appearance: none; width: 30px; height: 30px; display: grid; place-items: center; border: 0; --edge: 1.84px; box-shadow: inset 0 0 0 var(--edge) var(--line); background: none; color: var(--brass-ink); cursor: var(--cur-hand); rotate: 45deg; padding: 0; } /* Contour de même épaisseur que le trait des icônes (1,84 px à l'écran) : un vrai border serait arrondi au pixel entier (1 px), pas une ombre interne */ .theme svg { width: 15px; height: 15px; rotate: -45deg; fill: none; stroke: currentColor; stroke-width: 2.94; stroke-linecap: round; stroke-linejoin: round; } .theme .moon { display: none; } /* Le croissant est centré sur sa boîte (bbox) mais sa masse (centre de gravité à 1,84 unité en bas à gauche) paraît décalée : on le rapproche du centre visuel */ .theme .moon path { translate: 1.2px -1.2px; } :root:not([data-theme="light"]) .theme .sun { display: none; } :root:not([data-theme="light"]) .theme .moon { display: block; } /* ---------- Introduction : l'éventail pend du filet d'en-tête ---------- */ .hero { position: relative; isolation: isolate; text-align: center; padding: clamp(64px, 10vw, 118px) 0 clamp(52px, 7vw, 76px); } .hero::before, .opener::before, .jxp-page::before { content: ""; position: absolute; z-index: -1; top: 0; left: 50%; width: min(1100px, 130%); aspect-ratio: 1 / 1; translate: -50% -50%; /* le centre de la roue est épinglé au filet d'en-tête : elle tourne sur elle-même sans se déplacer, à moitié cachée derrière l'en-tête */ background: radial-gradient(circle, var(--brass), transparent 72%); opacity: .22; -webkit-mask: var(--wheel) center / 100% 100% no-repeat; mask: var(--wheel) center / 100% 100% no-repeat; animation: fan-spin 140s linear infinite; } @keyframes fan-spin { to { rotate: 360deg; } } /* La moitié haute de la roue (au-dessus du filet d'en-tête) est coupée : l'en-tête translucide ne la laisse plus deviner. Les marges négatives laissent déborder tout le reste (côtés, bas : cartes qui sortent du paquet…) ; seul ce qui dépasse AU-DESSUS de la section est rogné. */ .hero, .opener, .jxp-page { clip-path: inset(0 -100vw -100vh -100vw); } .jxp-page { position: relative; isolation: isolate; } /* pages « Jeux » et « Atelier » : la même roue que « Paquets », épinglée au filet d'en-tête */ h1 { margin: 0 auto 22px; font-size: clamp(30px, 5.2vw, 64px); line-height: 1.16; letter-spacing: -.005em; font-weight: 300; } h1 .ln { display: block; white-space: nowrap; } /* Les deux mots en capitales s'échangent : chaque lettre se retourne comme une carte (voir le script en bas de page). Le mot entrant est d'abord ivoire, puis se pose en laiton ; la largeur de l'emplacement glisse d'un mot à l'autre. */ .slot { position: relative; display: inline-block; vertical-align: baseline; perspective: 700px; text-align: center; font-weight: 500; letter-spacing: .06em; color: var(--brass-ink); transition: width .75s var(--ease); } .word { display: inline-block; white-space: nowrap; } .word.probe { position: absolute; left: 0; top: 0; visibility: hidden; pointer-events: none; } .ch { display: inline-block; transform-origin: 50% 58%; will-change: transform, opacity; } .word.out .ch { animation: ch-out .4s cubic-bezier(.5, 0, .75, 0) both; animation-delay: calc(var(--i) * var(--st, 32ms)); } .word.in .ch { animation: ch-in .6s var(--ease) both; animation-delay: calc(var(--i) * var(--st, 32ms)); } @keyframes ch-out { to { transform: rotateX(-90deg) translateY(-.16em); opacity: 0; } } @keyframes ch-in { from { transform: rotateX(90deg) translateY(.16em); opacity: 0; color: var(--text); } 60% { color: var(--text); } to { transform: none; opacity: 1; color: var(--brass-ink); } } @media (max-width: 620px) { /* petit écran : quatre lignes, les deux mots en capitales sur leur propre ligne */ h1 .ln { white-space: normal; } .slot { display: block; width: auto !important; } } .eyebrow::before, .eyebrow::after { content: ""; width: 44px; height: 1px; background: var(--brass-line); } .eyebrow { display: inline-flex; align-items: center; gap: 14px; margin: 0 0 28px; color: var(--brass-ink); font-size: 12.5px; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; } .lead { margin: 0 auto 38px; max-width: 50ch; font-size: clamp(17px, 2vw, 20px); color: var(--muted); text-wrap: pretty; } .cta { --cta-gap: 14px; display: flex; flex-direction: column; align-items: center; gap: var(--cta-gap); } .hint { color: var(--muted); font-size: 14px; letter-spacing: .02em; } /* Bouton principal : aplat laiton à angles en gradins, petits losanges de part et d'autre du texte. Au survol (ou au focus clavier) l'éventail se lève, le bouton s'éclaircit, et les losanges se remplissent, grossissent et s'écartent. */ .btn { --s: 5px; appearance: none; border: 0; position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 20px; padding: 17px 32px; background: var(--brass-ink); color: var(--on-brass); white-space: nowrap; font: 500 13.5px/1 var(--font); letter-spacing: .26em; text-transform: uppercase; text-decoration: none; cursor: var(--cur-hand); transition: filter .3s ease; /* jamais souligné, même quand c'est un lien */ } .btn::after { content: ""; position: absolute; z-index: -1; left: 50%; bottom: -34px; width: 150%; aspect-ratio: 2 / 1; translate: -50% 12px; background: var(--on-brass); opacity: 0; -webkit-mask: var(--fan) center / 100% 100% no-repeat; mask: var(--fan) center / 100% 100% no-repeat; transition: opacity .5s ease, translate .6s var(--ease); } .btn .dm { flex: none; width: 7px; height: 7px; border: 1px solid color-mix(in srgb, var(--on-brass) 62%, transparent); rotate: 45deg; transition: background .4s ease, border-color .4s ease, translate .45s var(--ease), scale .4s ease; } /* (les mêmes effets au survol sont plus bas, réservés aux écrans à souris : voir « Survol ») */ .btn:focus-visible { filter: brightness(1.16); } .btn:focus-visible::after { opacity: .36; translate: -50% 0; } .btn:focus-visible .dm { background: var(--on-brass); border-color: var(--on-brass); scale: 1.3; } .btn:focus-visible .dm:first-child { translate: -6px 0; } .btn:focus-visible .dm:last-child { translate: 6px 0; } .btn:active:not(:disabled) { filter: brightness(.95); } .btn:disabled { opacity: .4; cursor: var(--cur-blocked); filter: none; } /* ---------- Raretés ---------- */ .rar { padding: 84px 0 96px; text-align: center; } h2 { margin: 0 0 12px; font-size: clamp(22px, 2.6vw, 28px); font-weight: 400; letter-spacing: .24em; text-transform: uppercase; overflow-wrap: break-word; } .rar .rule { max-width: 340px; margin: 0 auto 26px; } .muted { margin: 0 auto 44px; color: var(--muted); max-width: 58ch; text-wrap: pretty; } /* ---------- Bandeaux de fonctionnalités (page d'accueil visiteur, inspirés de wiki-masters.com) ---------- Une fonctionnalité par bandeau : un court texte d'un côté, une petite mise en scène de l'interface de l'autre (rien d'interactif, aria-hidden). Alternance automatique par :nth-child. */ .showcase { padding: 0 0 clamp(64px, 9vw, 108px); display: grid; gap: clamp(64px, 9vw, 100px); } .sc-row { display: flex; align-items: center; gap: clamp(32px, 6vw, 80px); } .sc-row:nth-child(even) { flex-direction: row-reverse; } .sc-media, .sc-text { flex: 1 1 0; min-width: 0; } .sc-media { display: grid; justify-items: center; gap: 14px; } .sc-text .eyebrow { margin-bottom: 10px; } .sc-text .eyebrow::before, .sc-text .eyebrow::after { display: none; } .sc-text h2 { text-align: left; padding: 0; } .sc-text p { margin: 0; color: var(--muted); text-wrap: pretty; max-width: 46ch; } .sc-chips { display: flex; flex-wrap: wrap; gap: 8px; } .sc-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--line); font-size: 12px; letter-spacing: .08em; color: var(--text); } .sc-chip i { width: 7px; height: 7px; rotate: 45deg; background: var(--rc); flex: none; } .sc-chip.r7 i { background: conic-gradient(from 20deg, #e58fb0, #e9c26f, #7fd6a8, #7fb6ec, #b791ef, #e58fb0); } .sc-tags { display: flex; flex-wrap: wrap; gap: 8px; } .sc-tag { padding: 5px 11px; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--brass-ink); border: 1px solid var(--brass-line); } .sc-tag--sub { opacity: .7; } .sc-av { flex: none; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; border: 2px solid var(--brass-line); } .sc-av img { display: block; width: 100%; height: 100%; object-fit: cover; } .sc-vs { flex: none; display: grid; place-items: center; width: 34px; height: 34px; color: var(--brass); } .sc-vs svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .sc-av--sm { width: 44px; height: 44px; margin-left: -14px; } .sc-av--sm:first-child { margin-left: 0; } .sc-bell { position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-left: 10px; color: var(--brass-ink); border: 1px solid var(--brass-line); border-radius: 50%; } .sc-bell svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .sc-bell-dot { position: absolute; top: 6px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: #d9483f; box-shadow: 0 0 0 2px var(--surface); } @media (max-width: 760px) { .sc-row, .sc-row:nth-child(even) { flex-direction: column; text-align: center; } .sc-text h2 { text-align: center; } .sc-text p { margin-inline: auto; } } /* ---------- Pied de page ---------- */ /* Pied de page (proposition A) : pas de bandeau de fond ; un filet dégradé avec son losange CENTRÉ dessus, une ligne de liens séparés par de petits losanges, puis une ligne minuscule. Sur mobile, la source passe sur sa propre ligne au-dessus du © (voir src/partials/footer.php). */ .foot { --foot-ink: color-mix(in srgb, var(--muted) 62%, var(--bg)); position: relative; margin-top: clamp(40px, 6vw, 72px); /* toujours de l'air au-dessus du pied de page */ padding: 18px 0 14px; color: var(--foot-ink); font-size: 11.5px; line-height: 1.6; letter-spacing: .03em; text-align: center; } :root[data-theme="light"] .foot { --foot-ink: color-mix(in srgb, var(--muted) 85%, var(--bg)); } .foot::before { content: ""; position: absolute; left: 12%; right: 12%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--brass-line), transparent); } .foot::after { content: ""; position: absolute; left: 50%; top: .5px; width: 7px; height: 7px; translate: -50% -50%; rotate: 45deg; border: 1px solid var(--brass); background: var(--bg); } .foot .wrap { width: min(1200px, 100% - 24px); } .foot p { margin: 0 auto; text-wrap: balance; } .foot a { text-decoration-color: color-mix(in srgb, var(--brass) 45%, transparent); text-underline-offset: 3px; } .foot a:hover { color: var(--muted); } .foot-links { margin-bottom: 6px; color: var(--muted); font-size: 12px; } .foot-links > * { display: inline-block; padding: 2px 0; } .foot-links > * + *::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 12px 1px; rotate: 45deg; background: var(--brass); opacity: .7; } .foot-links a { text-decoration: none; } .foot-logo { display: inline-flex; align-items: center; vertical-align: middle; translate: 0 -.05em; margin-right: -.33em; } /* l’espace entre deux liens ajoute ~4 px entre le logo et le losange de DROITE (celui de gauche est dans le lien) : on la reprend, pour que le logo soit centré entre ses deux losanges */ /* centré sur la hauteur du texte voisin (le milieu de la ligne est à ~0,6 px au-dessus du milieu de l’inline-flex) */ .foot-ico { display: block; width: 18px; height: 18px; } /* les logos Discord et Instagram, à la place du mot (pied de page) */ .foot-links a:hover, .foot-link:hover { color: var(--text); } .foot-link { appearance: none; border: 0; background: none; padding: 0; color: inherit; font: inherit; letter-spacing: inherit; cursor: var(--cur-hand); } .foot-link:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; } .foot-short { display: none; } @media (max-width: 760px) { .foot { font-size: 10.5px; padding: 16px 0 12px; } .foot .foot-long { display: none; } .foot .foot-short { display: block; } } /* ---------- Paquet : cinq cartes ---------- */ .pack { padding: 8px 0 76px; } .cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 28px); } .pack-note { margin: 30px 0 0; text-align: center; color: var(--muted); font-size: 14px; } .pack-note a { color: var(--brass-ink); } .card { position: relative; aspect-ratio: 5 / 7; min-width: 0; container-type: inline-size; perspective: 1100px; transition: translate .3s var(--ease); } .card-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .8s var(--ease); } .card.flipped .card-in { transform: rotateY(180deg); } /* Une face = un cadre d'un pixel (le fond) + une surface intérieure (::before), toutes deux à angles en gradins */ .card-face { --s: 3.4cqw; position: absolute; inset: 0; overflow: hidden; isolation: isolate; background: var(--fr, var(--brass-line)); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .card-face::before { content: ""; position: absolute; inset: 1px; z-index: -1; background: var(--card); } /* Filets intérieurs : même contour à gradins que le cadre, rentré de --d1 (et --d2), épais de --t1 (et --t2). Chaque anneau est découpé dans un seul polygone. Le nombre et l'épaisseur des filets montent avec la rareté. */ .card-face::after { content: ""; position: absolute; inset: 0; pointer-events: none; } .card-back::after, .card.r3 .card-front::after { clip-path: polygon( calc(var(--d1)) calc((var(--d1) + (var(--s) * 2))), calc((var(--d1) + var(--s))) calc((var(--d1) + (var(--s) * 2))), calc((var(--d1) + var(--s))) calc((var(--d1) + var(--s))), calc((var(--d1) + (var(--s) * 2))) calc((var(--d1) + var(--s))), calc((var(--d1) + (var(--s) * 2))) calc(var(--d1)), calc(((100% - var(--d1)) - (var(--s) * 2))) calc(var(--d1)), calc(((100% - var(--d1)) - (var(--s) * 2))) calc((var(--d1) + var(--s))), calc(((100% - var(--d1)) - var(--s))) calc((var(--d1) + var(--s))), calc(((100% - var(--d1)) - var(--s))) calc((var(--d1) + (var(--s) * 2))), calc((100% - var(--d1))) calc((var(--d1) + (var(--s) * 2))), calc((100% - var(--d1))) calc(((100% - var(--d1)) - (var(--s) * 2))), calc(((100% - var(--d1)) - var(--s))) calc(((100% - var(--d1)) - (var(--s) * 2))), calc(((100% - var(--d1)) - var(--s))) calc(((100% - var(--d1)) - var(--s))), calc(((100% - var(--d1)) - (var(--s) * 2))) calc(((100% - var(--d1)) - var(--s))), calc(((100% - var(--d1)) - (var(--s) * 2))) calc((100% - var(--d1))), calc((var(--d1) + (var(--s) * 2))) calc((100% - var(--d1))), calc((var(--d1) + (var(--s) * 2))) calc(((100% - var(--d1)) - var(--s))), calc((var(--d1) + var(--s))) calc(((100% - var(--d1)) - var(--s))), calc((var(--d1) + var(--s))) calc(((100% - var(--d1)) - (var(--s) * 2))), calc(var(--d1)) calc(((100% - var(--d1)) - (var(--s) * 2))), calc(var(--d1)) calc((var(--d1) + (var(--s) * 2))), calc((var(--d1) + var(--t1))) calc(((100% - (var(--d1) + var(--t1))) - (var(--s) * 2))), calc(((var(--d1) + var(--t1)) + var(--s))) calc(((100% - (var(--d1) + var(--t1))) - (var(--s) * 2))), calc(((var(--d1) + var(--t1)) + var(--s))) calc(((100% - (var(--d1) + var(--t1))) - var(--s))), calc(((var(--d1) + var(--t1)) + (var(--s) * 2))) calc(((100% - (var(--d1) + var(--t1))) - var(--s))), calc(((var(--d1) + var(--t1)) + (var(--s) * 2))) calc((100% - (var(--d1) + var(--t1)))), calc(((100% - (var(--d1) + var(--t1))) - (var(--s) * 2))) calc((100% - (var(--d1) + var(--t1)))), calc(((100% - (var(--d1) + var(--t1))) - (var(--s) * 2))) calc(((100% - (var(--d1) + var(--t1))) - var(--s))), calc(((100% - (var(--d1) + var(--t1))) - var(--s))) calc(((100% - (var(--d1) + var(--t1))) - var(--s))), calc(((100% - (var(--d1) + var(--t1))) - var(--s))) calc(((100% - (var(--d1) + var(--t1))) - (var(--s) * 2))), calc((100% - (var(--d1) + var(--t1)))) calc(((100% - (var(--d1) + var(--t1))) - (var(--s) * 2))), calc((100% - (var(--d1) + var(--t1)))) calc(((var(--d1) + var(--t1)) + (var(--s) * 2))), calc(((100% - (var(--d1) + var(--t1))) - var(--s))) calc(((var(--d1) + var(--t1)) + (var(--s) * 2))), calc(((100% - (var(--d1) + var(--t1))) - var(--s))) calc(((var(--d1) + var(--t1)) + var(--s))), calc(((100% - (var(--d1) + var(--t1))) - (var(--s) * 2))) calc(((var(--d1) + var(--t1)) + var(--s))), calc(((100% - (var(--d1) + var(--t1))) - (var(--s) * 2))) calc((var(--d1) + var(--t1))), calc(((var(--d1) + var(--t1)) + (var(--s) * 2))) calc((var(--d1) + var(--t1))), calc(((var(--d1) + var(--t1)) + (var(--s) * 2))) calc(((var(--d1) + var(--t1)) + var(--s))), calc(((var(--d1) + var(--t1)) + var(--s))) calc(((var(--d1) + var(--t1)) + var(--s))), calc(((var(--d1) + var(--t1)) + var(--s))) calc(((var(--d1) + var(--t1)) + (var(--s) * 2))), calc((var(--d1) + var(--t1))) calc(((var(--d1) + var(--t1)) + (var(--s) * 2))), calc((var(--d1) + var(--t1))) calc(((100% - (var(--d1) + var(--t1))) - (var(--s) * 2))), calc(var(--d1)) calc((var(--d1) + (var(--s) * 2)))); } .card.r4 .card-front::after, .card.r5 .card-front::after, .card.r6 .card-front::after, .card.r7 .card-front::after { clip-path: polygon( calc(var(--d1)) calc((var(--d1) + (var(--s) * 2))), calc((var(--d1) + var(--s))) calc((var(--d1) + (var(--s) * 2))), calc((var(--d1) + var(--s))) calc((var(--d1) + var(--s))), calc((var(--d1) + (var(--s) * 2))) calc((var(--d1) + var(--s))), calc((var(--d1) + (var(--s) * 2))) calc(var(--d1)), calc(((100% - var(--d1)) - (var(--s) * 2))) calc(var(--d1)), calc(((100% - var(--d1)) - (var(--s) * 2))) calc((var(--d1) + var(--s))), calc(((100% - var(--d1)) - var(--s))) calc((var(--d1) + var(--s))), calc(((100% - var(--d1)) - var(--s))) calc((var(--d1) + (var(--s) * 2))), calc((100% - var(--d1))) calc((var(--d1) + (var(--s) * 2))), calc((100% - var(--d1))) calc(((100% - var(--d1)) - (var(--s) * 2))), calc(((100% - var(--d1)) - var(--s))) calc(((100% - var(--d1)) - (var(--s) * 2))), calc(((100% - var(--d1)) - var(--s))) calc(((100% - var(--d1)) - var(--s))), calc(((100% - var(--d1)) - (var(--s) * 2))) calc(((100% - var(--d1)) - var(--s))), calc(((100% - var(--d1)) - (var(--s) * 2))) calc((100% - var(--d1))), calc((var(--d1) + (var(--s) * 2))) calc((100% - var(--d1))), calc((var(--d1) + (var(--s) * 2))) calc(((100% - var(--d1)) - var(--s))), calc((var(--d1) + var(--s))) calc(((100% - var(--d1)) - var(--s))), calc((var(--d1) + var(--s))) calc(((100% - var(--d1)) - (var(--s) * 2))), calc(var(--d1)) calc(((100% - var(--d1)) - (var(--s) * 2))), calc(var(--d1)) calc((var(--d1) + (var(--s) * 2))), calc((var(--d1) + var(--t1))) calc(((100% - (var(--d1) + var(--t1))) - (var(--s) * 2))), calc(((var(--d1) + var(--t1)) + var(--s))) calc(((100% - (var(--d1) + var(--t1))) - (var(--s) * 2))), calc(((var(--d1) + var(--t1)) + var(--s))) calc(((100% - (var(--d1) + var(--t1))) - var(--s))), calc(((var(--d1) + var(--t1)) + (var(--s) * 2))) calc(((100% - (var(--d1) + var(--t1))) - var(--s))), calc(((var(--d1) + var(--t1)) + (var(--s) * 2))) calc((100% - (var(--d1) + var(--t1)))), calc(((100% - (var(--d1) + var(--t1))) - (var(--s) * 2))) calc((100% - (var(--d1) + var(--t1)))), calc(((100% - (var(--d1) + var(--t1))) - (var(--s) * 2))) calc(((100% - (var(--d1) + var(--t1))) - var(--s))), calc(((100% - (var(--d1) + var(--t1))) - var(--s))) calc(((100% - (var(--d1) + var(--t1))) - var(--s))), calc(((100% - (var(--d1) + var(--t1))) - var(--s))) calc(((100% - (var(--d1) + var(--t1))) - (var(--s) * 2))), calc((100% - (var(--d1) + var(--t1)))) calc(((100% - (var(--d1) + var(--t1))) - (var(--s) * 2))), calc((100% - (var(--d1) + var(--t1)))) calc(((var(--d1) + var(--t1)) + (var(--s) * 2))), calc(((100% - (var(--d1) + var(--t1))) - var(--s))) calc(((var(--d1) + var(--t1)) + (var(--s) * 2))), calc(((100% - (var(--d1) + var(--t1))) - var(--s))) calc(((var(--d1) + var(--t1)) + var(--s))), calc(((100% - (var(--d1) + var(--t1))) - (var(--s) * 2))) calc(((var(--d1) + var(--t1)) + var(--s))), calc(((100% - (var(--d1) + var(--t1))) - (var(--s) * 2))) calc((var(--d1) + var(--t1))), calc(((var(--d1) + var(--t1)) + (var(--s) * 2))) calc((var(--d1) + var(--t1))), calc(((var(--d1) + var(--t1)) + (var(--s) * 2))) calc(((var(--d1) + var(--t1)) + var(--s))), calc(((var(--d1) + var(--t1)) + var(--s))) calc(((var(--d1) + var(--t1)) + var(--s))), calc(((var(--d1) + var(--t1)) + var(--s))) calc(((var(--d1) + var(--t1)) + (var(--s) * 2))), calc((var(--d1) + var(--t1))) calc(((var(--d1) + var(--t1)) + (var(--s) * 2))), calc((var(--d1) + var(--t1))) calc(((100% - (var(--d1) + var(--t1))) - (var(--s) * 2))), calc(var(--d1)) calc((var(--d1) + (var(--s) * 2))), calc(var(--d2)) calc((var(--d2) + (var(--s) * 2))), calc((var(--d2) + var(--s))) calc((var(--d2) + (var(--s) * 2))), calc((var(--d2) + var(--s))) calc((var(--d2) + var(--s))), calc((var(--d2) + (var(--s) * 2))) calc((var(--d2) + var(--s))), calc((var(--d2) + (var(--s) * 2))) calc(var(--d2)), calc(((100% - var(--d2)) - (var(--s) * 2))) calc(var(--d2)), calc(((100% - var(--d2)) - (var(--s) * 2))) calc((var(--d2) + var(--s))), calc(((100% - var(--d2)) - var(--s))) calc((var(--d2) + var(--s))), calc(((100% - var(--d2)) - var(--s))) calc((var(--d2) + (var(--s) * 2))), calc((100% - var(--d2))) calc((var(--d2) + (var(--s) * 2))), calc((100% - var(--d2))) calc(((100% - var(--d2)) - (var(--s) * 2))), calc(((100% - var(--d2)) - var(--s))) calc(((100% - var(--d2)) - (var(--s) * 2))), calc(((100% - var(--d2)) - var(--s))) calc(((100% - var(--d2)) - var(--s))), calc(((100% - var(--d2)) - (var(--s) * 2))) calc(((100% - var(--d2)) - var(--s))), calc(((100% - var(--d2)) - (var(--s) * 2))) calc((100% - var(--d2))), calc((var(--d2) + (var(--s) * 2))) calc((100% - var(--d2))), calc((var(--d2) + (var(--s) * 2))) calc(((100% - var(--d2)) - var(--s))), calc((var(--d2) + var(--s))) calc(((100% - var(--d2)) - var(--s))), calc((var(--d2) + var(--s))) calc(((100% - var(--d2)) - (var(--s) * 2))), calc(var(--d2)) calc(((100% - var(--d2)) - (var(--s) * 2))), calc(var(--d2)) calc((var(--d2) + (var(--s) * 2))), calc((var(--d2) + var(--t2))) calc(((100% - (var(--d2) + var(--t2))) - (var(--s) * 2))), calc(((var(--d2) + var(--t2)) + var(--s))) calc(((100% - (var(--d2) + var(--t2))) - (var(--s) * 2))), calc(((var(--d2) + var(--t2)) + var(--s))) calc(((100% - (var(--d2) + var(--t2))) - var(--s))), calc(((var(--d2) + var(--t2)) + (var(--s) * 2))) calc(((100% - (var(--d2) + var(--t2))) - var(--s))), calc(((var(--d2) + var(--t2)) + (var(--s) * 2))) calc((100% - (var(--d2) + var(--t2)))), calc(((100% - (var(--d2) + var(--t2))) - (var(--s) * 2))) calc((100% - (var(--d2) + var(--t2)))), calc(((100% - (var(--d2) + var(--t2))) - (var(--s) * 2))) calc(((100% - (var(--d2) + var(--t2))) - var(--s))), calc(((100% - (var(--d2) + var(--t2))) - var(--s))) calc(((100% - (var(--d2) + var(--t2))) - var(--s))), calc(((100% - (var(--d2) + var(--t2))) - var(--s))) calc(((100% - (var(--d2) + var(--t2))) - (var(--s) * 2))), calc((100% - (var(--d2) + var(--t2)))) calc(((100% - (var(--d2) + var(--t2))) - (var(--s) * 2))), calc((100% - (var(--d2) + var(--t2)))) calc(((var(--d2) + var(--t2)) + (var(--s) * 2))), calc(((100% - (var(--d2) + var(--t2))) - var(--s))) calc(((var(--d2) + var(--t2)) + (var(--s) * 2))), calc(((100% - (var(--d2) + var(--t2))) - var(--s))) calc(((var(--d2) + var(--t2)) + var(--s))), calc(((100% - (var(--d2) + var(--t2))) - (var(--s) * 2))) calc(((var(--d2) + var(--t2)) + var(--s))), calc(((100% - (var(--d2) + var(--t2))) - (var(--s) * 2))) calc((var(--d2) + var(--t2))), calc(((var(--d2) + var(--t2)) + (var(--s) * 2))) calc((var(--d2) + var(--t2))), calc(((var(--d2) + var(--t2)) + (var(--s) * 2))) calc(((var(--d2) + var(--t2)) + var(--s))), calc(((var(--d2) + var(--t2)) + var(--s))) calc(((var(--d2) + var(--t2)) + var(--s))), calc(((var(--d2) + var(--t2)) + var(--s))) calc(((var(--d2) + var(--t2)) + (var(--s) * 2))), calc((var(--d2) + var(--t2))) calc(((var(--d2) + var(--t2)) + (var(--s) * 2))), calc((var(--d2) + var(--t2))) calc(((100% - (var(--d2) + var(--t2))) - (var(--s) * 2))), calc(var(--d2)) calc((var(--d2) + (var(--s) * 2)))); } /* Dos : l'éventail monte du bas, un losange au centre */ .card-back { display: grid; place-items: center; } .card-back::before { background: radial-gradient(120% 90% at 50% 100%, color-mix(in srgb, var(--brass) 9%, var(--card)), var(--card) 70%); } .card-back::after { --d1: 3.6cqw; --t1: 1px; background: var(--brass-line); } /* L'éventail mesure 150 % × 75 % de la carte ; la boîte, elle, s'arrête aux bords de la carte (le masque, plus large qu'elle et centré, garde le même dessin) : la partie qui dépassait, rognée de toute façon, n'élargit plus la page sur mobile. */ .card-back .fan { position: absolute; left: 0; right: 0; bottom: 3.6cqw; aspect-ratio: 4 / 3; background: var(--brass); opacity: .5; -webkit-mask: var(--fan) center / 150% 100% no-repeat; mask: var(--fan) center / 150% 100% no-repeat; } /* Logo au dos : la marque, puis Wiki au-dessus de Collect */ .card-back .logo { position: absolute; left: 50%; top: 23cqw; translate: -50% 0; z-index: 1; display: grid; justify-items: center; font-size: 7.5cqw; line-height: 1.22; letter-spacing: .3em; text-transform: uppercase; color: var(--text); } .card-back .logo > span, .card-back .logo > b { padding-left: .3em; } .card-back .logo > span { font-weight: 500; } .card-back .logo > b { font-weight: 300; } .card-back .logo .mark { width: 6.7cqw; height: 6.7cqw; margin: 1.6cqw 0 5.2cqw; } .card-back .logo .mark::before { inset: 1.4cqw; } .card-back .logo .mark::after { inset: 3cqw; } /* Face : cadre de la couleur du joyau, image, losange de rareté à cheval, texte centré */ .card-front { transform: rotateY(180deg); display: flex; flex-direction: column; padding: var(--p); color: var(--text); text-decoration: none; --fr: color-mix(in srgb, var(--rc) 78%, var(--card)); } /* Traits : --u est l'unité (1 px, qui grandit avec la carte) ; le passe-partout --p est le même pour toutes les raretés (il loge les filets de l'Ultime), donc l'image a toujours la même taille */ .card-front { --u: max(1px, .4cqw); --f: var(--u); --ga: 1cqw; --gb: .8cqw; --gi: 1cqw; --t1: var(--u); --t2: var(--u); --d1: calc(var(--f) + var(--ga)); --d2: calc(var(--d1) + var(--t1) + var(--gb)); --p: calc(var(--u) * 7 + var(--ga) + var(--gb) + var(--gi)); } .card.r5 .card-front, .card.r6 .card-front { --f: calc(var(--u) * 2); --t1: calc(var(--u) * 2); } .card.r7 .card-front { --f: calc(var(--u) * 3); --t1: calc(var(--u) * 2); --t2: calc(var(--u) * 2); } .card.r3 .card-front::after { background: color-mix(in srgb, var(--rc) 55%, transparent); } .card.r4 .card-front::after { background: color-mix(in srgb, var(--rc) 60%, transparent); } .card-front { --bg-top: color-mix(in srgb, var(--rc) 11%, var(--card)); --bg-bot: color-mix(in srgb, var(--rc) 34%, var(--card)); } .card-front::before { inset: var(--f); background: linear-gradient(180deg, var(--bg-top) 52%, var(--bg-bot)); } .card-img { position: relative; flex: 0 0 56%; background: var(--track); overflow: hidden; clip-path: polygon(0 calc(var(--s) * 2), var(--s) calc(var(--s) * 2), var(--s) var(--s), calc(var(--s) * 2) var(--s), calc(var(--s) * 2) 0, calc(100% - var(--s) * 2) 0, calc(100% - var(--s) * 2) var(--s), calc(100% - var(--s)) var(--s), calc(100% - var(--s)) calc(var(--s) * 2), 100% calc(var(--s) * 2), 100% 100%, 0 100%); } .card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } /* Image au format portrait (posée par site.js) : alignée sur le bord du haut, c'est le bas qui est rogné */ .card-front:not(.fa) .card-img img.portrait { object-position: 50% 0; transform-origin: 50% 0; } /* Carte sans illustration (ou dont l'image ne charge pas) : le logo complet (marque, puis Wiki au-dessus de Collect) sur un éventail très discret, comme au dos des cartes, dans la couleur de rareté un peu transparente. */ .card-img:has(.ph)::before { content: ""; position: absolute; left: 50%; bottom: 0; width: 130%; aspect-ratio: 2 / 1; translate: -50% 0; background: var(--rc); opacity: .22; -webkit-mask: var(--fan) center / 100% 100% no-repeat; mask: var(--fan) center / 100% 100% no-repeat; } .card-img .ph { --ph: color-mix(in srgb, var(--rc) 60%, transparent); position: absolute; inset: 0; display: grid; place-items: center; } .ph .logo { display: grid; justify-items: center; font-size: 7.5cqw; line-height: 1.22; letter-spacing: .3em; text-transform: uppercase; color: var(--ph); } .ph .logo > span, .ph .logo > b { padding-left: .3em; } .ph .logo > span { font-weight: 500; } .ph .logo > b { font-weight: 300; } .ph .logo .mark { width: 6.7cqw; height: 6.7cqw; margin: 1.6cqw 0 5.2cqw; border-color: var(--ph); } .ph .logo .mark::before { inset: 1.4cqw; border-color: var(--ph); } .ph .logo .mark::after { inset: 3cqw; background: var(--ph); } .card-body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1.5cqw; padding: 7.4cqw 1.5cqw .8cqw; text-align: center; } .card-body::before { content: ""; position: absolute; left: 50%; top: 0; width: 6.4cqw; height: 6.4cqw; translate: -50% -50%; rotate: 45deg; background: var(--rc); box-shadow: 0 0 0 1.1cqw var(--bg-top), 0 0 0 calc(1.1cqw + 1px) color-mix(in srgb, var(--rc) 60%, transparent); } .card-body h3 { margin: 0; font-size: max(13px, 7.2cqw); line-height: 1.22; font-weight: 500; letter-spacing: .01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; text-wrap: balance; } .meta { display: grid; justify-items: center; gap: .6cqw; } .tag { font-size: max(9.5px, 3.9cqw); line-height: 1.3; font-weight: 500; letter-spacing: .24em; padding-left: .24em; text-transform: uppercase; white-space: nowrap; color: color-mix(in srgb, var(--rc) 82%, var(--text)); } /* Description : 3 lignes au plus (2 sur les cartes étroites, 1 sous 173 px, et en Extended Art quand le titre en fait 2, voir site.js), tronquée par des points de suspension ; site.js réduit un peu la police (jusqu'à -14 %) quand le texte dépasse. */ .desc { margin: 0; font-size: max(9.5px, 4.2cqw); line-height: 1.3; color: var(--muted); text-align: center; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } @container (max-width: 224px) { .card-body .desc { -webkit-line-clamp: 2; } } @container (max-width: 172px) { .card-body .desc { -webkit-line-clamp: 1; } } @container (max-width: 149px) { .card-body .desc { display: none; } } /* Carte trop petite pour que le titre (2 lignes) et le reste tiennent proprement : on retire le nombre de vues et le style (Full Art / Extended Art), la rareté seule suffit. */ @container (max-width: 160px) { .card-body .vw, .card-body .tag-style { display: none; } } .vw { display: inline-flex; align-items: center; gap: .32em; font-size: max(10px, 4.1cqw); line-height: 1.3; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; } .vw::before { content: ""; flex: none; width: .95em; height: .95em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,"; inherits: false; initial-value: 0deg; } .card.r7 .card-front { background: conic-gradient(from var(--a), #e58fb0, #e9c26f, #7fd6a8, #7fb6ec, #b791ef, #e58fb0); animation: spin 9s linear infinite; } .card.r7 .card-front::after { background: color-mix(in srgb, var(--rc) 65%, transparent); } .card.r7 .card-body::before { background: conic-gradient(from 20deg, #e58fb0, #e9c26f, #7fd6a8, #7fb6ec, #b791ef, #e58fb0); box-shadow: 0 0 0 1.1cqw var(--bg-top); } @keyframes spin { to { --a: 360deg; } } /* Effets : un reflet qui traverse la carte (Légendaire, Mythique) et un voile arc-en-ciel lent (Ultime). Calques posés sur la carte elle-même (::before / ::after de .card), visibles une fois la carte retournée. */ .card.r5::after, .card.r6::after, .card.r7::before { content: ""; position: absolute; inset: 0; --s: 3.4cqw; pointer-events: none; opacity: 0; transition: opacity 1s ease .55s; } .card.r5::after, .card.r6::after { z-index: 2; background: linear-gradient(115deg, transparent 18%, color-mix(in srgb, var(--shine) 22%, transparent) 30%, var(--shine) 50%, color-mix(in srgb, var(--shine) 22%, transparent) 70%, transparent 82%) 150% 0 / 300% 100% no-repeat; animation: sweep 10s linear infinite; } .card.r5 { --shine: rgba(255, 238, 178, .13); } .card.r6 { --shine: rgba(255, 210, 200, .11); } .card.r7::before { z-index: 1; background: linear-gradient(115deg, rgba(255, 80, 150, 0) 0%, rgba(255, 80, 150, .5) 14%, rgba(255, 205, 90, .5) 28%, rgba(90, 230, 160, .46) 42%, rgba(90, 175, 255, .5) 56%, rgba(170, 110, 255, .5) 70%, rgba(255, 80, 150, 0) 84%) 0 0 / 260% 100% no-repeat; animation: rainbow 10s ease-in-out infinite alternate; } .card.flipped.r5::after, .card.flipped.r6::after { opacity: 1; } .card.flipped.r7::before { opacity: .42; } /* Le reflet entre et sort entièrement de la carte (150 % → -50 %) : la boucle est invisible, il n'y a ni saut ni extinction */ @keyframes sweep { from { background-position: 150% 0; } to { background-position: -50% 0; } } @keyframes rainbow { from { background-position: 0% 0; } to { background-position: 100% 0; } } /* ---------- Compte : bouton dans l'en-tête (« Se connecter », « S'inscrire », « Compte »), même cadre laiton que l'ancienne pastille « En construction » ---------- */ .acct-pill { --s: 3px; appearance: none; display: inline-flex; flex-direction: column; align-items: center; gap: 5px; border: 0; background: color-mix(in srgb, var(--brass) 18%, transparent); color: var(--brass-ink); padding: 8px 16px; font: 500 11px/1 var(--font); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: var(--cur-hand); transition: background .3s ease, color .3s ease; } .acct-pill:hover, .acct-pill:focus-visible { background: color-mix(in srgb, var(--brass) 30%, transparent); } .acct-pill .ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .acct-pill.icon-only { padding: 9px; } /* Bouton « Compte » : l'avatar remplace l'icône, un peu plus grand qu'une icône simple (sans agrandir l'en-tête, qui a une hauteur fixe) ; même contour et même survol (couleur + transition) que .theme. */ .acct-pill.avatar-btn { padding: 6px; } .acct-pill .avatar-ic { display: block; width: 26px; height: 26px; flex: none; border-radius: 50%; object-fit: cover; border: 2px solid var(--line); transition: border-color .3s ease; } .acct-pill:hover .avatar-ic, .acct-pill:focus-visible .avatar-ic { border-color: var(--brass-line); } .auth-pills { display: inline-flex; gap: 14px; } .burger-menu { display: none; } .acct-menu { position: relative; } .acct-dropdown { position: absolute; top: calc(100% + 10px); left: 50%; translate: -50% 0; z-index: 60; min-width: 180px; background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--brass); padding: 6px; } /* Les boutons du système de boutons (.btn, .btn-tertiary…) posés dans une liste déroulante (ex. « Récupérer » d'une notification) gardent leur propre aspect */ .acct-dropdown :is(a, button):where(:not(.btn, .btn-tertiary)) { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 11px 14px; margin: 0; color: var(--text); font: inherit; font-size: 13px; letter-spacing: .03em; text-decoration: none; cursor: var(--cur-hand); } .acct-dropdown :is(a, button):where(:not(.btn, .btn-tertiary)):is(:hover, :focus-visible) { background: var(--band); } .acct-dropdown form { margin: 0; } .acct-name { max-width: 240px; margin: 0 0 4px; padding: 10px 14px 12px; border-bottom: 1px solid var(--line); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500; letter-spacing: .06em; color: var(--brass-ink); } /* ---------- Barre de navigation mobile (≤760px, visible seulement connecté·e) : voir la media query plus bas ---------- */ .bottom-nav { display: none; } /* ---------- Formulaires (inscription, connexion…) ---------- */ .auth { padding: clamp(48px, 8vw, 88px) 0 96px; } .auth-card { max-width: 440px; margin: 0 auto; padding: clamp(28px, 5vw, 44px) clamp(24px, 5vw, 40px); background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--brass); } .auth-card h1 { margin: 0 0 10px; font-size: clamp(20px, 2.6vw, 26px); font-weight: 400; letter-spacing: .16em; text-transform: uppercase; text-align: center; } .auth-card .lead-sm { margin: 0 0 30px; color: var(--muted); font-size: 14px; text-align: center; text-wrap: pretty; } .field { display: grid; gap: 8px; margin-bottom: 20px; } .field label { font-size: 11.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .field input { appearance: none; border: 1px solid var(--line); background: var(--card); color: var(--text); padding: 13px 14px; font: inherit; font-size: 15px; transition: border-color .3s ease; } .field input:focus-visible { outline: none; border-color: var(--brass); } .field small { color: var(--muted); font-size: 12px; } .form-msg { margin: 0 0 22px; padding: 13px 16px; font-size: 13.5px; line-height: 1.5; border-left: 2px solid; background: var(--band); } .form-msg.error { border-color: #b8453f; } .form-msg.error li { margin: 2px 0; } .form-msg.ok { border-color: var(--brass); } .form-msg.flash { max-width: 640px; margin: 24px auto 0; } .form-msg ul { margin: 0; padding-left: 18px; } .auth-card .btn { width: 100%; justify-content: center; margin-top: 8px; } .auth-card + .auth-card { margin-top: 32px; } .danger-card { border-top-color: #b8453f; } .btn-danger { --on-brass: #fbf8f1; background: #8a3530; } /* texte clair dans les deux thèmes (≈ 7,5:1) ; --on-brass sert aussi aux losanges et à l'éventail */ /* ---------- Choix de l'avatar (paramètres) ---------- */ .avatar-cat { margin: 0 0 10px; font-size: 12.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--brass-ink); } .avatar-cat + .avatar-grid { margin-top: 0; } .avatar-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 4px 0 24px; } .avatar-radio { position: absolute; opacity: 0; pointer-events: none; } .avatar-opt { display: block; line-height: 0; padding: 3px; border: 2px solid transparent; cursor: var(--cur-hand); transition: border-color .3s ease; } .avatar-opt img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; } .avatar-radio:checked + .avatar-opt { border-color: var(--brass); } .avatar-radio:focus-visible + .avatar-opt { outline: 2px solid var(--brass); outline-offset: 2px; } @media (max-width: 480px) { .avatar-grid { gap: 6px; } } .auth-links { margin-top: 26px; text-align: center; font-size: 13px; color: var(--muted); } .auth-links + .auth-links { margin-top: 10px; } .auth-links a:not(.btn) { color: var(--brass-ink); } .dev-mail { margin-top: 24px; padding: 16px 18px; background: var(--band); border: 1px dashed var(--brass-line); font-size: 13px; color: var(--muted); word-break: break-all; } .dev-mail b { display: block; margin-bottom: 8px; color: var(--brass-ink); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; font-size: 11.5px; } .dev-mail a { color: var(--brass-ink); } /* ---------- Collection ---------- */ .collection { padding: clamp(48px, 8vw, 88px) 0 96px; } /* Panneau du haut : chiffres et recherche sur une ligne, puis tri et filtres sur une seconde, séparée d'un filet orné */ .coll-panel { position: relative; margin: 0 0 40px; padding: clamp(22px, 3vw, 32px) clamp(18px, 3vw, 36px); background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--brass); } .coll-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 22px 40px; } .coll-stats { display: flex; margin: 0; } .coll-stats > div { display: flex; flex-direction: column-reverse; gap: 4px; padding: 0 clamp(18px, 3vw, 38px); border-left: 1px solid var(--line); } .coll-stats > div:first-child { padding-left: 0; border-left: 0; } .coll-stats dt { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .coll-stats dd { margin: 0; font-size: clamp(28px, 3.2vw, 38px); font-weight: 300; line-height: 1.1; font-variant-numeric: tabular-nums; } .coll-stats .shown dd { color: var(--brass-ink); } .coll-search { position: relative; flex: 1 1 300px; max-width: 460px; } .coll-search input { appearance: none; width: 100%; border: 1px solid var(--line); background: var(--card); color: var(--text); padding: 14px 92px 14px 18px; font: inherit; font-size: 15px; transition: border-color .3s ease; } .coll-search input::placeholder { color: var(--muted); opacity: .8; } .coll-search input::-webkit-search-cancel-button { display: none; } .coll-search input:hover { border-color: var(--brass-line); } .coll-search input:focus-visible { outline: none; border-color: var(--brass); } .coll-search button { appearance: none; position: absolute; right: 4px; top: 4px; bottom: 4px; width: 42px; display: grid; place-items: center; border: 0; background: none; color: var(--muted); cursor: var(--cur-hand); transition: color .3s ease; } .coll-search button:hover, .coll-search button:focus-visible { color: var(--brass-ink); } .coll-search .coll-clear { right: 46px; width: 36px; } .coll-search .coll-clear[hidden] { display: none; } .coll-search svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .coll-filters { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 18px 28px; margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--line); } .coll-filters::before { content: ""; position: absolute; left: 50%; top: -5px; width: 9px; height: 9px; translate: -50% 0; rotate: 45deg; background: var(--surface); border: 1px solid var(--brass); } .cards.collection { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 26px 20px; } .cards .card.flipped { cursor: var(--cur-hand); } /* une carte retournée ouvre sa fenêtre de détail (card-modal.js) */ .cards .card.flipped .card-in:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; } [data-part="results"] .card-in { scroll-margin: 130px 0 40px; } /* navigation au clavier (collection-keys.js) : la carte qui prend le focus reste sous l'en-tête collant et au-dessus de la barre du bas */ .coll-none { margin: 40px 0; text-align: center; color: var(--muted); } /* Tri et filtres de la collection */ .tool { display: grid; gap: 7px; min-width: 0; } .tool[hidden] { display: none; } /* « Dans ma liste de souhait » de la fenêtre d'échange : caché hors de la collection de l'ami (assets/pick-filters.js) */ .tool label, .tool-label { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .sel { position: relative; display: block; } .sel::after { content: ""; position: absolute; right: 14px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border: solid var(--muted); border-width: 0 1.5px 1.5px 0; rotate: 45deg; pointer-events: none; } .sel select { appearance: none; width: 100%; max-width: 100%; border: 1px solid var(--line); background: var(--card); color: var(--text); padding: 11px 36px 11px 14px; font: inherit; font-size: 14px; cursor: var(--cur-hand); transition: border-color .3s ease; } .sel select:hover { border-color: var(--brass-line); } .sel select:focus-visible { outline: none; border-color: var(--brass); } #tri { min-width: 190px; } .sort-row { display: flex; gap: 8px; } .sort-row .sel { flex: 1; } .sort-dir-wrap, .coll-reset-wrap { display: contents; } .coll-results { transition: opacity .2s ease; } .coll-results.is-loading { pointer-events: none; } /* Fête d'une récompense récupérée (assets/site.js, WikiCollect.celebrate) : la gerbe de losanges (proposition R1) */ .cel-layer { position: fixed; z-index: 400; width: 0; height: 0; pointer-events: none; } .cel-p { position: absolute; left: 0; top: 0; width: 10px; height: 10px; margin: -5px; rotate: 45deg; background: var(--c, var(--brass)); opacity: 0; animation: cel-burst var(--t, 1s) cubic-bezier(.15, .7, .3, 1) var(--d, 0s) forwards; } @keyframes cel-burst { 0% { opacity: 1; translate: 0 0; scale: .6; } 70% { opacity: 1; } 100% { opacity: 0; translate: var(--x) var(--y); scale: 1.2; rotate: 225deg; } } /* moins d'animations (boot.js, docs/animations.md) */ :where(:root[data-motion="reduce"]) .cel-layer { display: none; } /* Réglages enregistrés (assets/collection-presets.js) : une rangée sous les étiquettes, des pastilles qui s'appliquent d'un clic, 5 au plus */ .coll-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); } /* tout sur une seule ligne (elle ne passe à la suivante que faute de place) : titre, réglages, bouton ou champ, message */ .fp-head, .fp-row { display: contents; } .fp-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .fp-chip { display: inline-flex; align-items: stretch; border: 1px solid var(--brass-line); background: var(--card); } .fp-chip.is-on { border-color: var(--brass); background: color-mix(in srgb, var(--brass) 16%, var(--card)); } .fp-go { display: inline-flex; align-items: center; max-width: 220px; min-height: 36px; padding: 0 12px; color: var(--text); font-size: 13.5px; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fp-go:hover, .fp-go:focus-visible { color: var(--brass-ink); } .fp-del { appearance: none; display: grid; place-items: center; width: 32px; padding: 0; border: 0; border-left: 1px solid var(--line); background: none; color: var(--muted); cursor: var(--cur-hand); } .fp-del:hover, .fp-del:focus-visible { color: #d9483f; } .fp-del:disabled { opacity: .5; cursor: var(--cur-blocked); } .fp-del svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; } .fp-none { color: var(--muted); font-size: 13px; } .fp-field { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; } .fp-field .btn.btn-sm { white-space: nowrap; min-height: 38px; min-width: 120px; padding: 0 22px; font-size: 12px; } /* « Enregistrer » et « Annuler » : à la hauteur des pastilles de réglages (38 px) */ .coll-presets [hidden] { display: none !important; } .fp-field input { min-width: 0; flex: 0 1 260px; width: 260px; min-height: 38px; padding: 0 14px; border: 1px solid var(--line); background: var(--card); color: var(--text); font: inherit; font-size: 16px; } .fp-field input:focus-visible { outline: none; border-color: var(--brass); } .fp-msg { margin: 0; font-size: 13px; color: var(--muted); } .fp-msg:empty { display: none; } .fp-msg.is-error { color: #d9483f; } @media (max-width: 680px) { .fp-field { flex-wrap: wrap; width: 100%; } .fp-field input { flex: 1 1 100%; width: auto; } } .coll-results.is-loading > :not(.cards) { opacity: .5; } /* Squelettes : si la liste met plus d'un quart de seconde à revenir (tri, filtre, page, recherche), chaque carte est remplacée par une forme grise qui miroite (les cartes restent là tant que ça va vite, rien ne clignote) */ @keyframes sk-hide { to { opacity: 0; } } @keyframes sk-sweep { to { background-position: -250% 0; } } .coll-results.is-loading .card-face > * { animation: sk-hide .2s ease .25s forwards; } .coll-results.is-loading .card-face::before { background: linear-gradient(105deg, var(--sk-a) 35%, var(--sk-b) 50%, var(--sk-a) 65%) 100% 0 / 250% 100%; animation: sk-sweep 1.4s linear .25s infinite; } .coll-results.is-loading .card-face { background: var(--sk-b) !important; box-shadow: none !important; outline: none !important; filter: none !important; } .coll-results.is-loading .card::before, .coll-results.is-loading .card::after, .coll-results.is-loading .card .fx-lz, .coll-results.is-loading .card .fx-open { display: none !important; } /* les reflets de rareté ne se jouent pas sur un squelette */ .coll-results.is-loading .card-face::after, .coll-results.is-loading .card-face > .fx-lz { visibility: hidden; } :root { --sk-a: color-mix(in srgb, var(--text) 7%, var(--card)); --sk-b: color-mix(in srgb, var(--text) 16%, var(--card)); } /* moins d'animations (boot.js, docs/animations.md) */ :where(:root[data-motion="reduce"]) .coll-results.is-loading .card-face::before { animation: none; background-position: 50% 0; } .sort-dir { appearance: none; width: 44px; flex: none; display: grid; place-items: center; border: 1px solid var(--line); background: var(--card); color: var(--muted); cursor: var(--cur-hand); transition: color .3s ease, border-color .3s ease; } .sort-dir:hover, .sort-dir:focus-visible { color: var(--brass-ink); border-color: var(--brass-line); } .sort-dir svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* Liste déroulante à choix multiples (styles) : un
dont le panneau contient des cases en losange */ .multi { position: relative; min-width: 190px; } .multi summary { position: relative; list-style: none; border: 1px solid var(--line); background: var(--card); color: var(--text); padding: 11px 36px 11px 14px; font-size: 14px; cursor: var(--cur-hand); transition: border-color .3s ease; } .multi summary::-webkit-details-marker { display: none; } .multi summary::after { content: ""; position: absolute; right: 14px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border: solid var(--muted); border-width: 0 1.5px 1.5px 0; rotate: 45deg; } .multi summary:hover { border-color: var(--brass-line); } .multi summary:focus-visible, .multi[open] summary { outline: none; border-color: var(--brass); } .multi-panel { position: absolute; z-index: 30; left: 0; min-width: 100%; top: calc(100% + 4px); padding: 6px; background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--brass); box-shadow: 0 14px 40px rgba(0, 0, 0, .3); } .tool .multi-opt { display: flex; align-items: center; gap: 12px; padding: 9px 10px; font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text); white-space: nowrap; cursor: var(--cur-hand); } .tool .multi-opt:hover { background: var(--band); } .multi-opt input { appearance: none; flex: none; width: 10px; height: 10px; margin: 0 2px; rotate: 45deg; border: 1px solid var(--brass); background: none; cursor: var(--cur-hand); transition: background .2s ease; } .multi-opt input:checked { background: var(--brass); } .multi-opt input:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; } .coll-reset { align-self: flex-end; padding-bottom: 12px; font-size: 13px; color: var(--brass-ink); } /* Raretés : les sept losanges, plusieurs peuvent être sélectionnés ; un losange sélectionné est cerclé de laiton, un second clic le désélectionne */ .rar-picker { display: flex; gap: 6px; padding: 0 2px; } .rar-opt { position: relative; display: grid; place-items: center; width: 34px; height: 40px; cursor: var(--cur-hand); } .rar-opt input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: var(--cur-hand); } .rar-opt i { width: 15px; height: 15px; rotate: 45deg; background: var(--rc); transition: box-shadow .25s ease, scale .25s ease; } .rar-opt.r7 i { background: conic-gradient(from 20deg, #e58fb0, #e9c26f, #7fd6a8, #7fb6ec, #b791ef, #e58fb0); } .rar-opt input:checked + i { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4.5px var(--brass); } .rar-opt input:focus-visible + i { outline: 2px solid var(--brass); outline-offset: 5px; } /* Pagination de la collection (public/assets/collection-pages.js) */ .pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 0 32px; } .pager:last-of-type { margin: 40px 0 0; } .pager[hidden] { display: none; } .pg { appearance: none; min-width: 38px; height: 38px; padding: 0 8px; display: inline-grid; place-items: center; border: 1px solid var(--line); background: none; color: var(--muted); font: 500 14px/1 var(--font); cursor: var(--cur-hand); transition: color .3s ease, border-color .3s ease, background .3s ease; } .pg svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .pg:hover:not(:disabled), .pg:focus-visible { color: var(--text); border-color: var(--brass-line); } .pg-input { appearance: none; -moz-appearance: textfield; box-sizing: border-box; min-width: 52px; height: 38px; padding: 0 6px; border: 1px solid var(--brass); background: color-mix(in srgb, var(--brass) 14%, transparent); color: var(--brass-ink); font: 500 14px/1 var(--font); text-align: center; letter-spacing: .02em; transition: border-color .3s ease, background .3s ease; } .pg-input:hover { background: color-mix(in srgb, var(--brass) 22%, transparent); } .pg-input:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; } .pg:disabled { opacity: .35; cursor: var(--cur-blocked); } .cards .card[hidden] { display: none; } @media (max-width: 480px) { .pager { gap: 4px; } .pg { min-width: 32px; height: 36px; padding: 0 4px; } .pg-input { min-width: 44px; height: 36px; } .pg-far { display: none; } } /* les voisines à 2 pages disparaissent : la barre tient sur un téléphone */ /* ---------- Étiquettes des joueurs (public/assets/tags.js, src/TagsView.php) ---------- */ /* Une clé de couleur par étiquette (Tags::COLORS) ; --tc suit le thème clair ou sombre. Les sous-étiquettes reprennent celle du parent. */ .tc-laiton { --tc: var(--brass); } .tc-emeraude { --tc: var(--r2); } .tc-saphir { --tc: var(--r3); } .tc-amethyste { --tc: var(--r4); } .tc-or { --tc: var(--r5); } .tc-rubis { --tc: var(--r6); } .tc-rose { --tc: #d0708c; } .tc-pierre { --tc: var(--r1); } .tc-custom { --tc: var(--brass); } /* couleur hexadécimale : la vraie valeur (--tc, --on-tc) est dans l'attribut style de l'élément */ .tool .dup-toggle { display: flex; align-items: center; gap: 10px; height: 43px; padding: 0 14px; border: 1px solid var(--line); background: var(--card); font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text); cursor: var(--cur-hand); transition: border-color .3s ease; } .tool .dup-toggle:hover { border-color: var(--brass-line); } .dup-box { flex: none; width: 10px; height: 10px; margin: 0 2px; rotate: 45deg; border: 1px solid var(--brass); transition: background .2s ease; } .dup-toggle input:checked + .dup-box { background: var(--brass); } .dup-toggle:has(input:focus-visible) { outline: 2px solid var(--brass); outline-offset: 2px; } .coll-tags .dup-toggle { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; border: 1px solid var(--line); background: var(--card); font-size: 14px; color: var(--text); cursor: var(--cur-hand); transition: border-color .3s ease; } /* « Sans étiquette » : même case que Doublons et Favoris */ .coll-tags .dup-toggle:hover { border-color: var(--brass-line); } .coll-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--line); } .tag-chips { display: flex; flex: 1 1 260px; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-width: 0; } .tag-empty { margin: 0; font-size: 13.5px; color: var(--muted); } .tag-chip { position: relative; display: inline-flex; align-items: stretch; border: 1px solid color-mix(in srgb, var(--tc) 60%, transparent); background: color-mix(in srgb, var(--tc) 10%, transparent); color: var(--text); transition: background .25s ease, border-color .25s ease; } .tag-chip:hover { border-color: var(--tc); } .tag-chip.is-partial { background: color-mix(in srgb, var(--tc) 32%, transparent); border-color: var(--tc); } .tag-chip.is-full { background: var(--tc-full, var(--tc)); border-color: var(--tc-full, var(--tc)); color: var(--on-tc, var(--on-brass)); } /* Thème clair : laiton, or et rose sont trop pâles sous le texte ivoire ; variantes plus sombres (≥ 4,5:1), les autres couleurs passent déjà */ :root[data-theme="light"] .tc-laiton { --tc-full: var(--brass-ink); } :root[data-theme="light"] .tc-or { --tc-full: #7f5f0e; } :root[data-theme="light"] .tc-rose { --tc-full: #a84a68; } .tag-main { display: flex; align-items: center; gap: 9px; padding: 6px 12px; font-size: 13px; font-weight: 500; letter-spacing: .02em; cursor: var(--cur-hand); } .tag-main::before { content: ""; flex: none; width: 7px; height: 7px; rotate: 45deg; background: var(--tc); } .tag-chip.is-full .tag-main::before { background: var(--on-tc, var(--on-brass)); } /* Nombre de cartes de l'étiquette : un petit cartouche discret à droite du nom (teinte de l'étiquette), plus pâle à zéro ; à droite de la ligne dans la liste des sous-étiquettes */ .tag-n { flex: none; min-width: 20px; margin-left: 1px; padding: 2px 6px; text-align: center; font-size: 10.5px; font-weight: 500; line-height: 1.3; letter-spacing: .04em; font-variant-numeric: tabular-nums; background: color-mix(in srgb, var(--tc) 22%, transparent); border: 1px solid color-mix(in srgb, var(--tc) 38%, transparent); color: var(--text); opacity: .9; transition: background .25s ease, border-color .25s ease, opacity .25s ease; } .tag-n.is-zero { opacity: .45; background: none; } .tag-chip.is-full .tag-n { background: color-mix(in srgb, var(--on-tc, var(--on-brass)) 16%, transparent); border-color: color-mix(in srgb, var(--on-tc, var(--on-brass)) 38%, transparent); color: inherit; } .tag-chip.is-full .tag-n.is-zero { background: none; } .tag-sub .tag-n { margin-left: auto; } .tag-main input, .tag-sub input, .tag-mode input, .dup-toggle input, .ctf-opt input { position: absolute; opacity: 0; width: 0; height: 0; } /* cases masquées, dessinées en CSS */ .tag-chip:has(.tag-main input:focus-visible) { outline: 2px solid var(--brass); outline-offset: 2px; } .tag-caret { appearance: none; display: grid; place-items: center; width: 28px; border: 0; border-left: 1px solid color-mix(in srgb, var(--tc) 60%, transparent); background: none; color: inherit; cursor: var(--cur-hand); } .tag-chip.is-full .tag-caret { border-left-color: color-mix(in srgb, var(--on-tc, var(--on-brass)) 40%, transparent); } .tag-caret svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: rotate .25s ease; } .tag-caret[aria-expanded="true"] svg { rotate: 180deg; } .tag-menu { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; min-width: 100%; display: grid; gap: 2px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--tc); box-shadow: 0 14px 40px rgba(0, 0, 0, .3); color: var(--text); } .tag-menu[hidden] { display: none; } .tag-sub { display: flex; align-items: center; gap: 11px; padding: 8px 10px; font-size: 13.5px; white-space: nowrap; cursor: var(--cur-hand); } .tag-sub:hover { background: var(--band); } .tag-sub::before { content: ""; flex: none; width: 9px; height: 9px; margin: 0 2px; rotate: 45deg; border: 1px solid var(--tc); transition: background .2s ease; } .tag-sub:has(input:checked)::before { background: var(--tc); } .tag-sub:has(input:focus-visible) { outline: 2px solid var(--brass); outline-offset: -2px; } .tag-mode { display: inline-flex; align-items: center; gap: 8px; } .tag-mode label { cursor: var(--cur-hand); } .tag-mode span[title] { display: block; padding: 6px 11px; border: 1px solid var(--line); font-size: 12px; font-weight: 500; letter-spacing: .12em; color: var(--muted); transition: color .25s ease, border-color .25s ease, background .25s ease; } .tag-mode label:hover span[title] { border-color: var(--brass-line); } .tag-mode input:checked + span { color: var(--brass-ink); border-color: var(--brass); background: color-mix(in srgb, var(--brass) 14%, transparent); } .tag-mode label:has(input:focus-visible) { outline: 2px solid var(--brass); outline-offset: 2px; } /* Fenêtre de gestion des étiquettes : une ligne fine par étiquette, une sous-ligne par sous-étiquette */ .modal-box.tm-box { display: block; width: min(720px, 100%); } /* .modal-box (plus bas dans ce fichier) est une grille à deux colonnes : sans ce sélecteur plus précis, le contenu n'occupait que la première */ .tm h2 { margin: 0 0 8px; font-size: clamp(20px, 2.6vw, 26px); font-weight: 400; letter-spacing: .16em; text-transform: uppercase; } .tm-hint, .tm-empty, .tm-loading { margin: 0 0 12px; color: var(--muted); font-size: 14px; text-wrap: pretty; } .tm-hint-del { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-left: 2px solid #b8453f; background: var(--band); color: var(--text); font-size: 13.5px; } .tm-hint-del svg { flex: none; width: 16px; height: 16px; margin-top: 3px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .tm-error { margin: 0 0 12px; padding: 10px 14px; border-left: 2px solid #b8453f; background: var(--band); font-size: 13.5px; } .tm-error[hidden] { display: none; } .tm.is-busy { opacity: .6; pointer-events: none; } .tm-input { appearance: none; min-width: 0; border: 1px solid var(--line); background: var(--card); color: var(--text); padding: 10px 12px; font: inherit; font-size: 14px; transition: border-color .3s ease, background .3s ease; } .tm-input:focus-visible { outline: none; border-color: var(--brass); } .tm-new { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 18px 0 22px; padding-bottom: 20px; border-bottom: 1px solid var(--line); } .tm-new .tm-input { flex: 1 1 200px; } .tm-colorfield { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; } .tm-colors { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; } .tm-swatch { position: relative; display: grid; place-items: center; width: 26px; height: 26px; cursor: var(--cur-hand); } .tm-swatch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: var(--cur-hand); } .tm-swatch i { width: 14px; height: 14px; rotate: 45deg; background: var(--tc); transition: box-shadow .2s ease, scale .2s ease; } .tm-swatch input:checked + i { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--brass); } .tm-swatch input:focus-visible + i { outline: 2px solid var(--brass); outline-offset: 5px; } .tm-hexbox { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px; border: 1px solid var(--line); background: var(--card); transition: border-color .3s ease; } .tm-hexbox:focus-within { border-color: var(--brass); } .tm-hex-preview { flex: none; width: 12px; height: 12px; rotate: 45deg; background: var(--tc, transparent); border: 1px solid var(--line); } .tm-hex { appearance: none; width: 78px; border: 0; background: none; color: var(--text); font: inherit; font-size: 14px; outline: none; } .tm-hex::placeholder { color: var(--muted); opacity: .7; } .tm-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); } .tm-label { position: relative; border-bottom: 1px solid var(--line); } .tm-label::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--tc); } .tm-row { display: flex; align-items: center; gap: 6px; min-height: 46px; padding: 3px 6px 3px 12px; } .tm-row .tm-name, .tm-sub .tm-name { flex: 1 1 auto; border-color: transparent; background: none; padding: 8px; } .tm-row .tm-name { font-weight: 500; } .tm-row .tm-name:hover, .tm-sub .tm-name:hover { border-color: var(--line); } .tm-row .tm-name:focus-visible, .tm-sub .tm-name:focus-visible { border-color: var(--brass); background: var(--card); } .tm-dot, .tm-add, .tm-del, .tm-cancel { appearance: none; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid transparent; background: none; color: var(--muted); cursor: var(--cur-hand); transition: color .25s ease, border-color .25s ease, background .25s ease; } .tm-dot i { width: 12px; height: 12px; rotate: 45deg; background: var(--tc); transition: scale .2s ease, box-shadow .2s ease; } .tm-dot[aria-expanded="true"] i { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--brass); } .tm-add:hover, .tm-add:focus-visible, .tm-add[aria-expanded="true"], .tm-cancel:hover, .tm-cancel:focus-visible { color: var(--brass-ink); border-color: var(--brass-line); } .tm-del:hover, .tm-del:focus-visible { color: var(--text); border-color: #b8453f; } .tm-del.armed { color: #fff; background: #8a3530; border-color: #8a3530; } .tm-add svg, .tm-del svg, .tm-cancel svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .tm-colorpop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px 12px 12px 48px; background: var(--band); } .tm-colorpop[hidden], .tm-addsub[hidden] { display: none; } .tm-subs { list-style: none; margin: 0; padding: 0; } .tm-sub { position: relative; display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 2px 6px 2px 40px; border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); } .tm-sub::before { content: ""; position: absolute; left: 22px; top: 50%; width: 6px; height: 6px; margin-top: -3px; rotate: 45deg; background: var(--tc); } .tm-sub .tm-name { font-size: 13.5px; } .tm-grip { appearance: none; flex: none; display: grid; place-items: center; width: 26px; height: 32px; margin-left: -8px; border: 0; background: none; color: var(--muted); cursor: var(--cur-hand); touch-action: none; transition: color .2s ease; } .tm-grip svg { width: 16px; height: 16px; fill: currentColor; } .tm-grip:hover, .tm-grip:focus-visible { color: var(--brass-ink); } .tm-sub.is-dragging { opacity: .35; } .tm-ghost { position: fixed; z-index: 300; display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 2px 6px 2px 40px; background: var(--surface); border: 1px solid var(--brass); box-shadow: 0 12px 34px rgba(0, 0, 0, .45); pointer-events: none; opacity: .95; } .tm-ghost .tm-input { flex: 1; min-width: 0; border-color: transparent; background: none; } .tm-label.is-drop-target { background: color-mix(in srgb, var(--tc) 14%, transparent); outline: 2px dashed var(--tc); outline-offset: -2px; } html.is-dragging-tag, html.is-dragging-tag * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; } .tm-addsub { display: flex; align-items: center; gap: 8px; padding: 6px 6px 8px 44px; border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); } .tm-addsub .tm-input { flex: 1 1 auto; } /* Étiquettes d'une carte, dans sa fenêtre de détail : un champ (les étiquettes posées) + une liste déroulante avec recherche */ .ct { margin-top: 26px; } .ct-title { margin: 0 0 10px; font-size: 11.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .ct-empty { margin: 0; font-size: 13.5px; color: var(--muted); } .ct-error { margin: 10px 0 0; font-size: 13px; color: var(--err-ink); } .ctf-field { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 44px; padding: 5px 8px; border: 1px solid var(--line); background: var(--card); cursor: var(--cur-hand); transition: border-color .3s ease; } .ctf-field:hover { border-color: var(--brass-line); } .ctf-field.is-open { border-color: var(--brass); } .ctf-chips { display: contents; } .ctf-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 3px 2px 10px; border: 1px solid var(--tc); background: color-mix(in srgb, var(--tc) 16%, transparent); font-size: 12.5px; } .ctf-x { appearance: none; display: grid; place-items: center; width: 20px; height: 20px; border: 0; background: none; color: var(--muted); cursor: var(--cur-hand); } .ctf-x:hover, .ctf-x:focus-visible { color: var(--text); } .ctf-x svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .ctf-open { appearance: none; flex: 1 1 100px; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 32px; padding: 0 4px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 14px; text-align: left; cursor: var(--cur-hand); } .ctf-chips:not(:empty) + .ctf-open .ctf-ph { display: none; } .ctf-open svg { width: 12px; height: 12px; margin-left: auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: rotate .25s ease; } .ctf-field.is-open .ctf-open svg { rotate: 180deg; } .ctf-open:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; } .ctf-panel { border: 1px solid var(--brass); border-top: 0; background: var(--surface); } .ctf-panel[hidden] { display: none; } .ctf-search { appearance: none; width: 100%; padding: 11px 14px; border: 0; border-bottom: 1px solid var(--line); background: var(--card); color: var(--text); font: inherit; font-size: 14px; } .ctf-search:focus-visible { outline: none; } .ctf-list, .ctf-subs { list-style: none; margin: 0; padding: 0; } .ctf-list { max-height: 210px; overflow-y: auto; padding: 4px 0; } .ctf-subs { padding-left: 22px; } .ctf-item[hidden] { display: none; } .ctf-opt { display: flex; align-items: center; gap: 11px; padding: 8px 14px; font-size: 14px; cursor: var(--cur-hand); } .ctf-opt:hover { background: var(--band); } .ctf-chip::before { content: ""; flex: none; width: 7px; height: 7px; margin-right: 4px; rotate: 45deg; background: var(--tc); } .ctf-opt::before { content: ""; flex: none; width: 9px; height: 9px; rotate: 45deg; border: 1px solid var(--tc); transition: background .2s ease; } .ctf-opt:has(input:checked)::before { background: var(--tc); } .ctf-opt:has(input:focus-visible) { outline: 2px solid var(--brass); outline-offset: -2px; } .ctf-none { margin: 0; padding: 12px 14px; font-size: 13.5px; color: var(--muted); } .ctf-none[hidden] { display: none; } /* Fenêtre de détail d'une carte (public/assets/card-modal.js) */ .modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; overflow-y: auto; overscroll-behavior: contain; background: var(--overlay); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .modal[hidden] { display: none; } html.modal-open { overflow: hidden; } .modal-box { position: relative; display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: center; width: min(880px, 100%); padding: clamp(28px, 4vw, 44px); background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--brass); box-shadow: 0 24px 80px rgba(0, 0, 0, .35); } .modal-close { appearance: none; position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); background: none; color: var(--muted); cursor: var(--cur-hand); transition: color .3s ease, border-color .3s ease; } .modal-close:hover, .modal-close:focus-visible { color: var(--text); border-color: var(--brass-line); } .modal-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; } .modal-card .card { width: 100%; cursor: var(--cur-default); } .modal-card .card:hover { translate: none; } .modal-info { min-width: 0; padding-right: 8px; overflow-wrap: break-word; } /* un mot très long d'une description (nom chimique, adresse…) passe à la ligne au lieu de faire défiler la fenêtre de côté */ .modal-info h2, .cm-head h2 { margin: 0 0 14px; font-size: clamp(22px, 3vw, 30px); font-weight: 400; line-height: 1.2; overflow-wrap: anywhere; } .modal-desc { margin: 0 0 26px; color: var(--muted); text-wrap: pretty; } .modal-desc.none { font-style: italic; opacity: .7; } .modal-list { margin: 0 0 28px; border-top: 1px solid var(--line); } .modal-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); } .modal-row dt { font-size: 11.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .modal-row dd { margin: 0; text-align: right; font-weight: 500; } .modal-rar { display: inline-flex; align-items: center; gap: 10px; } .modal-rar i { width: 9px; height: 9px; rotate: 45deg; background: var(--rc); } .modal-rar.r7 i { background: conic-gradient(from 20deg, #e58fb0, #e9c26f, #7fd6a8, #7fb6ec, #b791ef, #e58fb0); } .modal-link { font-size: 14px; color: var(--brass-ink); } @media (max-width: 680px) { .coll-stats > div { padding: 0 16px; } .coll-search { max-width: none; } .coll-filters { justify-content: flex-start; } .coll-filters .tool { width: 100%; } #tri { min-width: 0; } .multi { min-width: 0; } .modal-box { grid-template-columns: minmax(0, 1fr); justify-items: center; padding-top: 52px; } .modal-card { width: min(260px, 70vw); } .modal-info { width: 100%; padding-right: 0; } } .qty { position: absolute; z-index: 3; top: 10px; right: 10px; min-width: 28px; height: 28px; padding: 0 7px; display: grid; place-items: center; background: var(--brass-ink); color: var(--on-brass); font-size: 12.5px; font-weight: 600; letter-spacing: .02em; font-variant-numeric: tabular-nums; } .empty-coll { max-width: 440px; margin: 0 auto; padding: 56px 24px; text-align: center; color: var(--muted); border: 1px solid var(--line); } .empty-coll p { margin: 0 0 26px; text-wrap: pretty; } /* Entre 761 et 1100 px : la navigation du centre est remplacée par un menu burger (en dessous de 761 px, c'est la barre du bas) */ .nav-burger { display: none; } .nav-burger .acct-dropdown { left: auto; right: 0; translate: none; } .menu-link .ic { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--brass-ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } @media (max-width: 1100px) { .top-in { grid-template-columns: 1fr auto; } .top-nav { display: none; } .top-end { grid-column: 2; } } @media (min-width: 761px) and (max-width: 1100px) { .nav-burger { display: block; } } @media (max-width: 760px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .cards:not(.collection) > .card:last-child:nth-child(odd) { grid-column: 1 / -1; width: calc(50% - 6px); margin-inline: auto; } /* paquet : la 5e carte seule, au centre */ .eyebrow { gap: 10px; font-size: 11px; letter-spacing: .2em; } .eyebrow::before, .eyebrow::after { width: 16px; } .brand { font-size: 15px; letter-spacing: .2em; gap: 10px; } .brand .mark { width: 18px; height: 18px; } .brand .mark::after { inset: 7px; } /* Non connecté·e : les deux pastilles cèdent la place à un petit menu burger. */ .auth-pills { display: none; } .burger-menu { display: inline-flex; } } /* Barre du bas (connecté·e) : sur tous les mobiles — écrans étroits (≤760px), mais aussi téléphones plus larges ou tenus en paysage et tablettes (écran tactile, sans survol, jusqu'à 1100px), qui n'ont pas la place ou l'habitude d'une navigation en haut. Le menu burger de l'en-tête (761–1100px) est alors inutile : il ne reste que pour les écrans à souris. */ @media (max-width: 760px), (hover: none) and (pointer: coarse) and (max-width: 1100px) { .nav-burger { display: none; } /* Connecté·e : la navigation et le bouton « Compte » du haut cèdent la place à la barre fixée en bas (.bottom-nav). Largeur explicite (pas seulement left/right:0) : sinon un conteneur flex en position fixe se redimensionne sur le contenu de ses enfants et déborde de l'écran au lieu de se laisser contraindre par le viewport. */ .top-acct { display: none; } body:has(.bottom-nav) .top { display: none; } /* l'en-tête (logo, thème, aide) est masqué : le logo est dans la barre du bas, le thème et l'aide dans le menu Compte */ .bottom-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; width: 100%; min-width: 0; z-index: 55; background: var(--top-bg); border-top: 1px solid var(--brass-line); /* 64 px, plus la zone sûre du bas des iPhone (barre d'accueil) et les encoches en paysage */ height: calc(64px + env(safe-area-inset-bottom, 0px)); padding: 0 max(14px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(14px, env(safe-area-inset-left, 0px)); -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15); } body:has(.bottom-nav) { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); } .bn-brand { display: inline-flex; flex: none; } .bn-brand .mark { width: 18px; height: 18px; } .bn-brand .mark::after { inset: 7px; } /* Les icônes occupent tout l'espace entre le logo et le bouton Compte, à écarts égaux : l'écart suit la largeur du téléphone, et la barre (gap de .bottom-nav) les tient toujours à distance du logo et du bouton Compte, quelle que soit la largeur */ .bn-links { display: flex; flex: 1 1 auto; justify-content: space-evenly; gap: 0; min-width: 0; } /* Icônes seules : les noms des pages restent lus par les lecteurs d'écran (libellé masqué visuellement), zone tactile de 44 px (moins sur les très petits écrans) */ .bottom-nav .nav-link { flex: 0 1 44px; min-width: 0; padding: 12px 0; justify-content: center; } .bottom-nav .nav-link .ic { width: 22px; height: 22px; } .bottom-nav .nav-link[aria-current="page"]::after { opacity: 1; } /* la page courante garde son trait laiton */ .bottom-nav .nav-link:active::after, .bottom-nav .nav-link.is-go::after { opacity: 1; transition-duration: .08s; } /* le trait laiton dès l'appui, pour chaque lien (site.js le garde jusqu'à la page suivante) */ .bottom-nav .nav-link .lb { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .bottom-nav .acct-pill.avatar-btn { padding: 5px; } .bottom-nav .acct-pill .avatar-ic { width: 20px; height: 20px; } /* Le bouton Compte est au bord droit : le menu s'y aligne et s'ouvre vers le haut, sans jamais sortir de l'écran */ .bottom-nav .acct-dropdown { top: auto; bottom: calc(100% + 10px); left: auto; right: 0; translate: none; max-width: calc(100vw - 28px); } } /* ---------- Styles de carte « Full Art » (.fa.fa4, l'image occupe toute la carte) et « Extended Art » (.xa, l'image occupe le haut, jusqu'à la ligne de séparation) ---------- Repris tel quel de l'ancienne maquette des cartes (angles à gradins de l'image ajoutés à la règle « Angles en gradins » ci-dessus, via « .fa .card-img »). Le style est ajouté au tirage d'un paquet par Packs.php, au plus une carte par paquet, en dernière position, dans Styles::EXTENDED (xa) ou Styles::FULL (fa). */ .card-front.fa { padding: 0; color: #f4efe2; --veil: color-mix(in srgb, var(--rc) 26%, #070b09); } .fa .card-img { position: absolute; inset: var(--f); flex: none; background: #0d100f; } .fa .card-img img { object-position: 50% 32%; } .fa .card-img::after { content: ""; position: absolute; inset: 0; pointer-events: none; } .fa .card-body { position: absolute; left: var(--f); right: var(--f); bottom: var(--f); flex: none; min-height: 0; justify-content: flex-end; padding: 0 6cqw 6cqw; gap: 1.6cqw; } .fa .card-body::before { display: none; } .fa .card-body h3 { text-shadow: 0 1px 10px rgba(0, 0, 0, .55); } .fa .desc { color: rgba(244, 239, 226, .8); text-shadow: 0 1px 8px rgba(0, 0, 0, .6); } .fa .tag { color: color-mix(in srgb, var(--rc) 55%, #fff); } .fa4 .tag { white-space: normal; letter-spacing: .16em; padding-left: .16em; text-wrap: balance; } /* « Inhabituelle - Full Art » : deux lignes sur une carte étroite */ .fa .vw { color: rgba(244, 239, 226, .72); } /* Full Art : l'éventail se lève du bas de l'image, la rareté se lit dans une jauge de sept losanges, le nom du style est ajouté après le nom de la rareté (« Légendaire - Full Art »). */ .fa4 .card-img::before { content: ""; position: absolute; z-index: 1; left: 50%; bottom: -6%; width: 170%; aspect-ratio: 2 / 1; translate: -50% 0; background: #fff; opacity: .22; -webkit-mask: var(--fan) center / 100% 100% no-repeat; mask: var(--fan) center / 100% 100% no-repeat; pointer-events: none; } .fa4 .card-img::after { background: linear-gradient(180deg, rgba(7, 11, 9, .5) 0%, rgba(7, 11, 9, 0) 26%, rgba(7, 11, 9, 0) 34%, color-mix(in srgb, var(--veil) 72%, transparent) 66%, color-mix(in srgb, var(--veil) 96%, transparent) 100%); } .fa4 .gauge { display: flex; gap: 1.8cqw; margin: .6cqw 0; } .fa4 .gauge i { width: 2.4cqw; height: 2.4cqw; rotate: 45deg; border: 1px solid color-mix(in srgb, var(--rc) 70%, #fff); } .fa4 .gauge i.on { background: color-mix(in srgb, var(--rc) 70%, #fff); } /* Extended Art : même agencement que le style Normal (même ligne de séparation, même zone de texte), mais l'image va jusqu'au cadre (haut, gauche, droite), sans marge, et s'arrête à la ligne de séparation : le bloc de texte garde le fond opaque de la carte. Ce style n'utilise pas la classe .fa. */ .card-front.xa { padding: var(--f) var(--f) var(--p); --xa-b: calc(var(--p) + (140cqw - 2 * var(--p)) * .56); } .xa .card-img { flex: 0 0 calc(var(--xa-b) - var(--f)); } .xa .card-body { margin: 0 calc(var(--p) - var(--f)); } .xa-sep { position: absolute; z-index: 2; left: calc(var(--f) + 9cqw); right: calc(var(--f) + 9cqw); top: var(--xa-b); translate: 0 -50%; pointer-events: none; } /* Images à fond transparent (schémas, logos…) : posées par site.js (classe .contain sur l'image), elles sont montrées entières dans l'encart, sur un fond clair, car elles sont dessinées pour un fond blanc. */ .card-img:has(img.contain) { background: #f6f2e6; } .card-img img.contain { inset: 4%; width: 92%; height: 92%; object-fit: contain; object-position: 50% 50%; } .card-front:not(.fa) .card-img img.contain.portrait { object-position: 50% 50%; } .fa4 .card-img:has(img.contain)::after { background: linear-gradient(180deg, transparent 50%, color-mix(in srgb, var(--veil) 72%, transparent) 76%, color-mix(in srgb, var(--veil) 96%, transparent) 100%); } .fa4 .card-img img.contain { inset: 4% 4% 38%; height: 58%; } /* Les éléments des listes déroulantes ne se sélectionnent pas comme du texte (clics répétés, glissements) */ .acct-dropdown, .multi summary, .multi-panel, .tag-chip, .tag-menu, .ctf-field, .ctf-chip, .ctf-panel, .ctf-opt, .tm-swatch, .tm-dot, .tm-add, .tm-del { -webkit-user-select: none; user-select: none; } .ctf-search { -webkit-user-select: text; user-select: text; } /* Fiche d'une carte sur ordinateur (card-modal.js), trois colonnes sous le titre : la carte, ses informations, puis les actions (édition, favoris, recyclage, atelier, échange, étiquettes, signalement) */ .modal-box.cm-box { grid-template-columns: minmax(0, 270px) minmax(0, 1fr) minmax(0, 310px); grid-template-areas: "head head head" "card info side"; align-items: start; width: min(1140px, 100%); gap: clamp(20px, 2.6vw, 32px) clamp(24px, 3.4vw, 44px); } .cm-head { grid-area: head; min-width: 0; padding: 0 52px 16px; border-bottom: 1px solid var(--line); text-align: center; } .cm-head h2 { margin: 0; } .cm-box .modal-info { grid-area: info; padding-right: 0; } .cm-box .modal-info .modal-list { margin-bottom: 20px; } .modal-side { grid-area: side; min-width: 0; } .modal-side > :first-child { margin-top: 0; } .modal-side .modal-btns { flex-direction: column; align-items: stretch; margin-top: 14px; } .modal-side .modal-btns > .fav-btn, .modal-side .modal-btns > .rc-btn { width: 100%; justify-content: flex-start; } .modal-side .modal-btns > .rc-btn { justify-content: space-between; } @media (max-width: 1000px) { .modal-box.cm-box { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); grid-template-areas: "head head" "card info" "side side"; } } @media (max-width: 680px) { .modal-box.cm-box { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "card" "info" "side"; justify-items: center; padding-top: 52px; } .cm-head, .cm-box .modal-info, .modal-side, .modal-left { width: 100%; } .cm-head { padding: 0 44px 12px; } .modal-side .modal-btns { flex-direction: row; align-items: center; } .modal-side .modal-btns > .fav-btn, .modal-side .modal-btns > .rc-btn { width: auto; } } /* Favoris : bouton étoile dans la fenêtre d'une carte, repère sur la carte, et filtre de la collection */ .fav-star { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; transition: fill .25s ease, scale .25s var(--ease); } .fav-error { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--err-ink); } /* étoile des cartes favorites : à droite du nombre de vues, de la taille de l'œil, en laiton avec une légère ombre (image et non masque : un masque couperait l'ombre) ; en thème clair, les cartes sont teintées : un laiton plus vif cerné d'un trait sombre reste lisible */ .card { --star: url("data:image/svg+xml,"); } :root[data-theme="light"] .card { --star: url("data:image/svg+xml,"); } .fav-toggle .fav-star { width: 16px; height: 16px; color: var(--brass); } .fav-toggle:has(input:checked) .fav-star { fill: currentColor; } .card[data-fav="1"] .vw { gap: .6em; } .card[data-fav="1"] .vw::after { content: ""; flex: none; width: 1.05em; height: 1.05em; background: var(--star) center / contain no-repeat; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .6)); translate: 0 -.05em; } /* Carte d'un autre joueur qui est dans MA liste de souhait : un petit cœur blanc cerclé de sombre (lisible sur tous les fonds), là où l'étoile des favoris s'affiche pour mes cartes. Pas dans l'onglet « Ma liste de souhait » lui-même, où toutes les cartes y sont. */ .card[data-wish="1"] .vw { gap: .6em; } .card[data-wish="1"] .vw::after { content: ""; flex: none; width: 1.4em; height: 1.4em; background: #fff; -webkit-mask: url("data:image/svg+xml,") center / contain no-repeat; mask: url("data:image/svg+xml,") center / contain no-repeat; filter: drop-shadow(0 0 .7px rgba(0, 0, 0, .9)) drop-shadow(0 1px 1.5px rgba(0, 0, 0, .55)); translate: 0 -.05em; } #coll-form[data-tab="souhaits"] ~ * .card[data-wish="1"] .vw { gap: .32em; } /* la liste est affichée APRÈS le formulaire, pas dedans */ #coll-form[data-tab="souhaits"] ~ * .card[data-wish="1"] .vw::after { content: none; } /* ---------- Aide : icône « ? » de l'en-tête (losange comme .theme), badge de nouveauté, fenêtre à trois onglets ---------- */ /* transform: scale() plutôt que la propriété scale seule : évite les écarts de composition/origine entre moteurs (notamment un grossissement visiblement décentré ou saccadé sous Firefox sur le badge de la cloche) */ @keyframes help-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } } .modal-box.help-box { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: min(1320px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); padding: clamp(24px, 3.5vw, 36px) clamp(20px, 3.5vw, 52px) 0; } .help-head { flex: none; padding-right: 44px; } .help-head h2 { margin: 0; font-size: clamp(20px, 2.6vw, 26px); font-weight: 400; letter-spacing: .16em; text-transform: uppercase; } .help-version { margin: 6px 0 0; font-size: 12.5px; letter-spacing: .06em; color: var(--muted); } .help-tabs { flex: none; display: flex; gap: 4px; margin: 20px 0 0; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; } .help-tab { appearance: none; flex: none; position: relative; padding: 12px 16px; border: 0; background: none; color: var(--muted); font: 500 12px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; cursor: var(--cur-hand); -webkit-user-select: none; user-select: none; transition: color .3s ease; } .help-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--brass); opacity: 0; transition: opacity .3s ease; } .help-tab:hover, .help-tab:focus-visible { color: var(--text); } .help-tab:focus-visible { outline: 2px solid var(--brass); outline-offset: -2px; } .help-tab[aria-selected="true"] { color: var(--brass-ink); } .help-tab[aria-selected="true"]::after { opacity: 1; } .help-panel { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; margin-left: -8px; padding: 24px 10px 32px 8px; overscroll-behavior: contain; overflow-wrap: break-word; } .help-panel[hidden] { display: none; } .help-panel:focus-visible { outline: none; } .help-panel h3 { margin: 0 0 10px; font-size: 18px; font-weight: 500; letter-spacing: .02em; text-wrap: balance; } .help-panel p, .help-panel li { text-wrap: pretty; } .help-panel p { margin: 0 0 12px; } @media (min-width: 900px) { .news-item, .cl-item { max-width: 1000px; margin-inline: auto; } .help-panel { font-size: 16.5px; line-height: 1.68; } .help-panel .news-date, .help-panel .hw-note { line-height: 1.4; } } .help-empty { color: var(--muted); } .news-item, .cl-item { padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid var(--line); } .news-item:last-child, .cl-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } .help-panel .news-date { margin: 0 0 6px; font-size: 11.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .help-goto { margin-top: 4px; } .cl-item header { margin-bottom: 8px; } .cl-item h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 4px; } .cl-version { padding: 3px 10px; border: 1px solid var(--brass); color: var(--brass-ink); font-size: 14px; font-weight: 600; letter-spacing: .08em; font-variant-numeric: tabular-nums; } .cl-item.is-target { animation: help-flash 1.6s ease-out; } @keyframes help-flash { 0% { background: color-mix(in srgb, var(--brass) 22%, transparent); } 100% { background: transparent; } } .cl-item h4 { margin: 18px 0 8px; font-size: 11.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--brass-ink); } .cl-item ul, .hw-list { margin: 0; padding: 0; list-style: none; } .cl-item li, .hw-list li { position: relative; padding: 0 0 8px 20px; } .cl-item li::before, .hw-list li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 6px; height: 6px; rotate: 45deg; background: var(--brass); } .hw-sec:last-child { margin-bottom: 0; } /* « Comment ça marche ? » : un sommaire collé à gauche (ordinateur) et des sections plus aérées, avec une largeur de texte confortable */ .hw-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 20px 48px; align-items: start; max-width: 1120px; margin-inline: auto; } .hw-toc { position: sticky; top: 0; max-height: calc(100vh - 250px); max-height: calc(100dvh - 250px); overflow-y: auto; padding: 4px 4px 16px 0; font-size: 14px; line-height: 1.4; overscroll-behavior: contain; } .hw-toc summary { display: block; margin: 0 0 12px; font-size: 11.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); list-style: none; cursor: default; } .hw-toc summary::-webkit-details-marker { display: none; } .hw-toc ol { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--line); } .hw-toc li { margin: 0; } .hw-toc a { display: block; padding: 7px 10px 7px 14px; margin-left: -1px; border-left: 2px solid transparent; color: var(--muted); text-decoration: none; transition: color .25s ease, border-color .25s ease, background .25s ease; } .hw-toc a:hover, .hw-toc a:focus-visible { color: var(--text); background: color-mix(in srgb, var(--brass) 8%, transparent); } .hw-toc a:focus-visible { outline: 2px solid var(--brass); outline-offset: -2px; } .hw-toc a.is-current { color: var(--brass-ink); border-left-color: var(--brass); } .hw-main { min-width: 0; } .hw-main .hw-sec { margin-bottom: 58px; scroll-margin-top: 12px; } .hw-main .hw-sec:last-child { margin-bottom: 8px; } .hw-main .hw-sec h3 { margin-bottom: 22px; } .hw-main .hw-sec > p, .hw-main .hw-sec > ul, .hw-main .hw-sec > ol { max-width: 88ch; } .hw-main .hw-sec > p { margin-bottom: 18px; } .hw-main .hw-list li { padding-bottom: 11px; } /* Onglet « FAQ » de l'aide (content/faq.php) : des questions en spoilers (
), regroupées par thème */ .faq { max-width: 1000px; margin-inline: auto; } .faq-lead { margin: 0 0 26px; color: var(--muted); } .faq-group { margin: 0 0 40px; } .faq-group:last-child { margin-bottom: 8px; } .faq-group > h3 { margin: 0 0 14px; font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--brass-ink); } .faq-q { border-bottom: 1px solid var(--line); } .faq-q:first-of-type { border-top: 1px solid var(--line); } .faq-q > summary { position: relative; display: block; padding: 16px 44px 16px 4px; font-weight: 500; line-height: 1.45; cursor: var(--cur-hand); list-style: none; transition: color .25s ease, background .25s ease; -webkit-tap-highlight-color: transparent; } .faq-q > summary::-webkit-details-marker { display: none; } .faq-q > summary::after { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border: solid var(--brass); border-width: 0 1.6px 1.6px 0; rotate: 45deg; transition: rotate .25s ease, margin .25s ease; } .faq-q > summary:hover, .faq-q > summary:focus-visible { color: var(--brass-ink); background: color-mix(in srgb, var(--brass) 6%, transparent); } .faq-q > summary:focus-visible { outline: 2px solid var(--brass); outline-offset: -2px; } .faq-q[open] > summary { color: var(--brass-ink); } .faq-q[open] > summary::after { rotate: 225deg; margin-top: -2px; } .faq-a { padding: 2px 4px 18px; max-width: 84ch; } .faq-a > :last-child { margin-bottom: 0; } .faq-a p { margin: 0 0 12px; } .faq-a .help-goto { margin-top: 2px; } /* moins d'animations (boot.js, docs/animations.md) */ :where(:root[data-motion="reduce"]) .faq-q > summary, :where(:root[data-motion="reduce"]) .faq-q > summary::after { transition: none; } .hw-up { margin: 4px 0 0; text-align: right; } .hw-up a { font-size: 11.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-decoration: none; } .hw-up a:hover, .hw-up a:focus-visible { color: var(--brass-ink); } @media (min-width: 900px) { .hw-up { display: none; } } @media (max-width: 899px) { .hw-layout { display: block; } .hw-toc { position: static; max-height: none; margin: 0 0 28px; padding: 0; border: 1px solid var(--line); border-top: 2px solid var(--brass); } .hw-toc summary { display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 14px 16px; cursor: var(--cur-hand); } .hw-toc summary::after { content: ""; width: 8px; height: 8px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; rotate: 45deg; translate: 0 -2px; transition: rotate .25s ease; } .hw-toc[open] summary::after { rotate: 225deg; translate: 0 2px; } .hw-toc ol { border-left: 0; padding: 0 8px 10px; } .hw-toc a { padding: 10px 10px; } .hw-main .hw-sec { margin-bottom: 44px; } } .hw-rar { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); } .hw-rar li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; } .hw-rname { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; } .hw-rname i { width: 9px; height: 9px; rotate: 45deg; background: var(--rc); } .hw-rar .r7 .hw-rname i { background: conic-gradient(from 20deg, #e58fb0, #e9c26f, #7fd6a8, #7fb6ec, #b791ef, #e58fb0); } .hw-rshare { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } /* Téléphone : les onglets deviennent une liste à puces en losange (losange plein pour la section ouverte) */ @media (max-width: 680px) { .modal-box.help-box { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); padding-top: 56px; } .help-head { padding-right: 0; } .help-tabs { flex-direction: column; gap: 0; margin-top: 14px; padding-bottom: 8px; overflow: visible; } .help-tab { display: flex; align-items: center; gap: 14px; width: 100%; padding: 9px 2px; font-size: 11.5px; letter-spacing: .14em; text-align: left; } .help-tab::before { content: ""; flex: none; width: 7px; height: 7px; border: 1px solid var(--brass-line); rotate: 45deg; transition: background .3s ease, border-color .3s ease; } .help-tab::after { display: none; } .help-tab[aria-selected="true"]::before { background: var(--brass); border-color: var(--brass); } } /* Barres de défilement de TOUT le site, à l'image du thème : filet fin, curseur laiton à bouts carrés (page, fenêtres, listes déroulantes, champs de texte…). Chrome/Safari/Edge les dessinent avec ::-webkit-scrollbar ; Firefox n'a que scrollbar-width et scrollbar-color (Chrome, lui, ignorerait ::-webkit-scrollbar dès que ces deux propriétés existent : d'où le @supports qui les remet à « auto » pour lui). Les propriétés étant héritées, les poser sur :root suffit. */ :root { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--brass) 60%, transparent) transparent; } @supports selector(::-webkit-scrollbar) { :root { scrollbar-width: auto; scrollbar-color: auto; } ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-track:vertical { background: linear-gradient(to right, transparent 5px, var(--line) 5px, var(--line) 6px, transparent 6px); } ::-webkit-scrollbar-track:horizontal { background: linear-gradient(to bottom, transparent 5px, var(--line) 5px, var(--line) 6px, transparent 6px); } ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--brass) 60%, transparent); border: 4px solid transparent; background-clip: padding-box; border-radius: 0; transition: background .3s ease; } ::-webkit-scrollbar-thumb:hover { background: var(--brass); background-clip: padding-box; } ::-webkit-scrollbar-thumb:active { background: var(--brass-ink); background-clip: padding-box; } ::-webkit-scrollbar-button, ::-webkit-scrollbar-corner { display: none; } } /* « Comment ça marche ? » : titres de section bien visibles (grande taille, laiton, losange et filet) et tableau des chances */ .hw-sec h3 { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--brass-line); font-size: clamp(21px, 2.8vw, 26px); font-weight: 500; letter-spacing: .03em; line-height: 1.2; color: var(--brass-ink); text-wrap: balance; } .hw-sec h3::before { content: ""; flex: none; width: 11px; height: 11px; rotate: 45deg; background: var(--brass); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brass) 22%, transparent); } .hw-sec { margin-bottom: 38px; } .hw-note { font-size: 13.5px; color: var(--muted); } .hw-tablewrap { margin: 16px 0 14px; overflow-x: auto; } .hw-odds { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; } .hw-odds th, .hw-odds td { padding: 10px 10px; border-bottom: 1px solid var(--line); text-align: right; vertical-align: middle; } .hw-odds thead th { font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-align: center; vertical-align: bottom; } .hw-odds thead tr:first-child th { border-bottom: 0; padding-bottom: 4px; } .hw-odds thead th[colspan], .hw-odds thead tr:first-child th[rowspan] { border-bottom: 1px solid var(--line); } /* le filet sous l’en-tête court sur toute la largeur, cellules sur deux rangées comprises */ .hw-odds thead tr:first-child th[rowspan] { padding-bottom: 10px; } /* même espace au-dessus du filet que les titres de la deuxième rangée */ .hw-odds thead th[rowspan] { text-align: left; } .hw-odds thead th[rowspan]:nth-child(2) { text-align: right; } .hw-odds tbody th { text-align: left; font-weight: 500; } .hw-odds td b { display: block; font-weight: 500; } .hw-odds td small { display: block; font-size: 11.5px; color: var(--muted); } .hw-odds tbody tr:hover { background: var(--band); } /* ---------- Petits écrans, écrans tactiles, survol, animations réduites ---------- Regroupés ici, après tout le reste : ces règles doivent l'emporter sur celles des composants ci-dessus. */ /* Téléphone : le texte des boutons principaux peut passer à la ligne (centré), l'espacement des lettres se resserre */ @media (max-width: 480px) { .btn { max-width: 100%; gap: 12px; padding: 15px 18px; justify-content: center; white-space: normal; text-align: center; line-height: 1.35; letter-spacing: .14em; } .btn .lb { min-width: 0; } .tm-colorpop { padding: 8px 10px 12px 16px; } .coll-stats { flex-wrap: wrap; row-gap: 14px; } .coll-stats > div { padding: 0 12px; } .coll-stats dt { letter-spacing: .1em; } } /* Très petits écrans (320–380 px) : en-tête et losanges de rareté un peu plus serrés, pour tenir sans déborder */ @media (max-width: 380px) { .top-end { gap: 10px; } .brand { gap: 8px; letter-spacing: .16em; } .rar-picker { gap: 2px; padding: 0; } .rar-opt { width: 32px; } } /* Survol : seulement avec une souris. Au doigt, :hover « colle » après le toucher (carte soulevée, éventail levé…). */ @media (hover: hover) { .theme:hover { color: var(--text); box-shadow: inset 0 0 0 var(--edge) var(--brass-line); } .btn:hover:not(:disabled) { filter: brightness(1.16); } .btn:hover:not(:disabled)::after { opacity: .36; translate: -50% 0; } .btn:hover:not(:disabled) .dm { background: var(--on-brass); border-color: var(--on-brass); scale: 1.3; } .btn:hover:not(:disabled) .dm:first-child { translate: -6px 0; } .btn:hover:not(:disabled) .dm:last-child { translate: 6px 0; } .btn:active:not(:disabled) { filter: brightness(.95); } /* après le survol, comme plus haut, pour qu'un clic l'emporte */ .card:hover { translate: 0 -5px; } .card-front:hover .card-img img { transform: scale(1.04); } .rar-opt:hover i, .tm-swatch:hover i { scale: 1.15; } .tm-dot:hover i { scale: 1.25; } } /* Écrans tactiles */ @media (pointer: coarse) { /* iOS agrandit la page dès qu'on touche un champ écrit à moins de 16 px */ .field input, .coll-search input, .pg-input, .sel select, .tm-input, .tm-row .tm-name, .tm-sub .tm-name, .tm-hex, .ctf-search, textarea { font-size: 16px; } /* Cibles d'au moins 40 px. Losanges thème et « ? » : zone invisible de 44 px, remise droite (le bouton est tourné à 45°) */ .theme { position: relative; } .theme::before { content: ""; position: absolute; inset: -7px; rotate: -45deg; } .acct-pill.icon-only { padding: 11px; } .acct-pill.avatar-btn { padding: 7px; } .bottom-nav .acct-pill.avatar-btn { padding: 10px; } .modal-close { width: 44px; height: 44px; } .ctf-x { position: relative; width: 28px; height: 28px; } .ctf-x::before { content: ""; position: absolute; inset: -6px; } .tm-swatch { width: 36px; height: 40px; } .tm-grip { width: 34px; height: 40px; } .tm-dot, .tm-add, .tm-del, .tm-cancel { width: 40px; height: 40px; } .tag-main { padding-block: 10px; } .tag-caret { width: 40px; } .tag-sub, .ctf-opt { padding-block: 11px; } .tag-mode span[title] { padding: 10px 13px; } .help-tab { padding-block: 16px; } @media (max-width: 680px) { .help-tab { padding-block: 11px; } } .pg { min-width: 40px; height: 40px; } .pg-input { height: 40px; } .rar-opt input { inset: 0 -3px; } /* la case invisible couvre aussi l'écart entre deux losanges */ /* Poubelle d'une notification (24 px) et boutons ami/blocage du menu cloche (32 px) : zone invisible remise à 40 px, sans agrandir l'icône elle-même (mise en page compacte du menu et de la liste des notifications). */ .nt-del::before { content: ""; position: absolute; inset: -8px; } .social-dd .fr-btn { position: relative; } .social-dd .fr-btn::before { content: ""; position: absolute; inset: -4px 0; } /* pas d'extension horizontale : gap de 2px entre boutons voisins (.fr-actions) */ /* Croix du bandeau Discord (26 px), « − » d'une carte d'échange (26 px), croix d'un emplacement de la vitrine (22 px), « changer de mission » (36 px) */ .dc-close::before, .tr-minus::before, .vt-slot .vt-x::before, .jx-swap::before { content: ""; position: absolute; inset: -8px; } .jx-swap { position: relative; } } @media (pointer: coarse) and (max-width: 480px) { /* barre de pages sur téléphone : boutons de 36 px pour tenir sur une ligne, zone de toucher élargie sur les écarts */ .pg { position: relative; min-width: 36px; } .pg::before { content: ""; position: absolute; inset: 0 -2px; } } /* Animations réduites : aucune animation en boucle, pas de mouvement au survol ni de défilement animé */ /* moins d'animations (boot.js, docs/animations.md) */ html:where([data-motion="reduce"]) { scroll-behavior: auto; } :where(:root[data-motion="reduce"]) .card, :where(:root[data-motion="reduce"]) .card-in, :where(:root[data-motion="reduce"]) .card-img img, :where(:root[data-motion="reduce"]) .nav-link, :where(:root[data-motion="reduce"]) .nav-link::after, :where(:root[data-motion="reduce"]) .slot, :where(:root[data-motion="reduce"]) .btn, :where(:root[data-motion="reduce"]) .btn::after, :where(:root[data-motion="reduce"]) .btn .dm { transition: none; } :where(:root[data-motion="reduce"]) .card.r7 .card-front { animation: none; } :where(:root[data-motion="reduce"]) .card.r5::after, :where(:root[data-motion="reduce"]) .card.r6::after, :where(:root[data-motion="reduce"]) .card.r7::before { animation: none; background-position: 40% 0; } :where(:root[data-motion="reduce"]) .hero::before, :where(:root[data-motion="reduce"]) .opener::before, :where(:root[data-motion="reduce"]) .jxp-page::before { animation: none; } :where(:root[data-motion="reduce"]) .cl-item.is-target { animation: none; } /* === Stock de paquets (index) === */ /* Sous le bouton « Ouvrir un paquet » (compte connecté) : un losange par paquet disponible, le nombre, puis le compte à rebours du prochain paquet (public/assets/pack.js). */ .pack-stock { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; color: var(--muted); font-size: 13px; letter-spacing: .06em; font-variant-numeric: tabular-nums; } .ps-gems { display: inline-flex; gap: 10px; padding: 0 3px; } .ps-gems i { width: 9px; height: 9px; rotate: 45deg; border: 1px solid var(--brass); transition: background .4s ease, box-shadow .4s ease; } .ps-gems i.on { background: var(--brass); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brass) 22%, transparent); } .ps-count { color: var(--text); font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; } .ps-next { display: inline-flex; align-items: center; gap: 14px; } .ps-next::before { content: ""; width: 5px; height: 5px; rotate: 45deg; background: var(--brass-line); } .pack-stock.is-empty .ps-count { color: var(--brass-ink); } /* Compteur du paquet doré : « Encore 12 paquets à ouvrir avant ton paquet doré » et une fine barre de progression (pack.js) */ .gold-track { display: grid; justify-items: center; gap: 8px; color: var(--muted); font-size: 13px; letter-spacing: .04em; } .gt-text { display: inline-flex; align-items: center; gap: 10px; } .gt-text::before { content: ""; flex: none; width: 7px; height: 7px; rotate: 45deg; background: #e2b84f; box-shadow: 0 0 0 2px color-mix(in srgb, #e2b84f 25%, transparent); } .gt-bar { display: block; width: 150px; height: 3px; background: var(--brass-line); overflow: hidden; } .gt-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #b8862a, #f3d982); transition: width .6s ease; } .gold-track.is-ready { color: var(--brass-ink); } .gold-track.is-ready .gt-text { font-weight: 500; letter-spacing: .1em; text-transform: uppercase; } /* moins d'animations (boot.js, docs/animations.md) */ :where(:root[data-motion="reduce"]) .gt-bar i { transition: none; } /* Compteur du paquet diamanté : un losange par paquet doré à ouvrir, allumé (bleu glacier) une fois ouvert */ .diamond-track { display: grid; justify-items: center; gap: 8px; color: var(--muted); font-size: 13px; letter-spacing: .04em; } .dt-gems { display: inline-flex; gap: 10px; } .dt-gems i { width: 8px; height: 8px; rotate: 45deg; border: 1px solid color-mix(in srgb, #9fd3f0 55%, transparent); transition: background .4s ease, box-shadow .4s ease; } .dt-gems i.on { background: linear-gradient(135deg, #ffffff, #9fd3f0 55%, #5aa7d6); border-color: #cfeaff; box-shadow: 0 0 6px color-mix(in srgb, #9fd3f0 70%, transparent); } .diamond-track.is-ready { color: var(--text); } .diamond-track.is-ready .dt-text { font-weight: 500; letter-spacing: .1em; text-transform: uppercase; } /* moins d'animations (boot.js, docs/animations.md) */ :where(:root[data-motion="reduce"]) .dt-gems i { transition: none; } .tag-mode-help { font-size: 12px; } #pack { scroll-margin-top: 100px; } /* ouverture d'un paquet : la liste s'arrête sous l'en-tête collant */ .opener-stage { scroll-margin-top: 100px; } /* clic sur le paquet, page déjà défilée (pack.js) : on s'arrête sur la scène, pas en haut de la page */ /* moins d'animations (boot.js, docs/animations.md) */ :where(:root[data-motion="reduce"]) .ps-gems i { transition: none; } /* Page « Paquets » (joueur connecté) : seulement le bouton, le stock de paquets et les cartes tirées */ .opener { padding-top: clamp(56px, 9vw, 112px); } /* Visiteur : après son premier paquet, le bouton d'ouverture cède la place à « Inscris-toi » et « Connecte-toi » */ .cta-pair { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 20px; } .cta-pair .btn { text-decoration: none; } /* Pied de page en bas de la fenêtre même quand la page est courte (connexion, paramètres…) */ body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; box-sizing: border-box; } body > main { flex: 1 0 auto; } body > .foot { flex: none; } .btn[hidden] { display: none; } /* .btn est en inline-flex : sans cette règle l'attribut hidden serait sans effet */ /* Page « Paquets » : l'éventail de l'accueil tourne aussi en haut de la page (règle .hero::before, partagée) */ .opener { position: relative; isolation: isolate; text-align: center; } /* Les phases (home/opening/reveal) montrent et cachent l'encart, le paquet et les cartes : le défilement de la page est déjà géré à la main (pack.js : scrollTopNow, glide) ; sans ceci, le recalage automatique du navigateur (scroll anchoring) se superpose à ces changements de hauteur et, sur Firefox, s'anime visiblement par à-coups. */ .opener { overflow-anchor: none; } /* Lien « Comment ça marche ? » : un bouton qui a l'air d'un lien (il ouvre la fenêtre d'aide sur son onglet) */ .link-btn { appearance: none; padding: 4px 2px; border: 0; background: none; color: var(--brass-ink); font: inherit; font-size: 14px; letter-spacing: .02em; text-decoration: underline; text-decoration-color: var(--brass-line); text-underline-offset: 4px; cursor: var(--cur-hand); transition: text-decoration-color .3s ease, color .3s ease; } .link-btn:hover, .link-btn:focus-visible { color: var(--text); text-decoration-color: var(--brass); } .link-btn:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; } /* Menu « Compte » de la barre du bas (mobile) : entrées « thème » et « Informations & Aide », qui ont quitté l'en-tête masqué */ .acct-toggle { position: relative; } .acct-anchor { position: relative; display: inline-flex; } .acct-dropdown .menu-link { font: inherit; font-size: 13px; } /* Collection sur mobile : 3 cartes par ligne (2 sur les tout petits écrans, 3 à 4 sur les grands téléphones) ; la description des cartes se masque d'elle-même sous 150 px de large (petit format), voir @container plus haut. Sept lignes par page (collection-pages.js). */ @media (max-width: 760px) { .cards.collection { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px 12px; } } @media (max-width: 520px) { .cards.collection { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; } } @media (max-width: 330px) { .cards.collection { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Petit format (cartes de ~105 px sur mobile, sans description) : textes resserrés pour que titre sur 2 lignes, rareté et vues tiennent */ @container (max-width: 140px) { .card-body { padding-top: 6.6cqw; gap: 1cqw; } .card-body h3 { font-size: max(10.5px, 8.6cqw); line-height: 1.15; } .tag { font-size: max(8.5px, 3.6cqw); letter-spacing: .12em; padding-left: .12em; } .vw { font-size: max(9px, 3.8cqw); } } .bottom-nav .acct-dropdown { min-width: 230px; } .acct-dropdown .menu-link span { white-space: nowrap; } /* ---------- Paramètres : titre de la page, puis les cartes (un seul bloc étroit et centré sur téléphone et tablette ; sur ordinateur, deux colonnes qui occupent la largeur de la page) ---------- */ .auth-card h2 { margin: 0 0 10px; font-size: clamp(20px, 2.6vw, 26px); font-weight: 400; letter-spacing: .16em; text-transform: uppercase; text-align: center; } .settings-head { max-width: 440px; margin: 0 auto 36px; text-align: center; } .settings-head h1 { margin: 0 0 8px; font-size: clamp(26px, 3.4vw, 40px); font-weight: 300; letter-spacing: .14em; text-transform: uppercase; line-height: 1.2; } .settings-head .lead-sm { margin: 0; color: var(--muted); font-size: 14px; } .settings .auth-card { width: 100%; } .settings .auth-card + .auth-card { margin-top: 0; } .settings .field-pair { display: block; } @media (min-width: 1000px) { .settings-head { max-width: 1240px; margin-inline: auto; margin-bottom: 44px; text-align: left; } .settings .auth-card { max-width: none; margin: 0; padding: 40px 44px 44px; } .settings .auth-card h2 { text-align: left; } .settings .auth-card .lead-sm { text-align: left; } .settings .auth-card .btn { width: auto; min-width: 240px; justify-self: start; } .settings .field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; } .settings .avatar-grid { gap: 14px; margin: 6px 0 28px; } .settings .field { max-width: 520px; } .settings .field-pair .field { max-width: none; } } @media (min-width: 1500px) { .settings .avatar-grid { gap: 18px; } } .settings .field { align-content: start; } /* deux champs côte à côte : le plus court ne s'étire pas à la hauteur de l'autre (petit texte d'aide) */ .settings-msg { max-width: 440px; margin: -12px auto 28px; } @media (min-width: 1000px) { .settings-msg { max-width: 1240px; margin: -20px auto 32px; } } /* Barre flottante « Modifications non enregistrées » + « Enregistrer » (assets/settings.js) : centrée en bas de la fenêtre, au-dessus de la barre mobile */ .save-bar { position: fixed; z-index: 60; left: 50%; bottom: 24px; translate: -50% 0; display: flex; align-items: center; justify-content: center; gap: 12px 24px; width: max-content; max-width: calc(100vw - 24px); padding: 12px 14px 12px 24px; background: var(--surface); border: 1px solid var(--brass-line); border-top: 2px solid var(--brass); box-shadow: 0 14px 44px rgba(0, 0, 0, .4); } .save-bar[hidden] { display: none; } .save-bar:not([hidden]) { animation: sb-in .35s var(--ease) backwards; } .save-bar.is-leaving { animation: sb-out .22s ease-in both; } .sb-text { display: inline-flex; align-items: center; gap: 12px; color: var(--text); font-size: 13.5px; letter-spacing: .04em; } .sb-text::before { content: ""; flex: none; width: 8px; height: 8px; rotate: 45deg; background: var(--brass); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brass) 25%, transparent); } .save-bar .btn { padding: 13px 24px; } @keyframes sb-in { from { opacity: 0; translate: -50% 18px; } } @keyframes sb-out { to { opacity: 0; translate: -50% 18px; } } @media (max-width: 760px) { .save-bar { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); flex-wrap: wrap; padding: 12px 14px; } .sb-text { font-size: 13px; } } /* moins d'animations (boot.js, docs/animations.md) */ :where(:root[data-motion="reduce"]) .save-bar:not([hidden]), :where(:root[data-motion="reduce"]) .save-bar.is-leaving { animation: none; } /* Fenêtre « Quitter sans enregistrer ? » : titre, phrase, puis les trois choix */ .modal-box.leave-box { display: block; width: min(520px, 100%); text-align: center; } .leave-box h2 { margin: 0 0 12px; font-size: clamp(20px, 3vw, 26px); font-weight: 400; line-height: 1.25; } .leave-box p { margin: 0 0 26px; color: var(--muted); text-wrap: pretty; } .leave-actions { display: grid; justify-items: center; gap: 14px; } .leave-actions .btn { width: min(100%, 340px); justify-content: center; } /* ===================================================================================================================================================================================== SYSTÈME DE BOUTONS : trois niveaux, choisis selon l'IMPORTANCE de l'action (jamais selon la page). Tous les boutons du site en sont un ; en PHP, Ui::btn() ; en JavaScript, WikiCollect.btn() (site.js). .btn PRINCIPAL : l'action que la page attend du joueur (une par zone) ; aplat laiton, gradins, petits losanges
de part et d'autre du texte (définition plus haut). Variante rouge : .btn.btn-danger (suppression). .btn-secondary SECONDAIRE : l'autre choix, à côté d'un bouton principal (Annuler, Refuser, Revoir les corrections…) ; sans bordure, fond laiton léger, mêmes gradins. S'écrit « btn btn-secondary ». .btn-sm TAILLE COMPACTE du principal et du secondaire (dans une carte, une liste, un menu) : mêmes couleurs et mêmes gradins, sans losanges. S'écrit « btn btn-sm » ou « btn btn-secondary btn-sm ». .btn-tertiary TERTIAIRE : action d'appoint sur un élément (Favoris, Améliorer le style, Étiquettes, Signaler…) ; simple filet laiton, icône à gauche (SVG de 18 px), majuscules espacées. États : .is-on (actif : plein laiton), .is-danger (rouge au survol), .is-confirm (second clic de confirmation, rouge plein). Exceptions volontaires, avec leur propre dessin : .refill-btn (« Recharger le stock ») et .rc-btn (« Recycler »). Ne sont pas des boutons d'action : croix de fermeture, flèches, icônes de l'en-tête, onglets, pagination, lignes de menu, liens soulignés (.link-btn, .sel-clear). Les classes historiques (fav-btn, tags-open, sel-btn, pf-act…) ne servent plus qu'à retrouver l'élément en JavaScript. ===================================================================================================================================================================================== */ .btn-secondary { background: color-mix(in srgb, var(--brass) 16%, transparent); color: var(--brass-ink); --on-brass: var(--brass-ink); transition: background .3s ease; } .btn.btn-secondary:hover:not(:disabled), .btn.btn-secondary:focus-visible { filter: none; background: color-mix(in srgb, var(--brass) 30%, transparent); } .btn.btn-secondary:active:not(:disabled) { filter: none; background: color-mix(in srgb, var(--brass) 38%, transparent); } .btn.btn-secondary.is-danger:hover:not(:disabled), .btn.btn-secondary.is-danger:focus-visible { color: #d9483f; --on-brass: #d9483f; background: color-mix(in srgb, #d9483f 14%, transparent); } .btn.btn-sm { --s: 3px; gap: 8px; min-height: 40px; padding: 0 18px; justify-content: center; font-size: 11.5px; letter-spacing: .18em; line-height: 1.2; } .btn.btn-sm .dm { display: none; } @media (max-width: 480px) { .btn.btn-sm { min-height: 44px; padding: 0 14px; letter-spacing: .14em; } } .btn.is-loading { opacity: .7; pointer-events: none; } /* clic sur un bouton-lien qui change de page : retour immédiat pendant le chargement */ .btn-tertiary { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 40px; padding: 0 16px; border: 1px solid var(--brass-line); background: none; color: var(--brass-ink); font: 500 12px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: var(--cur-hand); -webkit-user-select: none; user-select: none; transition: background .3s ease, border-color .3s ease, color .3s ease; } .btn-tertiary:hover:not(:disabled), .btn-tertiary:focus-visible, .btn-tertiary[aria-expanded="true"] { background: color-mix(in srgb, var(--brass) 14%, transparent); border-color: var(--brass); } .btn-tertiary:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; } .btn-tertiary:disabled { opacity: .5; cursor: var(--cur-blocked); } .btn-tertiary svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: fill .25s ease, scale .25s var(--ease); } .btn-tertiary:active svg { scale: .85; } .btn-tertiary.is-on { background: var(--brass); border-color: var(--brass); color: var(--on-brass); } :root[data-theme="light"] .btn-tertiary.is-on { background: var(--brass-ink); border-color: var(--brass-ink); } /* texte ivoire lisible (≈ 5,7:1) */ .btn-tertiary.is-on svg { fill: currentColor; } .btn-tertiary.is-danger:hover:not(:disabled), .btn-tertiary.is-danger:focus-visible { color: #d9483f; border-color: #d9483f; background: none; } .btn-tertiary.is-confirm, .btn-tertiary.is-confirm:hover:not(:disabled) { color: #fff; background: #b8453f; border-color: #b8453f; } @media (pointer: coarse) { .btn-tertiary { min-height: 44px; } } /* ================= Page « Paquets » : le paquet 3D (assets/pack3d.js) ================= */ /* La scène du paquet et les cartes tirées occupent la MÊME case : les cartes prennent la place du paquet une fois ouvert. */ .opener-stage { display: grid; } .opener-stage > * { grid-area: 1 / 1; min-width: 0; } /* Sortie des cartes : elles partent DANS le sachet, donc la scène du paquet passe devant elles le temps de leur montée (retirée ensuite : les cartes redeviennent cliquables) */ .opener-stage > .pack { position: relative; z-index: 1; } .opener[data-emerge] .pack-stage, .pack-demo[data-emerge] .pack-stage { z-index: 2; } /* accueil visiteurs (.pack-demo) : même sortie des cartes que la page Paquets */ /* Cartes qui sortent du paquet, puis (option) à retourner soi-même */ .cards.is-leaving { opacity: 0; transition: opacity .28s ease; } .card.is-facedown { cursor: var(--cur-hand); } .card.is-facedown:hover { translate: 0 -6px; } .card.is-facedown:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; } .opener .cta { --cta-gap: 12px; margin-top: 6px; gap: var(--cta-gap); } .opener .cta .btn { margin-top: 10px; } .ps-next:empty, .opener .hint:empty { display: none; } .opener .cta [hidden] { display: none; } @media (max-width: 760px) { .opener { padding-top: 24px; } } .opener-stage > .pack { align-self: center; } /* ================= Page « Paquets » : phases (home -> opening -> reveal) et pile de cartes sur mobile ================= */ /* Pas de bouton « Ouvrir un paquet » : le paquet EST le bouton (libellé lu par les lecteurs d'écran seulement) */ /* Dès qu'on ouvre un paquet, toutes les autres informations disparaissent (stock, aide, option…) jusqu'à « Continuer » ; le pied de page reste */ .opener .cta { transition: opacity .5s ease .1s, visibility 0s; } .opener[data-phase="opening"] .cta { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility 0s .3s; } /* on garde la place : le pied de page ne bouge pas pendant la déchirure */ .opener[data-phase="reveal"] .cta { display: none; } /* la place est rendue quand les cartes sortent : le pied de page glisse (pack.js, glide) */ .pack { position: relative; } .pack-final { display: grid; justify-items: center; gap: 22px; margin-top: 72px; opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility 0s .8s; } .pack-final.is-shown { opacity: 1; visibility: visible; transition: opacity .8s ease; } .pack-final .pack-note { margin: 0; } .reveal-hint { margin: 0; min-height: 1.5em; color: var(--muted); font-size: 14px; text-align: center; } .cards-wrap { position: relative; } .deck-bar[hidden] { display: none; } @media (max-width: 760px) { /* L'option « retourner soi-même » n'existe pas sur mobile : c'est toujours au joueur de révéler ses cartes (pack.js, deckMode : même seuil de 760 px) */ /* « Continuer » juste sous les flèches de la pile (toujours à l'écran), la note en dessous ; la consigne vide ne prend plus de place */ .pack { padding: 26px 0 40px; } /* le haut des cartes tombe à 50 px du haut de l'écran, comme celui du paquet */ .pack-final { margin-top: 16px; gap: 14px; } .pack-final .btn { order: -1; margin-top: 0; } .reveal-hint { min-height: 0; margin-top: 18px; padding: 0 16px; } .reveal-hint:empty { display: none; } /* Les cartes forment une pile : celle du dessus, en grand ; on la fait glisser à droite pour révéler la suivante, à gauche pour revenir en arrière */ .cards.deck { display: block; position: relative; width: min(76vw, 320px); width: min(76vw, 320px, calc((100vh - 310px) * 5 / 7)); width: min(76vw, 320px, calc((100dvh - 310px) * 5 / 7)); aspect-ratio: 5 / 7; margin: 0 auto; touch-action: pan-y; -webkit-user-select: none; user-select: none; } .cards.deck > .card { position: absolute; inset: 0; width: 100% !important; height: 100%; aspect-ratio: auto; grid-column: auto !important; margin: 0 !important; transition: transform .34s cubic-bezier(.2, .85, .25, 1), opacity .25s ease, filter .25s ease; } .cards.deck .card-in { transition-duration: .28s; } /* retournement rapide : on ne s'attarde pas sur le dos */ .cards.deck > .card:hover { translate: none; } .cards.deck > .card[data-pos="top"] { z-index: 20; cursor: var(--cur-hand); } .cards.deck > .card[data-pos="behind"] { pointer-events: none; z-index: calc(10 - var(--k)); transform: translate(calc(var(--k) * 3px), calc(var(--k) * 10px)) rotate(calc(var(--k) * 1.5deg)) scale(calc(1 - var(--k) * .035)); filter: brightness(calc(1 - var(--k) * .16)); } .cards.deck > .card[data-pos="out"] { pointer-events: none; z-index: 1; opacity: 0; transform: translateX(-125%) rotate(-12deg); } .deck-bar[hidden] { display: flex; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .3s ease, visibility 0s .3s; } /* la place reste réservée : rien ne bouge quand les flèches apparaissent */ .deck-bar { min-height: 44px; transition: opacity .7s ease .1s, visibility 0s; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; width: min(100%, 360px); padding: 0 12px; margin: 46px auto 0; } /* Flèches : deux losanges laiton (comme les boutons thème et aide), chevron droit dedans */ .deck-nav { appearance: none; flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; rotate: 45deg; background: color-mix(in srgb, var(--surface) 90%, transparent); box-shadow: inset 0 0 0 1.84px var(--brass-line), 0 6px 16px rgba(0, 0, 0, .4); color: var(--brass-ink); cursor: var(--cur-hand); -webkit-tap-highlight-color: transparent; transition: box-shadow .3s ease, color .3s ease, opacity .3s ease, background .3s ease; } .deck-nav svg { width: 20px; height: 20px; rotate: -45deg; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .deck-nav.prev svg { translate: -1px 1px; } .deck-nav.next svg { translate: 1px -1px; } .deck-nav:not(:disabled):active { background: color-mix(in srgb, var(--brass) 26%, var(--surface)); color: var(--text); } .deck-nav:disabled { opacity: .25; cursor: var(--cur-default); } .deck-nav.is-hint:not(:disabled) { box-shadow: inset 0 0 0 1.84px var(--brass), 0 0 0 0 color-mix(in srgb, var(--brass) 40%, transparent), 0 6px 16px rgba(0, 0, 0, .4); animation: deck-nudge 2s ease-in-out infinite; } @keyframes deck-nudge { 50% { box-shadow: inset 0 0 0 1.84px var(--brass), 0 0 0 9px color-mix(in srgb, var(--brass) 0%, transparent), 0 6px 16px rgba(0, 0, 0, .4); } 0% { box-shadow: inset 0 0 0 1.84px var(--brass), 0 0 0 0 color-mix(in srgb, var(--brass) 45%, transparent), 0 6px 16px rgba(0, 0, 0, .4); } } .deck-dots { display: flex; align-items: center; gap: 12px; padding: 14px 6px; margin: -14px -6px; } /* zone sensible élargie : un toucher sur un losange revoit la carte (pack.js) */ .deck-dots:has(i.seen) { cursor: var(--cur-hand); } .deck-dots i { width: 9px; height: 9px; rotate: 45deg; border: 1px solid var(--brass); transition: background .3s ease, scale .3s ease; } .deck-dots i.seen { background: color-mix(in srgb, var(--brass) 55%, transparent); } .deck-dots i.cur { background: var(--brass); scale: 1.5; } } /* moins d'animations (boot.js, docs/animations.md) */ :where(:root[data-motion="reduce"]) .deck-nav.is-hint:not(:disabled) { animation: none; } /* Ordinateur : le paquet qui flotte et la rangée des 5 cartes ont le même centre, au milieu de la hauteur de la fenêtre. La scène (500 px de haut) commence sous l'en-tête (77 px) : on règle le haut de la page pour que son centre tombe à 50 % de la fenêtre (56 px au moins sur les petites fenêtres). « Continuer » et la note passent sous les cartes, hors de la mise en page : ils ne les décalent plus. */ @media (min-width: 761px) { .opener { padding-top: max(28px, calc(50vh - 77px - (350px * var(--pk, 1) + 150px + 60px) / 2 - 30px)); } /* 77 px : l'en-tête ; la scène mesure 350 px × --pk + 150 px, plus 60 px pour le nom de la zone et ses losanges */ .pack-carousel > .pack-stage { margin-top: 45px; } /* le nom de la zone et ses losanges occupent déjà le haut de la marge */ .opener .pack { padding: 0; } .opener .reveal-hint { display: none; } /* consigne de la pile de cartes : téléphone seulement */ .opener .pack-final { position: absolute; left: 0; right: 0; top: 100%; margin-top: 44px; } .opener[data-phase="reveal"] .opener-stage { margin-bottom: 160px; } /* la place de « Continuer » et de la note (le pied de page glisse, voir pack.js) */ /* Paquet diamanté (10 cartes, deux rangées) : la rangée est rétrécie pour que les deux tiennent dans la fenêtre avec « Continuer » dessous (hauteur de deux rangées ≈ 0,58 × leur largeur ; 240 px de marge : l'en-tête, le haut de la page et la place de « Continuer »), et le haut de la page remonte : rien ne descend dans le pied de page */ .opener .cards.is-ten { max-width: min(100%, calc((100vh - 290px) * 1.78 + 40px)); margin-inline: auto; } .opener .pack:has(.cards.is-ten) .pack-final { margin-top: 32px; } .opener[data-phase="reveal"]:has(.cards.is-ten) { padding-top: 28px; } } /* Menu du visiteur (bonhomme) : aligné sur le bord droit du bouton, jamais centré, pour ne pas dépasser de l'écran */ .burger-menu .acct-dropdown { left: auto; right: 0; translate: none; max-width: calc(100vw - 24px); } /* « Comment ça marche ? » sur téléphone : le tableau des chances devient une liste de petites fiches (plus de défilement sur les côtés) */ @media (max-width: 620px) { .hw-tablewrap { overflow: visible; margin-inline: 0; } .hw-odds, .hw-odds tbody { display: block; min-width: 0; width: 100%; } .hw-odds thead { display: none; } .hw-odds tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; padding: 12px 0; border-bottom: 1px solid var(--line); } .hw-odds tbody th, .hw-odds td { padding: 0; border: 0; text-align: left; } .hw-odds tbody th { grid-column: 1 / 3; } .hw-odds td:nth-of-type(1) { grid-column: 3; text-align: right; color: var(--muted); font-size: 13px; white-space: nowrap; } .hw-odds td:nth-of-type(n+2)::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 9.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .hw-odds td b { font-size: 15px; } .hw-rar li { flex-wrap: wrap; } } /* Page de texte (Sources & licences…) */ .doc { max-width: 760px; padding: clamp(40px, 7vw, 80px) 0 64px; overflow-wrap: break-word; } .doc h1 { margin: 0 0 12px; font-size: clamp(26px, 4vw, 40px); font-weight: 300; letter-spacing: .12em; text-transform: uppercase; line-height: 1.2; } .doc-lead { margin: 0 0 32px; color: var(--muted); } .doc h2 { margin: 30px 0 8px; font-size: 18px; font-weight: 500; letter-spacing: .04em; color: var(--brass-ink); } .doc p { margin: 0 0 12px; text-wrap: pretty; } .doc a { color: var(--brass-ink); } .doc a.btn { color: var(--on-brass); } /* un lien qui a l'allure d'un bouton (espace admin) garde le texte du bouton */ .doc h3 { margin: 22px 0 6px; font-size: 15px; font-weight: 500; letter-spacing: .06em; color: var(--text); } .doc h4 { margin: 16px 0 6px; font-size: 14px; font-weight: 500; letter-spacing: .04em; color: var(--brass-ink); } /* sous-section (politique de confidentialité : un évènement) */ .doc ul { margin: 0 0 12px; padding-left: 20px; } .doc li { margin: 0 0 8px; text-wrap: pretty; } .doc li::marker { color: var(--brass); } .doc code { padding: 1px 6px; background: var(--band); font-size: .92em; overflow-wrap: anywhere; } .doc section[id] { scroll-margin-top: 96px; } /* Repère d'une information à renseigner (content/legal.php) : impossible à rater avant la mise en ligne */ .todo { padding: 1px 6px; background: rgba(217, 72, 63, .22); border: 1px dashed #d9483f; color: var(--text); font-weight: 500; } /* Collection sur téléphone : « Trier et filtrer » est un bouton qui déplie le panneau des tris, filtres et étiquettes (voir collection-panel.js). Un point sur le bouton signale des filtres actifs (le lien « Réinitialiser » n'existe que dans ce cas). */ .coll-toggle { display: none; } @media (max-width: 760px) { .coll-toggle:not([hidden]) { display: flex; width: 100%; min-height: 46px; margin-top: 18px; padding: 0 16px; -webkit-tap-highlight-color: transparent; } .coll-toggle .ct-chev { width: 16px; height: 16px; margin-left: 2px; transition: rotate .3s ease; } .coll-toggle[aria-expanded="true"] .ct-chev { rotate: 180deg; } .coll-toggle .ct-dot { display: none; flex: none; width: 7px; height: 7px; rotate: 45deg; background: var(--brass); } .coll-panel:has(#coll-reset) .coll-toggle .ct-dot { display: block; } /* replié : hauteur 0 (grille à 0fr) et contenu invisible ; déplié : hauteur naturelle. La hauteur s'anime, le contenu sous le panneau suit. */ .coll-panel.has-toggle .coll-more { display: grid; grid-template-rows: 0fr; visibility: hidden; opacity: 0; transition: grid-template-rows .4s var(--ease), opacity .3s ease, visibility 0s .4s; } .coll-panel.has-toggle.is-open .coll-more { grid-template-rows: 1fr; visibility: visible; opacity: 1; transition: grid-template-rows .4s var(--ease), opacity .4s ease .05s, visibility 0s; } .coll-panel.has-toggle .cm-inner { min-height: 0; overflow: hidden; } .coll-panel.has-toggle.is-open:not(.is-moving) .cm-inner { overflow: visible; } .coll-more .coll-filters { margin-top: 20px; padding-top: 22px; } } /* Titre sans sous-titre (Connexion) : l'espace sous le titre est celui d'un sous-titre */ .auth-card h1:not(:has(+ .lead-sm)) { margin-bottom: 28px; } /* Boutons, menus et liens de navigation : jamais sélectionnés comme du texte (double-clic, appui long, glissement) sur ordinateur comme sur mobile */ button, summary, [role="button"], .btn, .link-btn, .nav-link, .menu-link, .acct-pill, .pg, .foot-links a, .top a, .bottom-nav a, .pager a, .deck-bar, .dup-toggle, .rar-opt, .tag-mode label { -webkit-user-select: none; user-select: none; } /* ================= Apparitions, disparitions et mouvements doux ================= */ @keyframes wc-fade-in { from { opacity: 0; } } @keyframes wc-fade-out { to { opacity: 0; } } @keyframes wc-pop-in { from { opacity: 0; transform: translateY(-6px) scale(.97); } } @keyframes wc-pop-out { to { opacity: 0; transform: translateY(-4px) scale(.98); } } @keyframes wc-pop-up-in { from { opacity: 0; transform: translateY(6px) scale(.97); } } @keyframes wc-pop-up-out { to { opacity: 0; transform: translateY(4px) scale(.98); } } @keyframes wc-rise-in { from { opacity: 0; transform: translateY(16px) scale(.985); } } @keyframes wc-rise-out { to { opacity: 0; transform: translateY(10px) scale(.99); } } /* Chaque page arrive en fondu ; les résultats de la collection aussi quand ils sont remplacés (tri, filtre, page) */ main { animation: wc-fade-in .45s ease backwards; } /* Page Paquets : pas de fondu sur
, qui contient le paquet 3D (une opacité animée au-dessus de plans 3D à face cachée peut les faire disparaître pour de bon sur Chromium et les navigateurs mobiles). Le reste de la page et les faces du paquet apparaissent en fondu séparément. */ main.opener { animation: none; } main.opener > h1, main.opener .cta, main.opener .pack-tip { animation: wc-fade-in .45s ease backwards; } [data-part="results"] { animation: wc-fade-in .35s ease backwards; } /* Menus déroulants (Compte, visiteur) : ils s'ouvrent et se ferment en glissant un peu ; celui de la barre du bas s'ouvre vers le haut */ .acct-dropdown:not([hidden]) { animation: wc-pop-in .2s var(--ease) backwards; transform-origin: 50% 0; } .acct-dropdown.is-leaving { animation: wc-pop-out .15s ease-in both; } .bottom-nav .acct-dropdown:not([hidden]) { animation-name: wc-pop-up-in; transform-origin: 100% 100%; } .bottom-nav .acct-dropdown.is-leaving { animation-name: wc-pop-up-out; } /* Listes des étiquettes et des filtres */ .tag-menu:not([hidden]), .ctf-panel:not([hidden]), .tm-colorpop:not([hidden]), .tm-addsub:not([hidden]), .multi[open] .multi-panel { animation: wc-pop-in .2s var(--ease) backwards; } .tag-menu.is-leaving, .ctf-panel.is-leaving { animation: wc-pop-out .15s ease-in both; } /* Fenêtres (carte, aide, étiquettes) : le fond apparaît en fondu, la boîte monte doucement ; à la fermeture, l'inverse */ .modal:not([hidden]) { animation: wc-fade-in .25s ease backwards; } .modal:not([hidden]) .modal-box { animation: wc-rise-in .35s var(--ease) backwards; } .modal.is-leaving { animation: wc-fade-out .2s ease both; } .modal.is-leaving .modal-box { animation: wc-rise-out .2s ease both; } /* Page « Paquets » : au retour de « Continuer », le paquet neuf et les informations reviennent en fondu */ .opener.is-arriving .p3-leaf, .opener.is-arriving .cta, .opener.is-arriving .pack-tip { animation: wc-fade-in .7s ease backwards; } /* moins d'animations (boot.js, docs/animations.md) */ :where(:root[data-motion="reduce"]) main, :where(:root[data-motion="reduce"]) [data-part="results"], :where(:root[data-motion="reduce"]) .acct-dropdown, :where(:root[data-motion="reduce"]) .tag-menu, :where(:root[data-motion="reduce"]) .ctf-panel, :where(:root[data-motion="reduce"]) .tm-colorpop, :where(:root[data-motion="reduce"]) .tm-addsub, :where(:root[data-motion="reduce"]) .multi-panel, :where(:root[data-motion="reduce"]) .modal, :where(:root[data-motion="reduce"]) .modal-box, :where(:root[data-motion="reduce"]) .opener.is-arriving .p3-leaf, :where(:root[data-motion="reduce"]) .opener.is-arriving .cta, :where(:root[data-motion="reduce"]) main.opener .cta, :where(:root[data-motion="reduce"]) main.opener .pack-tip, :where(:root[data-motion="reduce"]) .pack-stage.p3-in .p3-leaf { animation: none !important; } :where(:root[data-motion="reduce"]) .coll-panel.has-toggle .coll-more, :where(:root[data-motion="reduce"]) .deck-bar, :where(:root[data-motion="reduce"]) .opener .cta { transition: none !important; } /* Inscription : cases à cocher obligatoires (âge, mentions légales et confidentialité) */ .consents { display: grid; gap: 12px; margin: 4px 0 18px; } .check { display: flex; align-items: flex-start; gap: 12px; font-size: 13.5px; line-height: 1.5; color: var(--muted); cursor: var(--cur-hand); } .check input { position: absolute; opacity: 0; width: 0; height: 0; } .check .dup-box { margin-top: 7px; } .check input:checked + .dup-box { background: var(--brass); } .check:has(input:focus-visible) { outline: 2px solid var(--brass); outline-offset: 4px; } .check a { color: var(--brass-ink); } /* Fiche d'une carte : lien discret « Signaler l'image » */ .modal-report { margin: 18px 0 0; } .modal-report .link-btn { color: var(--muted); font-size: 12.5px; text-decoration-color: color-mix(in srgb, var(--muted) 40%, transparent); } /* « Signaler la carte ou son image » : sur un écran étroit, le texte passe sur deux lignes (le bouton grandit en hauteur) au lieu de dépasser du cadre */ .modal-report .btn-tertiary { max-width: 100%; box-sizing: border-box; padding-block: 10px; line-height: 1.35; white-space: normal; text-wrap: balance; text-align: center; overflow-wrap: anywhere; } /* Espace admin (dossier au nom aléatoire de public/, src/Admin.php) */ .doc.admin { max-width: 1120px; } .admin-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin: -8px 0 28px; padding-bottom: 14px; border-bottom: 1px solid var(--line); font-size: 14px; } .admin-nav a { color: var(--muted); text-decoration: none; letter-spacing: .04em; } .admin-nav a:hover, .admin-nav a[aria-current] { color: var(--brass-ink); } .admin-nav form { margin: 0 0 0 auto; } .admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 0; } .admin-stats > div { padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--brass); } .admin-stats dt { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .admin-stats dd { margin: 6px 0 0; font-size: 30px; font-weight: 300; } .admin-stats a { color: var(--brass-ink); } .admin-report { display: flex; gap: 22px; margin: 0 0 22px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--brass); } .admin-thumb { flex: none; width: 150px; min-height: 100px; display: grid; place-items: center; background: var(--card); color: var(--muted); font-size: 13px; } .admin-thumb img { display: block; max-width: 100%; max-height: 220px; } .admin-report-body { min-width: 0; flex: 1; } .admin-report h2 { margin: 0 0 4px; font-size: 20px; color: var(--text); overflow-wrap: anywhere; } .admin-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 14px 0 0; } .admin-actions .btn { margin: 0; } .admin-confirm { margin: 0 0 28px; padding: 22px 24px; background: var(--surface); border: 1px solid #b8453f; border-left-width: 3px; } .admin-confirm h2 { margin: 0 0 8px; } .admin-confirm .check { margin: 14px 0; } /* Page « WikiSpeed du jour » de l'espace admin : formulaire du défi d'un jour, et « Retirer » sur la même ligne que « Modifier » */ .aws-form { display: grid; gap: 4px; max-width: 720px; margin: 0 0 32px; } .aws-form select { width: 100%; border: 1px solid var(--line); background: var(--card); color: var(--text); padding: 12px 14px; font: inherit; font-size: 15px; } .aws-form select:focus-visible { outline: none; border-color: var(--brass); } .aws-form .check { margin: 6px 0 16px; } .aws-form .btn { justify-self: start; margin: 0; } .aws-inline { display: inline; } .aws-h { margin: 48px 0 8px; scroll-margin-top: 90px; } .admin-search { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 8px; } .admin-search input { flex: 1 1 260px; appearance: none; border: 1px solid var(--line); background: var(--card); color: var(--text); padding: 13px 16px; font: inherit; font-size: 15px; } .admin-search .btn { margin: 0; } .admin-table-wrap { overflow-x: auto; } .admin-table { width: 100%; border-collapse: collapse; font-size: 14px; } .admin-table th { padding: 10px 12px; text-align: left; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--brass-line); } .admin-table td { padding: 11px 12px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; } .admin-table td:nth-child(n+3) { white-space: nowrap; } /* dates et action sur une seule ligne */ .admin-pager { display: flex; justify-content: center; gap: 22px; margin: 22px 0 0; color: var(--muted); font-size: 14px; } .admin-pager a { color: var(--brass-ink); } @media (max-width: 680px) { .admin-report { flex-direction: column; } .admin-thumb { width: 100%; } .admin-table thead { display: none; } .admin-table, .admin-table tbody, .admin-table tr, .admin-table td { display: block; width: 100%; } .admin-table tr { padding: 10px 0; border-bottom: 1px solid var(--line); } .admin-table td { padding: 3px 0; border: 0; } .admin-table td[data-label]::before { content: attr(data-label) " : "; color: var(--muted); font-size: 12px; } } /* Page 404 (public/404.php) */ .notfound { display: grid; justify-items: center; gap: 22px; padding: clamp(56px, 12vw, 140px) 0 clamp(64px, 12vw, 150px); text-align: center; } .nf-code { margin: 0; font-size: clamp(84px, 20vw, 190px); font-weight: 200; line-height: 1; letter-spacing: .12em; padding-left: .12em; color: var(--brass-ink); } .notfound .rule { width: min(340px, 80%); } .notfound h1 { margin: 0; font-size: clamp(20px, 3vw, 28px); font-weight: 400; letter-spacing: .16em; text-transform: uppercase; } .nf-text { max-width: 460px; margin: 0 0 12px; color: var(--muted); text-wrap: pretty; } /* Champ piège anti-robots (Auth::trapField) : hors écran, jamais visible ni focalisable */ .hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* ================= Amis, notifications et profil (0.12.0) : assets/social.js, assets/profile.js, public/profil.php ================= */ /* Boutons Amis et cloche : mêmes losanges que le thème et le « ? » (.theme), leur icône à la taille de celle du « ? » */ .social-wrap { position: relative; display: inline-flex; } .social-btn svg { width: 21px; height: 21px; stroke-width: 2.1; } /* Badge de nouveauté de la cloche (mêmes couleurs que le badge du « ? »), visible quand data-unseen n'est pas 0 */ .social-dot { position: absolute; z-index: 2; top: -4px; right: -4px; width: 11px; height: 11px; border-radius: 50%; background: #d9483f; border: 2px solid var(--bg); box-sizing: content-box; pointer-events: none; display: none; } [data-social="bell"]:not([data-unseen="0"]) > .social-dot { display: block; animation: help-pulse 2.4s ease-in-out infinite; } /* moins d'animations (boot.js, docs/animations.md) */ :where(:root[data-motion="reduce"]) [data-social="bell"] > .social-dot { animation: none !important; } /* Liste déroulante : plus large qu'un menu ordinaire, alignée à droite de son bouton */ .acct-dropdown.social-dd { left: auto; right: -12px; translate: none; width: min(340px, calc(100vw - 24px)); max-height: min(70vh, 560px); overflow-y: auto; padding: 0; overscroll-behavior: contain; } .sd-title { margin: 0; padding: 14px 16px 10px; font-size: 11.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--brass-ink); } .sd-empty { margin: 0; padding: 6px 16px 18px; color: var(--muted); font-size: 13.5px; line-height: 1.5; text-wrap: pretty; } .sd-error { margin: 0; padding: 8px 16px; color: var(--err-ink); font-size: 13px; } .social-dd .sd-add { display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 16px; border-top: 1px solid var(--line); color: var(--brass-ink); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; } .social-dd .sd-add svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* Une ligne d'ami : avatar, pseudo, puis les trois icônes (profil, retirer l'ami, bloquer) */ .fr-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 14px; border-top: 1px solid var(--line); } .fr-av { flex: none; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 2px solid var(--line); } .fr-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 500; } .social-dd a.fr-name { display: block; width: auto; padding: 4px 0; background: none; } .fr-actions { display: inline-flex; gap: 2px; } .social-dd .fr-btn, .fr-btn { appearance: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; text-decoration: none; cursor: var(--cur-hand); transition: color .25s ease, background .25s ease; } .fr-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .fr-btn:hover, .fr-btn:focus-visible { color: var(--text); background: var(--band); } .fr-btn.is-danger:hover, .fr-btn.is-danger:focus-visible { color: #d9483f; } .fr-btn.is-confirm, .social-dd .fr-btn.is-confirm { color: #fff; background: #b8453f; } /* premier clic sur « retirer » / « bloquer » : un second clic confirme */ .fr-btn:focus-visible { outline: 2px solid var(--brass); outline-offset: -2px; } .fr-btn-label { display: none; } /* texte des actions : seulement dans le menu déroulant du « ⋯ », voir ci-dessous */ /* Bouton « ⋯ » (liste d'amis, cinq icônes) : remplace la rangée d'icônes par un menu déroulant, sur ordinateur comme sur mobile (où elle masquerait le pseudo). Un seul menu ouvert à la fois (assets/social.js, closeFriendMenus). Repliée dans le flux normal, pas un popover flottant : la liste d'amis défile dans une fenêtre déjà à hauteur limitée, qui le couperait. Un flex-basis de 100% envoie l'élément à la ligne suivante, sous l'avatar et le pseudo. */ .fr-more { display: grid; place-items: center; appearance: none; flex: none; width: 32px; height: 32px; padding: 0; border: 0; background: none; color: var(--muted); cursor: var(--cur-hand); transition: color .25s ease, background .25s ease; } .fr-more svg { width: 18px; height: 18px; } .fr-more:hover, .fr-more:focus-visible { color: var(--text); background: var(--band); } .fr-more:focus-visible { outline: 2px solid var(--brass); outline-offset: -2px; } .fr-row:has(.fr-actions-full) { flex-wrap: wrap; } .fr-actions-full { display: none; flex-basis: 100%; order: 5; flex-direction: column; gap: 0; margin-top: 10px; border-top: 1px solid var(--line); padding-top: 6px; } .fr-row.is-open .fr-actions-full { display: flex; } /* Spécificité : l'emporte sur .sc-friends .fr-btn (taille en icône, plus bas dans la feuille) grâce au préfixe .fr-row.is-open. */ .fr-row.is-open .fr-actions-full .fr-btn { display: flex; width: auto; height: auto; align-items: center; justify-content: flex-start; gap: 12px; padding: 10px 12px; } .fr-row.is-open .fr-actions-full .fr-btn svg { flex: none; } .fr-row.is-open .fr-actions-full .fr-btn-label { display: inline-block; font-size: 13.5px; font-weight: 400; color: var(--text); } /* Une notification : avatar, texte, date, puis les boutons de la demande d'ami */ .nt-row { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 12px; padding: 12px 16px 12px 14px; border-top: 1px solid var(--line); border-left: 3px solid transparent; } .nt-row.is-new { border-left-color: var(--brass); background: var(--band); } /* Petite croix : supprime la notification (social.js, deleteButton) */ .nt-row { position: relative; padding-right: 38px; transition: opacity .25s ease; } .nt-row.is-leaving { opacity: .35; } .social-dd .nt-del, .nt-del { appearance: none; position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; color: var(--muted); cursor: var(--cur-hand); transition: color .25s ease, background .25s ease; } .nt-del svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; } .nt-del:hover, .nt-del:focus-visible { color: var(--text); background: var(--track); } .nt-del:disabled { cursor: progress; } .nt-av { grid-row: 1 / span 2; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid var(--line); } .nt-text { margin: 0; font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; } .social-dd .nt-text a { display: inline; width: auto; padding: 0; background: none; color: var(--brass-ink); text-decoration: underline; text-decoration-color: var(--brass-line); text-underline-offset: 3px; } .nt-time { color: var(--muted); font-size: 11.5px; letter-spacing: .04em; } .nt-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; } /* Cloche flottante (mobile) : invisible sur ordinateur */ .notif-float { display: none; } @media (max-width: 760px), (hover: none) and (pointer: coarse) and (max-width: 1100px) { .notif-float { display: block; position: fixed; z-index: 56; right: max(14px, env(safe-area-inset-right, 0px)); bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 16px); } .notif-float .theme { width: 40px; height: 40px; background: var(--surface); box-shadow: inset 0 0 0 var(--edge) var(--brass-line), 0 6px 18px rgba(0, 0, 0, .35); } .notif-float .social-btn svg { width: 25px; height: 25px; } .notif-float .social-dot { top: -2px; right: -2px; } .notif-float .acct-dropdown.social-dd { top: auto; bottom: calc(100% + 16px); right: 0; left: auto; width: min(340px, calc(100vw - 28px)); transform-origin: 100% 100%; animation-name: wc-pop-up-in; } .notif-float .acct-dropdown.social-dd.is-leaving { animation-name: wc-pop-up-out; } } /* Modales des amis et du profil : une petite fenêtre centrée */ .modal-box.sm-box { display: block; width: min(500px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; padding: clamp(24px, 4vw, 36px); } .modal-box.sm-box.is-wide { width: min(920px, 100%); } .sm-box h2 { margin: 0 0 8px; padding-right: 36px; font-size: clamp(20px, 3vw, 26px); font-weight: 400; line-height: 1.25; } .sm-note { margin: 0 0 18px; color: var(--muted); font-size: 14px; line-height: 1.5; text-wrap: pretty; } .sm-msg { min-height: 1.4em; margin: 12px 0 0; font-size: 14px; } .sm-msg.is-ok { color: var(--brass-ink); } .sm-msg.is-error { color: var(--err-ink); } .sm-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; } .sm-box .field { margin-bottom: 14px; } .sm-box .fr-row { padding-left: 0; padding-right: 0; } .sm-box .fr-row:first-of-type { border-top: 0; } .sm-box .sd-add { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 8px; padding: 13px 4px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--brass-ink); font: 500 12px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; cursor: var(--cur-hand); } .sm-box .sd-add svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* ---------- Page Profil ---------- */ .profile { max-width: 1100px; padding-top: clamp(32px, 6vw, 64px); } /* Haut du profil (1.1.0, src/ProfileView.php) : bannière (cos-ban-*), avatar dans son cadre (cos-frame-*) qui mord sur le bas de la bannière, pseudo et titre en dessous */ .pf-hero { --s: 7px; position: relative; isolation: isolate; margin-bottom: clamp(28px, 5vw, 48px); padding: 8px; } /* Encart à gradins (comme les encarts de la page Jeux) : filet laiton, fond de carte, bannière rentrée avec ses propres gradins */ .pf-hero::before, .pf-hero::after { content: ""; position: absolute; } .pf-hero::before { inset: 0; z-index: -2; background: var(--brass); opacity: .75; } .pf-hero::after { inset: 1px; z-index: -1; background: var(--card); } .pf-hero > .pf-banner { --s: 5px; } .pf-hero::before, .pf-hero::after, .pf-hero > .pf-banner { clip-path: polygon( 0 calc(2*var(--s)), var(--s) calc(2*var(--s)), var(--s) var(--s), calc(2*var(--s)) var(--s), calc(2*var(--s)) 0, calc(100% - 2*var(--s)) 0, calc(100% - 2*var(--s)) var(--s), calc(100% - var(--s)) var(--s), calc(100% - var(--s)) calc(2*var(--s)), 100% calc(2*var(--s)), 100% calc(100% - 2*var(--s)), calc(100% - var(--s)) calc(100% - 2*var(--s)), calc(100% - var(--s)) calc(100% - var(--s)), calc(100% - 2*var(--s)) calc(100% - var(--s)), calc(100% - 2*var(--s)) 100%, calc(2*var(--s)) 100%, calc(2*var(--s)) calc(100% - var(--s)), var(--s) calc(100% - var(--s)), var(--s) calc(100% - 2*var(--s)), 0 calc(100% - 2*var(--s))); } .pf-banner { position: relative; display: block; height: clamp(120px, 20vw, 220px); overflow: hidden; isolation: isolate; } .pf-banner::before, .pf-banner::after { content: ""; position: absolute; pointer-events: none; } .pf-hero-row { --ov: clamp(48px, 7vw, 72px); position: relative; display: flex; align-items: flex-start; flex-wrap: wrap; gap: 14px 28px; margin-top: calc(-1 * var(--ov)); padding: 0 clamp(16px, 3vw, 36px) clamp(18px, 3vw, 28px); } .pf-avatar { position: relative; flex: none; } .pf-avatar img { display: block; width: clamp(96px, 16vw, 144px); height: clamp(96px, 16vw, 144px); border-radius: 50%; object-fit: cover; background: var(--card); } .pf-id { flex: 1 1 260px; min-width: 0; padding-top: calc(var(--ov) + 12px); } .pf-name { margin: 0; font-size: clamp(26px, 4.4vw, 42px); font-weight: 300; letter-spacing: .1em; text-transform: uppercase; line-height: 1.15; overflow-wrap: anywhere; } .pf-title { width: fit-content; margin: 6px 0 0; color: var(--brass-ink); font-size: 13px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; cursor: help; } .pf-title::before { content: "◆ "; font-size: .8em; } .pf-title:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; } .pf-title-hint { display: block; margin-top: 4px; color: var(--muted); font-size: 12.5px; } .pf-id .pf-count { margin-top: 14px; } /* Son profil : « Modifier le profil » au-dessus de « Partager », à droite, chacun à sa largeur, centrés en hauteur dans la partie sombre de l'encart (sous la bannière) : la colonne part du bas de la bannière (--ov) et descend jusqu'au bas de l'encart (marge négative : le bas de la rangée --pb et le retrait de l'encart, 8 px moins le filet). */ .pf-hero-row:has(.pf-own-actions) { --pb: clamp(16px, 2.4vw, 22px); padding-bottom: var(--pb); } .pf-own-actions { align-self: stretch; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 12px; margin: 0 0 calc(-1 * (var(--pb) + 7px)) auto; padding-top: var(--ov); } .pf-id .sm-msg:empty { display: none; } /* profil d'un ami : pas de place réservée au message tant qu'il n'y en a pas */ .pf-hero-row:has(.pf-more) { padding-bottom: clamp(14px, 2.2vw, 20px); } /* Profil d'un ami : les actions graves dans un menu « ⋯ » à droite (retirer, signaler, bloquer : en rouge) */ .pf-more { position: relative; margin: calc(var(--ov) + 12px) 0 0 auto; } .pf-more-btn { padding: 9px 11px; } .pf-more-btn svg { fill: currentColor; stroke: none; } .pf-hero:has(.pf-more-menu:not([hidden])) { z-index: 5; } .pf-more-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 5; display: grid; min-width: 236px; padding: 6px; background: var(--surface); border: 1px solid var(--brass-line); box-shadow: 0 14px 34px rgba(0, 0, 0, .4); } .pf-more-menu[hidden] { display: none; } .pf-more-menu:not([hidden]) { animation: wc-fade-in .18s ease backwards; } .pf-more-item { appearance: none; display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px; border: 0; background: none; color: var(--err-ink); font: 500 12px/1.2 var(--font); letter-spacing: .12em; text-transform: uppercase; text-align: left; cursor: var(--cur-hand); transition: background .2s ease, color .2s ease; } .pf-more-item + .pf-more-item { border-top: 1px solid var(--line); } .pf-more-item:hover, .pf-more-item:focus-visible { background: color-mix(in srgb, var(--err-ink) 12%, transparent); } .pf-more-item:focus-visible { outline: 2px solid var(--err-ink); outline-offset: -2px; } .pf-more-item.is-confirm { background: #b8453f; color: #fff; } .pf-more-item:disabled { opacity: .5; cursor: var(--cur-blocked); } .pf-more-item svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* Cadres d'avatar (Cosmetics::DEFS) */ .cos-frame-classique img { border: 3px solid var(--brass-line); box-shadow: 0 0 0 5px var(--card); } /* Bannières (Cosmetics::DEFS) : tout en CSS, à l'échelle de la bannière (la même sert au profil, à l'aperçu et aux miniatures de « Modifier le profil »). « Éventail » en 10 couleurs : classe commune .cos-ban-ev (le dessin) + .cos-ban-ev- (les couleurs). D'autres dessins attendent dans design/bannieres-de-cote.css. */ .cos-ban-ev { --bn-fan: #c9a45c; --bn-op: .55; background: radial-gradient(120% 140% at 50% 120%, var(--bn-a), var(--bn-b) 60%, var(--bn-c)); } .cos-ban-ev::before { left: 50%; bottom: -1px; height: 170%; aspect-ratio: 2; translate: -50% 0; background: var(--bn-fan); opacity: var(--bn-op); -webkit-mask: var(--fan) center / contain no-repeat; mask: var(--fan) center / contain no-repeat; } .cos-ban-ev::after { inset: 8px; border: 1px solid color-mix(in srgb, var(--bn-fan) 40%, transparent); } /* Les 10 couleurs : celles des thèmes du site (Paramètres > Personnalisation), 5 sombres puis 5 claires */ .cos-ban-ev-emeraude { --bn-a: #1f6a4b; --bn-b: #0f3324; --bn-c: #0a2117; } .cos-ban-ev-noir { --bn-a: #3a2e18; --bn-b: #1b1610; --bn-c: #0e0c09; --bn-fan: #d4aa55; } .cos-ban-ev-ardoise { --bn-a: #2b4766; --bn-b: #152536; --bn-c: #0c1117; --bn-fan: #bfa36a; } .cos-ban-ev-vin { --bn-a: #6a1f2e; --bn-b: #321218; --bn-c: #130b0d; --bn-fan: #d6a06a; } .cos-ban-ev-crepuscule { --bn-a: #4a3c86; --bn-b: #221d44; --bn-c: #0d0c18; --bn-fan: #d0a27f; } .cos-ban-ev-sauge { --bn-a: #f2f5ea; --bn-b: #d3dfc7; --bn-c: #b9caa9; --bn-fan: #8a6a20; --bn-op: .6; } .cos-ban-ev-ivoire { --bn-a: #fffaf0; --bn-b: #efe3c4; --bn-c: #dccb9c; --bn-fan: #8f6c16; --bn-op: .6; } .cos-ban-ev-marbre { --bn-a: #ffffff; --bn-b: #e6ebec; --bn-c: #c9d3d4; --bn-fan: #7d6024; --bn-op: .55; } .cos-ban-ev-bordeaux { --bn-a: #fff7ee; --bn-b: #efdccb; --bn-c: #dcbfa9; --bn-fan: #7b2d34; --bn-op: .55; } .cos-ban-ev-aube { --bn-a: #fcfbff; --bn-b: #e2dcef; --bn-c: #c9c0de; --bn-fan: #96603e; --bn-op: .55; } /* ---------- « Modifier le profil » (public/profil-modifier.php, assets/profile-edit.js) : l'aperçu sur toute la largeur, un menu vers les sections, puis les sections l'une sous l'autre ---------- */ .pe-top { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; margin-bottom: clamp(20px, 3vw, 32px); } .pe-top h1 { margin: 0; font-size: clamp(24px, 3.6vw, 34px); font-weight: 300; letter-spacing: .12em; text-transform: uppercase; } .pe-top .btn-tertiary svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .pe-prev .pf-hero { margin-bottom: 10px; } .pe-prev > .sm-note { margin: 0; text-align: center; } .pe-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: clamp(18px, 3vw, 28px) 0 clamp(24px, 4vw, 40px); padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .pe-nav a { padding: 8px 14px; border: 1px solid var(--line); color: var(--muted); font-size: 11.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; transition: color .25s ease, border-color .25s ease, background .25s ease; } .pe-nav a:hover, .pe-nav a:focus-visible { color: var(--brass-ink); border-color: var(--brass); background: var(--band); } .pe-nav a:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; } .pe-form { display: grid; gap: clamp(20px, 3vw, 32px); padding-bottom: 110px; } .pe-panel { min-width: 0; padding: clamp(18px, 2.6vw, 28px); border: 1px solid var(--line); background: var(--card); scroll-margin-top: 96px; } .pe-panel > h2, .pe-head h2 { margin: 0 0 18px; font-size: 13px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--brass-ink); } .pe-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); } .pe-head h2 { margin: 0; } .pe-panel > .sm-note { margin: 16px 0 0; } .pe-panel > .pe-lead { margin: 0 0 18px; } .pe-panel .av-cat:first-of-type { margin-top: 0; } .pe-panel .av-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); } .pe-panel .av-opt { display: block; } .pe-panel .av-opt:has(input:checked) { border-color: var(--brass); } .pe-panel .av-opt:has(input:focus-visible) { outline: 2px solid var(--brass); outline-offset: 2px; } .pe-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px 14px; } .pe-opts-ban { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } .pe-opt { display: grid; gap: 7px; justify-items: center; text-align: center; cursor: var(--cur-hand); } .pe-opt .pe-lb { font-size: 12.5px; letter-spacing: .06em; color: var(--text); } .pe-opt small { color: var(--muted); font-size: 11.5px; line-height: 1.35; } .pe-opt:has(input:checked) .pe-lb { color: var(--brass-ink); font-weight: 500; } .pe-opt:has(input:checked) :is(.pe-ban, .pe-style, .pe-frame img) { outline: 2px solid var(--brass); outline-offset: 3px; } .pe-opt:has(input:focus-visible) :is(.pe-ban, .pe-style, .pe-frame img) { outline: 2px dashed var(--brass); outline-offset: 3px; } .pe-opt.is-locked { cursor: not-allowed; opacity: .5; } .pe-opt.is-locked :is(.pe-ban, .pe-style) { filter: grayscale(1); } .pe-ban { width: 100%; height: 72px; border: 1px solid var(--line); } .pe-frame img { width: 76px; height: 76px; } .pe-style { display: grid; grid-template-rows: 18px 1fr; gap: 6px; width: 100%; height: 72px; padding: 6px; border: 1px solid var(--line); background: var(--bg); } .pe-style i { display: block; background: var(--surface); border: 1px solid var(--line); } .pe-style i:first-child { grid-column: 1 / -1; background: var(--band); border-top: 2px solid var(--brass); } .pe-style.cos-style-classique { grid-template-columns: 1fr 1fr; } .pe-titles { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; max-height: 236px; overflow-y: auto; padding: 3px 10px 3px 3px; overscroll-behavior: contain; } /* L'aperçu garde la place du titre même sans titre : choisir « Aucun titre » ne fait pas bouger la page */ .pe-prev .pf-title { min-height: 1.6em; } .pe-prev .pf-title[hidden] { display: block; visibility: hidden; } .pe-chip { cursor: var(--cur-hand); } .pe-chip[hidden] { display: none; } .pe-chip span { display: inline-block; padding: 7px 12px; border: 1px solid var(--line); color: var(--muted); font-size: 11.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; transition: color .2s ease, border-color .2s ease, background .2s ease; } .pe-chip-none span { border-style: dashed; border-color: var(--brass-line); } .pe-chip:hover span { color: var(--text); border-color: var(--brass-line); } .pe-chip:has(input:checked) span { color: var(--brass-ink); border-color: var(--brass); background: var(--band); } .pe-chip-none:has(input:checked) span { border-style: dashed; } .pe-chip:has(input:focus-visible) span { outline: 2px solid var(--brass); outline-offset: 2px; } .pe-panel .bk.pf-ach { margin: 0; } .pf-editor .save-bar { flex-wrap: wrap; } .pf-editor .save-bar .sm-msg { flex-basis: 100%; margin: 0; text-align: center; } .pf-editor .save-bar .sm-msg:empty { display: none; } @media (max-width: 760px) { .pe-totop { right: auto; left: max(18px, env(safe-area-inset-left, 0px)); } } @media (max-width: 520px) { .pf-hero-row { flex-direction: column; align-items: center; text-align: center; } .pf-id { flex: none; width: 100%; padding-top: 0; } .pf-title { margin-inline: auto; } .pf-more { margin: 0 auto; } .pf-own-actions { align-self: center; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; margin: 0 auto; padding-top: 0; } .pf-more-menu { right: auto; left: 50%; translate: -50% 0; } } /* ---------- Image « Partager ma vitrine » (assets/profile-share.js) : mise en page hors de l'écran puis dessinée dans une image de 1080 px. Toutes les tailles sont fixées ici (aucune ne dépend de la fenêtre) : l'image doit avoir la même mise en page que ce qui a été mesuré dans la page. ---------- */ .sh-holder { position: fixed; left: -20000px; top: 0; pointer-events: none; } .sh-root { width: 1080px; padding: 56px 56px 40px; background: radial-gradient(80% 50% at 50% 0, var(--tint), transparent), var(--bg); color: var(--text); font: 400 16px/1.6 var(--font); -webkit-font-smoothing: antialiased; font-variant-numeric: lining-nums; } .sh-root *, .sh-root *::before, .sh-root *::after { animation: none !important; transition: none !important; } .sh-root .pf-hero { margin: 0 0 40px; } .sh-root .pf-banner { height: 216px; } .sh-root .pf-hero-row { --ov: 72px; flex-direction: row; align-items: flex-start; gap: 14px 28px; padding: 0 36px 28px; text-align: left; } .sh-root .pf-avatar img { width: 144px; height: 144px; } .sh-root .pf-id { flex: 1 1 260px; width: auto; padding-top: calc(var(--ov) + 12px); } .sh-root .pf-name { font-size: 42px; } .sh-root .pf-title { margin-inline: 0; } .sh-head { margin: 0 0 22px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--brass-ink); } .sh-root .cards.collection.pf-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; } .sh-root .card .card-in, .sh-root .card .card-front { transform: none !important; } .sh-root .card .card-back { display: none !important; } .sh-head-ach { margin-top: 40px; } .sh-root .bk.sh-ach { margin: 0; } .sh-root .sh-ach .pf-ach-row { padding: 6px 0 4px; } .sh-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--brass-line); } .sh-foot .brand { font-size: 18px; } .sh-url { color: var(--muted); font-size: 15px; letter-spacing: .14em; } .sh-box .sh-preview { display: block; width: auto; max-width: 100%; max-height: 62vh; margin: 14px auto 18px; border: 1px solid var(--line); box-shadow: 0 14px 34px rgba(0, 0, 0, .3); } .sh-box .sh-actions { justify-content: center; } .pf-count { margin: 0; color: var(--muted); font-size: 15px; } .pf-count b { color: var(--brass-ink); font-size: 22px; font-weight: 500; margin-right: .2em; } .pf-count small { display: block; margin-top: 3px; font-size: 12.5px; } .pf-note { margin: 14px 0 0; max-width: 46ch; color: var(--muted); font-size: 13.5px; line-height: 1.5; } .pf-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .pf-showcase-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--line); } .pf-showcase-head h2 { margin: 0; font-size: 13px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--brass-ink); } .pf-cards, .cards.collection.pf-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 22px); } .pf-empty { aspect-ratio: 5 / 7; display: grid; place-items: center; border: 1px dashed var(--brass-line); color: var(--muted); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; text-align: center; padding: 8px; } /* ---------- Statistiques du profil (src/StatsView.php) : deux anneaux (raretés, styles) et des chiffres, sous la vitrine ---------- */ .pf-stats { margin-top: clamp(32px, 5vw, 56px); } .pf-stats-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--line); } .pf-stats-head h2 { margin: 0; font-size: 13px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--brass-ink); } .pf-stats .sm-msg:empty { display: none; } .st-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } .st-card { margin: 0; padding: 18px 20px 20px; border: 1px solid var(--line); border-top: 2px solid var(--brass); background: var(--surface); min-width: 0; } .st-card figcaption { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 14px; } .st-card h3 { margin: 0; font-size: 12.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text); } .st-card .sel select { font-size: 13px; } .st-kind[hidden] { display: none; } .st-donut { display: flex; align-items: center; gap: 22px; } .st-donut-svg { flex: none; width: clamp(130px, 18vw, 170px); height: auto; transform: rotate(0deg); } .st-donut-bg { fill: none; stroke: var(--track); stroke-width: 6; } .st-seg { fill: none; stroke-width: 6; } .st-seg.r1 { stroke: var(--r1); } .st-seg.r2 { stroke: var(--r2); } .st-seg.r3 { stroke: var(--r3); } .st-seg.r4 { stroke: var(--r4); } .st-seg.r5 { stroke: var(--r5); } .st-seg.r6 { stroke: var(--r6); } .st-seg.r7 { stroke: var(--r7); } .sx-normal { --sxc: var(--r1); } .sx-xa { --sxc: var(--brass); } .sx-fa4 { --sxc: color-mix(in srgb, var(--brass) 45%, var(--text)); } .sx-theme { --sxc: var(--r4); } .st-seg.sx-normal, .st-seg.sx-xa, .st-seg.sx-fa4, .st-seg.sx-theme { stroke: var(--sxc); } .st-donut-n { font: 500 5.2px var(--font); fill: var(--text); font-variant-numeric: tabular-nums; } .st-donut-l { font: 400 2.6px var(--font); fill: var(--muted); letter-spacing: .12em; text-transform: uppercase; } .st-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; flex: 1; min-width: 0; font-size: 13.5px; } .st-legend li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; align-items: center; gap: 4px 10px; } .st-legend i { width: 9px; height: 9px; rotate: 45deg; background: var(--rc, var(--sxc)); } .st-legend span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .st-legend b { font-weight: 500; font-variant-numeric: tabular-nums; } .st-legend small { min-width: 4.6em; text-align: right; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; } .st-foot { margin: 14px 0 0; color: var(--muted); font-size: 13px; } .st-foot b { color: var(--brass-ink); font-weight: 500; } .st-tiles { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; } .st-tile { display: grid; align-content: start; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); background: var(--card); min-width: 0; } .st-tile b { font-size: 24px; font-weight: 400; letter-spacing: .02em; color: var(--brass-ink); font-variant-numeric: tabular-nums; } .st-tile b.st-best { font-size: 17px; line-height: 1.25; color: var(--rc, var(--brass-ink)); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .st-tile span { font-size: 13px; color: var(--text); } .st-tile small { font-size: 12px; color: var(--muted); } .st-since { margin: 16px 0 0; font-size: 12px; color: var(--muted); } @media (max-width: 900px) { .st-grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 520px) { .st-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .st-tile { padding: 12px; } .st-tile b { font-size: 20px; } .st-donut { flex-direction: column; align-items: stretch; } .st-donut-svg { align-self: center; } .pf-stats-head { flex-wrap: wrap; } } @media (max-width: 900px) { .pf-cards, .cards.collection.pf-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 520px) { .pf-cards, .cards.collection.pf-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pf-actions { justify-content: center; } } /* Modale « Modifier la vitrine » : les 6 emplacements en haut, puis les cartes de la collection à choisir */ .vt-slots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; } .vt-slot { position: relative; appearance: none; aspect-ratio: 5 / 7; display: grid; place-items: center; padding: 0; border: 1px dashed var(--brass-line); background: none; color: var(--muted); font: inherit; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; text-align: center; cursor: var(--cur-hand); overflow: hidden; } .vt-slot.is-active { border-style: solid; border-color: var(--brass); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brass) 30%, transparent); } /* La carte elle-même dans l'emplacement (copie de la carte : elle se réduit avec lui) ; les clics vont à l'emplacement, pas à la carte */ .vt-slot.has-card { touch-action: none; user-select: none; -webkit-user-select: none; } .vt-slot .vt-mini { display: block; grid-template-columns: none; width: 100%; height: 100%; margin: 0; padding: 0; list-style: none; pointer-events: none; } .vt-slot .vt-mini .card { width: 100%; height: 100%; margin: 0; } .vt-slot .vt-mini img { -webkit-user-drag: none; } .vt-slot:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; } .vt-slot.is-dragging { opacity: .35; } .vt-slot.is-drop { border-style: solid; border-color: var(--brass); background: color-mix(in srgb, var(--brass) 14%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brass) 45%, transparent); } .vt-ghost { position: fixed; top: 0; left: 0; z-index: 10000; aspect-ratio: 5 / 7; opacity: .9; pointer-events: none; box-shadow: 0 10px 28px rgba(0, 0, 0, .45); } .vt-ghost .vt-mini { display: block; width: 100%; height: 100%; margin: 0; padding: 0; list-style: none; } .vt-ghost .vt-mini .card { width: 100%; height: 100%; margin: 0; } .vt-slot.has-card { border-style: solid; border-color: var(--line); background: var(--card); } .vt-slot.has-card.is-active { border-color: var(--brass); } .vt-slot .vt-x { position: absolute; top: 3px; right: 3px; z-index: 2; appearance: none; border: 0; padding: 0; cursor: var(--cur-hand); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #b8453f; color: #fff; } .vt-slot .vt-x svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; } .vt-search { display: flex; gap: 10px; margin-bottom: 12px; } .vt-search input { flex: 1; min-width: 0; appearance: none; border: 1px solid var(--line); background: var(--card); color: var(--text); padding: 11px 14px; font: inherit; font-size: 15px; } .vt-search input:focus-visible { outline: none; border-color: var(--brass); } .pick-cards { grid-template-columns: repeat(var(--pick-cols, 6), minmax(0, 1fr)) !important; gap: 10px !important; } /* --pick-cols : posé par card-picker.js (3 rangées pleines) */ .pk-list { transition: opacity .18s ease; } .pk-list.is-loading { opacity: .45; pointer-events: none; } .pk-pager { margin: 16px 0; } .pk-pager .pager { margin: 0; } .pick-cards .card { cursor: var(--cur-hand); } .pick-cards .card.is-picked { outline: 2px solid var(--brass); outline-offset: 2px; } @media (max-width: 760px) { .pick-cards { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } /* Sélection multiple de la collection (assets/collection-select.js) : bouton « Sélectionner », cartes cochées et bandeau flottant d'actions groupées. */ .coll-select-toggle { align-self: flex-end; min-height: 46px; background: var(--card); } .coll-select-toggle span { text-align: left; } html.coll-selecting [data-part="results"] .cards.collection .card-in { cursor: var(--cur-hand); } [data-part="results"] .card.is-selected { outline: 3px solid var(--brass); outline-offset: 3px; } .sel-badge { position: absolute; z-index: 4; top: 10px; left: 10px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--brass-ink); box-shadow: 0 0 0 2px var(--surface); pointer-events: none; } .sel-badge svg { width: 14px; height: 14px; fill: none; stroke: var(--on-brass); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } /* Onglet « Chercher dans la base » : un grand champ de recherche au milieu de la page (public/collection.php, src/BaseSearch.php) */ .coll-basesearch { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 18px auto 10px; padding: 8px 0; text-align: center; } .coll-basesearch .cb-lead { margin: 0; max-width: 56ch; color: var(--muted); font-size: 15px; line-height: 1.6; } .coll-basesearch .cb-search { flex: none; width: min(100%, 640px); max-width: none; } .coll-basesearch .cb-search input { font-size: 18px; padding-top: 18px; padding-bottom: 18px; } /* Recherche en cours (collection-live.js, searching) : la barre est grisée et figée, et trois losanges laiton s'animent le temps que le serveur lise la base */ .coll-basesearch .cb-search { transition: opacity .2s ease, filter .2s ease; } .coll-basesearch.is-searching .cb-search { opacity: .45; filter: grayscale(1); pointer-events: none; } .cb-loading { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 16px 0 0; color: var(--muted); font-size: 14px; letter-spacing: .08em; } .cb-loading[hidden] { display: none; } .cb-loading span { margin-left: 6px; } .cb-spin { width: 9px; height: 9px; background: var(--brass); transform: rotate(45deg) scale(.55); opacity: .35; animation: cb-spin 1.2s ease-in-out infinite; } .cb-spin:nth-child(2) { animation-delay: .2s; } .cb-spin:nth-child(3) { animation-delay: .4s; } @keyframes cb-spin { 0%, 100% { transform: rotate(45deg) scale(.55); opacity: .35; } 40% { transform: rotate(45deg) scale(1); opacity: 1; } } /* moins d'animations (boot.js, docs/animations.md) */ :where(:root[data-motion="reduce"]) .cb-spin { animation: none; opacity: 1; transform: rotate(45deg) scale(.8); } .coll-basesearch .cb-hint { margin: 0; color: var(--muted); font-size: 13px; letter-spacing: .02em; } .coll-base .coll-none { text-align: center; } /* Bandeau flottant des filtres actifs de la Collection (assets/collection-recap.js) : sous l’en-tête, seulement quand le formulaire a défilé hors de l’écran */ .coll-recap { position: fixed; z-index: 55; top: 66px; left: 50%; translate: -50% 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 8px; width: max-content; max-width: min(calc(100vw - 24px), 920px); padding: 8px 14px; background: color-mix(in srgb, var(--card) 94%, transparent); border: 1px solid var(--brass-line); box-shadow: 0 10px 24px rgba(0, 0, 0, .35); backdrop-filter: blur(6px); font-size: 12.5px; animation: undo-in .3s var(--ease) both; } .coll-recap[hidden] { display: none; } .coll-recap .cr-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 10px; border: 1px solid var(--brass-line); background: color-mix(in srgb, var(--brass) 10%, transparent); color: var(--text); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .coll-recap .cr-chip i { font-style: normal; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--brass-ink); } .coll-recap .cr-reset { padding: 3px 8px; border: 0; background: none; color: var(--brass-ink); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: var(--cur-hand); } @media (max-width: 760px) { .coll-recap { top: 58px; font-size: 12px; } } /* moins d'animations (boot.js, docs/animations.md) */ :where(:root[data-motion="reduce"]) .coll-recap { animation: none; } /* Bandeau « Annuler le recyclage » (assets/card-modal.js : WikiCollect.offerUndo) : flotte en bas de l'écran quelques secondes */ .undo-bar { position: fixed; z-index: 110; left: 50%; bottom: 24px; translate: -50% 0; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 16px; width: max-content; max-width: calc(100vw - 24px); padding: 12px 20px; background: var(--card); border: 1px solid var(--brass-line); box-shadow: 0 14px 30px rgba(0, 0, 0, .45); font-size: 14px; animation: undo-in .35s var(--ease) both; } .undo-bar .undo-count { min-width: 2.2em; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; } .undo-bar.is-done { border-color: var(--brass); } .undo-bar.is-error { border-color: #b4483f; } @keyframes undo-in { from { opacity: 0; translate: -50% 14px; } } @media (max-width: 760px) { .undo-bar { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } } /* moins d'animations (boot.js, docs/animations.md) */ :where(:root[data-motion="reduce"]) .undo-bar { animation: none; } /* Bandeau flottant de la sélection multiple : cadre à gradins et double filet laiton, comme les encarts de Jeux ; boutons de la fiche carte (favoris, recycler) ; liste d'étiquettes = celle de la fiche */ .sel-bar { --s: 5px; position: fixed; z-index: 60; left: 50%; bottom: 24px; translate: -50% 0; isolation: isolate; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; width: max-content; max-width: calc(100vw - 24px); padding: 18px 30px; filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .45)); } .sel-bar::before, .sel-bar::after { content: ""; position: absolute; } .sel-bar::before { inset: 0; z-index: -2; background: var(--brass); opacity: .75; } .sel-bar::after { inset: 1px; z-index: -1; background: radial-gradient(ellipse 60% 140% at 12% 100%, color-mix(in srgb, var(--brass) 14%, transparent), transparent 70%), var(--card); box-shadow: inset 0 0 0 6px var(--card), inset 0 0 0 7px var(--brass-line); } .sel-bar[hidden] { display: none; } .sel-bar:not([hidden]) { animation: sb-in .35s var(--ease) backwards; } .sel-bar.is-leaving { animation: sb-out .22s ease-in both; } .sel-count { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 11.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .sel-count::before { content: ""; flex: none; width: 8px; height: 8px; rotate: 45deg; background: var(--brass); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brass) 25%, transparent); } .sel-count b { font-size: 22px; font-weight: 300; line-height: 1; letter-spacing: .02em; color: var(--text); font-variant-numeric: tabular-nums; } .sel-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; } .sel-btn:disabled, .rc-btn:disabled { opacity: .5; cursor: progress; } .sel-btn .sel-caret { width: 11px; height: 11px; margin-left: 2px; stroke-width: 2; transition: rotate .25s ease; } .sel-btn[aria-expanded="true"] .sel-caret { rotate: 180deg; } .sel-clear { appearance: none; padding: 6px 2px; border: 0; background: none; color: var(--muted); font: 500 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--muted) 40%, transparent); text-underline-offset: 5px; cursor: var(--cur-hand); } .sel-clear:hover, .sel-clear:focus-visible { color: var(--text); text-decoration-color: var(--brass); } .sel-clear:disabled { opacity: .5; cursor: progress; } .sel-tag-wrap { position: relative; } .sel-tag-panel { position: absolute; z-index: 5; left: 0; bottom: calc(100% + 12px); width: max(280px, 100%); border-top: 2px solid var(--brass); box-shadow: 0 14px 34px rgba(0, 0, 0, .35); } .sel-tag-panel:not([hidden]) { animation-name: wc-pop-up-in; transform-origin: 0 100%; } .sel-tag-panel.is-leaving { animation-name: wc-pop-up-out; } .sel-tag-panel .ctf-list { max-height: 240px; } .sel-tag-panel .ctf-opt { appearance: none; width: 100%; border: 0; background: none; color: var(--text); font: inherit; font-size: 14px; text-align: left; } .sel-tag-panel .ctf-opt:hover, .sel-tag-panel .ctf-opt:focus-visible { background: var(--band); } .sel-seg { display: flex; border-bottom: 1px solid var(--line); background: var(--card); } .sel-seg-btn { appearance: none; flex: 1; padding: 11px 10px; border: 0; background: none; color: var(--muted); font: 500 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; cursor: var(--cur-hand); transition: background .25s ease, color .25s ease; } .sel-seg-btn + .sel-seg-btn { border-left: 1px solid var(--line); } .sel-seg-btn:hover, .sel-seg-btn:focus-visible { color: var(--text); } .sel-seg-btn.is-on { background: color-mix(in srgb, var(--brass) 18%, transparent); color: var(--brass-ink); box-shadow: inset 0 -2px 0 var(--brass); } .sel-bar .sm-msg { flex-basis: 100%; margin: 0; text-align: center; } .sel-bar .sm-msg:empty { display: none; } @media (max-width: 760px) { .sel-bar { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); width: calc(100vw - 24px); padding: 14px 14px; gap: 10px 16px; } .sel-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 8px; } .sel-btn, .sel-bar .rc-btn { width: 100%; height: 44px; justify-content: center; gap: 6px; padding-inline: 6px; font-size: 10px; letter-spacing: .04em; } .sel-btn span { overflow: hidden; text-overflow: ellipsis; } .sel-tag-wrap { position: static; } /* la liste se cale sur le bandeau (toute la largeur), pas sur son bouton */ .sel-tag-panel { left: 50%; translate: -50% 0; width: min(340px, calc(100vw - 24px)); } } /* moins d'animations (boot.js, docs/animations.md) */ :where(:root[data-motion="reduce"]) .sel-bar:not([hidden]), :where(:root[data-motion="reduce"]) .sel-bar.is-leaving { animation: none; } /* Tablettes tactiles (761–1100 px) : la barre de navigation du bas y est aussi affichée (voir .bottom-nav) ; les bandeaux flottants passent au-dessus d'elle, comme sur téléphone, au lieu de la recouvrir */ @media (hover: none) and (pointer: coarse) and (min-width: 761px) and (max-width: 1100px) { body:has(.bottom-nav) :is(.save-bar, .undo-bar, .sel-bar) { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } } /* Modale « Changer d'avatar » */ .av-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 6px 0 18px; } /* Collection au doigt : l'appui long sur une carte active la sélection multiple (collection-select.js), pas la sélection de texte ni le menu de l'image */ @media (pointer: coarse) { [data-part="results"] .card { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } } .av-cat { margin: 14px 0 0; font-size: 12.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--brass-ink); } .av-cat + .av-grid { margin-top: 10px; } .av-opt { appearance: none; padding: 0; border: 3px solid var(--line); border-radius: 50%; background: var(--card); cursor: var(--cur-hand); overflow: hidden; aspect-ratio: 1; transition: border-color .25s ease, scale .25s var(--ease); } .av-opt img { display: block; width: 100%; height: 100%; object-fit: cover; } .av-opt:hover, .av-opt:focus-visible { border-color: var(--brass-line); scale: 1.05; } .av-opt.is-on { border-color: var(--brass); } .av-opt:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; } @media (max-width: 420px) { .av-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .vt-slots { gap: 6px; } } /* Paramètres : bascule « compte privé » */ .settings .auth-card .btn-secondary { width: auto; } .is-in-modal .sd-title { display: none; } /* La classe « collection » (grille de la page Collection) ajoute de grandes marges : on les retire pour la vitrine et la liste de choix */ .cards.collection.pf-cards { padding: 0 0 24px; } .cards.collection.pick-cards { padding: 0; } .modal-box.sm-box { text-align: left; justify-items: stretch; } .sm-box .fr-row { width: 100%; box-sizing: border-box; } .fr-name, .social-dd a.fr-name { text-decoration: none; } /* Menu Compte : chaque entrée a son icône (Profil, Amis, Paramètres, Aide et actualités, Déconnexion) */ .acct-dropdown .menu-link, .acct-dropdown .menu-row { display: flex; align-items: center; gap: 12px; } .acct-dropdown .menu-link .ic, .acct-dropdown .menu-row .ic { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* Notification sans joueur (nouvelle actualité, conditions mises à jour) : un losange laiton à la place de l'avatar */ .nt-ico { grid-row: 1 / span 2; place-self: center; width: 14px; height: 14px; rotate: 45deg; border: 1px solid var(--brass); background: color-mix(in srgb, var(--brass) 30%, transparent); } /* ================= Paramètres en onglets (Personnalisation / Sécurité et confidentialité) : assets/settings.js ================= */ .st-tabs { display: flex; flex-wrap: wrap; gap: 4px 8px; max-width: 440px; margin: 0 auto 32px; border-bottom: 1px solid var(--line); } .st-tab { appearance: none; flex: 1 1 auto; margin-bottom: -1px; padding: 14px 16px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font: 500 12px/1.3 var(--font); letter-spacing: .16em; text-transform: uppercase; text-align: center; cursor: var(--cur-hand); transition: color .3s ease, border-color .3s ease; } .st-tab:hover, .st-tab:focus-visible { color: var(--text); } .st-tab[aria-selected="true"] { color: var(--brass-ink); border-bottom-color: var(--brass); } .st-tab:focus-visible { outline: 2px solid var(--brass); outline-offset: -2px; } .st-panel { display: block; } .st-panel[hidden] { display: none; } .st-panel:not([hidden]) { animation: wc-fade-in .3s ease backwards; } /* Les encarts d'un onglet s'imbriquent en colonnes (comme des briques) : chacun garde sa hauteur, le suivant se glisse dans la colonne la moins remplie */ .st-cards { display: block; max-width: 440px; margin: 0 auto; } .st-cards > .auth-card { width: 100%; margin: 0 0 32px; break-inside: avoid; } .st-gap { height: 14px; } .st-gap--lg { height: 28px; } /* Téléphone et tablette : les deux onglets côte à côte, dans un cadre laiton, l'onglet actif en aplat (un « sélecteur » bien lisible) */ @media (max-width: 999px) { .st-tabs { flex-wrap: nowrap; gap: 4px; padding: 4px; border: 1px solid var(--brass-line); background: var(--surface); } .st-tab { flex: 1 1 0; min-width: 0; margin: 0; padding: 12px 8px; border: 0; font-size: 11px; letter-spacing: .1em; line-height: 1.35; transition: background .25s ease, color .25s ease; } .st-tab[aria-selected="true"] { background: var(--brass-ink); color: var(--on-brass); } .st-tab[aria-selected="true"]:focus-visible { outline-color: var(--text); } } @media (min-width: 1000px) { .st-tabs { max-width: 1240px; gap: 0 12px; } .st-tab { flex: 0 0 auto; padding: 16px 26px; } .st-cards { max-width: 1240px; columns: 2; column-gap: 40px; } .st-cards > .auth-card { margin: 0 0 40px !important; } } /* Interrupteur (thème clair) : une piste à angles en gradins, un losange qui glisse */ /* Interrupteurs des Paramètres (dessin « classique » de Claude Design, dérivé de la variante Astre) : une ligne encadrée (.switch), une piste à angles en gradins (.sw-track, bord laiton qui s'allume au survol) et le texte (.sw-text). Cochée = activé. Dessin .sw-classique pour les réglages (sons du jeu, compte privé) : un médaillon qui glisse et pivote, la piste se remplit de laiton ; le thème clair a son propre dessin (.sw-deco .sw-eventail, plus bas). */ .switch { --sw-steps: polygon(0 6px,3px 6px,3px 3px,6px 3px,6px 0,calc(100% - 6px) 0,calc(100% - 6px) 3px,calc(100% - 3px) 3px,calc(100% - 3px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 3px) calc(100% - 6px),calc(100% - 3px) calc(100% - 3px),calc(100% - 6px) calc(100% - 3px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 3px),3px calc(100% - 3px),3px calc(100% - 6px),0 calc(100% - 6px)); position: relative; display: flex; align-items: center; gap: 16px; padding: 14px; border: 1px solid var(--line); background: var(--card); cursor: var(--cur-hand); -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } .switch input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; } .sw-track { position: relative; display: block; flex: none; width: 72px; height: 34px; overflow: hidden; } .sw-track::before, .sw-track::after { content: ""; position: absolute; clip-path: var(--sw-steps); } .sw-track::before { inset: 0; background: var(--brass-line); transition: background-color .3s; } .sw-track::after { inset: 1px; background: var(--card); } .sw-track > * { position: absolute; z-index: 1; display: block; } .switch:hover .sw-track::before { background: var(--brass); } .switch:has(input:focus-visible) .sw-track { outline: 2px solid var(--brass); outline-offset: 3px; } .sw-text { display: flex; flex-direction: column; min-width: 0; } .sw-text b { display: block; font-weight: 500; } .sw-text small { display: block; margin-top: 4px; color: var(--muted); font-size: 12.5px; line-height: 1.45; } .sw-track > *, .sw-track > i::before, .sw-track > i::after { transition: transform .4s cubic-bezier(.65, 0, .35, 1), opacity .4s ease, color .4s ease, background-color .4s ease, box-shadow .4s ease; } /* moins d'animations (boot.js, docs/animations.md) */ :where(:root[data-motion="reduce"]) .sw-track > *, :where(:root[data-motion="reduce"]) .sw-track > i::before, :where(:root[data-motion="reduce"]) .sw-track > i::after { transition-property: opacity, color, background-color; transition-duration: .15s; } /* Classique : médaillon de laiton */ .sw-classique .sw-track { width: 64px; height: 32px; } .sw-classique i { left: 4px; top: 4px; width: 24px; height: 24px; border-radius: 50%; z-index: 2; background: var(--brass-ink); } .sw-classique input:checked + .sw-track i { transform: translateX(32px); background: var(--on-brass); } /* Volume des sons (sous l'interrupteur « Sons du jeu ») : une piste laiton avec un losange qui glisse, comme le reste des Paramètres. Masquée quand le son est coupé (assets/settings.js). Le remplissage suit --val (posé en ligne par le script, en px : un pourcentage brut irait plus loin que le curseur, qui ne parcourt jamais toute la largeur du champ — son centre reste à une demi-largeur du bord aux deux extrémités). --thumb (13px) doit rester égal à la largeur du losange ci-dessous. */ .sw-vol { display: flex; align-items: center; gap: 14px; margin-top: 0; padding: 14px; border: 1px solid var(--line); background: var(--card); } .sw-vol[hidden] { display: none; } #vibration-row { margin-top: 24px; } /* de l'air entre le volume des sons et l'interrupteur « Vibrations » */ .sw-vol .vol-ico { flex: none; width: 17px; height: 17px; color: var(--muted); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .sw-vol input[type="range"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; flex: 1; height: 3px; margin: 0; padding: 0; border: 0; background: linear-gradient(to right, var(--brass-ink) var(--val, 100%), var(--track) 0); outline: none; cursor: var(--cur-hand); } .sw-vol input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; background: var(--brass-ink); transform: rotate(45deg); transform-origin: center; box-shadow: 0 0 0 3px var(--card), 0 0 0 4px var(--brass-line); cursor: var(--cur-hand); } .sw-vol input[type="range"]::-moz-range-track { height: 3px; background: transparent; border: none; } .sw-vol input[type="range"]::-moz-range-progress { height: 3px; background: var(--brass-ink); } .sw-vol input[type="range"]::-moz-range-thumb { width: 13px; height: 13px; border: none; border-radius: 0; background: var(--brass-ink); transform: rotate(45deg); transform-origin: center; box-shadow: 0 0 0 3px var(--card), 0 0 0 4px var(--brass-line); cursor: var(--cur-hand); } .sw-vol input[type="range"]:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; } /* Désactivé */ .switch:has(input:disabled) { cursor: var(--cur-blocked); opacity: .5; } .switch:has(input:disabled):hover .sw-track::before { background: var(--brass-line); } /* « Joueurs bloqués » : une ligne-lien comme une entrée de réglage (icône, titre, état, chevron), du même cadre que « Compte privé » */ .st-link { appearance: none; display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px; border: 1px solid var(--line); background: var(--card); color: var(--text); font: inherit; text-align: left; cursor: var(--cur-hand); transition: border-color .25s ease, background .25s ease; } .st-link:hover, .st-link:focus-visible { border-color: var(--brass-line); background: color-mix(in srgb, var(--brass) 6%, var(--card)); } .st-link:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; } .st-link-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; rotate: 45deg; border: 1px solid var(--brass-line); } .st-link-ico svg { width: 18px; height: 18px; rotate: -45deg; fill: none; stroke: var(--brass-ink); stroke-width: 1.7; stroke-linecap: round; } .st-link-text { flex: 1; min-width: 0; } .st-link-text b { display: block; font-weight: 500; } .st-link-text small { display: block; margin-top: 3px; color: var(--muted); font-size: 12.5px; line-height: 1.45; } .st-link-go svg { display: block; width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: translate .25s ease, stroke .25s ease; } .st-link:hover .st-link-go svg, .st-link:focus-visible .st-link-go svg { translate: 3px 0; stroke: var(--brass-ink); } /* Fenêtre « Une seconde, tu n'as pas enregistré ! » : un losange laiton au-dessus du titre */ .leave-mark { display: block; width: 26px; height: 26px; margin: 0 auto 22px; rotate: 45deg; border: 1px solid var(--brass); box-shadow: inset 0 0 0 5px var(--surface), inset 0 0 0 6px var(--brass-line); background: color-mix(in srgb, var(--brass) 55%, transparent); } /* Collection d'un ami : lien de retour au profil, bouton « Voir sa collection » (lien qui a l'allure d'un bouton) */ .coll-back { margin: -6px 0 22px; font-size: 13px; } .coll-back a { color: var(--muted); text-decoration: none; letter-spacing: .08em; } .coll-back a:hover, .coll-back a:focus-visible { color: var(--brass-ink); } /* ================= pièces et page Jeux (0.13.0) : src/Pieces.php, src/Missions.php, src/JeuxView.php, assets/jeux.js ================= */ /* Dessin de la pièce : un bloc SVG sans dimension, présent une fois dans la page (les icônes s'y réfèrent par ) */ .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } /* L'icône de pièce suit la taille du texte où elle se trouve (em) ; quelques contextes ci-dessous la grossissent ou la réduisent un peu */ .wc-piece { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.28em; } /* Portefeuille de l'en-tête (à gauche de l'icône Amis) : pastille à angles en gradins, la pièce puis le solde */ .acct-pill.wallet { flex-direction: row; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; font-size: 14px; letter-spacing: .05em; text-transform: none; } .wallet .wc-piece { width: 1.55em; height: 1.55em; vertical-align: middle; } .wallet b { font-weight: 500; font-variant-numeric: tabular-nums; } /* Mobile : le portefeuille est la première ligne du menu Compte */ .acct-dropdown a.wallet-row { display: flex; align-items: center; gap: 12px; } .wallet-row .wc-piece { width: 1.4em; height: 1.4em; vertical-align: middle; } .wallet-row b { margin-left: auto; font-weight: 500; color: var(--brass-ink); font-variant-numeric: tabular-nums; } /* Page Jeux */ .jeux { max-width: 960px; padding: clamp(40px, 7vw, 80px) 0 72px; } .jeux h1 { margin: 0 0 12px; font-size: clamp(26px, 4vw, 34px); font-weight: 400; letter-spacing: .14em; text-transform: uppercase; } .jeux .doc-lead { max-width: 640px; } .jx-section { margin: 40px 0 0; } .jx-section > h2 { margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--brass-line); font-size: 15px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--brass-ink); } .jx-bonus { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; padding: 12px 16px; border: 1px solid var(--brass-line); background: color-mix(in srgb, var(--brass) 8%, transparent); font-size: 14px; line-height: 1.45; } .jx-msg { min-height: 1.4em; margin: 0 0 12px; color: var(--err-ink); font-size: 14px; } .jx-period { margin: 0 0 30px; } .jx-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; margin: 0 0 12px; } .jx-head h3 { margin: 0; font-size: 18px; font-weight: 500; letter-spacing: .04em; } .jx-reset { color: var(--muted); font-size: 13px; letter-spacing: .04em; } .jx-reset b { font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; } .jx-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } /* Missions : colonnes fixes (texte et barre | bouton ou « Récupérée » | récompense, tout à droite) : toutes les barres ont la même longueur. Hiérarchie : À RÉCUPÉRER (en tête, encadré laiton, bouton plein) > EN COURS (carte en relief, filet laiton à gauche) > RÉCUPÉRÉE (en bas, repliée sur une ligne : ni barre ni fond, texte discret précédé d'une coche). L'ordre est posé par JeuxView. */ .jx-mission { display: grid; grid-template-columns: minmax(0, 1fr) 128px 110px 40px; align-items: center; gap: 12px 24px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--brass-line); transition: border-color .3s ease, background .3s ease; } .jx-mission.is-progress { background: color-mix(in srgb, var(--card) 70%, var(--surface)); border-left-color: var(--brass); box-shadow: 0 1px 0 var(--line); } .jx-mission.is-progress .jx-label { font-weight: 500; } .jx-mission.is-ready { border: 1px solid var(--brass); border-left-width: 3px; background: color-mix(in srgb, var(--brass) 13%, var(--surface)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brass) 25%, transparent), 0 6px 18px -10px color-mix(in srgb, var(--brass) 70%, transparent); } .jx-mission.is-ready .jx-label { font-weight: 500; color: var(--brass-ink); } .jx-mission.is-claimed { padding: 9px 18px; background: none; border: 1px dashed var(--line); } .jx-mission.is-claimed .jx-label { font-size: 13.5px; color: var(--muted); } .jx-mission.is-claimed .jx-pieces b, .jx-mission.is-claimed .jx-packs { color: var(--muted); font-weight: 400; } .jx-mission.is-claimed .wc-piece { filter: grayscale(1) opacity(.6); } .jx-mission.is-meta:not(.is-claimed) { border-style: dashed; border-left-style: solid; } .jx-main { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 4.6em; align-items: center; gap: 8px 14px; } .jx-label { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; line-height: 1.35; } .jx-check { flex: none; width: 15px; height: 15px; fill: none; stroke: var(--brass); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .jx-bar { display: block; height: 6px; background: var(--brass-line); overflow: hidden; } .jx-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #b8862a, #f3d982); transition: width .6s ease; } .jx-count { text-align: right; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; letter-spacing: .04em; } .jx-reward { justify-self: end; display: grid; justify-items: end; gap: 3px; text-align: right; } .jx-pieces { display: inline-flex; align-items: center; gap: 6px; } .jx-pieces b { font-weight: 500; color: var(--brass-ink); font-variant-numeric: tabular-nums; } .jx-packs { color: var(--muted); font-size: 12px; letter-spacing: .04em; } .jx-claim { justify-self: center; animation: jx-call 2.4s ease-in-out infinite; } @keyframes jx-call { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brass) 45%, transparent); } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--brass) 0%, transparent); } } .jx-claim:disabled { animation: none; } .jx-done { justify-self: center; color: var(--muted); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; } @media (max-width: 640px) { .jx-mission { grid-template-columns: minmax(0, 1fr) 84px; } .jx-mission .jx-main { grid-column: 1; grid-row: 1; } .jx-mission .jx-reward { grid-column: 2; grid-row: 1; } .jx-mission .jx-claim { grid-column: 1 / -1; grid-row: 2; } .jx-mission .jx-slot, .jx-mission .jx-done { display: none; } /* sur téléphone, la coche suffit à dire « récupérée » */ } /* moins d'animations (boot.js, docs/animations.md) */ :where(:root[data-motion="reduce"]) .jx-bar i, :where(:root[data-motion="reduce"]) .jx-mission { transition: none; } :where(:root[data-motion="reduce"]) .jx-claim { animation: none; } /* Changer une mission (Missions::swap) : bouton « flèches qui tournent » à droite de la ligne, et sa confirmation sur toute la largeur, dessous */ .jx-swap { appearance: none; grid-column: 4; grid-row: 1; justify-self: end; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--brass-line); background: none; color: var(--brass-ink); cursor: var(--cur-hand); transition: background .25s ease, border-color .25s ease; } .jx-swap svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: rotate .45s var(--ease); } .jx-swap:hover, .jx-swap:focus-visible, .jx-swap[aria-expanded="true"] { background: color-mix(in srgb, var(--brass) 14%, transparent); border-color: var(--brass); } .jx-swap:hover svg, .jx-swap[aria-expanded="true"] svg { rotate: 180deg; } .jx-swap:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; } .jx-swap:disabled { opacity: .5; cursor: progress; } .jx-swap.is-off, .jx-swap.is-off:hover, .jx-swap.is-off:focus-visible { opacity: .35; background: none; border-color: var(--brass-line); cursor: var(--cur-blocked); } .jx-swap.is-off:hover svg { rotate: none; } .jx-swapbox { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin: 2px 0 0; padding: 12px 14px; border: 1px solid var(--line); background: var(--band); } .jx-swapbox[hidden] { display: none; } .jx-swapbox:not([hidden]) { animation: wc-fade-in .25s ease backwards; } .jx-swapbox p { margin: 0; flex: 1 1 260px; font-size: 13.5px; color: var(--muted); } .jx-swapbox p b { color: var(--text); font-weight: 600; } .jx-swapbox .wc-piece { width: 1.25em; height: 1.25em; vertical-align: -.25em; } .jx-swapact { display: inline-flex; gap: 8px; } @media (max-width: 640px) { .jx-mission:has(.jx-swap) { grid-template-columns: minmax(0, 1fr) 84px 36px; } .jx-mission .jx-swap { grid-column: 3; grid-row: 1; } } /* moins d'animations (boot.js, docs/animations.md) */ :where(:root[data-motion="reduce"]) .jx-swap svg { transition: none; } :where(:root[data-motion="reduce"]) .jx-swapbox:not([hidden]) { animation: none; } /* Rangée de boutons d'action (public/echange.php : envoyer/annuler une proposition, accepter/négocier/refuser…) */ .wq-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 6px 0 4px; } /* ================= Échanges entre amis : onglet « Échanges » de la fenêtre Social (public/echange.php, assets/trade.js, assets/social.js) ================= */ .tr .doc-lead { max-width: 720px; } .tr-status { padding: 12px 16px; border: 1px solid var(--brass-line); background: color-mix(in srgb, var(--brass) 8%, transparent); color: var(--text); } .tr-status.is-accepted { border-color: #3f9b62; background: color-mix(in srgb, #3f9b62 14%, transparent); } .tr-status.is-declined, .tr-status.is-cancelled, .tr-status.is-expired { border-color: var(--line); background: var(--surface); color: var(--muted); } .tr-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin: 22px 0 0; } .tr-side { padding: 18px; border: 1px solid var(--line); border-top: 2px solid var(--brass); background: var(--surface); min-width: 0; } .tr-side h2, .tr-side h4 { margin: 0 0 14px; font-size: 14px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--brass-ink); } .tr-grid { min-height: 20px; } .tr-cards { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; padding: 0 !important; } .tr-cards .card { position: relative; } .tr-empty { margin: 0 0 12px; color: var(--muted); font-size: 13px; } .tr-empty[hidden] { display: none; } .tr-gone { display: grid; place-items: center; aspect-ratio: 5 / 7; border: 1px dashed var(--line); color: var(--muted); font-size: 12px; text-align: center; padding: 8px; } .tr-n { position: absolute; z-index: 3; top: 6px; left: 6px; padding: 3px 8px; background: var(--brass); color: var(--on-brass); font-size: 12px; font-weight: 500; letter-spacing: .04em; pointer-events: none; } .tr-n[hidden] { display: none; } /* Fiche de carte : liste des éditions (mois, vues, exemplaires) et choix de l'édition pour recycler, échanger ou transformer */ .modal-eds { margin: 0; padding: 0 0 12px; list-style: none; } .modal-eds li { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; font-variant-numeric: tabular-nums; } .modal-eds .eds-v { color: var(--muted); text-align: right; } .modal-ed { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 16px 0 0; } .modal-ed label { font-size: 11.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .modal-ed[hidden] { display: none; } .modal-ed-label { margin: 0 0 8px; font-size: 11.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } /* Liste déroulante des éditions : le dessin de celle des étiquettes (.ctf-*), un seul choix */ .ced { --tc: var(--brass); } /* Dans la fiche de carte, les listes déroulantes (éditions, étiquettes) passent PAR-DESSUS le reste, au lieu d'agrandir la fenêtre */ .modal-side .ced, .modal-side .ctf { position: relative; } .modal-side .ced .ctf-panel, .modal-side .ctf .ctf-panel { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; box-shadow: 0 14px 34px rgba(0, 0, 0, .45); } .ced .ctf-field { min-height: 44px; } .ced .ctf-open { color: var(--text); font-size: 14px; } .ced-val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ced-opt { appearance: none; width: 100%; border: 0; background: none; color: var(--text); font: inherit; font-size: 14px; text-align: left; } .ced-opt:focus-visible { outline: 2px solid var(--brass); outline-offset: -2px; } .ced-opt[aria-selected="true"]::before { background: var(--tc); } /* Les liens sous la carte, l'un au-dessus de l'autre */ .modal-left { grid-area: card; min-width: 0; } .cm-box .modal-card { margin-inline: auto; } .modal-links { display: grid; justify-items: center; gap: 12px; margin-top: 22px; text-align: center; } .modal-links .modal-report { margin: 6px 0 0; } /* « Éditions » : ligne à déplier, tout en bas de la colonne du milieu */ .modal-edrow { margin-top: 20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .modal-edrow[hidden] { display: none; } .modal-edrow .modal-row { border-bottom: 0; } .modal-edrow.is-reg { margin-top: 0; border: 0; } .modal-sp-sum { display: flex; align-items: center; gap: 12px; padding: 12px 0; list-style: none; cursor: var(--cur-hand); -webkit-user-select: none; user-select: none; } .modal-sp-sum::-webkit-details-marker { display: none; } .modal-sp-label { font-size: 11.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .modal-sp-n { margin-left: auto; font-weight: 500; font-variant-numeric: tabular-nums; } .modal-sp-sum svg { flex: none; width: 12px; height: 12px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: rotate .25s ease; } .modal-sp[open] .modal-sp-sum svg { rotate: 180deg; } .modal-sp-sum:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; } /* Registre des exemplaires (assets/card-modal.js, paintRegistry) : une édition par volet, un tableau d'exemplaires dedans */ /* Registre des exemplaires, « Équerres » (design/propositions-exemplaires-deco.html, E2) : chaque édition est un volet au cadre fin tenu par deux équerres de laiton (angles opposés), un léger voile doré en haut, le nombre d'exemplaires en grand chiffre Limelight ; une ziggourat à trois gradins devant chaque date. Volets repliés au départ, dépliés et repliés en animation (card-modal.js, animateFold). */ .modal-reg { padding: 14px 0 12px; } .modal-reg-label { margin: 0 0 10px; font-size: 11.5px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--brass-ink); } .modal-reg-ed { position: relative; margin: 0 0 12px; border: 1px solid var(--line); background: linear-gradient(180deg, color-mix(in srgb, var(--brass) 8%, transparent), transparent 64px), var(--surface); } .modal-reg-ed::before, .modal-reg-ed::after { content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none; } .modal-reg-ed::before { top: -3px; left: -3px; border-top: 2px solid var(--brass); border-left: 2px solid var(--brass); } .modal-reg-ed::after { bottom: -3px; right: -3px; border-bottom: 2px solid var(--brass); border-right: 2px solid var(--brass); } .modal-reg-sum { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 3px 10px; padding: 13px 16px; font-size: 14px; list-style: none; cursor: var(--cur-hand); -webkit-user-select: none; user-select: none; } .modal-reg-sum::-webkit-details-marker { display: none; } .modal-reg-sum b { grid-column: 1; grid-row: 1; min-width: 0; font-size: 12.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; } .modal-reg-sum .rg-v { grid-column: 1; grid-row: 2; margin-top: 2px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } .modal-reg-sum .rg-q { grid-column: 2; grid-row: 1 / span 2; align-self: center; font: 24px/1 var(--font-title); color: var(--brass-ink); } .modal-reg-sum svg { grid-column: 3; grid-row: 1 / span 2; align-self: center; width: 12px; height: 12px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: rotate .3s ease; } .modal-reg-ed[open]:not(.is-closing) .modal-reg-sum svg { rotate: 180deg; } .modal-reg-sum:focus-visible { outline: 2px solid var(--brass); outline-offset: -2px; } .modal-reg-list { margin: 0 16px; padding: 0; list-style: none; border-top: 1px solid var(--brass-line); } .modal-reg-list li { display: grid; gap: 3px; padding: 11px 0; border-bottom: 1px dashed var(--line); } .modal-reg-list li:last-child { border-bottom: 0; } .modal-reg-list .rg-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; } .modal-reg-list .rg-top b { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; } .modal-reg-list .rg-top b::before { content: ""; flex: none; width: 10px; height: 7px; background: var(--brass); clip-path: polygon(0 100%, 0 70%, 20% 70%, 20% 40%, 40% 40%, 40% 0, 60% 0, 60% 40%, 80% 40%, 80% 70%, 100% 70%, 100% 100%); } .modal-reg-list .rg-prior { font-size: 12px; color: var(--brass-ink); } .modal-reg-list .rg-first { padding-left: 18px; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; } .modal-reg-list .rg-first span { color: var(--text); } .modal-reg-list .rg-first span.is-me { color: var(--brass-ink); } .modal-reg-list .rg-more { display: block; padding-left: 0; color: var(--muted); font-size: 12px; font-style: italic; } .tr-cards .card .qty { display: none; } .tr-minus { position: absolute; z-index: 4; top: 5px; right: 5px; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: #b8453f; color: #fff; cursor: var(--cur-hand); } .tr-minus svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; } /* Icône « i » des cartes du sélecteur d'échange et des cartes déjà dans l'échange (trade.js) : un losange à double filet, comme le reste des accents du thème ; la fiche de la carte s'ouvre sans la choisir. Halo sombre dessiné dans le SVG (pas de filtre : il saccaderait la transition). Au survol, le losange se remplit de laiton. */ .tr-info { position: absolute; z-index: 4; top: 5px; right: 5px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; background: none; color: var(--brass-ink); cursor: var(--cur-hand); -webkit-tap-highlight-color: transparent; transition: transform .3s cubic-bezier(.2, .8, .2, 1), color .3s ease; } .tr-info svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } .tr-info .ti-halo { fill: rgba(0, 0, 0, .5); stroke: none; } .tr-info .ti-d { fill: color-mix(in srgb, var(--card) 92%, transparent); stroke-width: 1.7; transition: fill .3s ease, stroke .3s ease; } .tr-info .ti-d2 { stroke-width: .9; opacity: .55; transition: opacity .3s ease; } .tr-info .ti-i, .tr-info .ti-dot { transition: stroke .3s ease, fill .3s ease; } .tr-info .ti-i { stroke-width: 2; } .tr-info .ti-dot { fill: currentColor; stroke: none; } @media (hover: hover) { .tr-info:hover { transform: scale(1.12); } .tr-info:hover .ti-d { fill: var(--brass); stroke: var(--brass); } .tr-info:hover .ti-d2 { opacity: 0; } .tr-info:hover .ti-i { stroke: var(--on-brass); } .tr-info:hover .ti-dot { fill: var(--on-brass); } } .tr-info:active { transform: scale(.94); transition-duration: .1s; } .tr-info:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; } /* Dans le sélecteur, l'icône prend le coin en haut à droite : le nombre d'exemplaires se range à sa gauche */ .pick-cards .card:has(.tr-info) .qty { right: 44px; top: 9px; height: 26px; min-width: 26px; font-size: 12px; } /* Sur une carte déjà dans l'échange, l'icône se range à gauche de la pastille « − » qui la retire */ .tr-cards .tr-info { top: 1px; right: 36px; } @media (max-width: 760px) { .tr-info { width: 32px; height: 32px; } .pick-cards .card:has(.tr-info) .qty { right: 40px; top: 8px; } .tr-cards .tr-info { top: 2px; right: 34px; } } /* Fiche d'une carte en lecture seule (icône « i ») : pas d'actions, donc deux colonnes seulement (la carte, ses informations) */ .modal-box.cm-box.cm-ro { grid-template-columns: minmax(0, 270px) minmax(0, 1fr); grid-template-areas: "head head" "card info"; width: min(860px, 100%); } .cm-ro .modal-side { display: none; } @media (max-width: 680px) { .modal-box.cm-box.cm-ro { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "card" "info"; } } .tr-pieces { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; padding: 10px 12px; border: 1px solid var(--line); background: var(--card); } .tr-pieces .wc-piece { width: 1.5em; height: 1.5em; } .tr-pieces input { flex: 1; min-width: 0; appearance: textfield; -moz-appearance: textfield; border: 0; background: none; color: var(--text); font: inherit; font-size: 16px; text-align: right; font-variant-numeric: tabular-nums; } .tr-pieces input:focus-visible { outline: none; } .tr-pieces:focus-within { border-color: var(--brass); } .tr-hint { display: block; margin: 6px 0 0; color: var(--muted); font-size: 12.5px; } .tr-piecesline { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 16px; } .tr-piecesline b { color: var(--brass-ink); font-weight: 500; font-variant-numeric: tabular-nums; } .tr-picker { margin: 34px 0 0; } .tr-filters.coll-filters, .tr-tags.coll-tags { margin-top: 16px; padding-top: 16px; } .tr-tags.coll-tags[hidden] { display: none; } .tr-tabs { display: flex; gap: 8px; margin: 0 0 12px; border-bottom: 1px solid var(--line); } .tr-tab { appearance: none; margin-bottom: -1px; padding: 12px 18px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font: 500 12px/1.3 var(--font); letter-spacing: .14em; text-transform: uppercase; cursor: var(--cur-hand); } .tr-tab[aria-selected="true"] { color: var(--brass-ink); border-bottom-color: var(--brass); } .tr-tab:hover, .tr-tab:focus-visible { color: var(--text); } @media (max-width: 760px) { .tr-sides { grid-template-columns: minmax(0, 1fr); } .tr-tab { flex: 1; padding: 12px 6px; letter-spacing: .06em; font-size: 11px; } } /* Mes échanges */ .tl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .tl-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid var(--line); background: var(--surface); } .tl-av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--line); } .tl-main { min-width: 0; display: grid; gap: 2px; } .tl-name { color: var(--text); font-weight: 500; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tl-sum { color: var(--muted); font-size: 13px; } .tl-hint { color: var(--muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; } .tl-row.is-accepted .tl-hint { color: #3f9b62; } @media (max-width: 560px) { .tl-row { grid-template-columns: auto minmax(0, 1fr) auto; } .tl-hint { display: none; } } /* Liste Amis : champ de recherche, lien « Mes échanges », icône d'échange de chaque ligne */ .fr-search { display: block; width: calc(100% - 8px); margin: 8px 4px 6px; box-sizing: border-box; appearance: none; border: 1px solid var(--line); background: var(--card); color: var(--text); padding: 9px 12px; font: inherit; font-size: 14px; } .fr-search:focus-visible { outline: none; border-color: var(--brass); } .fr-btn svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* « Ajouter un ami » est maintenant sous le titre de la liste : filet dessous plutôt que dessus */ .social-dd .sd-add, .sm-box .sd-add { margin-top: 0; border-top: 0; border-bottom: 1px solid var(--line); } /* Recharger le stock vide contre des pièces (page Paquets) */ .refill-btn { appearance: none; display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px; border: 1px solid var(--brass); background: color-mix(in srgb, var(--brass) 14%, transparent); color: var(--brass-ink); font: 500 12px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; cursor: var(--cur-hand); transition: background .3s ease; } .refill-btn[hidden] { display: none; } .refill-btn:hover:not(:disabled), .refill-btn:focus-visible { background: color-mix(in srgb, var(--brass) 28%, transparent); outline: none; } .refill-btn:disabled { opacity: .5; cursor: var(--cur-blocked); } .refill-btn b { font-weight: 500; color: var(--text); letter-spacing: .06em; } .refill-btn .wc-piece { width: 1.45em; height: 1.45em; vertical-align: middle; } .refill-msg { min-height: 1.3em; margin: 4px 0 0; text-align: center; } /* ---------- Recyclage d'une carte (fenêtre de détail, card-modal.js) ---------- */ /* Fiche de carte : liens (Wikipédia, crédit), puis « Favoris » et « Recycler » côte à côte ; « Recycler » a le dessin de « Recharger le stock » (page Paquets) : angles en gradins, fond sombre teinté de laiton, « RECYCLER │ +N » et l’icône des pièces */ .modal-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 16px 0 0; } .rc-wrap { margin: 14px 0 0; } .rc-wrap:has(.rc-panel[hidden]):not(:has(.rc-done)) { display: none; } /* rien à montrer sous les boutons */ .rc-btn { --s: 3px; appearance: none; display: inline-flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px 0 16px; border: 0; white-space: nowrap; background: color-mix(in srgb, var(--brass) 18%, var(--card)); box-shadow: inset 0 0 0 1px var(--brass-line); color: var(--brass-ink); font: inherit; cursor: var(--cur-hand); } .rc-btn:hover, .rc-btn[aria-expanded="true"] { background: color-mix(in srgb, var(--brass) 32%, var(--card)); } .rc-btn:focus-visible { outline: 2px solid var(--brass); outline-offset: -4px; } .rc-btn .rc-label { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; line-height: 1.2; } .rc-btn .rc-cost { display: inline-flex; align-items: center; gap: 5px; padding-left: 12px; border-left: 1px solid var(--brass-line); } .rc-btn b { font-size: 13px; font-weight: 600; line-height: 1; color: var(--text); } .rc-btn .wc-piece { width: 1.45em; height: 1.45em; flex: none; vertical-align: middle; } .rc-panel { margin: 0; padding: 14px 16px; border: 1px solid var(--line); background: var(--band); } .rc-panel[hidden] { display: none; } .rc-count { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 10px; } .rc-count label { font-size: 11.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .rc-stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--line); } .rc-step { appearance: none; width: 34px; border: 0; background: none; color: var(--text); font: 400 18px/1 var(--font); cursor: var(--cur-hand); } .rc-step:hover, .rc-step:focus-visible { background: var(--track); } .rc-stepper input { width: 56px; padding: 7px 4px; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); background: var(--card); color: var(--text); font: inherit; font-size: 15px; text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield; } .rc-stepper input::-webkit-inner-spin-button, .rc-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .rc-all { appearance: none; padding: 4px 2px; border: 0; background: none; color: var(--brass-ink); font: inherit; font-size: 13px; text-decoration: underline; text-decoration-color: var(--brass-line); text-underline-offset: 3px; cursor: var(--cur-hand); } .rc-note, .rc-gain { margin: 0 0 12px; font-size: 14px; } .rc-gain { color: var(--brass-ink); font-weight: 500; } .rc-actions { display: flex; flex-wrap: wrap; gap: 8px; } .rc-msg { margin: 8px 0 0; font-size: 13px; color: var(--err-ink); } .rc-msg:empty { display: none; } .rc-done { margin: 0; font-size: 14px; color: var(--brass-ink); } /* Carte recyclée dans un paquet ouvert : elle reste à sa place, mais estompée */ .card.is-recycled { opacity: .38; filter: grayscale(.7); } /* ---------- Fenêtre « Social » (assets/social.js) : onglets Amis et Échanges ---------- */ .modal-box.sm-box.sc-box { width: min(1040px, 100%); } .sc-tabs { display: flex; gap: 6px; margin: 10px 0 18px; border-bottom: 1px solid var(--line); } .sc-tab { appearance: none; position: relative; display: inline-flex; align-items: center; gap: 8px; margin-bottom: -1px; padding: 12px 20px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font: 500 12.5px/1.3 var(--font); letter-spacing: .16em; text-transform: uppercase; cursor: var(--cur-hand); transition: color .25s ease, border-color .25s ease; } .sc-tab[aria-selected="true"] { color: var(--brass-ink); border-bottom-color: var(--brass); } .sc-tab:hover, .sc-tab:focus-visible { color: var(--text); } .sc-tab:focus-visible { outline: 2px solid var(--brass); outline-offset: -2px; } .sc-count { min-width: 20px; padding: 2px 6px; border-radius: 10px; background: #b8453f; color: #fff; font-size: 11px; font-weight: 500; letter-spacing: 0; text-align: center; } .sc-count[hidden], .sc-count:empty { display: none; } .sc-pane[hidden] { display: none; } /* Amis : la liste prend toute la largeur de la fenêtre, lignes plus grandes */ .sc-friends .sd-add { width: 100%; } .sc-friends .fr-search { width: 100%; margin: 12px 0 10px; padding: 11px 14px; font-size: 15px; } .sc-friends .fr-row { gap: 16px; padding: 12px 4px; } .sc-friends .fr-av { width: 44px; height: 44px; } .sc-friends .fr-name { font-size: 16px; } .sc-friends .fr-actions { gap: 6px; } .sc-friends .fr-btn { width: 40px; height: 40px; } .sc-friends .fr-btn svg { width: 20px; height: 20px; } /* Échanges */ .sc-intro { margin: 0 0 8px; } .sc-section { margin: 22px 0 0; } .sc-h { margin: 0 0 12px; font-size: 13px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--brass-ink); } .sc-back { appearance: none; margin: 0 0 16px; padding: 4px 2px; border: 0; background: none; color: var(--brass-ink); font: inherit; font-size: 14px; cursor: var(--cur-hand); text-decoration: underline; text-decoration-color: var(--brass-line); text-underline-offset: 4px; } .sc-back:hover, .sc-back:focus-visible { color: var(--text); } .tr-title { margin: 0 0 10px; font-size: clamp(18px, 2.4vw, 22px); font-weight: 400; letter-spacing: .1em; text-transform: uppercase; } .tr-lead { margin: 0 0 6px; color: var(--muted); font-size: 14.5px; line-height: 1.55; } .tr-lead.tr-status { color: var(--text); } .sc-trade .tr-picker { margin-top: 26px; } .sc-trade .pick-cards { grid-template-columns: repeat(var(--pick-cols, 5), minmax(0, 1fr)) !important; } .tr-picker #tr-list { margin-top: 22px; } /* Proposition d'échange (« Tu donnes » / « Tu reçois ») : un plateau collé en bas de la fenêtre, comme les fenêtres de choix des vitrines du profil (.ap-tray) ; les collections à parcourir au-dessus. Les cartes choisies y sont en miniatures, sur une ligne qui défile. */ .ap-tray.tr-tray { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 250px); align-items: center; gap: 12px 20px; margin-top: 18px; } .tr-tray .wq-actions .btn { padding: 11px 14px; font-size: 11px; letter-spacing: .12em; white-space: normal; text-align: center; } .tr-tray .tr-sides { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; } .tr-tray .tr-side { padding: 10px 12px 12px; } .tr-tray .tr-side h4 { margin: 0 0 8px; font-size: 12px; } .tr-tray .tr-cards { display: flex !important; gap: 6px !important; overflow-x: auto; padding: 0 0 4px !important; overscroll-behavior: contain; } .tr-tray .tr-cards .card { flex: 0 0 62px; width: 62px; } .tr-tray .tr-cards .tr-info { display: none; } .tr-tray .tr-minus { top: 2px; right: 2px; width: 20px; height: 20px; } .tr-tray .tr-minus svg { width: 10px; height: 10px; } .tr-tray .tr-empty { margin: 0 0 4px; font-size: 12px; line-height: 1.4; } .tr-tray .tr-pieces { margin: 8px 0 0; padding: 5px 10px; } .tr-tray .tr-pieces input { font-size: 15px; } .tr-tray .tr-hint { margin-top: 4px; font-size: 11.5px; line-height: 1.4; } .tr-tray-foot { display: grid; gap: 6px; justify-items: stretch; } .tr-tray .wq-actions { flex-direction: column; align-items: stretch; gap: 8px; margin: 0; } .tr-tray .sm-msg { max-width: 280px; margin: 0; } .tr-tray .sm-msg:empty { display: none; } @media (max-width: 860px) { .ap-tray.tr-tray { grid-template-columns: minmax(0, 1fr); gap: 10px; padding-top: 10px; padding-bottom: 12px; } .tr-tray .tr-side { padding: 8px 10px 10px; } .tr-tray .wq-actions .btn { padding-block: 10px; } .tr-tray .wq-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; } .tr-tray .sm-msg { max-width: none; text-align: center; } .tr-tray .tr-hint { display: none; } .tr-tray .tr-cards .card { flex-basis: 52px; width: 52px; } } @media (max-width: 600px) { /* téléphone : un plateau plus ramassé, la collection garde la place */ .tr-tray .tr-empty { display: none; } .tr-tray .tr-side h4 { font-size: 11px; letter-spacing: .1em; } .tr-tray .tr-pieces { margin-top: 6px; padding: 3px 8px; } .tr-tray .wq-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .tr-tray .wq-actions #tr-send { grid-column: 1 / -1; } .tr-tray .wq-actions .btn { padding: 8px 10px; font-size: 10.5px; } } @media (max-width: 760px) { .sc-tab { flex: 1; justify-content: center; padding: 12px 6px; letter-spacing: .08em; } .sc-trade .pick-cards { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } /* ================= Animations de rareté (dessinées par Claude Design : losange révélateur) : assets/rarete.js ================= */ /* Adaptées au site : elles ne se jouent QUE quand une carte est révélée dans un paquet (classe fx-on posée par rarete.js sur l'évènement wc:card-revealed), jamais sur les cartes déjà retournées de la collection ; le losange qui s'ouvre est un élément (.fx-open) et non le ::after de la face, qui dessine déjà le cadre intérieur des cartes Rares et mieux. r3 Rare : losange, lueur, éclats r4 Épique : + onde r5 Légendaire : + rayons, secousse r6 Mythique : + impact, liseré r7 Ultime : + scintillements Les couches (lueur, onde…) sont créées par rarete-animations.js. */ .card:is(.r3, .r4, .r5, .r6, .r7) { --fx-delay: .45s; /* fin du retournement (.card-in : 0,8 s, la face est visible vers la moitié) */ --fx-glow: color-mix(in srgb, var(--rc) 45%, #fff); --fx-ring: polygon(evenodd, 50% 0, 100% 50%, 50% 100%, 0 50%, 50% 0, 50% 7%, 7% 50%, 50% 93%, 93% 50%, 50% 7%); --fx-dia: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); } .cards.deck .card:is(.r3, .r4, .r5, .r6, .r7) { --fx-delay: .25s; } /* pile de cartes (mobile) : retournement plus rapide */ /* La carte qui se révèle passe AU-DESSUS de ses voisines pendant l'effet : sinon les cartes d'à côté (peintes après elle) recouvraient l'onde, les rayons et les éclats, qui paraissaient coupés net aux bords de la carte. Les couches (.fx-lz) restent dans son contexte d'empilement : lueur, onde et rayons derrière la carte, impact, éclats et scintillements devant. */ .card.fx-on { isolation: isolate; z-index: 30; } /* Mythique et Ultime : l'onde et les rayons portent plus loin (au-delà des cartes voisines) */ .card.r6 .fx-wave, .card.r6 .fx-rays { width: 210%; } .card.r7 .fx-wave, .card.r7 .fx-rays { width: 270%; } .card.r6 .fx-halo, .card.r7 .fx-halo { width: 118%; height: 114%; filter: blur(22px); } .card.fx-on .card-front { overflow: hidden; } /* Losange qui s'ouvre sur la face */ .fx-open { position: absolute; left: 50%; top: var(--fx-cy, 50%); width: 150%; aspect-ratio: 1; z-index: 5; pointer-events: none; background: radial-gradient(closest-side, #fff, var(--fx-glow) 50%, var(--rc)); clip-path: var(--fx-ring); opacity: 0; animation: fx-open .9s var(--fx-delay) cubic-bezier(.3,.6,.3,1) both; } .card.fx-on .card-front { animation: fx-flash .7s var(--fx-delay) ease-out; } @keyframes fx-open { 0% { opacity: 1; transform: translate(-50%,-50%) scale(.05); } 70% { opacity: .9; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.6); } } @keyframes fx-flash { 0% { filter: none; } 18% { filter: brightness(1.55) saturate(1.2); } 100% { filter: none; } } /* Couches */ .fx-lz { position: absolute; inset: 0; pointer-events: none; } .fx-lz > i { position: absolute; left: 50%; top: var(--fx-cy, 50%); opacity: 0; } /* Lueur */ .fx-halo { width: 108%; height: 106%; z-index: -1; background: var(--rc); filter: blur(14px); border-radius: 8%; animation: fx-halo 1s var(--fx-delay) ease-out both; } @keyframes fx-halo { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.9); } 30% { opacity: .9; transform: translate(-50%,-50%) scale(1.03); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.1); } } /* Onde */ .fx-wave { width: 160%; aspect-ratio: 1; z-index: -1; clip-path: var(--fx-ring); background: radial-gradient(closest-side, var(--fx-glow) 55%, var(--rc)); animation: fx-grow 1.2s calc(var(--fx-delay) + .05s) cubic-bezier(.15,.8,.3,1) both; } .fx-wave + .fx-wave { animation-delay: calc(var(--fx-delay) + .3s); animation-duration: 1.4s; } @keyframes fx-grow { 0% { opacity: 1; transform: translate(-50%,-50%) scale(.1); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1); } } /* Rayons */ .fx-rays { width: 160%; aspect-ratio: 1; z-index: -1; clip-path: var(--fx-dia); background: repeating-conic-gradient(var(--rc) 0 2deg, transparent 2deg 9deg, var(--rc) 9deg 10deg, transparent 10deg 18deg); -webkit-mask: radial-gradient(closest-side, transparent 25%, #000 38%, transparent 100%); mask: radial-gradient(closest-side, transparent 25%, #000 38%, transparent 100%); animation: fx-rays 1.3s var(--fx-delay) cubic-bezier(.2,.7,.3,1) both; } .card.r7 .fx-rays { animation-duration: 2s; } @keyframes fx-rays { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.3); } 22% { opacity: 1; } 65% { opacity: .8; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.05); } } /* Impact */ .fx-impact { width: 150%; aspect-ratio: 1; z-index: 3; background: var(--fx-glow); clip-path: polygon(evenodd, 50% 0, 100% 50%, 50% 100%, 0 50%, 50% 0, 50% 3%, 3% 50%, 50% 97%, 97% 50%, 50% 3%); animation: fx-impact .6s calc(var(--fx-delay) - .15s) cubic-bezier(.5,0,.7,.4) both; } @keyframes fx-impact { 0% { opacity: 0; transform: translate(-50%,-50%) scale(1.1); } 60% { opacity: 1; transform: translate(-50%,-50%) scale(.72); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(.66); } } /* Liseré */ .fx-edge { width: calc(100% + 6px); height: calc(100% + 6px); z-index: -1; overflow: hidden; border-radius: 8px; animation: fx-edge 1.6s calc(var(--fx-delay) + .1s) ease-in-out both; } .fx-edge::before { content: ""; position: absolute; left: 50%; top: 50%; width: 200%; aspect-ratio: 1; background: conic-gradient(transparent 0 290deg, var(--rc) 335deg, #fff 358deg, transparent 360deg); animation: fx-spin .8s calc(var(--fx-delay) + .1s) linear 2 both; } @keyframes fx-edge { 0% { opacity: 0; transform: translate(-50%,-50%); } 12%, 85% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-50%); } } @keyframes fx-spin { from { transform: translate(-50%,-50%) rotate(0); } to { transform: translate(-50%,-50%) rotate(360deg); } } /* Éclats */ .fx-shard { width: calc(7px * var(--s, 1)); height: calc(12px * var(--s, 1)); z-index: 4; clip-path: var(--fx-dia); background: var(--rc); animation: fx-shard 1.2s calc(var(--fx-delay) + var(--t, 0s)) cubic-bezier(.1,.7,.3,1) both; } .fx-shard:nth-child(even) { background: var(--fx-glow); } @keyframes fx-shard { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.4); } 10%, 70% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--r, 180deg)) scale(.6); } } /* Scintillements */ .fx-star { left: var(--x, 50%); top: var(--y, 50%); width: calc(18% * var(--s, 1)); aspect-ratio: 1; z-index: 4; clip-path: polygon(50% 0, 56% 44%, 100% 50%, 56% 56%, 50% 100%, 44% 56%, 0 50%, 44% 44%); background: radial-gradient(closest-side, #fff 15%, var(--fx-glow) 45%, var(--rc)); animation: fx-star .7s calc(var(--fx-delay) + var(--t, 0s)) ease-out both; } @keyframes fx-star { 0% { opacity: 0; transform: translate(-50%,-50%) scale(0) rotate(-45deg); } 40% { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(0); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(.2) rotate(45deg); } } /* Secousse (sur .fx-shake-host ou le parent de la carte) */ .fx-shake { animation: fx-shake .45s linear; } @keyframes fx-shake { 0%, 100% { transform: none; } 15% { transform: translate(-4px, 2px); } 30% { transform: translate(4px, -2px); } 45% { transform: translate(-3px, -1px); } 60% { transform: translate(2px, 2px); } 80% { transform: translate(-1px, 0); } } /* Aura de lumière plein écran (Légendaire, Mythique, Ultime : voir assets/rarete.js, aura()). Vignettage sur les bords du site, dans la couleur de la rareté, mélangé en lumière additive (mix-blend-mode: screen) pour ne jamais assombrir ni gêner la lecture — le centre de l'écran, où se trouve la carte, reste transparent. Éteinte, elle passe en visibility: hidden une fois le fondu fini (plus rien à peindre). */ .wc-aura { position: fixed; inset: 0; z-index: 2000; pointer-events: none; opacity: 0; mix-blend-mode: screen; overflow: hidden; visibility: hidden; background: radial-gradient(ellipse at center, transparent 45%, var(--aura-c, var(--brass)) 100%); transition: opacity 1s ease-out, visibility 0s linear 1s; } .wc-aura.is-on { opacity: .55; visibility: visible; transition: opacity .5s ease-in, visibility 0s; } /* Ultime : le dégradé irisé de la carte, qui tourne. C'est l'angle du dégradé conique qui s'anime (--a, voir @property plus haut), pas un disque géant que l'on fait pivoter : un calque surdimensionné, tournant, masqué et mélangé à la page laissait apparaître des zones noires (tuiles non peintes) sur les grands écrans. Ici un seul calque à la taille de l'écran, masque fixe, fondu normal. */ .wc-aura.r7 { mix-blend-mode: normal; background: conic-gradient(from calc(var(--a) + 20deg), #e58fb0, #e9c26f, #7fd6a8, #7fb6ec, #b791ef, #e58fb0); -webkit-mask: radial-gradient(ellipse at center, transparent 45%, #fff 100%); mask: radial-gradient(ellipse at center, transparent 45%, #fff 100%); animation: spin 7s linear infinite; } /* Mouvement réduit : léger éclat seulement */ /* moins d'animations (boot.js, docs/animations.md) */ :where(:root[data-motion="reduce"]) .fx-lz { display: none; } :where(:root[data-motion="reduce"]) .fx-open { display: none; } :where(:root[data-motion="reduce"]) .fx-shake { animation: none; } :where(:root[data-motion="reduce"]) .wc-aura { display: none; } /* ================= Encart sous le paquet (page « Paquets ») : dessiné par Claude Design, dessin « Fronton » retenu ================= Stock en médaillon au centre, paquets doré et diamanté de part et d'autre, missions du jour en frise dessous (public/paquets.php, assets/pack.js). La mise en page réagit à la largeur de l'encart (container queries : ≥ 600 px = ordinateur, sinon empilé), pas à celle de la fenêtre. */ .op-encart { --op-gold-1: #e2b84f; --op-gold-2: #f3d982; --op-ice-1: #9fd3f0; --op-ice-2: #cfeaff; /* encres lisibles dans les deux thèmes (mélangées avec --text) */ --op-ice-ink: color-mix(in oklab, var(--op-ice-1) 48%, var(--text)); --s: 12px; container-type: inline-size; box-sizing: border-box; width: 100%; max-width: 760px; margin: 28px auto 0; padding: 1px; background: var(--brass-line); color: var(--text); font-family: Jost, system-ui, sans-serif; font-size: 13px; line-height: 1.35; } .op-encart *, .op-encart *::before, .op-encart *::after { box-sizing: border-box; } /* ---------- Angles en gradins (deux marches par coin) ---------- */ .op-encart, .op-inner, .op-inner::before, .op-inner::after, .op-encart .refill-btn, .op-encart .gold-track.is-ready, .op-encart .diamond-track.is-ready, .op-encart .op-rewards, .th-item::before, .th-item::after { clip-path: polygon( 0 var(--s), calc(var(--s) / 2) var(--s), calc(var(--s) / 2) calc(var(--s) / 2), var(--s) calc(var(--s) / 2), var(--s) 0, calc(100% - var(--s)) 0, calc(100% - var(--s)) calc(var(--s) / 2), calc(100% - var(--s) / 2) calc(var(--s) / 2), calc(100% - var(--s) / 2) var(--s), 100% var(--s), 100% calc(100% - var(--s)), calc(100% - var(--s) / 2) calc(100% - var(--s)), calc(100% - var(--s) / 2) calc(100% - var(--s) / 2), calc(100% - var(--s)) calc(100% - var(--s) / 2), calc(100% - var(--s)) 100%, var(--s) 100%, var(--s) calc(100% - var(--s) / 2), calc(var(--s) / 2) calc(100% - var(--s) / 2), calc(var(--s) / 2) calc(100% - var(--s)), 0 calc(100% - var(--s)) ); } /* ---------- Double cadre ---------- */ .op-inner { --s: 12px; position: relative; display: grid; gap: 10px; padding: 14px 22px 12px; background: var(--card); } .op-inner::before, .op-inner::after { content: ""; position: absolute; --s: 8px; } .op-inner::before { inset: 4px; background: var(--brass-line); } .op-inner::after { inset: 5px; background: var(--card); } .op-inner > * { position: relative; z-index: 1; } /* ---------- En-tête : éventail + titre (ou phrase des garanties) ---------- */ .op-head { display: grid; justify-items: center; gap: 3px; text-align: center; } .op-head::before, .op-head::after { content: ""; position: absolute; top: 14px; height: 1px; } .op-head::before { left: 8px; right: calc(50% + 28px); background: linear-gradient(90deg, transparent, var(--brass-line)); } .op-head::after { right: 8px; left: calc(50% + 28px); background: linear-gradient(270deg, transparent, var(--brass-line)); } .op-title { margin: 0; font-size: 10.5px; font-weight: 500; line-height: 1.2; letter-spacing: .24em; text-transform: uppercase; color: var(--brass-ink); } .op-encart .hint { font-size: 12.5px; line-height: 1.3; color: var(--brass-ink); text-wrap: balance; } .op-encart .hint:empty { display: none; } .op-head:has(.hint:not(:empty)) .op-title { display: none; } /* ---------- Intitulés ---------- */ .op-label { margin: 0; font-size: 10.5px; font-weight: 500; line-height: 1.2; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } /* ---------- Grille : téléphone (empilé) ---------- */ .op-grid { display: grid; } .op-zone { position: relative; display: grid; gap: 7px; align-content: start; padding: 12px 0; } .op-zone + .op-zone { border-top: 1px solid var(--line); } .op-zone--stock { padding-top: 4px; } /* ---------- Stock ---------- */ .op-encart .pack-stock { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; } .op-encart .ps-gems { display: flex; gap: 11px; padding: 5px 3px; } .op-encart .ps-gems i { display: block; width: 12px; height: 12px; border: 1px solid var(--brass); transform: rotate(45deg); } .op-encart .ps-gems i.on { background: linear-gradient(135deg, var(--brass-ink), var(--brass)); box-shadow: 0 0 0 2px var(--card), 0 0 0 3px var(--brass-line); } .op-encart .ps-count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .op-encart .ps-next { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } .op-encart .ps-next:empty { display: none; } /* ---------- Recharger ---------- */ .op-encart .refill-btn { --s: 6px; appearance: none; border: 0; margin: 2px 0 0; display: inline-flex; align-items: center; gap: 12px; padding: 9px 14px 9px 16px; white-space: nowrap; /* fond sombre teinté de laiton (et non laiton plein) : l'icône dorée des pièces s'y détache */ background: color-mix(in srgb, var(--brass) 18%, var(--card)); box-shadow: inset 0 0 0 1px var(--brass-line); color: var(--brass-ink); font: inherit; text-align: left; cursor: var(--cur-hand); justify-self: start; } .op-encart .refill-btn[hidden] { display: none; } .op-encart .refill-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--brass) 32%, var(--card)); } .op-encart .refill-btn:focus-visible { outline: 2px solid var(--brass); outline-offset: -4px; } .op-encart .refill-btn .op-refill-label { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; line-height: 1.2; } .op-encart .refill-btn .op-refill-cost { display: inline-flex; align-items: center; gap: 5px; padding-left: 12px; border-left: 1px solid var(--brass-line); } .op-encart .refill-btn b { font-size: 13px; font-weight: 600; line-height: 1; color: var(--text); } .op-encart .refill-btn .wc-piece { width: 1.45em; height: 1.45em; flex: none; } .op-encart .refill-btn:disabled { background: var(--line); box-shadow: none; color: var(--muted); cursor: var(--cur-blocked); } .op-encart .refill-btn:disabled b { color: var(--muted); } .op-encart .refill-btn:disabled .wc-piece { opacity: .55; } .op-encart .refill-msg { margin: 0; font-size: 11.5px; color: var(--muted); } .op-encart .refill-msg:empty { display: none; } /* ---------- Paquet doré ---------- */ .op-encart .gold-track, .op-encart .diamond-track { --s: 6px; position: relative; display: grid; gap: 7px; padding: 6px 0; } .op-encart .gt-text, .op-encart .dt-text { display: flex; align-items: center; gap: 9px; } .op-encart .gt-text::before, .op-encart .dt-text::before { content: ""; flex: none; width: 7px; height: 7px; transform: rotate(45deg); } .op-encart .gt-text::before { background: linear-gradient(135deg, var(--op-gold-2), var(--op-gold-1)); } .op-encart .dt-text::before { border: 1px solid var(--op-ice-ink); background: linear-gradient(135deg, var(--op-ice-2), var(--op-ice-1)); } .op-encart .gt-bar { display: block; height: 7px; padding: 1px; border: 1px solid var(--brass-line); background: repeating-linear-gradient(90deg, transparent 0 calc(33.333% - 1px), var(--line) calc(33.333% - 1px) 33.333%); } .op-encart .gt-bar i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--op-gold-1), var(--op-gold-2)); transition: width .4s ease; } .op-encart .gold-track.is-ready, .op-encart .diamond-track.is-ready { padding: 9px 14px; overflow: hidden; font-weight: 600; letter-spacing: .02em; } .op-encart .gold-track.is-ready { background: linear-gradient(135deg, var(--op-gold-2), var(--op-gold-1) 60%, #cf9d38); color: #1d1606; } .op-encart .gold-track.is-ready .gt-text::before, .op-encart .diamond-track.is-ready .dt-text::before { background: currentColor; border-color: currentColor; } .op-encart .gold-track.is-ready .gt-bar { border-color: rgba(29, 22, 6, .35); background: none; } .op-encart .gold-track.is-ready .gt-bar i { width: 100%; background: #1d1606; opacity: .75; } /* ---------- Paquet diamanté ---------- */ .op-encart .dt-gems { display: flex; gap: 9px; padding: 3px 2px 2px 16px; } .op-encart .dt-gems i { display: block; width: 8px; height: 8px; border: 1px solid var(--op-ice-ink); transform: rotate(45deg); } .op-encart .dt-gems i.on { background: linear-gradient(135deg, var(--op-ice-2), var(--op-ice-1)); } .op-encart .diamond-track.is-ready { background: linear-gradient(135deg, var(--op-ice-2), var(--op-ice-1) 60%, #7fbde2); color: #0b2230; } .op-encart .diamond-track.is-ready .dt-gems i { border-color: #0b2230; background: #0b2230; opacity: .8; } /* reflet sur les plaques prêtes */ .op-encart .gold-track.is-ready::after, .op-encart .diamond-track.is-ready::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .55) 50%, transparent 60%) no-repeat; background-size: 250% 100%; animation: op-sheen 3.6s ease-in-out infinite; pointer-events: none; } @keyframes op-sheen { 0%, 35% { background-position: 130% 0; } 75%, 100% { background-position: -30% 0; } } /* ---------- Missions ---------- */ .op-zone--missions { gap: 8px; } .op-m-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .op-link { font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--brass-ink); text-decoration: none; border-bottom: 1px solid transparent; white-space: nowrap; } .op-link::after { content: " \2192"; } .op-link:hover { border-bottom-color: var(--brass-line); } .op-encart .op-rewards { --s: 4px; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 5px 12px; background: var(--brass-ink); color: var(--on-brass); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; } .op-encart .op-rewards[hidden] { display: none; } .op-encart .op-rewards:hover { background: var(--brass); } .op-encart .op-rewards::before { content: ""; width: 6px; height: 6px; background: currentColor; transform: rotate(45deg); animation: op-pulse 1.8s ease-in-out infinite; } @keyframes op-pulse { 50% { opacity: .25; } } .op-missions { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .op-mission { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 10px; row-gap: 4px; } .op-m-name { font-size: 12.5px; } .op-m-count { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; } .op-m-bar { grid-column: 1 / -1; display: block; height: 3px; background: var(--line); } .op-m-bar i { display: block; width: 0; height: 100%; background: var(--brass); } /* ---------- Série de connexion (la frise elle-même : .op-frise, plus bas) ---------- */ .op-streak { position: relative; padding-top: 11px; border-top: 1px solid var(--line); display: grid; gap: 7px; } .op-pack-mini { width: 13px; height: 18px; flex: none; margin: 0 -1px; } /* ---------- Série de connexion : bouton de récupération ---------- */ .op-streak-action { display: flex; justify-content: center; padding-top: 1px; } .op-streak-claimed { font-size: 11.5px; color: var(--muted); } .op-streak-claimed.is-error { color: var(--err-ink); } .op-streak-claimed[hidden] { display: none; } /* ---------- Pied : deux liens discrets ---------- */ .op-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding-top: 9px; border-top: 1px solid var(--line); } .op-foot::before { content: ""; position: absolute; top: -4px; left: calc(50% - 3.5px); width: 7px; height: 7px; border: 1px solid var(--brass-line); background: var(--card); transform: rotate(45deg); } .op-encart .link-btn { appearance: none; border: 0; border-bottom: 1px solid var(--brass-line); background: none; padding: 1px 0; margin-left: auto; font: inherit; font-size: 12px; color: var(--brass-ink); cursor: var(--cur-hand); } .op-encart .link-btn:hover { border-bottom-color: var(--brass-ink); } /* ---------- Téléphone ---------- */ @container (max-width: 599px) { .op-inner { padding: 14px 18px 12px; } .op-foot { justify-content: center; } .op-encart .link-btn { margin-left: 0; } } /* ===================================================================== A · COLONNES — ordinateur Stock | Paquets spéciaux | Missions ===================================================================== */ @container (min-width: 600px) { .op-grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr) minmax(0, 1.3fr); grid-template-areas: "stock gold missions" "stock diamond missions"; align-items: start; } .op-zone { padding: 0; } .op-zone + .op-zone { border-top: 0; } .op-zone--stock { grid-area: stock; padding-right: 22px; } .op-zone--gold { grid-area: gold; padding: 0 20px 6px; } .op-zone--diamond { grid-area: diamond; padding: 0 20px; } .op-zone--missions { grid-area: missions; padding-left: 22px; } .op-encart .pack-stock { flex-direction: column; align-items: flex-start; gap: 5px; } /* filets verticaux avec losange */ .op-encart .op-zone--stock::after, .op-encart .op-zone--missions::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: linear-gradient(transparent, var(--brass-line) 30%, var(--brass-line) 70%, transparent); } .op-encart .op-zone--stock::after { right: 0; } .op-encart .op-zone--missions::after { left: 0; } .op-encart .op-zone--stock::before, .op-encart .op-zone--missions::before { content: ""; position: absolute; z-index: 1; top: calc(50% - 3px); width: 6px; height: 6px; background: var(--brass); transform: rotate(45deg); } .op-encart .op-zone--stock::before { right: -2.5px; } .op-encart .op-zone--missions::before { left: -2.5px; } } /* ---------- Mouvement réduit ---------- */ /* moins d'animations (boot.js, docs/animations.md) */ :where(:root[data-motion="reduce"]) .op-encart .gold-track.is-ready::after, :where(:root[data-motion="reduce"]) .op-encart .diamond-track.is-ready::after, :where(:root[data-motion="reduce"]) .op-encart .op-rewards::before { animation: none; } :where(:root[data-motion="reduce"]) .op-encart .gold-track.is-ready::after, :where(:root[data-motion="reduce"]) .op-encart .diamond-track.is-ready::after { display: none; } :where(:root[data-motion="reduce"]) .op-encart .gt-bar i { transition: none; } /* ---------- Cohabitation avec les anciens styles du site (stock, compteurs, bouton) ---------- Le site tourne ses losanges avec la propriété rotate (l'encart avec transform : sans ceci, ils tourneraient deux fois), la barre dorée avait 150 px de large, le bouton « Recharger » était transparent. */ .op-encart .ps-gems i, .op-encart .dt-gems i, .op-encart .gt-text::before, .op-encart .dt-text::before { rotate: none; } .op-encart .gt-text::before, .op-encart .dt-gems i.on { box-shadow: none; } .op-encart .gold-track, .op-encart .diamond-track { justify-items: stretch; color: inherit; font-size: inherit; letter-spacing: normal; } .op-encart .gold-track.is-ready .gt-text, .op-encart .diamond-track.is-ready .dt-text { text-transform: none; letter-spacing: .02em; font-weight: 600; } .op-encart .gt-bar { width: auto; overflow: hidden; } .op-encart .gt-bar i { max-width: 100%; } .op-encart .pack-stock { color: var(--text); font-size: inherit; letter-spacing: normal; } .op-encart .ps-next { display: inline; } .op-encart .ps-next::before { content: none; } .op-encart .refill-btn { opacity: 1; } .op-encart .refill-btn b { color: inherit; letter-spacing: normal; } .op-encart .refill-btn:disabled { opacity: 1; } .op-encart .refill-msg { min-height: 0; text-align: center; } /* Plus de mission en cours aujourd'hui */ .op-m-empty { margin: 0; font-size: 12px; color: var(--muted); } .op-encart .refill-msg.is-ok { color: var(--brass-ink); } .op-encart .refill-msg.is-error { color: var(--err-ink); } .op-encart { text-align: left; } /* la page Paquets centre son texte (.opener) : l'encart garde sa propre mise en page */ /* ================= Interrupteur Art déco du thème (Paramètres) : cadre .sw-deco, dessin .sw-eventail (dessiné par Claude Design) ================= Le demi-soleil (l'éventail) se lève sur l'horizon quand le thème clair est activé ; la nuit, une lune et des pièces. Les autres interrupteurs (« Sons du jeu », « Compte privé ») ont le dessin .sw-classique (voir « Interrupteurs des Paramètres »). */ .switch.sw-deco { --sw-steps: polygon(0 6px,3px 6px,3px 3px,6px 3px,6px 0,calc(100% - 6px) 0,calc(100% - 6px) 3px,calc(100% - 3px) 3px,calc(100% - 3px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 3px) calc(100% - 6px),calc(100% - 3px) calc(100% - 3px),calc(100% - 6px) calc(100% - 3px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 3px),3px calc(100% - 3px),3px calc(100% - 6px),0 calc(100% - 6px)); align-items: center; -webkit-tap-highlight-color: transparent; } .sw-deco .sw-track, .sw-deco input:checked + .sw-track { position: relative; display: block; flex: none; width: 64px; height: 34px; margin: 0; border: 0; background: none; overflow: hidden; } .sw-deco .sw-track::before, .sw-deco .sw-track::after { content: ""; position: absolute; clip-path: var(--sw-steps); } .sw-deco .sw-track::before { inset: 0; background: var(--brass-line); transition: background-color .3s; } .sw-deco .sw-track::after { inset: 1px; background: var(--card); } .sw-deco .sw-track > * { position: absolute; z-index: 1; display: block; } .sw-deco:hover .sw-track::before { background: var(--brass); } /* Icônes : lune (croissant) et pièces */ .sw-eventail .sw-moon { left: 26px; top: 8px; width: 12px; height: 12px; border-radius: 50%; color: var(--brass-ink); box-shadow: inset 3.5px -2px 0 0 currentColor; } .sw-eventail .sw-horizon { left: 6px; right: 6px; top: 26px; height: 1px; background: var(--brass-line); } .sw-eventail .sw-stars { left: 14px; top: 10px; width: 2px; height: 2px; background: var(--muted); box-shadow: 34px -3px 0 var(--muted), 6px 8px 0 var(--muted), 30px 8px 0 var(--muted); } /* Le demi-soleil en éventail */ .sw-eventail .sw-track i, .sw-eventail input:checked + .sw-track i { left: 10px; top: 4px; width: 44px; height: 22px; border-radius: 22px 22px 0 0; rotate: none; scale: none; translate: none; background: radial-gradient(circle at 50% 100%, var(--brass-ink) 0 6px, var(--card) 6.5px 8.5px, transparent 9px), repeating-conic-gradient(from -84deg at 50% 100%, var(--brass-ink) 0 8deg, transparent 8deg 20deg); transform-origin: 50% 100%; transform: scale(.2); opacity: 0; } .sw-eventail input:checked + .sw-track i { transform: none; opacity: 1; } .sw-eventail input:checked + .sw-track .sw-moon { transform: translateY(10px); opacity: 0; } .sw-eventail input:checked + .sw-track .sw-stars { opacity: 0; } .sw-deco .sw-track > *, .sw-deco .sw-track > i::before, .sw-deco .sw-track > i::after { transition: transform .4s cubic-bezier(.65, 0, .35, 1), opacity .4s ease, color .4s ease, background-color .4s ease, box-shadow .4s ease; } /* moins d'animations (boot.js, docs/animations.md) */ :where(:root[data-motion="reduce"]) .sw-deco .sw-track > *, :where(:root[data-motion="reduce"]) .sw-deco .sw-track > i::before, :where(:root[data-motion="reduce"]) .sw-deco .sw-track > i::after { transition-property: opacity, color, background-color; transition-duration: .15s; } /* ================= Paquet 3D « Écailles · éventail » (dessiné par Claude Design) : assets/pack3d.js ================= Toutes les dimensions suivent --pk (posé par pack3d.js sur .opener : 1 sur téléphone, jusqu'à 1,5 sur ordinateur selon la hauteur de la fenêtre). La structure 3D est construite et stylée par pack3d.js (element.style) ; ce fichier gère la scène, la lueur, l'ombre, les états et le mouvement réduit. La sortie des cartes reste celle de pack.js (emerge) : elles partent du centre de l'ouverture donné par mouth(). */ /* ---- Scène (mise en page minimale : à fusionner avec l'existant) ---- */ .pack-stage { --p3-u: calc(var(--pk, 1) * 1px); position: relative; width: calc(var(--p3-u) * 200); height: calc(var(--p3-u) * 350); margin: 75px auto; /* la scène garde sa hauteur d'avant (paquet + 150 px) : lueur, ombre et invite y tiennent, la page ne bouge pas */ justify-self: center; touch-action: pan-y; /* glisser horizontal = rotation, défilement vertical conservé */ -webkit-user-select: none; user-select: none; } .pack3d-wrap, .pack3d-model { position: absolute; inset: 0; pointer-events: none; } /* Règle d'or : AUCUNE opacité ni filtre sur un parent des plans 3D (.pack3d-wrap, .pack3d-model et leur descendance jusqu'aux faces), ni fixe ni animée : Chromium (Chrome, Opera, Edge) et les navigateurs mobiles peuvent alors écarter les faces à tort, et le paquet reste invisible. Fondus, gris et transparence sont posés sur les faces elles-mêmes (.p3-leaf, sans enfant 3D). */ .p3-leaf { transition: filter .4s, opacity .4s; } .pack-stage.p3-in .p3-leaf { animation: wc-fade-in .5s ease backwards; } /* Morceaux déchirés : affichés seulement à la déchirure, ils démarreraient alors les fondus d'apparition ci-dessus (.p3-in, .is-arriving après « Continuer ») depuis une opacité nulle, et le paquet entier masqué 60 ms plus tard, le paquet disparaissait (paquet rouvert moins de 0,9 s après « Continuer »). */ .pack-stage .p3-split .p3-leaf { animation: none; } /* Zone cliquable transparente posée sur le paquet */ .pack3d { position: absolute; inset: 0; z-index: 2; margin: 0; padding: 0; border: 0; background: none; cursor: var(--cur-hand); touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .pack-stage.p3-grab .pack3d { cursor: grabbing; } .pack3d:disabled { cursor: var(--cur-default); } .pack-stage[data-state="idle"] .pack3d:disabled { cursor: var(--cur-blocked); } /* plus de paquet : curseur « bloqué » (pendant une ouverture, le bouton est aussi désactivé : curseur normal) */ .pack3d:focus-visible { outline: 1px solid var(--brass, #c9a45c); outline-offset: calc(var(--p3-u) * 10); } .pack3d .lb { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .pack-tip { position: absolute; top: calc(100% + var(--p3-u) * 34); left: 50%; width: max-content; max-width: 90vw; margin: 0; transform: translateX(-50%); color: var(--muted, #9a9686); font-family: Jost, 'Century Gothic', sans-serif; font-size: 14px; letter-spacing: .08em; text-align: center; transition: opacity .3s; } .pack-stage:not([data-state="idle"]) .pack-tip, .pack-stage[data-state="idle"].p3-off .pack-tip { opacity: 0; } .pack-tip { pointer-events: none; } .pack-tip .on-touch { display: none; } @media (max-width: 760px) { .pack-stage { margin: 26px auto 46px; } .pack-tip .on-touch { display: inline; } .pack-tip .on-mouse { display: none; } } /* ---- Lueur ---- */ .p3-glow { --p3-glow: rgba(201, 164, 92, .30); position: absolute; inset: calc(var(--p3-u) * -50) calc(var(--p3-u) * -70) calc(var(--p3-u) * -40); background: radial-gradient(closest-side, var(--p3-glow), transparent); opacity: .75; pointer-events: none; transition: opacity .4s; } .pack-stage[data-golden="1"] .p3-glow { --p3-glow: rgba(243, 205, 110, .62); animation: p3-pulse 2.8s ease-in-out infinite, wc-fade-in .6s ease; } .pack-stage[data-diamond="1"] .p3-glow { --p3-glow: rgba(150, 212, 255, .68); animation: p3-pulse 2.8s ease-in-out infinite, wc-fade-in .6s ease; } .pack-stage[data-thematic="1"] .p3-glow { --p3-glow: rgba(190, 168, 235, .62); animation: p3-pulse 2.8s ease-in-out infinite, wc-fade-in .6s ease; } .pack-stage[data-silver="1"] .p3-glow { --p3-glow: rgba(215, 222, 230, .55); animation: p3-pulse 2.8s ease-in-out infinite, wc-fade-in .6s ease; } /* la pulsation d'abord, le fondu d'apparition en dernier : il prime le temps de .6 s, puis la pulsation continue */ /* ---- Ombre au sol (insérée par le script) ---- */ .p3-shadow { position: absolute; left: calc(var(--p3-u) * 28); width: calc(var(--p3-u) * 144); top: calc(var(--p3-u) * 366); height: calc(var(--p3-u) * 18); border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .45), transparent); animation: p3-shadow 4.2s ease-in-out infinite; transition: opacity .3s; } /* ---- Flottement (le modèle est dessiné en --p3-ss × puis réduit : amplitude multipliée d'autant ; 9 px à l'écran) ---- */ .p3-float { animation: p3-float 4.2s ease-in-out infinite; } /* ========================================================================== États ========================================================================== */ .pack-stage:not([data-state="idle"]) .p3-float, .pack-stage:not([data-state="idle"]) .p3-shadow { animation-play-state: paused; } /* Grisé : aucun paquet disponible. Seulement AU REPOS : pendant l'ouverture, pack.js désactive aussi le bouton (pas de double clic), le paquet ne doit pas griser */ /* Gris et transparence posés sur chaque face (.p3-leaf), jamais sur un parent des plans 3D (voir plus haut) */ .pack-stage[data-state="idle"].p3-off .p3-leaf, .pack-stage[data-state="idle"]:has(.pack3d:disabled) .p3-leaf { filter: grayscale(.85) brightness(.72); opacity: .5; } .pack-stage[data-state="idle"].p3-off .p3-float, .pack-stage[data-state="idle"].p3-off .p3-shadow, .pack-stage[data-state="idle"]:has(.pack3d:disabled) .p3-float, .pack-stage[data-state="idle"]:has(.pack3d:disabled) .p3-shadow { animation-play-state: paused; } .pack-stage[data-state="idle"].p3-off .p3-glow, .pack-stage[data-state="idle"]:has(.pack3d:disabled) .p3-glow { opacity: .12; animation: none; } /* Secousse : lueur renforcée */ .pack-stage[data-state="shaking"] .p3-glow, .pack-stage[data-state="tearing"] .p3-glow { opacity: 1; animation: none; } /* Ouverture : la lueur et l'ombre s'effacent avec le sachet (0,85 → 1,6 s) */ .pack-stage[data-state="opened"] .p3-glow, .pack-stage[data-state="opened"] .p3-shadow { animation: p3-fade .75s ease-in .85s forwards; } /* Disparu (le paquet lui-même est masqué par visibility, jamais par une opacité : voir plus haut) */ .pack-stage[data-state="gone"] .p3-glow, .pack-stage[data-state="gone"] .p3-shadow { opacity: 0; animation: none; } /* La zone cliquable (transparente) ne doit pas rester posée sur les cartes et le bouton « Continuer ». Le paquet lui-même n'est PAS masqué en bloc (visibility sur .pack3d-wrap) : ses faces sont déjà effacées en fondu (pack3d.js, fadeOut), et masquer puis réafficher des plans 3D les laissait parfois invisibles sur Chrome Android. */ .pack-stage[data-state="gone"] .pack3d { visibility: hidden; pointer-events: none; } /* ========================================================================== Animations ========================================================================== */ @keyframes p3-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(var(--pk, 1) * var(--p3-ss, 2) * -9px)); } /* = 9 px à l'écran */ } @keyframes p3-shadow { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(.84); opacity: .55; } } @keyframes p3-pulse { 0%, 100% { opacity: .5; transform: scale(.93); } 50% { opacity: 1; transform: scale(1.05); } } @keyframes p3-fade { to { opacity: 0; } } /* ========================================================================== Mouvement réduit : ni flottement, ni pulsation (secousse et envol sont coupés par le script) ========================================================================== */ /* moins d'animations (boot.js, docs/animations.md) */ :where(:root[data-motion="reduce"]) .p3-float, :where(:root[data-motion="reduce"]) .p3-shadow, :where(:root[data-motion="reduce"]) .p3-glow { animation: none !important; } :where(:root[data-motion="reduce"]) .pack-stage[data-state="opened"] .p3-glow, :where(:root[data-motion="reduce"]) .pack-stage[data-state="opened"] .p3-shadow { animation: p3-fade .4s linear .6s forwards !important; } /* ================= Curseurs Art déco (dessinés par Claude Design) : éventail, main, bloqué (32 px) ================= Laiton du site sur un contour vert-noir (couleurs de --brass et --bg). Les règles du site qui changent de curseur utilisent ces variables (cursor: var(--cur-hand) au lieu de pointer, etc.) ; le mot-clé après l'image est le curseur de secours. Les champs de saisie gardent leur curseur texte. */ :root { --cur-default: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M3%203L26.2%209.2A24%2024%200%200%201%209.2%2026.2Z%22%20fill%3D%22%23c9a45c%22%20stroke%3D%22%230a110f%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22miter%22%2F%3E%3Cpath%20d%3D%22M3%203L20%2020M11.7%205.3A9%209%200%200%201%205.3%2011.7%22%20fill%3D%22none%22%20stroke%3D%22%230a110f%22%20stroke-width%3D%221.2%22%2F%3E%3C%2Fsvg%3E") 3 3, auto; --cur-hand: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M9%204A2%202%200%200%201%2013%204L13%2011A1.75%201.75%200%200%201%2016.5%2011L16.5%2012.5A1.75%201.75%200%200%201%2020%2012.5L20%2014A1.75%201.75%200%200%201%2023.5%2014L23.5%2022L20.5%2028L12%2028L4.6%2018.2A1.6%201.6%200%200%201%207%2016.4L9%2018.5Z%22%20fill%3D%22%23c9a45c%22%20stroke%3D%22%230a110f%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M13%2011V17M16.5%2012.5V17M20%2014V17M12.2%2028A4%204%200%200%201%2020.2%2028M16.2%2028V24%22%20fill%3D%22none%22%20stroke%3D%22%230a110f%22%20stroke-width%3D%221.2%22%2F%3E%3C%2Fsvg%3E") 11 2, pointer; --cur-blocked: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M8.2%208.2L23.8%2023.8%22%20stroke%3D%22%230a110f%22%20stroke-width%3D%225.5%22%2F%3E%3Cpath%20d%3D%22M8.2%208.2L23.8%2023.8%22%20stroke%3D%22%23c9a45c%22%20stroke-width%3D%223.5%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2211%22%20fill%3D%22none%22%20stroke%3D%22%230a110f%22%20stroke-width%3D%225.5%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2211%22%20fill%3D%22none%22%20stroke%3D%22%23c9a45c%22%20stroke-width%3D%223.5%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2211%22%20fill%3D%22none%22%20stroke%3D%22%230a110f%22%20stroke-width%3D%220.8%22%2F%3E%3C%2Fsvg%3E") 16 16, not-allowed; } html, body { cursor: var(--cur-default); } a, button, [role="button"], label, select, summary { cursor: var(--cur-hand); } [disabled], .disabled, [aria-disabled="true"] { cursor: var(--cur-blocked); } /* ---------- WikiSpeed (0.14.0) : public/wikispeed.php, assets/wikispeed.js ---------- */ .ws { max-width: 1100px; padding: clamp(28px, 5vw, 56px) 0 72px; } /* Les phases (invite/lobby/décompte/course/fin) montrent et cachent leurs sections ([hidden]), qui changent la hauteur de la page : sans ceci, le recalage automatique du navigateur (scroll anchoring) s'anime par à-coups sur Firefox (même cause que .opener, page « Paquets », voir plus haut). */ .wrap.ws { overflow-anchor: none; } .ws-head { text-align: center; margin: 0 0 18px; } .ws-kicker { margin: 0 0 6px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; } .ws-kicker a { color: var(--brass-ink); text-decoration: none; } .ws-head h1 { margin: 0; font-size: clamp(28px, 4.4vw, 40px); font-weight: 400; letter-spacing: .24em; text-transform: uppercase; } .ws-lead { margin: 8px auto 0; max-width: 560px; color: var(--muted); } .ws-racing .ws-head { display: none; } .ws-msg { min-height: 1.5em; margin: 0 0 12px; text-align: center; color: var(--brass-ink); font-size: 14.5px; } .ws-msg.is-error { color: var(--err-ink); } .ws-phase[hidden] { display: none; } .ws-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 22px 0 0; } .ws-actions .btn { text-decoration: none; } .ws-av, .ws-av-lg { border-radius: 50%; object-fit: cover; border: 2px solid var(--brass-line); background: var(--card); } .ws-av { width: 36px; height: 36px; } .ws-av-lg { width: 84px; height: 84px; } /* Face à face (invitation) */ .ws-duel { display: flex; justify-content: center; align-items: center; gap: clamp(20px, 6vw, 64px); margin: 12px 0 18px; } .ws-duelist { display: grid; justify-items: center; gap: 10px; font-weight: 500; letter-spacing: .06em; } .ws-vs { display: grid; justify-items: center; gap: 10px; color: var(--muted); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; } .ws-invite-text { margin: 0; text-align: center; font-size: 19px; } .ws-timer-note { margin: 6px 0 0; text-align: center; color: var(--muted); font-size: 13.5px; font-variant-numeric: tabular-nums; } /* Choix des cartes */ .ws-seats { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: clamp(12px, 4vw, 48px); max-width: 760px; margin: 0 auto; } .ws-seat { display: grid; justify-items: center; gap: 14px; padding: 18px 16px 22px; border: 1px solid var(--line); background: var(--surface); transition: border-color .3s ease, box-shadow .3s ease; } .ws-seat.is-ready { border-color: var(--brass); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brass) 30%, transparent); } .ws-seats > .ws-vs { align-self: center; } .ws-who { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 10px; text-align: center; } .ws-name { font-weight: 500; } .ws-chip { padding: 3px 9px; border: 1px solid var(--line); color: var(--muted); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; } .ws-chip.is-ready { border-color: var(--brass); background: var(--brass-ink); color: var(--on-brass); } .cards.collection.ws-slot { display: block; width: min(210px, 100%); padding: 0; margin: 0; } .ws-slot > li { width: 100%; } .ws-empty { display: grid; place-items: center; aspect-ratio: 5 / 7; border: 1px dashed var(--brass-line); color: var(--muted); font-size: 13px; text-align: center; padding: 12px; } .ws-back .card-in { cursor: default; } .ws-rule { max-width: 620px; margin: 20px auto 0; text-align: center; color: var(--muted); font-size: 14.5px; } .ws-picker { margin: 34px 0 0; } .ws-picker[hidden] { display: none; } .ws-picker-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--brass-line); } .ws-picker-head h2 { margin: 0; font-size: 15px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--brass-ink); } .ws-search { max-width: 280px; margin: 0; } .ws-grid .cards.collection { grid-template-columns: repeat(var(--pick-cols, 5), minmax(0, 1fr)) !important; gap: 18px 14px !important; padding: 0 !important; } /* --pick-cols : colonnes calculées par wikispeed.js (3 rangées pleines) */ .ws-grid .card-in { cursor: var(--cur-hand); } .ws-pager { margin: 18px 0 0; } .ws-pager .pager { margin: 0; } #ws-pager-top { margin: 16px 0 18px; } .ws-picker .coll-filters { margin-bottom: 4px; } .ws-leave { margin: 26px 0 0; text-align: center; } .link-btn.is-confirm { color: var(--err-ink); } @media (max-width: 560px) { .ws-seats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; } .ws-seats > .ws-vs { display: none; } .ws-seat { align-content: start; gap: 10px; padding: 12px 8px 14px; } .ws-who { flex-direction: column; gap: 6px; } .ws-chip { font-size: 10px; letter-spacing: .08em; white-space: nowrap; } .cards.collection.ws-slot { width: min(128px, 100%); } .ws-empty { font-size: 12px; } .ws-rule { margin-top: 14px; font-size: 13.5px; } .ws-actions { gap: 10px; margin-top: 16px; } .ws-actions .btn { flex: 1 1 140px; padding: 14px 12px; } .ws-picker { margin-top: 26px; } .ws-picker-head { gap: 10px; } .ws-search { max-width: none; width: 100%; } .ws-grid .cards.collection { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; } .ws-search { font-size: 16px; } /* 16 px : sinon iOS agrandit toute la page quand on touche le champ */ .ws-pager .btn, .ws-leave .btn-tertiary { min-height: 44px; padding-inline: 16px; } /* cibles tactiles de 44 px */ } /* Mélange et décompte */ .ws-countdown { position: relative; padding: 10px 0 40px; } .ws-shuffle { display: flex; justify-content: center; gap: clamp(18px, 6vw, 80px); } .ws-draw { display: grid; justify-items: center; gap: 14px; width: min(220px, 42vw); } .ws-draw .cards.collection.ws-slot { width: 100%; } .ws-label { display: grid; justify-items: center; gap: 2px; margin: 0; text-align: center; opacity: 0; transition: opacity .4s ease .1s; } .ws-label span { font-size: 11.5px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--brass-ink); } .ws-label b { font-weight: 500; font-size: 15px; } .ws-shuffle.is-dealt .ws-label { opacity: 1; } .ws-shuffle.is-shuffling .is-start { animation: ws-swap-l .4s ease-in-out 4 alternate; } .ws-shuffle.is-shuffling .is-target { animation: ws-swap-r .4s ease-in-out 4 alternate; } @keyframes ws-swap-l { from { translate: 0 0; } to { translate: calc(100% + clamp(18px, 6vw, 80px)) -10px; } } @keyframes ws-swap-r { from { translate: 0 0; } to { translate: calc(-100% - clamp(18px, 6vw, 80px)) 10px; } } .ws-count { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; pointer-events: none; font-size: clamp(90px, 18vw, 180px); font-weight: 300; letter-spacing: .06em; color: var(--brass-ink); text-shadow: 0 2px 0 var(--bg), 0 0 30px var(--bg); } .ws-count:empty { display: none; } .ws-count.is-beat { animation: ws-beat .9s var(--ease); } /* transform: scale() plutôt que la propriété scale seule : même correctif que .help-pulse (écarts de composition entre moteurs sous Firefox) */ @keyframes ws-beat { from { transform: scale(1.6); opacity: 0; } 30% { opacity: 1; } to { transform: scale(1); opacity: 1; } } /* La course : barre collante sous l'en-tête, puis l'article */ .ws-bar { position: sticky; top: 77px; z-index: 20; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px 18px; border: 1px solid var(--brass-line); background: var(--top-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .ws-goal { min-width: 0; display: grid; gap: 6px; } /* deux lignes pleine largeur : l'arrivée (avec « Voir la carte d'arrivée »), puis la page où l'on est ; un long titre passe à la ligne */ .ws-goal-row { display: grid; grid-template-columns: 8.5em minmax(0, 1fr) auto; align-items: baseline; gap: 4px 12px; } .ws-goal span { font-size: 10.5px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--brass-ink); } .ws-goal b { font-weight: 500; font-size: 18px; overflow-wrap: anywhere; } .ws-goal .ws-here { font-size: 15px; color: var(--muted); } .ws-goal-row .btn-tertiary { align-self: center; white-space: nowrap; } .ws-barrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 22px; padding-top: 10px; border-top: 1px solid var(--line); } .ws-stats { display: flex; align-items: center; gap: 16px; } .ws-time { font-size: 20px; font-weight: 300; font-variant-numeric: tabular-nums; letter-spacing: .04em; } .ws-score { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; } .ws-score .ws-av { width: 28px; height: 28px; } .ws-score b { font-weight: 500; font-size: 16px; } .ws-score small { color: var(--muted); font-size: 11px; } .ws-score.is-other { opacity: .8; } .ws-tools { display: flex; gap: 8px; } .ws-fold { display: none; } /* téléphone seulement (plus bas) : plier / déplier la barre de course (wikispeed-bar.js) */ .ws-tools svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } #ws-dark .moon { display: none; } #ws-dark.is-on { background: color-mix(in srgb, var(--brass) 18%, transparent); border-color: var(--brass); } #ws-dark.is-on .sun { display: none; } #ws-dark.is-on .moon { display: block; } @media (max-width: 760px) { .ws-bar { padding: 10px 12px; margin-inline: -8px; max-height: 60vh; max-height: 60dvh; overflow-y: auto; overscroll-behavior: contain; } .ws-goal b { font-size: 16px; line-height: 1.3; } .ws-goal .ws-here { font-size: 14px; } .ws-barrow { gap: 8px 12px; padding-top: 8px; } .ws-fold { appearance: none; flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: -8px -6px -8px auto; padding: 0; border: 0; background: none; color: var(--brass-ink); cursor: var(--cur-hand); -webkit-tap-highlight-color: transparent; } .ws-fold svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: rotate .25s ease; } .ws-fold[aria-expanded="true"] svg { rotate: 180deg; } /* repliée : l'arrivée (une ligne), le temps, les clics et le temps restant ; dépliée : tout le reste (page actuelle, carte d'arrivée, outils) */ .ws-bar.is-folded .ws-goal-row:nth-child(n+2), .ws-bar.is-folded .ws-goal-row .btn-tertiary, .ws-bar.is-folded .ws-tools { display: none; } .ws-bar.is-folded .ws-goal { gap: 2px; } .ws-bar.is-folded .ws-goal-row > span { font-size: 9.5px; } .ws-bar.is-folded .ws-goal b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ws-bar.is-folded .ws-barrow { padding-top: 6px; flex-wrap: nowrap; } .ws-goal-row { grid-template-columns: minmax(0, 1fr); } /* le titre prend toute la largeur ; « Voir la carte d'arrivée » passe dessous */ .ws-goal-row .btn-tertiary { justify-self: start; } .ws-tools { flex: 1 1 100%; flex-wrap: wrap; justify-content: space-between; } .ws-tools .btn-tertiary { flex: 1 1 auto; justify-content: center; min-height: 44px; padding-inline: 10px; } .ws-tools { gap: 6px; } .ws-tools .btn-tertiary { flex: 0 1 auto; padding-inline: 8px; font-size: 11px; letter-spacing: .08em; gap: 6px; } .ws-tools .btn-tertiary:first-child { flex: 1 1 auto; } .ws-tools [aria-pressed] { flex: 0 0 44px; padding-inline: 0; } .ws-tools [aria-pressed] span { display: none; } /* le bouton du mode sombre ne garde que son icône (soleil / lune) : les trois outils tiennent sur une ligne */ /* cibles tactiles de 44 px */ .ws-stats { gap: 10px; } .ws-score small { display: none; } } /* La page de jeu occupe (quasiment) toute la largeur de la fenêtre : marges de 50 px maximum de chaque côté, réduites sur petit écran. */ .wrap.ws { width: calc(100% - 2 * clamp(16px, 4vw, 50px) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)); } /* L'article de Wikipédia : TOUJOURS en thème clair Art déco (ivoire, encre, laiton), quel que soit le thème du site. Aucune image : le serveur les retire (src/WikiPage.php). */ .ws-page { color-scheme: light; --text: #1b1a16; --muted: #58584a; --line: rgba(27, 26, 22, .14); --brass: #a8823a; --brass-line: rgba(125, 95, 36, .45); --brass-ink: #7d5f24; --on-brass: #fbf8f1; --paper: #f8f4e7; --paper-2: #efe9d6; position: relative; margin: 18px 0 0; padding: clamp(22px, 4vw, 52px) clamp(18px, 5vw, 64px) 36px; background: var(--paper); color: var(--text); border: 1px solid var(--brass-line); box-shadow: inset 0 0 0 5px var(--paper), inset 0 0 0 6px var(--brass-line); font-size: 16.5px; line-height: 1.68; overflow-wrap: break-word; transition: opacity .2s ease; } .ws-page.is-loading { opacity: .45; pointer-events: none; } /* Variante sombre de l'article (bouton de bascule .ws-tools #ws-dark), clair par défaut, préférence mémorisée en local. */ .ws-page.is-dark { color-scheme: dark; --text: #ece7db; --muted: #9a9686; --line: rgba(236, 231, 219, .12); --brass: #c9a45c; --brass-line: rgba(201, 164, 92, .38); --brass-ink: #d3b06a; --on-brass: #14110a; --paper: #141f1a; --paper-2: #1b2921; } .ws-title { margin: 0 0 22px; padding: 0 0 16px; text-align: center; font-size: clamp(24px, 3.6vw, 34px); font-weight: 400; letter-spacing: .12em; text-transform: uppercase; background: linear-gradient(90deg, transparent, var(--brass-line), transparent) bottom / 100% 1px no-repeat; } /* Sommaire de l'article (généré par le serveur à partir des titres, src/WikiPage.php) : boîte repliable, style Art déco. */ .ws-toc[hidden] { display: none; } .ws-toc-box { margin: 0 0 24px; border: 1px solid var(--brass-line); background: var(--paper-2); padding: 0 16px; } .ws-toc-box summary { padding: 10px 0; font-size: 12.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--brass-ink); cursor: var(--cur-hand); list-style: none; } .ws-toc-box summary::-webkit-details-marker { display: none; } .ws-toc-box summary::before { content: "▸"; display: inline-block; width: 1em; margin-right: 6px; rotate: 0deg; transition: rotate .2s ease; } .ws-toc-box[open] summary::before { rotate: 90deg; } .ws-toc-box ul { margin: 0 0 14px; padding-left: 0; list-style: none; columns: 2; column-gap: 28px; } .ws-toc-box li { break-inside: avoid; font-size: 14px; line-height: 1.7; } .ws-toc-box li.ws-toc-l3 { padding-left: 16px; } .ws-toc-box li.ws-toc-l4 { padding-left: 32px; font-size: 13px; } .ws-toc-box a { color: var(--text); text-decoration: none; cursor: var(--cur-hand); } .ws-toc-box a:hover, .ws-toc-box a:focus-visible { color: var(--brass-ink); text-decoration: underline; text-decoration-color: var(--brass-line); } @media (max-width: 600px) { .ws-toc-box ul { columns: 1; } } .ws-content { max-width: 78ch; margin: 0 auto; } .ws-content::after { content: ""; display: block; clear: both; } .ws-content p { margin: 0 0 1em; } .ws-content h2, .ws-content h3, .ws-content h4, .ws-content h5 { clear: both; margin: 1.8em 0 .6em; font-weight: 500; line-height: 1.3; } .ws-content h2 { display: flex; align-items: center; gap: 12px; font-size: 21px; letter-spacing: .08em; text-transform: uppercase; color: var(--brass-ink); } .ws-content h2::before { content: ""; width: 8px; height: 8px; rotate: 45deg; border: 1px solid var(--brass); flex: none; } .ws-content h2::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--brass-line), transparent); } .ws-content h3 { font-size: 18px; letter-spacing: .04em; } .ws-content h4, .ws-content h5 { font-size: 16px; color: var(--muted); } .ws-content ul, .ws-content ol { margin: 0 0 1em; padding-left: 1.4em; } .ws-content ul li::marker { color: var(--brass); } .ws-content dl { margin: 0 0 1em; } .ws-content dt { font-weight: 500; } .ws-content dd { margin: 0 0 .4em 1.4em; } .ws-content blockquote { margin: 1em 0; padding: 4px 0 4px 18px; border-left: 2px solid var(--brass-line); font-style: italic; } .ws-content a.ws-a { color: var(--brass-ink); text-decoration: underline; text-decoration-color: var(--brass-line); text-underline-offset: 3px; cursor: var(--cur-hand); transition: color .15s ease, background .15s ease; } .ws-content a.ws-a:hover, .ws-content a.ws-a:focus-visible { color: var(--text); background: color-mix(in srgb, var(--brass) 18%, transparent); text-decoration-color: var(--brass); } .ws-content a.ws-a:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; } .ws-content .ws-note { margin: 0 0 1.2em; padding: 6px 0 6px 14px; border-left: 2px solid var(--brass-line); color: var(--muted); font-size: 14.5px; font-style: italic; } .ws-content .ws-note .ws-note { margin: 0; padding: 0; border: 0; } .ws-content .ws-note p { margin: 0; } .ws-content table { border-collapse: collapse; margin: 0 0 1.2em; font-size: 14.5px; line-height: 1.45; } .ws-content caption { padding: 6px 8px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; font-size: 12.5px; color: var(--brass-ink); text-align: left; } .ws-content th, .ws-content td { padding: 5px 9px; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; } .ws-content th { font-weight: 500; } .ws-content .ws-table { display: block; max-width: 100%; overflow-x: auto; border: 1px solid var(--line); } /* Autres tableaux (sans classe wikitable) et blocs de code : défilent aussi au lieu d'élargir la page sur téléphone ; ceux des infobox et des boîtes de navigation gardent leur mise en page */ .ws-content pre, .ws-content table:not(.ws-infobox table, .ws-navbox table) { max-width: 100%; overflow-x: auto; } .ws-content table:not(.ws-table, .ws-infobox table, .ws-navbox table) { display: block; } .ws-content .ws-table th { background: var(--paper-2); } /* Infobox : encadré à droite (au-dessus du texte sur téléphone), double filet laiton */ .ws-content .ws-infobox { float: right; clear: right; width: min(320px, 100%); margin: 0 0 20px 28px; padding: 14px 14px 8px; background: var(--paper-2); border: 1px solid var(--brass-line); box-shadow: inset 0 0 0 3px var(--paper-2), inset 0 0 0 4px var(--brass-line); font-size: 13.5px; line-height: 1.45; } .ws-content .ws-infobox table { width: 100%; margin: 0 0 8px; font-size: 13.5px; } .ws-content .ws-infobox th { width: 40%; color: var(--muted); font-weight: 500; } .ws-content .ws-infobox td, .ws-content .ws-infobox th { padding: 4px 6px; } .ws-content .ws-ib-head { margin: 0 0 8px; padding: 0 0 8px; text-align: center; font-size: 16px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid var(--brass-line); } @media (max-width: 720px) { .ws-content .ws-infobox { float: none; width: 100%; margin: 0 0 20px; } } /* Boîtes de navigation (en bas des articles) : texte plus petit */ .ws-content .ws-navbox { clear: both; display: block; max-width: 100%; overflow-x: auto; margin: 1.6em 0 0; padding: 10px 12px; border: 1px solid var(--line); background: var(--paper-2); font-size: 13px; line-height: 1.55; } .ws-content .ws-navbox table { margin: 0; font-size: 13px; } .ws-content .ws-navbox th { color: var(--brass-ink); } .ws-source { clear: both; max-width: 78ch; margin: 28px auto 0; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.5; } /* Résultat */ .ws-verdict { position: relative; max-width: 640px; margin: 0 auto; padding: 40px 28px 32px; text-align: center; border: 1px solid var(--line); background: var(--surface); overflow: hidden; } .ws-verdict::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 90% at 50% -10%, color-mix(in srgb, var(--brass) 16%, transparent), transparent); pointer-events: none; } .ws-verdict.is-win { border-color: var(--brass); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brass) 35%, transparent), 0 10px 30px -18px var(--brass); } .ws-verdict.is-loss { opacity: .92; } .ws-verdict .ws-badge { position: relative; width: 44px; height: 44px; margin: 0 auto 22px; rotate: 45deg; border: 1px solid var(--brass); } .ws-verdict .ws-badge::before { content: ""; position: absolute; inset: 7px; border: 1px solid var(--brass-line); } .ws-verdict .ws-badge::after { content: ""; position: absolute; inset: 15px; background: var(--brass); } .ws-verdict.is-loss .ws-badge { border-color: var(--muted); } .ws-verdict.is-loss .ws-badge::before { border-color: var(--line); } .ws-verdict.is-loss .ws-badge::after { background: var(--muted); } .ws-verdict h2 { position: relative; margin: 0 0 10px; font-size: clamp(26px, 4vw, 36px); font-weight: 400; letter-spacing: .18em; text-transform: uppercase; } .ws-verdict.is-win h2 { color: var(--brass-ink); } .ws-verdict p { position: relative; margin: 0; color: var(--muted); } .ws-verdict .ws-pieces { position: relative; display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 20px; padding: 8px 18px; border: 1px solid var(--brass-line); background: color-mix(in srgb, var(--brass) 10%, transparent); } .ws-pieces b { color: var(--brass-ink); font-weight: 500; } .ws-pieces span { color: var(--muted); font-size: 13.5px; } .ws-pieces .wc-piece { width: 1.5em; height: 1.5em; } .ws-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 760px; margin: 26px auto 0; } @media (max-width: 600px) { .ws-paths { grid-template-columns: minmax(0, 1fr); } } .ws-path { padding: 18px 20px; border: 1px solid var(--line); background: var(--surface); } .ws-path h3 { margin: 0 0 16px; font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--brass-ink); } .ws-path ol { margin: 0; padding: 0; list-style: none; counter-reset: ws-step; } .ws-path li { position: relative; padding: 0 0 16px 30px; font-size: 14.5px; line-height: 1.5; counter-increment: ws-step; overflow-wrap: anywhere; } .ws-path li::before { content: counter(ws-step); position: absolute; left: 0; top: -1px; width: 20px; height: 20px; display: grid; place-items: center; font-size: 10.5px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--muted); border: 1px solid var(--line); background: var(--bg); } .ws-path li::after { content: ""; position: absolute; left: 9px; top: 21px; bottom: -2px; width: 1px; background: var(--line); } .ws-path li:last-child { padding-bottom: 0; } .ws-path li:last-child::after { display: none; } .ws-path a { color: var(--text); text-decoration: none; } .ws-path a:hover, .ws-path a:focus-visible { color: var(--brass-ink); text-decoration: underline; text-decoration-color: var(--brass-line); } .ws-path li.is-goal { font-weight: 500; } .ws-path li.is-goal::before { color: var(--on-brass); border-color: var(--brass); background: var(--brass); } .ws-paths > .ws-source { grid-column: 1 / -1; margin: 0; border: 0; text-align: center; } .ws-toast { position: fixed; left: 50%; bottom: 90px; z-index: 80; translate: -50% 0; margin: 0; padding: 10px 18px; background: var(--brass-ink); color: var(--on-brass); font-size: 14px; box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .5); } .ws-toast[hidden] { display: none; } /* moins d'animations (boot.js, docs/animations.md) */ :where(:root[data-motion="reduce"]) .ws-shuffle.is-shuffling :is(.is-start, .is-target) { animation: none; } :where(:root[data-motion="reduce"]) .ws-count.is-beat { animation: none; } .ws-note { min-height: 1.5em; margin: 18px 0 0; text-align: center; color: var(--brass-ink); font-weight: 500; letter-spacing: .02em; } @media (max-width: 760px), (hover: none) and (pointer: coarse) and (max-width: 1100px) { body:has(.bottom-nav) .ws-bar { top: env(safe-area-inset-top, 0px); } } /* sans en-tête en haut (barre du bas) : la barre de course colle au bord */ /* Pendant la course, sur téléphone : la cloche flottante (en bas à droite) recouvrait le texte et des liens de l'article ; elle revient à la fin */ body.ws-racing .notif-float { display: none; } /* Bouton flottant « retour en haut », visible pendant la course dès qu'on a défilé (même style Art déco que .theme / .notif-float). */ .ws-totop { position: fixed; z-index: 55; right: max(18px, env(safe-area-inset-right, 0px)); bottom: max(18px, env(safe-area-inset-bottom, 0px)); width: 44px; height: 44px; padding: 0; border: 0; appearance: none; display: grid; place-items: center; background: var(--surface); box-shadow: inset 0 0 0 1.84px var(--brass-line), 0 6px 18px rgba(0, 0, 0, .35); color: var(--brass-ink); cursor: var(--cur-hand); rotate: 45deg; opacity: 0; translate: 0 14px; pointer-events: none; transition: opacity .25s ease, translate .25s ease; } .ws-totop.is-shown { opacity: 1; translate: 0 0; pointer-events: auto; } .ws-totop svg { width: 20px; height: 20px; rotate: -45deg; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } @media (max-width: 760px), (hover: none) and (pointer: coarse) and (max-width: 1100px) { .ws-totop { bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 16px); } } /* Même dégagement que .ws-totop : sur téléphone, la barre de navigation du bas (64px + encoche) recouvrirait sinon le toast */ @media (max-width: 760px), (hover: none) and (pointer: coarse) and (max-width: 1100px) { .ws-toast { bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 26px); } } .jx-back { margin: 0 0 8px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; } .jx-back a { color: var(--brass-ink); text-decoration: none; } /* ========================================================= Page Jeux (public/jeux.php, src/JeuxView.php) : dessinée par Claude Design, proposition D « Triptyque ». Classes renommées à l'intégration (ws- -> wsb-, jx- -> jxp-) : .ws-… et .jx-… existent déjà (page de course WikiSpeed, page Missions). Les deux cartes de l'aperçu sont de vraies cartes du site (CollectionView::card) dans un aperçu inerte (attribut inert : ni clic, ni focus). Dépend des jetons :root du site et des classes .r1…r7 (variable --rc). ========================================================= */ /* ---------- Gradins : deux marches par coin (--s = taille d'une marche) ---------- */ .wsb-frame::before, .wsb-bg, .gqb-frame::before, .gqb-bg, .gqj-frame::before, .gqj-bg, .gq-end-frame::before, .gq-end-bg, .gq-recap-item, .jxp-encart::before, .jxp-encart::after, .wsb-gains > div::before, .wsb-gains > div::after { clip-path: polygon( 0 calc(2*var(--s)), var(--s) calc(2*var(--s)), var(--s) var(--s), calc(2*var(--s)) var(--s), calc(2*var(--s)) 0, calc(100% - 2*var(--s)) 0, calc(100% - 2*var(--s)) var(--s), calc(100% - var(--s)) var(--s), calc(100% - var(--s)) calc(2*var(--s)), 100% calc(2*var(--s)), 100% calc(100% - 2*var(--s)), calc(100% - var(--s)) calc(100% - 2*var(--s)), calc(100% - var(--s)) calc(100% - var(--s)), calc(100% - 2*var(--s)) calc(100% - var(--s)), calc(100% - 2*var(--s)) 100%, calc(2*var(--s)) 100%, calc(2*var(--s)) calc(100% - var(--s)), var(--s) calc(100% - var(--s)), var(--s) calc(100% - 2*var(--s)), 0 calc(100% - 2*var(--s))); } /* ---------- Page ---------- */ .jxp-page { container: jxp / inline-size; width: 100%; /* un conteneur de requêtes ne prend pas la largeur de son contenu : largeur explicite */ max-width: 1200px; margin: 0 auto; padding: 48px 24px 72px; color: var(--text); overflow-x: clip; } .jxp-page :focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; } /* Haut de page « Jeux » / « Atelier » : titre en Josefin Sans (géométrique, d'inspiration années 1920), motif Art déco discret de chaque côté (losange, trois chevrons, filet qui s'estompe), puis un filet orné et le chapeau dans la même police. La roue qui tourne derrière est celle de « Paquets » (.jxp-page::before, plus haut). */ .jxp-head { display: grid; justify-items: center; text-align: center; gap: 16px; margin-bottom: 64px; } .jxp-title { --ls: .34em; display: flex; align-items: center; gap: 22px; margin: 0; font: 400 44px/1.1 "Josefin Sans", var(--font); letter-spacing: var(--ls); text-transform: uppercase; } .jxp-title::before, .jxp-title::after { content: ""; flex: none; width: clamp(90px, 18vw, 190px); height: 14px; background: var(--brass); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 14'%3E%3Cpath d='M4 3.5 7.5 7 4 10.5.5 7Z'/%3E%3Cg fill='none' stroke='%23000' stroke-width='1.1'%3E%3Cpath d='M16 2.5 21.5 7 16 11.5'/%3E%3Cpath stroke-opacity='.65' d='M27 2.5 32.5 7 27 11.5'/%3E%3Cpath stroke-opacity='.35' d='M38 2.5 43.5 7 38 11.5'/%3E%3C/g%3E%3C/svg%3E") left center / 50px 14px no-repeat, linear-gradient(90deg, #000, transparent) right center / calc(100% - 58px) 1px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 14'%3E%3Cpath d='M4 3.5 7.5 7 4 10.5.5 7Z'/%3E%3Cg fill='none' stroke='%23000' stroke-width='1.1'%3E%3Cpath d='M16 2.5 21.5 7 16 11.5'/%3E%3Cpath stroke-opacity='.65' d='M27 2.5 32.5 7 27 11.5'/%3E%3Cpath stroke-opacity='.35' d='M38 2.5 43.5 7 38 11.5'/%3E%3C/g%3E%3C/svg%3E") left center / 50px 14px no-repeat, linear-gradient(90deg, #000, transparent) right center / calc(100% - 58px) 1px no-repeat; } .jxp-title::before { transform: scaleX(-1); margin-right: var(--ls); } /* la dernière lettre garde son espacement : la marge équilibre les deux côtés */ .jxp-lead { margin: 0; max-width: 54ch; color: var(--muted); font: 400 16px/1.65 "Josefin Sans", var(--font); letter-spacing: .03em; text-wrap: balance; } .jxp-lead::before { content: ""; display: block; width: 120px; height: 8px; margin: 0 auto 18px; background: var(--brass); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8'%3E%3Cpath d='M60 .5 63.5 4 60 7.5 56.5 4Z'/%3E%3Cpath fill='none' stroke='%23000' d='M0 4H52M68 4H120'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8'%3E%3Cpath d='M60 .5 63.5 4 60 7.5 56.5 4Z'/%3E%3Cpath fill='none' stroke='%23000' d='M0 4H52M68 4H120'/%3E%3C/svg%3E") center / 100% 100% no-repeat; } .jxp-lead b { color: var(--text); font-weight: 600; white-space: nowrap; } /* « pièces » et son icône ne se séparent jamais */ .jxp-page .wc-piece { width: 1.2em; height: 1.2em; vertical-align: -.22em; flex: none; } /* Losange ornemental */ .jxp-dia { display: inline-block; width: 7px; height: 7px; transform: rotate(45deg); background: var(--brass); flex: none; } /* Intitulé en petites capitales, encadré de filets */ .jxp-label { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 11px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--brass-ink); } .jxp-label::after { content: ""; flex: 1; height: 1px; background: var(--brass-line); } /* Atelier : titres de section centrés entre deux filets de même épaisseur, en plus grand */ .at-gems > .jxp-label, .atl-board > .jxp-label { width: min(100%, 880px); align-self: center; justify-self: center; justify-content: center; gap: 22px; font-size: 18px; font-weight: 400; letter-spacing: .24em; } .at-gems > .jxp-label::before, .atl-board > .jxp-label::before { content: ""; flex: 1; height: 1px; background: var(--brass-line); } /* ========================================================= WikiSpeed ========================================================= */ .wsb { scroll-margin-top: 96px; } .wsb-frame { --s: 7px; position: relative; isolation: isolate; } .wsb-frame::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--brass); opacity: .75; } .wsb-bg { position: absolute; inset: 1px; z-index: -1; overflow: hidden; background: radial-gradient(ellipse 60% 90% at 78% 100%, color-mix(in srgb, var(--brass) 14%, transparent), transparent 70%), var(--card); box-shadow: inset 0 0 0 8px var(--card), inset 0 0 0 9px var(--brass-line); } .wsb-burst { position: absolute; left: 74%; top: 50%; width: 1300px; aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(circle, transparent 0 96px, var(--brass) 96px 97px, transparent 97px 106px, var(--brass) 106px 107px, transparent 107px), repeating-conic-gradient(from -.3deg, var(--brass) 0 .6deg, transparent .6deg 7deg, var(--brass) 7deg 8.6deg, transparent 8.6deg 15deg); -webkit-mask-image: radial-gradient(circle, transparent 0 60px, #000 62px, rgba(0,0,0,.55) 30%, transparent 58%); mask-image: radial-gradient(circle, transparent 0 60px, #000 62px, rgba(0,0,0,.55) 30%, transparent 58%); opacity: .2; } .wsb-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 32px; min-height: 400px; padding: 52px 56px 52px; } .wsb-main { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; position: relative; z-index: 1; } .wsb-kicker { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 11px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--brass-ink); } .wsb-kicker::before { content: ""; width: 28px; height: 1px; background: var(--brass); } .wsb-name { margin: -4px 0 0; font-weight: 300; font-size: 54px; line-height: 1; letter-spacing: .14em; text-transform: uppercase; } .wsb-name b { font-weight: 600; color: var(--brass-ink); } .wsb-rule { margin: 0; max-width: 42ch; color: var(--muted); font-size: 15px; line-height: 1.6; text-wrap: pretty; } /* Gains : plaque à double filet */ .wsb-gains { display: grid; grid-template-columns: 1fr 1fr; min-width: 300px; margin: 8px 5px 2px; border: 1px solid var(--brass-line); box-shadow: 0 0 0 4px var(--card), 0 0 0 5px var(--brass-line); } .wsb-gains > div { position: relative; display: flex; flex-direction: column-reverse; align-items: center; gap: 2px; padding: 12px 20px 10px; } .wsb-gains dt { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); } .wsb-gains dd { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 28px; font-weight: 300; letter-spacing: .04em; color: var(--brass-ink); } .wsb-gains dd .wc-piece { font-size: 18px; } /* Action : bouton + quota du jour */ .wsb-act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 10px; } .wsb-quota { display: flex; flex-direction: column; gap: 7px; margin: 0; font-size: 12px; line-height: 1.35; color: var(--muted); letter-spacing: .03em; max-width: 24ch; } .wsb-quota b { color: var(--text); font-weight: 500; letter-spacing: .06em; } .wsb-pips { display: flex; gap: 7px; } .wsb-pips i { width: 8px; height: 8px; transform: rotate(45deg); border: 1px solid var(--brass); } .wsb-pips i.on { background: var(--brass); } .wsb-quota.is-spent .wsb-pips i { border-color: var(--brass-line); } /* ---------- Aperçu de course (décoratif, déborde du cadre) ---------- */ .wsb-preview { position: relative; pointer-events: none; user-select: none; } .wsb-win { position: absolute; top: -96px; right: -20px; width: 90%; height: 330px; transform: rotate(3deg); transform-origin: 70% 30%; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--brass); box-shadow: 0 0 0 5px var(--bg), 0 0 0 6px var(--brass-line), 0 28px 60px rgba(0,0,0,.45); } .wsb-win-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--brass-line); } .wsb-win-goal { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .wsb-win-goal span { font-size: 8px; letter-spacing: .26em; text-transform: uppercase; color: var(--brass-ink); } .wsb-win-goal b { font-size: 12px; font-weight: 500; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wsb-win-time { font-size: 17px; font-weight: 300; letter-spacing: .12em; font-variant-numeric: tabular-nums; padding: 2px 10px; border: 1px solid var(--brass-line); } .wsb-win-players { display: flex; justify-content: flex-end; gap: 10px; } .wsb-win-players span { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); } .wsb-win-players .jxp-av { width: 20px; height: 20px; font-size: 9px; } .wsb-win-page { flex: 1; margin: 10px; padding: 16px 18px; background: #f8f4e7; display: flex; flex-direction: column; gap: 7px; overflow: hidden; } .wsb-win-page i { display: block; height: 5px; background: rgba(27,26,22,.16); } .wsb-win-page .t { height: 11px; width: 46%; background: #1b1a16; margin-bottom: 4px; } .wsb-win-page .h { height: 1px; background: #7d5f24; opacity: .5; margin: 2px 0 5px; } .wsb-win-page .a { background: #7d5f24; opacity: .8; } .wsb-win-page .row { display: flex; gap: 6px; } .wsb-win-page .row i { flex: 1; } .wsb-win-page .w1 { flex: 0 0 22% !important; } .wsb-win-page .w2 { flex: 0 0 14% !important; } .wsb-win-page .w3 { width: 72%; } .wsb-win-page .w4 { width: 88%; } /* Cartes Départ / Arrivée */ .wsb-cards { position: absolute; left: -8px; bottom: -72px; display: flex; } .wsb-card { position: relative; width: 136px; filter: drop-shadow(0 14px 20px rgba(0,0,0,.45)); } /* La vraie carte du site (CollectionView::card), dans sa grille d'une colonne : elle prend la largeur de l'enveloppe */ .wsb-card .cards.collection { display: block; width: 100%; margin: 0; padding: 0; } .wsb-card .card { width: 100%; } .wsb-card--a { transform: rotate(-7deg); z-index: 2; } .wsb-card--b { transform: rotate(5deg) translate(-18px, -28px); } .wsb-tag { position: absolute; z-index: 3; top: -9px; left: 50%; transform: translateX(-50%); padding: 3px 9px; background: var(--brass); color: var(--on-brass); font-size: 8.5px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; white-space: nowrap; } /* ---------- Courses du joueur ---------- */ .wsb-runs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 48px; margin: 120px 56px 0; } .wsb-group { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .wsb-list { list-style: none; margin: 0; padding: 0; } .wsb-run { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 60px; padding: 8px 0; border-bottom: 1px solid var(--line); } .wsb-run-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .wsb-run-txt b { font-weight: 500; letter-spacing: .03em; } .wsb-run-txt span { font-size: 13px; color: var(--muted); } .wsb-run.is-incoming .wsb-run-txt b { color: var(--brass-ink); } .wsb-runs-empty { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0; font-size: 13px; letter-spacing: .08em; color: var(--muted); } .wsb-runs-empty .jxp-dia { width: 5px; height: 5px; background: var(--brass-line); } .jxp-av { display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--surface); border: 1px solid var(--brass-line); color: var(--brass-ink); font-size: 14px; font-weight: 500; font-style: normal; overflow: hidden; } .jxp-av img { width: 100%; height: 100%; object-fit: cover; } /* ========================================================= Missions + futurs jeux ========================================================= */ .jxp-grid { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 32px; margin-top: 32px; } /* Même cadre à gradins que .wsb-frame (page Jeux, bloc WikiSpeed) : mêmes gradins (gorges), mêmes filets laiton. */ .jxp-encart { --s: 7px; position: relative; isolation: isolate; padding: 26px 28px 22px; display: flex; flex-direction: column; gap: 14px; } .jxp-encart::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--brass); opacity: .75; } .jxp-encart::after { content: ""; position: absolute; inset: 1px; z-index: -1; overflow: hidden; background: radial-gradient(ellipse 60% 90% at 20% 100%, color-mix(in srgb, var(--brass) 14%, transparent), transparent 70%), var(--card); box-shadow: inset 0 0 0 8px var(--card), inset 0 0 0 9px var(--brass-line); } .jxp-ehead { display: grid; justify-items: center; gap: 6px; } .jxp-ehead .jxp-fan { width: 40px; height: 20px; color: var(--brass); } .jxp-ehead h2 { margin: 0; font-size: 15px; font-weight: 400; letter-spacing: .32em; text-transform: uppercase; } .jxp-claim { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; background: color-mix(in srgb, var(--brass) 14%, transparent); border: 1px solid var(--brass-line); color: var(--brass-ink); font-size: 13px; letter-spacing: .04em; text-decoration: none; } .jxp-claim b { font-weight: 600; font-size: 15px; } .jxp-claim:hover { border-color: var(--brass); } .jxp-mlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .jxp-m { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; } .jxp-m:first-child { border-top: 1px solid var(--line); } .jxp-m-n { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: .04em; } .jxp-bar { grid-column: 1 / -1; height: 3px; background: var(--line); position: relative; } .jxp-bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--brass); } .jxp-m.is-ready .jxp-m-n { color: var(--brass-ink); letter-spacing: .16em; text-transform: uppercase; font-size: 10px; } .jxp-m.is-done { color: var(--muted); } .jxp-m.is-done .jxp-m-n { display: inline-flex; align-items: center; gap: 7px; letter-spacing: .16em; text-transform: uppercase; font-size: 10px; } .jxp-m.is-done .jxp-m-n::before { content: ""; width: 5px; height: 5px; transform: rotate(45deg); background: var(--brass-line); } .jxp-m.is-done .jxp-bar i { background: var(--brass-line); } .jxp-meta { margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); letter-spacing: .03em; } .jxp-meta b { color: var(--text); font-weight: 500; } .jxp-link { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; font-size: 11px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--brass-ink); text-decoration: none; border-top: 1px solid var(--brass-line); margin-top: 2px; } .jxp-link:hover { color: var(--text); } .jxp-link .jxp-dia { width: 5px; height: 5px; } /* Bloc WikiGéo (public/jeux.php, JeuxView::geoBanner) : même langage que .wsb (aperçu, nom, règle, gains, CTA), empilé (carte en haut, infos en bas) à côté de l'encart Missions sur la même ligne, et de la même hauteur (grille .jxp-grid, align-items par défaut = stretch). */ .gqj { display: flex; } .gqj-frame { --s: 7px; flex: 1; position: relative; isolation: isolate; display: flex; flex-direction: column; } .gqj-frame::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--brass); opacity: .75; } .gqj-bg { position: absolute; inset: 1px; z-index: -1; overflow: hidden; background: radial-gradient(ellipse 70% 100% at 90% 0%, color-mix(in srgb, var(--brass) 14%, transparent), transparent 70%), var(--card); box-shadow: inset 0 0 0 8px var(--card), inset 0 0 0 9px var(--brass-line); } .gqj-body { flex: 1; display: flex; flex-direction: column; gap: 28px; padding: 34px 36px; } /* En haut : la carte sur toute la largeur, les deux cartes posées dessus en bas à droite (tout reste dans le cadre de la carte) */ .gqj-preview { position: relative; display: flex; flex-direction: column; } .gqj-map { position: relative; flex: 1; min-height: 140px; overflow: hidden; background: radial-gradient(ellipse at 50% 35%, #15383f, #0b1e22 78%); border: 1px solid var(--brass-line); box-shadow: 0 12px 26px rgba(0, 0, 0, .4); } .gqj-cards { position: absolute; left: 10px; bottom: -30px; display: flex; } .gqj-card { position: relative; width: 96px; filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .45)); } .gqj-card .cards.collection { display: block; width: 100%; margin: 0; padding: 0; } .gqj-card--a { transform: rotate(-7deg); z-index: 2; } .gqj-card--b { transform: rotate(5deg) translate(54px, -20px); z-index: 1; } .gqj-body .gqj-map { flex: none; height: clamp(190px, 24vw, 290px); } .gqj-body .gqj-cards { left: auto; right: 38px; bottom: 14px; } .gqj-body .gqj-card--b { transform: rotate(5deg) translate(-26px, -10px); } /* En bas : texte à gauche, gains et bouton à droite, sur toute la largeur */ .gqj-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px 40px; } .gqj-text { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .gqj-side { display: flex; flex-direction: column; align-items: center; gap: 12px; } .gqj .gqj-side .wsb-gains { margin: 0 5px; min-width: 0; grid-template-columns: repeat(3, auto); } .gqj .gqj-side .wsb-gains > div { padding: 10px 18px 8px; } .gqj .gqj-side .wsb-gains dd { font-size: 20px; white-space: nowrap; } .gqj .gqj-side .wsb-act { margin-top: 0; justify-content: center; } .gqj-kicker { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 11px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--brass-ink); } .gqj-kicker::before { content: ""; width: 28px; height: 1px; background: var(--brass); } .gqj-name { margin: -2px 0 0; font-weight: 300; font-size: 34px; line-height: 1; letter-spacing: .1em; text-transform: uppercase; } .gqj-name b { font-weight: 600; color: var(--brass-ink); } .gqj-rule { margin: 0; max-width: 46ch; color: var(--muted); font-size: 14px; line-height: 1.55; text-wrap: pretty; } @container jxp (max-width: 980px) { .gqj-body { padding: 28px 28px 32px; } .gqj-main { grid-template-columns: minmax(0, 1fr); } .gqj-side { align-items: stretch; } } @container jxp (max-width: 520px) { .gqj-body { padding: 24px 20px 28px; } .gqj-name { font-size: 28px; } .gqj-body .gqj-card { width: 72px; } .gqj-body .gqj-cards { right: 22px; } .gqj-body .gqj-card--b { transform: rotate(5deg) translate(-18px, -8px); } .gqj .gqj-side .wsb-gains { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gqj .gqj-side .wsb-gains > div { padding: 10px 4px 8px; } .gqj .gqj-side .wsb-gains dd { font-size: 15px; flex-wrap: wrap; justify-content: center; white-space: normal; text-align: center; } .gqj .gqj-side .wsb-gains dt { font-size: 9px; letter-spacing: .12em; text-align: center; } } /* ========================================================= Fenêtre « Défier un ami » (habillage proposé, CSS seul) ========================================================= */ .jxp-modal-help { margin: 0 0 16px; text-align: center; font-size: 13px; color: var(--muted); } .jxp-search { width: 100%; min-height: 44px; padding: 0 14px; background: var(--surface); border: 1px solid var(--brass-line); color: var(--text); font: inherit; font-size: 14px; } .jxp-search::placeholder { color: var(--muted); } .jxp-friends { list-style: none; margin: 10px 0 0; padding: 0; max-height: 320px; overflow-y: auto; } .jxp-friends li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); } .jxp-friends li b { flex: 1; font-weight: 500; } .jxp-modal-empty { text-align: center; font-size: 14px; color: var(--muted); display: grid; justify-items: center; gap: 14px; padding: 10px 0; } /* ========================================================= Responsive (requêtes de conteneur : suit la largeur réelle de .jxp-page) ========================================================= */ @container jxp (max-width: 980px) { .wsb-body { padding: 44px 40px; } .wsb-runs { margin: 120px 40px 0; } .wsb-win { right: -16px; } .jxp-grid { grid-template-columns: minmax(0, 1fr); gap: 56px; } .jxp-encart { max-width: 560px; width: 100%; justify-self: center; } } @container jxp (max-width: 760px) { .wsb-body { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 0 28px 36px; min-height: 0; } .wsb-preview { order: -1; height: 270px; margin: 0 -12px; } .wsb-win { top: -40px; right: 0; width: 78%; height: 230px; transform: rotate(2.5deg); } .wsb-cards { left: 0; bottom: 6px; } .wsb-card { width: 108px; padding: 8px 8px 10px; } .wsb-card--b { transform: rotate(5deg) translate(-14px, -18px); } .wsb-burst { left: 60%; top: 22%; width: 900px; } .wsb-runs { grid-template-columns: minmax(0, 1fr); margin: 36px 0 0; } } @container jxp (max-width: 520px) { .jxp-page { padding: 32px 16px 128px; } /* barre fixe 64 px + bouton de notifications */ .jxp-head { margin-bottom: 52px; } .jxp-title { --ls: .26em; font-size: 30px; gap: 12px; } .jxp-title::before, .jxp-title::after { width: 56px; -webkit-mask-size: 50px 14px, 0 0; mask-size: 50px 14px, 0 0; } .jxp-lead { font-size: 15px; } .wsb-body { padding: 0 20px 28px; } .wsb-preview { height: 230px; margin: 0 -8px; } .wsb-win { top: -34px; right: -2px; width: 84%; height: 196px; } .wsb-win-bar { padding: 7px 8px; gap: 6px; } .wsb-win-time { font-size: 13px; padding: 1px 6px; } .wsb-win-players { gap: 6px; } .wsb-cards { bottom: 0; left: 2px; } .wsb-card { width: 92px; gap: 5px; } .wsb-name { font-size: 36px; letter-spacing: .12em; } .wsb-rule { font-size: 14px; } .wsb-gains { min-width: 0; width: calc(100% - 10px); } .wsb-gains > div { padding: 10px 8px 8px; } .wsb-gains dd { font-size: 24px; } .wsb-act { flex-direction: column; align-items: stretch; width: 100%; } .wsb-quota { max-width: none; flex-direction: row; align-items: center; gap: 12px; justify-content: center; } .wsb-cta { width: 100%; } .wsb-run { gap: 12px; } .jxp-encart { padding: 24px 20px 18px; } .jxp-grid { margin-top: 56px; } } /* moins d'animations (boot.js, docs/animations.md) */ :where(:root[data-motion="reduce"]) .wsb { scroll-behavior: auto; } /* ========================================================= Proposition D « Triptyque » (surcharges, à garder après ce qui précède) ========================================================= */ .jxp-v-d .wsb-body { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(0, .95fr); gap: 36px; padding: 34px 40px; min-height: 0; } .jxp-v-d .wsb-preview { order: 0; } .jxp-v-d .wsb-win { top: -70px; left: -20px; right: auto; width: 108%; height: 236px; transform: rotate(-3deg); transform-origin: 30% 30%; } .jxp-v-d .wsb-cards { left: 8px; top: 172px; bottom: auto; } .jxp-v-d .wsb-card { width: 132px; } .jxp-v-d .wsb-card--b { transform: rotate(5deg) translate(-18px, 2px); } .jxp-v-d .wsb-burst { left: 22%; top: 45%; width: 1200px; } .jxp-v-d .wsb-main { align-items: center; text-align: center; } .jxp-v-d .wsb-kicker::after { content: ""; width: 28px; height: 1px; background: var(--brass); } .jxp-v-d .wsb-name { font-size: 44px; } .jxp-v-d .wsb-main { gap: 12px; } .jxp-v-d .wsb-rule { font-size: 14px; line-height: 1.5; } .jxp-v-d .wsb-gains > div { padding: 8px 16px 7px; } .jxp-v-d .wsb-gains dd { font-size: 24px; } .jxp-v-d .wsb-gains { min-width: 0; width: calc(100% - 10px); } .jxp-v-d .wsb-act { flex-direction: column; gap: 14px; } .jxp-v-d .wsb-quota { align-items: center; max-width: 28ch; } .jxp-v-d .wsb-act { width: 100%; align-items: center; margin-top: 14px; } /* Boutons « Jouer », « Relever le défi », « Défier un ami » : plus grands et centrés dans leur colonne, pour être le premier élément vu du bloc */ .jxp-v-d .wsb-cta { align-self: center; justify-content: center; gap: 26px; min-width: min(100%, 320px); padding: 26px 48px; font-size: 16px; letter-spacing: .3em; } .jxp-v-d .wsb-cta .dm { width: 9px; height: 9px; } .jxp-v-d .wsb-runs { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 14px; margin: 0; padding-left: 28px; border-left: 1px solid var(--brass-line); position: relative; z-index: 1; } .jxp-v-d .wsb-run { min-height: 46px; padding: 4px 0; gap: 10px; } .jxp-v-d .wsb-run .btn-sm { min-height: 44px; padding: 0 12px; } .jxp-v-d .wsb-list { margin-top: 2px; } .jxp-v-d .wsb-run .jxp-av { width: 32px; height: 32px; font-size: 12px; } .jxp-v-d .wsb-run-txt span { font-size: 12px; } .jxp-v-d .wsb-runs-empty { align-self: center; flex-direction: column; gap: 10px; text-align: center; height: 100%; min-height: 120px; } .jxp-v-d .jxp-grid { margin-top: 32px; } @container jxp (max-width: 1100px) { .jxp-v-d .wsb-body { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); } .jxp-v-d .wsb-runs { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 32px 0 0; margin-top: 64px; border-left: 0; border-top: 1px solid var(--brass-line); } .jxp-v-d .wsb-win { left: -24px; } } @container jxp (max-width: 760px) { .jxp-v-d .wsb-body { grid-template-columns: minmax(0, 1fr); padding: 0 24px 32px; gap: 20px; } .jxp-v-d .wsb-preview { order: -1; } .jxp-v-d .wsb-win { top: -40px; left: auto; right: 0; width: 78%; height: 220px; transform: rotate(-2.5deg); } .jxp-v-d .wsb-cards { left: 0; top: auto; bottom: 6px; } .jxp-v-d .wsb-card { width: 104px; } .jxp-v-d .wsb-card--b { transform: rotate(5deg) translate(-14px, -18px); } .jxp-v-d .wsb-runs { grid-template-columns: minmax(0, 1fr); margin-top: 16px; } .jxp-v-d .wsb-burst { left: 50%; top: 150px; width: 900px; } .jxp-v-d .wsb-act { align-items: stretch; width: 100%; } .jxp-v-d .wsb-quota { max-width: none; } .jxp-v-d .jxp-grid { margin-top: 56px; } } @container jxp (max-width: 760px) { .jxp-v-d .wsb-runs { gap: 0; padding-top: 0; border-top: 0; } } @container jxp (max-width: 520px) { .jxp-v-d .wsb-body { padding: 0 20px 28px; } .jxp-v-d .wsb-win { top: -34px; width: 84%; height: 196px; right: -2px; } .jxp-v-d .wsb-card { width: 92px; } .jxp-v-d .wsb-name { font-size: 36px; } } /* Fenêtre « Défier un ami » (social.js) : titre centré, liste en filets, comme la page Jeux */ .jxp-modal-box h2 { text-align: center; font-size: 15px; font-weight: 400; letter-spacing: .3em; text-transform: uppercase; } .jxp-modal-box .jxp-av { width: 38px; height: 38px; } .jxp-modal-box .btn { flex: none; } .jxp-friends li.jxp-modal-none { justify-content: center; color: var(--muted); font-size: 13px; } @media (max-width: 560px) { .jxp-search { font-size: 16px; } } /* 16 px : pas de zoom iOS au toucher */ /* WikiSpeed pas encore jouable (moins de WikiSpeed::MIN_CARDS cartes) : bouton éteint, explication à côté */ .wsb-quota.is-locked { max-width: 30ch; } /* ---------- WikiGéo (public/wikigeo.php, assets/wikigeo.js) ---------- */ /* Toute la largeur de l'écran (comme .wrap.ws pour WikiSpeed), pas la largeur de lecture habituelle (--max) */ .wrap.gq { padding-top: clamp(28px, 5vw, 48px); width: calc(100% - 2 * clamp(16px, 4vw, 50px) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)); } .gq-head { text-align: center; max-width: 60ch; margin: 0 auto 32px; } .gq-kicker { margin: 0 0 8px; font-size: 12.5px; letter-spacing: .22em; text-transform: uppercase; } .gq-kicker a { color: var(--brass-ink); } .gq-head h1 { margin: 0 0 10px; font-weight: 300; font-size: clamp(32px, 5vw, 48px); } .gq-lead { margin: 0; color: var(--muted); } .gq-msg { min-height: 1.4em; margin: 0 0 16px; text-align: center; color: var(--muted); } .gq-msg.is-error { color: var(--err-ink); } .gq-phase[hidden] { display: none; } /* Pendant une partie (plein écran ou non, voir wikigeo.js show()) : plus de défilement possible sur la page, pied de page masqué, et la fenêtre de jeu (.gq-stage) occupe toute la largeur et toute la hauteur sous l'en-tête (ce dernier n'est jamais masqué « en dur » : reste en colonne flexible,
prend simplement tout ce qu'il reste). En plein écran, #gq devient lui-même cette fenêtre (voir #gq:fullscreen plus bas) : l'en-tête du site n'existe alors plus dans le document. */ body.gq-playing { height: 100vh; height: 100dvh; overflow: hidden; } body.gq-playing .foot { display: none; } body.gq-playing > main.gq { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; width: 100%; max-width: none; padding: 0; } body.gq-playing .gq-head { display: none; } body.gq-playing .gq-msg:empty { display: none; } body.gq-playing .gq-msg { margin: 10px clamp(16px, 4vw, 50px) 0; } body.gq-playing .gq-phase.gq-play { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } body.gq-playing .gq-stage { flex: 1 1 auto; min-height: 0; } #gq:fullscreen, #gq:-webkit-full-screen { display: flex; flex-direction: column; width: 100%; max-width: none; height: 100%; padding: clamp(14px, 3vw, 32px) clamp(16px, 4vw, 50px); background: var(--bg); overflow: hidden; } /* Bouton plein écran : un petit bouton discret sous « Valider »/« Tour suivant », visible seulement pendant la partie */ .gq-fullscreen { margin-top: 4px; gap: 8px; padding: 6px 12px; font-size: 12px; } .gq-fullscreen .ic { width: 14px; height: 14px; } /* Choix de l'échelle : une bannière par échelle, même langage que .wsb (page Jeux, WikiSpeed) */ .gq-scales { display: grid; gap: 28px; max-width: 1000px; margin: 0 auto; } .gqb-frame { --s: 7px; position: relative; isolation: isolate; } .gqb-frame::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--brass); opacity: .75; } .gqb-bg { position: absolute; inset: 1px; z-index: -1; overflow: hidden; background: radial-gradient(ellipse 60% 90% at 12% 100%, color-mix(in srgb, var(--brass) 14%, transparent), transparent 70%), var(--card); box-shadow: inset 0 0 0 8px var(--card), inset 0 0 0 9px var(--brass-line); } .gqb-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 36px; align-items: center; padding: 40px 44px; min-height: 210px; } .gqb-preview { position: relative; } .gqb-map { position: relative; overflow: hidden; aspect-ratio: 2.1 / 1; background: radial-gradient(ellipse at 50% 35%, #15383f, #0b1e22 78%); border: 1px solid var(--brass-line); box-shadow: 0 12px 26px rgba(0, 0, 0, .4); } .gqb-cards { position: absolute; left: 10px; bottom: -34px; display: flex; } .gqb-card { position: relative; width: 104px; filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .45)); } .gqb-card .cards.collection { display: block; width: 100%; margin: 0; padding: 0; } .gqb-card:not(.is-ready) .cards.collection { opacity: 0; } /* les cartes arrivent après la page (wikigeo.js) : elles apparaissent en fondu */ .gqb-card .cards.collection { transition: opacity .4s ease; } .gqb-card .card { width: 100%; } .gqb-card--a { transform: rotate(-7deg); z-index: 2; } .gqb-card--b { transform: rotate(5deg) translate(58px, -22px); z-index: 1; } .gqb-main { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .gqb-kicker { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 11px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--brass-ink); } .gqb-kicker::before { content: ""; width: 28px; height: 1px; background: var(--brass); } .gqb-name { margin: -2px 0 0; font-weight: 300; font-size: 38px; line-height: 1; letter-spacing: .1em; text-transform: uppercase; } .gqb-rule { margin: 0; max-width: 34ch; color: var(--muted); font-size: 14px; line-height: 1.5; } .gqb-act { margin-top: 8px; } @media (max-width: 900px) { .gqb-body { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 0 28px 36px; min-height: 0; } .gqb-preview { order: -1; margin: 44px -6px 34px; } .gqb-cards { left: 4px; } } @media (max-width: 480px) { .gqb-body { padding: 0 20px 28px; } .gqb-name { font-size: 30px; } .gqb-card { width: 88px; } .gqb-card--b { transform: rotate(5deg) translate(48px, -16px); } } /* Carte vectorielle (écran de jeu ET aperçus de l'écran de choix) : dessiné par wikigeo.js, cadré par viewBox */ .gq-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; user-select: none; } .gq-grat line { stroke: rgba(201, 164, 92, .11); stroke-width: var(--sw, .05); } .gq-svg .country { fill: #3d5246; } .gq-svg .country path { stroke: rgba(232, 211, 160, .62); stroke-width: var(--sw, .05); stroke-linejoin: round; } .gq-svg .country.is-on { fill: #48614f; } .gq-svg .country.is-dim { fill: #202728; } .gq-svg .country.is-dim path { stroke: rgba(255, 255, 255, .13); } /* Relief vectoriel : massifs (halo clair), lacs, rivières (seulement de près) */ .relief-ranges { fill: rgba(222, 204, 150, .2); stroke: none; } .relief-lakes { fill: #123139; stroke: rgba(232, 211, 160, .4); stroke-width: var(--sw, .05); } .relief-rivers { fill: none; stroke: #3b8593; stroke-width: calc(var(--sw, .05) * 1.2); stroke-opacity: .75; stroke-linejoin: round; } .gq-svg[data-lod="far"] .relief-rivers { display: none; } /* Choix de l'échelle : intitulé */ .gq-pick-title { margin: 0 0 22px; text-align: center; font-size: 17px; letter-spacing: .06em; color: var(--brass-ink); } /* Écran de jeu : bandeau (tour, chrono, score) toujours AU-DESSUS du cadre de la carte, jamais superposé ; la carte à deviner, les consignes et les boutons restent en surimpression sur la carte (.gq-layer, mêmes gorges qu'avant). */ .gq-stage { display: flex; flex-direction: column; gap: 14px; width: 100%; margin: 0 auto; min-height: 0; } /* Bandeau : tour (pastilles), chronomètre, score, jauge de temps */ .gq-bar { position: relative; z-index: 3; flex: none; margin: 0 40px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 9px 20px 14px; background: rgba(9, 18, 20, .88); border: 1px solid var(--brass-line); } .gq-round { justify-self: start; display: grid; gap: 8px; } .gq-round-label { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); } .gq-round-label b { font-size: 15px; letter-spacing: 0; color: var(--text); } .gq-pips { display: flex; gap: 9px; } .gq-pips i { width: 10px; height: 10px; rotate: 45deg; border: 1px solid var(--brass); background: transparent; } .gq-pips i.is-done { background: var(--brass); } .gq-pips i.is-now { background: color-mix(in srgb, var(--brass) 45%, transparent); box-shadow: 0 0 9px var(--brass); } .gq-clock { justify-self: center; } .gq-timer { font-size: 28px; line-height: 1; font-weight: 300; letter-spacing: .06em; font-variant-numeric: tabular-nums; } .gq-timer.is-low { color: var(--err-ink); } .gq-livescore { justify-self: end; display: grid; justify-items: end; gap: 4px; } .gq-livescore span { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); } .gq-livescore b { font-size: 24px; font-weight: 400; line-height: 1; color: var(--brass-ink); font-variant-numeric: tabular-nums; } .gq-bar-track { position: absolute; left: 6px; right: 6px; bottom: 6px; height: 3px; background: var(--line); } .gq-bar-track i { display: block; height: 100%; width: 100%; background: var(--brass); transition: width .3s linear; } .gq-bar-track i.is-low { background: var(--err-ink); } /* .gq-layer : la carte (.gq-mapbox) et, par-dessus, la carte à situer + consignes / résultat du tour / boutons (.gq-side) ; occupe tout l'espace restant sous le bandeau (.gq-bar), qui lui n'y est plus superposé. */ .gq-layer { position: relative; flex: 1 1 auto; min-height: 0; margin: 0 40px; display: grid; grid-template-areas: "stack"; } .gq-mapbox, .gq-side { grid-area: stack; } .gq-side { position: relative; z-index: 3; align-self: end; justify-self: stretch; margin: 0 0 20px; pointer-events: none; display: grid; grid-template-columns: auto auto; justify-content: space-between; align-items: end; gap: 14px; } .gq-card { display: flex; justify-content: center; width: min(290px, 38vw); pointer-events: auto; } /* grande, pour lire la description */ .gq-card .cards.collection { display: block; width: 100%; padding: 0; margin: 0; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .5)); } .gq-info { display: grid; justify-items: end; gap: 12px; pointer-events: auto; } .gq-hint { margin: 0; padding: 6px 12px; background: rgba(9, 18, 20, .78); color: var(--muted); font-size: 13.5px; line-height: 1.45; } .gq-round-result { margin: 0; padding: 10px 14px; background: rgba(9, 18, 20, .85); border: 1px solid var(--brass-line); text-align: center; } .gq-round-result[hidden] { display: none; } .gq-distance { margin: 0; font-size: 14px; color: var(--muted); } .gq-round-score { margin: 2px 0 0; font-size: 22px; font-weight: 400; color: var(--brass-ink); } .gq-actions { display: flex; justify-content: center; gap: 14px; margin: 0; } .gq-end-actions { margin-top: 32px; } /* Carte : cadre à gradins (filet laiton, gorge sombre, filet, gorge, passe-partout) + équerres aux pieces */ .gq-mapbox { align-self: stretch; justify-self: stretch; display: flex; align-items: center; justify-content: center; height: 100%; min-height: 0; padding: 14px; } .gq-frame { position: relative; padding: 12px; margin: 0 auto; width: 100%; max-width: 100%; background: linear-gradient(145deg, #1a2d31, #0c1719); border: 1px solid var(--brass); box-shadow: 0 0 0 4px #091214, 0 0 0 5px var(--brass-line), 0 0 0 11px #111d20, 0 0 0 12px var(--brass), 0 26px 46px rgba(0, 0, 0, .55); } .gq-frame::before { content: ""; position: absolute; inset: -13px; pointer-events: none; z-index: 2; --b: var(--brass); background: linear-gradient(var(--b), var(--b)) 0 0 / 26px 3px no-repeat, linear-gradient(var(--b), var(--b)) 0 0 / 3px 26px no-repeat, linear-gradient(var(--b), var(--b)) 100% 0 / 26px 3px no-repeat, linear-gradient(var(--b), var(--b)) 100% 0 / 3px 26px no-repeat, linear-gradient(var(--b), var(--b)) 0 100% / 26px 3px no-repeat, linear-gradient(var(--b), var(--b)) 0 100% / 3px 26px no-repeat, linear-gradient(var(--b), var(--b)) 100% 100% / 26px 3px no-repeat, linear-gradient(var(--b), var(--b)) 100% 100% / 3px 26px no-repeat; } .gq-map-wrap { position: relative; overflow: hidden; width: 100%; aspect-ratio: var(--r, 1.6); background: radial-gradient(ellipse at 50% 35%, #15383f, #0b1e22 78%); border: 1px solid var(--brass-line); box-shadow: 0 0 0 3px #091214, 0 0 0 4px var(--brass-line), inset 0 0 46px rgba(0, 0, 0, .6); cursor: var(--cur-hand); touch-action: none; } .gq-map-wrap.is-dragging { cursor: grabbing; } .gq-pins { position: absolute; inset: 0; pointer-events: none; } .gq-link { position: absolute; top: 0; left: 0; height: 1px; transform-origin: 0 0; border-top: 1px dashed rgba(236, 231, 219, .7); } .gq-pin { position: absolute; width: 14px; height: 14px; translate: -50% -50%; border-radius: 50%; box-shadow: 0 0 0 2px rgba(6, 12, 14, .85), 0 1px 5px rgba(0, 0, 0, .6); } .gq-pin.is-guess { background: var(--r3); box-shadow: 0 0 0 2px rgba(6, 12, 14, .85), 0 0 0 5px color-mix(in srgb, var(--r3) 35%, transparent), 0 1px 5px rgba(0, 0, 0, .6); } .gq-pin.is-truth { width: 16px; height: 16px; background: var(--r6); box-shadow: 0 0 0 2px rgba(6, 12, 14, .85), 0 0 0 5px color-mix(in srgb, var(--r6) 35%, transparent), 0 1px 5px rgba(0, 0, 0, .6); } .gq-pin.is-guess.is-final { opacity: .85; } /* Boutons de zoom (sur le bord droit de la carte) */ .gq-terr { position: absolute; left: 12px; top: 12px; z-index: 2; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 76px); padding: 5px 8px 5px 10px; background: rgba(9, 18, 20, .85); border: 1px solid var(--brass-line); color: var(--brass-ink); font-size: 12.5px; letter-spacing: .04em; } .gq-terr[hidden] { display: none; } .gq-terr select { min-width: 0; max-width: 100%; padding: 4px 6px; font: inherit; color: var(--text); background: var(--card); border: 1px solid var(--line); cursor: var(--cur-hand); } .gq-svg .dept { fill: #48614f; stroke: rgba(232, 211, 160, .5); stroke-width: calc(var(--sw, .05) * .7); stroke-linejoin: round; } /* même vert que .country.is-on : les départements remplacent le tracé de la France (voir addDepts dans wikigeo.js) */ .gq-zoom { position: absolute; right: 12px; top: 50%; translate: 0 -50%; z-index: 2; display: grid; gap: 1px; background: var(--brass-line); border: 1px solid var(--brass-line); } .gq-zoom button { width: 36px; height: 36px; padding: 0; font: inherit; font-size: 20px; line-height: 1; color: var(--brass-ink); background: rgba(9, 18, 20, .85); border: 0; cursor: var(--cur-hand); } .gq-zoom button:hover { background: rgba(28, 44, 48, .95); color: var(--text); } /* Thème clair : ces éléments gardent leur fond sombre (posé en dur, comme la carte) ; ils prennent donc les couleurs de texte du thème sombre. Aucune carte n'est à l'intérieur. */ :root[data-theme="light"] :is(.gq-bar, .gq-terr, .gq-zoom) { --text: #ece7db; --muted: #9a9686; --line: rgba(236, 231, 219, .12); --brass-ink: #d3b06a; --err-ink: #d5544f; --card: #111d19; color: var(--text); } @media (min-width: 861px) { :root[data-theme="light"] :is(.gq-hint, .gq-round-result) { --text: #ece7db; --muted: #9a9686; --brass-ink: #d3b06a; color: var(--text); } } /* sous 861 px, ces deux encarts quittent la carte et prennent le fond de la page */ @media (max-width: 860px) { .gq-stage { gap: 18px; } .gq-bar { margin: 0; } .gq-layer { margin: 0; display: flex; flex-direction: column; gap: 18px; grid-template-areas: none; } .gq-side { position: static; align-self: auto; margin: 0; pointer-events: auto; background: var(--band); grid-template-columns: auto minmax(0, 1fr); justify-content: stretch; align-items: center; gap: 18px; } .gq-mapbox { flex: 1 1 auto; } .gq-card { width: min(250px, 50vw); } .gq-info { justify-items: start; } .gq-hint, .gq-round-result { background: transparent; } .gq-round-result { text-align: left; background: var(--band); } .gq-actions { justify-content: flex-start; } } @media (max-width: 640px) { .gq-frame { width: 100%; padding: 8px; } .gq-bar { padding: 10px 14px 16px; gap: 8px; } .gq-timer { font-size: 26px; } .gq-mapbox { padding: 10px; } .gq-zoom button { width: 32px; height: 32px; } .gq-end-body { padding: 36px 20px 28px; } .gq-recap-item { padding: 10px 12px; gap: 12px; } .gq-recap-card { width: 68px; } } /* Résultat final : score, récapitulatif des tours et bouton de retour, dans un même encart cadre à gradins (mêmes gradins et filets que .wsb-frame) avec un effet rayon/éventail en fond (mêmes dégradés que .wsb-burst). */ .gq-end-frame { --s: 7px; position: relative; isolation: isolate; max-width: 720px; margin: 0 auto; } .gq-end-frame::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--brass); opacity: .75; } .gq-end-bg { position: absolute; inset: 1px; z-index: -1; overflow: hidden; background: radial-gradient(ellipse 70% 90% at 50% 100%, color-mix(in srgb, var(--brass) 14%, transparent), transparent 70%), var(--card); box-shadow: inset 0 0 0 8px var(--card), inset 0 0 0 9px var(--brass-line); } .gq-end-burst { position: absolute; left: 50%; top: 26%; width: 900px; aspect-ratio: 1; translate: -50% -50%; background: radial-gradient(circle, transparent 0 70px, var(--brass) 70px 71px, transparent 71px 78px, var(--brass) 78px 79px, transparent 79px), repeating-conic-gradient(from -.3deg, var(--brass) 0 .6deg, transparent .6deg 7deg, var(--brass) 7deg 8.6deg, transparent 8.6deg 15deg); -webkit-mask-image: radial-gradient(circle, transparent 0 44px, #000 46px, rgba(0, 0, 0, .55) 30%, transparent 58%); mask-image: radial-gradient(circle, transparent 0 44px, #000 46px, rgba(0, 0, 0, .55) 30%, transparent 58%); opacity: .2; } .gq-end-body { position: relative; padding: 48px 40px 40px; } .gq-final { max-width: 560px; margin: 0 auto; text-align: center; display: grid; gap: 8px; } .gq-final-score { margin: 0; font-size: 28px; font-weight: 300; } /* Récapitulatif des gains (pièces, paquets argentés, cartes gagnées) : encart art déco à double filet et angles à losanges */ .gq-gains { position: relative; margin: 28px auto 0; padding: 26px 22px 20px; text-align: center; background: linear-gradient(160deg, color-mix(in srgb, var(--brass) 10%, var(--card)), var(--card)); border: 1px solid var(--brass-line); box-shadow: 0 0 0 5px var(--card), 0 0 0 6px var(--brass-line); } .gq-gains::before, .gq-gains::after { content: ""; position: absolute; left: 50%; width: 9px; height: 9px; margin-left: -5px; transform: rotate(45deg); background: var(--brass); } .gq-gains::before { top: -5px; } .gq-gains::after { bottom: -5px; } .gq-gains-title { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 0 16px; font-size: 12px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--brass-ink); } .gq-gains-title::before, .gq-gains-title::after { content: ""; width: 34px; height: 1px; background: var(--brass); } .gq-gains-rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .gq-gains-rows:has(> .gq-gain:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* quiz d'Halloween : une 4e tablette « Paquets Halloween » */ @media (max-width: 560px) { .gq-gains-rows:has(> .gq-gain:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; } .gq-gains-rows:has(> .gq-gain:nth-child(4)) > .gq-gain:nth-child(3) { border-left: 0; } } .gq-gain { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 10px; } .gq-gain + .gq-gain { border-left: 1px solid var(--brass-line); } .gq-gain-label { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); } .gq-gain-value { font-size: 32px; font-weight: 300; line-height: 1.1; letter-spacing: .04em; color: var(--brass-ink); } .gq-gain-note { font-size: 12px; line-height: 1.35; color: var(--muted); text-wrap: balance; } .gq-gain.is-none .gq-gain-value { color: var(--muted); opacity: .6; } .gq-gains-cards { list-style: none; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--brass-line); display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 22px; } .gq-gains-card { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 96px; } .gq-gains-card .gq-recap-card { width: 96px; } .gq-gains-card-title { max-width: 100%; font-size: 12px; color: var(--text); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .gq-gains-card-tag { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .gq-gains-card-tag.is-new { color: var(--brass-ink); font-weight: 600; } .gq-gains-foot { margin: 14px 0 0; font-size: 12px; color: var(--muted); } @media (max-width: 640px) { .gq-gains { padding: 24px 12px 16px; } .gq-gain { padding: 6px 4px; } .gq-gain-value { font-size: 24px; } .gq-gain-label { font-size: 9px; letter-spacing: .1em; text-align: center; } .gq-gain-note { font-size: 11px; } } /* Récapitulatif des tours : la carte de chaque tour, en grand (pas juste sa vignette), dans un cadre à gradins sans filet (mêmes gorges que .gq-frame, sans le filet laiton) : juste le numéro du tour, la carte, la distance et le score. */ .gq-recap { list-style: none; margin: 28px auto 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; text-align: left; } .gq-recap-item { --s: 5px; position: relative; isolation: isolate; display: flex; align-items: center; gap: 16px; padding: 12px 18px; background: linear-gradient(145deg, #16211f, #0d1513); box-shadow: inset 0 0 0 3px #070c0b, inset 0 0 0 7px #16211f, inset 0 0 0 8px #070c0b; } .gq-recap-n { flex: none; width: 28px; font-size: 22px; font-weight: 700; color: var(--brass-ink); text-align: center; } .gq-recap-card { flex: none; width: 84px; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .45)); } .gq-recap-card.is-link { cursor: var(--cur-hand); transition: translate .25s var(--ease); } /* un clic ouvre l'article de Wikipédia dans un nouvel onglet (assets/wikigeo.js) */ .gq-recap-card.is-link .card, .gq-recap-card.is-link .card-in { cursor: var(--cur-hand); } @media (hover: hover) { .gq-recap-card.is-link:hover { translate: 0 -4px; } } .gq-recap-card .cards.collection { display: block; width: 100%; margin: 0; padding: 0; } .gq-recap-title { flex: 1; min-width: 0; font-size: 15px; color: var(--text); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .gq-recap-stats { flex: none; text-align: right; font-size: 13px; color: var(--muted); } .gq-recap-stats b { display: block; font-size: 18px; font-weight: 400; color: var(--brass-ink); } /* Thème clair : la ligne du récapitulatif garde son fond sombre ; seuls ses textes passent en clair (la carte qu'elle contient garde les couleurs du thème) */ :root[data-theme="light"] .gq-recap-n, :root[data-theme="light"] .gq-recap-stats b { color: #d3b06a; } :root[data-theme="light"] .gq-recap-title { color: #ece7db; } :root[data-theme="light"] .gq-recap-stats { color: #9a9686; } /* ---------- Atelier (public/atelier.php, assets/atelier.js) : transformer une carte en Extended Art / Full Art ---------- */ /* Tarifs : encart repliable, tableau avec un losange coloré par rareté (classes .r1…r7, jeton --rc) devant chaque nom. */ .atl-prices { max-width: 720px; margin: 0 auto 40px; border: 1px solid var(--brass-line); background: var(--card); } .atl-prices summary { padding: 14px 20px; font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--brass-ink); cursor: var(--cur-hand); } .atl-prices summary::marker { color: var(--brass); } .atl-prices-in { padding: 0 20px 20px; overflow-x: auto; } .atl-prices table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .atl-prices th, .atl-prices td { padding: 8px 10px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; } .atl-prices thead th { color: var(--muted); font-weight: 500; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; border-bottom-color: var(--brass-line); } .atl-prices th[scope="row"] { text-align: left; display: flex; align-items: center; gap: 10px; font-weight: 400; } .atl-dia { flex: none; width: 8px; height: 8px; transform: rotate(45deg); background: var(--rc, var(--brass)); } .hw-atl-prices { max-width: none; margin: 10px 0 0; } .atl-msg { min-height: 1.4em; margin: 14px 0 0; text-align: center; color: var(--muted); } .atl-msg.is-error { color: var(--err-ink); } .atl-msg:empty { display: none; } /* Texte d'introduction des encarts de l'Atelier */ .atl-edesc { margin: 0; max-width: 46ch; color: var(--muted); font-size: 14px; line-height: 1.6; text-wrap: pretty; } /* ========================================================= Accueil visiteurs : « L'Affiche » (proposition C, Claude Design, public/index.php). Réutilise .hero, .eyebrow, .rule, .lead, .cta, .btn, .showcase/.sc-row/.sc-media/.sc-text, .wsb-card et .gqj-… (styles plus haut) : les classes ci-dessous sont propres à cette mise en scène (logotype, trio de cartes, jauge horizontale, numéros d'actes). ========================================================= */ .poster { padding-bottom: clamp(56px, 8vw, 92px); } .wordmark { margin: 0 0 14px; font-size: clamp(40px, 10vw, 118px); line-height: .95; letter-spacing: .14em; text-transform: uppercase; } .wordmark b { font-weight: 500; } .wordmark span { font-weight: 200; color: var(--brass-ink); } /* Trio de cartes flottant : une carte centrale (visé : Ultime), deux cartes inclinées de part et d'autre, qui flottent doucement en décalé */ .hero-trio { position: relative; height: clamp(210px, 30vw, 310px); max-width: 760px; margin: 10px auto 6px; } .hero-card { position: absolute; top: 0; left: 50%; } .hero-card .cards.collection { display: block; margin: 0; padding: 0; } .hero-card--c { z-index: 2; width: clamp(148px, 19vw, 215px); transform: translateX(-50%); } .hero-card--l { top: clamp(16px, 3vw, 32px); width: clamp(108px, 14vw, 160px); transform: translateX(-165%) rotate(-9deg); opacity: .92; } .hero-card--r { top: clamp(16px, 3vw, 32px); width: clamp(108px, 14vw, 160px); transform: translateX(65%) rotate(9deg); opacity: .92; } /* Rareté, style (Extended/Full Art) et vues : visibles même sur ces petites cartes, malgré le repli automatique de .card-body (style.css, @container max-width: 160px) prévu pour la collection, pas pour cette mise en scène. */ .hero-card .card-body .vw, .hero-card .card-body .tag-style { display: inline-flex; } .hero-float { animation: hero-bob 6s ease-in-out infinite; } .hero-card--c .hero-float { animation-delay: .7s; } .hero-card--r .hero-float { animation-delay: 1.5s; } @keyframes hero-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } } /* moins d'animations (boot.js, docs/animations.md) */ :where(:root[data-motion="reduce"]) .hero-float { animation: none; } @media (max-width: 620px) { .hero-card--l { transform: translateX(-130%) rotate(-9deg) scale(.88); } .hero-card--r { transform: translateX(30%) rotate(9deg) scale(.88); } } /* Bande des raretés : jauge horizontale, un losange qui grossit avec la rareté (remplace l'ancienne liste des raretés) ; les tailles sont fixes (pas de style="" en ligne, la CSP du site l'interdit). */ .gauge { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; text-align: center; position: relative; } .gauge::before { content: ""; position: absolute; left: 7%; right: 7%; top: 22px; height: 1px; background: var(--brass-line); } .gauge li { position: relative; display: grid; justify-items: center; gap: 8px; } .gauge-gem { height: 44px; display: grid; place-items: center; } .gauge-gem i { display: block; rotate: 45deg; background: var(--rc); box-shadow: 0 0 0 5px var(--bg), 0 0 0 6px var(--brass-line); } .r1 .gauge-gem i { width: 12.4px; height: 12.4px; } .r2 .gauge-gem i { width: 14.8px; height: 14.8px; } .r3 .gauge-gem i { width: 17.2px; height: 17.2px; } .r4 .gauge-gem i { width: 19.6px; height: 19.6px; } .r5 .gauge-gem i { width: 22px; height: 22px; } .r6 .gauge-gem i { width: 24.4px; height: 24.4px; } .r7 .gauge-gem i { width: 26.8px; height: 26.8px; background: conic-gradient(from 20deg, #e58fb0, #e9c26f, #7fd6a8, #7fb6ec, #b791ef, #e58fb0); } .gauge-name { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .gauge-share { font-size: clamp(16px, 2.2vw, 26px); font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; } .gauge-odds { font-size: 11.5px; color: var(--muted); } @media (max-width: 760px) { .gauge { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 10px; } .gauge::before { display: none; } } @media (max-width: 420px) { .gauge { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* « Le numéro principal » : section du paquet d'essai, détachée du bloc .hero (le vrai public/assets/pack3d.js) */ .pack-demo { padding: clamp(66px, 9vw, 108px) 0 16px; text-align: center; } .pack-demo h2 { margin: 0 auto 28px; max-width: 20ch; font-size: clamp(26px, 3.6vw, 42px); font-weight: 300; letter-spacing: .04em; text-transform: none; } /* .cta centre ses enfants (align-items: center) : sans stretch, la scène du paquet (et les cartes tirées, mêmes classes que la page « Paquets ») se réduirait à sa taille de contenu minimale au lieu de profiter de la largeur de la page, comme page « Paquets » (main.opener, pas en flex). */ .pack-demo .cta { align-items: stretch; } /* Au programme : le titre de la section (.hp-title) puis les bandeaux ; chaque acte garde son numéro romain (.sc-num) */ .showcase-head { text-align: center; margin-bottom: 8px; } .sc-row { border-top: 3px double var(--brass-line); padding-top: 56px; } .sc-row--first { border-top: 0; padding-top: 0; } .sc-num { display: inline-block; margin-right: 12px; font-size: 1.5em; font-weight: 200; color: var(--brass); vertical-align: -.06em; } /* Acte I : les vrais paquets 3D (assets/pack3d.js, .pack3d-static), au repos et sans bouton — le normal devant, le doré et le diamanté décalés de part et d'autre, comme une pile de paquets posée sur la table. Le vrai paquet interactif est juste en dessous, « Le numéro principal ». */ .packs3d-trio { position: relative; height: clamp(210px, 26vw, 270px); width: 100%; margin: 0 auto; } /* --pk doit rester un nombre pur (sans unité) : c'est le multiplicateur de calc(var(--pk,1) * 1px) dans pack3d.js/.pack-stage. clamp() ne peut pas mélanger un nombre et une longueur (8vw) : la taille suit donc un simple point de rupture, pas une valeur fluide. */ .packs3d-trio .pack-stage { position: absolute; left: 50%; top: 50%; margin: 0; } /* Acte IV : WikiGéo, le même aperçu de carte que la bannière de Jeux (.gqj-…, assets/jeux-geo.js), purement décoratif ici, avec deux cartes */ .sc-geo-preview { width: min(100%, 380px); margin: 0 auto; } .sc-geo-preview .gqj-map { height: clamp(160px, 20vw, 220px); flex: none; min-height: 0; } .sc-geo-preview .gqj-cards { bottom: -24px; } @media (max-width: 760px) { .sc-row { padding-top: 44px; } } /* « Le rideau se lève » : appel final, mêmes composants que le haut de page (.eyebrow, .btn, .hint) */ .curtain { padding: clamp(70px, 9vw, 112px) 0 clamp(90px, 10vw, 128px); text-align: center; } .curtain-title { margin: 0 auto 30px; max-width: 26ch; font-size: clamp(28px, 4.4vw, 48px); font-weight: 300; letter-spacing: .02em; text-transform: none; } .curtain .hint { margin-top: 20px; } .curtain .hint a { color: var(--brass-ink); } /* ================= Rien de tout cela ne se sélectionne comme du texte (double-clic, appui long, glissement) ================= */ /* Menus (en-tête et barre du bas, burger, compte, cloche, portefeuille), cartes et leurs éléments (titre, étiquettes, vues, badge d'exemplaires, y compris la grande copie de la fenêtre de détail) : ce sont des commandes et des objets de jeu, pas du texte à copier. Les champs de saisie, eux, restent éditables (une saisie n'est jamais « auto » à l'intérieur d'un parent en « none »). Au-delà : barres d'outils de la collection (chiffres, pagination, sélection multiple), réserve de paquets, carrousel, séries et missions de la page Paquets, interfaces des jeux (WikiGéo, WikiSpeed), Atelier et Jeux. Le texte des fenêtres de détail (description d'une carte, règles, mentions légales, actualités…) reste sélectionnable. */ .top, .bottom-nav, .notif-float, .acct-dropdown, .brand, .card, .modal-card, .cards .qty, .card-in, .coll-stats, .coll-toggle, .coll-filters, .coll-tags, .sel-bar, .pager, .pk-pager, .op-encart, .pack-carousel, .pack-stage, .pack-reserve, .deck-bar, .pack-final, .gq-bar, .gq-map-wrap, .gq-pips, .gq-livescore, .gqb, .gqj-preview, .ws-head, .ws-bar, .ws-duel, .ws-phase, .jxp-head, .jxp-encart, .modal-close, .modal-btns, .help-tabs, .nt-del, .nt-time, .wallet, .wc-piece, .dm, .fan, .logo { -webkit-user-select: none; user-select: none; } /* Safari et d'anciens Chrome n'éditent pas un champ posé dans un parent en « none » : les champs de saisie le disent eux-mêmes */ input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; } /* Les images ne se « saisissent » pas non plus : pas de glisser-déposer d'une illustration de carte ou d'un logo */ .card img, .brand img, .acct-pill img, .modal-card img { -webkit-user-drag: none; user-drag: none; } /* ================= Carrousel des zones de paquets (page Paquets : normal · argenté · doré · diamanté ; assets/pack.js) ================= */ /* Le paquet 3D est unique : il glisse sur le côté en changeant de livrée. Deux flèches (celles de la pile de cartes sur mobile : un losange), chacune avec un badge qui annonce les paquets disponibles dans les zones de son côté ; en haut, le nom de la zone et un losange par zone (allumé s'il y a des paquets, coloré comme la livrée). */ .pack-carousel { --pk-nav: 44px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "head head head" "prev stage next"; align-items: center; justify-items: center; width: 100%; } .pack-carousel > .pack-stage { grid-area: stage; } .pk-head { grid-area: head; display: grid; justify-items: center; gap: 4px; } .pk-name { margin: 0; font-size: 11px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--brass-ink); } .pk-dots { display: flex; align-items: center; justify-content: center; } .pk-dot { appearance: none; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; background: none; cursor: var(--cur-hand); -webkit-tap-highlight-color: transparent; } .pk-dot i { --pk-tint: var(--brass); display: block; width: 9px; height: 9px; rotate: 45deg; border: 1px solid var(--pk-tint); transition: background .3s ease, scale .3s ease, box-shadow .3s ease; } .pk-dot[data-zone="silver"] i { --pk-tint: #aeb6be; } .pk-dot[data-zone="golden"] i { --pk-tint: #e2b84f; } .pk-dot[data-zone="diamond"] i { --pk-tint: #7fc4ec; } .pk-dot[data-zone="thematic"] i { --pk-tint: #b9a6ec; } .pk-dot.is-cur i { background: var(--pk-tint); scale: 1.5; box-shadow: 0 0 0 2px color-mix(in srgb, var(--pk-tint) 25%, transparent); } .pk-dot:hover:not(:disabled):not(.is-cur) i { background: color-mix(in srgb, var(--pk-tint) 80%, transparent); } .pk-dot:focus-visible { outline: 2px solid var(--brass); outline-offset: -4px; } .pk-dot:disabled { cursor: var(--cur-hand); } /* pendant le changement de zone aussi : le curseur reste la main */ .pk-navwrap { position: relative; display: block; width: var(--pk-nav); height: var(--pk-nav); } .pk-navwrap--prev { grid-area: prev; justify-self: end; margin-right: clamp(4px, 3vw, 40px); } .pk-navwrap--next { grid-area: next; justify-self: start; margin-left: clamp(4px, 3vw, 40px); } /* Flèches « carte précédente / suivante » de la fiche d'une carte (assets/card-modal.js) : les boutons .pk-nav du carrousel de paquets, posés de part et d'autre de la fenêtre. Elles sont rangées dans , juste après la fenêtre (même z-index : l'ordre dans la page les met au-dessus d'elle, et sous les fenêtres ouvertes ensuite). */ .cm-navwrap { --pk-nav: 48px; position: fixed; z-index: 100; top: 50%; translate: 0 -50%; width: var(--pk-nav); height: var(--pk-nav); } .cm-navwrap[hidden] { display: none; } .cm-navwrap--prev { left: clamp(14px, 3vw, 48px); } .cm-navwrap--next { right: clamp(14px, 3vw, 48px); } /* Fenêtre trop étroite pour des flèches de part et d'autre : elles flottent en bas de l'écran, et la fenêtre gagne une marge basse pour que tout son contenu puisse défiler au-dessus d'elles */ @media (max-width: 1240px) { .cm-navwrap { --pk-nav: 40px; top: auto; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); translate: none; } .cm-navwrap--prev { left: 18px; } .cm-navwrap--next { right: 18px; } .modal.has-nav { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); } } .pk-nav { appearance: none; position: absolute; inset: 0; display: grid; place-items: center; padding: 0; border: 0; rotate: 45deg; background: color-mix(in srgb, var(--surface) 90%, transparent); box-shadow: inset 0 0 0 1.84px var(--brass-line), 0 6px 16px rgba(0, 0, 0, .4); color: var(--brass-ink); cursor: var(--cur-hand); -webkit-tap-highlight-color: transparent; transition: box-shadow .3s ease, color .3s ease, opacity .3s ease, background .3s ease; } .pk-nav svg { width: calc(var(--pk-nav) * .45); height: calc(var(--pk-nav) * .45); rotate: -45deg; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .pk-nav.prev svg { translate: -1px 1px; } .pk-nav.next svg { translate: 1px -1px; } .pk-nav:not(:disabled):hover { box-shadow: inset 0 0 0 1.84px var(--brass), 0 6px 16px rgba(0, 0, 0, .4); color: var(--text); } .pk-nav:not(:disabled):active { background: color-mix(in srgb, var(--brass) 26%, var(--surface)); color: var(--text); } .pk-nav:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; } .pk-nav:disabled { opacity: .25; cursor: var(--cur-default); } /* Le badge est le FRÈRE du losange (qui pivote de 45°) : posé sur son arête haute droite, sans tourner avec lui */ .pk-badge { position: absolute; top: -5px; right: -5px; z-index: 1; min-width: 19px; height: 19px; padding: 0 5px; box-sizing: border-box; display: grid; place-items: center; border-radius: 10px; background: var(--brass-ink); color: var(--on-brass); box-shadow: 0 0 0 2px var(--bg); font-size: 11px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; pointer-events: none; animation: pk-badge-in .35s var(--ease, ease) backwards; } .pk-badge[hidden] { display: none; } @keyframes pk-badge-in { from { scale: .4; opacity: 0; } } /* Le paquet glisse d'une zone à l'autre : sortie du côté d'où l'on part (il s'efface avec ses faces, jamais avec leur parent : voir « Règle d'or » plus haut), puis entrée de l'autre côté */ .pack-carousel > .pack-stage { transition: transform .42s cubic-bezier(.2, .8, .2, 1); } .pack-carousel[data-slide^="out"] > .pack-stage { transition: transform .24s cubic-bezier(.5, 0, 1, .6); } .pack-carousel[data-slide^="out"] .p3-leaf { opacity: 0; transition: opacity .2s ease; } .pack-carousel[data-slide="out-next"] > .pack-stage { transform: translateX(calc(var(--p3-u) * -110)); } .pack-carousel[data-slide="out-prev"] > .pack-stage { transform: translateX(calc(var(--p3-u) * 110)); } .pack-carousel[data-slide^="in"] > .pack-stage { transition: none; } .pack-carousel[data-slide="in-next"] > .pack-stage { transform: translateX(calc(var(--p3-u) * 110)); } .pack-carousel[data-slide="in-prev"] > .pack-stage { transform: translateX(calc(var(--p3-u) * -110)); } /* moins d'animations (boot.js, docs/animations.md) */ :where(:root[data-motion="reduce"]) .pack-carousel > .pack-stage, :where(:root[data-motion="reduce"]) .pk-badge, :where(:root[data-motion="reduce"]) .pk-nav, :where(:root[data-motion="reduce"]) .pk-dot i { transition: none; animation: none; } @media (max-width: 760px) { .pack-carousel { --pk-nav: 40px; } .pack-stage { margin-top: 12px; } /* le nom de la zone et ses losanges tiennent dans la place de la marge du haut */ .pk-navwrap--prev, .pk-navwrap--next { margin-inline: 2px; } } @media (max-width: 400px) { .pack-carousel { --pk-nav: 34px; } } /* Encart « Réserve » : le stock de 8 paquets (une seule rangée de losanges, sur ordinateur comme sur téléphone) et le bloc des autres zones */ .op-encart .ps-gems { flex-wrap: nowrap; } @container (max-width: 330px) { .op-encart .ps-gems { gap: 8px; } } .op-encart .pack-stock[hidden], .op-encart .refill-msg[hidden] { display: none; } .op-encart .pack-reserve { display: grid; justify-items: center; gap: 6px; padding: 4px 0 2px; } .op-encart .pack-reserve[hidden] { display: none; } .op-encart .pr-count { font-size: 14px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text); font-variant-numeric: tabular-nums; } .op-encart .pack-reserve.is-empty .pr-count { color: var(--muted); } .op-encart .pr-note { max-width: 26ch; font-size: 12px; color: var(--muted); text-wrap: balance; } /* ================= Page Collection : onglets (ma collection · les collections de mes amis · ma liste de souhait) ================= */ .coll-tabs { display: flex; gap: 4px; margin: 0 0 26px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; } .coll-tabs::-webkit-scrollbar { display: none; } .coll-tab { position: relative; flex: none; display: inline-flex; align-items: center; gap: 9px; padding: 13px 18px; color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: var(--cur-hand); transition: color .3s ease; } .coll-tab:hover { color: var(--text); } .coll-tab:focus-visible { outline: 2px solid var(--brass); outline-offset: -4px; } .coll-tab[aria-current="page"] { color: var(--brass-ink); } .coll-tab::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; background: var(--brass); scale: 0 1; transition: scale .3s ease; } .coll-tab[aria-current="page"]::after { scale: 1 1; } .coll-tab-n { min-width: 19px; height: 19px; padding: 0 5px; box-sizing: border-box; display: inline-grid; place-items: center; border-radius: 10px; background: var(--brass-ink); color: var(--on-brass); font-size: 11px; font-weight: 600; letter-spacing: 0; font-variant-numeric: tabular-nums; } @media (max-width: 760px) { .coll-tab-n { display: none; } } /* téléphone : pas de compteur sur l’onglet « Ma liste de souhait » (les onglets y sont serrés sur plusieurs lignes) */ /* Téléphone : les trois onglets se partagent la largeur (libellés sur deux ou trois lignes) au lieu de défiler hors de l'écran */ @media (max-width: 760px) { .coll-tabs { gap: 0; overflow: visible; } .coll-tab { flex: 1 1 0; min-width: 0; justify-content: center; gap: 6px; padding: 10px 6px 12px; font-size: 10.5px; letter-spacing: .06em; line-height: 1.3; text-align: center; white-space: normal; } .coll-tab::after { left: 6px; right: 6px; } } /* Fiche d'une carte d'ami : les amis qui la possèdent (un tag par ami : pseudo et nombre d'exemplaires, comme les étiquettes et leur nombre de cartes), liste de souhait, échange */ .fr-tags { margin-top: 18px; } .fr-tags-label { margin: 0 0 8px; font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .fr-tags-none { margin: 0; font-size: 13.5px; color: var(--muted); } .fr-chips { display: flex; flex-wrap: wrap; gap: 8px 10px; } .fr-chip .tag-main { cursor: default; } .fr-chip .tag-n { opacity: 1; } .wish-btn svg, .trade-btn svg { fill: none; } .wish-btn.is-on svg { fill: currentColor; } .tr-wrap { display: contents; } .tr-friends { flex-basis: 100%; margin-top: 10px; padding: 12px 14px; border: 1px solid var(--line); background: var(--card); } .tr-friends-label { margin: 0 0 8px; font-size: 12px; letter-spacing: .06em; color: var(--muted); } .tr-friends-list { display: flex; flex-wrap: wrap; gap: 8px; } /* ================= Page Paquets : retouches du carrousel (aperçus des zones voisines, losanges, ligne Discord) ================= */ /* Les flèches passent devant tout (lueur et aperçus du paquet compris) */ .pk-navwrap { z-index: 3; } /* Losanges de zone : tous pleins, dans la couleur de la livrée (vert vif pour les paquets standards, qui ressort sur le fond sombre) ; le courant est plus grand et cerclé */ .pk-dot[data-zone="normal"] i { --pk-tint: #34d58f; } .pk-dot i { background: var(--pk-tint); } :root[data-theme="light"] .pk-dot[data-zone="normal"] i { --pk-tint: #139a5f; } :root[data-theme="light"] .pk-dot[data-zone="silver"] i { --pk-tint: #8a949e; } :root[data-theme="light"] .pk-dot[data-zone="golden"] i { --pk-tint: #c99a1c; } :root[data-theme="light"] .pk-dot[data-zone="diamond"] i { --pk-tint: #3d9ad2; } :root[data-theme="light"] .pk-dot[data-zone="thematic"] i { --pk-tint: #8e76cc; } .pk-dot:not(.is-cur) i { scale: .9; } /* Aperçus des zones voisines (ordinateur) : deux paquets statiques assombris, de chaque côté, derrière le paquet central */ .pk-peeks { display: none; } @media (min-width: 761px) { .pk-peeks { display: block; grid-column: 1 / -1; grid-row: 2; position: relative; align-self: stretch; width: 100%; z-index: 0; pointer-events: none; transition: visibility 0s; } /* L'anneau : cinq paquets statiques, un par zone, qui tournent (transform seulement). 0 devant, 1 à droite, 2 et 3 derrière, 4 à gauche. Le paquet central est le paquet interactif ; son double statique (pos. 0) n'apparaît que pendant la rotation (.is-turning). */ .pk-peek { position: absolute; top: calc(50% - 15px); left: 50%; margin: 0; visibility: hidden; pointer-events: none; transition: transform var(--pk-dur, .65s) var(--pk-ease, cubic-bezier(.42, .02, .22, 1)), z-index var(--pk-dur, .65s) linear; } .pack-carousel.is-turning .pk-peek { visibility: visible; will-change: transform; } .pack-carousel.pk-instant .pk-peek, .pack-carousel.pk-instant .pk-peek .p3-leaf { transition: none !important; } .pack-carousel.is-turning > .pack-stage .pack3d-wrap { visibility: hidden; } /* seul le paquet s'efface : la lueur et la mention restent en place (aucun à-coup à l'arrivée) */ .pk-peek[data-pos="0"] { transform: translate(-50%, -50%); z-index: 30; } .pk-peek[data-pos="1"] { transform: translate(calc(-50% + var(--p3-u) * 194), -50%) scale(.7); z-index: 20; visibility: visible; pointer-events: auto; cursor: var(--cur-hand); } .pk-peek[data-pos="4"] { transform: translate(calc(-50% - var(--p3-u) * 194), -50%) scale(.7); z-index: 20; visibility: visible; pointer-events: auto; cursor: var(--cur-hand); } .pk-peek[data-pos="2"] { transform: translate(calc(-50% + var(--p3-u) * 64), calc(-50% - var(--p3-u) * 30)) scale(.5); z-index: 10; } .pk-peek[data-pos="3"] { transform: translate(calc(-50% - var(--p3-u) * 64), calc(-50% - var(--p3-u) * 30)) scale(.5); z-index: 10; } /* un peu plus haut : l'orbite est une ellipse, pas un aller-retour sur une droite */ /* Lumière : plein devant, assombri sur les côtés et derrière, grisé quand la zone n'a aucun paquet (comme le paquet central désactivé) */ .pk-peek .p3-leaf { transition: filter var(--pk-dur, .65s) ease, opacity var(--pk-dur, .65s) ease-out; animation: wc-fade-in .5s ease backwards; } /* Le paquet de derrière est fondu : il s'efface en passant derrière (fin du mouvement) et réapparaît en sortant de derrière (début) */ .pk-peek[data-pos="2"] .p3-leaf, .pk-peek[data-pos="3"] .p3-leaf { opacity: 0; transition: filter var(--pk-dur, .65s) ease, opacity var(--pk-dur, .65s) ease-in; } .pk-peek[data-pos="1"] .p3-leaf, .pk-peek[data-pos="4"] .p3-leaf { filter: brightness(.55) saturate(.8); } .pk-peek[data-pos="2"] .p3-leaf, .pk-peek[data-pos="3"] .p3-leaf { filter: brightness(.4) saturate(.7); } /* Les filtres s'écrivent TOUS dans le même ordre (brightness, saturate, grayscale) et sans halo : le navigateur n'anime un filtre d'un état à l'autre (rotation du carrousel, survol) que si les listes de fonctions se correspondent ; sinon il saute d'un coup. */ .pk-peek[data-pos="0"][data-empty="1"] .p3-leaf { filter: brightness(.72) saturate(1) grayscale(.85); opacity: .5; } .pk-peek[data-pos="1"][data-empty="1"] .p3-leaf, .pk-peek[data-pos="4"][data-empty="1"] .p3-leaf { filter: brightness(.45) saturate(1) grayscale(.85); } .pk-peek[data-pos="2"][data-empty="1"] .p3-leaf, .pk-peek[data-pos="3"][data-empty="1"] .p3-leaf { filter: brightness(.3) saturate(1) grayscale(.85); } .pk-peek[data-pos="1"]:hover .p3-leaf, .pk-peek[data-pos="4"]:hover .p3-leaf { filter: brightness(.8) saturate(.95) grayscale(0); transition-duration: .3s; } .pk-peek[data-pos="1"][data-empty="1"]:hover .p3-leaf, .pk-peek[data-pos="4"][data-empty="1"]:hover .p3-leaf { filter: brightness(.7) saturate(1) grayscale(.85); } /* Paquets argenté, doré et diamanté sur un côté : ils gardent leur couleur au lieu de virer au gris, avec seulement un peu de gris et de transparence pour rester en retrait du paquet du milieu (aucun halo : il est réservé au paquet central). Zone vide (aucun paquet de ce type en réserve) : un peu plus grisés, plus transparents et plus sombres. Au survol, ils reprennent toute leur couleur en fondu (.3 s). Le paquet standard (vert) garde le style ci-dessus. */ .pk-peek:not([data-kind="normal"])[data-pos="1"] .p3-leaf, .pk-peek:not([data-kind="normal"])[data-pos="4"] .p3-leaf { filter: brightness(.9) saturate(1.3) grayscale(.12); opacity: .9; } .pk-peek:not([data-kind="normal"])[data-pos="1"][data-empty="1"] .p3-leaf, .pk-peek:not([data-kind="normal"])[data-pos="4"][data-empty="1"] .p3-leaf { filter: brightness(.72) saturate(1.15) grayscale(.35); opacity: .78; } .pk-peek:not([data-kind="normal"])[data-pos="1"]:hover .p3-leaf, .pk-peek:not([data-kind="normal"])[data-pos="4"]:hover .p3-leaf, .pk-peek:not([data-kind="normal"])[data-pos="1"][data-empty="1"]:hover .p3-leaf, .pk-peek:not([data-kind="normal"])[data-pos="4"][data-empty="1"]:hover .p3-leaf { filter: brightness(1.06) saturate(1.45) grayscale(0); opacity: 1; transition-duration: .3s; } .pk-peek .p3-glow { display: none; } /* la lueur est celle du paquet interactif, qui reste en place pendant la rotation */ /* Les flèches se placent au-delà des aperçus */ .pk-navwrap--prev { margin-right: calc(var(--p3-u, 1px) * 164 + 12px); } .pk-navwrap--next { margin-left: calc(var(--p3-u, 1px) * 164 + 12px); } } .pack-carousel { --p3-u: calc(var(--pk, 1) * 1px); } /* Pendant l'ouverture d'un paquet (et la révélation des cartes), flèches, losanges, nom de la zone et aperçus s'effacent */ .pk-head, .pk-navwrap { transition: opacity .3s ease, visibility 0s; } .opener:not([data-phase="home"]) .pk-head, .opener:not([data-phase="home"]) .pk-navwrap { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, visibility 0s .25s; } .opener:not([data-phase="home"]) .pk-peeks, .opener:not([data-phase="home"]) .pk-peek { visibility: hidden !important; pointer-events: none; } .opener:not([data-phase="home"]) .pk-peek .p3-leaf { opacity: 0; } /* moins d'animations (boot.js, docs/animations.md) */ :where(:root[data-motion="reduce"]) .pk-head, :where(:root[data-motion="reduce"]) .pk-navwrap { transition: none !important; } :where(:root[data-motion="reduce"]) .pk-peek .p3-leaf { animation: none; } :where(:root[data-motion="reduce"]) .pk-peek { transition: none; } /* Encart Réserve : l'explication d'une zone tient sur deux lignes au plus */ .op-encart .pr-note { max-width: none; line-height: 1.35; } /* Bandeau Discord : l'EN-TÊTE de l'encart Réserve (page Paquets), collé à son bord haut. Mêmes gradins que l'encart (angles du haut ici, angles du bas pour l'encart, dont les angles du haut deviennent droits : .op-encart--dc), même cadre de laiton à 1 px, fond en léger dégradé. Toute la bande est un lien ; la croix le retire pour de bon (compte du joueur : api/profile.php). */ .dc-head { --s: 6px; position: relative; width: 100%; max-width: 1040px; margin: 28px auto 0; padding: 1px; background: var(--brass-line); /* même largeur maximale que l'encart Réserve (1040 px) */ /* mêmes angles en gradins que le haut de l'encart Réserve (deux marches), aux quatre coins */ --dc-top: polygon(0 calc(var(--s) * 2), var(--s) calc(var(--s) * 2), var(--s) var(--s), calc(var(--s) * 2) var(--s), calc(var(--s) * 2) 0, calc(100% - var(--s) * 2) 0, calc(100% - var(--s) * 2) var(--s), calc(100% - var(--s)) var(--s), calc(100% - var(--s)) calc(var(--s) * 2), 100% calc(var(--s) * 2), 100% calc(100% - var(--s) * 2), calc(100% - var(--s)) calc(100% - var(--s) * 2), calc(100% - var(--s)) calc(100% - var(--s)), calc(100% - var(--s) * 2) calc(100% - var(--s)), calc(100% - var(--s) * 2) 100%, calc(var(--s) * 2) 100%, calc(var(--s) * 2) calc(100% - var(--s)), var(--s) calc(100% - var(--s)), var(--s) calc(100% - var(--s) * 2), 0 calc(100% - var(--s) * 2)); } .dc-head, .dc-link { clip-path: var(--dc-top); } .dc-link { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 22px; box-sizing: border-box; padding: 16px 54px 15px 24px; color: var(--text); text-decoration: none; font-size: 13.5px; line-height: 1.4; letter-spacing: .02em; background: radial-gradient(60% 150% at 8% 0%, color-mix(in srgb, var(--brass) 20%, transparent), transparent 70%), linear-gradient(var(--tint), var(--tint)), var(--bg); transition: filter .3s ease; } .dc-link:hover, .dc-link:focus-visible { filter: brightness(1.12); } .dc-link:focus-visible { outline: 2px solid var(--brass); outline-offset: -4px; } /* « Nouveau ! » : grand, entre deux petits filets (au-dessus et en dessous), séparé du reste par un filet vertical */ .dc-new { display: grid; justify-items: center; gap: 5px; padding-right: 22px; border-right: 1px solid var(--brass-line); } .dc-new b { color: var(--brass-ink); font-family: var(--font-title); font-size: 19px; font-weight: 400; line-height: 1; letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; } .dc-rule { display: block; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--brass) 25%, var(--brass) 75%, transparent); } .dc-body { display: grid; gap: 7px; min-width: 0; } .dc-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 18px; } .dc-title { font-size: 14px; font-weight: 500; letter-spacing: .03em; } /* Les récompenses, mises en avant : un chiffre en grand, son pictogramme, séparés par des losanges */ .dc-gifts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--muted); font-size: 12.5px; } .dc-gift { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .dc-gift b { color: var(--brass-ink); font-size: 17px; font-weight: 500; line-height: 1; } .dc-gift .dc-ico { width: 20px; height: 20px; flex: none; } .dc-gift .op-pack-mini { width: 14px; height: 20px; margin: 0; } .dc-gem { flex: none; width: 5px; height: 5px; rotate: 45deg; background: var(--brass); opacity: .65; } .dc-go { color: var(--brass-ink); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; } .dc-go::after { content: "›"; margin-left: 8px; font-size: 16px; line-height: 1; transition: margin .3s ease; } .dc-link:hover .dc-go::after, .dc-link:focus-visible .dc-go::after { margin-left: 12px; } .dc-close { appearance: none; position: absolute; top: 50%; right: 14px; translate: 0 -50%; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; background: none; color: var(--muted); cursor: var(--cur-hand); transition: color .3s ease; } .dc-close:hover, .dc-close:focus-visible { color: var(--text); } .dc-close svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } /* L'encart sous le bandeau : collé à lui, angles du haut droits (gradins en bas seulement), cadre intérieur compris */ .op-encart--dc { margin-top: calc(-1 * var(--cta-gap, 12px)); } /* l'écart que .cta met entre ses enfants est repris : le bandeau et l'encart se touchent exactement */ .op-encart--dc, .op-encart--dc .op-inner, .op-encart--dc .op-inner::before, .op-encart--dc .op-inner::after { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--s)), calc(100% - var(--s) / 2) calc(100% - var(--s)), calc(100% - var(--s) / 2) calc(100% - var(--s) / 2), calc(100% - var(--s)) calc(100% - var(--s) / 2), calc(100% - var(--s)) 100%, var(--s) 100%, var(--s) calc(100% - var(--s) / 2), calc(var(--s) / 2) calc(100% - var(--s) / 2), calc(var(--s) / 2) calc(100% - var(--s)), 0 calc(100% - var(--s))); } @media (max-width: 660px) { .dc-link { grid-template-columns: 1fr; justify-items: center; gap: 10px; padding: 14px 40px 14px 16px; text-align: center; } .dc-new { width: 100%; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 0; border: 0; } .dc-new b { font-size: 17px; } .dc-top { flex-direction: column; align-items: center; } .dc-title { text-wrap: balance; } .dc-gifts { justify-content: center; } .dc-close { top: 12px; translate: 0 0; right: 10px; } } /* Page Collection : le titre de l'onglet affiché, en grand, sous la barre des onglets */ .coll-title { margin: 0 0 26px; } .tr-friends-list { max-height: 180px; overflow-y: auto; } /* Rotation du carrousel : la lueur du paquet central s'éteint d'un coup de fondu (.25 s) avant que l'ancien paquet ne parte, puis se rallume à la couleur de la nouvelle zone une fois le paquet arrivé : plus d'aura de l'ancien paquet qui reste en place puis change brusquement de couleur. */ .pack-carousel.is-turning > .pack-stage .p3-glow { animation: none !important; opacity: 0 !important; transition: opacity .25s ease; } /* ========================================================= Quiz du jour (1.0.0, src/Quiz.php) et joyaux (src/Gems.php) ========================================================= */ .gem { width: 1em; height: 1em; vertical-align: -.14em; flex: none; } /* Encart de la page Jeux (même cadre que WikiGéo : .gqj-…) */ .qzb { margin-bottom: 32px; scroll-margin-top: 96px; } .qzb-gains dd { font-size: 18px; } .qzb-gains dd.qzb-gemcount { font-size: 14px; color: var(--muted); } .qzb .gqj-side .wsb-gains { grid-template-columns: repeat(3, auto); } .qzb-done { margin: 0; text-align: center; font-size: 15px; color: var(--text); line-height: 1.5; } .qzb-done span { font-size: 13px; color: var(--muted); } @container jxp (max-width: 520px) { .qzb .gqj-side .wsb-gains > div { padding: 10px 2px 8px; } } /* Page du quiz */ .wrap.qz { max-width: 820px; padding-top: clamp(28px, 5vw, 48px); padding-bottom: 72px; } .qz-head { text-align: center; max-width: 60ch; margin: 0 auto 28px; } .qz-kicker { margin: 0 0 8px; font-size: 12.5px; letter-spacing: .22em; text-transform: uppercase; } .qz-kicker a { color: var(--brass-ink); } .qz-head h1 { margin: 0 0 10px; font-weight: 300; font-size: clamp(32px, 5vw, 48px); } .qz-lead { margin: 0; color: var(--muted); line-height: 1.55; } .qz-msg { min-height: 1.4em; margin: 0 0 14px; text-align: center; color: var(--muted); } .qz-msg.is-error { color: var(--err-ink); } .qz-phase[hidden] { display: none; } .qz-card { position: relative; overflow-wrap: break-word; padding: 32px clamp(20px, 5vw, 44px); background: var(--card); border: 1px solid var(--brass-line); box-shadow: 0 0 0 5px var(--card), 0 0 0 6px var(--brass-line); margin-bottom: 22px; } .qz-h2 { margin: 0 0 14px; font-weight: 300; font-size: 28px; text-align: center; letter-spacing: .1em; } .qz-h3 { margin: 36px 0 16px; font-weight: 400; font-size: 14px; letter-spacing: .26em; text-transform: uppercase; text-align: center; color: var(--brass-ink); } .qz-p { color: var(--muted); text-align: center; line-height: 1.55; } .qz-date { margin: 0 0 6px; text-align: center; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--brass-ink); } .qz-rules { margin: 0 0 22px; padding-left: 1.2em; color: var(--muted); line-height: 1.7; } .qz-rules b { color: var(--text); font-weight: 500; } .qz-gains { width: 100%; margin: 0 0 24px; border-collapse: collapse; font-size: 14px; } .qz-gains th, .qz-gains td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; } .qz-gains thead th { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); } .qz-gains td b { font-weight: 500; } .qz-card > .btn { display: flex; margin: 0 auto; width: fit-content; } .qz-bar { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; margin-bottom: 20px; padding: 10px 16px 16px; border: 1px solid var(--brass-line); background: var(--card); } .qz-count { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .qz-count b { font-size: 15px; letter-spacing: 0; color: var(--text); } .qz-pips { display: flex; justify-content: center; gap: 7px; flex-wrap: wrap; } .qz-pips i { width: 9px; height: 9px; rotate: 45deg; border: 1px solid var(--brass); background: transparent; } .qz-pips i.is-ok { background: var(--r2); border-color: var(--r2); } .qz-pips i.is-bad { background: var(--err-ink); border-color: var(--err-ink); } .qz-pips i.is-now { background: color-mix(in srgb, var(--brass) 45%, transparent); box-shadow: 0 0 8px var(--brass); } .qz-pips i.is-hw { border-color: #e8792b; } /* la question d'Halloween (Quiz::BONUS_POS) */ .qz-pips i.is-hw.is-now { background: color-mix(in srgb, #e8792b 55%, transparent); box-shadow: 0 0 8px #e8792b; } .qz-timer { font-size: 28px; line-height: 1; font-weight: 300; letter-spacing: .06em; font-variant-numeric: tabular-nums; } .qz-timer.is-low { color: var(--err-ink); } .qz-track { position: absolute; left: 6px; right: 6px; bottom: 6px; height: 3px; background: var(--line); } .qz-track i { display: block; height: 100%; width: 100%; background: var(--brass); transition: width .12s linear; } .qz-track i.is-low { background: var(--err-ink); } .qz-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; margin: 0 0 20px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .qz-tags .gem { font-size: 18px; margin-right: 6px; } .qz-theme, .qz-diff { display: inline-flex; align-items: center; } .qz-diff .wc-piece { width: 1.3em; height: 1.3em; margin: 0 3px; } .qz-text { margin: 0 0 26px; text-transform: none; letter-spacing: .01em; font-weight: 400; font-size: clamp(21px, 3.4vw, 28px); line-height: 1.4; text-align: center; text-wrap: balance; } .qz-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; } .qz-input { min-height: 52px; padding: 0 16px; background: var(--surface); border: 1px solid var(--brass-line); color: var(--text); font: inherit; font-size: 18px; } .qz-input:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; } .qz-note { margin: 16px 0 0; text-align: center; font-size: 12.5px; color: var(--muted); } .qz-fb.is-ok { border-color: var(--r2); box-shadow: 0 0 0 5px var(--card), 0 0 0 6px var(--r2); } .qz-fb.is-bad { border-color: var(--err-ink); box-shadow: 0 0 0 5px var(--card), 0 0 0 6px var(--err-ink); } .qz-result { margin: 0 0 14px; text-align: center; font-size: 22px; font-weight: 300; letter-spacing: .06em; } .qz-fb.is-ok .qz-result { color: var(--r2); } .qz-fb.is-bad .qz-result { color: var(--err-ink); } .qz-fq { margin: 0 0 8px; text-align: center; color: var(--muted); line-height: 1.5; } .qz-fa { margin: 0 0 6px; text-align: center; font-size: 17px; } .qz-fa b { font-weight: 600; color: var(--brass-ink); } .qz-given { margin: 0 0 6px; text-align: center; font-size: 14px; color: var(--muted); } .qz-fgain { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; margin: 14px 0 0; } .qz-info { margin: 18px 0 0; font-weight: 400; padding-top: 16px; border-top: 1px solid var(--line); line-height: 1.6; color: var(--text); } .qz-src { margin: 10px 0 0; text-align: center; font-size: 13px; } .qz-src a { color: var(--brass-ink); } .qz-next { display: flex; justify-content: center; margin: 0; } @media (max-width: 560px) { .qz-bar { grid-template-columns: 1fr auto; } .qz-pips { grid-column: 1 / -1; order: 3; } .qz-form { grid-template-columns: minmax(0, 1fr); } .qz-form .btn { width: 100%; } } /* Espace admin : page Quiz */ .admin-quiz-badge { display: inline-block; min-width: 3.4em; padding: 2px 10px; border: 1px solid var(--line); text-align: center; font-variant-numeric: tabular-nums; } .admin-quiz-badge.is-prêt { border-color: var(--r2); color: var(--r2); } .admin-quiz-badge.is-incomplet { border-color: #b8862a; color: #8a6511; } .admin-quiz-ok { padding: 10px 14px; border: 1px solid var(--r2); color: var(--r2); } .admin-quiz-err { margin: 0; padding: 10px 14px; border: 1px solid var(--err-ink); color: var(--err-ink); } /* ---- 1.0.0 (2e passe) : quiz, classement, encarts de récompenses ---- */ /* Page du quiz : plus large (les corrections de fin de partie ont trois colonnes) */ .wrap.qz { max-width: 1060px; } .qz-head, .qz-phase.qz-card, .qz-phase.qz-play { max-width: 820px; margin-left: auto; margin-right: auto; } .qz-tablenote { margin: -8px 0 22px; text-align: center; font-size: 13px; color: var(--muted); } .qz-tablenote b { color: var(--text); font-weight: 600; } .qz-themes { list-style: none; margin: 0 0 26px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; } .qz-themes li { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 6px 10px; border: 1px solid var(--brass-line); background: color-mix(in srgb, var(--brass) 6%, var(--card)); text-align: center; } .qz-themes .gem { font-size: 30px; } .qz-theme-n { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text); } .qz-theme-l { font-size: 12px; line-height: 1.3; color: var(--muted); } .qz-h3 { margin: 28px 0 14px; } .qz-intro .qz-gains + .qz-tablenote { margin-top: 12px; } @media (max-width: 640px) { .qz-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Fin de partie : le cadre de WikiGéo (.gq-end-…), gains alignés sur une grille, un joyau par case */ .qz-endwrap .gq-end-frame { max-width: 760px; } .qz-endwrap .gq-end-body { padding: 40px clamp(18px, 4vw, 40px) 36px; } .qz-egains { max-width: none; } .qz-egains .gq-gains-rows { margin-bottom: 18px; } .qz-pieceval { display: inline-flex; align-items: center; gap: 8px; } .qz-pieceval .wc-piece { width: .66em; height: .66em; } .qz-gems5 { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--brass-line); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } .qz-gem5 { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 2px; } .qz-gem5 .gem { width: 34px; height: 34px; } .qz-gem5 b { font-size: 20px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; color: var(--brass-ink); } .qz-gem5 span { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .qz-gem5.is-none { opacity: .55; } .qz-gem5.is-none b { color: var(--muted); font-weight: 400; } .qz-reset { margin: 22px 0 0; text-align: center; font-size: 13.5px; color: var(--muted); } .qz-endwrap .gq-end-actions { margin-top: 24px; flex-wrap: wrap; } @media (max-width: 560px) { .qz-gem5 span { font-size: 8.5px; letter-spacing: .04em; } .qz-gem5 .gem { width: 28px; height: 28px; } } .qzb-gains dd.qzb-gemcount { font-size: 13px; font-weight: 500; color: var(--muted); } /* Page Jeux en trois lignes : Quiz du jour + Missions, puis WikiSpeed, puis WikiGéo */ .jxp-grid.jxp-grid--top { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); margin-top: 0; } .jxp-row { margin-top: 32px; } .jxp-v-d .jxp-grid.jxp-grid--top { margin-top: 0; } @container jxp (max-width: 980px) { .jxp-grid.jxp-grid--top { grid-template-columns: minmax(0, 1fr); } .jxp-row { margin-top: 56px; } } /* Encart Quiz du jour : classement de la semaine en aperçu */ .qzb { margin-bottom: 0; } .qzb-rank { display: grid; gap: 12px; } .qzb-ranklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .qzb-rk { display: grid; grid-template-columns: 34px 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 12px; background: color-mix(in srgb, var(--brass) 6%, var(--card)); border: 1px solid var(--line); } .qzb-rk.is-me { border-color: var(--brass); background: color-mix(in srgb, var(--brass) 16%, var(--card)); } .qzb-rk-n { font-weight: 600; color: var(--brass-ink); font-variant-numeric: tabular-nums; } .qzb-rk-av { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; } .qzb-rk-p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qzb-rk-s { font-weight: 600; font-variant-numeric: tabular-nums; } .qzb-rank-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; align-items: center; font-size: 13px; color: var(--muted); } .qzb-rank-foot a { color: var(--brass-ink); font-weight: 600; } .qzb-empty { margin: 0; padding: 12px; text-align: center; font-size: 14px; color: var(--muted); border: 1px dashed var(--brass-line); } /* Page du classement hebdomadaire */ .wrap.qk { max-width: 900px; padding-top: clamp(28px, 5vw, 48px); padding-bottom: 72px; } .qk-head { text-align: center; margin: 0 auto 26px; max-width: 60ch; } .qk-head h1 { margin: 0 0 10px; font-weight: 300; font-size: clamp(30px, 4.6vw, 44px); } .qk-lead { margin: 0; color: var(--muted); line-height: 1.55; } .qk-reset { margin: 10px 0 0; font-size: 13px; letter-spacing: .08em; color: var(--brass-ink); } .qk-mine { margin: 0 0 22px; padding: 16px 20px; text-align: center; border: 1px solid var(--brass); background: color-mix(in srgb, var(--brass) 10%, var(--card)); } .qk-mine b { font-weight: 600; color: var(--brass-ink); } .qk-scroll { max-width: 100%; overflow-x: auto; } /* téléphone : le tableau à 5 colonnes défile au lieu d'être rogné (html { overflow-x: clip }) */ .qk-table { width: 100%; border-collapse: collapse; margin: 0 0 8px; } .qk-table th, .qk-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; } .qk-table thead th { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--brass-line); } .qk-table .qk-num { text-align: right; font-variant-numeric: tabular-nums; } .qk-table tr.is-me td { background: color-mix(in srgb, var(--brass) 14%, transparent); } .qk-table tr.is-sep td { padding: 4px; text-align: center; color: var(--muted); border-bottom: 0; } .qk-rank { width: 56px; font-weight: 600; color: var(--brass-ink); font-variant-numeric: tabular-nums; } .qk-rank.is-top { font-size: 20px; } .qk-who { display: flex; align-items: center; gap: 10px; } .qk-who img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; } .qk-reward { font-size: 12.5px; color: var(--muted); white-space: nowrap; } .qk-reward b { color: var(--text); font-weight: 600; } .qk-h2 { margin: 40px 0 14px; font-size: 14px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; text-align: center; color: var(--brass-ink); } .qk-rewards { width: 100%; border-collapse: collapse; font-size: 14px; } .qk-rewards th, .qk-rewards td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; } .qk-rewards thead th { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 500; } .qk-rewards b { font-weight: 600; } .qk-podium { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 26px; } .qk-podium li { display: flex; align-items: center; gap: 10px; } .qk-podium img { width: 30px; height: 30px; border-radius: 50%; } .qk-empty { text-align: center; color: var(--muted); padding: 22px 0; } @media (max-width: 640px) { .qk-reward { white-space: normal; } .qk-table th, .qk-table td { padding: 8px 6px; } } /* Atelier : les joyaux du joueur et le thème de chacun */ .at-gems { margin: 0 auto 28px; max-width: 880px; display: grid; gap: 12px; } .at-gemlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; } .at-gem { --gc: var(--brass); display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 16px 6px 13px; text-align: center; border: 1px solid var(--brass-line); border-top: 4px solid var(--gc); background: linear-gradient(180deg, color-mix(in srgb, var(--gc) 20%, var(--card)), var(--card) 78%); } .at-gem[data-gem="histoire"] { --gc: #f0a63c; } .at-gem[data-gem="geographie"] { --gc: #3f6fd6; } .at-gem[data-gem="sciences"] { --gc: #2fb36b; } .at-gem[data-gem="arts"] { --gc: #9c5fd6; } .at-gem[data-gem="sport"] { --gc: #e03a52; } .at-gem .gem { width: 40px; height: 40px; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--gc) 55%, transparent)); } .at-gem b { font-size: 24px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--brass-ink); } .at-gem-n { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text); } .at-gem-t { font-size: 12px; line-height: 1.3; color: var(--muted); } .at-gems-note { margin: 0; text-align: center; font-size: 13px; color: var(--muted); } @media (max-width: 640px) { .at-gemlist { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Espace admin : page Quiz (2e version) */ .admin-quiz-today { margin: 0 0 22px; padding: 16px 20px; background: var(--surface); border: 1px solid var(--brass); border-top-width: 3px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; } .admin-quiz-today h2 { margin: 0; font-size: 18px; } .admin-quiz-details { margin: 0 0 14px; border: 1px solid var(--line); background: var(--surface); } .admin-quiz-details > summary { cursor: pointer; padding: 14px 18px; font-weight: 500; letter-spacing: .06em; list-style: none; display: flex; align-items: center; gap: 12px; } .admin-quiz-details > summary::-webkit-details-marker { display: none; } .admin-quiz-details > summary::before { content: ""; width: 8px; height: 8px; rotate: 45deg; border: 1px solid var(--brass); background: transparent; transition: background .2s; flex: none; } .admin-quiz-details[open] > summary::before { background: var(--brass); } .admin-quiz-details > summary .hint { margin-left: auto; font-weight: 400; } .admin-quiz-details .admin-table-wrap { padding: 0 14px 14px; } /* Espace admin : page Quiz, éditeur d'un jour (une ligne par question, pleine largeur) */ .doc.admin.admin-wide { max-width: none; width: calc(100% - 2 * clamp(12px, 1.6vw, 26px) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)); } .admin-quiz-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 0 0 16px; } .admin-quiz-bar > a { font-size: 14px; } .admin-quiz-days { display: flex; align-items: center; gap: 12px; margin-right: auto; } .admin-quiz-days h2 { margin: 0; font-size: 20px; } .admin-quiz-days a { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--brass-line); color: var(--brass-ink); text-decoration: none; font-size: 20px; line-height: 1; } .admin-quiz-days a:hover, .admin-quiz-days a:focus-visible { background: color-mix(in srgb, var(--brass) 16%, transparent); } .admin-quiz-pick { margin: 0; } .aq-form { margin-top: 6px; } .aq-grid { display: grid; gap: 6px; } .aq-row { display: grid; grid-template-columns: 56px 168px 132px minmax(190px, 1.5fr) minmax(130px, .8fr) minmax(130px, .8fr) minmax(190px, 1.3fr) minmax(150px, .9fr); gap: 8px; align-items: stretch; padding: 8px; background: var(--surface); border: 1px solid var(--line); } .aq-row.has-error { border-color: var(--err-ink); } .aq-row.aq-head { position: sticky; top: 0; z-index: 5; padding: 8px; background: var(--card); border-bottom: 1px solid var(--brass-line); font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .aq-head i { font-style: normal; letter-spacing: .04em; text-transform: none; opacity: .75; } .aq-n { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 18px; color: var(--brass-ink); } .aq-n small { font-size: 10.5px; color: var(--muted); text-align: center; line-height: 1.2; } .aq-n small i { font-style: normal; } .aq-c { display: block; min-width: 0; } .aq-c textarea { display: block; width: 100%; height: 100%; min-height: 56px; resize: vertical; appearance: none; border: 1px solid var(--line); background: var(--card); color: var(--text); padding: 8px 10px; font: inherit; font-size: 14px; line-height: 1.4; } .aq-c textarea:focus-visible { outline: 2px solid var(--brass); outline-offset: 0; } .aq-c textarea:disabled { opacity: .75; } .aq-err { grid-column: 1 / -1; margin: 0; padding: 6px 10px; border: 1px solid var(--err-ink); color: var(--err-ink); font-size: 13px; } @media (max-width: 1180px) { .aq-row { grid-template-columns: 44px 160px 128px minmax(0, 1fr) minmax(0, 1fr); } .aq-head { display: none; } .aq-row > :nth-child(6) { grid-column: 1 / 4; } /* variantes sous le numéro, le thème et la difficulté */ .aq-row > :nth-child(7) { grid-column: 4; } /* explication */ .aq-row > :nth-child(8) { grid-column: 5; } /* lien source */ } @media (max-width: 760px) { .aq-row { grid-template-columns: minmax(0, 1fr); } .aq-n { flex-direction: row; justify-content: flex-start; } .aq-row > :nth-child(n+6) { grid-column: auto; } } /* Liste déroulante Art déco (assets/admin-quiz.js) */ .ad-select { position: relative; } .ad-select-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .ad-select-btn { appearance: none; width: 100%; min-height: 56px; display: flex; align-items: center; gap: 8px; padding: 8px 10px; text-align: left; font: inherit; font-size: 14px; color: var(--text); background: var(--card); border: 1px solid var(--line); cursor: pointer; transition: border-color .2s, background .2s; } .ad-select-btn:hover, .ad-select.is-open .ad-select-btn { border-color: var(--brass); } .ad-select-btn:focus-visible { outline: 2px solid var(--brass); outline-offset: 0; } .ad-select-btn.is-empty { color: var(--muted); } .ad-select-btn:disabled { opacity: .75; cursor: default; } .ad-select-btn .gem { width: 20px; height: 20px; flex: none; } .ad-select-val { flex: 1; min-width: 0; line-height: 1.25; } .ad-select-chev { flex: none; width: 7px; height: 7px; border-right: 1.5px solid var(--brass); border-bottom: 1.5px solid var(--brass); rotate: 45deg; translate: 0 -2px; transition: rotate .2s; } .ad-select.is-open .ad-select-chev { rotate: 225deg; translate: 0 2px; } .ad-select-list { display: none; position: absolute; z-index: 30; left: 0; min-width: 100%; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none; background: var(--surface); border: 1px solid var(--brass); box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--brass-line), 0 18px 40px rgba(0, 0, 0, .4); max-height: 300px; overflow-y: auto; } .ad-select.is-open .ad-select-list { display: block; } .ad-select-opt { display: flex; align-items: center; gap: 9px; padding: 9px 12px; font-size: 14px; white-space: nowrap; cursor: pointer; border-left: 2px solid transparent; } .ad-select-opt .gem { width: 20px; height: 20px; flex: none; } .ad-select-opt.is-active, .ad-select-opt:hover { background: color-mix(in srgb, var(--brass) 16%, transparent); border-left-color: var(--brass); } .ad-select-opt[aria-selected="true"] { color: var(--brass-ink); font-weight: 600; } .report-field .ad-select-btn { min-height: 48px; padding: 10px 14px; } /* fenêtre « Signaler le joueur » (profil) : motifs parfois longs, sur plusieurs lignes */ .report-field .ad-select-opt { white-space: normal; line-height: 1.35; } .report-field .ad-select-list { position: static; max-height: none; margin-top: 6px; } /* la liste s'ouvre dans la fenêtre (qui s'agrandit) au lieu d'y être rognée */ /* Sélecteur de jour Art déco */ .ad-dp { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; background: var(--overlay); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .ad-dp-box { position: relative; width: min(380px, 100%); padding: 58px 22px 18px; background: var(--surface); border: 1px solid var(--brass); box-shadow: 0 0 0 5px var(--surface), 0 0 0 6px var(--brass-line), 0 24px 80px rgba(0, 0, 0, .45); } .ad-dp-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 14px; } .ad-dp-title { font-size: 15px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--brass-ink); } .ad-dp-nav { appearance: none; width: 34px; height: 34px; border: 1px solid var(--brass-line); background: none; color: var(--brass-ink); font-size: 20px; line-height: 1; cursor: pointer; } .ad-dp-nav:hover:not(:disabled), .ad-dp-nav:focus-visible { background: color-mix(in srgb, var(--brass) 16%, transparent); } .ad-dp-nav:disabled { opacity: .3; cursor: default; } .ad-dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .ad-dp-wd { padding-bottom: 4px; text-align: center; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .ad-dp-day { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 42px; color: var(--text); text-decoration: none; border: 1px solid transparent; font-variant-numeric: tabular-nums; } .ad-dp-day:hover, .ad-dp-day:focus-visible { border-color: var(--brass); background: color-mix(in srgb, var(--brass) 14%, transparent); outline: none; } .ad-dp-day.is-past { color: var(--muted); } .ad-dp-day.is-today { border-color: var(--brass-line); font-weight: 700; color: var(--brass-ink); } .ad-dp-day.is-current { background: var(--brass); color: var(--on-brass); } .ad-dp-dot { display: inline-block; width: 6px; height: 6px; rotate: 45deg; border: 1px solid var(--muted); } .ad-dp-dot.is-full { background: var(--r2); border-color: var(--r2); } .ad-dp-dot.is-part { background: #c8922a; border-color: #c8922a; } .ad-dp-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 14px 0 0; font-size: 12px; color: var(--muted); } .ad-dp-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); } .ad-dp-today { font-size: 13px; color: var(--brass-ink); } .ad-dp-close { appearance: none; padding: 8px 16px; background: none; border: 1px solid var(--brass-line); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; } .ad-dp-close:hover, .ad-dp-close:focus-visible { background: color-mix(in srgb, var(--brass) 16%, transparent); } /* Quiz du jour dans la ligne du haut de la page Jeux : colonne moins large que WikiGéo, le texte puis les récompenses sont empilés */ .qzb .gqj-main { grid-template-columns: minmax(0, 1fr); gap: 20px; } .qzb .gqj-side { align-items: stretch; } .qzb .gqj-rule { max-width: none; } .qzb .gqj-side .wsb-gains { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gqj .gqj-side .qzb-gains dd.qzb-gemcount { font-size: 12px; font-weight: 500; white-space: normal; text-align: center; color: var(--muted); } .qzb .gqj-side .wsb-act { justify-content: center; } .qk-rewards + .qz-tablenote { margin-top: 14px; } .qk-table + .qz-tablenote { margin-top: 18px; } /* sous un classement : de l'air entre la dernière ligne et la note (« X joueurs classés… ») */ .ad-select-list { width: max-content; max-width: 320px; } .ad-select-opt span { white-space: nowrap; } /* ========================================================= Quiz du jour, 2e série de retouches (1.0.0) ========================================================= */ /* Cadres à gradins avec contour : le cadre lui-même est rogné en gradins (--s) et porte le fond ; son contour laiton (::before) et, pour les grands encarts, un filet translucide qui en reprend la forme avec un peu de marge (::after) sont des anneaux (--t d'épaisseur) découpés dans le même gabarit. */ .wsb-gains > div, .qz-chip { position: relative; isolation: isolate; clip-path: polygon(0 calc(2*var(--s)), var(--s) calc(2*var(--s)), var(--s) var(--s), calc(2*var(--s)) var(--s), calc(2*var(--s)) 0, calc(100% - 2*var(--s)) 0, calc(100% - 2*var(--s)) var(--s), calc(100% - var(--s)) var(--s), calc(100% - var(--s)) calc(2*var(--s)), 100% calc(2*var(--s)), 100% calc(100% - 2*var(--s)), calc(100% - var(--s)) calc(100% - 2*var(--s)), calc(100% - var(--s)) calc(100% - var(--s)), calc(100% - 2*var(--s)) calc(100% - var(--s)), calc(100% - 2*var(--s)) 100%, calc(2*var(--s)) 100%, calc(2*var(--s)) calc(100% - var(--s)), var(--s) calc(100% - var(--s)), var(--s) calc(100% - 2*var(--s)), 0 calc(100% - 2*var(--s))); } .wsb-gains > div::before, .qz-chip::before { content: ""; position: absolute; z-index: -1; inset: 0; --t: 1px; opacity: 1; clip-path: polygon(evenodd, 0 calc(2*var(--s)), var(--s) calc(2*var(--s)), var(--s) var(--s), calc(2*var(--s)) var(--s), calc(2*var(--s)) 0, calc(100% - 2*var(--s)) 0, calc(100% - 2*var(--s)) var(--s), calc(100% - var(--s)) var(--s), calc(100% - var(--s)) calc(2*var(--s)), 100% calc(2*var(--s)), 100% calc(100% - 2*var(--s)), calc(100% - var(--s)) calc(100% - 2*var(--s)), calc(100% - var(--s)) calc(100% - var(--s)), calc(100% - 2*var(--s)) calc(100% - var(--s)), calc(100% - 2*var(--s)) 100%, calc(2*var(--s)) 100%, calc(2*var(--s)) calc(100% - var(--s)), var(--s) calc(100% - var(--s)), var(--s) calc(100% - 2*var(--s)), 0 calc(100% - 2*var(--s)), 0 calc(2*var(--s)), var(--t) calc(2*var(--s) + var(--t)), calc(var(--s) + var(--t)) calc(2*var(--s) + var(--t)), calc(var(--s) + var(--t)) calc(var(--s) + var(--t)), calc(2*var(--s) + var(--t)) calc(var(--s) + var(--t)), calc(2*var(--s) + var(--t)) var(--t), calc(100% - 2*var(--s) - var(--t)) var(--t), calc(100% - 2*var(--s) - var(--t)) calc(var(--s) + var(--t)), calc(100% - var(--s) - var(--t)) calc(var(--s) + var(--t)), calc(100% - var(--s) - var(--t)) calc(2*var(--s) + var(--t)), calc(100% - var(--t)) calc(2*var(--s) + var(--t)), calc(100% - var(--t)) calc(100% - 2*var(--s) - var(--t)), calc(100% - var(--s) - var(--t)) calc(100% - 2*var(--s) - var(--t)), calc(100% - var(--s) - var(--t)) calc(100% - var(--s) - var(--t)), calc(100% - 2*var(--s) - var(--t)) calc(100% - var(--s) - var(--t)), calc(100% - 2*var(--s) - var(--t)) calc(100% - var(--t)), calc(2*var(--s) + var(--t)) calc(100% - var(--t)), calc(2*var(--s) + var(--t)) calc(100% - var(--s) - var(--t)), calc(var(--s) + var(--t)) calc(100% - var(--s) - var(--t)), calc(var(--s) + var(--t)) calc(100% - 2*var(--s) - var(--t)), var(--t) calc(100% - 2*var(--s) - var(--t)), var(--t) calc(2*var(--s) + var(--t))); } .wsb-gains > div::before, .qz-chip::before { background: var(--brass); } .wsb-gains > div::after { content: none; } /* pas de filet intérieur dans les tablettes */ /* Encarts de récompenses (WikiSpeed, WikiGéo, Quiz du jour) : tablettes à gradins, contour laiton, filet intérieur, valeur en gras */ .wsb-gains { gap: 12px; border: 0; box-shadow: none; } .wsb-gains > div { --s: 4px; border: 0; gap: 4px; background: linear-gradient(165deg, color-mix(in srgb, var(--brass) 22%, var(--card)), color-mix(in srgb, var(--brass) 6%, var(--card)) 72%); } .wsb-gains > div + div { border-left: 0; } .wsb-gains dt { font-weight: 600; letter-spacing: .2em; color: var(--text); } .wsb-gains dd { font-weight: 700; letter-spacing: .02em; } .wsb-gains dd .wc-piece { font-size: .8em; } /* Médaillons de récompenses : contenu centré dans les deux sens (une valeur sur deux lignes, « +1-2 paquets », ne décale plus ses voisins), lignes centrées entre elles */ .wsb-gains > div { justify-content: center; text-align: center; } .wsb-gains dt { text-align: center; } .wsb-gains dd { flex-wrap: wrap; justify-content: center; column-gap: .25em; row-gap: 0; line-height: 1.1; text-align: center; } /* Gains d'une question : petites tablettes à gradins (sans filet), valeur en gras, fond dégradé, léger contour laiton */ .qz-chip { --s: 2px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; font-size: 14px; font-weight: 700; background: linear-gradient(165deg, color-mix(in srgb, var(--brass) 24%, var(--card)), color-mix(in srgb, var(--brass) 7%, var(--card)) 75%); } .qz-chip .wc-piece, .qz-chip .gem { width: 1.35em; height: 1.35em; vertical-align: middle; } .qz-chip b { font-weight: 700; } /* Fin de partie : date et « Quiz terminé ! » sur une ligne, jauge du score, montants en gras */ .qz-endwrap .gq-final { max-width: none; } .gq-final-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 14px; margin: 0 0 10px; font-size: 13px; letter-spacing: .26em; text-transform: uppercase; color: var(--brass-ink); } .gq-final-title > span:first-child { font-weight: 400; color: var(--muted); } .gq-final-title > span:last-child { font-weight: 700; } .qz-sep { color: var(--brass); } .qz-egains .gq-gain-value { font-weight: 700; } .qz-gem5 b { font-weight: 700; } .qz-endwrap .gq-end-actions { gap: 12px; } .qz-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; } .qz-histlink { margin: 16px 0 0; text-align: center; font-size: 14px; } .qz-histlink a, .qzb-hist a { color: var(--brass-ink); } .qzb-hist { margin: 6px 0 0; text-align: center; font-size: 13px; } @media (max-width: 560px) { .gq-final-title { letter-spacing: .14em; } .qz-endwrap .gq-end-actions, .qz-actions { flex-direction: column; align-items: stretch; } .qz-endwrap .gq-end-actions .btn, .qz-actions .btn { width: 100%; justify-content: center; } } /* Pendant le quiz, le minuteur disparaît après la réponse sans que la barre ne bouge : il garde sa place */ .qz-timer.is-gone { visibility: hidden; } /* Corrections : deux niveaux. 1er niveau : numéro en gras | question → bonne réponse (sur plusieurs lignes si besoin), ta réponse si fausse | statut et gains. 2e niveau : explication sur une ligne tronquée (un clic la déplie) et lien vers l'article source. Fond en dégradé vert (bonne réponse) ou rouge (mauvaise). */ .qz-recap { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; } .qz-ri { --c: var(--err-ink); display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 8px 16px; align-items: start; padding: 14px 18px 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--c); background: linear-gradient(100deg, color-mix(in srgb, var(--c) 17%, var(--card)), var(--card) 78%); } .qz-ri.is-ok { --c: var(--r2); } .qz-ri-n { display: flex; flex-direction: column; align-items: center; gap: 5px; } .qz-ri-n b { font-size: 21px; font-weight: 700; line-height: 1; color: var(--c); font-variant-numeric: tabular-nums; } .qz-ri-n .gem { width: 18px; height: 18px; } .qz-ri-main { min-width: 0; } .qz-ri-q { margin: 0; line-height: 1.5; overflow-wrap: anywhere; } .qz-ri-qt { font-weight: 500; } .qz-ri-arrow { margin: 0 2px; color: var(--brass-ink); } .qz-ri-ans { font-weight: 700; color: var(--brass-ink); } .qz-ri-g { margin: 5px 0 0; font-size: 13.5px; color: var(--muted); overflow-wrap: anywhere; } .qz-ri-given { font-weight: 600; color: var(--err-ink); } .qz-ri-none { font-style: italic; } .qz-ri-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; min-width: 110px; } .qz-ri-r { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c); } .qz-ri-dp { margin: 0; font-size: 12.5px; color: var(--muted); } .qz-ri-dp.is-accepted { color: var(--r2); font-weight: 600; } .qz-ri-dp.is-refused { color: var(--err-ink); } .qz-ri-dbtn { font-size: 12.5px; } .qz-ri-dmsg { color: var(--err-ink); } .qz-ri-side .qz-fgain { margin: 0; justify-content: flex-end; gap: 6px; max-width: 280px; } .qz-ri-side .qz-chip { padding: 3px 9px; font-size: 13px; } .qz-ri-l2 { grid-column: 2 / -1; display: flex; align-items: baseline; gap: 6px 16px; min-width: 0; padding-top: 8px; border-top: 1px solid var(--line); } .qz-ri-inf { flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: var(--muted); cursor: pointer; } .qz-ri-inf:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; } .qz-ri-inf.is-open { white-space: normal; overflow: visible; line-height: 1.55; } .qz-ri-src { flex: none; margin: 0; font-size: 13px; } .qz-ri-src a { color: var(--brass-ink); } .qz-ri-l2:has(.qz-ri-inf.is-open) { align-items: flex-start; flex-wrap: wrap; } @media (max-width: 640px) { .qz-ri { grid-template-columns: 30px minmax(0, 1fr); padding: 12px 12px 10px 10px; } .qz-ri-side { grid-column: 2; grid-row: 2; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; text-align: left; gap: 6px 12px; } .qz-ri-side .qz-fgain { justify-content: flex-start; } .qz-ri-l2 { grid-column: 1 / -1; grid-row: 3; } } /* Page « Mon historique » */ .wrap.qh { max-width: 1100px; padding-top: clamp(28px, 5vw, 48px); padding-bottom: 72px; } .qh-layout { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: 32px; align-items: start; } .qh-days ul { list-style: none; margin: 0; padding: 0 4px 0 0; display: grid; gap: 8px; max-height: calc(100vh - 140px); overflow-y: auto; position: sticky; top: 96px; } .qh-day { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--line); color: var(--text); text-decoration: none; } .qh-day:hover, .qh-day:focus-visible { border-color: var(--brass); } .qh-day.is-current { border-color: var(--brass); background: color-mix(in srgb, var(--brass) 16%, var(--card)); } .qh-day-d { font-size: 14px; } .qh-day-s { font-size: 13px; font-weight: 700; color: var(--brass-ink); font-variant-numeric: tabular-nums; white-space: nowrap; } .qh-title { margin: 0 0 6px; text-align: center; font-weight: 300; font-size: 26px; letter-spacing: .08em; } .qh-title::first-letter { text-transform: uppercase; } .qh-sum { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 12px; margin: 14px 0 26px; } @media (max-width: 860px) { .qh-layout { grid-template-columns: minmax(0, 1fr); } .qh-days ul { position: static; max-height: 240px; } } /* Espace admin, page Quiz : lignes plus aérées, champs de même hauteur par défaut, import Excel */ .aq-grid { --aq-h: 64px; gap: 14px; } .aq-row { padding: 12px; gap: 10px; } .aq-c textarea { height: 100%; min-height: var(--aq-h); } .aq-c .ad-select { height: 100%; } .aq-c .ad-select-btn { height: 100%; min-height: var(--aq-h); } .aq-import { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 0 0 18px; padding: 14px 16px; background: var(--surface); border: 1px dashed var(--brass-line); } .aq-import-file { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 14px; } .aq-import-file input[type="file"] { font: inherit; font-size: 13px; color: var(--text); max-width: 100%; } .aq-import-file input[type="file"]::file-selector-button { margin-right: 10px; padding: 7px 14px; font: inherit; font-size: 13px; color: var(--text); background: none; border: 1px solid var(--brass-line); cursor: pointer; } .aq-import-tpl { font-size: 14px; color: var(--brass-ink); } .aq-import .hint { flex-basis: 100%; margin: 0; } .admin-quiz-ok { margin: 0 0 14px; } .admin-quiz-ok p { margin: 0; } .admin-quiz-ok ul { margin: 6px 0 0 18px; padding: 0; color: var(--text); } .admin-quiz-err { margin: 0 0 14px; } /* Montants en pièces : l'icône suit le nombre, à hauteur du texte (Pieces::amount, assets/pieces.js) */ .amt { white-space: nowrap; } .amt .wc-piece { width: 1.2em; height: 1.2em; vertical-align: -.22em; } /* Jauge de score (assets/gauge.js) : barre à gradins à DROITE seulement, contour plein, marge transparente, remplissage doré ; à gauche, sans gradin, un ticket collé de travers, à perforation (ligne de petits trous et deux encoches), qui porte le score. Utilisée pour le résultat du quiz (X / 10), son historique et la fin de WikiGéo (en %). */ .tg { --h: 46px; display: flex; align-items: center; width: min(100%, 600px); margin: 14px auto 8px; } .tg-bar { --s: 5px; --t: 1px; position: relative; isolation: isolate; flex: 1; min-width: 0; height: var(--h); margin-left: -12px; background: color-mix(in srgb, var(--brass) 11%, var(--card)); clip-path: polygon(0 0, calc(100% - 2*var(--s)) 0, calc(100% - 2*var(--s)) var(--s), calc(100% - var(--s)) var(--s), calc(100% - var(--s)) calc(2*var(--s)), 100% calc(2*var(--s)), 100% calc(100% - 2*var(--s)), calc(100% - var(--s)) calc(100% - 2*var(--s)), calc(100% - var(--s)) calc(100% - var(--s)), calc(100% - 2*var(--s)) calc(100% - var(--s)), calc(100% - 2*var(--s)) 100%, 0 100%); } .tg-bar::before { content: ""; position: absolute; inset: 0; z-index: 2; background: var(--brass); clip-path: polygon(evenodd, 0 0, calc(100% - 2*var(--s)) 0, calc(100% - 2*var(--s)) var(--s), calc(100% - var(--s)) var(--s), calc(100% - var(--s)) calc(2*var(--s)), 100% calc(2*var(--s)), 100% calc(100% - 2*var(--s)), calc(100% - var(--s)) calc(100% - 2*var(--s)), calc(100% - var(--s)) calc(100% - var(--s)), calc(100% - 2*var(--s)) calc(100% - var(--s)), calc(100% - 2*var(--s)) 100%, 0 100%, 0 0, var(--t) var(--t), calc(100% - 2*var(--s) - var(--t)) var(--t), calc(100% - 2*var(--s) - var(--t)) calc(var(--s) + var(--t)), calc(100% - var(--s) - var(--t)) calc(var(--s) + var(--t)), calc(100% - var(--s) - var(--t)) calc(2*var(--s) + var(--t)), calc(100% - var(--t)) calc(2*var(--s) + var(--t)), calc(100% - var(--t)) calc(100% - 2*var(--s) - var(--t)), calc(100% - var(--s) - var(--t)) calc(100% - 2*var(--s) - var(--t)), calc(100% - var(--s) - var(--t)) calc(100% - var(--s) - var(--t)), calc(100% - 2*var(--s) - var(--t)) calc(100% - var(--s) - var(--t)), calc(100% - 2*var(--s) - var(--t)) calc(100% - var(--t)), var(--t) calc(100% - var(--t)), var(--t) var(--t)); pointer-events: none; } .tg-fill { --s: 3px; position: absolute; z-index: 1; left: 7px; top: 6px; bottom: 6px; width: 0; background: linear-gradient(90deg, #b8862a, #f3d982); clip-path: polygon(0 0, calc(100% - 2*var(--s)) 0, calc(100% - 2*var(--s)) var(--s), calc(100% - var(--s)) var(--s), calc(100% - var(--s)) calc(2*var(--s)), 100% calc(2*var(--s)), 100% calc(100% - 2*var(--s)), calc(100% - var(--s)) calc(100% - 2*var(--s)), calc(100% - var(--s)) calc(100% - var(--s)), calc(100% - 2*var(--s)) calc(100% - var(--s)), calc(100% - 2*var(--s)) 100%, 0 100%); transition: width 1s var(--ease); } .tg-tkw { position: relative; z-index: 3; flex: none; rotate: -3.5deg; translate: 0 -2px; margin-block: 6px; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .45)); } .tg-tk { position: relative; width: 118px; height: 52px; display: grid; place-items: center; padding-right: 10px; text-align: center; font-weight: 700; color: #2e2204; background: linear-gradient(160deg, #f6e7ae, #d9b25a); -webkit-mask: radial-gradient(circle 2.9px at calc(100% - 8px) 6.5px, #0000 97%, #000) 0 0 / 100% 13px repeat-y, radial-gradient(circle 7px at 100% 0, #0000 97%, #000), radial-gradient(circle 7px at 100% 100%, #0000 97%, #000); -webkit-mask-composite: source-in; mask: radial-gradient(circle 2.9px at calc(100% - 8px) 6.5px, #0000 97%, #000) 0 0 / 100% 13px repeat-y, radial-gradient(circle 7px at 100% 0, #0000 97%, #000), radial-gradient(circle 7px at 100% 100%, #0000 97%, #000); mask-composite: intersect; } .tg-tk::after { content: ""; position: absolute; inset: 4px 14px 4px 4px; border: 1px solid rgba(46, 34, 4, .3); pointer-events: none; } .tg-tk b { position: relative; z-index: 1; font-size: 24px; line-height: 1; letter-spacing: .03em; font-variant-numeric: tabular-nums; } .tg-tk b i { font-style: normal; font-size: .62em; font-weight: 600; opacity: .75; } @media (max-width: 480px) { .tg-tk { width: 98px; height: 48px; } .tg-tk b { font-size: 20px; } .tg-bar { margin-left: -10px; } } /* ========================================================= Cadres à gradins, 2e génération (1.0.0) - GRANDS encarts de page (WikiSpeed, WikiGéo, Quiz et Missions de la page Jeux, fins de partie, Réserve de la page Paquets) : contour plein laiton de 4 px à gradins, filet intérieur léger, l'éventail du logo en filigrane (en bas, translucide ; --fan-img: none pour s'en passer) et texte courant plus clair. - Encarts MOYENS (cartes du quiz, récapitulatif des gains) : le même cadre, sans éventail. ========================================================= */ :root { --fan-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 400'%3E%3Cg opacity='.17'%3E%3Cpath d='M10 400A390 390 0 0 1 790 400M80 400A320 320 0 0 1 720 400M150 400A250 250 0 0 1 650 400M220 400A180 180 0 0 1 580 400M290 400A110 110 0 0 1 510 400M344 400A56 56 0 0 1 456 400M386.6 400A13.4 13.4 0 0 1 413.4 400M413.4 400L790 400M509.1 385.6L682.6 362.8M412.9 396.5L742.9 308.1M501.6 357.9L598.6 317.7M411.6 393.3L737.7 205M487.3 333L570.6 269.1M409.5 390.5L651 149M467 312.7L573.5 173.9M406.7 388.4L595 62.3M442.1 298.4L509.1 136.7M403.5 387.1L491.9 57.1M414.4 290.9L428.1 186.8M400 386.6L400 10M385.6 290.9L371.9 186.8M396.5 387.1L308.1 57.1M357.9 298.4L290.9 136.7M393.3 388.4L205 62.3M333 312.7L226.5 173.9M390.5 390.5L149 149M312.7 333L229.4 269.1M388.4 393.3L62.3 205M298.4 357.9L201.4 317.7M387.1 396.5L57.1 308.1M290.9 385.6L117.4 362.8M386.6 400L10 400' fill='none' stroke='%23b8923f' stroke-width='1.4' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M395.5 400A4.5 4.5 0 0 1 404.5 400ZM680.4 362.8a2.2 2.2 0 1 0 4.4 0a2.2 2.2 0 1 0-4.4 0M740.7 308.1a2.2 2.2 0 1 0 4.4 0a2.2 2.2 0 1 0-4.4 0M596.4 317.7a2.2 2.2 0 1 0 4.4 0a2.2 2.2 0 1 0-4.4 0M568.4 269.1a2.2 2.2 0 1 0 4.4 0a2.2 2.2 0 1 0-4.4 0M648.8 149a2.2 2.2 0 1 0 4.4 0a2.2 2.2 0 1 0-4.4 0M571.3 173.9a2.2 2.2 0 1 0 4.4 0a2.2 2.2 0 1 0-4.4 0M506.9 136.7a2.2 2.2 0 1 0 4.4 0a2.2 2.2 0 1 0-4.4 0M489.7 57.1a2.2 2.2 0 1 0 4.4 0a2.2 2.2 0 1 0-4.4 0M425.9 186.8a2.2 2.2 0 1 0 4.4 0a2.2 2.2 0 1 0-4.4 0M369.7 186.8a2.2 2.2 0 1 0 4.4 0a2.2 2.2 0 1 0-4.4 0M305.9 57.1a2.2 2.2 0 1 0 4.4 0a2.2 2.2 0 1 0-4.4 0M288.7 136.7a2.2 2.2 0 1 0 4.4 0a2.2 2.2 0 1 0-4.4 0M224.3 173.9a2.2 2.2 0 1 0 4.4 0a2.2 2.2 0 1 0-4.4 0M146.8 149a2.2 2.2 0 1 0 4.4 0a2.2 2.2 0 1 0-4.4 0M227.2 269.1a2.2 2.2 0 1 0 4.4 0a2.2 2.2 0 1 0-4.4 0M199.2 317.7a2.2 2.2 0 1 0 4.4 0a2.2 2.2 0 1 0-4.4 0M54.9 308.1a2.2 2.2 0 1 0 4.4 0a2.2 2.2 0 1 0-4.4 0M115.2 362.8a2.2 2.2 0 1 0 4.4 0a2.2 2.2 0 1 0-4.4 0' fill='%23b8923f'/%3E%3C/g%3E%3C/svg%3E"); } .wsb-frame, .gqb-frame, .gqj-frame, .gq-end-frame, .jxp-encart, .op-encart { --fan-img: var(--fan-line); --muted: color-mix(in srgb, var(--text) 82%, var(--card)); } /* contour plein (4 px) : la couche de fond laisse 4 px de laiton visibles */ .wsb-frame::before, .gqb-frame::before, .gqj-frame::before, .gq-end-frame::before, .jxp-encart::before { opacity: 1; } /* la couche de fond (un élément par encart) : fond + éventail ; son ::after dessine le filet intérieur léger, à gradins comme le contour, à 9 px du bord du cadre */ .jxp-ebg { position: absolute; inset: 1px; z-index: -1; overflow: hidden; pointer-events: none; clip-path: polygon(0 calc(2*var(--s)), var(--s) calc(2*var(--s)), var(--s) var(--s), calc(2*var(--s)) var(--s), calc(2*var(--s)) 0, calc(100% - 2*var(--s)) 0, calc(100% - 2*var(--s)) var(--s), calc(100% - var(--s)) var(--s), calc(100% - var(--s)) calc(2*var(--s)), 100% calc(2*var(--s)), 100% calc(100% - 2*var(--s)), calc(100% - var(--s)) calc(100% - 2*var(--s)), calc(100% - var(--s)) calc(100% - var(--s)), calc(100% - 2*var(--s)) calc(100% - var(--s)), calc(100% - 2*var(--s)) 100%, calc(2*var(--s)) 100%, calc(2*var(--s)) calc(100% - var(--s)), var(--s) calc(100% - var(--s)), var(--s) calc(100% - 2*var(--s)), 0 calc(100% - 2*var(--s))); } .wsb-bg, .gqb-bg, .gqj-bg, .gq-end-bg, .jxp-ebg { inset: 4px; box-shadow: none; } .wsb-bg::after, .gqb-bg::after, .gqj-bg::after, .gq-end-bg::after, .jxp-ebg::after { content: ""; position: absolute; inset: 5px; --t: 1px; background: color-mix(in srgb, var(--brass) 42%, transparent); clip-path: polygon(evenodd, 0 calc(2*var(--s)), var(--s) calc(2*var(--s)), var(--s) var(--s), calc(2*var(--s)) var(--s), calc(2*var(--s)) 0, calc(100% - 2*var(--s)) 0, calc(100% - 2*var(--s)) var(--s), calc(100% - var(--s)) var(--s), calc(100% - var(--s)) calc(2*var(--s)), 100% calc(2*var(--s)), 100% calc(100% - 2*var(--s)), calc(100% - var(--s)) calc(100% - 2*var(--s)), calc(100% - var(--s)) calc(100% - var(--s)), calc(100% - 2*var(--s)) calc(100% - var(--s)), calc(100% - 2*var(--s)) 100%, calc(2*var(--s)) 100%, calc(2*var(--s)) calc(100% - var(--s)), var(--s) calc(100% - var(--s)), var(--s) calc(100% - 2*var(--s)), 0 calc(100% - 2*var(--s)), 0 calc(2*var(--s)), var(--t) calc(2*var(--s) + var(--t)), calc(var(--s) + var(--t)) calc(2*var(--s) + var(--t)), calc(var(--s) + var(--t)) calc(var(--s) + var(--t)), calc(2*var(--s) + var(--t)) calc(var(--s) + var(--t)), calc(2*var(--s) + var(--t)) var(--t), calc(100% - 2*var(--s) - var(--t)) var(--t), calc(100% - 2*var(--s) - var(--t)) calc(var(--s) + var(--t)), calc(100% - var(--s) - var(--t)) calc(var(--s) + var(--t)), calc(100% - var(--s) - var(--t)) calc(2*var(--s) + var(--t)), calc(100% - var(--t)) calc(2*var(--s) + var(--t)), calc(100% - var(--t)) calc(100% - 2*var(--s) - var(--t)), calc(100% - var(--s) - var(--t)) calc(100% - 2*var(--s) - var(--t)), calc(100% - var(--s) - var(--t)) calc(100% - var(--s) - var(--t)), calc(100% - 2*var(--s) - var(--t)) calc(100% - var(--s) - var(--t)), calc(100% - 2*var(--s) - var(--t)) calc(100% - var(--t)), calc(2*var(--s) + var(--t)) calc(100% - var(--t)), calc(2*var(--s) + var(--t)) calc(100% - var(--s) - var(--t)), calc(var(--s) + var(--t)) calc(100% - var(--s) - var(--t)), calc(var(--s) + var(--t)) calc(100% - 2*var(--s) - var(--t)), var(--t) calc(100% - 2*var(--s) - var(--t)), var(--t) calc(2*var(--s) + var(--t))); pointer-events: none; } /* le filet léger EXTÉRIEUR : deux horizontales et deux verticales posées à 8 px du cadre, qui le dépassent aux quatre coins (croisement en « # ») */ .wsb-frame::after, .gqb-frame::after, .gqj-frame::after, .gq-end-frame::after, .jxp-encart::after, .op-encart::after { content: ""; position: absolute; inset: -18px; z-index: -3; pointer-events: none; overflow: visible; box-shadow: none; clip-path: none; --f: color-mix(in srgb, var(--brass) 55%, transparent); background: linear-gradient(var(--f), var(--f)) 0 10px / 100% 1px no-repeat, linear-gradient(var(--f), var(--f)) 0 calc(100% - 11px) / 100% 1px no-repeat, linear-gradient(var(--f), var(--f)) 10px 0 / 1px 100% no-repeat, linear-gradient(var(--f), var(--f)) calc(100% - 11px) 0 / 1px 100% no-repeat; } /* l'éventail du site remplace les rayons : en bas au centre, discret */ .wsb-bg { background: var(--fan-img) 50% 100% / min(100%, 760px) auto no-repeat, radial-gradient(ellipse 60% 90% at 78% 100%, color-mix(in srgb, var(--brass) 12%, transparent), transparent 70%), var(--card); } .gqb-bg { background: var(--fan-img) 50% 100% / min(100%, 760px) auto no-repeat, radial-gradient(ellipse 60% 90% at 12% 100%, color-mix(in srgb, var(--brass) 12%, transparent), transparent 70%), var(--card); } .gqj-bg { background: var(--fan-img) 50% 100% / min(100%, 720px) auto no-repeat, radial-gradient(ellipse 70% 100% at 90% 0%, color-mix(in srgb, var(--brass) 12%, transparent), transparent 70%), var(--card); } .gq-end-bg { background: var(--fan-img) 50% 100% / min(110%, 720px) auto no-repeat, radial-gradient(ellipse 70% 90% at 50% 100%, color-mix(in srgb, var(--brass) 12%, transparent), transparent 70%), var(--card); } .jxp-ebg { background: var(--fan-img) 50% 100% / min(100%, 720px) auto no-repeat, radial-gradient(ellipse 60% 90% at 20% 100%, color-mix(in srgb, var(--brass) 12%, transparent), transparent 70%), var(--card); } .wsb-burst, .gq-end-burst { display: none; } /* Réserve (page Paquets) : le cadre n'est plus rogné lui-même (pour laisser dépasser le filet extérieur) : son contour est dessiné par ::before ; le filet intérieur (op-inner) suit les mêmes gradins */ .op-encart { padding: 4px; background: none; clip-path: none; position: relative; isolation: isolate; } .op-encart::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--brass); clip-path: polygon(0 var(--s), calc(var(--s) / 2) var(--s), calc(var(--s) / 2) calc(var(--s) / 2), var(--s) calc(var(--s) / 2), var(--s) 0, calc(100% - var(--s)) 0, calc(100% - var(--s)) calc(var(--s) / 2), calc(100% - var(--s) / 2) calc(var(--s) / 2), calc(100% - var(--s) / 2) var(--s), 100% var(--s), 100% calc(100% - var(--s)), calc(100% - var(--s) / 2) calc(100% - var(--s)), calc(100% - var(--s) / 2) calc(100% - var(--s) / 2), calc(100% - var(--s)) calc(100% - var(--s) / 2), calc(100% - var(--s)) 100%, var(--s) 100%, var(--s) calc(100% - var(--s) / 2), calc(var(--s) / 2) calc(100% - var(--s) / 2), calc(var(--s) / 2) calc(100% - var(--s)), 0 calc(100% - var(--s))); } .op-inner::before { --s: 12px; inset: 5px; background: color-mix(in srgb, var(--brass) 45%, var(--card)); } .op-inner::after { --s: 12px; inset: 6px; background: var(--fan-img) 50% 100% / min(100%, 720px) auto no-repeat, var(--card); } /* Encarts moyens : contour plein de 4 px à gradins, filet intérieur léger, pas d'éventail */ .qz-card, .gq-gains { --s: 5px; --ring: var(--brass); position: relative; isolation: isolate; border: 0; box-shadow: none; clip-path: polygon(0 calc(2*var(--s)), var(--s) calc(2*var(--s)), var(--s) var(--s), calc(2*var(--s)) var(--s), calc(2*var(--s)) 0, calc(100% - 2*var(--s)) 0, calc(100% - 2*var(--s)) var(--s), calc(100% - var(--s)) var(--s), calc(100% - var(--s)) calc(2*var(--s)), 100% calc(2*var(--s)), 100% calc(100% - 2*var(--s)), calc(100% - var(--s)) calc(100% - 2*var(--s)), calc(100% - var(--s)) calc(100% - var(--s)), calc(100% - 2*var(--s)) calc(100% - var(--s)), calc(100% - 2*var(--s)) 100%, calc(2*var(--s)) 100%, calc(2*var(--s)) calc(100% - var(--s)), var(--s) calc(100% - var(--s)), var(--s) calc(100% - 2*var(--s)), 0 calc(100% - 2*var(--s))); background: linear-gradient(160deg, color-mix(in srgb, var(--brass) 9%, var(--card)), var(--card) 70%); } .qz-card::before, .gq-gains::before, .qz-card::after, .gq-gains::after { content: ""; position: absolute; z-index: -1; inset: 0; width: auto; height: auto; margin: 0; transform: none; --t: 4px; background: var(--ring); clip-path: polygon(evenodd, 0 calc(2*var(--s)), var(--s) calc(2*var(--s)), var(--s) var(--s), calc(2*var(--s)) var(--s), calc(2*var(--s)) 0, calc(100% - 2*var(--s)) 0, calc(100% - 2*var(--s)) var(--s), calc(100% - var(--s)) var(--s), calc(100% - var(--s)) calc(2*var(--s)), 100% calc(2*var(--s)), 100% calc(100% - 2*var(--s)), calc(100% - var(--s)) calc(100% - 2*var(--s)), calc(100% - var(--s)) calc(100% - var(--s)), calc(100% - 2*var(--s)) calc(100% - var(--s)), calc(100% - 2*var(--s)) 100%, calc(2*var(--s)) 100%, calc(2*var(--s)) calc(100% - var(--s)), var(--s) calc(100% - var(--s)), var(--s) calc(100% - 2*var(--s)), 0 calc(100% - 2*var(--s)), 0 calc(2*var(--s)), var(--t) calc(2*var(--s) + var(--t)), calc(var(--s) + var(--t)) calc(2*var(--s) + var(--t)), calc(var(--s) + var(--t)) calc(var(--s) + var(--t)), calc(2*var(--s) + var(--t)) calc(var(--s) + var(--t)), calc(2*var(--s) + var(--t)) var(--t), calc(100% - 2*var(--s) - var(--t)) var(--t), calc(100% - 2*var(--s) - var(--t)) calc(var(--s) + var(--t)), calc(100% - var(--s) - var(--t)) calc(var(--s) + var(--t)), calc(100% - var(--s) - var(--t)) calc(2*var(--s) + var(--t)), calc(100% - var(--t)) calc(2*var(--s) + var(--t)), calc(100% - var(--t)) calc(100% - 2*var(--s) - var(--t)), calc(100% - var(--s) - var(--t)) calc(100% - 2*var(--s) - var(--t)), calc(100% - var(--s) - var(--t)) calc(100% - var(--s) - var(--t)), calc(100% - 2*var(--s) - var(--t)) calc(100% - var(--s) - var(--t)), calc(100% - 2*var(--s) - var(--t)) calc(100% - var(--t)), calc(2*var(--s) + var(--t)) calc(100% - var(--t)), calc(2*var(--s) + var(--t)) calc(100% - var(--s) - var(--t)), calc(var(--s) + var(--t)) calc(100% - var(--s) - var(--t)), calc(var(--s) + var(--t)) calc(100% - 2*var(--s) - var(--t)), var(--t) calc(100% - 2*var(--s) - var(--t)), var(--t) calc(2*var(--s) + var(--t))); } .qz-card::after, .gq-gains::after { inset: 9px; --t: 1px; background: color-mix(in srgb, var(--ring) 42%, transparent); } .qz-fb.is-ok { --ring: var(--r2); box-shadow: none; } .qz-fb.is-bad { --ring: var(--err-ink); box-shadow: none; } /* Mobile : pas de filet extérieur autour des grands encarts (il serait rogné par le bord de l'écran) */ @media (max-width: 640px) { .wsb-frame::after, .gqb-frame::after, .gqj-frame::after, .gq-end-frame::after, .jxp-encart::after, .op-encart::after { display: none; } } /* Réserve (page Paquets), plus lisible : fond uni en haut, l'éventail n'apparaît qu'en pied (fondu vers le haut), textes un peu plus grands et plus clairs */ .op-inner::after { background: linear-gradient(to bottom, var(--card) 0, var(--card) 58%, transparent 100%), var(--fan-img) 50% 100% / min(110%, 800px) auto no-repeat, var(--card); } .op-encart { font-size: 14px; --muted: color-mix(in srgb, var(--text) 86%, var(--card)); } .op-encart .op-m-name { font-size: 14px; } .op-encart .op-m-count { font-size: 13px; } .op-encart .op-label { font-size: 12px; color: var(--text); } .op-encart .op-foot { padding-top: 22px; } /* Atelier : fabrique de paquets spéciaux (une carte par recette : thème, effectif, coût en joyaux et en pièces, bouton) */ .atl-recipes { list-style: none; margin: 8px 0 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; text-align: left; } .atl-recipe { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 14px; border: 1px solid var(--brass-line); background: color-mix(in srgb, var(--brass) 5%, var(--card)); transition: border-color .25s ease, background .25s ease; } .atl-recipe.is-ready { border-color: var(--brass); } .atl-recipe.is-made { animation: atl-made .9s ease; } @keyframes atl-made { 0% { background: color-mix(in srgb, var(--brass) 38%, var(--card)); } 100% { background: color-mix(in srgb, var(--brass) 5%, var(--card)); } } .atl-r-name { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: .02em; line-height: 1.25; } .atl-r-about { margin: 0; flex: 1 1 auto; font-size: 12.5px; line-height: 1.45; color: var(--muted); text-wrap: pretty; } .atl-r-cards { margin: 0; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .atl-r-cards b { color: var(--brass-ink); font-variant-numeric: tabular-nums; letter-spacing: 0; } .atl-r-cost { margin: 2px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-variant-numeric: tabular-nums; } .atl-r-gem, .atl-r-piece { display: inline-flex; align-items: center; gap: 5px; font-size: 15px; } .atl-r-gem .gem { width: 24px; height: 24px; flex: none; } .atl-r-piece .wc-piece { width: 1.25em; height: 1.25em; flex: none; } .atl-r-gem b, .atl-r-piece b { font-weight: 600; } .atl-r-gem.is-short b, .atl-r-piece.is-short b { color: var(--err-ink); } .atl-craft-btn { align-self: stretch; margin-top: 2px; } .atl-r-own { margin: 0; font-size: 12.5px; color: var(--muted); text-align: center; } .atl-r-own [data-own] { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; } .atl-r-msg { margin: 0; min-height: 0; font-size: 12.5px; text-align: center; color: var(--brass-ink); } .atl-r-msg:empty { display: none; } .atl-r-msg.is-error { color: var(--err-ink); } @media (max-width: 860px) { .atl-recipes { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .atl-recipes { grid-template-columns: minmax(0, 1fr); } } /* Atelier : la rosace des joyaux et des 15 paquets thématiques (AtelierView::map), le panneau de recettes qui s'ouvre sous elle (l'écran y défile quand on touche un joyau ou un paquet) et la liste complète des recettes (assets/atelier.js). Tout est posé directement sur la page, sans cadre. */ .atl-recipes[hidden], .atl-row[hidden], .atl-sec[hidden] { display: none; } .atl-board { display: flex; flex-direction: column; align-items: stretch; gap: 14px; max-width: 1040px; margin: 0 auto 40px; } .atl-board .atl-edesc { align-self: center; text-align: center; max-width: 66ch; } .atl-stage { width: 100%; max-width: 980px; margin: 4px auto 0; } .atl-panel { scroll-margin-top: 84px; outline: none; min-height: 120px; margin-top: 6px; } .atl-panel .atl-recipes { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; } .atl-group.is-one .atl-recipes { grid-template-columns: minmax(0, 460px); justify-content: center; } .atl-who { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 14px; font-size: 15px; text-align: center; } .atl-who .gem { width: 34px; height: 34px; } .atl-who b { font-weight: 600; letter-spacing: .04em; } .atl-who span { color: var(--muted); } .atl-group { margin-top: 14px; } .atl-group .jxp-label { margin-bottom: 12px; letter-spacing: .2em; } @media (max-width: 640px) { .atl-panel .atl-recipes { grid-template-columns: minmax(0, 1fr); } } .am-svg { width: 100%; height: auto; display: block; overflow: visible; } .am-svg, .am-svg * { -webkit-user-select: none; user-select: none; } /* rien de la rosace (joyaux, paquets, noms, nombres) ne se sélectionne comme du texte, même avec des clics répétés */ .am-svg text { fill: var(--text); font-family: inherit; } .am-decor { fill: none; stroke: var(--brass); stroke-width: 1; opacity: .2; } .am-decor-hub { opacity: .5; } .am-edge { stroke: var(--brass); stroke-width: 1.5; opacity: .35; fill: none; stroke-linecap: round; } .am-hub { fill: var(--card); stroke: var(--brass); stroke-width: 2; } .am-svg .am-cnt { fill: var(--brass-ink); font-weight: 600; font-variant-numeric: tabular-nums; } .am-svg .am-mut { fill: var(--muted); } .am-lnk { fill: none; stroke-width: 2.4; stroke-dasharray: 11 9; stroke-linecap: round; opacity: .8; transition: opacity .3s ease; } .am-svg.has-sel .am-lnk { opacity: .2; } .am-svg .am-lnk.is-on { opacity: 1; animation: am-dash 1.3s linear infinite; } @keyframes am-dash { to { stroke-dashoffset: -40; } } .am-node, .am-gem { cursor: var(--cur-hand); outline: none; transition: opacity .3s ease; } .am-svg.has-sel .am-node:not(.is-on), .am-svg.has-sel .am-gem:not(.is-on) { opacity: .5; } .am-halo { opacity: .5; transition: opacity .3s ease; } .am-node.is-on .am-halo, .am-gem.is-on .am-halo { opacity: 1; } .am-ring { fill: var(--card); stroke: var(--brass); stroke-width: 2.2; } .am-ring-gem { stroke-width: 2; } .am-ring2 { fill: none; stroke: var(--brass); stroke-width: 2.2; pointer-events: none; } .am-node.is-main .am-ring2, .am-gem.is-main .am-ring { stroke: var(--text); stroke-width: 3.6; } .am-node:focus-visible .am-ring2, .am-gem:focus-visible .am-ring { stroke: var(--text); stroke-width: 4; } .am-svg .am-lbl { font-size: 16px; pointer-events: none; } .am-svg .am-lbl-m { display: none; } @media (max-width: 700px) { /* téléphone : la rosace prend toute la largeur de l'écran, et les 15 noms (AtelierView::mobileLabel : plus grands, sur deux lignes au besoin, écartés des ronds) restent affichés */ .atl-stage .am-svg { width: 100vw; max-width: none; margin-inline: calc(50% - 50vw); } .am-svg .am-lbl { display: none; } .am-svg .am-lbl-m { display: inline; font-size: 27px; pointer-events: none; } .am-svg .am-node.is-main .am-lbl-m { fill: var(--brass-ink); font-weight: 600; } } /* moins d'animations (boot.js, docs/animations.md) */ :where(:root[data-motion="reduce"]) .am-svg .am-lnk.is-on { animation: none; } .atl-craft-btn.is-armed { filter: brightness(1.18); animation: atl-armed 1s ease-in-out infinite; } /* armé : un second clic fabrique (assets/atelier.js) */ @keyframes atl-armed { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--brass) 38%, transparent); } } /* moins d'animations (boot.js, docs/animations.md) */ :where(:root[data-motion="reduce"]) .atl-craft-btn.is-armed { animation: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brass) 38%, transparent); } .at-gem { cursor: var(--cur-hand); transition: border-color .25s ease, background .25s ease; } .at-gem:hover, .at-gem.is-cur { border-color: var(--gc); background: linear-gradient(180deg, color-mix(in srgb, var(--gc) 34%, var(--card)), color-mix(in srgb, var(--gc) 8%, var(--card)) 85%); } /* Atelier : liste complète des recettes (dépliant), une ligne par recette */ .atl-all { margin-top: 30px; border: 1px solid var(--brass-line); background: color-mix(in srgb, var(--brass) 4%, var(--card)); } .atl-all > summary { list-style: none; display: flex; align-items: center; gap: 14px; padding: 15px 22px; cursor: var(--cur-hand); font-size: 13px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--brass-ink); } .atl-all > summary::-webkit-details-marker { display: none; } .atl-all > summary::before { content: ""; width: 8px; height: 8px; flex: none; background: var(--brass); rotate: 45deg; transition: rotate .3s ease; } .atl-all[open] > summary::before { rotate: 135deg; } .atl-all[open] > summary { border-bottom: 1px solid var(--brass-line); } .atl-all > summary:focus-visible { outline: 2px solid var(--brass); outline-offset: -2px; } .atl-all-in { padding: 18px; } .atl-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 18px; } .atl-chip { appearance: none; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border: 1px solid var(--brass-line); background: transparent; color: var(--text); font: 500 12px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; cursor: var(--cur-hand); } .atl-chip:not(:has(.gem)) { padding-left: 14px; } .atl-chip .gem { width: 22px; height: 22px; } .atl-chip:hover { border-color: var(--brass); } .atl-chip.is-cur { border-color: var(--brass); background: color-mix(in srgb, var(--brass) 16%, var(--card)); } .atl-list { display: grid; border: 1px solid var(--brass-line); } .atl-sec { display: flex; align-items: center; gap: 12px; padding: 9px 16px; background: color-mix(in srgb, var(--brass) 14%, var(--card)); border-top: 1px solid var(--brass-line); font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--brass-ink); font-weight: 500; } .atl-sec:first-child { border-top: 0; } .atl-sec .gem { width: 26px; height: 26px; } .atl-row { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto 86px auto; align-items: center; gap: 6px 16px; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--card); transition: background .25s ease; } .atl-row.is-ready:hover { background: color-mix(in srgb, var(--brass) 8%, var(--card)); } .atl-row.is-made { animation: atl-made .9s ease; } .atl-sig { display: flex; align-items: center; justify-content: center; } .atl-sig .gem { width: 34px; height: 34px; } .atl-sig .gem + .gem { margin-left: -10px; } .atl-row .atl-r-name { font-size: 15px; } .atl-row .atl-r-about { margin-top: 3px; } .atl-row .atl-r-cost { margin: 0; flex-wrap: nowrap; gap: 4px 12px; } .atl-row .atl-craft-btn { align-self: center; margin: 0; } .atl-row .atl-r-msg { grid-column: 2 / -1; text-align: left; } .atl-row-own { display: grid; gap: 5px; justify-items: center; } .atl-stock { display: inline-flex; align-items: center; gap: 9px; padding: 5px 14px 5px 11px; border: 1px solid var(--brass-line); background: color-mix(in srgb, var(--brass) 9%, var(--card)); } .atl-stock::before { content: ""; width: 8px; height: 8px; flex: none; background: var(--brass); rotate: 45deg; } .atl-stock b { font-size: 19px; font-weight: 600; line-height: 1; color: var(--brass-ink); font-variant-numeric: tabular-nums; } .atl-stock b.is-bump { animation: atl-bump .6s ease; } @keyframes atl-bump { 0% { transform: scale(1); } 40% { transform: scale(1.5); } 100% { transform: scale(1); } } .atl-row-own small { font-size: 11px; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; } @media (max-width: 820px) { .atl-row { grid-template-columns: 60px minmax(0, 1fr) auto; } .atl-row .atl-r-cost { grid-column: 2; } .atl-row-own { grid-column: 2; grid-row: 3; justify-items: start; } .atl-row .atl-craft-btn { grid-column: 3; grid-row: 2 / span 2; } .atl-row .atl-r-msg { grid-column: 1 / -1; text-align: center; } } /* moins d'animations (boot.js, docs/animations.md) */ :where(:root[data-motion="reduce"]) .atl-row.is-made, :where(:root[data-motion="reduce"]) .atl-stock b.is-bump { animation: none; } /* Page Paquets : zone « Paquets thématiques » du carrousel. Les quinze thèmes (un bouton par recette de l'Atelier, avec le nombre de paquets du joueur) sont DANS l'encart Réserve : ils prennent la place du stock, du compteur doré et du compteur diamanté (pack.js pose data-zone sur #op-encart). Tuiles à angles en gradins et filet laiton, losange du nombre de paquets à cheval sur le bord haut ; la tuile choisie (celle qu'ouvre le paquet) est teintée de laiton, double filet et losange plein. */ .op-encart[data-zone="thematic"] .op-zone--stock, .op-encart[data-zone="thematic"] .op-zone--gold, .op-encart[data-zone="thematic"] .op-zone--diamond { display: none; } .op-encart .op-zone--themes { gap: 14px; padding: 6px 0 4px; } .op-encart .op-zone--themes[hidden] { display: none; } .op-encart .op-zone--themes { grid-area: themes; } .th-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); } .th-total { font-size: 11.5px; letter-spacing: .06em; color: var(--muted); font-variant-numeric: tabular-nums; } .th-list { list-style: none; margin: 0; padding: 8px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 10px; } @container (min-width: 480px) { .th-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @container (min-width: 600px) { .th-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .th-item { --s: 5px; appearance: none; position: relative; isolation: isolate; width: 100%; min-height: 62px; display: grid; place-items: center; padding: 16px 10px 11px; border: 0; background: none; font: 500 11px/1.3 var(--font); letter-spacing: .1em; text-transform: uppercase; text-align: center; text-wrap: balance; color: var(--text); cursor: var(--cur-hand); transition: color .25s ease; -webkit-tap-highlight-color: transparent; } .th-item::before, .th-item::after { content: ""; position: absolute; z-index: -1; transition: background .25s ease; } .th-item::before { inset: 0; background: var(--brass-line); } .th-item::after { inset: 1px; --s: 4.5px; background: var(--card); } .th-item:hover:not(:disabled):not(.is-sel)::after { background: color-mix(in srgb, var(--brass) 10%, var(--card)); } .th-item:hover:not(:disabled):not(.is-sel)::before { background: var(--brass); } .th-item:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; } .th-item.is-sel { color: var(--brass-ink); } .th-item.is-sel::before { background: var(--brass); } .th-item.is-empty:not(.is-sel) { color: var(--muted); } .th-item:disabled { cursor: var(--cur-blocked); opacity: .6; } .th-name { display: block; } /* Losange du nombre de paquets, à cheval sur le bord haut de la tuile (le chiffre reste droit, seul le fond tourne) */ .th-n { position: absolute; z-index: 1; top: -10px; left: calc(50% - 10px); width: 20px; height: 20px; display: grid; place-items: center; font-size: 10.5px; font-weight: 500; line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--brass-ink); } .th-n::before { content: ""; position: absolute; inset: 1px; z-index: -1; rotate: 45deg; background: var(--card); border: 1px solid var(--brass); transition: background .25s ease; } .th-item.is-sel .th-n { color: var(--on-brass); } .th-item.is-sel .th-n::before { background: var(--brass-ink); border-color: var(--brass-ink); } .th-item.is-empty:not(.is-sel) .th-n { color: var(--muted); } .th-item.is-empty:not(.is-sel) .th-n::before { border-color: var(--brass-line); } .th-about { margin: 0; min-height: 2.8em; display: grid; align-items: center; text-align: center; font-size: 12.5px; line-height: 1.4; color: var(--muted); text-wrap: balance; } .th-link { justify-self: center; font-size: 12.5px; color: var(--brass-ink); text-decoration: none; border-bottom: 1px solid var(--brass-line); } .th-link:hover { border-bottom-color: var(--brass-ink); } /* Fenêtre « Améliorer le style » / « Rétrograder le style » (fiche d'une carte de la collection, card-modal.js) : tout est centré ; la carte actuelle et, une fois un style choisi, la carte après le changement (même taille), puis les styles possibles OU, sous les cartes, le bouton principal « Confirmer ». */ .modal-box.st-box { display: block; width: min(640px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; padding: clamp(24px, 4vw, 36px); text-align: center; justify-items: stretch; } .st-box h2 { margin: 0 0 6px; font-size: 20px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; } .st-body { display: flex; flex-direction: column; align-items: center; gap: 18px; } .st-name { margin: 0; font-size: 17px; font-weight: 500; } .st-box .st-cards { display: flex; justify-content: center; align-items: center; gap: clamp(8px, 3vw, 22px); width: 100%; } /* dans la fenêtre de changement de style seulement : « .st-cards » est aussi la grille des cartes des Paramètres */ .st-col { flex: none; width: clamp(130px, 36vw, 230px); } .st-col[hidden], .st-arrow[hidden], .st-confirm[hidden], .st-choices[hidden] { display: none; } .st-label { margin: 0 0 10px; font-size: 11.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .st-col .cards.collection { display: block; width: 100%; margin: 0; padding: 0; } .st-col .card { width: 100%; cursor: var(--cur-default); } .st-col .card:hover { translate: none; } .st-arrow { flex: none; display: flex; align-items: center; padding-top: 28px; color: var(--brass); } .st-arrow svg { width: 26px; height: 26px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; } .st-choices { display: flex; flex-direction: column; gap: 10px; width: min(380px, 100%); } .atl-choose-btn { appearance: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 12px 16px; border: 1px solid var(--brass-line); background: var(--card); color: var(--text); font: inherit; font-size: 13px; cursor: var(--cur-hand); transition: border-color .25s ease, background .25s ease; } .atl-choose-btn:hover, .atl-choose-btn:focus-visible { border-color: var(--brass); background: color-mix(in srgb, var(--brass) 10%, var(--card)); } .atl-choose-label { letter-spacing: .02em; } .atl-choose-cost { flex: none; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--brass-ink); font-variant-numeric: tabular-nums; } .atl-choose-cost .wc-piece { width: 1.3em; height: 1.3em; flex: none; } .st-confirm { display: flex; flex-direction: column; align-items: center; gap: 12px; } .st-what { margin: 0; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; } .st-what b { color: var(--brass-ink); font-variant-numeric: tabular-nums; } .st-what .wc-piece { width: 1.25em; height: 1.25em; flex: none; } .st-msg { margin: 0; min-height: 1.4em; font-size: 13.5px; color: var(--muted); } .st-msg.is-error { color: var(--err-ink); } .st-msg:empty { display: none; } .st-none { margin: 0; color: var(--muted); font-size: 14px; } @media (max-width: 520px) { .st-label { min-height: 2.6em; display: flex; align-items: flex-end; justify-content: center; } .st-arrow { padding-top: 40px; } } /* >>> STYLES DE THÈME (région générée : python design/.cache/build-th.py) >>> */ /* ========================================================================================================================================================================== STYLES DE THÈME : les douze styles des paquets thématiques (src/Styles.php, THEME_STYLES). Une carte à style de thème a le même format que les autres (5 × 7) mais son propre habillage : .card-front.th.th-