/* ═══════════════════════════════════════════════════════════════════════════
   POKE UI — système de design du POKE TRACKER BORDEAUX
   Repris de la doctrine « Brainrot TCGP » : métaphore d'une TABLE DE JEU,
   pas d'un tableau de bord. Des objets posés, à épaisseur, avec ombre et
   enfoncement, sur un fond bleu-gris très pâle.

   Quatre formes, chacune dit une FONCTION :
     PLAQUE  (diagonale)  ce qui CONTIENT
     PILULE  (r-full)     ce qui se LIT
     DISQUE  (rond)       ce qu'on VISE
     LOSANGE              LE RETOUR, toujours le même

   Aucune valeur brute dans un composant : tout passe par un jeton.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root{
  /* ── Fond : bleu-gris très pâle et froid, jamais blanc, jamais gris neutre */
  --bg:         #E8F1F7;
  --bg-top:     #E4EEF4;
  --bg-mid:     #ECF3F8;
  --bg-low:     #DCE7F1;

  /* Surfaces posées : à peine plus claires que le fond.
     Le contraste est porté par l'OMBRE, pas par la valeur. */
  --surface:    #EEF5F9;
  --surface-hi: #F7FBFD;
  --white:      #FFFFFF;

  /* ── Encre : un bleu-ardoise, jamais du noir */
  --ink:        #2C3A4B;
  --ink-2:      #64748B;
  --ink-3:      #94A3B4;

  /* ── Accent : le cyan des actions */
  --cyan:       #6ACDF8;
  --cyan-hi:    #A5E4FC;
  --cyan-lo:    #3BA9DE;
  --cyan-rim:   #E3FDFE;

  /* Teintes secondaires */
  --teal:       #3EC7D5;
  --amber:      #F5A524;
  --amber-hi:   #FFD166;
  --red:        #FF4133;
  --green:      #4FE99E;
  --green-deep: #21B877;

  /* Identité */
  --accent:     #2E86F0;
  --accent-deep:#0F4FAE;
  --gold:       #FFC53D;
  --gold-hi:    #FFEAA6;
  --pop:        #FF3D9A;
  --pop-hi:     #FF7AC0;
  --violet:     #7C5CFF;
  --lime:       #B6F03C;

  /* États d'ouverture — les quatre couleurs du tracker */
  --st-open:    #35D48C;
  --st-soon:    #FFC53D;
  --st-later:   #FF9838;
  --st-closed:  #FF5B62;
  --st-unknown: #9AAEC2;

  /* ── Le liseré arc-en-ciel : signature, sous chaque titre de page */
  --rainbow: linear-gradient(90deg,
    #3CE5CD 0%, #4FE99E 26%, #9FED4F 52%, #F0ED0A 74%, #FFA83C 90%, #FF6B5C 100%);

  /* ── Verre : la matière des objets d'interface qui comptent */
  --glass-1:     #FFFFFF;
  --glass-2:     #EAF1F9;
  --glass-ink:   #223145;
  --glass-top:   rgba(255,255,255,.95);
  --glass-inner: rgba(44,58,75,.10);
  --glass-cast:  rgba(44,58,75,.20);
  --sticker-ring: rgba(27,36,64,.16);
  --line:        rgba(44,58,75,.10);

  /* ── Texte */
  --font-ui: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-2xs: 10px;  --text-xs: 11px;  --text-sm: 13px;  --text-md: 15px;
  --text-lg: 17px;   --text-xl: 21px;  --text-2xl: 26px; --text-3xl: 34px;
  --tracking-tight: -.02em;
  --tracking-caps:  .08em;

  /* ── Espace */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;

  /* ── Rayons : très généreux, aspect « jouet » */
  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:28px; --r-2xl:36px; --r-full:999px;

  /* La silhouette diagonale : haut-gauche et bas-droite s'ouvrent,
     les deux autres restent vifs. La forme a un sens de lecture. */
  --edge-soft:22px; --edge-sharp:4px;
  --edge-soft-s:14px; --edge-sharp-s:3px;

  /* Liseré intérieur écarté : un filet posé à quelques pixels du bord.
     C'est ce couloir qui fait l'enluminure. */
  --inlay:6px; --inlay-thin:2px;

  /* ── Ombres : douces et BLEUTÉES, jamais noires */
  --sh-1: 0 1px 2px rgba(44,58,75,.06), 0 2px 8px rgba(44,58,75,.06);
  --sh-2: 0 2px 4px rgba(44,58,75,.07), 0 6px 18px rgba(44,58,75,.10);
  --sh-3: 0 6px 14px rgba(44,58,75,.10), 0 16px 40px rgba(44,58,75,.14);
  --rim: 3px;   /* liseré blanc épais sur tout ce qui saille */

  /* ── Temps */
  --dur-tap:90ms; --dur-fast:150ms; --dur-base:230ms;
  --ease-out:    cubic-bezier(.22,.90,.30,1);
  --ease-spring: cubic-bezier(.30,1.50,.45,1);

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --tap-min: 44px;
  --tabbar-h: 62px;

  color-scheme: light;
}

