/* ==========================================================================
   CHASSE EN VILLE — carte, liste des cadeaux, espace client
   Même direction : fond uni, angles droits, aucun dégradé.
   ========================================================================== */

.screen--flat { padding: 0 !important; overflow: hidden !important; }   /* la carte ne défile jamais : rien ne peut la pousser hors champ */

/* ---------- Carte ---------- */
#map, #radar {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; height: 100%; background: #12141a;
}
#radar[hidden] { display: none; }
.maplibregl-map { font-family: inherit; }
.maplibregl-ctrl-attrib { background: rgba(0,0,0,.55) !important; }
.maplibregl-ctrl-attrib a { color: #bbb !important; }
/* La carte passe en mode nuit : on inverse les tuiles claires
   d'OpenStreetMap puis on remet les teintes à l'endroit. C'est le procédé
   habituel pour obtenir un fond sombre sans changer de fournisseur. */
#map canvas {
  filter: invert(1) hue-rotate(180deg) saturate(.55) brightness(.82) contrast(1.12);
}
#map::after{                       /* voile de la couleur du restaurant */
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:radial-gradient(120% 90% at 50% 100%,
             color-mix(in srgb, var(--primary) 14%, transparent), transparent 62%);
  mix-blend-mode:screen;
}

.map-top {
  position: absolute; z-index: 500; display: flex; gap: 8px; align-items: center;
  top: max(14px, env(safe-area-inset-top)); left: 14px; right: 14px;
}
.pill--btn { pointer-events: auto; cursor: pointer; font-size: 1.05rem; color: #fff; }
#gps-pill { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; padding-left: 10px; padding-right: 10px; pointer-events: auto; cursor: pointer; }

/* ---------- Le joueur sur la carte ---------- */
.me-avatar { position: relative; width: 72px; height: 96px; pointer-events: none; }

/* ---------- Cadeaux posés dans la ville ---------- */
.gift-pin3d { position: relative; width: 42px; height: 66px; cursor: pointer; }
.gift-pin3d .cube {
  position: absolute; left: 50%; top: 0; width: 30px; height: 30px; margin-left: -15px;
  background:
    linear-gradient(90deg, transparent 0 40%, #fff 40% 60%, transparent 60% 100%),
    linear-gradient(0deg,  transparent 0 40%, #fff 40% 60%, transparent 60% 100%),
    var(--primary);
  border: 2px solid rgba(0,0,0,.45);
  animation: hover 2.6s ease-in-out infinite;
}
.gift-pin3d .beam {
  position: absolute; left: 50%; top: 26px; width: 16px; margin-left: -8px; height: 30px;
  background: linear-gradient(rgba(242,106,27,.55), rgba(242,106,27,0));
}
.gift-pin3d .shadow {
  position: absolute; left: 50%; bottom: 0; width: 26px; height: 9px; margin-left: -13px;
  background: rgba(0,0,0,.28); border-radius: 50%;
}
.gift-pin3d.near .cube { background:
    linear-gradient(90deg, transparent 0 40%, #fff 40% 60%, transparent 60% 100%),
    linear-gradient(0deg,  transparent 0 40%, #fff 40% 60%, transparent 60% 100%),
    #22c55e; }
.gift-pin3d.near .beam { background: linear-gradient(rgba(34,197,94,.6), rgba(34,197,94,0)); }
@keyframes hover { 0%,100% { transform: translateY(-3px) rotate(-4deg); }
                   50%     { transform: translateY(3px)  rotate(4deg); } }

/* ---------- Studio du personnage ---------- */
.avatar-studio { display: flex; gap: 14px; align-items: center; }
.avatar-preview {
  width: 110px; height: 130px; flex: 0 0 110px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16);
}
.avatar-choices { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.chooser { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.chooser .av {
  padding: 9px 6px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.2);
  color: #fff; font-family: inherit; font-size: .78rem; font-weight: 700; cursor: pointer;
}
.chooser .av.is-on { border-color: var(--primary); background: rgba(226,178,74,.22); }
.chooser.tones { display: flex; gap: 6px; }
.chooser.tones .to { width: 30px; height: 30px; border: 2px solid transparent; cursor: pointer; }
.chooser.tones .to.is-on { border-color: #fff; }
.color-pick { display: flex; gap: 6px; flex-wrap: wrap; }
.color-pick .co { width: 26px; height: 26px; border: 2px solid transparent; cursor: pointer; }
.color-pick .co.is-on { border-color: #fff; }
@media (max-width: 380px) { .avatar-studio { flex-direction: column; align-items: flex-start; } }

.acc-head { display: flex; align-items: center; gap: 14px; margin: 6px 0 16px; }
.acc-avatar {
  width: 70px; height: 84px; flex: 0 0 70px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16);
}
.link-btn {
  background: none; border: 0; color: var(--primary); font-family: inherit; font-size: .86rem;
  font-weight: 700; cursor: pointer; padding: 4px 0; text-decoration: underline;
}

/* ---------- Panneau bas ----------
   Trois étages : la poignée, la tête (qui ne bouge pas), puis le corps qui
   défile. Le corps prend toute la place restante et lui seul défile : c'est
   ce qui permet de descendre la liste même quand les lots occupent le haut. */
.sheet {
  position: absolute; z-index: 500; left: 0; right: 0; bottom: var(--tabs-total);
  height: auto; max-height: 36%;       /* court quand la liste est courte — en % de l'écran réel,
                                          pas en vh : sur iPhone, vh ignore les barres de Safari
                                          et le panneau débordait par le haut, poignée invisible */
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg); border-top: 1px solid rgba(255,255,255,.18);
  padding: 0 14px 10px;                /* la barre d'onglets porte déjà la zone d'accueil de l'iPhone */
  transition: height .28s cubic-bezier(.16,1,.3,1), max-height .28s cubic-bezier(.16,1,.3,1);
}
.sheet.est-grand { height: calc(76% - 44px); max-height: calc(76% - 44px); }   /* 44px : la poignée reste sous les pastilles du haut */
.sheet.se-tire   { transition: none; }   /* pendant qu'on tire, on suit le doigt */

.sheet-prise {
  flex: 0 0 auto; display: block; width: 100%; padding: 12px 0 10px;   /* une zone de prise plus haute pour le pouce */
  background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
  touch-action: none;                    /* ici seulement : la poignée gère son geste */
}
.sheet-grip {
  display: block; width: 42px; height: 4px; border-radius: 999px; margin: 0 auto;
  background: rgba(255,255,255,.28);
  transition: width .22s ease, background .22s ease;
}
.sheet-prise:active .sheet-grip { width: 58px; background: rgba(255,255,255,.5); }

.sheet-head {
  flex: 0 0 auto;
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  margin-bottom: 8px; touch-action: none; cursor: pointer; user-select: none; -webkit-user-select: none;
}
.sheet-head b { font-size: .98rem; cursor: pointer; }
.sheet-chev { display: inline-block; width: 22px; height: 22px; border-radius: 7px; margin-right: 8px; vertical-align: -3px;
  text-align: center; line-height: 24px; font-size: 1rem; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  color: var(--primary); transition: transform .28s ease; }
.sheet.est-grand .sheet-chev { transform: rotate(180deg); }   /* ouvert : la flèche pointe vers le bas = « replier » */

.sheet-corps {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; touch-action: pan-y;
  scrollbar-width: none;
  padding-bottom: 6px;
}
.sheet-corps::-webkit-scrollbar { width: 0; height: 0 }

/* « il en reste en dessous » : sans repère, on ne pense pas à faire défiler.
   Le dégradé sert de seconde indication : la fiche coupée s'efface au lieu
   d'être tranchée net. Les deux disparaissent ensemble, arrivés en bas. */
.sheet-plus {
  flex: 0 0 auto; position: relative; z-index: 2;
  text-align: center; font-size: .72rem; letter-spacing: .04em;
  color: rgba(255,255,255,.45); pointer-events: none;
  margin: -26px -14px 0; padding: 26px 14px 1px;
  background: linear-gradient(180deg, rgba(10,12,18,0), #0A0C12 62%);
}
.sheet-plus[hidden] { display: none }
.sheet-plus b { color: var(--primary) }

.gift-list { display: flex; flex-direction: column; gap: 8px; padding-bottom: 6px; }

.gift-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16);
  color: #fff; font-family: inherit; cursor: pointer;
}
.gift-row .ico { font-size: 22px; }
.gift-row .txt { flex: 1; min-width: 0; }
.gift-row .txt b { display: block; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gift-row .txt small { color: rgba(255,255,255,.55); font-size: .8rem; }
.gift-row .dist { font-weight: 800; font-size: 1rem; font-variant-numeric: tabular-nums; }
.gift-row.near { border-color: #22c55e; background: rgba(34,197,94,.14); }
.gift-row.near .dist { color: #4ade80; }
.gift-row .go {
  background: var(--primary); color: var(--on-primary); border: 0; padding: 10px 14px;
  font-weight: 800; font-family: inherit; font-size: .9rem; cursor: pointer;
}

.empty-note { color: rgba(255,255,255,.5); font-size: .9rem; padding: 14px 2px; }

/* ---------- Barre d'onglets ---------- */
/* Une hauteur fixe, connue de tout le monde (panneau, écrans, toast) : la barre
   ne change jamais de taille, donc rien ne bouge au-dessus d'elle. Sur iPhone,
   la zone du geste d'accueil s'ajoute EN DESSOUS, sans décaler les onglets. */
:root { --tabs-h: 58px; --tabs-total: calc(58px + env(safe-area-inset-bottom, 0px)); }
.tabbar {
  position: absolute; z-index: 600; left: 0; right: 0; bottom: 0; height: var(--tabs-total);
  display: flex; align-items: flex-start; background: var(--bg); border-top: 1px solid rgba(255,255,255,.18);
  padding: 0; box-sizing: border-box;
}
.tabbar[hidden] { display: none; }
.tab {
  flex: 1 1 0; min-width: 0; height: var(--tabs-h); padding: 0 2px; margin: 0;
  background: transparent; border: 0; color: rgba(255,255,255,.5);
  font-family: inherit; font-size: .72rem; font-weight: 700; cursor: pointer; line-height: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  -webkit-tap-highlight-color: transparent;
}
.tab span { font-size: 20px; line-height: 22px; height: 22px; display: block; }
.tab em { font-style: normal; display: block; height: 12px; line-height: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tab.is-on { color: var(--primary); }
@media (max-width: 360px) { .tab { font-size: .64rem; letter-spacing: -.01em } }
/* la pastille des missions restantes ; dorée quand une mission vient d'aboutir */
.tab-badge {
  position: absolute; top: 5px; left: calc(50% + 8px); min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: #ff5a3c; color: #fff; font-size: .66rem; font-weight: 800; font-style: normal;
  display: grid; place-items: center; line-height: 1; box-shadow: 0 0 0 2px var(--bg);
  animation: badge-pop .4s var(--sortie, ease) both;
}
.tab-badge[hidden] { display: none; }
.tab-badge.fini { background: var(--primary, #e2b24a); color: #111 }
@keyframes badge-pop { from { transform: scale(.4); opacity: 0 } to { transform: none; opacity: 1 } }
#screen-missions { padding-bottom: var(--tabs-total); }

/* les écrans à onglets laissent la place à la barre */
#screen-map, #screen-account { padding-bottom: var(--tabs-total); }

/* ---------- Connexion ---------- */
.seg { display: flex; border: 1px solid rgba(255,255,255,.22); }
.seg-btn {
  flex: 1; padding: 12px; background: transparent; border: 0; color: rgba(255,255,255,.6);
  font-family: inherit; font-weight: 700; font-size: .92rem; cursor: pointer;
}
.seg-btn.is-on { background: var(--primary); color: var(--on-primary); }

/* ---------- Espace client ---------- */
.stat-row { display: flex; gap: 8px; margin: 4px 0 16px; }
.stat-box {
  flex: 1; padding: 14px 12px; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.16); text-align: center;
}
.stat-box b { display: block; font-size: 1.6rem; color: var(--primary); line-height: 1.1; }
.stat-box span { font-size: .74rem; color: rgba(255,255,255,.55); }

.ticket {
  display: flex; align-items: center; gap: 12px; padding: 14px; margin-bottom: 9px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16);
}
.ticket .t-main { flex: 1; min-width: 0; }
.ticket .t-main b { display: block; font-size: .97rem; }
.ticket .t-main small { color: rgba(255,255,255,.55); font-size: .79rem; }
.ticket .t-code {
  font-family: ui-monospace, Menlo, monospace; font-weight: 800; letter-spacing: .06em;
  color: var(--primary); font-size: .95rem;
}
.ticket.used { opacity: .5; }
.badge-s { display: inline-block; padding: 3px 8px; font-size: .7rem; font-weight: 800; }
.badge-s.wait { background: rgba(226,178,74,.2); color: var(--primary); }
.badge-s.ok   { background: rgba(34,197,94,.2); color: #4ade80; }
.badge-s.used { background: rgba(255,255,255,.12); color: rgba(255,255,255,.6); }

/* ---------- Chasse : barre de proximité ---------- */
.radar-bar {
  position: relative; width: 100%; max-width: 300px; height: 12px;
  background: #000; border: 1px solid rgba(255,255,255,.3); overflow: hidden;
}
.radar-bar b {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  background: var(--primary); transition: width .16s linear;
}

/* Arrondis de l'écran de jeu : bandeaux, fiches de cadeaux et boutons caméra */
.sheet, .g-item, .hunt-box, .reveal-card, .claim-card, .voucher{ border-radius:18px }
.sheet{ border-radius:22px 22px 0 0 }
.g-item{ border-radius:14px }
#grab-btn, #mode-btn, #walk-btn, #cam-btn, #gyro-btn, #btn-camera, #btn-recenter{ border-radius:999px }
.tabbar .tab{ border-radius:999px }

/* état de la liste : dire la vérité plutôt qu'échouer en silence */
.sheet-etat{
  padding:2px 16px 8px; font-size:.76rem; color:rgba(255,255,255,.42);
}
.sheet-etat.err{color:#ff9b85; font-weight:600}
.sheet-refresh{
  margin-left:auto; width:34px; height:34px; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  color:#fff; font-size:1rem; line-height:1;
}
.sheet-refresh:active{background:rgba(255,255,255,.18)}
.sheet-refresh.tourne{animation:tourner .9s linear}
@keyframes tourner{to{transform:rotate(360deg)}}
.sheet-head{display:flex;align-items:center;gap:10px}

/* qualité de la position : on ne prétend plus qu'elle est précise */
.gps-pill.gps-moyen{background:rgba(226,178,74,.22); border-color:rgba(226,178,74,.5)}
.gps-pill.gps-mauvais{background:rgba(239,68,68,.25); border-color:rgba(239,68,68,.6)}
#gps-pill.gps-moyen{background:rgba(226,178,74,.22)}
#gps-pill.gps-mauvais{background:rgba(239,68,68,.25)}
.gps-alerte{
  margin:6px 14px 12px; padding:14px 16px; border-radius:16px;
  background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.4);
  font-size:.84rem; line-height:1.5; color:#ffd9d0;
}
.gps-alerte b{display:block; margin-bottom:6px; color:#fff}
.gps-alerte p{margin:0 0 8px}
.gps-alerte ul{margin:0; padding-left:18px}
.gps-alerte li{margin-bottom:6px}

/* ==========================================================================
   LISTE DES CADEAUX — fiches modernes
   Une fiche = un cadeau : pastille, nom, jauge d'approche, bouton arrondi.
   ========================================================================== */
.sheet{
  /* Pas de flou en direct ici : au-dessus d'une carte qui bouge, chaque image
     coûte un rendu plein écran et le défilement se met à hacher sur téléphone.
     Un fond opaque donne le même effet pour rien. */
  background:#0E1118;
  border-top:1px solid rgba(255,255,255,.12);
  box-shadow:0 -18px 44px rgba(0,0,0,.45);
}
.gift-list{ gap:10px }

.gift-row{
  position:relative; overflow:hidden; flex:0 0 auto;   /* jamais écrasée par la liste */
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  padding:12px 12px 12px 11px; border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.12);
  color:#fff; font-family:inherit; cursor:pointer;
  transition:transform .16s cubic-bezier(.4,0,.2,1), border-color .16s ease, background .16s ease;
}
.gift-row:active{ transform:scale(.985) }
.gift-row::after{                       /* liseré supérieur : donne du relief */
  content:''; position:absolute; left:14px; right:14px; top:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
}

.gift-row .g-ico{
  flex:0 0 46px; height:46px; display:grid; place-items:center; border-radius:15px;
  background:radial-gradient(circle at 50% 30%, rgba(255,255,255,.16), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.14); font-size:22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.gift-row .g-ico i{ font-style:normal; display:block; animation:g-flotte 3.4s ease-in-out infinite }
@keyframes g-flotte{ 0%,100%{ transform:translateY(-2px) rotate(-4deg) } 50%{ transform:translateY(2px) rotate(4deg) } }

.gift-row .g-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px }
.gift-row .g-txt b{
  display:block; font-size:.95rem; font-weight:800; letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.gift-row .g-txt small{
  color:rgba(255,255,255,.5); font-size:.76rem; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.gift-row .g-bar{
  display:block; height:4px; margin-top:3px; border-radius:999px;
  background:rgba(255,255,255,.1); overflow:hidden;
}
.gift-row .g-bar i{
  display:block; height:100%; border-radius:999px;
  background:var(--primary);
  background:linear-gradient(90deg, color-mix(in srgb, var(--primary) 45%, transparent), var(--primary));
  transition:width .5s cubic-bezier(.4,0,.2,1);
}

.gift-row .g-right{ display:flex; flex-direction:column; align-items:flex-end; gap:7px }
.gift-row .g-dist{
  font-weight:800; font-size:.82rem; font-variant-numeric:tabular-nums;
  padding:3px 10px; border-radius:999px; letter-spacing:.01em;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.92);
}
.gift-row .go{
  background:var(--primary); color:var(--on-primary); border:0;
  padding:9px 17px; border-radius:999px;
  font-weight:800; font-family:inherit; font-size:.84rem; cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.3);
  transition:transform .14s ease, filter .14s ease;
}
.gift-row .go:active{ transform:translateY(1px) scale(.97) }

/* Cadeau à portée : la fiche s'allume, discrètement mais sans ambiguïté */
.gift-row.near{
  border-color:rgba(74,222,128,.55);
  background:linear-gradient(180deg, rgba(34,197,94,.18), rgba(34,197,94,.07));
  box-shadow:0 0 0 1px rgba(34,197,94,.14), 0 10px 30px rgba(34,197,94,.14);
}
.gift-row.near .g-ico{ border-color:rgba(74,222,128,.45); box-shadow:0 0 18px rgba(34,197,94,.3) inset }
.gift-row.near .g-dist{ background:rgba(34,197,94,.22); border-color:rgba(74,222,128,.45); color:#b7f5cd }
.gift-row.near .g-bar i{ background:linear-gradient(90deg, rgba(34,197,94,.55), #4ade80) }
.gift-row.near .go{ background:#22c55e; color:#04220f }
.gift-row.near::before{                 /* balayage lumineux : « il est là » */
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.14) 50%, transparent 65%);
  transform:translateX(-120%); animation:g-balaye 3.2s ease-in-out infinite;
}
@keyframes g-balaye{ 0%{ transform:translateX(-120%) } 55%,100%{ transform:translateX(120%) } }

.empty-note{
  color:rgba(255,255,255,.5); font-size:.9rem; padding:18px 14px; text-align:center;
  border:1px dashed rgba(255,255,255,.14); border-radius:16px;
}

@media (prefers-reduced-motion: reduce){
  .gift-row .g-ico i, .gift-row.near::before{ animation:none }
}

/* ==========================================================================
   REPÈRES DE CADEAUX SUR LA CARTE — même langage que la réalité augmentée
   ========================================================================== */
.gift-pin3d{ width:46px; height:74px }
.gift-pin3d .cube{
  border-radius:8px; border:1px solid rgba(0,0,0,.35);
  box-shadow:0 6px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.35);
}
.gift-pin3d .beam{
  width:10px; margin-left:-5px; border-radius:999px; filter:blur(1px);
}
.gift-pin3d .shadow{ filter:blur(2px) }
.gift-pin3d::before{                 /* anneau au sol : on lit la position d'un coup d'œil */
  content:''; position:absolute; left:50%; bottom:-2px; width:38px; height:14px;
  margin-left:-19px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.35);
  animation:pin-onde 2.8s ease-out infinite; pointer-events:none;
}
.gift-pin3d.near::before{ border-color:rgba(74,222,128,.9); animation-duration:1.5s }
@keyframes pin-onde{
  0%   { transform:scale(.5);  opacity:0 }
  25%  { opacity:.85 }
  100% { transform:scale(1.5); opacity:0 }
}
.gift-pin3d.near .cube{ box-shadow:0 6px 22px rgba(34,197,94,.5), inset 0 1px 0 rgba(255,255,255,.4) }
@media (prefers-reduced-motion: reduce){ .gift-pin3d::before{ animation:none } }

/* ==========================================================================
   POINTS, RARETÉS, CADEAU DU JOUR ET COLLECTION
   ========================================================================== */

/* --- Solde de points, toujours à l'écran --- */
.pill--pts{
  flex:0 0 auto; font-variant-numeric:tabular-nums; padding:9px 14px;
  background:rgba(226,178,74,.16); border-color:rgba(226,178,74,.45); color:#fff;
}
.pill--pts b{ color:var(--primary); font-size:1rem; margin-right:2px }
.pill--pts[hidden]{ display:none }

/* --- Bandeau du cadeau du jour --- */
.rythme{
  display:flex; align-items:center; gap:11px; margin:0 0 10px; padding:10px 13px;
  border-radius:16px; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
}
.rythme[hidden]{ display:none }
.rythme .ry-ico{ font-size:20px; line-height:1 }
.rythme .ry-txt{ display:flex; flex-direction:column; gap:1px; min-width:0 }
.rythme .ry-txt b{ font-size:.86rem; font-weight:800 }
.rythme .ry-txt small{ font-size:.75rem; color:rgba(255,255,255,.55) }
.rythme.est-la{
  background:linear-gradient(100deg, rgba(245,197,66,.22), rgba(245,197,66,.08));
  border-color:rgba(245,197,66,.55);
  box-shadow:0 0 22px rgba(245,197,66,.18);
}
.rythme.est-la .ry-ico{ animation:ry-brille 1.8s ease-in-out infinite }
@keyframes ry-brille{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.18) } }

/* --- Raretés : une seule couleur par niveau, partout dans le jeu --- */
.r-commun{ --rar:#cfd4de }
.r-rare  { --rar:#6ba7ff }
.r-dore  { --rar:#f5c542 }

.gift-row .g-rar{ font-style:normal; color:var(--rar,#cfd4de); font-weight:800 }
.gift-row.r-rare  { border-color:rgba(107,167,255,.38) }
.gift-row.r-dore  { border-color:rgba(245,197,66,.55) }
.gift-row.r-dore .g-ico{ box-shadow:0 0 20px rgba(245,197,66,.35) inset }
.gift-row.est-du-jour .g-rar{ letter-spacing:.06em; text-transform:uppercase }

/* le repère sur la carte prend la couleur de sa rareté */
.gift-pin3d.r-rare .cube{ box-shadow:0 6px 20px rgba(107,167,255,.5), inset 0 1px 0 rgba(255,255,255,.35) }
.gift-pin3d.r-dore .cube{ box-shadow:0 6px 24px rgba(245,197,66,.65), inset 0 1px 0 rgba(255,255,255,.45) }
.gift-pin3d.r-dore::before{ border-color:rgba(245,197,66,.9); animation-duration:1.6s }
.gift-pin3d.r-rare::before{ border-color:rgba(107,167,255,.75) }

/* --- Espace client : points, collection, paliers --- */
.stat-box--pts b{ color:var(--primary) }
.acc-titre{ font-size:.82rem; text-transform:uppercase; letter-spacing:.1em;
  color:rgba(255,255,255,.45); margin:22px 0 10px; font-weight:800 }

.maison{
  padding:14px; margin-bottom:12px; border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
}
.maison-tete{ display:flex; align-items:baseline; gap:8px; margin-bottom:12px }
.maison-tete b{ font-size:1rem; font-weight:800 }
.maison-tete small{ color:rgba(255,255,255,.45); font-size:.76rem;
  text-transform:uppercase; letter-spacing:.06em }

.serie-tete{ display:flex; justify-content:space-between; align-items:baseline;
  font-size:.78rem; color:rgba(255,255,255,.5); margin-bottom:8px }
.serie-tete b{ color:#fff; font-size:.9rem; font-variant-numeric:tabular-nums }
.serie-pieces{ display:grid; gap:7px; grid-template-columns:repeat(auto-fill, minmax(64px, 1fr)) }
.serie-pieces .piece{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:9px 5px; border-radius:14px; text-align:center;
  background:rgba(255,255,255,.04); border:1px dashed rgba(255,255,255,.16);
}
.serie-pieces .piece i{ font-style:normal; font-size:20px; filter:grayscale(1); opacity:.35 }
.serie-pieces .piece em{ font-style:normal; font-size:.62rem; line-height:1.2;
  color:rgba(255,255,255,.35); overflow:hidden; text-overflow:ellipsis; max-width:100% }
.serie-pieces .piece.eue{
  background:rgba(245,197,66,.14); border:1px solid rgba(245,197,66,.5);
  box-shadow:0 0 14px rgba(245,197,66,.16);
}
.serie-pieces .piece.eue i{ filter:none; opacity:1 }
.serie-pieces .piece.eue em{ color:rgba(255,255,255,.8); font-weight:700 }
.serie-note{ font-size:.74rem; color:rgba(255,255,255,.42); margin:9px 0 0; line-height:1.45 }
.serie-note.ok{ color:#8ef0b0 }

.paliers{ margin-top:14px; display:flex; flex-direction:column; gap:8px }
.palier{
  display:flex; align-items:center; gap:11px; padding:10px 11px; border-radius:15px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); opacity:.62;
}
.palier.ok{ opacity:1; border-color:rgba(245,197,66,.45); background:rgba(245,197,66,.09) }
.palier .pa-ico{ font-size:20px; flex:0 0 auto }
.palier .pa-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px }
.palier .pa-txt b{ font-size:.9rem; font-weight:700 }
.palier .pa-txt small{ font-size:.74rem; color:rgba(255,255,255,.5); font-variant-numeric:tabular-nums }
.palier .pa-btn{
  flex:0 0 auto; border:0; border-radius:999px; padding:8px 15px; cursor:pointer;
  font-family:inherit; font-weight:800; font-size:.78rem;
  background:var(--primary); color:var(--on-primary);
}
.palier .pa-btn[disabled]{
  background:rgba(255,255,255,.09); color:rgba(255,255,255,.45); cursor:default;
}

.journal{ display:flex; flex-direction:column }
.journal .jl{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:9px 2px; border-bottom:1px solid rgba(255,255,255,.07);
}
.journal .jl:last-child{ border-bottom:0 }
.journal .jl-t{ display:flex; flex-direction:column; gap:1px; min-width:0; font-size:.86rem }
.journal .jl-t small{ color:rgba(255,255,255,.42); font-size:.72rem }
.journal .jl b{ font-variant-numeric:tabular-nums; font-size:.92rem; flex:0 0 auto }
.journal .jl b.plus{ color:#4ade80 }
.journal .jl b.moins{ color:rgba(255,255,255,.55) }

/* --- Écran de résultat : points gagnés et pièce de collection --- */
.win-points{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  margin:14px auto 0; padding:10px 22px; border-radius:999px; max-width:320px;
  background:rgba(245,197,66,.14); border:1px solid rgba(245,197,66,.45);
}
.win-points[hidden]{ display:none }
.win-points b{ font-size:1.1rem; color:var(--primary) }
.win-points small{ font-size:.74rem; color:rgba(255,255,255,.55) }

.win-extra{ margin:14px auto 0; max-width:340px; display:flex; flex-direction:column; gap:9px }
.win-extra[hidden]{ display:none }
.win-piece{
  display:flex; flex-direction:column; align-items:center; gap:2px; padding:13px 16px;
  border-radius:18px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  animation:piece-arrive .5s cubic-bezier(.2,1.3,.4,1) both;
}
.win-piece span{ font-size:30px; line-height:1 }
.win-piece b{ font-size:.95rem }
.win-piece small{ font-size:.74rem; color:rgba(255,255,255,.55); text-align:center }
.win-piece.win-serie{
  background:linear-gradient(160deg, rgba(245,197,66,.22), rgba(245,197,66,.07));
  border-color:rgba(245,197,66,.6); box-shadow:0 0 30px rgba(245,197,66,.22);
}
@keyframes piece-arrive{ from{ opacity:0; transform:translateY(14px) scale(.94) } }

@media (prefers-reduced-motion: reduce){
  .rythme.est-la .ry-ico, .win-piece{ animation:none }
}

/* ==========================================================================
   ═══ HABILLAGE FUTURISTE — CARTE, PANNEAU, LISTE ═══
   Un poste de pilotage plutôt qu'une liste : cadres d'angle, lignes de
   balayage, lectures façon instrument. Toujours la même palette.
   ========================================================================== */

/* --- Le panneau du bas devient une console ------------------------------- */
.sheet{
  background:linear-gradient(180deg, #10131B, #0A0C12);
  border-top:1px solid var(--trait, rgba(255,255,255,.14));
  box-shadow:0 -24px 60px -28px #000, 0 -1px 0 var(--lueur-forte, rgba(255,255,255,.3));
}
.sheet::before{                       /* ligne de balayage qui traverse le haut */
  content:''; position:absolute; left:0; right:0; top:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--primary), transparent);
  opacity:.85;
  animation:balayage 4.5s ease-in-out infinite;
}
@keyframes balayage{
  0%,100%{ transform:translateX(-55%) scaleX(.35); opacity:.25 }
  50%    { transform:translateX(55%)  scaleX(.35); opacity:.9 }
}
.sheet-grip{
  width:52px; height:3px; border-radius:999px;
  background:linear-gradient(90deg, transparent, var(--primary), transparent);
  opacity:.5;
}
.sheet-head b{ letter-spacing:-.01em }
.sheet-sub, #sheet-sub{
  font-variant-numeric:tabular-nums; letter-spacing:.06em; text-transform:uppercase; font-size:.72rem;
}

/* --- Les pastilles du haut : des lectures d'instrument -------------------- */
.map-top .pill{
  border:1px solid var(--trait, rgba(255,255,255,.14));
  background:rgba(10,13,20,.66);
  -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 8px 26px -12px #000, inset 0 1px 0 rgba(255,255,255,.08);
  letter-spacing:.01em;
}
.pill--btn{ transition:transform .16s var(--sortie, ease), box-shadow .16s ease }
.pill--btn:active{ transform:scale(.94) }
.pill--pts{
  border-color:var(--lueur-forte, rgba(226,178,74,.5));
  box-shadow:0 0 22px -8px var(--lueur, rgba(226,178,74,.5)), inset 0 1px 0 rgba(255,255,255,.1);
}
.pill--pts b{ text-shadow:0 0 12px var(--lueur, rgba(226,178,74,.6)) }

/* --- Les fiches de cadeaux : coins coupés et angles marqués --------------- */
.gift-row{
  border-radius:4px 18px 4px 18px;          /* asymétrie discrète, façon interface */
  background:linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  transition:transform .18s var(--sortie, ease), border-color .18s ease,
             box-shadow .18s ease, background .18s ease;
}
.gift-row::after{                            /* équerre lumineuse en haut à gauche */
  content:''; position:absolute; left:0; top:0; width:22px; height:22px;
  border-top:2px solid var(--primary); border-left:2px solid var(--primary);
  border-top-left-radius:4px; opacity:.55; background:none; right:auto;
}
.gift-row:active{ transform:scale(.985) }
.gift-row .g-ico{
  border-radius:4px 14px 4px 14px;
  background:radial-gradient(circle at 50% 25%, rgba(255,255,255,.2), rgba(255,255,255,.04));
}
.gift-row .g-dist{
  border-radius:999px; letter-spacing:.02em;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.gift-row .go{
  border-radius:999px;
  box-shadow:0 0 0 1px var(--lueur-forte, transparent), 0 6px 18px -8px var(--lueur, #0006);
  transition:transform .14s var(--sortie, ease), box-shadow .16s ease;
}
.gift-row .g-bar{ height:3px }
.gift-row .g-bar i{ box-shadow:0 0 10px -1px var(--lueur, transparent) }

.gift-row.near{
  border-color:rgba(74,222,128,.6);
  box-shadow:0 0 0 1px rgba(34,197,94,.18), 0 12px 34px -16px rgba(34,197,94,.5);
}
.gift-row.near::after{ border-color:#4ade80; opacity:.9 }
.gift-row.r-dore::after{ border-color:#f5c542; opacity:.95 }
.gift-row.r-rare::after{ border-color:#6ba7ff; opacity:.8 }

/* --- Le bandeau du cadeau du jour : un compte à rebours d'instrument ------ */
.rythme{
  border-radius:4px 16px 4px 16px;
  background:linear-gradient(120deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border-color:var(--trait, rgba(255,255,255,.12));
}
.rythme.est-la{
  border-color:rgba(245,197,66,.6);
  box-shadow:0 0 28px -10px rgba(245,197,66,.7), inset 0 0 24px -14px rgba(245,197,66,.9);
}
.rythme .ry-txt b{ letter-spacing:.01em }
.rythme #ry-compte{ font-variant-numeric:tabular-nums; letter-spacing:.06em }

/* --- Espace client : mêmes codes ----------------------------------------- */
.stat-box{
  border-radius:4px 16px 4px 16px;
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  border:1px solid var(--trait, rgba(255,255,255,.12));
  position:relative; overflow:hidden;
}
.stat-box b{ text-shadow:0 0 20px var(--lueur, transparent) }
.stat-box--pts::after{
  content:''; position:absolute; inset:auto 0 0 0; height:2px;
  background:linear-gradient(90deg, transparent, var(--primary), transparent);
}
.maison{ border-radius:4px 20px 4px 20px }
.ticket{
  border-radius:4px 16px 4px 16px;
  background:linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  border:1px solid var(--trait, rgba(255,255,255,.12));
}
.ticket .t-code{
  padding:6px 11px; border-radius:8px;
  background:rgba(0,0,0,.35); border:1px solid var(--lueur-forte, rgba(255,255,255,.2));
  text-shadow:0 0 14px var(--lueur, transparent);
}
.palier{ border-radius:4px 15px 4px 15px }
.palier .pa-btn{ box-shadow:0 0 0 1px var(--lueur-forte, transparent), 0 6px 16px -8px var(--lueur, #0006) }
.serie-pieces .piece{ border-radius:4px 14px 4px 14px }
.serie-pieces .piece.eue{ box-shadow:0 0 20px -8px rgba(245,197,66,.8) }
.acc-titre{ position:relative; padding-left:14px }
.acc-titre::before{
  content:''; position:absolute; left:0; top:50%; width:6px; height:6px; margin-top:-3px;
  background:var(--primary); border-radius:1px; transform:rotate(45deg);
  box-shadow:0 0 10px var(--lueur-forte, transparent);
}

/* --- Le repère de cadeau sur la carte ------------------------------------ */
.gift-pin3d .cube{ border-radius:3px 9px 3px 9px }

@media (prefers-reduced-motion: reduce){
  .sheet::before{ animation:none }
}

/* ==========================================================================
   NIVEAU, MISSIONS ET MÉDAILLES
   ========================================================================== */

/* --- La barre de niveau, sous le personnage ------------------------------ */
.acc-niveau{ margin:0 0 16px }
.nv-tete{ display:flex; align-items:center; gap:12px; margin-bottom:9px }
.nv-badge{
  flex:0 0 42px; height:42px; display:grid; place-items:center;
  border-radius:4px 14px 4px 14px;
  background:linear-gradient(140deg, var(--primary), color-mix(in srgb, var(--primary) 70%, #000));
  color:var(--on-primary); font-weight:800; font-size:1.15rem;
  box-shadow:0 0 22px -6px var(--lueur, transparent), inset 0 1px 0 rgba(255,255,255,.4);
}
.nv-txt{ display:flex; flex-direction:column; gap:1px; min-width:0 }
.nv-txt b{ font-size:.98rem; letter-spacing:-.01em }
.nv-txt small{ font-size:.76rem; color:rgba(255,255,255,.5) }
.nv-barre{
  height:8px; border-radius:999px; overflow:hidden;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1);
}
.nv-barre i{
  display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--primary) 45%, transparent), var(--primary) 70%, #fff);
  box-shadow:0 0 14px -1px var(--lueur, transparent);
  transition:width .7s cubic-bezier(.16,1,.3,1);
}

/* --- Les médailles ------------------------------------------------------- */
.acc-titre em{
  font-style:normal; margin-left:8px; color:rgba(255,255,255,.35);
  letter-spacing:.04em; font-weight:700;
}
.medailles{ display:grid; grid-template-columns:repeat(auto-fill, minmax(96px,1fr)); gap:9px }
.med{
  position:relative; padding:12px 8px 10px; border-radius:4px 16px 4px 16px; text-align:center;
  background:rgba(255,255,255,.035); border:1px dashed rgba(255,255,255,.14);
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
.med .med-ico{ font-size:24px; filter:grayscale(1); opacity:.3; line-height:1.1 }
.med b{ font-size:.74rem; font-weight:700; color:rgba(255,255,255,.42) }
.med small{ font-size:.66rem; color:rgba(255,255,255,.3); font-variant-numeric:tabular-nums }
.med .med-suite{
  position:absolute; top:6px; right:8px; font-size:.6rem;
  color:rgba(255,255,255,.35); font-variant-numeric:tabular-nums;
}
/* trois paliers : bronze, argent, or */
.med.t1, .med.t2, .med.t3{ border-style:solid }
.med.t1{ background:rgba(205,127,50,.13);  border-color:rgba(205,127,50,.55) }
.med.t2{ background:rgba(192,198,214,.13); border-color:rgba(192,198,214,.55) }
.med.t3{ background:rgba(245,197,66,.15);  border-color:rgba(245,197,66,.65);
         box-shadow:0 0 24px -8px rgba(245,197,66,.8) }
.med.t1 .med-ico, .med.t2 .med-ico, .med.t3 .med-ico{ filter:none; opacity:1 }
.med.t1 b, .med.t2 b, .med.t3 b{ color:#fff }
.med.t1 small{ color:#e6a86a } .med.t2 small{ color:#cfd6e6 } .med.t3 small{ color:#f5d98a }

/* --- Les missions -------------------------------------------------------- */
.mission{
  display:flex; align-items:center; gap:11px; padding:11px 12px; margin-bottom:8px;
  border-radius:4px 16px 4px 16px;
  background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.11);
}
.mission .mi-ico{ font-size:21px; flex:0 0 auto; line-height:1 }
.mission .mi-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px }
.mission .mi-txt b{ font-size:.9rem; font-weight:700 }
.mission .mi-txt small{ font-size:.75rem; color:rgba(255,255,255,.5) }
.mi-barre{
  display:block; height:3px; margin-top:4px; border-radius:999px;
  background:rgba(255,255,255,.1); overflow:hidden;
}
.mi-barre i{
  display:block; height:100%; border-radius:999px; background:var(--primary);
  transition:width .6s cubic-bezier(.16,1,.3,1);
}
.mission .mi-droite{
  flex:0 0 auto; text-align:right; display:flex; flex-direction:column; align-items:flex-end;
}
.mission .mi-droite b{ font-size:.86rem; font-variant-numeric:tabular-nums }
.mission .mi-droite small{ font-size:.68rem; color:var(--primary); font-weight:700 }
.mission .mi-ok{
  width:28px; height:28px; display:grid; place-items:center; border-radius:50%;
  background:rgba(34,197,94,.2); border:1px solid rgba(74,222,128,.6);
  color:#4ade80; font-weight:800;
}
.mission.faite{ opacity:.62; border-color:rgba(74,222,128,.3) }
.mission.faite .mi-barre i{ background:#22c55e }

/* --- Annonces sur l'écran de gain ---------------------------------------- */
.win-piece.win-niveau{
  background:linear-gradient(160deg, color-mix(in srgb, var(--primary) 30%, transparent),
             color-mix(in srgb, var(--primary) 8%, transparent));
  border-color:var(--lueur-forte, rgba(255,255,255,.4));
  box-shadow:0 0 34px -10px var(--lueur, transparent);
}
.win-piece.win-niveau span{
  width:44px; height:44px; display:grid; place-items:center; border-radius:50%;
  background:var(--primary); color:var(--on-primary); font-size:20px; font-weight:800;
}
.win-piece.win-medaille.t1{ border-color:rgba(205,127,50,.7) }
.win-piece.win-medaille.t2{ border-color:rgba(192,198,214,.7) }
.win-piece.win-medaille.t3{ border-color:rgba(245,197,66,.8);
  box-shadow:0 0 30px -8px rgba(245,197,66,.9) }
.win-piece.win-mission{ border-color:rgba(74,222,128,.5) }
.win-points b em{ font-style:normal; opacity:.45; font-weight:600 }

/* =========================================================================
   COUCHE « JEU » — mouvement, chaleur, célébration
   Le jeu doit se sentir avant de se lire : ce qui bouge dit où aller, à
   quelle vitesse, et ce qu'on vient de gagner.
   ========================================================================= */

/* --- Arrivée en cascade des listes --------------------------------------- */
@keyframes vibe-entre {
  from { opacity:0; transform:translateY(14px) scale(.97) }
  to   { opacity:1; transform:none }
}
.vibe-entre{ animation:vibe-entre .42s cubic-bezier(.16,1,.3,1) both }

/* --- Refus : on secoue, on ne se contente pas d'un message ---------------- */
@keyframes vibe-secoue {
  0%,100%{ transform:translateX(0) }
  15%{ transform:translateX(-7px) } 30%{ transform:translateX(6px) }
  45%{ transform:translateX(-4px) } 60%{ transform:translateX(3px) }
  75%{ transform:translateX(-2px) }
}
.vibe-secoue{ animation:vibe-secoue .42s ease both }

/* --- Chaud / froid : la fiche du cadeau le plus proche bat -----------------
   Un seul mécanisme, quatre vitesses. Plus on approche, plus le cœur bat
   vite : le joueur sent la distance au lieu de la lire.                    */
@keyframes vibe-coeur {
  0%,100%{ transform:none }
  50%    { transform:scale(1.014) }
}
@keyframes vibe-halo {
  0%,100%{ box-shadow:0 0 0 0 var(--ch-col, transparent) }
  60%    { box-shadow:0 0 0 10px transparent }
}
.gift-row.ch-1{ border-color:color-mix(in srgb, var(--primary) 30%, transparent) }
.gift-row.ch-2,
.gift-row.ch-3,
.gift-row.ch-4{ position:relative }
.gift-row.ch-2{ animation:vibe-coeur 1.5s ease-in-out infinite }
.gift-row.ch-3{ animation:vibe-coeur .95s ease-in-out infinite }
.gift-row.ch-4{ animation:vibe-coeur .58s ease-in-out infinite }
.gift-row.ch-2 .g-ico{ box-shadow:0 0 16px -2px rgba(245,197,66,.45) inset }
.gift-row.ch-3 .g-ico{ box-shadow:0 0 22px -2px rgba(255,138,60,.6) inset }
.gift-row.ch-4 .g-ico{ box-shadow:0 0 28px -2px rgba(255,80,60,.85) inset }
.gift-row .g-chaud{
  font-style:normal; font-weight:800; font-size:.7rem; letter-spacing:.08em;
  text-transform:uppercase; margin-left:6px; opacity:.9;
}
.gift-row.ch-1 .g-chaud{ color:#8fb3ff }
.gift-row.ch-2 .g-chaud{ color:var(--primary) }
.gift-row.ch-3 .g-chaud{ color:#ff9d4d }
.gift-row.ch-4 .g-chaud{ color:#ff5a3c }

/* la jauge d'approche progresse en douceur au lieu de sauter */
.gift-row .g-bar i{ transition:width .5s cubic-bezier(.16,1,.3,1) }

/* --- Bandeau de chaleur en tête de liste ---------------------------------- */
.chaleur{
  display:flex; align-items:center; gap:10px; margin:0 16px 10px;
  padding:9px 13px; border-radius:14px; font-size:.82rem;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  transition:background .5s ease, border-color .5s ease;
}
.chaleur[hidden]{ display:none }
.chaleur .ch-ico{ font-size:18px; line-height:1 }
.chaleur b{ font-weight:800 }
.chaleur small{ display:block; color:rgba(255,255,255,.5); font-size:.72rem }
.chaleur.n2{ background:color-mix(in srgb, var(--primary) 12%, transparent);
             border-color:color-mix(in srgb, var(--primary) 40%, transparent) }
.chaleur.n3{ background:rgba(255,138,60,.14); border-color:rgba(255,138,60,.5) }
.chaleur.n4{ background:rgba(255,80,60,.18); border-color:rgba(255,80,60,.65) }
.chaleur.n3 .ch-ico, .chaleur.n4 .ch-ico{ animation:vibe-coeur .7s ease-in-out infinite }

/* --- Barre de visée : quatre paliers, pas une teinte unique --------------- */
.radar-bar b{ transition:width .16s linear, background .35s ease }
.radar-bar.h-2 b{ background:linear-gradient(90deg, var(--primary), #ffd479) }
.radar-bar.h-3 b{ background:linear-gradient(90deg, #ff9d4d, #ffbe7a) }
.radar-bar.h-4 b{ background:linear-gradient(90deg, #ff5a3c, #ffb199) }
.radar-bar.h-4{ box-shadow:0 0 20px -4px rgba(255,90,60,.9) }
@keyframes vibe-barre {
  0%,100%{ opacity:1 } 50%{ opacity:.62 }
}
.radar-bar.h-4 b{ animation:vibe-barre .5s ease-in-out infinite }

/* --- Bouton d'attrapage : il appelle quand le cadeau est à portée --------- */
@keyframes vibe-appel {
  0%,100%{ transform:scale(1);    box-shadow:0 0 0 0 rgba(34,197,94,.55) }
  50%    { transform:scale(1.035); box-shadow:0 0 0 16px rgba(34,197,94,0) }
}
#grab-btn:not([disabled]){ animation:vibe-appel 1.15s ease-in-out infinite }
#grab-btn[disabled]{ animation:none; opacity:.62 }

/* --- Écran de gain : le lot arrive, il ne s'affiche pas ------------------- */
@keyframes vibe-pop {
  0%  { opacity:0; transform:scale(.3) rotate(-12deg) }
  55% { opacity:1; transform:scale(1.18) rotate(4deg) }
  75% { transform:scale(.94) rotate(-2deg) }
  100%{ transform:scale(1) rotate(0) }
}
@keyframes vibe-monte {
  from{ opacity:0; transform:translateY(18px) }
  to  { opacity:1; transform:none }
}
.screen#screen-reveal.is-active .prize-reveal{ animation:vibe-pop .62s cubic-bezier(.2,1.4,.4,1) both }
.screen#screen-reveal.is-active #win-title{ animation:vibe-monte .45s ease .18s both }
.screen#screen-reveal.is-active #win-sub  { animation:vibe-monte .45s ease .26s both }
.screen#screen-reveal.is-active .prize-label{ animation:vibe-monte .5s cubic-bezier(.16,1,.3,1) .34s both }
.screen#screen-reveal.is-active .win-points:not([hidden]){ animation:vibe-monte .45s ease .44s both }
.screen#screen-reveal.is-active #btn-to-claim{ animation:vibe-monte .45s ease .62s both }

/* le chiffre qui défile mérite une largeur stable */
.win-points b, .pill--pts b, .g-dist, #hunt-dist{ font-variant-numeric:tabular-nums }

/* --- Solde de points : il tressaille quand il grimpe ---------------------- */
@keyframes vibe-gonfle {
  0%,100%{ transform:none }
  35%    { transform:scale(1.16) }
}
.pill--pts.gagne{ animation:vibe-gonfle .5s cubic-bezier(.2,1.4,.4,1) }

/* --- Coupure du son ------------------------------------------------------- */
#son-btn{ font-size:15px; line-height:1 }
#son-btn.est-muet{ opacity:.5 }

/* --- Repos : on respecte le réglage système ------------------------------- */
@media (prefers-reduced-motion: reduce){
  .vibe-entre, .vibe-secoue,
  .gift-row.ch-2, .gift-row.ch-3, .gift-row.ch-4,
  .chaleur.n3 .ch-ico, .chaleur.n4 .ch-ico,
  .radar-bar.h-4 b, #grab-btn:not([disabled]),
  .screen#screen-reveal.is-active .prize-reveal,
  .screen#screen-reveal.is-active #win-title,
  .screen#screen-reveal.is-active #win-sub,
  .screen#screen-reveal.is-active .prize-label,
  .screen#screen-reveal.is-active .win-points:not([hidden]),
  .screen#screen-reveal.is-active #btn-to-claim,
  .pill--pts.gagne{ animation:none !important }
}

/* les nombres qui défilent sur l'écran de gain */
.win-points b i, .win-points small i{ font-style:normal; font-variant-numeric:tabular-nums }

/* L'écran de gain peut être long : niveau, médailles, missions, pièce, série.
   Centré de force, son haut sortait de l'écran et le cadeau se retrouvait
   coupé. Les marges automatiques centrent quand il y a de la place, et
   laissent tout défiler quand il n'y en a plus. */
#screen-reveal{ justify-content:flex-start }
#screen-reveal > .prize-reveal{ margin-top:auto }
#screen-reveal > .footer-agency{ margin-bottom:auto }

/* --- Passage d'un écran à l'autre ----------------------------------------
   Un écran qui apparaît d'un coup donne l'impression d'un site ; un écran
   qui monte donne l'impression d'un jeu. La carte et la caméra, elles, ne
   se déplacent pas : une toile qu'on translate pendant qu'elle se
   redimensionne, c'est le meilleur moyen de la voir clignoter. */
@keyframes ecran-entre { from { opacity:0; transform:translateY(12px) } to { opacity:1; transform:none } }
@keyframes ecran-fondu { from { opacity:0 } to { opacity:1 } }
.screen.is-active{ animation:ecran-entre .3s cubic-bezier(.16,1,.3,1) both }
#screen-map.is-active, #screen-hunt.is-active{ animation:ecran-fondu .3s ease both }
@media (prefers-reduced-motion: reduce){ .screen.is-active{ animation:none !important } }

/* =========================================================================
   CE QU'IL Y A À GAGNER ICI
   La première question de tout joueur. Le bandeau se met à jour tout seul
   dès que le restaurateur change ses lots — d'où l'animation d'attention.
   ========================================================================= */
.lots{
  margin:0 16px 10px; padding:11px 13px; border-radius:14px;
  background:var(--papier, rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.1);
}
.lots[hidden]{ display:none }
.lots-tete{ display:flex; align-items:baseline; gap:8px; margin-bottom:9px }
.lots-tete b{ font-size:.86rem; font-weight:800 }
.lots-tete small{ font-size:.72rem; color:rgba(255,255,255,.5) }
.lots-liste{ display:flex; flex-wrap:wrap; gap:6px }
.lot-p{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px 5px 7px; border-radius:999px; font-size:.76rem; font-weight:600;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.78);
}
.lot-p i{ font-style:normal; font-size:14px; line-height:1 }
.lot-p.est-gros{
  color:var(--primary);
  background:color-mix(in srgb, var(--primary) 14%, transparent);
  border-color:color-mix(in srgb, var(--primary) 45%, transparent);
}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .lot-p.est-gros{ background:rgba(245,197,66,.14); border-color:rgba(245,197,66,.45) }
}

/* le restaurateur vient de changer quelque chose : on le fait remarquer une fois */
@keyframes lots-neuf{
  0%   { box-shadow:0 0 0 0 var(--primary); transform:none }
  40%  { transform:scale(1.012) }
  100% { box-shadow:0 0 0 14px transparent; transform:none }
}
.lots.vient-de-changer{ animation:lots-neuf 1.1s ease both }
@media (prefers-reduced-motion: reduce){ .lots.vient-de-changer{ animation:none } }

/* le bouton « revoir le guide », en bas de Mes cadeaux */
.acc-aide{ margin-top:20px; display:flex; justify-content:center }

/* En mode « tous les cadeaux », l'étiquette d'un repère qui en recouvrirait
   un autre est effacée : le repère reste, le texte disparaît. */
.target.sans-etiquette .tag{ opacity:0; pointer-events:none; transition:opacity .2s ease }

/* ==========================================================================
   MES RESTAURANTS — un compte par maison
   Même poste de pilotage que le reste du jeu : équerres lumineuses, coins
   coupés, lectures façon instrument, ligne de balayage sur la maison active.
   Chaque restaurant scanné a sa carte, son solde, son bouton.
   ========================================================================== */
.restos-oeil{
  font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--primary);
  display:flex; align-items:center; gap:9px; margin:8px 0 6px;
}
.restos-oeil::before{
  content:''; width:6px; height:6px; background:var(--primary); transform:rotate(45deg);
  box-shadow:0 0 10px var(--lueur-forte, transparent); flex:0 0 6px;
}
.restos-oeil em{ font-style:normal; color:rgba(255,255,255,.4); margin-left:auto; letter-spacing:.1em }
.restos-titre{ margin:0 0 6px; font-size:1.6rem; letter-spacing:-.025em; line-height:1.05 }
.restos-intro{ margin:0 0 18px; line-height:1.55 }
.restos-intro b{ color:#fff }
.restos-list{ display:flex; flex-direction:column; gap:10px }

/* --- filtres : recherche + puces (position, activité) --------------------- */
.restos-filtres{ margin:0 0 14px; display:flex; flex-direction:column; gap:10px }
.restos-filtres[hidden]{ display:none }
.rf-cherche{ display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
  border-radius:12px; padding:0 12px }
.rf-cherche span{ opacity:.7; font-size:.95rem }
.rf-cherche input{ flex:1; background:transparent; border:0; color:#fff; font:inherit; font-size:.95rem; padding:11px 0; outline:none; min-width:0 }
.rf-cherche input::placeholder{ color:rgba(255,255,255,.4) }
.rf-puces{ display:flex; gap:7px; overflow-x:auto; padding:2px 0 4px; scrollbar-width:none; -webkit-overflow-scrolling:touch }
.rf-puces::-webkit-scrollbar{ display:none }
.rf-puces button{ flex:0 0 auto; font:inherit; font-size:.8rem; font-weight:700; color:rgba(255,255,255,.72); background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.16); border-radius:999px; padding:7px 12px; cursor:pointer; white-space:nowrap; transition:all .2s }
.rf-puces button.on{ color:#0b0f17; background:var(--primary, #e2b24a); border-color:var(--primary, #e2b24a) }
.rf-puces button.pres.on{ background:#3FE0FF; border-color:#3FE0FF }
.rf-puces button i{ font-style:normal; margin-right:4px }
.rf-vide{ color:rgba(255,255,255,.55); text-align:center; padding:18px 0; font-size:.9rem }

/* --- rangée compacte : tous les restaurants sauf celui où l'on joue ------- */
.resto-card.mini .rc-corps{ padding:10px 12px 10px 10px }
.resto-card.mini .rc-haut{ margin:0; padding-left:4px; align-items:center }
.resto-card.mini .rc-logo{ width:44px; height:44px; border-radius:12px; margin:0 }
.resto-card.mini .rc-nom b{ font-size:1rem }
.resto-card.mini .rc-nom small{ font-size:.76rem }
.resto-card.mini .rc-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; font-size:.74rem; color:rgba(255,255,255,.55); margin-top:3px }
.resto-card.mini .rc-meta b{ color:#3FE0FF; font-weight:700 }
.resto-card.mini .rc-droite{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex:0 0 auto }
.resto-card.mini .rc-pts{ font-size:.78rem; color:rgba(255,255,255,.6) }
.resto-card.mini .rc-pts b{ color:#fff; font-size:.95rem }
.resto-card.mini .rc-btn{ padding:8px 13px; font-size:.82rem }
.resto-card.mini .rc-note{ margin:8px 0 0; padding:6px 4px; font-size:.8rem }
.resto-card.mini .rc-note .rc-etoiles{ font-size:.8rem }
.resto-card.mini .rc-bas{ display:none }
.resto-card.mini .soutien{ display:none }
.resto-card.mini.ouvert .soutien{ display:block }
.rc-activite{ display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--rc, #e2b24a);
  background:color-mix(in srgb, var(--rc, #e2b24a) 14%, transparent); border-radius:6px; padding:2px 6px; line-height:1.4 }

.resto-card{
  position:relative; overflow:hidden; padding:15px 14px 13px;
  border-radius:4px 20px 4px 20px;
  background:linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  border:1px solid var(--trait, rgba(255,255,255,.12));
  animation:ecran-entre .38s var(--sortie, ease) both;
  transition:transform .18s var(--sortie, ease), border-color .2s, box-shadow .2s;
}
.resto-card:nth-child(2){ animation-delay:.07s } .resto-card:nth-child(3){ animation-delay:.14s }
.resto-card:nth-child(4){ animation-delay:.21s } .resto-card:nth-child(5){ animation-delay:.28s }
.resto-card::after{                          /* équerre lumineuse en haut à gauche */
  content:''; position:absolute; left:0; top:0; width:22px; height:22px;
  border-top:2px solid var(--rc); border-left:2px solid var(--rc);
  border-top-left-radius:4px; opacity:.55; pointer-events:none;
}
.resto-card:active{ transform:scale(.985) }
.resto-card.ici{
  border-color:var(--rc);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--rc) 30%, transparent),
             0 18px 44px -26px var(--rc);
}
.resto-card.ici::after{ opacity:1 }
.resto-card.ici::before{                     /* ligne de balayage : « c\'est ici que ça se passe » */
  content:''; position:absolute; left:0; right:0; top:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--rc), transparent);
  animation:balayage 4.5s ease-in-out infinite;
}

.rc-haut{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:12px; padding-left:6px }
.rc-nom b{ display:block; font-size:1.05rem; font-weight:800; letter-spacing:-.01em }
.rc-nom small{
  font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color:rgba(255,255,255,.42); font-size:.68rem; text-transform:uppercase; letter-spacing:.12em;
}
.rc-badge{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:7px;
  font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size:.64rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em;
  color:var(--rc); background:rgba(0,0,0,.35); border:1px solid var(--rc);
  border-radius:4px 10px 4px 10px; padding:6px 10px;
  box-shadow:0 0 16px -6px var(--rc), inset 0 0 0 1px rgba(255,255,255,.04);
}
.rc-badge::before{
  content:''; width:6px; height:6px; border-radius:50%; background:var(--rc);
  box-shadow:0 0 8px var(--rc); animation:vibe-coeur 1.6s ease-in-out infinite;
}

.rc-bas{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding-left:6px }
.rc-pts{
  font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.5);
  display:flex; align-items:baseline; gap:8px; font-variant-numeric:tabular-nums;
}
.rc-pts b{
  font-family:inherit; color:#fff; font-size:1.55rem; font-weight:800; letter-spacing:-.02em;
  text-shadow:0 0 18px color-mix(in srgb, var(--rc) 60%, transparent);
}

/* les boutons : animés, pas seulement colorés */
.rc-btn{
  position:relative; overflow:hidden; isolation:isolate;
  flex:0 0 auto; border:0; border-radius:999px; padding:11px 18px; cursor:pointer;
  font-family:inherit; font-weight:800; font-size:.88rem; color:#0b0f17;
  background:var(--rc); -webkit-tap-highlight-color:transparent;
  box-shadow:0 0 0 1px color-mix(in srgb, var(--rc) 50%, transparent), 0 8px 22px -10px var(--rc);
  transition:transform .16s var(--sortie, ease), box-shadow .2s ease, filter .2s ease;
}
.rc-btn::before{                             /* reflet qui traverse le bouton, en boucle lente */
  content:''; position:absolute; top:-40%; bottom:-40%; left:-30%; width:28%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-18deg); animation:rc-reflet 3.2s ease-in-out infinite; pointer-events:none;
}
.rc-btn::after{                              /* onde au toucher */
  content:''; position:absolute; left:50%; top:50%; width:10px; height:10px; margin:-5px 0 0 -5px;
  border-radius:50%; background:rgba(255,255,255,.5); opacity:0; transform:scale(0); pointer-events:none;
}
.rc-btn:active::after{ animation:rc-onde .5s ease-out }
.rc-btn:hover{ transform:translateY(-1px); filter:brightness(1.07);
  box-shadow:0 0 0 1px var(--rc), 0 12px 28px -10px var(--rc) }
.rc-btn:active{ transform:scale(.96) }
.rc-btn:disabled{ opacity:.6; cursor:default; transform:none; animation:none }
.rc-btn:disabled::before{ animation:none }
.rc-btn--ghost{
  background:transparent; color:#fff; border:1px solid rgba(255,255,255,.22);
  box-shadow:none;
}
.rc-btn--ghost::before{ display:none }
.rc-btn--ghost:hover{ border-color:var(--rc); color:var(--rc); box-shadow:0 0 18px -8px var(--rc); filter:none }
@keyframes rc-reflet{ 0%,55%{ left:-30% } 100%{ left:130% } }
@keyframes rc-onde{ 0%{ opacity:.7; transform:scale(0) } 100%{ opacity:0; transform:scale(28) } }

.restos-aide{
  position:relative; display:flex; gap:12px; align-items:flex-start; margin-top:18px; padding:13px 14px;
  border-radius:4px 16px 4px 16px; background:rgba(255,255,255,.035);
  border:1px dashed rgba(255,255,255,.18);
}
.restos-aide .ra-ico{ font-size:22px; line-height:1 }
.restos-aide p{ margin:0; font-size:.86rem; color:rgba(255,255,255,.62); line-height:1.5 }
.restos-aide b{ color:#fff }

/* dans « Mes cadeaux » : chaque maison affiche SON solde, et la boutique le dit */
.maison-tete{ flex-wrap:wrap }
.maison-pts{
  margin-left:auto; font-size:.8rem; color:rgba(255,255,255,.55); font-variant-numeric:tabular-nums;
}
.maison-pts b{ color:#fff; font-size:1rem; text-shadow:0 0 14px var(--lueur, transparent) }
.maison-pts em{ font-style:normal; color:var(--primary); font-weight:800; text-transform:uppercase;
  font-size:.68rem; letter-spacing:.08em }
.maison.ici{ border-color:var(--primary); box-shadow:0 0 0 1px var(--lueur-forte, transparent) }
.boutique-tete{
  display:flex; align-items:baseline; gap:8px; margin:4px 0 8px;
  font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.5); font-weight:800;
}
.boutique-tete small{ text-transform:none; letter-spacing:0; font-weight:600; color:rgba(255,255,255,.38) }

@media (prefers-reduced-motion: reduce){
  .resto-card, .resto-card.ici::before, .rc-badge::before, .rc-btn::before{ animation:none }
}

/* --- La fiche : couverture, logo, note et avis --------------------------- */
.resto-card{ padding:0 }
.resto-card .rc-corps{ padding:15px 14px 13px }
.rc-cover{ position:relative; aspect-ratio:16/5; overflow:hidden; background:#0b0f17 }
.rc-cover img{ width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.02); transition:transform .6s var(--sortie, ease) }
.resto-card:hover .rc-cover img{ transform:scale(1.06) }
.rc-cover::after{                       /* la photo s'efface vers la carte */
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,15,23,0) 35%, rgba(14,17,24,.92));
}
.resto-card.a-cover .rc-haut{ margin-top:-30px; position:relative; z-index:1 }
.rc-logo{
  width:52px; height:52px; flex:0 0 52px; object-fit:contain; border-radius:4px 12px 4px 12px;
  background:rgba(11,15,23,.9); border:1px solid var(--rc); padding:5px;
  box-shadow:0 8px 22px -10px #000;
}
.rc-haut{ align-items:center }
.rc-nom{ flex:1; min-width:0 }

.rc-note{
  display:flex; align-items:center; gap:8px; width:calc(100% + 12px); margin:0 -6px 12px;
  padding:8px 8px; border:0; border-radius:10px; background:transparent; color:#fff; cursor:pointer;
  font-family:inherit; text-align:left; -webkit-tap-highlight-color:transparent;
  transition:background .18s;
}
.rc-note:hover, .rc-note.ouvert{ background:rgba(255,255,255,.05) }
.rc-note b{ font-size:.95rem; font-weight:800 }
.rc-note small{ color:rgba(255,255,255,.5); font-size:.78rem }
.rc-note .rc-chev{ margin-left:auto; font-style:normal; color:rgba(255,255,255,.4);
  transition:transform .25s var(--sortie, ease) }
.rc-note.ouvert .rc-chev{ transform:rotate(180deg) }
.etoiles{ display:inline-flex; gap:1px; font-size:.95rem; line-height:1 }
.etoiles i{ font-style:normal; color:rgba(255,255,255,.18) }
.etoiles i.pleine{ color:#e2b24a; text-shadow:0 0 8px rgba(226,178,74,.55) }
.etoiles i.demi{ color:#e2b24a; opacity:.55 }

.rc-avis{ margin-top:12px; padding-top:12px; border-top:1px dashed rgba(255,255,255,.14);
  animation:ecran-fondu .3s ease both }
.rc-attente, .rc-note-info{ margin:0; font-size:.86rem; color:rgba(255,255,255,.5) }
.rc-note-info{ padding:10px 12px; border-radius:10px; background:rgba(255,255,255,.04) }

.rc-noter{ padding:12px; border-radius:4px 14px 4px 14px; margin-bottom:12px;
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.14) }
.rc-noter-tete{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:8px }
.rc-noter-tete b{ font-size:.92rem }
.rc-noter-tete small{ color:rgba(255,255,255,.45); font-size:.76rem }
.rc-etoiles-choix{ display:flex; gap:4px; margin-bottom:10px }
.rc-etoiles-choix button{
  width:40px; height:40px; border:0; border-radius:10px; background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.25); font-size:1.35rem; cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:transform .15s var(--sortie, ease), color .15s, background .15s;
}
.rc-etoiles-choix button.on{ color:#e2b24a; background:rgba(226,178,74,.12);
  text-shadow:0 0 10px rgba(226,178,74,.6) }
.rc-etoiles-choix button:active{ transform:scale(.88) }
.rc-noter textarea{
  width:100%; resize:vertical; min-height:56px; font:inherit; font-size:.9rem; color:#fff;
  background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.16); border-radius:10px; padding:9px 11px;
  outline:none; transition:border-color .18s, box-shadow .18s; box-sizing:border-box;
}
.rc-noter textarea:focus{ border-color:var(--rc); box-shadow:0 0 0 3px color-mix(in srgb, var(--rc) 18%, transparent) }
.rc-noter-bas{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px }
.rc-noter-bas small{ color:rgba(255,255,255,.4); font-size:.74rem }

.rc-liste{ display:flex; flex-direction:column; gap:8px }
.rc-un{ padding:10px 12px; border-radius:4px 12px 4px 12px; background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.09); animation:vibe-monte .3s var(--sortie, ease) both }
.rc-un:nth-child(2){ animation-delay:.05s } .rc-un:nth-child(3){ animation-delay:.1s }
.rc-un:nth-child(4){ animation-delay:.15s } .rc-un:nth-child(5){ animation-delay:.2s }
.rc-un-tete{ display:flex; align-items:center; gap:8px; font-size:.84rem }
.rc-un-tete b{ font-weight:700 }
.rc-un-tete small{ margin-left:auto; color:rgba(255,255,255,.38); font-size:.72rem }
.rc-un p{ margin:6px 0 0; font-size:.9rem; color:rgba(255,255,255,.78); line-height:1.5 }

/* --- L'accueil aux couleurs du restaurant : couverture et logo ---------- */
#screen-auth.a-cover{ isolation:isolate }
.hero-cover{
  position:absolute; left:0; right:0; top:0; height:min(48vh, 400px); z-index:-1; overflow:hidden;
  pointer-events:none;
}
.hero-cover img{ width:100%; height:100%; object-fit:cover; display:block; opacity:.5;
  animation:hero-cover-zoom 14s ease-in-out infinite alternate }
.hero-cover::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(13,13,15,.1), var(--bg, #0d0d0f) 94%);
}
@keyframes hero-cover-zoom{ from{ transform:scale(1) } to{ transform:scale(1.08) } }
#screen-auth.a-cover .hero-marque .logo{
  max-height:96px; padding:8px 12px; border-radius:4px 14px 4px 14px;
  background:rgba(11,15,23,.72); filter:drop-shadow(0 6px 18px rgba(0,0,0,.6));
}
@media (prefers-reduced-motion: reduce){ .hero-cover img{ animation:none } }

/* ==========================================================================
   SHOP — l'onglet où les points deviennent un repas
   ========================================================================== */
.shop-maison{
  position:relative; overflow:hidden; margin-bottom:12px; border-radius:4px 20px 4px 20px;
  background:linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  border:1px solid var(--trait, rgba(255,255,255,.12));
  animation:ecran-entre .38s var(--sortie, ease) both;
}
.shop-maison::after{
  content:''; position:absolute; left:0; top:0; width:22px; height:22px; pointer-events:none;
  border-top:2px solid var(--rc); border-left:2px solid var(--rc); border-top-left-radius:4px; opacity:.55;
}
.shop-maison.ici{ border-color:var(--rc); box-shadow:0 0 0 1px color-mix(in srgb, var(--rc) 30%, transparent), 0 18px 44px -26px var(--rc) }
.shop-maison.ici::after{ opacity:1 }
.shop-tete{
  display:flex; align-items:center; gap:10px; width:100%; padding:14px 14px 14px 20px;
  background:transparent; border:0; color:#fff; font-family:inherit; text-align:left; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.shop-nom{ flex:1; min-width:0 }
.shop-nom b{ display:block; font-size:1.02rem; font-weight:800; letter-spacing:-.01em }
.shop-nom small{ font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size:.66rem;
  text-transform:uppercase; letter-spacing:.12em; color:rgba(255,255,255,.42) }
.shop-solde{ display:flex; flex-direction:column; align-items:flex-end; line-height:1; flex:0 0 auto }
.shop-solde b{ font-size:1.5rem; font-weight:800; letter-spacing:-.02em;
  text-shadow:0 0 18px color-mix(in srgb, var(--rc) 60%, transparent) }
.shop-solde small{ font-family:ui-monospace, Menlo, monospace; font-size:.62rem; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(255,255,255,.45); margin-top:3px }
.shop-tete .rc-chev{ font-style:normal; color:rgba(255,255,255,.4); transition:transform .25s var(--sortie, ease) }
.shop-maison.ouvert .shop-tete .rc-chev{ transform:rotate(180deg) }
.shop-corps{ padding:0 14px 14px; animation:ecran-fondu .3s ease both }
.shop-note{ margin:10px 0 0; font-size:.82rem; color:rgba(255,255,255,.5) }
.pa-jauge{ display:block; height:3px; margin-top:6px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden }
.pa-jauge i{ display:block; height:100%; background:var(--rc); border-radius:999px; opacity:.8 }
.vers-shop{
  display:block; width:100%; margin-top:10px; padding:11px 14px; border-radius:999px; cursor:pointer;
  font-family:inherit; font-weight:800; font-size:.86rem; color:#fff; text-align:center;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18);
  transition:border-color .18s, background .18s, transform .16s var(--sortie, ease);
}
.vers-shop:hover{ border-color:var(--primary); background:rgba(255,255,255,.09) }
.vers-shop:active{ transform:scale(.98) }
/* quatre onglets : un peu plus serrés sur les petits écrans */
@media (max-width:400px){ .tab{ font-size:.7rem; padding:0 2px } }

/* --- Soutenir le restaurant : abonnements et avis Google, récompensés ----- */
.soutien{ margin-top:12px; padding-top:12px; border-top:1px dashed rgba(255,255,255,.14) }
.soutien-tete{ display:flex; align-items:baseline; gap:8px; margin-bottom:8px;
  font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.5); font-weight:800 }
.soutien-tete small{ text-transform:none; letter-spacing:0; font-weight:600; color:rgba(255,255,255,.35); margin-left:auto }
.soutien-liste{ display:grid; grid-template-columns:1fr; gap:8px }
@media (min-width:520px){ .soutien-liste{ grid-template-columns:1fr 1fr } }
.soutien-btn{
  display:flex; align-items:center; gap:8px; padding:10px 11px; min-height:46px;
  border-radius:4px 12px 4px 12px; cursor:pointer; text-align:left; color:#fff; font-family:inherit;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16);
  transition:transform .16s var(--sortie, ease), border-color .18s, background .18s;
  -webkit-tap-highlight-color:transparent;
}
.soutien-btn i{ font-style:normal; font-size:1.1rem; flex:0 0 auto }
.soutien-btn b{ flex:1; min-width:0; font-size:.84rem; font-weight:700; line-height:1.2 }
.soutien-btn em{ font-style:normal; flex:0 0 auto; font-size:.7rem; font-weight:800; letter-spacing:.04em;
  color:#0b0f17; background:var(--rc, var(--primary)); border-radius:999px; padding:3px 8px }
.soutien-btn:hover{ border-color:var(--rc, var(--primary)); background:rgba(255,255,255,.08); transform:translateY(-1px) }
.soutien-btn:active{ transform:scale(.97) }
.soutien-btn.fait{ opacity:.55; cursor:default; transform:none }
.soutien-btn.fait em{ background:rgba(255,255,255,.14); color:#fff }
.soutien-btn:disabled:not(.fait) em{ background:rgba(255,255,255,.14); color:#fff }

/* ==========================================================================
   POP-UP DE SOUTIEN — dès le scan
   ========================================================================== */
.pop-fond{
  position:fixed; inset:0; z-index:900; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(4,6,10,.78); opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.pop-fond.ouvert{ opacity:1; pointer-events:auto }
.pop-fond[hidden]{ display:none }
.pop{
  position:relative; width:100%; max-width:480px; padding:26px 20px calc(18px + env(safe-area-inset-bottom));
  border-radius:22px 22px 0 0; background:linear-gradient(180deg, #13161e, #0b0e15);
  border:1px solid var(--trait, rgba(255,255,255,.14)); border-bottom:0;
  box-shadow:0 -30px 80px -30px #000, 0 -1px 0 var(--lueur-forte, rgba(255,255,255,.3));
  transform:translateY(24px); transition:transform .32s cubic-bezier(.16,1,.3,1); text-align:center;
}
.pop-fond.ouvert .pop{ transform:none }
@media (min-width:600px){ .pop-fond{ align-items:center; padding:24px } .pop{ border-radius:22px; border-bottom:1px solid var(--trait, rgba(255,255,255,.14)) } }
.pop::before{
  content:''; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--primary), transparent); animation:balayage 4s ease-in-out infinite;
}
.pop-fermer{
  position:absolute; right:12px; top:12px; width:34px; height:34px; border-radius:10px; cursor:pointer;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.7); font-size:1rem;
}
.pop-cadeau{ font-size:44px; line-height:1; animation:vibe-pop .6s var(--sortie, ease) both; filter:drop-shadow(0 8px 20px rgba(226,178,74,.35)) }
.pop-oeil{ font-family:ui-monospace, Menlo, monospace; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--primary); margin:10px 0 4px }
.pop h2{ margin:0 0 8px; font-size:1.5rem; letter-spacing:-.02em; line-height:1.1 }
.pop h2 b{ color:var(--primary); font-size:1.9rem; text-shadow:0 0 22px var(--lueur-forte, transparent) }
.pop-txt{ margin:0 0 16px; font-size:.9rem; color:rgba(255,255,255,.62); line-height:1.5 }
.pop-txt b{ color:#fff }
.pop-liste{ display:flex; flex-direction:column; gap:8px; text-align:left }
.pop-btn{
  display:flex; align-items:center; gap:11px; padding:12px 13px; min-height:52px; cursor:pointer;
  border-radius:4px 14px 4px 14px; color:#fff; font-family:inherit; text-align:left;
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.16);
  transition:transform .16s var(--sortie, ease), border-color .18s, background .18s;
  animation:vibe-monte .35s var(--sortie, ease) both; -webkit-tap-highlight-color:transparent;
}
.pop-btn:nth-child(2){ animation-delay:.06s } .pop-btn:nth-child(3){ animation-delay:.12s } .pop-btn:nth-child(4){ animation-delay:.18s }
.pop-btn i{ font-style:normal; font-size:1.3rem; flex:0 0 auto }
.pop-btn b{ flex:1; font-size:.92rem; font-weight:700 }
.pop-btn em{ font-style:normal; flex:0 0 auto; font-size:.76rem; font-weight:800; color:#0b0f17;
  background:var(--primary); border-radius:999px; padding:5px 10px; box-shadow:0 0 14px -4px var(--lueur-forte, transparent) }
.pop-btn:hover{ border-color:var(--primary); background:rgba(255,255,255,.085); transform:translateY(-1px) }
.pop-btn:active{ transform:scale(.97) }
.pop-btn.fait{ opacity:.55; cursor:default }
.pop-btn.fait em{ background:rgba(255,255,255,.16); color:#fff }
.pop-tard{ margin-top:14px; background:none; border:0; color:rgba(255,255,255,.45); font-family:inherit;
  font-size:.86rem; font-weight:700; cursor:pointer; text-decoration:underline; padding:8px }
@media (prefers-reduced-motion: reduce){ .pop::before, .pop-cadeau, .pop-btn{ animation:none } }

/* ==========================================================================
   INSTALLER LE JEU / ACTIVER LES ALERTES — le guide qui tient la main
   ========================================================================== */
.inst-fond{ z-index:950 }
.pop.inst .pop-txt{ margin-bottom:14px }
.inst-etapes{
  list-style:none; counter-reset:etape; margin:0 0 6px; padding:0; text-align:left;
  display:flex; flex-direction:column; gap:8px;
}
.inst-etapes li{
  counter-increment:etape; display:flex; align-items:center; gap:12px; padding:11px 12px;
  border-radius:4px 14px 4px 14px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.14);
  animation:vibe-monte .35s var(--sortie, ease) both; position:relative;
}
.inst-etapes li:nth-child(2){ animation-delay:.08s } .inst-etapes li:nth-child(3){ animation-delay:.16s }
.inst-etapes li::before{
  content:counter(etape); position:absolute; left:-6px; top:-6px; width:20px; height:20px; border-radius:50%;
  background:var(--primary); color:#0b0f17; font-size:.7rem; font-weight:900; display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 12px -3px var(--lueur-forte, transparent);
}
.inst-ico{
  flex:0 0 48px; width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:#fff; color:#0a84ff; box-shadow:0 6px 18px -8px #000;
}
.inst-etapes li div{ flex:1; min-width:0 }
.inst-etapes b{ display:block; font-size:.92rem; font-weight:800; color:#fff; line-height:1.25 }
.inst-etapes small{ display:block; font-size:.76rem; color:rgba(255,255,255,.55); margin-top:2px; line-height:1.35 }
.inst-etapes small u{ text-decoration:none; color:var(--primary); font-weight:800 }
.inst-aide{
  display:flex; align-items:center; justify-content:center; gap:10px; margin:10px 0 0;
  font-size:.82rem; font-weight:700; color:rgba(255,255,255,.75);
}
.inst-fleche{
  font-size:1.6rem; line-height:1; color:var(--primary); text-shadow:0 0 16px var(--lueur-forte, transparent);
  animation:inst-rebond 1s ease-in-out infinite;
}
@keyframes inst-rebond{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(7px) } }
.inst-fleche--haut{ animation-name:inst-rebond-haut }
@keyframes inst-rebond-haut{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-7px) } }
@media (prefers-reduced-motion: reduce){ .inst-fleche, .inst-etapes li{ animation:none } }

/* ==========================================================================
   L'UNIVERS SUIT LE RANG
   --rang est posé sur body par le jeu. Chaque univers (1 à 5) teinte la trame
   de fond, le halo, les instruments — et ajoute des particules à partir du 3.
   ========================================================================== */
body{ --rang:#9AA7BE; --rang-lueur:rgba(154,167,190,.6) }
body[data-univers="2"] #app::before{ opacity:.22 }
body[data-univers="3"] #app::before{ opacity:.26; animation-duration:14s }
body[data-univers="4"] #app::before{ opacity:.3; animation-duration:11s }
body[data-univers="5"] #app::before{ opacity:.36; animation-duration:8s }
body[data-univers="2"] #app::after,
body[data-univers="3"] #app::after,
body[data-univers="4"] #app::after,
body[data-univers="5"] #app::after{
  background:radial-gradient(120% 70% at 50% -10%, var(--voile), transparent 60%),
             radial-gradient(90% 60% at 50% 110%, color-mix(in srgb, var(--rang) 16%, transparent), transparent 60%);
}
body[data-univers="4"] .tabbar, body[data-univers="5"] .tabbar{
  box-shadow:0 -1px 0 color-mix(in srgb, var(--rang) 45%, transparent);
}
body[data-univers="5"] .map-top .pill{ border-color:color-mix(in srgb, var(--rang) 45%, transparent) }
/* la pastille de points prend la couleur du rang : c'est le joueur, pas le restaurant */
.pill--pts{ border-color:color-mix(in srgb, var(--rang) 55%, transparent) !important;
  box-shadow:0 0 18px -6px var(--rang-lueur) }
/* particules d'ambiance */
#ambiance{ position:fixed; inset:0; z-index:2; pointer-events:none; overflow:hidden }
#ambiance i{
  position:absolute; bottom:-10px; border-radius:50%; background:var(--rang);
  opacity:0; box-shadow:0 0 8px var(--rang);
  animation:amb-monte linear infinite;
}
@keyframes amb-monte{
  0%{ transform:translateY(0) translateX(0); opacity:0 }
  10%{ opacity:.55 } 60%{ opacity:.35 }
  100%{ transform:translateY(-110vh) translateX(18px); opacity:0 }
}
@media (prefers-reduced-motion: reduce){ #ambiance{ display:none } }

/* ==========================================================================
   LA CARTE DE RANG — dans « Mes cadeaux »
   ========================================================================== */
.rang-carte{
  position:relative; overflow:hidden; padding:14px; margin-bottom:14px; border-radius:4px 20px 4px 20px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--rc) 14%, transparent), rgba(255,255,255,.03));
  border:1px solid color-mix(in srgb, var(--rc) 45%, transparent);
  box-shadow:0 20px 50px -30px var(--rc);
}
.rang-carte::after{ content:''; position:absolute; left:0; top:0; width:22px; height:22px;
  border-top:2px solid var(--rc); border-left:2px solid var(--rc); border-top-left-radius:4px; pointer-events:none }
.rang-tete{ display:flex; align-items:center; gap:12px; margin-bottom:10px }
.rang-ico{
  position:relative; width:58px; height:58px; flex:0 0 58px; display:grid; place-items:center;
  border-radius:4px 18px 4px 18px; background:rgba(0,0,0,.35); border:1px solid var(--rc);
  box-shadow:0 0 22px -6px var(--rc), inset 0 0 0 1px rgba(255,255,255,.05);
}
.rang-ico i{ font-style:normal; font-size:26px; filter:drop-shadow(0 0 8px var(--rc)) }
.rang-ico b{ position:absolute; right:-6px; bottom:-6px; min-width:22px; height:22px; padding:0 6px;
  border-radius:999px; background:var(--rc); color:#0b0f17; font-size:.72rem; font-weight:800;
  display:grid; place-items:center; box-shadow:0 0 10px var(--rc) }
.rang-txt{ display:flex; flex-direction:column; min-width:0 }
.rang-txt small{ font-family:ui-monospace, Menlo, monospace; font-size:.64rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--rc) }
.rang-txt b{ font-size:1.15rem; font-weight:800; letter-spacing:-.01em; line-height:1.15 }
.rang-txt em{ font-style:normal; font-size:.76rem; color:rgba(255,255,255,.5) }
.rang-carte .nv-barre i{ background:var(--rc); box-shadow:0 0 12px var(--rc) }
.rang-echelle{ display:flex; gap:5px; margin:10px 0 12px }
.rang-echelle i{ flex:1; height:4px; border-radius:999px; background:rgba(255,255,255,.1) }
.rang-echelle i.fait{ background:var(--rc); opacity:.55 }
.rang-echelle i.ici{ background:var(--rc); box-shadow:0 0 10px var(--rc) }
.rang-suivant{ display:flex; gap:10px; align-items:center; padding:10px 12px; border-radius:4px 14px 4px 14px;
  background:rgba(0,0,0,.28); border:1px dashed rgba(255,255,255,.16) }
.rs-ico{ font-size:20px; flex:0 0 auto; opacity:.8 }
.rs-txt b{ display:block; font-size:.86rem }
.rs-txt small{ font-size:.76rem; color:rgba(255,255,255,.5); line-height:1.35 }

/* ==========================================================================
   LES MÉDAILLONS
   ========================================================================== */
.medaillons{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px }
@media (min-width:480px){ .medaillons{ grid-template-columns:repeat(auto-fill, minmax(110px,1fr)) } }
.medaillon{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:10px 6px 9px; border:0; background:transparent; color:#fff; font-family:inherit; cursor:pointer;
  border-radius:14px; -webkit-tap-highlight-color:transparent;
  transition:transform .18s var(--sortie, ease), background .18s;
}
.medaillon:hover{ background:rgba(255,255,255,.04) }
.medaillon:active{ transform:scale(.95) }
.md-anneau{
  position:relative; width:72px; height:72px; border-radius:50%; display:grid; place-items:center;
  --metal-a:#5a6170; --metal-b:#2b303b; --metal-c:#7c8496;
  background:conic-gradient(from 200deg, var(--metal-a), var(--metal-b) 30%, var(--metal-c) 50%, var(--metal-b) 72%, var(--metal-a));
  box-shadow:0 8px 20px -10px #000, inset 0 0 0 1px rgba(255,255,255,.08);
}
.md-anneau::before{                 /* le reflet qui glisse sur le métal */
  content:''; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.55) 48%, transparent 58%);
  background-size:220% 100%; animation:md-reflet 4.5s ease-in-out infinite; mix-blend-mode:screen; opacity:.7;
}
@keyframes md-reflet{ 0%,60%{ background-position:120% 0 } 100%{ background-position:-120% 0 } }
.md-anneau svg{ position:absolute; inset:-3px; width:calc(100% + 6px); height:calc(100% + 6px); transform:rotate(-90deg) }
.md-piste{ fill:none; stroke:rgba(255,255,255,.08); stroke-width:4 }
.md-arc{ fill:none; stroke:var(--primary); stroke-width:4; stroke-linecap:round;
  filter:drop-shadow(0 0 4px var(--lueur-forte, transparent)); transition:stroke-dasharray .8s var(--sortie, ease) }
.md-coeur{
  position:relative; width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(circle at 35% 30%, #262c3a, #0b0e15 70%);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.8), inset 0 -1px 0 rgba(255,255,255,.08);
}
.md-coeur i{ font-style:normal; font-size:24px; line-height:1; filter:grayscale(1); opacity:.28; transition:filter .3s, opacity .3s }
.md-coeur u{ position:absolute; right:-2px; bottom:-2px; font-size:13px; text-decoration:none;
  background:#0b0e15; border-radius:50%; padding:2px; line-height:1 }
.medaillon b{ font-size:.74rem; font-weight:800; color:rgba(255,255,255,.45); margin-top:4px }
.medaillon small{ font-size:.64rem; color:rgba(255,255,255,.35); font-variant-numeric:tabular-nums }
.md-pips{ display:flex; gap:4px; margin-top:2px }
.md-pips i{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.12) }
.md-pips i.t1{ background:#CD7F32 } .md-pips i.t2{ background:#C0C6D6 } .md-pips i.t3{ background:#F5C542; box-shadow:0 0 6px #F5C542 }

/* les trois métaux */
.medaillon.t1 .md-anneau{ --metal-a:#8a4f1d; --metal-b:#c8813c; --metal-c:#f0b075 }
.medaillon.t2 .md-anneau{ --metal-a:#7d8698; --metal-b:#c9d0dd; --metal-c:#ffffff }
.medaillon.t3 .md-anneau{ --metal-a:#8a6314; --metal-b:#e2b24a; --metal-c:#fff0b8;
  box-shadow:0 0 26px -6px rgba(245,197,66,.85), 0 8px 20px -10px #000 }
.medaillon.t1 .md-coeur i, .medaillon.t2 .md-coeur i, .medaillon.t3 .md-coeur i{ filter:none; opacity:1 }
.medaillon.t1 b, .medaillon.t2 b, .medaillon.t3 b{ color:#fff }
.medaillon.t1 small{ color:#e6a86a } .medaillon.t2 small{ color:#cfd6e6 } .medaillon.t3 small{ color:#f5d98a }
.medaillon.t3 .md-coeur{ box-shadow:inset 0 2px 6px rgba(0,0,0,.8), 0 0 18px -4px rgba(245,197,66,.6) }
.medaillon.grand{ pointer-events:none; padding:0 }
.medaillon.grand .md-anneau{ width:120px; height:120px }
.medaillon.grand .md-coeur{ width:92px; height:92px }
.medaillon.grand .md-coeur i{ font-size:42px }
.medaillon.grand b{ font-size:1.05rem; margin-top:8px }

/* la fiche */
.pop--medaille{ text-align:center }
.fm-haut{ display:flex; justify-content:center; margin:6px 0 10px }
.fm-txt{ margin:0 0 14px; font-size:.9rem; color:rgba(255,255,255,.62); line-height:1.5 }
.fm-txt b{ color:#fff }
.fm-paliers{ display:flex; flex-direction:column; gap:8px; text-align:left }
.fm-palier{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:4px 14px 4px 14px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); opacity:.5 }
.fm-palier.fait, .fm-palier.encours{ opacity:1 }
.fm-palier.encours{ border-color:var(--primary); box-shadow:0 0 0 1px var(--lueur, transparent) }
.fp-anneau{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; flex:0 0 34px;
  font-weight:800; font-size:.86rem; color:#0b0f17; background:#3a404c }
.fm-palier.t1 .fp-anneau{ background:#c8813c } .fm-palier.t2 .fp-anneau{ background:#c9d0dd } .fm-palier.t3 .fp-anneau{ background:#e2b24a }
.fp-txt b{ display:block; font-size:.9rem }
.fp-txt small{ font-size:.76rem; color:rgba(255,255,255,.5) }

/* ==========================================================================
   NOUVEAU RANG — la cérémonie
   ========================================================================== */
.rang-up{
  position:fixed; inset:0; z-index:950; display:grid; place-items:center; padding:22px;
  background:radial-gradient(80% 60% at 50% 40%, color-mix(in srgb, var(--rc) 22%, #05070b), #05070b 75%);
  opacity:0; pointer-events:none; transition:opacity .35s ease;
}
.rang-up.ouvert{ opacity:1; pointer-events:auto }
.rang-up[hidden]{ display:none }
.ru-lumiere{
  position:absolute; left:50%; top:46%; width:380px; height:380px; margin:-190px 0 0 -190px; border-radius:50%;
  background:conic-gradient(from 0deg, transparent, color-mix(in srgb, var(--rc) 35%, transparent), transparent 30%,
             color-mix(in srgb, var(--rc) 30%, transparent), transparent 60%, color-mix(in srgb, var(--rc) 35%, transparent), transparent);
  animation:ru-tourne 9s linear infinite; filter:blur(18px); opacity:.8; pointer-events:none;
}
@keyframes ru-tourne{ to{ transform:rotate(360deg) } }
.ru-corps{ position:relative; text-align:center; max-width:420px; width:100%;
  animation:ecran-entre .5s var(--sortie, ease) both }
.ru-oeil{ font-family:ui-monospace, Menlo, monospace; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--rc); text-shadow:0 0 14px var(--rc) }
.ru-canvas{ width:260px; height:300px; margin:6px auto 0; display:block;
  filter:drop-shadow(0 20px 30px rgba(0,0,0,.7)) }
.ru-ico{ font-size:34px; margin-top:-14px; filter:drop-shadow(0 0 12px var(--rc)); animation:vibe-pop .6s var(--sortie, ease) both }
.rang-up h2{ margin:4px 0 2px; font-size:2rem; letter-spacing:-.03em; line-height:1.05;
  text-shadow:0 0 24px color-mix(in srgb, var(--rc) 60%, transparent) }
.ru-niveau{ font-family:ui-monospace, Menlo, monospace; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5) }
.ru-gagne{ margin:14px 0 18px; font-size:.95rem; color:rgba(255,255,255,.7) }
.ru-gagne b{ color:#fff }
.ru-btn{ background:var(--rc); color:#0b0f17; border:0; box-shadow:0 0 30px -6px var(--rc) }
@media (prefers-reduced-motion: reduce){ .ru-lumiere, .md-anneau::before, .ru-ico{ animation:none } }

/* ==========================================================================
   PAS DE POSITION — on explique le geste, sur ce téléphone
   ========================================================================== */
.geo-aide{ padding:14px 4px 6px; text-align:center }
.geo-aide-ico{ font-size:34px; line-height:1 }
.geo-aide h3{ margin:8px 0 6px; font-size:1.1rem }
.geo-aide p{ margin:0 0 12px; font-size:.88rem; color:rgba(255,255,255,.62); line-height:1.45 }
.geo-aide ol{ margin:0 0 14px; padding:0; list-style:none; counter-reset:g; text-align:left; display:flex; flex-direction:column; gap:6px }
.geo-aide li{ counter-increment:g; position:relative; padding:9px 10px 9px 38px; font-size:.84rem; line-height:1.4;
  border-radius:4px 12px 4px 12px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.14) }
.geo-aide li::before{ content:counter(g); position:absolute; left:10px; top:9px; width:20px; height:20px; border-radius:50%;
  background:var(--primary); color:#0b0f17; font-size:.7rem; font-weight:900; display:flex; align-items:center; justify-content:center }
.geo-aide li b{ color:#fff }