/* Expérience (XP), rangs et visite guidée — DA « tiramisu » (docs/design/DA-tiramisu.md) : seulement les jetons de glyphum.css,
   donc les mêmes paires texte / fond (vérifiées par test-theme-contrast) en clair comme en sombre. Chargé après glyphum.css. */

/* ---- médaille de rang : chiffre romain sur caramel */
.xp-medal {
  display: inline-grid; place-items: center; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent-2); color: var(--on-accent-2); box-shadow: inset 0 -2px 0 var(--accent-2-press);
  font-family: var(--font-display); font-size: 12px; font-weight: 800; line-height: 1; letter-spacing: 0;
}
.xp-medal.small { width: 34px; height: 34px; font-size: 14px; }
.xp-medal.large { width: 88px; height: 88px; font-size: 32px; box-shadow: inset 0 -5px 0 var(--accent-2-press); animation: party-pop var(--t-party) var(--pop) both; }

/* ---- pastille de rang (barre du haut, à côté de la flamme) */
.rank-pill {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px 0 8px; border-radius: 12px; border: 0; cursor: pointer;
  background: var(--surface-2); color: var(--text); font-family: var(--font-ui); font-size: 14px; font-weight: 800;
}
.rank-pill:empty { display: none; }
.rank-pill:hover { background: var(--accent-2-tint); }
/* ordinateur étroit et téléphone : la médaille seule, pour que la barre du haut ne déborde pas */
@media (max-width: 1100px) { .rank-pill-name { display: none; } .rank-pill { padding: 0; background: none; } .rank-pill:hover { background: none; } }
@media (max-width: 780px) { .rank-pill { height: 40px; } }

/* ---- accueil : « Aujourd'hui : N XP » */
.home-today-xp { margin-top: 10px; }
.home-today-xp strong { color: var(--text); }

/* ---- bilan de lecture et cours d'écriture */
.reading-recap-xp:empty { display: none; }
.reading-recap-xp { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 4px 0 14px; padding: 12px 14px; border-radius: 14px; background: var(--accent-2-tint); }
.reading-recap-xp strong { font-family: var(--font-display); font-size: 22px; color: var(--text); }
.reading-recap-xp span { color: var(--muted); font-size: 13px; font-weight: 600; }
.cr-xp { margin: 6px 0; font-family: var(--font-display); font-size: 20px; }

