/* ============================================================================
   mobile-app.css — corrections MOBILE additives (chargé EN DERNIER).
   ----------------------------------------------------------------------------
   • Ne s'active QUE si l'interrupteur admin site.mobile.appcss_on = 1
     OU en mode aperçu avec ?mobapp=1 dans l'URL.
   • 100% additif et réversible (retirer le fichier = tout revient comme avant).
   • Le BUREAU (> 768px) n'est JAMAIS touché : tout est sous @media mobile.
   • But : zéro débordement horizontal, rien caché par la barre du bas ni par
     le Gardien, blocs centrés, textes lisibles.
   ============================================================================ */

/* ---------- Téléphone (≤ 768px) ---------- */
@media (max-width: 768px) {

  /* 1) AUCUN débordement horizontal. overflow-x:clip ne casse pas position:sticky. */
  html, body { overflow-x: clip; max-width: 100%; }

  /* 1bis) FOND DE PAGE STABLE EN MODE APP / PWA (demande Julien 22/07).
     Le fond est DÉJÀ un calque fixe (body.page-X::before, position:fixed) — mais posé en
     inset:0, donc sa hauteur suit le BAS du viewport. Sur mobile, quand la barre du
     navigateur apparaît/disparaît, la hauteur du viewport change → l'image (background-size:
     cover) se recadre et « saute » / zoome pendant le défilement.
     Correctif : on l'ancre en HAUT avec une hauteur = PLUS GRAND viewport (lvh), donc
     CONSTANTE → plus de resize, plus de saut, jamais de bande noire. Le contenu continue
     de défiler par-dessus (le body est déjà transparent). On NE touche PAS au cadrage
     (background-position / -size restent ceux de chaque page). App/PWA uniquement : ce
     fichier n'est chargé qu'en mode app ; le bureau n'est jamais concerné. */
  body.has-pagebg::before {
    top: 0 !important;
    bottom: auto !important;
    height: 100vh !important;   /* repli navigateurs sans lvh */
    height: 100lvh !important;  /* couvre toujours le plus grand viewport, stable */
  }

  /* (22/07) Page Feu de camp : DESCENDRE l'image de fond de 25 % (demande Julien).
     Décalage direct du calque (translateY) — fiable, contrairement au cadrage qui ne
     bougeait presque pas. Sélecteur « html body… » pour battre la règle inline du header. */
  html body.page-dashboard::before {
    transform: translateY(5%) translateZ(0) !important;
  }


  /* Les médias et gros contenus ne débordent jamais de l'écran. */
  img, video, canvas, svg, iframe, table, pre, blockquote {
    max-width: 100% !important;
  }
  img, video, canvas, iframe { height: auto; }
  /* Un tableau trop large défile DANS son bloc, sans élargir la page. */
  .pub-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* 2) Le contenu ne passe JAMAIS derrière la barre du bas NI derrière les pastilles flottantes Aide / Le Gardien (safe-area iPhone/Android). */
  .pub-content,
  main.container,
  .ppx-wrap,                          /* Passeport de Route (24/07 : n'utilise pas .pub-content) */
  body.has-bottom-nav .pub-content,
  body.has-bottom-nav .ppx-wrap {
    padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* 3) HEADER : marque sur sa ligne, boutons sur UNE SEULE LIGNE DROITE, recherche pleine largeur. */
  .pub-topbar {
    flex-wrap: wrap; row-gap: 8px;
    max-width: 100%; box-sizing: border-box; align-items: center;
  }
  .pub-topbar > * { min-width: 0; }
  .pub-topbrand { flex: 1 1 auto; min-width: 0; }
  .pub-topbrand-main { overflow-wrap: anywhere; }
  /* La RECHERCHE prend toute une ligne à elle seule → jamais coupée. */
  .pub-search {
    flex: 1 1 100%; order: 9;
    min-width: 0; max-width: 100%; box-sizing: border-box;
  }
  input[type="search"], form[role="search"] { max-width: 100%; min-width: 0; }
  /* Les boutons FR / Phare / cloche / passeport / déconnexion : UNE ligne droite, alignés à droite. */
  .pub-actions {
    flex: 1 1 100%; flex-wrap: nowrap;
    justify-content: flex-end; align-items: center;
    gap: 6px; margin-left: 0;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pub-actions::-webkit-scrollbar { display: none; }
  .pub-actions > * { flex: 0 0 auto; }
  /* Compacter pour tenir sur une ligne : Phare = icône seule, Passeport = avatar « JU » seul. */
  .pub-phare .phare-label { display: none; }
  .pub-phare { padding: 0 !important; width: 42px; height: 42px; justify-content: center; gap: 0; }
  .pub-profile .nm { display: none; }
  .pub-profile { padding: 0 !important; gap: 0 !important; }

  /* 4) Rangées de boutons / filtres / actions rapides : passent à la ligne. */
  .actions-rapides, .quick-actions, .qa-grid,
  .btn-row, .btn-group, .toolbar,
  .filters, .filter-row, .filter-bar, .chips-row {
    flex-wrap: wrap !important;
  }

  /* 5) Blocs / cartes centrés et jamais plus larges que l'écran. */
  .card, .cg-card, .panel, .block, .box, .tile {
    max-width: calc(100% - 24px);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }

  /* 6) Filet de sécurité : rien ne peut pousser la largeur au-delà de l'écran. */
  .pub-content > * { max-width: 100%; }
}

