/* responsive.css — extrait de index.html */

/* ════════════════════════════════════════════════════════
   responsive.css — Mobile & tablet layout
   Mobile logic driven by body.mobile-mode (set by app.js)
   ════════════════════════════════════════════════════════ */

/* ── LANGUAGE SELECTOR (desktop) ── */
#lang-bar { display:flex; gap:2px; background:var(--bg3); border:1px solid var(--panel-border); border-radius:16px; padding:3px; flex-shrink:0; }
.lang-btn { font-family:'Cinzel',serif; font-size:8px; letter-spacing:.1em; padding:4px 8px; border-radius:12px; cursor:pointer; border:none; background:transparent; color:var(--text2); transition:all .2s; white-space:nowrap; }
.lang-btn.active { background:var(--gold); color:#fff; }
.lang-btn:hover:not(.active) { background:var(--bg2); color:var(--text); }

/* ── MOBILE HAMBURGER (hidden on desktop) ── */
#mobile-menu-btn { display:none; width:36px; height:36px; background:var(--bg3); border:1px solid var(--panel-border); border-radius:6px; cursor:pointer; font-size:18px; align-items:center; justify-content:center; color:var(--text); flex-shrink:0; }

/* ── MOBILE DROPDOWN MENU ── */
/* ── Le menu mobile, et son voile ─────────────────────────
   Sur un telephone de 400 px, le menu couvrait un peu plus de la moitie
   de l'ecran et la fiche ouverte derriere continuait de se lire sur le
   cote : deux panneaux de meme valeur, empiles. Le voile dit lequel des
   deux a la main, et le clic dessus referme.

   Il est SOUS le menu (299) et AU-DESSUS des panneaux (60). C'est un
   element a part et non un ::before du menu : la fermeture au clic
   exterieur teste « le menu contient-il la cible ? », et un
   pseudo-element aurait designe le menu lui-meme. */
#mmenu-scrim {
  position: fixed; inset: 0; z-index: 299;
  background: rgba(0, 0, 0, .38);
  -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px);
}
#mmenu-scrim[hidden] { display: none; }

