/* ═══════════════════════════════════════════════════════════════════════════ * L'ESPACE ENFANT, LA VRAIE INTERFACE. * * Portee telle quelle depuis la maquette validee par Patrice : * academico-platform/docs/maquettes/espace-enfant-2026-08-19.html * dessinee par Claude-Core 12, validee par Patrice le 2026-08-23 en la * regardant a l'ecran : « oui, c'est ca ». * * ⛔ NE LA REECRIS PAS « PROPREMENT ». Chaque valeur de couleur et de contraste * a ete mesuree par Core avant d'etre posee. La reformuler, c'est refaire ce * travail sans le savoir. * * ⚠️ ELLE VIT SOUS `.aca-enfant`, PAS SOUS `:root`. La maquette etait une page * entiere; ici elle partage la page avec le theme du site. Sans cette racine, * ses jetons deborderaient sur tout ce qui l'entoure. * * Vocabulaire, pour t'y retrouver : * .coque la boite entiere .rail la colonne de gauche * .pane un ecran .zone un bouton du rail * .bandeau une bande titree .tuile une carte * .go un bouton .seg un segment * ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ MAQUETTE, espace enfant /mon-academie/ Claude-Core 12, 2026-08-19, version 5 ⛔ AUCUN React, aucun npm, aucun Tailwind. HTML et CSS seulement. ═══ CE QUI CHANGE EN v5, demandé par Patrice ═══ ① Toutes les surfaces que les AUTRES greffons offrent à un enfant sont maintenant rangées quelque part. Mesurées, pas devinées : aca_pi_my_missions_v2 (TODO) ....... « Ma liste » aca_portfolio_capture, _week ....... « Mon portfolio » academieco-community /communaute/ .. « Babillard » academieco_cotv_studio ............. « CoTV » Arène · Serpent · Donjon · Coventure · Koursa .... « Jouer » ② Les peaux se débloquent à l'XP, la première est blanche. ③ Les titres se gagnent aussi à l'XP, en alternance avec les peaux. ④ Avatars et magasin en petits carrés : ils prenaient trop de place. ═══ L'ÉCONOMIE EST ACCROCHÉE À LA VRAIE COURBE ═══ Les seuils ne sont pas inventés : ils sont les niveaux réels de academy-gamification/includes/class-install.php, build_level_thresholds(). La courbe fait DÉJÀ « vite au début, long ensuite » (100, 150, 200, 250, 300 … puis +50 par niveau jusqu'à 3000 fixe). Accrocher les peaux aux NIVEAUX plutôt qu'à des paliers d'XP inventés évite une deuxième courbe à entretenir, et le niveau est un chiffre que l'enfant voit déjà. ⛔ Un jeton est résolu là où il est DÉCLARÉ, pas là où il est utilisé. Les règles qui dépendent de --accent vivent donc sur le COMPOSANT. ═══════════════════════════════════════════════════════════════════════════ */ .aca-enfant { --rose: #e94560; --cyan: #00d2ff; --or: #f5c518; --violet: #b44aff; --vert: #52d060; /* Contrastes mesurés sur fond sombre : #ffffff 15,4 à 19,0 ✅ · #b0bace 7,9 à 9,7 ✅ · #6a7490 3,3 à 4,1 ⛔ Le gris « muted » de la production ne passe pas : rien n'est écrit avec. */ --encre: #ffffff; --encre-2: #b0bace; --encre-nb: #0f0f1e; --police: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif; --chiffres: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; --accent: #00d2ff; --rail: 244px; --pas: 16px; } /* Un POST refuse ne doit jamais ressembler a un bouton inerte. Cette zone reste au-dessus de la coque, mais sous les controles de sortie de l'Arene. */ .aca-enfant .message-action { position: fixed; z-index: 2147482000; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(520px, calc(100vw - 32px)); margin: 0; padding: 12px 16px; border: 2px solid var(--rose); border-radius: var(--rayon-rond); background: var(--case); color: var(--encre); box-shadow: var(--ombre); font: 800 14px/1.35 var(--police); text-align: center; } .aca-enfant .message-action[hidden] { display: none !important; } /* ═══ PEAU 1 : LES CASES, niveau 3 ═══════════════════════════════════════ */ .aca-enfant, .aca-enfant[data-peau="cases"] { --fond: #0f0f1e; --case: #1a1a2e; --case-2: #22223e; --case-3: #2a2a4e; --ligne: rgba(255,255,255,0.10); --creux: rgba(255,255,255,0.11); --contour: 3px; --rayon: 0px; --rayon-rond: 0px; --ombre: 5px 5px 0 0 rgba(0,0,0,0.55); --ombre-p: 4px 4px 0 0 rgba(0,0,0,0.55); --ombre-nulle: none; --trame: radial-gradient(circle, rgba(255,255,255,0.055) 1.1px, transparent 1.1px); --trame-taille: 7px 7px; --enfoncement: translate(3px, 3px); } /* ⛔ ORDRE VOLONTAIRE. `:root` et `[data-peau="x"]` ont la MÊME spécificité, donc c'est l'ordre qui tranche. Déclarée AVANT `:root`, la peau Papier perdait le fond : texte navy sur fond noir, illisible. Mesuré le 2026-08-19. Toute peau ajoutée doit venir APRÈS ce bloc. */ /* ═══ PEAU 0 : PAPIER, la peau de départ, niveau 1 ═══════════════════════ */ .aca-enfant[data-peau="papier"] { --fond: #f4f5f7; --case: #ffffff; --case-2: #fafafa; --case-3: #eef0f4; --ligne: rgba(27,42,71,0.13); --creux: rgba(27,42,71,0.09); /* Accents assombris exprès : blanc dessus rend 5,3 à 8,3 ✅ AA */ --rose: #b81d38; --cyan: #0b6e86; --or: #8a6520; --violet: #6a2fa0; --vert: #2b6b3d; --encre: #1b2a47; --encre-2: #5b6b85; --encre-nb: #ffffff; --contour: 1px; --rayon: 10px; --rayon-rond: 999px; --ombre: 0 1px 2px rgba(27,42,71,0.05), 0 4px 12px rgba(27,42,71,0.05); --ombre-p: 0 1px 2px rgba(27,42,71,0.06); --ombre-nulle: none; --trame: none; --trame-taille: auto; --enfoncement: translateY(-1px); } /* ═══ PEAU 2 : LE NÉON, niveau 6 ═════════════════════════════════════════ */ .aca-enfant[data-peau="neon"] { --fond: #0d0d1a; --case: #17172b; --case-2: #1e1e38; --case-3: #272746; --ligne: rgba(255,255,255,0.08); --creux: rgba(255,255,255,0.09); /* Le bandeau est NU sur cette peau : il porte l'accent sur le fond de case. Mesure sur #17172b : rose 4,59 ✅ cyan 9,77 ✅ or 10,79 ✅ vert 8,84 ✅, mais violet #b44aff rendait 4,49, sous le seuil AA. Eclairci a 5,72. */ --violet: #c06cff; --contour: 1px; --rayon: 16px; --rayon-rond: 999px; --ombre-nulle: none; --trame: radial-gradient(60% 42% at 14% 0%, rgba(180,74,255,0.16) 0%, transparent 62%), radial-gradient(52% 38% at 92% 22%, rgba(0,210,255,0.13) 0%, transparent 62%); --trame-taille: auto; --enfoncement: translateY(-1px); } /* ═══ PEAU 3 : PHOSPHORE, niveau 15 ══════════════════════════════════════ */ .aca-enfant[data-peau="phosphore"] { --fond: #04160c; --case: #072012; --case-2: #0a2b18; --case-3: #0e3a21; --ligne: rgba(82,208,96,0.20); --creux: rgba(82,208,96,0.14); --rose: #52d060; --cyan: #7cf58f; --or: #b6f5a6; --violet: #3fae52; --vert: #52d060; --encre: #d9ffe0; --encre-2: #86c993; --encre-nb: #04160c; --contour: 2px; --rayon: 2px; --rayon-rond: 2px; --ombre: 0 0 0 1px rgba(82,208,96,0.28); --ombre-p: none; --ombre-nulle: none; --trame: repeating-linear-gradient(0deg, rgba(82,208,96,0.055) 0 1px, transparent 1px 3px); --trame-taille: auto; --enfoncement: translateY(1px); --police: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; } /* ═══ PEAU 4 : MINUIT, niveau 10 ══════════════════════════════════════════ Squelette : la peau CALME. Filets d'un pixel, angles a peine adoucis, aucune trame. C'est le contraire de l'arcade, et c'est voulu : apres sept semaines, l'enfant a droit a un endroit tranquille. Mesure : encre 13,51 · encre-2 7,62 sur le pire fond. ✅ AA */ .aca-enfant[data-peau="minuit"] { --fond: #0a0f1f; --case: #111a33; --case-2: #141e3c; --case-3: #18244a; --ligne: rgba(160,185,255,0.16); --creux: rgba(160,185,255,0.12); --rose: #7aa2ff; --cyan: #5fd3e8; --or: #e8c86a; --violet: #a98cf0; --vert: #6cd39a; --encre: #eef2ff; --encre-2: #a9b8de; --encre-nb: #0a0f1f; --contour: 1px; --rayon: 4px; --rayon-rond: 4px; --ombre: 0 0 0 1px rgba(160,185,255,0.09); --ombre-p: none; --ombre-nulle: none; --trame: none; --trame-taille: auto; --enfoncement: translateY(-1px); } /* ═══ PEAU 5 : OR MASSIF, niveau 22 ═══════════════════════════════════════ Squelette : le CADRE. Un filet d'or de 2 px, des angles vifs, et une trame de fines diagonales. On regarde une piece encadree, pas un ecran. Mesure : encre 15,62 · encre-2 8,24. ✅ AA */ .aca-enfant[data-peau="or"] { --fond: #0c0a06; --case: #171208; --case-2: #1d1709; --case-3: #241c0c; --ligne: rgba(232,184,75,0.30); --creux: rgba(232,184,75,0.16); --rose: #e8b84b; --cyan: #d9a441; --or: #f2d98a; --violet: #c79a2e; --vert: #bfa15c; --encre: #fdf6e3; --encre-2: #cbb37a; --encre-nb: #0c0a06; --contour: 2px; --rayon: 0px; --rayon-rond: 0px; --ombre: 0 0 0 1px rgba(232,184,75,0.22); --ombre-p: none; --ombre-nulle: none; --trame: repeating-linear-gradient(45deg, rgba(232,184,75,0.045) 0 1px, transparent 1px 9px); --trame-taille: auto; --enfoncement: translateY(-1px); } /* ═══ PEAU 6 : COSMOS, niveau 30 ══════════════════════════════════════════ Squelette : le VIDE. Presque aucun contour, des angles tres ronds, et une poussiere d'etoiles. Rien ne pese, tout flotte. Mesure : encre 14,59 · encre-2 7,85. ✅ AA */ .aca-enfant[data-peau="cosmos"] { --fond: #07051a; --case: #120c2e; --case-2: #170f39; --case-3: #1c1444; --ligne: rgba(200,180,255,0.13); --creux: rgba(200,180,255,0.10); --rose: #ff8fd0; --cyan: #6fe0ff; --or: #ffd76a; --violet: #b18cff; --vert: #7ef0c0; --encre: #f2eaff; --encre-2: #b9a6e8; --encre-nb: #07051a; --contour: 1px; --rayon: 20px; --rayon-rond: 999px; --ombre: none; --ombre-p: none; --ombre-nulle: none; --trame: radial-gradient(circle, rgba(255,255,255,0.16) 0.6px, transparent 0.7px), radial-gradient(circle, rgba(177,140,255,0.13) 0.9px, transparent 1px); --trame-taille: 37px 41px, 89px 73px; --enfoncement: translateY(-2px); } /* ═══ PEAU 7 : HALLOWEEN, SAISONNIERE, du 01-10 au 31-10 ══════════════════ ⛔ Ce n'est PAS un palier. Elle parait le 1er octobre, disparait le 31, revient chaque annee, et elle n'est JAMAIS barree : hors saison, elle n'est simplement pas dans la liste. Le calcul vit au SERVEUR, dans `Academy_Peaux::fenetre_ouverte()`, jamais en JavaScript. Squelette : le DECOUPAGE. Contour noir epais, decalage dur orange, angles vifs, et des rayures obliques comme un ruban de chantier. Mesure : encre 15,75 · encre-2 8,26 · violet corrige a 6,12. ✅ AA */ .aca-enfant[data-peau="halloween"] { --fond: #12080a; --case: #1e0e10; --case-2: #241114; --case-3: #2b1418; --ligne: rgba(255,139,46,0.34); --creux: rgba(255,139,46,0.15); --rose: #ff8b2e; --cyan: #c66bff; --or: #ffd24a; --violet: #a878e8; --vert: #7bd06a; --encre: #fff3e0; --encre-2: #e0a878; --encre-nb: #12080a; --contour: 3px; --rayon: 0px; --rayon-rond: 0px; --ombre: 5px 5px 0 0 rgba(255,139,46,0.34); --ombre-p: 3px 3px 0 0 rgba(255,139,46,0.30); --ombre-nulle: none; --trame: repeating-linear-gradient(135deg, rgba(255,139,46,0.05) 0 8px, transparent 8px 18px); --trame-taille: auto; --enfoncement: translate(3px, 3px); } /* ═══ PEAU 8 : HUIT BITS, proposee par Patrice ════════════════════════════ Squelette : le CARRE. Contour de 4 px, zero arrondi, decalage dur de 4 px, damier, et tout le texte en chasse fixe. Rien ne peut etre rond. Mesure : encre 12,02 · encre-2 6,50. ✅ AA */ .aca-enfant[data-peau="huit-bits"] { --fond: #101820; --case: #1c2a38; --case-2: #213141; --case-3: #26384a; --ligne: #4a6478; --creux: rgba(255,255,255,0.13); --rose: #ff5f6d; --cyan: #4de0e0; --or: #ffd23f; --violet: #ab7dda; --vert: #5fd97a; --encre: #ffffff; --encre-2: #9fc4d8; --encre-nb: #101820; --contour: 4px; --rayon: 0px; --rayon-rond: 0px; --ombre: 4px 4px 0 0 #000000; --ombre-p: 3px 3px 0 0 #000000; --ombre-nulle: none; --trame: repeating-conic-gradient(rgba(255,255,255,0.035) 0% 25%, transparent 0% 50%); --trame-taille: 12px 12px; --enfoncement: translate(2px, 2px); --police: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; } /* ═══ PEAU 9 : ANNEES 80, proposee par Patrice ════════════════════════════ Squelette : MEMPHIS. Confettis, decalage dur magenta, contour de 2 px. Mesure : encre 15,69 · encre-2 7,50. ✅ AA */ .aca-enfant[data-peau="annees80"] { --fond: #0b0616; --case: #170a2b; --case-2: #1c0d35; --case-3: #221040; --ligne: rgba(255,79,163,0.28); --creux: rgba(255,79,163,0.14); --rose: #ff4fa3; --cyan: #3fe0ff; --or: #ffe14d; --violet: #c46bff; --vert: #4ff0a8; --encre: #fdf0ff; --encre-2: #c79ae0; --encre-nb: #0b0616; --contour: 2px; --rayon: 0px; --rayon-rond: 999px; --ombre: 6px 6px 0 0 rgba(255,79,163,0.30); --ombre-p: 3px 3px 0 0 rgba(63,224,255,0.32); --ombre-nulle: none; --trame: radial-gradient(circle, rgba(63,224,255,0.13) 1.4px, transparent 1.6px), radial-gradient(circle, rgba(255,225,77,0.11) 1.1px, transparent 1.3px); --trame-taille: 53px 47px, 31px 67px; --enfoncement: translate(3px, 3px); } /* ═══ PEAU 10 : CAHIER, une peau CLAIRE, ancree dans l'ecole-maison ═══════ Squelette : le PAPIER LIGNE. Fond de lignes bleues, marge rouge a gauche, contour d'un pixel. C'est le cahier Canada, et c'est le monde reel d'un enfant en ecole-maison. Mesure : encre 12,40 · encre-2 5,63 sur le fond le plus fonce. ✅ AA */ .aca-enfant[data-peau="cahier"] { --fond: #fbfaf5; --case: #ffffff; --case-2: #fdfcf7; --case-3: #f1efe6; --ligne: rgba(29,43,63,0.16); --creux: rgba(29,43,63,0.10); --rose: #b81d38; --cyan: #0b6e86; --or: #8a6520; --violet: #6a2fa0; --vert: #2b6b3d; --encre: #1d2b3f; --encre-2: #4e5f79; --encre-nb: #ffffff; --contour: 1px; --rayon: 3px; --rayon-rond: 999px; --ombre: 0 1px 0 0 rgba(29,43,63,0.10); --ombre-p: none; --ombre-nulle: none; --trame: repeating-linear-gradient(0deg, transparent 0 25px, rgba(11,110,134,0.16) 25px 26px); --trame-taille: auto; --enfoncement: translateY(-1px); } /* ═══ PEAU 11 : L'ARAIGNEE ════════════════════════════════════════════════ 🔒 TRANCHE PAR PATRICE le 2026-08-19 : « toile seulement ». 🔄 v2, a sa demande : « plus bleu et rouge, et toile plus predominante qui bouge en background ». ⛔ Ce qui reste DELIBEREMENT absent : le nom d'un personnage, un embleme d'araignee stylise, la forme des yeux d'un masque, un habit reconnaissable. Le rouge et le bleu sont des COULEURS, et une couleur ne s'approprie pas. ⛔ Le critere n'est pas cette liste, c'est l'EFFET : si un enfant dit « c'est Spider-Man », on est alle trop loin. Squelette : la TOILE, et cette fois elle domine. Fond bleu nuit, cadres rouges, coins coupes en hexagone, et une vraie toile tendue depuis deux coins, qui respire lentement. Mesure : encre 14,73 · encre-2 8,41 sur le pire fond · les 5 aplats de bandeau de 4,67 a 10,73. ✅ AA partout. */ /* Temps des fêtes, du 15 décembre au 6 janvier. Le squelette : coins DOUX de 14 px, un filet d'or d'un seul pixel, et une ombre qui DIFFUSE au lieu de se décaler. C'est ce qui l'éloigne d'Halloween, qui est la même idée de saison mais en angles vifs et en décalage dur. */ .aca-enfant[data-peau="fetes"] { --fond: #0a1410; --case: #10201a; --case-2: #14271f; --case-3: #1a3128; --ligne: rgba(240,198,116,0.30); --creux: rgba(240,198,116,0.12); --rose: #f2707f; --cyan: #7fd8e8; --or: #f0c674; --violet: #cfa2e6; --vert: #84d493; --encre: #f4efe2; --encre-2: #b3c9ba; --encre-nb: #0a1410; --contour: 1px; --rayon: 14px; --rayon-rond: 999px; --ombre: 0 10px 26px -12px rgba(240,198,116,0.45); --ombre-p: 0 6px 16px -10px rgba(240,198,116,0.40); --ombre-nulle: none; --trame: repeating-linear-gradient(45deg, rgba(240,198,116,0.045) 0 6px, transparent 6px 14px), repeating-linear-gradient(-45deg, rgba(132,212,147,0.035) 0 6px, transparent 6px 14px); --trame-taille: auto; --enfoncement: translateY(2px); } /* Été, du 24 juin au 31 août. Le squelette : CLAIRE, sans aucun contour, coins de 20 px, ombres qui flottent. C'est la seule peau sans un seul trait, et c'est voulu : l'été, rien n'est encadré. Cahier est claire aussi, mais elle est réglée, ligne par ligne, avec une marge : les deux ne se ressemblent pas une seconde. */ .aca-enfant[data-peau="ete"] { --fond: #fdfaf2; --case: #ffffff; --case-2: #fffdf6; --case-3: #f2ede0; --ligne: rgba(22,48,64,0.10); --creux: rgba(22,48,64,0.06); --rose: #c2402f; --cyan: #0a6f8a; --or: #8a6512; --violet: #6b3aa0; --vert: #1f6b4a; --encre: #163040; --encre-2: #4a6478; --encre-nb: #ffffff; --contour: 0px; --rayon: 20px; --rayon-rond: 999px; --ombre: 0 14px 30px -18px rgba(22,48,64,0.40); --ombre-p: 0 8px 18px -14px rgba(22,48,64,0.35); --ombre-nulle: none; --trame: radial-gradient(circle at 30% 20%, rgba(240,190,90,0.10), transparent 60%), radial-gradient(circle at 80% 70%, rgba(10,111,138,0.07), transparent 55%); --trame-taille: auto; --enfoncement: translateY(2px); } /* Derniere lumiere, niveau 40, le bout de la carte. Le squelette : AUCUN trait, nulle part. Tout est defini par une seule lueur chaude qui vient d'un coin, et par des coins tres larges. Minuit tient par des filets d'un pixel, Cosmos par sa poussiere d'etoiles : celle-ci n'a ni l'un ni l'autre. Il ne reste qu'une lumiere. */ .aca-enfant[data-peau="derniere-lumiere"] { --fond: #050406; --case: #0c0a0d; --case-2: #121014; --case-3: #1a171c; --ligne: rgba(255,217,138,0.16); --creux: rgba(255,217,138,0.07); --rose: #ff9d5c; --cyan: #8fd4e8; --or: #ffd98a; --violet: #c9a8e8; --vert: #93d9a8; --encre: #fff6e8; --encre-2: #c2b6ae; --encre-nb: #050406; --contour: 0px; --rayon: 22px; --rayon-rond: 999px; --ombre: 0 0 60px -18px rgba(255,217,138,0.30); --ombre-p: 0 0 34px -14px rgba(255,217,138,0.24); --ombre-nulle: none; --trame: radial-gradient(ellipse at 88% 6%, rgba(255,217,138,0.13), transparent 58%), radial-gradient(ellipse at 10% 96%, rgba(255,157,92,0.05), transparent 62%); --trame-taille: auto; --enfoncement: translateY(2px); } .aca-enfant[data-peau="araignee"] { --fond: #070a12; --case: #0d1220; --case-2: #111828; --case-3: #172033; --ligne: rgba(232,50,63,0.34); --creux: rgba(74,159,232,0.18); --rose: #e8323f; --cyan: #4a9fe8; --or: #e8b84b; --violet: #8f7ce0; --vert: #4fbf86; --encre: #eef4ff; --encre-2: #a8bcd8; --encre-nb: #070a12; --contour: 2px; --rayon: 0px; --rayon-rond: 0px; --ombre: 0 0 0 1px rgba(232,50,63,0.22); --ombre-p: none; --ombre-nulle: none; /* ⛔ La trame de fond est vide : la toile vit dans la couche animee ci-dessous, sinon on la dessinerait deux fois. */ --trame: none; --trame-taille: auto; --enfoncement: translateY(-1px); } /* 🔄 LA TOILE, v3 : Patrice la voulait « plus predominante ». AVANT : une seule couche fixe DERRIERE tout, donc les cases la cachaient et on ne la voyait que dans les marges. MESURE : elle ne couvrait a peu pres que le pourtour. MAINTENANT : la MEME toile est peinte sur le fond, sur les cases et sur le menu, avec `background-attachment: fixed`. Les gradients sont donc calcules sur le VIEWPORT et non sur chaque boite : les fils se rejoignent d'une case a l'autre, et on lit une seule toile tendue sur tout l'ecran. ⛔ MESURE A LA VRAIE OPACITE, la ou un fil croise du texte : le pire cas est un anneau bleu a 22 % sur `--case-3`, qui laisse le petit texte a **5,82** (seuil AA 4,5). Les fils rouges a 30 % donnent 6,32 a 7,09. ⛔ NE PAS monter ces opacites sans remesurer : `tests/peaux-contraste.py` les verifie, et il sort en erreur si quelqu'un pousse trop loin. */ .aca-enfant[data-peau="araignee"] body, .aca-enfant[data-peau="araignee"] .rail, .aca-enfant[data-peau="araignee"] .case-b { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cg stroke='rgba(232,50,63,0.34)' stroke-width='1.00' fill='none'%3E%3Cpath d='M140.0 30.0 L486.5 30.0'/%3E%3Cpath d='M140.0 30.0 L485.9 142.4'/%3E%3Cpath d='M140.0 30.0 L416.7 231.1'/%3E%3Cpath d='M140.0 30.0 L334.2 297.3'/%3E%3Cpath d='M140.0 30.0 L249.7 367.7'/%3E%3Cpath d='M140.0 30.0 L140.0 390.3'/%3E%3Cpath d='M140.0 30.0 L36.7 348.0'/%3E%3Cpath d='M140.0 30.0 L-57.4 301.7'/%3E%3Cpath d='M140.0 30.0 L-152.4 242.4'/%3E%3Cpath d='M140.0 30.0 L-196.1 139.2'/%3E%3Cpath d='M140.0 30.0 L-189.8 30.0'/%3E%3Cpath d='M140.0 30.0 L-187.1 -76.3'/%3E%3Cpath d='M140.0 30.0 L-154.3 -183.8'/%3E%3Cpath d='M140.0 30.0 L-62.6 -248.8'/%3E%3Cpath d='M140.0 30.0 L38.1 -283.5'/%3E%3Cpath d='M140.0 30.0 L140.0 -322.7'/%3E%3Cpath d='M140.0 30.0 L251.8 -314.0'/%3E%3Cpath d='M140.0 30.0 L337.7 -242.1'/%3E%3Cpath d='M140.0 30.0 L410.1 -166.2'/%3E%3Cpath d='M140.0 30.0 L482.3 -81.2'/%3E%3C/g%3E%3Cg stroke='rgba(74,159,232,0.30)' stroke-width='1.00' fill='none' stroke-linejoin='round'%3E%3Cpolyline points='166.0,30.0 165.6,38.3 159.9,44.4 155.9,52.0 148.0,54.5 140.0,55.2 131.5,56.0 125.5,50.0 118.6,45.6 114.7,38.2 115.3,30.0 114.0,21.5 119.5,15.1 124.9,9.2 131.6,4.1 140.0,5.4 148.3,4.4 155.3,8.9 160.2,15.3 166.1,21.5 164.9,30.0'/%3E%3Cpolyline points='172.9,30.0 169.2,39.5 164.8,48.1 159.3,56.6 149.2,58.2 140.0,62.2 130.2,60.1 122.4,54.2 113.3,49.4 111.3,39.3 108.7,30.0 109.1,19.9 116.0,12.6 120.8,3.6 130.4,0.4 140.0,-0.4 150.2,-1.4 157.5,5.9 165.8,11.3 170.5,20.1 169.7,30.0'/%3E%3Cpolyline points='179.4,30.0 173.9,41.0 171.7,53.0 162.2,60.5 151.2,64.6 140.0,69.8 128.8,64.3 117.6,60.8 108.6,52.8 106.0,41.0 100.4,30.0 104.8,18.6 110.1,8.3 116.7,-2.1 128.9,-4.0 140.0,-8.8 151.8,-6.3 161.2,0.8 172.2,6.6 174.6,18.7 177.6,30.0'/%3E%3Cpolyline points='185.0,30.0 182.1,43.7 178.7,58.1 165.4,65.0 154.3,74.1 140.0,76.4 126.6,71.1 111.8,68.8 104.3,56.0 97.2,43.9 92.5,30.0 99.1,16.7 101.9,2.3 113.2,-6.8 126.5,-11.6 140.0,-18.0 153.5,-11.4 167.0,-7.1 177.9,2.4 181.0,16.7 187.7,30.0'/%3E%3Cpolyline points='191.9,30.0 193.7,47.5 184.7,62.5 170.8,72.4 157.9,85.0 140.0,82.8 123.0,82.2 106.6,76.0 98.1,60.5 85.6,47.7 85.7,30.0 89.4,13.6 93.3,-3.9 109.4,-12.2 122.7,-23.1 140.0,-26.0 156.1,-19.5 173.9,-16.7 183.1,-1.3 191.5,13.3 197.3,30.0'/%3E%3Cpolyline points='203.7,30.0 206.2,51.5 191.0,67.1 179.3,84.1 161.0,94.6 140.0,92.6 118.6,95.9 102.0,82.3 87.6,68.1 74.1,51.4 77.4,30.0 75.3,9.0 86.0,-9.2 102.9,-21.1 118.5,-36.3 140.0,-33.6 160.4,-32.8 180.3,-25.5 190.5,-6.7 205.5,8.7 205.5,30.0'/%3E%3Cpolyline points='221.4,30.0 217.0,55.0 201.3,74.5 189.3,97.8 163.8,103.4 140.0,108.9 114.3,108.9 95.8,90.9 73.2,78.6 64.4,54.6 63.3,30.0 60.2,4.1 78.4,-14.7 92.7,-35.1 114.7,-47.9 140.0,-45.4 165.8,-49.4 185.9,-33.1 203.1,-15.8 219.5,4.2 215.4,30.0'/%3E%3Cpolyline points='241.2,30.0 227.6,58.5 217.8,86.5 198.4,110.3 168.0,116.2 140.0,130.2 110.7,120.1 85.2,105.5 58.3,89.3 53.3,58.2 42.1,30.0 47.1,-0.2 66.2,-23.6 80.6,-51.7 111.2,-58.5 140.0,-65.0 170.9,-65.2 193.3,-43.3 220.5,-28.5 231.3,0.3 232.3,30.0'/%3E%3Cpolyline points='258.6,30.0 244.2,63.9 238.2,101.4 206.4,121.4 175.1,138.0 140.0,151.1 106.2,134.0 70.0,126.4 45.7,98.5 34.8,64.2 18.1,30.0 34.3,-4.4 46.4,-38.0 69.6,-66.9 106.2,-73.9 140.0,-90.7 175.3,-78.7 206.0,-60.8 238.4,-41.5 244.5,-4.0 257.9,30.0'/%3E%3Cpolyline points='274.8,30.0 271.6,72.8 257.4,115.3 217.4,136.5 184.7,167.7 140.0,168.8 98.5,157.8 53.7,148.8 32.4,108.1 5.9,73.6 -3.0,30.0 14.5,-10.8 21.7,-56.0 59.9,-80.3 97.8,-100.0 140.0,-116.0 180.7,-95.4 224.3,-86.0 253.7,-52.6 266.7,-11.2 286.9,30.0'/%3E%3Cpolyline points='298.7,30.0 307.0,84.3 273.8,127.2 236.1,162.3 194.5,197.9 140.0,189.3 86.9,193.3 39.7,168.1 10.7,123.9 -28.2,84.6 -22.6,30.0 -18.4,-21.5 -1.5,-72.8 46.8,-98.3 86.1,-135.7 140.0,-137.5 190.0,-123.9 244.0,-113.2 269.7,-64.2 301.4,-22.4 312.6,30.0'/%3E%3Cpolyline points='339.2,30.0 341.4,95.4 294.8,142.4 262.7,198.9 202.9,223.5 140.0,223.9 74.1,232.9 25.9,187.1 -24.2,149.3 -59.0,94.7 -51.2,30.0 -61.1,-35.3 -21.5,-87.3 24.3,-129.2 74.2,-172.4 140.0,-162.1 203.8,-166.5 261.0,-136.6 295.7,-83.1 342.6,-35.8 336.2,30.0'/%3E%3Cpolyline points='393.6,30.0 370.5,104.9 330.6,168.5 291.0,237.8 211.8,251.0 140.0,277.2 62.8,267.6 4.2,217.0 -67.2,180.5 -86.4,103.5 -99.7,30.0 -102.8,-48.9 -46.6,-105.5 -7.7,-173.3 64.1,-203.5 140.0,-203.4 219.4,-214.5 277.7,-159.5 337.5,-113.5 380.0,-48.0 370.4,30.0'/%3E%3Cpolyline points='448.6,30.0 404.9,116.1 383.5,206.9 315.2,271.1 226.5,296.2 140.0,339.5 52.2,300.1 -31.6,266.2 -107.3,209.7 -123.9,115.7 -165.4,30.0 -138.2,-60.4 -89.4,-136.7 -42.0,-220.5 53.4,-236.5 140.0,-267.5 233.1,-256.7 303.6,-195.2 389.5,-151.3 413.1,-58.7 428.4,30.0'/%3E%3C/g%3E%3Cg stroke='rgba(232,50,63,0.34)' stroke-width='0.70' fill='none' opacity='0.75'%3E%3Cpath d='M140.0 30.0 L1737.1 125.9'/%3E%3Cpath d='M140.0 30.0 L542.3 1578.6'/%3E%3Cpath d='M140.0 30.0 L-1208.5 891.1'/%3E%3Cpath d='M140.0 30.0 L-1095.7 -986.4'/%3E%3Cpath d='M140.0 30.0 L724.8 -1459.3'/%3E%3C/g%3E%3Cg stroke='rgba(232,50,63,0.26)' stroke-width='0.90' fill='none'%3E%3Cpath d='M920.0 880.0 L1294.0 880.0'/%3E%3Cpath d='M920.0 880.0 L1286.0 1021.8'/%3E%3Cpath d='M920.0 880.0 L1192.8 1128.7'/%3E%3Cpath d='M920.0 880.0 L1079.0 1199.3'/%3E%3Cpath d='M920.0 880.0 L955.4 1261.6'/%3E%3Cpath d='M920.0 880.0 L813.6 1254.1'/%3E%3Cpath d='M920.0 880.0 L702.5 1168.0'/%3E%3Cpath d='M920.0 880.0 L611.9 1070.8'/%3E%3Cpath d='M920.0 880.0 L536.6 951.7'/%3E%3Cpath d='M920.0 880.0 L545.1 809.9'/%3E%3Cpath d='M920.0 880.0 L617.3 692.6'/%3E%3Cpath d='M920.0 880.0 L696.3 583.8'/%3E%3Cpath d='M920.0 880.0 L812.5 502.3'/%3E%3Cpath d='M920.0 880.0 L954.3 509.6'/%3E%3Cpath d='M920.0 880.0 L1078.6 561.5'/%3E%3Cpath d='M920.0 880.0 L1201.3 623.5'/%3E%3Cpath d='M920.0 880.0 L1284.1 739.0'/%3E%3C/g%3E%3Cg stroke='rgba(74,159,232,0.24)' stroke-width='0.90' fill='none' stroke-linejoin='round'%3E%3Cpolyline points='954.0,880.0 952.9,892.7 943.7,901.7 935.8,911.8 923.1,913.5 911.0,911.7 898.4,908.6 892.5,897.0 886.0,886.4 885.9,873.6 892.5,863.0 898.4,851.4 910.9,848.2 923.1,846.6 935.8,848.2 943.8,858.3 952.8,867.3 954.1,880.0'/%3E%3Cpolyline points='963.7,880.0 958.1,894.7 950.2,907.5 939.5,919.1 923.6,919.3 908.3,921.2 894.6,913.6 886.2,901.0 876.8,888.1 880.5,872.6 884.6,858.1 893.9,845.5 909.2,842.1 924.0,836.8 938.4,843.0 949.8,852.8 960.9,864.1 959.7,880.0'/%3E%3Cpolyline points='973.2,880.0 965.0,897.4 959.1,915.7 942.7,925.7 924.5,928.9 905.3,931.8 890.6,918.9 876.2,907.1 868.4,889.7 872.5,871.1 874.5,851.8 889.8,840.0 906.3,832.0 924.9,826.7 941.6,836.7 958.7,844.7 968.2,861.3 968.7,880.0'/%3E%3Cpolyline points='981.8,880.0 976.7,901.9 968.6,924.3 946.5,933.2 925.9,943.5 902.6,941.3 884.2,927.4 864.0,914.6 860.3,891.2 859.2,868.6 864.5,845.6 884.4,832.9 902.3,817.7 925.8,817.7 946.8,826.2 968.7,835.6 975.8,858.4 983.0,880.0'/%3E%3Cpolyline points='992.5,880.0 993.6,908.5 977.1,932.0 952.7,945.6 927.5,960.4 899.8,950.9 873.8,941.1 852.5,921.8 848.9,893.3 841.4,865.3 855.6,840.1 875.2,820.7 897.9,802.5 926.7,807.5 954.8,810.2 977.8,827.3 987.8,853.7 1000.6,880.0'/%3E%3Cpolyline points='1010.5,880.0 1012.2,915.7 986.2,940.3 962.3,964.9 928.9,976.0 895.7,965.5 860.7,958.6 841.9,928.3 829.6,896.9 823.3,861.9 844.5,833.2 861.8,803.0 894.1,788.9 928.3,790.7 964.1,791.4 986.8,819.1 1007.4,846.1 1017.3,880.0'/%3E%3Cpolyline points='1037.5,880.0 1029.0,922.2 1000.8,953.7 973.9,988.3 930.3,990.9 888.8,989.6 847.8,975.6 827.7,937.2 802.8,901.9 807.2,858.9 825.9,821.7 847.0,783.3 889.9,774.4 930.7,764.4 972.7,774.2 1000.4,806.7 1032.4,836.5 1032.7,880.0'/%3E%3Cpolyline points='1068.5,880.0 1046.1,928.9 1024.3,975.1 984.9,1010.4 932.3,1012.5 879.7,1021.5 836.2,991.0 803.6,952.1 774.4,907.2 788.6,855.4 797.8,804.3 833.6,765.6 883.4,751.2 933.7,732.4 980.9,757.7 1023.0,786.1 1057.0,826.9 1053.0,880.0'/%3E%3Cpolyline points='1096.9,880.0 1072.4,939.1 1053.9,1002.0 995.1,1030.8 935.6,1048.7 870.6,1053.8 821.7,1010.2 768.9,973.6 749.2,911.9 757.8,849.7 765.4,784.3 820.1,747.7 872.8,713.9 936.5,702.1 992.6,734.1 1053.1,758.7 1079.0,818.4 1087.5,880.0'/%3E%3Cpolyline points='1124.4,880.0 1115.7,955.8 1082.6,1028.2 1009.0,1058.7 940.3,1098.6 862.4,1082.5 797.2,1042.7 730.7,997.2 721.8,917.0 709.8,840.7 735.6,765.8 799.4,720.3 859.3,666.7 939.1,674.2 1012.4,694.4 1083.7,730.8 1106.5,807.8 1137.5,880.0'/%3E%3Cpolyline points='1164.7,880.0 1172.4,977.8 1108.5,1051.8 1032.4,1105.7 945.1,1151.0 852.8,1116.2 760.5,1091.2 696.3,1018.5 677.8,925.3 652.0,829.9 706.9,748.0 765.3,675.1 846.2,620.6 942.6,636.5 1039.8,639.5 1110.9,706.0 1152.6,789.9 1192.9,880.0'/%3E%3Cpolyline points='1232.1,880.0 1229.4,999.9 1141.6,1082.0 1065.9,1173.0 949.4,1197.5 836.9,1172.2 718.5,1146.8 661.2,1040.2 607.4,938.4 597.7,819.7 665.2,722.2 720.3,615.5 834.4,579.1 948.5,572.9 1068.6,581.5 1142.5,677.2 1221.9,763.0 1242.7,880.0'/%3E%3C/g%3E%3Cg stroke='rgba(232,50,63,0.26)' stroke-width='0.63' fill='none' opacity='0.75'%3E%3Cpath d='M920.0 880.0 L2517.1 975.9'/%3E%3Cpath d='M920.0 880.0 L971.8 2479.2'/%3E%3Cpath d='M920.0 880.0 L-667.6 1079.2'/%3E%3Cpath d='M920.0 880.0 L575.2 -682.4'/%3E%3Cpath d='M920.0 880.0 L2443.9 392.5'/%3E%3C/g%3E%3C/svg%3E"); background-attachment: fixed; background-size: cover; animation: toile-derive 34s ease-in-out infinite alternate; } /* La toile respire. ⛔ Lentement : c'est un decor, pas un signal. */ @keyframes toile-derive { from { background-position: 0 0; } to { background-position: 38px -26px; } } /* ⛔ Un fond qui bouge n'est pas negociable pour qui a besoin de calme. Ici la toile s'arrete net, elle ne ralentit pas. */ @media (prefers-reduced-motion: reduce) { [data-peau="araignee"] body, [data-peau="araignee"] .rail, [data-peau="araignee"] .case-b { animation: none; } } /* Les coins coupes, la signature de cette peau. `clip-path` sur la case seulement, pas sur son contenu, donc rien n'est rogne. */ .aca-enfant[data-peau="araignee"] .case-b { clip-path: polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px); } /* ═══════════════════════════════════════════════════════════════════════════ LES PETITES VIES, posees par Claude-Core 14 le 2026-08-19. ⛔ REGLE ① TENUE PAR LA STRUCTURE, PAS PAR LA PRUDENCE : les deux couches sont en `position: fixed` et `z-index: -1`, donc elles peignent DERRIERE le contenu. Une case opaque les cache. Il n'y a aucun reglage a rater. ⛔ REGLE ③ : sous « animations reduites », tout s'arrete NET, et les couches sont meme retirees de l'affichage. Voir le bloc en bas de section. La rarete (regle ②) vit dans `mon-academie.js` : une chance sur 8 par clic. ═══════════════════════════════════════════════════════════════════════════ */ [data-peau] body { position: relative; } /* ── La couche DECOR : toujours la, tres lente, tres pale. ─────────────────── */ [data-peau] body::before { content: none; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-repeat: no-repeat; } /* ── La couche PASSAGE : rien, jusqu'a ce qu'un clic la reveille. ──────────── */ [data-peau] body::after { content: none; position: fixed; z-index: -1; pointer-events: none; background-repeat: no-repeat; background-size: contain; } .aca-enfant[data-peau="papier"] body.a-une-vie::after, .aca-enfant[data-peau="cahier"] body.a-une-vie::after, .aca-enfant[data-peau="cases"] body.a-une-vie::after, .aca-enfant[data-peau="neon"] body.a-une-vie::after, .aca-enfant[data-peau="huit-bits"] body.a-une-vie::after, .aca-enfant[data-peau="minuit"] body.a-une-vie::after, .aca-enfant[data-peau="annees80"] body.a-une-vie::after, .aca-enfant[data-peau="phosphore"] body.a-une-vie::after, .aca-enfant[data-peau="araignee"] body.a-une-vie::after, .aca-enfant[data-peau="or"] body.a-une-vie::after, .aca-enfant[data-peau="cosmos"] body.a-une-vie::after, .aca-enfant[data-peau="derniere-lumiere"] body.a-une-vie::after, .aca-enfant[data-peau="halloween"] body.a-une-vie::after, .aca-enfant[data-peau="fetes"] body.a-une-vie::after, .aca-enfant[data-peau="ete"] body.a-une-vie::after { content: ""; } /* ══ HALLOWEEN : la citrouille geante qui tourne, et la sorciere ═══════════ */ .aca-enfant[data-peau="halloween"] body::before { content: ""; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='rgba(255,139,46,0.20)' stroke-width='2.6'%3E%3Cpath d='M60 22c-3-8-10-11-16-10'/%3E%3Crect x='56' y='16' width='9' height='12' rx='3'/%3E%3Cellipse cx='60' cy='70' rx='42' ry='38'/%3E%3Cellipse cx='60' cy='70' rx='27' ry='38'/%3E%3Cellipse cx='60' cy='70' rx='12' ry='38'/%3E%3Cpath d='M22 52c8-6 20-9 38-9s30 3 38 9'/%3E%3Cpath d='M22 88c8 6 20 9 38 9s30-3 38-9'/%3E%3Cpath d='M40 58l10 9-10 9z' fill='rgba(255,139,46,0.13)'/%3E%3Cpath d='M80 58l-10 9 10 9z' fill='rgba(255,139,46,0.13)'/%3E%3Cpath d='M42 86q18 10 36 0' stroke-width='3'/%3E%3C/svg%3E"); /* ⛔ Mesure a l'ecran le 2026-08-19 : a 78vmin dans le coin, elle sortait * du cadre et ne se lisait plus comme une citrouille, juste comme des arcs. * 44vmin, posee un peu en dedans, se lit d'un coup d'oeil. */ background-position: 92% 92%; background-size: 44vmin 44vmin; animation: aca-citrouille 110s linear infinite; transform-origin: 78% 78%; } @keyframes aca-citrouille { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .aca-enfant[data-peau="halloween"] body::after { /* Assez grande pour qu'on la reconnaisse en 8 bits. A 22vmin elle n'etait * qu'une tache. Le rapport suit le viewBox 64x40, sinon elle s'ecrase. */ /* ⛔ Mesure a l'ecran : une traversee HORIZONTALE a mi-hauteur se cache * derriere les cases presque tout du long, parce qu'elles occupent la * colonne du milieu. Une diagonale, elle, part et arrive dans les marges : * on la voit sortir, disparaitre derriere une case, puis ressortir. */ left: 0; top: 0; width: 30vmin; height: 21.25vmin; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 34' shape-rendering='crispEdges'%3E%3C!-- ⛔ Mesure a l'ecran le 2026-08-19 : le manche a 0,46 sur le brun tres sombre d'Halloween etait quasiment invisible, et la sorciere occupait un quart du cadre, donc elle se lisait comme une tache. Cadre resserre, personnage agrandi, manche remonte a 0,66. --%3E%3Cg fill='rgba(255,150,60,0.66)'%3E %3Crect x='2' y='22' width='30' height='2'/%3E %3Crect x='32' y='20' width='2' height='6'/%3E%3Crect x='34' y='18' width='2' height='10'/%3E %3Crect x='36' y='16' width='2' height='14'/%3E%3Crect x='38' y='18' width='2' height='10'/%3E %3Crect x='40' y='20' width='2' height='6'/%3E%3Crect x='42' y='22' width='2' height='2'/%3E%3C/g%3E%3Cg fill='rgba(214,164,255,0.78)'%3E %3Crect x='10' y='4' width='12' height='2'/%3E%3Crect x='8' y='6' width='16' height='2'/%3E %3Crect x='14' y='2' width='4' height='2'/%3E %3Crect x='12' y='8' width='8' height='6'/%3E %3Crect x='10' y='14' width='12' height='8'/%3E%3Crect x='8' y='16' width='2' height='6'/%3E %3Crect x='22' y='16' width='4' height='2'/%3E%3Crect x='26' y='18' width='2' height='2'/%3E %3Crect x='12' y='22' width='4' height='4'/%3E%3Crect x='18' y='22' width='4' height='4'/%3E%3C/g%3E%3Cg fill='rgba(20,10,6,0.85)'%3E%3Crect x='14' y='10' width='4' height='2'/%3E%3C/g%3E%3Cg fill='rgba(255,224,130,0.90)'%3E %3Crect x='14' y='10' width='2' height='2'/%3E%3Crect x='17' y='10' width='2' height='2'/%3E%3C/g%3E%3Cg fill='rgba(214,164,255,0.42)'%3E %3Crect x='4' y='10' width='2' height='2'/%3E%3Crect x='0' y='14' width='2' height='2'/%3E %3Crect x='5' y='18' width='2' height='2'/%3E%3C/g%3E%3C/svg%3E"); animation: aca-sorciere 4.2s linear 1; } @keyframes aca-sorciere { from { transform: translate(-34vw, 76vh) rotate(-4deg); } 50% { transform: translate(46vw, 34vh) rotate(-9deg); } to { transform: translate(132vw, -8vh) rotate(-13deg); } } /* ══ L'ARAIGNEE : elle descend de son fil, regarde, et remonte ═════════════ */ .aca-enfant[data-peau="araignee"] body::after { /* Core 5 : l'ancien passage descendait sous le rail opaque de gauche. La vie rare reste non cliquable, mais passe devant les cartes sur le bord droit pour que l'enfant puisse réellement la voir. */ left: auto; right: clamp(18px, 5vw, 88px); top: -34vh; width: clamp(62px, 9vmin, 104px); height: 30vh; z-index: 24; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 200' fill='none' stroke='rgba(232,50,63,0.42)' stroke-width='1.4'%3E%3Cpath d='M30 0v128'/%3E%3Cg stroke='rgba(238,244,255,0.34)' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M22 140q-12-6-15-18'/%3E%3Cpath d='M22 146q-14 0-22-7'/%3E%3Cpath d='M22 152q-13 5-18 16'/%3E%3Cpath d='M23 158q-9 8-9 20'/%3E%3Cpath d='M38 140q12-6 15-18'/%3E%3Cpath d='M38 146q14 0 22-7'/%3E%3Cpath d='M38 152q13 5 18 16'/%3E%3Cpath d='M37 158q9 8 9 20'/%3E%3C/g%3E%3Cellipse cx='30' cy='150' rx='9' ry='11' fill='rgba(20,26,40,0.85)' stroke='rgba(238,244,255,0.40)'/%3E%3Ccircle cx='30' cy='137' r='5' fill='rgba(20,26,40,0.85)' stroke='rgba(238,244,255,0.40)'/%3E%3Ccircle cx='28' cy='136' r='1.3' fill='rgba(232,50,63,0.85)' stroke='none'/%3E%3Ccircle cx='32' cy='136' r='1.3' fill='rgba(232,50,63,0.85)' stroke='none'/%3E%3C/svg%3E"); background-position: top center; animation: aca-araignee 6.4s cubic-bezier(.34,.8,.4,1) 1; } @keyframes aca-araignee { from { transform: translateY(0); } 38% { transform: translateY(58vh); } 62% { transform: translateY(54vh); } to { transform: translateY(0); } } /* ══ 8 BITS : un ciel de nuages carres, et un champignon qui fait boing ════ */ .aca-enfant[data-peau="huit-bits"] body::before { content: ""; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 80' shape-rendering='crispEdges' fill='rgba(159,196,216,0.13)'%3E%3Crect x='16' y='28' width='48' height='12'/%3E%3Crect x='24' y='20' width='28' height='8'/%3E%3Crect x='8' y='36' width='64' height='8'/%3E%3Crect x='120' y='52' width='60' height='12'/%3E%3Crect x='132' y='44' width='32' height='8'/%3E%3Crect x='112' y='60' width='76' height='8'/%3E%3Crect x='184' y='14' width='36' height='10'/%3E%3Crect x='192' y='8' width='20' height='6'/%3E%3C/svg%3E"); background-position: 0 8vh; background-size: 120vmin auto; animation: aca-nuages 120s linear infinite; } @keyframes aca-nuages { from { background-position-x: -60vmin; } to { background-position-x: 140vmin; } } .aca-enfant[data-peau="huit-bits"] body::after { left: 8vw; bottom: 6vh; width: 8vmin; height: 8vmin; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' shape-rendering='crispEdges'%3E%3Cg fill='rgba(255,95,109,0.42)'%3E%3Crect x='8' y='8' width='24' height='4'/%3E%3Crect x='4' y='12' width='32' height='4'/%3E%3Crect x='4' y='16' width='32' height='4'/%3E%3C/g%3E%3Cg fill='rgba(255,255,255,0.34)'%3E%3Crect x='8' y='12' width='6' height='4'/%3E%3Crect x='26' y='12' width='6' height='4'/%3E%3Crect x='16' y='16' width='8' height='4'/%3E%3C/g%3E%3Cg fill='rgba(255,224,130,0.34)'%3E%3Crect x='12' y='20' width='16' height='12'/%3E%3Crect x='10' y='32' width='20' height='4'/%3E%3C/g%3E%3C/svg%3E"); animation: aca-champignon 1.6s steps(8, end) 1; } @keyframes aca-champignon { from { transform: translateY(14vh) scale(0.6); opacity: 0; } 30% { transform: translateY(-2vh) scale(1); opacity: 1; } 55% { transform: translateY(0) scale(1); opacity: 1; } to { transform: translateY(12vh) scale(0.7); opacity: 0; } } /* ══ LES DOUZE AUTRES LOOKS : un decor lent et une visite rare ══════════ */ @keyframes aca-vie-traverse { from { transform: translateX(-18vw) rotate(-8deg); opacity: 0; } 18% { opacity: .78; } 82% { opacity: .78; } to { transform: translateX(128vw) rotate(12deg); opacity: 0; } } @keyframes aca-vie-tombe { from { transform: translateY(-20vh) rotate(0); opacity: 0; } 20% { opacity: .8; } to { transform: translateY(115vh) rotate(520deg); opacity: 0; } } @keyframes aca-decor-respire { 0%,100% { opacity:.34; } 50% { opacity:.68; } } @keyframes aca-decor-glisse { from { background-position: 0 0; } to { background-position: 100vw 42vh; } } @keyframes aca-decor-balaie { from { transform: translateX(-35vw) rotate(-8deg); } to { transform: translateX(135vw) rotate(8deg); } } .aca-enfant[data-peau="papier"] body::before { content:""; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 80' fill='none' stroke='rgba(36,48,72,0.14)' stroke-width='2'%3E%3Cpath d='M8 58c38-28 66 20 104-8s62-10 98-34' stroke-dasharray='8 7'/%3E%3Cpath d='M185 17l22-8-10 21z' fill='rgba(36,48,72,0.08)'/%3E%3C/svg%3E"); background-position: 82% 84%; background-size: 34vmin auto; animation: aca-decor-respire 28s ease-in-out infinite; } .aca-enfant[data-peau="papier"] body::after { left:-14vw; top:72vh; width:10vmin; height:6vmin; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 48'%3E%3Crect x='8' y='10' width='56' height='28' rx='8' fill='rgba(255,121,139,0.66)' stroke='rgba(36,48,72,0.5)' stroke-width='3'/%3E%3Cpath d='M18 38l-8 6m20-6-6 8m22-8 7 6' stroke='rgba(36,48,72,0.35)' stroke-width='3'/%3E%3C/svg%3E"); animation:aca-vie-traverse 4.4s ease-in-out 1; } .aca-enfant[data-peau="cases"] body::before { content:""; background-image:radial-gradient(circle, rgba(232,50,63,.17) 0 2px, transparent 2.4px); background-size:34px 34px; background-repeat:repeat; animation:aca-decor-respire 24s ease-in-out infinite; } .aca-enfant[data-peau="cases"] body::after { left:-18vw; top:22vh; width:16vmin; height:11vmin; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80'%3E%3Cpath d='M12 40 25 29 20 14 43 20 56 5 67 22 94 15 91 34 112 45 91 54 97 72 71 66 58 78 47 62 21 69 25 51z' fill='rgba(255,224,90,0.72)' stroke='rgba(27,42,71,0.66)' stroke-width='4'/%3E%3Ctext x='60' y='49' text-anchor='middle' font-family='sans-serif' font-size='26' font-weight='900' fill='rgba(27,42,71,0.78)'%3EPOP!%3C/text%3E%3C/svg%3E"); animation:aca-vie-traverse 3.5s steps(9,end) 1; } .aca-enfant[data-peau="neon"] body::before { content:""; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 70' fill='none' stroke='rgba(78,216,255,0.2)' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M15 52 48 16l31 36 35-36 48 36'/%3E%3C/svg%3E"); background-position:92% 12%; background-size:34vmin auto; animation:aca-decor-respire 8s steps(5,end) infinite; } .aca-enfant[data-peau="neon"] body::after { left:-18vw; top:66vh; width:14vmin; height:8vmin; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Crect x='4' y='4' width='112' height='52' rx='12' fill='rgba(8,15,35,0.76)' stroke='rgba(78,216,255,0.76)' stroke-width='4'/%3E%3Ctext x='60' y='40' text-anchor='middle' font-family='sans-serif' font-size='24' font-weight='900' fill='rgba(255,100,220,0.82)'%3EWOW%3C/text%3E%3C/svg%3E"); animation:aca-vie-traverse 4s ease 1; } .aca-enfant[data-peau="minuit"] body::before { content:""; background-image:radial-gradient(circle, rgba(215,229,255,.25) 0 1px, transparent 1.8px); background-size:76px 64px; background-repeat:repeat; animation:aca-decor-respire 16s ease-in-out infinite; } .aca-enfant[data-peau="minuit"] body::after { left:-20vw; top:18vh; width:18vmin; height:5vmin; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 40'%3E%3Cpath d='M4 34 132 10' stroke='rgba(194,219,255,0.2)' stroke-width='7'/%3E%3Cpath d='M70 27 142 8' stroke='rgba(255,255,255,0.72)' stroke-width='3'/%3E%3Ccircle cx='146' cy='7' r='6' fill='rgba(255,232,120,0.85)'/%3E%3C/svg%3E"); animation:aca-vie-traverse 2.8s ease-out 1; } .aca-enfant[data-peau="phosphore"] body::before { content:""; background-image:repeating-linear-gradient(0deg, transparent 0 18px, rgba(82,208,96,.08) 19px 20px); background-repeat:repeat; animation:aca-decor-glisse 70s linear infinite; } .aca-enfant[data-peau="phosphore"] body::after { left:-16vw; top:58vh; width:14vmin; height:7vmin; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 54'%3E%3Crect x='3' y='3' width='124' height='48' fill='rgba(3,18,8,0.82)' stroke='rgba(82,208,96,0.72)' stroke-width='3'/%3E%3Ctext x='15' y='36' font-family='monospace' font-size='24' font-weight='700' fill='rgba(82,208,96,0.84)'%3EOK_%3C/text%3E%3C/svg%3E"); animation:aca-vie-traverse 4.3s steps(12,end) 1; } .aca-enfant[data-peau="or"] body::before { content:""; width:22vw; background:linear-gradient(100deg,transparent,rgba(255,214,92,.16),transparent); animation:aca-decor-balaie 44s linear infinite; } .aca-enfant[data-peau="or"] body::after { left:76vw; top:-18vh; width:7vmin; height:7vmin; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='25' fill='rgba(255,204,70,0.72)' stroke='rgba(82,58,12,0.62)' stroke-width='4'/%3E%3Cpath d='M22 32h20M32 20v24' stroke='rgba(82,58,12,0.55)' stroke-width='4'/%3E%3C/svg%3E"); animation:aca-vie-tombe 3.8s ease-in 1; } .aca-enfant[data-peau="cosmos"] body::before { content:""; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Ccircle cx='60' cy='60' r='28' fill='rgba(131,105,255,0.14)' stroke='rgba(118,210,255,0.2)' stroke-width='3'/%3E%3Cellipse cx='60' cy='60' rx='52' ry='15' fill='none' stroke='rgba(255,170,224,0.18)' stroke-width='4' transform='rotate(-18 60 60)'/%3E%3C/svg%3E"); background-position:88% 78%; background-size:34vmin; animation:aca-citrouille 150s linear infinite; } .aca-enfant[data-peau="cosmos"] body::after { left:-20vw; top:26vh; width:20vmin; height:7vmin; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 52'%3E%3Cpath d='M3 46 145 14' stroke='rgba(120,205,255,0.18)' stroke-width='12'/%3E%3Cpath d='M68 35 153 12' stroke='rgba(255,190,232,0.5)' stroke-width='5'/%3E%3Ccircle cx='160' cy='10' r='8' fill='rgba(255,240,160,0.82)'/%3E%3C/svg%3E"); animation:aca-vie-traverse 3.4s ease-out 1; } .aca-enfant[data-peau="annees80"] body::before { content:""; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 120'%3E%3Cg fill='none' stroke-width='4'%3E%3Cpath d='M18 24h22v22H18z' stroke='rgba(255,90,180,0.16)'/%3E%3Ccircle cx='102' cy='35' r='15' stroke='rgba(80,220,210,0.16)'/%3E%3Cpath d='m136 88 18-30 18 30z' stroke='rgba(255,218,70,0.16)'/%3E%3Cpath d='M36 92q18-30 36 0' stroke='rgba(145,100,255,0.16)'/%3E%3C/g%3E%3C/svg%3E"); background-repeat:repeat; background-size:42vmin auto; animation:aca-decor-glisse 120s linear infinite; } .aca-enfant[data-peau="annees80"] body::after { left:-16vw; top:42vh; width:11vmin; height:11vmin; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 90'%3E%3Cpath d='m45 6 37 70H8z' fill='rgba(255,78,169,0.58)' stroke='rgba(62,230,210,0.7)' stroke-width='5'/%3E%3Ccircle cx='45' cy='53' r='14' fill='rgba(255,226,80,0.56)'/%3E%3C/svg%3E"); animation:aca-vie-traverse 4s steps(10,end) 1; } .aca-enfant[data-peau="cahier"] body::before { content:none; } .aca-enfant[data-peau="cahier"] body::after { left:-18vw; top:64vh; width:14vmin; height:9vmin; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 80' fill='none' stroke='rgba(55,102,175,0.62)' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M8 62c20-44 38 22 59-18s35-18 54-30'/%3E%3Cpath d='m100 12 22 2-8 20'/%3E%3Ccircle cx='42' cy='42' r='6' fill='rgba(232,70,83,0.52)' stroke='none'/%3E%3C/svg%3E"); animation:aca-vie-traverse 4.7s ease-in-out 1; } .aca-enfant[data-peau="fetes"] body::before { content:""; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 80' fill='none'%3E%3Cpath d='M0 12q75 55 150 0t150 0' stroke='rgba(240,248,255,0.18)' stroke-width='3'/%3E%3Cg fill='rgba(255,208,72,0.34)'%3E%3Ccircle cx='42' cy='35' r='6'/%3E%3Ccircle cx='112' cy='38' r='6'/%3E%3Ccircle cx='188' cy='36' r='6'/%3E%3Ccircle cx='260' cy='34' r='6'/%3E%3C/g%3E%3C/svg%3E"); background-position:top center; background-size:100vw auto; animation:aca-decor-respire 6s ease-in-out infinite; } .aca-enfant[data-peau="fetes"] body::after { left:84vw; top:-18vh; width:8vmin; height:8vmin; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none' stroke='rgba(235,247,255,0.75)' stroke-width='4'%3E%3Cpath d='M40 5v70M10 22l60 36M10 58l60-36M18 40h44'/%3E%3Ccircle cx='40' cy='40' r='8' fill='rgba(255,214,80,0.52)'/%3E%3C/svg%3E"); animation:aca-vie-tombe 5s linear 1; } .aca-enfant[data-peau="ete"] body::before { content:""; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100'%3E%3Ccircle cx='118' cy='28' r='18' fill='rgba(255,197,62,0.16)'/%3E%3Cpath d='M0 75q40-22 80 0t80 0' fill='none' stroke='rgba(35,166,185,0.16)' stroke-width='8'/%3E%3C/svg%3E"); background-position:95% 90%; background-size:38vmin auto; animation:aca-decor-respire 18s ease-in-out infinite; } .aca-enfant[data-peau="ete"] body::after { left:-16vw; top:30vh; width:10vmin; height:8vmin; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 70'%3E%3Cpath d='M44 35C22 2 4 18 18 38 4 55 26 68 44 40 62 68 86 55 70 38 86 18 66 2 44 35z' fill='rgba(255,126,87,0.42)' stroke='rgba(43,118,92,0.56)' stroke-width='3'/%3E%3Ccircle cx='44' cy='38' r='6' fill='rgba(43,118,92,0.62)'/%3E%3C/svg%3E"); animation:aca-vie-traverse 5.2s ease-in-out 1; } .aca-enfant[data-peau="derniere-lumiere"] body::before { content:""; width:38vw; background:linear-gradient(94deg,transparent,rgba(255,204,98,.12),transparent); transform-origin:100% 100%; animation:aca-decor-balaie 70s ease-in-out infinite alternate; } .aca-enfant[data-peau="derniere-lumiere"] body::after { left:-14vw; top:32vh; width:8vmin; height:8vmin; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpath d='M40 9 48 31 71 40 48 48 40 71 31 48 9 40 31 31z' fill='rgba(255,214,116,0.66)' stroke='rgba(255,242,205,0.62)' stroke-width='3'/%3E%3Ccircle cx='40' cy='40' r='7' fill='rgba(255,255,240,0.82)'/%3E%3C/svg%3E"); animation:aca-vie-traverse 5.6s ease-in-out 1; } /* ⛔ REGLE ③, SANS EXCEPTION. On ne ralentit pas, on retire. */ @media (prefers-reduced-motion: reduce) { [data-peau] body::before, [data-peau] body::after { content: none !important; animation: none !important; } } * { box-sizing: border-box; } /* ⛔ CES REGLES VIVENT SUR LA COQUE, PAS SUR `body`, ET C'EST TOUT LE SUJET. Les jetons sont declares sur `.aca-enfant` depuis que j'ai retire `:root` pour ne pas deborder sur le reste du site. Un `var(--police)` ecrit sur `body` ne trouve donc RIEN : la declaration devient invalide, et `font-family` retombe sur la valeur du navigateur. ⚠️ MESURE DU 2026-08-23, ET C'EST CE QUI RENDAIT L'ECRAN TERNE : tout l'espace enfant s'affichait en **Times**, la police de secours, alors que le jeton `--police` valait bien « Nunito, Segoe UI, system-ui ». Le jeton etait bon; c'est la regle qui ne le voyait pas. ⛔ Un jeton se resout LA OU IL EST DECLARE, jamais la ou on l'ecrit. */ .coque.aca-enfant { background-color: var(--fond); background-image: var(--trame); background-size: var(--trame-taille); background-attachment: fixed; color: var(--encre); font-family: var(--police); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; } /* `body` ne garde que ce qui ne demande aucun jeton. */ body { margin: 0; } .demo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 9px 18px; background: var(--case); border-bottom: 1px solid var(--ligne); } .demo strong { font-size: 12.5px; font-weight: 800; } .demo span { font-size: 12px; color: var(--encre-2); } /* ═══ COQUILLE ══════════════════════════════════════════════════════════ */ .coque { display: grid; grid-template-columns: var(--rail) 1fr; min-height: 92vh; } .coque.replie { --rail: 66px; } .rail { background: var(--case); border-right: var(--contour) solid var(--ligne); padding: var(--pas) 11px 11px; display: flex; flex-direction: column; gap: 2px; overflow: hidden; } .moi-bloc { display: flex; align-items: center; gap: 10px; padding: 0 5px 14px; } .face { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; background: var(--violet); color: var(--encre-nb); border: var(--contour) solid var(--encre); display: grid; place-items: center; font-size: 19px; font-weight: 900; line-height: 1; } .moi-txt { min-width: 0; } .moi-nom { font-size: 16px; font-weight: 900; letter-spacing: -0.02em; white-space: nowrap; line-height: 1.15; } .moi-titre { max-width: 150px; margin: 2px 0; overflow: hidden; color: var(--or); font-size: 10.5px; font-weight: 900; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; } .moi-niv { font-size: 11px; font-weight: 700; color: var(--encre-2); white-space: nowrap; } .annee-form { flex: 0 0 auto; margin-left: auto; } .annee-select { max-width: 104px; min-height: 34px; padding: 5px 7px; color: var(--encre); background: var(--case-2); border: var(--contour) solid var(--ligne); border-radius: var(--rayon); font: 800 11px var(--police); cursor: pointer; } .annee-select:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; } .mobile-annee-form { grid-column: 1 / -1; display: grid; gap: 6px; padding: 8px 10px; color: var(--encre); background: var(--case-2); border: var(--contour) solid var(--ligne); border-radius: var(--rayon); } .mobile-annee-form label { font-size: 12px; font-weight: 900; } .mobile-annee-form .annee-select { width: 100%; max-width: none; } .joker-form { margin: -5px 5px 8px; } .joker-btn { width: 100%; min-height: 34px; padding: 6px 9px; display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--encre-2); background: var(--case-2); border: var(--contour) solid var(--ligne); border-radius: var(--rayon); font: 800 11px var(--police); cursor: pointer; } .joker-btn:hover, .joker-btn:focus-visible { color: var(--encre); border-color: var(--violet); } .joker-btn:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; } .joker-btn.on { color: var(--encre-nb); background: var(--rose); border-color: var(--rose); } .mobile-joker-form { grid-column: 1 / -1; } .mobile-joker-form .joker-btn { min-height: 44px; } .zone { font: inherit; font-size: 13.5px; font-weight: 700; display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; cursor: pointer; text-align: left; background: transparent; color: var(--encre-2); border: var(--contour) solid transparent; border-radius: var(--rayon); white-space: nowrap; } .zone:hover { background: var(--case-3); color: var(--encre); } .zone:focus-visible { outline: 3px solid var(--cyan); outline-offset: -3px; } .zone svg { flex: 0 0 17px; } .zone .lib { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; } .zone[aria-selected="true"] { background: var(--cyan); color: var(--encre-nb); border-color: var(--cyan); font-weight: 900; } .aca-enfant[data-peau="neon"] .zone[aria-selected="true"], .aca-enfant[data-peau="phosphore"] .zone[aria-selected="true"] { background: transparent; color: var(--cyan); border-color: var(--cyan); } .cpt { flex: 0 0 auto; font-family: var(--chiffres); font-size: 10.5px; font-weight: 800; padding: 1px 6px; background: var(--rose); color: var(--encre-nb); border-radius: var(--rayon-rond); } .zone[aria-selected="true"] .cpt { background: var(--encre-nb); color: var(--encre); } .filet { height: var(--contour); background: var(--ligne); margin: 12px 7px 8px; } .groupe-lbl { font-size: 10px; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; color: var(--encre-2); padding: 0 10px 5px; white-space: nowrap; } .rail-bas { margin-top: auto; padding-top: 10px; display: flex; flex-direction: column; gap: 2px; } .coque.replie .moi-txt, .coque.replie .annee-form, .coque.replie .joker-form, .coque.replie .lib, .coque.replie .groupe-lbl, .coque.replie .cpt { display: none; } .coque.replie .zone { justify-content: center; padding: 8px; } .coque.replie .moi-bloc { justify-content: center; padding: 0 0 14px; } .contenu { padding: var(--pas) 24px 52px; min-width: 0; } .community-embed-card { overflow: hidden; } .community-embed { display: block; width: 100%; height: clamp(620px, 76vh, 860px); border: 0; background: var(--case-2); } .community-fallback { margin: 0; padding: 16px; } /* ═══ CASE ══════════════════════════════════════════════════════════════ */ .case-b { --accent: var(--cyan); background: var(--case); border: var(--contour) solid var(--accent); border-radius: var(--rayon); box-shadow: var(--ombre); margin-bottom: var(--pas); overflow: hidden; } .c-rose { --accent: var(--rose); } .c-cyan { --accent: var(--cyan); } .c-or { --accent: var(--or); } .c-violet { --accent: var(--violet); } .c-vert { --accent: var(--vert); } .c-nu { --accent: var(--encre-2); box-shadow: var(--ombre-nulle); } .c-nu > .bandeau { background: var(--case-3); color: var(--encre); border-bottom-color: var(--ligne); } .bandeau { display: flex; align-items: center; gap: 9px; padding: 8px 14px; background: var(--accent); color: var(--encre-nb); font-size: 11.5px; font-weight: 900; letter-spacing: 0.09em; text-transform: uppercase; border-bottom: var(--contour) solid var(--accent); } .bandeau .droite { margin-left: auto; font-family: var(--chiffres); font-size: 10.5px; font-weight: 800; letter-spacing: 0; } .aca-enfant[data-peau="neon"] .bandeau, [data-peau="phosphore"] .bandeau { background: transparent; color: var(--accent); font-weight: 800; border-bottom-color: var(--ligne); } .aca-enfant[data-peau="neon"] .c-nu > .bandeau, [data-peau="phosphore"] .c-nu > .bandeau { background: transparent; color: var(--encre-2); } .aca-enfant[data-peau="neon"] .case-b { box-shadow: 0 0 30px -8px var(--accent); } .aca-enfant[data-peau="neon"] .go { box-shadow: 0 0 20px -8px var(--accent); } .aca-enfant[data-peau="phosphore"] .case-b { box-shadow: 0 0 0 1px rgba(82,208,96,0.26); } .corps { padding: 15px 17px; } .g { display: grid; gap: var(--pas); } .g2 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: repeat(3, 1fr); } .g .case-b { margin-bottom: 0; } /* ═══ PETITS CARRÉS, avatars et magasin ═════════════════════════════════ Patrice, 2026-08-19 : « la collection est trop grosse, je voudrais des plus petits carrés ». 152 px → 84 px, soit environ 3 fois plus d'items visibles sans défiler. Le nom passe sous la vignette en petit. */ .mini { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 9px; } .tuile { position: relative; padding: 0; border: var(--contour) solid var(--ligne); border-radius: var(--rayon); background: var(--case-2); cursor: pointer; font: inherit; color: var(--encre); text-align: center; overflow: hidden; } .tuile:hover { border-color: var(--accent, var(--cyan)); } .tuile:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; } .tuile[aria-pressed="true"] { border-color: var(--vert); border-width: 3px; } .tuile[disabled] { opacity: 0.5; cursor: not-allowed; } .tuile-vue { aspect-ratio: 1; display: grid; place-items: center; font-size: 30px; background: var(--case-3); } .tuile-bas { padding: 5px 4px 6px; } .tuile-nom { font-size: 10.5px; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tuile-prix { font-family: var(--chiffres); font-size: 10.5px; font-weight: 800; color: var(--or); } .tuile-porte { position: absolute; top: 3px; right: 3px; background: var(--vert); color: var(--encre-nb); font-size: 9px; font-weight: 900; padding: 1px 5px; border-radius: var(--rayon-rond); } /* ═══ Reste des composants ══════════════════════════════════════════════ */ .etat { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: 15px 17px; } .etat-jauge { flex: 1 1 280px; min-width: 210px; } .gros { font-family: var(--chiffres); font-size: 28px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; } .gros-lbl { display: block; margin-top: 5px; font-size: 10px; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; color: var(--encre-2); } .n-or { color: var(--or); } .n-cyan { color: var(--cyan); } .n-rose { color: var(--rose); } .jauge { display: flex; gap: 3px; } .seg { flex: 1; height: 13px; background: var(--creux); border-radius: calc(var(--rayon) / 4); } .seg.on { background: var(--cyan); } .seg.on-rose { background: var(--rose); } .seg.on-or { background: var(--or); } .seg.on-vert { background: var(--vert); } .seg.on-violet { background: var(--violet); } .jauge-lgd { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; font-size: 11.5px; font-weight: 700; color: var(--encre-2); } .jauge-lgd b { color: var(--encre); font-family: var(--chiffres); } .go { display: inline-block; font: inherit; font-size: 15px; font-weight: 900; letter-spacing: 0.02em; text-transform: uppercase; padding: 11px 26px; border: var(--contour) solid var(--rose); border-radius: var(--rayon); background: var(--rose); color: var(--encre-nb); text-decoration: none; cursor: pointer; box-shadow: var(--ombre-p); --accent: var(--rose); } .go:hover { transform: var(--enfoncement); } .go:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; } .go--or { background: var(--or); border-color: var(--or); --accent: var(--or); } .go--p { font-size: 12px; padding: 7px 14px; } .go--creux { background: transparent; color: var(--encre); border-color: var(--ligne); --accent: var(--ligne); box-shadow: var(--ombre-nulle); } .go--creux:hover { background: var(--case-3); } .go[disabled] { background: var(--case-3); color: var(--encre-2); border-color: var(--ligne); cursor: not-allowed; box-shadow: var(--ombre-nulle); } .suite { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 18px 17px; } .suite-txt { flex: 1 1 240px; min-width: 0; } .suite-titre { margin: 0 0 4px; font-size: 23px; font-weight: 900; letter-spacing: -0.025em; line-height: 1.05; } .suite-detail { margin: 0; font-size: 13px; color: var(--encre-2); } .serie { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 14px 17px; } .serie-txt { flex: 1 1 150px; } .serie-titre { margin: 0; font-size: 14px; font-weight: 800; } .serie-sous { margin: 2px 0 0; font-size: 12px; color: var(--encre-2); } .jours { display: flex; gap: 4px; } .jour-b { width: 18px; height: 24px; background: var(--creux); border-radius: calc(var(--rayon) / 3); } .jour-b.on { background: var(--or); } .evt, .mission, .ligne { display: flex; align-items: center; gap: 12px; padding: 12px 17px; border-top: var(--contour) solid var(--ligne); } .evt:first-child, .mission:first-of-type, .ligne:first-of-type { border-top: 0; } .marque { flex: 0 0 30px; width: 30px; height: 30px; display: grid; place-items: center; font-size: 15px; border-radius: var(--rayon); color: var(--encre-nb); } .corps-l { flex: 1 1 auto; min-width: 0; } .titre-l { margin: 0 0 1px; font-size: 13.5px; font-weight: 800; } .detail-l { margin: 0; font-size: 12px; color: var(--encre-2); } .gain { flex: 0 0 auto; font-family: var(--chiffres); font-size: 12px; font-weight: 800; padding: 3px 8px; border: 2px solid; border-radius: var(--rayon-rond); } .g-xp { color: var(--encre); border-color: var(--rose); } .g-p { color: var(--encre); border-color: var(--or); } /* ─── D'où vient la mission, demandé par Patrice le 2026-08-19 ─────────── « d'avoir la boîte de projet immersif ou de projet initiative avec le logo, pour que l'enfant puisse facilement voir qu'est-ce qui est quoi ». */ .source { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 2px 3px; border-radius: var(--rayon-rond); background: var(--case-3); border: var(--contour) solid var(--ligne); font-size: 10.5px; font-weight: 800; color: var(--encre-2); } /* 18 px, et les icones sont dessinees POUR cette taille : viewBox 24, formes pleines, aucun trait sous 2,2 (1,65 px au rendu). ⛔ Les icones de _shared/ ont un viewBox 64 : a 18 px leurs traits de 1,5 tombent a 0,42 px. */ .source-logo { width: 18px; height: 18px; flex: 0 0 18px; display: grid; place-items: center; } .source-logo svg { grid-area: 1 / 1; width: 18px; height: 18px; display: block; } .detail-l .source { margin-top: 3px; } .coche { flex: 0 0 24px; width: 24px; height: 24px; border: var(--contour) solid var(--encre-2); border-radius: var(--rayon); background: transparent; color: transparent; cursor: pointer; display: grid; place-items: center; } .coche.faite { background: var(--vert); border-color: var(--vert); color: var(--encre-nb); } .coche:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; } .compteur { padding: 14px 17px; } .compteur .gros { font-size: 32px; display: block; } .compteur small { display: block; margin-top: 5px; font-size: 12px; color: var(--encre-2); } .semaine { display: flex; align-items: flex-end; gap: 7px; height: 96px; } .sj { flex: 1; display: flex; flex-direction: column; gap: 5px; height: 100%; justify-content: flex-end; } .sj-b { background: var(--cyan); border-radius: calc(var(--rayon) / 3) calc(var(--rayon) / 3) 0 0; min-height: 5px; } .sj-b.auj { background: var(--rose); } .sj-l { text-align: center; font-size: 10.5px; font-weight: 800; color: var(--encre-2); } .mois { display: grid; grid-template-columns: repeat(15, 1fr); gap: 4px; } .mois span { aspect-ratio: 1; background: var(--creux); border-radius: calc(var(--rayon) / 4); } .mois span.on { background: var(--vert); } .mois span.auj { background: var(--rose); } .force + .force { margin-top: 13px; } .force-t { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 5px; } .force-n { font-size: 13px; font-weight: 800; } .force-p { font-family: var(--chiffres); font-size: 12px; font-weight: 800; color: var(--encre-2); } .palier { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: var(--contour) solid var(--ligne); } .palier:first-of-type { border-top: 0; padding-top: 0; } .pastille-niv { flex: 0 0 54px; height: 30px; display: grid; place-items: center; border: var(--contour) solid var(--ligne); border-radius: var(--rayon); font-family: var(--chiffres); font-size: 11.5px; font-weight: 800; color: var(--encre-2); white-space: nowrap; letter-spacing: -0.02em; } .palier.ouvert .pastille-niv { background: var(--vert); color: var(--encre-nb); border-color: var(--vert); } .palier.courant .pastille-niv { background: var(--or); color: var(--encre-nb); border-color: var(--or); } .palier-c { flex: 1 1 auto; min-width: 0; } .palier-n { margin: 0 0 3px; font-size: 13.5px; font-weight: 800; } .palier-r { font-size: 11.5px; color: var(--encre-2); } .palier-etat { flex: 0 0 auto; font-size: 11px; font-weight: 800; color: var(--vert); } /* ─── La collection de titres : des cartes-recompenses, pas un formulaire ── */ .titres-intro { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 12px 14px; border: var(--contour) dashed color-mix(in srgb, var(--or) 72%, var(--ligne)); border-radius: var(--rayon); background: color-mix(in srgb, var(--or) 9%, var(--case-2)); } .titres-intro-sceau { flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center; border: 2px solid var(--or); border-radius: 50%; background: var(--or); color: var(--encre-nb); box-shadow: 0 0 0 4px color-mix(in srgb, var(--or) 18%, transparent); font-size: 19px; } .titres-intro strong, .titres-intro p { display: block; margin: 0; } .titres-intro strong { font-size: 13.5px; line-height: 1.3; } .titres-intro p { margin-top: 3px; color: var(--encre-2); font-size: 12px; line-height: 1.4; } .titres-grille { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 12px; } .carte-titre { --titre-rarete: var(--ligne); appearance: none; position: relative; isolation: isolate; width: 100%; min-height: 148px; display: flex; flex-direction: column; gap: 12px; padding: 15px; overflow: hidden; border: 2px solid color-mix(in srgb, var(--titre-rarete) 68%, var(--ligne)); border-radius: var(--rayon); background: linear-gradient(145deg, color-mix(in srgb, var(--titre-rarete) 10%, var(--case-2)), var(--case-2) 58%); color: var(--encre); box-shadow: var(--ombre-p); font: inherit; text-align: left; cursor: pointer; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; } .carte-titre::after { content: ""; position: absolute; z-index: -1; right: -24px; top: -28px; width: 94px; height: 94px; border: 18px double color-mix(in srgb, var(--titre-rarete) 16%, transparent); border-radius: 50%; transform: rotate(13deg); } .carte-titre:hover { transform: translateY(-2px); border-color: var(--titre-rarete); box-shadow: 0 10px 24px color-mix(in srgb, var(--titre-rarete) 18%, transparent); } .carte-titre:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; } .carte-titre[disabled] { opacity: .56; cursor: wait; transform: none; } .carte-titre.courant, .carte-titre[aria-pressed="true"] { border-color: var(--vert); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vert) 22%, transparent), var(--ombre-p); } .carte-titre-entete, .carte-titre-bas { display: flex; align-items: center; gap: 8px; } .carte-titre-entete { min-height: 29px; } .carte-titre-sceau { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; border: 2px solid var(--titre-rarete); border-radius: 50%; background: var(--case); color: var(--titre-rarete); font-size: 12px; } .carte-titre-rarete { font: 900 10px var(--chiffres); letter-spacing: .1em; text-transform: uppercase; color: var(--titre-rarete); } .carte-titre-nom { flex: 1 1 auto; max-width: 28ch; font-size: clamp(17px,2vw,21px); font-weight: 900; letter-spacing: -.025em; line-height: 1.05; } .carte-titre-bas { justify-content: space-between; margin-top: auto; padding-top: 9px; border-top: 1px dashed color-mix(in srgb, var(--titre-rarete) 42%, var(--ligne)); } .carte-titre-origine { min-width: 0; color: var(--encre-2); font-size: 11px; line-height: 1.25; } .carte-titre-etat { padding: 4px 9px; border: 1px solid currentColor; border-radius: var(--rayon-rond); background: color-mix(in srgb, var(--vert) 9%, var(--case)); white-space: nowrap; } .carte-titre.courant .carte-titre-etat { background: var(--vert); color: var(--encre-nb); border-color: var(--vert); } .carte-titre.rarete-common { --titre-rarete: color-mix(in srgb, var(--encre-2) 72%, var(--ligne)); } .carte-titre.rarete-rare { --titre-rarete: var(--cyan); } .carte-titre.rarete-epic { --titre-rarete: var(--violet); } .carte-titre.rarete-legendary { --titre-rarete: var(--or); } .carte-titre.rarete-secret { --titre-rarete: var(--rose); } /* Papier et Cahier gardent le meme contrat, mais les titres deviennent de petites fiches collectionnees, posees sur la page plutot que dans un tableau. */ .aca-enfant[data-peau="papier"] .carte-titre, .aca-enfant[data-peau="cahier"] .carte-titre { border-radius: 4px; background-color: var(--case); background-image: linear-gradient(90deg, transparent 0 31px, color-mix(in srgb, var(--rose) 24%, transparent) 31px 32px, transparent 32px), repeating-linear-gradient(0deg, transparent 0 25px, color-mix(in srgb, var(--cyan) 13%, transparent) 25px 26px); box-shadow: 4px 5px 0 color-mix(in srgb, var(--encre) 10%, transparent); } .aca-enfant[data-peau="papier"] .carte-titre:nth-child(3n+1), .aca-enfant[data-peau="cahier"] .carte-titre:nth-child(3n+1) { transform: rotate(-.35deg); } .aca-enfant[data-peau="papier"] .carte-titre:nth-child(3n+2), .aca-enfant[data-peau="cahier"] .carte-titre:nth-child(3n+2) { transform: rotate(.3deg); } .aca-enfant[data-peau="papier"] .carte-titre:hover, .aca-enfant[data-peau="cahier"] .carte-titre:hover { transform: translateY(-3px) rotate(0); } .aca-enfant[data-peau="papier"] .carte-titre-nom, .aca-enfant[data-peau="cahier"] .carte-titre-nom { padding-left: 25px; } .rang { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: var(--contour) solid var(--ligne); } .rang:first-of-type { border-top: 0; padding-top: 0; } .rang-n { flex: 0 0 26px; height: 26px; display: grid; place-items: center; border: var(--contour) solid var(--ligne); border-radius: var(--rayon); font-family: var(--chiffres); font-size: 12px; font-weight: 800; } .rang.moi .rang-n { background: var(--rose); color: var(--encre-nb); border-color: var(--rose); } .rang-nom { flex: 1 1 auto; font-size: 13px; font-weight: 700; } .rang-xp { font-family: var(--chiffres); font-size: 12px; color: var(--encre-2); } .essais { display: flex; flex-wrap: wrap; gap: 8px; } /* L'ÉTAT VIDE. Un enfant tout neuf ouvrait des cases vides, sans un mot. ⛔ Il décrit ce qui VA arriver et ce qu'il peut faire, jamais ce qui manque. Aucun reproche, aucun diagnostic : on ne lui dit pas qu'il est en retard. */ .vide { display: grid; place-items: center; gap: 10px; padding: 34px 22px; text-align: center; } .vide-ico { width: 46px; height: 46px; display: grid; place-items: center; border: var(--contour) solid var(--ligne); border-radius: var(--rayon); background: var(--case-3); color: var(--encre-2); } .vide-ico svg { width: 24px; height: 24px; display: block; } .vide-t { margin: 0; font-size: 15px; font-weight: 800; color: var(--encre); } .vide-d { margin: 0; max-width: 40ch; font-size: 12.5px; line-height: 1.5; color: var(--encre-2); } /* ─── Jouer ─────────────────────────────────────────────────────────────── */ .jeux { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 13px; } .jeu { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: var(--contour) solid var(--ligne); border-radius: var(--rayon); background: var(--case-2); color: var(--encre); text-decoration: none; width: 100%; font: inherit; text-align: left; cursor: pointer; } .jeu > div:nth-child(2) { flex: 1 1 auto; min-width: 0; } .jeu:hover { border-color: var(--accent, var(--cyan)); transform: var(--enfoncement); } .jeu:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; } .jeu-ico { flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center; font-size: 20px; border-radius: var(--rayon); color: var(--encre-nb); } .jeu-n { font-size: 14px; font-weight: 800; } .jeu-d { font-size: 11.5px; color: var(--encre-2); } .look-tete { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 17px; } .look-tete .face { flex: 0 0 58px; width: 58px; height: 58px; font-size: 26px; background: var(--rose); } .look-n { font-size: 19px; font-weight: 900; letter-spacing: -0.02em; } .ecusson { display: inline-block; margin-top: 6px; padding: 3px 11px; background: var(--or); color: var(--encre-nb); border: var(--contour) solid var(--or); border-radius: var(--rayon-rond); font-size: 11.5px; font-weight: 900; } .sous-onglets { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: var(--pas); } .so { font: inherit; font-size: 12.5px; font-weight: 800; padding: 7px 14px; border: var(--contour) solid var(--ligne); border-radius: var(--rayon-rond); background: transparent; color: var(--encre-2); cursor: pointer; } .so:hover { color: var(--encre); } .so[aria-selected="true"] { background: var(--cyan); color: var(--encre-nb); border-color: var(--cyan); } .so:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; } .avis { display: flex; align-items: flex-start; gap: 10px; padding: 12px 17px; border-top: var(--contour) solid var(--ligne); font-size: 12px; color: var(--encre-2); } /* ═══ CORE 5 : une interface plus simple, lisible et honnête ════════════ */ .demo { position: relative; z-index: 30; } .demo strong { letter-spacing: .08em; text-transform: uppercase; } .demo .apercu-note { max-width: 60ch; } .zone { min-height: 44px; } .go { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } .bandeau { font-size: 12px; } .detail-l, .suite-detail, .serie-sous, .jeu-d { font-size: 13px; } .prochaine-intro { margin: 0 0 10px; font-size: 14px; color: var(--encre-2); } .suite--priorite { padding: 20px; gap: 18px; } .suite-visuel { flex: 0 0 82px; width: 82px; height: 82px; display: grid; place-items: center; border: var(--contour) solid var(--encre); border-radius: var(--rayon); background: var(--rose); color: var(--encre-nb); font-size: 38px; box-shadow: var(--ombre); transform: rotate(-2deg); } .suite-visuel--logo { overflow: hidden; padding: 7px; background: #fff; } .suite-visuel--logo img { width: 100%; height: 100%; display: block; object-fit: contain; } .suite-produit { display: inline-flex; width: fit-content; margin: 0 0 7px; padding: 3px 9px; border: 1px solid var(--ligne); border-radius: 999px; background: var(--case-3); color: var(--encre-2); font-size: 11px; font-weight: 850; letter-spacing: .035em; } .suite--priorite .suite-titre { font-size: clamp(22px, 3vw, 34px); line-height: 1.05; } .suite--priorite .go { min-width: 150px; font-size: 15px; } .resume-secondaire { opacity: .92; } .etat-produit { display: inline-flex; align-items: center; min-height: 24px; margin-left: auto; padding: 2px 8px; border: 1px solid currentColor; border-radius: 999px; font-size: 10px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; } .etat-produit--pret { color: var(--vert); } .etat-produit--bientot { color: var(--encre-2); } .jeu { min-height: 92px; align-items: stretch; } .jeu-ico { width: 64px; height: auto; flex-basis: 64px; font-size: 28px; overflow: hidden; position: relative; } .jeu-ico::after { content: ""; position: absolute; inset: 7px; border: 2px solid rgba(255,255,255,.5); border-radius: calc(var(--rayon) / 2); transform: rotate(7deg); } .mission { gap: 12px; } .logo-projet, .ico-l--logo { flex: 0 0 46px; width: 46px; height: 46px; overflow: hidden; display: grid; place-items: center; border-radius: calc(var(--rayon) / 2); background: #0c1020; } .logo-projet img, .ico-l--logo img { width: 100%; height: 100%; display: block; object-fit: contain; } .ico-l.ico-l--logo { font-size: 0; } .zone-logo { flex: 0 0 24px; width: 24px; height: 24px; display: block; object-fit: contain; border-radius: 6px; } .mobile-zone-logo { width: 24px; height: 24px; display: inline-block; object-fit: contain; vertical-align: middle; border-radius: 6px; } .mission-infos { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 6px; } .mission-info { padding: 2px 7px; background: var(--case-3); border: 1px solid var(--ligne); border-radius: 999px; color: var(--encre-2); font-size: 11px; font-weight: 750; } .mission-action { flex: 0 0 auto; } .coche[aria-disabled="true"] { cursor: not-allowed; opacity: .62; } .look-statut { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 7px; } .look-puce { display: inline-flex; padding: 3px 9px; background: var(--case-3); border: 1px solid var(--ligne); border-radius: 999px; font-size: 11px; font-weight: 800; } .look-apercu { display: none; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 var(--pas); padding: 12px 15px; background: var(--case); border: var(--contour) solid var(--cyan); border-radius: var(--rayon); box-shadow: var(--ombre); } .look-apercu.actif { display: flex; } .look-apercu strong { margin-right: auto; } .palier[data-verrouille="true"] { opacity: .78; } .palier[data-verrouille="true"] .palier-etat { color: var(--encre-2); } .classement-replie .classement-corps { display: none; } .classement-bouton { width: 100%; justify-content: space-between; } .mobile-plus, .mobile-menu { display: none; } .mobile-menu { position: fixed; inset: auto 10px 76px; z-index: 60; padding: 12px; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; background: var(--case); border: var(--contour) solid var(--ligne); border-radius: var(--rayon); box-shadow: 0 18px 60px rgba(0,0,0,.34); } .mobile-menu button, .mobile-menu a { min-height: 48px; padding: 8px 10px; display: flex; align-items: center; font: inherit; font-weight: 850; text-align: left; text-decoration: none; color: var(--encre); background: var(--case-3); border: 1px solid var(--ligne); border-radius: var(--rayon); } .mobile-menu button:focus-visible, .mobile-menu a:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; } .apercu-toast { position: fixed; left: 50%; bottom: 24px; z-index: 100; width: min(520px, calc(100% - 32px)); transform: translate(-50%, 24px); padding: 13px 16px; background: var(--encre); color: var(--fond); border: 2px solid var(--cyan); border-radius: var(--rayon); box-shadow: 0 16px 50px rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; font-weight: 750; } .apercu-toast.visible { opacity: 1; transform: translate(-50%, 0); } .parcours { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 18px; background: rgba(12,18,32,.72); backdrop-filter: blur(5px); } .parcours[hidden] { display: none; } .parcours-carte { width: min(620px,100%); background: var(--case); color: var(--encre); border: 3px solid var(--cyan); border-radius: var(--rayon); box-shadow: 0 24px 80px rgba(0,0,0,.45); overflow: hidden; } .parcours-tete, .parcours-actions { display: flex; align-items: center; gap: 10px; padding: 14px 18px; } .parcours-tete { background: var(--cyan); color: var(--encre-nb); } .parcours-tete strong { margin-right: auto; } .parcours-corps { padding: 26px 22px; min-height: 230px; } .parcours-ico { width: 76px; height: 76px; display: grid; place-items: center; margin-bottom: 14px; background: var(--violet); border: 2px solid var(--encre); border-radius: 50%; font-size: 36px; } .parcours-corps h2 { margin: 0 0 8px; font-size: clamp(24px,5vw,36px); line-height: 1.1; } .parcours-corps p { margin: 0; max-width: 48ch; color: var(--encre-2); } .parcours-actions { justify-content: flex-end; border-top: 1px solid var(--ligne); } /* ─── Arbre XP : une route, 27 récompenses, aucune monnaie ─────────────── */ .xp-entete { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 18px; align-items: center; padding: 20px; } .xp-entete h2 { margin: 0 0 7px; font-size: clamp(26px,4vw,42px); line-height: 1; } .xp-entete p { margin: 0; max-width: 58ch; color: var(--encre-2); line-height: 1.5; } .xp-prochain { min-width: 210px; padding: 15px; background: var(--case-3); border: var(--contour) solid var(--ligne); border-radius: var(--rayon); } .xp-prochain strong, .xp-prochain span { display: block; } .xp-prochain strong { margin: 3px 0; font-size: 18px; } .xp-prochain span { color: var(--encre-2); font-size: 12px; } .xp-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 13px; } .xp-coffre { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 10px; } .xp-recompense { min-height: 86px; display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--ligne); border-radius: var(--rayon); background: var(--case-2); } .xp-recompense-ico { width: 38px; height: 38px; display: grid; place-items: center; background: var(--case-3); border: 1px solid var(--ligne); border-radius: var(--rayon); font-size: 20px; } .xp-recompense strong, .xp-recompense small { display: block; } .xp-recompense small { margin-top: 2px; color: var(--encre-2); } .xp-recompense.nouvelle { border-color: var(--or); box-shadow: 0 0 0 2px color-mix(in srgb,var(--or) 25%,transparent); } .xp-arbre { list-style: none; position: relative; margin: 0; padding: 5px 0 5px 34px; display: grid; gap: 8px; } .xp-arbre::before { content: ""; position: absolute; left: 15px; top: 18px; bottom: 18px; width: 4px; background: linear-gradient(var(--vert) 0 53%, var(--or) 53% 57%, var(--ligne) 57%); box-shadow: 0 0 0 1px var(--ligne); } .xp-noeud { position: relative; display: grid; grid-template-columns: 62px 42px minmax(140px,1fr) auto; gap: 10px; align-items: center; min-height: 58px; padding: 8px 12px; background: var(--case-2); border: 1px solid var(--ligne); border-radius: var(--rayon); } .xp-noeud::before { content: ""; position: absolute; left: -27px; width: 14px; height: 14px; background: var(--case); border: 3px solid var(--ligne); border-radius: 50%; } .xp-noeud.gagne::before { background: var(--vert); border-color: var(--vert); } .xp-noeud.prochain { border-color: var(--or); box-shadow: var(--ombre-p); } .xp-noeud.prochain::before { width: 18px; height: 18px; left: -29px; background: var(--or); border-color: var(--or); } .xp-noeud.a-venir { opacity: .64; } .xp-niveau { font: 800 11px var(--chiffres); color: var(--encre-2); text-transform: uppercase; } .xp-ico { width: 40px; height: 40px; display: grid; place-items: center; background: var(--case-3); border: 1px solid var(--ligne); border-radius: var(--rayon); font-size: 20px; } .xp-nom { font-weight: 850; } .xp-type, .xp-etat { color: var(--encre-2); font-size: 12px; } .xp-etat { text-align: right; } .xp-noeud.gagne .xp-etat { color: var(--vert); font-weight: 800; } .xp-noeud.prochain .xp-etat { color: var(--or); font-weight: 900; } .pixel-feu { position: fixed; inset: 0; z-index: 120; pointer-events: none; } .pixel-feu span { position: fixed; left: var(--x); top: var(--y); width: 8px; height: 8px; background: var(--pc); box-shadow: 0 0 0 2px rgba(255,255,255,.24); animation: pixel-pop 900ms steps(5,end) forwards; } @keyframes pixel-pop { 0% { opacity: 1; transform: translate(-4px,-4px) scale(1); } 72% { opacity: 1; transform: translate(var(--dx),var(--dy)) scale(1); } 100% { opacity: 0; transform: translate(var(--dx),calc(var(--dy) + 22px)) scale(.5); } } @media (max-width: 680px) { .xp-entete { grid-template-columns: 1fr; } .xp-prochain { min-width: 0; } .xp-noeud { grid-template-columns: 52px 38px minmax(0,1fr); } .xp-etat { grid-column: 3; text-align: left; } .titres-grille { grid-template-columns: 1fr; } .carte-titre { min-height: 132px; } } @media (max-width: 680px) { body { padding-bottom: 72px; font-size: 16px; } .demo { padding: 10px 12px; } .demo .apercu-note { display: none; } .coque { display: block; min-height: 0; } .rail { position: fixed; inset: auto 0 0; z-index: 50; height: 68px; padding: 5px 7px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; border: 0; border-top: var(--contour) solid var(--ligne); overflow: visible; } .rail > * { display: none !important; } .rail .zone[data-pane="accueil"], .rail .zone[data-pane="liste"], .rail .zone[data-pane="jouer"], .rail .mobile-plus { display: flex !important; } .rail .zone { min-height: 56px; padding: 5px 3px; flex-direction: column; justify-content: center; gap: 2px; } .rail .zone .lib { display: block !important; flex: 0 0 auto; font-size: 10.5px; overflow: visible; } .rail .zone svg, .rail .zone-logo { width: 20px; height: 20px; } .contenu { padding: 14px 12px 32px; } .community-embed { height: max(620px, calc(100vh - 150px)); } .mobile-menu:not([hidden]) { display: grid; } .suite--priorite { align-items: flex-start; } .suite-visuel { flex-basis: 58px; width: 58px; height: 58px; font-size: 28px; } .suite--priorite .go { width: 100%; } .mission { align-items: flex-start; flex-wrap: wrap; } .mission .corps-l { flex-basis: calc(100% - 48px); } .mission--avec-logo .corps-l { flex-basis: calc(100% - 106px); } .mission-action { margin-left: 36px; } .mission--avec-logo .mission-action { margin-left: 94px; } } @media (max-width: 980px) { .coque { grid-template-columns: 66px 1fr; --rail: 66px; } .rail .moi-txt, .rail .annee-form, .rail .joker-form, .rail .lib, .rail .groupe-lbl, .rail .cpt { display: none; } .rail .zone { justify-content: center; padding: 8px; } .rail .moi-bloc { justify-content: center; padding: 0 0 14px; } .g2, .g3 { grid-template-columns: 1fr; } .contenu { padding: var(--pas) 14px 40px; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } .pixel-feu { display: none; } } /* ═══════════════════════════════════════════════════════════════════════════ * SORTIR DE LA COLONNE DU THEME. * * ⛔ MESURE DU 2026-08-23, dans le navigateur : la coque rendait 645 px sur une * fenetre de 1280. Ses PARENTS faisaient tous 1280 : le serrage venait de la * coque elle-meme, par cette regle du theme de blocs : * * .is-layout-constrained > :where(:not(.alignfull)...) { * max-width: var(--wp--style--global--content-size); * } * * ⚠️ ELLE VISE L'ENFANT DIRECT, PAS LE CONTENEUR. La trappe posee ce matin dans * mon-academie.css elargit les CONTENEURS, ce qui etait juste pour l'ancien * ecran mais ne touche pas cette regle-ci. Deux serrages differents, deux * corrections differentes; croire que l'une couvre l'autre m'a coute une * capture ou Patrice ne reconnaissait plus son interface. * * ⛔ `!important` est necessaire : la regle du theme est un `:where()`, donc de * specificite ZERO, mais elle est injectee en ligne APRES nos feuilles. Sans * `!important` c'est l'ordre qui tranche, et nous perdons. * ═══════════════════════════════════════════════════════════════════════════ */ .coque.aca-enfant { max-width: none !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } /* ═══════════════════════════════════════════════════════════════════════════ * L'ECRAN COMPLET : PAS DE MENU DU THEME EN HAUT, PAS DE PIED EN BAS. * * Patrice, 2026-08-23 : « je ne veux pas l'espece de menu theme en haut, puis * de footer de theme en bas. Je prefererais que l'enfant se dirige dans cette * page-la avec le menu qu'on a cree pour lui sur le cote. » * * ⛔ CE QUE CACHAIT CE DECOR, MESURE : un entete de 67 px qui listait * SOIXANTE-TROIS liens (le theme se rabat sur « toutes les pages du site » * quand son menu est vide), et un pied de 489 px portant « Blog, About, FAQs, * Authors, Events, Shop, Patterns, Themes », le contenu de DEMONSTRATION livre * avec `twentytwentyfive`. Personne ne l'avait ecrit, il est venu tout seul. * * ⚠️ ON CACHE, ON NE SUPPRIME PAS. Un `display:none` en CSS se retire en une * ligne et ne touche a aucun crochet d'un autre greffon. Servir un gabarit nu * par `template_include` aurait coupe des crochets que d'autres produits * posent sur l'entete, sans qu'aucun d'eux ne s'en apercoive. * * ⛔ LA GARDE `body.aca-mon-academie-fullscreen` EST OBLIGATOIRE. Sans elle on * decapiterait le site entier. Cette classe n'est posee que sur une page qui * porte le raccourci de l'espace enfant. * * ⚠️ ET LA SORTIE A DU SUIVRE : le seul bouton de deconnexion de la page vivait * dans cet entete. Il est maintenant dans le rail, en bas. Sur un appareil de * famille partage, un enfant doit pouvoir sortir de son compte sans demander a * un adulte. * ═══════════════════════════════════════════════════════════════════════════ */ body.aca-mon-academie-fullscreen .wp-site-blocks > header.wp-block-template-part, body.aca-mon-academie-fullscreen .wp-site-blocks > footer.wp-block-template-part, body.aca-mon-academie-fullscreen .wp-block-post-title { display: none !important; } /* Le titre « Mon AcadémieCo » du theme faisait doublon avec le rail, qui porte deja le nom de l'enfant et sa navigation. */ body.aca-mon-academie-fullscreen .wp-site-blocks > main { padding-top: 0 !important; padding-bottom: 0 !important; } /* ⛔ CACHER L'ENTETE NE REPREND PAS SA PLACE. Le theme de blocs garde ses espacements verticaux sur TROIS niveaux d'enveloppes, et ils s'additionnent : `main` en marge de 70 px, le groupe pleine largeur en remplissage de 70 px, et le contenu en marge de 19,2 px. Mesure du 2026-08-23 : la coque commencait a 159 px du haut, sous une bande blanche vide. ⚠️ Ma premiere regle ne visait que le REMPLISSAGE du `main`, alors que le gros du vide etait une MARGE, et sur un bloc plus profond. Le remplissage HORIZONTAL reste en place : il n'a jamais gene, et l'enlever collerait la coque aux bords sur les themes qui l'utilisent pour respirer. */ body.aca-mon-academie-fullscreen .wp-site-blocks > main, body.aca-mon-academie-fullscreen .wp-site-blocks > main > .wp-block-group, body.aca-mon-academie-fullscreen .entry-content { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* ═══════════════════════════════════════════════════════════════════════════ LES BULLES FLOTTANTES N'ONT PLUS LEUR PLACE ICI ═══════════════════════════════════════════════════════════════════════════ Patrice, 2026-08-21 : « je préférerais que l'enfant se dirige dans cette page-là avec le menu qu'on a créé pour lui sur le côté ». Deux elements en position fixe se posaient PAR-DESSUS le bandeau « Ta progression » et en cachaient la moitie : #academy-economy-widget son niveau et ses pierres (a nous) #aca-menu son nom et son compte (a Commerce) ⛔ RIEN N'EST PERDU, et c'est la seule raison pour laquelle on peut les cacher : le rail porte deja son prenom, son niveau, ses pierres, le lien vers l'espace parent et la deconnexion. Cacher une sortie sans en offrir une autre enfermerait l'enfant dans la page. ⚠️ LA GARDE `body.aca-mon-academie-fullscreen` EST OBLIGATOIRE. `#aca-menu` appartient a Commerce et sert sur TOUT le site : sans la garde on le ferait disparaitre partout, depuis un fichier qui ne lui appartient pas. ⚠️ `#academy-notifications` reste visible : c'est un message qui arrive, pas un meuble. Le cacher avalerait ce qu'on a a dire a l'enfant. ══════════════════════════════════════════════════════════════════════════ */ body.aca-mon-academie-fullscreen #academy-economy-widget, body.aca-mon-academie-fullscreen #aca-menu { display: none !important; } /* ═══════════════════════════════════════════════════════════════════════════ UNE ZONE BARREE : GRISE, ET QUI NE FAIT PAS SEMBLANT ═══════════════════════════════════════════════════════════════════════════ Patrice, 2026-08-23 : « CoTV peut être grisonné, genre pas accessible; tu cliques dessus, ça ne l'access pas », et « juste pour être sûr qu'il n'y ait pas de gossage ». ⛔ `pointer-events: none` A ETE ECARTE EXPRES. Il empeche aussi le SURVOL, donc l'infobulle qui explique ce qui ouvre CoTV ne paraitrait jamais, et un enfant qui clique n'aurait aucune reponse. Le clic est arrete par le script; ici on se contente de le montrer, et le curseur dit deja tout. ⚠️ L'opacite reste a 0,55 et non plus bas : en dessous, le libelle tombe sous le seuil de lecture et la zone devient un rectangle gris illisible. ══════════════════════════════════════════════════════════════════════════ */ .coque.aca-enfant .rail .zone--barree { opacity: .55; cursor: not-allowed; } .coque.aca-enfant .rail .zone--barree:hover, .coque.aca-enfant .rail .zone--barree:focus-visible { background: transparent; } .coque.aca-enfant .rail .zone--barree .cadenas { margin-left: auto; font-size: 12px; line-height: 1; opacity: .8; } /* ═══════════════════════════════════════════════════════════════════════════ LES VRAIES IMAGES D'AVATARS TIENNENT DANS LEUR CASE ═══════════════════════════════════════════════════════════════════════════ ⛔ LA MAQUETTE N'AVAIT QUE DES EMOJIS, donc aucune regle ne parlait d'images, et rien ne bornait celles que le catalogue sert vraiment. Mesure du 2026-08-23 dans le navigateur : chaque avatar s'affichait en **512 x 512**, sa taille naturelle, avec `max-width: none`. Une tuile de 81 px de large devenait haute de 512 px, l'image debordait par-dessus ses voisines, et l'entete du look etait un carre geant. ⚠️ `object-fit: cover` ET PAS `contain` : un avatar est un portrait, il doit remplir son medaillon. `contain` laisserait des bandes vides autour et les tuiles n'auraient plus la meme allure d'une image a l'autre. ⚠️ `overflow: hidden` sur la CASE, pas seulement une taille sur l'image : une image plus grande que sa case deborderait quand meme sans lui. ══════════════════════════════════════════════════════════════════════════ */ .coque.aca-enfant .tuile-vue, .coque.aca-enfant .face { overflow: hidden; } .coque.aca-enfant .tuile-vue img, .coque.aca-enfant .face img { display: block; width: 100%; height: 100%; max-width: 100%; object-fit: cover; /* Le haut d'un portrait porte le visage : on coupe par le bas, jamais par les yeux. */ object-position: center top; } /* La case garde sa forme meme quand l'image est encore en train d'arriver. */ .coque.aca-enfant .tuile-vue { aspect-ratio: 1 / 1; width: 100%; } /* ═══════════════════════════════════════════════════════════════════════════ `.mot` : LE PETIT TEXTE QUI PARLE A L'ENFANT ═══════════════════════════════════════════════════════════════════════════ ⛔ IL A EXISTE PARCE QUE J'AI REUTILISE UNE CLASSE QUI VOULAIT DIRE AUTRE CHOSE. `.mini` est la GRILLE DE TUILES de la maquette (`display: grid; grid-template-columns: repeat(auto-fill, minmax(84px,1fr))`), et j'y ai mis quinze paragraphes d'etat vide. Un `

` transforme en grille empile ses mots en colonne : mesure du 2026-08-23, « Un groupe arrive avec un projet ou un club » s'affichait sur SEPT lignes de trois mots, dans une carte large de 760 px. ⚠️ Le nom d'une classe n'est pas une description : `.mini` disait « petit », et voulait dire « grille de petites tuiles ». Lire la regle, pas le nom. ══════════════════════════════════════════════════════════════════════════ */ .coque.aca-enfant .mot { margin: 0 0 10px; font-size: 13px; line-height: 1.55; color: var(--encre-2); /* La lecture reste confortable meme sur un tres large ecran. */ max-width: 62ch; } .coque.aca-enfant .mot:last-child { margin-bottom: 0; }