/** * AsK Trainer — calculateur d'équité, styles front * v1.5.0 * * Mobile d'abord. Les seules couleurs de marque sont celles de la maison * (encre #111111, rouge club #c0392b) ; tout le reste en dérive. * * Aucune notice, aucune infobulle, aucun texte d'aide : quand un * comportement n'est pas clair, c'est l'état visuel qui doit le dire. D'où * les trois états explicites d'une carte dans le sélecteur — disponible, * choisie, indisponible — et le résultat qui se ternit dès qu'il ne * correspond plus à la saisie en cours. */ /* JETONS PARTAGÉS. La modale est portée sous , donc HORS de .ask-eq : toute variable déclarée sur .ask-eq seule y est irrésolue, et la déclaration qui l'emploie devient invalide en silence. C'est ce qui rendait le coeur et le carreau NOIRS dans le sélecteur alors qu'ils étaient bien rouges sur les cartes posées. Ce qui doit vivre des deux côtés est donc déclaré sur les deux sélecteurs. Jeu QUATRE COULEURS, dans le code standard : pique noir, coeur rouge, carreau bleu, trèfle vert. Ce n'est pas un choix esthétique — pique contre trèfle et coeur contre carreau sont exactement les deux confusions que fait un débutant, et c'est lui la cible de l'outil. Le code est celui des salles en ligne, à la lettre : quelqu'un qui l'a déjà vu ne doit rien réapprendre. Le rouge du coeur est celui du club, ce qui évite une couleur de plus. */ .ask-eq, .ask-eq-modal { --atr-red: #c0392b; --atr-suit-0: #111111; --atr-suit-1: #c0392b; --atr-suit-2: #1b5aa8; --atr-suit-3: #12924f; } .ask-eq { --atr-ink: #111111; --atr-red: #c0392b; --atr-paper: #ffffff; --atr-muted: #6f6f6f; --atr-line: rgba(17, 17, 17, 0.16); --atr-slot: rgba(17, 17, 17, 0.05); --atr-zone: rgba(17, 17, 17, 0.045); /* Vert tapis. Assez sombre pour que des cartes blanches y ressortent franchement, assez désaturé pour ne pas entrer en concurrence avec le rouge du club, qui reste la seule couleur d'accent. */ --atr-felt: #17654a; --atr-felt-hi: #23805a; --atr-felt-lo: #11503b; --atr-felt-line: rgba(255, 255, 255, 0.28); /* Les trois familles de la grille. Déclarées ici pour que la légende et les cases ne puissent pas diverger : une légende qui ment est pire que pas de légende. */ --atr-family-pair: rgba(17, 17, 17, 0.20); --atr-family-suited: rgba(23, 101, 74, 0.24); --atr-family-offsuit: rgba(17, 17, 17, 0.04); --atr-radius: 10px; max-width: 900px; margin: 0 auto; color: var(--atr-ink); font-size: 16px; line-height: 1.4; } .ask-eq *, .ask-eq *::before, .ask-eq *::after { box-sizing: border-box; } .ask-eq__locked-text { margin: 0; padding: 18px; text-align: center; color: var(--atr-muted); } /* ── Effectif ────────────────────────────────────────────────────────── */ .ask-eq__seats { margin-bottom: 18px; } .ask-eq__seats-label { display: block; margin-bottom: 8px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--atr-muted); } /* Grille à colonnes égales (le nombre est posé par le JS d'après MIN/MAX) : les choix tiennent sur une ligne quelle que soit la largeur, plutôt que de déborder et de laisser le dernier orphelin sur une seconde ligne. */ .ask-eq__seats-choice { display: grid; gap: 6px; } .ask-eq__seat { min-width: 0; min-height: 40px; padding: 0 2px; border: 1px solid var(--atr-line); border-radius: var(--atr-radius); background: var(--atr-paper); color: var(--atr-ink); font: inherit; font-weight: 600; cursor: pointer; } .ask-eq__seat[aria-pressed='true'] { background: var(--atr-ink); border-color: var(--atr-ink); color: var(--atr-paper); } /* ── Sections ────────────────────────────────────────────────────────── */ .ask-eq__section { margin-bottom: 18px; } .ask-eq__section-title { margin: 0 0 8px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--atr-muted); } /* ── Zones ─────────────────────────────────────────────────────────────── Le board sur fond de tapis, les joueurs sur fond neutre : les deux blocs se distinguent au premier regard, sans qu'aucun libellé n'ait à le dire. Le vert ne décore pas — il désigne les cartes communes, celles qui appartiennent à tout le monde. ------------------------------------------------------------------- */ .ask-eq__section--board { padding: 12px 12px 14px; border-radius: 14px; background: radial-gradient(120% 150% at 50% 0%, var(--atr-felt-hi) 0%, var(--atr-felt) 55%, var(--atr-felt-lo) 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10), inset 0 8px 22px rgba(0, 0, 0, 0.22); } .ask-eq__section--board .ask-eq__section-title { color: rgba(255, 255, 255, 0.74); } .ask-eq__section--board .ask-eq__slot { background: rgba(255, 255, 255, 0.08); border-color: var(--atr-felt-line); } .ask-eq__section--board .ask-eq__slot.is-empty::after { color: rgba(255, 255, 255, 0.62); } .ask-eq__section--board .ask-eq__slot.is-filled { background: var(--atr-paper); border-color: rgba(0, 0, 0, 0.28); } .ask-eq__section--board .ask-eq__slot:hover { border-color: #ffffff; } .ask-eq__section--players, .ask-eq__section--grid { padding: 12px; border-radius: 14px; background: var(--atr-zone); } /* La grille reste plafonnée et centrée DANS sa zone : c'est la zone qui s'aligne sur celles du dessus, pas la grille elle-même. L'élargir aux 900 px du conteneur la rendrait aussi haute que large — ses cases sont carrées — et il faudrait de nouveau défiler pour la voir entière. */ /* JAMAIS D'ENROULEMENT. Le board est une séquence — flop, turn, river — et sa lecture tient à son alignement : replié sur deux lignes, il laisse un séparateur orphelin en fin de première ligne et le joueur ne sait plus quelle carte est la river. Les emplacements étaient à largeur fixe, donc ils débordaient dès que le conteneur était étroit (colonne Divi, fenêtre réduite) — et un conteneur étroit ne se détecte PAS par une media query, qui interroge la fenêtre, pas le parent. La seule réponse robuste est donc des cartes qui se partagent la largeur disponible. */ .ask-eq__board-slots { display: flex; align-items: stretch; gap: 6px; flex-wrap: nowrap; } .ask-eq__section--board .ask-eq__slot { flex: 1 1 0; width: auto; height: auto; min-width: 0; max-width: 64px; /* Proportion de la carte conservée (46 x 64 d'origine). Le min-height couvre les navigateurs sans aspect-ratio : sans lui, la carte s'écraserait au lieu de simplement perdre sa proportion. */ aspect-ratio: 23 / 32; min-height: 56px; } .ask-eq__board-gap { flex: 0 0 1px; } /* Séparateur entre flop, turn et river : la structure du board est une information, pas une décoration — elle dit au joueur où il en est. */ .ask-eq__board-gap { width: 1px; align-self: stretch; min-height: 44px; background: var(--atr-felt-line); margin: 0 4px; } /* ── Emplacements de cartes ──────────────────────────────────────────── */ .ask-eq__slot { position: relative; width: 46px; height: 64px; padding: 0; border: 1px solid var(--atr-line); border-radius: 8px; background: var(--atr-slot); color: var(--atr-ink); font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; } .ask-eq__slot:hover { border-color: var(--atr-ink); } .ask-eq__slot.is-filled { background: var(--atr-paper); border-color: rgba(17, 17, 17, 0.35); box-shadow: 0 1px 2px rgba(17, 17, 17, 0.12); } /* L'emplacement que la modale est en train de remplir. Le joueur doit pouvoir le retrouver d'un coup d'oeil derrière la modale sur grand écran. */ .ask-eq__slot.is-target { border-color: var(--atr-red); box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.28); } .ask-eq__slot-rank { font-size: 1.25rem; font-weight: 700; } .ask-eq__slot-suit { font-size: 1.05rem; margin-top: 2px; } /* Fermé tant que l'étape précédente n'est pas posée. Le trait interrompu et l'effacement disent « pas encore » sans qu'aucune phrase n'ait à le dire ; la case reste visible, parce que le joueur doit voir que le turn et la river existent et l'attendent. */ .ask-eq__slot.is-locked { opacity: 0.4; border-style: dashed; cursor: not-allowed; } .ask-eq__slot.is-empty::after { content: '+'; font-size: 1.35rem; font-weight: 400; color: var(--atr-muted); } .is-suit-0 { color: var(--atr-suit-0); } .is-suit-1 { color: var(--atr-suit-1); } .is-suit-2 { color: var(--atr-suit-2); } .is-suit-3 { color: var(--atr-suit-3); } /* ── Joueurs ─────────────────────────────────────────────────────────── */ .ask-eq__players { display: grid; gap: 8px; } .ask-eq__player { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--atr-line); border-radius: var(--atr-radius); background: var(--atr-paper); } /* Pastille pleine plutôt que texte gris : à 0,78 rem en gris moyen, « J1 » se lisait moins bien que les cartes qu'il désigne, alors qu'il est le repère qui permet de suivre une ligne jusqu'à son pourcentage. */ .ask-eq__player-name { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 26px; padding: 0 7px; border-radius: 7px; background: var(--atr-ink); color: var(--atr-paper); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; } .ask-eq__player-cards { display: flex; gap: 6px; flex: 0 0 auto; } .ask-eq__player-result { flex: 1 1 auto; min-width: 0; text-align: right; } /* Jauge d'équité : la comparaison entre joueurs doit se lire sans additionner des chiffres de tête. Elle est en fond, la valeur reste le sujet. */ .ask-eq__gauge { position: relative; height: 6px; margin-top: 6px; border-radius: 3px; background: var(--atr-slot); overflow: hidden; } .ask-eq__gauge-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--atr-red); border-radius: 3px; transition: width 180ms ease; } /* Retrait d'un joueur. Discret par défaut — ce n'est pas l'action courante — mais toujours présent dès qu'il y a plus de deux joueurs, à la même place sur chaque ligne : on retire celui qu'on vise, pas le dernier de la liste. */ .ask-eq__player-remove { flex: 0 0 auto; width: 30px; height: 30px; margin-left: 4px; border: 1px solid var(--atr-line); border-radius: 8px; background: transparent; color: var(--atr-muted); font: inherit; font-size: 1rem; line-height: 1; cursor: pointer; } .ask-eq__player-remove:hover { border-color: var(--atr-red); color: var(--atr-red); } .ask-eq__player-remove[hidden] { display: none; } .ask-eq__win { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; } .ask-eq__tie { display: block; font-size: 0.78rem; color: var(--atr-muted); font-variant-numeric: tabular-nums; } /* Résultat qui ne correspond plus à la saisie en cours : il reste lisible mais s'efface. C'est le signal, il n'y a pas de phrase pour le dire. */ .ask-eq__players.is-stale .ask-eq__player-result { opacity: 0.32; } .ask-eq__players.is-pending .ask-eq__player-result { opacity: 0.55; } /* ── Pied ────────────────────────────────────────────────────────────── */ .ask-eq__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; } .ask-eq__hint { font-size: 0.78rem; color: var(--atr-muted); } .ask-eq__reset { min-height: 40px; padding: 0 14px; border: 1px solid var(--atr-line); border-radius: var(--atr-radius); background: var(--atr-paper); color: var(--atr-ink); font: inherit; cursor: pointer; } .ask-eq__reset:hover { border-color: var(--atr-ink); } /* ── Modale de saisie ──────────────────────────────────────────────────── PORTÉE SOUS par le JS. Divi crée des contextes d'empilement qui écrasent le z-index : la parade est en DEUX parties, et les deux sont nécessaires — z-index très élevé ET sortie du sous-arbre du thème. Un z-index seul ne suffit pas, un portal seul non plus. ------------------------------------------------------------------- */ .ask-eq-modal { position: fixed; inset: 0; z-index: 999999; display: flex; align-items: flex-end; justify-content: center; background: rgba(17, 17, 17, 0.55); font-size: 16px; line-height: 1.4; color: #111111; } .ask-eq-modal[hidden] { display: none; } .ask-eq-modal *, .ask-eq-modal *::before, .ask-eq-modal *::after { box-sizing: border-box; } .ask-eq-modal__panel { width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto; padding: 14px 14px 18px; background: #ffffff; border-radius: 14px 14px 0 0; box-shadow: 0 -6px 28px rgba(17, 17, 17, 0.3); } .ask-eq-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .ask-eq-modal__target { font-size: 0.86rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #6f6f6f; } .ask-eq-modal__close { width: 40px; height: 40px; flex: 0 0 auto; border: 1px solid rgba(17, 17, 17, 0.16); border-radius: 10px; background: #ffffff; color: #111111; font: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer; } /* Deux listes, et cela doit se voir. Sans séparation, les enseignes se lisaient comme la suite de la grille des valeurs — « A K Q J T pique coeur » sur une même ligne — alors que le geste attendu est bien de choisir dans l'une PUIS dans l'autre. Le filet et l'écart rétablissent la lecture en deux colonnes que promet le modèle. */ .ask-eq-modal__lists { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: start; } .ask-eq-modal__suits { padding-left: 14px; border-left: 1px solid rgba(17, 17, 17, 0.14); } .ask-eq-modal__ranks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; } .ask-eq-modal__suits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .ask-eq-modal__key { min-width: 44px; min-height: 48px; padding: 4px; border: 1px solid rgba(17, 17, 17, 0.16); border-radius: 10px; background: #ffffff; color: #111111; font: inherit; font-size: 1.15rem; font-weight: 700; line-height: 1; cursor: pointer; } .ask-eq-modal__key--suit { font-size: 1.5rem; } .ask-eq-modal__key[aria-pressed='true'] { background: #111111; border-color: #111111; color: #ffffff; } /* SPÉCIFICITÉ DÉLIBÉRÉE, NE PAS « SIMPLIFIER » EN .is-suit-N. Sur une carte posée, la teinte s'applique à un enfant : une règle directe l'emporte toujours sur une couleur héritée du parent, quelle que soit la spécificité. Ici la classe est posée SUR LE BOUTON, où elle entre en concurrence frontale avec .ask-eq-modal__key { color } — même spécificité (0,1,0), donc c'est l'ordre du fichier qui tranche, et les teintes sont déclarées plus haut. Elles perdaient, et le sélecteur restait noir alors que les cartes étaient bien colorées. Le sélecteur de classe supplémentaire rend la règle indépendante de l'ordre. */ .ask-eq-modal__key.is-suit-0 { color: var(--atr-suit-0); } .ask-eq-modal__key.is-suit-1 { color: var(--atr-suit-1); } .ask-eq-modal__key.is-suit-2 { color: var(--atr-suit-2); } .ask-eq-modal__key.is-suit-3 { color: var(--atr-suit-3); } /* Une touche d'enseigne choisie prend SA couleur en fond, symbole en blanc. Le fond noir uniforme des touches de rang ne convient pas ici : il ferait disparaître le pique et retirerait à toutes les autres le repère de couleur au moment précis où l'on vérifie son choix. */ .ask-eq-modal__key--suit[aria-pressed='true'].is-suit-0 { background: var(--atr-suit-0); border-color: var(--atr-suit-0); color: #ffffff; } .ask-eq-modal__key--suit[aria-pressed='true'].is-suit-1 { background: var(--atr-suit-1); border-color: var(--atr-suit-1); color: #ffffff; } .ask-eq-modal__key--suit[aria-pressed='true'].is-suit-2 { background: var(--atr-suit-2); border-color: var(--atr-suit-2); color: #ffffff; } .ask-eq-modal__key--suit[aria-pressed='true'].is-suit-3 { background: var(--atr-suit-3); border-color: var(--atr-suit-3); color: #ffffff; } /* Indisponible : la carte est déjà posée ailleurs. C'est CE grisage qui remplace toute explication — le joueur tape un rang et voit s'éteindre les couleurs déjà prises. */ .ask-eq-modal__remove { display: block; width: 100%; min-height: 44px; margin-top: 14px; border: 1px solid rgba(17, 17, 17, 0.16); border-radius: 10px; background: #ffffff; color: #6f6f6f; font: inherit; cursor: pointer; } .ask-eq-modal__remove:hover { border-color: #c0392b; color: #c0392b; } .ask-eq-modal__remove[hidden] { display: none; } .ask-eq-modal__key[disabled] { opacity: 0.26; cursor: not-allowed; background: rgba(17, 17, 17, 0.04); } /* ── Onglets ───────────────────────────────────────────────────────────── Deux outils sur une page. « Mains connues » d'abord : c'est le débutant qui arrive sans savoir ce qu'il cherche, tandis que l'onglet Ranges suppose de savoir ce qu'est une range. ------------------------------------------------------------------- */ .ask-eq__tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 18px; } .ask-eq__tab { min-height: 44px; padding: 0 10px; border: 1px solid var(--atr-line); border-radius: var(--atr-radius); background: var(--atr-paper); color: var(--atr-muted); font: inherit; font-weight: 600; cursor: pointer; } .ask-eq__tab[aria-selected='true'] { background: var(--atr-ink); border-color: var(--atr-ink); color: var(--atr-paper); } .ask-eq__panel[hidden] { display: none; } /* ── Ligne de joueur de l'onglet Ranges ────────────────────────────────── L'interrupteur cartes / range a disparu en 1.5.0 : le dernier siège porte la range par construction. Ses styles ont été retirés avec lui plutôt que laissés à traîner — une règle morte finit toujours par être réutilisée à contretemps. ------------------------------------------------------------------- */ .ask-eq__player--range { flex-wrap: wrap; } .ask-eq__range-summary { flex: 0 0 auto; font-size: 0.82rem; font-weight: 600; color: var(--atr-ink); font-variant-numeric: tabular-nums; } .ask-eq__range-summary.is-empty { color: var(--atr-muted); font-weight: 400; } /* ── Grille des mains de départ ────────────────────────────────────────── Disposition universelle : valeurs de l'As au 2 dans les deux sens, paires sur la diagonale, mains assorties au-dessus, dépareillées en dessous. Qui a déjà vu une grille de range n'a rien à réapprendre. ------------------------------------------------------------------- */ .ask-eq__section--grid[hidden] { display: none; } /* L'ARITHMÉTIQUE COMMANDE. Treize cases plus leurs écarts sur la largeur utile d'un téléphone donnent 23 à 26 px par case, quoi qu'on fasse : des cases confortables de 40 px exigeraient 544 px, ce qui n'existe pas en portrait. On ne peut donc pas AGRANDIR — seulement rendre lisible ce qu'on met dedans. D'où le libellé à deux caractères et l'écart réduit à 1 px. */ /* PLAFOND DE LARGEUR. Les cases ont une proportion carrée : sans plafond, la grille occupe toute la largeur du conteneur et devient donc aussi HAUTE que lui — près de 900 px sur ordinateur, où il faut alors défiler pour la voir entière. 520 px donne des cases d'environ 39 px, confortables, et la grille tient dans un écran. En dessous de cette largeur, sur téléphone, le plafond ne s'applique pas et rien ne change. */ .ask-eq__grid { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); max-width: 520px; margin: 0 auto; gap: 1px; /* Indispensable à la peinture au doigt : sans cela, le glissement fait défiler la page au lieu de sélectionner des cases. */ touch-action: none; user-select: none; } .ask-eq__cell { aspect-ratio: 1; min-width: 0; padding: 0; border: 1px solid rgba(17, 17, 17, 0.08); border-radius: 3px; background: var(--atr-family-offsuit); color: var(--atr-ink); font: inherit; font-size: clamp(9px, 2.5vw, 13px); font-weight: 700; line-height: 1; letter-spacing: -0.02em; cursor: pointer; overflow: hidden; } /* Les trois familles portent des fonds NETTEMENT distincts : depuis que le libellé a perdu son suffixe s / o, c'est la couleur — avec la position — qui dit de quelle famille est une case. La légende en donne la clé. */ .ask-eq__cell--pair { background: var(--atr-family-pair); } .ask-eq__cell--suited { background: var(--atr-family-suited); } .ask-eq__cell.is-on { background: var(--atr-red); border-color: var(--atr-red); color: var(--atr-paper); } /* ── Légende ─────────────────────────────────────────────────────────── */ .ask-eq__legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; } .ask-eq__legend-item { display: inline-flex; align-items: center; gap: 5px; font-size: 0.76rem; color: var(--atr-muted); } .ask-eq__legend-swatch { width: 13px; height: 13px; border: 1px solid rgba(17, 17, 17, 0.14); border-radius: 3px; } .ask-eq__legend-swatch--pair { background: var(--atr-family-pair); } .ask-eq__legend-swatch--suited { background: var(--atr-family-suited); } .ask-eq__legend-swatch--offsuit { background: var(--atr-family-offsuit); } .ask-eq__grid-tools { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .ask-eq__grid-count { font-size: 0.82rem; color: var(--atr-muted); font-variant-numeric: tabular-nums; } .ask-eq__grid-actions { display: flex; flex-wrap: wrap; gap: 6px; } .ask-eq__grid-action { min-height: 36px; padding: 0 12px; border: 1px solid var(--atr-line); border-radius: 8px; background: var(--atr-paper); color: var(--atr-ink); font: inherit; font-size: 0.82rem; cursor: pointer; } .ask-eq__grid-action:hover { border-color: var(--atr-ink); } /* « Rien » n'est pas une lecture, c'est une action : elle s'efface. */ .ask-eq__grid-action--clear { color: var(--atr-muted); } /* ── Aperçu et invitation ──────────────────────────────────────────────── Pour un visiteur sans compte, l'onglet des ranges montre la vraie grille, peinte d'une lecture plausible, mais inerte — et l'invitation par-dessus. Une vitrine, pas un mur : « inscris-toi pour accéder aux ranges » ne dit rien à qui ignore ce qu'est une range. ------------------------------------------------------------------- */ /* EN APERÇU, ON NE MONTRE QUE LA GRILLE. Le sélecteur d'effectif, le board et les lignes de joueurs occupaient près de 500 px avant elle : l'invitation, centrée dans un panneau devenu très haut, tombait sous la ligne de flottaison même sur ordinateur — et le visiteur ne voyait ni la grille ni l'invitation, c'est-à-dire ni ce qu'il rate ni comment l'obtenir. Une vitrine n'a pas à montrer tout le magasin. */ .ask-eq__panel.is-locked { position: relative; } .ask-eq__panel.is-locked .ask-eq__seats, .ask-eq__panel.is-locked .ask-eq__section--board, .ask-eq__panel.is-locked .ask-eq__section--players, .ask-eq__panel.is-locked .ask-eq__footer, .ask-eq__panel.is-locked .ask-eq__grid-tools { display: none; } /* Tout sauf l'invitation s'efface et cesse de répondre. Le `disabled` posé par le JS couvre le clavier ; ceci couvre le doigt et la souris. Les deux sont nécessaires — l'un sans l'autre laisse une porte ouverte. */ .ask-eq__panel.is-locked > *:not(.ask-eq__invite) { pointer-events: none; user-select: none; opacity: 0.42; filter: grayscale(0.3); } /* L'invitation se cale EN HAUT, pas au centre : elle doit être lue avant qu'on ait à défiler. Le dégradé remplit deux rôles — il estompe l'aperçu et il s'épaissit vers le bas, ce qui signale que ce qu'on voit est tronqué. */ .ask-eq__invite { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px; padding: 26px 20px 20px; text-align: center; background: linear-gradient( to bottom, rgba(255, 255, 255, 0.58) 0%, rgba(255, 255, 255, 0.74) 45%, rgba(255, 255, 255, 0.96) 100% ); } .ask-eq__invite-card { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 380px; padding: 18px 22px 20px; border: 1px solid var(--atr-line); border-radius: 14px; background: var(--atr-paper); box-shadow: 0 6px 22px rgba(17, 17, 17, 0.16); } .ask-eq__invite-title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--atr-ink); } .ask-eq__invite-text { margin: 0; max-width: 30ch; font-size: 0.88rem; color: var(--atr-muted); } /* !important ASSUMÉ, et réservé à cet élément. Divi colore les liens avec des sélecteurs porteurs d'identifiant (du genre #main-content .entry-content a) qu'aucune spécificité de classe raisonnable ne peut dépasser : le texte du bouton reprenait donc la couleur de lien du thème au lieu du blanc, et se détachait mal du rouge. Empiler les classes pour gagner la bataille serait plus fragile et moins lisible que de la déclarer gagnée ici. */ .ask-eq__invite-cta, .ask-eq__invite-cta:link, .ask-eq__invite-cta:visited { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: var(--atr-radius); background: var(--atr-red); color: #ffffff !important; font-weight: 700; text-decoration: none !important; } .ask-eq__invite-cta:hover, .ask-eq__invite-cta:focus { background: var(--atr-ink); color: #ffffff !important; } /* ── Accessibilité et confort ────────────────────────────────────────── */ .ask-eq button:focus-visible, .ask-eq-modal button:focus-visible { outline: 3px solid var(--atr-red, #c0392b); outline-offset: 2px; } .ask-eq__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { .ask-eq__gauge-fill { transition: none; } } /* ── Paysage ───────────────────────────────────────────────────────────── Le board passe en bandeau pleine largeur et les joueurs se répartissent sur deux colonnes : à huit joueurs en portrait, il faudrait défiler et le board sortirait de l'écran pendant la lecture des résultats. Le garde-fou de largeur évite d'appliquer deux colonnes à un téléphone couché, où elles seraient plus étroites qu'utiles. ------------------------------------------------------------------- */ @media (orientation: landscape) and (min-width: 680px) { .ask-eq__players { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ask-eq-modal { align-items: center; } .ask-eq-modal__panel { border-radius: 14px; } } @media (min-width: 680px) { .ask-eq__player-cards .ask-eq__slot { width: 52px; height: 72px; } } /* ── Grille pleine largeur d'écran en portrait ─────────────────────────── La grille sort de la colonne du thème pour occuper toute la fenêtre. Le gain est modeste — quelques pixels par case — mais il s'ajoute à celui du libellé raccourci, et il met la grille au premier plan au lieu de la coincer entre deux sections. Technique sans transform : margin-left négatif calculé. Un translateX provoquerait un débordement horizontal dès qu'une barre de défilement est visible, ce qui arrive sur ordinateur en fenêtre étroite. ------------------------------------------------------------------- */ @media (max-width: 679px) { .ask-eq__section--grid { width: 100vw; margin-left: calc(50% - 50vw); padding: 12px 8px 14px; border-radius: 0; } .ask-eq__legend { justify-content: space-between; gap: 4px 8px; } .ask-eq__grid-actions { width: 100%; } .ask-eq__grid-action { flex: 1 1 auto; padding: 0 8px; font-size: 0.78rem; } }