/* ══════════════════════════════════════════════════════════════════════════
   LA BARRE, UNE FOIS POUR TOUTES
   ══════════════════════════════════════════════════════════════════════════
   Rodolphe, plusieurs fois : « le menu en haut n'est pas le même que sur la
   page d'accueil. C'est le premier truc, juste le premier truc. »

   Il avait raison, et c'était mesurable : la barre faisait 62 px sur l'accueil,
   68 px sur les pages ressources et 90 px sur les articles de blog, parce que
   quatre feuilles différentes (doaken-nav-footer.css, nav-global-v2.css,
   blog-styles.css, blog-v10.css) déclaraient chacune leur version des liens,
   du logo et du bouton. Corriger l'une ne corrigeait pas les autres — et sur
   le blog, des liens restés blancs sur une barre devenue blanche donnaient un
   contraste de 1,00 : un menu littéralement invisible.

   Cette feuille est chargée EN DERNIER sur toutes les pages. Elle ne dessine
   rien de neuf : elle impose les valeurs de l'accueil, celles que Rodolphe a
   validées. Toute page qui la charge a exactement la même barre, quel que soit
   ce que ses autres feuilles racontent.

   Valeurs de référence, relevées sur l'accueil le 02-08-2026 :
     barre 62 px de haut · padding 12px 28px · rayon 22 px · fixée à 14/24
     verre blanc 95→90 % + blur(28px) saturate(115%)
     logo Mokoto 26 px #001A3D · liens Geist 14 px #4A5A7A, hauteur 36 px
     bouton plein marine #001A3D, padding 9px 20px, rayon 100 px
   ══════════════════════════════════════════════════════════════════════════ */

nav.navbar,
nav#navbar,
nav.blog-nav,
nav.blog-transparent {
  padding: 12px 28px !important;
  border-radius: 22px !important;
  min-height: 0 !important;
}

/* ── Le logo : Mokoto, jamais autre chose ─────────────────────────────────── */
nav.navbar .nav-logo, nav#navbar .nav-logo,
nav.navbar .logo-text, nav#navbar .logo-text,
nav.blog-nav .logo-text, nav.blog-transparent .logo-text,
nav.blog-nav .nav-logo-iso span, nav.blog-transparent .nav-logo-iso span {
  font-family: 'Mokoto', 'Geist', sans-serif !important;
  font-size: 26px !important;
  font-weight: normal !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #001A3D !important;
}

/* ── Les liens : même taille, même couleur, même hauteur ──────────────────── */
nav.navbar .nav-links > li > a, nav#navbar .nav-links > li > a,
nav.blog-nav .nav-links > li > a, nav.blog-transparent .nav-links > li > a,
nav.navbar .nav-links > .nav-item > a, nav#navbar .nav-links > .nav-item > a {
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  /* 02-08 — MARINE, PAS GRIS CLAIR. Mesuré au pixel sur 3 pages en défilant :
     avec le gris #4A5A7A d'origine, le verre à 34 % tombait à 1,01 de contraste
     dès qu'une couverture sombre passait derrière — c'est ce que Rodolphe
     appelait « le menu noyé ». J'avais résolu ça en rendant la barre opaque à
     95 %, ce qui a tué l'effet de verre qu'il cherchait.
     Avec le marine, le verre peut redescendre à 64 % : contraste 6,13 au pire
     cas, verre bien visible. Les deux tiennent enfin ensemble. */
  color: #001A3D !important;
  letter-spacing: -0.005em !important;
  /* 02-08 — RIEN D'AUTRE. J'avais imposé height:36px et padding:0 14px : des
     valeurs de mon invention, qui écrasaient l'espacement de la barre validée.
     Rodolphe : « tout est collé, il est où mon menu glace ? » Le verre n'avait
     pas bougé — c'est l'écart entre les liens qui était passé de 28 à 4 px.
     Les deux valeurs ci-dessous ne sont pas de moi : ce sont celles relevées
     sur l'accueil (padding 0, hauteur naturelle). Elles annulent les 14 px de
     padding et les 36 px de hauteur que le blog ajoutait de son côté. */
  padding: 0 !important;
  height: auto !important;
}
nav.navbar .nav-links > li:hover > a, nav#navbar .nav-links > li:hover > a,
nav.blog-nav .nav-links > li:hover > a, nav.blog-transparent .nav-links > li:hover > a,
nav.navbar .nav-links > li > a.active, nav#navbar .nav-links > li > a.active {
  color: #FF6B35 !important;
}

