/* ====================================================================
   MDF2026 · V69.4.1 — HEADER RESPONSIVE
   ====================================================================
   Le header public reste sur deux niveaux (identité/actions puis
   navigation). Cette feuille corrige le débordement horizontal du menu
   (overflow:auto d'origine qui tronquait « Contact ») et apporte une
   vraie présentation mobile :

     — >= 1220 px : deux niveaux ; les 12 rubriques tiennent sur UNE
       ligne (conteneur de menu élargi) — jamais de repli « orphelin »,
       jamais de scroll ;
     — <  1220 px : hamburger + panneau repliable, mêmes entrées que la
       navigation desktop (même source PHP), états ARIA gérés sans
       dépendance externe, fonctionnel sans JavaScript (label/checkbox).

   Aucun positionnement fixe : le header conserve son flux normal
   (pas de bandeau sticky qui consommerait l'écran sur mobile).

   V69.4.1 (correctif mobile, voir fin de fichier) : le titre de marque
   occupe toute la largeur restante sur <= 780 px — « Marchés de France »
   + « Haute-Loire et Nord Lozère » restent entiers et lisibles, sans
   troncature, masquage ni chevauchement avec le bouton Menu.
   ==================================================================== */

/* ---- Interrupteur et bouton : invisibles en desktop ---------------- */
.nav-toggle,
.nav-toggle-input { display: none; }

/* ---- Navigation principale : jamais de scroll horizontal ----------- */
.main-nav .container { overflow: visible; }
.nav-row { display: flex; flex-wrap: wrap; align-items: stretch; }

/* V70.11.0 — le menu principal compte 12 rubriques. Mesures réelles : à
   12px/entretoise 10px il occupe ~1173 px. Le conteneur global plafonnant
   à 1120 px, la dernière entrée (« Carte des marchés ») basculait seule
   sur une deuxième ligne. On élargit donc le conteneur du menu sur grand
   écran AU LIEU de réduire les libellés, et sous 1220 px c'est la
   navigation repliable qui prend le relais (jamais de repli « orphelin »). */
.main-nav a {
  flex: none;
  padding: 12px 10px 11px;
  font-size: 12px;
  letter-spacing: 0.01em;
}
.main-nav a.active { border-bottom-color: var(--yellow); }

/* Lien « Actualités » pill du niveau haut : aucune modification. Les
   entrées dupliquées dans la barre mobile sont masquées en desktop. */
.main-nav-actions { display: none; }

@media (min-width: 1220px) {
  .main-nav .container { width: min(1240px, calc(100% - 24px)); }
}
@media (min-width: 1400px) {
  .main-nav .container { width: min(1360px, calc(100% - 24px)); }
  .main-nav a { padding: 14px 13px 12px; font-size: 12.5px; }
}

/* ====================================================================
   MOBILE / TABLETTE (< 1220 px)
   ==================================================================== */
@media (max-width: 1219px) {
  /* Ligne principale compacte : identité à gauche, bouton menu à droite.
     Les liens « Actualités » / « Espace adhérent » du niveau haut se
     déplacent dans le panneau (mêmes adresses, mêmes intitulés). */
  .header-actions,
  .header-actions > a,
  .header-actions > a:first-child { display: none; }

  .nav-toggle-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
  }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-left: auto;
    padding: 10px 12px;
    border: 1px solid #b5c5ce;
    border-radius: 22px;
    background: #fff;
    color: #123f6d;
    font: 800 13px/1 Arial, Helvetica, sans-serif;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }
  .nav-toggle:focus-visible { outline: 3px solid #f1ba2b; outline-offset: 2px; }

  .nav-toggle-box { display: grid; gap: 4px; width: 18px; }
  .nav-toggle-box span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.18s ease, opacity 0.18s ease;
  }

  /* Panneau repliable, dans le flux (aucun bandeau fixe). */
  .main-nav { display: none; background: var(--blue); }
  .nav-toggle-input:checked ~ .main-nav { display: block; }

  .main-nav .container {
    display: grid;
    gap: 0;
    padding: 4px 0 14px;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
  }
  .main-nav a {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 3px solid transparent;
    font-size: 15px;
    letter-spacing: 0;
  }
  .main-nav a.active { border-left-color: var(--yellow); border-bottom-color: transparent; color: #fff; }

  /* Entrées « Actualités » / « Espace adhérent » dans le panneau. */
  .main-nav-actions {
    display: flex;
    align-items: center;
    width: fit-content;
    min-height: 44px;
    margin: 12px 20px 0;
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 22px;
    color: #fff;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.06);
  }
  .main-nav-actions + .main-nav-actions { margin-top: 8px; }

  /* Petits écrans : libellé du bouton réduit, identité recentrée. */
  @media (max-width: 390px) {
    .nav-toggle-label { display: none; }
    .nav-toggle { border-radius: 50%; padding: 12px; }
    .brand small { white-space: normal; }
  }
}

