/* ═══════════════════════════════════════════════════════════════════════
   Antico Regalo — composants applicatifs, posés sur le système du site (styles.css, DESIGN.md).
   Chargé APRÈS styles.css. Tout est préfixé r- (ou regalo-) ; les alias .pos-* servent
   aux pages caisse (table, ticket, mes commandes) reprises d'antico-regalo.com.
   Aucune couleur de texte propre : tout vient des rôles de styles.css (§ 2-3). Les --r-* ci-dessous ne
   sont que des alias de ces rôles, gardés pour les pages et table.css qui les emploient. Les seules
   valeurs de la palette écrites ici sont des FONDS décoratifs (porte-monnaie vert du store, carte à
   tampons crème, quartiers de la roue), toujours posés avec le ton qui va avec (.tone-dark / .tone-light).

   Sommaire
     1. Alias et tons           9. Codes, trophées, jauges        17. Boutique
     2. Cadre de page, étapes  10. Toast, modale, gain, code     18. Parrainage
     3. Sous-navigation        11. Accès rapide, bouton flottant 19. Page de table + alias pos-*
     4. Cartes                 12. Porte-monnaie (Mon espace)    20. Connexion, pages d'état
     5. Grilles, chiffres      13. Carte à tampons               21. Mode d'emploi
     6. Boutons                14. Bons (tickets)                22. Graphique
     7. Formulaires            15. La roue                       23. Mouvement réduit, impression
     8. Messages, listes       16. Classement, trophées
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Tons : .section--ink / --olive (sombres) ou .section--paper (clair) posent les rôles, et un
   îlot .tone-light / .tone-dark dans la page les redéfinit : les alias suivent à chaque niveau. ── */
.regalo-section,
.regalo-section .tone-light,
.regalo-section .tone-dark,
.r-modal__box,
.r-toast {
  --r-text: var(--text);
  --r-muted: var(--text-muted);
  --r-surface: var(--surface);
  --r-surface-strong: var(--surface-strong);
  --r-line: var(--line);
  --r-line-strong: var(--line-strong);
  --r-accent: var(--accent);
  --r-accent-deep: var(--accent-deco);
  --r-input-bg: var(--input-bg);
  --r-ok: var(--ok);
  --r-ko: var(--ko);
  --r-warn: var(--warn);
}

/* ── 2. Cadre de page ── */
.regalo-section {
  padding-top: clamp(2rem, 1.4rem + 3vw, 3.6rem);
  padding-bottom: clamp(4rem, 8vw, 6rem);
  min-height: calc(100vh - var(--header-height));
  color: var(--r-text);
}
/* Couleur du texte par défaut, à spécificité nulle (:where) : une classe posée sur l'élément
   (.eyebrow, .r-muted, .r-help, .lead…) garde la main. */
:where(.regalo-section) :where(p, li, h1, h2, h3, h4, label, legend, dt, dd) { color: var(--r-text); }
.regalo-section a:not(.button) { color: var(--r-accent); }
.regalo-page main { min-height: 40vh; }
/* Le bouton flottant « Ma commande » ne cache jamais la fin de la page. */
.regalo-page.has-fab .regalo-section { padding-bottom: calc(clamp(4rem, 8vw, 6rem) + 4rem); }

/* Colonne applicative : 560 px (téléphone d'abord), moyenne (connexion), ou pleine largeur. */
.regalo-wrap { max-width: 560px; }
.regalo-wrap--medium { max-width: 64rem; }
.regalo-wrap--wide { max-width: var(--container); }

.regalo-heading { margin-bottom: clamp(1.4rem, 1rem + 1.5vw, 2rem); }
.regalo-heading h1 { font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.4rem); line-height: 1.02; margin: 0.35rem 0 0.55rem; }
.regalo-heading .lead { margin: 0; max-width: 40rem; color: var(--r-muted); font-size: var(--fs-lead); line-height: 1.55; }
.regalo-page .section-heading h2 { color: inherit; }

/* Étapes de l'inscription (layout.php, option « steps ») : quatre pastilles reliées par un filet. */
.r-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.25rem;
  margin: 0 0 1.4rem;
  padding: 0;
  list-style: none;
  counter-reset: r-step;
}
.r-steps li {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--r-muted);
}
.r-steps li::after { /* filet vers l'étape suivante */
  content: "";
  position: absolute;
  top: 1rem;
  left: calc(50% + 1.25rem);
  right: calc(-50% + 1.25rem);
  height: 2px;
  border-radius: 2px;
  background: var(--r-line-strong);
}
.r-steps li:last-child::after { content: none; }
.r-steps__n {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1.5px solid var(--r-line-strong);
  background: var(--r-surface-strong);
  color: var(--r-muted);
  font-size: 0.85rem;
  font-variant-numeric: lining-nums tabular-nums;
}
.r-steps .is-done { color: var(--r-text); }
.r-steps .is-done .r-steps__n { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }
.r-steps .is-done::after { background: var(--primary); }
.r-steps [aria-current="step"] { color: var(--r-text); }
.r-steps [aria-current="step"] .r-steps__n { border-color: var(--accent-deco); box-shadow: 0 0 0 4px var(--focus-ring); color: var(--r-text); }

