/* ==========================================================================
   QRcashing — Design tokens
   Ce fichier définit les tokens de marque (couleurs, typographie, espacement,
   ombres) et les styles globaux spécifiques à QRcashing. Le reset de base,
   les conteneurs, les utilitaires visually-hidden, etc. sont fournis par
   Bootstrap 5.3.8 (bootstrap.min.css) et ne sont pas dupliqués ici.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* --- Color (charte officielle) --- */
  --brand-green:  #31CB00;
  --brand-teal:   #03BC97;
  --black:        #000000;
  --ink:          #0A0F0D;
  --ink-70:       rgba(10,15,13,.7);
  --ink-50:       rgba(10,15,13,.5);
  --ink-15:       rgba(10,15,13,.15);
  --paper:        #FBF8F1;
  --paper-warm:   #F5F0E4;
  --clay:         #E4DFD1;
  --clay-dark:    #D8D2BF;
  --line:         #DCD5C4;

  /* rôles sémantiques, dérivés de la charte */
  --emerald:      #03BC97;
  --emerald-60:   #05CDA6;
  --emerald-dk:   #029277;
  --emerald-tint: #E1F8F2;
  --gold:         #31CB00;
  --gold-dk:      #279E00;
  --gold-tint:    #E9FADF;
  --white:        #FFFFFF;
  --danger:       #B3432B;

  /* --- Type --- */
  --font-display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-text: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-11: .6875rem;
  --fs-13: .8125rem;
  --fs-15: .9375rem;
  --fs-17: 1.0625rem;
  --fs-20: 1.25rem;
  --fs-25: 1.5625rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-50: 3.125rem;
  --fs-63: 3.9375rem;

  /* --- Space (8pt-ish scale) --- */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* --- Radius / shadow / motion --- */
  --r-sm: 6px;
  --r-md: 14px;
  --r-lg: 26px;
  --r-pill: 999px;
  --shadow-card: 0 1px 2px rgba(0,0,0,.06), 0 12px 28px -12px rgba(0,0,0,.18);
  --shadow-pop: 0 20px 50px -18px rgba(0,0,0,.32);
  --ease: cubic-bezier(.22,.61,.36,1);

  --header-h: 76px;
}

body{
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--fs-17);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor: pointer; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,p{ margin: 0; }

:focus-visible{
  outline: 2.5px solid var(--emerald);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, .h1{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 1.7rem + 2.4vw, var(--fs-63));
  line-height: 1.04;
  letter-spacing: -.02em;
}
h2, .h2{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.45rem + 1.3vw, var(--fs-40));
  line-height: 1.1;
  letter-spacing: -.01em;
}
h3, .h3{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-25);
  line-height: 1.2;
  letter-spacing: -.005em;
}
.lede{
  font-size: var(--fs-20);
  line-height: 1.5;
  color: var(--ink-70);
}
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--gold); 
  text-transform: uppercase;
}
/*
.eyebrow::before{
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}
*/

/* ---------- Scroll reveal (JS toggles .is-visible) ---------- */
[data-reveal]{
  opacity: 0;
  translate: 0 40px;
  scale: .98;
  transition: opacity .8s var(--ease), translate .8s var(--ease), scale .8s var(--ease);
}
[data-reveal].is-visible{
  opacity: 1;
  translate: 0 0;
  scale: 1;
}
[data-reveal-group] > *{
  opacity: 0;
  translate: 0 30px;
  scale: .97;
  transition: opacity .65s var(--ease), translate .65s var(--ease), scale .65s var(--ease);
}
[data-reveal-group].is-visible > *{
  opacity: 1;
  translate: 0 0;
  scale: 1;
}
[data-reveal-group].is-visible > *:nth-child(1){ transition-delay: .03s; }
[data-reveal-group].is-visible > *:nth-child(2){ transition-delay: .1s; }
[data-reveal-group].is-visible > *:nth-child(3){ transition-delay: .17s; }
[data-reveal-group].is-visible > *:nth-child(4){ transition-delay: .24s; }
[data-reveal-group].is-visible > *:nth-child(5){ transition-delay: .31s; }
[data-reveal-group].is-visible > *:nth-child(6){ transition-delay: .38s; }

@media (prefers-reduced-motion: reduce){
  [data-reveal], [data-reveal-group] > *{
    opacity: 1 !important; translate: 0 0 !important; scale: 1 !important; transition: none !important;
  }
  .hero-visual{ transform: none !important; }
}

/* Progress bar fixed at top, filled on scroll */
.scroll-progress{
  position: fixed; top: 0; left: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--emerald));
  width: 0%;
  z-index: 300;
  transition: width .1s linear;
}