/* ============================================================ NAVIGATION DES FONCTIONNALITÉS DU PROJET — composant global. Rendue par `block-top.php` dans le slot `.tabs`, pour les 31 pages de la section projet de la Station (iso 1). Balisage : `include/php/projet-nav.php`. CE QU'ELLE REMPLACE : la rangée d'onglets à plat. Relevée sur `/projet/site-8` : 18 entrées de niveau 1 dont 5 groupes déroulants, ~1 400 px de libellés en travers de l'écran, tous de même graisse. Et quand la rangée dépassait, un JS poussait la queue dans un onglet « Plus » — les dernières fonctionnalités n'étaient même plus nommées, et LESQUELLES dépendait de la largeur de la fenêtre et de la page. Deux pages du projet (les écrans v2) avaient déjà cette rangée-ci, les 29 autres non : c'est la variante d'une page à l'autre qu'on supprime. LE PRINCIPE : la largeur ne dépend PLUS du nombre de pages. Six FAMILLES en onglets (~800 px), les 29 pages dans leurs déroulants. Ajouter une page en base allonge un déroulant, elle ne pousse plus rien hors de l'écran. POURQUOI UNE FEUILLE DE `components/` ET NON UNE FEUILLE DE PAGE : ces règles vivaient dans `pages/projet-v2.css`, chargée sur les deux seuls écrans v2. Une barre servie sur 31 pages ne peut pas être habillée par la feuille de l'une d'elles. JETONS DE LA CHARTE V5 EN DIRECT (`--text`, `--accent`, `--surface`…) et non les alias `--pv2-*` : ceux-là ne sont déclarés que sur `.pv2`, un conteneur que la barre n'a plus au-dessus d'elle depuis qu'elle est rendue par `block-top.php`. Sans définition, `background: var(--pv2-card)` retombe à `transparent` et le raccourci `border` disparaît entièrement — le piège du socle V5. ============================================================ */ /* Le slot `.tabs` de block-top.php est lui-même une rangée flex à gouttière. La barre en est une aussi : sans ça, les deux se superposeraient. On rend donc le slot neutre quand il porte ce composant. */ .block_top .menu_top .left .tabs.tabs_projet { display: block; } .block_top .menu_top .left .tabs.tabs_projet > .pv2_nav { margin-bottom: 0; } /* La rangee, a la maquette : hauteur 34, gouttiere 24, alignee au centre. `flex-wrap` et jamais de defilement horizontal (regle de la charte, § En-tete de page) : au pire la rangee prend une seconde ligne, elle ne cache rien. */ .pv2_nav { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-bottom: 14px; } /* ---------- Un onglet de famille : la grammaire d onglet de la charte ---------- Exactement celle de la rangee de l ecran 02 et des onglets natifs : 13,5/400, `padding: 0 0 12px`, gouttiere 7, filet de 2 px sous le libelle. Une seule langue d onglet dans toute la Station, au lieu d une pilule ici et d un souligne ailleurs. */ .pv2_nav_t { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 0 12px; border-bottom: 2px solid transparent; background: none; color: var(--text-mid); font-size: 13.5px; font-weight: 400; white-space: nowrap; cursor: pointer; user-select: none; transition: color .14s var(--ease), border-color .14s var(--ease); } /* Le selecteur universel de common.css repeint CHAQUE element : sans regle sur les enfants, le libelle repart en navy sur navy. */ .pv2_nav_t > span, .pv2_nav_t > .pv2_nav_chev { color: inherit; } .pv2_nav_t > .pv2_nav_chev { font-size: 11px; opacity: .8; transition: transform .15s var(--ease); } .pv2_nav_t:hover { color: var(--text); } .pv2_nav_t:hover > .pv2_nav_chev, .pv2_nav_t:focus-within > .pv2_nav_chev { transform: rotate(180deg); opacity: 1; } .pv2_nav_t:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* L onglet de la famille qui contient la page affichee. */ .pv2_nav_t_on { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); } /* Le deroulant de la famille, ouvert au focus et au survol — aucun JS. */ .pv2_nav_t > .pv2_nav_p { position: absolute; /* AUCUN ECART. Un `calc(100% + 6px)` laissait 6 px de ZONE MORTE entre l'onglet et son panneau : la souris quittait l'onglet avant d'entrer dans le panneau, `:hover` retombait, et le menu se refermait sous le curseur. Le panneau touche donc le bas de la boite de l'onglet — dont les 12 px de padding bas font deja tout le retrait visuel qu'il faut. */ top: 100%; /* Aligne le PREMIER LIEN sur le libelle de l'onglet : 8 px de padding du panneau + 12 de celui d'un lien. Sans ca le menu semble decale a droite. */ left: -20px; z-index: 60; /* VISIBILITE ET NON `display`, pour pouvoir DIFFERER LA FERMETURE. Un `display: none` bascule sec : la moindre sortie du curseur — un coin arrondi longe, un sursaut de main — ferme le menu et il faut recommencer. Ici la fermeture attend 250 ms ; l'ouverture, elle, reste immediate. */ visibility: hidden; opacity: 0; transition: opacity .12s var(--ease), visibility 0s linear .25s; display: flex; flex-direction: column; min-width: 248px; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 18px 40px rgba(0, 0, 0, .28); } .pv2_nav_t:focus-within > .pv2_nav_p, .pv2_nav_t:hover > .pv2_nav_p { visibility: visible; opacity: 1; transition: opacity .12s var(--ease), visibility 0s; } /* ---------- Une destination dans un deroulant ---------- */ .pv2_nav_lien { display: block; padding: 7px 9px; border-radius: 7px; font-size: 13px; line-height: 1.35; color: var(--text); text-decoration: none; } .pv2_nav_lien:hover { background: var(--surface2); color: var(--accent); } .pv2_nav_lien_on { background: var(--surface2); color: var(--accent); font-weight: 700; } /* Une page dont l'URL n'a pas pu être résolue sur cette route : affichée mais inerte. Un lien contenant littéralement « :sit_id » a l'air normal et mène à une 404 — c'est la panne qu'on refuse de servir. */ .pv2_nav_lien_ko { display: block; padding: 7px 9px; font-size: 13px; color: var(--text-mid); cursor: not-allowed; } .pv2_nav_lien_ko::after { content: ' — indisponible ici'; font-size: 11px; } /* `[hidden] { display: none }` vient de la feuille du navigateur, un selecteur de classe la bat toujours : sans ces lignes, masquer une entree ne masquerait rien. */ .pv2_nav_lien[hidden], .pv2_nav_lien_ko[hidden] { display: none; } /* ---------- Raccourcis ---------- Le trajet quotidien ne doit pas couter un clic de plus qu avant. Ils prennent la MEME grammaire que les onglets de famille : la maquette ne connait qu une seule forme dans cette rangee. */ /* Le filet separateur remonte de 12 px : les onglets portent 12 px de padding bas, il se centrerait sinon sur la boite et non sur la ligne des libelles. */ .pv2_nav_sep { width: 1px; height: 22px; margin-bottom: 12px; background: var(--line); } .pv2_nav_pin { display: inline-flex; align-items: center; height: 34px; padding: 0 0 12px; border-radius: 0; background: none; border-bottom: 2px solid transparent; font-size: 13.5px; font-weight: 400; color: var(--text-mid); text-decoration: none; white-space: nowrap; transition: color .14s var(--ease), border-color .14s var(--ease); } .pv2_nav_pin:hover { background: none; color: var(--text); } /* ---------- Les actions de la page ---------- Rendues ici seulement quand la page appelle la barre SANS `menu_bottom` — depuis block-top.php, ce sont `menu_bottom` et le chapeau des ecrans v2 qui les portent. Elles se lisent comme des ACTIONS et non comme des destinations : forme pleine, pas l onglet souligne des raccourcis. */ .pv2_nav_actions { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; } .pv2_nav_act { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 17px; background: var(--accent); /* Le sélecteur universel de common.css repeint CHAQUE élément : sans règle propre sur le lien ET sur ses enfants, le libellé et l'icône sortent en navy sur fond navy, donc invisibles. L'héritage ne gagne jamais contre `*`. */ color: var(--on-accent); font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap; } .pv2_nav_act * { color: inherit !important; } .pv2_nav_act:hover { filter: brightness(1.08); } .pv2_nav_act:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .pv2_nav_act i { font-size: 11px; }