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

/* ════════════════════════════════════════════════════════
   components.css — All UI component styles
   ════════════════════════════════════════════════════════ */

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body {
  width:100vw; height:100vh; height:100dvh; overflow:hidden;
  background:var(--bg); color:var(--text);
  font-family:'Lato',sans-serif;
  transition:background .4s, color .4s;
  -webkit-font-smoothing:antialiased;
}

/* ── FLAG BACKGROUND ── */
#flag-bg { position:fixed; top:0;right:0;bottom:0;left:0; z-index:0; opacity:0; transition:opacity 1.4s ease; pointer-events:none; }
#flag-bg.visible { opacity:1; }
#flag-canvas { width:100%; height:100%; display:block; }
#flag-overlay { position:absolute; top:0;right:0;bottom:0;left:0; background:var(--flag-overlay); transition:background .4s; }

/* ── GLOBE ── */
#globe-wrap { position:fixed; top:0;right:0;bottom:0;left:0; display:flex; align-items:center; justify-content:center; z-index:2; }

/* ── Indice du premier écran (indice.js) ──────────────────
   pointer-events:none n'est pas un détail de style : l'indice se pose
   au-dessus du globe, et il conseille précisément de cliquer dessus. */
#globe-indice {
  position:absolute; left:50%; bottom:34px; transform:translate(-50%, 8px);
  pointer-events:none; z-index:6;
  display:flex; align-items:center; gap:8px;
  padding:8px 16px; border-radius:24px;
  background:var(--panel-bg); border:1px solid var(--gold-p);
  box-shadow:0 6px 22px rgba(0,0,0,.22);
  opacity:0; transition:opacity .45s ease, transform .45s ease;
}
#globe-indice.vu { opacity:1; transform:translate(-50%, 0); }
#globe-indice .gi-main {
  font-family:'Cinzel',serif; font-size:9px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold); white-space:nowrap;
}
#globe-indice::before {
  content:'○'; font-size:11px; color:var(--gold); line-height:1;
  animation:gi-pulse 2.4s ease-in-out infinite;
}
@keyframes gi-pulse { 0%,100% { opacity:.35; } 50% { opacity:1; } }
/* Le battement est un agrément, pas l'information : qui demande moins
   d'animation garde l'indice, immobile. */
@media (prefers-reduced-motion: reduce) {
  #globe-indice { transition:none; }
  #globe-indice::before { animation:none; opacity:.8; }
}
@media (max-width:520px) {
  #globe-indice { bottom:16px; padding:7px 13px; }
  #globe-indice .gi-main { font-size:8px; letter-spacing:.14em; }
}
#globe { cursor:grab; display:block; touch-action:none; }
#globe:active { cursor:grabbing; }

/* ── MAP LOADING ── */
#map-loading {
  position:fixed; bottom:60px; left:50%;
  transform:translateX(-50%) translateY(80px);
  background:var(--panel-bg); border:1px solid var(--panel-border);
  border-radius:20px; padding:5px 14px;
  font-family:'Cinzel',serif; font-size:8px; letter-spacing:.3em;
  color:var(--text2); z-index:56;
  opacity:0; transition:opacity .4s, transform .4s;
  pointer-events:none; text-transform:uppercase; white-space:nowrap;
}
#map-loading.visible { opacity:1; transform:translateX(-50%) translateY(0); }

/* ── HEADER ── */
.hdr {
  position:fixed; top:0; left:0; right:0; height:82px; padding:0 24px;
  z-index:52; display:flex; align-items:center; justify-content:space-between;
  background:var(--hdr-bg); border-bottom:1px solid var(--panel-border);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:background .4s, border-color .4s; gap:8px;
}
.hdr-left  { display:flex; align-items:center; gap:10px; flex-shrink:1; min-width:0; overflow:hidden; }
.hdr-right { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.hdr-divider { width:1px; height:36px; background:var(--panel-border); opacity:.5; flex-shrink:0; }
.title-block { flex-shrink:0; }
.eyebrow { font-family:'Cinzel',serif; font-size:8px; letter-spacing:.45em; color:var(--gold); text-transform:uppercase; margin-bottom:2px; }
/* `margin:0` n'est pas cosmetique : l'element est passe de `div` a `h1`
   (le seul titre de niveau 1 du site etait la question du portail
   d'age), et un h1 arrive avec .67em de marge par defaut, qui
   descendrait l'en-tete entier. */
.title-main { font-family:'Playfair Display',serif; font-size:26px; font-weight:900; color:var(--text); line-height:1; letter-spacing:.02em; margin:0; }
.title-main span { color:var(--gold); }
.title-sub { font-family:'Playfair Display',serif; font-style:italic; font-size:11px; color:var(--text2); margin-top:1px; }
.stat-item { text-align:center; flex-shrink:0; }
.stat-n { font-family:'Playfair Display',serif; font-size:20px; font-weight:700; color:var(--gold); line-height:1; }
.stat-l { font-family:'Cinzel',serif; font-size:7px; letter-spacing:.25em; color:var(--text2); text-transform:uppercase; }
#theme-bar { display:flex; gap:1px; background:var(--bg3); border:1px solid var(--panel-border); border-radius:16px; padding:3px; flex-shrink:0; overflow:hidden; }
.theme-btn { font-family:'Cinzel',serif; font-size:6.5px; letter-spacing:.12em; padding:4px 7px; border-radius:12px; cursor:pointer; border:none; background:transparent; color:var(--text2); transition:all .2s; white-space:nowrap; }
.theme-btn.active { background:var(--gold); color:#fff; }
.theme-btn:hover:not(.active) { background:var(--bg2); color:var(--text); }
#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); }
#mktToggle, #loungeToggle { font-family:'Cinzel',serif; font-size:7px; letter-spacing:.18em; padding:5px 11px; border-radius:16px; cursor:pointer; text-transform:uppercase; white-space:nowrap; transition:all .2s; display:flex; align-items:center; gap:5px; flex-shrink:0; border:1px solid; }
#mktToggle    { border-color:rgba(26,107,181,.4); background:rgba(26,107,181,.08); color:#1A6BB5; }
#loungeToggle { border-color:rgba(139,43,226,.4); background:rgba(139,43,226,.08); color:#8B2BE2; }
#mktToggle[aria-pressed="true"]    { background:rgba(26,107,181,.2);  border-color:rgba(26,107,181,.7);  font-weight:700; }
#loungeToggle[aria-pressed="true"] { background:rgba(139,43,226,.2); border-color:rgba(139,43,226,.7); font-weight:700; }
.deco-line { position:fixed; top:82px; left:24px; right:24px; height:1px; background:linear-gradient(to right, transparent, var(--gold-l), var(--gold), var(--gold-l), transparent); z-index:50; opacity:.2; pointer-events:none; }

/* ── PANELS SHARED ── */
.panel, #lex, #lounge-panel { position:fixed; top:82px; bottom:44px; background:var(--panel-bg); z-index:60; display:flex; flex-direction:column; overflow:hidden; transition:transform .55s cubic-bezier(.16,1,.3,1); }
.panel { right:0; width:420px; border-left:1px solid var(--panel-border); box-shadow:-6px 0 28px var(--shd); transform:translateX(100%); }
.panel.open { transform:translateX(0); }
#lex { left:0; width:280px; border-right:1px solid var(--panel-border); box-shadow:4px 0 24px var(--shd); transform:translateX(-100%); }
#lex.open { transform:translateX(0); }
.panel-banner, .lex-banner { height:115px; position:relative; overflow:hidden; flex-shrink:0; }
.lex-banner { height:100px; }
#panel-flag-cvs, #lex-flag-cvs { width:100%; height:100%; display:block; }
.banner-ov, .lex-banner-ov { position:absolute; top:0;right:0;bottom:0;left:0; background:linear-gradient(to bottom, rgba(0,0,0,.05), rgba(0,0,0,.55)); }
.banner-flag { position:absolute; bottom:8px; left:16px; line-height:0; filter:drop-shadow(0 2px 6px rgba(0,0,0,.3)); }
.lex-flag-emoji { position:absolute; bottom:8px; left:14px; line-height:0; filter:drop-shadow(0 2px 4px rgba(0,0,0,.4)); }

/* ── Vignettes de drapeau ──────────────────────────────────
   Ces quatre classes portent une IMAGE, plus un emoji : Windows n'a
   aucun glyphe de drapeau et rendait « IT » pour l'Italie. Le dessin
   vient de drawFlag(), déjà utilisé pour les grands drapeaux animés.

   Le liseré et le rayon sont là pour que la vignette se détache du
   fond sombre : un drapeau à dominante noire ou blanche s'y fondrait
   sans lui. */
.drapeau-vignette, .exp-flag-img, .fete-drapeau-img {
  display:inline-block; vertical-align:middle; border-radius:2px;
  box-shadow:0 0 0 1px rgba(255,255,255,.14);
  object-fit:cover;
}
.exp-flag-img  { width:26px; height:17px; }
.fete-drapeau-img { width:42px; height:28px; }
.banner-name { position:absolute; bottom:12px; left:66px; font-family:'Playfair Display',serif; font-size:22px; font-weight:900; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.5); }
.lex-country-name { position:absolute; bottom:10px; left:58px; font-family:'Playfair Display',serif; font-size:18px; font-weight:900; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.5); }
.banner-region { position:absolute; bottom:0; left:68px; font-family:'Playfair Display',serif; font-style:italic; font-size:10px; color:rgba(255,255,255,.7); }
.lex-country-reg { position:absolute; bottom:0; left:60px; font-family:'Playfair Display',serif; font-style:italic; font-size:10px; color:rgba(255,255,255,.75); }
.panel-close, #lexClose { position:absolute; top:8px; right:10px; width:28px; height:28px; cursor:pointer; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.85); border:none; color:#333; font-size:13px; border-radius:50%; z-index:10; transition:all .2s; }
.panel-close:hover, #lexClose:hover { background:#333; color:#fff; }
.panel-body { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:16px 20px 40px; scrollbar-width:thin; scrollbar-color:var(--gold-l) transparent; }
.lex-body { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:14px 16px 32px; scrollbar-width:thin; scrollbar-color:var(--gold-l) transparent; }
.panel-body::-webkit-scrollbar, .lex-body::-webkit-scrollbar { width:3px; }
.panel-body::-webkit-scrollbar-thumb, .lex-body::-webkit-scrollbar-thumb { background:var(--gold-l); border-radius:2px; }

