/* La liste des salles — l'écran de choix. * * 🔑 C'est la fusion de deux écrans qui existaient séparément : le ready check * (« Match found — play with X ? ») et les salons publics (« Who's looking * right now »). Il n'y en a plus qu'un : on liste des salles, et on en rejoint * une. Il n'y a donc plus de modale, plus de compte à rebours, plus rien à * accepter. * * 🔑 TOUT EST SCOPÉ SOUS UN IDENTIFIANT (#salons, #salons-vide, #planifie), et c'est * délibéré : la spécificité d'un identifiant rend ces règles insensibles à * l'ordre des feuilles de style. D'autres fichiers du projet sont retouchés en * parallèle ; aucune règle d'ici ne doit dépendre de qui est chargé en dernier, * ni aller marcher sur les leurs. * * 🚨 ON N'AFFICHE NULLE PART UNE ESTIMATION DE TEMPS D'ATTENTE. Le « try again * in ~23 min » du projet précédent faisait fuir les joueurs alors que la * médiane réelle était de 4 minutes. On montre « depuis quand la salle est * ouverte » — un fait — jamais « combien de temps encore », qui n'existe pas. * * 🚨 ET AUCUNE NOTION DE CLASSEMENT. Ni ELO, ni rang, ni niveau, même caché. * Les étiquettes sont des tags d'INTENTION. * * ⚠️ POURQUOI `#room-controles` APPARAÎT DANS CE FICHIER. L'en-tête de la room * reprend DEUX objets visuels d'ici : le remplissage « ●●○○ 2/4 » et la ligne * d'état de départ. On a donc ÉTENDU les groupes de sélecteurs concernés * plutôt que de recopier leur géométrie dans match.css : le même fait doit se * lire exactement pareil aux deux endroits, et deux tables séparées finissent * toujours par diverger. Le reste de cette feuille ne déborde toujours pas des * deux listes. * 🔑 Ce sont bien deux ÉTATS, et rien d'autre. Les boutons de décision de la * salle (« We're starting », « We played », « It didn't work », « Leave ») ne * sont ni dans cette liste ni dans l'en-tête : ils vivent tous les quatre dans * la carte du bas de la room. Aucune règle d'ici ne les concerne. */ #planifiees, #planifie, #salons, #chercheurs, #propositions-liste, #voisins-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; } #planifiees .salle, #planifie .salle, #salons .salle, #chercheurs .salle, #propositions-liste .salle , #voisins-liste .salle { display: grid; gap: .55rem; padding: .85rem .95rem; border: 1px solid var(--bord); border-radius: 12px; background: var(--carte); box-shadow: var(--ombre-bloc); } /* Ma salle se repère au premier coup d'œil : c'est la seule où j'ai des * décisions à prendre. */ #planifiees .salle--mienne, #planifie .salle--mienne, #salons .salle--mienne, #chercheurs .salle--mienne, #propositions-liste .salle--mienne , #voisins-liste .salle--mienne { border-color: rgba(255, 210, 63, .55); background: var(--carte-fort); } /* Une salle pleine reste VISIBLE — elle ne disparaît pas. Elle est simplement * atténuée : « il se passe quelque chose là, mais pas pour toi ». La faire * disparaître était exactement le défaut qu'on corrige. */ #planifiees .salle--pleine, #planifie .salle--pleine, #salons .salle--pleine, #chercheurs .salle--pleine, #propositions-liste .salle--pleine , #voisins-liste .salle--pleine { opacity: .74; } #planifiees .salle--pleine:hover, #planifie .salle--pleine:hover, #salons .salle--pleine:hover, #chercheurs .salle--pleine:hover, #propositions-liste .salle--pleine:hover , #voisins-liste .salle--pleine:hover { opacity: 1; } /* ------------------------------------------------------------ l'en-tête */ #planifiees .salle-tete, #planifie .salle-tete, #salons .salle-tete, #chercheurs .salle-tete, #propositions-liste .salle-tete , #voisins-liste .salle-tete { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; } #planifiees .salle-logo, #planifie .salle-logo, #salons .salle-logo, #chercheurs .salle-logo, #propositions-liste .salle-logo , #voisins-liste .salle-logo { width: 44px; height: 44px; flex: 0 0 auto; object-fit: contain; border-radius: 8px; } #planifiees .salle-logo--vide, #planifie .salle-logo--vide, #salons .salle-logo--vide, #chercheurs .salle-logo--vide, #propositions-liste .salle-logo--vide , #voisins-liste .salle-logo--vide { background: rgba(168, 198, 224, .12); border: 1px solid var(--bord); } #planifiees .salle-quoi, #planifie .salle-quoi, #salons .salle-quoi, #chercheurs .salle-quoi, #propositions-liste .salle-quoi , #voisins-liste .salle-quoi { flex: 1 1 12rem; min-width: 0; } #planifiees .salle-titre, #planifie .salle-titre, #salons .salle-titre, #chercheurs .salle-titre, #propositions-liste .salle-titre , #voisins-liste .salle-titre { font-weight: 700; color: var(--texte); text-shadow: var(--ombre-texte); line-height: 1.2; } #planifiees .salle-meta, #planifie .salle-meta, #salons .salle-meta, #chercheurs .salle-meta, #propositions-liste .salle-meta , #voisins-liste .salle-meta { font-size: .86rem; color: var(--texte-doux); line-height: 1.35; } /* 🚨 La plateforme n'est pas décorative : c'est une CONTRAINTE de jouabilité. * Un joueur Switch dans une salle PC, c'est une partie qui n'aura pas lieu. */ #planifiees .salle-plateforme, #planifie .salle-plateforme, #salons .salle-plateforme, #chercheurs .salle-plateforme, #propositions-liste .salle-plateforme , #voisins-liste .salle-plateforme, #mes-recherches .salle-plateforme { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; color: var(--texte-doux); padding: .2rem .5rem; border: 1px solid var(--bord); border-radius: 999px; white-space: nowrap; } /* 🚨 `#mes-recherches` AJOUTÉ AUX DEUX RÈGLES, ET CE N'EST PAS UN DÉTAIL * D'HABILLAGE : les glyphes n'ont qu'un `viewBox`, aucune dimension propre. * Hors de ces sélecteurs, un SVG sans largeur ni hauteur se dessine à sa * taille par défaut de 300 × 150 px — la ligne de recherche aurait explosé. */ #planifiees .salle-plateforme svg, #planifie .salle-plateforme svg, #salons .salle-plateforme svg, #chercheurs .salle-plateforme svg, #propositions-liste .salle-plateforme svg , #voisins-liste .salle-plateforme svg, #mes-recherches .salle-plateforme svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* --------------------------------------------------------- le remplissage */ /* « ●●○○ 2/4 » : le dessin se lit d'un balayage, le chiffre lève le doute. * 🔑 C'est un PLAFOND, pas un quorum — rien n'attend que ce soit plein. */ #room-controles .remplissage, #planifiees .remplissage, #planifie .remplissage, #salons .remplissage, #chercheurs .remplissage, #propositions-liste .remplissage , #voisins-liste .remplissage { display: inline-flex; align-items: center; gap: .25rem; flex: 0 0 auto; } #room-controles .remplissage i, #planifiees .remplissage i, #planifie .remplissage i, #salons .remplissage i, #chercheurs .remplissage i, #propositions-liste .remplissage i , #voisins-liste .remplissage i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } #room-controles .remplissage i.pris, #planifiees .remplissage i.pris, #planifie .remplissage i.pris, #salons .remplissage i.pris, #chercheurs .remplissage i.pris, #propositions-liste .remplissage i.pris , #voisins-liste .remplissage i.pris { background: var(--jaune); } #room-controles .remplissage i.libre, #planifiees .remplissage i.libre, #planifie .remplissage i.libre, #salons .remplissage i.libre, #chercheurs .remplissage i.libre, #propositions-liste .remplissage i.libre , #voisins-liste .remplissage i.libre { background: transparent; box-shadow: inset 0 0 0 1.5px var(--bord); } #room-controles .remplissage b, #planifiees .remplissage b, #planifie .remplissage b, #salons .remplissage b, #chercheurs .remplissage b, #propositions-liste .remplissage b , #voisins-liste .remplissage b { margin-left: .3rem; font-size: .82rem; font-weight: 700; color: var(--texte-doux); } /* -------------------------------------------------------- qui est dedans */ #planifiees .salle-monde, #planifie .salle-monde, #salons .salle-monde, #chercheurs .salle-monde, #propositions-liste .salle-monde , #voisins-liste .salle-monde { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; } #planifiees .salle-joueur, #planifie .salle-joueur, #salons .salle-joueur, #chercheurs .salle-joueur, #propositions-liste .salle-joueur , #voisins-liste .salle-joueur { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; color: var(--texte); max-width: 100%; } #planifiees .salle-joueur > span, #planifie .salle-joueur > span, #salons .salle-joueur > span, #chercheurs .salle-joueur > span, #propositions-liste .salle-joueur > span , #voisins-liste .salle-joueur > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 🔑 Qui est là, et qui y est VRAIMENT. Dans une salle où l'on attend que * quelqu'un héberge, « est-ce que l'autre est encore devant son écran ? » est * la question la plus utile de toutes. */ #planifiees .salle-joueur--absent, #planifie .salle-joueur--absent, #salons .salle-joueur--absent, #chercheurs .salle-joueur--absent, #propositions-liste .salle-joueur--absent , #voisins-liste .salle-joueur--absent { opacity: .5; } #planifiees .salle-note, #planifie .salle-note, #salons .salle-note, #chercheurs .salle-note, #propositions-liste .salle-note , #voisins-liste .salle-note { font-size: .85rem; color: var(--texte-doux); font-style: italic; } /* ------------------------------- « est-ce que la partie a démarré ? » --- */ /* 🚨 LE SITE NE PEUT PAS OBSERVER LE JEU, DONC IL N'AFFIRME RIEN. Il rapporte * ce qu'il mesure, et il dit qui l'affirme. Trois sources, trois couleurs : * déclaré — un humain l'a dit, la phrase le nomme * observé — le sonar a vu l'annonce dans l'annuaire WormNET : une preuve * silence — plus rien ne bouge : l'inférence la plus faible des trois * 🔑 Et une salle commencée NE DISPARAÎT PAS, elle le dit : Worms se joue en * manches, et demander à rejoindre la suivante est parfaitement légitime. */ #room-controles .depart, #planifiees .depart, #planifie .depart, #salons .depart, #chercheurs .depart, #propositions-liste .depart , #voisins-liste .depart { font-size: .82rem; padding: .3rem .55rem; border-radius: 8px; border-left: 3px solid var(--bord); background: rgba(168, 198, 224, .07); color: var(--texte-doux); } #room-controles .depart--declare, #planifiees .depart--declare, #planifie .depart--declare, #salons .depart--declare, #chercheurs .depart--declare, #propositions-liste .depart--declare , #voisins-liste .depart--declare { border-left-color: var(--jaune); color: var(--jaune); } #room-controles .depart--observe, #planifiees .depart--observe, #planifie .depart--observe, #salons .depart--observe, #chercheurs .depart--observe, #propositions-liste .depart--observe , #voisins-liste .depart--observe { border-left-color: var(--vert); color: var(--vert); } #room-controles .depart--encours, #planifiees .depart--encours, #planifie .depart--encours, #salons .depart--encours, #chercheurs .depart--encours, #propositions-liste .depart--encours , #voisins-liste .depart--encours { border-left-color: var(--rouge); color: #ff9f92; } #room-controles .depart--silence, #planifiees .depart--silence, #planifie .depart--silence, #salons .depart--silence, #chercheurs .depart--silence, #propositions-liste .depart--silence , #voisins-liste .depart--silence { border-left-color: rgba(168, 198, 224, .35); opacity: .8; } /* -------------------------------------------------------------- le pied */ #planifiees .salle-pied, #planifie .salle-pied, #salons .salle-pied, #chercheurs .salle-pied, #propositions-liste .salle-pied , #voisins-liste .salle-pied { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; } #planifiees .salle-age, #planifie .salle-age, #salons .salle-age, #chercheurs .salle-age, #propositions-liste .salle-age , #voisins-liste .salle-age { font-size: .78rem; color: var(--texte-doux); opacity: .85; } #planifiees .salle-actions, #planifie .salle-actions, #salons .salle-actions, #chercheurs .salle-actions, #propositions-liste .salle-actions , #voisins-liste .salle-actions { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; } #planifiees .salle-actions .bouton, #planifie .salle-actions .bouton, #salons .salle-actions .bouton, #chercheurs .salle-actions .bouton, #propositions-liste .salle-actions .bouton , #voisins-liste .salle-actions .bouton { padding: .4rem .85rem; font-size: .85rem; } /* 🔑 Un refus qu'on ne comprend pas se lit comme une panne. On dit toujours ce * qui bloque — plateforme, ligue TUS, format, salle pleine. */ #planifiees .salle-refus, #planifie .salle-refus, #salons .salle-refus, #chercheurs .salle-refus, #propositions-liste .salle-refus , #voisins-liste .salle-refus { font-size: .8rem; color: var(--texte-doux); opacity: .85; text-align: right; max-width: 22rem; } /* ------------------------------------------------------ la liste vide */ /* Pas de fausse promesse : on dit ce qui est vrai — il n'y a pas de salle — et * on propose l'action utile, qui est d'en ouvrir une soi-même. */ #salons-vide p, #chercheurs-vide p { margin: .3rem 0 0; color: var(--texte-doux); font-size: .9rem; } @media (max-width: 560px) { #planifiees .salle-pied, #planifie .salle-pied, #salons .salle-pied { align-items: flex-start; } #planifiees .salle-refus, #planifie .salle-refus, #salons .salle-refus { text-align: left; } #planifiees .salle-logo, #planifie .salle-logo, #salons .salle-logo { width: 36px; height: 36px; } } /* ------------------------------------------------------- les chercheurs */ /* 🔑 UN CHERCHEUR N'EST PAS UNE SALLE, et sa carte doit le dire au premier * coup d'œil. Pas de remplissage : il n'y a rien à remplir tant que personne * n'a accepté. La bordure en pointillés dit « ce n'est pas encore une pièce ». * Appeler « room » quelqu'un qui cherche seul est exactement le glissement de * vocabulaire qui avait produit des salles fantômes d'une personne. */ #planifiees .chercheur, #planifie .chercheur, #salons .chercheur, #chercheurs .chercheur, #propositions-liste .chercheur , #voisins-liste .chercheur { border-style: dashed; background: transparent; box-shadow: none; } #planifiees .chercheur .salle-titre, #planifie .chercheur .salle-titre, #chercheurs .salle-titre, #propositions-liste .chercheur .salle-titre , #voisins-liste .chercheur .salle-titre { display: flex; align-items: center; gap: .4rem; } /* Les critères qui ne tiennent pas dans le titre : la ligue TUS, les tags. * ⚠️ Marge SUPÉRIEURE seulement — la ligne est un flex à `align-items: * center`, et une rangée qui pousse en bas décentrerait le logo et le bouton * Stop par rapport au texte. */ #mes-recherches .etiquettes--recherche { margin-top: .4rem; } /* La note, quand on en a laissé une : même retrait que la méta. */ #mes-recherches .ligne-note { margin-top: .35rem; } /* Une recherche suspendue : elle est là, elle attend, elle ne cherche pas. */ #mes-recherches .ligne--veille { opacity: .62; } #mes-recherches .etiquette--veille { background: rgba(168, 198, 224, .16); color: var(--texte-doux); } /* ------------------------------------------------- la popup de propositions */ /* 🚨 « ON PROPOSE, ON N'IMPOSE JAMAIS. » Ce n'est pas le retour du ready check : * il n'y a ni compte à rebours, ni adversaire unique, ni sanction. On liste ce * qui a été trouvé, on en accepte un, ou on écarte — et écarter ne coûte * jamais sa place dans la file. * ⚠️ Volontairement sobre : une refonte complète de l'interface la réhabillera. * Ce qui doit durer, c'est le modèle derrière. */ #propositions-liste { max-height: 52vh; overflow-y: auto; margin: .6rem 0 1rem; text-align: left; } #propositions-liste .proposition-non { display: flex; justify-content: flex-end; margin: -.35rem 0 .2rem; } #propositions-liste .proposition-non .bouton { padding: .3rem .7rem; font-size: .8rem; } /* La modale est plus large que celle du ready check : elle porte des cartes, * pas une phrase. * 🚨 ET ELLE NE S'OUVRE PLUS QUE S'IL Y A PLUSIEURS PROPOSITIONS (décision B). * Sur un match direct unique, le moteur auto-joint et cette modale ne * s'affiche pas du tout : elle ne sert qu'au CHOIX. */ #propositions .modale { max-width: 34rem; width: 100%; } /* ========================================================================== LE PLUS ANCIEN QUI ATTEND — l'élément héros (§1.15, décision 15) ========================================================================== 🔑 « Kelvin attend un Shopper 1v1 depuis 41 min » est l'argument le plus fort qui existe pour cliquer. Il est donc traité comme un argument : plus grand que les cartes de la liste, avec un seul bouton, et rien autour. 🚨 L'ANCIENNETÉ ET LA PRÉSENCE VONT ENSEMBLE, JAMAIS L'UNE SANS L'AUTRE. `.heros--absent` existe pour ça : quand l'onglet de la personne est fermé, la carte perd sa couleur et son liseré. « Depuis 3 h » tout seul serait une publicité pour le vide du site ; « depuis 3 h — away », affaibli, est honnête. C'est du CSS qui porte une décision produit, pas de la décoration. */ #heros .heros { border: 1px solid rgba(255, 210, 63, .55); border-left: 4px solid var(--jaune); border-radius: 12px; background: var(--carte-fort); box-shadow: var(--ombre-bloc); padding: 1rem 1.1rem; display: grid; gap: .45rem; } /* Onglet fermé : la carte se retire d'elle-même. Elle reste lisible — la personne existe et peut être prévenue — mais elle cesse de crier. */ #heros .heros--absent { border-color: var(--bord); border-left-color: rgba(168, 198, 224, .35); background: var(--carte); opacity: .82; } #heros .heros-qui { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } #heros .heros-pseudo { font-size: 1.15rem; font-weight: 700; } /* 🚨 « here » / « away », jamais « online » : le battement mesure un onglet ouvert, pas une personne. Le vert n'est donc PAS un voyant de présence humaine, et il est volontairement discret. */ #heros .heros-etat { font-size: .7rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; padding: .12rem .45rem; border-radius: 999px; color: var(--texte-doux); background: rgba(168, 198, 224, .14); } #heros .heros-etat--ici { color: var(--vert); background: rgba(126, 200, 80, .16); } #heros .heros-quoi { font-size: 1rem; color: var(--texte); } #heros .heros-quoi strong { color: var(--jaune); } #heros .heros-note { font-size: .9rem; color: var(--texte-doux); font-style: italic; border-left: 2px solid var(--bord); padding-left: .55rem; } #heros .heros-parti { margin: 0; } #heros .heros-action { margin-top: .3rem; } /* ========================================================================== L'OFFRE WORMNET, DANS LA FILE (§1.1, décision 1) ========================================================================== 🔑 Une LIGNE, pas une carte — c'est la forme du snooper, et celle de l'onglet Radar. Une partie WormNET n'a ni occupants à montrer ni remplissage : lui donner la carte d'une salle ferait croire qu'on en sait autant, ce qui est faux (l'annuaire ne transporte ni le nombre de joueurs ni le format). ⚠️ Les règles de l'onglet Radar sont scopées sous `#vue-wormnet` : elles ne descendent pas ici, d'où ce bloc plutôt qu'une classe partagée. */ #wormnet-file { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .3rem; } #wormnet-file .wnf-partie { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .45rem .7rem; border: 1px solid var(--bord); border-left: 3px solid var(--jaune); border-radius: 8px; background: var(--carte); } #wormnet-file .wnf-nom { flex: 1 1 12rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; } #wormnet-file .wnf-hote, #wormnet-file .wnf-age { font-size: .82rem; color: var(--texte-doux); white-space: nowrap; } #wormnet-file .etiquettes { display: flex; gap: .25rem; flex-wrap: wrap; } #wormnet-file .bouton { padding: .35rem .8rem; font-size: .85rem; } #wormnet-file .salle-refus { font-size: .82rem; color: var(--texte-doux); } /* ⚠️ `.etiquette--devine` A DÉMÉNAGÉ DANS style.css, ET C'EST VOLONTAIRE. Elle vivait ici, sous `#wormnet-file`, donc elle n'habillait QUE la liste de l'écran de recherche : l'onglet Radar montre les mêmes annonces et peignait une devinette exactement comme une certitude. La règle est désormais globale, au-dessus de `.etiquette--mode`. Ne pas la redéclarer ici. */ /* 🔑 52,5 % DES PARTIES MESURÉES SONT HÉBERGÉES PAR UN BOT, et les rejoindre ne demande à personne de savoir héberger : c'est le chemin le moins coûteux qui existe pour un joueur. L'étiquette le dit, et le serveur les trie en tête. */ #wormnet-file .etiquette--bot { background: rgba(126, 200, 80, .18); color: var(--vert); } /* Le mot posé à côté du bouton quand la partie a disparu — une annonce vit 135 s en médiane, donc disparaître est le cas NORMAL, pas une panne. ⚠️ Posé par public/radar.js (`signalerRejointe`), qui sert les deux écrans. */ #wormnet-file .wn-rejointe-note { flex: 1 1 100%; margin: .2rem 0 0; } /* ========================================================================== LA PROPOSITION VOISINE (§1.9, décision 9) ========================================================================== 🔑 ON ÉLARGIT EN AJOUTANT, JAMAIS EN SUBSTITUANT — et l'écart se VOIT. La ligne d'écart est posée AU-DESSUS de la carte, pas dedans : c'est la première chose qu'on lit, avant même de savoir de quelle salle on parle. Rangée sous la carte, elle se serait lue comme une note de bas de page sur une proposition qu'on aurait déjà prise pour la sienne. ⚠️ L'enveloppe `.voisin` ne porte PAS la classe `.salle` : la carte qu'elle contient en porte une, et les deux auraient reçu le même cadre et la même ombre — un encadré dans un encadré. */ #voisins-liste .voisin { display: grid; gap: .4rem; } #voisins-liste .voisin-carte { list-style: none; margin: 0; padding: 0; } #voisins-liste .ecart { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; font-size: .82rem; padding: .3rem .6rem; border-left: 3px solid var(--jaune); background: rgba(255, 210, 63, .08); border-radius: 0 8px 8px 0; } #voisins-liste .ecart-quoi { text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--jaune); } /* Ce que je cherche, barré ; ce qu'il y a à côté, en clair. Le trait ne dit pas « c'est annulé » — la recherche d'origine reste ouverte, c'est la règle — il dit « voilà ce qui change si vous prenez celle-là ». */ #voisins-liste .ecart-mien { color: var(--texte-doux); text-decoration: line-through; } #voisins-liste .ecart-fleche { color: var(--texte-doux); } #voisins-liste .ecart-sien { color: var(--texte); font-weight: 700; } /* Le repli de format n'a pas de carte : personne de nouveau n'arrive, c'est MA salle qui change de format. Il porte donc son propre encadré. */ #voisins-liste .voisin--repli { border: 1px solid var(--bord); border-radius: 12px; background: var(--carte); box-shadow: var(--ombre-bloc); padding: .85rem .95rem; } #voisins-liste .voisin--repli .voisin-tete { font-weight: 700; } #voisins-liste .voisin--repli .ecart { border-radius: 8px; } /* ==================================================== LES PARTIES PLANIFIÉES * * 🔑 UNE SECTION À PART, PARCE QU'UN CRÉNEAU N'EST PAS « RIGHT NOW ». Trois des * quatre sections de l'écran disent « maintenant » ; une partie du 1er * septembre y était fausse deux fois — on ne peut pas y jouer maintenant, et * la personne ne cherche pas maintenant. * * 🚨 ET ELLE NE FUSIONNE PAS LES DEUX GENRES. Les cartes gardent EXACTEMENT * leur apparence des deux listes du dessus : c'est pour ça que `#planifie` a * été ajouté aux groupes de sélecteurs ci-dessus plutôt que redécoré ici. Une * salle reste une salle (fond plein, remplissage), un chercheur reste une * personne seule (bordure en pointillés, pas de remplissage). Les confondre * est ce qui avait produit les salles fantômes d'une personne. * * ⚠️ SCOPÉ SOUS `#planifie` / `#bloc-planifie` comme tout le reste du fichier : * `decor.css` est chargé AVANT celui-ci mais une règle de même spécificité y * gagnerait en silence si on se contentait d'une classe. */ /* La phrase qui porte le fuseau et la réserve sur « interested ». Elle n'est pas décorative : c'est le seul endroit qui dise que les heures affichées sont celles du LECTEUR, et que l'intérêt est un signal, pas une promesse. */ #bloc-planifie #planifie-quoi { margin: -.35rem 0 .8rem; max-width: 46rem; } /* 🔑 LE LISERÉ DIT « CE N'EST PAS POUR TOUT DE SUITE », sur les deux genres de carte. La même couleur que `.ligne--partie` et que le Standby : dans ce projet, le jaune est ce qui attend une heure. */ #planifiees .salle--creneau { border-left: 3px solid var(--jaune); } #planifie .salle--creneau { border-left: 3px solid var(--jaune); } /* ------------------------------------------------ le compteur et le bouton */ /* La rangée « 2 going · 5 interested » + « Interested ». Elle vit AU-DESSUS du pied, pas dedans : le pied porte déjà la date et le bouton d'engagement, et les quatre choses sur une seule ligne débordaient à 390 px. */ #planifiees .creneau, #planifie .creneau, #salons .creneau, #chercheurs .creneau, #propositions-liste .creneau, #voisins-liste .creneau { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; padding-top: .15rem; } /* 🚨 DEUX NOMBRES QUI NE SE MÉLANGENT PAS, ET QUI NE SE VALENT PAS. « going » compte les engagés, « interested » les abonnés au rappel. Les additionner — ou les afficher du même poids — referait la promesse qu'on refuse : « 5 interested » ne veut pas dire que cinq personnes viendront. */ #planifiees .creneau-compte, #planifie .creneau-compte, #salons .creneau-compte, #chercheurs .creneau-compte, #propositions-liste .creneau-compte, #voisins-liste .creneau-compte, /* ⚠️ Et sur MA propre ligne : celui qui a reserve voit sa traction sans rien faire de special, dans le meme vocabulaire que tout le monde. */ #mes-recherches .creneau-compte { font-size: .8rem; color: var(--texte-doux); cursor: help; } /* Le bouton doux. ⚠️ Il ne doit PAS ressembler au bouton d'engagement d'à côté : un bouton doux qui a l'air fort cannibalise le fort, les gens cliquent sur le premier et plus personne ne confirme. D'où le contour seul, et le jaune seulement une fois posé. */ #planifiees .bouton--interet, #planifie .bouton--interet, #salons .bouton--interet, #chercheurs .bouton--interet { padding: .3rem .7rem; font-size: .8rem; white-space: nowrap; } #planifiees .bouton--interet-pose, #planifie .bouton--interet-pose, #salons .bouton--interet-pose, #chercheurs .bouton--interet-pose { border-color: var(--jaune); color: var(--jaune); background: rgba(255, 210, 63, .12); } /* Le refus, quand la route ne répond pas. Il appartient à la carte qu'on vient d'essayer — jamais à une alerte qui recouvrirait l'écran. */ #planifiees .creneau .salle-refus, #planifie .creneau .salle-refus, #salons .creneau .salle-refus, #chercheurs .creneau .salle-refus { flex-basis: 100%; text-align: left; } /* ------------------------------------------------------------ le décompte */ /* 🔑 « in 2 days » → « in 3 h » → « in 5 min » → « Starting now ». C'est le seul chiffre de temps que le site affiche vers l'AVENIR, et il est légitime : ce n'est pas une estimation d'attente, c'est une soustraction entre maintenant et une date que le joueur a lui-même choisie. ⚠️ Aucune transition ni animation dessus : le texte change tout seul chaque minute, et un onglet caché fige les animations — on ne construit rien sur elles pour une information qui doit être juste au retour. */ #planifiees .decompte, #planifie .decompte, #salons .decompte, #chercheurs .decompte, #propositions-liste .decompte, #voisins-liste .decompte, #mes-recherches .decompte { color: var(--jaune); font-weight: 700; /* 📏 Mesuré à 390 px : sans ça, « in 3 h » se coupait entre « in » et « 3 h », le chiffre passant seul à la ligne suivante. Le décompte est une unité de sens, il se replie AVANT, jamais au milieu. */ white-space: nowrap; } /* ------------------------------------------------------------- à 390 px */ /* 🚨 AUCUN DÉBORDEMENT HORIZONTAL. La ligne « 2 going · 5 interested » et son bouton passent l'une sous l'autre plutôt que de pousser la carte au-delà de l'écran, et la date planifiée — la plus longue chaîne du pied — a le droit de se replier. */ @media (max-width: 560px) { #planifiees .creneau, #planifie .creneau, #salons .creneau, #chercheurs .creneau { align-items: flex-start; } #planifiees .salle-age, #planifie .salle-age, #salons .salle-age, #chercheurs .salle-age { white-space: normal; } } /* ------------------------------------------- les rubriques de l'onglet 🚨 « LESQUELLES SONT À MOI » — la question posée à l'écran. Les lignes de l'onglet étaient typographiquement identiques : une soirée que j'organise et une à laquelle je me joins se lisaient pareil. 🔑 Un intertitre, pas une couleur ni une icône : c'est une différence de NATURE, pas de degré, et elle se nomme. La ligne d'aide sous le premier répond en plus à « où est le bouton pour entrer » — il n'y a pas encore de salle. ⚠️ `list-style: none` est déjà posé par le conteneur ; ce `li` n'est pas un élément de la liste mais son sommaire, d'où le retrait volontairement nul. */ #planifiees .creneaux-groupe { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin: .9rem 0 -.1rem; } #planifiees .creneaux-groupe:first-child { margin-top: 0; } #planifiees .creneaux-groupe > span { color: var(--wa-label); font-weight: 700; font-size: .9rem; } #planifiees .creneaux-groupe > em { font-style: normal; color: var(--texte-doux); font-size: .82rem; } /* Le marqueur d'organisateur, sur une soirée planifiée uniquement. ⚠️ UN MOT DISCRET, PAS UNE DÉCORATION. Il dit qui a proposé le rendez-vous ; il ne confère rien — le projet n'a ni rang, ni autorité, ni privilège dans une salle. Une couronne ou une pastille colorée auraient suggéré le contraire. */ #planifiees .salle-hote, #planifie .salle-hote, #salons .salle-hote, #chercheurs .salle-hote { font-style: normal; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--wa-label); margin-left: .35rem; opacity: .85; }