/* ══════════════════════════════════════════════════════════════════ LE VOCABULAIRE DES ÉCRANS DE DIRECT. Extrait UNE FOIS de « Frenchy Live - Avant et apres », « Frenchy Live - Interface » et « Frenchy Live - Apres direct spectateur », plutôt que réapproché écran par écran. Trois lots successifs ont converti ces pages morceau par morceau, en annonçant chaque fois « aux valeurs exactes » — et c'était vrai du morceau regardé, jamais du reste. C'est ce va-et-vient que cette feuille arrête : les valeurs sont ici, les pages s'en servent, et le prochain écran hérite au lieu d'être réapproché. ── CE QUI DIFFÈRE DES MAQUETTES, ET C'EST ASSUMÉ ── Elles sont dessinées pour 1280 px fixes (`min-width:1280px`). Ce site tient jusqu'à 320 px et bascule à 1100 px comme les neuf autres feuilles. Les valeurs sont identiques ; la grille respire. ══════════════════════════════════════════════════════════════════ */ /* ── LA PAGE ──────────────────────────────────────────────────── */ .pl-page { max-width: 1280px; margin: 0 auto; padding: 34px 32px 110px; } @media (max-width: 700px) { .pl-page { padding: 22px 16px 40px; } } /* Le bandeau d'en-tête : le dégradé de la maquette, du carbone vers la nuit. C'est lui qui pose le titre au-dessus du reste. */ .pl-hero { border-bottom: 1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, #0c0c24, #07071a); } .pl-hero-inner { max-width: 1280px; margin: 0 auto; padding: 40px 32px 36px; } @media (max-width: 700px) { .pl-hero-inner { padding: 26px 16px 24px; } } .pl-titre { margin: 0; font-family: var(--font-display, 'Instrument Serif', Georgia, serif); font-weight: 400; font-size: clamp(2rem, 5vw, 46px); line-height: 1.03; letter-spacing: -.02em; max-width: 24ch; text-wrap: balance; } .pl-titre--large { max-width: 22ch; font-size: clamp(2rem, 5.2vw, 48px); } .pl-intro { margin: 18px 0 0; max-width: 64ch; font-size: 16.5px; line-height: 1.6; color: #a5a3bc; text-wrap: pretty; } /* ── LES DEUX COLONNES ────────────────────────────────────────── */ .pl-deux { display: grid; gap: 26px; align-items: start; } @media (min-width: 1100px) { .pl-deux { grid-template-columns: minmax(0, 1fr) 420px; } } /* ── LA CARTE ───────────────────────────────────────────────────── #0C0C24, filet à .09, rayon 20, fond 26. C'est LA carte : celle des trois maquettes, et il n'y en a pas d'autre. */ .pl-carte { background: #0c0c24; border: 1px solid rgba(255,255,255,.09); border-radius: 20px; padding: 26px; } .pl-carte + .pl-carte { margin-top: 20px; } @media (max-width: 700px) { .pl-carte { padding: 18px; } } /* L'en-tête d'une carte : un VRAI titre à gauche, la mention à droite. Les lots précédents faisaient du titre une étiquette mono — c'est ce qui donnait à chaque carte un air différent du fichier. */ .pl-carte-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; } .pl-h2 { margin: 0; font-size: 17px; font-weight: 600; } .pl-note { font: 400 11px var(--font-mono, 'JetBrains Mono', monospace); color: #7e7c99; } .pl-note--cyan { color: var(--fy-cyan, #5cd6e8); } .pl-note--ambre { color: var(--fy-ambre, #f0b45c); } /* L'étiquette mono en capitales. Elle EXISTE dans les maquettes, mais pour annoncer une rangée — « NATURE DU DIRECT » — pas pour remplacer le titre d'une carte. */ .pl-kicker { font: 400 10px var(--font-mono, 'JetBrains Mono', monospace); letter-spacing: .11em; color: #7e7c99; text-transform: uppercase; } .pl-mot { margin: 0; font-size: 14.5px; line-height: 1.6; color: #a5a3bc; max-width: 70ch; } .pl-petit { font-size: 12.5px; line-height: 1.55; color: #7e7c99; } /* ── LE PAVÉ DE CHIFFRES ────────────────────────────────────────── Le filet d'un pixel entre les cellules est le fond qui transparaît. Cinq cellules après le direct, quatre dans la salle : la maquette compte selon ce qu'il y a à dire, et `auto-fit` s'en charge sans qu'on écrive deux règles. */ .pl-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.09); border-radius: 18px; overflow: hidden; } .pl-stat { background: #0c0c24; padding: 20px 22px; min-width: 0; } .pl-stat-k { font: 400 10px var(--font-mono, 'JetBrains Mono', monospace); letter-spacing: .1em; color: #7e7c99; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pl-stat-v { font: 500 25px var(--font-mono, 'JetBrains Mono', monospace); font-variant-numeric: tabular-nums; margin-top: 10px; line-height: 1.1; } .pl-stat-v--cyan { color: var(--fy-cyan, #5cd6e8); } .pl-stat-n { font-size: 12px; color: #7e7c99; margin-top: 5px; } .pl-stat-n--cyan { color: var(--fy-cyan, #5cd6e8); } @media (max-width: 700px) { .pl-stat { padding: 12px 14px; } .pl-stat-v { font-size: 18px; margin-top: 6px; } } /* ── LA PASTILLE DE NATURE ──────────────────────────────────────── Rayon 100, 13,5 px, et le point est un CARRÉ ARRONDI de 9 px à rayon 3 — pas un rond. C'est un détail, et c'est celui qui distingue la planche Frenchy d'une interface générique. */ .pl-natures { display: flex; align-items: center; gap: 8px; margin-top: 26px; flex-wrap: wrap; } .pl-natures > .pl-kicker { margin-right: 6px; } .pl-nature { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; border: 1px solid rgba(255,255,255,.14); background: none; color: #a5a3bc; font-family: inherit; font-size: 13.5px; font-weight: 500; padding: 9px 16px; border-radius: 100px; white-space: nowrap; } .pl-nature-point { width: 9px; height: 9px; flex: none; border-radius: 3px; background: var(--couleur, #8b7bff); } .pl-nature.actif { border-color: var(--couleur, #8b7bff); background: color-mix(in srgb, var(--couleur, #8b7bff) 14%, transparent); color: var(--fy-encre, #f2f1f7); } /* ── LA CARTE DE CHOIX D'UNE NATURE ─────────────────────────────── TOUTES À LA MÊME HAUTEUR. La règle qui vivait ici comptait sur le texte pour les égaliser — « quatre de front, une seule ligne de règle ». Cela ne tenait pas : sous 900 px la grille passe à deux colonnes, et « Vendeur » porte une ligne rouge de plus quand la boutique n'est pas validée. Une grille donne à chaque RANGÉE la hauteur de son plus grand élément. Les quatre natures ne portent pas le même texte — « Vendeur » ajoute la ligne rouge de la boutique à vérifier — si bien que sur deux colonnes, la première rangée était haute et la seconde courte : deux rectangles et deux carrés, pour quatre choix de même rang. Des rangées automatiques en 1fr les alignent toutes sur la plus haute, et les cartes s'étirent d'elles-mêmes pour la remplir. Rien à mesurer, et cela tient quel que soit le nombre de colonnes ou la longueur des textes — y compris quand une nature en gagnera un jour. */ .pl-choix { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 11px; } @media (max-width: 900px) { .pl-choix { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .pl-choix { grid-template-columns: 1fr; } } /* LE CONTENU PART DU HAUT, dans toutes les cartes. Un bouton centre son contenu verticalement. Tant que les cartes avaient la hauteur de leur texte, cela ne se voyait pas ; une fois toutes alignées sur la plus haute, le titre de la carte la plus courte descendait au milieu pendant que celui de la plus longue restait en haut. Quatre choix de même rang dont les noms ne s'alignent pas se lisent comme quatre choses différentes. */ .pl-type { text-align: left; cursor: pointer; font-family: inherit; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.03); border-radius: 15px; padding: 17px; color: var(--fy-encre, #f2f1f7); min-height: 44px; transition: border-color .18s, background .18s; } .pl-type:hover:not(.verrouille) { border-color: var(--couleur, #8b7bff); } .pl-type.actif { border-color: var(--couleur, #8b7bff); background: color-mix(in srgb, var(--couleur, #8b7bff) 13%, transparent); } .pl-type.verrouille { opacity: .55; cursor: not-allowed; } .pl-type-tete { display: flex; align-items: center; gap: 9px; } .pl-type-point { width: 10px; height: 10px; flex: none; border-radius: 3px; background: var(--couleur, #8b7bff); } /* Instrument SANS, pas Serif : la maquette réserve le serif aux titres. */ .pl-type-nom { font-size: 14.5px; font-weight: 600; } .pl-type-regle { display: block; font-size: 12.5px; line-height: 1.5; color: #a5a3bc; margin-top: 10px; } .pl-type-motif { display: block; font-size: 12.5px; line-height: 1.5; color: var(--fy-rouge, #ff6b6b); margin-top: 6px; } /* ── LES BOUTONS ──────────────────────────────────────────────── */ .pl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; border: 1px solid rgba(255,255,255,.14); background: none; color: #d6d4e4; font-family: inherit; font-size: 13.5px; font-weight: 500; padding: 11px 16px; border-radius: 11px; white-space: nowrap; cursor: pointer; text-decoration: none; } .pl-btn:hover { background: rgba(255,255,255,.06); } .pl-btn--plein { border: 0; background: #8b7bff; color: #07071a; font-weight: 600; padding: 12px 20px; } .pl-btn--plein:hover { background: #a395ff; } .pl-btn--rouge { border: 0; background: var(--fy-rouge, #ff6b6b); color: #07071a; font-weight: 600; padding: 12px 20px; } .pl-btn--large { width: 100%; padding: 17px; border-radius: 13px; font-size: 16.5px; font-weight: 600; } /* ── L'IDENTITÉ D'UNE BOUTIQUE ────────────────────────────────── */ .pl-ident { display: flex; align-items: center; gap: 14px; margin-top: 22px; flex-wrap: wrap; } .pl-ident-rond { width: 40px; height: 40px; flex: none; border-radius: 12px; background: #14142e; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; color: var(--fy-violet, #8b7bff); } .pl-ident-nom { font-size: 15.5px; font-weight: 600; } .pl-ident-meta { font: 400 11.5px var(--font-mono, 'JetBrains Mono', monospace); color: #7e7c99; margin-top: 3px; }