/* zzzzz-menu-fab-fix.css — (16/08 Option B, demande Julien « ça se chevauche sur toutes les pages »)
   Le ☰ menu flottant (.ar-menu-fab, position:fixed en haut à droite) apparaît sur TOUTES les pages
   reskinées qui masquent .pub-topbar, et recouvrait l'avatar / les actions du haut de chaque écran.
   Solution générale : on RÉSERVE sa place à droite de chaque barre du haut (l'avatar/les actions se
   décalent à gauche), le ☰ reste présent (coin haut-droit, 10px) SANS chevaucher.
   Chargé en DERNIER (5 « z ») pour gagner sur les autres lots. 100% additif, scopé html.apprefonte
   + ≤768px. Rollback = supprimer ce fichier. Ne touche NI Gardien NI Étincelles.
   Note : .ar-rg-head (Réglages) est CENTRÉE → volontairement exclue (padding-right la décentrerait ;
   son haut-droit est vide, donc pas de chevauchement). */

@media (max-width: 768px), (pointer: coarse) and (max-width: 1366px), (display-mode: standalone) and (max-width: 1366px) {

  /* 1) En-têtes reskinées : réserver la place du ☰ (l'avatar/les actions passent à gauche). */
  html.apprefonte .ar-cg-head,
  html.apprefonte .ar-ck-head,
  html.apprefonte .ar-cr-head,
  html.apprefonte .ar-dm-head,
  html.apprefonte .ar-gd-head,
  html.apprefonte .ar-msg-head,
  html.apprefonte .ar-nt-head,
  html.apprefonte .ar-pp-head,
  html.apprefonte .ar-rd-head,
  html.apprefonte .ar-secu-head,
  html.apprefonte .ar-so-head,
  html.apprefonte .ar-souv-head,
  html.apprefonte .ar-vy-head {
    padding-right: 52px !important;
  }

  /* 2) Carte : l'avatar (dans la barre de recherche) passe à gauche du ☰. Les chips sont déjà
        SOUS le ☰ (barre empilée) et défilent → on ne touche qu'à la searchrow. */
  html.apprefonte body.page-carte .fdcmap-searchrow {
    padding-right: 52px !important;
  }
}

/* ===========================================================================
   AJOUT 17/08 (demande Julien « regarde si ça se chevauche partout : PC / tablette / app »)
   Le bloc ci-dessus ne s'appliquait qu'en ≤768 / tablette / standalone. Or le ☰ flottant
   apparaît AUSSI sur GRAND ÉCRAN souris (>768) — cas non couvert :
     • Refonte PC (html.pcrefonte) : la barre du haut masque son bouton menu (rail à gauche)
       mais garde ses actions → le ☰ s'affichait PAR-DESSUS « Se déconnecter » sur chaque page.
     • Écrans reskinés (Radar, Voyageurs, Compagnons, Demandes, Rien oublier, Carnet…) :
       le ☰ tombait sur l'avatar / la cloche / l'engrenage du coin.
   On étend la réservation de place au grand écran, et on décale le bloc d'actions de la barre
   du haut en refonte PC. Mesuré en prod (chevauchement 34–40px → 0). 100% additif, réversible
   (supprimer ce bloc). .ar-rg-head (Réglages, centrée) reste exclue. Ni Gardien ni Étincelles.
   =========================================================================== */
@media (min-width: 769px) {

  /* a) En-têtes reskinées : réserver la place du ☰ (avatar/cloche/engrenage passent à gauche). */
  html.apprefonte .ar-cg-head,
  html.apprefonte .ar-ck-head,
  html.apprefonte .ar-cr-head,
  html.apprefonte .ar-dm-head,
  html.apprefonte .ar-gd-head,
  html.apprefonte .ar-msg-head,
  html.apprefonte .ar-nt-head,
  html.apprefonte .ar-pp-head,
  html.apprefonte .ar-rd-head,
  html.apprefonte .ar-secu-head,
  html.apprefonte .ar-so-head,
  html.apprefonte .ar-souv-head,
  html.apprefonte .ar-vy-head {
    padding-right: 60px !important;
  }
  html.apprefonte body.page-carte .fdcmap-searchrow {
    padding-right: 60px !important;
  }

  /* b) Refonte PC : la barre du haut garde notif/déconnexion (bouton menu masqué par le rail) →
        on décale ce bloc d'actions pour dégager le coin du ☰. */
  html.pcrefonte .pub-topbar .pub-actions {
    margin-right: 60px !important;
  }

  /* c) ALIGNEMENT VERTICAL du ☰ avec la rangée de contrôles du coin (grand écran) :
        - pages avec barre du haut (refonte PC) : rangée centrée ~36px → ☰ top 14px.
        - écrans reskinés (barre du haut masquée, en-tête plus bas ~48px) : ☰ top 26px
          (gagne par spécificité sur la règle pcrefonte ci-dessus). */
  html.pcrefonte .ar-menu-fab {
    top: calc(env(safe-area-inset-top, 0px) + 14px) !important;
  }
  html.apprefonte body.page-autour .ar-menu-fab,
  html.apprefonte body.page-moments .ar-menu-fab,
  html.apprefonte body.page-compagnons .ar-menu-fab,
  html.apprefonte body.page-my-requests .ar-menu-fab,
  html.apprefonte body.page-rien-oublier .ar-menu-fab {
    top: calc(env(safe-area-inset-top, 0px) + 26px) !important;
  }
}