/* ---- fin de séance : 4 chiffres, puis la barre vers le rang suivant */
.celebration-stats.has-xp { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 540px; }
@media (max-width: 520px) { .celebration-stats.has-xp { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.xp-progress { width: 100%; max-width: 540px; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.xp-progress-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.xp-progress-head strong { font-family: var(--font-display); font-size: 18px; }
.xp-progress-head span:last-child { color: var(--muted); font-size: 13px; font-weight: 600; }
.xp-bar { height: 12px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.xp-bar > span { display: block; height: 100%; width: var(--to); border-radius: inherit; background: var(--accent-2); animation: xp-fill 900ms var(--ease) 300ms both; }
@keyframes xp-fill { from { width: var(--from); } to { width: var(--to); } }

/* ---- profil : carte « Expérience » */
.profile-xp-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.profile-xp-card:empty { display: none; }
.xp-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.xp-card-head h2 { margin: 0; font-size: 22px; }
.xp-langs { display: flex; flex-wrap: wrap; gap: 8px; }
.xp-lang { display: inline-flex; gap: 8px; align-items: baseline; padding: 6px 12px; border-radius: 999px; background: var(--surface-2); font-size: 13px; color: var(--text); }
.xp-lang strong { font-weight: 800; }
.xp-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: end; }
.xp-week-day { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.xp-week-value { min-height: 16px; font-size: 12px; font-weight: 700; color: var(--muted); }
.xp-week-bar { width: 100%; max-width: 34px; height: 72px; border-radius: 8px; background: var(--surface-2); display: flex; align-items: flex-end; overflow: hidden; }
.xp-week-bar i { display: block; width: 100%; background: var(--accent-2); border-radius: 8px 8px 0 0; }
.xp-week-label { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: capitalize; }
.xp-week-day.today .xp-week-label { color: var(--text); font-weight: 800; }
.friend-xp-row:not(.hidden) { margin: 14px 0; }
.friend-xp { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
.friend-xp > div { display: flex; flex-direction: column; gap: 2px; }
.friend-xp span { color: var(--muted); font-size: 13px; font-weight: 600; }

/* ---- fenêtres : montée de rang, proposition de la visite */
.xp-overlay { position: fixed; inset: 0; z-index: 9500; display: grid; place-items: center; padding: 16px; background: rgba(26, 19, 16, .55); animation: fade-in 200ms linear both; }
.xp-modal {
  position: relative; width: min(420px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow-lift); padding: 28px 22px 22px;
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
}
.xp-modal h2 { margin: 0; font-size: 28px; }
.xp-modal p { margin: 0; color: var(--muted); line-height: 1.5; }
.xp-modal .btn { width: 100%; margin-top: 6px; }
.xp-modal-close { position: absolute; top: 12px; right: 12px; }
.tour-offer-rank { display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); }
.xp-modal .tour-offer-rank, .xp-modal .tour-offer-rank strong { color: var(--text); }
.tour-offer-actions { display: flex; flex-direction: column; gap: 4px; width: 100%; margin-top: 6px; }

/* ---- Thot : rond crème avec le signe Glyphum */
.tour-thot { display: inline-grid; place-items: center; flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; background: var(--surface-2); border: 2px solid var(--accent-2); }
.tour-thot .brand-mark { width: 26px; height: 26px; flex-basis: 26px; }
.tour-thot.large { width: 76px; height: 76px; border-width: 3px; }
.tour-thot.large .brand-mark { width: 42px; height: 42px; flex-basis: 42px; }

/* ---- visite guidée : écran assombri sauf la découpe ; caches transparents qui arrêtent les gestes hors de l'élément éclairé */
.tour-layer { position: fixed; inset: 0; z-index: 9000; pointer-events: none; }
.tour-block { position: fixed; pointer-events: auto; background: transparent; }
.tour-hole {
  position: fixed; border-radius: 14px; pointer-events: none; box-shadow: 0 0 0 9999px rgba(26, 19, 16, .62), 0 0 0 3px var(--accent-2);
  transition: left var(--t-progress) var(--ease), top var(--t-progress) var(--ease), width var(--t-progress) var(--ease), height var(--t-progress) var(--ease);
}
.tour-hole.is-empty { box-shadow: 0 0 0 9999px rgba(26, 19, 16, .62); }
html[data-theme="dark"] .tour-hole { box-shadow: 0 0 0 9999px rgba(0, 0, 0, .7), 0 0 0 3px var(--accent-2); }
html[data-theme="dark"] .tour-hole.is-empty { box-shadow: 0 0 0 9999px rgba(0, 0, 0, .7); }
.tour-bubble {
  position: fixed; pointer-events: auto; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 20px;
  box-shadow: var(--shadow-lift); padding: 16px; display: flex; flex-direction: column; gap: 12px; animation: tour-in 260ms var(--pop) both;
}
.tour-guide { display: flex; align-items: center; gap: 12px; }
.tour-guide > div { display: flex; flex-direction: column; gap: 2px; }
.tour-guide strong { font-family: var(--font-display); font-size: 18px; }
.tour-count { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.tour-text { font-size: 15px; line-height: 1.5; }
.tour-text ul { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.tour-actions { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tour-actions .btn { min-height: 42px; }
.tour-actions .tour-skip { background: transparent; }
@keyframes tour-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .tour-hole { transition: none; }
  .xp-bar > span { animation: none; }
  .xp-medal.large, .tour-bubble { animation: fade-in 200ms linear both !important; }
}