/* ==========================================================================
   REFONTE HEADER — version déployée (phase 4C, validée le 21/07/2026)
   Feuille additive, préfixe qds-header : aucune collision avec l'ancien
   #navbar (classes disjointes). Chargée par toutes les pages migrées vers
   le nouveau header, ainsi que par web/demo-header-pilote.html (archive du
   prototype validé). Dépend de refonte-tokens.css. Zéro JavaScript
   obligatoire : le panneau compact fonctionne par checkbox + label
   (mécanisme déjà utilisé par le site) ; web/js/refonte-header.js ajoute
   Échap + synchronisation ARIA (repris à l'identique du prototype).

   Points de rupture du header (indépendants du reste du site) :
     < 700 px    : mobile     — logo + lien Formations + bouton Menu
     700–1039 px : compact    — logo + Formations + recherche + Contact
                                + bouton Menu
     1040–1199 px: desktop    — navigation complète, sans téléphone
     ≥ 1200 px   : desktop XL — navigation complète + téléphone

   Hiérarchie de l'agenda (décision fonctionnelle) : l'agenda n'est qu'un
   sous-ensemble de l'offre (sessions inter déjà programmées). Il n'apparaît
   plus dans la navigation principale ni dans les accès rapides : accès
   secondaire dans le panneau compact/mobile, juste après « Formations »,
   avec un traitement visuel atténué (.qds-header-panneau-secondaire).
   ========================================================================== */

/* Lien d'évitement (Phase 7B) — visible au focus clavier uniquement */
.skip-to-content {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.skip-to-content:focus,
.skip-to-content:focus-visible {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 10000;
  width: auto;
  height: auto;
  padding: 0.75rem 1.25rem;
  clip: auto;
  overflow: visible;
  white-space: normal;
  background: var(--qds-action, #bd3200);
  color: #fff;
  font-weight: 600;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  text-decoration: none;
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   1. Barre : structure et fond
   -------------------------------------------------------------------------- */
.qds-header {
  position: relative;
  z-index: 100;
  background-color: var(--qds-ivoire);
  border-top: 3px solid var(--qds-brique);
  border-bottom: 1px solid var(--qds-ardoise-100);
  font-family: var(--qds-font);
}

/* Variante sticky (activée par .qds-header--fixe sur la démo) */
.qds-header--fixe {
  position: sticky;
  top: 0;
}

/* Filet Art déco sous le liseré brique : tirets ambrés discrets */
.qds-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: repeating-linear-gradient(90deg,
    var(--qds-ambre) 0, var(--qds-ambre) 1.25rem,
    transparent 1.25rem, transparent 2.5rem);
  opacity: 0.55;
  pointer-events: none;
}

.qds-header-barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  max-width: var(--qds-conteneur);
  margin-inline: auto;
  padding-inline: var(--qds-gouttiere);
  min-height: 6rem;
}
/* --------------------------------------------------------------------------
   2. Logo (officiel, non modifié) + Repère du Nord en détail discret
   -------------------------------------------------------------------------- */
.qds-header-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
  padding-block: 0.5rem;
  text-decoration: none;
}
.qds-header-logo img {
  display: block;
  height: 5rem;
  width: auto;
}
/* Icône région Hauts-de-France (reprise du header actuel) */
.qds-header-logo .qds-header-region {
  height: 1.5rem;
  width: auto;
}
/* --------------------------------------------------------------------------
   3. Navigation principale (desktop ≥ 1040 px)
   -------------------------------------------------------------------------- */
/* Neutralise une règle héritée « nav{position:fixed;top:0;width:100%;
   background:rgba(255,255,255,.95);backdrop-filter:blur(8px);...} » présente
   dans le <style> interne de ~107 pages (héritage pré-refonte, écrite pour
   l'ancien <nav id="navbar"> via un sélecteur d'élément nu — jamais nettoyée).
   Phase 7A : reset EXPLICITEMENT ciblé (interdit : sélecteur nu « nav {…} »).
   Cibles inventoriées :
   - nav.qds-header-nav / .qds-header nav — navigation principale QDS
   - nav.qa-toc — sommaire catalogue ateliers (1 page)
   - nav.qds-ariane / nav.qds-sommaire — démos internes
   NON ciblé (sticky intentionnel, spécificité déjà supérieure) :
   - nav.breadcrumb-nav / nav.container.breadcrumb-nav — fils d'Ariane (44 pages)
   Les navigations secondaires hors de ces sélecteurs ne sont pas touchées. */