/* ===========================================================================
   AJOUT 18/08 — FINITION « RANGÉE DU HAUT » (demande Julien : le profil, la cloche
   et le menu ne doivent plus se toucher ni se recouvrir).
   Tout est GÉOMÉTRIQUE : on donne sa place à chaque bouton. Aucun z-index n'a été
   ajouté, rien n'est caché derrière autre chose.

   CE QUI A ÉTÉ MESURÉ EN PROD (Chrome connecté, cadre 360×800 et 390×844) :
     • Le ☰ flottant tombait PILE sur l'avatar « Mon passeport » de la barre du haut :
       1 414 px² de recouvrement. Les 5 points de test tactile de l'avatar renvoyaient
       le MENU → toucher son passeport ouvrait le menu. Avatar réellement inatteignable.
     • Cloche ↔ avatar : 5 px d'écart. Cloche ↔ ☰ : 3 px. (minimum voulu : 8 px)
     • Sur les écrans reskinés, la réservation de place de 52 px était trop courte :
       « Autour de moi » ☰ ✖ avatar = 112 px², « Compagnons » ☰ ✖ cloche = 112 px²,
       « Carnet » 5 px d'écart. Le ☰ est à right:12px et fait 44 px : son bord gauche
       est donc à (largeur − 56). Il faut réserver 64 px pour garder 8 px d'air.
     • Cibles tactiles trop petites : cloche 36×36, avatar 44×36, Phare 105×40.

   RÉSULTAT APRÈS (mesuré aux deux tailles) : 0 intersection, écarts 8 / 10 / 12 px,
   toutes les cibles ≥ 44×44, 0 débordement horizontal, et le nom du site reste
   affiché en entier (il n'est pas tronqué).

   100 % additif — rollback = supprimer ce bloc « AJOUT 18/08 ».
   Ne touche NI le Gardien, NI Étincelles, NI la carte elle-même.
   =========================================================================== */

/* --- (1) Réservation de la place du ☰ : 52 → 64 px (mêmes écrans qu'avant). ------ */
@media (max-width: 768px), (pointer: coarse) and (max-width: 1366px), (display-mode: standalone) and (max-width: 1366px) {
  html.apprefonte .ar-cg-head,
  html.apprefonte .ar-ck-head,
  html.apprefonte .ar-cr-head,
  html.apprefonte .ar-dm-head,
  html.apprefonte .ar-gd-head,
  html.apprefonte .ar-msg-head,
  html.apprefonte .ar-nt-head,
  html.apprefonte .ar-pp-head,
  html.apprefonte .ar-rd-head,
  html.apprefonte .ar-secu-head,
  html.apprefonte .ar-so-head,
  html.apprefonte .ar-souv-head,
  html.apprefonte .ar-vy-head {
    padding-right: 64px !important;
  }
  html.apprefonte body.page-carte .fdcmap-searchrow {
    padding-right: 64px !important;
  }
  /* La carte a AUSSI une barre de recherche « v2 » (reskin 13/08) que le correctif
     du 17/08 ne connaissait pas : le ☰ recouvrait « Ma position » (657 px²). */
  html.apprefonte body.page-carte .pc-carte-topbar .carte-searchbar {
    padding-right: 64px !important;
  }
}

@media (min-width: 769px) {
  html.apprefonte .ar-cg-head,
  html.apprefonte .ar-ck-head,
  html.apprefonte .ar-cr-head,
  html.apprefonte .ar-dm-head,
  html.apprefonte .ar-gd-head,
  html.apprefonte .ar-msg-head,
  html.apprefonte .ar-nt-head,
  html.apprefonte .ar-pp-head,
  html.apprefonte .ar-rd-head,
  html.apprefonte .ar-secu-head,
  html.apprefonte .ar-so-head,
  html.apprefonte .ar-souv-head,
  html.apprefonte .ar-vy-head {
    padding-right: 64px !important;
  }
  html.apprefonte body.page-carte .fdcmap-searchrow,
  html.apprefonte body.page-carte .pc-carte-topbar .carte-searchbar {
    padding-right: 64px !important;
  }
  /* Grand écran : on ne décale la rangée d'actions QUE si le ☰ flottant est vraiment
     affiché en même temps que la barre du haut (classe posée par le script du ☰).
     Remplace — sans s'y ajouter — la règle « pcrefonte 60px » écrite le 17/08. */
  html.ar-fab-bar .pub-topbar .pub-actions {
    margin-right: 64px !important;
  }
}

