/* =========================
   BB.css — Bottom Bar & Context Sheet (tiles)
   Indépendant des autres CSS
   ========================= */

/* Par défaut : rien n’apparaît en desktop/tablette */
.GM-bottomNavShell {
  display: none;
}
/* ── Bulle/lanceur IA flottant « ? » SUPPRIMÉ PARTOUT ──
   L'assistant IA est désormais un CONTACT dans la messagerie (ouvrable via le bouton Messages de
   la bottom nav, ou via la bulle chat sur les pages sans bottom nav). Plus aucun lanceur IA
   flottant. Résout au passage l'ancien chevauchement du « ? » avec le bouton Envoyer (tablette)
   et le résidu « carré » en desktop. */
.GM-iaBtnWrapper { display: none !important; }

/* ── Bulle MESSAGERIE flottante (#CH-float) : masquée UNIQUEMENT quand la bottom nav offre déjà
   un bouton « Messages » (variante home). Sur les pages sans ce bouton (autres variantes de nav,
   ou pages sans bottom nav du tout), la bulle reste le seul accès au chat → on la garde. ── */
@media (max-width: 1023px) {
  body:has(.GM-bottomNav-btn[data-gm-nav="chat"]) .CH-float { display: none !important; }
}
@media (min-width: 1024px) {
  /* App en paysage tablette : bottom nav visible → même logique. Web desktop : nav cachée
     (display:none) → on NE masque PAS la bulle (elle reste l'accès chat du bureau). */
  body.is-marina-app:has(.GM-bottomNav-btn[data-gm-nav="chat"]) .CH-float { display: none !important; }
}

/* Masquer le bottom nav quand l'ancien chat IA flottant est ouvert (pages publiques sans messagerie) */
#AIChatRoot[data-open="1"] ~ .GM-bottomNavShell,
body:has(#AIChatRoot[data-open="1"]) .GM-bottomNavShell {
  display: none !important;
}

/* Icônes images de la bottom bar (taille fixe, pas de zoom) */
.GM-bottomNav-imgIcon {
  width: 36px;
  height: 36px;
  object-fit: contain;
  display: block;
}

/* Mode simplifié hors index : icône Accueil dans un cercle bleu, dépasse du bandeau (mobile + tablette) */
@media (max-width: 1199px) {
  body.is-simple-mode.SM-subpage .GM-bottomNav {
    overflow: visible !important;
  }
  body.is-simple-mode.SM-subpage .GM-bottomNavShell {
    overflow: visible !important;
  }
  body.is-simple-mode.SM-subpage .GM-bottomNav-btn[data-gm-nav="home"] {
    overflow: visible;
    position: relative;
    z-index: 10;
  }
  body.is-simple-mode.SM-subpage .GM-bottomNav-btn[data-gm-nav="home"] .GM-bottomNav-btnIcon {
    width: 62px;
    height: 62px;
    background: var(--brand, #20466e);
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 -2px 10px rgba(0,0,0,.25);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    top: -18px;
    margin-bottom: -18px;
  }
  body.is-simple-mode.SM-subpage .GM-bottomNav-btn[data-gm-nav="home"] .GM-bottomNav-imgIcon {
    width: 36px !important;
    height: 36px !important;
  }
}

/* Vue mobile + tablette (jusqu'à 1023px). Convention BP canonique : 768 + 1024. */
@media (max-width: 1023px) {

  /* On masque l'ancien bouton IA où qu'il soit */
  [data-gm-ai-launcher] {
    display: none !important;
  }

  /* On masque le footer global */
  #site-footer {
    display: none !important;
  }

  /* On évite que le contenu soit caché sous la bottom bar */
  body {
    padding-bottom: 90px;
  }

  .GM-bottomNavShell {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1150;
    font-family: inherit;
  }

  /* ============================
     CONTEXT = SHEET (tuiles)
     ============================ */

  /* Le conteneur #gmBottomContext ne doit PLUS être une barre flex.
     Il sert juste de “mount point” pour overlay + sheet. */
  .GM-bottomContext {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;               /* important: permet à l’overlay d’être plein écran */
    bottom: 0;
    z-index: 1600;        /* au-dessus du contenu + au-dessus du bouton IA */
    pointer-events: none; /* fermé par défaut */
  }

  .GM-bottomNavShell.has-context .GM-bottomContext {
    pointer-events: auto;
  }

  /* Overlay sombre derrière le sheet */
  .GM-ctxOverlay {
    position: fixed;
    left: 0; right: 0;
    top: 0; bottom: 0;
    background: rgba(0,0,0,0.35);
    opacity: 0;
    transition: opacity .18s ease-out;
  }

  .GM-bottomNavShell.has-context .GM-ctxOverlay {
    opacity: 1;
  }

  /* Le sheet qui monte au-dessus de la bottom bar */
  .GM-ctxSheet {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 62px;               /* juste au-dessus de la nav */
    border-radius: 18px 18px 12px 12px;

    background: var(--brand, #20466e);
    color: #e2e8f0;
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);

    transform: translateY(14px);
    opacity: 0;

    max-height: 58vh;
    overflow: hidden;

    transition: transform .18s ease-out, opacity .18s ease-out;
    z-index: 1610;
  }

  .GM-bottomNavShell.has-context .GM-ctxSheet {
    transform: translateY(0);
    opacity: 1;
  }

  .GM-ctxSheetHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 12px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.05);
  }

