/* ============================================================
   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; }
/* LE CHEVRON EST UN « ▾ » TEXTE de 8 px (maquettes 03, 05, 06, 07, 09), pas
   l'angle Font Awesome : la maquette le pose en `--text-dim` sur TOUS les onglets,
   actif compris, et ne le passe à l'accent que quand le menu de l'onglet est
   ouvert. Il n'a ni opacité réduite ni rotation. Le glyphe FA est remplacé par
   le caractère, dans la police de la charte. */
.pv2_nav_t > .pv2_nav_chev { font-family: var(--font); font-style: normal; font-weight: 400; font-size: 8px; opacity: 1; color: var(--text-dim); transition: color .14s var(--ease); }
.pv2_nav_t > .pv2_nav_chev::before {
    content: "\25BE";
    font-family: var(--font);
    font-weight: 400;
}
.pv2_nav_t:hover { color: var(--accent); }
.pv2_nav_t:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* DANS L'EN-TÊTE, LE SÉLECTEUR UNIVERSEL DE block-top.css GAGNE.
   Depuis que la rangée est rendue dans `.block_top` (#452), `body > .block_top *`
   (0,1,1) bat `.pv2_nav_t` (0,1,0) : les onglets inactifs sortaient BLANCS comme
   l'actif — plus rien ne distinguait la famille courante — et le libellé, un
   <span>, retombait aux 13 px de common.css. Mesuré le 2026-09-23 sur
   /projet/site-8043 contre les maquettes 03/05/06/07/09 : 13,5 px, --text-mid,
   chevron de 8 px. */
body > .block_top .pv2_nav_t { color: var(--text-mid); }
body > .block_top .pv2_nav_t > span { font-size: inherit; }
/* 7 px de large : la boîte du « ▾ » de la maquette. Le glyphe FA n'en fait que 5,
   et chaque onglet dérivait d'un pixel de plus vers la gauche. */
/* Boîte de 12 px de haut comme celle du « ▾ » de la maquette (8 px × 1,5). */
body > .block_top .pv2_nav_t > .pv2_nav_chev { font-size: 8px; font-weight: 400; line-height: 12px; width: 7px; text-align: center; color: var(--text-dim); }
/* Survol / menu ouvert : le libellé ET le chevron passent à l'accent (maquette :
   `color: open ? var(--accent) : var(--text-mid)`, `caretColor` idem) — sauf
   l'onglet courant, dont le libellé reste en encre pleine. */
body > .block_top .pv2_nav_t:hover,
body > .block_top .pv2_nav_t:focus-within { color: var(--accent); }
body > .block_top .pv2_nav_t:hover > .pv2_nav_chev,
body > .block_top .pv2_nav_t:focus-within > .pv2_nav_chev { color: var(--accent); }
body > .block_top .pv2_nav_t_on,
body > .block_top .pv2_nav_t_on:hover,
body > .block_top .pv2_nav_t_on:focus-within { color: var(--text); }
/* Les entrees du deroulant : meme piege, `body > .block_top *` (0,1,1) bat
   `.pv2_nav_lien` (0,1,0) — elles sortaient en `--text` au lieu de `--text-mid`. */
body > .block_top .pv2_nav_lien { color: var(--text-mid); }
body > .block_top .pv2_nav_lien:hover { color: var(--accent); }
/* 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. `top: 100%` se
       rapporte a la boite de PADDING : le soulignement de 2 px (border-bottom)
       est en dessous, d'ou le `+ 2px` — le panneau s'ouvre SOUS le soulignement
       (maquette : y = 114), sans zone morte puisque le filet fait partie de
       l'onglet. */
    top: calc(100% + 2px);
    /* A -10 px du libelle, comme la maquette (`left: -10px` sur le panneau des
       maquettes 05 et 09). Les -20 d'avant alignaient le texte du premier lien sur
       celui de l'onglet, mais decalaient le panneau de 10 px vers la gauche. */
    left: -10px;
    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;
    /* Le panneau de la maquette : `min-width: 230px`, `padding: 7px`, une
       gouttiere de 1 px entre les entrees, et l'ombre MARINE de 44 px (jamais
       noire). */
    /* content-box comme la maquette : 230 de contenu + 2 × 7 de padding + 2 × 1 de
       filet = 246 hors tout, entrées de 230 (le reset global est border-box). */
    box-sizing: content-box;
    min-width: 230px;
    gap: 1px;
    padding: 7px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: 0 18px 44px rgba(11, 21, 51, .24);
}
.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;
    /* Ouverture de la maquette (05, 06, 07, 09) : zPopIn .16s, courbe --ease
       (keyframe de v5-tokens.css). L'animation n'existe que dans l'etat ouvert :
       la fermeture, elle, reste le fondu differe de 250 ms ci-dessus. */
    animation: zPopIn .16s var(--ease) both;
}

