/* ═══════════════════════════════════════════════════════════════
   css/header-public-1-0.css
   Header public unifié — Chantier "Optimisation des mises en page"
   Phase 1 : socle.

   ⚠️ À charger APRÈS style-3-6.css dans include/head.php.
   Ce fichier ne redéclare volontairement PAS .page-header--sticky,
   .page-header-top, .page-header-left, .page-header-controls,
   .page-filters, .type-header-icon, .index-total, .subtitle,
   .search-bar, .btn-favori, .btn-print, .btn-back-origin,
   .steps-indicator — ces classes existent déjà dans style-3-6.css
   et sont réutilisées telles quelles par include/header-public.php.

   Ce fichier contient uniquement :
     1. Les composants qui n'existaient pas encore (zone D, B3, B9, C4)
     2. Les corrections de comportement actées avec Patrick :
        - seuil de bascule header → sticky : 900px (pas 600, pas 768…)
        - B4 (nav) toujours en dernier, à droite, en B
        - zone C : deux groupes écartés aux extrémités en desktop
        - A6 restreint desktop/tablette paysage sur demande (panneau.php)
   ═══════════════════════════════════════════════════════════════ */


/* ── Neutralise le padding de base de .page-header--sticky (12px 20px,
   défini dans style-3-6.css). En prod, chaque page l'annulait déjà via un
   style="padding:0 !important" écrit en dur (favoris.php, panneau.php) —
   sauf diagnostic.php, qui n'avait jamais eu cet override et gardait la
   valeur de base : c'est ce qui causait l'écart visuel constaté. La vraie
   cause était un padding:0 !important sur .main-content propre à cette
   page, qui bloquait le padding de base — corrigé directement dans le
   fichier plutôt qu'ici. ── */
.page-header--sticky {
  padding: 0 0 10px;
}

/* ── Typographie du header : la règle globale style-3-6.css ligne 887
   (@media max-width:900px { * { font-size:.85rem } }) écrase TOUT sans
   distinction sous 900px, y compris les h1. On restaure une hiérarchie
   propre au header, sans toucher au fichier global. ── */
.page-header-left h1 { font-size: 1.5rem; margin: 0; line-height: 1.25; }
.page-header-left .subtitle { font-size: .78rem; }
.index-total { font-size: .8rem; }
.header-nav .count { font-size: .82rem; }
.btn-filter, .btn-custom-action, .btn-back-text span:not(.mat-icon) { font-size: .75rem; }

@media (max-width: 900px) {
  .page-header-left h1 { font-size: 1.4rem; }
  .page-header-left .subtitle { font-size: .85rem; }
  /* La règle globale style-3-6.css (* { font-size:.85rem } ≤900px) matche
     aussi ces <span> enfants du h1 (contrairement au texte "brut" du h1
     classique, qui n'est qu'un nœud texte et échappe à *) — une valeur
     explicitement matchée gagne toujours sur l'héritage du h1, d'où le
     besoin de la reforcer ici, en écho à .page-header-left h1 ci-dessus. */
  .page-switch-tab, .page-switch-sep { font-size: 1.4rem; }
}
@media (max-width: 600px) {
  .page-header-left h1 { font-size: 1.25rem; }
  .page-switch-tab, .page-switch-sep { font-size: 1.25rem; }
}

/* ── A7 : sélecteur 2 onglets vers une page soeur (ex. monvelo ↔ heatmap),
   remplace purement le h1 le sous-titre reste seul à porter le contexte de
   page. Les onglets sont DANS le h1 (pas à côté) : ils héritent ainsi
   automatiquement police/taille/poids/breakpoints du h1 sans dupliquer ces
   règles ici — si le style du h1 change un jour, le switch suit tout seul.
   Reste TOUJOURS visible (pas de masquage ≤900px, à la différence de
   .btn-custom-action juste en dessous) : repère de navigation entre 2 vues,
   pas une action B9 qui bascule en zone D. ── */
