/* ==========================================================================
   Composant GÉNÉRIQUE « navigation locale de page » (.cx-pagenav) — capsule « Sur cette page · section · n / N ⌄ » + mode inline.
   Fichier propre, chargé par TOUTES les pages qui utilisent cxPageNav() (hub « Changer d'extranet », Tarifs, …) via
   $header_extra_css (voir inc/header.php) — jamais dupliqué. Markup : inc/cluster_extranet.php (cxPageNav) ; comportement :
   js/cx-pagenav.js. Variables de couleur / rayon / ombre : celles du design system (copropole-main.css :root).
   Pas d'éléments <header>/<nav> (styles globaux de la vitrine) : div role="navigation" aria-label.
   ========================================================================== */

/* <article> est en overflow:hidden dans la vitrine : sans cette règle, la navigation sticky ne peut pas se coller.
   Le contenu du cluster gère lui-même ses débordements (tableaux et barres de navigation défilent dans leur propre conteneur). */
article.cx-article { overflow: visible; }

/* --- Navigation locale : hub = capsule sticky « Sur cette page · section · n / 7 ⌄ » + piste de progression ------------
   Remplace la rangée de 7 pastilles (871 px de large dans 556 px : défilement horizontal et libellés coupés à toutes les
   largeurs). Sans JS : <details>/<summary> natif ; avec JS : <button> + scrollspy (js/changer-extranet-cluster.js). */
