/* ============================================================ (Frontend) Common/CSS/carte-une.css ============================================================ Z7-TOURNAMENT-FEATURED — LA CARTE MAITRE, ET SES REDUCTIONS. Une carte « Competition a la une » de l'Accueil et une carte « Mis en avant » de Tournois sont LA MEME CARTE. Le gabarit est commun (`Common/JS/carte-une.js`), le dessin l'est ici, et le RENDU l'est aussi — ce qui n'allait pas de soi. ============================================================ UNE SEULE UNITE : `--z7-u` ============================================================ CE QUI N'ALLAIT PAS. Chaque variante posait ONZE variables independantes : hauteur, remplissage, interligne, taille du nom, hauteur reservee au nom, hauteur des pastilles, taille des lignes, chiffres et libelles du decompte, taille et hauteur des boutons. Rien n'obligeait ces onze valeurs a bouger ENSEMBLE — l'Accueil resserrait son remplissage sans toucher a ses polices, gardait ses boutons et rognait ses interlignes. Deux compositions differentes, et c'est ce qu'on voyait a l'oeil malgre un DOM commun. Meme gabarit ne fait pas meme rendu. CE QUI LES REMPLACE. Toutes les dimensions du composant s'ecrivent `calc(N * var(--z7-u))`. `--z7-u` est l'unite de la carte : la changer redimensionne TOUT ensemble — affiche, polices, hauteurs reservees, interlignes, rayons, icones. C'est une homothetie, pas un reglage. Tournois : --z7-u: 1px (la carte maitre) Accueil : --z7-u: 1px (la meme carte — les deux conteneurs offrent 385 et 389 px, il n'y a aucune raison de la dessiner autrement) Accueil, fenetre basse : 0,93 puis 0,86 — la MEME carte, reduite en entier. CE QUI RESTE A LA PAGE : la LARGEUR de la carte, c'est-a-dire la place que son conteneur lui donne — une grille ici, un carrousel la-bas. La page ne decide de rien a l'interieur. ============================================================ LA STRUCTURE ============================================================ [ AFFICHE 1080/1550 ] [ INFORMATIONS ] A. HEADER nom (2 lignes reservees) + cagnotte flottante B. TAGS mode, type, region — une seule ligne C. DEBUT sa propre ligne D. FIN sa propre ligne, TOUJOURS reservee E. ENTRY prix d'inscription F. PARTICIPANTS inscrits / capacite G. PROGRESS la jauge ------------------------------------ respiration H. COUNTDOWN \ BLOC BAS, ancre en bas I. ACTIONS / TROIS REGLES QUI TIENNENT LE RESTE : 1. CHAQUE ZONE A UNE HAUTEUR QUI NE DEPEND PAS DE SON CONTENU. Le nom reserve deux lignes meme s'il n'en prend qu'une. Sans cela, un titre court fait remonter tout ce qui suit et deux cartes cote a cote cessent d'etre alignees. 2. UNE DONNEE ABSENTE NE DEPLACE RIEN, ET NE REND PAS SA PLACE. Jauge inconnue, date de fin absente : l'emplacement reste, son CONTENU devient invisible (`.z7-une-reserve`). L'espace vide est VOLONTAIRE — c'est lui qui garantit qu'une ligne horizontale traverse une rangee entiere. On ne cherche pas a le recuperer, et on ne le remplit jamais par une valeur inventee. 3. LE DECOMPTE ET LES ACTIONS FORMENT UN BLOC ancre en bas (`.z7-une-bas`). Tout l'espace libre se rassemble au-dessus de lui, en une respiration unique, au lieu de se diluer entre les lignes. ============================================================ */ .z7-une { /* L'UNITE DU COMPOSANT. Tout ce qui suit en derive : la changer redimensionne la carte ENTIERE, d'un seul geste. POURQUOI PAS `cqw`, qui aurait fait suivre la largeur de la carte automatiquement : une unite de conteneur ne se resout PAS contre l'element qui la porte, mais contre son conteneur ANCETRE. La meme variable valait donc 1,12 dans la carte — dont l'ancetre est le carrousel de 1199 px — et 1,0 dans le cadre de l'affiche, dont l'ancetre est la carte. Le cadre se calculait sur une hauteur qui n'etait pas celle de la carte, et son rapport tombait de 0,697 a 0,618. Mesure faite, piege evite. `--z7-echelle` est donc le seul levier d'une page : un seul nombre, qui multiplie tout. */ --z7-u: calc(var(--z7-echelle, 1) * 1px); /* La hauteur de la carte : c'est elle qui donne sa largeur au cadre de l'affiche (`hauteur x 1080/1550`, voir affiche-tournoi.css). `--z7-une-haut` est lue par ce cadre. */ /* PLUS LARGE, MOINS HAUTE — et c'est l'inverse du cycle qui nous a repris trois fois. Le cadre officiel vaut `hauteur x 0,6968` : une carte de 389 x 244 lui donnait 169 px, soit 43 % de la largeur, et la colonne de texte tombait a 218 px. Chaque gain de hauteur elargissait l'affiche et reprenait au texte ce qu'on venait de lui donner. 520 x 262 inverse le rapport : l'affiche fait 181 px, soit 35 %, et il reste 334 px aux informations — de quoi ecrire un titre de 18 px, des pastilles de 11 px sur une seule ligne et une barre de progression confortable. LA HAUTEUR EST MESUREE, PAS CHOISIE. Le contenu des neuf zones demande 258 px a ces tailles ; 264 lui laisse les 6 px de respiration que le bloc bas, ancre en bas, pose entre la barre et le decompte. Pas davantage : c'etait l'espace mort. ET C'EST UN PLAFOND. La cible est une affiche a 30-35 % de la carte : `0,6968 x hauteur / 520 <= 0,35` donne une hauteur maximale de 261 px — 264 l'effleure a 35,1 %. Toute zone qui grandit desormais doit etre payee par une autre. */ --z7-une-h: calc(264 * var(--z7-u)); --z7-une-haut: var(--z7-une-h); height: var(--z7-une-haut); min-width: 0; display: flex; align-items: stretch; border-radius: calc(14 * var(--z7-u)); overflow: hidden; background: var(--z7-une-fond); border: 1px solid var(--z7-une-bordure); text-decoration: none; color: inherit; transition: border-color 0.2s, transform 0.2s; } .z7-une:hover { border-color: var(--z7-une-bordure-survol); transform: translateY(-2px); } /* ---- la colonne d'informations ---- */ .z7-une-infos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(3.2 * var(--z7-u)); padding: calc(8 * var(--z7-u)) calc(11 * var(--z7-u)) calc(9 * var(--z7-u)); overflow: hidden; } /* Aucune zone ne se laisse comprimer : par defaut un element flex a `flex-shrink: 1`, et dans une carte dont la hauteur est ecrite les zones se partageaient le manque — la cagnotte s'est deja retrouvee coupee en deux a cause de cela. Si l'ensemble ne tient pas, c'est l'unite qu'il faut revoir, pas les zones qu'il faut ecraser. */ .z7-une-infos > * { flex-shrink: 0; } /* ---- A. HEADER ---- */ /* `overflow: hidden` est pose sur la ZONE et surtout pas sur le nom : sur le nom, il creerait un contexte de formatage qui REFUSE de longer un flottant, et la boite entiere se reduirait a la place laissee par la cagnotte — sur toutes ses lignes au lieu des deux premieres. */ .z7-une-tete { display: block; overflow: hidden; } /* La cagnotte FLOTTE : elle n'ampute que les lignes a sa hauteur, et le nom coule autour. Elle est posee en haut a DROITE de la zone informations — jamais sur l'affiche. */ .z7-une-tete .z7-une-cash { float: right; margin-left: calc(9 * var(--z7-u)); } .z7-une-nom { display: block; text-decoration: none; color: #fff; /* 18 px — LE NIVEAU 1, et c'est la largeur qui le paie. Le nom plafonnait a 11 px dans une colonne de 218 px partagee avec la cagnotte. La colonne en offre 352 : la cagnotte en prend 100 et il reste 252 px a la premiere ligne, quand « Z7 WINTER CLASH » en demande 205 a 18 px. Le nom domine enfin sans que rien d'autre ait eu a rapetisser. */ font-size: calc(18 * var(--z7-u)); line-height: 1.2; /* DEUX LIGNES RESERVEES. Ecrite en `em`, la reserve suit la police, donc l'unite : elle se reduit avec le reste. 2,5 em ET NON 2,4. Deux lignes a `line-height: 1.2` font 2,4 em en theorie ; mesure, le navigateur rend 45 px la ou la reserve en faisait 43, et le nom long etait coupe de 1,8 px. Une boite de ligne n'est pas exactement son interligne — on reserve l'arrondi avec. */ height: 2.5em; overflow-wrap: anywhere; } /* LA CAGNOTTE. Vert = provisionnee, or = annoncee, violet = lot non monetaire. On ne fait pas passer un lot pour de l'argent. */ .z7-une-cash { display: inline-flex; align-items: center; gap: calc(4 * var(--z7-u)); flex-shrink: 0; max-width: 46%; overflow: hidden; padding: calc(3 * var(--z7-u)) calc(8 * var(--z7-u)) calc(3 * var(--z7-u)) calc(6 * var(--z7-u)); border-radius: calc(7 * var(--z7-u)); background: rgba(255, 183, 0, 0.1); border: 1px solid rgba(255, 183, 0, 0.4); color: #FFB700; font-family: Arial, sans-serif; font-size: calc(10 * var(--z7-u)); font-weight: 900; white-space: nowrap; line-height: 1.4; } .z7-une-cash svg { width: calc(12 * var(--z7-u)); height: calc(12 * var(--z7-u)); flex-shrink: 0; } .z7-une-cash.est-garanti { background: rgba(40, 167, 69, 0.12); border-color: rgba(40, 167, 69, 0.45); color: #4ade80; } .z7-une-cash--lot { background: rgba(139, 92, 246, 0.14); border-color: rgba(139, 92, 246, 0.45); max-width: 44%; color: #c4b5fd; } /* L'ellipse a besoin d'un element : dans une boite `inline-flex`, un simple texte n'est pas coupe par `text-overflow`. */ .z7-une-cash-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---- B. TAGS ---- */ /* Les pastilles sont « attachees » au nom : elles le suivent immediatement, et c'est la ligne des dates qui ouvre la respiration suivante. UNE rangee reservee — trois pastilles y tiennent a cette echelle, et la hauteur de la carte ne depend donc pas de la longueur des mots. */ .z7-une-pastilles { /* 28 px : la hauteur MESUREE d une pastille a 11 px de police, remplissage et contour compris. Ecrire 24 aurait suffi tant que la rangee est pleine — et aurait decale d un pixel la carte dont les trois champs sont absents. */ min-height: calc(28 * var(--z7-u)); overflow: hidden; margin-bottom: calc(1.5 * var(--z7-u)); } /* Les pastilles suivent l'unite. Le dessin — fond sombre, contour colore, point de couleur — vient de `Common/CSS/tags.css` et ne change pas ; seule leur taille se reduit avec la carte. */ .z7-une .z7-tags { gap: calc(5 * var(--z7-u)); } .z7-une .z7-tag { /* 10 px, ET C'EST LA LARGEUR DE LA CARTE QUI LE PERMET. Les trois pastilles les plus longues — « Solo · Battle Royale · Europe » — demandent environ 28 px par point de police plus 70 px d'habillage. Dans les 218 px de l'ancienne colonne, elles plafonnaient a 7,6 px et passaient a deux lignes au-dela. La colonne en offre 352 : a 10 px il leur en faut 280, il reste 72 px de marge, et elles tiennent sur une ligne sur TOUTES les cartes. C'est la seule facon honnete de les agrandir : leur donner de la largeur. Les reduire pour qu'elles rentrent, ou laisser `flex-wrap` changer la hauteur de la zone, etaient les deux mauvaises reponses. */ font-size: calc(11 * var(--z7-u)); padding: calc(4.5 * var(--z7-u)) calc(10 * var(--z7-u)) calc(4.5 * var(--z7-u)) calc(8 * var(--z7-u)); gap: calc(5 * var(--z7-u)); border-radius: calc(9 * var(--z7-u)); letter-spacing: calc(0.3 * var(--z7-u)); } .z7-une .z7-tag::before { width: calc(6 * var(--z7-u)); height: calc(6 * var(--z7-u)); } /* ---- C/D/E. LES LIGNES D'INFORMATION ---- */ .z7-une-ligne { display: flex; align-items: center; gap: calc(6 * var(--z7-u)); font-family: Arial, sans-serif; font-size: calc(14 * var(--z7-u)); color: rgba(255, 255, 255, 0.72); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* L'ICONE EST GRANDE, LE LIBELLE EST PETIT. C'est elle qui dit de quoi parle la ligne — un calendrier, un drapeau d'arrivee, un jeton — et elle le dit mieux qu'un mot. Le libelle « DEBUT : », « FIN : », « ENTREE : » n'est plus la que pour lever une ambiguite : petit, gris, peu gras. C'est la VALEUR qui se lit, et le titre qui domine. L'icone est donc PLUS GRANDE que son libelle : 17 px contre 9. ET ELLE NE PEUT PAS GRANDIR DAVANTAGE, c'est arithmetique. Chaque point d'icone ajoute un point a CHACUNE des trois lignes, donc trois a la hauteur de la carte — et le cadre officiel vaut `hauteur x 0,6968`. A 18 px, la carte passerait a 267 et l'affiche a 35,5 % : au-dela de la cible 30-35 %. */ .z7-une-ligne svg { width: calc(17 * var(--z7-u)); height: calc(17 * var(--z7-u)); flex-shrink: 0; opacity: 0.92; } .z7-une-lbl { font-size: calc(9 * var(--z7-u)); font-weight: 600; letter-spacing: calc(0.2 * var(--z7-u)); text-transform: uppercase; color: rgba(255, 255, 255, 0.34); } .z7-une-valeur { color: rgba(255, 255, 255, 0.78); } .z7-une-ligne--entree .z7-une-valeur { color: #FFB700; font-weight: 900; } /* LA LIGNE « FIN » A SA PROPRE PLACE, ET ELLE NE LA REND JAMAIS. Un tournoi sans date de fin garde l'emplacement : seul son CONTENU devient invisible. L'espace vide est VOLONTAIRE — c'est lui qui permet de tracer une ligne horizontale au travers d'une rangee entiere, quelles que soient les donnees de chaque carte. */ .z7-une-ligne--fin .z7-une-valeur { color: rgba(255, 255, 255, 0.62); } /* ---- F. LA JAUGE ---- */ .z7-une-jauge { min-width: 0; } .z7-une-jauge-txt { font-family: Arial, sans-serif; font-size: calc(11 * var(--z7-u)); color: rgba(255, 255, 255, 0.46); margin-bottom: calc(4 * var(--z7-u)); } .z7-une-barre { height: calc(6 * var(--z7-u)); border-radius: 50px; background: rgba(255, 255, 255, 0.08); overflow: hidden; } .z7-une-barre span { display: block; height: 100%; border-radius: 50px; background: linear-gradient(90deg, #6366f1, #8b5cf6); } /* ---- G/H. LE BLOC BAS ---- */ /* `gap: inherit` : le bloc reprend l'interligne de la colonne, quelle que soit l'echelle. Un reglage de moins a tenir en double. */ .z7-une-bas { margin-top: auto; display: flex; flex-direction: column; gap: inherit; min-width: 0; } /* ---- LE DECOMPTE ---- SON DESSIN N'EST PLUS ICI. Il a ete deplace dans `Common/CSS/compte-a-rebours.css`, ou il s'appelle `Z7-COUNTDOWN` : la carte de defi 1V1 en avait besoin, et deux dessins pour une seule idee devenaient une divergence de plus. RIEN N'A CHANGE POUR CETTE CARTE. Les classes `.z7-une-chrono`, `.z7-une-case`, `.z7-une-case-val` et `.z7-une-case-lbl` sont reprises telles quelles la-bas, avec les memes valeurs et la meme unite `--z7-u`. Le composant est FIGE : son balisage n'a pas bouge. LA PAGE DOIT CHARGER CE FICHIER. `index.html`, `Fortnite/fortnite.html` et `dev/components.html` le font — ce sont les trois seules qui emploient ce composant. */ /* LA RANGEE D'ACTIONS A UNE HAUTEUR FIXE, et c'est mesure : un libelle long — « Inscriptions fermees » — passe a deux lignes et faisait 35 px la ou « S'inscrire » en faisait 32. Le bloc bas etant ancre, ces 3 px remontaient le decompte de cette carte-la, et la rangee cessait d'etre alignee. La hauteur est donc reservee pour DEUX lignes : un bouton court laisse la place, il ne la rend pas. */ .z7-une-actions { display: flex; gap: calc(8 * var(--z7-u)); height: calc(36 * var(--z7-u)); } .z7-une-btn { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: calc(4 * var(--z7-u)) calc(4 * var(--z7-u)); height: 100%; border-radius: calc(9 * var(--z7-u)); border: 1px solid transparent; background: none; font-family: Arial, sans-serif; font-size: calc(13 * var(--z7-u)); font-weight: 900; letter-spacing: calc(0.2 * var(--z7-u)); text-transform: uppercase; text-decoration: none; line-height: 1.2; cursor: pointer; } /* LE TON DIT L'ETAT, et il vient de `etatActionTournoi()` : le dessin ne decide de rien. Un ETAT (inscrit, ferme, indisponible) n'est pas cliquable — c'est un ``, marque `.est-inactif`. */ .z7-une-btn--voir { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.78); } .z7-une-btn--voir:hover { background: rgba(255, 255, 255, 0.09); color: #fff; } .z7-une-btn--accent { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; } .z7-une-btn--accent:hover { filter: brightness(1.1); } .z7-une-btn--succes { background: rgba(40, 167, 69, 0.12); border-color: rgba(40, 167, 69, 0.45); color: #4ade80; } .z7-une-btn--danger { background: rgba(220, 53, 69, 0.12); border-color: rgba(220, 53, 69, 0.45); color: #ef4444; } .z7-une-btn--alerte { background: rgba(255, 183, 0, 0.12); border-color: rgba(255, 183, 0, 0.45); color: #FFB700; } .z7-une-btn--neutre { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.5); } .z7-une-btn.est-inactif { cursor: default; } .z7-une-btn.est-inactif:hover { filter: none; } /* ---- une ligne reservee garde sa place sans rien affirmer ---- */ .z7-une-reserve { visibility: hidden; } /* ---- l'emplacement neutre, quand le tournoi n'a pas d'affiche ---- */ .z7-une-sans-affiche { display: flex; align-items: center; justify-content: center; background: radial-gradient(120% 120% at 30% 0%, rgba(99, 102, 241, 0.16), transparent 62%), linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(8, 11, 19, 0.6)); } .z7-une-sans-affiche span { font-family: 'Arial Black', Arial, sans-serif; font-weight: 900; letter-spacing: calc(2 * var(--z7-u)); color: rgba(255, 255, 255, 0.16); font-size: calc(26 * var(--z7-u)); line-height: 1; } /* ============================================================ LES DEUX VARIANTES — UNE SEULE VALEUR CHACUNE ============================================================ Elles ne posent que `--z7-u`. Tout le reste en decoule, ensemble. Une variante qui aurait besoin de reposer autre chose ne serait plus une variante : ce serait un autre composant, et il faudrait en parler. ============================================================ */ /* 520 x 220 : LE GABARIT MAITRE, ET LA CARTE NE S'ETIRE PAS AU-DELA. C'est sur cette taille que tout a ete mesure. Sans ce plafond, une cellule plus large garde une affiche de 169 px et donne TOUT le surplus a la colonne de texte : mesure du 06/10/2026, la carte passait de 389 px a 1920 a 661 px a 1150 sur Fortnite et a 435 px a 1366 sur l'Accueil, soit un ecart de 9,2 points sur X et W entre les deux pages — deux compositions differentes a partir du meme DOM. Ecrit dans l'unite du composant, le plafond suit l'echelle : la carte reste la MEME carte, simplement centree dans une cellule plus large qu'elle. LA LARGEUR EST ECRITE, PAS DEDUITE. `justify-self: center` retire la carte de l'etirement de sa cellule : elle revenait alors a sa largeur de contenu — 446 px mesures dans une cellule de 587 — et le rapport de l'affiche remontait a 34 % au lieu de 29. La largeur maitre est donc ecrite, et `max-width: 100%` l'empeche de deborder d'une cellule plus petite. Sous 760 px la carte se redresse et devient plus etroite que ce gabarit : il ne mord donc pas sur le telephone. */ .z7-une { width: calc(520 * var(--z7-u)); max-width: 100%; } /* TOURNOIS — la carte maitre : echelle 1. */ .z7-une--compact { --z7-echelle: 1; } /* ACCUEIL — la MEME carte, a la meme echelle : les deux conteneurs offrent 385 et 389 px a 1920, il n'y a aucune raison de la dessiner autrement. Les paliers de fenetre basse, eux, la reduisent EN ENTIER — voir `Accueil/CSS/accueil.css`. */ .z7-une--home { --z7-echelle: 1; } /* ============================================================ SOUS 760 px, LA CARTE SE REDRESSE ============================================================ Cote a cote dans 270 px, le cadre officiel prend la moitie de la largeur et 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. */ @media (max-width: 760px) { .z7-une { flex-direction: column; height: auto; } /* DEUX RANGEES DE PASTILLES SONT RESERVEES ICI, et c'est mesure : la colonne de texte d'une carte en pile fait 267 px sur un telephone de 390, quand « Solo · Battle Royale · Europe » en demande 280 a 10 px. La regle « trois pastilles sur une ligne » vaut pour le DESKTOP ; ici la seconde rangee est donc un EMPLACEMENT RESERVE, pas un debordement — sans quoi le `overflow: hidden` de la zone coupait purement la region. Les cartes a pastilles courtes gardent la rangee vide : une rangee entiere reste alignee, comme partout ailleurs. */ .z7-une-pastilles { min-height: calc(61 * var(--z7-u)); } /* deux rangees de 28, plus les 5 px d ecart */ /* TROIS LIGNES DE NOM SONT RESERVEES ICI, meme raisonnement : dans les 267 px d'une carte en pile, « Z7 WINTER CLASH CHAMPIONSHIP » demande trois lignes a 18 px. Un nom de tournoi se lit en entier — on reserve la troisieme ligne plutot que de le couper ou de rapetisser la police. */ .z7-une-nom { height: 3.7em; } .z7-une-visuel { flex: 0 0 auto; width: 62%; max-width: 200px; margin: 0 auto; aspect-ratio: 1080 / 1550; } }