/* =====================================================================
   METALGO5 — BARRE DE NAVIGATION UNIQUE  (2026-11-04)

   Remplace les 9 barres artisanales qui coexistaient (.m5-nav, .ix-links,
   .nav-links, .links, .pos-nav, .screener-pagenav, .sy-links, .mg-nav,
   <nav> nu) : chacune avait son propre jeu de liens, si bien qu'on ne
   pouvait pas atteindre /journal depuis une autre page et que deux liens
   pointaient dans le vide.

   Elle s'inclut par `{% include '_m5_nav.html' %}` juste après <body> et
   n'a besoin de rien d'autre : elle charge sa feuille de style et son
   script elle-même, et ne dépend d'aucune classe de la page hôte.

   Parti pris, conforme à metalgo5.css : filets d'un cheveu, pas d'ombre,
   rayons minuscules, équerres aux angles des panneaux, libellés en
   petites capitales espacées, accent sable qui SOULIGNE sans remplir.
   Les jetons --m5-* sont lus quand metalgo5.css est chargé, et chaque
   var() porte une valeur de repli pour les pages qui ne le chargent pas
   encore (landing.html, why_moving.html…).
   ===================================================================== */

/* Hauteur publiee : les widgets en position fixed des pages (le selecteur de
   courtier, par exemple) s'en servent pour se poser SOUS la barre. Sans elle
   le panneau courtier recouvrait le bouton de connexion. */
:root { --m5nav-h: 52px; }
@media (max-width: 1024px) { :root { --m5nav-h: 48px; } }

.m5nav, .m5nav * { box-sizing: border-box; }

.m5nav {
  position: sticky; top: 0; z-index: 900; isolation: isolate;
  border-bottom: 1px solid var(--m5-line, rgba(228, 210, 176, .14));
  background: var(--m5-overlay, rgba(3, 7, 14, .82));
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  font-family: var(--m5-font, 'Source Sans 3', 'Segoe UI', system-ui, sans-serif);
  color: var(--m5-text, #e9eff5);
  line-height: 1.4;
}
/* Fin filet sable : la barre est tracée, pas posée. */
.m5nav::after {
  content: ''; position: absolute; inset: auto 0 -1px 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--m5-accent-wash, rgba(228, 210, 176, .07)) 18%, var(--m5-accent-wash, rgba(228, 210, 176, .07)) 82%, transparent);
  pointer-events: none;
}

.m5nav__inner {
  display: flex; align-items: center; gap: var(--m5-s-4, 16px);
  max-width: 1640px; margin: 0 auto; padding: 0 var(--m5-s-4, 16px);
  min-height: 52px;
}