.GM-ctxTitle {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .3px;
  color: #ffffff;
}


  .GM-ctxClose {
    border: none;
    background: rgba(255,255,255,0.10);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    font-size: 22px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .GM-ctxClose:active {
    transform: translateY(1px);
    background: rgba(255,255,255,0.16);
  }

  /* Grille de tuiles */
  .GM-ctxTiles {
    padding: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;

    overflow: auto;
    -webkit-overflow-scrolling: touch;

    max-height: calc(58vh - 54px); /* head ~54px */
  }

  /* 3 colonnes sur grands mobiles */
  @media (min-width: 430px) {
    .GM-ctxTiles {
      grid-template-columns: 1fr 1fr 1fr;
    }
  }

  /* Tuile cliquable */
  .GM-ctxTile {
    display: flex;
    gap: 10px;
    align-items: center;
    text-decoration: none;

    padding: 12px 12px;
    border-radius: 14px;

    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.08);
    color: #f8fafc;
  }

  .GM-ctxTile:active {
    background: rgba(56,189,248,0.22);
    border-color: rgba(56,189,248,0.45);
    transform: translateY(1px);
  }

  .GM-ctxTileIcon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex: 0 0 auto;
  }

  .GM-ctxTileText { min-width: 0; }

.GM-ctxTileLabel {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.1;
  color: #f9fafb;
}


  .GM-ctxTileSub {
    margin-top: 2px;
    font-size: 12px;
    color: rgba(226,232,240,0.85);
    line-height: 1.15;
  }

  /* ============================
     BARRE PRINCIPALE (NAV)
     ============================ */
  .GM-bottomNav {
    display: flex;
    justify-content: space-around;

    background: var(--brand, #20466e);
    color: #ffffff;
    padding: 2px 0 6px;
    border-top: none;
  }

  .GM-bottomNav-btn {
    flex: 1 1 0;
    border: none;
    background: none;
    color: inherit;
    padding: 6px 4px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    font-size: 12px;
  }

  /* Conteneur d’icône : base pour le halo */
  .GM-bottomNav-btnIcon {
    font-size: 24px;
    line-height: 1;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Badge unread (chat) : pastille rouge sur l'icône Messages, en haut à droite.
     z-index 2 pour passer devant le halo orange du bouton actif. */
  .GM-bottomNav-badge {
    position: absolute;
    top: -4px; right: -8px;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #ff3b30;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
    z-index: 2;
  }
  .GM-bottomNav-badge[hidden] { display: none; }

  /* Texte explicatif sous les icônes : masqué */
  .GM-bottomNav-btnLabel {
    display: none;
  }

  /* Bouton actif : le halo fait le job */
  .GM-bottomNav-btn.is-active {
    color: #ffffff;
  }

  /* Halo ORANGE autour de l’icône active */
  .GM-bottomNav-btn.is-active .GM-bottomNav-btnIcon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 54px;
    height: 54px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(255, 165, 0, 0.45);
    filter: blur(10px);
    z-index: 0;
    animation: gmHaloPop 0.18s ease-out;
  }

  @keyframes gmHaloPop {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  }

  /* ============================
     BOUTON IA FLOTTANT
     ============================ */

  .GM-iaBtnWrapper {
    position: fixed;
    right: 16px;
    bottom: 72px;
    z-index: 1500;
    transition: bottom 0.25s ease-out;
  }

  .GM-iaBtn {
    border: none;
    border-radius: 999px;
    width: 48px;
    height: 48px;
    background: var(--brand, #20466e);
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(15,23,42,.35);
    cursor: pointer;
  }

  .GM-iaBtn:active {
    transform: translateY(1px);
    box-shadow: 0 2px 5px rgba(15,23,42,.3);
  }

  .GM-iaBtn-icon {
    font-size: 28px;
    transform: translateY(-1px);
  }

  /* Quand le sheet est ouvert, on remonte le bouton IA */
  .GM-bottomNavShell.has-context ~ .GM-iaBtnWrapper {
    bottom: 320px;
  }
}

/* ==========================================================
   Variante TABLETTE (768 - 1023px) : "baguette" centrée flottante.
   IMPORTANT : pas de `transform` ni `overflow:hidden` sur le shell,
   sinon le sheet contextuel `position:fixed` est piégé/clippé.
   On centre via margin auto, et on porte le border-radius sur la
   barre interne `.GM-bottomNav`.
   ========================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  .GM-bottomNavShell {
    left: 0;
    right: 0;
    bottom: 16px;
    margin: 0 auto;
    width: min(560px, calc(100% - 32px));
    /* PAS de transform / overflow ici — laisse passer le sheet */
  }
  .GM-bottomNavShell .GM-bottomNav {
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
  }
  body {
    padding-bottom: 96px;
  }
}

/* ==========================================================
   APP (WebView) en largeur « desktop » (tablette en PAYSAGE, ≥1024px).
   L'app n'est JAMAIS un vrai PC : le footer desktop qui héberge le chat n'existe pas
   côté app → on CONSERVE la bottom nav (accès chat + navigation) même quand le CONTENU
   bascule en « version PC ». On reprend le look « baguette » tablette. Réservé à
   body.is-marina-app → aucun impact sur le web desktop. Les styles internes du menu
   (barre, boutons, icônes, badge) vivent dans @media(max-width:1023px) et ne s'appliquent
   pas ≥1024 : on les redéclare ici pour l'app uniquement.
   ========================================================== */
@media (min-width: 1024px) {
  body.is-marina-app .GM-bottomNavShell {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 16px;
    margin: 0 auto;
    width: min(560px, calc(100% - 32px));
    z-index: 1150;
    font-family: inherit;
  }
  body.is-marina-app .GM-bottomNavShell .GM-bottomNav {
    display: flex;
    justify-content: space-around;
    background: var(--brand, #20466e);
    color: #fff;
    padding: 2px 0 6px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
  }
  body.is-marina-app .GM-bottomNav-btn {
    flex: 1 1 0;
    border: none;
    background: none;
    color: inherit;
    padding: 6px 4px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    font-size: 12px;
  }
  body.is-marina-app .GM-bottomNav-btnIcon {
    font-size: 24px;
    line-height: 1;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  body.is-marina-app .GM-bottomNav-btnLabel { display: none; }
  /* Badge « non lu » du chat (essentiel : c'est l'accès messagerie qu'on préserve) */
  body.is-marina-app .GM-bottomNav-badge {
    position: absolute;
    top: -4px; right: -8px;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #ff3b30;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    z-index: 2;
  }
  body.is-marina-app .GM-bottomNav-badge[hidden] { display: none; }
  /* Le contenu ne doit pas passer sous la baguette */
  body.is-marina-app { padding-bottom: 96px; }
  /* Dans l'app, le footer desktop reste caché (le chat vit dans la bottom nav) */
  body.is-marina-app #site-footer { display: none !important; }
}

/* ==========================================================
   GM-joinHint — Bulle d’aide / confirmation d’inscription
   ========================================================== */

@media (max-width: 768px) {
  .GM-joinHint {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 78px;
    z-index: 1700; /* au-dessus overlay */
    pointer-events: auto;
    display: none;
  }

  .GM-joinHint.is-visible { display: block; }

  .GM-joinHint-inner {
    position: relative;
    background: var(--surface-2, #f3f4f6);
    color: var(--text, #111827);

    padding: 14px 16px 12px;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);

    display: flex;
    flex-direction: column;
    gap: 12px;

    max-width: min(340px, 94vw);
    font-size: 0.95rem;
    line-height: 1.35;
  }

  .GM-joinHint-inner::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -8px;
    transform: translateX(-50%);
    border-width: 8px 8px 0 8px;
    border-style: solid;
    border-color: var(--surface-2, #f3f4f6) transparent transparent transparent;
  }

  .GM-joinHint-text { flex: 1 1 auto; font-weight: 500; }

  .GM-joinHint-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
  }

  .GM-joinHint-btn {
    border: none;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 0.85rem;
    cursor: pointer;
    background: var(--surface-2, #e5e7eb);
    color: var(--text, #111827);
    white-space: nowrap;
  }

  .GM-joinHint-btn.GM-joinHint-confirm {
    background: #22c55e;
    color: #022c22;
    font-weight: 600;
  }
}

@media (min-width: 769px) {
  .GM-joinHint {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 24px;
    z-index: 1700;
    pointer-events: auto;
    display: none;
  }
  .GM-joinHint.is-visible { display: block; }
}

/* ===========================================
   Agrandissement x2 du bouton "Je participe"
   uniquement sur page évènement
   =========================================== */
@media (max-width: 768px) {
  .GM-bottomNavShell[data-gm-page-kind="event"]
    .GM-bottomNav-btn[data-gm-nav="event_join"]
    .GM-bottomNav-btnIcon {
      transform: scale(2);
      transform-origin: center;
  }
}

/* Profil : par défaut, on cache le bouton "Retour" */
@media (max-width: 768px) {
  .GM-profileBackBtn { display: none; }
}
.GM-profileBackBtn { display: none; }
.GM-profileMeBtn { display: inline-flex; }

.GM-ctxTileIcon img{
  width: 28px;
  height: 28px;
  object-fit: contain;
}