/* ══════════════════════════════════════════════════════════════════════════
   LA BARRE ET SON MENU — LE MÊME PARTOUT
   ══════════════════════════════════════════════════════════════════════════
   Rodolphe, 04-09-2026 : « le menu change selon les différentes pages et donc
   pas de menu complet excepté sur l'accueil ».

   doaken-barre-unique.css (02-08) avait déjà aligné l'APPARENCE des trois
   barres concurrentes. Ce qui restait différent, c'était le CONTENU : la barre
   de l'accueil porte Fonctionnalités (10), Secteurs (14) et Ressources (11),
   les pages de blog n'en portaient que six entrées d'une génération précédente,
   avec un autre logo et un sélecteur de langue retiré ailleurs le 21-08.

   Cette feuille porte la barre de l'accueil, valeurs comprises, pour qu'une
   page n'ait plus à la redéclarer. Les variables sont préfixées --bm- : le
   blog a ses propres tokens (--marine, --accent), on ne marche pas dessus.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --bm-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --bm-encre: rgb(17 17 17);
  --bm-texte: rgb(0 0 0 / 89.8%);
  --bm-texte-doux: rgb(0 0 0 / 60%);
  --bm-filet: rgb(0 0 0 / 8%);
  --bm-filet-visible: rgb(0 0 0 / 24%);
  --bm-gris-100: #f9f9f8;
  --bm-gris-200: #f6f5f4;
  --bm-bleu: #0075de;
  --bm-bleu-fonce: #005bab;
  --bm-hauteur: 64px;
}

/* padding: 0 — une feuille ancienne pose « nav { padding: .75rem 5% } » sur
   toute nav. La marge intérieure appartient à .barre-inner, pas à la barre :
   sans cette remise à zéro, le volet du téléphone était décalé de 20px et
   amputé d'autant. */
.barre {
  position: fixed; inset: 0 0 auto 0; z-index: 100; padding: 0;
  min-height: var(--bm-hauteur); background: #fff;
  font-family: var(--bm-sans);
  box-shadow: 0 1px 0 0 rgb(0 0 0 / 0%); transition: box-shadow .2s ease;
}
.barre.defilee { box-shadow: 0 1px 0 0 rgb(0 0 0 / 10%); }
.barre * { box-sizing: border-box; }
.barre a { text-decoration: none; }
/* 🔴 « position: relative » N'EST PAS DÉCORATIF (04-09). Sans lui, le volet
   du téléphone — posé en absolu sous la barre — s'ancrait à sa CASE de grille
   et non à la barre : un panneau de 200px flottant au milieu de l'écran, le
   texte de la page visible tout autour. Défaut d'origine de l'accueil, jamais
   vu parce que personne n'ouvre le menu au téléphone en travaillant. */
.barre-inner {
  position: relative;
  min-height: var(--bm-hauteur); padding: 14px 24px;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; column-gap: 32px;
}
.barre .marque { justify-self: start; display: inline-flex; align-items: center; height: 36px; }
.barre .marque img { width: 36px; height: 36px; }
.barre-menu { justify-self: center; display: flex; align-items: center; gap: 2px; position: relative; }
.barre-menu > a {
  font-size: 16px; font-weight: 400; line-height: 24px; color: var(--bm-texte);
  padding: 5px 10px; border-radius: 4px; transition: background-color .12s ease;
}
.barre-menu > a:hover { background: var(--bm-gris-200); color: var(--bm-encre); }

/* ─── les trois déroulants ─────────────────────────────────────────────── */
/* Volontairement « static » : c'est .barre-menu qui sert d'ancrage au panneau,
   pour qu'il se centre sur la page et non sur son bouton (voir plus bas). */
.deroulant { position: static; }
.deroulant-bouton {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: 16px; color: var(--bm-texte); background: none; border: 0;
  padding: 5px 10px; border-radius: 4px; cursor: pointer; transition: background-color .12s ease;
}
.deroulant-bouton svg {
  width: 10px; height: 6px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease;
}
.deroulant-bouton:hover, .deroulant.ouvert .deroulant-bouton { background: var(--bm-gris-200); color: var(--bm-encre); }
.deroulant.ouvert .deroulant-bouton svg { transform: rotate(180deg); }
/* 🔴 LE PANNEAU SE CENTRE SUR LA BARRE, PAS SUR SON BOUTON (04-09).
   Centré sur le bouton, « Fonctionnalités » — le plus à gauche — sortait de
   l'écran par la gauche dès 1280px de large, la largeur d'écran la plus
   courante : la première colonne était coupée en deux. Ancré sur le menu, qui
   est lui-même centré dans la page, un panneau de 620px tient toujours. */
