/* Barre du bas — le design de l'accueil, porté sur toutes les pages.
 *
 * Ces règles sont extraites TELLES QUELLES de home-2032.css et mobile.css,
 * avec leurs @media d'origine : c'est la même barre, au pixel près, pas une
 * réinterprétation. Toute retouche future doit se faire ici, plus dans quatre
 * feuilles concurrentes.
 *
 * Les icônes sont inlinées (l'accueil les tire d'un sprite <symbol> qu'il est
 * seul à définir), et la pastille de non-lus reprend le motif .duo-dot déjà
 * présent sur l'accueil.
 */
.mobile-nav{display:none}
@media (max-width:760px){.mobile-nav{position:fixed;bottom:0;left:0;right:0;z-index:80;display:flex;align-items:center;justify-content:space-around;background:#fffffff5;backdrop-filter:blur(18px);border-top:1px solid #e5dcd3;height:calc(75px + env(safe-area-inset-bottom));padding:4px 8px calc(5px + env(safe-area-inset-bottom))}}
@media (max-width:760px){.mobile-nav a,.mobile-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:9px;color:#75665d;min-width:50px;min-height:54px;padding:0}}
@media (max-width:760px){.mobile-nav span{display:grid;place-items:center;width:39px;height:29px;position:relative}}
@media (max-width:760px){.mobile-nav .active{color:#985833}}
@media (max-width:760px){.mobile-nav .active>span{background:var(--peach-light);border-radius:16px}}
@media (max-width:760px){.mobile-nav svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex:none}}
/* ========================================
   MOBILE IMMERSIVE HOME - LUVIA 2026
   ======================================== */

.mobile-nav-primary{
    min-height: 54px;
    margin: -10px 2px 0;
    border-radius: 22px;
    background: linear-gradient(135deg, #1C1C1E 0%, #D4A373 100%);
    box-shadow: 0 12px 30px rgba(28, 28, 30, 0.22);
}

/* La pastille de non-lus sur Messages. Cuivre et non rouge : un rouge lit
   comme une erreur. Masquee tant que le compteur n'est pas alimente. */
.mobile-nav span { position: relative; }
.mobile-nav .lv-nav-pastille {
  position: absolute; top: -2px; right: -3px;
  width: 7px; height: 7px; border-radius: 50%;
  background: #d9906c; box-shadow: 0 0 0 2px #fff;
  pointer-events: none;
}
.mobile-nav .lv-nav-pastille[hidden] { display: none !important; }

/* L'invitation au compte dans le panneau « À deux ».
   Discrète mais lisible : c'est une proposition, pas une alerte. */
.duo-compte {
  margin: 16px 0 4px;
  padding: 14px 16px;
  border: 1px solid #f0e0d2;
  border-radius: 18px;
  background: #fdf7f1;
}
.duo-compte p { margin: 0 0 9px; color: #6b5b4e; font: 400 12.5px/1.55 Inter, Arial, sans-serif; }
.duo-compte strong { color: #3d2f25; font-weight: 650; }
.duo-compte-lien {
  color: #b4703f; text-decoration: none;
  font: 600 12.5px Inter, Arial, sans-serif;
}
.duo-compte-lien:hover { text-decoration: underline; }
.duo-compte[hidden] { display: none !important; }

/* Le badge « hôte » sur mobile, à côté du sélecteur de langue.
 *
 * Il était simplement masqué sous 1024 px (`.host{display:none}`), donc un
 * propriétaire qui découvrait Luvia depuis son téléphone — le cas le plus
 * fréquent — n'avait aucune porte d'entrée. Or c'est la moitié du métier.
 *
 * Volontairement léger : contour fin, fond crème, pas de couleur pleine. Ce
 * n'est pas l'action principale de la page — le visiteur vient chercher un
 * lieu, pas en proposer un. Il doit se voir sans réclamer.
 */
@media (max-width: 1023px) {
  .header-right .host {
    display: inline-flex !important;
    align-items: center;
    padding: 7px 13px;
    border: 1px solid #e6dad0;
    border-radius: 20px;
    background: #fffdfb;
    color: #7b6857;
    font: 550 11.5px Inter, Arial, sans-serif;
    text-decoration: none;
    white-space: nowrap;
  }
  .header-right .host:hover { border-color: #cbb29e; color: #b4703f; }
  /* Le libellé reste entier : « Devenir hôte » tient à 360 px sans pousser le
     sélecteur de langue, et  réécrit ce texte en
     textContent — tout balisage interne y serait effacé au chargement. */
  .header-right { gap: 9px; }
}