/* ============================================================
   FSN SOBRE EXPERT — Redesign mobile premium niveau 2 (adapté de SunuONAS)
   ============================================================
   Direction : Apple Wallet iOS 17 + Wise 2024 + Linear typography.
   Inter variable font + tabular numerals + spring animations +
   subtle grain texture + animated nav indicator + skeleton shimmer.

   Layered APRÈS onas-app.css → override sans rien casser.
   Scope strictement .phone-screen → admin desktop intact.
   ============================================================ */

/* [v275] body global : quasi blanc partout */
html, body, #root, .mobile-stage, .phone {
  background-color: #FFFFFF !important;
}
.mobile-stage .phone {
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F7F9 100%) !important;
}

/* === Variables sobre (scope phone-screen) — v272 SPLASH GREY === */
.phone-screen {
  /* [v272] Palette grise (match splash) + header dark navy en hero */
  --sobre-bg:        #E8ECEF;       /* gris clair match boot-splash */
  --sobre-surface:   #FFFFFF;
  --sobre-elevated:  #FFFFFF;
  --sobre-ink:       #063a22;       /* navy profond */
  --sobre-ink-2:     #0a6c3e;       /* navy ONAS */
  --sobre-ink-mute:  #6B7280;
  --sobre-ink-soft:  #94A3B8;
  --sobre-hairline:  #DCE0E5;
  --sobre-hairline-strong: #C9CFD5;
  --sobre-accent:    #f3c64a;       /* orange ONAS */
  --sobre-accent-2:  #f6d472;
  --sobre-accent-bg: #FDF1EC;
  --sobre-success:   #16A34A;
  --sobre-success-bg:#DCFCE7;

  /* SPACING — grille 4px stricte */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;

  /* RADIUS — 12 / 16 / 20 / 24 */
  --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 22px;

  /* MOTION */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-quick:  cubic-bezier(0.4, 0, 0.2, 1);

  /* FONT — Inter variable */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11', 'ss01';
  /* Tabular numerals : chiffres de même largeur (premium) */
  font-variant-numeric: tabular-nums lining-nums;
}

/* [v275] === FOND PRESQUE BLANC === */
.phone-screen {
  background:
    radial-gradient(circle at 80% 12%,  rgba(243, 198, 74, 0.04) 0%, transparent 45%),
    radial-gradient(circle at 15% 75%,  rgba(10, 108, 62, 0.025) 0%, transparent 40%),
    linear-gradient(180deg,
      #FFFFFF 0%,
      #FCFCFD 30%,
      #F8FAFB 60%,
      #F5F7F9 100%
    ) !important;
}
.phone-screen .usager-page {
  background: transparent !important;  /* hérite du phone-screen */
  position: relative;
  overflow: hidden;
}
/* Force tous les containers en transparent pour que le gradient passe partout */
.phone-screen .page,
.phone-screen .page-scroll,
.phone-screen .presta-scroll {
  background: transparent !important;
}
/* Grain texture subtle au-dessus du gradient pour la profondeur */
.phone-screen .usager-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(6, 58, 34, 0.02) 1px, transparent 0);
  background-size: 16px 16px;
  pointer-events: none;
  opacity: 0.6;
  z-index: 0;
}
/* [v261] === MESH ANIMÉ BLEU/ORANGE — pure CSS, GPU-accéléré, non-blocking ===
   Pattern de lignes SVG inline qui dérive lentement en arrière-plan.
   `pointer-events: none` → ne bloque jamais l'interaction.
   `will-change: transform` → forcé sur le compositor thread, pas de blocage main thread.
   `animation` CSS → tourne dans le navigateur sans bloquer JS. */
.phone-screen .usager-page::after {
  content: "";
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  background-image:
    /* Lignes courbes bleues + orange en SVG inline (data-url) */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800'><defs><linearGradient id='b' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%231B3A5C' stop-opacity='0.5'/><stop offset='1' stop-color='%231B3A5C' stop-opacity='0'/></linearGradient><linearGradient id='o' x1='1' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23E85A2C' stop-opacity='0.55'/><stop offset='1' stop-color='%23E85A2C' stop-opacity='0'/></linearGradient></defs><path d='M0,200 Q200,100 400,200 T800,200' fill='none' stroke='url(%23b)' stroke-width='1.2'/><path d='M0,300 Q200,200 400,300 T800,300' fill='none' stroke='url(%23o)' stroke-width='1.2'/><path d='M0,500 Q200,400 400,500 T800,500' fill='none' stroke='url(%23b)' stroke-width='1.2'/><path d='M0,600 Q200,500 400,600 T800,600' fill='none' stroke='url(%23o)' stroke-width='1.2'/><path d='M100,0 Q300,200 100,400 T100,800' fill='none' stroke='url(%23b)' stroke-width='0.8'/><path d='M400,0 Q200,200 400,400 T400,800' fill='none' stroke='url(%23o)' stroke-width='0.8'/><path d='M700,0 Q500,200 700,400 T700,800' fill='none' stroke='url(%23b)' stroke-width='0.8'/><circle cx='150' cy='150' r='3' fill='%231B3A5C' opacity='0.35'/><circle cx='650' cy='250' r='3' fill='%23E85A2C' opacity='0.35'/><circle cx='250' cy='550' r='3' fill='%23E85A2C' opacity='0.35'/><circle cx='550' cy='650' r='3' fill='%231B3A5C' opacity='0.35'/></svg>");
  background-size: 50% 50%;
  background-repeat: repeat;
  opacity: 0.45;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
  animation: meshFlow 38s linear infinite;
  /* Filtre subtle pour adoucir les lignes */
  filter: blur(0.4px);
}
@keyframes meshFlow {
  0%   { transform: translate3d(0%, 0%, 0)         rotate(0deg); }
  25%  { transform: translate3d(-2%, -1%, 0)       rotate(0.5deg); }
  50%  { transform: translate3d(-3%, -3%, 0)       rotate(1deg); }
  75%  { transform: translate3d(-1%, -2%, 0)       rotate(0.5deg); }
  100% { transform: translate3d(0%, 0%, 0)         rotate(0deg); }
}
/* Aurora pulse — second layer plus diffus pour amplifier la profondeur */
.phone-screen .usager-page > .aurora-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 40% 30% at 20% 25%, rgba(10, 108, 62, 0.18) 0%, transparent 70%),
    radial-gradient(ellipse 35% 25% at 80% 50%, rgba(243, 198, 74, 0.18) 0%, transparent 70%),
    radial-gradient(ellipse 45% 30% at 50% 85%, rgba(10, 108, 62, 0.10) 0%, transparent 70%);
  filter: blur(20px);
  will-change: transform, opacity;
  animation: auroraDrift 22s ease-in-out infinite alternate;
}
@keyframes auroraDrift {
  0%   { transform: translate3d(0%, 0%, 0)    scale(1);    opacity: 0.85; }
  33%  { transform: translate3d(2%, -3%, 0)   scale(1.05); opacity: 1;    }
  66%  { transform: translate3d(-1%, 2%, 0)   scale(1.02); opacity: 0.95; }
  100% { transform: translate3d(0%, -1%, 0)   scale(1);    opacity: 0.9;  }
}
.phone-screen .usager-header,
.phone-screen .presta-scroll,
.phone-screen .bottom-nav {
  position: relative;
  z-index: 1;
}

/* ============================================================
   HEADER — sticky top + dégradé bleu clair → orange clair (v257)
   ============================================================
   Bonne idée du design : palette ONAS atténuée (bleu pastel → orange
   pastel) avec halo radial top-right pour la profondeur. Sticky top
   pour rester toujours visible. */
.phone-screen .usager-header {
  /* [v490] Header HORS du conteneur scroll : position absolute au-dessus
     de .presta-scroll. Reste fige a sa position, ne suit jamais le scroll.
     Demande user "il est dans le meme conteneur que l ascenseur" -> on
     l'extrait du flot du scroll. */
  background: linear-gradient(135deg, var(--presta-blue, #2C72B7) 0%, var(--presta-blue-deep, #1F5A93) 100%) !important;
  color: white !important;
  padding: 16px 20px 22px !important;
  border-radius: 26px !important;
  border-bottom: none !important;
  position: absolute !important;
  top: calc(8px + env(safe-area-inset-top, 0px)) !important;
  left: 12px !important;
  right: 12px !important;
  z-index: 30 !important;
  flex: none !important;
  margin: 0 !important;
  animation: sobreSlideIn 480ms var(--ease-out) both;
  box-shadow: 0 8px 24px -10px rgba(6, 58, 34, 0.35) !important;
  overflow: hidden;
}
/* [v490] Le scroll body doit pousser son contenu sous le header absolu.
   [v493] User dit trop d'espace, on reduit a 160px (entre v491 168 et v492 200). */
.phone-screen .usager-page > .presta-scroll {
  padding-top: calc(160px + env(safe-area-inset-top, 0px)) !important;
}
/* [v490] Tablet (>=768px) : le layout passe en grid 2 col. On REPLACE le
   position absolute par sticky pour respecter la cellule de grille et
   garder le header a gauche au scroll. */
@media (min-width: 768px) {
  .phone-screen .usager-header {
    position: sticky !important;
    top: calc(8px + env(safe-area-inset-top, 0px)) !important;
    left: auto !important;
    right: auto !important;
    margin: calc(8px + env(safe-area-inset-top, 0px)) 6px 8px 12px !important;
  }
  .phone-screen .usager-page > .presta-scroll {
    padding-top: calc(8px + env(safe-area-inset-top, 0px)) !important;
  }
}
/* [v488] Wax pattern legacy retire — remplace par l aurore animee ci-dessous. */
/* [v488] AURORE animee en fond du header (demande user "je veux une
   animation dans le fond"). Couches conic + radial qui derivent lentement
   pour creer un effet d eau / lueur. ::before et ::after se complementent.
   Performance : opacity faible + transform 3d compose -> GPU. */
.phone-screen .usager-header::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: -30% !important;
  background:
    radial-gradient(ellipse 40% 40% at 25% 30%, rgba(255, 255, 255, 0.22) 0%, transparent 60%),
    radial-gradient(ellipse 50% 35% at 75% 70%, rgba(76, 212, 148, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 35% 50% at 50% 50%, rgba(255, 138, 92, 0.12) 0%, transparent 60%);
  filter: blur(20px);
  z-index: 0;
  pointer-events: none;
  animation: usagerHeaderAurora 18s ease-in-out infinite alternate;
  opacity: 0.9;
  mix-blend-mode: screen;
}
.phone-screen .usager-header::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.10) 45%, rgba(255, 255, 255, 0.04) 60%, transparent 80%);
  z-index: 0;
  pointer-events: none;
  animation: usagerHeaderShimmer 6s ease-in-out infinite;
}
@keyframes usagerHeaderAurora {
  0%   { transform: translate3d(0%, 0%, 0)   scale(1);    }
  50%  { transform: translate3d(4%, -3%, 0)  scale(1.06); }
  100% { transform: translate3d(-3%, 4%, 0)  scale(1.03); }
}
@keyframes usagerHeaderShimmer {
  0%, 100% { transform: translateX(-30%); opacity: 0.0; }
  50%      { transform: translateX(30%);  opacity: 0.9; }
}
/* S'assure que le contenu reste au-dessus de l aurore */
.phone-screen .usager-header > * { position: relative; z-index: 1; }
/* [v488] Anciennes regles qui forcaient display:none sur les pseudos
   etaient placees APRES la regle d aurore et la masquaient. Supprimees ici. */
@keyframes headerOrbFloat {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-10px, 10px) scale(1.1); }
  100% { transform: translate(5px, -5px) scale(0.95); }
}
.phone-screen .usager-header > * {
  position: relative;
  z-index: 1;
}
/* [v488] supprime : ne pas masquer les pseudos, on les utilise pour l aurore. */

/* [v271] "Bonjour" label sur dark navy header */
.phone-screen .usager-header .f11 {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.55) !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
/* Prénom — display large blanc
   [v486] Override : si .usager-header-name est present (nouveau JSX v486),
   la taille est plus petite avec wrap 2 lignes pour ne pas couper. */
.phone-screen .usager-header .f20.usager-header-name {
  font-size: 18px !important;
  line-height: 1.15 !important;
  letter-spacing: -0.3px !important;
  white-space: normal !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  word-break: break-word !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}
.phone-screen .usager-header .f20 {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  letter-spacing: -0.7px !important;
  margin-top: 2px !important;
  line-height: 1.05 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* [v260] Icônes header monoline — AUCUN FOND, jamais.
   Hover/active = changement de couleur du stroke uniquement, pas de pill background. */
.phone-screen .usager-header .ico-btn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  transition: opacity 180ms var(--ease-quick);
}
.phone-screen .usager-header .ico-btn:hover,
.phone-screen .usager-header .ico-btn:focus,
.phone-screen .usager-header .ico-btn:active {
  background: transparent !important;
  backdrop-filter: none !important;
  outline: none !important;
}
.phone-screen .usager-header .ico-btn:hover svg {
  stroke: var(--sobre-accent) !important;  /* hover : orange ONAS */
}
.phone-screen .usager-header .ico-btn:active {
  transform: scale(0.92);
  opacity: 0.7;
}
.phone-screen .usager-header .ico-btn svg {
  /* [v271] Stroke blanc sur dark navy header */
  stroke: rgba(255, 255, 255, 0.85) !important;
  stroke-width: 1.6 !important;
  transition: stroke 180ms var(--ease-quick);
  filter: none !important;
}
.phone-screen .usager-header .ico-btn:hover svg {
  stroke: var(--sobre-accent-2) !important;
  filter: drop-shadow(0 0 6px rgba(243, 198, 74, 0.5));
}
/* [v262] Avatar initiales : cercle bleu ONAS + texte orange (styled inline dans JSX) */

/* [v265] Logo "atterrit" depuis le centre de l'écran (où il est sur le splash)
   vers la position header. Mouvement FLIP avec scale 7→1, rotate, et trajectoire
   en arc pour effet dramatique "vient du splash". */
.phone-screen .usager-header img[alt="ONAS"] {
  width: 38px !important;
  height: auto !important;
  /* Animation : démarre avec un delay pour laisser le splash disparaître */
  animation: logoLandFromSplash 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;
  transform-origin: center center;
  will-change: transform, opacity;
}
@keyframes logoLandFromSplash {
  /* État initial : logo TRÈS grand (taille splash) au centre-bas de l'écran */
  0% {
    transform: scale(7) translate(85px, 220px) rotate(-25deg);
    opacity: 0;
    filter: blur(10px) drop-shadow(0 20px 40px rgba(243, 198, 74, 0.4));
  }
  /* Phase 1 : apparition + remontée vers le haut */
  25% {
    opacity: 0.4;
    filter: blur(6px) drop-shadow(0 16px 30px rgba(243, 198, 74, 0.3));
  }
  /* Phase 2 : zoom hors taille avec rotation */
  55% {
    transform: scale(2) translate(40px, 60px) rotate(-8deg);
    opacity: 1;
    filter: blur(2px) drop-shadow(0 8px 16px rgba(10, 108, 62, 0.25));
  }
  /* Phase 3 : overshoot final position */
  80% {
    transform: scale(1.2) translate(0, -3px) rotate(3deg);
    opacity: 1;
    filter: blur(0) drop-shadow(0 4px 8px rgba(10, 108, 62, 0.15));
  }
  /* Phase 4 : settle on header position */
  100% {
    transform: scale(1) translate(0, 0) rotate(0);
    opacity: 1;
    filter: blur(0) drop-shadow(0 1px 2px rgba(10, 108, 62, 0.08));
  }
}

/* [v483] Avatar usager dans header : reutilise .presta-avatar (cercle blanc,
   texte navy bold). Plus de rule wildcard sur :last-child qui repeignait le
   prenom en navy (invisible sur bleu) au v476. */
.phone-screen .usager-header .presta-avatar {
  width: 44px !important;
  height: 44px !important;
  background: #FFFFFF !important;
  color: var(--presta-blue-deep, #1F5A93) !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  letter-spacing: -0.3px !important;
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.25), 0 0 0 2px rgba(255, 255, 255, 0.3) !important;
}

/* === NOTIFICATION BADGE — point seul orange, premium === */
.phone-screen .usager-header .ico-btn span {
  background: var(--sobre-accent) !important;
  border: 2px solid #FCDFCA !important;       /* match du orange pastel au top du gradient */
  min-width: 8px !important;
  width: 8px !important;
  height: 8px !important;
  padding: 0 !important;
  top: 4px !important;
  right: 4px !important;
  font-size: 0 !important;
  color: transparent !important;
  box-shadow: 0 0 0 1px rgba(243, 198, 74, 0.15);
  animation: sobreDotPulse 2.4s ease-in-out infinite;
}
@keyframes sobreDotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(243, 198, 74, 0.45); }
  50%      { box-shadow: 0 0 0 4px rgba(243, 198, 74, 0); }
}

/* ============================================================
   SECTION TITLES — uppercase mini-caps premium
   ============================================================ */
.phone-screen .presta-scroll > .row.between .f15.bold {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--sobre-ink-soft) !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
}
.phone-screen .presta-scroll {
  /* [v258] Transparent : le gradient de .usager-page passe à travers — pas de coupure */
  background: transparent !important;
  padding-top: 22px !important;
  padding-bottom: 28px !important;
}
.phone-screen .presta-scroll > .row.between {
  margin-bottom: 10px !important;
  padding: 0 var(--s-1);
}

/* ============================================================
   [v271] BENTO GRID : 1 hero card pleine largeur + cards plus petites
   Direction Cash App / Linear. La 1ère prestation = hero, les suivantes
   = cards 50/50 dessous.
   ============================================================ */
/* [v286] Grid services RESPONSIVE — 2 col mobile, 3 tablette, 4 desktop */
.phone-screen .usager-svc-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;   /* mobile default */
  grid-auto-rows: auto !important;
  gap: 12px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  margin: 0 0 20px 0 !important;
  box-shadow: none !important;
  animation: sobreFadeUp 480ms var(--ease-out) 60ms both;
}
/* Tablette portrait : 3 colonnes */
@media (min-width: 600px) {
  .phone-screen .usager-svc-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
  }
}
/* Tablette paysage / desktop : 4 colonnes */
@media (min-width: 900px) {
  .phone-screen .usager-svc-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
  }
}
/* [v273] Toutes les cards égales — pas de hero, 2 colonnes même ligne */
.phone-screen .usager-svc-grid > .usager-svc:first-child {
  grid-column: auto !important;
  min-height: 150px !important;
  padding: 18px 14px 16px !important;
  align-items: center !important;
  text-align: center !important;
  background: var(--sobre-surface) !important;
  color: var(--sobre-ink) !important;
}
.phone-screen .usager-svc-grid > .usager-svc:first-child h3,
.phone-screen .usager-svc-grid > .usager-svc:first-child p {
  color: inherit !important;
}
.phone-screen .usager-svc-grid > .usager-svc:first-child h3 {
  font-size: 14px !important;
  text-align: center !important;
  letter-spacing: -0.3px !important;
}
.phone-screen .usager-svc-grid > .usager-svc:first-child p {
  font-size: 11.5px !important;
  text-align: center !important;
  max-width: none !important;
  color: var(--sobre-ink-mute) !important;
}
.phone-screen .usager-svc-grid > .usager-svc:first-child .usager-svc-icon {
  width: 56px !important;
  height: 56px !important;
  border-radius: 16px !important;
  margin-bottom: 0;
  background: linear-gradient(135deg, #0a6c3e 0%, #0e8a4d 100%) !important;
}
.phone-screen .usager-svc-grid > .usager-svc:first-child .usager-svc-icon svg {
  width: 24px !important;
  height: 24px !important;
}
/* Responsive : 3 col en tablette portrait, 4 col en tablette paysage */
@media (min-width: 600px) {
  .phone-screen .usager-svc-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 14px !important; }
}
@media (min-width: 900px) {
  .phone-screen .usager-svc-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 16px !important; }
}

/* Stagger appearance pour effet premium */
.phone-screen .usager-svc-grid > .usager-svc {
  animation: sobreFadeUp 480ms var(--ease-out) both;
}
.phone-screen .usager-svc-grid > .usager-svc:nth-child(1) { animation-delay: 120ms; }
.phone-screen .usager-svc-grid > .usager-svc:nth-child(2) { animation-delay: 180ms; }
.phone-screen .usager-svc-grid > .usager-svc:nth-child(3) { animation-delay: 240ms; }
.phone-screen .usager-svc-grid > .usager-svc:nth-child(4) { animation-delay: 300ms; }

/* [v280] Chaque tuile : style Wavexpay — white minimalist avec border subtile */
.phone-screen .usager-svc {
  background: var(--sobre-surface) !important;
  border: 1px solid var(--sobre-hairline) !important;
  border-radius: 16px !important;
  padding: 18px 12px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  text-align: center !important;
  box-shadow: 0 2px 6px rgba(6, 58, 34, 0.04) !important;
  position: relative;
  cursor: pointer;
  overflow: hidden !important;
  transition: all 220ms cubic-bezier(.34,1.4,.6,1);
  isolation: auto !important;
  min-height: 110px;
}
.phone-screen .usager-svc:hover {
  transform: translateY(-4px) !important;
  box-shadow:
    0 16px 32px -10px rgba(6, 58, 34, 0.28),
    0 4px 8px rgba(6, 58, 34, 0.1) !important;
}
.phone-screen .usager-svc:active {
  transform: translateY(-2px) scale(0.985) !important;
}
.phone-screen .usager-svc::before { display: none !important; }
/* [v273] Wax pattern retiré des cards */
.phone-screen .usager-svc::after {
  display: none !important;
}

/* [v280] Icône container — style Wavexpay : taille modeste 40px, pas de gradient */
.phone-screen .usager-svc-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  color: white !important;
  border: none !important;
  box-shadow: 0 4px 10px -4px currentColor !important;
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
  transition: transform 280ms cubic-bezier(.34,1.4,.6,1);
}
.phone-screen .usager-svc-icon svg {
  width: 20px !important;
  height: 20px !important;
}
.phone-screen .usager-svc:hover .usager-svc-icon {
  transform: scale(1.08) rotate(-3deg);
}
.phone-screen .usager-svc-icon::after {
  /* Reflet brillant en haut-gauche pour donner du relief */
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, transparent 55%);
  pointer-events: none;
}
.phone-screen .usager-svc-icon svg {
  /* PAS de stroke override — l'inline stroke="white" passe */
  width: 24px;
  height: 24px;
  position: relative;
  z-index: 1;
}

/* [v286] Titre + sous-titre visibles */
.phone-screen .usager-svc h3 {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--sobre-ink) !important;
  letter-spacing: -0.2px !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  text-align: center !important;
}
.phone-screen .usager-svc p {
  display: block !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  color: var(--sobre-ink-mute) !important;
  letter-spacing: -0.05px !important;
  line-height: 1.35 !important;
  margin: 2px 0 0 0 !important;
  text-align: center !important;
}
.phone-screen .usager-svc > div:not(.usager-svc-icon) {
  flex: 1 1 auto !important;
  min-width: 0;
}

/* ============================================================
   [v288] BANNER — laisser le fond inline style admin passer
   (admin a choisi sa couleur dans Paramètres → Banner, on respecte).
   On garde uniquement le shaping (padding, radius, shadow).
   ============================================================ */
.phone-screen .usager-banner {
  /* PAS d'override background — l'inline style="background: rgb(27,58,92)"
     ou rgba(0,0,0,0) (transparent) passe selon ce que l'admin a configuré. */
  padding: 22px 22px !important;
  border-radius: 22px !important;
  border: none !important;
  min-height: 130px !important;
  align-items: center !important;
  position: relative;
  overflow: hidden !important;
  margin-bottom: 22px !important;
}
/* [v483] Mode IMAGE-ONLY : padding 0, align stretch, image fill 100%.
   Plus de fond admin visible en rebord autour de l'image. */
.phone-screen .usager-banner.is-image-only {
  padding: 0 !important;
  align-items: stretch !important;
  min-height: 140px !important;
}
.phone-screen .usager-banner.is-image-only > img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 22px !important;
}
/* [v288] Wave pattern decorative — visible UNIQUEMENT sur banner sombre
   (l'admin a choisi un fond foncé → le pattern blanc subtle s'y voit) */
.phone-screen .usager-banner-shine {
  display: block !important;
  position: absolute !important;
  top: 0; right: 0; bottom: 0;
  width: 50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><g fill='none' stroke='%23FFFFFF' stroke-width='1.5' opacity='0.18'><circle cx='180' cy='30' r='80'/><circle cx='180' cy='30' r='60'/><circle cx='180' cy='30' r='40'/></g></svg>");
  background-size: contain;
  background-position: right center;
  background-repeat: no-repeat;
  pointer-events: none;
}
/* Texte du banner BLANC */
.phone-screen .usager-banner .f13.bold {
  color: white !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -0.3px !important;
  line-height: 1.2 !important;
}
.phone-screen .usager-banner > div[style*="flex: 1"] {
  align-self: center;
  padding: 4px 0;
}
.phone-screen .usager-banner .f13.bold {
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.3px !important;
  line-height: 1.3 !important;
}
/* [v280] Bouton "En savoir plus" : pill semi-transparent sur navy */
.phone-screen .usager-banner > div[title="En savoir plus"] {
  padding: 8px 14px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  max-width: none !important;
  color: white !important;
  transition: all 200ms var(--ease-quick);
}
.phone-screen .usager-banner > div[title="En savoir plus"]:hover {
  background: rgba(255, 255, 255, 0.28) !important;
}
.phone-screen .usager-banner > div[title="En savoir plus"]:hover {
  background: transparent !important;
  transform: translateX(3px);
  opacity: 0.85;
}
/* [v280] Icône du banner — pill semi-transparent sur navy */
.phone-screen .usager-banner-icon {
  width: 52px !important;
  height: 52px !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  font-size: 26px !important;
  box-shadow: none !important;
  backdrop-filter: blur(8px);
}

/* ============================================================
   HERO CARD (demande en cours) — premium gradient bar
   ============================================================ */
.phone-screen .usager-hero {
  background: var(--sobre-surface) !important;
  color: var(--sobre-ink) !important;
  border: 1px solid var(--sobre-hairline) !important;
  border-radius: var(--r-lg) !important;
  padding: 20px !important;
  box-shadow: 0 1px 2px rgba(6, 58, 34, 0.02) !important;
  position: relative;
  overflow: hidden;
  animation: sobreFadeUp 480ms var(--ease-out) both;
}
/* Top gradient bar — premium signal */
.phone-screen .usager-hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--sobre-accent) 0%, #f6d472 50%, var(--sobre-accent) 100%);
  background-size: 200% 100%;
  animation: sobreGradientSlide 4s linear infinite;
}
@keyframes sobreGradientSlide {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.phone-screen .usager-hero .f11 {
  color: var(--sobre-ink-mute) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-size: 10px !important;
}
.phone-screen .usager-hero-icon {
  width: 44px !important;
  height: 44px !important;
  background: var(--sobre-accent-bg) !important;
  color: var(--sobre-accent) !important;
  border: 1px solid rgba(243, 198, 74, 0.18) !important;
  border-radius: 12px !important;
}
.phone-screen .usager-hero-icon svg {
  stroke: var(--sobre-accent) !important;
}
.phone-screen .usager-hero-foot {
  background: var(--sobre-bg) !important;
  border-radius: 10px !important;
  border: 1px solid var(--sobre-hairline) !important;
  padding: 10px 12px !important;
  margin-top: 16px !important;
}

/* ============================================================
   BOTTOM NAV — floating pill, fixed bottom, safe-area
   ============================================================
   [v256] Refonte : barre flottante avec marges + radius 28px
   inspirée des meilleures apps fintech (référence utilisateur).
   - position: absolute → toujours collée au bas du phone-screen
   - safe-area-inset-bottom → respecte l'encoche/home indicator iPhone
   - Floating margin : 14px sides + 12px bottom
   - Backdrop blur saturé pour l'effet "verre dépoli premium"
   - Active item : pilule arrondie ink-soft autour de l'icône
*/
.phone-screen .bottom-nav {
  /* [v268] EDGE-TO-EDGE FULLSCREEN — collée en bas, plein écran, pas de marge */
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(24px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.8) !important;
  border: none !important;
  border-top: 1px solid var(--sobre-hairline) !important;
  box-shadow:
    0 -2px 12px -4px rgba(6, 58, 34, 0.08) !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  /* Hauteur + safe-area pour iPhones avec home indicator */
  height: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  border-radius: 0 !important;
  z-index: 50 !important;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.phone-screen .nav-item {
  color: var(--sobre-ink-soft) !important;
  position: relative;
  transition: color 220ms var(--ease-quick);
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
}
.phone-screen .nav-item svg {
  stroke: var(--sobre-ink-soft) !important;
  stroke-width: 1.6 !important;
  transition: stroke 220ms var(--ease-quick), transform 280ms var(--ease-spring);
}
.phone-screen .nav-item:active svg {
  transform: scale(0.88);
}
.phone-screen .nav-item.active {
  color: var(--sobre-ink) !important;
  font-weight: 600 !important;
}
.phone-screen .nav-item.active svg {
  stroke: var(--sobre-ink) !important;
}
.phone-screen .nav-item .ic-wrap {
  background: transparent !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 0 !important;
}
.phone-screen .nav-item.active .ic-wrap {
  background: transparent !important;
}

/* [v284] Indicateur actif — pilule grise derrière l'icône (visible sur tous écrans) */
.phone-screen .nav-item {
  border-radius: 16px !important;
  padding: 6px 8px !important;
  transition: background 220ms var(--ease-quick), color 220ms var(--ease-quick);
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
}
.phone-screen .nav-item.active:not(.fab) {
  background: rgba(6, 58, 34, 0.06) !important;
}
.phone-screen .nav-item.active::before {
  display: none !important;
}
@keyframes sobreNavIndicator {
  0%   { opacity: 0; transform: scale(0.92); }
  100% { opacity: 1; transform: scale(1);    }
}
.phone-screen .nav-item.active {
  animation: sobreNavIndicator 280ms var(--ease-spring);
}

.phone-screen .nav-item.fab {
  background: transparent !important;
  padding: 0 !important;
}
.phone-screen .nav-item.fab::before { display: none !important; }
.phone-screen .nav-item.fab .ic-wrap {
  width: 48px !important;
  height: 48px !important;
  /* [v264] ORANGE ONAS officiel — signal d'action principale */
  background: linear-gradient(135deg, #f3c64a 0%, #f6d472 100%) !important;
  color: white !important;
  border-radius: 14px !important;
  margin-top: -2px !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 6px 18px -4px rgba(243, 198, 74, 0.55),
    0 0 0 2px rgba(255, 255, 255, 0.7) !important;
  transition: transform 220ms var(--ease-spring), box-shadow 220ms var(--ease-quick);
}
.phone-screen .nav-item.fab .ic-wrap:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 12px 30px -6px rgba(243, 198, 74, 0.6) !important;
}
.phone-screen .nav-item.fab.active .ic-wrap {
  background: linear-gradient(135deg, #f3c64a 0%, #f6d472 100%) !important;
}
.phone-screen .nav-item.fab svg {
  stroke: white !important;
}

/* ============================================================
   CARDS GLOBAL — hairlines no shadows
   ============================================================ */
.phone-screen .card {
  border: 1px solid var(--sobre-hairline) !important;
  box-shadow: 0 1px 2px rgba(6, 58, 34, 0.02) !important;
  border-radius: var(--r-md) !important;
  background: var(--sobre-surface) !important;
}

/* ============================================================
   BUTTONS — refined with spring states
   ============================================================ */
.phone-screen .btn-primary {
  background: var(--sobre-ink) !important;
  color: white !important;
  font-weight: 600 !important;
  letter-spacing: -0.15px !important;
  border-radius: 12px !important;
  padding: 13px 20px !important;
  border: none !important;
  box-shadow: 0 1px 2px rgba(6, 58, 34, 0.08), 0 1px 0 rgba(255, 255, 255, 0.08) inset !important;
  transition: all 200ms var(--ease-quick);
  font-size: 14px !important;
}
.phone-screen .btn-primary:hover {
  background: #1a2f4a !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -2px rgba(6, 58, 34, 0.2) !important;
}
.phone-screen .btn-primary:active {
  transform: translateY(0) scale(0.985);
  box-shadow: 0 1px 2px rgba(6, 58, 34, 0.08) !important;
}

.phone-screen .btn-ghost {
  background: transparent !important;
  color: var(--sobre-ink) !important;
  border: 1px solid var(--sobre-hairline) !important;
  border-radius: 12px !important;
  font-weight: 500 !important;
  padding: 11px 18px !important;
  font-size: 14px !important;
  transition: all 200ms var(--ease-quick);
}
.phone-screen .btn-ghost:hover {
  background: var(--sobre-bg) !important;
  border-color: var(--sobre-hairline-strong) !important;
}
.phone-screen .btn-ghost:active {
  transform: scale(0.985);
}

.phone-screen .btn-accent {
  background: var(--sobre-accent) !important;
  color: white !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  letter-spacing: -0.15px !important;
  box-shadow: 0 2px 12px -2px rgba(243, 198, 74, 0.35), 0 1px 0 rgba(255, 255, 255, 0.12) inset !important;
}

/* ============================================================
   FIELDS — premium focus state
   ============================================================ */
.phone-screen .field {
  background: var(--sobre-surface) !important;
  border: 1px solid var(--sobre-hairline) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  transition: border-color 200ms var(--ease-quick), box-shadow 200ms var(--ease-quick);
  padding: 12px 14px !important;
}
.phone-screen .field:focus-within {
  border-color: var(--sobre-ink) !important;
  box-shadow: 0 0 0 3px rgba(6, 58, 34, 0.08) !important;
}
.phone-screen .field input,
.phone-screen .field select,
.phone-screen .field textarea {
  font-size: 14px !important;
  color: var(--sobre-ink) !important;
  letter-spacing: -0.1px !important;
  font-family: inherit !important;
}
.phone-screen .field input::placeholder,
.phone-screen .field textarea::placeholder {
  color: var(--sobre-ink-soft) !important;
}

/* ============================================================
   APP-BAR — refined
   ============================================================ */
.phone-screen .app-bar {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(20px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.8) !important;
  border-bottom: 1px solid var(--sobre-hairline) !important;
  box-shadow: none !important;
}
.phone-screen .app-bar .title {
  font-weight: 600 !important;
  letter-spacing: -0.4px !important;
  color: var(--sobre-ink) !important;
  font-size: 17px !important;
}

/* ============================================================
   PAGE BACKGROUND + reserve space for floating nav
   ============================================================ */
.phone-screen .page,
.phone-screen .page-scroll {
  background: var(--sobre-bg) !important;
}
/* [v256] Le nav flottant prend 64px + 10px bottom + safe-area.
   On reserve ~100px de padding-bottom dans tous les scroll containers
   pour que le dernier item soit visible au-dessus de la barre. */
.phone-screen .presta-scroll,
.phone-screen .page-scroll {
  padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ============================================================
   FIELD-LBL — uppercase mini-caps
   ============================================================ */
.phone-screen .field-lbl,
.phone-screen .f10.muted {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: var(--sobre-ink-soft) !important;
}

/* ============================================================
   TYPOGRAPHIE — Inter avec letter-spacing négatif
   ============================================================ */
.phone-screen,
.phone-screen body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.phone-screen .f24.bold,
.phone-screen .f22.bold,
.phone-screen .f20.bold {
  letter-spacing: -0.6px !important;
  font-weight: 600 !important;
}
.phone-screen .f18.bold {
  letter-spacing: -0.4px !important;
}
.phone-screen .f15.bold,
.phone-screen .f14.bold {
  letter-spacing: -0.3px !important;
}
.phone-screen .f13.bold,
.phone-screen .f12.bold {
  letter-spacing: -0.2px !important;
}
.phone-screen .ink-deep { color: var(--sobre-ink) !important; }
.phone-screen .muted    { color: var(--sobre-ink-mute) !important; }

/* ============================================================
   GREETING TIME-AWARE — moment de la journée + date
   Injected via JSX in a future iteration. CSS already prepared.
   ============================================================ */
.phone-screen .greeting-strip {
  /* [v271] Pill avec backdrop-blur sur dark navy */
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85) !important;
  letter-spacing: 0.3px;
  margin-top: 14px;
  font-weight: 500;
  text-shadow: none !important;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  align-self: flex-start;
  width: fit-content;
}
.phone-screen .greeting-strip .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5) !important;
}
.phone-screen .greeting-strip .live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #5AE38A !important;
  font-weight: 700;
  text-shadow: none !important;
}
.phone-screen .greeting-strip .live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5AE38A;
  box-shadow: 0 0 0 0 rgba(90, 227, 138, 0.55);
  animation: sobreLivePulse 2s ease-out infinite;
}
@keyframes sobreLivePulse {
  0%   { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.45); }
  70%  { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}

/* ============================================================
   [v482] FILTRES PRESTATION — minimal text-only avec icone B&W
   Plus de cadre, plus de fond gris, plus de pill.
   Indicateur d'actif = trait sous le chip + couleur du texte/icone.
   ============================================================ */
.phone-screen .quick-actions {
  display: flex;
  gap: 4px;
  padding: 0;
  margin: 0 0 18px 0;
  background: transparent !important;
  border: none !important;
  align-self: stretch;
  width: 100%;
  position: relative;
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.phone-screen .quick-actions::-webkit-scrollbar { display: none; }
.phone-screen .quick-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px 10px;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(6, 58, 34, 0.55) !important;       /* texte gris sobre quand inactif */
  letter-spacing: -0.1px;
  cursor: pointer;
  transition: color 200ms ease, opacity 200ms ease;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: inherit;
  position: relative;
  z-index: 1;
}
.phone-screen .quick-chip svg {
  stroke: currentColor !important;                 /* icone B&W : suit la couleur texte */
  stroke-width: 1.7 !important;
  flex-shrink: 0;
  opacity: 0.85;
  transition: opacity 200ms ease;
}
.phone-screen .quick-chip-label {
  display: inline-block;
  line-height: 1;
}
.phone-screen .quick-chip:hover {
  color: rgba(6, 58, 34, 0.85) !important;
  background: transparent !important;
  transform: none;
}
.phone-screen .quick-chip:hover svg {
  opacity: 1;
}
/* [v482] Actif : texte/icone navy fort + underline navy 2px (no pill, no bg). */
.phone-screen .quick-chip.active {
  background: transparent !important;
  color: #063a22 !important;                       /* navy fort */
  font-weight: 700 !important;
  box-shadow: inset 0 -2px 0 0 #063a22 !important;  /* underline propre */
}
.phone-screen .quick-chip.active svg {
  opacity: 1;
}

/* ============================================================
   ACTIVITY FEED — Stripe timeline style
   ============================================================ */
.phone-screen .activity-feed {
  background: var(--sobre-surface);
  border: 1px solid var(--sobre-hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 20px;
}
.phone-screen .activity-row {
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-bottom: 1px solid var(--sobre-hairline);
  position: relative;
}
.phone-screen .activity-row:last-child { border-bottom: none; }
.phone-screen .activity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sobre-ink-soft);
  margin-top: 6px;
  flex-shrink: 0;
}
.phone-screen .activity-dot.success { background: var(--sobre-success); }
.phone-screen .activity-dot.accent  { background: var(--sobre-accent); }
.phone-screen .activity-content { flex: 1; min-width: 0; }
.phone-screen .activity-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--sobre-ink);
  letter-spacing: -0.2px;
  line-height: 1.3;
}
.phone-screen .activity-time {
  font-size: 11px;
  color: var(--sobre-ink-soft);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   FAB FLOATING — navy
   ============================================================ */
.phone-screen .fab-floating {
  background: var(--sobre-ink) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 12px 28px -6px rgba(6, 58, 34, 0.4) !important;
}

/* ============================================================
   STATUS BAR — hidden, OS handles it
   ============================================================ */
.phone-screen .status-bar { background: transparent !important; }

/* ============================================================
   [v267] CONSTRUCTION SÉQUENTIELLE — APRÈS arrivée du logo
   Le logo termine son animation à ~1600ms (200ms delay + 1400ms anim).
   AUCUN autre élément ne s'affiche tant que le logo n'est pas en place.
   Ordre : logo (0-1600ms) → header texts (1700ms) → banner (1900ms) →
           chips (2050ms) → services (2200ms+) → nav (2500ms).
   ============================================================ */
/* Header structure invisible jusqu'à arrivée du logo */
.phone-screen .usager-header > .row.between > .row:first-child > div:not(:first-child) {
  /* "Bonjour" + prénom : apparaissent APRÈS le logo */
  animation: sobreFadeUp 380ms var(--ease-out) 1650ms both !important;
}
.phone-screen .usager-header > .row.between > .row:last-child {
  /* Icônes header droites : apparaissent APRÈS le logo */
  animation: sobreFadeUp 380ms var(--ease-out) 1700ms both !important;
}
.phone-screen .greeting-strip {
  animation: sobreFadeUp 380ms var(--ease-out) 1750ms both !important;
}
.phone-screen .usager-banner {
  animation: sobreFadeUp 520ms var(--ease-out) 1900ms both !important;
}
.phone-screen .quick-actions {
  animation: sobreFadeUp 480ms var(--ease-out) 2050ms both !important;
}
.phone-screen .presta-scroll > .row.between {
  animation: sobreFadeUp 420ms var(--ease-out) 2150ms both !important;
}
.phone-screen .usager-svc-grid {
  animation: sobreFadeUp 480ms var(--ease-out) 2200ms both !important;
}
.phone-screen .usager-svc-grid > .usager-svc:nth-child(1) { animation-delay: 2280ms !important; }
.phone-screen .usager-svc-grid > .usager-svc:nth-child(2) { animation-delay: 2360ms !important; }
.phone-screen .usager-svc-grid > .usager-svc:nth-child(3) { animation-delay: 2440ms !important; }
.phone-screen .usager-svc-grid > .usager-svc:nth-child(4) { animation-delay: 2520ms !important; }
.phone-screen .bottom-nav {
  animation: sobreSlideUpFromBottom 540ms var(--ease-out) 2600ms both !important;
}
@keyframes sobreSlideUpFromBottom {
  0%   { opacity: 0; transform: translateY(80px); }
  100% { opacity: 1; transform: translateY(0);    }
}

/* ============================================================
   ANIMATIONS — keyframes globaux
   ============================================================ */
@keyframes sobreFadeUp {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0);    }
}
@keyframes sobreSlideIn {
  0%   { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 1; transform: translateY(0);    }
}
@keyframes sobreShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0;  }
}