/* --- (2) TÉLÉPHONE : la barre du haut où le ☰ flottant recouvrait l'avatar. ------
   html.ar-fab-bar n'est posée QUE lorsque le ☰ flottant ET la barre du haut sont
   visibles en même temps (script du ☰ dans includes/header.php). Donc rien ne bouge
   sur les écrans qui n'ont pas ce cumul. */
@media (max-width: 768px) {

  /* La barre ne doit jamais passer à la ligne : sinon les actions descendent sous le
     titre et le ☰ retombe dessus. Le titre, lui, a le droit de rétrécir. */
  /* ATTENTION : responsive-fix.css impose « flex-wrap:wrap !important » sur html.respfix
     et il est charge APRES ce fichier. A specificite egale, c est LUI qui gagnait et la
     barre repassait a la ligne : les actions descendaient sous le titre et le menu
     flottant retombait sur le titre du site (mesure : 1 936 px2 de recouvrement).
     Il faut donc une regle PLUS PRECISE (deux classes sur <html>). Le titre, lui, peut
     retrecir sans deborder (min-width:0 + overflow:hidden juste en dessous). */
  html.apprefonte .pub-topbar,
  html.respfix.apprefonte .pub-topbar { flex-wrap: nowrap !important; }
  html.apprefonte .pub-topbar .pub-topbrand {
    min-width: 0 !important;
    min-height: 44px !important;   /* cible tactile : le titre est un lien vers l'accueil */
    overflow: hidden;
  }
  html.apprefonte .pub-topbar .pub-topbrand .pub-topbrand-text {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Écart entre deux boutons voisins : 5 px → 10 px. */
  html.apprefonte .pub-topbar .pub-actions {
    gap: 10px !important;
    flex: 0 0 auto !important;
  }

  /* La colonne du ☰ flottant, réservée dans la barre : l'avatar s'arrête 12 px avant lui. */
  html.ar-fab-bar.apprefonte .pub-topbar .pub-actions {
    padding-right: 58px !important;
  }
  /* …et le ☰ se met sur la MÊME ligne que la cloche et l'avatar (il était 4 px plus bas). */
  html.ar-fab-bar.apprefonte .ar-menu-fab {
    top: calc(env(safe-area-inset-top, 0px) + 6px) !important;
  }

  /* --- (3) Cibles tactiles : 44×44 px minimum, sans grossir la barre. --- */
  html.apprefonte .pub-topbar .pub-actions > .pub-notif-wrap {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
  html.apprefonte .pub-topbar .pub-actions .pub-icon-btn,
  html.apprefonte .pub-topbar .pub-actions .pub-profile {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  html.apprefonte .pub-topbar .pub-actions .pub-phare,
  html.apprefonte .ar-phare-row .pub-phare,
  html.apprefonte .pub-phare-wrap .pub-phare {
    min-height: 44px !important;
  }
}

/* ===========================================================================
   AJOUT 18/08 (b) — L'APP INSTALLÉE (PWA) ET LES TABLETTES TACTILES.
   Julien a montré sa fenêtre d'app installée (~774 px de large) : le ☰ y était
   PLUS HAUT et PLUS GROS que la cloche. Mesuré : 31 px de décalage vertical,
   cloche et avatar à 36 px de haut seulement.
   Le bloc précédent était borné à 768 px, donc il ne couvrait pas ce cas :
   dans l'app installée la fenêtre peut faire jusqu'à 1366 px de large tout en
   affichant la présentation « app ».

   Ici on ne touche QUE la taille des cibles : la mise en page de cette largeur
   (barre sur deux lignes, salutation) reste exactement celle d'aujourd'hui.
   L'ALIGNEMENT VERTICAL du ☰, lui, est calculé par le script du ☰ dans
   includes/header.php : une valeur fixe ne peut pas convenir, la rangée est à
   28 px du haut sur téléphone et à 71 px dans l'app installée.
   Mesuré après : décalage 0, cibles 44×44, 0 chevauchement, 0 débordement.
   Rollback = supprimer ce bloc.
   =========================================================================== */
@media (max-width: 768px), (pointer: coarse) and (max-width: 1366px), (display-mode: standalone) and (max-width: 1366px) {
  html.apprefonte .pub-topbar .pub-actions > .pub-notif-wrap {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
  html.apprefonte .pub-topbar .pub-actions .pub-icon-btn,
  html.apprefonte .pub-topbar .pub-actions .pub-profile {
    min-width: 44px !important;
    min-height: 44px !important;
  }
}