.deroulant-panneau {
  position: absolute; left: 50%; transform: translateX(-50%); top: calc(100% + 10px);
  width: 620px; background: #fff; border: 1px solid var(--bm-filet); border-radius: 12px;
  box-shadow: 0 12px 32px rgb(0 0 0 / 8%); padding: 8px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  max-height: min(72vh, 620px); overflow-y: auto;
}
.deroulant-panneau[hidden] { display: none; }
.deroulant-panneau a { display: block; padding: 11px 14px; border-radius: 8px; }
.deroulant-panneau a:hover { background: var(--bm-gris-100); }
.deroulant-panneau b { display: block; font-size: 15px; line-height: 21px; font-weight: 600; color: var(--bm-encre); }
.deroulant-panneau span,
.deroulant-panneau i {
  display: block; font-style: normal; font-size: 13px; line-height: 18px;
  color: var(--bm-texte-doux); margin-top: 1px;
}

/* ─── la droite : connexion et essai ───────────────────────────────────── */
.barre-actions { justify-self: end; display: flex; align-items: center; gap: 8px; }
.barre-actions .lien { font-size: 16px; color: var(--bm-texte); padding: 5px 10px; border-radius: 4px; }
.barre-actions .lien:hover { background: var(--bm-gris-200); }
.barre .bouton {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--bm-sans); font-size: 16px; font-weight: 500; line-height: 24px;
  padding: 6px 15px; min-height: 38px; border: 1px solid transparent; border-radius: 8px;
  transition: background-color .15s ease, border-color .15s ease; white-space: nowrap;
}
.barre .bouton--plein { background: var(--bm-bleu); color: #fff; border-color: var(--bm-bleu); }
.barre .bouton--plein:hover { background: var(--bm-bleu-fonce); border-color: var(--bm-bleu-fonce); }
.barre .bouton .court { display: none; }
/* flex: 0 0 auto — sur une page dont la barre est serrée, le bouton du menu
   se faisait comprimer à 0 de large par ses voisins : présent dans la page,
   visible pour le code, mais rien à toucher du doigt. Une page sans menu, et
   aucune alerte. Le bouton qui ouvre la navigation ne se comprime jamais. */
.menu-bouton {
  display: none; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 40px; height: 40px; border: 1px solid var(--bm-filet-visible);
  border-radius: 8px; background: #fff; cursor: pointer;
}
.menu-bouton span { display: block; width: 16px; height: 2px; background: var(--bm-encre); position: relative; }
.menu-bouton span::before, .menu-bouton span::after {
  content: ''; position: absolute; left: 0; width: 16px; height: 2px; background: var(--bm-encre);
}
.menu-bouton span::before { top: -5px; }
.menu-bouton span::after { top: 5px; }

/* ─── sur téléphone : le menu devient un volet à plat ──────────────────────
   Mêmes points de bascule et même convention que l'accueil : c'est la classe
   « ouvert » posée sur la BARRE qui ouvre le volet, pas sur le menu. Un seul
   comportement, donc un seul script pour toutes les pages. */
@media (max-width: 900px) {
  .deroulant-panneau {
    position: static; transform: none; width: auto; grid-template-columns: 1fr;
    border: 0; box-shadow: none; padding: 0 0 0 12px;
    max-height: none; overflow: visible;
  }
  .deroulant-bouton { width: 100%; justify-content: space-between; padding: 12px 8px; }
}
@media (max-width: 1080px) {
  .barre-inner { grid-template-columns: auto 1fr; }
  .barre-menu { display: none; }
  .barre-actions .lien { display: none; }
  .menu-bouton { display: inline-flex; }
  .barre.ouvert .barre-menu {
    display: flex; flex-direction: column; align-items: stretch;
    /* 🔴 « justify-self: stretch » est ce qui donne au volet sa largeur.
       Le menu est centré dans la barre par « justify-self: center ». Sur un
       élément posé en absolu, cette valeur force une largeur au contenu
       malgré left:0 et right:0 : le volet se réduisait à 200px, centré au
       milieu de l'écran, la page visible tout autour. */
    justify-self: stretch;
    position: absolute; inset: 100% 0 auto 0; background: #fff;
    padding: 8px 16px 16px; box-shadow: 0 8px 24px -8px rgb(0 0 0 / 12%);
    max-height: calc(100vh - var(--bm-hauteur)); overflow-y: auto;
  }
  .barre.ouvert .barre-menu > a { padding: 12px 8px; }
}
@media (max-width: 700px) {
  .barre-inner { padding: 12px 16px; column-gap: 12px; }
  .barre-actions .bouton { font-size: 14px; padding: 6px 12px; min-height: 36px; }
  .barre .bouton .long { display: none; }
  .barre .bouton .court { display: inline; }
}