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

/* nav.css — bandeau UNIQUE, identique sur TOUTES les pages (mission
 * bandeau-unique-et-architecture, 6 septembre 2026 — remplace le panneau
 * déroulant de la mission punchbox-navigation).
 *
 * ⚠ DÉCISION DU FONDATEUR, mots exacts : « ce bandeau deroulant, il faut
 * qu'il disparaisse TOTALEMENT de tous les workflows, de tout le site,
 * INTEGRALEMENT. » (leçon 014 : déjà proscrit une fois, mal consigné —
 * NE PAS réintroduire un panneau qui pousse le contenu.)
 *
 * 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 :
 *  - SUR ORDINATEUR : tous les onglets et réglages À PLAT, AUCUN déroulant ;
 *  - SUR MOBILE : un burger, ET SEULEMENT sur mobile — le menu ouvert se
 *    SUPERPOSE au contenu (position absolue), il ne pousse RIEN ; la largeur
 *    du document reste égale à celle de la fenêtre, menu ouvert ou fermé ;
 *  - cible tactile ≥ 44px sur tout élément cliquable ;
 *  - anneau de focus visible (hérité de :focus-visible, renforcé ici) ;
 *  - RTL : la barre s'inverse (icônes à droite, burger à gauche) via les
 *    propriétés logiques et le sens du flux flex.
 *
 * MÉCANISME (pas de duplication de DOM, pas de re-parentage JS) : le bloc
 * `.pbnav-nomade` (onglets + réglages) est un SEUL jeu d'éléments. Sur
 * ordinateur il vit en flux normal, dans la barre, à plat. Sur mobile, la
 * SEULE chose qui change est sa position CSS : `position:absolute` ancrée au
 * `.pbnav-barre` (position:relative), donc affichée SOUS la barre, EN
 * SUPERPOSITION (les éléments suivants du document ne bougent pas d'un
 * pixel). Le burger ne fait que basculer une classe (`.est-ouvert`) — aucun
 * `hidden` toggling qui pourrait entrer en conflit entre les deux régimes.
 */

: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));
}

.pbnav {
  position: sticky; top: 0; z-index: 30;
}

.pbnav-barre {
  position: relative;   /* ancre le panneau mobile en superposition */
  background: color-mix(in srgb, var(--fond) 90%, transparent);
  backdrop-filter: saturate(1.3) blur(8px);
  border-bottom: 1px solid var(--bordure);
}

/* Largeur DÉDIÉE au bandeau, distincte de --largeur (mesure de lecture du
   contenu) : le bandeau est du chrome de navigation, pas de la prose.
   ⚠ 1320px (choisi lors d'une mission antérieure) s'est révélé TROP ÉTROIT
   pour le pire cas CONNECTÉ (marque + 5 onglets libellés + 6 réglages) une
   fois celui-ci vraiment mesuré (mission bandeau-et-jauge, 8 septembre
   2026, Puppeteer, .pbnav-inner en max-width:none/nowrap) : besoin réel
   ≈1598px (les 5 onglets ont maintenant tous une icône, voir plus bas —
   ré-mesuré après leur ajout). Plafonné SOUS ce besoin, l'ancien 1320px
   forçait les réglages à passer en 2e ligne désalignée sur TOUTE largeur
   d'écran, même immense — ce n'était pas une zone morte entre deux seuils,
   c'était un plafond bas qui ne laissait JAMAIS le bandeau tenir sur une
   ligne passé le seuil mobile. 1650px = besoin réel + marge de sécurité
   (rendu/scrollbar). */
.pbnav-inner {
  max-width: min(1650px, 100%); margin: 0 auto;
  padding: 8px 20px;
  display: flex; align-items: center; gap: 12px;
}

/* 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;
}

/* --------------------------------------------------------------------------
   .pbnav-nomade : les CINQ onglets + les réglages (langue, thème, compte,
   réinitialiser). « Nomade » car sa position CSS change de régime selon la
   largeur — jamais son contenu, jamais son ordre dans le DOM.
   -------------------------------------------------------------------------- */