nav.qds-header-nav,
.qds-header nav,
nav.qa-toc,
nav.qds-ariane,
nav.qds-sommaire {
  position: static;
  top: auto;
  width: auto;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  z-index: auto;
  transition: none;
}

/* Corrige le décalage du fil d'Ariane sticky (nav.breadcrumb-nav) sur les
   fiches/pages qui en possèdent un : sa position collante dépend de la
   variable --nav-h, définie dans le <style> interne de chaque page pour
   correspondre à la hauteur de l'ANCIEN header (8 rem, 9 rem ≥768px). Le
   nouveau header mesure 6 rem + 3 px de liseré, quelle que soit la largeur :
   sans cette correction, un vide apparaissait entre le bas du header et le
   fil d'Ariane resté collé à l'ancienne hauteur pendant le défilement.
   Règle non conditionnelle, chargée après le <style> interne : l'emporte à
   spécificité égale sur la valeur d'origine, y compris sous sa propre
   media query (min-width:768px). */
:root {
  --nav-h: calc(6rem + 3px);
}

.qds-header-nav {
  display: none;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 0;
  /* 6 rubriques : la barre peut respirer davantage */
  gap: clamp(1.1rem, 2.2vw, 2rem);
}
@media (min-width: 1040px) {
  .qds-header-nav { display: flex; }
}

.qds-header-lien {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--qds-ardoise-800);
  font-weight: 500;
  font-size: 0.975rem;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--qds-duree-courte) var(--qds-courbe);
}
.qds-header-lien::after {
  content: "";
  position: absolute;
  bottom: 0.45rem;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--qds-brique);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--qds-duree-courte) var(--qds-courbe);
}
.qds-header-lien:hover { color: var(--qds-brique-profond); }
.qds-header-lien:hover::after { transform: scaleX(1); }

/* Lien actif (page courante) : brique + soulignement stable */
.qds-header-lien[aria-current="page"],
.qds-header-lien.qds-header-lien--actif {
  color: var(--qds-brique-profond);
  font-weight: 600;
}
.qds-header-lien[aria-current="page"]::after,
.qds-header-lien.qds-header-lien--actif::after {
  transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   4. Zone actions : accès rapides compacts, téléphone, recherche, contact
   -------------------------------------------------------------------------- */
.qds-header-actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-shrink: 0;
}
/* Accès rapides visibles en mode compact/tablette uniquement */
.qds-header-rapide {
  display: none;
  align-items: center;
  min-height: 44px;
  padding: 0 0.35rem;
  color: var(--qds-ardoise-800);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
}
.qds-header-rapide:hover { color: var(--qds-brique-profond); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 700px) and (max-width: 1039px) {
  .qds-header-rapide { display: inline-flex; }
}
/* En mode compact (700–1039 px), l'accès Formations reste visible hors menu.
   Sur mobile (< 700 px), il est remplacé par .qds-header-contexte (repère de
   page), voir plus bas — demande explicite : conserver l'information de page
   qui existait dans l'ancienne version portable plutôt que le raccourci
   Formations, déjà atteignable via le menu. */
@media (min-width: 1040px) {
  .qds-header-rapide { display: none; }
}

/* Repère de page (mobile uniquement, < 700 px) : reprend tel quel le texte et
   les liens de l'ancien composant .mobile-page-context (ex. « Formations
   courtes / Boîte à outils », « Blog / Management & Coaching »...). Remplace
   l'accès rapide Formations sur mobile, déjà disponible dans le menu.
   Structure : conteneur (<div> ou <a> selon la page d'origine) contenant 1 ou
   2 segments (<a> ou <span>) ; premier segment = repère de rubrique, second
   (si présent) = page courante, mis en valeur. */
.qds-header-contexte {
  display: none;
  flex-direction: column;
  gap: 0.05rem;
  justify-content: center;
  /* min-width: 0 est indispensable : par défaut, un enfant flex ne peut pas
     descendre sous la largeur intrinsèque de son contenu (ici le texte en
     white-space: nowrap), quelle que soit la valeur de max-width. Sans cette
     ligne, le repère de page force un débordement horizontal de tout le
     header sous ~420 px (bug identifié en phase 5A, cf. journal-refonte.md). */
  min-width: 0;
  max-width: clamp(6.5rem, 32vw, 11rem);
  min-height: 44px;
  padding: 0.25rem 0;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: right;
  text-decoration: none;
  color: var(--qds-texte-inverse);
}
.qds-header-contexte > * {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit;
  text-decoration: inherit;
}
.qds-header-contexte > a {
  min-height: 24px;
  padding-block: 0.15rem;
  box-sizing: border-box;
}
.qds-header-contexte > a:hover { text-decoration: underline; }
.qds-header-contexte > *:last-child:not(:only-child) {
  font-size: 0.72rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  color: var(--qds-ambre);
}
@media (max-width: 699px) {
  .qds-header-contexte { display: flex; }
}
/* Correctif débordement horizontal (320-419 px) : logo + icône région +
   repère de page + bouton menu dépassaient la largeur disponible (constaté
   lors des captures de la phase 5A, cf. journal-refonte.md). Le repère de
   page se réduit encore un peu, sans devenir illisible (2 lignes tronquées
   par des points de suspension, comportement déjà en place). */
