/* ============================================================ (Frontend) Accueil/CSS/accueil.css ============================================================ La page d'accueil, première passe du 03/10/2026. Elle vit dans son propre fichier : `landing.css` porte encore le dessin des boutons sociaux et du bouton de don, réutilisés ici, et mélanger les deux rendrait chaque relecture plus difficile. LA PAGE DÉFILE DÉSORMAIS. Elle tenait auparavant en une hauteur d'écran, `overflow: hidden`. Ce n'est plus vrai : il y a sept sections. ============================================================ */ /* La largeur de lecture, une seule fois. Toutes les sections s'y alignent — sans quoi chacune dérive à sa façon et la page paraît bancale sans qu'on sache pourquoi. */ :root { /* 1240 px LAISSAIT 340 PIXELS DE VIDE DE CHAQUE COTE a 1920, et 1680 en laissait encore 120. Le proprietaire l'a redit le 04/10/2026 : l'impression d'espace vide a gauche et a droite doit disparaitre. A 1920, il reste 60 px de chaque cote — une marge, plus une gouttiere. Ce n'est pas du bord a bord : une page qui touche les bords de l'ecran n'a plus de cadre. C'est le defaut que le proprietaire a signale le 04/10/2026 : « tout est centre avec de grandes marges vides ». La largeur de lecture d'un article n'est pas celle d'un tableau de bord — et cette page en est un. Les gouttieres restent visibles, la page ne touche pas les bords. */ --acc-largeur: 1800px; --acc-gouttiere: clamp(14px, 3vw, 32px); } .landing-wrapper { width: 100%; display: flex; flex-direction: column; /* PLUS D'ECART ICI. Chaque bande porte desormais son propre espacement vertical, avec son fond : un `gap` commun ajouterait un blanc entre deux fonds et casserait la continuite. */ gap: 0; } /* ============================================================ HERO — LA BANNIERE ============================================================ L'IMAGE EST LA SOURCE DE VERITE. IL N'Y A PLUS AUCUN RAPPORT ECRIT DANS CE FICHIER, ET C'EST LE POINT IMPORTANT. Quatre bannieres se sont succede en une journee : 1983x793 (2,501), 2172x478 (4,544), 1944x523 (3,717), 1944x432 (4,500). A chaque fois il fallait rouvrir ce CSS pour y recopier le nouveau rapport, et a chaque fois une valeur de l'image precedente survivait quelque part — une regle telephone oubliee a rogne 319 px de largeur pendant deux passes avant qu'on la retrouve. LA REGLE ETAIT MAUVAISE, PAS LA VALEUR. Desormais : .acc-hero ne fixe NI hauteur NI rapport. Il est un simple conteneur de position, pour que le groupe des actions puisse se poser dessus. .acc-hero-img prend toute la largeur et laisse sa hauteur SUIVRE — `height: auto`. C'est l'image qui dicte, et le conteneur qui s'adapte. Consequence : changer de banniere ne demande plus aucune retouche du CSS. Pleine largeur, aucune deformation, aucun rognage, quel que soit le rapport du fichier. SEULS LES REPERES DU GROUPE restent a verifier a chaque image : ils dependent de la COMPOSITION (ou est le titre), pas du rapport. Ils sont mesures dans les pixels du fichier, et dits en fractions. Pas de `background-image` : une vraie balise `` porte son texte de remplacement, se charge en priorite et se redimensionne seule. */ .acc-hero { position: relative; width: 100%; background: transparent; /* L'image est en `display: block` : sans cela, son interligne laisserait quelques pixels de fond sous elle. */ line-height: 0; } .acc-hero-img { display: block; width: 100%; height: auto; /* NI `object-fit`, NI `height: 100%`, ET C'EST VOLONTAIRE. Ces deux proprietes n'ont de sens que si la BOITE impose une taille a l'image. Ici c'est l'inverse : l'image prend la largeur disponible et sa hauteur suit toute seule. Rien a rogner, rien a cadrer, rien a recalculer au prochain changement. */ } /* Un voile du bas vers le haut : les boutons se détachent du décor sans assombrir le titre qui est dans l'image. */ /* LE VOILE DU BAS A ETE RETIRE. Il assombrissait la moitie basse de la banniere pour que les boutons s'en detachent. Les boutons n'y sont plus, et l'image a ete refaite au bon format : le voile ne faisait plus que salir le bas de l'image — et, le conteneur etant plus large que l'image depuis `contain`, il debordait sur le fond de la page de chaque cote. */ /* ============================================================ CE QUE LA BANNIERE PORTE ============================================================ UNE COUCHE, PAS UNE BARRE. Les actions et les chiffres etaient dans une bande posee sous l'image, et cela se voyait : une barre collee dessous. Ils sont desormais DANS le hero, en bas a gauche. LE DEGRADE EST LA POUR LA LISIBILITE, ET RIEN D'AUTRE. Il nait du bas et s'eteint avant le trait tricolore de l'image — pas de boite opaque, pas de rectangle : on doit continuer a voir la foule au travers. `pointer-events` : la couche laisse passer les clics, seuls les boutons les recoivent. Sans cela, un rectangle invisible couvrirait le bas de la banniere. */ /* LE GROUPE SE CALE SUR LE TEXTE DESSINE DANS L'IMAGE. ==================================================================== Il etait aligne sur la largeur de lecture des sections du dessous (372 px a 1920). Ce n'etait pas le bon axe : la banniere a son propre texte, et le groupe doit en etre la suite. LES REPERES SONT LUS DANS LES PIXELS DU FICHIER, et exprimes en fractions pour suivre l'image a toutes les largeurs. Mesures en parcourant l'image colonne par colonne : · le « Z7 » violet du titre commence a 9,83 % ; · le sous-titre commence a 9,67 % ; · le trait tricolore se termine a 66,2 % de la HAUTEUR. LES REPERES HORIZONTAUX N'ONT PAS BOUGE D'UNE BANNIERE A L'AUTRE — l'image a ete rognee en hauteur, pas en largeur. LES VERTICAUX, SI : le bas du texte est passe de 54,7 % a 66,2 %. C'est pour cela que le groupe n'est plus ancre par le haut. L'AXE RETENU EST 8,6 %, ET CE N'EST PAS UN DE CES TROIS NOMBRES. Un bouton a fond plein porte un remplissage interne de 18 px : cale a 9,67 %, son BORD tombait bien sur l'axe du sous-titre, mais son TEXTE arrivait 28 px plus loin — et c'est le texte que l'oeil compare. A 8,6 %, le texte du bouton tombe a 183 px quand le sous-titre est a 186 : trois pixels d'ecart. Les pastilles rondes debordent alors legerement a gauche, comme des puces, ce qui est exactement ce qu'on attend d'elles. Verticalement, 61 % : juste sous le trait tricolore (qui finit a 54,7 %), dans l'espace laisse libre a dessein dans l'image. Pas de boite : c'est `.acc-hero::after` qui porte la lisibilite. */ /* ANCRE PAR LE BAS, ET NON PAR LE HAUT. `top: 61%` calait le groupe sous le texte de la banniere PRECEDENTE. Sur celle-ci, dont le texte descend jusqu'a 66,2 %, il tombait dessus. Et un ancrage par le haut a un defaut plus grave : le groupe garde sa hauteur en pixels pendant que la banniere retrecit avec la fenetre, si bien qu'il finit par SORTIR par le bas — a 1024 px il debordait de vingt pixels. Ancre par le bas, il ne peut plus sortir : par construction, il reste toujours a 5 % du bord inferieur. Verifie a cinq largeurs. */ .acc-hero-sur { position: absolute; left: 8.6%; bottom: 5%; right: clamp(16px, 4vw, 64px); pointer-events: none; z-index: 2; } /* LE FONDU DU BAS DE BANNIERE. ==================================================================== POURQUOI IL FAUT PLUS QU'UN SIMPLE DEGRADE VERTICAL. Dans la zone ou se posent les compteurs, le decor n'est pas uniformement sombre : les ecrans Z7 de la foule y montent a une luminance de 229 sur 255, mesuree sur le fichier. Un voile faible suffit sur la foule et laisse les chiffres disparaitre sur les ecrans. DEUX COUCHES, ET AUCUN RECTANGLE : 1. UNE TACHE RADIALE, ancree en bas a gauche, la ou vit le groupe. C'est elle qui porte le gros du travail — et comme elle est ronde et decentree, elle ne dessine aucun bord droit. 2. UN DEGRADE VERTICAL doux sur la moitie basse, qui raccorde la tache au reste de l'image pour qu'on ne devine pas sa limite. LE MASQUE L'ETEINT VERS LA DROITE. Sans lui, le fondu ternirait le personnage, qui est le point fort de l'image et qui n'a besoin d'aucune aide : rien n'est ecrit par-dessus. C'EST UN TRAITEMENT CSS, PAS UNE RETOUCHE DU FICHIER : toute banniere future en beneficiera sans etre modifiee. */ .acc-hero::after { content: ''; position: absolute; /* LE FONDU EST VERTICAL, ET IL TRAVERSE TOUTE LA LARGEUR. ==================================================================== CE QUE LA VERSION PRECEDENTE FAISAIT DE TRAVERS. Elle posait un degrade RADIAL centre en bas a gauche, puis le MASQUAIT a droite (`mask-image`, opaque jusqu'a 44 % de la largeur, eteint a 76 %). Resultat : un assombrissement local autour des compteurs, et le bas de la banniere restait net sur les deux tiers droits — d'ou la coupure franche avec la section du dessous, signalee deux fois. LA REGLE EST DONC INVERSEE. Le fondu principal est un SEUL degrade vertical, sur 100 % de la largeur, sans masque : 44 % transparent la moitie haute n'est pas touchee 67 % noir leger juste au-dessus des boutons 84 % noir marque a hauteur des trois compteurs 100 % noir fort le bord bas rejoint le fond de la page LES REPERES SONT MESURES, pas devines : a 1920 px, les boutons tombent a 74-82 % de la hauteur du hero et les compteurs a 88-96 %. LE PERSONNAGE RESTE VISIBLE : c'est un degrade, pas un rectangle. En haut de la couche il est parfaitement transparent, et il ne devient franc qu'au ras du bord inferieur — la ou l'image rejoint de toute facon le fond sombre de la page. L'IMAGE N'EST PAS TOUCHEE : ni sa taille, ni son rapport, ni sa position. Cette couche est posee PAR-DESSUS, dans le hero. */ inset: 44% 0 0 0; background: linear-gradient(to bottom, rgba(3, 5, 12, 0) 0%, rgba(3, 5, 12, 0.10) 28%, rgba(3, 5, 12, 0.34) 52%, rgba(3, 5, 12, 0.62) 74%, rgba(3, 5, 12, 0.86) 90%, rgba(3, 5, 12, 0.95) 100%); pointer-events: none; z-index: 1; } .acc-hero-groupe { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(8px, 1.2vh, 14px); pointer-events: auto; } .acc-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; } .acc-cta-icone { width: 16px; height: 16px; flex-shrink: 0; margin-right: 8px; } .acc-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 12px clamp(16px, 2vw, 28px); border-radius: 50px; font-family: Arial, sans-serif; font-size: clamp(12px, 1.1vw, 14px); font-weight: 900; text-transform: uppercase; letter-spacing: 0.6px; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform 0.15s, box-shadow 0.15s, background 0.15s; } .acc-cta:hover { transform: translateY(-1px); } /* UN BOUTON MASQUE DOIT DISPARAITRE. `.acc-cta` pose `display: inline-flex` ; or une regle de classe l'emporte sur le `[hidden] { display: none }` de la feuille du navigateur. Sans cette ligne, le script peut poser `hidden` tant qu'il veut : « Mon profil » et « Se connecter » restent affiches cote a cote, et le visiteur voit les deux etats a la fois. */ .acc-cta[hidden] { display: none; } .acc-cta-1 { background: linear-gradient(135deg, #33C6FF, #6366f1); border: none; color: #061018; box-shadow: 0 8px 24px rgba(51, 198, 255, 0.28); } .acc-cta-1:hover { box-shadow: 0 10px 30px rgba(51, 198, 255, 0.42); } .acc-cta-2 { background: rgba(8, 11, 19, 0.55); border: 1px solid rgba(255, 255, 255, 0.35); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .acc-cta-2:hover { background: rgba(8, 11, 19, 0.75); border-color: rgba(255, 255, 255, 0.6); } /* ============================================================ LES BANDES, ET CE QU'IL Y A DEDANS ============================================================ DEUX ROLES, DEUX ELEMENTS. C'etait la cause du defaut signale : une seule regle donnait a la fois la largeur ET le fond a toutes les sections, si bien qu'aucune ne se distinguait de sa voisine. .acc-bande va d'un bord a l'autre de la fenetre. Elle porte le FOND, les SEPARATIONS et l'ESPACEMENT vertical. C'est elle qui fait qu'une partie se voit comme une partie. .acc-dedans porte la LARGEUR DE LECTURE et rien d'autre. Il est centre, et les gouttieres laterales lui appartiennent. Le pied de page suit la meme regle, et c'est tout l'interet : sa bande traverse la fenetre, son contenu reste aligne sur celui du dessus. */ .acc-bande { width: 100%; } .acc-dedans { width: 100%; max-width: var(--acc-largeur); margin-left: auto; margin-right: auto; padding-left: var(--acc-gouttiere); padding-right: var(--acc-gouttiere); } /* ============================================================ LE CORPS DE LA PAGE ============================================================ DEUX COLONNES SUR ORDINATEUR, UNE PILE AILLEURS. LA GRILLE NE PORTE PLUS LES BLOCS UN A UN. Elle porte DEUX COLONNES, et chaque colonne empile ses propres blocs. C'est ce qui permet aux Coins de rester sous « Compétitions à la une », A LA MEME LARGEUR et dans la meme colonne, sans qu'aucune hauteur ne soit a deviner : COLONNE DE GAUCHE — compétitions à la une, puis Z7 Coins. COLONNE DE DROITE — prochain événement, classement, communauté. Par defaut — telephone, tablette, petite fenetre — les deux colonnes n'en font qu'une et la page defile : c'est ce qu'on veut sur un ecran etroit, et le proprietaire l'a demande expressement. Les proportions 67 / 33 ne s'allument qu'a partir de 1200 px de large. */ /* UN SEUL PANNEAU POUR LES DEUX COLONNES — c'est ce que montre la reference : le contenu ne flotte pas sur le fond de la page, il est POSE DANS UN CADRE, legerement eclairci, aux angles arrondis. C'est lui qui donne au bas de page sa ligne basse commune, et aux deux colonnes l'air d'appartenir au meme ensemble. */ .acc-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 1.6vw, 20px); padding: clamp(12px, 1.2vw, 16px); border-radius: 20px; background: rgba(255, 255, 255, 0.022); border: 1px solid rgba(255, 255, 255, 0.06); } /* LA COLONNE DE DROITE EST UN PANNEAU, PAS TROIS CARTES. La reference ne montre pas trois boites separees mais UNE colonne encadree, decoupee par des filets horizontaux. Les trois sections y perdent donc leur bordure propre (`acc-carte` a ete retire du balisage) et gagnent une separation. */ /* LA COLONNE ETIREE REPARTIT SON VIDE. Sans cela, les trois sections restent en haut et tout l'espace rendu par l'etirement s'accumule sous la derniere : la colonne parait finir avant sa bordure. */ .acc-colonne--droite { justify-content: space-between; padding: clamp(12px, 1.1vw, 16px); border-radius: 16px; background: rgba(255, 255, 255, 0.032); border: 1px solid rgba(255, 255, 255, 0.075); } .acc-colonne--droite > .acc-bloc + .acc-bloc { border-top: 1px solid rgba(255, 255, 255, 0.075); padding-top: clamp(12px, 1.1vw, 16px); } /* UNE COLONNE EST UNE PILE, ET RIEN D'AUTRE. `min-width: 0` n'est pas decoratif : sans lui une piste de grille refuse de descendre sous la largeur de son contenu, et une affiche de tournoi large elargit la colonne entiere. */ .acc-colonne { min-width: 0; display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 20px); } .acc-bloc { min-width: 0; display: flex; flex-direction: column; } /* LE RYTHME DES FONDS N'A PLUS DE BANDE A ECLAIRCIR. Deux bandes alternaient leur fond pour se distinguer. Il n'en reste qu'une sous le hero : la communaute a rejoint la colonne de droite, et ce sont desormais LES CARTES qui portent la frontiere visuelle. `.acc-bande--chiffres` et `.acc-bande--communaute` ont disparu avec leurs sections — on ne garde pas une regle pour un selecteur qui n'existe plus dans la page. */ /* Les grandes bandes respirent ; celles qui prolongent un voisin se resserrent. */ .acc-bande--principal { padding-top: clamp(20px, 2.6vw, 34px); padding-bottom: clamp(20px, 2.6vw, 34px); } .acc-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .acc-section-titre { margin: 0; font-size: clamp(16px, 2vw, 22px); font-weight: 900; color: #fff; text-transform: uppercase; letter-spacing: 1.2px; } /* LA BARRE D'ACCENT DE LA REFERENCE, mais POSEE A COTE DU TEXTE et non DEVANT lui. Un `::before` dans le flux decalerait le texte vers la droite — et le titre de la section communaute doit rester exactement sur l'axe de la page, comme le bouton de don en dessous. La barre est donc absolue : elle se voit, et elle ne pousse rien. Elle n'est posee que sur les titres alignes a gauche, jamais sur un titre centre. */ .acc-section-titre--accent { position: relative; padding-left: 14px; } .acc-section-titre--accent::before { content: ''; position: absolute; left: 0; top: 0.1em; bottom: 0.1em; width: 4px; border-radius: 3px; background: linear-gradient(180deg, #33C6FF, #6366f1); } .acc-section-lien { font-family: Arial, sans-serif; font-size: 12px; font-weight: 700; color: #33C6FF; text-decoration: none; white-space: nowrap; } .acc-section-lien:hover { text-decoration: underline; } /* ============================================================ LES TROIS CHIFFRES, SUR LA BANNIERE ============================================================ PAS DE CARTES. Une pastille ronde, le nombre, son libelle dessous — le tout pose sur l'image. Une boite opaque derriere trahirait le procede ; c'est le degrade de `.acc-hero-sur` qui porte la lisibilite. L'OMBRE PORTEE N'EST PAS DECORATIVE. Le texte repose sur une photo dont la luminosite varie d'un pixel a l'autre : sans elle, un chiffre blanc disparait des qu'il tombe sur un ecran clair du decor. */ .acc-stats { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(14px, 2.4vw, 44px); } .acc-stat { display: flex; align-items: center; gap: 10px; min-width: 0; } /* LA PASTILLE : sombre et translucide, comme la reference. On voit l'image au travers, et l'icone s'y detache. */ .acc-stat-icone { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(8, 11, 20, 0.52); border: 1px solid rgba(255, 255, 255, 0.16); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); } .acc-stat-icone svg { width: 19px; height: 19px; display: block; } /* Les deux teintes de la reference : l'or pour les tournois et les Coins, le violet-bleu pour les joueurs. */ .acc-stat-icone--or { color: #F5C451; } .acc-stat-icone--violet { color: #8B8CF8; } .acc-stat-txt { min-width: 0; } .acc-stat-val { font-size: clamp(18px, 1.9vw, 24px); font-weight: 900; line-height: 1; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75); /* Chiffres à chasse fixe : le compteur ne tremble pas quand il change, et les trois cases gardent la même allure. */ font-variant-numeric: tabular-nums; } .acc-stat-lbl { margin-top: 3px; font-family: Arial, sans-serif; font-size: clamp(9.5px, 1vw, 11px); font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase; /* Plus clair qu'avant : sur un fond sombre uni, 45 % suffisaient ; sur une photo, le libelle devenait illisible. */ color: rgba(255, 255, 255, 0.72); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8); } .acc-stat-note { margin-top: 4px; font-family: Arial, sans-serif; font-size: 10px; line-height: 1.4; color: rgba(255, 255, 255, 0.55); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8); } /* ============================================================ COMPÉTITIONS À LA UNE ============================================================ */ /* LA RANGEE REMPLIT SA SECTION, ET COMMENCE OU COMMENCE SON TITRE. Trois erreurs successives, et la lecon vaut d'etre ecrite : 1. `auto-fill` gardait les pistes vides : deux tournois mis en avant sur quatre places restaient colles a gauche, la moitie droite etait un trou. 2. `auto-fit` + `justify-content: center` bouchait le trou mais CENTRAIT la rangee — les cartes ne commencaient plus au meme endroit que « COMPETITIONS A LA UNE » juste au-dessus. Un contenu qui n'est pas aligne sur son propre titre se lit comme une erreur, meme quand il est symetrique. 3. Le plafond de largeur etait la pour empecher deux cartes etirees de porter une vignette de 300 px de haut. Mais c'est la HAUTEUR qu'il fallait plafonner, pas la largeur. Resultat : `auto-fit` en `1fr`, aligne a gauche. Les cartes remplissent toujours la section, quel que soit leur nombre, et la vignette est bornee plus bas. */ .acc-une { display: grid; /* UNE CARTE NE DESCEND PAS SOUS 340 px, ET C'EST ARITHMETIQUE. Le cadre officiel occupe `hauteur x 0,697`, soit 157 px pour une carte de 227 : sur une carte de 280 px — ce que trois colonnes donnaient des 1280 px de fenetre — il ne resterait que 121 px aux informations. La grille montre donc MOINS de cartes plutot que des cartes trop etroites ; a 1920 elles sont toujours trois. */ /* LE NOMBRE DE COLONNES EST ECRIT, ET NON DEDUIT. `repeat(auto-fit, minmax(min(100%, 340px), 1fr))` semblait dire « jamais moins de 340 px » : il n'en fait rien. Des qu'une fonction de taille de piste contient un pourcentage, le compte de repetitions se calcule comme si la borne valait `auto` — mesure a 1280, la grille posait trois pistes de 272 px dans 834. On ecrit donc le compte. Les seuils viennent de la largeur reelle de la colonne gauche, qui vaut environ 0,7 x (fenetre - 40) : il faut 1056 px pour trois cartes de 340, donc une fenetre d'environ 1560. */ grid-template-columns: minmax(0, 1fr); /* LA GOUTTIERE EST UNE VARIABLE, et ce n'est pas de la coquetterie : le calcul d'echelle de la carte (fin de feuille) doit retrancher EXACTEMENT la meme valeur pour retrouver la largeur d'une cellule. Ecrite deux fois, elle a deja divergee — la grille resserrait a 9 px sur les fenetres basses pendant que le calcul retranchait toujours 18, et la carte se retrouvait 60 px plus petite que sa cellule. */ --acc-une-gout: clamp(12px, 1.4vw, 18px); gap: var(--acc-une-gout); } /* L'etat vide, lui, prend toute la largeur : centre sur une seule piste de 320 px, il aurait l'air d'une carte manquante. */ .acc-une:has(.acc-vide) { grid-template-columns: minmax(0, 1fr); } /* LA CARTE DE LA REFERENCE : affiche en haut, informations hierarchisees dessous, bouton en bas. Le fond est TEINTE DE VIOLET — tres legerement, par un degrade vertical : c'est ce qui distingue la carte du panneau sans avoir a l'entourer d'une bordure franche. */ /* L'AFFICHE EST VERTICALE — MESUREE, PAS SUPPOSEE. Les affiches des tournois en base font 480x720 et 502x720 ; les trois visuels ajoutes le 04/10/2026 font 941x1672, 1024x1536 et 1080x1550. Toutes portent un rapport proche de 2:3. Le serveur lui-meme les ramene a 720 px de HAUT. Les poser en haut d'une carte, dans une boite large et basse, revenait a n'en montrer qu'une TRANCHE HORIZONTALE prise au milieu : c'est ce qui coupait le mot « TOURNOI » en deux sur la capture. L'affiche passe donc A GAUCHE, a son propre rapport, et les informations se rangent a sa droite. La carte est plus visuelle ET plus courte qu'avant. */ /* LA CARTE N'EST PLUS DESSINEE ICI. Z7-TOURNAMENT-FEATURED vit dans `Common/CSS/carte-une.css`, et son gabarit dans `Common/JS/carte-une.js` : la page Tournois montre exactement la meme carte. L'Accueil ne pose que son ECHELLE — la variante `--home` —, et les paliers de hauteur plus bas, imposes par la regle produit « la page tient dans la fenetre sans defilement ». */ /* ============================================================ LES COINS ET LE PROCHAIN ÉVÉNEMENT ============================================================ */ /* `.acc-duo` ET `.acc-event` ONT DISPARU AVEC LES DISPOSITIONS QU'ILS SERVAIENT. Le premier mettait les Coins et l'evenement cote a cote ; le second habillait le bloc « Prochain evenement », retire de l'Accueil le 04/10/2026. Leurs regles sont parties avec eux : une feuille qui garde des selecteurs morts finit par en garder dix, et on ne sait plus lesquels servent. L'historique Git les conserve. */ .acc-carte { padding: clamp(16px, 2.2vw, 26px); border-radius: 18px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); min-width: 0; } /* ============================================================ LES Z7 COINS — UNE BANDE, QUATRE ZONES ============================================================ CE QUI A ETE RETIRE, ET POURQUOI. Le bloc portait un mode d'emploi : quatre etapes numerotees « 1 2 3 4 », chacune avec sa pastille, qui racontaient un parcours d'achat. Le proprietaire a tranche le 04/10/2026 : ce qu'il veut la, c'est UNE BANDE D'ETAT — le solde reel du joueur, puis trois zones qui disent ce qu'on en fait. Les regles `.acc-etape*`, `.acc-coins-intro` et `.acc-coins-lien` sont donc parties avec le balisage qu'elles habillaient. QUATRE ZONES SUR UNE LIGNE, SEPAREES PAR UN FILET — et non quatre cartes independantes : c'est un seul conteneur, et les separations sont des bordures, pas des interstices. */ .acc-coins { /* LE SEUL BLOC A FOND TEINTE DE LA PAGE. Le degrade part du coin du solde : c'est lui qu'on doit voir en premier. */ background: radial-gradient(120% 150% at 0% 0%, rgba(99, 102, 241, 0.17), transparent 62%), rgba(255, 255, 255, 0.04); border-color: rgba(99, 102, 241, 0.3); } /* EN PILE PAR DEFAUT. Les quatre zones ne se mettent en ligne qu'une fois la place reelle disponible (voir les paliers plus bas) : sur telephone, quatre colonnes de 80 px ne seraient pas lisibles. */ .acc-coins-rang { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; } .acc-coins-zone { min-width: 0; } /* ---- LA ZONE DU SOLDE ---- */ .acc-coins-solde { margin: 9px 0 7px; } /* LA MEME CHAUSSE-TRAPPE QU'AILLEURS : une regle de classe l'emporte sur le `[hidden] { display: none }` du navigateur. Sans cette ligne, le drapeau serait pose sans rien masquer. */ .acc-coins-solde[hidden] { display: none; } .acc-coins-lbl { font-family: Arial, sans-serif; font-size: 9.5px; font-weight: 900; letter-spacing: 1.1px; text-transform: uppercase; color: rgba(255, 255, 255, 0.42); margin-bottom: 2px; } .acc-coins-val { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; } /* `tabular-nums` fige la largeur des chiffres : le bloc ne tremble pas quand le solde change sous l'effet de la synchronisation. */ .acc-coins-nb { font-size: clamp(26px, 2.6vw, 34px); font-weight: 900; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; } .acc-coins-unite { font-size: 11.5px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; color: #FFB700; } /* LE TAUX, SOUS LE SOLDE. C'est la ligne « 1 Z7 COIN = 1 € » de la reference : une regle du site, pas une donnee variable. */ .acc-coins-taux { margin-bottom: 7px; font-family: Arial, sans-serif; font-size: 11.5px; font-weight: 900; letter-spacing: 0.4px; color: rgba(255, 255, 255, 0.72); } .acc-coins-texte { margin: 0; font-family: Arial, sans-serif; font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, 0.45); } .acc-coins-note { margin: 7px 0 0; font-family: Arial, sans-serif; font-size: 11.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.35); } .acc-coins-note[hidden] { display: none; } .acc-coins-savoir { display: inline-block; margin-top: 11px; padding: 7px 16px; border-radius: 50px; background: rgba(99, 102, 241, 0.12); border: 1px solid rgba(99, 102, 241, 0.45); color: #b4b9ff; font-family: Arial, sans-serif; font-size: 11px; font-weight: 900; text-decoration: none; text-transform: uppercase; letter-spacing: 0.6px; } .acc-coins-savoir:hover { background: rgba(99, 102, 241, 0.22); color: #fff; } /* ---- LES TROIS ZONES D'USAGE ---- */ .acc-coins-icone { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(99, 102, 241, 0.16); border: 1px solid rgba(99, 102, 241, 0.34); color: #a5b4fc; flex-shrink: 0; } .acc-coins-icone svg { width: 17px; height: 17px; } .acc-coins-ztitre { margin: 8px 0 4px; font-size: 11.5px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.9px; color: #c3b5ff; } /* LES QUATRE ZONES EN LIGNE, ET LE FILET QUI LES SEPARE. Le palier est pose a 900 px : en dessous, la bande est en pile (un telephone, ou la grille repliee en une colonne). Au-dessus, la carte est assez large pour quatre zones lisibles — que la page soit en une colonne (tablette large) ou en deux (ordinateur). */ @media (min-width: 900px) { .acc-coins-rang { grid-template-columns: minmax(0, 1.45fr) repeat(3, minmax(0, 1fr)); gap: 0; } .acc-coins-zone { padding: 0 15px; } .acc-coins-zone:first-child { padding-left: 0; } .acc-coins-zone:last-child { padding-right: 0; } /* UN FILET, PAS UN INTERSTICE : la bordure appartient a la zone suivante, donc aucune ne se detache en carte. */ .acc-coins-zone + .acc-coins-zone { border-left: 1px solid rgba(99, 102, 241, 0.22); } } /* ---- le prochain événement : supprimé le 04/10/2026 ---- Le bloc, son affiche, son voile, son decompte en quatre cases et son bouton sont retires de l'Accueil a la demande du proprietaire. Les quatre cases `.acc-chrono*` servaient UNIQUEMENT a ce bloc ; les cartes de competition portent desormais leur propre decompte, sur une ligne (`.acc-une-chrono`). */ /* ============================================================ CLASSEMENT DE SAISON — l'emplacement, pas le contenu ============================================================ IL RESPIRE ENFIN. Le bloc etait serre entre deux voisins et tenait sur une ligne, parce que la colonne portait trois sections. « Prochain evenement » est parti : il reprend la place, s'etire sur la hauteur disponible et centre son etat vide. CE QUI N'A PAS CHANGE, ET NE CHANGERA PAS TANT QUE LA SAISON N'EXISTE PAS : aucun classement n'est fabrique. Le bloc annonce ce qui vient, et propose les classements qui existent vraiment. */ .acc-bloc--saison { flex: 1; } .acc-saison { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 18px 16px; border-radius: 14px; border: 1px dashed rgba(255, 255, 255, 0.12); background: radial-gradient(120% 120% at 50% 0%, rgba(99, 102, 241, 0.09), transparent 65%), rgba(255, 255, 255, 0.02); } .acc-saison-icone { font-size: 30px; opacity: 0.55; flex-shrink: 0; line-height: 1; } .acc-saison-txt { min-width: 0; max-width: 340px; } .acc-saison-titre { margin: 0 0 5px; font-size: 14px; font-weight: 900; color: rgba(255, 255, 255, 0.8); } .acc-saison-texte { margin: 0; font-family: Arial, sans-serif; font-size: 12px; line-height: 1.55; color: rgba(255, 255, 255, 0.38); } /* LE BOUTON PLEINE LARGEUR DE LA REFERENCE. Il etait un lien discret glisse dans l'etat vide ; il en sort et devient l'action de la section — sans rien promettre de plus : il mene a la liste des competitions, la ou les classements reels se trouvent. */ .acc-saison-lien { display: block; margin-top: 9px; padding: 9px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.8); font-family: Arial, sans-serif; font-size: 11px; font-weight: 900; letter-spacing: 0.6px; text-transform: uppercase; text-align: center; text-decoration: none; } .acc-saison-lien:hover { background: rgba(255, 255, 255, 0.08); color: #fff; } /* ============================================================ COMMUNAUTÉ — TROISIEME BLOC DE LA COLONNE DE DROITE ============================================================ ELLE N'EST PLUS UNE BANDE PLEINE LARGEUR, ET C'EST UNE DECISION DU PROPRIETAIRE (04/10/2026). Elle traversait la fenetre pour trois boutons et un don. CE QUI CHANGE POUR LE BOUTON DE DON. L'ancienne exigence — son centre exactement sur l'axe de la page — tombe avec la bande : le proprietaire demande desormais qu'il soit centre DANS SON CONTENEUR. Le mecanisme, lui, ne change pas : `.hero-socials::before` (`landing.css`) lui garde sa propre ligne, et le `justify-content: center` du conteneur fait le reste. LES TROIS BOUTONS SOCIAUX S'EMPILENT. Dans une colonne d'environ 500 px, « Rejoindre la chaîne Twitch » (237 px) et « Rejoindre le Discord » (200 px) ne tiennent pas cote a cote : la rangee se repliait en 2 + 1, ce qui se lit comme un defaut. Empiles sur toute la largeur de la carte, ils gardent des cibles entieres et une bordure franche. */ .acc-communaute .acc-section-titre { font-size: clamp(14px, 1.5vw, 17px); } .acc-communaute-texte { margin: 4px 0 0; font-family: Arial, sans-serif; font-size: 11.5px; color: rgba(255, 255, 255, 0.4); } /* TROIS RESEAUX SUR UNE LIGNE, COMME LA REFERENCE. Les libelles ont ete raccourcis dans le balisage (« Discord » et non « Rejoindre le Discord », l'intitule complet reste dans `aria-label`) : c'est ce qui permet trois boutons lisibles dans une colonne d'un tiers de page. `flex: 1 1 0` ET NON UNE GRILLE DE TROIS COLONNES : un reseau non configure est MASQUE par `masquerLesLiensNonConfigures()` (`Accueil/JS/main.js`), et une grille lui garderait sa colonne vide. Les boutons restants se partagent la ligne. */ .acc-communaute .hero-socials { flex-direction: row; align-items: center; gap: 8px; margin-top: 11px; } .acc-communaute .hero-socials .btn-social { flex: 1 1 0; min-width: 0; padding: 0 10px; gap: 7px; justify-content: center; text-transform: uppercase; letter-spacing: 0.5px; font-size: 11px; } /* LE DON GARDE SA LIGNE — c'est `.hero-socials::before` de `landing.css` qui la lui donne, et on ne le masque surtout pas ici. Pleine largeur, son centre tombe donc sur celui de la carte. */ .acc-communaute .hero-socials .btn-don { width: 100%; justify-content: center; } /* SOUS 769 px, `landing.css` repasse la rangee en colonne et masque le saut de ligne ; notre `row` l'emporterait sur sa regle. On le rend. */ @media (max-width: 768px) { .acc-communaute .hero-socials { flex-direction: column; } .acc-communaute .hero-socials .btn-social { flex: 0 0 auto; width: 100%; } } /* LES REGLES DE LA MENTION EPIC SONT PARTIES AVEC ELLE (04/10/2026). `.acc-legal`, `.acc-bande--legal` et leurs declinaisons n'avaient plus de balisage a habiller : une feuille de style qui garde des selecteurs morts finit par en garder dix, et on ne sait plus lesquels servent. */ /* ============================================================ PIED DE PAGE — PLEINE LARGEUR ============================================================ C'ETAIT LE DEFAUT LE PLUS VISIBLE. Le pied de page etait dans la meme regle de largeur que les sections : son fond et sa bordure s'arretaient a 1240 px, et il se lisait comme un dernier bloc du contenu plutot que comme le bas du site. Desormais LA BANDE TRAVERSE LA FENETRE — fond, bordure et zone vont d'un bord a l'autre — et SEUL SON CONTENU (`.acc-footer-dedans`, qui est un `.acc-dedans`) garde la largeur de lecture et reste aligne sur les sections du dessus. */ .acc-footer { width: 100%; padding-top: clamp(18px, 2.2vw, 28px); padding-bottom: clamp(10px, 1.4vw, 16px); background: linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.42)); border-top: 1px solid rgba(255, 255, 255, 0.08); } .acc-footer-haut { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px); } .acc-footer-logo { font-size: 15px; font-weight: 900; letter-spacing: 2px; color: #fff; margin-bottom: 10px; } .acc-footer-pitch { margin: 0; font-family: Arial, sans-serif; font-size: 12.5px; line-height: 1.65; color: rgba(255, 255, 255, 0.38); max-width: 38ch; } .acc-footer-col { display: flex; flex-direction: column; gap: 9px; min-width: 0; } .acc-footer-titre { font-size: 11px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); margin-bottom: 2px; } .acc-footer-col a { font-family: Arial, sans-serif; font-size: 12.5px; color: rgba(255, 255, 255, 0.4); text-decoration: none; /* Assez haut pour le pouce : les liens de pied de page faisaient onze pixels de haut, et se manquaient au doigt. */ padding: 3px 0; } .acc-footer-col a:hover { color: #33C6FF; } /* LA MENTION EPIC EST ICI, ET NON DANS UNE BANDE A ELLE. Elle occupait 89 px de hauteur pour trois lignes de texte gris. Elle partage desormais le bas du pied de page avec le copyright. */ .acc-footer-bas { margin-top: clamp(12px, 1.6vw, 18px); padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.06); display: flex; justify-content: space-between; align-items: flex-start; gap: clamp(12px, 2vw, 32px); flex-wrap: wrap; font-family: Arial, sans-serif; font-size: 12px; color: rgba(255, 255, 255, 0.3); } .acc-footer-fin { display: flex; align-items: center; gap: 14px; flex-shrink: 0; } .acc-footer-bas a { color: rgba(255, 255, 255, 0.3); text-decoration: none; padding: 3px 0; } .acc-footer-bas a:hover { color: #33C6FF; } /* ============================================================ LES LARGEURS ============================================================ Les bascules sont posées là où une disposition cesse de tenir, et non à des nombres ronds. */ /* Sous 1000 px, le pied de page passe de quatre colonnes a deux : la marque y reprend toute la ligne. */ @media (max-width: 1000px) { .acc-footer-haut { grid-template-columns: repeat(2, minmax(0, 1fr)); } .acc-footer-marque { grid-column: 1 / -1; } } /* Sous 760 px, les actions passent sous les chiffres et reprennent toute la largeur, avec des cibles tactiles entieres. */ @media (max-width: 760px) { /* LES DEUX LIGNES QUI ETAIENT ICI IMPOSAIENT `aspect-ratio: 1983 / 793` A L'IMAGE — le rapport de L'ANCIENNE banniere. Elles ont survecu au changement de visuel et rognaient 319 px de largeur a 390 px de fenetre, alors que la regle au-dessus de 900 px donne deja au conteneur le rapport exact de la nouvelle image, ou `cover` ne retranche rien du tout. */ /* Les actions ne sont plus sur l'image : il n'y a plus rien a en sortir. Elles passent simplement sous les chiffres, sur toute la largeur, avec des cibles tactiles entieres. */ .acc-hero-actions { margin-left: 0; width: 100%; } .acc-cta { flex: 1 1 180px; } /* Les trois chiffres restent en ligne, plus serres. La pastille retrecit : a cette largeur, 42 px lui prennent le tiers de sa colonne. */ .acc-stats { gap: clamp(12px, 3vw, 24px); } .acc-stat-icone { width: 34px; height: 34px; font-size: 15px; } } /* Sous 520 px, trois chiffres côte à côte tombent sous cent pixels chacun : ils passent en colonne. */ @media (max-width: 520px) { /* Sous 520 px, trois groupes cote a cote tombent sous cent pixels chacun : ils passent en colonne, chacun sur sa ligne. */ .acc-stats { flex-direction: column; align-items: flex-start; gap: 14px; } .acc-footer-haut { grid-template-columns: minmax(0, 1fr); } .acc-cta { flex: 1 1 100%; } } /* ============================================================ MODE ORDINATEUR — TOUT L'ACCUEIL DANS UN ECRAN ============================================================ LE BUT, ET LA MESURE QUI LE DIT. A 1920x1080, la page faisait `scrollHeight` 3028 pour `clientHeight` 1080 : pres de deux mille pixels de trop, dont 768 pour la SEULE banniere. Le proprietaire veut voir tout l'Accueil sans toucher a la molette. CE BLOC NE CONCERNE QUE L'ORDINATEUR, a partir de 1200 px de large. En dessous — tablette, telephone, fenetre reduite — rien de tout ceci ne s'applique : les blocs s'empilent, les tailles tactiles restent entieres, et la page defile normalement. C'etait une consigne explicite : ne pas miniaturiser le site sur telephone pour gagner un combat qui ne se joue que sur grand ecran. TROIS LEVIERS, DANS CET ORDRE D'IMPORTANCE : 1. LA LARGEUR, AU LIEU DE LA HAUTEUR. Quatre blocs empiles sur toute la largeur prenaient 1365 px. Les memes, en trois colonnes plus une bande, en prennent le tiers. C'est la place disponible qu'on utilisait mal, pas les marges qui etaient trop grandes. 2. LA BANNIERE DEVIENT UN BANDEAU. Elle est bornee en hauteur et recadree en `cover` : son rapport n'est JAMAIS touche, c'est le cadre qui se resserre. 3. LA DENSITE. Vignettes plus basses, interlignes plus serres, mention legale rangee dans le pied de page plutot que dans une bande a elle seule. CE QUI N'A PAS BOUGE, ET POURQUOI : le bouton « Soutenir le projet » reste SEUL sur sa derniere ligne et centre sur l'axe de la page. Le mettre dans une colonne laterale aurait fait gagner quatre-vingts pixels — et casse l'exigence que le proprietaire a fait reprendre trois fois. On ne paie pas la compacite avec ca. ============================================================ */ @media (min-width: 1200px) { /* DEUX COLONNES, ET LES PROPORTIONS DEMANDEES. La page portait TROIS COLONNES EGALES plus une bande : les compétitions mises en avant — ce que le visiteur est venu voir — tenaient dans un tiers de la largeur, a cote d'un classement vide qui en prenait autant. 67 / 33, donc. `align-items: start` EST INDISPENSABLE : sans lui, les deux colonnes s'etirent a la hauteur de la plus haute, et la colonne courte etire ses cartes pour combler un vide qu'elle n'a pas demande. */ /* `stretch` ET NON `start`, ET C'EST VISIBLE SUR LA REFERENCE : les deux colonnes y finissent sur la MEME LIGNE BASSE. La colonne de droite etant devenue un panneau borde, sa bordure s'arretait cinquante pixels avant celle de gauche — un decrochage que l'oeil lit comme un defaut d'alignement. Elle s'etire ; son contenu, lui, reste en haut. */ .acc-grille { grid-template-columns: minmax(0, 70fr) minmax(0, 30fr); gap: 12px; padding: 10px; align-items: stretch; } .acc-colonne { gap: 11px; } .acc-colonne--droite { padding: 11px; } .acc-colonne--droite > .acc-bloc + .acc-bloc { padding-top: 9px; } /* LES DEUX COLONNES FONT LA MEME HAUTEUR, et il faut bien que quelqu'un prenne la difference. A gauche, c'est LA BANDE DES COINS : elle s'etire et centre ses quatre zones. Le vide s'accumulait sinon sous elle, a l'interieur du panneau — un trou de cinquante pixels que l'oeil lit comme un oubli. */ .acc-colonne--gauche > .acc-coins { flex: 1; } .acc-coins .acc-coins-rang { flex: 1; align-items: center; } .acc-bande--principal { padding-top: 6px; padding-bottom: 6px; } .acc-carte { padding: 12px 14px; border-radius: 14px; } .acc-section-head { margin-bottom: 9px; } .acc-section-titre { font-size: 15px; letter-spacing: 1px; } /* Les chiffres : une ligne basse, rattachee a la banniere. */ /* Les deux actions tiennent dans la ligne des chiffres : 46 px de haut la faisaient deborder de deux pixels. */ .acc-cta { min-height: 32px; padding: 7px 18px; } /* Poses sur une photo, les chiffres doivent porter : a 20 px ils se perdaient dans le decor. */ .acc-stat-icone { width: 38px; height: 38px; } .acc-stat-icone svg { width: 21px; height: 21px; } .acc-stat-val { font-size: 26px; } .acc-stat-lbl { font-size: 10.5px; margin-top: 2px; } .acc-stats { gap: clamp(22px, 2.6vw, 50px); } /* LA COLONNE EST DEUX FOIS PLUS LARGE QU'AVANT, et c'est ce qui change ici. Le nombre de colonnes etait POSE A TROIS parce que `auto-fit` en donnait deux dans une piste d'un tiers de page ; dans une colonne de deux tiers, `auto-fit` en donne quatre — soit exactement ce que le serveur met en avant au plus. On lui rend donc la main : trois tournois remplissent la ligne, quatre aussi. L'AFFICHE PEUT RESPIRER. Bornee a 56 px dans une carte de 230 px, elle etait un bandeau ; a 350 px de large, elle redevient une vignette. C'est la HAUTEUR qui est bornee, jamais le rapport. */ /* LE COMPTE DE COLONNES EST DECIDE EN FIN DE FEUILLE, pour tous les paliers a la fois. Cette ligne posait trois pistes de 272 px des 1280 px de fenetre — trop etroites pour le cadre officiel. */ /* RESSERRE DE 21 px — voir le commentaire de `.acc-une-corps`. C'est ce palier qui commande a partir de 1200 px de large : la regle de base ne s'y applique pas. */ /* DEUX LIGNES SONT RESERVEES, MEME QUAND LE NOM N'EN PREND QU'UNE. Sans ce plancher, une carte au nom court remontait tout son contenu de dix-sept pixels et les trois cartes ne s'alignaient plus. Au-dela de deux lignes, le nom est coupe proprement (`line-clamp`) plutot que d'agrandir la carte sans fin. */ /* TROIS LIGNES RESERVEES, ET PLUS DE `line-clamp`. Cette ligne reintroduisait l'ellipse retiree plus haut, et 14 px forcaient « Z7 Winter Clash Championship » sur trois lignes dont la derniere etait coupee. A 12 px et trois lignes reservees, le nom se lit en entier. Les 9 px que coute la troisieme ligne sont repris sur le decompte et les actions, juste en dessous. */ /* « S'inscrire · Gratuit » passait a deux lignes dans la colonne retrecie par le cadre officiel, et la rangee d'actions montait de 34 a 45 px. Un demi-point de moins suffit a la ramener sur une ligne. */ .acc-vide { padding: 16px 14px; font-size: 12px; } /* LA BANDE DES COINS, RESSERREE. Les quatre zones sont deja en ligne depuis 900 px (voir la regle du bloc des Coins) ; il ne reste ici qu'a gagner les quelques pixels verticaux qui font tenir la page dans l'ecran. */ .acc-coins-rang { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); } .acc-coins-solde { margin: 7px 0 6px; } .acc-coins-nb { font-size: 27px; } .acc-coins-texte { font-size: 11px; line-height: 1.45; } .acc-coins-icone { width: 26px; height: 26px; border-radius: 8px; } .acc-coins-icone svg { width: 15px; height: 15px; } .acc-coins-ztitre { margin: 6px 0 3px; font-size: 11px; } .acc-coins-savoir { margin-top: 9px; padding: 6px 14px; } /* L'EVENEMENT IMPOSE LA HAUTEUR DE LA RANGEE, et non les cartes de competition comme je l'avais cru : son titre et sa ligne de details passent a deux lignes dans cette colonne, et le chrono s'ajoute dessous. C'est donc lui qu'il faut resserrer. */ /* L'etat vide de la saison : il annonce qu'il n'y a rien a montrer, il n'a pas besoin d'une grande carte pour le dire. */ /* C'EST LE CLASSEMENT QUI IMPOSAIT LA HAUTEUR DE LA RANGEE, et non les cartes de competition ni l'evenement comme je l'ai cru tour a tour : dans une colonne de 318 px, son etat vide — icone, texte et lien cote a cote — se repliait sur trois lignes et montait a 232 px. Le lien prend donc sa propre ligne, et les deux premiers elements restent cote a cote. */ /* L'ETAT VIDE N'A RIEN A MONTRER : il n'a pas besoin de place pour le dire. Chaque pixel qu'il rend ici est un pixel que l'ecran garde pour le reste de la page — et l'Accueil doit tenir dans une hauteur d'ecran. Le titre et la phrase passent SUR LA MEME LIGNE, separes par un point : ils disent exactement la meme chose en deux fois moins de hauteur. */ .acc-saison { padding: 14px 14px; gap: 8px; } .acc-saison-icone { font-size: 26px; } .acc-saison-titre { font-size: 13px; } .acc-saison-texte { font-size: 11.5px; } .acc-saison-lien { margin-top: 8px; padding: 8px 12px; } /* La communaute : un titre, trois boutons empiles, le don dessous. Le centrage du don se joue maintenant dans SA CARTE — voir le bloc « COMMUNAUTÉ » plus haut. */ .acc-communaute .acc-section-titre { font-size: 13px; } .acc-communaute-texte { font-size: 11px; } .acc-communaute .hero-socials { gap: 7px; margin-top: 9px; } /* L'INTERLIGNE HERITE VALAIT 28 px DANS UN BOUTON DE 12 px. Le remplissage etait bien tombe a 7 px, et les boutons faisaient pourtant 44 px de haut : c'est la hauteur de ligne du corps de page qui les gonflait. `line-height: 1` les ramene a leur contenu. */ /* `min-height: 44px` EST POSE DANS `landing.css` pour la cible tactile, et un `min-height` l'emporte TOUJOURS sur un `height` : les boutons restaient a 44 px malgre un remplissage ramene a zero. Sur ordinateur, 32 px suffisent — la cible tactile n'a de sens que la ou l'on touche l'ecran, et ce bloc ne s'applique qu'au-dessus de 1200 px de large. */ .hero-socials .btn-social, .hero-socials .btn-don { min-height: 32px; height: 32px; padding: 0 15px; font-size: 12px; line-height: 1; gap: 7px; } .hero-socials svg { width: 15px; height: 15px; flex-shrink: 0; } /* Le pied de page : quatre colonnes sur une ligne, serrees. */ /* LE PIED DE PAGE SE RESSERRE PAR SES ESPACES, PAS PAR SON TEXTE. Les corps restent a 11,5 px : ce sont les interlignes, les remplissages et la ligne du bas qui rendent les pixels. */ .acc-footer { padding-top: 9px; padding-bottom: 4px; } .acc-footer-haut { gap: 22px; } .acc-footer-logo { font-size: 13px; margin-bottom: 5px; } .acc-footer-pitch { font-size: 11px; line-height: 1.45; } .acc-footer-titre { font-size: 10px; margin-bottom: 0; } .acc-footer-col { gap: 1px; } .acc-footer-col a { font-size: 11.5px; padding: 0; line-height: 1.5; } .acc-footer-bas { margin-top: 5px; padding-top: 5px; } .acc-footer-fin { font-size: 11px; } } /* ============================================================ ORDINATEUR, MAIS ECRAN MOINS HAUT ============================================================ A 1920x1080 l'Accueil tient exactement dans l'ecran. A 900 px de haut il manque environ 130 px, et a 768 environ 230. Ce palier resserre d'un cran de plus — SANS descendre sous des tailles lisibles. Le proprietaire a ete explicite : ne pas sacrifier la lisibilite pour gagner le zero defilement sur une petite hauteur. Ce qui reste a defiler sur ces ecrans est un geste de molette, pas une page entiere. */ @media (min-width: 1200px) and (max-height: 1000px) { /* LA CARTE N'EST PLUS REDUITE ICI. Ce palier la rapetissait de 7 % pour tenir dans une fenetre basse, du temps ou elle faisait 244 px de haut. Elle en fait 190 — 34 % de moins — depuis que l'affiche a cesse de dominer : la reduction s'ajoutait a celle de la cellule et ramenait le titre a 11,5 px, ce que ce palier etait justement cense eviter. Les remplissages et les ecarts de la bande, eux, se resserrent toujours : voir plus bas. */ /* CE PALIER EXISTE POUR LA FENETRE REELLE, PAS POUR L'ECRAN. Un ecran de 1920x1080 ne donne PAS 1080 px a la page : un navigateur maximise garde ses onglets et sa barre d'adresse, et Windows sa barre des taches. Il reste entre 950 et 1000 px. C'est ici — et nulle part ailleurs — qu'on les reprend, pour que le rendu en plein ecran (1080 px, le cas que le proprietaire valide) ne soit jamais rapetisse par ce reglage. TROIS LIGNES AVAIENT SURVECU A DES BLOCS DISPARUS : `.acc-une-img { max-height }` (l'affiche n'est plus posee en haut de la carte), et surtout un remplissage de bande PLUS GRAND que celui du palier ordinateur — ce qui allongeait la page de huit pixels des que la fenetre descendait sous 1000. */ .acc-bande--principal { padding-top: 4px; padding-bottom: 4px; } .acc-carte { padding: 11px 13px; } .acc-grille { gap: 11px; padding: 8px; } .acc-une { --acc-une-gout: 9px; } .acc-section-head { margin-bottom: 6px; } /* L'affiche garde son rapport : c'est sa LARGEUR qu'on resserre, donc sa hauteur suit sans aucun rognage. */ /* A 243 px de colonne, « Solo · Battle Royale · Europe » (219 px) tient sur une seule ligne : on ne reserve donc plus la seconde. */ /* Resserre pour rendre au cadre officiel les 21 px qu'il prend a la colonne de texte — meme raison qu'au palier precedent. */ .acc-coins-nb { font-size: 24px; } .acc-coins-texte { font-size: 10.5px; } .acc-coins-solde { margin: 6px 0 5px; } .acc-colonne--droite { padding: 9px; } .acc-colonne--droite > .acc-bloc + .acc-bloc { padding-top: 6px; } .acc-colonne { gap: 8px; } .acc-saison { padding: 12px 13px; } .acc-saison-icone { font-size: 24px; } .acc-saison-lien { margin-top: 7px; padding: 7px 12px; } .acc-footer { padding-top: 8px; padding-bottom: 4px; } .acc-footer-haut { gap: 18px; } .acc-footer-pitch { font-size: 10.5px; } .acc-footer-bas { margin-top: 5px; padding-top: 5px; } } /* ============================================================ FENETRE VRAIMENT BASSE — LE SECOND CRAN ============================================================ CE PALIER EST CELUI DU NAVIGATEUR MAXIMISE, pas du plein ecran. LE CALCUL, puisque c'est lui qui decide : un ecran de 1080 px ne donne pas 1080 px a la page. Chrome maximise garde ses onglets et sa barre d'adresse (environ 85 px) et Windows sa barre des taches (40 px) : il reste environ 955 px. En plein ecran (F11), la page recoit les 1080 et le premier palier suffit. On resserre donc d'un cran DE PLUS, et UNIQUEMENT ici : le rendu que le proprietaire valide — 1920x1080 — ne voit aucune de ces lignes. AUCUN CORPS DE TEXTE N'EST TOUCHE : ce sont les remplissages, les ecarts, et la LARGEUR de l'affiche des cartes (dont la hauteur suit, sans rognage) qui rendent les pixels. LE CONTENEUR COMMUNAUTE N'EST PAS DANS CETTE LISTE : il est valide, on n'y touche pas, meme ici. ============================================================ */ @media (min-width: 1200px) and (max-height: 980px) { /* 3 % DE MOINS SUR LA CARTE, ET PAS UN DE PLUS. Mesure : a 1920 x 955 la page depassait sa fenetre de 5 px, et c'est la rangee « a la une » qui les porte. 0,97 lui en rend 6. Ce palier a longtemps vaut 0,86 — du temps ou la carte faisait 244 px de haut. Elle en fait 198 ici : une reduction de 14 % ramenait le titre a 11,5 px, soit exactement ce que cette passe corrige. Le facteur MULTIPLIE celui que la largeur de la cellule a deja donne, il ne le remplace pas. */ .z7-une--home { --z7-ech-h: 0.97; } .acc-bande--principal { padding-top: 3px; padding-bottom: 3px; } .acc-grille { padding: 6px; gap: 10px; } .acc-colonne { gap: 7px; } .acc-section-head { margin-bottom: 5px; } /* DEUX LIGNES DE NOM A CE PALIER, et non trois. La fenetre est basse : la carte n'a pas les 14 px d'une troisieme ligne. Un nom tres long y est donc coupe — c'est le palier le plus serre du site, et il tient dans 900 px de haut sans defilement. */ /* Les quatre derniers pixels : le texte de la jauge et le remplissage au-dessus des actions. */ /* A 1600 px, la colonne de texte tombe a 213 px : les pastilles y passent a deux lignes et il manquait 8 px. Un demi-point de moins sur les actions ramene « S'inscrire · Gratuit » sur une ligne et rend 11 px. */ .acc-colonne--droite { padding: 7px; } .acc-colonne--droite > .acc-bloc + .acc-bloc { padding-top: 5px; } .acc-saison { padding: 10px 12px; } .acc-saison-icone { font-size: 22px; } .acc-saison-titre { font-size: 12.5px; } .acc-saison-lien { margin-top: 6px; padding: 6px 12px; } .acc-footer { padding-top: 6px; padding-bottom: 3px; } .acc-footer-haut { gap: 10px; } .acc-footer-logo { margin-bottom: 3px; } .acc-footer-col a { line-height: 1.4; } .acc-footer-bas { margin-top: 4px; padding-top: 4px; } } /* ============================================================ SUR PETIT ECRAN, RIEN N'EST POSE SUR LA BANNIERE ============================================================ Le proprietaire l'a demande nommement : ne pas degrader le telephone pour y forcer la meme superposition. Avec un rapport de 4,54, la banniere ne fait que 86 px de haut a 390 px de large — y empiler deux boutons et trois chiffres les rendrait minuscules et illisibles. La couche sort donc du flux absolu, redevient un bloc ordinaire sous l'image, et reprend le fond de la page. Les cibles tactiles gardent leur taille entiere. */ /* LE GROUPE PASSE SOUS L'IMAGE DES 1300 PX, ET NON 900. Deux raisons qui tombent au meme endroit : · sous 1300 px, la barre fixe recouvre le titre dessine dans l'image (voir `landing.css`) ; · la banniere y descend sous 290 px de haut, et le groupe — qui garde sa taille en pixels — n'y tient plus. Au-dessus, il est superpose ; en dessous, il se range dessous. */ @media (max-width: 1300px) { /* PLUS RIEN A FAIRE ICI POUR L'IMAGE. Ces deux lignes imposaient un rapport au conteneur puis a l'image, et c'est ce qui a casse le telephone a chaque changement de banniere. L'image portant maintenant sa propre hauteur, le repli n'a plus qu'a sortir la couche du flux absolu. */ /* LE FONDU N'A PLUS RIEN A RENDRE LISIBLE ICI : le groupe est passe SOUS l'image. Le laisser ne ferait qu'assombrir une banniere deja petite — 105 px de haut a 390 px de large — pour rien. */ .acc-hero::after { display: none; } .acc-hero-sur { position: static; /* LES GOUTTIERES SONT RENDUES ICI. Le groupe etait dans un `.acc-dedans` qui les portait ; il en est sorti pour se caler sur le texte de l'image, et sur petit ecran — ou il repasse dans le flux — il se retrouvait colle au bord gauche. */ padding-left: var(--acc-gouttiere); padding-right: var(--acc-gouttiere); padding-top: clamp(12px, 3vw, 18px); padding-bottom: clamp(12px, 3vw, 18px); background: rgba(255, 255, 255, 0.018); border-bottom: 1px solid rgba(255, 255, 255, 0.055); pointer-events: auto; } .acc-hero-groupe { gap: 14px; } .acc-hero-actions { width: 100%; } .acc-hero-actions .acc-cta { flex: 1 1 180px; } /* Plus de photo derriere : les ombres portees n'ont plus d'objet, et les libelles retrouvent leur discretion. */ .acc-stat-val, .acc-stat-lbl, .acc-stat-note { text-shadow: none; } .acc-stat-lbl { color: rgba(255, 255, 255, 0.45); } .acc-stat-note { color: rgba(255, 255, 255, 0.3); } .acc-stat-icone { background: rgba(99, 102, 241, 0.16); backdrop-filter: none; box-shadow: none; } } @media (max-width: 520px) { .acc-stats { flex-direction: column; align-items: flex-start; gap: 14px; } } /* ============================================================ COMBIEN DE CARTES « A LA UNE » PAR RANGEE ============================================================ Ecrit ici, en fin de feuille, pour que ce soit la DERNIERE parole : trois paliers de hauteur posaient chacun leur grille, et celui de 1200 px ramenait des pistes de 272 px. LE PLANCHER EST ARITHMETIQUE. Le cadre officiel occupe `hauteur x 0,6968`, soit 157 px pour une carte de 227 : sur une carte de 272 px il ne resterait que 138 px aux informations. Une carte ne descend donc pas sous ~340 px, et la grille montre MOINS de cartes plutot que des cartes trop etroites. IL N'Y A PLUS DE TROISIEME COLONNE, ET C'EST ARITHMETIQUE. La carte maitre fait 520 x 220 : son cadre officiel en prend 152 (220 x 0,6968) et il reste 352 px aux informations. Or la grille de l'Accueil plafonne a 1191 px : trois colonnes donnent des cellules de 385 px, soit 135 px de moins que le gabarit. On y revenait a une colonne de texte de 218 px — exactement le probleme que cette passe corrige : titre a 11 px, pastilles a 7,5 px sur deux lignes. Deux colonnes donnent 588 px : la carte s'y pose a sa taille maitre et il reste du jeu. MOINS DE CARTES, MAIS LA BONNE CARTE — et c'est deja ce que disait le commentaire precedent : « deux cartes larges valent mieux que trois etriquees ». LA CARTE NE S'ETIRE PAS POUR REMPLIR SA CELLULE : le plafond appartient au COMPOSANT (`Common/CSS/carte-une.css`, `.z7-une { max-width }`), parce qu'il vaut pour les deux pages. Il ne reste ici que le centrage de la carte dans sa cellule. */ .z7-une--home { justify-self: center; } /* ============================================================ LE NOMBRE DE COLONNES NE CHANGE PAS. L'ECHELLE, SI. ============================================================ Deux colonnes des 760 px, trois a partir de 1560 : ce sont les seuils deja valides, et ils ne bougent pas. Ce qui etait faux, c'est que la carte gardait ses 255 px de haut dans une cellule de 385 px. Le cadre officiel vaut `hauteur x 0,6968` : son rapport remontait donc de 34 % a 47 %, et la colonne de texte retombait sous 220 px. C'est le cycle a casser. LA CARTE SE REDUIT POUR ENTRER DANS SA CELLULE. L'unite du composant vaut `cellule / 520` -- 520 px etant le gabarit maitre -- et TOUT suit ensemble : polices, remplissages, cadre de l'affiche, hauteurs reservees. Mesure : le rapport de l'affiche tient 33,8 a 33,9 % de 1024 a 2560 px, sur les deux pages. On n'ecrit pas une suite de paliers a la main : il en aurait fallu sept, et ils se perimeraient au premier changement de gabarit de page. On ecrit l'unite elle-meme, et la cellule se calcule comme la grille la calcule : `(grille - gouttieres) / colonnes`, avec la gouttiere de `.acc-une` a l'identique. `min(1px, ...)` : jamais plus GRANDE que la carte maitre. LE PIEGE DES UNITES DE CONTENEUR EST EVITE. `cqw` se resout sur le conteneur ANCETRE, jamais sur l'element lui-meme : le conteneur est la GRILLE (`.acc-une`), au-dessus des cartes, donc la carte, sa colonne de texte et le cadre de l'affiche lisent tous la MEME reference. C'est en declarant la carte elle-meme conteneur qu'on avait vu le rapport du cadre tomber de 0,697 a 0,618. SOUS 760 px, AUCUNE DE CES REGLES NE S'APPLIQUE : la carte se redresse, l'affiche passe au-dessus, et elle n'a plus besoin de 520 px de large -- son unite reste 1. `--z7-ech-h` reste le facteur des fenetres basses, et il MULTIPLIE celui-ci : une fenetre a la fois etroite et basse reduit deux fois. ============================================================ */ @media (min-width: 760px) { .acc-une { container-type: inline-size; grid-template-columns: repeat(2, minmax(0, 1fr)); } .z7-une--home { --z7-u: calc(min(1px, (100cqw - var(--acc-une-gout)) / 1040) * var(--z7-ech-h, 1)); } } @media (min-width: 1560px) { .acc-une { grid-template-columns: repeat(3, minmax(0, 1fr)); } .z7-une--home { --z7-u: calc(min(1px, (100cqw - 2 * var(--acc-une-gout)) / 1560) * var(--z7-ech-h, 1)); } } /* ============================================================ SOUS 760 px, LA CARTE SE REDRESSE ============================================================ Cote a cote dans 336 px, le cadre officiel en prend 177 et il n'en reste que 157 aux informations : le nom du tournoi ne tient plus. En pile, l'affiche passe au-dessus — elle porte alors son rapport elle-meme, puisqu'elle ne tire plus sa taille de la hauteur de la carte — et les informations retrouvent toute la largeur. C'est la meme variante que sur la page Tournois. */ /* La carte en pile est l'affaire du composant : `Common/CSS/carte-une.css`. */