/* ── Le bouton plein : un seul, marine, en pilule ─────────────────────────── */
nav.navbar .nav-cta, nav#navbar .nav-cta,
nav.blog-nav .nav-cta, nav.blog-transparent .nav-cta {
  padding: 9px 20px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border-radius: 100px !important;
  background: #001A3D !important;
  color: #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}
nav.navbar .nav-cta:hover, nav#navbar .nav-cta:hover,
nav.blog-nav .nav-cta:hover, nav.blog-transparent .nav-cta:hover {
  background: #000B1F !important;
  transform: translateY(-1px);
}

/* ── Le drapeau et les chevrons ───────────────────────────────────────────── */
nav.navbar .nav-flag, nav#navbar .nav-flag,
nav.blog-nav .nav-flag, nav.blog-transparent .nav-flag { color: #4A5A7A !important; }
nav.navbar .nav-chevron, nav#navbar .nav-chevron,
nav.blog-nav .nav-chevron, nav.blog-transparent .nav-chevron { opacity: .55 !important; }

/* ── Sous 880 px, la barre se resserre comme sur l'accueil ────────────────── */
@media (max-width: 880px) {
  nav.navbar, nav#navbar, nav.blog-nav, nav.blog-transparent {
    padding: 10px 16px !important;
  }
  nav.navbar .nav-logo, nav#navbar .nav-logo,
  nav.blog-nav .logo-text, nav.blog-transparent .logo-text { font-size: 20px !important; }
}

/* ── La liste et le logo eux-mêmes ────────────────────────────────────────
   Les liens étaient bien ramenés à 36 px, mais la barre restait à 90 : la
   hauteur venait du <ul> (64 px), des <li> (46 px) et du logo du blog (47 px),
   qui portent leurs propres hauteurs. On les aligne tous sur l'accueil. */
/* L'écart de 28 px est celui de l'accueil : c'est LUI la référence, pas une
   valeur que je choisis. Relevé sur la page validée le 02-08. */
nav.navbar .nav-links, nav#navbar .nav-links,
nav.blog-nav .nav-links, nav.blog-transparent .nav-links {
  display: flex !important;
  align-items: center !important;
  gap: 28px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
nav.navbar .nav-links > li, nav#navbar .nav-links > li,
nav.blog-nav .nav-links > li, nav.blog-transparent .nav-links > li,
nav.navbar .nav-links > .nav-item, nav#navbar .nav-links > .nav-item {
  height: auto !important;
  display: flex !important;
  align-items: center !important;
}
nav.navbar .nav-right, nav#navbar .nav-right,
nav.blog-nav .nav-right, nav.blog-transparent .nav-right {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  height: auto !important;
}
/* Le logo : le mot seul, à la même hauteur partout. Le cube SVG du blog reste
   masqué (il l'était déjà dans blog-styles.css) mais il gonflait le lien. */
nav.navbar .nav-logo, nav#navbar .nav-logo,
nav.blog-nav .nav-logo-iso, nav.blog-transparent .nav-logo-iso,
nav.blog-nav .logo, nav.blog-transparent .logo {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
  gap: 8px !important;
}
nav.blog-nav .nav-logo-iso svg, nav.blog-transparent .nav-logo-iso svg { display: none !important; }


/* ── LA HAUTEUR, IMPOSÉE UNE BONNE FOIS ───────────────────────────────────
   Régler les enfants un par un ne suffisait pas : à chaque page, un élément
   différent dépassait (le logo ici, la liste là, le bouton ailleurs), et une
   correction sur l'un décalait les autres. On fixe donc la hauteur de la BARRE
   et on centre tout dedans. 62 px, la valeur de l'accueil, partout. */
nav.navbar, nav#navbar, nav.blog-nav, nav.blog-transparent {
  height: 62px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
}
@media (max-width: 880px) {
  nav.navbar, nav#navbar, nav.blog-nav, nav.blog-transparent { height: 56px !important; }
}