/* ── 3. Sous-navigation de l'app (ton sombre : class="regalo-nav tone-dark" dans layout.php) ── */
.regalo-nav {
  position: sticky;
  top: var(--header-height);
  z-index: var(--z-sticky);
  background: rgba(28, 20, 15, 0.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.regalo-nav__row {
  display: flex;
  gap: 0.3rem;
  overflow-x: auto;
  padding: 0.4rem 0;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
  mask-image: linear-gradient(90deg, #000 92%, transparent);
}
.regalo-nav__row::-webkit-scrollbar { display: none; }
.regalo-nav__row a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.95rem;
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.regalo-nav__row a:hover { background: var(--surface-strong); color: var(--text); }
.regalo-nav__row a:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; color: var(--text); }
.regalo-nav__row a[aria-current="page"] { background: var(--primary); color: var(--on-primary); box-shadow: 0 6px 18px -10px rgba(230, 203, 146, 0.7); }
.regalo-beta { background: var(--oro-300); color: var(--espresso-950); text-align: center; padding: 0.55rem 1rem; font-size: 0.85rem; font-weight: 700; }
.regalo-beta > div { background: transparent !important; color: inherit !important; padding: 0 !important; }

/* ── 4. Cartes ── */
.r-card {
  position: relative;
  background: var(--r-surface);
  border: 1px solid var(--r-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  margin-bottom: 1rem;
  box-shadow: var(--shadow-ring), var(--shadow-sm);
}
.r-card--strong { background: var(--r-surface-strong); }
.r-card--accent { border-color: var(--accent-line); background: linear-gradient(135deg, var(--accent-tint), transparent 60%), var(--r-surface); }
.r-card--center { text-align: center; }
.r-card--flush { padding: 0; overflow: hidden; }
.r-card--danger { border-color: var(--ko-bg); background: linear-gradient(135deg, var(--ko-bg), transparent 55%), var(--r-surface); }
.r-card > :first-child { margin-top: 0; }
.r-card form + form { margin-top: 0.7rem; }
.r-card .button--block + .r-help, .r-card .button--block + .r-status { margin-top: 0.75rem; }
.r-card > :last-child { margin-bottom: 0; }
.r-card h2, .r-card h3 { font-family: var(--font-serif); font-weight: 600; line-height: 1.1; margin: 0 0 0.6rem; }
.r-card h2 { font-size: 1.7rem; }
.r-card h3 { font-size: 1.3rem; }
.r-card__label, .r-card .r-card__label { display: block; font-family: var(--font-sans); font-size: 0.72rem; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; color: var(--label); font-weight: 800; margin: 0 0 0.6rem; }
.r-card__head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-bottom: 0.6rem; }
.r-card__head .r-card__label { margin: 0; }
/* Titre de rubrique entre deux cartes (« Accès rapide », rayons de la boutique, groupes de bons). */
.r-section-title { display: flex; align-items: center; gap: 0.6rem; margin: 1.8rem 0 0.8rem; font-family: var(--font-sans); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--label); }
.r-section-title::after { content: ""; flex: 1; height: 1px; background: var(--r-line); }
.r-section-title:first-child { margin-top: 0; }
.r-muted { color: var(--r-muted); }
.r-center { text-align: center; }
.r-small { font-size: var(--fs-small); }
.hidden { display: none !important; }
.num { font-variant-numeric: lining-nums tabular-nums; }

/* ── 5. Grilles et chiffres ── */
.r-grid { display: grid; gap: 0.9rem; }
.r-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.r-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .r-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.r-grid + .r-card, .r-grid + .r-section-title { margin-top: 1rem; }
.r-stat { display: grid; align-content: center; gap: 0.3rem; text-align: center; padding: 0.95rem 0.6rem; background: var(--r-surface); border: 1px solid var(--r-line); border-radius: var(--radius-md); }
.r-stat__n { display: block; font-family: var(--font-serif); font-size: clamp(1.8rem, 1.5rem + 1vw, 2.2rem); font-weight: 700; line-height: 1; color: var(--r-accent); font-variant-numeric: lining-nums tabular-nums; }
.r-stat__l { display: block; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--r-muted); font-weight: 700; }
/* Petits compteurs en bande (Mon espace, profil) : se replient seuls. */
.r-kpis { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.r-kpis .r-stat { flex: 1 1 6.6rem; padding: 0.8rem 0.5rem; }
.r-kpis .r-stat__n { font-size: 1.75rem; }
.r-tokens { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.r-tokens__n { font-family: var(--font-serif); font-size: 2.6rem; font-weight: 700; line-height: 1; color: var(--r-accent); font-variant-numeric: lining-nums tabular-nums; }
/* Solde en une ligne (roue, boutique) : pastille + actions. */
.r-balance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding: 0.75rem 0.85rem 0.75rem 1.1rem;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--accent-tint), transparent 70%), var(--r-surface);
}
.r-balance__n { display: inline-flex; align-items: baseline; gap: 0.45rem; margin: 0; font-weight: 700; color: var(--r-muted); }
.r-balance__n strong { font-family: var(--font-serif); font-size: 2rem; line-height: 1; color: var(--r-accent); font-variant-numeric: lining-nums tabular-nums; }
.r-balance .r-actions { margin: 0; }
@media (max-width: 480px) { .r-balance { border-radius: var(--radius-lg); } }

/* ── 6. Boutons : .button et ses variantes (--gold, --danger, --sm, --block…) sont dans styles.css (§ 8b).
   Dans l'app, même le petit bouton garde une cible tactile de 44 px. ── */
.regalo-page .button--sm { min-height: 2.75rem; }
.r-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.r-actions--center { justify-content: center; }
.r-link { color: var(--r-accent); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 480px) { .r-actions > .button { flex: 1 1 auto; } }
/* Attente d'une réponse (regalo.js : formulaire envoyé, appel en cours) : un anneau discret tourne. */
.button[aria-busy="true"], .pos-btn[aria-busy="true"] { position: relative; color: transparent !important; pointer-events: none; }
.button[aria-busy="true"]::after, .pos-btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  border: 2px solid var(--btn-fg, currentColor);
  border-right-color: transparent;
  animation: r-spin 0.7s linear infinite;
}
@keyframes r-spin { to { transform: rotate(360deg); } }

/* ── 7. Formulaires (mêmes règles que .field / .input de styles.css § 8f) ── */
.r-field { margin-bottom: 1rem; }
.r-field label, .r-field legend { display: block; margin-bottom: 0.4rem; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--r-muted); }
fieldset.r-field { margin-inline: 0; padding: 0; border: 0; min-width: 0; }
.r-field input:not([type="checkbox"]):not([type="radio"]), .r-field select, .r-field textarea, .r-input {
  width: 100%;
  min-height: 3.1rem;
  box-sizing: border-box;
  font: inherit;
  font-size: 1.05rem;
  padding: 0.75rem 0.95rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--input-border);
  background: var(--r-input-bg);
  color: var(--r-text);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.r-field input[readonly] { background: var(--surface-sunken); }
.r-field input::placeholder, .r-field textarea::placeholder, .r-input::placeholder { color: var(--r-muted); opacity: 1; }
.r-field input:focus, .r-field select:focus, .r-field textarea:focus, .r-input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-ring); }
.r-field [aria-invalid="true"] { border-color: var(--r-ko); box-shadow: 0 0 0 3px var(--ko-bg); }
.r-field textarea { min-height: 7rem; resize: vertical; }
.r-field input[type="file"] { padding: 0.6rem; font-size: 0.95rem; }
.r-field--inline { display: flex; align-items: flex-start; gap: 0.75rem; min-height: 2.75rem; padding: 0.35rem 0; }
.r-field--inline label { margin: 0; padding-top: 0.15rem; text-transform: none; letter-spacing: 0; font-size: 0.97rem; font-weight: 600; color: var(--r-text); cursor: pointer; }
.r-field input[type="checkbox"], .r-field input[type="radio"] { flex: none; width: 1.3rem; height: 1.3rem; margin: 0.2rem 0 0; accent-color: var(--primary); cursor: pointer; }
.r-help { font-size: var(--fs-small); color: var(--r-muted); margin: 0.35rem 0 0; line-height: 1.55; }
.r-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
@media (max-width: 480px) { .r-row { grid-template-columns: 1fr; } }
.r-code-input { font-family: var(--font-mono); letter-spacing: 0.35em; text-align: center; font-size: 1.5rem !important; text-transform: uppercase; }
/* Interrupteur (cases des paramètres) : une vraie case à cocher, dessinée en glissière. */
.r-field input.r-switch {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  width: 3rem;
  height: 1.75rem;
  margin: 0;
  border-radius: var(--radius-pill);
  border: 1px solid var(--input-border);
  background: var(--surface-sunken);
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.r-field input.r-switch::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(1.75rem - 8px);
  height: calc(1.75rem - 8px);
  border-radius: 50%;
  background: var(--r-muted);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease-spring), background-color var(--dur) var(--ease-out);
}
.r-field input.r-switch:checked { background: var(--primary); border-color: var(--primary); }
.r-field input.r-switch:checked::before { transform: translateX(1.25rem); background: var(--on-primary); }
.r-field input.r-switch:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.r-field--inline:has(.r-switch) { align-items: center; justify-content: space-between; flex-direction: row-reverse; gap: 1rem; padding: 0.55rem 0; border-top: 1px dashed var(--r-line); }
.r-field--inline:has(.r-switch):first-of-type { border-top: 0; }
.r-field--inline:has(.r-switch) label { flex: 1; padding: 0; }

