/* ══════════════════════════════════════════════════════════════════════════ Navigation — ce que ne fait pas. Le composant possède la barre elle-même (onglets soulignés, défilement horizontal, thème) et n'a PAS de burger. Ce fichier ajoute les trois morceaux de la refonte 1a / 2a qui appartiennent au dashboard : 1. le panneau riche des groupes (icône + libellé + description, 2 colonnes) 2. la palette ⌘K 3. la coquille mobile : tiroir plein écran, titre de page, pastilles Spécificité : NAV_CSS est injecté dans APRÈS ce fichier, et cible `.tab-dropdown.rp-floating.open` (0,3,0) — le menu est déporté dans par tabs.js. Les sélecteurs ci-dessous montent donc à 4 classes, sinon `display:flex` de NAV_CSS gagne et la grille 2 colonnes ne s'applique pas. ══════════════════════════════════════════════════════════════════════════ */ /* ── 1. Panneau riche ─────────────────────────────────────────────────── */ pr-site-header .tab-dropdown.tab-dropdown-rich.open, .tab-dropdown.tab-dropdown-rich.rp-floating.open { display: grid; /* `minmax(0, …)` et non `1fr` : une piste `1fr` vaut `minmax(auto, 1fr)` et refuse de descendre sous la largeur de son contenu. Une description un peu longue rendait donc la grille plus large que le panneau, et le panneau se mettait à défiler horizontalement au lieu de replier le texte. Même piège que les lignes de /relations. */ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 20px; width: min(600px, calc(100vw - 24px)); min-width: 0; padding: 16px; border-color: var(--border-gold); border-radius: 12px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6); } .tab-dd-title { grid-column: 1 / -1; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); padding-bottom: 8px; border-bottom: 1px solid var(--border-subtle); margin-bottom: 6px; } /* NAV_CSS aligne les items au centre et interdit le retour à la ligne : avec une description sur deux lignes il faut l'inverse. */ /* QUATRE classes, pas trois. NAV_CSS pose `white-space: nowrap` avec `.tab-dropdown.rp-floating .tab-dropdown-item` (0,3,0) et il est injecté dans APRÈS ce fichier : à égalité de spécificité, c'est lui qui gagne. La règle ci-dessous était à 3 classes, donc le repli du texte n'a jamais fonctionné sur le menu déporté — les descriptions restaient sur une ligne et sortaient du panneau. C'est le débordement signalé, et c'est exactement le piège décrit en tête de ce fichier. */ pr-site-header .tab-dropdown-rich .tab-dropdown-item, .tab-dropdown.tab-dropdown-rich.rp-floating .tab-dropdown-item { align-items: flex-start; gap: 11px; padding: 9px 10px; border-radius: 8px; white-space: normal; text-decoration: none; } .tab-dropdown-rich .tab-dropdown-item .pr-icon, .tab-dropdown-rich .tab-dropdown-item svg { margin-top: 2px; flex: none; } .tab-dd-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .tab-dd-label { font-size: 0.84rem; font-weight: 600; color: var(--text-primary); } .tab-dd-desc { font-size: 0.72rem; color: var(--text-muted); line-height: 1.35; } .tab-dropdown-rich .tab-dropdown-item.active .tab-dd-label { color: var(--gold); } /* Un lien vers un service voisin (Calculateur, Catalogue) : même ligne, mais la flèche dit qu'on quitte le dashboard. */ .tab-dd-ext .tab-dd-label::after { content: " ↗"; font-size: 0.7em; color: var(--text-faint); } .tab-dd-foot { grid-column: 1 / -1; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--border-subtle); display: flex; gap: 8px; align-items: center; font-size: 0.69rem; color: var(--text-faint); } .tab-dd-kbd { font-family: ui-monospace, Menlo, monospace; font-size: 0.66rem; color: var(--text-secondary); background: var(--bg-overlay); border: 1px solid var(--border-mid); border-radius: 5px; padding: 2px 6px; } /* ── 2. Palette ⌘K ────────────────────────────────────────────────────── */ .gd-palette { position: fixed; inset: 0; z-index: 3000; display: none; justify-content: center; align-items: flex-start; padding: 12vh var(--sp-4) var(--sp-4); background: rgba(0, 0, 0, 0.6); } .gd-palette.open { display: flex; } .gd-palette-box { width: min(560px, 100%); max-height: 70vh; display: flex; flex-direction: column; background: var(--bg-raised); border: 1px solid var(--border-gold); border-radius: 12px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6); overflow: hidden; } .gd-palette-input { height: 48px; padding: 0 var(--sp-4); background: transparent; border: none; border-bottom: 1px solid var(--border-subtle); color: var(--text-primary); font-family: var(--font-body); font-size: 0.95rem; } .gd-palette-input:focus { outline: none; } .gd-palette-list { overflow-y: auto; padding: 6px; } .gd-palette-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; border: none; border-radius: 8px; background: none; color: var(--text-secondary); font-family: var(--font-body); font-size: 0.84rem; text-align: left; cursor: pointer; } /* Le survol souris et la sélection clavier partagent le même état : sinon deux lignes paraissent actives en même temps. */ .gd-palette-item.sel { background: var(--gold-glow); color: var(--gold); } .gd-palette-item .gd-palette-group { margin-left: auto; font-size: 0.7rem; color: var(--text-faint); } .gd-palette-empty { padding: var(--sp-4); font-size: 0.82rem; color: var(--text-faint); } /* ── 3. Coquille mobile (2a) ──────────────────────────────────────────── */ /* Ces trois éléments n'existent qu'en dessous de 768px ; ils restent dans le DOM (construits une fois par palette.js) mais ne s'affichent jamais au dessus, pour ne pas dupliquer la barre du composant. */ .gd-burger, .gd-mobile-bar { display: none; } .gd-burger { flex-direction: column; gap: 4px; padding: 6px; min-width: var(--pr-touch-target); min-height: var(--pr-touch-target); align-items: center; justify-content: center; background: none; border: none; cursor: pointer; } .gd-burger span { width: 18px; height: 1.5px; background: var(--text-secondary); border-radius: 1px; } .gd-burger span:last-child { width: 12px; } .gd-mobile-bar { flex-direction: column; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4) var(--sp-2); border-bottom: 1px solid var(--border-subtle); background: var(--bg-base); } .gd-mobile-title { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.03em; color: var(--text-primary); text-transform: uppercase; } .gd-mobile-pills { display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .gd-mobile-pills::-webkit-scrollbar { display: none; } .gd-pill { flex: none; padding: 7px 13px; border-radius: var(--r-full); border: 1px solid var(--border-mid); background: var(--bg-surface); color: var(--text-secondary); font-family: var(--font-body); font-size: 0.78rem; white-space: nowrap; cursor: pointer; } .gd-pill.active { background: var(--gold); border-color: var(--gold); color: #111; font-weight: 600; } .gd-drawer { position: fixed; inset: 0; z-index: 2500; display: none; flex-direction: column; background: var(--bg-void); overflow-y: auto; -webkit-overflow-scrolling: touch; } .gd-drawer.open { display: flex; } .gd-drawer-head { display: flex; align-items: center; gap: var(--sp-3); height: 54px; flex: none; padding: 0 var(--sp-4); border-bottom: 1px solid var(--border-subtle); background: var(--bg-surface); } .gd-drawer-brand { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.04em; color: var(--text-primary); } .gd-drawer-close { margin-left: auto; min-width: var(--pr-touch-target); min-height: var(--pr-touch-target); background: none; border: none; color: var(--text-secondary); font-size: 1.3rem; cursor: pointer; } .gd-drawer-body { padding: var(--sp-4) var(--sp-4) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); } /* Le champ du tiroir ouvre la palette : une seule recherche, un seul index. */ .gd-drawer-search { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--pr-touch-target); padding: 10px 12px; background: var(--bg-surface); border: 1px solid var(--border-mid); border-radius: var(--r-md); color: var(--text-faint); font-family: var(--font-body); font-size: 0.82rem; text-align: left; cursor: pointer; } .gd-drawer-solo { padding: 13px 14px; border-radius: 12px; border: 1px solid var(--border-mid); background: var(--bg-surface); color: var(--text-secondary); font-family: var(--font-body); font-size: 0.9rem; font-weight: 600; text-align: left; cursor: pointer; } .gd-drawer-solo.active { background: var(--gold-glow); border-color: var(--border-gold); color: var(--gold-light); } .gd-drawer-group { border: 1px solid var(--border-subtle); border-radius: 12px; overflow: hidden; } .gd-drawer-group.open { background: var(--bg-surface); } .gd-drawer-group-btn { display: flex; align-items: center; width: 100%; min-height: var(--pr-touch-target); padding: 14px; background: none; border: none; color: var(--text-secondary); font-family: var(--font-body); font-size: 0.9rem; text-align: left; cursor: pointer; } .gd-drawer-group.open .gd-drawer-group-btn { color: var(--text-primary); font-weight: 600; } .gd-drawer-group-arrow { margin-left: auto; font-size: 0.68rem; color: var(--text-faint); } .gd-drawer-group.open .gd-drawer-group-arrow { color: var(--gold); } .gd-drawer-items { display: none; padding: 0 14px 12px; flex-direction: column; gap: 2px; } .gd-drawer-group.open .gd-drawer-items { display: flex; } .gd-drawer-item { display: flex; align-items: center; gap: 12px; min-height: var(--pr-touch-target); padding: 12px; border: none; border-radius: 9px; background: none; color: var(--text-primary); font-family: var(--font-body); font-size: 0.87rem; text-align: left; text-decoration: none; cursor: pointer; } .gd-drawer-item.active { background: var(--gold-glow); } .gd-drawer-item.active .tab-dd-label { color: var(--gold-light); } @media (max-width: 768px) { /* Les onglets du composant disparaissent : c'est le tiroir qui navigue. `display:none` sur le slot suffit, le composant garde logo + actions. */ pr-site-header .tabs { display: none; } .gd-burger { display: flex; } .gd-mobile-bar { display: flex; } .gd-palette { padding-top: 8vh; } } /* ── 4. « Depuis ta dernière visite » (GD-3) ─────────────────────────────── Deux marques pour un seul compte : le nombre sur l'entrée concernée, et un point sur le groupe qui la contient — sans lui, la pastille ne serait vue que par qui ouvre déjà ce menu, c'est-à-dire par qui n'en a pas besoin. `[hidden]` seul ne suffirait pas : les deux règles ci-dessous posent `display`, qui l'emporte sur la valeur par défaut de l'attribut. */ .nav-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: auto; border-radius: var(--r-full); background: var(--gold); color: #111; font-size: 0.66rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; flex: none; } .nav-count[hidden] { display: none; } .nav-dot { display: inline-block; width: 6px; height: 6px; margin-left: 2px; border-radius: 50%; background: var(--gold); /* Aligné sur la ligne de texte du bouton, pas sur sa boîte : le bouton du groupe contient déjà un libellé et une flèche. */ vertical-align: 3px; } .nav-dot[hidden] { display: none; } /* La pastille des messages vit DANS un onglet de premier niveau, pas au bout d'une ligne de menu : elle se pose donc à côté du libellé plutôt que poussée à droite par `margin-left: auto`. */ .nav-count-inline { margin-left: 6px; vertical-align: 1px; } /* ── Débordements de texte ───────────────────────────────────────────────── Une garde générale, pas un correctif ponctuel. Tout ce qui s'affiche ici vient de la base ou d'un joueur : un nom de pays, un pseudo Discord, un libellé d'organisation. Rien n'en borne la longueur, et un seul nom trop long pousse le reste de la barre hors de l'écran — un défaut qui ne se voit que sur la donnée qui le déclenche, donc jamais en revue. Trois règles, chacune pour un mode de débordement distinct : couper proprement une ligne, laisser un mot interminable revenir à la ligne, et empêcher une piste de grille de refuser de rétrécir. */ /* 1. Les libellés reviennent à la ligne. Ils étaient coupés par une ellipse — ce qui cache la fin d'un nom sans le dire — puis, la grille refusant de rétrécir, le panneau s'est mis à défiler horizontalement. Aucun des deux ne convient : un menu se lit d'un coup d'œil, pas en faisant glisser son contenu. Le texte se replie. */ pr-site-header .tab-dd-label, .tab-dropdown.tab-dropdown-rich.rp-floating .tab-dd-label, .tab-dropdown-rich .tab-dd-label { display: block; min-width: 0; white-space: normal; overflow-wrap: anywhere; } /* 2. Les descriptions se replient sur deux lignes ; un mot plus long que la colonne (une URL, un nom sans espace) doit se couper plutôt que pousser. */ pr-site-header .tab-dd-desc, .tab-dropdown.tab-dropdown-rich.rp-floating .tab-dd-desc, .tab-dropdown-rich .tab-dd-desc { white-space: normal; overflow-wrap: anywhere; } /* 3. `min-width: auto` est la valeur par défaut d'un enfant de flex/grid : il REFUSE de descendre sous la largeur de son contenu. C'est le même piège que les lignes de /relations, et il se règle au même endroit — sur le conteneur du texte, pas sur le texte. */ pr-site-header .tab-dd-text, .tab-dropdown.tab-dropdown-rich.rp-floating .tab-dd-text, .tab-dropdown-rich .tab-dd-text { min-width: 0; white-space: normal; } /* Le badge utilisateur glissé dans `slot="actions"` : un pseudo Discord est libre, la barre ne l'est pas. L'identité PAYS, elle, n'est pas ici : elle vit dans la racine ombre du composant (`.ci-name`), où une feuille de page ne va pas — et elle y est déjà bornée à 240 px avec une ellipse. Une règle de plus ici serait morte, et une règle morte se relit comme une protection. */ pr-site-header .user-badge { min-width: 0; max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }