/* ===========================================================
   AGENCE MOMAËL — Boutique de coins
   Palette : nuit profonde + or + accents plateforme
   =========================================================== */

:root {
  --night: #100E26;
  --night-2: #1A1740;
  --panel: #1F1B4A;
  --gold: #E8B84B;
  --gold-soft: #F3D686;
  --purple: #8B6FF0;
  --maroon: #6E1530;
  --maroon-soft: #A83A5C;
  --whatsapp: #25D366;
  --whatsapp-dark: #1DA851;
  --text: #F5F2E8;
  --text-muted: #B3ADD9;
  --danger: #FF6B6B;
  --radius: 18px;
  --radius-sm: 10px;
  --font-display: "Baloo 2", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;

  /* ===========================================================
     SYSTÈME DE BOUTONS — AGENCE MOMAËL
     Un seul vrai socle partagé, pour que chaque bouton du site,
     ancien comme nouveau, parle exactement le même langage visuel.
     Sobre, tactile, jamais un simple effet décoratif sans raison.
     =========================================================== */
  --btn-radius: 13px;
  --btn-radius-lg: 15px;
  --btn-radius-sm: 10px;
  --btn-h-lg: 56px;
  --btn-h-md: 46px;
  --btn-h-sm: 38px;
  --btn-transition: filter 130ms ease, transform 90ms ease, box-shadow 130ms ease, background 130ms ease, border-color 130ms ease;

  /* Primary — la vraie signature dorée, jamais un simple dégradé
     spectaculaire, une surface pleine avec une ombre douce. */
  --btn-primary-bg: #E8B84B;
  --btn-primary-text: #221701;
  --btn-primary-shadow: 0 1px 0 rgba(255,255,255,0.22) inset, 0 6px 16px rgba(232,184,75,0.2);
  --btn-primary-shadow-hover: 0 1px 0 rgba(255,255,255,0.22) inset, 0 8px 20px rgba(232,184,75,0.26);

  /* Secondary — surface sombre, jamais concurrente du doré */
  --btn-secondary-bg: rgba(255,255,255,0.05);
  --btn-secondary-bg-hover: rgba(255,255,255,0.08);
  --btn-secondary-border: rgba(255,255,255,0.12);
  --btn-secondary-text: var(--text);

  /* Destructive — un rouge professionnel, jamais agressif */
  --btn-destructive-bg: rgba(224,90,90,0.13);
  --btn-destructive-bg-hover: rgba(224,90,90,0.2);
  --btn-destructive-border: rgba(224,90,90,0.3);
  --btn-destructive-text: #E88585;

  /* Success — un vert discret, jamais néon */
  --btn-success-bg: rgba(90,196,150,0.14);
  --btn-success-bg-hover: rgba(90,196,150,0.2);
  --btn-success-border: rgba(90,196,150,0.32);
  --btn-success-text: #6FE0AE;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: radial-gradient(ellipse at top, #211C50 0%, var(--night) 55%, #0A0918 100%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.5;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.wrap {
  max-width: 460px;
  margin: 0 auto;
  padding: 0 18px 60px;
}

/* ---------- Header ---------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 18px 10px;
  max-width: 460px;
  margin: 0 auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}

.brand .coin {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(232,184,75,0.25), 0 4px 12px rgba(0,0,0,0.4);
}

.brand .coin img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.back-link {
  font-size: 0.85rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
}

/* ---------- Bannière avec barre d'annonces attachée dessous, voir plus bas ---------- */

.sr-h1 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1.3;
  text-align: center;
  margin: 22px auto 20px;
  max-width: 360px;
  background: linear-gradient(120deg, var(--gold-soft), var(--gold) 45%, #FFFFFF);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Hero (home) ---------- */

/* ===========================================================
   Bannière premium — un seul bloc visuel composé de deux parties
   soudées : la barre d'annonce en haut (étiquette fixe + texte
   défilant), l'image en bas. Même famille de coins arrondis sur
   les deux pour qu'elles se lisent comme un seul composant.
   =========================================================== */
.banner-block {
  margin: 14px -18px 0;
}

.banner-stage {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
}

.announce-bar {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 22px;
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 3;
  background: linear-gradient(180deg, rgba(10,8,26,0.82) 0%, rgba(10,8,26,0.5) 55%, transparent 100%);
  pointer-events: none;
}
.announce-bar.ready { display: flex; }

.announce-label {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #2A1D02;
  background: linear-gradient(120deg, var(--gold-soft), var(--gold));
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.announce-scroll {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.announce-track {
  --announce-speed: 26s; /* seule valeur à changer pour ajuster la vitesse */
  display: flex;
  width: max-content;
  white-space: nowrap;
  will-change: transform;
  animation: announce-scroll-x var(--announce-speed) linear infinite;
}
.announce-scroll:hover .announce-track { animation-play-state: paused; }

.announce-item {
  font-size: 0.8rem;
  color: var(--text);
  padding-right: 28px;
  position: relative;
}
.announce-item::after {
  content: "•";
  position: absolute;
  right: 10px;
  color: var(--gold-soft);
}
.announce-item-expired {
  color: var(--text-muted);
  filter: grayscale(1);
  opacity: 0.6;
}
.announce-item-expired b {
  color: #FF6B6B;
  font-weight: 800;
  letter-spacing: 0.03em;
}

@keyframes announce-scroll-x {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .announce-track { animation: none; }
}

/* L'image, ratio toujours préservé — jamais étirée ni déformée. Hauteur
   fixe pour un rendu stable, object-fit: contain plutôt que cover, pour ne
   jamais couper le personnage ou les numéros affichés sur les bords de
   l'image elle-même. */
.banner-img-wrap {
  height: 168px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--night-2);
  box-shadow: 0 14px 32px rgba(0,0,0,0.38);
  position: relative;
}
.banner-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Un vrai voile dégradé, jamais une barre pleine — sombre juste derrière
   le texte, puis transparent en descendant, pour que l'image reste
   entièrement visible pendant que le texte reste toujours lisible,
   peu importe les couleurs en dessous. */
.banner-overlay-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: 10px 16px 26px;
  background: linear-gradient(180deg, rgba(10,8,26,0.82) 0%, rgba(10,8,26,0.5) 55%, transparent 100%);
  z-index: 3;
  pointer-events: none;
}
.banner-headline {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
  margin: 0;
  line-height: 1.25;
}
.banner-subtext {
  font-size: 0.76rem;
  color: rgba(255,255,255,0.88);
  margin: 3px 0 0;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.banner-overlay-bottom {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 22px 16px 12px;
  background: linear-gradient(0deg, rgba(10,8,26,0.75) 0%, transparent 100%);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  z-index: 3;
  pointer-events: none;
}
.banner-cta {
  font-size: 0.72rem;
  font-weight: 700;
  color: #2A1D02;
  background: linear-gradient(120deg, var(--gold-soft), var(--gold));
  padding: 6px 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 3px 10px rgba(232,184,75,0.35);
}

/* Surprise : quand une bannière a une vraie date de fin proche, un petit
   compte à rebours discret apparaît tout seul, sans jamais avoir besoin
   de le configurer — une vraie urgence, jamais fabriquée artificiellement. */
.banner-countdown {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.66rem;
  font-weight: 800;
  color: #fff;
  background: rgba(220,38,38,0.88);
  backdrop-filter: blur(4px);
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(220,38,38,0.4);
  animation: countdown-pulse 2s ease-in-out infinite;
}
.banner-countdown svg { width: 11px; height: 11px; flex-shrink: 0; }
@keyframes countdown-pulse {
  0%, 100% { box-shadow: 0 3px 10px rgba(220,38,38,0.35); }
  50% { box-shadow: 0 3px 16px rgba(220,38,38,0.6); }
}
@media (prefers-reduced-motion: reduce) {
  .banner-countdown { animation: none; }
}

/* Plusieurs bannières empilées au même endroit — un vrai fondu enchaîné
   avec un très léger zoom, jamais un glissement brutal. Une seule reste
   visible à la fois (opacity 1), les autres attendent en silence. */
.banner-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1.1s ease, transform 1.4s ease;
  pointer-events: none;
}
.banner-slide.active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.banner-slide a { display: block; width: 100%; height: 100%; }

.banner-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}
.banner-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s ease, width 0.2s ease;
}
.banner-dot.active {
  background: var(--gold-soft);
  width: 20px;
  border-radius: 4px;
}

@media (min-width: 420px) {
  .banner-img-wrap { height: 190px; }
}

@media (max-width: 380px) {
  .announce-label { font-size: 0.64rem; padding: 5px 9px; }
  .announce-item { font-size: 0.72rem; padding-right: 20px; }
}

.hero {
  text-align: center;
  padding: 20px 0 8px;
}

.hero .eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-soft);
  background: rgba(232,184,75,0.1);
  border: 1px solid rgba(232,184,75,0.3);
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.hero h1 {
  font-family: var(--font-display);
  font-size: 2.1rem;
  line-height: 1.15;
  margin: 0 0 10px;
  background: linear-gradient(120deg, var(--gold-soft), var(--gold) 45%, #FFFFFF);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero p {
  color: var(--text-muted);
  font-size: 0.95rem;
  max-width: 340px;
  margin: 0 auto;
}

/* ---------- Fil d'activité en direct — signature de la page,
   construit à partir de vraies commandes, jamais de faux chiffres ---------- */
.live-ticker {
  max-width: 400px;
  margin: 14px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
  min-height: 18px;
}
.live-ticker .pulse-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--purple); flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(139,111,240,0.6);
  animation: live-pulse 1.8s ease-out infinite;
}
@keyframes live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(139,111,240,0.55); }
  70% { box-shadow: 0 0 0 7px rgba(139,111,240,0); }
  100% { box-shadow: 0 0 0 0 rgba(139,111,240,0); }
}
.live-ticker-text {
  font-size: 0.74rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: live-ticker-fade 0.4s ease;
}
.live-ticker-text b { color: var(--gold-soft); font-weight: 700; }
@keyframes live-ticker-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .live-ticker .pulse-dot { animation: none; }
  .live-ticker-text { animation: none; }
}

/* ---------- Boutons d'action du hero : la première invitation à agir ---------- */
.hero-cta-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 20px;
}

.hero-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 180ms ease;
}
@media (hover: hover) {
  .hero-cta-link:hover { color: var(--gold-soft); }
}

.hero-track-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 10px 16px 10px 12px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid rgba(232,184,75,0.22);
  text-decoration: none;
  max-width: 320px;
  transition: border-color 200ms ease, background 200ms ease, transform 200ms ease;
}
.hero-track-pill .htp-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(232,184,75,0.12);
  color: var(--gold-soft);
  position: relative;
}
.hero-track-pill .htp-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(232,184,75,0.35);
  animation: htp-pulse 2.2s ease-out infinite;
}
.hero-track-pill .htp-icon svg { position: relative; z-index: 1; }
@keyframes htp-pulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-track-pill .htp-icon::before { animation: none; display: none; }
}
.hero-track-pill .htp-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.hero-track-pill .htp-title {
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
}
.hero-track-pill .htp-sub {
  font-size: 0.68rem;
  color: var(--text-muted);
  line-height: 1.2;
}
.hero-track-pill .htp-arrow {
  flex-shrink: 0;
  margin-left: auto;
  color: var(--text-muted);
  transition: transform 200ms ease, color 200ms ease;
}
@media (hover: hover) {
  .hero-track-pill:hover {
    border-color: rgba(232,184,75,0.5);
    background: linear-gradient(160deg, rgba(232,184,75,0.09), rgba(255,255,255,0.02));
    transform: translateY(-1px);
  }
  .hero-track-pill:hover .htp-arrow { transform: translateX(3px); color: var(--gold-soft); }
}
@media (max-width: 480px) {
  .hero-track-pill { max-width: 100%; }
}

.hero-cta-main,
.hero-cta-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.87rem;
  text-decoration: none;
  transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 220ms ease, background 220ms ease, border-color 220ms ease;
}

.video-banner-cta {
  position: relative;
  max-width: 480px;
  margin: 22px auto 0;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid rgba(232,184,75,0.55);
  box-shadow: 0 0 0 0 rgba(232,184,75,0.45);
  animation: video-banner-glow 2.4s ease-in-out infinite;
}
@keyframes video-banner-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232,184,75,0.45); }
  50% { box-shadow: 0 0 0 10px rgba(232,184,75,0); }
}
.video-banner-cta img {
  width: 100%;
  aspect-ratio: 16/7;
  object-fit: cover;
  display: block;
}
.video-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(8,6,20,0.88) 0%, rgba(8,6,20,0.25) 55%, rgba(8,6,20,0.1) 100%);
}
.video-banner-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -60%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--gold);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}
.video-banner-pulse-dot {
  position: absolute;
  top: 10px; right: 10px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #FF3C3C;
  box-shadow: 0 0 0 0 rgba(255,60,60,0.7);
  animation: video-banner-dot-pulse 1.6s ease-out infinite;
}
@keyframes video-banner-dot-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,60,60,0.7); }
  70% { box-shadow: 0 0 0 9px rgba(255,60,60,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,60,60,0); }
}
.video-banner-text {
  position: absolute;
  left: 16px; bottom: 12px; right: 16px;
}
.video-banner-badge {
  display: inline-block;
  background: rgba(255,60,60,0.92);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 999px;
  margin-bottom: 5px;
  letter-spacing: 0.03em;
}
.video-banner-text strong {
  display: block;
  color: #fff;
  font-size: 0.9rem;
  font-family: var(--font-display);
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}
@media (prefers-reduced-motion: reduce) {
  .video-banner-cta { animation: none; }
}

.hero-cta-main {
  background: linear-gradient(120deg, var(--gold-soft), var(--gold));
  color: #2A1D02;
  box-shadow: 0 8px 24px rgba(232,184,75,0.34);
}
.hero-cta-main:active { transform: scale(0.94); }
@media (hover: hover) {
  .hero-cta-main:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(232,184,75,0.45); }
}

.hero-cta-ghost {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--text-muted);
}
.hero-cta-ghost:active { transform: scale(0.94); }
@media (hover: hover) {
  .hero-cta-ghost:hover { border-color: rgba(232,184,75,0.4); color: var(--gold-soft); }
}

.trust-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 20px 0 28px;
}

.trust-chip {
  font-size: 0.72rem;
  color: var(--text-muted);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 7px 13px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: border-color 220ms ease, color 220ms ease;
}

.trust-chip svg { flex-shrink: 0; color: var(--gold-soft); }
@media (hover: hover) {
  .trust-chip:hover { border-color: rgba(232,184,75,0.3); color: var(--text); }
}

.trust-chip .dot { color: var(--gold); }

/* ---------- Product grid ---------- */

.app-hub-filter-btn {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.035);
  backdrop-filter: blur(8px);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.app-hub-filter-btn:hover { border-color: rgba(232,184,75,0.35); color: var(--text); transform: translateY(-1px); }
.app-hub-filter-btn.active {
  background: linear-gradient(135deg, #f4d06d, #c9932f);
  color: #241b03;
  border-color: rgba(255,231,157,0.5);
  box-shadow: 0 4px 18px rgba(232,184,75,0.35), inset 0 1px 0 rgba(255,255,255,0.4);
  transform: translateY(-1px);
}

.section-label {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--text);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-label::before {
  content: "";
  width: 4px;
  height: 18px;
  background: var(--gold);
  border-radius: 4px;
}

.product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.product-card {
  background: linear-gradient(165deg, var(--panel), #15122E);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.product-card:active { transform: scale(0.97); }
.product-card:hover { border-color: rgba(232,184,75,0.35); box-shadow: 0 10px 28px -12px rgba(232,184,75,0.3); }

.product-card .thumb {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
}

.product-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-card .thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(16,14,38,0.92) 0%, rgba(16,14,38,0.1) 55%);
}

.platform-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  color: #1A1023;
}

.platform-tag.tello { background: var(--gold-soft); }
.platform-tag.glow { background: #E4A0B6; }

.corner-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  color: #fff;
}
.corner-badge.bestseller { background: linear-gradient(120deg, #FF6B6B, #FF8A5B); }
.corner-badge.new { background: linear-gradient(120deg, #6FE8CF, #4FC3A1); color: #06331F; }
.recharging-watermark {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #fff;
  background: rgba(0,0,0,0.25);
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

.product-card .info {
  padding: 12px 12px 14px;
}

.product-card h3 {
  font-family: var(--font-display);
  font-size: 0.98rem;
  margin: 0 0 4px;
}

.product-card .from-price {
  font-size: 0.78rem;
  color: var(--gold-soft);
  font-weight: 600;
  margin-bottom: 10px;
}

.btn {
  display: block;
  text-align: center;
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--btn-radius);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  border: none;
  cursor: pointer;
  position: relative;
  transition: var(--btn-transition);
}
.btn:active { transform: scale(0.98); }
@media (hover: hover) {
  .btn:hover { filter: brightness(1.05); }
}

.btn-gold {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  box-shadow: var(--btn-primary-shadow);
}
.btn-gold:active { box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 3px 10px rgba(232,184,75,0.18); filter: brightness(0.97); }
@media (hover: hover) {
  .btn-gold:hover { box-shadow: var(--btn-primary-shadow-hover); }
}

.btn-whatsapp {
  background: var(--whatsapp);
  color: #06210F;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.98rem;
  padding: 15px 14px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 6px 16px rgba(37,158,94,0.22);
}
.btn-whatsapp:active { box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 3px 10px rgba(37,158,94,0.18); transform: scale(0.98); }

/* ===========================================================
   Le vrai système complet de variantes — utilisable partout,
   jamais forcé sur ce qui fonctionne déjà correctement ailleurs.
   =========================================================== */

/* Secondary — action réelle, jamais concurrente du primary */
.btn-sys-secondary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border: 1px solid var(--btn-secondary-border);
  border-radius: var(--btn-radius);
  font-weight: 700; font-size: 0.85rem;
  padding: 12px 16px; cursor: pointer;
  transition: var(--btn-transition);
}
.btn-sys-secondary:active { transform: scale(0.98); background: var(--btn-secondary-bg-hover); }
@media (hover: hover) { .btn-sys-secondary:hover { background: var(--btn-secondary-bg-hover); } }

/* Tertiary — plus discret encore, texte doré, jamais de vraie surface */
.btn-sys-tertiary {
  background: rgba(232,184,75,0.08); color: var(--gold-soft);
  border: none; border-radius: var(--btn-radius);
  font-weight: 700; font-size: 0.83rem;
  padding: 10px 14px; cursor: pointer;
  transition: var(--btn-transition);
}
.btn-sys-tertiary:active { transform: scale(0.98); background: rgba(232,184,75,0.14); }

/* Ghost — quasi invisible au repos, une vraie action tertiaire */
.btn-sys-ghost {
  background: none; color: var(--text-muted);
  border: none; border-radius: var(--btn-radius-sm);
  font-weight: 600; font-size: 0.82rem;
  padding: 9px 12px; cursor: pointer;
  transition: var(--btn-transition);
}
.btn-sys-ghost:active { background: rgba(255,255,255,0.06); }
@media (hover: hover) { .btn-sys-ghost:hover { background: rgba(255,255,255,0.05); color: var(--text); } }

/* Outline — bordure fine et précise, jamais de contour lumineux épais */
.btn-sys-outline {
  background: transparent; color: var(--text);
  border: 1.5px solid rgba(255,255,255,0.18); border-radius: var(--btn-radius);
  font-weight: 700; font-size: 0.85rem;
  padding: 11px 16px; cursor: pointer;
  transition: var(--btn-transition);
}
.btn-sys-outline:active { transform: scale(0.98); }
@media (hover: hover) { .btn-sys-outline:hover { border-color: rgba(232,184,75,0.4); } }

/* Destructive — rouge professionnel, jamais agressif */
.btn-sys-destructive {
  background: var(--btn-destructive-bg); color: var(--btn-destructive-text);
  border: 1px solid var(--btn-destructive-border); border-radius: var(--btn-radius);
  font-weight: 700; font-size: 0.85rem;
  padding: 11px 16px; cursor: pointer;
  transition: var(--btn-transition);
}
.btn-sys-destructive:active { transform: scale(0.98); background: var(--btn-destructive-bg-hover); }
@media (hover: hover) { .btn-sys-destructive:hover { background: var(--btn-destructive-bg-hover); } }

/* Success — vert discret, jamais néon */
.btn-sys-success {
  background: var(--btn-success-bg); color: var(--btn-success-text);
  border: 1px solid var(--btn-success-border); border-radius: var(--btn-radius);
  font-weight: 700; font-size: 0.85rem;
  padding: 11px 16px; cursor: pointer;
  transition: var(--btn-transition);
}
.btn-sys-success:active { transform: scale(0.98); background: var(--btn-success-bg-hover); }
@media (hover: hover) { .btn-sys-success:hover { background: var(--btn-success-bg-hover); } }

/* Icon-only — vraie zone tactile suffisante, jamais un simple SVG nu */
.btn-sys-icon {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-muted); cursor: pointer;
  transition: var(--btn-transition);
}
.btn-sys-icon:active { transform: scale(0.92); background: rgba(255,255,255,0.1); }
@media (hover: hover) { .btn-sys-icon:hover { color: var(--text); background: rgba(255,255,255,0.08); } }

/* Tailles, combinables avec n'importe quelle variante ci-dessus */
.btn-sys-lg { height: var(--btn-h-lg); padding-left: 20px; padding-right: 20px; font-size: 0.95rem; border-radius: var(--btn-radius-lg); }
.btn-sys-sm { height: var(--btn-h-sm); padding: 0 12px; font-size: 0.78rem; }

/* État loading, partagé par toute variante — conserve toujours la
   largeur du bouton, jamais de déplacement de l'interface. */
.btn-sys-loading { pointer-events: none; opacity: 0.85; }
.btn-sys-loading .btn-sys-spinner {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  opacity: 0.5; animation: btn-sys-spin 0.7s linear infinite;
  display: inline-block; vertical-align: middle;
}
@keyframes btn-sys-spin { to { transform: rotate(360deg); } }

/* État disabled — un vrai contraste conservé, jamais juste "gris et invisible" */
button:disabled, .btn-sys-secondary:disabled, .btn-sys-outline:disabled {
  opacity: 0.5; cursor: not-allowed; filter: grayscale(0.4);
}

@media (prefers-reduced-motion: reduce) {
  .btn, .btn-gold, .btn-whatsapp, [class*="btn-sys-"] { transition: none; }
  .btn-sys-spinner { animation-duration: 1.4s; }
}

/* ===========================================================
   Signature "Valider ma commande" — le bouton s'incline doucement
   d'un côté, revient, puis de l'autre, comme un vrai petit saut d'une
   jambe sur l'autre. Une vraie invitation discrète à cliquer, jamais
   un simple rebond vertical répété sans fin. ===========================================================*/
.btn-order-submit {
  animation: order-btn-rock 3.4s ease-in-out infinite;
  transform-origin: 50% 100%;
}
@keyframes order-btn-rock {
  0%, 58%, 100% { transform: rotate(0deg); }
  8%  { transform: rotate(-3.5deg); }
  18% { transform: rotate(0deg); }
  28% { transform: rotate(3.5deg); }
  38% { transform: rotate(0deg); }
}
.btn-order-submit:active { animation-play-state: paused; transform: scale(0.96) rotate(0deg); }

/* ===========================================================
   Signature "Suivre ma commande" — un vrai reflet lumineux qui
   traverse le bouton de gauche à droite, périodiquement, jamais en
   continu. Un vrai clin d'œil discret, pas un effet qui fatigue l'œil. ===========================================================*/
.btn-track-shine { position: relative; overflow: hidden; }
.btn-track-shine::after {
  content: "";
  position: absolute; top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: skewX(-20deg);
  animation: track-btn-shine 3.2s ease-in-out infinite;
  animation-delay: 1s;
}
@keyframes track-btn-shine {
  0%, 30% { left: -60%; }
  55%, 100% { left: 130%; }
}

@media (prefers-reduced-motion: reduce) {
  .btn-order-submit { animation: none; }
  .btn-track-shine::after { display: none; }
}

/* ===== Choix du moyen de paiement (Wave / Orange Money / autre) ===== */
.pm-choice-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(3px); z-index: 998; align-items: flex-end; justify-content: center; padding: 0; }
.pm-choice-overlay.open { display: flex; }
.pm-choice-modal {
  background: linear-gradient(165deg, var(--panel), #14112f);
  border-radius: 22px 22px 0 0;
  width: 100%; max-width: 460px;
  padding: 24px 20px calc(22px + env(safe-area-inset-bottom));
  border: 1px solid rgba(232,184,75,0.18);
  box-shadow: 0 -12px 40px rgba(0,0,0,0.45);
  animation: pm-modal-rise 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes pm-modal-rise {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.pm-choice-modal h3 { margin: 0 0 4px; font-size: 1.08rem; font-family: var(--font-display); }
.pm-choice-amount { font-size: 0.85rem; color: var(--text-muted); margin: 0 0 18px; }
.pm-choice-amount small { display: block; font-size: 0.7rem; opacity: 0.75; margin-top: 3px; }
.pm-choice-amount b { color: var(--gold-soft); }

/* Une vraie carte par moyen de paiement, plutôt qu'un simple bouton
   plat — le logo réel, un vrai repère "le plus rapide" sur celui qui
   le mérite, une phrase de réassurance jamais interchangeable d'une
   carte à l'autre. */
.pm-choice-btn {
  display: flex; align-items: center; gap: 13px;
  width: 100%; padding: 13px 15px; border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  font-size: 0.92rem; font-weight: 700; margin-bottom: 10px;
  text-align: left; position: relative;
  transition: transform 0.12s ease, border-color 0.12s ease;
  color: var(--text);
}
.pm-choice-btn:active { transform: scale(0.98); }
.pm-choice-btn.recommended { border-color: rgba(232,184,75,0.4); background: rgba(232,184,75,0.06); }
.pm-choice-recommended-tag {
  position: absolute; top: -8px; right: 12px;
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.02em;
  background: linear-gradient(120deg, var(--gold-soft), var(--gold));
  color: #2A1D02; padding: 3px 9px; border-radius: 999px;
}
.pm-choice-icon {
  width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; background: rgba(255,255,255,0.06);
  padding: 8px;
}
.pm-choice-icon img { width: 100%; height: 100%; object-fit: contain; }
.pm-choice-btn small { display: block; font-weight: 400; font-size: 0.72rem; opacity: 0.7; margin-top: 2px; color: var(--text-muted); }

.pm-choice-loading { text-align: center; padding: 24px 10px; color: var(--text-muted); font-size: 0.83rem; }
.pm-choice-empty { text-align: center; padding: 20px 10px; color: var(--text-muted); font-size: 0.83rem; border-radius: 12px; border: 1px solid transparent; }
.pm-choice-blocked { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); }
.pm-choice-no-method { background: rgba(139,111,240,0.06); border-color: rgba(139,111,240,0.2); }
.pm-choice-connection-error { background: rgba(245,191,47,0.06); border-color: rgba(245,191,47,0.2); }
.pm-choice-server-error { background: rgba(255,107,107,0.06); border-color: rgba(255,107,107,0.3); }
.pm-choice-cancel { display: block; width: 100%; text-align: center; padding: 10px; margin-top: 4px; background: none; border: none; color: var(--text-muted); font-size: 0.82rem; }

/* Un vrai bandeau de confiance discret — le genre de petit repère que
   les grandes plateformes affichent précisément au moment où l'argent
   change de main. */
.pm-trust-footer {
  display: flex; justify-content: center; gap: 14px;
  margin: 6px 0 12px; flex-wrap: wrap;
}
.pm-trust-footer span {
  font-size: 0.66rem; color: var(--text-muted);
  display: flex; align-items: center; gap: 4px;
}

/* ---------- Le vrai rituel : une pièce d'or qui se retourne, le
   temps que la commande s'enregistre déjà en arrière-plan — jamais
   un pur temps d'attente ajouté, habille un délai qui existait déjà. ---------- */
.coin-stage {
  display: flex; justify-content: center; align-items: center;
  height: 120px; perspective: 600px;
  margin: 20px 0 4px;
}
.coin-3d {
  width: 84px; height: 84px;
  position: relative;
  transform-style: preserve-3d;
  animation: coin-flip 1.1s cubic-bezier(0.45, 0, 0.2, 1) forwards;
}
@keyframes coin-flip {
  0% { transform: rotateY(0deg) scale(0.7); }
  55% { transform: rotateY(900deg) scale(1.08); }
  100% { transform: rotateY(1080deg) scale(1); }
}
.coin-face {
  position: absolute; inset: 0;
  border-radius: 50%;
  backface-visibility: hidden;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 22px rgba(232,184,75,0.4), inset 0 2px 4px rgba(255,255,255,0.4), inset 0 -3px 6px rgba(0,0,0,0.25);
  border: 2px solid rgba(255,255,255,0.35);
}
.coin-front { background: linear-gradient(155deg, var(--gold-soft), var(--gold)); padding: 16px; }
.coin-front img { width: 100%; height: 100%; object-fit: contain; }
.coin-back {
  background: linear-gradient(155deg, var(--gold-soft), var(--gold));
  transform: rotateY(180deg);
  font-size: 2.2rem; font-weight: 800; color: #2A1D02;
}
.coin-shine {
  position: absolute; top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-20deg);
  animation: coin-shine-sweep 1.1s ease forwards;
}
@keyframes coin-shine-sweep {
  0%, 40% { left: -60%; opacity: 0; }
  55% { opacity: 1; }
  100% { left: 130%; opacity: 0; }
}
.coin-amount-label {
  text-align: center; margin: 6px 0 2px;
  font-size: 1.15rem; font-family: var(--font-display);
  animation: coin-text-in 0.4s ease 0.55s both;
}
.coin-amount-label b { color: var(--gold-soft); }
.coin-sub-label {
  text-align: center; margin: 0; padding-bottom: 8px;
  font-size: 0.78rem; color: var(--text-muted);
  animation: coin-text-in 0.4s ease 0.7s both;
}
@keyframes coin-text-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .coin-3d, .coin-shine, .coin-amount-label, .coin-sub-label { animation-duration: 0.01s; }
}

/* ---------- Footer ---------- */

.site-footer {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.72rem;
  padding: 30px 18px 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: 34px;
}

.site-footer .signature {
  color: var(--gold-soft);
  font-family: var(--font-display);
  font-size: 0.85rem;
  margin-bottom: 6px;
}

/* ===========================================================
   PRODUCT PAGE
   =========================================================== */

.product-hero {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  margin: 16px 0 20px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}

.product-hero img { width: 100%; }

.product-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.product-title-row h1 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  margin: 0;
}

.seller-id {
  font-size: 0.72rem;
  color: var(--text-muted);
  background: rgba(255,255,255,0.06);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.range-note {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin: 0 0 18px;
}

.range-note b { color: var(--gold-soft); }

/* ---- Floating tier bubbles (signature element) ---- */
/* Chaque palier est une bulle sélectionnable : zoom + halo doré sur le choix,
   flou + retrait léger sur les autres. */

.tier-hint {
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0 0 14px;
}

.recharging-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 18px;
  padding: 24px 20px;
  background: rgba(8,6,20,0.55);
  backdrop-filter: blur(1px);
  border-radius: 16px;
}
.recharging-anim {
  width: 200px;
  max-width: 80%;
  height: auto;
  overflow: visible;
}
.rc-coin { animation: rc-float 2.6s ease-in-out infinite; transform-origin: center; }
.rc-coin-2 { animation-delay: 0.4s; }
@keyframes rc-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
#rc-path {
  stroke-dashoffset: 0;
  animation: rc-flow 1.4s linear infinite;
}
@keyframes rc-flow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -22; }
}
.rc-wallet {
  animation: rc-glow 1.8s ease-in-out infinite;
  transform-origin: center;
}
@keyframes rc-glow {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(232,184,75,0.3)); }
  50% { filter: drop-shadow(0 0 12px rgba(232,184,75,0.95)); }
}
.recharging-overlay-text {
  max-width: 300px;
  font-family: var(--font-display, inherit);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--gold-soft, #E8B84B);
  text-shadow: 0 2px 12px rgba(0,0,0,0.7);
  margin: 0;
  line-height: 1.45;
  animation: rc-breathe 2.4s ease-in-out infinite;
}
@keyframes rc-breathe {
  0%, 100% { opacity: 0.75; transform: scale(0.985); }
  50% { opacity: 1; transform: scale(1); }
}
.recharging-hero-badge {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #fff;
  background: rgba(0,0,0,0.25);
  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
  border-radius: inherit;
}
@media (prefers-reduced-motion: reduce) {
  .rc-coin, #rc-path, .rc-wallet, .recharging-overlay-text { animation: none !important; }
}

.app-scroll { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 12px; scroll-snap-type: x mandatory; }
.app-scroll::-webkit-scrollbar { display: none; }
.app-tile {
  flex: 0 0 auto; width: 132px; scroll-snap-align: start;
  background: linear-gradient(165deg, var(--panel), #15122E);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 16px;
  overflow: hidden; text-decoration: none; color: var(--text);
  transition: transform 220ms cubic-bezier(0.34,1.56,0.64,1), border-color 220ms ease;
}
.app-tile:active { transform: scale(0.95); }
@media (hover:hover) { .app-tile:hover { transform: translateY(-3px); border-color: rgba(232,184,75,0.35); } }
.app-tile-img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; background: rgba(255,255,255,0.05); }
.app-tile-body { padding: 9px 10px 11px; }
.app-tile-name { font-family: var(--font-display); font-size: 0.82rem; margin-bottom: 2px; }
.app-tile-sub { font-size: 0.66rem; color: var(--text-muted); }

.home-section-head { display: flex; align-items: center; justify-content: space-between; margin: 22px 0 10px; }
.home-section-head h2 { font-family: var(--font-display); font-size: 1rem; margin: 0; display: flex; align-items: center; gap: 8px; }
.home-section-head h2::before { content:""; width:4px; height:17px; background:var(--gold); border-radius:4px; }
.home-section-head a { font-size: 0.76rem; color: var(--gold-soft); font-weight: 700; text-decoration: none; }

.tier-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 10px;
  padding: 6px 4px 18px;
}

.tier-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px;
  background: linear-gradient(160deg, rgba(31,27,74,0.92), rgba(20,17,55,0.92));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  backdrop-filter: blur(6px);
  cursor: pointer;
  font-family: var(--font-body);
  color: inherit;
  width: 100%;
  text-align: left;
  transition: transform 0.55s cubic-bezier(0.175, 0.885, 0.32, 1.275),
              box-shadow 0.5s ease,
              filter 0.5s ease,
              opacity 0.5s ease,
              border-color 0.5s ease;
}

.tier-card:active { transform: scale(0.98); }

.tier-card .tier-price {
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: var(--text);
}

.tier-card .tier-coins {
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: var(--gold-soft);
  text-align: right;
}

.tier-card .tier-arrow {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.tier-card.best-tier {
  border-color: rgba(232,184,75,0.35);
}

.tier-card.best-tier::before {
  content: "★ meilleure offre";
  position: absolute;
  top: -11px;
  left: 18px;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #2A1D02;
  background: var(--gold);
  padding: 3px 10px;
  border-radius: 999px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.3);
}

html[lang="en"] .tier-card.best-tier::before {
  content: "★ best offer";
}

.hot-badge {
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  background: #DC2626;
  color: #fff;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(220,38,38,0.55);
  animation: hot-pulse 1.6s ease-in-out infinite;
  z-index: 2;
}

@keyframes hot-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 3px 10px rgba(220,38,38,0.5); }
  50% { transform: scale(1.1); box-shadow: 0 3px 18px rgba(220,38,38,0.85); }
}

.tier-card.promo-tier {
  border-color: rgba(111,232,207,0.5);
  box-shadow: 0 0 0 1px rgba(111,232,207,0.2), 0 4px 16px rgba(111,232,207,0.15);
}
.promo-badge {
  display: block;
  margin-top: 6px;
  font-size: 0.68rem;
  font-weight: 800;
  color: #06231F;
  background: linear-gradient(120deg, #6FE8CF, #34B8A0);
  padding: 4px 9px;
  border-radius: 8px;
  width: fit-content;
}

/* Sélection : zoom avant + halo doré */
.tier-card.selected {
  transform: scale(1.06) translateY(-2px);
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(232,184,75,0.55) inset, 0 12px 34px rgba(232,184,75,0.28);
  background: linear-gradient(160deg, rgba(58,45,10,0.55), rgba(31,27,74,0.92));
}

.tier-card.selected::after {
  content: "✓";
  position: absolute;
  top: -10px;
  right: -10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gold);
  color: #2A1D02;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.8rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}

/* Non sélectionné une fois qu'un choix est fait : recul + flou léger */
.tier-card.dimmed {
  transform: scale(0.93);
  filter: blur(1.5px) brightness(0.55);
  opacity: 0.6;
}

.tier-list.invalid .tier-card {
  animation: tier-shake 0.4s ease;
}

.tier-error {
  display: none;
  text-align: center;
  font-size: 0.78rem;
  color: var(--danger);
  margin: -4px 0 18px;
}

.tier-list.invalid + .tier-error {
  display: block;
}

@keyframes tier-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* ---- Order form ---- */

.order-panel {
  background: linear-gradient(165deg, var(--panel), #171341);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  padding: 20px 18px 22px;
  scroll-margin-top: 90px;
}

.order-panel h2 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin: 0 0 4px;
}

.order-panel .sub {
  color: var(--text-muted);
  font-size: 0.82rem;
  margin: 0 0 18px;
}

.field {
  margin-bottom: 14px;
}

.field label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.field label .req { color: var(--gold); }

.field input,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  font-size: 0.95rem;
  font-family: var(--font-body);
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(232,184,75,0.06);
}

.field textarea { resize: vertical; min-height: 70px; }

.field .hint {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 5px;
  margin-bottom: 0;
}

.field .error {
  font-size: 0.75rem;
  color: var(--danger);
  margin-top: 5px;
  display: none;
}

.field.invalid input { border-color: var(--danger); }
.field.invalid .error { display: block; }

.backup-note {
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 14px;
}

.backup-note a { color: var(--gold-soft); font-weight: 600; }

.pay-icons {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 16px 0 0;
  flex-wrap: wrap;
}

.pay-icons span {
  font-size: 0.68rem;
  background: rgba(255,255,255,0.06);
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--text-muted);
}

@media (min-width: 480px) {
  .hero h1 { font-size: 2.4rem; }
}

/* ===========================================================
   NOUVEAUX BLOCS — conversion, confiance, recrutement, footer
   =========================================================== */

/* ---------- Bannière promo éditable ---------- */

.promo-banner {
  display: none;
  max-width: 720px;
  margin: 14px auto 0;
  padding: 0 12px;
}

.promo-banner.active { display: block; }

.promo-banner .promo-inner {
  background: linear-gradient(100deg, #3A2A05, #5C4310 45%, #3A2A05);
  border: 1px solid rgba(232,184,75,0.4);
  border-radius: 999px;
  padding: 10px 18px;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gold-soft);
  box-shadow: 0 8px 24px rgba(232,184,75,0.15);
}

.promo-banner .promo-inner b { color: #fff; }

/* ---------- Barre de réassurance paiement ---------- */

.trust-payment-bar {
  margin: 22px 0;
  padding: 16px;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  text-align: center;
}

.trust-payment-bar .label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.trust-payment-bar .logos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

/* Version accueil : liste complète des quinze moyens, puisqu'aucun pays
   ne peut être deviné sur une page statique. Vrai défilement navigable
   au doigt ou aux flèches, distinct du défilement automatique utilisé
   sur la commande une fois le pays réellement connu. */
.trust-carousel {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 100%;
}
.trust-carousel-scroll {
  flex-wrap: nowrap !important;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  justify-content: flex-start !important;
  -ms-overflow-style: none;
  scrollbar-width: none;
  width: 100%;
}
.trust-carousel-scroll::-webkit-scrollbar { display: none; }
.trust-carousel-scroll .trust-logo { scroll-snap-align: start; }

/* Vraies bulles flottantes, invisibles par défaut — n'apparaissent
   qu'au survol d'un des moyens de paiement, jamais fixes à l'écran. */
.trust-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(20,17,47,0.85);
  backdrop-filter: blur(4px);
  box-shadow: 0 3px 10px rgba(0,0,0,0.35);
  color: var(--gold-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 2;
}
.trust-nav-prev { left: -4px; }
.trust-nav-next { right: -4px; }

.trust-carousel:hover .trust-nav-btn,
.trust-carousel:focus-within .trust-nav-btn,
.trust-carousel.touched .trust-nav-btn {
  opacity: 1;
  pointer-events: auto;
}
.trust-nav-btn:active { background: rgba(232,184,75,0.16); }

.trust-payment-bar .logos.many-logos {
  flex-wrap: nowrap;
  overflow: hidden;
  justify-content: flex-start;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.trust-payment-bar .logos.many-logos .trust-logo-track {
  display: flex;
  gap: 10px;
  width: max-content;
  will-change: transform;
  animation: announce-scroll-x 18s linear infinite;
}
.trust-payment-bar .logos.many-logos:hover .trust-logo-track { animation-play-state: paused; }

.trust-logo {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}
.trust-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
  .trust-payment-bar .logos.many-logos .trust-logo-track { animation: none; overflow-x: auto; }
}

.trust-payment-bar .note {
  margin-top: 10px;
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* ---------- Comment ça marche ---------- */

.how-it-works {
  margin: 30px 0;
}

.how-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.how-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: linear-gradient(160deg, var(--panel), #15122E);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}

.how-step .num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--gold-soft), var(--gold));
  color: #2A1D02;
  font-family: var(--font-display);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}

.how-step .txt h3 {
  margin: 0 0 3px;
  font-family: var(--font-display);
  font-size: 0.92rem;
}

.how-step .txt p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ---------- Témoignages ---------- */

.testimonials {
  margin: 30px 0;
}

.testimonial-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 2px 14px;
  scroll-snap-type: x mandatory;
}

.testimonial-card {
  flex: 0 0 auto;
  width: 240px;
  scroll-snap-align: start;
  background: linear-gradient(160deg, var(--panel), #171341);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  padding: 16px;
}

.testimonial-card .stars {
  color: var(--gold);
  font-size: 0.85rem;
  margin-bottom: 8px;
}

.testimonial-card p {
  font-size: 0.82rem;
  color: var(--text);
  margin: 0 0 10px;
  line-height: 1.5;
}

.testimonial-card .who {
  font-size: 0.72rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.testimonial-card .who .avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--purple), #5B45C4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  color: #fff;
}

.review-member-badge {
  font-size: 0.7rem;
  vertical-align: middle;
}

/* ---------- FAQ ---------- */

.faq {
  margin: 30px 0;
}