/* ---------- Une destination dans un deroulant ---------- */
/* L'entree de la maquette : 12,5 px `--text-mid`, rembourrage 9 11, rayon 9, un
   chevron de 11 px a droite ; au survol fond `--accent-soft` et encre `--accent`.
   Le chevron est un masque (comme celui du rail) pour suivre `color`. */
.pv2_nav_lien {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 9px;
    font-size: 12.5px;
    /* Graisse posée : sans elle les entrées du menu de l'onglet actif héritaient du
       600 de `.pv2_nav_t_on` (maquette : 400). */
    font-weight: 400;
    /* 18 px de ligne + 2 × 9 de rembourrage = les 36 px de la maquette. */
    line-height: 18px;
    color: var(--text-mid);
    text-decoration: none;
    white-space: nowrap;
    transition: background .14s var(--ease), color .14s var(--ease);
}
.pv2_nav_lien::after {
    content: "";
    flex: none;
    width: 11px;
    height: 11px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 3.5 10.5 8 6 12.5'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 3.5 10.5 8 6 12.5'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
}
.pv2_nav_lien:hover { background: var(--accent-soft); color: var(--accent); }
/* Page courante : encre `--accent`, 600, ni fond ni filet — comme les maquettes Link building ET
   zAnalytics (mesuré sur les deux, deux thèmes : l'entrée de la page affichée est en accent 600,
   les autres en `--text-mid` 400 ; le chevron, en `currentColor`, la suit). Les écrans projet
   livrés (leads, zrank, site-8…) n'avaient aucune règle ici : « aucun état courant » était le
   constat de leur maquette, que celles-ci contredisent. `.pv2_nav_lien_on` est posée par le PHP
   (avec `aria-current="page"`). */
.pv2_nav_lien_on { font-weight: 600; }
/* L'encre : `body > .block_top .pv2_nav_lien` (0,2,1, plus haut) impose `--text-mid` aux entrées. */
body > .block_top .pv2_nav_lien.pv2_nav_lien_on { color: var(--accent); }
/* 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; }

/* Onglet de famille à page unique : un lien, sans chevron ni déroulant (2026-10-08). */
a.pv2_nav_t.pv2_nav_t_seul { text-decoration: none; }
a.pv2_nav_t.pv2_nav_t_seul:hover { text-decoration: none; }

/* ---------- Sous-menu dans un déroulant (Link building dans SEO Suite, 2026-10-09) ----------
   Un intitulé inerte puis ses entrées en retrait, dans le MÊME panneau : un second panneau
   volant se refermerait au moindre écart de la souris. L'intitulé reprend la casse des
   étiquettes de la charte (11 px, 600, `--text-dim`) ; il passe en accent quand la page
   courante est l'une des siennes. */
.pv2_nav_sous {
    display: block;
    padding: 10px 11px 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--text-dim);
    white-space: nowrap;
}
.pv2_nav_sous_on { color: var(--accent); }
.pv2_nav_lien.pv2_nav_lien_retrait { padding-left: 23px; }