/* =============================================================================
   Thème "wallet" — direction moderne, VOLUME + CONTRASTE.
   Ombres multi-couches, reliefs (highlights/gloss), dégradés riches, typo lourde.
   ========================================================================== */

html {
  --brand-1: 234 82% 57%;      /* indigo */
  --brand-2: 266 74% 57%;      /* violet */
  --ink: 236 46% 10%;          /* encre (textes/ombres) */

  --lumo-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, Helvetica, Arial, sans-serif;

  --lumo-border-radius-s: 10px;
  --lumo-border-radius-m: 14px;
  --lumo-border-radius-l: 22px;

  --lumo-primary-color: hsl(var(--brand-1));
  --lumo-primary-color-50pct: hsla(var(--brand-1), 0.5);
  --lumo-primary-color-10pct: hsla(var(--brand-1), 0.14);
  --lumo-primary-text-color: hsl(var(--brand-1));
  --lumo-primary-contrast-color: #fff;

  --lumo-header-text-color: hsl(var(--ink));
  --lumo-body-text-color: hsl(230 25% 24%);
  --lumo-secondary-text-color: hsl(230 14% 46%);
  --lumo-tertiary-text-color: hsl(230 12% 60%);
  --lumo-disabled-text-color: hsl(230 12% 74%);

  --lumo-contrast-5pct: hsl(230 28% 95%);
  --lumo-contrast-10pct: hsl(230 26% 90%);
  --lumo-contrast-20pct: hsl(228 22% 84%);
  --lumo-contrast-30pct: hsl(226 18% 76%);

  --lumo-error-color: hsl(0 84% 60%);
  --lumo-error-text-color: hsl(0 72% 46%);
  --lumo-success-color: hsl(150 68% 40%);
  --lumo-success-text-color: hsl(150 70% 28%);

  --lumo-base-color: #ffffff;

  /* Ombres multi-couches (volume) */
  --shadow-sm: 0 1px 2px hsla(var(--ink), 0.05), 0 6px 16px hsla(var(--ink), 0.08);
  --shadow-md: 0 1px 2px hsla(var(--ink), 0.05), 0 8px 20px hsla(var(--ink), 0.09),
    0 20px 44px hsla(var(--ink), 0.11);
  --shadow-lg: 0 2px 4px hsla(var(--ink), 0.06), 0 14px 30px hsla(var(--ink), 0.13),
    0 32px 64px hsla(var(--ink), 0.16);
  --shadow-brand: 0 10px 24px hsla(var(--brand-1), 0.32),
    0 30px 56px hsla(var(--brand-1), 0.32);
}

