/* ============================================================
   NAVBAR SUR TÉLÉPHONE — CORRECTIFS
   Gestion des Directions Communales — AE Global Service
   Novembre 2026
   ------------------------------------------------------------
   À charger APRÈS site.css. Ce fichier ne remplace rien : il
   corrige trois défauts mesurés dans un vrai navigateur, à
   360, 390 et 414 px de large.

   CE QUI N'ALLAIT PAS

   1. LA PAGE SE DÉCALAIT SUR LE CÔTÉ  (le vrai défaut)
      Le tiroir du menu (.menu-pub) est en position fixe et
      repoussé hors écran par translateX(100%). Un élément
      repoussé reste compté dans la largeur à faire défiler :
      la page gagnait 16 px de défilement horizontal. En
      glissant le doigt, tout l'écran se décalait et l'en-tête
      paraissait déformé. C'est ce que l'on voyait.

   2. LE NOM DE LA COMMUNE PASSAIT À LA LIGNE
      « Mairie de Natitingou » en 21 px ne tient pas à côté du
      blason de 50 px et du bouton de menu sur un écran de
      360 px : le titre se cassait en deux lignes et l'en-tête
      passait de 78 à 84 px.

   3. LE BOUTON DE MENU ÉTAIT PETIT POUR UN DOIGT
      40 x 32 px. En dessous de 44 px, on rate la cible.
   ============================================================ */


/* ------------------------------------------------------------
   1. PLUS DE DÉFILEMENT LATÉRAL

   « clip » et non « hidden » : hidden fabrique un conteneur de
   défilement, ce qui casserait le position:sticky de l'en-tête —
   il ne resterait plus collé en haut. clip coupe sans rien
   créer. Le hidden qui suit ne sert que de repli pour les
   navigateurs anciens, et il est posé sur body seulement, où il
   ne gêne pas le sticky de l'en-tête.
   ------------------------------------------------------------ */
@media (max-width: 760px) {
  html {
    overflow-x: clip;
  }
  body {
    overflow-x: clip;
    max-width: 100%;
  }

  /* Un tiroir fermé ne doit pas non plus être atteignable au
     clavier : sans cela, la tabulation emmène l'utilisateur dans
     un menu invisible. La visibilité revient à l'ouverture. */
  .menu-pub {
    visibility: hidden;
  }
  .menu-pub.ouvert {
    visibility: visible;
  }
}


/* ------------------------------------------------------------
   2. LE NOM DE LA COMMUNE TIENT SUR UNE LIGNE

   min-width:0 est la clé : sans lui, un enfant de flexbox refuse
   de se réduire en dessous de la largeur de son texte, et il
   pousse tout le reste.
   ------------------------------------------------------------ */
@media (max-width: 760px) {
  .site-nav {
    gap: 12px;
    min-height: 66px;
  }

  .marque-pub {
    min-width: 0;
    flex: 1 1 auto;
    gap: 10px;
  }

  .marque-pub .blason {
    width: 42px;
    height: 42px;
    font-size: 1.25rem;
  }

  .marque-pub .txt {
    min-width: 0;
  }

  .marque-pub .txt b {
    font-size: 1.06rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .marque-pub .txt span {
    font-size: .68rem;
    letter-spacing: .05em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Sous 380 px, le sous-titre est sacrifié : mieux vaut le nom de
   la commune lisible en entier qu'un « RÉPUBLIQUE DU BÉ… »
   tronqué au-dessus d'un nom lui-même tronqué. */
@media (max-width: 380px) {
  .marque-pub .txt span {
    display: none;
  }
  .marque-pub .txt b {
    font-size: 1.02rem;
  }
  .marque-pub .blason {
    width: 38px;
    height: 38px;
  }
}


/* ------------------------------------------------------------
   3. LE BOUTON DE MENU, ATTEIGNABLE AU DOIGT
   44 x 44 px est le minimum reconnu. On agrandit la zone
   touchable sans grossir le dessin des trois barres.
   ------------------------------------------------------------ */
@media (max-width: 760px) {
  .burger {
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: -8px;   /* recadre optiquement sur le bord */
  }
  .burger span {
    width: 22px;
  }

  /* Le tiroir ouvert doit pouvoir se refermer : l'utilisateur
     cherche d'abord à toucher à côté. */
  .menu-pub {
    padding-top: 74px;
  }
}


/* ------------------------------------------------------------
   4. LA BARRE GOUVERNEMENTALE
   Elle gardait sa hauteur de bureau alors que ses liens sont
   masqués sur téléphone : de la place perdue avant même le
   contenu.
   ------------------------------------------------------------ */
@media (max-width: 760px) {
  .gouv-bar {
    font-size: .72rem;
  }
  .gouv-bar-in {
    min-height: 30px;
    padding-top: 4px;
    padding-bottom: 4px;
  }
}