/* ====================================================================
   V69.4.1 · TITRE DE MARQUE INTÉGRALEMENT LISIBLE SUR PETIT ÉCRAN
   ====================================================================
   Jusqu'ici, v37.css plafonnait le titre à 126/145 px
   (.brand strong / .brand small { max-width : … }) : le bloc identité se
   cassait sur plusieurs lignes dans une largeur forcée et, selon la
   métrique de police du terminal, pouvait gagner vers le bouton Menu ou
   la navigation du header.

   Correctif STRICTEMENT mobile (<= 780 px — même point de bascule que la
   mise en forme historique de v37.css). Desktop et tablette >= 781 px :
   AUCUN changement (leurs règles restent inchangées) :

     — le bloc marque occupe toute la largeur restante (flex + min-width)
       et le bouton Menu est en flex:none : aucun chevauchement possible ;
     — logo légèrement réduit (48 → 44 px), jamais comprimé (flex:none) ;
     — corps adaptés (14 / 13,5 px pour le nom, 9,5 / 9 px pour le
       territoire) avec interlignes explicites et césures propres ;
     — la topbar garde sa hauteur automatique : si le titre prend deux
       lignes, l'en-tête grandit — rien n'est tronqué ni masqué.

   header.css est la dernière feuille de base chargée (après v37.css) :
   ces règles écrasent les plafonds historiques sans modifier l'HTML ni
   le JavaScript du header, et sans toucher au reste du site.
   ==================================================================== */
@media (max-width: 780px) {
  .topbar { align-items: center; gap: 10px; }
  .brand { flex: 1 1 auto; min-width: 0; gap: 8px; align-items: center; }
  .brand img { flex: none; width: 44px; height: 44px; }
  .brand > span { min-width: 0; }
  .brand strong {
    max-width: none;
    font-size: 14px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
  }
  .brand small {
    max-width: none;
    font-size: 9.5px;
    line-height: 1.3;
    letter-spacing: 0.04em;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .nav-toggle { flex: none; }

  /* Très petits écrans : léger resserrement des corps de texte. */
  @media (max-width: 470px) {
    .brand strong { font-size: 13.5px; }
    .brand small { font-size: 9px; letter-spacing: 0.03em; }
  }
}

/* ====================================================================
   V69.5.0 · HEADER GLOBAL — bandeaux, identité, boutons d'action
   ====================================================================
   Le header est désormais configuré depuis /admin/header.php : bandeaux
   d'information (3 max, niveaux à couleurs réglables), identité
   (logo / nom / sous-titre, chacun masquable) et boutons d'action
   (libellé, adresse, couleurs, ordre). Le rendu ci-dessous est celui des
   mêmes fonctions partagées avec le Back-office (aperçu).

   Toujours dans le flux : aucun bandeau fixe ni sticky. La topbar
   conservée répond au repli (flex-wrap) plutôt qu'à la troncature.
   ==================================================================== */

/* ── Bandeaux d'information, au-dessus du header ────────────────────── */
.site-banners { display: grid; gap: 10px; background: #fff; }
.site-banner {
  position: relative;               /* point d'ancrage du lien global */
  background: var(--banner-bg, #e7f0fa);
  color: var(--banner-fg, #123f6d);
  font-size: 14px;
  line-height: 1.55;
  overflow-wrap: anywhere;          /* aucun mot ne déborde sur mobile */
}
.site-banner .container { width: min(1120px, calc(100% - 40px)); margin: auto; padding: 12px 0; }
.site-banner p { margin: 0.35em 0; }
.site-banner h2, .site-banner h3, .site-banner h4 { margin: 0.5em 0 0.3em; color: inherit; }
.site-banner ul, .site-banner ol { margin: 0.35em 0; padding-left: 1.2em; }
.site-banner a:not(.site-banner-hit) { color: var(--banner-link, #1d5fa8); }
.site-banner img { max-width: 100%; height: auto; display: block; } /* responsive */
.site-banner-hit { display: block; color: inherit; text-decoration: none; }
.site-banner-hit::after {
  content: "";
  position: absolute;
  inset: 0;                        /* le clic couvre tout le bandeau */
}

/* ── Boutons d'action (niveau haut) ─────────────────────────────────── */
.header-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 13px;
  border: 1px solid transparent;   /* surchargé inline : bordure adaptée */
  border-radius: 20px;
  color: #38556b;                  /* surchargé inline par la configuration */
  text-decoration: none;
  font-size: 14px;
  line-height: 1.2;
}

/* Largeur bureau : la topbar accepte de prendre deux lignes plutôt que
   de tronquer ou masquer des boutons (aucun nowrap ni text-overflow). */
@media (min-width: 1024px) {
  .topbar { height: auto; min-height: 86px; padding: 14px 0; flex-wrap: wrap; }
  .header-actions { flex-wrap: wrap; gap: 10px 16px; }
}