/** * PlayAwale — Page « Apprendre les coups de l'awalé » * ----------------------------------------------------------------------------- * Une page d'apprentissage : cinq coups nommés, expliqués en quatre temps, puis * illustrés par de vraies positions. Le vocabulaire visuel est celui du reste du * site — mêmes cartes, mêmes voiles de verre, même ambre. * * LE PLATEAU N'EST PAS REDESSINÉ ICI * Il vient de components/board.css et du thème du jeu, avec le même balisage que * board-view.js construit. Cette feuille ne fait que deux choses : * · lui donner une taille de DIAGRAMME — plusieurs par page, et non un seul * plateau qui remplit l'écran ; * · poser les quatre marques qui racontent le coup — le trou joué, le chemin * du semis, les trous raflés, les coups qui suivent — et le numéro des trous * dont le texte parle. * Tout le reste — le bois, les creux, les graines, les charnières — est déjà * dessiné par le jeu, et le sera toujours de la même façon. * * @package PlayAwale * @version 2.0 * @author Nicolas Lion — Développeur web — https://nlion.fr * @copyright 2026 Nicolas Lion */ /* ============================================================================= LA PAGE ============================================================================= */ .pieges-page { display: flex; flex-direction: column; align-items: center; gap: var(--space-xl); } /* Une colonne lisible : au-delà, l'œil perd la ligne. */ .pieges-page > * { width: 100%; max-width: min(92vw, 940px); margin-inline: auto; } .pieges-head { text-align: center; } /* PLUS PETIT QUE LE TITRE DES AUTRES PAGES — 29/09/2026 : « le titre prend trop de place ». « Stratégie de l'awalé : les cinq coups qui gagnent » est une phrase, et non un mot comme « Règles du jeu » : à la taille commune (jusqu'à 3,2 rem), elle occupait deux ou trois lignes en Joti One. */ .pieges-title { margin: 0 0 var(--space-xs); font-family: var(--font-display); font-size: clamp(1.4rem, 2.6vw, 2.1rem); line-height: 1.2; text-shadow: var(--shadow-heading); } .pieges-lead { margin: 0 auto; max-width: 60ch; font-size: var(--font-size-lg); color: var(--color-text-muted); } /* ============================================================================= L'AVERTISSEMENT : C'EST UN ALGORITHME QUI A RELEVÉ CES MOTIFS ----------------------------------------------------------------------------- En tête, et il ne se fond pas dans le décor : le lecteur doit le savoir avant de lire, pas après. ============================================================================= */ /* CE QU'ON VA APPRENDRE, SOUS LE TITRE Plus discret que le chapeau, plus présent qu'une note : c'est la phrase qui décide si on lit la suite. */ .pieges-promise { max-width: 46rem; margin: var(--space-md) auto 0; font-size: var(--font-size-sm); line-height: 1.6; color: var(--color-text-muted); } .pieges-robot { padding: var(--space-lg); text-align: left; background-color: var(--color-surface); background-image: var(--gradient-surface-raised); border-radius: var(--radius-lg); box-shadow: var(--shadow-raised); /* Le liseré ambre le désigne sans l'encadrer d'une alerte : ce n'est pas un avertissement de danger, c'est une précision d'honnêteté. */ border-left: 4px solid var(--color-brand-amber); } .pieges-robot__title { margin: 0 0 var(--space-xs); font-family: var(--font-display); font-size: var(--font-size-lg); } .pieges-robot p { margin: 0 0 var(--space-xs); line-height: 1.55; } .pieges-robot p:last-child { margin-bottom: 0; } .pieges-robot__date { font-size: var(--font-size-sm); color: var(--color-text-muted); } /* ============================================================================= LE MÉCANISME COMMUN, avant les trois motifs ============================================================================= */ /* LE SOMMAIRE : LES LEÇONS, PUIS LES ANNEXES ----------------------------------------------------------------------- Les deux dernières entrées — le tableau des ouvertures et la méthode — ne sont pas des leçons : on y revient, on ne commence pas par elles. Elles s'en distinguent par un filet au-dessus et une encre plus pâle, sans quitter la liste numérotée : elles font partie de la page. */ /* UN FILET HORIZONTAL NE MARCHE PAS DANS UNE LISTE EN LIGNE Le sommaire est une rangée qui passe à la ligne toute seule — « flex-wrap ». Un « border-top » sur deux de ses éléments y traçait deux tirets au milieu de la rangée et forçait un retour à la ligne disgracieux : mesuré à l écran, les entrées 7 et 8 se retrouvaient chacune sur sa ligne, décalées. On sépare donc PAR LA GAUCHE, comme on sépare deux mots sur une même ligne, et l encre plus pâle fait le reste. */ .pieges-menu__aside { padding-left: var(--space-md); border-left: 1px solid var(--color-brand-amber-light); color: var(--color-text-muted); } /* Le filet ne se met que sur la PREMIÈRE annexe : deux traits d affilée sépareraient les annexes entre elles, ce qui n a pas de sens. */ .pieges-menu__aside + .pieges-menu__aside { padding-left: 0; border-left: 0; } .pieges-menu__aside a { color: inherit; } .pieges-basics { padding: var(--space-md) var(--space-lg); text-align: left; background-color: var(--color-surface-glass); border-radius: var(--radius-md); } .pieges-basics__title { margin: 0 0 var(--space-xs); font-family: var(--font-display); font-size: var(--font-size-base); } .pieges-basics ol { margin: 0; padding-left: 1.3em; line-height: 1.6; } /* LA TROISIÈME LIGNE EST LA LEÇON, les deux autres sont la règle. Elle est déjà en gras dans le balisage ; ici elle prend le fond ambré des choses qu'on retient. */ .pieges-basics li:last-child { margin-top: var(--space-sm); padding: var(--space-xs) var(--space-sm); background-color: var(--color-brand-amber-light); border-radius: var(--radius-sm); } .pieges-basics li + li { margin-top: var(--space-2xs); } /* ============================================================================= UN MOTIF ============================================================================= */ /* CHAQUE COUP EST UNE ÉTAPE, ET SE DÉTACHE DE LA PRÉCÉDENTE ----------------------------------------------------------------------- Une page de cinq leçons qui s'enchaînent sans respiration se lit comme un seul bloc, et l'on perd le fil. Un filet et de l'air : on voit qu'on change de coup avant même d'avoir lu le titre. Le premier n'en a pas besoin : il suit le sommaire, qui a déjà séparé. */ .pieges-motif { text-align: left; padding-top: var(--space-xl); border-top: 1px solid var(--color-brand-amber-light); } .pieges-motif:first-of-type { padding-top: 0; border-top: 0; } .pieges-motif__head { margin-bottom: var(--space-md); } /* LE RANG : « Coup 2 sur 5 » ----------------------------------------------------------------------- C'est ce qui transforme une liste en parcours. Petit, en capitales espacées, au-dessus du titre : on le lit avant le nom du coup, et l'on sait aussitôt où l'on en est. IL EST « aria-hidden » DANS LE BALISAGE, et c'est voulu : un lecteur d'écran annonce déjà les titres et leur nombre. « Coup 2 sur 5 » lu à voix haute avant chaque titre serait une redite. */ .pieges-motif__rank { margin: 0 0 var(--space-2xs); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted); } .pieges-motif__title { margin: 0; font-family: var(--font-display); font-size: var(--font-size-title); text-shadow: var(--shadow-heading); } .pieges-motif__subtitle { margin: 0 0 var(--space-2xs); font-size: var(--font-size-lg); color: var(--color-text-muted); } /* Le compte : ce qui dit que le motif se rencontre vraiment. */ .pieges-motif__count { display: inline-block; margin: 0; padding: 0.15em 0.7em; font-size: var(--font-size-sm); color: var(--color-brand-dark); background-color: var(--color-brand-amber-light); border-radius: var(--radius-full); } /* ============================================================================= LA LEÇON : ce qu'on cherche, pourquoi, comment, et ce qui gâche ============================================================================= */ .pieges-lesson { margin-bottom: var(--space-lg); padding: var(--space-lg); background-color: var(--color-surface); background-image: var(--gradient-surface-raised); border-radius: var(--radius-lg); box-shadow: var(--shadow-raised); } /* La phrase qui définit le motif : plus grosse, elle porte tout le reste. */ .pieges-lesson__what { margin: 0 0 var(--space-md); max-width: 62ch; font-size: var(--font-size-lg); line-height: 1.55; } .pieges-lesson__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); } @media (min-width: 52rem) { .pieges-lesson__grid { grid-template-columns: repeat(3, 1fr); } } .pieges-lesson__block { padding: var(--space-sm) var(--space-md); background-color: var(--color-surface-glass); border-radius: var(--radius-md); } .pieges-lesson__block h3 { margin: 0 0 var(--space-2xs); font-family: var(--font-display); font-size: var(--font-size-base); } .pieges-lesson__block p { margin: 0; font-size: var(--font-size-sm); line-height: 1.55; color: var(--color-text-muted); } /* Celui qui répond à la vraie question — « et s'il joue bien ? » — porte la couleur de ce qu'on regarde d'abord. */ .pieges-lesson__block--why { border-left: 3px solid var(--color-brand-amber); } /* Et celui qui met en garde, la couleur de ce qui coûte. */ .pieges-lesson__block--watch { border-left: 3px solid var(--color-danger); } /* ============================================================================= UN EXEMPLE : la préparation, puis le coup ============================================================================= */ .pieges-example { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-lg); padding: var(--space-lg); background-color: var(--color-surface); background-image: var(--gradient-surface-raised); border-radius: var(--radius-lg); box-shadow: var(--shadow-raised); } .pieges-step { width: 100%; max-width: 34rem; text-align: center; } .pieges-step__label { margin: 0 0 var(--space-2xs); font-family: var(--font-display); font-size: var(--font-size-base); color: var(--color-text); } .pieges-step__say { margin: var(--space-xs) auto 0; max-width: 52ch; line-height: 1.55; color: var(--color-text-muted); } .pieges-step__say b { font-family: var(--font-display); font-weight: 400; color: var(--color-brand-dark); } /* LA FLÈCHE ENTRE LES DEUX DIAGRAMMES : le temps qui passe, rien de plus. Le signe est dessiné par la feuille et non écrit dans la page, parce qu il CHANGE DE SENS : vers le bas tant que les plateaux sont empilés, vers la droite dès qu ils se mettent côte à côte. */ .pieges-arrow::before { content: "\2193"; } .pieges-arrow { margin: 0; font-size: 1.6rem; line-height: 1; color: var(--color-text-muted); } /* Les mesures, en petites étiquettes : ce sont des faits, pas des phrases. */ .pieges-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2xs) var(--space-xs); margin: var(--space-sm) 0 0; padding: 0; list-style: none; } .pieges-facts li { padding: 0.15em 0.6em; font-size: var(--font-size-sm); color: var(--color-text-muted); background-color: var(--color-surface-glass); border-radius: var(--radius-sm); } /* ============================================================================= LE PLATEAU, EN TAILLE DE DIAGRAMME ----------------------------------------------------------------------------- C'est le plateau du jeu, avec son balisage et ses feuilles. Deux choses seulement le distinguent ici. 1. SA TAILLE. components/board.css tire tout de --hole-size, calculée pour remplir un écran. Une page qui montre neuf plateaux ne peut pas les vouloir grands : on redéclare la mesure, et TOUT SUIT — les écarts, le remplissage, l'arrondi, le creux des trous, la taille des graines. C'est exactement ce que la feuille du thème promet. 2. CE QU'ON DÉSIGNE : le trou à jouer, et les trous menacés. Deux marques, posées par-dessus, qui n'existent que sur cette page. ============================================================================= */ .pieges-board { /* La mesure de référence, et rien d'autre à régler. */ --hole-size: clamp(30px, 6.4vw, 46px); --hole-gap: calc(var(--hole-size) * 0.16667); --board-padding: calc(var(--hole-size) * 0.25); --shake: calc(var(--hole-size) / 120); /* LE PLATEAU PREND LA LARGEUR DE SON CONTENU, ET RIEN DE PLUS ----------------------------------------------------------------------- Sans cela il s'étalait sur toute la carte : mesuré, 544 px pour un trou de 46, soit 11,83 fois le trou là où le plateau du jeu en fait 7,333. La grille ne pose que six colonnes de la taille d'un trou, mais « .board » reste un bloc : il occupe la largeur qu'on lui laisse, et les colonnes se contentent de se centrer dedans. Le dessin n'était plus celui du jeu. La hauteur, elle, était juste — 2,6 fois le trou, exactement la proportion de components/board.css. C'est bien la largeur seule qui débordait. */ width: fit-content; max-width: 100%; margin: 0 auto; } /* LE PLATEAU, ET LES DEUX MOTS QUI DISENT QUI EST QUI ----------------------------------------------------------------------- « Le camp d'en face » au-dessus, « votre camp » en dessous. Sans eux, un lecteur qui découvre le jeu ne sait pas quelle rangée est la sienne — et la moitié des leçons parlent de « ses trous à lui ». */ .pieges-diagram { display: flex; flex-direction: column; align-items: center; gap: var(--space-2xs); } .pieges-diagram__camp { margin: 0; font-size: var(--font-size-sm); letter-spacing: 0.06em; text-transform: lowercase; color: var(--color-text-muted); } /* ============================================================================= LES QUATRE MARQUES ----------------------------------------------------------------------------- Elles racontent le coup sur le dessin, ce que la phrase seule ne peut pas faire : « ce coup traverse 3 trous » n'apprend rien si l'on ne voit pas LESQUELS. Chacune a sa couleur, et la légende en tête de page les nomme une fois pour toutes. ============================================================================= */ /* LE TROU JOUÉ. L'ambre du site, et un liseré clair qui le détache du bois : c'est le seul trou qu'on doit regarder en premier. */ .pieges-hole--joue { box-shadow: var(--hole-shadow, inset 0 0 8px rgba(68, 37, 1, 0.8)), 0 0 0 3px var(--color-brand-amber), 0 0 0 6px rgba(255, 255, 255, 0.35); } /* LE CHEMIN DU SEMIS : les trous où une graine tombe. Le plus discret des quatre — ils sont nombreux, et ce qu'ils montrent est une distance, pas un trou à regarder. */ .pieges-hole--chemin { box-shadow: var(--hole-shadow, inset 0 0 8px rgba(68, 37, 1, 0.8)), 0 0 0 2px rgba(240, 225, 209, 0.55); } /* LES TROUS RAFLÉS : le résultat du coup. Vert, parce que c'est ce qu'on gagne — et parce qu'aucune autre marque ne l'est. */ .pieges-hole--pris { box-shadow: var(--hole-shadow, inset 0 0 8px rgba(68, 37, 1, 0.8)), 0 0 0 3px var(--color-online), 0 0 0 6px var(--color-online-halo); } /* LE OU LES COUPS QUI SUIVENT — deux sur la pince, un sur la chaîne. Ce ne sont pas des trous menacés : ce sont des trous à soi, d'où partira la prise du tour suivant. EN POINTILLÉ, ET C'EST TOUT LE PROPOS : un liseré plein les rendait presque identiques au trou joué — deux ambres voisins, côte à côte sur le même plateau. Le pointillé dit ce que la couleur ne disait pas : ce coup-là n'est pas encore joué. Il passe par « ::after » parce qu'une ombre portée ne sait pas se pointiller. Le pseudo-élément est libre ici : board.css n'en pose que sur « is-target » et « is-capture-target », deux classes que cette page n'emploie pas. */ .pieges-hole--suite::after { content: ''; position: absolute; inset: calc(var(--hole-size) * -0.09); z-index: 2; border: 2px dashed var(--color-brand-amber-deep); border-radius: 50%; } /* LE NUMÉRO DU TROU, SUR LES TROUS DONT LE TEXTE PARLE ----------------------------------------------------------------------- « Le semis traverse 3 trous et rafle 2 graines » se lit sous un dessin où rien ne porte de numéro : il fallait compter du doigt pour retrouver le trou 12. La pastille se pose à cheval sur le bord bas du trou, où elle ne recouvre aucune graine — celles-ci se rangent en haut et au milieu. Jamais en dessous de 9 px : sur un téléphone le trou tombe à 30 px, et un numéro proportionnel y serait illisible. */ .pieges-hole__num { position: absolute; bottom: calc(var(--hole-size) * -0.14); left: 50%; transform: translateX(-50%); z-index: 4; padding: 0 0.35em; font-family: var(--font-display); font-size: max(9px, calc(var(--hole-size) * 0.26)); font-weight: 700; line-height: 1.35; color: var(--color-brand-dark); background-color: var(--color-brand-cream); border-radius: var(--radius-full); box-shadow: 0 1px 2px rgba(35, 20, 5, 0.45); } .pieges-hole--pris .pieges-hole__num { background-color: var(--color-online); color: #fff; } /* ============================================================================= RIEN À MONTRER ============================================================================= */ .pieges-empty { padding: var(--space-xl); text-align: center; background-color: var(--color-surface-glass); border-radius: var(--radius-lg); } .pieges-empty h2 { margin: 0 0 var(--space-xs); font-family: var(--font-display); } .pieges-empty p { margin: 0; color: var(--color-text-muted); } /* ============================================================================= LE SOMMAIRE ----------------------------------------------------------------------------- La page est longue, et on n'y vient pas toujours pour la lire en entier. Des ancres, et rien de plus : ni script, ni volet qui s'ouvre, ni position collante — une liste de liens se comprend sans qu'on l'explique. ============================================================================= */ .pieges-menu { padding: var(--space-sm) var(--space-lg); text-align: left; background-color: var(--color-surface-glass); border-radius: var(--radius-md); } .pieges-menu__title { margin: 0 0 var(--space-2xs); font-family: var(--font-display); font-size: var(--font-size-sm); color: var(--color-text-muted); } .pieges-menu ol { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); margin: 0; padding: 0; list-style: none; counter-reset: sommaire; } .pieges-menu li { counter-increment: sommaire; } /* Le numéro devant le lien : il dit l'ordre de lecture sans peser. */ .pieges-menu li::before { content: counter(sommaire) '. '; color: var(--color-text-muted); } .pieges-menu a { font-family: var(--font-display); color: var(--color-brand-dark); } /* UN SOMMAIRE QU'ON VOIT — demandé le 29/09/2026 : « qu'on le voie un peu plus ». Le voile de verre laissait la liste se fondre dans le décor. Il devient une carte crème pleine, bordée d'ambre, au titre lisible ; chaque entrée est une pastille qu'on a envie de toucher, et la première — « Par quel trou commencer » — est dorée : c'est la question qu'on se pose d'abord. Placé après les règles d'origine, qu'il remplace sans les effacer. */ .pieges-page .pieges-menu { padding: var(--space-md) var(--space-lg) var(--space-lg); background-color: var(--color-surface); border: 3px solid var(--color-brand-amber); box-shadow: var(--shadow-sm); backdrop-filter: none; -webkit-backdrop-filter: none; } .pieges-page .pieges-menu__title { margin: 0 0 var(--space-sm); font-size: 1.35rem; color: var(--color-brand-dark); } .pieges-page .pieges-menu ol { gap: var(--space-xs); } .pieges-page .pieges-menu li { display: flex; align-items: center; padding: var(--space-2xs) var(--space-sm); background-color: rgba(255, 255, 255, 0.6); border: 1px solid var(--color-sand-400); border-radius: var(--radius-full); transition: background-color 0.15s ease; } .pieges-page .pieges-menu li:hover, .pieges-page .pieges-menu li:focus-within { background-color: var(--color-brand-amber-light); } .pieges-page .pieges-menu li::before { margin-right: 0.3em; font-family: var(--font-display); } .pieges-page .pieges-menu a { font-size: 1.05rem; text-decoration: none; } /* La première entrée, dorée. */ .pieges-page .pieges-menu .pieges-menu__first { background-color: var(--color-brand-amber); border-color: var(--color-brand-amber-deep); } /* L'annexe garde son encre plus pâle, sans le filet de gauche, inutile entre deux pastilles. */ .pieges-page .pieges-menu .pieges-menu__aside { padding-left: var(--space-sm); border-left: 1px solid var(--color-sand-400); } /* ============================================================================= LIRE LES DIAGRAMMES — la légende, dite une fois ----------------------------------------------------------------------------- Quinze diagrammes suivent, marqués de la même façon. Répéter la légende sous chacun ferait quinze fois le même bruit ; ne pas la dire laisserait deviner ce que veut dire un cercle vert. Elle est donc ici, juste avant le premier coup, et sa pastille est DESSINÉE avec les mêmes liserés que les trous : on reconnaît la marque, on ne la traduit pas. ============================================================================= */ .pieges-legend { padding: var(--space-sm) var(--space-lg); text-align: left; background-color: var(--color-surface-glass); border-radius: var(--radius-md); } .pieges-legend__title { margin: 0 0 var(--space-xs); font-family: var(--font-display); font-size: var(--font-size-sm); color: var(--color-text-muted); } .pieges-legend__list { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg); margin: 0; padding: 0; list-style: none; } .pieges-legend__item { display: flex; align-items: center; gap: var(--space-2xs); font-size: var(--font-size-sm); color: var(--color-text-muted); } /* La pastille : un trou en réduction, avec le liseré de sa marque. */ .pieges-legend__mark { flex: none; width: 1.1rem; height: 1.1rem; background-color: rgba(68, 37, 1, 0.35); border-radius: 50%; } .pieges-legend__mark--joue { box-shadow: 0 0 0 2px var(--color-brand-amber); } .pieges-legend__mark--chemin { box-shadow: 0 0 0 2px rgba(240, 225, 209, 0.8); } .pieges-legend__mark--pris { box-shadow: 0 0 0 2px var(--color-online); } .pieges-legend__mark--suite { border: 2px dashed var(--color-brand-amber-deep); } /* ============================================================================= COMMENT S'Y PRENDRE — trois étapes, et non un paragraphe ----------------------------------------------------------------------------- C'est la seule partie de la leçon qu'on relit en jouant. Un paragraphe s'y relit mal : on perd sa ligne. Le numéro est dessiné à part, en ambre, pour qu'on retrouve d'un coup d'œil où l'on s'était arrêté. ============================================================================= */ .pieges-steps { counter-reset: etape; margin: 0; padding: 0; list-style: none; } .pieges-steps li { counter-increment: etape; position: relative; padding-left: 1.8em; font-size: var(--font-size-sm); line-height: 1.55; color: var(--color-text-muted); } .pieges-steps li + li { margin-top: var(--space-xs); } .pieges-steps li::before { content: counter(etape); position: absolute; left: 0; top: 0.1em; display: flex; align-items: center; justify-content: center; width: 1.25em; height: 1.25em; font-family: var(--font-display); font-size: 0.85em; font-weight: 700; color: var(--color-brand-dark); background-color: var(--color-brand-amber-light); border-radius: 50%; } /* ============================================================================= LE MÊME COUP, AILLEURS — les exemples secondaires ----------------------------------------------------------------------------- Trois exemples complets à la file se lisaient comme un bégaiement : mêmes deux diagrammes, mêmes quatre repères, trois fois de suite. Le premier garde tout ; les deux autres n'ont plus qu'à prouver que la forme se retrouve ailleurs — une position, une phrase, côte à côte. ============================================================================= */ .pieges-more { margin-bottom: var(--space-lg); padding: var(--space-md) var(--space-lg) var(--space-lg); text-align: left; background-color: var(--color-surface-glass); border-radius: var(--radius-lg); } .pieges-more__title { margin: 0 0 var(--space-2xs); font-family: var(--font-display); font-size: var(--font-size-base); } .pieges-more__lead { margin: 0 0 var(--space-md); max-width: 60ch; font-size: var(--font-size-sm); color: var(--color-text-muted); } .pieges-more__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); } @media (min-width: 52rem) { .pieges-more__grid { grid-template-columns: repeat(2, 1fr); } } /* Une position secondaire : pas de carte dans la carte, juste de l'air. */ .pieges-example--brief { margin-bottom: 0; padding: var(--space-md); background-color: var(--color-surface); background-image: none; box-shadow: none; border-radius: var(--radius-md); text-align: center; } .pieges-example--brief .pieges-step__say { margin-top: var(--space-xs); font-size: var(--font-size-sm); } /* ============================================================================= LES PANNEAUX DE LA PAGE, DANS LA LANGUE DU SITE ----------------------------------------------------------------------------- Le sommaire, la règle, la légende et les positions secondaires portaient « --color-surface-glass » — le voile de l'accueil — mais SANS ses deux compagnons obligatoires. Ce voile vaut rgba(255,255,255,0.01) : c'est le flou d'arrière-plan et la lueur qui font la carte, pas la couleur. Sans eux, le texte flottait sur la photo du décor, et la page n'avait plus de structure. On reprend donc la recette de components/card.css, telle quelle. ============================================================================= */ .pieges-menu, .pieges-basics, .pieges-legend, .pieges-more, .pieges-empty { box-shadow: var(--shadow-glow); /* Verre dépoli : le décor visible au travers est adouci. La version -webkit- reste nécessaire pour Safari. */ backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } /* PLUS DE PADDING SUR CE QUI EST DEVENU UNE CARTE : un panneau qui se voit a besoin d'air sur ses quatre côtés, ce qu'un texte posé à même le fond n'avait pas à réclamer. */ .pieges-menu, .pieges-legend { padding: var(--space-md) var(--space-lg); } /* CE QUI EST POSÉ SUR UNE CARTE CRÈME NE PEUT PAS ÊTRE EN VERRE Les trois blocs d'une leçon et les repères d'un exemple sont DANS une carte déjà opaque : le flou n'y a rien à adoucir, et le voile à 1 % ne s'y voit pas. Un vrai blanc, très léger, les détache du fond crème. */ .pieges-lesson__block, .pieges-facts li { background-color: rgba(255, 255, 255, 0.5); } /* ============================================================================= LE RANG D'UN COUP, EN PASTILLE ----------------------------------------------------------------------------- « COUP 1 SUR 5 » en petites capitales se lisait, mais ne se VOYAIT pas : rien ne distinguait le début d'une leçon d'un paragraphe de plus. Un chiffre dans un disque ambré donne à la page ses cinq jalons, repérables en la faisant défiler sans lire. La phrase « Coup 1 sur 5 » reste dans le balisage, mais décalée hors du disque : elle sert au dessin, pas à la lecture. Elle garde son « aria-hidden » d'origine — un lecteur d'écran annonce déjà les titres et leur nombre. ============================================================================= */ .pieges-motif__head { display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'rang titre' 'rang sous' 'rang compte'; align-items: start; column-gap: var(--space-md); row-gap: var(--space-2xs); } .pieges-motif__rank { grid-area: rang; /* À HAUTEUR DU TITRE, ET NON DU BLOC. Centrée sur les trois lignes, la pastille tombait entre le titre et son sous-titre, et semblait numéroter le sous-titre. */ align-self: start; margin-top: 0.45rem; display: flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; /* Le numéro seul est dessiné ; la phrase entière est dans le balisage et reste lisible par un lecteur d'écran. Voir pieges.php. */ overflow: hidden; text-indent: -99em; background-color: var(--color-brand-amber); border-radius: 50%; box-shadow: 0 2px 6px rgba(60, 39, 35, 0.25); } .pieges-motif__rank::after { content: attr(data-rang); text-indent: 0; font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; letter-spacing: 0; color: var(--color-brand-dark); } .pieges-motif__title { grid-area: titre; } .pieges-motif__subtitle { grid-area: sous; } .pieges-motif__count { grid-area: compte; justify-self: start; } /* ============================================================================= L'EXEMPLE PRINCIPAL : AVANT ET APRÈS, CÔTE À CÔTE ----------------------------------------------------------------------------- Les deux diagrammes empilés faisaient une carte haute de deux écrans, et le lecteur devait se souvenir du premier pour comprendre le second. Côte à côte, la comparaison se fait d'un seul regard — c'est tout l'intérêt de montrer la préparation. Seulement à partir de 62 rem : en dessous, deux plateaux de six trous côte à côte deviendraient illisibles, et l'empilement reste le bon choix. ============================================================================= */ @media (min-width: 62rem) { /* LES POSITIONS SECONDAIRES GARDENT LEUR PILE : elles n'ont qu'un seul diagramme, et la rangée y couchait la phrase en une colonne d'un mot de large. Deux par ligne, elles sont déjà assez étroites. */ .pieges-example:not(.pieges-example--brief) { flex-direction: row; align-items: center; justify-content: center; gap: var(--space-lg); } .pieges-example:not(.pieges-example--brief) .pieges-step { flex: 1 1 0; max-width: 28rem; } /* La flèche se couche : le temps passe désormais de gauche à droite. */ .pieges-example:not(.pieges-example--brief) .pieges-arrow { flex: none; align-self: center; } .pieges-example:not(.pieges-example--brief) .pieges-arrow::before { content: '\2192'; } } /* REMONTER EN HAUT : la pastille commune « Haut de page », en bas à droite — voir inc/partials/nav-tools.php et components/game-tools.css (01/10/2026). */ /* LA REMONTÉE EST DOUCE, SAUF POUR QUI N'EN VEUT PAS. Un saut sec sur une page de cette longueur fait perdre le fil ; « smooth » se pose sur la racine, et la préférence système l'annule. */ @media (prefers-reduced-motion: no-preference) { html:has(.pieges-page) { scroll-behavior: smooth; } } /* ============================================================================= LA MASCOTTE, EN TÊTE DE PAGE ----------------------------------------------------------------------------- Le composant vient tel quel de components/picker.css — même personnage, même bulle, même bascule de la pointe selon la largeur. Il ne reste ici qu'à lui donner sa place dans une page de texte. UNE LARGEUR DE LECTURE, ET NON CELLE DE LA PAGE. Le composant est né dans la colonne étroite d'un choix de niveau ; lâché sur les 940 pixels de cette page, il étirait la bulle en lignes trop longues — c'est le défaut qu'on corrige partout ailleurs sur ce site, il n'y a pas de raison de l'introduire ici. ============================================================================= */ .pieges-mascot { width: 100%; max-width: 44rem; margin-inline: auto; } /* ============================================================================= LE COUP EN ENTIER — la caméra et sa fenêtre, 30/09/2026 ----------------------------------------------------------------------------- Une caméra dans l'angle gauche de la première carte d'un exemple ; elle ouvre une fenêtre où le coup se rejoue graine par graine. Le plateau est le vrai plateau (board.css et le thème), les boutons ceux du lecteur des parties revues (components/replay-controls.css), la fenêtre le composant modal.css. Il ne reste ici que les places et les tailles. Voir pieges-replay.js. ============================================================================= */ /* La carte porte la caméra sur son angle. */ .pieges-example { position: relative; } /* LA CAMÉRA : une petite pastille ambrée, le relief des boutons du jeu, À CHEVAL SUR L'ANGLE HAUT-GAUCHE DE LA CARTE. Posée d'abord dans l'angle du premier diagramme, elle touchait son titre — « beaucoup trop près du titre » ; débordant de la carte comme un badge, elle ne touche plus aucun texte, sur la carte principale comme sur les petites. */ .pieges-camera { position: absolute; top: -12px; left: -12px; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; color: var(--color-brand-dark); background: var(--gradient-amber-raised); border: none; border-radius: var(--radius-full); box-shadow: var(--shadow-raised-amber); cursor: pointer; transition: box-shadow var(--duration-fast), transform var(--duration-fast); } .pieges-camera:hover, .pieges-camera:focus-visible { box-shadow: var(--shadow-raised-amber-hover); } .pieges-camera:active { transform: translateY(1px); } .pieges-camera__icon { width: 22px; height: 22px; } /* LA FENÊTRE : plus large que la fenêtre commune, qui est faite pour une phrase — il y faut un plateau entier. */ .pieges-replay__panel { width: min(94vw, 560px); padding: var(--space-lg); } .pieges-replay__state { /* Deux textes dans la même case : la copie invisible de la consigne, et le texte que le lecteur fait changer. La case prend la hauteur du plus long — la fenêtre ne bouge plus quand le texte raccourcit. */ display: grid; margin: var(--space-2xs) 0 var(--space-md); font-size: var(--font-size-sm); line-height: var(--line-height-base); color: var(--color-text-muted); } .pieges-replay__state-place, .pieges-replay__state-text { grid-area: 1 / 1; } .pieges-replay__state-place { visibility: hidden; } /* Le texte court se lit au milieu de la place réservée, et non collé en haut. */ .pieges-replay__state-text { align-self: center; } /* Le plateau à la largeur de la fenêtre : six trous et leurs marges tiennent en 7,33 fois la taille d'un trou. */ .pieges-replay__board { --hole-size: clamp(30px, calc((min(94vw, 560px) - 3.5rem) / 7.4), 60px); --hole-gap: calc(var(--hole-size) * 0.16667); --board-padding: calc(var(--hole-size) * 0.25); --shake: calc(var(--hole-size) / 120); width: fit-content; max-width: 100%; margin: 0 auto var(--space-md); } /* Un plateau qu'on regarde : pas de barres de tour. */ .pieges-replay__board .turn-bar { display: none; } /* L'anneau du trou choisi, épais comme sur la page d'analyse : c'est lui qu'on vient voir, pendant la pause qui précède chaque coup. */ .pieges-replay__board .hole.is-chosen { outline-width: calc(var(--hole-size) * 0.07); } .pieges-replay__controls { margin-bottom: var(--space-sm); } /* LE HAUT-PARLEUR À CÔTÉ DE « FERMER » : une rangée, et non la colonne des fenêtres ordinaires — le bouton rond du son n'a rien à faire en pleine largeur. « Fermer » prend le reste. */ .pieges-replay__actions { flex-direction: row; justify-content: center; } .pieges-replay__actions .btn { flex: 1; width: auto; } .pieges-replay__actions .game-tool { flex: none; }