.faq-item {
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.faq-question {
  width: 100%;
  background: none;
  border: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  text-align: left;
  padding: 14px 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.faq-question .icon {
  color: var(--gold);
  font-size: 1.1rem;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.faq-item.open .faq-question .icon { transform: rotate(45deg); }

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.faq-item.open .faq-answer { max-height: 240px; }

.faq-answer p {
  margin: 0;
  padding: 0 4px 16px;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.55;
}

/* ---------- Section Recrutement d'Hôtes (identité visuelle distincte) ---------- */

.hotes-teaser {
  margin: 34px 0 0;
  padding: 22px 18px;
  border-radius: var(--radius);
  background: linear-gradient(155deg, #0F2E2C, #0A2422 60%, #071917);
  border: 1px solid rgba(72, 219, 194, 0.3);
  text-align: center;
}

.hotes-teaser .eyebrow {
  display: inline-block;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6FE8CF;
  background: rgba(111,232,207,0.1);
  border: 1px solid rgba(111,232,207,0.3);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.hotes-teaser h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin: 0 0 8px;
  color: #E8FFF9;
}

.hotes-teaser p {
  font-size: 0.85rem;
  color: #B7E8DD;
  margin: 0 0 16px;
}

.btn-hotes {
  display: inline-block;
  background: linear-gradient(120deg, #6FE8CF, #38B89E);
  color: #052722;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 999px;
  font-size: 0.88rem;
}

/* ---------- Teaser avantages membre (page dédiée) ---------- */

.perks-teaser {
  margin: 30px 0;
  padding: 24px 18px;
  border-radius: var(--radius);
  background: linear-gradient(155deg, #221A4E, #191140 60%, #120C30);
  border: 1px solid rgba(139,111,240,0.35);
}

.perks-teaser .eyebrow {
  display: inline-block;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--purple);
  background: rgba(139,111,240,0.12);
  border: 1px solid rgba(139,111,240,0.3);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.perks-teaser h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin: 0 0 6px;
  color: var(--text);
}

.perks-teaser > p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0 0 18px;
}

.perks-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}

.perk-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  padding: 12px;
}

.perk-item svg { flex-shrink: 0; color: var(--purple); margin-top: 1px; }
.perk-item span { font-size: 0.78rem; color: var(--text); line-height: 1.35; }

.btn-perks {
  display: inline-block;
  background: linear-gradient(120deg, var(--purple), #6E52D6);
  color: #fff;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 999px;
  font-size: 0.88rem;
}

/* Page recrutement dédiée */

.hotes-page-hero {
  text-align: center;
  padding: 10px 0 20px;
}

.hotes-page-hero .eyebrow { margin-bottom: 12px; }

.hotes-page-hero h1 {
  font-family: var(--font-display);
  font-size: 1.7rem;
  color: #E8FFF9;
  margin: 0 0 10px;
}

.hotes-page-hero p {
  color: #B7E8DD;
  font-size: 0.9rem;
  max-width: 360px;
  margin: 0 auto;
}

.app-card {
  background: linear-gradient(160deg, #0F2E2C, #081E1C);
  border: 1px solid rgba(111,232,207,0.25);
  border-radius: var(--radius);
  padding: 20px 18px;
  margin-bottom: 20px;
}

.app-card h3 {
  font-family: var(--font-display);
  color: #E8FFF9;
  font-size: 1.1rem;
  margin: 0 0 4px;
}

.app-card .code {
  display: inline-block;
  font-size: 0.72rem;
  color: #6FE8CF;
  background: rgba(111,232,207,0.1);
  border: 1px solid rgba(111,232,207,0.3);
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.app-card ul {
  margin: 0 0 18px;
  padding: 0 0 0 18px;
  color: #CDEDE4;
  font-size: 0.82rem;
  line-height: 1.7;
}

.app-card ul li::marker { color: #6FE8CF; }

.app-card .btn-hotes { width: 100%; text-align: center; box-sizing: border-box; }

/* ---------- Footer pro à 3 blocs ---------- */

.footer-pro {
  margin-top: 20px;
  position: relative;
  padding-top: 34px;
}

.footer-pro::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-soft), transparent);
  opacity: 0.6;
}

.footer-pro .f-block {
  margin-bottom: 26px;
}

.footer-pro h4 {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--gold-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 12px;
}

.footer-pro .f-brand {
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin-bottom: 8px;
}

.footer-pro p {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 10px;
}

.footer-pro .f-links a {
  display: block;
  font-size: 0.82rem;
  color: var(--text-muted);
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.footer-pro .f-links a:last-child { border-bottom: none; }

.footer-pro .f-contact-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.footer-pro .f-contact-item svg { flex-shrink: 0; color: var(--gold-soft); opacity: 0.85; }

.footer-pro .social-row {
  display: flex;
  gap: 10px;
  margin: 12px 0;
}

.footer-pro .social-row a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.footer-pro .social-row a:hover { color: var(--gold-soft); border-color: rgba(232,184,75,0.4); }

.footer-pro .hours {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 10px;
}

.footer-pro .hours b { color: var(--gold-soft); }

.footer-pro .copyright {
  text-align: center;
  font-size: 0.7rem;
  color: var(--text-muted);
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.footer-pro .copyright-mark { display: inline-flex; vertical-align: middle; margin-right: 5px; color: var(--gold-soft); opacity: 0.7; }
.footer-pro .copyright b { color: var(--gold-soft); }

@media (min-width: 640px) {
  .footer-pro .f-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
  }
  .how-steps { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Menu horizontal ---------- */

.brand-link { text-decoration:none; color:inherit; }

.main-nav {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 0 18px 12px;
  max-width: 460px;
  margin: 0 auto;
}

.main-nav a {
  flex-shrink: 0;
  font-size: 0.78rem;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-muted);
}

.main-nav a.current {
  background: var(--gold);
  color: #2A1D02;
  font-weight: 700;
  border-color: var(--gold);
}

/* ---------- Espace pub ---------- */

.ad-slot {
  margin: 24px 0;
  padding: 16px;
  border-radius: var(--radius);
  border: 1px dashed rgba(255,255,255,0.18);
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.ad-slot.ad-slot-hidden {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

.ad-slot a {
  color: var(--gold-soft);
  font-weight: 600;
}

/* ---------- Champ téléphone : pays + numéro local ---------- */

.phone-row {
  display: flex;
  gap: 8px;
}

.auth-phone-row {
  display: flex;
  gap: 8px;
}

.phone-row select {
  flex: 0 0 108px;
  padding: 12px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  font-size: 0.85rem;
  font-family: var(--font-body);
}

.phone-row input {
  flex: 1;
}

.field .phone-input-wrap,
.auth-field .phone-input-wrap {
  position: relative;
  flex: 1;
}
.field .phone-input-wrap svg,
.auth-field .phone-input-wrap svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #25D366;
  z-index: 2;
}
.field .phone-input-wrap input,
.auth-field .phone-input-wrap input {
  width: 100%;
  padding-left: 36px !important;
  box-sizing: border-box;
}

/* ---------- Bouton WhatsApp flottant ---------- */

#floating-wa-btn {
  position: fixed;
  bottom: 104px;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(145deg, #25D366, #1DA851);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(37,211,102,0.45);
  z-index: 999;
  text-decoration: none;
  animation: wa-pulse 2.4s ease-in-out infinite;
}

@keyframes wa-pulse {
  0%, 100% { box-shadow: 0 8px 22px rgba(37,211,102,0.45); }
  50% { box-shadow: 0 8px 30px rgba(37,211,102,0.75); }
}

/* ---------- Badge % de bonus sur les paliers ---------- */

.bonus-pct {
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6rem;
  font-weight: 700;
  background: rgba(111,232,207,0.15);
  color: #6FE8CF;
  border: 1px solid rgba(111,232,207,0.35);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ---------- Assistant IA (widget de chat) ---------- */

#ai-chat-btn {
  position: fixed;
  bottom: 168px;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--gold-soft), var(--gold));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(232,184,75,0.4);
  z-index: 999;
  border: none;
  cursor: pointer;
}

#ai-chat-panel {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  max-width: 420px;
  margin: 0 auto;
  height: 70vh;
  max-height: 560px;
  background: linear-gradient(165deg, var(--panel), #14112f);
  border-radius: 20px 20px 0 0;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 -10px 40px rgba(0,0,0,0.5);
  z-index: 1000;
  display: none;
  flex-direction: column;
  overflow: hidden;
}

#ai-chat-panel.open { display: flex; }

.ai-chat-header {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ai-chat-header .title {
  font-family: var(--font-display);
  font-size: 0.95rem;
}

.ai-chat-header .title span {
  display: block;
  font-size: 0.68rem;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-weight: 400;
}

.ai-chat-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.3rem;
  cursor: pointer;
}

.ai-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ai-msg {
  max-width: 82%;
  padding: 10px 13px;
  border-radius: 14px;
  font-size: 0.85rem;
  line-height: 1.5;
}

.ai-msg.bot {
  align-self: flex-start;
  background: rgba(255,255,255,0.06);
  color: var(--text);
}
.ai-msg.bot b { color: var(--gold-soft); font-weight: 700; }
.ai-msg.bot a { color: #6FE8CF; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.ai-msg.bot a:active { opacity: 0.7; }

/* ---------- Cartes construites par le vrai code, jamais par l'IA
   elle-même — les données affichées sont toujours fraîches, jamais
   celles que le modèle aurait pu imaginer ou se rappeler de travers. ---------- */
.ai-order-card, .ai-app-card {
  display: block; margin: 6px 0 2px;
  background: linear-gradient(160deg, rgba(232,184,75,0.14), rgba(232,184,75,0.04));
  border: 1px solid rgba(232,184,75,0.3); border-radius: 14px; padding: 12px;
  animation: ai-card-in 0.3s ease;
}
@keyframes ai-card-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.ai-order-head { font-size: 0.78rem; font-weight: 800; color: var(--gold-soft); margin-bottom: 3px; }
.ai-order-body { font-size: 0.8rem; color: var(--text); margin-bottom: 4px; }
.ai-order-status { font-size: 0.76rem; font-weight: 700; margin-bottom: 9px; }
.ai-order-btn, .ai-app-btn {
  display: block; text-align: center; padding: 8px; border-radius: 10px;
  background: var(--btn-primary-bg); color: var(--btn-primary-text);
  font-size: 0.78rem; font-weight: 700; text-decoration: none;
}
.ai-app-card { display: flex; align-items: center; gap: 10px; }
.ai-app-card img { width: 42px; height: 42px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.ai-app-info { flex: 1; min-width: 0; }
.ai-app-name { font-size: 0.83rem; font-weight: 700; color: var(--text); }
.ai-app-price { font-size: 0.74rem; color: var(--text-muted); margin-top: 1px; }
.ai-app-btn { flex-shrink: 0; padding: 8px 13px; }

.ai-msg.user {
  align-self: flex-end;
  background: linear-gradient(120deg, var(--gold-soft), var(--gold));
  color: #2A1D02;
}

.ai-msg.typing { opacity: 0.6; font-style: italic; }

.ai-chat-input-row {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.ai-chat-input-row input {
  flex: 1;
  padding: 11px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  font-size: 0.85rem;
}

.ai-chat-input-row button {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(145deg, var(--gold-soft), var(--gold));
  font-size: 1.1rem;
  cursor: pointer;
}

/* ---------- Sélecteur de langue ---------- */

.lang-switch {
  display: inline-flex;
  gap: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  padding: 3px;
  width: fit-content;
  margin: 0 auto;
}

.lang-switch a {
  padding: 5px 10px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.lang-switch a.active {
  background: var(--gold);
  color: #2A1D02;
}

/* ===========================================================
   Navigation inférieure premium
   ===========================================================
   Barre flottante avec verre dépoli (glassmorphism), bouton
   central surélevé pour l'action principale, et pastilles de
   notification alimentées par de vraies données. Pensée mobile
   d'abord, masquée sur grand écran où elle n'a pas sa place.

   Structure HTML attendue (voir n'importe quelle page qui
   l'inclut pour un exemple complet) :

   <div class="premium-nav-spacer"></div>
   <nav class="premium-nav-wrap" aria-label="Navigation principale">
     <div class="premium-nav">
       <a class="premium-nav-item [active]" href="..." [aria-current="page"]>
         <svg>...</svg>
         <span class="premium-nav-label">Libellé</span>
         <span class="premium-nav-dot"></span>
         [<span class="premium-nav-badge">3</span>]
       </a>
       ... (répéter, avec le bouton central au milieu) ...
       <a class="premium-nav-center" href="...">
         <span class="premium-nav-center-btn"><svg>...</svg></span>
         <span class="premium-nav-label">Acheter</span>
       </a>
       ...
     </div>
   </nav>
   =========================================================== */

.premium-nav-spacer { height: 96px; }

.premium-nav-wrap {
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 997;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.premium-nav {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  max-width: 430px;
  padding: 9px 6px;
  border-radius: 26px;
  background: rgba(22, 18, 51, 0.72);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 18px 40px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06);
}

.premium-nav-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 1;
  padding: 7px 2px;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: 16px;
  transition: color 240ms ease, transform 240ms ease;
  -webkit-tap-highlight-color: transparent;
}

.premium-nav-label { font-size: 0.62rem; font-weight: 600; }

.premium-nav-item svg { transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1); }

.premium-nav-item:active { transform: scale(0.92); }

.premium-nav-item.active { color: #CAA24D; }
.premium-nav-item.active svg { transform: scale(1.16); }

.premium-nav-dot {
  position: absolute;
  bottom: 1px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #CAA24D;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 240ms ease, transform 240ms ease;
}
.premium-nav-item.active .premium-nav-dot { opacity: 1; transform: translateY(0); }

.premium-nav-badge {
  position: absolute;
  top: 3px;
  right: 16%;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--danger);
  border: 2px solid rgba(22, 18, 51, 0.95);
  color: #fff;
  font-size: 0.56rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.premium-nav-center {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
  margin-top: -30px;
  -webkit-tap-highlight-color: transparent;
}

.premium-nav-center-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, #F3D686, #CAA24D 65%, #B8873A);
  border: 3px solid rgba(22,18,51,0.95);
  box-shadow: 0 10px 26px rgba(202,162,77,0.5), inset 0 1px 1px rgba(255,255,255,0.4);
  color: #241804;
  transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: premium-nav-glow 3.2s ease-in-out infinite;
}

.premium-nav-center:active .premium-nav-center-btn { transform: scale(0.9); }

.premium-nav-center .premium-nav-label { font-size: 0.62rem; font-weight: 700; color: #CAA24D; margin-top: 4px; }

@keyframes premium-nav-glow {
  0%, 100% { box-shadow: 0 10px 26px rgba(202,162,77,0.5), inset 0 1px 1px rgba(255,255,255,0.4); }
  50% { box-shadow: 0 10px 34px rgba(202,162,77,0.8), inset 0 1px 1px rgba(255,255,255,0.5); }
}

.premium-nav-item:focus-visible,
.premium-nav-center-btn:focus-visible {
  outline: 2px solid #CAA24D;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .premium-nav-center-btn { animation: none; }
  .premium-nav-item, .premium-nav-item svg, .premium-nav-center-btn, .premium-nav-dot { transition: none; }
}

@media (min-width: 640px) {
  .premium-nav-wrap { display: none; }
  .premium-nav-spacer { display: none; }
  #floating-wa-btn { bottom: 20px; }
  #ai-chat-btn { bottom: 84px; }
}

/* ===========================================================
   Header premium — trois niveaux, sticky, contextuel
   ===========================================================
   Niveau 1 : barre principale (menu, logo centré, notifications,
              messages, profil).
   Niveau 2 : recherche flottante.
   Niveau 3 : barre intelligente, contenu réel uniquement (promo,
              nouvelle application, commande active).

   Se rétracte légèrement au défilement vers le bas, réapparaît
   au défilement vers le haut. Respecte les zones de sécurité des
   appareils à encoche.
   =========================================================== */

.ph-header {
  position: sticky;
  top: 0;
  z-index: 950;
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(16, 14, 38, 0.78);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ph-header.ph-retract { transform: translateY(-64px); }

.ph-bar1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  gap: 10px;
  position: relative;
}

.ph-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0; /* permet au nom de se réduire proprement plutôt que de déborder */
}

.ph-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.06);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  transition: background 200ms ease, transform 200ms ease;
}
.ph-icon-btn:active { transform: scale(0.9); }

.ph-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--danger);
  border: 2px solid rgba(16,14,38,0.95);
  color: #fff;
  font-size: 0.56rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

#notif-bell.ringing { animation: ph-bell-ring 0.6s ease; }
@keyframes ph-bell-ring {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(18deg); }
  30% { transform: rotate(-16deg); }
  45% { transform: rotate(12deg); }
  60% { transform: rotate(-8deg); }
  75% { transform: rotate(4deg); }
}

.ph-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 46vw;
}
.ph-logo img { width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; }

@media (max-width: 360px) {
  .ph-logo { font-size: 0.82rem; max-width: 40vw; }
}

.ph-right { display: flex; align-items: center; gap: 6px; }

.ph-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(202,162,77,0.5);
}
.ph-avatar-fallback {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  color: #2A1D02;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.82rem;
  border: none;
}