/* ---------- Très petit téléphone (≤ 420px) ---------- */
@media (max-width: 420px) {
  /* Titres géants qui débordaient → un cran plus petits (sans casser les grands titres photo). */
  h1 { font-size: clamp(20px, 6.4vw, 28px); overflow-wrap: break-word; }
  h2 { font-size: clamp(17px, 5.2vw, 22px); overflow-wrap: break-word; }

  /* Les longs mots / URLs ne débordent pas. */
  p, li, td, .pub-content { overflow-wrap: anywhere; }

  /* Boutons pleine largeur quand ils sont seuls sur leur ligne. */
  .btn-block-mobile { width: 100%; }
}

/* ============================================================================
   CARTE — légende repliable sur mobile (ne couvre plus la carte).
   Le bouton « Légende » est injecté par mobile-app.js (aucune modif de carte.php).
   ============================================================================ */
.carte-legend-toggle { display: none; }   /* caché sur bureau : la légende reste normale */

@media (max-width: 768px) {
  .carte-legend-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(6,13,30,0.94); color: #bfe6ff;
    border: 1px solid rgba(0,229,255,0.32); border-radius: 999px;
    padding: 8px 15px; font: 700 12.5px/1 'Inter', system-ui, sans-serif;
    cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  }
  .carte-legend-toggle .clt-ico { font-size: 11px; }

  /* Repliée : seul le petit bouton « Légende » reste visible (la carte respire). */
  .carte-legend.is-collapsed {
    background: none !important; border: 0 !important; padding: 0 !important;
    gap: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  .carte-legend.is-collapsed .carte-legend-item { display: none !important; }

  /* Dépliée : liste verticale compacte, jamais plus large ni plus haute que l'écran. */
  .carte-legend:not(.is-collapsed) {
    flex-direction: column; align-items: flex-start;
    max-width: calc(100vw - 24px); max-height: 42vh; overflow: auto;
    gap: 8px; padding: 12px 14px;
  }
  .carte-legend:not(.is-collapsed) .carte-legend-toggle { align-self: flex-start; margin-bottom: 2px; }
}

/* ============================================================================
   TEXTE BLEU ILLISIBLE — boîtes « info/vide » en color:var(--cyan) sur fond clair.
   Ex : « Ton carnet de route est vide… ». On passe la boîte en sombre + texte clair
   (lisible en mode jour ET nuit). Ciblage par signature du style en ligne
   (fond cyan très transparent + couleur cyan) → aucune modif des pages.
   ============================================================================ */