/* ============================================================
   SKELETON LOADER — shimmer pour chargement
   ============================================================ */
.phone-screen .skeleton {
  background: linear-gradient(
    90deg,
    var(--sobre-hairline) 0%,
    var(--sobre-bg) 50%,
    var(--sobre-hairline) 100%
  );
  background-size: 200% 100%;
  animation: sobreShimmer 1.8s ease-in-out infinite;
  border-radius: 8px;
}

/* ============================================================
   BADGES & STATUS PILLS
   ============================================================ */
.phone-screen .badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1px;
  border: 1px solid transparent;
}
.phone-screen .badge.success {
  background: var(--sobre-success-bg);
  color: var(--sobre-success);
  border-color: rgba(22, 163, 74, 0.15);
}
.phone-screen .badge.accent {
  background: var(--sobre-accent-bg);
  color: var(--sobre-accent);
  border-color: rgba(243, 198, 74, 0.15);
}
.phone-screen .badge.neutral {
  background: var(--sobre-bg);
  color: var(--sobre-ink-mute);
  border-color: var(--sobre-hairline);
}

/* ============================================================
   [v279] WALLET STATS CARD — inspiré Fiinco/Wavexpay
   3 mini-stats (Demandes / Déclarations / Paiements) en grid
   ============================================================ */
.phone-screen .wallet-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 22px;
  margin-top: -32px;          /* remonte sous le header dark navy pour overlap */
  position: relative;
  z-index: 5;
}
.phone-screen .wallet-stat {
  background: var(--sobre-surface);
  border: 1px solid var(--sobre-hairline);
  border-radius: 16px;
  padding: 16px 10px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  box-shadow: 0 4px 14px -6px rgba(6, 58, 34, 0.12);
  transition: all 220ms cubic-bezier(.34,1.4,.6,1);
  min-height: 80px;
}
.phone-screen .wallet-stat:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px -10px rgba(6, 58, 34, 0.22);
  border-color: rgba(6, 58, 34, 0.18);
}
.phone-screen .wallet-stat:active {
  transform: translateY(-1px) scale(0.99);
}
.phone-screen .wallet-stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--sobre-ink);
  letter-spacing: -0.5px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.phone-screen .wallet-stat-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--sobre-ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.3;
}
/* 1er stat = navy filled (focal), autres = white */
.phone-screen .wallet-stat:nth-child(1) {
  background: linear-gradient(135deg, #0a6c3e 0%, #0e8a4d 100%);
  border-color: transparent;
}
.phone-screen .wallet-stat:nth-child(1) .wallet-stat-value {
  color: white;
}
.phone-screen .wallet-stat:nth-child(1) .wallet-stat-label {
  color: rgba(255, 255, 255, 0.75);
}
.phone-screen .wallet-stat:nth-child(3) .wallet-stat-value {
  color: var(--sobre-accent);    /* orange pour FCFA */
}

/* ============================================================
   [v277] CARTE URGENCE SANITAIRE (Declaration) — sans fond rouge
   Juste icône + texte rouge sobre, pas de surcharge visuelle.
   ============================================================ */
.phone-screen .page-scroll > div > .card[style*="--red-soft"],
.phone-screen .page-scroll .card[style*="red-soft"] {
  background: transparent !important;
  border: none !important;
  border-color: transparent !important;
  padding: 12px 4px !important;
  box-shadow: none !important;
}

/* ============================================================
   [v285] BOTTOM NAV — flex flow IDENTIQUE sur TOUS les écrans usager
   Le .page.with-tabs avait un padding-bottom: 78px pour l'ancien nav
   absolute → on l'annule pour que le flex flow ne laisse pas de vide.
   ============================================================ */
.phone-screen .usager-page,
.phone-screen .page,
.phone-screen .page.with-tabs,
.phone-screen .chat-page {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 100% !important;
  position: absolute !important;
  inset: 0 !important;
  padding-bottom: 0 !important;     /* annule le padding 78px legacy */
}
.phone-screen .presta-scroll,
.phone-screen .page-scroll {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  padding-bottom: 16px !important;   /* PAS de 100px reserve : nav est en flex flow */
}
.phone-screen .bottom-nav {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(24px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.8) !important;
  border: none !important;
  border-top: 1px solid var(--sobre-hairline) !important;
  box-shadow: 0 -2px 12px -4px rgba(6, 58, 34, 0.08) !important;
  /* [v278] PLUS d'absolute — flex flow item, toujours en bas via flex layout */
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  height: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  border-radius: 0 !important;
  z-index: 50 !important;
  margin-top: auto !important;
}

/* ============================================================
   [v271] WOW MICRO-DETAILS — ripple touch + page transitions
   ============================================================ */
/* Ripple effect on press : cards, chips, buttons */
.phone-screen .usager-svc,
.phone-screen .quick-chip,
.phone-screen .btn-primary,
.phone-screen .btn-accent,
.phone-screen .ico-btn,
.phone-screen .nav-item {
  position: relative;
  overflow: hidden;
}
.phone-screen .usager-svc::before,
.phone-screen .quick-chip::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(243, 198, 74, 0.25) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  transition: width 600ms ease-out, height 600ms ease-out, opacity 600ms ease-out;
  pointer-events: none;
  opacity: 0;
  z-index: 0;
}
.phone-screen .usager-svc:active::before,
.phone-screen .quick-chip:active::before {
  width: 200%;
  height: 200%;
  opacity: 1;
  transition: width 0ms, height 0ms, opacity 0ms;
}
.phone-screen .usager-svc:active::before {
  opacity: 0.3;
}
/* [v484] Anti-attente : ripple SUPPRIME sur les service cards (rendu instant). */
.phone-screen .usager-svc::before,
.phone-screen .usager-svc:active::before {
  display: none !important;
}
/* [v486] Point vert top-right sur usager-svc qui a une demande en cours
   (demande user "patout ou j ai une demande en cours non encore fini
   je veux un point vert sur le bouton en haut a droite"). */
.phone-screen .usager-svc-active-dot {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #2EB872;          /* vert ONAS */
  box-shadow: 0 0 0 3px rgba(46, 184, 114, 0.18), 0 0 0 6px rgba(46, 184, 114, 0.08);
  animation: usagerSvcDotPulse 1.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes usagerSvcDotPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(46, 184, 114, 0.18), 0 0 0 6px rgba(46, 184, 114, 0.08); }
  50%      { box-shadow: 0 0 0 5px rgba(46, 184, 114, 0.30), 0 0 0 10px rgba(46, 184, 114, 0.12); }
}
/* [v487] AURA VERTE qui parcourt le cadre de la carte (demande user
   "une aura verte parcoure le cadre en meme temps que le clignotement vert").
   Implementation : ::before contient un degrade conique qui tourne autour
   du bouton via animation rotate, masque avec un padding interieur pour
   ne montrer que la bordure. Synchro avec le pulse du point vert. */
.phone-screen .usager-svc.has-active-request {
  position: relative;
  overflow: visible !important;
}
.phone-screen .usager-svc.has-active-request::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--aura-angle, 0deg),
    rgba(46, 184, 114, 0) 0%,
    rgba(46, 184, 114, 0.85) 18%,
    rgba(46, 184, 114, 0.35) 35%,
    rgba(46, 184, 114, 0) 55%,
    rgba(46, 184, 114, 0) 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
  animation: usagerSvcAuraSpin 2.2s linear infinite;
}
@property --aura-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes usagerSvcAuraSpin {
  0%   { --aura-angle: 0deg;   opacity: 0.85; }
  50%  { opacity: 1; }
  100% { --aura-angle: 360deg; opacity: 0.85; }
}
/* Fallback pour navigateurs qui ne supportent pas @property (rotate visuelle
   par transform du conic-gradient via filter blur, plus simple). */
@supports not (background: conic-gradient(from var(--aura-angle), red, blue)) {
  .phone-screen .usager-svc.has-active-request::after {
    background: linear-gradient(135deg, rgba(46, 184, 114, 0) 0%, rgba(46, 184, 114, 0.7) 50%, rgba(46, 184, 114, 0) 100%);
    animation: usagerSvcAuraGlow 2.2s ease-in-out infinite;
  }
  @keyframes usagerSvcAuraGlow {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 1; }
  }
}

/* [v484] Page transitions DESACTIVEES — click instantane (demande user
   "pas d animation d attente, le click affiche instantanement"). */
.phone-screen .page-enter,
.phone-screen .page > div:first-child {
  animation: none !important;
}
/* [v484] Cards historique usager : MULTI-COLONNES en mode tablette,
   meme rangement que presta. Override .phone-screen scope. */
@media (min-width: 600px) {
  .mobile-stage-fullscreen .phone-screen .usager-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 0 22px !important;
  }
}
@media (min-width: 900px) {
  .mobile-stage-fullscreen .phone-screen .usager-cards-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
    padding: 0 28px !important;
  }
}
@media (min-width: 1200px) {
  .mobile-stage-fullscreen .phone-screen .usager-cards-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    padding: 0 32px !important;
    max-width: 1400px;
    margin: 0 auto;
  }
}
@keyframes pageEnter {
  0%   { opacity: 0; transform: translateX(20px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* ============================================================
   RESPECT REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .phone-screen *,
  .phone-screen *::before,
  .phone-screen *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   [v300] EMBED MODE — quand usager.html est chargée dans un iframe
   admin (drawer "Nouvelle demande" / "Nouvelle déclaration"), on
   cache toute la chrome (persona-bar, dev-controls, launcher) pour
   que le formulaire prenne tout l'espace du drawer. Body padding
   safe-area est aussi neutralisé.
   ============================================================ */
html.embed-mode body {
  padding: 0 !important;
  background: white !important;
}
html.embed-mode .persona-bar,
html.embed-mode .dev-controls,
html.embed-mode .launcher,
html.embed-mode .home-btn {
  display: none !important;
}
html.embed-mode #root,
html.embed-mode .mobile-stage,
html.embed-mode .mobile-stage-fullscreen {
  min-height: 100vh;
  background: white !important;
  padding: 0 !important;
}
html.embed-mode .phone {
  width: 100vw !important;
  max-width: none !important;
  height: 100vh !important;
  background: white !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}
html.embed-mode .phone-screen {
  width: 100% !important;
  height: 100vh !important;
  border-radius: 0 !important;
}
html.embed-mode .with-tabs .nav-tabs,
html.embed-mode .bottom-nav {
  display: none !important;
}
html.embed-mode .page.with-tabs {
  padding-bottom: 0 !important;
}

/* ============================================================
   [v301] Bouton APK intégré dans chaque persona-card (Usager + Prestataire)
   Placé sous "Ouvrir l'app mobile →", style vert solide, distinct du clic
   parent (stopPropagation côté React).
   ============================================================ */
.persona-apk-btn {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: linear-gradient(135deg, #15803d 0%, #166534 100%);
  color: white;
  border-radius: 999px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  box-shadow: 0 4px 12px -3px rgba(21, 128, 61, 0.35);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  cursor: pointer;
  align-self: flex-start;
}
.persona-apk-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -3px rgba(21, 128, 61, 0.45);
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
}
.persona-apk-btn:active {
  transform: translateY(0);
}
.persona-apk-btn svg {
  flex-shrink: 0;
}

/* ============================================================
   [v306] EMBED MODE renforcé — pour les drawers admin
   "Nouvelle demande" / "Nouvelle déclaration". On veut UNIQUEMENT
   le formulaire, sans aucune animation d'arrivée ni transition de page.
   ============================================================ */
html.embed-mode * {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}
html.embed-mode .splash,
html.embed-mode .splash-screen,
html.embed-mode .onboarding,
html.embed-mode #sunuonas-boot-splash {
  display: none !important;
}
/* AppBar (header avec back arrow) : caché dans le drawer admin car le
   drawer a déjà son propre header "Console admin — Nouvelle ..." */
html.embed-mode .app-bar,
html.embed-mode .appbar,
html.embed-mode .mobile-app-bar {
  display: none !important;
}
/* Réduit le padding-top de la page si AppBar était présente */
html.embed-mode .page {
  padding-top: 12px !important;
}
/* Status bar (heure simulée Android) : cachée en embed */
html.embed-mode .status-bar,
html.embed-mode .mobile-status-bar {
  display: none !important;
}
/* Pas d'effet hover lift sur les boutons (gain de fluidité dans iframe) */
html.embed-mode button:hover {
  transform: none !important;
}

/* [v481] Animations seulement a la 1ere ouverture par session.
   Class .anims-played ajoutee sur <html> apres 2.5s (puis sur tous les
   re-loads suivants dans la session via sessionStorage flag). */
html.anims-played .usager-banner,
html.anims-played .usager-header,
html.anims-played .greeting-strip,
html.anims-played .usager-hero,
html.anims-played .quick-chip,
html.anims-played .quick-actions,
html.anims-played .presta-drawer-item,
html.anims-played .nav-item,
html.anims-played .service-card,
html.anims-played .usager-cards-grid > *,
html.anims-played .presta-card,
html.anims-played .presta-ring,
html.anims-played .presta-month-day,
html.anims-played .draggable-sheet,
html.anims-played .phone,
html.anims-played .phone-screen,
html.anims-played .presta-page,
html.anims-played .page,
html.anims-played .page-scroll {
  animation: none !important;
}

/* [v477] TABLET : usager-page passe en grid 2-col pour aligner header
   et banner (ou hero) sur la meme ligne. Override le display: flex
   important pose en haut de ce fichier. */
@media (min-width: 768px) {
  .mobile-stage-fullscreen .usager-page {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto 1fr !important;
    column-gap: 0;
  }
  .mobile-stage-fullscreen .usager-page > .usager-header {
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin-right: 6px !important;
    align-self: start;
  }
  .mobile-stage-fullscreen .usager-page > .presta-scroll {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    padding-top: calc(8px + env(safe-area-inset-top, 0px)) !important;
  }
  .mobile-stage-fullscreen .usager-page > .presta-scroll > .usager-hero,
  .mobile-stage-fullscreen .usager-page > .presta-scroll > .usager-banner {
    margin-left: 6px !important;
  }
}