/* Téléphone : grands écrans uniquement, jamais au détriment de la nav */
.qds-header-tel {
  display: none;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  color: var(--qds-ardoise-800);
  font-weight: 600;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  white-space: nowrap;
}
.qds-header-tel:hover { color: var(--qds-brique-profond); }
.qds-header-tel svg { width: 1rem; height: 1rem; color: var(--qds-brique); flex: none; }
@media (min-width: 1200px) {
  .qds-header-tel { display: inline-flex; }
}

/* Recherche : icône + nom accessible (aria-label existant) */
.qds-header-recherche {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--qds-brique-profond);
  transition: color var(--qds-duree-courte) var(--qds-courbe);
}
.qds-header-recherche:hover { color: var(--qds-action); }
.qds-header-recherche svg { width: 1.35rem; height: 1.35rem; }
@media (min-width: 700px) {
  .qds-header-recherche { display: inline-flex; }
}

/* Bouton contact : couleur d'action conservée, gabarit qds */
.qds-header-contact {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.5rem 1.2rem;
  border-radius: var(--qds-r-moyen);
  background-color: var(--qds-action);
  color: var(--qds-blanc);
  font-weight: 600;
  font-size: 0.975rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--qds-duree-courte) var(--qds-courbe);
}
.qds-header-contact:hover { background-color: var(--qds-action-sombre); }
@media (min-width: 700px) {
  .qds-header-contact { display: inline-flex; }
}

/* --------------------------------------------------------------------------
   5. Bouton Menu (mobile + compact) : burger avec nom accessible
      (« Ouvrir le menu du site », comme le header existant)
   -------------------------------------------------------------------------- */