/* ── PANEL CONTENT ELEMENTS ── */
.tier-badge { display:inline-flex; align-items:center; gap:5px; font-family:'Cinzel',serif; font-size:7px; letter-spacing:.22em; padding:3px 10px; border-radius:2px; margin-bottom:12px; border:1px solid; }
.sec { font-family:'Cinzel',serif; font-size:7px; letter-spacing:.4em; color:var(--gold); text-transform:uppercase; margin:14px 0 6px; display:flex; align-items:center; gap:6px; }
.sec::after { content:''; flex:1; height:1px; background:linear-gradient(to right, var(--gold-p), transparent); }
/* La section « cape » porte une phrase d'explication, les deux autres
   n'en ont pas besoin : « Marques emblématiques » se comprend seul,
   « Cigares habillés de sa cape » demande une ligne. */
.cape-note {
  font-size:11px; line-height:1.5; color:var(--text2);
  margin:-2px 0 8px; padding-left:10px;
  border-left:2px solid var(--gold-p);
}
.srow { display:flex; justify-content:space-between; align-items:baseline; padding:5px 0; border-bottom:1px solid var(--bg3); }
.sk { font-size:11px; color:var(--text2); }
.sv { font-family:'Playfair Display',serif; font-size:11px; color:var(--text); font-weight:600; text-align:right; max-width:220px; }
.rev-box { background:linear-gradient(135deg, var(--text), var(--text2)); border-radius:4px; padding:12px 14px; margin:10px 0; display:flex; justify-content:space-between; align-items:center; }
.rev-lbl { font-family:'Cinzel',serif; font-size:7px; letter-spacing:.25em; color:var(--gold-p); opacity:.8; text-transform:uppercase; margin-bottom:2px; }
.rev-amt { font-family:'Playfair Display',serif; font-size:20px; font-weight:700; color:var(--gold-b); line-height:1; }
.rev-sub { font-size:9px; color:rgba(255,255,255,.4); margin-top:2px; }
/* Pas de montant : la raison prend la place principale. Volontairement
   PAS le style de .rev-amt — italique, plus petit, moins contraste :
   c'est une phrase, elle ne doit pas se lire comme un chiffre. */
.rev-absente { font-family:'Playfair Display',serif; font-size:11px; font-style:italic; font-weight:400; color:var(--gold-b); opacity:.72; line-height:1.4; max-width:215px; }
.tags { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
/* ── Étiquettes ────────────────────────────────────────────
   7 px était sous le seuil de lisibilité — et le suffixe « ▶ La
   feuille » descendait à 5,95 px à 55 % d'opacité, c'est-à-dire à rien.
   Une étiquette qu'on ne lit pas ne remplit aucun office, cliquable ou
   non. */
.tag { font-family:'Cinzel',serif; font-size:9px; letter-spacing:.06em;
       padding:4px 9px; border:1px solid var(--panel-border);
       color:var(--text2); border-radius:3px; background:var(--bg3);
       line-height:1.35; }
.sn { border-left:3px solid var(--gold); padding:9px 11px; background:var(--bg3); font-family:'Playfair Display',serif; font-style:italic; font-size:11px; color:var(--text2); line-height:1.7; margin-top:6px; }

/* ── LEXICON ── */
.lex-sec { font-family:'Cinzel',serif; font-size:7px; letter-spacing:.4em; color:var(--gold); text-transform:uppercase; margin:12px 0 6px; display:flex; align-items:center; gap:6px; }
.lex-sec::after { content:''; flex:1; height:1px; background:linear-gradient(to right, var(--gold-p), transparent); }
.lex-row { display:flex; justify-content:space-between; align-items:flex-start; padding:4px 0; border-bottom:1px solid var(--bg3); }
.lex-k { font-size:10px; color:var(--text2); flex-shrink:0; max-width:90px; }
.lex-v { font-family:'Playfair Display',serif; font-size:10px; color:var(--text); font-weight:600; text-align:right; flex:1; padding-left:6px; }
/* Une raison n'est pas une valeur : meme traitement que .rev-absente. */
.lex-v-raison { font-style:italic; font-weight:400; color:var(--text2); }
.lex-coords { font-family:'Cinzel',serif; font-size:10px; color:var(--gold); letter-spacing:.05em; padding:8px; background:var(--bg3); border-radius:3px; text-align:center; margin:8px 0; border:1px solid var(--panel-border); }
.lex-zone-item { display:flex; align-items:flex-start; gap:8px; padding:5px 0; border-bottom:1px solid var(--bg3); }
.lex-zone-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:3px; }
.lex-zone-name { font-size:10px; font-weight:700; color:var(--text); }
.lex-zone-note { font-size:9px; color:var(--text2); line-height:1.4; }

/* ── BRAND CARDS ── */
.brand-grid { display:flex; flex-direction:column; gap:4px; margin-top:4px; }
.brand-card { background:var(--bg2); border:1px solid var(--panel-border); border-radius:3px; padding:8px 10px; cursor:pointer; transition:all .18s; }
.brand-card:hover { border-color:var(--gold-l); box-shadow:0 2px 10px var(--shd); }
.brand-card.iconic { border-left:3px solid var(--gold); }
.brand-card.other  { border-left:3px solid var(--panel-border); }
/* Une entrée « cape » n'est pas une maison de ce pays : c'est un cigare
   qui porte sa feuille, et il est roulé ailleurs. Le filet en pointillés
   le dit avant même d'ouvrir la fiche — un trait plein la ferait passer
   pour une maison locale, ce que les deux autres classes signifient. */
.brand-card.cape   { border-left:3px dashed var(--gold-p); }
.bn { font-family:'Playfair Display',serif; font-size:13px; font-weight:700; color:var(--text); }
.btag { font-family:'Cinzel',serif; font-size:7px; letter-spacing:.15em; color:var(--gold); background:var(--gold-p); padding:2px 5px; border-radius:2px; }
.bdesc  { font-size:10px; color:var(--text2); margin-top:2px; line-height:1.5; }
.bexpand { font-family:'Cinzel',serif; font-size:7px; color:var(--gold); letter-spacing:.15em; margin-top:3px; }

