/* =========================================================
   MesDépenses — Animations de la page d'accueil (styles2.css)
   Complète styles.css : ne redéfinit pas les variables de base
   ========================================================= */

:root {
  --c1: #007782;
  --c2: #2fb7c2;
  --c3: #f2a93b;
  --c4: #e4572e;
  --c5: #7c5cff;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-spring: cubic-bezier(.2, .9, .3, 1.4);
}

/* ============ BARRE DE PROGRESSION DE SCROLL ============ */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--c1), var(--c2));
  z-index: 100;
  transition: width .1s linear;
}

/* ============ RÉVÉLATION AU SCROLL ============ */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity .8s var(--ease-out),
    transform .8s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.reveal.in { opacity: 1; transform: none; }
.reveal.pop { transform: scale(.6) translateY(10px); }
.reveal.pop.in { transform: none; }

.badge-pill {
  display: inline-block;
  background: var(--primary-light);
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  margin-bottom: 14px;
}

/* ============ HERO ============ */
.hero-anim {
  position: relative;
  overflow: hidden;
}
.hero-anim .hero-inner {
  position: relative;
  z-index: 2;
}

.reveal-hero {
  animation: heroIn 1s var(--ease-out) both;
}
@keyframes heroIn {
  from { opacity: 0; transform: translateY(40px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* Titre animé (machine à écrire) */
.typed-wrap {
  color: var(--primary);
  display: inline-block;
  min-width: 1ch;
}
.caret {
  display: inline-block;
  color: var(--primary);
  font-weight: 300;
  margin-left: 1px;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* Bouton avec halo pulsant */
.btn-pulse { position: relative; }
.btn-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 4px;
  box-shadow: 0 0 0 0 rgba(0, 119, 130, .5);
  animation: pulse 2.2s infinite;
  pointer-events: none;
}
@keyframes pulse {
  70%  { box-shadow: 0 0 0 16px rgba(0, 119, 130, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 119, 130, 0); }
}

.btn-primary {
  transition: background .2s, transform .2s, box-shadow .2s;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0, 119, 130, .25);
}
.btn-inline {
  display: inline-block;
  width: auto;
  padding: 13px 28px;
  margin-top: 8px;
}

/* Bulles de fond (CTA) */
.bubbles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}
.bubbles span {
  position: absolute;
  bottom: -80px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(0, 119, 130, .10);
  animation: rise 14s infinite ease-in;
}
.bubbles span:nth-child(1) { left: 6%;  width: 40px; height: 40px; animation-duration: 12s; }
.bubbles span:nth-child(2) { left: 22%; width: 80px; height: 80px; animation-duration: 18s; animation-delay: 2s; }
.bubbles span:nth-child(3) { left: 45%; width: 30px; height: 30px; animation-duration: 11s; animation-delay: 4s; }
.bubbles span:nth-child(4) { left: 63%; width: 70px; height: 70px; animation-duration: 16s; animation-delay: 1s; }
.bubbles span:nth-child(5) { left: 80%; width: 50px; height: 50px; animation-duration: 13s; animation-delay: 3s; }
.bubbles span:nth-child(6) { left: 92%; width: 36px; height: 36px; animation-duration: 15s; animation-delay: 5s; }
@keyframes rise {
  to { transform: translateY(-120vh) rotate(180deg); opacity: 0; }
}

/* ============ VISUEL HERO : TICKET ============ */
.hero-visual { position: relative; }

/* Le ticket garde son inclinaison ET flotte doucement :
   on anime la rotation de base dans les keyframes */
.scan-ticket {
  position: relative;
  overflow: hidden;
  animation: ticketFloat 5s ease-in-out infinite;
  box-shadow: 0 20px 50px rgba(0, 119, 130, .18);
}
@keyframes ticketFloat {
  0%, 100% { transform: rotate(3deg)  translateY(0); }
  50%      { transform: rotate(1deg)  translateY(-12px); }
}

/* Faisceau laser qui balaie le ticket */
.scan-ticket .laser {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--c2), transparent);
  box-shadow: 0 0 14px 3px rgba(47, 183, 194, .7);
  animation: laser 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes laser {
  0%   { top: 0; }
  50%  { top: 100%; }
  100% { top: 0; }
}