/* ── QUAND ON CLIQUE UN LIEN, LA SECTION NE DOIT PAS ATTERRIR SOUS LA BARRE ──
   Rodolphe : « ça coupe une partie des éléments. J'avais demandé à ce que ce
   soit bien en dessous du menu dès qu'on commence à écrire des choses. »

   La règle existait dans css/doaken-base.css (scroll-padding-top: 120px), mais
   les pages qui ne chargent pas cette feuille — le blog entier, les ressources —
   ne l'avaient jamais. Mesuré : après un clic sur une ancre, la cible se posait
   à 0 px, donc 76 px de son contenu passaient derrière la barre.

   La barre occupe 14 px de haut + 62 px de hauteur = 76 px. On réserve 100 px :
   la section arrive avec 24 px de respiration au-dessus, jamais collée. */
html {
  scroll-padding-top: 100px !important;
}
@media (max-width: 880px) {
  html { scroll-padding-top: 88px !important; }
}
/* Même réserve pour une section ciblée directement (ancre dans l'adresse). */
:target { scroll-margin-top: 100px !important; }

/* ── Le sélecteur de langue reste masqué dans la barre ────────────────────
   Décision Rodolphe du 17-07 : le site anglais reste, avec un sélecteur
   DISCRET EN BAS DE PAGE — pas dans le menu. Il est masqué sur l'accueil par
   css/country-selector.css, mais le blog ne charge pas cette feuille : depuis
   que le côté droit est repris de l'accueil, le drapeau y apparaissait. */
nav .country-selector { display: none !important; }


/* ── LE MÉGA-MENU ─────────────────────────────────────────────────────────
   02-08 — J'ai copié le balisage du menu de l'accueil sur 123 pages pour qu'il
   soit identique partout. Mais les règles qui le font FONCTIONNER (le panneau
   déroulant qui s'ouvre au survol) vivent dans css/doaken-nav-footer.css, que
   le blog et plusieurs autres pages ne chargent pas. Résultat : « Fonctionnalités »
   décalé de 6 px, une flèche mal posée, et le déroulant qui ne s'ouvre plus.
   Rodolphe : « il n'est plus utilisable le menu. »

   On ne charge PAS la feuille entière — elle emporterait aussi le pied de page
   et déplacerait ce qui marche. On ne reprend que les règles du menu. */
.nav-links .nav-item { position: relative; }
.nav-links .nav-item > a { display: inline-flex; align-items: center; gap: 4px; }
.nav-links .nav-chevron { width: 12px; height: 12px; transition: transform .2s ease; opacity: 0.6; }
.nav-links .nav-item:hover .nav-chevron { transform: rotate(180deg); opacity: 1; }
.nav-links .nav-item:hover::after { pointer-events: auto; }
.nav-links .nav-item:hover .nav-dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.nav-dropdown a { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--text-h1, #001A3D); letter-spacing: -0.005em; transition: background .15s ease; }
.nav-dropdown a:hover { background: var(--bg-section, #EAF1F8); color: var(--text-h1, #001A3D); }
.nav-dropdown a:hover img { transform: scale(1.06) rotate(-2deg); }
.nav-dropdown a img { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; flex-shrink: 0; transition: transform .25s cubic-bezier(.4, 0, .2, 1); background: var(--bg-section, #EAF1F8); }


/* Le panneau déroulant faisait 560 px de large sur le blog contre 280 sur
   l'accueil : une règle des feuilles du blog doublait sa largeur.
   MÊME TAILLE QUE SUR L'ACCUEIL, partout. */
nav .nav-dropdown { top: calc(100% + 8px) !important; left: 50% !important; transform: translateX(-50%) translateY(8px) !important; border-radius: 16px !important; padding: 12px !important; min-width: 280px !important; transition: opacity .22s ease, transform .22s ease, visibility .22s !important }