/*
 * Punchbox — (c) 2026 Alexis Clement. Tous droits reserves.
 * Logiciel proprietaire. Toute reproduction ou diffusion interdite sans
 * autorisation ecrite.
 */

/* nav.css — barre de navigation UNIQUE, identique sur les dix pages.
 *
 * Feuille DÉDIÉE et AUTONOME : chargée par toutes les pages, y compris
 * remboursement.html qui n'utilise pas style.css (styles inline). Pour cela on
 * ne s'appuie que sur des jetons partout présents (--texte, --fond, --carte,
 * --bordure, --laiton, --discret, --vert) et on donne un repli var(--x, …) aux
 * jetons qui manquent sur la page autonome (--lien, --focus, --surface,
 * --rayon-s). Aucune ressource tierce, aucun pixel, aucune police d'icône :
 * les pictogrammes sont des SVG écrits dans le HTML, au trait, en currentColor.
 *
 * CHARTE :
 *  - pages publiques = PLAT (aucun enfoncement, aucun dégradé bombé ; le bombé
 *    est réservé aux boutons d'action .bouton-plein, absents de la barre) ;
 *  - cible tactile ≥ 44px sur tout élément cliquable ;
 *  - anneau de focus visible (hérité de :focus-visible, renforcé ici) ;
 *  - le panneau du burger POUSSE le contenu (aucune superposition, aucun voile,
 *    aucun tiroir, aucun ascenseur interne) ;
 *  - RTL : la barre s'inverse (icônes à droite, burger à gauche) via les
 *    propriétés logiques et le sens du flux flex.
 */

/* Jetons de repli : utilisés seulement là où style.css ne les définit pas
   (page remboursement autonome). Sur les autres pages, les vraies valeurs de
   style.css priment. */
:root {
  --pbnav-lien: var(--lien, var(--laiton-fonce, #7e6410));
  --pbnav-focus: var(--focus, var(--laiton, #7e6410));
  --pbnav-surface: var(--surface, var(--carte, #fff));
  --pbnav-rayon: var(--rayon-s, var(--rayon, 2px));
}

/* --------------------------------------------------------------------------
   Conteneur : barre collante + panneau. Le panneau vit DANS l'en-tête, en flux
   normal ; l'élément sticky réserve sa hauteur, donc l'ouverture pousse le
   contenu au lieu de le recouvrir.
   -------------------------------------------------------------------------- */
.pbnav {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--fond) 90%, transparent);
  backdrop-filter: saturate(1.3) blur(8px);
  border-bottom: 1px solid var(--bordure);
}

.pbnav-inner {
  max-width: var(--largeur, 1120px); margin: 0 auto;
  padding: 8px 20px;
  display: flex; align-items: center; gap: 10px;
}

/* Marque à l'extrémité de tête (gauche en LTR, droite en RTL). */
.pbnav-marque {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; padding-inline: 2px;
  text-decoration: none; color: var(--texte); font-weight: 800;
  letter-spacing: .05em; flex: none;
}
.pbnav-marque .marque-nom { font-size: 1rem; }
.pbnav .pastille {
  width: 11px; height: 11px; border-radius: 50%; background: var(--vert);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--vert) 22%, transparent); flex: none;
}

/* --------------------------------------------------------------------------
   Trois onglets toujours visibles (Accueil, Studio, Soutenir).
   -------------------------------------------------------------------------- */
.pbnav-onglets {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: 2px;
}
.pbnav-onglet {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 6px 12px;
  border: 1px solid transparent; border-radius: var(--pbnav-rayon);
  color: var(--texte); text-decoration: none; font: inherit; font-size: .95rem;
  white-space: nowrap; cursor: pointer;
}
.pbnav-onglet .pic { width: 1.4rem; height: 1.4rem; flex: none; }
.pbnav-onglet:hover { border-color: var(--bordure); background: var(--pbnav-surface); }
/* Page courante : accent laiton lisible, filet inférieur discret. */
.pbnav-onglet[aria-current="page"] {
  color: var(--pbnav-lien); font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--laiton);
}
/* « Soutenir » légèrement mis en avant : c'est le cœur du modèle, il ne doit
   plus être un bouton mort. Reste PLAT, dans la charte. */
.pbnav-onglet[data-nav="soutien"] { color: var(--pbnav-lien); }
.pbnav-onglet[data-nav="soutien"]:hover { border-color: var(--laiton); }

/* --------------------------------------------------------------------------
   Burger à l'extrémité de fin (droite en LTR, gauche en RTL).
   -------------------------------------------------------------------------- */
.pbnav-burger {
  margin-inline-start: auto; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 8px 12px;
  border: 1px solid var(--bordure); border-radius: var(--pbnav-rayon);
  background: var(--carte); color: var(--texte); cursor: pointer; font: inherit;
}
.pbnav-burger:hover { border-color: var(--discret); }
.pbnav-burger .pic { width: 1.5rem; height: 1.5rem; }
/* Une seule icône visible : « ouvrir » (barres) fermé, « fermer » (croix) ouvert. */
.pbnav-burger .pbnav-ico-fermer { display: none; }
.pbnav-burger[aria-expanded="true"] .pbnav-ico-ouvrir { display: none; }
.pbnav-burger[aria-expanded="true"] .pbnav-ico-fermer { display: inline-block; }

/* --------------------------------------------------------------------------
   Panneau : POUSSE le contenu (aucune superposition). Fermé = [hidden].
   Aucun ascenseur interne : le contenu tient sans overflow.
   -------------------------------------------------------------------------- */
.pbnav-panneau { border-top: 1px solid var(--bordure); background: var(--fond); }
.pbnav-panneau[hidden] { display: none; }
.pbnav-panneau-inner {
  max-width: var(--largeur, 1120px); margin: 0 auto;
  padding: 14px 20px 18px;
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 34px;
}
.pbnav-groupe { display: flex; flex-direction: column; gap: 8px; min-width: 12rem; }
.pbnav-groupe-titre {
  font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--discret); margin: 2px 0;
}