#mobile-menu { display:none; position:fixed; top:56px; right:0; width:min(280px, 86vw); max-height:calc(100vh - 96px); overflow-y:auto; background:var(--panel-bg); border:1px solid var(--panel-border); border-radius:0 0 0 10px; z-index:300; padding:14px; box-shadow:-8px 8px 32px rgba(0,0,0,.28); }
#mobile-menu.open { display:block; }
.mmenu-sec { font-family:'Cinzel',serif; font-size:7px; letter-spacing:.4em; color:var(--gold); text-transform:uppercase; margin:12px 0 6px; padding-bottom:4px; border-bottom:1px solid var(--panel-border); }
.mmenu-sec:first-child { margin-top:0; }
#mobile-theme-bar, #mobile-lang-bar { display:flex; flex-wrap:wrap; gap:4px; }
.mlang-btn, .mtheme-btn { font-family:'Cinzel',serif; font-size:8px; letter-spacing:.1em; padding:5px 10px; border-radius:10px; cursor:pointer; border:1px solid var(--panel-border); background:var(--bg3); color:var(--text2); transition:all .2s; }
.mlang-btn.active, .mtheme-btn.active { background:var(--gold); color:#fff; border-color:var(--gold); }

/* ── Legacy tab bar — always hidden ── */
#panel-tab-bar { display:none !important; }

/* ── MOBILE BOTTOM NAV (hidden until JS adds mobile-mode) ── */
#mobile-nav { display:none; position:fixed; bottom:0; left:0; right:0; height:56px; z-index:200; background:var(--panel-bg); border-top:1px solid var(--panel-border); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); flex-direction:row; }
.mnav-tab { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; border:none; background:transparent; cursor:pointer; color:var(--text2); transition:color .2s; position:relative; padding:6px 0; min-height:44px; -webkit-tap-highlight-color:transparent; }
.mnav-tab.active { color:var(--gold); }
.mnav-tab.active::before { content:''; position:absolute; top:0; left:20%; right:20%; height:2px; background:var(--gold); border-radius:0 0 3px 3px; }
.mnav-icon { font-size:20px; line-height:1; position:relative; display:inline-block; }
.mnav-tab.has-content .mnav-icon::after { content:'•'; position:absolute; top:-3px; right:-5px; font-size:12px; color:var(--ember); line-height:1; }
.mnav-lbl { font-family:'Cinzel',serif; font-size:7px; letter-spacing:.1em; text-transform:uppercase; line-height:1; }

/* ══════════════════════════════════════════════════════
   TABLET ≤1024px
══════════════════════════════════════════════════════ */
@media (max-width:1024px) {
  .hdr { height:70px; padding:0 16px; }
  .title-main { font-size:20px; }
  .title-sub { font-size:10px; }
  .deco-line { top:70px; }
  .panel, #lex, #lounge-panel { top:70px; }
  .theme-btn { padding:3px 7px; font-size:6.5px; }
  .lang-btn  { padding:3px 6px; font-size:7px; }
  .panel { width:360px; }
  #lex   { width:240px; }
  #lounge-panel { width:360px; }
  .stat-item:nth-child(3) { display:none; }
}

/* ── Collapse en-tête → menu ☰ sous 1200px ──────────────
   L'en-tête complet (barres thème + langue) exige ~1427px. Sous 1200px
   on déplace thème/langue/compte dans le menu ☰ déjà présent, sans
   déclencher le mode mobile complet (réservé à ≤640px). */
@media (min-width:641px) and (max-width:1200px) {
  #theme-bar, #lang-bar, .hdr-divider, .stat-item { display:none; }
  #mobile-menu-btn { display:flex; }
}
@media (min-width:641px) and (max-width:1024px) {
  #mobile-menu { top:70px; }
}
@media (min-width:1025px) and (max-width:1200px) {
  #mobile-menu { top:82px; }
}

/* ══════════════════════════════════════════════════════
   MOBILE — body.mobile-mode class (set by app.js)
══════════════════════════════════════════════════════ */

/* Header */
body.mobile-mode .hdr            { height:56px; padding:0 12px; }
body.mobile-mode .title-main     { font-size:18px; }
body.mobile-mode .title-sub,
body.mobile-mode .eyebrow        { display:none; }
body.mobile-mode .hdr-divider    { display:none; }
body.mobile-mode #theme-bar      { display:none; }
body.mobile-mode #lang-bar       { display:none; }
body.mobile-mode .stat-item      { display:none; }
body.mobile-mode .deco-line      { display:none; }
/* ── L'en-tête sur téléphone : le nom du site d'abord ─────
   À 400 px, la barre dispose de 376 px. Le titre en réclame 152, le
   compte 34, le menu 36 — restent ~130 px pour les bascules. « MARCHÉS »
   et « LOUNGES » en pesaient 160 à elles deux : le bloc de droite
   débordait et se dessinait PAR-DESSUS le titre, qui disparaissait
   d'autant. L'ajout de « COMMUNAUTÉ » (106 px) l'a effacé entièrement.

   Sur téléphone, les trois bascules gardent donc leur seul pictogramme.
   Leur libellé faisait 7 px — il n'était de toute façon pas lu — et
   chacune conserve son `aria-label`, donc son nom pour un lecteur
   d'écran. Mesuré : le bloc de gauche repasse de 0 à 171 px, et le nom
   du site tient enfin en entier.

   MESURES à 400 px (largeur du bloc de gauche) :
     avec les libellés .............. 0 px   (titre invisible)
     COMMUNAUTÉ en pictogramme ..... 71 px   (titre coupé)
     les trois en pictogramme ..... 171 px   (titre entier, 152 px) */
body.mobile-mode #mktToggle span:last-child,
body.mobile-mode #loungeToggle span:last-child,
body.mobile-mode #forumBtn span:last-child { display:none; }
body.mobile-mode #mktToggle,
body.mobile-mode #loungeToggle,
body.mobile-mode #forumBtn { padding:4px 8px; gap:0; font-size:14px; line-height:1.15; }
/* 8 px d'écart entre les éléments de droite en coûtaient 7 au titre, et
   « CIGAR ODYSSEY » se coupait sur le Y. Mesuré : à 5 px, le bloc de
   gauche fait exactement les 152 px que le titre demande. */
body.mobile-mode .hdr-right { gap:5px; }

/* Le titre ne se fait plus recouvrir : s'il manque malgré tout de la
   place, il se coupe proprement plutôt que de passer sous les bascules. */
body.mobile-mode .hdr-left    { min-width:0; overflow:hidden; }
/* flex-shrink:0 sur .title-block (components.css) gardait ses 152 px et
   se faisait couper net par le débordement du parent. En le laissant
   rétrécir, c'est l'ellipse qui prend le relais — un mot tronqué se
   comprend, une lettre coupée en deux ressemble à un défaut. */
body.mobile-mode .title-block { min-width:0; flex-shrink:1; }
body.mobile-mode .title-main  { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Sous 380 px (les téléphones les plus étroits encore vendus), 18 px
   demandent 152 px quand il n'en reste que ~130 : le nom passe à 15 px
   et tient en entier. Mesuré, pas estimé. */
@media (max-width: 380px) {
  body.mobile-mode .title-main { font-size:15px; }
  /* Et deux pixels de moins autour de chaque pastille : 15 px de nom en
     demandent 127, il n'en restait que 123. Rogner les pastilles coûte
     moins que rapetisser le nom du site. */
  body.mobile-mode #mktToggle,
  body.mobile-mode #loungeToggle,
  body.mobile-mode #forumBtn { padding:4px 6px; }
}
body.mobile-mode #mobile-menu-btn { display:flex; }
body.mobile-mode #mobile-nav      { display:flex; }

/* Globe: fills space between header (56px) and bottom nav (56px) */
body.mobile-mode #globe-wrap {
  position:fixed;
  top:56px; bottom:56px; left:0; right:0;
}

/* All three panels: full-screen slide-up overlays */
body.mobile-mode .panel,
body.mobile-mode #lex,
body.mobile-mode #lounge-panel {
  position:fixed !important;
  top:56px !important;
  bottom:56px !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  height:auto !important;          /* let top/bottom define height */
  transform:translateY(110%) !important;
  transition:transform .4s cubic-bezier(.16,1,.3,1) !important;
  border:none !important;
  border-top:1px solid var(--panel-border) !important;
  border-left:none !important;
  border-right:none !important;
  box-shadow:0 -2px 20px var(--shd) !important;
  border-radius:0 !important;
  z-index:150 !important;
  overflow:hidden !important;
}
body.mobile-mode .panel.open,
body.mobile-mode #lex.open,
body.mobile-mode #lounge-panel.open {
  transform:translateY(0) !important;
}