/* Fond global : image d'ambiance (la cabane), étirée à l'écran et fixe (pas de répétition) */
html,
body {
  background-color: #ece2dd;
  background-image: url('bg-cabane.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* ---------------------------------------------------------- Boutons -------- */
vaadin-button {
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.16s ease, filter 0.16s ease;
}
vaadin-button[theme~='primary'] {
  background: linear-gradient(135deg, hsl(var(--brand-1)), hsl(var(--brand-2)));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 8px 20px hsla(var(--brand-1), 0.42), 0 2px 4px hsla(var(--ink), 0.12);
}
vaadin-button[theme~='primary']:hover {
  filter: brightness(1.06) saturate(1.05);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 14px 30px hsla(var(--brand-1), 0.5), 0 3px 6px hsla(var(--ink), 0.14);
}
vaadin-button:active {
  transform: translateY(1px) scale(0.99);
}

/* ---------------------------------------------------------- Champs ---------- */
vaadin-text-field::part(input-field),
vaadin-email-field::part(input-field),
vaadin-combo-box::part(input-field),
vaadin-date-picker::part(input-field) {
  background: #fff;
  border: 1.5px solid var(--lumo-contrast-10pct);
  border-radius: 14px;
  box-shadow: inset 0 1px 2px hsla(var(--ink), 0.04);
  padding: 2px 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
vaadin-text-field[focused]::part(input-field),
vaadin-email-field[focused]::part(input-field),
vaadin-combo-box[focused]::part(input-field),
vaadin-date-picker[focused]::part(input-field) {
  border-color: hsl(var(--brand-1));
  box-shadow: 0 0 0 4px hsla(var(--brand-1), 0.16), inset 0 1px 2px hsla(var(--ink), 0.04);
}
vaadin-text-field[invalid]::part(input-field),
vaadin-email-field[invalid]::part(input-field),
vaadin-date-picker[invalid]::part(input-field) {
  border-color: var(--lumo-error-color);
}
vaadin-text-field::part(label),
vaadin-email-field::part(label),
vaadin-combo-box::part(label),
vaadin-date-picker::part(label),
vaadin-radio-group::part(label) {
  font-weight: 700;
  color: var(--lumo-header-text-color);
  padding-bottom: 2px;
}

/* ------------------------------------------------------- Utilitaires ------- */
.wallet-page {
  min-height: 100dvh;
  padding: 34px 18px 72px;
  box-sizing: border-box;
}

.stack-narrow {
  width: 100%;
  max-width: 430px;
}

/* Bouton discret « Installer l'app » (mire) — masqué par défaut, révélé par JS si installable */
.install-pill {
  display: none;
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 100;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid hsla(var(--ink), 0.12);
  border-radius: 999px;
  padding: 7px 14px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--lumo-header-text-color);
  cursor: pointer;
  box-shadow: 0 4px 14px hsla(var(--ink), 0.14);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.install-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px hsla(var(--ink), 0.2);
}

/* Hero */
.hero-icon {
  width: 74px;
  height: 74px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  background: linear-gradient(135deg, hsl(var(--brand-1)), hsl(var(--brand-2)));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 14px 30px hsla(var(--brand-1), 0.45), 0 4px 8px hsla(var(--ink), 0.14);
}
/* Logo Hexagonia dans les pastilles de marque (splash + hero) */
.hero-icon img {
  width: 46%;
  height: auto;
  display: block;
}
.splash-icon img {
  width: 52%;
  height: auto;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.22));
}
.hero-title {
  color: var(--lumo-header-text-color);
  font-weight: 800;
  font-size: 1.85rem;
  letter-spacing: -0.025em;
  margin: 18px 0 0;
  text-align: center;
}
.hero-subtitle {
  color: var(--lumo-secondary-text-color);
  text-align: center;
  margin: 8px 0 0;
  max-width: 330px;
  font-weight: 500;
}
/* Logo du magasin sur la mire brandée (arrivée via /m/{id}) */
.hero-store-logo {
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.85), 0 14px 30px hsla(var(--ink), 0.20);
}

/* Confidentialité : les infos ne sont PAS renvoyées au navigateur (aucune valeur dans le DOM).
   On affiche un état « protégé » ; le déverrouillage se fera via un code PIN (version future). */
.protected-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 15px;
  border-radius: 16px;
  background: linear-gradient(135deg, hsla(var(--brand-1), 0.10), hsla(var(--brand-2), 0.08));
  border: 1px solid hsla(var(--brand-1), 0.18);
}
.protected-note-icon {
  font-size: 22px;
  line-height: 1.1;
}
.protected-title {
  font-weight: 800;
  color: var(--lumo-header-text-color);
  font-size: 0.98rem;
}
.protected-sub {
  color: var(--lumo-secondary-text-color);
  font-size: 0.84rem;
  margin-top: 2px;
}
.protected-list {
  display: flex;
  flex-direction: column;
}
.protected-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 4px;
  border-bottom: 1px solid hsla(var(--ink), 0.07);
}
.protected-row:last-child {
  border-bottom: none;
}
.protected-label {
  font-weight: 600;
  color: var(--lumo-body-text-color);
}
.protected-value {
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--lumo-tertiary-text-color);
}

/* Carte blanche (volume) */
.wallet-card {
  background: #fff;
  border-radius: 24px;
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(255, 255, 255, 0.8);
}

/* Cadre "surface" blanc cassé qui regroupe le contenu d'un onglet (liste, etc.) */
.panel {
  background: #faf8f2;
  border: 1px solid hsla(var(--ink), 0.07);
  border-radius: 22px;
  padding: 14px;
  box-sizing: border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 1px 2px hsla(var(--ink), 0.04),
    0 12px 30px hsla(var(--ink), 0.07);
}

.section-label {
  color: var(--lumo-header-text-color);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.01em;
}