/* ── 8. Messages, badges, listes (mêmes couleurs que .badge / .notice de styles.css) ── */
.r-badge { display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--font-sans); line-height: 1.4; padding: 0.28rem 0.72rem; border-radius: var(--radius-pill); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.03em; background: var(--accent-tint); color: var(--r-accent); white-space: nowrap; }
.r-badge--ok { background: var(--ok-bg); color: var(--r-ok); }
.r-badge--ko { background: var(--ko-bg); color: var(--r-ko); }
.r-badge--warn { background: var(--warn-bg); color: var(--r-warn); }
.r-badge--neutral { background: var(--surface-sunken); color: var(--text-soft); }
.r-alert { padding: 0.85rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--r-line); border-left: 4px solid var(--r-accent); background: var(--r-surface); margin-bottom: 1rem; font-size: 0.95rem; line-height: 1.55; }
/* Avec une icône (span.r-alert__icon + p) : icône à gauche, texte à côté. Sans icône, un bloc de texte simple. */
.r-alert:has(> .r-alert__icon) { display: flex; gap: 0.6rem; align-items: flex-start; }
.r-alert:has(> .r-alert__icon) > * { margin: 0; }
.r-alert--ok { border-color: var(--r-ok); background: var(--ok-bg); color: var(--r-ok); }
.r-alert--ko { border-color: var(--r-ko); background: var(--ko-bg); color: var(--r-ko); }
.r-alert--warn { border-color: var(--r-warn); background: var(--warn-bg); color: var(--r-warn); }
.r-alert--ok, .r-alert--ko, .r-alert--warn { border-width: 1px 1px 1px 4px; }
.r-alert:not(.hidden) { animation: r-rise var(--dur) var(--ease-out) both; }
.r-alert__icon { flex: none; font-size: 1.1rem; line-height: 1.4; }
.r-status { text-align: center; font-size: 0.9rem; color: var(--r-muted); min-height: 1.4em; margin: 0.6rem 0 0; }
.r-status.ko { color: var(--r-ko); font-weight: 600; }

.r-list { list-style: none; margin: 0; padding: 0; }
.r-list li { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; padding: 0.75rem 0; border-top: 1px dashed var(--r-line-strong); }
.r-list li:first-child { border-top: 0; }
.r-list li > span:last-child { white-space: nowrap; font-weight: 700; color: var(--r-accent); }
.r-list small { display: block; color: var(--r-muted); font-weight: 400; font-size: var(--fs-small); line-height: 1.5; }
.r-list--icons li { justify-content: flex-start; }
.r-list--icons li > span:last-child { white-space: normal; font-weight: 400; color: inherit; }
.r-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.r-table th, .r-table td { padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--r-line); text-align: left; vertical-align: top; }
.r-table th { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--label); }
.r-table-wrap { overflow-x: auto; }

/* ── 9. Codes, trophées, jauges, apparitions ── */
.r-code { display: inline-block; font-family: var(--font-mono); font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2rem); font-weight: 600; letter-spacing: 0.18em; padding: 0.45rem 0.9rem 0.45rem 1.08rem; border-radius: var(--radius-sm); background: var(--surface-sunken); border: 1px dashed var(--r-line-strong); color: var(--r-text); white-space: nowrap; }
.r-trophy { display: grid; grid-template-columns: 3.2rem 1fr; gap: 0.8rem; align-items: center; padding: 0.7rem 0; border-top: 1px dashed var(--r-line-strong); }
.r-trophy:first-child { border-top: 0; }
.r-trophy__icon { width: 3.2rem; height: 3.2rem; display: grid; place-items: center; font-size: 1.6rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--accent-tint), transparent 70%), var(--r-surface-strong); border: 1.5px solid var(--accent-line); }
.r-trophy__icon img { width: 2rem; height: 2rem; object-fit: contain; }
.r-trophy--locked .r-trophy__icon { filter: grayscale(1); opacity: 0.55; border-style: dashed; border-color: var(--r-line-strong); }
.r-trophy--locked strong { color: var(--r-muted); }
.r-progress { display: block; height: 0.5rem; margin-top: 0.4rem; border-radius: var(--radius-pill); background: var(--surface-sunken); overflow: hidden; box-shadow: inset 0 0 0 1px var(--r-line); }
.r-progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-deco), var(--r-accent)); border-radius: var(--radius-pill); transform-origin: left center; animation: r-grow var(--dur-slow) var(--ease-out) both; animation-delay: 200ms; }
@keyframes r-grow { from { transform: scaleX(0); } }
.r-pulse { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--r-accent); margin-right: 7px; animation: r-pulse 1.4s ease-in-out infinite; vertical-align: middle; }
@keyframes r-pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
@keyframes r-pop { 0% { transform: scale(0.94); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes r-rise { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
.r-pop { animation: r-pop var(--dur) var(--ease-out) both; }
/* Apparition en cascade d'une liste (bons, tuiles, médailles) : style="--i: n", ou rang dans le parent. */
.r-enter { animation: r-rise 520ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms); }

/* ── 10. Toast et modale (toujours en ton sombre : voir la liste des tons de styles.css § 3) ── */
.r-toast { position: fixed; left: 50%; bottom: max(1.4rem, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: var(--z-overlay); display: flex; align-items: center; gap: 0.6rem; width: max-content; max-width: min(92vw, 420px); padding: 0.85rem 1.15rem; border-radius: var(--radius-md); background: var(--espresso-900); color: var(--text); border: 1px solid var(--line-strong); box-shadow: var(--shadow-lg); font-size: 0.95rem; font-weight: 600; animation: r-toast-in var(--dur) var(--ease-out) both; }
.r-toast::before { content: "✦"; color: var(--accent-deco); }
.r-toast--ok { border-color: var(--ok); }
.r-toast--ok::before { content: "✓"; color: var(--ok); font-weight: 800; }
.r-toast--ko { border-color: var(--ko); }
.r-toast--ko::before { content: "!"; display: grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--ko-bg); color: var(--ko); font-weight: 800; }
.r-toast.is-leaving { animation: r-toast-out var(--dur) var(--ease-soft) both; }
@keyframes r-toast-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes r-toast-out { to { opacity: 0; transform: translate(-50%, 8px); } }
html.r-modal-open { overflow: hidden; }
.r-modal { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: 1rem; background: rgba(28, 20, 15, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fade-in var(--dur) var(--ease-soft) both; }
.r-modal[hidden] { display: none; }
.r-modal__box { position: relative; width: min(100%, 480px); max-height: 90vh; overflow: auto; overscroll-behavior: contain; background: var(--espresso-900); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow-lg); animation: r-pop var(--dur) var(--ease-out) both; }
.r-modal__box h2, .r-modal__box h3 { margin-top: 0; padding-right: 2.5rem; }
.r-modal__close { position: absolute; top: 0.6rem; right: 0.6rem; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; background: none; border: 0; border-radius: 50%; color: inherit; font-size: 1.6rem; cursor: pointer; line-height: 1; transition: background-color var(--dur-fast) var(--ease-out); }
.r-modal__close:hover { background: var(--surface-strong); }
.r-modal__box ol, .r-modal__box ul { padding-left: 1.2rem; }
.r-modal__box li + li { margin-top: 0.4rem; }

/* Gain à la roue : la modale fête le lot, puis montre le code. */
.r-win { text-align: center; overflow: hidden; }
.r-win__eyebrow { margin: 0 0 0.3rem; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--label); }
.r-win__title { margin: 0 0 1rem; padding: 0 !important; font-size: clamp(1.9rem, 1.5rem + 2vw, 2.4rem); }
.r-win__burst { position: absolute; left: 50%; top: 3.2rem; width: 0; height: 0; pointer-events: none; }
.r-win__burst span { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-deco); opacity: 0; animation: r-burst 900ms var(--ease-out) both; animation-delay: 120ms; }
.r-win__burst span:nth-child(3n) { background: var(--oro-300); width: 5px; height: 5px; }
.r-win__burst span:nth-child(3n + 1) { background: var(--crema-50); width: 4px; height: 4px; }
@keyframes r-burst {
  0% { opacity: 0; transform: rotate(var(--a)) translateX(0) scale(0.4); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d, 110px)) scale(1); }
}
.r-win .r-code { margin: 0.2rem 0 0.6rem; font-size: clamp(1.9rem, 1.6rem + 1.5vw, 2.4rem); }
/* Code montré au comptoir : très grand, lisible à un mètre. */
.r-codezoom h2 { padding-inline: 2.5rem; }
.r-codezoom .r-code { display: block; margin: 1rem auto; padding: 1rem 0.5rem 1rem 0.7rem; font-size: clamp(2.2rem, 10vw, 3.4rem); letter-spacing: 0.16em; text-align: center; background: var(--crema-50); color: var(--espresso-950); border: 2px dashed var(--oro-500); }