/* Panel banners */
body.mobile-mode .panel-banner,
body.mobile-mode .lex-banner      { height:72px; }
body.mobile-mode .banner-name,
body.mobile-mode .lex-country-name { font-size:17px; bottom:8px; left:52px; }
body.mobile-mode .banner-region,
body.mobile-mode .lex-country-reg  { left:54px; bottom:1px; font-size:9px; }
body.mobile-mode .banner-flag      { font-size:24px; bottom:8px; left:12px; }
body.mobile-mode .lex-flag-emoji   { font-size:22px; bottom:8px; left:10px; }
body.mobile-mode .panel-body       { padding:10px 14px 12px; }
body.mobile-mode .lex-body         { padding:8px 14px 12px; }

/* Compass: above bottom nav */
body.mobile-mode 
body.mobile-mode 
body.mobile-mode  /* centre SVG = 28,28 */

/* Zoom: above bottom nav */
body.mobile-mode #zoom-ctrl  { bottom:66px; right:8px; gap:2px; }
body.mobile-mode .zoom-btn   { width:28px; height:28px; font-size:14px; }
body.mobile-mode #zoom-track { height:36px; }
body.mobile-mode #zoom-lbl   { font-size:7px; }

/* Bottom legend: hidden (no room) */
body.mobile-mode .bbar { display:none; }

