/** * EGMtheme - Front-end Styles * * Light & Modern design inspired by the LEARNPLAY prototype. * Uses CSS custom properties mapped from theme.json tokens. * * @package EGMtheme * @version 1.0.0 */ /* ========================================================================== CSS Variables (mapped to theme.json where possible) ========================================================================== */ :root { /* Colors */ --egmtheme-primary: #7c3aed; --egmtheme-primary-dark: #6d28d9; --egmtheme-primary-light: #a78bfa; --egmtheme-secondary: #9333ea; --egmtheme-accent: #f59e0b; --egmtheme-success: #10b981; --egmtheme-warning: #f59e0b; --egmtheme-error: #ef4444; /* Surfaces */ --egmtheme-surface: #ffffff; --egmtheme-surface-light: #f3f4f6; --egmtheme-background: #eff6ff; --egmtheme-background-alt: #faf5ff; --egmtheme-background-accent: #fdf2f8; /* Text */ --egmtheme-foreground: #111827; --egmtheme-foreground-muted: #4b5563; --egmtheme-muted: #6b7280; /* Borders */ --egmtheme-border: #e5e7eb; --egmtheme-border-accent: #e9d5ff; /* Premium */ --egmtheme-premium-gold: #fbbf24; --egmtheme-premium-gold-dark: #f59e0b; --egmtheme-hot-red: #ef4444; --egmtheme-hot-orange: #f97316; /* Gradients */ --egmtheme-gradient-page: linear-gradient(to bottom right, #eff6ff, #faf5ff, #fdf2f8); --egmtheme-gradient-cta: linear-gradient(to right, #7c3aed, #9333ea); --egmtheme-gradient-premium: linear-gradient(to right, #fbbf24, #f59e0b); --egmtheme-gradient-hot: linear-gradient(to right, #ef4444, #f97316); --egmtheme-gradient-hero-text: linear-gradient(to right, #7c3aed, #9333ea, #ec4899); /* Stats Gradients */ --egmtheme-stats-players: linear-gradient(to bottom right, #60a5fa, #3b82f6); --egmtheme-stats-games: linear-gradient(to bottom right, #f472b6, #ec4899); --egmtheme-stats-time: linear-gradient(to bottom right, #a78bfa, #8b5cf6); /* Radius */ --egmtheme-radius-sm: 0.375rem; --egmtheme-radius-md: 0.5rem; --egmtheme-radius-lg: 1rem; --egmtheme-radius-xl: 1.5rem; --egmtheme-radius-2xl: 2rem; --egmtheme-radius-3xl: 1.5rem; --egmtheme-radius-full: 9999px; /* 👆 R9-bis (831, audit responsive S733 ; ⚖️ D1 porteur 25-09 : 44 px au doigt) — la cible tactile MINIMALE des pages publiques (logo, compteurs, flèches, liens seuls…). Elle n'est LUE que sous `@media (pointer: coarse)` : la souris garde la maquette. ⚠️ Ce n'est pas `--egm-ctl-h` (champs et boutons, loi 484, ⛔ jamais sur `:root` — SG-111) : un nom neuf, qui ne croise rien. Chaque lecteur garde le repli 44. */ --egm-tap-min: 44px; /* Shadows */ --egmtheme-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --egmtheme-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); --egmtheme-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); --egmtheme-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); --egmtheme-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); --egmtheme-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* Transitions */ --egmtheme-transition-fast: 150ms ease; --egmtheme-transition-base: 200ms ease; --egmtheme-transition-slow: 300ms ease; /* ====================================================================== LARGEUR DE PAGE — LE FOYER UNIQUE (session 539, consigne porteur) ====================================================================== *« Il faut normaliser la largeur de toutes les pages dashboard, et frontend public, jeu, parcours, etc. a [max-width: 1360px] ; actuellement c'est chaque serie avec une taille differente. La normalisation s'effectue depuis le Head, les menu passant par le content jusqu'au footer. »* ⭐ LA VALEUR N'EST ECRITE QU'ICI. Les 13 surfaces qui bornaient une page (1200 · 1280/80rem · 1400 · 1800) la LISENT desormais : - `theme.json` est la seule exception, et c'est force : un `theme.json` ne sait pas lire une variable CSS, la valeur y est donc litterale (et le commentaire de ce bloc est sa source). - tout le reste : `var(--egm-page-max, 1360px)`. 🪤 LE REPLI `1360px` N'EST PAS DECORATIF : les bundles React (en-tete, pied, hero, Hub, groupes, parcours, page de jeu) sont parfois servis SEULS — un rendu SSR, un apercu isole, une sous-app montee hors du theme — et cette feuille n'est alors pas la. Sans repli, la page perdrait toute borne. ⚖️ 1360 vient du design system : `EGM/packages/stylekit/src/styles/model-2026.css` §6 `.egm-m-page` le portait deja, seul, depuis le modele 2026. La consigne ne choisit donc pas un nombre neuf : elle etend celui du modele a tout le site. ⛔ DEUX SURFACES SONT HORS DE CETTE COLONNE, ET C'EST VOULU : - le Studio (dérogation porteur de la session 497 : *« le studio traverse et passe en dehors des contraintes et limites habituelles »*), confirmee le 2026-09-15 ; - le dashboard d'administration WordPress, hors perimetre du site. 📐 890 — la page de jeu `/games/` (dérogation 1800 px de 539) est ENTREE dans la colonne sur consigne porteur du 2026-09-27 : *« Harmonise la largeur de la page de jeux /games avec celui des autres pages (exemple de /catalogue) »*. ======================================================================= */ --egm-page-max: 1360px; /* 📐 890 — LA LARGEUR DE LA COLONNE LATERALE DU SITE : celle du rail de `/catalogue` (330 px border-box, 14 px de gouttiere ⇒ 302 px de carte, plancher pub 300 de 539/613). Consigne porteur du 2026-09-27 : *« que la sidebar soit aussi harmonisee en largeur dans toutes les sections de la page /games »*. Lecteurs : le rail du catalogue (et donc `/parcours/`, meme classe), la sidebar de la page de jeu (`.gp-layout`) et le rail publicitaire de sa documentation (`.egm-game-doc__layout`). ⛔ La valeur n'est ecrite qu'ici ; chaque lecteur garde le repli `330px`. */ --egm-page-rail: 330px; } /* ========================================================================== Base & Reset ========================================================================== */ html { scroll-behavior: smooth; overflow-x: hidden; /* repli anciens navigateurs */ overflow-x: clip; /* clip = pas de conteneur de defilement => position:sticky des descendants preservee */ } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: var(--egmtheme-gradient-page); min-height: 100vh; min-height: 100dvh; color: var(--egmtheme-foreground); overflow-x: hidden; /* repli anciens navigateurs */ overflow-x: clip; /* clip = pas de conteneur de defilement => position:sticky des descendants preservee */ } /* Prevent any child from causing horizontal scroll */ .wp-site-blocks { overflow-x: hidden; /* repli anciens navigateurs */ overflow-x: clip; /* clip = pas de conteneur de defilement => position:sticky des descendants preservee */ max-width: 100vw; /* ====================================================================== FOND DE PAGE DU THEME (session 255, phase 3) — L'ANCETRE EST LE SEUL QUI PUISSE POSSEDER LES MARGES. Mesure du 2026-08-20 sur /games/{slug} : CHAQUE enfant de .wp-site-blocks porte margin-top:24px. Il y a donc TROIS bandes que personne ne peint — au-dessus de la console, entre la console et la documentation, et entre la documentation et le pied de page (doc 1028..1784, footer 1808). Le porteur a vu la troisieme : un espace blanc que le fond du jeu n'atteint pas. Une couche posee sur la documentation ne peut PAS couvrir une marge que la documentation ne possede pas : la corriger par un bottom:-24px reviendrait a RECOPIER dans un bloc une valeur qui appartient a son voisin — et la bande reviendrait au premier changement de cette marge. Le seul element qui possede les trois bandes est leur ANCETRE COMMUN. GamePage y ecrit --gc-page-bg (⛔ jamais :root, ⛔ jamais body) et le retire au demontage. Le repli est `transparent` : partout ailleurs sur le site, aucun ecrivain, donc AUCUN changement — c'est le degrade de `body` (l. 96) qui continue de se voir. ⚖️ L'en-tete et le pied peignent leur propre fond (mesure : le pied par .egmtheme-footer-app rgb(17,24,39), opaque) : ils ne sont pas teintes. ====================================================================== */ background: var(--gc-page-bg, transparent); } ::selection { background-color: var(--egmtheme-primary); color: white; } :focus-visible { outline: 2px solid var(--egmtheme-primary); outline-offset: 2px; } /* ========================================================================== Header ========================================================================== */ .egmtheme-header { background: rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid var(--egmtheme-border); z-index: 100; transition: box-shadow var(--egmtheme-transition-base); } .egmtheme-header.is-scrolled { box-shadow: var(--egmtheme-shadow-md); } /* 📐 539 — l'en-tete « legacy » du theme rejoint la colonne unique (1400 ⇒ `--egm-page-max`). ⚠️ Ce n'est PAS l'en-tete servi par l'app `egmtheme-header` (`.egmtheme-site-header__inner`, qui etait a 80rem) : les deux existent et peuvent se rendre selon le gabarit de la page — les DEUX lisent donc le meme foyer, sinon la marque se decalerait d'un gabarit a l'autre. */ .egmtheme-header-inner { max-width: var(--egm-page-max, 1360px); margin: 0 auto; } .egmtheme-tagline { margin: 0 !important; line-height: 1.2; } /* Premium button */ .egmtheme-btn-premium .wp-block-button__link { background: var(--egmtheme-gradient-cta) !important; color: white !important; font-weight: 600; box-shadow: var(--egmtheme-shadow-lg); transition: all var(--egmtheme-transition-fast); } @media (hover: hover) { /* 📱 797/R13 — pas de survol collé après un tap */ .egmtheme-btn-premium .wp-block-button__link:hover { box-shadow: var(--egmtheme-shadow-xl); transform: translateY(-1px); } } /* ========================================================================== Footer ========================================================================== */ .egmtheme-footer { margin-top: auto; } .egmtheme-footer a { color: rgba(255, 255, 255, 0.7); text-decoration: none; transition: color var(--egmtheme-transition-fast); } @media (hover: hover) { /* 📱 807 — survol de couleur réservé à la souris (pas collé après un tap) */ .egmtheme-footer a:hover { color: white; } } /* ========================================================================== Loading States ========================================================================== */ .egmtheme-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; min-height: 60dvh; gap: 1rem; color: var(--egmtheme-muted); } .egmtheme-spinner { width: 48px; height: 48px; border: 4px solid var(--egmtheme-surface-light); border-top-color: var(--egmtheme-primary); border-radius: 50%; animation: egmtheme-spin 1s linear infinite; } @keyframes egmtheme-spin { to { transform: rotate(360deg); } } /* ========================================================================== React App Mount Points ========================================================================== */ .egmtheme-react-app { width: 100%; } /* Tailwind container utility: ensure it is centered when constrained by max-width. (Some app bundles ship `.container{max-width:...}` without auto margins.) */ .container { margin-left: auto; margin-right: auto; max-width: 100%; box-sizing: border-box; } /* Prevent React app wrappers from overflowing on mobile */ .egmtheme-react-app, .egmtheme-hero-root { max-width: 100vw; overflow-x: hidden; /* repli anciens navigateurs */ overflow-x: clip; /* clip = pas de conteneur de defilement => position:sticky des descendants preservee */ box-sizing: border-box; } /* Header wrapper: no stacking context here so that position:fixed children (mobile overlay z-999, drawer z-1001) can escape to viewport level. The inner .egmtheme-site-header already has sticky + z-index:1000. */ .egmtheme-header-react { max-width: 100vw; box-sizing: border-box; } /* 829/SSRBAR — LA PLACE DE L'EN-TETE EST RESERVEE AVANT QUE L'ILE NE MONTE (CLS du site). Mesure (Chrome, /marketplace/, SW bloques) : le point de montage est VIDE jusqu'a ~2 s ; la marge haute du
(24 px) s'effondre alors a travers l'en-tete vide et le (body a y 24), puis l'en-tete monte (80 px > 1024, 64 px dessous) : tout le contenu descend de 80-104 px d'un coup = CLS 0,08 (1280) / 0,10 (390), sur TOUTES les pages qui ont l'en-tete. La reserve tombe des que l'ile a monte (`data-egm-mounted`, pose par main.tsx dans un effet de mise en page, avant la 1re peinture) : un en-tete masque par ses reglages (App => null) ne laisse donc pas de bande vide. Hauteurs MESUREES (header rendu), a re-mesurer si le logo ou les rembourrages de l'en-tete changent. */ .egmtheme-header-react[data-app="header"]:empty:not([data-egm-mounted]) { min-height: 80px; } @media (max-width: 1024px) { .egmtheme-header-react[data-app="header"]:empty:not([data-egm-mounted]) { min-height: 64px; } } /* WordPress FSE template-part wrapper for the header — same rule: avoid creating a stacking context that traps fixed children. */ header.wp-block-template-part { /* position/z-index intentionally omitted */ } /* Push page content below the header's stacking level so the header shadow and sticky bar always render on top of subsequent sections. */ .wp-site-blocks > *:not(header):not(.egmtheme-header-react) { position: relative; z-index: 0; } /* ========================================================================== BAREME DES RANGS DE PAGE (session 255) — la regle ci-dessus met TOUS les blocs de .wp-site-blocks au MEME rang (0). Deux freres de meme rang, ce n'est pas "aucun ordre" : c'est l'ORDRE DU DOM qui tranche, et le dernier ecrit gagne. Ce piege a deja ete paye une fois (barre d'onglets mobile du Hub, suite 70, CLOSED_LEDGER) ; il a frappe une seconde fois sur la page d'un jeu, ou EGMG_Game_Html_Documentation_Renderer injecte le bloc documentaire
APRES le
de la console. Mesure du 2026-08-20 (1850x840) : la documentation recouvrait le panneau d'options sur 207 px et captait 2 des 4 points sondes — donc les CLICS. Aggravant : .egmtheme-game-console-page porte isolation:isolate (le motif de fond du theme, T3), si bien qu'AUCUN z-index interne ne peut en sortir — ni le 1000 de la modale, ni le 9999 des infobulles. Le remede est un rang DECLARE, pas un z-index negocie au cas par cas : header sticky du site .................. 1000 (hors de cette regle) console de jeu (.egmtheme-game-console-page) 1 tout le reste (dont .egm-game-doc) ...... 0 La console passe donc devant la documentation, et reste SOUS la navigation du site — c'est une page, pas un kiosque plein ecran. Specificite : (0,2,1) des deux cotes, EXACTEMENT comme la regle du dessus. C'est l'ordre dans CE fichier qui departage, et c'est voulu — le rang doit se lire a cote de la regle qui a cree l'egalite, pas dans une autre feuille. Preuve : DOCS_CLAUDE/tools/verify_console_stacking_s255.mjs. ========================================================================== */ .wp-site-blocks > main.egmtheme-game-console-page { z-index: 1; /* ========================================================================== L'ESPACE VIDE SOUS LE MENU (signalement porteur, 2026-08-21, session 257) ========================================================================== Mesure au pixel sur /games/ecrire-les-nombres-en-chiffres/ (1850x900) : bas du header ......... 52 px haut du
........ 76 px margin-top du
.. 24 px <-- la bande, en entier padding-top du
.. 0 px margin-top du 1er enfant 0 px La bande ne vient donc PAS de la console ni de sa barre de titre : c'est le block-gap de WordPress (--wp--style--block-gap = 24px), applique par la mise en page des blocs a tout enfant de .wp-site-blocks. Le porteur avait nomme la cause ("c'est du a un margin") et la valeur voulue. Corrige ICI, sur le meme selecteur que le rang de la 255, pour que les deux faits qui concernent ce
se lisent au meme endroit. Portee : la page de jeu SEULE — ⛔ aucune autre page ne perd son gap. Sonde : DOCS_CLAUDE/tools/measure_game_page_header_gap_s257.mjs ========================================================================== */ margin-block-start: 1px; } /* 1328 (signalement porteur, 2026-10-06 : « de nouveau » 24 px entre le header et la barre de titre). Meme block-gap, un etage plus bas : `:root :where(.is-layout-flow) > *` donne 24 px a tout enfant du
, sauf au :first-child. Depuis 1267, `fill_game_console_shell()` imprime