/* HRQ — header global fixe v3 (2026-06-11) : calé sur block.xyz (copie d'écran Guillaume).
   Fonte grotesque (Inter ≈ leur fonte maison), corps 13px, graisse 400 (ni light ni bold),
   interlettrage .08em, gaps larges, liens centrés ; logo à gauche, login/register à droite. */
/* Inter AUTO-HÉBERGÉE (2026-06-12, RGPD : plus d'appel à fonts.googleapis/gstatic —
   l'IP des visiteurs ne part plus chez Google). Fichiers : assets/fonts/inter-*.woff2
   (latin, v20). font-display: swap = texte visible immédiatement (CWV/LCP). */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/inter-400.woff2') format('woff2'); }
/* 02/09 (décision Guillaume Q6, charte : Inter 400 et 600 seulement) : la graisse 500 n'est plus servie. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/assets/fonts/inter-600.woff2') format('woff2'); }
/* 06/09 (SEO T-11, CLS) : police de repli à métriques ajustées — le swap Arial → Inter ne fait plus sauter le texte.
   Valeurs Inter/Arial usuelles (fontaine/capsize). La feuille est maintenant chargée dans le <head> des pages
   publiques (après leur <style>), avec un preload des deux woff2. */
@font-face { font-family: 'Inter Fallback'; src: local('Arial'); size-adjust: 107.12%; ascent-override: 90.49%; descent-override: 22.56%; line-gap-override: 0%; }
body { font-family: 'Inter', 'Inter Fallback', Helvetica, Arial, sans-serif; }

/* Le padding bas n'est réservé QUE pour les visiteurs (bandeau waitlist visible).
   Connecté : pas de bandeau, pas d'espace mort (décision 2026-06-12). */
/* 04/09 (Guillaume : « plus gros le logo, le double sur desktop ») : hauteur de barre en variable —
   64 px (logo 40) jusqu'à 1024 px, 112 px (logo 80, 16 px en haut et en bas) au-delà. Tout ce qui se
   cale sous la barre (padding du body, en-têtes sticky, iframe de la démo) lit --hn-h. */
:root { --hn-h: 64px; --hn-logo: 40px; }
@media (min-width: 1025px) { :root { --hn-h: 112px; --hn-logo: 80px; } }
body { padding-top: var(--hn-h, 64px) !important; padding-bottom: 0 !important; }
html.hn-visitor body { padding-bottom: 40px !important; }
/* Page rendue dans l'aperçu du header (iframe) : pas de nav ni de bandeau, pas de doublons. */
html.hrq-in-frame #hrq-nav, html.hrq-in-frame #hrq-waitline { display: none !important; }
html.hrq-in-frame body { padding-top: 0 !important; padding-bottom: 0 !important; }
#hrq-nav {
  position: fixed; top: 0; left: 0; right: 0; height: var(--hn-h, 64px); z-index: 2600;
  /* 04/09 (logo) : colonnes latérales = au moins leur contenu (minmax) — à 1280 px la colonne droite
     (Connexion + « Membre de la première heure », 356 px) débordait sur « Légal » (LÉGALCONNEXION). */
  background: #fff; display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); align-items: center; column-gap: 24px;
  padding: 0 clamp(16px, 2.5vw, 40px); box-sizing: border-box;
  font-family: 'Inter', Helvetica, Arial, sans-serif;
}
#hrq-nav a { text-decoration: none; color: #111; font-size: 13px; font-weight: 400;
  letter-spacing: .08em; text-transform: uppercase; line-height: 1; white-space: nowrap; }
#hrq-nav a:hover { opacity: .55; }
/* Audit/Migrer = entrées principales : ORANGE acidulé #F4791E — exception ASSUMÉE à la règle
   « typo noire » (Guillaume 24/06 : « en orange comme avant »). Page active soulignée (hrq_nav.js). */
#hrq-nav a.hn-hot { color: #F4791E; font-weight: 600; }
#hrq-nav a.hn-hot:hover { color: #F4791E; opacity: 1; }
/* LOGO OFFICIEL (Guillaume 04/09/2026 : « voici le logo à mettre à la place du logo actuel ») :
   image SVG /assets/logo/hrq_logo.svg (HRQ noir, Q-loupe or #d4a544, « High Res Quest. »),
   vectorisée à l'identique du PNG fourni (assets/logo/src). 46 px de haut dans la barre de 64 px
   (marges 9 px), 40 px sous 600 px. Le texte de repli (alt) garde l'ancienne graisse Inter 600. */