/* Carte commerçant (liste) — blanc pur, posée dans le cadre blanc cassé */
.merchant-card {
  background: #fff;
  border: 1px solid hsla(var(--ink), 0.32);
  border-radius: 16px;
  padding: 13px 15px;
  cursor: pointer;
  box-shadow: 0 1px 2px hsla(var(--ink), 0.05), 0 4px 12px hsla(var(--ink), 0.06);
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.merchant-card:hover {
  border-color: hsla(var(--brand-1), 0.28);
  box-shadow: 0 2px 4px hsla(var(--ink), 0.06), 0 14px 28px hsla(var(--ink), 0.12);
  transform: translateY(-3px);
}
.merchant-chevron {
  color: var(--lumo-tertiary-text-color);
  flex: 0 0 auto;
}

/* Zone texte (nom + badge) : doit pouvoir rétrécir dans la ligne flex,
   sinon un nom long déborde sous le bouton « Rejoindre » / le chevron. */
.merchant-card > vaadin-vertical-layout {
  min-width: 0;
}
/* Nom du commerce : affiché EN ENTIER (passe à la ligne si besoin), jamais tronqué.
   min-width:0 sur la colonne + flex:0 0 auto sur le bouton évitent le chevauchement. */
.merchant-card .wallet-card-name {
  display: block;
  overflow-wrap: anywhere;
}
/* L'action de droite (bouton « Rejoindre » / chevron) ne se comprime jamais. */
.merchant-card > vaadin-button,
.merchant-card > vaadin-icon {
  flex: 0 0 auto;
}

/* Pastille de points */
.points-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  background: hsla(var(--brand-1), 0.13);
  color: hsl(var(--brand-1));
  font-weight: 800;
  font-size: 0.85rem;
  border-radius: 999px;
  padding: 4px 11px;
}

/* ===================== Vignette du solde (anneau de progression) ========== */
.balance-hero {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 2px;
}
.balance-header {
  gap: 12px !important;
}
.balance-titles {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}
.balance-merchant {
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  color: var(--lumo-header-text-color);
}
.balance-greet {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--lumo-secondary-text-color);
}
.balance-logo {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.7), 0 6px 14px hsla(var(--ink), 0.16);
}
.balance-row {
  gap: 26px !important;
  padding-left: 4px;
}

/* Anneau (donut via masque) — remplissage animé de 0 à --p via la propriété --fill */
@property --fill {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}
@keyframes ringFill {
  from { --fill: 0; }
  to { --fill: var(--p, 0); }
}
.balance-ring-wrap {
  position: relative;
  width: 138px;
  height: 138px;
  flex: 0 0 auto;
}
.balance-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from -90deg,
      hsl(var(--brand-1)),
      hsl(var(--brand-2)) calc(var(--fill, 0) * 1%),
      hsl(var(--ink) / 0.10) calc(var(--fill, 0) * 1%));
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 13px), #000 calc(100% - 13px));
          mask: radial-gradient(farthest-side, #0000 calc(100% - 13px), #000 calc(100% - 13px));
  filter: drop-shadow(0 10px 20px hsl(var(--brand-1) / 0.28));
  animation: ringFill 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}
.balance-ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.balance-value {
  font-weight: 800;
  font-size: 2.55rem;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--lumo-header-text-color);
}
.balance-unit {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--lumo-secondary-text-color);
}

/* Colonne grade (droite de l'anneau) */
.balance-grade {
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-width: 0;
}
.balance-goal {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--lumo-body-text-color);
  line-height: 1.35;
}