.cx-pagenav {
    --cx-offset: 70px; /* hauteur du header fixe ; surchargée par .cx lorsque le composant est dans le cluster */
    position: sticky; top: var(--cx-offset, 70px); z-index: 5; margin: 0 0 14px; padding: 6px 15px; box-sizing: border-box;
    background: var(--bg-content); container-type: inline-size; container-name: pagenav;
}
.cx .cx-pagenav { margin: 0 -15px 14px; }
.cx-pagenav-details { position: relative; margin: 0; }
.cx-pagenav-capsule {
    position: relative; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; margin: 0; padding: 0 12px;
    box-sizing: border-box; list-style: none; cursor: pointer; text-align: left; font: inherit; color: var(--text-dark);
    background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-md);
    transition: border-color 160ms ease, box-shadow 160ms ease;
}
.cx-pagenav-capsule::-webkit-details-marker { display: none; }
.cx-pagenav-capsule:hover { border-color: var(--border-medium); }
.cx-pagenav-label { flex: 0 0 auto; font-family: 'copropole-light', sans-serif; font-size: 0.86em; color: var(--text-medium); white-space: nowrap; }
.cx-pagenav-sep { flex: 0 0 auto; color: var(--text-light); }
.cx-pagenav-current { flex: 1 1 auto; min-width: 0; font-family: 'copropole-semibold', sans-serif; font-size: 0.97em; color: var(--text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-pagenav-count { flex: 0 0 auto; font-family: 'copropole-regular', sans-serif; font-size: 0.82em; color: var(--text-medium); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cx-pagenav-chev { flex: 0 0 auto; width: 7px; height: 7px; margin: -3px 2px 0 2px; border-right: 2px solid var(--text-medium); border-bottom: 2px solid var(--text-medium); transform: rotate(45deg); transition: transform 160ms ease; }
.cx-pagenav-capsule[aria-expanded="true"] .cx-pagenav-chev, .cx-pagenav-details[open] .cx-pagenav-chev { transform: translateY(3px) rotate(-135deg); }
/* Piste de progression : 3 px, collée au bord bas de la capsule (hauteur visible de l'ensemble = 44 px) */
.cx-pagenav-track { position: absolute; left: 15px; right: 15px; bottom: 6px; height: 3px; overflow: hidden; border-radius: 0 0 var(--radius-md) var(--radius-md); background: transparent; pointer-events: none; }
.cx-pagenav-bar { display: block; width: 100%; height: 100%; background: var(--primary); transform-origin: left center; transform: scaleX(0); transition: transform 220ms ease; }
/* Panneau (popover) : ancré sous la capsule, jamais plein écran */
.cx-pagenav-list {
    position: absolute; z-index: 6; top: calc(100% + 4px); left: 0; width: min(100%, 320px); max-height: calc(100vh - var(--cx-offset) - 96px); overflow-y: auto;
    list-style: none; margin: 0; padding: 4px; background: var(--bg-card); border: 1px solid var(--border-medium); border-radius: var(--radius-md); box-shadow: var(--shadow-md);
}
.cx-pagenav-list[hidden] { display: none; }
.cx-pagenav-list li { margin: 0; padding: 0; }
.cx-pagenav-list a {
    display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: var(--radius-sm);
    font-family: 'copropole-regular', sans-serif; color: var(--text-dark); text-decoration: none;
}
.cx-pagenav li::before { content: none; }
.cx-pagenav-list a::before { content: ''; flex: 0 0 1.1em; text-align: center; color: var(--primary); }
.cx-pagenav-list a:hover { background: var(--bg-light); text-decoration: none; color: var(--text-dark); }
.cx-pagenav-list a[aria-current="true"] { font-family: 'copropole-semibold', sans-serif; color: var(--primary); background: var(--bg-light); }
.cx-pagenav-list a[aria-current="true"]::before { content: '✓'; } /* l'état actif n'est jamais porté par la couleur seule : coche + gras + aria-current */
/* Avec JS : un vrai <button> remplace le résumé ; le <details> n'est plus qu'un conteneur de liste */
.cx-pagenav.is-js .cx-pagenav-capsule:is(summary) { display: none; }
.cx-pagenav.is-js .cx-pagenav-details { position: static; }
.cx-pagenav.is-js .cx-pagenav-list { top: calc(100% - 6px + 4px); left: 15px; }
.cx-pagenav-trigger { appearance: none; -webkit-appearance: none; }
@media (max-width: 600px) { .cx-pagenav-list { width: auto; right: 0; } .cx-pagenav.is-js .cx-pagenav-list { right: 15px; width: auto; } }
/* Petits écrans : libellé « Sur cette page » discret AU-DESSUS de la section active (la section active n'est jamais masquée) */
@media (max-width: 480px) {
    .cx-pagenav { margin: 0 0 12px; padding: 6px 12px; }
    .cx .cx-pagenav { margin: 0 -12px 12px; }
    .cx-pagenav-track { left: 12px; right: 12px; }
    .cx-pagenav.is-js .cx-pagenav-list { left: 12px; right: 12px; }
    .cx-pagenav-capsule { display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: "lab cnt chev" "cur cnt chev"; align-items: center; column-gap: 8px; row-gap: 0; padding: 3px 12px; height: 48px; min-height: 48px; } /* hauteur constante : pas de décalage quand la section active passe sur 2 lignes */
    .cx-pagenav-label { grid-area: lab; font-size: 0.66em; letter-spacing: 0.07em; text-transform: uppercase; line-height: 1.2; }
    .cx-pagenav-sep { display: none; }
    .cx-pagenav-current { grid-area: cur; line-height: 1.15; font-size: 0.9em; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } /* libellé long : 2 lignes plutôt qu'une coupure ; libellé complet dans le panneau */
    .cx-pagenav-count { grid-area: cnt; }
    .cx-pagenav-chev { grid-area: chev; }
}

/* --- Mode « inline » (mode auto) : liens séparés par « · », trait sous la rubrique active, sans pastille ni bordure ----------
   Décidé par le JS sur la largeur RÉELLE du conteneur (les libellés tiennent-ils ?) ; repli sans JS : requête de conteneur. */
.cx-pagenav-inline { display: none; }
.cx-pagenav-inline { list-style: none; margin: 0; padding: 0; gap: 0; flex-wrap: nowrap; align-items: center; justify-content: center; }
.cx-pagenav-inline li { margin: 0; padding: 0; display: flex; align-items: center; flex: 0 0 auto; }
.cx-pagenav-inline li + li::before { content: '·'; position: static; display: inline-block; width: auto; height: auto; margin: 0 10px; background: none; border-radius: 0; color: var(--text-medium); } /* la règle globale article ul li::before positionne en absolu */
.cx-pagenav-inline a {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 2px; white-space: nowrap; font-size: 13px;
    font-family: 'copropole-regular', sans-serif; color: var(--text-medium); text-decoration: none; border-bottom: 2px solid transparent;
    transition: color 160ms ease, border-color 160ms ease;
}
.cx-pagenav-inline a:hover { color: var(--text-dark); text-decoration: none; }
.cx-pagenav-inline a[aria-current="true"] { font-family: 'copropole-semibold', sans-serif; color: var(--text-dark); border-bottom-color: var(--primary); }
.cx-pagenav-inline a:focus-visible { outline: 3px solid var(--primary-light); outline-offset: 2px; }
.cx-pagenav.is-inline .cx-pagenav-inline { display: flex; }
.cx-pagenav.is-inline .cx-pagenav-details, .cx-pagenav.is-inline .cx-pagenav-trigger, .cx-pagenav.is-inline .cx-pagenav-track { display: none; }
.cx-pagenav.is-inline { background: var(--bg-content); border-bottom: 1px solid var(--border-light); }
.cx-pagenav.is-measuring .cx-pagenav-inline { display: flex; width: max-content; visibility: hidden; position: absolute; }
@container pagenav (min-width: 554px) { /* repli SANS JS pour 3 libellés (largeur naturelle mesurée : 549 px) ; avec JS, la mesure réelle décide */
    .cx-pagenav[data-cx-mode="auto"]:not(.is-js) .cx-pagenav-inline { display: flex; }
    .cx-pagenav[data-cx-mode="auto"]:not(.is-js) .cx-pagenav-details, .cx-pagenav[data-cx-mode="auto"]:not(.is-js) .cx-pagenav-track { display: none; }
}
.cx-pagenav-target { scroll-margin-top: calc(var(--cx-offset, 70px) + 62px); }


/* --- Défilement doux des ancres (hors mouvement réduit) ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) { html:has(.cx-pagenav) { scroll-behavior: smooth; } }

/* --- Focus visible ------------------------------------------------------------------------------------------------- */
.cx-pagenav-capsule:focus-visible, .cx-pagenav-list a:focus-visible { outline: 3px solid var(--primary-light); outline-offset: 2px; }

/* --- Mouvement réduit : plus aucune transition ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .cx-pagenav, .cx-pagenav *, .cx-pagenav *::before { transition: none !important; animation: none !important; }
}

/* --- Impression : navigation masquée -------------------------------------------------------------------------------- */
@media print { .cx-pagenav { display: none; } }