/* Badges flottants autour du ticket */
.chip-float {
  position: absolute;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary-dark);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .1);
  opacity: 0;
  animation: chipIn 8s infinite;
}
.chip-float.cf1 { top: 12%;    right: -4%; animation-delay: .8s; }
.chip-float.cf2 { bottom: 10%; right: 6%;  animation-delay: 1.8s; }
@keyframes chipIn {
  0%, 6%    { opacity: 0; transform: translateY(14px) scale(.8); }
  14%, 78%  { opacity: 1; transform: none; }
  90%, 100% { opacity: 0; transform: translateY(-10px); }
}

/* ============ CHIFFRES : nombre animé ============ */
.stat strong .count {
  display: inline;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  line-height: inherit;
}

/* ============ MARQUEE ============ */
.marquee {
  overflow: hidden;
  padding: 36px 0 8px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track {
  display: flex;
  gap: 48px;
  width: max-content;
  animation: scrollX 140s linear infinite;
}
.marquee-track span {
  font-size: 22px;
  font-weight: 700;
  color: #c5cfd0;
  letter-spacing: -.5px;
  white-space: nowrap;
  transition: color .2s;
}
.marquee-track span:hover { color: var(--primary); }
@keyframes scrollX {
  to { transform: translateX(-50%); }
}

/* ============ ÉTAPES ============ */
.steps-connected { position: relative; }
.steps-connected::before {
  content: "";
  position: absolute;
  top: 48px;
  left: 16%;
  right: 16%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--primary) 0 8px, transparent 8px 16px);
  opacity: .35;
  z-index: 0;
}
.step { position: relative; z-index: 1; }

.tilt {
  transition: transform .25s, box-shadow .25s, opacity .8s, border-color .25s;
}
.tilt:hover {
  transform: translateY(-8px) rotate(-.6deg);
  box-shadow: 0 18px 36px rgba(0, 119, 130, .14);
  border-color: var(--primary);
}

.step .num {
  animation: numPulse 2.6s infinite;
}
@keyframes numPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 119, 130, .4); }
  50%      { box-shadow: 0 0 0 10px rgba(0, 119, 130, 0); }
}

/* ============ TÉLÉPHONE (taille fixe) ============ */
.phone {
  position: relative;
  width: 300px;
  height: 540px;             /* hauteur fixe : le cadre ne bouge jamais */
  max-width: 100%;
  margin: 0 auto;
  background: #fff;
  border: 8px solid #1a1a1a;
  border-radius: 34px;
  padding: 26px 14px 16px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .18);
  overflow: hidden;
}
.phone-notch {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 16px;
  background: #1a1a1a;
  border-radius: 10px;
  z-index: 10;
}

/* ============ CONTENU DU TÉLÉPHONE ============ */
.live-mock {
  border: none;
  padding: 8px 4px;
  position: relative;
  height: 100%;
}
.live-mock .field {
  position: relative;
  margin-bottom: 14px;
}
.live-mock .input {
  min-height: 42px;
  display: flex;
  align-items: center;
}

/* Suggestions en superposition : n'agrandissent pas le téléphone */
.live-mock .suggest {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 5;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .12);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .4s, opacity .4s;
}
.live-mock .suggest.show {
  max-height: 140px;
  opacity: 1;
}
.live-mock .suggest .hl { background: var(--primary-light); }

.cat-input .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c1);
  margin-right: 8px;
  opacity: 0;
  transition: opacity .3s;
}
.cat-input.show .dot { opacity: 1; }

.btn-fake {
  transition: transform .15s, background .2s;
}
.btn-fake.press {
  transform: scale(.94);
  background: var(--primary-dark);
}

/* Confirmation : positionnée dans le téléphone, sans effet de décalage */
.added-toast {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translate(-50%, 20px);
  background: #1f9d55;
  color: #fff;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  transition: opacity .4s, transform .4s;
  white-space: nowrap;
  z-index: 6;
}
.added-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Liste des dépenses : en bas du téléphone, en position absolue */
.live-list {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 16px;
  font-size: 13px;
  border-top: 1px dashed var(--border);
  padding-top: 10px;
  background: #fff;
}
.li-item {
  display: flex;
  justify-content: space-between;
  padding: 7px 4px;
  border-bottom: 1px solid var(--bg-soft);
  animation: slideIn .5s var(--ease-out) both;
}
.li-item.new {
  background: var(--primary-light);
  border-radius: 6px;
  animation: dropIn .6s var(--ease-spring) both;
}
@keyframes slideIn {
  from { opacity: 0; transform: translateX(-10px); }
}
@keyframes dropIn {
  from { opacity: 0; transform: translateY(-30px) scale(.9); }
}