.pbnav-nomade {
  display: flex; align-items: center; gap: 14px;
  flex: 1 1 auto; min-width: 0;
  /* Débordement CONNECTÉ (mission console-lot-correctifs, 06/09/2026) : « Mon
     compte » + « Se déconnecter » remplacent « Se connecter » (un élément de
     plus, plus long) et ne tiennent plus à côté des cinq onglets ≥1366px.
     `.pbnav-onglets` et `.pbnav-controles` bouclent chacun DÉJÀ en interne
     (flex-wrap:wrap) mais SANS wrap ici, un débordement forçait leurs items
     à s'éparpiller sur PLUSIEURS lignes mélangées (mesuré : 4 hauteurs de
     ligne distinctes). En autorisant CE conteneur à passer à la ligne,
     `.pbnav-controles` bascule EN BLOC sur une 2e ligne propre quand il ne
     tient plus à côté des onglets — jamais un panneau qui pousse le contenu
     (règle du fondateur) : le bandeau reste sticky, grandit simplement de
     la hauteur d'une ligne. */
  flex-wrap: wrap; row-gap: 4px;
}

.pbnav-onglets {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
}
.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); }
.pbnav-onglet[aria-current="page"] {
  color: var(--pbnav-lien); font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--laiton);
}
.pbnav-onglet[data-nav="soutien"] { color: var(--pbnav-lien); }
.pbnav-onglet[data-nav="soutien"]:hover { border-color: var(--laiton); }

/* Réglages : langue, thème, compte, réinitialiser — à plat, après les onglets. */
.pbnav-controles {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-inline-start: auto;
}
.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; }
/* #btn-parametres (mission console-lot-correctifs) : un bouton-icône sans
   texte n'a pas le line-height d'un bouton texte pour atteindre 44px tout
   seul (mesuré : 42px sans ce min-height, même piège que .btn-theme ici). */
.pbnav .btn-parametres { min-width: 44px; min-height: 44px; }
.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; }

.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;
  white-space: nowrap;
}
.pbnav-item:hover { border-color: var(--discret); color: var(--texte); }

/* Bouton « Réinitialiser » : rouge SOBRE en permanence, pas seulement au
   survol (mission console-lot-correctifs, 06/09/2026 — le geste efface
   maintenant aussi des données SERVEUR, il doit se voir avant qu'on clique,
   pas seulement au moment du clic). Rouge SOURD délibérément choisi, PAS le
   rouge cru des tokens --err-* (eux-mêmes déjà « jamais de rouge cru », mais
   un ton ambre — voir style.css) : cette action est irréversible d'une façon
   qu'aucune autre du bandeau ne l'est, elle mérite sa propre teinte, dont
   l'intensité reste posée, jamais criarde (arbitrage A103, 3 septembre : le
   registre ALARME est jugé ANXIOGÈNE pour un outil utilisé toute la journée). */