.page-switch-title {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
}
.page-switch-tab {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; color: var(--text-muted);
  transition: color .15s;
}
.page-switch-tab:not(.active):hover { color: var(--accent-blue); }
.page-switch-tab.active { color: var(--text-primary); cursor: default; }
.page-switch-sep { color: var(--text-muted); font-weight: 400; opacity: .4; }
/* Pastille d'icône : strictement .type-header-icon, sans retouche — même
   apparence que l'icône qui précédait le titre auparavant. */
.page-switch-icon { flex-shrink: 0; }

/* ── B3 : lien retour texte (nouveau composant) ───────────────── */
.btn-back-text {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 14px; border-radius: 10px;
  background: var(--bg-surface); border: 1px solid rgba(255,255,255,.1);
  color: var(--text-primary); text-decoration: none; font-size: .82rem;
  flex-shrink: 0; white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.btn-back-text:hover { background: rgba(61,142,248,.12); border-color: rgba(61,142,248,.35); }
.btn-back-text .mat-icon { font-size: 18px; }

/* ── B9 : actions maison, même apparence que les boutons de filtre (zone C) ── */
.btn-custom-action {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid rgba(255,255,255,.1); background: var(--bg-card); color: var(--text-muted);
  padding: 0 13px; height: 34px; border-radius: 999px; font-size: .75rem; cursor: pointer;
  white-space: nowrap;
}
.btn-custom-action .mat-icon { font-size: 15px; }
.btn-custom-action:hover { color: var(--text-primary); border-color: var(--accent-blue); }

/* ── C4 : onglets — fusionnés avec .btn-filter (aucun autre consommateur
   de .btn-tab, inutile de garder deux classes visuellement équivalentes).
   Juste un peu d'espace pour l'icône optionnelle (ex. onglets vélos). ── */
.btn-filter .mat-icon { font-size: 15px; margin-right: 3px; vertical-align: -2px; }
.index-filters-tabs, .index-filters-panels { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── B4 : la nav est toujours en dernier, à droite, en B (desktop/tablette paysage) ──
   Habillage repris tel quel de .favoris-page-nav / .btn-card-nav / .card-counter
   (style-3-6.css, déjà utilisés par index.php) plutôt qu'un style générique inventé.
   Masquée tant qu'il n'y a qu'une seule page — chaque page migrée ajoute/retire
   la classe .has-pagination sur <body> selon le nombre de pages réel. Sans ce
   verrou, header-nav/sticky-nav restent visibles en permanence (même à "1/1"),
   y compris sur les pages qui remplacent la pagination mobile par un scroll
   infini (index.php) : dans ce cas .has-pagination n'est simplement jamais
   posée en mobile, donc plus aucun bouton de pagination n'apparaît là-bas. */
.page-header-controls .header-nav { order: 100; }
body:not(.has-pagination) #header-nav,
body:not(.has-pagination) #sticky-nav { display: none !important; }
.header-nav {
  display: flex; align-items: center; gap: 4px;
}
.header-nav .mat-icon {
  background: rgba(255,255,255,0.08);
  border: none;
  color: var(--text-primary);
  font-size: 1.2rem;
  width: 38px; height: 38px;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.header-nav .mat-icon:hover { background: rgba(61,142,248,0.2); }
#header-nav-next { background: var(--accent-blue); } /* équivalent de .btn-card-nav.primary */
#header-nav-next:hover { background: #5aa3ff; }
.header-nav .count {
  padding: 0 6px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ── Zone C : type à gauche, catégorie à droite en desktop/tablette paysage ── */
.page-filters { justify-content: space-between; flex-wrap: wrap; }
.btn-filter { margin-right: 6px; margin-bottom: 6px; }
.page-filters a { text-decoration: none; } /* liens réels (index.php, v3d-index.php…) enveloppant des .btn-filter */

/* ── A6 restreint desktop/tablette paysage sur demande (cas panneau.php) ── */
@media (max-width: 900px) {
  .steps-indicator.steps-desktop-only { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   ZONE D — barre sticky mobile
   Habillage repris à l'identique de #mobile-sticky-bar / .sticky-actions /
   .sticky-nav / .sticky-btn-icon / #sticky-btn-next / #sticky-counter tels
   qu'ils existaient dans viewer.php — adapté uniquement aux ids générés par
   header-public.php (sticky-nav-prev/next/count au lieu de sticky-btn-*).
   Générée par include/header-public.php à partir de la même config que B :
   jamais à dupliquer/synchroniser à la main. */
.mobile-sticky-bar {
  display: none;
  align-items: center;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 400;
  height: 56px;
  padding: 0 10px;
  background: var(--bg-deep);
  border-top: 1px solid rgba(255,255,255,.09);
  backdrop-filter: blur(8px);
  justify-content: space-between;
  gap: 6px;
}
.mobile-sticky-bar a { text-decoration: none; }
.mobile-sticky-bar .sticky-actions {
  display: flex; align-items: center; gap: 2px; flex-shrink: 0;
}
.mobile-sticky-bar .sticky-nav {
  display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}

/* Boutons icône (retour, aide, favori, print, actions maison) */
.btn-icon-sticky {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--text-primary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: .75;
  transition: background .15s, opacity .15s;
}
.btn-icon-sticky:active,
.btn-icon-sticky:hover { background: rgba(255,255,255,.1); opacity: 1; }
.btn-icon-sticky.favori.active { opacity: 1; color: #f5c518; }
.btn-icon-sticky:disabled { opacity: .25; cursor: default; }
.btn-icon-sticky .mat-icon { font-size: 20px; }

/* Variante avec texte (B9 actions maison, ex. monvelo import/export) :
   même habillage que .btn-icon-sticky mais en pilule, largeur auto,
   icône + libellé côte à côte. */
.btn-icon-sticky--labeled {
  width: auto;
  border-radius: 999px;
  padding: 0 12px;
  gap: 6px;
}
.btn-icon-sticky-label {
  font-size: .72rem;
  white-space: nowrap;
}
/* Écrans très étroits : on repasse en icône seule pour éviter le débordement
   de la barre si plusieurs actions maison labellisées coexistent. */
@media (max-width: 360px) {
  .btn-icon-sticky--labeled { width: 38px; padding: 0; }
  .btn-icon-sticky-label { display: none; }
}

/* Prev (icône neutre) / Next (accent bleu plein) dans .sticky-nav */
#sticky-nav-prev {
  width: 38px; height: 38px; border-radius: 50%;
  background: transparent; color: var(--text-primary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: .75; transition: background .15s, opacity .15s;
}
#sticky-nav-prev:hover { background: rgba(255,255,255,.1); opacity: 1; }
#sticky-nav-next {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(61,142,248,.85); color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s;
}
#sticky-nav-next:active { background: rgba(61,142,248,1); }
#sticky-nav-count {
  font-size: .8rem; font-weight: 600;
  color: var(--text-muted);
  min-width: 36px; text-align: center;
}

/* ═══════════ Seuil unifié 900px : bascule header → sticky ═══════════
   Remplace, pour toute page migrée vers header-public.php, les seuils
   dispersés observés dans l'audit (768/769, 640, 780, 960, 1100, 680, 400, 950). */
@media (max-width: 900px) {
  .page-header-top { flex-direction: column; align-items: stretch; }

  .page-header-controls .btn-back-origin,
  .page-header-controls .btn-back-text,
  .page-header-controls #btn-aide-visite,
  .page-header-controls #btn-print,
  .page-header-controls .btn-favori,
  .page-header-controls .header-nav,
  .page-header-controls .btn-custom-action,
  .page-header-controls #btn-atelier-logo {
    display: none;
  }

  .page-filters { justify-content: flex-start; flex-wrap: wrap; }

  .mobile-sticky-bar { display: flex; }
  body:has(.mobile-sticky-bar) .main-content { padding-bottom: 56px; } /* évite que la barre sticky recouvre le bas du contenu — scindé sur la présence réelle de la barre, pas juste la largeur d'écran (cf. diagnostic.php, qui n'a pas de sticky-bar) */}

/* ── ≤600 : zone C passe de 1 ligne à 2 lignes (type puis catégorie) ── */
@media (max-width: 600px) {
  .page-filters { flex-direction: column; align-items: stretch; gap: 10px; }
  .index-filters-types, .index-filters-cats, .index-filters-panels, .index-filters-tabs { flex-wrap: wrap; }
  .index-total { display: none; }
}