[style*="rgba(0,229,255"][style*="var(--cyan"] {
  background: rgba(6,13,30,0.90) !important;
  color: #d6f2ff !important;
  border-color: rgba(0,229,255,0.35) !important;
}
[style*="rgba(0,229,255"][style*="var(--cyan"] strong { color: #ffffff !important; }

/* ============================================================================
   BOUTONS « OUTLINE » (Actions rapides : Sorties, Voyages, Carte, Marché,
   Messages, Mon Phare…) — texte cyan illisible sur la photo en mode jour.
   → fond sombre net + texte BLANC, lisible en Phare ALLUMÉ (jour) ET ÉTEINT (nuit).
   Mobile uniquement. Le bureau n'est pas touché.
   ============================================================================ */
@media (max-width: 768px) {
  .adm-btn-outline {
    background: rgba(6,13,30,0.82) !important;
    color: #f2f8ff !important;
    border-color: rgba(120,190,255,0.55) !important;
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  }
  .adm-btn-outline:hover,
  .adm-btn-outline:active { background: rgba(12,26,50,0.92) !important; color: #ffffff !important; }
  .adm-btn-outline svg { color: #9fd0ff !important; }
}

/* ============================================================================
   PIED DE PAGE — la dernière phrase (mentions légales) était cachée derrière
   la barre du bas. On ajoute une marge basse pour qu'elle reste visible.
   (La barre du bas apparaît jusqu'à 900px de large.)
   ============================================================================ */
@media (max-width: 900px) {
  .site-footer { padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important; } /* (10/07) 94->150 : les dernieres lignes du pied de page ne passent plus sous les pastilles Aide / Le Gardien */
}

/* ============================================================================
   (24/07 demande Julien) PIED DE PAGE en MODE APP : garder la grille des liens
   légaux en 3 COLONNES (comme le bureau — image 2) au lieu de l'empiler en 1
   colonne sur téléphone. mobile-app.css n'est chargé qu'en mode app → n'affecte
   que l'appli. !important pour battre la règle « 1 colonne » du footer
   (footer.php @media max-width:520px). Bordures recalées comme le bureau (9 liens
   = 3×3 : pas de bord droit sur la 3e colonne, pas de bord bas sur la dernière rangée).
   ============================================================================ */
@media (max-width: 768px) {
  .sf2-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .sf2-grid a { border-right: 1px solid rgba(255,255,255,.06) !important; }
  .sf2-grid a:nth-child(3n) { border-right: 0 !important; }   /* 3e colonne (3,6,9) : pas de bord droit */
  .sf2-grid a:nth-child(n+7) { border-bottom: 0 !important; } /* dernière rangée (7,8,9) : pas de bord bas */
  .sf2-grid a span { overflow-wrap: anywhere; hyphens: auto; }
  /* Les tailles (petit) viennent maintenant de la base compacte dans footer.php. */
}
@media (max-width: 520px) {
  /* Téléphone : tuiles « app » — icône AU-DESSUS, libellé centré dessous. Les 3 colonnes
     tiennent proprement et les mots longs (Confidentialité, Responsabilité) ne se coupent plus. */
  .sf2-grid a { flex-direction: column !important; align-items: center !important; text-align: center; gap: 6px !important; padding: 13px 6px !important; font-size: 12.5px !important; line-height: 1.25; }
  .sf2-grid a svg { width: 20px !important; height: 20px !important; }
}

/* ============================================================================
   PAGE « FEU DE CAMP » — la FENÊTRE du salon (« … · salon en direct ») rendue
   plus grande, avec la BARRE D'ÉCRITURE JUSTE EN DESSOUS. Avant : la barre
   (order:5) passait tout en bas, sous le long formulaire « Prends la parole ».
   Maintenant, sur mobile : 1) fenêtre du salon, 2) barre de chat juste dessous,
   3) formulaire « Allumer le feu ». La fenêtre est plus haute et son fil défile
   à l'intérieur. Demande Julien 05/07.
   (16/07, demande Julien) HAUTEUR DYNAMIQUE comme sur PC (Phase 4) : la fenêtre
   n'est plus figée à 58dvh — elle rétrécit s'il y a peu de messages (min 340px)
   et GRANDIT avec les messages jusqu'à 72 % de l'écran, puis le fil défile à
   l'intérieur. (Sur un téléphone, 15 messages ne tiennent pas physiquement à
   l'écran : le plafond = la place réellement disponible.)
   ============================================================================ */
@media (max-width: 900px) {
  .fc-layout > .fc-center-col {
    order: 1 !important;
    display: flex !important; flex-direction: column !important;
    height: auto !important; min-height: 340px !important; max-height: 72dvh !important;
  }
  /* (16/07) overscroll-behavior:contain = quand le doigt atteint le bout du fil,
     la PAGE derrière ne se met pas à défiler toute seule (défilement au doigt propre). */
  .fc-center-col > .fc-posts-grid { flex: 1 1 auto !important; overflow-y: auto !important; min-height: 0 !important; overscroll-behavior: contain !important; }
  .fc-layout > .fc-write-bar { order: 2 !important; margin-top: 8px !important; }
  .fc-layout > .fc-compose-col { order: 3 !important; }
}

/* ============================================================================
   (17/07, demande Julien) RIEN OUBLIER en mode app : le grand bouton
   « Continuer ma préparation » était collé tout en bas (bottom:12px avec
   z-index:4000) et passait donc PAR-DESSUS le menu du bas
   (.bottom-nav = 78px de haut, z-index:60), qui devenait inutilisable.
   On le remonte au-dessus de la barre ET des pastilles Aide / Le Gardien,
   avec la même réserve que le contenu : 150px + encoche (safe-area).
   Additif et réversible : supprimer ce bloc = tout revient comme avant.
   ============================================================================ */
@media (max-width: 900px) {
  body.ro-has-prep .ro-mcta {
    bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ============================================================================
   (18/07, demande Julien) CARTE SUR MOBILE — format vertical, dans un cadre.
   Avant : la carte allait d'un bord à l'autre de l'écran (62vh, pleine largeur)
   et donnait l'impression de sortir du cadre.
   Maintenant : un vrai bloc CENTRÉ, avec une marge visible des deux côtés,
   PLUS HAUT QUE LARGE, coins arrondis, et rien qui dépasse.
     • hauteur = 68 % de l'écran (fourchette demandée : 65–72 %)
     • largeur = 92 % de l'écran, MAIS jamais plus de 82 % de la hauteur
       → la carte reste TOUJOURS plus haute que large, même à 768 px.
   Mesures réelles vérifiées au navigateur (largeur → carte, marges) :
     320→294x386 (13px) · 375→345x454 (15px) · 390→359x574 (16px)
     430→396x634 (17px) · 768→571x696 (99px)  — toutes en portrait, 0 débordement.
   Leaflet n'est PAS modifié : trackResize est actif par défaut, donc la carte
   appelle invalidateSize() toute seule à chaque changement de taille/rotation,
   et la CSS est appliquée AVANT l'initialisation de la carte (pas de carte blanche).
   Le BUREAU (> 768 px) n'est pas touché. Additif et réversible :
   supprimer ce bloc = tout revient exactement comme avant.
   ============================================================================ */
@media (max-width: 768px) {
  .carte-map-wrap {
    height: 68vh !important;
    min-height: 0 !important;
    width: min(92vw, calc(68vh * 0.82)) !important;
    max-width: 92vw !important;
    margin-inline: auto !important;
    justify-self: center !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    display: block !important;
  }
  #map {
    width: 100% !important;
    height: 100% !important;
    border-radius: 16px !important;
  }
  /* Le copyright Leaflet / OpenStreetMap ne tombe pas dans le coin arrondi. */
  .carte-map-wrap .leaflet-bottom.leaflet-right {
    right: 4px !important;
    bottom: 4px !important;
  }
}

/* ============================================================================
   (24/07 demande Julien) AUDIT MOBILE — dimensions proches des apps pro.
   ÉTAPE 1 : EN-TÊTE DE PAGE compact. Le grand titre .pub-pagetitle (30px) +
   sous-titre + marges prenaient presque tout le 1er écran avant le contenu.
   → titre 22px (fourchette « titres de section 18-22 »), sous-titre 13.5px,
   icône 20px, marges resserrées. Classe commune → TOUTES les pages en profitent.
   Bureau (>768px) jamais touché. 100% additif et réversible.
   ============================================================================ */
@media (max-width: 768px) {
  .pub-pagetitle { font-size: 22px !important; line-height: 1.18; letter-spacing: .2px; }
  .pub-pagetitle svg { width: 20px !important; height: 20px !important; }
  .pub-pagesub { font-size: 13.5px !important; line-height: 1.45; margin-top: 3px !important; }
  .pub-pagehead { margin-bottom: 12px !important; }
}

/* ÉTAPE 2 : CARTES communes (.adm-card) resserrées façon app pro.
   Base bureau : padding 20px, écart 16px, en-tête 18px → trop d'air sur 384px.
   → padding 14px (fourchette 12-16), écart 10px (8-12), en-tête 12px.
   On NE touche PAS aux pubs (classes .ad-slot / .pub-… / profil), ni au bureau. */
@media (max-width: 768px) {
  .adm-card { padding: 14px !important; }
  .adm-card + .adm-card { margin-top: 10px !important; }
  .adm-card-head { margin-bottom: 12px !important; }
}