:root { --reinit-rouge: #a4453f; }
[data-theme="sombre"] { --reinit-rouge: #d98b86; }
.pbnav .btn-reinitialiser {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 14px;
  border: 1px solid color-mix(in srgb, var(--reinit-rouge) 45%, var(--bordure));
  border-radius: var(--pbnav-rayon);
  background: color-mix(in srgb, var(--reinit-rouge) 6%, var(--carte));
  color: var(--reinit-rouge);
  font: inherit; font-size: .95rem; cursor: pointer; white-space: nowrap;
}
.pbnav .btn-reinitialiser .pic { width: 1.1rem; height: 1.1rem; flex: none; }
.pbnav .btn-reinitialiser:hover { border-color: var(--reinit-rouge); background: color-mix(in srgb, var(--reinit-rouge) 12%, var(--carte)); }

/* Retour visible après réinitialisation (voir web/js/reinitialisation.js). */
.pbnav .reinit-etat {
  margin: 0; font-size: .85rem; color: var(--secondaire, var(--discret));
  flex-basis: 100%;
}

/* --------------------------------------------------------------------------
   Burger — INVISIBLE sur ordinateur. N'existe, visuellement et au clavier,
   que sous le seuil mobile.
   -------------------------------------------------------------------------- */
.pbnav-burger {
  display: none;
  margin-inline-start: auto; flex: none;
  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; }
.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; }

/* 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;
}

/* --------------------------------------------------------------------------
   RÉGIME MOBILE — sous le seuil : burger visible, .pbnav-nomade devient un
   panneau EN SUPERPOSITION (position absolue, ancré à .pbnav-barre qui fait
   toute la largeur de la fenêtre — jamais à .pbnav-inner qui est centré et
   plus étroit). Fermé par défaut : `display:none` tant que `.est-ouvert`
   n'est pas posé par nav.js.
   -------------------------------------------------------------------------- */
/* ⚠ SEUIL REMONTE DE 900 A 1280 px LE 8 SEPTEMBRE (matin), PUIS CORRIGE LE
   8 SEPTEMBRE (apres-midi, mission bandeau-et-jauge) — le premier correctif
   n'a pas suffi : le fondateur a constate le defaut PERSISTANT apres coup.
   Mesure (Puppeteer, .pbnav-inner en max-width:none/nowrap, pire cas
   CONNECTE = marque + 5 onglets + 6 reglages ; TROIS des cinq onglets
   ["Devenir testeur", "Manuel", "Architecture"] n'avaient PAS d'icone —
   corrige au passage, meme mission, sinon un palier "icones seules"
   les aurait rendus des boutons vides) :
     - besoin en MODE NOMADE (icones seules, .pbnav-lbl masques) : ≈1166px ;
     - besoin en MODE A PLAT LIBELLE (onglets avec texte) : ≈1598px.
   Le vrai bug n'etait PAS le seuil du burger (1280px suffisait a distinguer
   mobile/ordinateur) mais `.pbnav-inner{max-width:1320px}` : plus ETROIT
   que le besoin reel, il forcait les reglages a boucler sur une 2e ligne
   desalignee AU-DELA de 1280px, quelle que soit la largeur reelle de
   l'ecran (verifie jusqu'a 2200px) — voir .pbnav-inner ci-dessus, corrige
   a 1650px.
   Seuil du burger redescendu a 1200px (besoin nomade + marge) : entre
   1200px et 1650px, un PALIER INTERMEDIAIRE (bloc suivant) fait perdre leurs
   libelles aux onglets — c'est la meme largeur nomade qui suffit desormais,
   sans passer par le burger. */
@media (max-width: 1200px) {
  .pbnav-burger { display: inline-flex; }

  .pbnav-nomade {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 4px;
    background: var(--fond); border-bottom: 1px solid var(--bordure);
    padding: 10px 20px 16px;
    max-height: 80vh;
    overflow-y: auto;
    z-index: 25;
  }
  .pbnav-nomade.est-ouvert { display: flex; }

  .pbnav-onglets { flex-direction: column; align-items: stretch; gap: 2px; }
  .pbnav-onglet { justify-content: flex-start; padding: 10px 8px; }

  .pbnav-controles {
    flex-direction: column; align-items: stretch; margin-inline-start: 0;
    gap: 6px; padding-top: 10px; border-top: 1px solid var(--bordure); margin-top: 6px;
  }
  .pbnav-item, .pbnav .btn-reinitialiser { justify-content: flex-start; width: 100%; }
  .pbnav .pb-lang, .pbnav .pb-lang-select { width: 100%; }
  .pbnav .btn-theme { width: 100%; justify-content: flex-start; padding-inline: 14px; }
  .pbnav .btn-theme .pic { margin-inline-end: 8px; }
}

/* PALIER INTERMEDIAIRE — entre le burger (1200px) et la largeur qui tient
   avec les libelles (1650px, cf. .pbnav-inner) : les CINQ onglets gardent
   leurs icones (chacun en a desormais une, en currentColor) et perdent
   SEULEMENT leur texte (.pbnav-lbl), ce qui libere ≈430px sans jamais passer
   au panneau superpose. Rien d'autre ne change : meme ligne, memes trois
   zones (marque / onglets / reglages), mode ordinateur À PLAT de bout en
   bout (charte nav.css, pas de panneau qui pousse ni superpose ici). */
@media (min-width: 1201px) and (max-width: 1650px) {
  .pbnav-onglet .pbnav-lbl { display: none; }
}

/* 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; }
}