/* ═══ SOCLE ═══════════════════════════════════════════════════════════════ */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body.pk{
  margin:0;
  background:linear-gradient(180deg,var(--bg-top) 0%,var(--bg-mid) 26%,var(--bg) 62%,var(--bg-low) 100%) fixed;
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:var(--text-md);
  font-weight:500;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
  font-variant-numeric:tabular-nums;
}
button{font:inherit;touch-action:manipulation;border:0;cursor:pointer}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--cyan-lo);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ═══ RÔLES TYPOGRAPHIQUES ════════════════════════════════════════════════ */
.t-display{font-size:var(--text-3xl);font-weight:700;letter-spacing:var(--tracking-tight);line-height:1.1}
.t-title  {font-size:var(--text-2xl);font-weight:700;letter-spacing:var(--tracking-tight);line-height:1.15}
.t-heading{font-size:var(--text-lg);font-weight:600;line-height:1.25}
.t-num    {font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.t-body   {font-size:var(--text-md);font-weight:500}
.t-caption{font-size:var(--text-sm);font-weight:500;color:var(--ink-2)}
.t-overline{font-size:var(--text-2xs);font-weight:700;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--ink-3)}
.t-dim    {color:var(--ink-3)}

/* ═══ LA RÉPONSE AU DOIGT ═════════════════════════════════════════════════
   L'objet s'enfonce vite puis revient en ressort avec un léger dépassement.
   Le dépassement à 1.50 est essentiel : sans lui l'objet paraît mou. */
.press{transition:transform 220ms var(--ease-spring)}
.press:active{transform:scale(.95);transition-duration:70ms}

/* ═══ PLAQUE — ce qui CONTIENT ════════════════════════════════════════════ */
.plaque{
  position:relative;
  background:var(--surface-hi);
  border-radius:var(--edge-soft) var(--edge-sharp);
  box-shadow:0 0 0 2.5px var(--white), 0 0 0 3.5px var(--sticker-ring), var(--sh-2);
  padding:var(--sp-4) var(--sp-5);
}
.plaque--s{border-radius:var(--edge-soft-s) var(--edge-sharp-s);padding:var(--sp-3) var(--sp-4)}
.plaque--flat{box-shadow:0 0 0 1.5px rgba(44,58,75,.06), var(--sh-1)}
/* L'enluminure : un filet posé à quelques pixels du bord */
.plaque--inlay::before{
  content:"";position:absolute;inset:var(--inlay);
  border:var(--inlay-thin) solid rgba(255,255,255,.75);
  border-radius:calc(var(--edge-soft) - var(--inlay)) calc(var(--edge-sharp) - 1px);
  pointer-events:none;
}
.plaque--accent{
  background:linear-gradient(165deg,var(--cyan-hi) 0%,var(--cyan) 52%,var(--cyan-lo) 100%);
  color:#fff;
  box-shadow:0 0 0 var(--rim) var(--white), var(--sh-2);
}
.plaque--sunken{
  background:var(--bg-mid);
  box-shadow:inset 0 2px 6px rgba(44,58,75,.10), inset 0 0 0 1px var(--line);
}

