/* zzzz-voyageurs.css — Voyageurs (moments.php · bloc `.ar-voyageurs`) : finition fidele maquette 05.
   ROLE : couche additive chargee EN DERNIER (prime). Recadre la pastille « Mon Phare » en pilule
   compacte centree, passe en BLANC le libelle+icone du FAB « Publier » et les initiales de l'avatar
   « JU », et re-affirme la grille 2 colonnes. Ne cible ni Gardien (classes gw / gardien / mom-orb) ni
   Etincelles. 100% reversible.  [16/08 FIX : l'ancien commentaire contenait une sequence qui fermait
   le commentaire CSS trop tot et cassait TOUT le fichier — corrige, les regles s'appliquent enfin.]
   ROLLBACK : supprimer ce fichier — retour exact au rendu de zz-voyageurs-app.css. */

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

  /* 1) Pastille « Mon Phare · Allume » : pilule COMPACTE centree (maquette), pas pleine largeur.
        Base zz-voyageurs-app.css l'etire (margin:6px 16px 16px sur un flex block). On la reduit a
        sa largeur de contenu et on la centre, avec un leger degrade/liseré bleu comme la maquette. */
  html.apprefonte .ar-voyageurs .ar-vy-phare{
    width:-moz-fit-content !important;
    width:fit-content !important;
    max-width:calc(100% - 32px);
    margin:6px auto 16px !important;
    padding:12px 24px !important;
    background:linear-gradient(180deg, rgba(72,150,240,.30) 0%, rgba(61,169,252,.12) 100%) !important;
    border:1px solid rgba(96,166,246,.55) !important;
    box-shadow:0 4px 14px rgba(61,169,252,.18) !important;
  }

  /* 2) Grille de cartes voyageur : 2 colonnes centrees (re-affirmation defensive, meme valeur
        que zz-voyageurs-app.css ; minmax(0,...) evite le debordement mobile). */
  html.apprefonte .ar-voyageurs .ar-vy-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  }

  /* 3) FAB « + Publier » : signe + (SVG) et libelle en BLANC sur le bleu (maquette).
        Base : color:#06202a (navy). */
  html.apprefonte .ar-voyageurs .ar-vy-fab,
  html.apprefonte .ar-voyageurs .ar-vy-fab svg{
    color:#fff !important;
  }

  /* 4) Avatar « JU » (haut-droite) : initiales en BLANC sur le rond bleu (maquette).
        Base : color:#06202a (navy). */
  html.apprefonte .ar-voyageurs .ar-vy-me{
    color:#fff !important;
  }

  /* 5) (16/08) Ligne « Zone : … » : quand le nom est LONG (ex. « Charente-Maritime (17) ») il passe
        sur 2 lignes ; l'icone 📍 etait centree verticalement (flottante). On l'aligne en HAUT, au
        niveau de la 1re ligne, pour un rendu propre. Zones courtes = inchange. */
  html.apprefonte .ar-voyageurs .ar-vy-zone{ align-items:flex-start !important; }
  html.apprefonte .ar-voyageurs .ar-vy-zone svg{ margin-top:3px; }

}

/* ----------------------------------------------------------------------------
   (16/08) TABLETTE / PC — grille voyageurs ADAPTATIVE.
   Constat : sur ordi/tablette la grille restait figee a 2 colonnes → cartes
   ENORMES (une demi-largeur d'ecran chacune). Sur TELEPHONE les 2 colonnes vont
   bien : on les GARDE (≤768px = bloc ci-dessus, inchange).
   Correctif : a partir de 769px, colonnes compactes auto-remplies (~220px) →
   « plusieurs par ligne ». Verifie en banc : 5 col a 1440px, 7 col a 1920px,
   telephone toujours 2 col, aucun debordement horizontal. Prime sur les regles
   ci-dessus (place APRES, meme specificite + !important) → gagne aussi sur
   tablette tactile (pointer:coarse ≤1366) qui etait re-affirmee a 2 col.
   Additif & reversible : supprimer ce bloc = retour au 2 colonnes partout.
   ---------------------------------------------------------------------------- */
@media (min-width:769px){
  html.apprefonte .ar-voyageurs .ar-vy-grid{
    grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)) !important;
  }
}