/* ── HABANOS ── */
.habanos-block { border:1px solid var(--panel-border); border-radius:6px; overflow:hidden; margin-top:4px; }
.habanos-header { display:flex; align-items:center; gap:10px; padding:12px 14px; background:linear-gradient(135deg, var(--bg3), var(--bg2)); }
.habanos-logo { width:38px; height:38px; border-radius:4px; background:linear-gradient(135deg, #8B1A0A, #C0401A); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:18px; }
.habanos-name { font-family:'Playfair Display',serif; font-size:13px; font-weight:900; color:var(--text); }
.habanos-status { font-family:'Cinzel',serif; font-size:7px; letter-spacing:.2em; margin-top:1px; text-transform:uppercase; }
.habanos-badge { display:inline-flex; align-items:center; gap:4px; font-family:'Cinzel',serif; font-size:7px; letter-spacing:.18em; padding:3px 8px; border-radius:10px; border:1px solid; margin-bottom:10px; }
.habanos-desc { font-size:11px; color:var(--text2); line-height:1.65; padding:10px 14px 4px; font-style:italic; border-top:1px solid var(--bg3); }
.hfactory { display:flex; gap:10px; padding:7px 0; border-bottom:1px solid var(--bg3); align-items:flex-start; }
.hfactory:last-child { border-bottom:none; }
.hfactory-icon { width:28px; height:28px; border-radius:3px; background:var(--bg3); display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; }
.hfactory-info { flex:1; }
.hfactory-name { font-family:'Playfair Display',serif; font-size:12px; font-weight:700; color:var(--text); }
.hfactory-city { font-family:'Cinzel',serif; font-size:7px; letter-spacing:.15em; color:var(--text2); margin-top:1px; text-transform:uppercase; }
.hfactory-marques { display:flex; flex-wrap:wrap; gap:3px; margin-top:4px; }
.hfactory-marque { font-family:'Cinzel',serif; font-size:7px; letter-spacing:.08em; padding:2px 5px; background:var(--gold-p); border:1px solid var(--gold); color:var(--gold); border-radius:2px; }
.hdist { display:flex; justify-content:space-between; padding:4px 0; border-bottom:1px solid var(--bg3); font-size:10px; }
.hdist:last-child { border-bottom:none; }
.hdist-pays { color:var(--text2); }
.hdist-nom  { color:var(--text); font-weight:600; text-align:right; max-width:160px; }
.hcert { display:flex; align-items:center; gap:6px; padding:3px 0; font-size:10px; color:var(--text2); }
.hcert::before { content:"✓"; color:var(--grn); font-weight:700; flex-shrink:0; }
.hfestival { background:var(--bg3); border-radius:3px; padding:8px 10px; font-size:10px; color:var(--text2); line-height:1.5; border-left:3px solid var(--gold); }
.no-habanos-banner { background:linear-gradient(135deg, var(--bg3), var(--bg2)); border:1px dashed var(--panel-border); border-radius:6px; padding:14px; text-align:center; margin-top:4px; }
.no-habanos-icon  { font-size:24px; margin-bottom:6px; }
.no-habanos-title { font-family:'Playfair Display',serif; font-size:13px; font-weight:700; color:var(--text); margin-bottom:4px; }
.no-habanos-sub   { font-size:10px; color:var(--text2); line-height:1.6; }

/* ── MARKETS ── */
.market-badge { display:inline-flex; align-items:center; gap:5px; font-family:'Cinzel',serif; font-size:7px; letter-spacing:.22em; padding:3px 10px; border-radius:2px; margin-bottom:12px; border:1px solid; background:rgba(26,107,181,.1); border-color:rgba(26,107,181,.4); color:#1A6BB5; }
[data-theme="dark"] .market-badge, [data-theme="midnight"] .market-badge { background:rgba(100,160,255,.1); border-color:rgba(100,160,255,.35); color:#7AACFF; }
.mkt-rev-box { background:linear-gradient(135deg, #0D3A6B, #1A5C9A); border-radius:4px; padding:12px 14px; margin:10px 0; display:flex; justify-content:space-between; align-items:center; position:relative; }
.mkt-rev-lbl { font-family:'Cinzel',serif; font-size:7px; letter-spacing:.25em; color:rgba(180,220,255,.8); text-transform:uppercase; margin-bottom:2px; }
.mkt-rev-amt { font-family:'Playfair Display',serif; font-size:20px; font-weight:700; color:#7DDAFF; line-height:1; }
.mkt-rev-sub { font-size:9px; color:rgba(255,255,255,.4); margin-top:2px; }
.rank-crown { font-family:'Playfair Display',serif; font-size:32px; font-weight:900; color:rgba(26,107,181,.25); position:absolute; right:14px; top:8px; line-height:1; }
.trend-up { color:#3D9B5A; font-weight:700; }
.trend-dn { color:#C04040; font-weight:700; }
.trend-st { color:#B8860B; font-weight:700; }
.mkt-brand-tag { font-family:'Cinzel',serif; font-size:7px; letter-spacing:.1em; padding:3px 8px; border:1px solid rgba(26,107,181,.3); color:#1A6BB5; border-radius:2px; background:rgba(26,107,181,.06); }
[data-theme="dark"] .mkt-brand-tag, [data-theme="midnight"] .mkt-brand-tag { border-color:rgba(100,160,255,.3); color:#7AACFF; background:rgba(100,160,255,.06); }

/* ── BRAND MODAL ── */
.bmodal { position:fixed; top:0;right:0;bottom:0;left:0; z-index:500; display:flex; align-items:center; justify-content:center; pointer-events:none; opacity:0; transition:opacity .3s; }
.bmodal.open { opacity:1; pointer-events:all; }
.bm-back { position:absolute; top:0;right:0;bottom:0;left:0; background:rgba(0,0,0,.5); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.bm-box { position:relative; z-index:1; background:var(--panel-bg); width:580px; max-width:92vw; max-height:82vh; border-radius:6px; box-shadow:0 24px 72px var(--shd2); display:flex; flex-direction:column; overflow:hidden; transform:scale(.93) translateY(14px); transition:transform .32s cubic-bezier(.16,1,.3,1); border:1px solid var(--panel-border); }
.bmodal.open .bm-box { transform:scale(1) translateY(0); }
.bm-hdr { padding:20px 24px 12px; border-bottom:1px solid var(--bg3); flex-shrink:0; background:linear-gradient(to right, var(--bg3), var(--panel-bg)); position:relative; }
.bm-ey { font-family:'Cinzel',serif; font-size:7px; letter-spacing:.45em; color:var(--gold); margin-bottom:3px; text-transform:uppercase; }
.bm-name { font-family:'Playfair Display',serif; font-size:24px; font-weight:900; color:var(--text); line-height:1; }
.bm-founded { font-family:'Playfair Display',serif; font-style:italic; font-size:11px; color:var(--text2); margin-top:3px; }
.bm-close { position:absolute; top:12px; right:12px; width:26px; height:26px; background:var(--bg3); border:none; border-radius:50%; cursor:pointer; font-size:12px; display:flex; align-items:center; justify-content:center; color:var(--text); transition:all .2s; }
.bm-close:hover { background:var(--text); color:var(--panel-bg); }
.bm-body { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:16px 24px 24px; scrollbar-width:thin; scrollbar-color:var(--gold-l) transparent; }
.bm-body::-webkit-scrollbar { width:3px; }
.bm-body::-webkit-scrollbar-thumb { background:var(--gold-l); }
.bm-hist { font-size:12px; line-height:1.78; color:var(--text2); margin-bottom:16px; white-space:pre-line; }
.gam-title { font-family:'Cinzel',serif; font-size:8px; letter-spacing:.38em; color:var(--gold); text-transform:uppercase; margin-bottom:10px; display:flex; align-items:center; gap:6px; }
.gam-title::after { content:''; flex:1; height:1px; background:var(--gold-p); }
.gam-list { display:flex; flex-direction:column; gap:8px; }
.gam-item { display:flex; gap:10px; padding:10px 12px; background:var(--bg2); border:1px solid var(--bg3); border-radius:3px; border-left:3px solid; }
.gam-info  { flex:1; }
.gam-name  { font-family:'Playfair Display',serif; font-size:13px; font-weight:700; margin-bottom:3px; }
.gam-story { font-size:11px; color:var(--text2); line-height:1.6; margin-bottom:5px; }
.gam-metas { display:flex; flex-wrap:wrap; gap:4px; }
.gam-mt { font-family:'Cinzel',serif; font-size:7px; letter-spacing:.1em; padding:2px 5px; background:var(--bg3); border:1px solid var(--panel-border); color:var(--text2); border-radius:2px; }

/* ── COMPASS ── */




/* ── ZOOM ── */
#zoom-ctrl { position:fixed; bottom:56px; right:16px; z-index:55; display:flex; flex-direction:column; align-items:center; gap:4px; }
.zoom-btn { width:34px; height:34px; background:var(--panel-bg); border:1px solid var(--panel-border); border-radius:4px; cursor:pointer; font-size:16px; display:flex; align-items:center; justify-content:center; color:var(--text); box-shadow:0 2px 8px var(--shd); transition:all .2s; font-family:'Lato',sans-serif; }
.zoom-btn:hover { background:var(--gold); color:#fff; border-color:var(--gold); }
#zoom-lbl { font-family:'Cinzel',serif; font-size:8px; color:var(--text2); text-align:center; letter-spacing:.05em; padding:2px; }
#zoom-track { width:3px; height:60px; background:var(--bg3); border-radius:3px; margin:2px auto; }
#zoom-thumb { width:3px; border-radius:3px; background:var(--gold); transition:height .2s; min-height:4px; }

/* ── TOOLTIP ── */
/* Infobulle du globe. L'etat de repos doit etre declare : sans lui, la
   regle transitionnait une opacite jamais definie, et l'infobulle vide
   restait peinte au coin haut-gauche (fixed sans left/top) jusqu'au
   premier survol. visibility complete l'opacite pour la sortir du rendu
   plutot que de la laisser transparente. */
#tip { position:fixed; left:0; top:0; opacity:0; visibility:hidden;
       background:var(--panel-bg); border:1px solid var(--panel-border); box-shadow:0 3px 14px var(--shd); padding:5px 11px; font-family:'Cinzel',serif; font-size:9px; letter-spacing:.12em; color:var(--text); pointer-events:none; z-index:70; transition:opacity .15s, visibility .15s; white-space:nowrap; border-radius:3px; }
#tip.tip-on { opacity:1; visibility:visible; }

/* ── BOTTOM BAR ── */
.bbar { position:fixed; bottom:0; left:0; right:0; height:44px; padding:0 24px; background:var(--hdr-bg); border-top:1px solid var(--panel-border); z-index:44; display:flex; align-items:center; justify-content:space-between; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:all .4s; }
.hint { font-family:'Cinzel',serif; font-size:7px; letter-spacing:.25em; color:var(--text3); text-transform:uppercase; }
.legend { display:flex; gap:14px; }
.leg-i { display:flex; align-items:center; gap:5px; font-family:'Cinzel',serif; font-size:7px; letter-spacing:.15em; color:var(--text2); text-transform:uppercase; }
.leg-d { width:7px; height:7px; border-radius:50%; flex-shrink:0; }

/* ── LOUNGES & CAVES ── */
.lounge-grid { display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.lounge-card {
  background:var(--bg2); border:1px solid var(--panel-border);
  border-left:3px solid var(--gold); border-radius:3px;
  padding:10px 12px; transition:box-shadow .18s;
}
.lounge-card:hover { box-shadow:0 2px 12px var(--shd); }
.lounge-top { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; margin-bottom:5px; }
.lounge-name { font-family:'Playfair Display',serif; font-size:13px; font-weight:700; color:var(--text); line-height:1.2; flex:1; }
.lounge-price { font-family:'Cinzel',serif; font-size:9px; color:var(--gold); letter-spacing:.05em; flex-shrink:0; padding-top:2px; }
.lounge-meta { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:5px; align-items:center; }
.lounge-city { font-family:'Cinzel',serif; font-size:7px; letter-spacing:.15em; color:var(--text2); text-transform:uppercase; }
.lounge-type { font-family:'Cinzel',serif; font-size:7px; letter-spacing:.1em; font-weight:700; }
.lounge-desc { font-size:10px; color:var(--text2); line-height:1.6; }
.lounge-phone { font-family:'Cinzel',serif; font-size:8px; color:var(--text3); margin-top:5px; letter-spacing:.05em; }

/* ── LOUNGE PANEL (dedicated mobile panel) ── */
#lounge-panel { right:0; width:420px; border-left:1px solid var(--panel-border); box-shadow:-6px 0 28px var(--shd); transform:translateX(100%); }
#lounge-panel.open { transform:translateX(0); }

.lounge-full-intro { padding:12px 0 8px; border-bottom:1px solid var(--bg3); margin-bottom:12px; }
.lounge-count-badge {
  display:inline-flex; align-items:center;
  font-family:'Cinzel',serif; font-size:7px; letter-spacing:.3em;
  padding:3px 10px; border-radius:2px;
  background:var(--gold-p); border:1px solid var(--gold);
  color:var(--gold); text-transform:uppercase; margin-bottom:8px;
}
.lounge-intro-text { font-size:11px; color:var(--text2); font-style:italic; line-height:1.5; }

.lounge-full-grid { display:flex; flex-direction:column; gap:10px; }
.lounge-card-full {
  background:var(--bg2); border:1px solid var(--panel-border);
  border-radius:4px; padding:12px 14px; transition:box-shadow .2s;
  border-left:4px solid var(--gold);
}
.lounge-card-full:hover { box-shadow:0 3px 14px var(--shd); }
.lounge-card-header { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; margin-bottom:6px; }
.lounge-card-name {
  font-family:'Playfair Display',serif; font-size:14px;
  font-weight:700; color:var(--text); line-height:1.2; flex:1;
}
.lounge-card-price {
  font-family:'Cinzel',serif; font-size:10px;
  color:var(--gold); letter-spacing:.05em; flex-shrink:0; padding-top:2px;
}
.lounge-card-meta { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:7px; align-items:center; }
.lounge-card-city {
  font-family:'Cinzel',serif; font-size:7px; letter-spacing:.15em;
  color:var(--text2); text-transform:uppercase;
}
.lounge-card-type {
  font-family:'Cinzel',serif; font-size:7px; letter-spacing:.1em; font-weight:700;
}
.lounge-card-desc { font-size:11px; color:var(--text2); line-height:1.65; }
.lounge-card-footer { margin-top:8px; padding-top:7px; border-top:1px solid var(--bg3); }
.lounge-phone-link {
  font-family:'Cinzel',serif; font-size:8px; color:var(--gold);
  letter-spacing:.08em; text-decoration:none;
}
.lounge-phone-link:hover { text-decoration:underline; }

.no-lounge-banner {
  background:var(--bg3); border:1px dashed var(--panel-border);
  border-radius:6px; padding:20px; text-align:center; margin-top:12px;
}
.no-lounge-icon  { font-size:28px; margin-bottom:8px; }
.no-lounge-title {
  font-family:'Playfair Display',serif; font-size:14px;
  font-weight:700; color:var(--text); margin-bottom:6px;
}
.no-lounge-sub { font-size:11px; color:var(--text2); line-height:1.6; }
/* Triangle legend dot for lounges */
.leg-triangle {
  width:0; height:0; border-radius:0;
  background:transparent !important;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-bottom:9px solid #8B2BE2;
}

/* ═══════════════════════════════════════════════
   LOUNGE CARDS — clean .lc-* classes
   ═══════════════════════════════════════════════ */
.lc-intro {
  font-family:'Cinzel',serif; font-size:8px; letter-spacing:.15em;
  color:var(--text2); text-transform:uppercase;
  padding:10px 0 12px; border-bottom:1px solid var(--bg3);
  margin-bottom:12px;
}
.lc-badge {
  display:inline-block; padding:2px 8px; border-radius:2px;
  background:var(--gold-p); border:1px solid var(--gold);
  color:var(--gold); font-weight:700; letter-spacing:.2em; margin-right:6px;
}
/* « Non vérifié » : la fiche n'a pas de lecture datée dans sa source. Contour en
   tirets, couleur de texte du thème : une réserve, pas une décoration. */
.lc-nv {
  display:inline-block; padding:0 6px; border-radius:2px; white-space:nowrap;
  border:1px dashed var(--text2); color:var(--text2);
  font-size:9px; letter-spacing:.04em; line-height:15px; margin-inline-start:6px;
}
.lc-grid { display:flex; flex-direction:column; gap:8px; }
.lc-card {
  background:var(--bg2); border:1px solid var(--panel-border);
  border-left:3px solid #8B2BE2;
  border-radius:3px; padding:10px 12px;
  transition:box-shadow .18s, border-left-color .18s;
}
.lc-card:hover { box-shadow:0 2px 14px var(--shd); border-left-color:#C060FF; }
.lc-top { display:flex; justify-content:space-between; align-items:flex-start; gap:6px; margin-bottom:5px; }
.lc-name {
  font-family:'Playfair Display',serif; font-size:13px;
  font-weight:700; color:var(--text); line-height:1.25; flex:1;
}
.lc-price {
  font-family:'Cinzel',serif; font-size:9px; color:var(--gold);
  letter-spacing:.05em; flex-shrink:0; padding-top:1px;
}
.lc-meta { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:6px; align-items:center; }
.lc-city {
  font-family:'Cinzel',serif; font-size:7px; letter-spacing:.14em;
  color:var(--text2); text-transform:uppercase;
}
.lc-type { font-family:'Cinzel',serif; font-size:7px; letter-spacing:.1em; font-weight:700; }
.lc-desc { font-size:10.5px; color:var(--text2); line-height:1.65; }
.lc-phone { margin-top:7px; padding-top:6px; border-top:1px solid var(--bg3); }
.lc-phone a {
  font-family:'Cinzel',serif; font-size:8px; color:var(--gold);
  letter-spacing:.08em; text-decoration:none;
}
.lc-phone a:hover { text-decoration:underline; }

.no-lounge-banner {
  background:var(--bg3); border:1px dashed var(--panel-border);
  border-radius:6px; padding:24px 16px; text-align:center; margin-top:12px;
}
.no-lounge-icon  { font-size:32px; margin-bottom:8px; }
.no-lounge-title {
  font-family:'Playfair Display',serif; font-size:14px;
  font-weight:700; color:var(--text); margin-bottom:6px;
}
.no-lounge-sub { font-size:11px; color:var(--text2); line-height:1.6; }

/* ════════════════════════════════════════════════════════
   CONTRIBUTION MODAL — Signaler un établissement
   ════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════
   COLONNE DE BOUTONS FLOTTANTS — bas gauche
   ────────────────────────────────────────────────────────
   Source unique de la géométrie des boutons ✏ 🔄 🔍 🗺. Ils
   étaient auparavant positionnés chacun par des offsets `bottom`
   codés en dur dans quatre fichiers distincts (components.css,
   globe.js, search.js, explorer.js) : les écarts avaient dérivé
   jusqu'à 0 px entre deux d'entre eux et 48 px entre deux autres,
   ce dernier trou correspondant à la place réservée au bouton
   gyroscope, qui n'existe que sur appareil tactile.

   Une pile flex règle le problème à la racine : l'écart est
   constant, et un bouton absent ne laisse aucun vide. L'ordre
   vertical est fixé par `order`, donc indépendant de l'instant où
   chaque module injecte son bouton.
   ════════════════════════════════════════════════════════ */
#side-fabs {
  position:fixed; left:16px; bottom:62px;
  /* Sous le panneau de gauche (#lex, z-index 60), qui recouvre cette
     colonne quand il s'ouvre. */
  z-index:55;
  display:flex; flex-direction:column-reverse; align-items:center; gap:10px;
  pointer-events:none;   /* la colonne ne capte rien entre les boutons */
}

.side-fab {
  pointer-events:auto;
  flex:0 0 auto;
  /* Contexte de positionnement pour les décorations internes, comme la
     pastille ::after du gyroscope actif (#gyro-btn.gyro-on). */
  position:relative;
  width:38px; height:38px;
  padding:0; line-height:1; font-size:17px;
  display:flex; align-items:center; justify-content:center;
  background:var(--panel-bg);
  border:1px solid var(--panel-border);
  border-radius:50%;
  cursor:pointer;
  color:var(--gold);
  box-shadow:0 2px 10px var(--shd);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:border-color .2s, box-shadow .2s, transform .15s;
}
.side-fab:hover { border-color:var(--gold); box-shadow:0 4px 20px var(--shd2); transform:scale(1.08); }

/* Ordre de bas en haut (le conteneur est en column-reverse). */
#contrib-btn  { order:1; color:var(--text); font-size:16px; }
#rotate-btn   { order:2; font-size:17px; }
#gyro-btn     { order:3; }
#search-btn   { order:4; }
#explorer-btn { order:5; font-size:15px; }

/* Rotation automatique en marche : même signalement que le gyroscope —
   fond doré et pastille en bas à droite. Un bouton bascule doit dire
   dans quel état il est, sinon on le tape deux fois pour voir. */
#rotate-btn.rot-on {
  background: rgba(201, 162, 39, .25);
  border-color: var(--gold);
  color: var(--gold);
}
#rotate-btn.rot-on::after {
  content: ''; position: absolute;
  width: 8px; height: 8px; bottom: 4px; right: 4px;
  background: var(--gold); border-radius: 50%;
}

/* Modal backdrop */
#contrib-modal {
  position:fixed; inset:0;
  z-index:500;
  background:rgba(0,0,0,0);
  display:none;
  align-items:center; justify-content:center;
  transition:background .25s;
}
#contrib-modal.open {
  display:flex;
  background:rgba(0,0,0,.55);
}

/* Modal box */
.contrib-box {
  background:var(--panel-bg);
  border:1px solid var(--panel-border);
  border-radius:8px;
  width:480px; max-width:94vw;
  max-height:88vh;
  overflow-y:auto;
  box-shadow:0 24px 72px var(--shd2);
  transform:scale(.95) translateY(10px);
  transition:transform .28s cubic-bezier(.16,1,.3,1);
  padding:0;
}
#contrib-modal.open .contrib-box {
  transform:scale(1) translateY(0);
}

/* Modal header */
.contrib-hdr {
  padding:18px 20px 14px;
  border-bottom:1px solid var(--bg3);
  display:flex; align-items:center; justify-content:space-between;
}
.contrib-title {
  font-family:'Cinzel',serif; font-size:11px; letter-spacing:.35em;
  color:var(--gold); text-transform:uppercase;
}
.contrib-close {
  width:28px; height:28px; border:none; cursor:pointer;
  background:var(--bg3); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--text); font-size:13px;
  transition:all .2s;
}
.contrib-close:hover { background:var(--gold); color:#fff; }

/* Form */
.contrib-body { padding:16px 20px 20px; }
.contrib-intro {
  font-size:11px; color:var(--text2); line-height:1.6;
  margin-bottom:14px; padding:10px 12px;
  background:var(--bg3); border-radius:4px;
  border-left:3px solid var(--gold);
}
.contrib-row { margin-bottom:12px; }
.contrib-label {
  display:block;
  font-family:'Cinzel',serif; font-size:7px; letter-spacing:.2em;
  color:var(--text2); text-transform:uppercase;
  margin-bottom:5px;
}
.contrib-label span { color:var(--gold); }
.contrib-input, .contrib-select, .contrib-textarea {
  width:100%;
  background:var(--bg2);
  border:1px solid var(--panel-border);
  border-radius:3px;
  padding:8px 10px;
  font-family:'Lato',sans-serif; font-size:12px;
  color:var(--text);
  transition:border-color .2s;
  outline:none;
}
.contrib-input:focus, .contrib-select:focus, .contrib-textarea:focus {
  border-color:var(--gold);
}
.contrib-select option { background:var(--panel-bg); }
.contrib-textarea { resize:vertical; min-height:72px; line-height:1.5; }
.contrib-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

/* Submit */
.contrib-footer {
  padding:12px 20px 16px;
  border-top:1px solid var(--bg3);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.contrib-note { font-size:9px; color:var(--text2); line-height:1.5; flex:1; }
.contrib-submit {
  padding:9px 20px;
  background:var(--gold);
  color:#1a0a00;
  border:none; border-radius:3px;
  font-family:'Cinzel',serif; font-size:8px; letter-spacing:.2em;
  text-transform:uppercase; cursor:pointer;
  transition:all .2s; white-space:nowrap;
  font-weight:700;
}
.contrib-submit:hover { background:var(--gold-l); transform:translateY(-1px); }
.contrib-submit:disabled { opacity:.5; cursor:not-allowed; transform:none; }

/* Success state */
.contrib-success {
  padding:32px 20px;
  text-align:center;
  display:none;
}
.contrib-success.show { display:block; }
.contrib-success-icon { font-size:40px; margin-bottom:12px; }
.contrib-success-title {
  font-family:'Playfair Display',serif; font-size:16px;
  font-weight:700; color:var(--text); margin-bottom:8px;
}
.contrib-success-sub { font-size:11px; color:var(--text2); line-height:1.6; }

/* In-panel contribute button */
.contrib-panel-btn {
  display:flex; align-items:center; gap:6px;
  margin:10px 0 4px;
  padding:7px 12px;
  background:var(--bg3);
  border:1px dashed var(--panel-border);
  border-radius:3px;
  cursor:pointer;
  font-family:'Cinzel',serif; font-size:7px; letter-spacing:.15em;
  color:var(--text2); text-transform:uppercase;
  transition:all .2s; width:100%;
  text-align:left;
}
.contrib-panel-btn:hover { border-color:var(--gold); color:var(--gold); background:var(--gold-p); }

/* Pending contributions list */
.contrib-pending {
  margin-top:10px; padding:8px 10px;
  background:var(--bg3); border-radius:3px;
  border-left:2px solid #8B2BE2;
}
.contrib-pending-title {
  font-family:'Cinzel',serif; font-size:7px; letter-spacing:.15em;
  color:#8B2BE2; text-transform:uppercase; margin-bottom:6px;
}
.contrib-pending-item {
  font-size:10px; color:var(--text2); padding:3px 0;
  border-bottom:1px solid var(--bg2); line-height:1.4;
}
.contrib-pending-item:last-child { border-bottom:none; }
.contrib-pending-badge {
  display:inline-block; padding:1px 5px; border-radius:2px;
  background:rgba(139,43,226,.15); color:#8B2BE2;
  font-size:8px; margin-left:4px; vertical-align:middle;
}

/* Mobile adjustments */
body.mobile-mode #side-fabs { left:12px; bottom:68px; gap:8px; }
body.mobile-mode .side-fab   { width:34px; height:34px; font-size:15px; }
body.mobile-mode #contrib-btn  { font-size:14px; }
body.mobile-mode #contrib-modal { align-items:flex-end; }
body.mobile-mode .contrib-box { width:100%; max-width:100%; border-radius:16px 16px 0 0; max-height:92vh; }


/* ── Lounge cards enrichies ───────────────────────────── */
.lc-hours { font-size:10px; color:var(--text2); margin:4px 0 2px; }
.lc-links { display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; }
.lc-link  {
  display:inline-flex; align-items:center; gap:3px;
  padding:3px 8px; border-radius:3px;
  background:var(--bg3); border:1px solid var(--panel-border);
  color:var(--text2); font-size:10px; text-decoration:none;
  transition:border-color .15s, color .15s;
}
.lc-link:hover { border-color:var(--gold); color:var(--gold); }
.lc-stars { display:inline-flex; align-items:center; }

/* ── Bouton partage ───────────────────────────────────────
   Il était habillé en ligne dans deeplinks.js, et ces deux règles
   devaient lui répondre à coups de !important. Le style vit ici, avec
   celui de la croix dont il est le voisin immédiat : même taille, même
   forme, décalé d'une largeur de bouton. */
.share-btn {
  position:absolute; top:8px; right:44px; width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.85); border:none; color:#333;
  font-size:14px; border-radius:50%; cursor:pointer; z-index:10;
  transition:background .2s, color .2s;
}
.share-btn:hover { background:#333; color:#fff; }
.share-btn.copie { background:var(--grn); color:#fff; }
/* La cible tactile ne se voit pas : 44 px autour d'une pastille qui
   garde ses 28 px a l'oeil. Du remplissage l'aurait deplacee ; un
   pseudo-element en debord negatif elargit la zone sensible sans
   toucher au dessin. Meme procede que .fo-close et .bm-share. */
.share-btn::before { content:''; position:absolute; inset:-8px; }
/* Dernier recours quand ni le partage natif ni le presse-papiers ne
   sont disponibles (http nu) : l'adresse, deja selectionnee. */
#share-url {
  position:absolute; top:42px; right:10px; width:min(280px, 70vw);
  padding:6px 8px; font-size:11px; z-index:11;
  background:#fff; color:#222; border:1px solid var(--gold);
  border-radius:4px; box-shadow:0 6px 18px rgba(0,0,0,.25);
}

/* ── Système de notation ─────────────────────────────── */
.lc-rating-section {
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid var(--panel-border);
}
.lc-rating-wrap {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.lc-rating-stars {
  display:flex; gap:2px;
}
.lc-star {
  font-size:18px;
  color:var(--text3);
  cursor:pointer;
  transition:color .12s, transform .12s;
  line-height:1;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
.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); }
.lc-star:hover,
.lc-rating-stars:hover .lc-star { color:var(--gold) !important; }
.lc-rating-stars:hover .lc-star ~ .lc-star { color:var(--text3) !important; }
.lc-rating-avg {
  font-family:'Cinzel',serif; font-size:11px; color:var(--gold);
  font-weight:700; white-space:nowrap;
}
.lc-rating-cnt { font-size:9px; color:var(--text2); font-weight:400; }
.lc-rating-none { font-size:9px; color:var(--text2); font-style:italic; font-family:sans-serif; }

/* ══════════════════════════════════════════════════════
   GALERIE PHOTOS — Lounge cards
══════════════════════════════════════════════════════ */
.lc-photos { margin-top: 8px; }

/* Hero photo */
.lc-photo-gallery { border-radius: 5px; overflow: hidden; }
.lc-photo-hero {
  position: relative; cursor: zoom-in;
  background: var(--bg3); border-radius: 5px 5px 0 0;
  overflow: hidden; aspect-ratio: 3/2;
  max-height: 200px;
}
.lc-photo-img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .3s ease;
  display: block;
}
.lc-photo-hero:hover .lc-photo-img { transform: scale(1.03); }
.lc-photo-caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,.7));
  color: #fff; font-size: 10px; padding: 16px 10px 6px;
  line-height: 1.4;
}
.lc-photo-count {
  position: absolute; top: 8px; right: 8px;
  background: rgba(0,0,0,.55); color: #fff;
  font-size: 10px; padding: 3px 7px;
  border-radius: 10px; backdrop-filter: blur(4px);
}

/* Strip thumbnails */
.lc-photo-strip {
  display: flex; gap: 3px; padding: 3px;
  background: var(--bg3);
  border-radius: 0 0 5px 5px;
  overflow-x: auto;
  scrollbar-width: none;
}
.lc-photo-strip::-webkit-scrollbar { display: none; }
.lc-photo-thumb {
  width: 52px; height: 35px; object-fit: cover;
  border-radius: 3px; cursor: pointer; flex-shrink: 0;
  opacity: .65; transition: opacity .15s, outline .15s;
  outline: 2px solid transparent;
}
.lc-photo-thumb.active { opacity: 1; outline-color: var(--gold); }
.lc-photo-thumb:hover  { opacity: .9; }

/* ══════════════════════════════════════════════════════
   LIGHTBOX
══════════════════════════════════════════════════════ */
#lc-lightbox {
  position: fixed; inset: 0; z-index: 900;
  display: none; align-items: center; justify-content: center;
}
#lc-lightbox.open { display: flex; }

.lb-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.92);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.lb-content {
  position: relative; z-index: 1;
  max-width: min(92vw, 900px);
  max-height: 92vh;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
#lb-img {
  max-width: 100%; max-height: 80vh;
  border-radius: 6px; object-fit: contain;
  box-shadow: 0 20px 60px rgba(0,0,0,.8);
}
#lb-caption {
  color: rgba(255,255,255,.8); font-size: 12px;
  text-align: center; max-width: 600px;
}
#lb-counter {
  color: rgba(255,255,255,.4); font-size: 10px;
  font-family: 'Cinzel', serif; letter-spacing: .1em;
}
.lb-close {
  position: absolute; top: -40px; right: 0;
  background: none; border: none; color: rgba(255,255,255,.7);
  font-size: 24px; cursor: pointer; padding: 6px;
  line-height: 1; transition: color .15s;
}
.lb-close:hover { color: #fff; }
.lb-prev, .lb-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%; width: 44px; height: 44px;
  color: #fff; font-size: 22px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s; z-index: 2;
  backdrop-filter: blur(4px);
}
.lb-prev { left: -56px; }
.lb-next { right: -56px; }
.lb-prev:hover, .lb-next:hover { background: rgba(255,255,255,.25); }
@media (max-width: 640px) {
  .lb-prev { left: 4px; }
  .lb-next { right: 4px; }
}

/* ══════════════════════════════════════════════════════
   UPLOAD ADMIN dans les fiches (interface légère)
══════════════════════════════════════════════════════ */
.lc-photo-upload-btn {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 6px; padding: 4px 10px;
  background: var(--bg3); border: 1px dashed var(--panel-border);
  border-radius: 4px; color: var(--text2); font-size: 10px;
  cursor: pointer; transition: border-color .15s, color .15s;
}
.lc-photo-upload-btn:hover { border-color: var(--gold); color: var(--gold); }


/* ══ ACCESSIBILITÉ DU GLOBE (a11y-globe.js) ════════════════
   Le globe est un canvas : sans ces éléments il n'existe ni pour le
   clavier ni pour les lecteurs d'écran. */

/* Contenu réservé aux lecteurs d'écran */
.sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Focus visible sur le globe : sans repère, la navigation clavier est aveugle */
#globe:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: -3px;
}

/* Alternative textuelle : masquée, mais révélée dès qu'on l'atteint au
   clavier — un utilisateur voyant doit voir où se trouve son focus. */
.sr-only-focusable:not(:focus-within) {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.sr-only-focusable:focus-within {
  position: fixed; top: 90px; left: 16px; z-index: 12000;
  width: 320px; max-height: 70vh; overflow-y: auto;
  background: var(--panel-bg); border: 1px solid var(--panel-border);
  border-radius: 12px; padding: 16px; box-shadow: 0 18px 50px var(--shd2);
}
#globe-a11y h2 { font-family: 'Cinzel', serif; font-size: 13px; color: var(--gold); margin: 0 0 4px; }
#globe-a11y p  { font-size: 11px; color: var(--text2); margin: 0 0 10px; }
#globe-a11y h3 {
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text2); margin: 12px 0 4px;
}
#globe-a11y ul { list-style: none; margin: 0; padding: 0; }
#globe-a11y button {
  display: block; width: 100%; text-align: left;
  padding: 6px 8px; margin-bottom: 2px; font-size: 12px;
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  color: var(--text); cursor: pointer;
}
#globe-a11y button:hover { background: var(--bg3); }
#globe-a11y button:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

