/* Copie de brand/motion/remizo-motion.css (source unique) : le site est servi seul, sans brand/. */
/* =============================================================================
   Remizo — Motion
   Tokens, animation du logo, loaders et micro-interactions.
   CSS pur, aucune dépendance. Respecte prefers-reduced-motion.
   ============================================================================= */

:root {
  /* Couleurs */
  --rz-orange: #FF8500;
  --rz-orange-light: #FFA23A;
  --rz-orange-deep: #FF7A00;
  --rz-orange-strong: #C45F00;
  --rz-orange-soft: #FFE9D3;
  --rz-ink: #1F1A14;
  --rz-paper: #FBF8F4;
  --rz-line: #ECE5DB;
  --rz-ok: #0B8A4C;

  /* Durées */
  --rz-dur-instant: 120ms;  /* pression, survol */
  --rz-dur-fast: 200ms;     /* apparition d'éléments d'interface */
  --rz-dur-base: 320ms;     /* panneaux, toasts, dialogues */
  --rz-dur-slow: 560ms;     /* entrées marquées (logo, succès) */
  --rz-dur-loop: 1400ms;    /* boucles de chargement */

  /* Courbes */
  --rz-ease-out: cubic-bezier(.22, 1, .36, 1);       /* entrée naturelle */
  --rz-ease-in-out: cubic-bezier(.65, 0, .35, 1);    /* boucles, déplacements */
  --rz-ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* léger rebond, réservé aux moments forts */
}

/* ---------------------------------------------------------------------------
   Symbole (structure commune)
   <svg class="rz-symbol"> … .rz-ticket .rz-dot-a .rz-dot-b .rz-slash
   --------------------------------------------------------------------------- */
.rz-symbol { overflow: visible; }
.rz-symbol .rz-ticket,
.rz-symbol .rz-dot-a,
.rz-symbol .rz-dot-b { transform-box: fill-box; transform-origin: center; }
.rz-symbol .rz-slash { stroke-dasharray: 32; stroke-dashoffset: 0; }

/* ---------------------------------------------------------------------------
   1. Intro du logo  —  .rz-logo.is-intro
   Ticket qui « tombe » en place, le % se dessine, les lettres montent,
   le « o » final rebondit.
   --------------------------------------------------------------------------- */