/* Chip de grade (sur fond clair) */
.rank-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  background: #fff;
  border: 1.5px solid hsla(var(--ink), 0.12);
  border-radius: 999px;
  padding: 6px 14px 6px 10px;
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--lumo-header-text-color);
  box-shadow: 0 4px 12px hsla(var(--ink), 0.10);
}
.rank-medal {
  font-size: 1.1rem;
  line-height: 1;
}
.rank-chip.rank-1 { background: linear-gradient(135deg, #fbeadd, #f2d3ba); border-color: #dfa876; color: #8a4e26; }
.rank-chip.rank-2 { background: linear-gradient(135deg, #f5f7fa, #e1e7ef); border-color: #c1cad7; color: #46536b; }
.rank-chip.rank-3 { background: linear-gradient(135deg, #fff3cf, #ffe08a); border-color: #eec252; color: #866712; }
.rank-chip.rank-4 { background: linear-gradient(135deg, #ede9fe, #ddd6fe); border-color: #b6a4f6; color: #573dad; }

/* Bandeau "compléter le profil" */
.profile-cta {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, hsla(var(--brand-1), 0.12), hsla(var(--brand-2), 0.09));
  border: 1px solid hsla(var(--brand-1), 0.20);
  box-shadow: var(--shadow-sm);
}
.profile-cta-text {
  flex: 1;
  min-width: 0;
}
.profile-cta-title {
  font-weight: 700;
  color: var(--lumo-header-text-color);
  font-size: 0.95rem;
}
.profile-cta-sub {
  color: hsl(var(--brand-1));
  font-size: 0.82rem;
  font-weight: 600;
}

/* Bouton d'appel au sondage : pulse pour attirer l'attention */
.poll-cta {
  border-radius: 16px !important;
  animation: pollPulse 1.7s ease-in-out infinite;
}
@keyframes pollPulse {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.035);
    filter: brightness(1.08) saturate(1.05);
  }
}
@media (prefers-reduced-motion: reduce) {
  .poll-cta {
    animation: none;
  }
}
.poll-question {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.poll-question-label {
  font-weight: 700;
  color: var(--lumo-header-text-color);
}

/* Ligne récompense (élévation) */
.reward-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  box-sizing: border-box;
  padding: 13px 15px;
  border: 1.5px solid hsla(var(--ink), 0.34);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.16s ease, transform 0.16s ease;
}
.reward-row:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.reward-emoji {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  background: linear-gradient(145deg, hsl(230 30% 95%), #ffffff);
  box-shadow: inset 0 0 0 1px hsla(var(--ink), 0.05), inset 0 1px 2px hsla(var(--ink), 0.05);
  overflow: hidden;
}
.reward-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.reward-name {
  font-weight: 700;
  font-size: 0.96rem;
  color: var(--lumo-header-text-color);
  overflow-wrap: anywhere;
}
.reward-cost {
  color: var(--lumo-secondary-text-color);
  font-size: 0.82rem;
  font-weight: 500;
}
.reward-progress {
  height: 7px;
  border-radius: 999px;
  background: var(--lumo-contrast-10pct);
  box-shadow: inset 0 1px 2px hsla(var(--ink), 0.08);
  overflow: hidden;
  margin-top: 5px;
}
/* Remplissage animé de la barre (0 → --rw), même esprit que l'anneau de points. */
@keyframes rewardFill {
  from { width: 0; }
  to { width: var(--rw, 0%); }
}
.reward-fill {
  animation: rewardFill 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}
.reward-remaining {
  color: var(--lumo-tertiary-text-color);
  font-size: 0.74rem;
  font-weight: 500;
  margin-top: 3px;
}
.reward-chip-ok {
  flex: 0 0 auto;
  color: #fff;
  background: linear-gradient(135deg, hsl(150 70% 40%), hsl(160 68% 38%));
  font-weight: 700;
  font-size: 0.74rem;
  padding: 5px 11px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 10px hsla(150, 70%, 35%, 0.35);
}

/* Avatars */
/* Logo commerçant : conteneur rond (repli initiales) + image du logo en lazy-load par-dessus. */
.merchant-avatar {
  position: relative;
  flex: 0 0 auto;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: hsla(var(--brand-1), 0.12);
  color: hsl(var(--brand-1));
  font-weight: 700;
  font-size: 0.92rem;
  text-transform: uppercase;
  box-shadow: 0 0 0 1px hsla(var(--ink), 0.06), 0 3px 8px hsla(var(--ink), 0.10);
}
.merchant-avatar .merchant-avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Onglets : largeur égale, pas de débordement */
vaadin-tabs {
  width: 100%;
}
vaadin-tabs::part(tabs) {
  width: 100%;
}
vaadin-tab {
  flex: 1;
  justify-content: center;
  font-weight: 600;
  font-size: 0.9rem;
}
vaadin-tab[selected] {
  color: hsl(var(--brand-1));
}

/* Transition d'entrée de page (fondu + montée + léger zoom) */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.animate-in {
  animation: fadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Apparition en cascade d'une liste : les éléments montent du bas et se stackent */
@keyframes stackIn {
  0% {
    opacity: 0;
    transform: translateY(44px) scale(0.96);
  }
  55% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.stack-in {
  animation: stackIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .stack-in {
    animation: none;
  }
}

/* ========= Animation de chargement d'un onglet (dès le changement) ========= */
/* Masquée par défaut ; « is-loading » est posé côté client au changement d'onglet,
   puis retiré par le serveur une fois le contenu réel construit. */
.tab-loader {
  display: none;
}
.tab-loader.is-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 54px 0;
}
.tab-content.is-loading {
  display: none;
}
.tab-spinner {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  /* Syntaxe « slash » obligatoire : hsla(H S L, A) est invalide et ferait rejeter
     tout le raccourci `border` (bordure alors invisible). */
  border: 3px solid hsl(var(--ink) / 0.14);
  border-top-color: hsl(var(--brand-1));
  animation: tabSpin 0.8s linear infinite;
}
@keyframes tabSpin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .tab-spinner {
    animation-duration: 2s;
  }
}

/* Sentinelle de chargement progressif : invisible, sert de déclencheur au scroll. */
.lazy-sentinel {
  width: 100%;
  height: 1px;
  flex: 0 0 auto;
}

/* ================= Attente : spinner de bouton + barre de chargement ====== */

/* Spinner insere dans un bouton : revele uniquement pendant le traitement du clic
   (le bouton est desactive cote client des l'appui via setDisableOnClick). */
.btn-spinner {
  display: none;
}
vaadin-button[disabled] .btn-spinner {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-left: 8px;
  vertical-align: -2px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: btnSpin 0.7s linear infinite;
}
@keyframes btnSpin {
  to { transform: rotate(360deg); }
}

/* Barre de progression Vaadin (aller-retour serveur) aux couleurs de la charte. */
.v-loading-indicator {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  z-index: 2500;
  background: linear-gradient(90deg, hsl(var(--brand-1)), hsl(var(--brand-2)));
  box-shadow: 0 1px 8px hsl(var(--brand-1) / 0.55);
  border-radius: 0 3px 3px 0;
  transition: width 0.4s ease-out, opacity 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  vaadin-button[disabled] .btn-spinner {
    animation: none;
  }
}

/* ============================ Splash de chargement ======================== */
.splash {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(140deg, hsl(234 84% 58%) 0%, hsl(266 74% 57%) 100%);
  animation: splashOut 1.6s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
@keyframes splashOut {
  0%, 55% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}
.splash-icon {
  width: 94px;
  height: 94px;
  border-radius: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 20px 44px rgba(0, 0, 0, 0.2);
  animation: splashPop 0.7s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}
@keyframes splashPop {
  0% {
    transform: scale(0.4) rotate(-15deg);
    opacity: 0;
  }
  60% {
    transform: scale(1.08) rotate(4deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0);
  }
}
.splash-title {
  color: #fff;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.28em;
  padding-left: 0.28em; /* compense le letter-spacing pour recentrer */
  margin-top: 22px;
  animation: fadeUp 0.6s ease 0.3s both;
}
.splash-dots {
  display: flex;
  gap: 7px;
  margin-top: 18px;
}
.splash-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  animation: splashDot 1s ease-in-out infinite;
}
.splash-dots span:nth-child(2) {
  animation-delay: 0.15s;
}
.splash-dots span:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes splashDot {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  50% {
    transform: translateY(-7px);
    opacity: 1;
  }
}

/* ===================== Charte du magasin (fond + carrousel) ================ */
.photo-carousel {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.photo-carousel::-webkit-scrollbar {
  display: none;
}
.photo-carousel-item {
  flex: 0 0 auto;
  width: 82%;
  max-width: 340px;
  height: 172px;
  object-fit: cover;
  border-radius: 18px;
  scroll-snap-align: center;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
}

/* Lien retour discret */
.back-link {
  color: var(--lumo-secondary-text-color) !important;
  font-weight: 600;
}
.back-link:hover {
  color: hsl(var(--brand-1)) !important;
}