/* ── 11. Accès rapide (grandes tuiles) et bouton flottant ── */
.r-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; margin: 0 0 1rem; padding: 0; list-style: none; }
@media (min-width: 760px) { .r-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.r-tile {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.75rem;
  align-items: center;
  height: 100%;
  min-height: 4.5rem;
  padding: 0.9rem 0.95rem;
  border: 1px solid var(--r-line);
  border-radius: var(--radius-md);
  background: var(--r-surface);
  color: var(--r-text);
  text-decoration: none;
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.r-tile:hover { transform: translateY(-2px); border-color: var(--accent-line); background: var(--r-surface-strong); }
.r-tile:active { transform: scale(0.98); }
.r-tile__icon { grid-row: span 2; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--accent-tint); font-size: 1.3rem; line-height: 1; }
.r-tile__title { font-weight: 700; font-size: 0.98rem; line-height: 1.25; }
.r-tile__sub { font-size: var(--fs-xs); line-height: 1.4; color: var(--r-muted); }
@media (max-width: 400px) { .r-tile__sub { display: none; } .r-tile { grid-template-rows: auto; } .r-tile__icon { grid-row: auto; } }
/* Téléphones étroits (360 px, courants sous Android) : l'icône passe au-dessus du titre, sinon « Classement »
   ou « Ma commande » débordent de la tuile. */
@media (max-width: 374px) { .r-tile { grid-template-columns: minmax(0, 1fr); row-gap: 0.45rem; justify-items: start; } .r-tile__title { min-width: 0; overflow-wrap: anywhere; } }
/* Ancienne grille de choix (cartes-liens), gardée pour les pages qui l'emploient encore. */
.r-choice { display: grid; gap: 0.8rem; }
.r-choice a { display: block; text-decoration: none; color: inherit; border-radius: var(--radius-lg); }
.r-choice .r-card { margin: 0; transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.r-choice a:hover .r-card { transform: translateY(-2px); border-color: var(--r-accent); box-shadow: var(--shadow-ring), var(--shadow-md); }
.r-fab { position: fixed; left: 50%; white-space: nowrap; bottom: max(1.1rem, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 45; box-shadow: var(--shadow-lg); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility 0s; }
.r-fab:hover { transform: translateX(-50%) translateY(-1px); }
/* Avec JavaScript, le bouton n'apparaît qu'une fois le porte-monnaie (et son propre bouton) sorti de l'écran. */
.js .r-fab:not(.is-shown) { opacity: 0; visibility: hidden; transform: translate(-50%, 16px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility 0s var(--dur); }
@media (min-width: 900px) { .r-fab { display: none; } .regalo-page.has-fab .regalo-section { padding-bottom: clamp(4rem, 8vw, 6rem); } }
/* Sans JavaScript, le bouton reste affiché : le pied s'allonge de sa hauteur pour que ses derniers liens
   (mentions légales…) ne passent pas dessous. Avec JavaScript, regalo.js l'efface dès que le pied arrive. */
@media (max-width: 899px) { html:not(.js) .regalo-page.has-fab .site-footer { padding-bottom: calc(2rem + 4.5rem); } }

/* ── 12. Porte-monnaie (Mon espace) : le vert du store, rayé comme la terrasse, or de l'enseigne ── */
.r-dash { display: grid; gap: 1rem; margin-bottom: 1rem; }
@media (min-width: 960px) { .r-dash { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: stretch; } .r-dash > * { margin-bottom: 0; } .r-dash:has(> :only-child) { grid-template-columns: minmax(0, 1fr); } }
/* Cartes en colonnes qui se replient seules (Mon espace). */
.r-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr)); gap: 1rem; align-items: start; }
.r-cols > .r-card { margin: 0; }
.r-wallet {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-content: space-between;
  gap: 1.1rem;
  padding: clamp(1.3rem, 1rem + 1.4vw, 1.9rem);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(24rem 16rem at 100% 0%, rgba(230, 203, 146, 0.24), transparent 65%),
    radial-gradient(20rem 14rem at 0% 110%, rgba(224, 93, 40, 0.18), transparent 60%),
    linear-gradient(160deg, var(--verde-700), var(--verde-900));
  box-shadow: var(--shadow-lg);
}
.r-wallet::before { /* rayures du store, à peine visibles */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-linear-gradient(90deg, rgba(255, 250, 243, 0.035) 0 22px, transparent 22px 44px);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 75%);
  mask-image: linear-gradient(180deg, #000, transparent 75%);
}
.r-wallet::after { /* grand ✦ en filigrane */
  content: "✦";
  position: absolute;
  right: -0.1em;
  bottom: -0.35em;
  z-index: -1;
  font-size: 9rem;
  line-height: 1;
  color: rgba(230, 203, 146, 0.1);
}
.r-wallet__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.r-wallet__label { margin: 0; font-family: var(--font-sans); font-size: 0.74rem; line-height: 1.4; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--label); }
.r-wallet__n { display: flex; align-items: baseline; gap: 0.5rem; margin: 0.15rem 0 0; color: var(--text-muted); font-weight: 700; }
.r-wallet__n strong { font-family: var(--font-serif); font-size: clamp(3.4rem, 2.6rem + 3.5vw, 4.6rem); font-weight: 600; line-height: 0.9; color: var(--accent); font-variant-numeric: lining-nums tabular-nums; }
.r-wallet__note { margin: 0; color: var(--text-muted); font-size: var(--fs-small); }
.r-wallet__seal { flex: none; display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; border: 1.5px solid var(--accent-line); background: rgba(28, 20, 15, 0.22); font-size: 1.5rem; }
.r-wallet .r-actions { margin: 0; }
.r-wallet .r-actions > .button { flex: 1 1 10rem; }