#hrq-nav .hn-logo { justify-self: start; align-self: start; display: flex; align-items: flex-start; line-height: 0;
  padding-top: 16px; /* Guillaume 04/09 : « le blanc autour du logo doit être le même en haut et sur le côté » +
  « décale vers le bas » → 16 px en haut (= marge latérale mobile), logo 40 px, 8 px en bas, barre inchangée (64). */
  font-family: 'Inter', Helvetica, Arial, sans-serif; font-weight: 600; letter-spacing: -.01em;
  text-transform: none; font-size: 18px; }
#hrq-nav .hn-logo:hover { opacity: 1; }
#hrq-nav .hn-logo img { display: block; height: var(--hn-logo, 40px); width: auto; }
#hrq-nav .hn-links { display: flex; align-items: center; justify-content: center;
  gap: clamp(18px, 2.6vw, 44px); }
#hrq-nav .hn-auth { justify-self: end; display: flex; align-items: center; gap: clamp(14px, 2.2vw, 30px); }
/* 06/09 (Guillaume, maquette validée) : les DEUX langues « FR  EN » côte à côte (nav.js), même typo que
   les liens ; la langue ACTIVE est soulignée comme la page active (trait 1 px, décalé de 5 px), l'autre
   est grisée (opacité .55) et se révèle au survol. */
#hrq-nav .hn-auth .hn-langs { display: inline-flex; align-items: center; gap: 10px; }
#hrq-nav .hn-auth .hn-langs a { font-size: 11px; letter-spacing: .12em; opacity: .55; text-decoration: none; }
#hrq-nav .hn-auth .hn-langs a:hover { opacity: 1; }
#hrq-nav .hn-auth .hn-langs a[aria-current] { opacity: 1; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
#hn-mobile .hn-m-lang { opacity: .8; }
#hn-mobile .hn-m-lang[aria-current], #hn-mobile .hn-m-link[aria-current] { opacity: 1; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
/* 04/09 : le bouton « Membre de la première heure » est long — entre 1025 et 1220 px les trois colonnes se
   serrent (grille auto, gouttières et interlettrage réduits) pour qu'il reste DANS la fenêtre. */