.replay { margin-top: 18px; }

/* ============ DÉMO SCAN TICKET ============ */
.scan-demo { max-width: 340px; margin: 0 auto; }

.scan-paper {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 22px;
  font-family: "Courier New", monospace;
  font-size: 13px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .1);
  transform: rotate(-2deg);
  overflow: hidden;
}
.sp-title {
  text-align: center;
  font-weight: 700;
  margin-bottom: 10px;
}
.sp-line {
  display: flex;
  justify-content: space-between;
  padding: 4px 6px;
  border-radius: 3px;
  transition: background .3s;
}
.sp-line.hit { background: rgba(47, 183, 194, .25); }
.sp-total {
  border-top: 1px dashed #999;
  margin-top: 8px;
  padding-top: 10px;
  font-weight: 700;
}
.sp-date {
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  margin-top: 10px;
  padding: 3px;
  border-radius: 3px;
  transition: background .3s;
}
.sp-date.hit { background: rgba(47, 183, 194, .25); }

.laser-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, var(--c2), transparent);
  box-shadow: 0 0 16px 4px rgba(47, 183, 194, .8);
}
.laser-line.go {
  opacity: 1;
  animation: laserDown 2.2s linear forwards;
}
@keyframes laserDown {
  from { top: 0; }
  to   { top: 100%; }
}

.arrow-down {
  text-align: center;
  font-size: 22px;
  color: var(--primary);
  margin: 10px 0;
  opacity: 0;
  transition: opacity .4s;
}
.arrow-down.show {
  opacity: 1;
  animation: bounceY 1s infinite;
}
@keyframes bounceY {
  50% { transform: translateY(6px); }
}

.extract-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 18px;
  box-shadow: 0 14px 34px rgba(0, 119, 130, .12);
  opacity: .35;
  transform: translateY(10px);
  transition: opacity .5s, transform .5s, border-color .5s;
}
.extract-card.show {
  opacity: 1;
  transform: none;
  border-color: var(--primary);
}
.extract-card h4 {
  margin-bottom: 10px;
  font-size: 15px;
}
.ex-row {
  display: flex;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--bg-soft);
  font-size: 14px;
}
.ex-row span {
  color: var(--muted);
  width: 70px;
}
.ex-row b { flex: 1; }
.ex-row .tick {
  color: #1f9d55;
  font-style: normal;
  font-weight: 700;
  opacity: 0;
  transform: scale(0);
  transition: .3s var(--ease-spring);
}
.ex-row.ok .tick {
  opacity: 1;
  transform: scale(1);
}

.conf {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
}
.conf .track {
  flex: 1;
  background: var(--bg-soft);
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
}
.conf .fill {
  height: 8px;
  width: 0;
  background: linear-gradient(90deg, var(--c2), var(--c1));
  border-radius: 4px;
  transition: width 1.2s ease;
}
.conf b {
  color: var(--primary);
  min-width: 44px;
  text-align: right;
}

/* ============ RAPPORT ANIMÉ ============ */
.rep-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.trend {
  font-size: 13px;
  color: #1f9d55;
  font-weight: 600;
}
.donut {
  width: 110px;
  height: 110px;
  transform: rotate(-90deg);
  flex-shrink: 0;
}
.donut circle {
  fill: none;
  stroke-width: 16;
}
.donut .d-bg { stroke: var(--bg-soft); }
.donut .d-seg {
  stroke-dasharray: 289;
  stroke-dashoffset: 289;
  transition: stroke-dashoffset 1.4s var(--ease-out);
}
.donut .s1 { stroke: var(--c1); }
.donut .s2 { stroke: var(--c3); }
.donut .s3 { stroke: var(--c4); }

.report-anim.go .d-seg.s1 { stroke-dashoffset: 180; }
.report-anim.go .d-seg.s2 { stroke-dashoffset: 240; }
.report-anim.go .d-seg.s3 { stroke-dashoffset: 265; }