/* ── 13. Carte à tampons : une carte crème, comme celle en carton, posée sur l'espresso ── */
.r-stampcard {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-bottom: 1rem;
  padding: clamp(1.2rem, 1rem + 1vw, 1.6rem);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(118, 88, 35, 0.35);
  background:
    radial-gradient(18rem 12rem at 100% 0%, rgba(195, 155, 81, 0.22), transparent 70%),
    radial-gradient(16rem 10rem at 0% 100%, rgba(224, 93, 40, 0.1), transparent 70%),
    var(--crema-50);
  box-shadow: var(--shadow-lg);
  color: var(--text);
}
.r-stampcard::before { /* liseré pointillé intérieur, comme une carte imprimée */
  content: "";
  position: absolute;
  inset: 0.45rem;
  z-index: -1;
  border: 1px dashed rgba(118, 88, 35, 0.35);
  border-radius: calc(var(--radius-xl) - 0.4rem);
  pointer-events: none;
}
.r-stampcard__head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.r-stampcard__head .r-card__label { margin: 0; }
.r-stampcard__count { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 700; line-height: 1; color: var(--accent); font-variant-numeric: lining-nums tabular-nums; }
.r-stampcard p { margin: 0.5rem 0 0; }
.r-stampcard .r-center strong { font-variant-numeric: lining-nums tabular-nums; }
.r-stampcard form { margin-top: 0.8rem; }
.r-stampcard--full { border-color: var(--oro-500); box-shadow: var(--shadow-lg), 0 0 0 4px rgba(195, 155, 81, 0.25); }
.r-stamps { display: grid; grid-template-columns: repeat(5, minmax(0, 3.2rem)); gap: 0.7rem 0.6rem; justify-content: center; margin: 1rem 0 0.4rem; padding: 0; list-style: none; }
.r-stamp {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px dashed var(--r-line-strong);
  color: var(--r-muted);
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
}
.r-stamp::before { content: attr(data-n); } /* numéro de la case, tant qu'elle est vide */
.r-stamp > span { display: none; }
.r-stamp svg { width: 58%; height: 58%; }
.r-stamp--gift { border-color: var(--accent-line); background: var(--accent-tint); color: var(--accent); }
.r-stamp--gift::before { content: none; }
.r-stamp--gift > span { display: grid; place-items: center; width: 100%; height: 100%; }
.r-stamp--on {
  border: 2px solid var(--verde-700);
  background: radial-gradient(circle at 35% 30%, var(--verde-700), var(--verde-900));
  color: var(--crema-50);
  box-shadow: 0 4px 10px -4px rgba(17, 53, 42, 0.6);
  transform: rotate(var(--tilt, -8deg));
}
.r-stamp--on::before { content: none; }
.r-stamp--on > span { display: grid; place-items: center; width: 100%; height: 100%; }
.r-stamp--on:nth-child(3n) { --tilt: 6deg; }
.r-stamp--on:nth-child(4n + 1) { --tilt: -3deg; }
.r-stamp--on { animation: r-stamp-in 0.55s var(--ease-spring) both; animation-delay: calc(var(--i, 0) * 70ms + 150ms); }
@keyframes r-stamp-in { from { transform: scale(1.6) rotate(-25deg); opacity: 0; } 60% { opacity: 1; } to { transform: rotate(var(--tilt, -8deg)); opacity: 1; } }
@media (min-width: 960px) { .r-stamps { grid-template-columns: repeat(5, minmax(0, 3.5rem)); gap: 0.8rem 0.75rem; } }
@media (max-width: 380px) { .r-stamps { grid-template-columns: repeat(5, minmax(0, 2.75rem)); gap: 0.55rem 0.45rem; } }

/* ── 14. Bons : des tickets à souche, crème quand ils sont à retirer ── */
.r-vouchers { display: grid; gap: 0.9rem; margin-bottom: 1rem; }
.r-vouchers > :nth-child(2) { --i: 1; } .r-vouchers > :nth-child(3) { --i: 2; } .r-vouchers > :nth-child(4) { --i: 3; }
.r-vouchers > :nth-child(5) { --i: 4; } .r-vouchers > :nth-child(n + 6) { --i: 5; }
.r-voucher {
  --notch: 0.85rem;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden; /* les encoches de la perforation ne mordent que dans le ticket */
  margin: 0 0 0.9rem;
  border-radius: var(--radius-lg);
  background: var(--r-surface);
  border: 1px solid var(--r-line);
  box-shadow: var(--shadow-ring), var(--shadow-sm);
  animation: r-rise 520ms var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
.r-vouchers > .r-voucher { margin: 0; }
.r-voucher__body { padding: 1.1rem 1.2rem 1rem; min-width: 0; }
.r-voucher__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; margin: 0 0 0.45rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--label); }
.r-voucher__title { margin: 0 0 0.5rem; font-family: var(--font-serif); font-size: clamp(1.45rem, 1.25rem + 0.8vw, 1.75rem); font-weight: 600; line-height: 1.1; overflow-wrap: anywhere; }
.r-voucher__state { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; margin: 0; font-size: var(--fs-small); color: var(--r-muted); }
.r-voucher__stub {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.5rem;
  padding: 1rem 1.2rem 1.15rem;
  border-top: 2px dashed var(--r-line-strong);
}
.r-voucher__stub::before, .r-voucher__stub::after { /* encoches de la perforation */
  content: "";
  position: absolute;
  top: calc(var(--notch) * -1 - 1px);
  width: calc(var(--notch) * 2);
  height: calc(var(--notch) * 2);
  border-radius: 50%;
  background: var(--espresso-950);
}
.r-voucher__stub::before { left: calc(var(--notch) * -1 - 1px); }
.r-voucher__stub::after { right: calc(var(--notch) * -1 - 1px); }
.section--paper .r-voucher__stub::before, .section--paper .r-voucher__stub::after { background: var(--crema-100); }
.r-voucher__codelabel { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--r-muted); }
.r-voucher .r-code { font-size: clamp(1.5rem, 1.3rem + 1vw, 1.9rem); }
.r-voucher__nocode { margin: 0; padding: 0 1.2rem 1.1rem; }
/* À retirer : ticket crème (îlot .tone-light posé par regalo_bon_card). */
.r-voucher--valid { background: linear-gradient(135deg, rgba(195, 155, 81, 0.16), transparent 55%), var(--crema-50); border-color: rgba(118, 88, 35, 0.35); box-shadow: var(--shadow-md); }
.r-voucher--valid .r-code { background: var(--crema-100); border-color: var(--oro-500); color: var(--espresso-950); }
/* Remis, expiré, bloqué : en retrait, avec un tampon en travers (décor, le statut est aussi écrit en clair). */
.r-voucher--redeemed .r-code, .r-voucher--expired .r-code { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--r-muted); }
.r-voucher__stamp {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  padding: 0.2rem 0.6rem;
  border: 2px solid currentColor;
  border-radius: var(--radius-xs);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transform: rotate(8deg);
  opacity: 0.85;
  pointer-events: none;
}
.r-voucher--redeemed .r-voucher__stamp { color: var(--ok); }
.r-voucher--expired .r-voucher__stamp, .r-voucher--blocked .r-voucher__stamp { color: var(--ko); }
.r-voucher:is(.r-voucher--redeemed, .r-voucher--expired, .r-voucher--blocked) :is(.r-voucher__meta, .r-voucher__title) { padding-right: 5.6rem; }
@media (min-width: 620px) {
  .r-voucher { grid-template-columns: minmax(0, 1fr) 15rem; }
  .r-voucher__stub { border-top: 0; border-left: 2px dashed var(--r-line-strong); padding: 1.1rem 1rem; }
  .r-voucher__stub::before { top: calc(var(--notch) * -1 - 1px); left: calc(var(--notch) * -1 - 1px); }
  .r-voucher__stub::after { top: auto; bottom: calc(var(--notch) * -1 - 1px); left: calc(var(--notch) * -1 - 1px); right: auto; }
  .r-voucher--redeemed .r-voucher__stamp, .r-voucher--expired .r-voucher__stamp, .r-voucher--blocked .r-voucher__stamp { right: calc(15rem + 0.9rem); }
}
.r-summary { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.3rem 0.6rem; margin: 0 0 1.2rem; color: var(--r-muted); }
.r-summary strong { font-family: var(--font-serif); font-size: 2.2rem; line-height: 1; color: var(--r-accent); font-variant-numeric: lining-nums tabular-nums; }