.qds-header-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  min-width: 44px;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--qds-ardoise-200);
  border-radius: var(--qds-r-moyen);
  background-color: var(--qds-blanc);
  color: var(--qds-ardoise-900);
  font-family: var(--qds-font);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: border-color var(--qds-duree-courte) var(--qds-courbe),
              background-color var(--qds-duree-courte) var(--qds-courbe);
}
.qds-header-toggle:hover { border-color: var(--qds-brique); }
.qds-header-toggle svg { width: 1.15rem; height: 1.15rem; flex: none; }
.qds-header-toggle .qds-header-toggle-x { display: none; }
@media (min-width: 1040px) {
  .qds-header-toggle { display: none; }
}
/* Checkbox du panneau (même mécanisme que le site) */
.qds-header-etat {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.qds-header:has(.qds-header-etat:checked) .qds-header-toggle-barres { display: none; }
.qds-header:has(.qds-header-etat:checked) .qds-header-toggle-x { display: block; }

/* --------------------------------------------------------------------------
   6. Panneau compact / mobile
   -------------------------------------------------------------------------- */
.qds-header-panneau {
  display: none;
  background-color: var(--qds-ivoire);
  border-top: 1px solid var(--qds-ardoise-100);
  border-bottom: 3px solid var(--qds-brique);
  box-shadow: var(--qds-ombre-2);
}
.qds-header:has(.qds-header-etat:checked) .qds-header-panneau {
  display: block;
}
@media (min-width: 1040px) {
  .qds-header-panneau { display: none !important; }
}
/* Panneau superposé au contenu quand le header est sticky */
.qds-header--fixe .qds-header-panneau {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh - 6rem);
  max-height: calc(100dvh - 6rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.qds-header-panneau-inner {
  max-width: var(--qds-conteneur);
  margin-inline: auto;
  padding: 0.75rem var(--qds-gouttiere) 1.25rem;
}
.qds-header-panneau-inner a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.55rem 0.75rem;
  border-radius: var(--qds-r-petit);
  color: var(--qds-ardoise-800);
  font-weight: 500;
  text-decoration: none;
}
.qds-header-panneau-inner a:hover {
  background-color: var(--qds-pierre);
  color: var(--qds-brique-profond);
}
.qds-header-panneau-inner a[aria-current="page"] {
  color: var(--qds-brique-profond);
  font-weight: 700;
}
/* Accès prioritaire au catalogue : graisse renforcée */
.qds-header-panneau-inner .qds-header-panneau-principal {
  font-weight: 700;
  color: var(--qds-ardoise-900);
}
/* Accès secondaire (agenda) : rattaché visuellement à Formations,
   taille et couleur atténuées */
.qds-header-panneau-inner .qds-header-panneau-secondaire {
  min-height: 40px;
  margin-left: 1.1rem;
  padding-block: 0.35rem;
  border-left: 2px solid var(--qds-ambre);
  border-radius: 0 var(--qds-r-petit) var(--qds-r-petit) 0;
  font-size: var(--qds-t-petit);
  font-weight: 500;
  color: var(--qds-texte-doux);
}
.qds-header-panneau-inner .qds-header-panneau-secondaire:hover {
  color: var(--qds-brique-profond);
  background-color: var(--qds-pierre);
}
.qds-header-panneau-titre {
  display: block;
  margin: 0.85rem 0 0.25rem;
  padding-left: 0.75rem;
  font-size: var(--qds-t-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--qds-ocre);
}
.qds-header-panneau-inner .qds-header-panneau-contact {
  margin-top: 0.75rem;
  justify-content: center;
  background-color: var(--qds-action);
  color: var(--qds-blanc);
  font-weight: 600;
  border-radius: var(--qds-r-moyen);
}
.qds-header-panneau-inner .qds-header-panneau-contact:hover {
  background-color: var(--qds-action-sombre);
  color: var(--qds-blanc);
}
/* Rubriques déjà visibles dans la barre compacte : masquées du panneau
   entre 700 et 1039 px pour éviter les doublons. L'accès secondaire à
   l'agenda, absent de la barre, reste visible à toutes les largeurs
   du panneau. */
@media (min-width: 700px) and (max-width: 1039px) {
  .qds-header-panneau-inner a.qds-header-panneau-double {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   7. Focus visibles
   -------------------------------------------------------------------------- */
.qds-header a:focus-visible,
.qds-header button:focus-visible,
.qds-header label:focus-visible,
.qds-header .qds-header-toggle:focus-visible {
  outline: 3px solid var(--qds-action);
  outline-offset: 2px;
  border-radius: var(--qds-r-petit);
}
/* Le focus clavier porte sur la checkbox masquée : il est matérialisé
   sur le label adjacent qui sert de bouton visuel */
.qds-header-etat:focus-visible + .qds-header-toggle {
  outline: 3px solid var(--qds-action);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   8. Variante ardoise (fond sombre)
   -------------------------------------------------------------------------- */
.qds-header--ardoise {
  background-color: var(--qds-ardoise-900);
  border-bottom-color: var(--qds-ardoise-800);
}
.qds-header--ardoise .qds-header-lien,
.qds-header--ardoise .qds-header-rapide,
.qds-header--ardoise .qds-header-tel {
  color: var(--qds-texte-inverse);
}
.qds-header--ardoise .qds-header-lien:hover,
.qds-header--ardoise .qds-header-rapide:hover,
.qds-header--ardoise .qds-header-tel:hover {
  color: var(--qds-ambre);
}
.qds-header--ardoise .qds-header-lien::after { background-color: var(--qds-ambre); }
.qds-header--ardoise .qds-header-lien[aria-current="page"],
.qds-header--ardoise .qds-header-lien.qds-header-lien--actif {
  color: var(--qds-ambre);
}
.qds-header--ardoise .qds-header-recherche { color: var(--qds-ambre); }
.qds-header--ardoise .qds-header-recherche:hover { color: var(--qds-blanc); }
.qds-header--ardoise .qds-header-tel svg { color: var(--qds-ambre); }
.qds-header--ardoise .qds-header-toggle {
  background-color: transparent;
  border-color: var(--qds-ardoise-200);
  color: var(--qds-texte-inverse);
}
.qds-header--ardoise .qds-header-toggle:hover { border-color: var(--qds-ambre); }
.qds-header--ardoise a:focus-visible,
.qds-header--ardoise button:focus-visible,
.qds-header--ardoise label:focus-visible {
  outline-color: var(--qds-ambre);
}

/* --------------------------------------------------------------------------
   9. Animations réduites : aucun mouvement
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .qds-header *, .qds-header *::before, .qds-header *::after {
    transition-duration: 0.01ms !important;
    animation: none !important;
  }
}