/* ---------- Niveau fusionné : salutation + barre intelligente ---------- */
.ph-info-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px 10px;
}
.ph-greeting {
  flex-shrink: 0;
  font-size: 0.76rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.ph-greeting b { color: var(--text); }
.ph-tier-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(202,162,77,0.12);
  border: 1px solid rgba(202,162,77,0.3);
  font-weight: 700;
  font-size: 0.68rem;
  flex-shrink: 0;
}

/* ---------- Boutons visiteur : deux choix cote à cote ---------- */
.ph-visitor-actions { display: flex; gap: 8px; }
.ph-visitor-actions a {
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.ph-visitor-actions .login { color: var(--gold-soft); border: 1px solid rgba(202,162,77,0.35); }
.ph-visitor-actions .signup { background: linear-gradient(120deg, var(--gold-soft), var(--gold)); color: #2A1D02; }

/* ---------- Niveau 2 : recherche ---------- */
.ph-search-wrap { padding: 0 14px 12px; position: relative; display: flex; align-items: center; gap: 8px; transition: padding 280ms ease; }
.ph-search {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-muted);
  flex: 1 1 auto;
  max-width: 78%;
  flex: 1;
  min-width: 0;
  transition: flex 420ms cubic-bezier(0.4, 0, 0.2, 1), width 420ms cubic-bezier(0.4, 0, 0.2, 1), padding 420ms cubic-bezier(0.4, 0, 0.2, 1), border-color 320ms ease, background 320ms ease, box-shadow 320ms ease, margin 420ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ph-search:focus-within { border-color: rgba(202,162,77,0.5); background: rgba(255,255,255,0.09); }

.ph-search-wrap.collapsed { padding: 0 14px 12px; }
.ph-search-wrap.collapsed .ph-search {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  border-color: rgba(202,162,77,0.4);
  background: linear-gradient(150deg, rgba(202,162,77,0.16), rgba(255,255,255,0.04));
  box-shadow: 0 4px 16px rgba(202,162,77,0.22), inset 0 1px 0 rgba(255,255,255,0.08);
}
.ph-search-wrap.collapsed .ph-search input,
.ph-search-wrap.collapsed .ph-search-placeholder { display: none; }
.ph-search-wrap.collapsed .ph-search svg { color: var(--gold-soft); }
.ph-search-wrap.collapsed .lang-switch { flex-shrink: 0; }

.ph-search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  outline: none;
  color: var(--text);
  font-size: 0.85rem;
  font-family: inherit;
}
.ph-search input::placeholder { color: var(--text-muted); }
.ph-search svg { flex-shrink: 0; }

.ph-search-results {
  position: absolute;
  top: 100%;
  left: 14px;
  right: 14px;
  margin-top: 14px;
  background: rgba(20,17,47,0.92);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
  max-height: 320px;
  overflow-y: auto;
  display: none;
  z-index: 9999;
}
.ph-search-results.open { display: block; animation: ph-fade-slide 220ms ease; }
.ph-search-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  text-decoration: none;
  color: var(--text);
  font-size: 0.85rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.ph-search-result:last-child { border-bottom: none; }
.ph-search-result img { width: 28px; height: 28px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.ph-search-result-icon { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.05); font-size: 0.9rem; }
.ph-search-empty { padding: 16px; text-align: center; font-size: 0.8rem; color: var(--text-muted); }

@keyframes ph-fade-slide {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Niveau 3 : barre intelligente ---------- */
.ph-smartbar {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.ph-smartbar-track {
  display: flex;
  gap: 22px;
  width: max-content;
}
.ph-smartbar-track.scrolling { animation: ph-scroll-x 22s linear infinite; }
.ph-smartbar:hover .ph-smartbar-track.scrolling { animation-play-state: paused; }
.ph-smart-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  color: var(--gold-soft);
  text-decoration: none;
  white-space: nowrap;
  font-weight: 600;
}
.ph-smart-item svg { flex-shrink: 0; }

@keyframes ph-scroll-x {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .ph-smartbar-track { animation: none; overflow-x: auto; }
  .ph-header { transition: none; }
}

/* ---------- Carte de commande active, sous le header ---------- */
.ph-order-card {
  margin: 12px 14px 0;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(202,162,77,0.14), rgba(139,111,240,0.08));
  border: 1px solid rgba(202,162,77,0.25);
  display: flex;
  align-items: center;
  gap: 12px;
}
.ph-order-card .ph-order-info { flex: 1; min-width: 0; }
.ph-order-card .ph-order-title { font-size: 0.82rem; font-weight: 700; margin-bottom: 3px; }
.ph-order-card .ph-order-status { font-size: 0.72rem; color: var(--text-muted); }
.ph-order-progress { height: 4px; border-radius: 999px; background: rgba(255,255,255,0.1); margin-top: 6px; overflow: hidden; }
.ph-order-progress-fill { height: 100%; background: linear-gradient(90deg, var(--gold-soft), var(--gold)); border-radius: 999px; }
.ph-order-card a.ph-order-cta {
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--gold);
  color: #2A1D02;
  font-weight: 700;
  font-size: 0.76rem;
  text-decoration: none;
}

/* ---------- Menu latéral ---------- */
.ph-side-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease;
}
.ph-side-overlay.open { opacity: 1; pointer-events: auto; }

/* ---------- Le hamburger devient un vrai bouton de fermeture ----------*/
.ph-hamburger-btn { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.ph-hb-line { width: 18px; height: 1.8px; border-radius: 2px; background: currentColor; transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease, width 200ms ease; }
.ph-hamburger-btn[aria-expanded="true"] .ph-hb-line:nth-child(1) { transform: translateY(5.8px) rotate(45deg); }
.ph-hamburger-btn[aria-expanded="true"] .ph-hb-line:nth-child(2) { opacity: 0; }
.ph-hamburger-btn[aria-expanded="true"] .ph-hb-line:nth-child(3) { transform: translateY(-5.8px) rotate(-45deg); }

.ph-side-close-btn { position: relative; }
.ph-side-close-btn .ph-hb-line { position: absolute; top: 50%; left: 50%; width: 16px; }
.ph-side-close-btn .ph-hb-line:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.ph-side-close-btn .ph-hb-line:last-child { transform: translate(-50%, -50%) rotate(-45deg); }

.ph-side-menu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 78%;
  max-width: 300px;
  background: linear-gradient(180deg, #191541, var(--night));
  z-index: 999;
  transform: translateX(-100%);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  padding: calc(20px + env(safe-area-inset-top, 0px)) 0 calc(20px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  box-shadow: 20px 0 50px rgba(0,0,0,0.4);
}
.ph-side-menu.open { transform: translateX(0); }

.ph-side-header { padding: 0 20px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; }
.ph-side-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; }
.ph-side-brand img { width: 30px; height: 30px; border-radius: 8px; }

/* ---------- Carte de profil, vraie photo si elle existe ----------*/
.ph-side-profile-card {
  display: flex; align-items: center; gap: 11px;
  margin: 0 14px 14px; padding: 12px 13px; border-radius: 15px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
  text-decoration: none; transition: background 160ms ease;
}
.ph-side-profile-card:active { background: rgba(255,255,255,0.07); }
.ph-side-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: linear-gradient(155deg, var(--gold-soft), var(--gold));
  color: #2A1D02; font-weight: 800; font-size: 1rem;
}
.ph-side-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ph-side-profile-text { display: flex; flex-direction: column; min-width: 0; }
.ph-side-profile-text b { font-size: 0.87rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-side-profile-text span { font-size: 0.74rem; color: var(--text-muted); margin-top: 1px; }

/* ---------- La vraie carte contextuelle, jamais une bannière ----------*/
.ph-side-context-card {
  display: flex; align-items: center; gap: 10px;
  margin: 0 14px 16px; padding: 11px 13px; border-radius: 13px;
  background: rgba(232,184,75,0.07); border: 1px solid rgba(232,184,75,0.18);
  text-decoration: none; transition: background 160ms ease;
}
.ph-side-context-card:active { background: rgba(232,184,75,0.12); }
.ph-side-context-icon { color: var(--gold-soft); flex-shrink: 0; display: flex; }
.ph-side-context-text { font-size: 0.78rem; color: var(--text); line-height: 1.35; }

/* ---------- Groupes, avec une vraie entrée progressive à l'ouverture ----------*/
.ph-side-group { opacity: 0; transform: translateX(-8px); }
.ph-side-menu.open .ph-side-group {
  animation: ph-group-in 340ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--stagger, 1) * 45ms);
}
@keyframes ph-group-in { to { opacity: 1; transform: translateX(0); } }