/* ── 15. La roue ── */
.r-wheel-card { text-align: center; overflow: hidden; background: radial-gradient(26rem 20rem at 50% 30%, rgba(195, 155, 81, 0.14), transparent 70%), var(--r-surface); }
.r-wheel { position: relative; width: min(84vw, 380px); aspect-ratio: 1; margin: 1.1rem auto 0.4rem; }
.r-wheel canvas { width: 100%; height: 100%; display: block; border-radius: 50%; box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(195, 155, 81, 0.5); will-change: transform; }
.r-wheel__pointer { position: absolute; top: -18px; left: 50%; z-index: 2; width: 34px; height: 44px; margin-left: -17px; color: var(--oro-300); transform-origin: 50% 12px; filter: drop-shadow(0 4px 5px rgba(28, 20, 15, 0.45)); }
.r-wheel__pointer svg { width: 100%; height: 100%; }
.r-wheel__pin { fill: var(--espresso-950); }
.r-wheel__pointer.is-tick { animation: r-tick 140ms var(--ease-out); }
@keyframes r-tick { 40% { transform: rotate(-16deg); } }
.r-wheel.is-done canvas { animation: r-wheel-glow 900ms var(--ease-out); }
@keyframes r-wheel-glow { 30% { box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.6), 0 0 0 8px rgba(230, 203, 146, 0.45); } }
.r-bet { display: flex; align-items: center; justify-content: center; gap: 0.9rem; margin: 1.1rem 0 0.6rem; }
.r-bet button { display: grid; place-items: center; width: 3rem; height: 3rem; padding: 0; border-radius: 50%; border: 1px solid var(--r-line-strong); background: var(--r-surface-strong); color: var(--r-text); font-size: 1.4rem; line-height: 1; cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); }
.r-bet button:hover:not([disabled]) { border-color: var(--r-accent); }
.r-bet button:active:not([disabled]) { transform: scale(0.92); }
.r-bet button[disabled] { opacity: 0.4; cursor: not-allowed; }
.r-bet output { display: grid; justify-items: center; min-width: 4.5rem; font-family: var(--font-serif); font-variant-numeric: lining-nums tabular-nums; font-size: 2.6rem; font-weight: 700; line-height: 1; color: var(--r-accent); }
.r-bet__unit { display: block; margin-top: 0.2rem; font-family: var(--font-sans); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--r-muted); }
.r-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45rem; margin: 0 0 1rem; }
.r-chips button { min-width: 3.4rem; min-height: 2.75rem; padding: 0.4rem 0.9rem; border-radius: var(--radius-pill); border: 1px solid var(--r-line-strong); background: transparent; color: var(--r-text); font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.r-chips button:hover:not([disabled]) { border-color: var(--r-accent); }
.r-chips button[aria-pressed="true"] { background: var(--accent-tint); border-color: var(--r-accent); color: var(--r-accent); }
.r-chips button[disabled] { opacity: 0.4; cursor: not-allowed; }
/* Pastilles de rareté : mêmes couleurs que les quartiers de la roue (wheel.php). */
.r-rarity { display: flex; align-items: center; gap: 0.55rem; margin: 1.2rem 0 0.2rem; font-family: var(--font-serif); font-size: 1.3rem; font-weight: 600; }
.r-rarity:first-of-type { margin-top: 0.6rem; }
.r-rarity .r-badge { margin-left: auto; font-family: var(--font-sans); }
.r-dot { flex: none; width: 0.85rem; height: 0.85rem; border-radius: 50%; border: 1px solid rgba(28, 20, 15, 0.35); }
.r-dot--0 { background: var(--oro-300); }
.r-dot--3 { background: var(--aperitivo-700); }
.r-dot--2 { background: var(--verde-700); border-color: rgba(250, 244, 234, 0.4); }
.r-dot--1 { background: var(--crema-200); }

/* ── 16. Classement (podium) et trophées (médailles) ── */
.r-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 0.6rem; margin: 0.4rem 0 1.2rem; padding: 0; list-style: none; }
.r-podium li { display: grid; justify-items: center; gap: 0.3rem; text-align: center; min-width: 0; animation: r-rise 600ms var(--ease-out) both; }
.r-podium__medal { font-size: 2rem; line-height: 1; }
.r-podium__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.r-podium__score { font-size: var(--fs-small); color: var(--r-muted); }
.r-podium__step { width: 100%; display: grid; place-items: center; border-radius: var(--radius-sm) var(--radius-sm) 0 0; border: 1px solid var(--accent-line); border-bottom: 0; background: linear-gradient(180deg, var(--accent-tint), transparent), var(--r-surface); font-family: var(--font-serif); font-size: 2rem; font-weight: 700; color: var(--r-accent); font-variant-numeric: lining-nums; }
.r-podium .is-1 { order: 2; animation-delay: 0ms; } .r-podium .is-1 .r-podium__step { height: 6.5rem; background: linear-gradient(180deg, rgba(230, 203, 146, 0.35), transparent), var(--r-surface); }
.r-podium .is-2 { order: 1; animation-delay: 120ms; } .r-podium .is-2 .r-podium__step { height: 4.8rem; }
.r-podium .is-3 { order: 3; animation-delay: 220ms; } .r-podium .is-3 .r-podium__step { height: 3.6rem; }
.r-podium .is-me .r-podium__name { color: var(--r-accent); }
.r-rank { display: grid; grid-template-columns: 2.4rem 1fr auto; align-items: center; gap: 0.7rem; min-height: 3rem; padding: 0.55rem 0; border-top: 1px dashed var(--r-line-strong); }
.r-rank:first-child { border-top: 0; }
.r-rank__pos { font-family: var(--font-serif); font-variant-numeric: lining-nums; font-size: 1.5rem; font-weight: 700; color: var(--r-accent); text-align: center; }
.r-rank > span:last-child { font-weight: 700; font-variant-numeric: tabular-nums; }
.r-rank--me { background: var(--accent-tint); border-radius: var(--radius-sm); padding-inline: 0.5rem; border-top-color: transparent; }
.r-medals { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: 0.75rem; }
.r-medal { position: relative; display: grid; grid-template-columns: 3.4rem 1fr; gap: 0.85rem; align-items: center; padding: 0.9rem 1rem; border: 1px solid var(--r-line); border-radius: var(--radius-md); background: var(--r-surface); animation: r-rise 520ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 50ms); }
.r-medal .r-trophy__icon { width: 3.4rem; height: 3.4rem; font-size: 1.7rem; }
.r-medal strong { display: block; line-height: 1.3; }
.r-medal .r-small { margin-top: 0.15rem; line-height: 1.45; }
.r-medal--new { border-color: var(--accent-line); background: linear-gradient(135deg, var(--accent-tint), transparent 60%), var(--r-surface); }
.r-medal--new .r-trophy__icon { animation: r-shine 1.2s var(--ease-out) 400ms both; }
@keyframes r-shine { 0% { box-shadow: 0 0 0 0 rgba(230, 203, 146, 0.7); } 100% { box-shadow: 0 0 0 14px rgba(230, 203, 146, 0); } }
.r-medal--locked .r-trophy__icon { filter: grayscale(1); opacity: 0.55; border-style: dashed; border-color: var(--r-line-strong); }