/* Map loading indicator */
body.mobile-mode #map-loading { bottom:68px; font-size:7px; padding:4px 10px; }

/* Globe canvas: always tappable */
body.mobile-mode #globe { touch-action:none; pointer-events:all !important; }

/* Brand modal: bottom sheet — must be above panels (z:150) and nav (z:200) */
body.mobile-mode .bmodal { align-items:flex-end; z-index:600; }
body.mobile-mode .bm-back { position:fixed; top:0; left:0; right:0; bottom:0; }
body.mobile-mode .bm-box {
  position:fixed; bottom:0; left:0; right:0;
  width:100%; max-width:100%;
  max-height:88vh;
  border-radius:16px 16px 0 0;
  transform:translateY(100%);
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
body.mobile-mode .bmodal.open .bm-box { transform:translateY(0); }

/* ══════════════════════════════════════════════════════
   RTL (Arabic) — desktop
══════════════════════════════════════════════════════ */
[dir="rtl"] .hdr, [dir="rtl"] .hdr-left, [dir="rtl"] .hdr-right { flex-direction:row-reverse; }
[dir="rtl"] .panel { right:auto; left:0; border-left:none; border-right:1px solid var(--panel-border); transform:translateX(-100%); }
[dir="rtl"] .panel.open { transform:translateX(0); }
[dir="rtl"] #lex { left:auto; right:0; border-right:none; border-left:1px solid var(--panel-border); transform:translateX(100%); }
[dir="rtl"] #lex.open { transform:translateX(0); }
[dir="rtl"] #lounge-panel { right:auto; left:0; border-left:none; border-right:1px solid var(--panel-border); transform:translateX(-100%); }
[dir="rtl"] #lounge-panel.open { transform:translateX(0); }
[dir="rtl"] .panel-close, [dir="rtl"] #lexClose { right:auto; left:10px; }
[dir="rtl"] .banner-name, [dir="rtl"] .lex-country-name { left:auto; right:62px; }
[dir="rtl"] .banner-region, [dir="rtl"] .lex-country-reg { left:auto; right:64px; }
[dir="rtl"] .banner-flag, [dir="rtl"] .lex-flag-emoji { left:auto; right:12px; }
[dir="rtl"] .sec::after, [dir="rtl"] .lex-sec::after { background:linear-gradient(to left, var(--gold-p), transparent); }
[dir="rtl"] .sn { border-left:none; border-right:3px solid var(--gold); }
[dir="rtl"] #zoom-ctrl { right:auto; left:8px; }
/* La colonne d'actions passe a droite, comme le veut une lecture de
   droite a gauche — et parce que #zoom-ctrl vient justement d'aller a
   gauche : sans cette regle, les deux se superposaient du meme cote. */
[dir="rtl"] #side-fabs { left:auto; right:16px; }
body.mobile-mode[dir="rtl"] #side-fabs { left:auto; right:12px; }
[dir="rtl"] #mobile-menu { right:auto; left:0; border-radius:0 0 10px 0; }
[dir="rtl"] .bbar, [dir="rtl"] .legend { flex-direction:row-reverse; }

/* RTL mobile: override to slide-up */
body.mobile-mode[dir="rtl"] .panel,
body.mobile-mode[dir="rtl"] #lex,
body.mobile-mode[dir="rtl"] #lounge-panel {
  left:0 !important; right:0 !important;
  border-right:none !important; border-left:none !important;
  transform:translateY(110%) !important;
}
body.mobile-mode[dir="rtl"] .panel.open,
body.mobile-mode[dir="rtl"] #lex.open,
body.mobile-mode[dir="rtl"] #lounge-panel.open { transform:translateY(0) !important; }
body.mobile-mode[dir="rtl"] .banner-name,
body.mobile-mode[dir="rtl"] .lex-country-name  { left:auto !important; right:52px !important; }
body.mobile-mode[dir="rtl"] .panel-close,
body.mobile-mode[dir="rtl"] #lexClose          { left:10px !important; right:auto !important; }
body.mobile-mode[dir="rtl"] 
body.mobile-mode[dir="rtl"] #zoom-ctrl { left:8px; right:auto; }