/* ---------- Signature d'état actif MOMAËL — un vrai repère à gauche,
   jamais une simple teinte de fond ----------*/
.ph-side-link {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 20px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.87rem;
  font-weight: 600;
  position: relative;
  transition: background 180ms ease, color 180ms ease;
}
.ph-side-link:active { background: rgba(255,255,255,0.05); }
.ph-side-link.active { color: var(--gold-soft); background: rgba(232,184,75,0.06); }
.ph-side-link.active::before {
  content: "";
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
}
.ph-side-link svg { flex-shrink: 0; }
.ph-side-link.danger { color: #FF6B6B; }
.ph-side-link:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: -2px; }

/* ---------- Aperçu des vraies applications, juste sous "Nos applications" ----------*/
.ph-side-apps-row { display: flex; gap: 9px; padding: 4px 20px 14px 51px; flex-wrap: wrap; }
.ph-side-app-thumb { display: block; border-radius: 12px; transition: transform 120ms ease; }
.ph-side-app-thumb:active { transform: scale(0.92); }
.ph-side-apps-row img { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; border: 1px solid rgba(255,255,255,0.1); display: block; }

.ph-side-badge {
  margin-left: auto;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: linear-gradient(120deg, #FF6B6B, #E24545);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ph-side-section-label {
  padding: 14px 20px 6px;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  opacity: 0.6;
}

/* ---------- Zone de conversion — un vrai bouton premium, jamais
   concurrent visuellement de "Connexion" juste au-dessus ----------*/
.ph-side-signup-wrap { padding: 8px 20px 4px; }
.ph-side-signup-btn {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 100%; height: 46px; border-radius: var(--btn-radius);
  background: var(--btn-primary-bg); color: var(--btn-primary-text);
  box-shadow: var(--btn-primary-shadow);
  font-weight: 700; font-size: 0.86rem; text-decoration: none;
  transition: var(--btn-transition);
}
.ph-side-signup-btn:active { transform: scale(0.97); filter: brightness(0.97); }

.ph-spacer { height: 4px; }

@media (prefers-reduced-motion: reduce) {
  .ph-side-group { opacity: 1; transform: none; animation: none; }
  .ph-hb-line, .ph-side-menu { transition-duration: 1ms; }
}

/* ===========================================================
   Coin Flow — la vraie signature MOMAËL, partagée par tout le site.
   Quelques coins minimalistes qui émergent du contour d'un bouton et
   convergent vers son centre en s'effaçant, jamais une pluie, jamais
   un effet casino. Réservée aux vrais moments qui comptent. ===========================================================*/
.coin-flow-particle {
  position: absolute; top: 50%; left: 50%;
  width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFE9B8, #E8B84B 70%);
  box-shadow: 0 0 4px rgba(232,184,75,0.5);
  opacity: 0; pointer-events: none;
  will-change: transform, opacity;
}
.pulse .coin-flow-particle { animation: coin-flow-move 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) forwards; }
.coin-flow-particle:nth-child(1) { animation-delay: 0ms !important; }
.coin-flow-particle:nth-child(2) { animation-delay: 50ms !important; }
.coin-flow-particle:nth-child(3) { animation-delay: 90ms !important; }
.coin-flow-particle:nth-child(4) { animation-delay: 40ms !important; }
.coin-flow-particle:nth-child(5) { animation-delay: 110ms !important; }
@keyframes coin-flow-move {
  0% { opacity: 0; transform: translate(-50%, -50%) translate(var(--cfx), var(--cfy)) scale(0.6); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(0.3); }
}
@media (prefers-reduced-motion: reduce) {
  .pulse .coin-flow-particle { display: none; }
}

/* Bandeau de rappel — une commande sans compte qui attend une nouvelle
   capture, reconnue par l'appareil lui-même plutôt qu'un compte. Fixé
   en bas, toujours au-dessus du reste, mais jamais bloquant. */
#tracked-order-reminder {
  position: fixed;
  right: 14px;
  top: 340px;
  width: 250px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 13px 14px;
  border-radius: 14px;
  background: linear-gradient(155deg, #4A2E0A, #2E1D06);
  border: 1px solid rgba(255,180,80,0.35);
  box-shadow: 0 10px 28px rgba(0,0,0,0.4);
  transform: translateX(calc(100% + 24px));
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
#tracked-order-reminder.tor-in { transform: translateX(0); }
#tracked-order-reminder .tor-close {
  position: absolute; top: 8px; right: 8px;
  width: 20px; height: 20px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7);
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
#tracked-order-reminder .tor-icon {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  background: rgba(255,180,80,0.16); color: #FFC876;
  display: flex; align-items: center; justify-content: center;
}
#tracked-order-reminder .tor-text {
  font-size: 0.76rem; line-height: 1.4; color: #F1E9DA; padding-right: 12px;
}
#tracked-order-reminder .tor-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  background: linear-gradient(120deg, #F5D889, #C8922D); color: #241b03;
  font-size: 0.76rem; font-weight: 800; text-decoration: none;
  padding: 8px 12px; border-radius: 10px; margin-top: 2px;
}
@media (max-width: 640px) {
  #tracked-order-reminder { left: 12px; right: 12px; width: auto; top: 90px; bottom: auto; transform: translateX(calc(100% + 40px)); }
}

/* La vraie même bannière que le rappel de preuve manquante, pour le
   gain d'un code promo par un visiteur sans compte — positionnée plus
   bas pour ne jamais chevaucher l'autre si les deux apparaissent en
   même temps. */
#reward-code-reminder {
  position: fixed;
  right: 14px;
  top: 470px;
  width: 250px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 13px 14px;
  border-radius: 14px;
  background: linear-gradient(155deg, #1E4A32, #0F2E1D);
  border: 1px solid rgba(111,232,207,0.35);
  box-shadow: 0 10px 28px rgba(0,0,0,0.4);
  transform: translateX(calc(100% + 24px));
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
#reward-code-reminder.tor-in { transform: translateX(0); }
#reward-code-reminder .tor-close {
  position: absolute; top: 8px; right: 8px;
  width: 20px; height: 20px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7);
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
#reward-code-reminder .tor-icon {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  background: rgba(111,232,207,0.16); color: #6FE8CF;
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
#reward-code-reminder .tor-text {
  font-size: 0.76rem; line-height: 1.4; color: #E9FBF5; padding-right: 12px;
}
@media (max-width: 640px) {
  #reward-code-reminder { left: 12px; right: 12px; width: auto; top: 160px; bottom: auto; transform: translateX(calc(100% + 40px)); }
}

/* Vérification d'identifiant BoloUp — une vraie carte avec la vraie
   photo du compte, jamais un simple texte plat. */
.boloup-check-card {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 0.8rem;
  animation: boloup-card-in 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes boloup-card-in {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.boloup-check-loading {
  background: rgba(255,255,255,0.05);
  color: var(--text-muted);
}
.boloup-check-error {
  background: rgba(255,107,107,0.1);
  border: 1px solid rgba(255,107,107,0.25);
  color: #FF9999;
}
.boloup-check-icon { flex-shrink: 0; }
.boloup-check-spinner {
  width: 15px; height: 15px; flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.2);
  border-top-color: var(--gold-soft);
  border-radius: 50%;
  animation: boloup-spin 0.7s linear infinite;
}
@keyframes boloup-spin { to { transform: rotate(360deg); } }

.boloup-check-success {
  background: linear-gradient(120deg, rgba(111,232,207,0.1), rgba(232,184,75,0.06));
  border: 1px solid rgba(111,232,207,0.3);
}
.boloup-avatar {
  position: relative;
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  overflow: visible;
}
.boloup-avatar img, .boloup-avatar-fallback {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2px solid var(--gold-soft);
  box-shadow: 0 3px 10px rgba(232,184,75,0.3);
}
.boloup-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(155deg, var(--gold-soft), var(--gold));
  color: #2A1D02;
  font-weight: 800;
  font-size: 1.1rem;
}
.boloup-avatar-badge {
  position: absolute;
  bottom: -2px; right: -2px;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: #6FE8CF;
  color: #06231F;
  font-size: 0.6rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--night);
}
.boloup-check-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.boloup-check-text b {
  color: #6FE8CF;
  font-size: 0.86rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.boloup-check-text small {
  color: var(--text-muted);
  font-size: 0.7rem;
  margin-top: 1px;
}