@media (max-width: 1220px) and (min-width: 1025px) {
  #hrq-nav { grid-template-columns: auto auto auto; justify-content: space-between; column-gap: 16px; }
  #hrq-nav .hn-links { gap: clamp(10px, 1.5vw, 22px); }
  #hrq-nav a { letter-spacing: .04em; font-size: 12.5px; }
  #hrq-nav .hn-auth { gap: 14px; }
}
/* Menu compte (connecté) */
.hn-account { position: relative; }
.hn-acct-btn { font-family: inherit; font-size: 13px; font-weight: 400; letter-spacing: .08em;
  text-transform: uppercase; background: none; border: none; color: #111; cursor: pointer; padding: 4px 0; }
.hn-acct-btn:hover { opacity: .55; }
/* Nav connecté (2026-06-16) : 2 lignes — nom + statut (Abonné / N crédits). */
.hn-acct-btn { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; line-height: 1.15; }
.hn-acct-name { font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; }
/* Connecté à HRQ → type d'abonnement en VERT (ce badge ne s'affiche QUE connecté ; non connecté = bouton login). Guillaume 08/07 (#25). */
.hn-acct-plan { font-size: 10px; font-weight: 600; text-transform: none; letter-spacing: .02em; color: #2EC27E; }
.hn-account .hn-acct-menu { display: none; position: absolute; right: 0; top: 34px; min-width: 250px;
  background: #fff; border: 1px solid #e3e1dc; padding: 8px 0; z-index: 2700; }
.hn-account.open .hn-acct-menu { display: block; }
.hn-acct-menu .row { display: block; width: 100%; text-align: left; font-family: inherit; font-size: 12.5px;
  font-weight: 300; letter-spacing: 0; text-transform: none; color: #1a1a1a; padding: 8px 16px;
  background: none; border: none; text-decoration: none; }
.hn-acct-menu .row b { font-weight: 600; color: #1a1a1a; }
.hn-acct-menu .row.dim { color: #8a8880; font-size: 11.5px; border-bottom: 1px solid #efede8; margin-bottom: 4px; }
.hn-acct-menu .row.link { cursor: pointer; }
.hn-acct-menu .row.link:hover { background: #faf8f3; }
/* ===== BURGER ≤1024px (Guillaume 03/07 : superposition en PAYSAGE mobile 844px —
   le seuil 820 laissait la nav desktop déborder ; sous ~1050px logo/liens/LOGIN se
   chevauchent aussi en fenêtre étroite). Panneau plein écran. */
#hn-burger { display: none; }
@media (max-width: 1024px) {
  #hrq-nav { grid-template-columns: 1fr auto; }
  #hrq-nav .hn-links, #hrq-nav .hn-auth { display: none; }
  #hn-burger { display: flex; flex-direction: column; gap: 5px; justify-self: end;
    background: none; border: none; padding: 10px 4px; cursor: pointer; }
  #hn-burger span { display: block; width: 22px; height: 1.5px; background: #111;
    transition: transform .18s ease, opacity .18s ease; }
  #hn-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  #hn-burger.open span:nth-child(2) { opacity: 0; }
  #hn-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  #hn-mobile { position: fixed; top: 64px; left: 0; right: 0; bottom: 0; background: #fff;
    z-index: 2650; display: none; flex-direction: column; gap: 0;
    padding: 12px clamp(16px, 5vw, 32px) 40px; overflow-y: auto;
    font-family: 'Inter', Helvetica, Arial, sans-serif; }
  #hn-mobile.open { display: flex; }
  body.hn-locked { overflow: hidden; }
  /* 04/09 (Guillaume « les blancs autour des titres sont trop grands ») : corps 12 px comme les titres de
     playlist (.playlist-card h4 = 12/600), padding 12 (cible ≈ 40 px), plus de blanc en tête de panneau. */
  #hn-mobile .hn-m-link { display: block; padding: 12px 0; font-size: 12px; font-weight: 400; line-height: 1.3;
    letter-spacing: .06em; text-transform: uppercase; color: #111; text-decoration: none;
    border-bottom: 1px solid #f0eee9; }
  #hn-mobile .hn-m-link.hn-hot { color: #F4791E; font-weight: 600; }
  #hn-mobile .hn-m-auth { margin-top: 14px; padding-top: 12px; border-top: 1px solid #e3e1dc; }
  #hn-mobile .hn-m-auth .row { display: block; width: 100%; text-align: left; font-family: inherit;
    font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: #1a1a1a;
    padding: 12px 0; background: none; border: none; text-decoration: none; }
  #hn-mobile .hn-m-auth .row b { font-weight: 600; color: #1a1a1a; }
  #hn-mobile .hn-m-auth .row.dim { color: #8a8880; font-size: 12px; }
  #hn-mobile .hn-m-auth .row.link { cursor: pointer; }
}
@media (max-width: 520px) {
  /* Pas de survol au tactile : la preview pleine page n'a pas de sens sur mobile. */
}
/* 12/08 : l'aperçu de page au survol a été RETIRÉ (page au clic uniquement). 13/08 : la suppression
   avait laissé un fragment orphelin (« background:#fff; display:none; } » sans sélecteur) qui rendait
   la CSS invalide → le parseur AVALAIT la règle de base #hrq-waitline (fixed/bottom/caché), d'où le
   bandeau waitlist affiché À TOUS, connectés compris, en haut de page. Réparé. */
/* Bandeau bas : uniquement l'inscription à la liste d'attente (le legal vit dans le header).
   CACHÉ par défaut — hrq_nav.js ajoute html.hn-visitor quand l'API confirme « non connecté ».
   Inversion 2026-06-12 : avant, le bandeau était visible par défaut puis masqué après le fetch
   → flash sur chaque page pour un utilisateur connecté. */
#hrq-waitline {
  position: fixed; left: 0; right: 0; bottom: 0; height: 38px; z-index: 2600;
  display: none; align-items: center; justify-content: center;
  background: #5CE0A0; /* Guillaume 04/09 : « rejoindre les membres en vert typo blanche » (avant : orange 11/06) */
  font-family: 'Inter', Helvetica, Arial, sans-serif;
}
html.hn-visitor #hrq-waitline { display: flex; }
/* 13/08 (écran Guillaume : bandeau visible CONNECTÉ, cause = fragment orphelin ci-dessus) : ceinture
   + bretelles — hors visiteur confirmé, le bandeau est INTERDIT quoi qu'il arrive, même si une future
   corruption avale la règle de base. Connecté ne le voit JAMAIS ; visiteur le voit en permanence. */
html:not(.hn-visitor) #hrq-waitline { display: none !important; }
/* Action destructrice du menu compte (suppression RGPD) : rouge sobre, pas un CTA. */
.hn-acct-menu .hn-danger, #hn-mobile .hn-danger { color: #b91c1c; }
#hrq-waitline:hover { background: #5CE0A0; filter: brightness(1.06); } /* un seul vert : pas d'autre teinte, juste un peu plus clair */
#hrq-waitline .hw-main { font-size: 12px; font-weight: 400; letter-spacing: .05em;
  color: #fff; text-decoration: none;
  /* 05/09 (revue a11y) : la cible tactile = toute la hauteur du bandeau (38 px), pas la ligne de texte (18 px). */
  display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; }
#hrq-waitline .gold { color: #fff; margin: 0 6px; }
