/** * PlayAwale — Page d'accueil * ----------------------------------------------------------------------------- * L'écran-titre du jeu. Cette feuille n'est chargée que par index.php. * * TROIS PLANS * Le DÉCOR — le sable, la photographie de village, et le voile qui les calme, * tous trois posés par layout/page.css — porte le titre et les chiffres. La SCÈNE montre le jeu en mouvement et ce qui * vient de changer. Le MENU dit ce qu'on peut faire. Rien n'est enfermé dans une * carte unique : chaque bloc apporte sa matière, et le décor reste visible entre * eux. * * DE LA MATIÈRE, PAS DES RECTANGLES * Tout ce qui se clique a une arête claire au sommet, une tranche sombre en bas * et une ombre qui le décolle du sable : ce sont des OBJETS posés sur une table, * pas des aplats. Les jetons de tokens.css — --shadow-raised, --shadow-hollow, * --gradient-surface-raised — font tout le travail, et servent à l'identique aux * boutons, aux jetons et aux panneaux. * * UNE SEULE COULEUR DÉSIGNE * L'ambre ne paraît qu'à trois endroits : le bouton par lequel on commence, la * date d'une nouvelle, et la graine qui bat sous le plateau. Partout ailleurs, * le sable. Un accent qui sert partout ne désigne plus rien. * * SUR UN TÉLÉPHONE, LE MENU PASSE DEVANT * Une colonne, et la scène se range APRÈS : ce qu'on doit voir sans faire * défiler, c'est « Jouer ». * * @package PlayAwale * @version 2.0 * @author Nicolas Lion — Développeur web — https://nlion.fr * @copyright 2026 Nicolas Lion */ /* ============================================================================= LA PAGE ============================================================================= */ .home-page { /* Les boutons n'attendent plus qu'une carte apparaisse avant eux : ils entrent presque tout de suite. Les jetons sont redéfinis ici plutôt que dans le composant — c'est cette page qui a changé de rythme, pas le bouton. */ --delay-button-1: 0.15s; --delay-button-2: 0.3s; --delay-button-3: 0.45s; /* LA DISTANCE AU HAUT DE LA FENÊTRE, EN UN SEUL ENDROIT Elle sert DEUX fois : ici comme retrait, et plus bas dans la hauteur du premier écran, qui doit la retrancher pour que son bas tombe pile sur le bord. Deux valeurs écrites séparément finiraient par se désaccorder, et l'erreur ne se verrait qu'en bas de page. */ --home-top: var(--space-xl); display: flex; flex-direction: column; align-items: center; gap: var(--space-xl); width: 100%; max-width: min(96vw, 1180px); margin: 0 auto; padding: var(--home-top) var(--space-md) var(--space-2xl); } /* L'ESPACE DU JOUEUR, en haut à droite, était dessiné ici sous le nom « home-top ». Il est devenu un composant, porté par plusieurs pages : components/player-space.css. */ /* ============================================================================= LE TITRE, L'ACCROCHE ET LES CHIFFRES ============================================================================= */ .home-head { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); text-align: center; } /* Nom du site. Unique

de la page : c'est lui que les moteurs de recherche retiennent comme titre principal. IL EST GRAVÉ, PAS POSÉ Un liseré clair au sommet des lettres, une tranche de sable dessous, une ombre douce en bas : les lettres semblent taillées dans le bois du plateau. C'est le même bois, la même lumière — le titre appartient au jeu, il ne le surmonte pas. */ .home-title { margin: 0; font-family: var(--font-display); font-size: clamp(2.5rem, 8vw, 4.75rem); font-weight: 400; line-height: 1.05; color: var(--color-text); text-shadow: var(--shadow-title); } /* « PlayAwale » est le nom, « .com » l'adresse : l'un se retient, l'autre se tape. Les mettre du même corps les met sur le même plan. L'extension monte en exposant, plus petite et plus discrète — c'est le traitement d'un logotype, et il tient dans les dix langues puisque le nom ne se traduit pas. */ .home-title__tld { font-size: 0.36em; vertical-align: 0.9em; margin-left: 0.05em; color: var(--color-text-muted); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55); } /* Phrase d'accroche sous le titre : plus discrète, sans gravure. ELLE PORTE LES AUTRES NOMS DU JEU « (Oware, Mancala) » l'a allongée d'un tiers : à 46 signes, « plusieurs » tombait seul sur une seconde ligne, même sur un grand écran. Elle tient désormais sur une ligne dès que la place le permet, et quand elle se replie — sur un téléphone —, ses deux lignes s'équilibrent au lieu de laisser un mot orphelin. */ .home-baseline { margin: 0; max-width: 62ch; text-wrap: balance; font-family: var(--font-display); font-size: clamp(0.95rem, 1.7vw, 1.2rem); line-height: var(--line-height-tight); color: var(--color-text-muted); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45); } /* ----------------------------------------------------------------------------- Les chiffres du jeu ----------------------------------------------------------------------------- Les parties déjà jouées, les niveaux, les façons de jouer à plusieurs. UN SEUL JETON, ET NON TROIS TEXTES FLOTTANTS Posés à même le décor, les trois nombres se lisaient un par un et pesaient trois fois rien. Réunis sur un jeton de sable translucide, ils forment un OBJET qu'on lit d'un regard — et l'objet, lui, se voit. Les filets qui les séparent sont d'un seul pixel : ils rangent sans découper. -------------------------------------------------------------------------- */ .home-figures { display: flex; align-items: stretch; margin: var(--space-2xs) 0 0; padding: var(--space-sm) var(--space-xs); list-style: none; background-color: rgba(240, 225, 209, 0.42); background-image: var(--gradient-panel); border-radius: var(--radius-lg); box-shadow: var(--shadow-raised); /* Le décor transparaît, adouci : le jeton a l'air d'un verre dépoli posé sur le sable plutôt que d'un rectangle collé dessus. Les navigateurs qui l'ignorent gardent le fond translucide, ce qui suffit. */ -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .home-figure { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0 var(--space-lg); } .home-figure + .home-figure { border-left: 1px solid rgba(184, 169, 149, 0.55); } .home-figure__number { font-family: var(--font-display); font-size: clamp(1.15rem, 3.2vw, 1.75rem); line-height: 1.1; color: var(--color-text); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); /* Le chiffre ne tressaute pas si la page se recharge avec un millier de plus : chaque signe occupe la même largeur. */ font-variant-numeric: tabular-nums; } .home-figure__label { max-width: 9em; font-family: var(--font-body); font-size: clamp(0.68rem, 1.8vw, 0.8rem); line-height: 1.25; color: var(--color-text-muted); text-wrap: balance; } /* ============================================================================= LE CORPS : LA SCÈNE, ET LE MENU ----------------------------------------------------------------------------- Sur un grand écran, deux colonnes : à gauche ce que le jeu MONTRE — une partie qui se rejoue, ce qui vient de changer —, à droite ce qu'on peut FAIRE. SUR UN TÉLÉPHONE, LE MENU PASSE DEVANT Une colonne, et la scène se range APRÈS. La démonstration est un décor ; elle attend son tour. ============================================================================= */ /* ----------------------------------------------------------------------------- LE PREMIER ÉCRAN ----------------------------------------------------------------------------- Le groupe qui tient l'en-tête et le corps. Ici, il ne fait que REPRENDRE la colonne de .home-page pour ses deux enfants — même direction, même écart, même centrage : rien ne bouge par rapport à avant. Sa raison d'être se lit plus bas, dans la reprise sur grand écran. ----------------------------------------------------------------------------- */ .home-fold { display: flex; flex-direction: column; align-items: center; gap: var(--space-xl); width: 100%; } .home-body { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); width: 100%; } .home-stage { order: 2; display: flex; flex-direction: column; align-items: center; gap: var(--space-md); min-width: 0; } .home-choices { order: 1; min-width: 0; } /* Le seuil est celui à partir duquel deux colonnes laissent au plateau de quoi se lire : en deçà, il tomberait sous les trente pixels par trou et les graines deviendraient des points. */ @media (min-width: 58rem) { /* --------------------------------------------------------------------- LE PREMIER ÉCRAN NE MONTRE QUE LE JEU --------------------------------------------------------------------- Sur un grand moniteur, le titre, le plateau, les actualités et les boutons ne remplissaient pas la fenêtre : le paragraphe « L'awalé, un jeu de mancala » s'y glissait en dessous. Il est écrit pour qui ne connaît pas le jeu et pour les moteurs, pas pour qui vient jouer — sa place est SOUS la ligne de flottaison, à un coup de molette. LA SOUSTRACTION EST CELLE DU RETRAIT HAUT, --home-top Le groupe ne commence pas au bord de la fenêtre. Sans retirer ce qui le précède, il finirait d'autant SOUS le bord et creuserait un vide inutile ; avec, son bas tombe PILE dessus, et le paragraphe suivant commence un écart plus bas — invisible, mais immédiatement atteignable. « svh » est la hauteur visible la plus petite : sur les navigateurs qui rétractent une barre d'outils, elle évite que le bas du groupe se cache derrière. La ligne « vh » qui précède sert aux navigateurs qui ne connaissent pas encore l'unité — ils ignorent la seconde et gardent la première. */ /* LE JETON « MON COMPTE » NE RÉSERVE PLUS SA LIGNE Sur un ordinateur, il est en position fixe tout en haut à DROITE, tandis que le titre est centré : les deux ne se rencontrent jamais. Les 32 pixels qui lui laissaient sa rangée ne servaient donc qu'à pousser la page vers le bas. LE RETRAIT TOMBE À ZÉRO, ET C'EST CE QUI PERMET DE CENTRER Un retrait en haut sans son pendant en bas décale le centre : le bloc paraîtrait centré dans ce qui RESTE de la fenêtre, pas dans la fenêtre. À zéro, le premier écran occupe la fenêtre entière et son contenu s'y place au milieu — autant d'air au-dessus qu'au-dessous. Sur un téléphone c'est l'inverse : le jeton est dans le flux, au-dessus du titre qui remplit la largeur, et sa réserve est indispensable — voir components/player-space.css. D'où la reprise ici seulement. */ .home-page { --home-top: 0px; } .home-fold { min-height: calc(100vh - var(--home-top)); min-height: calc(100svh - var(--home-top)); /* LE BLOC SE TIENT AU MILIEU DE LA FENÊTRE Il fallait choisir à qui donner les pixels que la fenêtre offre en plus du contenu. Les donner au CORPS les faisait descendre jusqu'à l'encart d'actualités, seul élément qui sait grandir : mesuré sur une fenêtre de 1400 pixels, l'encart passait à 840 pixels de haut pour UNE actualité de trois lignes — un grand cadre vide. Ils se partagent donc au-dessus et au-dessous. Le titre, le plateau et les boutons gardent exactement la taille qu'ils ont ailleurs : c'est de l'air, pas de l'étirement. Les deux colonnes, elles, continuent de finir ensemble — c'est la grille qui s'en charge, et non la fenêtre. « SAFE » N'EST PAS UN ORNEMENT Un contenu plus haut que la fenêtre — un ordinateur portable bas, une fenêtre réduite — déborderait des DEUX côtés si on le centrait bêtement, et le haut deviendrait inatteignable : on ne fait défiler que vers le bas. « safe » rend le centrage à un alignement en haut dès que la place manque. Un navigateur qui ne connaît pas le mot-clé ignore la déclaration entière et retombe sur « flex-start » — c'est-à-dire sur ce même comportement sûr. */ justify-content: safe center; } .home-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); /* LES DEUX COLONNES FINISSENT ENSEMBLE Elles étaient centrées : chacune prenait sa hauteur et flottait au milieu de la rangée, si bien que leurs bas ne tombaient jamais au même endroit. Étirées, elles ont la même hauteur — celle de la plus longue —, et il ne reste qu'à pousser l'encart d'actualités tout en bas de la sienne. */ align-items: stretch; } /* ----------------------------------------------------------------------- L'ENCART S'ARRÊTE AU RANG « RÈGLES DU JEU / MENTIONS LÉGALES » ----------------------------------------------------------------------- Il remplissait sa colonne — trois étages se transmettaient la hauteur, et son bord inférieur rejoignait celui des badges Android et Soutien, tout en bas d'en face. Il s'arrête maintenant une rangée plus haut, sur les deux liens. L'ESSENTIEL VIENT DE L'ÉTIREMENT RETIRÉ, PAS DU TEXTE COUPÉ « flex: 1 » gonflait l'encart d'une cinquantaine de pixels au-delà de son contenu : le retirer rend déjà presque tout ce qu'il fallait. Le résumé ne cède plus qu'une ligne sur quatre, au lieu des trois qu'une première estimation — fausse, elle prenait la hauteur étirée pour la naturelle — laissait craindre. LE BAS DE LA COLONNE RESTE VIDE, ET C'EST VOULU Sans étirement, l'encart prend sa hauteur naturelle et la place sous lui revient au décor. La rangée, elle, garde la hauteur de la colonne de droite. L'ALIGNEMENT EST APPROCHÉ, ET IL NE PEUT PAS ÊTRE AUTRE CHOSE Une ligne de résumé vaut 19,3 pixels : la marche est de vingt, on ne tombe pas au pixel près. Mesuré au plus proche — 3 lignes : 8 px au-dessus du rang des liens ; 4 lignes : 12 px au-dessous. Le rang d'en face bouge d'ailleurs lui-même d'une langue à l'autre, selon la longueur de « Règles du jeu » et de « Mentions légales » : un calage exact ne tiendrait que pour le français. ----------------------------------------------------------------------- */ /* TROIS LIGNES, ET LE TEXTE ENTIER DEDANS ----------------------------------------------------------------------- Couper le résumé à trois lignes laissait « Lancement officiel de la V2 » amputé de sa fin. C'est le CORPS qui cède un cran de plus, et non le texte : à 0,78rem, les quatre actualités tiennent en trois lignes — mesuré une par une, la plus longue fait 225 signes et s'arrête pile. POURQUOI PAS PLUS PETIT NI PLUS GRAND Au-dessus, à 0,825rem, les deux longues repassent à quatre lignes et l'encart descend de dix-sept pixels sous le bouton d'en face. En dessous, on approche des douze pixels sous lesquels un texte courant cesse d'être confortable — voir le plancher du résumé plus haut. LA HAUTEUR NE DÉPEND PLUS DE L'ACTUALITÉ AFFICHÉE C'est le vrai rôle des deux règles qui suivent, et il compte plus que la troncature elle-même : les quatre résumés n'ont pas la même longueur — 225, 139, 213 et 123 signes. Sans « min-height », l'encart changerait de taille à chaque clic sur le bouton, et toute la colonne sauterait avec lui. Le bloc occupe donc TOUJOURS trois lignes : « min-height » pour les courtes, « line-clamp » pour celles qui viendraient à dépasser. « -webkit-box » n'est pas une relique : c'est la seule troncature à plusieurs lignes que tous les navigateurs actuels partagent. Un navigateur qui l'ignorerait garderait « min-height » — la hauteur resterait stable. */ .home-stage > .home-news .home-news__text { font-size: 0.78rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; /* Trois fois l'interligne déclaré sur cet élément. */ min-height: calc(3 * 1.4em); } /* ----------------------------------------------------------------------- LE TEXTE SUIT LA PLACE ----------------------------------------------------------------------- L'encart occupe maintenant toute la hauteur de la colonne, et il n'y tient qu'UNE actualité. Garder le corps d'avant — dimensionné pour trois lignes serrées dans un petit bloc — laisserait un texte minuscule perdu au milieu d'un grand cadre : la place ne se remplit pas toute seule, il faut que le texte la prenne. MAIS LE CORPS DU TEXTE NE SE REPREND PAS ICI. Le titre de l'actualité et son résumé suivent la bulle d'accueil, qui leur fait face sur la même ligne : leurs « clamp » grandissent déjà avec l'écran, et une reprise à cette largeur les ferait passer devant elle. Voir « LE CORPS DU TEXTE EST CELUI DE LA BULLE D'ACCUEIL » plus haut. Ne montent donc que les trois éléments du CADRE — le titre de l'encart, la pastille de date, le bouton. Ils n'ont pas de vis-à-vis à respecter, et c'est ce qui empêche l'encart agrandi de paraître rétréci. ----------------------------------------------------------------------- */ .home-stage > .home-news .home-news__title { font-size: 1.2rem; } .home-stage > .home-news .home-news__date { font-size: 0.8rem; } .home-stage > .home-news .home-news__next { font-size: 0.88rem; } /* À partir d'ici, la scène reprend sa place à GAUCHE. */ .home-stage { order: 1; } .home-choices { order: 2; } } /* ============================================================================= LA PARTIE QUI SE REJOUE ----------------------------------------------------------------------------- Le plateau du jeu, sans un pixel de neuf. Il ne reçoit ici que deux choses : de quoi se poser sur la table, et une légende qui dit ce qu'on regarde. ============================================================================= */ .home-demo { position: relative; display: flex; justify-content: center; width: 100%; } /* L'ombre au sol. Le plateau flottait : rien ne disait sur quoi il reposait. Une ellipse sombre et floue sous son bord suffit à l'asseoir. Elle est dessinée SOUS le plateau plutôt qu'en filtre sur lui — un filtre sur un élément animé se recalcule à chaque image, une ellipse ne bouge jamais. */ .home-demo::after { content: ''; position: absolute; left: 50%; bottom: -14px; z-index: -1; width: 80%; height: 30px; transform: translateX(-50%); background-image: radial-gradient( ellipse at center, rgba(60, 39, 35, 0.3) 0%, rgba(60, 39, 35, 0) 70% ); } /* Le plateau prend la taille que la colonne lui laisse, et jamais plus : le composant calcule tout à partir du diamètre d'un trou, et c'est donc lui qu'on borne. Le plafond de 74 px vaut deux tiers du plateau de jeu — assez pour distinguer les graines, pas assez pour voler la vedette au menu. */ .home-demo__board { --hole-size: min(clamp(30px, 9vw, 74px), (96vw - var(--space-md) * 2) / 7.33333); position: relative; display: flex; justify-content: center; /* SA PLACE EST RÉSERVÉE AVANT QU IL EXISTE Le plateau est dessiné par JavaScript, et il arrive tard : mesuré à 511 ms après le départ de la page, quand le texte, lui, est peint bien avant. Ce div était vide jusque-là, haut de zéro pixel — et tout ce qui le suit, légende, actualités, colonne entière, descendait d un coup de 173 px sur un ordinateur, 91 px sur un téléphone. C est ce sursaut qu on voit quand la page n est pas déjà en cache. La hauteur se déduit pourtant de la taille d un trou, qui est connue dès la première ligne de cette règle : deux rangées et la bordure du plateau font 2,6 fois un trou. Mesuré aux quatre largeurs — 390, 768, 1280, 1920 px —, le rapport tient à un centième près. « min-height » et non « height » : le jour où le composant changera de proportions, c est lui qui gagnera. */ min-height: calc(var(--hole-size) * 2.6); } /* UN FONDU A ÉTÉ ESSAYÉ ICI, PUIS RETIRÉ — NE PAS LE REMETTRE ----------------------------------------------------------------------------- Le plateau est dessiné par un script différé : il arrive un demi-seconde après le texte, dans une boîte réservée mais vide. Pour adoucir cette arrivée sèche, la feuille l'a un moment gardé à « opacity: 0 » jusqu'à une classe « is-ready » posée par home.js. C'ÉTAIT FAUX, ET CELA A CASSÉ LA DÉMONSTRATION EN PRODUCTION. Faire dépendre la VISIBILITÉ du plateau d'un script, c'est accepter qu'il disparaisse chaque fois que le script n'arrive pas comme prévu : une page servie par le cache des soixante secondes peut porter l'ANCIEN « home.js » avec la NOUVELLE feuille — personne ne rallume alors le plateau, et il n'y a plus de plateau du tout. LA RÈGLE QUI EN SORT, ET ELLE VAUT POUR TOUTE LA PAGE : ce qui doit se voir se voit par le style seul. Un script peut animer, souligner, mettre en route ; il ne doit jamais être la condition pour qu'une chose EXISTE à l'écran. L'arrivée tardive du plateau reste donc à traiter, et par le bon bout : dessiner les douze trous côté serveur et les faire ADOPTER par assets/js/game/board-view.js — voir 30. */ /* Les graines gardent la proportion du grand écran, même en portrait. Le composant ne descend jamais sous 6 px par graine, pour qu'on puisse les compter pendant qu'on joue. Ici, sur un téléphone en portrait, le trou ne fait plus que 30 à 35 px : le plancher gonflait chaque graine d'un tiers, et un trou bien rempli débordait presque. Cette partie se regarde, elle ne se joue pas — les graines suivent donc le trou, comme sur grand écran. Déclaré sur le trou, comme dans le composant : la disposition des graines lit la même mesure. « :where() » : la règle ne pèse pas plus que « .hole » du composant, qu'elle remplace toujours (elle vient après). Une disposition choisie dans « Personnaliser mon awalé » (« .seeds-layout--real .hole »…) donne SA taille de graine et l'emporte : sans cela, l'accueil gardait la graine de la disposition classique dans toutes les dispositions (01/10/2026). */ :where(.home-demo__board) .hole { --seed-size: calc(var(--hole-size) * 0.13333); } /* Au pixel entier, là où le navigateur sait arrondir. Une graine de 4,67 px ne tombe pas sur la grille des pixels de l'écran : le navigateur la dessinait en carré aux coins ronds, en rognait parfois une d'un côté, et l'écart de 1,46 px entre deux graines variait du simple au double. Arrondis au pixel, taille et écart redonnent des graines rondes et également espacées — 5 px et 1 px sur un trou de 35 px. « round() » est récent : un navigateur qui ne le connaît pas garde la règle d'au-dessus, sans arrondi. Une valeur qu'il ne comprendrait pas, posée dans la variable, effacerait sinon les graines. */ @supports (width: round(1.5px, 1px)) { :where(.home-demo__board) .hole { --seed-size: round(calc(var(--hole-size) * 0.13333), 1px); --seed-gap: max(1px, round(calc(var(--hole-size) / 24), 1px)); } } @media (min-width: 58rem) { .home-demo__board { --hole-size: min(clamp(30px, 5.2vw, 74px), 44vw / 7.33333); } } /* La légende : ce qu'on regarde, en une ligne. Sans elle, un plateau qui bouge tout seul intrigue sans rien apprendre. Avec elle, le passant sait qu'il voit une VRAIE partie, et gagnée par le meilleur niveau du jeu — ce qui en dit plus long sur le jeu que n'importe quelle promesse. Elle disparaît si la partie ne vient pas de l'archive : la phrase serait alors fausse. */ .home-demo__caption { display: inline-flex; align-items: center; gap: var(--space-xs); margin: 0; padding: 0.4em 1em; font-family: var(--font-body); font-size: var(--font-size-sm); line-height: var(--line-height-tight); color: var(--color-text-muted); background-color: rgba(240, 225, 209, 0.6); border-radius: var(--radius-full); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); } /* Une graine d'ambre qui bat doucement : elle dit que ce qui est au-dessus est en train de se jouer, et non figé. C'est le seul mouvement de la page qui ne vienne pas du plateau lui-même. */ .home-demo__seed { width: 0.55em; height: 0.55em; flex: none; background-color: var(--color-brand-amber); border-radius: var(--radius-full); box-shadow: 0 0 0 3px rgba(255, 201, 102, 0.28); animation: home-seed-pulse 2.4s ease-in-out infinite; } @keyframes home-seed-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } /* ============================================================================= L'ENCART D'ACTUALITÉS ----------------------------------------------------------------------------- Trois lignes sous le plateau : ce qui vient d'être ouvert, ce qui va l'être. POURQUOI SOUS LE PLATEAU, ET NON DANS LE MENU La colonne de gauche est celle qu'on REGARDE, la droite celle où l'on CLIQUE. Une nouvelle se lit ; elle appartient donc au même côté que la partie qui se rejoue, et elle équilibre du même coup une colonne qui, sans elle, était plus courte que l'autre. Le contenu vient de la base — voir inc/game/news.php. L'encart disparaît entièrement s'il n'y a rien à dire : jamais de cadre vide. ============================================================================= */ /* ----------------------------------------------------------------------------- L'ENCART RECULE D'UN PLAN ----------------------------------------------------------------------------- Il n'est pas ce qu'on vient chercher. On arrive pour jouer : le regard doit tomber sur le plateau et sur « Jouer Solo », et trouver les actualités ENSUITE, parce qu'il les cherche — pas parce qu'elles l'ont attrapé. IL NE SUIT PLUS --gradient-panel NI --shadow-raised Le jeton des chiffres, lui, les garde : c'est un objet, avec son arête claire et sa tranche sombre. L'encart, non — il devient un VOILE. Deux fonds superposés se multiplient, et non s'additionnent : 0,42 et 0,50 donnaient environ 70 % d'opacité, un panneau franc posé sur la photographie. Ramenés à 0,18 et 0,28, il en reste environ 40 % : la photographie se devine au travers, et le bloc cesse d'être un rectangle clair sur fond sombre. LE FLOU REMPLACE CE QUE L'OPACITÉ NE FAIT PLUS 3 pixels suffisaient sous un fond dense ; sous un fond léger, le détail de la photographie repasserait derrière le texte. À 6 pixels il ne reste qu'une couleur douce — la lisibilité tient au flou, plus à la matière. LA TRANCHE SOMBRE DISPARAÎT, L'ARÊTE S'ATTÉNUE C'est ce qui distinguait un objet d'un rectangle coloré ; un objet qui recule n'en a plus besoin. Reste une ombre courte, juste assez pour que le bloc ne soit pas collé au décor. CE QUE LA TRANSPARENCE COÛTE Un fond plus clair, c'est moins de contraste sous le texte, et l'encart est le seul bloc de la page dont le texte repose sur le décor plutôt que sur une surface franche. Ce qu'on peut lui retirer d'encre a donc été MESURÉ sur le fond réel, et non estimé — voir --news-ink juste dessous. ----------------------------------------------------------------------------- */ .home-news { /* DEUX ENCRES, ET AUCUNE À PLEINE FORCE L'encart s'efface ; son écriture ne peut pas rester à l'encre pleine du reste de la page, sinon c'est elle qui rattrape le regard que le voile venait de lâcher. Les deux valeurs sont POSÉES AU PLUS CLAIR que le contraste autorise, et pas plus bas — c'est une limite mesurée, pas un réglage à l'œil. OÙ EST LA LIMITE, EXACTEMENT Le fond réel sous l'encart a été reconstitué point par point : la photographie avec son alpha propre, la vignette ET le halo calculés à leur position (voir --gradient-vignette et --gradient-spotlight), puis les couches du panneau. Le pire fond n'est pas un pixel isolé mais la fenêtre de 8 pixels la plus sombre — le flou moyenne localement. 0,74 4,32:1 refusé 0,76 4,52:1 passe, mais tombe à 4,35 si l'on suppose le sable le plus sombre du dégradé de page : trop juste 0,78 4,74:1 --news-ink le résumé et le bouton 0,86 5,71:1 --news-ink-strong les deux titres 0,78 est exactement --color-text-muted. La valeur est tout de même ÉCRITE ICI plutôt qu'empruntée au jeton : ailleurs elle est un choix de style, ici c'est un plancher d'accessibilité, et le jour où le jeton global bougerait, l'encart ne doit pas bouger avec lui sans qu'on refasse la mesure. */ --news-ink: rgba(60, 39, 35, 0.78); --news-ink-strong: rgba(60, 39, 35, 0.86); width: 100%; padding: var(--space-md) var(--space-lg); text-align: left; background-color: rgba(240, 225, 209, 0.18); background-image: linear-gradient( 180deg, rgba(255, 255, 255, 0.26), rgba(240, 225, 209, 0.28) ); border-radius: var(--radius-md); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 2px 8px rgba(60, 39, 35, 0.1); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } /* Le titre de l'encart, prolongé par un filet qui s'efface : il ouvre le bloc sans le refermer, et occupe la largeur sans la barrer. */ .home-news__title { display: flex; align-items: center; gap: var(--space-sm); margin: 0 0 var(--space-sm); font-family: var(--font-display); font-size: 1.05rem; font-weight: 400; line-height: var(--line-height-tight); color: var(--news-ink-strong); } .home-news__title::after { content: ''; flex: 1; height: 1px; background-image: linear-gradient(90deg, rgba(184, 169, 149, 0.8), rgba(184, 169, 149, 0)); } /* LA LIGNE DU TITRE ET LE LIEN PERMANENT — 29/09/2026 Le lien « Tout voir » prend la fin du filet, sur la même ligne que le titre : l'encart garde exactement sa hauteur. La marge du titre passe à la ligne. */ .home-news__top { display: flex; align-items: center; gap: var(--space-sm); margin: 0 0 var(--space-sm); } .home-news__top .home-news__title { flex: 1; margin: 0; } .home-news__all { flex: none; font-family: var(--font-body); font-size: 0.78rem; color: var(--news-ink); text-decoration: underline dotted; text-underline-offset: 0.18em; white-space: nowrap; } .home-news__all::after { content: ' →'; } .home-news__all:hover, .home-news__all:focus-visible { color: var(--color-brand-dark); text-decoration-style: solid; } /* « Lire la suite », au bout d'un résumé coupé : la même encre, un souligné qui dit qu'il se clique — il ne doit pas passer devant le titre. */ .home-news__read { color: var(--news-ink-strong); white-space: nowrap; text-decoration: underline dotted; text-underline-offset: 0.18em; } .home-news__read:hover, .home-news__read:focus-visible { text-decoration-style: solid; } /* ----------------------------------------------------------------------------- DEUX ACTUALITÉS, ET UN BOUTON ----------------------------------------------------------------------------- Demandé après deux essais trop décorés : plus simple. Pas de cartes, pas de pile, pas de barre de défilement. Deux actualités se lisent, un bouton descend aux deux suivantes. LA LISTE N'A PAS CHANGÉ D'ASPECT : c'est celle d'avant, des lignes séparées d'un filet. Tout le mécanisme tient dans un attribut « hidden » posé sur les actualités qu'on ne montre pas, et dans un seul bouton. SANS JAVASCRIPT, LES QUATRE S'AFFICHENT et le bouton reste caché : un bouton qui ne ferait rien serait pire que pas de bouton. C'est le script qui le révèle — voir assets/js/home-news.js. ----------------------------------------------------------------------------- */ .home-news__list { display: grid; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; } /* La date à gauche sur ses deux lignes, le titre et la phrase à droite. */ .home-news__item { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-sm); } .home-news__item + .home-news__item { padding-top: var(--space-sm); border-top: 1px solid rgba(184, 169, 149, 0.4); } /* ----------------------------------------------------------------------------- UNE SEULE ACTUALITÉ, ET UN PASSAGE FLUIDE ----------------------------------------------------------------------------- LE MODE EST POSÉ PAR LE SERVEUR, ET NON PAR LE SCRIPT. Il l'a été par le script, et c'était un défaut : la liste arrivait ouverte, se repliait après le premier affichage, et l'encart perdait 221 pixels sous les yeux du lecteur. Tout ce qui suit s'applique donc dès la première image — voir index.php, et assets/js/home-news.js qui ne fait plus qu'écouter le bouton. Sans la classe — une seule actualité à afficher —, la liste reste une liste : les articles s'empilent, séparés de leur filet. POURQUOI LES QUATRE SONT SUPERPOSÉES On ne peut pas faire fondre un élément que « hidden » retire de l'affichage : « display: none » ne s'anime pas. Les actualités occupent donc toutes LA MÊME CASE de la grille, et l'on passe de l'une à l'autre par l'opacité. Elles se superposent aussi pour une deuxième raison, plus importante : la case prend la hauteur de la PLUS GRANDE. L'encart ne change donc jamais de taille en cours de route, et rien ne saute sur la page au moment du clic. « visibility » ET NON SEULEMENT L'OPACITÉ : une actualité seulement transparente resterait lisible par un lecteur d'écran et attrapable au clavier. « visibility: hidden » la retire des deux, et s'anime — à condition de retarder son passage à la fin du fondu, ce que fait la transition. ----------------------------------------------------------------------------- */ .home-news__list--one { display: grid; grid-template-areas: 'actualite'; gap: 0; } .home-news__list--one .home-news__item { grid-area: actualite; /* Il n'y a plus qu'une actualité : le filet qui les séparait n'a plus d'objet. */ padding-top: 0; border-top: 0; opacity: 0; visibility: hidden; transform: translateY(10px); } .home-news__list--one .home-news__item.is-shown { opacity: 1; visibility: visible; transform: none; } /* LE FONDU N'EXISTE QU'À PARTIR DU PREMIER CLIC ----------------------------------------------------------------------------- Sans cette précaution, la première actualité entrait en fondu au chargement : la classe qui la montre est posée par le script, donc APRÈS le style, et le navigateur anime docilement le passage de zéro à un. Une page qui s'anime en arrivant fait attendre son lecteur pour rien. Les transitions ne sont donc déclarées qu'une fois la première actualité en place — le script ajoute « is-ready » juste après, voir home-news.js. */ .home-news__list--one.is-ready .home-news__item { transition: opacity var(--duration-base) ease, transform var(--duration-base) ease, visibility 0s linear var(--duration-base); } /* À l'entrée, la visibilité revient tout de suite : sinon l'actualité apparaîtrait après son propre fondu. */ .home-news__list--one.is-ready .home-news__item.is-shown { transition-delay: 0s, 0s, 0s; } @media (prefers-reduced-motion: reduce) { .home-news__list--one .home-news__item { transition: visibility 0s; transform: none; } } /* La date porte l'ambre : c'est le deuxième endroit de la page où il paraît, et il y désigne la même chose qu'ailleurs — ce qu'il faut regarder en premier. */ .home-news__date { grid-column: 1; grid-row: 1 / span 2; align-self: start; padding: 0.2em 0.55em; font-family: var(--font-body); font-size: 0.72rem; font-variant-numeric: tabular-nums; line-height: 1.4; white-space: nowrap; color: var(--color-brand-dark); background-color: var(--color-brand-amber); border-radius: var(--radius-sm); box-shadow: 0 1px 0 var(--color-brand-amber-deep); } /* ----------------------------------------------------------------------------- LE CORPS DU TEXTE, UN CRAN SOUS LA BULLE D'ACCUEIL ----------------------------------------------------------------------------- Les deux blocs se font face sur la page : la mascotte accueille à droite, l'actualité se lit à gauche. Le corps de l'un se lit donc TOUJOURS à côté du corps de l'autre, et les deux échelles ont été alignées pour cette raison. ELLES SONT MAINTENANT DÉCALÉES D'UN CRAN, À DESSEIN L'encart a reculé d'un plan — fond effacé, encre allégée. Un texte resté à la taille de la bulle le ramenait au premier rang par sa seule dimension. Les valeurs de .mascot-intro__lead et .mascot-intro__text (components/picker.css) sont donc reprises et réduites d'environ 7 % : assez pour que l'actualité passe derrière la bulle, trop peu pour qu'on y voie deux polices différentes. LE PLANCHER EST À DOUZE PIXELS La borne basse du résumé ne descend pas sous 0,76rem : c'est douze pixels sur une racine par défaut, la limite sous laquelle un texte courant cesse d'être confortable. C'est elle qui fixe jusqu'où on peut réduire, pas le goût. Le « clamp » les fait grandir avec l'écran ; c'est pour cela qu'il n'y a PAS de reprise sur grand écran plus bas dans cette feuille — voir « LE TEXTE SUIT LA PLACE ». Seule la fonte ne change pas, et volontairement : la bulle PARLE, elle prend la fonte d'affichage ; l'actualité INFORME, elle garde la fonte de lecture. ----------------------------------------------------------------------------- */ .home-news__head { grid-column: 2; margin: 0; font-family: var(--font-body); font-size: clamp(0.86rem, 2.2vw, 1.02rem); font-weight: 700; line-height: 1.25; color: var(--news-ink-strong); } /* LE TITRE QUI MÈNE QUELQUE PART — 26/09/2026 Une actualité qui a une adresse fait de son titre un lien. Même encre, même taille : il ne doit pas crier plus fort que les autres titres. Un souligné pointillé dit qu'il se clique ; il devient plein au survol et au clavier. */ .home-news__link { color: inherit; text-decoration: underline dotted; text-underline-offset: 0.18em; } .home-news__link:hover, .home-news__link:focus-visible { text-decoration-style: solid; } .home-news__text { grid-column: 2; margin: var(--space-2xs) 0 0; font-family: var(--font-body); font-size: clamp(0.76rem, 1.95vw, 0.86rem); line-height: 1.4; color: var(--news-ink); } /* ----------------------------------------------------------------------------- LE BOUTON ----------------------------------------------------------------------------- Un seul, centré sous la liste. Discret au repos — c'est une invitation, pas une décision d'écran —, il prend l'ambre au survol comme tout ce qui se clique sur cette page. ----------------------------------------------------------------------------- */ /* IL ATTEND LE SCRIPT, MAIS SA PLACE EST DÉJÀ PRISE « hidden » le retirait de la mise en page : le script le rendait ensuite, et l'encart grandissait d'une cinquantaine de pixels après le premier affichage. Transparent, il occupe sa hauteur dès la première image, et le script n'a plus qu'à retirer l'attribut — rien ne bouge. « visibility » plutôt qu'une opacité nulle : elle le retire aussi du parcours au clavier, ce qu'un bouton qui ne fait encore rien doit être. */ .home-news__next[data-news-waiting] { visibility: hidden; } .home-news__next { display: flex; align-items: center; justify-content: center; gap: var(--space-2xs); /* Pleine largeur : la cible la plus facile à atteindre au pouce, et la ligne qui ferme l'encart proprement. */ width: 100%; min-height: 40px; margin-top: var(--space-sm); padding: var(--space-2xs) var(--space-sm); font-family: var(--font-body); font-size: 0.8rem; color: var(--news-ink); background-color: transparent; border: 0; border-top: 1px solid rgba(184, 169, 149, 0.4); border-radius: 0 0 var(--radius-md) var(--radius-md); cursor: pointer; transition: color var(--duration-base) ease, background-color var(--duration-base) ease; } .home-news__next:hover, .home-news__next:focus-visible { color: var(--color-brand-dark); background-color: rgba(255, 201, 102, 0.28); } /* Le chevron pointe vers le bas : c'est la seule chose qu'il ait à dire. */ .home-news__next__icon { width: 1.05em; height: 1.05em; transform: rotate(90deg); transition: transform var(--duration-base) ease; } .home-news__next:hover .home-news__next__icon, .home-news__next:focus-visible .home-news__next__icon { transform: rotate(90deg) translateX(2px); } /* Revenu au début, le chevron se retourne : le bouton dit alors qu'il remonte, au lieu de promettre une suite qui n'existe pas. */ .home-news__next[data-news-back] .home-news__next__icon { transform: rotate(-90deg); } .home-news__next[data-news-back]:hover .home-news__next__icon, .home-news__next[data-news-back]:focus-visible .home-news__next__icon { transform: rotate(-90deg) translateX(2px); } @media (prefers-reduced-motion: reduce) { .home-news__next, .home-news__next__icon { transition: none; } .home-news__next:hover .home-news__next__icon, .home-news__next:focus-visible .home-news__next__icon { transform: rotate(90deg); } } /* ============================================================================= LES FAÇONS DE JOUER ----------------------------------------------------------------------------- Le bouton de l'écran de choix, repris tel quel : un dessin dans son creux, un nom, une ligne dessous, un chevron. La matière, le survol, l'enfoncement, le creux et le chevron viennent des composants — il ne reste ici que ce qui est propre à l'accueil. UNE SEULE COLONNE, QUEL QUE SOIT L'ÉCRAN Le composant passe à deux colonnes au-delà de 56,25 rem : c'est ce qu'il faut pour huit niveaux, qui demanderaient sinon de faire défiler la page. Trois façons de jouer n'en ont pas besoin, et la deuxième colonne y laisserait un orphelin. Une colonne les met en outre dans l'ordre où on les essaie — seul d'abord, puis contre quelqu'un —, ce que deux colonnes brouillent. ============================================================================= */ .home-actions { display: grid; grid-template-columns: 1fr; gap: var(--space-sm); margin-top: var(--space-md); } /* Les entrées gardent leur forme de LIGNE sur un téléphone. Le composant y transforme ses boutons en vignettes — dessin au-dessus, nom dessous, texte centré : c'est ce qu'il faut à huit niveaux qu'on veut comparer d'un coup d'œil, jamais à trois grands boutons qu'on lit de haut en bas. Chaque déclaration ci-dessous reprend donc, une à une, celles de cette disposition. */ .home-actions .home-action { grid-template-columns: auto 1fr auto; align-items: center; justify-items: stretch; gap: var(--space-md); padding: var(--space-md) var(--space-lg); text-align: left; font-size: clamp(1.05rem, 1.5vw, 1.35rem); } /* Le retrait d'une entrée fermée est dans components/button.css, sa mention « bientôt » dans components/picker.css : plusieurs pages les voulaient, et deux pages qui décrivent la même chose finissent toujours par diverger. */ /* ============================================================================= LES AUTRES DESTINATIONS ----------------------------------------------------------------------------- Les mentions légales, et ce qui viendra — les jetons de l'espace du joueur ont la même matière. Ce ne sont pas des invitations à jouer : elles n'ont donc pas les grands boutons, mais restent de vraies cibles — assez larges pour un pouce, et de la même matière que le reste. ============================================================================= */ .home-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs); margin-top: var(--space-lg); } .home-link { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.55em 1.1em; font-family: var(--font-display); font-size: var(--font-size-base); line-height: var(--line-height-tight); color: var(--color-text); text-decoration: none; background-color: rgba(240, 225, 209, 0.72); background-image: var(--gradient-surface-raised); border-radius: var(--radius-full); box-shadow: var(--shadow-raised); transition: transform var(--duration-base) ease, box-shadow var(--duration-base) ease, background-color var(--duration-base) ease; } .home-link:hover, .home-link:focus-visible { background-color: var(--color-brand-amber-light); transform: translateY(-2px); box-shadow: var(--shadow-raised-hover); } .home-link__icon { display: block; width: 1.15em; height: 1.15em; opacity: 0.65; } .home-link__icon svg { display: block; width: 100%; height: 100%; } /* Les badges : l'application Android et le soutien, côte à côte sous les liens. Ils ont la même forme et se lisent de la même façon ; sur un téléphone trop étroit pour les deux, ils s'empilent, centrés. */ .home-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); margin-top: var(--space-sm); } /* L'application Android : un badge sombre sous les liens, à la façon de ceux des magasins d'applications — sans leur logo, voir index.php. Il dit d'un coup d'œil qu'il mène ailleurs que les jetons clairs du dessus : sur un téléphone. Son jumeau clair, le soutien, vit dans components/support.css. */ .home-android { display: flex; align-items: center; gap: 0.7em; width: fit-content; padding: 0.5em 1.25em 0.5em 0.95em; color: var(--color-brand-cream); text-align: left; text-decoration: none; background-color: var(--color-brand-dark); border-radius: var(--radius-md); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), var(--shadow-raised); transition: transform var(--duration-base) ease, box-shadow var(--duration-base) ease; } .home-android:hover, .home-android:focus-visible { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), var(--shadow-raised-hover); } .home-android:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 3px; } .home-android__icon { flex: none; width: 1.9em; height: 1.9em; color: var(--color-brand-amber); } .home-android__icon svg { display: block; width: 100%; height: 100%; } .home-android__text { display: flex; flex-direction: column; line-height: var(--line-height-tight); } .home-android__kicker { font-family: var(--font-body); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.8; } .home-android__name { font-family: var(--font-display); font-size: 1.1rem; } /* ============================================================================= LA BOUTIQUE DU PARTENAIRE ----------------------------------------------------------------------------- La même carte que « Jouer Solo » et « Multijoueur », juste en dessous — mêmes largeur, remplissage et arrondi, puisqu elle reprend « .home-actions » et « .picker-button ». Un quatrième format en faisait un objet étranger à la colonne ; au format des deux principales, elle lui appartient. ELLE N EST PAS D AMBRE La règle du site est qu il n y en a jamais deux sur un écran, et « Jouer Solo » l a. Ce qui la distingue est LE LOGO de Club Awalé — logé dans le même creux rond que les pictogrammes voisins — et un liseré d ambre de deux pixels, assez pour désigner, trop peu pour crier. ELLE NE BOUGE PAS Les deux cartes du dessus montent de deux pixels au survol, leur chevron avance, et c est la façon dont se comporte tout ce qui se clique sur le site. Celle-ci ne fait ni l un ni l autre, À LA DEMANDE : elle mène chez quelqu un d autre, et le mouvement des deux principales lui donnait le même poids qu à « Jouer ». Elle ne s éteint pas pour autant — son liseré fonce, et sa matière passe au MIEL CLAIR là où le survol ordinaire du site remplit d ambre plein : une réponse de couleur, et non de geste. ============================================================================= */ /* L écart de tête est celui de « .home-actions » : plus large que celui qui sépare les deux cartes du dessus, il dit qu on change de sujet. */ .home-shop-row { margin-top: var(--space-md); } /* ELLE ENTRE LA TROISIÈME Les deux cartes du dessus se montrent l une après l autre, à 1,75 s et 1,85 s — « .btn-group--animated ». Celle-ci, écrite hors de leur groupe pour garder son écart et sa propre rangée, était là AVANT elles : la dernière de la colonne s affichait la première. Elle reprend donc la même entrée et le troisième temps, celui qu attendait un troisième bouton. Le troisième temps, et non un quatrième plus tardif : la carte doit arriver dans le mouvement des deux autres, pas se faire annoncer. */ .home-shop { opacity: 0; animation: btn-appear var(--duration-fast) ease-out var(--delay-button-3) forwards; } /* Sans animation, elle reste visible — comme le groupe du dessus, dont le commentaire explique la raison : le reset neutralise la durée, pas l opacité. */ @media (prefers-reduced-motion: reduce) { .home-shop { opacity: 1; animation: none; } } .home-shop { box-shadow: 0 0 0 2px var(--color-brand-amber), var(--shadow-raised); } /* Le survol, le focus et le clic : la couleur répond, rien ne se déplace. POURQUOI LES DEUX « :not() » Ils ne servent à rien ici — un lien n'est jamais désactivé —, mais ils donnent à la règle le poids exact de celle de components/button.css qu'elle annule. Sans eux, « transform » resterait celui de « .btn », plus spécifique, et la carte monterait quand même. */ .home-shop:hover:not([aria-disabled='true']):not(:disabled), .home-shop:focus-visible:not([aria-disabled='true']):not(:disabled), .home-shop:active:not([aria-disabled='true']):not(:disabled) { /* Le survol de tout le site remplit le bouton d'AMBRE PLEIN — la couleur que « Jouer Solo » porte au repos. Sur cette carte-là, c'était prendre la place du bouton principal le temps d'un survol. Le miel clair dit la même chose plus bas : elle s'éveille, elle ne se promeut pas. */ background-color: var(--color-brand-amber-light); box-shadow: 0 0 0 2px var(--color-brand-amber-deep), var(--shadow-raised); transform: none; } /* Le chevron dit toujours qu'il y a un « après », mais il ne court plus vers lui : c'est le geste des deux cartes du dessus. */ .home-shop .picker-button__chevron { color: var(--color-brand-amber-deep); opacity: 1; } .home-shop:hover .picker-button__chevron, .home-shop:focus-visible .picker-button__chevron { transform: none; } /* Le logo du partenaire prend la place du pictogramme, dans le même creux : le socle est déjà rond et déjà creusé, et l'emblème de Club Awalé est rond lui aussi — il s'y loge comme une graine dans son trou. Détouré et sans son texte, il prend la couleur du creux : c'est une marque, pas une vignette. IL NE GRANDIT PAS AU SURVOL Il l'a fait un temps. C'est un logo, et non la photographie d'un objet qu'on approcherait de la main : le faire respirer attirait l'œil sur la marque, là où la carte, elle, parle du plateau. Rien à couper sous « prefers-reduced-motion » : il n'y a plus de mouvement du tout. */ .home-shop__logo img { display: block; width: 100%; height: 100%; /* L'air autour de l'emblème se règle ICI, et non dans le fichier : l'image est le logo, rien que le logo. */ padding: 11%; object-fit: contain; } /* ============================================================================= LA MASCOTTE, À L'ENTRÉE ----------------------------------------------------------------------------- La même case de bande dessinée qu'au choix d'un niveau — bulle et lion — dans ses deux dispositions : la bulle au-dessus sur téléphone, à gauche au-delà. Le composant fait tout ; il n'y a ici que la place qu'elle prend, un lion un peu plus discret — à l'accueil elle accueille, elle ne présente pas huit niveaux — et l'ombre qui l'assoit sur la page comme le plateau sur sa table. ============================================================================= */ .home-mascot { margin: 0 0 var(--space-md); } .home-mascot .mascot-intro__figure { filter: drop-shadow(0 8px 10px rgba(60, 39, 35, 0.25)); } @media (min-width: 46rem) { /* Le lion cède un peu de place aux boutons, qui sont l'objet de la visite. */ .home-mascot .mascot-intro__figure { max-width: 148px; } } /* ============================================================================= LE PIED ----------------------------------------------------------------------------- Ce qui relève du site et non du jeu. En petit, tout en bas, et sans fond : il ne doit pas former un bloc de plus. IL ÉTAIT LE SEUL ENDROIT DE L'ACCUEIL QUI N'ÉTAIT PAS DESSINÉ Trois lignes empilées de liens soulignés par défaut, centrées, sans rythme ni regroupement — au bas d'une page faite d'objets posés sur une table. Et la page s'arrêtait sans rien pour la clore. Trois corrections, et pas une de plus : un FILET qui ferme la page, la mention d'auteur seule sur sa ligne et ramenée à une largeur de lecture, puis les liens en UNE rangée séparée de points médians. ============================================================================= */ .home-foot { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); margin-top: var(--space-lg); width: min(94vw, 720px); text-align: center; } /* Le filet qui ferme la page. Le même trait dégradé que le « ou » de la clé de sage : il naît et meurt dans le décor, sans jamais poser une barre en travers de l'écran. */ .home-foot::before { content: ''; /* Premier élément de la colonne, et rien de plus : pas de « position: absolute », qui se serait accroché à un ancêtre quelconque faute d'ancrage ici — et se serait donc posé n'importe où. */ width: 100%; height: 1px; flex: none; background: linear-gradient(to right, transparent, rgba(60, 39, 35, 0.4), transparent); } .home-foot__line { margin: 0; /* Une ligne de lecture, et non toute la largeur d'un écran d'ordinateur : la phrase en fait cent signes. */ max-width: 46rem; font-family: var(--font-body); font-size: var(--font-size-sm); line-height: var(--line-height-base); color: var(--color-text-muted); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5); text-wrap: pretty; } /* ----------------------------------------------------------------------------- Les liens, en une rangée Ils s'enroulent d'eux-mêmes sur un téléphone plutôt que de déborder, et chacun tient 44 px de haut : ce sont des cibles qu'on vise au doigt comme les autres. -------------------------------------------------------------------------- */ .home-foot__links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2xs) var(--space-md); } .home-foot__link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-2xs); font-family: var(--font-body); font-size: var(--font-size-sm); color: var(--color-text); /* Pas de soulignement permanent : dix liens soulignés font une page de notes de bas de page. Il apparaît sous le curseur et au clavier, où il désigne. */ text-decoration: none; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5); transition: color var(--duration-fast) ease; } .home-foot__link:hover, .home-foot__link:focus-visible { color: var(--color-brand-amber-deep); text-decoration: underline; text-underline-offset: 3px; } /* Le point médian qui sépare deux liens. Dessiné par la mise en page et non écrit dans le balisage : il n'a rien à dire à un lecteur d'écran, qui annonce déjà deux liens distincts. */ .home-foot__links .home-foot__link + .home-foot__link::before { content: '·'; /* Il appartient à l'espace entre les deux, pas au lien qui le porte. */ margin-right: var(--space-md); margin-left: calc(var(--space-md) * -0.5); color: var(--color-sand-400); text-decoration: none; } /* Le lien de la mention d'auteur, lui, reste souligné : il est AU MILIEU d'une phrase, et rien d'autre ne le signalerait. */ .home-foot__line .home-foot__link { display: inline; min-height: 0; padding: 0; text-decoration: underline; text-underline-offset: 2px; } /* ============================================================================= PETITS ÉCRANS ----------------------------------------------------------------------------- Rien ne change de nature : le jeton des chiffres, les boutons et l'encart restent les mêmes objets, simplement plus serrés. ============================================================================= */ @media (max-width: 46rem) { /* Sur un téléphone, le nom du jeu remplit la largeur, et le jeton de l'espace du joueur se tient au-dessus de lui. La page en descend déjà par la réserve du composant — voir components/player-space.css — : il ne reste ici que l'écart d'avec le titre. Au total, le même que lorsque la page le calculait seule : le titre commence à 56 pixels. */ .home-page { gap: var(--space-lg); --home-top: var(--space-md); } /* Le groupe du premier écran a REPRIS l'écart de la page pour l'en-tête et le corps : il doit donc reprendre aussi son resserrement sur téléphone, sans quoi le titre et le plateau garderaient les 32 pixels des grands écrans pendant que tout le reste passe à 24. */ .home-fold { gap: var(--space-lg); } .home-news { padding: var(--space-sm) var(--space-md); } } @media (max-width: 34rem) { /* Les trois chiffres tiennent sur une ligne plutôt que de se replier un par un : la grille leur donne des colonnes égales, et le jeton garde sa forme quelle que soit la longueur des mots traduits. */ .home-figures { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; padding: var(--space-sm) var(--space-2xs); } .home-figure { padding: 0 var(--space-xs); } .home-actions .home-action { gap: var(--space-sm); padding: var(--space-sm) var(--space-md); } .home-links { margin-top: var(--space-md); } } /* ============================================================================= MOUVEMENT RÉDUIT ----------------------------------------------------------------------------- Le réglage système vise exactement ce que fait cette page : des choses qui bougent sans qu'on l'ait demandé. Tout s'immobilise, et rien ne disparaît. ============================================================================= */ @media (prefers-reduced-motion: reduce) { .home-demo__seed { animation: none; opacity: 1; } /* Les boutons et le chevron sont immobilisés par leurs composants ; il ne reste ici que ce qui n'appartient qu'à l'accueil. */ .home-link, .home-android { transition: none; } .home-link:hover, .home-link:focus-visible, .home-android:hover, .home-android:focus-visible { transform: none; } } /* ============================================================================= LE LION, SUR UN TÉLÉPHONE ----------------------------------------------------------------------------- Au choix d'un niveau, la mascotte explique ce que signifie un pourcentage : elle a de bonnes raisons d'occuper la place. À l'accueil, elle SALUE — et chaque pixel qu'elle prend repousse « Jouer Solo » vers le bas d'un écran où la hauteur est comptée. Elle se fait donc plus petite ici, et seulement ici. ============================================================================= */ @media (max-width: 34rem) { .home-mascot { --mascot-size: clamp(80px, 26vw, 110px); margin-bottom: var(--space-sm); } } /* ============================================================================= LA LANGUE DU SITE ----------------------------------------------------------------------------- Dix langues, en bas de l'accueil, la courante marquée. ELLE EST DÉJÀ CHOISIE QUAND ON ARRIVE Le site lit la langue du navigateur et sert celle-là. Cette rangée ne sert donc pas à choisir : elle sert à MONTRER ce qui a été choisi — et à se rattraper quand ce n'est pas le bon. ELLE EST DISCRÈTE, ET C'EST VOULU Un joueur ne vient pas changer de langue : il vient jouer. La rangée se tient donc sous le pied, dans le corps le plus petit de la page, et ne devient lisible que si on la cherche. ============================================================================= */ .home-langs { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2xs) var(--space-xs); margin-top: var(--space-lg); } .home-lang { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.3em 0.7em; font-family: var(--font-body); font-size: var(--font-size-sm); line-height: var(--line-height-tight); color: var(--color-text-muted); text-decoration: none; border-radius: var(--radius-full); transition: color var(--duration-base) ease, background-color var(--duration-base) ease; } .home-lang:hover, .home-lang:focus-visible { color: var(--color-text); background-color: rgba(240, 225, 209, 0.72); } /* Celle qu'on lit en ce moment : elle porte l'ambre, comme tout ce qui est « ici » sur ce site, et ne mène nulle part — c'est un état, pas un lien. */ .home-lang--current { color: var(--color-text); background-color: var(--color-brand-amber); box-shadow: var(--shadow-raised); cursor: default; } @media (prefers-reduced-motion: reduce) { .home-lang { transition: none; } }