.rz-logo { display: inline-flex; align-items: center; gap: .32em; font-family: Poppins, system-ui, sans-serif; }
.rz-logo .rz-symbol { width: 1.45em; height: 1.45em; }
.rz-word { font-weight: 600; letter-spacing: -.03em; color: var(--rz-ink); line-height: 1; display: inline-flex; }
.rz-word span { display: inline-block; }
.rz-word .rz-o { color: var(--rz-orange); }
.rz-logo.on-dark .rz-word { color: #fff; }

.rz-logo.is-intro .rz-ticket { animation: rz-ticket-in var(--rz-dur-slow) var(--rz-ease-spring) both; }
.rz-logo.is-intro .rz-slash { animation: rz-draw 360ms var(--rz-ease-out) 280ms both; }
.rz-logo.is-intro .rz-dot-a { animation: rz-pop 420ms var(--rz-ease-spring) 440ms both; }
.rz-logo.is-intro .rz-dot-b { animation: rz-pop 420ms var(--rz-ease-spring) 540ms both; }
.rz-logo.is-intro .rz-word span { animation: rz-rise 480ms var(--rz-ease-out) both; animation-delay: calc(380ms + var(--i) * 45ms); }
.rz-logo.is-intro .rz-word .rz-o { animation: rz-rise 480ms var(--rz-ease-out) both, rz-bounce 520ms var(--rz-ease-spring) 900ms forwards; animation-delay: calc(380ms + var(--i) * 45ms), 900ms; }

@keyframes rz-ticket-in {
  0%   { opacity: 0; transform: translateY(-14%) scale(.6) rotate(-10deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes rz-draw  { from { stroke-dashoffset: 32; } to { stroke-dashoffset: 0; } }
@keyframes rz-pop   { 0% { transform: scale(0); } 100% { transform: scale(1); } }
@keyframes rz-rise  { from { opacity: 0; transform: translateY(.35em); } to { opacity: 1; transform: none; } }
@keyframes rz-bounce {
  0%   { transform: none; }
  40%  { transform: translateY(-.18em) scale(1.12); }
  70%  { transform: translateY(0) scale(.96); }
  100% { transform: none; }
}

/* Survol du logo (navigation) : le coupon se soulève, le % pivote. */
.rz-logo.is-hoverable .rz-symbol { transition: transform var(--rz-dur-base) var(--rz-ease-spring); }
.rz-logo.is-hoverable:hover .rz-symbol { transform: translateY(-2px) rotate(-8deg); }

/* ---------------------------------------------------------------------------
   2. Loaders
   --------------------------------------------------------------------------- */

/* 2a. Loader principal (chargement de page, calcul) — le % se dessine en boucle */
.rz-loader { display: inline-grid; justify-items: center; gap: 14px; color: var(--rz-ink); font: 500 14px Poppins, system-ui, sans-serif; }
.rz-loader .rz-symbol { width: 64px; height: 64px; }
.rz-loader .rz-ticket { animation: rz-breathe var(--rz-dur-loop) var(--rz-ease-in-out) infinite; }
.rz-loader .rz-slash  { animation: rz-draw-loop var(--rz-dur-loop) var(--rz-ease-in-out) infinite; }
.rz-loader .rz-dot-a  { animation: rz-dot-loop var(--rz-dur-loop) var(--rz-ease-in-out) infinite; }
.rz-loader .rz-dot-b  { animation: rz-dot-loop var(--rz-dur-loop) var(--rz-ease-in-out) calc(var(--rz-dur-loop) / 2) infinite; }
.rz-loader small { color: #7A6F63; font-size: 13px; }

@keyframes rz-breathe   { 0%, 100% { transform: scale(1); } 50% { transform: scale(.94); } }
@keyframes rz-draw-loop { 0% { stroke-dashoffset: 32; } 45%, 55% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -32; } }
@keyframes rz-dot-loop  { 0%, 100% { transform: scale(1); } 50% { transform: scale(.55); } }

/* 2b. Spinner compact (boutons, cellules) — perforation de coupon */
.rz-perfo { display: inline-flex; gap: 4px; align-items: center; height: 1em; }
.rz-perfo i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: rz-perfo 900ms var(--rz-ease-in-out) infinite; }
.rz-perfo i:nth-child(2) { animation-delay: 120ms; }
.rz-perfo i:nth-child(3) { animation-delay: 240ms; }
@keyframes rz-perfo { 0%, 80%, 100% { transform: scale(.5); opacity: .35; } 40% { transform: scale(1); opacity: 1; } }

/* 2c. Barre de progression (imports, déploiements) */
.rz-progress { height: 6px; border-radius: 99px; background: var(--rz-orange-soft); overflow: hidden; position: relative; }
.rz-progress > b { position: absolute; inset: 0 auto 0 0; width: var(--value, 40%); border-radius: inherit; background: linear-gradient(90deg, var(--rz-orange-light), var(--rz-orange-deep)); transition: width var(--rz-dur-base) var(--rz-ease-out); }
.rz-progress.is-indeterminate > b { width: 35%; animation: rz-indeterminate 1200ms var(--rz-ease-in-out) infinite; }
@keyframes rz-indeterminate { from { transform: translateX(-100%); } to { transform: translateX(300%); } }

/* 2d. Squelette (contenu en attente) — reflet chaud */
.rz-skeleton { border-radius: 10px; background: linear-gradient(100deg, #F1EBE3 30%, #FBF6EF 50%, #F1EBE3 70%) 0 0 / 300% 100%; animation: rz-shimmer 1600ms linear infinite; }
@keyframes rz-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ---------------------------------------------------------------------------
   3. Micro-interactions
   --------------------------------------------------------------------------- */

/* 3a. Bouton : pression */
.rz-btn { font: 600 14px Poppins, system-ui, sans-serif; color: #fff; background: var(--rz-orange); border: 0; border-radius: 12px; padding: 12px 20px; cursor: pointer; display: inline-flex; align-items: center; gap: 10px;
  transition: transform var(--rz-dur-instant) var(--rz-ease-out), background var(--rz-dur-fast) var(--rz-ease-out), box-shadow var(--rz-dur-fast) var(--rz-ease-out); }
.rz-btn:hover { background: var(--rz-orange-deep); box-shadow: 0 6px 18px rgb(255 122 0 / .28); }
.rz-btn:active { transform: scale(.97); }
.rz-btn.is-ghost { background: transparent; color: var(--rz-ink); border: 1px solid var(--rz-line); }
.rz-btn.is-ghost:hover { background: #fff; box-shadow: none; }

/* 3b. Offre appliquée : la ligne de remise glisse, le montant passe en orange */
.rz-applied { animation: rz-slide-in var(--rz-dur-base) var(--rz-ease-out) both; }
.rz-applied .rz-amount { animation: rz-flash 900ms var(--rz-ease-out) 200ms both; }
@keyframes rz-slide-in { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes rz-flash { 0% { color: var(--rz-ink); background: transparent; } 30% { color: var(--rz-orange-strong); background: var(--rz-orange-soft); } 100% { color: var(--rz-orange-strong); background: transparent; } }

/* 3c. Coupon utilisé : tampon */
.rz-coupon { position: relative; }
.rz-stamp { position: absolute; right: 16px; top: 50%; translate: 0 -50%; font: 700 13px Poppins, system-ui, sans-serif; letter-spacing: .14em; color: var(--rz-ok); border: 2px solid currentColor; border-radius: 8px; padding: 4px 10px; opacity: 0; pointer-events: none; }
.rz-coupon.is-used .rz-stamp { animation: rz-stamp 420ms var(--rz-ease-spring) both; }
.rz-coupon.is-used .rz-coupon-body { transition: opacity var(--rz-dur-base) var(--rz-ease-out); opacity: .45; }
@keyframes rz-stamp { 0% { opacity: 0; transform: scale(1.8) rotate(-14deg); } 100% { opacity: 1; transform: scale(1) rotate(-8deg); } }

/* 3d. Compteur de points qui défile (piloté par JS : rzCountUp) */
.rz-count { font-variant-numeric: tabular-nums; }
.rz-count.is-bumped { animation: rz-bump 420ms var(--rz-ease-spring); }
@keyframes rz-bump { 50% { transform: scale(1.08); color: var(--rz-orange-strong); } }

/* 3e. Toast */
.rz-toast { display: flex; align-items: center; gap: 12px; background: var(--rz-ink); color: #fff; border-radius: 14px; padding: 14px 18px; font: 500 14px Poppins, system-ui, sans-serif; box-shadow: 0 12px 32px rgb(31 26 20 / .22); animation: rz-toast-in var(--rz-dur-base) var(--rz-ease-spring) both; }
.rz-toast.is-leaving { animation: rz-toast-out var(--rz-dur-fast) var(--rz-ease-out) both; }
.rz-toast i { width: 8px; height: 8px; border-radius: 50%; background: var(--rz-orange); flex: none; }
@keyframes rz-toast-in  { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes rz-toast-out { to { opacity: 0; transform: translateY(8px); } }

/* 3f. Interrupteur (activer / suspendre une offre) */
.rz-switch { width: 44px; height: 26px; border-radius: 99px; background: #DDD4C8; position: relative; cursor: pointer; border: 0; transition: background var(--rz-dur-fast) var(--rz-ease-out); }
.rz-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .2); transition: transform var(--rz-dur-fast) var(--rz-ease-spring); }
.rz-switch[aria-checked="true"] { background: var(--rz-orange); }
.rz-switch[aria-checked="true"]::after { transform: translateX(18px); }

/* 3g. Publication en production : pulsation « en direct » */
.rz-live { display: inline-flex; align-items: center; gap: 8px; font: 600 12px Poppins, system-ui, sans-serif; color: var(--rz-ok); }
.rz-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: rz-live 1800ms var(--rz-ease-out) infinite; }
@keyframes rz-live { 0% { box-shadow: 0 0 0 0 rgb(11 138 76 / .45); } 70%, 100% { box-shadow: 0 0 0 8px rgb(11 138 76 / 0); } }

/* ---------------------------------------------------------------------------
   Accessibilité : mouvement réduit
   Les boucles deviennent un simple fondu, les entrées sont instantanées.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .rz-loader .rz-symbol { animation: rz-fade 1600ms linear infinite alternate !important; animation-duration: 1600ms !important; animation-iteration-count: infinite !important; }
  @keyframes rz-fade { from { opacity: 1; } to { opacity: .45; } }
}