/* ── 17. Boutique ── */
.r-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: 0.8rem; margin-bottom: 0.6rem; }
.r-product { display: grid; grid-template-rows: auto 1fr auto; gap: 0.6rem; margin: 0; padding: 1.1rem; border: 1px solid var(--r-line); border-radius: var(--radius-lg); background: var(--r-surface); transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
.r-product:hover { transform: translateY(-2px); border-color: var(--accent-line); }
.r-product h3 { margin: 0; font-family: var(--font-serif); font-size: 1.4rem; font-weight: 600; line-height: 1.12; }
.r-product__price { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.r-product__price strong { font-family: var(--font-serif); font-size: 1.9rem; line-height: 1; color: var(--r-accent); font-variant-numeric: lining-nums tabular-nums; }
.r-product__price span { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--r-muted); }
.r-product .r-progress { margin-top: 0; }
.r-product form { margin: 0; }
.r-product--ok { border-color: var(--accent-line); }

/* ── 18. Parrainage ── */
.r-invite { display: grid; gap: 0.6rem; }
.r-invite__row { display: flex; gap: 0.5rem; }
.r-invite__row input { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 0.9rem !important; }
.r-howto { counter-reset: r-how; display: grid; gap: 0.8rem; margin: 0; padding: 0; list-style: none; }
.r-howto li { position: relative; display: grid; grid-template-columns: 2.2rem 1fr auto; gap: 0.75rem; align-items: start; }
.r-howto li::before { counter-increment: r-how; content: counter(r-how); display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--accent-tint); color: var(--r-accent); font-weight: 800; font-variant-numeric: lining-nums; }
.r-howto small { display: block; margin-top: 0.15rem; color: var(--r-muted); font-size: var(--fs-small); line-height: 1.5; }
.r-howto__gain { white-space: nowrap; font-weight: 800; color: var(--r-accent); padding-top: 0.15rem; }
.r-filleuls li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.r-filleuls li > span:first-child { min-width: 0; }
.r-filleuls .r-progress { grid-column: 1 / -1; margin-top: 0.1rem; }
.r-filleuls li > [data-palier] { white-space: nowrap; font-weight: 700; color: var(--r-accent); }

/* ── 19. Page de table (table.php, compléments dans table.css) et alias des pages caisse (pos-*) ── */
.r-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; margin-bottom: 1rem; }
.r-quick button, .r-quick a { display: grid; gap: 0.35rem; place-items: center; min-height: 5.25rem; padding: 0.9rem 0.4rem; border-radius: var(--radius-md); border: 1px solid var(--r-line); background: var(--r-surface); color: var(--r-text); font: inherit; font-weight: 700; font-size: 0.88rem; text-decoration: none; cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), transform var(--dur) var(--ease-out); }
.r-quick button:hover, .r-quick a:hover { transform: translateY(-2px); }
.r-quick button:active, .r-quick a:active { transform: scale(0.97); }
.r-quick .ico { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--accent-tint); font-size: 1.35rem; line-height: 1; }
.r-lang { display: flex; justify-content: flex-end; gap: 0.35rem; margin-bottom: 0.6rem; }
.r-lang button { min-width: 2.75rem; min-height: 2.75rem; border: 1px solid var(--r-line-strong); background: transparent; color: var(--r-text); border-radius: var(--radius-pill); padding: 0.3rem 0.75rem; font: inherit; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; cursor: pointer; }
.r-lang button[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.r-table-big { font-family: var(--font-serif); font-variant-numeric: lining-nums; font-size: clamp(3rem, 2.4rem + 3vw, 4rem); font-weight: 600; line-height: 1; color: var(--r-accent); }

.pos-card { position: relative; background: var(--r-surface); border: 1px solid var(--r-line); border-radius: var(--radius-lg); padding: clamp(1.1rem, 1rem + 0.6vw, 1.4rem); margin-bottom: 0.9rem; box-shadow: var(--shadow-ring), var(--shadow-sm); }
.pos-result { text-align: center; }
.pos-result .big { font-family: var(--font-serif); font-variant-numeric: lining-nums; font-size: clamp(2.4rem, 2rem + 2vw, 3rem); font-weight: 700; line-height: 1.05; margin: 0.4rem 0; color: var(--r-accent); }
.pos-result h3 { margin: 0.5rem 0 0.3rem; font-size: 1.35rem; }
.pos-result p { margin: 0.35rem 0; color: var(--r-muted); }
.pos-result:not(.hidden) .pos-badge.ok + .big { animation: r-pop 520ms var(--ease-spring) both; animation-delay: 120ms; }
.pos-table { font-family: var(--font-serif); font-variant-numeric: lining-nums; font-size: 2.8rem; font-weight: 600; color: var(--r-accent); line-height: 1; margin: 0.2rem 0 0.4rem; }
.pos-badge { display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--font-sans); line-height: 1.4; padding: 0.3rem 0.75rem; border-radius: var(--radius-pill); font-size: 0.76rem; font-weight: 700; background: var(--accent-tint); color: var(--r-accent); }
.pos-badge.ok { background: var(--ok-bg); color: var(--r-ok); }
.pos-badge.ko { background: var(--ko-bg); color: var(--r-ko); }
.pos-badge.warn { background: var(--warn-bg); color: var(--r-warn); }
.pos-btn { --btn-fg: var(--espresso-950); display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 3.1rem; font: inherit; font-weight: 700; font-size: 1rem; letter-spacing: 0.01em; padding: 0.85rem; border: 1px solid transparent; border-radius: var(--radius-pill); background: linear-gradient(135deg, var(--oro-300), var(--oro-500)); color: var(--espresso-950); cursor: pointer; margin-top: 0.9rem; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.pos-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.pos-btn:active { transform: scale(0.98); }
.pos-btn.ghost { --btn-fg: var(--r-text); background: transparent; color: var(--r-text); border-color: var(--r-line-strong); }
.pos-btn[disabled] { opacity: 0.6; cursor: progress; transform: none; box-shadow: none; }
.pos-field { margin-bottom: 0.9rem; }
.pos-field label { display: block; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--r-muted); margin-bottom: 0.4rem; font-weight: 700; }
.pos-field input { width: 100%; min-height: 3.1rem; box-sizing: border-box; font: inherit; font-size: 1.05rem; padding: 0.75rem 0.95rem; border-radius: var(--radius-sm); border: 1px solid var(--input-border); background: var(--r-input-bg); color: var(--r-text); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.pos-field input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-ring); }
.pos-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.pos-status { text-align: center; font-size: 0.9rem; color: var(--r-muted); min-height: 1.4em; margin-top: 0.6rem; }
.pos-status.ko { color: var(--r-ko); font-weight: 600; }
.pos-tokens { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; }
.pos-tokens .n { font-family: var(--font-serif); font-variant-numeric: lining-nums tabular-nums; font-size: 2.4rem; font-weight: 700; line-height: 1; color: var(--r-accent); }
.pos-tokens small { color: var(--r-muted); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.7rem; }
.pos-hist { list-style: none; margin: 0.9rem 0 0; padding: 0; font-size: 0.92rem; }
.pos-hist:empty { display: none; }
.pos-hist li { display: flex; justify-content: space-between; gap: 0.8rem; padding: 0.6rem 0; border-top: 1px dashed var(--r-line-strong); font-variant-numeric: tabular-nums; }
.pos-hist li span:last-child { white-space: nowrap; font-weight: 700; color: var(--r-accent); }
.pos-hist li.pend span:first-child { color: var(--r-warn); }
.pos-pulse { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--r-accent); margin-right: 7px; animation: r-pulse 1.4s ease-in-out infinite; vertical-align: middle; }
.pos-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.2rem 1.2rem; text-align: center; font-size: 0.9rem; color: var(--r-muted); }
.pos-foot a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--r-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* Ticket de caisse : toujours sur fond espresso, quel que soit le ton de la page. */
.pos-ticket { background: var(--espresso-950); color: var(--crema-200); border-radius: var(--radius-sm); padding: 0.75rem 0.9rem; font-family: var(--font-mono); font-size: 0.78rem; line-height: 1.55; white-space: pre; overflow-x: auto; margin: 0 0 1rem; border: 1px solid var(--r-line); }
.pos-ticket b { color: var(--oro-300); background: rgba(230, 203, 146, 0.14); border-radius: 3px; padding: 0 2px; }
.pos-choice { display: grid; gap: 0.8rem; }
.pos-choice a { display: block; text-decoration: none; color: inherit; }
.pos-choice .pos-card { margin: 0; }
.pop { animation: r-pop var(--dur) var(--ease-out) both; }
/* « Ma commande » : les deux chemins (QR recommandé, ticket) */
.r-howqr { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: center; }
.r-howqr__icon { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: var(--radius-md); background: var(--accent-tint); font-size: 1.6rem; }
.r-howqr p { margin: 0; }