/* Entrées « compte » (liens et bouton de déconnexion) : même gabarit. */
.pbnav-item {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 14px;
  border: 1px solid var(--bordure); border-radius: var(--pbnav-rayon);
  background: var(--carte); color: var(--texte);
  text-decoration: none; font: inherit; font-size: .95rem; cursor: pointer;
  text-align: start;
}
.pbnav-item:hover { border-color: var(--discret); color: var(--texte); }
.pbnav-item .pic { width: 1.25rem; height: 1.25rem; flex: none; }

/* Réglages : langue + thème, chacun avec son libellé. */
.pbnav-reglage { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.pbnav-reglage-lbl { color: var(--secondaire); font-size: .92rem; min-width: 4.5rem; }
/* Le sélecteur de langue et le bouton de thème réutilisent les styles de
   style.css (.pb-lang-select, .btn-theme). Repli minimal pour la page autonome
   (remboursement.html, sans style.css) : la barre reste utilisable. On garantit
   la cible tactile de 44px de la charte (leurs valeurs par défaut sont ~38px). */
.pbnav .pb-lang { display: inline-flex; }
.pbnav .btn-theme { min-width: 44px; min-height: 44px; }
.pbnav .pb-lang-select { min-height: 44px; }
.pbnav .btn-theme .pic { width: 1.25rem; height: 1.25rem; }
/* Bascule d'icône soleil/lune selon le thème — indispensable sur la page
   autonome où style.css (qui porte ces règles) n'est pas chargé. */
.pbnav .btn-theme .ico-sombre { display: none; }
[data-theme="sombre"] .pbnav .btn-theme .ico-clair { display: none; }
[data-theme="sombre"] .pbnav .btn-theme .ico-sombre { display: inline-block; }

/* Liens légaux : disposition souple, chacun ≥ 44px de haut. */
.pbnav-legal { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.pbnav-legal a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 6px 12px; border-radius: var(--pbnav-rayon);
  color: var(--secondaire); text-decoration: none; font-size: .92rem;
}
.pbnav-legal a:hover { color: var(--texte); text-decoration: underline; }

/* Focus clavier renforcé (au cas où la page hôte ne le définirait pas). */
.pbnav a:focus-visible,
.pbnav button:focus-visible,
.pbnav .pb-lang-select:focus-visible {
  outline: 3px solid var(--pbnav-focus); outline-offset: 2px; border-radius: 2px;
}

/* --------------------------------------------------------------------------
   RTL — arabe et hébreu : icônes à droite, burger à gauche. Le flux flex et les
   propriétés logiques s'en chargent ; on ne redéclare rien de directionnel.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Adaptations d'écran.
   Mobile (≤ 600px) : onglets en icône seule (libellé masqué).
   Tablette portrait (601–768px) : ROTATION de la disposition du panneau —
   les groupes se rangent en colonne au lieu de s'étaler en ligne (pas de
   réduction du contenu).
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .pbnav-panneau-inner { flex-direction: column; gap: 14px; }
  .pbnav-groupe { width: 100%; min-width: 0; }
  .pbnav-legal { gap: 2px 6px; }
}
@media (max-width: 600px) {
  .pbnav-inner { gap: 6px; padding-inline: 14px; }
  .pbnav-onglet { padding: 6px 10px; }
  .pbnav-onglet .pbnav-lbl { display: none; }   /* icône seule sur mobile */
  .pbnav-marque .marque-nom { display: none; }   /* on garde la pastille */
  .pbnav-marque { padding-inline: 4px; }
}

/* Mouvement réduit : aucune transition (le panneau bascule en display, sans
   animation). On neutralise toute transition résiduelle. */
@media (prefers-reduced-motion: reduce) {
  .pbnav, .pbnav * { transition: none !important; }
}