.report-anim .fill {
  width: 0;
  transition: width 1.4s var(--ease-out);
}
.report-anim .bar:nth-of-type(2) .fill { background: var(--c1); }
.report-anim .bar:nth-of-type(3) .fill { background: var(--c3); }
.report-anim .bar:nth-of-type(4) .fill { background: var(--c4); }

.lg {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 6px;
}
.lg1 { background: var(--c1); }
.lg2 { background: var(--c3); }
.lg3 { background: var(--c4); }
.lg4 { background: var(--c5); }

.pdf-badge {
  margin-top: 14px;
  display: inline-block;
  background: var(--primary-light);
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 20px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s 1.6s, transform .6s 1.6s;
}
.report-anim.go .pdf-badge {
  opacity: 1;
  transform: none;
}

/* ============ SIMULATEUR ============ */
.sim {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  gap: 32px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 20px 50px rgba(0, 119, 130, .08);
}
.sim-controls { flex: 1; }
.sim-row { margin-bottom: 20px; }
.sim-row label {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 8px;
}
.sim-row b { color: var(--primary); }

.sim input[type="range"] {
  -webkit-appearance: none;
          appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: var(--bg-soft);
  outline: none;
  cursor: pointer;
}
.sim input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary);
  border: 4px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  transition: transform .15s;
}
.sim input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.2); }
.sim input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary);
  border: 4px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

.sim-result { flex: 1; }
.sim-total-label {
  color: var(--muted);
  font-size: 14px;
}
.sim-total {
  font-size: 46px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 14px;
  line-height: 1;
}
.stack {
  display: flex;
  height: 22px;
  border-radius: 11px;
  overflow: hidden;
  background: var(--bg-soft);
  margin-bottom: 14px;
}
.seg {
  height: 100%;
  transition: width .5s var(--ease-out);
}
.sA { background: var(--c1); }
.sB { background: var(--c3); }
.sC { background: var(--c4); }
.sD { background: var(--c5); }

.sim-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 13px;
  color: var(--muted);
}
.sim-legend b {
  color: var(--text);
  margin-left: 4px;
}
.sim-msg {
  margin-top: 18px;
  padding: 12px 16px;
  background: var(--primary-light);
  border-radius: 8px;
  font-weight: 500;
  color: var(--primary-dark);
  transition: background .3s;
}

/* ============ ICÔNES DES FONCTIONNALITÉS ============ */
.feature .ico {
  font-size: 30px;
  margin-bottom: 10px;
  display: inline-block;
  transition: transform .3s;
}
.feature:hover .ico {
  transform: scale(1.25) rotate(-8deg);
}

/* ============ CHIPS ============ */
.chip {
  transition: transform .2s, background .2s, border-color .2s, opacity .6s;
  cursor: default;
}
.chip:hover {
  transform: translateY(-4px) scale(1.06);
  background: var(--primary-light);
  border-color: var(--primary);
}
.chip img {
  width: 24px;
  height: 24px;
  vertical-align: middle;
  margin-right: 8px;
}

/* ============ FAQ ============ */
.faq details .faq-content {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.4s ease, opacity 0.4s ease;
}

.faq details.is-open .faq-content {
  grid-template-rows: 1fr;
  opacity: 1;
}

.faq details .faq-content > p {
  overflow: hidden;
  margin: 0;
  min-height: 0;
}

.faq details summary {
  list-style: none;
  cursor: pointer;
}

.faq details summary::-webkit-details-marker {
  display: none;
}

/* ============ CTA ============ */
.cta-anim {
  position: relative;
  overflow: hidden;
}
.cta-anim > *:not(.bubbles) {
  position: relative;
  z-index: 2;
}

/* ============ MOBILE ============ */
@media (max-width: 800px) {
  .steps-connected::before { display: none; }
  .sim {
    flex-direction: column;
    padding: 22px;
  }
  .chip-float { display: none; }
  .hero-card h1 { font-size: 27px; }
  .phone { max-width: 290px; }
}

/* ============ ACCESSIBILITÉ ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .reveal { opacity: 1; transform: none; }
  .marquee-track { animation: none; }
}