/* --- Marque ------------------------------------------------------- */
.m5nav__brand {
  display: inline-flex; align-items: center; gap: 9px; flex: none;
  color: var(--m5-text, #e9eff5); text-decoration: none;
}
.m5nav__brand:hover, .m5nav__brand:focus-visible { text-decoration: none; }
.m5nav__mark {
  display: grid; place-items: center; width: 30px; height: 30px; flex: none;
  border: 1px solid var(--m5-accent-dim, rgba(228, 210, 176, .55));
  color: var(--m5-accent, #e4d2b0);
  font-family: var(--m5-font-display, 'Fraunces', Georgia, serif);
  font-size: .82rem; font-weight: 700; letter-spacing: -.03em;
}
.m5nav__wordmark { font-size: .92rem; font-weight: 700; letter-spacing: .01em; }
@media (max-width: 1180px) { .m5nav__wordmark { display: none; } }

/* --- Liens -------------------------------------------------------- */
.m5nav__links {
  display: flex; align-items: center; gap: var(--m5-s-4, 16px);
  flex: 1 1 auto; min-width: 0;
}
.m5nav__item { position: relative; display: flex; }

/* Onglet souligné : même idiome que .m5-nav a dans metalgo5.css. */
.m5nav__link, .m5nav__trigger {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 15px 1px 14px; border: 0; border-bottom: 2px solid transparent;
  background: none; color: var(--m5-text-dim, #93a4b7);
  font: inherit; font-size: .82rem; font-weight: 600; letter-spacing: .02em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: color .18s, border-color .18s;
}
.m5nav__link:hover, .m5nav__trigger:hover,
.m5nav__link:focus-visible, .m5nav__trigger:focus-visible {
  color: var(--m5-text, #e9eff5);
  border-bottom-color: var(--m5-line-strong, rgba(228, 210, 176, .3));
  text-decoration: none; outline: none;
}
.m5nav__link:focus-visible, .m5nav__trigger:focus-visible { border-bottom-color: var(--m5-accent, #e4d2b0); }
/* Page courante, et rubrique contenant la page courante. */
.m5nav__link[aria-current="page"], .m5nav__item.is-current > .m5nav__trigger {
  color: var(--m5-accent-strong, #f5e8ce);
  border-bottom-color: var(--m5-accent, #e4d2b0);
}
.m5nav__caret { font-size: .62rem; opacity: .75; transition: transform .18s; }
.m5nav__item.is-open .m5nav__caret { transform: rotate(180deg); }

/* --- Panneau déroulant : cadre à équerres, aucune ombre ----------- */
.m5nav__panel {
  position: absolute; top: 100%; inset-inline-start: -14px;
  display: none; min-width: 272px; padding: 9px 0;
  border: 1px solid var(--m5-line, rgba(228, 210, 176, .14));
  background: var(--m5-surface, #0c1526);
}
.m5nav__item.is-open > .m5nav__panel { display: block; }
.m5nav__panel::before, .m5nav__panel::after {
  content: ''; position: absolute; width: var(--m5-bracket, 11px); height: var(--m5-bracket, 11px);
  border: 1px solid var(--m5-accent-dim, rgba(228, 210, 176, .55)); pointer-events: none;
}
.m5nav__panel::before { top: -1px; inset-inline-start: -1px; border-width: 1px 0 0 1px; }
.m5nav__panel::after { bottom: -1px; inset-inline-end: -1px; border-width: 0 1px 1px 0; }

.m5nav__panel-label {
  padding: 4px 16px 7px; color: var(--m5-text-faint, #64748b);
  font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.m5nav__sub {
  display: flex; align-items: center; justify-content: space-between; gap: var(--m5-s-3, 12px);
  padding: 9px 16px; color: var(--m5-text, #e9eff5);
  font-size: .84rem; font-weight: 500; text-decoration: none;
  border-inline-start: 2px solid transparent;
}
.m5nav__sub:hover, .m5nav__sub:focus-visible {
  background: var(--m5-accent-wash, rgba(228, 210, 176, .07));
  border-inline-start-color: var(--m5-accent, #e4d2b0);
  color: var(--m5-accent-strong, #f5e8ce); text-decoration: none; outline: none;
}
.m5nav__sub[aria-current="page"] {
  color: var(--m5-accent-strong, #f5e8ce);
  border-inline-start-color: var(--m5-accent, #e4d2b0);
}
.m5nav__sub-text { display: grid; gap: 1px; min-width: 0; }
.m5nav__sub-hint { color: var(--m5-text-faint, #64748b); font-size: .71rem; font-weight: 400; }

/* Étiquette d'offre : on annonce le verrou AVANT le clic, pour que
   personne ne prenne une page de tarifs pour une panne. */
.m5nav__tier {
  flex: none; padding: 2px 6px; border: 1px solid currentColor;
  font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.m5nav__tier--core { color: var(--m5-info, #8fb8d9); }
.m5nav__tier--pro { color: var(--m5-accent, #e4d2b0); }

/* --- Côté droit --------------------------------------------------- */
.m5nav__right { display: flex; align-items: center; gap: var(--m5-s-2, 8px); flex: none; margin-inline-start: auto; }

/* Le controle de langue est le dernier enfant de .m5nav__links : sur grand
   ecran il se pousse a droite, et dans le menu replie il descend avec les
   rubriques au lieu de disparaitre (il etait masque sous 460px). */
/* Le <select> de la vitrine occupe la meme place que les boutons de langue. */
.m5nav .language-control { margin-inline-start: auto; align-self: center; flex: none; }
.m5nav .language-control .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.m5nav .language-control select {
  padding: 5px 7px; border: 1px solid var(--m5-line, rgba(228, 210, 176, .14));
  background: transparent; color: var(--m5-text-dim, #93a4b7);
  font: inherit; font-size: .68rem; font-weight: 700; cursor: pointer;
}
.m5nav__lang { display: inline-flex; margin-inline-start: auto; align-self: center; flex: none; border: 1px solid var(--m5-line, rgba(228, 210, 176, .14)); }
.m5nav__lang button {
  padding: 5px 8px; border: 0; background: none;
  color: var(--m5-text-faint, #64748b);
  font: inherit; font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  cursor: pointer; transition: color .16s, background .16s;
}
.m5nav__lang button + button { border-inline-start: 1px solid var(--m5-line-soft, rgba(228, 210, 176, .07)); }
.m5nav__lang button:hover { color: var(--m5-text, #e9eff5); }
.m5nav__lang button[aria-pressed="true"] {
  background: var(--m5-accent-wash, rgba(228, 210, 176, .07));
  color: var(--m5-accent-strong, #f5e8ce);
}

/* Variante vitrine : la langue est une URL servie par le serveur (/fr, /ar,
   /zh), donc un vrai lien — le référencement par langue en dépend. */
.m5nav__lang--links a {
  padding: 5px 8px; color: var(--m5-text-faint, #64748b);
  font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-decoration: none;
  transition: color .16s, background .16s;
}
.m5nav__lang--links a + a { border-inline-start: 1px solid var(--m5-line-soft, rgba(228, 210, 176, .07)); }
.m5nav__lang--links a:hover, .m5nav__lang--links a:focus-visible { color: var(--m5-text, #e9eff5); text-decoration: none; }
.m5nav__lang--links a[aria-current="page"] {
  background: var(--m5-accent-wash, rgba(228, 210, 176, .07));
  color: var(--m5-accent-strong, #f5e8ce);
}

.m5nav__cta, .m5nav__account-trigger {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border: 1px solid var(--m5-accent-dim, rgba(228, 210, 176, .55));
  background: none; color: var(--m5-accent, #e4d2b0);
  font: inherit; font-size: .76rem; font-weight: 700; letter-spacing: .02em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: border-color .16s, color .16s, background .16s;
}
.m5nav__cta:hover, .m5nav__cta:focus-visible,
.m5nav__account-trigger:hover, .m5nav__account-trigger:focus-visible {
  border-color: var(--m5-accent, #e4d2b0);
  background: var(--m5-accent-wash, rgba(228, 210, 176, .07));
  color: var(--m5-accent-strong, #f5e8ce); text-decoration: none; outline: none;
}
.m5nav__signin {
  color: var(--m5-text-dim, #93a4b7); font-size: .78rem; font-weight: 600;
  text-decoration: none; white-space: nowrap; padding: 7px 4px;
}
.m5nav__signin:hover, .m5nav__signin:focus-visible { color: var(--m5-text, #e9eff5); text-decoration: none; }

.m5nav__account { position: relative; display: inline-flex; }
.m5nav__dot {
  width: 6px; height: 6px; flex: none; border-radius: 50%;
  background: var(--m5-bull, #7dbe9a); box-shadow: 0 0 0 3px rgba(125, 190, 154, .15);
}
.m5nav__email { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
@media (max-width: 900px) { .m5nav__email { max-width: 86px; } }
.m5nav__account .m5nav__panel { inset-inline-start: auto; inset-inline-end: 0; min-width: 232px; }
.m5nav__account.is-open > .m5nav__panel { display: block; }
.m5nav__panel button.m5nav__sub { width: 100%; border-block: 0; border-inline-end: 0; text-align: start; font: inherit; font-size: .84rem; cursor: pointer; background: none; }

/* --- Bouton menu (mobile) ----------------------------------------- */
.m5nav__burger {
  display: none; place-items: center; width: 36px; height: 32px; flex: none;
  border: 1px solid var(--m5-line, rgba(228, 210, 176, .14));
  background: none; color: var(--m5-accent, #e4d2b0); cursor: pointer;
}
.m5nav__burger span, .m5nav__burger span::before, .m5nav__burger span::after {
  content: ''; display: block; width: 15px; height: 1.5px; background: currentColor;
  transition: transform .2s, opacity .2s;
}
.m5nav__burger span { position: relative; }
.m5nav__burger span::before { position: absolute; top: -5px; }
.m5nav__burger span::after { position: absolute; top: 5px; }
.m5nav.is-expanded .m5nav__burger span { background: transparent; }
.m5nav.is-expanded .m5nav__burger span::before { transform: translateY(5px) rotate(45deg); }
.m5nav.is-expanded .m5nav__burger span::after { transform: translateY(-5px) rotate(-45deg); }

/* =====================================================================
   Repli mobile — déclenché à 1024px parce que c'est là que les six
   rubriques cessent de tenir sur une ligne. Le menu devient une colonne
   repliée dans le flux : pas de superposition plein écran, on garde le
   contexte de la page sous les yeux.
   ===================================================================== */
@media (max-width: 1024px) {
  .m5nav__inner { min-height: 48px; gap: var(--m5-s-2, 8px); flex-wrap: wrap; }
  .m5nav__burger { display: grid; order: 3; }
  .m5nav__right { order: 2; gap: 6px; }
  .m5nav__links {
    order: 4; flex: 1 0 100%; display: none;
    flex-direction: column; align-items: stretch; gap: 0;
    max-height: calc(100vh - 48px); overflow-y: auto;
    margin: 0 calc(-1 * var(--m5-s-4, 16px));
    padding: var(--m5-s-2, 8px) 0 var(--m5-s-4, 16px);
    border-top: 1px solid var(--m5-line, rgba(228, 210, 176, .14));
  }
  .m5nav.is-expanded .m5nav__links { display: flex; }
  .m5nav__item { flex-direction: column; align-items: stretch; }
  .m5nav__link, .m5nav__trigger {
    justify-content: space-between; padding: 13px var(--m5-s-4, 16px);
    border-bottom: 1px solid var(--m5-line-soft, rgba(228, 210, 176, .07));
    border-inline-start: 2px solid transparent; font-size: .88rem;
  }
  .m5nav__link[aria-current="page"], .m5nav__item.is-current > .m5nav__trigger {
    border-bottom-color: var(--m5-line-soft, rgba(228, 210, 176, .07));
    border-inline-start-color: var(--m5-accent, #e4d2b0);
    background: var(--m5-accent-wash, rgba(228, 210, 176, .07));
  }
  /* Les rubriques se déplient dans la colonne, elles ne flottent plus. */
  .m5nav__panel {
    position: static; min-width: 0; padding: 2px 0 8px;
    border: 0; border-bottom: 1px solid var(--m5-line-soft, rgba(228, 210, 176, .07));
    background: rgba(0, 0, 0, .22);
  }
  .m5nav__panel::before, .m5nav__panel::after { display: none; }
  .m5nav__sub { padding-inline-start: 30px; }
  .m5nav__account .m5nav__panel { position: absolute; inset-inline-end: 0; padding: 9px 0; border: 1px solid var(--m5-line, rgba(228, 210, 176, .14)); background: var(--m5-surface, #0c1526); }
  .m5nav__account .m5nav__sub { padding-inline-start: 16px; }
  .m5nav__lang, .language-control { margin: 12px var(--m5-s-4, 16px) 0; align-self: flex-start; }
}

@media (max-width: 460px) {
  .m5nav__inner { padding: 0 var(--m5-s-3, 12px); }
  .m5nav__links { margin: 0 calc(-1 * var(--m5-s-3, 12px)); }
  .m5nav__cta { padding: 7px 9px; font-size: .72rem; }
}

@media (prefers-reduced-motion: reduce) {
  .m5nav *, .m5nav *::before, .m5nav *::after { transition: none !important; animation: none !important; }
}
@media print { .m5nav { display: none !important; } }