/* Compteur d'établissements dans le titre de section du panneau pays */
.lounge-count {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  border-radius: 9px; background: var(--bg3); border: 1px solid var(--panel-border);
  font-family: 'Lato', sans-serif; font-size: 10px; color: var(--text2);
  letter-spacing: 0; vertical-align: middle;
}

/* ══ FETE NATIONALE ══════════════════════════════════════
   Se superpose a tout (z-index 600, au-dessus des modales a 500) mais
   n'intercepte RIEN : pointer-events reste a none sur le voile et sur
   les confettis. Seul le bouton de fermeture les reactive. Sans cette
   precaution, un voile plein ecran avalerait les clics sur le globe et
   sur les panneaux — et la campagne de bout en bout s'en apercevrait la
   ou l'oeil ne le verrait pas. */
.fete-zone {
  position: fixed; inset: 0; z-index: 600;
  pointer-events: none;
}
.fete-confettis { position: absolute; inset: 0; width: 100%; height: 100%; }

.fete-carte {
  position: absolute; left: 50%; top: 28px;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  max-width: min(92vw, 460px);
  padding: 12px 14px 12px 16px;
  background: var(--panel-bg); border: 1px solid var(--gold);
  border-radius: 4px; box-shadow: 0 6px 26px var(--shd);
  animation: fete-entree .5s cubic-bezier(.2,.9,.3,1.2) both;
}
/* Le pave de texte est en lecture seule : lui laisser pointer-events
   masquerait le globe juste dessous. */