/* ══ NOTATION LOUNGES ═══════════════════════════════════ */
.lc-rating-wrap {
  display: flex; align-items: center; gap: 6px;
  margin: 4px 0;
}
.lc-rating-stars { display: flex; gap: 2px; }

.lc-star {
  cursor: pointer;
  font-size: 16px;
  color: var(--text3, #666);
  transition: transform .15s, color .15s;
  user-select: none;
  line-height: 1;
}
.lc-star[data-state="rated"]  { color: var(--gold); }
.lc-star[data-state="avg"]    { color: rgba(201,162,39,0.55); }
.lc-star[data-state="empty"]  { color: var(--text3, #555); }

.lc-star:hover,
.lc-star:hover ~ .lc-star     { color: var(--gold) !important; }
.lc-rating-stars:hover .lc-star { color: var(--gold); }
.lc-rating-stars:hover .lc-star:hover ~ .lc-star { color: var(--text3, #555); }

.lc-rating-avg {
  font-size: 11px;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: .02em;
}
.lc-rating-cnt {
  font-size: 9px;
  color: var(--text2);
  font-weight: 400;
  margin-left: 1px;
}
.lc-rating-none {
  font-size: 9px;
  color: var(--text2);
  font-style: italic;
  font-weight: 400;
}
/* Section rating dans la carte — éviter le doublon */
.lc-rating-section { margin-top: 6px; }
/* Masquer le rating en haut si déjà dans la section bas */
.lc-top .lc-rating-wrap { display: none; }

/* ══ BRAND MODAL — ENRICHISSEMENT ════════════════════ */
.bm-section-title {
  font-family:'Cinzel',serif; font-size:9px; letter-spacing:.15em;
  color:var(--gold); text-transform:uppercase; margin-bottom:10px;
  padding-bottom:4px; border-bottom:1px solid var(--panel-border);
}
.bm-scores-grid { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:4px; }
.bm-score-item  { display:flex; align-items:center; gap:6px; }
.bm-score-val   { font-size:18px; font-weight:700; color:var(--gold); font-family:'Playfair Display',serif; }
.bm-score-val.top { color:#FFD700; text-shadow:0 0 8px rgba(255,215,0,.5); }
.bm-score-info  { font-size:9px; color:var(--text2); line-height:1.4; }
.gam-scores     { margin-top:6px; display:flex; flex-wrap:wrap; gap:4px; }
.gam-score      { font-size:9px; background:var(--gold-p); color:var(--gold);
                  border:1px solid var(--gold); border-radius:2px;
                  padding:2px 6px; letter-spacing:.05em; }
.gam-score-src  { color:var(--text2); font-size:8px; }
.bm-celeb       { margin-bottom:12px; }
.bm-celeb-name  { font-family:'Cinzel',serif; font-size:10px; color:var(--text);
                  font-weight:600; display:block; margin-bottom:4px; }
.bm-celeb-text  { font-size:11px; color:var(--text2); line-height:1.6; margin:0; }
.bm-pairings    { display:flex; flex-direction:column; gap:8px; }
.bm-pair        { padding:8px 10px; background:var(--bg2);
                  border-left:2px solid var(--gold); border-radius:2px; }
.bm-pair-name   { font-family:'Cinzel',serif; font-size:9px; color:var(--gold);
                  letter-spacing:.08em; margin-bottom:4px; }
.bm-pair-notes  { font-size:11px; color:var(--text2); line-height:1.5; }
.bm-limited-list{ margin:6px 0 0 16px; padding:0; font-size:11px;
                  color:var(--text2); line-height:1.8; }