/* ═══ PILULE — ce qui se LIT ══════════════════════════════════════════════ */
.pill{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:32px;padding-inline:14px;border-radius:var(--r-full);
  background:var(--white);color:var(--ink-2);
  font-size:var(--text-sm);font-weight:600;white-space:nowrap;
  box-shadow:0 0 0 1.5px rgba(44,58,75,.06), var(--sh-1);
}
.pill--xs{min-height:24px;padding-inline:10px;font-size:var(--text-xs);font-weight:700}
.pill--lg{min-height:44px;padding-inline:var(--sp-6);font-size:var(--text-md)}
.pill--ink{background:rgba(44,58,75,.72);color:#fff;box-shadow:none}
.pill--open   {background:linear-gradient(180deg,#6CE8B0,var(--st-open));   color:#fff;box-shadow:0 0 0 2px var(--white), var(--sh-1);text-shadow:0 1px 1px rgba(20,90,60,.3)}
.pill--soon   {background:linear-gradient(180deg,var(--gold-hi),var(--st-soon));color:#5B4405;box-shadow:0 0 0 2px var(--white), var(--sh-1)}
.pill--later  {background:linear-gradient(180deg,#FFBE7E,var(--st-later));  color:#fff;box-shadow:0 0 0 2px var(--white), var(--sh-1)}
.pill--closed {background:linear-gradient(180deg,#FF8A8F,var(--st-closed)); color:#fff;box-shadow:0 0 0 2px var(--white), var(--sh-1)}
.pill--unknown{background:var(--surface);color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--line)}
.pill--cyan{
  background:linear-gradient(180deg,#A8E3FC 0%,var(--cyan) 46%,#4FBBEE 100%);
  color:#fff;text-shadow:0 1px 2px rgba(20,80,120,.35);
  box-shadow:0 0 0 var(--rim) var(--white), inset 0 1.5px 0 rgba(255,255,255,.75), var(--sh-2);
}
.pill--pop{background:linear-gradient(180deg,var(--pop-hi),var(--pop));color:#fff;
  box-shadow:0 0 0 2px var(--white), var(--sh-1);text-shadow:0 1px 1px rgba(120,10,60,.3)}

/* ═══ BOUTON D'ACTION ═════════════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:var(--tap-min);padding-inline:var(--sp-6);border-radius:var(--r-full);
  font-family:var(--font-ui);font-size:var(--text-md);font-weight:600;
  background:var(--white);color:var(--ink-2);text-decoration:none;
  box-shadow:0 0 0 1.5px rgba(44,58,75,.06), var(--sh-1);
  transition:transform var(--dur-tap) var(--ease-out), filter var(--dur-fast) var(--ease-out);
}
.btn:active{transform:scale(.97)}
.btn--cyan{
  background:linear-gradient(180deg,#A8E3FC 0%,var(--cyan) 46%,#4FBBEE 100%);
  color:#fff;text-shadow:0 1px 2px rgba(20,80,120,.35);
  box-shadow:0 0 0 var(--rim) var(--white), inset 0 1.5px 0 rgba(255,255,255,.75), var(--sh-2);
}
.btn--accent{
  background:linear-gradient(180deg,#5FA8F6 0%,var(--accent) 52%,var(--accent-deep) 100%);
  color:#fff;text-shadow:0 1px 2px rgba(10,40,90,.4);
  box-shadow:0 0 0 var(--rim) var(--white), inset 0 1.5px 0 rgba(255,255,255,.55), var(--sh-2);
}
.btn--pop{
  background:linear-gradient(180deg,var(--pop-hi),var(--pop));color:#fff;
  box-shadow:0 0 0 var(--rim) var(--white), var(--sh-2);text-shadow:0 1px 2px rgba(120,10,60,.35);
}
.btn--ghost{background:transparent;color:var(--ink-2);box-shadow:none;font-size:var(--text-sm)}
.btn--block{width:100%}
.btn--sm{min-height:36px;padding-inline:var(--sp-4);font-size:var(--text-sm)}
.btn:disabled{filter:grayscale(.5) opacity(.55);cursor:not-allowed}
.btn:disabled:active{transform:none}
.btn svg{width:18px;height:18px;flex:none;stroke-width:2.2}

/* Le bouton qui respire : il vit tant qu'on ne l'a pas touché */
.btn--live{position:relative;overflow:hidden;animation:pk-breathe 2.6s ease-in-out infinite}
.btn--live > *{position:relative;z-index:1}
.btn--live::after{
  content:"";position:absolute;top:-60%;bottom:-60%;left:-40%;width:60%;
  background:linear-gradient(105deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 70%);
  transform:translateX(-120%) skewX(-12deg);
  animation:pk-sheen 2.6s ease-in-out infinite;pointer-events:none;
}
.btn--live:active{animation-play-state:paused;transform:scale(.94)}
@keyframes pk-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes pk-sheen{0%,48%{transform:translateX(-120%) skewX(-12deg)}82%,100%{transform:translateX(340%) skewX(-12deg)}}

/* ═══ DISQUE — ce qu'on VISE ══════════════════════════════════════════════ */
.disc{
  display:grid;place-items:center;
  width:44px;height:44px;border-radius:50%;
  background:var(--white);color:var(--ink-2);
  box-shadow:0 3px 10px var(--glass-cast), 0 1px 2px var(--glass-cast);
  transition:transform 200ms var(--ease-spring);position:relative;
}
.disc:active{transform:scale(.9);transition-duration:70ms}
.disc--lg{width:56px;height:56px}
.disc--sm{width:38px;height:38px}
.disc--cyan{
  background:linear-gradient(180deg,#A8E3FC,var(--cyan) 50%,#4FBBEE);color:#fff;
  box-shadow:0 0 0 var(--rim) var(--white), var(--sh-2);
}
.disc svg{width:20px;height:20px;stroke-width:2.2}
.disc--lg svg{width:24px;height:24px}
.disc--sm svg{width:17px;height:17px}

/* Pastille de notification */
.dot{
  position:absolute;top:-3px;right:-3px;min-width:19px;height:19px;padding:0 5px;
  display:grid;place-items:center;border-radius:var(--r-full);
  background:linear-gradient(180deg,var(--pop-hi),var(--pop));color:#fff;
  font-size:var(--text-xs);font-weight:700;
  box-shadow:0 0 0 2.5px var(--white), 0 2px 6px rgba(255,61,154,.45);
}
.dot--plain{min-width:11px;height:11px;padding:0}

/* ═══ LOSANGE — LE RETOUR, partout le même ════════════════════════════════ */
.backdiamond{
  position:relative;display:grid;place-items:center;
  width:56px;height:56px;flex-shrink:0;background:none;overflow:visible;
}
.backdiamond::before{
  content:"";position:absolute;inset:6px;transform:rotate(45deg);
  background:var(--white);
  box-shadow:0 3px 10px var(--glass-cast), 0 1px 2px var(--glass-cast);
  z-index:0;transition:transform 200ms var(--ease-spring);
}
.backdiamond > *{position:relative;z-index:1;color:var(--ink)}
.backdiamond:active::before{transform:rotate(45deg) scale(.9);transition-duration:70ms}
.backdiamond::after{
  content:"";position:absolute;inset:-6px;transform:rotate(45deg) scale(.94);
  border:4px solid var(--white);filter:drop-shadow(0 2px 5px var(--glass-cast));
  opacity:0;pointer-events:none;z-index:2;
}
.backdiamond[data-pulse]::after{animation:pk-oback 900ms cubic-bezier(.2,.75,.3,1) both}
@keyframes pk-oback{
  0%{opacity:0;transform:rotate(45deg) scale(.94)}
  12%{opacity:1}
  76%{opacity:.92;transform:rotate(45deg) scale(1.72)}
  100%{opacity:0;transform:rotate(45deg) scale(2.02)}
}
.backbar{display:flex;justify-content:center;padding:10px 0 calc(var(--safe-bottom) + 12px)}

/* ═══ LISERÉ ARC-EN-CIEL ══════════════════════════════════════════════════ */
.rainbow{position:absolute;left:0;right:0;bottom:0;height:2.5px;background:var(--rainbow)}
.page-title{position:relative;padding:34px var(--sp-4) var(--sp-3);text-align:center}
.page-title h1{margin:0;font-size:var(--text-2xl);font-weight:700;letter-spacing:var(--tracking-tight)}

/* ═══ CHIP — filtre ═══════════════════════════════════════════════════════ */
.chip{
  display:grid;place-items:center;min-width:42px;height:34px;padding:0 13px;flex:0 0 auto;
  border-radius:var(--r-full);background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line);
  color:var(--ink-2);font-size:12px;font-weight:700;letter-spacing:-.02em;
  white-space:nowrap;
  transition:background 150ms linear,color 150ms linear,transform 160ms var(--ease-spring);
}
.chip:active{transform:scale(.92)}
.chip.is-on{
  background:linear-gradient(180deg,#A8E3FC,var(--cyan) 52%,#4FBBEE);color:#fff;
  box-shadow:0 0 0 2px var(--white), var(--sh-1);text-shadow:0 1px 1px rgba(20,80,120,.3);
}

/* ═══ SEGMENTS ════════════════════════════════════════════════════════════ */
.seg{
  display:inline-flex;padding:3px;border-radius:var(--r-full);
  background:var(--bg-mid);box-shadow:inset 0 1px 3px rgba(44,58,75,.10), inset 0 0 0 1px var(--line);
  gap:2px;
}
.seg button{
  background:transparent;border-radius:var(--r-full);
  font-size:12px;font-weight:700;color:var(--ink-3);padding:7px 14px;white-space:nowrap;
  transition:all 160ms var(--ease-out);
}
.seg button.is-on{background:var(--white);color:var(--ink);box-shadow:var(--sh-1)}

/* ═══ CHAMP ═══════════════════════════════════════════════════════════════ */
.field{position:relative;display:flex;align-items:center}
.field svg{position:absolute;left:15px;width:18px;height:18px;color:var(--ink-3);pointer-events:none;stroke-width:2.2}
.input{
  width:100%;font-family:var(--font-ui);font-size:var(--text-md);font-weight:500;color:var(--ink);
  padding:12px 16px 12px 44px;border-radius:var(--r-full);border:0;background:var(--white);
  box-shadow:inset 0 0 0 1px var(--line), var(--sh-1);
}
.input::placeholder{color:var(--ink-3);font-weight:500}

/* ═══ BARRE DE PROGRESSION ════════════════════════════════════════════════ */
.bar{height:10px;border-radius:var(--r-full);background:var(--bg-mid);
  box-shadow:inset 0 1px 3px rgba(44,58,75,.12);overflow:hidden}
.bar > i{display:block;height:100%;border-radius:var(--r-full);
  background:linear-gradient(90deg,var(--cyan),#7FF0D8);transition:width .4s var(--ease-out)}

/* ═══ SABLIER ═════════════════════════════════════════════════════════════ */
.glass{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px 3px 6px;border-radius:var(--r-full);
  background:var(--white);box-shadow:0 0 0 1.5px rgba(44,58,75,.05), var(--sh-1);
  font-size:var(--text-xs);font-weight:700;color:var(--ink-2);white-space:nowrap;
}
.glass svg{width:14px;height:17px;flex:none}
.glass--open  .sand{fill:var(--st-open)}
.glass--soon  .sand{fill:var(--st-soon)}
.glass--later .sand{fill:var(--st-later)}
.glass--close .sand{fill:var(--st-closed)}
.glass--open{color:var(--green-deep)}
.glass--soon{color:#A5760A}
.glass--later{color:#C4590A}
.glass--close{color:#D6373F}
@keyframes pk-flip{0%,86%{transform:rotate(0)}93%,100%{transform:rotate(180deg)}}
.glass--close svg{animation:pk-flip 3.4s infinite ease-in-out}

/* ═══ LIGNE D'INFORMATION ═════════════════════════════════════════════════ */
.row{display:flex;align-items:flex-start;gap:var(--sp-3);padding:12px 0;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:none}
.row-ico{
  display:grid;place-items:center;width:34px;height:34px;flex:none;
  border-radius:var(--edge-soft-s) var(--edge-sharp-s);
  background:var(--white);box-shadow:0 0 0 1.5px rgba(44,58,75,.05), var(--sh-1);
  color:var(--ink-2);
}
.row-ico svg{width:17px;height:17px;stroke-width:2.2}
.row-main{flex:1;min-width:0}
.row-label{display:block;font-size:var(--text-2xs);font-weight:700;letter-spacing:var(--tracking-caps);
  text-transform:uppercase;color:var(--ink-3);margin-bottom:2px}
.row-value{display:block;font-weight:600;color:var(--ink);line-height:1.35;word-break:break-word}

/* ═══ LIGNE DE MAGASIN ════════════════════════════════════════════════════ */
.shop{
  display:flex;align-items:center;gap:var(--sp-3);width:100%;text-align:left;
  padding:10px 12px;background:var(--surface-hi);
  border-radius:var(--edge-soft-s) var(--edge-sharp-s);
  box-shadow:0 0 0 2px var(--white), 0 0 0 3px var(--sticker-ring), var(--sh-1);
  font-family:var(--font-ui);
  transition:transform 220ms var(--ease-spring);
}
.shop:active{transform:scale(.96);transition-duration:70ms}
.shop.is-on{box-shadow:0 0 0 2px var(--white), 0 0 0 3.5px var(--cyan), var(--sh-2)}
.shop-badge{
  --c:var(--st-open);
  position:relative;display:grid;place-items:center;width:40px;height:40px;flex:none;
  border-radius:50%;color:#fff;
  background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.55) 0%, transparent 56%), var(--c);
  box-shadow:0 0 0 2.5px var(--white), 0 2px 7px var(--glass-cast);
}
.shop-badge svg{width:19px;height:19px;stroke-width:2.2}
.shop-body{flex:1;min-width:0;overflow:hidden}
.shop-name{display:block;font-size:14px;font-weight:700;color:var(--ink);line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shop-meta{display:block;font-size:12px;font-weight:500;color:var(--ink-2);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shop-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none;max-width:42%}
.shop-dist{font-size:12.5px;font-weight:700;color:var(--accent);letter-spacing:-.03em}

/* ═══ MARQUEUR DE CARTE ═══════════════════════════════════════════════════ */
.marker{
  --c:var(--st-open);
  position:relative;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  color:#fff;
  background:radial-gradient(circle at 34% 26%, rgba(255,255,255,.6) 0%, transparent 56%), var(--c);
  box-shadow:0 0 0 2.5px var(--white), 0 3px 9px rgba(30,55,90,.34);
  transition:transform 200ms var(--ease-spring);
}
.marker svg{width:17px;height:17px;stroke-width:2.3}
.marker::after{content:"";position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--white)}
.marker--top{width:42px;height:42px;box-shadow:0 0 0 3px var(--white), 0 4px 12px rgba(30,55,90,.4)}
.marker--top svg{width:21px;height:21px}
.marker--top::after{bottom:-7px;border-width:6px}
.marker.is-on{transform:scale(1.2)}
.marker-glass{
  position:absolute;top:-6px;right:-8px;display:grid;place-items:center;
  width:19px;height:19px;border-radius:50%;background:var(--white);
  box-shadow:0 2px 5px var(--glass-cast);
}
.marker-glass svg{width:10px;height:12px}
.me{position:relative;width:22px;height:22px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 3.5px var(--white), 0 0 0 9px rgba(46,134,240,.22)}
@keyframes pk-ping{0%{transform:scale(.7);opacity:.8}70%{transform:scale(2.6);opacity:0}100%{opacity:0}}
.me::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:rgba(46,134,240,.5);animation:pk-ping 2.4s infinite ease-out}

/* ═══ FEUILLE DU BAS ══════════════════════════════════════════════════════ */
.veil{
  position:fixed;inset:0;z-index:950;background:rgba(38,50,66,.42);
  backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity 260ms var(--ease-out);
}
.veil.is-on{opacity:1;pointer-events:auto}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:960;
  max-height:88vh;overflow:hidden auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  background:linear-gradient(180deg,var(--surface-hi) 0%, var(--bg-mid) 40%, var(--bg) 100%);
  border-radius:26px 26px 0 0;
  box-shadow:0 -10px 34px rgba(44,58,75,.22), 0 0 0 1px rgba(255,255,255,.7);
  transform:translateY(102%);transition:transform 340ms cubic-bezier(.22,1,.3,1);
  padding:8px var(--sp-4) calc(var(--sp-6) + var(--safe-bottom));
}
.sheet.is-on{transform:translateY(0)}
.sheet-grab{width:44px;height:5px;border-radius:var(--r-full);background:rgba(44,58,75,.18);margin:6px auto 12px}
@media (min-width:760px){
  .sheet{left:auto;right:18px;bottom:18px;width:430px;max-height:calc(100vh - 36px);
    border-radius:26px;transform:translateY(0) translateX(122%)}
  .sheet.is-on{transform:translateX(0)}
}

/* ═══ BARRE D'ONGLETS ═════════════════════════════════════════════════════ */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:900;
  display:grid;grid-template-columns:repeat(var(--tabs,5),minmax(0,1fr));
  height:calc(var(--tabbar-h) + max(0px,var(--safe-bottom)));
  padding-bottom:max(0px,var(--safe-bottom));
  background:var(--bg);box-shadow:0 -1px 0 rgba(44,58,75,.06), 0 -6px 18px rgba(44,58,75,.06);
}
.tabb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  text-decoration:none;color:var(--ink-3);font-size:var(--text-2xs);font-weight:600;position:relative}
.tabb svg{width:24px;height:24px;stroke-width:2}
.tabb.is-on{color:var(--ink)}
.tabb.is-on svg{stroke-width:2.6}

/* ═══ BARRE DE DÉFILEMENT ═════════════════════════════════════════════════
   Discrète au repos, visible pendant le geste. Jamais la barre système. */
.scroll{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
  scrollbar-color:rgba(44,58,75,.22) transparent}
.scroll::-webkit-scrollbar{width:8px;height:8px}
.scroll::-webkit-scrollbar-track{background:transparent}
.scroll::-webkit-scrollbar-thumb{
  background:rgba(44,58,75,.20);border-radius:var(--r-full);
  border:2px solid transparent;background-clip:content-box;
}
.scroll::-webkit-scrollbar-thumb:hover{background:rgba(44,58,75,.34);background-clip:content-box}

/* Le socle flottant : retour en haut, sticky, ne pousse rien */
.cfloat{position:sticky;bottom:0;z-index:5;height:0;pointer-events:none}
.cfloat > *{pointer-events:auto}
.cfloat-top{
  position:absolute;right:var(--sp-3);bottom:calc(var(--safe-bottom) + 14px);
  width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
  background:var(--white);color:var(--ink-2);box-shadow:0 3px 10px var(--glass-cast);
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity 220ms var(--ease-out), transform 220ms var(--ease-spring);
}
.cfloat-top.is-on{opacity:1;transform:translateY(0);pointer-events:auto}
.cfloat-top:active{transform:scale(.9)}

/* ═══ UTILITAIRES ═════════════════════════════════════════════════════════ */
.stack{display:flex;flex-direction:column;gap:var(--sp-2)}
.stack--lg{gap:var(--sp-4)}
.inline{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.between{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.wrap{padding:var(--sp-4);max-width:520px;margin:0 auto}
.scroll-x{display:flex;gap:7px;overflow-x:auto;padding-bottom:3px;scrollbar-width:none}
.scroll-x::-webkit-scrollbar{display:none}
.hide{display:none!important}
.tag-new{display:inline-block;padding:3px 10px;border-radius:var(--r-full);
  background:linear-gradient(180deg,var(--pop-hi),var(--pop));color:#fff;
  font-size:var(--text-2xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  box-shadow:0 0 0 2px var(--white), 0 2px 6px rgba(255,61,154,.4)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:0s!important}
}


/* ═══ MARQUES D'ENSEIGNE ══════════════════════════════════════════════════ */
.brandmark{width:100%;height:100%;display:block}
.shop-badge.has-brand{
  background:var(--brand-bg,#fff);
  box-shadow:0 0 0 2.5px var(--white), 0 0 0 3.5px var(--c), 0 2px 7px var(--glass-cast);
  padding:5px;
}
.shop-badge.has-brand .brandmark{width:100%;height:100%}
.marker.has-brand{
  background:var(--brand-bg,#fff);
  box-shadow:0 0 0 2.5px var(--white), 0 0 0 3.5px var(--c), 0 3px 9px rgba(30,55,90,.34);
  padding:4px;
}
.marker--top.has-brand{box-shadow:0 0 0 3px var(--white), 0 0 0 4px var(--c), 0 4px 12px rgba(30,55,90,.4);padding:5px}

/* ═══ BARRE D'ACTIONS DE LA FICHE ═════════════════════════════════════════ */
.acts3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 var(--sp-3)}
.acts3 .btn{padding-inline:6px;font-size:13px;min-height:46px;flex-direction:column;gap:3px}
.acts3 .btn svg{width:19px;height:19px}
.acts3 .btn span{font-size:11px;font-weight:700}

/* ═══ TOURNÉE ═════════════════════════════════════════════════════════════ */
.route-fab{position:relative}
.route-badge{
  position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;
  display:grid;place-items:center;border-radius:var(--r-full);
  background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:#5B4405;
  font-size:11px;font-weight:700;box-shadow:0 0 0 2.5px var(--white)
}
.route-item{display:flex;align-items:center;gap:10px;padding:9px 11px;background:var(--surface-hi);
  border-radius:var(--edge-soft-s) var(--edge-sharp-s);
  box-shadow:0 0 0 2px var(--white), 0 0 0 3px var(--sticker-ring), var(--sh-1)}
.route-n{display:grid;place-items:center;width:26px;height:26px;flex:none;border-radius:50%;
  background:var(--ink);color:#fff;font-size:12px;font-weight:700}
.route-body{flex:1;min-width:0}
.route-name{display:block;font-size:13.5px;font-weight:700;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.route-meta{display:block;font-size:11.5px;font-weight:500;color:var(--ink-2);margin-top:1px}
.route-x{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--white);color:var(--ink-3);box-shadow:var(--sh-1)}
.route-line{stroke:var(--accent);stroke-width:4;stroke-dasharray:1 9;stroke-linecap:round;fill:none;opacity:.75}

/* ═══ ÉTIQUETTE DE PRIX SUR LA FICHE ══════════════════════════════════════ */
.pricetag{display:inline-flex;align-items:baseline;gap:4px;padding:5px 12px;border-radius:var(--r-full);
  background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:#5B4405;
  font-weight:700;box-shadow:0 0 0 2px var(--white), var(--sh-1)}
.pricetag b{font-size:16px}
.pricetag span{font-size:11px;opacity:.8}

/* ═══ PRODUITS ════════════════════════════════════════════════════════════ */
.prod{display:flex;gap:11px;align-items:center;padding:9px;background:var(--surface-hi);
  border-radius:var(--edge-soft-s) var(--edge-sharp-s);
  box-shadow:0 0 0 2px var(--white), 0 0 0 3px var(--sticker-ring), var(--sh-1)}
.prod-img{width:52px;height:52px;flex:none;border-radius:var(--r-sm);object-fit:contain;
  background:var(--white);box-shadow:inset 0 0 0 1px var(--line)}
.prod-body{flex:1;min-width:0}
.prod-n{display:block;font-size:13px;font-weight:700;color:var(--ink);line-height:1.25}
.prod-p{display:block;font-size:12px;font-weight:700;color:var(--green-deep);margin-top:2px}
.prod-d{display:block;font-size:11px;font-weight:500;color:var(--ink-3)}

/* ═══ RUBAN D'ALERTE ══════════════════════════════════════════════════════ */
.ribbon{
  display:flex;align-items:center;gap:9px;padding:10px 13px;border-radius:var(--edge-soft-s) var(--edge-sharp-s);
  background:linear-gradient(135deg,var(--ink),#3D4E63);color:#fff;
  box-shadow:0 0 0 2px var(--white), var(--sh-2);font-size:var(--text-sm);font-weight:600;
}
.ribbon b{color:var(--gold-hi)}
.ribbon svg{width:20px;height:20px;flex:none;stroke-width:2.2}