/* General Sans (Fontshare, licence ITF Free Font License : usage commercial autorisé), hébergée sur le site */ @font-face { font-family: 'General Sans'; src: url('assets/fonts/general-sans-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'General Sans'; src: url('assets/fonts/general-sans-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* Crous ou Prison : couche « mobile d'abord » (chargée après tailwind.css). Remplace Font Awesome (253 Ko) par 4 pictogrammes SVG intégrés. Icônes : Font Awesome Free 6.4.0 by @fontawesome (https://fontawesome.com), licence CC BY 4.0 (https://fontawesome.com/license/free). */ .fas, .fa-brands { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background-color: currentColor; -webkit-mask: var(--fa) center / contain no-repeat; mask: var(--fa) center / contain no-repeat; } .fa-lock { --fa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M144 144v48H304V144c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192V144C80 64.5 144.5 0 224 0s144 64.5 144 144v48h16c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V256c0-35.3 28.7-64 64-64H80z'/%3E%3C/svg%3E"); } .fa-paper-plane { --fa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480V396.4c0-4 1.5-7.8 4.2-10.7L331.8 202.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8 17.7 316.6C7.1 311.3 .3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z'/%3E%3C/svg%3E"); } .fa-share-alt { --fa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M352 224c53 0 96-43 96-96s-43-96-96-96s-96 43-96 96c0 4 .2 8 .7 11.9l-94.1 47C145.4 170.2 121.9 160 96 160c-53 0-96 43-96 96s43 96 96 96c25.9 0 49.4-10.2 66.6-26.9l94.1 47c-.5 3.9-.7 7.8-.7 11.9c0 53 43 96 96 96s96-43 96-96s-43-96-96-96c-25.9 0-49.4 10.2-66.6 26.9l-94.1-47c.5-3.9 .7-7.8 .7-11.9s-.2-8-.7-11.9l94.1-47C302.6 213.8 326.1 224 352 224z'/%3E%3C/svg%3E"); } .fa-tiktok { --fa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M448%2C209.91a210.06%2C210.06%2C0%2C0%2C1-122.77-39.25V349.38A162.55%2C162.55%2C0%2C1%2C1%2C185%2C188.31V278.2a74.62%2C74.62%2C0%2C1%2C0%2C52.23%2C71.18V0l88%2C0a121.18%2C121.18%2C0%2C0%2C0%2C1.86%2C22.17h0A122.18%2C122.18%2C0%2C0%2C0%2C381%2C102.39a121.43%2C121.43%2C0%2C0%2C0%2C67%2C20.14Z'/%3E%3C/svg%3E"); } .fa-instagram { --fa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z'/%3E%3C/svg%3E"); } .fa-discord { --fa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M524.531%2C69.836a1.5%2C1.5%2C0%2C0%2C0-.764-.7A485.065%2C485.065%2C0%2C0%2C0%2C404.081%2C32.03a1.816%2C1.816%2C0%2C0%2C0-1.923.91%2C337.461%2C337.461%2C0%2C0%2C0-14.9%2C30.6%2C447.848%2C447.848%2C0%2C0%2C0-134.426%2C0%2C309.541%2C309.541%2C0%2C0%2C0-15.135-30.6%2C1.89%2C1.89%2C0%2C0%2C0-1.924-.91A483.689%2C483.689%2C0%2C0%2C0%2C116.085%2C69.137a1.712%2C1.712%2C0%2C0%2C0-.788.676C39.068%2C183.651%2C18.186%2C294.69%2C28.43%2C404.354a2.016%2C2.016%2C0%2C0%2C0%2C.765%2C1.375A487.666%2C487.666%2C0%2C0%2C0%2C176.02%2C479.918a1.9%2C1.9%2C0%2C0%2C0%2C2.063-.676A348.2%2C348.2%2C0%2C0%2C0%2C208.12%2C430.4a1.86%2C1.86%2C0%2C0%2C0-1.019-2.588%2C321.173%2C321.173%2C0%2C0%2C1-45.868-21.853%2C1.885%2C1.885%2C0%2C0%2C1-.185-3.126c3.082-2.309%2C6.166-4.711%2C9.109-7.137a1.819%2C1.819%2C0%2C0%2C1%2C1.9-.256c96.229%2C43.917%2C200.41%2C43.917%2C295.5%2C0a1.812%2C1.812%2C0%2C0%2C1%2C1.924.233c2.944%2C2.426%2C6.027%2C4.851%2C9.132%2C7.16a1.884%2C1.884%2C0%2C0%2C1-.162%2C3.126%2C301.407%2C301.407%2C0%2C0%2C1-45.89%2C21.83%2C1.875%2C1.875%2C0%2C0%2C0-1%2C2.611%2C391.055%2C391.055%2C0%2C0%2C0%2C30.014%2C48.815%2C1.864%2C1.864%2C0%2C0%2C0%2C2.063.7A486.048%2C486.048%2C0%2C0%2C0%2C610.7%2C405.729a1.882%2C1.882%2C0%2C0%2C0%2C.765-1.352C623.729%2C277.594%2C590.933%2C167.465%2C524.531%2C69.836ZM222.491%2C337.58c-28.972%2C0-52.844-26.587-52.844-59.239S193.056%2C219.1%2C222.491%2C219.1c29.665%2C0%2C53.306%2C26.82%2C52.843%2C59.239C275.334%2C310.993%2C251.924%2C337.58%2C222.491%2C337.58Zm195.38%2C0c-28.971%2C0-52.843-26.587-52.843-59.239S388.437%2C219.1%2C417.871%2C219.1c29.667%2C0%2C53.307%2C26.82%2C52.844%2C59.239C470.715%2C310.993%2C447.538%2C337.58%2C417.871%2C337.58Z'/%3E%3C/svg%3E"); } .fas.fa-lock, .fas.fa-paper-plane, .fas.fa-share-alt { margin-right: .35em; } /* ===================================================================== MOBILE D'ABORD : l'ancien design, remis d'aplomb pour le téléphone ===================================================================== */ /* ---- Socle tactile (tous écrans) ---- */ html, body { overscroll-behavior-y: contain; } /* plus de « tirer pour rafraîchir » en pleine partie */ body { -webkit-tap-highlight-color: transparent; min-height: 100vh; min-height: 100dvh; } button, [role="button"], a, [onclick], .game-card, label { touch-action: manipulation; } .portal-cta, .portal-contrib { display: none; } /* réservés aux téléphones, cf. plus bas */ /* Bouton son (ligne score / vies du jeu) */ .sound-btn { width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; flex-shrink: 0; cursor: pointer; } .sound-btn:active { transform: scale(.94); } /* Écrans tactiles : pas de survol collant après un tap */ @media (hover: none) { .glass-btn:hover { transform: none !important; box-shadow: 0 4px 15px rgba(0,0,0,.2) !important; background: rgba(255,255,255,.08); } .glass-btn:hover::before { width: 0; height: 0; } .glass-btn:hover span { animation: none; } .game-card:hover .game-card-inner { box-shadow: none; } .game-card:hover .text-5xl, .game-card:hover .bg-purple-500\/20 { animation: none; } #kbd-hint { display: none; } /* « touches C/P » : inutile sans clavier */ } /* ---- Téléphones (≤ 640 px) ---- */ @media (max-width: 640px) { /* Effets coûteux retirés : fonds unis équivalents */ .aurora { animation: none !important; } .vhs-effect { display: none !important; } .glitch-text { animation: none !important; } .glitch-text::before, .glitch-text::after { display: none !important; } .glass { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 8px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05); } /* Lisibilité : petits textes relevés, gris à contraste AA */ .text-\[9px\] { font-size: 11px !important; } .text-\[10px\] { font-size: 11.5px !important; } .text-gray-500 { color: #8b93a1; } .text-white\/40 { color: rgba(255,255,255,.64); } /* En-tête : plein, lisible, cibles de 44 px */ header.fixed { height: calc(64px + env(safe-area-inset-top)) !important; padding-top: env(safe-area-inset-top); background: rgba(5,6,10,.95) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,.07); } .glass-btn { height: 44px; min-width: 44px; } /* Éléments flottants : bandeau seulement sur l'accueil, « Contribuer » descend dans la page */ .floating-contrib { display: none !important; } .agnes-trigger { width: 36px; height: 36px; font-size: 16px; opacity: .6; bottom: calc(44px + env(safe-area-inset-bottom)); } .streamer-ticker { height: calc(32px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); } body:not(:has(#view-portal.active)) .streamer-ticker { display: none !important; } /* ===== ACCUEIL : un geste principal, puis le reste dans l'ordre ===== */ #view-portal { gap: 12px; align-items: center; } #view-portal > *, #view-portal .game-card-crous, #view-portal .game-card-linkedin { width: 100%; max-width: 440px; flex-shrink: 0; } #view-portal .portal-games { display: contents; } /* les deux cartes deviennent des éléments de la colonne */ #view-portal h1 { order: 1; font-size: clamp(1.7rem, 8.6vw, 2.25rem) !important; line-height: 1.05; margin: 0 0 2px !important; } #view-portal h1 br { display: none; } #portal-title-prefix::after { content: " "; } /* Carte principale = bouton JOUER */ #view-portal .game-card-crous { order: 2; } #view-portal .game-card-crous .game-card-inner { height: auto; min-height: 0; padding: 22px 18px 18px; gap: 6px; background: linear-gradient(155deg, rgba(37,99,235,.30) 0%, rgba(10,12,24,.92) 52%, rgba(220,38,38,.20) 100%); border-color: rgba(96,165,250,.5); } #view-portal .game-card-crous .text-4xl { font-size: 2.6rem; margin-bottom: 2px; } #view-portal .game-card-crous h2 { font-size: 1.7rem; margin: 0; } #view-portal #desc-crous { display: block; font-size: .95rem; color: rgba(255,255,255,.74); margin: 2px 0 0; } .portal-cta { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 58px; margin-top: 12px; border-radius: 16px; font-weight: 900; font-size: 1.3rem; letter-spacing: .05em; color: #fff; background: linear-gradient(180deg, #3b82f6, #1d4ed8); box-shadow: 0 10px 28px rgba(37,99,235,.45), inset 0 1px 0 rgba(255,255,255,.28); } .portal-cta::after { content: "\25B6"; font-size: .7em; } #view-portal .game-card-crous:active .portal-cta { filter: brightness(1.12); transform: scale(.985); } /* Daily et Duel : lignes compactes */ #view-portal .portal-daily, #view-portal .portal-duel { margin: 0 !important; padding: 0 !important; } #view-portal .portal-daily { order: 3; } #view-portal .portal-duel { order: 4; } #view-portal .portal-daily .game-card-inner, #view-portal .portal-duel .game-card-inner { flex-direction: row !important; flex-wrap: nowrap !important; align-items: center; justify-content: space-between !important; padding: 12px 14px !important; gap: 12px !important; min-height: 72px; border-radius: 18px; } #view-portal .portal-daily .game-card-inner, #view-portal .portal-duel .game-card-inner { text-align: left; } #view-portal .portal-daily .game-card-inner > .flex, #view-portal .portal-duel .game-card-inner > .flex { gap: 12px; min-width: 0; text-align: left; } #view-portal .portal-daily .text-5xl, #view-portal .portal-duel .text-5xl { font-size: 2rem; line-height: 1; } #view-portal .portal-daily h2, #view-portal .portal-duel h2 { font-size: .98rem; letter-spacing: .01em; } #view-portal .portal-daily p, #view-portal .portal-duel p { font-size: .8rem; line-height: 1.25; margin-top: 2px; } #view-portal #daily-cta-pill, #view-portal #badge-duel { flex-shrink: 0; padding: 7px 12px; font-size: 11px; } .daily-pill-long { display: none; } .glass-btn > span:not(.font-bold) { font-size: 1.25rem; line-height: 1; } /* Partage du jeu juste sous les actions */ #view-portal .portal-share { order: 5; margin: 0; padding: 0; } /* LinkedIn ou Interpol : verrouillé, discret */ #view-portal .game-card-linkedin { order: 6; } #view-portal .game-card-linkedin .game-card-inner { height: auto; padding: 11px 14px; flex-direction: row; gap: 10px; border-radius: 14px; } #view-portal .game-card-linkedin .text-4xl { font-size: 1.15rem; margin: 0; } #view-portal .game-card-linkedin h2 { font-size: .8rem; margin: 0; } #view-portal .game-card-linkedin .mt-4 { margin: 0; flex-direction: row; gap: 8px; } #view-portal .game-card-linkedin #label-countdown { margin: 0; } /* Le registre se charge après coup : il passe sous le bandeau « Mises à jour » et sa place est réservée, pour que rien de visible ne bouge à son apparition (décalage de mise en page 0,10 mesuré) */ #view-portal .portal-badges { order: 7; margin: 0; } #view-portal #createurs { order: 8; } #view-portal #createurs[hidden] { display: block !important; visibility: hidden; min-height: 640px; } #view-portal .portal-badges button { min-height: 44px; padding: 0 16px; } #view-portal #social-footer { order: 9; margin: 0; } #view-portal #social-footer > * { width: 44px !important; height: 44px !important; } #view-portal .portal-contrib { display: block; order: 10; min-height: 44px; padding: 10px 12px; text-align: center; font-size: .82rem; color: rgba(255,255,255,.66); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; } #view-portal .portal-credit { order: 11; min-height: 44px; margin: 0; } /* ===== JEU : boutons dans la zone du pouce ===== */ #game-card { width: 100%; max-width: 480px; border-radius: 20px; } #game-card .img-container > div.absolute.top-0 { height: 8px !important; } #game-card > div:last-of-type { padding: 12px 14px calc(14px + env(safe-area-inset-bottom)) !important; } #game-card .flex.justify-between.mb-4 { align-items: center; margin-bottom: 12px; } #game-card .grid.grid-cols-2 { height: auto !important; gap: 10px; } #btn-crous, #btn-prison, #view-duel button[onclick="guessDuel('crous')"], #view-duel button[onclick="guessDuel('prison')"] { height: clamp(76px, 11dvh, 104px); border-radius: 18px; } #btn-crous, #view-duel button[onclick="guessDuel('crous')"] { background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%) !important; border: 1px solid #93c5fd !important; box-shadow: 0 8px 22px rgba(37,99,235,.40), inset 0 1px 0 rgba(255,255,255,.3) !important; } #btn-prison, #view-duel button[onclick="guessDuel('prison')"] { background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%) !important; border: 1px solid #fca5a5 !important; box-shadow: 0 8px 22px rgba(220,38,38,.40), inset 0 1px 0 rgba(255,255,255,.28) !important; } #btn-crous span, #btn-prison span, #view-duel button[onclick^="guessDuel"] span { color: #fff !important; font-size: 1.35rem; } #btn-crous:active, #btn-prison:active, #view-duel button[onclick^="guessDuel"]:active { transform: scale(.97); filter: brightness(1.12); } /* ===== FIN DE PARTIE : partager d'abord, rejouer ensuite ===== */ #view-end { gap: 0; } #view-end > #end-title { order: 1; } #view-end > div.text-center { order: 2; } #view-end > #daily-share-block { order: 3; } #view-end .end-actions { display: contents; } #view-end #end-share-btn { order: 4; width: 100%; max-width: 24rem; margin: 0 auto 10px; min-height: 52px; } #view-end > div:has(> #replay-btn) { order: 5; } #view-end > #bonus-section { order: 6; } #view-end > #end-leaderboard { order: 7; } #view-end > #ad-banner-end { order: 8; max-width: 100%; } #view-end .end-actions > button:last-child { order: 9; width: 100%; max-width: 24rem; margin: 0 auto; min-height: 48px; } } /* ---- Cibles tactiles de 44 px partout (audit au pixel près, voir tests) ---- */ @media (max-width: 640px) { button, [role="button"] { min-height: 44px; } .skip-link:focus { min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; } header #header-logo { min-height: 44px; display: flex; align-items: center; } /* croix de fermeture des fenêtres (Discord, créateur) : zone de toucher de 44 px */ button.absolute.top-5.right-5, #release-notes-modal button[aria-label*="Fermer"] { width: 44px; height: 44px; top: 10px !important; right: 10px !important; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; } /* 🌸 d'Agnès : zone de 44 px, sans cercle visible */ .agnes-trigger { width: 44px; height: 44px; font-size: 20px; background: none; border-color: transparent; left: 4px; } .agnes-trigger::after { display: none; } } /* ---- Petits écrans en hauteur (≤ 700 px) : la carte JOUER libère la place pour Daily et Duel ---- */ @media (max-width: 640px) and (max-height: 700px) { #view-portal .game-card-crous .text-4xl { display: none; } #view-portal .game-card-crous .game-card-inner { padding: 16px 16px 14px; } #view-portal .game-card-crous h2 { font-size: 1.5rem; } .portal-cta { height: 54px; margin-top: 8px; } } /* ---- Offre VIP : sans faux prix de référence ni fausse rareté ---- Le « 5€ » barré et le bandeau « OFFRE LIMITÉE » étaient permanents, rien n'indique qu'un prix de 5€ ait existé : pratique commerciale potentiellement trompeuse (art. L112-1-1 et L121-2 du Code de la consommation). */ .vip-old-price { display: none; } .vip-price-box::before { display: none; } /* ---- VIP et fenêtres : panneau qui monte du bas, à portée du pouce ---- */ @media (max-width: 640px) { #vip-modal.active { align-items: flex-end; justify-content: center; padding: 0; } #vip-modal .vip-card { width: 100%; max-width: none; margin: auto 0 0 !important; border-radius: 26px 26px 0 0; max-height: 92dvh; padding: 22px 18px calc(18px + env(safe-area-inset-bottom)); } .vip-card::before { border-radius: 28px 28px 0 0; } .vip-title { letter-spacing: 1.5px; } .vip-subtitle { letter-spacing: 2px; font-size: .78rem; line-height: 1.45; } .vip-price-box { padding-top: 14px; } .vip-buy-btn { letter-spacing: .5px; min-height: 56px; font-size: 1.05rem; } #release-notes-modal { align-items: flex-end; padding: 0; } #release-notes-modal > .relative { max-width: none; border-radius: 26px 26px 0 0; max-height: 92dvh; } } /* La barre de temps a sa propre bande au-dessus de la photo : plus rien ne recouvre l'image (équité du jeu) */ .img-container { padding-top: 6px; } @media (max-width: 640px) { .img-container { padding-top: 8px; } } /* En-tête à 320 px : l'ancienne règle de compensation (boutons de 36 px) n'a plus lieu d'être, le faux compteur « en ligne » ayant disparu */ @media (max-width: 360px) { header.fixed .glass-btn { min-width: 44px; padding: 6px 8px; } }