/* =========================================================
   KotiPass — confort telephone (charge en dernier)
   Barre de navigation basse facon application, bouton flottant,
   carrousels au doigt, barres d'action collantes.
   ========================================================= */

.barre-bas, .fab, .reglages-mobile { display: none; }

/* Barre de recherche des evenements publics */
.recherche { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 18px; max-width: 760px; }
.recherche input, .recherche select { min-height: 54px; border: 0; }
.recherche .btn { min-height: 54px; }
@media (min-width: 720px) { .recherche { grid-template-columns: 1fr 220px 64px; } }

@media (max-width: 719px) {
  /* ---------- Espace : navigation en bas ---------- */
  .avec-barre-bas { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .avec-barre-bas .onglets { display: none; }
  .avec-barre-bas .entete .btn-nuit { display: none; }
  .avec-barre-bas .espace-org { padding-bottom: 14px; }
  .barre-bas { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: rgba(255, 255, 255, .97); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--bord); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 30px rgba(1, 33, 94, .08); }
  .barre-bas a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; border-radius: 12px; text-decoration: none; color: var(--doux); font-size: .7rem; font-weight: 700; letter-spacing: .01em; position: relative; }
  .barre-bas a .icone { width: 22px; height: 22px; }
  .barre-bas a.actif { color: var(--orange-fonce); }
  .barre-bas a.actif::before { content: ""; position: absolute; top: -7px; width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--orange); }
  .reglages-mobile { display: inline-flex !important; width: 40px; height: 40px; border-radius: 12px; align-items: center; justify-content: center; border: 1.5px solid var(--bord); color: var(--nuit); flex: none; }

  /* Bouton flottant "+" (au-dessus de la barre basse) */
  .fab { display: inline-flex; position: fixed; right: 16px; bottom: calc(88px + env(safe-area-inset-bottom)); z-index: 31; width: 58px; height: 58px; border-radius: 18px; align-items: center; justify-content: center; background: var(--orange); color: #fff; box-shadow: 0 14px 30px rgba(255, 108, 4, .4); }
  .fab .icone { width: 28px; height: 28px; }
  .masque-mobile { display: none !important; }

  /* Cartes plus compactes */
  .carte { padding: 18px; border-radius: 18px; }
  .stat { padding: 14px; }
  .stat strong { font-size: 1.2rem; }
  .entete-page h2 { font-size: 1.35rem; }

  /* ---------- Accueil : carrousels au doigt ---------- */
  .defile-mobile { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 -16px; padding: 4px 16px 12px; scrollbar-width: none; }
  .defile-mobile::-webkit-scrollbar { display: none; }
  .defile-mobile > * { flex: 0 0 82%; scroll-snap-align: start; }
  .hero { padding: 32px 0 40px; }
  .hero .actions .btn { width: 100%; }
  .hero-sous { font-size: 1.02rem; }
  .section { padding: 40px 0; }
  .maquette { max-width: 320px; }

  /* ---------- Paiement d'une cotisation : bouton toujours visible ---------- */
  .carte .barre-paiement { margin: 18px -18px -18px; padding-left: 18px; padding-right: 18px; }
  .public-entete { padding: 20px; }
  .public-montant { font-size: 1.9rem; }

  /* Pages d'authentification plein ecran */
  .page-auth { padding: 20px 0; }
}