.fete-drapeau { line-height: 0; }
.fete-textes  { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fete-libelle {
  font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold);
}
.fete-pays {
  font-family: 'Lato', sans-serif; font-size: 12px; color: var(--text2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fete-fermer {
  pointer-events: auto;            /* la seule zone cliquable */
  margin-left: auto; flex: none;
  width: 24px; height: 24px; padding: 0;
  background: none; border: 1px solid var(--panel-border); border-radius: 3px;
  color: var(--text2); font-size: 11px; line-height: 1; cursor: pointer;
}
.fete-fermer:hover { color: var(--text); border-color: var(--gold); }
.fete-fermer:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

@keyframes fete-entree {
  from { opacity: 0; transform: translateX(-50%) translateY(-16px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
/* « Moins d'animations » : la banniere apparait sans glisser, et fete.js
   n'a de toute facon pas cree de confettis. */
.fete-carte.fete-sans-mouvement { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .fete-carte { animation: none; }
}

/* RTL : le drapeau passe a droite, la croix a gauche. */
[dir="rtl"] .fete-carte  { padding: 12px 16px 12px 14px; flex-direction: row-reverse; }
[dir="rtl"] .fete-fermer { margin-left: 0; margin-right: auto; }

/* ══ CONTRIBUTION — position sur place ═══════════════════
   Ligne facultative du formulaire « Signaler un établissement ». */
.contrib-geo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.contrib-geo-btn, .contrib-geo-clear {
  flex: none; padding: 7px 12px; cursor: pointer;
  background: var(--bg3); border: 1px solid var(--panel-border); border-radius: 3px;
  font-family: 'Lato', sans-serif; font-size: 12px; color: var(--text);
}
.contrib-geo-btn:hover:not(:disabled), .contrib-geo-clear:hover { border-color: var(--gold); color: var(--gold); }
.contrib-geo-btn:disabled { opacity: .55; cursor: progress; }
.contrib-geo-btn:focus-visible, .contrib-geo-clear:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.contrib-geo-clear { font-size: 11px; padding: 5px 9px; }
/* Le message d'état porte le résultat ET les refus : il doit rester
   lisible sur une ligne étroite plutôt que pousser les boutons. */
.contrib-geo-state {
  flex: 1 1 160px; min-width: 0;
  font-family: 'Lato', sans-serif; font-size: 11.5px; color: var(--text2); line-height: 1.35;
}
.contrib-geo-state.ok { color: var(--grn); }
.contrib-geo-state.ko { color: #C0401A; }
[data-theme="dark"] .contrib-geo-state.ko, [data-theme="midnight"] .contrib-geo-state.ko { color: #FF8A6B; }

/* ══ FICHE PRATIQUE DU PAYS ══════════════════════════════
   Devise, langue, heure locale, distance. Deux colonnes sur bureau, une
   seule quand la place manque — l'heure et la devise doivent rester
   lisibles avant tout. */
.fiche-pays {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; margin: 10px 0 4px;
  background: var(--panel-border); border: 1px solid var(--panel-border);
  border-radius: 4px; overflow: hidden;
}
.fiche-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 11px; background: var(--bg2); min-width: 0;
}
.fiche-k {
  font-family: 'Cinzel', serif; font-size: 7.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text2);
}
.fiche-v {
  font-family: 'Lato', sans-serif; font-size: 12px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fiche-v strong { font-size: 13.5px; font-weight: 700; }
/* Le code de devise et le sigle de fuseau : présents mais secondaires. */
.fiche-v em {
  font-style: normal; font-size: 10px; color: var(--text2);
  letter-spacing: .04em;
}
.fiche-note { color: var(--gold); cursor: help; margin-left: 2px; }
.fiche-geo {
  padding: 2px 8px; cursor: pointer;
  background: none; border: 1px solid var(--gold); border-radius: 3px;
  font-family: 'Lato', sans-serif; font-size: 11px; color: var(--gold);
}
.fiche-geo:hover:not(:disabled) { background: var(--gold-p); }
.fiche-geo:disabled { opacity: .6; cursor: progress; }
.fiche-geo:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (max-width: 420px) {
  .fiche-pays { grid-template-columns: 1fr; }
}

/* ══ DISTANCE DANS LE CARTOUCHE DE COORDONNÉES ══════════
   Deux rangées d'un même cartouche, séparées par un filet, plutôt que
   deux éléments serrés sur une ligne : « Calculer la distance » ne tient
   pas à côté de « 04°N 12°E » dans un panneau de 280 px.

   Le cartouche gardait un `padding:8px` unique : il passe sur chaque
   rangée, sinon le filet de séparation ne va pas d'un bord à l'autre. */
.lex-coords { display: flex; flex-direction: column; align-items: stretch; padding: 0; gap: 0; }
.lex-coords-val { padding: 8px; }

/* Cinzel, interlettrage large, rayon 2px, or : la même écriture que
   .tier-badge et .tag. La pastille Lato à rayon 9px d'avant jurait avec
   tout ce qui l'entourait. */
.lex-dist, .lex-dist-btn {
  display: block; width: 100%;
  padding: 6px 8px;
  border: none; border-top: 1px solid var(--panel-border);
  background: transparent;
  font-family: 'Cinzel', serif; font-size: 8px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold); text-align: center;
}
.lex-dist-btn { cursor: pointer; transition: background .18s, letter-spacing .18s; }
.lex-dist-btn:hover:not(:disabled) { background: var(--gold-p); letter-spacing: .26em; }
.lex-dist-btn:disabled { opacity: .55; cursor: progress; }
.lex-dist-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
/* La valeur obtenue mérite d'être lue, pas seulement repérée. */
.lex-dist { font-size: 10px; letter-spacing: .12em; background: var(--gold-p); }

/* Distance sur une fiche d'établissement : dernière puce de la ligne de
   liens, donc calquée sur .lc-link — même gabarit, couleur or pour la
   distinguer d'un lien cliquable vers l'extérieur. */
.lc-dist, .lc-dist-btn {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 8px; border-radius: 3px;
  background: var(--gold-p); border: 1px solid var(--gold);
  color: var(--gold); font-size: 10px; white-space: nowrap;
}
.lc-dist-btn {
  cursor: pointer; font-family: inherit;
  transition: background .18s, color .18s;
}
.lc-dist-btn:hover:not(:disabled) { background: var(--gold); color: var(--bg); }
.lc-dist-btn:disabled { opacity: .55; cursor: progress; }
.lc-dist-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ══ DOUBLE-TAP : ZOOM DU NAVIGATEUR SUPPRIMÉ ═══════════
   Sur mobile, deux tapes rapprochées déclenchent le zoom natif du
   navigateur. Sur un bouton, c'est toujours indésirable : on tape deux
   fois parce que la première n'a pas semblé répondre, et la page part
   en zoom au lieu d'agir.

   « manipulation » conserve le défilement et le pincer-zoomer, et ne
   retire QUE le double-tap. C'est aussi ce qui supprime le délai de
   ~300 ms que les navigateurs s'accordaient pour distinguer une tape
   simple d'une double — les boutons répondent donc plus vite.

   Le globe est absent de cette liste : il porte déjà « touch-action:none »
   et gère lui-même ses gestes, double-tape comprise (interactions.js). */
button, a, input, select, textarea, label,
.side-fab, .mnav-tab, .lang-btn, .theme-btn, .lc-link, .tag,
.cg-tab, .brand-card, .lex-zone-item, #zoom-ctrl, #zoom-ctrl * {
  touch-action: manipulation;
}

/* ══ ARTICLE DE MARQUE — UNE SEULE TYPOGRAPHIE ══════════
   L'histoire suit désormais « Profondeur de Gamme » : même corps, même
   interligne, même largeur.

   Elle avait été composée à part — 14,5 px sur une mesure de 34 em
   centrée — au nom de la lecture longue. Vue dans la modale, cette
   colonne étroite était RENTRÉE de part et d'autre par rapport à tout
   ce qui la suit, et sensiblement plus grosse : deux articles empilés
   plutôt qu'un seul. La cohérence de la page l'emporte ici sur le
   confort théorique d'une mesure idéale.

   Le corps reste en --text, plus soutenu que le --text2 des gammes :
   c'est le texte principal de la fiche, pas une légende sous un item. */
.bm-box { width: 680px; }
.bm-hist {
  font-size: 12.5px; line-height: 1.68; color: var(--text);
  max-width: none; margin: 0 0 16px;
  white-space: pre-line;
}
.gam-story { font-size: 12.5px; line-height: 1.68; }

.bm-share {
  position: absolute; top: 12px; right: 46px;
  width: 26px; height: 26px; padding: 0;
  background: var(--bg3); border: none; border-radius: 50%;
  cursor: pointer; font-size: 12px; color: var(--text);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, color .2s;
}
.bm-share:hover { background: var(--gold); color: var(--panel-bg); }
.bm-share.ok    { background: var(--grn); color: #fff; }
.bm-share.wait  { opacity: .5; pointer-events: none; }
.bm-share:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
[dir="rtl"] .bm-share { right: auto; left: 46px; }
[dir="rtl"] .bm-close { right: auto; left: 12px; }

/* « En discuter » : l'ancrage de la fiche sur l'espace communautaire.
   En bas de l'article, parce qu'on en parle une fois qu'on l'a lu. */
.bm-discuter {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 20px; padding: 9px 16px; cursor: pointer;
  background: none; border: 1px solid var(--gold); border-radius: 3px;
  font-family: 'Cinzel', serif; font-size: 9px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
  transition: background .18s, color .18s;
}
.bm-discuter:hover { background: var(--gold); color: var(--panel-bg); }
/* Une fiche qui porte déjà des discussions le dit : le compte s'écrit
   dans le libellé, et le bouton passe du contour au fond doré pâle.
   La classe n'est posée que s'il y a quelque chose derrière — un
   « · 0 » sur quarante cartes annoncerait un désert. */
.bm-discuter.a-des-sujets { background: var(--gold-p); }
.lc-discuter.a-des-sujets { border-color: var(--gold); color: var(--gold); }

/* Le partage est LE MÊME bouton partout : même pastille, même place.
   Un bouton qui change de forme et de position d'un écran à l'autre se
   réapprend à chaque fois.

   La cible tactile, elle, ne se voit pas : une zone sensible de 44 px
   est posée autour de la pastille, qui garde ses 26 px à l'œil. C'est
   le minimum recommandé, et il ne coûte pas un pixel de dessin.
   `top/right/bottom/left` négatifs plutôt que du remplissage : ajouter
   du remplissage aurait déplacé la pastille. */
.bm-share::before {
  content: ''; position: absolute;
  top: -9px; right: -9px; bottom: -9px; left: -9px;
}

/* Sur téléphone, la modale occupe presque tout l'écran : on rend la
   marge à la lecture plutôt que de la gaspiller en gouttières. */
@media (max-width: 640px) {
  .bm-body { padding: 14px 18px 22px; }
}

/* ══ COMMUNAUTÉ — LES DEUX POINTS D'ENTRÉE ══════════════
   Les deux boutons sortaient SANS style : Arial 13 px, bordure « outset »
   grise, le rendu par défaut du navigateur. À côté de « MARCHÉS » et
   « LOUNGES », qui sont des pastilles Cinzel interlettrées, cela se
   voyait immédiatement — un bouton qui ne ressemble pas au site donne
   l'impression d'un module collé après coup. */

/* Dans l'en-tête : même gabarit exact que #mktToggle et #loungeToggle,
   dans l'or du site — c'est son espace à lui, pas une catégorie de
   l'atlas. */
#forumBtn {
  font-family: 'Cinzel', serif; font-size: 7px; letter-spacing: .18em;
  padding: 5px 11px; border-radius: 16px; cursor: pointer;
  text-transform: uppercase; white-space: nowrap; transition: all .2s;
  display: flex; align-items: center; gap: 5px; flex-shrink: 0;
  border: 1px solid rgba(201, 162, 39, .4);
  background: rgba(201, 162, 39, .08);
  color: var(--gold);
}
#forumBtn:hover { background: rgba(201, 162, 39, .2); border-color: rgba(201, 162, 39, .7); }
#forumBtn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Dans le menu mobile : même gabarit que les entrées du compte
   (#mm-account button), qui sont juste en dessous. */
.mm-forum {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left; padding: 9px 10px; margin-bottom: 4px;
  border: 1px solid var(--gold-p); background: var(--gold-p);
  color: var(--text); font-size: 12px; border-radius: 8px; cursor: pointer;
  font-family: Lato, sans-serif;
}
.mm-forum:hover { border-color: var(--gold); }
.mm-forum .mmf-ico { font-size: 14px; line-height: 1; }
[dir="rtl"] .mm-forum { text-align: right; }

/* Une variété DOCUMENTÉE se distingue d'un simple mot : elle s'ouvre.
   Sans ce signal, rien ne dit au visiteur que la moitié des étiquettes
   cache une fiche et l'autre non. */
/* ── Cliquable ou non : la différence doit se voir AU REPOS ──
   Les deux variantes ne différaient que par `cursor:pointer` et un
   effet de survol. Autrement dit : rien pour qui ne promène pas la
   souris dessus — donc rien au premier coup d'œil, rien au clavier,
   rien du tout sur mobile.

   L'étiquette cliquable porte donc trois marques permanentes : un fond
   teinté de sa propre couleur, une bordure pleine, et un chevron. */
.tag-feuille {
  cursor:pointer; transition:background .18s, box-shadow .18s, transform .12s;
  /* Repli AVANT le color-mix : là où il n'est pas connu, la déclaration
     suivante est ignorée et l'étiquette garderait le fond des inertes —
     soit exactement la confusion qu'on corrige. */
  background:var(--bg2);
  background:color-mix(in srgb, currentColor 10%, var(--bg3));
  border-color:currentColor;
  display:inline-flex; align-items:center; gap:5px;
}
.tag-feuille::after {
  content:'›'; font-size:1.5em; line-height:0; opacity:.85;
  transition:transform .18s;
}
[dir="rtl"] .tag-feuille::after { content:'‹'; }
.tag-feuille:hover {
  background:color-mix(in srgb, currentColor 20%, var(--bg3));
  box-shadow:0 2px 8px var(--shd);
}
.tag-feuille:hover::after { transform:translateX(2px); }
[dir="rtl"] .tag-feuille:hover::after { transform:translateX(-2px); }
.tag-feuille:active { transform:translateY(1px); box-shadow:none; }
/* L'élément porte role="button" et tabindex="0" : sans anneau de focus,
   il était atteignable au clavier et invisible une fois atteint. */
.tag-feuille:focus-visible {
  outline:2px solid var(--gold); outline-offset:2px;
}
/* Le suffixe reste secondaire, mais lisible : .55 d'opacité sur 6 px ne
   se lisait pas. */
.tag-feuille em { font-style:normal; opacity:.75; font-size:.88em; letter-spacing:.05em; }

/* La variante NON cliquable est déclarée, pas déduite d'une absence :
   fond plat, bordure discrète, curseur normal. Elle se distingue au
   repos de sa jumelle cliquable. */
.tag-inerte { cursor:default; background:transparent; border-style:dashed; opacity:.8; }

/* ── Illustrations des notes et des accords ────────────────
   Le trait suit `currentColor`, donc la couleur de la pastille, donc
   le thème courant : les six habillages du site sont servis sans une
   règle de plus. Un jeu d'images aurait demandé six jeux.

   `fill:none` et un trait fin : ces glyphes vivent à 13 px au milieu
   d'un texte en petites capitales, pas dans une barre d'outils. */
.tag-ic { width:13px; height:13px; flex-shrink:0; fill:none; stroke:currentColor;
          stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; opacity:.8; }
.tag-illustre { display:inline-flex; align-items:center; gap:5px; }

/* ── Notes et accords commentés ────────────────────────────
   Une pastille nue disait « Terre » à qui ne sait pas ce que ça veut
   dire. L'item porte donc trois choses : l'illustration, le mot, et la
   phrase qui le rend sensible.

   Deux colonnes sur large, une seule sur étroit : au-dessous de ~380 px
   de panneau, deux colonnes couperaient les phrases en confettis. */
.arome-liste { display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; margin-top:2px; }
.arome { border-left:2px solid var(--gold-p); padding:2px 0 2px 9px; }
.arome-tete { display:flex; align-items:center; gap:6px; }
.arome-ic { width:15px; height:15px; flex-shrink:0; fill:none; stroke:currentColor;
            stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; color:var(--gold); }
.arome-nom { font-family:'Cinzel',serif; font-size:8px; letter-spacing:.22em;
             text-transform:uppercase; color:var(--gold); }
/* La glose est de la PROSE : Playfair en italique, comme les notes du
   sommelier ailleurs dans le site — pas du Cinzel, qui sert aux
   étiquettes. */
.arome-dit { font-family:'Playfair Display',serif; font-style:italic; font-size:11px;
             line-height:1.6; color:var(--text2); margin-top:3px; }
/* En arabe, ces trois réglages travaillent contre le texte : Cinzel n'a
   pas de glyphes arabes, `letter-spacing` disjoint des lettres qui
   doivent se lier, et 8 px rend un mot lié illisible là où il suffisait
   à une petite capitale latine. L'étiquette garde son or et son rang,
   elle change seulement de dessin. */
[dir="rtl"] .arome-nom { font-family:inherit; font-size:11px; letter-spacing:0; }
/* Le filet d'or marque le DÉBUT de la carte : à droite quand on lit de
   droite à gauche, sinon il se retrouve du côté où la phrase finit. */
[dir="rtl"] .arome { border-left:none; border-right:2px solid var(--gold-p);
                     padding:2px 9px 2px 0; }
@media (max-width:520px) { .arome-liste { grid-template-columns:1fr; } }

/* ── Lexique du métier ────────────────────────────────────
   Même grammaire visuelle que le glossaire d'arômes (.arome) :
   le mot, puis la phrase qui le rend concret. Deux colonnes sur
   large, une seule dès qu'on manque de place. */
.lex-liste { display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; margin-top:2px; }
.lex        { border-left:2px solid var(--gold-p); padding-left:9px; }
.lex-mot    { font-family:'Cinzel',serif; font-size:10px; letter-spacing:.09em;
              text-transform:uppercase; color:var(--gold); margin-bottom:2px; }
.lex-dit    { font-size:11px; line-height:1.5; color:var(--text2); }
[dir="rtl"] .lex { border-left:0; border-right:2px solid var(--gold-p);
                   padding-left:0; padding-right:9px; }
@media (max-width:520px) { .lex-liste { grid-template-columns:1fr; } }

/* ── Panneau sans selection (panneau-vide.js) ──
   Les onglets Infos / Marques / Lounges se touchent avant d'avoir
   choisi un pays. Sans ce bloc on y trouvait un bandeau gris et une
   page blanche : pas « vide », casse. */
.pv-boite {
  text-align: center; padding: 28px 20px 24px;
  display: flex; flex-direction: column; align-items: center;
}
.pv-ico   { font-size: 30px; opacity: .55; margin-bottom: 10px; }
.pv-titre {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 8px;
}
.pv-txt {
  font-size: 12px; line-height: 1.65; color: var(--text2);
  margin: 0 0 16px; max-width: 30em;
}
.pv-btn {
  font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: .18em;
  text-transform: uppercase; cursor: pointer;
  padding: 9px 20px; border-radius: 4px;
  background: var(--gold); color: #fff; border: 1px solid var(--gold);
}
.pv-btn:hover { filter: brightness(1.08); }

/* Sans pays, le bandeau n'a ni drapeau ni nom a montrer : il se replie.
   La croix de fermeture, elle, reste — c'est la seule sortie du panneau
   pour qui n'a pas compris la barre du bas. */
.est-vide .lex-banner, .est-vide .panel-banner { height: 42px; background: transparent; }
.est-vide .lex-banner canvas,
.est-vide .panel-banner canvas,
.est-vide .lex-banner-ov,
.est-vide .banner-ov,
.est-vide .lex-flag-emoji, .est-vide .banner-flag,
.est-vide .lex-country-name, .est-vide .banner-name,
.est-vide .lex-country-reg,  .est-vide .banner-region { display: none; }