/* ── 20. Connexion (deux colonnes sur grand écran), pages d'état ── */
.r-split { display: grid; gap: 1rem; align-items: start; }
@media (min-width: 900px) { .r-split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 1.4rem; } }
.r-split > .r-card { margin: 0; }
.r-or { display: flex; align-items: center; gap: 0.8rem; margin: 1.3rem 0 0.9rem; color: var(--r-muted); font-size: var(--fs-small); font-weight: 600; }
.r-or::before, .r-or::after { content: ""; flex: 1; height: 1px; background: var(--r-line-strong); }
.r-social { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.6rem; }
.r-social .button { min-height: 3rem; }
.r-perks { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--radius-xl); padding: clamp(1.3rem, 1rem + 1.4vw, 2rem); background: radial-gradient(20rem 14rem at 100% 0%, rgba(230, 203, 146, 0.2), transparent 65%), linear-gradient(165deg, var(--verde-700), var(--verde-900)); box-shadow: var(--shadow-lg); }
.r-perks::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(90deg, rgba(255, 250, 243, 0.035) 0 22px, transparent 22px 44px); -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); }
.r-perks h2 { margin: 0 0 1rem; font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.2rem); }
.r-perks ul { display: grid; gap: 0.85rem; margin: 0; padding: 0; list-style: none; }
.r-perks li { display: grid; grid-template-columns: 2.6rem 1fr; gap: 0.8rem; align-items: center; }
.r-perks li > span:first-child { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: rgba(28, 20, 15, 0.25); border: 1px solid var(--accent-line); font-size: 1.2rem; }
.r-perks p { margin: 1.1rem 0 0; }
/* Page d'état (introuvable, fermé, lien invalide, c'est fait…) : une icône, une phrase, deux chemins. */
.r-state { text-align: center; padding-block: clamp(1.6rem, 1.2rem + 2vw, 2.4rem); }
.r-state__icon { display: grid; place-items: center; width: 4.2rem; height: 4.2rem; margin: 0 auto 1rem; border-radius: 50%; border: 1.5px solid var(--accent-line); background: radial-gradient(circle at 35% 30%, var(--accent-tint), transparent 75%), var(--r-surface-strong); font-size: 1.9rem; line-height: 1; animation: r-pop 520ms var(--ease-spring) both; }
.r-state--ok .r-state__icon { border-color: var(--ok); background: var(--ok-bg); color: var(--ok); }
.r-state--ko .r-state__icon { border-color: var(--ko); background: var(--ko-bg); color: var(--ko); }
.r-state h2 { margin: 0 0 0.5rem; font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.1rem); }
.r-state p { max-width: 32rem; margin-inline: auto; }

/* ── 21. Mode d'emploi (docu.php) ── */
.r-toc { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
.r-toc a { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.75rem; padding: 0.45rem 0.95rem; border: 1px solid var(--r-line-strong); border-radius: var(--radius-pill); background: var(--r-surface-strong); color: var(--r-text) !important; font-size: 0.88rem; font-weight: 600; text-decoration: none; transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.r-toc a:hover { border-color: var(--r-accent); background: var(--accent-tint); }
.r-doc { scroll-margin-top: calc(var(--header-height) + 1rem); }
.r-doc h2 { display: flex; align-items: center; gap: 0.7rem; }
.r-doc__icon { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--accent-tint); font-size: 1.25rem; }
.r-doc h3 { margin-top: 1.2rem; font-family: var(--font-sans); font-size: 1rem; font-weight: 700; }

/* ── 22. Graphique des dépenses : hauteur fixe (Chart.js « responsive » grandit sans fin sinon) ── */
.r-chart { position: relative; height: 13rem; }
.r-chart canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }

/* ── Ajustements du site sur les pages app ── */
@media (max-width: 720px) {
  .regalo-section { padding-top: 1.5rem; }
}

/* ── 23. Mouvement réduit : rien ne bouge, rien n'attend (les retards d'animation aussi), impression ── */
@media (prefers-reduced-motion: reduce) {
  .r-enter, .r-voucher, .r-medal, .r-podium li, .r-stamp--on, .r-progress > span, .r-state__icon, .r-fab, .r-alert,
  .r-win__burst, .pos-result .big, .r-wheel.is-done canvas, .r-wheel__pointer.is-tick, .r-toast, .r-medal--new .r-trophy__icon {
    animation: none !important;
  }
  .r-stamp--on { transform: rotate(var(--tilt, -8deg)); }
  .r-win__burst { display: none; }
}
@media print {
  .regalo-nav, .r-fab, .r-toast, .r-modal, .r-voucher__show { display: none !important; }
  .r-voucher, .r-stampcard, .r-wallet { box-shadow: none; }
}